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 | 帶有插座的任意對象。如果與Botfront一起使用，則必須包括語言（例如{"language": "en"} ） |
docViewer | false | 如果將此道具添加到組件或init腳本， docViewer=true ，這將把鏈接視為指向文檔的鏈接（ .pdf .doc .xlsx等），並將使用https://docs.google.com/viewer service將它們打開 |
title | 'Welcome" | 標題在小部件的標題中顯示 |
subtitle | null | 字幕顯示在小部件標題中的標題 |
inputTextFieldHint | "Type a message" | 用戶消息輸入現場佔位符 |
hideWhenNotConnected | true | 如果是true ，當與插座的連接丟失時，小部件將隱藏 |
connectOn | "mount" | 此支架使您可以選擇小部件何時嘗試連接到服務器。默認情況下，它在安裝後立即嘗試連接。如果選擇connectOn='open'則僅在打開小部件時嘗試連接。它只能將值mount和open 。 |
onSocketEvent | null | 在特定插座事件中調用自定義代碼 |
embedded | false | 如果要嵌入網頁，請設置為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>)} 。請注意，僅當您從React應用程序調用網絡聊天時才可以使用此功能，因為您無法在純Javscript中編寫組件。 |
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道具僅允許指定自定義圖像尺寸：
params = { {
images : {
dims : {
width : 300 ,
height : 200
}
}
} }關閉小部件時收到的短信將顯示為工具提示。
重新連接到現有聊天會話時，該機器人將發送一個由NEXT_MESSAGE常數指定的localStorage密鑰中包含的消息。該消息應與message屬性一起串聯JSON，該消息屬性描述了該消息，並設置為毫秒毫秒的Unix Timestamp的expiry屬性，然後不應發送此消息。如果您希望您的機器人能夠為您的用戶提供在網站周圍導航，這將很有用。
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或Botfront一起使用。
使用socketio頻道：請參閱RASA文檔中的說明
如果要在RASA中處理customData則必須創建一個新頻道。使用頻道rasa_core.channels.socketio作為新頻道的模板。在此通道中，可以通過data['customData']檢索customData 。然後，您可以修改sender_id ，將customData保存到數據庫中，填寫插槽或其他數據所需的內容。
RASA Webchat是由Botfront團隊開發的，它與Botfront合作。如果您的機器人是多語言的，請確保將customData Prop中的當前語言具體化。例如customData={{language: 'en'}} 。有關更多詳細信息，請參見Botfront文檔。
從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屏幕 | 全屏聊天框的DIV（使用FullScreenMode Prop） |
| .RW轉換容器 | 包含標頭，消息包容器和發件人的父級 |
| .rw-messages-container | 消息出現的中心區域 |
| .rw-sender | 底部區域的div，提示用戶輸入 |
| .RW新事物 | 發件人的文本輸入元素 |
| .rw-send | 發送者的發送圖標元素 |
| .RW-HEADER | 帶有Chatbox標題的頂部區域的Div |
| .rw標題 | 標題的標題元素 |
| .RW-close-button | 標題的近圖標 |
| .RW加載 | 標題的加載狀態元素 |
| .rw-message | 包含客戶端消息和響應的框 |
| .RW複製 | 提供快速答複選項的區域 |
| .rw-snippet | 描述鏈接的組件 |
| .RW-ImageFrame | 用於發送圖像的容器 |
| .rw-videoframe | 用於發送視頻的容器 |
@phlf @znat @theotomalty @hub4it @dliuproduction @matthieujnon @mofortin @guillaumetech
版權（C）2021對話技術公司
根據Apache許可證（版本2.0（“許可”）獲得許可；除了符合許可外，您不得使用此文件。您可以在
http://www.apache.org/licenses/LICENSE-2.0
除非適用法律要求或以書面形式同意，否則根據許可證分配的軟件是按照“原樣”分發的，沒有任何明示或暗示的任何形式的保證或條件。請參閱許可證的許可，以獲得許可下的權限和限制。 （c）2021對話技術公司保留所有權利。
