react chat widget Télécharger - react chat widget Téléchargement du code source

react chat widget

Code Source AI

v3.1.3

Télécharger

react chat widget

FEArmée

Caractéristiques

Interface utilisateur de message en texte brut
Style d'extrait pour les liens (uniquement comme réponses pour l'instant)
Entièrement personnalisable
Facile à utiliser

démonstration

Installation

npm

npm install --save react-chat-widget

fil

yarn add react-chat-widget

Usage

1- Ajoutez le composant Widget à votre composant racine

 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- Le seul accessoire requis que vous devez utiliser est le handleNewUserMessage , qui recevra l'entrée de l'utilisateur.

 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- Importez les méthodes permettant d'ajouter des messages dans le widget. (Voir messages)

 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- Personnalisez le widget pour qu'il corresponde au design de votre application ! Vous pouvez ajouter les deux accessoires pour gérer le titre du widget et l'avatar qu'il utilisera. Bien sûr, n'hésitez pas à modifier les styles du widget dans le CSS

 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

Accessoires

soutenir	taper	requis	valeur par défaut	description
handleNewUserMessage	(...args : any[]) => any	OUI		Fonction permettant de gérer les entrées de l'utilisateur, recevra le message en texte intégral une fois soumis
titre	chaîne	NON	'Accueillir'	Titre du widget
sous-titre	chaîne	NON	"Ceci est le sous-titre de votre chat"	Sous-titre du widget
expéditeurPlaceHolder	chaîne	NON	'Tapez un message...'	L'espace réservé de la saisie du message
profilAvatar	chaîne	NON		L'image de profil qui sera définie sur les réponses
profilClientAvatar	chaîne	NON		L'image de profil qui sera définie sur les messages du client
titreAvatar	chaîne	NON		L'image qui sera affichée à côté du titre du chat
showCloseButton	booléen	NON	FAUX	Afficher ou masquer le bouton de fermeture en mode plein écran
Mode plein écran	booléen	NON	FAUX	Autoriser l'utilisation du plein écran en mode bureau complet
mise au point automatique	booléen	NON	vrai	Autofocus ou non la saisie de l'utilisateur
lanceur	(handleToggle) => Type d'élément	NON		Composant de lancement personnalisé à utiliser à la place de celui par défaut
handleQuickButtonClicked	(...args : any[]) => any	NON		Fonction permettant de gérer l'utilisateur cliquant sur un bouton rapide, recevra la « valeur » lorsqu'il cliquera.
showTimeStamp	booléen	NON	vrai	Afficher l'horodatage sur les messages
ID de chat	chaîne	NON	'rcw-chat-conteneur'	Identifiant du conteneur de discussion pour a11y
poignéeToggle	(...args : any[]) => any	NON	'rcw-chat-conteneur'	La fonction à gérer lorsque le widget est basculé recevra le statut de bascule
lanceurOpenLabel	chaîne	NON	'Ouvrir le chat'	Valeur Alt pour le lanceur lorsqu'il est fermé
lanceurCloseLabel	chaîne	NON	« Fermer le chat »	Valeur Alt pour le lanceur lorsqu'il est ouvert
lanceurOpenImg	chaîne	NON	''	URL de l'image locale ou distante, si elle n'est pas fournie, elle affichera l'image par défaut
lanceurFermerImg	chaîne	NON	''	URL de l'image locale ou distante, si elle n'est pas fournie, elle affichera l'image par défaut
envoyerBoutonAlt	chaîne	NON	'Envoyer'	Envoyer le bouton alt à des fins quotidiennes
handleTextInputChange	(événement) => n'importe quel	NON		Prop qui se déclenche lors du changement d'entrée
handleEnvoyer	(événement) => n'importe quel	NON		Prop qui se déclenche lorsqu'un message est soumis, utilisé pour la validation personnalisée
redimensionnable	booléen	NON	FAUX	Prop qui permet de redimensionner le widget en faisant glisser sa bordure gauche
émojis	booléen	NON	FAUX	activer le sélecteur d'emoji
afficherBadge	booléen	NON	vrai	Prop qui permet d'afficher ou de masquer le badge de message non lu

Styles

Pour modifier les styles dont vous avez besoin pour le widget, remplacez simplement les classes CSS qui les enveloppent dans les conteneurs et ajoutez-y votre propre style ! Toutes les classes portent le préfixe rcw- afin qu'elles ne remplacent pas vos autres classes au cas où vous ne les auriez pas. Pour remplacer, vous pouvez faire, par exemple :

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

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

De cette façon, vous pouvez laisser le JS propre et conserver les styles dans le CSS.

Messages

Depuis la version 3.0, les messages ont désormais un identifiant facultatif qui peut être ajouté lors de la création. Si vous souhaitez ajouter de nouveaux messages, vous pouvez utiliser les méthodes suivantes :

addResponseMessage
- paramètres :
  - texte : chaîne (prend en charge la démarque)
  - identifiant : chaîne (facultatif)
- Méthode pour ajouter un nouveau message écrit en réponse à une entrée utilisateur.
ajouter un message utilisateur
- paramètres :
  - texte : chaîne (prend en charge la démarque)
  - identifiant : chaîne (facultatif)
- Cette méthode ajoutera un nouveau message écrit en tant qu'utilisateur. Gardez à l’esprit que cela ne déclenchera pas le prop handleNewUserMessage()
addLinkSnippet
- paramètres :
  - lien
- Méthode pour ajouter un extrait de lien. Vous devez fournir à cette méthode un objet lien, qui doit avoir la forme de :
```
 {
  title : 'My awesome link' ,
  link : 'https://github.com/Wolox/react-chat-widget' ,
  target : '_blank'
}
```
- Par défaut, la valeur target est _blank , ce qui ouvrira le lien dans une nouvelle fenêtre.
renderCustomComponent
- paramètres :
  - composant : composant à restituer,
  - props : accessoires dont le composant a besoin,
  - showAvatar : booléen, valeur par défaut : false ; le composant sera rendu avec l'avatar comme les messages
- Méthode pour restituer un composant personnalisé à l’intérieur du conteneur de messages. Avec cette méthode, vous pouvez ajouter le composant dont vous avez besoin pour le widget.
setQuickButtons
- paramètres :
  - boutons : un tableau d'objets avec l' label et value des clés

Markdown est pris en charge à la fois pour les réponses et les messages utilisateur.

Comportement des widgets

Vous pouvez également contrôler certaines actions du widget :

basculeWidget
- params : aucun paramètre attendu
- Cette méthode consiste à basculer le widget à volonté sans avoir besoin de déclencher l'événement de clic sur le lanceur
toggleInputDisabled
- params : aucun paramètre attendu
- Méthode pour basculer la disponibilité de l'entrée de message sur laquelle l'utilisateur peut écrire
basculerMsgLoader
- Bascule le chargeur de messages qui s'affiche sous la forme d'un style "saisie...".
supprimerMessages *
- paramètres :
  - count : messages à supprimer en comptant du dernier au premier
  - id : identifiant du message à supprimer
- Supprimez les messages qui ont un identifiant que vous avez précédemment défini avec addResponseMessage ou supprimez en fonction de la position ou des deux. Par exemple, deleteMessages(2, 'myId') supprimera le message portant l'identifiant myId et le message précédent.
marquerToutCommeLu
- Marque tous les messages de réponse comme lus. Les messages utilisateur n'ont pas la propriété lu/non lu.
setBadgeCount
- paramètres :
  - compte : nombre
- Depuis la version 3.0, l'accessoire badge est modifié pour être géré depuis le widget. Cette méthode consiste à définir manuellement le numéro de badge.

Composants du widget

Lanceur personnalisé

Vous pouvez utiliser un composant personnalisé pour le lanceur si vous en avez besoin d'un autre que celui par défaut, utilisez simplement l'accessoire du lanceur :

 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() est une méthode qui renverra le composant Launcher comme le montre l'exemple. Par défaut, la fonction passée par cet accessoire recevra le paramètre handleToggle qui est la méthode qui fera basculer le widget.