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:
imccyu
2026-07-23 14:23:10 +08:00
parent 61dc4b6b99
commit 1210735959
5 changed files with 209 additions and 118 deletions

View File

@@ -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))
})

View 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

View File

@@ -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',
)
}