react beautiful chat下载 - react beautiful chat源码下载

react beautiful chat

Ai源码

1.1.0

下载

反应美丽聊天

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

有关更详细的示例，请参阅演示文件夹。

成分

启动器

Launcher是使用react-beautiful-chat所需的唯一组件。它将对消息的变化做出动态反应。所有新消息都必须通过更改 props 添加，如示例所示。

发射器道具：

支柱	类型	描述
*代理简介	目的	代表您的产品或服务的客户服务代理。字段：团队名称、图像网址
消息发送时	功能（消息）	当消息以消息对象作为参数发送时调用。
消息列表	[信息]	要呈现为对话的消息对象数组。
显示表情符号	布尔值	一个布尔值，指示是否显示表情符号按钮
显示文件	布尔值	一个布尔值，指示是否显示文件选择器按钮
按键时	功能	函数`(userInput) => console.log(userInput)`用于对用户输入执行某些操作。该函数在 300ms 时被调用去抖
删除时	功能	函数`(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'
  }
}