ok

assets/css/custom.css

@@ -1,4 +1,3 @@
-
 html {
     scroll-behavior: smooth;
 }
@@ -124,3 +123,35 @@ body {
     margin-right: 0.5rem;
 }
 
+.typing-indicator {
+    display: flex;
+    align-items: center;
+    padding: 1rem;
+}
+
+.typing-indicator span {
+    height: 8px;
+    width: 8px;
+    background-color: #999;
+    border-radius: 50%;
+    display: inline-block;
+    margin: 0 2px;
+    animation: bounce 1s infinite;
+}
+
+.typing-indicator span:nth-child(2) {
+    animation-delay: 0.1s;
+}
+
+.typing-indicator span:nth-child(3) {
+    animation-delay: 0.2s;
+}
+
+@keyframes bounce {
+    0%, 80%, 100% {
+        transform: scale(0);
+    }
+    40% {
+        transform: scale(1.0);
+    }
+}

assets/js/main.js

@@ -22,6 +22,26 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     }
 
+    function getBotResponse(message) {
+        const lowerMessage = message.toLowerCase();
+        if (lowerMessage.includes('hello') || lowerMessage.includes('hi')) {
+            return 'Hello there! How can I assist you today?';
+        }
+        if (lowerMessage.includes('help')) {
+            return 'I can help with a variety of topics. What do you need assistance with? You can ask me about images or voice control.';
+        }
+        if (lowerMessage.includes('image')) {
+            return 'I can generate images, but that feature is not implemented yet. Stay tuned!';
+        }
+        if (lowerMessage.includes('voice')) {
+            return 'I can handle voice commands, but that feature is not implemented yet. Stay tuned!';
+        }
+        if (lowerMessage.includes('bye')) {
+            return 'Goodbye! Have a great day!';
+        }
+        return 'Thanks for your message! I am a simple bot. More advanced AI features are coming soon.';
+    }
+
     function sendMessage() {
         const messageText = messageInput.value.trim();
         if (messageText === '') return;
@@ -38,14 +58,23 @@ document.addEventListener('DOMContentLoaded', function() {
         // Scroll to bottom
         chatBody.scrollTop = chatBody.scrollHeight;
 
+        // Show typing indicator
+        const typingIndicator = document.createElement('div');
+        typingIndicator.classList.add('message', 'bot-message', 'typing-indicator');
+        typingIndicator.innerHTML = '<span></span><span></span><span></span>';
+        chatBody.appendChild(typingIndicator);
+        chatBody.scrollTop = chatBody.scrollHeight;
+
         // Bot reply
         setTimeout(() => {
+            const botResponse = getBotResponse(messageText);
+            typingIndicator.remove();
             const botMessage = document.createElement('div');
             botMessage.classList.add('message', 'bot-message');
-            botMessage.textContent = 'Thanks for your message! This is a pre-written response. AI integration is coming soon.';
+            botMessage.textContent = botResponse;
             chatBody.appendChild(botMessage);
             chatBody.scrollTop = chatBody.scrollHeight;
-        }, 500);
+        }, 1000);
     }
 
     if (sendButton) {
@@ -59,4 +88,4 @@ document.addEventListener('DOMContentLoaded', function() {
             }
         });
     }
-});
+});