Version 1 of chatbot frontend

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`.