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

package/dist/index.js

@@ -13,6 +13,7 @@ var DialogPrimitive = require('@radix-ui/react-dialog');
 var reactSlot = require('@radix-ui/react-slot');
 var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
 require('react-dom');
+var marked = require('marked');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -426,6 +427,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 = {
   /**
    * 创建分享链接
@@ -814,6 +861,9 @@ var useAgentStore = zustand.create()(
       subAgents: [],
       tools: [],
       skills: [],
+      artifacts: {},
+      artifactOrder: [],
+      activeArtifactId: null,
       // ============ Session Actions ============
       setSessions: (sessions) => set({ sessions }, false, "setSessions"),
       setTools: (tools) => set({ tools }, false, "setTools"),
@@ -1178,19 +1228,99 @@ var useAgentStore = zustand.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"
       )
@@ -1217,6 +1347,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);
@@ -1405,7 +1552,11 @@ function useSSE(options) {
     setShowPlanConfirmDialog,
     setShowHumanInputDialog,
     setWaitingStepId,
-    clearPlanState
+    clearPlanState,
+    // Artifact actions
+    upsertArtifact,
+    updateArtifactContent,
+    setActiveArtifact
   } = useAgentStore();
   const clearHeartbeatTimeout = React20.useCallback(() => {
     if (heartbeatTimeoutRef.current) {
@@ -1603,6 +1754,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;
@@ -2308,7 +2490,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();
@@ -2448,6 +2630,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 = React20.useRef(options);
+  optionsRef.current = options;
+  const postToCanvas = React20.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]);
+  React20.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 = React20.useCallback((artifact) => {
+    if (!enabled) return;
+    postToCanvas("artifact_created", { artifact });
+  }, [enabled, postToCanvas]);
+  const notifyArtifactUpdated = React20.useCallback((artifact) => {
+    if (!enabled) return;
+    postToCanvas("artifact_updated", { artifact });
+  }, [enabled, postToCanvas]);
+  const notifyArtifactDeleted = React20.useCallback((artifactId) => {
+    if (!enabled) return;
+    postToCanvas("artifact_deleted", { artifactId });
+  }, [enabled, postToCanvas]);
+  const syncAllArtifacts = React20.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;
@@ -2910,14 +3178,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`;
@@ -2925,14 +3193,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";
   }
@@ -2942,8 +3210,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) {
@@ -6938,7 +7206,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);
   }
@@ -6953,6 +7220,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,
@@ -6962,7 +7232,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;
@@ -10571,7 +10841,7 @@ var MessageImageInternal = React20.memo(function MessageImageInternal2({ src, al
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u56FE\u7247\u52A0\u8F7D\u5931\u8D25" })
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative cursor-pointer overflow-hidden rounded-lg my-2", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative inline-block max-w-full overflow-hidden rounded-lg my-2", children: [
     previewUrl && /* @__PURE__ */ jsxRuntime.jsx(
       ImagePreviewComp,
       {
@@ -10579,7 +10849,7 @@ var MessageImageInternal = React20.memo(function MessageImageInternal2({ src, al
         onClose: () => setPreviewUrl(null)
       }
     ),
-    !loaded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-zinc-800 animate-pulse rounded-lg", style: { minHeight: "100px" } }),
+    !loaded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-zinc-800 animate-pulse rounded-lg", style: { minHeight: "100px", minWidth: "150px" } }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "img",
       {
@@ -10589,23 +10859,284 @@ var MessageImageInternal = React20.memo(function MessageImageInternal2({ src, al
         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 = React20.memo(function MessageVideoInternal2({ src, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-2 relative rounded-lg overflow-hidden bg-zinc-900 border border-zinc-800", children: /* @__PURE__ */ jsxRuntime.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__namespace.default.useRef(null);
+  const canvasRef = React20__namespace.default.useRef(null);
+  const [posterUrl, setPosterUrl] = React20.useState(null);
+  const [isHovering, setIsHovering] = React20.useState(false);
+  const [isPlaying, setIsPlaying] = React20.useState(false);
+  const [isMuted, setIsMuted] = React20.useState(true);
+  const [duration, setDuration] = React20.useState(0);
+  const [currentTime, setCurrentTime] = React20.useState(0);
+  const [isFullPlaying, setIsFullPlaying] = React20.useState(false);
+  const hoverTimerRef = React20__namespace.default.useRef(null);
+  const VideoPreviewComp = useComponent("VideoPreview") || VideoPreviewInternal;
+  const [showPreview, setShowPreview] = React20.useState(false);
+  React20.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    showPreview && /* @__PURE__ */ jsxRuntime.jsx(VideoPreviewComp, { src, onClose: () => setShowPreview(false) }),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: posterUrl,
+              alt: "Video cover",
+              className: "absolute inset-0 w-full h-full object-contain z-[1]"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("canvas", { ref: canvasRef, className: "hidden" }),
+          !isFullPlaying && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "white", className: "ml-1", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 5v14l11-7z" }) }) }) }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "w-full h-1 bg-white/20 rounded-full mb-2 cursor-pointer group/progress",
+                onClick: handleProgressClick,
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "h-full bg-[#d8ff00] rounded-full relative transition-all duration-75",
+                    style: { width: `${progressPercent}%` },
+                    children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: handleClick,
+                    className: "p-1 text-white/80 hover:text-white transition-colors",
+                    children: isPlaying ? /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "6", y: "4", width: "4", height: "16", rx: "1" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "14", y: "4", width: "4", height: "16", rx: "1" })
+                    ] }) : /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 5v14l11-7z" }) })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: handleToggleMute,
+                    className: "p-1 text-white/80 hover:text-white transition-colors",
+                    children: isMuted ? /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "11 5 6 9 2 9 2 15 6 15 11 19 11 5" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "23", y1: "9", x2: "17", y2: "15" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "17", y1: "9", x2: "23", y2: "15" })
+                    ] }) : /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "11 5 6 9 2 9 2 15 6 15 11 19 11 5" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07" })
+                    ] })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[11px] text-white/60 font-mono tabular-nums", children: [
+                  formatTime2(currentTime),
+                  " / ",
+                  formatTime2(duration)
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "15 3 21 3 21 9" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "9 21 3 21 3 15" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+                  ] })
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
 });
 var ImagePreviewInternal = React20.memo(function ImagePreviewInternal2({
   src,
@@ -12251,6 +12782,7 @@ var ToolResultRenderer = React20.memo(function ToolResultRenderer2({
   result,
   mediaUrls,
   config,
+  toolCallData,
   onOpenArtifact
 }) {
   const [imgLoaded, setImgLoaded] = React20.useState({});
@@ -12317,32 +12849,134 @@ var ToolResultRenderer = React20.memo(function ToolResultRenderer2({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-      hasMedia && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2", children: [
-        videoUrls.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2 mb-2", children: videoUrls.map((video, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative rounded-lg overflow-hidden bg-black", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { children: imageUrls.map((img, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative group/img overflow-hidden ${imageUrls.length > 1 ? "aspect-square bg-black" : ""}`, children: [
-          !imgLoaded[i] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `bg-zinc-800 animate-pulse flex items-center justify-center`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-spin rounded-full h-5 w-5 border-b-2 border-[#d8ff00]" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "img",
+          return metadata;
+        };
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: isMultiple ? "grid grid-cols-2 gap-2" : "flex", children: [
+          videoUrls.map((video, i) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                  MessageVideoInternal,
+                  {
+                    src: video.hdUrl || video.url,
+                    className: isMultiple ? "w-full h-full object-cover" : "max-h-[375px] max-w-full object-contain"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Sparkles, { size: 12 }),
+                        "\u67E5\u770B\u8BE6\u60C5"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Video, { size: 14 })
+                    }
+                  )
+                ] })
+              ]
+            },
+            `video-${i}`
+          )),
+          imageUrls.map((img, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: `relative group/media overflow-hidden rounded-lg bg-black ${isMultiple ? "aspect-square" : "max-h-[375px]"}`,
+              children: [
+                !imgLoaded[i] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-zinc-800 animate-pulse flex items-center justify-center w-full aspect-square", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-spin rounded-full h-5 w-5 border-b-2 border-[#d8ff00]" }) }),
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Sparkles, { size: 12 }),
+                        "\u67E5\u770B\u8BE6\u60C5"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Image, { size: 14 })
+                    }
+                  )
+                ] })
+              ]
+            },
+            `img-${i}`
+          ))
+        ] });
+      })() }),
       hasCustomResponses && customResult
     ] })
   ] });
@@ -12468,6 +13102,7 @@ var ToolCallCard3 = React20.memo(function ToolCallCard4({
         result: toolCall.result,
         mediaUrls,
         config,
+        toolCallData: toolCall,
         defaultExpanded: false,
         onOpenArtifact
       }
@@ -12738,7 +13373,7 @@ var ComponentPendingCard = React20.memo(function ComponentPendingCard2({
     })() })
   ] });
 });
-var ThoughtTimelineCard = React20.memo(function ThoughtTimelineCard2({ thought, config, isLoading = false }) {
+var ThoughtTimelineCard = React20.memo(function ThoughtTimelineCard2({ thought, config, isLoading = false, skipImages = false }) {
   const [expanded, setExpanded] = React20.useState(true);
   const { showItemTime } = useAgentStore();
   const thoughtType = thought?.type || "";
@@ -12762,9 +13397,9 @@ var ThoughtTimelineCard = React20.memo(function ThoughtTimelineCard2({ thought,
     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;
@@ -12776,12 +13411,19 @@ var ThoughtTimelineCard = React20.memo(function ThoughtTimelineCard2({ thought,
   if (!cleaned || !cleaned.trim()) return null;
   return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 py-2", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm leading-relaxed prose prose-invert prose-sm max-w-none [&_*]:break-words", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(MarkdownContent, { content: cleaned, skipImages: false, config, variant: "thought" }),
+      /* @__PURE__ */ jsxRuntime.jsx(MarkdownContent, { content: cleaned, skipImages, config, variant: "thought" }),
       isLoading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block w-2 h-4 ml-0.5 bg-[#d8ff00] animate-pulse rounded-sm" })
     ] }) }),
     thought?.raw?.length > 0 && showItemTime && /* @__PURE__ */ jsxRuntime.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 = [
@@ -13781,7 +14423,8 @@ ${m.content}`;
 }
 var ThoughtBlockItem = React20.memo(function ThoughtBlockItem2({
   content,
-  config
+  config,
+  skipImages = false
 }) {
   const [expanded, setExpanded] = React20.useState(false);
   const lineCount = React20.useMemo(() => content.split("\n").length, [content]);
@@ -13794,7 +14437,7 @@ var ThoughtBlockItem = React20.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__ */ jsxRuntime.jsx(MarkdownContent, { content, skipImages: false, config, variant: "thought" })
+        children: /* @__PURE__ */ jsxRuntime.jsx(MarkdownContent, { content, skipImages, config, variant: "thought" })
       }
     ),
     shouldToggle && /* @__PURE__ */ jsxRuntime.jsx(
@@ -13980,7 +14623,6 @@ var MessageBubble = React20.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;
@@ -14041,7 +14683,8 @@ var MessageBubble = React20.memo(function MessageBubble2({
               {
                 thought: item.data,
                 config,
-                isLoading: showLoadingCursor
+                isLoading: showLoadingCursor,
+                skipImages: hasToolCallImages
               },
               item.id
             );
@@ -14141,7 +14784,8 @@ var MessageBubble = React20.memo(function MessageBubble2({
                     ThoughtBlockItem,
                     {
                       content: block.content,
-                      config
+                      config,
+                      skipImages: hasToolCallImages
                     },
                     `${block.ts}-${index}`
                   )),
@@ -14186,15 +14830,23 @@ var MessageBubble = React20.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(MessageVideoComp, { src: att.url, className: "w-full h-full object-cover" }) : /* @__PURE__ */ jsxRuntime.jsx(MessageImageComp, { src: att.url, alt: fileName, className: "w-full h-full object-cover" }),
+                isVideo ? /* @__PURE__ */ jsxRuntime.jsx(MessageVideoComp, { src: assets.url, className: "w-full h-full object-cover" }) : /* @__PURE__ */ jsxRuntime.jsx(MessageImageComp, { src: att.url, alt: fileName, className: "w-full h-full object-cover" }),
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/20 opacity-0 group-hover/att:opacity-100 transition-opacity" })
               ]
             },
@@ -14299,7 +14951,14 @@ var MessageBubble = React20.memo(function MessageBubble2({
           ]
         }
       ) }),
-      message.gmtCreate && !isStreaming && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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"
+      }) })
     ] })
   ] });
 });
@@ -15174,9 +15833,24 @@ var DialogDescription = React20__namespace.forwardRef(({ className, ...props },
 ));
 DialogDescription.displayName = DialogPrimitive__namespace.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);
@@ -15994,10 +16668,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
       });
@@ -18498,7 +19172,57 @@ var ToolbarButton = React20.memo(function ToolbarButton2({
     }
   );
 });
-var CodeBlock3 = React20.memo(function CodeBlock4({
+var artifactTypeConfig = {
+  html: {
+    icon: lucideReact.Globe,
+    label: "HTML",
+    color: "text-orange-400",
+    bgColor: "bg-orange-500/10"
+  },
+  svg: {
+    icon: lucideReact.Globe,
+    label: "SVG",
+    color: "text-orange-300",
+    bgColor: "bg-orange-500/10"
+  },
+  markdown: {
+    icon: lucideReact.FileText,
+    label: "Markdown",
+    color: "text-blue-400",
+    bgColor: "bg-blue-500/10"
+  },
+  json: {
+    icon: lucideReact.FileJson,
+    label: "JSON",
+    color: "text-yellow-400",
+    bgColor: "bg-yellow-500/10"
+  },
+  code: {
+    icon: lucideReact.FileCode,
+    label: "Code",
+    color: "text-purple-400",
+    bgColor: "bg-purple-500/10"
+  },
+  text: {
+    icon: lucideReact.FileText,
+    label: "Text",
+    color: "text-zinc-400",
+    bgColor: "bg-zinc-500/10"
+  },
+  image: {
+    icon: lucideReact.FileImage,
+    label: "Image",
+    color: "text-green-400",
+    bgColor: "bg-green-500/10"
+  },
+  video: {
+    icon: lucideReact.Video,
+    label: "Video",
+    color: "text-pink-400",
+    bgColor: "bg-pink-500/10"
+  }
+};
+var CodeBlock3 = React20.memo(function CodeBlock4({
   code: code3,
   language,
   showLineNumbers = true
@@ -18786,38 +19510,1305 @@ React20.memo(function JsonPreview2({ content }) {
   }
   return /* @__PURE__ */ jsxRuntime.jsx(CodeBlock3, { code: formattedJson, language: "json" });
 });
-var artifactTypeConfig = {
-  html: {
-    icon: lucideReact.Globe,
-    label: "HTML",
-    color: "text-orange-400",
-    bgColor: "bg-orange-500/10"
-  },
-  markdown: {
-    icon: lucideReact.FileText,
-    label: "Markdown",
-    color: "text-blue-400",
-    bgColor: "bg-blue-500/10"
-  },
-  json: {
-    icon: lucideReact.FileJson,
-    label: "JSON",
-    color: "text-yellow-400",
-    bgColor: "bg-yellow-500/10"
-  },
-  code: {
-    icon: lucideReact.FileCode,
-    label: "Code",
-    color: "text-purple-400",
-    bgColor: "bg-purple-500/10"
-  },
-  text: {
-    icon: lucideReact.FileText,
-    label: "Text",
-    color: "text-zinc-400",
-    bgColor: "bg-zinc-500/10"
-  }
-};
+var CodeEditor = React20.memo(function CodeEditor2({
+  code: code3,
+  language,
+  onChange
+}) {
+  const textareaRef = React20.useRef(null);
+  const handleKeyDown = React20.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__ */ jsxRuntime.jsxs("div", { className: "h-full flex flex-col bg-zinc-950 agent-sdk-light:bg-white", children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { size: 12, className: "text-[#d8ff00]" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-[#d8ff00] font-medium", children: "\u7F16\u8F91\u6A21\u5F0F" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-zinc-500 agent-sdk-light:text-zinc-600 font-mono uppercase ml-2", children: language || "text" })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.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] = React20.useState(content);
+  const [resolvedHdUrl, setResolvedHdUrl] = React20.useState(content);
+  const [isLoading, setIsLoading] = React20.useState(true);
+  React20.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] = React20.useState(null);
+  React20.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 = React20.memo(function ImageArtifactPreview2({
+  content,
+  metadata,
+  config
+}) {
+  const [isZoomed, setIsZoomed] = React20.useState(false);
+  const [showInfo, setShowInfo] = React20.useState(true);
+  const [imgNaturalSize, setImgNaturalSize] = React20.useState(null);
+  const [copied, setCopied] = React20.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 = React20.useCallback(async (text3, label) => {
+    try {
+      await navigator.clipboard.writeText(text3);
+      setCopied(label);
+      setTimeout(() => setCopied(null), 2e3);
+    } catch {
+    }
+  }, []);
+  const handleDownload = React20.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__ */ jsxRuntime.jsxs("div", { className: "h-full flex flex-col bg-zinc-950 agent-sdk-light:bg-white", children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "absolute top-4 right-4 flex items-center gap-1.5 z-20", children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.FileText, { size: 16 })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Download, { size: 16 })
+          }
+        )
+      ] }),
+      imgNaturalSize && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.FileImage, { size: 12, className: "text-white/60" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[11px] text-white/80 font-mono", children: [
+          imgNaturalSize.width,
+          " \xD7 ",
+          imgNaturalSize.height
+        ] })
+      ] })
+    ] }),
+    showInfo && (generationParams || toolName) && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "px-5 py-4 space-y-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-7 h-7 rounded-lg bg-[#d8ff00]/10 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { size: 14, className: "text-[#d8ff00]" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: "text-[10px] text-zinc-600 font-mono", children: [
+          "Task: ",
+          metadata.taskId
+        ] })
+      ] }),
+      promptText && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-zinc-500 uppercase tracking-wider font-medium", children: "Prompt" }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCheck, { size: 10, className: "text-green-400" }),
+                " \u5DF2\u590D\u5236"
+              ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { size: 10 }),
+                " \u590D\u5236"
+              ] })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-zinc-500 uppercase tracking-wider font-medium", children: "\u53C2\u6570" }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-zinc-500 agent-sdk-light:text-zinc-500", children: formatParamKey(key) }),
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "pt-2 border-t border-zinc-800/30 agent-sdk-light:border-zinc-200", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 text-[10px] text-zinc-600", children: [
+        metadata.workId && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          "ID: ",
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-zinc-500", children: metadata.workId })
+        ] }),
+        metadata.fileId && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "truncate max-w-[200px]", title: metadata.fileId, children: [
+          "File: ",
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-zinc-500", children: metadata.fileId })
+        ] })
+      ] }) })
+    ] }) })
+  ] });
+});
+var VideoArtifactPreview = React20.memo(function VideoArtifactPreview2({
+  content,
+  metadata,
+  config
+}) {
+  const { hdUrl: resolvedUrl } = useResolvedMediaUrl(content, {
+    fileId: metadata?.fileId,
+    type: "video",
+    config
+  });
+  const videoRef = React20.useRef(null);
+  const progressRef = React20.useRef(null);
+  const [isPlaying, setIsPlaying] = React20.useState(false);
+  const [isMuted, setIsMuted] = React20.useState(false);
+  const [duration, setDuration] = React20.useState(0);
+  const [currentTime, setCurrentTime] = React20.useState(0);
+  const [volume, setVolume] = React20.useState(1);
+  const [isLoaded, setIsLoaded] = React20.useState(false);
+  const [showVolumeSlider, setShowVolumeSlider] = React20.useState(false);
+  const [posterUrl, setPosterUrl] = React20.useState(null);
+  const [isDraggingProgress, setIsDraggingProgress] = React20.useState(false);
+  const generationParams = metadata?.generationParams;
+  const toolName = metadata?.toolName;
+  React20.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 = React20.useCallback(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    if (isPlaying) {
+      video.pause();
+      setIsPlaying(false);
+    } else {
+      video.play().then(() => setIsPlaying(true)).catch(() => {
+      });
+    }
+  }, [isPlaying]);
+  const toggleMute = React20.useCallback(() => {
+    const video = videoRef.current;
+    if (video) {
+      video.muted = !isMuted;
+      setIsMuted(!isMuted);
+    }
+  }, [isMuted]);
+  const handleVolumeChange = React20.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 = React20.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 = React20.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 = React20.useCallback(() => {
+    if (isDraggingProgress && videoRef.current) {
+      videoRef.current.currentTime = currentTime;
+    }
+    setIsDraggingProgress(false);
+  }, [isDraggingProgress, currentTime]);
+  React20.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 = React20.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__ */ jsxRuntime.jsxs("div", { className: "h-full flex flex-col bg-zinc-950 agent-sdk-light:bg-white", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-hidden flex items-center justify-center bg-black relative group/player", children: [
+      posterUrl && !isPlaying && !currentTime && /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: posterUrl,
+          alt: "Video cover",
+          className: "absolute inset-0 w-full h-full object-contain z-[1]"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "absolute inset-0 z-[2] flex items-center justify-center cursor-pointer",
+          onClick: togglePlay,
+          children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { width: "26", height: "26", viewBox: "0 0 24 24", fill: "white", className: "ml-1", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 5v14l11-7z" }) }) })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "h-full bg-[#d8ff00] rounded-full relative",
+                style: { width: `${progressPercent}%` },
+                children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: togglePlay, className: "p-1 text-white/90 hover:text-white transition-colors", children: isPlaying ? /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "6", y: "4", width: "4", height: "16", rx: "1" }),
+              /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "14", y: "4", width: "4", height: "16", rx: "1" })
+            ] }) : /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 5v14l11-7z" }) }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "flex items-center gap-1.5 relative",
+                onMouseEnter: () => setShowVolumeSlider(true),
+                onMouseLeave: () => setShowVolumeSlider(false),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: toggleMute, className: "p-1 text-white/80 hover:text-white transition-colors", children: isMuted || volume === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "11 5 6 9 2 9 2 15 6 15 11 19 11 5" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "23", y1: "9", x2: "17", y2: "15" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "17", y1: "9", x2: "23", y2: "15" })
+                  ] }) : /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "11 5 6 9 2 9 2 15 6 15 11 19 11 5" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07" })
+                  ] }) }),
+                  showVolumeSlider && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: "text-xs text-white/60 font-mono tabular-nums", children: [
+              formatTime2(currentTime),
+              " / ",
+              formatTime2(duration)
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: handleDownload,
+              className: "p-1.5 text-white/60 hover:text-white transition-colors",
+              title: "\u4E0B\u8F7D\u89C6\u9891",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { size: 16 })
+            }
+          ) })
+        ] })
+      ] })
+    ] }),
+    generationParams && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "px-4 py-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { size: 12, className: "text-[#d8ff00]" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-zinc-300 agent-sdk-light:text-zinc-700", children: toolName || "\u751F\u6210\u53C2\u6570" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-xs", children: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "mt-2 pt-2 border-t border-zinc-800/30 agent-sdk-light:border-zinc-200", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-zinc-500 agent-sdk-light:text-zinc-500 uppercase tracking-wider", children: "Prompt" }),
+        /* @__PURE__ */ jsxRuntime.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 = React20.memo(function MarkdownEditor2({
+  content,
+  onChange,
+  config
+}) {
+  const editorRef = React20.useRef(null);
+  const textareaRef = React20.useRef(null);
+  const [isSourceMode, setIsSourceMode] = React20.useState(false);
+  const isInternalUpdate = React20.useRef(false);
+  const lastMarkdownRef = React20.useRef(content);
+  const contentToHtml = React20.useCallback((markdown) => {
+    return marked.marked.parse(markdown, { breaks: true, gfm: true });
+  }, []);
+  React20.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]);
+  React20.useEffect(() => {
+    if (editorRef.current && !isSourceMode) {
+      const html2 = contentToHtml(content);
+      editorRef.current.innerHTML = html2;
+    }
+  }, []);
+  const handleInput = React20.useCallback(() => {
+    if (!editorRef.current) return;
+    const markdown = htmlToMarkdown(editorRef.current);
+    lastMarkdownRef.current = markdown;
+    isInternalUpdate.current = true;
+    onChange(markdown);
+  }, [onChange]);
+  const execCommand = React20.useCallback((command, value) => {
+    editorRef.current?.focus();
+    document.execCommand(command, false, value);
+    requestAnimationFrame(() => handleInput());
+  }, [handleInput]);
+  const formatBlock = React20.useCallback((tag) => {
+    execCommand("formatBlock", tag);
+  }, [execCommand]);
+  const insertHorizontalRule = React20.useCallback(() => {
+    execCommand("insertHorizontalRule");
+  }, [execCommand]);
+  const insertLink = React20.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 = React20.useCallback(() => {
+    const url = prompt("\u8BF7\u8F93\u5165\u56FE\u7247\u5730\u5740:", "https://");
+    if (url) {
+      execCommand("insertImage", url);
+    }
+  }, [execCommand]);
+  const insertCodeBlock = React20.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 = React20.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 = React20.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 = React20.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 = React20.useMemo(() => [
+    {
+      items: [
+        { icon: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold text-[11px]", children: "B" }), label: "\u52A0\u7C97 (\u2318B)", onClick: () => execCommand("bold") },
+        { icon: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "italic text-[11px]", children: "I" }), label: "\u659C\u4F53 (\u2318I)", onClick: () => execCommand("italic") },
+        { icon: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "line-through text-[11px]", children: "S" }), label: "\u5220\u9664\u7EBF", onClick: () => execCommand("strikeThrough") },
+        { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-bold", children: "H1" }), label: "\u4E00\u7EA7\u6807\u9898", onClick: () => formatBlock("h1") },
+        { icon: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-bold", children: "H2" }), label: "\u4E8C\u7EA7\u6807\u9898", onClick: () => formatBlock("h2") },
+        { icon: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-bold", children: "H3" }), label: "\u4E09\u7EA7\u6807\u9898", onClick: () => formatBlock("h3") }
+      ]
+    },
+    {
+      items: [
+        { icon: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px]", children: "\u2022" }), label: "\u65E0\u5E8F\u5217\u8868", onClick: () => execCommand("insertUnorderedList") },
+        { icon: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px]", children: "1." }), label: "\u6709\u5E8F\u5217\u8868", onClick: () => execCommand("insertOrderedList") },
+        { icon: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px]", children: "\u275D" }), label: "\u5F15\u7528", onClick: () => formatBlock("blockquote") }
+      ]
+    },
+    {
+      items: [
+        { icon: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px]", children: "\u2014" }), label: "\u5206\u5272\u7EBF", onClick: insertHorizontalRule },
+        { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Globe, { size: 13 }), label: "\u94FE\u63A5", onClick: insertLink },
+        { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileImage, { size: 13 }), label: "\u56FE\u7247", onClick: insertImage },
+        { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Code2, { size: 13, className: "opacity-60" }), label: "\u4EE3\u7801\u5757", onClick: insertCodeBlock }
+      ]
+    }
+  ], [execCommand, formatBlock, insertHorizontalRule, insertLink, insertImage, insertCodeBlock]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full flex flex-col bg-zinc-950 agent-sdk-light:bg-white", children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 mr-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { size: 12, className: "text-[#d8ff00]" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] text-[#d8ff00] font-medium whitespace-nowrap", children: isSourceMode ? "Markdown \u6E90\u7801" : "\u5BCC\u6587\u672C\u7F16\u8F91" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(React20__namespace.default.Fragment, { children: [
+        group.items.map((action, actionIndex) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "h-4 w-px bg-zinc-700/50 agent-sdk-light:bg-zinc-300 mx-0.5" })
+      ] }, groupIndex)),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-px bg-zinc-700/50 agent-sdk-light:bg-zinc-300 mx-1 ml-auto" }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Eye, { size: 13 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Code2, { size: 13 }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: isSourceMode ? "\u5BCC\u6587\u672C" : "\u6E90\u7801" })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0 overflow-hidden", children: isSourceMode ? (
+      /* 源码编辑模式 */
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 = React20.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__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: thumbnailUrl,
+        alt: "",
+        className: "w-6 h-6 rounded object-cover flex-shrink-0",
+        loading: "lazy"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn2("w-6 h-6 rounded flex items-center justify-center flex-shrink-0", typeConf.bgColor), children: /* @__PURE__ */ jsxRuntime.jsx(TypeIcon, { size: 12, className: typeConf.color }) });
+});
+var ArtifactTabs = React20.memo(function ArtifactTabs2({
+  artifacts,
+  activeId,
+  onSwitch,
+  onClose,
+  onReorder,
+  config
+}) {
+  const scrollContainerRef = React20.useRef(null);
+  const [canScrollLeft, setCanScrollLeft] = React20.useState(false);
+  const [canScrollRight, setCanScrollRight] = React20.useState(false);
+  const [showAllPanel, setShowAllPanel] = React20.useState(false);
+  const allPanelRef = React20.useRef(null);
+  const [dragState, setDragState] = React20.useState({ draggingId: null, dragOverId: null, dragStartX: 0, isDragging: false });
+  const checkScrollState = React20.useCallback(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+    setCanScrollLeft(container.scrollLeft > 2);
+    setCanScrollRight(container.scrollLeft < container.scrollWidth - container.clientWidth - 2);
+  }, []);
+  React20.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]);
+  React20.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 = React20.useCallback((direction) => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+    const scrollAmount = 200;
+    container.scrollBy({
+      left: direction === "left" ? -scrollAmount : scrollAmount,
+      behavior: "smooth"
+    });
+  }, []);
+  const handleDragStart = React20.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 = React20.useCallback((e, artifactId) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    setDragState((prev) => ({ ...prev, dragOverId: artifactId }));
+  }, []);
+  const handleDragEnd = React20.useCallback(() => {
+    setDragState({ draggingId: null, dragOverId: null, dragStartX: 0, isDragging: false });
+  }, []);
+  const handleDrop = React20.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 = React20.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { size: 14 })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(TypeIcon, { size: 12, className: cn2("flex-shrink-0", isActive ? typeConf.color : "") }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "max-w-[120px] truncate", children: artifact.title }),
+                onClose && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.X, { size: 10 })
+                  }
+                )
+              ]
+            },
+            artifact.id
+          );
+        })
+      }
+    ),
+    canScrollRight && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 14 })
+      }
+    ),
+    artifacts.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-shrink-0", ref: allPanelRef, children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.LayoutGrid, { size: 14 })
+        }
+      ),
+      showAllPanel && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 border-b border-zinc-800 agent-sdk-light:border-zinc-200", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-medium text-zinc-400 agent-sdk-light:text-zinc-600", children: [
+          "\u5168\u90E8\u4EA7\u7269 (",
+          artifacts.length,
+          ")"
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ArtifactThumbnail, { artifact, config }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate font-medium", children: artifact.title }),
+                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.X, { size: 12 })
+                  }
+                )
+              ]
+            },
+            artifact.id
+          );
+        }) })
+      ] })
+    ] })
+  ] });
+});
 var ArtifactViewer = React20.memo(function ArtifactViewer2({
   artifact,
   isOpen,
@@ -18826,41 +20817,127 @@ var ArtifactViewer = React20.memo(function ArtifactViewer2({
   defaultView = "preview",
   isFullscreen,
   onFullscreenToggle,
-  embedded = false
+  embedded = false,
+  artifacts = [],
+  activeArtifactId,
+  onSwitchArtifact,
+  onCloseArtifact,
+  onReorderArtifacts,
+  onContentChange,
+  onSave
 }) {
   const [viewMode, setViewMode] = React20.useState(defaultView);
+  const [isEditing, setIsEditing] = React20.useState(false);
+  const [editContent, setEditContent] = React20.useState("");
+  const [undoStack, setUndoStack] = React20.useState([]);
+  const [redoStack, setRedoStack] = React20.useState([]);
   React20.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]);
+  React20.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__ */ jsxRuntime.jsx(
+          MarkdownEditor,
+          {
+            content: editContent,
+            onChange: handleEditChange,
+            config
+          }
+        );
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        CodeEditor,
+        {
+          code: editContent,
+          language: artifact.language || artifact.type,
+          onChange: handleEditChange
+        }
+      );
+    }
+    if (artifact.type === "image") {
+      return /* @__PURE__ */ jsxRuntime.jsx(ImageArtifactPreview, { content: displayContent, metadata: artifact.metadata, config });
+    }
+    if (artifact.type === "video") {
+      return /* @__PURE__ */ jsxRuntime.jsx(VideoArtifactPreview, { content: displayContent, metadata: artifact.metadata, config });
+    }
     if (viewMode === "code" || !canPreview) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         CodeBlock3,
         {
-          code: artifact.content,
+          code: displayContent,
           language: artifact.language || artifact.type
         }
       );
     }
     switch (artifact.type) {
       case "html":
-        return /* @__PURE__ */ jsxRuntime.jsx(HtmlPreview3, { content: artifact.content });
+      case "svg":
+        return /* @__PURE__ */ jsxRuntime.jsx(HtmlPreview3, { content: displayContent });
       case "markdown":
-        return /* @__PURE__ */ jsxRuntime.jsx(MarkdownPreview, { content: artifact.content, config });
+        return /* @__PURE__ */ jsxRuntime.jsx(MarkdownPreview, { content: displayContent, config });
       default:
         return /* @__PURE__ */ jsxRuntime.jsx(
           CodeBlock3,
           {
-            code: artifact.content,
+            code: displayContent,
             language: artifact.language || artifact.type
           }
         );
@@ -18883,26 +20960,79 @@ var ArtifactViewer = React20.memo(function ArtifactViewer2({
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-          onFullscreenToggle && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Minimize2, { size: 14 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, { size: 14 })
-            }
-          ),
-          canPreview && /* @__PURE__ */ jsxRuntime.jsx(
-            ViewTabs,
-            {
-              activeView: viewMode,
-              onViewChange: (v) => setViewMode(v),
-              views: [
-                { id: "preview", label: "Preview", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { size: 12 }) },
-                { id: "code", label: "Code", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Code2, { size: 12 }) }
-              ]
-            }
-          ),
+          isEditing ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Undo2, { size: 14 })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Redo2, { size: 14 })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Save, { size: 12 }),
+                  "\u4FDD\u5B58"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            canEdit && onContentChange && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Pencil, { size: 14 })
+              }
+            ),
+            onFullscreenToggle && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Minimize2, { size: 14 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, { size: 14 })
+              }
+            ),
+            canPreview && /* @__PURE__ */ jsxRuntime.jsx(
+              ViewTabs,
+              {
+                activeView: viewMode,
+                onViewChange: (v) => setViewMode(v),
+                views: [
+                  { id: "preview", label: "Preview", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { size: 12 }) },
+                  { id: "code", label: "Code", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Code2, { size: 12 }) }
+                ]
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
@@ -18917,6 +21047,16 @@ var ArtifactViewer = React20.memo(function ArtifactViewer2({
           )
         ] })
       ] }),
+      onSwitchArtifact && /* @__PURE__ */ jsxRuntime.jsx(
+        ArtifactTabs,
+        {
+          artifacts,
+          activeId: activeArtifactId ?? artifact.id,
+          onSwitch: onSwitchArtifact,
+          onClose: onCloseArtifact,
+          onReorder: onReorderArtifacts
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden", children: renderContent() })
     ] });
   }
@@ -18962,6 +21102,145 @@ var ArtifactViewer = React20.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 text-xs text-zinc-400", children: [
   /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-zinc-200 truncate max-w-[60%]", children: value ?? "-" })
@@ -19293,7 +21572,9 @@ function ChatInputArea({
   onSend,
   onStop,
   isStreaming,
-  config
+  config,
+  activeArtifact,
+  onDetachArtifact
 }) {
   const textareaRef = React20.useRef(null);
   const fileInputRef = React20.useRef(null);
@@ -19374,6 +21655,20 @@ function ChatInputArea({
   };
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-zinc-950 px-4 py-4 flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-3xl mx-auto", children: [
     /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 px-4 pt-3 pb-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-2.5 py-1 bg-zinc-800/80 rounded-lg text-xs", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileCode, { size: 12, className: "text-[#d8ff00] flex-shrink-0" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-zinc-400", children: "\u5173\u8054\u4EA7\u7269\uFF1A" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-zinc-200 font-medium max-w-[200px] truncate", children: activeArtifact.title }),
+        onDetachArtifact && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Unlink, { size: 10 })
+          }
+        )
+      ] }) }),
       images.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-3 p-4 pb-2", children: images.map((img, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "img",
@@ -19538,6 +21833,188 @@ var DragHandle = React20__namespace.default.memo(function DragHandle2({
     }
   );
 });
+var artifactTypeIconMap = {
+  html: lucideReact.Globe,
+  svg: lucideReact.Globe,
+  markdown: lucideReact.FileText,
+  json: lucideReact.FileJson,
+  code: lucideReact.FileCode,
+  text: lucideReact.FileText,
+  image: lucideReact.FileImage,
+  video: lucideReact.Video
+};
+var ArtifactBarItemThumbnail = React20.memo(function ArtifactBarItemThumbnail2({
+  artifact,
+  config
+}) {
+  const TypeIcon = artifactTypeIconMap[artifact.type] || lucideReact.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(TypeIcon, { size: 18, className: "text-zinc-400 agent-sdk-light:text-zinc-500" }) });
+});
+var ArtifactBarMiniThumbnail = React20.memo(function ArtifactBarMiniThumbnail2({
+  artifact,
+  config
+}) {
+  const TypeIcon = artifactTypeIconMap[artifact.type] || lucideReact.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(TypeIcon, { size: 10, className: "text-zinc-400" }) });
+});
+var ArtifactBar = React20__namespace.default.memo(function ArtifactBar2({
+  artifacts,
+  onOpenArtifact,
+  config
+}) {
+  const [expanded, setExpanded] = React20.useState(false);
+  const barRef = React20.useRef(null);
+  React20.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__ */ jsxRuntime.jsxs("div", { ref: barRef, className: "relative flex-shrink-0 mx-auto max-w-md", children: [
+    expanded && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LayoutGrid, { size: 14, className: "text-[#d8ff00]" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-zinc-200 agent-sdk-light:text-zinc-800", children: "\u5168\u90E8\u4EA7\u7269" }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 16 })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 grid grid-cols-1 gap-1", children: artifacts.map((artifact) => {
+        return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ArtifactBarItemThumbnail, { artifact, config }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { size: 14, className: "text-[#d8ff00]" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-medium text-zinc-300 agent-sdk-light:text-zinc-700", children: [
+              artifacts.length,
+              " \u4E2A\u4EA7\u7269"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 flex-1 min-w-0", children: [
+            imageCount > 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.FileImage, { size: 10 }),
+              " ",
+              imageCount
+            ] }),
+            codeCount > 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.FileCode, { size: 10 }),
+              " ",
+              codeCount
+            ] }),
+            docCount > 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.FileText, { size: 10 }),
+              " ",
+              docCount
+            ] }),
+            videoCount > 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Video, { size: 10 }),
+              " ",
+              videoCount
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center -space-x-1.5", children: [
+            artifacts.slice(0, 4).map((artifact) => {
+              return /* @__PURE__ */ jsxRuntime.jsx(ArtifactBarMiniThumbnail, { artifact, config }, artifact.id);
+            }),
+            artifacts.length > 4 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: "text-[9px] text-zinc-400", children: [
+              "+",
+              artifacts.length - 4
+            ] }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { size: 14, className: cn2(
+            "text-zinc-500 transition-transform flex-shrink-0",
+            expanded && "rotate-180"
+          ) })
+        ]
+      }
+    ) })
+  ] });
+});
 var AgentChat = React20__namespace.default.forwardRef(({
   agentId,
   projectId,
@@ -19580,7 +22057,7 @@ var AgentChat = React20__namespace.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] = React20.useState(true);
   const [messagesLoading, setMessagesLoading] = React20.useState(false);
   const [collapsed, setCollapsed] = React20.useState(false);
@@ -19592,7 +22069,23 @@ var AgentChat = React20__namespace.default.forwardRef(({
   const lastUserMessageRef = React20.useRef("");
   const [shareModalOpen, setShareModalOpen] = React20.useState(false);
   const [shareSession, setShareSession] = React20.useState(null);
-  const [currentArtifact, setCurrentArtifact] = React20.useState(null);
+  const artifactList = React20.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] = React20.useState(false);
   const [artifactPanelWidth, setArtifactPanelWidth] = React20.useState(50);
   const [isDragging, setIsDragging] = React20.useState(false);
@@ -19618,7 +22111,11 @@ var AgentChat = React20__namespace.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 = () => {
@@ -19640,38 +22137,52 @@ var AgentChat = React20__namespace.default.forwardRef(({
     setShowItemTime(showItemTime);
   }, [showItemTime]);
   const handleOpenArtifact = React20.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 = React20.useCallback(() => {
-    setCurrentArtifact(null);
+    setActiveArtifact(null);
     setIsArtifactFullscreen(false);
-  }, []);
+  }, [setActiveArtifact]);
   React20.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 = React20.useCallback(() => {
     setIsArtifactFullscreen((prev) => !prev);
   }, []);
@@ -19873,8 +22384,9 @@ var AgentChat = React20__namespace.default.forwardRef(({
       addSession(s);
       setCurrentSession(s);
       useAgentStore.getState().setMessages([]);
+      clearArtifacts();
     }
-  }, [projectId, agentId]);
+  }, [projectId, agentId, clearArtifacts]);
   const handlePrompt = React20.useCallback(async (p) => {
     await handleNew();
     setInput(p);
@@ -19885,10 +22397,29 @@ var AgentChat = React20__namespace.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 = React20.useCallback(async (id) => {
     toast("\u5220\u9664\u6B64\u5BF9\u8BDD\uFF1F", {
       action: {
@@ -19984,8 +22515,14 @@ var AgentChat = React20__namespace.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 = React20.useCallback(async (content) => {
     if (!content.trim()) return;
     if (!currentSession) return;
@@ -20150,6 +22687,13 @@ var AgentChat = React20__namespace.default.forwardRef(({
                         onOpenArtifact: handleOpenArtifact
                       }
                     ),
+                    artifactList.length > 0 && !currentArtifact && /* @__PURE__ */ jsxRuntime.jsx(
+                      ArtifactBar,
+                      {
+                        artifacts: artifactList,
+                        onOpenArtifact: (id) => setActiveArtifact(id)
+                      }
+                    ),
                     !hideInput && /* @__PURE__ */ jsxRuntime.jsx(
                       ChatInputArea,
                       {
@@ -20160,7 +22704,9 @@ var AgentChat = React20__namespace.default.forwardRef(({
                         onSend: handleSend,
                         onStop: handleStop,
                         isStreaming: isCurrentSessionStreaming,
-                        config
+                        config,
+                        activeArtifact,
+                        onDetachArtifact: () => setActiveArtifact(null)
                       }
                     )
                   ]
@@ -20199,7 +22745,36 @@ var AgentChat = React20__namespace.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");
+                          }
+                        }
                       }
                     )
                   ]
@@ -20709,6 +23284,7 @@ exports.VoiceWaveform = VoiceWaveform;
 exports.agentService = agentService;
 exports.agentSkillService = agentSkillService;
 exports.agentToolService = agentToolService;
+exports.artifactService = artifactService;
 exports.calculateReconnectDelay = calculateReconnectDelay;
 exports.componentService = componentService;
 exports.confirmAllPendingToolCalls = confirmAllPendingToolCalls;
@@ -20764,8 +23340,14 @@ exports.shareService = shareService;
 exports.templateService = templateService;
 exports.toolCallService = toolCallService;
 exports.uploadOSS = uploadOSS;
+exports.useActiveArtifact = useActiveArtifact;
+exports.useActiveArtifactId = useActiveArtifactId;
 exports.useActiveSubAgent = useActiveSubAgent;
 exports.useAgentStore = useAgentStore;
+exports.useArtifactList = useArtifactList;
+exports.useArtifactOrder = useArtifactOrder;
+exports.useArtifacts = useArtifacts;
+exports.useCanvasBridge = useCanvasBridge;
 exports.useChatError = useChatError;
 exports.useChatUI = useChatUI;
 exports.useComponent = useComponent;