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';

web/client/src/components/ui/select.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, ChevronDown } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+const Select = SelectPrimitive.Root;
+const SelectGroup = SelectPrimitive.Group;
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'flex h-9 w-full items-center justify-between rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-700 shadow-sm transition-colors placeholder:text-zinc-400 focus:outline-none focus:ring-2 focus:ring-indigo-200 focus:border-indigo-300 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown size={14} className="text-zinc-400" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        'relative z-50 max-h-72 min-w-[8rem] overflow-hidden rounded-lg border border-zinc-200 bg-white text-zinc-700 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        position === 'popper' && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectPrimitive.Viewport
+        className={cn(
+          'p-1',
+          position === 'popper' && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex w-full cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-indigo-50 focus:text-indigo-700 data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check size={14} />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectItem };

web/client/src/hooks/useChat.ts

@@ -68,6 +68,7 @@ export function useChat(conversationId: string | null) {
         id: `tool-${Date.now()}`,
         role: 'tool' as const,
         content: JSON.stringify({ tool: data.tool, result: data.result }),
+        assets: (data.assets as Message['assets']) || undefined,
         created_at: new Date().toISOString(),
         conversation_id: '',
       }]);

web/client/src/types/index.ts

@@ -100,6 +100,7 @@ export interface Message {
   reasoningContent?: string;
   tool_calls?: unknown;
   created_at: string;
+  assets?: Array<{ type: 'image' | 'video'; url: string; name: string }>;
 }
 
 export interface Asset {