website·Indexed 32 days ago
https://react-chatbotify.comAn intuitive and versatile chatbot library for React designed to streamline the creation of conversational interfaces. Features include support for LLM conversations, real-time message streaming, voice (speech-to-text) and audio (text-to-speech) capabilities, custom theming, and advanced form validation.
params to access dynamic data like user input.const flow = {
start: {
message: "Hello there! What is your name?",
path: "ask_age",
},
ask_age: {
message: (params) => `Good to see you ${params.userInput}, how old are you?`
}
}v2 introduces three new extensibility mechanisms:
plugins prop: Used to import and load custom plugins.RcbPreMessageInjectEvent) that developers can listen to and respond to.plugins prop that allows users to install and use custom plugins to add functionality to the chatbot. Plugins can be sourced from the official React ChatBotify Gallery or community contributors. Note that plugin maintenance is separate from the core library maintenance. Many plugins rely on specific chatbot settings (such as events) to function; always check the specific plugin's documentation for required configuration settings.params object containing contextual details and utility functions. Note that all utility functions in params are async; you must use await to ensure predictable behavior and avoid issues like multiple messages being sent simultaneously.advance section in settings has been removed. Developers should now use ChatBotProvider and its associated custom hooks to modify settings, styles, messages, paths, the text area, audio toggles, and toast popups from outside the chatbot.There are two ways to stream responses:
simulateStream: true to work.Message attribute has been expanded. If you are manipulating messages directly (now recommended via hooks), you must provide all five required fields: sender, content, id, type, and timestamp.To modify chatbot messages from outside the chatbot component using your own application logic, use the MessagesContext.Provider. This allows you to maintain your own messages state and pass it into the chatbot.
Important Constraints:
advance.useCustomMessages: true in the chatbot options.useCustomMessages, you are modifying the messages array directly. Consequently, audio and stream features will not function for these messages.import React, { useState } from 'react';
import { ChatBot, MessagesContext } from 'react-chatbotify';
const MyChatBot = () => {
// 1. Setup your own messages state
const [messages, setMessages] = useState([]);
// Example: Clear messages while preserving system messages
const clearMessages = () => {
setMessages(prev => prev.filter(msg => msg.sender === "system"));
};
// Example: Manually insert a message
const insertMessage = () => {
setMessages(prev => [
...prev,
{ content: "Hello I am new!", sender: "bot", type: "string" }
]);
};
const options = {
advance: {
useCustomMessages: true // Required to enable custom message handling
},
theme: { embedded: true },
chatHistory: { storageKey: "example_custom_messages" }
};
const flow = {
start: {
message: "Hello there! I am a demo for custom messages!",
chatDisabled: true
}
};
return (
<>
<button onClick={clearMessages}>Clear Messages</button>
<button onClick={insertMessage}>Add Message</button>
{/* 2. Wrap ChatBot with MessagesContext.Provider */}
<MessagesContext.Provider value={{ messages, setMessages }}>
<ChatBot options={options} flow={flow} />
</MessagesContext.Provider>
</>
);
};v2.0.0-beta.31, the styles.botBubble.dangerouslySetInnerHtml and styles.userBubble.dangerouslySetInnerHtml properties were removed to improve security. To render HTML content within messages, you must now use the official HTML Renderer Plugin.npm install @rcb-plugins/html-renderer<ChatBot
plugins={[
// Add the HTML Renderer Plugin here
]}
/>A conversation block represents the current state of the chat. It operates on a cycle of pre-processing and post-processing:
message, options, checkboxes, component, chatDisabled, isSensitive, transition) are executed immediately. The bot then waits for user input.function, file, path) are executed. If a path is defined, the flow moves to the specified next block, triggering its pre-processing phase.Attributes are processed in the order they are declared, except for path, which is always processed last during post-processing.