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