diff --git a/apps/ai-game-creator-shell/src/view/project-development/chat/DirectProjectChatView.tsx b/apps/ai-game-creator-shell/src/view/project-development/chat/DirectProjectChatView.tsx index e10829c5f..86a7b0ef3 100644 --- a/apps/ai-game-creator-shell/src/view/project-development/chat/DirectProjectChatView.tsx +++ b/apps/ai-game-creator-shell/src/view/project-development/chat/DirectProjectChatView.tsx @@ -1,15 +1,12 @@ -import type { UIEventHandler } from 'react'; import type { Ref } from 'react'; import { useCallback, useEffect, useImperativeHandle, useMemo, - useRef, useState, } from 'react'; -import { AGENT_CHAT_SCROLL_BOTTOM_THRESHOLD } from '../../../app/constants'; import { claimInitialTurnForPage } from '../../../app/initialTurnClaims'; import type { PendingUiConfirmation } from '../../../app/types'; import { projectNameFromPath } from '../../../features/agent-runtime'; @@ -106,8 +103,6 @@ export function DirectProjectChatView({ }: DirectProjectChatViewProps) { const { assets, projectId, refresh, versions } = useDirectProjectManifest(projectPath); - const messagesRef = useRef(null); - const shouldFollowLatestRef = useRef(true); const [runtimeNotice, setRuntimeNotice] = useState(''); const [settingsOpen, setSettingsOpen] = useState(false); const [approvalOpen, setApprovalOpen] = useState(false); @@ -137,8 +132,11 @@ export function DirectProjectChatView({ directEntries, directTurnRunning, directTurnStartedAt, + historyError, historyHasMore, + historyLoading, loadEarlierHistory, + retryEarlierHistory, localMessages, pendingTurns, startInitialTurn, @@ -197,7 +195,6 @@ export function DirectProjectChatView({ initialTurn.content, directCodexConversationMessageId(clientTurnId, 'user'), ); - shouldFollowLatestRef.current = true; startInitialTurn({ clientTurnId, ...(initialTurn.creationType @@ -209,28 +206,12 @@ export function DirectProjectChatView({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [turnStatus.displayBusy, initialTurn, projectId, projectPath]); - useEffect(() => { - if (!shouldFollowLatestRef.current) return; - const list = messagesRef.current; - if (list) list.scrollTop = list.scrollHeight; - }, [directEntries, localMessages]); - useImperativeHandle(ref, () => ({ announce: (text: string) => { appendLocalMessage({ role: 'assistant', text, updatedAt: Date.now() }); }, })); - const handleScroll: UIEventHandler = (event) => { - const list = event.currentTarget; - shouldFollowLatestRef.current = - list.scrollHeight - list.scrollTop - list.clientHeight <= - AGENT_CHAT_SCROLL_BOTTOM_THRESHOLD; - if (historyHasMore && list.scrollTop <= 24) { - void loadEarlierHistory(); - } - }; - return (
void loadEarlierHistory()} - onScroll={handleScroll} + onRetryEarlierHistory={() => void retryEarlierHistory()} /> {pendingConfirmation && onConfirmConfirmation && diff --git a/apps/ai-game-creator-shell/src/view/project-development/chat/components/AgentReasoning/AgentReasoning.tsx b/apps/ai-game-creator-shell/src/view/project-development/chat/components/AgentReasoning/AgentReasoning.tsx index c3d7da397..7394c030a 100644 --- a/apps/ai-game-creator-shell/src/view/project-development/chat/components/AgentReasoning/AgentReasoning.tsx +++ b/apps/ai-game-creator-shell/src/view/project-development/chat/components/AgentReasoning/AgentReasoning.tsx @@ -18,10 +18,22 @@ function AgentReasoningImpl({ text, label = '思考过程', testId, + turnKey, + blockKey, }: { text: string; label?: string; testId?: string; + /** + * 所属回合的 `DirectChatTurn.key`：写进 `data-turn-key`，供会话滚动的前插锚点定位这一块 + * （见 `DirectProjectConversation/conversationScrollAnchor.ts`）。 + */ + turnKey?: string; + /** + * 这一块的稳定块身份（`DirectChatBlock.key`）：写进 `data-block-key`。锚点按「回合 key + + * 块身份」定位，不按块序号——回合收口时过程块会被折进 `
`，序号会整体后移。 + */ + blockKey?: string; }) { const [expanded, setExpanded] = useState(false); /* @@ -37,6 +49,8 @@ function AgentReasoningImpl({ className="design-agent-reasoning" aria-label={label} data-testid={testId} + data-turn-key={turnKey} + data-block-key={blockKey} onToggle={(event) => setExpanded((event.currentTarget as HTMLDetailsElement).open) } diff --git a/apps/ai-game-creator-shell/src/view/project-development/chat/components/DirectProjectConversation/DirectProjectConversation.test.tsx b/apps/ai-game-creator-shell/src/view/project-development/chat/components/DirectProjectConversation/DirectProjectConversation.test.tsx new file mode 100644 index 000000000..3dc7c91b2 --- /dev/null +++ b/apps/ai-game-creator-shell/src/view/project-development/chat/components/DirectProjectConversation/DirectProjectConversation.test.tsx @@ -0,0 +1,230 @@ +/** @vitest-environment jsdom */ +import { act, cleanup, fireEvent, render } from '@testing-library/react'; +import { afterEach, describe, expect, it, vi } from 'vitest'; + +import type { DirectChatToolCard } from '../../conversation/directThreadChat'; +import type { DirectChatTurn } from '../../conversation/directTurnPresentation'; +import { DirectProjectConversation } from './DirectProjectConversation'; + +const turn = (key: string): DirectChatTurn => ({ + key, + users: [{ kind: 'user', key: `${key}-u`, text: '做一个跳跃动作', at: 10 }], + process: [], + finals: [{ kind: 'assistant', key: `${key}-f`, text: '改好了', at: 20 }], + state: 'finished', + startedAt: 10, + endedAt: 20, +}); + +/** 一个工具调用的持久化卡片：块身份来自条目 itemId，这里只要能渲染出来。 */ +const toolCall = (id: string): DirectChatToolCard => ({ + schemaVersion: 'agc-tool-call.v1', + id, + kind: 'command', + title: '执行命令', + summary: 'npm run build', + status: 'completed', + detail: { command: 'npm run build' }, + startedAt: 10, + updatedAt: 20, +}); + +/** + * 带执行过程的回合：`renderTurnProcess` 对运行中的回合把过程块平铺、对已结束的回合把它们折进一个 + * `
`，所以「收口前后同一个块的块身份是否跟着块走」只能拿这种回合验。 + */ +const processTurn = ( + state: DirectChatTurn['state'], + overrides: Partial = {}, +): DirectChatTurn => ({ + key: 't1', + users: [{ kind: 'user', key: 't1:u', text: '做一个跳跃动作', at: 10 }], + process: [ + { kind: 'tools', key: 't1:g1', calls: [toolCall('c1')] }, + { kind: 'tools', key: 't1:g2', calls: [toolCall('c2')] }, + ], + finals: [{ kind: 'assistant', key: 't1:f', text: '改好了', at: 20 }], + state, + startedAt: 10, + endedAt: state === 'finished' ? 20 : 0, + ...overrides, +}); + +/** 列表里所有块的块身份，按文档顺序；拿不到 `data-block-key` 的块是 null。 */ +function blockKeysOf(container: HTMLElement): (string | null)[] { + return Array.from(container.querySelectorAll('[data-turn-key]')).map( + (block) => block.getAttribute('data-block-key'), + ); +} + +function conversationElement(overrides: { + conversationKey?: string; + turns?: DirectChatTurn[]; + historyHasMore?: boolean; + historyLoading?: boolean; + historyError?: string | null; + onLoadEarlierHistory?: () => void; + onRetryEarlierHistory?: () => void; +}) { + return ( + undefined)} + onRetryEarlierHistory={ + overrides.onRetryEarlierHistory ?? (() => undefined) + } + /> + ); +} + +function renderConversation(overrides: { + conversationKey?: string; + turns?: DirectChatTurn[]; + historyHasMore?: boolean; + historyLoading?: boolean; + historyError?: string | null; + onLoadEarlierHistory?: () => void; + onRetryEarlierHistory?: () => void; +}) { + return render(conversationElement(overrides)); +} + +afterEach(() => { + cleanup(); +}); + +describe('更早历史的入口', () => { + it('常驻的「显示更早的对话」按钮已经删掉，改由滚动自动加载', () => { + const view = renderConversation({ historyHasMore: true }); + expect(view.queryByText('显示更早的对话')).toBeNull(); + expect(view.container.querySelector('.message-history-more')).toBeNull(); + }); + + it('加载行延迟出现，文案是「正在加载更早的对话」', () => { + vi.useFakeTimers(); + try { + const view = renderConversation({ + historyHasMore: true, + historyLoading: true, + }); + expect(view.queryByText('正在加载更早的对话')).toBeNull(); + + act(() => { + vi.advanceTimersByTime(150); + }); + expect(view.getByText('正在加载更早的对话')).not.toBeNull(); + } finally { + vi.useRealTimers(); + } + }); + + it('失败挂起后列表顶部留一行内联错误，重试是唯一的手动出路', () => { + const retry = vi.fn(); + const view = renderConversation({ + historyHasMore: true, + historyError: '读取更早的对话历史失败', + onRetryEarlierHistory: retry, + }); + + expect(view.getByText('加载更早对话失败')).not.toBeNull(); + fireEvent.click(view.getByText('重试')); + expect(retry).toHaveBeenCalledTimes(1); + }); + + it('断言式 live region 里不放可交互控件：重试按钮是 alert 之外的兄弟', () => { + const retry = vi.fn(); + const view = renderConversation({ + historyHasMore: true, + historyError: '读取更早的对话历史失败', + onRetryEarlierHistory: retry, + }); + + // `role="alert"` 隐含 aria-live="assertive" + aria-atomic="true"：整段会被当成一条断言性 + // 播报，交互控件嵌在里面既可能不被读屏当成可聚焦按钮，点击也落在 live region 内部。 + const alert = view.getByRole('alert'); + expect(alert.textContent).toContain('加载更早对话失败'); + expect(alert.contains(view.getByText('重试'))).toBe(false); + + // 拆开之后仍在同一行里，重试仍是唯一的手动出路。 + fireEvent.click(view.getByText('重试')); + expect(retry).toHaveBeenCalledTimes(1); + }); +}); + +describe('前插锚点的标记', () => { + it('每个块都带上所属回合的 data-turn-key', () => { + const view = renderConversation({ turns: [turn('t1')] }); + expect( + view.container.querySelectorAll('[data-turn-key="t1"]').length, + ).toBeGreaterThan(0); + }); + + it('每个可锚定的块都带上 data-block-key，且同一回合内唯一', () => { + const view = renderConversation({ turns: [processTurn('finished')] }); + const keys = blockKeysOf(view.container); + + // 正文块用 DirectChatBlock.key，过程包装块与终态文案各有自己的字面量块身份。 + expect(keys).toContain('t1:u'); + expect(keys).toContain('t1:g1'); + expect(keys).toContain('t1:g2'); + expect(keys).toContain('t1:f'); + expect(keys).toContain('process'); + expect(keys).toContain('usage'); + // 缺块身份的块会被锚点静默跳过：宁可这里红，也不要在滚动时才发现。 + expect(keys.every((key) => key !== null && key.length > 0)).toBe(true); + expect(new Set(keys).size).toBe(keys.length); + }); + + it('回合收口后块身份跟着块走：块序号变了，块身份不变', () => { + const view = renderConversation({ turns: [processTurn('running')] }); + // 运行中：过程块平铺，没有「执行过程」包装块。 + expect(blockKeysOf(view.container)).toEqual([ + 't1:u', + 't1:g1', + 't1:g2', + 't1:f', + ]); + + view.rerender(conversationElement({ turns: [processTurn('finished')] })); + + // 收口后过程被折进一个 `
`，同一个工具组的序号从 1 变成 3——旧锚点存的是序号， + // 会解析到隔壁块；块身份仍然只属于它自己。 + const keys = blockKeysOf(view.container); + expect(keys).toEqual([ + 't1:u', + 'process', + 't1:g1', + 't1:g2', + 't1:f', + 'usage', + ]); + }); +}); + +describe('换会话的复位方式', () => { + it('换项目不重建列表 DOM：走显式身份信号，而不是用 key 重建会话', () => { + const view = renderConversation({ turns: [turn('t1')] }); + const listBefore = view.container.querySelector( + '.project-chat-message-list', + ); + + view.rerender( + conversationElement({ + conversationKey: '/projects/other', + turns: [turn('t2')], + }), + ); + + // 复用同一个列表节点：加载行的 150ms 延迟计时与滚动所有权都由身份信号复位， + // 不靠重建组件（重建会把列表和加载行一起推倒重来）。 + expect(view.container.querySelector('.project-chat-message-list')).toBe( + listBefore, + ); + }); +}); diff --git a/apps/ai-game-creator-shell/src/view/project-development/chat/components/DirectProjectConversation/DirectProjectConversation.tsx b/apps/ai-game-creator-shell/src/view/project-development/chat/components/DirectProjectConversation/DirectProjectConversation.tsx index b9595d9ee..3009776b6 100644 --- a/apps/ai-game-creator-shell/src/view/project-development/chat/components/DirectProjectConversation/DirectProjectConversation.tsx +++ b/apps/ai-game-creator-shell/src/view/project-development/chat/components/DirectProjectConversation/DirectProjectConversation.tsx @@ -1,28 +1,43 @@ -import type { RefObject, UIEventHandler } from 'react'; - import { AgentMessageContent } from '../../../../../../../../packages/shared/src/components/AgentMessageContent'; import { useLiveNow } from '../../../../../features/project-workspace/useLiveNow'; import type { DirectChatTurn } from '../../conversation/directTurnPresentation'; import { formatTurnDuration } from '../ToolCallGroup/toolCallGroupPresentation'; +import { + DirectProjectHistoryErrorRow, + DirectProjectHistoryLoadingRow, +} from './DirectProjectHistoryRow'; +import { DirectProjectScrollToBottomCapsule } from './DirectProjectScrollToBottomCapsule'; import { DirectProjectTurn } from './DirectProjectTurn'; +import { useConversationScroll } from './useConversationScroll'; /** - * 会话区：回合列表、更早历史入口和运行中过程卡。 + * 会话区：回合列表、更早历史的加载 / 失败行与运行中过程卡。 + * + * **滚动归这一层所有**：贴底跟随、更早历史的自动加载、前插锚点与回到底部胶囊都在 + * `useConversationScroll` 里，视图不再自己持 `messagesRef` / `shouldFollowLatestRef` / + * `handleScroll`——三套补偿写同一份 `scrollTop`，分开持有必然互相覆盖。 * * 回合来自 DirectProject 自己的投影；这里不读历史、不发回合，只把容器给的状态渲染出来。 */ export function DirectProjectConversation({ + conversationKey, turns, - messagesRef, historyHasMore, + historyLoading, + historyError, turnInFlight, activeTurnStartedAt, onLoadEarlierHistory, - onScroll, + onRetryEarlierHistory, }: { + /** 会话身份键（项目路径）：切项目即复位滚动所有权，不靠重建列表。 */ + conversationKey: string; turns: DirectChatTurn[]; - messagesRef: RefObject; historyHasMore: boolean; + /** 更早历史正在读：驱动顶部加载行（延迟 150ms 才挂载）。 */ + historyLoading: boolean; + /** 更早历史读取失败：非空即挂起自动加载，只留内联错误行的重试。 */ + historyError: string | null; /** * 这一轮在飞吗：`DirectProjectTurnStatus.displayBusy`（本地命令在飞 ∪ 原生已确认在跑）。 * @@ -33,28 +48,49 @@ export function DirectProjectConversation({ turnInFlight: boolean; activeTurnStartedAt: number; onLoadEarlierHistory: () => void; - onScroll: UIEventHandler; + onRetryEarlierHistory: () => void; }) { + const { + listRef, + onScroll, + onToggleCapture, + scrollToBottom, + showScrollToBottom, + scrollToBottomLabel, + showHistoryLoading, + } = useConversationScroll({ + conversationKey, + turns, + historyHasMore, + historyLoading, + historyError, + turnInFlight, + onLoadEarlierHistory, + }); return ( <> + {/* `overflow-anchor: none`：关掉浏览器原生 scroll anchoring，前插与展开的补偿只走 + `useConversationScroll` 这一份，避免两套补偿在同一帧里互相抵消。 */}
- {historyHasMore ? ( - + {showHistoryLoading ? : null} + {historyError ? ( + ) : null} {turns.map((turn) => ( ))} + {showScrollToBottom ? ( + + ) : null}
{turnInFlight ? ( +