@airelogic/docs-chatbot

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

Installation

npm install @airelogic/docs-chatbot

Usage

Basic Usage (Auto-mounting)

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 (
  <div>
    <h1>Welcome to the Docs Chatbot Playground</h1>
  </div>
);

Manual Control

For more control over when the chatbot loads and mounts, you can disable automatic injection:

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 (
  <div>
    <div>
      <button onClick={handleMount} disabled={isMounted}>
        Mount Chatbot
      </button>
      <button onClick={handleUnmount} disabled={!isMounted}>
        Unmount Chatbot
      </button>
      <button onClick={handleToggle} disabled={!isMounted}>
        Toggle Chatbot
      </button>
    </div>
  </div>
);

Important: When using manual control, ensure you have added a reference to the docsbot script in your HTML.

<script src="https://widget.docsbot.ai/chat.js" async></script>

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