chat bubble
RASA NLC support
chat-bubble ؟؟واجهة مستخدم 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()
