Update static/js/chat.js

static/js/chat.js

@@ -0,0 +1,49 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const chatForm = document.getElementById('chat-form');
+    const chatMessages = document.getElementById('chat-messages');
+    const messageInput = document.getElementById('message-input');
+    const comicButton = document.getElementById('comic-button');
+    const comicStrip = document.getElementById('comic-strip');
+
+    chatForm.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const message = messageInput.value;
+        chatMessages.innerHTML += `<p><strong>You:</strong> ${message}</p>`;
+        messageInput.value = '';
+
+        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();
+            }
+        } 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;
+        }
+    });
+
+    comicButton.addEventListener('click', fetchComicStrip);
+
+    async function fetchComicStrip() {
+        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('');
+        } catch (error) {
+            console.error('Error fetching comic strip:', error);
+            comicStrip.innerHTML = `<p>Error loading comic strip—try again!</p>`;
+        }
+    }
+});