vue bot ui下载 - vue bot ui源码下载

vue bot ui

Ai源码

vent to toggle & close the board manually

下载

Vue 机器人用户界面

对于那些正在寻找可定制聊天机器人用户界面的人。

我为我的私人项目构建，但我试图提供尽可能多的选项，因为我认为有人需要它，所以请随意使用它。

演示页面即将推出。

vue 机器人用户界面

安装

npm install vue-bot-ui

// or
yarn add vue-bot-ui

用法

导入并注册组件

 import { VueBotUI } from 'vue-bot-ui'

export default {
  components : {
    VueBotUI ,
  } ,
  ...
}

并使用它：

< VueBotUI
  : messages = " data "
  : options = " botOptions "
  @ msg-send = " messageSendHandler "
/>

 data ( ) {
  return {
    data : [ ] , // See Data example below
    botOptions : {
      // See the list of options below
    }
  }
}

道具

在组件中使用的可用道具列表：

姓名	类型	默认	描述
`messages`	大批	[]	必需的。消息数据
`options`	目的	见下文	一些自定义 UI 的选项
`bot-typing`	布尔值	错误的	如果`true` ，机器人输入指示器将显示
`input-disable`	布尔值	错误的	如果`true` ，消息输入将被禁用
`is-open`	布尔值	错误的	如果`true` ，板将从 init 打开
`open-delay`	数字	不明确的	从 init 打开之前的延迟（以毫秒为单位）。要求`is-open`为`true`

选项

自定义 UI 的可用选项列表：

姓名	类型	默认	描述
`botTitle`	细绳	“聊天机器人”	将显示在面板标题上的机器人名称
`colorScheme`	细绳	'#1b53d0'	气泡按钮和板标题的背景颜色
`textColor`	细绳	'#fff'	气泡按钮图标和板标题标题的颜色
`bubbleBtnSize`	数字	56	气泡按钮的大小（px）
`animation`	布尔值	真的	设置为`false`以禁用气泡按钮图标和板显示的动画
`boardContentBg`	细绳	'#fff'	板消息框的背景颜色
`botAvatarSize`	数字	32	机器人头像大小（px）
`botAvatarImg`	细绳	'http://placehold.it/200x200'	头像图片
`msgBubbleBgBot`	细绳	'#f0f0f0'	Bot消息的背景颜色
`msgBubbleColorBot`	细绳	“#000”	Bot 消息的文本颜色
`msgBubbleBgUser`	细绳	'#4356e0'	用户消息的背景颜色
`msgBubbleColorUser`	细绳	'#fff'	用户消息的文字颜色
`inputPlaceholder`	细绳	'信息'	消息输入的占位符
`inputDisableBg`	细绳	'#fff'	禁用输入的背景颜色，与`opacity: 0.2`
`inputDisablePlaceholder`	细绳	无效的	禁用输入的占位符消息

组件和事件

这是您需要了解的最重要的部分，因为您需要这些来集成您的机器人 API。如果您需要示例，请查看我的App.vue文件。

活动

姓名	参数	描述
`init`		每次打开板子时都会发生火灾
`msg-send`	值（对象）	当用户点击“发送”或选择一个选项时触发
`destroy`		板关闭时起火

使用msg-send从用户处获取消息并触发对 bot API 的请求。

触发事件：

姓名	描述
`botui-open`	打开板子
`botui-close`	关闭板
`botui-toggle`	切换打开/关闭板

成分

常见模式/示例数据：

 const messages = [
  {
    agent : 'bot' , // Required. 'bot' or 'user'
    type : 'text' , // Required. Bubble message component type: 'text' / 'button'
    text : 'Hello. How can I help you' , // Required. The message
    disableInput : false , // Disable message input or not
    ...
  } ,
  {
    agent : 'user' ,
    type : 'text' , // always
    text : 'I need a new laptop' ,
  } ,
  ...
]

组件清单：

该包当前支持的组件，文件路径： components/MessageBubble/..

SingleText - type: 'text'

 {
  agent : 'bot' ,
  type : 'text' ,
  text : 'Hello. How can I help you' ,
  disableInput : false ,
}

ButtonOptions - type: 'button'

 {
  agent : 'bot' ,
  type : 'button' ,
  text : 'Select the option below' ,
  disableInput : true ,
  options : [
    {
      text : 'Open Google' ,
      value : 'https://google.com' ,
      action : 'url'
    } ,
    {
      text : 'Submit Support Ticket' ,
      value : 'submit_ticket' ,
      action : 'postback' // Request to API
    } ,
    ...
  ] ,
}

其他组件即将推出...

老虎机

可用插槽列表：

姓名	描述
`header`	板标头，包含机器人名称。
`actions`	输入消息中“发送”按钮旁边的插槽。您可以在此处添加额外的操作（表情符号、附件...）
`sendButton`	发送按钮图标，您可以将其更改为文本。
`bubbleButton`	默认包含 BubbleIcon 和 CloseIcon 的气泡按钮。
`botTyping`	默认情况下，机器人键入消息气泡包含 3 个点指示器。

没有找到您需要的东西？

您可以通过类名覆盖 CSS。每种类型和状态都有单独的类供您自定义。

功能请求：请随意打开问题来请求新功能。

开发商/建设

 # Clone repo
git clone https://github.com/JuzSer/vue-bot-ui

# Install packages
yarn

# Development & Demo - http://localhost:1901
yarn serve

# Build main library
yarn build-bundle