UI Kit Builder Settings

The CometChatSettings object controls everything the React UI Kit Builder renders—messaging, AI helpers, calls, layout, theming, and agent tools. Use this page as a definitive map of every toggle with recommended defaults.

Quick Reference for AI Agents & Developers - What this page covers: Complete reference for the CometChatSettings configuration object — chat features, call features, layout, styling, and AI copilot toggles. - Prerequisites: A working CometChat UI Kit Builder integration (see Integration Guide). - Key action: Modify the CometChatSettings.ts file in your project to toggle features, adjust layout, and customize theming.

Top-level structure

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

1. Chat Features (`chatFeatures`)

1.1 Core Messaging Experience (`coreMessagingExperience`)

Controls the essentials of chat.

Property	Type	Description
typingIndicator	boolean	Show “user is typing” state.
threadConversationAndReplies	boolean	Enable threaded conversations and replies.
photosSharing	boolean	Allow sharing images.
videoSharing	boolean	Allow sharing videos.
audioSharing	boolean	Allow sharing audio clips.
fileSharing	boolean	Allow generic file uploads.
editMessage	boolean	Let users edit their sent messages.
deleteMessage	boolean	Let users delete their sent messages.
messageDeliveryAndReadReceipts	boolean	Show delivery/read receipts.
userAndFriendsPresence	boolean	Display online/offline presence.
conversationAndAdvancedSearch	boolean (optional)	Enable conversation + advanced search.
moderation	boolean (optional)	Turn on content moderation tools.
quotedReplies	boolean (optional)	Allow quoting messages.
markAsUnread	boolean (optional)	Let users mark messages as unread.

1.2 Deeper User Engagement (`deeperUserEngagement`)

Richer ways to participate.

Property	Type	Description
mentions	boolean	Enable @mentions.
mentionAll	boolean (optional)	Allow @all to notify everyone in the group.
reactions	boolean	Emoji/label reactions on messages.
messageTranslation	boolean	Inline message translation.
polls	boolean	Create and vote on polls.
collaborativeWhiteboard	boolean	Real-time whiteboard.
collaborativeDocument	boolean	Collaborative docs.
voiceNotes	boolean	Voice-note capture and send.
emojis	boolean	Emoji keyboard support.
stickers	boolean	Sticker sending.
userInfo	boolean	View user profile info.
groupInfo	boolean	View group details.
reportMessage	boolean (optional)	Allow reporting a message.

1.3 AI User Copilot (`aiUserCopilot`)

AI assistance inside chat.

Property	Type	Description
conversationStarter	boolean	Suggest AI-generated conversation openers.
conversationSummary	boolean	Summaries of chat threads.
smartReply	boolean	Quick replies suggested by AI.

1.4 User Management (`userManagement`) — Optional

Property	Type	Description
friendsOnly	boolean (optional)	Restrict chat to friends-only mode.

1.5 Group Management (`groupManagement`)

Property	Type	Description
createGroup	boolean	Allow users to create groups.
addMembersToGroups	boolean	Add members to groups.
joinLeaveGroup	boolean	Join or leave groups.
deleteGroup	boolean	Allow admins to delete groups.
viewGroupMembers	boolean	Show group member list.

1.6 Moderator Controls (`moderatorControls`)

Property	Type	Description
kickUsers	boolean	Kick users from groups.
banUsers	boolean	Ban users from groups.
promoteDemoteMembers	boolean	Change a member’s scope.
reportMessage	boolean (optional)	Enable message reporting.

1.7 Private Messaging Within Groups (`privateMessagingWithinGroups`)

Property	Type	Description
sendPrivateMessageToGroupMembers	boolean	DM group members from the group context.

2. Call Features (`callFeatures`)

2.1 Voice and Video Calling (`voiceAndVideoCalling`)

Property	Type	Description
oneOnOneVoiceCalling	boolean	One-to-one voice calls.
oneOnOneVideoCalling	boolean	One-to-one video calls.
groupVideoConference	boolean	Group video calls.
groupVoiceConference	boolean	Group voice-only calls.

3. Layout (`layout`)

Property	Type	Description
withSideBar	boolean	Show/hide the sidebar.
tabs	string[]	Tabs to expose, e.g. `['chats','calls','users','groups']`.
chatType	string	Default chat type: `'user'` or `'group'`.

4. Style (`style`)

4.1 Theme

Property	Type	Description
theme	string	`'light'`, `'dark'`, or `'system'`.

4.2 Color

Property	Type	Description
brandColor	string	Primary UI color (hex).
primaryTextLight	string	Text color in light mode.
primaryTextDark	string	Text color in dark mode.
secondaryTextLight	string	Secondary text color in light mode.
secondaryTextDark	string	Secondary text color in dark mode.

4.3 Typography

Property	Type	Description
font	string	Font family (e.g., `'roboto'`).
size	string	Font size preset (e.g., `'default'`).

Example configuration

{
  "chatFeatures": {
    "coreMessagingExperience": {
      "typingIndicator": true,
      "threadConversationAndReplies": true,
      "photosSharing": true,
      "videoSharing": true,
      "audioSharing": true,
      "fileSharing": true,
      "editMessage": true,
      "deleteMessage": true,
      "messageDeliveryAndReadReceipts": true,
      "userAndFriendsPresence": true,
      "quotedReplies": true,
      "markAsUnread": true
    },
    "deeperUserEngagement": {
      "mentions": true,
      "mentionAll": false,
      "reactions": true,
      "messageTranslation": true,
      "polls": true,
      "collaborativeWhiteboard": false,
      "collaborativeDocument": false,
      "voiceNotes": true,
      "emojis": true,
      "stickers": true,
      "userInfo": true,
      "groupInfo": true
    },
    "aiUserCopilot": {
      "conversationStarter": true,
      "conversationSummary": true,
      "smartReply": true
    },
    "userManagement": { "friendsOnly": false },
    "groupManagement": {
      "createGroup": true,
      "addMembersToGroups": true,
      "joinLeaveGroup": true,
      "deleteGroup": true,
      "viewGroupMembers": true
    },
    "moderatorControls": {
      "kickUsers": true,
      "banUsers": true,
      "promoteDemoteMembers": true
    },
    "privateMessagingWithinGroups": {
      "sendPrivateMessageToGroupMembers": 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": "#2B2B2B",
      "primaryTextDark": "#FFFFFF",
      "secondaryTextLight": "#727272",
      "secondaryTextDark": "#989898"
    },
    "typography": {
      "font": "roboto",
      "size": "default"
    }
  },
  "noCode": {
    "docked": true,
    "styles": {
      "buttonBackGround": "#6852D6",
      "buttonShape": "rounded",
      "openIcon": "https://example.com/open.svg",
      "closeIcon": "https://example.com/close.svg",
      "customJs": "console.log('hello from no-code')",
      "customCss": ".cc-chat { border-radius: 16px; }",
      "dockedAlignment": "right"
    }
  },
  "agent": {
    "chatHistory": true,
    "newChat": true,
    "agentIcon": "https://example.com/agent.png",
    "showAgentIcon": true
  }
}

Tips

Enable conversationAndAdvancedSearch when you need global search across conversations; keep it off for lighter builds.
For enterprise moderation, pair moderation + reportMessage with your backend review queues.
Keep noCode.styles.customJs minimal and sanitized; avoid long-running scripts to maintain widget performance.

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`) — Optional

1.5 Group Management (`groupManagement`)

1.6 Moderator Controls (`moderatorControls`)

1.7 Private Messaging Within Groups (`privateMessagingWithinGroups`)

2. Call Features (`callFeatures`)

2.1 Voice and Video Calling (`voiceAndVideoCalling`)

3. Layout (`layout`)

4. Style (`style`)

4.1 Theme

4.2 Color

4.3 Typography

Example configuration

Tips

Next Steps

Customizations

Directory Structure

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) — Optional

​1.5 Group Management (groupManagement)

​1.6 Moderator Controls (moderatorControls)

​1.7 Private Messaging Within Groups (privateMessagingWithinGroups)

​2. Call Features (callFeatures)

​2.1 Voice and Video Calling (voiceAndVideoCalling)

​3. Layout (layout)

​4. Style (style)

​4.1 Theme

​4.2 Color

​4.3 Typography

​Example configuration

​Tips

​Next Steps

Customizations

Directory Structure

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`) — Optional

1.5 Group Management (`groupManagement`)

1.6 Moderator Controls (`moderatorControls`)

1.7 Private Messaging Within Groups (`privateMessagingWithinGroups`)

2. Call Features (`callFeatures`)

2.1 Voice and Video Calling (`voiceAndVideoCalling`)

3. Layout (`layout`)

4. Style (`style`)

4.1 Theme

4.2 Color

4.3 Typography

Example configuration

Tips

Next Steps