chat bubble
RASA NLC support
chat-bubble ??UI chatbot อย่างง่ายสำหรับเว็บพร้อมสคริปต์ JSON ??
สาธิต | วิดีโอสอน
yarn add chat-bubble หรือ npm install chat-bubble
รับไฟล์ .ZIP ที่นี่
วิธีนี้จะถือว่าคุณมีสภาพแวดล้อมการพัฒนาที่ทำงานอยู่ซึ่งสามารถแปล ES6 JavaScript ได้ มีคำแนะนำสั้นๆ เกี่ยวกับวิธีการทำงานที่นี่ มิฉะนั้น โปรดดูที่ "ฉันไม่มีสภาพแวดล้อมการพัฒนา ES6" คู่มือนี้จะแสดงวิธีสร้างสิ่งนี้
/************************************************************************/
/******* CONVENIENCE METHODS AVAILABLE FOR ES6 BUILD ENVIRONMENTS *******/
/************************************************************************/
// the URL of where you've installed the component; you may need to change this:
import {
Bubbles ,
prepHTML
} from "../node_modules/chat-bubble/component/Bubbles.js" ;
// this is a convenience script that builds all necessary HTML,
// imports all scripts and stylesheets; your container DIV will
// have a default `id="chat"`;
// you can specify a different ID with:
// `container: "my_chatbox_id"` option
prepHTML ( { relative_path : "../node_modules/chat-bubble/" } ) ;
/************************************************************************/
/************************ SAMPLE IMPLEMENTATION *************************/
/************************************************************************/
// initialize by constructing a named function...
const chatWindow = new Bubbles (
document . getElementById ( "chat" ) , // ...passing HTML container element...
"chatWindow" // ...and name of the function as a parameter
) ;
// `.talk()` will get your bot to begin the conversation
chatWindow . talk (
// pass your JSON/JavaScript object to `.talk()` function where
// you define how the conversation between the bot and user will go
{
// "ice" (as in "breaking the ice") is a required conversation object
// that maps the first thing the bot will say to the user
ice : {
// "says" defines an array of sequential bubbles
// that the bot will produce
says : [ "Hey!" , "Can I have a banana?" ] ,
// "reply" is an array of possible options the user can pick from
// as a reply
reply : [
{
question : "?" , // label for the reply option
answer : "banana" // key for the next conversation object
}
]
} , // end required "ice" conversation object
// another conversation object that can be queued from within
// any other conversation object, including itself
banana : {
says : [ "Thank you!" , "Can I have another banana?" ] ,
reply : [
{
question : "??" ,
answer : "banana"
}
]
} // end conversation object
} // end conversation object
) ; หากคุณไม่ต้องการกังวลกับการตั้งค่าเซิร์ฟเวอร์การพัฒนาและทรานสไพเลอร์สำหรับโค้ด ES6 ฉันเข้าใจแล้ว เพียงแตกไฟล์แพ็คเกจและสร้าง index.html ภายในไดเร็กทอรีนั้น จากนั้นเพิ่ม JavaScript ทั้งหมดที่คุณเห็นด้านล่างความคิดเห็น /*SAMPLE IMPLEMENTATION*/ ในตัวอย่างโค้ดด้านบน แทนที่ const ด้วย var
<!DOCTYPE html >
< html lang =" en " >
< head >
< meta charset =" UTF-8 " />
< title > My chat-bubble Project </ title >
<!-- stylesheets are conveniently separated into components -->
< link rel =" stylesheet " media =" all " href =" ../styles/setup.css " />
< link rel =" stylesheet " media =" all " href =" ../styles/says.css " />
< link rel =" stylesheet " media =" all " href =" ../styles/reply.css " />
< link rel =" stylesheet " media =" all " href =" ../styles/typing.css " />
< link rel =" stylesheet " media =" all " href =" ../styles/input.css " />
</ head >
< body >
<!-- container element for chat window -->
< div id =" chat " > </ div >
<!-- import the JavaScript file -->
< script src =" ./component/Bubbles.js " > </ script >
< script >
/************************************************************************/
/**************** add "SAMPLE IMPLEMENTATION" code here *****************/
/************************************************************************/
</ script >
</ body >
</ html >ตอนนี้เปิดไฟล์นี้ในเบราว์เซอร์ของคุณ เสร็จแล้ว!
ice:{} จุดเริ่มต้น นี่คือวิธีที่คุณจะทำ ตรวจสอบโฟลเดอร์ /examples เพื่อดูซอร์สโค้ดและแนวคิดเพิ่มเติม
Object.assign() และ String.includes()
