@cmnd-ai/chatbot-react

@cmnd-ai/chatbot-react

A fully customizable React chatbot component with conversation management, themes, and custom components support.

Features

• 🤖 Conversation Management: Full conversation history with create, select, and delete functionality
• 🎨 Theme Support: Light and dark themes with customizable styling
• 🧩 Custom Components: Replace any UI component with your own (input fields, buttons, avatars, loading indicators)
• 💾 Local Storage: Automatic conversation persistence
• 📱 Responsive Design: Works on desktop and mobile devices
• ⚡ Real-time Streaming: Live message streaming with loading states
• 🛠️ Tool Integration: Support for UI and backend tools
• 🔄 Auto-refresh: Keep conversations up to date

Installation

npm install @cmnd-ai/chatbot-react

or

yarn add @cmnd-ai/chatbot-react

Basic Usage

import CmndChatBot from "@cmnd-ai/chatbot-react";
import "@cmnd-ai/chatbot-react/dist/styles/index.css";

const App = () => {
  return (
    <CmndChatBot
      chatbotId={123}
      organizationId={456}
      apiKey="your-api-key"
      baseUrl="https://api.example.com"
    />
  );
};

Advanced Usage with Custom Components

import CmndChatBot from "@cmnd-ai/chatbot-react";
import { FaUserCircle } from "react-icons/fa";
import { BsRobot, BsTools } from "react-icons/bs";
import "@cmnd-ai/chatbot-react/dist/styles/index.css";

const App = () => {
  return (
    <CmndChatBot
      chatbotId={123}
      organizationId={456}
      apiKey="your-api-key"
      baseUrl="https://api.example.com"
      theme="dark"
      Components={{
        // Custom avatar components
        BotAvatar: () => <BsRobot size={24} color="#373E4E" />,
        UserAvatar: () => <FaUserCircle size={24} color="#7A8194" />,
        ToolAvatar: () => <BsTools size={24} color="#FF6B6B" />,

        // Custom loading indicator
        LoadingIndicator: () => <div>🤔 Thinking...</div>,

        // Custom input field
        InputField: ({ input, setInput, canSendMessage, handleSendClick }) => (
          <input
            type="text"
            value={input}
            onChange={(e) => setInput(e.target.value)}
            disabled={!canSendMessage}
            onKeyPress={(e) => e.key === "Enter" && handleSendClick()}
            placeholder="Type your message..."
            style={{
              padding: "12px",
              borderRadius: "8px",
              border: "1px solid #ccc",
            }}
          />
        ),

        // Custom send button
        SendButton: ({ canSendMessage, handleSendClick }) => (
          <button
            onClick={handleSendClick}
            disabled={!canSendMessage}
            style={{
              padding: "12px 24px",
              backgroundColor: canSendMessage ? "#373E4E" : "#ccc",
              color: "white",
              border: "none",
              borderRadius: "8px",
              cursor: canSendMessage ? "pointer" : "not-allowed",
            }}
          >
            Send
          </button>
        ),
      }}
      customStyles={{
        // Custom styling
        panelStyle: { backgroundColor: "#f5f5f5" },
        chatbubbleStyle: { borderRadius: "12px" },
        botChatbubbleStyle: { backgroundColor: "#373E4E" },
        userChatbubbleStyle: { backgroundColor: "#7A8194" },
      }}
    />
  );
};

Props

Required Props

Prop	Type	Description
chatbotId	number	Your chatbot ID
organizationId	number	Your organization ID
baseUrl	string	Your CMND API base URL
apiKey	string	Your API key for authentication

Optional Props

Prop	Type	Default	Description
theme	"light" | "dark"	"light"	Theme for the chatbot
UITools	CMNDChatbotUITool[]	[]	Array of UI tools
enabledTools	any[]	[]	Array of enabled tools
initialMemory	CMNDChatMemory	undefined	Initial conversation memory
customStyles	CustomStyles	undefined	Custom CSS styles
Components	Components	undefined	Custom component overrides

Custom Components

You can replace any UI component with your own implementation:

Avatar Components

Components={{
  BotAvatar: () => <YourBotIcon />,
  UserAvatar: () => <YourUserIcon />,
  ToolAvatar: () => <YourToolIcon />
}}

Input Components

Components={{
  InputField: ({ input, setInput, canSendMessage, handleSendClick }) => (
    <YourCustomInput />
  ),
  SendButton: ({ canSendMessage, handleSendClick }) => (
    <YourCustomButton />
  )
}}

Loading Component

Components={{
  LoadingIndicator: () => <YourCustomLoader />
}}

Custom Styles

You can customize the appearance using the customStyles prop:

customStyles={{
  // Panel and layout styles
  panelStyle: { backgroundColor: '#f5f5f5' },
  sidebarStyle: { width: '350px' },
  conversationListStyle: { padding: '16px' },

  // Header styles
  headerStyle: { padding: '20px' },
  newChatButtonStyle: { backgroundColor: '#007bff' },
  refreshButtonStyle: { backgroundColor: '#28a745' },

  // Conversation card styles
  conversationCardStyle: { borderRadius: '8px' },
  activeConversationCardStyle: { borderColor: '#007bff' },
  titleStyle: { fontSize: '16px' },
  dateStyle: { fontSize: '12px' },
  deleteButtonStyle: { color: '#dc3545' },

  // Chat bubble styles
  chatbubbleStyle: { borderRadius: '12px' },
  botChatbubbleStyle: { backgroundColor: '#373E4E' },
  userChatbubbleStyle: { backgroundColor: '#7A8194' },
  chatAvatarStyle: { fontSize: '24px' },

  // Input styles
  inputStyle: { padding: '12px' },
  sendButtonStyle: { backgroundColor: '#373E4E' }
}}

Conversation Management

The chatbot automatically handles:

• Creating new conversations when you start chatting
• Loading existing conversations from localStorage
• Switching between conversations by clicking on them
• Deleting conversations with the delete button
• Auto-refreshing conversation list
• Persistent storage of conversation IDs

Theme Support

The chatbot supports light and dark themes with automatic color schemes:

• Light Theme: Clean white background with dark text
• Dark Theme: Dark background with light text
• Custom Colors: Override any color with customStyles

Tool Integration

Support for both UI and backend tools:

const UITools = [
  {
    name: "calculator",
    description: "Perform calculations",
    category: "utility",
    argumentSchema: {
      type: "object",
      properties: {
        expression: { type: "string", description: "Math expression" },
      },
    },
    runCmd: ({ functionArgs }) => {
      // Your tool implementation
    },
  },
];

Examples

For more detailed examples and implementations, check out our example repository.

Contributing

We welcome contributions! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License.