react beautiful chat

React-Beautiful-Chat

react-beautiful-chat bietet ein Intercom-ähnliches Chat-Fenster, das einfach und kostenlos in jedes Projekt eingebunden werden kann. Es bietet keine Messaging-Funktionen, sondern nur die Ansichtskomponente.

react-beautiful-chat ist eine verbesserte Version von react-chat-window (die Sie hier finden)

Merkmale

• Anpassbar
• Backend-Agnostiker
• Frei

Demo

Inhaltsverzeichnis

• Installation
• Beispiel
• Komponenten

Installation

 $ npm install react-beautiful-chat

Beispiel

 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 > )
  }
}

Ausführlichere Beispiele finden Sie im Demo-Ordner.

Komponenten

Launcher

Launcher ist die einzige Komponente, die zur Verwendung von React-Beautiful-Chat benötigt wird. Es reagiert dynamisch auf Änderungen in Nachrichten. Alle neuen Nachrichten müssen über eine Änderung der Requisiten hinzugefügt werden, wie im Beispiel gezeigt.

Launcher-Requisiten:

Stütze	Typ	Beschreibung
*agentProfile	Objekt	Stellt den Kundendienstmitarbeiter Ihres Produkts oder Ihrer Dienstleistung dar. Felder: teamName, imageUrl
onMessageWasSent	Funktion (Nachricht)	Wird aufgerufen, wenn eine Nachricht mit einem Nachrichtenobjekt als Argument gesendet wird.
Nachrichtenliste	[Nachricht]	Ein Array von Nachrichtenobjekten, die als Konversation gerendert werden sollen.
Emoji anzeigen	bool	Ein boolescher Wert, der angibt, ob die Emoji-Schaltfläche angezeigt werden soll oder nicht
showFile	bool	Ein boolescher Wert, der angibt, ob die Schaltfläche zur Dateiauswahl angezeigt werden soll oder nicht
onKeyPress	Funktion	Eine Funktion (userInput) => console.log(userInput) die verwendet wird, um etwas mit der Benutzereingabe zu tun. Die Funktion wird nach 300 ms entprellt aufgerufen
onDelete	Funktion	Eine Funktion (msg) => console.log(msg) die zum Löschen einer gesendeten Nachricht verwendet wird. Wenn diese Eigenschaft festgelegt ist, wird in der oberen rechten Ecke jeder Nachricht, die der Benutzer an einen Partner sendet, eine Schaltfläche zum Löschen angezeigt. Sie können eine beliebige Eigenschaft für das Nachrichtenobjekt festlegen (z. B. eine id -Eigenschaft) und diese Eigenschaft dann verwenden, um eine Backend-API aufzurufen, um die Nachricht zu löschen.

Nachrichtenobjekte

Nachrichtenobjekte werden je nach Typ unterschiedlich gerendert. Derzeit werden nur Text- und Emoji-Typen unterstützt. Jedes Nachrichtenobjekt verfügt über ein author , das den Wert „ich“ oder „sie“ haben kann.

 {
  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'
  }
}