admin/PromptArch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: LiveCanvas now always renders when user toggles to Preview mode

Browse Source
This commit is contained in:
Gemini AI
2025-12-28 12:07:52 +04:00
Unverified
parent d9c6baaa65
commit 13c45916b7
1 changed files with 22 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
components/AIAssist.tsx
View File

@@ -38,11 +38,10 @@ const LiveCanvas = memo(({ data, type, isStreaming }: { data: string, type: stri
const iframeRef = useRef<HTMLIFrameElement>(null); const iframeRef = useRef<HTMLIFrameElement>(null);
useEffect(() => { useEffect(() => {
if (!iframeRef.current) return; if (!iframeRef.current || !data) return;
const isHtml = data.includes("<") && data.includes(">"); // Decode HTML entities if present
const isEncodedHtml = data.includes("&lt;") && data.includes("&gt;"); const isEncodedHtml = data.includes("&lt;") && data.includes("&gt;");
const shouldRender = isHtml || isEncodedHtml || ["web", "app", "design", "html", "ui"].includes(type);
const normalized = isEncodedHtml const normalized = isEncodedHtml
? data ? data
.replace(/&lt;/g, "<") .replace(/&lt;/g, "<")
@@ -51,8 +50,20 @@ const LiveCanvas = memo(({ data, type, isStreaming }: { data: string, type: stri
.replace(/&quot;/g, "\"") .replace(/&quot;/g, "\"")
.replace(/&#39;/g, "'") .replace(/&#39;/g, "'")
: data; : data;
if (shouldRender) {
const doc = ` // Check if the content is a full HTML document or a fragment
const isFullDocument = normalized.trim().startsWith("<!DOCTYPE") || normalized.trim().startsWith("<html");
let doc: string;
if (isFullDocument) {
// If it's a full document, inject Tailwind CSS but keep the structure
doc = normalized.replace(/<head>/i, `<head>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700;800&display=swap">
`);
} else {
// Wrap fragments in a styled container
doc = `
<!DOCTYPE html> <!DOCTYPE html>
<html class="dark"> <html class="dark">
<head> <head>
@@ -81,19 +92,20 @@ const LiveCanvas = memo(({ data, type, isStreaming }: { data: string, type: stri
margin: 0; margin: 0;
padding: 24px; padding: 24px;
font-family: "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif; font-family: "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif;
background: #0b1414; background: #f8fafc;
color: #ecfdf3; color: #1e293b;
min-height: 100vh; min-height: 100vh;
} }
</style> </style>
</head> </head>
<body class="bg-[#0b1414] text-emerald-50"> <body>
${normalized} ${normalized}
</body> </body>
</html> </html>
`; `;
iframeRef.current.srcdoc = doc;
} }
iframeRef.current.srcdoc = doc;
}, [data, type]); }, [data, type]);
return ( return (
@@ -624,7 +636,7 @@ export default function AIAssist() {
</div> </div>
<div className="flex-1 overflow-hidden relative"> <div className="flex-1 overflow-hidden relative">
{viewMode === "preview" && previewData && canRenderPreview ? ( {viewMode === "preview" && previewData ? (
<LiveCanvas <LiveCanvas
data={previewData.data} data={previewData.data}
type={previewData.type} type={previewData.type}