UI Kit Builder Settings

The CometChatSettings object controls everything the React Router UI Kit Builder renders—messaging, AI helpers, calls, layout, theming, and agent tools.

For developers customizing their chat UI: Edit CometChatSettings.ts to enable/disable features like messaging, calls, AI copilot, and theming. See Integration Guide for setup.

Top-level structure

export interface CometChatSettings {
  chatFeatures: { ... }
  callFeatures: { ... }
  layout: { ... }
  style: { ... }
}

All boolean settings follow the same pattern: true enables the feature and shows its UI elements, false hides them completely.

1. Chat Features (`chatFeatures`)

1.1 Core Messaging Experience (`coreMessagingExperience`)

Essential messaging features: typing indicators, media sharing, message actions, and presence.

Setting	Type	What It Does
Typing indicator (`typingIndicator`)	boolean	Shows “typing…” indicator when someone is composing a message
Thread conversation & replies (`threadConversationAndReplies`)	boolean	Enables threaded replies to specific messages, creating nested conversation threads
Photos sharing (`photosSharing`)	boolean	Allows users to share images from device or camera
Video sharing (`videoSharing`)	boolean	Allows users to share video files
Audio sharing (`audioSharing`)	boolean	Allows users to share audio files (mp3, wav, etc.)
File sharing (`fileSharing`)	boolean	Allows users to share documents (PDF, DOC, etc.)
Edit messages (`editMessage`)	boolean	Lets users modify their sent messages; edited messages show “(edited)” label
Delete messages (`deleteMessage`)	boolean	Lets users remove their sent messages
Message delivery and read receipts (`messageDeliveryAndReadReceipts`)	boolean	Shows delivery (✓) and read (✓✓) status indicators on messages
User & friends presence (`userAndFriendsPresence`)	boolean	Shows online/offline status dot next to user avatars
Conversation and Advanced Search (`conversationAndAdvancedSearch`)	boolean	Enables search across messages, users, and conversations
Quoted Replies (`quotedReplies`)	boolean	Lets users quote a message when replying, showing the original above their response
Mark as Unread (`markAsUnread`)	boolean	Lets users mark a conversation as unread to revisit later

Empower users with a seamless chat experience—reply to specific messages with quoted replies, mark conversations as unread for later, and search across all chats instantly. Learn more about Core Features.

1.2 Deeper User Engagement (`deeperUserEngagement`)

Interactive features: mentions, reactions, polls, voice notes, and collaborative tools.

Setting	Type	What It Does
Mentions (`mentions`)	boolean	Lets users @mention specific people in a message to notify them
Mention All (`mentionAll`)	boolean	Lets users type @all to notify every member in a group chat
Reactions (`reactions`)	boolean	Lets users add emoji reactions (👍 ❤️ 😂 etc.) to messages
Message Translation (`messageTranslation`)	boolean	Translates messages to user’s preferred language. Requires Dashboard setup
Polls (`polls`)	boolean	Lets users create polls with multiple options for group voting. Requires Dashboard setup
Collaborative Whiteboard (`collaborativeWhiteboard`)	boolean	Opens a shared whiteboard for real-time drawing and collaboration. Requires Dashboard setup
Collaborative Document (`collaborativeDocument`)	boolean	Creates shared documents for real-time collaborative editing. Requires Dashboard setup
Voice Notes (`voiceNotes`)	boolean	Lets users record and send voice messages
Emojis (`emojis`)	boolean	Shows emoji picker in composer for browsing and inserting emojis
Stickers (`stickers`)	boolean	Lets users send sticker images from available packs. Requires Dashboard setup
User Info (`userInfo`)	boolean	Lets users tap on another user’s avatar to view their profile
Group Info (`groupInfo`)	boolean	Lets users tap on group header to view group details and member list
Report Message (`reportMessage`)	boolean	Lets users flag inappropriate messages for review. Requires moderation setup

Configure these features based on your app’s requirements. Learn more about Extensions.

1.3 AI User Copilot (`aiUserCopilot`)

AI-powered features to help users start and navigate conversations.

Setting	Type	What It Does
Conversation Starter (`conversationStarter`)	boolean	Shows AI-suggested opening messages when starting a new chat. Requires OpenAI API key
Conversation Summary (`conversationSummary`)	boolean	Generates an AI-powered summary of the conversation. Requires OpenAI API key
Smart Reply (`smartReply`)	boolean	Shows AI-suggested quick reply options based on conversation context. Requires OpenAI API key

AI User Copilot features require an OpenAI API key. Configure it in the CometChat Dashboard under Chat & Messaging > Settings. Learn more about AI Features.

1.4 User Management (`userManagement`)

Setting	Type	What It Does
Friends Only (`friendsOnly`)	boolean	Restricts chat to friends list only; Users tab shows only friends

1.5 Group Management (`groupManagement`)

Control what users can do with groups.

Setting	Type	What It Does
Create Group (`createGroup`)	boolean	Lets users create new public or private groups
Add Members to Groups (`addMembersToGroups`)	boolean	Lets group admins/owners invite users to join the group
Join/Leave Group (`joinLeaveGroup`)	boolean	Lets users join public groups and leave groups they’re in
Delete Group (`deleteGroup`)	boolean	Lets group owners permanently delete a group and all its messages
View Group Members (`viewGroupMembers`)	boolean	Shows member list in group info

1.6 Moderation (`moderatorControls`)

Admin tools for managing group members and content.

Setting	Type	What It Does
Blocked message feedback (`moderation`)	boolean	Enables blocked message feedback for blocked messages as per configured moderation rules. Requires Dashboard setup
Report Message (`reportMessage`)	boolean	Lets users flag messages for moderator review in Dashboard
Kick Users (`kickUsers`)	boolean	Lets admins/moderators remove a user from a group (they can rejoin)
Ban Users (`banUsers`)	boolean	Lets admins/moderators permanently remove a user and prevent rejoining
Promote/Demote Members (`promoteDemoteMembers`)	boolean	Lets group owners change member roles (member, moderator, admin)

To enable content moderation, set moderation and reportMessage to true, then configure your moderation rules in the CometChat Dashboard. See Rules Management for setup details.

1.7 Private Messaging Within Groups (`privateMessagingWithinGroups`)

Allow direct messages between group members.

Setting	Type	What It Does
Send Private Message to Group Members (`sendPrivateMessageToGroupMembers`)	boolean	Lets users start a 1:1 chat with a group member from their profile

1.8 In-App Sounds (`inAppSounds`)

Control sound notifications for incoming and outgoing messages.

Setting	Type	What It Does
Incoming Message Sound (`incomingMessageSound`)	boolean	Plays a sound when a new message is received
Outgoing Message Sound (`outgoingMessageSound`)	boolean	Plays a sound when a message is sent

These toggles control the default message sounds. To use custom audio files or manage sound playback programmatically, see the Sound Manager.

2. Call Features (`callFeatures`)

2.1 Voice and Video Calling (`voiceAndVideoCalling`)

Enable voice and video calling capabilities.

Setting	Type	What It Does
1:1 Voice Calling (`oneOnOneVoiceCalling`)	boolean	Shows phone icon in 1:1 chat header for starting voice calls
1:1 Video Calling (`oneOnOneVideoCalling`)	boolean	Shows video camera icon in 1:1 chat header for starting video calls
Group Video Conference (`groupVideoConference`)	boolean	Shows video camera icon in group chat header for starting group video calls
Group Voice Conference (`groupVoiceConference`)	boolean	Shows phone icon in group chat header for starting group voice calls

Learn more about Call Features.

3. Layout (`layout`)

Control the overall UI structure and navigation.

Setting	Type	What It Does
With Sidebar (`withSideBar`)	boolean	Shows navigation sidebar with tabs (Chats, Calls, Users, Groups) on the left side
Tabs (`tabs`)	string[]	Array of tabs to show: `'chats'`, `'calls'`, `'users'`, `'groups'`
Chat Type (`chatType`)	string	Default conversation type on load: `'user'` for 1:1 chats, `'group'` for group chats

Set withSideBar: false for embedded chat widgets or single-conversation views where navigation isn’t needed.

4. Style (`style`)

Customize colors, fonts, and theme appearance.

4.1 Theme

Setting	Type	What It Does
Theme (`theme`)	string	Controls light/dark mode: `'light'`, `'dark'`, or `'system'` (matches device preference)

Use theme: "system" to automatically match the user’s device preference. Preview your brandColor in both light and dark modes for contrast.Learn more about UI Kit Theming for additional customizations.

4.2 Colors

Setting	Type	What It Does
Brand Color (`brandColor`)	string	Primary accent color (hex) for buttons, links, active states. Example: `"#6852D6"`
Primary Text Light (`primaryTextLight`)	string	Main text color in light mode (hex). Example: `"#2B2B2B"`
Primary Text Dark (`primaryTextDark`)	string	Main text color in dark mode (hex). Example: `"#FFFFFF"`
Secondary Text Light (`secondaryTextLight`)	string	Secondary text color in light mode (hex) for timestamps, subtitles. Example: `"#727272"`
Secondary Text Dark (`secondaryTextDark`)	string	Secondary text color in dark mode (hex) for timestamps, subtitles. Example: `"#989898"`

Match brandColor to your website’s primary accent color. Use your site’s existing text colors for primaryTextLight and primaryTextDark to maintain brand consistency.

4.3 Typography

Setting	Type	What It Does
Font (`font`)	string	Font family: `'roboto'`, `'arial'`, `'inter'`, or `'times new roman'`
Size (`size`)	string	Text size and spacing: `'default'`, `'compact'`, or `'comfortable'`

Settings Overview

Below is the complete settings structure with default values. Update these in CometChatSettings.ts to customize your chat experience.

{
  "chatFeatures": {
    "coreMessagingExperience": {
      "typingIndicator": true,
      "threadConversationAndReplies": true,
      "photosSharing": true,
      "videoSharing": true,
      "audioSharing": true,
      "fileSharing": true,
      "editMessage": true,
      "deleteMessage": true,
      "messageDeliveryAndReadReceipts": true,
      "userAndFriendsPresence": true,
      "conversationAndAdvancedSearch": true,
      "moderation": true,
      "quotedReplies": false,
      "markAsUnread": false
    },
    "deeperUserEngagement": {
      "mentions": true,
      "mentionAll": true,
      "reactions": true,
      "messageTranslation": true,
      "polls": true,
      "collaborativeWhiteboard": true,
      "collaborativeDocument": true,
      "voiceNotes": true,
      "emojis": true,
      "stickers": true,
      "userInfo": true,
      "groupInfo": true
    },
    "aiUserCopilot": {
      "conversationStarter": false,
      "conversationSummary": false,
      "smartReply": false
    },
    "userManagement": {
      "friendsOnly": false
    },
    "groupManagement": {
      "createGroup": true,
      "addMembersToGroups": true,
      "joinLeaveGroup": true,
      "deleteGroup": true,
      "viewGroupMembers": true
    },
    "moderatorControls": {
      "kickUsers": true,
      "banUsers": true,
      "promoteDemoteMembers": true,
      "reportMessage": true
    },
    "privateMessagingWithinGroups": {
      "sendPrivateMessageToGroupMembers": true
    },
    "inAppSounds": {
      "incomingMessageSound": true,
      "outgoingMessageSound": true
    }
  },
  "callFeatures": {
    "voiceAndVideoCalling": {
      "oneOnOneVoiceCalling": true,
      "oneOnOneVideoCalling": true,
      "groupVideoConference": true,
      "groupVoiceConference": true
    }
  },
  "layout": {
    "withSideBar": true,
    "tabs": ["chats", "calls", "users", "groups"],
    "chatType": "user"
  },
  "style": {
    "theme": "system",
    "color": {
      "brandColor": "#6852D6",
      "primaryTextLight": "#141414",
      "primaryTextDark": "#FFFFFF",
      "secondaryTextLight": "#727272",
      "secondaryTextDark": "#989898"
    },
    "typography": {
      "font": "roboto",
      "size": "default"
    }
  }
}

Reference

Top-level structure

1. Chat Features (`chatFeatures`)

1.1 Core Messaging Experience (`coreMessagingExperience`)

1.2 Deeper User Engagement (`deeperUserEngagement`)

1.3 AI User Copilot (`aiUserCopilot`)

1.4 User Management (`userManagement`)

1.5 Group Management (`groupManagement`)

1.6 Moderation (`moderatorControls`)

1.7 Private Messaging Within Groups (`privateMessagingWithinGroups`)

1.8 In-App Sounds (`inAppSounds`)

2. Call Features (`callFeatures`)

2.1 Voice and Video Calling (`voiceAndVideoCalling`)

3. Layout (`layout`)

4. Style (`style`)

4.1 Theme

4.2 Colors

4.3 Typography

Settings Overview

Next Steps

Directory Structure

Customizations

​Top-level structure

​1. Chat Features (chatFeatures)

​1.1 Core Messaging Experience (coreMessagingExperience)

​1.2 Deeper User Engagement (deeperUserEngagement)

​1.3 AI User Copilot (aiUserCopilot)

​1.4 User Management (userManagement)

​1.5 Group Management (groupManagement)

​1.6 Moderation (moderatorControls)

​1.7 Private Messaging Within Groups (privateMessagingWithinGroups)

​1.8 In-App Sounds (inAppSounds)

​2. Call Features (callFeatures)

​2.1 Voice and Video Calling (voiceAndVideoCalling)

​3. Layout (layout)

​4. Style (style)

​4.1 Theme

​4.2 Colors

​4.3 Typography

​Settings Overview

​Next Steps

Directory Structure

Customizations

Top-level structure

1. Chat Features (`chatFeatures`)

1.1 Core Messaging Experience (`coreMessagingExperience`)

1.2 Deeper User Engagement (`deeperUserEngagement`)

1.3 AI User Copilot (`aiUserCopilot`)

1.4 User Management (`userManagement`)

1.5 Group Management (`groupManagement`)

1.6 Moderation (`moderatorControls`)

1.7 Private Messaging Within Groups (`privateMessagingWithinGroups`)

1.8 In-App Sounds (`inAppSounds`)

2. Call Features (`callFeatures`)

2.1 Voice and Video Calling (`voiceAndVideoCalling`)

3. Layout (`layout`)

4. Style (`style`)

4.1 Theme

4.2 Colors

4.3 Typography

Settings Overview

Next Steps