chat ui react
1.0.0
Chat-UI-Reactは、会話型Web UIを構築するためのNPMパッケージです。このパッケージは次のものを提供します：
これをオンラインチャットやチャットボットに組み込むことができます。
現在、コンポーネントはReactのUIフレームワークマテリアルUIを使用しています。 Material-UI以外のコンポーネントが必要な場合は、元のコンポーネントに置き換えて使用できます。
デモサイトを参照してください。
exampleディレクトリを参照してください。
NPMで：
npm install chat-ui-react react react-dom @material-ui/core糸で：
yarn add chat-ui-react react react-dom @material-ui/core < script crossorigin =" anonymous " src =" https://unpkg.com/react@16/umd/react.development.js " > </ script >
< script crossorigin =" anonymous " src =" https://unpkg.com/react-dom@16/umd/react-dom.development.js " > </ script >
< script crossorigin =" anonymous " src =" https://unpkg.com/@material-ui/core@4/umd/material-ui.development.js " > </ script >
< script crossorigin =" anonymous " src =" https://unpkg.com/chat-ui-react@latest/dist/browser/chat-ui-react.umd.polyfill.js " > </ script >
< script crossorigin =" anonymous " src =" https://unpkg.com/@babel/standalone@7/babel.min.js " > </ script > このパッケージは、チャットを表示するMuiChatコンポーネントと、チャットの表示を制御するChatControllerクラスで構成されています。以下の図は、各関係を示しています。
+------------+ +------------------+ +-----------+
| | Call | | Call | |
| | | | | |
| Your App | +-----> | ChatController | +-----> | MuiChat |
| | | | | |
| | | | | |
+------------+ +------------------+ +-----------+
この構造により、チャットディスプレイをChatControllerに渡すことのみに集中できます。コンポーネントのディスプレイ制御について心配する必要はありません。
表示されているものが気に入らない場合は、 MuiChat別のコンポーネントに置き換えることができます。交換のためにアプリに変更はありません。
使用方法を理解するための簡単な例です。
function App ( ) : React . ReactElement {
const [ chatCtl ] = React . useState ( new ChatController ( ) ) ;
React . useMemo ( async ( ) => {
// Chat content is displayed using ChatController
await chatCtl . addMessage ( {
type : 'text' ,
content : `Hello, What's your name.` ,
self : false ,
} ) ;
const name = await chatCtl . setActionRequest ( { type : 'text' } ) ;
} , [ chatCtl ] ) ;
// Only one component used for display
return < MuiChat chatController = { chatCtl } /> ;
}以下では、 ChatControllerの使用方法について説明します。
チャットメッセージを表示するには、 addMessageメソッドを使用します。 selfオプションで、それがあなた自身のメッセージであるか、他の誰かのメッセージであるかを指定します。
await chatCtl . addMessage ( {
type : 'text' ,
content : `Hello, What's your name.` ,
self : false ,
} ) ;setActionRequestメソッドを使用して、ユーザーにメッセージを求めます。
アクションを要求するには、1回限りのアクションと常にアクションを要求する2つの方法があります。
ユーザーに1回限りのアクションを要求するために、 alwaysオプションにfalseを指定します。メソッドの返品値は、ユーザー入力を返すPromiseです。
const response = await chatCtl . setActionRequest ( {
type : 'text' ,
always : false ,
} ) ;
console . log ( response . value ) ; 常にユーザーにアクションを要求するには、 alwaysオプションでtrueを指定します。ユーザーが何度も入力されているため、入力を受信するコールバック関数を指定します。ユーザーからの入力要求をキャンセルするには、 cancelActionRequestメソッドを呼び出します。
chatCtl . setActionRequest (
{ type : 'text' , always : true } ,
( response ) => {
console . log ( response . value ) ;
}
) ;
chatCtl . cancelActionRequest ( ) ; テキストや選択など、アクションにはいくつかの種類があります。
このアクションは文字列を入力します。
typeのtextを指定します。メソッドの返品値は、ユーザーが入力したメッセージです。
const response = await chatCtl . setActionRequest ( { type : 'text' } ) ;
console . log ( response . value ) ; このアクションは、オプションから1つを選択します。
typeのselect指定します。 optionsのオプションを指定します。 value HTML属性に使用され、 text画面表示に使用されます。メソッドの返品値は、ユーザーが選択したoptionsの要素です。
const response = await chatCtl . setActionRequest ( {
type : 'select' ,
options : [
{
value : 'a' ,
text : 'A' ,
} ,
{
value : 'b' ,
text : 'B' ,
} ,
] ,
} ) ;
console . log ( response . option ) ;
// If A is selected
// { value: 'a', text: 'A' } このアクションは複数のオプションを選択します。
typeのmulti-selectを指定します。 optionsのオプションを指定します。 valueはHTML属性に使用され、 text表示に使用されます。メソッドの返品値は、選択したoptionsです。
const response = await chatCtl . setActionRequest ( {
type : 'multi-select' ,
options : [
{
value : 'a' ,
text : 'A' ,
} ,
{
value : 'b' ,
text : 'B' ,
} ,
] ,
} ) ;
console . log ( response . options ) ;
// If A and B are selected
// [{ value: 'a', text: 'A' }, { value: 'b', text: 'B' }] このアクションはファイルを入力します。
typeのfileを指定します。 inputタグの属性としてacceptおよびmultipleを指定できます。メソッドの返品値は、ユーザーが入力したファイルの配列です。
const response = await chatCtl . setActionRequest ( {
type : 'file' ,
accept : 'image/*' ,
multiple : true ,
} ) ;
console . log ( response . files ) ; このアクションはオーディオを入力します。
typeのaudioを指定します。メソッドの返品値は、ユーザーによるオーディオ入力のBlobです。オーディオ入力が失敗した場合、拒否RejectれたPromiseが返されます。
try {
const response = await chatCtl . setActionRequest ( {
type : 'audio' ,
} ) ;
console . log ( response . audio ) ;
} catch ( e ) {
console . log ( e ) ;
} このアクションでは、カスタムコンポーネントを入力として使用します。 typeのcustomを指定します。コンポーネントをComponentに指定します。
カスタムコンポーネントは、Reactコンベンションに従って、通常どおり入力フォームを作成します。 chatControllerとactionRequestプロパティとして受信します。これは、Chat-UI反応によって自動的に設定されます。次に、ユーザーからChatControllerクラスのsetActionResponseメソッドに受信した入力を設定します。これは、 setActionRequestの返品値としてアプリケーションで受信できます。
function GoodInput ( {
chatController ,
actionRequest ,
} : {
chatController : ChatController ;
actionRequest : ActionRequest ;
} ) {
const chatCtl = chatController ;
const setResponse = React . useCallback ( ( ) : void => {
const res = { type : 'custom' , value : 'Good!' } ;
chatCtl . setActionResponse ( actionRequest , res ) ;
} , [ actionRequest , chatCtl ] ) ;
return (
< Button
type = "button"
onClick = { setResponse }
variant = "contained"
color = "primary"
>
Good!
</ Button >
) ;
}
const custom = await chatCtl . setActionRequest ( {
type : 'custom' ,
Component : GoodInput ,
} ) ;
console . log ( custom . value ) ; 著作権（c）2020 Twihike。無断転載を禁じます。
このプロジェクトは、MITライセンスの条件に基づいてライセンスされています。
