vue bot ui Télécharger - vue bot ui Téléchargement du code source

vue bot ui

Code Source AI

vent to toggle & close the board manually

Télécharger

Interface utilisateur de Vue Bot

Pour celui qui recherche une interface utilisateur de chatbot personnalisable.

Je construis pour mon projet privé, mais j'ai essayé d'apporter autant d'options que je pense que quelqu'un en a besoin, alors n'hésitez pas à l'utiliser.

La page de démonstration arrive bientôt.

interface utilisateur du bot vue

Installer

npm install vue-bot-ui

// or
yarn add vue-bot-ui

Usage

Importer et enregistrer le composant

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

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

Et utilisez-le :

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

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

Accessoires

Liste des accessoires disponibles à utiliser dans le composant :

Nom	Taper	Défaut	Description
`messages`	Tableau	[]	Requis . Données des messages
`options`	Objet	voir ci-dessous	Quelques options pour personnaliser l'interface utilisateur
`bot-typing`	Booléen	FAUX	Si c'est `true` , l'indicateur de saisie du bot s'affichera
`input-disable`	Booléen	FAUX	Si `true` , la saisie du message sera désactivée
`is-open`	Booléen	FAUX	Si `true` , le tableau s'ouvrira depuis l'initialisation
`open-delay`	Nombre	indéfini	Délai avant ouverture depuis init (en ms). Nécessite `is-open` soit `true`

Possibilités

Liste des options disponibles pour personnaliser l'interface utilisateur :

Nom	Taper	Défaut	Description
`botTitle`	Chaîne	'Chatbot'	Le nom du bot qui sera affiché sur l'en-tête du tableau
`colorScheme`	Chaîne	'#1b53d0'	Couleur d'arrière-plan du bouton à bulle et de l'en-tête du tableau
`textColor`	Chaîne	'#fff'	Couleur de l'icône du bouton bulle et du titre de l'en-tête du tableau
`bubbleBtnSize`	Nombre	56	Taille du bouton bulle (px)
`animation`	Booléen	vrai	Définir sur `false` pour désactiver l'animation de l'icône du bouton bulle et de l'affichage du tableau
`boardContentBg`	Chaîne	'#fff'	Couleur d'arrière-plan de la boîte de messages du tableau
`botAvatarSize`	Nombre	32	Taille de l'avatar du bot (px)
`botAvatarImg`	Chaîne	'http://placehold.it/200x200'	Image d'avatar
`msgBubbleBgBot`	Chaîne	'#f0f0f0'	Couleur d’arrière-plan du message du bot
`msgBubbleColorBot`	Chaîne	'#000'	Couleur du texte du message du Bot
`msgBubbleBgUser`	Chaîne	'#4356e0'	Couleur d'arrière-plan du message utilisateur
`msgBubbleColorUser`	Chaîne	'#fff'	Couleur du texte du message utilisateur
`inputPlaceholder`	Chaîne	'Message'	L'espace réservé pour la saisie du message
`inputDisableBg`	Chaîne	'#fff'	Couleur d'arrière-plan pour l'entrée désactivée, mélangée à `opacity: 0.2`
`inputDisablePlaceholder`	Chaîne	nul	Message d'espace réservé pour la saisie désactivée

Composants et événements

C'est la partie la plus importante que vous devez connaître, car vous en avez besoin pour intégrer l'API de votre bot. Jetez un œil à mon fichier App.vue si vous avez besoin d'un exemple.

Événements

Nom	Paramètres	Description
`init`		Tire à chaque fois que le tableau est ouvert
`msg-send`	valeur (Objet)	Se déclenche lorsque l'utilisateur appuie sur Envoyer ou sélectionne une option
`destroy`		Tire lorsque le tableau est fermé

Utilisez msg-send pour recevoir le message de l'utilisateur et déclencher une demande vers l'API du bot.

Événements déclencheurs :

Nom	Description
`botui-open`	Pour ouvrir le tableau
`botui-close`	Pour fermer le tableau
`botui-toggle`	Pour ouvrir/fermer le tableau

Composants

Modèle commun/exemple de données :

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

Liste des composants :

Composants actuels pris en charge par ce package, chemin d'accès aux fichiers : 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
    } ,
    ...
  ] ,
}

D'autres composants arriveront bientôt...

Machines à sous

Liste des créneaux disponibles :

Nom	Description
`header`	En-tête du tableau, qui contient le nom du robot.
`actions`	L'emplacement à côté du bouton Envoyer dans le message d'entrée. Vous pouvez ajouter des actions supplémentaires ici (emoji, pièce jointe,...)
`sendButton`	Icône du bouton Envoyer, vous pouvez la changer en texte.
`bubbleButton`	Bouton bulle qui contient BubbleIcon & CloseIcon par défaut.
`botTyping`	Bulle de message de saisie de robot contenant un indicateur à 3 points par défaut.

Vous n'avez pas trouvé ce dont vous avez besoin ?

Vous pouvez écraser le CSS par nom de classe. Chaque type et état possède une classe distincte que vous pouvez personnaliser.

Demande de fonctionnalité : N'hésitez pas à ouvrir un ticket pour demander une nouvelle fonctionnalité.

Développeurs / Construction

 # 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