// Get the user input element from the DOM
const chatbox = document.getElementById('chatbox');
const userInput = document.getElementById('userInput');

// Define a function to send the user's message to the AI
function sendMessage() {
  // Get the user's input message and trim any whitespace
    const query = userInput.value.trim();

    // Check if the message is not empty
    if (query !== '') {
 
        fetch(`${apiEndpoint}`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ query }),
        })
        .then(response => response.json())
        .then(data => {
            // Get the AI's response from the API data
            const aiResponse = data.response;

            // Render the user's original message in the chatbox
            renderMessage(query, 'user-message');

            // Render the AI's response in the chatbox
            renderMessage(aiResponse, 'ai-response');

            // Clear the user input field for the next message
            userInput.value = '';
        })
        .catch(error => console.error('Error sending message:', error));
    }
}

// Define a function to render a message in the chatbox with a specific class name
function renderMessage(text, className) {
    // Create a new div element to hold the message
    const messageElement = document.createElement('div');

    // Add the specified class name to the element
    messageElement.className = className;

    // Set the text content of the element to the message text
    messageElement.textContent = text;

    // Append the message element to the chatbox
    chatbox.appendChild(messageElement);
}