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对话技术公司保留所有权利。
