UI Kit Builder Settings

The CometChatSettings object controls everything the Angular UI Kit Builder renders—messaging, AI helpers, calls, layout, and theming. It also carries two blocks the export does not apply, noCode and agent, which are described at the end.

For developers customizing their chat UI: Edit src/app/config/cometchat-builder-settings.json to enable/disable features like messaging, calls, AI copilot, and theming. See Integration Guide for setup.

How settings are applied

Unlike a runtime config file, the export’s settings are imported at build time, not fetched. A malformed file is a build error rather than an app that quietly ignores your choices.

src/app/config/cometchat-builder-settings.json   ← your Builder choices
        ↓  merged over
src/app/config/default-settings.ts               ← the shipped defaults
        ↓  exposed as signals by
src/app/config/feature-flags.ts                  ← what components read

SettingsService merges your file over the defaults, so a key you omit falls back rather than turning the feature off. FeatureFlags then exposes one signal per feature. To change a feature after export, edit the JSON and rebuild — or re-export from the Builder.

Top-level structure

export interface CometChatSettings {
  chatFeatures: { ... }
  callFeatures: { ... }
  layout: { ... }
  style: { ... }
  noCode?: { ... }   // carried, not applied
  agent?: { ... }    // carried, not applied
}

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
Blocked message feedback (`moderation`)	boolean	Shows feedback for messages blocked by your moderation rules. Requires Dashboard setup
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
Rich Text Formatting (`richTextFormatting`)	boolean	Shows the formatting toolbar in the composer for bold, italic, lists and links
Multiple Attachments (`multipleAttachments`)	boolean	Lets users attach and send several files in a single message

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 open a one-to-one chat header to view that user’s details panel
Group Info (`groupInfo`)	boolean	Lets users tap on group header to view group details and member list

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.

These three default to false in the export. They need an AI provider configured to do anything, so they stay off until you switch them on deliberately.

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
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 (under Core Messaging Experience) 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
Compact Message Composer (`compactMessageComposer`)	boolean	Renders the composer in a single-line layout instead of the standard multi-line one

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

The tab strip hides itself when only one tab is enabled — a navigation control with one destination is not shown. The panel it would have labelled still renders.

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: `"#141414"`
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"`

An empty string means “no override” — the UI Kit’s shipped palette applies. This is why the defaults below are blank rather than hex values: an export only carries the colors you actually changed.

The brand color also regenerates the ten-step tint ramp behind avatars, hover states and highlights, so a single value re-themes those surfaces too.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'`. `""` means no override
Size (`size`)	string	Text size and spacing: `'default'`, `'compact'`, or `'comfortable'`. `""` means no override

Each family is applied as a stack with fallbacks, so a typeface that is not installed on the viewer’s machine degrades to a close match rather than the browser default.

5. Carried but Not Applied

The export’s settings file includes two more blocks. They keep the file identical to what the Builder produces for other platforms, but nothing in the Angular export reads them, so changing them has no effect. Docked-widget styling (docked, styles.buttonBackGround, styles.dockedAlignment and so on) for the embeddable no-code widget. There is no Angular equivalent of that widget.

5.2 Agent (`agent`)

Setting	Type	Intent
Chat History (`chatHistory`)	boolean	Show the agent’s chat history
New Chat (`newChat`)	boolean	Allow starting a new agent chat
Agent Icon (`agentIcon`)	string	Icon for the agent entry point
Show Agent Icon (`showAgentIcon`)	boolean	Whether that entry point appears

These drive the Builder’s own AI-agent view, which lives in the Builder rather than in the exported app.

Settings Overview

Below is the complete settings structure with the export’s default values. Update these in src/app/config/cometchat-builder-settings.json 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": true,
      "markAsUnread": true,
      "richTextFormatting": true,
      "multipleAttachments": true
    },
    "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",
    "compactMessageComposer": false
  },
  "style": {
    "theme": "system",
    "color": {
      "brandColor": "",
      "primaryTextLight": "",
      "primaryTextDark": "",
      "secondaryTextLight": "",
      "secondaryTextDark": ""
    },
    "typography": {
      "font": "",
      "size": ""
    }
  },
  "agent": {
    "chatHistory": true,
    "newChat": true,
    "agentIcon": "",
    "showAgentIcon": true
  }
}

Reference

How settings are applied

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

5. Carried but Not Applied

5.1 No-Code Widget (`noCode`)

5.2 Agent (`agent`)

Settings Overview

Next Steps

Directory Structure

Customizations

​How settings are applied

​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

​5. Carried but Not Applied

​5.1 No-Code Widget (noCode)

​5.2 Agent (agent)

​Settings Overview

​Next Steps

Directory Structure

Customizations

How settings are applied

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

5. Carried but Not Applied

5.1 No-Code Widget (`noCode`)

5.2 Agent (`agent`)

Settings Overview

Next Steps