Update static/js/chat.js

static/js/chat.js

@@ -1,4 +1,51 @@
-// static/js/chat.js
-document.addEventListener('DOMContentLoaded', function () {
-    console.log('Chat page loaded');
+document.addEventListener('DOMContentLoaded', () => {
+    const chatForm = document.querySelector('.chat-input');
+    const chatInput = chatForm.querySelector('input');
+    const chatHistory = document.querySelector('.chat-history');
+
+    if (chatForm && chatInput && chatHistory) {
+        chatForm.addEventListener('submit', (event) => {
+            event.preventDefault();
+            const message = chatInput.value.trim();
+            if (!message) return;
+
+            // Add user message
+            addMessage(message, 'manavi');
+            chatInput.value = '';
+
+            // Send message via AJAX
+            const formData = new FormData();
+            formData.append('message', message);
+
+            fetch('/chat', {
+                method: 'POST',
+                body: formData
+            })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.reply) {
+                        addMessage(data.reply, 'krishna');
+                        scrollToBottom();
+                    } else {
+                        addMessage('Hare Manavi! Something went wrong—try again!', 'krishna');
+                    }
+                })
+                .catch(error => {
+                    console.error('Error sending message:', error);
+                    addMessage('Hare Manavi! The flute’s tune got lost—try again!', 'krishna');
+                });
+        });
+    }
+
+    function addMessage(text, sender) {
+        const messageDiv = document.createElement('div');
+        messageDiv.className = `message ${sender}`;
+        messageDiv.textContent = text;
+        chatHistory.appendChild(messageDiv);
+        messageDiv.style.animation = 'slideIn 0.5s ease';
+    }
+
+    function scrollToBottom() {
+        chatHistory.scrollTop = chatHistory.scrollHeight;
+    }
 });