Skip to main content

Chatbot properties

The chatbot takes the following properties:

<Chatbot  actionProvider={actionProvider}  messageParser={messageParser}  config={config}  headerText='Chatbot'  placeholderText='Input placeholder'  messageHistory={loadMessages()}  saveMessages={saveMessages}  validator={validateInput}  runInitialMessagesWithHistory  disableScrollToBottom/>

actionProvider#

  • type: class
  • required: yes

The actionprovider is a class that implements the actionProvider interface. It's job is to update the state of the chatbot and create actions to update the UI.

It receives the following parameters on initialization:

const actionProv = new actionProvider(  createChatBotMessage,  setState,  createClientMessage,  stateRef.current,  createCustomMessage,  rest);
  • createChatbotMessage: function
  • setState: function
  • createClientMessage: function
  • stateRef: object
  • createCustomMessage: function
  • rest parameters: array
export const ActionProvider = ({  createChatBotMessage,  setState,  children,}) => {  const handleHello = () => {    const botMessage = createChatBotMessage('Hello. Nice to meet you.');
    setState((prev) => ({      ...prev,      messages: [...prev.messages, botMessage],    }));  };
  // Put the handleHello function in the actions object to pass to the MessageParser  return (    <div>      {React.Children.map(children, (child) => {        return React.cloneElement(child, {          actions: {            handleHello,          },        });      })}    </div>  );};

messageParser#

  • type: Class
  • required: yes

The messageparser receives the user input and decides which action to invoke from the action provider. It receives the action provider as the first argument, and a reference to the state as the second argument on initialization.

import React from 'react';
export const MessageParser = ({ children, actions }) => {  const parse = (message) => {    if (message.includes('hello')) {      actions.handleHello();    }  };
  return (    <div>      {React.Children.map(children, (child) => {        return React.cloneElement(child, {          parse: parse,          actions,        });      })}    </div>  );};

config#

  • type: object
  • required: yes

The config allows you to configure the chatbot as you'd like, register widgets, custom messages and change out components and colors:

import React from "react";import { createChatBotMessage } from "react-chatbot-kit";
import SingleFlight from './components/SingleFlight/SingleFlight'
const botName = "Somebot";
const config = {  // Defines the chatbot name  botName: botName,  // Defines an array of initial messages that will be displayed on first render  initialMessages: [    createChatBotMessage(`Hi I'm ${botName}`),    createChatBotMessage(      "First things first, which airport are you looking for information from?",      {        widget: "airportSelector",        delay: 500,      }    ),  ],  // Defines an object that will be injected into the chatbot state, you can use this state in widgets for example  state: {    airports: [],    flightType: "",    selectedFlightId: "",    selectedFlight: null,  },  // Defines an object of custom components that will replace the stock chatbot components.  customComponents: {     // Replaces the default header    header: () => <div style={{ backgroundColor: 'red', padding: "5px", borderRadius: "3px" }}>This is the header</div>    // Replaces the default bot avatar    botAvatar: (props) => <FlightBotAvatar {...props} />,    // Replaces the default bot chat message container    botChatMessage: (props) => <CustomChatMessage {...props} />,    // Replaces the default user icon    userAvatar: (props) => <MyUserAvatar {...props} />,    // Replaces the default user chat message    userChatMessage: (props) => <MyUserChatMessage {...props} />  },  // Register your own set of components as custom message types  customMessages: {      "custom": (props) => <MyCustomMessage {...props} />  },  // Defines an object of custom styles if you want to override styles  customStyles: {    // Overrides the chatbot message styles    botMessageBox: {      backgroundColor: "#376B7E",    },    // Overrides the chat button styles    chatButton: {      backgroundColor: "#5ccc9d",    },  }  // Defines an array of widgets that you want to render with a chatbot message  widgets: [    {      // defines the name you will use to reference to this widget in "createChatBotMessage".      widgetName: "singleFlight",      // Function that will be called internally to resolve the widget      widgetFunc: (props) => <SingleFlight {...props} />,      // Any props you want the widget to receive on render      props: {},      // Any piece of state defined in the state object that you want to pass down to this widget      mapStateToProps: [        "selectedFlightId",        "selectedFlight",      ],    },  ],};
export default config;

headerText#

  • type: string
  • required: no

A string that defines what should be the headerText, will replace the default headerText.

placeholderText#

  • type: string
  • required: no

A string that defines the input field placeholder text.

saveMessages#

  • type: function
  • signature: js (messages, HTMLText) => void
  • required: no

A function that returns the messages and the HTMLText to be saved to to any storage location.

messageHistory#

  • type: []Message | string
  • required: no

An array of messages or a string that will be displayed as the message history. If the element is a string it will be inserted as raw HTML into the chatbot inner container.

validator#

  • type: function
  • required: no

A function that will be called on every message to validate the message. If the function returns false the message will not be sent to the messageParser.

runInitialMessagesWithHistory#

  • type: boolean
  • required: no

If you return a HTML string as message history but still want to provide interactivity and begin the chatbot with initial messages defined in config after the HTML is inserted, you can set this flag to true.

disableScrollToBottom#

  • type: boolean
  • required: no

A flag to turn off automatic scrolling of the message window to the bottom.