Version 1 of chatbot frontend

script.js

@@ -0,0 +1,68 @@
+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 = '';
+
+    // 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 => {
+    // 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) {
+    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);
+}