function MainComponent() { const [theme, setTheme] = useState("light"); const [isDark, setIsDark] = useState(false); const [selectedLanguage, setSelectedLanguage] = useState("web"); const [html, setHtml] = useState(""); const [css, setCss] = useState(""); const [javascript, setJavascript] = useState(""); const [pythonCode, setPythonCode] = useState(""); const [cppCode, setCppCode] = useState(""); const [csharpCode, setCsharpCode] = useState(""); const [preview, setPreview] = useState(""); const [previewWidth, setPreviewWidth] = useState(400); const [previewHeight, setPreviewHeight] = useState(400); const [resizeMode, setResizeMode] = useState(null); const [startX, setStartX] = useState(0); const [startY, setStartY] = useState(0); const [startWidth, setStartWidth] = useState(0); const [startHeight, setStartHeight] = useState(0); const [uploading, setUploading] = useState(false); const [uploadSuccess, setUploadSuccess] = useState(false); const [error, setError] = useState(null); const [selectedFile, setSelectedFile] = useState(null); const [selectedFilePreview, setSelectedFilePreview] = useState(null); const [isRoadmapExpanded, setIsRoadmapExpanded] = useState(true); const [showPreview, setShowPreview] = useState(true); const [isPreviewFullScreen, setIsPreviewFullScreen] = useState(false); const [upload] = useUpload(); const handleFileSelect = async (event)=>{ const file = event.target.files[0]; if (!file) return; setSelectedFile(file); setSelectedFilePreview(URL.createObjectURL(file)); }; const handleImageUpload = async (file)=>{ if (!file) return; setUploading(true); setError(null); try { const reader = new FileReader(); reader.onloadend = async ()=>{ const base64 = reader.result.split(",")[1]; const messages = [ { role: "user", content: [ { type: "text", text: "Analyze this image and suggest where to place it in the code" }, { type: "image_url", image_url: { url: `data:${file.type};base64,${base64}` } } ] } ]; const response = await fetch("/integrations/gpt-vision/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages }) }); if (!response.ok) throw new Error(`Error analyzing image: ${response.status}`); const result = await response.json(); if (result.error) throw new Error(result.error); const imageResponse = await fetch("/api/analyze-image-placement", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ html, css, javascript, imageUrl: `data:${file.type};base64,${base64}` }) }); if (!imageResponse.ok) throw new Error(`Error placing image: ${imageResponse.status}`); const imageResult = await imageResponse.json(); if (imageResult.error) throw new Error(imageResult.error); setHtml(imageResult.html); setCss(imageResult.css); setJavascript(imageResult.javascript); setUploadSuccess(true); setTimeout(()=>setUploadSuccess(false), 3000); }; reader.readAsDataURL(file); } catch (err) { console.error(err); setError(err.message); } finally{ setUploading(false); } }; const handleRun = async ()=>{ if (selectedLanguage === "web") { const fullHtml = ` ${html} `; setPreview(fullHtml); } else { try { const response = await fetch("/api/projects/save-with-language", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ language_type: selectedLanguage, python_code: pythonCode, cpp_code: cppCode, csharp_code: csharpCode }) }); if (!response.ok) throw new Error("Failed to run code"); const result = await response.json(); setPreview(result.output || "No output"); } catch (err) { setError(err.message); } } }; const handleResizeStart = (mode)=>(e)=>{ e.preventDefault(); setResizeMode(mode); setStartX(e.clientX); setStartY(e.clientY); setStartWidth(previewWidth); setStartHeight(previewHeight); }; const handleMouseMove = useCallback((e)=>{ if (resizeMode) { const deltaX = e.clientX - startX; const deltaY = e.clientY - startY; if (resizeMode === "width" || resizeMode === "corner") { const newWidth = Math.max(300, Math.min(800, startWidth - deltaX)); setPreviewWidth(newWidth); } if (resizeMode === "height" || resizeMode === "corner") { const newHeight = Math.max(200, Math.min(600, startHeight + deltaY)); setPreviewHeight(newHeight); } } }, [ resizeMode, startX, startY, startWidth, startHeight ]); const handleMouseUp = useCallback(()=>{ setResizeMode(null); }, []); useEffect(()=>{ if (resizeMode) { document.addEventListener("mousemove", handleMouseMove); document.addEventListener("mouseup", handleMouseUp); return ()=>{ document.removeEventListener("mousemove", handleMouseMove); document.removeEventListener("mouseup", handleMouseUp); }; } }, [ resizeMode, handleMouseMove, handleMouseUp ]); const roadmapRef = useRef(null); const scrollToRoadmap = ()=>{ roadmapRef.current?.scrollIntoView({ behavior: "smooth" }); }; return /*#__PURE__*/ React.createElement("div", { className: `min-h-screen transition-all duration-300 font-space-grotesk ${theme === "light" ? "bg-gradient-to-br from-gray-50 to-gray-100" : theme === "dark" ? "bg-gradient-to-br from-gray-900 to-gray-800" : "bg-gradient-to-br animate-gradient from-blue-500 via-purple-500 to-pink-400"} ${theme === "codelee" ? "sparkle" : ""} text-gray-900 dark:text-gray-100`, __source: { fileName: "", lineNumber: 191, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `container mx-auto p-4 ${theme === "codelee" ? "glow-container" : ""}`, __source: { fileName: "", lineNumber: 194, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-between items-center mb-8", __source: { fileName: "", lineNumber: 197, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 198, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 199, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: `text-3xl font-bold font-space-grotesk ${theme === "codelee" ? "animate-rainbow" : "bg-clip-text text-transparent bg-gradient-to-r from-blue-500 via-purple-500 to-indigo-500 dark:from-blue-300 dark:via-purple-400 dark:to-indigo-300"}`, __source: { fileName: "", lineNumber: 200, columnNumber: 15 }, __self: this }, "CodeLee"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 205, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `px-2 py-1 text-xs font-medium ${theme === "codelee" ? "bg-gradient-to-r from-blue-400 to-purple-400 text-white" : "bg-gray-100/80 dark:bg-gray-800/80 text-gray-700 dark:text-gray-300"} rounded-full backdrop-blur-sm`, __source: { fileName: "", lineNumber: 206, columnNumber: 17 }, __self: this }, "v0.03"), /*#__PURE__*/ React.createElement("span", { className: "px-2 py-1 text-xs font-medium bg-green-100 dark:bg-green-800 text-green-700 dark:text-green-200 rounded-full backdrop-blur-sm border border-green-200 dark:border-green-700 inline-block mt-1", __source: { fileName: "", lineNumber: 211, columnNumber: 17 }, __self: this }, "Stable Version"))), /*#__PURE__*/ React.createElement("p", { className: `text-xs ${theme === "codelee" ? "text-blue-200" : "text-gray-800 dark:text-gray-200"} font-space-grotesk mt-1`, __source: { fileName: "", lineNumber: 216, columnNumber: 13 }, __self: this }, "by Wolfe Tech Innovations™")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 222, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("select", { value: theme, onChange: (e)=>setTheme(e.target.value), className: `px-4 py-1.5 text-sm rounded-lg transition-all duration-300 ${theme === "codelee" ? "bg-gradient-to-r from-blue-500 via-purple-500 to-pink-400 text-white shadow-[0_0_15px_rgba(56,189,248,0.5)]" : "bg-gray-100/80 dark:bg-gray-800/80 text-gray-700 dark:text-gray-300"} outline-none cursor-pointer`, __source: { fileName: "", lineNumber: 223, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "light", __source: { fileName: "", lineNumber: 232, columnNumber: 15 }, __self: this }, "Light"), /*#__PURE__*/ React.createElement("option", { value: "dark", __source: { fileName: "", lineNumber: 233, columnNumber: 15 }, __self: this }, "Dark"), /*#__PURE__*/ React.createElement("option", { value: "codelee", __source: { fileName: "", lineNumber: 234, columnNumber: 15 }, __self: this }, "CodeLee")), /*#__PURE__*/ React.createElement("button", { onClick: scrollToRoadmap, className: `px-4 py-1.5 text-sm ${theme === "codelee" ? "bg-gradient-to-r from-blue-400 to-purple-400 text-white shadow-[0_0_15px_rgba(56,189,248,0.5)]" : "bg-gray-100/80 dark:bg-gray-800/80 text-gray-700 dark:text-gray-300"} rounded-full backdrop-blur-sm hover:scale-105 transition-all duration-300 flex items-center gap-2`, __source: { fileName: "", lineNumber: 236, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-map text-sm", __source: { fileName: "", lineNumber: 244, columnNumber: 15 }, __self: this }), "Roadmap"), /*#__PURE__*/ React.createElement("input", { type: "file", id: "imageUpload", className: "hidden", accept: "image/png,image/jpeg,image/gif,image/webp", disabled: uploading || !html && !css && !javascript, onChange: handleFileSelect, __source: { fileName: "", lineNumber: 247, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 255, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "imageUpload", className: `px-6 py-2 ${theme === "codelee" ? "bg-gradient-to-r from-blue-500 via-purple-500 to-pink-400 shadow-[0_0_15px_rgba(56,189,248,0.5)]" : "bg-gradient-to-r from-emerald-500 to-teal-500 hover:from-emerald-600 hover:to-teal-600"} text-white font-space-grotesk rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 cursor-pointer flex items-center ${uploading || !html && !css && !javascript ? "opacity-50 cursor-not-allowed from-gray-400 to-gray-500" : ""}`, __source: { fileName: "", lineNumber: 256, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-image mr-2", __source: { fileName: "", lineNumber: 268, columnNumber: 17 }, __self: this }), uploading ? "Uploading..." : selectedFile ? "Change Image" : "Add Image"), selectedFile && /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleImageUpload(selectedFile), disabled: uploading, className: `mt-2 px-4 py-1 ${theme === "codelee" ? "bg-gradient-to-r from-blue-500 via-purple-500 to-pink-400 shadow-[0_0_15px_rgba(56,189,248,0.5)]" : "bg-gradient-to-r from-blue-500 to-indigo-500 hover:from-blue-600 hover:to-indigo-600"} text-white rounded-md text-sm flex items-center justify-center w-full transition-all duration-300 transform hover:scale-105 ${uploading ? "opacity-50 cursor-not-allowed" : ""}`, __source: { fileName: "", lineNumber: 277, columnNumber: 17 }, __self: this }, uploading ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 290, columnNumber: 23 }, __self: this }), "Processing...") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check mr-2", __source: { fileName: "", lineNumber: 295, columnNumber: 23 }, __self: this }), "Upload Selected Image"))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowPreview(!showPreview), className: `px-6 py-2 ${theme === "codelee" ? "bg-gradient-to-r from-blue-500 via-purple-500 to-pink-400 shadow-[0_0_15px_rgba(56,189,248,0.5)]" : "bg-gradient-to-r from-blue-500 via-purple-500 to-indigo-500 hover:from-blue-600 hover:via-purple-600 hover:to-indigo-600"} text-white font-space-grotesk rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105`, __source: { fileName: "", lineNumber: 302, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-eye${showPreview ? "-slash" : ""} mr-2`, __source: { fileName: "", lineNumber: 310, columnNumber: 15 }, __self: this }), showPreview ? "Hide Preview" : "Show Preview"), /*#__PURE__*/ React.createElement("button", { onClick: handleRun, className: `px-6 py-2 ${theme === "codelee" ? "bg-gradient-to-r from-blue-500 via-purple-500 to-pink-400 shadow-[0_0_15px_rgba(56,189,248,0.5)]" : "bg-gradient-to-r from-blue-500 via-purple-500 to-indigo-500 hover:from-blue-600 hover:via-purple-600 hover:to-indigo-600"} text-white font-space-grotesk rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105`, __source: { fileName: "", lineNumber: 315, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-play mr-2", __source: { fileName: "", lineNumber: 323, columnNumber: 15 }, __self: this }), "Run"))), error && /*#__PURE__*/ React.createElement("div", { className: "mb-4 p-4 bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-100 rounded-lg", __source: { fileName: "", lineNumber: 330, columnNumber: 11 }, __self: this }, error), uploadSuccess && /*#__PURE__*/ React.createElement("div", { className: "mb-4 p-4 bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-100 rounded-lg", __source: { fileName: "", lineNumber: 335, columnNumber: 11 }, __self: this }, "Image added successfully!"), selectedFilePreview && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 340, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 341, columnNumber: 13 }, __self: this }, "Selected Image Preview:"), /*#__PURE__*/ React.createElement("img", { src: selectedFilePreview, alt: "Selected file preview", className: "max-w-xs rounded-md shadow-sm", __source: { fileName: "", lineNumber: 344, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 352, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("select", { value: selectedLanguage, onChange: (e)=>setSelectedLanguage(e.target.value), className: "w-full md:w-48 p-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm hover:shadow-md transition-all duration-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none text-gray-900 dark:text-gray-100", __source: { fileName: "", lineNumber: 353, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "web", __source: { fileName: "", lineNumber: 358, columnNumber: 13 }, __self: this }, "Web Development"), /*#__PURE__*/ React.createElement("option", { value: "python", __source: { fileName: "", lineNumber: 359, columnNumber: 13 }, __self: this }, "Python"), /*#__PURE__*/ React.createElement("option", { value: "cpp", __source: { fileName: "", lineNumber: 360, columnNumber: 13 }, __self: this }, "C++"), /*#__PURE__*/ React.createElement("option", { value: "csharp", __source: { fileName: "", lineNumber: 361, columnNumber: 13 }, __self: this }, "C#"))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-6 mb-4", __source: { fileName: "", lineNumber: 365, columnNumber: 9 }, __self: this }, selectedLanguage === "web" ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 368, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-inter text-sm font-medium text-gray-900 dark:text-gray-100", __source: { fileName: "", lineNumber: 369, columnNumber: 17 }, __self: this }, "HTML", /*#__PURE__*/ React.createElement("span", { className: "ml-2 text-xs text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 371, columnNumber: 19 }, __self: this }, "(You can include

Feature Roadmap

Coming in Next Update

Implemented Features

Not Currently Planned