@acpaas-ui-widgets/ngx-chatbot 中文文档教程

Question

Chatbot Smart Widget UI (Angular)

使用聊天机器人智能小部件，您可以简单地在任何页面中实现聊天机器人。

您还需要 BFF 包才能让聊天机器人智能小部件工作：http://github.com/TriangleJuice/chatbot servicenodejs

有演示应用程序，请参阅下面的运行说明。

How to use

Installing

> npm install @acpaas-ui-widgets/ngx-chatbot

在您的模块中导入组件：

@NgModule({
  imports: [
    ...,
    ChatbotModule
  ],
  ...
})

在 index.html 中，包含核心品牌样式表：

<link rel="stylesheet" href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/main.min.css">

对于仍在使用 Angular 5 的项目，我们是 维护一个 v1 分支，如果需要，它仍然会收到错误修复。

> npm install @acpaas-ui-widgets/ngx-chatbot@"<2.0.0"

In your template

<aui-chatbot
  url="http://localhost:3000/api/bff"
  session="123456789"
  title="My great chatbot widget"
  placeholder="Type your message here…"
  [pinned]="false"
  [delay]="200"
  [height]="400">
</aui-chatbot>

Supported attributes

url

string BFF 网址。

session

string 聊天机器人引擎所需的会话 ID，其中每个聊天对话都链接到其聊天会话。 使用唯一 ID 很重要，因为所有会话数据（例如已经给出的答案）都存储在聊天机器人引擎中。

title

string 聊天窗口上方的标题。

pinned

boolean 聊天机器人是内联的还是固定在应用程序的底部。

placeholder

string 聊天输入字段中的占位符字符串。

delay

number 从聊天机器人引擎接收到的多条消息之间的延迟。

height

number 聊天机器人的高度（以像素为单位）。 只能在 pinned="false" 时使用。

width

number 聊天机器人的宽度（以像素为单位）。 只能在 pinned="true" 时使用。 不会小于 18rem。

avatar

string 头像图片地址。 默认是特殊提供的安特卫普图标。

aria

ChatbotMessageAriaLabels 整个聊天机器人 UI 中使用的辅助功能字符串：

默认值：

{
  chatbot: 'Chatbot',
  close: 'Chatbot minimaliseren',
  avatar: 'Chatbot:',
  user: 'Jij:',
  message: 'Te verzenden bericht',
  send: 'Bericht verzenden',
  toggle: 'Een vraag stellen',
}

Events

actionStarted

当用户单击类型为 action 的消息按钮时触发。 这种类型的消息由 BFF 通过将其注入到响应中来注入。 actionStarted 输出事件需要定义的操作并暂停聊天机器人小部件的工作，等待具有相同定义操作的方法调用 (completeAction)。 它允许开发人员在返回聊天机器人对话之前处理聊天机器人之外的一些事情（例如付款）。

How does it work?

<aui-chatbot
  #myChatbotWithAction
  [url]="'http://localhost:3000/api/chatbot'"
  [session]="session1"
  (actionStarted)="triggerMe($event)">
</aui-chatbot>

1. Your BFF sends a message of type action with one or more actions defined.

  {
    actions: [
      {
        action: 'someAction',
        text: 'Click me',
      }
    ]
  }

2. When the user clicks this button, the defined actionStarted output event will fire and the chatbot is disabled.

  public triggerMe(event) {
    // Do something with `event`
  }

3. $event can now be handled in the parent controller and whenever finished, the chatbot widget's completeAction method can be triggered to re-enable the chatbot conversation. The result will be sent as a hidden message to the chatbot engine.

重要的！ completeAction 的方法属性必须包含与禁用聊天机器人时首次定义的完全相同的 action 值，否则聊天机器人将忽略方法调用。

  const result = {
    action: 'someAction',
    message: 'success',
  }
  this.myChatbotWithAction.completeAction(result);

Run the demo app

> npm install
> npm start

浏览到 localhost:4200

为了使用聊天机器人小部件演示应用程序，您还需要启动相应的后端服务。

Contributing

我们欢迎您的错误报告和拉取请求。

请参阅我们的贡献指南。

Support

Jasper Van Proeyen (jasper.vanproeyen@digipolis.be)

License

此项目根据 MIT 许可证发布。