react-chatbot-kit

The IConfig interface is the primary configuration object used to initialize the chatbot. It defines the bot's identity, initial conversation state, and allows for deep customization of components, styles, and behavior.

Key properties include:

• botName: A string representing the name of the bot.
• initialMessages: An array of IMessage objects that start the conversation.
• state: An object used to manage the chatbot's internal state.
• widgets: An array of IWidget objects to extend chatbot functionality.
• customComponents, customStyles, and customMessages: Used for UI/UX overrides.

import { IConfig } from 'react-chatbot-kit';

const config: IConfig = {
  botName: 'My Bot',
  initialMessages: [{ text: 'Hello!', sender: 'bot' }],
  // ... other properties
};

Use createCustomMessage to generate a message object with a specific, non-standard type. This is useful when you want to render specialized UI components based on the message type. It accepts the message string, the custom type string, and an options object of type IMessageOptions.

import { createCustomMessage } from 'react-chatbot-kit';

const customMsg = createCustomMessage('Check this out!', 'image', {
  // additional IMessageOptions here
});

To add a new widget to the chatbot, use the addWidget method on an instance of WidgetRegistry. You must provide a configuration object containing the widgetName, the widgetFunc (the component/function that renders the widget), and optional mapStateToProps and props objects.

• widgetName: A unique string identifier for the widget.
• widgetFunc: The function or component that returns the widget UI.
• mapStateToProps: A function used to map specific parts of the chatbot state to the widget's props.
• props: Static props to be passed to the widget.

widgetRegistry.addWidget({
  widgetName: 'myCustomWidget',
  widgetFunc: MyWidgetComponent,
  mapStateToProps: (state) => ({ user: state.user }),
  props: { color: 'blue' }
});

Once a widget is registered, you can retrieve its rendered instance using getWidget(widgetName, options). This method resolves the widget's props by merging several sources:

1. parentProps: Props passed during registration.
2. widgetObject.props: Static props provided during registration.
3. mapStateToProps: Values derived from the provided options (acting as state).
4. options: The options object passed to getWidget provides state, payload, actions, and scrollIntoView.
5. Internal utilities: setState and actionProvider are automatically injected.

If the widget name does not exist in the registry, the method returns undefined.

const widget = widgetRegistry.getWidget('myCustomWidget', {
  state: { user: { name: 'John' } },
  payload: { id: 123 },
  actions: myActionProvider,
  scrollIntoView: true
});

Use createChatBotMessage to generate a message object intended for the bot. This function automatically sets the message type to 'bot' and initializes the loading state to true. It accepts a message string and an options object of type IMessageOptions.

import { createChatBotMessage } from 'react-chatbot-kit';

const botMsg = createChatBotMessage('Hello! How can I help you?', {
  // additional IMessageOptions here
});

Use createClientMessage to generate a message object representing a message sent by the user. This function automatically sets the message type to 'user'. It accepts a message string and an options object of type IMessageOptions.

import { createClientMessage } from 'react-chatbot-kit';

const userMsg = createClientMessage('Hi there!', {
  // additional IMessageOptions here
});

Use these helper functions to determine the type of a given IMessage object during rendering or logic processing:

• botMessage(message): Returns true if the message type is 'bot'.
• userMessage(message): Returns true if the message type is 'user'.
• customMessage(message, customMessages): Returns true if the message type exists as a key within the provided customMessages object.

import { botMessage, userMessage, customMessage } from 'react-chatbot-kit';

if (botMessage(msg)) {
  // Render bot UI
} else if (userMessage(msg)) {
  // Render user UI
} else if (customMessage(msg, { image: true })) {
  // Render custom image UI
}

The package provides utility functions to create different types of messages for the chat interface:

• createChatBotMessage: Creates a standard message from the bot.
• createClientMessage: Creates a message from the user (client).
• createCustomMessage: Creates a custom message type for specialized UI components.

import { 
  createChatBotMessage, 
  createClientMessage, 
  createCustomMessage 
} from 'react-chatbot-kit';

const botMessage = createChatBotMessage('Hello!');
const clientMessage = createClientMessage('Hi there!');

The ICustomMessage interface allows you to define custom React components for specific message types or indices. It uses a dictionary pattern where the key is a string (representing the message type or identifier) and the value is a function returning a ReactElement.

This is useful when you want certain messages to render differently based on their content or metadata.

import { ICustomMessage } from 'react-chatbot-kit';

const customMessages: ICustomMessage = {
  imageMessage: (props) => <img src={props.message.url} alt="chat-img" />,
  videoMessage: (props) => <video src={props.message.url} controls />,
};

The ICustomStyles interface allows you to override specific background colors for chatbot elements. Each style property expects an object containing a backgroundColor string.

Supported styles:

• botMessageBox: Sets the background color for the bot's message bubbles.
• chatButton: Sets the background color for the chat toggle button.

import { ICustomStyles } from 'react-chatbot-kit';

const customStyles: ICustomStyles = {
  botMessageBox: { backgroundColor: '#f0f0f0' },
  chatButton: { backgroundColor: '#007bff' },
};