@malette/agent-sdk 0.1.3-beta.12 → 0.1.3-beta.13

package/dist/index.js

@@ -499,10 +499,16 @@ var artifactService = {
   /**
    * 更新产物内容（用户编辑后保存）
    */
-  updateContent: async (artifactId, content) => {
+  updateContent: async (artifactId, content, options) => {
     return fetcher(`${API_BASE}/artifacts/${artifactId}/content`, {
       method: "PUT",
-      body: JSON.stringify({ artifactId, content })
+      body: JSON.stringify({
+        artifactId,
+        content,
+        ...options?.type && { type: options.type },
+        ...options?.language !== void 0 && { language: options.language },
+        ...options?.title !== void 0 && { title: options.title }
+      })
     });
   },
   /**
@@ -1707,6 +1713,25 @@ var useAgentStore = zustand.create()(
         false,
         "updateArtifactVisibility"
       ),
+      updateArtifactType: (artifactId, type, language) => set(
+        (state) => {
+          const existing = state.artifacts[artifactId];
+          if (!existing) return state;
+          return {
+            artifacts: {
+              ...state.artifacts,
+              [artifactId]: {
+                ...existing,
+                type,
+                language: language ?? existing.language,
+                gmtModified: (/* @__PURE__ */ new Date()).toISOString()
+              }
+            }
+          };
+        },
+        false,
+        "updateArtifactType"
+      ),
       // ============ 复合操作 ============
       startNewChat: (sessionId) => {
         set(
@@ -7809,6 +7834,104 @@ var resolveAssetForDisplay = async (asset, config) => {
   }
   return null;
 };
+var resolveHtmlAssetUrls = (html2) => {
+  const origin = typeof window !== "undefined" ? window.location.origin : "";
+  const resolveSrc = (src, isVideo) => {
+    if (!src.trim()) return src;
+    if (/^(data:|blob:|javascript:|#)/i.test(src)) return src;
+    if (src.includes("${")) return src;
+    if (/^https?:/i.test(src)) {
+      if (src.includes("industryai")) {
+        return src.split("?")[0];
+      }
+      return src;
+    }
+    const resolved = isVideo ? getHDImageUrl(src) : getImageUrl(src);
+    return resolved.startsWith("http") ? resolved : `${origin}${resolved}`;
+  };
+  const processHtmlPart = (part) => {
+    let result = part.replace(
+      /(<(?:img|video|source)\s[^>]*?\bsrc\s*=\s*["'])([^"']*)(["'])/gi,
+      (match, prefix, src, suffix) => {
+        const tagMatch = match.match(/^<(\w+)/i);
+        const tag = tagMatch?.[1]?.toLowerCase() ?? "";
+        const isVideo = tag === "video" || tag === "source";
+        return `${prefix}${resolveSrc(src, isVideo)}${suffix}`;
+      }
+    );
+    result = result.replace(
+      /(<video\s[^>]*?\bposter\s*=\s*["'])([^"']*)(["'])/gi,
+      (match, prefix, src, suffix) => `${prefix}${resolveSrc(src, false)}${suffix}`
+    );
+    return result;
+  };
+  const parts = html2.split(/(<script\b[\s\S]*?<\/script>)/gi);
+  return parts.map((part, i) => i % 2 === 1 ? part : processHtmlPart(part)).join("");
+};
+var resolveHtmlAssetUrlsAsync = async (html2, config) => {
+  if (!config?.asset) return resolveHtmlAssetUrls(html2);
+  const srcPattern = /(<(?:img|video|source)\s[^>]*?\bsrc\s*=\s*["'])([^"']*)(["'])/gi;
+  const posterPattern = /(<video\s[^>]*?\bposter\s*=\s*["'])([^"']*)(["'])/gi;
+  const scriptSplitPattern = /(<script\b[\s\S]*?<\/script>)/gi;
+  const parts = html2.split(scriptSplitPattern);
+  const nonScriptHtml = parts.filter((_, i) => i % 2 === 0).join("");
+  const urlsToResolve = /* @__PURE__ */ new Map();
+  const collectUrl = (src) => {
+    if (!src.trim()) return;
+    if (/^(data:|blob:|javascript:|#)/i.test(src)) return;
+    if (src.includes("${")) return;
+    urlsToResolve.set(src, src);
+  };
+  let match;
+  const srcRe = new RegExp(srcPattern.source, srcPattern.flags);
+  while ((match = srcRe.exec(nonScriptHtml)) !== null) {
+    collectUrl(match[2]);
+  }
+  const posterRe = new RegExp(posterPattern.source, posterPattern.flags);
+  while ((match = posterRe.exec(nonScriptHtml)) !== null) {
+    collectUrl(match[2]);
+  }
+  await Promise.all(
+    Array.from(urlsToResolve.keys()).map(async (src) => {
+      const tagMatch = nonScriptHtml.match(
+        new RegExp(`<(img|video|source)[^>]*(?:src|poster)=["']${src.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}["']`, "i")
+      );
+      const tag = tagMatch?.[1]?.toLowerCase() ?? "";
+      const isVideo = tag === "video" || tag === "source";
+      const type = isVideo ? "video" : "image";
+      const isHttp = /^https?:/i.test(src);
+      const asset = createAssetFromSource({
+        fileId: !isHttp ? src : void 0,
+        fileUrl: isHttp ? src : void 0,
+        type
+      });
+      if (!asset) return;
+      const resolved = await resolveAssetForDisplay(asset, config);
+      if (resolved) {
+        urlsToResolve.set(src, resolved.url);
+      }
+    })
+  );
+  const processedParts = parts.map((part, i) => {
+    if (i % 2 === 1) return part;
+    let result = part.replace(
+      /(<(?:img|video|source)\s[^>]*?\bsrc\s*=\s*["'])([^"']*)(["'])/gi,
+      (m, prefix, src, suffix) => {
+        const resolved = urlsToResolve.get(src);
+        return resolved && resolved !== src ? `${prefix}${resolved}${suffix}` : m;
+      }
+    );
+    result = result.replace(
+      /(<video\s[^>]*?\bposter\s*=\s*["'])([^"']*)(["'])/gi,
+      (m, prefix, src, suffix) => {
+        const resolved = urlsToResolve.get(src);
+        return resolved && resolved !== src ? `${prefix}${resolved}${suffix}` : m;
+      }
+    );
+    return result;
+  });
+  return processedParts.join("");
+};
 var ComponentContext = React16.createContext(void 0);
 var ComponentProvider = ({
   components = {},
@@ -16260,10 +16383,10 @@ var Observer = class {
         });
       }
     };
-    this.custom = (jsx66, data) => {
+    this.custom = (jsx68, data) => {
       const id = (data == null ? void 0 : data.id) || toastsCounter++;
       this.create({
-        jsx: jsx66(id),
+        jsx: jsx68(id),
         id,
         ...data
       });
@@ -21772,15 +21895,24 @@ var CodeBlock3 = React16.memo(function CodeBlock4({
     ] }, i)) }) }) })
   ] });
 });
-var HtmlPreview3 = React16.memo(function HtmlPreview4({ content }) {
+var HtmlPreview3 = React16.memo(function HtmlPreview4({
+  content,
+  config
+}) {
   const [scale, setScale] = React16.useState(1);
   const [deviceMode, setDeviceMode] = React16.useState("responsive");
   const [isLoading, setIsLoading] = React16.useState(true);
   const [iframeHeight, setIframeHeight] = React16.useState(600);
   const iframeRef = React16.useRef(null);
   const containerRef = React16.useRef(null);
-  const blobUrl = React16.useMemo(() => {
-    const styleInjection = `
+  const [blobUrl, setBlobUrl] = React16.useState("");
+  React16.useEffect(() => {
+    let active = true;
+    let currentUrl = "";
+    const buildBlobUrl = async () => {
+      const processed = config?.asset ? await resolveHtmlAssetUrlsAsync(content, config) : resolveHtmlAssetUrls(content);
+      if (!active) return;
+      const styleInjection = `
 <style>
   html, body {
     margin: 0;
@@ -21794,24 +21926,26 @@ var HtmlPreview3 = React16.memo(function HtmlPreview4({ content }) {
   }
 </style>
 `;
-    let modifiedContent = content;
-    if (content.includes("<head>")) {
-      modifiedContent = content.replace("<head>", "<head>" + styleInjection);
-    } else if (content.includes("<html>")) {
-      modifiedContent = content.replace("<html>", "<html><head>" + styleInjection + "</head>");
-    } else if (content.includes("<!DOCTYPE") || content.includes("<!doctype")) {
-      modifiedContent = content.replace(/(<!DOCTYPE[^>]*>|<!doctype[^>]*>)/i, "$1<html><head>" + styleInjection + "</head><body>") + "</body></html>";
-    } else {
-      modifiedContent = `<!DOCTYPE html><html><head>${styleInjection}</head><body>${content}</body></html>`;
-    }
-    const blob = new Blob([modifiedContent], { type: "text/html" });
-    return URL.createObjectURL(blob);
-  }, [content]);
-  React16.useEffect(() => {
+      let modifiedContent = processed;
+      if (processed.includes("<head>")) {
+        modifiedContent = processed.replace("<head>", "<head>" + styleInjection);
+      } else if (processed.includes("<html>")) {
+        modifiedContent = processed.replace("<html>", "<html><head>" + styleInjection + "</head>");
+      } else if (processed.includes("<!DOCTYPE") || processed.includes("<!doctype")) {
+        modifiedContent = processed.replace(/(<!DOCTYPE[^>]*>|<!doctype[^>]*>)/i, "$1<html><head>" + styleInjection + "</head><body>") + "</body></html>";
+      } else {
+        modifiedContent = `<!DOCTYPE html><html><head>${styleInjection}</head><body>${processed}</body></html>`;
+      }
+      const blob = new Blob([modifiedContent], { type: "text/html" });
+      currentUrl = URL.createObjectURL(blob);
+      setBlobUrl(currentUrl);
+    };
+    buildBlobUrl();
     return () => {
-      URL.revokeObjectURL(blobUrl);
+      active = false;
+      if (currentUrl) URL.revokeObjectURL(currentUrl);
     };
-  }, [blobUrl]);
+  }, [content, config]);
   const deviceConfig = {
     desktop: { width: "100%", maxWidth: "1400px", height: 800, icon: lucideReact.Monitor, label: "Desktop" },
     tablet: { width: "768px", height: 1024, icon: lucideReact.Tablet, label: "Tablet" },
@@ -21966,7 +22100,7 @@ var HtmlPreview3 = React16.memo(function HtmlPreview4({ content }) {
               },
               children: [
                 deviceMode === "mobile" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-6 bg-zinc-900 agent-sdk-light:bg-zinc-200 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-16 h-4 bg-zinc-800 agent-sdk-light:bg-zinc-300 rounded-full" }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(
+                blobUrl && /* @__PURE__ */ jsxRuntime.jsx(
                   "iframe",
                   {
                     ref: iframeRef,
@@ -23863,6 +23997,237 @@ function ArtifactDeleteButton({
     modal
   ] });
 }
+var CHANGEABLE_TYPES = ["code", "html", "svg", "markdown", "json", "text"];
+function ArtifactTypeSelector({
+  currentType,
+  currentLanguage,
+  onTypeChange,
+  disabled = false
+}) {
+  const [isOpen, setIsOpen] = React16.useState(false);
+  const [isChanging, setIsChanging] = React16.useState(false);
+  const dropdownRef = React16.useRef(null);
+  const typeConfig2 = artifactTypeConfig[currentType] || artifactTypeConfig.text;
+  const isChangeable = CHANGEABLE_TYPES.includes(currentType);
+  React16.useEffect(() => {
+    if (!isOpen) return;
+    const handleClickOutside = (e) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isOpen]);
+  const handleSelectType = React16.useCallback(async (newType) => {
+    if (newType === currentType || isChanging) return;
+    setIsChanging(true);
+    try {
+      await onTypeChange(newType);
+      setIsOpen(false);
+    } finally {
+      setIsChanging(false);
+    }
+  }, [currentType, isChanging, onTypeChange]);
+  if (!isChangeable) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-7 h-7 rounded-lg ${typeConfig2.bgColor} flex items-center justify-center flex-shrink-0`, children: /* @__PURE__ */ jsxRuntime.jsx(typeConfig2.icon, { size: 14, className: typeConfig2.color }) });
+  }
+  const availableTypes = CHANGEABLE_TYPES.filter((t) => t !== currentType);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", ref: dropdownRef, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: () => !disabled && !isChanging && setIsOpen(!isOpen),
+        disabled: disabled || isChanging,
+        className: cn3(
+          "flex items-center gap-1 p-1 rounded-lg transition-colors",
+          "hover:bg-zinc-800 agent-sdk-light:hover:bg-zinc-200",
+          (disabled || isChanging) && "opacity-50 cursor-not-allowed"
+        ),
+        title: "\u5207\u6362\u4EA7\u7269\u7C7B\u578B",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-7 h-7 rounded-lg ${typeConfig2.bgColor} flex items-center justify-center flex-shrink-0`, children: isChanging ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 14, className: `${typeConfig2.color} animate-spin` }) : /* @__PURE__ */ jsxRuntime.jsx(typeConfig2.icon, { size: 14, className: typeConfig2.color }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 10, className: "text-zinc-500" })
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute left-0 top-full mt-1 z-50 w-44 bg-zinc-900 agent-sdk-light:bg-white border border-zinc-700/50 agent-sdk-light:border-zinc-200 rounded-lg shadow-xl overflow-hidden", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 border-b border-zinc-800/50 agent-sdk-light:border-zinc-100", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-medium text-zinc-500 agent-sdk-light:text-zinc-400", children: "\u5207\u6362\u7C7B\u578B" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-1", children: availableTypes.map((type) => {
+        const config = artifactTypeConfig[type];
+        const TypeIcon = config.icon;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: () => handleSelectType(type),
+            disabled: isChanging,
+            className: cn3(
+              "flex items-center gap-2.5 px-2 py-1.5 text-xs rounded-md transition-all w-full text-left",
+              "text-zinc-300 agent-sdk-light:text-zinc-700",
+              "hover:bg-zinc-800/70 agent-sdk-light:hover:bg-zinc-100",
+              isChanging && "opacity-50 cursor-not-allowed"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn3("w-5 h-5 rounded flex items-center justify-center flex-shrink-0", config.bgColor), children: /* @__PURE__ */ jsxRuntime.jsx(TypeIcon, { size: 11, className: config.color }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: config.label })
+            ]
+          },
+          type
+        );
+      }) })
+    ] })
+  ] });
+}
+var COMMON_LANGUAGES = [
+  "javascript",
+  "typescript",
+  "python",
+  "java",
+  "go",
+  "rust",
+  "c",
+  "cpp",
+  "csharp",
+  "ruby",
+  "php",
+  "swift",
+  "kotlin",
+  "sql",
+  "shell",
+  "html",
+  "css",
+  "json",
+  "yaml",
+  "xml",
+  "markdown"
+];
+function ArtifactLanguageSelector({
+  currentLanguage,
+  onLanguageChange,
+  disabled = false
+}) {
+  const [isOpen, setIsOpen] = React16.useState(false);
+  const [isChanging, setIsChanging] = React16.useState(false);
+  const [search, setSearch] = React16.useState("");
+  const dropdownRef = React16.useRef(null);
+  const inputRef = React16.useRef(null);
+  React16.useEffect(() => {
+    if (!isOpen) return;
+    const handleClickOutside = (e) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+        setIsOpen(false);
+        setSearch("");
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isOpen]);
+  React16.useEffect(() => {
+    if (isOpen && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isOpen]);
+  const handleSelect = React16.useCallback(async (language) => {
+    if (language === currentLanguage || isChanging) return;
+    setIsChanging(true);
+    try {
+      await onLanguageChange(language);
+      setIsOpen(false);
+      setSearch("");
+    } finally {
+      setIsChanging(false);
+    }
+  }, [currentLanguage, isChanging, onLanguageChange]);
+  const handleKeyDown = React16.useCallback((e) => {
+    if (e.key === "Enter" && search.trim()) {
+      e.preventDefault();
+      handleSelect(search.trim().toLowerCase());
+    } else if (e.key === "Escape") {
+      setIsOpen(false);
+      setSearch("");
+    }
+  }, [search, handleSelect]);
+  const filteredLanguages = search.trim() ? COMMON_LANGUAGES.filter((lang) => lang.includes(search.trim().toLowerCase())) : COMMON_LANGUAGES;
+  const showCustomOption = search.trim() && !COMMON_LANGUAGES.includes(search.trim().toLowerCase()) && search.trim().toLowerCase() !== currentLanguage;
+  if (!currentLanguage) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", ref: dropdownRef, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => !disabled && !isChanging && setIsOpen(!isOpen),
+        disabled: disabled || isChanging,
+        className: cn3(
+          "text-zinc-500 agent-sdk-light:text-zinc-500 ml-1 text-xs transition-colors",
+          "hover:text-zinc-300 agent-sdk-light:hover:text-zinc-700",
+          (disabled || isChanging) && "opacity-50 cursor-not-allowed",
+          !disabled && !isChanging && "cursor-pointer"
+        ),
+        children: isChanging ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 10, className: "animate-spin" }),
+          currentLanguage
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          "\u2022 ",
+          currentLanguage
+        ] })
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute left-0 top-full mt-1 z-50 w-48 bg-zinc-900 agent-sdk-light:bg-white border border-zinc-700/50 agent-sdk-light:border-zinc-200 rounded-lg shadow-xl overflow-hidden", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 border-b border-zinc-800/50 agent-sdk-light:border-zinc-100", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "text",
+          value: search,
+          onChange: (e) => setSearch(e.target.value),
+          onKeyDown: handleKeyDown,
+          placeholder: "\u641C\u7D22\u8BED\u8A00...",
+          className: "w-full px-2 py-1.5 text-xs bg-zinc-800 agent-sdk-light:bg-zinc-100 text-zinc-200 agent-sdk-light:text-zinc-800 rounded-md border border-zinc-700/50 agent-sdk-light:border-zinc-200 outline-none focus:border-zinc-500 agent-sdk-light:focus:border-zinc-400 placeholder-zinc-600 agent-sdk-light:placeholder-zinc-400"
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-h-48 overflow-y-auto p-1", children: [
+        showCustomOption && /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: () => handleSelect(search.trim().toLowerCase()),
+            disabled: isChanging,
+            className: cn3(
+              "flex items-center justify-between px-2 py-1.5 text-xs rounded-md transition-all w-full text-left",
+              "text-zinc-300 agent-sdk-light:text-zinc-700",
+              "hover:bg-zinc-800/70 agent-sdk-light:hover:bg-zinc-100",
+              isChanging && "opacity-50 cursor-not-allowed"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                '"',
+                search.trim().toLowerCase(),
+                '"'
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-zinc-600 agent-sdk-light:text-zinc-400", children: "\u56DE\u8F66\u786E\u8BA4" })
+            ]
+          }
+        ),
+        filteredLanguages.map((lang) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: () => handleSelect(lang),
+            disabled: isChanging,
+            className: cn3(
+              "flex items-center justify-between px-2 py-1.5 text-xs rounded-md transition-all w-full text-left",
+              lang === currentLanguage ? "text-zinc-100 agent-sdk-light:text-zinc-900 bg-zinc-800/50 agent-sdk-light:bg-zinc-100" : "text-zinc-300 agent-sdk-light:text-zinc-700 hover:bg-zinc-800/70 agent-sdk-light:hover:bg-zinc-100",
+              isChanging && "opacity-50 cursor-not-allowed"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: lang }),
+              lang === currentLanguage && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { size: 12, className: "text-green-400 agent-sdk-light:text-green-600 flex-shrink-0" })
+            ]
+          },
+          lang
+        )),
+        filteredLanguages.length === 0 && !showCustomOption && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-3 text-xs text-zinc-600 agent-sdk-light:text-zinc-400 text-center", children: "\u65E0\u5339\u914D\u7ED3\u679C" })
+      ] })
+    ] })
+  ] });
+}
 var ArtifactViewer = React16.memo(function ArtifactViewer2({
   artifact,
   isOpen,
@@ -23880,13 +24245,20 @@ var ArtifactViewer = React16.memo(function ArtifactViewer2({
   onContentChange,
   onSave,
   onVisibilityChange,
-  onDelete
+  onDelete,
+  onTypeChange,
+  onLanguageChange,
+  onTitleChange
 }) {
   const [viewMode, setViewMode] = React16.useState(defaultView);
   const [isEditing, setIsEditing] = React16.useState(false);
   const [editContent, setEditContent] = React16.useState("");
   const [undoStack, setUndoStack] = React16.useState([]);
   const [redoStack, setRedoStack] = React16.useState([]);
+  const [isEditingTitle, setIsEditingTitle] = React16.useState(false);
+  const [editingTitle, setEditingTitle] = React16.useState("");
+  const [isSavingTitle, setIsSavingTitle] = React16.useState(false);
+  const titleInputRef = React16.useRef(null);
   React16.useEffect(() => {
     if (artifact) {
       if (artifact.type === "html" || artifact.type === "markdown" || artifact.type === "svg") {
@@ -23898,8 +24270,9 @@ var ArtifactViewer = React16.memo(function ArtifactViewer2({
       setEditContent(artifact.content);
       setUndoStack([]);
       setRedoStack([]);
+      setIsEditingTitle(false);
     }
-  }, [artifact?.id]);
+  }, [artifact?.id, artifact?.type]);
   React16.useEffect(() => {
     if (artifact && !isEditing) {
       setEditContent(artifact.content);
@@ -23912,6 +24285,7 @@ var ArtifactViewer = React16.memo(function ArtifactViewer2({
   const handleStartEdit = () => {
     setEditContent(artifact.content);
     setUndoStack([artifact.content]);
+    handleStartEditTitle();
     setRedoStack([]);
     setIsEditing(true);
     setViewMode("code");
@@ -23946,6 +24320,43 @@ var ArtifactViewer = React16.memo(function ArtifactViewer2({
     setEditContent(artifact.content);
     setIsEditing(false);
   };
+  const handleStartEditTitle = React16.useCallback(() => {
+    if (!onTitleChange || isEditing || isSavingTitle) return;
+    setEditingTitle(artifact.title);
+    setIsEditingTitle(true);
+  }, [onTitleChange, isEditing, isSavingTitle, artifact.title]);
+  const handleSaveTitle = React16.useCallback(async () => {
+    const trimmed = editingTitle.trim();
+    if (!trimmed || trimmed === artifact.title) {
+      setIsEditingTitle(false);
+      return;
+    }
+    setIsSavingTitle(true);
+    try {
+      await onTitleChange?.(artifact.id, trimmed);
+    } finally {
+      setIsSavingTitle(false);
+      setIsEditingTitle(false);
+    }
+  }, [editingTitle, artifact.title, artifact.id, onTitleChange]);
+  const handleCancelEditTitle = React16.useCallback(() => {
+    setIsEditingTitle(false);
+  }, []);
+  const handleTitleKeyDown = React16.useCallback((e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleSaveTitle();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      handleCancelEditTitle();
+    }
+  }, [handleSaveTitle, handleCancelEditTitle]);
+  React16.useEffect(() => {
+    if (isEditingTitle && titleInputRef.current) {
+      titleInputRef.current.focus();
+      titleInputRef.current.select();
+    }
+  }, [isEditingTitle]);
   const displayContent = isEditing ? editContent : artifact.content;
   const renderContent = () => {
     if (isEditing) {
@@ -23986,7 +24397,7 @@ var ArtifactViewer = React16.memo(function ArtifactViewer2({
     switch (artifact.type) {
       case "html":
       case "svg":
-        return /* @__PURE__ */ jsxRuntime.jsx(HtmlPreview3, { content: displayContent });
+        return /* @__PURE__ */ jsxRuntime.jsx(HtmlPreview3, { content: displayContent, config });
       case "markdown":
         return /* @__PURE__ */ jsxRuntime.jsx(MarkdownPreview, { content: displayContent, config });
       default:
@@ -24003,15 +24414,56 @@ var ArtifactViewer = React16.memo(function ArtifactViewer2({
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full flex flex-col bg-zinc-900 agent-sdk-light:bg-white relative", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-zinc-800/50 agent-sdk-light:border-zinc-200 bg-zinc-900/95 agent-sdk-light:bg-zinc-50 backdrop-blur-sm flex-shrink-0", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-7 h-7 rounded-lg ${typeConfig2.bgColor} flex items-center justify-center flex-shrink-0`, children: /* @__PURE__ */ jsxRuntime.jsx(typeConfig2.icon, { size: 14, className: typeConfig2.color }) }),
+          onTypeChange ? /* @__PURE__ */ jsxRuntime.jsx(
+            ArtifactTypeSelector,
+            {
+              currentType: artifact.type,
+              currentLanguage: artifact.language,
+              onTypeChange: (newType, language) => onTypeChange(artifact.id, newType, language),
+              disabled: isEditing
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-7 h-7 rounded-lg ${typeConfig2.bgColor} flex items-center justify-center flex-shrink-0`, children: /* @__PURE__ */ jsxRuntime.jsx(typeConfig2.icon, { size: 14, className: typeConfig2.color }) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-medium text-zinc-100 agent-sdk-light:text-zinc-900 truncate", children: artifact.title }),
+            isEditingTitle ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  ref: titleInputRef,
+                  type: "text",
+                  value: editingTitle,
+                  onChange: (e) => setEditingTitle(e.target.value),
+                  onKeyDown: handleTitleKeyDown,
+                  onBlur: handleSaveTitle,
+                  disabled: isSavingTitle,
+                  className: "text-sm font-medium text-zinc-100 agent-sdk-light:text-zinc-900 bg-zinc-800 agent-sdk-light:bg-zinc-100 border border-zinc-600 agent-sdk-light:border-zinc-300 rounded px-1.5 py-0.5 outline-none focus:border-zinc-400 agent-sdk-light:focus:border-zinc-500 w-full min-w-0"
+                }
+              ),
+              isSavingTitle && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 12, className: "text-zinc-500 animate-spin flex-shrink-0" })
+            ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+              "h3",
+              {
+                className: cn3(
+                  "text-sm font-medium text-zinc-100 agent-sdk-light:text-zinc-900 truncate",
+                  onTitleChange && !isEditing && "cursor-pointer hover:text-zinc-300 agent-sdk-light:hover:text-zinc-600"
+                ),
+                onDoubleClick: handleStartEditTitle,
+                title: onTitleChange && !isEditing ? "\u53CC\u51FB\u7F16\u8F91\u6807\u9898" : void 0,
+                children: artifact.title
+              }
+            ),
             /* @__PURE__ */ jsxRuntime.jsxs("p", { className: `text-xs ${typeConfig2.color}`, children: [
               typeConfig2.label,
-              artifact.language && artifact.language !== artifact.type && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-zinc-500 agent-sdk-light:text-zinc-500 ml-1", children: [
+              artifact.language && artifact.language !== artifact.type && (onLanguageChange ? /* @__PURE__ */ jsxRuntime.jsx(
+                ArtifactLanguageSelector,
+                {
+                  currentLanguage: artifact.language,
+                  onLanguageChange: (lang) => onLanguageChange(artifact.id, lang),
+                  disabled: isEditing
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-zinc-500 agent-sdk-light:text-zinc-500 ml-1", children: [
                 "\u2022 ",
                 artifact.language
-              ] })
+              ] }))
             ] })
           ] })
         ] }),
@@ -24136,15 +24588,54 @@ var ArtifactViewer = React16.memo(function ArtifactViewer2({
       isOpen,
       onClose,
       title: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-6 h-6 rounded-md ${typeConfig2.bgColor} flex items-center justify-center`, children: /* @__PURE__ */ jsxRuntime.jsx(typeConfig2.icon, { size: 14, className: typeConfig2.color }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: artifact.title })
+        onTypeChange ? /* @__PURE__ */ jsxRuntime.jsx(
+          ArtifactTypeSelector,
+          {
+            currentType: artifact.type,
+            currentLanguage: artifact.language,
+            onTypeChange: (newType, language) => onTypeChange(artifact.id, newType, language),
+            disabled: isEditing
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-6 h-6 rounded-md ${typeConfig2.bgColor} flex items-center justify-center`, children: /* @__PURE__ */ jsxRuntime.jsx(typeConfig2.icon, { size: 14, className: typeConfig2.color }) }),
+        isEditingTitle ? /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref: titleInputRef,
+            type: "text",
+            value: editingTitle,
+            onChange: (e) => setEditingTitle(e.target.value),
+            onKeyDown: handleTitleKeyDown,
+            onBlur: handleSaveTitle,
+            disabled: isSavingTitle,
+            className: "text-sm font-medium text-zinc-100 agent-sdk-light:text-zinc-900 bg-zinc-800 agent-sdk-light:bg-zinc-100 border border-zinc-600 agent-sdk-light:border-zinc-300 rounded px-1.5 py-0.5 outline-none focus:border-zinc-400 agent-sdk-light:focus:border-zinc-500 min-w-0 flex-1"
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn3(
+              "truncate",
+              onTitleChange && !isEditing && "cursor-pointer hover:text-zinc-300 agent-sdk-light:hover:text-zinc-600"
+            ),
+            onDoubleClick: handleStartEditTitle,
+            title: onTitleChange && !isEditing ? "\u53CC\u51FB\u7F16\u8F91\u6807\u9898" : void 0,
+            children: artifact.title
+          }
+        ),
+        isSavingTitle && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 12, className: "text-zinc-500 animate-spin flex-shrink-0" })
       ] }),
       subtitle: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: typeConfig2.color, children: [
         typeConfig2.label,
-        artifact.language && artifact.language !== artifact.type && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-zinc-500 agent-sdk-light:text-zinc-500 ml-1", children: [
+        artifact.language && artifact.language !== artifact.type && (onLanguageChange ? /* @__PURE__ */ jsxRuntime.jsx(
+          ArtifactLanguageSelector,
+          {
+            currentLanguage: artifact.language,
+            onLanguageChange: (lang) => onLanguageChange(artifact.id, lang),
+            disabled: isEditing
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-zinc-500 agent-sdk-light:text-zinc-500 ml-1", children: [
           "\u2022 ",
           artifact.language
-        ] })
+        ] }))
       ] }),
       isFullscreen,
       onFullscreenToggle,
@@ -25057,7 +25548,7 @@ function useArtifactPanel({ currentSessionId }) {
     const existingArtifact = Object.values(artifacts).find(
       (a) => {
         const sameContent = a.currentContent === data.content && a.type === data.type;
-        const sameId = a?.metadata?.workId === data.metadata?.workId;
+        const sameId = !!data.metadata?.workId && a?.metadata?.workId === data.metadata?.workId;
         return sameContent || sameId;
       }
     );
@@ -25119,7 +25610,8 @@ function useArtifactPanel({ currentSessionId }) {
     setActiveArtifact,
     removeArtifact,
     reorderArtifacts,
-    updateArtifactContent
+    updateArtifactContent,
+    upsertArtifact
   };
 }
 
@@ -25935,7 +26427,8 @@ var AgentChat = React16__namespace.default.forwardRef(({
     setActiveArtifact,
     removeArtifact,
     reorderArtifacts,
-    updateArtifactContent
+    updateArtifactContent,
+    upsertArtifact
   } = useArtifactPanel({ currentSessionId: useAgentStore((state) => state.currentSession?.sessionId) });
   const reconnectRef = React16.useRef(null);
   const reconnectWrapper = React16.useCallback(async (messageId) => {
@@ -26409,6 +26902,52 @@ var AgentChat = React16__namespace.default.forwardRef(({
                             toast.error("\u5220\u9664\u4EA7\u7269\u5931\u8D25");
                           }
                         },
+                        onTypeChange: async (artifactId, newType, language) => {
+                          try {
+                            const content = activeArtifact?.currentContent || "";
+                            const res = await artifactService.updateContent(artifactId, content, {
+                              type: newType,
+                              language
+                            });
+                            if (res.success && res.data) {
+                              upsertArtifact(artifactService.normalizeEntry(res.data));
+                              toast.success("\u7C7B\u578B\u5DF2\u66F4\u65B0");
+                            } else {
+                              toast.error("\u7C7B\u578B\u66F4\u65B0\u5931\u8D25");
+                            }
+                          } catch (err) {
+                            console.error("[AgentChat] Change artifact type failed:", err);
+                            toast.error("\u7C7B\u578B\u66F4\u65B0\u5931\u8D25");
+                          }
+                        },
+                        onLanguageChange: async (artifactId, language) => {
+                          try {
+                            const content = activeArtifact?.currentContent || "";
+                            const res = await artifactService.updateContent(artifactId, content, { language });
+                            if (res.success && res.data) {
+                              upsertArtifact(artifactService.normalizeEntry(res.data));
+                            } else {
+                              toast.error("\u8BED\u8A00\u66F4\u65B0\u5931\u8D25");
+                            }
+                          } catch (err) {
+                            console.error("[AgentChat] Change artifact language failed:", err);
+                            toast.error("\u8BED\u8A00\u66F4\u65B0\u5931\u8D25");
+                          }
+                        },
+                        onTitleChange: async (artifactId, title) => {
+                          try {
+                            const content = activeArtifact?.currentContent || "";
+                            const res = await artifactService.updateContent(artifactId, content, { title });
+                            if (res.success && res.data) {
+                              upsertArtifact(artifactService.normalizeEntry(res.data));
+                            } else {
+                              toast.error("\u6807\u9898\u66F4\u65B0\u5931\u8D25");
+                            }
+                          } catch (err) {
+                            console.error("[AgentChat] Change artifact title failed:", err);
+                            toast.error("\u6807\u9898\u66F4\u65B0\u5931\u8D25");
+                          }
+                        },
                         onVisibilityChange: async (artifactId, isPublic) => {
                           try {
                             const res = await artifactService.updateVisibility(artifactId, isPublic);
@@ -26955,20 +27494,21 @@ var typeConfig = {
 };
 function FullscreenHtmlPreview({ content }) {
   const blobUrl = React16.useMemo(() => {
+    const processed = resolveHtmlAssetUrls(content);
     const styleInjection = `
 <style>
   html, body { margin: 0; padding: 0; width: 100%; min-height: 100%; box-sizing: border-box; }
   * { box-sizing: border-box; }
 </style>`;
-    let modified = content;
-    if (content.includes("<head>")) {
-      modified = content.replace("<head>", "<head>" + styleInjection);
-    } else if (content.includes("<html>")) {
-      modified = content.replace("<html>", "<html><head>" + styleInjection + "</head>");
-    } else if (/<!(DOCTYPE|doctype)/i.test(content)) {
-      modified = content.replace(/(<!DOCTYPE[^>]*>|<!doctype[^>]*>)/i, "$1<html><head>" + styleInjection + "</head><body>") + "</body></html>";
+    let modified = processed;
+    if (processed.includes("<head>")) {
+      modified = processed.replace("<head>", "<head>" + styleInjection);
+    } else if (processed.includes("<html>")) {
+      modified = processed.replace("<html>", "<html><head>" + styleInjection + "</head>");
+    } else if (/<!(DOCTYPE|doctype)/i.test(processed)) {
+      modified = processed.replace(/(<!DOCTYPE[^>]*>|<!doctype[^>]*>)/i, "$1<html><head>" + styleInjection + "</head><body>") + "</body></html>";
     } else {
-      modified = `<!DOCTYPE html><html><head>${styleInjection}</head><body>${content}</body></html>`;
+      modified = `<!DOCTYPE html><html><head>${styleInjection}</head><body>${processed}</body></html>`;
     }
     const blob = new Blob([modified], { type: "text/html" });
     return URL.createObjectURL(blob);