refactor(gui): rework ui-question to the terminal slot standard
Contract face moves to contract/slots.ts (PropsRuntime composition off the conversation SlotMap entry, flat answer/cancel injected share); apply takes the ui-sidebar terminal form (strict need() service reads, ctx.effect-wrapped single register, framework-resolved sessionId); tests upgrade to the terminal style (props-direct component specs with standard-kit stubs, real-registry apply spec with children-declared slot, fiber-teardown case).
This commit is contained in:
@@ -1,16 +1,12 @@
|
||||
import { useState, type KeyboardEvent } from 'react'
|
||||
import clsx from 'clsx'
|
||||
import type { QuestionResponsePayload } from '@deepseek-ai/dsh-client-connection/client'
|
||||
import {
|
||||
Button, IconCheckOutline16, IconChevronLeftOutline14, IconChevronRightOutline14,
|
||||
IconCloseOutline16, IconEditOutline16,
|
||||
} from '@deepseek-ai/dsh-client-ui-primitives'
|
||||
import type { QuestionComposerOwnerProps } from '@deepseek-ai/dsh-client-ui-conversation/client'
|
||||
import type { QuestionAnswer, QuestionComposerProps } from './contract/slots.ts'
|
||||
import css from './QuestionComposer.module.css'
|
||||
|
||||
type QuestionInteraction = QuestionComposerOwnerProps['interaction']
|
||||
type Answer = QuestionResponsePayload['answer']
|
||||
|
||||
interface DraftAnswer {
|
||||
selected: string[]
|
||||
custom: string
|
||||
@@ -18,19 +14,6 @@ interface DraftAnswer {
|
||||
skipped: boolean
|
||||
}
|
||||
|
||||
/** Actions assembled from the session object layer. */
|
||||
export interface QuestionComposerInjected {
|
||||
actions: {
|
||||
answer(interaction: QuestionInteraction, answer: Answer): Promise<void>
|
||||
cancel(interaction: QuestionInteraction): Promise<void>
|
||||
}
|
||||
}
|
||||
|
||||
/** Consumed question-composer props: the slot's owner share & the injected
|
||||
* share. A strict subset of the composed props the register site proves
|
||||
* (the framework session/global standard kit goes unconsumed here). */
|
||||
export type QuestionComposerProps = QuestionComposerOwnerProps & QuestionComposerInjected
|
||||
|
||||
/**
|
||||
* Split the conventional recommendation suffix without changing the answer value.
|
||||
* @param label - Original option label returned if selected.
|
||||
@@ -66,7 +49,7 @@ export function QuestionComposer(props: QuestionComposerProps) {
|
||||
return <QuestionFlow key={props.interaction.rpcId} {...props} />
|
||||
}
|
||||
|
||||
function QuestionFlow({ interaction, actions }: QuestionComposerProps) {
|
||||
function QuestionFlow({ interaction, answer: submitAnswer, cancel }: QuestionComposerProps) {
|
||||
const questions = interaction.questions
|
||||
const [index, setIndex] = useState(0)
|
||||
const [drafts, setDrafts] = useState<DraftAnswer[]>(() => questions.map(question => ({
|
||||
@@ -81,7 +64,7 @@ function QuestionFlow({ interaction, actions }: QuestionComposerProps) {
|
||||
const cancelFlow = (): void => {
|
||||
setBusy('cancel')
|
||||
setError(null)
|
||||
void actions.cancel(interaction).catch((cause: unknown) => {
|
||||
void cancel(interaction).catch((cause: unknown) => {
|
||||
setBusy(null)
|
||||
setError(cause instanceof Error ? cause.message : String(cause))
|
||||
})
|
||||
@@ -122,7 +105,7 @@ function QuestionFlow({ interaction, actions }: QuestionComposerProps) {
|
||||
setError('请先完成这道问题。')
|
||||
return
|
||||
}
|
||||
const answer: Answer = {
|
||||
const answer: QuestionAnswer = {
|
||||
answers: questions.map((item, itemIndex) => {
|
||||
const value = values[itemIndex] as DraftAnswer
|
||||
if (value.skipped) return { id: item.id, selected: [] }
|
||||
@@ -136,7 +119,7 @@ function QuestionFlow({ interaction, actions }: QuestionComposerProps) {
|
||||
}
|
||||
setBusy('answer')
|
||||
setError(null)
|
||||
void actions.answer(interaction, answer).catch((cause: unknown) => {
|
||||
void submitAnswer(interaction, answer).catch((cause: unknown) => {
|
||||
setBusy(null)
|
||||
setError(cause instanceof Error ? cause.message : String(cause))
|
||||
})
|
||||
|
||||
42
packages/client/ui-question/src/client/contract/slots.ts
Normal file
42
packages/client/ui-question/src/client/contract/slots.ts
Normal file
@@ -0,0 +1,42 @@
|
||||
/**
|
||||
* Question-composer slot contract: the registrant-side props composition for
|
||||
* the conversation-owned `conversation.composer` keyed slot. The own injected
|
||||
* share is declared here (a share's type lives with whoever wires it); the
|
||||
* runtime share — the owner-dispatched `interaction` plus the framework
|
||||
* session/global standard kit — is PropsRuntime<'conversation.composer'>,
|
||||
* resolved off ui-conversation's SlotMap declaration and never re-stated.
|
||||
* Single domain — this is the package's whole contract surface.
|
||||
*/
|
||||
import type { PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
|
||||
// Also pulls ui-conversation's SlotMap merge (the 'conversation.composer'
|
||||
// entry) into every program that sees this contract, so PropsRuntime resolves.
|
||||
import type { QuestionComposerOwnerProps } from '@deepseek-ai/dsh-client-ui-conversation/client'
|
||||
import type { QuestionResponsePayload } from '@deepseek-ai/dsh-client-connection/client'
|
||||
|
||||
/** The pending question interaction the owner dispatches into the keyed slot. */
|
||||
export type QuestionInteraction = QuestionComposerOwnerProps['interaction']
|
||||
|
||||
/** One structured answer batch covering every question of the request. */
|
||||
export type QuestionAnswer = QuestionResponsePayload['answer']
|
||||
|
||||
/**
|
||||
* Registrant-private injected share (arrives via the register inject
|
||||
* factory): plain session-scoped callbacks only — the question data rides the
|
||||
* owner share and drafts are component-local. A type alias, not an interface:
|
||||
* the alias carries an implicit index signature, so the factory's return
|
||||
* crosses the registry's `Record<string, unknown>` boundary uncast.
|
||||
*/
|
||||
export type QuestionComposerInjected = {
|
||||
/** Deliver the whole answer batch; a rejected receipt surfaces as a thrown error. */
|
||||
answer: (interaction: QuestionInteraction, answer: QuestionAnswer) => Promise<void>
|
||||
/** Reject the whole wait (the host resolves the tool call as cancelled). */
|
||||
cancel: (interaction: QuestionInteraction) => Promise<void>
|
||||
}
|
||||
|
||||
/**
|
||||
* Full component props: the framework runtime share (owner `interaction` +
|
||||
* session/global standard kit) plus the own injected share. No children are
|
||||
* declared and no store is registered, so no PropsRenderSlots/PropsStore
|
||||
* term appears.
|
||||
*/
|
||||
export type QuestionComposerProps = PropsRuntime<'conversation.composer'> & QuestionComposerInjected
|
||||
@@ -1,50 +1,66 @@
|
||||
/**
|
||||
* Web question plugin, browser half: registers a composer replacement for
|
||||
* pending ask_user_question requests into the conversation-declared keyed
|
||||
* `conversation.composer` slot (single register API — the slot exists because
|
||||
* the conversation entry's children declaration created it).
|
||||
* Web question plugin, browser half: QuestionComposer registered as the
|
||||
* `question` entry of the conversation-declared keyed `conversation.composer`
|
||||
* slot. Pure consumer — the pending interaction arrives through the owner
|
||||
* share at the dispatch site, drafts are component-local, and the inject
|
||||
* surface is plain session-scoped callbacks closed over the plugin's own ctx
|
||||
* (slot design sections 5 and 6); props composition in contract/slots.ts.
|
||||
* Export discipline: packages/client/AGENTS.md.
|
||||
*/
|
||||
import type { Context } from 'cordis'
|
||||
import type { SessionId, SessionsService, SlotsService } from '@deepseek-ai/dsh-client-runtime/client'
|
||||
import { QuestionComposer, type QuestionComposerInjected } from './QuestionComposer.tsx'
|
||||
import type { ClientContext, SessionId, SessionsService, SlotsService } from '@deepseek-ai/dsh-client-runtime/client'
|
||||
import type { QuestionComposerInjected } from './contract/slots.ts'
|
||||
import { QuestionComposer } from './QuestionComposer.tsx'
|
||||
|
||||
export { QuestionComposer, parseRecommendedLabel } from './QuestionComposer.tsx'
|
||||
export type { QuestionComposerInjected, QuestionComposerProps } from './QuestionComposer.tsx'
|
||||
export type {
|
||||
QuestionAnswer, QuestionComposerInjected, QuestionComposerProps, QuestionInteraction,
|
||||
} from './contract/slots.ts'
|
||||
|
||||
/** Required browser services. */
|
||||
/** Required services (cordis fiber inject — the loader passes the whole export surface as an object plugin). */
|
||||
export const inject = ['slots', 'sessions']
|
||||
|
||||
/**
|
||||
* Register the question composer into the conversation-owned keyed slot.
|
||||
* @param ctx - Browser plugin context carrying slots and sessions.
|
||||
*/
|
||||
export function apply(ctx: Context): void {
|
||||
const slots = ctx.get('slots') as SlotsService | undefined
|
||||
const sessions = ctx.get('sessions') as SessionsService | undefined
|
||||
if (slots === undefined || sessions === undefined) {
|
||||
throw new Error('ui-question: slots and sessions services are required')
|
||||
}
|
||||
slots.register({
|
||||
name: 'conversation.composer',
|
||||
key: 'question',
|
||||
inject: (sessionId: SessionId): QuestionComposerInjected => {
|
||||
const session = sessions.manager.get(sessionId)
|
||||
return {
|
||||
actions: {
|
||||
async answer(interaction, answer) {
|
||||
const receipt = await session.answerQuestion(interaction.rpcId, answer)
|
||||
if (!receipt.accepted) {
|
||||
throw new Error(`question response rejected: ${receipt.reason}`)
|
||||
}
|
||||
},
|
||||
async cancel(interaction) {
|
||||
const receipt = await session.cancelQuestion(interaction.rpcId)
|
||||
if (!receipt.accepted) {
|
||||
throw new Error(`question cancellation rejected: ${receipt.reason}`)
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
}, QuestionComposer)
|
||||
/** Resolve a service via ctx.get, failing loud. This package's program holds
|
||||
* the node half's host-side Context merges too (tool-ask-user), so property
|
||||
* access would resolve the colliding host `sessions` seat — same budgeted
|
||||
* cast as ui-conversation's need(). */
|
||||
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-parameters -- caller-named cast target
|
||||
function need<T>(ctx: ClientContext, name: string): T {
|
||||
const value = ctx.get(name) as T | undefined
|
||||
if (value === undefined) throw new Error(`ui-question: ${name} service unavailable`)
|
||||
return value
|
||||
}
|
||||
|
||||
/**
|
||||
* Client plugin body: register the question composer into the keyed composer
|
||||
* slot. The inject factory returns receipt-checked answer/cancel callbacks
|
||||
* only (no hooks, no store lines) — the framework resolves the sessionId, and
|
||||
* the question payload rides the owner share.
|
||||
* @param ctx - client root context.
|
||||
*/
|
||||
export function apply(ctx: ClientContext): void {
|
||||
const slots = need<SlotsService>(ctx, 'slots')
|
||||
const sessions = need<SessionsService>(ctx, 'sessions')
|
||||
const injectProps = (sessionId: SessionId): QuestionComposerInjected => {
|
||||
const session = sessions.manager.get(sessionId)
|
||||
return {
|
||||
answer: async (interaction, answer) => {
|
||||
const receipt = await session.answerQuestion(interaction.rpcId, answer)
|
||||
if (!receipt.accepted) {
|
||||
throw new Error(`question response rejected: ${receipt.reason}`)
|
||||
}
|
||||
},
|
||||
cancel: async (interaction) => {
|
||||
const receipt = await session.cancelQuestion(interaction.rpcId)
|
||||
if (!receipt.accepted) {
|
||||
throw new Error(`question cancellation rejected: ${receipt.reason}`)
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
ctx.effect(
|
||||
() => slots.register(
|
||||
{ name: 'conversation.composer', key: 'question', inject: injectProps },
|
||||
QuestionComposer,
|
||||
),
|
||||
'ui-question: composer slot registration',
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user