React Simple Chatbot

A simple chatbot component to create conversation chats

Getting Start

react-simple-chatbot uses styled-components as a peer dependency, so install both:

npm install react-simple-chatbot styled-components

It works with React 18 or 19 and styled-components 5.1 or newer. The library is written in TypeScript, so the types are included.

Usage

There are several examples on the website. Here is the first one to get you started:

import { createRoot } from 'react-dom/client';
import ChatBot, { type Step } from 'react-simple-chatbot';

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

createRoot(document.getElementById('root')!).render(<ChatBot steps={steps} />);

Tips

• Restart the conversation: render the chatbot with a new key (e.g. <ChatBot key={conversationId} steps={steps} />). If cache is enabled, also clear it with localStorage.removeItem(cacheName).
• Change steps after mount: updates to steps, the avatars, the delays and botName are used by the steps that were not rendered yet.
• Style the chatbot: every element has a stable rsc-* class name (e.g. .rsc-ts-bubble, .rsc-input) that you can target with CSS, and the *Style props accept inline styles.
• Custom components: the components of the steps receive step, steps, previousStep and triggerNextStep, typed as CustomComponentProps.

React Simple Chatbot on media

1. webdesignerdepot
2. codrops

How to Contribute

Please check the contributing guide

Authors

Lucas Bassetti

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

License

MIT · Lucas Bassetti