function MainComponent() { const [selectedLevel, setSelectedLevel] = React.useState("nursery"); const [question, setQuestion] = React.useState(""); const [response, setResponse] = React.useState(""); const [loading, setLoading] = React.useState(false); const [isPlaying, setIsPlaying] = React.useState(false); const [diagrams, setDiagrams] = React.useState([]); const [loadingDiagrams, setLoadingDiagrams] = React.useState(false); const educationLevels = [ { id: "nursery", name: "Nursery (Ages 3-5)", color: "bg-gradient-to-r from-pink-100 to-pink-200 text-pink-800 border-pink-300", voice: { rate: 0.8, pitch: 1.2 } }, { id: "primary", name: "Primary School (Ages 6-11)", color: "bg-gradient-to-r from-blue-100 to-blue-200 text-blue-800 border-blue-300", voice: { rate: 0.9, pitch: 1.1 } }, { id: "secondary", name: "Secondary School (Ages 12-18)", color: "bg-gradient-to-r from-green-100 to-green-200 text-green-800 border-green-300", voice: { rate: 1.0, pitch: 1.0 } }, { id: "university", name: "University (Ages 18+)", color: "bg-gradient-to-r from-purple-100 to-purple-200 text-purple-800 border-purple-300", voice: { rate: 1.1, pitch: 0.9 } } ]; const getPromptForLevel = (level, userQuestion)=>{ const prompts = { nursery: `You are a friendly educational AI for nursery children (ages 3-5). Answer this question in very simple language, using fun examples and encouraging words. Keep it short and engaging. You can teach any language in the world and explain concepts in multiple languages if requested. Do not use any asterisks, hash symbols, or markdown formatting in your response. Use plain text only with proper punctuation and spacing: "${userQuestion}"`, primary: `You are an educational AI for primary school children (ages 6-11). Explain this topic clearly with examples they can understand. Use encouraging language and make it interesting. You can teach any language in the world and explain concepts in multiple languages if requested. Do not use any asterisks, hash symbols, or markdown formatting in your response. Use plain text only with proper punctuation and spacing: "${userQuestion}"`, secondary: `You are an educational AI for secondary school students (ages 12-18). Provide a comprehensive explanation with examples, encourage critical thinking, and relate to their interests. You can teach any language in the world and explain concepts in multiple languages if requested. Do not use any asterisks, hash symbols, or markdown formatting in your response. Use plain text only with proper punctuation and spacing: "${userQuestion}"`, university: `You are an educational AI for university students. Provide an in-depth, academic-level response with detailed explanations, references to key concepts, and encourage further research. You can teach any language in the world and explain concepts in multiple languages if requested. Do not use any asterisks, hash symbols, or markdown formatting in your response. Use plain text only with proper punctuation and spacing: "${userQuestion}"` }; return prompts[level]; }; const fetchDiagrams = async (searchQuery)=>{ setLoadingDiagrams(true); try { const diagramSearchTerms = [ `${searchQuery} diagram educational`, `${searchQuery} illustration science`, `${searchQuery} chart infographic` ]; const allDiagrams = []; for (const term of diagramSearchTerms){ try { const response = await fetch(`/integrations/image-search/imagesearch?q=${encodeURIComponent(term)}`); if (response.ok) { const data = await response.json(); if (data.status === "success" && data.items) { const educationalImages = data.items.filter((item)=>{ const title = item.title.toLowerCase(); const contextLink = item.contextLink.toLowerCase(); return title.includes("diagram") || title.includes("chart") || title.includes("illustration") || title.includes("infographic") || contextLink.includes("edu") || contextLink.includes("wikipedia") || contextLink.includes("britannica") || contextLink.includes("science"); }).slice(0, 2); allDiagrams.push(...educationalImages); } } } catch (error) { console.error("Error fetching diagrams for term:", term, error); } } const uniqueDiagrams = allDiagrams.filter((diagram, index, self)=>index === self.findIndex((d)=>d.originalImageUrl === diagram.originalImageUrl)).slice(0, 4); setDiagrams(uniqueDiagrams); } catch (error) { console.error("Error fetching diagrams:", error); setDiagrams([]); } finally{ setLoadingDiagrams(false); } }; const speakResponse = ()=>{ if (!response || !window.speechSynthesis) return; window.speechSynthesis.cancel(); const utterance = new SpeechSynthesisUtterance(response); const currentLevel = educationLevels.find((l)=>l.id === selectedLevel); utterance.rate = currentLevel.voice.rate; utterance.pitch = currentLevel.voice.pitch; utterance.volume = 0.8; const voices = window.speechSynthesis.getVoices(); const femaleVoice = voices.find((voice)=>voice.name.toLowerCase().includes("female") || voice.name.toLowerCase().includes("woman") || voice.name.toLowerCase().includes("samantha") || voice.name.toLowerCase().includes("karen")); if (femaleVoice) { utterance.voice = femaleVoice; } utterance.onstart = ()=>setIsPlaying(true); utterance.onend = ()=>setIsPlaying(false); utterance.onerror = ()=>setIsPlaying(false); window.speechSynthesis.speak(utterance); }; const stopSpeaking = ()=>{ window.speechSynthesis.cancel(); setIsPlaying(false); }; const handleSubmit = async (e)=>{ e.preventDefault(); if (!question.trim()) return; setLoading(true); setResponse(""); setDiagrams([]); try { const prompt = getPromptForLevel(selectedLevel, question); const endpoint = "/integrations/chat-gpt/conversationgpt4"; const response = await fetch(endpoint, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: prompt } ] }) }); if (!response.ok) { throw new Error(`API request failed: ${response.status}`); } const data = await response.json(); let aiResponse = data.choices[0].message.content; // Clean up response by removing asterisks and other markdown formatting aiResponse = aiResponse.replace(/\*\*/g, "") // Remove bold markdown .replace(/\*/g, "") // Remove asterisks .replace(/#{1,6}\s/g, "") // Remove headers .replace(/`{1,3}/g, "") // Remove code blocks .replace(/\[([^\]]+)\]\([^)]+\)/g, "$1") // Convert links to plain text .trim(); setResponse(aiResponse); fetchDiagrams(question); } catch (error) { console.error("Error:", error); setResponse("Sorry, there was an error processing your question. Please try again."); } finally{ setLoading(false); } }; const clearChat = ()=>{ setQuestion(""); setResponse(""); setDiagrams([]); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50 p-4 font-inter", __source: { fileName: "", lineNumber: 213, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-5xl mx-auto", __source: { fileName: "", lineNumber: 214, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-10", __source: { fileName: "", lineNumber: 216, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "inline-flex items-center justify-center w-20 h-20 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full mb-4 shadow-lg", __source: { fileName: "", lineNumber: 217, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-3xl", __source: { fileName: "", lineNumber: 218, columnNumber: 13 }, __self: this }, "🎓")), /*#__PURE__*/ React.createElement("h1", { className: "text-5xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent mb-3", __source: { fileName: "", lineNumber: 220, columnNumber: 11 }, __self: this }, "EduTrack"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-gray-600 font-medium", __source: { fileName: "", lineNumber: 223, columnNumber: 11 }, __self: this }, "Learn smarter, not harder"), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex flex-wrap justify-center gap-2 text-sm text-gray-500", __source: { fileName: "", lineNumber: 226, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "bg-white px-3 py-1 rounded-full shadow-sm", __source: { fileName: "", lineNumber: 227, columnNumber: 13 }, __self: this }, "🌍 Any Language"), /*#__PURE__*/ React.createElement("span", { className: "bg-white px-3 py-1 rounded-full shadow-sm", __source: { fileName: "", lineNumber: 230, columnNumber: 13 }, __self: this }, "🎯 Age-Appropriate"), /*#__PURE__*/ React.createElement("span", { className: "bg-white px-3 py-1 rounded-full shadow-sm", __source: { fileName: "", lineNumber: 233, columnNumber: 13 }, __self: this }, "🔊 Voice Support"), /*#__PURE__*/ React.createElement("span", { className: "bg-white px-3 py-1 rounded-full shadow-sm", __source: { fileName: "", lineNumber: 236, columnNumber: 13 }, __self: this }, "📊 Visual Learning"))), /*#__PURE__*/ React.createElement("div", { className: "bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl p-8 mb-8 border border-white/20", __source: { fileName: "", lineNumber: 243, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto", __source: { fileName: "", lineNumber: 244, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "education-level", className: "block text-xl font-semibold text-gray-800 mb-4 text-center", __source: { fileName: "", lineNumber: 245, columnNumber: 13 }, __self: this }, "Select Your Education Level"), /*#__PURE__*/ React.createElement("select", { id: "education-level", value: selectedLevel, onChange: (e)=>setSelectedLevel(e.target.value), className: "w-full p-4 border-2 border-gray-200 rounded-xl focus:ring-4 focus:ring-blue-500/20 focus:border-blue-500 bg-white text-lg font-medium transition-all duration-200 shadow-sm hover:shadow-md", __source: { fileName: "", lineNumber: 251, columnNumber: 13 }, __self: this }, educationLevels.map((level)=>/*#__PURE__*/ React.createElement("option", { key: level.id, value: level.id, __source: { fileName: "", lineNumber: 258, columnNumber: 17 }, __self: this }, level.name))))), /*#__PURE__*/ React.createElement("div", { className: "bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl p-8 mb-8 border border-white/20", __source: { fileName: "", lineNumber: 267, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 268, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 269, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "question", className: "block text-xl font-semibold text-gray-800 mb-4", __source: { fileName: "", lineNumber: 270, columnNumber: 15 }, __self: this }, "Ask EduTrack:"), /*#__PURE__*/ React.createElement("textarea", { id: "question", value: question, onChange: (e)=>setQuestion(e.target.value), placeholder: "What would you like to learn about today? Ask in any language!", className: "w-full p-4 border-2 border-gray-200 rounded-xl focus:ring-4 focus:ring-blue-500/20 focus:border-blue-500 resize-none text-lg transition-all duration-200 shadow-sm hover:shadow-md bg-white", rows: "4", __source: { fileName: "", lineNumber: 276, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 285, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading || !question.trim(), className: "flex-1 bg-gradient-to-r from-blue-500 to-purple-600 text-white py-4 px-8 rounded-xl hover:from-blue-600 hover:to-purple-700 disabled:from-gray-400 disabled:to-gray-500 disabled:cursor-not-allowed transition-all duration-200 font-semibold text-lg shadow-lg hover:shadow-xl transform hover:scale-[1.02] disabled:transform-none", __source: { fileName: "", lineNumber: 286, columnNumber: 15 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 292, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-6 w-6 border-b-2 border-white mr-3", __source: { fileName: "", lineNumber: 293, columnNumber: 21 }, __self: this }), "Thinking...") : /*#__PURE__*/ React.createElement("span", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 297, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane mr-2", __source: { fileName: "", lineNumber: 298, columnNumber: 21 }, __self: this }), "Ask EduTrack")), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: clearChat, className: "px-8 py-4 border-2 border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 hover:border-gray-400 transition-all duration-200 font-semibold text-lg shadow-sm hover:shadow-md", __source: { fileName: "", lineNumber: 303, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash-alt mr-2", __source: { fileName: "", lineNumber: 308, columnNumber: 17 }, __self: this }), "Clear")))), response && /*#__PURE__*/ React.createElement("div", { className: "bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl p-8 mb-8 border border-white/20", __source: { fileName: "", lineNumber: 317, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-6", __source: { fileName: "", lineNumber: 318, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 319, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center mr-3", __source: { fileName: "", lineNumber: 320, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-white text-lg", __source: { fileName: "", lineNumber: 321, columnNumber: 19 }, __self: this }, "🎓")), /*#__PURE__*/ React.createElement("span", { className: "text-xl font-semibold text-gray-800", __source: { fileName: "", lineNumber: 323, columnNumber: 17 }, __self: this }, "EduTrack Response"), /*#__PURE__*/ React.createElement("span", { className: `ml-4 px-4 py-2 rounded-full text-sm font-semibold border-2 ${educationLevels.find((l)=>l.id === selectedLevel)?.color}`, __source: { fileName: "", lineNumber: 326, columnNumber: 17 }, __self: this }, educationLevels.find((l)=>l.id === selectedLevel)?.name)), /*#__PURE__*/ React.createElement("button", { onClick: isPlaying ? stopSpeaking : speakResponse, className: `flex items-center gap-3 px-6 py-3 rounded-xl transition-all duration-200 font-semibold shadow-md hover:shadow-lg transform hover:scale-105 ${isPlaying ? "bg-gradient-to-r from-red-400 to-red-600 text-white hover:from-red-500 hover:to-red-700" : "bg-gradient-to-r from-green-400 to-green-600 text-white hover:from-green-500 hover:to-green-700"}`, title: isPlaying ? "Stop speaking" : "Read response aloud", __source: { fileName: "", lineNumber: 335, columnNumber: 15 }, __self: this }, isPlaying ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-stop text-lg", __source: { fileName: "", lineNumber: 346, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 347, columnNumber: 21 }, __self: this }, "Stop")) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-volume-up text-lg", __source: { fileName: "", lineNumber: 351, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 352, columnNumber: 21 }, __self: this }, "Listen")))), /*#__PURE__*/ React.createElement("div", { className: "bg-gradient-to-r from-blue-50 to-purple-50 p-6 rounded-xl border-l-4 border-blue-500 shadow-inner", __source: { fileName: "", lineNumber: 357, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-800 whitespace-pre-wrap leading-relaxed text-lg", __source: { fileName: "", lineNumber: 358, columnNumber: 15 }, __self: this }, response))), (diagrams.length > 0 || loadingDiagrams) && /*#__PURE__*/ React.createElement("div", { className: "bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl p-8 mb-8 border border-white/20", __source: { fileName: "", lineNumber: 367, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-6", __source: { fileName: "", lineNumber: 368, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-10 h-10 bg-gradient-to-r from-orange-400 to-pink-500 rounded-full flex items-center justify-center mr-3", __source: { fileName: "", lineNumber: 369, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-white text-lg", __source: { fileName: "", lineNumber: 370, columnNumber: 17 }, __self: this }, "📊")), /*#__PURE__*/ React.createElement("span", { className: "text-xl font-semibold text-gray-800", __source: { fileName: "", lineNumber: 372, columnNumber: 15 }, __self: this }, "Educational Diagrams & Illustrations"), loadingDiagrams && /*#__PURE__*/ React.createElement("div", { className: "ml-4 animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600", __source: { fileName: "", lineNumber: 376, columnNumber: 17 }, __self: this })), loadingDiagrams && diagrams.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "text-center py-12 text-gray-500", __source: { fileName: "", lineNumber: 381, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-pulse text-lg", __source: { fileName: "", lineNumber: 382, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search text-2xl mb-3 block", __source: { fileName: "", lineNumber: 383, columnNumber: 19 }, __self: this }), "Searching for relevant diagrams...")) : /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 388, columnNumber: 15 }, __self: this }, diagrams.map((diagram, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border-2 border-gray-200 rounded-xl overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:scale-[1.02] bg-white", __source: { fileName: "", lineNumber: 390, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 394, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: diagram.originalImageUrl, alt: diagram.title, className: "w-full h-56 object-contain bg-gray-50", onError: (e)=>{ e.target.src = diagram.thumbnailImageUrl; }, __source: { fileName: "", lineNumber: 395, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-3 right-3 bg-black/70 text-white px-3 py-1 rounded-lg text-xs font-medium", __source: { fileName: "", lineNumber: 403, columnNumber: 23 }, __self: this }, diagram.width, " × ", diagram.height)), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 407, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-semibold text-gray-800 mb-2 line-clamp-2 text-sm", __source: { fileName: "", lineNumber: 408, columnNumber: 23 }, __self: this }, diagram.title), /*#__PURE__*/ React.createElement("a", { href: diagram.contextLink, target: "_blank", rel: "noopener noreferrer", className: "text-xs text-blue-600 hover:text-blue-800 truncate block font-medium hover:underline", __source: { fileName: "", lineNumber: 411, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-external-link-alt mr-1", __source: { fileName: "", lineNumber: 417, columnNumber: 25 }, __self: this }), "Source: ", new URL(diagram.contextLink).hostname)))))))); }