raj-dubey1 · Oct 16, 2026 · Oct 16, 2026 · Oct 16, 2026 · Oct 16, 2026
diff --git a/CODEOWNERS b/CODEOWNERS
@@ -6,7 +6,7 @@
 
 # Default owners for everything in the repo
 
-- @swapnil-cometchat
+* @jitvarpatil
 
 # Moderation related files
 

diff --git a/mcp-server.mdx b/mcp-server.mdx
@@ -85,7 +85,7 @@
 - *"Let project members talk in a group chat with file sharing."*
 - *"Add video calling between two users with a click-to-call button."*
 - *"Set up content moderation so banned words are blocked before delivery."*
 - *"Build a multi-tenant SaaS chat where each workspace's users are isolated."*
 - *"Add presence indicators and typing dots to my conversation list."*

 The agent will search the docs, pull the matching implementation bundle,
@@ -109,25 +109,28 @@
     target framework, so the agent can pick the right one.
   </Card>
   <Card title="get_cometchat_implementation_bundle" icon="box-open">
-    Return a curated implementation recipe — prerequisites, install,
-    configuration, working code — for a named scenario.
+    Return the docs pages for a named scenario — the integration guide and
+    the platform's AI reference page — compiled into one document.
   </Card>
 </CardGroup>
 
-### Ten curated implementation bundles
+### Implementation bundles
 
-| Bundle | What it covers |
+Each bundle is compiled from the current pages of these docs, so it always matches what the docs say.
+
+| Bundle | Built from |
 | --- | --- |
-| `react-uikit-quickstart` | React UI Kit install, init, login, conversations list, chat window |
-| `react-native-uikit-quickstart` | React Native UI Kit install, navigation, basic chat screen |
-| `flutter-uikit-quickstart` | Flutter UI Kit install, init, login, basic chat |
-| `ios-uikit-quickstart` | iOS UI Kit (SwiftUI) install, init, login, chat view |
-| `android-uikit-quickstart` | Android UI Kit (Compose) install, init, login, chat screen |
-| `js-sdk-messaging-basics` | Vanilla JS SDK install, send/receive text and media messages |
-| `widget-embed` | No-code widget embed for an existing site |
-| `moderation-setup` | AI moderation, profanity filter, image moderation, webhooks |
-| `multi-tenant-chat` | Multi-tenant SaaS chat — auth, isolation, tenant-scoped users |
-| `presence-and-typing` | Online presence, typing indicators, read receipts |
+| `react-uikit-quickstart` | [React integration](/ui-kit/react/integration-react) and the React AI reference page |
+| `react-native-uikit-quickstart` | [React Native CLI integration](/ui-kit/react-native/react-native-cli-integration) and the React Native AI reference page |
+| `angular-uikit-quickstart` | [Angular integration](/ui-kit/angular/integration) and the Angular AI reference page |
+| `flutter-uikit-quickstart` | [Flutter getting started](/ui-kit/flutter/getting-started) and the Flutter AI reference page |
+| `ios-uikit-quickstart` | [iOS integration](/ui-kit/ios/getting-started) and the iOS AI reference page |
+| `android-uikit-quickstart` | [Android getting started](/ui-kit/android/getting-started), the Jetpack Compose guide, and the Android AI reference page |
+| `js-sdk-messaging-basics` | JavaScript SDK [setup](/sdk/javascript/setup-sdk), [send](/sdk/javascript/send-message) and [receive](/sdk/javascript/receive-message) messages |
+| `presence-and-typing` | JavaScript SDK [presence](/sdk/javascript/user-presence), [typing indicators](/sdk/javascript/typing-indicators) and [receipts](/sdk/javascript/delivery-read-receipts) |
+| `moderation-setup` | [Moderation getting started](/moderation/getting-started) |
+| `multi-tenant-chat` | [Multi-tenancy](/fundamentals/multi-tenancy) |
+| `widget-embed` | [Widget HTML integration](/widget/html/integration) |
 
 ### Orientation skill resource
 

@@ -8,7 +8,7 @@
 | Field | Value |
 | --- | --- |
 | Kotlin (XML Views) | `com.cometchat:chatuikit-kotlin-android` + `com.cometchat:calls-sdk-android` |
 | Jetpack Compose | `com.cometchat:chatuikit-compose-android` + `com.cometchat:calls-sdk-android` |
 | Required setup | `CometChatUIKit.init()` then `CometChatUIKit.login()` — Calls SDK must also be installed |
 | Call features | Incoming Call, Outgoing Call, Call Logs, Call Buttons, Ongoing Call |
 | Key components | `CometChatCallButtons`, `CometChatIncomingCall`, `CometChatOutgoingCall`, `CometChatCallLogs`, `CometChatOngoingCall` |
@@ -33,17 +33,17 @@
 <Tab title="Kotlin (XML Views)">
 ```kotlin build.gradle.kts
 dependencies {
-    implementation("com.cometchat:chatuikit-kotlin-android:6.0.6")
-    implementation("com.cometchat:calls-sdk-android:5.0.1")
+    implementation("com.cometchat:chatuikit-kotlin-android:6.1.1")
+    implementation("com.cometchat:calls-sdk-android:5.0.4")
 }
 ```
 </Tab>
 
 <Tab title="Jetpack Compose">
 ```kotlin build.gradle.kts
 dependencies {
-    implementation("com.cometchat:chatuikit-compose-android:6.0.6")
-    implementation("com.cometchat:calls-sdk-android:5.0.1")
+    implementation("com.cometchat:chatuikit-compose-android:6.1.1")
+    implementation("com.cometchat:calls-sdk-android:5.0.4")
 }
 ```
 </Tab>

@@ -36,17 +36,17 @@
 <Tab title="Kotlin (XML Views)">
 ```kotlin build.gradle.kts
 dependencies {
-    implementation("com.cometchat:chatuikit-kotlin-android:6.0.6")
-    implementation("com.cometchat:calls-sdk-android:5.0.1")
+    implementation("com.cometchat:chatuikit-kotlin-android:6.1.1")
+    implementation("com.cometchat:calls-sdk-android:5.0.4")
 }
 ```
 </Tab>
 
 <Tab title="Jetpack Compose">
 ```kotlin build.gradle.kts
 dependencies {
-    implementation("com.cometchat:chatuikit-compose-android:6.0.6")
-    implementation("com.cometchat:calls-sdk-android:5.0.1")
+    implementation("com.cometchat:chatuikit-compose-android:6.1.1")
+    implementation("com.cometchat:calls-sdk-android:5.0.4")
 }
 ```
 </Tab>
@@ -62,7 +62,7 @@
 </Tab>

 <Tab title="Jetpack Compose">
 The `CometChatMessageHeader` composable hides the call buttons by default (`hideVoiceCallButton` and `hideVideoCallButton` both default to `true`). Show them explicitly:

 ```kotlin
 CometChatMessageHeader(
@@ -75,7 +75,7 @@
 </Tabs>

 <Warning>
 **Enabling calling in an app that already has logged-in users requires a re-login.** `CometChatUIKit.login()` short-circuits when the same uid already has a persisted session — it returns `onSuccess` without logging the Calls SDK in, so the Calls SDK has no auth token and `CometChatCallLogs` shows a silent error state (logcat: `User auth token cannot be null`). After calling is first enabled, log out and log in again (`CometChatUIKit.logout(...)` then `CometChatUIKit.login(...)`), and wire `onError` on `CometChatCallLogs` during development so this failure is visible.
 </Warning>

 <Frame>

@@ -1,7 +1,7 @@
 ---
 title: "Getting Started With Jetpack Compose UI Kit"
 sidebarTitle: "Jetpack Compose"
 description: "Step-by-step guide to integrate the CometChat Jetpack Compose UI Kit into your Android app."
 ---

 <Accordion title="AI Integration Quick Reference">
@@ -9,7 +9,7 @@
 | Field | Value |
 | --- | --- |
 | Package | `com.cometchat:chatuikit-compose-android` |
 | UI Layer | Jetpack Compose (Material 3) |
 | Init | `CometChatUIKit.init(context, UIKitSettings, callback)` — must resolve before `login()` |
 | Login | `CometChatUIKit.login("UID", callback)` — must resolve before rendering components |
 | Order | `init()` → `login()` → render. Breaking this order = blank screen |
@@ -19,7 +19,7 @@

 </Accordion>

 This guide walks you through integrating the CometChat Jetpack Compose UI Kit into an Android app. All UI components are native Compose composables built with Material 3. By the end you'll have a working chat UI.

 ---

@@ -38,7 +38,7 @@
 - An Android emulator or physical device running Android 9.0 (API 28) or higher
 - `compileSdk = 36` (or newer) in your app module — the UI Kit's transitive `androidx.core:core-ktx:1.18.0` requires it; a `compileSdk`-35 app fails `checkDebugAarMetadata` with an AAR-metadata error
 - Kotlin configured with Compose compiler plugin
 - Gradle plugin 8.0+ with Kotlin DSL

 <Warning>
 Auth Key is for development only. In production, generate Auth Tokens server-side via the [REST API](https://api-explorer.cometchat.com/) and use `loginWithAuthToken()`. Never ship Auth Keys in client code.
@@ -116,19 +116,27 @@
 
 dependencies {
     // CometChat Jetpack Compose UI Kit
-    implementation("com.cometchat:chatuikit-compose-android:6.0.6")
+    implementation("com.cometchat:chatuikit-compose-android:6.1.1")
 
     // (Optional) Voice/video calling
-    implementation("com.cometchat:calls-sdk-android:5.0.1")
+    implementation("com.cometchat:calls-sdk-android:5.0.4")
 }
 ```
 
+<Warning>
+**Use Compose 1.8 or newer.** `chatuikit-compose-android` 6.1.1 declares compose-bom 2024.09.00 (Compose 1.7) in its POM, but calls a Compose 1.8 `LazyColumn` API. With Compose 1.7 the app builds, then crashes with `NoSuchMethodError: ... LazyColumn(...)` when `CometChatConversations` first renders. Pin a newer BOM in your app module:
+
+```kotlin
+implementation(platform("androidx.compose:compose-bom:2025.06.00"))
+```
+</Warning>
+
 ---
 
 <Warning>
 **Required dependency exclude.** The UI Kit pulls `io.noties:prism4j`, which brings
 `org.jetbrains:annotations-java5:17.0.0`. That duplicates `org.jetbrains:annotations:23.0.0` from
 AndroidX/Kotlin and the build fails at dexing with ~40 `Duplicate class org.jetbrains.annotations.*`
 errors. Add this to your app module:

 ```kotlin
@@ -245,7 +253,7 @@
 Sequential navigation — conversation list as the entry point, tap a conversation to open a full-screen message view.

 <Card title="Build Conversation List + Message View" href="/ui-kit/android/conversation-message-view" icon="comments">
  Step-by-step guide to build this layout with Jetpack Compose
 </Card>

 ---

@@ -38,7 +38,7 @@
 - An Android emulator or physical device running Android 9.0 (API 28) or higher
 - `compileSdk = 36` (or newer) in your app module — the UI Kit's transitive `androidx.core:core-ktx:1.18.0` requires it; a `compileSdk`-35 app fails `checkDebugAarMetadata` with an AAR-metadata error
 - Kotlin configured in your project
 - Gradle plugin 8.0+ with Kotlin DSL

 <Warning>
 Auth Key is for development only. In production, generate Auth Tokens server-side via the [REST API](https://api-explorer.cometchat.com/) and use `loginWithAuthToken()`. Never ship Auth Keys in client code.
@@ -111,10 +111,10 @@
 
 dependencies {
     // CometChat Kotlin UI Kit
-    implementation("com.cometchat:chatuikit-kotlin-android:6.0.6")
+    implementation("com.cometchat:chatuikit-kotlin-android:6.1.1")
 
     // (Optional) Voice/video calling
-    implementation("com.cometchat:calls-sdk-android:5.0.1")
+    implementation("com.cometchat:calls-sdk-android:5.0.4")
 }
 ```
 
@@ -131,7 +131,7 @@
 <Warning>
 **Required dependency exclude.** The UI Kit pulls `io.noties:prism4j`, which brings
 `org.jetbrains:annotations-java5:17.0.0`. That duplicates `org.jetbrains:annotations:23.0.0` from
 AndroidX/Kotlin and the build fails at dexing with ~40 `Duplicate class org.jetbrains.annotations.*`
 errors. Add this to your app module:

 ```kotlin
@@ -145,7 +145,7 @@
 **Required app theme.** The UI Kit's views are Material components, so on a non-Material theme the
 first CometChat view you inflate throws `IllegalArgumentException: The style on this component
 requires your app theme to be Theme.MaterialComponents (or a descendant)` — the app crashes on the
 chat screen rather than rendering it unstyled. Inherit the kit's theme, which already descends from
 Material:

 ```xml res/values/themes.xml

@@ -1,7 +1,7 @@
 ---
 title: "Getting Started With CometChat Android UI Kit"
 sidebarTitle: "Integration"
 description: "Install, configure, and launch the CometChat Android UI Kit in your app — choose Kotlin (XML Views) or Jetpack Compose."
 ---

 <Accordion title="AI Integration Quick Reference">
@@ -9,7 +9,7 @@
 | Field | Value |
 | --- | --- |
 | Kotlin (XML Views) | `com.cometchat:chatuikit-kotlin-android` v6.x |
 | Jetpack Compose | `com.cometchat:chatuikit-compose-android` v6.x |
 | Init | `CometChatUIKit.init(context, UIKitSettings, callback)` — must resolve before `login()` |
 | Login | `CometChatUIKit.login("UID", callback)` — must resolve before rendering components |
 | Order | `init()` → `login()` → render. Breaking this order = blank screen |
@@ -42,7 +42,7 @@
 - Android Studio installed
 - An Android emulator or physical device running Android 9.0 (API 28) or higher
 - Java 8 or higher
 - Gradle plugin 4.0.1 or later

 <Warning>
 Auth Key is for development only. In production, generate Auth Tokens server-side via the [REST API](https://api-explorer.cometchat.com/) and use [`loginWithAuthToken()`](/ui-kit/android/methods#login-using-auth-token). Never ship Auth Keys in client code.
@@ -61,7 +61,7 @@

 ## Step 2 — Install Dependencies

 Add the CometChat repository and dependencies to your Gradle configuration.

 ### Add the CometChat Repository

@@ -88,8 +88,8 @@
 
 ```toml libs.versions.toml
 [versions]
-cometchat-ui-kit = "6.0.3"
-cometchat-calls-sdk = "5.0.1"
+cometchat-ui-kit = "6.1.1"
+cometchat-calls-sdk = "5.0.4"
 ```
 
 Define the libraries — pick the module for your UI toolkit:
@@ -132,21 +132,21 @@
 <Tab title="Kotlin (XML Views)">
 ```kotlin build.gradle.kts
 dependencies {
-    implementation("com.cometchat:chatuikit-kotlin-android:6.0.6")
+    implementation("com.cometchat:chatuikit-kotlin-android:6.1.1")
 
     // (Optional) Include if using voice/video calling features
-    implementation("com.cometchat:calls-sdk-android:5.0.1")
+    implementation("com.cometchat:calls-sdk-android:5.0.4")
 }
 ```
 </Tab>
 
 <Tab title="Jetpack Compose">
 ```kotlin build.gradle.kts
 dependencies {
-    implementation("com.cometchat:chatuikit-compose-android:6.0.6")
+    implementation("com.cometchat:chatuikit-compose-android:6.1.1")
 
     // (Optional) Include if using voice/video calling features
-    implementation("com.cometchat:calls-sdk-android:5.0.1")
+    implementation("com.cometchat:calls-sdk-android:5.0.4")
 }
 ```
 </Tab>
@@ -157,7 +157,7 @@

 ### Add AndroidX Support

 The Jetifier tool helps migrate legacy support libraries to AndroidX. Open `gradle.properties` and verify this line is present:

 ```properties gradle.properties
 android.enableJetifier=true
@@ -174,7 +174,7 @@
    Step-by-step integration using `chatuikit-kotlin` with XML layouts and ViewBinding
  </Card>
  <Card title="Jetpack Compose" icon="wand-magic-sparkles" href="/ui-kit/android/getting-started-jetpack">
    Step-by-step integration using `chatuikit-compose` with Composables
  </Card>
 </CardGroup>


@@ -15,7 +15,7 @@
 | Standalone | Add `CometChatMessageListComponent` to the consuming component's `imports: []` or it renders **nothing**, silently |
 | Primary output | `(threadRepliesClick)` — emits the parent message to open in a thread |
 | Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) |
 | Stitching | Bind `[user]` **or** `[group]` (never both). Wire `(threadRepliesClick)` → render `<cometchat-thread-header>` plus a second list with `[parentMessageId]`, or hide the reply affordance — a wired-but-dead reply button is a defect. See [Threaded Messages](/ui-kit/angular/guides/threaded-messages). |
 | Automatic behaviour | Real-time delivery, receipts, reactions, and every message-type bubble are rendered by the list — do not hand-roll bubbles |
 | Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px |
 | Full props | see the page body |
@@ -43,7 +43,7 @@
 - **Conversation Starters**: AI-generated conversation starters for empty conversations
 - **Message Options**: Customizable context menu with actions like edit, delete, reply, forward
 - **Reactions**: Support for message reactions with emoji picker
 - **Text Formatters**: Extensible text formatting for mentions, links, and custom patterns
 - **Keyboard Navigation**: Full keyboard accessibility (WCAG 2.1 Level AA compliant)
 - **Sound Notifications**:  notification sounds for new messages

@@ -89,7 +89,7 @@
 export class ChatComponent implements OnInit {
  chatUser?: CometChat.User;

  async ngOnInit(): Promise<void> {
    try {
      this.chatUser = await CometChat.getUser('RECEIVER_UID');
    } catch (error) {
@@ -357,14 +357,14 @@
 | `parentMessageId` | `number` | `undefined` | **Deprecated — pass `parentMessage` instead.** Enables thread mode by id. Still honoured when `parentMessage` is absent, so existing integrations keep working. |
 | `messagesRequestBuilder` | `CometChat.MessagesRequestBuilder` | `undefined` | Custom request builder for advanced message filtering and pagination configuration. |
 | `reactionsRequestBuilder` | `CometChat.ReactionsRequestBuilder` | `undefined` | Custom request builder for configuring how reactions are fetched. |
 | `textFormatters` | `CometChatTextFormatter[]` | `undefined` | Array of text formatters for processing message text content (mentions, links, custom patterns). |
-| `messageAlignment` | `MessageListAlignment` | `'standard'` | Message alignment mode. Options: `'left'` (all messages left-aligned) or `'standard'` (sent right, received left). |
+| `messageAlignment` | `MessageListAlignment` | `MessageListAlignment.standard` | Message alignment mode. Options: `MessageListAlignment.left` (all messages left-aligned) or `MessageListAlignment.standard` (sent right, received left). The enum is numeric, so bind the enum member, not a string. |
 | `scrollToBottomOnNewMessages` | `boolean` | `false` | When `true`, automatically scrolls to the bottom when new messages arrive. |
 | `quickOptionsCount` | `number` | `2` | Number of quick action options to display directly on the message bubble. |
 | `disableSoundForMessages` | `boolean` | `false` | When `true`, disables notification sounds for incoming messages. |
 | `customSoundForMessages` | `string` | `undefined` | Custom sound URL to play for message notifications instead of the default sound. |
 | `goToMessageId` | `string` | `undefined` | Message ID to scroll to and highlight when the component loads. |
 | `showScrollbar` | `boolean` | `false` | When `true`, shows the scrollbar in the message list container. |

 #### Display Control Properties

@@ -378,10 +378,10 @@
 | `hideError` | `boolean` | `false` | Hides error views when errors occur during message loading. |
 | `hideReplyInThreadOption` | `boolean` | `false` | Hides the "Reply in Thread" option from message context menu. |
 | `hideThreadSubscriptionOption` | `boolean` | `false` | Hides the thread follow/unfollow option from the message context menu, without turning the feature off. See [Thread Subscription](#thread-subscription). |
 | `hidePinMessageOption` | `boolean` | `false` | Hides "Pin message" from the Organise flyout. See [Pin and Save](#pin-and-save). |
 | `hideUnpinMessageOption` | `boolean` | `false` | Hides "Unpin message" from the Organise flyout. |
 | `hideSaveMessageOption` | `boolean` | `false` | Hides "Save message" from the Organise flyout. |
 | `hideUnsaveMessageOption` | `boolean` | `false` | Hides "Unsave message" from the Organise flyout. |
 | `hideTranslateMessageOption` | `boolean` | `false` | Hides the "Translate" option from message context menu. |
 | `hideEditMessageOption` | `boolean` | `false` | Hides the "Edit" option from message context menu (only shown for own text messages). |
 | `hideDeleteMessageOption` | `boolean` | `false` | Hides the "Delete" option from message context menu (only shown for own messages). |
@@ -457,9 +457,9 @@

 ### Pin and Save

 **Pin message** and **Save message** are gathered under an **Organise ▸** flyout, placed before Translate. The flyout is omitted entirely when neither action applies, rather than opening onto nothing.

 The menu shows Pin **or** Unpin, and Save **or** Unsave — never a toggling third state — because the presence of `pinnedAt` / `savedAt` on the message *is* the boolean.

 ```html expandable
 <cometchat-message-list
@@ -471,20 +471,20 @@

 | Behavior | Detail |
 |:---|:---|
 | Feature gate | The `features.ux.messages.pinned.enabled` / `features.ux.messages.saved.enabled` app settings, reported by `CometChat.isPinMessageEnabled()` / `isSaveMessageEnabled()` and overridable via `enablePinMessage` / `enableSaveMessage` in global config |
 | Eligibility | Excludes deleted, in-flight, moderation-held, and `action` category messages. Thread replies **are** eligible |
 | Pin permission | No client-side role gate — Pin is offered to every member and the server decides, refusing with `ERR_PERMISSION_DENIED`. The one client-side exception is a system pin, whose Unpin is withheld. Saving has no gate |
 | Confirmation | Pin and Save run immediately; **Unpin and Unsave ask first** |
 | Indicators | Pinned and saved bubbles keep their status-info footer and show a marker there, even mid-batch |

 See the [Pin and Save guide](/ui-kit/angular/guides/pin-and-save-messages) for the full feature.

 <Warning>
 **These outputs are affordances, not behaviour — an unbound output leaves a visible control that does nothing.**

 The thread-replies indicator is the one that bites. It renders automatically on any message that has replies, and it is clickable whether or not you bind `(threadRepliesClick)`. Leave it unbound and the user clicks it, nothing happens, and there is no error in the console to explain why — the component simply emitted into a listener that was never attached.

 Either wire the output to a thread surface (`<cometchat-thread-header>` plus a second `<cometchat-message-list>` bound to `[parentMessageId]`), or hide the affordance. Do not ship it visible and dead. The same applies to `smartReplyClick`, `conversationStarterClick` and `messagePrivatelyClick`.
 </Warning>


@@ -625,24 +625,24 @@
 
 ```typescript
 enum MessageListAlignment {
-  standard = 'standard',  // Sent messages right, received messages left
-  left = 'left'           // All messages aligned to the left
+  left = 0,     // All messages aligned to the left
+  standard = 1  // Sent messages right, received messages left
 }
 ```
 
 ### MessageBubbleAlignment Enum
 
 ```typescript
 enum MessageBubbleAlignment {
-  left = 'left',     // Message bubble aligned to the left
-  right = 'right',   // Message bubble aligned to the right
-  center = 'center'  // Message bubble centered (used for action messages)
+  left = 0,    // Message bubble aligned to the left
+  right = 1,   // Message bubble aligned to the right
+  center = 2   // Message bubble centered (used for action messages)
 }
 ```
 
 ### Usage Examples for Complex Properties

 #### Custom Text Formatters

 ```typescript expandable
 import {
@@ -740,7 +740,7 @@

 ### Customization Approaches

 CometChat UIKit offers multiple ways to customize the message list:

 | Approach | Use Case | Scope |
 |----------|----------|-------|
@@ -748,7 +748,7 @@
 | **Service-based** | Global customization via MessageBubbleConfigService | All message list instances |
 | **CSS Variables** | Visual styling and theming | Global or scoped |
 | **Custom Templates** | Complete control over message rendering | Per message type or global |
 | **Text Formatters** | Custom text processing and formatting | All text messages |

 ---

@@ -806,18 +806,20 @@
     <!-- Standard alignment: sent messages right, received messages left -->
     <cometchat-message-list
       [user]="user"
-      [messageAlignment]="'standard'"
+      [messageAlignment]="MessageListAlignment.standard"
     ></cometchat-message-list>
 
     <!-- Left alignment: all messages aligned to the left -->
     <cometchat-message-list
       [user]="user"
-      [messageAlignment]="'left'"
+      [messageAlignment]="MessageListAlignment.left"
     ></cometchat-message-list>
   `
 })
 export class LeftAlignedChatComponent {
   user?: CometChat.User;
+  // Expose the enum to the template. Its values are numbers, so a string such as 'left' does not work.
+  readonly MessageListAlignment = MessageListAlignment;
 }
 ```
 
@@ -1157,7 +1159,7 @@

 By default, `MessageBubbleConfigService` and `FormatterConfigService` are provided at the root level (`providedIn: 'root'`), meaning all message list instances share the same configuration. This works well for most applications.

 However, if you need different bubble styles or formatters for different message lists (e.g., a main chat panel and a thread panel side by side), you can scope these services to a wrapper component using Angular's hierarchical dependency injection.

 <Note>
  Each `<cometchat-message-list>` already gets its own `MessageListService` instance automatically (the component provides it internally). The scoping technique below applies only to customization services like `MessageBubbleConfigService` and `FormatterConfigService`.
@@ -1281,13 +1283,13 @@
 ---


 ### Custom Text Formatters

 Text formatters allow you to process and transform message text content. They can detect patterns like mentions, URLs, hashtags, or custom patterns and apply formatting.

 #### Understanding Text Formatters

 Text formatters extend the `CometChatTextFormatter` base class:

 ```typescript expandable
 import { CometChat } from '@cometchat/chat-sdk-javascript';
@@ -1411,7 +1413,7 @@
 }
 ```

 #### Using Custom Formatters

 ```typescript expandable
 import { Component, OnInit } from '@angular/core';
@@ -1469,7 +1471,7 @@
 ```

 <Note>
 Formatters are applied in order of their `priority` property (lower numbers run first). Each formatter receives the output of the previous formatter as its input.
 </Note>

 ---
@@ -1561,7 +1563,7 @@

 ### CSS Variable Customization

 CometChat UIKit uses CSS variables for styling, making it easy to customize the appearance without modifying component code. Override these variables in your global styles or scoped to specific components.

 #### Core CSS Variables

@@ -1745,7 +1747,7 @@

 ### Theming (Light/Dark Mode)

 CometChat UIKit supports both light and dark themes through CSS variables. The theme is controlled by the `data-theme` attribute on the root element.

 #### Switching Themes

@@ -1925,7 +1927,7 @@
 ```

 <Tip>
 Use CSS variables consistently throughout your application to ensure theme changes propagate correctly. Avoid hardcoding color values in component styles.
 </Tip>

 ---
@@ -1977,7 +1979,6 @@
       <cometchat-message-list
         [user]="user"
         [textFormatters]="formatters"
-        [messageAlignment]="'standard'"
         [separatorDateTimeFormat]="dateFormat"
         [hideReceipts]="false"
         [hideReactionOption]="false"
@@ -2277,7 +2278,7 @@
 <Warning>
  `parentMessageId` is **deprecated**. Pass the whole `parentMessage` instead.

  The id alone cannot answer "is this thread subscribed right now", and a reply arriving over the socket carries no subscription flag of its own — it has to inherit the parent's. A list holding only the id therefore renders realtime replies with the wrong subscription state in their action menu. The id used for scoping is derived from `parentMessage` when it is present, so passing both is redundant; passing only the id still works, it just opts out of realtime subscription state on replies.
 </Warning>

 Re-pass `parentMessage` when the parent updates in real time, so the list keeps reading its current state.
@@ -3230,11 +3231,11 @@

 | Key | Action | Context |
 |-----|--------|---------|
 | `Tab` | Move focus to next focusable element | Global navigation |
 | `Shift + Tab` | Move focus to previous focusable element | Global navigation |
 | `Enter` | Activate focused button or link | Buttons, links, interactive elements |
 | `Space` | Activate focused button, toggle checkbox | Buttons, checkboxes, toggles |
 | `Escape` | Close modal, menu, or panel; Cancel current action | Modals, context menus, thread panels, dialogs |
 | `Arrow Up` | Navigate to previous item in list | Context menus, reaction picker, message options |
 | `Arrow Down` | Navigate to next item in list | Context menus, reaction picker, message options |
 | `Arrow Left` | Navigate to previous option | Horizontal option lists, emoji picker |
@@ -3325,11 +3326,11 @@

 The component implements proper focus management for a seamless keyboard experience:

 1. **Focus Trapping in Modals**: When dialogs (delete confirmation, flag message, etc.) are open, focus is trapped within the modal until it's closed.

 2. **Focus Restoration**: When a modal or menu is closed, focus returns to the element that triggered it.

 3. **Visible Focus Indicators**: All focusable elements have visible focus indicators using CSS:

 ```css expandable
 /* Focus indicator styles (built into the component) */
@@ -3362,13 +3363,13 @@
 | `role="list"` | Message container | Identifies the message container as a list |
 | `role="listitem"` | Message bubble | Identifies each message as a list item |
 | `role="button"` | Interactive elements | Identifies clickable elements as buttons |
 | `role="dialog"` | Modals | Identifies modal dialogs |
 | `role="menu"` | Context menu | Identifies the context menu |
 | `role="menuitem"` | Menu options | Identifies individual menu items |
 | `role="status"` | Status indicators | Identifies status information (typing, receipts) |
 | `role="alert"` | Error messages | Identifies important alerts |
 | `aria-label` | Buttons, icons | Provides accessible names for elements without visible text |
 | `aria-labelledby` | Dialogs, sections | References the element that labels this element |
 | `aria-describedby` | Complex elements | References elements that describe this element |
 | `aria-live` | Dynamic content | Announces content changes to screen readers |
 | `aria-expanded` | Expandable elements | Indicates whether an element is expanded or collapsed |
@@ -3487,7 +3488,7 @@
 </div>
 ```

 **Modal Dialogs:**
 ```html expandable
 <!-- Delete confirmation dialog -->
 <div 
@@ -3595,8 +3596,8 @@
 - [ ] Error messages are announced immediately
 - [ ] Loading states are announced

 **Dialogs and Modals:**
 - [ ] Dialogs are announced when opened
 - [ ] Focus moves to dialog when opened
 - [ ] Can navigate dialog with Tab key
 - [ ] Escape key closes dialog
@@ -4072,7 +4073,7 @@
 }
 ```

 #### 3. Implement trackBy for Custom Lists

 If you render additional lists within message templates, always use `trackBy`:

@@ -4116,9 +4117,9 @@
 }
 ```

 #### 5. Debounce Scroll Events

 If you add custom scroll handlers, debounce them to prevent performance issues:

 ```typescript expandable
 import { Component, OnInit, OnDestroy } from '@angular/core';
@@ -4159,9 +4160,9 @@
 }
 ```

 #### 6. Optimize Text Formatters

 Keep text formatters efficient by avoiding complex regex patterns:

 ```typescript expandable
 // ❌ BAD: Complex regex with backtracking
@@ -4651,8 +4652,8 @@
 #### Runtime Optimization
 - [ ] Avoid expensive computations in templates
 - [ ] Use `trackBy` for all `@for` loops
 - [ ] Debounce scroll and resize event handlers
 - [ ] Keep text formatters simple and efficient

 #### Memory Management
 - [ ] Clean up subscriptions on component destroy
@@ -4677,7 +4678,7 @@
 </Tip>

 <Warning>
 Avoid premature optimization. Focus on the most impactful optimizations first (pagination, lazy loading, change detection) before micro-optimizing. Always measure before and after changes to verify improvements.
 </Warning>


@@ -5244,7 +5245,7 @@
 <Step title="Update Configuration">
 Replace placeholder values in the code:
 - `YOUR_APP_ID` → Your CometChat App ID
 - `YOUR_REGION` → Your region (us, eu, in, etc.)
 - `YOUR_AUTH_KEY` → Your Auth Key
 - `CURRENT_USER_ID` → The logged-in user's ID
 - `RECEIVER_USER_ID` → The user ID to chat with
@@ -5277,7 +5278,6 @@
   <!-- Behavior Options -->
   [scrollToBottomOnNewMessages]="true"
   [disableSoundForMessages]="false"
-  [messageAlignment]="'standard'"
 
   <!-- Display Options -->
   [hideReceipts]="false"

@@ -9,14 +9,14 @@
 | Field | Value |
 | --- | --- |
 | Package | `CometChatUIKitSwift` |
-| Version | `5.1.22` |
-| Requirements | Xcode 16+, iOS 13.0+, Swift 5.0+ |
+| Version | `5.2.3` (Swift Package Manager, Up to Next Major Version) |
+| Requirements | Xcode 16+, iOS 15.1+, Swift 5.0+ |
 | Init | `CometChatUIKit.init(uiKitSettings:)` — must complete before `login()` |
 | Login | `CometChatUIKit.login(uid:)` — must complete before rendering components |
 | Order | `init()` → `login()` → render. Breaking this order = blank screen |
 | Auth Key | Dev/testing only. Use Auth Token in production |
-| Calling | Optional. Install `CometChatCallsSDK 4.2.3` to enable |
-| Dependencies | `CometChatSDK 4.1.9` (installed automatically) |
+| Calling | Optional. Add `CometChatCallsSDK` 5.0.4 (Up to Next Major Version) to enable |
+| Dependencies | `CometChatSDK` 4.1.10+ (resolved automatically by the UI Kit package) |
 | AI Skills | `npx @cometchat/skills add` — [GitHub](https://github.com/cometchat/cometchat-skills) |
 
 </Accordion>
@@ -45,11 +45,11 @@
 /cometchat add chat to my app
 ```

 The skill detects your iOS project structure, navigation pattern (UIKit or SwiftUI), and existing auth system. It onboards you to CometChat directly in the terminal — signup, login, and app creation all via the CLI. It reads your view controllers, navigation, and components before proposing a placement, shows the plan, and waits for your approval before writing code. Credentials are saved via `Secrets.swift` or `.xcconfig`.

 After the first integration, re-run `/cometchat` to access the iteration menu: theme presets, 40+ features, component customization, production auth, user management, and diagnostics.

 Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and [30+ more agents](https://github.com/cometchat/cometchat-skills).

 ---

@@ -64,8 +64,8 @@
 | Region | Dashboard → Your App → Credentials (e.g. `us`, `eu`, `in`) |
 
 You also need:
 - Xcode 16 or later
-- iOS device or simulator running iOS 13.0+
+- iOS device or simulator running iOS 15.1+
 - Swift 5.0+
 - macOS
 
@@ -77,7 +77,7 @@

 ## Step 1 — Create an iOS Project

 Open Xcode and create a new project:

 1. Select **iOS App** in the template picker and click Next
 2. Enter your project name and bundle identifier
@@ -88,42 +88,8 @@
 
 ## Step 2 — Install the UI Kit
 
-<Tabs>
-<Tab title="CocoaPods">
-1. Create a Podfile in your project root:
+Add the UI Kit with Swift Package Manager:
 
-```bash
-pod init
-```
-
-2. Add CometChat to your Podfile:
-
-```ruby title="Podfile"
-platform :ios, '13.0'
-use_frameworks!
-
-target 'YourApp' do
-  pod 'CometChatUIKitSwift', '5.1.22'
-
-  # Optional: Voice/Video Calling
-  pod 'CometChatCallsSDK', '4.2.3'
-end
-```
-
-3. Install dependencies:
-
-```bash
-pod install --repo-update
-```
-
-4. Close the `.xcodeproj` file and open the `.xcworkspace` file instead. CocoaPods creates a workspace that includes your project and the installed pods.
-
-<Tip>
-Always open the `.xcworkspace` file after installing pods — opening the `.xcodeproj` will cause build errors. Having issues? See [CocoaPods Troubleshooting](/ui-kit/ios/troubleshooting#cocoapods-issues).
-</Tip>
-</Tab>
-
-<Tab title="Swift Package Manager">
 1. Go to **File → Add Package Dependencies**
 
 2. Enter the repository URL:
@@ -132,29 +98,20 @@
 https://github.com/cometchat/cometchat-uikit-ios
 ```
 
-3. Select **Up to Exact Version** and enter:
+3. Select **Up to Next Major Version** and enter:
 
 ```
-5.1.22
+5.2.3
 ```
 
-4. Add the Chat SDK separately using:
+4. Add the **CometChatUIKitSwift** product to your app target.
 
-```
-https://github.com/cometchat/chat-sdk-ios
-```
+The UI Kit package declares its own dependencies, so SPM also resolves `CometChatSDK` (4.1.10 or later) and `CometChatCardsSwift`. Don't add `chat-sdk-ios` yourself. If an older integration pins it to an exact version, remove that pin or change it to **Up to Next Major Version** from 4.1.10; an exact pin below 4.1.10 makes package resolution fail.
 
-   Exact Version: `4.1.9`
-</Tab>
-</Tabs>
+For voice and video calling, also add `https://github.com/cometchat/calls-sdk-ios` with **Up to Next Major Version** from `5.0.4`. A chat-only app doesn't need it.
 
 <Warning>
-**Pin the Chat SDK to the exact version the UI Kit requires.** `CometChatUIKitSwift` ships as a prebuilt binary compiled against one specific `CometChatSDK` version — for UI Kit `5.1.22` that is `CometChatSDK 4.1.9` (see the version table at the top of this page).
-
-- **CocoaPods** installs the matching `CometChatSDK` automatically when you run `pod install`. Don't add your own `CometChatSDK` pod pinned to a different version.
-- **Swift Package Manager** does not resolve it for you — add `chat-sdk-ios` with **Up to Exact Version** set to the version the UI Kit depends on. Forcing a newer or older Chat SDK (an SPM override) is unsupported and typically fails to build or crashes at runtime.
-
-To adopt a newer Chat SDK release, upgrade to a UI Kit version that depends on it rather than overriding the SDK version directly. The full list of Chat SDK releases is on [GitHub](https://github.com/cometchat/chat-sdk-ios/releases).
+**CocoaPods:** the latest UI Kit on CocoaPods is 5.1.18, and new releases ship through Swift Package Manager only. Move CocoaPods projects to Swift Package Manager to get current releases and fixes.
 </Warning>
 
 ---
@@ -181,12 +138,12 @@
  <img src="/images/e736dfc8-app_permissions-6c9e93e30fb31f4e1427f6b72f94a58b.png" />
 </Frame>

 Also disable **User Script Sandboxing** in Build Settings to ensure WebView can load scripts for collaborative tools:

 1. Select your project in the Navigator
 2. Select your app target
 3. Go to **Build Settings** tab
 4. Search for "User Script Sandboxing"
 5. Set it to **No**

 <Frame>
@@ -260,7 +217,7 @@
 }
 ```

 For development, use one of the pre-created test UIDs:

 `cometchat-uid-1` · `cometchat-uid-2` · `cometchat-uid-3` · `cometchat-uid-4` · `cometchat-uid-5`

@@ -293,7 +250,7 @@

 ### Conversation List + Message View

 Two-panel layout — conversation list with push navigation to messages. Think iMessage or WhatsApp.

 - Push-based navigation between conversations and messages
 - Supports one-to-one and group chats