Simple and elegant component for building conversational interfaces on React.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
assets
demo/src Updated dependencies, enabled eslint Dec 31, 2017
src Environmentally disabled message scroll (tests only) Jan 9, 2018
tests
.eslintrc.yml
.gitignore Refactored styling approach Aug 22, 2017
.travis.yml nwb integration Jun 6, 2017
CHANGELOG.md
CONTRIBUTING.md Environmentally disabled message scroll (tests only) Jan 9, 2018
LICENSE Added MIT license Jun 8, 2017
README.md
nwb.config.js Added bootstrap styles Jun 7, 2017
package.json

README.md

Marathon

i-chatbot

Simple and elegant component for building conversational interfaces on React. 🤖💯

build npm coverage license

Getting Started 🚀

Installation

npm i i-chatbot --save

Basic Usage

Import component

import ChatBot, { ChatBotUtil } from 'i-chatbot'

Create methods that will handle postback events from a chatbot. It should return an array of message objects to reply on user's action with a callback.

  getStarted () {
    return [
      ChatBotUtil.textMessage(['Hi!', 'Hey there!'].any()),
      ChatBotUtil.textMessage(['How is life?', 'What\'s up?'].any(),
        ChatBotUtil.makeReplyButton('Great!', this.intro))
    ]
  }

  intro () {
    return [
      ChatBotUtil.textMessage('That\'s good to hear!')
    ]
  }

Render ChatBot with a get started callback method and a start button.

<ChatBot onGetStarted={this.getStarted}
         getStartedButton={ChatBotUtil.makeGetStartedButton('Get Started')} />

ChatBot

Props

Prop Default Type Description
onGetStarted - func Inital callback method to return first messages
getStartedButton - object Start button parameters

Methods

startOver (message)

Resets a state of chat and adds a message object if no get started button set.

ChatBotUtil

Methods

textMessage (text, ...actions)

Create a text message object.

Parameters:

Name Type Description
text string Message text
actions object(s) Quick reply button(s) object

userTextMessage (text)

Create a user's text message object.

Parameters:

Name Type Description
text string Message text

makeReplyButton (title)

Create a get started button.

Parameters:

Name Type Description
title string Title

makeReplyButton (title, postback)

Create a quick reply button.

Parameters:

Name Type Description
title string Title
postback string Postback value

makeTextInputField (title, postback)

Create a text input field.

Parameters:

Name Type Description
send string Title of the submit button
placeholder string Placeholder for input field
postback string Postback value

Style

As CSS pre-processor is used LESS. Copy and modify styles from demo/src/i-chatbot.less and then import in your app.

Built with i-chatbot 🤘

  • Personal website of Oleh Stasula
  • Landing page of Justin Case

Have you built something cool with i-chatbot? Submit a pull-request and add it to this list! 😉

To-do 🛠

  • Bottom-up chat direction
  • Better input validation
  • Avatar placeholder

Contribution 💪

Your contribution is welcomed, no matter how big or small!

Please have a look at the contribution guide for details about project structure, development environment, test suite, code style, etc. All the version updates are mentioned in the changelog.

License 🔖

The library is available as open source under the terms of the MIT License.