rasa webchat
css firefox bug
<script> Dans votre <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 > À propos des images: width et height définissent la taille des pixels auxquels les images dans les messages sont à l'échelle des cultures. S'il n'est pas présent, l'image évoluera à la largeur maximale du conteneur et de l'image.
Installez le package NPM:
npm install rasa-webchatAlors:
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 si vous ne voulez pas voir le lanceur. | Prop / param | Valeur par défaut | Description |
|---|---|---|
initPayload | null | La charge utile envoyée à Rasa lorsque la conversation commence |
socketUrl | null | URL de prise |
socketPath | null | Fermez la fenêtre de chat |
customData | null | Objet arbitraire envoyé avec la prise. Si vous utilisez avec BotFront, il doit inclure la langue (par exemple {"language": "en"} ) |
docViewer | false | docViewer=true https://docs.google.com/viewer ajoutez .pdf .doc .xlsx acrop |
title | 'Welcome" | Titre indiqué dans l'en-tête du widget |
subtitle | null | Sous-titre indiqué sous le titre dans l'en-tête du widget |
inputTextFieldHint | "Type a message" | Entrée des messages de l'utilisateur Place Placeholder |
hideWhenNotConnected | true | Si true le widget se cachera lorsque la connexion à la prise est perdue |
connectOn | "mount" | Cet accessoire vous permet de choisir quand le widget essaiera de vous connecter au serveur. Par défaut, il essaie de se connecter dès qu'il monte. Si vous sélectionnez connectOn='open' il ne tentera la connexion que lorsque le widget est ouvert. Il ne peut que prendre les valeurs mount et open . |
onSocketEvent | null | Appelez le code personnalisé sur un événement de socket spécifique |
embedded | false | Définissez true si vous souhaitez intégrer la page Web. Le widget sera toujours ouvert et le initPayload sera déclenché immédiatement |
showFullScreenButton | false | Afficher une bascule en plein écran |
displayUnreadCount | false | Chemin vers une image affichée sur le lanceur lorsque le widget est fermé |
showMessageDate | false | Afficher la date du message. Peut être remplacé avec une fonction: (timestamp, message) => return 'my custom date' |
customMessageDelay | Voir ci-dessous | Cet accessoire est une fonction, la fonction prend une chaîne de message comme argument. La fonction définie sera appelée à chaque fois qu'un message est reçu et la valeur retournée sera utilisée comme retard de millisecondes avant d'afficher un nouveau message. |
params | Voir ci-dessous | Essentiellement utilisé pour personnaliser la taille de l'image, également utilisée pour modifier les options de stockage. |
storage | "local" | Spécifie l'emplacement de stockage de l'état de conversation dans le navigateur. "session" définit l'état à stocker dans le stockage de session. Le stockage de session persiste sur le rechargement de la page et est effacé après la fermeture du navigateur ou de l'onglet, ou lorsque sessionStorage.clear() est appelé. "local" définit l'État à stocker dans le stade local. Le stockage local persiste après la fermeture du navigateur et est effacé lorsque les cookies du navigateur sont effacés, ou lorsque localStorage.clear() est appelé. |
customComponent | null | Composant personnalisé à utiliser avec des réponses personnalisées. EG: customComponent={ (messageData) => (<div>Custom React component</div>)} . Veuillez noter que cela ne peut être utilisé que si vous appelez le webchat à partir d'une application React car vous ne pouvez pas écrire un composant dans Pure Javscript. |
onWidgetEvent | {} | Appelez le code personnalisé sur un événement de widget spécifique ( onChatOpen , onChatClose , onChatHidden , sont disponibles pour l'instant), ajoutez une fonction à la propriété objet souhaitée dans les accessoires pour le faire réagir à l'événement. |
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 Les accessoires params permet uniquement de spécifier les dimensions d'image personnalisées:
params = { {
images : {
dims : {
width : 300 ,
height : 200
}
}
} }Les messages texte reçus lorsque le widget est fermé sera affiché sous forme d'info-bulle.
Lors de la reconnexion à une session de chat existante, le bot enverra un message contenu dans la clé localStorage spécifiée par la constante NEXT_MESSAGE . Le message doit être Stringified JSON avec une propriété message décrivant le message et une propriété expiry définie sur un horodatage Unix en millisecondes, après quoi ce message ne doit pas être envoyé. Ceci est utile si vous souhaitez que votre bot puisse offrir à votre utilisateur pour naviguer sur le 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 }
/> ;
} La charge utile peut être n'importe quel message que l'utilisateur enverrait normalement, mais si vous souhaitez forcer une intention et peut-être certaines entités, vous pouvez utiliser ce format /myIntent{"entity1":"value1","entity2":"value2"}
Le widget peut être utilisé avec n'importe quel backend mais est principalement conçu pour être utilisé avec Rasa ou Botfront.
Utilisez le canal socketio : Voir les instructions dans la documentation RASA
Si vous souhaitez traiter customData dans RASA, vous devez créer un nouveau canal. Utilisez la chaîne rasa_core.channels.socketio comme modèle pour votre nouvelle chaîne. Dans ce canal, customData peut être récupéré via data['customData'] . Ensuite, vous pouvez modifier sender_id , enregistrer customData dans la base de données, remplir les emplacements ou tout ce dont vous avez besoin avec vos données supplémentaires.
Le Webchat Rasa est développé par l'équipe de Botfront et fonctionne avec Botfront. Si votre bot est multilingue, assurez-vous de spécifiquement la langue actuelle dans l'hélice customData . Par exemple customData={{language: 'en'}} . Voir dans Botfront Docs pour plus de détails.
À partir de la version 0.8, nous avons commencé à préfixer toutes les classes CSS, si vous aviez déjà un style CSS pour le widget, il suffit de représenter rw- à toutes les classes que vous avez changé.
hiérarchie:
.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
| Classe | Description |
|---|---|
| .rw-widget-container | La div contenant la bac à chat de la version par défaut |
| .rw-widget-emballé | div de la chatbox intégrée (en utilisant un accessoire embarqué) |
| .rw-full-écran | Div de la Chatbox plein écran (en utilisant une prop |
| .RW-Conversation-Container | le parent div contenant l'en-tête, le conteste de messages et l'expéditeur |
| .RW-Messages-Container | la zone centrale où les messages apparaissent |
| .rw-Sender | Div de la zone inférieure qui invite la saisie de l'utilisateur |
| .rw-new-message | L'élément d'entrée de texte de l'expéditeur |
| .rw-sens | L'élément d'icône d'envoi de l'expéditeur |
| .rw-header | Div de la zone supérieure avec l'en-tête de Chatbox |
| .rw title | L'élément de titre de l'en-tête |
| .rw-close-bouton | L'icône proche de l'en-tête |
| .rw chargement | l'élément d'état de chargement de l'en-tête |
| .rw message | les boîtes tenant les messages du client et de la réponse |
| .rw-replies | la zone qui donne des options de réponse rapide |
| .rw-snippet | un composant pour décrire les liens |
| .rw-imageframe | un conteneur pour envoyer des images |
| .rw-videoframe | un conteneur pour envoyer une vidéo |
@Phlf @znat @theotomalty @ hub4it @dliuproduction @mattHieujnon @Mofortin @guillaMeTech
Copyright (C) 2021 Dialogue Technologies Inc.
Licencié sous la licence Apache, version 2.0 (la "licence"); Vous ne pouvez pas utiliser ce fichier sauf conforme à la licence. Vous pouvez obtenir une copie de la licence à
http://www.apache.org/licenses/LICENSE-2.0
Sauf exiger la loi applicable ou convenu par écrit, les logiciels distribués en vertu de la licence sont distribués sur une base «tel quel», sans garantie ou conditions d'aucune sorte, expresse ou implicite. Voir la licence pour la langue spécifique régissant les autorisations et les limitations en vertu de la licence. (C) 2021 Dialogue Technologies Inc. Tous droits réservés.
