下载图片

frontend-web/src/components/workspace/artifacts/artifact-file-detail.tsx

@@ -48,7 +48,13 @@ import { useI18n } from "@/core/i18n/hooks";
 import { downloadMarkdownAsDocx } from "@/core/scheduled-tasks/markdown-docx";
 import { installSkill } from "@/core/skills/api";
 import { streamdownPlugins } from "@/core/streamdown";
-import { checkCodeFile, getFileName } from "@/core/utils/files";
+import {
+  checkCodeFile,
+  getFileName,
+  isImageFile,
+} from "@/core/utils/files";
+import { getBackendBaseURL } from "@/core/config";
+import { resolveArtifactURL } from "@/core/artifacts/utils";
 import { env } from "@/env";
 import { desensitize } from "@/lib/desensitize";
 import { cn } from "@/lib/utils";
@@ -96,21 +102,25 @@ export function ArtifactFileDetail({
   const { t } = useI18n();
   const { artifacts, setOpen, select } = useArtifacts();
   const { isMock, thread, publicShareCode } = useThread();
-  const isWriteFile = useMemo(() => {
+  const isWriteFileVirtual = useMemo(() => {
     return filepathFromProps.startsWith("write-file:");
   }, [filepathFromProps]);
   const filepath = useMemo(() => {
-    if (isWriteFile) {
+    if (isWriteFileVirtual) {
       const url = new URL(filepathFromProps);
       return decodeURIComponent(url.pathname);
     }
     return filepathFromProps;
-  }, [filepathFromProps, isWriteFile]);
+  }, [filepathFromProps, isWriteFileVirtual]);
+  /** write_file 流式预览走 tool args 文本；图片等二进制产物始终走 artifacts API。 */
+  const useWriteFileStreaming = useMemo(() => {
+    return isWriteFileVirtual && !isImageFile(filepath);
+  }, [filepath, isWriteFileVirtual]);
   const isSkillFile = useMemo(() => {
     return filepath.endsWith(".skill");
   }, [filepath]);
   const { isCodeFile, language } = useMemo(() => {
-    if (isWriteFile) {
+    if (useWriteFileStreaming) {
       let nextLanguage = checkCodeFile(filepath).language;
       nextLanguage ??= "text";
       return { isCodeFile: true, language: nextLanguage };
@@ -119,18 +129,21 @@ export function ArtifactFileDetail({
       return { isCodeFile: true, language: "markdown" };
     }
     return checkCodeFile(filepath);
-  }, [filepath, isWriteFile, isSkillFile]);
+  }, [filepath, useWriteFileStreaming, isSkillFile]);
   const isSupportPreview = useMemo(() => {
     return language === "html" || language === "markdown";
   }, [language]);
   const { content, isApplyingEdit } = useArtifactContent({
     threadId,
     filepath: filepathFromProps,
-    enabled: isCodeFile && !isWriteFile,
+    enabled: isCodeFile && !useWriteFileStreaming,
   });
 
   const canEditArtifact =
-    language === "markdown" && !isWriteFile && !isSkillFile && !isMock;
+    language === "markdown" &&
+    !useWriteFileStreaming &&
+    !isSkillFile &&
+    !isMock;
   const [draftContent, setDraftContent] = useState("");
   const [hasLocalEdits, setHasLocalEdits] = useState(false);
   const updateArtifact = useUpdateArtifactContent();
@@ -138,12 +151,13 @@ export function ArtifactFileDetail({
   const isHtmlStreaming = language === "html" && thread.isLoading;
   const hasMultipleArtifacts = (artifacts?.length ?? 0) > 1;
   const fileTypeLabel = useMemo(() => {
+    if (isImageFile(filepath)) return "IMG";
     if (language === "html") return "HTML";
     if (language === "markdown") return "MD";
     if (isSkillFile) return "SKILL";
     if (language) return language.toUpperCase();
     return "FILE";
-  }, [isSkillFile, language]);
+  }, [filepath, isSkillFile, language]);
 
   const [viewMode, setViewMode] = useState<"code" | "preview">("code");
   const [allowAutoViewSwitch, setAllowAutoViewSwitch] = useState(true);
@@ -453,7 +467,7 @@ export function ArtifactFileDetail({
               {fileTypeLabel}
             </span>
             <ArtifactTitle className="min-w-0">
-              {isWriteFile ? (
+              {useWriteFileStreaming ? (
                 <div className="truncate px-3">{getFileName(filepath)}</div>
               ) : hasMultipleArtifacts ? (
                 <Select value={filepath} onValueChange={select}>
@@ -530,7 +544,7 @@ export function ArtifactFileDetail({
                 onClick={handleSaveArtifact}
               />
             )}
-            {!isWriteFile && filepath.endsWith(".skill") && (
+            {!useWriteFileStreaming && filepath.endsWith(".skill") && (
               <Tooltip content={t.toolCalls.skillInstallTooltip}>
                 <ArtifactAction
                   icon={isInstalling ? LoaderIcon : PackageIcon}
@@ -549,7 +563,7 @@ export function ArtifactFileDetail({
               label={t.common.openInNewWindow}
               tooltip={t.common.openInNewWindow}
               onClick={async () => {
-                if (isWriteFile) {
+                if (useWriteFileStreaming) {
                   handleOpenWriteFileInNewTab();
                   return;
                 }
@@ -587,7 +601,7 @@ export function ArtifactFileDetail({
                 tooltip={t.clipboard.copyToClipboard}
               />
             )}
-            {!isWriteFile && language === "markdown" && (
+            {!useWriteFileStreaming && language === "markdown" && (
               <ArtifactAction
                 icon={isExportingWord ? LoaderIcon : FileType2Icon}
                 label="另存为 Word"
@@ -601,7 +615,7 @@ export function ArtifactFileDetail({
               label={t.common.download}
               tooltip={t.common.download}
               onClick={async () => {
-                if (isWriteFile) {
+                if (useWriteFileStreaming) {
                   handleDownloadWriteFile();
                   return;
                 }
@@ -659,6 +673,8 @@ export function ArtifactFileDetail({
               <ArtifactFilePreview
                 content={desensitize(displayContent ?? "")}
                 language={language ?? "text"}
+                threadId={threadId}
+                publicShareCode={publicShareCode}
                 animated={showPreviewSwitchPulse}
                 activeCursor={isApplyingEdit}
               />
@@ -699,14 +715,57 @@ export function ArtifactFileDetail({
   );
 }
 
+function SandboxPreviewImage({
+  src,
+  alt,
+  threadId,
+  publicShareCode,
+  ...props
+}: React.ImgHTMLAttributes<HTMLImageElement> & {
+  threadId: string;
+  publicShareCode?: string;
+}) {
+  if (!src || typeof src !== "string") {
+    return null;
+  }
+
+  let url = src;
+  if (src.startsWith("/mnt/")) {
+    if (publicShareCode) {
+      const normalized = src.startsWith("/") ? src : `/${src}`;
+      url = `${getBackendBaseURL()}/api/public/shares/${encodeURIComponent(
+        publicShareCode,
+      )}/files${normalized}`;
+    } else {
+      url = resolveArtifactURL(src, threadId);
+    }
+  }
+
+  return (
+    <img
+      {...props}
+      className={cn(
+        "my-3 max-w-full overflow-hidden rounded-lg",
+        props.className,
+      )}
+      src={url}
+      alt={alt}
+    />
+  );
+}
+
 export function ArtifactFilePreview({
   content,
   language,
+  threadId,
+  publicShareCode,
   animated = false,
   activeCursor = false,
 }: {
   content: string;
   language: string;
+  threadId: string;
+  publicShareCode?: string;
   animated?: boolean;
   activeCursor?: boolean;
 }) {
@@ -742,7 +801,16 @@ export function ArtifactFilePreview({
         <Streamdown
           className="size-full"
           {...streamdownPlugins}
-          components={{ a: ArtifactLink }}
+          components={{
+            a: ArtifactLink,
+            img: (props) => (
+              <SandboxPreviewImage
+                {...props}
+                threadId={threadId}
+                publicShareCode={publicShareCode}
+              />
+            ),
+          }}
         >
           {content ?? ""}
         </Streamdown>

frontend-web/src/core/artifacts/download.ts

@@ -60,7 +60,12 @@ export async function downloadArtifactFile({
     filenameFromContentDisposition(cd) ?? getFileName(filepath);
 
   const blob = await res.blob();
-  const objectUrl = URL.createObjectURL(blob);
+  const contentType = res.headers.get("Content-Type")?.split(";")[0]?.trim();
+  const downloadBlob =
+    contentType && blob.type !== contentType
+      ? new Blob([await blob.arrayBuffer()], { type: contentType })
+      : blob;
+  const objectUrl = URL.createObjectURL(downloadBlob);
   const a = document.createElement("a");
   a.href = objectUrl;
   a.download = filename;

frontend-web/src/core/artifacts/hooks.ts

@@ -3,9 +3,24 @@ import { useMemo } from "react";
 
 import { useThread } from "@/components/workspace/messages/context";
 
+import { isImageFile } from "../utils/files";
+
 import { loadArtifactContent, loadArtifactContentFromToolCall } from "./loader";
 import { updateArtifactContent } from "./api";
 
+function isWriteFileStreamingUrl(filepath: string): boolean {
+  if (!filepath.startsWith("write-file:")) {
+    return false;
+  }
+  try {
+    const url = new URL(filepath);
+    const path = decodeURIComponent(url.pathname);
+    return !isImageFile(path);
+  } catch {
+    return true;
+  }
+}
+
 function hasToolResult(thread: ReturnType<typeof useThread>["thread"], toolCallId?: string) {
   if (!toolCallId) {
     return false;
@@ -70,16 +85,16 @@ export function useArtifactContent({
   threadId: string;
   enabled?: boolean;
 }) {
-  const isWriteFile = useMemo(() => {
-    return filepath.startsWith("write-file:");
+  const useWriteFileStreaming = useMemo(() => {
+    return isWriteFileStreamingUrl(filepath);
   }, [filepath]);
   const { thread, isMock, publicShareCode } = useThread();
   const content = useMemo(() => {
-    if (isWriteFile) {
+    if (useWriteFileStreaming) {
       return loadArtifactContentFromToolCall({ url: filepath, thread });
     }
     return null;
-  }, [filepath, isWriteFile, thread]);
+  }, [filepath, useWriteFileStreaming, thread]);
 
   const { data, isLoading, error } = useQuery({
     queryKey: ["artifact", filepath, threadId, isMock, publicShareCode],
@@ -92,7 +107,7 @@ export function useArtifactContent({
     staleTime: 5 * 60 * 1000,
   });
   const pendingEdit = useMemo(() => {
-    if (isWriteFile) {
+    if (useWriteFileStreaming) {
       return null;
     }
     return applyPendingTextEdit({
@@ -100,11 +115,13 @@ export function useArtifactContent({
       filepath,
       thread,
     });
-  }, [data?.content, filepath, isWriteFile, thread]);
+  }, [data?.content, filepath, useWriteFileStreaming, thread]);
 
   return {
-    content: isWriteFile ? content : (pendingEdit?.content ?? data?.content),
-    url: isWriteFile ? undefined : data?.url,
+    content: useWriteFileStreaming
+      ? content
+      : (pendingEdit?.content ?? data?.content),
+    url: useWriteFileStreaming ? undefined : data?.url,
     isLoading,
     isApplyingEdit: pendingEdit?.kind === "editing",
     error,

frontend-web/src/core/utils/files.tsx

@@ -151,6 +151,23 @@ export function getFileExtension(filepath: string) {
   return filepath.split(".").pop()!.toLocaleLowerCase();
 }
 
+const IMAGE_EXTENSIONS = new Set([
+  "png",
+  "jpg",
+  "jpeg",
+  "gif",
+  "webp",
+  "svg",
+  "bmp",
+  "ico",
+  "tiff",
+  "heic",
+]);
+
+export function isImageFile(filepath: string): boolean {
+  return IMAGE_EXTENSIONS.has(getFileExtension(filepath));
+}
+
 export function checkCodeFile(
   filepath: string,
 ):