let state = null;

async function sendMessage() {
    let inputText = document.getElementById("user-input").value;
    document.getElementById("user-input").value = "";
    let chatBox = document.getElementById("chat-box");

    // Display the user's message
    chatBox.innerHTML += `<div>User: ${inputText}</div>`;

    // Send the message to the Gradio backend (via your Gradio app)
    let response = await fetch("http://localhost:7860/api/predict/", {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            data: [inputText, state],
        }),
    });

    let result = await response.json();
    let botMessage = result.data[0];

    // Display the bot's response
    chatBox.innerHTML += `<div>Bot: ${botMessage}</div>`;
    chatBox.scrollTop = chatBox.scrollHeight;

    state = result.data[1]; // Update the state for next round
}