> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# UI Kit Builder Settings

> Configure Angular UI Kit Builder settings for messaging, AI helpers, calling, layout, and theming.

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.

<Info>
  **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](/docs/chat-builder/angular/integration) for setup.
</Info>

## 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

```ts theme={null}
export interface CometChatSettings {
  chatFeatures: { ... }
  callFeatures: { ... }
  layout: { ... }
  style: { ... }
  noCode?: { ... }   // carried, not applied
  agent?: { ... }    // carried, not applied
}
```

***

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

## 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 |

<Tip>
  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](/docs/ui-kit/angular/core-features).
</Tip>

### 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 |

<Tip>
  Configure these features based on your app's requirements. Learn more about [Extensions](/docs/ui-kit/angular/extensions).
</Tip>

### 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 |

<Tip>
  AI User Copilot features require an OpenAI API key. Configure it in the [CometChat Dashboard](https://app.cometchat.com) under **Chat & Messaging > Settings**. Learn more about [AI Features](/docs/ui-kit/angular/ai-features).
</Tip>

<Note>
  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.
</Note>

### 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) |

<Tip>
  To enable content moderation, set `moderation` (under Core Messaging Experience) and `reportMessage` to `true`, then configure your moderation rules in the [CometChat Dashboard](https://app.cometchat.com). See [Rules Management](/docs/moderation/getting-started#setting-up-moderation-rules) for setup details.
</Tip>

### 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 |

<Tip>
  These toggles control the default message sounds. To use custom audio files or manage sound playback programmatically, see the [Sound Manager](/docs/ui-kit/angular/sound-manager).
</Tip>

***

## 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 |

<Tip>
  Learn more about [Call Features](/docs/ui-kit/angular/call-features).
</Tip>

***

## 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 |

<Tip>
  Set `withSideBar: false` for embedded chat widgets or single-conversation views where navigation isn't needed.
</Tip>

<Note>
  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.
</Note>

***

## 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) |

<Tip>
  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](/docs/ui-kit/angular/customization/theming) for additional customizations.
</Tip>

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

<Note>
  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.
</Note>

<Tip>
  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.
</Tip>

### 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 |

<Note>
  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.
</Note>

***

## 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.

### 5.1 No-Code Widget (`noCode`)

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.

```json theme={null}
{
  "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
  }
}
```

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Directory Structure" href="/docs/chat-builder/angular/builder-dir-structure">
    Understand the organization of the builder components and generated code.
  </Card>

  <Card title="Customizations" href="/docs/chat-builder/angular/builder-customisations">
    Modify component inputs, styling, and behavior for deeper customization.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.