Download do vue bot ui - download do código-fonte do vue bot ui

vue bot ui

Código-Fonte de IA

vent to toggle & close the board manually

Baixar

IU do bot Vue

Para quem está encontrando uma UI de chatbot personalizável.

Eu construo para meu projeto particular, mas tentei trazer quantas opções acho que alguém precisa, então fique à vontade para usar.

A página de demonstração estará disponível em breve.

IU do bot vue

Instalar

npm install vue-bot-ui

// or
yarn add vue-bot-ui

Uso

Importe e registre o componente

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

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

E use-o:

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

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

Adereços

Lista de props disponíveis para usar no componente:

Nome	Tipo	Padrão	Descrição
`messages`	Variedade	[]	Obrigatório . Dados de mensagens
`options`	Objeto	Veja abaixo	Algumas opções para personalizar a UI
`bot-typing`	Booleano	falso	Se `true` , o indicador de digitação do bot mostrará
`input-disable`	Booleano	falso	Se `true` , a entrada de mensagens será desativada
`is-open`	Booleano	falso	Se `true` , o quadro será aberto a partir do init
`open-delay`	Número	indefinido	Atraso antes de abrir a partir do init (em ms). Requer `is-open` para ser `true`

Opções

Lista de opções disponíveis para personalizar a IU:

Nome	Tipo	Padrão	Descrição
`botTitle`	Corda	'Bate-papo'	O nome do bot que será mostrado no cabeçalho do quadro
`colorScheme`	Corda	'#1b53d0'	Cor de fundo do botão de bolha e do cabeçalho do quadro
`textColor`	Corda	'#fff'	Cor do ícone do botão de bolha e título do cabeçalho do quadro
`bubbleBtnSize`	Número	56	Tamanho do botão de bolha (px)
`animation`	Booleano	verdadeiro	Defina como `false` para desativar a animação do ícone do botão de bolha e da exibição do quadro
`boardContentBg`	Corda	'#fff'	Cor de fundo da caixa de mensagens do quadro
`botAvatarSize`	Número	32	Tamanho do avatar do bot (px)
`botAvatarImg`	Corda	'http://placehold.it/200x200'	Imagem do avatar
`msgBubbleBgBot`	Corda	'#f0f0f0'	Cor de fundo da mensagem do Bot
`msgBubbleColorBot`	Corda	'#000'	Cor do texto da mensagem do Bot
`msgBubbleBgUser`	Corda	'#4356e0'	Cor de fundo da mensagem do usuário
`msgBubbleColorUser`	Corda	'#fff'	Cor do texto da mensagem do usuário
`inputPlaceholder`	Corda	'Mensagem'	O espaço reservado para entrada de mensagem
`inputDisableBg`	Corda	'#fff'	Cor de fundo para a entrada desabilitada, misturada com `opacity: 0.2`
`inputDisablePlaceholder`	Corda	nulo	Mensagem de espaço reservado para entrada desabilitada

Componentes e eventos

Esta é a parte mais importante que você precisa saber, porque você precisa deles para integrar a API do seu bot. Dê uma olhada no meu arquivo App.vue se precisar de um exemplo.

Eventos

Nome	Parâmetros	Descrição
`init`		Atire sempre que o tabuleiro for aberto
`msg-send`	valor (Objeto)	Disparar quando o usuário clicar em Enviar ou selecionar uma opção
`destroy`		Disparar quando a placa estiver fechada

Use msg-send para obter a mensagem do usuário e acionar a solicitação para a API do bot.

Eventos de gatilho:

Nome	Descrição
`botui-open`	Para abrir o quadro
`botui-close`	Para fechar o quadro
`botui-toggle`	Para abrir/fechar o quadro

Componentes

Padrão comum/dados de exemplo:

 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 atuais suportados por este pacote, caminho para arquivos: 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
    } ,
    ...
  ] ,
}

Outros componentes chegarão em breve...

Caça-níqueis

Lista de vagas disponíveis:

Nome	Descrição
`header`	Cabeçalho do quadro, que contém o nome do bot.
`actions`	O slot ao lado do botão Enviar na mensagem de entrada. Você pode adicionar ações extras aqui (emoji, anexar,...)
`sendButton`	Ícone do botão Enviar, você pode alterá-lo para texto.
`bubbleButton`	Botão de bolha que contém BubbleIcon e CloseIcon como padrão.
`botTyping`	Bolha de mensagem de digitação de bot que contém indicador de 3 pontos como padrão.

Não encontrou o que você precisa?

Você pode substituir o CSS pelo nome da classe. Cada tipo e estado possui uma classe separada para você personalizar.

Solicitação de recurso : sinta-se à vontade para abrir um problema para solicitar um novo recurso.

Desenvolvedores/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