Create js/chatVchat.js

static/js/chatVchat.js

@@ -0,0 +1,37 @@
+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 = '';
+
+        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;
+
+        if (message.toLowerCase().includes('story')) {
+            fetchComicStrip();
+        }
+    });
+
+    comicButton.addEventListener('click', fetchComicStrip);
+
+    async function fetchComicStrip() {
+        const response = await fetch('/comic');
+        const data = await response.json();
+        comicStrip.innerHTML = data.comic_images.map(url => 
+            `<img src="${url}" alt="Krishna Comic Panel" style="max-width: 200px; margin: 10px;">`
+        ).join('');
+    }
+});