react chat window

react-chat-fenêtre

react-chat-window fournit une fenêtre de chat de type interphone qui peut être incluse facilement dans n'importe quel projet gratuitement. Il ne fournit aucune installation de messagerie, seulement le composant de vue.

Caractéristiques

• Personnalisable
• Agnostique backend
• Gratuit

Démo

Table des matières

• Installation
• Exemple
• Composants

Installation

 $ npm install react-chat-window

Exemple

 import React , { Component } from 'react'
import { Launcher } from 'react-chat-window'

class Demo extends Component {

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

  _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-chat-window' ,
          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 de démonstration.

Composants

Lanceur

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

Accessoires de lanceur:

soutenir	taper	requis	description
agentprofile	objet	Oui	Représente l'agent de service client de votre produit ou de votre service. Fields: ImageUrl (String), TeamName (String).
faire un clic	fonction	Oui	Intercepter l'événement de clic sur le lanceur. Aucun argument envoyé lorsque la fonction est appelée.
isopen	booléen	Oui	Forcer l'état ouvert / ferme de la fenêtre de chat. Si cela n'est pas défini, il s'ouvrira et se fermera lorsqu'il cliquera sur.
Messagelist	[message]	Oui	Un tableau d'objets de message à rendre comme une conversation.
muet	booléen	Non	Ne jouez pas le son pour les messages entrants. Par défaut est false .
NewMessagesCount	nombre	Non	Le nombre de nouveaux messages. Si plus de 0, ce numéro sera affiché dans un badge sur le lanceur. Par défaut est 0 .
sur le point de vue	Fonction (FileList)	Non	Appelé après le fichier a été sélectionné parmi le dialogue dans la fenêtre de chat.
OnMessagewassent	fonction (message)	Oui	Appelé lorsqu'un message est envoyé, avec un objet de message comme argument.
showemoji	booléen	Non	S'il faut afficher ou non le bouton des emoji dans la barre d'entrée. Par défaut est true .

Messages objets

Les objets de message sont rendus différemment en fonction de leur type. Actuellement, seuls les types de texte, de fichiers et d'emoji sont pris en charge. Chaque objet de message a 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 : {
    url : 'somefile.mp3' ,
    fileName : 'Any old name'
  }
}

Objets de profil d'agent

Ressemble à ceci:

 {
  imageUrl : 'https://somewhere.on/the_web.png' ,
  teamName : 'Da best'
}