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-beauty-chat を使用するために必要な唯一のコンポーネントです。メッセージの変更に動的に反応します。すべての新しいメッセージは、例に示すように props を変更して追加する必要があります。

ランチャーの小道具:

小道具	タイプ	説明
*エージェントプロファイル	物体	製品またはサービスのカスタマーサービスエージェントを表します。フィールド: チーム名、画像 URL
メッセージが送信されました	関数(メッセージ)	メッセージオブジェクトを引数としてメッセージが送信されるときに呼び出されます。
メッセージリスト	[メッセージ]	会話としてレンダリングされるメッセージオブジェクトの配列。
show絵文字	ブール	絵文字ボタンを表示するかどうかを示すブール値
ファイルの表示	ブール	ファイル選択ボタンを表示するかどうかを示すブール値
キーを押すと	機能	関数`(userInput) => console.log(userInput)`は、ユーザー入力を使用して何らかの処理を行うために使用されます。関数は 300ms でデバウンスされて呼び出されます
on削除	機能	送信されたメッセージを削除するために使用される関数`(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'
  }
}