peekobot下载 - peekobot源码下载

peekobot

Ai源码

1.0.0

下载

窥视机器人

Peekobot 是一个简单的、选择驱动的聊天机器人框架，用不到100 行 ES6 vanilla JavaScript（和一些 CSS）编写而成。

您可以在/docs文件夹中看到一个示例机器人。

还有一个 CodePen 可供您修改。

特征

小、简单、零依赖（除非你需要旧浏览器兼容性）
将您的对话定义为简单的 JavaScript 对象
选择/按钮驱动的对话
链接到 URL 以及对话其他部分的选项

浏览器兼容性

我使用 async/await 和 CSS 自定义属性，因此，一般来说，不支持 Internet Explorer 和 Opera Mini。

您可以使用 Babel 或类似工具为 JavaScript 带来 IE11 兼容性。

如果需要，您还可以手动内联 CSS 自定义属性。

用法

Peekobot 不是一个包或库。你不能npm install它。将其视为入门套件或框架。这个想法是你拿一份它的副本并用它做你自己的事情。

如果你确实使用它，请给我写信并告诉我你做了什么！我很想看看其他人正在用它做什么。谢谢！？

要使用 Peekobot，您需要：

将 Peekobot 脚本和样式添加到您的 HTML 中
将 Peekobot 标记添加到您的 HTML 中
定义你的对话

1. 将 Peekobot 脚本和样式添加到 HTML

将peekobot.js和peekobot.css文件下载到您的项目中。

您可以通过从 GitHub 获取这些文件的原始代码或克隆项目来完成此操作。

然后将 Peekobot 脚本和样式添加到您的 HTML 中。

这些应该放在head中：

    <!-- Peekobot 自定义属性（CSS 变量）- 设置这些！ --><样式>:根{
            --peekobot 高度：80vh；
            --peekobot-头像: url();
        }</style><!-- Peekobot 样式 --><link rel="stylesheet" href="peekobot.css">

请注意，您可以在此处更改聊天机器人窗口的高度，并定义聊天机器人在聊天中使用的“头像”URL。它应该很小，呈方形，并且适合圆形。我的 CSS 显示为 24 像素正方形，因此 48 像素 x 48 像素的图像应该没问题。

这些应该位于 HTML 的底部以加载 JavaScript：

    <script src="conversation.js"></script><script src="peekobot.js"></script>

2. 将 Peekobot 标记添加到您的 HTML 正文中

将 Peekobot 标记添加到您希望聊天机器人出现的 HTML 正文中：

    <div id="peekobot-container"><div id="peekobot-inner"><div id="peekobot"></div></div></div>

3.定义你的对话

对话定义应放置在名为chat的 JavaScript 变量中。我在conversation.js文件中定义了它。如果您愿意，可以内联它。

chat变量应该是一个对象。在聊天对象中：

第一个属性名称/键应该是数字 1
后续属性名称可以是数字或字符串 - 字符串允许您对对话的各个部分进行分组
每个属性值都是对话中的一个条目。

对话条目应该包含：

text属性，即聊天机器人在对话中此时所说的内容
任何一个：

next一个属性，通过指定聊天对象的数字键来定义下一个聊天条目，当聊天机器人需要依次说出几件事而不需要用户输入时使用，或者
定义用户可以采取的选择options属性。这是一个选项对象的数组。

选项对象应该具有：

一个text属性，是用户选择的标签，并且
next一个属性，通过声明聊天对象的属性键来定义下一个聊天条目，并在用户选择此选项时使用或
url属性，定义用户要访问的链接

一个简单的聊天对象示例是：

 const chat = {1: {text: '早上好先生',next: '问题1'},question1: {text: '您早餐想喝茶还是咖啡吗？',options: [{text: '茶', next: 'response1'},{text: '咖啡',next: 'response2'}]},response1: {text: 'Splendid - 一杯好喝的饮料如果我自己这么说的话。'},response2: {text: '如您所愿，先生'}}