@airelogic/docs-chatbot (英语)

Airelogic 文档的聊天器,用于Airesite产品.

安装

npm install @airelogic/docs-chatbot

使用量

基本使用(自动挂载)

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>
);

手动控制

对于聊天器加载和挂载时的更多控制,您可以禁用自动注射:

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>
);

重要: 当使用手动控制时, 请确保您在 HTML 中添加了 Docbot 脚本的引用 .

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

道具

方法

钩子(或组件 ref)提供了控制聊天器部件的几种方法:

• mount() - 手动挂载聊天器部件
• unmount() - 卸载并清理聊天器部件
• open() - 打开聊天机接口
• close() - 关闭聊天机接口
• toggle() - 切换打开/关闭的聊天机接口
• addUserMessage(message, send?) - 在聊天时添加用户信息
• addBotMessage(message) - 在聊天时添加一个机器人信息
• clearChatHistory() - 清谈历史