function sendMessage() {
    const userInput = document.getElementById('user-input');
    const message = userInput.value.trim();

    if (message === '') {
        return;
    }

    // Display the user's message
    displayMessage(message, 'user');

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

    // Add a "Thinking..." message
    displayMessage("Thinking...", 'bot', true);

    // Send the message to n8n via a webhook
fetch('https://your-n8n-instance.com/webhook/your-webhook-id', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ message })
})
.then(response => response.json())
.then(data => {
    // Remove the "Thinking..." message
    const chatMessages = document.getElementById('chat-messages');
    const thinkingMessage = chatMessages.lastElementChild;
    if (thinkingMessage && thinkingMessage.textContent === 'Thinking...') {
        chatMessages.removeChild(thinkingMessage);
    }

    // Display the n8n's response from the 'text' field
    displayMessage(data.text, 'bot');
})
.catch(error => {
    console.error('Error sending message:', error);
    alert('Failed to send message. Please try again.');
});
}

// Display initial bot message
window.onload = function() {
    displayMessage("Hi I'm Paul, how can I help you?", 'bot');

    // Add event listener for Enter key
    const userInput = document.getElementById('user-input');
    userInput.addEventListener('keydown', function(event) {
        if (event.key === 'Enter') {
            sendMessage();
        }
    });
};

function displayMessage(message, sender, isThinking) {
    const chatMessages = document.getElementById('chat-messages');
    const messageElement = document.createElement('div');
    messageElement.classList.add(sender === 'user' ? 'user-message' : 'bot-message');

    if (sender === 'bot') {
        const avatarContainer = document.createElement('div');
        avatarContainer.classList.add('avatar-container');
        const avatar = document.createElement('img');
        avatar.src = 'bot-avatar.png';
        avatar.alt = 'Bot Avatar';
        avatar.classList.add('bot-avatar');
        avatarContainer.appendChild(avatar);
        messageElement.appendChild(avatarContainer);
    }

    const textElement = document.createElement('div');
    textElement.textContent = message;
    messageElement.appendChild(textElement);

    chatMessages.appendChild(messageElement);
    scrollToBottom();
}

function scrollToBottom() {
    const chatMessages = document.getElementById('chat-messages');
    chatMessages.scrollTop = chatMessages.scrollHeight;
}