Custom Styles

Introduction

The CMND React SDK allows you to customize the CSS styles of the chat interface using the customStyles prop. This provides a flexible way to adjust the appearance of various chat elements without needing to create custom components.

Benefits of Custom Styles

Using customStyles provides several advantages:

• Ease of Use: No need to create separate components for styling.
• Consistency: Ensures uniform design across different chat elements.
• Flexibility: Quickly adjust styles to match different themes or branding guidelines.

With customStyles, you can easily personalize the chat experience while keeping implementation simple and maintainable.

Available Custom Styles

The following style properties are available for customization:

Avatar

Chat Avatar

chatAvatarStyle: Defines the appearance of the chatbot's avatar, such as size, shape, and border radius.

Avatar Style Example

chatAvatarStyle: {
  borderRadius: "50%",
  width: "40px",
  height: "40px",
}

Input Field

Input Field

inputStyle: Controls the styling of the text input field, including padding, border, and background color.

Input Style Example

inputStyle: {
  border: "1px solid #ccc",
  padding: "10px",
  borderRadius: "5px",
}

Send Button

Send Button

sendButtonStyle: Styles the send button, including its background color, text color, padding, and border radius.

Send Button Style Example

sendButtonStyle: {
  backgroundColor: "#007bff",
  color: "white",
  padding: "10px 15px",
  borderRadius: "5px",
}

Chat Bubbles

Chat Bubbles

chatbubbleStyle: Applies general styles to both user and bot chat bubbles.

botChatbubbleStyle: Specifically customizes the appearance of the chatbot's messages.

userChatbubbleStyle: Defines the look of user-sent messages.

Chat Bubble Styles Example

chatbubbleStyle: {
  padding: "10px",
  borderRadius: "10px",
},
botChatbubbleStyle: {
  backgroundColor: "#e0e0e0",
},
userChatbubbleStyle: {
  backgroundColor: "#007bff",
  color: "white",
}

warning

chatbubbleStyle overrides both botChatbubbleStyle and userChatbubbleStyle

Usage

To apply custom styles, pass the customStyles prop when initializing the chat component:

App.tsx

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

function App() {
  return (
    <ChatProvider
      baseUrl="<your-cmnd-api-base-url>"
      chatbotId={"<your-chatbot-id>"}
      organizationId={"<your-organization-id>"}
      customStyles={{
        chatAvatarStyle: {
          borderRadius: "50%",
          width: "40px",
          height: "40px",
        },
        inputStyle: {
          border: "1px solid #ccc",
          padding: "10px",
          borderRadius: "5px",
        },
        sendButtonStyle: {
          backgroundColor: "#007bff",
          color: "white",
          padding: "10px 15px",
          borderRadius: "5px",
        },
        chatbubbleStyle: {
          backgroundColor: "#f1f1f1",
          padding: "10px",
          borderRadius: "10px",
        },
        botChatbubbleStyle: {
          backgroundColor: "#e0e0e0",
        },
        userChatbubbleStyle: {
          backgroundColor: "#007bff",
          color: "white",
        },
      }}
    />
  );
}

Best Practices

• Accessibility: Use meaningful color contrasts for better readability.
• Readability: Maintain sufficient padding and margins for comfortable reading.
• Responsiveness: Ensure styles are responsive for different screen sizes.

Interactive Style Editor

Try Different Style Combinations

The code below demonstrates how to implement a dynamic style editor in your application:

StyleEditor.tsx

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

const StyleEditor = () => {
  const [avatarBorderRadius, setAvatarBorderRadius] = useState("50%");
  const [bubbleBg, setBubbleBg] = useState("#e0e0e0");
  const [userBubbleBg, setUserBubbleBg] = useState("#007bff");

  return (
    <div className="style-editor">
      <div className="controls">
        <div>
          <label>Avatar Border Radius:</label>
          <select
            value={avatarBorderRadius}
            onChange={(e) => setAvatarBorderRadius(e.target.value)}
          >
            <option value="50%">Circle (50%)</option>
            <option value="10%">Rounded (10%)</option>
            <option value="0">Square (0)</option>
          </select>
        </div>

        <div>
          <label>Bot Bubble Color:</label>
          <input
            type="color"
            value={bubbleBg}
            onChange={(e) => setBubbleBg(e.target.value)}
          />
        </div>

        <div>
          <label>User Bubble Color:</label>
          <input
            type="color"
            value={userBubbleBg}
            onChange={(e) => setUserBubbleBg(e.target.value)}
          />
        </div>
      </div>

      <ChatProvider
        baseUrl="<your-cmnd-api-base-url>"
        chatbotId="<your-chatbot-id>"
        organizationId="<your-organization-id>"
        customStyles={{
          chatAvatarStyle: {
            borderRadius: avatarBorderRadius,
            width: "40px",
            height: "40px",
          },
          botChatbubbleStyle: {
            backgroundColor: bubbleBg,
          },
          userChatbubbleStyle: {
            backgroundColor: userBubbleBg,
            color: "white",
          },
        }}
      >
        <CmndChatBot />
      </ChatProvider>
    </div>
  );
};

export default StyleEditor;

This example creates a simple interface to dynamically adjust styles, allowing you to preview changes in real-time.