Chat Components

Introduction

The CMND React SDK provides customizable UI components that allow you to tailor your conversation view's appearance to match your application's theme. This feature is particularly valuable when integrating with existing UI libraries or maintaining consistent design systems.

note

This guide contains information on how to customize input fields, send buttons, and other UI elements of the CMND chatbot in order to create a seamless integration with your application.

Available Components

The SDK supports customization of the following components:

InputField

InputField Component

The InputField component allows you to customize the appearance and behavior of the message input area.

Type Definition

TypeScript

interface InputFieldProps {
  /** Current input value */
  input: string;

  /** Function to update input value */
  setInput: (input: string) => void;

  /** Boolean indicating if message can be sent */
  canSendMessage: boolean;

  /** Function to handle message sending */
  handleSendClick: () => void;
}

Usage Example

TypeScript

// Usage example
import { InputFieldProps } from "@cmnd-ai/chatbot-react";

const CustomInputField = ({
  input,
  setInput,
  canSendMessage,
  handleSendClick,
}: InputFieldProps) => {
  return (
    <div className="custom-input-container">
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="Type your message..."
      />
    </div>
  );
};

SendButton

SendButton Component

The SendButton component allows you to customize the appearance and behavior of the message send button.

Type Definition

TypeScript

interface SendButtonProps {
  /** Function to handle message sending */
  handleSendClick: () => void;

  /** Boolean indicating if message can be sent */
  canSendMessage: boolean;
}

Usage Example

TypeScript

// Usage example
import { SendButtonProps } from "@cmnd-ai/chatbot-react";

const CustomSendButton = ({
  handleSendClick,
  canSendMessage,
}: SendButtonProps) => {
  return (
    <button
      onClick={handleSendClick}
      disabled={!canSendMessage}
      className="custom-send-button"
    >
      Send
    </button>
  );
};

Implementation

To use custom components, pass them as props when initializing the chat component:

TypeScript

import { ChatProvider, CmndChatBot } from "@cmnd-ai/chatbot-react";

function App() {
  return (
    <ChatProvider
      baseUrl="<your-cmnd-api-base-url>"
      chatbotId="<your-chatbot-id>"
      organizationId="<your-organization-id>"
      Components={{
        InputField: CustomInputField,
        SendButton: CustomSendButton,
      }}
    >
      <CmndChatBot />
    </ChatProvider>
  );
}

Component States

Component States

Each component should handle the following states to provide a complete user experience:

State	Description
Default	Normal appearance of the component
Hover	Visual feedback when user hovers over component
Active/Focus	Visual feedback when component is active or focused
Disabled	Appearance when interaction is not allowed
Error	Visual feedback for error conditions
Loading	Visual indicator for async operations (if applicable)

Best Practices

Accessibility

• Ensure custom components maintain ARIA attributes and keyboard navigation
• Provide appropriate visual feedback for different states
• Use sufficient color contrast for text and interactive elements

Error Handling

• Implement proper error states in custom components
• Handle edge cases like empty messages or network issues
• Provide clear feedback to users when errors occur

Responsive Design

• Make components responsive to different screen sizes
• Consider mobile-first design principles
• Test on various devices and viewport sizes

TypeScript Integration

The SDK provides full TypeScript support for all component props and interfaces. This ensures type safety and better developer experience when implementing custom components.

Implementation Examples

Below are examples of how to implement custom components using popular UI frameworks:

Material-UI

TypeScript

import {
  ChatProvider,
  CmndChatBot,
  InputFieldProps,
  SendButtonProps,
} from "@cmnd-ai/chatbot-react";
import { TextField, Button } from "@mui/material";

const MaterialInputField = ({
  input,
  setInput,
  canSendMessage,
}: InputFieldProps) => (
  <TextField
    value={input}
    onChange={(e) => setInput(e.target.value)}
    variant="outlined"
    fullWidth
    disabled={!canSendMessage}
  />
);

const MaterialSendButton = ({
  handleSendClick,
  canSendMessage,
}: SendButtonProps) => (
  <Button
    onClick={handleSendClick}
    disabled={!canSendMessage}
    variant="contained"
    color="primary"
  >
    Send
  </Button>
);

function App() {
  return (
    <ChatProvider
      baseUrl="<your-cmnd-api-base-url>"
      chatbotId="<your-chatbot-id>"
      organizationId="<your-organization-id>"
      Components={{
        InputField: MaterialInputField,
        SendButton: MaterialSendButton,
      }}
    >
      <CmndChatBot />
    </ChatProvider>
  );
}

Tailwind CSS

TypeScript

import {
  ChatProvider,
  CmndChatBot,
  InputFieldProps,
  SendButtonProps,
} from "@cmnd-ai/chatbot-react";

const TailwindInputField = ({
  input,
  setInput,
  canSendMessage,
}: InputFieldProps) => (
  <input
    type="text"
    value={input}
    onChange={(e) => setInput(e.target.value)}
    className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
    disabled={!canSendMessage}
  />
);

const TailwindSendButton = ({
  handleSendClick,
  canSendMessage,
}: SendButtonProps) => (
  <button
    onClick={handleSendClick}
    disabled={!canSendMessage}
    className="px-4 py-2 bg-blue-500 text-white rounded-lg disabled:bg-gray-400"
  >
    Send
  </button>
);

function App() {
  return (
    <ChatProvider
      baseUrl="<your-cmnd-api-base-url>"
      chatbotId="<your-chatbot-id>"
      organizationId="<your-organization-id>"
      Components={{
        InputField: TailwindInputField,
        SendButton: TailwindSendButton,
      }}
    >
      <CmndChatBot />
    </ChatProvider>
  );
}

tip

When implementing custom components, consider creating a theme file that defines consistent styles across all your components to maintain visual coherence throughout your application.