const messageList = document.getElementById('message-list');
const messageInput = document.getElementById('message-input');
const sendButton = document.getElementById('send-button');

// Send message function
sendButton.addEventListener('click', sendMessage);
messageInput.addEventListener('keydown', (event) => {
    if (event.key === 'Enter') {
        sendMessage();
    }
});

function sendMessage() {
    const message = messageInput.value.trim();
    if (message === '') {
        return;
    }

    appendMessage(message, 'user-message');
    messageInput.value = '';

    appendMessage('', 'bot-message'); // Create an empty message element for the bot's response

    fetch('/chat_api', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            model: 'qwen3:1.7b', // You can change the model here
            prompt: message
        })
    })
    .then(response => {
        const reader = response.body.getReader();
        const decoder = new TextDecoder();
        let partialResponse = '';

        function read() {
            reader.read().then(({ done, value }) => {
                if (done) {
                    return;
                }
                partialResponse += decoder.decode(value, { stream: true });
                try {
                    const jsonObjects = partialResponse.split('\n');
                    partialResponse = jsonObjects.pop(); // Keep the last partial object
                    for (const jsonObjStr of jsonObjects) {
                        if (jsonObjStr) {
                            const jsonObj = JSON.parse(jsonObjStr);
                            if (jsonObj.response) {
                                appendToLastMessage(jsonObj.response);
                            }
                        }
                    }
                } catch (e) {
                    // JSON parsing error, wait for more chunks
                }
                read();
            });
        }
        read();
    })
    .catch(error => {
        console.error('Error:', error);
        const lastMessage = messageList.lastChild;
        if (lastMessage && lastMessage.classList.contains('bot-message')) {
            lastMessage.textContent = 'Sorry, something went wrong.';
        }
    });
}

function appendMessage(message, className) {
    const li = document.createElement('li');
    li.textContent = message;
    li.classList.add(className);
    messageList.appendChild(li);
    messageList.scrollTop = messageList.scrollHeight;
}

function appendToLastMessage(text) {
    const lastMessage = messageList.lastChild;
    if (lastMessage && lastMessage.classList.contains('bot-message')) {
        lastMessage.textContent += text;
        messageList.scrollTop = messageList.scrollHeight;
    }
}