function MainComponent() { const [messages, setMessages] = React.useState([]); const [inputMessage, setInputMessage] = React.useState(""); const [isLoading, setIsLoading] = React.useState(false); const [userProfile, setUserProfile] = React.useState(null); const [showProfileForm, setShowProfileForm] = React.useState(false); const [autoSpeak, setAutoSpeak] = React.useState(true); const [uploadedImage, setUploadedImage] = React.useState(null); const [isUploading, setIsUploading] = React.useState(false); const [showSplash, setShowSplash] = React.useState(true); const [showProfileSetup, setShowProfileSetup] = React.useState(false); const [isListening, setIsListening] = React.useState(false); const [inputText, setInputText] = React.useState(""); const [showChatBox, setShowChatBox] = React.useState(false); // New state for chat visibility const [profileForm, setProfileForm] = React.useState({ name: "", gender: "", age: "", password: "" }); const { data: user, loading: userLoading } = useUser(); const { signOut } = useAuth(); const [upload] = useUpload(); // Hide splash screen after 3 seconds React.useEffect(()=>{ const timer = setTimeout(()=>{ setShowSplash(false); }, 3000); return ()=>clearTimeout(timer); }, []); // Load user profile and chat history when user is available React.useEffect(()=>{ if (user && !userLoading && !showProfileSetup) { console.log("User authenticated, loading profile..."); loadUserProfile(); } }, [ user, userLoading, showProfileSetup ]); // Load autoSpeak setting from localStorage React.useEffect(()=>{ const savedAutoSpeak = localStorage.getItem("chachuAutoSpeak"); if (savedAutoSpeak !== null) { setAutoSpeak(savedAutoSpeak === "true"); } }, []); const loadUserProfile = async ()=>{ if (!user) { console.log("No user found, skipping profile load"); return; } try { console.log("Loading user profile for user:", user.id, user.name); const response = await fetch("/api/get-user-profile", { method: "POST" }); if (!response.ok) { console.error("Failed to fetch profile:", response.status); // Check if this is a new user from signup with their info already in auth if (user.name) { console.log("New user detected with auth data, showing profile setup with prefilled data"); setProfileForm({ name: user.name || "", gender: "", age: "", password: "" }); } setShowProfileSetup(true); return; } const profile = await response.json(); console.log("Profile response:", profile); if (profile && profile.id) { console.log("Profile found, loading chat history..."); setUserProfile(profile); setShowProfileSetup(false); loadChatHistory(); } else { console.log("No profile found, showing setup..."); // Pre-fill with auth data if available if (user.name) { setProfileForm({ name: user.name || "", gender: "", age: "", password: "" }); } setShowProfileSetup(true); } } catch (error) { console.error("Error loading profile:", error); // Pre-fill with auth data if available if (user.name) { setProfileForm({ name: user.name || "", gender: "", age: "", password: "" }); } setShowProfileSetup(true); } }; const loadChatHistory = async ()=>{ try { const response = await fetch("/api/load-chat-history", { method: "POST" }); const data = await response.json(); setMessages(data.messages || []); } catch (error) { console.error("Error loading chat history:", error); } }; const saveUserProfile = async (e)=>{ e.preventDefault(); console.log("Attempting to save profile:", profileForm); // Basic validation before sending if (!profileForm.name || !profileForm.gender || !profileForm.age || !profileForm.password) { alert("Please fill in all fields!"); return; } try { console.log("Sending profile data to API..."); const response = await fetch("/api/save-user-profile", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(profileForm) }); console.log("Response received:", response.status, response.statusText); if (!response.ok) { console.error("Network error:", response); throw new Error(`Network error: ${response.status} ${response.statusText}`); } const result = await response.json(); console.log("API response:", result); if (result.error) { console.error("Profile save error:", result.error); alert("Error saving profile: " + result.error); return; } if (!result || !result.id) { console.error("Invalid response format:", result); alert("Error: Invalid response from server"); return; } console.log("Profile saved successfully:", result); setUserProfile(result); setShowProfileSetup(false); // Load chat history after successful profile creation setTimeout(()=>{ loadChatHistory(); }, 500); } catch (error) { console.error("Network error saving profile:", error); alert("Failed to save profile. Please check your connection and try again.\n\nError: " + error.message); } }; const saveChatMessage = async (role, content)=>{ try { await fetch("/api/save-chat-message", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ role, content }) }); // Update total chats count if (role === "user") { await fetch("/api/update-user-stats", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ totalChats: 1 }) }); } } catch (error) { console.error("Error saving message:", error); } }; // Text-to-speech function - only speak if autoSpeak is enabled const speakText = (text)=>{ // Don't speak if autoSpeak is disabled - check localStorage directly for latest value const savedAutoSpeak = localStorage.getItem("chachuAutoSpeak"); const shouldSpeak = savedAutoSpeak === null ? true : savedAutoSpeak === "true"; if (!shouldSpeak) return; if ("speechSynthesis" in window) { // Cancel any ongoing speech window.speechSynthesis.cancel(); const utterance = new SpeechSynthesisUtterance(text); // Configure voice settings for VERY male-like voice utterance.rate = 0.8; // Slower for kids utterance.pitch = 0.3; // MUCH lower pitch for deep male voice utterance.volume = 1; // Try to find the best male voice - be more aggressive const voices = window.speechSynthesis.getVoices(); // Filter out known female voices first const possibleMaleVoices = voices.filter((voice)=>!voice.name.toLowerCase().includes("female") && !voice.name.toLowerCase().includes("samantha") && !voice.name.toLowerCase().includes("victoria") && !voice.name.toLowerCase().includes("karen") && !voice.name.toLowerCase().includes("susan") && !voice.name.toLowerCase().includes("moira") && !voice.name.toLowerCase().includes("tessa") && !voice.name.toLowerCase().includes("ava") && !voice.name.toLowerCase().includes("serena") && !voice.name.toLowerCase().includes("zira") && !voice.name.toLowerCase().includes("hazel") && voice.lang.startsWith("en")); // Look for explicitly male voices const maleVoice = possibleMaleVoices.find((voice)=>voice.name.toLowerCase().includes("david") || voice.name.toLowerCase().includes("daniel") || voice.name.toLowerCase().includes("alex") || voice.name.toLowerCase().includes("fred") || voice.name.toLowerCase().includes("mark") || voice.name.toLowerCase().includes("male") || voice.name.toLowerCase().includes("google uk english male") || voice.name.toLowerCase().includes("microsoft david") || voice.name.toLowerCase().includes("microsoft mark") || voice.name.toLowerCase().includes("ricky") || voice.name.toLowerCase().includes("arthur") || voice.gender === "male") || possibleMaleVoices[0]; // fallback to first non-female voice if (maleVoice) { utterance.voice = maleVoice; console.log("Using voice:", maleVoice.name, "Language:", maleVoice.lang); } window.speechSynthesis.speak(utterance); } }; // Load voices when available React.useEffect(()=>{ if ("speechSynthesis" in window) { const loadVoices = ()=>{ window.speechSynthesis.getVoices(); }; if (window.speechSynthesis.onvoiceschanged !== undefined) { window.speechSynthesis.onvoiceschanged = loadVoices; } loadVoices(); } }, []); const handleImageUpload = async (file)=>{ if (!file) return; // Check file size (increase to 10MB for better compatibility) const maxSizeInMB = 10; const maxSizeInBytes = maxSizeInMB * 1024 * 1024; if (file.size > maxSizeInBytes) { alert(`Image is too large! Please choose an image smaller than ${maxSizeInMB}MB.`); return; } console.log("Starting image upload...", file.name, file.type, `${(file.size / 1024 / 1024).toFixed(2)}MB`); setIsUploading(true); try { // Compress and resize image before upload (more aggressive compression) const compressedFile = await compressImage(file, 0.6, 600); // 60% quality, max 600px width console.log("Image compressed:", `${(compressedFile.size / 1024 / 1024).toFixed(2)}MB`); // Convert to base64 for GPT Vision const base64 = await new Promise((resolve, reject)=>{ const reader = new FileReader(); reader.onload = ()=>resolve(reader.result); reader.onerror = reject; reader.readAsDataURL(compressedFile); }); // Upload the compressed file to get a URL for display const { url, error } = await upload({ file: compressedFile }); if (error) { console.error("Upload error:", error); alert("Failed to upload image: " + error); return; } console.log("Upload successful, URL:", url); console.log("Base64 created for GPT Vision"); // Store both the display URL and base64 for GPT Vision setUploadedImage({ url, base64 }); } catch (error) { console.error("Error uploading image:", error); alert("Error uploading image: " + error.message); } finally{ setIsUploading(false); } }; // Image compression function - more aggressive compression const compressImage = (file, quality = 0.6, maxWidth = 600)=>{ return new Promise((resolve)=>{ const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); const img = new Image(); img.onload = ()=>{ // Calculate new dimensions let { width, height } = img; // More aggressive resizing if (width > maxWidth || height > maxWidth) { if (width > height) { height = height * maxWidth / width; width = maxWidth; } else { width = width * maxWidth / height; height = maxWidth; } } canvas.width = width; canvas.height = height; // Draw and compress ctx.drawImage(img, 0, 0, width, height); canvas.toBlob(resolve, file.type, quality); }; img.src = URL.createObjectURL(file); }); }; const handleCameraCapture = (event)=>{ const file = event.target.files[0]; if (file) { console.log("File selected for upload:", file); handleImageUpload(file); } // Reset the input so the same file can be selected again event.target.value = ""; }; const removeUploadedImage = ()=>{ setUploadedImage(null); }; const sendMessage = async ()=>{ if (!inputMessage.trim() && !uploadedImage || isLoading) return; // Stop any ongoing speech when user sends a new question if ("speechSynthesis" in window) { window.speechSynthesis.cancel(); console.log("New question asked - stopped Chachu's speech"); } const userMessage = { role: "user", content: inputMessage.trim() || "What do you see in this image?", timestamp: new Date().toISOString(), image: uploadedImage }; const newMessages = [ ...messages, userMessage ]; setMessages(newMessages); setInputMessage(""); setUploadedImage(null); setIsLoading(true); try { // Save user message (only if authenticated) if (user) { await fetch("/api/save-chat-message", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ message_role: "user", message_content: userMessage.image ? `[Image uploaded] ${userMessage.content}` : userMessage.content }) }); } let assistantResponse; if (userMessage.image) { // Handle image analysis with GPT Vision const visionResponse = await fetch("/integrations/gpt-vision/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: [ { type: "text", text: `You are Chachu, a friendly AI companion for kids aged 5-12. A child has shared an image and asked: "${userMessage.content}". Please respond in a warm, encouraging, and age-appropriate way. Explain what you see in simple terms that a child can understand. Be curious and ask follow-up questions to keep the conversation engaging.` }, { type: "image_url", image_url: { url: userMessage.image.base64 || userMessage.image.url || userMessage.image } } ] } ] }) }); if (!visionResponse.ok) { throw new Error("Failed to analyze image"); } const visionData = await visionResponse.json(); assistantResponse = visionData.choices[0].message.content; } else { // Regular chat response - works for both guests and authenticated users const chatHistory = newMessages.map((msg)=>({ role: msg.role, content: msg.content })); const response = await fetch("/api/chat-with-chachu", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: chatHistory, userProfile: userProfile || null }) }); if (!response.ok) { throw new Error("Failed to get response"); } const data = await response.json(); assistantResponse = data.response; } // Check if Chachu wants to create an image to help explain something const shouldGenerateImage = assistantResponse.toLowerCase().includes("let me show you") || assistantResponse.toLowerCase().includes("here's a picture") || assistantResponse.toLowerCase().includes("i'll draw") || assistantResponse.toLowerCase().includes("let me create"); let generatedImage = null; if (shouldGenerateImage) { try { // Extract what to draw from the response or use a general prompt const drawingPrompt = `child-friendly, colorful illustration related to: ${inputMessage.trim()}`; const imageResponse = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(drawingPrompt)}`, { method: "GET" }); if (imageResponse.ok) { const imageData = await imageResponse.json(); if (imageData.data && imageData.data[0]) { generatedImage = imageData.data[0]; } } } catch (error) { console.error("Error generating image:", error); } } const assistantMessage = { role: "assistant", content: assistantResponse, timestamp: new Date().toISOString(), generatedImage: generatedImage }; setMessages([ ...newMessages, assistantMessage ]); // Save assistant message (only if authenticated) if (user) { await fetch("/api/save-chat-message", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ message_role: "assistant", message_content: generatedImage ? `${assistantResponse} [Generated image: ${generatedImage}]` : assistantResponse }) }); } // Speak the response using the speakText function speakText(assistantResponse); } catch (error) { console.error("Error:", error); const errorMessage = { role: "assistant", content: "Oops! I had trouble understanding that. Can you try asking me again? 😊", timestamp: new Date().toISOString() }; setMessages([ ...newMessages, errorMessage ]); } finally{ setIsLoading(false); } }; const handleKeyPress = (e)=>{ if (e.key === "Enter") { sendMessage(); } }; const handleSignOut = async ()=>{ try { console.log("Signing out..."); // Clear any local storage first localStorage.removeItem("chachuAutoSpeak"); // Clear state setUserProfile(null); setMessages([]); setShowChatBox(false); // Use the auth system's signOut with proper redirect await signOut({ callbackUrl: "/account/signin", redirect: true }); } catch (error) { console.error("Sign out error:", error); // If auth signOut fails, fallback to manual redirect window.location.href = "/account/signin"; } }; // Handle Chachu picture tap const handleChachuTap = ()=>{ setShowChatBox(true); }; // Profile Setup Form - Made smaller but still visible if (showProfileSetup && user) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-indigo-900 via-purple-900 to-black flex items-center justify-center relative overflow-hidden p-4", __source: { fileName: "", lineNumber: 614, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0", __source: { fileName: "", lineNumber: 616, columnNumber: 9 }, __self: this }, [ ...Array.from({ length: 50 }) ].map((_, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "absolute bg-white rounded-full animate-pulse", style: { left: `${Math.random() * 100}%`, top: `${Math.random() * 100}%`, width: `${Math.random() * 3 + 1}px`, height: `${Math.random() * 3 + 1}px`, animationDelay: `${Math.random() * 2}s`, animationDuration: `${Math.random() * 3 + 2}s` }, __source: { fileName: "", lineNumber: 618, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 backdrop-blur-sm rounded-3xl p-6 md:p-12 max-w-lg md:max-w-3xl w-full mx-4 z-10 shadow-2xl border-2 border-purple-400/30", __source: { fileName: "", lineNumber: 633, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 634, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/0bfb3b57-4f95-481e-a1a0-3a46fca61cb7/-/format/auto/", alt: "Chachu", className: "w-32 h-32 md:w-40 md:h-40 mx-auto mb-6 rounded-full shadow-2xl", __source: { fileName: "", lineNumber: 635, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-3xl md:text-5xl font-bold text-white font-comic mb-4", __source: { fileName: "", lineNumber: 640, columnNumber: 13 }, __self: this }, "Hello! I'm Chachu 👋"), /*#__PURE__*/ React.createElement("p", { className: "text-lg md:text-2xl text-purple-200 leading-relaxed", __source: { fileName: "", lineNumber: 643, columnNumber: 13 }, __self: this }, "Tell me about yourself so I can remember you!")), /*#__PURE__*/ React.createElement("form", { onSubmit: saveUserProfile, className: "space-y-6", __source: { fileName: "", lineNumber: 648, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 649, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-white text-xl md:text-2xl font-bold mb-3", __source: { fileName: "", lineNumber: 650, columnNumber: 15 }, __self: this }, "What's your name?"), /*#__PURE__*/ React.createElement("input", { type: "text", value: profileForm.name, onChange: (e)=>setProfileForm({ ...profileForm, name: e.target.value }), className: "w-full p-4 md:p-6 text-lg md:text-xl rounded-2xl bg-white/90 text-gray-800 focus:outline-none focus:ring-4 focus:ring-purple-400 shadow-lg", placeholder: "Enter your name", required: true, __source: { fileName: "", lineNumber: 653, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 665, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-white text-xl md:text-2xl font-bold mb-3", __source: { fileName: "", lineNumber: 666, columnNumber: 15 }, __self: this }, "Are you a boy or girl?"), /*#__PURE__*/ React.createElement("select", { value: profileForm.gender, onChange: (e)=>setProfileForm({ ...profileForm, gender: e.target.value }), className: "w-full p-4 md:p-6 text-lg md:text-xl rounded-2xl bg-white/90 text-gray-800 focus:outline-none focus:ring-4 focus:ring-purple-400 shadow-lg", required: true, __source: { fileName: "", lineNumber: 669, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 677, columnNumber: 17 }, __self: this }, "Choose..."), /*#__PURE__*/ React.createElement("option", { value: "boy", __source: { fileName: "", lineNumber: 678, columnNumber: 17 }, __self: this }, "Boy"), /*#__PURE__*/ React.createElement("option", { value: "girl", __source: { fileName: "", lineNumber: 679, columnNumber: 17 }, __self: this }, "Girl"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 683, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-white text-xl md:text-2xl font-bold mb-3", __source: { fileName: "", lineNumber: 684, columnNumber: 15 }, __self: this }, "How old are you?"), /*#__PURE__*/ React.createElement("select", { value: profileForm.age, onChange: (e)=>setProfileForm({ ...profileForm, age: e.target.value }), className: "w-full p-4 md:p-6 text-lg md:text-xl rounded-2xl bg-white/90 text-gray-800 focus:outline-none focus:ring-4 focus:ring-purple-400 shadow-lg", required: true, __source: { fileName: "", lineNumber: 687, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 695, columnNumber: 17 }, __self: this }, "Choose..."), [ 5, 6, 7, 8, 9, 10, 11, 12 ].map((age)=>/*#__PURE__*/ React.createElement("option", { key: age, value: age, __source: { fileName: "", lineNumber: 697, columnNumber: 19 }, __self: this }, age, " years old")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 704, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-white text-xl md:text-2xl font-bold mb-3", __source: { fileName: "", lineNumber: 705, columnNumber: 15 }, __self: this }, "Create a password (so only you can access your profile)"), /*#__PURE__*/ React.createElement("input", { type: "password", value: profileForm.password, onChange: (e)=>setProfileForm({ ...profileForm, password: e.target.value }), className: "w-full p-4 md:p-6 text-lg md:text-xl rounded-2xl bg-white/90 text-gray-800 focus:outline-none focus:ring-4 focus:ring-purple-400 shadow-lg", placeholder: "Enter a password", required: true, __source: { fileName: "", lineNumber: 708, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-4 md:py-6 px-6 text-xl md:text-2xl rounded-2xl transition-colors shadow-lg hover:shadow-purple-500/50 mt-8", __source: { fileName: "", lineNumber: 720, columnNumber: 13 }, __self: this }, "Let's Chat! 🚀"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 729, columnNumber: 9 }, __self: this }, ` @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap'); .font-comic { font-family: 'Comic Neue', cursive; } `)); } // Splash Screen if (showSplash) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-indigo-900 via-purple-900 to-black flex items-center justify-center relative overflow-hidden", __source: { fileName: "", lineNumber: 740, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0", __source: { fileName: "", lineNumber: 742, columnNumber: 9 }, __self: this }, [ ...Array.from({ length: 50 }) ].map((_, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "absolute bg-white rounded-full animate-pulse", style: { left: `${Math.random() * 100}%`, top: `${Math.random() * 100}%`, width: `${Math.random() * 3 + 1}px`, height: `${Math.random() * 3 + 1}px`, animationDelay: `${Math.random() * 2}s`, animationDuration: `${Math.random() * 3 + 2}s` }, __source: { fileName: "", lineNumber: 744, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "text-center z-10", __source: { fileName: "", lineNumber: 760, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/0bfb3b57-4f95-481e-a1a0-3a46fca61cb7/-/format/auto/", alt: "Chachu GPT Logo", className: "w-48 h-48 mx-auto mb-8 rounded-full shadow-2xl animate-bounce", __source: { fileName: "", lineNumber: 761, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-6xl font-bold text-white mb-4 font-comic", __source: { fileName: "", lineNumber: 766, columnNumber: 11 }, __self: this }, "Chachu GPT"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-purple-200 animate-pulse", __source: { fileName: "", lineNumber: 769, columnNumber: 11 }, __self: this }, "Your Digital Uncle is Loading...")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 774, columnNumber: 9 }, __self: this }, ` @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap'); .font-comic { font-family: 'Comic Neue', cursive; } `)); } return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-indigo-900 via-purple-900 to-black relative overflow-hidden", __source: { fileName: "", lineNumber: 783, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0", __source: { fileName: "", lineNumber: 785, columnNumber: 7 }, __self: this }, [ ...Array.from({ length: 100 }) ].map((_, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "absolute bg-white rounded-full animate-pulse", style: { left: `${Math.random() * 100}%`, top: `${Math.random() * 100}%`, width: `${Math.random() * 3 + 1}px`, height: `${Math.random() * 3 + 1}px`, animationDelay: `${Math.random() * 2}s`, animationDuration: `${Math.random() * 4 + 2}s` }, __source: { fileName: "", lineNumber: 787, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "relative z-10 p-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 803, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white font-comic text-lg", __source: { fileName: "", lineNumber: 804, columnNumber: 9 }, __self: this }, userProfile && /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 806, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 807, columnNumber: 15 }, __self: this }, "Hello ", userProfile.gender === "girl" ? "Princess" : "Junior", " ", userProfile.name, "! 👋"), /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 backdrop-blur-sm rounded-lg px-3 py-1 text-sm", __source: { fileName: "", lineNumber: 812, columnNumber: 15 }, __self: this }, "🎮 ", userProfile.games_won || 0, " wins | 📚", " ", userProfile.homework_helps || 0, " helps | 💡", " ", userProfile.life_lessons_learned || 0, " lessons")), !user && /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 820, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-purple-200 text-sm", __source: { fileName: "", lineNumber: 821, columnNumber: 15 }, __self: this }, "🎉 You can chat as a guest or sign up to save your conversations!"))), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-3", __source: { fileName: "", lineNumber: 828, columnNumber: 9 }, __self: this }, userProfile && /*#__PURE__*/ React.createElement("a", { href: "/profile", className: "bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition-colors", __source: { fileName: "", lineNumber: 830, columnNumber: 13 }, __self: this }, "📊 Profile"), user ? /*#__PURE__*/ React.createElement("button", { onClick: handleSignOut, className: "bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition-colors", __source: { fileName: "", lineNumber: 838, columnNumber: 13 }, __self: this }, "Sign Out") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("a", { href: "/account/signin", className: "bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition-colors", __source: { fileName: "", lineNumber: 846, columnNumber: 15 }, __self: this }, "Sign In"), /*#__PURE__*/ React.createElement("a", { href: "/account/signup", className: "bg-yellow-400 hover:bg-yellow-500 text-black px-4 py-2 rounded-lg transition-colors font-bold", __source: { fileName: "", lineNumber: 852, columnNumber: 15 }, __self: this }, "🆕 Sign Up FREE!")))), !showChatBox ? /* Giant Chachu Picture with Tap to Chat + What I Can Do Section */ /*#__PURE__*/ React.createElement("div", { className: "relative z-10 flex flex-col items-center justify-center min-h-[80vh] text-center px-4", __source: { fileName: "", lineNumber: 865, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { onClick: handleChachuTap, className: "cursor-pointer transform transition-transform duration-300 hover:scale-105 active:scale-95", __source: { fileName: "", lineNumber: 866, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/0bfb3b57-4f95-481e-a1a0-3a46fca61cb7/-/format/auto/", alt: "Chachu", className: "w-64 h-64 md:w-80 md:h-80 lg:w-96 lg:h-96 mx-auto mb-8 rounded-full shadow-2xl", __source: { fileName: "", lineNumber: 870, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "bg-white/20 backdrop-blur-sm rounded-3xl p-6 max-w-md mx-auto mb-8", __source: { fileName: "", lineNumber: 875, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-6xl font-bold text-white font-comic mb-4", __source: { fileName: "", lineNumber: 876, columnNumber: 15 }, __self: this }, "Hi Kids! I'm Chachu! 👋"), /*#__PURE__*/ React.createElement("p", { className: "text-xl md:text-2xl text-purple-200 mb-6", __source: { fileName: "", lineNumber: 879, columnNumber: 15 }, __self: this }, "Your Friendly Digital Uncle! 👨‍💻"), /*#__PURE__*/ React.createElement("div", { className: "animate-pulse bg-purple-600 text-white px-8 py-4 rounded-2xl text-xl font-bold", __source: { fileName: "", lineNumber: 882, columnNumber: 15 }, __self: this }, "👆 Tap me to start chatting!"), /*#__PURE__*/ React.createElement("p", { className: "text-purple-200 text-lg mt-4", __source: { fileName: "", lineNumber: 885, columnNumber: 15 }, __self: this }, "No signup needed - just start chatting! 🚀"))), !user && /*#__PURE__*/ React.createElement("div", { className: "bg-yellow-400/20 backdrop-blur-sm rounded-3xl p-6 max-w-4xl mx-auto mb-6 border-2 border-yellow-400/30", __source: { fileName: "", lineNumber: 893, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl md:text-3xl font-bold text-yellow-300 font-comic mb-4", __source: { fileName: "", lineNumber: 894, columnNumber: 15 }, __self: this }, "⭐ Want to Save Your Chats & Track Your Progress?"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4 text-center mb-6", __source: { fileName: "", lineNumber: 897, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 rounded-2xl p-4", __source: { fileName: "", lineNumber: 898, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-3xl mb-2", __source: { fileName: "", lineNumber: 899, columnNumber: 19 }, __self: this }, "💾"), /*#__PURE__*/ React.createElement("h4", { className: "text-white font-bold mb-2", __source: { fileName: "", lineNumber: 900, columnNumber: 19 }, __self: this }, "Save Your Chats"), /*#__PURE__*/ React.createElement("p", { className: "text-purple-200 text-sm", __source: { fileName: "", lineNumber: 901, columnNumber: 19 }, __self: this }, "I'll remember everything we talk about!")), /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 rounded-2xl p-4", __source: { fileName: "", lineNumber: 905, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-3xl mb-2", __source: { fileName: "", lineNumber: 906, columnNumber: 19 }, __self: this }, "📊"), /*#__PURE__*/ React.createElement("h4", { className: "text-white font-bold mb-2", __source: { fileName: "", lineNumber: 907, columnNumber: 19 }, __self: this }, "Track Progress"), /*#__PURE__*/ React.createElement("p", { className: "text-purple-200 text-sm", __source: { fileName: "", lineNumber: 908, columnNumber: 19 }, __self: this }, "See how many games you've won & lessons learned!")), /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 rounded-2xl p-4", __source: { fileName: "", lineNumber: 912, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-3xl mb-2", __source: { fileName: "", lineNumber: 913, columnNumber: 19 }, __self: this }, "🎯"), /*#__PURE__*/ React.createElement("h4", { className: "text-white font-bold mb-2", __source: { fileName: "", lineNumber: 914, columnNumber: 19 }, __self: this }, "Personal Just for You"), /*#__PURE__*/ React.createElement("p", { className: "text-purple-200 text-sm", __source: { fileName: "", lineNumber: 917, columnNumber: 19 }, __self: this }, "I'll know your name, age, and what you like!"))), /*#__PURE__*/ React.createElement("a", { href: "/account/signup", className: "inline-block bg-yellow-400 hover:bg-yellow-500 text-black px-8 py-4 rounded-2xl font-bold text-xl transition-colors", __source: { fileName: "", lineNumber: 922, columnNumber: 15 }, __self: this }, "🎁 Sign Up FREE - It Only Takes 1 Minute!"), /*#__PURE__*/ React.createElement("p", { className: "text-purple-200 text-sm mt-2", __source: { fileName: "", lineNumber: 928, columnNumber: 15 }, __self: this }, "(You can always chat as a guest without signing up!)")), /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 backdrop-blur-sm rounded-3xl p-6 max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 935, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl md:text-3xl font-bold text-white font-comic mb-6", __source: { fileName: "", lineNumber: 936, columnNumber: 13 }, __self: this }, "✨ What I Can Help You With!"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 text-left", __source: { fileName: "", lineNumber: 939, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 rounded-2xl p-4", __source: { fileName: "", lineNumber: 940, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-3xl mb-2", __source: { fileName: "", lineNumber: 941, columnNumber: 17 }, __self: this }, "🎓"), /*#__PURE__*/ React.createElement("h4", { className: "text-lg font-bold text-white mb-2", __source: { fileName: "", lineNumber: 942, columnNumber: 17 }, __self: this }, "Help with Homework"), /*#__PURE__*/ React.createElement("p", { className: "text-purple-200 text-sm", __source: { fileName: "", lineNumber: 945, columnNumber: 17 }, __self: this }, "Math, science, reading - I'll explain everything super simply!")), /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 rounded-2xl p-4", __source: { fileName: "", lineNumber: 950, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-3xl mb-2", __source: { fileName: "", lineNumber: 951, columnNumber: 17 }, __self: this }, "🎮"), /*#__PURE__*/ React.createElement("h4", { className: "text-lg font-bold text-white mb-2", __source: { fileName: "", lineNumber: 952, columnNumber: 17 }, __self: this }, "Play Awesome Games"), /*#__PURE__*/ React.createElement("p", { className: "text-purple-200 text-sm", __source: { fileName: "", lineNumber: 955, columnNumber: 17 }, __self: this }, "Word puzzles, riddles, quizzes, and tons of fun activities!")), /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 rounded-2xl p-4", __source: { fileName: "", lineNumber: 960, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-3xl mb-2", __source: { fileName: "", lineNumber: 961, columnNumber: 17 }, __self: this }, "📷"), /*#__PURE__*/ React.createElement("h4", { className: "text-lg font-bold text-white mb-2", __source: { fileName: "", lineNumber: 962, columnNumber: 17 }, __self: this }, "Tell You About Pictures"), /*#__PURE__*/ React.createElement("p", { className: "text-purple-200 text-sm", __source: { fileName: "", lineNumber: 965, columnNumber: 17 }, __self: this }, "Show me any photo and I'll tell you cool stuff about it!")), /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 rounded-2xl p-4", __source: { fileName: "", lineNumber: 970, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-3xl mb-2", __source: { fileName: "", lineNumber: 971, columnNumber: 17 }, __self: this }, "📚"), /*#__PURE__*/ React.createElement("h4", { className: "text-lg font-bold text-white mb-2", __source: { fileName: "", lineNumber: 972, columnNumber: 17 }, __self: this }, "Tell Amazing Stories"), /*#__PURE__*/ React.createElement("p", { className: "text-purple-200 text-sm", __source: { fileName: "", lineNumber: 975, columnNumber: 17 }, __self: this }, "Adventure stories, fairy tales, or even stories about YOU!")), /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 rounded-2xl p-4", __source: { fileName: "", lineNumber: 980, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-3xl mb-2", __source: { fileName: "", lineNumber: 981, columnNumber: 17 }, __self: this }, "🤔"), /*#__PURE__*/ React.createElement("h4", { className: "text-lg font-bold text-white mb-2", __source: { fileName: "", lineNumber: 982, columnNumber: 17 }, __self: this }, "Answer ALL Your Questions"), /*#__PURE__*/ React.createElement("p", { className: "text-purple-200 text-sm", __source: { fileName: "", lineNumber: 985, columnNumber: 17 }, __self: this }, "Ask me about animals, space, how things work - anything!")), /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 rounded-2xl p-4", __source: { fileName: "", lineNumber: 990, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-3xl mb-2", __source: { fileName: "", lineNumber: 991, columnNumber: 17 }, __self: this }, "💡"), /*#__PURE__*/ React.createElement("h4", { className: "text-lg font-bold text-white mb-2", __source: { fileName: "", lineNumber: 992, columnNumber: 17 }, __self: this }, "Teach You Cool Stuff"), /*#__PURE__*/ React.createElement("p", { className: "text-purple-200 text-sm", __source: { fileName: "", lineNumber: 995, columnNumber: 17 }, __self: this }, "Being kind, making friends, and becoming super smart!"))), /*#__PURE__*/ React.createElement("div", { className: "mt-6 text-center", __source: { fileName: "", lineNumber: 1001, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-white text-lg font-comic", __source: { fileName: "", lineNumber: 1002, columnNumber: 15 }, __self: this }, "🎤 And I can talk out loud to you too!"), /*#__PURE__*/ React.createElement("p", { className: "text-purple-200 text-sm mt-2", __source: { fileName: "", lineNumber: 1005, columnNumber: 15 }, __self: this }, "(Perfect for kids who are still learning to read!)")))) : /* Chat Interface - Kid-Friendly */ /*#__PURE__*/ React.createElement("div", { className: "relative z-10 px-4 pb-4", __source: { fileName: "", lineNumber: 1013, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-6", __source: { fileName: "", lineNumber: 1015, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/0bfb3b57-4f95-481e-a1a0-3a46fca61cb7/-/format/auto/", alt: "Chachu", className: "w-20 h-20 mx-auto mb-2 rounded-full shadow-lg", __source: { fileName: "", lineNumber: 1016, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-white font-comic", __source: { fileName: "", lineNumber: 1021, columnNumber: 13 }, __self: this }, "Chachu - Your Friendly Helper!"), !user && /*#__PURE__*/ React.createElement("p", { className: "text-purple-200 text-sm mt-2", __source: { fileName: "", lineNumber: 1025, columnNumber: 15 }, __self: this }, "💡 Sign up to save our chat and track your progress!")), /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto mb-6", __source: { fileName: "", lineNumber: 1032, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 backdrop-blur-sm rounded-3xl p-8 min-h-[500px] max-h-[600px] overflow-y-auto", __source: { fileName: "", lineNumber: 1033, columnNumber: 13 }, __self: this }, messages.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "text-center text-white", __source: { fileName: "", lineNumber: 1035, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-comic mb-6", __source: { fileName: "", lineNumber: 1036, columnNumber: 19 }, __self: this }, "Hey there, awesome kid! What would you like to chat about? 😊"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-purple-200 mb-4", __source: { fileName: "", lineNumber: 1040, columnNumber: 19 }, __self: this }, "📷 Show me a photo or just ask me anything!"), /*#__PURE__*/ React.createElement("div", { className: "bg-white/20 rounded-2xl p-4 max-w-md mx-auto", __source: { fileName: "", lineNumber: 1043, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg text-white font-comic", __source: { fileName: "", lineNumber: 1044, columnNumber: 21 }, __self: this }, "Try asking me:"), /*#__PURE__*/ React.createElement("ul", { className: "text-purple-200 text-sm mt-2 space-y-1", __source: { fileName: "", lineNumber: 1047, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 1048, columnNumber: 23 }, __self: this }, '• "Help me with my math homework"'), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 1049, columnNumber: 23 }, __self: this }, '• "Tell me about dinosaurs"'), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 1050, columnNumber: 23 }, __self: this }, '• "Let\'s play a word game"'), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 1051, columnNumber: 23 }, __self: this }, '• "Tell me a funny story"')))) : /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 1056, columnNumber: 17 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex ${message.role === "user" ? "justify-end" : "justify-start"}`, __source: { fileName: "", lineNumber: 1058, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `max-w-2xl p-6 rounded-3xl text-lg leading-relaxed ${message.role === "user" ? "bg-purple-600 text-white" : "bg-white text-gray-800"}`, __source: { fileName: "", lineNumber: 1062, columnNumber: 23 }, __self: this }, message.image && /*#__PURE__*/ React.createElement("img", { src: message.image, alt: "Your photo", className: "w-full rounded-2xl mb-4 max-h-64 object-cover", __source: { fileName: "", lineNumber: 1070, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 1076, columnNumber: 25 }, __self: this }, message.content), message.foundImage && /*#__PURE__*/ React.createElement("img", { src: message.foundImage, alt: "Picture from Chachu", className: "w-full rounded-2xl mt-4 max-h-80 object-cover", __source: { fileName: "", lineNumber: 1078, columnNumber: 27 }, __self: this }), message.generatedImage && /*#__PURE__*/ React.createElement("img", { src: message.generatedImage, alt: "Picture made by Chachu", className: "w-full rounded-2xl mt-4 max-h-80 object-cover", __source: { fileName: "", lineNumber: 1085, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-sm opacity-70 mt-3", __source: { fileName: "", lineNumber: 1091, columnNumber: 25 }, __self: this }, new Date(message.timestamp).toLocaleTimeString())))), isLoading && /*#__PURE__*/ React.createElement("div", { className: "flex justify-start", __source: { fileName: "", lineNumber: 1099, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white text-gray-800 p-6 rounded-3xl", __source: { fileName: "", lineNumber: 1100, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-3", __source: { fileName: "", lineNumber: 1101, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-bounce text-2xl", __source: { fileName: "", lineNumber: 1102, columnNumber: 27 }, __self: this }, "🤔"), /*#__PURE__*/ React.createElement("span", { className: "text-lg", __source: { fileName: "", lineNumber: 1103, columnNumber: 27 }, __self: this }, "Chachu is thinking of the best answer..."))))))), /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 1116, columnNumber: 11 }, __self: this }, uploadedImage && /*#__PURE__*/ React.createElement("div", { className: "mb-6 text-center", __source: { fileName: "", lineNumber: 1119, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative inline-block", __source: { fileName: "", lineNumber: 1120, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: uploadedImage, alt: "Your photo to send", className: "max-h-48 rounded-2xl border-4 border-purple-400", __source: { fileName: "", lineNumber: 1121, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: removeUploadedImage, className: "absolute -top-3 -right-3 bg-red-500 text-white rounded-full w-8 h-8 flex items-center justify-center text-lg hover:bg-red-600", __source: { fileName: "", lineNumber: 1126, columnNumber: 19 }, __self: this }, "×"))), /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 backdrop-blur-sm rounded-3xl p-6", __source: { fileName: "", lineNumber: 1136, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 mb-6", __source: { fileName: "", lineNumber: 1137, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 1139, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", capture: "environment", onChange: handleCameraCapture, className: "absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10", disabled: isUploading, __source: { fileName: "", lineNumber: 1140, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: `px-6 py-3 rounded-2xl font-bold text-lg transition-colors ${isUploading ? "bg-gray-500 cursor-not-allowed" : "bg-green-600 hover:bg-green-700"} text-white`, disabled: isUploading, __source: { fileName: "", lineNumber: 1148, columnNumber: 19 }, __self: this }, isUploading ? "📤 Uploading your photo..." : "📷 Take a Photo"))), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 1163, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: inputMessage, onChange: (e)=>setInputMessage(e.target.value), onKeyPress: (e)=>e.key === "Enter" && sendMessage(), placeholder: uploadedImage ? "Ask me about your photo..." : "Type your message to Chachu here...", className: "flex-1 bg-white text-gray-800 px-6 py-4 rounded-2xl focus:outline-none focus:ring-4 focus:ring-purple-400 text-xl", disabled: isLoading, __source: { fileName: "", lineNumber: 1164, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: sendMessage, disabled: isLoading || !inputMessage.trim() && !uploadedImage, className: `px-8 py-4 rounded-2xl font-bold text-xl transition-colors ${isLoading || !inputMessage.trim() && !uploadedImage ? "bg-gray-500 cursor-not-allowed" : "bg-purple-600 hover:bg-purple-700"} text-white`, __source: { fileName: "", lineNumber: 1177, columnNumber: 17 }, __self: this }, isLoading ? "⏳" : "Send 🚀"))), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-4", __source: { fileName: "", lineNumber: 1193, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-purple-200 text-lg font-comic", __source: { fileName: "", lineNumber: 1194, columnNumber: 15 }, __self: this }, "📷 Take a photo to ask about it, or just type anything you want to know!"), !user && /*#__PURE__*/ React.createElement("p", { className: "text-yellow-300 text-sm mt-2 animate-pulse", __source: { fileName: "", lineNumber: 1199, columnNumber: 17 }, __self: this }, "💡 Sign up to save this chat forever!")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 1208, columnNumber: 7 }, __self: this }, ` @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap'); .font-comic { font-family: 'Comic Neue', cursive; } `)); }