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 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" определяет государство, которое хранится в местном фон. Местное хранилище сохраняется после того, как браузер закрыт, и очищается при очистке печенья браузера или при вызове localStorage.clear() . |
customComponent | null | Пользовательский компонент, который будет использоваться с пользовательскими ответами. Например: customComponent={ (messageData) => (<div>Custom React component</div>)} . Обратите внимание, что это можно использовать только в том случае, если вы позвоните в Webchat из приложения React, поскольку вы не можете написать компонент в Pure 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 Reps позволяет только указать пользовательские размеры изображения:
params = { {
images : {
dims : {
width : 300 ,
height : 200
}
}
} }Текстовые сообщения, полученные при закрытии виджета, будут отображаться в виде подсказки.
При воссоединении к существующему сеансу чата бот отправит сообщение, содержащееся в клавише LocalStorage, указанную постоянной NEXT_MESSAGE . Сообщение должно быть строки JSON со свойством message , описывающим сообщение, и свойство expiry , установленное на временной метке UNIX в миллисекундах, после чего это сообщение не должно быть отправлено. Это полезно, если вы хотите, чтобы ваш бот мог предложить вашему пользователю перемещаться по сайту.
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
Если вы хотите обработать customData в RASA, вы должны создать новый канал. Используйте канал rasa_core.channels.socketio в качестве шаблона для вашего нового канала. В этом канале customData можно извлечь с помощью data['customData'] . Затем вы можете изменить sender_id , сохранить customData в базу данных, заполнить слоты или что -то еще с вашими дополнительными данными.
Rasa Webchat развивается командой Botfront, и он работает с Botfront. Если ваш бот многоязычный, убедитесь, что специфичны текущий язык в customData . Например, customData={{language: 'en'}} . Смотрите в Docs 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 | Div встроенного чата (с использованием встроенной опоры) |
| .rw-full-экрана | Div of FullScreen Chatbox (с использованием PullScreenMode Prop) |
| .rw-Conversation-Container | родительский див, содержащий заголовок, конфитанции сообщений и отправитель |
| .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 Dialoge Technologies Inc.
Лицензировано по лицензии Apache, версия 2.0 («Лицензия»); Вы не можете использовать этот файл, кроме как в соответствии с лицензией. Вы можете получить копию лицензии на
http://www.apache.org/licenses/LICENSE-2.0
Если не требуется применимый закон или не согласен в письменной форме, программное обеспечение, распространяемое по лицензии, распределяется по основам «как есть», без каких -либо гарантий или условий, явных или подразумеваемых. См. Лицензию для конкретного языка, регулирующих разрешения и ограничения по лицензии. (C) 2021 Dialoge Technologies Inc. Все права защищены.
