chatbot-gui-plugin v1.0.0

Chatbot GUI A simple and interactive chatbot GUI built with HTML, CSS, JavaScript, and WebSocket. This project allows users to interact with a chatbot in real-time, send messages, and receive responses dynamically.

Features Real-time messaging: Communicate with the chatbot using WebSocket for instant responses.

Interactive UI: Toggle the chatbox, minimize it, and clear the chat history.

Typing animation: Visual feedback when the chatbot is "typing" a response.

Responsive design: Works on both desktop and mobile devices.

Customizable: Easily modify the chatbot's behavior and appearance.

Installation Follow these steps to set up the project locally:

Download the project:

Download the project files and extract them to a folder on your computer.

Install dependencies:

Open a terminal in the project folder and run:

bash

npm install Start the server:

Run the following command to start the server:

bash

npm start Open the application:

Open your browser and navigate to http://localhost:3000.

Usage Open the chatbox:

Click the chat head (💬) in the bottom-right corner to open the chatbox.

Send a message:

Type your message in the input field and press Enter or click the Send button.

Minimize the chatbox:

Click the − button to minimize the chatbox.

Clear the chat:

Click the Clear button to remove all messages from the chatbox.

Project Structure Copy chatbot-gui/ ├── src/ │ ├── public/ │ │ ├── index.html # Main HTML file │ │ └── styles.css # CSS styles for the chat interface │ ├── server.js # Express server and WebSocket setup │ └── client.js # Client-side JavaScript for interactivity ├── package.json # Project dependencies and scripts └── README.md # Project documentation Dependencies Express: Web server framework.

WebSocket: Real-time communication between client and server.

node-fetch: HTTP requests for sending messages to the chatbot API.

To install all dependencies, run:

bash Copy npm install Configuration To customize the chatbot, update the following in client.js:

WebSocket URL:

javascript Copy const socket = new WebSocket(wss://sme-api.jina.bot/api/llm/connect-socket/?token=${token}); Virtual Assistant ID:

javascript Copy virtual_assistant_id: '675958338882c8208677486c' Styling:

Modify styles.css to change the appearance of the chat interface.

License This project is licensed under the MIT License. See the LICENSE file for details.

Acknowledgments Thanks to Jina AI for providing the chatbot API.

Inspired by modern chat interfaces and real-time messaging applications.