feat(web): answerable ask_user_question flow with toolview verdict row
The pending question now owns exactly two surfaces: the redesigned QuestionComposer takeover (footer pager, checkbox multi-select, always-visible custom input, locale-injected bilingual chrome) collects the answers, and a dedicated ask_user_question toolview row reports the interaction outcome — waiting, N/M answered, cancelled (ASK_CANCELLED), or interrupted with stopped semantics (ASK_ABORTED). PendingCard narrows to approval waits only. Toolview leading icons and the hover chevron unify on the tertiary label color, the checklist glyph matches the 14px figma extract, and dev-watch registers CSS modules so css-only edits rebuild.
This commit is contained in:
@@ -1,16 +1,19 @@
|
||||
/**
|
||||
* apply wiring on a real cordis Context + SlotsService: QuestionComposer
|
||||
* registered as the `question` entry of the conversation-declared composer
|
||||
* slot with ZERO business face (data and verbs ride the dispatched carrier),
|
||||
* load-order fail-loud, and fiber-teardown unregistration. Component and
|
||||
* domain-face behavior is covered props-direct in question-composer.spec.tsx;
|
||||
* no renderer machinery here.
|
||||
* apply wiring on a real cordis Context + SlotsService + LocaleService:
|
||||
* QuestionComposer registered as the `question` entry of the
|
||||
* conversation-declared composer slot, bilingual dictionaries registered
|
||||
* under the `question` namespace, the locale share handed through the inject
|
||||
* face, load-order fail-loud, and fiber-teardown unregistration. Component
|
||||
* and domain-face behavior is covered props-direct in
|
||||
* question-composer.spec.tsx; no renderer machinery here.
|
||||
*/
|
||||
import { Context } from 'cordis'
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import { describe, expect, it, vi } from 'vitest'
|
||||
import { SlotsService } from '@deepseek-ai/dsh-client-runtime/client'
|
||||
import { LocaleService } from '@deepseek-ai/dsh-client-locale/client'
|
||||
import type { QuestionComposerInjected } from '../src/client/contract/slots.ts'
|
||||
import { QuestionComposer } from '../src/client/QuestionComposer.tsx'
|
||||
import { apply, inject } from '../src/client/index.ts'
|
||||
import { apply, inject, QUESTION_NS } from '../src/client/index.ts'
|
||||
|
||||
async function bench() {
|
||||
const ctx = new Context()
|
||||
@@ -24,12 +27,14 @@ async function bench() {
|
||||
// 'conversation' inject is an ordering edge (the declaring plugin provides
|
||||
// it after declaring the chain); the bench declares the chain itself.
|
||||
ctx.provide('conversation', {})
|
||||
return { ctx, slots }
|
||||
const locale = new LocaleService(ctx)
|
||||
ctx.provide('locale', locale)
|
||||
return { ctx, slots, locale }
|
||||
}
|
||||
|
||||
describe('apply', () => {
|
||||
it('declares the services it binds', () => {
|
||||
expect(inject).toEqual(['slots', 'conversation'])
|
||||
expect(inject).toEqual(['slots', 'conversation', 'locale'])
|
||||
})
|
||||
|
||||
it('fails loud when no live entry has declared the composer slot', async () => {
|
||||
@@ -38,31 +43,46 @@ describe('apply', () => {
|
||||
// Satisfy the ordering inject without declaring the chain: apply must
|
||||
// then hit the undeclared-slot throw, not sit waiting on the service.
|
||||
ctx.provide('conversation', {})
|
||||
ctx.provide('locale', new LocaleService(ctx))
|
||||
await expect(ctx.plugin({ inject: [...inject], apply }))
|
||||
.rejects.toThrow(/slot "conversation.composer" is not declared/)
|
||||
})
|
||||
|
||||
it('registers the question entry: routing selector, no inject face', async () => {
|
||||
const { ctx, slots } = await bench()
|
||||
it('registers the question entry: routing selector plus the locale share face', async () => {
|
||||
const { ctx, slots, locale } = await bench()
|
||||
await ctx.plugin({ inject: [...inject], apply }).await()
|
||||
const entry = slots.entries('conversation.composer')[0]!
|
||||
expect(entry.component).toBe(QuestionComposer)
|
||||
// The whole behavior surface rides the matched carrier: no business face.
|
||||
expect(entry.inject).toBeUndefined()
|
||||
// The selector narrows the chain currency: question wait in → that wait; none → null.
|
||||
const select = entry.select as (owner: { interactions: readonly { kind: string }[] }) => unknown
|
||||
const question = { kind: 'question' }
|
||||
expect(select({ interactions: [{ kind: 'approval' }, question] })).toBe(question)
|
||||
expect(select({ interactions: [{ kind: 'approval' }] })).toBeNull()
|
||||
expect(select({ interactions: [] })).toBeNull()
|
||||
// The inject face carries the namespace-bound translator and the live
|
||||
// locale snapshot source (subscription rides locale/change).
|
||||
const face = (entry.inject as unknown as () => QuestionComposerInjected)()
|
||||
expect(face.t('action.submit')).toBe('提交')
|
||||
expect(face.hooks.locale.getSnapshot()).toBe(locale.getLocale())
|
||||
const changed = vi.fn()
|
||||
const off = face.hooks.locale.subscribe(changed)
|
||||
locale.setLocale('en')
|
||||
expect(changed).toHaveBeenCalledTimes(1)
|
||||
expect(face.t('action.submit')).toBe('Submit')
|
||||
off()
|
||||
locale.setLocale('zh')
|
||||
expect(changed).toHaveBeenCalledTimes(1)
|
||||
})
|
||||
|
||||
it('teardown unregisters the slot entry', async () => {
|
||||
const { ctx, slots } = await bench()
|
||||
it('teardown unregisters the slot entry and the dictionaries', async () => {
|
||||
const { ctx, slots, locale } = await bench()
|
||||
const fiber = ctx.plugin({ inject: [...inject], apply })
|
||||
await fiber.await()
|
||||
expect(slots.entries('conversation.composer')).toHaveLength(1)
|
||||
expect(locale.bind(QUESTION_NS)('action.submit')).toBe('提交')
|
||||
await fiber.dispose()
|
||||
expect(slots.entries('conversation.composer')).toHaveLength(0)
|
||||
// Unregistered namespace: the lookup chain bottoms out at the key itself.
|
||||
expect(locale.bind(QUESTION_NS)('action.submit')).toBe('action.submit')
|
||||
})
|
||||
})
|
||||
|
||||
@@ -8,20 +8,29 @@ import { PendingWait } from '@deepseek-ai/dsh-client-runtime/client'
|
||||
import type { RpcReceipt } from '@deepseek-ai/dsh-client-connection/client'
|
||||
import { RpcId } from '@deepseek-ai/dsh-client-connection/client'
|
||||
import type { SnapshotSelectorHook } from '@deepseek-ai/dsh-client-ui-slots'
|
||||
import type { LocaleDict, LocaleSnapshot, Translate } from '@deepseek-ai/dsh-client-locale/client'
|
||||
import { PendingQuestion } from '../src/client/contract/slots.ts'
|
||||
import {
|
||||
QuestionComposer, parseQuestionTitle, parseRecommendedLabel,
|
||||
} from '../src/client/QuestionComposer.tsx'
|
||||
import { en, zh } from '../src/client/locales.ts'
|
||||
import { QuestionComposer, parseRecommendedLabel } from '../src/client/QuestionComposer.tsx'
|
||||
|
||||
afterEach(cleanup)
|
||||
|
||||
const SID = 's1' as SessionId
|
||||
|
||||
/** Framework standard-kit stubs: the composer consumes none of them, the
|
||||
* composed props type mandates their delivery (framework hooks are plain
|
||||
* stubs per the client testing discipline). */
|
||||
/** Dictionary-backed translate stub (the lookup chain is the locale package's contract, not re-tested here). */
|
||||
const translateOver = (dict: LocaleDict): Translate => key => dict[key] ?? key
|
||||
|
||||
/** Locale-share stub: static snapshot, no subscription machinery. */
|
||||
const useLocale: SnapshotSelectorHook<LocaleSnapshot> = select =>
|
||||
select({ active: 'zh', locales: [], revision: 0 })
|
||||
|
||||
/** Framework standard-kit stubs: the composer consumes only the locale share;
|
||||
* the composed props type mandates delivery of the rest (framework hooks are
|
||||
* plain stubs per the client testing discipline). */
|
||||
const kit = {
|
||||
sessionId: SID,
|
||||
t: translateOver(zh),
|
||||
useLocale,
|
||||
useSession: (() => { throw new Error('unused') }) as unknown as SnapshotSelectorHook<ConversationSnapshot>,
|
||||
useSessions: (() => { throw new Error('unused') }) as unknown as SnapshotSelectorHook<SessionListState>,
|
||||
useWorkspaces: (() => { throw new Error('unused') }) as unknown as SnapshotSelectorHook<WorkspaceListState>,
|
||||
@@ -67,6 +76,7 @@ describe('QuestionComposer', () => {
|
||||
const { carrier, respond } = wait()
|
||||
render(<QuestionComposer matched={carrier} interactions={[carrier]} {...kit} />)
|
||||
|
||||
expect(screen.getByText('偏好')).toBeTruthy()
|
||||
expect(screen.getByText('1 / 3')).toBeTruthy()
|
||||
expect(screen.getByText('推荐')).toBeTruthy()
|
||||
expect(screen.getByText('工程落地型')).toBeTruthy()
|
||||
@@ -84,9 +94,8 @@ describe('QuestionComposer', () => {
|
||||
fireEvent.keyDown(custom, { key: 'Enter' })
|
||||
|
||||
expect(screen.getByText('3 / 3')).toBeTruthy()
|
||||
expect(screen.getByText('选择重要信号')).toBeTruthy()
|
||||
expect(screen.getByText('可多选')).toBeTruthy()
|
||||
expect(screen.queryByText('(可多选)')).toBeNull()
|
||||
// The model's question text renders verbatim — no marker filtering.
|
||||
expect(screen.getByText('选择重要信号(可多选)')).toBeTruthy()
|
||||
fireEvent.click(screen.getByRole('checkbox', { name: '系统设计' }))
|
||||
fireEvent.click(screen.getByRole('checkbox', { name: '系统设计' }))
|
||||
fireEvent.click(screen.getByRole('checkbox', { name: '系统设计' }))
|
||||
@@ -140,11 +149,10 @@ describe('QuestionComposer', () => {
|
||||
expect(screen.getByText('3 / 3')).toBeTruthy()
|
||||
})
|
||||
|
||||
it('opens custom input, reports missing skipped answers, and supports header navigation', () => {
|
||||
it('shows the inline custom input, reports missing answers, and supports pager navigation', () => {
|
||||
const { carrier, respond } = wait()
|
||||
render(<QuestionComposer matched={carrier} interactions={[carrier]} {...kit} />)
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: '其他,请填写自定义答案' }))
|
||||
expect(screen.getByPlaceholderText('输入你的答案')).toBeTruthy()
|
||||
fireEvent.click(screen.getByRole('radio', { name: '工程落地型' }))
|
||||
const emptyCustom = screen.getByPlaceholderText('输入你的答案')
|
||||
@@ -205,6 +213,16 @@ describe('QuestionComposer', () => {
|
||||
expect(await screen.findByText('字符串错误')).toBeTruthy()
|
||||
})
|
||||
|
||||
it('renders chrome copy through the English dictionary', () => {
|
||||
const respond = vi.fn(() => Promise.resolve<RpcReceipt>({ accepted: true }))
|
||||
const carrier = new PendingWait(
|
||||
'question', RpcId('solo'), SID, { questions: [{ id: 'detail', question: '补充你的要求' }] }, respond)
|
||||
render(<QuestionComposer matched={carrier} interactions={[carrier]} {...kit} t={translateOver(en)} />)
|
||||
expect(screen.getByLabelText('Dismiss all questions')).toBeTruthy()
|
||||
expect(screen.getByRole('button', { name: 'Skip this question' })).toBeTruthy()
|
||||
expect(screen.getByPlaceholderText('Type your answer')).toBeTruthy()
|
||||
})
|
||||
|
||||
it('same-key carrier replacement (baseline replay) keeps drafts', () => {
|
||||
const first = wait('same-id')
|
||||
const view = render(<QuestionComposer matched={first.carrier} interactions={[first.carrier]} {...kit} />)
|
||||
@@ -260,11 +278,3 @@ describe('parseRecommendedLabel', () => {
|
||||
expect(parseRecommendedLabel('Plain')).toEqual({ label: 'Plain', recommended: false })
|
||||
})
|
||||
})
|
||||
|
||||
describe('parseQuestionTitle', () => {
|
||||
it('removes Chinese and ASCII multi-select suffixes', () => {
|
||||
expect(parseQuestionTitle('选择信号(可多选)')).toBe('选择信号')
|
||||
expect(parseQuestionTitle('选择信号 (可多选)')).toBe('选择信号')
|
||||
expect(parseQuestionTitle('选择信号')).toBe('选择信号')
|
||||
})
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user