i chatbot

Ich-Chatbot

Einfache und elegante Komponente zum Erstellen von Konversationsschnittstellen auf React. ??

Erste Schritte

Installation

 npm i i-chatbot --save

Grundlegende Verwendung

Komponente importieren

 import ChatBot, { ChatBotUtil } from 'i-chatbot'

Erstellen Sie Methoden, die Postback-Ereignisse von einem Chatbot verarbeiten. Es sollte ein Array von Nachrichtenobjekten zurückgeben, um auf die Aktion des Benutzers mit einem Rückruf zu antworten.

  getStarted () {
    return [
      ChatBotUtil.textMessage(['Hi!', 'Hey there!'].any()),
      ChatBotUtil.textMessage(['How is life?', 'What's up?'].any(),
        ChatBotUtil.makeReplyButton('Great!', this.intro))
    ]
  }

  intro () {
    return [
      ChatBotUtil.textMessage('That's good to hear!')
    ]
  }

Rendern Sie ChatBot mit einer Rückrufmethode für den Einstieg und einer Startschaltfläche.

 <ChatBot onGetStarted={this.getStarted}
         getStartedButton={ChatBotUtil.makeGetStartedButton('Get Started')} />

ChatBot

Requisiten

Stütze	Standard	Typ	Beschreibung
onGetStarted	-	Funktion	Erste Rückrufmethode zur Rückgabe erster Nachrichten
getStartedButton	-	Objekt	Parameter der Startschaltfläche

Methoden

startOver (Nachricht)

Setzt einen Chatstatus zurück und fügt ein Nachrichtenobjekt hinzu, wenn keine Schaltfläche „Starten“ festgelegt ist.

ChatBotUtil

Methoden

textMessage (Text, ...Aktionen)

Erstellen Sie ein Textnachrichtenobjekt.

Parameter:

Name	Typ	Beschreibung
Text	Zeichenfolge	Nachrichtentext
Aktionen	Objekt(e)	Objekt der Schnellantwortschaltfläche(n).

userTextMessage (Text)

Erstellen Sie das Textnachrichtenobjekt eines Benutzers.

Parameter:

Name	Typ	Beschreibung
Text	Zeichenfolge	Nachrichtentext

makeReplyButton (Titel)

Erstellen Sie eine Schaltfläche „Erste Schritte“.

Parameter:

Name	Typ	Beschreibung
Titel	Zeichenfolge	Titel

makeReplyButton (Titel, Postback)

Erstellen Sie eine Schnellantwort-Schaltfläche.

Parameter:

Name	Typ	Beschreibung
Titel	Zeichenfolge	Titel
Postback	Zeichenfolge	Postback-Wert

makeTextInputField (Titel, Postback)

Erstellen Sie ein Texteingabefeld.

Parameter:

Name	Typ	Beschreibung
schicken	Zeichenfolge	Titel der Schaltfläche „Senden“.
Platzhalter	Zeichenfolge	Platzhalter für Eingabefeld
Postback	Zeichenfolge	Postback-Wert

Stil

Als CSS-Präprozessor wird WENIGER verwendet. Kopieren und ändern Sie Stile aus demo/src/i-chatbot.less und importieren Sie sie dann in Ihre App.

Mit i-chatbot erstellt?

• Persönliche Website von Oleh Stasula
• Landingpage von Justin Case

Haben Sie mit i-chatbot etwas Cooles gebaut? Senden Sie eine Pull-Anfrage und fügen Sie sie dieser Liste hinzu!

Zu erledigen?

• Chat-Richtung von unten nach oben
• Bessere Eingabevalidierung
• Avatar-Platzhalter

Beitrag ?

Ihr Beitrag ist willkommen, egal wie groß oder klein!

Weitere Informationen zur Projektstruktur, Entwicklungsumgebung, Testsuite, Codestil usw. finden Sie im Beitragsleitfaden. Alle Versionsaktualisierungen werden im Änderungsprotokoll erwähnt.

Lizenz?

Die Bibliothek ist als Open Source unter den Bedingungen der MIT-Lizenz verfügbar.