Botui是一款简单的js聊天机器人框架。Botui基于Vue.js，通过简单配置，就可以制作出一个功能简单的聊天机器人，非常神奇。

使用方法

在页面中引入botui.min.css和botui-theme-default.css样式文件，vue.min.js和botui.min.js文件。

<link rel="stylesheet" href="botui.min.css">
<link rel="stylesheet" href="botui-theme-default.css">
<script src="vue.min.js"></script>
<script src="botui.min.js"></script>
                

HTML结构

使用下面的HTML结构来创建一个聊天机器人面板。

<div class="botui-app-container" id="botui-app">
  <bot-ui></bot-ui>
</div>
                

初始化插件

通过下面的代码就可以生成一个最简单的聊天机器人。

var botui = new BotUI('botui-app'); // 参数是容器的id

botui.message.bot({ // 第一条信息
  delay: 200,
  content: 'hello'
}).then(function () {
  return botui.message.bot({ // 第二条信息
    delay: 1000, // 等待1秒
    content: 'how are you?'
  });
}).then(function () {
  return botui.action.button({ // 与用户交互
    delay: 1000,
    action: [
      {
        text: 'Good',
        value: 'good'
      },
      {
        text: 'Really Good',
        value: 'really_good'
      }
    ]
  });
}).then(function (res) {
  return botui.message.bot({
    delay: 1000,
    content: 'You are feeling ' + res.text + '!'
  });
});
                

Botui聊天机器人框架的github地址为：https://github.com/moinism/botui

在线预览    源码下载