react beautiful chat

réagir-belle-chat

react-beautiful-chat fournit une fenêtre de discussion de type interphone qui peut être facilement incluse gratuitement dans n'importe quel projet. Il ne fournit aucune fonctionnalité de messagerie, uniquement le composant d'affichage.

react-beautiful-chat est une version améliorée de react-chat-window (que vous pouvez trouver ici)

Caractéristiques

• Personnalisable
• Indépendant du back-end
• Gratuit

Démo

Table des matières

• Installation
• Exemple
• Composants

Installation

 $ npm install react-beautiful-chat

Exemple

 import React , { Component } from 'react'
import { render } from 'react-dom'
import { Launcher } from '../../src'

class Demo extends Component {

  constructor ( ) {
    super ( ) ;
    this . state = {
      messageList : messageHistory
    } ;
  }

  _onMessageWasSent ( message ) {
    this . setState ( {
      messageList : [ ... this . state . messageList , message ]
    } )
  }

  _sendMessage ( text ) {
    if ( text . length > 0 ) {
      this . setState ( {
        messageList : [ ... this . state . messageList , {
          author : 'them' ,
          type : 'text' ,
          data : { text }
        } ]
      } )
    }
  }

  render ( ) {
    return ( < div >
      < Launcher
        agentProfile = { {
          teamName : 'react-beautiful-chat' ,
          imageUrl : 'https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png'
        } }
        onMessageWasSent = { this . _onMessageWasSent . bind ( this ) }
        messageList = { this . state . messageList }
        showEmoji
      />
    </ div > )
  }
}

Pour des exemples plus détaillés, consultez le dossier démo.

Composants

Lanceur

Launcher est le seul composant nécessaire pour utiliser React-beautiful-chat. Il réagira dynamiquement aux changements de messages. Tous les nouveaux messages doivent être ajoutés via un changement d'accessoires, comme indiqué dans l'exemple.

Accessoires du lanceur :

soutenir	taper	description
*Profil d'agent	objet	Représente l'agent du service client de votre produit ou service. Champs : teamName, imageUrl
onMessageWasSent	fonction (message)	Appelé lorsqu'un message est envoyé avec un objet message comme argument.
liste de messages	[message]	Un tableau d’objets de message à afficher sous forme de conversation.
afficherEmoji	bouffon	Un booléen indiquant s'il faut ou non afficher le bouton emoji
showFile	bouffon	Un booléen indiquant s'il faut ou non afficher le bouton de sélection de fichier
surKeyPress	fonction	Une fonction (userInput) => console.log(userInput) utilisée pour faire quelque chose avec l'entrée de l'utilisateur. La fonction est invoquée avec rebond à 300 ms
surSupprimer	fonction	Une fonction (msg) => console.log(msg) permettant de supprimer un message envoyé. Si ces accessoires sont définis, un bouton de suppression sera affiché dans le coin supérieur droit de chaque message envoyé par l'utilisateur à un partenaire. Vous pouvez définir n'importe quelle propriété sur l'objet message (une propriété id par exemple), puis utiliser cette propriété pour appeler une API backend afin de supprimer le message.

Objets de message

Les objets de message sont rendus différemment selon leur type. Actuellement, seuls les types de texte et d'emoji sont pris en charge. Chaque objet de message possède un champ author qui peut avoir la valeur « moi » ou « eux ».

 {
  author : 'them' ,
  type : 'text' ,
  data : {
    text : 'some text'
  }
}

{
  author : 'me' ,
  type : 'emoji' ,
  data : {
    code : 'someCode'
  }
}

{
  author : 'me' ,
  type : 'file' ,
  data : {
    name : 'file.mp3' ,
    url : 'https:123.rf/file.mp3'
  }
}