diff --git a/src/components/Conversation.tsx b/src/components/Conversation.tsx index cd7a34f..a1af7ad 100644 --- a/src/components/Conversation.tsx +++ b/src/components/Conversation.tsx @@ -4,7 +4,7 @@ import { useEffect, useMemo, useRef, useState } from 'react' import { marked } from 'marked' import { api } from '../api' import { store, useStore, activeRun, type LiveState, type ContextObs } from '../store' -import { liveToMessage } from '../live' +import { liveToMessage, showProcessInline } from '../live' import type { Message, Part, HITLCard } from '../contracts' import { UIRenderer, InlineConfirmCard, hasOpenConfirm } from '@ui' import { docBridge } from './Workbench' @@ -87,11 +87,14 @@ function ProcessCollapse({ parts }: { parts: Part[] }) { const LONG_REPLY_CHARS = 800 function LongReplyCollapse({ text }: { text: string }) { + // 摘句取压缩空白后的前 100 字;字数按 Markdown 源码长度计。 + const excerpt = text.replace(/\s+/g, ' ').trim().slice(0, 100) return (
📄 长回复 - {text.length} 字(点击展开) + {text.length} 字(按 Markdown 源码计) + {excerpt && {excerpt}…}
@@ -113,7 +116,7 @@ function AssistantMessage({ msg, live }: { msg: Message; live?: LiveState | null // 流式期间:工具/思考阶段过程实时展开;一旦进入 responding(最终回复开始流式) // 立即折叠过程,只显式显示回复(Cursor 式);工具恢复(acting)时重新展开。 // run 终态后:按偏好折叠为摘要行(可回看)。 - const showProcessInline = live ? live.phase !== 'responding' : !autoCollapse + const showProcess = showProcessInline(live ?? null, autoCollapse) const lastContentIdx = split.content.length - 1 return (
@@ -122,7 +125,7 @@ function AssistantMessage({ msg, live }: { msg: Message; live?: LiveState | null 助手 {live && {live.phase}}
- {split.process.length > 0 && (showProcessInline + {split.process.length > 0 && (showProcess ? split.process.map((p, i) =>
) : )} {split.content.map((p, i) => { @@ -250,7 +253,7 @@ export function Conversation() { useEffect(() => { bodyRef.current?.scrollTo({ top: bodyRef.current.scrollHeight }) - }, [messages.length, live?.texts, live?.thinking, live?.toolCalls.length, live?.phase, activeHitl.length]) + }, [messages.length, live?.items, live?.phase, activeHitl.length]) const send = async () => { if (!text.trim() && attachmentIds.length === 0) return diff --git a/src/live.ts b/src/live.ts index dac750b..2992b1a 100644 --- a/src/live.ts +++ b/src/live.ts @@ -1,36 +1,91 @@ -// live 流式投影纯逻辑(中栏过程/回复分离):按 delta index 分桶、合成临时消息。 -// 新文本桶只在新轮开启(必经工具轮),故除最后一桶外均为工具轮过程解说(process); -// 最后一桶是正在流式的回复——与落库消息的 process 语义同构,终态对账无跳变。 +// live 流式投影纯逻辑(中栏过程/回复分离):事件按到达序并入 items——thinking/text +// 增量各并入其末段,工具按当前位置落位。SSE 有序且后端每轮按 思考→正文→工具 追加落库 +// 部件,事件到达序即落库序,故合成消息与落库部件同构,终态对账不重排。 +// 文本段是否为过程(process)由「本段之后、下一个思考/文本段之前是否出现工具」判定, +// 对齐落库的 Process: len(calls) > 0——工具轮解说的 tool.call 一到即并入过程区, +// 无需等下一轮文本段开启。 +// 残余边界:某轮若既无正文也无思考、仅静默发起工具,其调用会被并入上一文本段(需协议 +// 携带轮次归属才能消除;现行事件流无法区分)。 import type { Message, Part } from './contracts' import type { LiveState } from './store' -export interface TextBucket { index: number; text: string } +// 到达序部件流的元素。 +export type LiveItem = + | { kind: 'thinking'; text: string } + | { kind: 'text'; index: number; text: string } + | { kind: 'tool'; name: string; status?: string; summary?: string } -// applyTextDelta 把一段正文增量并入桶序列:index 与末桶相同则追加,否则开新桶。 -export function applyTextDelta(buckets: TextBucket[], index: number, delta: string): TextBucket[] { - const last = buckets[buckets.length - 1] - if (last && last.index === index) { - const out = buckets.slice() - out[out.length - 1] = { index, text: last.text + delta } +// applyThinkingDelta 并入思考增量:末段是思考则追加,否则开启新思考段(新轮开始)。 +export function applyThinkingDelta(items: LiveItem[], delta: string): LiveItem[] { + const last = items[items.length - 1] + if (last && last.kind === 'thinking') { + const out = items.slice() + out[out.length - 1] = { kind: 'thinking', text: last.text + delta } return out } - return [...buckets, { index, text: delta }] + return [...items, { kind: 'thinking', text: delta }] +} + +// applyTextDelta 并入正文增量:末段是同 index 的文本段则追加,否则开启新文本段。 +export function applyTextDelta(items: LiveItem[], index: number, delta: string): LiveItem[] { + const last = items[items.length - 1] + if (last && last.kind === 'text' && last.index === index) { + const out = items.slice() + out[out.length - 1] = { kind: 'text', index, text: last.text + delta } + return out + } + return [...items, { kind: 'text', index, text: delta }] +} + +export function applyToolCall(items: LiveItem[], name: string): LiveItem[] { + return [...items, { kind: 'tool', name }] +} + +// applyToolResult 回填最近一个未决工具(与落库的尾部配对语义一致)。 +export function applyToolResult(items: LiveItem[], status: string, summary?: string): LiveItem[] { + for (let i = items.length - 1; i >= 0; i--) { + const it = items[i] + if (it.kind === 'tool' && it.status === undefined) { + const out = items.slice() + out[i] = { kind: 'tool', name: it.name, status, summary } + return out + } + } + return items } // liveToMessage:run 进行中没有已落库的助手消息,把 LiveState 合成同构临时消息, // 复用 AssistantMessage 渲染(思考/工具/文本实时上屏);终态对账后由真消息替代。 export function liveToMessage(live: LiveState): Message { - const parts: Part[] = [] - if (live.thinking) parts.push({ type: 'thinking', text: live.thinking, process: true }) - for (let i = 0; i < live.texts.length; i++) { - parts.push({ type: 'text', text: live.texts[i].text, process: i < live.texts.length - 1 || undefined }) + // 文本段是否为过程:本段之后、下一个思考/文本段之前出现工具(= 该轮带工具调用)。 + const textProcess = new Map() + for (let i = 0; i < live.items.length; i++) { + if (live.items[i].kind !== 'text') continue + let hasCalls = false + for (let j = i + 1; j < live.items.length && live.items[j].kind === 'tool'; j++) hasCalls = true + textProcess.set(i, hasCalls) } - for (const tc of live.toolCalls) { - parts.push({ type: 'tool_call', process: true, toolCall: { id: '', name: tc.name } }) - if (tc.status !== undefined) { - parts.push({ type: 'tool_result', process: true, toolCall: { id: '', name: tc.name }, - toolResult: { callId: '', status: tc.status === 'error' ? 'error' : 'ok', summary: tc.summary } }) + const parts: Part[] = [] + for (let i = 0; i < live.items.length; i++) { + const it = live.items[i] + if (it.kind === 'thinking') { + if (it.text) parts.push({ type: 'thinking', text: it.text, process: true }) + } else if (it.kind === 'tool') { + parts.push({ type: 'tool_call', process: true, toolCall: { id: '', name: it.name } }) + if (it.status !== undefined) { + parts.push({ type: 'tool_result', process: true, toolCall: { id: '', name: it.name }, + toolResult: { callId: '', status: it.status === 'error' ? 'error' : 'ok', summary: it.summary } }) + } + } else { + parts.push({ type: 'text', text: it.text, process: textProcess.get(i) || undefined }) } } return { id: `live:${live.runId}`, conversationId: '', role: 'assistant', runId: live.runId, parts, createdAt: '' } } + +// showProcessInline:流式期间过程区是否展开——thinking/acting 实时展开;一旦进入 +// responding(最终回复开始流式)立即折叠,只显示回复(Cursor 式),工具恢复再展开。 +// 非 live 消息随「自动折叠过程」偏好。 +export function showProcessInline(live: LiveState | null, autoCollapse: boolean): boolean { + return live ? live.phase !== 'responding' : !autoCollapse +} diff --git a/src/store.ts b/src/store.ts index bf064ff..04047ca 100644 --- a/src/store.ts +++ b/src/store.ts @@ -2,7 +2,7 @@ // useSyncExternalStore 驱动;live 流式部件为会话内临时态,run 终态后由消息树对账收敛。 import { useSyncExternalStore } from 'react' import { api, connectEvents } from './api' -import { applyTextDelta } from './live' +import { applyTextDelta, applyThinkingDelta, applyToolCall, applyToolResult, type LiveItem } from './live' import type { Project, Conversation, Message, Run, Artifact, HITLCard, PlanSnapshot, TodoList, AgentProfile, StreamEvent, PluginPanel, ActivityCard, @@ -17,11 +17,9 @@ export interface ContextObs { export interface LiveState { runId: string phase: string - thinking: string - // 按 delta index 分桶的文本:新桶只在新轮开启(必经工具轮),故除最后一桶外 - // 均为工具轮过程解说(process);最后一桶是正在流式的回复。 - texts: { index: number; text: string }[] - toolCalls: { name: string; status?: string; summary?: string }[] + // 到达序部件流(见 live.ts LiveItem):事件到达序即落库序,与落库部件的轮次穿插序 + // 同构;文本段是否为过程由「本段内是否出现工具调用」判定,tool.call 一到即改标。 + items: LiveItem[] agentNotes: Record startedAt: number } @@ -256,26 +254,22 @@ export const store = { switch (e.type) { case 'message.delta': { const p = e.payload as { index: number; text: string } - set({ live: touchLive(e.runId ?? '', l => { l.texts = applyTextDelta(l.texts, p.index, p.text) }) }) + set({ live: touchLive(e.runId ?? '', l => { l.items = applyTextDelta(l.items, p.index, p.text) }) }) break } case 'thinking.delta': { const p = e.payload as { index: number; text: string } - set({ live: touchLive(e.runId ?? '', l => { l.thinking += p.text }) }) + set({ live: touchLive(e.runId ?? '', l => { l.items = applyThinkingDelta(l.items, p.text) }) }) break } case 'tool.call': { const p = e.payload as { callId: string; name: string } - set({ live: touchLive(e.runId ?? '', l => { l.toolCalls.push({ name: p.name }) }) }) + set({ live: touchLive(e.runId ?? '', l => { l.items = applyToolCall(l.items, p.name) }) }) break } case 'tool.result': { const p = e.payload as { callId: string; status: string; summary?: string } - set({ live: touchLive(e.runId ?? '', l => { - for (let i = l.toolCalls.length - 1; i >= 0; i--) { - if (l.toolCalls[i].status === undefined) { l.toolCalls[i] = { ...l.toolCalls[i], status: p.status, summary: p.summary }; break } - } - }) }) + set({ live: touchLive(e.runId ?? '', l => { l.items = applyToolResult(l.items, p.status, p.summary) }) }) break } case 'run.phase': { @@ -370,7 +364,7 @@ export const store = { // 竞态保护:POST 返回前 SSE 事件可能已先行到达并累积(同 run), // 此时保留已累积的 live,只补挂用户消息;否则初始化空 live。 if (!state.live || state.live.runId !== out.run.id) { - set({ live: { runId: out.run.id, phase: 'thinking', thinking: '', texts: [], toolCalls: [], agentNotes: {}, startedAt: Date.now() } }) + set({ live: { runId: out.run.id, phase: 'thinking', items: [], agentNotes: {}, startedAt: Date.now() } }) } set({ messages: [...state.messages, out.message] }) store.connectIfNeeded() @@ -504,8 +498,8 @@ export const store = { } function touchLive(_runId: string, mutate: (l: LiveState) => void): LiveState | null { - const base = state.live ?? { runId: _runId, phase: 'thinking', thinking: '', texts: [], toolCalls: [], agentNotes: {}, startedAt: Date.now() } - const next: LiveState = { ...base, toolCalls: [...base.toolCalls], agentNotes: { ...base.agentNotes } } + const base = state.live ?? { runId: _runId, phase: 'thinking', items: [], agentNotes: {}, startedAt: Date.now() } + const next: LiveState = { ...base, agentNotes: { ...base.agentNotes } } mutate(next) return next } diff --git a/test/live.test.ts b/test/live.test.ts index afac657..62c9726 100644 --- a/test/live.test.ts +++ b/test/live.test.ts @@ -1,48 +1,134 @@ -// live 流式投影纯逻辑测试(中栏过程/回复分离):分桶、process 标记、终态同构。 +// live 流式投影纯逻辑测试(中栏过程/回复分离):到达序并段、process 标记时机、 +// 轮次穿插同构、过程区折叠谓词。 import { describe, it, expect } from 'vitest' -import { applyTextDelta, liveToMessage, type TextBucket } from '../src/live' +import { + applyTextDelta, applyThinkingDelta, applyToolCall, applyToolResult, + liveToMessage, showProcessInline, type LiveItem, +} from '../src/live' import type { LiveState } from '../src/store' function live(over: Partial = {}): LiveState { - return { runId: 'r1', phase: 'thinking', thinking: '', texts: [], toolCalls: [], agentNotes: {}, startedAt: 0, ...over } + return { runId: 'r1', phase: 'thinking', items: [], agentNotes: {}, startedAt: 0, ...over } } -describe('applyTextDelta', () => { - it('appends to the last bucket when index matches', () => { - let b: TextBucket[] = [] - b = applyTextDelta(b, 0, '先查') - b = applyTextDelta(b, 0, '一下') - expect(b).toEqual([{ index: 0, text: '先查一下' }]) +// 两轮流式事件回放:思考→解说文本→工具→思考→最终回复(与后端事件序一致)。 +function twoTurnItems(): LiveItem[] { + let items: LiveItem[] = [] + items = applyThinkingDelta(items, '先想想') + items = applyThinkingDelta(items, '一下') + items = applyTextDelta(items, 0, '我先更新待办。') + items = applyToolCall(items, 'update_todos') + items = applyToolResult(items, 'ok', '已更新') + items = applyThinkingDelta(items, '再想想') + items = applyTextDelta(items, 1, '最终') + items = applyTextDelta(items, 1, '回复') + return items +} + +describe('applyThinkingDelta / applyTextDelta', () => { + it('merges thinking deltas into the last thinking segment', () => { + let items: LiveItem[] = [] + items = applyThinkingDelta(items, '先') + items = applyThinkingDelta(items, '想想') + expect(items).toEqual([{ kind: 'thinking', text: '先想想' }]) }) - it('opens a new bucket when index advances (new turn)', () => { - let b: TextBucket[] = applyTextDelta([], 0, '解说') - b = applyTextDelta(b, 1, '最终') - b = applyTextDelta(b, 1, '回复') - expect(b).toEqual([{ index: 0, text: '解说' }, { index: 1, text: '最终回复' }]) + it('opens a new thinking segment after text/tool (turn boundary)', () => { + let items: LiveItem[] = applyThinkingDelta([], '第一轮思考') + items = applyTextDelta(items, 0, '解说') + items = applyThinkingDelta(items, '第二轮思考') + expect(items).toEqual([ + { kind: 'thinking', text: '第一轮思考' }, + { kind: 'text', index: 0, text: '解说' }, + { kind: 'thinking', text: '第二轮思考' }, + ]) + }) + it('appends text to the last segment when index matches', () => { + let items: LiveItem[] = [] + items = applyTextDelta(items, 0, '先查') + items = applyTextDelta(items, 0, '一下') + expect(items).toEqual([{ kind: 'text', index: 0, text: '先查一下' }]) + }) + it('opens a new text segment when index advances (new turn)', () => { + let items: LiveItem[] = applyTextDelta([], 0, '解说') + items = applyTextDelta(items, 1, '最终') + items = applyTextDelta(items, 1, '回复') + expect(items).toEqual([ + { kind: 'text', index: 0, text: '解说' }, + { kind: 'text', index: 1, text: '最终回复' }, + ]) + }) + it('fills the most recent pending tool call', () => { + let items: LiveItem[] = [] + items = applyToolCall(items, 'a') + items = applyToolCall(items, 'b') + items = applyToolResult(items, 'ok', '结果') + expect(items).toEqual([ + { kind: 'tool', name: 'a' }, + { kind: 'tool', name: 'b', status: 'ok', summary: '结果' }, + ]) }) }) describe('liveToMessage', () => { - it('marks all but the last text bucket as process (tool-turn commentary)', () => { - const msg = liveToMessage(live({ - thinking: '思考', - texts: [{ index: 0, text: '我先更新待办。' }, { index: 1, text: '完成了。' }], - toolCalls: [{ name: 'update_todos', status: 'ok' }], - })) - const texts = msg.parts.filter(p => p.type === 'text') - expect(texts.map(p => p.process)).toEqual([true, undefined]) - expect(texts.map(p => p.text)).toEqual(['我先更新待办。', '完成了。']) + it('interleaves parts per turn in arrival order, matching persisted parts', () => { + const msg = liveToMessage(live({ items: twoTurnItems() })) + expect(msg.parts).toEqual([ + { type: 'thinking', text: '先想想一下', process: true }, + { type: 'text', text: '我先更新待办。', process: true }, + { type: 'tool_call', process: true, toolCall: { id: '', name: 'update_todos' } }, + { type: 'tool_result', process: true, toolCall: { id: '', name: 'update_todos' }, + toolResult: { callId: '', status: 'ok', summary: '已更新' } }, + { type: 'thinking', text: '再想想', process: true }, + { type: 'text', text: '最终回复' }, + ]) }) - it('single bucket (final turn only) carries no process flag', () => { - const msg = liveToMessage(live({ texts: [{ index: 0, text: '直接回答' }] })) - expect(msg.parts.filter(p => p.type === 'text').map(p => p.process)).toEqual([undefined]) + it('marks the in-flight segment as process the moment its tool call arrives', () => { + let items: LiveItem[] = [] + items = applyTextDelta(items, 0, '我先查一下') + const before = liveToMessage(live({ items })) + expect(before.parts.map(p => p.process)).toEqual([undefined]) // 尚无工具:仍在回复位 + items = applyToolCall(items, 'web_search') + const after = liveToMessage(live({ items })) + expect(after.parts.map(p => p.process)).toEqual([true, true]) // tool.call 一到即改标 + }) + it('single final segment without tools carries no process flag', () => { + let items: LiveItem[] = [] + items = applyTextDelta(items, 0, '直接回答') + const msg = liveToMessage(live({ items })) + expect(msg.parts.map(p => p.process)).toEqual([undefined]) + }) + it('tools between segments keep every non-final segment in the process area', () => { + let items: LiveItem[] = [] + items = applyTextDelta(items, 0, '第一轮') + items = applyToolCall(items, 'a') + items = applyToolResult(items, 'ok') + items = applyTextDelta(items, 1, '第二轮') + items = applyToolCall(items, 'b') + items = applyTextDelta(items, 2, '最终回复') + const msg = liveToMessage(live({ items })) + expect(msg.parts.filter(p => p.type === 'text').map(p => p.process)).toEqual([true, true, undefined]) + // 顺序必须与落库穿插序一致:text → tool → text → tool → text。 + expect(msg.parts.map(p => p.type)).toEqual(['text', 'tool_call', 'tool_result', 'text', 'tool_call', 'text']) }) it('thinking and tool parts are always process', () => { - const msg = liveToMessage(live({ - thinking: '想', - texts: [{ index: 0, text: '答' }], - toolCalls: [{ name: 'web_search', status: 'ok', summary: '命中' }], - })) + let items: LiveItem[] = [] + items = applyThinkingDelta(items, '想') + items = applyTextDelta(items, 0, '答') + items = applyToolCall(items, 'web_search') + items = applyToolResult(items, 'ok', '命中') + const msg = liveToMessage(live({ items })) for (const p of msg.parts.filter(p => p.type !== 'text')) expect(p.process).toBe(true) }) }) + +describe('showProcessInline', () => { + it('expands during thinking/acting and collapses the moment responding starts', () => { + expect(showProcessInline(live({ phase: 'thinking' }), true)).toBe(true) + expect(showProcessInline(live({ phase: 'acting' }), true)).toBe(true) + expect(showProcessInline(live({ phase: 'responding' }), true)).toBe(false) + }) + it('falls back to the auto-collapse preference when no live run', () => { + expect(showProcessInline(null, true)).toBe(false) + expect(showProcessInline(null, false)).toBe(true) + }) +}) diff --git a/tsconfig.tsbuildinfo b/tsconfig.tsbuildinfo index e4fba48..5328699 100644 --- a/tsconfig.tsbuildinfo +++ b/tsconfig.tsbuildinfo @@ -1 +1 @@ -{"root":["./src/App.tsx","./src/api.ts","./src/auth.ts","./src/contracts.ts","./src/main.tsx","./src/passwords.ts","./src/store.ts","./src/tasklist.ts","./src/components/AdminUsersModal.tsx","./src/components/AgentTracker.tsx","./src/components/Conversation.tsx","./src/components/DocViewer.tsx","./src/components/LoginPage.tsx","./src/components/SettingsModal.tsx","./src/components/TaskSidebar.tsx","./src/components/Workbench.tsx","./src/components/Workspaces.tsx","./test/auth.test.ts","./test/contracts.test.ts","./test/tasklist.test.ts"],"version":"5.9.3"} \ No newline at end of file +{"root":["./src/App.tsx","./src/api.ts","./src/auth.ts","./src/contracts.ts","./src/live.ts","./src/main.tsx","./src/passwords.ts","./src/store.ts","./src/tasklist.ts","./src/components/AdminUsersModal.tsx","./src/components/AgentTracker.tsx","./src/components/Conversation.tsx","./src/components/DocViewer.tsx","./src/components/LoginPage.tsx","./src/components/SettingsModal.tsx","./src/components/TaskSidebar.tsx","./src/components/Workbench.tsx","./src/components/Workspaces.tsx","./test/auth.test.ts","./test/contracts.test.ts","./test/live.test.ts","./test/tasklist.test.ts"],"version":"5.9.3"} \ No newline at end of file