react beautiful chat

реагировать-красивый-чат

react-beautiful-chat предоставляет окно чата, похожее на интерком, которое можно легко включить в любой проект бесплатно. Он не предоставляет никаких средств обмена сообщениями, только компонент представления.

react-beautiful-chat — это улучшенная версия react-chat-window (которое вы можете найти здесь)

Функции

• Настраиваемый
• Серверный агностик
• Бесплатно

Демо

Оглавление

• Установка
• Пример
• Компоненты

Установка

 $ npm install react-beautiful-chat

Пример

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

Более подробные примеры см. в папке demo.

Компоненты

пусковая установка

Launcher — единственный компонент, необходимый для использования React-beautiful-chat. Он будет динамически реагировать на изменения в сообщениях. Все новые сообщения необходимо добавлять посредством изменения реквизитов, как показано в примере.

Реквизит лаунчера:

опора	тип	описание
*профиль агента	объект	Представляет агента по обслуживанию клиентов вашего продукта или услуги. Поля: имя_команды, URL-адрес изображения.
onMessageWasSent	функция (сообщение)	Вызывается, когда сообщение отправляется с объектом сообщения в качестве аргумента.
список сообщений	[сообщение]	Массив объектов сообщений, которые будут отображаться как диалог.
показатьEmoji	логическое значение	Логическое значение, указывающее, показывать или нет кнопку эмодзи.
показатьфайл	логическое значение	Логическое значение, указывающее, показывать или нет кнопку выбора файла.
onKeyPress	функция	Функция (userInput) => console.log(userInput) используемая для каких-либо действий с пользовательским вводом. Функция вызывается без дребезга через 300 мс.
onDelete	функция	Функция (msg) => console.log(msg) используемая для удаления отправленного сообщения. Если этот реквизит установлен, кнопка удаления будет отображаться в правом верхнем углу каждого сообщения, отправленного пользователем партнеру. Вы можете установить любое свойство объекта сообщения (например, свойство id ), а затем использовать это свойство для вызова некоторого внутреннего API для удаления сообщения.

Объекты сообщений

Объекты сообщений отображаются по-разному в зависимости от их типа. В настоящее время поддерживаются только типы текста и эмодзи. Каждый объект сообщения имеет поле author , которое может иметь значение «я» или «они».

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