@malette/agent-sdk 0.1.1-alpha.0 → 0.1.2

package/dist/index.mjs

@@ -4,7 +4,7 @@ import { create } from 'zustand';
 import { devtools } from 'zustand/middleware';
 import * as React20 from 'react';
 import React20__default, { memo, useState, useMemo, useEffect, createContext, useCallback, useRef, useImperativeHandle, useContext } from 'react';
-import { Loader2, Check, AlertCircle, ChevronUp, ChevronDown, ExternalLink, Download, Bot, Users, X, Copy, Image, Maximize2, Clock, Sparkles, AlertTriangle, Play, Pencil, Square, RotateCcw, SkipForward, FileText, Code2, FileJson, FileCode, CheckCheck, Eye, Zap, ChevronRight, Lightbulb, RefreshCw, Trash2, ImageIcon, GripVertical, Minimize2, Smartphone, Tablet, Monitor, Globe, PanelLeft, ArrowLeft, Settings, CheckCircle2, Brain, UserCheck, Shield, User, Plus, PanelLeftClose, Search, MessageSquare, ImagePlus, Send, HelpCircle, Lock, Calendar, Link, Share2, Wand2, LayoutGrid, Mic, CheckCircle, ListOrdered, Ban, Pause, Save, Tag, Folder, EyeOff, FileEdit, BookOpen, Edit, XCircle, ArrowRight } from 'lucide-react';
+import { Loader2, Check, AlertCircle, ChevronUp, ChevronDown, ExternalLink, Download, Bot, Users, X, Copy, Image, Maximize2, Clock, Sparkles, AlertTriangle, Play, Pencil, Square, RotateCcw, SkipForward, FileText, Code2, FileJson, FileCode, CheckCheck, Eye, Video, Zap, ChevronRight, Lightbulb, RefreshCw, Trash2, ImageIcon, GripVertical, Minimize2, Smartphone, Tablet, Monitor, Globe, FileImage, ChevronLeft, LayoutGrid, Undo2, Redo2, Save, PanelLeft, ArrowLeft, Settings, CheckCircle2, Brain, UserCheck, Shield, User, Plus, PanelLeftClose, Search, MessageSquare, Unlink, ImagePlus, Send, HelpCircle, Lock, Calendar, Link, Share2, Wand2, Mic, CheckCircle, ListOrdered, Ban, Pause, Tag, Folder, EyeOff, FileEdit, BookOpen, Edit, XCircle, ArrowRight } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useShallow } from 'zustand/react/shallow';
@@ -12,6 +12,7 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { Slot } from '@radix-ui/react-slot';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import 'react-dom';
+import { marked } from 'marked';
 
 // src/lib/fetch.ts
 async function fetcher(input, init, isServer = false) {
@@ -398,6 +399,52 @@ AI\u56DE\u590D\u6458\u8981\uFF1A${assistantMessage.slice(0, 200)}` : ""}`
     return userMessage.slice(0, 20) + (userMessage.length > 20 ? "..." : "");
   }
 }
+var artifactService = {
+  /**
+   * 获取会话的所有产物列表
+   */
+  list: async (sessionId) => {
+    return fetcher(`${API_BASE}/sessions/${sessionId}/artifacts`);
+  },
+  /**
+   * 获取产物详情
+   */
+  get: async (artifactId) => {
+    return fetcher(`${API_BASE}/artifacts/${artifactId}`);
+  },
+  /**
+   * 更新产物内容（用户编辑后保存）
+   */
+  updateContent: async (artifactId, content) => {
+    return fetcher(`${API_BASE}/artifacts/${artifactId}/content`, {
+      method: "PUT",
+      body: JSON.stringify({ content })
+    });
+  },
+  /**
+   * 删除产物
+   */
+  delete: async (artifactId) => {
+    return fetcher(`${API_BASE}/artifacts/${artifactId}`, {
+      method: "DELETE"
+    });
+  },
+  /**
+   * 获取产物版本历史
+   */
+  getVersions: async (artifactId) => {
+    return fetcher(`${API_BASE}/artifacts/${artifactId}/versions`);
+  },
+  /**
+   * 回滚到指定版本
+   */
+  revert: async (artifactId, version) => {
+    return fetcher(`${API_BASE}/artifacts/${artifactId}/revert`, {
+      method: "POST",
+      body: JSON.stringify({ version })
+    });
+  }
+};
 var shareService = {
   /**
    * 创建分享链接
@@ -786,6 +833,9 @@ var useAgentStore = create()(
       subAgents: [],
       tools: [],
       skills: [],
+      artifacts: {},
+      artifactOrder: [],
+      activeArtifactId: null,
       // ============ Session Actions ============
       setSessions: (sessions) => set({ sessions }, false, "setSessions"),
       setTools: (tools) => set({ tools }, false, "setTools"),
@@ -1150,19 +1200,99 @@ var useAgentStore = create()(
         false,
         "setActiveSubAgent"
       ),
+      // ============ Artifact Actions ============
+      upsertArtifact: (artifact) => set(
+        (state) => {
+          const isNew = !state.artifacts[artifact.id];
+          return {
+            artifacts: {
+              ...state.artifacts,
+              [artifact.id]: artifact
+            },
+            artifactOrder: isNew ? [...state.artifactOrder, artifact.id] : state.artifactOrder
+          };
+        },
+        false,
+        "upsertArtifact"
+      ),
+      updateArtifactContent: (artifactId, content, source) => set(
+        (state) => {
+          const existing = state.artifacts[artifactId];
+          if (!existing) return state;
+          return {
+            artifacts: {
+              ...state.artifacts,
+              [artifactId]: {
+                ...existing,
+                currentContent: content,
+                version: existing.version + 1,
+                gmtModified: (/* @__PURE__ */ new Date()).toISOString()
+              }
+            }
+          };
+        },
+        false,
+        "updateArtifactContent"
+      ),
+      setActiveArtifact: (artifactId) => set(
+        { activeArtifactId: artifactId },
+        false,
+        "setActiveArtifact"
+      ),
+      removeArtifact: (artifactId) => set(
+        (state) => {
+          const { [artifactId]: _, ...remaining } = state.artifacts;
+          return {
+            artifacts: remaining,
+            artifactOrder: state.artifactOrder.filter((id) => id !== artifactId),
+            activeArtifactId: state.activeArtifactId === artifactId ? null : state.activeArtifactId
+          };
+        },
+        false,
+        "removeArtifact"
+      ),
+      clearArtifacts: () => set(
+        { artifacts: {}, artifactOrder: [], activeArtifactId: null },
+        false,
+        "clearArtifacts"
+      ),
+      setArtifacts: (artifacts) => set(
+        {
+          artifacts: artifacts.reduce((acc, a) => {
+            acc[a.id] = a;
+            return acc;
+          }, {}),
+          artifactOrder: artifacts.map((a) => a.id)
+        },
+        false,
+        "setArtifacts"
+      ),
+      reorderArtifacts: (fromIndex, toIndex) => set(
+        (state) => {
+          const newOrder = [...state.artifactOrder];
+          const [movedId] = newOrder.splice(fromIndex, 1);
+          newOrder.splice(toIndex, 0, movedId);
+          return { artifactOrder: newOrder };
+        },
+        false,
+        "reorderArtifacts"
+      ),
       // ============ 复合操作 ============
       startNewChat: (sessionId) => {
         set(
           (state) => ({
             messages: [],
-            chatUI: initialChatUIState
+            chatUI: initialChatUIState,
+            artifacts: {},
+            artifactOrder: [],
+            activeArtifactId: null
           }),
           false,
           "startNewChat"
         );
       },
       resetChatState: () => set(
-        { chatUI: initialChatUIState },
+        { chatUI: initialChatUIState, artifacts: {}, artifactOrder: [], activeArtifactId: null },
         false,
         "resetChatState"
       )
@@ -1189,6 +1319,23 @@ var useCurrentSession = () => useAgentStore((state) => state.currentSession);
 var useSessions = () => useAgentStore((state) => state.sessions);
 var useSubAgents = () => useAgentStore((state) => state.subAgents);
 var useChatUI = () => useAgentStore((state) => state.chatUI);
+var useArtifacts = () => useAgentStore((state) => state.artifacts);
+var useActiveArtifactId = () => useAgentStore((state) => state.activeArtifactId);
+var useActiveArtifact = () => {
+  const artifacts = useAgentStore((state) => state.artifacts);
+  const activeId = useAgentStore((state) => state.activeArtifactId);
+  return activeId ? artifacts[activeId] ?? null : null;
+};
+var useArtifactList = () => {
+  const artifacts = useAgentStore((state) => state.artifacts);
+  const artifactOrder = useAgentStore((state) => state.artifactOrder);
+  const ordered = artifactOrder.map((id) => artifacts[id]).filter(Boolean);
+  const unordered = Object.values(artifacts).filter(
+    (a) => !artifactOrder.includes(a.id)
+  );
+  return [...ordered, ...unordered];
+};
+var useArtifactOrder = () => useAgentStore((state) => state.artifactOrder);
 var useSessionsLoading = () => useAgentStore((state) => state.sessionsLoading);
 var findMessageById = (messageId) => {
   return useAgentStore.getState().messages.find((m) => m.messageId === messageId);
@@ -1377,7 +1524,11 @@ function useSSE(options) {
     setShowPlanConfirmDialog,
     setShowHumanInputDialog,
     setWaitingStepId,
-    clearPlanState
+    clearPlanState,
+    // Artifact actions
+    upsertArtifact,
+    updateArtifactContent,
+    setActiveArtifact
   } = useAgentStore();
   const clearHeartbeatTimeout = useCallback(() => {
     if (heartbeatTimeoutRef.current) {
@@ -1575,6 +1726,37 @@ function useSSE(options) {
       });
       return;
     }
+    if (eventType === "artifact_created") {
+      const sessionId = useAgentStore.getState().currentSession?.sessionId;
+      if (data.artifactId && sessionId) {
+        const artifactType = data.type || "code";
+        const artifactEntry = {
+          id: data.artifactId,
+          sessionId,
+          type: artifactType,
+          title: data.title || "Untitled",
+          currentContent: data.content || "",
+          language: data.language,
+          version: 1,
+          source: "tool",
+          sourceId: data.sourceToolCallId,
+          metadata: data.metadata,
+          gmtCreate: (/* @__PURE__ */ new Date()).toISOString(),
+          gmtModified: (/* @__PURE__ */ new Date()).toISOString()
+        };
+        upsertArtifact(artifactEntry);
+        setActiveArtifact(data.artifactId);
+        console.log("[SSE] Artifact created:", data.artifactId, data.title);
+      }
+      return;
+    }
+    if (eventType === "artifact_updated") {
+      if (data.artifactId && data.content) {
+        updateArtifactContent(data.artifactId, data.content, "ai");
+        console.log("[SSE] Artifact updated:", data.artifactId, "version:", data.version);
+      }
+      return;
+    }
     const rawToolCalls = data.toolCalls || data.tool_calls || data.actions || [];
     const normalizedToolCalls = rawToolCalls.length > 0 ? normalizeToolCalls2(rawToolCalls) : void 0;
     let finalToolCalls = normalizedToolCalls;
@@ -2280,7 +2462,7 @@ function useSSE(options) {
     try {
       console.log("[SSE] Step 1: Sending message...");
       const response = await messageService.sendStream(
-        { sessionId, content, frontendTools: sendOptions?.frontendTools },
+        { sessionId, content, frontendTools: sendOptions?.frontendTools, artifactContext: sendOptions?.artifactContext },
         abortControllerRef.current.signal
       );
       const reader = response.body?.getReader();
@@ -2420,6 +2602,92 @@ function useSSE(options) {
     isConnected
   };
 }
+var CHANNEL_ID = "adic-agent-canvas-bridge";
+function useCanvasBridge(options = {}) {
+  const {
+    canvasIframeRef,
+    targetOrigin = "*",
+    enabled = false,
+    onArtifactSelected,
+    onArtifactContentChanged
+  } = options;
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+  const postToCanvas = useCallback((type, payload) => {
+    const iframe = canvasIframeRef?.current;
+    if (!iframe?.contentWindow) {
+      console.warn("[CanvasBridge] Canvas iframe not available");
+      return;
+    }
+    const envelope = {
+      channel: CHANNEL_ID,
+      message: {
+        type,
+        payload,
+        timestamp: Date.now()
+      }
+    };
+    iframe.contentWindow.postMessage(envelope, targetOrigin);
+    console.log("[CanvasBridge] Sent:", type, payload.artifactId || payload.artifact?.id);
+  }, [canvasIframeRef, targetOrigin]);
+  useEffect(() => {
+    if (!enabled) return;
+    const handleMessage = (event) => {
+      if (targetOrigin !== "*" && event.origin !== targetOrigin) return;
+      const envelope = event.data;
+      if (!envelope || envelope.channel !== CHANNEL_ID) return;
+      const { type, payload } = envelope.message;
+      console.log("[CanvasBridge] Received:", type, payload);
+      switch (type) {
+        case "artifact_selected": {
+          if (payload.artifactId) {
+            optionsRef.current.onArtifactSelected?.(payload.artifactId);
+            useAgentStore.getState().setActiveArtifact(payload.artifactId);
+          }
+          break;
+        }
+        case "artifact_content_changed": {
+          if (payload.artifactId && payload.content !== void 0) {
+            optionsRef.current.onArtifactContentChanged?.(payload.artifactId, payload.content);
+            useAgentStore.getState().updateArtifactContent(
+              payload.artifactId,
+              payload.content,
+              "user"
+            );
+          }
+          break;
+        }
+        default:
+          console.log("[CanvasBridge] Unknown message type:", type);
+      }
+    };
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [enabled, targetOrigin]);
+  const notifyArtifactCreated = useCallback((artifact) => {
+    if (!enabled) return;
+    postToCanvas("artifact_created", { artifact });
+  }, [enabled, postToCanvas]);
+  const notifyArtifactUpdated = useCallback((artifact) => {
+    if (!enabled) return;
+    postToCanvas("artifact_updated", { artifact });
+  }, [enabled, postToCanvas]);
+  const notifyArtifactDeleted = useCallback((artifactId) => {
+    if (!enabled) return;
+    postToCanvas("artifact_deleted", { artifactId });
+  }, [enabled, postToCanvas]);
+  const syncAllArtifacts = useCallback(() => {
+    if (!enabled) return;
+    const artifacts = Object.values(useAgentStore.getState().artifacts);
+    postToCanvas("artifacts_sync", { artifacts });
+  }, [enabled, postToCanvas]);
+  return {
+    notifyArtifactCreated,
+    notifyArtifactUpdated,
+    notifyArtifactDeleted,
+    syncAllArtifacts
+  };
+}
 
 // src/hooks/sseConnection.ts
 var SSE_HEARTBEAT_TIMEOUT2 = 45e3;
@@ -2882,14 +3150,14 @@ function getParamsSummary(params, maxItems = 2) {
 }
 function generateToolCallDescription(toolName, params) {
   const formatted = formatParameters(params);
-  const prompt = formatted.find((p) => p.key === "prompt" || p.key === "query" || p.key === "content");
+  const prompt2 = formatted.find((p) => p.key === "prompt" || p.key === "query" || p.key === "content");
   const image2 = formatted.find((p) => p.key === "image" || p.key === "image_url" || p.key === "imageUrl");
   const style = formatted.find((p) => p.key === "style");
   formatted.find((p) => p.key === "width" || p.key === "size");
   const toolLower = toolName.toLowerCase();
   if (toolLower.includes("generate") || toolLower.includes("image") || toolLower.includes("art")) {
-    if (prompt) {
-      return `\u751F\u6210\u56FE\u50CF\uFF1A${prompt.displayValue.slice(0, 50)}${prompt.displayValue.length > 50 ? "..." : ""}`;
+    if (prompt2) {
+      return `\u751F\u6210\u56FE\u50CF\uFF1A${prompt2.displayValue.slice(0, 50)}${prompt2.displayValue.length > 50 ? "..." : ""}`;
     }
     if (style) {
       return `\u751F\u6210 ${style.displayValue} \u98CE\u683C\u7684\u56FE\u50CF`;
@@ -2897,14 +3165,14 @@ function generateToolCallDescription(toolName, params) {
     return "\u751F\u6210\u56FE\u50CF";
   }
   if (toolLower.includes("search") || toolLower.includes("query")) {
-    if (prompt) {
-      return `\u641C\u7D22\uFF1A${prompt.displayValue}`;
+    if (prompt2) {
+      return `\u641C\u7D22\uFF1A${prompt2.displayValue}`;
     }
     return "\u6267\u884C\u641C\u7D22";
   }
   if (toolLower.includes("translate")) {
-    if (prompt) {
-      return `\u7FFB\u8BD1\uFF1A${prompt.displayValue.slice(0, 30)}...`;
+    if (prompt2) {
+      return `\u7FFB\u8BD1\uFF1A${prompt2.displayValue.slice(0, 30)}...`;
     }
     return "\u6267\u884C\u7FFB\u8BD1";
   }
@@ -2914,8 +3182,8 @@ function generateToolCallDescription(toolName, params) {
     }
     return "\u6267\u884C\u5206\u6790";
   }
-  if (prompt) {
-    return prompt.displayValue.slice(0, 60) + (prompt.displayValue.length > 60 ? "..." : "");
+  if (prompt2) {
+    return prompt2.displayValue.slice(0, 60) + (prompt2.displayValue.length > 60 ? "..." : "");
   }
   const paramCount = formatted.length;
   if (paramCount === 0) {
@@ -6910,7 +7178,6 @@ var createAssetFromSource = (options) => {
 var resolveAssetForDisplay = async (asset, config) => {
   let working = asset;
   const strategy = config?.asset;
-  console.log("Resolving asset for display:", asset, "with strategy:", strategy);
   if (strategy?.resolve && !working.url) {
     working = await strategy.resolve(working);
   }
@@ -6925,6 +7192,9 @@ var resolveAssetForDisplay = async (asset, config) => {
     if (resolved) return resolved;
   }
   if (working.url) {
+    if (working.url.includes("industryai")) {
+      working.url = working.url.split("?")[0];
+    }
     return {
       url: working.url,
       hdUrl: working.url,
@@ -6934,7 +7204,7 @@ var resolveAssetForDisplay = async (asset, config) => {
   return null;
 };
 
-// ../../node_modules/clsx/dist/clsx.mjs
+// node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
   if ("string" == typeof e || "number" == typeof e) n += e;
@@ -10543,7 +10813,7 @@ var MessageImageInternal = memo(function MessageImageInternal2({ src, alt, class
       /* @__PURE__ */ jsx("span", { children: "\u56FE\u7247\u52A0\u8F7D\u5931\u8D25" })
     ] });
   }
-  return /* @__PURE__ */ jsxs("div", { className: "relative cursor-pointer overflow-hidden rounded-lg my-2", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "relative inline-block max-w-full overflow-hidden rounded-lg my-2", children: [
     previewUrl && /* @__PURE__ */ jsx(
       ImagePreviewComp,
       {
@@ -10551,7 +10821,7 @@ var MessageImageInternal = memo(function MessageImageInternal2({ src, alt, class
         onClose: () => setPreviewUrl(null)
       }
     ),
-    !loaded && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-zinc-800 animate-pulse rounded-lg", style: { minHeight: "100px" } }),
+    !loaded && /* @__PURE__ */ jsx("div", { className: "bg-zinc-800 animate-pulse rounded-lg", style: { minHeight: "100px", minWidth: "150px" } }),
     /* @__PURE__ */ jsx(
       "img",
       {
@@ -10561,23 +10831,284 @@ var MessageImageInternal = memo(function MessageImageInternal2({ src, alt, class
         onLoad: handleLoad,
         onError: handleError,
         onClick: () => setPreviewUrl(src),
-        className: cn("rounded-lg cursor-zoom-in", className, !loaded && "opacity-0"),
-        style: { maxHeight: "400px" }
+        className: cn(
+          "rounded-lg cursor-zoom-in max-w-full h-auto block",
+          className,
+          !loaded && "opacity-0 absolute"
+        ),
+        style: { maxHeight: "400px", objectFit: "contain" }
       }
     )
   ] });
 });
 var MessageVideoInternal = memo(function MessageVideoInternal2({ src, className }) {
-  return /* @__PURE__ */ jsx("div", { className: "my-2 relative rounded-lg overflow-hidden bg-zinc-900 border border-zinc-800", children: /* @__PURE__ */ jsx(
-    "video",
-    {
-      src,
-      controls: true,
-      className: cn("max-w-full rounded-lg max-h-[400px] w-full", className),
-      preload: "metadata",
-      children: "\u60A8\u7684\u6D4F\u89C8\u5668\u4E0D\u652F\u6301\u89C6\u9891\u64AD\u653E"
+  const videoRef = React20__default.useRef(null);
+  const canvasRef = React20__default.useRef(null);
+  const [posterUrl, setPosterUrl] = useState(null);
+  const [isHovering, setIsHovering] = useState(false);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [isMuted, setIsMuted] = useState(true);
+  const [duration, setDuration] = useState(0);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [isFullPlaying, setIsFullPlaying] = useState(false);
+  const hoverTimerRef = React20__default.useRef(null);
+  const VideoPreviewComp = useComponent("VideoPreview") || VideoPreviewInternal;
+  const [showPreview, setShowPreview] = useState(false);
+  useEffect(() => {
+    const video = document.createElement("video");
+    video.crossOrigin = "anonymous";
+    video.preload = "metadata";
+    video.muted = true;
+    video.addEventListener("loadeddata", () => {
+      video.currentTime = Math.min(0.5, video.duration * 0.1);
+    });
+    video.addEventListener("seeked", () => {
+      try {
+        const canvas = document.createElement("canvas");
+        canvas.width = video.videoWidth;
+        canvas.height = video.videoHeight;
+        const ctx = canvas.getContext("2d");
+        if (ctx) {
+          ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+          const dataUrl = canvas.toDataURL("image/jpeg", 0.8);
+          setPosterUrl(dataUrl);
+        }
+      } catch {
+      }
+      video.remove();
+    });
+    video.addEventListener("error", () => {
+      video.remove();
+    });
+    video.src = src;
+    video.load();
+    return () => {
+      video.remove();
+    };
+  }, [src]);
+  const handleLoadedMetadata = () => {
+    const video = videoRef.current;
+    if (video) {
+      setDuration(video.duration);
     }
-  ) });
+  };
+  const handleTimeUpdate = () => {
+    const video = videoRef.current;
+    if (video) {
+      setCurrentTime(video.currentTime);
+    }
+  };
+  const handleMouseEnter = () => {
+    setIsHovering(true);
+    if (isFullPlaying) return;
+    hoverTimerRef.current = setTimeout(() => {
+      const video = videoRef.current;
+      if (video) {
+        video.muted = true;
+        video.currentTime = 0;
+        video.play().then(() => setIsPlaying(true)).catch(() => {
+        });
+      }
+    }, 300);
+  };
+  const handleMouseLeave = () => {
+    setIsHovering(false);
+    if (hoverTimerRef.current) {
+      clearTimeout(hoverTimerRef.current);
+      hoverTimerRef.current = null;
+    }
+    if (!isFullPlaying) {
+      const video = videoRef.current;
+      if (video) {
+        video.pause();
+        video.currentTime = 0;
+        setIsPlaying(false);
+      }
+    }
+  };
+  const handleClick = (e) => {
+    e.stopPropagation();
+    const video = videoRef.current;
+    if (!video) return;
+    if (isFullPlaying) {
+      video.pause();
+      setIsPlaying(false);
+      setIsFullPlaying(false);
+    } else {
+      video.muted = isMuted;
+      video.play().then(() => {
+        setIsPlaying(true);
+        setIsFullPlaying(true);
+      }).catch(() => {
+      });
+    }
+  };
+  const handleToggleMute = (e) => {
+    e.stopPropagation();
+    const video = videoRef.current;
+    if (video) {
+      video.muted = !isMuted;
+      setIsMuted(!isMuted);
+    }
+  };
+  const handleProgressClick = (e) => {
+    e.stopPropagation();
+    const video = videoRef.current;
+    if (!video || !duration) return;
+    const rect = e.currentTarget.getBoundingClientRect();
+    const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+    video.currentTime = ratio * duration;
+    setCurrentTime(ratio * duration);
+  };
+  const formatTime2 = (seconds) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${mins}:${secs.toString().padStart(2, "0")}`;
+  };
+  const progressPercent = duration > 0 ? currentTime / duration * 100 : 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    showPreview && /* @__PURE__ */ jsx(VideoPreviewComp, { src, onClose: () => setShowPreview(false) }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "my-2 relative rounded-xl overflow-hidden bg-black group/video cursor-pointer",
+          "border border-zinc-800/60 agent-sdk-light:border-zinc-200",
+          "transition-shadow duration-200 hover:shadow-xl hover:shadow-black/20",
+          className
+        ),
+        style: { maxHeight: "400px", maxWidth: "100%" },
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onClick: handleClick,
+        children: [
+          posterUrl && !isPlaying && /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: posterUrl,
+              alt: "Video cover",
+              className: "absolute inset-0 w-full h-full object-contain z-[1]"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "video",
+            {
+              ref: videoRef,
+              src,
+              muted: isMuted,
+              playsInline: true,
+              preload: "metadata",
+              onLoadedMetadata: handleLoadedMetadata,
+              onTimeUpdate: handleTimeUpdate,
+              onEnded: () => {
+                setIsPlaying(false);
+                setIsFullPlaying(false);
+              },
+              className: cn(
+                "w-full max-h-[400px] object-contain",
+                !isPlaying && posterUrl && "opacity-0"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: "hidden" }),
+          !isFullPlaying && /* @__PURE__ */ jsx("div", { className: cn(
+            "absolute inset-0 z-[2] flex items-center justify-center",
+            "bg-gradient-to-t from-black/50 via-transparent to-transparent",
+            "transition-opacity duration-200",
+            isHovering && isPlaying ? "opacity-0" : "opacity-100"
+          ), children: /* @__PURE__ */ jsx("div", { className: cn(
+            "w-14 h-14 rounded-full bg-white/20 backdrop-blur-md",
+            "flex items-center justify-center",
+            "transition-all duration-200",
+            "group-hover/video:scale-110 group-hover/video:bg-white/30",
+            "shadow-lg shadow-black/20"
+          ), children: /* @__PURE__ */ jsx("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "white", className: "ml-1", children: /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7z" }) }) }) }),
+          /* @__PURE__ */ jsxs("div", { className: cn(
+            "absolute bottom-0 left-0 right-0 z-[3]",
+            "bg-gradient-to-t from-black/80 via-black/40 to-transparent",
+            "px-3 pb-2.5 pt-8",
+            "transition-opacity duration-200",
+            isHovering || isFullPlaying ? "opacity-100" : "opacity-0"
+          ), children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "w-full h-1 bg-white/20 rounded-full mb-2 cursor-pointer group/progress",
+                onClick: handleProgressClick,
+                children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "h-full bg-[#d8ff00] rounded-full relative transition-all duration-75",
+                    style: { width: `${progressPercent}%` },
+                    children: /* @__PURE__ */ jsx("div", { className: "absolute right-0 top-1/2 -translate-y-1/2 w-3 h-3 bg-[#d8ff00] rounded-full opacity-0 group-hover/progress:opacity-100 transition-opacity shadow-md" })
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: handleClick,
+                    className: "p-1 text-white/80 hover:text-white transition-colors",
+                    children: isPlaying ? /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", children: [
+                      /* @__PURE__ */ jsx("rect", { x: "6", y: "4", width: "4", height: "16", rx: "1" }),
+                      /* @__PURE__ */ jsx("rect", { x: "14", y: "4", width: "4", height: "16", rx: "1" })
+                    ] }) : /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7z" }) })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: handleToggleMute,
+                    className: "p-1 text-white/80 hover:text-white transition-colors",
+                    children: isMuted ? /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                      /* @__PURE__ */ jsx("polygon", { points: "11 5 6 9 2 9 2 15 6 15 11 19 11 5" }),
+                      /* @__PURE__ */ jsx("line", { x1: "23", y1: "9", x2: "17", y2: "15" }),
+                      /* @__PURE__ */ jsx("line", { x1: "17", y1: "9", x2: "23", y2: "15" })
+                    ] }) : /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                      /* @__PURE__ */ jsx("polygon", { points: "11 5 6 9 2 9 2 15 6 15 11 19 11 5" }),
+                      /* @__PURE__ */ jsx("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14" }),
+                      /* @__PURE__ */ jsx("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07" })
+                    ] })
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-white/60 font-mono tabular-nums", children: [
+                  formatTime2(currentTime),
+                  " / ",
+                  formatTime2(duration)
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    const video = videoRef.current;
+                    if (video) {
+                      video.pause();
+                      setIsPlaying(false);
+                      setIsFullPlaying(false);
+                    }
+                    setShowPreview(true);
+                  },
+                  className: "p-1 text-white/60 hover:text-white transition-colors",
+                  title: "\u5168\u5C4F\u9884\u89C8",
+                  children: /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                    /* @__PURE__ */ jsx("polyline", { points: "15 3 21 3 21 9" }),
+                    /* @__PURE__ */ jsx("polyline", { points: "9 21 3 21 3 15" }),
+                    /* @__PURE__ */ jsx("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
+                    /* @__PURE__ */ jsx("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+                  ] })
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
 });
 var ImagePreviewInternal = memo(function ImagePreviewInternal2({
   src,
@@ -12223,6 +12754,7 @@ var ToolResultRenderer = memo(function ToolResultRenderer2({
   result,
   mediaUrls,
   config,
+  toolCallData,
   onOpenArtifact
 }) {
   const [imgLoaded, setImgLoaded] = useState({});
@@ -12289,32 +12821,134 @@ var ToolResultRenderer = memo(function ToolResultRenderer2({
       }
     ),
     /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-      hasMedia && /* @__PURE__ */ jsxs("div", { className: "p-2", children: [
-        videoUrls.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-2 mb-2", children: videoUrls.map((video, i) => /* @__PURE__ */ jsx("div", { className: "relative rounded-lg overflow-hidden bg-black", children: /* @__PURE__ */ jsx(
-          "video",
-          {
-            src: video.url,
-            controls: true,
-            className: "w-full max-h-60 object-contain",
-            preload: "metadata",
-            children: "\u60A8\u7684\u6D4F\u89C8\u5668\u4E0D\u652F\u6301\u89C6\u9891\u64AD\u653E"
+      hasMedia && /* @__PURE__ */ jsx("div", { className: "p-2", children: (() => {
+        const totalMedia = imageUrls.length + videoUrls.length;
+        const isMultiple = totalMedia > 1;
+        const buildMediaMetadata = (mediaIndex) => {
+          if (!toolCallData) return void 0;
+          const resultAny = toolCallData.result;
+          const metadata = {};
+          if (toolCallData.name) metadata.toolName = toolCallData.name;
+          if (resultAny?.relation?.toolName) metadata.toolName = resultAny.relation.toolName;
+          if (toolCallData.arguments) metadata.generationParams = toolCallData.arguments;
+          if (resultAny?.relation) metadata.relation = resultAny.relation;
+          if (resultAny?.taskId) metadata.taskId = resultAny.taskId;
+          const work = resultAny?.works?.[mediaIndex];
+          if (work) {
+            if (work.publicId) metadata.workId = work.publicId;
+            if (work.fileId) metadata.fileId = work.fileId;
           }
-        ) }, `video-${i}`)) }),
-        imageUrls.length > 0 && /* @__PURE__ */ jsx("div", { children: imageUrls.map((img, i) => /* @__PURE__ */ jsxs("div", { className: `relative group/img overflow-hidden ${imageUrls.length > 1 ? "aspect-square bg-black" : ""}`, children: [
-          !imgLoaded[i] && /* @__PURE__ */ jsx("div", { className: `bg-zinc-800 animate-pulse flex items-center justify-center`, children: /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-5 w-5 border-b-2 border-[#d8ff00]" }) }),
-          /* @__PURE__ */ jsx(
-            "img",
+          return metadata;
+        };
+        return /* @__PURE__ */ jsxs("div", { className: isMultiple ? "grid grid-cols-2 gap-2" : "flex", children: [
+          videoUrls.map((video, i) => /* @__PURE__ */ jsxs(
+            "div",
             {
-              src: img.url,
-              alt: "Generated",
-              onLoad: () => handleImgLoad(i),
-              className: `cursor-zoom-in ${imgLoaded[i] ? "" : "hidden"}`,
-              onClick: () => setPreviewUrl(img.hdUrl),
-              style: { height: 80 }
-            }
-          )
-        ] }, `img-${i}`)) })
-      ] }),
+              className: `relative group/media overflow-hidden rounded-lg bg-black ${isMultiple ? "aspect-square" : "max-h-[375px]"}`,
+              children: [
+                /* @__PURE__ */ jsx(
+                  MessageVideoInternal,
+                  {
+                    src: video.hdUrl || video.url,
+                    className: isMultiple ? "w-full h-full object-cover" : "max-h-[375px] max-w-full object-contain"
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover/media:opacity-100 transition-opacity duration-200 flex items-center justify-between z-[10]", children: [
+                  onOpenArtifact && /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        const resultAny = toolCallData?.result;
+                        const displayName = resultAny?.relation?.toolName || toolCallData?.name || "\u89C6\u9891\u751F\u6210";
+                        onOpenArtifact({
+                          type: "video",
+                          title: `${displayName} #${i + 1}`,
+                          content: video.hdUrl || video.url,
+                          metadata: buildMediaMetadata(imageUrls.length + i)
+                        });
+                      },
+                      className: "flex items-center gap-1.5 px-2.5 py-1.5 text-[11px] font-medium text-white bg-white/15 hover:bg-white/25 backdrop-blur-sm rounded-md transition-colors",
+                      children: [
+                        /* @__PURE__ */ jsx(Sparkles, { size: 12 }),
+                        "\u67E5\u770B\u8BE6\u60C5"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        window.open(video.hdUrl || video.url, "_blank");
+                      },
+                      className: "p-1.5 text-white/80 hover:text-white bg-white/15 hover:bg-white/25 backdrop-blur-sm rounded-md transition-colors",
+                      title: "\u65B0\u7A97\u53E3\u6253\u5F00",
+                      children: /* @__PURE__ */ jsx(Video, { size: 14 })
+                    }
+                  )
+                ] })
+              ]
+            },
+            `video-${i}`
+          )),
+          imageUrls.map((img, i) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: `relative group/media overflow-hidden rounded-lg bg-black ${isMultiple ? "aspect-square" : "max-h-[375px]"}`,
+              children: [
+                !imgLoaded[i] && /* @__PURE__ */ jsx("div", { className: "bg-zinc-800 animate-pulse flex items-center justify-center w-full aspect-square", children: /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-5 w-5 border-b-2 border-[#d8ff00]" }) }),
+                /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: img.url,
+                    alt: "Generated",
+                    onLoad: () => handleImgLoad(i),
+                    className: `cursor-zoom-in ${imgLoaded[i] ? "" : "hidden"} ${isMultiple ? "w-full h-full object-cover" : "max-h-[375px] max-w-full h-auto object-contain"}`,
+                    onClick: () => setPreviewUrl(img.hdUrl)
+                  }
+                ),
+                imgLoaded[i] && /* @__PURE__ */ jsxs("div", { className: "absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover/media:opacity-100 transition-opacity duration-200 flex items-center justify-between", children: [
+                  onOpenArtifact && /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        const resultAny = toolCallData?.result;
+                        const displayName = resultAny?.relation?.toolName || toolCallData?.name || "\u56FE\u7247\u751F\u6210";
+                        onOpenArtifact({
+                          type: "image",
+                          title: `${displayName} #${i + 1}`,
+                          content: img.hdUrl || img.url,
+                          metadata: buildMediaMetadata(i)
+                        });
+                      },
+                      className: "flex items-center gap-1.5 px-2.5 py-1.5 text-[11px] font-medium text-white bg-white/15 hover:bg-white/25 backdrop-blur-sm rounded-md transition-colors",
+                      children: [
+                        /* @__PURE__ */ jsx(Sparkles, { size: 12 }),
+                        "\u67E5\u770B\u8BE6\u60C5"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        setPreviewUrl(img.hdUrl);
+                      },
+                      className: "p-1.5 text-white/80 hover:text-white bg-white/15 hover:bg-white/25 backdrop-blur-sm rounded-md transition-colors",
+                      title: "\u653E\u5927\u9884\u89C8",
+                      children: /* @__PURE__ */ jsx(Image, { size: 14 })
+                    }
+                  )
+                ] })
+              ]
+            },
+            `img-${i}`
+          ))
+        ] });
+      })() }),
       hasCustomResponses && customResult
     ] })
   ] });
@@ -12440,6 +13074,7 @@ var ToolCallCard3 = memo(function ToolCallCard4({
         result: toolCall.result,
         mediaUrls,
         config,
+        toolCallData: toolCall,
         defaultExpanded: false,
         onOpenArtifact
       }
@@ -12710,7 +13345,7 @@ var ComponentPendingCard = memo(function ComponentPendingCard2({
     })() })
   ] });
 });
-var ThoughtTimelineCard = memo(function ThoughtTimelineCard2({ thought, config, isLoading = false }) {
+var ThoughtTimelineCard = memo(function ThoughtTimelineCard2({ thought, config, isLoading = false, skipImages = false }) {
   const [expanded, setExpanded] = useState(true);
   const { showItemTime } = useAgentStore();
   const thoughtType = thought?.type || "";
@@ -12734,9 +13369,9 @@ var ThoughtTimelineCard = memo(function ThoughtTimelineCard2({ thought, config,
     return null;
   }
   if (thought?.raw && Array.isArray(thought.raw)) {
-    const hasConfirmationEvent = thought.raw.some((r2) => {
-      const type = r2?.type || "";
-      return excludedTypes.includes(type) || r2?.content && (r2.content.includes('"type":"tool_confirmed"') || r2.content.includes('"type":"component_submitted"') || r2.content.includes("\u7528\u6237\u786E\u8BA4\u6267\u884C\u5DE5\u5177\u8C03\u7528"));
+    const hasConfirmationEvent = thought.raw.some((r3) => {
+      const type = r3?.type || "";
+      return excludedTypes.includes(type) || r3?.content && (r3.content.includes('"type":"tool_confirmed"') || r3.content.includes('"type":"component_submitted"') || r3.content.includes("\u7528\u6237\u786E\u8BA4\u6267\u884C\u5DE5\u5177\u8C03\u7528"));
     });
     if (hasConfirmationEvent) {
       return null;
@@ -12748,12 +13383,19 @@ var ThoughtTimelineCard = memo(function ThoughtTimelineCard2({ thought, config,
   if (!cleaned || !cleaned.trim()) return null;
   return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: "px-3 py-2", children: [
     /* @__PURE__ */ jsx("div", { className: "", children: /* @__PURE__ */ jsxs("div", { className: "text-sm leading-relaxed prose prose-invert prose-sm max-w-none [&_*]:break-words", children: [
-      /* @__PURE__ */ jsx(MarkdownContent, { content: cleaned, skipImages: false, config, variant: "thought" }),
+      /* @__PURE__ */ jsx(MarkdownContent, { content: cleaned, skipImages, config, variant: "thought" }),
       isLoading && /* @__PURE__ */ jsx("span", { className: "inline-block w-2 h-4 ml-0.5 bg-[#d8ff00] animate-pulse rounded-sm" })
     ] }) }),
     thought?.raw?.length > 0 && showItemTime && /* @__PURE__ */ jsx("div", { className: "text-xs text-zinc-500 mt-2", children: new Date(
       thought.raw[thought.raw.length - 1]?.gmt_create || thought.raw[thought.raw.length - 1]?.gmtCreate || thought.raw[thought.raw.length - 1]?.timestamp || ""
-    ).toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit", second: "2-digit" }) })
+    ).toLocaleTimeString("zh-CN", {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit"
+    }) })
   ] }) });
 });
 var COMPONENT_TAGS_TO_STRIP = [
@@ -13753,7 +14395,8 @@ ${m.content}`;
 }
 var ThoughtBlockItem = memo(function ThoughtBlockItem2({
   content,
-  config
+  config,
+  skipImages = false
 }) {
   const [expanded, setExpanded] = useState(false);
   const lineCount = useMemo(() => content.split("\n").length, [content]);
@@ -13766,7 +14409,7 @@ var ThoughtBlockItem = memo(function ThoughtBlockItem2({
           "text-sm text-zinc-400 leading-relaxed prose prose-invert prose-sm max-w-none [&_*]:break-words",
           shouldToggle && !expanded ? "max-h-[3.5em] overflow-hidden" : ""
         ),
-        children: /* @__PURE__ */ jsx(MarkdownContent, { content, skipImages: false, config, variant: "thought" })
+        children: /* @__PURE__ */ jsx(MarkdownContent, { content, skipImages, config, variant: "thought" })
       }
     ),
     shouldToggle && /* @__PURE__ */ jsx(
@@ -13952,7 +14595,6 @@ var MessageBubble = memo(function MessageBubble2({
   const shouldShowAvatar = isUser ? showUserAvatar : showAssistantAvatar;
   const shouldShowName = isUser ? showUserName : showAssistantName;
   const shouldShowDescription = isUser ? showUserDescription : showAssistantDescription;
-  console.log("[MessageBubble] \u6E32\u67D3\u6D88\u606F\u6C14\u6CE1, config?.identity:", config?.identity);
   const resolveFileName = (url) => {
     try {
       const pathname = new URL(url, "http://dummy").pathname;
@@ -14013,7 +14655,8 @@ var MessageBubble = memo(function MessageBubble2({
               {
                 thought: item.data,
                 config,
-                isLoading: showLoadingCursor
+                isLoading: showLoadingCursor,
+                skipImages: hasToolCallImages
               },
               item.id
             );
@@ -14113,7 +14756,8 @@ var MessageBubble = memo(function MessageBubble2({
                     ThoughtBlockItem,
                     {
                       content: block.content,
-                      config
+                      config,
+                      skipImages: hasToolCallImages
                     },
                     `${block.ts}-${index}`
                   )),
@@ -14158,15 +14802,23 @@ var MessageBubble = memo(function MessageBubble2({
         const isVideo = att.type === "video" || att.type?.startsWith("video/") || isVideoUrl2(att.url);
         const isImage2 = att.type === "image" || att.type?.startsWith("image/") || !isVideo && /\.(jpg|jpeg|png|gif|webp|bmp|svg)(\?|#|$)/i.test(att.url);
         const fileName = att.name || resolveFileName(att.url);
+        if (att.url.includes("industryai")) {
+          att.url = att.url.split("?")[0];
+        }
+        const assets = config?.asset?.transform?.({
+          type: att.type,
+          url: att.url,
+          name: fileName
+        }) || { url: att.url, type: att.type };
         if (isImage2 || isVideo) {
           return /* @__PURE__ */ jsxs(
             "button",
             {
               type: "button",
-              onClick: () => setPreviewMedia({ url: att.url, isVideo }),
+              onClick: () => setPreviewMedia({ url: assets.url, isVideo }),
               className: "group/att relative w-[88px] h-[88px] rounded-lg overflow-hidden border border-zinc-700/40 bg-zinc-900/60 hover:border-zinc-500/60 transition-colors",
               children: [
-                isVideo ? /* @__PURE__ */ jsx(MessageVideoComp, { src: att.url, className: "w-full h-full object-cover" }) : /* @__PURE__ */ jsx(MessageImageComp, { src: att.url, alt: fileName, className: "w-full h-full object-cover" }),
+                isVideo ? /* @__PURE__ */ jsx(MessageVideoComp, { src: assets.url, className: "w-full h-full object-cover" }) : /* @__PURE__ */ jsx(MessageImageComp, { src: att.url, alt: fileName, className: "w-full h-full object-cover" }),
                 /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/20 opacity-0 group-hover/att:opacity-100 transition-opacity" })
               ]
             },
@@ -14271,7 +14923,14 @@ var MessageBubble = memo(function MessageBubble2({
           ]
         }
       ) }),
-      message.gmtCreate && !isStreaming && /* @__PURE__ */ jsx("div", { className: "text-zinc-600 text-[10px] mt-1", children: new Date(message.gmtCreate).toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit", second: "2-digit" }) })
+      message.gmtCreate && !isStreaming && /* @__PURE__ */ jsx("div", { className: "text-zinc-600 text-[10px] mt-1 opacity-0 group-hover:opacity-100 transition-opacity", children: new Date(message.gmtCreate).toLocaleTimeString("zh-CN", {
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit",
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit"
+      }) })
     ] })
   ] });
 });
@@ -15146,9 +15805,24 @@ var DialogDescription = React20.forwardRef(({ className, ...props }, ref) => /*
 ));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
+// ../../node_modules/clsx/dist/clsx.mjs
+function r2(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;
+  else if ("object" == typeof e) if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r2(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx2() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r2(e)) && (n && (n += " "), n += t);
+  return n;
+}
+
 // ../../node_modules/class-variance-authority/dist/index.mjs
 var falsyToString = (value) => typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
-var cx = clsx;
+var cx = clsx2;
 var cva = (base, config) => (props) => {
   var _config_compoundVariants;
   if ((config === null || config === void 0 ? void 0 : config.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
@@ -15966,10 +16640,10 @@ var Observer = class {
         });
       }
     };
-    this.custom = (jsx50, data) => {
+    this.custom = (jsx59, data) => {
       const id = (data == null ? void 0 : data.id) || toastsCounter++;
       this.create({
-        jsx: jsx50(id),
+        jsx: jsx59(id),
         id,
         ...data
       });
@@ -18470,7 +19144,57 @@ var ToolbarButton = memo(function ToolbarButton2({
     }
   );
 });
-var CodeBlock3 = memo(function CodeBlock4({
+var artifactTypeConfig = {
+  html: {
+    icon: Globe,
+    label: "HTML",
+    color: "text-orange-400",
+    bgColor: "bg-orange-500/10"
+  },
+  svg: {
+    icon: Globe,
+    label: "SVG",
+    color: "text-orange-300",
+    bgColor: "bg-orange-500/10"
+  },
+  markdown: {
+    icon: FileText,
+    label: "Markdown",
+    color: "text-blue-400",
+    bgColor: "bg-blue-500/10"
+  },
+  json: {
+    icon: FileJson,
+    label: "JSON",
+    color: "text-yellow-400",
+    bgColor: "bg-yellow-500/10"
+  },
+  code: {
+    icon: FileCode,
+    label: "Code",
+    color: "text-purple-400",
+    bgColor: "bg-purple-500/10"
+  },
+  text: {
+    icon: FileText,
+    label: "Text",
+    color: "text-zinc-400",
+    bgColor: "bg-zinc-500/10"
+  },
+  image: {
+    icon: FileImage,
+    label: "Image",
+    color: "text-green-400",
+    bgColor: "bg-green-500/10"
+  },
+  video: {
+    icon: Video,
+    label: "Video",
+    color: "text-pink-400",
+    bgColor: "bg-pink-500/10"
+  }
+};
+var CodeBlock3 = memo(function CodeBlock4({
   code: code3,
   language,
   showLineNumbers = true
@@ -18758,38 +19482,1305 @@ memo(function JsonPreview2({ content }) {
   }
   return /* @__PURE__ */ jsx(CodeBlock3, { code: formattedJson, language: "json" });
 });
-var artifactTypeConfig = {
-  html: {
-    icon: Globe,
-    label: "HTML",
-    color: "text-orange-400",
-    bgColor: "bg-orange-500/10"
-  },
-  markdown: {
-    icon: FileText,
-    label: "Markdown",
-    color: "text-blue-400",
-    bgColor: "bg-blue-500/10"
-  },
-  json: {
-    icon: FileJson,
-    label: "JSON",
-    color: "text-yellow-400",
-    bgColor: "bg-yellow-500/10"
-  },
-  code: {
-    icon: FileCode,
-    label: "Code",
-    color: "text-purple-400",
-    bgColor: "bg-purple-500/10"
-  },
-  text: {
-    icon: FileText,
-    label: "Text",
-    color: "text-zinc-400",
-    bgColor: "bg-zinc-500/10"
-  }
-};
+var CodeEditor = memo(function CodeEditor2({
+  code: code3,
+  language,
+  onChange
+}) {
+  const textareaRef = useRef(null);
+  const handleKeyDown = useCallback((e) => {
+    if (e.key === "Tab") {
+      e.preventDefault();
+      const textarea = e.currentTarget;
+      const start = textarea.selectionStart;
+      const end = textarea.selectionEnd;
+      const newValue = code3.substring(0, start) + "  " + code3.substring(end);
+      onChange(newValue);
+      requestAnimationFrame(() => {
+        textarea.selectionStart = textarea.selectionEnd = start + 2;
+      });
+    }
+  }, [code3, onChange]);
+  return /* @__PURE__ */ jsxs("div", { className: "h-full flex flex-col bg-zinc-950 agent-sdk-light:bg-white", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between px-4 py-2 border-b border-zinc-800/50 agent-sdk-light:border-zinc-200 bg-zinc-900/30 agent-sdk-light:bg-zinc-50 flex-shrink-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Pencil, { size: 12, className: "text-[#d8ff00]" }),
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-[#d8ff00] font-medium", children: "\u7F16\u8F91\u6A21\u5F0F" }),
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-zinc-500 agent-sdk-light:text-zinc-600 font-mono uppercase ml-2", children: language || "text" })
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref: textareaRef,
+        value: code3,
+        onChange: (e) => onChange(e.target.value),
+        onKeyDown: handleKeyDown,
+        className: "w-full h-full p-4 bg-zinc-950 agent-sdk-light:bg-white text-xs font-mono text-zinc-300 agent-sdk-light:text-zinc-800 leading-relaxed resize-none focus:outline-none",
+        spellCheck: false,
+        autoComplete: "off",
+        autoCorrect: "off",
+        autoCapitalize: "off"
+      }
+    ) })
+  ] });
+});
+function useResolvedMediaUrl(content, options) {
+  const { fileId, type = "image", config } = options || {};
+  const [resolvedUrl, setResolvedUrl] = useState(content);
+  const [resolvedHdUrl, setResolvedHdUrl] = useState(content);
+  const [isLoading, setIsLoading] = useState(true);
+  useEffect(() => {
+    let active = true;
+    setIsLoading(true);
+    const resolve = async () => {
+      const httpUrl = isHttpUrl(content) ? content : void 0;
+      const asset = createAssetFromSource({
+        fileId: fileId || (!httpUrl ? content : void 0),
+        fileUrl: httpUrl,
+        type
+      });
+      if (!asset) {
+        if (active) {
+          setResolvedUrl(content);
+          setResolvedHdUrl(content);
+          setIsLoading(false);
+        }
+        return;
+      }
+      const resolved = await resolveAssetForDisplay(asset, config);
+      if (!active) return;
+      if (resolved) {
+        setResolvedUrl(resolved.url);
+        setResolvedHdUrl(resolved.hdUrl || resolved.url);
+      } else {
+        setResolvedUrl(content);
+        setResolvedHdUrl(content);
+      }
+      setIsLoading(false);
+    };
+    resolve();
+    return () => {
+      active = false;
+    };
+  }, [content, fileId, type, config]);
+  return { url: resolvedUrl, hdUrl: resolvedHdUrl, isLoading };
+}
+function useResolvedThumbnailUrl(content, options) {
+  const { fileId, type = "image", config, enabled = true } = options || {};
+  const [url, setUrl] = useState(null);
+  useEffect(() => {
+    if (!enabled || !content) {
+      setUrl(null);
+      return;
+    }
+    if (type === "video") {
+      setUrl(null);
+      return;
+    }
+    let active = true;
+    const resolve = async () => {
+      const httpUrl = isHttpUrl(content) ? content : void 0;
+      const asset = createAssetFromSource({
+        fileId: fileId || (!httpUrl ? content : void 0),
+        fileUrl: httpUrl,
+        type
+      });
+      if (!asset) {
+        if (active) setUrl(isHttpUrl(content) ? content : null);
+        return;
+      }
+      const resolved = await resolveAssetForDisplay(asset, config);
+      if (!active) return;
+      setUrl(resolved?.url || (isHttpUrl(content) ? content : null));
+    };
+    resolve();
+    return () => {
+      active = false;
+    };
+  }, [content, fileId, type, config, enabled]);
+  return url;
+}
+var ImageArtifactPreview = memo(function ImageArtifactPreview2({
+  content,
+  metadata,
+  config
+}) {
+  const [isZoomed, setIsZoomed] = useState(false);
+  const [showInfo, setShowInfo] = useState(true);
+  const [imgNaturalSize, setImgNaturalSize] = useState(null);
+  const [copied, setCopied] = useState(null);
+  const { hdUrl: resolvedHdUrl } = useResolvedMediaUrl(content, {
+    fileId: metadata?.fileId,
+    type: "image",
+    config
+  });
+  const generationParams = metadata?.generationParams;
+  const toolName = metadata?.toolName;
+  const relation = metadata?.relation;
+  const handleCopy = useCallback(async (text3, label) => {
+    try {
+      await navigator.clipboard.writeText(text3);
+      setCopied(label);
+      setTimeout(() => setCopied(null), 2e3);
+    } catch {
+    }
+  }, []);
+  const handleDownload = useCallback(() => {
+    const link2 = document.createElement("a");
+    link2.href = resolvedHdUrl;
+    link2.download = `generated-${Date.now()}.png`;
+    link2.target = "_blank";
+    document.body.appendChild(link2);
+    link2.click();
+    document.body.removeChild(link2);
+  }, [resolvedHdUrl]);
+  const formatParamKey = (key) => {
+    const keyMap = {
+      content: "Prompt",
+      width: "\u5BBD\u5EA6",
+      height: "\u9AD8\u5EA6",
+      batchSize: "\u751F\u6210\u6570\u91CF",
+      steps: "\u6B65\u6570",
+      cfg_scale: "CFG Scale",
+      seed: "\u79CD\u5B50",
+      sampler: "\u91C7\u6837\u5668",
+      model: "\u6A21\u578B",
+      negative_prompt: "\u53CD\u5411\u63D0\u793A\u8BCD",
+      style: "\u98CE\u683C",
+      quality: "\u8D28\u91CF"
+    };
+    return keyMap[key] || key.replace(/([A-Z])/g, " $1").replace(/_/g, " ").replace(/^./, (s) => s.toUpperCase());
+  };
+  const promptText = generationParams?.content ? String(generationParams.content) : null;
+  const otherParams = generationParams ? Object.entries(generationParams).filter(([key]) => key !== "content") : [];
+  return /* @__PURE__ */ jsxs("div", { className: "h-full flex flex-col bg-zinc-950 agent-sdk-light:bg-white", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-auto flex items-center justify-center p-6 bg-zinc-950 agent-sdk-light:bg-zinc-50 relative", children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 opacity-[0.03]", style: {
+        backgroundImage: "linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%)",
+        backgroundSize: "20px 20px",
+        backgroundPosition: "0 0, 0 10px, 10px -10px, -10px 0px"
+      } }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn2(
+            "relative transition-transform duration-300 cursor-zoom-in z-10",
+            isZoomed && "cursor-zoom-out scale-[2] z-50"
+          ),
+          onClick: () => setIsZoomed((prev) => !prev),
+          children: /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: resolvedHdUrl,
+              alt: "Generated image",
+              className: "max-w-full max-h-[60vh] object-contain rounded-lg shadow-2xl",
+              loading: "lazy",
+              onLoad: (e) => {
+                const img = e.target;
+                setImgNaturalSize({ width: img.naturalWidth, height: img.naturalHeight });
+              }
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "absolute top-4 right-4 flex items-center gap-1.5 z-20", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setShowInfo((prev) => !prev),
+            className: cn2(
+              "p-2 rounded-lg backdrop-blur-sm transition-colors",
+              showInfo ? "bg-[#d8ff00]/20 text-[#d8ff00]" : "bg-black/30 text-white/70 hover:text-white hover:bg-black/50"
+            ),
+            title: showInfo ? "\u9690\u85CF\u8BE6\u60C5" : "\u663E\u793A\u8BE6\u60C5",
+            children: /* @__PURE__ */ jsx(FileText, { size: 16 })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleDownload,
+            className: "p-2 bg-black/30 text-white/70 hover:text-white hover:bg-black/50 rounded-lg backdrop-blur-sm transition-colors",
+            title: "\u4E0B\u8F7D\u56FE\u7247",
+            children: /* @__PURE__ */ jsx(Download, { size: 16 })
+          }
+        )
+      ] }),
+      imgNaturalSize && /* @__PURE__ */ jsxs("div", { className: "absolute bottom-4 left-4 z-20 flex items-center gap-2 px-2.5 py-1.5 bg-black/40 backdrop-blur-sm rounded-lg", children: [
+        /* @__PURE__ */ jsx(FileImage, { size: 12, className: "text-white/60" }),
+        /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-white/80 font-mono", children: [
+          imgNaturalSize.width,
+          " \xD7 ",
+          imgNaturalSize.height
+        ] })
+      ] })
+    ] }),
+    showInfo && (generationParams || toolName) && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 border-t border-zinc-800/50 agent-sdk-light:border-zinc-200 bg-zinc-900/80 agent-sdk-light:bg-zinc-50 max-h-[40%] overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "px-5 py-4 space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
+          /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-lg bg-[#d8ff00]/10 flex items-center justify-center", children: /* @__PURE__ */ jsx(Sparkles, { size: 14, className: "text-[#d8ff00]" }) }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-zinc-200 agent-sdk-light:text-zinc-800", children: toolName || "\u56FE\u7247\u751F\u6210" }),
+            relation?.workflowCode && /* @__PURE__ */ jsx("span", { className: "ml-2 text-[10px] text-zinc-500 font-mono bg-zinc-800/50 agent-sdk-light:bg-zinc-200 px-1.5 py-0.5 rounded", children: relation.workflowCode })
+          ] })
+        ] }),
+        metadata?.taskId && /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-zinc-600 font-mono", children: [
+          "Task: ",
+          metadata.taskId
+        ] })
+      ] }),
+      promptText && /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] text-zinc-500 uppercase tracking-wider font-medium", children: "Prompt" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => handleCopy(promptText, "prompt"),
+              className: "text-[10px] text-zinc-500 hover:text-zinc-300 transition-colors flex items-center gap-1",
+              children: copied === "prompt" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(CheckCheck, { size: 10, className: "text-green-400" }),
+                " \u5DF2\u590D\u5236"
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(Copy, { size: 10 }),
+                " \u590D\u5236"
+              ] })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "p-3 bg-zinc-800/50 agent-sdk-light:bg-zinc-100 rounded-lg border border-zinc-700/30 agent-sdk-light:border-zinc-200", children: /* @__PURE__ */ jsx("p", { className: "text-xs text-zinc-300 agent-sdk-light:text-zinc-700 leading-relaxed whitespace-pre-wrap", children: promptText }) })
+      ] }),
+      otherParams.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-[10px] text-zinc-500 uppercase tracking-wider font-medium", children: "\u53C2\u6570" }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 gap-2", children: otherParams.map(([key, value]) => {
+          const displayValue = String(value);
+          if (displayValue.length > 100) return null;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex flex-col gap-0.5 p-2 bg-zinc-800/30 agent-sdk-light:bg-zinc-100 rounded-lg border border-zinc-700/20 agent-sdk-light:border-zinc-200",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "text-[10px] text-zinc-500 agent-sdk-light:text-zinc-500", children: formatParamKey(key) }),
+                /* @__PURE__ */ jsx("span", { className: "text-xs text-zinc-200 agent-sdk-light:text-zinc-800 font-mono font-medium truncate", title: displayValue, children: displayValue })
+              ]
+            },
+            key
+          );
+        }) })
+      ] }),
+      (metadata?.fileId || metadata?.workId) && /* @__PURE__ */ jsx("div", { className: "pt-2 border-t border-zinc-800/30 agent-sdk-light:border-zinc-200", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 text-[10px] text-zinc-600", children: [
+        metadata.workId && /* @__PURE__ */ jsxs("span", { children: [
+          "ID: ",
+          /* @__PURE__ */ jsx("span", { className: "font-mono text-zinc-500", children: metadata.workId })
+        ] }),
+        metadata.fileId && /* @__PURE__ */ jsxs("span", { className: "truncate max-w-[200px]", title: metadata.fileId, children: [
+          "File: ",
+          /* @__PURE__ */ jsx("span", { className: "font-mono text-zinc-500", children: metadata.fileId })
+        ] })
+      ] }) })
+    ] }) })
+  ] });
+});
+var VideoArtifactPreview = memo(function VideoArtifactPreview2({
+  content,
+  metadata,
+  config
+}) {
+  const { hdUrl: resolvedUrl } = useResolvedMediaUrl(content, {
+    fileId: metadata?.fileId,
+    type: "video",
+    config
+  });
+  const videoRef = useRef(null);
+  const progressRef = useRef(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [isMuted, setIsMuted] = useState(false);
+  const [duration, setDuration] = useState(0);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [volume, setVolume] = useState(1);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [showVolumeSlider, setShowVolumeSlider] = useState(false);
+  const [posterUrl, setPosterUrl] = useState(null);
+  const [isDraggingProgress, setIsDraggingProgress] = useState(false);
+  const generationParams = metadata?.generationParams;
+  const toolName = metadata?.toolName;
+  useEffect(() => {
+    const video = document.createElement("video");
+    video.crossOrigin = "anonymous";
+    video.preload = "metadata";
+    video.muted = true;
+    video.addEventListener("loadeddata", () => {
+      video.currentTime = Math.min(0.5, video.duration * 0.1);
+    });
+    video.addEventListener("seeked", () => {
+      try {
+        const canvas = document.createElement("canvas");
+        canvas.width = video.videoWidth;
+        canvas.height = video.videoHeight;
+        const ctx = canvas.getContext("2d");
+        if (ctx) {
+          ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+          setPosterUrl(canvas.toDataURL("image/jpeg", 0.8));
+        }
+      } catch {
+      }
+      video.remove();
+    });
+    video.addEventListener("error", () => video.remove());
+    video.src = resolvedUrl;
+    video.load();
+    return () => {
+      video.remove();
+    };
+  }, [resolvedUrl]);
+  const handleLoadedMetadata = () => {
+    const video = videoRef.current;
+    if (video) {
+      setDuration(video.duration);
+      setIsLoaded(true);
+    }
+  };
+  const handleTimeUpdate = () => {
+    if (!isDraggingProgress && videoRef.current) {
+      setCurrentTime(videoRef.current.currentTime);
+    }
+  };
+  const togglePlay = useCallback(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    if (isPlaying) {
+      video.pause();
+      setIsPlaying(false);
+    } else {
+      video.play().then(() => setIsPlaying(true)).catch(() => {
+      });
+    }
+  }, [isPlaying]);
+  const toggleMute = useCallback(() => {
+    const video = videoRef.current;
+    if (video) {
+      video.muted = !isMuted;
+      setIsMuted(!isMuted);
+    }
+  }, [isMuted]);
+  const handleVolumeChange = useCallback((e) => {
+    const newVolume = parseFloat(e.target.value);
+    setVolume(newVolume);
+    if (videoRef.current) {
+      videoRef.current.volume = newVolume;
+      if (newVolume === 0) {
+        setIsMuted(true);
+        videoRef.current.muted = true;
+      } else if (isMuted) {
+        setIsMuted(false);
+        videoRef.current.muted = false;
+      }
+    }
+  }, [isMuted]);
+  const handleProgressClick = useCallback((e) => {
+    const video = videoRef.current;
+    const bar = progressRef.current;
+    if (!video || !bar || !duration) return;
+    const rect = bar.getBoundingClientRect();
+    const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+    video.currentTime = ratio * duration;
+    setCurrentTime(ratio * duration);
+  }, [duration]);
+  const handleProgressDrag = useCallback((e) => {
+    if (!isDraggingProgress) return;
+    const bar = progressRef.current;
+    if (!bar || !duration) return;
+    const rect = bar.getBoundingClientRect();
+    const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+    setCurrentTime(ratio * duration);
+  }, [isDraggingProgress, duration]);
+  const handleProgressDragEnd = useCallback(() => {
+    if (isDraggingProgress && videoRef.current) {
+      videoRef.current.currentTime = currentTime;
+    }
+    setIsDraggingProgress(false);
+  }, [isDraggingProgress, currentTime]);
+  useEffect(() => {
+    if (!isDraggingProgress) return;
+    const handleMouseUp = () => handleProgressDragEnd();
+    const handleMouseMove = (e) => {
+      const bar = progressRef.current;
+      if (!bar || !duration) return;
+      const rect = bar.getBoundingClientRect();
+      const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+      setCurrentTime(ratio * duration);
+    };
+    window.addEventListener("mouseup", handleMouseUp);
+    window.addEventListener("mousemove", handleMouseMove);
+    return () => {
+      window.removeEventListener("mouseup", handleMouseUp);
+      window.removeEventListener("mousemove", handleMouseMove);
+    };
+  }, [isDraggingProgress, duration, handleProgressDragEnd]);
+  const handleDownload = useCallback(() => {
+    const link2 = document.createElement("a");
+    link2.href = resolvedUrl;
+    link2.download = `video-${Date.now()}.mp4`;
+    document.body.appendChild(link2);
+    link2.click();
+    document.body.removeChild(link2);
+  }, [resolvedUrl]);
+  const formatTime2 = (seconds) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${mins}:${secs.toString().padStart(2, "0")}`;
+  };
+  const progressPercent = duration > 0 ? currentTime / duration * 100 : 0;
+  return /* @__PURE__ */ jsxs("div", { className: "h-full flex flex-col bg-zinc-950 agent-sdk-light:bg-white", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-hidden flex items-center justify-center bg-black relative group/player", children: [
+      posterUrl && !isPlaying && !currentTime && /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: posterUrl,
+          alt: "Video cover",
+          className: "absolute inset-0 w-full h-full object-contain z-[1]"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "video",
+        {
+          ref: videoRef,
+          src: resolvedUrl,
+          muted: isMuted,
+          playsInline: true,
+          preload: "metadata",
+          onLoadedMetadata: handleLoadedMetadata,
+          onTimeUpdate: handleTimeUpdate,
+          onEnded: () => setIsPlaying(false),
+          onClick: togglePlay,
+          className: cn2(
+            "max-w-full max-h-full object-contain cursor-pointer",
+            !isPlaying && posterUrl && !currentTime && "opacity-0"
+          )
+        }
+      ),
+      !isPlaying && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute inset-0 z-[2] flex items-center justify-center cursor-pointer",
+          onClick: togglePlay,
+          children: /* @__PURE__ */ jsx("div", { className: cn2(
+            "w-16 h-16 rounded-full bg-white/15 backdrop-blur-md",
+            "flex items-center justify-center",
+            "transition-all duration-200",
+            "group-hover/player:scale-110 group-hover/player:bg-white/25",
+            "shadow-2xl shadow-black/30"
+          ), children: /* @__PURE__ */ jsx("svg", { width: "26", height: "26", viewBox: "0 0 24 24", fill: "white", className: "ml-1", children: /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7z" }) }) })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: cn2(
+        "absolute bottom-0 left-0 right-0 z-[3]",
+        "bg-gradient-to-t from-black/90 via-black/50 to-transparent",
+        "px-4 pb-3 pt-10",
+        "transition-opacity duration-300",
+        "opacity-0 group-hover/player:opacity-100",
+        isPlaying ? "" : "opacity-100"
+      ), children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: progressRef,
+            className: "w-full h-1.5 bg-white/20 rounded-full mb-3 cursor-pointer group/progress hover:h-2 transition-all",
+            onClick: handleProgressClick,
+            onMouseDown: () => setIsDraggingProgress(true),
+            onMouseMove: handleProgressDrag,
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "h-full bg-[#d8ff00] rounded-full relative",
+                style: { width: `${progressPercent}%` },
+                children: /* @__PURE__ */ jsx("div", { className: "absolute right-0 top-1/2 -translate-y-1/2 w-3.5 h-3.5 bg-[#d8ff00] rounded-full opacity-0 group-hover/progress:opacity-100 transition-opacity shadow-lg -mr-1.5" })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx("button", { onClick: togglePlay, className: "p-1 text-white/90 hover:text-white transition-colors", children: isPlaying ? /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: [
+              /* @__PURE__ */ jsx("rect", { x: "6", y: "4", width: "4", height: "16", rx: "1" }),
+              /* @__PURE__ */ jsx("rect", { x: "14", y: "4", width: "4", height: "16", rx: "1" })
+            ] }) : /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7z" }) }) }),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "flex items-center gap-1.5 relative",
+                onMouseEnter: () => setShowVolumeSlider(true),
+                onMouseLeave: () => setShowVolumeSlider(false),
+                children: [
+                  /* @__PURE__ */ jsx("button", { onClick: toggleMute, className: "p-1 text-white/80 hover:text-white transition-colors", children: isMuted || volume === 0 ? /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                    /* @__PURE__ */ jsx("polygon", { points: "11 5 6 9 2 9 2 15 6 15 11 19 11 5" }),
+                    /* @__PURE__ */ jsx("line", { x1: "23", y1: "9", x2: "17", y2: "15" }),
+                    /* @__PURE__ */ jsx("line", { x1: "17", y1: "9", x2: "23", y2: "15" })
+                  ] }) : /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                    /* @__PURE__ */ jsx("polygon", { points: "11 5 6 9 2 9 2 15 6 15 11 19 11 5" }),
+                    /* @__PURE__ */ jsx("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14" }),
+                    /* @__PURE__ */ jsx("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07" })
+                  ] }) }),
+                  showVolumeSlider && /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "range",
+                      min: "0",
+                      max: "1",
+                      step: "0.05",
+                      value: isMuted ? 0 : volume,
+                      onChange: handleVolumeChange,
+                      className: "w-20 h-1 appearance-none bg-white/20 rounded-full cursor-pointer accent-[#d8ff00]"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: "text-xs text-white/60 font-mono tabular-nums", children: [
+              formatTime2(currentTime),
+              " / ",
+              formatTime2(duration)
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: handleDownload,
+              className: "p-1.5 text-white/60 hover:text-white transition-colors",
+              title: "\u4E0B\u8F7D\u89C6\u9891",
+              children: /* @__PURE__ */ jsx(Download, { size: 16 })
+            }
+          ) })
+        ] })
+      ] })
+    ] }),
+    generationParams && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 border-t border-zinc-800/50 agent-sdk-light:border-zinc-200 bg-zinc-900/50 agent-sdk-light:bg-zinc-50", children: /* @__PURE__ */ jsxs("div", { className: "px-4 py-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
+        /* @__PURE__ */ jsx(Sparkles, { size: 12, className: "text-[#d8ff00]" }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-zinc-300 agent-sdk-light:text-zinc-700", children: toolName || "\u751F\u6210\u53C2\u6570" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-x-4 gap-y-1.5", children: Object.entries(generationParams).map(([key, value]) => {
+        const displayValue = String(value);
+        if (displayValue.length > 80) return null;
+        return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-zinc-500 agent-sdk-light:text-zinc-500 capitalize", children: key.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase()) }),
+          /* @__PURE__ */ jsx("span", { className: "text-zinc-300 agent-sdk-light:text-zinc-700 font-mono", children: displayValue })
+        ] }, key);
+      }) }),
+      generationParams.content && String(generationParams.content).length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-2 pt-2 border-t border-zinc-800/30 agent-sdk-light:border-zinc-200", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-[10px] text-zinc-500 agent-sdk-light:text-zinc-500 uppercase tracking-wider", children: "Prompt" }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-zinc-300 agent-sdk-light:text-zinc-700 mt-1 leading-relaxed line-clamp-3", children: String(generationParams.content) })
+      ] })
+    ] }) })
+  ] });
+});
+function htmlToMarkdown(element) {
+  const lines = [];
+  function processNode(node2, listDepth = 0) {
+    if (node2.nodeType === Node.TEXT_NODE) {
+      return node2.textContent || "";
+    }
+    if (node2.nodeType !== Node.ELEMENT_NODE) return "";
+    const el = node2;
+    const tag = el.tagName.toLowerCase();
+    const childContent = () => {
+      let result = "";
+      el.childNodes.forEach((child) => {
+        result += processNode(child, listDepth);
+      });
+      return result;
+    };
+    switch (tag) {
+      case "h1":
+        return `# ${childContent().trim()}
+
+`;
+      case "h2":
+        return `## ${childContent().trim()}
+
+`;
+      case "h3":
+        return `### ${childContent().trim()}
+
+`;
+      case "h4":
+        return `#### ${childContent().trim()}
+
+`;
+      case "h5":
+        return `##### ${childContent().trim()}
+
+`;
+      case "h6":
+        return `###### ${childContent().trim()}
+
+`;
+      case "p": {
+        const inner = childContent().trim();
+        return inner ? `${inner}
+
+` : "\n";
+      }
+      case "br":
+        return "\n";
+      case "strong":
+      case "b":
+        return `**${childContent()}**`;
+      case "em":
+      case "i":
+        return `*${childContent()}*`;
+      case "del":
+      case "s":
+        return `~~${childContent()}~~`;
+      case "code": {
+        if (el.parentElement?.tagName.toLowerCase() === "pre") {
+          return childContent();
+        }
+        return `\`${childContent()}\``;
+      }
+      case "pre": {
+        const codeEl = el.querySelector("code");
+        const codeContent = codeEl ? codeEl.textContent || "" : el.textContent || "";
+        const langClass = codeEl?.className?.match(/language-(\w+)/);
+        const lang = langClass ? langClass[1] : "";
+        return `\`\`\`${lang}
+${codeContent.trim()}
+\`\`\`
+
+`;
+      }
+      case "blockquote": {
+        const inner = childContent().trim();
+        return inner.split("\n").map((line) => `> ${line}`).join("\n") + "\n\n";
+      }
+      case "ul": {
+        let result = "";
+        el.childNodes.forEach((child) => {
+          if (child.tagName?.toLowerCase() === "li") {
+            const indent2 = "  ".repeat(listDepth);
+            const liContent = processListItem(child, listDepth);
+            result += `${indent2}- ${liContent}
+`;
+          }
+        });
+        return listDepth === 0 ? result + "\n" : result;
+      }
+      case "ol": {
+        let result = "";
+        let index = 1;
+        el.childNodes.forEach((child) => {
+          if (child.tagName?.toLowerCase() === "li") {
+            const indent2 = "  ".repeat(listDepth);
+            const liContent = processListItem(child, listDepth);
+            result += `${indent2}${index}. ${liContent}
+`;
+            index++;
+          }
+        });
+        return listDepth === 0 ? result + "\n" : result;
+      }
+      case "li": {
+        return childContent();
+      }
+      case "a": {
+        const href = el.getAttribute("href") || "";
+        const text3 = childContent();
+        return `[${text3}](${href})`;
+      }
+      case "img": {
+        const src = el.getAttribute("src") || "";
+        const alt = el.getAttribute("alt") || "";
+        return `![${alt}](${src})`;
+      }
+      case "hr":
+        return "---\n\n";
+      case "table": {
+        return processTable(el) + "\n";
+      }
+      case "input": {
+        if (el.getAttribute("type") === "checkbox") {
+          return el.hasAttribute("checked") ? "[x] " : "[ ] ";
+        }
+        return "";
+      }
+      case "div":
+      case "span":
+      case "section":
+      case "article":
+      case "main":
+      case "header":
+      case "footer":
+        return childContent();
+      default:
+        return childContent();
+    }
+  }
+  function processListItem(li, depth, _ordered) {
+    let textParts = [];
+    let subLists = "";
+    li.childNodes.forEach((child) => {
+      const childTag = child.tagName?.toLowerCase();
+      if (childTag === "ul" || childTag === "ol") {
+        subLists += processNode(child, depth + 1);
+      } else {
+        textParts.push(processNode(child, depth));
+      }
+    });
+    let result = textParts.join("").trim();
+    if (subLists) {
+      result += "\n" + subLists;
+    }
+    return result;
+  }
+  function processTable(table) {
+    const rows = [];
+    table.querySelectorAll("tr").forEach((tr) => {
+      const cells = [];
+      tr.querySelectorAll("th, td").forEach((cell) => {
+        cells.push((cell.textContent || "").trim());
+      });
+      rows.push(cells);
+    });
+    if (rows.length === 0) return "";
+    const colCount = Math.max(...rows.map((r3) => r3.length));
+    const colWidths = Array(colCount).fill(3);
+    rows.forEach((row) => {
+      row.forEach((cell, i) => {
+        colWidths[i] = Math.max(colWidths[i], cell.length);
+      });
+    });
+    let result = "";
+    rows.forEach((row, rowIndex) => {
+      const paddedCells = Array(colCount).fill("").map((_, i) => {
+        const cell = row[i] || "";
+        return cell.padEnd(colWidths[i]);
+      });
+      result += `| ${paddedCells.join(" | ")} |
+`;
+      if (rowIndex === 0) {
+        const separators = colWidths.map((w) => "-".repeat(w));
+        result += `| ${separators.join(" | ")} |
+`;
+      }
+    });
+    return result;
+  }
+  element.childNodes.forEach((child) => {
+    lines.push(processNode(child));
+  });
+  return lines.join("").replace(/\n{3,}/g, "\n\n").trim() + "\n";
+}
+var MarkdownEditor = memo(function MarkdownEditor2({
+  content,
+  onChange,
+  config
+}) {
+  const editorRef = useRef(null);
+  const textareaRef = useRef(null);
+  const [isSourceMode, setIsSourceMode] = useState(false);
+  const isInternalUpdate = useRef(false);
+  const lastMarkdownRef = useRef(content);
+  const contentToHtml = useCallback((markdown) => {
+    return marked.parse(markdown, { breaks: true, gfm: true });
+  }, []);
+  useEffect(() => {
+    if (isSourceMode) return;
+    if (isInternalUpdate.current) {
+      isInternalUpdate.current = false;
+      return;
+    }
+    if (editorRef.current && content !== lastMarkdownRef.current) {
+      const html2 = contentToHtml(content);
+      editorRef.current.innerHTML = html2;
+      lastMarkdownRef.current = content;
+    }
+  }, [content, isSourceMode, contentToHtml]);
+  useEffect(() => {
+    if (editorRef.current && !isSourceMode) {
+      const html2 = contentToHtml(content);
+      editorRef.current.innerHTML = html2;
+    }
+  }, []);
+  const handleInput = useCallback(() => {
+    if (!editorRef.current) return;
+    const markdown = htmlToMarkdown(editorRef.current);
+    lastMarkdownRef.current = markdown;
+    isInternalUpdate.current = true;
+    onChange(markdown);
+  }, [onChange]);
+  const execCommand = useCallback((command, value) => {
+    editorRef.current?.focus();
+    document.execCommand(command, false, value);
+    requestAnimationFrame(() => handleInput());
+  }, [handleInput]);
+  const formatBlock = useCallback((tag) => {
+    execCommand("formatBlock", tag);
+  }, [execCommand]);
+  const insertHorizontalRule = useCallback(() => {
+    execCommand("insertHorizontalRule");
+  }, [execCommand]);
+  const insertLink = useCallback(() => {
+    const selection = window.getSelection();
+    const selectedText = selection?.toString() || "\u94FE\u63A5\u6587\u672C";
+    const url = prompt("\u8BF7\u8F93\u5165\u94FE\u63A5\u5730\u5740:", "https://");
+    if (url) {
+      if (selection && selection.rangeCount > 0) {
+        const range = selection.getRangeAt(0);
+        range.deleteContents();
+        const anchor = document.createElement("a");
+        anchor.href = url;
+        anchor.textContent = selectedText;
+        range.insertNode(anchor);
+        range.setStartAfter(anchor);
+        range.collapse(true);
+        selection.removeAllRanges();
+        selection.addRange(range);
+      }
+      requestAnimationFrame(() => handleInput());
+    }
+  }, [handleInput]);
+  const insertImage = useCallback(() => {
+    const url = prompt("\u8BF7\u8F93\u5165\u56FE\u7247\u5730\u5740:", "https://");
+    if (url) {
+      execCommand("insertImage", url);
+    }
+  }, [execCommand]);
+  const insertCodeBlock = useCallback(() => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    const selection = window.getSelection();
+    if (selection && selection.rangeCount > 0) {
+      const range = selection.getRangeAt(0);
+      const pre = document.createElement("pre");
+      const code3 = document.createElement("code");
+      code3.textContent = selection.toString() || "\u4EE3\u7801\u5185\u5BB9";
+      pre.appendChild(code3);
+      range.deleteContents();
+      range.insertNode(pre);
+      const paragraph2 = document.createElement("p");
+      paragraph2.innerHTML = "<br>";
+      pre.parentNode?.insertBefore(paragraph2, pre.nextSibling);
+      range.setStart(paragraph2, 0);
+      range.collapse(true);
+      selection.removeAllRanges();
+      selection.addRange(range);
+    }
+    requestAnimationFrame(() => handleInput());
+  }, [handleInput]);
+  const handleKeyDown = useCallback((e) => {
+    const isMod = e.metaKey || e.ctrlKey;
+    if (isMod && e.key === "b") {
+      e.preventDefault();
+      execCommand("bold");
+    } else if (isMod && e.key === "i") {
+      e.preventDefault();
+      execCommand("italic");
+    } else if (isMod && e.key === "u") {
+      e.preventDefault();
+      execCommand("underline");
+    } else if (isMod && e.key === "e") {
+      e.preventDefault();
+      const selection = window.getSelection();
+      if (selection && selection.rangeCount > 0) {
+        const selectedText = selection.toString() || "code";
+        execCommand("insertHTML", `<code>${selectedText}</code>`);
+      }
+    } else if (e.key === "Tab") {
+      e.preventDefault();
+      execCommand("insertHTML", "&nbsp;&nbsp;&nbsp;&nbsp;");
+    }
+  }, [execCommand]);
+  const handleSourceKeyDown = useCallback((e) => {
+    if (e.key === "Tab") {
+      e.preventDefault();
+      const textarea = e.currentTarget;
+      const start = textarea.selectionStart;
+      const end = textarea.selectionEnd;
+      const newValue = content.substring(0, start) + "  " + content.substring(end);
+      onChange(newValue);
+      requestAnimationFrame(() => {
+        textarea.selectionStart = textarea.selectionEnd = start + 2;
+      });
+    }
+  }, [content, onChange]);
+  const toggleSourceMode = useCallback(() => {
+    if (isSourceMode) {
+      setIsSourceMode(false);
+      requestAnimationFrame(() => {
+        if (editorRef.current) {
+          const html2 = contentToHtml(content);
+          editorRef.current.innerHTML = html2;
+          lastMarkdownRef.current = content;
+        }
+      });
+    } else {
+      if (editorRef.current) {
+        const markdown = htmlToMarkdown(editorRef.current);
+        lastMarkdownRef.current = markdown;
+        isInternalUpdate.current = true;
+        onChange(markdown);
+      }
+      setIsSourceMode(true);
+    }
+  }, [isSourceMode, content, contentToHtml, onChange]);
+  const toolbarGroups = useMemo(() => [
+    {
+      items: [
+        { icon: /* @__PURE__ */ jsx("span", { className: "font-bold text-[11px]", children: "B" }), label: "\u52A0\u7C97 (\u2318B)", onClick: () => execCommand("bold") },
+        { icon: /* @__PURE__ */ jsx("span", { className: "italic text-[11px]", children: "I" }), label: "\u659C\u4F53 (\u2318I)", onClick: () => execCommand("italic") },
+        { icon: /* @__PURE__ */ jsx("span", { className: "line-through text-[11px]", children: "S" }), label: "\u5220\u9664\u7EBF", onClick: () => execCommand("strikeThrough") },
+        { icon: /* @__PURE__ */ jsx(Code2, { size: 13 }), label: "\u884C\u5185\u4EE3\u7801 (\u2318E)", onClick: () => {
+          const selection = window.getSelection();
+          const text3 = selection?.toString() || "code";
+          execCommand("insertHTML", `<code>${text3}</code>`);
+        } }
+      ]
+    },
+    {
+      items: [
+        { icon: /* @__PURE__ */ jsx("span", { className: "text-[11px] font-bold", children: "H1" }), label: "\u4E00\u7EA7\u6807\u9898", onClick: () => formatBlock("h1") },
+        { icon: /* @__PURE__ */ jsx("span", { className: "text-[11px] font-bold", children: "H2" }), label: "\u4E8C\u7EA7\u6807\u9898", onClick: () => formatBlock("h2") },
+        { icon: /* @__PURE__ */ jsx("span", { className: "text-[11px] font-bold", children: "H3" }), label: "\u4E09\u7EA7\u6807\u9898", onClick: () => formatBlock("h3") }
+      ]
+    },
+    {
+      items: [
+        { icon: /* @__PURE__ */ jsx("span", { className: "text-[11px]", children: "\u2022" }), label: "\u65E0\u5E8F\u5217\u8868", onClick: () => execCommand("insertUnorderedList") },
+        { icon: /* @__PURE__ */ jsx("span", { className: "text-[11px]", children: "1." }), label: "\u6709\u5E8F\u5217\u8868", onClick: () => execCommand("insertOrderedList") },
+        { icon: /* @__PURE__ */ jsx("span", { className: "text-[11px]", children: "\u275D" }), label: "\u5F15\u7528", onClick: () => formatBlock("blockquote") }
+      ]
+    },
+    {
+      items: [
+        { icon: /* @__PURE__ */ jsx("span", { className: "text-[11px]", children: "\u2014" }), label: "\u5206\u5272\u7EBF", onClick: insertHorizontalRule },
+        { icon: /* @__PURE__ */ jsx(Globe, { size: 13 }), label: "\u94FE\u63A5", onClick: insertLink },
+        { icon: /* @__PURE__ */ jsx(FileImage, { size: 13 }), label: "\u56FE\u7247", onClick: insertImage },
+        { icon: /* @__PURE__ */ jsx(Code2, { size: 13, className: "opacity-60" }), label: "\u4EE3\u7801\u5757", onClick: insertCodeBlock }
+      ]
+    }
+  ], [execCommand, formatBlock, insertHorizontalRule, insertLink, insertImage, insertCodeBlock]);
+  return /* @__PURE__ */ jsxs("div", { className: "h-full flex flex-col bg-zinc-950 agent-sdk-light:bg-white", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 px-3 py-1.5 border-b border-zinc-800/50 agent-sdk-light:border-zinc-200 bg-zinc-900/50 agent-sdk-light:bg-zinc-50 flex-shrink-0 overflow-x-auto", style: { scrollbarWidth: "none" }, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 mr-2", children: [
+        /* @__PURE__ */ jsx(Pencil, { size: 12, className: "text-[#d8ff00]" }),
+        /* @__PURE__ */ jsx("span", { className: "text-[11px] text-[#d8ff00] font-medium whitespace-nowrap", children: isSourceMode ? "Markdown \u6E90\u7801" : "\u5BCC\u6587\u672C\u7F16\u8F91" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-zinc-700/50 agent-sdk-light:bg-zinc-300 mx-1" }),
+      !isSourceMode && toolbarGroups.map((group, groupIndex) => /* @__PURE__ */ jsxs(React20__default.Fragment, { children: [
+        group.items.map((action, actionIndex) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: action.onClick,
+            className: "p-1.5 min-w-[28px] h-7 flex items-center justify-center text-zinc-400 agent-sdk-light:text-zinc-600 hover:text-zinc-100 agent-sdk-light:hover:text-zinc-900 hover:bg-zinc-700/50 agent-sdk-light:hover:bg-zinc-200 rounded transition-colors",
+            title: action.label,
+            children: action.icon
+          },
+          actionIndex
+        )),
+        groupIndex < toolbarGroups.length - 1 && /* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-zinc-700/50 agent-sdk-light:bg-zinc-300 mx-0.5" })
+      ] }, groupIndex)),
+      /* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-zinc-700/50 agent-sdk-light:bg-zinc-300 mx-1 ml-auto" }),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: toggleSourceMode,
+          className: cn2(
+            "p-1.5 flex items-center gap-1 text-[11px] rounded transition-colors whitespace-nowrap",
+            isSourceMode ? "bg-[#d8ff00]/10 text-[#d8ff00]" : "text-zinc-400 agent-sdk-light:text-zinc-600 hover:text-zinc-100 agent-sdk-light:hover:text-zinc-900 hover:bg-zinc-700/50 agent-sdk-light:hover:bg-zinc-200"
+          ),
+          title: isSourceMode ? "\u5207\u6362\u5230\u5BCC\u6587\u672C\u6A21\u5F0F" : "\u5207\u6362\u5230\u6E90\u7801\u6A21\u5F0F",
+          children: [
+            isSourceMode ? /* @__PURE__ */ jsx(Eye, { size: 13 }) : /* @__PURE__ */ jsx(Code2, { size: 13 }),
+            /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: isSourceMode ? "\u5BCC\u6587\u672C" : "\u6E90\u7801" })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-hidden", children: isSourceMode ? (
+      /* 源码编辑模式 */
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ref: textareaRef,
+          value: content,
+          onChange: (e) => onChange(e.target.value),
+          onKeyDown: handleSourceKeyDown,
+          className: "w-full h-full p-5 bg-zinc-950 agent-sdk-light:bg-white text-sm text-zinc-300 agent-sdk-light:text-zinc-800 leading-[1.8] resize-none focus:outline-none",
+          style: { fontFamily: '"SF Mono", "Fira Code", "JetBrains Mono", Menlo, Monaco, monospace' },
+          spellCheck: false,
+          autoComplete: "off",
+          autoCorrect: "off",
+          autoCapitalize: "off",
+          placeholder: "\u7F16\u5199 Markdown \u6E90\u7801..."
+        }
+      )
+    ) : (
+      /* WYSIWYG 富文本编辑模式 */
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: editorRef,
+          contentEditable: true,
+          suppressContentEditableWarning: true,
+          onInput: handleInput,
+          onKeyDown: handleKeyDown,
+          className: "w-full h-full p-5 overflow-auto bg-zinc-950 agent-sdk-light:bg-white text-sm text-zinc-300 agent-sdk-light:text-zinc-800 leading-[1.8] focus:outline-none prose prose-invert prose-zinc agent-sdk-light:prose prose-sm max-w-none\n              [&_h1]:text-2xl [&_h1]:font-bold [&_h1]:text-zinc-100 [&_h1]:agent-sdk-light:text-zinc-900 [&_h1]:mb-4 [&_h1]:mt-6 [&_h1]:border-b [&_h1]:border-zinc-800/30 [&_h1]:agent-sdk-light:border-zinc-200 [&_h1]:pb-2\n              [&_h2]:text-xl [&_h2]:font-bold [&_h2]:text-zinc-200 [&_h2]:agent-sdk-light:text-zinc-800 [&_h2]:mb-3 [&_h2]:mt-5\n              [&_h3]:text-lg [&_h3]:font-semibold [&_h3]:text-zinc-200 [&_h3]:agent-sdk-light:text-zinc-800 [&_h3]:mb-2 [&_h3]:mt-4\n              [&_p]:mb-3 [&_p]:leading-relaxed\n              [&_strong]:text-zinc-100 [&_strong]:agent-sdk-light:text-zinc-900 [&_strong]:font-semibold\n              [&_em]:text-zinc-300 [&_em]:agent-sdk-light:text-zinc-700\n              [&_code]:bg-zinc-800/60 [&_code]:agent-sdk-light:bg-zinc-100 [&_code]:text-[#d8ff00] [&_code]:agent-sdk-light:text-pink-600 [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-[13px] [&_code]:font-mono\n              [&_pre]:bg-zinc-900/80 [&_pre]:agent-sdk-light:bg-zinc-50 [&_pre]:border [&_pre]:border-zinc-800/50 [&_pre]:agent-sdk-light:border-zinc-200 [&_pre]:rounded-lg [&_pre]:p-4 [&_pre]:my-3 [&_pre]:overflow-x-auto\n              [&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_pre_code]:text-zinc-300 [&_pre_code]:agent-sdk-light:text-zinc-800\n              [&_blockquote]:border-l-3 [&_blockquote]:border-[#d8ff00]/40 [&_blockquote]:pl-4 [&_blockquote]:my-3 [&_blockquote]:text-zinc-400 [&_blockquote]:agent-sdk-light:text-zinc-600 [&_blockquote]:italic\n              [&_ul]:list-disc [&_ul]:pl-6 [&_ul]:my-2\n              [&_ol]:list-decimal [&_ol]:pl-6 [&_ol]:my-2\n              [&_li]:mb-1\n              [&_a]:text-[#d8ff00] [&_a]:agent-sdk-light:text-blue-600 [&_a]:underline [&_a]:underline-offset-2\n              [&_hr]:border-zinc-700/50 [&_hr]:agent-sdk-light:border-zinc-300 [&_hr]:my-6\n              [&_img]:max-w-full [&_img]:rounded-lg [&_img]:my-3\n              [&_table]:w-full [&_table]:border-collapse [&_table]:my-3\n              [&_th]:border [&_th]:border-zinc-700/50 [&_th]:agent-sdk-light:border-zinc-300 [&_th]:px-3 [&_th]:py-2 [&_th]:bg-zinc-800/30 [&_th]:agent-sdk-light:bg-zinc-100 [&_th]:text-left [&_th]:font-medium\n              [&_td]:border [&_td]:border-zinc-700/50 [&_td]:agent-sdk-light:border-zinc-300 [&_td]:px-3 [&_td]:py-2",
+          "data-placeholder": "\u5F00\u59CB\u7F16\u5199\u5185\u5BB9..."
+        }
+      )
+    ) })
+  ] });
+});
+var ArtifactThumbnail = memo(function ArtifactThumbnail2({
+  artifact,
+  config
+}) {
+  const typeConf = artifactTypeConfig[artifact.type] || artifactTypeConfig.text;
+  const TypeIcon = typeConf.icon;
+  const isMedia = artifact.type === "image" || artifact.type === "video";
+  const thumbnailUrl = useResolvedThumbnailUrl(
+    artifact.currentContent,
+    {
+      fileId: artifact.metadata?.fileId,
+      type: artifact.type,
+      config,
+      enabled: isMedia
+    }
+  );
+  if (isMedia && thumbnailUrl) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: thumbnailUrl,
+        alt: "",
+        className: "w-6 h-6 rounded object-cover flex-shrink-0",
+        loading: "lazy"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn2("w-6 h-6 rounded flex items-center justify-center flex-shrink-0", typeConf.bgColor), children: /* @__PURE__ */ jsx(TypeIcon, { size: 12, className: typeConf.color }) });
+});
+var ArtifactTabs = memo(function ArtifactTabs2({
+  artifacts,
+  activeId,
+  onSwitch,
+  onClose,
+  onReorder,
+  config
+}) {
+  const scrollContainerRef = useRef(null);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+  const [showAllPanel, setShowAllPanel] = useState(false);
+  const allPanelRef = useRef(null);
+  const [dragState, setDragState] = useState({ draggingId: null, dragOverId: null, dragStartX: 0, isDragging: false });
+  const checkScrollState = useCallback(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+    setCanScrollLeft(container.scrollLeft > 2);
+    setCanScrollRight(container.scrollLeft < container.scrollWidth - container.clientWidth - 2);
+  }, []);
+  useEffect(() => {
+    checkScrollState();
+    const container = scrollContainerRef.current;
+    if (!container) return;
+    container.addEventListener("scroll", checkScrollState, { passive: true });
+    const resizeObserver = new ResizeObserver(checkScrollState);
+    resizeObserver.observe(container);
+    return () => {
+      container.removeEventListener("scroll", checkScrollState);
+      resizeObserver.disconnect();
+    };
+  }, [checkScrollState, artifacts.length]);
+  useEffect(() => {
+    if (!showAllPanel) return;
+    const handleClickOutside = (e) => {
+      if (allPanelRef.current && !allPanelRef.current.contains(e.target)) {
+        setShowAllPanel(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [showAllPanel]);
+  const scrollBy = useCallback((direction) => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+    const scrollAmount = 200;
+    container.scrollBy({
+      left: direction === "left" ? -scrollAmount : scrollAmount,
+      behavior: "smooth"
+    });
+  }, []);
+  const handleDragStart = useCallback((e, artifactId) => {
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/plain", artifactId);
+    setDragState((prev) => ({ ...prev, draggingId: artifactId, dragStartX: e.clientX, isDragging: true }));
+  }, []);
+  const handleDragOver = useCallback((e, artifactId) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    setDragState((prev) => ({ ...prev, dragOverId: artifactId }));
+  }, []);
+  const handleDragEnd = useCallback(() => {
+    setDragState({ draggingId: null, dragOverId: null, dragStartX: 0, isDragging: false });
+  }, []);
+  const handleDrop = useCallback((e, targetId) => {
+    e.preventDefault();
+    const sourceId = e.dataTransfer.getData("text/plain");
+    if (!sourceId || sourceId === targetId || !onReorder) {
+      handleDragEnd();
+      return;
+    }
+    const fromIndex = artifacts.findIndex((a) => a.id === sourceId);
+    const toIndex = artifacts.findIndex((a) => a.id === targetId);
+    if (fromIndex !== -1 && toIndex !== -1 && fromIndex !== toIndex) {
+      onReorder(fromIndex, toIndex);
+    }
+    handleDragEnd();
+  }, [artifacts, onReorder, handleDragEnd]);
+  const handleCloseTab = useCallback((e, artifactId) => {
+    e.stopPropagation();
+    if (!onClose) return;
+    if (artifactId === activeId && artifacts.length > 1) {
+      const currentIndex = artifacts.findIndex((a) => a.id === artifactId);
+      const nextIndex = currentIndex < artifacts.length - 1 ? currentIndex + 1 : currentIndex - 1;
+      if (nextIndex >= 0 && nextIndex < artifacts.length) {
+        onSwitch(artifacts[nextIndex].id);
+      }
+    }
+    onClose(artifactId);
+  }, [onClose, activeId, artifacts, onSwitch]);
+  if (artifacts.length <= 1) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b border-zinc-800/50 agent-sdk-light:border-zinc-200 bg-zinc-950/50 agent-sdk-light:bg-zinc-100 flex-shrink-0 relative", children: [
+    canScrollLeft && /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => scrollBy("left"),
+        className: "flex-shrink-0 p-1 text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800/50 transition-colors z-10",
+        children: /* @__PURE__ */ jsx(ChevronLeft, { size: 14 })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: scrollContainerRef,
+        className: "flex items-center gap-0.5 px-1 py-1 overflow-x-auto flex-1 min-w-0",
+        style: { scrollbarWidth: "none", msOverflowStyle: "none" },
+        children: artifacts.map((artifact) => {
+          const typeConf = artifactTypeConfig[artifact.type] || artifactTypeConfig.text;
+          const isActive = artifact.id === activeId;
+          const isDragging = dragState.draggingId === artifact.id;
+          const isDragOver = dragState.dragOverId === artifact.id && dragState.draggingId !== artifact.id;
+          const TypeIcon = typeConf.icon;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              draggable: !!onReorder,
+              onDragStart: (e) => handleDragStart(e, artifact.id),
+              onDragOver: (e) => handleDragOver(e, artifact.id),
+              onDragEnd: handleDragEnd,
+              onDrop: (e) => handleDrop(e, artifact.id),
+              onClick: () => onSwitch(artifact.id),
+              className: cn2(
+                "group/tab flex items-center gap-1 pl-2.5 pr-1 py-1 text-xs rounded-md transition-all whitespace-nowrap flex-shrink-0 cursor-pointer select-none",
+                isActive ? "bg-zinc-800 text-zinc-100 agent-sdk-light:bg-zinc-200 agent-sdk-light:text-zinc-900" : "text-zinc-500 agent-sdk-light:text-zinc-600 hover:text-zinc-300 agent-sdk-light:hover:text-zinc-900 hover:bg-zinc-800/50 agent-sdk-light:hover:bg-zinc-200/50",
+                isDragging && "opacity-40",
+                isDragOver && "ring-1 ring-[#d8ff00]/50",
+                onReorder && "cursor-grab active:cursor-grabbing"
+              ),
+              title: artifact.title,
+              children: [
+                /* @__PURE__ */ jsx(TypeIcon, { size: 12, className: cn2("flex-shrink-0", isActive ? typeConf.color : "") }),
+                /* @__PURE__ */ jsx("span", { className: "max-w-[120px] truncate", children: artifact.title }),
+                onClose && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: (e) => handleCloseTab(e, artifact.id),
+                    className: cn2(
+                      "ml-0.5 p-0.5 rounded transition-colors flex-shrink-0",
+                      isActive ? "text-zinc-400 hover:text-zinc-100 hover:bg-zinc-700" : "text-transparent group-hover/tab:text-zinc-500 hover:!text-zinc-300 hover:!bg-zinc-700"
+                    ),
+                    title: "\u5173\u95ED",
+                    children: /* @__PURE__ */ jsx(X, { size: 10 })
+                  }
+                )
+              ]
+            },
+            artifact.id
+          );
+        })
+      }
+    ),
+    canScrollRight && /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => scrollBy("right"),
+        className: "flex-shrink-0 p-1 text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800/50 transition-colors z-10",
+        children: /* @__PURE__ */ jsx(ChevronRight, { size: 14 })
+      }
+    ),
+    artifacts.length > 0 && /* @__PURE__ */ jsxs("div", { className: "relative flex-shrink-0", ref: allPanelRef, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setShowAllPanel((prev) => !prev),
+          className: cn2(
+            "p-1.5 mr-1 text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800/50 rounded transition-colors",
+            showAllPanel && "bg-zinc-800 text-zinc-300"
+          ),
+          title: "\u5168\u90E8\u4EA7\u7269",
+          children: /* @__PURE__ */ jsx(LayoutGrid, { size: 14 })
+        }
+      ),
+      showAllPanel && /* @__PURE__ */ jsxs("div", { className: "absolute right-0 top-full mt-1 z-50 w-72 max-h-80 overflow-y-auto bg-zinc-900 agent-sdk-light:bg-white border border-zinc-700 agent-sdk-light:border-zinc-300 rounded-lg shadow-xl", children: [
+        /* @__PURE__ */ jsx("div", { className: "px-3 py-2 border-b border-zinc-800 agent-sdk-light:border-zinc-200", children: /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-zinc-400 agent-sdk-light:text-zinc-600", children: [
+          "\u5168\u90E8\u4EA7\u7269 (",
+          artifacts.length,
+          ")"
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "p-1.5 grid grid-cols-1 gap-0.5", children: artifacts.map((artifact) => {
+          const typeConf = artifactTypeConfig[artifact.type] || artifactTypeConfig.text;
+          const isActive = artifact.id === activeId;
+          typeConf.icon;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => {
+                onSwitch(artifact.id);
+                setShowAllPanel(false);
+              },
+              className: cn2(
+                "flex items-center gap-2.5 px-2.5 py-2 text-xs rounded-md transition-all w-full text-left",
+                isActive ? "bg-zinc-800 text-zinc-100 agent-sdk-light:bg-zinc-100 agent-sdk-light:text-zinc-900" : "text-zinc-400 agent-sdk-light:text-zinc-600 hover:text-zinc-200 agent-sdk-light:hover:text-zinc-900 hover:bg-zinc-800/50 agent-sdk-light:hover:bg-zinc-100"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(ArtifactThumbnail, { artifact, config }),
+                /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsx("div", { className: "truncate font-medium", children: artifact.title }),
+                  /* @__PURE__ */ jsxs("div", { className: "text-[10px] text-zinc-600 agent-sdk-light:text-zinc-500 mt-0.5", children: [
+                    typeConf.label,
+                    artifact.language && artifact.language !== artifact.type && ` \u2022 ${artifact.language}`
+                  ] })
+                ] }),
+                onClose && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      handleCloseTab(e, artifact.id);
+                    },
+                    className: "p-1 text-zinc-600 hover:text-zinc-300 hover:bg-zinc-700 rounded transition-colors flex-shrink-0",
+                    title: "\u5173\u95ED",
+                    children: /* @__PURE__ */ jsx(X, { size: 12 })
+                  }
+                )
+              ]
+            },
+            artifact.id
+          );
+        }) })
+      ] })
+    ] })
+  ] });
+});
 var ArtifactViewer = memo(function ArtifactViewer2({
   artifact,
   isOpen,
@@ -18798,41 +20789,127 @@ var ArtifactViewer = memo(function ArtifactViewer2({
   defaultView = "preview",
   isFullscreen,
   onFullscreenToggle,
-  embedded = false
+  embedded = false,
+  artifacts = [],
+  activeArtifactId,
+  onSwitchArtifact,
+  onCloseArtifact,
+  onReorderArtifacts,
+  onContentChange,
+  onSave
 }) {
   const [viewMode, setViewMode] = useState(defaultView);
+  const [isEditing, setIsEditing] = useState(false);
+  const [editContent, setEditContent] = useState("");
+  const [undoStack, setUndoStack] = useState([]);
+  const [redoStack, setRedoStack] = useState([]);
   useEffect(() => {
     if (artifact) {
-      if (artifact.type === "html" || artifact.type === "markdown") {
+      if (artifact.type === "html" || artifact.type === "markdown" || artifact.type === "svg") {
         setViewMode("preview");
       } else {
         setViewMode("code");
       }
+      setIsEditing(false);
+      setEditContent(artifact.content);
+      setUndoStack([]);
+      setRedoStack([]);
     }
   }, [artifact?.id]);
+  useEffect(() => {
+    if (artifact && !isEditing) {
+      setEditContent(artifact.content);
+    }
+  }, [artifact?.content, isEditing]);
   if (!artifact) return null;
-  const typeConfig = artifactTypeConfig[artifact.type];
-  const canPreview = artifact.type === "html" || artifact.type === "markdown";
+  const typeConfig = artifactTypeConfig[artifact.type] || artifactTypeConfig.text;
+  const canPreview = artifact.type === "html" || artifact.type === "markdown" || artifact.type === "svg";
+  const canEdit = artifact.type !== "image" && artifact.type !== "video";
+  const handleStartEdit = () => {
+    setEditContent(artifact.content);
+    setUndoStack([artifact.content]);
+    setRedoStack([]);
+    setIsEditing(true);
+    setViewMode("code");
+  };
+  const handleEditChange = (newContent) => {
+    setUndoStack((prev) => [...prev, editContent]);
+    setRedoStack([]);
+    setEditContent(newContent);
+    onContentChange?.(newContent);
+  };
+  const handleUndo = () => {
+    if (undoStack.length === 0) return;
+    const previous2 = undoStack[undoStack.length - 1];
+    setUndoStack((prev) => prev.slice(0, -1));
+    setRedoStack((prev) => [...prev, editContent]);
+    setEditContent(previous2);
+    onContentChange?.(previous2);
+  };
+  const handleRedo = () => {
+    if (redoStack.length === 0) return;
+    const next = redoStack[redoStack.length - 1];
+    setRedoStack((prev) => prev.slice(0, -1));
+    setUndoStack((prev) => [...prev, editContent]);
+    setEditContent(next);
+    onContentChange?.(next);
+  };
+  const handleSave = () => {
+    onSave?.(artifact.id, editContent);
+    setIsEditing(false);
+  };
+  const handleCancelEdit = () => {
+    setEditContent(artifact.content);
+    setIsEditing(false);
+  };
+  const displayContent = isEditing ? editContent : artifact.content;
   const renderContent = () => {
+    if (isEditing) {
+      if (artifact.type === "markdown") {
+        return /* @__PURE__ */ jsx(
+          MarkdownEditor,
+          {
+            content: editContent,
+            onChange: handleEditChange,
+            config
+          }
+        );
+      }
+      return /* @__PURE__ */ jsx(
+        CodeEditor,
+        {
+          code: editContent,
+          language: artifact.language || artifact.type,
+          onChange: handleEditChange
+        }
+      );
+    }
+    if (artifact.type === "image") {
+      return /* @__PURE__ */ jsx(ImageArtifactPreview, { content: displayContent, metadata: artifact.metadata, config });
+    }
+    if (artifact.type === "video") {
+      return /* @__PURE__ */ jsx(VideoArtifactPreview, { content: displayContent, metadata: artifact.metadata, config });
+    }
     if (viewMode === "code" || !canPreview) {
       return /* @__PURE__ */ jsx(
         CodeBlock3,
         {
-          code: artifact.content,
+          code: displayContent,
           language: artifact.language || artifact.type
         }
       );
     }
     switch (artifact.type) {
       case "html":
-        return /* @__PURE__ */ jsx(HtmlPreview3, { content: artifact.content });
+      case "svg":
+        return /* @__PURE__ */ jsx(HtmlPreview3, { content: displayContent });
       case "markdown":
-        return /* @__PURE__ */ jsx(MarkdownPreview, { content: artifact.content, config });
+        return /* @__PURE__ */ jsx(MarkdownPreview, { content: displayContent, config });
       default:
         return /* @__PURE__ */ jsx(
           CodeBlock3,
           {
-            code: artifact.content,
+            code: displayContent,
             language: artifact.language || artifact.type
           }
         );
@@ -18855,26 +20932,79 @@ var ArtifactViewer = memo(function ArtifactViewer2({
           ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          onFullscreenToggle && /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: onFullscreenToggle,
-              className: "p-1.5 text-zinc-500 agent-sdk-light:text-zinc-600 hover:text-zinc-300 agent-sdk-light:hover:text-zinc-900 hover:bg-zinc-800 agent-sdk-light:hover:bg-zinc-200 rounded-lg transition-colors",
-              title: isFullscreen ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F",
-              children: isFullscreen ? /* @__PURE__ */ jsx(Minimize2, { size: 14 }) : /* @__PURE__ */ jsx(Maximize2, { size: 14 })
-            }
-          ),
-          canPreview && /* @__PURE__ */ jsx(
-            ViewTabs,
-            {
-              activeView: viewMode,
-              onViewChange: (v) => setViewMode(v),
-              views: [
-                { id: "preview", label: "Preview", icon: /* @__PURE__ */ jsx(Eye, { size: 12 }) },
-                { id: "code", label: "Code", icon: /* @__PURE__ */ jsx(Code2, { size: 12 }) }
-              ]
-            }
-          ),
+          isEditing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: handleUndo,
+                disabled: undoStack.length === 0,
+                className: "p-1.5 text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800 rounded-lg transition-colors disabled:opacity-30 disabled:cursor-not-allowed",
+                title: "\u64A4\u9500",
+                children: /* @__PURE__ */ jsx(Undo2, { size: 14 })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: handleRedo,
+                disabled: redoStack.length === 0,
+                className: "p-1.5 text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800 rounded-lg transition-colors disabled:opacity-30 disabled:cursor-not-allowed",
+                title: "\u91CD\u505A",
+                children: /* @__PURE__ */ jsx(Redo2, { size: 14 })
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: handleSave,
+                className: "flex items-center gap-1 px-2.5 py-1 text-xs bg-[#d8ff00] hover:bg-[#e5ff4d] text-black rounded-lg transition-colors font-medium",
+                title: "\u4FDD\u5B58",
+                children: [
+                  /* @__PURE__ */ jsx(Save, { size: 12 }),
+                  "\u4FDD\u5B58"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: handleCancelEdit,
+                className: "px-2.5 py-1 text-xs text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800 rounded-lg transition-colors",
+                title: "\u53D6\u6D88\u7F16\u8F91",
+                children: "\u53D6\u6D88"
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            canEdit && onContentChange && /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: handleStartEdit,
+                className: "p-1.5 text-zinc-500 agent-sdk-light:text-zinc-600 hover:text-zinc-300 agent-sdk-light:hover:text-zinc-900 hover:bg-zinc-800 agent-sdk-light:hover:bg-zinc-200 rounded-lg transition-colors",
+                title: "\u7F16\u8F91",
+                children: /* @__PURE__ */ jsx(Pencil, { size: 14 })
+              }
+            ),
+            onFullscreenToggle && /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: onFullscreenToggle,
+                className: "p-1.5 text-zinc-500 agent-sdk-light:text-zinc-600 hover:text-zinc-300 agent-sdk-light:hover:text-zinc-900 hover:bg-zinc-800 agent-sdk-light:hover:bg-zinc-200 rounded-lg transition-colors",
+                title: isFullscreen ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F",
+                children: isFullscreen ? /* @__PURE__ */ jsx(Minimize2, { size: 14 }) : /* @__PURE__ */ jsx(Maximize2, { size: 14 })
+              }
+            ),
+            canPreview && /* @__PURE__ */ jsx(
+              ViewTabs,
+              {
+                activeView: viewMode,
+                onViewChange: (v) => setViewMode(v),
+                views: [
+                  { id: "preview", label: "Preview", icon: /* @__PURE__ */ jsx(Eye, { size: 12 }) },
+                  { id: "code", label: "Code", icon: /* @__PURE__ */ jsx(Code2, { size: 12 }) }
+                ]
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsx(
             "button",
             {
@@ -18889,6 +21019,16 @@ var ArtifactViewer = memo(function ArtifactViewer2({
           )
         ] })
       ] }),
+      onSwitchArtifact && /* @__PURE__ */ jsx(
+        ArtifactTabs,
+        {
+          artifacts,
+          activeId: activeArtifactId ?? artifact.id,
+          onSwitch: onSwitchArtifact,
+          onClose: onCloseArtifact,
+          onReorder: onReorderArtifacts
+        }
+      ),
       /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: renderContent() })
     ] });
   }
@@ -18934,6 +21074,145 @@ var ArtifactViewer = memo(function ArtifactViewer2({
     }
   );
 });
+
+// src/utils/artifactExtractor.ts
+function getMediaTypeFromParamType(paramType) {
+  const upper = paramType?.toUpperCase();
+  if (upper === "IMAGE") return "image";
+  if (upper === "VIDEO") return "video";
+  return null;
+}
+function inferMediaTypeFromUrl(url) {
+  if (!url) return null;
+  const lower = url.toLowerCase();
+  if (/\.(jpg|jpeg|png|gif|webp|svg|bmp)(\?|#|$)/.test(lower)) return "image";
+  if (/\.(mp4|mov|webm|avi|mkv|m4v)(\?|#|$)/.test(lower)) return "video";
+  if (/\.(jpg|jpeg|png|gif|webp)/.test(lower)) return "image";
+  if (/\.(mp4|mov|webm)/.test(lower)) return "video";
+  return null;
+}
+function extractArtifactsFromToolCall(toolCall, sessionId, messageId) {
+  const artifacts = [];
+  if (!toolCall || toolCall.status?.toLowerCase() !== "completed") return artifacts;
+  const result = toolCall.result;
+  if (!result) return artifacts;
+  const toolName = result?.relation?.toolName || toolCall.name || "AI Tool";
+  const args = toolCall.arguments || {};
+  if (result.works && Array.isArray(result.works)) {
+    result.works.forEach((work, index) => {
+      const paramType = work.customResponse?.paramType;
+      const fileId = work.fileId;
+      const fileUrl = work.fileUrl || work.customResponse?.url;
+      if (!fileId && !fileUrl) return;
+      const mediaType = getMediaTypeFromParamType(paramType) || (fileUrl ? inferMediaTypeFromUrl(fileUrl) : null) || (fileId ? inferMediaTypeFromUrl(fileId) : null);
+      if (!mediaType) return;
+      const artifactId = work.publicId || `media-${toolCall.id}-${index}`;
+      artifacts.push({
+        id: artifactId,
+        sessionId,
+        type: mediaType,
+        title: `${toolName} #${index + 1}`,
+        // 优先存 fileId，resolveAssetForDisplay 会将其转换为可用 URL
+        currentContent: fileId || fileUrl,
+        version: 1,
+        source: "tool",
+        sourceId: toolCall.id,
+        metadata: {
+          toolName,
+          generationParams: args,
+          messageId,
+          workflowCode: result.workflowCode,
+          taskId: result.taskId,
+          fileId: work.fileId,
+          fileUrl: work.fileUrl
+        },
+        gmtCreate: (/* @__PURE__ */ new Date()).toISOString(),
+        gmtModified: (/* @__PURE__ */ new Date()).toISOString()
+      });
+    });
+  }
+  if (artifacts.length === 0 && result.outputs?.images) {
+    const imgUrl = typeof result.outputs.images === "string" ? result.outputs.images : null;
+    if (imgUrl) {
+      artifacts.push({
+        id: `media-${toolCall.id}-output`,
+        sessionId,
+        type: "image",
+        title: `${toolName}`,
+        currentContent: imgUrl,
+        version: 1,
+        source: "tool",
+        sourceId: toolCall.id,
+        metadata: {
+          toolName,
+          generationParams: args,
+          messageId
+        },
+        gmtCreate: (/* @__PURE__ */ new Date()).toISOString(),
+        gmtModified: (/* @__PURE__ */ new Date()).toISOString()
+      });
+    }
+  }
+  if (result.works && Array.isArray(result.works)) {
+    result.works.forEach((work, index) => {
+      if (work.customResponse?.value) {
+        const parsed = detectContentType(work.customResponse.value);
+        if (parsed.content && parsed.type !== "text") {
+          artifacts.push({
+            id: `content-${toolCall.id}-${index}`,
+            sessionId,
+            type: parsed.type,
+            title: parsed.title || `${toolName} - ${parsed.type.toUpperCase()}`,
+            currentContent: parsed.content,
+            language: parsed.language,
+            version: 1,
+            source: "tool",
+            sourceId: toolCall.id,
+            metadata: {
+              toolName,
+              messageId
+            },
+            gmtCreate: (/* @__PURE__ */ new Date()).toISOString(),
+            gmtModified: (/* @__PURE__ */ new Date()).toISOString()
+          });
+        }
+      }
+    });
+  }
+  return artifacts;
+}
+function extractArtifactsFromMessages(messages, sessionId) {
+  const allArtifacts = [];
+  const seenIds = /* @__PURE__ */ new Set();
+  for (const message of messages) {
+    if (message.role !== "assistant") continue;
+    const toolCalls = message.extraData?.tool_calls || [];
+    for (const tc of toolCalls) {
+      const extracted = extractArtifactsFromToolCall(tc, sessionId, message.messageId);
+      for (const artifact of extracted) {
+        if (!seenIds.has(artifact.id)) {
+          seenIds.add(artifact.id);
+          allArtifacts.push(artifact);
+        }
+      }
+    }
+    const thoughts = message.extraData?.thoughts || message.thoughts || [];
+    for (const thought of thoughts) {
+      if (thought.toolCalls) {
+        for (const tc of thought.toolCalls) {
+          const extracted = extractArtifactsFromToolCall(tc, sessionId, message.messageId);
+          for (const artifact of extracted) {
+            if (!seenIds.has(artifact.id)) {
+              seenIds.add(artifact.id);
+              allArtifacts.push(artifact);
+            }
+          }
+        }
+      }
+    }
+  }
+  return allArtifacts;
+}
 var Field = ({ label, value }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 text-xs text-zinc-400", children: [
   /* @__PURE__ */ jsx("span", { children: label }),
   /* @__PURE__ */ jsx("span", { className: "text-zinc-200 truncate max-w-[60%]", children: value ?? "-" })
@@ -19265,7 +21544,9 @@ function ChatInputArea({
   onSend,
   onStop,
   isStreaming,
-  config
+  config,
+  activeArtifact,
+  onDetachArtifact
 }) {
   const textareaRef = useRef(null);
   const fileInputRef = useRef(null);
@@ -19346,6 +21627,20 @@ function ChatInputArea({
   };
   return /* @__PURE__ */ jsx("div", { className: "bg-zinc-950 px-4 py-4 flex-shrink-0", children: /* @__PURE__ */ jsxs("div", { className: "max-w-3xl mx-auto", children: [
     /* @__PURE__ */ jsxs("div", { className: "relative bg-zinc-900 border border-zinc-800 rounded-2xl shadow-lg shadow-black/20 focus-within:border-zinc-700 focus-within:shadow-xl focus-within:shadow-black/30 transition-all duration-200", children: [
+      activeArtifact && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 px-4 pt-3 pb-1", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-2.5 py-1 bg-zinc-800/80 rounded-lg text-xs", children: [
+        /* @__PURE__ */ jsx(FileCode, { size: 12, className: "text-[#d8ff00] flex-shrink-0" }),
+        /* @__PURE__ */ jsx("span", { className: "text-zinc-400", children: "\u5173\u8054\u4EA7\u7269\uFF1A" }),
+        /* @__PURE__ */ jsx("span", { className: "text-zinc-200 font-medium max-w-[200px] truncate", children: activeArtifact.title }),
+        onDetachArtifact && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onDetachArtifact,
+            className: "p-0.5 text-zinc-500 hover:text-zinc-300 rounded transition-colors",
+            title: "\u53D6\u6D88\u5173\u8054",
+            children: /* @__PURE__ */ jsx(Unlink, { size: 10 })
+          }
+        )
+      ] }) }),
       images.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-3 p-4 pb-2", children: images.map((img, i) => /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
         /* @__PURE__ */ jsx(
           "img",
@@ -19510,6 +21805,188 @@ var DragHandle = React20__default.memo(function DragHandle2({
     }
   );
 });
+var artifactTypeIconMap = {
+  html: Globe,
+  svg: Globe,
+  markdown: FileText,
+  json: FileJson,
+  code: FileCode,
+  text: FileText,
+  image: FileImage,
+  video: Video
+};
+var ArtifactBarItemThumbnail = memo(function ArtifactBarItemThumbnail2({
+  artifact,
+  config
+}) {
+  const TypeIcon = artifactTypeIconMap[artifact.type] || FileText;
+  const isMedia = artifact.type === "image" || artifact.type === "video";
+  const thumbnailUrl = useResolvedThumbnailUrl(
+    artifact.currentContent,
+    {
+      fileId: artifact.metadata?.fileId,
+      type: artifact.type,
+      config,
+      enabled: isMedia
+    }
+  );
+  if (isMedia && thumbnailUrl) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: thumbnailUrl,
+        alt: "",
+        className: "w-10 h-10 rounded-lg object-cover flex-shrink-0 border border-zinc-700/50 agent-sdk-light:border-zinc-300",
+        loading: "lazy"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-lg bg-zinc-800/50 agent-sdk-light:bg-zinc-100 flex items-center justify-center flex-shrink-0 border border-zinc-700/30 agent-sdk-light:border-zinc-300", children: /* @__PURE__ */ jsx(TypeIcon, { size: 18, className: "text-zinc-400 agent-sdk-light:text-zinc-500" }) });
+});
+var ArtifactBarMiniThumbnail = memo(function ArtifactBarMiniThumbnail2({
+  artifact,
+  config
+}) {
+  const TypeIcon = artifactTypeIconMap[artifact.type] || FileText;
+  const isMedia = artifact.type === "image" || artifact.type === "video";
+  const thumbnailUrl = useResolvedThumbnailUrl(
+    artifact.currentContent,
+    {
+      fileId: artifact.metadata?.fileId,
+      type: artifact.type,
+      config,
+      enabled: isMedia
+    }
+  );
+  if (isMedia && thumbnailUrl) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: thumbnailUrl,
+        alt: "",
+        className: "w-6 h-6 rounded border border-zinc-700 agent-sdk-light:border-zinc-300 object-cover",
+        loading: "lazy"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className: "w-6 h-6 rounded border border-zinc-700 agent-sdk-light:border-zinc-300 bg-zinc-800 agent-sdk-light:bg-zinc-200 flex items-center justify-center", children: /* @__PURE__ */ jsx(TypeIcon, { size: 10, className: "text-zinc-400" }) });
+});
+var ArtifactBar = React20__default.memo(function ArtifactBar2({
+  artifacts,
+  onOpenArtifact,
+  config
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const barRef = useRef(null);
+  useEffect(() => {
+    if (!expanded) return;
+    const handleClickOutside = (e) => {
+      if (barRef.current && !barRef.current.contains(e.target)) {
+        setExpanded(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [expanded]);
+  if (artifacts.length === 0) return null;
+  const imageCount = artifacts.filter((a) => a.type === "image").length;
+  const codeCount = artifacts.filter((a) => ["code", "html", "svg", "json"].includes(a.type)).length;
+  const docCount = artifacts.filter((a) => ["markdown", "text"].includes(a.type)).length;
+  const videoCount = artifacts.filter((a) => a.type === "video").length;
+  return /* @__PURE__ */ jsxs("div", { ref: barRef, className: "relative flex-shrink-0 mx-auto max-w-md", children: [
+    expanded && /* @__PURE__ */ jsxs("div", { className: "absolute bottom-full left-0 right-0 mb-1 z-30 max-h-[50vh] overflow-y-auto bg-zinc-900/95 agent-sdk-light:bg-white/95 backdrop-blur-md border border-zinc-700/50 agent-sdk-light:border-zinc-300 rounded-xl shadow-2xl", children: [
+      /* @__PURE__ */ jsxs("div", { className: "px-4 py-3 border-b border-zinc-800/50 agent-sdk-light:border-zinc-200 flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(LayoutGrid, { size: 14, className: "text-[#d8ff00]" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-zinc-200 agent-sdk-light:text-zinc-800", children: "\u5168\u90E8\u4EA7\u7269" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-zinc-500 bg-zinc-800/50 agent-sdk-light:bg-zinc-200 px-1.5 py-0.5 rounded-full", children: artifacts.length })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setExpanded(false),
+            className: "p-1 text-zinc-500 hover:text-zinc-300 agent-sdk-light:hover:text-zinc-700 rounded transition-colors",
+            children: /* @__PURE__ */ jsx(ChevronDown, { size: 16 })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "p-2 grid grid-cols-1 gap-1", children: artifacts.map((artifact) => {
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => {
+              onOpenArtifact(artifact.id);
+              setExpanded(false);
+            },
+            className: "flex items-center gap-3 px-3 py-2.5 rounded-lg text-left w-full hover:bg-zinc-800/60 agent-sdk-light:hover:bg-zinc-100 transition-colors group",
+            children: [
+              /* @__PURE__ */ jsx(ArtifactBarItemThumbnail, { artifact, config }),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx("div", { className: "text-sm text-zinc-200 agent-sdk-light:text-zinc-800 truncate font-medium group-hover:text-white agent-sdk-light:group-hover:text-zinc-900", children: artifact.title }),
+                /* @__PURE__ */ jsxs("div", { className: "text-[11px] text-zinc-500 agent-sdk-light:text-zinc-500 mt-0.5", children: [
+                  artifact.type.toUpperCase(),
+                  artifact.language && artifact.language !== artifact.type && ` \u2022 ${artifact.language}`
+                ] })
+              ] })
+            ]
+          },
+          artifact.id
+        );
+      }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "px-3 py-2 border-t border-zinc-800/30 agent-sdk-light:border-zinc-200/50 bg-zinc-900/30 agent-sdk-light:bg-zinc-50/50", children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => setExpanded((prev) => !prev),
+        className: "w-full flex items-center gap-2.5 px-3 py-2 rounded-lg bg-zinc-800/40 agent-sdk-light:bg-zinc-100 hover:bg-zinc-800/60 agent-sdk-light:hover:bg-zinc-200/80 border border-zinc-700/30 agent-sdk-light:border-zinc-300/50 transition-colors group",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx(Sparkles, { size: 14, className: "text-[#d8ff00]" }),
+            /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-zinc-300 agent-sdk-light:text-zinc-700", children: [
+              artifacts.length,
+              " \u4E2A\u4EA7\u7269"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 flex-1 min-w-0", children: [
+            imageCount > 0 && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-[10px] text-zinc-500 bg-zinc-700/30 agent-sdk-light:bg-zinc-200 px-1.5 py-0.5 rounded", children: [
+              /* @__PURE__ */ jsx(FileImage, { size: 10 }),
+              " ",
+              imageCount
+            ] }),
+            codeCount > 0 && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-[10px] text-zinc-500 bg-zinc-700/30 agent-sdk-light:bg-zinc-200 px-1.5 py-0.5 rounded", children: [
+              /* @__PURE__ */ jsx(FileCode, { size: 10 }),
+              " ",
+              codeCount
+            ] }),
+            docCount > 0 && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-[10px] text-zinc-500 bg-zinc-700/30 agent-sdk-light:bg-zinc-200 px-1.5 py-0.5 rounded", children: [
+              /* @__PURE__ */ jsx(FileText, { size: 10 }),
+              " ",
+              docCount
+            ] }),
+            videoCount > 0 && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-[10px] text-zinc-500 bg-zinc-700/30 agent-sdk-light:bg-zinc-200 px-1.5 py-0.5 rounded", children: [
+              /* @__PURE__ */ jsx(Video, { size: 10 }),
+              " ",
+              videoCount
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center -space-x-1.5", children: [
+            artifacts.slice(0, 4).map((artifact) => {
+              return /* @__PURE__ */ jsx(ArtifactBarMiniThumbnail, { artifact, config }, artifact.id);
+            }),
+            artifacts.length > 4 && /* @__PURE__ */ jsx("div", { className: "w-6 h-6 rounded border border-zinc-700 agent-sdk-light:border-zinc-300 bg-zinc-800 agent-sdk-light:bg-zinc-200 flex items-center justify-center", children: /* @__PURE__ */ jsxs("span", { className: "text-[9px] text-zinc-400", children: [
+              "+",
+              artifacts.length - 4
+            ] }) })
+          ] }),
+          /* @__PURE__ */ jsx(ChevronUp, { size: 14, className: cn2(
+            "text-zinc-500 transition-transform flex-shrink-0",
+            expanded && "rotate-180"
+          ) })
+        ]
+      }
+    ) })
+  ] });
+});
 var AgentChat = React20__default.forwardRef(({
   agentId,
   projectId,
@@ -19552,7 +22029,7 @@ var AgentChat = React20__default.forwardRef(({
       ComponentRegistry: mergedRegistry
     };
   }, [config?.components, outerComponents]);
-  const { sessions, setSessions, currentSession, setCurrentSession, addSession, removeSession, tools: _tools, setTools, setSkills, setShowItemTime } = useAgentStore();
+  const { sessions, setSessions, currentSession, setCurrentSession, addSession, removeSession, tools: _tools, setTools, setSkills, setShowItemTime, artifacts, artifactOrder, activeArtifactId, upsertArtifact, updateArtifactContent, setActiveArtifact, removeArtifact, clearArtifacts, setArtifacts, reorderArtifacts } = useAgentStore();
   const [loading, setLoading] = useState(true);
   const [messagesLoading, setMessagesLoading] = useState(false);
   const [collapsed, setCollapsed] = useState(false);
@@ -19564,7 +22041,23 @@ var AgentChat = React20__default.forwardRef(({
   const lastUserMessageRef = useRef("");
   const [shareModalOpen, setShareModalOpen] = useState(false);
   const [shareSession, setShareSession] = useState(null);
-  const [currentArtifact, setCurrentArtifact] = useState(null);
+  const artifactList = useMemo(() => {
+    const ordered = artifactOrder.map((id) => artifacts[id]).filter(Boolean);
+    const unordered = Object.values(artifacts).filter(
+      (a) => !artifactOrder.includes(a.id)
+    );
+    return [...ordered, ...unordered];
+  }, [artifacts, artifactOrder]);
+  const activeArtifact = activeArtifactId ? artifacts[activeArtifactId] ?? null : null;
+  const currentArtifact = activeArtifact ? {
+    id: activeArtifact.id,
+    type: activeArtifact.type,
+    title: activeArtifact.title,
+    content: activeArtifact.currentContent,
+    language: activeArtifact.language,
+    source: activeArtifact.sourceId,
+    metadata: activeArtifact.metadata
+  } : null;
   const [isArtifactFullscreen, setIsArtifactFullscreen] = useState(false);
   const [artifactPanelWidth, setArtifactPanelWidth] = useState(50);
   const [isDragging, setIsDragging] = useState(false);
@@ -19590,7 +22083,11 @@ var AgentChat = React20__default.forwardRef(({
       const deltaX = dragStartRef.current.startX - e.clientX;
       const deltaPercent = deltaX / containerWidth * 100;
       const newWidth = dragStartRef.current.startWidth + deltaPercent;
-      const clampedWidth = Math.max(25, Math.min(75, newWidth));
+      const minChatPx = 350;
+      const minArtifactPx = 400;
+      const maxArtifactPercent = (containerWidth - minChatPx) / containerWidth * 100;
+      const minArtifactPercent = minArtifactPx / containerWidth * 100;
+      const clampedWidth = Math.max(minArtifactPercent, Math.min(maxArtifactPercent, newWidth));
       setArtifactPanelWidth(clampedWidth);
     };
     const handleMouseUp = () => {
@@ -19612,38 +22109,52 @@ var AgentChat = React20__default.forwardRef(({
     setShowItemTime(showItemTime);
   }, [showItemTime]);
   const handleOpenArtifact = useCallback((data) => {
-    if (currentArtifact && currentArtifact.content === data.content && currentArtifact.type === data.type) {
-      setCurrentArtifact(null);
+    if (activeArtifact && activeArtifact.currentContent === data.content && activeArtifact.type === data.type) {
+      setActiveArtifact(null);
       setIsArtifactFullscreen(false);
       return;
     }
-    const artifact = {
-      id: `artifact-${Date.now()}`,
-      type: data.type,
-      title: data.title,
-      content: data.content,
-      language: data.language,
-      timestamp: Date.now()
-    };
-    setCurrentArtifact(artifact);
-  }, [currentArtifact]);
+    const existingArtifact = Object.values(artifacts).find(
+      (a) => a.currentContent === data.content && a.type === data.type
+    );
+    if (existingArtifact) {
+      setActiveArtifact(existingArtifact.id);
+    } else {
+      const sessionId = currentSession?.sessionId || "";
+      const newArtifactEntry = {
+        id: `artifact-${Date.now()}`,
+        sessionId,
+        type: data.type,
+        title: data.title,
+        currentContent: data.content,
+        language: data.language,
+        metadata: data.metadata,
+        version: 1,
+        source: "llm",
+        gmtCreate: (/* @__PURE__ */ new Date()).toISOString(),
+        gmtModified: (/* @__PURE__ */ new Date()).toISOString()
+      };
+      upsertArtifact(newArtifactEntry);
+      setActiveArtifact(newArtifactEntry.id);
+    }
+  }, [activeArtifact, artifacts, currentSession, upsertArtifact, setActiveArtifact]);
   const handleCloseArtifact = useCallback(() => {
-    setCurrentArtifact(null);
+    setActiveArtifact(null);
     setIsArtifactFullscreen(false);
-  }, []);
+  }, [setActiveArtifact]);
   useEffect(() => {
     const handleKeyDown = (e) => {
-      if (e.key === "Escape" && currentArtifact) {
+      if (e.key === "Escape" && activeArtifactId) {
         if (isArtifactFullscreen) {
           setIsArtifactFullscreen(false);
         } else {
-          setCurrentArtifact(null);
+          setActiveArtifact(null);
         }
       }
     };
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [currentArtifact, isArtifactFullscreen]);
+  }, [activeArtifactId, isArtifactFullscreen, setActiveArtifact]);
   const handleToggleArtifactFullscreen = useCallback(() => {
     setIsArtifactFullscreen((prev) => !prev);
   }, []);
@@ -19845,8 +22356,9 @@ var AgentChat = React20__default.forwardRef(({
       addSession(s);
       setCurrentSession(s);
       useAgentStore.getState().setMessages([]);
+      clearArtifacts();
     }
-  }, [projectId, agentId]);
+  }, [projectId, agentId, clearArtifacts]);
   const handlePrompt = useCallback(async (p) => {
     await handleNew();
     setInput(p);
@@ -19857,10 +22369,29 @@ var AgentChat = React20__default.forwardRef(({
     onSessionIdChange?.(s.sessionId);
     setMobileOpen(false);
     useAgentStore.getState().setMessages([]);
+    clearArtifacts();
     setMessagesLoading(true);
-    await loadMessages(s.sessionId);
+    await Promise.all([
+      loadMessages(s.sessionId),
+      artifactService.list(s.sessionId).then((res) => {
+        if (res.success && res.data && res.data.length > 0) {
+          setArtifacts(res.data);
+        }
+      }).catch((err) => {
+        console.error("[AgentChat] Load artifacts failed:", err);
+      })
+    ]);
+    const currentArtifacts = useAgentStore.getState().artifacts;
+    if (Object.keys(currentArtifacts).length === 0) {
+      const currentMessages = useAgentStore.getState().messages;
+      const extracted = extractArtifactsFromMessages(currentMessages, s.sessionId);
+      if (extracted.length > 0) {
+        console.log("[AgentChat] Fallback: extracted", extracted.length, "artifacts from messages");
+        extracted.forEach((artifact) => upsertArtifact(artifact));
+      }
+    }
     setMessagesLoading(false);
-  }, []);
+  }, [clearArtifacts, setArtifacts, upsertArtifact]);
   const handleDelete2 = useCallback(async (id) => {
     toast("\u5220\u9664\u6B64\u5BF9\u8BDD\uFF1F", {
       action: {
@@ -19956,8 +22487,14 @@ var AgentChat = React20__default.forwardRef(({
       }
     });
     setImages([]);
-    await sendMessage(currentSession.sessionId, messageContent);
-  }, [input, images, currentSession, sendMessage, config]);
+    const currentActiveArtifact = activeArtifactId ? artifacts[activeArtifactId] : null;
+    const artifactContext = currentActiveArtifact ? {
+      artifactId: currentActiveArtifact.id,
+      title: currentActiveArtifact.title,
+      currentContent: currentActiveArtifact.currentContent
+    } : void 0;
+    await sendMessage(currentSession.sessionId, messageContent, { artifactContext });
+  }, [input, images, currentSession, sendMessage, config, activeArtifactId, artifacts]);
   const sendTextMessage = useCallback(async (content) => {
     if (!content.trim()) return;
     if (!currentSession) return;
@@ -20122,6 +22659,13 @@ var AgentChat = React20__default.forwardRef(({
                         onOpenArtifact: handleOpenArtifact
                       }
                     ),
+                    artifactList.length > 0 && !currentArtifact && /* @__PURE__ */ jsx(
+                      ArtifactBar,
+                      {
+                        artifacts: artifactList,
+                        onOpenArtifact: (id) => setActiveArtifact(id)
+                      }
+                    ),
                     !hideInput && /* @__PURE__ */ jsx(
                       ChatInputArea,
                       {
@@ -20132,7 +22676,9 @@ var AgentChat = React20__default.forwardRef(({
                         onSend: handleSend,
                         onStop: handleStop,
                         isStreaming: isCurrentSessionStreaming,
-                        config
+                        config,
+                        activeArtifact,
+                        onDetachArtifact: () => setActiveArtifact(null)
                       }
                     )
                   ]
@@ -20171,7 +22717,36 @@ var AgentChat = React20__default.forwardRef(({
                         config,
                         isFullscreen: isArtifactFullscreen,
                         onFullscreenToggle: handleToggleArtifactFullscreen,
-                        embedded: true
+                        embedded: true,
+                        artifacts: artifactList,
+                        activeArtifactId,
+                        onSwitchArtifact: (id) => setActiveArtifact(id),
+                        onCloseArtifact: (id) => {
+                          removeArtifact(id);
+                          if (artifactList.length <= 1) {
+                            setIsArtifactFullscreen(false);
+                          }
+                        },
+                        onReorderArtifacts: reorderArtifacts,
+                        onContentChange: (content) => {
+                          if (activeArtifactId) {
+                            updateArtifactContent(activeArtifactId, content, "user");
+                          }
+                        },
+                        onSave: async (artifactId, content) => {
+                          try {
+                            const res = await artifactService.updateContent(artifactId, content);
+                            if (res.success) {
+                              updateArtifactContent(artifactId, content, "user");
+                              toast.success("\u4EA7\u7269\u5DF2\u4FDD\u5B58");
+                            } else {
+                              toast.error("\u4FDD\u5B58\u5931\u8D25");
+                            }
+                          } catch (err) {
+                            console.error("[AgentChat] Save artifact failed:", err);
+                            toast.error("\u4FDD\u5B58\u4EA7\u7269\u5931\u8D25");
+                          }
+                        }
                       }
                     )
                   ]
@@ -20647,6 +23222,6 @@ function ShareReplayPage({ shareId, onNavigateBack }) {
   ] });
 }
 
-export { AgentChat_default as AgentChat, ChatWindow_default as ChatWindow, ComponentProvider, HumanInputDialog_default as HumanInputDialog, ImagePreview, MAX_RECONNECT_ATTEMPTS2 as MAX_RECONNECT_ATTEMPTS, MessageBubble_default as MessageBubble, MessageImage, MessageVideo, MultiAgentThoughts_default as MultiAgentThoughts, ParameterDisplay, PlanCard_default as PlanCard, PlanConfirmDialog_default as PlanConfirmDialog, PlanProgressPanel_default as PlanProgressPanel, RECONNECT_BASE_DELAY2 as RECONNECT_BASE_DELAY, SSE_HEARTBEAT_TIMEOUT2 as SSE_HEARTBEAT_TIMEOUT, SaveTemplateDialog_default as SaveTemplateDialog, ShareModal, ShareReplayPage, StreamingJsonDisplay, TemplateSelector_default as TemplateSelector, TemplateSourceBadge_default as TemplateSourceBadge, TemplateVariableDialog_default as TemplateVariableDialog, ThinkingProcess, ToolConfirmCard, ToolConfirmDialog, UpdateTemplateDialog_default as UpdateTemplateDialog, VoiceInput, VoiceInputButton, VoiceRecordingModal, VoiceWaveform, agentService, agentSkillService, agentToolService, calculateReconnectDelay, componentService, confirmAllPendingToolCalls, createAndStartSession, createHeartbeatManager, createReconnectManager, createStreamReader, embedding, extractJsonContent, extractThinkingContent, extractToolCalls, filterMediaAttachments, findMessageById, findSessionById, formatParameters, generateSSEId, generateSessionTitle, generateToolCallDescription, getCurrentSessionMessages, getFileUrl, getHDImageUrl, getImageUrl, getOSSClient, getParamsSummary, getSessionCurrentThoughts, getSessionPendingToolCalls, getSessionWithMessages, getToolCallDisplayStatus, getToolCallStatusPriority, hasExecutingToolCalls, hasPendingToolCalls, hasWaitingConfirmation, isConversationActive, isCurrentlyThinking, isImageUrl, isMechanicalSummary, isPendingToolCallsForSession, isVideoUrl3 as isVideoUrl, llmService, looksLikeJson, mergeToolCalls, messageService, normalizeToolCall, normalizeToolCalls, parseSSELine2 as parseSSELine, parseThinkingContent, parseThoughts, planService, rejectAllPendingToolCalls, resolveMediaUrl, sessionService, shareService, templateService, toolCallService, uploadOSS, useActiveSubAgent, useAgentStore, useChatError, useChatUI, useComponent, useComponents, useCurrentSession, useCurrentThoughts, useCurrentThoughtsSessionId, useIsStreaming, useIsThinking, useMessages, usePendingComponents, usePendingComponentsSessionId, usePendingFrontendToolCalls, usePendingFrontendToolCallsSessionId, usePendingToolCalls, usePendingToolCallsSessionId, useSSE, useSessions, useSessionsLoading, useStreamingContent, useStreamingSessionId, useSubAgents, useVoiceRecognition };
+export { AgentChat_default as AgentChat, ChatWindow_default as ChatWindow, ComponentProvider, HumanInputDialog_default as HumanInputDialog, ImagePreview, MAX_RECONNECT_ATTEMPTS2 as MAX_RECONNECT_ATTEMPTS, MessageBubble_default as MessageBubble, MessageImage, MessageVideo, MultiAgentThoughts_default as MultiAgentThoughts, ParameterDisplay, PlanCard_default as PlanCard, PlanConfirmDialog_default as PlanConfirmDialog, PlanProgressPanel_default as PlanProgressPanel, RECONNECT_BASE_DELAY2 as RECONNECT_BASE_DELAY, SSE_HEARTBEAT_TIMEOUT2 as SSE_HEARTBEAT_TIMEOUT, SaveTemplateDialog_default as SaveTemplateDialog, ShareModal, ShareReplayPage, StreamingJsonDisplay, TemplateSelector_default as TemplateSelector, TemplateSourceBadge_default as TemplateSourceBadge, TemplateVariableDialog_default as TemplateVariableDialog, ThinkingProcess, ToolConfirmCard, ToolConfirmDialog, UpdateTemplateDialog_default as UpdateTemplateDialog, VoiceInput, VoiceInputButton, VoiceRecordingModal, VoiceWaveform, agentService, agentSkillService, agentToolService, artifactService, calculateReconnectDelay, componentService, confirmAllPendingToolCalls, createAndStartSession, createHeartbeatManager, createReconnectManager, createStreamReader, embedding, extractJsonContent, extractThinkingContent, extractToolCalls, filterMediaAttachments, findMessageById, findSessionById, formatParameters, generateSSEId, generateSessionTitle, generateToolCallDescription, getCurrentSessionMessages, getFileUrl, getHDImageUrl, getImageUrl, getOSSClient, getParamsSummary, getSessionCurrentThoughts, getSessionPendingToolCalls, getSessionWithMessages, getToolCallDisplayStatus, getToolCallStatusPriority, hasExecutingToolCalls, hasPendingToolCalls, hasWaitingConfirmation, isConversationActive, isCurrentlyThinking, isImageUrl, isMechanicalSummary, isPendingToolCallsForSession, isVideoUrl3 as isVideoUrl, llmService, looksLikeJson, mergeToolCalls, messageService, normalizeToolCall, normalizeToolCalls, parseSSELine2 as parseSSELine, parseThinkingContent, parseThoughts, planService, rejectAllPendingToolCalls, resolveMediaUrl, sessionService, shareService, templateService, toolCallService, uploadOSS, useActiveArtifact, useActiveArtifactId, useActiveSubAgent, useAgentStore, useArtifactList, useArtifactOrder, useArtifacts, useCanvasBridge, useChatError, useChatUI, useComponent, useComponents, useCurrentSession, useCurrentThoughts, useCurrentThoughtsSessionId, useIsStreaming, useIsThinking, useMessages, usePendingComponents, usePendingComponentsSessionId, usePendingFrontendToolCalls, usePendingFrontendToolCallsSessionId, usePendingToolCalls, usePendingToolCallsSessionId, useSSE, useSessions, useSessionsLoading, useStreamingContent, useStreamingSessionId, useSubAgents, useVoiceRecognition };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map