// This will handle sending the message and displaying the response in the Gradio chatbot
function sendMessage() {
    const input = document.getElementById("user-input").value;
    const chatbox = document.getElementById("chatbot");

    if (input.trim() === "") {
        return; // Ignore if no input is provided
    }

    // Add the user's message to the chatbox
    chatbox.innerHTML += `
        <div class="user-message">
            <p>${input}</p>
        </div>
    `;
    
    // Clear the input box
    document.getElementById("user-input").value = "";

    // Scroll to the bottom of the chat for new message
    chatbox.scrollTop = chatbox.scrollHeight;

    // Send the input to Gradio and get the bot response
    fetch('/process_message', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ message: input })
    })
    .then(response => response.json())
    .then(data => {
        // Add the bot's response to the chatbox
        chatbox.innerHTML += `
            <div class="bot-message">
                <p>${data.response}</p>
            </div>
        `;
        
        // Scroll to the bottom again after the bot's response
        chatbox.scrollTop = chatbox.scrollHeight;
    })
    .catch(error => {
        console.error('Error:', error);
        chatbox.innerHTML += `
            <div class="bot-message">
                <p>Sorry, something went wrong.</p>
            </div>
        `;
    });
}

// Add an event listener for the Enter key to send messages
document.getElementById("user-input").addEventListener("keypress", function(e) {
    if (e.key === "Enter") {
        sendMessage();
    }
});