Skip to content
This repository has been archived by the owner on Oct 21, 2022. It is now read-only.
/ i-chatbot Public archive

Simple and elegant component for building conversational interfaces on React.

License

Notifications You must be signed in to change notification settings

endore8/i-chatbot

Repository files navigation

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.

About

Simple and elegant component for building conversational interfaces on React.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published