function MainComponent() { const [messages, setMessages] = useState([]); const [inputMessage, setInputMessage] = useState(""); const [isLoading, setIsLoading] = useState(false); const [streamingMessage, setStreamingMessage] = useState(""); const [mode, setMode] = useState("chat"); const [isRecording, setIsRecording] = useState(false); const [isPlayingAudio, setIsPlayingAudio] = useState({}); const [audioLoading, setAudioLoading] = useState({}); const [audioCache, setAudioCache] = useState({}); const [selectedLanguage, setSelectedLanguage] = useState("javascript"); const messagesEndRef = useRef(null); const inputRef = useRef(null); const mediaRecorderRef = useRef(null); const audioChunksRef = useRef([]); const audioElementRef = useRef({}); const LANGUAGES = [ "javascript", "python", "java", "c", "c++", "ruby", "php", "swift", "go", "rust" ]; const naturePrompts = [ "A vibrant magical rainforest scene with streaming sunlight through tall trees, colorful tropical flowers in the foreground including gerberas and blue orchids, lush green palm fronds and ferns, flying birds silhouetted against bright sunbeams, in a dreamy fantasy style", "An enchanted forest at twilight with glowing mushrooms, fireflies dancing among ancient oak trees, and a crystal-clear stream reflecting the stars above", "A misty mountain valley at sunrise with wildflowers carpeting the ground, ethereal light rays piercing through morning fog, and majestic eagles soaring overhead" ]; const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingMessage, onFinish: (message)=>{ setMessages((prev)=>[ ...prev, { role: "assistant", content: message } ]); setStreamingMessage(""); setIsLoading(false); } }); const scrollToBottom = useCallback(()=>{ messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }, []); const handleStartRecording = useCallback(async ()=>{ try { const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); const mediaRecorder = new MediaRecorder(stream); mediaRecorderRef.current = mediaRecorder; audioChunksRef.current = []; mediaRecorder.ondataavailable = (event)=>{ audioChunksRef.current.push(event.data); }; mediaRecorder.onstop = ()=>{ const audioBlob = new Blob(audioChunksRef.current, { type: "audio/wav" }); const reader = new FileReader(); reader.onloadend = ()=>{ const base64Audio = reader.result.split(",")[1]; setInputMessage(base64Audio); handleSubmit(); }; reader.readAsDataURL(audioBlob); }; mediaRecorder.start(); setIsRecording(true); } catch (error) { console.error("Error accessing microphone:", error); } }, []); const handleStopRecording = useCallback(()=>{ if (mediaRecorderRef.current && isRecording) { mediaRecorderRef.current.stop(); mediaRecorderRef.current.stream.getTracks().forEach((track)=>track.stop()); setIsRecording(false); } }, [ isRecording ]); const handlePlayAudio = useCallback(async (messageIndex, text)=>{ if (audioElementRef.current[messageIndex]) { if (isPlayingAudio[messageIndex]) { audioElementRef.current[messageIndex].pause(); setIsPlayingAudio((prev)=>({ ...prev, [messageIndex]: false })); return; } audioElementRef.current[messageIndex].play(); return; } setAudioLoading((prev)=>({ ...prev, [messageIndex]: true })); try { let audioContent, contentType; if (audioCache[messageIndex]) { audioContent = audioCache[messageIndex].audioContent; contentType = audioCache[messageIndex].contentType; } else { const response = await fetch("/api/text-to-audio-converter", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ text }) }); if (!response.ok) { throw new Error("Failed to generate audio"); } const data = await response.json(); audioContent = data.audioContent; contentType = data.contentType; setAudioCache((prev)=>({ ...prev, [messageIndex]: { audioContent, contentType } })); } const audio = new Audio(`data:${contentType};base64,${audioContent}`); audioElementRef.current[messageIndex] = audio; audio.onplay = ()=>setIsPlayingAudio((prev)=>({ ...prev, [messageIndex]: true })); audio.onpause = ()=>setIsPlayingAudio((prev)=>({ ...prev, [messageIndex]: false })); audio.onended = ()=>setIsPlayingAudio((prev)=>({ ...prev, [messageIndex]: false })); setAudioLoading((prev)=>({ ...prev, [messageIndex]: false })); audio.play(); } catch (error) { console.error("Error playing audio:", error); setAudioLoading((prev)=>({ ...prev, [messageIndex]: false })); } }, [ audioCache, isPlayingAudio ]); useEffect(()=>{ scrollToBottom(); }, [ messages, streamingMessage ]); useEffect(()=>{ const messageContainer = document.querySelector(".message-container"); if (messageContainer) { const handleScroll = ()=>{ const scrolled = messageContainer.scrollTop; const messages = messageContainer.querySelectorAll(".message"); messages.forEach((msg)=>{ const speed = 0.15; const yPos = -(scrolled * speed); msg.style.transform = `translateY(${yPos}px)`; }); }; messageContainer.addEventListener("scroll", handleScroll); return ()=>messageContainer.removeEventListener("scroll", handleScroll); } }, []); useEffect(()=>{ if (isRecording) { const timer = setTimeout(()=>{ handleStopRecording(); }, 10000); return ()=>clearTimeout(timer); } }, [ isRecording ]); const handleSubmit = async (e)=>{ e?.preventDefault(); if (!inputMessage.trim() || isLoading) return; const userMessage = { role: "user", content: inputMessage }; if (mode === "code") { userMessage.type = "code"; userMessage.language = selectedLanguage; } setMessages((prev)=>[ ...prev, userMessage ]); setInputMessage(""); setIsLoading(true); try { if (mode === "chat") { const response = await fetch("/integrations/google-gemini-1-5-flash/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ ...messages, userMessage ], stream: true }) }); if (!response.ok) { throw new Error(`Error: ${response.status}`); } handleStreamResponse(response); } else if (mode === "code") { const response = await fetch("/integrations/code-runner/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ code: inputMessage, language: selectedLanguage }) }); if (!response.ok) { throw new Error(`Error: ${response.status}`); } const data = await response.json(); setMessages((prev)=>[ ...prev, { role: "assistant", type: "code", content: inputMessage, language: selectedLanguage, output: data.stderr || data.stdout, error: !!data.stderr } ]); setIsLoading(false); } else if (mode === "image") { const response = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(inputMessage)}`); if (!response.ok) { throw new Error(`Error: ${response.status}`); } const data = await response.json(); setMessages((prev)=>[ ...prev, { role: "assistant", type: "image", content: data.data[0] } ]); setIsLoading(false); } } catch (error) { console.error("Failed to send message:", error); setIsLoading(false); setMessages((prev)=>[ ...prev, { role: "assistant", type: "error", content: error.message } ]); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen relative", __source: { fileName: "", lineNumber: 261, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 z-0", __source: { fileName: "", lineNumber: 262, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/6c137cb5-8c2b-48c1-bbfa-967ee99df279/-/format/auto/", alt: "Rainforest background", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 263, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black/30", __source: { fileName: "", lineNumber: 268, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("header", { className: "relative z-20 w-full bg-black/40 backdrop-blur-lg shadow-lg", __source: { fileName: "", lineNumber: 270, columnNumber: 1 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto px-4 py-3", __source: { fileName: "", lineNumber: 271, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 272, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-black/30 backdrop-blur-md rounded-lg p-2 shadow-lg", __source: { fileName: "", lineNumber: 273, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://create-cdn.b-cdn.net/create-logo-white.svg", alt: "Create Logo", className: "h-[28px] w-auto", __source: { fileName: "", lineNumber: 274, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("nav", { className: "flex-1 flex justify-center", __source: { fileName: "", lineNumber: 280, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "inline-flex bg-black/30 backdrop-blur-md rounded-lg p-1", __source: { fileName: "", lineNumber: 281, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setMode("chat"), className: `px-6 py-2.5 rounded-md font-inter text-sm transition-all duration-300 ${mode === "chat" ? "bg-[#00ff9d]/30 text-white shadow-[0_0_20px_rgba(0,255,157,0.3)] scale-105 transform" : "text-white/80 hover:text-white hover:bg-white/10"}`, __source: { fileName: "", lineNumber: 282, columnNumber: 17 }, __self: this }, "Chat"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setMode("image"), className: `px-6 py-2.5 rounded-md font-inter text-sm transition-all duration-300 ${mode === "image" ? "bg-[#00ff9d]/30 text-white shadow-[0_0_20px_rgba(0,255,157,0.3)] scale-105 transform" : "text-white/80 hover:text-white hover:bg-white/10"}`, __source: { fileName: "", lineNumber: 292, columnNumber: 17 }, __self: this }, "Image Generation"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setMode("code"), className: `px-6 py-2.5 rounded-md font-inter text-sm transition-all duration-300 ${mode === "code" ? "bg-[#00ff9d]/30 text-white shadow-[0_0_20px_rgba(0,255,157,0.3)] scale-105 transform" : "text-white/80 hover:text-white hover:bg-white/10"}`, __source: { fileName: "", lineNumber: 302, columnNumber: 17 }, __self: this }, "Code")))))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto p-4 message-container relative z-10", __source: { fileName: "", lineNumber: 317, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto space-y-4", __source: { fileName: "", lineNumber: 318, columnNumber: 9 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex ${message.role === "user" ? "justify-end" : "justify-start"} message`, __source: { fileName: "", lineNumber: 320, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `rounded-2xl px-4 py-2 backdrop-blur-md ${message.type === "image" ? "max-w-[90%] md:max-w-[70%]" : "max-w-[80%]"} ${message.role === "user" ? "bg-[#4CAF50]/40 text-white shadow-[0_0_15px_rgba(76,175,80,0.2)]" : "bg-white/20 text-white shadow-[0_0_15px_rgba(255,255,255,0.1)]"}`, __source: { fileName: "", lineNumber: 324, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-start gap-2", __source: { fileName: "", lineNumber: 335, columnNumber: 17 }, __self: this }, message.type === "image" ? /*#__PURE__*/ React.createElement("img", { src: message.content, alt: "Generated nature scene", className: "rounded-lg max-w-full h-auto shadow-lg", __source: { fileName: "", lineNumber: 337, columnNumber: 21 }, __self: this }) : message.type === "code" ? /*#__PURE__*/ React.createElement("div", { className: "w-full", __source: { fileName: "", lineNumber: 343, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-start mb-2", __source: { fileName: "", lineNumber: 344, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xs text-white/60", __source: { fileName: "", lineNumber: 345, columnNumber: 25 }, __self: this }, message.language), /*#__PURE__*/ React.createElement("button", { onClick: ()=>navigator.clipboard.writeText(message.content), className: "text-white/60 hover:text-white", "aria-label": "Copy code", __source: { fileName: "", lineNumber: 348, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-copy", __source: { fileName: "", lineNumber: 355, columnNumber: 27 }, __self: this }))), /*#__PURE__*/ React.createElement("pre", { className: "font-mono text-sm bg-black/40 p-4 rounded-lg overflow-x-auto", __source: { fileName: "", lineNumber: 358, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("code", { __source: { fileName: "", lineNumber: 359, columnNumber: 25 }, __self: this }, message.content)), message.output && /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 362, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xs text-white/60 mb-1", __source: { fileName: "", lineNumber: 363, columnNumber: 27 }, __self: this }, "Output:"), /*#__PURE__*/ React.createElement("pre", { className: `font-mono text-sm p-4 rounded-lg overflow-x-auto ${message.error ? "bg-red-500/20 text-red-300" : "bg-black/40"}`, __source: { fileName: "", lineNumber: 366, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("code", { __source: { fileName: "", lineNumber: 373, columnNumber: 29 }, __self: this }, message.output)))) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("p", { className: "text-sm font-inter flex-1", __source: { fileName: "", lineNumber: 380, columnNumber: 23 }, __self: this }, message.content), message.role === "assistant" && !message.type === "error" && /*#__PURE__*/ React.createElement("button", { onClick: ()=>handlePlayAudio(index, message.content), className: "p-2 text-white/80 hover:text-white hover:scale-110 transition-all duration-300", disabled: audioLoading[index], "aria-label": isPlayingAudio[index] ? "Pause audio" : "Play audio", __source: { fileName: "", lineNumber: 385, columnNumber: 27 }, __self: this }, audioLoading[index] ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner animate-spin", __source: { fileName: "", lineNumber: 398, columnNumber: 31 }, __self: this }) : isPlayingAudio[index] ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-pause text-[#00ff9d]", __source: { fileName: "", lineNumber: 400, columnNumber: 31 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fas fa-play", __source: { fileName: "", lineNumber: 402, columnNumber: 31 }, __self: this }))))))), streamingMessage && /*#__PURE__*/ React.createElement("div", { className: "flex justify-start message", __source: { fileName: "", lineNumber: 413, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "rounded-2xl px-4 py-2 max-w-[80%] bg-white/20 backdrop-blur-md text-white shadow-[0_0_15px_rgba(255,255,255,0.1)]", __source: { fileName: "", lineNumber: 414, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm font-inter", __source: { fileName: "", lineNumber: 415, columnNumber: 17 }, __self: this }, streamingMessage))), isLoading && !streamingMessage && /*#__PURE__*/ React.createElement("div", { className: "flex justify-start message", __source: { fileName: "", lineNumber: 420, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "rounded-2xl px-4 py-2 bg-white/20 backdrop-blur-md shadow-[0_0_15px_rgba(255,255,255,0.1)]", __source: { fileName: "", lineNumber: 421, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 422, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-2 h-2 rounded-full bg-white animate-bounce", style: { animationDelay: "0s" }, __source: { fileName: "", lineNumber: 423, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-2 h-2 rounded-full bg-white animate-bounce", style: { animationDelay: "0.2s" }, __source: { fileName: "", lineNumber: 427, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-2 h-2 rounded-full bg-white animate-bounce", style: { animationDelay: "0.4s" }, __source: { fileName: "", lineNumber: 431, columnNumber: 19 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { ref: messagesEndRef, __source: { fileName: "", lineNumber: 439, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "relative z-10 bg-black/40 backdrop-blur-md p-4", __source: { fileName: "", lineNumber: 442, columnNumber: 7 }, __self: this }, mode === "image" && /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto mb-4", __source: { fileName: "", lineNumber: 444, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm font-inter text-white/80 mb-2", __source: { fileName: "", lineNumber: 445, columnNumber: 13 }, __self: this }, "Try these magical nature scenes:"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2", __source: { fileName: "", lineNumber: 448, columnNumber: 13 }, __self: this }, naturePrompts.map((prompt, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>setInputMessage(prompt), className: "text-left text-xs font-inter text-white/90 hover:bg-white/10 p-2 rounded-md transition-colors", __source: { fileName: "", lineNumber: 450, columnNumber: 17 }, __self: this }, prompt)))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "max-w-3xl mx-auto flex flex-col gap-2", __source: { fileName: "", lineNumber: 461, columnNumber: 9 }, __self: this }, mode === "code" && /*#__PURE__*/ React.createElement("select", { value: selectedLanguage, onChange: (e)=>setSelectedLanguage(e.target.value), className: "w-full md:w-48 rounded-md border border-white/20 px-4 py-2 text-sm font-inter text-white bg-white/10 backdrop-blur-md focus:outline-none focus:border-[#4CAF50]/50", __source: { fileName: "", lineNumber: 466, columnNumber: 13 }, __self: this }, LANGUAGES.map((lang)=>/*#__PURE__*/ React.createElement("option", { key: lang, value: lang, __source: { fileName: "", lineNumber: 472, columnNumber: 17 }, __self: this }, lang))), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 478, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { ref: inputRef, type: "text", value: inputMessage, onChange: (e)=>setInputMessage(e.target.value), placeholder: mode === "chat" ? "Type your message..." : mode === "code" ? "Type your code here..." : "Create a magical nature scene...", className: `flex-1 rounded-md border border-white/20 px-4 py-2 text-sm font-inter text-white bg-white/10 backdrop-blur-md focus:outline-none focus:border-[#4CAF50]/50 placeholder-white/50 ${mode === "code" ? "font-mono" : ""}`, __source: { fileName: "", lineNumber: 479, columnNumber: 13 }, __self: this }), mode === "chat" && /*#__PURE__*/ React.createElement("button", { type: "button", onClick: isRecording ? handleStopRecording : handleStartRecording, className: `p-3 rounded-md transition-all duration-300 ${isRecording ? "bg-red-500/70 hover:bg-red-500/80" : "bg-[#4CAF50]/70 hover:bg-[#4CAF50]/80"}`, __source: { fileName: "", lineNumber: 496, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isRecording ? "fa-stop" : "fa-microphone"} ${isRecording ? "animate-pulse" : ""}`, __source: { fileName: "", lineNumber: 507, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: !inputMessage.trim() || isLoading, className: "px-4 py-2 bg-[#4CAF50]/70 text-white rounded-md font-inter text-sm hover:bg-[#4CAF50]/80 disabled:opacity-50 disabled:cursor-not-allowed transition-colors shadow-[0_0_15px_rgba(76,175,80,0.3)]", __source: { fileName: "", lineNumber: 514, columnNumber: 13 }, __self: this }, isLoading ? "Processing..." : mode === "chat" ? "Send" : mode === "code" ? "Run" : "Generate")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 530, columnNumber: 7 }, __self: this }, ` @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } @keyframes pulse { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } } `)); }