React Native Chatbot

A react native chatbot component to create conversation chats. Based on react-simple-chatbot.

Getting Start

npm install react-native-chatbot --save

Usage

import ChatBot from 'react-native-chatbot';

const steps = [
  {
    id: '0',
    message: 'Welcome to react chatbot!',
    trigger: '1',
  },
  {
    id: '1',
    message: 'Bye!',
    end: true,
  },
];

<ChatBot steps={steps} />

Documentation

Properties

Name	Type	Default	Description
`avatarStyle`	`PropTypes.object`		The style object to use to override the avatar element
`avatarWrapperStyle`	`PropTypes.object`		The style object to use to override the avatar surrounding element
`botAvatar`	`PropTypes.string`	`img`	Bot image source
`botBubbleColor`	`PropTypes.string`	`#6E48AA`	Bot bubble color
`botDelay`	`PropTypes.number`	`1000`	The delay time of bot messages
`botFontColor`	`PropTypes.string`	`#fff`	Bot font color
`bubbleStyle`	`PropTypes.object`		The style object to use to override the bubble element
`optionStyle`	`PropTypes.object`		The style object to use to override the option container
`optionElementStyle`	`PropTypes.object`		The style object to use to override the option element
`optionFontColor`	`PropTypes.string`		Option font color
`optionBubbleColor`	`PropTypes.string`		Option bubble color
`className`	`PropTypes.string`		Add a class name to root element
`contentStyle`	`PropTypes.object`		The style object to use to override the scroll element
`customDelay`	`PropTypes.number`	`1000`	The delay time of custom messages
`customStyle`	`PropTypes.object`		The style object to use to override the custom step element
`footerStyle`	`PropTypes.object`		The style object to use to override the footer element
`handleEnd({ renderedSteps, steps, values })`	`PropTypes.func`		The callback function when chat ends
`headerComponent`	`PropTypes.element`		Header component for the chatbot
`hideUserAvatar`	`PropTypes.bool`	`false`	If true the user avatar will be hidden in all steps
`inputStyle`	`PropTypes.object`		The style object to use to override the input element
`keyboardVerticalOffset`	`PropTypes.number`	`ios ? 44 : 0`	Vertical offset of keyboard view. Check keyboardVerticalOffset
`placeholder`	`PropTypes.string`	`Type the message ...`	Chatbot input placeholder
`steps`	`PropTypes.array`		The chatbot steps to display
`style`	`PropTypes.object`		The style object to use to override the submit button element
`submitButtonStyle`	`PropTypes.object`		The style object to use to override the button element
`submitButtonContent`	`PropTypes.string` or `PropTypes.element`	`SEND`	The string or object to use to override the button content
`userAvatar`	`PropTypes.string`	`img`	User image source
`userBubbleStyle`	`PropTypes.string`	`img`	The style object to use to override the user's bubble element
`userBubbleColor`	`PropTypes.string`	`#fff`	User bubble color
`userDelay`	`PropTypes.number`	`1000`	The delay time of user messages
`userFontColor`	`PropTypes.string`	`#4a4a4a`	User font color
`scrollViewProps`	`PropTypes.object`	`#4a4a4a`	Use to override scroll view props

Steps

Text Step

Name	Type	Required	Description
`id`	`String / Number`	`true`	The step id. Required for any step
`message`	`String / Function`	`true`	The text message. If function, it will receive ({ previousValue, steps }) params
`trigger`	`String / Number / Function`	`false`	The id of next step to be triggered. If function, it will receive ({ value, steps }) params
`avatar`	`String`	`false`	the avatar to be showed just in this step. Note: this step must be a step that avatar appears
`delay`	`Number`	`false`	set the delay time to message be shown
`end`	`Boolean`	`false`	if true indicate that this step is the last
`inputAttributes`	`Object`	Set any attributes on the input field (keyboardType, autoCapitalize, autoComplete)
`metadata`	`Object`	Set of key-value pairs that you can attach to an object. This can be useful for storing additional information about the object in a structured format

Example:

{
  id: '1',
  message: 'Hello World',
  trigger: '2',
},
{
  id: '2',
  message: ({ previousValue, steps }) => 'Hello',
  end: true,
}

User Step

Name	Type	Required	Description
`id`	`String / Number`	`true`	The step id. Required for any step
`user`	`Boolean`	`true`	if true indicate that you waiting a user type action
`trigger`	`String / Number / Function`	`false`	The id of next step to be triggered. If function, it will receive ({ value, steps }) params
`validator`	`String / Number`	`false`	if user attribute is true you can pass a validator function to validate the text typed by the user
`end`	`Boolean`	`false`	if true indicate that this step is the last
`inputAttributes`	`Object`	Set any attributes on the input field (keyboardType, autoCapitalize, autoComplete)
`metadata`	`Object`	Set of key-value pairs that you can attach to an object. This can be useful for storing additional information about the object in a structured format

Example:

{
  id: '1',
  user: true,
  inputAttributes: {
    keyboardType: 'email-address'
  },
  end: true,
}

Options Step

Name	Type	Required	Description
`id`	`String / Number`	`true`	The step id. Required for any step
`options`	`Array`	`true`	Array of options with { label, value, trigger } properties
`end`	`Boolean`	`false`	if true indicate that this step is the last
`inputAttributes`	`Object`	Set any attributes on the input field (keyboardType, autoCapitalize, autoComplete)
`metadata`	`Object`	Set of key-value pairs that you can attach to an object. This can be useful for storing additional information about the object in a structured format

Example:

{
  id: '1',
  options: [
    { value: 1, label: 'Number 1', trigger: '3' },
    { value: 2, label: 'Number 2', trigger: '2' },
    { value: 3, label: 'Number 3', trigger: '2' },
  ],
}

Custom Step

Name	Type	Required	Description
`id`	`String / Number`	`true`	The step id. Required for any step
`component`	`Component`	`true`	Custom React Component
`replace`	`Boolean`	`false`	if true indicate that component will be replaced by the next step
`waitAction`	`Boolean`	`false`	if true indicate that you waiting some action. You must use the triggerNextStep prop in your component to execute the action
`asMessage`	`Boolean`	`false`	f true indicate that the component will be displayed as a text step
`trigger`	`String / Number / Function`	`false`	The id of next step to be triggered. If function, it will receive ({ value, steps }) params
`delay`	`Number`	`false`	set the delay time to component be shown
`end`	`Boolean`	`false`	if true indicate that this step is the last
`inputAttributes`	`Object`	Set any attributes on the input field (keyboardType, autoCapitalize, autoComplete)
`metadata`	`Object`	Set of key-value pairs that you can attach to an object. This can be useful for storing additional information about the object in a structured format

Example:

{
  id: '1',
  component: <CustomComponent />
  trigger: '2'
}

Update Step

Name	Type	Required	Description
`id`	`String / Number`	`true`	The step id. Required for any step
`update`	`String / Number`	`true`	The id of next step to be updated
`trigger`	`String / Number / Function`	`false`	The id of next step to be triggered. If function, it will receive ({ value, steps }) params
`inputAttributes`	`Object`	Set any attributes on the input field (keyboardType, autoCapitalize, autoComplete)
`metadata`	`Object`	Set of key-value pairs that you can attach to an object. This can be useful for storing additional information about the object in a structured format

Example:

{
  id: '1',
  options: [
    { value: 1, label: 'Number 1', trigger: '3' },
    { value: 2, label: 'Number 2', trigger: '2' },
    { value: 3, label: 'Number 3', trigger: '2' },
  ],
}

Custom Component

When you declare a custom step, you need indicate a custom React Component to be rendered in the chat. This custom component will receive the following properties.

Name	Type	Description
`previousStep`	`PropTypes.object`	Previous step rendered
`step`	`PropTypes.object`	Current step rendered
`steps`	`PropTypes.object`	All steps rendered
`triggerNextStep({ value, trigger })`	`PropTypes.func`	Callback function to trigger next step when user attribute is true. Optionally you can pass a object with value to be setted in the step and the next step to be triggered
`inputAttributes`	`Object`	Set any attributes on the input field (keyboardType, autoCapitalize, autoComplete)
`metadata`	`Object`	Set of key-value pairs that you can attach to an object. This can be useful for storing additional information about the object in a structured format

How to Contribute

Please check the contributing guide

Authors


Lucas Bassetti

See also the list of contributors who participated in this project.

Donate

If you liked this project, you can donate to support it ❤️

License

MIT · Lucas Bassetti

leeicmobile/react-native-chatbot

React Native Chatbot

Getting Start

Usage

Documentation

Properties

Steps

Text Step

User Step

Options Step

Custom Step

Update Step

Custom Component

How to Contribute

Authors

Donate

License