Update templates/chat.html

templates/chat.html

@@ -1,70 +1,18 @@
 {% extends "base.html" %}
 
+{% block title %}Chat with Krishna{% endblock %}
+
+{% block styles %}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/chat.css') }}">
+{% endblock %}
+
 {% block content %}
 <div class="container">
-  <div class="chat-container">
     <h1>Chat with Little Krishna</h1>
-
-    {% 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>
-
-    <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>
+    <p>Chat functionality to be implemented.</p>
 </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>
+<script src="{{ url_for('static', filename='js/chat.js') }}"></script>
 {% endblock %}