Update static/js/chat.js

static/js/chat.js

@@ -1,49 +1,65 @@
 document.addEventListener('DOMContentLoaded', () => {
-    const chatForm = document.getElementById('chat-form');
     const chatMessages = document.getElementById('chat-messages');
+    const chatForm = document.getElementById('chat-form');
     const messageInput = document.getElementById('message-input');
-    const comicButton = document.getElementById('comic-button');
+    const tellStoryButton = document.getElementById('tell-story-button');
     const comicStrip = document.getElementById('comic-strip');
 
+    // Clear chat messages on page load (do not load history from Firebase)
+    chatMessages.innerHTML = '';
+
+    // Function to add a message to the chat
+    function addMessage(sender, message) {
+        const messageElement = document.createElement('p');
+        messageElement.innerHTML = `<strong>${sender}:</strong> ${message}`;
+        chatMessages.appendChild(messageElement);
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+    }
+
+    // Handle form submission (user sending a message)
     chatForm.addEventListener('submit', async (e) => {
         e.preventDefault();
-        const message = messageInput.value;
-        chatMessages.innerHTML += `<p><strong>You:</strong> ${message}</p>`;
-        messageInput.value = '';
+        const message = messageInput.value.trim();
+        if (message) {
+            // Add user's message to the chat
+            addMessage('You', message);
 
-        try {
-            const response = await fetch('/chat', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-                body: `message=${encodeURIComponent(message)}`
-            });
-            const data = await response.json();
-            chatMessages.innerHTML += `<p><strong>Krishna:</strong> ${data.reply}</p>`;
-            chatMessages.scrollTop = chatMessages.scrollHeight;
-
-            // Auto-trigger comic strip if user asks for a story
-            if (message.toLowerCase().includes('story')) {
-                fetchComicStrip();
+            // Send message to the server
+            try {
+                const response = await fetch('/chat', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/x-www-form-urlencoded',
+                    },
+                    body: `message=${encodeURIComponent(message)}`
+                });
+                const data = await response.json();
+                // Add Krishna's response to the chat
+                addMessage('Krishna', data.reply);
+            } catch (error) {
+                console.error('Error sending message:', error);
+                addMessage('Krishna', 'Hare Manavi! Something went wrong—let’s try again!');
             }
-        } catch (error) {
-            console.error('Error sending message:', error);
-            chatMessages.innerHTML += `<p><strong>Error:</strong> Couldn’t reach Krishna—try again!</p>`;
-            chatMessages.scrollTop = chatMessages.scrollHeight;
+
+            // Clear the input field
+            messageInput.value = '';
         }
     });
 
-    comicButton.addEventListener('click', fetchComicStrip);
-
-    async function fetchComicStrip() {
+    // Handle "Tell me a story!" button click
+    tellStoryButton.addEventListener('click', async () => {
         try {
             const response = await fetch('/comic');
             const data = await response.json();
-            comicStrip.innerHTML = data.comic_images.map(url => 
-                `<img src="${url}" alt="Krishna Comic Panel">`
-            ).join('');
+            comicStrip.innerHTML = '';
+            data.comic_images.forEach(imageUrl => {
+                const img = document.createElement('img');
+                img.src = imageUrl;
+                comicStrip.appendChild(img);
+            });
         } catch (error) {
-            console.error('Error fetching comic strip:', error);
-            comicStrip.innerHTML = `<p>Error loading comic strip—try again!</p>`;
+            console.error('Error generating comic strip:', error);
+            comicStrip.innerHTML = '<p>Error generating comic strip—try again!</p>';
         }
-    }
+    });
 });