import React, { useState, useEffect } from "react"; import ReactDOM from "react-dom"; import Chatbot from "./chatbot.jsx"; const VFS_ORIGIN = "https://vfs.local"; function normalizeFilePath(path) { if (!path) return "/app.jsx"; if (path.startsWith(VFS_ORIGIN)) { try { const url = new URL(path); return url.pathname || "/app.jsx"; } catch { return "/app.jsx"; } } const withLeadingSlash = path.startsWith("/") ? path : `/${path}`; return withLeadingSlash.replace(/\\/g, "/"); } function safeJsonForInlineScript(value) { // Prevent accidental termination. return JSON.stringify(value).replace(/<\/script/gi, "<\\/script"); } function guessContentType(pathname) { if (pathname.endsWith(".css")) return "text/css"; if (pathname.endsWith(".html")) return "text/html"; if (pathname.endsWith(".json")) return "application/json"; return "application/javascript"; } function buildIframeSrcDoc(project) { const entryPath = normalizeFilePath(project?.entry || "/app.jsx"); const files = project?.files || {}; const normalizedFiles = {}; for (const [key, value] of Object.entries(files)) { const path = normalizeFilePath(key); normalizedFiles[path] = String(value ?? ""); } // Ensure entry exists (otherwise Bundless will fetch 404 and you'll get nothing). if (!normalizedFiles[entryPath]) { normalizedFiles[entryPath] = `import React from "react";\nimport ReactDOM from "react-dom";\n\nfunction App(){\n return
No entry file found: ${entryPath}
;\n}\n\nReactDOM.render(, document.getElementById('react-root'));\n`; } const vfsJson = safeJsonForInlineScript({ origin: VFS_ORIGIN, entry: entryPath, files: normalizedFiles, }); // Note: srcdoc inherits base URL of parent, so /bundless.sucrase.min.js resolves. return ` Preview
`; } function defaultProject() { return { entry: "/app.jsx", files: { "/app.jsx": `import React from "react";\nimport ReactDOM from "react-dom";\n\nfunction App(){\n return (\n
\n

Preview Ready

\n

Ask the chatbot to generate a project.

\n
\n );\n}\n\nReactDOM.render(, document.getElementById('react-root'));\n`, }, }; } function App() { const [apiKey, setApiKey] = useState( () => localStorage.getItem("apiKey") || "" ); const [isProjectPopoverOpen, setIsProjectPopoverOpen] = useState(false); const [copyButtonText, setCopyButtonText] = useState("Copy JSON"); const [project, setProject] = useState(() => { try { const raw = localStorage.getItem("generatedProject"); if (raw) return JSON.parse(raw); } catch { // ignore } return defaultProject(); }); const [iframeSrcDoc, setIframeSrcDoc] = useState(() => buildIframeSrcDoc(project)); const handleApiKeyChange = (e) => { const newApiKey = e.target.value; setApiKey(newApiKey); localStorage.setItem("apiKey", newApiKey); }; useEffect(() => { try { localStorage.setItem("generatedProject", JSON.stringify(project)); } catch { // ignore } setIframeSrcDoc(buildIframeSrcDoc(project)); }, [project]); useEffect(() => { if (copyButtonText === "Copy JSON") return undefined; const timer = window.setTimeout(() => { setCopyButtonText("Copy JSON"); }, 1500); return () => window.clearTimeout(timer); }, [copyButtonText]); useEffect(() => { if (!isProjectPopoverOpen) return undefined; const onKeyDown = (event) => { if (event.key === "Escape") { setIsProjectPopoverOpen(false); } }; window.addEventListener("keydown", onKeyDown); return () => { window.removeEventListener("keydown", onKeyDown); }; }, [isProjectPopoverOpen]); const exportProjectText = (() => { try { return JSON.stringify(project, null, 2); } catch { return String(project); } })(); const entryPath = normalizeFilePath(project?.entry || "/app.jsx"); const handleCopyProject = async () => { try { await navigator.clipboard.writeText(exportProjectText); setCopyButtonText("Copied"); } catch (e) { console.error("Copy failed", e); setCopyButtonText("Copy failed"); } }; return (
{isProjectPopoverOpen && ( <>
setIsProjectPopoverOpen(false)} />