85 lines
2.6 KiB
JavaScript
85 lines
2.6 KiB
JavaScript
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;
|
|
}
|