function MainComponent() { const [description, setDescription] = useState(""); const [chartType, setChartType] = useState("Bar Chart Race"); const [generatedCode, setGeneratedCode] = useState(""); const [loading, setLoading] = useState(false); const [isExpanded, setIsExpanded] = useState(true); const [error, setError] = useState(""); const chartTypes = [ "Animated Tree Map", "Temporal Force Directed Graph", "Connected Scatterplot", "Scatterplot Tour", "Bar Chart Race", "Collapsible Tree" ]; const containerRef = useRef(null); useEffect(()=>{ if (generatedCode && containerRef.current) { try { // Clear previous content containerRef.current.innerHTML = ""; // Create iframe const iframe = document.createElement("iframe"); iframe.style.width = "100%"; iframe.style.height = "100%"; iframe.style.border = "none"; iframe.style.minHeight = "400px"; containerRef.current.appendChild(iframe); // Write content to iframe const iframeDoc = iframe.contentWindow.document; iframeDoc.open(); iframeDoc.write(generatedCode); iframeDoc.close(); return ()=>{ if (containerRef.current) { containerRef.current.innerHTML = ""; } }; } catch (error) { console.error("Error executing visualization code:", error); } } }, [ generatedCode ]); const generateVisualization = async ()=>{ setLoading(true); setError(""); try { const response = await fetch("/integrations/anthropic-claude-sonnet-3-5/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: "You are an expert D3.js developer. Return only the HTML code block with proper HTML syntax. Include all necessary D3.js scripts and CSS. Make sure the visualization is self-contained and can run independently." }, { role: "user", content: `Generate a D3.js ${chartType} visualization with the following description: ${description}` } ] }) }); const data = await response.json(); const generatedHtml = data.choices[0].message.content; // Extract the content between and const htmlMatch = generatedHtml.match(/[\s\S]*?<\/html>/i); if (!htmlMatch) { throw new Error("Invalid HTML format in response"); } const cleanHtml = htmlMatch[0]; setGeneratedCode(cleanHtml); // Extract script content const scriptMatch = cleanHtml.match(/]*>([\s\S]*?)<\/script>/i); if (scriptMatch) { setScriptContent(scriptMatch[1]); } } catch (error) { console.error("Error generating visualization:", error); } finally{ setLoading(false); } }; const copyToClipboard = async (text)=>{ try { await navigator.clipboard.writeText(text); } catch (err) { console.error("Failed to copy text: ", err); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 p-8", __source: { fileName: "", lineNumber: 108, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto space-y-6", __source: { fileName: "", lineNumber: 109, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-gray-800 font-roboto", __source: { fileName: "", lineNumber: 110, columnNumber: 9 }, __self: this }, "D3.js Visualization Generator"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 113, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 114, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 115, columnNumber: 13 }, __self: this }, "Visualization Description"), /*#__PURE__*/ React.createElement("textarea", { value: description, onChange: (e)=>setDescription(e.target.value), className: "w-full h-32 p-3 border rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500", placeholder: "Describe the visualization you want to create...", __source: { fileName: "", lineNumber: 118, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 125, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 126, columnNumber: 13 }, __self: this }, "Chart Type"), /*#__PURE__*/ React.createElement("select", { value: chartType, onChange: (e)=>setChartType(e.target.value), className: "w-full p-3 border rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500", __source: { fileName: "", lineNumber: 129, columnNumber: 13 }, __self: this }, chartTypes.map((type)=>/*#__PURE__*/ React.createElement("option", { key: type, value: type, __source: { fileName: "", lineNumber: 135, columnNumber: 17 }, __self: this }, type)))), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 141, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: generateVisualization, disabled: loading || !description, className: "w-full bg-blue-600 text-white py-3 px-6 rounded-lg font-medium hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors", __source: { fileName: "", lineNumber: 142, columnNumber: 13 }, __self: this }, loading ? "Generating..." : "Generate Code"))), generatedCode && /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 152, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-gray-800 mb-4", __source: { fileName: "", lineNumber: 153, columnNumber: 13 }, __self: this }, "Generated D3.js Code"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 156, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 157, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-2", __source: { fileName: "", lineNumber: 158, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-gray-700", __source: { fileName: "", lineNumber: 159, columnNumber: 19 }, __self: this }, "HTML Code"), /*#__PURE__*/ React.createElement("div", { className: "space-x-2", __source: { fileName: "", lineNumber: 162, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>copyToClipboard(generatedCode), className: "px-3 py-1 text-sm bg-blue-500 text-white rounded hover:bg-blue-600", __source: { fileName: "", lineNumber: 163, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-copy mr-1", __source: { fileName: "", lineNumber: 167, columnNumber: 23 }, __self: this }), "Copy"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsExpanded(!isExpanded), className: "px-3 py-1 text-sm bg-gray-500 text-white rounded hover:bg-gray-600", __source: { fileName: "", lineNumber: 170, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isExpanded ? "fa-compress" : "fa-expand"} mr-1`, __source: { fileName: "", lineNumber: 174, columnNumber: 23 }, __self: this }), isExpanded ? "Collapse" : "Expand"))), isExpanded && /*#__PURE__*/ React.createElement("div", { className: "bg-gray-800 rounded-lg p-6 overflow-auto", __source: { fileName: "", lineNumber: 182, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("pre", { className: "text-gray-100 whitespace-pre-wrap", __source: { fileName: "", lineNumber: 183, columnNumber: 21 }, __self: this }, generatedCode)))), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 190, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-gray-700 mb-4", __source: { fileName: "", lineNumber: 191, columnNumber: 15 }, __self: this }, "Visualization Preview"), /*#__PURE__*/ React.createElement("div", { ref: containerRef, className: "border rounded-lg p-4 min-h-[400px] bg-white", __source: { fileName: "", lineNumber: 194, columnNumber: 15 }, __self: this }))))); }