react chat window

React-Chat-Window

react-chat-window bietet ein intercom-ähnliches Chat-Fenster, das problemlos kostenlos in jedes Projekt aufgenommen werden kann. Es bietet keine Messaging -Einrichtungen, nur die Ansichtskomponente.

Merkmale

• Anpassbar
• Backend Agnostic
• Frei

Demo

Inhaltsverzeichnis

• Installation
• Beispiel
• Komponenten

Installation

 $ npm install react-chat-window

Beispiel

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

Detailliertere Beispiele finden Sie im Demo -Ordner.

Komponenten

Launcher

Launcher ist die einzige Komponente, die für die Verwendung von React-Chat-Window erforderlich ist. Es reagiert dynamisch auf Änderungen der Nachrichten. Alle neuen Nachrichten müssen über eine Änderung der Requisiten hinzugefügt werden, wie im Beispiel gezeigt.

Launcher -Requisiten:

Stütze	Typ	erforderlich	Beschreibung
AgentProfile	Objekt	Ja	Repräsentiert Ihr Produkt- oder Dienstleistungsvertreter Ihres Dienstes. Felder: ImageRl (String), TeamName (String).
Handleclick	Funktion	Ja	Fangen Sie das Klickereignis im Launcher ab. Kein Argument gesendet, wenn die Funktion aufgerufen wird.
Isopen	boolean	Ja	Erzwingen Sie den öffnen/schließen Zustand des Chat -Fensters. Wenn dies nicht festgelegt ist, wird es geöffnet und schließen, wenn Sie klicken.
Messagelist	[Nachricht]	Ja	Eine Reihe von Nachrichtenobjekten, die als Gespräch gerendert werden sollen.
stumm	boolean	NEIN	Spielen Sie keinen Sound für eingehende Nachrichten. Standardmäßig false .
NewMessagesCount	Nummer	NEIN	Die Anzahl der neuen Nachrichten. Wenn größer als 0, wird diese Zahl in einem Abzeichen auf dem Launcher angezeigt. Standardmäßig 0 .
auffileLected	Funktion (Filelist)	NEIN	Nach der Datei wurde aus dem Dialog im Chat -Fenster ausgewählt.
OnMessagewassent	Funktion (Nachricht)	Ja	Aufgerufen, wenn eine Nachricht gesendet wird, mit einem Nachrichtenobjekt als Argument.
Showemoji	boolean	NEIN	Ob die Emoji -Taste in der Eingabebalke angezeigt werden soll oder nicht. Standardmäßig true .

Nachrichtenobjekte

Nachrichtenobjekte werden je nach Typ unterschiedlich gemacht. Derzeit werden nur Text-, Datei- 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 : {
    url : 'somefile.mp3' ,
    fileName : 'Any old name'
  }
}

Agentenprofilobjekte

Sehen Sie so aus:

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