it is about health and care make it on that and also add a LMM for chatbot which would give all information

index.html

@@ -528,8 +528,7 @@ useEffect(() => {
                     const aiModel = new HealthAIModel();
 feather.replace();
             }, []);
-            
-            const handleSendMessage = () => {
+            const handleSendMessage = async () => {
                 if (!newMessage.trim()) return;
                 
                 // Add user message
@@ -537,20 +536,19 @@ feather.replace();
                 setMessages([...messages, userMsg]);
                 setNewMessage('');
                 setIsTyping(true);
+                
                 // AI response generation
-                setTimeout(() => {
+                setTimeout(async () => {
                     let response;
                     if (aiMode) {
                         try {
-                            response = await aiModel.generateResponse({
-                                prompt: `As a medical AI assistant, respond to this health query: "${newMessage}"`,
-                                context: "You are Dr. AI, a helpful and professional medical assistant providing accurate health information."
-                            });
+                            const aiModel = new HealthAIModel();
+                            response = await aiModel.generateResponse(newMessage);
                         } catch (error) {
                             response = "I'm having trouble processing your request. Please try again or switch to support mode.";
                             console.error("AI Model Error:", error);
                         }
-} else {
+                    } else {
                         // Standard support responses
                         response = "Thank you for your message. A support representative will respond shortly.";
                     }
@@ -561,12 +559,11 @@ feather.replace();
                         sender: 'bot',
                         isAI: aiMode 
                     };
-setMessages(prev => [...prev, botMsg]);
+                    setMessages(prev => [...prev, botMsg]);
                     setIsTyping(false);
                 }, 1500);
             };
-            
-            return (
+return (
                 <div className="pt-20 min-h-screen">
                     <div id="chat-background" className="fixed inset-0 -z-10"></div>
                     <div className="container mx-auto px-4 py-8">
@@ -651,16 +648,30 @@ setMessages(prev => [...prev, botMsg]);
                                 </div>
                             <div className="mt-2 flex justify-between items-center">
                                 <div className="flex space-x-2">
-                                    <button className="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">
-                                        Symptoms
-                                    </button>
-                                    <button className="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">
-                                        Medications
-                                    </button>
-                                    <button className="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">
-                                        Wellness
-                                    </button>
-                                </div>
+                                <button 
+                                    className="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full hover:bg-indigo-200 transition-colors"
+                                    onClick={() => {
+                                        setNewMessage("What are common symptoms I should watch for?");
+                                        document.querySelector('input').focus();
+                                    }}
+                                >
+                                    Symptoms
+                                </button>
+                                <button 
+                                    className="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded-full hover:bg-purple-200 transition-colors"
+                                    onClick={() => {
+                                        setNewMessage("Tell me about common medications and their uses");
+                                        document.querySelector('input').focus();
+                                    }}
+                                >
+                                    Medications
+                                </button>
+                                <button 
+                                    className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full hover:bg-green-200 transition-colors"
+                                >
+                                    Conditions
+                                </button>
+</div>
                                 <button 
                                     onClick={() => setAiMode(!aiMode)}
                                     className="text-xs flex items-center px-2 py-1 rounded-full transition-colors"
@@ -680,53 +691,52 @@ setMessages(prev => [...prev, botMsg]);
                             <button 
                                 className="bg-white bg-opacity-90 hover:bg-opacity-100 rounded-lg p-4 shadow-md flex flex-col items-center transition-all hover:shadow-lg"
                                 onClick={() => {
-                                    setNewMessage("I'm experiencing headaches and dizziness. What could this be?");
+                                    setNewMessage("I'm experiencing headaches, dizziness, and fatigue. What could be causing these symptoms?");
                                     document.querySelector('input').focus();
                                 }}
                             >
                                 <div className="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-2">
-                                    <i data-feather="alert-triangle" className="text-indigo-500"></i>
-</div>
-                                <span className="text-sm font-medium">Symptoms</span>
+                                    <i data-feather="activity" className="text-indigo-500"></i>
+                                </div>
+                                <span className="text-sm font-medium">Symptom Check</span>
                             </button>
                             <button 
                                 className="bg-white bg-opacity-90 hover:bg-opacity-100 rounded-lg p-4 shadow-md flex flex-col items-center transition-all hover:shadow-lg"
                                 onClick={() => {
-                                    setNewMessage("What are the side effects of my current medications?");
+                                    setNewMessage("Can you explain different types of diabetes and their management?");
                                     document.querySelector('input').focus();
                                 }}
                             >
                                 <div className="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-2">
-                                    <i data-feather="package" className="text-purple-500"></i>
-</div>
-                                <span className="text-sm font-medium">Medications</span>
+                                    <i data-feather="heart" className="text-purple-500"></i>
+                                </div>
+                                <span className="text-sm font-medium">Conditions</span>
                             </button>
                             <button 
                                 className="bg-white bg-opacity-90 hover:bg-opacity-100 rounded-lg p-4 shadow-md flex flex-col items-center transition-all hover:shadow-lg"
                                 onClick={() => {
-                                    setNewMessage("Suggest a wellness plan for better sleep.");
+                                    setNewMessage("What should I know about common medications like ibuprofen, metformin, and lisinopril?");
                                     document.querySelector('input').focus();
                                 }}
                             >
                                 <div className="w-12 h-12 bg-pink-100 rounded-full flex items-center justify-center mb-2">
-                                    <i data-feather="moon" className="text-pink-500"></i>
-</div>
-                                <span className="text-sm font-medium">Sleep Help</span>
+                                    <i data-feather="package" className="text-pink-500"></i>
+                                </div>
+                                <span className="text-sm font-medium">Medications</span>
                             </button>
                             <button
                                 className="bg-white bg-opacity-90 hover:bg-opacity-100 rounded-lg p-4 shadow-md flex flex-col items-center transition-all hover:shadow-lg"
                                 onClick={() => {
-                                    setAiMode(false);
-                                    setNewMessage("I need to speak with a human support representative.");
+                                    setNewMessage("What are the key components of a healthy lifestyle for chronic disease prevention?");
                                     document.querySelector('input').focus();
                                 }}
->
-                                <div className="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-2">
-                                    <i data-feather="help-circle" className="text-indigo-500"></i>
+                            >
+                                <div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-2">
+                                    <i data-feather="shield" className="text-green-500"></i>
+                                </div>
+                                <span className="text-sm font-medium">Wellness</span>
+                            </button>
 </div>
-                                <span className="text-sm font-medium">Human Support</span>
-</button>
-                        </div>
                     </div>
                 </div>
             );