templates/chat.html

{% 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 %}