rasa webchat
css firefox bug
<script> Em seu <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 > Sobre imagens: width e height definem o tamanho em pixels aos quais as imagens nas mensagens são escalonadas. Se não estiver presente, a imagem será dimensionada para a largura máxima do contêiner e da imagem.
Instale o pacote NPM:
npm install rasa-webchatEntão:
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 como true se você não quiser ver o lançador. | Prop / param | Valor padrão | Descrição |
|---|---|---|
initPayload | null | Carga útil enviada para Rasa quando a conversa começa |
socketUrl | null | URL do soquete |
socketPath | null | Feche a janela de bate -papo |
customData | null | Objeto arbitrário enviado com o soquete. Se estiver usando com Botfront, ele deve incluir o idioma (por exemplo {"language": "en"} ) |
docViewer | false | Se você adicionar este suporte ao componente ou ao script init, docViewer=true , isso tratará os links nas mensagens recebidas como links para um documento ( .pdf .doc .xlsx etc.) e o abrirá em um pop -up usando https://docs.google.com/viewer Service |
title | 'Welcome" | Título mostrado no cabeçalho do widget |
subtitle | null | Legenda mostrada sob o título no cabeçalho do widget |
inputTextFieldHint | "Type a message" | Mensagem do usuário Entrada de campo espaço reservado |
hideWhenNotConnected | true | Se true o widget se esconderá quando a conexão com o soquete for perdida |
connectOn | "mount" | Este suporte permite escolher quando o widget tentará se conectar ao servidor. Por padrão, ele tenta se conectar assim que é montado. Se você selecionar connectOn='open' ele tentará apenas a conexão quando o widget for aberto. Ele só pode pegar os valores mount e open . |
onSocketEvent | null | Ligue para o código personalizado em um evento de soquete específico |
embedded | false | Defina como true se você deseja incorporar a página em uma web. O widget sempre será aberto e o initPayload será acionado imediatamente |
showFullScreenButton | false | Mostre uma alternância de tela cheia |
displayUnreadCount | false | Caminho para uma imagem exibida no lançador quando o widget é fechado |
showMessageDate | false | Mostre a data da mensagem. Pode ser superestimado com uma função: (timestamp, message) => return 'my custom date' |
customMessageDelay | Veja abaixo | Este suporte é uma função, a função considera uma sequência de mensagens como um argumento. A função definida será chamada toda vez que uma mensagem for recebida e o valor retornado será usado como um atraso de milissegundos antes de exibir uma nova mensagem. |
params | Veja abaixo | Essencialmente usado para personalizar o tamanho da imagem, também usado para alterar as opções de armazenamento. |
storage | "local" | Especifica o local de armazenamento do estado de conversa no navegador. "session" define o estado a ser armazenado no armazenamento da sessão. O armazenamento da sessão persiste na recarga da página e é liberado após a chamada do navegador ou da guia, ou quando sessionStorage.clear() for chamada. "local" define o estado a ser armazenado no Stoage local. O armazenamento local persiste depois que o navegador é fechado e é limpo quando os biscoitos do navegador são limpos ou quando localStorage.clear() é chamado. |
customComponent | null | Componente personalizado a ser usado com respostas personalizadas. Por exemplo: customComponent={ (messageData) => (<div>Custom React component</div>)} . Observe que isso só pode ser usado se você chamar o WebChat de um aplicativo React, pois não pode escrever um componente no Javscript Pure. |
onWidgetEvent | {} | Ligue para o código personalizado em um evento de widget específico ( onChatOpen , onChatClose , onChatHidden , está disponível por enquanto), adicione uma função à propriedade de objeto desejada nos adereços para que ele reaja ao 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 Os Props params permitem especificar dimensões de imagem personalizadas:
params = { {
images : {
dims : {
width : 300 ,
height : 200
}
}
} }As mensagens de texto recebidas quando o widget for fechado serão mostradas como uma dica de ferramenta.
Ao se reconectar a uma sessão de bate -papo existente, o bot enviará uma mensagem contida na tecla LocalStorage especificada pela NEXT_MESSAGE Constant. A mensagem deve ser ridicularizada JSON com uma propriedade message que descreve a mensagem e uma propriedade expiry definida para um registro de data e hora do UNIX em milissegundos, após o que essa mensagem não deve ser enviada. Isso é útil se você quiser que seu bot possa oferecer ao seu usuário para navegar pelo site.
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 }
/> ;
} A carga útil pode ser qualquer mensagem que o usuário normalmente enviaria, mas se você quiser forçar uma intenção e talvez algumas entidades, você pode usar esse formato /myIntent{"entity1":"value1","entity2":"value2"}
O widget pode ser usado com qualquer back -end, mas é projetado principalmente para ser usado com Rasa ou Botfront.
Use o canal socketio : consulte as instruções na documentação da RASA
Se você deseja processar customData no RASA, precisa criar um novo canal. Use o canal rasa_core.channels.socketio como um modelo para o seu novo canal. Neste canal, customData pode ser recuperado via data['customData'] . Em seguida, você pode modificar sender_id , salvar customData no banco de dados, preencher slots ou o que for necessário com seus dados adicionais.
O Rasa Webchat é desenvolvido pela equipe Botfront e funciona com o Botfront. Se o seu bot for multilíngue, especifique o idioma atual no suporte customData . Por exemplo, customData={{language: 'en'}} . Veja nos documentos Botfront para obter mais detalhes.
Na versão 0.8, começamos a prefixar todas as classes CSS, se você já tinha estilo CSS para o widget, basta prender rw- a todas as classes que você mudou.
hierarquia:
.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
| Aula | Descrição |
|---|---|
| .rw-widget-container | A div contendo a caixa de bate -papo da versão padrão |
| .rw-widget-embebedado | Div da caixa de bate -papo incorporado (usando suporte incorporado) |
| .RW-FULL-Screen | Div da tela cheia de tela cheia (usando o Prop Prop FullScreenMode) |
| .RW-CONVERSAÇÃO-CONTINE | A divisão dos pais contendo o cabeçalho, o contador de mensagens e o remetente |
| .RW-MESSAGES-CONTINER | a área central onde as mensagens aparecem |
| .rw-sender | Div da área inferior que leva a entrada do usuário |
| .RW-New-Message | o elemento de entrada de texto do remetente |
| .rw-send | O elemento de Ícone de Enviar do remetente |
| .rw-header | Div da área superior com o cabeçalho da caixa de chat |
| .rw-title | o elemento -título do cabeçalho |
| .RW-Close-Button | o ícone próximo do cabeçalho |
| .rw-carregamento | o elemento de status de carregamento do cabeçalho |
| .RW-Message | as caixas segurando as mensagens do cliente e resposta |
| .rw-replies | A área que oferece opções de resposta rápidas |
| .rw-snippet | um componente para descrever links |
| .RW-IMAGEFRAME | um recipiente para enviar imagens |
| .rw-videoframe | um contêiner para enviar vídeo |
@Phlf @znat @theotomalty @hub4it @dliuproduction @matthieujnon @mofortin @guillaumetech
Copyright (C) 2021 Dialogue Technologies Inc.
Licenciado sob a licença Apache, versão 2.0 (a "licença"); Você não pode usar esse arquivo, exceto em conformidade com a licença. Você pode obter uma cópia da licença em
http://www.apache.org/licenses/LICENSE-2.0
A menos que exigido pela lei aplicável ou acordada por escrito, o software distribuído pela licença é distribuído "como está", sem garantias ou condições de qualquer tipo, expressa ou implícita. Consulte a licença para o idioma específico que rege as permissões e limitações sob a licença. (C) 2021 Dialogue Technologies Inc. Todos os direitos reservados.
