vue bot uiダウンロード - vue bot uiソースコードのダウンロード

vue bot ui

AI ソースコード

vent to toggle & close the board manually

ダウンロード

Vue ボット UI

カスタマイズ可能なチャットボット UI を探している人向け。

私は個人的なプロジェクトのために構築していますが、誰かが必要とすると思われるだけ多くのオプションを提供するように努めましたので、自由に使用してください。

デモページは近日公開予定です。

vueボットUI

インストール

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
    }
  }
}

小道具

コンポーネントで使用できる利用可能な props のリスト:

名前	タイプ	デフォルト	説明
`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使用してユーザーからメッセージを取得し、ボット 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/..

シングルテキスト- 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