Simple and elegant component for building conversational interfaces on React. π€π―β¨
npm i i-chatbot --save
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')} />
Prop | Default | Type | Description |
---|---|---|---|
onGetStarted | - | func | Inital callback method to return first messages |
getStartedButton | - | object | Start button parameters |
Resets a state of chat and adds a message object if no get started button set.
Create a text message object.
Parameters:
Name | Type | Description |
---|---|---|
text | string | Message text |
actions | object(s) | Quick reply button(s) object |
Create a user's text message object.
Parameters:
Name | Type | Description |
---|---|---|
text | string | Message text |
Create a get started button.
Parameters:
Name | Type | Description |
---|---|---|
title | string | Title |
Create a quick reply button.
Parameters:
Name | Type | Description |
---|---|---|
title | string | Title |
postback | string | Postback value |
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 |
As CSS pre-processor is used LESS. Copy and modify styles from demo/src/i-chatbot.less
and then import in your app.
Have you built something cool with i-chatbot
? Submit a pull-request and add it to this list! π
- Bottom-up chat direction
- Better input validation
- Avatar placeholder
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.
The library is available as open source under the terms of the MIT License.