feat(agent): 支持工具执行结果中的图片和视频资产预览

在聊天消息组件中添加资产灯箱预览功能，支持展示工具调用返回的图片和视频资源。新增 `AssetLightbox` 组件用于全屏浏览资产，并扩展消息类型以包含资产元数据。同时引入 `@radix-ui/react-select` 依赖并为服务端添加资产 URL 转换工具函数。

web/client/src/components/chat/ChatMessage.tsx

@@ -1,12 +1,54 @@
 import { useState, useCallback } from 'react';
 import { cn } from '@/lib/utils';
 import { renderMarkdown } from '@/lib/markdown';
-import { Bot, User, Copy, Trash2, ChevronDown, ChevronRight, RefreshCw, ArrowRight, Quote, Brain } from 'lucide-react';
+import { Bot, User, Copy, Trash2, ChevronDown, ChevronRight, RefreshCw, ArrowRight, Quote, Brain, X, ChevronLeft, ChevronRight as ChevronRightIcon, Play } from 'lucide-react';
 import { ConfirmDialog } from '@/components/ui/confirm';
 import { useConfirm } from '@/hooks/useConfirm';
 import { useToast } from '@/hooks/useToast';
 import type { Message } from '@/types';
 
+type InlineAsset = NonNullable<Message['assets']>[number];
+
+function AssetLightbox({ assets, currentIndex, onClose, onNavigate }: {
+  assets: InlineAsset[];
+  currentIndex: number;
+  onClose: () => void;
+  onNavigate: (index: number) => void;
+}) {
+  const goPrev = () => currentIndex > 0 && onNavigate(currentIndex - 1);
+  const goNext = () => currentIndex < assets.length - 1 && onNavigate(currentIndex + 1);
+
+  return (
+    <div className="fixed inset-0 z-50 bg-black/90 flex items-center justify-center" onClick={onClose}>
+      <button onClick={onClose} className="absolute top-4 right-4 p-2 rounded-full bg-zinc-800 hover:bg-zinc-700 text-white z-10">
+        <X size={20} />
+      </button>
+      {currentIndex > 0 && (
+        <button onClick={(e) => { e.stopPropagation(); goPrev(); }} className="absolute left-4 p-2 rounded-full bg-zinc-800/80 hover:bg-zinc-700 text-white z-10">
+          <ChevronLeft size={24} />
+        </button>
+      )}
+      {currentIndex < assets.length - 1 && (
+        <button onClick={(e) => { e.stopPropagation(); goNext(); }} className="absolute right-4 p-2 rounded-full bg-zinc-800/80 hover:bg-zinc-700 text-white z-10">
+          <ChevronRightIcon size={24} />
+        </button>
+      )}
+      <div className="max-w-[90vw] max-h-[90vh]" onClick={(e) => e.stopPropagation()}>
+        {assets[currentIndex].type === 'image' ? (
+          <img src={assets[currentIndex].url} alt="" className="max-w-full max-h-[90vh] object-contain rounded-lg" />
+        ) : (
+          <video src={assets[currentIndex].url} controls autoPlay className="max-w-full max-h-[90vh] rounded-lg" />
+        )}
+      </div>
+      {assets.length > 1 && (
+        <div className="absolute bottom-4 left-1/2 -translate-x-1/2 text-xs text-zinc-400 bg-zinc-900/80 px-3 py-1 rounded-full">
+          {currentIndex + 1} / {assets.length}
+        </div>
+      )}
+    </div>
+  );
+}
+
 type MessageState = 'streaming' | 'thinking' | 'done';
 
 interface Props {
@@ -30,6 +72,7 @@ export function ChatMessage({ message, isLast, isThinking, onRegenerate, onConti
   const isUser = message.role === 'user';
   const isTool = message.role === 'tool';
   const [reasoningOpen, setReasoningOpen] = useState(false);
+  const [previewIndex, setPreviewIndex] = useState<number | null>(null);
   const { toast } = useToast();
   const { confirmState, confirm, handleConfirm, handleCancel } = useConfirm();
   const state = getState(message, !!isLast, !!isThinking);
@@ -55,9 +98,39 @@ export function ChatMessage({ message, isLast, isThinking, onRegenerate, onConti
     let toolName = '';
     try { const p = JSON.parse(message.content); toolName = p.tool || ''; } catch {}
     return (
-      <div className="flex items-center gap-2 py-1 px-3">
-        <Bot size={13} className="text-zinc-400" />
-        <span className="text-xs text-zinc-400">工具调用: {toolName}</span>
+      <div className="py-1 px-3">
+        <div className="flex items-center gap-2 mb-1.5">
+          <Bot size={13} className="text-zinc-400" />
+          <span className="text-xs text-zinc-400">工具调用: {toolName}</span>
+        </div>
+        {message.assets && message.assets.length > 0 && (
+          <div className="flex flex-wrap gap-2">
+            {message.assets.map((asset, i) => (
+              <button
+                key={i}
+                onClick={() => setPreviewIndex(i)}
+                className="relative group/thumb rounded-lg overflow-hidden border border-zinc-200 hover:border-indigo-300 transition-colors"
+              >
+                {asset.type === 'image' ? (
+                  <img src={asset.url} alt={asset.name} className="w-20 h-20 object-cover" />
+                ) : (
+                  <div className="w-20 h-20 bg-zinc-900 flex items-center justify-center">
+                    <Play size={20} className="text-white" />
+                  </div>
+                )}
+                <div className="absolute inset-0 bg-black/0 group-hover/thumb:bg-black/10 transition-colors" />
+              </button>
+            ))}
+          </div>
+        )}
+        {previewIndex !== null && message.assets && (
+          <AssetLightbox
+            assets={message.assets}
+            currentIndex={previewIndex}
+            onClose={() => setPreviewIndex(null)}
+            onNavigate={(i) => setPreviewIndex(i)}
+          />
+        )}
       </div>
     );
   }
@@ -113,21 +186,24 @@ export function ChatMessage({ message, isLast, isThinking, onRegenerate, onConti
           </div>
         )}
 
+        {/* Streaming indicator (no bubble) */}
+        {state === 'streaming' && !message.content && !isUser && (
+          <div className="inline-flex items-center gap-1.5 py-2">
+            <span className="inline-block w-1.5 h-1.5 bg-indigo-400 rounded-full animate-bounce [animation-delay:0ms]" />
+            <span className="inline-block w-1.5 h-1.5 bg-indigo-400 rounded-full animate-bounce [animation-delay:150ms]" />
+            <span className="inline-block w-1.5 h-1.5 bg-indigo-400 rounded-full animate-bounce [animation-delay:300ms]" />
+          </div>
+        )}
+
         {/* Main content bubble */}
-        {!(message.content === '(调用工具)' && state === 'done' && message.reasoningContent) && (
+        {!(message.content === '(调用工具)' && state === 'done' && message.reasoningContent) && !(state === 'streaming' && !message.content && !isUser) && (
           <div className={cn(
             'rounded-2xl px-4 py-2.5 text-sm leading-relaxed',
             isUser
               ? 'bg-gradient-to-br from-indigo-500 to-indigo-600 text-white rounded-tr-sm shadow-sm'
               : 'bg-zinc-50/80 text-zinc-700 border border-zinc-100 rounded-tl-sm'
           )}>
-            {state === 'streaming' && !message.content ? (
-              <div className="flex items-center gap-1.5 text-zinc-400">
-                <span className="inline-block w-1.5 h-1.5 bg-indigo-300 rounded-full animate-pulse" />
-                <span className="inline-block w-1.5 h-1.5 bg-indigo-300 rounded-full animate-pulse [animation-delay:150ms]" />
-                <span className="inline-block w-1.5 h-1.5 bg-indigo-300 rounded-full animate-pulse [animation-delay:300ms]" />
-              </div>
-            ) : isUser ? (
+            {isUser ? (
               <p className="whitespace-pre-wrap">{message.content}</p>
             ) : (
               <div className="markdown-body prose prose-sm max-w-none" dangerouslySetInnerHTML={{ __html: renderMarkdown(message.content) }} />

web/client/src/components/chat/ChatView.tsx

@@ -6,6 +6,7 @@ import { ChatMessage } from './ChatMessage';
 import { ChatInput } from './ChatInput';
 import { PipelineProgress } from './PipelineProgress';
 import { Button } from '@/components/ui/button';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select';
 import { RefreshCw, Loader2, StopCircle, X, MessageCircle, ArrowDown } from 'lucide-react';
 import { api } from '@/lib/api';
 import type { Account, Message } from '@/types';