chat bubble
RASA NLC support
chat-bubble ??JSON 스크립팅을 사용한 간단한 웹용 챗봇 UI ??
데모 | 튜토리얼 비디오
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 생성하기만 하면 됩니다. 그런 다음 위 코드 예제의 /*SAMPLE IMPLEMENTATION*/ 주석 아래에 표시되는 모든 JavaScript를 추가합니다. 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() 에 대한 폴리필을 추가해야 할 수도 있습니다.
