-
-
Notifications
You must be signed in to change notification settings - Fork 171
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update examples, bump version, remove old content, update README and …
…create environment setup guide
- Loading branch information
Dmitri
committed
Jan 29, 2018
1 parent
14d92cd
commit 6b88ed9
Showing
17 changed files
with
527 additions
and
760 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| # Get your project environment started for `chat-bubble` with Yarn and WebPack | ||
| > This readme is based on [this](https://appdividend.com/2017/03/28/beginners-guide-to-setup-es6-development-environment/) (no relation). | ||
| It's presumed that you have [Yarn](https://yarnpkg.com/lang/en/docs/install/) installed on your system. NPM will work too, but you'll need to switch the commands a bit. This guide does not include versioning (like GitHub) setup which you should probably have as well. | ||
|
|
||
| 1. Run `yarn init` in your project directory. You can leave all fields blank. | ||
| 2. Run `yarn add webpack webpack-dev-server babel-core babel-loader babel-preset-es2015 --save-dev` | ||
| 3. Create `webpack.config.js` in the root of your project directory with the following code: | ||
| ```javascript | ||
| module.exports = { | ||
| entry: './app/main.js', | ||
| output: { | ||
| filename: 'bundle.js' | ||
| }, | ||
| module: { | ||
| loaders: [ | ||
| { | ||
| loader: 'babel-loader', | ||
| test: /\.js$/, | ||
| exclude: /node_modules/ | ||
| } | ||
| ] | ||
| }, | ||
| devServer: { | ||
| port: 3000 | ||
| } | ||
| }; | ||
| ``` | ||
| 4. Create `index.html` inside the root of your project directory: | ||
| ```html | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>My chat-bubble Project</title> | ||
| </head> | ||
| <body> | ||
| <script src="./bundle.js"></script> | ||
| </body> | ||
| </html> | ||
| ``` | ||
| 5. Run `yarn add chat-bubble` and create `/app` direcotry with `main.js` that has the sample code from [README.md](README.md#quick-start). | ||
|
|
||
| Now you can run `yarn webpack-dev-server` and open [http://localhost:3000](http://localhost:3000) in your browser to test your project! |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,66 +1,141 @@ | ||
| # 🤖 chat-bubble | ||
| [](https://badge.fury.io/js/chat-bubble) | ||
| [](https://badge.fury.io/js/chat-bubble) | ||
| [](https://badge.fury.io/gh/dmitrizzle%2Fchat-bubble) | ||
|
|
||
| > Simple chatbot UI for the Web with JSON scripting. | ||
|  | ||
|
|
||
| - Super-easy to install & use. Here's the [tutorial bot](https://dmitrizzle.github.io/chat-bubble/index.html) to help you get started. Or watch [this video](https://www.youtube.com/watch?v=fkJ935a7VSk). | ||
| - Quick set-up, no-brainer implementation. Works with or without Natural Language Classifiers. | ||
| - 1KB GZipped. | ||
| - No dependencies. Written with ES5 (compatible with IE11+, Edge + modern browsers). | ||
|
|
||
| ## [[WATCH THE TUTORIAL VIDEO](https://www.youtube.com/watch?v=fkJ935a7VSk)] | ||
| # [Demo](#demos--more-usage-examples) | [Tutorial Video](https://www.youtube.com/watch?v=fkJ935a7VSk) 👀 | ||
|
|
||
| ## [SIMPLE] Usage | ||
| ```html | ||
| <div id="chat"></div> | ||
| <script src="./component/Bubbles.js"></script> | ||
| <script> | ||
| var givemeBubbles = new Bubbles( | ||
| document.getElementById('chat'), | ||
| "givemeBubbles" | ||
| ); | ||
| // pass the JSON script and you're done! | ||
| givemeBubbles.talk({ "ice": { "says": [ "Hi" ] } }); | ||
| </script> | ||
| ``` | ||
| This component comes with styles in multiple CSS files. You can turn them into Styled Components, SASS or whatever. For now it's just vanilla CSS so that this tool can work anywhere, regardless of the environment. See detailed examples in [./component/examples](https://github.com/dmitrizzle/chat-bubble/tree/master/component/examples) folder. | ||
| *** | ||
|
|
||
| ## Installation | ||
| #### Yarn/NPM | ||
| `yarn add chat-bubble` or `npm install chat-bubble` | ||
|
|
||
| #### Download | ||
| Get the .ZIP file [here](https://github.com/dmitrizzle/chat-bubble/archive/master.zip). | ||
|
|
||
| ## Usage with build tools | ||
| `npm install chat-bubble` or `yarn add chat-bubble` | ||
| ## Quick start | ||
| 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](ENV.md). Otherwise see "I have no ES6 dev environment." | ||
|
|
||
| #### ES6 imports & quickstart | ||
| ```javascript | ||
| import { Bubbles, prepHTML } from "./node_modules/chat-bubble/component/Bubbles.js" | ||
|
|
||
| // HTML is ready-build for you here | ||
| prepHTML() | ||
| // if you have a different dir structure from the example in the import method above pass it as an option: | ||
| // prepHTML({relative_path: "./node_modules_dir_name/chat-bubble/"}) | ||
| // You can also specify a different ID name for the container div (default is "chat"): | ||
| // prepHTML({container: "my_chatbox_id"}) | ||
|
|
||
| // this is your JSON conversation structure; see tutorial video & examples for more info | ||
| const convo = { "ice": { "says": [ "Hi" ] } } | ||
|
|
||
| // set up the chatbot script | ||
| const givemeBubbles = new Bubbles( | ||
| document.getElementById('chat'), // attach chatbot to placeholder above ^^ | ||
| "givemeBubbles", // you need to pass the name of the constructor variable that evokes Bubble function here | ||
| /************************************************************************/ | ||
| /******* 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 | ||
| // you can specify a different ID for the HTML div container with | ||
| // `container: "my_chatbox_id"` option | ||
| prepHTML({relative_path: "../node_modules/chat-bubble/"}) | ||
|
|
||
|
|
||
| /************************************************************************/ | ||
| /************************ SAMPLE IMPLEMENTATION *************************/ | ||
| /************************************************************************/ | ||
|
|
||
| // initialize by constructing a named function... | ||
| var chatWindow = new Bubbles( | ||
| document.getElementById('chat'), // ...passing HTML container element... | ||
| "chatWindow" // ...and name of the function as a parameter | ||
| ); | ||
|
|
||
| // pass JSON to your function and you're done! | ||
| givemeBubbles.talk(convo); | ||
| // `.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 | ||
| ); | ||
| ``` | ||
|
|
||
| ## "I have no ES6 dev environment!" | ||
| 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](https://github.com/dmitrizzle/chat-bubble/archive/master.zip) and create `index.html` inside of that directory and add all the JavaScript that you see SAMPLE IMPLEMENTATION comment above. | ||
|
|
||
| ```html | ||
| <!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! | ||
|
|
||
| ## Demos & more usage examples: | ||
| 1. [Basic example](https://dmitrizzle.github.io/chat-bubble/examples/1-basics.html): see how the code above looks in browser. | ||
| 2. [Custom starting point](https://dmitrizzle.github.io/chat-bubble/examples/2-custom-starting-point.html): what if you wanted to resume conversation from somewhere other than required `ice:{}` starting point? This is how you'd do it. | ||
| 3. [Keyboard input](https://dmitrizzle.github.io/chat-bubble/examples/3-keyboard-input.html): a basic plugin-like structure that lets you implement your own keyboard input and text recognition (though it does not process natural language). | ||
| 4. [Run scripts](https://dmitrizzle.github.io/chat-bubble/examples/4-run-scripts.html): 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. | ||
| 5. Natural Language Classifier implementation (coming soon) | ||
|
|
||
| ## How to contribute: | ||
| If you'd like to contribute, please submit an issue, PR or ping me on twitter: [@dmitrizzle](https://twitter.com/dmitrizzle) | ||
| ## FAQ: | ||
| - 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](CONTRIBUTING.md). | ||
|
|
||
| ### Who uses chat-bubble? | ||
| - **[Archie.AI](https://www.archie.ai)** | ||
| - **[Omer Tarik Koc](https://omertarikkoc.com)** | ||
| - If you'd like to add your site, pls submit a PR to this README.md ✌️ |
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.