From 3b8493075d19e20d5e7d6744e618b7cc52578d55 Mon Sep 17 00:00:00 2001
From: WangDL <wangdl2900@163.com>
Date: Fri, 22 May 2026 17:20:05 +0800
Subject: [PATCH] feat: tool call visualization in TaskAssistant

---
 src/pages/TaskAssistant.tsx | 20 +++++++++++++++++++-
 src/services/ai-chat.ts     |  5 ++---
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/pages/TaskAssistant.tsx b/src/pages/TaskAssistant.tsx
index 9a00398..b366617 100644
--- a/src/pages/TaskAssistant.tsx
+++ b/src/pages/TaskAssistant.tsx
@@ -1,7 +1,7 @@
 import { useState, useRef, useEffect, useCallback } from 'react'
 import { Input, Button, theme, Typography, App } from 'antd'
 import {
-  SendOutlined, RobotOutlined, PlusOutlined,
+  SendOutlined, RobotOutlined, PlusOutlined, ToolOutlined,
   DeleteOutlined, StopOutlined, MessageOutlined,
 } from '@ant-design/icons'
 import { streamChat, type StreamEvent } from '@/services/ai-chat'
@@ -19,6 +19,7 @@ interface Message {
   content: string
   timestamp: number
   streaming?: boolean
+  toolCalls?: { tool: string; preview?: string; done: boolean; duration?: number; error?: boolean }[]
 }
 
 function ChatPage() {
@@ -123,6 +124,14 @@ function ChatPage() {
               completedConvId = event.conversationId
               if (event.conversationId && event.conversationId !== activeId) { setActiveId(event.conversationId); loadConversations() }
               break
+            case 'tool.started':
+              currentTools.push({ tool: event.tool, preview: event.preview, done: false })
+              update({ toolCalls: [...currentTools] })
+              break
+            case 'tool.completed':
+              const idx = currentTools.findIndex((t: any) => t.tool === event.tool && !t.done)
+              if (idx >= 0) { currentTools[idx] = { ...currentTools[idx], done: true, duration: event.duration, error: event.error }; update({ toolCalls: [...currentTools] }) }
+              break
             case 'message.delta':
               currentContent += event.delta || ''
               update({ content: currentContent, streaming: true })
@@ -198,6 +207,15 @@ function ChatPage() {
                     : <Text type="secondary" style={{ fontSize: 13 }}>思考中...</Text>)
                   : msg.content}
               </div>
+              {msg.toolCalls && msg.toolCalls.length > 0 && (
+                <div style={{ marginTop: 4, display: 'flex', flexWrap: 'wrap', gap: 4 }}>
+                  {msg.toolCalls.map((t, i) => (
+                    <span key={i} style={{ fontSize: 11, color: token.colorTextSecondary, background: token.colorFillSecondary, padding: '2px 8px', borderRadius: 4 }}>
+                      <ToolOutlined style={{ marginRight: 4, fontSize: 10 }} />{t.preview || t.tool}{t.done ? (t.error ? ' ❌' : ' ✓') : ' ···'}
+                    </span>
+                  ))}
+                </div>
+              )}
             </div>
           ))}
           <div ref={messagesEndRef} />
diff --git a/src/services/ai-chat.ts b/src/services/ai-chat.ts
index 784cff2..95e568a 100644
--- a/src/services/ai-chat.ts
+++ b/src/services/ai-chat.ts
@@ -5,9 +5,8 @@ interface ChatMessage { role: 'user' | 'assistant' | 'system'; content: string }
 export type StreamEvent =
   | { event: 'meta'; conversationId: string }
   | { event: 'message.delta'; delta: string; runId?: string }
-  | { event: 'reasoning.available'; text: string; runId?: string }
-  | { event: 'tool.start'; toolName?: string; input?: any; runId?: string }
-  | { event: 'tool.result'; output?: string; runId?: string }
+  | { event: 'tool.started'; tool: string; preview?: string; runId?: string }
+  | { event: 'tool.completed'; tool: string; duration?: number; error?: boolean; runId?: string }
   | { event: 'run.completed'; output?: string; usage?: any; runId?: string }
   | { event: 'done'; conversationId?: string }
   | { event: 'stopped' }