document.addEventListener("DOMContentLoaded", function() {
    const chatHistory = document.getElementById("chat-history");
    const userInput = document.getElementById("user-input");
    const sendButton = document.getElementById("send-button");

    sendButton.addEventListener("click", function() {
        const userMessage = userInput.value.trim();
        if (userMessage !== "") {
            appendMessage(userMessage, true);
            userInput.value = "";
            sendMessageToPythonAnywhere(userMessage);
        }
    });

    function appendMessage(message, isUser) {
        const messageElement = document.createElement("div");
        messageElement.classList.add("message", isUser ? "user-message" : "bot-message");
        messageElement.textContent = message;
        chatHistory.appendChild(messageElement);
        chatHistory.scrollTop = chatHistory.scrollHeight;
    }

    async function sendMessageToPythonAnywhere(message) {
        try {
            const response = await fetch('YOUR_PYTHONANYWHERE_API_ENDPOINT', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ message: message })
            });
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            const data = await response.json();
            const botResponse = data.message;
            appendMessage(botResponse, false);
        } catch (error) {
            console.error('Error:', error);
        }
    }
});