@platformbuilders/react-native-chatbot NPM

React Native Chatbot

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

Getting Start

yarn add react-native-chatbot @react-native-community/art --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