use and ai model for the chat and change the colour

index.html

@@ -415,7 +415,7 @@ useEffect(() => {
                 });
                 
                 // Initialize Vanta.js background
-                    VANTA.GLOBE({
+                        VANTA.GLOBE({
                         el: "#chat-background",
                         mouseControls: true,
                         touchControls: true,
@@ -424,10 +424,18 @@ useEffect(() => {
                         minWidth: 200.00,
                         scale: 1.00,
                         scaleMobile: 1.00,
-                        color: aiMode ? 0x7c3aed : 0x3b82f6,
+                        color: aiMode ? 0x10b981 : 0xf59e0b,
                         backgroundColor: 0xf8fafc,
                         size: 0.8
                     });
+
+                    // Initialize AI model
+                    const aiModel = new window.AIModel({
+                        modelName: 'gpt-3.5-turbo',
+                        apiKey: 'sk-your-api-key-here',
+                        temperature: 0.7,
+                        maxTokens: 150
+                    });
 feather.replace();
             }, []);
             
@@ -443,23 +451,16 @@ feather.replace();
                 setTimeout(() => {
                     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.";
+                        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."
+                            });
+                        } 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.";
                     }
@@ -516,10 +517,10 @@ setMessages(prev => [...prev, botMsg]);
                                             <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' 
+                                                ? 'bg-green-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'
+                                                    ? 'bg-amber-50 text-gray-800 rounded-bl-none border border-amber-200' 
+                                                    : 'bg-blue-50 text-gray-800 rounded-bl-none border border-blue-200'
                                         }`}
 >
                                                 <p>{msg.text}</p>
@@ -574,9 +575,9 @@ setMessages(prev => [...prev, botMsg]);
                                     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)'
-                                    }}
+                                        backgroundColor: aiMode ? 'rgba(16, 185, 129, 0.1)' : 'rgba(245, 158, 11, 0.1)',
+                                        color: aiMode ? 'rgb(16, 185, 129)' : 'rgb(245, 158, 11)'
+}}
                                 >
                                     <i data-feather={aiMode ? "cpu" : "user"} className="w-3 h-3 mr-1"></i>
                                     {aiMode ? 'AI Mode' : 'Support'}
@@ -712,6 +713,7 @@ setMessages(prev => [...prev, botMsg]);
         // Render the app
         ReactDOM.render(<App />, document.getElementById('root'));
     </script>
-    <script>feather.replace();</script>
+        <script src="https://cdn.jsdelivr.net/npm/ai-model@latest/dist/ai-model.min.js"></script>
+        <script>feather.replace();</script>
 </body>
 </html>