diff --git a/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx b/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx index 42c24b820..17e642fc5 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, url } = useArtifactContent({ + const { content } = useArtifactContent({ threadId, filepath: filepathFromProps, enabled: isCodeFile && !isWriteFile, @@ -194,7 +194,7 @@ export function ArtifactFileDetail({ tooltip={t.common.openInNewWindow} onClick={() => { const w = window.open( - urlOfArtifact({ filepath, threadId }), + urlOfArtifact({ filepath, threadId, isMock }), "_blank", "noopener,noreferrer", ); @@ -226,7 +226,12 @@ export function ArtifactFileDetail({ tooltip={t.common.download} onClick={() => { const w = window.open( - urlOfArtifact({ filepath, threadId, download: true }), + urlOfArtifact({ + filepath, + threadId, + download: true, + isMock, + }), "_blank", "noopener,noreferrer", ); @@ -249,9 +254,7 @@ export function ArtifactFileDetail({ (language === "markdown" || language === "html") && ( )} {isCodeFile && viewMode === "code" && ( @@ -274,15 +277,28 @@ export function ArtifactFileDetail({ export function ArtifactFilePreview({ content, - isWriteFile, language, - url, }: { content: string; - isWriteFile: boolean; language: string; - url?: string; }) { + const [htmlPreviewUrl, setHtmlPreviewUrl] = useState(); + + useEffect(() => { + if (language !== "html") { + setHtmlPreviewUrl(undefined); + return; + } + + const blob = new Blob([content ?? ""], { type: "text/html" }); + const url = URL.createObjectURL(blob); + setHtmlPreviewUrl(url); + + return () => { + URL.revokeObjectURL(url); + }; + }, [content, language]); + if (language === "markdown") { return (
@@ -302,7 +318,7 @@ export function ArtifactFilePreview({ className="size-full" title="Artifact preview" sandbox="allow-scripts allow-forms" - {...(isWriteFile ? { srcDoc: content } : url ? { src: url } : {})} + src={htmlPreviewUrl} /> ); } diff --git a/pr-build/issue1955-after.png b/pr-build/issue1955-after.png new file mode 100644 index 000000000..badc3e93d Binary files /dev/null and b/pr-build/issue1955-after.png differ diff --git a/pr-build/issue1955-before.png b/pr-build/issue1955-before.png new file mode 100644 index 000000000..498940422 Binary files /dev/null and b/pr-build/issue1955-before.png differ