Update templates/chat.html
Browse files- 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 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
13 |
</div>
|
14 |
{% endblock %}
|
15 |
|
16 |
{% block scripts %}
|
17 |
-
<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 %}
|