@airelogic/docs-chatbot

A chatbot for the Airelogic documentation to be used in the Airesuite products.

Installation

``bash
npm install @airelogic/docs-chatbot
`

Usage

$3

`javascript
import React, { useRef } from "react";
import {
useDocsBotChat,
DocsBotChatRef,
DocsBotOptions,
} from "@airelogic/docs-chatbot";

const widgetOptions: DocsBotOptions = {
botName: "AireGlu Docs",
description: "Ask me anything about AireGlu!",
color: "#291b3e",
alignment: "left",
labels: {
firstMessage:
"Hi! I can help you with our documentation. What would you like to know?",
floatingButton: "Help",
inputPlaceholder: "Ask about our docs...",
poweredBy: "Aireinnovate",
},
questions: [
"How do I get started with AireGlu endpoints?",
"What are the main features of AireGlu?",
"How do I send an email from an AireGlu enpoint?",
],
verticalMargin: 10, // use 70 if there is a footer
horizontalMargin: 10,
customCSS:
.docsbot-wrapper {
height: calc(100% - 230px);
}
, // Adjust height to fit the page when there is a footer
};

{
/ Refer to AireGlu (magicman) on how the Bot Id is housed in an environment variable /
}
useDocsBotChat({
botId: "a1QS54aX5vqaWUgXH9c1/QYNQLIJlzqpRsJX90lLE",
options: widgetOptions,
});

// include component, the bot Id is unique for Airelogic
return (


`javascript
import React, { useRef, useState } from "react";
import {
DocsBotChat,
DocsBotChatRef,
DocsBotOptions,
} from "@airelogic/docs-chatbot";

const { mount, unmount, toggle } = useDocsBotChat({
botId: "your-bot-id",
options: widgetOptions,
inject: false,
});
const [isMounted, setIsMounted] = useState(false);

const handleMount = async () => {
const success = await mount();
setIsMounted(success || false);
};

const handleUnmount = async () => {
const success = await unmount();
setIsMounted(!success);
};

const handleToggle = () => {
toggle();
};

return (


`html

`

Props

| Prop | Type | Default | Description |
| ------------------------ | -------------------- | ----------- | ----------------------------------------- |
| botId | string | Required | The unique bot identifier |
| options | DocsBotOptions | {} | Widget configuration options |
| identify | DocsBotIdentify | undefined | User identification data |
| signature | string | undefined | Authentication signature |
| supportCallback | SupportCallback | undefined | Support ticket callback |
| keyboardShortcuts | KeyboardShortcut[] | [] | Custom keyboard shortcuts |
| enableDefaultShortcuts | boolean | true | Enable Ctrl+Q (toggle) and Escape (close) |
| inject | boolean | true | Control automatic script injection |

Methods

The hook (or the component ref) provides several methods to control the chatbot widget:

- mount() - Manually mount the chatbot widget
- unmount() - Unmount and clean up the chatbot widget
- open() - Open the chatbot interface
- close() - Close the chatbot interface
- toggle() - Toggle the chatbot interface open/closed
- addUserMessage(message, send?) - Add a user message to the chat
- addBotMessage(message) - Add a bot message to the chat
- clearChatHistory() - Clear the chat history

`

``