gimme correct working code

index.html

@@ -209,6 +209,45 @@
                 "hi": "Hi there! What AI concept would you like to explore?",
                 "explain backpropagation": "Backpropagation is the algorithm used to train neural networks. It works by:\n1. Forward pass: Compute predictions\n2. Calculate loss\n3. Backward pass: Compute gradients\n4. Update weights using gradient descent\n\nIt's called 'back' propagation because gradients flow backward through the network from output to input layers.",
                 "show python ml example": "Here's a simple linear regression example using scikit-learn:\n
-<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+        // Send message when Enter is pressed
+        userInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                sendMessage();
+            }
+        });
+
+        // Send button click handler
+        sendButton.addEventListener('click', sendMessage);
+
+        // Quick prompt buttons
+        quickPrompts.forEach(button => {
+            button.addEventListener('click', () => {
+                userInput.value = button.textContent;
+                sendMessage();
+            });
+        });
+
+        async function sendMessage() {
+            const message = userInput.value.trim();
+            if (!message) return;
+
+            addUserMessage(message);
+            userInput.value = '';
+
+            const typingIndicator = addBotMessage('', true);
+            
+            // Simulate API delay
+            setTimeout(async () => {
+                const response = await getBotResponse(message);
+                chatMessages.removeChild(typingIndicator);
+                addBotMessage(response);
+            }, 1000 + Math.random() * 2000);
+        }
+
+        // Initialize Feather Icons
+        document.addEventListener('DOMContentLoaded', () => {
+            feather.replace();
+        });
+    </script>
 </body>
 </html>

style.css

@@ -1,28 +1,59 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    margin: 0;
+    padding: 0;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.chat-container {
+    height: calc(100vh - 180px);
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.chat-message {
+    animation: fadeIn 0.3s ease-in-out;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.typing-indicator::after {
+    content: '...';
+    animation: typing 1.5s infinite;
 }
+
+@keyframes typing {
+    0% { content: '.'; }
+    33% { content: '..'; }
+    66% { content: '...'; }
+}
+
+.gradient-bg {
+    background: linear-gradient(135deg, rgba(217, 70, 239, 0.2) 0%, rgba(234, 179, 8, 0.2) 100%);
+}
+
+/* Dark mode specific styles */
+.dark {
+    background-color: #111827;
+    color: #f3f4f6;
+}
+
+.dark .bg-gray-800 {
+    background-color: #1f2937;
+}
+
+.dark .bg-gray-700 {
+    background-color: #374151;
+}
+
+.dark .bg-gray-600 {
+    background-color: #4b5563;
+}
+
+.dark .text-gray-300 {
+    color: #d1d5db;
+}
+
+.dark .border-gray-600 {
+    border-color: #4b5563;
+}