GITBOOK-28: No subject

docs/README.md

@@ -0,0 +1,62 @@
+---
+cover: .gitbook/assets/WorkWithPassionBg.7161134c.png
+coverY: 0
+layout:
+  cover:
+    visible: true
+    size: full
+  title:
+    visible: true
+  description:
+    visible: false
+  tableOfContents:
+    visible: true
+  outline:
+    visible: true
+  pagination:
+    visible: true
+---
+
+# Welcome
+
+Welcome to the Hexabot Documentation! Hexabot is a powerful and versatile open-source chatbot platform designed to simplify the creation and management of intelligent conversational chatbots. Whether you're a business owner seeking to automate customer interactions, an organization looking to engage your audience, or a developer wanting to integrate conversational AI into your applications, Hexabot provides the tools and flexibility you need.
+
+<figure><img src=".gitbook/assets/mediamodifier_image.png" alt=""><figcaption><p>A preview of Hexabot visual editor</p></figcaption></figure>
+
+## Key Features
+
+Hexabot comes equipped with a comprehensive suite of features to empower your chatbot development:
+
+* **Intuitive Visual Editor:** Build complex conversation flows without coding using our drag-and-drop interface and a diverse library of pre-built blocks.
+* **NLU Engine:** Leverage state-of-the-art NLP technology to understand user intent, extract key information, and deliver personalized responses.
+* **Flexible Deployment Options:** Deploy your chatbots on various platforms, including Facebook Messenger, web widgets, and custom integrations.
+* **Comprehensive Analytics and Reporting:** Track key metrics, monitor chatbot performance, and gain valuable insights into user interactions.
+* **And More:** Discover a range of additional features, including user segmentation, content management, and third-party integrations.
+
+## Who Should Use This Documentation
+
+This documentation is a valuable resource for:
+
+* **New Users:** Get started with Hexabot, learn the basics of chatbot creation, and build your first conversational chatbot.
+* Experienced Users: Explore advanced features, optimize your existing chatbots, and discover best practices for chatbot development.
+* Developers: Integrate Hexabot with your applications, leverage our APIs, and extend the platform's functionality by developing add-ons for Hexabot.
+* Administrators: Manage users, configure settings, and ensure the smooth operation of Hexabot within your organization.
+
+## How to Use This Documentation
+
+To navigate this documentation effectively:
+
+* Search: Use the search bar to quickly find information on specific topics or keywords.
+* Navigation: Browse through the table of contents to explore different sections and find the information you need.
+* Links: Follow links to related articles and resources for in-depth explanations and examples.
+
+Feedback: We encourage you to provide feedback and suggestions for improvement. Your input helps us make this documentation even better.
+
+## Contacting Support
+
+If you encounter any issues or have questions not addressed in this documentation, our dedicated support team is here to assist you. Please contact us at [hello@hexabot.ai](mailto:hello@hexabot.ai)
+
+### Jump right in
+
+<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Getting Started</strong></td><td>Install Hexabot and create your first flow</td><td><a href=".gitbook/assets/1.png">1.png</a></td><td></td><td><a href="quickstart/">quickstart</a></td></tr><tr><td><strong>Product overview</strong></td><td>Key Features and Capabilities</td><td><a href=".gitbook/assets/4.png">4.png</a></td><td></td><td><a href="broken-reference">Broken link</a></td></tr><tr><td><strong>User Guide</strong></td><td>Learn the basics of Hexabot</td><td><a href=".gitbook/assets/2.png">2.png</a></td><td></td><td><a href="broken-reference">Broken link</a></td></tr><tr><td><strong>Developer Guide</strong></td><td>Learn how to develop for Hexabot</td><td><a href=".gitbook/assets/3.png">3.png</a></td><td></td><td><a href="broken-reference">Broken link</a></td></tr><tr><td><strong>Key Concepts</strong></td><td>Understanding the Fundamentals of Chatbot Building</td><td><a href=".gitbook/assets/3.png">3.png</a></td><td></td><td><a href="broken-reference">Broken link</a></td></tr></tbody></table>
+

docs/SUMMARY.md

@@ -0,0 +1,61 @@
+# Table of contents
+
+* [Welcome](README.md)
+
+## Introduction
+
+* [Overview](introduction/overview.md)
+* [Features](introduction/features.md)
+
+***
+
+* [Quick start](quickstart/README.md)
+  * [Installation](quickstart/installation.md)
+  * [Create your first flow](quickstart/create-your-first-flow.md)
+
+## USER GUIDE
+
+* [Visual Editor](user-guide/visual-editor/README.md)
+  * [Using the Visual Editor](user-guide/visual-editor/using-the-visual-editor.md)
+  * [Regular Blocks](user-guide/visual-editor/regular-blocks/README.md)
+    * [Using Simple Text Block](user-guide/visual-editor/regular-blocks/using-simple-text-block.md)
+    * [Using Quick Replies Block](user-guide/visual-editor/regular-blocks/using-quick-replies-block.md)
+    * [Using Buttons Block](user-guide/visual-editor/regular-blocks/using-buttons-block.md)
+    * [Using Attachment Block](user-guide/visual-editor/regular-blocks/using-attachment-block.md)
+  * [Using Advanced Blocks](user-guide/visual-editor/using-advanced-blocks.md)
+* [NLP Training](user-guide/nlp-training.md)
+* [Configure Content](user-guide/configure-content/README.md)
+  * [Content Types](user-guide/configure-content/content-types.md)
+  * [Translations](user-guide/configure-content/translations.md)
+  * [Manage Persistent Menu](user-guide/configure-content/manage-persistent-menu.md)
+  * [Media Library](user-guide/configure-content/media-library.md)
+* [Manage User and Roles](user-guide/manage-user-and-roles/README.md)
+  * [Manage users](user-guide/manage-user-and-roles/manage-users.md)
+  * [Manage roles](user-guide/manage-user-and-roles/manage-roles.md)
+* [Manage Settings](user-guide/manage-settings/README.md)
+  * [Email](user-guide/manage-settings/email.md)
+  * [Chatbot Fallback](user-guide/manage-settings/chatbot-fallback.md)
+  * [NLP Provider](user-guide/manage-settings/nlp-provider.md)
+  * [Web Channel](user-guide/manage-settings/web-channel.md)
+  * [Live chat widget](user-guide/manage-settings/live-chat-widget.md)
+  * [Facebook Messenger](user-guide/manage-settings/facebook-messenger.md)
+* [Manage Context Variables](user-guide/manage-context-variables.md)
+* [Chat Inbox](user-guide/chat-inbox.md)
+* [Manage Subscribers](user-guide/manage-subscribers.md)
+* [Manage Categories](user-guide/manage-categories.md)
+
+## Developer Guide
+
+* [Install Hexabot](developer-guide/install-hexabot.md)
+* [Hexabot UI Admin Panel](developer-guide/hexabot-ui-admin-panel.md)
+* [Hexabot Live Chat Widget](developer-guide/hexabot-live-chat-widget.md)
+* [Hexabot API](developer-guide/hexabot-api.md)
+* [Hexabot NLU Engine](developer-guide/hexabot-nlu-engine.md)
+* [Plugins](developer-guide/integrations/README.md)
+  * [Build Your First plugin](developer-guide/integrations/build-your-first-plugin.md)
+  * [RAG Plugin](developer-guide/integrations/openapi.md)
+
+## Key Concepts
+
+* [NLU](key-concepts/nlu.md)
+* [Intent](key-concepts/intent.md)

docs/developer-guide/hexabot-api.md

@@ -0,0 +1,137 @@
+# Hexabot API
+
+## Hexabot API
+
+[Hexabot](https://hexabot.ai/)'s API is a RESTful API built with NestJS, designed to handle requests from both the UI admin panel and various communication channels. The API powers core functionalities such as chatbot management, message flow, NLP (Natural Language Processing), and plugin integrations.
+
+### Key Features
+
+* **RESTful Architecture:** Simple, standardized API architecture following REST principles.
+* **Multi-Channel Support:** Handles requests from different communication channels (e.g., web, mobile).
+* **Modular Design:** Organized into multiple modules for better scalability and maintainability.
+* **Real-Time Communication:** Integrates WebSocket support for real-time features.
+
+### API Modules
+
+The API is divided into several key modules, each responsible for specific functionalities:
+
+#### Core Modules
+
+* **Analytics:** Tracks and serves analytics data such as the number of messages exchanged and end-user retention statistics.
+* **Attachment:** Manages file uploads and downloads, enabling attachment handling across the chatbot.
+* **Channel:** Manages different communication channels through which the chatbot operates (e.g., web, mobile apps, etc.).
+* **Chat:** The core module for handling incoming channel requests and managing the chat flow as defined by the visual editor in the UI.
+* **CMS:** Content management module for defining content types, managing content, and configuring menus for chatbot interactions.
+* **NLP:** Manages NLP entities such as intents, languages, and values used to detect and process user inputs intelligently.
+* **Plugins:** Manages extensions and plugins that integrate additional features and functionalities into the chatbot.
+* **User:** Manages user authentication, roles, and permissions, ensuring secure access to different parts of the system.
+* **Extensions:** A container for all types of extensions (channels, plugins, helpers) that can be added to expand the chatbot's functionality.
+* **Settings:** A module for management all types of settings that can be adjusted to customize the chatbot.
+
+#### Utility Modules
+
+* **WebSocket:** Adds support for Websicket with Socket.IO, enabling real-time communication for events like live chat and user interactions.
+* **Logger:** Provides logging functionality to track and debug API requests and events.
+
+### Installation
+
+```bash
+$ npm install
+```
+
+### Running the app in standalone
+
+```bash
+# development
+$ npm run start
+
+# watch mode
+$ npm run start:dev
+
+# production mode
+$ npm run start:prod
+```
+
+### Test
+
+```bash
+# unit tests
+$ npm run test
+
+# e2e tests
+$ npm run test:e2e
+
+# test coverage
+$ npm run test:cov
+```
+
+### Migrations
+
+The API includes a migrations feature to help manage database schema and data changes over time. Migrations allow you to apply or revert changes to the database in a consistent and controlled manner.
+
+#### Creating a Migration
+
+You need to navigate to the `api` folder to run the following commands. To create a new migration, use the following command:
+
+```bash
+$ npm run create-migration <migration-name>
+```
+
+Example:
+
+```bash
+$ npm run create-migration all-users-language-fr
+```
+
+This command generates a new migration file in the `./migrations` folder. The file will look like this:
+
+```typescript
+import getModels from '@/models/index';
+
+export async function up(): Promise<void> {
+  // Write migration here
+}
+
+export async function down(): Promise<void> {
+  // Write migration here
+}
+```
+
+Within the migration file, you can define the changes to be made in the up() function. For example, if you want to update the language field of all users to 'fr', your migration might look like this:
+
+```typescript
+import getModels from '@/models/index';
+
+export async function up(): Promise<void> {
+  const { UserModel } = await getModels();
+  await UserModel.updateMany({}, { language: 'fr' });
+}
+
+export async function down(): Promise<void> {}
+```
+
+#### Running Migrations Up
+
+All migrations are run automatically when the app starts.
+
+Alternatively, you can run the following command in the `root` directory to run all pending migrations:
+
+```bash
+$ make migrate-up
+```
+
+#### Running Migrations Manually
+
+If you want to run specific actions manually, you need to gain access to the `api` container and use the following command to run what you specifically want:
+
+```bash
+$ npm run migrate -h
+```
+
+### Documentation
+
+Access the Swagger API documentation by visiting the API url `/docs` once run it in development mode.
+
+It's also possible to access the API reference documentation by running `npm run doc`.
+
+For detailed information about the API routes and usage, refer to the API documentation or visit [https://docs.hexabot.ai](https://docs.hexabot.ai).

docs/developer-guide/hexabot-live-chat-widget.md

@@ -0,0 +1,82 @@
+# Hexabot Live Chat Widget
+
+The [Hexabot](https://hexabot.ai/) Live Chat Widget is a React-based embeddable widget that allows users to integrate real-time chat functionality into their websites. It connects to the Hexabot API and facilitates seamless interaction between end-users and chatbots across multiple channels.
+
+### Key Features
+
+* **Real-Time Chat:** Engage in real-time conversations with users directly through your website.
+* **Customizable:** Easily customize the widget's appearance and behavior to fit your brand and website.
+* **Multi-Channel Support:** Integrates with multiple messaging platforms through the Hexabot API.
+* **Embeddable:** Simple to embed and integrate into any web page with just a few lines of code.
+
+### Directory Structure
+
+The Hexabot Live Chat Widget is organized into the following directory structure, under `src` we have:
+
+* **src/assets:** Static assets like icons, fonts, and images used in the widget.
+* **src/components:** Reusable React components that make up the chat widget interface, such as message bubbles, input fields, and buttons.
+* **src/constants:** Hard coded values that are used like colors.
+* **src/hooks:** Custom React hooks for managing widget state and handling side effects like API calls or real-time events.
+* **src/services:** Handles external services, such as communication with the Hexabot API or other third-party integrations.
+* **src/styles:** Contains the styling for the widget, including CSS or SCSS files used to define the look and feel of the chat interface.
+* **src/providers:** Context providers for managing global state, such as user session, chat messages, and widget configurations.
+* **src/translations:** Contains transalation of a couple of strings.
+* **src/types:** Defines the typescript interfaces, types, and enums used.
+* **src/utils:** Utility functions and helpers used throughout the widget, such as formatting, validations, or data transformations.
+* **/public:** Contains static files that are publicly accessible. This includes the main HTML template where the widget is embedded for local development.
+
+### Run the Live Chat Widget
+
+#### Dev Mode
+
+To run the widget in development mode, execute the following command at the project root level:
+
+```bash
+npm run dev:widget
+```
+
+The live chat widget will be accessible at http://localhost:5173.
+
+#### Build for Production
+
+To build the widget for production, execute the following command at the widget folder level:
+
+```bash
+npm run build
+```
+
+This will generate a production-ready build in the dist folder.
+
+### Embed Chat Widget
+
+Once the widget is built, you can easily embed it into any webpage. Here's an example of how to add it to your website:
+
+```js
+<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+<link rel="stylesheet" href="./style.css">
+<script src="<<WIDGET URL>>/hexabot-widget.umd.js"></script>
+
+<div id="hb-chat-widget"></div>
+<script>
+  const el = React.createElement;
+  const domContainer = document.getElementById('hb-chat-widget');
+  ReactDOM.render(
+    el(HexabotWidget, {
+      apiUrl: 'https://api.yourdomain.com',
+      channel: 'offline',
+      token: 'token123',
+    }),
+    domContainer,
+  );
+</script>
+```
+
+Replace the values in apiUrl and token with your configuration details.
+
+### Customization
+
+You can customize the look and feel of the chat widget by modifying the widget’s scss styles or behavior. The widget allows you to:
+
+* Change colors and fonts to match your website's branding.
+* Configure user settings like language and chatbot response preferences.

docs/developer-guide/hexabot-nlu-engine.md

@@ -0,0 +1,163 @@
+# Hexabot NLU Engine
+
+The [Hexabot](https://hexabot.ai/) NLU (Natural Language Understanding) engine is a Python-based project that provides tools for building, training, and evaluating machine learning models for natural language tasks such as intent detection and language recognition. It also includes a REST API for inference, built using FastAPI.
+
+### Directory Structure
+
+* **/run.py:** The CLI tool that provides commands for training, evaluating, and managing models.
+* **/models:** Contains the different model definitions and logic for training, testing, and evaluation.
+* **/data:** Placeholder for datasets used during training and evaluation.
+* **/experiments:** Placeholder for stored models generated during training.
+* **/data\_loaders:** Classes that define the way to load datasets to be used by the different models.
+* **/main.py:** The FastAPI-based REST API used for inference, exposing endpoints for real-time predictions.
+
+### Setup
+
+**No dependencies needed besides Python 3.11.6, virtualenv, and TensorFlow.** Start developing your new model on top of this workflow by cloning this repository:
+
+```bash
+# Set up a virtualenv
+pip install virtualenv
+
+python3.11 -m venv venv
+
+source env.sh
+
+pip install -r requirements.txt
+```
+
+### Directory structure
+
+* `data`: gitignore'd, place datasets here.
+* `experiments`: gitignore'd, trained models written here.
+* `data_loaders`: write your data loaders here.
+* `models`: write your models here.
+
+### Usage
+
+**Check `models/mlp.py` and `data_loaders/mnist.py` for fully working examples.**
+
+You should run `source env.sh` on each new shell session. This activates the virtualenv and creates a nice alias for `run.py`:
+
+```bash
+$ cat env.sh
+source env/bin/activate
+alias run='python run.py'
+```
+
+Most routines involve running a command like this:
+
+```bash
+# Usage: run [method] [save_dir] [model] [data_loader] [hparams...]
+run fit myexperiment1 mlp mnist --batch_size=32 --learning_rate=0.1
+```
+
+Examples :
+
+```bash
+# Intent classification
+run fit intent-classifier-en-30072024 jisf  --intent_num_labels=88 --slot_num_labels=17 --language=en
+run predict intent-classifier-fr-30072024  --intent_num_labels=7 --slot_num_labels=2 --language=fr
+
+# Language classification
+run fit language-classifier-26082023 tflc
+run predict language-classifier-26082023
+run evaluate language-classifier-26082023
+```
+
+where the `model` and `data_loader` args are the module names (i.e., the file names without the `.py`). The command above would run the Keras model's `fit` method, but it could be any custom as long as it accepts a data loader instance as argument.
+
+**If `save_dir` already has a model**:
+
+* Only the first two arguments are required and the data loader may be changed, but respecifying the model is not allowed-- the existing model will always be used.
+* Specified hyperparameter values in the command line WILL override previously used ones (for this run only, not on disk).
+
+#### `tfbp.Model`
+
+Models pretty much follow the same rules as Keras models with very slight differences: the constructor's arguments should not be overriden (since the boilerplate code handles instantiation), and the `save` and `restore` methods don't need any arguments.
+
+```python
+import tensorflow as tf
+import boilerplate as tfbp
+
+@tfbp.default_export
+class MyModel(tfbp.Model):
+    default_hparams = {
+        "batch_size": 32,
+        "hidden_size": 512,
+        "learning_rate": 0.01,
+    }
+
+    # Don't mess with the args and keyword args, `run.py` handles that.
+    def __init__(self, *a, **kw):
+        super().__init__(*a, **kw)
+
+        self.dense1 = tf.keras.layers.Dense(self.hparams.hidden_size)
+        ...
+
+    def call(self, x):
+        z = self.dense1(x)
+        ...
+```
+
+You can also write your own training loops à la pytorch by overriding the `fit` method or writing a custom method that you can invoke via `run.py` simply by adding the `@tfbp.runnable` decorator. Examples of both are available in `models/mlp.py`.
+
+#### `tfbp.DataLoader`
+
+Since model methods invoked by `run.py` receive a data loader instance, you may name your data loader methods whatever you wish and call them in your model code. A good practice is to make the data loader handle anything that is specific to a particular dataset, which allows the model to be as general as possible.
+
+```python
+import tensorflow as tf
+import boilerplate as tfbp
+
+@tfbp.default_export
+class MyDataLoader(tfbp.DataLoader):
+    default_hparams = {
+        "batch_size": 32,
+    }
+
+    def __call__(self):
+        if self.method == "fit":
+            train_data = tf.data.TextLineDataset("data/train.txt").shuffle(10000)
+            valid_data = tf.data.TextLineDataset("data/valid.txt").shuffle(10000)
+            return self.prep_dataset(train_data), self.prep_dataset(valid_data)
+
+        elif self.method == "eval":
+            test_data = tf.data.TextLineDataset("data/test.txt")
+            return self.prep_dataset(test_data)
+
+    def prep_dataset(self, ds):
+        return ds.batch(self.hparams.batch_size).prefetch(1)
+```
+
+#### API
+
+API is built using FastAPI : https://fastapi.tiangolo.com/
+
+Run the dev server in standalone with:
+
+```sh
+ENVIRONMENT=dev uvicorn main:app --host 0.0.0.0 --port 5000 --reload
+```
+
+Run the project with Docker :
+
+```sh
+docker compose -f "docker-compose.yml" up -d --build
+```
+
+### Pushing models to HuggingFace
+
+Please refer to official HF documentation on how to host models : https://huggingface.co/docs/hub/en/repositories-getting-started
+
+What is important to note is that big files should be tracked with git-lfs, which you can initialize with:
+
+```
+git lfs install
+```
+
+and if your files are larger than 5GB you’ll also need to run:
+
+```
+huggingface-cli lfs-enable-largefiles .
+```

docs/developer-guide/hexabot-ui-admin-panel.md

@@ -0,0 +1,48 @@
+# Hexabot UI Admin Panel
+
+The [Hexabot](https://hexabot.ai/) UI Admin Panel is a React/Next.js application that serves as the admin interface for managing chatbot configurations, workflows, and interactions. The admin panel allows users to easily create and manage chat flows, monitor analytics, manage content, handle NLP datasets, and configure system settings.
+
+### Key Features
+
+* **Visual Editor:** An intuitive drag-and-drop interface for managing chat flows, including text messages, quick replies, carousels, and more.
+* **Multi-Channel Management:** Configure and manage multiple communication channels (e.g., web, mobile, social media) from a single interface.
+* **Analytics Dashboard:** Track user interactions, messages sent, and retention rates through detailed analytics.
+* **NLP Management:** Manage datasets for training machine learning models for intent detection and language recognition.
+* **Content Management (CMS):** Seamlessly integrate and manage content such as product catalogs, lists of stores, or any dynamic content needed by the chatbot.
+* **User, Roles, and Permissions:** Administer user access controls, roles, and permissions to ensure secure and appropriate access to different parts of the system.
+
+### Directory Structure
+
+* **app-components/:** Reusable components that are used across the admin panel.
+* **components/:** Components organized by the page where they are being used.
+* **hooks/:** Hooks defined.
+* **pages/:** The core of the Next.js application, defining different routes for the admin panel.
+* **services/:** API service calls to interact with the Hexabot API.
+* **types/:** Defines the typescript interfaces, types, and enums used.
+* **styles/:** Global and component-specific styles for the application.
+* **utils/:** Utility functions and helpers used throughout the frontend.
+
+### Run
+
+The Hexabot project is structured as a monorepo using npm workspaces to manage multiple packages. The packages in the monorepo include:
+
+* **frontend:** The admin interface for managing the chatbot system.
+* **widget:** An embeddable live chat widget that can be integrated into any website. Note: The API is not part of the monorepo and is managed separately.
+
+To run the different UI components in development mode, execute the following commands at the project root level:
+
+* **Run the Admin Interface:**
+
+```
+npm run dev:frontend
+```
+
+The admin interface will be accessible at [http://localhost:8081](http://localhost:8081).
+
+* **Run the Live Chat Widget:**
+
+```
+npm run dev:widget
+```
+
+The live chat widget will be accessible at [http://localhost:5173](http://localhost:5173).

docs/developer-guide/install-hexabot.md

@@ -0,0 +1,65 @@
+# Install Hexabot
+
+## Prerequisites
+
+To ensure Hexabot runs smoothly, you'll need the following:
+
+* **Docker:** We recommend using Docker to start the app since multiple services are required (MongoDB, Redis, Prometheus, etc.). All the necessary Docker Compose files are located in the docker folder.
+* **Node.js:** For development purposes, ensure you have Node.js >= v18.17.0 installed. We recommend using nvm (Node Version Manager) to easily manage and update your Node.js versions.
+
+### # Installation
+
+1. **Clone the Repository:**
+
+```
+$ git clone https://github.com/hexastack/hexabot.git
+```
+
+2. **Environment Setup:** \
+   To configure the environment variables, use the Makefile at the root folder for initialization:
+
+```
+$ make init
+```
+
+This will copy the `.env.example` file to `.env` in the `./docker` directory if the file does not already exist.
+
+3. **Running the Application:** Once your environment is set up, you can start the app. Use either of the following commands:
+
+```
+$ make start
+```
+
+or for development mode:
+
+```
+$ make dev
+```
+
+**Note:** The first time you run the app, Docker will take some time to download all the required images.
+
+### Usage
+
+UI Admin Panel is accessible via [http://localhost:8080](http://localhost:8080), the default credentials are :
+
+* **Username:** [admin@admin.admin](mailto:admin@admin.admin)
+* **Password:** adminadmin
+
+Live Chat Widget is accessible via [http://localhost:5173](http://localhost:5173)
+
+
+
+### Useful Commands
+
+* `make init` : Copies the .env.example file to .env in the ./docker directory if .env does not exist. This is usually used for initial setup.
+* `make dev` : Starts all configured Docker services in development mode. It first checks the .env file for completeness against .env.example.
+* `make start` : Similar to dev, but explicitly builds the Docker images before starting the services. This target also checks the .env file for required variables.
+* `make stop` : Stops all running Docker services defined in the compose files.
+* `make destroy` : Stops all services and removes all volumes associated with the Docker compose setup, ensuring a clean state.
+* `make check-env` : Checks if the ./docker/.env file exists and contains all the necessary environment variables as defined in ./docker/.env.example. If the file does not exist, it is created from the example. It also lists missing variables if any.
+
+Example on how to start the stack by adding the Nginx service :
+
+```
+make start NGINX=1
+```

docs/developer-guide/integrations/README.md

@@ -0,0 +1,9 @@
+# Plugins
+
+Hexabot plugins allow you to connect your Hexabot instance to some of your favorite platforms and services. You can install integrations into your Hexabot from the _Integrations Marketplace_ menu in the top left.
+
+<figure><img src="https://gitbookio.github.io/onboarding-template-images/integrations-hero.png" alt=""><figcaption></figcaption></figure>
+
+### Types of integrations
+
+<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden></th></tr></thead><tbody><tr><td><strong>Analytics</strong></td><td>Track analytics from your docs</td><td><a href="https://www.gitbook.com/integrations#analytics">https://www.gitbook.com/integrations#analytics</a></td><td><a href="../../.gitbook/assets/2.png">2.png</a></td><td></td></tr><tr><td><strong>Support</strong></td><td>Add support widgets to your docs</td><td><a href="https://www.gitbook.com/integrations#support">https://www.gitbook.com/integrations#support</a></td><td><a href="../../.gitbook/assets/3.png">3.png</a></td><td></td></tr><tr><td><strong>Interactive</strong></td><td>Add extra functionality to your docs</td><td><a href="https://www.gitbook.com/integrations#interactive">https://www.gitbook.com/integrations#interactive</a></td><td><a href="../../.gitbook/assets/4.png">4.png</a></td><td></td></tr><tr><td><strong>Visitor Authentication</strong></td><td>Protect your docs and require sign-in</td><td><a href="https://www.gitbook.com/integrations#visitor-authentication">https://www.gitbook.com/integrations#visitor-authentication</a></td><td><a href="../../.gitbook/assets/1.png">1.png</a></td><td></td></tr></tbody></table>

docs/developer-guide/integrations/build-your-first-plugin.md

@@ -0,0 +1,6 @@
+# Build Your First plugin
+
+{% hint style="info" %}
+This section is currently under development (WIP)
+{% endhint %}
+

docs/developer-guide/integrations/openapi.md

@@ -0,0 +1,6 @@
+# RAG Plugin
+
+{% hint style="info" %}
+This section is currently under development (WIP)
+{% endhint %}
+

docs/introduction/features.md

@@ -0,0 +1,112 @@
+---
+icon: list-ul
+---
+
+# Features
+
+Hexabot comes equipped with a comprehensive suite of features to empower your chatbot development:
+
+<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td>Visual Editor</td><td></td><td><a href="features.md#visual-editor">#visual-editor</a></td><td><a href="../.gitbook/assets/1.png">1.png</a></td></tr><tr><td>AI-Powered Interactions</td><td></td><td><a href="features.md#ai-powered-interactions">#ai-powered-interactions</a></td><td><a href="../.gitbook/assets/2.png">2.png</a></td></tr><tr><td>Multichannel Communication</td><td></td><td><a href="features.md#multichannel-communication">#multichannel-communication</a></td><td><a href="../.gitbook/assets/3.png">3.png</a></td></tr><tr><td>User Segmentation &#x26; Targeting</td><td></td><td><a href="features.md#user-segmentation-and-targeting">#user-segmentation-and-targeting</a></td><td><a href="../.gitbook/assets/4.png">4.png</a></td></tr><tr><td>Content Management System (CMS) Integration</td><td></td><td><a href="features.md#content-management-system-cms-integration">#content-management-system-cms-integration</a></td><td><a href="../.gitbook/assets/WorkWithPassionBg.7161134c.png">WorkWithPassionBg.7161134c.png</a></td></tr><tr><td>Multi-language Support</td><td></td><td><a href="features.md#multilingual-conversations-support-and-translation-management">#multilingual-conversations-support-and-translation-management</a></td><td><a href="../.gitbook/assets/1.png">1.png</a></td></tr><tr><td>Live Chat &#x26; Agent Takeover</td><td></td><td><a href="features.md#live-chat-and-agent-takeover">#live-chat-and-agent-takeover</a></td><td><a href="../.gitbook/assets/1.png">1.png</a></td></tr><tr><td>Extensive Customization using Plugins</td><td></td><td><a href="features.md#extensive-customization-using-plugins">#extensive-customization-using-plugins</a></td><td><a href="../.gitbook/assets/2.png">2.png</a></td></tr><tr><td>Analytics and Reporting</td><td></td><td><a href="features.md#analytics-and-reporting-dashboard">#analytics-and-reporting-dashboard</a></td><td><a href="../.gitbook/assets/3.png">3.png</a></td></tr></tbody></table>
+
+## **Visual Editor**
+
+<figure><img src="../.gitbook/assets/image (13).png" alt=""><figcaption></figcaption></figure>
+
+Construct complex conversation flows effortlessly with our drag-and-drop interface. Choose from a library of pre-built blocks and customize them to meet your specific needs, all without writing a single line of code.
+
+* **Drag-and-Drop Functionality:** Build conversation flows with ease by dragging and dropping different block types onto the visual canvas.&#x20;
+* **Block Palette:** Choose from a variety of pre-built blocks representing diverse chatbot actions, such as sending text messages, displaying buttons or quick replies, requesting user input, and more.
+* **Logical Connections:** Connect blocks together to define the sequence and logic of the conversation. Create branching paths, conditional responses, and loops to handle different user interactions.
+* **Block Customization:** Each block offers detailed configuration options to tailor its behavior.
+* **Entrypoint:** Choose which blocks should be the starting point for a subject specific conversation.
+* **Categorization:** You can choose to organize your conversation flows in categories that can be subject or domain specific.
+
+{% hint style="info" %}
+**What is a conversation ?** When the user interacts with the chatbot, he can have one or many conversations. Each conversation is subject specific and is defined by a set of blocks that are linked together.
+{% endhint %}
+
+## **AI-Powered Interactions**
+
+### **Natural Language Understanding Engine**
+
+Hexabot leverages cutting-edge NLP technology, to understand user intent, extract key information from messages, and tailor personalized responses. This allows for more natural and engaging conversations.
+
+{% hint style="info" %}
+**What is NLP ?** In simple terms, NLP is a branch of AI that focuses on enabling computers to understand, interpret, and respond to human language in a way that is both meaningful and useful. You can read more about NLP in the [Broken link](broken-reference "mention") section.
+{% endhint %}
+
+* **Intent Recognition:** Hexabot's NLP engine analyzes user messages to identify the underlying intent. This understanding drives the chatbot's ability to provide relevant responses and trigger specific actions.
+* **Entity Extraction:** Identify and extract key information from user input, such as dates, locations, names, or product preferences. This data can be used to personalize the conversation and improve the accuracy of the chatbot's responses.
+* **Language Detection:** Hexabot can be configured to understand and respond in multiple languages, expanding its reach and usability for diverse audiences.
+* **NLP Training and Management:** The platform provides tools to train and refine the NLP model. Users can add training examples, define intents and entities, and improve the chatbot's comprehension over time.
+
+### Generative AI Capabilities
+
+By default, Hexabot comes with a default installed plugin that is called **"LLM RAG"** that integrates with _OpenAI ChatGPT_. You can choose of course to build your own plugin that integrates with a custom fine-tuned LLM or any other LLM. This plugin leverages cutting-edge Large Language Models (LLMs) and Generative AI techniques to enhance your chatbot's contextual understanding and responsiveness. Provide your chatbot with relevant context, and the **"LLM RAG"** plugin will generate more informative, and human-like responses, resulting in more engaging and satisfying conversations for your audience.
+
+## **Content Management System (CMS)**&#x20;
+
+Hexabot features a built-in Content Management System (CMS) that serves as a centralized knowledge base for your chatbot. This empowers you to easily update and expand your chatbot's knowledge without requiring changes to the conversation flow itself.
+
+**Centralized Content Hub:**\
+The Hexabot CMS provides a central location within the admin panel to manage all the content that your chatbot uses to interact with users. Organize content by type, define custom fields to structure information, and easily edit or update content as needed.
+
+**Multilingual Support and Translation Management:**\
+Create and manage translations for all of your chatbot's content directly within the CMS. This enables you to build chatbots that cater to a diverse, multilingual audience, delivering a more personalized and engaging experience for users around the globe.
+
+## Multilingual Conversations **Support and Translation Management**
+
+<figure><img src="../.gitbook/assets/image (10).png" alt=""><figcaption></figcaption></figure>
+
+Hexabot provides comprehensive tools for managing multilingual chatbots. Our translation management system allows you to easily translate your chatbot's messages, prompts, and responses. Combined with advanced NLP capabilities for language detection and intent understanding, Hexabot empowers to build chatbots that seamlessly communicate with users in their preferred language.
+
+## Multi-channel Communication
+
+Deploy your Hexabot chatbot across multiple platforms, including on your website, Facebook Messenger, and other external services with ease. We're also working on adding even more direct integrations in the near future, to ensure you can reach even more users.
+
+* **Facebook Messenger:** Connect your chatbot to Facebook Messenger to engage with users on one of the most popular messaging platforms.
+* **Website Integration:** Embed a chatbot widget on your website to provide instant support and guidance to visitors.
+* **Extensible Architecture:** Hexabot's open-source nature and well-defined API allow for integration with other communication channels and third-party services.
+
+## **User Segmentation & Targeting**&#x20;
+
+Categorize your audience with labels and tailor conversation paths based on user attributes or behavior. Deliver personalized experiences to different user segments for increased engagement.
+
+* **Subscriber Profiles:** Access detailed information about your chatbot subscribers, including their conversation history, labels, and other relevant data.
+* **Labels and Segmentation:** Organize subscribers into groups using labels. This allows for personalized conversation paths, targeted messaging, and tailored user experiences.
+
+## **Live Chat & Agent Takeover**&#x20;
+
+<figure><img src="../.gitbook/assets/image (11).png" alt=""><figcaption></figcaption></figure>
+
+When your chatbot encounters a complex or sensitive issue, Hexabot's Agent Takeover feature allows for a smooth handoff to a human support agent. You can monitor ongoing conversations in the inbox and step in directly when needed, ensuring a seamless and personalized experience for your users.
+
+* **Unified Inbox:** Monitor all ongoing and past conversations in a centralized location. Filter and search through conversations to quickly find specific interactions.
+* **Agent Takeover:** Enable human agents to seamlessly take over a chatbot conversation when needed. This feature ensures a smooth transition to human support for complex or sensitive queries.
+* **Live Chat Widget:** Integrate a live chat widget on your website to allow users to interact with human agents directly, providing an alternative channel for support.
+
+## **Extensive Customization using Plugins**
+
+<div align="center" data-full-width="false">
+
+<figure><img src="../.gitbook/assets/image (7).png" alt=""><figcaption></figcaption></figure>
+
+</div>
+
+Hexabot extends beyond its core features. Developers can leverage our open plugin system to create custom integrations and add new custom blocks to the visual editor's palette. Whether you need to connect with a third-party service, access external data sources, or build entirely unique features, Hexabot's plugin system provides the flexibility to tailor the platform to your specific needs.
+
+Join a growing community of developers and contribute to the Hexabot ecosystem by building and sharing your plugins. We encourages collaboration and innovation, enabling developers to enhance the platform's capabilities and create a rich library of integrations for all Hexabot users to benefit from.
+
+{% hint style="info" %}
+Check the [Broken link](broken-reference "mention") to learn more about Hexabot's API and how to develop plugins.
+{% endhint %}
+
+## **Analytics and Reporting Dashboard**
+
+<figure><img src="../.gitbook/assets/image (9).png" alt=""><figcaption></figcaption></figure>
+
+Gain valuable insights into user interactions and chatbot performance through a detailed dashboard. Track key metrics, monitor conversation flows, and identify areas for improvement to optimize your chatbot strategy.
+
+* **Key Performance Indicators (KPIs):** Track important metrics like the number of conversations, messages sent and received, and more.
+* **Conversation Flow Analysis:** Visualize and analyze the effectiveness of your chatbot's conversation flows. Identify bottlenecks, drop-off points, and areas for improvement.
+* **User Behavior Insights:** Gain a deeper understanding of how users interact with your chatbot. Analyze common queries, identify user preferences, and inform chatbot optimization strategies

docs/introduction/overview.md

@@ -0,0 +1,44 @@
+---
+icon: globe
+---
+
+# Overview
+
+Hexabot aims to simplify the complexities of chatbot creation while offering a robust set of features to create powerful conversational agents. It achieves this through a combination of intuitive design, intelligent interactions, and customization options :
+
+## **Intuitive Design and Visual Workflow**
+
+The platform is built on the principle of user-friendliness, recognizing that not all chatbot creators are programmers. Hexabot's visual editor empowers users to construct conversation flows using a drag-and-drop interface and pre-built blocks representing different chatbot actions. This no-code approach eliminates the need for complex coding, allowing users to focus on the logic and design of their chatbot interactions.
+
+## **AI-Powered Interactions: NLP, NLU, and RAG**
+
+Hexabot integrates advanced artificial intelligence (AI) capabilities to elevate chatbot interactions beyond simple rule-based responses.
+
+* **Natural Language Processing (NLP):** Hexabot employs NLP to analyze user messages, understand the structure and meaning of language, and extract relevant information, such as entities and keywords.
+* **Natural Language Understanding (NLU):** NLU takes NLP a step further by focusing on the comprehension of user intent. It allows the chatbot to decipher the user's underlying goal, even if expressed in different ways, and trigger the appropriate response or action.
+* **Retrieval Augmented Generation (RAG):** Hexabot leverages RAG to access and utilize external knowledge sources, expanding the chatbot's ability to provide relevant and informative responses. RAG allows the chatbot to dynamically retrieve information from documents, databases, or APIs, augmenting its knowledge base and improving its ability to handle complex or open-ended questions.
+
+These AI capabilities work together to create chatbots that can engage in more natural, context-aware, and dynamic conversations, leading to improved user experiences and increased efficiency.
+
+## **Customization and Flexibility**
+
+Recognizing the unique requirements of different businesses and use cases, Hexabot offers extensive customization options. Users can tailor the appearance of their chatbot widget, including colors, and branding elements, to ensure a seamless integration with their existing websites or applications. Moreover, Hexabot's open-source nature and modular design make it highly extensible, allowing developers to customize its functionality further and integrate it with third-party services or APIs as needed.
+
+## **Analytics Dashboard**
+
+Hexabot provides valuable insights into chatbot performance through its analytics dashboard. Users can track key metrics, such as conversation volume, and user engagement, to measure the effectiveness of their chatbots. These data-driven insights inform iterative improvements to conversation flows, NLP models, and overall chatbot strategies, enabling users to continuously optimize their chatbot's performance and achieve their desired objectives.
+
+## Key Features
+
+* **Visual Editor (No-Code Interface)**
+* **Natural Language Processing (NLP)**
+* **Natural Language Understanding (NLU)**
+* **Retrieval Augmented Generation (RAG)**
+* **Content Management System (CMS)**
+* **Subscriber Management**
+* **Inbox and Live Chat**
+* **Analytics Dashboard**
+* **Multi-Channel Integration**
+* **Customizable Appearance & Branding**
+* **Fallback Mechanisms**
+* **User & Role Management**

docs/key-concepts/intent.md

@@ -0,0 +1,6 @@
+# Intent
+
+{% hint style="info" %}
+This section is currently under development (WIP)
+{% endhint %}
+

docs/key-concepts/nlu.md

@@ -0,0 +1,6 @@
+# NLU
+
+{% hint style="info" %}
+This section is currently under development (WIP)
+{% endhint %}
+

docs/quickstart/README.md

@@ -0,0 +1,9 @@
+---
+icon: flag-checkered
+---
+
+# Quick start
+
+
+
+<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><strong>Install Hexabot</strong></td><td></td><td></td><td><a href="../developer-guide/install-hexabot.md">install-hexabot.md</a></td><td><a href="../.gitbook/assets/3.png">3.png</a></td></tr><tr><td><strong>Create your First Flow</strong></td><td></td><td></td><td><a href="create-your-first-flow.md">create-your-first-flow.md</a></td><td><a href="../.gitbook/assets/4.png">4.png</a></td></tr></tbody></table>

docs/quickstart/create-your-first-flow.md

@@ -0,0 +1,11 @@
+---
+icon: arrow-progress
+---
+
+# Create your first flow
+
+This interactive tutorial will guide you through the process of building your first chatbot flow using our intuitive visual editor. No coding experience is required – just follow the steps below, and you'll have your chatbot up and running in no time.
+
+{% embed url="https://app.arcade.software/share/b5LQtRgAfWMbNDgxXyDq" fullWidth="true" %}
+
+This is just a basic example to get you started. Hexabot offers a wide range of features and blocks to create more complex and engaging chatbot flows. Explore the different block types, experiment with NLP features, and integrate with your content sources to build a chatbot that truly meets your needs.

docs/quickstart/installation.md

@@ -0,0 +1,103 @@
+---
+icon: laptop-arrow-down
+---
+
+# Installation
+
+## Prerequisites
+
+To ensure Hexabot runs smoothly, you'll need the following:
+
+* **Docker:** We recommend using Docker to start the app since multiple services are required (MongoDB, Nginx, etc.). All the necessary Docker Compose files are located in the docker folder.
+
+{% hint style="info" %}
+Check Docker official guide on how to install Docker on your system [https://docs.docker.com/engine/install/](https://docs.docker.com/engine/install/) 
+{% endhint %}
+
+* **Node.js:** For development purposes, ensure you have Node.js >= v18.17.0 installed. We recommend using nvm (Node Version Manager) to easily manage and update your Node.js versions.
+
+{% hint style="info" %}
+To **install** or **update** nvm, you should run the [install script](https://github.com/nvm-sh/nvm/blob/v0.40.1/install.sh). To do that, you may either download and run the script manually, or use the following cURL or Wget command:
+
+_curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash_ 
+
+Check NVM official documentation for more details :[https://github.com/nvm-sh/nvm?tab=readme-ov-file#node-version-manager---](https://github.com/nvm-sh/nvm?tab=readme-ov-file#node-version-manager---) 
+{% endhint %}
+
+### # Installation
+
+1. **Clone the Repository:**
+
+```
+$ git clone https://github.com/hexastack/hexabot.git
+```
+
+2. **Environment Setup:** \
+   To configure the environment variables, use the Makefile at the root folder for initialization:
+
+```
+$ make init
+```
+
+This will copy the `.env.example` file to `.env` in the `./docker` directory if the file does not already exist.
+
+3. **Running the Application:** Once your environment is set up, you can start the app. Use either of the following commands:
+
+{% hint style="info" %}
+**Note:** The first time you run the app, Docker will take some time to download all the required images
+{% endhint %}
+
+<details>
+
+<summary>If you are installing Hexabot on macOS, follow the steps below before you run the application</summary>
+
+The `make` command is not installed by default on macOS, but there are a few ways to get it:
+
+### Install Command Line Tools for Xcode
+
+The easiest way to get `make` on macOS is to install the Command Line Tools for Xcode:
+
+1. Open the Terminal app
+2. Run the command: `xcode-select --install`
+3. Follow the prompts to install the Command Line Tools
+
+This will install `make` and other developer tools without needing to install the full Xcode IDE
+
+</details>
+
+```
+$ make start
+```
+
+Or for development mode:
+
+```
+$ make dev
+```
+
+### Usage
+
+UI Admin Panel is accessible via [http://localhost:8080](http://localhost:8080), the default credentials are&#x20;
+
+{% code title="Username" %}
+```
+admin@admin.admin
+```
+{% endcode %}
+
+{% code title="Password" %}
+```
+adminadmin
+```
+{% endcode %}
+
+Live Chat Widget demo is accessible via [http://localhost:5173](http://localhost:5173)
+
+### Useful Commands
+
+* `make init` : Copies the .env.example file to .env in the ./docker directory if .env does not exist. This is usually used for initial setup.
+* `make dev` : Starts all configured Docker services in development mode. It first checks the .env file for completeness against .env.example.
+* `make start` : Similar to dev, but explicitly builds the Docker images before starting the services. This target also checks the .env file for required variables.
+* `make stop` : Stops all running Docker services defined in the compose files.
+* `make destroy` : Stops all services and removes all volumes associated with the Docker compose setup, ensuring a clean state.
+* `make check-env` : Checks if the ./docker/.env file exists and contains all the necessary environment variables as defined in ./docker/.env.example. If the file does not exist, it is created from the example. It also lists missing variables if any.

docs/user-guide/chat-inbox.md

@@ -0,0 +1,6 @@
+# Chat Inbox
+
+{% hint style="info" %}
+This section is currently under development (WIP)
+{% endhint %}
+

docs/user-guide/configure-content/README.md

@@ -0,0 +1,11 @@
+# Configure Content
+
+Hexabot's built-in Content Management System (CMS) is where you store and manage all the information your chatbot uses to interact with users. Think of it as  a centralized knowledge base that keeps all your chatbot's responses accurate, consistent, and up-to-date.
+
+**Managing Content in the Hexabot CMS:**
+
+1. **Create Content Types:** Organize your information by creating content types relevant to your chatbot (e.g., "Products," "Services," "FAQs").
+2. **Define Fields (Metadata):** For each content type, define the data fields you need. For a "Product" type, you might have "Name," "Description," "Price," "Image URL," etc.
+3. **Populate Content Entries:** Create individual entries within each content type, filling in the data fields. You might have a separate entry for each product in your catalog, each service you offer, or each question in your FAQ section.
+
+<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdXCd2l0khISR8IxOtHZTm0UKym_xVYm6gtAujsTGnPZFfn9iYXod1c9YJBPC-3cK1LWPxFIF4NdVDrddB5cY6KBDAxiA4zyhFCEKuzczCx8Yg5wMDqoy6WNdd3yS8pXBAFmn3T5lMcxAc09Lnq2IG3I0go?key=c4KGOy1R8duHlV2m8G2iNQ" alt=""><figcaption></figcaption></figure>

docs/user-guide/configure-content/content-types.md

@@ -0,0 +1,51 @@
+---
+icon: folder-grid
+---
+
+# Content Types
+
+The Hexabot CMS allows you to organize your chatbot's content into different types, making it easy to structure and manage the information your chatbot uses to interact with users. This guide walks you through creating, customizing, and managing your content types effectively:
+
+**1. Access the Hexabot CMS:**
+
+* Go to the "CMS" or "Content Management" section, usually found in the main menu or chatbot settings.
+
+**2. Create a New Content Type:**
+
+* **Click "Add Content Type" (or a similar button/option).** This will typically open a form or dialog box where you can define the details of your new content type.
+* **Enter a Name:** Provide a descriptive name for your content type that accurately represents the kind of information it will hold. For example, "Products," "Services," "Blog Posts," "FAQs," etc.
+* **Save the Content Type:** Click the "Submit" button to save the new content type.
+
+{% hint style="info" %}
+**Important** Each new content type you create in Hexabot CMS comes with two default fields: "Title" and "Status." These fields provide basic information for your content entries.
+{% endhint %}
+
+**3. Add Fields to a Content Type:**
+
+* **Locate the Content Type:** Find the content type you just created in the list of available content types within the CMS.
+* **Access Field Management:** Look for the "Manage Content" option
+* **Add New Field:** In addition to the default "Title" and "Status" fields, click +ADD button to create a new field and configure the following: Click a button to create a new field and configure the following:
+  * **Field Label:** This is the display name for the field, the name that will be visible to users. Choose a clear and descriptive label, e.g., "Product Name," "Description," "Price."
+  * **Field Name:** This is a unique identifier for the field. It is **auto-generated** from the Field Label and does not need to be manually entered.
+  * **Field Type:** Select the appropriate data type for the field from the following options:
+    * **Text :** For short text.
+    * **Text Input:** For short single-line text input.
+    * **URL:** For website address inputs.
+    * **Text Area:** For longer, multi-line text input.
+    * **Checkbox:** For true/false or yes/no selections.
+    * **File:** For uploading files (documents, images, etc.).
+    * **HTML:** For adding content with HTML formatting.
+  * **Save Field Changes:** After configuring the field, click the "Submit" button to confirm your changes.
+
+**4. Manage Existing Fields:**
+
+* **Edit a Field:** Locate the field within the content type and look for options to "Edit," "Modify," or "Rename" the field.
+* **Delete a Field:** If a field is no longer needed, you can usually find an option to "Delete" or "Remove" it. Be careful, as deleting a field will also remove all data associated with that field in your content entries.
+
+{% hint style="info" %}
+**Tips**
+
+* **Plan Your Content Structure:** Think carefully about the types of information your chatbot needs and design your content types accordingly.
+* **Keep it Simple:** Start with the essential fields and add more as needed. It's easier to add fields later than to remove them if they prove to be unnecessary.
+* **Use Descriptive Names:** Make field names easy to understand for you and anyone else who might be working with your chatbot's content.
+{% endhint %}

docs/user-guide/configure-content/manage-persistent-menu.md

@@ -0,0 +1,37 @@
+---
+icon: bars-sort
+---
+
+# Manage Persistent Menu
+
+The Persistent Menu allows you to provide users with a consistent and accessible menu of options directly within their chat interface. It's like a built-in navigation system for your chatbot, ensuring that users always have quick access to key features and information, regardless of where they are in the conversation flow.
+
+## **Step-by-Step Guide to Creating and Managing Persistent Menus:**
+
+1. **Access the Persistent Menu Settings:**
+   * Log in to your Hexabot account.
+   * Find the "Persistent Menu" section. This is located in under the Manage Content Menu.
+2. **Design Your Menu Structure:**
+   * **Main Menu Items:** Decide on the key options you want to present to users (e.g., "Get Started," "Products," "Support," "About Us").
+   * **Submenus (Optional):** Consider adding submenus under your main menu items for a more hierarchical navigation.
+3. **Add Menu Items:**
+   * Use the Hexabot interface to add each menu item. You'll typically be able to:
+     * **Enter the Title:** The text displayed for the menu item (e.g., "View Products").
+     * **Choose the Action Type:**
+       * **Postback:** Sends a payload back to the chatbot, allowing you to trigger a specific conversation flow or action.
+       * **Web URL:** Opens an external website in a new browser tab.
+       * **Nested**
+     * **Set the Payload or URL (Based on Action Type):**
+       * **For Postbacks:** Enter a unique payload for each menu item, which you can use to trigger specific responses or actions in your chatbot's conversation flows.
+       * **For Web URLs:** Enter the complete web address.
+4. **Save and Publish Your Menu:**
+   * Click the "Submit" button to make your Persistent Menu active for users interacting with your chatbot.
+
+{% hint style="info" %}
+**Additional Tips:**
+
+* **Keep it Concise:** Limit your menu to the most important options to avoid overwhelming users.
+* **Use Clear Labels:** Menu item labels should be descriptive and easy to understand.
+* **Test Thoroughly:** Test your Persistent Menu on different devices and screen sizes to ensure it's working as expected and displays correctly.
+{% endhint %}
+

docs/user-guide/configure-content/media-library.md

@@ -0,0 +1,28 @@
+---
+icon: photo-film-music
+---
+
+# Media Library
+
+Hexabot's Media Library serves as a centralized repository for all the media files (images, documents, audio, video, etc.) that you use within your chatbot. It helps you organize, store, and easily access these files when building your chatbot's conversation flows and content.
+
+**1. Accessing the Media Library:**
+
+* Log in to your Hexabot account.
+* Find the "Media Library" within the CMS section.
+
+**2. Managing Existing Files:**
+
+* **Previewing Files:** You can preview images and some other file types directly within the Media Library.
+* **Deleting Files:** Use the "Delete" or "Remove" option to remove unwanted files from the Media Library. Be cautious when deleting files, as this action is typically permanent.
+
+**5. Using Media in Chatbot Content:**
+
+* **Referencing Files:** Once a file is uploaded to the Media Library, you'll get an identifier that you can use to reference the file in your chatbot flow. The [Attachment block](../visual-editor/regular-blocks/using-attachment-block.md), allow you to select files directly from your Media Library.
+
+{% hint style="info" %}
+**Tips for Media Management:**
+
+* **Optimize File Sizes:** Compress your images and other media files before uploading them to reduce load times and improve chatbot performance.
+* **Regular Cleanup:** Periodically review your Media Library and delete any unused or outdated files to keep it organized.
+{% endhint %}

docs/user-guide/configure-content/translations.md

@@ -0,0 +1,33 @@
+---
+icon: language
+---
+
+# Translations
+
+Expanding your audience and reaching global users is essential for chatbot success. Hexabot's built-in translation feature simplifies the process of creating multilingual chatbots, allowing you to offer personalized experiences in multiple languages.
+
+<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcvJadur1pV2UKti8eC2OEY_ZR7UhcDwvSL94OxTI6S6EhvqV_t1QEkCcap-f6Pc4P8TCSi8qMX0tWoiVykGbeXQL3TKaR7E0g__YjHTByVOyDJwKvaxyuSi4r1bMc7Wm7MzTDY9zXxaFagrkLNFHoanhrP?key=c4KGOy1R8duHlV2m8G2iNQ" alt=""><figcaption></figcaption></figure>
+
+**Step-by-Step Guide to Translating Content in Hexabot:**
+
+1. **Access the Translations Section:**
+   * Log in to your Hexabot account.
+   * Go to your chatbot project's settings or the "CMS" (Content Management System) section.
+   * Locate the "Translations" page.
+2. **Choose the Content to Translate:**
+   * Select the specific content entry you want to translate.
+3. **Add Target Languages:**
+   * Choose the language(s) you want to translate your content into. Hexabot have an  "Add Language" button or dropdown menu to select from the available languages.
+4. **Enter Translations:**
+   * You'll see the original text in the source language, alongside fields for entering the translated text for each target language.
+   * Enter the accurate translations for each field in your chosen languages.
+5. **Save Your Translations:**
+   * Click "Submit" to save your translations.
+   * Your translated content will now be used when a user interacts with your chatbot in their selected language.
+
+{% hint style="info" %}
+**Tips**
+
+* **Review and Test:** Carefully review your translations and test your chatbot in each target language to ensure the language switching works as expected and that the translations flow naturally within the conversation.
+* **Regular Updates:** If your chatbot's content changes frequently, keep your translations updated as well to provide a consistent experience for your multilingual users.
+{% endhint %}

docs/user-guide/manage-categories.md

@@ -0,0 +1,6 @@
+# Manage Categories
+
+{% hint style="info" %}
+This section is currently under development (WIP)
+{% endhint %}
+

docs/user-guide/manage-context-variables.md

@@ -0,0 +1,3 @@
+# Manage Context Variables
+
+<figure><img src="../.gitbook/assets/image.png" alt=""><figcaption></figcaption></figure>

docs/user-guide/manage-settings/README.md

@@ -0,0 +1,6 @@
+# Manage Settings
+
+{% hint style="info" %}
+This section is currently under development (WIP)
+{% endhint %}
+

docs/user-guide/manage-settings/chatbot-fallback.md

@@ -0,0 +1,6 @@
+# Chatbot Fallback
+
+{% hint style="info" %}
+This section is currently under development (WIP)
+{% endhint %}
+

docs/user-guide/manage-settings/email.md

@@ -0,0 +1,6 @@
+# Email
+
+{% hint style="info" %}
+This section is currently under development (WIP)
+{% endhint %}
+

docs/user-guide/manage-settings/facebook-messenger.md

@@ -0,0 +1,6 @@
+# Facebook Messenger
+
+{% hint style="info" %}
+This section is currently under development (WIP)
+{% endhint %}
+

docs/user-guide/manage-settings/live-chat-widget.md

@@ -0,0 +1,6 @@
+# Live chat widget
+
+{% hint style="info" %}
+This section is currently under development (WIP)
+{% endhint %}
+

docs/user-guide/manage-settings/nlp-provider.md

@@ -0,0 +1,6 @@
+# NLP Provider
+
+{% hint style="info" %}
+This section is currently under development (WIP)
+{% endhint %}
+

docs/user-guide/manage-settings/web-channel.md

@@ -0,0 +1,6 @@
+# Web Channel
+
+{% hint style="info" %}
+This section is currently under development (WIP)
+{% endhint %}
+

docs/user-guide/manage-subscribers.md

@@ -0,0 +1,6 @@
+# Manage Subscribers
+
+{% hint style="info" %}
+This section is currently under development (WIP)
+{% endhint %}
+

docs/user-guide/manage-user-and-roles/README.md

@@ -0,0 +1,21 @@
+# Manage User and Roles
+
+Hexabot offers robust user and role management features to streamline collaboration and ensure security within your chatbot projects. Whether you're working with a team of developers, content creators, or marketing professionals, Hexabot makes it easy to grant the right access levels to the right people.
+
+**Why Manage Users and Roles?**
+
+* **Security:** Control who has access to your chatbot project and which parts of the platform they can access.
+* **Collaboration:** Enable multiple individuals to work together on your chatbot project efficiently without disrupting each other's work.
+* **Clear Responsibilities:** Assign specific roles to team members based on their expertise and responsibilities, ensuring that everyone is focused on the right tasks.
+
+**Key Concepts:**
+
+* **Users:** Individuals with accounts in Hexabot. Each user has a unique profile and set of permissions.
+* **Roles:** Predefined sets of permissions that determine what actions a user can take within the platform.
+
+**Example Scenarios:**
+
+* **Developer:** A developer might have full access to all areas of the platform, including the Visual Editor, NLP training, and the CMS.
+* **Content Creator:** A content creator may have access to the CMS to update chatbot responses and manage knowledge base entries, but might not have access to code or NLP training settings.
+
+<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td>Manage Users</td><td></td><td></td><td><a href="manage-users.md">manage-users.md</a></td><td><a href="../../.gitbook/assets/1.png">1.png</a></td></tr><tr><td>Manage roles</td><td></td><td></td><td><a href="manage-roles.md">manage-roles.md</a></td><td><a href="../../.gitbook/assets/2.png">2.png</a></td></tr></tbody></table>

docs/user-guide/manage-user-and-roles/manage-roles.md

@@ -0,0 +1,33 @@
+# Manage roles
+
+Roles in Hexabot define specific sets of permissions that determine what actions users can take within your chatbot project. By creating and assigning roles, you can control who has access to different parts of the platform and what they can do.
+
+**1. Access Role Management:**
+
+* Log in to your Hexabot account.
+* Go to "Users" or "User Management" section.
+* Look for "Roles" or "Role Management" within the user management settings.
+
+**2. Creating New Roles:**
+
+* **Click  "+ Add "** This will open a form where you can define the new role.
+* **Enter Role Name:** Provide a clear and descriptive name for the role, like "Developer," "Content Manager," "Project Manager," etc.
+
+Step 3 - **Assign Permission**
+
+Newly created roles will initially have no permissions assigned. Click the "Permissions" button to grant access to your new role or update the permissions for an existing role.
+
+* **Assign Permissions:** The role management interface will typically provide a list of available permissions. Select the specific permissions you want to grant to users with this role:
+  * **Message:** Access to build and edit conversation flows.
+  * **Subscriber:** Access to train and manage the chatbot's language understanding.
+  * **Content:** Access to manage chatbot content.
+  * **BotStats:** Access to view and analyze chatbot performance metrics.
+  * **User Management:** Access to manage users (e.g., add, edit, deactivate).
+  * **Role Management:** Access to manage roles (e.g., create, edit, delete).
+  * **Other Permissions:** The specific permissions available may vary depending on the version of Hexabot.
+* **Save Role:** After selecting the appropriate permissions, save the new role.
+
+**4. Deleting Roles:**
+
+* **Locate the Role:** Find the role you want to delete.
+* **Click "Delete":** Be careful when deleting roles, as this will remove all permissions associated with the role. Users assigned to that role will lose their access to the specified features.

docs/user-guide/manage-user-and-roles/manage-users.md

@@ -0,0 +1,22 @@
+# Manage users
+
+Hexabot's user management system allows you to control access to your chatbot project, ensuring that the right people have the right permissions. This guide walks you through the steps of adding, editing, and managing users in your Hexabot workspace.
+
+**1. Access User Management:**
+
+* Log in to your Hexabot account.
+* Locate the "Users" or "User Management" section. This is typically found in the main menu under Admin section.
+
+**2. Adding New Users:**
+
+* **Click the "+ INVITE".**  This will usually open a form or dialog box where you can create a new user account.
+* **Provide User Details:** Fill in the required fields, which typically include:
+  * **Email Address:** The user's primary email address.
+* **Assign Initial Role :** Assign a role during user creation, choose the most appropriate role based on the user's responsibilities. By default, Hexabot present you with 3 key roles that you can choose from : manager, public and admin.
+* **Send Invitation :** If your Hexabot is configured to send emails, you can send the new user an invitation email to activate their account. If you're unable to send the invitation, please contact your system administrator to verify the email settings.
+
+**3. Editing User Information:**
+
+* **View User List:** Find the user you want to edit in the list of users within the User Management section.
+* **Click "Edit" or "Manage" (or similar):** This will open the user's profile page, where you can make adjustments.
+* **Update User Roles:** Change the user's role to grant them different permissions within the chatbot project.

docs/user-guide/nlp-training.md

@@ -0,0 +1,60 @@
+# NLP Training
+
+<figure><img src="../.gitbook/assets/image (6).png" alt=""><figcaption></figcaption></figure>
+
+Hexabot leverages Natural Language Processing (NLP) to understand what your users are saying and respond appropriately. To make sure Hexabot accurately interprets user intent, you need to train its NLU engine to learn from your user's interactions.&#x20;
+
+{% hint style="info" %}
+**Note:** If you are new to Natural Language Understanding (NLU) and NLP, it's highly recommended that you read the [Broken link](broken-reference "mention") section of the documentation first. This will provide you with a foundational understanding of these important concepts before you begin training your chatbot.
+{% endhint %}
+
+This guide provides a step-by-step approach to NLP training:
+
+**1. Access NLP Training:**
+
+* Navigate to the "NLP Training" or "NLU" section in the main menu or dashboard. This section is typically dedicated to managing and improving your chatbot's language understanding capabilities.
+
+**2. Define Intents:**
+
+* **Understanding Intents:** Intents represent the goals or actions that a user wants to achieve through their interaction with the chatbot (e.g., "book\_appointment," "get\_product\_information," "report\_issue").
+* **Create Intents:** Add new intents by giving them descriptive names and click on "Add Intent" button.
+
+**3. Add Training Phrases :**
+
+* **Examples of User Input:** For each intent, you need to provide multiple examples of how a user might express that intent. These examples are called "training phrases" or "utterances."
+* **Diversity is Key:** Aim for a variety of training phrases to cover different ways of expressing the same intent. Include variations in phrasing, wording, slang, and common misspellings.
+* **Example:**
+  * **Intent:** "get\_weather\_forecast"
+  * **Training Phrases:**
+    * "What's the weather like today?"
+    * "Can you tell me the forecast for tomorrow?"
+    * "Is it going to rain this week?"
+    * "What's the temp in London?"
+
+**4. Define Entities (Optional):**
+
+* **Key Information:** Entities represent specific pieces of information that are relevant to fulfilling a user's intent. These could include locations, dates, times, product names, or any other custom data types.
+* **Creating Entities:** Define new entities in the NLP training section. Give each entity a descriptive name and specify its data type (e.g., location, date, text).
+* **Annotate Training Phrases:** In your training phrases, highlight the words or phrases that correspond to entities. This process is called "annotation" and it helps the NLP model learn to extract entities from user input.
+* **Example:**
+  * **Training Phrase:** "Book a flight to London for tomorrow."
+  * **Intent:** "book\_flight"
+  * **Entities:**
+    * "destination": "London" (location)
+    * "departure\_date": "tomorrow" (date)
+
+**5. Test and Improve:**
+
+* **Testing the NLP Model:** Most chatbot platforms offer a built-in testing console to test how well the NLP model is understanding intents and extracting entities. Input various test phrases and see how the model performs.
+* **Analyze and Refine:** Review the testing results to identify areas for improvement.
+  * **Add More Training Phrases:** If the model is misinterpreting certain intents, add more training phrases to clarify those intents.
+  * **Adjust Entity Definitions:** If entities are not being extracted correctly, review and adjust your entity definitions and annotations.
+
+{% hint style="info" %}
+**Tips**
+
+* **Real-User Data:** Once your chatbot is live, continue to monitor and analyze how users are interacting with it.
+* **Identify Common Misunderstandings:** Look for patterns in how users express their intents, especially where the chatbot might be failing to understand.
+* **Regularly Update Training:** Add new training phrases and entities based on real user data to keep improving your chatbot's accuracy and performance.
+{% endhint %}
+

docs/user-guide/visual-editor/README.md

@@ -0,0 +1,13 @@
+# Visual Editor
+
+<figure><img src="../../.gitbook/assets/mediamodifier_image.png" alt=""><figcaption></figcaption></figure>
+
+The visual editor in Hexabot simplifies chatbot creation and optimization through its core feature: the **block palette**. This palette acts as an essential menu, granting control over and configuration of the chatbot's conversational flow. In essence, it provides users with a set of tools in the form of blocks, each designed to perform specific tasks in building the dialogue between the chatbot and its users.
+
+**Blocks are the fundamental building blocks of any chatbot** and play a central role in creating the conversation flow. They define how the chatbot interacts with users and responds to their various requests. Using blocks, you can design the conversational path intuitively, **without requiring any programming skills**. Each block is designed to fulfill a particular function and can be easily integrated into the overall dialogue flow.
+
+In practice, blocks enable you to create a structured chain of responses and interactions between the chatbot and the user. For example, some blocks can be configured to send text messages, while others can be used to capture user responses, such as choices or specific data. Other blocks can be configured to integrate external services or APIs, allowing the chatbot to connect to third-party systems and enrich interactions with additional data.
+
+To build the conversational path, you can add blocks to the design canvas and connect them. This connectivity is crucial as it determines the sequence in which interactions occur. It allows you to create complex conversation scenarios by defining precise rules for each block and linking them logically. For example, a message block could be followed by a user input block, then a decision block that steers the conversation based on the user's responses.
+
+Each block has a specific type that determines its role and capabilities in the conversational flow. For instance, a message block will send a predefined text, while an input capture block will allow the chatbot to gather information from the user, such as answers to questions or choices from multiple options. Additionally, integration blocks can be used to interact with external services, such as a 3rd party API, an e-commerce website or a billing system, enabling the chatbot to provide more personalized and relevant responses.

docs/user-guide/visual-editor/regular-blocks/README.md

@@ -0,0 +1,69 @@
+# Regular Blocks
+
+Regular blocks are the most common building blocks that a user might need when creating a chatbot. On their own, they provide comprehensive control over the chatbot's responses, assuming that the conversational flow and message samples are well-defined and accurately reflect the users' queries and interactions.
+
+{% tabs %}
+{% tab title="Simple Text" %}
+<figure><img src="../../../.gitbook/assets/image (1).png" alt=""><figcaption></figcaption></figure>
+
+Chatbots receive and react to a significant volume of textual data. Text messages are the primary form of communication between a chatbot and its users. For this purpose, Hexabot provides the **Simple Text block**, prominently featured in the block palette, to facilitate the addition and configuration of straightforward textual conversational paths.
+
+To configure what response the chatbot should deliver upon receiving a predefined message, simply select the block and click on the "**Edit**" button.&#x20;
+
+{% hint style="warning" %}
+&#x20;**Caution:** If there are multiple text blocks on the visual editor interface, make sure to select the specific text block you want to edit to avoid disrupting the conversational flows.&#x20;
+{% endhint %}
+
+Blocks can be moved around in the canvas; simply click on the block and hold the click to drag and drop them, ensuring better visibility of the conversational tree structure.
+
+To define how the chatbot should react to user messages, select the block you want to configure, access the edit form using the "**Edit**" button, switch to the "**Triggers**" tab and enter a typical message that a user might send to the chatbot. Then, switch to the "**Message**" tab, specify the standard response that the chatbot should provide each time it receives a similar request, and click "**Submit**".
+
+Text messages provide response clarity, allow for chatbot control, and maintain a fluid and active communication with users. However, relying solely on textual conversational paths is insufficient for transmitting non-textual data and can sometimes lead to rigid and less than optimal pathways for effectively guiding users.
+
+For this reason, Hexabot offers a variety of interaction possibilities and provides several other blocks to diversify conversational paths.
+{% endtab %}
+
+{% tab title="Quick Replies" %}
+<figure><img src="../../../.gitbook/assets/image (2).png" alt=""><figcaption></figcaption></figure>
+
+The Quick Replies block in Hexabot allows you to present users with a predefined set of responses in the form of clickable buttons, eliminating the need for them to manually type their answers. Quick Reply blocks can be configured with conditional triggers, ensuring they are displayed only when certain conditions within the conversation are met. This adds more dynamic control over how Quick Replies are used in your chatbot.
+
+
+
+**Use Cases for Quick Replies:**
+
+* **Asking Yes/No Questions:** Quick Replies simplify binary decisions by offering clear "Yes" and "No" options.
+* **Gathering Basic Information:** Use Quick Replies to collect simple user information like language preferences, contact methods, or preferences.
+* **Guiding the Conversation:** Subtly steer the direction of the dialog by suggesting actions or providing prompts as Quick Reply options.
+
+<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td></td><td>Using Quick Replies Block Guide</td><td></td><td><a href="../../../.gitbook/assets/image (2).png">image (2).png</a></td><td><a href="using-quick-replies-block.md">using-quick-replies-block.md</a></td></tr></tbody></table>
+{% endtab %}
+
+{% tab title="Buttons" %}
+<figure><img src="../../../.gitbook/assets/image (3).png" alt=""><figcaption></figcaption></figure>
+
+The **Buttons block** in Hexabot provides a structured and versatile way to present users with interactive choices within your chatbot conversations. It allows you to display a set of clickable buttons, each representing a distinct action or navigation path. Buttons differ from Quick Replies in their visual layout; while Quick Replies typically appear horizontally, Buttons are usually arranged vertically, making them suitable for presenting a more defined list of options.
+
+Buttons blocks, like Quick Replies, can be configured with conditional triggers, ensuring they are displayed only when specific conditions within the conversation are met. This allows for greater flexibility and dynamic control over your chatbot's flow.
+
+**Use Cases for Buttons:**
+
+* **Presenting a Menu of Options:** Offer users a clear and organized selection of choices, such as product categories, account settings, or support topics.
+* **Initiating Actions:** Trigger specific actions within the chatbot, like "Place Order," "Schedule Appointment," or "Contact Support."
+* **Navigating to External Resources:** Direct users to external web pages or applications using URL buttons, providing additional information or linking to related services.
+{% endtab %}
+
+{% tab title="Attachment" %}
+<figure><img src="../../../.gitbook/assets/image (4).png" alt=""><figcaption></figcaption></figure>
+
+The **Attachment block** in Hexabot enables you to share files directly within your chatbot conversations, enhancing the user experience with rich media content. Go beyond text-only interactions by sending documents, images, videos, or other relevant files to provide more comprehensive information or a more engaging chatbot experience.
+
+**Use Cases for Attachments:**
+
+* **Sharing Documents:** Provide users with helpful resources such as product brochures, instruction manuals, invoice, or reports in PDF format.
+* **Displaying Images:** Enhance your chatbot's responses with visual elements like product images, infographics, or diagrams.
+* **Delivering Audio or Video Content:** Share audio instructions, product demonstrations, or company announcements directly through the chatbot.
+* **Sending Personalized Files:** Based on user interactions or collected data, you can send customized documents or images tailored to the user's specific needs or requests.
+{% endtab %}
+{% endtabs %}
+

docs/user-guide/visual-editor/regular-blocks/using-attachment-block.md

@@ -0,0 +1,48 @@
+# Using Attachment Block
+
+<figure><img src="../../../.gitbook/assets/image (4).png" alt=""><figcaption></figcaption></figure>
+
+The Attachment block in Hexabot allows you to share files with your chatbot users, making your conversations more engaging and informative. You can send PDF documents and image, enhancing the chatbot's ability to provide richer and more comprehensive responses.
+
+This guide will walk you through the steps of using the Attachment block:
+
+**1. Add the Attachment Block:**
+
+* In the Visual Editor, locate the "Attachment" block within the block palette.
+* Drag and drop the Attachment block onto the canvas, positioning it where you want the attachment to be sent in the conversation flow.
+
+**2. Connect the Block:**
+
+* **Preceding Connection:** Connect the Attachment block to the previous block in the conversation flow. This connection determines when the attachment will be sent to the user. You can connect the Attachment block to any type of block that prompts a user action or response, such as a Simple Text block, a Quick Replies block, or a Buttons block.
+
+**3. Configure the Attachment:**
+
+* **Select the Block:** Click on the Attachment block you added to the canvas.
+* **Click "Edit":** The configuration panel for the Attachment block will open.
+* **Triggers Tab (Optional):**
+  * If you want the attachment to be sent only under certain conditions, use the "Triggers" tab to define those conditions.
+  * This could involve triggers based on user input, specific data, or other conversational context.
+* **Message Tab:** This tab allows you to select and configure the attachment file:
+  * **Attachment Type:** Choose the type of file you want to attach (e.g., image, document, audio, video).
+  * **File Selection:** Upload the file from your computer or provide a URL to the file if it is hosted online.
+  * **Title (Optional):** Enter a title or descriptive text for the attachment that will be displayed to the user (e.g., "Product Brochure," "Audio Instructions").
+* **Options Tab (Optional):** Configure any additional options for the Attachment block, such as the typing indicator or label assignment.
+
+**4. Save and Test:**
+
+* Click the "Save" button in the configuration panel to save the changes.
+* Use the "Live Chat Tester" or interact with the chatbot through your chosen channel to verify that the attachment is being sent correctly and that the user is able to view or download the file.
+
+**Example:**
+
+Suppose you have a chatbot that helps users troubleshoot technical issues. You might use the Attachment block to send a PDF document containing a troubleshooting guide:
+
+* **Attachment Type:** Document
+* **File Selection:** Upload a PDF file named "TroubleshootingGuide.pdf."
+* **Title:** "Here's a helpful troubleshooting guide."
+
+**Tips and Best Practices:**
+
+* **File Size:** Be mindful of file sizes, especially when sending videos or large documents. Consider compressing files or hosting them online for optimal delivery.
+* **File Formats:** Choose file formats that are compatible with the messaging platform where your chatbot is deployed.
+* **Contextual Relevance:** Ensure that attachments are relevant to the conversation and provide value to the user.

docs/user-guide/visual-editor/regular-blocks/using-buttons-block.md

@@ -0,0 +1,52 @@
+# Using Buttons Block
+
+<figure><img src="../../../.gitbook/assets/image (3).png" alt=""><figcaption></figcaption></figure>
+
+The Buttons block enables you to display a set of clickable buttons to users, allowing them to easily make choices and guide the flow of the conversation. Unlike Quick Replies, which are typically displayed horizontally, Buttons can be arranged in a vertical layout, providing a more structured and visually appealing way to present options.
+
+This guide will walk you through the steps of using the Buttons block:
+
+**1. Add the Buttons Block:**
+
+* Locate the "Buttons" block in the block palette within the Visual Editor.
+* Drag and drop the Buttons block onto the canvas, placing it at the point in the conversation flow where you want the buttons to appear.
+
+**2. Connect the Block:**
+
+* **Preceding Connection:** Connect the Buttons block to the previous block in the conversation flow to determine when the buttons should be displayed to the user.
+* You can connect the Buttons block to any block that sends a message or prompts a user action, such as a Simple Text block or a User Input block.
+
+**3. Configure the Buttons:**
+
+* **Select the Block:** Click on the Buttons block you added to the canvas to select it.
+* **Click "Edit":** The configuration panel for the Buttons block will open.
+* **Triggers Tab (Optional):**
+  * If you want the buttons to be displayed only under specific conditions, define those conditions in the "Triggers" tab.
+  * This could include triggers based on the user's previous message, specific data values, or other factors relevant to the conversation.
+* **Message Tab:** This tab allows you to set up the content and appearance of the buttons:
+  * **Title (Optional):** Add a title or brief instruction above the buttons to provide context or guide the user.
+  * **Buttons:** Click the "Add Button" button to create your button options. For each button:
+    * **Title:** Enter the text that will be displayed on the button (e.g., "Learn More," "Contact Us").
+    * **Payload:** Define a unique payload for each button. This payload is a value that's sent back to the chatbot when a user clicks that specific button.
+    * **Type:** Choose the type of action you want the button to trigger:
+      * **Postback:** Sends the payload to the chatbot, allowing you to branch the conversation or trigger specific actions. (This is the most common type for navigation and actions within the chatbot.)
+      * **Web URL:** Opens a web page in a new browser window. Enter the complete URL you want to open (e.g., "[https://www.example.com](https://www.google.com/url?sa=E\&q=https%3A%2F%2Fwww.example.com)").
+* **Options Tab (Optional):** Configure additional settings like the typing indicator delay or assign labels to target specific users with the button options.
+
+**4. Save and Test:**
+
+* Click the "Save" button in the configuration panel.
+* Use the "Live Chat Tester" or interact with your chatbot on your chosen channel to verify that the buttons are displayed correctly and that clicking them triggers the intended actions based on their defined payloads.
+
+**Example:**
+
+Let's say you have a chatbot for a restaurant. You could use the Buttons block to present a menu:
+
+* **Title:** "What would you like to order?"
+*   **Buttons:**
+
+    * **Title:** "Appetizers" **Payload:** "show\_appetizers" **Type:** Postback
+    * **Title:** "Main Courses" **Payload:** "show\_main\_courses" **Type:** Postback
+    * **Title:** "Desserts" **Payload:** "show\_desserts" **Type:** Postback
+    * **Title:** "Visit Our Website" **Payload:** (Leave blank) **Type:** Web URL (Link to the restaurant's website)
+

docs/user-guide/visual-editor/regular-blocks/using-quick-replies-block.md

@@ -0,0 +1,44 @@
+# Using Quick Replies Block
+
+<figure><img src="../../../.gitbook/assets/image (2).png" alt=""><figcaption></figcaption></figure>
+
+The Quick Replies block enhances chatbot interactions by offering users a quick and pratical way to the user to provide a standard input. Instead of typing a response, users can select from a predefined set of buttons, each representing a specific option or action.&#x20;
+
+**1. Add the Quick Replies Block:**
+
+* In the Visual Editor, locate the "Quick Replies" block in the block palette (usually on the left or right side of the editor).
+* Drag and drop the Quick Replies block onto the canvas where you want it to appear in the conversation flow.
+
+**2. Connect the Block:**
+
+* Connect the Quick Replies block to the preceding block in your conversation flow. This connection determines when the quick replies will be displayed to the user.
+* You can connect the Quick Replies block to any block that sends a message to the user (e.g., a Simple Text block, an Attachment block).
+
+**3. Configure the Quick Replies:**
+
+* **Select the Block:** Click on the Quick Replies block on the canvas to select it.
+* **Click "Edit":** A configuration panel for the Quick Replies block will open.
+* **Triggers Tab (Optional):** If you want the Quick Replies to be displayed only under certain conditions, you can use the Triggers tab to define these conditions. For example, you might trigger the Quick Replies only if the user's previous message contained specific keywords.
+* **Message Tab:** This is where you define the content of the quick replies.
+  * **Title (Optional):** Enter a title for the quick replies. This title will be displayed above the buttons.
+  * **Buttons:** Add the quick reply buttons that you want to provide to the user. Each button has two fields:
+    * **Title:** The text that will be displayed on the button.
+    * **Payload:** A value that will be sent back to your chatbot when the user clicks the button. You can use this payload to trigger different actions or branches in your conversation flow based on the user's choice.
+* **Options Tab (Optional):** This tab allows you to configure advanced options for the Quick Replies block, such as adding a typing indicator, assigning the block to specific user labels, or defining fallback responses if the user enters something unexpected.
+
+**4. Save and Test:**
+
+* **Save Changes:** Click the "Save" button in the configuration panel to save your changes to the Quick Replies block.
+* **Test the Conversation:** Use the "Live Chat Tester" or connect to your chatbot through your chosen channel (e.g., Facebook Messenger) to test the conversation flow and ensure that the Quick Replies are displayed and function as expected.
+
+**Example:**
+
+Let's say you want to create a chatbot that asks users about their preferred mode of contact. You could use the Quick Replies block to offer the following options:
+
+* **Title:** "How would you prefer to be contacted?"
+* **Buttons:**
+  * **Title:** "Email" **Payload:** "contact\_email"
+  * **Title:** "Phone" **Payload:** "contact\_phone"
+  * **Title:** "Chat" **Payload:** "contact\_chat"
+
+Based on the payload returned when the user clicks a button, you can then direct the chatbot to ask for their email address, phone number, or continue the conversation within the chat interface.

docs/user-guide/visual-editor/regular-blocks/using-simple-text-block.md

@@ -0,0 +1,73 @@
+# Using Simple Text Block
+
+<figure><img src="../../../.gitbook/assets/image (1).png" alt=""><figcaption></figcaption></figure>
+
+Chatbots receive and react to a significant volume of textual data. Text messages are the primary form of communication between a chatbot and its users. For this purpose, Hexabot provides the **Simple Text block**, prominently featured in the block palette, to facilitate the addition and configuration of straightforward textual conversational paths.
+
+To configure what response the chatbot should deliver upon receiving a predefined message, simply select the block and click on the "**Edit**" button.&#x20;
+
+{% hint style="warning" %}
+&#x20;**Caution:** If there are multiple text blocks on the visual editor interface, make sure to select the specific text block you want to edit to avoid disrupting the conversational flows.&#x20;
+{% endhint %}
+
+Blocks can be moved around in the canvas; simply click on the block and hold the click to drag and drop them, ensuring better visibility of the conversational tree structure.
+
+To define how the chatbot should react to user messages, select the block you want to configure, access the edit form using the "**Edit**" button, switch to the "**Triggers**" tab and enter a typical message that a user might send to the chatbot. Then, switch to the "**Message**" tab, specify the standard response that the chatbot should provide each time it receives a similar request, and click "**Submit**".
+
+Text messages provide response clarity, allow for chatbot control, and maintain a fluid and active communication with users. However, relying solely on textual conversational paths is insufficient for transmitting non-textual data and can sometimes lead to rigid and less than optimal pathways for effectively guiding users.
+
+For this reason, Hexabot offers a variety of interaction possibilities and provides several other blocks to diversify conversational paths.
+
+***
+
+<figure><img src="../../../.gitbook/assets/image (1).png" alt=""><figcaption></figcaption></figure>
+
+
+
+**1. Add the Simple Text Block:**
+
+* Locate the "Simple Text" block in the block palette. It's often the first or most prominent block in the list.
+* Drag and drop the "Simple Text" block onto the canvas, placing it where you want the text message to appear in the conversation flow.
+
+**2. Connect the Block:**
+
+* **Start of a Flow:** If the "Simple Text "block is the beginning of your conversation, it doesn't need to be connected to another block. It will be the first message the user receives when they interact with the chatbot. You just need to toggle on the ![](<../../../.gitbook/assets/image (17).png>) "**Entrypoint**" option.
+* **Continuing a Flow:** If the block is part of a longer conversation, connect it to the preceding block to define when the text message should be sent. This connection could be from any type of block, like a Quick Replies block, a User Input block, or another Simple Text block. Each block has a single input port and two types of output ports :&#x20;
+  * ![](<../../../.gitbook/assets/image (15).png>) **Next/Previous Block(s) Port:** Defines which block(s) should be triggered next depending on the user input/reply.
+  * ![](<../../../.gitbook/assets/image (16).png>) **Attached Block Port:** This should be used if you would like to send subsequent messages.
+
+**3. Configure the Text Message:**
+
+* **Select the Block:** Click on the Simple Text block you added to the canvas.
+* **Click "Edit":** This opens the configuration panel for the Simple Text block.
+* **Triggers Tab (Optional):**
+  * If you only want the text message to be sent under certain conditions, define those conditions in the "Triggers" tab.
+  * You can use triggers based on the user's previous message, the presence of specific data, or other contextual factors.
+  * You can also choose to target users by a specific label or limit the block scope to a given channel.
+* **Message Tab:**
+  * Enter the text message you want to send to the user in the "Message" field.
+  * You can define one or multiple text message and the chatbot will send randomly one of them.
+* **Options Tab (Optional):**
+  * **Typing Indicator:** Choose whether to show a typing indicator before sending the message, making the interaction feel more human-like.
+  * **Assign Labels:** Associate the block with specific user labels. This enables you to send different messages to users based on their categories or characteristics.
+  * **Fallback Responses:** Define messages to send if the user's input doesn't meet any defined triggers, preventing dead ends in the conversation.
+
+**4. Save and Test:**
+
+* Click the "Save" button to save the changes you made to the Simple Text block.
+* Use the "Live Chat Tester" or interact with the chatbot through your chosen channel to test how the Simple Text block works in the actual conversation flow.
+
+**Example:**
+
+You might use a Simple Text block at the beginning of a conversation to greet the user:
+
+* **Message Tab:** "Hi there! 👋 Welcome to our customer support chatbot. How can I help you today?"
+
+{% hint style="info" %}
+**Tips:**
+
+* **Be Clear and Concise:** Keep messages short, focused, and easy to understand.
+* **Use a Natural Tone:** Write in a friendly and conversational style.
+* **Personalize When Possible:** Use information you know about the user (e.g., name) to tailor messages.
+* **Provide Context:** Make sure the user knows why they are receiving a message and what they should do next.
+{% endhint %}

docs/user-guide/visual-editor/using-advanced-blocks.md

@@ -0,0 +1,58 @@
+# Using Advanced Blocks
+
+<figure><img src="../../.gitbook/assets/image (5).png" alt=""><figcaption></figcaption></figure>
+
+The List block in Hexabot provides a dynamic way to showcase a collection of items, options, or information to your users in an organized and engaging manner. You have the flexibility to display your content in either a traditional list format or as a visually appealing carousel.
+
+The List block is ideal when you need to:
+
+* Present a menu of options to the user.
+* Showcase a collection of products or services.
+* Display a series of steps or instructions in a clear format.
+* Provide users with multiple choices that they can easily browse.
+
+
+
+**2. Add the List Block:**
+
+* Find the "List" block in the block palette within the Visual Editor. It may be located in a section categorized as "Advanced" or "Specialized" blocks.
+* Drag and drop the List block onto the canvas, placing it at the desired point in the conversation flow where you want the list to be displayed.
+
+**3. Connect the Block:**
+
+* **Preceding Connection:** Connect the List block to the block that precedes it in the conversation flow. This connection determines when the list will be shown to the user. It can be linked to any block that prompts user interaction or provides information, such as a Simple Text block or a Quick Replies block.
+
+**4. Configure the List:**
+
+* **Select the Block:** Click on the List block on the canvas.
+* **Click "Edit":** The configuration panel for the List block will open, allowing you to customize the list's appearance and content.
+* **Triggers Tab (Optional):**
+  * If you want the List block to be triggered only under specific conditions, define those conditions in the "Triggers" tab.
+  * These could be based on user responses, data values, or other relevant conversation elements.
+* **Message Tab:** This tab is where you define the items in your list and how they should be presented:
+  * **Title (Optional):** Provide a title for the list, giving users context about the information being displayed.
+  * **Items:** Add individual list items using the "Add Item" button. For each item:
+    * **Title:** Enter the title or main text for the list item (e.g., "Product Name," "Service Description").
+    * **Subtitle (Optional):** Add a brief subtitle to provide more details about the list item.
+    * **Image (Optional):** Upload an image to be displayed next to the list item, making it visually engaging.
+    * **Button (Optional):** Include a button to allow users to interact with the list item directly. You can set the button type (Postback or Web URL) and define a payload to trigger actions or open external links.
+* **Options Tab (Optional):**
+  * **Display Mode:** Select whether the list should be displayed as a regular vertical list or a horizontally scrolling carousel. The carousel mode is particularly useful for presenting image-heavy lists.
+  * **Pagination:** If you have a large number of items, enable pagination to break the list into manageable chunks.
+  * **Other Options:** Configure typing indicator delay, label targeting, and fallback responses as needed.
+
+**5. Save and Test:**
+
+* Click "Save" to store your changes to the List block.
+* Test the conversation flow in the "Live Chat Tester" or through your connected messaging channels to ensure the List block is working correctly.
+
+**Example:**
+
+Imagine you have a real estate chatbot showcasing property listings. A List block would be ideal to present a selection of properties to the user:
+
+* **Title:** "Here are some properties that match your criteria:"
+* **Items:**
+  * **Title:** "Modern 3-Bedroom House"
+  * **Subtitle:** "Spacious garden, prime location"
+  * **Image:** Upload an image of the house.
+  * **Button:** Title: "View Details" Payload: "property\_details\_123" Type: Postback

docs/user-guide/visual-editor/using-the-visual-editor.md

@@ -0,0 +1,38 @@
+# Using the Visual Editor
+
+Hexabot's Visual Editor provides an intuitive drag-and-drop interface to design your chatbot's conversation flows without writing any code. This guide walks you through the key elements and functionalities of the Visual Editor, making it easy to build engaging chatbot experiences.
+
+**1. Accessing the Visual Editor:**
+
+* Log in to your Hexabot account.
+* In the main menu, click on "Visual Editor."
+
+**2. Understanding the Interface:**
+
+The Visual Editor typically consists of the following main areas:
+
+* **Canvas:** The central workspace where you build your conversation flow.
+* **Block Palette:** A menu or sidebar listing the various blocks you can use to design your chatbot's interactions (e.g., Simple Text, Quick Replies, Buttons, User Input, etc.).
+* **Configuration Panel:** A panel that appears when you select a block on the canvas, allowing you to customize the block's properties, triggers, and responses.
+* Toolbar: A toolbar located at the bottom right of the editor, primarily used for managing the canvas view with options to zoom in, zoom out, and reset the view to its default size.
+
+**3. Building a Conversation Flow:**
+
+* **Drag and Drop Blocks:** Drag blocks from the block palette onto the canvas to add them to your conversation flow.
+* **Connect Blocks:** Click and drag from the connection points of one block to another to define the sequence of interactions. The connections determine the flow of the conversation.
+* **Customize Blocks:** Click on any block on the canvas to select it. The configuration panel will open, allowing you to edit the block's properties:
+  * **Triggers Tab (Optional):** Define the conditions that determine when the block should be activated. This could include specific keywords in the user's message, previously collected data, or other events.
+  * **Message Tab:** Enter the text message the chatbot will send, configure buttons or quick reply options, or specify other chatbot actions (like displaying an image or collecting user input).
+  * **Options Tab (Optional):** Set additional settings like the typing indicator delay, label targeting, or define fallback responses for unexpected user input.
+
+**4. Organizing Your Conversation Flow:**
+
+* **Layout:** Arrange blocks on the canvas to create a visually clear and logical flow. 
+* **Branching:** Use conditional logic (typically in the "Triggers" tab) to create branches in your conversation flow. This lets you handle different user responses and guide them down different paths based on their choices.
+* **Grouping (Optional):** Hexabot allow you to group blocks into categories to keep related parts of your conversation flow organized in different tabs.
+
+**5. Testing and Iteration:**
+
+* **Live Chat Tester:** Most chatbot platforms offer a "Live Chat Tester" feature within the Visual Editor. This lets you test your conversation flow and see how your chatbot interacts in a simulated environment.
+* **Channel Testing:** Once you're satisfied with the basic flow, test your chatbot on the actual messaging channels (e.g., website, Facebook Messenger) where it will be deployed to get a more realistic user experience.
+* **Iterate Based on Feedback:** Gather feedback from testing and real user interactions. Use this feedback to continuously improve your conversation flow, making it more engaging, effective, and user-friendly.