ayush2917 commited on
Commit
2b18c53
·
verified ·
1 Parent(s): e9d3ae2

Update templates/chat.html

Browse files
Files changed (1) hide show
  1. templates/chat.html +70 -2
templates/chat.html CHANGED
@@ -9,10 +9,78 @@
9
  {% block content %}
10
  <div class="container">
11
  <h1>Chat with Little Krishna</h1>
12
- <p>Chat functionality to be implemented.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
13
  </div>
14
  {% endblock %}
15
 
16
  {% block scripts %}
17
- <script src="{{ url_for('static', filename='js/chat.js') }}"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
18
  {% endblock %}
 
9
  {% block content %}
10
  <div class="container">
11
  <h1>Chat with Little Krishna</h1>
12
+
13
+ <div class="chat-container">
14
+ <!-- Chat history will appear here -->
15
+ <div id="chat-history" class="chat-history">
16
+ {% if chat_history %}
17
+ {% for message in chat_history %}
18
+ <div class="message {% if message.sender == 'user' %}user-message{% else %}krishna-message{% endif %}">
19
+ {{ message.content }}
20
+ </div>
21
+ {% endfor %}
22
+ {% endif %}
23
+ </div>
24
+
25
+ <!-- Chat input form -->
26
+ <form id="chat-form" class="chat-form">
27
+ <input type="text" id="user-message" name="message" placeholder="Type your message to Krishna..." required>
28
+ <button type="submit" class="send-button">
29
+ <i class="fas fa-paper-plane"></i> Send
30
+ </button>
31
+ </form>
32
+ </div>
33
  </div>
34
  {% endblock %}
35
 
36
  {% block scripts %}
37
+ <script>
38
+ document.addEventListener('DOMContentLoaded', function() {
39
+ const chatForm = document.getElementById('chat-form');
40
+ const userMessageInput = document.getElementById('user-message');
41
+ const chatHistory = document.getElementById('chat-history');
42
+
43
+ chatForm.addEventListener('submit', async function(e) {
44
+ e.preventDefault();
45
+ const message = userMessageInput.value.trim();
46
+
47
+ if (!message) return;
48
+
49
+ // Add user message to chat
50
+ addMessageToChat('user', message);
51
+ userMessageInput.value = '';
52
+
53
+ try {
54
+ // Send message to backend
55
+ const response = await fetch('/chat', {
56
+ method: 'POST',
57
+ headers: {
58
+ 'Content-Type': 'application/x-www-form-urlencoded',
59
+ },
60
+ body: `message=${encodeURIComponent(message)}`
61
+ });
62
+
63
+ const data = await response.json();
64
+
65
+ if (data.reply) {
66
+ // Add Krishna's reply to chat
67
+ addMessageToChat('krishna', data.reply);
68
+ } else if (data.error) {
69
+ addMessageToChat('system', `Error: ${data.error}`);
70
+ }
71
+ } catch (error) {
72
+ console.error('Error:', error);
73
+ addMessageToChat('system', 'Failed to get response from Krishna. Please try again.');
74
+ }
75
+ });
76
+
77
+ function addMessageToChat(sender, message) {
78
+ const messageDiv = document.createElement('div');
79
+ messageDiv.className = `message ${sender}-message`;
80
+ messageDiv.textContent = message;
81
+ chatHistory.appendChild(messageDiv);
82
+ chatHistory.scrollTop = chatHistory.scrollHeight;
83
+ }
84
+ });
85
+ </script>
86
  {% endblock %}