rasa webchat
css firefox bug
<script> Di <body/> : Anda:
< 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 > Tentang Gambar: width dan height Tentukan ukuran dalam piksel yang gambar dalam pesan berskala tanaman. Jika tidak ada, gambar akan skala ke lebar maksimum wadah dan gambar.
Instal Paket NPM:
npm install rasa-webchatKemudian:
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 diatur ke true jika Anda tidak ingin melihat peluncur. | Prop / param | Nilai default | Keterangan |
|---|---|---|
initPayload | null | Payload dikirim ke Rasa saat percakapan dimulai |
socketUrl | null | URL soket |
socketPath | null | Tutup jendela obrolan |
customData | null | Objek sewenang -wenang dikirim dengan soket. Jika menggunakan dengan Botfront, itu harus mencakup bahasa (misalnya {"language": "en"} ) |
docViewer | false | Jika Anda menambahkan prop ini ke komponen atau ke skrip init, docViewer=true , ini akan memperlakukan tautan dalam pesan yang diterima sebagai tautan ke dokumen https://docs.google.com/viewer .pdf .doc .xlsx dll. |
title | 'Welcome" | Judul ditampilkan di header widget |
subtitle | null | Subtitle ditampilkan di bawah judul di header widget |
inputTextFieldHint | "Type a message" | Pesan Pesan Pesan Placeholder Bidang |
hideWhenNotConnected | true | Jika true widget akan bersembunyi saat koneksi ke soket hilang |
connectOn | "mount" | Prop ini memungkinkan Anda memilih kapan widget akan mencoba menghubungkan ke server. Secara default, ia mencoba menghubungkan segera setelah dipasang. Jika Anda memilih connectOn='open' itu hanya akan mencoba koneksi saat widget dibuka. Ini hanya dapat mengambil nilai mount dan open . |
onSocketEvent | null | Hubungi kode khusus di acara soket tertentu |
embedded | false | Setel ke true jika Anda ingin menyematkan halaman web. Widget akan selalu terbuka dan initPayload akan segera dipicu |
showFullScreenButton | false | Tampilkan sakelar layar penuh |
displayUnreadCount | false | Jalur ke gambar yang ditampilkan pada peluncur saat widget ditutup |
showMessageDate | false | Tampilkan tanggal pesan. Dapat ditimpa dengan suatu fungsi: (timestamp, message) => return 'my custom date' |
customMessageDelay | Lihat di bawah | Prop ini adalah fungsi, fungsi mengambil string pesan sebagai argumen. Fungsi yang ditentukan akan dipanggil setiap kali pesan diterima dan nilai yang dikembalikan akan digunakan sebagai penundaan milidetik sebelum menampilkan pesan baru. |
params | Lihat di bawah | Pada dasarnya digunakan untuk menyesuaikan ukuran gambar, juga digunakan untuk mengubah opsi penyimpanan. |
storage | "local" | Menentukan lokasi penyimpanan status percakapan di browser. "session" mendefinisikan negara yang akan disimpan di penyimpanan sesi. Penyimpanan sesi tetap ada saat memuat ulang halaman, dan dihapus setelah browser atau tab ditutup, atau ketika sessionStorage.clear() dipanggil. "local" mendefinisikan negara yang akan disimpan di Stoage lokal. Penyimpanan lokal berlanjut setelah browser ditutup, dan dibersihkan ketika cookie browser dibersihkan, atau ketika localStorage.clear() dipanggil. |
customComponent | null | Komponen khusus untuk digunakan dengan respons khusus. Misalnya: customComponent={ (messageData) => (<div>Custom React component</div>)} . Harap dicatat bahwa ini hanya dapat digunakan jika Anda menghubungi WebChat dari aplikasi React karena Anda tidak dapat menulis komponen dalam javscript murni. |
onWidgetEvent | {} | Hubungi kode khusus pada acara widget tertentu ( onChatOpen , onChatClose , onChatHidden , tersedia untuk saat ini), tambahkan fungsi ke properti objek yang diinginkan di alat peraga untuk bereaksi terhadap acara tersebut. |
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 hanya memungkinkan untuk menentukan dimensi gambar khusus:
params = { {
images : {
dims : {
width : 300 ,
height : 200
}
}
} }Pesan teks yang diterima saat widget ditutup akan ditampilkan sebagai tooltip.
Saat menghubungkan kembali ke sesi obrolan yang ada, bot akan mengirim pesan yang terkandung dalam kunci LocalStorage yang ditentukan oleh konstanta NEXT_MESSAGE . Pesan tersebut harus dirangkai JSON dengan properti message yang menggambarkan pesan dan properti expiry diatur ke cap waktu UNIX dalam milidetik setelah itu pesan ini tidak boleh dikirim. Ini berguna jika Anda ingin bot Anda dapat menawarkan pengguna Anda untuk menavigasi di sekitar situs.
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 }
/> ;
} Payload dapat berupa pesan apa pun yang biasanya dikirim pengguna, tetapi jika Anda ingin memaksakan niat dan mungkin beberapa entitas, Anda dapat menggunakan format itu /myIntent{"entity1":"value1","entity2":"value2"}
Widget dapat digunakan dengan backend apa pun tetapi terutama dirancang untuk digunakan dengan RASA atau Botfront.
Gunakan saluran socketio : lihat instruksi dalam dokumentasi RASA
Jika Anda ingin memproses customData di Rasa, Anda harus membuat saluran baru. Gunakan saluran rasa_core.channels.socketio sebagai templat untuk saluran baru Anda. Di saluran ini, customData dapat diambil melalui data['customData'] . Kemudian Anda dapat memodifikasi sender_id , menyimpan customData ke database, mengisi slot atau apa pun yang Anda butuhkan dengan data tambahan Anda.
Rasa Webchat dikembangkan oleh tim botfront dan bekerja dengan Botfront. Jika bot Anda multibahasa, pastikan untuk spesifik bahasa saat ini dalam prop customData . Misalnya customData={{language: 'en'}} . Lihat di Botfront Docs untuk lebih jelasnya.
Dari versi 0.8 kami mulai awalan semua kelas CSS, jika Anda sudah memiliki gaya CSS untuk widget, cukup persiapkan rw- untuk semua kelas yang Anda ubah.
hirarki:
.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
| Kelas | Keterangan |
|---|---|
| .RW-WIDGET-Container | Div yang berisi kotak obrolan dari versi default |
| .rw-widget-embedded | Div dari kotak obrolan tertanam (menggunakan prop tertanam) |
| .rw-full-screen | Div dari kotak obrolan layar penuh (menggunakan fullscreenmode prop) |
| .RW-Conversation-Container | div induk yang berisi header, kontainer pesan dan pengirim |
| .RW-messages-container | area pusat tempat pesan muncul |
| .rw-Sender | Div dari area bawah yang meminta input pengguna |
| .rw-message | elemen input teks pengirim |
| .rw-send | Elemen Ikon Kirim Pengirim |
| .RW-header | Div dari area teratas dengan header chatbox |
| .rw-title | elemen judul header |
| .rw-kancing-close | ikon tajuk yang dekat |
| .rw-loading | elemen status pemuatan header |
| .rw-message | kotak yang memegang pesan klien dan tanggapan |
| .rw-replies | Area yang memberikan opsi balasan cepat |
| .rw-snippet | komponen untuk menjelaskan tautan |
| .rw-imageframe | wadah untuk mengirim gambar |
| .rw-videoframe | wadah untuk mengirim video |
@Phlf @znat @theotomalty @hub4it @dliuproduction @matThieUJnon @mofortin @guillaumetech
Hak Cipta (C) 2021 Dialog Technologies Inc.
Berlisensi di bawah lisensi Apache, versi 2.0 ("lisensi"); Anda tidak boleh menggunakan file ini kecuali sesuai dengan lisensi. Anda dapat memperoleh salinan lisensi di
http://www.apache.org/licenses/LICENSE-2.0
Kecuali diharuskan oleh hukum yang berlaku atau disepakati secara tertulis, perangkat lunak yang didistribusikan di bawah lisensi didistribusikan berdasarkan "sebagaimana adanya", tanpa jaminan atau ketentuan dalam bentuk apa pun, baik tersurat maupun tersirat. Lihat lisensi untuk izin dan batasan yang mengatur bahasa tertentu di bawah lisensi. (C) 2021 Dialogue Technologies Inc. Semua hak dilindungi undang -undang.
