rasa webchat
css firefox bug
<script> En tu <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 > Acerca de las imágenes: width y height definen el tamaño en los píxeles al que las imágenes en los mensajes se califican. Si no está presente, la imagen se escalará al ancho máximo del contenedor y la imagen.
Instale el paquete NPM:
npm install rasa-webchatEntonces:
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 en true si no desea ver el lanzador. | Prop / Param | Valor predeterminado | Descripción |
|---|---|---|
initPayload | null | Carga útil enviada a Rasa cuando comienza la conversación |
socketUrl | null | URL de zócalo |
socketPath | null | Cerrar la ventana de chat |
customData | null | Objeto arbitrario enviado con el socket. Si se usa con Botfront, debe incluir el lenguaje (por ejemplo {"language": "en"} ) |
docViewer | false | Si agrega este accesorio al componente o al script init, docViewer=true , esto tratará los enlaces en mensajes recibidos como enlaces a un documento ( .pdf .doc .xlsx etc.) y los abrirá en una ventana emergente usando https://docs.google.com/viewer Service |
title | 'Welcome" | Título que se muestra en el encabezado del widget |
subtitle | null | Subtítulo que se muestra bajo el título en el encabezado del widget |
inputTextFieldHint | "Type a message" | Marcador de posición de campo de entrada de mensajes de usuario |
hideWhenNotConnected | true | Si true , el widget se esconderá cuando se pierda la conexión al socket |
connectOn | "mount" | Este accesorio le permite elegir cuándo el widget intente conectarse al servidor. Por defecto, intenta conectarse tan pronto como se monta. Si selecciona connectOn='open' solo intentará la conexión cuando se abra el widget. Solo puede tomar el mount de valores y open . |
onSocketEvent | null | Llame al código personalizado en un evento de socket específico |
embedded | false | Establezca en true si desea incrustar la página web en una página web. El widget siempre estará abierto y el initPayload se activará inmediatamente |
showFullScreenButton | false | Mostrar una pantalla completa |
displayUnreadCount | false | Ruta a una imagen que se muestra en el lanzador cuando el widget está cerrado |
showMessageDate | false | Mostrar fecha de mensaje. Se puede anular con una función: (timestamp, message) => return 'my custom date' |
customMessageDelay | Vea abajo | Este apoyo es una función, la función toma una cadena de mensajes como argumento. La función definida se llamará cada vez que se reciba un mensaje y el valor devuelto se utilizará como un retraso de milisegundos antes de mostrar un nuevo mensaje. |
params | Vea abajo | Esencialmente utilizado para personalizar el tamaño de la imagen, también se utiliza para cambiar las opciones de almacenamiento. |
storage | "local" | Especifica la ubicación de almacenamiento del estado de conversación en el navegador. "session" define el estado que se almacenará en el almacenamiento de la sesión. El almacenamiento de la sesión persiste en la recarga de la página, y se borra después de que se cierra el navegador o la pestaña, o cuando se llama a sessionStorage.clear() . "local" define el estado que se almacenará en el stogo local. El almacenamiento local persiste después de que se cierra el navegador y se borra cuando se limpian las cookies del navegador, o cuando se llama a localStorage.clear() . |
customComponent | null | Componente personalizado para ser utilizado con respuestas personalizadas. Eg: customComponent={ (messageData) => (<div>Custom React component</div>)} . Tenga en cuenta que esto solo se puede usar si llama al webchat desde una aplicación React, ya que no puede escribir un componente en Javscript puro. |
onWidgetEvent | {} | Llame al código personalizado en un evento de widget específico ( onChatOpen , onChatClose , onChatHidden , están disponibles por ahora), agregue una función a la propiedad de objeto deseada en los accesorios para que reaccione al evento. |
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 Los accesorios params solo permiten especificar dimensiones de imagen personalizadas:
params = { {
images : {
dims : {
width : 300 ,
height : 200
}
}
} }Los mensajes de texto recibidos cuando el widget esté cerrado se mostrará como una información sobre herramientas.
Al volver a conectarse a una sesión de chat existente, el BOT enviará un mensaje contenido en la tecla LocalStorage especificada por la constante NEXT_MESSAGE . El mensaje debe ser triturado JSON con una propiedad message que describe el mensaje y una propiedad expiry establecida en una marca de tiempo UNIX en milisegundos, después de lo cual no se debe enviar este mensaje. Esto es útil si desea que su bot pueda ofrecer a su usuario para navegar por el sitio.
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 }
/> ;
} La carga útil puede ser cualquier mensaje que el usuario normalmente enviaría, pero si desea forzar una intención y tal vez algunas entidades, puede usar ese formato /myIntent{"entity1":"value1","entity2":"value2"}
El widget se puede usar con cualquier backend, pero está diseñado principalmente para usarse con RASA o Botfront.
Use el canal socketio : consulte las instrucciones en la documentación RASA
Si desea procesar customData en RASA, debe crear un nuevo canal. Use canal rasa_core.channels.socketio como plantilla para su nuevo canal. En este canal, customData se puede recuperar a través de data['customData'] . Luego puede modificar sender_id , guardar customData en la base de datos, llenar las ranuras o lo que necesite con sus datos adicionales.
El Rasa WebChat es desarrollado por el equipo de Botfront y funciona con Botfront. Si su bot es multilingüe, asegúrese de especificar el lenguaje actual en el accesorio customData . Por ejemplo customData={{language: 'en'}} . Ver en Botfront Docs para obtener más detalles.
De la versión 0.8 comenzamos a prefijo todas las clases de CSS, si ya tenía un estilo CSS para el widget, solo prependan rw- a todas las clases que cambió.
jerarquía:
.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
| Clase | Descripción |
|---|---|
| .rw-widget-contener | El div contiene el chatbox de la versión predeterminada |
| .rw-widget-embebido | Div del chatbox incrustado (usando el accesorio incrustado) |
| .rw-full-pantalla | Div del chatbox de pantalla completa (usando FullScreenMode Prop) |
| .RW-Conversación contenedor | el padre Div que contiene el encabezado, el contenedor de mensajes y el remitente |
| .rw-messages-contener | el área central donde aparecen los mensajes |
| .rw-sender | Div del área inferior que incorpora la entrada del usuario |
| .rw-new-message | el elemento de entrada de texto del remitente |
| .rw-send | El elemento de envío del remitente |
| .rw-cabeza | Div de la zona superior con el encabezado de chatbox |
| .rw-tito | El elemento del título del encabezado |
| .rw-close-botton | el icono cercano del encabezado |
| .rw-carga | el elemento de estado de carga del encabezado |
| .rw message | las cajas que contienen los mensajes del cliente y la respuesta |
| .rw replices | el área que ofrece opciones de respuesta rápida |
| .rw-snippet | un componente para describir enlaces |
| .rw-imageFrame | un contenedor para enviar imágenes |
| .rw-videOframe | un contenedor para enviar video |
@Phlf @znat @theTomalty @hub4it @DliUproduction @matthieujnon @mofortin @guillaumetech
Copyright (c) 2021 Diálogo Technologies Inc.
Licenciado bajo la licencia Apache, versión 2.0 (la "licencia"); No puede usar este archivo, excepto de conformidad con la licencia. Puede obtener una copia de la licencia en
http://www.apache.org/licenses/LICENSE-2.0
A menos que la ley aplicable sea requerida o acordado por escrito, el software distribuido bajo la licencia se distribuye de manera "como es", sin garantías o condiciones de ningún tipo, ya sea expresas o implícitas. Consulte la licencia para los permisos y limitaciones de rigor de idioma específico bajo la licencia. (C) 2021 Diálogo Technologies Inc. Todos los derechos reservados.
