const sendBtn = document.getElementById("send-btn");
loadChat();
sendBtn.addEventListener("click", async () => {

    const input = document.getElementById("user-input");
    const text = input.value;

    const messages = document.getElementById("messages");

    messages.innerHTML += `<p><b>You:</b> ${text}</p>`;
    const source = new EventSource("/stream");

        source.onmessage = function(event) {
            messages.innerHTML += event.data;
        };
    const response = await fetch("/chat", {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            message: text
        })
    });

    const data = await response.json();

    messages.innerHTML += `<p><b>AI:</b> ${data.response}</p>`;

    input.value = "";
});

async function loadChat() {

    const res = await fetch("/init");
    const data = await res.json();

    const messages = document.getElementById("messages");

    data.messages.forEach(msg => {
        messages.innerHTML += `<p><b>${msg.role}:</b> ${msg.content}</p>`;
    });
}