0.1.0 • Published 4 years ago

chatbot-watson v0.1.0

Weekly downloads
-
License
MIT
Repository
github
Last release
4 years ago

Getting Started 🚀

Installation

Testar

npm i chatbot-watson --save

Basic Usage

Import component

import ChatBot, { ChatBotUtil } from "chatbot-watson";

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

PropDefaultTypeDescription
onGetStarted-funcInital callback method to return first messages
getStartedButton-objectStart 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:

NameTypeDescription
textstringMessage text
actionsobject(s)Quick reply button(s) object

userTextMessage (text)

Create a user's text message object.

Parameters:

NameTypeDescription
textstringMessage text

makeReplyButton (title)

Create a get started button.

Parameters:

NameTypeDescription
titlestringTitle

makeReplyButton (title, postback)

Create a quick reply button.

Parameters:

NameTypeDescription
titlestringTitle
postbackstringPostback value

makeTextInputField (title, postback)

Create a text input field.

Parameters:

NameTypeDescription
sendstringTitle of the submit button
placeholderstringPlaceholder for input field
postbackstringPostback value

Style

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

Built with Bender 🤘

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

Have you built something cool with Bender? 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.