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