react chat widget

react chat widget

Merkmale

• Benutzeroberfläche für Nur-Text-Nachrichten
• Snippet-Stil für Links (vorerst nur als Antworten)
• Vollständig anpassbar
• Einfach zu bedienen

Installation

npm

npm install --save react-chat-widget

Garn

yarn add react-chat-widget

Verwendung

1- Fügen Sie die Widget-Komponente zu Ihrer Stammkomponente hinzu

 import React from 'react' ;
import { Widget } from 'react-chat-widget' ;

import 'react-chat-widget/lib/styles.css' ;

function App ( ) {
  return (
    < div className = "App" >
      < Widget />
    </ div >
  ) ;
}

export default App ;

2- Die einzige erforderliche Requisite, die Sie verwenden müssen, ist handleNewUserMessage , die die Eingaben vom Benutzer empfängt.

 import React from 'react' ;
import { Widget } from 'react-chat-widget' ;

import 'react-chat-widget/lib/styles.css' ;

function App ( ) {
  const handleNewUserMessage = ( newMessage ) => {
    console . log ( `New message incoming! ${ newMessage } ` ) ;
    // Now send the message throught the backend API
  } ;

  return (
    < div className = "App" >
      < Widget
        handleNewUserMessage = { handleNewUserMessage }
      />
    </ div >
  ) ;
}

export default App ;

3- Importieren Sie die Methoden, um Nachrichten im Widget hinzuzufügen. (Siehe Nachrichten)

 import React from 'react' ;
import { Widget , addResponseMessage } from 'react-chat-widget' ;

import 'react-chat-widget/lib/styles.css' ;

function App ( ) {
  useEffect ( ( ) => {
    addResponseMessage ( 'Welcome to this awesome chat!' ) ;
  } , [ ] ) ;

  const handleNewUserMessage = ( newMessage ) => {
    console . log ( `New message incoming! ${ newMessage } ` ) ;
    // Now send the message throught the backend API
    addResponseMessage ( response ) ;
  } ;

  return (
    < div className = "App" >
      < Widget
        handleNewUserMessage = { handleNewUserMessage }
      />
    </ div >
  ) ;
}

export default App ;

4- Passen Sie das Widget an Ihr App-Design an! Sie können beide Requisiten hinzufügen, um den Titel des Widgets und den Avatar zu verwalten, den es verwenden wird. Selbstverständlich können Sie die Stile des Widgets im CSS jederzeit ändern

 import React , { useEffect } from 'react' ;
import { Widget , addResponseMessage } from 'react-chat-widget' ;

import 'react-chat-widget/lib/styles.css' ;

import logo from './logo.svg' ;

function App ( ) {
  useEffect ( ( ) => {
    addResponseMessage ( 'Welcome to this **awesome** chat!' ) ;
  } , [ ] ) ;

  const handleNewUserMessage = ( newMessage ) => {
    console . log ( `New message incoming! ${ newMessage } ` ) ;
    // Now send the message throught the backend API
  } ;

    return (
      < div className = "App" >
        < Widget
          handleNewUserMessage = { handleNewUserMessage }
          profileAvatar = { logo }
          title = "My new awesome title"
          subtitle = "And my cool subtitle"
        />
      </ div >
    ) ;
}

export default App ; 

API

Requisiten

Stütze	Typ	erforderlich	Standardwert	Beschreibung
handleNewUserMessage	(...args: any[]) => any	JA		Funktion zur Verarbeitung der Benutzereingaben. Sie erhält bei der Übermittlung die vollständige Textnachricht
Titel	Zeichenfolge	NEIN	'Willkommen'	Titel des Widgets
Untertitel	Zeichenfolge	NEIN	„Dies ist Ihr Chat-Untertitel“	Untertitel des Widgets
senderPlaceHolder	Zeichenfolge	NEIN	„Geben Sie eine Nachricht ein...“	Der Platzhalter der Nachrichteneingabe
ProfilAvatar	Zeichenfolge	NEIN		Das Profilbild, das in den Antworten festgelegt wird
ProfilClientAvatar	Zeichenfolge	NEIN		Das Profilbild, das in den Client-Nachrichten festgelegt wird
TitelAvatar	Zeichenfolge	NEIN		Das Bild, das neben dem Chattitel angezeigt wird
showCloseButton	Boolescher Wert	NEIN	FALSCH	Blenden Sie die Schließen-Schaltfläche im Vollbildmodus ein oder aus
Vollbildmodus	Boolescher Wert	NEIN	FALSCH	Ermöglichen Sie die Verwendung des Vollbildmodus im Volldesktopmodus
Autofokus	Boolescher Wert	NEIN	WAHR	Ob Autofokus oder nicht, die Benutzereingabe
Launcher	(handleToggle) => ElementType	NEIN		Benutzerdefinierte Launcher-Komponente, die anstelle der Standardkomponente verwendet werden soll
handleQuickButtonClicked	(...args: any[]) => any	NEIN		Funktion zur Handhabung des Benutzers, der auf eine Schnellschaltfläche klickt, erhält den „Wert“, wenn er darauf klickt.
showTimeStamp	Boolescher Wert	NEIN	WAHR	Zeitstempel für Nachrichten anzeigen
chatId	Zeichenfolge	NEIN	'rcw-chat-container'	Chat-Container-ID für a11y
handleToggle	(...args: any[]) => any	NEIN	'rcw-chat-container'	Funktion, die verarbeitet wird, wenn das Widget umgeschaltet wird, erhält den Umschaltstatus
LauncherOpenLabel	Zeichenfolge	NEIN	„Chat öffnen“	Alt-Wert für den Launcher, wenn er geschlossen ist
launcherCloseLabel	Zeichenfolge	NEIN	„Chat schließen“	Alt-Wert für den Launcher, wenn er geöffnet ist
launcherOpenImg	Zeichenfolge	NEIN	''	Lokale oder Remote-Bild-URL. Wenn nicht angegeben, wird das Standardbild angezeigt
launcherCloseImg	Zeichenfolge	NEIN	''	Lokale oder Remote-Bild-URL. Wenn nicht angegeben, wird das Standardbild angezeigt
sendButtonAlt	Zeichenfolge	NEIN	'Schicken'	Senden Sie die Alt-Taste für verschiedene Zwecke
handleTextInputChange	(Ereignis) => beliebig	NEIN		Requisite, die bei Eingabeänderung ausgelöst wird
handleSubmit	(Ereignis) => beliebig	NEIN		Requisite, die beim Absenden einer Nachricht ausgelöst wird und zur benutzerdefinierten Validierung verwendet wird
veränderbar	Boolescher Wert	NEIN	FALSCH	Requisite, die es ermöglicht, die Größe des Widgets durch Ziehen am linken Rand zu ändern
Emojis	Boolescher Wert	NEIN	FALSCH	Emoji-Auswahl aktivieren
showBadge	Boolescher Wert	NEIN	WAHR	Requisite, mit der das Abzeichen für ungelesene Nachrichten angezeigt oder ausgeblendet werden kann

Stile

Um die Stile zu ändern, die das Widget haben soll, überschreiben Sie einfach die CSS-Klassen, die sie in den Containern einschließen, und fügen Sie ihnen Ihren eigenen Stil hinzu! Allen Klassen wird rcw- vorangestellt, sodass sie Ihre anderen Klassen nicht überschreiben, falls Sie diese nicht haben. Zum Überschreiben können Sie beispielsweise Folgendes tun:

. rcw-conversation-container > . rcw-header {
  background-color : red;
}

. rcw-message > . rcw-response {
  background-color : black;
  color : white;
}

Auf diese Weise können Sie das JS sauber lassen und die Stile im CSS beibehalten.

Nachrichten

Ab Version 3.0 verfügen Nachrichten nun über eine optionale ID, die bei der Erstellung hinzugefügt werden kann. Wenn Sie neue Nachrichten hinzufügen möchten, können Sie die folgenden Methoden verwenden:

• addResponseMessage

  • Parameter:
    • Text: Zeichenfolge (unterstützt Markdown)
    • id: string (optional)
  • Methode zum Hinzufügen einer neuen Nachricht, die als Antwort auf eine Benutzereingabe geschrieben wurde.

• addUserMessage

  • Parameter:
    • Text: Zeichenfolge (unterstützt Markdown)
    • id: string (optional)
  • Diese Methode fügt eine neue Nachricht hinzu, die als Benutzer geschrieben wurde. Beachten Sie, dass dadurch die Requisite handleNewUserMessage() nicht ausgelöst wird.

• addLinkSnippet

  • Parameter:
    • Link
  • Methode zum Hinzufügen eines Link-Snippets. Sie müssen dieser Methode ein Link-Objekt bereitstellen, das folgende Form haben muss:

     {
      title : 'My awesome link' ,
      link : 'https://github.com/Wolox/react-chat-widget' ,
      target : '_blank'
    }

  • Standardmäßig ist target _blank , wodurch der Link in einem neuen Fenster geöffnet wird.

• renderCustomComponent

  • Parameter:
    • Komponente: Zu rendernde Komponente,
    • props: Requisiten, die die Komponente benötigt,
    • showAvatar: boolean, Standardwert: false; Die Komponente wird wie die Nachrichten mit dem Avatar gerendert
  • Methode zum Rendern einer benutzerdefinierten Komponente im Nachrichtencontainer. Mit dieser Methode können Sie jede beliebige Komponente hinzufügen, die das Widget haben soll.

• setQuickButtons

  • Parameter:
    • Buttons: Ein Array von Objekten mit den Schlüsseln label und value

Markdown wird sowohl für die Antworten als auch für Benutzernachrichten unterstützt.

Widget-Verhalten

Sie können auch bestimmte Aktionen des Widgets steuern:

• toggleWidget

  • Parameter: Keine Parameter erwartet
  • Bei dieser Methode kann das Widget nach Belieben umgeschaltet werden, ohne dass das Klickereignis im Launcher ausgelöst werden muss

• toggleInputDisabled

  • Parameter: Keine Parameter erwartet
  • Methode zum Umschalten der Verfügbarkeit der Nachrichteneingabe für den Benutzer zum Schreiben

• toggleMsgLoader

  • Schaltet den Nachrichtenlader um, der im Stil „Eintippen“ angezeigt wird.

• deleteMessages *

  • Parameter:
    • count: Zu löschende Nachrichten, gezählt vom letzten zum ersten
    • ID: Nachrichten-ID, die gelöscht werden soll
  • Löschen Sie Nachrichten, die entweder eine ID haben, die Sie zuvor mit addResponseMessage festgelegt haben, oder löschen Sie sie basierend auf der Position oder beides. Beispielsweise löscht deleteMessages(2, 'myId') die Nachricht mit der ID myId und die vorherige Nachricht.

• markAllAsRead

  • Markiert alle Antwortnachrichten als gelesen. Die Benutzernachrichten verfügen nicht über die Eigenschaft „Lesen/Ungelesen“.

• setBadgeCount

  • Parameter:
    • zählen: Zahl
  • Ab Version 3.0 wird die badge Requisite so geändert, dass sie über das Widget verwaltet werden kann. Bei dieser Methode wird die Ausweisnummer manuell festgelegt.

Widget-Komponenten

Benutzerdefinierter Launcher

Sie können eine benutzerdefinierte Komponente für den Launcher verwenden. Wenn Sie eine benötigen, die nicht die Standardkomponente ist, verwenden Sie einfach die Launcher- Requisite:

 import React from 'react' ;
import { Widget } from 'react-chat-widget' ;

...

function MyApp ( ) {
  const getCustomLauncher = ( handleToggle ) =>
    < button onClick = { handleToggle } > This is my launcher component! </ button >

  return (
    < Widget
      . . .
      launcher = { handleToggle => getCustomLauncher ( handleToggle ) }
    />
  )
}

getCustomLauncher() ist eine Methode, die die Launcher Komponente zurückgibt, wie im Beispiel gezeigt. Standardmäßig erhält die von dieser Requisite übergebene Funktion den handleToggle Parameter, der die Methode ist, die das Widget umschaltet.

Um

Dieses Projekt wird von Martín Callegari betreut und wurde von Wolox geschrieben.