bingocode 1.0.2 → 1.0.3

package/desktop/src/components/chat/MessageList.test.tsx

@@ -0,0 +1,313 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
+import { MessageList, buildRenderItems } from './MessageList'
+import { useChatStore } from '../../stores/chatStore'
+import { useTabStore } from '../../stores/tabStore'
+import type { UIMessage } from '../../types/chat'
+import type { PerSessionState } from '../../stores/chatStore'
+
+const ACTIVE_TAB = 'active-tab'
+
+function makeSessionState(overrides: Partial<PerSessionState> = {}): PerSessionState {
+  return {
+    messages: [],
+    chatState: 'idle',
+    connectionState: 'connected',
+    streamingText: '',
+    streamingToolInput: '',
+    activeToolUseId: null,
+    activeToolName: null,
+    activeThinkingId: null,
+    pendingPermission: null,
+    pendingComputerUsePermission: null,
+    tokenUsage: { input_tokens: 0, output_tokens: 0 },
+    elapsedSeconds: 0,
+    statusVerb: '',
+    slashCommands: [],
+    agentTaskNotifications: {},
+    elapsedTimer: null,
+    ...overrides,
+  }
+}
+
+describe('MessageList nested tool calls', () => {
+  beforeEach(() => {
+    useTabStore.setState({ activeTabId: ACTIVE_TAB, tabs: [{ sessionId: ACTIVE_TAB, title: 'Test', type: 'session' as const, status: 'idle' }] })
+    useChatStore.setState({ sessions: { [ACTIVE_TAB]: makeSessionState() } })
+  })
+
+  it('renders sub-agent tool calls inline beneath the parent agent tool call', () => {
+    useChatStore.setState({
+      sessions: {
+        [ACTIVE_TAB]: makeSessionState({
+          messages: [
+            {
+              id: 'tool-agent',
+              type: 'tool_use',
+              toolName: 'Agent',
+              toolUseId: 'agent-1',
+              input: { description: 'Inspect src/components' },
+              timestamp: 1,
+            },
+            {
+              id: 'tool-read',
+              type: 'tool_use',
+              toolName: 'Read',
+              toolUseId: 'read-1',
+              input: { file_path: '/tmp/example.ts' },
+              timestamp: 2,
+              parentToolUseId: 'agent-1',
+            },
+            {
+              id: 'result-read',
+              type: 'tool_result',
+              toolUseId: 'read-1',
+              content: 'const answer = 42',
+              isError: false,
+              timestamp: 3,
+              parentToolUseId: 'agent-1',
+            },
+          ],
+        }),
+      },
+    })
+
+    const { container } = render(<MessageList />)
+
+    expect(screen.getAllByText('Running').length).toBeGreaterThan(0)
+    expect(screen.getByText(/Read .*example\.ts.*done/i)).toBeTruthy()
+    expect(container.textContent).toContain('Agent')
+  })
+
+  it('keeps root tool runs split when nested child tool calls appear between them', () => {
+    const messages: UIMessage[] = [
+      {
+        id: 'tool-agent',
+        type: 'tool_use',
+        toolName: 'Agent',
+        toolUseId: 'agent-1',
+        input: { description: 'Inspect src/components' },
+        timestamp: 1,
+      },
+      {
+        id: 'tool-read',
+        type: 'tool_use',
+        toolName: 'Read',
+        toolUseId: 'read-1',
+        input: { file_path: '/tmp/example.ts' },
+        timestamp: 2,
+        parentToolUseId: 'agent-1',
+      },
+      {
+        id: 'result-read',
+        type: 'tool_result',
+        toolUseId: 'read-1',
+        content: 'const answer = 42',
+        isError: false,
+        timestamp: 3,
+        parentToolUseId: 'agent-1',
+      },
+      {
+        id: 'tool-write',
+        type: 'tool_use',
+        toolName: 'Write',
+        toolUseId: 'write-1',
+        input: { file_path: '/tmp/out.ts', content: 'export const value = 1' },
+        timestamp: 4,
+      },
+    ]
+
+    const toolUseIds = new Set(messages.filter((message) => message.type === 'tool_use').map((message) => message.toolUseId))
+    const renderItems = buildRenderItems(messages, toolUseIds)
+    const toolGroups = renderItems.filter((item) => item.kind === 'tool_group')
+
+    expect(toolGroups).toHaveLength(2)
+    expect(toolGroups.map((item) => item.toolCalls[0]?.toolUseId)).toEqual(['agent-1', 'write-1'])
+  })
+
+  it('shows failed agent status and compact unavailable summary for Explore launch errors', () => {
+    useChatStore.setState({
+      sessions: {
+        [ACTIVE_TAB]: makeSessionState({
+          messages: [
+            {
+              id: 'tool-agent',
+              type: 'tool_use',
+              toolName: 'Agent',
+              toolUseId: 'agent-1',
+              input: { description: '探索整体架构', subagent_type: 'Explore' },
+              timestamp: 1,
+            },
+            {
+              id: 'result-agent',
+              type: 'tool_result',
+              toolUseId: 'agent-1',
+              content: `Agent type 'Explore' not found. Available agents: general-purpose`,
+              isError: true,
+              timestamp: 2,
+            },
+          ],
+        }),
+      },
+    })
+
+    render(<MessageList />)
+
+    expect(screen.getByText('Failed')).toBeTruthy()
+    expect(screen.getByText('Explore agent unavailable in this session')).toBeTruthy()
+  })
+
+  it('shows completed agent output when no nested tool activity is available', () => {
+    const longResult = '探索完成。让我将结果整合写入计划文件。第二段补充内容用于验证 dialog 展示的是完整结果而不是截断摘要。'
+
+    useChatStore.setState({
+      sessions: {
+        [ACTIVE_TAB]: makeSessionState({
+          messages: [
+            {
+              id: 'tool-agent',
+              type: 'tool_use',
+              toolName: 'Agent',
+              toolUseId: 'agent-1',
+              input: { description: '探索整体架构' },
+              timestamp: 1,
+            },
+            {
+              id: 'result-agent',
+              type: 'tool_result',
+              toolUseId: 'agent-1',
+              content: {
+                status: 'completed',
+                content: [{ type: 'text', text: longResult }],
+              },
+              isError: false,
+              timestamp: 2,
+            },
+          ],
+        }),
+      },
+    })
+
+    render(<MessageList />)
+
+    expect(screen.getByText('Done')).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'View result' })).toBeTruthy()
+
+    fireEvent.click(screen.getByRole('button', { name: 'View result' }))
+
+    const dialog = screen.getByRole('dialog')
+    expect(within(dialog).getByText(/第二段补充内容用于验证 dialog 展示的是完整结果而不是截断摘要。/)).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Close dialog' })).toBeTruthy()
+  })
+
+  it('keeps async launched agents in running state until a terminal notification arrives', () => {
+    useChatStore.setState({
+      sessions: {
+        [ACTIVE_TAB]: makeSessionState({
+          messages: [
+            {
+              id: 'tool-agent',
+              type: 'tool_use',
+              toolName: 'Agent',
+              toolUseId: 'agent-1',
+              input: { description: '修复临时文件泄漏' },
+              timestamp: 1,
+            },
+            {
+              id: 'result-agent',
+              type: 'tool_result',
+              toolUseId: 'agent-1',
+              content:
+                "Async agent launched successfully.\nagentId: a29934b04b20ed564 (internal ID - do not mention to user. Use SendMessage with to: 'a29934b04b20ed564' to continue this agent.)\nThe agent is working in the background. You will be notified automatically when it completes.",
+              isError: false,
+              timestamp: 2,
+            },
+          ],
+        }),
+      },
+    })
+
+    render(<MessageList />)
+
+    expect(screen.getAllByText('Running').length).toBeGreaterThan(0)
+    expect(screen.queryByText('Done')).toBeNull()
+    expect(screen.queryByRole('button', { name: 'View result' })).toBeNull()
+  })
+
+  it('renders copy controls for user messages and scopes assistant copy to a single reply', async () => {
+    const writeText = vi.fn().mockResolvedValue(undefined)
+    Object.assign(navigator, {
+      clipboard: {
+        writeText,
+      },
+    })
+
+    useChatStore.setState({
+      sessions: {
+        [ACTIVE_TAB]: makeSessionState({
+          messages: [
+            {
+              id: 'user-1',
+              type: 'user_text',
+              content: '请帮我探索整体架构',
+              timestamp: 1,
+            },
+            {
+              id: 'assistant-1',
+              type: 'assistant_text',
+              content: '先看 CLI 和服务端入口。',
+              timestamp: 2,
+            },
+            {
+              id: 'assistant-2',
+              type: 'assistant_text',
+              content: '再看 desktop 前后端边界。',
+              timestamp: 3,
+            },
+          ],
+        }),
+      },
+    })
+
+    render(<MessageList />)
+
+    expect(screen.getByRole('button', { name: 'Copy prompt' })).toBeTruthy()
+
+    fireEvent.click(screen.getAllByRole('button', { name: 'Copy reply' })[1]!)
+
+    await waitFor(() => {
+      expect(writeText).toHaveBeenCalledWith('再看 desktop 前后端边界。')
+    })
+    expect(writeText).not.toHaveBeenCalledWith(
+      '先看 CLI 和服务端入口。\n再看 desktop 前后端边界。'
+    )
+  })
+
+  it('shows raw startup details under translated CLI startup errors', () => {
+    useChatStore.setState({
+      sessions: {
+        [ACTIVE_TAB]: makeSessionState({
+          messages: [
+            {
+              id: 'error-1',
+              type: 'error',
+              code: 'CLI_START_FAILED',
+              message:
+                'CLI exited during startup (code 1): Claude Code on Windows requires git-bash (https://git-scm.com/downloads/win).',
+              timestamp: 1,
+            },
+          ],
+        }),
+      },
+    })
+
+    render(<MessageList />)
+
+    expect(screen.getByText('Failed to start CLI process.')).toBeTruthy()
+    expect(
+      screen.getByText(
+        'CLI exited during startup (code 1): Claude Code on Windows requires git-bash (https://git-scm.com/downloads/win).',
+      ),
+    ).toBeTruthy()
+  })
+})

package/desktop/src/components/chat/MessageList.tsx

@@ -0,0 +1,249 @@
+import { useRef, useEffect, useMemo, memo } from 'react'
+import { useChatStore } from '../../stores/chatStore'
+import { useTabStore } from '../../stores/tabStore'
+import { useTranslation } from '../../i18n'
+import type { TranslationKey } from '../../i18n/locales/en'
+import { UserMessage } from './UserMessage'
+import { AssistantMessage } from './AssistantMessage'
+import { ThinkingBlock } from './ThinkingBlock'
+import { ToolCallBlock } from './ToolCallBlock'
+import { ToolCallGroup } from './ToolCallGroup'
+import { ToolResultBlock } from './ToolResultBlock'
+import { PermissionDialog } from './PermissionDialog'
+import { AskUserQuestion } from './AskUserQuestion'
+import { StreamingIndicator } from './StreamingIndicator'
+import { InlineTaskSummary } from './InlineTaskSummary'
+import type { AgentTaskNotification, UIMessage } from '../../types/chat'
+
+type ToolCall = Extract<UIMessage, { type: 'tool_use' }>
+type ToolResult = Extract<UIMessage, { type: 'tool_result' }>
+
+type RenderItem =
+  | { kind: 'tool_group'; toolCalls: ToolCall[]; id: string }
+  | { kind: 'message'; message: UIMessage }
+
+export function buildRenderItems(messages: UIMessage[], toolUseIds: Set<string>): RenderItem[] {
+  const items: RenderItem[] = []
+  let pendingToolCalls: ToolCall[] = []
+
+  const flushGroup = () => {
+    if (pendingToolCalls.length > 0) {
+      items.push({
+        kind: 'tool_group',
+        toolCalls: [...pendingToolCalls],
+        id: `group-${pendingToolCalls[0]!.id}`,
+      })
+      pendingToolCalls = []
+    }
+  }
+
+  for (const msg of messages) {
+    if (msg.type === 'tool_result' && toolUseIds.has(msg.toolUseId)) {
+      continue
+    }
+
+    if (msg.type === 'tool_use') {
+      if (msg.parentToolUseId) {
+        flushGroup()
+        continue
+      }
+      if (msg.toolName === 'AskUserQuestion') {
+        flushGroup()
+        items.push({ kind: 'message', message: msg })
+      } else {
+        pendingToolCalls.push(msg)
+      }
+    } else {
+      flushGroup()
+      items.push({ kind: 'message', message: msg })
+    }
+  }
+
+  flushGroup()
+  return items
+}
+
+export function MessageList() {
+  const activeTabId = useTabStore((s) => s.activeTabId)
+  const sessionState = useChatStore((s) => activeTabId ? s.sessions[activeTabId] : undefined)
+  const messages = sessionState?.messages ?? []
+  const chatState = sessionState?.chatState ?? 'idle'
+  const streamingText = sessionState?.streamingText ?? ''
+  const activeThinkingId = sessionState?.activeThinkingId ?? null
+  const agentTaskNotifications = sessionState?.agentTaskNotifications ?? {}
+  const bottomRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView?.({ behavior: 'smooth' })
+  }, [messages.length, streamingText])
+
+  const { toolResultMap, childToolCallsByParent, renderItems } = useMemo(() => {
+    const toolUseIds = new Set<string>()
+    const toolResultMap = new Map<string, ToolResult>()
+    const childToolCallsByParent = new Map<string, ToolCall[]>()
+
+    for (const msg of messages) {
+      if (msg.type === 'tool_use') {
+        toolUseIds.add(msg.toolUseId)
+        if (msg.parentToolUseId) {
+          const siblings = childToolCallsByParent.get(msg.parentToolUseId)
+          if (siblings) {
+            siblings.push(msg)
+          } else {
+            childToolCallsByParent.set(msg.parentToolUseId, [msg])
+          }
+        }
+      }
+      if (msg.type === 'tool_result' && msg.toolUseId) {
+        toolResultMap.set(msg.toolUseId, msg)
+      }
+    }
+
+    const renderItems = buildRenderItems(messages, toolUseIds)
+    return { toolUseIds, toolResultMap, childToolCallsByParent, renderItems }
+  }, [messages])
+
+  return (
+    <div className="flex-1 overflow-y-auto px-4 py-4">
+      <div className="mx-auto max-w-[860px]">
+        {renderItems.map((item) => {
+          if (item.kind === 'tool_group') {
+            return (
+              <ToolCallGroup
+                key={item.id}
+                toolCalls={item.toolCalls}
+                resultMap={toolResultMap}
+                childToolCallsByParent={childToolCallsByParent}
+                agentTaskNotifications={agentTaskNotifications}
+                isStreaming={
+                  chatState === 'tool_executing' &&
+                  item.toolCalls.some((tc) => !toolResultMap.has(tc.toolUseId))
+                }
+              />
+            )
+          }
+
+          const msg = item.message
+          return (
+            <MessageBlock
+              key={msg.id}
+              message={msg}
+              activeThinkingId={activeThinkingId}
+              agentTaskNotifications={agentTaskNotifications}
+              toolResult={
+                msg.type === 'tool_use'
+                  ? (() => {
+                      const r = toolResultMap.get(msg.toolUseId)
+                      return r ? { content: r.content, isError: r.isError } : null
+                    })()
+                  : null
+              }
+            />
+          )
+        })}
+
+        {streamingText && (
+          <AssistantMessage content={streamingText} isStreaming={chatState === 'streaming'} />
+        )}
+
+        {/* Show StreamingIndicator when:
+            - tool_executing: tool is running
+            - thinking but no active ThinkingBlock yet: the gap between
+              sending a message and receiving the first thinking delta */}
+        {(chatState === 'tool_executing' || (chatState === 'thinking' && !activeThinkingId)) && (
+          <StreamingIndicator />
+        )}
+
+        <div ref={bottomRef} />
+      </div>
+    </div>
+  )
+}
+
+export const MessageBlock = memo(function MessageBlock({
+  message,
+  activeThinkingId,
+  agentTaskNotifications,
+  toolResult,
+}: {
+  message: UIMessage
+  activeThinkingId: string | null
+  agentTaskNotifications: Record<string, AgentTaskNotification>
+  toolResult?: { content: unknown; isError: boolean } | null
+}) {
+  const t = useTranslation()
+
+  switch (message.type) {
+    case 'user_text':
+      return <UserMessage content={message.content} attachments={message.attachments} />
+    case 'assistant_text':
+      return <AssistantMessage content={message.content} />
+    case 'thinking':
+      return <ThinkingBlock content={message.content} isActive={message.id === activeThinkingId} />
+    case 'tool_use':
+      if (message.toolName === 'AskUserQuestion') {
+        return (
+          <AskUserQuestion
+            toolUseId={message.toolUseId}
+            input={message.input}
+          />
+        )
+      }
+      return (
+        <ToolCallBlock
+          toolName={message.toolName}
+          input={message.input}
+          result={toolResult}
+          agentTaskNotification={
+            message.toolName === 'Agent'
+              ? agentTaskNotifications[message.toolUseId]
+              : undefined
+          }
+        />
+      )
+    case 'tool_result':
+      return (
+        <ToolResultBlock
+          content={message.content}
+          isError={message.isError}
+          standalone
+        />
+      )
+    case 'permission_request':
+      return (
+        <PermissionDialog
+          requestId={message.requestId}
+          toolName={message.toolName}
+          input={message.input}
+          description={message.description}
+        />
+      )
+    case 'error': {
+      const errorKey = message.code ? `error.${message.code}` as TranslationKey : null
+      const errorText = errorKey ? t(errorKey) : null
+      const displayMessage = (errorText && errorText !== errorKey) ? errorText : message.message
+      const showRawDetail =
+        Boolean(message.message) &&
+        message.message.trim() !== '' &&
+        message.message !== displayMessage
+      return (
+        <div className="mb-3 px-4 py-2.5 rounded-lg border border-[var(--color-error)]/20 bg-[var(--color-error-container)]/28 text-sm text-[var(--color-error)]">
+          <strong>Error:</strong> {displayMessage}
+          {showRawDetail && (
+            <div className="mt-1 whitespace-pre-wrap text-xs text-[var(--color-on-error-container)]/85">
+              {message.message}
+            </div>
+          )}
+        </div>
+      )
+    }
+    case 'task_summary':
+      return <InlineTaskSummary tasks={message.tasks} />
+    case 'system':
+      return (
+        <div className="mb-3 text-center text-xs text-[var(--color-text-tertiary)]">
+          {message.content}
+        </div>
+      )
+  }
+})