Скачать 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`	Объект	см. ниже	Некоторые варианты настройки пользовательского интерфейса
`bot-typing`	логическое значение	ЛОЖЬ	Если `true` , индикатор набора текста ботом отобразит
`input-disable`	логическое значение	ЛОЖЬ	Если `true` , ввод сообщений будет отключен.
`is-open`	логическое значение	ЛОЖЬ	Если `true` , доска откроется из инициализации.
`open-delay`	Число	неопределенный	Задержка перед открытием из инициализации (в мс). Требуется, чтобы `is-open` было `true`

Параметры

Список доступных опций для настройки пользовательского интерфейса:

Имя	Тип	По умолчанию	Описание
`botTitle`	Нить	«Чат-бот»	Имя бота, которое будет отображаться в заголовке доски.
`colorScheme`	Нить	'#1b53d0'	Цвет фона кнопки-пузыря и заголовка доски
`textColor`	Нить	'#ффф'	Цвет значка пузырьковой кнопки и заголовка заголовка доски
`bubbleBtnSize`	Число	56	Размер пузырьковой кнопки (пикселей)
`animation`	логическое значение	истинный	Установите значение `false` , чтобы отключить анимацию значка пузырьковой кнопки и отображения доски.
`boardContentBg`	Нить	'#ффф'	Цвет фона окна сообщений на доске
`botAvatarSize`	Число	32	Размер аватара бота (пикселей)
`botAvatarImg`	Нить	'http://placehold.it/200x200'	Изображение аватара
`msgBubbleBgBot`	Нить	'#f0f0f0'	Цвет фона сообщения бота
`msgBubbleColorBot`	Нить	'#000'	Цвет текста сообщения бота
`msgBubbleBgUser`	Нить	'#4356e0'	Цвет фона сообщения пользователя
`msgBubbleColorUser`	Нить	'#ффф'	Цвет текста сообщения пользователя
`inputPlaceholder`	Нить	'Сообщение'	Заполнитель для ввода сообщения
`inputDisableBg`	Нить	'#ффф'	Цвет фона для отключенного ввода, смешанный с `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/..

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

Дела:

Многие вещи...

~~События~~
~~Индикаторы загрузки/ввода текста~~
~~Отключить ввод сообщений при загрузке и наоборот...~~
Свойства для target параметров кнопки
Добавьте дополнительные компоненты всплывающего сообщения (видео, изображения и т. д.).
Добавить больше событий
Тест
Доступность