const sendBtn = document.getElementById('send-btn');
const userInput = document.getElementById('user-input');
const apiKeyInput = document.getElementById('api-key-input');
const chatBox = document.getElementById('chat-box');

sendBtn.addEventListener('click', () => {
    const message = userInput.value.trim();
    const apiKey = apiKeyInput.value.trim();
    console.log("message: ", message)
    console.log("apiKey: ", apiKey)

    if (message && apiKey) {
        // Display user's message immediately
        const userMessageDiv = document.createElement('div');
        userMessageDiv.className = 'user-message';
        userMessageDiv.innerText = message;
        chatBox.appendChild(userMessageDiv);
        scrollToBottom();

        // Call FastAPI backend to get response
        console.log("type: ", typeof message, typeof apiKey)
        fetch('/chat/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({user_input: message, api_key: apiKey})
        })
        .then(response => {
            console.log("response: ", response)
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            console.log("reply: ", data.response)
            // Display chatbot's response
            const botMessageDiv = document.createElement('div');
            botMessageDiv.className = 'bot-message';
            botMessageDiv.innerText = data.response;
            chatBox.appendChild(botMessageDiv);
            scrollToBottom();
        })
        .catch(error => {
            console.log('There was a problem with the fetch operation:', error.message);
        });

        userInput.value = ''; // Clear the input field
    }
});

function scrollToBottom() {
    chatBox.scrollTop = chatBox.scrollHeight;
}