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