add an Ai assistant for the chat box and also change the colors

index.html

@@ -391,16 +391,20 @@ const contactMethods = [
                 </div>
             );
         }
-
         // Chat Page
         function ChatPage({ goToPage }) {
             const [messages, setMessages] = useState([
-                { id: 1, text: "Hello! I'm Dr. AI, your personal health assistant. What health concerns can I help with today?", sender: 'bot' }
+                { 
+                    id: 1, 
+                    text: "Hello! I'm Dr. AI, your personal health assistant. What health concerns can I help with today?", 
+                    sender: 'bot',
+                    isAI: true 
+                }
             ]);
-const [newMessage, setNewMessage] = useState('');
+            const [newMessage, setNewMessage] = useState('');
             const [isTyping, setIsTyping] = useState(false);
-            
-            useEffect(() => {
+            const [aiMode, setAiMode] = useState(true);
+useEffect(() => {
                 // Initialize animation for chat bubbles
                 gsap.from(".message", { 
                     opacity: 0, 
@@ -411,21 +415,20 @@ const [newMessage, setNewMessage] = useState('');
                 });
                 
                 // Initialize Vanta.js background
-                VANTA.GLOBE({
-                    el: "#chat-background",
-                    mouseControls: true,
-                    touchControls: true,
-                    gyroControls: false,
-                    minHeight: 200.00,
-                    minWidth: 200.00,
-                    scale: 1.00,
-                    scaleMobile: 1.00,
-                    color: 0x3b82f6,
-                    backgroundColor: 0xf0fdf4,
-                    size: 0.8
-                });
-                
-                feather.replace();
+                    VANTA.GLOBE({
+                        el: "#chat-background",
+                        mouseControls: true,
+                        touchControls: true,
+                        gyroControls: false,
+                        minHeight: 200.00,
+                        minWidth: 200.00,
+                        scale: 1.00,
+                        scaleMobile: 1.00,
+                        color: aiMode ? 0x7c3aed : 0x3b82f6,
+                        backgroundColor: 0xf8fafc,
+                        size: 0.8
+                    });
+feather.replace();
             }, []);
             
             const handleSendMessage = () => {
@@ -436,18 +439,38 @@ const [newMessage, setNewMessage] = useState('');
                 setMessages([...messages, userMsg]);
                 setNewMessage('');
                 setIsTyping(true);
-                // Connect to OpenAI API (in real implementation would use backend)
+                // AI response generation
                 setTimeout(() => {
-                    const botResponses = [
-                        "Based on your symptoms, I recommend checking your temperature and monitoring for fever. Would you like me to explain possible causes?",
-                        "For immediate medical emergencies, please call 911. I can guide you through first aid while you wait for help.",
-                        "I can analyze your symptoms against medical databases to suggest possible conditions. Would you like to proceed?",
-                        "Would you like me to locate the nearest urgent care facility based on your location?",
-                        "I've reviewed your health history and this seems consistent with seasonal allergies. Would you like treatment recommendations?"
-                    ];
-const randomResponse = botResponses[Math.floor(Math.random() * botResponses.length)];
-                    const botMsg = { id: messages.length + 2, text: randomResponse, sender: 'bot' };
-                    setMessages(prev => [...prev, botMsg]);
+                    let response;
+                    if (aiMode) {
+                        // Enhanced AI responses
+                        const responses = {
+                            symptoms: "Based on your symptoms, I'm analyzing possible conditions. Please provide more details like duration and severity.",
+                            medications: "I can check for drug interactions. Please list all medications including dosage.",
+                            wellness: "For better wellness, I recommend a balanced diet, regular exercise and 7-9 hours of sleep. Would you like a personalized plan?"
+                        };
+                        
+                        if (newMessage.toLowerCase().includes('symptom') || newMessage.toLowerCase().includes('pain')) {
+                            response = responses.symptoms;
+                        } else if (newMessage.toLowerCase().includes('medication') || newMessage.toLowerCase().includes('pill')) {
+                            response = responses.medications;
+                        } else if (newMessage.toLowerCase().includes('wellness') || newMessage.toLowerCase().includes('health')) {
+                            response = responses.wellness;
+                        } else {
+                            response = "I'm analyzing your query with my medical knowledge base. Please provide any additional details that might help.";
+                        }
+                    } else {
+                        // Standard support responses
+                        response = "Thank you for your message. A support representative will respond shortly.";
+                    }
+                    
+                    const botMsg = { 
+                        id: messages.length + 2, 
+                        text: response, 
+                        sender: 'bot',
+                        isAI: aiMode 
+                    };
+setMessages(prev => [...prev, botMsg]);
                     setIsTyping(false);
                 }, 1500);
             };
@@ -459,11 +482,17 @@ const randomResponse = botResponses[Math.floor(Math.random() * botResponses.leng
                         <div className="max-w-3xl mx-auto bg-white bg-opacity-90 rounded-xl shadow-xl overflow-hidden">
                             {/* Chat Header */}
                             <div className="bg-green-600 text-white p-4 flex items-center">
-                            <div className="w-10 h-10 rounded-full bg-amber-300 flex items-center justify-center mr-3">
-                                    <i data-feather="activity" className="text-green-800"></i>
+                            <div className="w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center mr-3">
+                                <i data-feather={aiMode ? "cpu" : "headphones"} className="text-white"></i>
+                            </div>
+                            <div>
+                                <h2 className="font-bold">Dr. AI - Health Assistant</h2>
+                                <div className="flex items-center">
+                                    <div className={`w-2 h-2 rounded-full mr-1 ${aiMode ? 'bg-green-400' : 'bg-gray-400'}`}></div>
+                                    <span className="text-xs opacity-80">
+                                        {aiMode ? 'AI Mode' : 'Support Mode'}
+                                    </span>
                                 </div>
-                                <div>
-                                    <h2 className="font-bold">Dr. AI - Health Assistant</h2>
 <p className="text-xs opacity-80">
                                         {isTyping ? 'Typing...' : 'Online'}
                                     </p>
@@ -484,9 +513,15 @@ const randomResponse = botResponses[Math.floor(Math.random() * botResponses.leng
                                             key={msg.id} 
                                             className={`message flex ${msg.sender === 'user' ? 'justify-end' : 'justify-start'}`}
                                         >
-                                            <div 
-                                                className={`max-w-xs md:max-w-md rounded-lg p-3 ${msg.sender === 'user' ? 'bg-amber-100 text-gray-800 rounded-br-none' : 'bg-green-100 text-gray-800 rounded-bl-none'}`}
-                                            >
+                                            <div
+                                        className={`max-w-xs md:max-w-md rounded-lg p-3 ${
+                                            msg.sender === 'user' 
+                                                ? 'bg-indigo-100 text-gray-800 rounded-br-none' 
+                                                : msg.isAI 
+                                                    ? 'bg-purple-100 text-gray-800 rounded-bl-none' 
+                                                    : 'bg-blue-100 text-gray-800 rounded-bl-none'
+                                        }`}
+>
                                                 <p>{msg.text}</p>
                                             </div>
                                         </div>
@@ -523,18 +558,31 @@ const randomResponse = botResponses[Math.floor(Math.random() * botResponses.leng
                                         <i data-feather="send"></i>
                                     </button>
                                 </div>
-                                <div className="mt-2 flex justify-start space-x-2">
-                                    <button className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">
+                            <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-green-100 text-green-800 px-2 py-1 rounded-full">
+                                    <button className="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">
                                         Medications
                                     </button>
-                                    <button className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">
+                                    <button className="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">
                                         Wellness
                                     </button>
-</div>
+                                </div>
+                                <button 
+                                    onClick={() => setAiMode(!aiMode)}
+                                    className="text-xs flex items-center px-2 py-1 rounded-full transition-colors"
+                                    style={{
+                                        backgroundColor: aiMode ? 'rgba(99, 102, 241, 0.1)' : 'rgba(156, 163, 175, 0.1)',
+                                        color: aiMode ? 'rgb(99, 102, 241)' : 'rgb(156, 163, 175)'
+                                    }}
+                                >
+                                    <i data-feather={aiMode ? "cpu" : "user"} className="w-3 h-3 mr-1"></i>
+                                    {aiMode ? 'AI Mode' : 'Support'}
+                                </button>
                             </div>
+</div>
                         </div>
                         
                         <div className="mt-8 grid grid-cols-2 md:grid-cols-4 gap-4 max-w-3xl mx-auto">
@@ -545,9 +593,9 @@ const randomResponse = botResponses[Math.floor(Math.random() * botResponses.leng
                                     document.querySelector('input').focus();
                                 }}
                             >
-                                <div className="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mb-2">
-                                    <i data-feather="alert-triangle" className="text-red-500"></i>
-                                </div>
+                                <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>
                             </button>
                             <button 
@@ -557,9 +605,9 @@ const randomResponse = botResponses[Math.floor(Math.random() * botResponses.leng
                                     document.querySelector('input').focus();
                                 }}
                             >
-                                <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-2">
-                                    <i data-feather="package" className="text-blue-500"></i>
-                                </div>
+                                <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>
                             </button>
                             <button 
@@ -569,20 +617,24 @@ const randomResponse = botResponses[Math.floor(Math.random() * botResponses.leng
                                     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="moon" className="text-purple-500"></i>
-                                </div>
+                                <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>
                             </button>
-<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={() => goToPage('support')}
-                            >
-                                <div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-2">
-                                    <i data-feather="help-circle" className="text-green-500"></i>
-                                </div>
-                                <span className="text-sm font-medium">Help Center</span>
-                            </button>
+                                onClick={() => {
+                                    setAiMode(false);
+                                    setNewMessage("I need to speak with a human support representative.");
+                                    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>
+                                <span className="text-sm font-medium">Human Support</span>
+</button>
                         </div>
                     </div>
                 </div>