function MainComponent() { const [currentStudent, setCurrentStudent] = useState(""); const [showGame, setShowGame] = useState(false); const [step, setStep] = useState(0); const [lesson, setLesson] = useState(""); const [code, setCode] = useState(""); const [loading, setLoading] = useState(false); const [streamingMessage, setStreamingMessage] = useState(""); const [characterName, setCharacterName] = useState(""); const [superpower, setSuperpower] = useState(""); const [chapter, setChapter] = useState(1); const [symbolExplanations, setSymbolExplanations] = useState({}); const [goldieMessage, setGoldieMessage] = useState(""); const [drawings, setDrawings] = useState([]); const [isListening, setIsListening] = useState(false); const [transcript, setTranscript] = useState(""); const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingMessage, onFinish: (message)=>{ setLesson(message); setLoading(false); } }); const generateLesson = async ()=>{ setLoading(true); const prompt = `Create a fun, interactive coding lesson for ${currentStudent} who is ${currentStudent === "Lalu" ? "11" : "9"} years old. Format the response as follows: 🎯 LESSON TITLE 📝 CONCEPT EXPLANATION (Explain the concept in simple terms) ✨ EXAMPLE (Show a simple code example) 🎮 PRACTICE (Give a fun exercise to try) Make it engaging and easy to understand. Use emojis and simple examples.`; const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: prompt } ], stream: true }) }); handleStreamResponse(response); }; const checkCode = async ()=>{ setLoading(true); const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: `Review this code for ${currentStudent} who is learning about variables. Keep feedback VERY short and fun: 1. Start with a short celebration of what they did well 2. If there's an error, explain it in one simple sentence 3. End with a fun superhero-themed encouragement Example format: "POW! Your code is working! ⚡ 🌟 Power Unlocked: Variable Master! Ready to try another superpower? Let's go! 💪" Their code: ${code}` } ], stream: true }) }); handleStreamResponse(response); }; const handleStartLearning = (student)=>{ setCurrentStudent(student); setShowGame(true); generateIntro(student); }; const generateIntro = async (student)=>{ setLoading(true); const prompt = `Create a fun, engaging introduction for ${student} who is ${student === "Lalu" ? "11" : "9"} years old. Make it about becoming a coding superhero. Ask them to choose their superhero name and what superpower they'd like to have. Keep it very short and fun, like talking to a friend. Use emojis.`; const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: prompt } ], stream: true }) }); handleStreamResponse(response); }; const handleNext = ()=>{ setStep(step + 1); generateNextStep(); }; const askGoldie = async (question)=>{ setLoading(true); const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: `You are Goldie, a friendly coding mentor. ${currentStudent} is ${currentStudent === "Lalu" ? "11" : "9"} years old and learning about variables in JavaScript. They're working on storing their superhero name (${characterName}) and superpower (${superpower}). Their question is: "${question}" Keep your answer: 1. Very short (2-3 sentences max) 2. Use superhero examples 3. Be encouraging and fun 4. Use emojis 5. If possible, relate to their specific hero name or power` } ], stream: true }) }); handleStreamResponse(response); }; const generateNextStep = async ()=>{ setLoading(true); const prompts = [ `Let's start Chapter 1 of ${currentStudent}'s coding journey! First, explain what a variable is in a fun way, using their superhero theme. Compare it to a special container that can hold their superpowers. Keep it very short and simple, just 2-3 sentences. Use emojis. Then explain: "See those quotation marks (" ")? They're like special containers that hold words - they tell the computer 'everything inside here is text'" End by asking if they're ready to see how we can store their superpower in code.`, `Chapter 1 continues! Now let's look at how we store your superpower "${superpower}" in a special container called a variable. First, show them: let superpower = "${superpower}"; Then explain: "See that semicolon (;) at the end? It's like a period at the end of a sentence - it tells the computer 'I'm done with this instruction!'" Ask them to try copying the code exactly as shown.`, `Final part of Chapter 1! Now it's your turn to create a variable for your superhero name "${characterName}". Remember: - Use 'let' to create your special container - Put your hero name in quotes (" ") - Don't forget the semicolon (;) at the end! Try it yourself - it's just like what we did with the superpower, but this time use 'heroName' as your variable name!` ]; const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: prompts[step] } ], stream: true }) }); handleStreamResponse(response); }; if (!showGame) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-purple-100 to-blue-200 p-8", __source: { fileName: "", lineNumber: 177, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto text-center", __source: { fileName: "", lineNumber: 178, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-poppins mb-8 text-purple-800", __source: { fileName: "", lineNumber: 179, columnNumber: 11 }, __self: this }, "Code Adventure! 🚀"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 182, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleStartLearning("Lalu"), className: "p-6 bg-white rounded-xl shadow-lg hover:shadow-xl transition-all", __source: { fileName: "", lineNumber: 183, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl mb-2", __source: { fileName: "", lineNumber: 187, columnNumber: 15 }, __self: this }, "👩‍💻 Lalu"), /*#__PURE__*/ React.createElement("div", { className: "text-purple-600", __source: { fileName: "", lineNumber: 188, columnNumber: 15 }, __self: this }, "11 years old")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleStartLearning("Sabu"), className: "p-6 bg-white rounded-xl shadow-lg hover:shadow-xl transition-all", __source: { fileName: "", lineNumber: 190, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl mb-2", __source: { fileName: "", lineNumber: 194, columnNumber: 15 }, __self: this }, "👧 Sabu"), /*#__PURE__*/ React.createElement("div", { className: "text-purple-600", __source: { fileName: "", lineNumber: 195, columnNumber: 15 }, __self: this }, "9 years old"))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 border-2 border-yellow-200 rounded-xl p-6 bg-gradient-to-r from-yellow-50 to-orange-50", __source: { fileName: "", lineNumber: 198, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-poppins text-xl text-yellow-800 mb-4", __source: { fileName: "", lineNumber: 199, columnNumber: 13 }, __self: this }, "Ask Goldie to Draw! 🎨"), /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Tell Goldie what to draw...", className: "w-full p-4 border-2 border-yellow-200 rounded-xl mb-4", onKeyDown: async (e)=>{ if (e.key === "Enter" && e.target.value.trim()) { const prompt = e.target.value; setLoading(true); e.target.value = ""; const response = await fetch(`/integrations/stable-diffusion-v-3/?prompt=${encodeURIComponent(prompt)}`); const data = await response.json(); if (data.data && data.data[0]) { setDrawings((prev)=>[ data.data[0], ...prev ]); setLoading(false); } } }, __source: { fileName: "", lineNumber: 202, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 222, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-1/2", __source: { fileName: "", lineNumber: 223, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 224, columnNumber: 17 }, __self: this }, loading && /*#__PURE__*/ React.createElement("div", { className: "animate-pulse text-center p-4", __source: { fileName: "", lineNumber: 226, columnNumber: 21 }, __self: this }, "🎨 Goldie is drawing... ✨"))), /*#__PURE__*/ React.createElement("div", { className: "w-1/2", __source: { fileName: "", lineNumber: 232, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 233, columnNumber: 17 }, __self: this }, drawings.map((drawing, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "relative group cursor-pointer", __source: { fileName: "", lineNumber: 235, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: drawing, alt: `Goldie's drawing ${index + 1}`, className: "w-full h-32 object-cover rounded-lg shadow-md transition-transform transform group-hover:scale-105", onClick: ()=>{ setStreamingMessage(drawing); }, __source: { fileName: "", lineNumber: 236, columnNumber: 23 }, __self: this }))))))), transcript && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 backdrop-blur-md bg-black bg-opacity-50 flex items-center justify-center animate-fadeIn", __source: { fileName: "", lineNumber: 251, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl w-full mx-4 p-8 rounded-xl border-2 border-[#00ff00] shadow-[0_0_30px_rgba(0,255,0,0.3)] animate-slideIn", __source: { fileName: "", lineNumber: 252, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 253, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-1", __source: { fileName: "", lineNumber: 254, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-1 h-8 bg-[#00ff00] animate-soundwave", __source: { fileName: "", lineNumber: 255, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-1 h-8 bg-[#00ff00] animate-soundwave animation-delay-200", __source: { fileName: "", lineNumber: 256, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-1 h-8 bg-[#00ff00] animate-soundwave animation-delay-400", __source: { fileName: "", lineNumber: 257, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-[#00ff00] font-mono text-2xl whitespace-pre-wrap animate-typewriter", __source: { fileName: "", lineNumber: 259, columnNumber: 19 }, __self: this }, transcript)))), streamingMessage && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 backdrop-blur-md bg-black bg-opacity-50 flex items-center justify-center animate-fadeIn", __source: { fileName: "", lineNumber: 267, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative max-w-4xl w-full mx-4 p-8 rounded-xl border-2 border-[#00ff00] shadow-[0_0_30px_rgba(0,255,0,0.3)] animate-slideIn", __source: { fileName: "", lineNumber: 268, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setStreamingMessage(""); setIsListening(true); const recognition = new window.webkitSpeechRecognition(); recognition.continuous = false; recognition.interimResults = true; recognition.onresult = async (event)=>{ const currentTranscript = event.results[0][0].transcript; setTranscript(currentTranscript); if (event.results[0].isFinal) { setTimeout(async ()=>{ setLoading(true); const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: currentTranscript } ], stream: true }) }); handleStreamResponse(response); }, 3000); } }; recognition.onend = ()=>{ setIsListening(false); setTranscript(""); }; recognition.start(); }, className: "absolute top-4 right-4 text-[#00ff00] hover:text-[#00cc00] transition-colors", __source: { fileName: "", lineNumber: 269, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times text-xl", __source: { fileName: "", lineNumber: 307, columnNumber: 19 }, __self: this })), streamingMessage.startsWith("http") ? /*#__PURE__*/ React.createElement("img", { src: streamingMessage, alt: "Enlarged drawing", className: "w-full h-auto rounded-lg", __source: { fileName: "", lineNumber: 310, columnNumber: 19 }, __self: this }) : /*#__PURE__*/ React.createElement("p", { className: "text-[#00ff00] font-mono text-2xl whitespace-pre-wrap animate-typewriter", __source: { fileName: "", lineNumber: 316, columnNumber: 19 }, __self: this }, streamingMessage))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ if (!isListening) { setIsListening(true); const recognition = new window.webkitSpeechRecognition(); recognition.continuous = false; recognition.interimResults = true; recognition.onresult = async (event)=>{ const currentTranscript = event.results[0][0].transcript; setTranscript(currentTranscript); if (event.results[0].isFinal) { setTimeout(async ()=>{ setLoading(true); const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: currentTranscript } ], stream: true }) }); handleStreamResponse(response); }, 3000); } }; recognition.onend = ()=>{ setIsListening(false); setTranscript(""); }; recognition.start(); } }, className: "fixed bottom-8 right-8 w-16 h-16 rounded-full bg-gradient-to-r from-blue-500 to-purple-500 text-white flex items-center justify-center shadow-lg hover:shadow-xl transition-all transform hover:scale-105", __source: { fileName: "", lineNumber: 323, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isListening ? "fa-stop" : "fa-microphone"} text-2xl`, __source: { fileName: "", lineNumber: 362, columnNumber: 13 }, __self: this })))); } return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-purple-100 to-blue-200 p-8", __source: { fileName: "", lineNumber: 372, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 373, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-8", __source: { fileName: "", lineNumber: 374, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-poppins text-purple-800", __source: { fileName: "", lineNumber: 375, columnNumber: 11 }, __self: this }, "Welcome, ", currentStudent, "! 👋"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowGame(false), className: "px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700", __source: { fileName: "", lineNumber: 378, columnNumber: 11 }, __self: this }, "Switch Player")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 385, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "md:col-span-2", __source: { fileName: "", lineNumber: 386, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-xl shadow-lg", __source: { fileName: "", lineNumber: 387, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 388, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-6 mb-6", __source: { fileName: "", lineNumber: 389, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border-2 border-purple-200 rounded-xl p-6 bg-gradient-to-r from-purple-50 to-blue-50", __source: { fileName: "", lineNumber: 390, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-poppins text-2xl text-purple-800 mb-4", __source: { fileName: "", lineNumber: 391, columnNumber: 21 }, __self: this }, "Your Superhero Mission 🦸‍♂️"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 394, columnNumber: 21 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "animate-pulse bg-white rounded-lg p-4", __source: { fileName: "", lineNumber: 396, columnNumber: 25 }, __self: this }, streamingMessage) : /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-4 shadow-sm", __source: { fileName: "", lineNumber: 400, columnNumber: 25 }, __self: this }, lesson))), /*#__PURE__*/ React.createElement("div", { className: "border-2 border-blue-200 rounded-xl p-6 bg-gradient-to-r from-blue-50 to-purple-50", __source: { fileName: "", lineNumber: 406, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-poppins text-2xl text-blue-800 mb-4", __source: { fileName: "", lineNumber: 407, columnNumber: 21 }, __self: this }, "Watch How It's Done! 👀"), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-6 shadow-sm", __source: { fileName: "", lineNumber: 410, columnNumber: 21 }, __self: this }, step === 1 && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 412, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg mb-4", __source: { fileName: "", lineNumber: 413, columnNumber: 27 }, __self: this }, "Here's your superpower code:"), /*#__PURE__*/ React.createElement("code", { className: "block bg-gray-800 text-white p-4 rounded-lg text-lg", __source: { fileName: "", lineNumber: 416, columnNumber: 27 }, __self: this }, 'let superpower = "', superpower, '";'))))), step === 0 && /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 mb-6", __source: { fileName: "", lineNumber: 425, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Choose your superhero name!", className: "flex-1 p-4 border-2 border-purple-200 rounded-xl text-lg", value: characterName, onChange: (e)=>setCharacterName(e.target.value), __source: { fileName: "", lineNumber: 426, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Pick your superpower!", className: "flex-1 p-4 border-2 border-purple-200 rounded-xl text-lg", value: superpower, onChange: (e)=>setSuperpower(e.target.value), __source: { fileName: "", lineNumber: 433, columnNumber: 21 }, __self: this })), step > 0 && /*#__PURE__*/ React.createElement("div", { className: "border-2 border-green-200 rounded-xl p-6 bg-gradient-to-r from-green-50 to-blue-50", __source: { fileName: "", lineNumber: 443, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-poppins text-2xl text-green-800 mb-4", __source: { fileName: "", lineNumber: 444, columnNumber: 21 }, __self: this }, "Time to Code! 💫"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 447, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { className: "w-full h-[120px] p-4 border-2 border-green-200 rounded-xl text-lg font-mono", placeholder: "Write your superhero code here...", value: code, onChange: (e)=>setCode(e.target.value), __source: { fileName: "", lineNumber: 448, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: checkCode, className: "w-full py-4 bg-gradient-to-r from-green-500 to-blue-500 text-white rounded-xl hover:from-green-600 hover:to-blue-600 text-lg font-bold shadow-lg transform hover:scale-105 transition-all", __source: { fileName: "", lineNumber: 454, columnNumber: 23 }, __self: this }, "Test My Superpowers! ⚡"))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mt-6", __source: { fileName: "", lineNumber: 463, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleNext, disabled: loading || step === 0 && (!characterName || !superpower), className: "px-8 py-4 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-xl hover:from-purple-600 hover:to-pink-600 disabled:opacity-50 text-lg font-bold shadow-lg transform hover:scale-105 transition-all", __source: { fileName: "", lineNumber: 464, columnNumber: 19 }, __self: this }, loading ? "Loading..." : "Next Adventure! 🚀"))))), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-xl shadow-lg space-y-6", __source: { fileName: "", lineNumber: 477, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-poppins text-2xl text-purple-800 mb-4", __source: { fileName: "", lineNumber: 478, columnNumber: 13 }, __self: this }, "Your Superhero Card 🌟"), /*#__PURE__*/ React.createElement("div", { className: "border-2 border-purple-300 rounded-xl p-4 bg-gradient-to-b from-purple-100 to-blue-100", __source: { fileName: "", lineNumber: 481, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-4", __source: { fileName: "", lineNumber: 482, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-32 h-32 mx-auto bg-gradient-to-r from-purple-400 to-blue-400 rounded-full flex items-center justify-center", __source: { fileName: "", lineNumber: 483, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-4xl", __source: { fileName: "", lineNumber: 484, columnNumber: 19 }, __self: this }, "🦸‍♂️"))), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 487, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-3", __source: { fileName: "", lineNumber: 488, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-purple-600", __source: { fileName: "", lineNumber: 489, columnNumber: 19 }, __self: this }, "HERO NAME"), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-bold", __source: { fileName: "", lineNumber: 490, columnNumber: 19 }, __self: this }, characterName || "???")), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-3", __source: { fileName: "", lineNumber: 492, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-blue-600", __source: { fileName: "", lineNumber: 493, columnNumber: 19 }, __self: this }, "SUPERPOWER"), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-bold", __source: { fileName: "", lineNumber: 494, columnNumber: 19 }, __self: this }, superpower || "???")), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-3", __source: { fileName: "", lineNumber: 496, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-green-600", __source: { fileName: "", lineNumber: 497, columnNumber: 19 }, __self: this }, "CODING LEVEL"), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-bold", __source: { fileName: "", lineNumber: 498, columnNumber: 19 }, __self: this }, "Chapter ", step + 1)), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-3", __source: { fileName: "", lineNumber: 500, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-pink-600", __source: { fileName: "", lineNumber: 501, columnNumber: 19 }, __self: this }, "POWERS UNLOCKED"), /*#__PURE__*/ React.createElement("div", { className: "space-y-1", __source: { fileName: "", lineNumber: 502, columnNumber: 19 }, __self: this }, step >= 0 && /*#__PURE__*/ React.createElement("p", { className: "text-md", __source: { fileName: "", lineNumber: 504, columnNumber: 23 }, __self: this }, step >= 1 ? "✅" : "🔒", " Variables"), step >= 1 && /*#__PURE__*/ React.createElement("p", { className: "text-md", __source: { fileName: "", lineNumber: 509, columnNumber: 23 }, __self: this }, step >= 2 ? "✅" : "🔒", " Text Powers"), step >= 2 && /*#__PURE__*/ React.createElement("p", { className: "text-md", __source: { fileName: "", lineNumber: 514, columnNumber: 23 }, __self: this }, step >= 3 ? "✅" : "🔒", " Super Stats"))))), /*#__PURE__*/ React.createElement("div", { className: "border-2 border-yellow-200 rounded-xl p-4 bg-gradient-to-b from-yellow-50 to-orange-50 animate-shimmer", __source: { fileName: "", lineNumber: 522, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-poppins text-xl text-yellow-800 mb-4", __source: { fileName: "", lineNumber: 523, columnNumber: 15 }, __self: this }, "Ask Goldie! 🦊"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 526, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Ask me anything about coding!", className: "w-full p-3 border-2 border-yellow-200 rounded-xl", onKeyDown: (e)=>{ if (e.key === "Enter" && e.target.value.trim()) { askGoldie(e.target.value); e.target.value = ""; } }, __source: { fileName: "", lineNumber: 527, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-3 min-h-[100px]", __source: { fileName: "", lineNumber: 538, columnNumber: 17 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "animate-pulse", __source: { fileName: "", lineNumber: 540, columnNumber: 21 }, __self: this }, streamingMessage || "Goldie is thinking... 🤔") : lesson || "Hi! I'm Goldie, your coding buddy! Ask me anything about the lesson! 🌟")))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 553, columnNumber: 7 }, __self: this }, ` @keyframes shimmer { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideIn { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes typewriter { from { width: 0; } to { width: 100%; } } @keyframes soundwave { 0%, 100% { height: 8px; } 50% { height: 32px; } } .animate-fadeIn { animation: fadeIn 0.5s ease-out; } .animate-slideIn { animation: slideIn 0.5s ease-out; } .animate-typewriter { overflow: hidden; border-right: 2px solid #00ff00; white-space: nowrap; animation: typewriter 1s steps(40, end); } .animate-soundwave { animation: soundwave 1s ease-in-out infinite; } .animation-delay-200 { animation-delay: 0.2s; } .animation-delay-400 { animation-delay: 0.4s; } .animate-shimmer { background: linear-gradient( 90deg, rgba(255,248,230,1) 0%, rgba(255,237,213,1) 50%, rgba(255,248,230,1) 100% ); background-size: 1000px 100%; animation: shimmer 3s infinite linear; } `)); }