react chat widgetダウンロード - react chat widgetソースコードのダウンロード

react chat widget

AI ソースコード

v3.1.3

ダウンロード

react chat widget

FE陸軍

特徴

プレーンテキストメッセージUI
リンクのスニペットスタイル (現時点では応答としてのみ)
完全にカスタマイズ可能
使いやすい

デモンストレーション

インストール

npm

npm install --save react-chat-widget

糸

yarn add react-chat-widget

使用法

1- ウィジェットコンポーネントをルートコンポーネントに追加します

 import React from 'react' ;
import { Widget } from 'react-chat-widget' ;

import 'react-chat-widget/lib/styles.css' ;

function App ( ) {
  return (
    < div className = "App" >
      < Widget />
    </ div >
  ) ;
}

export default App ;

2- 使用する必要がある唯一の必須プロパティは、ユーザーからの入力を受け取るhandleNewUserMessageです。

 import React from 'react' ;
import { Widget } from 'react-chat-widget' ;

import 'react-chat-widget/lib/styles.css' ;

function App ( ) {
  const handleNewUserMessage = ( newMessage ) => {
    console . log ( `New message incoming! ${ newMessage } ` ) ;
    // Now send the message throught the backend API
  } ;

  return (
    < div className = "App" >
      < Widget
        handleNewUserMessage = { handleNewUserMessage }
      />
    </ div >
  ) ;
}

export default App ;

3- ウィジェットにメッセージを追加するためのメソッドをインポートします。 (メッセージを参照)

 import React from 'react' ;
import { Widget , addResponseMessage } from 'react-chat-widget' ;

import 'react-chat-widget/lib/styles.css' ;

function App ( ) {
  useEffect ( ( ) => {
    addResponseMessage ( 'Welcome to this awesome chat!' ) ;
  } , [ ] ) ;

  const handleNewUserMessage = ( newMessage ) => {
    console . log ( `New message incoming! ${ newMessage } ` ) ;
    // Now send the message throught the backend API
    addResponseMessage ( response ) ;
  } ;

  return (
    < div className = "App" >
      < Widget
        handleNewUserMessage = { handleNewUserMessage }
      />
    </ div >
  ) ;
}

export default App ;

4- アプリのデザインに合わせてウィジェットをカスタマイズします。両方の小道具を追加して、ウィジェットのタイトルと使用するアバターを管理できます。もちろん、CSS でウィジェットのスタイルを自由に変更してください。

 import React , { useEffect } from 'react' ;
import { Widget , addResponseMessage } from 'react-chat-widget' ;

import 'react-chat-widget/lib/styles.css' ;

import logo from './logo.svg' ;

function App ( ) {
  useEffect ( ( ) => {
    addResponseMessage ( 'Welcome to this **awesome** chat!' ) ;
  } , [ ] ) ;

  const handleNewUserMessage = ( newMessage ) => {
    console . log ( `New message incoming! ${ newMessage } ` ) ;
    // Now send the message throught the backend API
  } ;

    return (
      < div className = "App" >
        < Widget
          handleNewUserMessage = { handleNewUserMessage }
          profileAvatar = { logo }
          title = "My new awesome title"
          subtitle = "And my cool subtitle"
        />
      </ div >
    ) ;
}

export default App ;

API

小道具

小道具	タイプ	必須	デフォルト値	説明
ハンドル新しいユーザーメッセージ	(...引数: 任意[]) => 任意	はい		ユーザー入力を処理する関数。送信時に全文メッセージを受け取ります。
タイトル	弦	いいえ	'いらっしゃいませ'	ウィジェットのタイトル
字幕	弦	いいえ	「これはあなたのチャットのサブタイトルです」	ウィジェットのサブタイトル
送信者PlaceHolder	弦	いいえ	「メッセージを入力してください...」	メッセージ入力のプレースホルダー
プロフィールアバター	弦	いいえ		返信に設定されるプロフィール画像
プロフィールクライアントアバター	弦	いいえ		クライアントメッセージに設定されるプロフィール画像
タイトルアバター	弦	いいえ		チャットタイトルの横に表示される画像
showCloseボタン	ブール値	いいえ	間違い	全画面モードで閉じるボタンを表示または非表示にする
フルスクリーンモード	ブール値	いいえ	間違い	フルデスクトップモードでの全画面の使用を許可する
オートフォーカス	ブール値	いいえ	真実	オートフォーカスかどうか、ユーザー入力
ランチャー	(ハンドルトグル) => 要素タイプ	いいえ		デフォルトの代わりに使用するカスタム Launcher コンポーネント
ハンドルクイックボタンクリックされました	(...引数: 任意[]) => 任意	いいえ		ユーザーがクイックボタンをクリックしたことを処理する関数。クリックされたときに「値」を受け取ります。
showTimeStamp	ブール値	いいえ	真実	メッセージにタイムスタンプを表示する
チャットID	弦	いいえ	「rcw-チャットコンテナ」	a11y のチャットコンテナ ID
ハンドルトグル	(...引数: 任意[]) => 任意	いいえ	「rcw-チャットコンテナ」	ウィジェットが切り替えられたときに処理する関数。切り替えステータスを受け取ります。
ランチャーオープンラベル	弦	いいえ	「オープンチャット」	ランチャーを閉じたときの Alt 値
ランチャー閉じるラベル	弦	いいえ	「チャットを閉じる」	ランチャーを開いたときの Alt 値
ランチャーOpenImg	弦	いいえ	」	ローカルまたはリモートの画像 URL。指定されていない場合は、デフォルトの画像が表示されます
ランチャー閉じる画像	弦	いいえ	」	ローカルまたはリモートの画像 URL。指定されていない場合は、デフォルトの画像が表示されます
送信ボタンAlt	弦	いいえ	'送信'	a11y 目的の送信ボタン alt
handleTextInputChange	(イベント) => 任意	いいえ		入力変更時にトリガーするプロップ
ハンドル送信	(イベント) => 任意	いいえ		メッセージが送信されたときにトリガーされ、カスタム検証に使用されるプロパティ
サイズ変更可能	ブール値	いいえ	間違い	ウィジェットの左端をドラッグしてサイズを変更できるようにするプロップ
絵文字	ブール値	いいえ	間違い	絵文字ピッカーを有効にする
バッジを表示	ブール値	いいえ	真実	未読メッセージバッジの表示または非表示を許可するプロップ

スタイル

ウィジェットに必要なスタイルを変更するには、コンテナ内でウィジェットをラップしている CSS クラスをオーバーライドし、独自のスタイルをウィジェットに追加するだけです。すべてのクラスにはrcw-接頭辞が付いているため、他のクラスがない場合でも他のクラスはオーバーライドされません。オーバーライドするには、たとえば次のようにします。

. rcw-conversation-container > . rcw-header {
  background-color : red;
}

. rcw-message > . rcw-response {
  background-color : black;
  color : white;
}

こうすることで、JS をクリーンなままにし、CSS 内にスタイルを維持できます。

メッセージ

v3.0 以降、メッセージには作成時に追加できるオプションの ID が含まれるようになりました。新しいメッセージを追加する場合は、次の方法を使用できます。

addResponseMessage
- パラメータ:
  - テキスト: 文字列 (マークダウンをサポート)
  - ID: 文字列 (オプション)
- ユーザー入力への応答として書き込まれた新しいメッセージを追加するメソッド。
ユーザーメッセージの追加
- パラメータ:
  - テキスト: 文字列 (マークダウンをサポート)
  - ID: 文字列 (オプション)
- このメソッドは、ユーザーとして書き込まれた新しいメッセージを追加します。 prop handleNewUserMessage() はトリガーされないことに注意してください。
リンクスニペットの追加
- パラメータ:
  - リンク
- リンクスニペットを追加するメソッド。このメソッドにはリンクオブジェクトを指定する必要があります。リンクオブジェクトは次の形式でなければなりません。
```
 {
  title : 'My awesome link' ,
  link : 'https://github.com/Wolox/react-chat-widget' ,
  target : '_blank'
}
```
- デフォルトでは、 target値は_blankで、リンクが新しいウィンドウで開きます。
renderCustomComponent
- パラメータ:
  - コンポーネント: レンダリングされるコンポーネント、
  - props: コンポーネントに必要な props、
  - showAvatar: ブール値、デフォルト値: false;コンポーネントはメッセージと同様にアバターとともにレンダリングされます
- メッセージコンテナ内のカスタムコンポーネントをレンダリングするメソッド。このメソッドを使用すると、ウィジェットに必要なコンポーネントを追加できます。
クイックボタンの設定
- パラメータ:
  - ボタン: キーのlabelとvalueを持つオブジェクトの配列

マークダウンは、応答とユーザーメッセージの両方でサポートされています。

ウィジェットの動作

ウィジェットの特定のアクションを制御することもできます。

ウィジェットの切り替え
- params: パラメータは予期されていません
- この方法は、ランチャーでクリックイベントをトリガーすることなく、ウィジェットを自由に切り替えることができます。
トグル入力無効化
- params: パラメータは予期されていません
- ユーザーが書き込めるメッセージ入力の可用性を切り替えるメソッド
トグルメッセージローダー
- 「入力中...」スタイルとして表示されるメッセージローダーを切り替えます。
メッセージの削除*
- パラメータ:
  - count: 削除するメッセージを最後から最初まで数えます
  - id: 削除するメッセージID
- addResponseMessageで以前に設定した ID を持つメッセージを削除するか、位置に基づいて削除するか、あるいはその両方を削除します。たとえば、 deleteMessages(2, 'myId') ID myIdを持つメッセージと前のメッセージを削除します。
すべて既読としてマーク
- すべての応答メッセージを既読としてマークします。ユーザーメッセージには既読/未読のプロパティがありません。
setBadgeCount
- パラメータ:
  - カウント: 数値
- v3.0 では、 badgeプロップがウィジェット内から管理できるように変更されています。この方法はバッジ番号を手動で設定します。

ウィジェットのコンポーネント

カスタムランチャー

デフォルトではないものが必要な場合は、ランチャーのカスタムコンポーネントを使用できます。単にランチャープロパティを使用します。

 import React from 'react' ;
import { Widget } from 'react-chat-widget' ;

...

function MyApp ( ) {
  const getCustomLauncher = ( handleToggle ) =>
    < button onClick = { handleToggle } > This is my launcher component! </ button >

  return (
    < Widget
      . . .
      launcher = { handleToggle => getCustomLauncher ( handleToggle ) }
    />
  )
}