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