From cf43584d241f96f2429b656ab95aab49c5227112 Mon Sep 17 00:00:00 2001
From: JeffJiang <for-eleven@hotmail.com>
Date: Wed, 1 Apr 2026 11:38:55 +0800
Subject: [PATCH] fix(artifact): enhance artifact content loading to include
 URL for non-write files (#1678)

---
 .../workspace/artifacts/artifact-file-detail.tsx       | 10 ++++++++--
 frontend/src/core/artifacts/hooks.ts                   |  7 ++++++-
 frontend/src/core/artifacts/loader.ts                  |  2 +-
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx b/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx
index 267320b87..6186138c2 100644
--- a/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx
+++ b/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx
@@ -83,7 +83,7 @@ export function ArtifactFileDetail({
   const isSupportPreview = useMemo(() => {
     return language === "html" || language === "markdown";
   }, [language]);
-  const { content } = useArtifactContent({
+  const { content, url } = useArtifactContent({
     threadId,
     filepath: filepathFromProps,
     enabled: isCodeFile && !isWriteFile,
@@ -240,7 +240,9 @@ export function ArtifactFileDetail({
           (language === "markdown" || language === "html") && (
             <ArtifactFilePreview
               content={displayContent}
+              isWriteFile={isWriteFile}
               language={language ?? "text"}
+              url={url}
             />
           )}
         {isCodeFile && viewMode === "code" && (
@@ -263,10 +265,14 @@ export function ArtifactFileDetail({
 
 export function ArtifactFilePreview({
   content,
+  isWriteFile,
   language,
+  url,
 }: {
   content: string;
+  isWriteFile: boolean;
   language: string;
+  url?: string;
 }) {
   if (language === "markdown") {
     return (
@@ -286,8 +292,8 @@ export function ArtifactFilePreview({
       <iframe
         className="size-full"
         title="Artifact preview"
-        srcDoc={content}
         sandbox="allow-scripts allow-forms"
+        {...(isWriteFile ? { srcDoc: content } : url ? { src: url } : {})}
       />
     );
   }
diff --git a/frontend/src/core/artifacts/hooks.ts b/frontend/src/core/artifacts/hooks.ts
index 4df9db70f..df6a68a37 100644
--- a/frontend/src/core/artifacts/hooks.ts
+++ b/frontend/src/core/artifacts/hooks.ts
@@ -34,5 +34,10 @@ export function useArtifactContent({
     // Cache artifact content for 5 minutes to avoid repeated fetches (especially for .skill ZIP extraction)
     staleTime: 5 * 60 * 1000,
   });
-  return { content: isWriteFile ? content : data, isLoading, error };
+  return {
+    content: isWriteFile ? content : data?.content,
+    url: isWriteFile ? undefined : data?.url,
+    isLoading,
+    error,
+  };
 }
diff --git a/frontend/src/core/artifacts/loader.ts b/frontend/src/core/artifacts/loader.ts
index 64a367996..7b29ede25 100644
--- a/frontend/src/core/artifacts/loader.ts
+++ b/frontend/src/core/artifacts/loader.ts
@@ -20,7 +20,7 @@ export async function loadArtifactContent({
   const url = urlOfArtifact({ filepath: enhancedFilepath, threadId, isMock });
   const response = await fetch(url);
   const text = await response.text();
-  return text;
+  return { content: text, url };
 }
 
 export function loadArtifactContentFromToolCall({