Simple chatbot UI for the Web with JSON scripting ππ€π€
- Quick set-up & implementation.
- Works with or without Natural Language Classifiers.
- 1KB GZipped. No dependencies. Written with ES5 (compatible with IE11+).
yarn add chat-bubble or npm install chat-bubble
Get the .ZIP file here.
This method assumes you've got a development environment running that's capable of transpiling ES6 JavaScript. There's a short guide on how to get one working here. Otherwise see "I have no ES6 dev environment." This guide will show you how to build this.
/************************************************************************/ /******* 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 );
If you don't want to bother with setting up a development server and transpiler for ES6 code, I get it. Simply unzip the package and create index.html inside of that directory. Then add all the JavaScript that you see below the /*SAMPLE IMPLEMENTATION*/ comment in the code example above. Replace const with 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>
Now open this file in your browser. Done!
- Basic example: see how the code above looks in browser.
- Custom starting point: what if you wanted to resume conversation from somewhere other than required
ice:{}starting point? This is how you'd do it. - Keyboard input: a basic plugin-like structure that lets you implement your own keyboard input and text recognition (though it does not process natural language).
- Run scripts: your bot's replies can do things. Not only it could say something, but it could point your user towards an action, or perform it by running JavaScript.
- Natural Language Classifier implementation is possible with additional effort by intercepting the response message and keyboard input. Example using RASA (docs) can be found here.
Check out /examples folder for the source code and more ideas.
- Can I add images and HTML code to my bot?
- Yes! custom graphics, YouTube videos - whatever you want!
- How can I contribute?
- See the contribution guide here.
- Buy me a coffee: use the GH "Sponsor" button or do it via https://ko-fi.com/dmitrizzle
- You may need to add in polyfills for
Object.assign()andString.includes()