diff --git a/ENV.md b/ENV.md new file mode 100644 index 0000000..09bf79c --- /dev/null +++ b/ENV.md @@ -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/) guide (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. 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 + + + + + My chat-bubble Project + + + + + +``` +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! diff --git a/README.md b/README.md index 914a78d..5c4405d 100644 --- a/README.md +++ b/README.md @@ -1,65 +1,143 @@ -# 🤖 chat-bubble -[![npm version](https://badge.fury.io/js/chat-bubble.svg)](https://badge.fury.io/js/chat-bubble) -[![GitHub version](https://badge.fury.io/gh/dmitrizzle%2Fchat-bubble.svg)](https://badge.fury.io/gh/dmitrizzle%2Fchat-bubble) +# chat-bubble +[![npm version](https://badge.fury.io/js/chat-bubble.svg)](https://badge.fury.io/js/chat-bubble) +![dependencies](https://david-dm.org/dmitrizzle/chat-bubble.svg) +![downloads](https://img.shields.io/npm/dt/chat-bubble.svg) -> Simple chatbot UI for the Web with JSON scripting. +> Simple chatbot UI for the Web with JSON scripting 👋🤖🤙 ![Screenshot](screenshot.gif?raw=true) -- 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). -- 1KB GZipped. -- No dependencies. Written with ES5 (compatible with IE11+, Edge + modern browsers). +- Quick set-up & implementation. +- Works with or without Natural Language Classifiers. +- 1KB GZipped. No dependencies. Written with ES5 (compatible with IE11+). -## [[WATCH THE TUTORIAL VIDEO](https://www.youtube.com/watch?v=fkJ935a7VSk)] +*** -## [SIMPLE] Usage -```html -
- - -``` -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. +**[Demo](#demos--more-usage-examples)** | [Tutorial Video](https://www.youtube.com/watch?v=fkJ935a7VSk) + +*** + +## Installation +#### Yarn/NPM +`yarn add chat-bubble` or `npm install chat-bubble` -## Usage with build tools -`npm install chat-bubble` or `yarn add chat-bubble` +#### Download +Get the .ZIP file [here](https://github.com/dmitrizzle/chat-bubble/archive/master.zip). + +## 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](https://github.com/dmitrizzle/chat-bubble/new/master#i-have-no-es6-dev-environment)." This guide will show you how to build [this](https://dmitrizzle.github.io/chat-bubble/examples/1-basics.html). -#### 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; 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 ); -// 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. Then add all the JavaScript that you see below the `/*SAMPLE IMPLEMENTATION*/` comment in the code example above. Replace `const` with `var`. -## How to contribute: -If you'd like to contribute, please submit an issue, PR or ping me on twitter: [@dmitrizzle](https://twitter.com/dmitrizzle) +```html + + + + + My chat-bubble Project + + + + + + + + + + + +
+ + + + + + + +``` +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) + +## 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)** diff --git a/component/examples/1-basic.html b/component/examples/1-basic.html deleted file mode 100644 index 15a3374..0000000 --- a/component/examples/1-basic.html +++ /dev/null @@ -1,41 +0,0 @@ - - - Chat Bubble Basics 1 - - - - - - - - - - - - - - - - - - -
- - - \ No newline at end of file diff --git a/component/examples/2-basic-conversation.html b/component/examples/2-basic-conversation.html deleted file mode 100644 index d89ef63..0000000 --- a/component/examples/2-basic-conversation.html +++ /dev/null @@ -1,79 +0,0 @@ - - - Chat Bubble Basics 1 - - - - - - - - - - - - - - - - - - -
- - - \ No newline at end of file diff --git a/component/examples/3-basic-custom-startpoint.html b/component/examples/3-basic-custom-startpoint.html deleted file mode 100644 index e29646b..0000000 --- a/component/examples/3-basic-custom-startpoint.html +++ /dev/null @@ -1,89 +0,0 @@ - - - Chat Bubble Basics 1 - - - - - - - - - - - - - - - - - - -
- - - \ No newline at end of file diff --git a/component/examples/4-advanced-keyboard.html b/component/examples/4-advanced-keyboard.html deleted file mode 100644 index 1af9a12..0000000 --- a/component/examples/4-advanced-keyboard.html +++ /dev/null @@ -1,139 +0,0 @@ - - - Chat Bubble Basics 1 - - - - - - - - - - - - - - - - - - -
- - - \ No newline at end of file diff --git a/component/examples/5-advanced-conversation-functions.html b/component/examples/5-advanced-conversation-functions.html deleted file mode 100644 index b82de92..0000000 --- a/component/examples/5-advanced-conversation-functions.html +++ /dev/null @@ -1,101 +0,0 @@ - - - Chat Bubble Basics 1 - - - - - - - - - - - - - - - - - - -
- - - \ No newline at end of file diff --git a/component/examples/images/tutor-eliot.jpg b/component/examples/images/tutor-eliot.jpg deleted file mode 100644 index 8992e10..0000000 Binary files a/component/examples/images/tutor-eliot.jpg and /dev/null differ diff --git a/component/examples/images/tutor-install.jpg b/component/examples/images/tutor-install.jpg deleted file mode 100644 index a3aff25..0000000 Binary files a/component/examples/images/tutor-install.jpg and /dev/null differ diff --git a/component/examples/images/tutor-json.jpg b/component/examples/images/tutor-json.jpg deleted file mode 100644 index 148d3c3..0000000 Binary files a/component/examples/images/tutor-json.jpg and /dev/null differ diff --git a/component/styles/input.css b/component/styles/input.css index fa32614..299dc05 100644 --- a/component/styles/input.css +++ b/component/styles/input.css @@ -6,13 +6,12 @@ right: 0; font-family: "Helvetica Neue", Helvetica, sans-serif; color: #2c2c2c; - background: rgba(255, 255, 255, 0.95); } .bubble-container .input-wrap textarea { width: calc(100% - 20px); font-family: "Helvetica Neue", Helvetica, sans-serif; color: #2c2c2c; - background: #fafafa; + background: rgba(250, 250, 250, 0.95); font-size: 1em; letter-spacing: .5px; font-weight: 400; @@ -35,4 +34,4 @@ margin: 0; transform: scale(0); height: 0; -} \ No newline at end of file +} diff --git a/component/styles/setup.css b/component/styles/setup.css index 8fda87d..61d488f 100644 --- a/component/styles/setup.css +++ b/component/styles/setup.css @@ -1,6 +1,6 @@ /* setup container styles */ .bubble-container { - background: linear-gradient(145deg, #e5e9f1, #fff); + background: #dcdde0; height: 520px; max-width: 750px; width: 100%; @@ -29,4 +29,4 @@ h1 { body { font-family: "Helvetica Neue", Helvetica, sans-serif; margin: 0; -} \ No newline at end of file +} diff --git a/examples/1-basics.html b/examples/1-basics.html new file mode 100644 index 0000000..89f8d96 --- /dev/null +++ b/examples/1-basics.html @@ -0,0 +1,75 @@ + + + + + Basic chat-bubble Example + + + + + + + + + + + + + + + +
+ + + + + diff --git a/examples/2-custom-starting-point.html b/examples/2-custom-starting-point.html new file mode 100644 index 0000000..03ffffa --- /dev/null +++ b/examples/2-custom-starting-point.html @@ -0,0 +1,78 @@ + + + + + Custom Starting Pont for chat-bubble + + + + + + + + + + + + + + + +
+ + + + + diff --git a/examples/3-keyboard-input.html b/examples/3-keyboard-input.html new file mode 100644 index 0000000..f742a64 --- /dev/null +++ b/examples/3-keyboard-input.html @@ -0,0 +1,125 @@ + + + + + Keyboard Input for chat-bubble + + + + + + + + + + + + + + + +
+ + + + + diff --git a/examples/4-run-scripts.html b/examples/4-run-scripts.html new file mode 100644 index 0000000..33a1e07 --- /dev/null +++ b/examples/4-run-scripts.html @@ -0,0 +1,86 @@ + + + + + Run Scripts from chat-bubble + + + + + + + + + + + + + + + +
+ + + + + diff --git a/index.html b/index.html deleted file mode 100644 index 3acd32f..0000000 --- a/index.html +++ /dev/null @@ -1,230 +0,0 @@ - - - Bubblebot says Hello! - - - - - - - - - - - - - - - - - - -

bubblebot 🤖

- - - - -
- - -
-

- Note: This is a simple script that isn't connected to any Natural Language Cognition networks. Whatever you type on the keyboard will be matched against the possible options given (dark grey bubbles). This script can't correct your spelling, it can't infer from synonyms or slang etc. But it is forgiving in terms of punctuation, capitalization and amount of text you type. For example, if one of the accepted answers is "Do 👉 this," you can simply type "do" and it'll work. -

-

If you want to see this script in production with NLC and advanced API use-cases, check out Archie.AI.

-
- - - - - - - - - - - - - diff --git a/package.json b/package.json index d1b8108..669777e 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,8 @@ { "name": "chat-bubble", - "version": "1.2.4", + "version": "1.2.5", "description": "Simple chatbot UI for Web with JSON scripting. Zero dependencies.", "main": "component/Bubble.js", - "scripts": { - "playground": "open ./component/examples/4-advanced-keyboard.html" - }, "repository": { "type": "git", "url": "git+https://github.com/dmitrizzle/chat-bubble.git" diff --git a/screenshot.gif b/screenshot.gif index f156512..c5ac634 100644 Binary files a/screenshot.gif and b/screenshot.gif differ