react native chatbot

Chatbot natif de réaction

Un composant de chatbot natif React pour créer des discussions de conversation. Basé sur un chatbot réactif simple.

Commencer

npm install react-native-chatbot --save

Usage

 import ChatBot from 'react-native-chatbot' ;

const steps = [
  {
    id : '0' ,
    message : 'Welcome to react chatbot!' ,
    trigger : '1' ,
  } ,
  {
    id : '1' ,
    message : 'Bye!' ,
    end : true ,
  } ,
] ;

< ChatBot steps = { steps } / > 

Documentation

Propriétés

Nom	Taper	Défaut	Description
avatarStyle	PropTypes.object		L'objet de style à utiliser pour remplacer l'élément avatar
avatarWrapperStyle	PropTypes.object		L'objet de style à utiliser pour remplacer l'élément entourant l'avatar
botAvatar	PropTypes.string	img	Source de l'image du robot
botBubbleColor	PropTypes.string	#6E48AA	Couleur de la bulle du robot
botDelay	PropTypes.number	1000	Le temps de retard des messages du bot
botFontColor	PropTypes.string	#fff	Couleur de la police du robot
bubbleStyle	PropTypes.object		L'objet de style à utiliser pour remplacer l'élément bulle
optionStyle	PropTypes.object		L'objet de style à utiliser pour remplacer le conteneur d'options
optionElementStyle	PropTypes.object		L'objet de style à utiliser pour remplacer l'élément option
optionFontColor	PropTypes.string		Couleur de police en option
optionBubbleColor	PropTypes.string		Couleur de la bulle en option
className	PropTypes.string		Ajouter un nom de classe à l'élément racine
contentStyle	PropTypes.object		L'objet de style à utiliser pour remplacer l'élément de défilement
customDelay	PropTypes.number	1000	Le temps de retard des messages personnalisés
customStyle	PropTypes.object		L'objet de style à utiliser pour remplacer l'élément d'étape personnalisé
footerStyle	PropTypes.object		L'objet de style à utiliser pour remplacer l'élément de pied de page
handleEnd({ renderedSteps, steps, values })	PropTypes.func		La fonction de rappel à la fin du chat
headerComponent	PropTypes.element		Composant d'en-tête pour le chatbot
hideUserAvatar	PropTypes.bool	false	Si c'est vrai, l'avatar de l'utilisateur sera masqué à toutes les étapes
inputStyle	PropTypes.object		L'objet de style à utiliser pour remplacer l'élément d'entrée
keyboardVerticalOffset	PropTypes.number	ios ? 44 : 0	Décalage vertical de la vue du clavier. Vérifier le clavierVerticalOffset
placeholder	PropTypes.string	Type the message ...	Espace réservé pour la saisie du chatbot
steps	PropTypes.array		Les étapes du chatbot à afficher
style	PropTypes.object		L'objet de style à utiliser pour remplacer l'élément du bouton de soumission
submitButtonStyle	PropTypes.object		L'objet de style à utiliser pour remplacer l'élément bouton
submitButtonContent	PropTypes.string ou PropTypes.element	SEND	La chaîne ou l'objet à utiliser pour remplacer le contenu du bouton
userAvatar	PropTypes.string	img	Source de l'image de l'utilisateur
userBubbleStyle	PropTypes.string	img	L'objet de style à utiliser pour remplacer l'élément bulle de l'utilisateur
userBubbleColor	PropTypes.string	#fff	Couleur de la bulle utilisateur
userDelay	PropTypes.number	1000	Le temps de retard des messages utilisateur
userFontColor	PropTypes.string	#4a4a4a	Couleur de la police utilisateur
scrollViewProps	PropTypes.object	#4a4a4a	Utiliser pour remplacer les accessoires de la vue de défilement

Mesures

Étape de texte

Nom	Taper	Requis	Description
id	String / Number	true	L’identifiant de l’étape. Obligatoire pour toute étape
message	String / Function	true	Le message texte. Si fonction, il recevra ({ previousValue, steps }) les paramètres
trigger	String / Number / Function	false	L’identifiant de la prochaine étape à déclencher. Si fonction, il recevra ({value, steps}) paramètres
avatar	String	false	l'avatar à afficher juste à cette étape. Remarque : cette étape doit être une étape pour laquelle l'avatar apparaît
delay	Number	false	régler le délai d'affichage du message
end	Boolean	false	si vrai, indiquez que cette étape est la dernière
inputAttributes	Object	Définissez tous les attributs sur le champ de saisie (keyboardType, autoCapitalize, autoComplete)
metadata	Object	Ensemble de paires clé-valeur que vous pouvez attacher à un objet. Cela peut être utile pour stocker des informations supplémentaires sur l'objet dans un format structuré

Exemple:

 {
  id : '1' ,
  message : 'Hello World' ,
  trigger : '2' ,
} ,
{
  id : '2' ,
  message : ( { previousValue , steps } ) => 'Hello' ,
  end : true ,
} 

Étape utilisateur

Nom	Taper	Requis	Description
id	String / Number	true	L’identifiant de l’étape. Obligatoire pour toute étape
user	Boolean	true	si vrai, indiquez que vous attendez une action de type utilisateur
trigger	String / Number / Function	false	L’identifiant de la prochaine étape à déclencher. Si fonction, il recevra ({value, steps}) paramètres
validator	String / Number	false	si l'attribut utilisateur est vrai, vous pouvez passer une fonction de validation pour valider le texte saisi par l'utilisateur
end	Boolean	false	si vrai, indiquez que cette étape est la dernière
inputAttributes	Object	Définissez tous les attributs sur le champ de saisie (keyboardType, autoCapitalize, autoComplete)
metadata	Object	Ensemble de paires clé-valeur que vous pouvez attacher à un objet. Cela peut être utile pour stocker des informations supplémentaires sur l'objet dans un format structuré

Exemple:

 {
  id : '1' ,
  user : true ,
  inputAttributes : {
    keyboardType : 'email-address'
  } ,
  end : true ,
} 

Étape des options

Nom	Taper	Requis	Description
id	String / Number	true	L’identifiant de l’étape. Obligatoire pour toute étape
options	Array	true	Tableau d'options avec les propriétés { label, value, trigger }
end	Boolean	false	si vrai, indiquez que cette étape est la dernière
inputAttributes	Object	Définissez tous les attributs sur le champ de saisie (keyboardType, autoCapitalize, autoComplete)
metadata	Object	Ensemble de paires clé-valeur que vous pouvez attacher à un objet. Cela peut être utile pour stocker des informations supplémentaires sur l'objet dans un format structuré

Exemple:

 {
  id : '1' ,
  options : [
    { value : 1 , label : 'Number 1' , trigger : '3' } ,
    { value : 2 , label : 'Number 2' , trigger : '2' } ,
    { value : 3 , label : 'Number 3' , trigger : '2' } ,
  ] ,
} 

Étape personnalisée

Nom	Taper	Requis	Description
id	String / Number	true	L’identifiant de l’étape. Obligatoire pour toute étape
component	Component	true	Composant de réaction personnalisé
replace	Boolean	false	si vrai, indique que le composant sera remplacé à l'étape suivante
waitAction	Boolean	false	si c'est vrai, indiquez que vous attendez une action. Vous devez utiliser la prop triggerNextStep dans votre composant pour exécuter l'action
asMessage	Boolean	false	f true indique que le composant sera affiché sous forme d'étape de texte
trigger	String / Number / Function	false	L’identifiant de la prochaine étape à déclencher. Si fonction, il recevra ({value, steps}) paramètres
delay	Number	false	régler le temps de retard pour que le composant soit affiché
end	Boolean	false	si vrai, indiquez que cette étape est la dernière
inputAttributes	Object	Définissez tous les attributs sur le champ de saisie (keyboardType, autoCapitalize, autoComplete)
metadata	Object	Ensemble de paires clé-valeur que vous pouvez attacher à un objet. Cela peut être utile pour stocker des informations supplémentaires sur l'objet dans un format structuré

Exemple:

 {
  id : '1' ,
  component : < CustomComponent / >
  trigger : '2'
} 

Étape de mise à jour

Nom	Taper	Requis	Description
id	String / Number	true	L’identifiant de l’étape. Obligatoire pour toute étape
update	String / Number	true	L'identifiant de la prochaine étape à mettre à jour
trigger	String / Number / Function	false	L’identifiant de la prochaine étape à déclencher. Si fonction, il recevra ({value, steps}) paramètres
inputAttributes	Object	Définissez tous les attributs sur le champ de saisie (keyboardType, autoCapitalize, autoComplete)
metadata	Object	Ensemble de paires clé-valeur que vous pouvez attacher à un objet. Cela peut être utile pour stocker des informations supplémentaires sur l'objet dans un format structuré

Exemple:

 {
  id : '1' ,
  options : [
    { value : 1 , label : 'Number 1' , trigger : '3' } ,
    { value : 2 , label : 'Number 2' , trigger : '2' } ,
    { value : 3 , label : 'Number 3' , trigger : '2' } ,
  ] ,
} 

Composant personnalisé

Lorsque vous déclarez une étape personnalisée, vous devez indiquer un composant React personnalisé à restituer dans le chat. Ce composant personnalisé recevra les propriétés suivantes.

Nom	Taper	Description
previousStep	PropTypes.object	Étape précédente rendue
step	PropTypes.object	Étape actuelle rendue
steps	PropTypes.object	Toutes les étapes rendues
triggerNextStep({ value, trigger })	PropTypes.func	Fonction de rappel pour déclencher l'étape suivante lorsque l'attribut utilisateur est vrai. En option, vous pouvez transmettre un objet avec une valeur à définir dans l'étape et l'étape suivante à déclencher
inputAttributes	Object	Définissez tous les attributs sur le champ de saisie (keyboardType, autoCapitalize, autoComplete)
metadata	Object	Ensemble de paires clé-valeur que vous pouvez attacher à un objet. Cela peut être utile pour stocker des informations supplémentaires sur l'objet dans un format structuré

Comment contribuer

Veuillez consulter le guide de contribution

Auteurs

Lucas Bassetti

Voir aussi la liste des contributeurs ayant participé à ce projet.

Faire un don

Si vous avez aimé ce projet, vous pouvez faire un don pour le soutenir ❤️

Licence

MIT · Lucas Bassetti