From e9894b7fa72e6968fe0b485d5d39d4cc3e31c38e Mon Sep 17 00:00:00 2001 From: padre Date: Wed, 2 Apr 2025 02:11:58 +0100 Subject: [PATCH] Version 1 of chatbot frontend --- index.html | 21 ++++++++ readme.md | 31 ++++++++++++ script.js | 68 +++++++++++++++++++++++++ snippet.js | 142 +++++++++++++++++++++++++++++++++++++++++++++++++++++ styles.css | 136 ++++++++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 398 insertions(+) create mode 100644 index.html create mode 100644 readme.md create mode 100644 script.js create mode 100644 snippet.js create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..a27b88d --- /dev/null +++ b/index.html @@ -0,0 +1,21 @@ + + + + + + Chat with n8n + + + +
+
+ Bot Avatar +

Chat with Paul

+
+
+ + +
+ + + diff --git a/readme.md b/readme.md new file mode 100644 index 0000000..6a0df86 --- /dev/null +++ b/readme.md @@ -0,0 +1,31 @@ +# Chat Frontend with n8n Webhook + +This is a simple chat frontend that connects to an n8n instance via a webhook. The frontend allows users to send messages, which are then processed by the n8n workflow and responses are displayed back in the chat interface. + +## Setup Instructions + +1. **Clone or download this repository**. +2. **Open the project in your preferred code editor** (e.g., VSCode). +3. **Ensure you have a running n8n instance** with a webhook set up to receive messages. +4. **Replace the webhook URL** in `script.js` on line 10 with your actual n8n webhook URL. + +## Project Structure + +- `index.html`: The main HTML file for the chat interface. +- `styles.css`: CSS styles for the chat interface. +- `script.js`: JavaScript functionality to handle user input and send messages to n8n via a webhook. +- `readme.md`: Documentation on the project setup and functions. + +## How It Works + +1. **User Input**: The user types a message in the input field and clicks "Send". +2. **Display User Message**: The message is displayed in the chat interface as sent by the user. +3. **Send to n8n**: The message is sent to the specified n8n webhook URL via a POST request. +4. **Receive Response**: The n8n workflow processes the message and sends back a response. +5. **Display Bot Message**: The response from n8n is displayed in the chat interface as received by the bot. + +## Customization + +- **Avatar**: Ensure you have an image file named `bot-avatar.png` in the same directory as the other files. If you want to use a different image, update the `src` attribute of the avatar image in `index.html` to point to the correct path. +- You can customize the appearance of the chat interface by modifying `styles.css`. +- To change the behavior, you can modify the JavaScript logic in `script.js`. diff --git a/script.js b/script.js new file mode 100644 index 0000000..e021cea --- /dev/null +++ b/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); +} diff --git a/snippet.js b/snippet.js new file mode 100644 index 0000000..b3536b8 --- /dev/null +++ b/snippet.js @@ -0,0 +1,142 @@ +// snippet.js + +const chatHTML = ` + + + + + + Chat with n8n + + + +
+
+ Bot Avatar +

Chat with Paul

+
+
+ + +
+ + + +`; + +function injectChat() { + const container = document.createElement('div'); + container.innerHTML = chatHTML; + document.body.appendChild(container); +} + +// Inject the chat when the script is loaded +injectChat(); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..2ad9024 --- /dev/null +++ b/styles.css @@ -0,0 +1,136 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + background-color: #f4f4f9; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} + +.chat-container { + width: 100%; + max-width: 600px; /* Maximum width for larger screens */ + border: 1px solid #ccc; + border-radius: 8px; + overflow: hidden; + display: flex; + flex-direction: column; + height: 100vh; +} + +.avatar-container { + display: flex; + align-items: center; + /*padding: 10px;*/ + /*background-color: #f4f4f9;*/ +} + +.avatar-container img { + margin-right: 0; /* Remove space between the avatar and text */ +} + +#chat-messages { + flex-grow: 1; + padding: 10px; + overflow-y: auto; + background-color: white; +} + +.user-message { + background-color: #d4edda; /* Green background for user messages */ + margin-bottom: 10px; + padding: 8px; + border-radius: 5px; + display: flex; + align-items: center; + justify-content: flex-end; + margin-left: 100px; +} + +.bot-message { + background-color: #cce5ff; /* Blue background for bot messages */ + margin-bottom: 10px; + padding: 8px; + border-radius: 5px; + display: flex; + align-items: center; + justify-content: flex-start; + margin-right: 100px; +} + +input[type="text"] { + width: calc(100% - 22px); + padding: 10px; + border: none; + border-top: 1px solid #ccc; +} + +button { + padding: 10px; + border: none; + background-color: #004085; /* Deep blue background for the send button */ + color: white; + cursor: pointer; + border-radius: 0 0 8px 8px; +} + +button:hover { + background-color: #002a5c; /* Darker deep blue on hover */ +} + +#chat-messages { + flex-grow: 1; + padding: 10px; + overflow-y: auto; + background-color: white; +} + +.avatar-container { + display: flex; + justify-content: center; + align-items: center; + padding: 10px; +} + +.bot-avatar { + width: 50px; + height: 50px; + border-radius: 50%; /* Make the avatar circular */ + background-color: #cce5ff; /* Match the bot message background color */ +} + +.user-message { + background-color: #d4edda; /* Green background for user messages */ + margin-bottom: 10px; + padding: 8px; + border-radius: 5px; + display: flex; + align-items: center; + justify-content: flex-end; + margin-left: 100px; +} + +.bot-message { + background-color: #cce5ff; /* Blue background for bot messages */ + margin-bottom: 10px; + padding: 8px; + border-radius: 5px; + display: flex; + align-items: center; + justify-content: flex-start; + margin-right: 100px; +} + +button { + padding: 10px; + border: none; + background-color: #004085; /* Deep blue background for the send button */ + color: white; + cursor: pointer; + border-radius: 0 0 8px 8px; +} + +button:hover { + background-color: #002a5c; /* Darker deep blue on hover */ +}