> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# CometChat Settings Guide

The `CometChatSettings.ts` file defines configuration options for **[CometChat Builder](https://preview.cometchat.com/)**, giving developers full control over messaging capabilities, AI enhancements, UI layout, styling, and moderation tools.

***

## **1. Chat Features**

### Core Messaging Experience

These options enable essential messaging functionalities:

```json theme={null}
"coreMessagingExperience": {
  "typingIndicator": true,
  "threadConversationAndReplies": true,
  "photosSharing": true,
  "videoSharing": true,
  "audioSharing": true,
  "fileSharing": true,
  "editMessage": true,
  "deleteMessage": true,
  "messageDeliveryAndReadReceipts": true,
  "userAndFriendsPresence": true
}
```

* **`typingIndicator`** → Displays when a user is typing.
* **`threadConversationAndReplies`** → Enables threaded replies.
* **Media Sharing**: `photosSharing`, `videoSharing`, `audioSharing`, `fileSharing`
* **Editing**: `editMessage`, `deleteMessage`
* **Status**: `messageDeliveryAndReadReceipts`, `userAndFriendsPresence`

***

### Deeper User Engagement

Enhance user interaction with richer messaging options:

```json theme={null}
"deeperUserEngagement": {
  "mentions": true,
  "reactions": true,
  "messageTranslation": true,
  "polls": true,
  "collaborativeWhiteboard": false,
  "collaborativeDocument": false,
  "voiceNotes": false,
  "emojis": true,
  "stickers": true,
  "userInfo": true,
  "groupInfo": true
}
```

* **`mentions`** → Tag users using @mention.
* **`reactions`** → Emoji reactions to messages.
* **`messageTranslation`** → Instant translation of messages.
* **`polls`** → Create and vote on polls.
* **`collaborativeWhiteboard`**, **`collaborativeDocument`** → Real-time co-creation (currently disabled).
* **`voiceNotes`** → Send recorded voice messages (currently disabled).
* **`emojis`, `stickers`** → Express with visual elements.
* **`userInfo`, `groupInfo`** → Enable viewing detailed user and group profiles.

***

### AI User Copilot

AI-powered tools to boost communication efficiency:

```json theme={null}
"aiUserCopilot": {
  "conversationStarter": true,
  "conversationSummary": true,
  "smartReply": true
}
```

* **`conversationStarter`** → AI-suggested chat openers.
* **`conversationSummary`** → Summarize long threads automatically.
* **`smartReply`** → AI-generated quick replies.

***

### Group Management

Enable users to manage groups and members:

```json theme={null}
"groupManagement": {
  "createGroup": true,
  "addMembersToGroups": true,
  "joinLeaveGroup": true,
  "deleteGroup": true,
  "viewGroupMembers": true
}
```

* Create, join, leave, or delete groups.
* View members and add new ones.

***

### Moderator Controls

Give moderators the tools to manage group integrity:

```json theme={null}
"moderatorControls": {
  "kickUsers": true,
  "banUsers": true,
  "promoteDemoteMembers": true
}
```

* Kick or ban misbehaving users.
* Change user roles (admin/member).

***

### Private Messaging within Groups

One-on-one messaging inside group chats:

```json theme={null}
"privateMessagingWithinGroups": {
  "sendPrivateMessageToGroupMembers": true
}
```

* Allows sending private DMs to group participants directly from the group context.

***

## **2. Call Features**

Control real-time voice and video communication:

```json theme={null}
"callFeatures": {
  "voiceAndVideoCalling": {
    "oneOnOneVoiceCalling": true,
    "oneOnOneVideoCalling": true,
    "groupVideoConference": true,
    "groupVoiceConference": true
  }
}
```

* **One-on-One**: Voice and video calling.
* **Group**: Video conferencing and voice-only calls.

***

## **3. Layout Customization**

Customize how the chat UI looks and navigates:

```json theme={null}
"layout": {
  "withSideBar": true,
  "tabs": ["chats", "groups", "users", "calls"],
  "chatType": "user"
}
```

* **`withSideBar`** → Show/hide the sidebar.
* **`tabs`** → Define which sections (and order) are present in navigation.
* **`chatType`** → Default view: `"user"` or `"group"` chat.

***

## **4. Styling & Theme Customization**

Manage the look & feel of the chat experience.

```json theme={null}
"style": {
  "theme": "system",
  "color": {
    "brandColor": "#df4343",
    "primaryTextLight": "#df4343",
    "primaryTextDark": "#FFFFFF",
    "secondaryTextLight": "#727272",
    "secondaryTextDark": "#989898"
  },
  "typography": {
    "font": "Sans-serif",
    "size": "Default"
  }
}
```

### Theme

* **`theme`**: `"system"` (inherits from OS), `"light"`, or `"dark"`.

### Colors

* **`brandColor`** → Accent color used throughout UI.
* **Text Colors**: Separate values for light and dark mode (`primaryText*`, `secondaryText*`).

### Typography

* **`font`** → Global font family.
* **`size`** → `"Default"`, `"Compact"`, or `"Comfortable"`.

***

## **Summary**

The `CometChatSettings.ts` file gives you **end-to-end configuration** of your CometChat-powered app—from feature toggles to layout and theming.

Use this guide as your go-to reference when:

* Customizing chat or call functionality
* Enabling AI features
* Managing group or user interactions
* Personalizing the UI for your brand

***

## **Related Links**

* [Directory Structure](/ui-kit/react/builder-dir-structure)
* [Advanced Theming](/ui-kit/react/theme)