rasa webchat
css firefox bug
<script>タグあなたの<body/>で：
< script > ! ( function ( ) {
let e = document . createElement ( "script" ) ,
t = document . head || document . getElementsByTagName ( "head" ) [ 0 ] ;
( e . src =
"https://cdn.jsdelivr.net/npm/[email protected]/lib/index.js" ) ,
// Replace 1.x.x with the version that you want
( e . async = ! 0 ) ,
( e . onload = ( ) => {
window . WebChat . default (
{
customData : { language : "en" } ,
socketUrl : "https://bf-botfront.development.agents.botfront.cloud" ,
// add other props here
} ,
null
) ;
} ) ,
t . insertBefore ( e , t . firstChild ) ;
} ) ( ) ;
</ script >画像について： widthとheightメッセージ内の画像がクロップスケーリングされているピクセルのサイズを定義します。存在しない場合、画像は容器と画像の最大幅にスケーリングされます。
NPMパッケージをインストールします。
npm install rasa-webchatそれから：
import Widget from 'rasa-webchat' ;
function CustomWidget = ( ) => {
return (
< Widget
initPayload = { "/get_started" }
socketUrl = { "http://localhost:5500" }
socketPath = { "/socket.io/" }
customData = { { "language" : "en" } } // arbitrary custom data. Stay minimal as this will be added to the socket
title = { "Title" }
/>
)
}embeddedセットをtrueにしてください。 | prop / param | デフォルト値 | 説明 |
|---|---|---|
initPayload | null | 会話が始まるとRASAに送信されたペイロード |
socketUrl | null | ソケットURL |
socketPath | null | チャットウィンドウを閉じます |
customData | null | ソケットで送信される任意のオブジェクト。ボットフロントで使用する場合は、言語を含める必要があります（ {"language": "en"} ） |
docViewer | false | このプロップをコンポーネントまたはinitスクリプトに追加すると、 docViewer=true 、受信したメッセージのリンクをドキュメント（ .pdf .doc .xlsxなど）として扱い、 https://docs.google.com/viewerサービスを使用してポップアップで開きます |
title | 'Welcome" | ウィジェットのヘッダーに表示されているタイトル |
subtitle | null | ウィジェットのヘッダーのタイトルの下に示されている字幕 |
inputTextFieldHint | "Type a message" | ユーザーメッセージ入力フィールドプレースホルダー |
hideWhenNotConnected | true | true場合、ソケットへの接続が失われたときにウィジェットが非表示になります |
connectOn | "mount" | この小道具を使用すると、ウィジェットがサーバーに接続するときを選択できます。デフォルトでは、マウントするとすぐに接続を試みます。 connectOn='open'を選択すると、ウィジェットが開いたときに接続を試みます。値がmount 、 openだけです。 |
onSocketEvent | null | 特定のソケットイベントでカスタムコードを呼び出します |
embedded | false | Webページに埋め込みたい場合は、 trueに設定します。ウィジェットは常に開いており、 initPayloadすぐにトリガーされます |
showFullScreenButton | false | フル画面の切り替えを表示します |
displayUnreadCount | false | ウィジェットが閉じているときにランチャーに表示される画像へのパス |
showMessageDate | false | メッセージの日付を表示します。関数でオーバーライデンすることができます：（ (timestamp, message) => return 'my custom date' |
customMessageDelay | 以下を参照してください | この小道具は関数であり、関数はメッセージ文字列を引数として受け取ります。定義された関数は、メッセージが受信されるたびに呼び出され、返された値は新しいメッセージを表示する前にミリ秒遅延として使用されます。 |
params | 以下を参照してください | 基本的に画像サイズをカスタマイズするために使用され、ストレージオプションの変更にも使用されます。 |
storage | "local" | ブラウザ内の会話状態のストレージ場所を指定します。 "session"セッションストレージに保存される状態を定義します。セッションストレージは、ページのリロードで持続し、ブラウザまたはタブが閉じられた後、またはsessionStorage.clear()が呼び出されたときにクリアされます。 "local"地元のstoageに保管される状態を定義しています。ローカルストレージは、ブラウザが閉じられた後も持続し、ブラウザのCookieがクリアされたとき、またはlocalStorage.clear()が呼び出されたときにクリアされます。 |
customComponent | null | カスタム応答で使用するカスタムコンポーネント。例： customComponent={ (messageData) => (<div>Custom React component</div>)} 。純粋なJavscriptでコンポーネントを書くことができないため、ReactアプリケーションからWebChatを呼び出す場合にのみ使用できることに注意してください。 |
onWidgetEvent | {} | 特定のウィジェットイベントでカスタムコードを呼び出します（ onChatOpen 、 onChatClose 、 onChatHidden 、現在利用可能）、プロップの目的のオブジェクトプロパティに関数を追加して、イベントに反応させます。 |
customMessageDelay ( message ) => {
let delay = message . length * 30 ;
if ( delay > 2 * 1000 ) delay = 3 * 1000 ;
if ( delay < 400 ) delay = 1000 ;
return delay ;
} onSocketEvent onSocketEvent = { {
'bot_uttered' : ( ) => console . log ( 'the bot said something' ) ,
'connect' : ( ) => console . log ( 'connection established' ) ,
'disconnect' : ( ) => doSomeCleanup ( ) ,
} } params params Propsは、カスタム画像寸法の指定のみを許可します。
params = { {
images : {
dims : {
width : 300 ,
height : 200
}
}
} }ウィジェットが閉じられたときに受信されたテキストメッセージは、ツールチップとして表示されます。
既存のチャットセッションに再接続すると、ボットはNEXT_MESSAGE定数で指定されたローカルストレージキーに含まれるメッセージを送信します。メッセージは、メッセージを記述するmessageプロパティと、ミリ秒単位でUNIXタイムスタンプに設定されたexpiryプロパティを使用してJSONを作成する必要があります。その後、このメッセージを送信しないでください。これは、ボットがユーザーにサイトをナビゲートするように提供できるようにしたい場合に役立ちます。
function myComponent ( ) {
const webchatRef = useRef ( null ) ;
// triggered when something happens in your app
function callback ( ) {
if ( webchatRef . current && webchatRef . current . sendMessage ) {
webchatRef . current . sendMessage ( '/myIntent{"entityName":"value"}' ) ;
}
}
return < RasaWebchat
ref = { webchatRef }
/> ;
}ペイロードは、ユーザーが通常送信する任意のメッセージにすることができますが、意図を強制したい場合は、あるエンティティを強制したい場合は、その形式/myIntent{"entity1":"value1","entity2":"value2"}使用できます。
ウィジェットは任意のバックエンドで使用できますが、主にRASAまたはボットフロントで使用するように設計されています。
socketioチャネルを使用：RASAドキュメントの指示を参照してください
RASAでcustomDataを処理する場合は、新しいチャネルを作成する必要があります。新しいチャンネルのテンプレートとしてチャンネルrasa_core.channels.socketioを使用します。このチャネルでは、 customData data['customData']を介して取得できます。次に、 sender_id変更したり、 customDataをデータベースに保存したり、追加データを使用して必要なものを入力したりできます。
Rasa WebChatはボットフロントチームによって開発されており、ボットフロントで動作します。ボットが多言語の場合は、 customData Prop。たとえば、 customData={{language: 'en'}} 。詳細については、ボットフロントドキュメントをご覧ください。
バージョン0.8から、すべてのCSSクラスのプレフィックスを開始しました。ウィジェットのCSSスタイリングが既にある場合は、変更したすべてのクラスにrw-を準備します。
階層：
.rw-conversation-container
|-- .rw-header
|-- .rw-title
|-- .rw-close-function
|-- .rw-loading
|-- .rw-messages-container
|-- .rw-message
|-- .rw-client
|-- .rw-response
|-- .rw-replies
|-- .rw-reply
|-- .rw-response
|-- .rw-snippet
|-- .rw-snippet-title
|-- .rw-snippet-details
|-- .rw-link
|-- .rw-imageFrame
|-- .rw-videoFrame
|-- .rw-sender
|-- .rw-new-message
|-- .rw-send
| クラス | 説明 |
|---|---|
| .rw-widget-container | デフォルトバージョンのチャットボックスを含むdiv |
| .rw-widget-embedded | 埋め込まれたチャットボックスのdiv（埋め込まれた小道具を使用） |
| .rw-full-screen | フルスクリーンチャットボックスのdiv（フルスクリーンモードプロップを使用） |
| .rw-conversation-container | ヘッダー、メッセージコンテナ、および送信者を含む親div |
| .rw-messages-container | メッセージが表示される中央エリア |
| .rw-sender | ユーザーの入力を促す下部領域のdiv |
| .rw-new-message | 送信者のテキスト入力要素 |
| .rw-send | 送信者の送信アイコン要素 |
| .rw-header | チャットボックスヘッダーを備えたトップエリアのDiv |
| .rw-title | ヘッダーのタイトル要素 |
| .rw-Close-button | ヘッダーの近いアイコン |
| .RWロード | ヘッダーの負荷ステータス要素 |
| .rw-message | クライアントと応答のメッセージを保持しているボックス |
| .rw-replies | 迅速な返信オプションを提供する領域 |
| .rw-snippet | リンクを説明するためのコンポーネント |
| .rw-imageframe | 画像を送信するためのコンテナ |
| .rw-videoframe | ビデオを送信するためのコンテナ |
@phlf @znat @theotomalty @hub4it @dliuproduction @matthieujnon @mofortin @guillaumetech
Copyright（c）2021 Dialogue Technologies Inc.
Apacheライセンス、バージョン2.0（「ライセンス」）に基づいてライセンスされています。ライセンスに準拠している場合を除き、このファイルを使用することはできません。ライセンスのコピーを取得できます
http://www.apache.org/licenses/LICENSE-2.0
適用法で要求されていないか、書面で合意されていない限り、ライセンスに基づいて配布されたソフトウェアは、明示または黙示のいずれかの保証または条件なしに、「現状のまま」に基づいて配布されます。ライセンスに基づく権限と制限を管理する特定の言語のライセンスを参照してください。（c）2021 Dialogue Technologies Inc.
