From 4f0a8da2eed7ccfcd12f4322b30ded56edf7ed37 Mon Sep 17 00:00:00 2001
From: Ashwek-Werghi <77299134+werghi-ashwek@users.noreply.github.com>
Date: Mon, 9 Mar 2026 08:34:44 +0100
Subject: [PATCH] fix(frontend): enable HTML preview for generated artifacts
 using srcDoc (#1001)

* fix(frontend): enable HTML preview for generated artifacts using srcDoc

* Apply suggestions from code review

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Willem Jiang <willem.jiang@gmail.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 .../workspace/artifacts/artifact-file-detail.tsx  | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx b/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx
index c7d2495..0539d18 100644
--- a/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx
+++ b/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx
@@ -81,8 +81,8 @@ export function ArtifactFileDetail({
     return checkCodeFile(filepath);
   }, [filepath, isWriteFile, isSkillFile]);
   const isSupportPreview = useMemo(() => {
-    return (language === "html" && !isWriteFile) || language === "markdown";
-  }, [isWriteFile, language]);
+    return language === "html" || language === "markdown";
+  }, [language]);
   const { content } = useArtifactContent({
     threadId,
     filepath: filepathFromProps,
@@ -239,8 +239,6 @@ export function ArtifactFileDetail({
           viewMode === "preview" &&
           (language === "markdown" || language === "html") && (
             <ArtifactFilePreview
-              filepath={filepath}
-              threadId={threadId}
               content={displayContent}
               language={language ?? "text"}
             />
@@ -264,17 +262,12 @@ export function ArtifactFileDetail({
 }
 
 export function ArtifactFilePreview({
-  filepath,
-  threadId,
   content,
   language,
 }: {
-  filepath: string;
-  threadId: string;
   content: string;
   language: string;
 }) {
-  const { isMock } = useThread();
   if (language === "markdown") {
     return (
       <div className="size-full px-4">
@@ -292,7 +285,9 @@ export function ArtifactFilePreview({
     return (
       <iframe
         className="size-full"
-        src={urlOfArtifact({ filepath, threadId, isMock })}
+        title="Artifact preview"
+        srcDoc={content}
+        sandbox="allow-scripts allow-forms"
       />
     );
   }