react native chatbot

Reagieren Sie auf den nativen Chatbot

Eine native Chatbot-Komponente zum Erstellen von Konversations-Chats. Basierend auf React-Simple-Chatbot.

Erste Schritte

npm install react-native-chatbot --save

Verwendung

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

Dokumentation

Eigenschaften

Name	Typ	Standard	Beschreibung
avatarStyle	PropTypes.object		Das Stilobjekt, das zum Überschreiben des Avatar-Elements verwendet werden soll
avatarWrapperStyle	PropTypes.object		Das Stilobjekt, das zum Überschreiben des den Avatar umgebenden Elements verwendet werden soll
botAvatar	PropTypes.string	img	Bot-Bildquelle
botBubbleColor	PropTypes.string	#6E48AA	Farbe der Bot-Blase
botDelay	PropTypes.number	1000	Die Verzögerungszeit von Bot-Nachrichten
botFontColor	PropTypes.string	#fff	Bot-Schriftfarbe
bubbleStyle	PropTypes.object		Das Stilobjekt, das zum Überschreiben des Blasenelements verwendet werden soll
optionStyle	PropTypes.object		Das Stilobjekt, das zum Überschreiben des Optionscontainers verwendet werden soll
optionElementStyle	PropTypes.object		Das Stilobjekt, das zum Überschreiben des Optionselements verwendet werden soll
optionFontColor	PropTypes.string		Option Schriftfarbe
optionBubbleColor	PropTypes.string		Option Blasenfarbe
className	PropTypes.string		Fügen Sie dem Stammelement einen Klassennamen hinzu
contentStyle	PropTypes.object		Das Stilobjekt, das zum Überschreiben des Bildlaufelements verwendet werden soll
customDelay	PropTypes.number	1000	Die Verzögerungszeit benutzerdefinierter Nachrichten
customStyle	PropTypes.object		Das Stilobjekt, das zum Überschreiben des benutzerdefinierten Schrittelements verwendet werden soll
footerStyle	PropTypes.object		Das Stilobjekt, das zum Überschreiben des Fußzeilenelements verwendet werden soll
handleEnd({ renderedSteps, steps, values })	PropTypes.func		Die Rückruffunktion, wenn der Chat endet
headerComponent	PropTypes.element		Header-Komponente für den Chatbot
hideUserAvatar	PropTypes.bool	false	Bei „true“ wird der Benutzer-Avatar in allen Schritten ausgeblendet
inputStyle	PropTypes.object		Das Stilobjekt, das zum Überschreiben des Eingabeelements verwendet werden soll
keyboardVerticalOffset	PropTypes.number	ios ? 44 : 0	Vertikaler Versatz der Tastaturansicht. Überprüfen Sie „keyboardVerticalOffset“.
placeholder	PropTypes.string	Type the message ...	Platzhalter für die Chatbot-Eingabe
steps	PropTypes.array		Die Chatbot-Schritte werden angezeigt
style	PropTypes.object		Das Stilobjekt, das zum Überschreiben des Submit-Button-Elements verwendet werden soll
submitButtonStyle	PropTypes.object		Das Stilobjekt, das zum Überschreiben des Schaltflächenelements verwendet werden soll
submitButtonContent	PropTypes.string oder PropTypes.element	SEND	Die Zeichenfolge oder das Objekt, das zum Überschreiben des Schaltflächeninhalts verwendet werden soll
userAvatar	PropTypes.string	img	Benutzerbildquelle
userBubbleStyle	PropTypes.string	img	Das Stilobjekt, das zum Überschreiben des Blasenelements des Benutzers verwendet werden soll
userBubbleColor	PropTypes.string	#fff	Farbe der Benutzerblase
userDelay	PropTypes.number	1000	Die Verzögerungszeit von Benutzernachrichten
userFontColor	PropTypes.string	#4a4a4a	Benutzerschriftfarbe
scrollViewProps	PropTypes.object	#4a4a4a	Wird verwendet, um Scroll-Ansichts-Requisiten zu überschreiben

Schritte

Textschritt

Name	Typ	Erforderlich	Beschreibung
id	String / Number	true	Die Schritt-ID. Für jeden Schritt erforderlich
message	String / Function	true	Die Textnachricht. Bei einer Funktion werden ({ previousValue,steps}) Parameter empfangen
trigger	String / Number / Function	false	Die ID des nächsten auszulösenden Schritts. Bei einer Funktion werden ({Wert, Schritte}) Parameter empfangen
avatar	String	false	Der Avatar, der gerade in diesem Schritt angezeigt werden soll. Hinweis: Bei diesem Schritt muss es sich um einen Schritt handeln, bei dem der Avatar angezeigt wird
delay	Number	false	Legen Sie die Verzögerungszeit für die Anzeige der Nachricht fest
end	Boolean	false	Wenn „true“, bedeutet dies, dass dieser Schritt der letzte ist
inputAttributes	Object	Legen Sie beliebige Attribute für das Eingabefeld fest (keyboardType, autoCapitalize, autoComplete)
metadata	Object	Satz von Schlüssel-Wert-Paaren, die Sie einem Objekt zuordnen können. Dies kann nützlich sein, um zusätzliche Informationen über das Objekt in einem strukturierten Format zu speichern

Beispiel:

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

Benutzerschritt

Name	Typ	Erforderlich	Beschreibung
id	String / Number	true	Die Schritt-ID. Für jeden Schritt erforderlich
user	Boolean	true	Wenn „true“, bedeutet dies, dass Sie auf eine Benutzertypaktion warten
trigger	String / Number / Function	false	Die ID des nächsten auszulösenden Schritts. Bei einer Funktion werden ({Wert, Schritte}) Parameter empfangen
validator	String / Number	false	Wenn das Benutzerattribut wahr ist, können Sie eine Validierungsfunktion übergeben, um den vom Benutzer eingegebenen Text zu validieren
end	Boolean	false	Wenn „true“, bedeutet dies, dass dieser Schritt der letzte ist
inputAttributes	Object	Legen Sie beliebige Attribute für das Eingabefeld fest (keyboardType, autoCapitalize, autoComplete)
metadata	Object	Satz von Schlüssel-Wert-Paaren, die Sie einem Objekt zuordnen können. Dies kann nützlich sein, um zusätzliche Informationen über das Objekt in einem strukturierten Format zu speichern

Beispiel:

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

Schritt „Optionen“.

Name	Typ	Erforderlich	Beschreibung
id	String / Number	true	Die Schritt-ID. Für jeden Schritt erforderlich
options	Array	true	Array von Optionen mit den Eigenschaften { label, value, trigger }
end	Boolean	false	Wenn „true“, bedeutet dies, dass dieser Schritt der letzte ist
inputAttributes	Object	Legen Sie beliebige Attribute für das Eingabefeld fest (keyboardType, autoCapitalize, autoComplete)
metadata	Object	Satz von Schlüssel-Wert-Paaren, die Sie einem Objekt zuordnen können. Dies kann nützlich sein, um zusätzliche Informationen über das Objekt in einem strukturierten Format zu speichern

Beispiel:

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

Benutzerdefinierter Schritt

Name	Typ	Erforderlich	Beschreibung
id	String / Number	true	Die Schritt-ID. Für jeden Schritt erforderlich
component	Component	true	Benutzerdefinierte Reaktionskomponente
replace	Boolean	false	Wenn true, wird angegeben, dass die Komponente im nächsten Schritt ersetzt wird
waitAction	Boolean	false	Wenn „true“, bedeutet dies, dass Sie auf eine Aktion warten. Sie müssen die TriggerNextStep-Requisite in Ihrer Komponente verwenden, um die Aktion auszuführen
asMessage	Boolean	false	f true gibt an, dass die Komponente als Textschritt angezeigt wird
trigger	String / Number / Function	false	Die ID des nächsten auszulösenden Schritts. Bei einer Funktion werden ({Wert, Schritte}) Parameter empfangen
delay	Number	false	Stellen Sie die Verzögerungszeit ein, um die Komponente anzuzeigen
end	Boolean	false	Wenn „true“, bedeutet dies, dass dieser Schritt der letzte ist
inputAttributes	Object	Legen Sie beliebige Attribute für das Eingabefeld fest (keyboardType, autoCapitalize, autoComplete)
metadata	Object	Satz von Schlüssel-Wert-Paaren, die Sie einem Objekt zuordnen können. Dies kann nützlich sein, um zusätzliche Informationen über das Objekt in einem strukturierten Format zu speichern

Beispiel:

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

Aktualisierungsschritt

Name	Typ	Erforderlich	Beschreibung
id	String / Number	true	Die Schritt-ID. Für jeden Schritt erforderlich
update	String / Number	true	Die ID des nächsten zu aktualisierenden Schritts
trigger	String / Number / Function	false	Die ID des nächsten auszulösenden Schritts. Bei einer Funktion werden ({Wert, Schritte}) Parameter empfangen
inputAttributes	Object	Legen Sie beliebige Attribute für das Eingabefeld fest (keyboardType, autoCapitalize, autoComplete)
metadata	Object	Satz von Schlüssel-Wert-Paaren, die Sie einem Objekt zuordnen können. Dies kann nützlich sein, um zusätzliche Informationen über das Objekt in einem strukturierten Format zu speichern

Beispiel:

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

Benutzerdefinierte Komponente

Wenn Sie einen benutzerdefinierten Schritt deklarieren, müssen Sie eine benutzerdefinierte Reaktionskomponente angeben, die im Chat gerendert werden soll. Diese benutzerdefinierte Komponente erhält die folgenden Eigenschaften.

Name	Typ	Beschreibung
previousStep	PropTypes.object	Vorheriger Schritt gerendert
step	PropTypes.object	Aktueller Schritt gerendert
steps	PropTypes.object	Alle Schritte gerendert
triggerNextStep({ value, trigger })	PropTypes.func	Rückruffunktion zum Auslösen des nächsten Schritts, wenn das Benutzerattribut wahr ist. Optional können Sie ein Objekt mit einem Wert übergeben, der im Schritt festgelegt werden soll und den nächsten Schritt auslösen soll
inputAttributes	Object	Legen Sie beliebige Attribute für das Eingabefeld fest (keyboardType, autoCapitalize, autoComplete)
metadata	Object	Satz von Schlüssel-Wert-Paaren, die Sie einem Objekt zuordnen können. Dies kann nützlich sein, um zusätzliche Informationen über das Objekt in einem strukturierten Format zu speichern

So können Sie einen Beitrag leisten

Bitte überprüfen Sie den beitragenden Leitfaden

Autoren

Lucas Bassetti

Siehe auch die Liste der Mitwirkenden, die an diesem Projekt teilgenommen haben.

Spenden

Wenn Ihnen dieses Projekt gefallen hat, können Sie spenden, um es zu unterstützen ❤️

Lizenz

MIT · Lucas Bassetti