Update templates/chat.html

templates/chat.html

@@ -1,23 +1,70 @@
-{% extends 'base.html' %}
+{% extends "base.html" %}
+
 {% block content %}
+<div class="container">
+  <div class="chat-container">
     <h1>Chat with Little Krishna</h1>
-    <div id="chat-container">
-        <div id="chat-messages"></div>
-        <form id="chat-form">
-            <input type="text" id="message-input" placeholder="Say something to Krishna..." required>
-            <button type="submit">Send</button>
-        </form>
-        <div id="story-section">
-            <input type="text" id="story-theme" placeholder="Enter a theme (e.g., butter, peacock)..." value="Vrindavan">
-            <button id="tell-story-button">Tell me a story!</button>
-        </div>
-        <div id="story-output"></div>
-        <audio id="story-audio" controls style="display: none; margin-top: 10px;"></audio>
-        <div id="riddle-section">
-            <button id="tell-riddle-button">Tell me a riddle!</button>
-        </div>
-        <div id="riddle-output"></div>
-        <div id="comic-strip"></div>
+
+    {% if chat_history %}
+      <div class="chat-history">
+        {% for message in chat_history %}
+          <p><strong>You:</strong> {{ message.user_input }}</p>
+          <p><strong>Krishna:</strong> {{ message.reply }}</p>
+        {% endfor %}
+      </div>
+    {% else %}
+      <p class="chat-error">Error loading chat—try again</p>
+    {% endif %}
+
+    <div class="chat-options">
+      <button onclick="sendMessage('Say something to Krishna...')">Say Something</button>
+      <button onclick="sendMessage('Tell me a story!')">Tell a Story</button>
+      <button onclick="sendMessage('Tell me a riddle!')">Tell a Riddle</button>
     </div>
-    <script src="/static/js/chat.js"></script>
+
+    <div class="chat-input">
+      <input type="text" id="message-input" placeholder="Type your message here..." />
+      <button onclick="sendMessage(document.getElementById('message-input').value)">Send</button>
+    </div>
+  </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+  async function sendMessage(message) {
+    if (!message) return;
+
+    const response = await fetch('/chat', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+      },
+      body: new URLSearchParams({ 'message': message })
+    });
+
+    const data = await response.json();
+    if (data.reply) {
+      const chatHistory = document.querySelector('.chat-history') || document.createElement('div');
+      if (!chatHistory.classList.contains('chat-history')) {
+        chatHistory.classList.add('chat-history');
+        document.querySelector('.chat-container').insertBefore(chatHistory, document.querySelector('.chat-options'));
+      }
+      chatHistory.innerHTML += `<p><strong>You:</strong> ${message}</p>`;
+      chatHistory.innerHTML += `<p><strong>Krishna:</strong> ${data.reply}</p>`;
+      chatHistory.scrollTop = chatHistory.scrollHeight;
+
+      // Remove error message if present
+      const errorMessage = document.querySelector('.chat-error');
+      if (errorMessage) {
+        errorMessage.remove();
+      }
+    } else {
+      alert('Error: Could not get a response from Krishna. Please try again.');
+    }
+
+    // Clear the input field
+    document.getElementById('message-input').value = '';
+  }
+</script>
 {% endblock %}