From 182bebdaeff42c7d135f7fc3f406fe71736651cb Mon Sep 17 00:00:00 2001
From: oudecheng <13802883547@139.com>
Date: Fri, 29 May 2026 09:10:34 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B7=A5=E5=85=B7=E6=B6=88=E6=81=AF?=
 =?UTF-8?q?=E5=90=88=E5=B9=B6=E4=B8=BA=E5=8F=AF=E5=B1=95=E5=BC=80=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=EF=BC=8C=E6=B7=BB=E5=8A=A0=E5=A4=8D=E5=88=B6=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 merged_tool 消息类型，将 tool_call 和 tool_result 合并展示
- 卡片支持展开/折叠，显示参数和结果，带状态动画
- 添加复制按钮（hover 显示），支持消息文本和工具结果复制
- 过滤结果中冗余的"工具结果"前缀

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 web/src/components/Chat/MessageBubble.tsx | 195 +++++++++++++++++++++-
 web/src/types/protocol.ts                 |   5 +-
 2 files changed, 190 insertions(+), 10 deletions(-)

diff --git a/web/src/components/Chat/MessageBubble.tsx b/web/src/components/Chat/MessageBubble.tsx
index f5dd187..f67c928 100644
--- a/web/src/components/Chat/MessageBubble.tsx
+++ b/web/src/components/Chat/MessageBubble.tsx
@@ -1,4 +1,5 @@
-import { User, Bot, Wrench, CheckCircle, AlertCircle, Terminal, File, Image, FileText, Music, Video, Download } from 'lucide-react'
+import { useState } from 'react'
+import { User, Bot, Wrench, CheckCircle, AlertCircle, Terminal, File, Image, FileText, Music, Video, Download, ChevronDown, ChevronRight, Copy, Check } from 'lucide-react'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import type { ChatMessage, Attachment } from '../../types/protocol'
@@ -22,6 +23,13 @@ function getFileName(path: string): string {
   return parts[parts.length - 1] || path
 }
 
+function formatTime(timestamp: number) {
+  return new Date(timestamp).toLocaleTimeString('zh-CN', {
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
+
 function AttachmentCard({ attachment }: { attachment: Attachment }) {
   const fileName = attachment.file_name || getFileName(attachment.path)
 
@@ -72,9 +80,184 @@ function AttachmentCard({ attachment }: { attachment: Attachment }) {
   )
 }
 
+function CopyButton({ text, className = '' }: { text: string; className?: string }) {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    navigator.clipboard.writeText(text).then(() => {
+      setCopied(true)
+      setTimeout(() => setCopied(false), 1500)
+    }).catch(() => {
+      // fallback silently
+    })
+  }
+
+  if (!text) return null
+
+  return (
+    <button
+      onClick={handleCopy}
+      className={`opacity-0 group-hover:opacity-100 transition-opacity p-0.5 rounded hover:bg-white/10 flex-shrink-0 ${className}`}
+      title="复制"
+    >
+      {copied ? (
+        <Check className="h-3 w-3 text-emerald-400" />
+      ) : (
+        <Copy className="h-3 w-3 text-zinc-500" />
+      )}
+    </button>
+  )
+}
+
 export function MessageBubble({ message }: MessageBubbleProps) {
   const isUser = message.role === 'user'
   const isTool = message.role === 'tool'
+  const isMergedTool = message.type === 'merged_tool'
+  const [toolExpanded, setToolExpanded] = useState(false)
+
+  if (isMergedTool) {
+    const status = message.status || 'calling'
+    const hasResult = !!(message.resultContent)
+    const hasArgs = message.arguments !== undefined && message.arguments !== null
+
+    const statusConfig = {
+      calling: {
+        dot: 'bg-amber-400 animate-pulse',
+        label: '执行中',
+        fullBorder: 'border-amber-500/30',
+        labelColor: 'text-amber-400',
+        avatarBg: 'bg-amber-500/20',
+        avatarIcon: 'text-amber-400',
+      },
+      result: {
+        dot: 'bg-emerald-400',
+        label: '已完成',
+        fullBorder: 'border-emerald-500/30',
+        labelColor: 'text-emerald-400',
+        avatarBg: 'bg-emerald-500/20',
+        avatarIcon: 'text-emerald-400',
+      },
+      pending: {
+        dot: 'bg-orange-400 animate-pulse',
+        label: '待确认',
+        fullBorder: 'border-orange-500/30',
+        labelColor: 'text-orange-400',
+        avatarBg: 'bg-orange-500/20',
+        avatarIcon: 'text-orange-400',
+      },
+    }[status]
+
+    const formatJSON = (text: string): string => {
+      try {
+        return JSON.stringify(JSON.parse(text), null, 2)
+      } catch {
+        return text
+      }
+    }
+
+    function stripToolResultPrefix(text: string): string {
+      const lines = text.split('\n')
+      if (lines[0]?.startsWith('工具结果')) {
+        let start = 1
+        while (start < lines.length && lines[start].trim() === '') {
+          start++
+        }
+        return lines.slice(start).join('\n')
+      }
+      return text
+    }
+
+    const argsPreview = hasArgs
+      ? JSON.stringify(message.arguments).slice(0, 500)
+      : ''
+
+    const displayContent = hasResult ? stripToolResultPrefix(message.resultContent!) : ''
+
+    return (
+      <div className="flex gap-3 animate-slide-in">
+        <div className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-full mt-0.5 ${statusConfig.avatarBg}`}>
+          <Terminal className={`h-3.5 w-3.5 ${statusConfig.avatarIcon}`} />
+        </div>
+        <div className="max-w-[80%] min-w-0">
+          <div className="flex items-center gap-2 mb-1">
+            <span className="text-xs font-medium text-zinc-400">{message.toolName || 'Tool'}</span>
+            <span className="text-xs text-zinc-600">{formatTime(message.timestamp)}</span>
+          </div>
+          <div
+            onClick={() => setToolExpanded(!toolExpanded)}
+            className={`cursor-pointer rounded-xl border bg-[#1a1a25]/60 w-full transition-all duration-500 hover:bg-[#1a1a25]/80 group ${statusConfig.fullBorder}`}
+          >
+            {/* Header row */}
+            <div className="flex items-center gap-2 px-3 py-2">
+              <span className={`inline-block h-2 w-2 rounded-full flex-shrink-0 ${statusConfig.dot} transition-colors duration-500`} />
+              <span className="text-sm font-medium text-zinc-300 truncate">{message.toolName || 'Tool'}</span>
+              <span className={`text-xs flex-shrink-0 transition-colors duration-500 ${statusConfig.labelColor}`}>
+                {statusConfig.label}
+              </span>
+              {hasResult && <CopyButton text={displayContent} />}
+              <span className="ml-auto flex-shrink-0">
+                {toolExpanded ? (
+                  <ChevronDown className="h-3.5 w-3.5 text-zinc-500" />
+                ) : (
+                  <ChevronRight className="h-3.5 w-3.5 text-zinc-500" />
+                )}
+              </span>
+            </div>
+
+            {/* Collapsed preview */}
+            {!toolExpanded && (
+              <>
+                {hasArgs && argsPreview && (
+                  <div className="px-3 pb-1 text-xs text-zinc-500 font-mono line-clamp-3"
+                       style={{
+                         display: '-webkit-box',
+                         WebkitLineClamp: 3,
+                         WebkitBoxOrient: 'vertical',
+                         overflow: 'hidden',
+                       }}>
+                    {argsPreview}
+                  </div>
+                )}
+                {hasResult ? (
+                  <div className="px-3 pb-2 text-xs text-[#00f0ff]/50 flex items-center gap-1 select-none">
+                    <span>点击查看工具结果</span>
+                  </div>
+                ) : (
+                  <div className="px-3 pb-2 text-xs text-zinc-500">等待工具执行...</div>
+                )}
+              </>
+            )}
+
+            {/* Expanded */}
+            {toolExpanded && (
+              <div className="border-t border-white/8 px-3 py-2 space-y-2">
+                {hasArgs && (
+                  <div>
+                    <div className="text-xs font-medium text-zinc-500 mb-1">参数</div>
+                    <pre className="text-xs text-zinc-400 font-mono whitespace-pre-wrap bg-black/20 rounded-lg p-2 overflow-x-auto">
+                      {JSON.stringify(message.arguments, null, 2)}
+                    </pre>
+                  </div>
+                )}
+                {hasResult && (
+                  <div>
+                    <div className="text-xs font-medium text-zinc-500 mb-1">结果</div>
+                    <pre className="text-xs text-zinc-400 font-mono whitespace-pre-wrap bg-black/20 rounded-lg p-2 overflow-x-auto max-h-48 overflow-y-auto">
+                      {formatJSON(displayContent)}
+                    </pre>
+                  </div>
+                )}
+                {!hasArgs && !hasResult && (
+                  <div className="text-xs text-zinc-500">等待工具执行...</div>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    )
+  }
 
   const getIcon = () => {
     if (isUser) return <User className="h-4 w-4" />
@@ -111,15 +294,8 @@ export function MessageBubble({ message }: MessageBubbleProps) {
     return 'bg-gradient-to-br from-[#8b5cf6] to-[#ec4899]'
   }
 
-  const formatTime = (timestamp: number) => {
-    return new Date(timestamp).toLocaleTimeString('zh-CN', {
-      hour: '2-digit',
-      minute: '2-digit',
-    })
-  }
-
   return (
-    <div className={`flex gap-4 ${isUser ? 'flex-row-reverse' : 'flex-row'} animate-slide-in`}>
+    <div className={`flex gap-4 ${isUser ? 'flex-row-reverse' : 'flex-row'} animate-slide-in group`}>
       <div
         className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-full ${getAvatarStyles()} shadow-lg`}
       >
@@ -131,6 +307,7 @@ export function MessageBubble({ message }: MessageBubbleProps) {
             {isUser ? 'You' : isTool ? message.toolName || 'Tool' : 'Assistant'}
           </span>
           <span className="text-xs text-zinc-600">{formatTime(message.timestamp)}</span>
+          <CopyButton text={message.content} />
         </div>
         <div
           className={`inline-block rounded-2xl border px-5 py-3 text-left shadow-lg ${getContainerStyles()}`}
diff --git a/web/src/types/protocol.ts b/web/src/types/protocol.ts
index d1c735c..b50b1da 100644
--- a/web/src/types/protocol.ts
+++ b/web/src/types/protocol.ts
@@ -248,11 +248,14 @@ export interface ChatMessage {
   role: 'user' | 'assistant' | 'tool'
   content: string
   timestamp: number
-  type?: 'message' | 'tool_call' | 'tool_result' | 'tool_pending'
+  type?: 'message' | 'tool_call' | 'tool_result' | 'tool_pending' | 'merged_tool'
   toolName?: string
   toolCallId?: string
   arguments?: unknown
   attachments?: Attachment[]
+  status?: 'calling' | 'result' | 'pending'
+  resultContent?: string
+  callContent?: string
 }
 
 export interface Topic {