rasa webchat
css firefox bug
<script> Tag In deinem <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 > Über Bilder: width und height definieren die Größe in Pixeln, auf die Bilder in Nachrichten aufnimmt. Wenn nicht vorhanden ist, skaliert das Bild die maximale Breite des Behälters und des Bildes.
Installieren Sie das NPM -Paket:
npm install rasa-webchatDann:
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 -Set auf true gesetzt ist, wenn Sie den Launcher nicht sehen möchten. | Prop / Param | Standardwert | Beschreibung |
|---|---|---|
initPayload | null | Nutzlast an Rasa gesendet zu Beginn des Gesprächs |
socketUrl | null | Sockel -URL |
socketPath | null | Schließen Sie das Chatfenster |
customData | null | Willkürliches Objekt mit der Steckdose gesendet. Wenn Sie mit Botfront verwendet werden, muss die Sprache (z. {"language": "en"} ) enthalten sein. |
docViewer | false | Wenn Sie diese Requisite zur Komponente oder zum Init -Skript hinzufügen, docViewer=true , behandelt dies Links in empfangenen Nachrichten als Links zu einem Dokument ( .pdf .doc .xlsx usw.) und öffnet sie in einem Popup mit https://docs.google.com/viewer Service |
title | 'Welcome" | Titel im Header des Widgets gezeigt |
subtitle | null | Untertitel unter dem Titel im Header des Widgets gezeigt |
inputTextFieldHint | "Type a message" | Nutzernachrichteneingabefeld Platzhalter |
hideWhenNotConnected | true | Wenn das true verbergt sich das Widget, wenn die Verbindung zum Sockel verloren geht |
connectOn | "mount" | Mit dieser Requisit können Sie auswählen, wann das Widget versucht, eine Verbindung zum Server herzustellen. Standardmäßig versucht es, sich zu verbinden, sobald es montiert. Wenn Sie connectOn='open' auswählen, wird nur dann eine Verbindung versucht, wenn das Widget geöffnet wird. Es kann nur die Werte mount und open . |
onSocketEvent | null | Rufen Sie den benutzerdefinierten Code auf einem bestimmten Socket -Ereignis auf |
embedded | false | Legen Sie auf true , wenn Sie die in eine Webseite einbetten möchten. Das Widget ist immer geöffnet und der initPayload wird sofort ausgelöst |
showFullScreenButton | false | Zeigen Sie einen Vollbildschalter an |
displayUnreadCount | false | Pfad zu einem auf dem Launcher angezeigten Bild, wenn das Widget geschlossen ist |
showMessageDate | false | Meldungsdatum anzeigen. Kann mit einer Funktion überschrieben werden: (timestamp, message) => return 'my custom date' |
customMessageDelay | Siehe unten | Diese Requisite ist eine Funktion, die Funktion nimmt eine Nachrichtenzeichenfolge als Argument. Die definierte Funktion wird jedes Mal aufgerufen, wenn eine Nachricht empfangen wird und der zurückgegebene Wert als Millisekundenverzögerung verwendet wird, bevor eine neue Nachricht angezeigt wird. |
params | Siehe unten | Im Wesentlichen verwendet, um die Bildgröße anzupassen, die auch zum Ändern der Speicheroptionen verwendet wird. |
storage | "local" | Gibt den Speicherort des Konversationsstatus im Browser an. "session" definiert den Status, der im Sitzungsspeicher gespeichert wird. Der Sitzungsspeicher bleibt nach dem Nachladen der Seite bestehen und wird nach Abschluss des Browsers oder der Registerkarte oder bei der Aufforderung von sessionStorage.clear() gelöscht. "local" definiert den Staat, der in der lokalen Stoage gespeichert werden soll. Der lokale Speicher bleibt bestehen, nachdem der Browser geschlossen wurde, und wird gelöscht, wenn die Kekse des Browsers gelöscht werden oder wenn localStorage.clear() aufgerufen wird. |
customComponent | null | Benutzerdefinierte Komponente, die mit benutzerdefinierten Antworten verwendet werden soll. customComponent={ (messageData) => (<div>Custom React component</div>)} Bitte beachten Sie, dass dies nur verwendet werden kann, wenn Sie den Webchat von einer React -Anwendung aufrufen, da Sie keine Komponente in reinem Javscript schreiben können. |
onWidgetEvent | {} | Rufen Sie den benutzerdefinierten Code auf einem bestimmten Widget -Ereignis auf ( onChatOpen , onChatClose , onChatHidden sind vorerst verfügbar). Fügen Sie der gewünschten Objekteigenschaft in den Requisiten eine Funktion hinzu, damit es auf das Ereignis reagiert. |
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 Mit den params -Requisiten können benutzerdefinierte Bildabmessungen angegeben werden:
params = { {
images : {
dims : {
width : 300 ,
height : 200
}
}
} }Textnachrichten, die beim Schließen des Widgets empfangen werden, werden als Tooltip angezeigt.
Bei der Wiederverbindung mit einer vorhandenen Chat -Sitzung sendet der Bot eine Meldung, die in der von der NEXT_MESSAGE -Konstante angegebenen Lokalstor -Taste enthalten ist. Die Nachricht sollte JSON mit einer message erfolgen, die die Nachricht und eine expiry -Eigenschaft, die auf einen Unix -Zeitstempel in Millisekunden eingestellt ist, beschreibt, wonach diese Nachricht nicht gesendet werden sollte. Dies ist nützlich, wenn Sie möchten, dass Ihr Bot Ihrem Benutzer anbieten kann, um auf der Website zu navigieren.
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 }
/> ;
} Die Nutzlast kann eine Nachricht sein, die der Benutzer normalerweise senden würde. Wenn Sie jedoch eine Absicht und möglicherweise einige Entitäten erzwingen möchten, können Sie dieses Format /myIntent{"entity1":"value1","entity2":"value2"}
Das Widget kann mit jedem Backend verwendet werden, ist jedoch hauptsächlich für die Verwendung mit Rasa oder Botfront ausgelegt.
Verwenden Sie den socketio -Kanal: Siehe Anweisungen in der RASA -Dokumentation
Wenn Sie customData in Rasa verarbeiten möchten, müssen Sie einen neuen Kanal erstellen. Verwenden Sie Channel rasa_core.channels.socketio als Vorlage für Ihren neuen Kanal. In diesem Kanal kann customData über data['customData'] abgerufen werden. Anschließend können Sie sender_id ändern, customData in der Datenbank speichern, Slots oder was auch immer Sie mit Ihren zusätzlichen Daten benötigen.
Der Rasa Webchat wird vom Botfront -Team entwickelt und funktioniert mit Botfront. Wenn Ihr Bot mehrsprachig ist, stellen Sie sicher, dass Sie die aktuelle Sprache in der customData -Prob spezifisch sind. EG customData={{language: 'en'}} . Weitere Informationen finden Sie in Botfront -Dokumenten.
Aus Version 0.8 haben wir alle CSS-Klassen vorangestellt. Wenn Sie bereits ein CSS-Styling für das Widget hatten, bereiten Sie einfach rw- auf alle Klassen vor, die Sie geändert haben.
Hierarchie:
.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
| Klasse | Beschreibung |
|---|---|
| .RW-Widget-Container | Die DIV, die die Chatbox der Standardversion enthält |
| .RW-Widget-eingebettet | Div der eingebetteten Chatbox (mit eingebetteter Prop) |
| .rw-full-Screen | Div der Vollbild -Chatbox (mit FullscreenMode -Requisite) |
| .RW-Konversation-Container | Der übergeordnete Div, der den Header, den Nachrichten-Container und den Absender enthält |
| .RW-Messages-Container | Der zentrale Bereich, in dem die Nachrichten erscheinen |
| .RW-Sender | Div des unteren Bereichs, der die Benutzereingabe auffordert |
| .RW-New-Message | Das Texteingangselement des Absenders |
| .rw-send | Das Send -Symbolelement des Absenders |
| .RW-Header | Div des oberen Bereichs mit dem Chatbox -Header |
| .Rw-title | Das Titelelement des Kopfes |
| .RW-CLOSE-Button | Die enge Ikone des Headers |
| .RW-Ladung | Das Ladestatuselement des Headers |
| .rw-message | Die Felder, die die Nachrichten von Client und Antwort enthalten |
| .RW-Replys | Der Bereich, der schnelle Antwortoptionen gibt |
| .rw-snippet | Eine Komponente zur Beschreibung von Links |
| .RW-ImageFrame | Ein Container zum Senden von Bildern |
| .rw-videoframe | Ein Container zum Senden von Videos |
@Phlf @znat @theotomalty @hub4it @dliuProduction @matthieujnon @mofortin @guillumetech
Copyright (C) 2021 Dialogetechnologien Inc.
Lizenziert unter der Apache -Lizenz, Version 2.0 (der "Lizenz"); Sie dürfen diese Datei nur in Übereinstimmung mit der Lizenz verwenden. Sie können eine Kopie der Lizenz bei erhalten
http://www.apache.org/licenses/LICENSE-2.0
Sofern nicht nach geltendem Recht oder schriftlich zu vereinbart wird, wird die im Rahmen der Lizenz verteilte Software auf "As is" -Basis ohne Gewährleistung oder Bedingungen jeglicher Art ausdrücklich oder impliziert verteilt. Siehe die Lizenz für die spezifischen Sprachberechtigungen und Einschränkungen im Rahmen der Lizenz.
