Skip to content

Commit

Permalink
Merge pull request #48 from dmitrizzle/design-update
Browse files Browse the repository at this point in the history 
Update design for examples, default background and default textfield
  • Loading branch information
dmitrizzle authored Jan 29, 2018
2 parents 248f91a + f78d806 commit 4655c7d
Show file tree
Hide file tree
Showing 19 changed files with 539 additions and 736 deletions.
44 changes: 44 additions & 0 deletions ENV.md
View file
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/) 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
<!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!
174 changes: 126 additions & 48 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -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
<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.
**[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
<!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)

## 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)**
Expand Down
41 changes: 0 additions & 41 deletions component/examples/1-basic.html
View file

This file was deleted.

79 changes: 0 additions & 79 deletions component/examples/2-basic-conversation.html
View file

This file was deleted.

Loading

0 comments on commit 4655c7d

Please sign in to comment.