Descargar vue bot ui - descarga del código fuente de vue bot ui

vue bot ui

Código Fuente de IA

vent to toggle & close the board manually

Descargar

Interfaz de usuario de Vue Bot

Para aquellos que buscan una interfaz de usuario de chatbot personalizable.

Construyo para mi proyecto privado, pero intenté ofrecer tantas opciones como creo que alguien necesita, así que siéntete libre de usarlo.

La página de demostración llegará pronto.

interfaz de usuario del robot vue

Instalar

npm install vue-bot-ui

// or
yarn add vue-bot-ui

Uso

Importar y registrar el componente

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

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

Y úsalo:

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

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

Accesorios

Lista de accesorios disponibles para usar en el componente:

Nombre	Tipo	Por defecto	Descripción
`messages`	Formación	[]	Requerido . Datos de mensajes
`options`	Objeto	vea abajo	Algunas opciones para personalizar la interfaz de usuario
`bot-typing`	Booleano	FALSO	Si es `true` , se mostrará el indicador de escritura del bot.
`input-disable`	Booleano	FALSO	Si es `true` , la entrada de mensajes se desactivará.
`is-open`	Booleano	FALSO	Si es `true` , el tablero se abrirá desde el inicio.
`open-delay`	Número	indefinido	Retraso antes de abrir desde init (en ms). Requiere `is-open` para ser `true`

Opciones

Lista de opciones disponibles para personalizar la interfaz de usuario:

Nombre	Tipo	Por defecto	Descripción
`botTitle`	Cadena	'Chatbot'	El nombre del bot que se mostrará en el encabezado del tablero.
`colorScheme`	Cadena	'#1b53d0'	Color de fondo del botón de burbuja y del encabezado del tablero
`textColor`	Cadena	'#fff'	Color del icono del botón de burbuja y del título del encabezado del tablero
`bubbleBtnSize`	Número	56	Tamaño del botón de burbuja (px)
`animation`	Booleano	verdadero	Configúrelo en `false` para deshabilitar la animación del ícono del botón de burbuja y la visualización del tablero
`boardContentBg`	Cadena	'#fff'	Color de fondo del cuadro de mensajes del tablero
`botAvatarSize`	Número	32	Tamaño del avatar del bot (px)
`botAvatarImg`	Cadena	'http://placehold.it/200x200'	imagen de avatar
`msgBubbleBgBot`	Cadena	'#f0f0f0'	Color de fondo del mensaje del Bot
`msgBubbleColorBot`	Cadena	'#000'	Color del texto del mensaje del Bot
`msgBubbleBgUser`	Cadena	'#4356e0'	Color de fondo del mensaje de usuario
`msgBubbleColorUser`	Cadena	'#fff'	Color del texto del mensaje de usuario.
`inputPlaceholder`	Cadena	'Mensaje'	El marcador de posición para la entrada de mensajes
`inputDisableBg`	Cadena	'#fff'	Color de fondo para la entrada deshabilitada, mezclado con `opacity: 0.2`
`inputDisablePlaceholder`	Cadena	nulo	Mensaje de marcador de posición para entrada deshabilitada

Componentes y eventos

Esta es la parte más importante que necesita saber, porque los necesita para integrar su API de bot. Eche un vistazo a mi archivo App.vue si necesita un ejemplo.

Eventos

Nombre	parámetros	Descripción
`init`		Dispara cada vez que se abre el tablero.
`msg-send`	valor (objeto)	Se dispara cuando el usuario presiona Enviar o selecciona una opción
`destroy`		Fuego cuando el tablero está cerrado.

Utilice msg-send para recibir el mensaje del usuario y activar la solicitud a la API del bot.

Eventos desencadenantes:

Nombre	Descripción
`botui-open`	Para abrir el tablero
`botui-close`	Para cerrar el tablero
`botui-toggle`	Para alternar abrir/cerrar el tablero

Componentes

Patrón común/datos de ejemplo:

 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' ,
  } ,
  ...
]

Lista de componentes:

Componentes actuales admitidos por este paquete, ruta a los archivos: components/MessageBubble/..

Texto único : type: 'text'

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

Opciones de botón : 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
    } ,
    ...
  ] ,
}

Otros componentes llegarán pronto...

Tragamonedas

Lista de espacios disponibles:

Nombre	Descripción
`header`	Encabezado del tablero, que contiene el nombre del Bot.
`actions`	La ranura al lado del botón Enviar en el mensaje de entrada. Puedes añadir acciones adicionales aquí (emoji, adjuntar,...)
`sendButton`	Ícono del botón Enviar, puedes cambiarlo a texto.
`bubbleButton`	Botón de burbuja que contiene BubbleIcon y CloseIcon de forma predeterminada.
`botTyping`	Burbuja de mensaje de escritura de bot que contiene un indicador de 3 puntos de forma predeterminada.

¿No has encontrado lo que necesitas?

Puede sobrescribir el CSS por nombre de clase. Cada tipo y estado tiene una clase separada que puede personalizar.

Solicitud de función : no dude en abrir un problema para solicitar una nueva función.

Desarrolladores / Construir

 # 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