rasa-webchat

项目介绍：Rasa Webchat

Rasa Webchat 是一个可以将通过 Rasa 或 Botfront 制作的虚拟助手部署到任何网站上的聊天控件。用户可以在他们的网站中轻松集成和使用这个功能强大的工具。

功能

Rasa Webchat 提供多种功能以提升用户的聊天体验：

• 文本消息：支持与用户通过文本进行交互。
• 快捷回复：用户可以快速选择回复选项。
• 图像和轮播：支持在对话中显示图像和轮播内容。
• Markdown 支持：文本内容中支持 Markdown 格式。
• 持久会话：保持会话状态，用户不会因刷新页面而丢失聊天记录。
• 打字指示：显示机器人正在打字的提示。
• 消息间智能延迟：模拟更真实的人机对话节奏。
• 简单易用的集成方式：可以通过 script 标签或者 React 组件导入。

如何使用

使用 <script> 标签

在 HTML <body/> 中，可以通过以下方式引入 Rasa Webchat：

<script>!(function () {
  let e = document.createElement("script"),
    t = document.head || document.getElementsByTagName("head")[0];
  (e.src =
    "https://cdn.jsdelivr.net/npm/rasa-webchat@1.x.x/lib/index.js"),
    (e.async = !0),
    (e.onload = () => {
      window.WebChat.default(
        {
          customData: { language: "en" },
          socketUrl: "https://bf-botfront.development.agents.botfront.cloud",
          // 添加其他属性在此处
        },
        null
      );
    }),
    t.insertBefore(e, t.firstChild);
})();
</script>

建议使用特定版本号来预防因版本更新导致的不兼容问题，例如 1.0.0 版。

作为 React 组件

可以通过 npm 包安装 Rasa Webchat，并在 React 项目中使用：

npm install rasa-webchat

接着在项目中导入并使用组件：

import Widget from 'rasa-webchat';

function CustomWidget = () => {
  return (
    <Widget
      initPayload={"/get_started"}
      socketUrl={"http://localhost:5500"}
      socketPath={"/socket.io/"}
      customData={{"language": "en"}} // 自定义数据
      title={"Title"}
    />
  )
}

注意：如果你希望嵌入在网页中，需要将 embedded 属性设置为 true。

参数

在 Rasa Webchat 中，有多种参数可以配置：

• initPayload：会话开始时发送给 Rasa 的初始负载。
• socketUrl 和 socketPath：定义连接的 Socket URL 和路径。
• customData：发送给服务器的自定义数据，必须包含语言信息。
• title 和 subtitle：聊天控件的标题和副标题。
• hideWhenNotConnected：当连接丢失时是否隐藏控件。
• 其他详细参数如 docViewer, showFullScreenButton 等，均可以根据需求自行配置。

其他功能

• 在窗口关闭时显示为工具提示。
• 能够在页面加载时发送消息或从 React 应用程序发送特定负载。
• 支持与任何后端的通信，但主要设计用于与 Rasa 或 Botfront 配合使用。

样式

CSS 类进行了前缀设置以避免冲突。如果有需要自定义样式，只需在现有类名前加上 rw- 前缀。

贡献者

非常感谢以下贡献者支持与开发 Rasa Webchat 项目：

• @PHLF
• @znat
• @TheoTomalty
• 以及更多优秀的开发者们。

授权许可

Rasa Webchat 在 Apache 2.0 许可下发布，用户可以在遵循许可条款的前提下使用和分发软件。

通过这些详细的介绍，相信大家对 Rasa Webchat 有了更加全面的了解，可以更好地利用这个工具来增强网站与用户之间的互动体验。