function MainComponent() { const [theme, setTheme] = useState("light"); const [selectedDoctor, setSelectedDoctor] = useState(null); const [chatOpen, setChatOpen] = useState(false); const [bgColor, setBgColor] = useState("#86abe3"); const [streamingMessage, setStreamingMessage] = useState(""); const [messages, setMessages] = useState([]); const [loading, setLoading] = useState(false); const [categories, setCategories] = useState([]); const [doctors, setDoctors] = useState([]); const [selectedCategory, setSelectedCategory] = useState(null); const [featuredDoctor, setFeaturedDoctor] = useState(null); const [userAge, setUserAge] = useState(""); const [userGender, setUserGender] = useState(""); const [showUserForm, setShowUserForm] = useState(false); const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingMessage, onFinish: (message)=>{ setMessages((prev)=>[ ...prev, { role: "assistant", content: message } ]); setStreamingMessage(""); setLoading(false); } }); useEffect(()=>{ fetch("/api/categories", { method: "POST" }).then((res)=>res.json()).then((data)=>setCategories(data.categories)); fetch("/api/doctors", { method: "POST" }).then((res)=>res.json()).then((data)=>{ setDoctors(data.doctors); const randomIndex = Math.floor(Math.random() * data.doctors.length); setFeaturedDoctor(data.doctors[randomIndex]); }); }, []); useEffect(()=>{ if (selectedCategory) { fetch("/api/doctors", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ category_id: parseInt(selectedCategory) }) }).then((res)=>{ if (!res.ok) { throw new Error("Failed to fetch doctors"); } return res.json(); }).then((data)=>setDoctors(data.doctors)).catch((error)=>{ console.error("Error fetching doctors:", error); setDoctors([]); }); } else { fetch("/api/doctors", { method: "POST" }).then((res)=>{ if (!res.ok) { throw new Error("Failed to fetch doctors"); } return res.json(); }).then((data)=>setDoctors(data.doctors)).catch((error)=>{ console.error("Error fetching doctors:", error); setDoctors([]); }); } }, [ selectedCategory ]); const sendMessage = async (message)=>{ setLoading(true); const newMessage = { role: "user", content: message }; setMessages((prev)=>[ ...prev, newMessage ]); const doctorContext = `You are ${selectedDoctor.name}, a ${selectedDoctor.specialization} doctor with background in ${selectedDoctor.background} trained from the best medical school to address challenging diagnostic. Respond as this character would, maintaining medical accuracy while being engaging and professional.`; const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: doctorContext }, ...messages, newMessage ], stream: true }) }); handleStreamResponse(response); }; const startChat = (doctor)=>{ setSelectedDoctor(doctor); if (!userAge || !userGender) { setShowUserForm(true); } else { setChatOpen(true); } }; const generateDoctorImage = async (doctor)=>{ const prompt = `A realistic portrait of a ${doctor.gender} doctor named ${doctor.name}, specializing in ${doctor.specialization}, of ${doctor.background} descent`; const response = await fetch(`/integrations/stable-diffusion-v-3/?prompt=${encodeURIComponent(prompt)}`); const data = await response.json(); return data.data[0]; }; useEffect(()=>{ const fetchDoctorsWithImages = async ()=>{ const response = await fetch("/api/doctors", { method: "POST" }); const data = await response.json(); const doctorsWithImages = await Promise.all(data.doctors.map(async (doctor)=>{ if (!doctor.image_url) { const imageUrl = await generateDoctorImage(doctor); return { ...doctor, image_url: imageUrl }; } return doctor; })); setDoctors(doctorsWithImages); }; fetchDoctorsWithImages(); }, []); return /*#__PURE__*/ React.createElement("div", { style: { backgroundColor: bgColor }, className: "min-h-screen transition-colors duration-300", __source: { fileName: "", lineNumber: 134, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-yellow shadow-md p-4", __source: { fileName: "", lineNumber: 138, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto flex justify-between items-center", __source: { fileName: "", lineNumber: 139, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-crimson-text text-blue-800 font-bold", __source: { fileName: "", lineNumber: 140, columnNumber: 11 }, __self: this }, "DoctorAI"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 items-center", __source: { fileName: "", lineNumber: 143, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 144, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 145, columnNumber: 15 }, __self: this }, "Background:"), /*#__PURE__*/ React.createElement("input", { type: "color", value: bgColor, onChange: (e)=>setBgColor(e.target.value), className: "w-6 h-5 rounded cursor-pointer", __source: { fileName: "", lineNumber: 146, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("main", { className: "max-w-7xl mx-auto p-4 space-y-6", __source: { fileName: "", lineNumber: 157, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 158, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold text-orange-800 mb-4", __source: { fileName: "", lineNumber: 159, columnNumber: 11 }, __self: this }, "Meet Today's Featured Doctor 🎯")), featuredDoctor ? /*#__PURE__*/ React.createElement("div", { className: "featured-doctor bg-gradient-to-br from-blue-300 to-[#f3e8ff] rounded-xl shadow-lg p-6 flex items-left justify-between max-w-lg mx-auto border-4", __source: { fileName: "", lineNumber: 164, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: featuredDoctor.image_url, alt: featuredDoctor.name, className: "w-24 h-24 rounded-full object-cover mr-4", __source: { fileName: "", lineNumber: 165, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 170, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-gray-800 py-5 ", __source: { fileName: "", lineNumber: 171, columnNumber: 15 }, __self: this }, featuredDoctor.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 174, columnNumber: 15 }, __self: this }, featuredDoctor.specialization), /*#__PURE__*/ React.createElement("p", { className: "text-gray-500", __source: { fileName: "", lineNumber: 175, columnNumber: 15 }, __self: this }, featuredDoctor.description)), /*#__PURE__*/ React.createElement("button", { onClick: ()=>startChat(featuredDoctor), className: "chat-now-btn bg-blue-800 text-white w-18 h-12 px-2 py-2 self-end justify-end mt-auto rounded-full hover:bg-red-600 animate-pulse-slow transition", __source: { fileName: "", lineNumber: 177, columnNumber: 13 }, __self: this }, "CHAT NOW 🟧")) : /*#__PURE__*/ React.createElement("p", { className: "text-center text-gray-600", __source: { fileName: "", lineNumber: 185, columnNumber: 11 }, __self: this }, "Loading featured doctor..."), /*#__PURE__*/ React.createElement("section", { className: "mb-8", __source: { fileName: "", lineNumber: 189, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex overflow-x-auto gap-4 pb-4 scrollbar-hide", __source: { fileName: "", lineNumber: 190, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedCategory(null), className: `flex-shrink-0 bg-blue-800 text-white rounded-lg shadow-md px-5 py-2 hover:shadow-lg transition-shadow ${!selectedCategory ? "border-2 border-[#4a3b89]" : ""}`, __source: { fileName: "", lineNumber: 191, columnNumber: 13 }, __self: this }, "All"), categories.sort((a, b)=>{ const order = [ "Primary Care", "Pediatrics", "Heart Health", "Mental Health", "Sports Medicine", "Radiologist", "Dermatologist", "Urologist", "Pharmacist" ]; return order.indexOf(b.name); }).map((category)=>/*#__PURE__*/ React.createElement("button", { key: category.id, onClick: ()=>setSelectedCategory(category.id), className: `flex-shrink-0 bg-blue-800 text-white rounded-full shadow-md px-5 py-2 hover:shadow-lg transition-shadow ${selectedCategory === category.id ? "border-2 border-[#4a3b89]" : ""}`, __source: { fileName: "", lineNumber: 215, columnNumber: 17 }, __self: this }, category.name)))), /*#__PURE__*/ React.createElement("section", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 230, columnNumber: 9 }, __self: this }, doctors.map((doctor)=>/*#__PURE__*/ React.createElement("div", { key: doctor.id, className: "bg-gradient-to-br from-blue-300 to-[#f3e8ff] rounded-lg shadow-md hover:shadow-lg transition-colors duration-300 w-full flex flex-col group", __source: { fileName: "", lineNumber: 232, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-3 flex items-center gap-4", __source: { fileName: "", lineNumber: 236, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: doctor.image_url, alt: doctor.name, className: "w-12 h-14 items-center gap-4 rounded-full object-cover border-2 border-[#4a3b89]/20", __source: { fileName: "", lineNumber: 237, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "min-w-0 flex-1", __source: { fileName: "", lineNumber: 242, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-crimson-text text-lg mb-1 truncate", __source: { fileName: "", lineNumber: 243, columnNumber: 19 }, __self: this }, doctor.name), /*#__PURE__*/ React.createElement("p", { className: "text-orange-800 text-sm truncate", __source: { fileName: "", lineNumber: 246, columnNumber: 19 }, __self: this }, doctor.specialization)), /*#__PURE__*/ React.createElement("button", { onClick: ()=>startChat(doctor), className: "bg-blue-300 text-orange-800 font-bold px-3 py-2.5 text-sm rounded-lg hover:bg-blue-800 transition-slow duration-180 group-hover:animate-pulse flex-shrink-0", __source: { fileName: "", lineNumber: 250, columnNumber: 17 }, __self: this }, "Chat Now")))))), showUserForm && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50", __source: { fileName: "", lineNumber: 263, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-6 w-full max-w-md", __source: { fileName: "", lineNumber: 264, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 265, columnNumber: 13 }, __self: this }, "Before we connect you with the doctor"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 268, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 269, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 270, columnNumber: 17 }, __self: this }, "How old are you?"), /*#__PURE__*/ React.createElement("input", { type: "number", value: userAge, onChange: (e)=>setUserAge(e.target.value), className: "w-full border rounded-lg px-4 py-2", placeholder: "Enter your age", __source: { fileName: "", lineNumber: 271, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 279, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 280, columnNumber: 17 }, __self: this }, "What's your gender?"), /*#__PURE__*/ React.createElement("select", { value: userGender, onChange: (e)=>setUserGender(e.target.value), className: "w-full border rounded-lg px-4 py-2", __source: { fileName: "", lineNumber: 281, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 286, columnNumber: 19 }, __self: this }, "Select gender"), /*#__PURE__*/ React.createElement("option", { value: "male", __source: { fileName: "", lineNumber: 287, columnNumber: 19 }, __self: this }, "Male"), /*#__PURE__*/ React.createElement("option", { value: "female", __source: { fileName: "", lineNumber: 288, columnNumber: 19 }, __self: this }, "Female"), /*#__PURE__*/ React.createElement("option", { value: "other", __source: { fileName: "", lineNumber: 289, columnNumber: 19 }, __self: this }, "Other"))), /*#__PURE__*/ React.createElement("div", { className: "flex gap-3 mt-6", __source: { fileName: "", lineNumber: 292, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ if (userAge && userGender) { setShowUserForm(false); setChatOpen(true); } }, className: "flex-1 bg-blue-800 text-white px-6 py-2 rounded-lg hover:bg-[#5b4a9a] transition-colors", __source: { fileName: "", lineNumber: 293, columnNumber: 17 }, __self: this }, "Continue"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowUserForm(false), className: "flex-1 border border-gray-300 px-6 py-2 rounded-lg hover:bg-gray-50 transition-colors", __source: { fileName: "", lineNumber: 304, columnNumber: 17 }, __self: this }, "Cancel"))))), chatOpen && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-blue-800 bg-opacity-50 flex items-center justify-center p-4 z-50", __source: { fileName: "", lineNumber: 317, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#4a3b89] rounded-lg w-full max-w-2xl h-[600px] flex flex-col", __source: { fileName: "", lineNumber: 318, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b flex justify-between items-center bg-blue-800 text-white rounded-t-lg", __source: { fileName: "", lineNumber: 319, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 320, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-crimson-text text-lg", __source: { fileName: "", lineNumber: 321, columnNumber: 17 }, __self: this }, selectedDoctor.name), /*#__PURE__*/ React.createElement("p", { className: "text-sm opacity-80", __source: { fileName: "", lineNumber: 324, columnNumber: 17 }, __self: this }, selectedDoctor.specialization)), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setChatOpen(false); setMessages([]); }, className: "text-2xl hover:opacity-80", __source: { fileName: "", lineNumber: 328, columnNumber: 15 }, __self: this }, "×")), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto p-4 space-y-4", style: { backgroundColor: "#a593cd" }, __source: { fileName: "", lineNumber: 338, columnNumber: 13 }, __self: this }, messages.map((msg, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: `flex ${msg.role === "user" ? "justify-end" : "justify-start"}`, __source: { fileName: "", lineNumber: 343, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `max-w-[90%] rounded-lg p-4 ${msg.role === "user" ? "bg-[#4a3b89] text-black" : "bg-blue-300 shadow-md"}`, style: { fontSize: "1.1rem" }, __source: { fileName: "", lineNumber: 349, columnNumber: 19 }, __self: this }, msg.content))), streamingMessage && /*#__PURE__*/ React.createElement("div", { className: "flex justify-start", __source: { fileName: "", lineNumber: 362, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[90%] rounded-lg p-4 bg-blue-300 shadow-md", style: { fontSize: "1.1rem" }, __source: { fileName: "", lineNumber: 363, columnNumber: 19 }, __self: this }, streamingMessage))), /*#__PURE__*/ React.createElement("form", { className: "p-4 border-t bg-white", onSubmit: (e)=>{ e.preventDefault(); const message = e.target.message.value; if (message.trim()) { sendMessage(message); e.target.reset(); } }, __source: { fileName: "", lineNumber: 372, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 383, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "message", placeholder: "Type your message...", className: "flex-1 border rounded-lg px-4 py-2 focus:outline-none focus:border-[#4a3b89]", disabled: loading, __source: { fileName: "", lineNumber: 384, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: "bg-blue-800 text-white px-6 py-2 rounded-lg hover:bg-[#5b4a9a] transition-colors disabled:opacity-50", __source: { fileName: "", lineNumber: 390, columnNumber: 17 }, __self: this }, loading ? "Sending..." : "Send"))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 403, columnNumber: 7 }, __self: this }, ` @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } @keyframes pulse { 50% { opacity: 0.5; } } @keyframes pulse-slow { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } } .animate-pulse-slow { animation: pulse-slow 2s ease-in-out infinite; } .scrollbar-hide::-webkit-scrollbar { display: none; } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } `)); }