2. Added Quick Reference `
3. Added `
4. Added Response accordion after `CometChat.init()` — success returns a `String` message: `"Initialization completed successfully"`
5. Added Error accordion after `CometChat.init()` — error fields: `code` (`"ERR_CHAT_API_FAILURE"`), `message` (`"SDK initialization failed."`), `details` (`"Please verify your App ID and region, then try again."`)
6. Added Response accordion after `CometChat.createUser()` — returns a `User` object with 12 fields: `uid`, `name`, `link`, `avatar`, `metadata`, `status` (`"offline"`), `role` (`"default"`), `statusMessage`, `tags`, `hasBlockedMe`, `blockedByMe`, `lastActiveAt`
7. Added Error accordion after `CometChat.createUser()` — error fields: `code` (`"ERR_UID_NOT_FOUND"`), `message`, `details`
8. Added Response accordion after `CometChat.login()` — returns a `User` object with same 12 fields, sample `status` is `"online"`, sample `lastActiveAt` is `1745554700`
9. Added Error accordion after `CometChat.login()` — same error structure
10. Added Next Steps CardGroup with 4 cards: "Setup SDK" (icon: gear, href: `/sdk/flutter/setup`), "Key Concepts" (icon: lightbulb, href: `/sdk/flutter/key-concepts`), "Authentication" (icon: key, href: `/sdk/flutter/authentication-overview`), "Send Messages" (icon: paper-plane, href: `/sdk/flutter/send-message`) | This is the main entry point for the Flutter SDK docs. The Quick Reference block gives developers the complete install → init → login flow in one glance. The `
2. Added Quick Reference `
3. Added `
4. Added Response accordion after `CometChat.init()` — `String` success message
5. Added Error accordion after `CometChat.init()` — `code`/`message`/`details`
6. Added Next Steps CardGroup with 2 cards: "Authentication" (icon: key), "Send Messages" (icon: paper-plane) | The setup page is the detailed installation guide (pubspec.yaml, podfile, minSdkVersion, etc.). The Quick Reference duplicates the overview's code block intentionally — developers may land on either page first. Response/Error accordions document what `init()` returns on success/failure so developers know what to expect in their callbacks. | -| `authentication-overview.mdx` | 1. Added `description: "Learn how to authenticate users in your Flutter app using CometChat SDK with Auth Key for development or Auth Token for production."`
2. Added Quick Reference `
3. Added `
4. Added Response accordion after `login()` with Auth Key — `User` object with 12 fields (uid, name, avatar, status=`"online"`, role=`"default"`, lastActiveAt, etc.)
5. Added Error accordion after `login()` with Auth Key — `code` (`"ERR_UID_NOT_FOUND"`), `message`, `details`
6. Added Response accordion after `loginWithAuthToken()` — same `User` object structure
7. Added Error accordion after `loginWithAuthToken()` — same error structure
8. Added Response accordion after `logout()` — `String` success message: `"User logged out successfully"`
9. Added Error accordion after `logout()` — `code`/`message`/`details`
10. Added Next Steps CardGroup with 4 cards: "Send Messages", "Receive Messages", "Key Concepts", "Users" | The auth page now clearly distinguishes between Auth Key (dev) and Auth Token (prod) flows. The `
2. Added Quick Reference `
3. Added Next Steps CardGroup with 4 cards: "Setup", "Authentication", "Send Messages", "Groups" | The Quick Reference block condenses the entire key-concepts page into a scannable summary. This is especially useful for AI agents that need to understand CometChat's data model quickly. No response/error accordions here since this is a conceptual page with no SDK method calls. | -| `send-message.mdx` | 1. Added `description: "Learn how to send text, media, and custom messages to users and groups using the CometChat Flutter SDK."`
2. Added Quick Reference `
3. Added `
4. Added `
5. Added Response accordion after `sendMessage()` for text — `BaseMessage` object with 28 fields: `id` (401), `metadata`, `receiver` (nested User object), `editedBy`, `conversationId` (`"cometchat-uid-1_user_cometchat-uid-2"`), `sentAt` (epoch), `receiverUid`, `type` (`"text"`), `readAt`, `deletedBy`, `deliveredAt`, `deletedAt`, `replyCount`, `sender` (nested User object with uid/name/avatar/status/role/tags/etc.), `receiverType` (`"user"`), `editedAt`, `parentMessageId`, `readByMeAt`, `category` (`"message"`), `deliveredToMeAt`, `updatedAt`, `text` (`"messageText"`), `tags`, `unreadRepliesCount`, `mentionedUsers`, `hasMentionedMe`, `reactions`, `moderationStatus`, `quotedMessageId` — plus full nested Sender User object (12 fields) and Receiver User object (12 fields)
6. Added Error accordion after `sendMessage()` for text
7. Added Response accordion after `sendMediaMessage()` — similar `BaseMessage` structure with additional `attachment` field containing `url`, `extension`, `size`, `mimeType`
8. Added Error accordion after `sendMediaMessage()`
9. Added Response accordion after `sendCustomMessage()` — `BaseMessage` with `customData` map field
10. Added Error accordion after `sendCustomMessage()`
11. Added Next Steps CardGroup with 4 cards: "Receive Messages", "Edit Message", "Delete Message", "Threaded Messages" | This is one of the most heavily documented files (+559 lines). The `BaseMessage` response table is the most comprehensive object documentation in the entire SDK docs — 28 top-level fields plus two nested User objects (Sender and Receiver) each with 12 fields. This gives developers complete visibility into what the `onSuccess` callback returns. The nested object tables use anchor links (`#send-text-sender-object`, `#send-text-receiver-object`) for easy navigation. Media message response adds attachment metadata. Custom message response shows the `customData` map structure. | -| `receive-messages.mdx` | 1. Added `description: "Learn how to receive real-time messages and fetch message history using the CometChat Flutter SDK."`
2. Added Quick Reference `
3. Added `
4. Added Response accordion after `fetchPrevious()` — `List
5. Added Error accordion after `fetchPrevious()`
6. Added Response accordion after `fetchNext()` — same `List
7. Added Error accordion after `fetchNext()`
8. Added Response accordions for each real-time listener callback: `onTextMessageReceived` (TextMessage object), `onMediaMessageReceived` (MediaMessage with attachment), `onCustomMessageReceived` (CustomMessage with customData), `onTypingStarted`, `onTypingEnded`, `onMessagesDelivered`, `onMessagesRead`, `onMessageEdited`, `onMessageDeleted`
9. Added Error accordions for listener callbacks
10. Added Next Steps CardGroup with 4 cards: "Send Messages", "Threaded Messages", "Message Filtering", "Delivery Receipts" | The largest change after `default-call.mdx` (+767 lines). Every real-time listener callback now has its own Response accordion documenting the exact object shape that arrives in the callback. This is critical for developers building custom UIs — they need to know exactly which fields are available on `TextMessage` vs `MediaMessage` vs `CustomMessage`. The memory leak warning about removing listeners is a common Flutter pitfall. | -| `edit-message.mdx` | 1. Added `description: "Learn how to edit sent messages in your Flutter app using the CometChat SDK."`
2. Added Quick Reference `
3. Added Response accordion after `editMessage()` for text — `BaseMessage` object with `editedAt` populated (non-zero epoch), `editedBy` populated with editor's UID
4. Added Error accordion after `editMessage()` for text
5. Added Response accordion after `editMessage()` for media — same structure with attachment metadata
6. Added Error accordion after `editMessage()` for media
7. Added Next Steps CardGroup with 3 cards: "Delete Message", "Send Messages", "Threaded Messages" | The response accordions specifically highlight the `editedAt` and `editedBy` fields that change when a message is edited — this helps developers understand which fields to check in their UI to show "edited" indicators. | -| `delete-message.mdx` | 1. Added `description: "Learn how to delete messages and handle real-time deletion events in your Flutter app using CometChat SDK."`
2. Added Quick Reference `
3. Added `
4. Added Response accordion after `deleteMessage()` — `BaseMessage` object with `deletedAt` populated (non-zero epoch), `deletedBy` populated with deleter's UID
5. Added Error accordion after `deleteMessage()`
6. Added Next Steps CardGroup with 3 cards: "Edit Message", "Send Messages", "Receive Messages" | The permanence warning is important — unlike some chat platforms, CometChat's delete is not soft-delete by default. Response accordion highlights `deletedAt` and `deletedBy` fields. | -| `delivery-read-receipts.mdx` | 1. Added `description: "Learn how to implement message delivery and read receipts in your Flutter app using CometChat SDK."`
2. Added Quick Reference `
3. Added Response accordion after `markAsDelivered()` — void success (no return value)
4. Added Error accordion after `markAsDelivered()`
5. Added Response accordion after `markAsRead()` — void success
6. Added Error accordion after `markAsRead()`
7. Added Response accordion after `markAsUnread()` — void success
8. Added Error accordion after `markAsUnread()`
9. Added Next Steps CardGroup with 3 cards: "Receive Messages", "Send Messages", "Typing Indicators" | Receipt methods return void on success (no object), so the Response accordions simply confirm "void — no return value". The Error accordions still document the `CometChatException` structure. | -| `typing-indicators.mdx` | 1. Added `description: "Learn how to send and receive typing indicators in your Flutter app using CometChat SDK."`
2. Added Quick Reference `
3. Added Next Steps CardGroup with 3 cards: "Send Messages", "Receive Messages", "Delivery Receipts" | No response/error accordions — typing indicator methods are fire-and-forget with no success/error callbacks. Quick reference shows both sending and receiving sides. | -| `threaded-messages.mdx` | 1. Added `description: "Learn how to send, receive, and fetch messages within a thread attached to a parent message in CometChat Flutter SDK."`
2. Added Quick Reference `
3. Added Response accordion after `sendMessage()` in thread — `BaseMessage` with `parentMessageId` populated (103)
4. Added Error accordion after `sendMessage()` in thread
5. Added Response accordion after `fetchPrevious()` for thread — `List
6. Added Error accordion after `fetchPrevious()`
7. Added Response accordion after `fetchNext()` for thread — same structure
8. Added Error accordion after `fetchNext()`
9. Added Next Steps CardGroup with 3 cards: "Send Messages", "Receive Messages", "Message Filtering" | The Quick Reference block shows the three key thread operations in one place: sending into a thread, fetching a thread's messages, and excluding thread replies from the main conversation. Response accordions highlight the `parentMessageId` field that links messages to their thread. | -| `mentions.mdx` | 1. Added `description: "Learn how to mention users in messages and fetch mentioned messages using the CometChat Flutter SDK."`
2. Added Quick Reference `
3. Added Response accordion after sending message with mentions — `BaseMessage` with `mentionedUsers` array populated, `hasMentionedMe` boolean
4. Added Error accordion
5. Added Response accordion after fetching mentioned messages — `List
6. Added Error accordion
7. Added Next Steps CardGroup with 3 cards: "Send Messages", "Receive Messages", "Message Filtering" | Response accordions specifically show how `mentionedUsers` array and `hasMentionedMe` boolean appear in the response — developers need this to render @mention UI elements. | -| `reactions.mdx` | 1. Added `description: "Learn how to add, remove, and fetch reactions on messages using the CometChat Flutter SDK."`
2. Added Quick Reference `
3. Added Response accordion after `addReaction()` — `BaseMessage` with `reactions` array populated
4. Added Error accordion after `addReaction()`
5. Added Response accordion after `removeReaction()` — `BaseMessage` with updated `reactions` array
6. Added Error accordion after `removeReaction()`
7. Added Response accordion after `fetchMessageReactions()` — `List
8. Added Error accordion after `fetchMessageReactions()`
9. Added Next Steps CardGroup with 3 cards: "Send Messages", "Receive Messages", "Interactive Messages" | The `fetchMessageReactions()` response introduces a new object type (`ReactionCount`) not seen in other pages — it has `reaction`, `count`, and `reactedByMe` fields. | -| `interactive-messages.mdx` | 1. Added `description: "Learn how to send interactive messages (Form, Card, Scheduler) using the CometChat Flutter SDK."`
2. Added Quick Reference `
3. Added Response accordion after sending `FormMessage` — `BaseMessage` with `interactiveData` map containing form fields
4. Added Error accordion
5. Added Response accordion after sending `CardMessage` — `BaseMessage` with `interactiveData` containing card layout
6. Added Error accordion
7. Added Next Steps CardGroup with 3 cards: "Send Messages", "Reactions", "Message Filtering" | Interactive messages have a unique `interactiveData` field in the response that contains the form/card/scheduler structure. | -| `transient-messages.mdx` | 1. Added `description: "Learn how to send and receive transient (ephemeral) messages that are not stored in CometChat's database."`
2. Added Quick Reference `
3. Added Next Steps CardGroup with 3 cards: "Send Messages", "Typing Indicators", "Real-Time Listeners" | No response/error accordions — transient messages are fire-and-forget. The Quick Reference clarifies that these messages are not persisted. | -| `flag-message.mdx` | 1. Added `description: "Learn how to flag or report messages for moderation in your Flutter app using CometChat SDK."`
2. Added Quick Reference `
3. Added Response accordion after `flagMessage()` — success confirmation
4. Added Error accordion after `flagMessage()`
5. Added Next Steps CardGroup with 3 cards: "Delete Message", "AI Moderation", "Extensions" | Flag message is a simple method with a straightforward response. | -| `additional-message-filtering.mdx` | 1. Added `description: "Learn how to use MessagesRequestBuilder to filter and fetch messages with various parameters including pagination, categories, types, tags, and advanced search options in Flutter."`
2. Added Quick Reference `
3. Added Next Steps CardGroup with 4 cards: "Receive Messages", "Send Messages", "Threaded Messages", "Message Structure" | No response/error accordions — this page documents the request builder configuration, not the fetch methods themselves (those are on `receive-messages.mdx`). The Quick Reference is a comprehensive filter cheat sheet. | -| `message-structure-and-hierarchy.mdx` | 1. Added `description: "Understand the message class hierarchy in CometChat Flutter SDK — BaseMessage, TextMessage, MediaMessage, CustomMessage, and InteractiveMessage."`
2. Added Quick Reference `
3. Added Next Steps CardGroup with 4 cards: "Send Messages", "Receive Messages", "Interactive Messages", "Message Filtering" | Conceptual page — no SDK method calls, so no response/error accordions. The Quick Reference gives a class hierarchy overview. | -| `messaging-overview.mdx` | 1. Added `description: "Overview of CometChat's messaging capabilities for Flutter including text, media, custom, and interactive messages."`
2. Added Quick Reference `
3. Added Next Steps CardGroup with 4 cards: "Send Messages", "Receive Messages", "Threaded Messages", "Reactions" | Index page — the Quick Reference serves as a complete table of contents for the messaging section. | -| `retrieve-conversations.mdx` | 1. Added `description: "Learn how to fetch and paginate through conversations using the CometChat Flutter SDK."`
2. Added Quick Reference `
3. Added Response accordion after `fetchNext()` — `List
4. Added Error accordion after `fetchNext()`
5. Added Response accordion after `fetchPrevious()` — same structure
6. Added Error accordion after `fetchPrevious()`
7. Added Next Steps CardGroup with 4 cards: "Delete Conversation", "Send Messages", "Retrieve Users", "Retrieve Groups" | The `Conversation` object is a complex nested type — it contains a `lastMessage` (full BaseMessage) and a `conversationWith` (User or Group depending on type). The response tables document all these nested structures. | -| `delete-conversation.mdx` | 1. Added `description: "Learn how to delete user and group conversations from the logged-in user's conversation list using the CometChat Flutter SDK."`
2. Added Quick Reference `
3. Added `
4. Added Response accordion after `deleteConversation()` — `String` success message
5. Added Error accordion after `deleteConversation()`
6. Added Next Steps CardGroup with 2 cards: "Retrieve Conversations", "Send Messages" | The warning clarifies that conversation deletion is one-sided (only affects the current user) and irreversible. | -| `retrieve-users.mdx` | 1. Added `description: "Learn how to fetch and paginate through users using the CometChat Flutter SDK."`
2. Added Quick Reference `
3. Added Response accordion after `fetchNext()` — `List
4. Added Error accordion after `fetchNext()`
5. Added Next Steps CardGroup with 3 cards: "Block Users", "User Presence", "User Management" | The User object table is reused across many pages (login, send-message, etc.) but this is the canonical reference for the full User object shape. | -| `user-management.mdx` | 1. Added `description: "Learn how to create and update users using the CometChat Flutter SDK."`
2. Added Quick Reference `
3. Added Response accordion after `createUser()` — `User` object (12 fields)
4. Added Error accordion after `createUser()`
5. Added Response accordion after `updateUser()` — `User` object (12 fields)
6. Added Error accordion after `updateUser()`
7. Added Next Steps CardGroup with 3 cards: "Retrieve Users", "Block Users", "User Presence" | Both user management methods return the full User object on success. | -| `user-presence.mdx` | 1. Added `description: "Learn how to track user online/offline status in real-time using CometChat Flutter SDK."`
2. Added Quick Reference `
3. Added Next Steps CardGroup with 3 cards: "Retrieve Users", "User Management", "Real-Time Listeners" | No response/error accordions — presence is received via listeners, not method calls. | -| `users-overview.mdx` | 1. Added `description: "Overview of CometChat's user management capabilities for Flutter."`
2. Added Quick Reference `
3. Added Next Steps CardGroup with 4 cards | Index page for the Users section. | -| `block-users.mdx` | 1. Added `description: "Learn how to block and unblock users in your Flutter app using the CometChat SDK to manage user interactions and privacy."`
2. Added Quick Reference `
3. Added Response accordion after `blockUsers()` — `Map
4. Added Error accordion after `blockUsers()`
5. Added Response accordion after `unblockUsers()` — same Map structure
6. Added Error accordion after `unblockUsers()`
7. Added Response accordion after `fetchNext()` for blocked users — `List
8. Added Error accordion after `fetchNext()`
9. Added Next Steps CardGroup with 3 cards: "Retrieve Users", "User Management", "User Presence" | The `blockUsers()`/`unblockUsers()` methods return a `Map
2. Added Quick Reference `
3. Added Response accordion after `createGroup()` — `Group` object with 15+ fields: `guid`, `name`, `type` (`"public"`/`"private"`/`"password"`), `icon`, `description`, `owner`, `metadata`, `tags`, `membersCount`, `createdAt`, `updatedAt`, `hasJoined`, `scope`, `joinedAt`, `conversationId`
4. Added Error accordion after `createGroup()`
5. Added Next Steps CardGroup with 3 cards: "Join Group", "Retrieve Groups", "Group Members" | The Group object table is the canonical reference for group data — 15+ fields including `membersCount`, `hasJoined`, `scope`, and `conversationId`. | -| `join-group.mdx` | 1. Added `description: "Learn how to join public and password-protected groups using CometChat Flutter SDK."`
2. Added Quick Reference `
3. Added Response accordion after `joinGroup()` — `Group` object (same 15+ fields)
4. Added Error accordion after `joinGroup()`
5. Added Next Steps CardGroup with 3 cards: "Leave Group", "Retrieve Group Members", "Create Group" | Response shows the Group object with `hasJoined` now `true` and `scope` set to `"participant"`. | -| `leave-group.mdx` | 1. Added `description: "Learn how to leave a group using CometChat Flutter SDK."`
2. Added Quick Reference `
3. Added Response accordion after `leaveGroup()` — `String` success message
4. Added Error accordion after `leaveGroup()`
5. Added Next Steps CardGroup with 3 cards: "Join Group", "Delete Group", "Retrieve Groups" | Simple method — returns success string on leave. | -| `delete-group.mdx` | 1. Added `description: "Learn how to permanently delete a group in CometChat using the Flutter SDK. Only group admins can delete groups."`
2. Added Quick Reference `
3. Added `
4. Added Response accordion after `deleteGroup()` — `String` success message
5. Added Error accordion after `deleteGroup()`
6. Added Next Steps CardGroup with 3 cards: "Create Group", "Retrieve Groups", "Leave Group" | The admin-only + permanent deletion warning is critical context for developers. | -| `update-group.mdx` | 1. Added `description: "Learn how to update group details using CometChat Flutter SDK."`
2. Added Quick Reference `
3. Added Response accordion after `updateGroup()` — `Group` object (15+ fields) with updated values
4. Added Error accordion after `updateGroup()`
5. Added Next Steps CardGroup with 3 cards: "Create Group", "Retrieve Groups", "Group Members" | Response shows the updated Group object. | -| `transfer-group-ownership.mdx` | 1. Added `description: "Learn how to transfer group ownership to another member using CometChat Flutter SDK."`
2. Added Quick Reference `
3. Added Response accordion after `transferOwnership()` — `String` success message
4. Added Error accordion after `transferOwnership()`
5. Added Next Steps CardGroup with 3 cards: "Group Members", "Update Group", "Change Member Scope" | Simple method — returns success string. | -| `retrieve-groups.mdx` | 1. Added `description: "Learn how to fetch and paginate through groups using the CometChat Flutter SDK."`
2. Added Quick Reference `
3. Added Response accordion after `fetchNext()` — `List
4. Added Error accordion after `fetchNext()`
5. Added Next Steps CardGroup with 3 cards: "Create Group", "Join Group", "Group Members" | Group retrieval response documents the full Group object for each item in the list. | -| `retrieve-group-members.mdx` | 1. Added `description: "Learn how to fetch and paginate through group members using the CometChat Flutter SDK."`
2. Added Quick Reference `
3. Added `
4. Simplified intro paragraph — removed redundant sentence about `GroupMembersRequestBuilder`
5. Added Response accordion after `fetchNext()` — `List
6. Added Error accordion after `fetchNext()`
7. Added Next Steps CardGroup with 3 cards: "Add Members", "Kick Member", "Change Scope" | `GroupMember` extends `User` with two additional fields (`scope` and `joinedAt`) — the response table documents all 14 fields. | -| `group-add-members.mdx` | 1. Added `description: "Learn how to add members to a group using CometChat Flutter SDK."`
2. Added Quick Reference `
3. Added Response accordion after `addMembersToGroup()` — `Map
4. Added Error accordion
5. Added Next Steps CardGroup with 3 cards: "Retrieve Group Members", "Kick Member", "Change Scope" | The Map response type is unique — it maps each member UID to a success/failure status string. | -| `group-change-member-scope.mdx` | 1. Added `description: "Learn how to change a group member's scope (role) using CometChat Flutter SDK."`
2. Added Quick Reference `
3. Added Response accordion — `String` success message
4. Added Error accordion
5. Added Next Steps CardGroup with 3 cards: "Retrieve Group Members", "Add Members", "Transfer Ownership" | Quick Reference shows all three scope enum values. | -| `group-kick-member.mdx` | 1. Added `description: "Learn how to kick, ban, and unban group members using CometChat Flutter SDK."`
2. Added Quick Reference `
3. Added Response accordion after `kickGroupMember()` — `String` success message
4. Added Error accordion after `kickGroupMember()`
5. Added Response accordion after `banGroupMember()` — `String` success message
6. Added Error accordion after `banGroupMember()`
7. Added Response accordion after `unbanGroupMember()` — `String` success message
8. Added Error accordion after `unbanGroupMember()`
9. Added Next Steps CardGroup with 3 cards: "Retrieve Group Members", "Add Members", "Change Scope" | All three member moderation methods documented with response/error. | -| `groups-overview.mdx` | 1. Added `description: "Overview of CometChat's group management capabilities for Flutter."`
2. Added Quick Reference `
3. Added Next Steps CardGroup with 4 cards | Index page for the Groups section. | -| `default-call.mdx` | 1. Added `description: "Implement complete calling workflow with ringing functionality including incoming/outgoing call UI, call acceptance, rejection, and cancellation in your Flutter app."`
2. Added Quick Reference `
3. Added `
4. Added Response accordion after `initiateCall()` — `Call` object with 28+ fields: all BaseMessage fields (id, metadata, receiver, sender, conversationId, sentAt, type, category, etc.) PLUS call-specific fields: `sessionId` (`"v1.us.1.xxxxxxxx"`), `callStatus` (`"initiated"`), `action` (`"initiated"`), `callInitiator` (nested User object), `callReceiver` (nested User object), `initiatedAt` (epoch), `joinedAt` (epoch) — plus nested Sender, Receiver, CallInitiator, and CallReceiver User object tables (12 fields each)
5. Added Error accordion after `initiateCall()`
6. Added Response accordion after `acceptCall()` — `Call` object with `callStatus` = `"ongoing"`, `action` = `"accepted"`
7. Added Error accordion after `acceptCall()`
8. Added Response accordion after `rejectCall()` (rejected) — `Call` object with `callStatus` = `"rejected"`, `action` = `"rejected"`
9. Added Error accordion after `rejectCall()` (rejected)
10. Added Response accordion after `rejectCall()` (cancelled by initiator) — `Call` object with `callStatus` = `"cancelled"`, `action` = `"cancelled"`
11. Added Error accordion after `rejectCall()` (cancelled)
12. Added Response accordion after `endCall()` — `Call` object with `callStatus` = `"ended"`, `action` = `"ended"`
13. Added Error accordion after `endCall()`
14. Added Response accordion after `CometChatCalls.startSession()` — `Widget?` representing the call UI to embed in your screen
15. Added Error accordion after `startSession()`
16. Added Next Steps CardGroup with 3 cards: "Direct Call", "Standalone Calling", "Call Logs" | This is the single largest file change (+876 lines). The `Call` object extends `BaseMessage` with 7 additional call-specific fields (`sessionId`, `callStatus`, `action`, `callInitiator`, `callReceiver`, `initiatedAt`, `joinedAt`). Each call lifecycle state (initiated, ongoing, rejected, cancelled, ended) has its own Response accordion showing the exact `callStatus` and `action` values for that state — this is critical for developers building custom call UIs who need to know which status values to check. The `startSession()` response is unique — it returns a Flutter `Widget?` that developers embed in their screen to show the call interface. | -| `direct-call.mdx` | 1. Added `description: "Implement direct calling without ringing functionality — generate a token and start a call session directly."`
2. Added Quick Reference `
3. Added Response accordion after `generateToken()` — `String` call token
4. Added Error accordion after `generateToken()`
5. Added Response accordion after `startSession()` — `Widget?` call UI widget
6. Added Error accordion after `startSession()`
7. Added Next Steps CardGroup with 3 cards: "Default Call", "Standalone Calling", "Recording" | Direct calling skips the ringing flow — the Quick Reference shows the simplified two-step process (generate token → start session). | -| `standalone-calling.mdx` | 1. Added `description: "Implement standalone calling that works independently of CometChat's messaging infrastructure."`
2. Added Quick Reference `
3. Added Response accordion after `generateToken()` — `String` call token
4. Added Error accordion
5. Added Response accordion after `startSession()` — `Widget?` call UI widget
6. Added Error accordion
7. Added Next Steps CardGroup with 3 cards: "Default Call", "Direct Call", "Call Logs" | Standalone calling is for apps that only need calling (no chat). The Quick Reference shows the independent init flow. | -| `calling-setup.mdx` | 1. Added `description: "Learn how to install and initialize the CometChat Calls SDK for Flutter to enable voice and video calling in your application."`
2. Added Quick Reference `
3. Added Response accordion after `CometChatCalls.init()` — `String` success message: `"CometChat Calls SDK initialized successfully"`
4. Added Error accordion after `CometChatCalls.init()`
5. Added Next Steps CardGroup with 3 cards: "Default Call", "Direct Call", "Standalone Calling" | The Calls SDK has its own separate init method (`CometChatCalls.init()`) distinct from the main SDK's `CometChat.init()`. | -| `calling-overview.mdx` | 1. Added `description: "Implement voice and video calling in your Flutter application with CometChat's calling SDK, supporting ringing calls, direct calls, and standalone calling."`
2. Added Quick Reference `
3. Added Next Steps CardGroup with 4 cards: "Calling Setup", "Default Call", "Direct Call", "Standalone Calling" | The Quick Reference is a decision guide — helps developers choose between the three calling modes based on their use case. | -| `call-logs.mdx` | 1. Added `description: "Learn how to fetch and manage call logs in your Flutter application using CometChat's Call SDK, including filtering by call type, status, and direction."`
2. Added Quick Reference `
3. Added Response accordion after `fetchNext()` — `List
4. Added Error accordion after `fetchNext()`
5. Added Response accordion after `fetchPrevious()` — same structure
6. Added Error accordion after `fetchPrevious()`
7. Added Response accordion after `getCallDetails()` — `List
8. Added Error accordion after `getCallDetails()`
9. Added Next Steps CardGroup with 3 cards: "Default Call", "Recording", "Presenter Mode" | The `CallLog` object is distinct from the `Call` object — it's a historical record with `duration`, `endedAt`, and `participants` fields not present on the real-time `Call` object. | -| `recording.mdx` | 1. Added `description: "Learn how to enable and manage call recording in your Flutter app using CometChat's Calls SDK."`
2. Added Quick Reference `
3. Added Response accordion after fetching recordings — recording object with `recordingUrl`, `recordingDuration`, `startedAt`, `endedAt`
4. Added Error accordion
5. Added Next Steps CardGroup with 3 cards: "Call Logs", "Default Call", "Presenter Mode" | Recording response includes the `recordingUrl` for playback/download. | -| `presenter-mode.mdx` | 1. Added `description: "Learn how to implement presenter mode in your Flutter app for webinars, online classes, and broadcast-style calling experiences with CometChat."`
2. Added Quick Reference `
3. Added Response accordion after `joinPresentation()` — `Widget?` representing the presentation UI, documented as: "A Flutter widget containing the presentation UI. Display this widget in your screen to show the presentation interface."
4. Added Error accordion after `joinPresentation()` — `code` (`"ERR_CHAT_API_FAILURE"`), `message` (`"Failed to start the presentation session."`), `details` (`"The call token provided is invalid or expired."`)
5. Added Next Steps CardGroup with 3 cards: "Default Call", "Recording", "Video View Customisation" | This was the final file updated (commit `9feb900b`). The Quick Reference shows both presenter and viewer code side-by-side so developers can see the `isPresenter` flag difference. | -| `video-view-customisation.mdx` | 1. Added `description: "Learn how to customize the video view in CometChat calls for Flutter."`
2. Added Quick Reference `
3. Added Next Steps CardGroup with 3 cards: "Presenter Mode", "Default Call", "Recording" | No response/error accordions — this page covers UI customization, not SDK method calls. | -| `real-time-listeners.mdx` | 1. Added `description: "Complete reference for all real-time event listeners in the CometChat Flutter SDK."`
2. Added Quick Reference `
3. Added Next Steps CardGroup with 3 cards: "Receive Messages", "Connection Status", "Login Listeners" | The Quick Reference is a comprehensive callback catalog — developers can scan all available listener callbacks in one place without reading the full page. | -| `login-listeners.mdx` | 1. Added `description: "Learn how to handle login and logout state changes using LoginListener in CometChat Flutter SDK."`
2. Added Quick Reference `
3. Added Next Steps CardGroup with 3 cards: "Authentication", "Real-Time Listeners", "Connection Status" | Login listeners help developers react to auth state changes (e.g., auto-redirect on logout). | -| `connection-status.mdx` | 1. Added `description: "Monitor real-time WebSocket connection status with CometChat SDK using ConnectionListener callbacks and getConnectionStatus method."`
2. Added Quick Reference `
3. Added Next Steps CardGroup with 3 cards: "Connection Behaviour", "Real-Time Listeners", "Login Listeners" | The Quick Reference shows both the listener approach (reactive) and the `getConnectionStatus()` approach (polling) for monitoring connection state. | -| `connection-behaviour.mdx` | 1. Added `description: "Understand how CometChat SDK manages WebSocket connections in auto and manual modes, including background behavior and reconnection handling."`
2. Added Quick Reference `
3. Added Response accordion after `CometChat.connect()` — `String` success message
4. Added Error accordion after `CometChat.connect()`
5. Added Response accordion after `CometChat.disconnect()` — `String` success message
6. Added Error accordion after `CometChat.disconnect()`
7. Added Response accordion after `CometChat.ping()` — `String` success message
8. Added Error accordion after `CometChat.ping()`
9. Added Next Steps CardGroup with 3 cards: "Connection Status", "Real-Time Listeners", "Setup" | The auto vs manual mode comparison in the Quick Reference is a key decision point for developers — most should use auto mode, but apps with specific background requirements may need manual mode. | -| `session-timeout.mdx` | 1. Added `description: "Learn how to configure session timeout behavior in CometChat Flutter SDK."`
2. Added Quick Reference `
3. Added Next Steps CardGroup with 3 cards: "Authentication", "Connection Behaviour", "Login Listeners" | No response/error accordions — session timeout is a configuration, not a method call. | -| `rate-limits.mdx` | 1. Added `description: "Understand the API rate limits for CometChat Flutter SDK operations."`
2. Added Quick Reference `
3. Added Next Steps CardGroup with 3 cards: "Send Messages", "Retrieve Conversations", "Setup" | The Quick Reference gives developers a quick view of rate limits without reading the full table. | -| `advanced-overview.mdx` | 1. Added `description: "Advanced SDK features including connection management, real-time listeners, and login state handling for Flutter applications."`
2. Added Quick Reference `
3. Added Next Steps CardGroup with 4 cards: "Connection Status", "Real-Time Listeners", "Login Listeners", "Connection Behaviour" | Index page for the Advanced section. | -| `resources-overview.mdx` | 1. Added `description` frontmatter
2. Added Quick Reference `
3. Added Next Steps CardGroup | Index page for the Resources section. | -| `flutter-overview.mdx` | 1. Added `description` frontmatter
2. Added Quick Reference `
3. Added Next Steps CardGroup with 4 cards: "Overview/Setup", "Key Concepts", "Authentication", "Send Messages" | Top-level Flutter SDK overview — the Quick Reference gives a feature checklist. | -| `upgrading-from-v3-guide.mdx` | 1. Added `description: "Guide for migrating your Flutter app from CometChat SDK v3 to v4."`
2. Added Quick Reference `
3. Added Next Steps CardGroup with 3 cards: "Setup", "Authentication", "Key Concepts" | The Quick Reference gives a scannable migration checklist. | -| `ai-agents.mdx` | 1. Added `description: "Learn how to integrate AI Agents in your Flutter app to enable intelligent, automated interactions that process user messages, trigger tools, and respond with contextually relevant information."`
2. Added Quick Reference `
3. Added `
4. Added `
5. Added Next Steps CardGroup with 3 cards: "AI Moderation", "AI Chatbots", "Extensions" | The Quick Reference shows both the AI-specific listener (`AIAssistantListener`) and the message listener callbacks for AI events (`onAIAssistantMessageReceived`, `onAIToolResultReceived`). The memory leak warning is especially important for AI listeners since they may be added in multiple screens. | -| `ai-moderation.mdx` | 1. Added `description: "Learn how to implement AI-powered content moderation in your Flutter app using CometChat SDK to automatically review messages for inappropriate content."`
2. Added Quick Reference `
3. Added Response accordion after sending a moderated message — `BaseMessage` with `metadata` containing nested `@injected.extensions.ai-moderation` object with fields: `status` (`"pending"`), `confidence` (number), `categories` (array of flagged categories)
4. Added Error accordion
5. Added Response accordion for real-time moderation status update — same metadata structure with `status` changed to `"approved"` or `"rejected"`
6. Added Error accordion
7. Added Next Steps CardGroup with 4 cards: "AI Agents", "AI Chatbots", "Send Messages", "Extensions" | The moderation metadata path (`@injected.extensions.ai-moderation`) is deeply nested — the Response accordion documents the exact path developers need to access moderation results. The two Response accordions show the initial "pending" state and the final "approved"/"rejected" state. | -| `ai-chatbots-overview.mdx` | 1. Added `description: "Configure AI-powered chatbots to provide automated assistance and maintain conversational momentum in your Flutter app."`
2. Added Quick Reference `
3. Added Next Steps CardGroup with 4 cards: "AI Agents", "AI Moderation", "AI User Copilot", "Extensions" | Index page for AI chatbots — no SDK method calls, so no response/error accordions. | -| `extensions-overview.mdx` | 1. Added `description: "Explore CometChat extensions that add enhanced functionality to your Flutter chat application"`
2. Added Quick Reference `
3. Added `
4. Added Next Steps CardGroup with 3 cards: "AI Features", "Webhooks", "Setup" | The Quick Reference is a comprehensive extension catalog organized by category — developers can quickly find which extension they need. | -| `webhooks-overview.mdx` | 1. Added `description: "Configure server-side webhooks to receive real-time notifications for messages, users, groups, calls, and moderation events in your Flutter application."`
2. Added Quick Reference `
3. Added `
4. Added Next Steps CardGroup with 3 cards: "Extensions", "Real-Time Listeners", "AI Agents" | The Quick Reference lists all webhook event names — this is valuable for backend developers who need to know which events to listen for. The `
Loading chat...
;
const handleConversationClick = (conversation: CometChat.Conversation) => {
+ setSelectedConversation(conversation); // highlights the open row in the Conversations list
const entity = conversation.getConversationWith();
if (conversation.getConversationType() === "user") {
setSelectedUser(entity as CometChat.User);
@@ -182,20 +186,27 @@ export default function TabbedChat() {
{activeTab === "chat" && (
-
{selectedUser || selectedGroup ? (
- setShowDetails(true)}
+ />
@@ -212,6 +223,23 @@ export default function TabbedChat() {
Select a conversation to start chatting
)}
+
+ {/* Details / members side panel — opened from the header, closed via onBack */}
+ {showDetails && selectedGroup && (
+
+ setShowDetails(false)}
+ />
+
+ )}
);
@@ -245,6 +273,8 @@ import TabbedChat from '../components/TabbedChat.tsx';
4. **Conditional rendering** — only the active tab's component mounts. Switching tabs unmounts the previous list and mounts the new one.
5. **Unified selection** — all three tabs feed into the same `selectedUser` / `selectedGroup` state. Clicking any item (conversation, call log, or user) updates the message panel.
6. **Call log handling** — when a call log is clicked, the receiver (user or group) is extracted and passed to the message components.
+7. **Active highlight** — the current selection is passed back to each list as `activeConversation` / `activeUser` (and `activeGroup` on a Groups tab), so the open row stays highlighted while its chat is on screen.
+8. **Details panel round-trip** — clicking the message header opens a group details / members side panel (`CometChatGroupMembers`). Its `onBack` sets `showDetails` back to `false`, closing the panel — the full open→close cycle, not just opening it.
---
@@ -283,6 +313,7 @@ type Tab = "chat" | "calls" | "users" | "groups";
setSelectedGroup(group);
setSelectedUser(undefined);
}}
+ activeGroup={selectedGroup}
/>
)}
```
diff --git a/ui-kit/react/campaigns.mdx b/ui-kit/react/campaigns.mdx
index c8ac622c1..42ed7ca36 100644
--- a/ui-kit/react/campaigns.mdx
+++ b/ui-kit/react/campaigns.mdx
@@ -55,6 +55,10 @@ The Cards library is a **pure renderer**:
It does not execute actions, manage message state, or call any SDK methods. When users click interactive elements (buttons, links), the library emits the action to your callback. You decide what happens — open a URL, navigate to a chat, make an API call, etc.
+
-
@@ -200,6 +166,10 @@ Fires when an interactive element (button, link) inside a card is clicked. The `
/>
```
+
@@ -148,9 +152,13 @@ The Threaded Conversations feature enables users to respond directly to a specif
+
diff --git a/ui-kit/react/event-system.mdx b/ui-kit/react/event-system.mdx
index a2b35e12e..c73f15c10 100644
--- a/ui-kit/react/event-system.mdx
+++ b/ui-kit/react/event-system.mdx
@@ -225,6 +225,8 @@ These events are published by UI Kit components for local cross-component commun
| `ui:group/member-scope-changed` | `{ message, user, group, newScope }` | GroupMembers |
| `ui:group/ownership-changed` | `{ group, newOwner, previousOwnerUid }` | GroupMembers |
+**Used by:** the [Block/Unblock User guide](/ui-kit/react/guide-block-unblock-user) publishes and subscribes to `ui:user/blocked` / `ui:user/unblocked` to keep the composer in sync, and the [Group Chat Setup guide](/ui-kit/react/guide-group-chat-setup) reacts to `ui:group/created` in the group creation flow.
+
### Thread
| Event Type | Payload | Published by |
@@ -232,6 +234,8 @@ These events are published by UI Kit components for local cross-component commun
| `ui:thread/opened` | `{ parentMessage }` | MessageList (thread option) |
| `ui:thread/closed` | — | ThreadHeader |
+**Used by:** the [Threaded Messages guide](/ui-kit/react/guide-threaded-messages) opens and closes the thread panel in response to `ui:thread/opened` / `ui:thread/closed`.
+
### Call Actions
| Event Type | Payload | Published by |
@@ -248,6 +252,8 @@ These events are published by UI Kit components for local cross-component commun
| --- | --- | --- |
| `ui:open-chat` | `{ user?, group? }` | MessageList (message privately option) |
+**Used by:** the [Message Privately guide](/ui-kit/react/guide-message-privately) subscribes to `ui:open-chat` to open a private one-on-one panel from within a group chat.
+
### Card Actions
| Event Type | Payload | Published by |
diff --git a/ui-kit/react/guide-block-unblock-user.mdx b/ui-kit/react/guide-block-unblock-user.mdx
index 95eb9cb06..7f3a62ce1 100644
--- a/ui-kit/react/guide-block-unblock-user.mdx
+++ b/ui-kit/react/guide-block-unblock-user.mdx
@@ -105,6 +105,10 @@ const [showBlockDialog, setShowBlockDialog] = useState(false);
Use `useCometChatEvents` to subscribe to block/unblock events. This keeps the composer visibility in sync even when the block action originates from a different component (e.g., a details panel).
+` stacked above the list — so the list header stays intact and the layout doesn't shift. Because `headerView` replaces the entire default header, re-render the default title (**"Chats"**) alongside the button.
+
+
```tsx GroupChat.tsx
import { useState } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
@@ -233,21 +376,27 @@ import {
function CreateGroupForm({ onCreate }: { onCreate: (group: CometChat.Group) => void }) {
const [name, setName] = useState("");
const [type, setType] = useState(CometChat.GROUP_TYPE.PUBLIC);
+ const [password, setPassword] = useState("");
+
+ const isPasswordType = type === CometChat.GROUP_TYPE.PASSWORD;
async function handleSubmit(e: React.FormEvent) {
e.preventDefault();
if (!name.trim()) return;
+ if (isPasswordType && !password) return;
const group = new CometChat.Group(
"group-" + Date.now(),
name.trim(),
- type as typeof CometChat.GROUP_TYPE.PUBLIC
+ type,
+ isPasswordType ? password : ""
);
try {
const createdGroup = await CometChat.createGroup(group);
onCreate(createdGroup);
setName("");
+ setPassword("");
} catch (error) {
console.error("Group creation failed:", error);
}
@@ -267,9 +416,18 @@ function CreateGroupForm({ onCreate }: { onCreate: (group: CometChat.Group) => v
style={{ width: "100%", marginBottom: "8px", padding: "8px" }}
>
-
+
+ {isPasswordType && (
+ setPassword(e.target.value)}
+ placeholder="Group password"
+ style={{ width: "100%", marginBottom: "8px", padding: "8px" }}
+ />
+ )}
@@ -310,19 +468,21 @@ function GroupChat() {
return (
@@ -353,6 +513,8 @@ export default App;
## Next Steps
- [Groups](/ui-kit/react/components/groups) — browse and join existing groups
-- [Group Members](/ui-kit/react/components/group-members) — manage group membership
+- [Group Members](/ui-kit/react/components/group-members) — manage group membership with role-based actions
+- [Kick / Ban Members](/sdk/javascript/group-kick-ban-members) · [Change Member Scope](/sdk/javascript/group-change-member-scope) · [Transfer Ownership](/sdk/javascript/transfer-group-ownership) — SDK references
- [Message Header](/ui-kit/react/components/message-header) — customize the group header
+- [Event System](/ui-kit/react/event-system#user--group-actions) — react to `ui:group/created` and other group action events
- [CometChatProvider](/ui-kit/react/cometchat-provider) — configure the root provider
diff --git a/ui-kit/react/guide-message-privately.mdx b/ui-kit/react/guide-message-privately.mdx
index 02454e238..ae0bf8111 100644
--- a/ui-kit/react/guide-message-privately.mdx
+++ b/ui-kit/react/guide-message-privately.mdx
@@ -105,6 +105,10 @@ async function handleMessagePrivately(uid: string) {
Use `useCometChatEvents` to subscribe to the `ui:open-chat` event, which is published internally when a user clicks "Message Privately" from the context menu. When the event fires, extract the user and open the private panel.
+
+`ui:open-chat` is one of the UI Kit's [Event System — Navigation events](/ui-kit/react/event-system#navigation). See that page for the event payload and the full list of navigation and UI events.
+
+
```tsx
import { useCometChatEvents } from "@cometchat/chat-uikit-react";
import type { CometChatEvent } from "@cometchat/chat-uikit-react";
@@ -260,6 +264,7 @@ export default App;
## Next Steps
+- [Event System](/ui-kit/react/event-system#navigation) — reference for `ui:open-chat` and other navigation events
- [Message Composer](/ui-kit/react/components/message-composer) — customize the composer for private chats
- [Conversations](/ui-kit/react/components/conversations) — manage the conversations list
- [Users](/ui-kit/react/components/users) — browse and select users directly
diff --git a/ui-kit/react/guide-new-chat-creation.mdx b/ui-kit/react/guide-new-chat-creation.mdx
index 2572cbc7f..67d708109 100644
--- a/ui-kit/react/guide-new-chat-creation.mdx
+++ b/ui-kit/react/guide-new-chat-creation.mdx
@@ -49,7 +49,7 @@ export default App;
## Step 2: Add a "New Chat" trigger
-Create a button that opens a selection panel. Use component state to toggle between the conversations view and the user/group selection view.
+Create a button that opens a selection panel. Use component state to toggle between the conversations view and the user/group selection view. Put the **"New Chat"** trigger in the conversation list's `headerView` slot rather than a separate `
);
@@ -209,6 +230,15 @@ export default App;
flex-direction: column;
}
+.details-panel {
+ width: 320px;
+ height: 100%;
+ border-left: 1px solid #eee;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+}
+
.empty-conversation {
flex: 1;
display: flex;
@@ -228,6 +258,8 @@ export default App;
2. **Conditional rendering** — only the active tab's component mounts. Switching tabs unmounts the previous list and mounts the new one.
3. **Unified selection** — all three tabs feed into the same `selectedUser` / `selectedGroup` state. Clicking any item (conversation, call log, or user) updates the message panel.
4. **Call log handling** — when a call log is clicked, the receiver (user or group) is extracted and passed to the message components.
+5. **Active highlight** — the current selection is passed back to each list as `activeConversation` / `activeUser` (and `activeGroup` on a Groups tab), so the open row stays highlighted while its chat is on screen.
+6. **Details panel round-trip** — clicking the message header opens a group details / members side panel (`CometChatGroupMembers`). Its `onBack` sets `showDetails` back to `false`, closing the panel — the full open→close cycle, not just opening it.
---
@@ -256,6 +288,7 @@ type Tab = "chat" | "calls" | "users" | "groups";
setSelectedGroup(group);
setSelectedUser(undefined);
}}
+ activeGroup={selectedGroup}
/>
)}
```
diff --git a/ui-kit/react/theming.mdx b/ui-kit/react/theming.mdx
index 2de7a9dbe..7581b2173 100644
--- a/ui-kit/react/theming.mdx
+++ b/ui-kit/react/theming.mdx
@@ -57,6 +57,50 @@ function ThemeToggle() {
---
+## Follow the System (OS) Theme
+
+The UI Kit ships `light` and `dark` themes but **does not follow the operating system's color-scheme setting on its own** — there is no `theme="system"`. A fresh app stays on the default `light` theme even when the OS is in dark mode. To follow the OS, read `prefers-color-scheme` and drive the theme yourself.
+
+Seed the initial theme from the OS setting when you mount the provider:
+
+```tsx title="src/main.tsx"
+const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+
-
-
-
-
{showCreateForm &&
-
+ Chats
+
+
+ }
+ />
` stacked above the list — that keeps the header intact and the layout stable. Because `headerView` replaces the entire default header, re-render the default title (**"Chats"**) next to the button.
```tsx NewChatApp.tsx
import { useState } from "react";
@@ -67,17 +67,9 @@ function NewChatApp() {
return (
("chat");
const [selectedUser, setSelectedUser] = useState(undefined);
const [selectedGroup, setSelectedGroup] = useState(undefined);
+ const [selectedConversation, setSelectedConversation] = useState(undefined);
+ const [showDetails, setShowDetails] = useState(false);
const handleConversationClick = (conversation: CometChat.Conversation) => {
+ setSelectedConversation(conversation); // highlights the open row in the Conversations list
const entity = conversation.getConversationWith();
if (conversation.getConversationType() === "user") {
setSelectedUser(entity as CometChat.User);
@@ -123,20 +127,27 @@ function App() {
{selectedUser || selectedGroup ? (
)}
+
+ {/* Details / members side panel — opened from the header, closed via onBack */}
+ {showDetails && selectedGroup && (
+
- setShowNewChat(false)}
onSelectUser={(user) => {
setActiveChat({ type: "user", entity: user });
setShowNewChat(false);
@@ -90,6 +82,13 @@ function NewChatApp() {
) : (
+ Chats
+
+
+ }
onItemClick={(conversation) => {
const entity = conversation.getConversationWith();
if (entity instanceof CometChat.User) {
@@ -127,9 +126,11 @@ import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatUsers, CometChatGroups } from "@cometchat/chat-uikit-react";
function UserGroupSelector({
+ onCancel,
onSelectUser,
onSelectGroup,
}: {
+ onCancel: () => void;
onSelectUser: (user: CometChat.User) => void;
onSelectGroup: (group: CometChat.Group) => void;
}) {
@@ -137,6 +138,10 @@ function UserGroupSelector({
return (
);
@@ -208,6 +229,15 @@ export default function TabbedChatPage() {
flex-direction: column;
}
+.details-panel {
+ width: 320px;
+ height: 100%;
+ border-left: 1px solid #eee;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+}
+
.empty-conversation {
flex: 1;
display: flex;
@@ -248,6 +278,8 @@ export default App;
3. **Unified selection** — all three tabs feed into the same `selectedUser` / `selectedGroup` state. Clicking any item (conversation, call log, or user) updates the message panel.
4. **Call log handling** — when a call log is clicked, the receiver (user or group) is extracted and passed to the message components.
5. **React Router** handles navigation — the tabbed chat page is a route component at `/chat`.
+6. **Active highlight** — the current selection is passed back to each list as `activeConversation` / `activeUser` (and `activeGroup` on a Groups tab), so the open row stays highlighted while its chat is on screen.
+7. **Details panel round-trip** — clicking the message header opens a group details / members side panel (`CometChatGroupMembers`). Its `onBack` sets `showDetails` back to `false`, closing the panel — the full open→close cycle, not just opening it.
---
@@ -276,6 +308,7 @@ type Tab = "chat" | "calls" | "users" | "groups";
setSelectedGroup(group);
setSelectedUser(undefined);
}}
+ activeGroup={selectedGroup}
/>
)}
```
diff --git a/ui-kit/react/react-tab-based-chat.mdx b/ui-kit/react/react-tab-based-chat.mdx
index ba4b4146d..b4b2b3106 100644
--- a/ui-kit/react/react-tab-based-chat.mdx
+++ b/ui-kit/react/react-tab-based-chat.mdx
@@ -50,6 +50,7 @@ import {
CometChatConversations,
CometChatUsers,
CometChatCallLogs,
+ CometChatGroupMembers,
CometChatMessageHeader,
CometChatMessageList,
CometChatMessageComposer,
@@ -62,8 +63,11 @@ function App() {
const [activeTab, setActiveTab] = useState
-
-
-
{showNewChat ? (
+
{selectedUser || selectedGroup ? (
)}
+
+ {/* Details / members side panel — opened from the header, closed via onBack */}
+ {showDetails && selectedGroup && (
+
+ New Chat
+
+
- setShowDetails(true)}
+ />
@@ -146,6 +157,16 @@ export default function TabbedChatPage() {
Select a conversation to start chatting
+ setShowDetails(false)}
+ />
+
+ )}
{activeTab === "chat" && (
-
- setShowDetails(true)}
+ />
@@ -145,6 +156,16 @@ function App() {
Select a conversation to start chatting
+ setShowDetails(false)}
+ />
+
+ )}
`, so use the **same-element** selector `.cometchat[data-theme="dark"]` — not the descendant form `[data-theme="dark"] .cometchat`, which matches only a `.cometchat` *nested inside* another `[data-theme]` element and therefore misses the root wrapper:
```css
-[data-theme="dark"] .cometchat {
+.cometchat[data-theme="dark"] {
--cometchat-primary-color: #bb86fc;
--cometchat-background-color-01: #121212;
}
```
+
+Component-class overrides *are* descendants of the wrapper, so the descendant form is correct for them — e.g. `[data-theme="dark"] .cometchat-message-list { … }`. It's only overriding tokens on the **root wrapper** that requires the same-element `.cometchat[data-theme="dark"]` selector.
+
+
### Per-Component Overrides
Target a specific component by its BEM class name:
@@ -108,6 +156,20 @@ Or wrap the component in your own class:
}
```
+### Differentiating the Thread Panel
+
+Some surfaces paint their **own opaque token** rather than inheriting a background from their wrapper. The clearest example is the thread panel: its `CometChatMessageList` fills itself with `--cometchat-message-list-bg` (default `--cometchat-background-color-03`), while the thread header uses `--cometchat-thread-header-background` (which falls back to `--cometchat-background-color-01`). Because the list background is opaque, setting a `background` on the wrapping `
` has **no visible effect** — the list paints over it, and the panel looks mismatched against its header and composer.
+
+To style such a surface, override its own token instead of a wrapper background. For example, to make the thread panel's message list match its header:
+
+```css
+/* Scope to the thread wrapper in your app */
+.my-thread-panel {
+ --cometchat-message-list-bg: var(--cometchat-background-color-01);
+ --cometchat-thread-header-background: var(--cometchat-background-color-01);
+}
+```
+
---
## Design Token Categories
@@ -133,6 +195,8 @@ Or wrap the component in your own class:
| Token | Purpose |
| --- | --- |
| `--cometchat-background-color-01` to `04` | Background layers (01 = base, 04 = elevated) |
+| `--cometchat-message-list-bg` | Opaque background painted by `CometChatMessageList` (default `--cometchat-background-color-03`). Set this — not a wrapper `background` — to recolor the list surface |
+| `--cometchat-thread-header-background` | Background of the thread panel header (falls back to `--cometchat-background-color-01`) |
| `--cometchat-border-color-light` / `default` / `dark` / `highlight` | Border variants |
| `--cometchat-text-color-primary` / `secondary` / `tertiary` / `disabled` / `highlight` | Text colors |
| `--cometchat-icon-color-primary` / `secondary` / `tertiary` / `highlight` | Icon colors |