raj-dubey1 · Oct 16, 2026 · Oct 16, 2026 · Oct 19, 2026
diff --git a/docs.json b/docs.json
@@ -457,6 +457,7 @@
                                 "group": "Chat",
                                 "pages": [
                                   "ui-kit/react/core-features",
+                                  "ui-kit/react/offline-support",
                                   "ui-kit/react/extensions",
                                   "ui-kit/react/ai-features"
                                 ]
@@ -2583,6 +2584,7 @@
                                 "group": "Chat",
                                 "pages": [
                                   "ui-kit/angular/core-features",
+                                  "ui-kit/angular/offline-support",
                                   "ui-kit/angular/extensions",
                                   "ui-kit/angular/ai-features"
                                 ]
@@ -3160,7 +3162,8 @@
                               "sdk/javascript/transient-messages",
                               "sdk/javascript/delivery-read-receipts",
                               "sdk/javascript/mentions",
-                              "sdk/javascript/reactions"
+                              "sdk/javascript/reactions",
+                              "sdk/javascript/offline-support"
                             ]
                           },
                           "sdk/javascript/calling-overview",
@@ -10291,6 +10294,10 @@
       "source": "/ui-kit/react/v7/core-features",
       "destination": "/ui-kit/react/core-features"
     },
+    {
+      "source": "/ui-kit/react/v7/offline-support",
+      "destination": "/ui-kit/react/offline-support"
+    },
     {
       "source": "/ui-kit/react/v7/event-system",
       "destination": "/ui-kit/react/event-system"

@@ -59,6 +59,7 @@ parameters, long-tail methods, group/user management, calling, or edge-case list
 - [Delivery & Read Receipts](/sdk/javascript/delivery-read-receipts)
 - [Mentions](/sdk/javascript/mentions)
 - [Reactions](/sdk/javascript/reactions)
+- [Offline Support](/sdk/javascript/offline-support)
 
 ## Calling
 - [Calling — Overview](/sdk/javascript/calling-overview)

@@ -9,14 +9,14 @@
 | --- | --- |
 | Package | `@cometchat/chat-uikit-angular` |
 | Required setup | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` — must complete before rendering any component |
-| Core features | Instant Messaging, Media Sharing, Read Receipts, Typing Indicator, User Presence, Reactions, Mentions, Rich Text Formatting, Quoted Reply, Pin & Save Messages, Search, Threaded Conversations, Thread Subscription, Moderation, Report Message, Group Chat |
+| Core features | Instant Messaging, Media Sharing, Read Receipts, Typing Indicator, User Presence, Reactions, Mentions, Rich Text Formatting, Quoted Reply, Pin & Save Messages, Search, Threaded Conversations, Thread Subscription, Moderation, Report Message, Group Chat, Offline Support |
 | Key components | `CometChatConversations` → [Conversations](/ui-kit/angular/components/cometchat-conversations), `CometChatMessageList` → [Message List](/ui-kit/angular/components/cometchat-message-list), `CometChatMessageComposer` → [Message Composer](/ui-kit/angular/components/cometchat-message-composer), `CometChatMessageHeader` → [Message Header](/ui-kit/angular/components/cometchat-message-header), `CometChatUsers` → [Users](/ui-kit/angular/components/cometchat-users), `CometChatGroups` → [Groups](/ui-kit/angular/components/cometchat-groups), `CometChatGroupMembers` → [Group Members](/ui-kit/angular/components/cometchat-group-members) |
 | CSS class prefix | `.cometchat-` |
 | Theming | Override CSS variables on `.cometchat` class. See [Theming](/ui-kit/angular/customization/theming) |

 </Accordion>

 The Angular UIKit components work together to deliver a complete chat experience. The sections below map each core feature to the components that implement it, so you can quickly find the right building block for any capability.

 ## Instant Messaging

@@ -101,7 +101,7 @@
 | [cometchat-message-list](/ui-kit/angular/components/cometchat-message-list) | Renders reaction indicators on message bubbles and provides the reaction picker action. |
 | [cometchat-reactions](/ui-kit/angular/components/cometchat-reactions) | Displays the reaction bar beneath a message bubble showing all reactions and their counts. |
 | [cometchat-reaction-list](/ui-kit/angular/components/cometchat-reaction-list) | Shows the full list of users who reacted to a message, grouped by reaction type. |
 | [cometchat-reaction-info](/ui-kit/angular/components/cometchat-reaction-info) | Displays a tooltip or popover with details about a specific reaction on hover. |

 ## Mentions

@@ -133,7 +133,7 @@

 ### Thread Subscription

 Thread Subscription lets a user follow one specific thread so they are notified about its replies, and unfollow when they no longer want them. It is per-user and per-thread, and is available from v5.2.0 and **off by default** — enable it with `enableThreadSubscription` in `COMETCHAT_GLOBAL_CONFIG` (see [Enabling the Feature](/ui-kit/angular/guides/thread-subscription#enabling-the-feature)).

 | Component | Functionality |
 | --- | --- |
@@ -148,7 +148,7 @@

 | Component | Functionality |
 | --- | --- |
 | [cometchat-message-list](/ui-kit/angular/components/cometchat-message-list) | Offers Pin, Unpin, Save, and Unsave under an "Organise" flyout in the message action menu. |
 | [cometchat-message-bubble](/ui-kit/angular/components/cometchat-message-bubble) | Marks pinned and saved messages in the bubble's status-info footer. |
 | [cometchat-pinned-messages](/ui-kit/angular/components/cometchat-pinned-messages) | Lists a conversation's pinned messages, with attribution and inline unpin. |
 | [cometchat-saved-messages](/ui-kit/angular/components/cometchat-saved-messages) | Lists the logged-in user's saved messages across every conversation. |
@@ -163,7 +163,7 @@
 | `features.ux.messages.saved.enabled` | Whether the save surfaces render at all |
 | `features.ux.messages.saved.limit` | Saved messages per user |

 The UI Kit reads these settings through the Chat SDK, so no wiring is needed to show, hide, or enforce them. When a user reaches a cap, the kit shows a toast that names the exact limit — no extra handling required. For a full walkthrough, see the [Pin and Save guide](/ui-kit/angular/guides/pin-and-save-messages).

 ## Pin Conversations

@@ -276,13 +276,23 @@
 See the [Search Messages Guide](/ui-kit/angular/guides/search-messages) for detailed implementation instructions.
 </Note>
 
+## Offline Support
+
+With offline support turned on, conversations and messages load from a cache on the device first and refresh from the server when it is reachable. Messages sent without a connection appear right away and are sent automatically when the device reconnects. Turn it on with `setOfflineConfig({ enabled: true })` on the `UIKitSettingsBuilder`. See [Offline Support](/ui-kit/angular/offline-support) for setup and limitations.
+
+| Component | Functionality |
+| --- | --- |
+| [cometchat-conversations](/ui-kit/angular/components/cometchat-conversations) | Renders the cached conversation list immediately, then updates it with the server's list. |
+| [cometchat-message-list](/ui-kit/angular/components/cometchat-message-list) | Opens a conversation with its cached messages and media, then updates it with the server's page. |
+| [cometchat-message-composer](/ui-kit/angular/components/cometchat-message-composer) | Queues messages sent while offline; they are delivered automatically when the connection returns. |
+
 ---
 
 ## Next Steps

 <CardGroup cols={2}>
  <Card title="Components Overview" icon="grid-2" href="/ui-kit/angular/components/components-overview">
    Browse all available Angular UIKit components
  </Card>
  <Card title="Theme" icon="palette" href="/ui-kit/angular/customization/theming">
    Customize the look and feel of your chat UI

@@ -36,7 +36,7 @@
 ## Hot path — usually no fetch needed
 For a plain "add chat" the install, `init → login → render` ordering, standalone/NgModule imports,
 and the core drop-in inputs are stable; a well-built agent skill bakes them. Fetch below only for
 exhaustive inputs, long-tail components, theming tokens, or feature enablement.
 - Setup: [Integration](/ui-kit/angular/integration) · [Quickstart](/ui-kit/angular/quickstart)
 - Environment config lives in `src/environments/environment.ts` (not `.env`).
 - Core drop-ins: [Conversations](/ui-kit/angular/components/cometchat-conversations) · [Message Header](/ui-kit/angular/components/cometchat-message-header) · [Message List](/ui-kit/angular/components/cometchat-message-list) · [Message Composer](/ui-kit/angular/components/cometchat-message-composer)
@@ -48,6 +48,7 @@
 
 ## Core & configuration
 - [Core Features](/ui-kit/angular/core-features)
+- [Offline Support](/ui-kit/angular/offline-support)
 - [Methods](/ui-kit/angular/methods)
 - [Events](/ui-kit/angular/events)
 - [Sound Manager](/ui-kit/angular/sound-manager)

@@ -0,0 +1,121 @@
+---
+title: "Offline Support"
+description: "Let the CometChat Angular UI Kit show cached conversations and messages without a network and send queued messages when the connection returns."
+---
+
+<Accordion title="AI Integration Quick Reference">
+
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-angular` |
+| Enable | `new UIKitSettingsBuilder().setOfflineConfig({ enabled: true, ... })` before `CometChatUIKit.init(UIKitSettings)` |
+| Disable | `setOfflineConfig({ enabled: false })` — set it explicitly to keep the UI Kit online-only |
+| Config | The object is passed to the JavaScript SDK's `AppSettingsBuilder.setOfflineConfig()` — options are listed in [JavaScript SDK Offline Support](/sdk/javascript/offline-support#configuration-options) |
+| Runtime check | `CometChat.isOfflineEnabled()` from `@cometchat/chat-sdk-javascript` |
+| Components that use the cache | `cometchat-conversations` → [Conversations](/ui-kit/angular/components/cometchat-conversations), `cometchat-message-list` → [Message List](/ui-kit/angular/components/cometchat-message-list), `cometchat-message-composer` → [Message Composer](/ui-kit/angular/components/cometchat-message-composer) |
+| Component inputs | None — offline support is configured in UI Kit settings only |
+| Not included | No offline banner and no "retry" action for a failed message. Use the SDK's [`CometChat.retryMessage()`](/sdk/javascript/offline-support#failed-messages-and-retry) to build one |
+
+</Accordion>
+
+With offline support turned on, the UI Kit keeps showing the user's chats when the network drops. Conversations and messages load from a cache on the device first and are refreshed from the server when it is reachable, and messages sent while offline are delivered automatically once the connection returns.
+
+The UI Kit builds on the [offline support in the JavaScript SDK](/sdk/javascript/offline-support). You configure it in UI Kit settings; the components handle the rest.
+
+{/* TODO(release): replace vX.Y.Z with the first Angular UI Kit and JavaScript SDK releases that ship offline support. */}
+<Note>Requires Angular UI Kit vX.Y.Z or later and JavaScript SDK vX.Y.Z or later.</Note>
+
+## Configure Offline Support
+
+Call `setOfflineConfig()` on the `UIKitSettingsBuilder` before `CometChatUIKit.init()`. Always include `enabled: true`.
+
+```typescript
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-angular";
+
+const UIKitSettings = new UIKitSettingsBuilder()
+  .setAppId("APP_ID")
+  .setRegion("REGION")
+  .setAuthKey("AUTH_KEY")
+  .subscribePresenceForAllUsers()
+  .setOfflineConfig({
+    enabled: true,
+    mediaCaching: CometChat.MediaCachingMode.AUTO,
+  })
+  .build();
+
+CometChatUIKit.init(UIKitSettings)?.then(() => {
+  // login your user
+});
+```
+
+The UI Kit passes this object to the SDK, so it accepts every option in the [SDK configuration table](/sdk/javascript/offline-support#configuration-options) — the outbox size, media caching, encryption and so on.
+
+Offline support is configured only through `CometChatUIKit.init()` with `UIKitSettings`. Initializing with `CometChatUIKit.initFromSettings()` doesn't turn it on.
+
+<Note>
+  The UI Kit applies the offline configuration only when the installed
+  `@cometchat/chat-sdk-javascript` exposes `AppSettingsBuilder.setOfflineConfig()`.
+  With an older SDK the setting is silently ignored and the UI Kit works
+  online only.
+</Note>
+
+<Warning>
+  To keep the UI Kit online-only, so that no conversations, messages or media
+  are stored in the browser, turn offline support off explicitly instead of
+  leaving out `setOfflineConfig()`:
+
+  ```typescript
+  new UIKitSettingsBuilder()
+    // ...
+    .setOfflineConfig({ enabled: false })
+    .build();
+  ```
+</Warning>
+
+<Note>
+  Whether offline support is actually running can change after init — for
+  example, CometChat can switch it off for your app from the server. The UI
+  Kit checks `CometChat.isOfflineEnabled()` each time it needs to; do the same
+  in your own code instead of reading back the value you configured.
+</Note>
+
+## What Changes in the Components
+
+| Feature | Components | Behaviour |
+| --- | --- | --- |
+| Cached conversations | [Conversations](/ui-kit/angular/components/cometchat-conversations) | The list renders from the cache immediately, then updates with the server's list. Offline, the cached list stays on screen. |
+| Cached messages | [Message List](/ui-kit/angular/components/cometchat-message-list) | A conversation opens with its cached messages, then updates with the server's page. |
+| Sending while offline | [Message Composer](/ui-kit/angular/components/cometchat-message-composer), [Message List](/ui-kit/angular/components/cometchat-message-list) | A message sent offline appears in the list straight away with the sending (clock) indicator, and is queued. It is sent automatically when the connection returns, and its receipt then updates as usual. |
+| Cached media | [Message List](/ui-kit/angular/components/cometchat-message-list) | Images, videos, audio and files that were downloaded while online are shown from the device when offline (with `mediaCaching` set to `AUTO`, the SDK default). |
+| Attachment uploads | [Message Composer](/ui-kit/angular/components/cometchat-message-composer) | A file that failed to upload can be retried, and staged attachments are restored when the user reopens the conversation. |
+
+## Logging Out
+
+The SDK deletes the cached data, cached media and any queued messages when the user logs out, and when a different user logs in. You don't need to clear anything yourself.
+
+## Limitations
+
+- The cache only holds what the user has loaded while online, plus the changes picked up when the device reconnects. A user who has never logged in online has nothing to show offline.
+- Only sending messages works offline. Actions such as editing, deleting, reacting and pinning need a connection.
+- Search reads from the server only, so it doesn't work while offline.
+- There is no built-in offline banner and no "retry" action for a failed message. A message that fails is never retried automatically. To build your own, use the SDK's [connection status](/sdk/javascript/connection-status) listener, and [`CometChat.getPendingMessages()` and `CometChat.retryMessage()`](/sdk/javascript/offline-support#failed-messages-and-retry).
+
+---
+
+## Next Steps
+
+<CardGroup cols={2}>
+  <Card title="JavaScript SDK Offline Support" icon="database" href="/sdk/javascript/offline-support">
+    Configuration options, queued sends and sync events
+  </Card>
+  <Card title="Core Features" icon="comments" href="/ui-kit/angular/core-features">
+    See how the components power each chat feature
+  </Card>
+  <Card title="Message List" icon="list" href="/ui-kit/angular/components/cometchat-message-list">
+    Customize how messages are rendered
+  </Card>
+  <Card title="Methods" icon="code" href="/ui-kit/angular/methods">
+    Initialize, log in and send messages with the UI Kit
+  </Card>
+</CardGroup>
@@ -9,7 +9,7 @@ description: "Overview of CometChat React UI Kit core features, including messag
 | --- | --- |
 | Package | `@cometchat/chat-uikit-react` |
 | Required setup | Wrap app in `CometChatProvider` with valid credentials — must complete before rendering any component |
-| Core features | Instant Messaging, Media Sharing, Read Receipts, Mark as Unread, Typing Indicator, User Presence, Reactions, Mentions, Quoted Reply, Pin & Save Messages, Search, Threaded Conversations, Moderation, Report Message, Group Chat |
+| Core features | Instant Messaging, Media Sharing, Read Receipts, Mark as Unread, Typing Indicator, User Presence, Reactions, Mentions, Quoted Reply, Pin & Save Messages, Search, Threaded Conversations, Moderation, Report Message, Group Chat, Offline Support |
 | Key components | `CometChatConversations` → [Conversations](/ui-kit/react/components/conversations), `CometChatMessageList` → [Message List](/ui-kit/react/components/message-list), `CometChatMessageComposer` → [Message Composer](/ui-kit/react/components/message-composer), `CometChatMessageHeader` → [Message Header](/ui-kit/react/components/message-header), `CometChatUsers` → [Users](/ui-kit/react/components/users), `CometChatGroups` → [Groups](/ui-kit/react/components/groups), `CometChatGroupMembers` → [Group Members](/ui-kit/react/components/group-members) |
 | CSS class prefix | `.cometchat-` |
 | Theming | Override CSS variables on `.cometchat` class. See [Theming](/ui-kit/react/theming) |
@@ -304,6 +304,16 @@ Search requires wiring the result callbacks to navigation: handle `onConversatio
 
 See the [Groups](/ui-kit/react/components/groups) component page for details.
 
+## Offline Support
+
+With offline support turned on, conversations and messages load from a cache on the device first and refresh from the server when it is reachable. Messages sent without a connection appear right away and are sent automatically when the device reconnects. Offline support is off by default — turn it on with `setOfflineConfig()` on the `UIKitSettingsBuilder`. See [Offline Support](/ui-kit/react/offline-support) for setup and limitations.
+
+| Components                                              | Functionality                                                                                                     |
+| ------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
+| [Conversations](/ui-kit/react/components/conversations) | Renders the cached conversation list immediately, then updates it with the server's list.                         |
+| [Message List](/ui-kit/react/components/message-list)   | Opens a conversation with its cached messages and media, then updates it with the server's page.                  |
+| [Message Composer](/ui-kit/react/components/message-composer) | Queues messages sent while offline; they are delivered automatically when the connection returns.         |
+
 ---
 
 ## Next Steps

@@ -32,7 +32,7 @@
 ## Hot path — usually no fetch needed
 For a plain "add chat" the install, `init → login → render`, provider, and the core drop-in props
 are stable; a well-built agent skill bakes them. Fetch below only for exhaustive props, long-tail
 components, theming tokens, or feature enablement.
 - Setup: [React.js Integration](/ui-kit/react/integration-react)
 - Provider/lifecycle: [CometChatProvider](/ui-kit/react/cometchat-provider)
 - Core drop-ins: [Conversations](/ui-kit/react/components/conversations) · [Message Header](/ui-kit/react/components/message-header) · [Message List](/ui-kit/react/components/message-list) · [Message Composer](/ui-kit/react/components/message-composer)
@@ -48,6 +48,7 @@
 ## Core & configuration
 - [CometChatProvider](/ui-kit/react/cometchat-provider)
 - [Core Features](/ui-kit/react/core-features)
+- [Offline Support](/ui-kit/react/offline-support)
 - [Methods](/ui-kit/react/methods)
 - [Event System](/ui-kit/react/event-system)
 - [Sound Manager](/ui-kit/react/sound-manager)
@@ -118,7 +119,7 @@
 - React: [Conversation + Messages](/ui-kit/react/react-conversation) · [One-to-One / Group](/ui-kit/react/react-one-to-one-chat) · [Tab-Based](/ui-kit/react/react-tab-based-chat)
 - Next.js: [Conversation + Messages](/ui-kit/react/next-conversation) · [One-to-One / Group](/ui-kit/react/next-one-to-one-chat) · [Tab-Based](/ui-kit/react/next-tab-based-chat)
 - React Router: [Conversation + Messages](/ui-kit/react/react-router-conversation) · [One-to-One / Group](/ui-kit/react/react-router-one-to-one-chat) · [Tab-Based](/ui-kit/react/react-router-tab-based-chat)
 - Astro: [Conversation + Messages](/ui-kit/react/astro-conversation) · [One-to-One / Group](/ui-kit/react/astro-one-to-one-chat) · [Tab-Based](/ui-kit/react/astro-tab-based-chat)

 ## Migration & misc
 - [Upgrading from v6 to v7](/ui-kit/react/migration-overview)