static/js/chat.js

document.addEventListener('DOMContentLoaded', () => {
    const chatForm = document.querySelector('.chat-input');
    const chatInput = chatForm.querySelector('input');
    const chatHistory = document.querySelector('.chat-history');

    if (chatForm && chatInput && chatHistory) {
        chatForm.addEventListener('submit', (event) => {
            event.preventDefault();
            const message = chatInput.value.trim();
            if (!message) return;

            // Add user message
            addMessage(message, 'manavi');
            chatInput.value = '';

            // Send message via AJAX
            const formData = new FormData();
            formData.append('message', message);

            fetch('/chat', {
                method: 'POST',
                body: formData
            })
                .then(response => response.json())
                .then(data => {
                    if (data.reply) {
                        addMessage(data.reply, 'krishna');
                        scrollToBottom();
                    } else {
                        addMessage('Hare Manavi! Something went wrong—try again!', 'krishna');
                    }
                })
                .catch(error => {
                    console.error('Error sending message:', error);
                    addMessage('Hare Manavi! The flute’s tune got lost—try again!', 'krishna');
                });
        });
    }

    function addMessage(text, sender) {
        const messageDiv = document.createElement('div');
        messageDiv.className = `message ${sender}`;
        messageDiv.textContent = text;
        chatHistory.appendChild(messageDiv);
        messageDiv.style.animation = 'slideIn 0.5s ease';
    }

    function scrollToBottom() {
        chatHistory.scrollTop = chatHistory.scrollHeight;
    }
});