const socket = io.connect(document.baseURI);

const chatBox = document.getElementById('chat-box');
const chatInput = document.getElementById('chat-input');
const sendButton = document.getElementById('send-button');
var converter = new showdown.Converter();
var response="";

function appendMessage(message, sender) {
    if(sender == "bot"){
        response += message;
        message = converter.makeHtml(response);

        loader_ele = document.getElementById("loader");
        
        if(!loader_ele.classList.contains("hidden")){
            loader_ele.classList.add('hidden');
            const messageElement = document.createElement('div');
            messageElement.classList.add('chat-message', sender);
            messageElement.innerHTML = `<span>${message}</span>`;
            chatBox.append(messageElement);
            chatBox.scrollTop = chatBox.scrollHeight;
        }else{
            last_message_ele = chatBox.lastElementChild.lastChild;
            last_message_ele.innerHTML  = message;
        }
    }else{
        const messageElement = document.createElement('div');
        messageElement.classList.add('chat-message', sender);
        messageElement.innerHTML = `<span>${message}</span>`;
        chatBox.prepend(messageElement);
        chatBox.scrollTop = chatBox.scrollHeight;
        setTimeout(() => {
            document.getElementById("loader").classList.remove('hidden');
        }, 500);
    }
    chatBox.scrollTop = chatBox.scrollHeight;
}

sendButton.addEventListener('click', () => {
    const message = chatInput.value.trim();
    if (message) {
        appendMessage(message, 'user');
        socket.emit('message', { question: message, session_id: 'abc123' });
        chatInput.value = '';
        response = "";
    }
});

chatInput.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
        sendButton.click();
    }
});

socket.on('response', (response) => {
    appendMessage(response, 'bot');
});