React Chatbot Kit

https://fredrikoseberg.github.io/react-chatbot-kit-docs
Admin
React Chatbot Kit is an open-source library designed for quickly and easily building modular...
Tokens:9,400
Snippets:88
Trust Score:8.3
Update:8 months ago
Show doc for...
Tokens:
Raw
### Install React-chatbot-kit

Source: https://fredrikoseberg.github.io/react-chatbot-kit-docs/index

Installs the react-chatbot-kit package using npm. This is the first step to integrating the chatbot into your React project.

```bash
npm install react-chatbot-kit
```

--------------------------------

### Create Chatbot configuration file (config.js)

Source: https://fredrikoseberg.github.io/react-chatbot-kit-docs/docs/getting-started

Defines the chatbot's configuration, including initial messages. The `createChatBotMessage` function is used to format messages.

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

const config = {
  initialMessages: [createChatBotMessage(`Hello world`)],
};

export default config;
```

--------------------------------

### Create Chatbot ActionProvider file (ActionProvider.jsx)

Source: https://fredrikoseberg.github.io/react-chatbot-kit-docs/docs/getting-started

Handles actions and state updates for the chatbot. It receives props like `createChatBotMessage`, `setState`, and `children`.

```javascript
import React from 'react';

const ActionProvider = ({ createChatBotMessage, setState, children }) => {
  return (
    <div>
      {React.Children.map(children, (child) => {
        return React.cloneElement(child, {
          actions: {},
        });
      })}
    </div>
  );
};

export default ActionProvider;
```

--------------------------------

### Create Chatbot MessageParser file (MessageParser.jsx)

Source: https://fredrikoseberg.github.io/react-chatbot-kit-docs/docs/getting-started

Parses user messages and determines the chatbot's response. It includes a `parse` function for message processing.

```javascript
import React from 'react';

const MessageParser = ({ children, actions }) => {
  const parse = (message) => {
    console.log(message);
  };

  return (
    <div>
      {React.Children.map(children, (child) => {
        return React.cloneElement(child, {
          parse: parse,
          actions: {},
        });
      })}
    </div>
  );
};

export default MessageParser;
```

--------------------------------

### Initialize Chatbot component in a React component

Source: https://fredrikoseberg.github.io/react-chatbot-kit-docs/docs/getting-started

Renders the Chatbot component within your React application, passing the necessary configuration, message parser, and action provider.

```javascript
import config from '../bot/config.js';
import MessageParser from '../bot/Messageparser.js';
import ActionProvider from '../bot/ActionProvider.js';

const MyComponent = () => {
  return (
    <div>
      <Chatbot
        config={config}
        messageParser={MessageParser}
        actionProvider={ActionProvider}
      />
    </div>
  );
};
```

--------------------------------

### Create a Custom Message Component

Source: https://fredrikoseberg.github.io/react-chatbot-kit-docs/docs/advanced/custom-messages

Defines a simple React component to be used as a custom chatbot message. This example renders an image, demonstrating how to embed custom UI elements within messages. No external dependencies are required beyond React itself.

```jsx
import React from 'react';
const CustomMessage = () => {
  return (
    <img
      src='https://i.pinimg.com/originals/cf/da/fa/cfdafa4dc6aab40eae1c5315c02b9339.jpg'
      style={{ width: '100%' }}
    />
  );
};
export default CustomMessage;
```

--------------------------------

### Importing External CSS in React Chatbot Kit

Source: https://fredrikoseberg.github.io/react-chatbot-kit-docs/docs

This snippet demonstrates how to import the external CSS stylesheet for react-chatbot-kit to enable greater CSS customization. This is a backward-compatible change for users upgrading from earlier versions.

```javascript
import Chatbot from 'react-chatbot-kit';
import 'react-chatbot-kit/build/main.css';
```

--------------------------------

### Save Chatbot Dialogue with Local Storage (React)

Source: https://fredrikoseberg.github.io/react-chatbot-kit-docs/docs/advanced/saving-dialogue

This code snippet demonstrates how to save and load chatbot messages using the `saveMessages` and `loadMessages` props provided by the `react-chatbot-kit` library. It utilizes `localStorage` to persist the chat history. The `saveMessages` function takes the messages array and HTML string as input, while `loadMessages` retrieves and parses the stored messages. This example is implemented within a React functional component.

```javascript
import React, { useState } from 'react';
import Chatbot from 'react-chatbot-kit';
import config from './config';
import actionProvider from './actionProvider.js';
import messageParser from './messageParser.js';

function App() {
  const [showBot, toggleBot] = useState(false);

  const saveMessages = (messages, HTMLString) => {
    localStorage.setItem('chat_messages', JSON.stringify(messages));
  };

  const loadMessages = () => {
    const messages = JSON.parse(localStorage.getItem('chat_messages'));
    return messages;
  };

  return (
    <div className='App'>
      {showBot && (
        <Chatbot
          config={config}
          actionProvider={actionProvider}
          messageHistory={loadMessages()}
          messageParser={messageParser}
          saveMessages={saveMessages}
        />
      )}
      <button onClick={() => toggleBot((prev) => !prev)}>Bot</button>
    </div>
  );
}

export default App;
```

--------------------------------

### Create a React Widget Component

Source: https://fredrikoseberg.github.io/react-chatbot-kit-docs/docs/create-a-widget

This snippet shows how to create a basic React component that functions as a widget. It fetches a random dog image from an API and displays it. This component can be imported and used within the chatbot configuration.

```jsx
import React, { useEffect, useState } from 'react';

const DogPicture = () => {
  const [imageUrl, setImageUrl] = useState('');

  useEffect(() => {
    fetch('https://dog.ceo/api/breeds/image/random')
      .then((res) => res.json())
      .then((data) => {
        setImageUrl(data.message);
      });
  }, []);

  return (
    <div>
      <img src={imageUrl} alt='a dog' />
    </div>
  );
};

export default DogPicture;
```

--------------------------------

### Basic Chatbot Integration in React

Source: https://fredrikoseberg.github.io/react-chatbot-kit-docs/index

Demonstrates how to import and configure the Chatbot component in a React application. It requires a config object, a MessageParser, and an ActionProvider to function.

```jsx
import React from "react";
import Chatbot from "react-chatbot-kit";

import config from "./configs/chatbotConfig";
import MessageParser from "./chatbot/MessageParser";
import ActionProvider from "./chatbot/ActionProvider";

function App() {
 return (
 <div className="App">
 <Chatbot 
 config={config}
 messageParser={MessageParser}
 actionProvider={ActionProvider}
 />
 </div>
 );
}

export default App;
```

--------------------------------

### Configure MessageParser for Basic Response

Source: https://fredrikoseberg.github.io/react-chatbot-kit-docs/docs/create-a-response

This snippet shows how to set up the MessageParser to include a basic rule that checks if a user's message contains 'hello'. Currently, it only logs to the console. This is the initial step before linking it to an action.

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

--------------------------------

### Define ActionProvider for Chatbot Response

Source: https://fredrikoseberg.github.io/react-chatbot-kit-docs/docs/create-a-response

This code defines the ActionProvider, including a `handleHello` function. This function creates a new chatbot message and updates the chatbot's state with it. It demonstrates how to programmatically add messages to the chat interface.

```jsx
import React from 'react';
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>
  );
};
export default ActionProvider;
```

--------------------------------

### Configure Initial Chatbot Messages

Source: https://fredrikoseberg.github.io/react-chatbot-kit-docs/docs/advanced/configuration

Sets the initial messages that the chatbot displays when it first mounts. This is a required configuration option and expects an array of message objects.

```javascript
const config = {
  initialMessages: [createChatBotMessage(`Hi! I'm ${botName}`)],
};
```

--------------------------------

### Integrate Action Trigger in MessageParser

Source: https://fredrikoseberg.github.io/react-chatbot-kit-docs/docs/create-a-response

This updated MessageParser snippet shows how to trigger the `handleHello` action defined in the ActionProvider when the user's message includes 'hello'. It connects the parsing logic to the defined chatbot actions.

```jsx
import React from 'react';
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>
  );
};
export default MessageParser;
```

--------------------------------

### Trigger Widget Action in MessageParser

Source: https://fredrikoseberg.github.io/react-chatbot-kit-docs/docs/create-a-widget

This code shows how to set up rules in the MessageParser to trigger the widget action. When a user's message includes the word 'dog', the 'handleDog' action is called, which in turn displays the 'dogPicture' widget.

```jsx
import React from 'react';

const MessageParser = ({ children, actions }) => {
  const parse = (message) => {
    if (message.includes('hello')) {
      actions.handleHello();
    }

    if (message.includes('dog')) {
      actions.handleDog();
    }
  };

  return (
    <div>
      {React.Children.map(children, (child) => {
        return React.cloneElement(child, {
          parse: parse,
          actions,
        });
      })}
    </div>
  );
};

export default MessageParser;
```

--------------------------------

### ActionProvider Initialization and Usage (JavaScript/React)

Source: https://fredrikoseberg.github.io/react-chatbot-kit-docs/docs/advanced/chatbot-props

Demonstrates the initialization of the actionProvider class and its functional component implementation. The actionProvider is responsible for updating the chatbot's state and creating UI actions. It receives several parameters on initialization and uses React's context API to pass actions down to child components.

```javascript
const actionProv = new actionProvider(
  createChatBotMessage,
  setState,
  createClientMessage,
  stateRef.current,
  createCustomMessage,
  rest
);
```

```jsx
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>
  );
};
```

--------------------------------

### Use Widget in ActionProvider

Source: https://fredrikoseberg.github.io/react-chatbot-kit-docs/docs/create-a-widget

This snippet illustrates how to use the registered widget within the ActionProvider. The 'handleDog' function creates a chatbot message that includes the 'dogPicture' widget, which will be displayed to the user.

```jsx
import React from 'react';

const ActionProvider = ({ createChatBotMessage, setState, children }) => {
  const handleHello = () => {
    const botMessage = createChatBotMessage('Hello. Nice to meet you.');
    setState((prev) => ({
      ...prev,
      messages: [...prev.messages, botMessage],
    }));
  };

  const handleDog = () => {
    const botMessage = createChatBotMessage(
      "Here's a nice dog picture for you!",
      {
        widget: 'dogPicture',
      }
    );
    setState((prev) => ({
      ...prev,
      messages: [...prev.messages, botMessage],
    }));
  };

  // Put the handleHello and handleDog function in the actions object to pass to the MessageParser
  return (
    <div>
      {React.Children.map(children, (child) => {
        return React.cloneElement(child, {
          actions: {
            handleHello,
            handleDog,
          },
        });
      })}
    </div>
  );
};

export default ActionProvider;
```

--------------------------------

### Register Widget in Chatbot Configuration

Source: https://fredrikoseberg.github.io/react-chatbot-kit-docs/docs/create-a-widget

This code demonstrates how to register the custom widget ('DogPicture') within the chatbot's configuration file. It assigns a 'widgetName' and a 'widgetFunc' that renders the component.

```javascript
import DogPicture from '../components/DogPicture/DogPicture.jsx';

const config = {
  initialMessages: [createChatBotMessage(`Hi! I'm ${botName}`)],
  widgets: [
    {
      widgetName: 'dogPicture',
      widgetFunc: (props) => <DogPicture {...props} />,
    },
  ],
};

```

--------------------------------

### Initialize Chatbot with Properties (React)

Source: https://fredrikoseberg.github.io/react-chatbot-kit-docs/docs/advanced/chatbot-props

This snippet shows how to initialize the Chatbot component with essential properties. It requires actionProvider, messageParser, and config, and accepts optional properties for customization like header text, placeholder text, message history management, and scroll behavior.

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

--------------------------------

### Configure Bot Name and Styles with JavaScript

Source: https://fredrikoseberg.github.io/react-chatbot-kit-docs/docs/configure-your-bot

This snippet demonstrates how to configure a chatbot's name and apply custom styles using the `react-chatbot-kit` library. It imports `createChatBotMessage` and defines the bot's initial messages, name, and custom styles for message boxes and chat buttons. The configuration object is then exported as the default.

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

const botName = 'ExcitementBot';

const config = {
  initialMessages: [createChatBotMessage(`Hi! I'm ${botName}`)],
  botName: botName,
  customStyles: {
    botMessageBox: {
      backgroundColor: '#376B7E',
    },
    chatButton: {
      backgroundColor: '#5ccc9d',
    },
  },
};

export default config;
```

--------------------------------

### Define Custom Chatbot Widgets

Source: https://fredrikoseberg.github.io/react-chatbot-kit-docs/docs/advanced/configuration

Allows the specification of custom React components that can be rendered within the chat window as chatbot responses. This is an optional feature for interactive elements.

```javascript
const config = {
  initialMessages: [createChatBotMessage(`Hi! I'm ${botName}`)],
  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'],
    },
  ],
};
```

--------------------------------

### Replace Default Chatbot Components

Source: https://fredrikoseberg.github.io/react-chatbot-kit-docs/docs/advanced/configuration

Provides the ability to replace default components of the react-chatbot-kit with custom React components. This is an optional configuration for advanced UI customization.

```javascript
const config = {
  initialMessages: [createChatBotMessage(`Hi! I'm ${botName}`)],
  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) => <MyAvatar {...props} />,
    // Replaces the default bot chat message container
    botChatMessage: (props) => <MyCustomChatMessage {...props} />,
    // Replaces the default user icon
    userAvatar: (props) => <MyCustomAvatar {...props} />,
    // Replaces the default user chat message
    userChatMessage: (props) => <MyCustomUserChatMessage {...props} />
  },
};
```

--------------------------------

### Apply Custom Chatbot Styles

Source: https://fredrikoseberg.github.io/react-chatbot-kit-docs/docs/advanced/configuration

Allows overriding default chatbot styles by providing a style object. This is an optional configuration for visual customization.

```javascript
const config = {
  initialMessages: [createChatBotMessage(`Hi! I'm ${botName}`)],
  customStyles: {
    botMessageBox: {
      backgroundColor: '#376B7E',
    },
    chatButton: {
      backgroundColor: '#5ccc9d',
    },
  },
};
```

--------------------------------

### Configure Chatbot Widgets in React

Source: https://fredrikoseberg.github.io/react-chatbot-kit-docs/docs/advanced/widgets

This code snippet demonstrates how to configure custom widgets for a React Chatbot Kit application. It defines the bot name, initial messages, and an array of widget configurations. Each widget configuration includes its name, a function to render the component, and a mapStateToProps property to specify which state properties should be injected.

```javascript
import React from 'react';
import { createChatBotMessage } from 'react-chatbot-kit';
import Overview from './widgets/Overview/Overview';
import MessageParserDocs from './widgets/docs/MessageParserDocs/MessageParserDocs';
import ActionProviderDocs from './widgets/docs/ActionProviderDocs/ActionProviderDocs';
import Config from './widgets/docs/Config/Config';
import WidgetDocs from './widgets/docs/WidgetDocs/WidgetDocs';
import { createCustomMessage } from 'react-chatbot-kit';
import CustomMessage from './CustomMessage';

const botName = 'DocsBot';

const config = {
  botName: botName,
  lang: 'no',
  initialMessages: [
    createChatBotMessage(
      `Hi I'm ${botName}. I’m here to help you explain how I work.`
    ),
    createChatBotMessage(
      "Here's a quick overview over what I need to function. ask me about the different parts to dive deeper.",
      {
        withAvatar: false,
        delay: 500,
        widget: 'overview',
      }
    ),
  ],
  state: {
    gist: '',
    infoBox: '',
  },
  widgets: [
    {
      widgetName: 'overview',
      widgetFunc: (props) => <Overview {...props} />,
      mapStateToProps: ['gist'],
    },
    {
      widgetName: 'messageParser',
      widgetFunc: (props) => <MessageParserDocs {...props} />,
      mapStateToProps: ['gist', 'infoBox'],
    },
    {
      widgetName: 'actionProviderDocs',
      widgetFunc: (props) => <ActionProviderDocs {...props} />,
      mapStateToProps: ['gist', 'infoBox'],
    },
    {
      widgetName: 'config',
      widgetFunc: (props) => <Config {...props} />,
      mapStateToProps: ['gist', 'infoBox'],
    },
    {
      widgetName: 'widget',
      widgetFunc: (props) => <WidgetDocs {...props} />,
      mapStateToProps: ['gist', 'infoBox'],
    },
  ],
};

export default config;
```

--------------------------------

### Chatbot Configuration Object (JavaScript/React)

Source: https://fredrikoseberg.github.io/react-chatbot-kit-docs/docs/advanced/chatbot-props

This JavaScript object defines the configuration for the chatbot, including its name, initial messages, state, custom components, custom messages, styles, and widgets. It allows for extensive customization of the chatbot's appearance and functionality, such as defining custom message types and integrating external components as widgets.

```javascript
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;
```

--------------------------------

### Configure Chatbot Header and Placeholder Text

Source: https://fredrikoseberg.github.io/react-chatbot-kit-docs/docs/advanced/chatbot-props

Customize the header text displayed at the top of the chatbot and the placeholder text for the input field. These are simple string configurations.

```javascript
const config = {
  headerText: "Welcome to our Chatbot!",
  placeholderText: "Type your message here..."
};
```

--------------------------------

### Create Chatbot Messages in JavaScript

Source: https://fredrikoseberg.github.io/react-chatbot-kit-docs/docs/message-functions

Generates messages displayed as chatbot responses. It can include properties like widgets, payloads, and delays for interactive elements. Requires the 'react-chatbot-kit' package.

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

const message = createChatBotMessage('Hello world!');

const messageWithProperties = createChatBotMessage('Hello world!', {
  widget: 'my-widget',
  payload: {},
  delay: 1000,
});
```

--------------------------------

### Create Chatbot Message with Payload (JavaScript)

Source: https://fredrikoseberg.github.io/react-chatbot-kit-docs/docs/advanced/payloads

Demonstrates creating a standard chatbot message with an embedded payload object. This payload can contain any static data, such as user information or context, and is directly associated with the message.

```javascript
const message = createChatbotMessage('hello', {  payload: { age: 18, name: 'Christina' },});
```

--------------------------------

### Control Initial Messages with HTML History

Source: https://fredrikoseberg.github.io/react-chatbot-kit-docs/docs/advanced/chatbot-props

Configure whether initial messages should run after an HTML string is rendered as message history. Setting `runInitialMessagesWithHistory` to true enables this behavior.

```javascript
const config = {
  messageHistory: "<div><p>Welcome back!</p></div>",
  runInitialMessagesWithHistory: true
};
```

--------------------------------

### MessageParser Implementation (React)

Source: https://fredrikoseberg.github.io/react-chatbot-kit-docs/docs/advanced/chatbot-props

This snippet shows the implementation of the MessageParser component in React. The MessageParser receives user input and determines which actions to trigger from the action provider. It takes the action provider and a state reference as arguments and includes a parse function to process messages.

```jsx
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>
  );
};
```

--------------------------------

### Create Custom Message with Payload (JavaScript)

Source: https://fredrikoseberg.github.io/react-chatbot-kit-docs/docs/advanced/payloads

Illustrates how to attach a payload to a custom chatbot message. This is useful for sending specific data related to custom message types, like weather or activity suggestions, without relying on global state.

```javascript
const customMessage = createCustomMessage('hello', {  payload: { weather: 'sunny', activity: 'football' },});
```

--------------------------------

### Set Chatbot Name

Source: https://fredrikoseberg.github.io/react-chatbot-kit-docs/docs/advanced/configuration

Configures the name of the chatbot, which appears in the header of the chat interface. This is an optional setting.

```javascript
const config = {
  initialMessages: [createChatBotMessage(`Hi! I'm ${botName}`)],
  botName: 'ExampleBot',
};
```

--------------------------------

### Create Custom Messages in JavaScript

Source: https://fredrikoseberg.github.io/react-chatbot-kit-docs/docs/message-functions

Renders messages defined by the developer. This function from 'react-chatbot-kit' requires the message value and the name of the registered custom message component.

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

// 1st. argument is the text value, 2nd. argument is the name of the registered custom message.
const message = createCustomMessage('value to input', 'custom');
```

--------------------------------

### Create User Messages in JavaScript

Source: https://fredrikoseberg.github.io/react-chatbot-kit-docs/docs/message-functions

Forces a user response within the chatbot interface. This function is part of the 'react-chatbot-kit' library. It takes the message text as its primary argument.

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

const message = createClientMessage('Hello world!');
```

--------------------------------

### Register and Use Custom Messages in Chatbot Config

Source: https://fredrikoseberg.github.io/react-chatbot-kit-docs/docs/advanced/custom-messages

Demonstrates how to register a custom message component within the React Chatbot Kit configuration. It imports necessary functions and the custom component, then maps a custom message type to the component in the `customMessages` object. This allows the chatbot to render the custom component when a message of that type is triggered.

```javascript
// in the config
import React from 'react';
import {
  createChatBotMessage,
  createCustomMessage,
} from 'react-chatbot-kit';
import CustomMessage from './CustomMessage';

const botName = 'DocsBot';

const config = {
  botName: botName,
  lang: 'no',
  customStyles: {
    botMessageBox: {
      backgroundColor: '#376B7E',
    },
    chatButton: {
      backgroundColor: '#5ccc9d',
    },
  },
  initialMessages: [
    createChatBotMessage(
      `Hi I'm ${botName}. I’m here to help you explain how I work.`
    ),
    createChatBotMessage(
      "Here's a quick overview over what I need to function. ask me about the different parts to dive deeper.",
      {
        withAvatar: false,
        delay: 500,
      }
    ),
    createCustomMessage('Test', 'custom'),
  ],
  state: {
    gist: '',
    infoBox: '',
  },
  customComponents: {},
  customMessages: {
    custom: (props) => <CustomMessage {...props} />,
  },
  widgets: [],
};

export default config;
```

--------------------------------

### Inject Custom State into Chatbot

Source: https://fredrikoseberg.github.io/react-chatbot-kit-docs/docs/advanced/configuration

Enables the injection of custom properties into the chatbot's internal state. This is an optional feature for managing application-specific data within the chatbot.

```javascript
const config = {
  initialMessages: [createChatBotMessage(`Hi! I'm ${botName}`)],
  state: {
    myCustomProperty: 'Bikershorts',
  },
};
```

--------------------------------

### Implement Custom Message Saving Logic

Source: https://fredrikoseberg.github.io/react-chatbot-kit-docs/docs/advanced/chatbot-props

Define a function to handle saving chat messages and associated HTML text. This function receives the messages and HTML content and should return void, allowing integration with custom storage solutions.

```javascript
const config = {
  saveMessages: (messages, HTMLText) => {
    console.log("Saving messages:", messages);
    console.log("Saving HTML text:", HTMLText);
    // Implement your custom saving logic here (e.g., send to API, save to local storage)
  }
};
```

--------------------------------

### Implement Message Validation Logic

Source: https://fredrikoseberg.github.io/react-chatbot-kit-docs/docs/advanced/chatbot-props

Provide a function to validate user messages before they are sent to the message parser. If the validator function returns false, the message will be discarded.

```javascript
const config = {
  validator: (message) => {
    if (message.trim().length === 0) {
      return false; // Do not send empty messages
    }
    return true;
  }
};
```

--------------------------------

### Display Message History in Chatbot

Source: https://fredrikoseberg.github.io/react-chatbot-kit-docs/docs/advanced/chatbot-props

Configure how message history is displayed. It can be an array of message objects or a raw HTML string. If a string is provided, it will be rendered directly into the chatbot container.

```javascript
const config = {
  messageHistory: [
    { text: "Hello!", sender: "user" },
    { text: "Hi there!", sender: "bot" }
  ]
};

const configWithHTML = {
  messageHistory: "<div><p>Previous conversation...</p></div>"
};
```

--------------------------------

### Override Chatbot CSS Classes

Source: https://fredrikoseberg.github.io/react-chatbot-kit-docs/docs/advanced/configuring-css

You can customize the chatbot's appearance by overriding the CSS properties of the provided classes. This allows for complete control over the look and feel of the chatbot interface.

```css
.react-chatbot-kit-chat-container {}
.react-chatbot-kit-chat-inner-container {}
.react-chatbot-kit-chat-header {}
.react-chatbot-kit-chat-input-container {}
.react-chatbot-kit-chat-message-container {}
.react-chatbot-kit-chat-input {}
.react-chatbot-kit-chat-input-form {}
.react-chatbot-kit-chat-input::placeholder {}
.react-chatbot-kit-chat-btn-send {}
.react-chatbot-kit-chat-btn-send-icon {}
.react-chatbot-kit-chat-bot-message-container {}
.react-chatbot-kit-chat-bot-avatar-container {}
.react-chatbot-kit-chat-bot-avatar-icon {}
.react-chatbot-kit-chat-bot-avatar-letter {}
.react-chatbot-kit-chat-bot-message {}
.react-chatbot-kit-chat-bot-message-arrow {}
.react-chatbot-kit-chat-bot-loading-icon-container {}
.chatbot-loader-container {}
#chatbot-loader #chatbot-loader-dot1 {}
#chatbot-loader #chatbot-loader-dot2 {}
#chatbot-loader #chatbot-loader-dot3 {}
.react-chatbot-kit-error {}
.react-chatbot-kit-error-container {}
.react-chatbot-kit-error-header {}
.react-chatbot-kit-error-docs {}
```

--------------------------------

### Disable Automatic Scrolling to Bottom

Source: https://fredrikoseberg.github.io/react-chatbot-kit-docs/docs/advanced/chatbot-props

Control the automatic scrolling behavior of the message window. Set `disableScrollToBottom` to true to prevent the window from automatically scrolling to the latest message.

```javascript
const config = {
  disableScrollToBottom: true
};
```
Tokens:
Raw