react chat window

反应 - 窗口

react-chat-window提供了一个类似对讲机的聊天窗口，可以免费包含在任何项目中。它不提供消息设施，仅提供视图组件。

特征

• 可定制
• 后端不可知论
• 自由的

演示

目录

• 安装
• 例子
• 成分

安装

 $ npm install react-chat-window

例子

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

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

成分

发射器

Launcher是使用React-Chat-Window所需的唯一组件。它将对消息的变化动态反应。所有新消息必须通过示例中所示的Prop的更改添加。

发射器道具：

支柱	类型	必需的	描述
AgentProfile	目的	是的	代表您的产品或服务的客户服务代理。字段：ImageUrl（String），TeamName（String）。
Handleclick	功能	是的	拦截启动器上的点击事件。调用函数时未发送任何参数。
等元	布尔	是的	强制聊天窗口的打开/关闭状态。如果未设置此设置，则单击时将打开并关闭。
Messagelist	[信息]	是的	将作为对话渲染的一系列消息对象。
沉默的	布尔	不	不要播放传入消息的声音。默认为false 。
newmessagesscount	数字	不	新消息的数量。如果大于0，则该数字将显示在启动器上的徽章中。默认为0 。
Onfilesselectected	功能（filelist）	不	从聊天窗口中的对话中选择了after文件。
OnMessageWassent	功能（消息）	是的	发送消息时，请致电消息对象作为参数。
Showemoji	布尔	不	是否在输入栏中显示表情符号按钮。默认为true 。

消息对象

消息对象根据其类型而呈现不同。当前，仅支持文本，文件和表情符号类型。每个消息对象都有一个author字段，该字段可以具有“我”或“它们”的值。

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

代理配置文件对象

看起来像这样：

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