-
+
2. In **Certificate Information**, enter your Apple Developer email and a common name; choose **Saved to disk**, then **Continue**.
3. Save the CSR file locally—this contains your public/private key pair.
@@ -76,31 +76,31 @@ For iOS we use Apple Push Notification service (APNs) for both standard and VoIP
-
+
2. Click **+** to add a certificate.-
+
3. Under **Services**, pick **Apple Push Notification service SSL (Sandbox & Production)**.-
+
4. Select your App ID, upload the CSR, continue, and download the generated `.cer` file.-
+
&
- 
+
&
- 
+
+ 
| App State | Behaviour |
@@ -59,7 +59,7 @@ Set `autoEstablishSocketConnection(false)` to take control of the WebSocket conn
By default in manual mode, the SDK disconnects after 30 seconds in the background if no pings are received. Call `CometChat.ping()` within 30 seconds to keep the connection alive.
- 
+ 
| App State | Behaviour |
diff --git a/sdk/android/connection-status.mdx b/sdk/android/connection-status.mdx
index 040bcab56..126db993b 100644
--- a/sdk/android/connection-status.mdx
+++ b/sdk/android/connection-status.mdx
@@ -1,7 +1,7 @@
---
title: "Connection Status"
sidebarTitle: "Connection Status"
-description: "Monitor real-time connection status to CometChat web-socket servers in the Android SDK"
+description: "Monitor real-time WebSocket connection status to CometChat servers in the Android SDK with listeners and reconnect handling."
---
+
| App State | Behaviour |
@@ -48,7 +48,7 @@ To keep the WebSocket connection alive even if your app goes in the background,
If you do not call the `CometChat.ping()` method within 30 seconds, the SDK will disconnect the WebSocket connection. This means that you will lose any messages that are sent to your app while it is in the background.
-
+
| App State | Behaviour |
diff --git a/sdk/android/v5/overview.mdx b/sdk/android/v5/overview.mdx
index 54348dbab..d8f286428 100644
--- a/sdk/android/v5/overview.mdx
+++ b/sdk/android/v5/overview.mdx
@@ -1,5 +1,6 @@
---
title: "Overview"
+description: "Build Android chat apps with CometChat SDK v5, including real-time messaging, users, groups, and calling support."
---
+
| App State | Behaviour |
@@ -81,7 +52,7 @@ To keep the WebSocket connection alive even if your app goes in the background,
If you do not call the `CometChat.ping()` method within 30 seconds, the SDK will disconnect the WebSocket connection. This means that you will lose any messages that are sent to your app while it is in the background.
-
+
| App State | Behaviour |
@@ -120,25 +91,6 @@ CometChat.init(appId, appSettings, onSuccess: (String successMessage) {
-1. `CometChatMessageType.image` (image)
2. `CometChatMessageType.video` (video)
3. `CometChatMessageType.audio` (audio)
4. `CometChatMessageType.file` (file) | Required | | receiverType | The type of the receiver to whom the message is to be sent, i.e., `CometChatReceiverType.user` (user) or `CometChatReceiverType.group` (group) | Required | -
-### Import the SDK
-
+Import CometChat SDK using following code in dart
+
| App State | Behaviour |
@@ -51,7 +81,7 @@ To keep the WebSocket connection alive even if your app goes in the background,
If you do not call the `CometChat.ping()` method within 30 seconds, the SDK will disconnect the WebSocket connection. This means that you will lose any messages that are sent to your app while it is in the background.
-
+
| App State | Behaviour |
@@ -90,6 +120,25 @@ CometChat.init(appId, appSettings, onSuccess: (String successMessage) {
1. `CometChatMessageType.image` (image)
2. `CometChatMessageType.video` (video)
3. `CometChatMessageType.audio` (audio)
4. `CometChatMessageType.file` (file) | Required | +| receiverType | The type of the receiver to whom the message is to be sent, i.e., `CometChatReceiverType.user` (user) or `CometChatReceiverType.group` (group) | Required | + +
+
+
+### Import the SDK
+
+
+1. `CometChatMessageType.image` (image)
2. `CometChatMessageType.video` (video)
3. `CometChatMessageType.audio` (audio)
4. `CometChatMessageType.file` (file) | Required | -| receiverType | The type of the receiver to whom the message is to be sent, i.e., `CometChatReceiverType.user` (user) or `CometChatReceiverType.group` (group) | Required | - -2. **By providing the URL of the File:** The second way to send media messages using the CometChat SDK is to provide the SDK with the URL of any file that is hosted on your servers or any cloud storage. To achieve this you will have to make use of the Attachment class that is available in the MediaMessage class. For more information, you can refer to the below code snippet: - -
-
-
-Import CometChat SDK using following code in dart
-
-
+
| App State | Behaviour |
@@ -61,7 +61,7 @@ To keep the WebSocket connection alive in the background, call the `CometChat.pi
If you do not call `CometChat.ping()` within 30 seconds, the SDK will disconnect the WebSocket connection.
- 
+
| App State | Behaviour |
diff --git a/sdk/javascript/ai-agents.mdx b/sdk/javascript/ai-agents.mdx
index cf8b4ac76..778800011 100644
--- a/sdk/javascript/ai-agents.mdx
+++ b/sdk/javascript/ai-agents.mdx
@@ -1,8 +1,9 @@
---
title: "AI Agents"
+description: "Handle CometChat AI Agent events, tool calls, and agent messages in JavaScript apps."
---
-# AI Agents Overview
+## AI Agents Overview
AI Agents enable intelligent, automated interactions within your application. They can process user messages, trigger tools, and respond with contextually relevant information. For a broader introduction, see the [AI Agents section](/ai-agents).
diff --git a/sdk/javascript/all-real-time-listeners.mdx b/sdk/javascript/all-real-time-listeners.mdx
index 4bf96fa56..1fec5d8d7 100644
--- a/sdk/javascript/all-real-time-listeners.mdx
+++ b/sdk/javascript/all-real-time-listeners.mdx
@@ -1,5 +1,6 @@
---
title: "All Real Time Listeners"
+description: "Use CometChat real-time listeners for user presence, groups, messages, calls, AI assistant events, and ongoing calls."
---
CometChat provides 4 listeners viz.
diff --git a/sdk/javascript/authentication-overview.mdx b/sdk/javascript/authentication-overview.mdx
index 7b7cbf651..1b5fc8728 100644
--- a/sdk/javascript/authentication-overview.mdx
+++ b/sdk/javascript/authentication-overview.mdx
@@ -1,6 +1,7 @@
---
title: "Authentication"
sidebarTitle: "Authentication"
+description: "Create users and authenticate them securely with the CometChat JavaScript SDK."
---
## Create User
diff --git a/sdk/javascript/best-practices.mdx b/sdk/javascript/best-practices.mdx
index fce41d053..0101991b9 100644
--- a/sdk/javascript/best-practices.mdx
+++ b/sdk/javascript/best-practices.mdx
@@ -1,7 +1,7 @@
---
title: "Best Practices"
sidebarTitle: "Best Practices"
-description: "Recommended patterns and practices for building with the CometChat JavaScript SDK."
+description: "Build reliable CometChat JavaScript SDK apps with secure auth, listener cleanup, pagination, caching, error handling, and performance practices."
---
Follow these best practices to build reliable, performant, and secure applications with the CometChat JavaScript SDK. Organized by topic — jump to what's relevant for your current work.
diff --git a/sdk/javascript/block-users.mdx b/sdk/javascript/block-users.mdx
index 43bf67b04..c6295b621 100644
--- a/sdk/javascript/block-users.mdx
+++ b/sdk/javascript/block-users.mdx
@@ -1,5 +1,6 @@
---
title: "Block Users"
+description: "Block and unblock users in chat apps with the CometChat JavaScript SDK."
---
## Block Users
diff --git a/sdk/javascript/calling-overview.mdx b/sdk/javascript/calling-overview.mdx
index c523b864f..04643ef3a 100644
--- a/sdk/javascript/calling-overview.mdx
+++ b/sdk/javascript/calling-overview.mdx
@@ -1,7 +1,7 @@
---
title: "Calling"
sidebarTitle: "Calling"
-description: "Voice and video calling integration with CometChat for JavaScript"
+description: "Add CometChat voice and video calling to JavaScript apps with one-on-one calls, group calls, screen sharing, recording, and call logs."
---
CometChat's Calling SDK enables you to add voice and video calling to your JavaScript application. The Calling SDK works alongside the Chat SDK to provide a complete communication experience including 1-on-1 calls, group calls, and conference sessions.
diff --git a/sdk/javascript/connection-status.mdx b/sdk/javascript/connection-status.mdx
index 046dc9a39..093a09d80 100644
--- a/sdk/javascript/connection-status.mdx
+++ b/sdk/javascript/connection-status.mdx
@@ -1,5 +1,6 @@
---
title: "Connection Status"
+description: "Monitor CometChat WebSocket connection status in JavaScript apps with connecting, connected, and disconnected callbacks."
---
CometChat SDK provides you with a mechanism to get real-time status of the connection to CometChat web-socket servers.
diff --git a/sdk/javascript/create-group.mdx b/sdk/javascript/create-group.mdx
index ec3c5031e..810059adb 100644
--- a/sdk/javascript/create-group.mdx
+++ b/sdk/javascript/create-group.mdx
@@ -1,5 +1,6 @@
---
title: "Create A Group"
+description: "Create CometChat public, private, and password-protected groups in JavaScript apps with GUID, name, type, and password."
---
## Create a Group
diff --git a/sdk/javascript/delete-conversation.mdx b/sdk/javascript/delete-conversation.mdx
index 6d3c6ac62..cad61c356 100644
--- a/sdk/javascript/delete-conversation.mdx
+++ b/sdk/javascript/delete-conversation.mdx
@@ -1,5 +1,6 @@
---
title: "Delete A Conversation"
+description: "Delete user and group conversations with the CometChat JavaScript SDK."
---
In case you want to delete a conversation, you can use the `deleteConversation()` method.
diff --git a/sdk/javascript/delete-group.mdx b/sdk/javascript/delete-group.mdx
index 06ca5d573..97f45ef5c 100644
--- a/sdk/javascript/delete-group.mdx
+++ b/sdk/javascript/delete-group.mdx
@@ -1,5 +1,6 @@
---
title: "Delete A Group"
+description: "Delete CometChat groups from JavaScript apps by GUID when the logged-in user has permission."
---
## Delete a Group
diff --git a/sdk/javascript/delete-message.mdx b/sdk/javascript/delete-message.mdx
index 03b800be2..9179852a6 100644
--- a/sdk/javascript/delete-message.mdx
+++ b/sdk/javascript/delete-message.mdx
@@ -1,5 +1,6 @@
---
title: "Delete A Message"
+description: "Delete chat messages and handle delete events with the CometChat JavaScript SDK."
---
While [deleting a message](/sdk/javascript/delete-message#delete-a-message) is straightforward, receiving events for deleted messages with CometChat has two parts:
diff --git a/sdk/javascript/delivery-read-receipts.mdx b/sdk/javascript/delivery-read-receipts.mdx
index 70a75c071..aa076ccb5 100644
--- a/sdk/javascript/delivery-read-receipts.mdx
+++ b/sdk/javascript/delivery-read-receipts.mdx
@@ -1,5 +1,6 @@
---
title: "Delivery & Read Receipts"
+description: "Mark messages as delivered or read and handle receipts with the CometChat JavaScript SDK."
---
## Mark Messages as Delivered
diff --git a/sdk/javascript/edit-message.mdx b/sdk/javascript/edit-message.mdx
index e90eb1635..f4bab5085 100644
--- a/sdk/javascript/edit-message.mdx
+++ b/sdk/javascript/edit-message.mdx
@@ -1,5 +1,6 @@
---
title: "Edit A Message"
+description: "Edit text and custom chat messages using the CometChat JavaScript SDK."
---
While [editing a message](/sdk/javascript/edit-message#edit-a-message) is straightforward, receiving events for edited messages with CometChat has two parts:
diff --git a/sdk/javascript/flag-message.mdx b/sdk/javascript/flag-message.mdx
index e2aea41c3..f94c01607 100644
--- a/sdk/javascript/flag-message.mdx
+++ b/sdk/javascript/flag-message.mdx
@@ -1,5 +1,6 @@
---
title: "Flag Message"
+description: "Flag inappropriate chat messages for moderation with the CometChat JavaScript SDK."
---
## Overview
diff --git a/sdk/javascript/group-add-members.mdx b/sdk/javascript/group-add-members.mdx
index f24d698ef..50b43a261 100644
--- a/sdk/javascript/group-add-members.mdx
+++ b/sdk/javascript/group-add-members.mdx
@@ -1,5 +1,6 @@
---
title: "Add Members To A Group"
+description: "Add CometChat users to JavaScript group chats with member scopes and optional banned member handling."
---
## Add Members to Group
diff --git a/sdk/javascript/group-change-member-scope.mdx b/sdk/javascript/group-change-member-scope.mdx
index eb3cc9783..4d82c5b17 100644
--- a/sdk/javascript/group-change-member-scope.mdx
+++ b/sdk/javascript/group-change-member-scope.mdx
@@ -1,5 +1,6 @@
---
title: "Change Member Scope"
+description: "Update CometChat group member scopes in JavaScript apps to change participants between admin, moderator, and participant roles."
---
## Change Scope of a Group Member
diff --git a/sdk/javascript/group-kick-ban-members.mdx b/sdk/javascript/group-kick-ban-members.mdx
index 84f2d0989..8fd34655d 100644
--- a/sdk/javascript/group-kick-ban-members.mdx
+++ b/sdk/javascript/group-kick-ban-members.mdx
@@ -1,5 +1,6 @@
---
title: "Ban Or Kick Member From A Group"
+description: "Kick, ban, and unban CometChat group members in JavaScript apps when the logged-in user is an admin or moderator."
---
There are certain actions that can be performed on the group members:
diff --git a/sdk/javascript/groups-overview.mdx b/sdk/javascript/groups-overview.mdx
index 8871d1575..35b673ee8 100644
--- a/sdk/javascript/groups-overview.mdx
+++ b/sdk/javascript/groups-overview.mdx
@@ -1,6 +1,7 @@
---
title: "Groups"
sidebarTitle: "Overview"
+description: "Learn how groups, group types, and group roles work in the CometChat JavaScript SDK."
---
Groups help your users to converse together in a single space. You can have three types of groups- private, public and password protected.
diff --git a/sdk/javascript/join-group.mdx b/sdk/javascript/join-group.mdx
index a612d4247..f8b8f499d 100644
--- a/sdk/javascript/join-group.mdx
+++ b/sdk/javascript/join-group.mdx
@@ -1,5 +1,6 @@
---
title: "Join A Group"
+description: "Join CometChat public and password-protected groups in JavaScript apps using group GUID, type, and password."
---
## Join a Group
diff --git a/sdk/javascript/key-concepts.mdx b/sdk/javascript/key-concepts.mdx
index c1fd8c4d4..66b5c899f 100644
--- a/sdk/javascript/key-concepts.mdx
+++ b/sdk/javascript/key-concepts.mdx
@@ -1,5 +1,6 @@
---
title: "Key Concepts"
+description: "Learn key CometChat JavaScript SDK concepts, including apps, users, auth keys, roles, and groups."
---
### CometChat Dashboard
diff --git a/sdk/javascript/leave-group.mdx b/sdk/javascript/leave-group.mdx
index 15671be95..d3a9c32a1 100644
--- a/sdk/javascript/leave-group.mdx
+++ b/sdk/javascript/leave-group.mdx
@@ -1,5 +1,6 @@
---
title: "Leave A Group"
+description: "Leave CometChat groups from JavaScript apps by GUID and stop receiving messages and updates for that group."
---
## Leave a Group
diff --git a/sdk/javascript/managing-web-sockets-connections-manually.mdx b/sdk/javascript/managing-web-sockets-connections-manually.mdx
index b80404904..56ca24f0e 100644
--- a/sdk/javascript/managing-web-sockets-connections-manually.mdx
+++ b/sdk/javascript/managing-web-sockets-connections-manually.mdx
@@ -1,5 +1,6 @@
---
title: "Managing Web Sockets Connections Manually"
+description: "Manage WebSocket connections manually with the CometChat JavaScript SDK."
---
## Default SDK behaviour on login
diff --git a/sdk/javascript/mentions.mdx b/sdk/javascript/mentions.mdx
index b6c176b6c..fc0accb02 100644
--- a/sdk/javascript/mentions.mdx
+++ b/sdk/javascript/mentions.mdx
@@ -1,5 +1,6 @@
---
title: "Mentions"
+description: "Add user mentions to CometChat messages in one-on-one and group chats using UID-based mention syntax."
---
Mentions in messages enable users to refer to specific individual within a conversation. This is done by using the `<@uid:UID>` format, where `UID` represents the user’s unique identification.
diff --git a/sdk/javascript/message-filtering.mdx b/sdk/javascript/message-filtering.mdx
index f24d8c871..595b6964c 100644
--- a/sdk/javascript/message-filtering.mdx
+++ b/sdk/javascript/message-filtering.mdx
@@ -1,5 +1,6 @@
---
title: "Additional Message Filtering"
+description: "Filter and paginate CometChat messages by user, group, type, category, tags, timestamps, and unread status."
---
The `MessagesRequest` class as you must be familiar with helps you to fetch messages based on the various parameters provided to it. This document will help you understand better the various options that are available using the `MessagesRequest` class.
diff --git a/sdk/javascript/message-structure-and-hierarchy.mdx b/sdk/javascript/message-structure-and-hierarchy.mdx
index 27967c714..d3eaaa14c 100644
--- a/sdk/javascript/message-structure-and-hierarchy.mdx
+++ b/sdk/javascript/message-structure-and-hierarchy.mdx
@@ -1,6 +1,7 @@
---
title: "Message"
sidebarTitle: "Message Structure And Hierarchy"
+description: "Understand CometChat JavaScript SDK message categories, types, and object hierarchy."
---
The below diagram helps you better understand the various message categories and types that a CometChat message can belong to.
diff --git a/sdk/javascript/overview.mdx b/sdk/javascript/overview.mdx
index b96a01386..f6875446a 100644
--- a/sdk/javascript/overview.mdx
+++ b/sdk/javascript/overview.mdx
@@ -1,5 +1,6 @@
---
title: "Overview"
+description: "Set up the CometChat JavaScript SDK to add real-time chat features to your web app."
---
This guide demonstrates how to add chat to a JavaScript application using CometChat. Before you begin, we strongly recommend you read the [Key Concepts](/sdk/javascript/key-concepts) guide.
diff --git a/sdk/javascript/rate-limits.mdx b/sdk/javascript/rate-limits.mdx
index a7a765937..343eb8082 100644
--- a/sdk/javascript/rate-limits.mdx
+++ b/sdk/javascript/rate-limits.mdx
@@ -1,5 +1,6 @@
---
title: "Rate Limits"
+description: "Understand CometChat JavaScript SDK and REST API rate limits, response headers, 429 errors, and retry handling."
---
### CometChat REST API Rate Limits
diff --git a/sdk/javascript/reactions.mdx b/sdk/javascript/reactions.mdx
index 1d00573e2..0f42c7834 100644
--- a/sdk/javascript/reactions.mdx
+++ b/sdk/javascript/reactions.mdx
@@ -1,5 +1,6 @@
---
title: "Reactions"
+description: "Add, remove, fetch, and listen for message reactions with the CometChat JavaScript SDK."
---
Enhance user engagement in your chat application with message reactions. Users can express their emotions using reactions to messages. This feature allows users to add or remove reactions, and to fetch all reactions on a message. You can also listen to reaction events in real-time. Let's see how to work with reactions in CometChat's SDK.
diff --git a/sdk/javascript/receive-message.mdx b/sdk/javascript/receive-message.mdx
index 369d71007..3ecb4256b 100644
--- a/sdk/javascript/receive-message.mdx
+++ b/sdk/javascript/receive-message.mdx
@@ -1,5 +1,6 @@
---
title: "Receive A Message"
+description: "Receive real-time, unread, and historical messages with the CometChat JavaScript SDK."
---
Receiving messages with CometChat has two parts:
diff --git a/sdk/javascript/retrieve-conversations.mdx b/sdk/javascript/retrieve-conversations.mdx
index 6775a5092..b014834de 100644
--- a/sdk/javascript/retrieve-conversations.mdx
+++ b/sdk/javascript/retrieve-conversations.mdx
@@ -1,5 +1,6 @@
---
title: "Retrieve Conversations"
+description: "Fetch recent CometChat conversations for chat lists, with support for one-on-one and group conversation filters."
---
Conversations provide the last messages for every one-on-one and group conversation the logged-in user is a part of. This makes it easy for you to build a **Recent Chat** list.
diff --git a/sdk/javascript/retrieve-group-members.mdx b/sdk/javascript/retrieve-group-members.mdx
index 517069056..0c1d34d5f 100644
--- a/sdk/javascript/retrieve-group-members.mdx
+++ b/sdk/javascript/retrieve-group-members.mdx
@@ -1,5 +1,6 @@
---
title: "Retrieve Group Members"
+description: "Fetch and paginate group members using the CometChat JavaScript SDK."
---
## Retrieve the List of Group Members
diff --git a/sdk/javascript/retrieve-groups.mdx b/sdk/javascript/retrieve-groups.mdx
index 8a89f53f6..bc79702f6 100644
--- a/sdk/javascript/retrieve-groups.mdx
+++ b/sdk/javascript/retrieve-groups.mdx
@@ -1,5 +1,6 @@
---
title: "Retrieve Groups"
+description: "Fetch, search, filter, and paginate groups using the CometChat JavaScript SDK."
---
## Retrieve List of Groups
diff --git a/sdk/javascript/retrieve-users.mdx b/sdk/javascript/retrieve-users.mdx
index bf5e28d1c..e3c05c4fc 100644
--- a/sdk/javascript/retrieve-users.mdx
+++ b/sdk/javascript/retrieve-users.mdx
@@ -1,5 +1,6 @@
---
title: "Retrieve Users"
+description: "Retrieve users, logged-in user details, and online counts with the CometChat JavaScript SDK."
---
## Retrieve Logged In User Details
diff --git a/sdk/javascript/send-message.mdx b/sdk/javascript/send-message.mdx
index 9c775a5ca..38f37772e 100644
--- a/sdk/javascript/send-message.mdx
+++ b/sdk/javascript/send-message.mdx
@@ -1,5 +1,6 @@
---
title: "Send A Message"
+description: "Send text, media, custom, and interactive chat messages with the CometChat JavaScript SDK."
---
Using CometChat, you can send three types of messages:
diff --git a/sdk/javascript/setup-sdk.mdx b/sdk/javascript/setup-sdk.mdx
index 80c940d41..7d863932a 100644
--- a/sdk/javascript/setup-sdk.mdx
+++ b/sdk/javascript/setup-sdk.mdx
@@ -1,6 +1,7 @@
---
title: "Setup"
sidebarTitle: "Setup"
+description: "Install, import, and initialize the CometChat JavaScript SDK in your web app."
---
+
| App State | Behavior |
@@ -96,6 +96,10 @@ CometChat.init(appID, appSetting).then(
In manual mode, the SDK will disconnect the WebSocket connection after 30 seconds if the app goes into the background. The connection remains alive for 30 seconds after backgrounding, but disconnects after that if no pings are received.
+
+
+
+
| App State | Behavior |
| --- | --- |
| App in foreground | Call `CometChat.connect()` to create the WebSocket connection |
diff --git a/sdk/react-native/overview.mdx b/sdk/react-native/overview.mdx
index 1ed3dcd15..bb6e25856 100644
--- a/sdk/react-native/overview.mdx
+++ b/sdk/react-native/overview.mdx
@@ -1,7 +1,7 @@
---
title: "React Native SDK"
sidebarTitle: "Overview"
-description: "Add real-time chat, voice, and video to your React Native application with the CometChat SDK."
+description: "Add real-time chat, voice, video, users, groups, messages, and push notifications to React Native apps with the CometChat SDK."
---
{/* TL;DR for Agents and Quick Reference */}
diff --git a/sdk/react-native/push-notification-html-stripping.mdx b/sdk/react-native/push-notification-html-stripping.mdx
index cad21d0eb..8e8ccdc6a 100644
--- a/sdk/react-native/push-notification-html-stripping.mdx
+++ b/sdk/react-native/push-notification-html-stripping.mdx
@@ -1,6 +1,6 @@
---
title: "Push Notification Content Customization"
-description: "Learn how to intercept and modify push notification content before display in React Native."
+description: "Customize CometChat React Native push notification content by stripping HTML tags before Android or iOS notifications display."
---
+
+
+Call **Get Logged In User** on the CometChat Subsystem. Returns an `FCometChatUser`.
+(bAutoEstablishSocketConnection = false)"] --> B["Login Async"] + B -->|"On Success"| C["User authenticated
(no WebSocket yet)"] + C --> D["Connect Async"] + D -->|"On Success"| E["WebSocket active
Real-time events flowing"] + E --> F["Disconnect Async"] + F -->|"On Success"| G["WebSocket closed
(still authenticated)"] + G --> D + + style A fill:#333,stroke:#666,color:#fff + style B fill:#444,stroke:#888,color:#fff + style C fill:#333,stroke:#666,color:#fff + style D fill:#444,stroke:#888,color:#fff + style E fill:#333,stroke:#666,color:#fff + style F fill:#444,stroke:#888,color:#fff + style G fill:#333,stroke:#666,color:#fff +``` + +
+
+
1. Get a reference to the **CometChat Subsystem**
2. Call the **Login Async** node
3. Wire the **On Success** and **On Failure** pins
@@ -138,6 +137,10 @@ flowchart LR
+
+
1. Get a reference to the **CometChat Subsystem**
2. Call the **Login With Auth Token Async** node
3. Wire the **On Success** and **On Failure** pins
@@ -192,7 +195,11 @@ Before performing operations, you can check whether a user is currently logged i
+
+
+Call the **Get Logged In User** node on the CometChat Subsystem. It returns an `FCometChatUser` — if the `Uid` is empty, no user is logged in.
+
+
Call the **Logout Async** node on the CometChat Subsystem. Wire the **On Success** and **On Failure** pins.
+
+
+1. Create an `FCometChatConversationsRequest` struct
+2. Set filters (conversation type, tags, unread only, etc.)
+3. Call the **Fetch Conversations Async** node
+4. On Success, iterate the returned `TArrayConversationWithUser.Name"] + B -->|"group"| D["Show group chat
ConversationWithGroup.Name"] + C --> E["Display LastMessage.Text
+ UnreadMessageCount badge"] + D --> E + + style A fill:#444,stroke:#888,color:#fff + style B fill:#333,stroke:#666,color:#fff + style C fill:#333,stroke:#666,color:#fff + style D fill:#333,stroke:#666,color:#fff + style E fill:#333,stroke:#666,color:#fff +``` + +
+
+
Call the **Join Group Async** node.
| Parameter | Type | Description |
@@ -124,6 +133,10 @@ Leave a group you're currently a member of.
+
+
Call the **Leave Group Async** node.
| Parameter | Type | Description |
@@ -159,6 +172,39 @@ void AMyActor::OnLeaveFailed(const FString& Error)
---
+## Fetch Groups
+
+Retrieve a list of groups with optional search and filters.
+
+
+
+
+Call the **Fetch Groups Async** node with an `FCometChatGroupsRequest` struct. Set `bJoinedOnly = true` to only fetch groups the user has joined, or leave it `false` to browse all available groups.
+
+
+
+1. Create an `FCometChatFlagDetail` struct with the `ReasonId` and optional `Remark`
+2. Call the **Flag Message Async** node with the message ID and flag detail
+3. Handle **On Success** (message flagged) or **On Failure** (error)
+or manual review"} + C -->|"Approved"| D["Approved ✓"] + C -->|"Flagged"| E["Pending Review"] + E -->|"Reviewer approves"| D + E -->|"Reviewer rejects"| F["Disapproved ✗"] + + style A fill:#333,stroke:#666,color:#fff + style B fill:#444,stroke:#888,color:#fff + style C fill:#555,stroke:#999,color:#ccc + style D fill:#333,stroke:#666,color:#fff + style E fill:#444,stroke:#888,color:#fff + style F fill:#333,stroke:#666,color:#fff +``` + +### ECometChatModerationStatus + +| Value | Description | +| ----- | ----------- | +| `Unmoderated` | Message has not been moderated | +| `Pending` | Message is pending moderation review | +| `Approved` | Message has been approved by moderation | +| `Disapproved` | Message has been rejected by moderation | + +### Real-Time Moderation Updates + +Listen to the `OnMessageModerated` delegate to receive real-time updates when a message's moderation status changes: + +
+
-| Payload | Type |
-| ------- | ---- |
-| `Presence` | `FCometChatPresence` |
+| Delegate | Payload | Fires When |
+| -------- | ------- | ---------- |
+| `OnUserOnline` | `FCometChatUser` | A user comes online |
+| `OnUserOffline` | `FCometChatUser` | A user goes offline |
+
+
Call the **Get Messages Async** node.
| Parameter | Type | Description |
@@ -90,6 +94,10 @@ Retrieve the message history for a group conversation, with pagination support.
+
+
Call the **Get Group Messages Async** node.
| Parameter | Type | Description |
diff --git a/sdk/unreal/reference.mdx b/sdk/unreal/reference.mdx
index 0533b3d7a..6906f30d1 100644
--- a/sdk/unreal/reference.mdx
+++ b/sdk/unreal/reference.mdx
@@ -14,7 +14,13 @@ These are called directly on `UCometChatSubsystem`.
| Method | Category | Parameters | Returns | Description |
| ------ | -------- | ---------- | ------- | ----------- |
| `Configure` | Config | `AppId: FString`, `Region: FString` | `void` | Initialize the SDK with your CometChat credentials. Must be called before Login. |
+| `ConfigureWithSettings` | Config | `AppId: FString`, `Settings: FCometChatAppSettings` | `void` | Initialize with advanced settings (custom hosts, subscription type, manual connection). |
| `IsLoggedIn` | Auth | — | `bool` | Returns `true` if a user is currently authenticated. |
+| `GetLoggedInUser` | Auth | — | `FCometChatUser` | Returns the currently logged-in user's profile. |
+| `GetConnectionStatus` | Connection | — | `ECometChatConnectionState` | Returns the current WebSocket connection state. |
+| `StartTyping` | Typing | `Indicator: FCometChatTypingIndicator` | `void` | Notify that the local user started typing. |
+| `EndTyping` | Typing | `Indicator: FCometChatTypingIndicator` | `void` | Notify that the local user stopped typing. |
+| `SendTransientMessage` | Messaging | `Message: FCometChatTransientMessage` | `void` | Send an ephemeral message that is not persisted. |
| `Shutdown` | Lifecycle | — | `void` | Tear down the SDK and release all resources. |
---
@@ -27,7 +33,8 @@ Each node is a latent Blueprint action with **On Success** and **On Failure** ou
| Node | Parameters | Success Output | Description |
| ---- | ---------- | -------------- | ----------- |
-| **Login Async** | `Uid: FString`, `AuthKey: FString` | — | Authenticate a user with CometChat. |
+| **Login Async** | `Uid: FString`, `AuthKey: FString` | — | Authenticate a user with Auth Key. |
+| **Login With Auth Token Async** | `AuthToken: FString` | — | Authenticate a user with a pre-generated Auth Token. |
| **Logout Async** | — | — | Log out the current user and disconnect. |
### Messaging
@@ -38,12 +45,14 @@ Each node is a latent Blueprint action with **On Success** and **On Failure** ou
| **Send Group Message Async** | `Guid: FString`, `Text: FString` | `FCometChatMessage` | Send a text message to a group. |
| **Get Messages Async** | `Uid: FString`, `Limit: int32` | `TArray
+
+
1. Get a reference to the **CometChat Subsystem**
2. Call the **Send Message Async** node
3. Wire the **On Success** and **On Failure** pins
@@ -78,6 +82,10 @@ Send a text message to a group by its GUID.
+
+
Call the **Send Group Message Async** node.
| Parameter | Type | Description |
diff --git a/sdk/unreal/setup.mdx b/sdk/unreal/setup.mdx
index bb9e774ec..604432e83 100644
--- a/sdk/unreal/setup.mdx
+++ b/sdk/unreal/setup.mdx
@@ -26,8 +26,8 @@ description: "Install the CometChat plugin in your Unreal Engine project."
| Engine Version | Platforms |
| -------------- | --------- |
-| UE 5.5.4 | Mac, Windows |
-| UE 5.7.2 | Mac |
+| UE 5.5.4 | Mac, Windows, iOS, Android |
+| UE 5.7.2+ | Mac, Windows, iOS, Android |
---
@@ -44,14 +44,14 @@ Copy `Plugins/CometChatSdk/` from the [SDK repository](https://github.com/cometc
Download the precompiled binaries for your engine version:
+
+
Call the **Get User Async** node.
| Parameter | Type | Description |
diff --git a/ui-kit/android/android-conversation.mdx b/ui-kit/android/android-conversation.mdx
index 791267aff..d9bfbc767 100644
--- a/ui-kit/android/android-conversation.mdx
+++ b/ui-kit/android/android-conversation.mdx
@@ -1,7 +1,7 @@
---
title: "Building A Conversation List + Message View"
sidebarTitle: "Conversation List + Message View"
-description: "Build a conversation list with a full-screen message view using a sequential navigation pattern."
+description: "Build CometChat Android UI Kit conversation list and message view layouts with navigation, headers, message lists, and composers."
---
+
+
+## Core Concepts
+
+- **`CometChatAIAssistantChatHistory`**: The main component class that renders the AI assistant chat history list. It is a Composite Component that can be launched via button clicks or any user-triggered action.
+- **Actions**: Callbacks such as `setOnItemClickListener`, `setOnItemLongClickListener`, `setOnNewChatClickListener`, and `setOnCloseClickListener` that let you respond to user interactions.
+- **Style**: XML theme styles applied via `setStyle()` to customize colors, fonts, and visual appearance of the chat history.
+- **Functionality**: Methods like `setUser`, `setErrorStateVisibility`, and `setEmptyStateVisibility` that configure the component's behavior and state visibility.
+
+## Actions and Events
+
+### Callback Methods
+
+What you're changing: How the component responds to user interactions such as taps, long-presses, new chat clicks, and close clicks.
+
+- **Where**: Activity or Fragment where you hold a reference to `CometChatAIAssistantChatHistory`.
+- **Applies to**: `CometChatAIAssistantChatHistory`.
+- **Default behavior**: Predefined actions execute automatically when the user interacts with the component.
+- **Override**: Call the corresponding setter method to replace the default behavior with your own logic.
+
+#### `setOnItemClickListener`
+
+Function invoked when a chat history item is clicked, used to open an AI assistant chat screen.
+
+
+
+
+- **Code**:
+
+```xml themes.xml lines
+
+
+
+```
+
+> **What this does:** Defines a custom style `CustomAIAssistantChatHistoryStyle` that sets the background color to `#FFFAF6` for the component, header, new chat area, date separator, and items. It applies a Times New Roman font to the header, new chat text, date separator, and item text. A helper style `textStyleTimesNewRoman` defines the font family.
+
+
+
+
+What you're changing: search background and typography styles.
+
+- **Where to change it**: `res/values/themes.xml`
+
+- **Applies to**: `CometChatSearch`
+
+- **Default behavior**: UI Kit default search colors and text appearance.
+
+- **Override**: set `cometchatSearchStyle` in `AppTheme`.
+
+- **Code**:
+```xml res/values/themes.xml lines
+
+
+
+What you're changing: message information styling for metadata views.
+
+- **Where to change it**: `res/values/themes.xml`
+
+- **Applies to**: `CometChatMessageInformation`
+
+- **Default behavior**: UI Kit default metadata styling.
+
+- **Override**: set `cometchatMessageInformationStyle` in `AppTheme`.
+
+- **Code**:
+```xml res/values/themes.xml lines
+
+
+
+What you're changing: option sheet background and icon tint.
+
+- **Where to change it**: `res/values/themes.xml`
+
+- **Applies to**: `CometChatMessageOptionSheet`
+
+- **Default behavior**: UI Kit default option sheet styling.
+
+- **Override**: set `cometchatPopupMenuStyle` in `AppTheme`.
+
+- **Code**:
+```xml res/values/themes.xml lines
+
+
+
+What you're changing: attachment option sheet background and icon tint.
+
+- **Where to change it**: `res/values/themes.xml`
+
+- **Applies to**: `CometChatAttachmentOptionSheet`
+
+- **Default behavior**: UI Kit default attachment sheet styling.
+
+- **Override**: set `cometchatAttachmentOptionSheetStyle` in `AppTheme`.
+
+- **Code**:
+```xml res/values/themes.xml lines
+
+
+
+What you're changing: button background, stroke, and icon tint.
+
+- **Where to change it**: `res/values/themes.xml`
+
+- **Applies to**: `CometChatCallButtons`
+
+- **Default behavior**: UI Kit default call button styling.
+
+- **Override**: set `cometchatCallButtonsStyle` in `AppTheme`.
+
+- **Code**:
+```xml res/values/themes.xml lines
+
+
+
+What you're changing: background, header, and list typography.
+
+- **Where to change it**: `res/values/themes.xml`
+
+- **Applies to**: `CometChatAIAssistantChatHistory`
+
+- **Default behavior**: UI Kit default AI history styling.
+
+- **Override**: set `cometChatAIAssistantChatHistoryStyle` in `AppTheme`.
+
+- **Code**:
+```xml res/values/themes.xml lines
+
+
+
+What you're changing: AI option sheet background and icon tint.
+
+- **Where to change it**: `res/values/themes.xml`
+
+- **Applies to**: `CometChatAIOptionSheet`
+
+- **Default behavior**: UI Kit default AI option sheet styling.
+
+- **Override**: set `cometchatAIOptionSheetStyle` in `AppTheme`.
+
+- **Code**:
+```xml res/values/themes.xml lines
+
+
+
+What you're changing: conversation starter item backgrounds.
+
+- **Where to change it**: `res/values/themes.xml`
+
+- **Applies to**: `CometChatConversationStarter`
+
+- **Default behavior**: UI Kit default conversation starter styling.
+
+- **Override**: set `cometchatAIConversationStarterStyle` in `AppTheme`.
+
+- **Code**:
+```xml res/values/themes.xml lines
+
+
+
+What you're changing: conversation summary background color.
+
+- **Where to change it**: `res/values/themes.xml`
+
+- **Applies to**: `CometChatConversationSummary`
+
+- **Default behavior**: UI Kit default conversation summary styling.
+
+- **Override**: set `cometchatAIConversationSummaryStyle` in `AppTheme`.
+
+- **Code**:
+```xml res/values/themes.xml lines
+
+
+
+What you're changing: smart reply background, item color, and stroke.
+
+- **Where to change it**: `res/values/themes.xml`
+
+- **Applies to**: `CometChatSmartReplies`
+
+- **Default behavior**: UI Kit default smart replies styling.
+
+- **Override**: set `cometchatAISmartRepliesStyle` in `AppTheme`.
+
+- **Code**:
+```xml res/values/themes.xml lines
+
+
+
+What you're changing: date text color.
+
+- **Where to change it**: `res/values/themes.xml`
+
+- **Applies to**: `CometChatDate`
+
+- **Default behavior**: UI Kit default date styling.
+
+- **Override**: set `cometchatDateStyle` in `AppTheme`.
+
+- **Code**:
+```xml res/values/themes.xml lines
+
+
+
+What you're changing: read receipt icon drawable.
+
+- **Where to change it**: `res/drawable/read_receipts.xml` and `res/values/themes.xml`
+
+- **Applies to**: `CometChatReceipts`
+
+- **Default behavior**: UI Kit default receipt icons.
+
+- **Override**: set `cometchatMessageReceiptStyle` in `AppTheme` and reference a custom drawable.
+
+- **Code**:
+```xml res/drawable/read_receipts.xml lines
+
+
+
+What you're changing: recorder icon sizes and recording button background color.
+
+- **Where to change it**: `res/values/themes.xml`
+
+- **Applies to**: `CometChatMediaRecorder`
+
+- **Default behavior**: UI Kit default media recorder styling.
+
+- **Override**: set `cometchatMediaRecorderStyle` in `AppTheme`.
+
+- **Code**:
+```xml res/values/themes.xml lines
+
+
+
+What you're changing: sticker keyboard background color.
+
+- **Where to change it**: `res/values/themes.xml`
+
+- **Applies to**: `CometChatStickerKeyboard`
+
+- **Default behavior**: UI Kit default sticker keyboard styling.
+
+- **Override**: set `cometchatStickerKeyboardStyle` in `AppTheme`.
+
+- **Code**:
+```xml res/values/themes.xml lines
+
+
+
+| Component | Role |
+| --- | --- |
+| [CometChatMessageComposer](/ui-kit/android/v6/message-composer) | Provides a built-in rich text editor with formatting toolbar and text selection menu items for bold, italic, strikethrough, code, links, lists, blockquotes, and code blocks. |
+| [CometChatMessageList](/ui-kit/android/v6/message-list) | Renders formatted messages with the appropriate styling automatically applied, ensuring that rich text formatting is displayed exactly as intended by the sender. |
## Threaded Conversations
Respond directly to a specific message, keeping conversations organized.
@@ -196,6 +209,21 @@ Learn more about flagged messages in the [Flagged Messages](/moderation/flagged-
| --- | --- |
| [CometChatMessageList](/ui-kit/android/v6/message-list) | Provides the "Report Message" option in message actions. |
+## Conversation and Advanced Search
+
+Conversation and Advanced Search enables users to quickly find conversations, messages, and media across chats in real time. It supports filters, scopes, and custom actions, allowing users to locate content efficiently while keeping the chat experience smooth and intuitive.
+
+
+ 
+
+
+| Component | Role |
+| --- | --- |
+| [CometChatSearch](/ui-kit/android/v6/search) | Allows users to search across conversations and messages in real time. Users can click on a result to open the conversation or jump directly to a specific message. |
+| [CometChatMessageHeader](/ui-kit/android/v6/message-header) | Shows the search button in the chat header, allowing users to search within a conversation. |
+| [CometChatMessageList](/ui-kit/android/v6/message-list) | Shows the selected message when clicked from search results and highlights it in the message list. |
+| [CometChatConversations](/ui-kit/android/v6/conversations) | Displays the search input. |
+
---
## Next Steps
diff --git a/ui-kit/android/v6/getting-started-jetpack.mdx b/ui-kit/android/v6/getting-started-jetpack.mdx
index 0c28eb164..d43964e57 100644
--- a/ui-kit/android/v6/getting-started-jetpack.mdx
+++ b/ui-kit/android/v6/getting-started-jetpack.mdx
@@ -98,10 +98,10 @@ android {
dependencies {
// CometChat Jetpack Compose UI Kit
- implementation("com.cometchat:chatuikit-compose-android:6.0.0-beta.1")
+ implementation("com.cometchat:chatuikit-compose-android:6.0.0")
// (Optional) Voice/video calling
- implementation("com.cometchat:calls-sdk-android:latest")
+ implementation("com.cometchat:calls-sdk-android:5.0.0-beta.2")
}
```
diff --git a/ui-kit/android/v6/getting-started-kotlin.mdx b/ui-kit/android/v6/getting-started-kotlin.mdx
index 2170d4953..7a4988449 100644
--- a/ui-kit/android/v6/getting-started-kotlin.mdx
+++ b/ui-kit/android/v6/getting-started-kotlin.mdx
@@ -93,10 +93,10 @@ android {
dependencies {
// CometChat Kotlin UI Kit
- implementation("com.cometchat:chatuikit-kotlin-android:6.0.0-beta.1")
+ implementation("com.cometchat:chatuikit-kotlin-android:6.0.0")
// (Optional) Voice/video calling
- implementation("com.cometchat:calls-sdk-android:latest")
+ implementation("com.cometchat:calls-sdk-android:5.0.0-beta.2")
}
```
diff --git a/ui-kit/android/v6/getting-started.mdx b/ui-kit/android/v6/getting-started.mdx
index e44f68347..3ee397a3f 100644
--- a/ui-kit/android/v6/getting-started.mdx
+++ b/ui-kit/android/v6/getting-started.mdx
@@ -88,8 +88,8 @@ Inside `libs.versions.toml`, add the versions:
```toml libs.versions.toml
[versions]
-cometchat-ui-kit = "6.0.0-beta.1"
-cometchat-calls-sdk = "4.3.3"
+cometchat-ui-kit = "6.0.0"
+cometchat-calls-sdk = "5.0.0-beta.2"
```
Define the libraries — pick the module for your UI toolkit:
@@ -132,10 +132,10 @@ Open the app-level `build.gradle.kts` file and add the dependency for your chose
+
+
+## Prerequisites
+
+- Android Studio project with `com.cometchat:chatuikit-kotlin-android` or `com.cometchat:chatuikit-compose-android` in `build.gradle`.
+- Internet permission in `AndroidManifest.xml`.
+- Valid CometChat **App ID**, **Region**, and **Auth Key** configured via `UIKitSettings`.
+- User logged in with `CometChatUIKit.login()`.
+- AI Agent configured in your CometChat dashboard.
+
+## Components
+
+| Component / Class | Role |
+|:----------------------------------|:-----|
+| `AIAssistantChatActivity` | Main activity for AI agent chat. |
+| `CometChatAIAssistantChatHistory` | Displays previous AI conversation history. |
+| `CometChatMessageList` | Shows AI messages with threading support. |
+| `CometChatMessageComposer` | Input interface for AI conversations. |
+| `CometChatMessageHeader` | Header with AI agent info and controls. |
+
+## Integration Steps
+
+### Step 1 — Activity / Screen Setup
+
+Create the AI Assistant chat screen with proper layout configuration.
+
+
+
+
+Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()`, a user logged in, and the `cometchat-chat-uikit-android` dependency added.
+
+To add programmatically in an Activity:
+
+
+
+
+### Other Message Item Views
+
+The following message item view methods follow the same `MessagesSearchViewHolderListener` pattern as `setTextMessageItemView`:
+
+| Method | Message Type | Generic Type |
+| --- | --- | --- |
+| `setImageMessageItemView` | Image Message | `MessagesSearchViewHolderListener
+
+
+```xml themes.xml lines
+
+
+
+```
+
+> **What this does:** Defines a custom search style that sets a light purple background color (`#EDEAFA`) for the search component, conversation items, and message items, and applies a Times New Roman font to all text elements including filter chips, section headers, conversation titles/subtitles, message titles/subtitles, timestamps, "see more" text, and the search bar.
+
+
-
+
-
+```html
+
+ 
-## Conversation Summary
+---
-The Conversation Summary feature provides concise summaries of long conversations, allowing users to catch up quickly on missed chats. This feature uses natural language processing to determine the main points in a conversation.
+### Smart Replies
-For a comprehensive understanding and guide on implementing and using the Conversation Summary, refer to our specific guide on the [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary).
+AI-generated response suggestions based on the last received message. Users can tap a suggestion to send it instantly.
-Once you have successfully activated the [Smart Replies](/fundamentals/ai-user-copilot/smart-replies) from your CometChat Dashboard, the feature will automatically be incorporated into the Action sheet of [MessageComposer](/ui-kit/angular/message-composer) Component of UI Kits.
+Enable it on `cometchat-message-list`:
-
- 
-
+```html
+
+
+
+---
-Once you have successfully activated the [AI Assist Bot](http://localhost:3000/docs-beta/ai/bots) from your CometChat Dashboard, the feature will automatically be incorporated into the Action sheet of [MessageComposer](/ui-kit/angular/message-composer) Component of UI Kits.
+### Conversation Summary
+
+AI-generated recap of long conversations. Useful for catching up on missed messages without scrolling through the entire thread.
+
+Enable it on `cometchat-message-header`:
+
+```html
+
+
+ 
+
+---
+
+## Next Steps
+
+
@@ -143,7 +143,7 @@ How it works:
@@ -180,16 +180,16 @@ You should see the chat window load with the conversation for the UID you set.
## Next Steps
@@ -218,16 +218,16 @@ You should see the tab bar at the top of the sidebar. Switch between Chats, Call
## Next Steps
Searching...
} + @case (States.empty) {No conversations found
} + @case (States.loaded) { + @for (conv of service.conversations(); track conv.getConversationId()) { +{{ conv.getConversationWith().getName() }}
+ }
+ }
+ }
+ `
+})
+export class CustomSearchComponent {
+ readonly service = inject(SearchConversationsService);
+ readonly States = States;
+
+ search(keyword: string): void {
+ this.service.search(keyword, [CometChatSearchFilter.Unread]);
+ }
+}
+```
diff --git a/ui-kit/angular/api-reference/search-messages-service.mdx b/ui-kit/angular/api-reference/search-messages-service.mdx
new file mode 100644
index 000000000..e87577f10
--- /dev/null
+++ b/ui-kit/angular/api-reference/search-messages-service.mdx
@@ -0,0 +1,131 @@
+---
+title: Search Messages Service
+description: Signal-based service for message search state, SDK queries, attachment-type filtering, and pagination.
+---
+
+The `SearchMessagesService` manages message search state using Angular signals. It handles SDK query building with keyword, attachment-type, and user/group scoping, plus pagination for loading more results.
+
+## Import
+
+```typescript
+import { SearchMessagesService } from '@cometchat/chat-uikit-angular';
+```
+
+## Signals (Reactive State)
+
+| Signal | Type | Default | Description |
+|--------|------|---------|-------------|
+| `messages` | `WritableSignal{{ msg.getSender()?.getName() }}: {{ msg.getType() }}
+ }
+ @if (service.hasMoreResults()) {
+
+ }
+ }
+ `
+})
+export class MessageSearchComponent {
+ readonly service = inject(SearchMessagesService);
+ readonly States = States;
+
+ searchPhotos(keyword: string): void {
+ this.service.search(keyword, [CometChatSearchFilter.Photos]);
+ }
+
+ searchInGroup(keyword: string, guid: string): void {
+ this.service.search(keyword, [], undefined, guid);
+ }
+}
+```
+
+## Differences from SearchConversationsService
+
+| Aspect | SearchConversationsService | SearchMessagesService |
+|--------|--------------------------|---------------------|
+| Real-time listeners | Yes (message, user, group, call, typing, receipt) | No |
+| Scoping | Keyword + filters only | Keyword + filters + uid/guid |
+| Attachment filtering | N/A | Photos, Videos, Documents, Audio, Links |
+| Typing indicators | Yes (`typingIndicatorMap` signal) | No |
+| Preview mode | 3 results when no filters | 3 results when `alwaysShowSeeMore` is true |
diff --git a/ui-kit/angular/v5/api-reference/templates-service.mdx b/ui-kit/angular/api-reference/templates-service.mdx
similarity index 100%
rename from ui-kit/angular/v5/api-reference/templates-service.mdx
rename to ui-kit/angular/api-reference/templates-service.mdx
diff --git a/ui-kit/angular/call-features.mdx b/ui-kit/angular/call-features.mdx
index 4c2cfe4e5..3e8ff40a6 100644
--- a/ui-kit/angular/call-features.mdx
+++ b/ui-kit/angular/call-features.mdx
@@ -1,66 +1,109 @@
---
-title: "Call"
-description: "Call — CometChat documentation."
+title: "Call Features"
+description: "Add CometChat Angular UI Kit call features for voice and video calls, call logs, ongoing calls, incoming calls, and call buttons."
---
## Overview
-CometChat's Calls feature is an advanced functionality that allows you to seamlessly integrate one-on-one as well as group audio and video calling capabilities into your application. This document provides a technical overview of these features, as implemented in the Angular UI Kit.
+CometChat Calls integrates 1:1 and group audio/video calling into the Angular UIKit. Install the Calls SDK and the UIKit auto-detects it, enabling call components.
+
+
-
+When enabled, [cometchat-call-buttons](/ui-kit/angular/components/cometchat-call-buttons) renders in [cometchat-message-header](/ui-kit/angular/components/cometchat-message-header) and the trailing call button appears in [cometchat-call-logs](/ui-kit/angular/components/cometchat-call-logs).
-## Features
+### Custom Call App Settings
-### Incoming Call
+By default the UIKit builds `CallAppSettings` from your `appId` and `region`. If you need custom configuration (e.g. a different region for the Calls SDK or additional settings), pass your own `CallAppSettings`:
-The [Incoming Call](/ui-kit/angular/incoming-call) component of the CometChat UI Kit provides the functionality that lets users receive real-time audio and video calls in the app.
+```typescript
+import { CometChatUIKitCalls } from '@cometchat/calls-sdk-javascript';
-When a call is made to a user, the Incoming Call component triggers and displays a call screen. This call screen typically displays the caller information and provides the user with options to either accept or reject the incoming call.
+const callAppSettings = new CometChatUIKitCalls.CallAppSettingsBuilder()
+ .setAppId('APP_ID')
+ .setRegion('REGION')
+ .build();
+
+const settings = new UIKitSettingsBuilder()
+ .setAppId('APP_ID')
+ .setRegion('REGION')
+ .setAuthKey('AUTH_KEY')
+ .setCallingEnabled(true)
+ .setCallAppSettings(callAppSettings)
+ .build();
+```
+
+
+ 
-### Outgoing Call
+## Features
-The [Outgoing Call](/ui-kit/angular/outgoing-call) component of the CometChat UI Kit is designed to manage the outgoing call process within your application. When a user initiates an audio or video call to another user or group, this component displays an outgoing call screen, showcasing information about the recipient and the call status.
+### Incoming Call
-Importantly, the Outgoing Call component is smartly designed to transition automatically into the ongoing call screen once the receiver accepts the call. This ensures a smooth flow from initiating the call to engaging in a conversation, without any additional steps required from the user.
+The [cometchat-incoming-call](/ui-kit/angular/components/cometchat-incoming-call) component displays a call screen when a call is received, showing caller info with accept/reject options.
- 
+ 
-### Ongoing Call
-
-The [OngoingCall](/ui-kit/angular/ongoing-call) component is the user interface that displays during an ongoing call. For an audio call, this screen displays the participant's name, call duration, and buttons to mute the audio, enable or disable video, switch the camera, and end the call.
+### Outgoing Call
-For a video call, the Call Screen might additionally display the video footage from both the user's camera and the recipient's camera.
+The [cometchat-outgoing-call](/ui-kit/angular/components/cometchat-outgoing-call) component displays an outgoing call screen with recipient info and call status. Transitions to the ongoing call screen when the receiver accepts.
- 
+ 
### Call Logs
-[Call Logs](/ui-kit/angular/call-logs) component provides you with the records call events such as who called who, the time of the call, and the duration of the call. This information can be fetched from the CometChat server and displayed in a structured format for users to view their past call activities.
+The [cometchat-call-logs](/ui-kit/angular/components/cometchat-call-logs) component displays call history — caller, time, and duration.
- 
+ 
+
+## Next Steps
+
+
+
+ Hi, I'm {{ user.getName() }}
+Ask me anything about your account or our products.
+` – `` |
+| `**bold**` | `` |
+| `_italic_` | `` |
+| `~~strikethrough~~` | `` |
+| `` `inline code` `` | `` |
+| ` ```lang\ncode\n``` ` | `` |
+| `> blockquote` | `` |
+| `1. item` | `- ` |
+| `- item` or `* item` | `
- ` |
+| Nested lists (up to 3 levels) | Nested `
` / `` |
+| `[text](url)` | `` |
+| `` | Clickable `![]()
` |
+| `---` | `
` |
+| Two trailing spaces or `\n\n` | `
` / paragraph |
+| GFM tables `\| col \| col \|` | `` |
+
+## Basic Usage
+
+```typescript
+import { Component } from '@angular/core';
+import { CometChatMarkdownRenderer } from '@cometchat/chat-uikit-angular';
+
+@Component({
+ selector: 'app-markdown-demo',
+ standalone: true,
+ imports: [CometChatMarkdownRenderer],
+ template: `
+ ();
+
+ private parser = new MyMarkdownParser();
+ private sanitizer = inject(DomSanitizer);
+
+ html = computed(() => {
+ const nodes = this.parser.parse(this.text());
+ // Walk nodes and produce HTML string, then sanitize
+ const raw = nodesToHtml(nodes); // your own walker
+ return this.sanitizer.bypassSecurityTrustHtml(raw);
+ });
+}
+```
+
+## BEM Class Reference
+
+All rendered elements carry BEM class names prefixed with `cometchat-markdown-renderer`. Use these to apply custom styles:
+
+| Element | Class |
+|---------|-------|
+| Headings | `cometchat-markdown-renderer__heading`, `cometchat-markdown-renderer__heading--1` … `--6` |
+| Paragraph | `cometchat-markdown-renderer__paragraph` |
+| Bold | `cometchat-markdown-renderer__bold` |
+| Italic | `cometchat-markdown-renderer__italic` |
+| Strikethrough | `cometchat-markdown-renderer__strikethrough` |
+| Inline code | `cometchat-markdown-renderer__inline-code` |
+| Code block wrapper | `cometchat-markdown-renderer__code-block` |
+| Copy button | `cometchat-markdown-renderer__code-copy-btn` |
+| Blockquote | `cometchat-markdown-renderer__blockquote` |
+| Ordered list | `cometchat-markdown-renderer__ordered-list` |
+| Unordered list | `cometchat-markdown-renderer__unordered-list` |
+| List item | `cometchat-markdown-renderer__list-item` |
+| Link | `cometchat-markdown-renderer__link` |
+| Image | `cometchat-markdown-renderer__image` |
+| Horizontal rule | `cometchat-markdown-renderer__hr` |
+| Table | `cometchat-markdown-renderer__table` |
+| Table head | `cometchat-markdown-renderer__table-head` |
+| Table header cell | `cometchat-markdown-renderer__table-header-cell` |
+| Table body | `cometchat-markdown-renderer__table-body` |
+| Table row | `cometchat-markdown-renderer__table-row` |
+| Table cell | `cometchat-markdown-renderer__table-cell` |
+
+### Example: Custom Code Block Styling
+
+```css
+cometchat-markdown-renderer .cometchat-markdown-renderer__code-block {
+ background: var(--cometchat-background-color-03);
+ border-radius: var(--cometchat-radius-2);
+ padding: var(--cometchat-spacing-3);
+ position: relative;
+}
+
+cometchat-markdown-renderer .cometchat-markdown-renderer__code-copy-btn {
+ position: absolute;
+ top: var(--cometchat-spacing-2);
+ right: var(--cometchat-spacing-2);
+ background: var(--cometchat-primary-color);
+ color: #fff;
+ border: none;
+ border-radius: var(--cometchat-radius-1);
+ padding: 2px 8px;
+ cursor: pointer;
+ font-size: 12px;
+}
+```
+
+## Localization Keys
+
+| Key | Default (en-us) |
+|-----|-----------------|
+| `ai_assistant_chat_code_copied` | "Copied!" |
+
+Override via `CometChatLocalize.updateKeys()`:
+
+```typescript
+import { CometChatLocalize } from '@cometchat/chat-uikit-angular';
+
+CometChatLocalize.updateKeys('en', {
+ ai_assistant_chat_code_copied: 'Copied to clipboard!',
+});
+```
diff --git a/ui-kit/angular/v5/components/cometchat-message-bubble.mdx b/ui-kit/angular/components/cometchat-message-bubble.mdx
similarity index 98%
rename from ui-kit/angular/v5/components/cometchat-message-bubble.mdx
rename to ui-kit/angular/components/cometchat-message-bubble.mdx
index a058e3c63..34f662d9d 100644
--- a/ui-kit/angular/v5/components/cometchat-message-bubble.mdx
+++ b/ui-kit/angular/components/cometchat-message-bubble.mdx
@@ -1297,7 +1297,7 @@ export class ThreadPanelComponent implements AfterViewInit {
}
```
-See [CometChatMessageList — Multiple Message Lists with Different Configurations](/ui-kit/angular/v5/components/cometchat-message-list#multiple-message-lists-with-different-configurations) for a complete example.
+See [CometChatMessageList — Multiple Message Lists with Different Configurations](/ui-kit/angular/components/cometchat-message-list#multiple-message-lists-with-different-configurations) for a complete example.
### BubblePart Type
@@ -1581,11 +1581,11 @@ The component provides meaningful announcements for:
## Related Components
-- [CometChatMessageList](/ui-kit/angular/v5/components/cometchat-message-list) - Parent component that renders message bubbles
-- [CometChatTextBubble](/ui-kit/angular/v5/components/cometchat-text-bubble) - Text message content component
-- [CometChatImageBubble](/ui-kit/angular/v5/components/cometchat-image-bubble) - Image message content component
-- [CometChatVideoBubble](/ui-kit/angular/v5/components/cometchat-video-bubble) - Video message content component
-- [CometChatAudioBubble](/ui-kit/angular/v5/components/cometchat-audio-bubble) - Audio message content component
-- [CometChatFileBubble](/ui-kit/angular/v5/components/cometchat-file-bubble) - File message content component
-- [CometChatMessagePreview](/ui-kit/angular/v5/components/cometchat-message-list) - Reply preview component
-- [CometChatThreadHeader](/ui-kit/angular/v5/components/cometchat-thread-header) - Thread header component
+- [CometChatMessageList](/ui-kit/angular/components/cometchat-message-list) - Parent component that renders message bubbles
+- [CometChatTextBubble](/ui-kit/angular/components/cometchat-text-bubble) - Text message content component
+- [CometChatImageBubble](/ui-kit/angular/components/cometchat-image-bubble) - Image message content component
+- [CometChatVideoBubble](/ui-kit/angular/components/cometchat-video-bubble) - Video message content component
+- [CometChatAudioBubble](/ui-kit/angular/components/cometchat-audio-bubble) - Audio message content component
+- [CometChatFileBubble](/ui-kit/angular/components/cometchat-file-bubble) - File message content component
+- [CometChatMessagePreview](/ui-kit/angular/components/cometchat-message-list) - Reply preview component
+- [CometChatThreadHeader](/ui-kit/angular/components/cometchat-thread-header) - Thread header component
diff --git a/ui-kit/angular/v5/components/cometchat-message-composer.mdx b/ui-kit/angular/components/cometchat-message-composer.mdx
similarity index 99%
rename from ui-kit/angular/v5/components/cometchat-message-composer.mdx
rename to ui-kit/angular/components/cometchat-message-composer.mdx
index 37acf10ef..bd2c4197b 100644
--- a/ui-kit/angular/v5/components/cometchat-message-composer.mdx
+++ b/ui-kit/angular/components/cometchat-message-composer.mdx
@@ -1295,7 +1295,7 @@ export class ErrorHandlingComponent {
```
-For troubleshooting tips, see the [Troubleshooting Guide](/ui-kit/angular/v5/troubleshooting#cometchatmessagecomposer).
+For troubleshooting tips, see the [Troubleshooting Guide](/ui-kit/angular/troubleshooting#cometchatmessagecomposer).
### Troubleshooting
@@ -1331,4 +1331,4 @@ import { EnterKeyBehavior } from '@cometchat/chat-uikit-angular';
- [CometChatMessageList](./cometchat-message-list.mdx) - Display messages in a conversation
- [CometChatConversations](./cometchat-conversations.mdx) - List of conversations
- [RichTextEditorService API](../api-reference/rich-text-editor-service.mdx) - Rich text editor service documentation
-- [Rich Text Formatting Guide](/ui-kit/angular/v5/guides/custom-text-formatter) - Comprehensive guide to rich text features
+- [Rich Text Formatting Guide](/ui-kit/angular/guides/custom-text-formatter) - Comprehensive guide to rich text features
diff --git a/ui-kit/angular/v5/components/cometchat-message-header.mdx b/ui-kit/angular/components/cometchat-message-header.mdx
similarity index 99%
rename from ui-kit/angular/v5/components/cometchat-message-header.mdx
rename to ui-kit/angular/components/cometchat-message-header.mdx
index ddc97fc9a..609d5bff2 100644
--- a/ui-kit/angular/v5/components/cometchat-message-header.mdx
+++ b/ui-kit/angular/components/cometchat-message-header.mdx
@@ -138,7 +138,7 @@ export class GroupChatComponent {
| `hideVideoCallButton` | `boolean` | `true` | Hide the video call button. Defaults to `true` (hidden). When calling is enabled via `UIKitSettingsBuilder.setCallingEnabled(true)`, the resolved default becomes `false` (visible). Set to `true` explicitly to hide even when calling is enabled. |
| `showSearchOption` | `boolean` | `false` | Show the search option in the header |
| `showConversationSummaryButton` | `boolean` | `false` | Show the AI conversation summary button |
-| `callSettingsBuilder` | `CallSettingsBuilder` | `undefined` | Custom `CallSettingsBuilder` forwarded to the call buttons and ongoing call screen. Follows the three-tier priority: @Input > [GlobalConfig](/ui-kit/angular/v5/customization/global-config) > default. |
+| `callSettingsBuilder` | `CallSettingsBuilder` | `undefined` | Custom `CallSettingsBuilder` forwarded to the call buttons and ongoing call screen. Follows the three-tier priority: @Input > [GlobalConfig](/ui-kit/angular/customization/global-config) > default. |
### AI Configuration Properties
@@ -363,7 +363,7 @@ export class CustomCallHeaderComponent implements OnInit {
```
- You can also set `callSettingsBuilder` globally via [GlobalConfig](/ui-kit/angular/v5/customization/global-config) so all call components use the same settings without passing the input to each one.
+ You can also set `callSettingsBuilder` globally via [GlobalConfig](/ui-kit/angular/customization/global-config) so all call components use the same settings without passing the input to each one.
### Custom Last Active Date Format
@@ -864,7 +864,7 @@ handleError(error: CometChat.CometChatException): void {
```
-For troubleshooting tips, see the [Troubleshooting Guide](/ui-kit/angular/v5/troubleshooting#cometchatmessageheader).
+For troubleshooting tips, see the [Troubleshooting Guide](/ui-kit/angular/troubleshooting#cometchatmessageheader).
diff --git a/ui-kit/angular/v5/components/cometchat-message-information.mdx b/ui-kit/angular/components/cometchat-message-information.mdx
similarity index 93%
rename from ui-kit/angular/v5/components/cometchat-message-information.mdx
rename to ui-kit/angular/components/cometchat-message-information.mdx
index 210276b86..e95952cc4 100644
--- a/ui-kit/angular/v5/components/cometchat-message-information.mdx
+++ b/ui-kit/angular/components/cometchat-message-information.mdx
@@ -193,7 +193,7 @@ The component activates a focus trap on initialization, keeping keyboard focus w
## Related Components
-- [CometChatMessageList](/ui-kit/angular/v5/components/cometchat-message-list) - Parent component that opens the message information panel
-- [CometChatMessageBubble](/ui-kit/angular/v5/components/cometchat-message-bubble) - Used internally to render the message preview
-- [CometChatAvatar](/ui-kit/angular/v5/components/cometchat-users) - Used to display user avatars in receipt items
-- [CometChatDate](/ui-kit/angular/v5/components/cometchat-message-list) - Used to format receipt timestamps
+- [CometChatMessageList](/ui-kit/angular/components/cometchat-message-list) - Parent component that opens the message information panel
+- [CometChatMessageBubble](/ui-kit/angular/components/cometchat-message-bubble) - Used internally to render the message preview
+- [CometChatAvatar](/ui-kit/angular/components/cometchat-users) - Used to display user avatars in receipt items
+- [CometChatDate](/ui-kit/angular/components/cometchat-message-list) - Used to format receipt timestamps
diff --git a/ui-kit/angular/v5/components/cometchat-message-list.mdx b/ui-kit/angular/components/cometchat-message-list.mdx
similarity index 99%
rename from ui-kit/angular/v5/components/cometchat-message-list.mdx
rename to ui-kit/angular/components/cometchat-message-list.mdx
index ca42f0872..262b6c0dd 100644
--- a/ui-kit/angular/v5/components/cometchat-message-list.mdx
+++ b/ui-kit/angular/components/cometchat-message-list.mdx
@@ -4545,7 +4545,7 @@ Avoid premature optimization. Focus on the most impactful optimizations first (p
-For troubleshooting tips, see the [Troubleshooting Guide](/ui-kit/angular/v5/troubleshooting#cometchatmessagelist).
+For troubleshooting tips, see the [Troubleshooting Guide](/ui-kit/angular/troubleshooting#cometchatmessagelist).
diff --git a/ui-kit/angular/v5/components/cometchat-outgoing-call.mdx b/ui-kit/angular/components/cometchat-outgoing-call.mdx
similarity index 97%
rename from ui-kit/angular/v5/components/cometchat-outgoing-call.mdx
rename to ui-kit/angular/components/cometchat-outgoing-call.mdx
index 23c600902..73510c3b6 100644
--- a/ui-kit/angular/v5/components/cometchat-outgoing-call.mdx
+++ b/ui-kit/angular/components/cometchat-outgoing-call.mdx
@@ -138,5 +138,5 @@ cometchat-outgoing-call {
## Related Components
- [CometChatCallButtons](./cometchat-call-buttons.mdx) — Parent component that triggers the outgoing call overlay
-- [CometChatOngoingCall](/ui-kit/angular/v5/components/cometchat-outgoing-call) — Displayed after the call is accepted
+- [CometChatOngoingCall](/ui-kit/angular/components/cometchat-outgoing-call) — Displayed after the call is accepted
- [CometChatIncomingCall](./cometchat-incoming-call.mdx) — Handles incoming call notifications
diff --git a/ui-kit/angular/v5/components/cometchat-poll-bubble.mdx b/ui-kit/angular/components/cometchat-poll-bubble.mdx
similarity index 100%
rename from ui-kit/angular/v5/components/cometchat-poll-bubble.mdx
rename to ui-kit/angular/components/cometchat-poll-bubble.mdx
diff --git a/ui-kit/angular/v5/components/cometchat-reaction-info.mdx b/ui-kit/angular/components/cometchat-reaction-info.mdx
similarity index 92%
rename from ui-kit/angular/v5/components/cometchat-reaction-info.mdx
rename to ui-kit/angular/components/cometchat-reaction-info.mdx
index 4896306cd..32bb21e0b 100644
--- a/ui-kit/angular/v5/components/cometchat-reaction-info.mdx
+++ b/ui-kit/angular/components/cometchat-reaction-info.mdx
@@ -157,6 +157,6 @@ The Reaction Info component is a passive tooltip — keyboard interaction is han
## Related Components
-- [CometChatReactions](/ui-kit/angular/v5/components/cometchat-reactions) - Parent component that hosts reaction pills with hover tooltips
-- [CometChatReactionList](/ui-kit/angular/v5/components/cometchat-reaction-list) - Full list view of all users who reacted
-- [CometChatPopover](/ui-kit/angular/v5/components/cometchat-reactions) - Popover used to display the reaction info tooltip
+- [CometChatReactions](/ui-kit/angular/components/cometchat-reactions) - Parent component that hosts reaction pills with hover tooltips
+- [CometChatReactionList](/ui-kit/angular/components/cometchat-reaction-list) - Full list view of all users who reacted
+- [CometChatPopover](/ui-kit/angular/components/cometchat-reactions) - Popover used to display the reaction info tooltip
diff --git a/ui-kit/angular/v5/components/cometchat-reaction-list.mdx b/ui-kit/angular/components/cometchat-reaction-list.mdx
similarity index 96%
rename from ui-kit/angular/v5/components/cometchat-reaction-list.mdx
rename to ui-kit/angular/components/cometchat-reaction-list.mdx
index 7f9c77b11..8d8d5aa10 100644
--- a/ui-kit/angular/v5/components/cometchat-reaction-list.mdx
+++ b/ui-kit/angular/components/cometchat-reaction-list.mdx
@@ -430,7 +430,7 @@ The component provides descriptive labels for screen readers:
## Related Components
-- [CometChatMessageList](/ui-kit/angular/v5/components/cometchat-message-list) - Parent component that displays messages with reactions
-- [CometChatMessageBubble](/ui-kit/angular/v5/components/cometchat-message-bubble) - Message container with reaction display
-- [CometChatEmojiKeyboard](/ui-kit/angular/v5/components/cometchat-stickers-keyboard) - Emoji picker for adding reactions
-- [CometChatPopover](/ui-kit/angular/v5/components/cometchat-reactions) - Popover component for displaying reaction list
+- [CometChatMessageList](/ui-kit/angular/components/cometchat-message-list) - Parent component that displays messages with reactions
+- [CometChatMessageBubble](/ui-kit/angular/components/cometchat-message-bubble) - Message container with reaction display
+- [CometChatEmojiKeyboard](/ui-kit/angular/components/cometchat-stickers-keyboard) - Emoji picker for adding reactions
+- [CometChatPopover](/ui-kit/angular/components/cometchat-reactions) - Popover component for displaying reaction list
diff --git a/ui-kit/angular/v5/components/cometchat-reactions.mdx b/ui-kit/angular/components/cometchat-reactions.mdx
similarity index 93%
rename from ui-kit/angular/v5/components/cometchat-reactions.mdx
rename to ui-kit/angular/components/cometchat-reactions.mdx
index b5179f4eb..1a7aa5a9b 100644
--- a/ui-kit/angular/v5/components/cometchat-reactions.mdx
+++ b/ui-kit/angular/components/cometchat-reactions.mdx
@@ -215,7 +215,7 @@ The component adapts to light and dark themes through CSS variables:
## Related Components
-- [CometChatReactionList](/ui-kit/angular/v5/components/cometchat-reaction-list) - Displays the full list of users who reacted, used in the overflow popover
-- [CometChatReactionInfo](/ui-kit/angular/v5/components/cometchat-reaction-info) - Tooltip showing who reacted with a specific emoji
-- [CometChatMessageBubble](/ui-kit/angular/v5/components/cometchat-message-bubble) - Parent component that hosts reactions in its footer
-- [CometChatPopover](/ui-kit/angular/v5/components/cometchat-reactions) - Used for the overflow reaction list popover
+- [CometChatReactionList](/ui-kit/angular/components/cometchat-reaction-list) - Displays the full list of users who reacted, used in the overflow popover
+- [CometChatReactionInfo](/ui-kit/angular/components/cometchat-reaction-info) - Tooltip showing who reacted with a specific emoji
+- [CometChatMessageBubble](/ui-kit/angular/components/cometchat-message-bubble) - Parent component that hosts reactions in its footer
+- [CometChatPopover](/ui-kit/angular/components/cometchat-reactions) - Used for the overflow reaction list popover
diff --git a/ui-kit/angular/components/cometchat-search.mdx b/ui-kit/angular/components/cometchat-search.mdx
new file mode 100644
index 000000000..5f96bd4b1
--- /dev/null
+++ b/ui-kit/angular/components/cometchat-search.mdx
@@ -0,0 +1,844 @@
+---
+title: "CometChatSearch"
+description: "A unified Angular search component for cross-entity search across conversations and messages with filter chips, scoped search, and template customization"
+---
+
+## Overview
+
+The CometChatSearch component provides a unified search experience across conversations and messages. It combines a debounced search input, a filter chip bar, and two lazy-loaded result sections (conversations and messages) into a single, cohesive UI.
+
+The component follows a **service-driven architecture**:
+- **SearchConversationsService** handles conversation search queries, pagination, and real-time listener updates
+- **SearchMessagesService** handles message search queries, pagination, and attachment-type filtering
+- **CometChatTemplatesService** provides template resolution with a priority chain: `@Input` → service template → shared template → default
+- **Component @Input properties** allow per-instance overrides for scoping, filtering, and display
+
+### Key Features
+
+- **Cross-Entity Search**: Search across both conversations and messages simultaneously, or scope to one
+- **9 Filter Types**: Audio, Documents, Groups, Photos, Videos, Links, Unread, Conversations, Messages
+- **Scoped Search**: Narrow results to a specific user (`uid`) or group (`guid`)
+- **Debounced Input**: 500ms debounce prevents excessive SDK calls while typing
+- **Lazy-Loaded Sections**: Conversation and message result lists use `@defer` for optimal initial load
+- **Unified State Views**: Single empty/error view when both sections report the same state
+- **Template Customization**: Override any section of conversation or message result items
+- **Real-Time Updates**: Conversation results update with new messages, typing indicators, and user status changes
+- **Filter Chip Logic**: Intelligent mutual exclusivity — content filters (Photos, Videos, etc.) are mutually exclusive with Links; conversation filters (Unread, Groups) can coexist
+
+### Architecture
+
+```
+CometChatSearchComponent (parent)
+├── Search input + filter bar
+├── CometChatSearchConversationsListComponent (@defer)
+│ ├── Uses SearchConversationsService (signal-based state)
+│ └── Renders CometChatConversationItem per result
+└── CometChatSearchMessagesListComponent (@defer)
+ ├── Uses SearchMessagesService (signal-based state)
+ └── Renders message items with type-specific leading/trailing views
+```
+
+
+ **Live Preview** — default search component preview.
+ [Open in Storybook ↗](https://storybook.cometchat.io/angular/?path=/docs/components-cometchatsearch--docs)
+
+
+
+
+## Basic Usage
+
+### Simple Implementation
+
+```typescript expandable
+import { Component } from '@angular/core';
+import { CometChatSearchComponent } from '@cometchat/chat-uikit-angular';
+
+@Component({
+ selector: 'app-search',
+ standalone: true,
+ imports: [CometChatSearchComponent],
+ template: `
+
+
+ `
+})
+export class SearchComponent {
+ onConversationClick(event: any): void {
+ console.log('Conversation:', event.conversation, 'Keyword:', event.searchKeyword);
+ }
+
+ onMessageClick(event: any): void {
+ console.log('Message:', event.message, 'Keyword:', event.searchKeyword);
+ }
+
+ onBack(): void {
+ // Navigate back
+ }
+}
+```
+
+### Scoped Search (Within a User or Group)
+
+```typescript
+
+
+
+
+
+
+
+```
+
+
+ When `uid` or `guid` is set, conversation filters (Unread, Groups, Conversations) are hidden automatically and only message results are shown.
+
+
+### Scoped to One Entity Type
+
+```typescript
+import { CometChatSearchScope } from '@cometchat/chat-uikit-angular';
+
+
+
+
+
+
+
+
+```
+
+
+## Properties
+
+### Configuration Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `searchIn` | `CometChatSearchScope[]` | `[]` (both) | Scopes to search in. Empty array means both Conversations and Messages |
+| `searchFilters` | `CometChatSearchFilter[]` | `[Audio, Documents, Groups, Photos, Videos, Links, Unread]` | Filter chips to display in the filter bar |
+| `initialSearchFilter` | `CometChatSearchFilter` | `undefined` | Filter that should be active by default when the component loads |
+| `defaultSearchText` | `string` | `undefined` | Pre-fill the search input and immediately trigger a search on load |
+| `conversationsRequestBuilder` | `ConversationsRequestBuilder` | `undefined` | Custom request builder for conversation search queries |
+| `messagesRequestBuilder` | `MessagesRequestBuilder` | `undefined` | Custom request builder for message search queries |
+| `conversationOptions` | `(conv: Conversation) => CometChatOption[]` | `undefined` | Function to provide custom context menu options for conversation results |
+| `textFormatters` | `CometChatTextFormatter[]` | `[]` | Custom text formatters for message content display |
+| `messageSentAtDateTimeFormat` | `CalendarObject` | `undefined` | Custom date/time format for message timestamps |
+
+### Display Control Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `hideBackButton` | `boolean` | `false` | Hide the back navigation button in the header |
+| `hideGroupType` | `boolean` | `false` | Hide group type icons (public, private, password) in conversation results |
+| `hideUserStatus` | `boolean` | `false` | Hide user online/offline status indicator in conversation results |
+| `hideReceipts` | `boolean` | `false` | Hide message read receipts (sent, delivered, read) in conversation results |
+
+### Scoping Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `uid` | `string` | `undefined` | Scope search to messages with a specific user. Hides conversation results and conversation filters |
+| `guid` | `string` | `undefined` | Scope search to messages within a specific group. Hides conversation results and conversation filters |
+
+### Template Properties
+
+#### Conversation Result Templates
+
+| Property | Type | Context | Description |
+|----------|------|---------|-------------|
+| `conversationItemView` | `TemplateRef` | `{ $implicit: Conversation }` | Custom template for the entire conversation result item |
+| `conversationLeadingView` | `TemplateRef` | `{ $implicit: Conversation }` | Custom template for the leading section (avatar area) |
+| `conversationTitleView` | `TemplateRef` | `{ $implicit: Conversation }` | Custom template for the title section |
+| `conversationSubtitleView` | `TemplateRef` | `{ $implicit: Conversation }` | Custom template for the subtitle section (last message preview) |
+| `conversationTrailingView` | `TemplateRef` | `{ $implicit: Conversation }` | Custom template for the trailing section (timestamp, badges) |
+
+#### Message Result Templates
+
+| Property | Type | Context | Description |
+|----------|------|---------|-------------|
+| `messageItemView` | `TemplateRef` | `{ $implicit: BaseMessage }` | Custom template for the entire message result item |
+| `messageLeadingView` | `TemplateRef` | `{ $implicit: BaseMessage }` | Custom template for the leading section (type-specific icon) |
+| `messageTitleView` | `TemplateRef` | `{ $implicit: BaseMessage }` | Custom template for the title section (conversation/sender name) |
+| `messageSubtitleView` | `TemplateRef` | `{ $implicit: BaseMessage }` | Custom template for the subtitle section (message content) |
+| `messageTrailingView` | `TemplateRef` | `{ $implicit: BaseMessage }` | Custom template for the trailing section (timestamp, image/video thumbnail) |
+
+#### State View Templates
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `initialView` | `TemplateRef` | Shown before any search is performed (no keyword, no filters) |
+| `loadingView` | `TemplateRef` | Shown while search results are being fetched (shimmer placeholders by default) |
+| `emptyView` | `TemplateRef` | Shown when search returns no results |
+| `errorView` | `TemplateRef` | Shown when a search operation fails |
+
+
+ Template resolution follows a priority chain: `@Input` template → `CometChatTemplatesService` search template → `CometChatTemplatesService` shared template → built-in default.
+
+
+## Events
+
+| Event | Payload Type | Description |
+|-------|-------------|-------------|
+| `backClick` | `void` | Emitted when the back button is clicked |
+| `conversationClick` | `SearchConversationClickEvent` | Emitted when a conversation result is clicked. Payload includes `conversation` and `searchKeyword` |
+| `messageClick` | `SearchMessageClickEvent` | Emitted when a message result is clicked. Payload includes `message` and `searchKeyword` |
+| `searchError` | `CometChat.CometChatException` | Emitted when a search operation fails in either section |
+
+### Event Payload Types
+
+```typescript
+interface SearchConversationClickEvent {
+ conversation: CometChat.Conversation;
+ searchKeyword: string;
+}
+
+interface SearchMessageClickEvent {
+ message: CometChat.BaseMessage;
+ searchKeyword: string;
+}
+```
+
+
+## Filter System
+
+The search component includes a filter chip bar that allows users to narrow results by type. Filters are organized into two categories:
+
+### Conversation Filters
+
+These filters affect the conversation results section:
+
+| Filter | Enum Value | Behavior |
+|--------|-----------|----------|
+| Unread | `CometChatSearchFilter.Unread` | Shows only conversations with unread messages |
+| Groups | `CometChatSearchFilter.Groups` | Shows only group conversations |
+| Conversations | `CometChatSearchFilter.Conversations` | Shows all conversations (explicit scope) |
+
+### Message Filters
+
+These filters affect the message results section:
+
+| Filter | Enum Value | Behavior |
+|--------|-----------|----------|
+| Photos | `CometChatSearchFilter.Photos` | Shows only image messages |
+| Videos | `CometChatSearchFilter.Videos` | Shows only video messages |
+| Documents | `CometChatSearchFilter.Documents` | Shows only file/document messages |
+| Audio | `CometChatSearchFilter.Audio` | Shows only audio messages |
+| Links | `CometChatSearchFilter.Links` | Shows only messages containing links |
+| Messages | `CometChatSearchFilter.Messages` | Shows all message types (explicit scope) |
+
+### Filter Behavior Rules
+
+- When a conversation filter is active, only the conversations section renders
+- When a message filter is active, only the messages section renders
+- Content filters (Photos, Videos, Documents, Audio) are mutually exclusive with Links
+- Multiple conversation filters can coexist (e.g., Unread + Groups)
+- When no filters are active and a keyword is entered, both sections render
+- When `uid` or `guid` is set, conversation filters are hidden automatically
+
+### Limiting Available Filters
+
+```typescript
+import { CometChatSearchFilter } from '@cometchat/chat-uikit-angular';
+
+
+
+
+```
+
+### Pre-Selecting a Filter
+
+```typescript
+
+
+```
+
+## Unified State Management
+
+When both conversation and message sections are active, the component coordinates their empty/error states to avoid duplicate views:
+
+| Conversations State | Messages State | Result |
+|-------------------|---------------|--------|
+| Empty | Empty | Single unified empty view (no section headers) |
+| Empty | Loaded | Conversations section hidden entirely; messages shown normally |
+| Loaded | Empty | Messages section hidden entirely; conversations shown normally |
+| Error | Error | Single unified error view (no section headers) |
+| Error | Loaded | Conversations shows error with header; messages shown normally |
+| Loaded | Error | Conversations shown normally; messages shows error with header |
+
+When only one scope is active (via `searchIn`, `uid`, or `guid`), that section handles its own empty/error states independently.
+
+
+## Advanced Usage
+
+### Custom Request Builders
+
+Override the default SDK query builders for conversations and messages:
+
+```typescript expandable
+import { Component, OnInit } from '@angular/core';
+import { CometChat } from '@cometchat/chat-sdk-javascript';
+import { CometChatSearchComponent } from '@cometchat/chat-uikit-angular';
+
+@Component({
+ selector: 'app-custom-search',
+ standalone: true,
+ imports: [CometChatSearchComponent],
+ template: `
+
+
+ `
+})
+export class CustomSearchComponent implements OnInit {
+ convBuilder!: CometChat.ConversationsRequestBuilder;
+ msgBuilder!: CometChat.MessagesRequestBuilder;
+
+ ngOnInit(): void {
+ this.convBuilder = new CometChat.ConversationsRequestBuilder()
+ .setLimit(15)
+ .withTags(true);
+
+ this.msgBuilder = new CometChat.MessagesRequestBuilder()
+ .setLimit(20);
+ }
+
+ onConversationClick(event: any): void {
+ // Navigate to conversation
+ }
+
+ onMessageClick(event: any): void {
+ // Navigate to message in context
+ }
+}
+```
+
+### Custom Context Menu for Conversation Results
+
+```typescript expandable
+import { Component } from '@angular/core';
+import { CometChat } from '@cometchat/chat-sdk-javascript';
+import { CometChatSearchComponent, CometChatOption } from '@cometchat/chat-uikit-angular';
+
+@Component({
+ selector: 'app-search-with-menu',
+ standalone: true,
+ imports: [CometChatSearchComponent],
+ template: `
+
+
+ `
+})
+export class SearchWithMenuComponent {
+ getOptions = (conversation: CometChat.Conversation): CometChatOption[] => {
+ return [
+ {
+ id: 'pin',
+ title: 'Pin Conversation',
+ iconURL: 'assets/pin.svg',
+ onClick: () => console.log('Pin:', conversation)
+ },
+ {
+ id: 'delete',
+ title: 'Delete',
+ iconURL: 'assets/delete.svg',
+ onClick: () => console.log('Delete:', conversation)
+ }
+ ];
+ };
+
+ onConversationClick(event: any): void {
+ console.log('Selected:', event.conversation);
+ }
+}
+```
+
+### Handling Search Results for Navigation
+
+A common pattern is navigating to the matched message within its conversation when a message result is clicked:
+
+```typescript expandable
+import { Component } from '@angular/core';
+import { CometChat } from '@cometchat/chat-sdk-javascript';
+import {
+ CometChatSearchComponent,
+ SearchConversationClickEvent,
+ SearchMessageClickEvent,
+ ChatStateService,
+} from '@cometchat/chat-uikit-angular';
+
+@Component({
+ selector: 'app-search-navigation',
+ standalone: true,
+ imports: [CometChatSearchComponent],
+ template: `
+
+
+ `
+})
+export class SearchNavigationComponent {
+ constructor(private chatState: ChatStateService) {}
+
+ onConversationClick(event: SearchConversationClickEvent): void {
+ const conversationWith = event.conversation.getConversationWith();
+ if (conversationWith instanceof CometChat.User) {
+ this.chatState.setActiveUser(conversationWith);
+ } else if (conversationWith instanceof CometChat.Group) {
+ this.chatState.setActiveGroup(conversationWith as CometChat.Group);
+ }
+ this.closeSearch();
+ }
+
+ onMessageClick(event: SearchMessageClickEvent): void {
+ // Navigate to the message's conversation and scroll to the message
+ const message = event.message;
+ const receiverType = message.getReceiverType();
+
+ if (receiverType === 'user') {
+ this.chatState.setActiveUser(message.getSender());
+ } else {
+ this.chatState.setActiveGroup(message.getReceiver() as CometChat.Group);
+ }
+ // Your app can use message.getId() to scroll to the specific message
+ this.closeSearch();
+ }
+
+ closeSearch(): void {
+ // Navigate back to the main chat view
+ }
+}
+```
+
+## Customization with Templates
+
+### Custom Message Result Item
+
+Override the entire message result row:
+
+```typescript expandable
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CometChat } from '@cometchat/chat-sdk-javascript';
+import { CometChatSearchComponent } from '@cometchat/chat-uikit-angular';
+
+@Component({
+ selector: 'app-custom-message-results',
+ standalone: true,
+ imports: [CommonModule, CometChatSearchComponent],
+ template: `
+
+
+
+
+
+
+ `,
+ styles: [`
+ .custom-message-row {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 12px 16px;
+ cursor: pointer;
+ }
+ .custom-message-row:hover {
+ background: var(--cometchat-background-color-02);
+ }
+ .message-type-badge {
+ background: var(--cometchat-primary-color);
+ color: white;
+ padding: 4px 8px;
+ border-radius: 4px;
+ font-size: 10px;
+ font-weight: 600;
+ }
+ .message-body {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ min-width: 0;
+ }
+ .sender {
+ font: var(--cometchat-font-body-medium);
+ color: var(--cometchat-text-color-primary);
+ }
+ .content {
+ font: var(--cometchat-font-body-regular);
+ color: var(--cometchat-text-color-secondary);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ .time {
+ font: var(--cometchat-font-caption1-regular);
+ color: var(--cometchat-text-color-secondary);
+ }
+ `]
+})
+export class CustomMessageResultsComponent {
+ getPreview(message: CometChat.BaseMessage): string {
+ if (message.getType() === 'text') {
+ return (message as CometChat.TextMessage).getText();
+ }
+ return message.getType();
+ }
+
+ onMessageClick(event: any): void {
+ console.log('Message clicked:', event);
+ }
+}
+```
+
+### Custom Empty and Error States
+
+```typescript expandable
+import { Component } from '@angular/core';
+import { CometChatSearchComponent } from '@cometchat/chat-uikit-angular';
+
+@Component({
+ selector: 'app-custom-states',
+ standalone: true,
+ imports: [CometChatSearchComponent],
+ template: `
+
+
+
+
+ 
+ Nothing found
+ Try a different keyword or filter
+
+
+
+
+
+ 
+ Search failed
+ Please check your connection and try again
+
+
+
+ `
+})
+export class CustomStatesComponent {}
+```
+
+### Custom Initial View
+
+Replace the default "Search for messages, conversations..." placeholder:
+
+```typescript
+
+
+
+ Find anything
+ Search across all your conversations and messages
+
+
+
+```
+
+
+## Keyboard Accessibility
+
+CometChatSearch provides keyboard accessibility for the search input, filter bar, and result items.
+
+### Keyboard Shortcuts
+
+| Key | Action | Context |
+|-----|--------|---------|
+| `Tab` | Navigate between search input, filter chips, and result items | Global |
+| `Shift + Tab` | Navigate backwards | Global |
+| `Enter` | Activate focused result item or filter chip | When focused |
+| `Space` | Toggle filter chip or activate result item | When focused |
+| `Escape` | Clear search text and active filters | When search input is focused |
+
+### Accessibility Features
+
+**ARIA Attributes:**
+- `role="search"` on the main container
+- `role="searchbox"` on the search input
+- `role="toolbar"` on the filter bar
+- `aria-pressed` on filter chips indicating active state
+- `aria-label` on back button, search input, and clear button
+- `aria-live="assertive"` on empty and error state regions
+- `role="list"` and `role="listitem"` on result sections
+
+**Screen Reader Support:**
+- Filter chip labels are localized via the translate pipe
+- State changes (empty, error) are announced via `aria-live` regions
+- Back button and clear button have descriptive `aria-label` attributes
+
+**Focus Management:**
+- Search input auto-focuses on component load
+- Clear button restores focus to search input after clearing
+- Result items are focusable with `tabindex="0"` (message results)
+- Visible focus indicators meeting WCAG contrast requirements
+
+## Styling with CSS Variables
+
+The component uses CometChat CSS variables for theming. Key variables:
+
+```css
+cometchat-search {
+ /* Background */
+ --cometchat-background-color-01: #ffffff;
+ --cometchat-background-color-02: #f5f5f5;
+ --cometchat-background-color-03: #eeeeee;
+
+ /* Text */
+ --cometchat-text-color-primary: #141414;
+ --cometchat-text-color-secondary: #727272;
+ --cometchat-text-color-tertiary: #a1a1a1;
+
+ /* Primary color (active filter, icons) */
+ --cometchat-primary-color: #6852D6;
+
+ /* Border */
+ --cometchat-border-color-dark: #dcdcdc;
+ --cometchat-border-color-light: #e8e8e8;
+
+ /* Icons */
+ --cometchat-icon-color-primary: #141414;
+ --cometchat-icon-color-secondary: #a1a1a1;
+
+ /* Typography */
+ --cometchat-font-heading4-regular: 400 16px/24px sans-serif;
+ --cometchat-font-body-regular: 400 14px/20px sans-serif;
+ --cometchat-font-body-medium: 500 14px/20px sans-serif;
+ --cometchat-font-caption1-regular: 400 12px/16px sans-serif;
+ --cometchat-font-caption1-medium: 500 12px/16px sans-serif;
+
+ /* Spacing */
+ --cometchat-padding-2: 8px;
+ --cometchat-padding-3: 12px;
+ --cometchat-padding-4: 16px;
+
+ /* Border radius */
+ --cometchat-radius-max: 1000px;
+ --cometchat-radius-2: 8px;
+}
+```
+
+### Filter Chip Styling
+
+Active filter chips use a dark pill style with white text and icons:
+
+```css
+/* Default filter chip */
+.cometchat-search__body-filter {
+ background: var(--cometchat-background-color-03);
+ color: var(--cometchat-text-color-secondary);
+ border-radius: var(--cometchat-radius-max);
+}
+
+/* Active filter chip */
+.cometchat-search__body-filter-active {
+ background: var(--cometchat-neutral-color-900);
+ color: var(--cometchat-neutral-color-50);
+ border: 1px solid var(--cometchat-neutral-color-800);
+}
+```
+
+## Error Handling
+
+### Built-in Error Handling
+
+The component handles errors from both conversation and message search services:
+
+```typescript
+
+
+```
+
+```typescript expandable
+handleSearchError(error: CometChat.CometChatException): void {
+ console.error('Search error:', error);
+
+ if (error.code === 'NETWORK_ERROR') {
+ this.showToast('Network error. Please check your connection.');
+ } else if (error.code === 'AUTH_ERROR') {
+ this.showToast('Authentication error. Please log in again.');
+ } else {
+ this.showToast('Search failed. Please try again.');
+ }
+}
+```
+
+### Error State Behavior
+
+- If only one section errors while the other has results, the errored section shows its own error view with its section header
+- If both sections error, a single unified error view is shown without section headers
+- Custom `errorView` templates are used when provided
+
+## Complete Example
+
+```typescript expandable
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CometChat } from '@cometchat/chat-sdk-javascript';
+import {
+ CometChatSearchComponent,
+ CometChatSearchFilter,
+ CometChatSearchScope,
+ SearchConversationClickEvent,
+ SearchMessageClickEvent,
+ ChatStateService,
+ CometChatOption,
+} from '@cometchat/chat-uikit-angular';
+
+@Component({
+ selector: 'app-search-demo',
+ standalone: true,
+ imports: [CommonModule, CometChatSearchComponent],
+ template: `
+
+
+
+
+
+ No results
+ Try a different search term or filter
+
+
+
+
+ `,
+ styles: [`
+ .search-container {
+ height: 100vh;
+ width: 400px;
+ }
+ `]
+})
+export class SearchDemoComponent implements OnInit {
+ filters = [
+ CometChatSearchFilter.Unread,
+ CometChatSearchFilter.Groups,
+ CometChatSearchFilter.Photos,
+ CometChatSearchFilter.Videos,
+ CometChatSearchFilter.Documents,
+ CometChatSearchFilter.Audio,
+ CometChatSearchFilter.Links,
+ ];
+
+ constructor(private chatState: ChatStateService) {}
+
+ ngOnInit(): void {}
+
+ getConversationOptions = (conv: CometChat.Conversation): CometChatOption[] => {
+ return [
+ { id: 'delete', title: 'Delete', iconURL: 'assets/delete.svg', onClick: () => console.log('Delete:', conv) },
+ ];
+ };
+
+ onConversationClick(event: SearchConversationClickEvent): void {
+ const entity = event.conversation.getConversationWith();
+ if (entity instanceof CometChat.User) {
+ this.chatState.setActiveUser(entity);
+ } else {
+ this.chatState.setActiveGroup(entity as CometChat.Group);
+ }
+ this.closeSearch();
+ }
+
+ onMessageClick(event: SearchMessageClickEvent): void {
+ const msg = event.message;
+ if (msg.getReceiverType() === 'user') {
+ this.chatState.setActiveUser(msg.getSender());
+ } else {
+ this.chatState.setActiveGroup(msg.getReceiver() as CometChat.Group);
+ }
+ this.closeSearch();
+ }
+
+ onError(error: CometChat.CometChatException): void {
+ console.error('Search error:', error);
+ }
+
+ closeSearch(): void {
+ // Navigate back to main chat view
+ }
+}
+```
+
+## Related Components
+
+- **CometChatConversations**: Full conversation list component (CometChatSearch uses `CometChatConversationItem` internally for conversation results)
+- **CometChatSearchBar**: Standalone search bar component (CometChatSearch has its own built-in search input)
+- **CometChatMessageList**: Message list component for displaying messages in a conversation
+- **CometChatMessageHeader**: Header component that pairs with search for navigation context
+
+## Technical Details
+
+- **Standalone Component**: Can be imported and used independently
+- **Change Detection**: Uses `OnPush` strategy for optimal performance
+- **Lazy Loading**: Child result components use `@defer` blocks for code splitting
+- **Signal-Based State**: Services use Angular signals for reactive state management
+- **Debounced Search**: 500ms debounce on the search input to reduce SDK calls
+- **BEM CSS**: Follows Block Element Modifier naming convention (`cometchat-search__*`)
+- **Localization**: All text uses the `translate` pipe for i18n support
+
+---
+
+## Related Documentation
+
+- [SearchConversationsService](/ui-kit/angular/api-reference/search-conversations-service) — Conversation search state, SDK queries, real-time listeners
+- [SearchMessagesService](/ui-kit/angular/api-reference/search-messages-service) — Message search state, attachment-type filtering, scoped queries
+- [CometChatTemplatesService](/ui-kit/angular/api-reference/templates-service) — Template resolution priority chain and global template overrides
+- [Accessibility](/accessibility#search) — Cross-component keyboard accessibility reference
+- [Events](/events) — UIKit event bus for decoupled component communication
diff --git a/ui-kit/angular/v5/components/cometchat-smart-replies.mdx b/ui-kit/angular/components/cometchat-smart-replies.mdx
similarity index 95%
rename from ui-kit/angular/v5/components/cometchat-smart-replies.mdx
rename to ui-kit/angular/components/cometchat-smart-replies.mdx
index 8b500f584..b1e2460a2 100644
--- a/ui-kit/angular/v5/components/cometchat-smart-replies.mdx
+++ b/ui-kit/angular/components/cometchat-smart-replies.mdx
@@ -153,5 +153,5 @@ The Smart Replies component uses BEM-style CSS classes that can be customized wi
## Related Components
-- [CometChatConversationStarter](/ui-kit/angular/v5/components/cometchat-conversation-starter) - AI-generated conversation starters for empty conversations
-- [CometChatMessageList](/ui-kit/angular/v5/components/cometchat-message-list) - Message list that hosts the smart replies component
+- [CometChatConversationStarter](/ui-kit/angular/components/cometchat-conversation-starter) - AI-generated conversation starters for empty conversations
+- [CometChatMessageList](/ui-kit/angular/components/cometchat-message-list) - Message list that hosts the smart replies component
diff --git a/ui-kit/angular/v5/components/cometchat-sticker-bubble.mdx b/ui-kit/angular/components/cometchat-sticker-bubble.mdx
similarity index 100%
rename from ui-kit/angular/v5/components/cometchat-sticker-bubble.mdx
rename to ui-kit/angular/components/cometchat-sticker-bubble.mdx
diff --git a/ui-kit/angular/v5/components/cometchat-stickers-keyboard.mdx b/ui-kit/angular/components/cometchat-stickers-keyboard.mdx
similarity index 93%
rename from ui-kit/angular/v5/components/cometchat-stickers-keyboard.mdx
rename to ui-kit/angular/components/cometchat-stickers-keyboard.mdx
index c8250db7d..127faaffa 100644
--- a/ui-kit/angular/v5/components/cometchat-stickers-keyboard.mdx
+++ b/ui-kit/angular/components/cometchat-stickers-keyboard.mdx
@@ -185,6 +185,6 @@ The Stickers Keyboard component uses BEM-style CSS classes that can be customize
## Related Components
-- [CometChatStickerBubble](/ui-kit/angular/v5/components/cometchat-sticker-bubble) - Displays a sent sticker in a message bubble
-- [CometChatMessageComposer](/ui-kit/angular/v5/components/cometchat-message-composer) - Message composer that integrates the stickers keyboard
-- [CometChatEmojiKeyboard](/ui-kit/angular/v5/components/cometchat-stickers-keyboard) - Similar keyboard component for emoji selection
+- [CometChatStickerBubble](/ui-kit/angular/components/cometchat-sticker-bubble) - Displays a sent sticker in a message bubble
+- [CometChatMessageComposer](/ui-kit/angular/components/cometchat-message-composer) - Message composer that integrates the stickers keyboard
+- [CometChatEmojiKeyboard](/ui-kit/angular/components/cometchat-stickers-keyboard) - Similar keyboard component for emoji selection
diff --git a/ui-kit/angular/v5/components/cometchat-text-bubble.mdx b/ui-kit/angular/components/cometchat-text-bubble.mdx
similarity index 99%
rename from ui-kit/angular/v5/components/cometchat-text-bubble.mdx
rename to ui-kit/angular/components/cometchat-text-bubble.mdx
index 3e7d4291d..d2def7876 100644
--- a/ui-kit/angular/v5/components/cometchat-text-bubble.mdx
+++ b/ui-kit/angular/components/cometchat-text-bubble.mdx
@@ -874,7 +874,7 @@ The component implements comprehensive XSS prevention through HTML sanitization:
-For troubleshooting tips, see the [Troubleshooting Guide](/ui-kit/angular/v5/troubleshooting#cometchattextbubble).
+For troubleshooting tips, see the [Troubleshooting Guide](/ui-kit/angular/troubleshooting#cometchattextbubble).
diff --git a/ui-kit/angular/v5/components/cometchat-thread-header.mdx b/ui-kit/angular/components/cometchat-thread-header.mdx
similarity index 95%
rename from ui-kit/angular/v5/components/cometchat-thread-header.mdx
rename to ui-kit/angular/components/cometchat-thread-header.mdx
index b7e0970ec..f4a4cd6ba 100644
--- a/ui-kit/angular/v5/components/cometchat-thread-header.mdx
+++ b/ui-kit/angular/components/cometchat-thread-header.mdx
@@ -106,7 +106,7 @@ export class ThreadHeaderServiceComponent {
}
```
-See the [ChatStateService API reference](/ui-kit/angular/v5/api-reference/chat-state-service) for the full list of signals, observables, and setter methods.
+See the [ChatStateService API reference](/ui-kit/angular/api-reference/chat-state-service) for the full list of signals, observables, and setter methods.
This is the recommended approach for most applications. It reduces boilerplate
@@ -237,5 +237,5 @@ The component adapts across breakpoints with dedicated CSS variables for tablet
## Related Components
-- [CometChatMessageList](/ui-kit/angular/v5/components/cometchat-message-list) - Displays messages within the thread
-- [CometChatMessageBubble](/ui-kit/angular/v5/components/cometchat-message-bubble) - Renders individual messages in the thread
+- [CometChatMessageList](/ui-kit/angular/components/cometchat-message-list) - Displays messages within the thread
+- [CometChatMessageBubble](/ui-kit/angular/components/cometchat-message-bubble) - Renders individual messages in the thread
diff --git a/ui-kit/angular/v5/components/cometchat-user-item.mdx b/ui-kit/angular/components/cometchat-user-item.mdx
similarity index 96%
rename from ui-kit/angular/v5/components/cometchat-user-item.mdx
rename to ui-kit/angular/components/cometchat-user-item.mdx
index 311a607f4..d6ad6a7c1 100644
--- a/ui-kit/angular/v5/components/cometchat-user-item.mdx
+++ b/ui-kit/angular/components/cometchat-user-item.mdx
@@ -152,5 +152,5 @@ Provide custom templates via inputs to override any visual section:
## Related Components
- [CometChatUsers](./cometchat-users.mdx) — Parent list component that renders multiple user items
-- [CometChatAvatar](/ui-kit/angular/v5/components/cometchat-users) — Used internally for the user avatar
-- [CometChatContextMenu](/ui-kit/angular/v5/components/cometchat-message-list) — Used internally for the context menu
+- [CometChatAvatar](/ui-kit/angular/components/cometchat-users) — Used internally for the user avatar
+- [CometChatContextMenu](/ui-kit/angular/components/cometchat-message-list) — Used internally for the context menu
diff --git a/ui-kit/angular/v5/components/cometchat-users.mdx b/ui-kit/angular/components/cometchat-users.mdx
similarity index 99%
rename from ui-kit/angular/v5/components/cometchat-users.mdx
rename to ui-kit/angular/components/cometchat-users.mdx
index 88f6b816a..fe8bb6265 100644
--- a/ui-kit/angular/v5/components/cometchat-users.mdx
+++ b/ui-kit/angular/components/cometchat-users.mdx
@@ -888,7 +888,7 @@ handleError(error: CometChat.CometChatException): void {
```
-For troubleshooting tips, see the [Troubleshooting Guide](/ui-kit/angular/v5/troubleshooting#cometchatusers).
+For troubleshooting tips, see the [Troubleshooting Guide](/ui-kit/angular/troubleshooting#cometchatusers).
## Best Practices
diff --git a/ui-kit/angular/v5/components/cometchat-video-bubble.mdx b/ui-kit/angular/components/cometchat-video-bubble.mdx
similarity index 99%
rename from ui-kit/angular/v5/components/cometchat-video-bubble.mdx
rename to ui-kit/angular/components/cometchat-video-bubble.mdx
index ea3afdac2..195d3e7ba 100644
--- a/ui-kit/angular/v5/components/cometchat-video-bubble.mdx
+++ b/ui-kit/angular/components/cometchat-video-bubble.mdx
@@ -596,6 +596,6 @@ Screen readers announce the video bubble with:
-For troubleshooting tips, see the [Troubleshooting Guide](/ui-kit/angular/v5/troubleshooting#cometchatvideobubble).
+For troubleshooting tips, see the [Troubleshooting Guide](/ui-kit/angular/troubleshooting#cometchatvideobubble).
diff --git a/ui-kit/angular/v5/components/overview.mdx b/ui-kit/angular/components/components-overview.mdx
similarity index 83%
rename from ui-kit/angular/v5/components/overview.mdx
rename to ui-kit/angular/components/components-overview.mdx
index f4218221f..2b10e53b8 100644
--- a/ui-kit/angular/v5/components/overview.mdx
+++ b/ui-kit/angular/components/components-overview.mdx
@@ -1,5 +1,5 @@
---
-title: Components Overview
+title: "Overview"
description: "Overview of all available UI components"
---
CometChat UIKit provides a comprehensive set of pre-built components for building chat experiences.
@@ -84,7 +84,7 @@ this.subscription = CometChatMessageEvents.ccMessageSent.subscribe((message) =>
this.subscription?.unsubscribe();
```
-Each component page documents its emitted events in the Events section. See [Events](/ui-kit/angular/v5/events) for the full reference.
+Each component page documents its emitted events in the Events section. See [Events](/ui-kit/angular/events) for the full reference.
### Filters
@@ -146,36 +146,36 @@ All components are imported from `@cometchat/chat-uikit-angular`.
| Component | Purpose | Key Inputs | Page |
| --- | --- | --- | --- |
-| cometchat-conversations | Scrollable list of recent conversations | `conversationsRequestBuilder`, `itemClick`, `error` | [Conversations](/ui-kit/angular/v5/components/cometchat-conversations) |
-| cometchat-users | Scrollable list of users | `usersRequestBuilder`, `itemClick`, `error` | [Users](/ui-kit/angular/v5/components/cometchat-users) |
-| cometchat-groups | Scrollable list of groups | `groupsRequestBuilder`, `itemClick`, `error` | [Groups](/ui-kit/angular/v5/components/cometchat-groups) |
-| cometchat-group-members | Scrollable list of group members | `group`, `groupMemberRequestBuilder`, `itemClick` | [Group Members](/ui-kit/angular/v5/components/cometchat-group-members) |
+| cometchat-conversations | Scrollable list of recent conversations | `conversationsRequestBuilder`, `itemClick`, `error` | [Conversations](/ui-kit/angular/components/cometchat-conversations) |
+| cometchat-users | Scrollable list of users | `usersRequestBuilder`, `itemClick`, `error` | [Users](/ui-kit/angular/components/cometchat-users) |
+| cometchat-groups | Scrollable list of groups | `groupsRequestBuilder`, `itemClick`, `error` | [Groups](/ui-kit/angular/components/cometchat-groups) |
+| cometchat-group-members | Scrollable list of group members | `group`, `groupMemberRequestBuilder`, `itemClick` | [Group Members](/ui-kit/angular/components/cometchat-group-members) |
### Messages
| Component | Purpose | Key Inputs | Page |
| --- | --- | --- | --- |
-| cometchat-message-header | Toolbar with avatar, name, status, typing indicator | `user`, `group` | [Message Header](/ui-kit/angular/v5/components/cometchat-message-header) |
-| cometchat-message-list | Scrollable message list with reactions, receipts, threads | `user`, `group`, `messagesRequestBuilder` | [Message List](/ui-kit/angular/v5/components/cometchat-message-list) |
-| cometchat-message-composer | Rich text input with attachments, mentions, voice notes | `user`, `group`, `placeholderText` | [Message Composer](/ui-kit/angular/v5/components/cometchat-message-composer) |
-| cometchat-thread-header | Parent message bubble and reply count for threaded view | `parentMessage` | [Thread Header](/ui-kit/angular/v5/components/cometchat-thread-header) |
+| cometchat-message-header | Toolbar with avatar, name, status, typing indicator | `user`, `group` | [Message Header](/ui-kit/angular/components/cometchat-message-header) |
+| cometchat-message-list | Scrollable message list with reactions, receipts, threads | `user`, `group`, `messagesRequestBuilder` | [Message List](/ui-kit/angular/components/cometchat-message-list) |
+| cometchat-message-composer | Rich text input with attachments, mentions, voice notes | `user`, `group`, `placeholderText` | [Message Composer](/ui-kit/angular/components/cometchat-message-composer) |
+| cometchat-thread-header | Parent message bubble and reply count for threaded view | `parentMessage` | [Thread Header](/ui-kit/angular/components/cometchat-thread-header) |
### Calling
| Component | Purpose | Key Inputs | Page |
| --- | --- | --- | --- |
-| cometchat-call-buttons | Voice and video call initiation buttons | `user`, `group` | [Call Buttons](/ui-kit/angular/v5/components/cometchat-call-buttons) |
-| cometchat-incoming-call | Incoming call notification with accept/decline | `call` | [Incoming Call](/ui-kit/angular/v5/components/cometchat-incoming-call) |
-| cometchat-outgoing-call | Outgoing call screen with cancel control | `call` | [Outgoing Call](/ui-kit/angular/v5/components/cometchat-outgoing-call) |
-| cometchat-call-logs | Scrollable list of call history | `callLogsRequestBuilder` | [Call Logs](/ui-kit/angular/v5/components/cometchat-call-logs) |
+| cometchat-call-buttons | Voice and video call initiation buttons | `user`, `group` | [Call Buttons](/ui-kit/angular/components/cometchat-call-buttons) |
+| cometchat-incoming-call | Incoming call notification with accept/decline | `call` | [Incoming Call](/ui-kit/angular/components/cometchat-incoming-call) |
+| cometchat-outgoing-call | Outgoing call screen with cancel control | `call` | [Outgoing Call](/ui-kit/angular/components/cometchat-outgoing-call) |
+| cometchat-call-logs | Scrollable list of call history | `callLogsRequestBuilder` | [Call Logs](/ui-kit/angular/components/cometchat-call-logs) |
### AI
| Component | Purpose | Key Inputs | Page |
| --- | --- | --- | --- |
-| cometchat-smart-replies | AI-generated response suggestions | — | [Smart Replies](/ui-kit/angular/v5/components/cometchat-smart-replies) |
-| cometchat-conversation-starter | AI-generated opening lines for new chats | — | [Conversation Starter](/ui-kit/angular/v5/components/cometchat-conversation-starter) |
-| cometchat-conversation-summary | AI-generated conversation summary panel | `getConversationSummary` | [Conversation Summary](/ui-kit/angular/v5/components/cometchat-conversation-summary) |
+| cometchat-smart-replies | AI-generated response suggestions | — | [Smart Replies](/ui-kit/angular/components/cometchat-smart-replies) |
+| cometchat-conversation-starter | AI-generated opening lines for new chats | — | [Conversation Starter](/ui-kit/angular/components/cometchat-conversation-starter) |
+| cometchat-conversation-summary | AI-generated conversation summary panel | `getConversationSummary` | [Conversation Summary](/ui-kit/angular/components/cometchat-conversation-summary) |
---
@@ -190,9 +190,9 @@ The UIKit is a set of independent components that compose into chat layouts. A t
Data flow: selecting a conversation in `cometchat-conversations` yields a `CometChat.User` or `CometChat.Group` object. That object is passed as an input (`[user]` or `[group]`) to `cometchat-message-header`, `cometchat-message-list`, and `cometchat-message-composer`. The message components use the SDK internally — `cometchat-message-composer` sends messages, `cometchat-message-list` receives them via real-time listeners.
-The UIKit supports a Hybrid Approach for wiring components: by default, components subscribe to `ChatStateService` for active chat state, but explicit `@Input()` bindings always take priority. This lets you start with zero-config service-based wiring and override individual components as needed. See the [State Management guide](/ui-kit/angular/v5/guides/state-management) for a full comparison and code examples.
+The UIKit supports a Hybrid Approach for wiring components: by default, components subscribe to `ChatStateService` for active chat state, but explicit `@Input()` bindings always take priority. This lets you start with zero-config service-based wiring and override individual components as needed. See the [State Management guide](/ui-kit/angular/guides/state-management) for a full comparison and code examples.
-Components communicate through a publish/subscribe event bus (`CometChatMessageEvents`, `CometChatConversationEvents`, `CometChatGroupEvents`, etc.). A component emits events that other components or application code can subscribe to without direct references. See [Events](/ui-kit/angular/v5/events) for the full list.
+Components communicate through a publish/subscribe event bus (`CometChatMessageEvents`, `CometChatConversationEvents`, `CometChatGroupEvents`, etc.). A component emits events that other components or application code can subscribe to without direct references. See [Events](/ui-kit/angular/events) for the full list.
Each component accepts `@Output()` callbacks, `ng-template` view slot inputs for replacing UI sections, `RequestBuilder` inputs for data filtering, and CSS variable overrides on `.cometchat-` classes.
@@ -201,16 +201,16 @@ Each component accepts `@Output()` callbacks, `ng-template` view slot inputs for
## Next Steps
-
+
Chat features included out of the box
-
+
Customize colors, fonts, and styles
-
+
Add-on features like polls, stickers, and translation
-
+
Task-oriented tutorials for common patterns
diff --git a/ui-kit/angular/core-features.mdx b/ui-kit/angular/core-features.mdx
index 88aa7691e..94fc78b12 100644
--- a/ui-kit/angular/core-features.mdx
+++ b/ui-kit/angular/core-features.mdx
@@ -1,131 +1,243 @@
---
-title: "Core"
-description: "Core — CometChat documentation."
+title: "Core Features"
+description: "Review CometChat Angular UI Kit core features for messaging, media sharing, receipts, typing indicators, presence, reactions, threads, and search."
---
-## Overview
+
-The UI Kit comprises a variety of components, each designed to work seamlessly with one another to deliver a comprehensive and intuitive chat experience.
+| Field | Value |
+| --- | --- |
+| 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, Search, Threaded Conversations, Moderation, Report Message, Group Chat |
+| 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) |
-Here's how different UI Kit components work together to achieve CometChat's Core features:
+
+
+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
-At the heart of CometChat's functionality is the ability to support real-time text messaging. Users can send and receive instant messages, fostering quick and efficient communication.
+Real-time text messaging is at the heart of CometChat. Users can send and receive instant messages, enabling quick and efficient communication in both one-on-one and group conversations.
- 
+ 
-| Components | Functionality |
-| -------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [MessageComposer](/ui-kit/angular/message-composer) | [MessageComposer](/ui-kit/angular/message-composer) is a Component that enables users to write and send a variety of messages. |
-| [MessageList](/ui-kit/angular/message-list) | [MessageList](/ui-kit/angular/message-list) is a Component that renders a list of messages sent and messages received using [TextBubble](/ui-kit/angular/text-bubble). |
-| [Messages](/ui-kit/angular/messages) | [Messages](/ui-kit/angular/messages) component in CometChat's UI Kit is a comprehensive component that includes both the [MessageComposer](/ui-kit/angular/message-composer) and the [MessageList](/ui-kit/angular/message-list) components. So, if you're looking to implement a messaging feature in your application, using the Messages component would be a straightforward and efficient way to do it. |
+| Component | Functionality |
+| --- | --- |
+| [cometchat-message-composer](/ui-kit/angular/components/cometchat-message-composer) | Provides the input area where users write and send text messages. |
+| [cometchat-message-list](/ui-kit/angular/components/cometchat-message-list) | Renders the chronological list of sent and received messages using text bubbles. |
## Media Sharing
-Beyond text, CometChat allows users to share various media types within their conversations. This includes images, videos, audio files, and documents, enriching the chat experience and enabling more comprehensive communication.
+CometChat supports sharing images, videos, audio files, and documents within conversations.
- 
+ 
-| Components | Functionality |
-| -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| [MessageComposer](/ui-kit/angular/message-composer) | the [MessageComposer](/ui-kit/angular/message-composer) component includes an ActionSheet. This ActionSheet serves as a menu appearing over the app's context, offering various options for sharing media files. |
-| [MessageList](/ui-kit/angular/message-list) | the [MessageList](/ui-kit/angular/message-list) component is responsible for rendering various Media Message bubbles, such as [Image Bubble](/ui-kit/angular/image-bubble), [File Bubble](/ui-kit/angular/file-bubble), [Audio Bubble](/ui-kit/angular/audio-bubble) [Video Bubble](/ui-kit/angular/video-bubble) |
-
-> In CometChat's UI Kit, the [Messages](/ui-kit/angular/messages) component combines both the [MessageComposer](/ui-kit/angular/message-composer) and the [MessageList](/ui-kit/angular/message-list) components. If you want to add messaging features to your app, using the Messages component is a simple and effective approach.
+| Component | Functionality |
+| --- | --- |
+| [cometchat-message-composer](/ui-kit/angular/components/cometchat-message-composer) | Includes an ActionSheet that presents options for attaching and sharing media files. |
+| [cometchat-message-list](/ui-kit/angular/components/cometchat-message-list) | Renders media message bubbles including Image, File, Audio, and Video bubbles. |
## Read Receipts
-CometChat's Read Receipts feature provides visibility into the message status, letting users know when a message has been delivered and read. This brings clarity to the communication and ensures users are informed about the status of their messages.
+Read Receipts provide visibility into message status, letting users know when a message has been delivered and read. This brings clarity to communication and sets expectations about engagement.
- 
+ 
-| Components | Functionality |
-| -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Conversations](/ui-kit/angular/conversations) | [Conversations](/ui-kit/angular/conversations) is a Component that renders Conversations item List, Conversation item also displays the delivery status of the last message providing users with real-time updates on the status of their messages. |
-| [MessageList](/ui-kit/angular/message-list) | [MessageList](/ui-kit/angular/message-list) is a Component that renders different types of Message bubbles, Read Recept status is an integral part of all message bubbles, no matter the type, and provides real-time updates about the status of the message. |
-| [MessageInformation](/ui-kit/angular/message-information) | [MessageInformation](/ui-kit/angular/message-information) component provides transparency into the status of each sent message, giving the sender insights into whether their message has been delivered and read. |
+| Component | Functionality |
+| --- | --- |
+| [cometchat-conversations](/ui-kit/angular/components/cometchat-conversations) | Displays the delivery and read status of the last message in each conversation list item. |
+| [cometchat-message-list](/ui-kit/angular/components/cometchat-message-list) | Shows read receipt indicators on every message bubble, providing real-time status updates. |
+| [cometchat-message-information](/ui-kit/angular/components/cometchat-message-information) | Gives the sender detailed insights into whether their message has been delivered and read. |
## Typing Indicator
-The Typing Indicator feature in CometChat shows when a user is typing a response in real-time, fostering a more interactive and engaging chat environment. This feature enhances the real-time communication experience, making conversations feel more natural and fluid.
+The Typing Indicator shows when a user is composing a response in real time, making conversations feel more natural and interactive.
- 
+ 
-| Components | Functionality |
-| ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Conversations](/ui-kit/angular/conversations) | [Conversations](/ui-kit/angular/conversations) is a Component that renders Conversations item List, Conversations item also shows real-time typing status indicators. This means that if a user in a one-on-one chat or a participant in a group chat is currently typing a message |
-| [Message Header](/ui-kit/angular/message-header) | [Message Header](/ui-kit/angular/message-header) that renders details of User or Groups in ToolBar. The MessageHeader also handles the Typing Indicator functionality. When a user or a member in a group is typing, the MessageHeader dynamically updates to display a 'typing...' status in real-time. |
+| Component | Functionality |
+| --- | --- |
+| [cometchat-conversations](/ui-kit/angular/components/cometchat-conversations) | Shows real-time typing status indicators in conversation list items for both one-on-one and group chats. |
+| [cometchat-message-header](/ui-kit/angular/components/cometchat-message-header) | Dynamically updates to display a "typing…" status when a user or group member is composing a message. |
## User Presence
-CometChat's User Presence feature allows users to see whether their contacts are online, offline. This helps users know the best time to initiate a conversation and sets expectations about response times.
+User Presence lets users see whether their contacts are online or offline, helping them choose the best time to start a conversation.
- 
+ 
-| Components | Functionality |
-| ----------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Conversations](/ui-kit/angular/conversations) | [Conversations](/ui-kit/angular/conversations) is a Component that renders Conversations item List, Conversations item also shows user presence information. |
-| [Message Header](/ui-kit/angular/message-header) | [Message Header](/ui-kit/angular/message-header) that renders details of User or Groups in ToolBar. The MessageHeader also handles user Presence information. |
-| [Users](/ui-kit/angular/users) | [Users](/ui-kit/angular/users) renders list of users available in your app.It also responsible to render users Presence information. |
-| [Group Members](/ui-kit/angular/group-members) | [Group Members](/ui-kit/angular/group-members) renders list of users available in the group. The Group Members component also handles user Presence information. |
+| Component | Functionality |
+| --- | --- |
+| [cometchat-conversations](/ui-kit/angular/components/cometchat-conversations) | Displays user presence information alongside each conversation list item. |
+| [cometchat-message-header](/ui-kit/angular/components/cometchat-message-header) | Shows the online/offline status of the user or group in the message header toolbar. |
+| [cometchat-users](/ui-kit/angular/components/cometchat-users) | Renders the list of available users with their current presence status. |
+| [cometchat-group-members](/ui-kit/angular/components/cometchat-group-members) | Renders group member lists with presence information for each member. |
## Reactions
-CometChat's Reactions feature adds a layer of expressiveness to your chat application by allowing users to angular to messages. With Reactions, users can convey a range of emotions or express their thoughts on a particular message without typing out a full response, enhancing their user experience and fostering greater engagement.
+Reactions let users express emotions or respond to messages without typing a full reply, adding expressiveness and boosting engagement.
- 
+ 
-| Components | Functionality |
-| ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [MessageList](/ui-kit/angular/message-list) | [MessageList](/ui-kit/angular/message-list) is a Component that renders different types of Message bubbles, Irrespective of the type of message bubble, Reactions are an integral part and offer a more engaging, expressive way for users to respond to messages. |
-| [Messages](/ui-kit/angular/messages) | [Messages](/ui-kit/angular/messages)component in CometChat's UI Kit is a comprehensive component that includes both the [MessageComposer](/ui-kit/angular/message-composer) and the [MessageList](/ui-kit/angular/message-list) components. So, if you're looking to implement a messaging feature in your application, using the Messages component would be a straightforward and efficient way to do it. |
+| Component | Functionality |
+| --- | --- |
+| [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
-Mentions is a robust feature provided by CometChat that enhances the interactivity and clarity of group or 1-1 chats by allowing users to directly address or refer to specific individuals in a conversation.
+Mentions allow users to directly address specific individuals in a conversation using `@username`. The feature also supports `@all` to notify every member in a group chat simultaneously.
- 
+ 
-| Components | Functionality |
-| -------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Conversations](/ui-kit/angular/conversations) | [Conversations](/ui-kit/angular/conversations) component provides an enhanced user experience by integrating the Mentions feature. This means that from the conversation list itself, users can see where they or someone else have been specifically mentioned. |
-| [MessageComposer](/ui-kit/angular/message-composer) | [MessageComposer](/ui-kit/angular/message-composer) is a component that allows users to craft and send various types of messages, including the usage of the Mentions feature for direct addressing within the conversation. |
-| [MessageList](/ui-kit/angular/message-list) | [MessageList](/ui-kit/angular/message-list) is a component that displays a list of sent and received messages. It also supports the rendering of Mentions, enhancing the readability and interactivity of conversations. |
-| [Messages](/ui-kit/angular/messages) | [Messages](/ui-kit/angular/messages) The component is a comprehensive element in CometChat's UI Kit, encapsulating both the [MessageComposer](/ui-kit/angular/message-composer) and [MessageList](/ui-kit/angular/message-list) components. It fully supports the Mentions feature, providing a streamlined way to implement an interactive and engaging messaging function in your application. |
+| Component | Functionality |
+| --- | --- |
+| [cometchat-conversations](/ui-kit/angular/components/cometchat-conversations) | Shows mention indicators in conversation list items so users can see where they were mentioned. |
+| [cometchat-message-composer](/ui-kit/angular/components/cometchat-message-composer) | Provides the mention picker that appears as users type `@`, allowing them to select a user to mention. |
+| [cometchat-message-list](/ui-kit/angular/components/cometchat-message-list) | Renders mention highlights within message text, making mentioned names visually distinct. |
## Threaded Conversations
-The Threaded Conversations feature enables users to respond directly to a specific message in a chat. This keeps conversations organized and enhances the user experience by maintaining context, especially in group chats.
+Threaded Conversations enable users to respond directly to a specific message, keeping discussions organized and maintaining context — especially useful in group chats.
+
+
+ 
+
+
+| Component | Functionality |
+| --- | --- |
+| [cometchat-thread-header](/ui-kit/angular/components/cometchat-thread-header) | Displays the parent message along with the reply count at the top of a thread view. |
+| [cometchat-message-list](/ui-kit/angular/components/cometchat-message-list) | Renders thread replies when `parentMessageId` is set. |
+| [cometchat-message-composer](/ui-kit/angular/components/cometchat-message-composer) | Sends replies within a thread when `parentMessageId` is set. |
+
+## Quoted Replies
+
+Quoted Replies enable users to quickly reply to specific messages by selecting the "Reply" option from a message's action menu. This enhances context, keeps conversations organized, and improves overall chat experience in both one-on-one and group chats.
+
+
+ 
+
+
+| Component | Functionality |
+| --- | --- |
+| [cometchat-message-list](/ui-kit/angular/components/cometchat-message-list) | Supports replying to messages via the "Reply" option. Users can select "Reply" on a message to open the composer with the quoted reply pre-filled, maintaining context. |
+| [cometchat-message-composer](/ui-kit/angular/components/cometchat-message-composer) | Shows the quoted reply above the input field, providing context for the response. |
+
+## Rich Text Formatting
+
+Rich Text Formatting allows users to style their messages with bold, italic, underline, strikethrough, code, links, lists, and blockquotes. This brings richer expression to conversations and helps users emphasize key points, making communication clearer and more engaging.
- 
+ 
-| Components | Functionality |
-| ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| [Threaded Messages](/ui-kit/angular/threaded-messages) | [Threaded Messages](/ui-kit/angular/threaded-messages) that displays all replies made to a particular message in a conversation. |
+| Component | Functionality |
+| --- | --- |
+| [cometchat-message-composer](/ui-kit/angular/components/cometchat-message-composer) | Provides a built-in rich text editor with formatting toolbar, floating selection toolbar, and keyboard shortcuts for bold, italic, underline, strikethrough, code, links, lists, and blockquotes. |
+| [cometchat-message-list](/ui-kit/angular/components/cometchat-message-list) | Renders formatted messages with the appropriate styling applied, displaying bold, italic, underline, strikethrough, code, links, lists, and blockquote formatting as intended by the sender. |
+
+
+See the [Rich Text Formatting Guide](/ui-kit/angular/guides/rich-text-formatting) for detailed usage instructions.
+
## Group Chat
-CometChat facilitates Group Chats, allowing users to have conversations with multiple participants simultaneously. This feature is crucial for team collaborations, group discussions, social communities, and more.
+CometChat facilitates group conversations, allowing multiple participants to communicate simultaneously — ideal for team collaborations, group discussions, and social communities.
- 
+ 
-For a comprehensive understanding and guide on implementing and using the Groups feature in CometChat, you should refer to our detailed guide on [Groups](/ui-kit/angular/groups).
+| Component | Functionality |
+| --- | --- |
+| [cometchat-groups](/ui-kit/angular/components/cometchat-groups) | Renders the list of available groups with search, join, and create capabilities. |
+| [cometchat-group-members](/ui-kit/angular/components/cometchat-group-members) | Displays the members of a group with roles, presence status, and management actions. |
+
+## Moderation
+
+CometChat's Message Moderation feature helps maintain a safe and respectful chat environment by automatically filtering and managing inappropriate content. Messages can be automatically blocked or flagged based on predefined rules, ensuring harmful content is handled before it reaches users.
+
+
+ 
+
+
+
+Learn more about setting up moderation rules and managing content in the [Moderation](/moderation/overview) documentation.
+
+
+| Component | Functionality |
+| --- | --- |
+| [cometchat-message-list](/ui-kit/angular/components/cometchat-message-list) | Automatically handles moderated messages, displaying blocked content based on moderation settings. |
+
+## Report Message
+
+The Report Message feature allows users to report inappropriate or harmful messages within the chat. Users can choose from predefined reasons and provide additional remarks for detailed context. This feature helps maintain a safe and respectful chat environment.
+
+
+Learn more about how flagged messages are handled, reviewed, and moderated in the [Flagged Messages](/moderation/flagged-messages) documentation.
+
+
+
+ 
+
+
+| Component | Functionality |
+| --- | --- |
+| [cometchat-message-list](/ui-kit/angular/components/cometchat-message-list) | Provides the "Report Message" option in the message actions menu, allowing users to initiate the reporting process for inappropriate messages. |
+
+## Conversation and Advanced Search
+
+Conversation and Advanced Search enables users to quickly find conversations, messages, and media across chats in real time. It supports filters, scopes, and custom actions, allowing users to locate content efficiently while keeping the chat experience smooth and intuitive.
+
+
+ 
+
+
+| Component | Functionality |
+| --- | --- |
+| [cometchat-search](/ui-kit/angular/components/cometchat-search) | Allows users to search across conversations and messages in real time. Users can click on a result to open the conversation or jump directly to a specific message. |
+| [cometchat-message-header](/ui-kit/angular/components/cometchat-message-header) | Shows the search button in the chat header, allowing users to search within a conversation. |
+| [cometchat-message-list](/ui-kit/angular/components/cometchat-message-list) | Shows the selected message when clicked from search results and highlights it in the message list. |
+| [cometchat-conversations](/ui-kit/angular/components/cometchat-conversations) | Displays the search input for filtering conversations. |
+
+
+See the [Search Messages Guide](/ui-kit/angular/guides/search-messages) for detailed implementation instructions.
+
+
+---
+
+## Next Steps
+
+
+
+ Browse all available Angular UIKit components
+
+
+ Customize the look and feel of your chat UI
+
+
+ Add audio and video calling
+
+
+ Explore AI-powered chat capabilities
+
+
diff --git a/ui-kit/angular/customization/date-time-formatting.mdx b/ui-kit/angular/customization/date-time-formatting.mdx
new file mode 100644
index 000000000..78824f6aa
--- /dev/null
+++ b/ui-kit/angular/customization/date-time-formatting.mdx
@@ -0,0 +1,281 @@
+---
+title: "Date & Time Formatting"
+description: "Customize date and time display globally or per-component with language-aware defaults."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-angular` |
+| Key class | `CometChatLocalize` (global CalendarObject management) |
+| Key component | `CometChatDateComponent` (`cometchat-date` element) |
+| Required setup | `CometChatUIKit.init(uiKitSettings)` |
+| Purpose | Customize date/time formatting globally, per-component, or per-language |
+| Features | Language-specific defaults, global override, per-instance override, relative time |
+| Related | [Localization](/ui-kit/angular/customization/localization) \| [Theming](/ui-kit/angular/customization/theming) |
+
+
+
+CometChat UIKit provides flexible date/time formatting with language-aware defaults. Dates automatically adapt when you switch languages, and you can override formats globally or per-component.
+
+| Capability | Description |
+| --- | --- |
+| Language-specific defaults | Date formats auto-adapt per language (e.g., MM/DD/YYYY for en-US, DD/MM/YYYY for en-GB) |
+| Global override | Set a custom CalendarObject that applies to all components |
+| Per-component override | Pass a CalendarObject input to individual `cometchat-date` instances |
+| Relative time | Configure "X minutes ago" style formatting |
+| Timezone support | Set timezone globally via `CometChatLocalize` |
+
+---
+
+## How It Works
+
+The `cometchat-date` component resolves its date format using a fallback chain:
+
+1. Component `[calendarObject]` input (highest priority)
+2. Global CalendarObject from `CometChatLocalize.getCalendarObject()`
+3. Hardcoded fallback: `hh:mm A` / `[Yesterday]` / `dddd` / `DD/MM/YYYY`
+
+---
+
+## Language-Specific Defaults
+
+When you switch languages, date formats automatically adapt:
+
+| Language | Today | Yesterday | Other Days |
+| --- | --- | --- | --- |
+| en-US | `hh:mm A` | `[Yesterday]` | `MM/DD/YYYY` |
+| en-GB | `HH:mm` | `[Yesterday]` | `DD/MM/YYYY` |
+| de | `HH:mm` | `[Gestern]` | `DD.MM.YYYY` |
+| fr | `HH:mm` | `[Hier]` | `DD/MM/YYYY` |
+| es | `HH:mm` | `[Ayer]` | `DD/MM/YYYY` |
+| ja | `HH:mm` | `[昨日]` | `YYYY/MM/DD` |
+| ko | `HH:mm` | `[어제]` | `YYYY/MM/DD` |
+| zh | `HH:mm` | `[昨天]` | `YYYY/MM/DD` |
+| ru | `HH:mm` | `[Вчера]` | `DD.MM.YYYY` |
+| sv | `HH:mm` | `[Igår]` | `YYYY-MM-DD` |
+
+```typescript
+// Switching language automatically updates date formats
+CometChatLocalize.setCurrentLanguage('ja');
+// Dates now show YYYY/MM/DD format with Japanese "yesterday" label
+```
+
+---
+
+## Global Date Format Override
+
+Set a custom CalendarObject that applies to all `cometchat-date` instances:
+
+```typescript
+import { CometChatLocalize } from '@cometchat/chat-uikit-angular';
+
+// Set global date format
+CometChatLocalize.setGlobalCalendarObject({
+ today: 'HH:mm',
+ yesterday: '[Yesterday] HH:mm',
+ lastWeek: 'dddd HH:mm',
+ otherDays: 'DD/MM/YYYY'
+});
+```
+
+
+Once you set a custom global CalendarObject, switching languages will NOT override it. Your custom format is preserved across language changes. To revert to language-specific defaults, you would need to reset the CalendarObject.
+
+
+### Via Initialization
+
+```typescript
+CometChatLocalize.init({
+ language: 'en-US',
+ calendarObject: {
+ today: 'h:mm A',
+ yesterday: '[Yesterday] h:mm A',
+ lastWeek: 'dddd h:mm A',
+ otherDays: 'MMM DD, YYYY'
+ }
+});
+```
+
+---
+
+## Per-Component Override
+
+Pass a `calendarObject` input to individual `cometchat-date` instances:
+
+```html
+
+
+```
+
+```typescript
+customFormat: CalendarObject = {
+ today: 'HH:mm:ss',
+ yesterday: '[Yesterday] HH:mm',
+ lastWeek: 'ddd DD MMM',
+ otherDays: 'DD MMM YYYY'
+};
+```
+
+The component input always takes priority over the global CalendarObject.
+
+---
+
+## CalendarObject Reference
+
+```typescript expandable
+interface CalendarObject {
+ today?: string; // Format for today's dates
+ yesterday?: string; // Format for yesterday's dates
+ lastWeek?: string; // Format for dates within last 7 days
+ otherDays?: string; // Format for all other dates
+ relativeTime?: {
+ minute?: string; // "1 minute ago" (use %d for number)
+ minutes?: string; // "X minutes ago" (use %d for number)
+ hour?: string; // "1 hour ago" (use %d for number)
+ hours?: string; // "X hours ago" (use %d for number)
+ };
+}
+```
+
+### Format Tokens
+
+| Token | Output | Example |
+| --- | --- | --- |
+| `YYYY` | 4-digit year | 2026 |
+| `YY` | 2-digit year | 26 |
+| `MM` | 2-digit month | 03 |
+| `DD` | 2-digit day | 23 |
+| `dddd` | Full weekday | Monday |
+| `ddd` | Short weekday | Mon |
+| `HH` | 24-hour hour | 14 |
+| `hh` | 12-hour hour | 02 |
+| `mm` | Minutes | 30 |
+| `A` | AM/PM | PM |
+| `[text]` | Literal text | [Yesterday] → Yesterday |
+
+---
+
+## Relative Time
+
+Enable "X minutes ago" style formatting:
+
+```typescript expandable
+CometChatLocalize.setGlobalCalendarObject({
+ today: 'hh:mm A',
+ yesterday: '[Yesterday]',
+ lastWeek: 'dddd',
+ otherDays: 'DD/MM/YYYY',
+ relativeTime: {
+ minute: '1 minute ago',
+ minutes: '%d minutes ago',
+ hour: '1 hour ago',
+ hours: '%d hours ago'
+ }
+});
+```
+
+When `relativeTime` is configured, recent messages show relative timestamps instead of absolute times.
+
+---
+
+## Timezone
+
+```typescript
+// Set timezone globally
+CometChatLocalize.init({
+ language: 'en-US',
+ timezone: 'America/Los_Angeles'
+});
+
+// Or check current timezone
+const tz = CometChatLocalize.getTimezone();
+```
+
+---
+
+## Example: Custom Date Formats
+
+
+
+```typescript expandable
+import { Component, OnInit } from '@angular/core';
+import { CometChatLocalize } from '@cometchat/chat-uikit-angular';
+
+@Component({
+ selector: 'app-root',
+ template: `
+
+
+```typescript expandable
+import { Component } from '@angular/core';
+import { CalendarObject } from '@cometchat/chat-uikit-angular';
+
+@Component({
+ selector: 'app-chat',
+ template: `
+
+
+
+ `
+})
+export class ChatComponent {
+ lastSeen = 1640000000;
+
+ compactFormat: CalendarObject = {
+ today: 'HH:mm',
+ yesterday: '[Yest]',
+ lastWeek: 'ddd',
+ otherDays: 'DD/MM'
+ };
+}
+```
+
+
+
+---
+
+## Next Steps
+
+
+
+ Override translations globally or per-component.
+
+
+ Customize colors, fonts, and spacing.
+
+
+ Add custom message types with templates.
+
+
+ Configure global UIKit settings.
+
+
diff --git a/ui-kit/angular/v5/customization/global-config.mdx b/ui-kit/angular/customization/global-config.mdx
similarity index 88%
rename from ui-kit/angular/v5/customization/global-config.mdx
rename to ui-kit/angular/customization/global-config.mdx
index ac2f63da4..17cfe3652 100644
--- a/ui-kit/angular/v5/customization/global-config.mdx
+++ b/ui-kit/angular/customization/global-config.mdx
@@ -146,10 +146,10 @@ Even with a global `callSettingsBuilder`, you can override it on individual comp
| Component | Behavior |
|-----------|----------|
-| [CometChatOngoingCall](/ui-kit/angular/v5/components/cometchat-outgoing-call) | Accepts `callSettingsBuilder` as `@Input`. Passes it to `OngoingCallService`. |
-| [CometChatCallButtons](/ui-kit/angular/v5/components/cometchat-call-buttons) | Accepts `callSettingsBuilder` as `@Input`. Forwards to `CometChatOngoingCall`. |
-| [CometChatMessageHeader](/ui-kit/angular/v5/components/cometchat-message-header) | Accepts `callSettingsBuilder` as `@Input`. Forwards to `CometChatCallButtons`. |
-| [CometChatCallLogs](/ui-kit/angular/v5/components/cometchat-call-logs) | Accepts `callSettingsBuilder` as `@Input`. Uses it in the ongoing call overlay. |
+| [CometChatOngoingCall](/ui-kit/angular/components/cometchat-outgoing-call) | Accepts `callSettingsBuilder` as `@Input`. Passes it to `OngoingCallService`. |
+| [CometChatCallButtons](/ui-kit/angular/components/cometchat-call-buttons) | Accepts `callSettingsBuilder` as `@Input`. Forwards to `CometChatOngoingCall`. |
+| [CometChatMessageHeader](/ui-kit/angular/components/cometchat-message-header) | Accepts `callSettingsBuilder` as `@Input`. Forwards to `CometChatCallButtons`. |
+| [CometChatCallLogs](/ui-kit/angular/components/cometchat-call-logs) | Accepts `callSettingsBuilder` as `@Input`. Uses it in the ongoing call overlay. |
## Components That Read GlobalConfig
@@ -212,6 +212,6 @@ export const appConfig: ApplicationConfig = {
## Related
-- [Theming](/ui-kit/angular/v5/customization/theming) — Customize the visual appearance with CSS variables
-- [Localization](/ui-kit/angular/v5/customization/localization) — Configure language and translations
-- [ChatStateService](/ui-kit/angular/v5/api-reference/chat-state-service) — Centralized chat state management
+- [Theming](/ui-kit/angular/customization/theming) — Customize the visual appearance with CSS variables
+- [Localization](/ui-kit/angular/customization/localization) — Configure language and translations
+- [ChatStateService](/ui-kit/angular/api-reference/chat-state-service) — Centralized chat state management
diff --git a/ui-kit/angular/v5/customization/localization.mdx b/ui-kit/angular/customization/localization.mdx
similarity index 98%
rename from ui-kit/angular/v5/customization/localization.mdx
rename to ui-kit/angular/customization/localization.mdx
index dad930235..ee81e9301 100644
--- a/ui-kit/angular/v5/customization/localization.mdx
+++ b/ui-kit/angular/customization/localization.mdx
@@ -13,7 +13,7 @@ description: "Configure multi-language support, override translations globally,
| Required setup | `CometChatUIKit.init(uiKitSettings)` |
| Purpose | Multi-language support with runtime switching and global overrides |
| Features | 19 built-in languages, runtime switching, custom translations |
-| Related | [Date/Time Formatting](/ui-kit/angular/v5/customization/localization) \| [Theming](/ui-kit/angular/v5/customization/theming) |
+| Related | [Date/Time Formatting](/ui-kit/angular/customization/localization) \| [Theming](/ui-kit/angular/customization/theming) |
diff --git a/ui-kit/angular/customization/migration-guide.mdx b/ui-kit/angular/customization/migration-guide.mdx
new file mode 100644
index 000000000..228b0fbe2
--- /dev/null
+++ b/ui-kit/angular/customization/migration-guide.mdx
@@ -0,0 +1,283 @@
+---
+title: "Upgrading From V4"
+description: "Upgrading from CometChat Angular UIKit v4 to v5 — architecture changes, theming, properties, and shared dependencies."
+---
+
+## Introduction
+
+The **CometChat v5 Angular UI Kit** streamlines the integration of in-app chat functionality into your applications. Packed with prebuilt, modular UI components, it supports essential messaging features for both one-to-one and group conversations. With built-in theming options, including light and dark modes, customizable fonts, colors, and extensive configuration possibilities, developers can create chat experiences tailored to their application's needs.
+
+
+ 
+
+
+## Integration
+
+In **v4**, integration was straightforward due to the availability of composite components like `CometChatConversationsWithMessages`. This single component provided end-to-end functionality, including listing conversations, handling conversation clicks, loading messages (message header, list, composer), displaying user or group details, and supporting threaded messages. Developers could achieve all these features with minimal setup. However, customization posed significant challenges. Customizing the UI or adding custom views required a deep understanding of the internal flow of the composite component. Additionally, configurations were a mix of custom view props, behavioural props, and style props, which often led to confusion. Styling deeply nested components also proved cumbersome, limiting the developer's ability to make meaningful changes.
+
+
+ 
+
+
+With **v5**, composite components have been replaced with smaller, modular standalone components, such as `CometChatConversations`, `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer`. This modular approach makes integration more flexible and easier to understand. Each component has a well-defined purpose, allowing developers to use them in ways that suit their specific requirements. The need for complex configurations has been eliminated, as developers can now customize behavior and styling directly via CSS variables and Angular template projections. Styling has been significantly simplified, with every component carefully assigned thoughtful CSS class names following BEM methodology, enabling developers to customize styles globally or at the component level effortlessly.
+
+To support the transition from v4 to v5, CometChat has built a [sample app](https://github.com/cometchat/cometchat-uikit-angular/tree/v5) that replicates the functionality of v4's composite components. This sample app serves as a reference for developers looking to build additional features such as user/group details, call log details, threaded messages, and advanced messaging capabilities. By following this approach, developers can take full advantage of v5's modular design while implementing complex functionality in an organized manner.
+
+
+ 
+
+
+
+
+Learn how to build a complete messaging UI using the **v5 UI Kit** by following the step-by-step guide [here](/ui-kit/angular/integration).
+
+
+
+## Components
+
+The **v4** UI Kit provided composite components like `CometChatConversationsWithMessages`, which offered end-to-end functionality. These components integrated features such as conversation lists, message views (header, list, composer), user/group details, and threaded messages into a single unit. However, customization of deeply nested components through configuration was challenging and resulted in a suboptimal developer experience.
+
+| Components in v4 UI Kit: | | |
+| ---------------------------------- | -------------------------- | ---------------------------- |
+| CometChatConversationsWithMessages | CometChatUsersWithMessages | CometChatGroupsWithMessages |
+| CometChatMessages | CometChatMessageHeader | CometChatMessageList |
+| CometChatMessageComposer | CometChatThreadedMessages | CometChatConversations |
+| CometChatUsers | CometChatGroups | CometChatContacts |
+| CometChatDetails | CometChatGroupMembers | CometChatAddMembers |
+| CometChatBannedMembers | CometChatTransferOwnership | CometChatMessageInformation |
+| CometChatIncomingCall | CometChatOngoingCall | CometChatOutgoingCall |
+| CometChatCallButtons | CometChatCallLogs | CometChatCallLogDetails |
+| CometChatCallLogHistory | CometChatCallLogRecordings | CometChatCallLogParticipants |
+| CometChatCallLogsWithDetails | CometChatUserMemberWrapper | |
+
+In **v5**, the composite approach is replaced with smaller, modular standalone components like `CometChatConversations`, `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer`. Developers now stitch these components together to build the desired functionality. This change allows for greater flexibility and easier customization, significantly improving the developer experience while maintaining functionality.
+
+| Components in v5 UI Kit: | | |
+| ---------------------------- | ------------------------------ | --------------------------- |
+| CometChatConversations | CometChatUsers | CometChatGroups |
+| CometChatGroupMembers | CometChatMessageHeader | CometChatMessageList |
+| CometChatMessageComposer | CometChatThreadHeader | CometChatIncomingCall |
+| CometChatOutgoingCall | CometChatOngoingCall | CometChatCallButtons |
+| CometChatCallLogs | CometChatSearch | CometChatMessageInformation |
+| CometChatConversationStarter | CometChatSmartReplies | CometChatConversationSummary|
+
+## Theming
+
+In **v4**, theming was managed using the `CometChatThemeService`, an injectable Angular service with two key properties: `Palette` and `Typography`. The Palette property provided methods like `setPrimary()`, `setAccent()`, and `setMode()` for configuring colors and themes. The Typography property provided methods like `setFontFamily()` and `setFontWeightBold()` for configuring text styles. Developers injected this service in their component constructors and called setter methods to customize the appearance.
+
+While this approach worked, it introduced several challenges. Customizing themes required programmatic interaction with the service in every component that needed theming. Switching between light and dark modes required calling `setMode()` on the palette. Per-component styling required passing dedicated style objects (like `ConversationsStyle`, `AvatarStyle`, `ListItemStyle`) as inputs, which was verbose and hard to maintain across large applications.
+
+```typescript app.component.ts
+import { Component } from '@angular/core';
+import { CometChatThemeService } from '@cometchat/chat-uikit-angular';
+
+@Component({
+ selector: 'app-root',
+ templateUrl: './app.component.html'
+})
+export class AppComponent {
+ constructor(private themeService: CometChatThemeService) {
+ themeService.theme.palette.setMode("light");
+ themeService.theme.palette.setPrimary({ light: "#6851D6", dark: "#6851D6" });
+ themeService.theme.palette.setAccent({ light: "#6851D6", dark: "#6851D6" });
+ }
+}
+```
+
+In **v5**, theming has been completely revamped. The older `CometChatThemeService` and style object system have been replaced with modern CSS variables. This means every design token — colors, spacing, typography — is now represented as a CSS variable. Changing the primary color is as simple as updating a CSS variable; no need to interact with complex theming logic or inject services. The use of CSS variables makes styling declarative and lightweight, enhancing both performance and developer experience.
+
+To ensure consistency and scalability, the new theming system adheres to the **BEM** (Block Element Modifier) methodology for class naming. The new theming approach enables developers to style components either globally or at a component-specific level with precision. For example, applying a unique style to a particular element within a component or globally is now straightforward. This move to CSS variables and thoughtful class naming marks a significant improvement in theming flexibility and simplicity.
+
+```css styles.css
+@import '@cometchat/chat-uikit-angular/styles/css-variables.css';
+
+.cometchat {
+ --cometchat-primary-color: #f76808;
+ --cometchat-neutral-color-300: #ffffff;
+ --cometchat-background-color-03: #feede1;
+}
+
+@media (prefers-color-scheme: dark) {
+ .cometchat {
+ --cometchat-primary-color: #f76808;
+ --cometchat-neutral-color-300: #311502;
+ --cometchat-background-color-03: #451d02;
+ }
+}
+```
+
+```typescript app.component.ts
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ template: `
+
+
+
+ `
+})
+export class AppComponent implements OnInit {
+ theme = 'light';
+
+ ngOnInit(): void {
+ const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+ this.theme = mediaQuery.matches ? 'dark' : 'light';
+ mediaQuery.addEventListener('change', (e) => {
+ this.theme = e.matches ? 'dark' : 'light';
+ });
+ }
+}
+```
+
+
+
+For detailed guidance on theming and customizing colors in the CometChat Angular UI Kit, refer to the following resources:
+
+* **Theming Documentation:** [Guide to Theming](/ui-kit/angular/customization/theming)
+
+
+
+## Properties
+
+In **v5**, the approach to properties has been significantly refined to improve clarity and ease of use. All style-related inputs — previously used to customize components via style objects like `ConversationsStyle`, `AvatarStyle`, `ListItemStyle`, `BadgeStyle`, `DateStyle`, and `StatusIndicatorStyle` — have been replaced by a more efficient and native theming system based on CSS variables. This change ensures a seamless and flexible styling process without the need for verbose or redundant configuration within the component inputs.
+
+Configuration inputs, which were prominent in v4, have also been eliminated. With v5's modular design, components are no longer nested inside composite wrappers, making such configurations unnecessary. Developers now have direct control over each component, reducing complexity and increasing flexibility in how components are used and styled.
+
+Custom view inputs have undergone a comprehensive overhaul to ensure consistency across all components. For example, components that are represented as list items now share a uniform set of customizable template inputs, enabling a standardized approach to customization. These inputs include `itemView`, `leadingView`, `trailingView`, `subtitleView`, and `titleView`. This consistent naming convention makes it easier for developers to understand and apply customizations across various components, streamlining the development process.
+
+**Event naming** has also been standardized. In v4, events were callback function inputs with an `on` prefix (e.g., `[onItemClick]="handler"`). In v5, events are proper Angular `@Output()` EventEmitters without the `on` prefix (e.g., `(itemClick)="handler($event)"`). This aligns with Angular conventions and provides better IDE support.
+
+| v4 Event Pattern | v5 Event Pattern |
+|------------------|------------------|
+| `[onItemClick]="handleItemClick"` | `(itemClick)="handleItemClick($event)"` |
+| `[onSelect]="handleSelect"` | `(select)="handleSelect($event)"` |
+| `[onError]="handleError"` | `(error)="handleError($event)"` |
+| `[onBack]="handleBack"` | `(backClick)="handleBack()"` |
+| `[onThreadRepliesClick]="handleThread"` | `(threadRepliesClick)="handleThread($event)"` |
+
+## Shared Dependencies
+
+In **v4**, the Angular UI Kit relied on three shared packages: `@cometchat/uikit-resources`, `@cometchat/uikit-elements`, and `@cometchat/uikit-shared`, designed to provide common functionality and resources across the Web UI Kits (React, Angular, Vue). While these shared packages promoted code reuse, they came with significant drawbacks.
+
+One major issue was the reliance on web components in the `uikit-elements` and `uikit-shared` packages. This required the use of `CUSTOM_ELEMENTS_SCHEMA` in every Angular module that used CometChat components. Styling web components via CSS was inherently restrictive, often requiring additional effort to achieve desired results. Furthermore, the web component layer added complexity to Angular's change detection and made debugging more difficult. IDE support for web component attributes was also limited, reducing developer productivity.
+
+```typescript
+// v4: Required CUSTOM_ELEMENTS_SCHEMA and peer dependencies
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { CometChatConversations } from '@cometchat/chat-uikit-angular';
+import "@cometchat/uikit-elements"; // Required side-effect import
+
+@NgModule({
+ imports: [CometChatConversations],
+ schemas: [CUSTOM_ELEMENTS_SCHEMA] // Required for web components
+})
+export class AppModule {}
+```
+
+In **v5**, these challenges have been addressed with a complete shift to pure Angular standalone components. The dependency on shared web component packages has been removed entirely, enabling seamless integration with Angular's ecosystem. Pure Angular components eliminate limitations around styling, allowing developers to leverage modern CSS techniques without restrictions. They also provide native Angular behavior — proper `@Input()` and `@Output()` bindings, full TypeScript type checking, and complete IDE autocompletion support — significantly enhancing the development experience.
+
+```typescript
+// v5: No CUSTOM_ELEMENTS_SCHEMA, no peer dependencies, full type safety
+import { Component } from '@angular/core';
+import {
+ CometChatConversationsComponent,
+ CometChatMessageListComponent,
+ CometChatMessageComposerComponent
+} from '@cometchat/chat-uikit-angular';
+
+@Component({
+ selector: 'app-chat',
+ standalone: true,
+ imports: [
+ CometChatConversationsComponent,
+ CometChatMessageListComponent,
+ CometChatMessageComposerComponent
+ ],
+ template: `
+
+
+For detailed guidance on state management patterns, refer to the [State Management Guide](/ui-kit/angular/guides/state-management) and the [ChatStateService API Reference](/ui-kit/angular/api-reference/chat-state-service).
+
+
+
+## Localization
+
+Both **v4** and **v5** use a built-in `CometChatLocalize` class for localization — no external libraries are required. The API has been slightly updated in v5 with method renames and expanded language support (19 languages, up from 12).
+
+| v4 Method | v5 Method |
+|-----------|-----------|
+| `CometChatLocalize.setLocale("hi")` | `CometChatLocalize.setCurrentLanguage("hi")` |
+| `CometChatLocalize.getLocale()` | `CometChatLocalize.getCurrentLanguage()` |
+| `CometChatLocalize.init()` | Not needed — auto-initializes |
+
+v5 also introduces a `translate` pipe for use directly in templates:
+
+```html
+{{ 'SEND_MESSAGE' | translate }}
+```
+
+## Quick Migration Checklist
+
+- [ ] Update package: `npm install @cometchat/chat-uikit-angular`
+- [ ] Remove peer dependencies: `npm uninstall @cometchat/uikit-elements @cometchat/uikit-resources @cometchat/uikit-shared`
+- [ ] Remove `CUSTOM_ELEMENTS_SCHEMA` from NgModule schemas
+- [ ] Remove `import "@cometchat/uikit-elements"` side-effect imports
+- [ ] Convert components to standalone (recommended) or update module imports
+- [ ] Import CSS variables in global styles: `@import '@cometchat/chat-uikit-angular/styles/css-variables.css'`
+- [ ] Remove `CometChatThemeService` injection — use CSS variables instead
+- [ ] Remove all `*Style` input properties (`[conversationsStyle]`, `[avatarStyle]`, etc.)
+- [ ] Replace style objects with CSS variable overrides
+- [ ] Update event bindings: `[onXxx]="handler"` → `(xxx)="handler($event)"`
+- [ ] Optionally adopt `ChatStateService` for shared state (remove repeated `[user]`/`[group]` bindings)
+- [ ] Update localization calls: `setLocale()` → `setCurrentLanguage()`
+- [ ] Test dark mode with `data-theme="dark"` attribute
+- [ ] Verify all functionality works as expected
diff --git a/ui-kit/angular/v5/customization/theming.mdx b/ui-kit/angular/customization/theming.mdx
similarity index 100%
rename from ui-kit/angular/v5/customization/theming.mdx
rename to ui-kit/angular/customization/theming.mdx
diff --git a/ui-kit/angular/events.mdx b/ui-kit/angular/events.mdx
index 636e6ac86..6475955f7 100644
--- a/ui-kit/angular/events.mdx
+++ b/ui-kit/angular/events.mdx
@@ -1,100 +1,168 @@
---
title: "Events"
-description: "Events — CometChat documentation."
+description: "Reference for CometChat Angular UIKit events including conversation, user, group, message, call, and UI events."
---
-## Overview
+Events provide decoupled communication between UIKit components using a publish/subscribe event bus pattern. Components emit events in response to user interactions or state changes, allowing other parts of your application to react without direct component references. In Angular, you subscribe to these events using RxJS observables and manage subscriptions through component lifecycle hooks.
-Events allow for a decoupled, flexible architecture where different parts of the application can interact without having to directly reference each other. This makes it easier to create complex, interactive experiences, as well as to extend and customize the functionality provided by the CometChat UI Kit.
+## CometChatConversationEvents
-Both Components and Composite Components have the ability to emit events. These events are dispatched in response to certain changes or user interactions within the component. By emitting events, these components allow other parts of the application to react to changes or interactions, thus enabling dynamic and interactive behavior within the application.
+`CometChatConversationEvents` emits events when the logged-in user acts on a conversation object.
-### CometChatConversationEvents
+| Event Name | Description |
+| ------------------------- | ------------------------------------------------------------------------------------------------ |
+| **ccConversationDeleted** | Triggered when the user successfully deletes a conversation. |
+| **ccUpdateConversation** | Triggered to update a conversation in the conversation list. Takes a Conversation object to update. |
-`CometChatConversationEvents` emits events when the logged-in user executes some action on a conversation object.
+## CometChatUserEvents
-| Name | Description |
-| --------------------- | -------------------------------------------------------------------------- |
-| ccConversationDeleted | This event is triggered when the user successfully deletes a conversation. |
+`CometChatUserEvents` emits events when the logged-in user acts on another user object.
+
+| Event Name | Description |
+| ------------------- | ------------------------------------------------------------------------- |
+| **ccUserBlocked** | Triggered when the user successfully blocks another user. |
+| **ccUserUnblocked** | Triggered when the user successfully unblocks another user. |
+
+## CometChatGroupEvents
-### CometChatUserEvents
-
-`CometChatUserEvents` emits events when the logged-in user executes some action on an user object.
-
-It consists of the following events:
-
-| Name | Description |
-| --------------- | ------------------------------------------------------------------------- |
-| ccUserBlocked | This event is triggered when the user successfully blocks another user. |
-| ccUserUnblocked | This event is triggered when the user successfully unblocks another user. |
-
-### CometChatGroupEvents
-
-`CometChatGroupEvents` emits events when the logged-in user executes some action on a group object.
-
-It consists of the following events:
-
-| Name | Description |
-| ------------------------- | ------------------------------------------------------------------------------------ |
-| ccGroupCreated | This event is triggered when the user creates a group successfully |
-| ccGroupDeleted | This event is triggered when the group member deletes the group successfully |
-| ccGroupLeft | This event is triggered when the group member leaves the group successfully |
-| ccGroupMemberScopeChanged | This event is triggered when the group member's scope is updated successfully |
-| ccGroupMemberKicked | This event is triggered when the group member is kicked |
-| ccGroupMemberBanned | This event is triggered when the group member is banned |
-| ccGroupMemberUnbanned | This event is triggered when the group member is un-banned |
-| ccGroupMemberJoined | This event is triggered when a user joins the group |
-| ccGroupMemberAdded | This event is triggered when a user is added to the group |
-| ccOwnershipChanged | This event is triggered when the group ownership is assigned to another group member |
-
-### CometChatMessageEvents
-
-`CometChatMessageEvents` emits events when the logged-in user executes some action on a message object.
-
-It consists of the following events:
-
-| Name | Description |
-| ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
-| ccMessageSent | This event is triggered when the sent message is in transit and also when it is received by the receiver. |
-| ccMessageEdited | This event is triggered when the user successfully edits the message. |
-| ccMessageDeleted | This event is triggered when the user successfully deletes the message. |
-| ccMessageRead | This event is triggered when the sent message is read by the receiver. |
-| ccLiveReaction | This event is triggered when the user sends a live reaction. |
-| onTextMessageReceived | This event is emitted when the CometChat SDK listener emits a text message. |
-| onMediaMessageReceived | This event is emitted when the CometChat SDK listener emits a media message. |
-| onCustomMessageReceived | This event is emitted when the CometChat SDK listener emits a custom message. |
-| onTypingStarted | This event is emitted when the CometChat SDK listener indicates that a user has started typing. |
-| onTypingEnded | This event is emitted when the CometChat SDK listener indicates that a user has stopped typing. |
-| onMessagesDelivered | This event is emitted when the CometChat SDK listener indicates that messages have been delivered. |
-| onMessagesRead | This event is emitted when the CometChat SDK listener indicates that messages have been read. |
-| onMessageEdited | This event is emitted when the CometChat SDK listener indicates that a message has been edited. |
-| onMessageDeleted | This event is emitted when the CometChat SDK listener indicates that a message has been deleted. |
-| onTransientMessageReceived | This event is emitted when the CometChat SDK listener emits a transient message. |
-| onInteractionGoalCompleted | This event is emitted when the CometChat SDK listener indicates that an interaction goal has been completed. |
-| onFormMessageReceived | This event is emitted when an interactive message of 'form' type is received from the CometChat SDK listener. |
-| onCardMessageReceived | This event is emitted when an interactive message of 'card' type is received from the CometChat SDK listener. |
-| onSchedulerMessageReceived | This event is emitted when an interactive message of 'scheduler' type is received from the CometChat SDK listener. |
-| onCustomInteractiveMessageReceived | This event is emitted when an interactive message of 'customInteractive' type is received from the CometChat SDK listener. |
-
-### CometChatCallEvents
-
-`CometChatCallEvents` emits events when the logged-in user executes some action on a call object.
-
-It consists of the following events:
-
-| Name | Description |
-| -------------- | ---------------------------------------------------------------------------- |
-| ccOutgoingCall | This event is triggered when the user initiates a voice/video call. |
-| ccCallAccepted | This event is triggered when the initiated call is accepted by the receiver. |
-| ccCallRejected | This event is triggered when the initiated call is rejected by the receiver. |
-| ccCallEnded | This event is triggered when the initiated call successfully ends. |
-
-### UI events
-
-UI events, refer to actions or interactions performed by a user within the CometChat's UI Kit. These events are triggered when a user interacts with various UI elements, such as buttons, menus, checkboxes, input fields, or any other interactive components.
-
-It consists of the following events:
-
-| Name | Description |
-| ------------------- | ---------------------------------------------------------------------------- |
-| ccActiveChatChanged | This event is triggered when the user navigates to a particular chat window. |
+`CometChatGroupEvents` emits events when the logged-in user acts on a group object.
+
+| Event Name | Description |
+| ------------------------------- | ------------------------------------------------------------------------------------ |
+| **ccGroupCreated** | Triggered when the user creates a group successfully. |
+| **ccGroupDeleted** | Triggered when the group member deletes the group successfully. |
+| **ccGroupLeft** | Triggered when the group member leaves the group successfully. |
+| **ccGroupMemberScopeChanged** | Triggered when the group member's scope is updated successfully. |
+| **ccGroupMemberKicked** | Triggered when a group member is kicked. |
+| **ccGroupMemberBanned** | Triggered when a group member is banned. |
+| **ccGroupMemberUnbanned** | Triggered when a group member is un-banned. |
+| **ccGroupMemberJoined** | Triggered when a user joins the group. |
+| **ccGroupMemberAdded** | Triggered when a user is added to the group. |
+| **ccOwnershipChanged** | Triggered when the group ownership is assigned to another group member. |
+
+## CometChatMessageEvents
+
+`CometChatMessageEvents` emits events when the logged-in user acts on a message object. This category includes both UIKit-level events and CometChat SDK listener events.
+
+### UIKit Events
+
+| Event Name | Description |
+| --------------------- | --------------------------------------------------------------------------------------------------------- |
+| **ccMessageSent** | Triggered when the sent message is in transit and also when it is received by the receiver. |
+| **ccMessageEdited** | Triggered when the user successfully edits a message. |
+| **ccReplyToMessage** | Triggered when the user successfully replies to a message. |
+| **ccMessageDeleted** | Triggered when the user successfully deletes a message. |
+| **ccMessageRead** | Triggered when the sent message is read by the receiver. |
+| **ccLiveReaction** | Triggered when the user sends a live reaction. |
+
+### SDK Listener Events
+
+| Event Name | Description |
+| -------------------------------- | ---------------------------------------------------------------------------------------- |
+| **onTextMessageReceived** | Emitted when the CometChat SDK listener receives a text message. |
+| **onMediaMessageReceived** | Emitted when the CometChat SDK listener receives a media message. |
+| **onCustomMessageReceived** | Emitted when the CometChat SDK listener receives a custom message. |
+| **onTypingStarted** | Emitted when the CometChat SDK listener indicates that a user has started typing. |
+| **onTypingEnded** | Emitted when the CometChat SDK listener indicates that a user has stopped typing. |
+| **onMessagesDelivered** | Emitted when the CometChat SDK listener indicates that messages have been delivered. |
+| **onMessagesRead** | Emitted when the CometChat SDK listener indicates that messages have been read. |
+| **onMessageEdited** | Emitted when the CometChat SDK listener indicates that a message has been edited. |
+| **onMessageDeleted** | Emitted when the CometChat SDK listener indicates that a message has been deleted. |
+| **onTransientMessageReceived** | Emitted when the CometChat SDK listener receives a transient message. |
+
+## CometChatCallEvents
+
+`CometChatCallEvents` emits events when the logged-in user acts on a call object.
+
+| Event Name | Description |
+| ------------------ | ---------------------------------------------------------------------------- |
+| **ccOutgoingCall** | Triggered when the user initiates a voice/video call. |
+| **ccCallAccepted** | Triggered when the initiated call is accepted by the receiver. |
+| **ccCallRejected** | Triggered when the initiated call is rejected by the receiver. |
+| **ccCallEnded** | Triggered when the initiated call successfully ends. |
+
+## UI Events
+
+UI events are triggered when a user interacts with UIKit elements such as buttons, menus, or input fields.
+
+| Event Name | Description |
+| ----------------------- | ---------------------------------------------------------------------------- |
+| **ccActiveChatChanged** | Triggered when the user navigates to a particular chat window. |
+
+## Usage
+
+Subscribe to events in `ngOnInit` and unsubscribe in `ngOnDestroy` to prevent memory leaks.
+
+```typescript expandable
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { CometChatMessageEvents } from '@cometchat/chat-uikit-angular';
+import { Subscription } from 'rxjs';
+
+@Component({
+ selector: 'app-chat',
+ standalone: true,
+ template: ``
+})
+export class ChatComponent implements OnInit, OnDestroy {
+ private messageSubscription?: Subscription;
+
+ ngOnInit(): void {
+ this.messageSubscription = CometChatMessageEvents.ccMessageSent.subscribe(
+ (message) => {
+ console.log('Message sent:', message);
+ }
+ );
+ }
+
+ ngOnDestroy(): void {
+ this.messageSubscription?.unsubscribe();
+ }
+}
+```
+
+
+When subscribing to multiple events, consider using a `Subscription` container to manage all subscriptions together.
+
+
+```typescript expandable
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import {
+ CometChatMessageEvents,
+ CometChatConversationEvents,
+ CometChatGroupEvents
+} from '@cometchat/chat-uikit-angular';
+import { Subscription } from 'rxjs';
+
+@Component({
+ selector: 'app-chat-listener',
+ standalone: true,
+ template: ``
+})
+export class ChatListenerComponent implements OnInit, OnDestroy {
+ private subscriptions = new Subscription();
+
+ ngOnInit(): void {
+ this.subscriptions.add(
+ CometChatMessageEvents.ccMessageSent.subscribe((message) => {
+ console.log('Message sent:', message);
+ })
+ );
+
+ this.subscriptions.add(
+ CometChatConversationEvents.ccConversationDeleted.subscribe((conversation) => {
+ console.log('Conversation deleted:', conversation);
+ })
+ );
+
+ this.subscriptions.add(
+ CometChatGroupEvents.ccGroupMemberAdded.subscribe((data) => {
+ console.log('Member added:', data);
+ })
+ );
+ }
+
+ ngOnDestroy(): void {
+ this.subscriptions.unsubscribe();
+ }
+}
+```
diff --git a/ui-kit/angular/extensions.mdx b/ui-kit/angular/extensions.mdx
index e7cd18089..e08371ad3 100644
--- a/ui-kit/angular/extensions.mdx
+++ b/ui-kit/angular/extensions.mdx
@@ -1,132 +1,185 @@
---
title: "Extensions"
-description: "Extensions — CometChat documentation."
+description: "Enable CometChat Angular UI Kit extensions for stickers, polls, collaboration tools, reactions, moderation, smart replies, and link previews."
---
## Overview
-CometChat's UI Kit offers built-in support for various extensions, enriching the chatting experience with enhanced functionality. These extensions augment your chat application, making it more interactive, secure, and efficient.
+CometChat UI Kit includes built-in support for extensions that add interactive, secure, and efficient features to chat. Extensions are activated from the CometChat Dashboard and auto-integrate into UI Kit components on init and login.
-Activating extensions within CometChat is a straightforward process through your application's dashboard. For detailed instructions, refer to our guide on [Extensions](/fundamentals/extensions-overview).
+
+Ensure `CometChatUIKit.init()` has completed and the user is logged in. Extensions must be activated from the CometChat Dashboard.
+
-Once you've enabled your desired extension in the dashboard, it seamlessly integrates into your CometChat application upon initialization and successful login. It's important to note that extension features will only be available if they are supported by the CometChat UI Kit.
+## Built-in Extensions
-CometChat's UI Kit provides native support for 12 powerful extensions. This effortless integration enables you to enhance your chat application with engaging features without any additional coding. Simply enable the desired extensions from the CometChat Dashboard, and they will automatically enhance the relevant components of your application, providing a richer and more engaging experience for your users.
+The grouping below mirrors the CometChat Dashboard.
-## Built-in Extensions
+### User Experience
+
+#### Bitly
-Here's a guide on how you can enable and integrate these extensions:
+Shortens long URLs in text messages using Bitly.
-### Stickers
+#### Link Preview
-The Stickers extension allows users to express their emotions more creatively. It adds a much-needed fun element to the chat by allowing users to send various pre-designed stickers. For a comprehensive understanding and guide on implementing and using the Sticker Extension, refer to our specific guide on the [Sticker Extension](/fundamentals/stickers).
+Displays a summary (title, description, thumbnail) for URLs shared in chat.
-Once you have successfully activated the [Sticker Extension](/fundamentals/stickers) from your CometChat Dashboard, the feature will automatically be incorporated into the [Message Composer](/ui-kit/angular/message-composer) component of UI Kits.
+Auto-integrates into the Message Bubble of [cometchat-message-list](/ui-kit/angular/components/cometchat-message-list) when activated.
- 
+ 
-### Polls
+#### Message Shortcuts
-The Polls extension enhances group discussions by allowing users to create polls. Users can ask questions with a predefined list of answers, enabling a quick, organized way to gather group opinions. For a comprehensive understanding and guide on implementing and using the Polls Extension, refer to our specific guide on the [Polls Extension](/fundamentals/polls).
+Sends predefined messages using short codes (e.g., `!hb` expands to `Happy birthday!`).
-Once you have successfully activated the [Polls Extension](/fundamentals/polls) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/angular/message-composer) component of UI Kits.
+#### Pin Message
-
- 
-
+Pins important messages in a conversation for easy access.
-### Collaborative Whiteboard
+#### Rich Media Preview
-The Collaborative Whiteboard extension facilitates real-time collaboration. Users can draw, brainstorm, and share ideas on a shared digital whiteboard. For a comprehensive understanding and guide on implementing and using the Collaborative Whiteboard Extension, refer to our specific guide on the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard).
+Generates rich preview panels for URLs.
-Once you have successfully activated the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/angular/message-composer) component of UI Kits.
+#### Save Message
-
- 
-
+Bookmarks messages for later reference. Saved messages are private to the user.
-### Collaborative Document
+#### Thumbnail Generation
-With the Collaborative Document extension, users can work together on a shared document. This feature is essential for remote teams where document collaboration is a recurring requirement. For a comprehensive understanding and guide on implementing and using the Collaborative Document Extension, refer to our specific guide on the [Collaborative Document Extension](/fundamentals/collaborative-document).
+Creates smaller preview images for shared images, reducing bandwidth.
-Once you have successfully activated the [Collaborative Document Extension](/fundamentals/collaborative-document) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/angular/message-composer) component of UI Kits.
+Auto-integrates into the Message Bubble of [cometchat-message-list](/ui-kit/angular/components/cometchat-message-list) when activated.
- 
+ 
-### Message Reactions
+#### TinyURL
-Message Reactions extension lets users express their emotions towards a message by choosing from a range of emojis. It provides a quick way to respond to any shared message. For a comprehensive understanding and guide on implementing and using the Message Reactions Extension, refer to our specific guide on the [Message Reactions Extension](/fundamentals/reactions).
+URL shortening using TinyURL.
-Once you have successfully activated the [Message Reactions Extension](/fundamentals/reactions) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of [MessageList Component](/ui-kit/angular/message-list) component of UI Kits.
+#### Voice Transcription
-
- 
-
+Converts audio messages to text.
-### Message Translation
+### User Engagement
-The Message Translation extension in CometChat is designed to translate any message into your local locale. It eliminates language barriers, making the chat more inclusive. For a comprehensive understanding and guide on implementing and using the Message Translation Extension, refer to our specific guide on the [Message Translation Extension](/fundamentals/message-translation).
+#### Giphy
-Once you have successfully activated the [Message Translation Extension](/fundamentals/message-translation) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of [MessageList Component](/ui-kit/angular/message-list) component of UI Kits.
+Search and share GIFs from Giphy.
+
+#### Message Translation
+
+Translates messages into the local locale.
+
+Auto-integrates into the Action Sheet of [cometchat-message-list](/ui-kit/angular/components/cometchat-message-list) when activated.
- 
+ 
-### Link Preview
+#### Polls
-The Link Preview extension provides a summary of the URL shared in the chat. It includes the title, a description, and a thumbnail image from the web page. For a comprehensive understanding and guide on implementing and using the Link Preview Extension, refer to our specific guide on the [Link Preview Extension](/fundamentals/link-preview).
+Creates polls in group discussions with predefined answer options.
-Once you have successfully activated the [Link Preview Extension](/fundamentals/link-preview) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/angular/message-list) component of UI Kits.
+Auto-integrates into the Action Sheet of [cometchat-message-composer](/ui-kit/angular/components/cometchat-message-composer) when activated.
- 
+ 
-### Profanity Filter
+#### Reminders
+
+Sets reminders for messages or creates personal reminders. A bot sends a notification when due.
-The Profanity Filter extension helps in maintaining the chat decorum by censoring obscene and inappropriate words in the messages. For a comprehensive understanding and guide on implementing and using the Profanity Filter Extension, refer to our specific guide on the [Legacy Extensions](/moderation/legacy-extensions).
+#### Stickers
-Once you have successfully activated the Profanity Filter Extension from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/angular/message-list) component of UI Kits.
+Sends pre-designed stickers in chat.
+
+Auto-integrates into [cometchat-message-composer](/ui-kit/angular/components/cometchat-message-composer) when activated.
- 
+ 
-### Data Masking
+#### Stipop
-The Data Masking extension helps secure sensitive data by masking information like credit card numbers and phone numbers in a chat message. For a comprehensive understanding and guide on implementing and using the Data Masking Extension, refer to our specific guide on the [Legacy Extensions](/moderation/legacy-extensions).
+Integrates Stipop's sticker library.
-Once you have successfully activated the Data Masking Extension from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/angular/message-list) component of UI Kits.
+#### Tenor
-
- 
-
+Search and share GIFs from Tenor.
+
+### Collaboration
-### Image Moderation
+#### Collaborative Document
-The Image Moderation extension uses machine learning to detect and filter out inappropriate or explicit images shared in the chat. For a comprehensive understanding and guide on implementing and using the Image Moderation Extension, refer to our specific guide on the [Legacy Extensions](/moderation/legacy-extensions).
+Shared document editing for real-time collaboration.
-Once you have successfully activated the Image Moderation Extension from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/angular/message-list) component of UI Kits.
+Auto-integrates into the Action Sheet of [cometchat-message-composer](/ui-kit/angular/components/cometchat-message-composer) when activated.
- 
+ 
-### Thumbnail Generation
+#### Collaborative Whiteboard
-The Thumbnail Generation extension automatically creates a smaller preview image whenever a larger image is shared, helping to reduce the upload/download time and bandwidth usage. For a comprehensive understanding and guide on implementing and using the Thumbnail Generation Extension, refer to our specific guide on the [Thumbnail Generation Extension](/fundamentals/thumbnail-generation).
+Real-time shared whiteboard for drawing and brainstorming.
-Once you have successfully activated the [Thumbnail Generation Extension](/fundamentals/thumbnail-generation) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/angular/message-list) component of UI Kits.
+Auto-integrates into the Action Sheet of [cometchat-message-composer](/ui-kit/angular/components/cometchat-message-composer) when activated.
- 
+ 
-### Smart Replies
+### Security
+
+#### Disappearing Messages
+
+Messages auto-delete after a specified interval. Works for 1:1 and group messages.
+
+### Customer Support
+
+#### Chatwoot
+
+Routes user messages to Chatwoot for customer support.
+
+#### Intercom
+
+Integrates Intercom for in-app customer support.
+
+### Smart Chat Features
+
+#### Conversation Starter
+
+AI-generated opening messages for new chats. See [AI Smart Chat Features](/ui-kit/angular/ai-features).
+
+#### Smart Replies
+
+AI-generated response suggestions based on conversation context. See [AI Smart Chat Features](/ui-kit/angular/ai-features).
+
+#### Conversation Summary
+
+AI-generated recap of long conversations. See [AI Smart Chat Features](/ui-kit/angular/ai-features).
+
+---
-Smart Replies extension provides automated, predictive text responses, making the conversation more efficient by reducing the response time. For a comprehensive understanding and guide on implementing and using the Smart Replies Extension, refer to our specific guide on the [Smart Replies Extension](/fundamentals/smart-replies).
+## Next Steps
+
+
+
+ Customize the composer where most extensions appear
+
+
+ Customize the message list for extension-rendered content
+
+
+ Core chat features like messaging and reactions
+
+
+ AI-powered chat capabilities
+
+
diff --git a/ui-kit/angular/v5/guides/block-unblock-user.mdx b/ui-kit/angular/guides/block-unblock-user.mdx
similarity index 95%
rename from ui-kit/angular/v5/guides/block-unblock-user.mdx
rename to ui-kit/angular/guides/block-unblock-user.mdx
index 626e49602..c4f5b43d0 100644
--- a/ui-kit/angular/v5/guides/block-unblock-user.mdx
+++ b/ui-kit/angular/guides/block-unblock-user.mdx
@@ -14,13 +14,13 @@ description: "Implement block and unblock user functionality in CometChat Angula
| UI helpers | `cometchat-confirm-dialog` |
| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login("UID")` |
| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-angular/tree/v5/projects/sample-app) |
-| Related | [All Guides](/ui-kit/angular/v5/guides/overview) |
+| Related | [All Guides](/ui-kit/angular/guides/guides-overview) |
Block/Unblock lets users prevent specific users from sending them messages. When blocked, the message composer is hidden and replaced with an unblock prompt.
-Before starting, complete the [Integration Guide](/ui-kit/angular/v5/integration).
+Before starting, complete the [Integration Guide](/ui-kit/angular/integration).
---
@@ -204,13 +204,13 @@ export class ChatMessagesComponent implements OnInit, OnDestroy {
## Next Steps
-
+
Display and manage user lists.
-
+
Customize the message input component.
-
+
Browse all feature and formatter guides.
diff --git a/ui-kit/angular/v5/guides/call-log-details.mdx b/ui-kit/angular/guides/call-log-details.mdx
similarity index 94%
rename from ui-kit/angular/v5/guides/call-log-details.mdx
rename to ui-kit/angular/guides/call-log-details.mdx
index af3c04e51..bbff2150c 100644
--- a/ui-kit/angular/v5/guides/call-log-details.mdx
+++ b/ui-kit/angular/guides/call-log-details.mdx
@@ -13,13 +13,13 @@ description: "Build a detailed call insights screen with metadata, participants,
| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login("UID")` + Calls SDK installed |
| Purpose | Detailed call insights screen with metadata, participants, and recordings |
| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-angular/tree/v5/projects/sample-app) |
-| Related | [All Guides](/ui-kit/angular/v5/guides/overview) |
+| Related | [All Guides](/ui-kit/angular/guides/guides-overview) |
Call Log Details shows call metadata, participants, duration, recordings, and history when a user selects a call from the Calls tab.
-Before starting, complete the [Integration Guide](/ui-kit/angular/v5/integration) and install `@cometchat/calls-sdk-javascript`.
+Before starting, complete the [Integration Guide](/ui-kit/angular/integration) and install `@cometchat/calls-sdk-javascript`.
---
@@ -190,12 +190,11 @@ Determine call direction (incoming/outgoing) by comparing the initiator's UID ag
import { CometChat } from '@cometchat/chat-sdk-javascript';
import {
CometChatUIKitConstants,
- CometChatUIKitLoginListener,
CometChatLocalize
} from '@cometchat/chat-uikit-angular';
-getCallStatus(call: CometChat.Call): string {
- const loggedInUser = CometChatUIKitLoginListener.getLoggedInUser();
+async getCallStatus(call: CometChat.Call): Promise {
+ const loggedInUser = await CometChat.getLoggedinUser();
const initiator = (call as any).getInitiator?.();
const isSentByMe = initiator?.getUid() === loggedInUser?.getUid();
const callStatus = call.getStatus();
@@ -290,13 +289,13 @@ export class CallsWithDetailsComponent implements OnDestroy {
## Next Steps
-
+
The call logs component reference.
-
+
Overview of calling capabilities.
-
+
Browse all feature and formatter guides.
diff --git a/ui-kit/angular/guides/custom-message-types.mdx b/ui-kit/angular/guides/custom-message-types.mdx
new file mode 100644
index 000000000..e776e1980
--- /dev/null
+++ b/ui-kit/angular/guides/custom-message-types.mdx
@@ -0,0 +1,370 @@
+---
+title: "Custom Message Types"
+description: "Register custom message bubble types, override conversation subtitles, and include custom messages in fetching."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-angular` |
+| Key services | `MessageBubbleConfigService`, `ConversationSubtitleService`, `MessageListService` |
+| Required setup | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login("UID")` |
+| Purpose | Add custom message types with custom bubble templates, subtitle overrides, and fetch inclusion |
+| Features | Custom bubble rendering, subtitle formatting, icon overrides, message type fetching |
+| Related | [Message Bubble](/ui-kit/angular/components/cometchat-message-bubble) \| [Conversations](/ui-kit/angular/components/cometchat-conversations) \| [Message List](/ui-kit/angular/components/cometchat-message-list) |
+
+
+
+The CometChat Angular UIKit supports extending the message system with custom message types. You can register custom bubble templates, override how messages appear in the conversation list, and include custom types in message fetching — all without modifying UIKit source code.
+
+| Capability | Description |
+| --- | --- |
+| Custom bubble templates | Register `ng-template` views for new message types |
+| Conversation subtitle override | Control last message text per message type |
+| Icon overrides | Set custom icons for conversation list items |
+| Fetch inclusion | Include custom types in the message request builder |
+
+---
+
+## Custom Message Bubble
+
+Use `MessageBubbleConfigService` to register templates for custom message types. The message type key format is `{type}_{category}` (e.g., `location_custom`).
+
+### Register a Custom Content View
+
+```typescript expandable
+import { Component, ViewChild, TemplateRef, AfterViewInit, inject } from '@angular/core';
+import { MessageBubbleConfigService } from '@cometchat/chat-uikit-angular';
+
+@Component({
+ selector: 'app-chat',
+ template: `
+
+
+ ![Location]()
+ {{ getLocationLabel(message) }}
+
+
+
+ ;
+
+ private bubbleConfig = inject(MessageBubbleConfigService);
+
+ ngAfterViewInit() {
+ this.bubbleConfig.setBubbleView('location_custom', {
+ contentView: this.locationBubble
+ });
+ }
+
+ getMapUrl(message: any): string {
+ const data = message.getCustomData();
+ return `https://maps.example.com/static?lat=${data.latitude}&lng=${data.longitude}`;
+ }
+
+ getLocationLabel(message: any): string {
+ return message.getCustomData()?.label || 'Shared location';
+ }
+}
+```
+
+The template receives the message object as `$implicit` context, so `let-message` gives you full access to the `CometChat.BaseMessage`.
+
+### Full Bubble Override
+
+To replace the entire bubble structure (header, content, footer, status), register a `bubbleView`:
+
+```typescript
+this.bubbleConfig.setBubbleView('location_custom', {
+ bubbleView: this.fullLocationBubble
+});
+```
+
+The `bubbleView` template context includes `$implicit` (message), `alignment`, and `group`.
+
+### Partial Override
+
+Register only the parts you want to customize. Unregistered parts use defaults:
+
+```typescript
+this.bubbleConfig.setBubbleView('location_custom', {
+ contentView: this.locationContent,
+ footerView: this.locationFooter
+ // headerView, statusInfoView, etc. use defaults
+});
+```
+
+---
+
+## Conversation Subtitle Override
+
+Use `ConversationSubtitleService` to control the last message text shown in the conversation list for specific message types.
+
+### Register a Subtitle Formatter
+
+```typescript expandable
+import { inject } from '@angular/core';
+import { ConversationSubtitleService } from '@cometchat/chat-uikit-angular';
+
+export class AppComponent {
+ private subtitleService = inject(ConversationSubtitleService);
+
+ ngOnInit() {
+ // Override subtitle for location messages
+ this.subtitleService.registerSubtitleFormatter('location_custom', (message) => {
+ return '📍 Shared a location';
+ });
+
+ // Override subtitle for payment messages
+ this.subtitleService.registerSubtitleFormatter('payment_custom', (message) => {
+ const data = (message as any).getCustomData();
+ return `💰 Payment: $${data.amount}`;
+ });
+ }
+}
+```
+
+### Override Subtitle Icon
+
+```typescript
+this.subtitleService.registerSubtitleIconOverride('location_custom', 'location-pin');
+```
+
+### Unregister
+
+```typescript
+this.subtitleService.unregisterSubtitleFormatter('location_custom');
+```
+
+---
+
+## Custom Message Fetching
+
+By default, the message list fetches these types and categories:
+
+**Default Types:** `text`, `file`, `image`, `audio`, `video`, `groupMember`, `form`, `scheduler`, `card`, `assistant`, `extension_sticker`, `extension_poll`, `extension_whiteboard`, `extension_document`, `meeting`
+
+**Default Categories:** `message`, `custom`, `call`, `interactive`, `agentic`, `action` (action is excluded when `hideGroupActionMessages` is true)
+
+### Inspect Current Defaults
+
+```typescript expandable
+import { inject } from '@angular/core';
+import { MessageListService } from '@cometchat/chat-uikit-angular';
+
+export class AppComponent {
+ private messageListService = inject(MessageListService);
+
+ ngOnInit() {
+ console.log(this.messageListService.getAllMessageTypes());
+ console.log(this.messageListService.getAllMessageCategories());
+ }
+}
+```
+
+### Add Custom Types and Categories
+
+Append to the existing defaults:
+
+```typescript
+// Add custom message types alongside defaults
+this.messageListService.addCustomMessageTypes(['location', 'payment']);
+
+// Add custom categories alongside defaults
+this.messageListService.addCustomMessageCategories(['custom']);
+```
+
+### Replace Types and Categories Entirely
+
+Fully replace the defaults with your own list:
+
+```typescript
+// Only fetch text and image messages
+this.messageListService.setMessageTypes(['text', 'image', 'location']);
+
+// Only fetch message and custom categories
+this.messageListService.setMessageCategories(['message', 'custom']);
+```
+
+Pass `null` to revert to the built-in defaults:
+
+```typescript
+this.messageListService.setMessageTypes(null);
+this.messageListService.setMessageCategories(null);
+```
+
+### Remove Custom Types
+
+```typescript
+this.messageListService.removeCustomMessageTypes(['location']);
+this.messageListService.removeCustomMessageCategories(['custom']);
+```
+
+
+If you provide a custom `MessagesRequestBuilder` via `setMessagesRequestBuilder`, custom types/categories registered via `addCustomMessageTypes`/`addCustomMessageCategories` are not appended. The custom builder is used as-is.
+
+
+---
+
+## End-to-End Example: Location Sharing
+
+A complete example showing a custom "location" message type with bubble template, subtitle override, and fetch inclusion.
+
+
+
+```typescript expandable
+import {
+ Component, ViewChild, TemplateRef, AfterViewInit, inject, OnInit
+} from '@angular/core';
+import { CometChat } from '@cometchat/chat-sdk-javascript';
+import {
+ MessageBubbleConfigService,
+ ConversationSubtitleService,
+ MessageListService,
+ CometChatMessageListComponent,
+ CometChatConversationsComponent
+} from '@cometchat/chat-uikit-angular';
+
+@Component({
+ selector: 'app-location-demo',
+ standalone: true,
+ imports: [CometChatMessageListComponent, CometChatConversationsComponent],
+ template: `
+
+
+
+
+ ;
+
+ user: CometChat.User | undefined;
+
+ private bubbleConfig = inject(MessageBubbleConfigService);
+ private subtitleService = inject(ConversationSubtitleService);
+ private messageListService = inject(MessageListService);
+
+ ngOnInit() {
+ // 1. Include 'location' type in message fetching
+ this.messageListService.addCustomMessageTypes(['location']);
+
+ // 2. Override conversation subtitle
+ this.subtitleService.registerSubtitleFormatter('location_custom', (msg) => {
+ const data = (msg as CometChat.CustomMessage).getCustomData() as any;
+ return `📍 ${data?.address || 'Shared a location'}`;
+ });
+
+ // Load user
+ CometChat.getUser('uid').then(u => this.user = u);
+ }
+
+ ngAfterViewInit() {
+ // 3. Register custom bubble template
+ this.bubbleConfig.setBubbleView('location_custom', {
+ contentView: this.locationBubble
+ });
+ }
+
+ getAddress(message: any): string {
+ return message.getCustomData()?.address || 'Unknown location';
+ }
+
+ getMapsLink(message: any): string {
+ const data = message.getCustomData();
+ return `https://maps.google.com/?q=${data?.latitude},${data?.longitude}`;
+ }
+}
+```
+
+
+
+```typescript expandable
+// Send a custom location message
+const receiverID = 'uid';
+const customData = {
+ latitude: 37.7749,
+ longitude: -122.4194,
+ address: '123 Main St, San Francisco, CA'
+};
+
+const customMessage = new CometChat.CustomMessage(
+ receiverID,
+ CometChat.RECEIVER_TYPE.USER,
+ 'location',
+ customData
+);
+
+CometChat.sendCustomMessage(customMessage).then(
+ (message) => console.log('Location sent:', message),
+ (error) => console.error('Error:', error)
+);
+```
+
+
+
+---
+
+## API Reference
+
+### MessageBubbleConfigService
+
+| Method | Description |
+| --- | --- |
+| `setBubbleView(typeKey, partMap)` | Register templates for a message type |
+| `setMessageTemplates(maps)` | Register templates for multiple types at once |
+| `setGlobalView(part, template)` | Set a global template for a bubble part |
+| `getView(typeKey, part)` | Get the configured template for a type and part |
+
+### ConversationSubtitleService
+
+| Method | Description |
+| --- | --- |
+| `registerSubtitleFormatter(typeKey, formatter)` | Register a subtitle formatter callback |
+| `unregisterSubtitleFormatter(typeKey)` | Remove a subtitle formatter |
+| `registerSubtitleIconOverride(typeKey, iconName)` | Override the subtitle icon |
+| `getSubtitle(typeKey, message)` | Get formatted subtitle (or null) |
+| `getIconOverride(typeKey)` | Get icon override (or null) |
+| `hasFormatter(typeKey)` | Check if a formatter is registered |
+
+### MessageListService
+
+| Method | Description |
+| --- | --- |
+| `getAllMessageTypes()` | Get the current effective list of message types |
+| `getAllMessageCategories()` | Get the current effective list of message categories |
+| `addCustomMessageTypes(types)` | Append custom types to the defaults |
+| `addCustomMessageCategories(categories)` | Append custom categories to the defaults |
+| `setMessageTypes(types)` | Replace the entire types array (pass `null` to reset) |
+| `setMessageCategories(categories)` | Replace the entire categories array (pass `null` to reset) |
+| `removeCustomMessageTypes(types)` | Remove previously added custom types |
+| `removeCustomMessageCategories(categories)` | Remove previously added custom categories |
+
+---
+
+## Next Steps
+
+
+
+ Customize the message bubble component.
+
+
+ Customize the conversations list.
+
+
+ Override text and translations.
+
+
+ Customize date and time display.
+
+
diff --git a/ui-kit/angular/guides/custom-text-formatter.mdx b/ui-kit/angular/guides/custom-text-formatter.mdx
new file mode 100644
index 000000000..d7b31d5bb
--- /dev/null
+++ b/ui-kit/angular/guides/custom-text-formatter.mdx
@@ -0,0 +1,296 @@
+---
+title: "Custom Text Formatter"
+description: "Extend the CometChatTextFormatter base class to implement custom inline text patterns with regex and callbacks in Angular."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-angular` |
+| Key class | `CometChatTextFormatter` (abstract base class for custom formatters) |
+| Required setup | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login("UID")` |
+| Purpose | Extend to create custom inline text patterns with regex, styling, and callbacks |
+| Features | Text formatting, customizable styles, dynamic text replacement, input field integration, key event callbacks |
+| Related | [ShortCut Formatter](/ui-kit/angular/guides/shortcut-formatter) \| [Mentions Formatter](/ui-kit/angular/guides/mentions-formatter) \| [All Guides](/ui-kit/angular/guides/guides-overview) |
+
+
+
+`CometChatTextFormatter` is an abstract class for formatting text in the message composer and message bubbles. Extend it to build custom formatters — hashtags, keywords, or any regex-based pattern.
+
+| Capability | Description |
+| --- | --- |
+| Text formatting | Auto-format text based on regex patterns and styles |
+| Custom styles | Set colors, fonts, and backgrounds for matched text |
+| Dynamic replacement | Regex-based find-and-replace in user input |
+| Input integration | Real-time monitoring of the composer input field |
+| Key event callbacks | Hooks for `keyUp` and `keyDown` events |
+
+
+Always wrap formatted output in a `` with a unique CSS class (e.g. `"custom-hashtag"`). This tells the UI Kit to render it as-is instead of sanitizing it.
+
+
+---
+
+## Steps
+
+### 1. Import the base class
+
+```typescript
+import { CometChatTextFormatter } from "@cometchat/chat-uikit-angular";
+```
+
+### 2. Extend it
+
+```typescript
+class HashTagTextFormatter extends CometChatTextFormatter {
+ readonly id = "hashtag-formatter";
+ override priority = 15;
+
+ getRegex(): RegExp {
+ return /\B#(\w+)\b/g;
+ }
+
+ format(text: string): string {
+ // Apply formatting logic
+ return text;
+ }
+}
+```
+
+### 3. Implement the regex pattern
+
+Return the regex that matches your target pattern from `getRegex()`:
+
+```typescript
+getRegex(): RegExp {
+ return /\B#(\w+)\b/g;
+}
+```
+
+### 4. Implement the format method
+
+The `format()` method receives the raw text and returns formatted HTML:
+
+```typescript
+format(text: string): string {
+ if (!text) {
+ this.originalText = "";
+ this.formattedText = "";
+ return "";
+ }
+
+ this.originalText = text;
+ this.formattedText = text.replace(
+ this.getRegex(),
+ '#$1'
+ );
+ return this.formattedText;
+}
+```
+
+### 5. Optionally implement shouldFormat
+
+Control when the formatter is applied:
+
+```typescript
+shouldFormat(text: string, message?: CometChat.BaseMessage): boolean {
+ return this.getRegex().test(text);
+}
+```
+
+---
+
+## Example
+
+A hashtag formatter used with `cometchat-message-list` and `cometchat-message-composer`.
+
+
+ 
+
+
+
+
+```typescript expandable
+import { CometChatTextFormatter } from "@cometchat/chat-uikit-angular";
+
+export class HashTagTextFormatter extends CometChatTextFormatter {
+ readonly id = "hashtag-text-formatter";
+ override priority = 15;
+
+ private hashtags: string[] = [];
+
+ getRegex(): RegExp {
+ return /\B#(\w+)\b/g;
+ }
+
+ format(text: string): string {
+ if (!text) {
+ this.originalText = "";
+ this.formattedText = "";
+ this.hashtags = [];
+ this.metadata = { hashtags: this.hashtags };
+ return "";
+ }
+
+ this.originalText = text;
+ this.hashtags = [];
+
+ this.formattedText = text.replace(this.getRegex(), (match, tag) => {
+ this.hashtags.push(`#${tag}`);
+ return `#${tag}`;
+ });
+
+ this.metadata = { hashtags: this.hashtags };
+ return this.formattedText;
+ }
+
+ getHashtags(): string[] {
+ return [...this.hashtags];
+ }
+
+ override reset(): void {
+ super.reset();
+ this.hashtags = [];
+ }
+}
+```
+
+
+
+
+Pass the formatter via the `textFormatters` input on the message list and composer.
+
+```typescript expandable
+import { Component, OnInit } from "@angular/core";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatMessageListComponent, CometChatMessageComposerComponent } from "@cometchat/chat-uikit-angular";
+import { HashTagTextFormatter } from "./HashTagTextFormatter";
+
+@Component({
+ selector: "app-message-demo",
+ standalone: true,
+ imports: [CometChatMessageListComponent, CometChatMessageComposerComponent],
+ template: `
+
+
+
+
+ `,
+})
+export class MessageDemoComponent implements OnInit {
+ chatUser: CometChat.User | undefined;
+ textFormatters = [new HashTagTextFormatter()];
+
+ ngOnInit() {
+ CometChat.getUser("uid").then((user) => {
+ this.chatUser = user;
+ });
+ }
+}
+```
+
+
+
+---
+
+## Methods Reference
+
+| Field | Type | Description |
+| --- | --- | --- |
+| `id` | `abstract readonly string` | Unique identifier for the formatter instance |
+| `priority` | `number` | Execution order in the pipeline (lower = earlier, default 100) |
+| `getRegex()` | `abstract method` | Returns the regex pattern for detecting formattable content |
+| `format(text)` | `abstract method` | Applies formatting transformations and returns formatted text |
+| `getFormattedText()` | `method` | Returns the stored formatted text after `format()` is called |
+| `getOriginalText()` | `method` | Returns the original text before formatting |
+| `getMetadata()` | `method` | Returns metadata extracted during formatting |
+| `reset()` | `method` | Clears original text, formatted text, and metadata |
+| `shouldFormat(text, message?)` | `method` | Returns whether this formatter should process the given text (default: true) |
+
+
+Formatters are applied in priority order (lower priority number = earlier in pipeline). The built-in URL formatter uses priority 10, mentions uses 20. Choose your custom formatter's priority accordingly.
+
+
+---
+
+## Override Methods
+
+
+
+
+The core method that applies formatting. Store original text, apply transformations, store metadata, and return the result.
+
+```typescript
+format(text: string): string {
+ if (!text) {
+ this.originalText = "";
+ this.formattedText = "";
+ return "";
+ }
+ this.originalText = text;
+ this.formattedText = this.customLogicToFormatText(text);
+ return this.formattedText;
+}
+```
+
+
+
+
+Returns the regex pattern used to detect formattable content.
+
+```typescript
+getRegex(): RegExp {
+ return /\B#(\w+)\b/g;
+}
+```
+
+
+
+
+Optionally override to conditionally skip formatting.
+
+```typescript
+shouldFormat(text: string, message?: CometChat.BaseMessage): boolean {
+ // Only format text messages
+ return message?.getType() === 'text';
+}
+```
+
+
+
+
+Override to clear custom state alongside the base state.
+
+```typescript expandable
+override reset(): void {
+ super.reset();
+ // Clear any custom state
+ this.customData = [];
+}
+```
+
+
+
+---
+
+## Next Steps
+
+
+
+ Add @mentions with styled tokens.
+
+
+ Customize the message input component.
+
+
+ Browse all feature and formatter guides.
+
+
+ Implement text expansion shortcuts.
+
+
diff --git a/ui-kit/angular/v5/guides/group-chat.mdx b/ui-kit/angular/guides/group-chat.mdx
similarity index 89%
rename from ui-kit/angular/v5/guides/group-chat.mdx
rename to ui-kit/angular/guides/group-chat.mdx
index 844bf8a4b..8b302c2f5 100644
--- a/ui-kit/angular/v5/guides/group-chat.mdx
+++ b/ui-kit/angular/guides/group-chat.mdx
@@ -13,13 +13,13 @@ description: "Implement group management including create, join, members, roles,
| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login("UID")` |
| Features | Create public/private/password-protected groups, manage members, roles, ownership transfer |
| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-angular/tree/v5/projects/sample-app) |
-| Related | [All Guides](/ui-kit/angular/v5/guides/overview) |
+| Related | [All Guides](/ui-kit/angular/guides/guides-overview) |
This guide covers the full group lifecycle: creating groups, joining them, managing members, changing roles, and transferring ownership.
-Before starting, complete the [Integration Guide](/ui-kit/angular/v5/integration).
+Before starting, complete the [Integration Guide](/ui-kit/angular/integration).
---
@@ -106,8 +106,7 @@ Handle joining for both public and password-protected groups. On success, emit `
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import {
- CometChatGroupEvents,
- CometChatUIKitLoginListener
+ CometChatGroupEvents
} from '@cometchat/chat-uikit-angular';
import { FormsModule } from '@angular/forms';
@@ -132,19 +131,20 @@ export class JoinGroupComponent {
password = '';
error = false;
- joinGroup(): void {
- CometChat.joinGroup(this.group.getGuid(), this.group.getType(), this.password)
- .then((joinedGroup) => {
- const loggedInUser = CometChatUIKitLoginListener.getLoggedInUser();
- CometChatGroupEvents.ccGroupMemberJoined.next({
- joinedGroup,
- joinedUser: loggedInUser
- });
- this.groupJoined.emit(joinedGroup);
- })
- .catch(() => {
- this.error = true;
+ async joinGroup(): Promise {
+ try {
+ const joinedGroup = await CometChat.joinGroup(
+ this.group.getGuid(), this.group.getType(), this.password
+ );
+ const loggedInUser = await CometChat.getLoggedinUser();
+ CometChatGroupEvents.ccGroupMemberJoined.next({
+ joinedGroup,
+ joinedUser: loggedInUser
});
+ this.groupJoined.emit(joinedGroup);
+ } catch {
+ this.error = true;
+ }
}
}
```
@@ -216,8 +216,7 @@ Promote or demote a member by calling `CometChat.updateGroupMemberScope()`. Emit
```typescript expandable
import { CometChat } from '@cometchat/chat-sdk-javascript';
import {
- CometChatGroupEvents,
- CometChatUIKitLoginListener
+ CometChatGroupEvents
} from '@cometchat/chat-uikit-angular';
async changeMemberScope(
@@ -232,8 +231,9 @@ async changeMemberScope(
group.getGuid()
);
+ const loggedInUser = await CometChat.getLoggedinUser();
CometChatGroupEvents.ccGroupMemberScopeChanged.next({
- changedBy: CometChatUIKitLoginListener.getLoggedInUser()!,
+ changedBy: loggedInUser!,
changedUser: member,
changedIn: group,
newScope,
@@ -288,13 +288,13 @@ onOwnershipTransferred(newOwner: CometChat.GroupMember): void {
## Next Steps
-
+
Display and manage group lists.
-
+
Display and manage group member lists.
-
+
Browse all feature and formatter guides.
diff --git a/ui-kit/angular/guides/guides-overview.mdx b/ui-kit/angular/guides/guides-overview.mdx
new file mode 100644
index 000000000..2dea5a2c2
--- /dev/null
+++ b/ui-kit/angular/guides/guides-overview.mdx
@@ -0,0 +1,65 @@
+---
+title: "Guides"
+sidebarTitle: "Overview"
+description: "Index of task-oriented feature guides for the CometChat Angular UIKit."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-angular` |
+| Purpose | Index of task-oriented feature guides for the Angular UIKit |
+| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-angular/tree/v5/projects/sample-app) |
+| Components | [Components Overview](/ui-kit/angular/components/components-overview) |
+| Guides | [Threaded Messages](/ui-kit/angular/guides/threaded-messages) · [Group Chat](/ui-kit/angular/guides/group-chat) · [New Chat](/ui-kit/angular/guides/new-chat) · [Search Messages](/ui-kit/angular/guides/threaded-messages) · [Block/Unblock](/ui-kit/angular/guides/block-unblock-user) · [Message Privately](/ui-kit/angular/guides/message-privately) · [Call Log Details](/ui-kit/angular/guides/call-log-details) · [Custom Message Types](/ui-kit/angular/guides/guides-overview) |
+
+
+
+> This page indexes focused, task-oriented feature guides for the Angular UIKit. Each guide shows how to implement a specific capability end-to-end using UI components.
+
+## When to Use These Guides
+
+Use these guides after completing the base [Integration Guide](/ui-kit/angular/integration). They help you layer additional UX without rewriting core chat flows.
+
+## Guide Directory
+
+| Guide | Description |
+|:------|:------------|
+| [Threaded Messages](/ui-kit/angular/guides/threaded-messages) | Implement threaded message replies with parent context, reply list, and focused thread composer. |
+| [Group Chat](/ui-kit/angular/guides/group-chat) | Create and join groups, view members, manage roles and scopes, transfer ownership. |
+| [New Chat](/ui-kit/angular/guides/new-chat) | Start new one-to-one or group conversations with user and group discovery. |
+| [Search Messages](/ui-kit/angular/guides/threaded-messages) | Add full-text message search across conversations with result routing. |
+| [Block / Unblock User](/ui-kit/angular/guides/block-unblock-user) | Block or unblock users in one-to-one chats; hide composer and show unblock prompt. |
+| [Message Privately](/ui-kit/angular/guides/message-privately) | Launch a direct one-to-one chat from a user profile or group member list. |
+| [Call Log Details](/ui-kit/angular/guides/call-log-details) | Display detailed call insights: metadata, participants, join/leave history, recordings. |
+| [Custom Message Types](/ui-kit/angular/guides/guides-overview) | Register custom message types with bubble templates, conversation subtitle overrides, and fetch inclusion. |
+| [Custom Text Formatter](/ui-kit/angular/guides/custom-text-formatter) | Extend the base formatter to implement custom inline patterns with regex and callbacks. |
+| [Mentions Formatter](/ui-kit/angular/guides/mentions-formatter) | Add @mentions with styled tokens, suggestion list, and click handling. |
+| [URL Formatter](/ui-kit/angular/guides/shortcut-formatter) | Detect and style plain URLs as clickable links with optional tracking logic. |
+| [Shortcut Formatter](/ui-kit/angular/guides/shortcut-formatter) | Provide shortcut-style text expansions invoking extension APIs or dialogs. |
+| [Hashtag Formatter](/ui-kit/angular/guides/hashtag-formatter) | Highlight #hashtags in the composer, message bubbles, conversation last message, and edit view. |
+| [Rich Text Formatting](/ui-kit/angular/guides/custom-text-formatter) | Configure and customize the rich text editor in the message composer. |
+
+
+Need another guide? Open a request via our [Support Portal](https://help.cometchat.com/hc/en-us/requests/new).
+
+
+---
+
+## Next Steps
+
+
+
+ Set up the Angular UIKit from scratch
+
+
+ Explore all UI components
+
+
+ Theme and style the UIKit to match your brand
+
+
+ Subscribe to UIKit events for custom workflows
+
+
diff --git a/ui-kit/angular/v5/guides/hashtag-formatter.mdx b/ui-kit/angular/guides/hashtag-formatter.mdx
similarity index 95%
rename from ui-kit/angular/v5/guides/hashtag-formatter.mdx
rename to ui-kit/angular/guides/hashtag-formatter.mdx
index 6063271d3..e5b82a0d9 100644
--- a/ui-kit/angular/v5/guides/hashtag-formatter.mdx
+++ b/ui-kit/angular/guides/hashtag-formatter.mdx
@@ -12,7 +12,7 @@ description: "Build a custom hashtag formatter that highlights #tags in the mess
| Required setup | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login("UID")` |
| Purpose | Detect `#word` patterns and render them as styled, highlighted hashtags |
| Surfaces | Message composer, message bubbles (text bubble), conversation last message, edit view |
-| Related | [Custom Text Formatter](/ui-kit/angular/v5/guides/custom-text-formatter) · [Mentions Formatter](/ui-kit/angular/v5/guides/mentions-formatter) · [All Guides](/ui-kit/angular/v5/guides/overview) |
+| Related | [Custom Text Formatter](/ui-kit/angular/guides/custom-text-formatter) · [Mentions Formatter](/ui-kit/angular/guides/mentions-formatter) · [All Guides](/ui-kit/angular/guides/guides-overview) |
@@ -33,9 +33,9 @@ The formatter plugs into the `textFormatters` input on `cometchat-message-list`,
## Prerequisites
-- Angular UIKit installed and initialized ([Integration Guide](/ui-kit/angular/v5/integration))
+- Angular UIKit installed and initialized ([Integration Guide](/ui-kit/angular/integration))
- A logged-in CometChat user
-- Basic understanding of the [Custom Text Formatter](/ui-kit/angular/v5/guides/custom-text-formatter) pattern
+- Basic understanding of the [Custom Text Formatter](/ui-kit/angular/guides/custom-text-formatter) pattern
---
@@ -410,16 +410,16 @@ The raw message text stored on the server is always plain text (e.g., `Check out
## Next Steps
-
+
Learn the full formatter API and lifecycle.
-
+
Add @mentions with suggestion lists.
-
+
Customize the message input component.
-
+
Browse all feature and formatter guides.
diff --git a/ui-kit/angular/v5/guides/mentions-formatter.mdx b/ui-kit/angular/guides/mentions-formatter.mdx
similarity index 68%
rename from ui-kit/angular/v5/guides/mentions-formatter.mdx
rename to ui-kit/angular/guides/mentions-formatter.mdx
index 6548ba3d3..b9682ba01 100644
--- a/ui-kit/angular/v5/guides/mentions-formatter.mdx
+++ b/ui-kit/angular/guides/mentions-formatter.mdx
@@ -11,11 +11,11 @@ description: "Add @mentions with styled tokens, suggestion list, and click handl
| Key class | `CometChatMentionsFormatter` (extends `CometChatTextFormatter`) |
| Required setup | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login("UID")` |
| Purpose | Format @mentions with styled tokens, suggestion list, and click handling for users and group members |
-| Related | [Custom Text Formatter](/ui-kit/angular/v5/guides/custom-text-formatter) \| [All Guides](/ui-kit/angular/v5/guides/overview) |
+| Related | [Custom Text Formatter](/ui-kit/angular/guides/custom-text-formatter) \| [All Guides](/ui-kit/angular/guides/guides-overview) |
-`CometChatMentionsFormatter` extends [CometChatTextFormatter](/ui-kit/angular/v5/guides/custom-text-formatter) to format @mentions in text messages. It styles mention tokens, generates suggestion lists as users type, and handles click events on rendered mentions.
+`CometChatMentionsFormatter` extends [CometChatTextFormatter](/ui-kit/angular/guides/custom-text-formatter) to format @mentions in text messages. It styles mention tokens, generates suggestion lists as users type, and handles click events on rendered mentions.
| Capability | Description |
| --- | --- |
@@ -35,7 +35,7 @@ description: "Add @mentions with styled tokens, suggestion list, and click handl
import { CometChatMentionsFormatter } from "@cometchat/chat-uikit-angular";
const mentionsFormatter = new CometChatMentionsFormatter();
-mentionsFormatter.setCometChatUserGroupMembers(userList);
+mentionsFormatter.setUsers(userList);
```
### 2. Format a message
@@ -44,7 +44,7 @@ Provide the raw message string containing mention placeholders, then apply the f
```typescript
const unformattedMessage = "<@uid:aliceuid> just shared a photo!";
-const formattedMessage = mentionsFormatter.getFormattedText(unformattedMessage);
+const formattedMessage = mentionsFormatter.formatSdkMentions(unformattedMessage, mentionedUsers);
// Render formattedMessage in your message component
```
@@ -100,28 +100,33 @@ The `CometChatMentionsFormatter` is included by default in the message composer
### Custom mention styles
-Override the default mention token styles by setting CSS properties:
+Override the default mention token styles using CSS. The formatter applies BEM classes that you can target:
-```typescript
-const mentionsFormatter = new CometChatMentionsFormatter();
-mentionsFormatter.setMentionStyle({
- color: "#7c4dff",
- backgroundColor: "#ede7f6",
- fontWeight: "600",
- borderRadius: "4px",
- padding: "0 4px",
-});
+```css
+.cometchat-mentions-you {
+ color: var(--cometchat-static-white);
+ background-color: var(--cometchat-primary-color);
+ font-weight: 600;
+ border-radius: 4px;
+ padding: 0 4px;
+}
+
+.cometchat-mentions-other {
+ color: var(--cometchat-primary-color);
+ background-color: var(--cometchat-background-color-03);
+ font-weight: 600;
+ border-radius: 4px;
+ padding: 0 4px;
+}
```
-### Custom click handler
+### Configuring the formatter
-Handle clicks on mention tokens to navigate to user profiles or show details:
+Set the logged-in user so the formatter can distinguish self-mentions:
```typescript
-mentionsFormatter.setOnMentionClick((user: CometChat.User) => {
- console.log("Mention clicked:", user.getName());
- // Navigate to user profile or show details panel
-});
+mentionsFormatter.setLoggedInUser(loggedInUser);
+mentionsFormatter.setAllMentionConfig(true, 'everyone');
```
---
@@ -129,16 +134,16 @@ mentionsFormatter.setOnMentionClick((user: CometChat.User) => {
## Next Steps
-
+
Build custom inline text patterns.
-
+
Render real-time message threads.
-
+
Browse all feature and formatter guides.
-
+
Auto-detect and style URLs as clickable links.
diff --git a/ui-kit/angular/v5/guides/message-privately.mdx b/ui-kit/angular/guides/message-privately.mdx
similarity index 95%
rename from ui-kit/angular/v5/guides/message-privately.mdx
rename to ui-kit/angular/guides/message-privately.mdx
index 3e7500ee7..94adc9a36 100644
--- a/ui-kit/angular/v5/guides/message-privately.mdx
+++ b/ui-kit/angular/guides/message-privately.mdx
@@ -13,13 +13,13 @@ description: "Launch a direct 1:1 chat from a group member profile in CometChat
| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login("UID")` |
| Purpose | Launch a direct 1:1 chat from a group member profile |
| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-angular/tree/v5/projects/sample-app) |
-| Related | [All Guides](/ui-kit/angular/v5/guides/overview) |
+| Related | [All Guides](/ui-kit/angular/guides/guides-overview) |
Message Privately lets users start a direct 1:1 conversation with a group member without leaving the group context. The user can return to the group after the private chat.
-Before starting, complete the [Integration Guide](/ui-kit/angular/v5/integration).
+Before starting, complete the [Integration Guide](/ui-kit/angular/integration).
---
@@ -223,13 +223,13 @@ export class GroupWithPrivateChatComponent implements OnDestroy {
## Next Steps
-
+
Display and manage group member lists.
-
+
Render real-time message threads.
-
+
Browse all feature and formatter guides.
diff --git a/ui-kit/angular/v5/guides/new-chat.mdx b/ui-kit/angular/guides/new-chat.mdx
similarity index 95%
rename from ui-kit/angular/v5/guides/new-chat.mdx
rename to ui-kit/angular/guides/new-chat.mdx
index 72faa9bc3..20110a485 100644
--- a/ui-kit/angular/v5/guides/new-chat.mdx
+++ b/ui-kit/angular/guides/new-chat.mdx
@@ -13,13 +13,13 @@ description: "Build a unified new chat entry point for starting 1:1 or group con
| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login("UID")` |
| Purpose | Unified new chat entry point for starting 1:1 or group conversations |
| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-angular/tree/v5/projects/sample-app) |
-| Related | [All Guides](/ui-kit/angular/v5/guides/overview) |
+| Related | [All Guides](/ui-kit/angular/guides/guides-overview) |
The New Chat feature lets users start conversations with other users or join group conversations from a single interface.
-Before starting, complete the [Integration Guide](/ui-kit/angular/v5/integration).
+Before starting, complete the [Integration Guide](/ui-kit/angular/integration).
---
@@ -224,13 +224,13 @@ joinGroup(group: CometChat.Group): void {
## Next Steps
-
+
Display and manage conversation lists.
-
+
Display and manage group lists.
-
+
Browse all feature and formatter guides.
diff --git a/ui-kit/angular/guides/rich-text-formatting.mdx b/ui-kit/angular/guides/rich-text-formatting.mdx
new file mode 100644
index 000000000..0ab7e2302
--- /dev/null
+++ b/ui-kit/angular/guides/rich-text-formatting.mdx
@@ -0,0 +1,642 @@
+# Rich Text Formatting Guide
+
+This guide explains how to use rich text formatting in the CometChat Angular V5 UIKit, including text formatting, mentions, links, and more.
+
+## Overview
+
+The UIKit provides a custom rich text editor built on native browser APIs, offering:
+- Lightweight implementation (no external dependencies)
+- Full formatting support (bold, italic, underline, etc.)
+- Mentions integration
+- Undo/redo history
+- Keyboard shortcuts
+- Full accessibility
+
+## Basic Usage
+
+### In MessageComposer
+
+The `CometChatMessageComposer` component includes rich text formatting by default:
+
+```html
+
+
+```
+
+### Custom Implementation
+
+To use the rich text editor in your own components:
+
+```typescript expandable
+import { Component, OnInit, OnDestroy, inject } from '@angular/core';
+import { RichTextEditorService } from '@cometchat/chat-uikit-angular';
+
+@Component({
+ selector: 'app-custom-editor',
+ template: `
+
+
+
+
+ `
+})
+export class CustomEditorComponent implements OnInit, OnDestroy {
+ private editorService = inject(RichTextEditorService);
+ private editor: any;
+
+ @ViewChild('editorElement') editorElement!: ElementRef;
+
+ ngOnInit() {
+ this.editor = this.editorService.createEditor({
+ placeholder: 'Type something...',
+ autofocus: true,
+ onUpdate: (html, text) => {
+ console.log('Content:', html, text);
+ }
+ }, this.editorElement.nativeElement);
+ }
+
+ ngOnDestroy() {
+ this.editorService.destroyEditor(this.editor);
+ }
+
+ toggleBold() {
+ this.editorService.toggleBold(this.editor);
+ }
+
+ toggleItalic() {
+ this.editorService.toggleItalic(this.editor);
+ }
+
+ toggleUnderline() {
+ this.editorService.toggleUnderline(this.editor);
+ }
+}
+```
+
+## Text Formatting
+
+### Inline Formatting
+
+Apply formatting to selected text or at cursor position:
+
+```typescript expandable
+// Bold
+this.editorService.toggleBold(this.editor);
+
+// Italic
+this.editorService.toggleItalic(this.editor);
+
+// Underline
+this.editorService.toggleUnderline(this.editor);
+
+// Strikethrough
+this.editorService.toggleStrikethrough(this.editor);
+
+// Inline code
+this.editorService.toggleCode(this.editor);
+```
+
+### Keyboard Shortcuts
+
+Users can apply formatting using keyboard shortcuts:
+
+| Format | Windows/Linux | Mac |
+|--------|--------------|-----|
+| Bold | `Ctrl+B` | `Cmd+B` |
+| Italic | `Ctrl+I` | `Cmd+I` |
+| Underline | `Ctrl+U` | `Cmd+U` |
+| Undo | `Ctrl+Z` | `Cmd+Z` |
+| Redo | `Ctrl+Y` or `Ctrl+Shift+Z` | `Cmd+Shift+Z` |
+
+### Block Formatting
+
+Apply formatting to entire blocks:
+
+```typescript
+// Code block
+this.editorService.toggleCodeBlock(this.editor);
+
+// Blockquote
+this.editorService.toggleBlockquote(this.editor);
+```
+
+## Lists
+
+### Creating Lists
+
+```typescript
+// Ordered (numbered) list
+this.editorService.toggleOrderedList(this.editor);
+
+// Unordered (bullet) list
+this.editorService.toggleBulletList(this.editor);
+```
+
+### List Behavior
+
+- **Enter**: Creates a new list item
+- **Enter** (twice): Exits the list
+- **Tab**: Indents the list item
+- **Shift+Tab**: Outdents the list item
+
+### Example
+
+```typescript
+// Create a numbered list
+this.editorService.toggleOrderedList(this.editor);
+
+// User types:
+// 1. First item [Enter]
+// 2. Second item [Enter]
+// 3. Third item [Enter][Enter]
+// (exits list)
+```
+
+## Links
+
+### Adding Links
+
+```typescript
+addLink() {
+ const url = prompt('Enter URL:');
+ if (url) {
+ this.editorService.setLink(this.editor, url);
+ }
+}
+```
+
+### Removing Links
+
+```typescript
+removeLink() {
+ this.editorService.setLink(this.editor, null);
+}
+```
+
+### URL Validation
+
+The editor automatically validates URLs:
+- Invalid URLs display an error
+- URLs without protocol are prefixed with `https://`
+- Pasted URLs are automatically converted to clickable links
+
+### Example
+
+```typescript
+// Valid URLs
+this.editorService.setLink(this.editor, 'https://example.com');
+this.editorService.setLink(this.editor, 'example.com'); // Auto-prefixed
+
+// Invalid URL
+this.editorService.setLink(this.editor, 'not a url'); // Shows error
+```
+
+## Mentions
+
+### Basic Mention Integration
+
+The editor integrates with `CometChatMentionsFormatter` for @mention functionality:
+
+```typescript expandable
+ngOnInit() {
+ this.editor = this.editorService.createEditor({
+ placeholder: 'Type @ to mention someone...',
+ onMentionStart: (query) => {
+ this.showMentionPopup(query);
+ },
+ onMentionEnd: () => {
+ this.hideMentionPopup();
+ },
+ getMentionSuggestions: async (query) => {
+ return await this.searchUsers(query);
+ },
+ onMentionSelect: (item) => {
+ this.insertMention(item);
+ }
+ });
+}
+```
+
+### Inserting Mentions
+
+```typescript expandable
+insertMention(user: CometChat.User) {
+ const isSelf = user.getUid() === this.loggedInUser.getUid();
+
+ this.editorService.insertMention(
+ this.editor,
+ user.getUid(),
+ user.getName(),
+ this.queryLength + 1, // +1 for @ symbol
+ isSelf
+ );
+}
+```
+
+### Mention Styling
+
+Mentions are styled differently based on whether they're for the current user:
+
+```css expandable
+/* Self mention (logged-in user) */
+.cometchat-mention--self {
+ background-color: var(--cometchat-primary-color);
+ color: var(--cometchat-static-white);
+}
+
+/* Other user mention */
+.cometchat-mention--other {
+ background-color: var(--cometchat-background-color-03);
+ color: var(--cometchat-text-color-primary);
+}
+```
+
+### Mention Limits
+
+- Maximum of **10 unique mentions** per message
+- Attempting to add more displays an error
+
+### Getting Mention Data
+
+```typescript
+// Get text with CometChat mention format
+const formattedText = this.editorService.getTextWithMentionFormat(this.editor);
+// Output: "Hello <@uid:user123>, how are you?"
+
+// Get unique mention UIDs
+const mentionUids = this.editorService.getUniqueMentionUids(this.editor);
+console.log('Mentioned users:', Array.from(mentionUids));
+```
+
+### Loading Messages with Mentions
+
+When loading a message that contains mentions:
+
+```typescript
+loadMessage(message: CometChat.TextMessage) {
+ this.editorService.setContentWithMentions(
+ this.editor,
+ message.getText(),
+ message.getMentionedUsers()
+ );
+}
+```
+
+## Undo/Redo
+
+### Using History
+
+```typescript
+// Undo
+if (this.editorService.canUndo(this.editor)) {
+ this.editorService.undo(this.editor);
+}
+
+// Redo
+if (this.editorService.canRedo(this.editor)) {
+ this.editorService.redo(this.editor);
+}
+```
+
+### History Grouping
+
+Rapid typing is automatically grouped into single undo steps:
+- Typing delay: 500ms
+- Each formatting operation creates a new undo step
+- History stack size: 100 entries
+
+### Example
+
+```typescript
+// User types "Hello world" quickly
+// This creates ONE undo step
+
+// User applies bold
+// This creates a SECOND undo step
+
+// Pressing Ctrl+Z undoes the bold
+// Pressing Ctrl+Z again removes "Hello world"
+```
+
+## Content Management
+
+### Getting Content
+
+```typescript
+// Get HTML with formatting
+const html = this.editorService.getHTML(this.editor);
+
+// Get plain text without formatting
+const text = this.editorService.getText(this.editor);
+
+// Get metadata
+const metadata = this.editorService.getRichTextMetadata(this.editor);
+console.log('Has formatting:', metadata.hasFormatting);
+```
+
+### Setting Content
+
+```typescript
+// Set HTML content
+this.editorService.setContent(this.editor, 'Bold text
');
+
+// Clear content
+this.editorService.clearContent(this.editor);
+
+// Insert text at cursor
+this.editorService.insertText(this.editor, 'Hello');
+```
+
+### Checking Content State
+
+```typescript
+// Check if empty
+if (this.editorService.isEmpty(this.editor)) {
+ console.log('Editor is empty');
+}
+
+// Check if has formatting
+if (this.editorService.hasFormatting(this.editor)) {
+ console.log('Content has rich text formatting');
+}
+```
+
+## Format State
+
+### Tracking Format State
+
+Use the reactive signal to track which formats are active:
+
+```typescript
+formatState = this.editorService.formatState;
+
+// In template
+
+
+
+```
+
+### Manual Format State Check
+
+```typescript
+const formatState = this.editorService.getFormatState(this.editor);
+
+if (formatState.bold) {
+ console.log('Bold is active');
+}
+
+if (formatState.orderedList) {
+ console.log('In ordered list');
+}
+```
+
+## Copy, Paste, and Drag
+
+### Paste Handling
+
+The editor automatically handles pasted content:
+
+```typescript expandable
+// Formatted text paste
+// - Preserves compatible formatting (bold, italic, etc.)
+// - Strips unsupported formatting
+// - Sanitizes for XSS protection
+
+// Plain text paste
+// - Inserts without formatting
+
+// URL paste
+// - Automatically converts to clickable link
+```
+
+### Drag and Drop
+
+Users can drag and drop text within the editor:
+- Formatting is preserved
+- Cursor position is updated
+
+### Copy
+
+When users copy formatted text:
+- Formatting is preserved in clipboard
+- Both HTML and plain text formats are available
+
+## Accessibility
+
+### Keyboard Navigation
+
+All features are accessible via keyboard:
+- **Tab**: Focus editor
+- **Arrow keys**: Navigate content
+- **Escape**: Close mention popup
+- **Enter**: New line or list item
+- **Formatting shortcuts**: See table above
+
+### Screen Reader Support
+
+The editor announces:
+- Formatting changes ("Bold applied")
+- Mention insertions ("Mentioned John Doe")
+- Undo/redo operations ("Undone", "Redone")
+
+### ARIA Attributes
+
+The editor includes proper ARIA attributes:
+- `role="textbox"`
+- `aria-label="Message editor"`
+- `aria-multiline="true"`
+- `aria-placeholder="Type your message..."`
+
+## Styling
+
+### Using CSS Variables
+
+Customize the editor appearance using CSS variables:
+
+```css expandable
+:root {
+ /* Editor background */
+ --cometchat-background-color-01: #ffffff;
+
+ /* Text color */
+ --cometchat-text-color-primary: #141414;
+
+ /* Placeholder color */
+ --cometchat-text-color-secondary: #666666;
+
+ /* Focus border */
+ --cometchat-primary-color: #6852D6;
+
+ /* Mention colors */
+ --cometchat-primary-color: #6852D6;
+ --cometchat-background-color-03: #f0f0f0;
+}
+```
+
+### Custom Styles
+
+Apply custom styles to the editor:
+
+```css expandable
+.cometchat-rich-text-editor {
+ min-height: 100px;
+ max-height: 300px;
+ overflow-y: auto;
+ padding: var(--cometchat-spacing-3);
+ border: 1px solid var(--cometchat-border-color-light);
+ border-radius: var(--cometchat-radius-2);
+}
+
+.cometchat-rich-text-editor:focus {
+ outline: none;
+ border-color: var(--cometchat-primary-color);
+}
+```
+
+## Performance
+
+### Optimization Tips
+
+1. **Debounce updates**: Use debouncing for expensive operations
+2. **Lazy load mentions**: Load mention suggestions on demand
+3. **Limit history**: History is automatically limited to 100 entries
+4. **Clean up**: Always destroy editors when done
+
+### Performance Metrics
+
+The editor is optimized for:
+- **Typing latency**: < 50ms per keystroke (10,000 characters)
+- **Formatting operations**: < 100ms
+- **Initialization**: < 50ms
+- **Paste operations**: < 200ms
+
+## Security
+
+### XSS Protection
+
+All HTML is sanitized to prevent XSS attacks:
+- Script tags removed
+- Event handlers removed
+- Dangerous attributes removed
+- Only safe HTML tags allowed
+
+### Content Validation
+
+- URLs are validated before insertion
+- Mention data is sanitized
+- Pasted content is sanitized
+
+## Best Practices
+
+### 1. Always Clean Up
+
+```typescript
+ngOnDestroy() {
+ if (this.editor) {
+ this.editorService.destroyEditor(this.editor);
+ }
+}
+```
+
+### 2. Use Reactive Signals
+
+```typescript
+// Good: Use reactive signal
+formatState = this.editorService.formatState;
+
+// Avoid: Polling format state
+setInterval(() => {
+ this.formatState = this.editorService.getFormatState(this.editor);
+}, 100);
+```
+
+### 3. Handle Empty State
+
+```typescript
+sendMessage() {
+ if (this.editorService.isEmpty(this.editor)) {
+ // Show error: "Message cannot be empty"
+ return;
+ }
+
+ const text = this.editorService.getTextWithMentionFormat(this.editor);
+ // Send message...
+}
+```
+
+### 4. Validate Before Sending
+
+```typescript expandable
+sendMessage() {
+ const text = this.editorService.getText(this.editor);
+
+ if (text.trim().length === 0) {
+ return; // Empty message
+ }
+
+ if (text.length > 10000) {
+ // Show error: "Message too long"
+ return;
+ }
+
+ // Send message...
+}
+```
+
+## Troubleshooting
+
+### Editor Not Focusing
+
+```typescript
+// Ensure element is mounted before creating editor
+ngAfterViewInit() {
+ this.editor = this.editorService.createEditor(
+ { autofocus: true },
+ this.editorElement.nativeElement
+ );
+}
+```
+
+### Formatting Not Working
+
+```typescript expandable
+// Check if editor is destroyed
+if (this.editor.isDestroyed()) {
+ console.error('Editor is destroyed');
+ return;
+}
+
+// Check if editor is editable
+if (!this.editor.isEditable()) {
+ console.error('Editor is not editable');
+ return;
+}
+```
+
+### Mentions Not Showing
+
+```typescript expandable
+// Ensure mention callbacks are configured
+this.editor = this.editorService.createEditor({
+ onMentionStart: (query) => {
+ console.log('Mention started:', query);
+ this.showMentionPopup(query);
+ },
+ getMentionSuggestions: async (query) => {
+ return await this.searchUsers(query);
+ }
+});
+```
+
+## See Also
+
+- [RichTextEditorService API Reference](../api-reference/rich-text-editor-service.mdx)
+- [MessageComposer Component](../components/message-composer.mdx)
diff --git a/ui-kit/angular/guides/search-messages.mdx b/ui-kit/angular/guides/search-messages.mdx
new file mode 100644
index 000000000..7303d0891
--- /dev/null
+++ b/ui-kit/angular/guides/search-messages.mdx
@@ -0,0 +1,205 @@
+---
+title: "Search Messages"
+sidebarTitle: "Search Messages"
+description: "Add full-text message search across conversations with result routing in CometChat Angular UIKit."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-angular` |
+| Key components | `cometchat-search-bar`, `cometchat-message-list`, `cometchat-message-composer`, `cometchat-message-header` |
+| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login("UID")` |
+| Purpose | Full-text message search across conversations with result routing and navigation |
+| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-angular/tree/v5/projects/sample-app) |
+| Related | [All Guides](/ui-kit/angular/guides/guides-overview) |
+
+
+
+Search Messages lets users locate specific messages across conversations and groups using keyword search, then navigate directly to the result.
+
+Before starting, complete the [Integration Guide](/integration).
+
+---
+
+## Components
+
+| Component / Selector | Role |
+|:---|:---|
+| `cometchat-search-bar` | Search input component for entering keywords |
+| `cometchat-message-list` | Displays filtered messages based on search results |
+| `cometchat-message-composer` | Supports navigation after selecting a search result |
+| `cometchat-message-header` | Displays search context and navigation controls |
+
+---
+
+## Implementation Steps
+
+### 1. Search State Management
+
+Track the current search keyword and the message ID to scroll to. When a new search is triggered, reset `goToMessageId` so the list doesn't jump to a stale result.
+
+```typescript expandable
+import { Component } from '@angular/core';
+import { CometChat } from '@cometchat/chat-sdk-javascript';
+
+@Component({
+ selector: 'app-search-messages',
+ standalone: true,
+ imports: [],
+ template: ``
+})
+export class SearchMessagesComponent {
+ searchKeyword = '';
+ goToMessageId: string | undefined;
+ selectedUser: CometChat.User | undefined;
+ selectedGroup: CometChat.Group | undefined;
+
+ onSearch(keyword: string): void {
+ this.searchKeyword = keyword;
+ this.goToMessageId = undefined;
+ }
+
+ onResultClick(messageId: string): void {
+ this.goToMessageId = messageId;
+ }
+}
+```
+
+---
+
+### 2. Search Input
+
+Render the search bar component and wire its output to update the keyword state.
+
+```html
+
+
+```
+
+---
+
+### 3. Search Result Integration
+
+Pass `searchKeyword` and `goToMessageId` to `cometchat-message-list`. The list filters messages matching the keyword and highlights them. When `goToMessageId` is set, the list scrolls to that message.
+
+```html
+
+
+```
+
+---
+
+### 4. Navigate to Search Result
+
+When a user taps a search result, set `goToMessageId` to that message's ID. The message list scrolls to and highlights the target message.
+
+```typescript
+onResultClick(messageId: string): void {
+ this.goToMessageId = messageId;
+}
+```
+
+---
+
+### 5. Complete Search Integration
+
+A full component wiring search input, result display, and navigation together.
+
+```typescript expandable
+import { Component, Input } from '@angular/core';
+import { CometChat } from '@cometchat/chat-sdk-javascript';
+import {
+ CometChatSearchBarComponent,
+ CometChatMessageListComponent,
+ CometChatMessageComposerComponent,
+ CometChatMessageHeaderComponent
+} from '@cometchat/chat-uikit-angular';
+
+@Component({
+ selector: 'app-chat-with-search',
+ standalone: true,
+ imports: [
+ CometChatSearchBarComponent,
+ CometChatMessageListComponent,
+ CometChatMessageComposerComponent,
+ CometChatMessageHeaderComponent
+ ],
+ template: `
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `
+})
+export class ChatWithSearchComponent {
+ @Input() user: CometChat.User | undefined;
+ @Input() group: CometChat.Group | undefined;
+
+ searchKeyword = '';
+ goToMessageId: string | undefined;
+
+ onSearch(keyword: string): void {
+ this.searchKeyword = keyword;
+ this.goToMessageId = undefined;
+ }
+
+ onResultClick(messageId: string): void {
+ this.goToMessageId = messageId;
+ }
+}
+```
+
+---
+
+## Feature Matrix
+
+| Feature | Component / Binding | Description |
+|:---|:---|:---|
+| Search input | `cometchat-search-bar` with `(searchChanged)` | Captures keyword input |
+| Display results | `cometchat-message-list` with `[goToMessageId]` | Scrolls to and highlights matching messages |
+| Navigate to result | `[goToMessageId]` input | Scrolls to and highlights target message |
+| State management | Component properties | Tracks keyword and target message ID |
+
+---
+
+## Next Steps
+
+
+
+ The search bar component reference.
+
+
+ Render real-time message threads.
+
+
+ Browse all feature and formatter guides.
+
+
+ Full working sample application on GitHub.
+
+
diff --git a/ui-kit/angular/v5/guides/shortcut-formatter.mdx b/ui-kit/angular/guides/shortcut-formatter.mdx
similarity index 55%
rename from ui-kit/angular/v5/guides/shortcut-formatter.mdx
rename to ui-kit/angular/guides/shortcut-formatter.mdx
index fe4914f54..db5c54053 100644
--- a/ui-kit/angular/v5/guides/shortcut-formatter.mdx
+++ b/ui-kit/angular/guides/shortcut-formatter.mdx
@@ -11,11 +11,11 @@ description: "Implement !shortcut style text expansions with extension APIs or d
| Key class | `ShortcutFormatter` (extends `CometChatTextFormatter`) |
| Required setup | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login("UID")` |
| Track character | `!` — triggers shortcut expansion in the message composer |
-| Related | [Custom Text Formatter](/ui-kit/angular/v5/guides/custom-text-formatter) \| [All Guides](/ui-kit/angular/v5/guides/overview) |
+| Related | [Custom Text Formatter](/ui-kit/angular/guides/custom-text-formatter) \| [All Guides](/ui-kit/angular/guides/guides-overview) |
-`ShortCutFormatter` extends [CometChatTextFormatter](/ui-kit/angular/v5/guides/custom-text-formatter) to expand shortcodes (like `!hb`) into full text via the Message Shortcuts extension. When a user types a shortcut, a dialog appears with the expansion — clicking it inserts the text.
+`ShortCutFormatter` extends [CometChatTextFormatter](/ui-kit/angular/guides/custom-text-formatter) to expand shortcodes (like `!hb`) into full text via the Message Shortcuts extension. When a user types a shortcut, a dialog appears with the expansion — clicking it inserts the text.
@@ -35,33 +35,40 @@ import { CometChatTextFormatter } from "@cometchat/chat-uikit-angular";
```typescript
class ShortCutFormatter extends CometChatTextFormatter {
- // ...
-}
-```
+ readonly id = "shortcut-formatter";
+ override priority = 50;
-### 3. Set the track character
+ getRegex(): RegExp {
+ return /!([a-zA-Z]+)/g;
+ }
-```typescript
-this.setTrackingCharacter("!");
+ format(text: string): string {
+ this.originalText = text;
+ this.formattedText = text;
+ return text;
+ }
+}
```
-### 4. Handle key events
-
-Detect shortcuts on `keyUp` and trigger expansion logic.
+### 3. Fetch shortcuts from the extension
```typescript
-onKeyUp(event: KeyboardEvent) {
- // Check text before caret for shortcut match
+constructor() {
+ CometChat.callExtension("message-shortcuts", "GET", "v1/fetch", undefined)
+ .then((data: any) => {
+ if (data?.shortcuts) {
+ this.shortcuts = data.shortcuts;
+ }
+ });
}
```
-### 5. Add dialog and formatting methods
+### 4. Handle dialog and formatting methods
```typescript
openDialog(buttonText: string, shortcut: string) { /* ... */ }
closeDialog() { /* ... */ }
handleButtonClick(buttonText: string) { /* ... */ }
-getFormattedText(text: string): string { return text; }
```
---
@@ -86,13 +93,15 @@ import { CometChatTextFormatter, CometChatUIEvents, PanelAlignment } from "@come
import { CometChat } from "@cometchat/chat-sdk-javascript";
export class ShortcutFormatter extends CometChatTextFormatter {
+ readonly id = "shortcut-formatter";
+ override priority = 50;
+
private shortcuts: { [key: string]: string } = {};
private dialogIsOpen = false;
private currentShortcut: string | null = null;
constructor() {
super();
- this.setTrackingCharacter("!");
CometChat.callExtension("message-shortcuts", "GET", "v1/fetch", undefined)
.then((data: any) => {
if (data?.shortcuts) {
@@ -102,31 +111,23 @@ export class ShortcutFormatter extends CometChatTextFormatter {
.catch((error) => console.error("Error fetching shortcuts", error));
}
- onKeyUp(event: KeyboardEvent) {
- const caretPosition =
- this.currentCaretPosition instanceof Selection
- ? this.currentCaretPosition.anchorOffset
- : 0;
- const textBeforeCaret = this.getTextBeforeCaret(caretPosition);
-
- const match = textBeforeCaret.match(/!([a-zA-Z]+)$/);
- if (match) {
- const shortcut = match[0];
- const replacement = this.shortcuts[shortcut];
- if (replacement) {
- if (this.dialogIsOpen && this.currentShortcut !== shortcut) {
- this.closeDialog();
- }
- this.openDialog(replacement, shortcut);
- }
- } else if (!textBeforeCaret) {
- this.closeDialog();
- }
+ getRegex(): RegExp {
+ return /!([a-zA-Z]+)/g;
+ }
+
+ format(text: string): string {
+ // Shortcut formatter doesn't transform display text — it only triggers
+ // expansion dialogs in the composer. Pass text through unchanged.
+ this.originalText = text;
+ this.formattedText = text;
+ return text;
}
openDialog(buttonText: string, shortcut: string) {
+ // Note: In a real implementation, you would use a TemplateRef via a component.
+ // The CometChatUIEvents.ccShowPanel expects a TemplateRef, not an HTMLElement.
+ // Use a component with ViewChild to create the panel template.
CometChatUIEvents.ccShowPanel.next({
- child: this.createDialogElement(buttonText),
position: PanelAlignment.messageListFooter,
});
this.dialogIsOpen = true;
@@ -139,56 +140,19 @@ export class ShortcutFormatter extends CometChatTextFormatter {
this.currentShortcut = null;
}
- private createDialogElement(buttonText: string): HTMLElement {
- const container = document.createElement("div");
- container.style.width = "100%";
- container.style.padding = "8px";
-
- const button = document.createElement("button");
- button.textContent = buttonText;
- button.style.cssText =
- "width: 100%; padding: 8px 16px; cursor: pointer; background: #f2e6ff; border: 2px solid #9b42f5; border-radius: 12px; text-align: left; font: 600 15px sans-serif;";
- button.addEventListener("click", () => this.handleButtonClick(buttonText));
-
- container.appendChild(button);
- return container;
- }
-
handleButtonClick(buttonText: string) {
- if (this.currentCaretPosition && this.currentRange) {
- const shortcut = Object.keys(this.shortcuts).find(
- (key) => this.shortcuts[key] === buttonText
- );
- if (shortcut) {
- const replacement = this.shortcuts[shortcut];
- this.addAtCaretPosition(
- replacement,
- this.currentCaretPosition,
- this.currentRange
- );
- }
+ // The expansion text is available via the shortcuts map
+ const shortcut = Object.keys(this.shortcuts).find(
+ (key) => this.shortcuts[key] === buttonText
+ );
+ if (shortcut) {
+ // Emit the expansion text for the composer to insert
+ this.metadata = { expansion: this.shortcuts[shortcut] };
}
if (this.dialogIsOpen) {
this.closeDialog();
}
}
-
- getFormattedText(text: string): string {
- return text;
- }
-
- private getTextBeforeCaret(caretPosition: number): string {
- if (
- this.currentRange?.startContainer &&
- typeof this.currentRange.startContainer.textContent === "string"
- ) {
- const textContent = this.currentRange.startContainer.textContent;
- if (textContent.length >= caretPosition) {
- return textContent.substring(0, caretPosition);
- }
- }
- return "";
- }
}
```
@@ -228,16 +192,16 @@ The Message Shortcuts extension must be enabled in your CometChat Dashboard for
## Next Steps
-
+
Build custom inline text patterns.
-
+
Customize the message input component.
-
+
Browse all feature and formatter guides.
-
+
Add @mentions with styled tokens.
diff --git a/ui-kit/angular/v5/guides/state-management.mdx b/ui-kit/angular/guides/state-management.mdx
similarity index 92%
rename from ui-kit/angular/v5/guides/state-management.mdx
rename to ui-kit/angular/guides/state-management.mdx
index 67fb4e564..20a36879f 100644
--- a/ui-kit/angular/v5/guides/state-management.mdx
+++ b/ui-kit/angular/guides/state-management.mdx
@@ -432,15 +432,15 @@ The main panel's customizations (set on the root singleton) do not affect the th
Do not scope `ChatStateService`. It is intentionally a singleton that tracks the app-wide active conversation. Scoping it would break cross-component state synchronization. Use the props-based pattern instead for independent panels.
-See [CometChatMessageList — Multiple Message Lists with Different Configurations](/ui-kit/angular/v5/components/cometchat-message-list#multiple-message-lists-with-different-configurations) for a complete example with two panels.
+See [CometChatMessageList — Multiple Message Lists with Different Configurations](/ui-kit/angular/components/cometchat-message-list#multiple-message-lists-with-different-configurations) for a complete example with two panels.
## Related Resources
-- [ChatStateService API Reference](/ui-kit/angular/v5/api-reference/chat-state-service) — Full API documentation for signals, observables, setters, getters, and mutual exclusivity behavior
-- [CometChatConversations](/ui-kit/angular/v5/components/cometchat-conversations) — Conversation list component that calls `setActiveConversation()` on selection
-- [CometChatMessageHeader](/ui-kit/angular/v5/components/cometchat-message-header) — Message header that subscribes to `activeUser` / `activeGroup`
-- [CometChatMessageList](/ui-kit/angular/v5/components/cometchat-message-list) — Message list that subscribes to `activeUser` / `activeGroup`
-- [CometChatMessageComposer](/ui-kit/angular/v5/components/cometchat-message-composer) — Message composer that subscribes to `activeUser` / `activeGroup`
-- [CometChatUsers](/ui-kit/angular/v5/components/cometchat-users) — User list that calls `setActiveUser()` on selection
-- [CometChatGroups](/ui-kit/angular/v5/components/cometchat-groups) — Group list that calls `setActiveGroup()` on selection
-- [CometChatGroupMembers](/ui-kit/angular/v5/components/cometchat-group-members) — Group members list that subscribes to `activeGroup`
+- [ChatStateService API Reference](/ui-kit/angular/api-reference/chat-state-service) — Full API documentation for signals, observables, setters, getters, and mutual exclusivity behavior
+- [CometChatConversations](/ui-kit/angular/components/cometchat-conversations) — Conversation list component that calls `setActiveConversation()` on selection
+- [CometChatMessageHeader](/ui-kit/angular/components/cometchat-message-header) — Message header that subscribes to `activeUser` / `activeGroup`
+- [CometChatMessageList](/ui-kit/angular/components/cometchat-message-list) — Message list that subscribes to `activeUser` / `activeGroup`
+- [CometChatMessageComposer](/ui-kit/angular/components/cometchat-message-composer) — Message composer that subscribes to `activeUser` / `activeGroup`
+- [CometChatUsers](/ui-kit/angular/components/cometchat-users) — User list that calls `setActiveUser()` on selection
+- [CometChatGroups](/ui-kit/angular/components/cometchat-groups) — Group list that calls `setActiveGroup()` on selection
+- [CometChatGroupMembers](/ui-kit/angular/components/cometchat-group-members) — Group members list that subscribes to `activeGroup`
diff --git a/ui-kit/angular/guides/subscription-patterns.mdx b/ui-kit/angular/guides/subscription-patterns.mdx
new file mode 100644
index 000000000..eb16718b8
--- /dev/null
+++ b/ui-kit/angular/guides/subscription-patterns.mdx
@@ -0,0 +1,254 @@
+---
+title: "RxJS Subscription Patterns"
+description: "Approved patterns for managing RxJS subscriptions in the CometChat Angular V5 UIKit to prevent memory leaks."
+---
+
+## Overview
+
+This guide documents the approved patterns for managing RxJS subscriptions in the CometChat Angular V5 UIKit. Following these patterns ensures that subscriptions are automatically cleaned up when components and services are destroyed, preventing memory leaks in long-running sessions.
+
+---
+
+## ✅ Approved Patterns
+
+### 1. `takeUntilDestroyed()` — Primary Pattern
+
+The preferred pattern for all new subscriptions. Uses Angular's `DestroyRef` to automatically unsubscribe when the component or service is destroyed.
+
+```typescript
+import { Component, inject, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { CometChatMessageEvents } from '../events/CometChatMessageEvents';
+
+@Component({ ... })
+export class MyComponent {
+ private readonly destroyRef = inject(DestroyRef);
+
+ constructor() {
+ CometChatMessageEvents.ccMessageRead
+ .pipe(takeUntilDestroyed(this.destroyRef))
+ .subscribe(message => {
+ // handle message read
+ });
+ }
+}
+```
+
+**Why this is preferred:**
+- No boilerplate `ngOnDestroy` needed for subscription cleanup
+- Works in both components and services
+- Angular manages the lifecycle automatically via `DestroyRef`
+- Composable with other RxJS operators
+
+---
+
+### 2. `toSignal()` — For Service Observables
+
+Use `toSignal()` when you need to consume a service observable as an Angular Signal in a component. The subscription is automatically cleaned up when the component is destroyed.
+
+```typescript
+import { Component, inject } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { ConversationsService } from '../services/conversations.service';
+
+@Component({ ... })
+export class MyComponent {
+ private conversationsService = inject(ConversationsService);
+
+ // Automatically subscribes and unsubscribes — no manual cleanup needed
+ conversations = toSignal(this.conversationsService.conversations$, {
+ initialValue: [] as CometChat.Conversation[],
+ });
+}
+```
+
+**Why this is preferred for service state:**
+- Zero subscription management code
+- Integrates with Angular's change detection (OnPush compatible)
+- Automatically handles initial value and completion
+
+---
+
+### 3. CometChat SDK Listeners — Service-Managed Pattern
+
+CometChat SDK listeners (`addMessageListener`, `addUserListener`, etc.) must be registered and removed via the service layer, not directly in components.
+
+```typescript
+// ✅ CORRECT — service manages SDK listener lifecycle
+@Injectable({ providedIn: 'root' })
+export class ConversationsService {
+ private readonly listenerId = `conversations_${Date.now()}`;
+
+ private setupMessageListener(): void {
+ CometChat.addMessageListener(
+ this.listenerId,
+ new CometChat.MessageListener({
+ onTextMessageReceived: (message) => { /* handle */ },
+ onMediaMessageReceived: (message) => { /* handle */ },
+ })
+ );
+ }
+
+ private removeMessageListener(): void {
+ try {
+ CometChat.removeMessageListener(this.listenerId);
+ } catch (error) {
+ // log but don't throw — cleanup errors are non-critical
+ }
+ }
+
+ cleanup(): void {
+ this.removeMessageListener();
+ // ... remove other listeners
+ }
+}
+```
+
+**Why services manage SDK listeners:**
+- SDK listeners are singleton-scoped — they must persist across component destroy/recreate cycles (e.g., tab switching)
+- Components should never call `cleanup()` in `ngOnDestroy` — this would tear down listeners on every navigation
+- Call `cleanup()` only for application-level events: user logout, account switching
+
+---
+
+## ❌ Anti-Patterns to Avoid
+
+### ❌ Manual `destroy$` Subject
+
+```typescript
+// ❌ DO NOT USE — verbose boilerplate, error-prone
+@Component({ ... })
+export class MyComponent implements OnDestroy {
+ private destroy$ = new Subject();
+
+ constructor() {
+ someObservable$
+ .pipe(takeUntil(this.destroy$))
+ .subscribe(value => { /* handle */ });
+ }
+
+ ngOnDestroy(): void {
+ this.destroy$.next(); // easy to forget
+ this.destroy$.complete(); // easy to forget
+ }
+}
+```
+
+**Problem:** Requires manual `ngOnDestroy` implementation. If `next()` or `complete()` is forgotten, subscriptions leak.
+
+**Fix:** Use `takeUntilDestroyed(this.destroyRef)` instead.
+
+---
+
+### ❌ Manual `Subscription.unsubscribe()`
+
+```typescript
+// ❌ DO NOT USE — manual tracking is error-prone
+@Component({ ... })
+export class MyComponent implements OnDestroy {
+ private subscription: Subscription | null = null;
+
+ constructor() {
+ this.subscription = someObservable$.subscribe(value => { /* handle */ });
+ }
+
+ ngOnDestroy(): void {
+ this.subscription?.unsubscribe(); // easy to miss for multiple subscriptions
+ }
+}
+```
+
+**Problem:** Each subscription requires a separate property and manual cleanup. Scales poorly.
+
+**Fix:** Use `takeUntilDestroyed(this.destroyRef)` — no property or `ngOnDestroy` needed.
+
+---
+
+### ❌ Subscribing Without Any Cleanup
+
+```typescript
+// ❌ MEMORY LEAK — subscription never cleaned up
+@Component({ ... })
+export class MyComponent {
+ constructor() {
+ someObservable$.subscribe(value => {
+ // This subscription lives forever!
+ });
+ }
+}
+```
+
+**Problem:** The subscription persists after the component is destroyed, accumulating over time.
+
+**Fix:** Always use `takeUntilDestroyed(this.destroyRef)` or `toSignal()`.
+
+---
+
+## Migration Guide
+
+If you encounter the old `takeUntil(this.destroy$)` pattern, here is how to migrate:
+
+### Before
+
+```typescript
+import { Component, OnDestroy } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+@Component({ ... })
+export class MyComponent implements OnDestroy {
+ private destroy$ = new Subject();
+
+ constructor() {
+ someObservable$
+ .pipe(takeUntil(this.destroy$))
+ .subscribe(value => { /* handle */ });
+ }
+
+ ngOnDestroy(): void {
+ this.destroy$.next();
+ this.destroy$.complete();
+ }
+}
+```
+
+### After
+
+```typescript
+import { Component, inject, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+@Component({ ... })
+export class MyComponent {
+ private readonly destroyRef = inject(DestroyRef);
+
+ constructor() {
+ someObservable$
+ .pipe(takeUntilDestroyed(this.destroyRef))
+ .subscribe(value => { /* handle */ });
+ }
+ // No ngOnDestroy needed!
+}
+```
+
+**Steps:**
+1. Add `DestroyRef` to `@angular/core` imports
+2. Add `takeUntilDestroyed` to `@angular/core/rxjs-interop` imports
+3. Add `private readonly destroyRef = inject(DestroyRef)` field
+4. Replace `.pipe(takeUntil(this.destroy$))` with `.pipe(takeUntilDestroyed(this.destroyRef))`
+5. Remove `private destroy$ = new Subject()`
+6. Remove `this.destroy$.next()` and `this.destroy$.complete()` from `ngOnDestroy`
+7. Remove `OnDestroy` interface if no other cleanup is needed
+8. Remove unused `Subject` and `takeUntil` imports
+
+---
+
+## Summary
+
+| Pattern | Use Case | Cleanup |
+|---------|----------|---------|
+| `takeUntilDestroyed(destroyRef)` | Any RxJS subscription in component/service | Automatic via DestroyRef |
+| `toSignal(obs$)` | Service observable → Signal in component | Automatic via DestroyRef |
+| Service-managed SDK listeners | CometChat SDK `addXxxListener` | Manual via `cleanup()` on logout |
+| ~~`takeUntil(destroy$)`~~ | ❌ Deprecated | Manual — avoid |
+| ~~`subscription.unsubscribe()`~~ | ❌ Deprecated | Manual — avoid |
diff --git a/ui-kit/angular/v5/guides/threaded-messages.mdx b/ui-kit/angular/guides/threaded-messages.mdx
similarity index 92%
rename from ui-kit/angular/v5/guides/threaded-messages.mdx
rename to ui-kit/angular/guides/threaded-messages.mdx
index d2023f2d0..e410a7b4b 100644
--- a/ui-kit/angular/v5/guides/threaded-messages.mdx
+++ b/ui-kit/angular/guides/threaded-messages.mdx
@@ -13,13 +13,13 @@ description: "Implement threaded message replies with parent context, reply list
| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login("UID")` |
| Entry point | `cometchat-message-list` `threadRepliesClick` output opens thread view from group messages |
| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-angular/tree/v5/projects/sample-app) |
-| Related | [All Guides](/ui-kit/angular/v5/guides/overview) |
+| Related | [All Guides](/ui-kit/angular/guides/guides-overview) |
Threaded messages let users create sub-conversations by replying to specific messages in group chats. This reduces clutter and keeps discussions focused.
-Before starting, complete the [Integration Guide](/ui-kit/angular/v5/integration).
+Before starting, complete the [Integration Guide](/ui-kit/angular/integration).
---
@@ -96,7 +96,7 @@ Render the thread panel with the parent message context, reply list filtered by
@if (showThreadPanel && threadedMessage) {
@@ -123,7 +123,7 @@ When the composer is blocked (e.g., permissions), show a fallback message instea
@if (showThreadPanel && threadedMessage) {
@@ -183,7 +183,7 @@ import {
@if (showThreadPanel && threadedMessage) {
@@ -231,7 +231,7 @@ export class ThreadedChatComponent implements OnDestroy {
| Show thread option | `(threadRepliesClick)` on `cometchat-message-list` | Fires when user clicks thread reply icon |
| Display thread messages | `cometchat-message-list` with `[parentMessageId]` | Filters messages to thread replies |
| Compose reply | `cometchat-message-composer` with `[parentMessageId]` | Scopes new messages to the thread |
-| Thread header | `cometchat-thread-header` with `[message]` | Shows parent message context |
+| Thread header | `cometchat-thread-header` with `[parentMessage]` | Shows parent message context |
| Close thread | `(closeClick)` on `cometchat-thread-header` | Closes the thread side panel |
| Thread state | Component property `threadedMessage` | Tracks the active parent message |
@@ -240,13 +240,13 @@ export class ThreadedChatComponent implements OnDestroy {
## Next Steps
-
+
Render real-time message threads.
-
+
Customize the thread header component.
-
+
Browse all feature and formatter guides.
diff --git a/ui-kit/angular/guides/url-formatter.mdx b/ui-kit/angular/guides/url-formatter.mdx
new file mode 100644
index 000000000..ea9eedd59
--- /dev/null
+++ b/ui-kit/angular/guides/url-formatter.mdx
@@ -0,0 +1,141 @@
+---
+title: "URL Formatter"
+description: "Detect and style plain URLs as clickable links with optional tracking logic in CometChat Angular UI Kit."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-angular` |
+| Key class | `CometChatUrlFormatter` (extends `CometChatTextFormatter`) |
+| Required setup | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login("UID")` |
+| Purpose | Auto-detects URLs in text messages and converts them to clickable links |
+| Related | [Custom Text Formatter](/ui-kit/angular/guides/custom-text-formatter) \| [All Guides](/ui-kit/angular/guides/guides-overview) |
+
+
+
+`CometChatUrlFormatter` extends [CometChatTextFormatter](/ui-kit/angular/guides/custom-text-formatter) to detect URLs in text messages and render them as clickable links.
+
+---
+
+## Usage
+
+Extend `CometChatTextFormatter`, set a regex pattern for URL detection, and override `format()` to handle formatting and click behavior.
+
+
+
+```typescript expandable
+import { CometChatTextFormatter } from "@cometchat/chat-uikit-angular";
+
+export class CometChatUrlsFormatter extends CometChatTextFormatter {
+ readonly id = "custom-url-formatter";
+ override priority = 10;
+
+ getRegex(): RegExp {
+ return /(https?:\/\/[^\s]+)/g;
+ }
+
+ format(text: string): string {
+ if (!text) {
+ this.originalText = "";
+ this.formattedText = "";
+ return "";
+ }
+
+ this.originalText = text;
+ this.formattedText = text.replace(
+ this.getRegex(),
+ '$1'
+ );
+ return this.formattedText;
+ }
+}
+```
+
+
+
+```typescript expandable
+import { Component, OnInit } from "@angular/core";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatMessageListComponent } from "@cometchat/chat-uikit-angular";
+import { CometChatUrlsFormatter } from "./CometChatUrlsFormatter";
+
+@Component({
+ selector: "app-url-demo",
+ standalone: true,
+ imports: [CometChatMessageListComponent],
+ template: `
+
+
+ `,
+})
+export class UrlDemoComponent implements OnInit {
+ chatUser: CometChat.User | undefined;
+ textFormatters = [new CometChatUrlsFormatter()];
+
+ ngOnInit() {
+ CometChat.getUser("uid").then((user) => {
+ this.chatUser = user;
+ });
+ }
+}
+```
+
+
+
+---
+
+## Customization
+
+### Styling links
+
+Apply CSS to your link class:
+
+```css
+.clickable-url {
+ color: var(--cometchat-primary-color);
+ text-decoration: underline;
+ cursor: pointer;
+}
+```
+
+### Handling clicks
+
+Override `onUrlClick` to add tracking or custom navigation:
+
+```typescript
+private onUrlClick(event: Event) {
+ event.preventDefault();
+ const target = event.target as HTMLAnchorElement;
+ const url = target.href;
+ // Add analytics tracking
+ console.log("URL clicked:", url);
+ window.open(url, "_blank", "noopener,noreferrer");
+}
+```
+
+
+The `CometChatUrlFormatter` is included by default in the message list. You only need to pass it explicitly if you want to customize click behavior or combine it with other formatters.
+
+
+---
+
+## Next Steps
+
+
+
+ Build custom inline text patterns.
+
+
+ Render real-time message threads.
+
+
+ Browse all feature and formatter guides.
+
+
+ Add @mentions with styled tokens.
+
+
diff --git a/ui-kit/angular/v5/integration.mdx b/ui-kit/angular/integration.mdx
similarity index 92%
rename from ui-kit/angular/v5/integration.mdx
rename to ui-kit/angular/integration.mdx
index 72f0c0dfc..dcf024e49 100644
--- a/ui-kit/angular/v5/integration.mdx
+++ b/ui-kit/angular/integration.mdx
@@ -59,12 +59,12 @@ This creates a new Angular project with CSS styling and no server-side rendering
```bash
-npm install @cometchat/chat-uikit-angular@5.0.0-beta.2 @cometchat/chat-sdk-javascript
+npm install @cometchat/chat-uikit-angular @cometchat/chat-sdk-javascript
```
```bash
-yarn add @cometchat/chat-uikit-angular@5.0.0-beta.2 @cometchat/chat-sdk-javascript
+yarn add @cometchat/chat-uikit-angular @cometchat/chat-sdk-javascript
```
@@ -80,7 +80,7 @@ npm install @cometchat/chat-sdk-javascript dompurify
If you want voice/video calling, also install:
```bash
-npm install @cometchat/calls-sdk-javascript@5.0.0-beta.1
+npm install @cometchat/calls-sdk-javascript
```
---
@@ -290,7 +290,7 @@ Two-panel layout — conversation list on the left, messages on the right. Think
-
+
Step-by-step guide to build this layout
@@ -309,7 +309,7 @@ Single chat window — no sidebar. Good for support chat, embedded widgets, or f
-
+
Step-by-step guide to build this layout
@@ -328,7 +328,7 @@ Tabbed navigation — Chat, Call Logs, Users in separate tabs. Good for full-fea
-
+
Step-by-step guide to build this layout
@@ -338,25 +338,25 @@ Tabbed navigation — Chat, Call Logs, Users in separate tabs. Good for full-fea
Need full control over the UI? Use individual components, customize themes, and wire up your own layouts.
-- [Components](/ui-kit/angular/v5/components/overview) — All prebuilt UI elements with inputs and customization options
-- [Core Features](/ui-kit/angular/v5/core-features) — Messaging, real-time updates, and other capabilities
-- [Theming](/ui-kit/angular/v5/customization/theming) — Colors, fonts, dark mode, and custom styling
+- [Components](/ui-kit/angular/components/components-overview) — All prebuilt UI elements with inputs and customization options
+- [Core Features](/ui-kit/angular/core-features) — Messaging, real-time updates, and other capabilities
+- [Theming](/ui-kit/angular/customization/theming) — Colors, fonts, dark mode, and custom styling
---
## Next Steps
-
+
Browse all prebuilt UI components
-
+
Customize colors, fonts, and styles
-
+
Chat features included out of the box
-
+
Common issues and fixes
diff --git a/ui-kit/angular/methods.mdx b/ui-kit/angular/methods.mdx
index 80e893be4..e2d0acec9 100644
--- a/ui-kit/angular/methods.mdx
+++ b/ui-kit/angular/methods.mdx
@@ -1,659 +1,282 @@
---
title: "Methods"
-description: "Methods — CometChat documentation."
+description: "Use CometChat Angular UI Kit methods for initialization, login, logout, users, groups, messages, calls, and session handling."
---
-## Overview
+The UIKit wraps the [Chat SDK](/sdk/javascript/overview) methods to manage internal eventing and keep UI components synchronized. Use these wrapper methods instead of raw SDK calls.
-The UI Kit's core function is to extend the [Chat SDK](/sdk/javascript/overview), essentially translating the raw data and functionality provided by the underlying methods into visually appealing and easy-to-use UI components.
+
+`CometChatUIKit.init()` must be called before rendering any UIKit components or calling any SDK methods. Initialization must complete before login.
+
-To effectively manage and synchronize the UI elements and data across all components in the UI Kit, we utilize internal events. These internal events enable us to keep track of changes in real time and ensure that the UI reflects the most current state of data.
+
+Auth Key is for development/testing only. In production, generate Auth Tokens on the server using the REST API and pass them to the client via `loginWithAuthToken()`. Never expose Auth Keys in production client code.
+
-The CometChat UI Kit has thoughtfully encapsulated the critical [Chat SDK](/sdk/javascript/overview) methods within its wrapper to efficiently manage internal eventing. This layer of abstraction simplifies interaction with the underlying CometChat SDK, making it more user-friendly for developers.
+## UIKitSettingsBuilder
-## Methods
-
-You can access the methods using the `CometChatUIKit` class. This class provides access to all the public methods exposed by the CometChat UI Kit.
-
-### Init
-
-This method initializes the settings required for [CometChat JavaScript SDK](/sdk/javascript/overview). First, ensure UIKitSettings is set and then call the `init()` method on the app startup.
+`UIKitSettingsBuilder` is a fluent builder for constructing the `UIKitSettings` object passed to `CometChatUIKit.init()`.
-
-
-Make sure you replace the **APP\_ID**, **REGION** and **AUTH\_KEY** with your CometChat App ID, Region and Auth Key in the below code. The `Auth Key` is an optional property of the `UIKitSettings` Class. It is intended for use primarily during proof-of-concept (POC) development or in the early stages of application development. You can use the [Auth Token](#login-using-auth-token) method to log in securely.
-
-
+| Method | Parameter | Description |
+|--------|-----------|-------------|
+| `setAppId(appId)` | `string` | Your CometChat App ID from the Dashboard |
+| `setRegion(region)` | `string` | App region (e.g. `'us'`, `'eu'`) |
+| `setAuthKey(authKey)` | `string` | Auth Key for dev/testing — use Auth Token in production |
+| `subscribePresenceForAllUsers()` | — | Subscribe to presence updates for all users |
+| `subscribePresenceForFriends()` | — | Subscribe to presence updates for friends only |
+| `subscribePresenceForRoles(roles)` | `string[]` | Subscribe to presence updates for users with specific roles |
+| `setRoles(roles)` | `string[]` | Set roles filter independently of presence subscription |
+| `setAutoEstablishSocketConnection(autoEstablish)` | `boolean` | Control whether the WebSocket connects automatically on init |
+| `setAdminHost(adminHost)` | `string` | Override the admin API host (custom/on-premise deployments) |
+| `setClientHost(clientHost)` | `string` | Override the client API host (custom/on-premise deployments) |
+| `setStorageMode(storageMode)` | `CometChat.StorageMode` | Set the storage mode for SDK data persistence |
+| `build()` | — | Returns the configured `UIKitSettings` instance |
-
-
-```js
-import { UIKitSettingsBuilder } from "@cometchat/uikit-shared";//import shared package
+```typescript expandable
+import { UIKitSettingsBuilder } from '@cometchat/chat-uikit-angular';
-const COMETCHAT_CONSTANTS = {
-APP_ID: "APP_ID", __ Replace with your App ID
-REGION: "REGION", __ Replace with your App Region
-AUTH_KEY: "AUTH_KEY" __ Replace with your Auth Key
-}
-
-__create the builder
const UIKitSettings = new UIKitSettingsBuilder()
- .setAppId(COMETCHAT_CONSTANTS.APP_ID)
- .setRegion(COMETCHAT_CONSTANTS.REGION)
- .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
- .subscribePresenceForAllUsers()
+ .setAppId('APP_ID')
+ .setRegion('REGION')
+ .setAuthKey('AUTH_KEY')
+ .subscribePresenceForFriends()
+ .setAutoEstablishSocketConnection(true)
.build();
-
-
-__Initialize CometChat
-CometChatUIKit.init(UIKitSettings)?.then(()=>{
-__login your user
-})
```
-
+---
+
+## Methods
-
+All methods are accessed via the `CometChatUIKit` class.
+### Init
-### Setting Session Storage Mode
+Initializes the CometChat SDK. Must be called on app startup before any other UIKit method.
-If you want to use session storage instead of the default local storage, you can configure it during initialization:
+
+Replace `APP_ID`, `REGION`, and `AUTH_KEY` with values from the CometChat Dashboard. `Auth Key` is optional — use [Auth Token](#login-using-auth-token) for production.
+
-
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { UIKitSettingsBuilder } from "@cometchat/uikit-shared";
+```typescript expandable
+import { CometChatUIKit, UIKitSettingsBuilder } from '@cometchat/chat-uikit-angular';
const COMETCHAT_CONSTANTS = {
- APP_ID: "APP_ID", // Replace with your App ID
- REGION: "REGION", // Replace with your App Region
- AUTH_KEY: "AUTH_KEY", // Replace with your Auth Key
+ APP_ID: 'APP_ID',
+ REGION: 'REGION',
+ AUTH_KEY: 'AUTH_KEY',
};
const UIKitSettings = new UIKitSettingsBuilder()
.setAppId(COMETCHAT_CONSTANTS.APP_ID)
.setRegion(COMETCHAT_CONSTANTS.REGION)
.setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
- .subscribePresenceForAllUsers()
- .setStorageMode(CometChat.StorageMode.SESSION)
+ .subscribePresenceForFriends()
.build();
-//Initialize CometChat UI Kit with Session Storage
CometChatUIKit.init(UIKitSettings)?.then(() => {
- console.log("Initialization completed successfully with session storage");
- // You can now call login function.
- })
- .catch(console.log);
+ // login your user
+});
```
-
-
-### getLoggedInUser
+---
-You can use this method to check if there is any existing session in the SDK. This method should return the details of the logged-in user.
+### Get Logged In User
-
-
-```js
-import { CometChatUIKit } from "@cometchat/chat-uikit-angular";//import uikit package
+Checks for an existing session in the SDK. Returns the logged-in user details or `null`.
+```typescript
+import { CometChatUIKit } from '@cometchat/chat-uikit-angular';
-CometChatUIKit.getLoggedinUser().then(user => {
- __Login user
-}).catch(console.log);
+CometChatUIKit.getLoggedinUser()
+ .then((user) => {
+ // Login user
+ })
+ .catch(console.log);
```
-
-
-
+---
### Login using Auth Key
-This simple authentication procedure is useful when you are creating a POC or if you are in the development phase. For production apps, we suggest you use [AuthToken](#login-using-auth-token) instead of Auth Key.
+Simple authentication for development/POC. For production, use [Auth Token](#login-using-auth-token).
-
-
-```js
-import { CometChatUIKit } from "@cometchat/chat-uikit-angular";
+```typescript expandable
+import { CometChatUIKit } from '@cometchat/chat-uikit-angular';
-const UID = "UID";
-const authKey = "AUTH_KEY";
+const UID = 'UID';
CometChatUIKit.getLoggedinUser()
.then((user) => {
if (!user) {
- //Login user
- CometChatUIKit.login({ uid: UID })
+ CometChatUIKit.login(UID)
.then((user) => {
- console.log("Login Successful:", { user });
- //mount your app
+ console.log('Login Successful:', { user });
})
.catch(console.log);
- } else {
- //user already logged in
- //mount your app
}
})
.catch(console.log);
```
-
-
-
+---
### Login using Auth Token
-This advanced authentication procedure does not use the Auth Key directly in your client code thus ensuring safety.
+Production-safe authentication that does not expose the Auth Key in client code.
1. [Create a User](/rest-api/chat-apis) via the CometChat API when the user signs up in your app.
2. [Create an Auth Token](/rest-api/chat-apis) via the CometChat API for the new user and save the token in your database.
3. Load the Auth Token in your client and pass it to the `loginWithAuthToken()` method.
-
-
-```js
-import { CometChatUIKit } from "@cometchat/chat-uikit-angular";
-
-const authToken = "AUTH_TOKEN";
+```typescript expandable
+import { CometChatUIKit } from '@cometchat/chat-uikit-angular';
-CometChatUIKit.getLoggedinUser().then(user => {
- if(!user){
- //Login user
- CometChatUIKit.login({authToken}).then(user => {
+const authToken = 'AUTH_TOKEN';
- console.log("Login Successful:", { user });
- //mount your app
-
- }).catch(console.log);
- } else {
- //user already logged in
- //mount your app
- }
-}).catch(console.log););
+CometChatUIKit.getLoggedinUser()
+ .then((user) => {
+ if (!user) {
+ CometChatUIKit.loginWithAuthToken(authToken)
+ .then((user) => {
+ console.log('Login Successful:', { user });
+ })
+ .catch(console.log);
+ }
+ })
+ .catch(console.log);
```
-
-
-
+---
### Logout
-This method is used to end the user session of the logged-in user
+Ends the current user session.
-
-
-```js
-import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
+```typescript
+import { CometChatUIKit } from '@cometchat/chat-uikit-angular';
CometChatUIKit.logout();
```
-
-
-
+---
-### Create user
+### Create User
-This method takes a `User` object and the `Auth Key` as input parameters and returns the created `User` object if the request is successful.
+Takes a `User` object and Auth Key, returns the created `User` object.
-
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatUIKit } from "@cometchat/chat-uikit-angular";
+```typescript expandable
+import { CometChat } from '@cometchat/chat-sdk-javascript';
+import { CometChatUIKit } from '@cometchat/chat-uikit-angular';
-const authKey = "AUTH_KEY";
-const UID = "user1";
-const name = "Kevin";
+const authKey = 'AUTH_KEY';
+const UID = 'user1';
+const name = 'Kevin';
-var user = new CometChat.User(UID);
+const user = new CometChat.User(UID);
user.setName(name);
CometChatUIKit.createUser(user, authKey)
.then((user) => {
- console.log("user created", user);
-
- CometChatUIKit.login(UID, authKey)
- .then((user) => {
- console.log("Login Successful:", { user });
- //mount your app
- })
- .catch(console.log);
+ console.log('User created:', user);
})
.catch(console.log);
```
-
-
-
+---
-### Update user
+### Update User
-This method takes a `User` object and the `Auth Key` as inputs and returns the updated `User` object on the successful execution of the request.
+Takes a `User` object and Auth Key, returns the updated `User` object.
-
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatUIKit } from "@cometchat/chat-uikit-angular";
+```typescript expandable
+import { CometChat } from '@cometchat/chat-sdk-javascript';
+import { CometChatUIKit } from '@cometchat/chat-uikit-angular';
-const authKey = "AUTH_KEY";
-const UID = "user1";
-const name = "Kevin Fernandez";
+const authKey = 'AUTH_KEY';
+const UID = 'user1';
+const name = 'Kevin Fernandez';
-var user = new CometChat.User(UID);
+const user = new CometChat.User(UID);
user.setName(name);
CometChatUIKit.updateUser(user, authKey)
.then((user) => {
- console.log("user updated", user);
+ console.log('User updated:', user);
})
.catch(console.log);
```
-
+---
-
+### Base Message
-### Send text message
+#### Text Message
-This method sends a text message in a 1:1 or group chat. You need to pass a `TextMessage` object to it.
+Sends a text message in a 1:1 or group chat. Takes a `TextMessage` object.
-
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatUIKit } from "@cometchat/chat-uikit-angular";
-import { CometChatUIKitConstants } from "@cometchat/uikit-resources";
+```typescript expandable
+import { CometChat } from '@cometchat/chat-sdk-javascript';
+import { CometChatUIKit } from '@cometchat/chat-uikit-angular';
+import { CometChatUIKitConstants } from '@cometchat/chat-uikit-angular';
-const receiverID = "UID";
-const messageText = "Hello world!";
+const receiverID = 'UID';
+const messageText = 'Hello world!';
const receiverType = CometChatUIKitConstants.MessageReceiverType.user;
-const textMessage = new CometChat.TextMessage(
- receiverID,
- messageText,
- receiverType
-);
+const textMessage = new CometChat.TextMessage(receiverID, messageText, receiverType);
-CometChatUIKit.sendMessage(textMessage)
+CometChatUIKit.sendTextMessage(textMessage)
.then((message) => {
- console.log("Message sent successfully:", message);
+ console.log('Message sent successfully:', message);
})
.catch(console.log);
```
-
-
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatUIKit } from "@cometchat/chat-uikit-angular";
-import { CometChatUIKitConstants } from "@cometchat/uikit-resources";
-
-const receiverID = "GUID";
-const messageText = "Hello world!";
-const receiverType = CometChatUIKitConstants.MessageReceiverType.group;
-const textMessage = new CometChat.TextMessage(
- receiverID,
- messageText,
- receiverType
-);
-
-CometChatUIKit.sendMessage(textMessage)
- .then((message) => {
- console.log("Message sent successfully:", message);
- })
- .catch(console.log);
-```
-
-
-
-
+---
-### Send media message
+#### Media Message
-This method sends a media message in a 1:1 or group chat. You need to pass a `MediaMessage` object to it.
+Sends a media message in a 1:1 or group chat. Takes a `MediaMessage` object.
-
-Make sure you replace the `INPUT FILE OBJECT` with the actual [file](https://developer.mozilla.org/en-US/docs/Web/API/File).
-
+Replace `file` with the actual [File](https://developer.mozilla.org/en-US/docs/Web/API/File) object.
-
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
-import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
-import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package
+```typescript expandable
+import { CometChat } from '@cometchat/chat-sdk-javascript';
+import { CometChatUIKit } from '@cometchat/chat-uikit-angular';
+import { CometChatUIKitConstants } from '@cometchat/chat-uikit-angular';
-const receiverID = "UID";
+const receiverID = 'UID';
const messageType = CometChatUIKitConstants.MessageTypes.file;
const receiverType = CometChatUIKitConstants.MessageReceiverType.user;
-const mediaMessage = new CometChat.MediaMessage(
- receiverID,
- `INPUT FILE OBJECT`,
- messageType,
- receiverType
-);
+const mediaMessage = new CometChat.MediaMessage(receiverID, file, messageType, receiverType);
CometChatUIKit.sendMediaMessage(mediaMessage)
.then((message) => {
- console.log("Media message sent successfully", message);
+ console.log('Media message sent successfully:', message);
})
.catch(console.log);
```
-
-
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
-import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
-import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package
-
-const receiverID = "GUID";
-const messageType = CometChatUIKitConstants.MessageTypes.file;
-const receiverType = CometChatUIKitConstants.MessageReceiverType.group;
-const mediaMessage = new CometChat.MediaMessage(
- receiverID,
- `INPUT FILE OBJECT`,
- messageType,
- receiverType
-);
-
-CometChatUIKit.sendMediaMessage(mediaMessage)
- .then((message) => {
- console.log("Media message sent successfully", message);
- })
- .catch(console.log);
-```
-
-
-
-
+---
-### Send custom message
+#### Custom Message
-This method allows you to send custom messages which are neither text nor media messages.
+Sends a custom message (neither text nor media) in a 1:1 or group chat. Takes a `CustomMessage` object.
-
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
-import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
-import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package
+```typescript expandable
+import { CometChat } from '@cometchat/chat-sdk-javascript';
+import { CometChatUIKit } from '@cometchat/chat-uikit-angular';
+import { CometChatUIKitConstants } from '@cometchat/chat-uikit-angular';
-const receiverID = "UID";
-const customData = {
- latitude: "50.6192171633316",
- longitude: "-72.68182268750002",
-};
-const customType = "location";
+const receiverID = 'UID';
+const customData = { latitude: '50.6192171633316', longitude: '-72.68182268750002' };
+const customType = 'location';
const receiverType = CometChatUIKitConstants.MessageReceiverType.user;
-const customMessage = new CometChat.CustomMessage(
- receiverID,
- receiverType,
- customType,
- customData
-);
+const customMessage = new CometChat.CustomMessage(receiverID, receiverType, customType, customData);
CometChatUIKit.sendCustomMessage(customMessage)
.then((message) => {
- console.log("custom message sent successfully", message);
- })
- .catch(console.log);
-```
-
-
-
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
-import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
-import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package
-
-const receiverID = "GUID";
-const customData = {
- latitude: "50.6192171633316",
- longitude: "-72.68182268750002",
-};
-const customType = "location";
-const receiverType = CometChatUIKitConstants.MessageReceiverType.group;
-const customMessage = new CometChat.CustomMessage(
- receiverID,
- receiverType,
- customType,
- customData
-);
-
-CometChatUIKit.sendCustomMessage(customMessage)
- .then((message) => {
- console.log("custom message sent successfully", message);
- })
- .catch(console.log);
-```
-
-
-
-
-
-### Send Form message
-
-This method allows you to send [Form](/web-shared/form-message)Messages which are the extension of Interactive Message
-
-
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
-import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
-import {
- CometChatUIKitConstants,
- APIAction,
- ButtonElement,
- TextInput,
- FormMessage,
-} from "@cometchat/uikit-resources"; //import shared package
-
-const receiverID = "UID";
-// Create an instance of APIAction
-let apiAction = new APIAction("https://example.com/api", "POST");
-
-// Create an instance of ButtonElement
-let submitButton = new ButtonElement("1", apiAction, "Submit");
-
-// Create an instance of TextInput
-let nameInput = new TextInput("1", "Please enter your name");
-// Create a new instance of FormMessage
-
-let formMessage = new FormMessage(
- "receiverId",
- CometChatUIKitConstants.MessageReceiverType.user,
- "Title",
- [nameInput],
- submitButton
-);
-
-CometChatUIKit.sendFormMessage(formMessage)
- .then((message) => {
- console.log("Form message sent successfully", message);
+ console.log('Custom message sent successfully:', message);
})
.catch(console.log);
```
-
-
-
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
-import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
-import {
- CometChatUIKitConstants,
- APIAction,
- ButtonElement,
- TextInput,
- FormMessage,
-} from "@cometchat/uikit-resources"; //import shared package
-
-const receiverID = "GUID";
-// Create an instance of APIAction
-let apiAction = new APIAction("https://example.com/api", "POST");
-// Create an instance of ButtonElement
-let submitButton = new ButtonElement("1", apiAction, "Submit");
-// Create an instance of TextInput
-let nameInput = new TextInput("1", "Please enter your name");
-// Create a new instance of FormMessage
-let formMessage = new FormMessage(
- "receiverId",
- CometChatUIKitConstants.MessageReceiverType.group,
- "Title",
- [nameInput],
- submitButton
-);
-
-CometChatUIKit.sendFormMessage(formMessage)
- .then((message) => {
- console.log("Form message sent successfully", message);
- })
- .catch(console.log);
-```
-
-
-
-
-
-### Send Card Message
-
-This method allows you to send [Card](/web-shared/card-message)Messages which are the extension of Interactive Message
-
-
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
-import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
-import {
- CometChatUIKitConstants,
- ButtonElement,
- CardMessage,
-} from "@cometchat/uikit-resources"; //import shared package
-
-const receiverID = "UID";
-// Create instance of ButtonElement for card actions
-let cardAction = new ButtonElement(
- "1",
- new APIAction("https://example.com/api", "POST"),
- "Click Me"
-);
-// Create a new instance of CardMessage
-let cardMessage = new CardMessage(
- "receiverId",
- CometChatUIKitConstants.MessageReceiverType.user,
- "This is a card",
- [cardAction]
-);
-
-CometChatUIKit.sendCardMessage(cardMessage)
- .then((message) => {
- console.log("card message sent successfully", message);
- })
- .catch(console.log);
-```
-
-
-
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
-import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
-import {
- CometChatUIKitConstants,
- ButtonElement,
- CardMessage,
-} from "@cometchat/uikit-resources"; //import shared package
-
-const receiverID = "GUID";
-// Create instance of ButtonElement for card actions
-let cardAction = new ButtonElement(
- "1",
- new APIAction("https://example.com/api", "POST"),
- "Click Me"
-);
-// Create a new instance of CardMessage
-let cardMessage = new CardMessage(
- "receiverId",
- CometChatUIKitConstants.MessageReceiverType.group,
- "This is a card",
- [cardAction]
-);
-
-CometChatUIKit.sendCardMessage(cardMessage)
- .then((message) => {
- console.log("card message sent successfully", message);
- })
- .catch(console.log);
-```
-
-
-
-
-
-### Send Custom Interactive message
-
-This method allows you to send [Custom Interactive Messages](/web-shared/custom-interactive-message) which are the extension of Interactive Message
-
-
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
-import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
-import {
- CometChatUIKitConstants,
- ButtonElement,
- CardMessage,
-} from "@cometchat/uikit-resources"; //import shared package
-
-const receiverID = "UID";
-// Create a new instance of CardMessage
-let customMessage = new CustomInteractiveMessage(
- "receiverId",
- CometChatUIKitConstants.MessageReceiverType.user,
- json
-);
-
-CometChatUIKit.sendCustomInteractiveMessage(customMessage)
- .then((message) => {
- console.log("CustomInteractive message sent successfully", message);
- })
- .catch(console.log);
-```
-
-
-
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
-import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
-import {
- CometChatUIKitConstants,
- ButtonElement,
- CardMessage,
-} from "@cometchat/uikit-resources"; //import shared package
-
-const receiverID = "GUID";
-// Create a new instance of CardMessage
-let customMessage = new CustomInteractiveMessage(
- "receiverId",
- CometChatUIKitConstants.MessageReceiverType.group,
- json
-);
-
-CometChatUIKit.sendCustomInteractiveMessage(customMessage)
- .then((message) => {
- console.log("CustomInteractive message sent successfully", message);
- })
- .catch(console.log);
-```
-
-
-
-
diff --git a/ui-kit/angular/overview.mdx b/ui-kit/angular/overview.mdx
index 57ad6b1b5..0347bc9f1 100644
--- a/ui-kit/angular/overview.mdx
+++ b/ui-kit/angular/overview.mdx
@@ -1,67 +1,104 @@
---
-title: "Overview"
-description: "Overview of Overview in CometChat."
+title: "Angular UI Kit"
+sidebarTitle: "Overview"
+description: "Use CometChat Angular UI Kit to add standalone chat components, voice and video calling, theming, localization, and customization."
---
-
-🚀 **CometChat Angular UI Kit v5 is now available in beta!** It features a completely revamped component architecture and improved theming. [Try the v5 Beta →](/ui-kit/angular/v5/overview)
-
-
| Field | Value |
| --- | --- |
-| Package | `@cometchat/chat-uikit-angular` |
-| Peer deps | `@cometchat/uikit-elements`, `@cometchat/uikit-resources`, `@cometchat/uikit-shared` |
-| Source | [GitHub](https://github.com/cometchat-pro/cometchat-chat-sample-app-angular/tree/v4) |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Peer deps | `@cometchat/chat-sdk-javascript`, `dompurify` |
+| Calling | Optional — `@cometchat/calls-sdk-javascript` |
+| Angular | v19, v20, v21 |
+| Localization | 19 languages built-in |
+| Source | [GitHub](https://github.com/cometchat/cometchat-uikit-angular/tree/v5) |
| AI Skills | `npx @cometchat/skills add` — [GitHub](https://github.com/cometchat/cometchat-skills) |
-CometChat's **UI Kit** for Angular, you can effortlessly build a chat app equipped with all the essential messaging features, along with customizable options tailored to your application requirements. This **UI Kit** comprises prebuilt UI components organized into smaller modules and components, each configurable to meet your specific needs.
+The CometChat Angular UI Kit provides prebuilt, customizable standalone components for adding chat, voice, and video calling to any Angular app. Each component handles its own data fetching, real-time listeners, and state — you just drop them into your layout.
- 
+
---------
-
-[Angular Sample App](https://github.com/cometchat-pro/cometchat-chat-sample-app-angular/tree/v4)
-
-##### **Before Getting Started**
-
-Before you begin, it's essential to grasp the fundamental concepts and features offered by CometChat's APIs, SDK, and UI Kit. You can find detailed information in [Key Concepts](/fundamentals/key-concepts) documentation.
-
-The Angular UI Kit offers pre-built components for easy integration into Angular applications, built on top of the [JavaScript Chat SDK](/sdk/javascript/overview) Installing it also includes the core SDK functionalities.
-
-To begin, please follow the [Getting Started](/ui-kit/angular/getting-started) guide.
---
-## Integrate with AI Coding Agents
+## Try It
-Use [CometChat Skills](https://github.com/cometchat/cometchat-skills) to add chat to any Angular project through your AI coding agent. The skill takes an AI-first approach — your agent has a short conversation with you to understand your project and chat requirements, then writes production-grade integration code tailored to the files you already have.
+
+
+ Try the full chat experience in your browser
+
+
+ Clone the sample app and start building
+
+
-Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and [30+ more agents](https://github.com/cometchat/cometchat-skills).
-
-```bash
-npx @cometchat/skills add
-```
-
-Use `--ide ` to target a specific IDE (e.g. `--ide cursor`), or `--ide all` to install for all supported IDEs.
+---
-Then in your IDE:
+## Get Started
+
+
+
+ Set up CometChat UIKit in your Angular project
+
+
+ Get up and running in 5 minutes
+
+
+ Build a conversation list UI
+
+
+ Build a direct messaging UI
+
+
-```
-/cometchat add chat to my app
-```
+---
-The skill detects your Angular version, router setup, 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 routes, modules, and components before proposing a placement (route or modal), shows the plan (which files it will create, modify, and leave untouched), and waits for your approval before writing code. Credentials are saved to `src/environments/environment.ts`.
+## Explore
+
+
+
+ Browse all prebuilt UI components
+
+
+ Chat, calling, AI, and extensions
+
+
+ Colors, fonts, dark mode, and custom styling
+
+
+ Threaded messages, new chat, search, and more
+
+
-After the first integration, re-run `/cometchat` anytime to pick from the iteration menu:
+---
-- **Customize look & feel** — theme presets (slack / whatsapp / imessage / discord / notion) or your own brand color
-- **Add a feature** — 40+ features including calls, reactions, polls, AI smart replies, file sharing, presence
-- **Customize a component** — custom message bubbles, headers, composer actions, empty/loading states
-- **Set up production auth** — replace the dev Auth Key with a server-side token endpoint
-- **Set up user management** — server endpoints for creating/updating/deleting CometChat users
-- **Run diagnostics** — verify, drift detection, symptom-to-cause lookup
+## Resources
+
+
+
+ Working reference app
+
+
+ Full UI Kit source on GitHub
+
+
+ Interactive component playground
+
+
+ Design resources and prototyping
+
+
+ Upgrading from v4
+
+
+ Common issues and fixes
+
+
+ Open a support ticket
+
+
diff --git a/ui-kit/angular/v5/quickstart.mdx b/ui-kit/angular/quickstart.mdx
similarity index 95%
rename from ui-kit/angular/v5/quickstart.mdx
rename to ui-kit/angular/quickstart.mdx
index 70261ac22..c48632f89 100644
--- a/ui-kit/angular/v5/quickstart.mdx
+++ b/ui-kit/angular/quickstart.mdx
@@ -13,7 +13,7 @@ Follow these steps to integrate CometChat UIKit into your Angular application.
## Step 1: Install the Package
```bash
-npm install @cometchat/chat-uikit-angular@5.0.0-beta.2
+npm install @cometchat/chat-uikit-angular
```
@@ -114,7 +114,7 @@ CometChatUIKit.init(uiKitSettings)
});
```
- To enable voice and video calling, install `@cometchat/calls-sdk-javascript` and add `.setCallingEnabled(true)` to the builder. Without this, call buttons are hidden across all components. See [Call Features](/ui-kit/angular/v5/call-features) for details.
+ To enable voice and video calling, install `@cometchat/calls-sdk-javascript` and add `.setCallingEnabled(true)` to the builder. Without this, call buttons are hidden across all components. See [Call Features](/ui-kit/angular/call-features) for details.
## Step 5: Login a User
@@ -144,10 +144,10 @@ Add the conversations component to your template:
## Next Steps
-
+
Full setup guide with examples
-
+
Explore all available components
diff --git a/ui-kit/angular/sound-manager.mdx b/ui-kit/angular/sound-manager.mdx
index 393ed7a2d..b105c0b40 100644
--- a/ui-kit/angular/sound-manager.mdx
+++ b/ui-kit/angular/sound-manager.mdx
@@ -1,63 +1,84 @@
---
title: "Sound Manager"
-description: "Sound Manager — CometChat documentation."
+description: "Manage and customize audio cues for incoming/outgoing calls and messages in CometChat Angular UIKit."
---
-## Overview
+`CometChatSoundManager` is a helper class for managing and playing audio cues in the UI Kit — incoming/outgoing calls and messages.
-The SoundManager is a helper class responsible for managing and playing various types of audio in the CometChat UI Kit. This includes sound events for incoming and outgoing messages and calls.
+`Sound` is a frozen object on `CometChatSoundManager`, not a separate export. Access sound event keys via `CometChatSoundManager.Sound`.
+
+---
## Methods
-### Play Sound
+### play
-`CometChatSoundManager.play` method plays the in-built sounds audio resources for the above mentioned enum cases. It also allows for customisation of the audio resources. You can pass a mp3 file asset path of your choice.
+Plays the default or custom audio resource for a given sound event.
-Here are the available methods for triggering sound playback:
+| Parameter | Type | Description |
+| --- | --- | --- |
+| `sound` | `"incomingCall" \| "incomingMessage" \| "incomingMessageFromOther" \| "outgoingCall" \| "outgoingMessage"` | Sound event key |
+| `customSound` | `string \| null` | Optional custom audio file URL. Defaults to `null` (uses built-in sound). |
-* `play(sound: Sound)`: This method plays predefined sounds for various events such as incoming and outgoing calls and messages.
+### pause
-* `play(sound: Sound, filePath: string)`: This method is capable of playing a custom sound for a particular event by specifying the path to a custom MP3 file.
+Pauses the currently playing sound and resets playback position.
-### Pause Sound
+### onIncomingMessage
-The SoundManager can pause different types of sounds for incoming and outgoing calls and messages using the following method:
+Plays the incoming message sound directly. Accepts an optional `customSound` URL.
-* `pause()`: This method pauses any sound currently being played.
+### onIncomingOtherMessage
-## Usage
+Plays the incoming message from another user sound directly. Accepts an optional `customSound` URL.
-Here is how to use CometChatSoundManager:
+### onOutgoingMessage
-
-
-```js
-//Trigger the audio sound for an incoming message
-CometChatSoundManager.play(Sound.incomingMessage);
+Plays the outgoing message sound directly. Accepts an optional `customSound` URL.
-//Trigger the audio sound of your choice for an incoming message
-CometChatSoundManager.play(Sound.incomingMessage, "MP3_FILE_ASSET_PATH");
+### onIncomingCall
-//Pause the ongoing audio sound
-CometChatSoundManager.pause();
-```
+Plays the incoming call sound (loops). Accepts an optional `customSound` URL.
-
+### onOutgoingCall
-
-```ts
-//Trigger the audio sound for an incoming message
-CometChatSoundManager.play(Sound.incomingMessage);
+Plays the outgoing call sound (loops). Accepts an optional `customSound` URL.
-//Trigger the audio sound of your choice for an incoming message
-CometChatSoundManager.play(Sound.incomingMessage, "MP3_FILE_ASSET_PATH");
+### hasInteracted
-//Pause the ongoing audio sound
-CometChatSoundManager.pause();
-```
+Returns `boolean` — checks whether the user has interacted with the page (required by browser autoplay policies).
+
+---
+
+## Sound Events
-
+| Event Key | When it plays |
+| --- | --- |
+| `incomingCall` | Incoming call detected |
+| `outgoingCall` | Outgoing call initiated |
+| `incomingMessage` | New message received from the current conversation |
+| `incomingMessageFromOther` | New message received from a different conversation |
+| `outgoingMessage` | Message sent |
-
+Access via `CometChatSoundManager.Sound.incomingCall`, etc.
-By using the CometChatSoundManager, you can enhance the user experience in your chat application by integrating audible cues for chat interactions.
+---
+
+## Usage
+
+```typescript expandable
+import { CometChatSoundManager } from '@cometchat/chat-uikit-angular';
+
+// Play default incoming call sound
+CometChatSoundManager.play(CometChatSoundManager.Sound.incomingCall);
+
+// Play custom sound for incoming message
+CometChatSoundManager.play(CometChatSoundManager.Sound.incomingMessage, 'MP3_FILE_ASSET_PATH');
+
+// Pause the ongoing sound
+CometChatSoundManager.pause();
+
+// Use individual method directly
+CometChatSoundManager.onIncomingCall();
+CometChatSoundManager.onOutgoingMessage('CUSTOM_AUDIO_PATH');
+```
diff --git a/ui-kit/angular/v5/troubleshooting.mdx b/ui-kit/angular/troubleshooting.mdx
similarity index 99%
rename from ui-kit/angular/v5/troubleshooting.mdx
rename to ui-kit/angular/troubleshooting.mdx
index 97d8ccb51..656c1abdd 100644
--- a/ui-kit/angular/v5/troubleshooting.mdx
+++ b/ui-kit/angular/troubleshooting.mdx
@@ -18,13 +18,13 @@ description: "Common failure modes and fixes for the CometChat Angular UIKit."
| Symptom | Cause | Fix |
| --- | --- | --- |
| `CometChatUIKit.init()` fails silently | Invalid App ID, Region, or Auth Key | Double-check credentials from the CometChat Dashboard |
-| Component doesn't render | `init()` not called or not awaited before rendering | Ensure `init()` completes before mounting components. See [Methods](/ui-kit/angular/v5/methods) |
+| Component doesn't render | `init()` not called or not awaited before rendering | Ensure `init()` completes before mounting components. See [Methods](/ui-kit/angular/methods) |
| Component renders but shows no data | User not logged in | Call `CometChatUIKit.login()` after init |
| Login fails with "UID not found" | UID doesn't exist in your CometChat app | Create the user via Dashboard, SDK, or API first |
| Blank screen after login | Component mounted before init/login completes | Use state to conditionally render after login resolves |
| `getLoggedinUser()` returns null | User not logged in or session expired | Call `login()` or `loginWithAuthToken()` first |
| `sendTextMessage()` fails | User not logged in or invalid receiver | Ensure login completes before sending messages |
-| Auth Key exposed in production | Using Auth Key instead of Auth Token | Switch to [Auth Token](/ui-kit/angular/v5/methods#login-using-auth-token) for production |
+| Auth Key exposed in production | Using Auth Key instead of Auth Token | Switch to [Auth Token](/ui-kit/angular/methods#login-using-auth-token) for production |
---
@@ -55,7 +55,7 @@ description: "Common failure modes and fixes for the CometChat Angular UIKit."
| Symptom | Cause | Fix |
| --- | --- | --- |
-| Call buttons not appearing in Message Header | `@cometchat/calls-sdk-javascript` not installed | Run `npm install @cometchat/calls-sdk-javascript@5.0.0-beta.1` — UIKit auto-detects it |
+| Call buttons not appearing in Message Header | `@cometchat/calls-sdk-javascript` not installed | Run `npm install @cometchat/calls-sdk-javascript` — UIKit auto-detects it |
| Incoming call screen not showing | `cometchat-incoming-call` not in the component tree | Render the component at the app root level so it can listen for incoming calls |
---
@@ -85,7 +85,7 @@ description: "Common failure modes and fixes for the CometChat Angular UIKit."
| Symptom | Cause | Fix |
| --- | --- | --- |
-| UI text not translated | Language code not matching supported codes | Check the supported languages table in [Localization](/ui-kit/angular/v5/customization/localization) |
+| UI text not translated | Language code not matching supported codes | Check the supported languages table in [Localization](/ui-kit/angular/customization/localization) |
| Custom translations not appearing | `addTranslation` called before `init` | Call init first, then add translations |
| Date/time format unchanged | Localization config not applied | Check the localization documentation for date format configuration |
@@ -105,7 +105,7 @@ description: "Common failure modes and fixes for the CometChat Angular UIKit."
| Symptom | Cause | Fix |
| --- | --- | --- |
-| Event listener not firing | Subscribed to wrong event name | Check the [Events](/ui-kit/angular/v5/events) page for exact event names |
+| Event listener not firing | Subscribed to wrong event name | Check the [Events](/ui-kit/angular/events) page for exact event names |
| Duplicate event triggers | Multiple subscriptions without cleanup | Unsubscribe in `ngOnDestroy` |
| Event fires but UI doesn't update | State not updated in event handler | Ensure you update component state in the handler |
diff --git a/ui-kit/angular/action-sheet.mdx b/ui-kit/angular/v4/action-sheet.mdx
similarity index 100%
rename from ui-kit/angular/action-sheet.mdx
rename to ui-kit/angular/v4/action-sheet.mdx
diff --git a/ui-kit/angular/v4/ai-features.mdx b/ui-kit/angular/v4/ai-features.mdx
new file mode 100644
index 000000000..ed1f2838b
--- /dev/null
+++ b/ui-kit/angular/v4/ai-features.mdx
@@ -0,0 +1,60 @@
+---
+title: "AI"
+description: "AI — CometChat documentation."
+---
+
+## Overview
+
+CometChat's AI capabilities greatly enhance user interaction and engagement in your application. Let's understand how the Angular UI Kit achieves these features.
+
+
+
+
+
+## Conversation Starters
+
+When a user initiates a new chat, the UI kit displays a list of suggested opening lines that users can select, making it easier for them to start a conversation. These suggestions are powered by CometChat's AI, which predicts contextually relevant conversation starters.
+
+For a comprehensive understanding and guide on implementing and using the Conversation Starters, refer to our specific guide on the [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter).
+
+Once you have successfully activated the [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter) from your CometChat Dashboard, the feature will automatically be incorporated into the [MessageList](/ui-kit/angular/message-list) Component of UI Kits.
+
+
+
+
+
+## Smart Replies
+
+Smart Replies are AI-generated responses to messages. They can predict what a user might want to say next by analyzing the context of the conversation. This allows for quicker and more convenient responses, especially on mobile devices.
+
+For a comprehensive understanding and guide on implementing and using the Smart Replies, refer to our specific guide on the [Smart Replies](/fundamentals/ai-user-copilot/smart-replies).
+
+Once you have successfully activated the [Smart Replies](/fundamentals/ai-user-copilot/smart-replies) from your CometChat Dashboard, the feature will automatically be incorporated into the Action sheet of [MessageComposer](/ui-kit/angular/message-composer) Component of UI Kits.
+
+
+
+
+
+## Conversation Summary
+
+The Conversation Summary feature provides concise summaries of long conversations, allowing users to catch up quickly on missed chats. This feature uses natural language processing to determine the main points in a conversation.
+
+For a comprehensive understanding and guide on implementing and using the Conversation Summary, refer to our specific guide on the [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary).
+
+Once you have successfully activated the [Smart Replies](/fundamentals/ai-user-copilot/smart-replies) from your CometChat Dashboard, the feature will automatically be incorporated into the Action sheet of [MessageComposer](/ui-kit/angular/message-composer) Component of UI Kits.
+
+
+
+
+
+## AI Assist Bot
+
+AI Assist Bots automate responses and prompt interaction in the chat. They can handle common queries, assist with tasks, and provide information, freeing up human resources for more complex issues.
+
+For a comprehensive understanding and guide on implementing and using the AI Assist Bot, refer to our specific guide on the [AI Assist Bot](http://localhost:3000/docs-beta/ai/bots).
+
+Once you have successfully activated the [AI Assist Bot](http://localhost:3000/docs-beta/ai/bots) from your CometChat Dashboard, the feature will automatically be incorporated into the Action sheet of [MessageComposer](/ui-kit/angular/message-composer) Component of UI Kits.
+
+
+
+
diff --git a/ui-kit/angular/audio-bubble.mdx b/ui-kit/angular/v4/audio-bubble.mdx
similarity index 100%
rename from ui-kit/angular/audio-bubble.mdx
rename to ui-kit/angular/v4/audio-bubble.mdx
diff --git a/ui-kit/angular/avatar.mdx b/ui-kit/angular/v4/avatar.mdx
similarity index 100%
rename from ui-kit/angular/avatar.mdx
rename to ui-kit/angular/v4/avatar.mdx
diff --git a/ui-kit/angular/backdrop.mdx b/ui-kit/angular/v4/backdrop.mdx
similarity index 100%
rename from ui-kit/angular/backdrop.mdx
rename to ui-kit/angular/v4/backdrop.mdx
diff --git a/ui-kit/angular/badge.mdx b/ui-kit/angular/v4/badge.mdx
similarity index 100%
rename from ui-kit/angular/badge.mdx
rename to ui-kit/angular/v4/badge.mdx
diff --git a/ui-kit/angular/button-group.mdx b/ui-kit/angular/v4/button-group.mdx
similarity index 100%
rename from ui-kit/angular/button-group.mdx
rename to ui-kit/angular/v4/button-group.mdx
diff --git a/ui-kit/angular/call-buttons.mdx b/ui-kit/angular/v4/call-buttons.mdx
similarity index 100%
rename from ui-kit/angular/call-buttons.mdx
rename to ui-kit/angular/v4/call-buttons.mdx
diff --git a/ui-kit/angular/v4/call-features.mdx b/ui-kit/angular/v4/call-features.mdx
new file mode 100644
index 000000000..4c2cfe4e5
--- /dev/null
+++ b/ui-kit/angular/v4/call-features.mdx
@@ -0,0 +1,66 @@
+---
+title: "Call"
+description: "Call — CometChat documentation."
+---
+
+## Overview
+
+CometChat's Calls feature is an advanced functionality that allows you to seamlessly integrate one-on-one as well as group audio and video calling capabilities into your application. This document provides a technical overview of these features, as implemented in the Angular UI Kit.
+
+## Integration
+
+First, make sure that you've correctly integrated the UI Kit library into your project. If you haven't done this yet or are facing difficulties, refer to our [Getting Started](/ui-kit/angular/getting-started) guide. This guide will walk you through a step-by-step process of integrating our UI Kit into your Angular project.
+
+Once you've successfully integrated the UI Kit, the next step is to add the CometChat Calls SDK to your project. This is necessary to enable the calling features in the UI Kit. Here's how you do it:
+
+Add the SDK files to your project's dependencies or libraries:
+
+```java
+npm install @cometchat/calls-sdk-javascript
+```
+
+After adding this dependency, the Angular UI Kit will automatically detect it and activate the calling features. Now, your application supports both audio and video calling. You will see [CallButtons](/ui-kit/angular/call-buttons) component rendered in [MessageHeader](/ui-kit/angular/message-header) Component.
+
+
+
+
+
+## Features
+
+### Incoming Call
+
+The [Incoming Call](/ui-kit/angular/incoming-call) component of the CometChat UI Kit provides the functionality that lets users receive real-time audio and video calls in the app.
+
+When a call is made to a user, the Incoming Call component triggers and displays a call screen. This call screen typically displays the caller information and provides the user with options to either accept or reject the incoming call.
+
+
+
+
+
+### Outgoing Call
+
+The [Outgoing Call](/ui-kit/angular/outgoing-call) component of the CometChat UI Kit is designed to manage the outgoing call process within your application. When a user initiates an audio or video call to another user or group, this component displays an outgoing call screen, showcasing information about the recipient and the call status.
+
+Importantly, the Outgoing Call component is smartly designed to transition automatically into the ongoing call screen once the receiver accepts the call. This ensures a smooth flow from initiating the call to engaging in a conversation, without any additional steps required from the user.
+
+
+
+
+
+### Ongoing Call
+
+The [OngoingCall](/ui-kit/angular/ongoing-call) component is the user interface that displays during an ongoing call. For an audio call, this screen displays the participant's name, call duration, and buttons to mute the audio, enable or disable video, switch the camera, and end the call.
+
+For a video call, the Call Screen might additionally display the video footage from both the user's camera and the recipient's camera.
+
+
+
+
+
+### Call Logs
+
+[Call Logs](/ui-kit/angular/call-logs) component provides you with the records call events such as who called who, the time of the call, and the duration of the call. This information can be fetched from the CometChat server and displayed in a structured format for users to view their past call activities.
+
+
+
+
diff --git a/ui-kit/angular/call-log-details.mdx b/ui-kit/angular/v4/call-log-details.mdx
similarity index 100%
rename from ui-kit/angular/call-log-details.mdx
rename to ui-kit/angular/v4/call-log-details.mdx
diff --git a/ui-kit/angular/call-log-history.mdx b/ui-kit/angular/v4/call-log-history.mdx
similarity index 100%
rename from ui-kit/angular/call-log-history.mdx
rename to ui-kit/angular/v4/call-log-history.mdx
diff --git a/ui-kit/angular/call-log-participants.mdx b/ui-kit/angular/v4/call-log-participants.mdx
similarity index 100%
rename from ui-kit/angular/call-log-participants.mdx
rename to ui-kit/angular/v4/call-log-participants.mdx
diff --git a/ui-kit/angular/call-log-recording.mdx b/ui-kit/angular/v4/call-log-recording.mdx
similarity index 100%
rename from ui-kit/angular/call-log-recording.mdx
rename to ui-kit/angular/v4/call-log-recording.mdx
diff --git a/ui-kit/angular/call-log-with-details.mdx b/ui-kit/angular/v4/call-log-with-details.mdx
similarity index 100%
rename from ui-kit/angular/call-log-with-details.mdx
rename to ui-kit/angular/v4/call-log-with-details.mdx
diff --git a/ui-kit/angular/call-logs.mdx b/ui-kit/angular/v4/call-logs.mdx
similarity index 100%
rename from ui-kit/angular/call-logs.mdx
rename to ui-kit/angular/v4/call-logs.mdx
diff --git a/ui-kit/angular/call-overview.mdx b/ui-kit/angular/v4/call-overview.mdx
similarity index 100%
rename from ui-kit/angular/call-overview.mdx
rename to ui-kit/angular/v4/call-overview.mdx
diff --git a/ui-kit/angular/checkbox.mdx b/ui-kit/angular/v4/checkbox.mdx
similarity index 100%
rename from ui-kit/angular/checkbox.mdx
rename to ui-kit/angular/v4/checkbox.mdx
diff --git a/ui-kit/angular/cometchat-quick-view.mdx b/ui-kit/angular/v4/cometchat-quick-view.mdx
similarity index 100%
rename from ui-kit/angular/cometchat-quick-view.mdx
rename to ui-kit/angular/v4/cometchat-quick-view.mdx
diff --git a/ui-kit/angular/components-overview.mdx b/ui-kit/angular/v4/components-overview.mdx
similarity index 100%
rename from ui-kit/angular/components-overview.mdx
rename to ui-kit/angular/v4/components-overview.mdx
diff --git a/ui-kit/angular/confirm-dialog.mdx b/ui-kit/angular/v4/confirm-dialog.mdx
similarity index 100%
rename from ui-kit/angular/confirm-dialog.mdx
rename to ui-kit/angular/v4/confirm-dialog.mdx
diff --git a/ui-kit/angular/contacts.mdx b/ui-kit/angular/v4/contacts.mdx
similarity index 100%
rename from ui-kit/angular/contacts.mdx
rename to ui-kit/angular/v4/contacts.mdx
diff --git a/ui-kit/angular/conversations-with-messages.mdx b/ui-kit/angular/v4/conversations-with-messages.mdx
similarity index 100%
rename from ui-kit/angular/conversations-with-messages.mdx
rename to ui-kit/angular/v4/conversations-with-messages.mdx
diff --git a/ui-kit/angular/conversations.mdx b/ui-kit/angular/v4/conversations.mdx
similarity index 100%
rename from ui-kit/angular/conversations.mdx
rename to ui-kit/angular/v4/conversations.mdx
diff --git a/ui-kit/angular/v4/core-features.mdx b/ui-kit/angular/v4/core-features.mdx
new file mode 100644
index 000000000..88aa7691e
--- /dev/null
+++ b/ui-kit/angular/v4/core-features.mdx
@@ -0,0 +1,131 @@
+---
+title: "Core"
+description: "Core — CometChat documentation."
+---
+
+## Overview
+
+The UI Kit comprises a variety of components, each designed to work seamlessly with one another to deliver a comprehensive and intuitive chat experience.
+
+Here's how different UI Kit components work together to achieve CometChat's Core features:
+
+## Instant Messaging
+
+At the heart of CometChat's functionality is the ability to support real-time text messaging. Users can send and receive instant messages, fostering quick and efficient communication.
+
+
+
+
+
+| Components | Functionality |
+| -------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [MessageComposer](/ui-kit/angular/message-composer) | [MessageComposer](/ui-kit/angular/message-composer) is a Component that enables users to write and send a variety of messages. |
+| [MessageList](/ui-kit/angular/message-list) | [MessageList](/ui-kit/angular/message-list) is a Component that renders a list of messages sent and messages received using [TextBubble](/ui-kit/angular/text-bubble). |
+| [Messages](/ui-kit/angular/messages) | [Messages](/ui-kit/angular/messages) component in CometChat's UI Kit is a comprehensive component that includes both the [MessageComposer](/ui-kit/angular/message-composer) and the [MessageList](/ui-kit/angular/message-list) components. So, if you're looking to implement a messaging feature in your application, using the Messages component would be a straightforward and efficient way to do it. |
+
+## Media Sharing
+
+Beyond text, CometChat allows users to share various media types within their conversations. This includes images, videos, audio files, and documents, enriching the chat experience and enabling more comprehensive communication.
+
+
+
+
+
+| Components | Functionality |
+| -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| [MessageComposer](/ui-kit/angular/message-composer) | the [MessageComposer](/ui-kit/angular/message-composer) component includes an ActionSheet. This ActionSheet serves as a menu appearing over the app's context, offering various options for sharing media files. |
+| [MessageList](/ui-kit/angular/message-list) | the [MessageList](/ui-kit/angular/message-list) component is responsible for rendering various Media Message bubbles, such as [Image Bubble](/ui-kit/angular/image-bubble), [File Bubble](/ui-kit/angular/file-bubble), [Audio Bubble](/ui-kit/angular/audio-bubble) [Video Bubble](/ui-kit/angular/video-bubble) |
+
+> In CometChat's UI Kit, the [Messages](/ui-kit/angular/messages) component combines both the [MessageComposer](/ui-kit/angular/message-composer) and the [MessageList](/ui-kit/angular/message-list) components. If you want to add messaging features to your app, using the Messages component is a simple and effective approach.
+
+## Read Receipts
+
+CometChat's Read Receipts feature provides visibility into the message status, letting users know when a message has been delivered and read. This brings clarity to the communication and ensures users are informed about the status of their messages.
+
+
+
+
+
+| Components | Functionality |
+| -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Conversations](/ui-kit/angular/conversations) | [Conversations](/ui-kit/angular/conversations) is a Component that renders Conversations item List, Conversation item also displays the delivery status of the last message providing users with real-time updates on the status of their messages. |
+| [MessageList](/ui-kit/angular/message-list) | [MessageList](/ui-kit/angular/message-list) is a Component that renders different types of Message bubbles, Read Recept status is an integral part of all message bubbles, no matter the type, and provides real-time updates about the status of the message. |
+| [MessageInformation](/ui-kit/angular/message-information) | [MessageInformation](/ui-kit/angular/message-information) component provides transparency into the status of each sent message, giving the sender insights into whether their message has been delivered and read. |
+
+## Typing Indicator
+
+The Typing Indicator feature in CometChat shows when a user is typing a response in real-time, fostering a more interactive and engaging chat environment. This feature enhances the real-time communication experience, making conversations feel more natural and fluid.
+
+
+
+
+
+| Components | Functionality |
+| ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Conversations](/ui-kit/angular/conversations) | [Conversations](/ui-kit/angular/conversations) is a Component that renders Conversations item List, Conversations item also shows real-time typing status indicators. This means that if a user in a one-on-one chat or a participant in a group chat is currently typing a message |
+| [Message Header](/ui-kit/angular/message-header) | [Message Header](/ui-kit/angular/message-header) that renders details of User or Groups in ToolBar. The MessageHeader also handles the Typing Indicator functionality. When a user or a member in a group is typing, the MessageHeader dynamically updates to display a 'typing...' status in real-time. |
+
+## User Presence
+
+CometChat's User Presence feature allows users to see whether their contacts are online, offline. This helps users know the best time to initiate a conversation and sets expectations about response times.
+
+
+
+
+
+| Components | Functionality |
+| ----------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Conversations](/ui-kit/angular/conversations) | [Conversations](/ui-kit/angular/conversations) is a Component that renders Conversations item List, Conversations item also shows user presence information. |
+| [Message Header](/ui-kit/angular/message-header) | [Message Header](/ui-kit/angular/message-header) that renders details of User or Groups in ToolBar. The MessageHeader also handles user Presence information. |
+| [Users](/ui-kit/angular/users) | [Users](/ui-kit/angular/users) renders list of users available in your app.It also responsible to render users Presence information. |
+| [Group Members](/ui-kit/angular/group-members) | [Group Members](/ui-kit/angular/group-members) renders list of users available in the group. The Group Members component also handles user Presence information. |
+
+## Reactions
+
+CometChat's Reactions feature adds a layer of expressiveness to your chat application by allowing users to angular to messages. With Reactions, users can convey a range of emotions or express their thoughts on a particular message without typing out a full response, enhancing their user experience and fostering greater engagement.
+
+
+
+
+
+| Components | Functionality |
+| ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [MessageList](/ui-kit/angular/message-list) | [MessageList](/ui-kit/angular/message-list) is a Component that renders different types of Message bubbles, Irrespective of the type of message bubble, Reactions are an integral part and offer a more engaging, expressive way for users to respond to messages. |
+| [Messages](/ui-kit/angular/messages) | [Messages](/ui-kit/angular/messages)component in CometChat's UI Kit is a comprehensive component that includes both the [MessageComposer](/ui-kit/angular/message-composer) and the [MessageList](/ui-kit/angular/message-list) components. So, if you're looking to implement a messaging feature in your application, using the Messages component would be a straightforward and efficient way to do it. |
+
+## Mentions
+
+Mentions is a robust feature provided by CometChat that enhances the interactivity and clarity of group or 1-1 chats by allowing users to directly address or refer to specific individuals in a conversation.
+
+
+
+
+
+| Components | Functionality |
+| -------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Conversations](/ui-kit/angular/conversations) | [Conversations](/ui-kit/angular/conversations) component provides an enhanced user experience by integrating the Mentions feature. This means that from the conversation list itself, users can see where they or someone else have been specifically mentioned. |
+| [MessageComposer](/ui-kit/angular/message-composer) | [MessageComposer](/ui-kit/angular/message-composer) is a component that allows users to craft and send various types of messages, including the usage of the Mentions feature for direct addressing within the conversation. |
+| [MessageList](/ui-kit/angular/message-list) | [MessageList](/ui-kit/angular/message-list) is a component that displays a list of sent and received messages. It also supports the rendering of Mentions, enhancing the readability and interactivity of conversations. |
+| [Messages](/ui-kit/angular/messages) | [Messages](/ui-kit/angular/messages) The component is a comprehensive element in CometChat's UI Kit, encapsulating both the [MessageComposer](/ui-kit/angular/message-composer) and [MessageList](/ui-kit/angular/message-list) components. It fully supports the Mentions feature, providing a streamlined way to implement an interactive and engaging messaging function in your application. |
+
+## Threaded Conversations
+
+The Threaded Conversations feature enables users to respond directly to a specific message in a chat. This keeps conversations organized and enhances the user experience by maintaining context, especially in group chats.
+
+
+
+
+
+| Components | Functionality |
+| ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| [Threaded Messages](/ui-kit/angular/threaded-messages) | [Threaded Messages](/ui-kit/angular/threaded-messages) that displays all replies made to a particular message in a conversation. |
+
+## Group Chat
+
+CometChat facilitates Group Chats, allowing users to have conversations with multiple participants simultaneously. This feature is crucial for team collaborations, group discussions, social communities, and more.
+
+
+
+
+
+For a comprehensive understanding and guide on implementing and using the Groups feature in CometChat, you should refer to our detailed guide on [Groups](/ui-kit/angular/groups).
diff --git a/ui-kit/angular/create-group.mdx b/ui-kit/angular/v4/create-group.mdx
similarity index 100%
rename from ui-kit/angular/create-group.mdx
rename to ui-kit/angular/v4/create-group.mdx
diff --git a/ui-kit/angular/custom-message-guide.mdx b/ui-kit/angular/v4/custom-message-guide.mdx
similarity index 100%
rename from ui-kit/angular/custom-message-guide.mdx
rename to ui-kit/angular/v4/custom-message-guide.mdx
diff --git a/ui-kit/angular/custom-text-formatter-guide.mdx b/ui-kit/angular/v4/custom-text-formatter-guide.mdx
similarity index 100%
rename from ui-kit/angular/custom-text-formatter-guide.mdx
rename to ui-kit/angular/v4/custom-text-formatter-guide.mdx
diff --git a/ui-kit/angular/date.mdx b/ui-kit/angular/v4/date.mdx
similarity index 100%
rename from ui-kit/angular/date.mdx
rename to ui-kit/angular/v4/date.mdx
diff --git a/ui-kit/angular/document-bubble.mdx b/ui-kit/angular/v4/document-bubble.mdx
similarity index 100%
rename from ui-kit/angular/document-bubble.mdx
rename to ui-kit/angular/v4/document-bubble.mdx
diff --git a/ui-kit/angular/dropdown.mdx b/ui-kit/angular/v4/dropdown.mdx
similarity index 100%
rename from ui-kit/angular/dropdown.mdx
rename to ui-kit/angular/v4/dropdown.mdx
diff --git a/ui-kit/angular/emoji-keyboard.mdx b/ui-kit/angular/v4/emoji-keyboard.mdx
similarity index 100%
rename from ui-kit/angular/emoji-keyboard.mdx
rename to ui-kit/angular/v4/emoji-keyboard.mdx
diff --git a/ui-kit/angular/v4/events.mdx b/ui-kit/angular/v4/events.mdx
new file mode 100644
index 000000000..636e6ac86
--- /dev/null
+++ b/ui-kit/angular/v4/events.mdx
@@ -0,0 +1,100 @@
+---
+title: "Events"
+description: "Events — CometChat documentation."
+---
+
+## Overview
+
+Events allow for a decoupled, flexible architecture where different parts of the application can interact without having to directly reference each other. This makes it easier to create complex, interactive experiences, as well as to extend and customize the functionality provided by the CometChat UI Kit.
+
+Both Components and Composite Components have the ability to emit events. These events are dispatched in response to certain changes or user interactions within the component. By emitting events, these components allow other parts of the application to react to changes or interactions, thus enabling dynamic and interactive behavior within the application.
+
+### CometChatConversationEvents
+
+`CometChatConversationEvents` emits events when the logged-in user executes some action on a conversation object.
+
+| Name | Description |
+| --------------------- | -------------------------------------------------------------------------- |
+| ccConversationDeleted | This event is triggered when the user successfully deletes a conversation. |
+
+### CometChatUserEvents
+
+`CometChatUserEvents` emits events when the logged-in user executes some action on an user object.
+
+It consists of the following events:
+
+| Name | Description |
+| --------------- | ------------------------------------------------------------------------- |
+| ccUserBlocked | This event is triggered when the user successfully blocks another user. |
+| ccUserUnblocked | This event is triggered when the user successfully unblocks another user. |
+
+### CometChatGroupEvents
+
+`CometChatGroupEvents` emits events when the logged-in user executes some action on a group object.
+
+It consists of the following events:
+
+| Name | Description |
+| ------------------------- | ------------------------------------------------------------------------------------ |
+| ccGroupCreated | This event is triggered when the user creates a group successfully |
+| ccGroupDeleted | This event is triggered when the group member deletes the group successfully |
+| ccGroupLeft | This event is triggered when the group member leaves the group successfully |
+| ccGroupMemberScopeChanged | This event is triggered when the group member's scope is updated successfully |
+| ccGroupMemberKicked | This event is triggered when the group member is kicked |
+| ccGroupMemberBanned | This event is triggered when the group member is banned |
+| ccGroupMemberUnbanned | This event is triggered when the group member is un-banned |
+| ccGroupMemberJoined | This event is triggered when a user joins the group |
+| ccGroupMemberAdded | This event is triggered when a user is added to the group |
+| ccOwnershipChanged | This event is triggered when the group ownership is assigned to another group member |
+
+### CometChatMessageEvents
+
+`CometChatMessageEvents` emits events when the logged-in user executes some action on a message object.
+
+It consists of the following events:
+
+| Name | Description |
+| ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
+| ccMessageSent | This event is triggered when the sent message is in transit and also when it is received by the receiver. |
+| ccMessageEdited | This event is triggered when the user successfully edits the message. |
+| ccMessageDeleted | This event is triggered when the user successfully deletes the message. |
+| ccMessageRead | This event is triggered when the sent message is read by the receiver. |
+| ccLiveReaction | This event is triggered when the user sends a live reaction. |
+| onTextMessageReceived | This event is emitted when the CometChat SDK listener emits a text message. |
+| onMediaMessageReceived | This event is emitted when the CometChat SDK listener emits a media message. |
+| onCustomMessageReceived | This event is emitted when the CometChat SDK listener emits a custom message. |
+| onTypingStarted | This event is emitted when the CometChat SDK listener indicates that a user has started typing. |
+| onTypingEnded | This event is emitted when the CometChat SDK listener indicates that a user has stopped typing. |
+| onMessagesDelivered | This event is emitted when the CometChat SDK listener indicates that messages have been delivered. |
+| onMessagesRead | This event is emitted when the CometChat SDK listener indicates that messages have been read. |
+| onMessageEdited | This event is emitted when the CometChat SDK listener indicates that a message has been edited. |
+| onMessageDeleted | This event is emitted when the CometChat SDK listener indicates that a message has been deleted. |
+| onTransientMessageReceived | This event is emitted when the CometChat SDK listener emits a transient message. |
+| onInteractionGoalCompleted | This event is emitted when the CometChat SDK listener indicates that an interaction goal has been completed. |
+| onFormMessageReceived | This event is emitted when an interactive message of 'form' type is received from the CometChat SDK listener. |
+| onCardMessageReceived | This event is emitted when an interactive message of 'card' type is received from the CometChat SDK listener. |
+| onSchedulerMessageReceived | This event is emitted when an interactive message of 'scheduler' type is received from the CometChat SDK listener. |
+| onCustomInteractiveMessageReceived | This event is emitted when an interactive message of 'customInteractive' type is received from the CometChat SDK listener. |
+
+### CometChatCallEvents
+
+`CometChatCallEvents` emits events when the logged-in user executes some action on a call object.
+
+It consists of the following events:
+
+| Name | Description |
+| -------------- | ---------------------------------------------------------------------------- |
+| ccOutgoingCall | This event is triggered when the user initiates a voice/video call. |
+| ccCallAccepted | This event is triggered when the initiated call is accepted by the receiver. |
+| ccCallRejected | This event is triggered when the initiated call is rejected by the receiver. |
+| ccCallEnded | This event is triggered when the initiated call successfully ends. |
+
+### UI events
+
+UI events, refer to actions or interactions performed by a user within the CometChat's UI Kit. These events are triggered when a user interacts with various UI elements, such as buttons, menus, checkboxes, input fields, or any other interactive components.
+
+It consists of the following events:
+
+| Name | Description |
+| ------------------- | ---------------------------------------------------------------------------- |
+| ccActiveChatChanged | This event is triggered when the user navigates to a particular chat window. |
diff --git a/ui-kit/angular/v4/extensions.mdx b/ui-kit/angular/v4/extensions.mdx
new file mode 100644
index 000000000..e7cd18089
--- /dev/null
+++ b/ui-kit/angular/v4/extensions.mdx
@@ -0,0 +1,132 @@
+---
+title: "Extensions"
+description: "Extensions — CometChat documentation."
+---
+
+## Overview
+
+CometChat's UI Kit offers built-in support for various extensions, enriching the chatting experience with enhanced functionality. These extensions augment your chat application, making it more interactive, secure, and efficient.
+
+Activating extensions within CometChat is a straightforward process through your application's dashboard. For detailed instructions, refer to our guide on [Extensions](/fundamentals/extensions-overview).
+
+Once you've enabled your desired extension in the dashboard, it seamlessly integrates into your CometChat application upon initialization and successful login. It's important to note that extension features will only be available if they are supported by the CometChat UI Kit.
+
+CometChat's UI Kit provides native support for 12 powerful extensions. This effortless integration enables you to enhance your chat application with engaging features without any additional coding. Simply enable the desired extensions from the CometChat Dashboard, and they will automatically enhance the relevant components of your application, providing a richer and more engaging experience for your users.
+
+## Built-in Extensions
+
+Here's a guide on how you can enable and integrate these extensions:
+
+### Stickers
+
+The Stickers extension allows users to express their emotions more creatively. It adds a much-needed fun element to the chat by allowing users to send various pre-designed stickers. For a comprehensive understanding and guide on implementing and using the Sticker Extension, refer to our specific guide on the [Sticker Extension](/fundamentals/stickers).
+
+Once you have successfully activated the [Sticker Extension](/fundamentals/stickers) from your CometChat Dashboard, the feature will automatically be incorporated into the [Message Composer](/ui-kit/angular/message-composer) component of UI Kits.
+
+
+
+
+
+### Polls
+
+The Polls extension enhances group discussions by allowing users to create polls. Users can ask questions with a predefined list of answers, enabling a quick, organized way to gather group opinions. For a comprehensive understanding and guide on implementing and using the Polls Extension, refer to our specific guide on the [Polls Extension](/fundamentals/polls).
+
+Once you have successfully activated the [Polls Extension](/fundamentals/polls) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/angular/message-composer) component of UI Kits.
+
+
+
+
+
+### Collaborative Whiteboard
+
+The Collaborative Whiteboard extension facilitates real-time collaboration. Users can draw, brainstorm, and share ideas on a shared digital whiteboard. For a comprehensive understanding and guide on implementing and using the Collaborative Whiteboard Extension, refer to our specific guide on the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard).
+
+Once you have successfully activated the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/angular/message-composer) component of UI Kits.
+
+
+
+
+
+### Collaborative Document
+
+With the Collaborative Document extension, users can work together on a shared document. This feature is essential for remote teams where document collaboration is a recurring requirement. For a comprehensive understanding and guide on implementing and using the Collaborative Document Extension, refer to our specific guide on the [Collaborative Document Extension](/fundamentals/collaborative-document).
+
+Once you have successfully activated the [Collaborative Document Extension](/fundamentals/collaborative-document) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/angular/message-composer) component of UI Kits.
+
+
+
+
+
+### Message Reactions
+
+Message Reactions extension lets users express their emotions towards a message by choosing from a range of emojis. It provides a quick way to respond to any shared message. For a comprehensive understanding and guide on implementing and using the Message Reactions Extension, refer to our specific guide on the [Message Reactions Extension](/fundamentals/reactions).
+
+Once you have successfully activated the [Message Reactions Extension](/fundamentals/reactions) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of [MessageList Component](/ui-kit/angular/message-list) component of UI Kits.
+
+
+
+
+
+### Message Translation
+
+The Message Translation extension in CometChat is designed to translate any message into your local locale. It eliminates language barriers, making the chat more inclusive. For a comprehensive understanding and guide on implementing and using the Message Translation Extension, refer to our specific guide on the [Message Translation Extension](/fundamentals/message-translation).
+
+Once you have successfully activated the [Message Translation Extension](/fundamentals/message-translation) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of [MessageList Component](/ui-kit/angular/message-list) component of UI Kits.
+
+
+
+
+
+### Link Preview
+
+The Link Preview extension provides a summary of the URL shared in the chat. It includes the title, a description, and a thumbnail image from the web page. For a comprehensive understanding and guide on implementing and using the Link Preview Extension, refer to our specific guide on the [Link Preview Extension](/fundamentals/link-preview).
+
+Once you have successfully activated the [Link Preview Extension](/fundamentals/link-preview) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/angular/message-list) component of UI Kits.
+
+
+
+
+
+### Profanity Filter
+
+The Profanity Filter extension helps in maintaining the chat decorum by censoring obscene and inappropriate words in the messages. For a comprehensive understanding and guide on implementing and using the Profanity Filter Extension, refer to our specific guide on the [Legacy Extensions](/moderation/legacy-extensions).
+
+Once you have successfully activated the Profanity Filter Extension from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/angular/message-list) component of UI Kits.
+
+
+
+
+
+### Data Masking
+
+The Data Masking extension helps secure sensitive data by masking information like credit card numbers and phone numbers in a chat message. For a comprehensive understanding and guide on implementing and using the Data Masking Extension, refer to our specific guide on the [Legacy Extensions](/moderation/legacy-extensions).
+
+Once you have successfully activated the Data Masking Extension from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/angular/message-list) component of UI Kits.
+
+
+
+
+
+### Image Moderation
+
+The Image Moderation extension uses machine learning to detect and filter out inappropriate or explicit images shared in the chat. For a comprehensive understanding and guide on implementing and using the Image Moderation Extension, refer to our specific guide on the [Legacy Extensions](/moderation/legacy-extensions).
+
+Once you have successfully activated the Image Moderation Extension from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/angular/message-list) component of UI Kits.
+
+
+
+
+
+### Thumbnail Generation
+
+The Thumbnail Generation extension automatically creates a smaller preview image whenever a larger image is shared, helping to reduce the upload/download time and bandwidth usage. For a comprehensive understanding and guide on implementing and using the Thumbnail Generation Extension, refer to our specific guide on the [Thumbnail Generation Extension](/fundamentals/thumbnail-generation).
+
+Once you have successfully activated the [Thumbnail Generation Extension](/fundamentals/thumbnail-generation) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/angular/message-list) component of UI Kits.
+
+
+
+
+
+### Smart Replies
+
+Smart Replies extension provides automated, predictive text responses, making the conversation more efficient by reducing the response time. For a comprehensive understanding and guide on implementing and using the Smart Replies Extension, refer to our specific guide on the [Smart Replies Extension](/fundamentals/smart-replies).
diff --git a/ui-kit/angular/file-bubble.mdx b/ui-kit/angular/v4/file-bubble.mdx
similarity index 100%
rename from ui-kit/angular/file-bubble.mdx
rename to ui-kit/angular/v4/file-bubble.mdx
diff --git a/ui-kit/angular/getting-started.mdx b/ui-kit/angular/v4/getting-started.mdx
similarity index 99%
rename from ui-kit/angular/getting-started.mdx
rename to ui-kit/angular/v4/getting-started.mdx
index 8b7212aaa..55e240908 100644
--- a/ui-kit/angular/getting-started.mdx
+++ b/ui-kit/angular/v4/getting-started.mdx
@@ -76,7 +76,7 @@ Before installing **UI Kit** for Angular, you need to create a CometChat applica
### Built With
* [Node](https://nodejs.org/)
-* [npm](https://www.npmjs.com/get-npm)
+* [npm](https://docs.npmjs.com/getting-started)
* [Angular CLI](https://angular.io/cli)
***
@@ -104,7 +104,7 @@ Step 2
This developer kit is an add-on feature to CometChat JavaScript SDK, so installing it will also install the core Chat SDK.
```java
-npm install @cometchat/chat-uikit-angular
+npm install @cometchat/chat-uikit-angular@legacy
```
diff --git a/ui-kit/angular/group-add-members.mdx b/ui-kit/angular/v4/group-add-members.mdx
similarity index 100%
rename from ui-kit/angular/group-add-members.mdx
rename to ui-kit/angular/v4/group-add-members.mdx
diff --git a/ui-kit/angular/group-banned-members.mdx b/ui-kit/angular/v4/group-banned-members.mdx
similarity index 100%
rename from ui-kit/angular/group-banned-members.mdx
rename to ui-kit/angular/v4/group-banned-members.mdx
diff --git a/ui-kit/angular/group-details.mdx b/ui-kit/angular/v4/group-details.mdx
similarity index 100%
rename from ui-kit/angular/group-details.mdx
rename to ui-kit/angular/v4/group-details.mdx
diff --git a/ui-kit/angular/group-members.mdx b/ui-kit/angular/v4/group-members.mdx
similarity index 100%
rename from ui-kit/angular/group-members.mdx
rename to ui-kit/angular/v4/group-members.mdx
diff --git a/ui-kit/angular/group-transfer-ownership.mdx b/ui-kit/angular/v4/group-transfer-ownership.mdx
similarity index 100%
rename from ui-kit/angular/group-transfer-ownership.mdx
rename to ui-kit/angular/v4/group-transfer-ownership.mdx
diff --git a/ui-kit/angular/groups-with-messages.mdx b/ui-kit/angular/v4/groups-with-messages.mdx
similarity index 100%
rename from ui-kit/angular/groups-with-messages.mdx
rename to ui-kit/angular/v4/groups-with-messages.mdx
diff --git a/ui-kit/angular/groups.mdx b/ui-kit/angular/v4/groups.mdx
similarity index 100%
rename from ui-kit/angular/groups.mdx
rename to ui-kit/angular/v4/groups.mdx
diff --git a/ui-kit/angular/icon-button.mdx b/ui-kit/angular/v4/icon-button.mdx
similarity index 100%
rename from ui-kit/angular/icon-button.mdx
rename to ui-kit/angular/v4/icon-button.mdx
diff --git a/ui-kit/angular/icon.mdx b/ui-kit/angular/v4/icon.mdx
similarity index 100%
rename from ui-kit/angular/icon.mdx
rename to ui-kit/angular/v4/icon.mdx
diff --git a/ui-kit/angular/image-bubble.mdx b/ui-kit/angular/v4/image-bubble.mdx
similarity index 100%
rename from ui-kit/angular/image-bubble.mdx
rename to ui-kit/angular/v4/image-bubble.mdx
diff --git a/ui-kit/angular/incoming-call.mdx b/ui-kit/angular/v4/incoming-call.mdx
similarity index 100%
rename from ui-kit/angular/incoming-call.mdx
rename to ui-kit/angular/v4/incoming-call.mdx
diff --git a/ui-kit/angular/input.mdx b/ui-kit/angular/v4/input.mdx
similarity index 100%
rename from ui-kit/angular/input.mdx
rename to ui-kit/angular/v4/input.mdx
diff --git a/ui-kit/angular/interactive-action-entity.mdx b/ui-kit/angular/v4/interactive-action-entity.mdx
similarity index 100%
rename from ui-kit/angular/interactive-action-entity.mdx
rename to ui-kit/angular/v4/interactive-action-entity.mdx
diff --git a/ui-kit/angular/interactive-button-element.mdx b/ui-kit/angular/v4/interactive-button-element.mdx
similarity index 100%
rename from ui-kit/angular/interactive-button-element.mdx
rename to ui-kit/angular/v4/interactive-button-element.mdx
diff --git a/ui-kit/angular/interactive-card-bubble.mdx b/ui-kit/angular/v4/interactive-card-bubble.mdx
similarity index 100%
rename from ui-kit/angular/interactive-card-bubble.mdx
rename to ui-kit/angular/v4/interactive-card-bubble.mdx
diff --git a/ui-kit/angular/interactive-card-message.mdx b/ui-kit/angular/v4/interactive-card-message.mdx
similarity index 100%
rename from ui-kit/angular/interactive-card-message.mdx
rename to ui-kit/angular/v4/interactive-card-message.mdx
diff --git a/ui-kit/angular/interactive-checkbox-element.mdx b/ui-kit/angular/v4/interactive-checkbox-element.mdx
similarity index 100%
rename from ui-kit/angular/interactive-checkbox-element.mdx
rename to ui-kit/angular/v4/interactive-checkbox-element.mdx
diff --git a/ui-kit/angular/interactive-custom-interactive-message.mdx b/ui-kit/angular/v4/interactive-custom-interactive-message.mdx
similarity index 100%
rename from ui-kit/angular/interactive-custom-interactive-message.mdx
rename to ui-kit/angular/v4/interactive-custom-interactive-message.mdx
diff --git a/ui-kit/angular/interactive-date-time-picker-element.mdx b/ui-kit/angular/v4/interactive-date-time-picker-element.mdx
similarity index 100%
rename from ui-kit/angular/interactive-date-time-picker-element.mdx
rename to ui-kit/angular/v4/interactive-date-time-picker-element.mdx
diff --git a/ui-kit/angular/interactive-dropdown-element.mdx b/ui-kit/angular/v4/interactive-dropdown-element.mdx
similarity index 100%
rename from ui-kit/angular/interactive-dropdown-element.mdx
rename to ui-kit/angular/v4/interactive-dropdown-element.mdx
diff --git a/ui-kit/angular/interactive-element-type.mdx b/ui-kit/angular/v4/interactive-element-type.mdx
similarity index 100%
rename from ui-kit/angular/interactive-element-type.mdx
rename to ui-kit/angular/v4/interactive-element-type.mdx
diff --git a/ui-kit/angular/interactive-form-bubble.mdx b/ui-kit/angular/v4/interactive-form-bubble.mdx
similarity index 100%
rename from ui-kit/angular/interactive-form-bubble.mdx
rename to ui-kit/angular/v4/interactive-form-bubble.mdx
diff --git a/ui-kit/angular/interactive-form-message.mdx b/ui-kit/angular/v4/interactive-form-message.mdx
similarity index 100%
rename from ui-kit/angular/interactive-form-message.mdx
rename to ui-kit/angular/v4/interactive-form-message.mdx
diff --git a/ui-kit/angular/interactive-label-element.mdx b/ui-kit/angular/v4/interactive-label-element.mdx
similarity index 100%
rename from ui-kit/angular/interactive-label-element.mdx
rename to ui-kit/angular/v4/interactive-label-element.mdx
diff --git a/ui-kit/angular/interactive-radio-button-element.mdx b/ui-kit/angular/v4/interactive-radio-button-element.mdx
similarity index 100%
rename from ui-kit/angular/interactive-radio-button-element.mdx
rename to ui-kit/angular/v4/interactive-radio-button-element.mdx
diff --git a/ui-kit/angular/interactive-scheduler-bubble.mdx b/ui-kit/angular/v4/interactive-scheduler-bubble.mdx
similarity index 100%
rename from ui-kit/angular/interactive-scheduler-bubble.mdx
rename to ui-kit/angular/v4/interactive-scheduler-bubble.mdx
diff --git a/ui-kit/angular/interactive-scheduler-message.mdx b/ui-kit/angular/v4/interactive-scheduler-message.mdx
similarity index 100%
rename from ui-kit/angular/interactive-scheduler-message.mdx
rename to ui-kit/angular/v4/interactive-scheduler-message.mdx
diff --git a/ui-kit/angular/interactive-single-select-element.mdx b/ui-kit/angular/v4/interactive-single-select-element.mdx
similarity index 100%
rename from ui-kit/angular/interactive-single-select-element.mdx
rename to ui-kit/angular/v4/interactive-single-select-element.mdx
diff --git a/ui-kit/angular/interactive-text-input-element.mdx b/ui-kit/angular/v4/interactive-text-input-element.mdx
similarity index 100%
rename from ui-kit/angular/interactive-text-input-element.mdx
rename to ui-kit/angular/v4/interactive-text-input-element.mdx
diff --git a/ui-kit/angular/join-protected-group.mdx b/ui-kit/angular/v4/join-protected-group.mdx
similarity index 100%
rename from ui-kit/angular/join-protected-group.mdx
rename to ui-kit/angular/v4/join-protected-group.mdx
diff --git a/ui-kit/angular/label.mdx b/ui-kit/angular/v4/label.mdx
similarity index 100%
rename from ui-kit/angular/label.mdx
rename to ui-kit/angular/v4/label.mdx
diff --git a/ui-kit/angular/link/changelog.mdx b/ui-kit/angular/v4/link/changelog.mdx
similarity index 100%
rename from ui-kit/angular/link/changelog.mdx
rename to ui-kit/angular/v4/link/changelog.mdx
diff --git a/ui-kit/angular/link/sample.mdx b/ui-kit/angular/v4/link/sample.mdx
similarity index 100%
rename from ui-kit/angular/link/sample.mdx
rename to ui-kit/angular/v4/link/sample.mdx
diff --git a/ui-kit/angular/list-item.mdx b/ui-kit/angular/v4/list-item.mdx
similarity index 100%
rename from ui-kit/angular/list-item.mdx
rename to ui-kit/angular/v4/list-item.mdx
diff --git a/ui-kit/angular/list.mdx b/ui-kit/angular/v4/list.mdx
similarity index 100%
rename from ui-kit/angular/list.mdx
rename to ui-kit/angular/v4/list.mdx
diff --git a/ui-kit/angular/loader.mdx b/ui-kit/angular/v4/loader.mdx
similarity index 100%
rename from ui-kit/angular/loader.mdx
rename to ui-kit/angular/v4/loader.mdx
diff --git a/ui-kit/angular/localize.mdx b/ui-kit/angular/v4/localize.mdx
similarity index 100%
rename from ui-kit/angular/localize.mdx
rename to ui-kit/angular/v4/localize.mdx
diff --git a/ui-kit/angular/media-recorder.mdx b/ui-kit/angular/v4/media-recorder.mdx
similarity index 100%
rename from ui-kit/angular/media-recorder.mdx
rename to ui-kit/angular/v4/media-recorder.mdx
diff --git a/ui-kit/angular/mentions-formatter-guide.mdx b/ui-kit/angular/v4/mentions-formatter-guide.mdx
similarity index 100%
rename from ui-kit/angular/mentions-formatter-guide.mdx
rename to ui-kit/angular/v4/mentions-formatter-guide.mdx
diff --git a/ui-kit/angular/message-bubble.mdx b/ui-kit/angular/v4/message-bubble.mdx
similarity index 100%
rename from ui-kit/angular/message-bubble.mdx
rename to ui-kit/angular/v4/message-bubble.mdx
diff --git a/ui-kit/angular/message-composer.mdx b/ui-kit/angular/v4/message-composer.mdx
similarity index 100%
rename from ui-kit/angular/message-composer.mdx
rename to ui-kit/angular/v4/message-composer.mdx
diff --git a/ui-kit/angular/message-header.mdx b/ui-kit/angular/v4/message-header.mdx
similarity index 100%
rename from ui-kit/angular/message-header.mdx
rename to ui-kit/angular/v4/message-header.mdx
diff --git a/ui-kit/angular/message-information.mdx b/ui-kit/angular/v4/message-information.mdx
similarity index 100%
rename from ui-kit/angular/message-information.mdx
rename to ui-kit/angular/v4/message-information.mdx
diff --git a/ui-kit/angular/message-input.mdx b/ui-kit/angular/v4/message-input.mdx
similarity index 100%
rename from ui-kit/angular/message-input.mdx
rename to ui-kit/angular/v4/message-input.mdx
diff --git a/ui-kit/angular/message-list.mdx b/ui-kit/angular/v4/message-list.mdx
similarity index 100%
rename from ui-kit/angular/message-list.mdx
rename to ui-kit/angular/v4/message-list.mdx
diff --git a/ui-kit/angular/message-template.mdx b/ui-kit/angular/v4/message-template.mdx
similarity index 100%
rename from ui-kit/angular/message-template.mdx
rename to ui-kit/angular/v4/message-template.mdx
diff --git a/ui-kit/angular/messages.mdx b/ui-kit/angular/v4/messages.mdx
similarity index 100%
rename from ui-kit/angular/messages.mdx
rename to ui-kit/angular/v4/messages.mdx
diff --git a/ui-kit/angular/v4/methods.mdx b/ui-kit/angular/v4/methods.mdx
new file mode 100644
index 000000000..80e893be4
--- /dev/null
+++ b/ui-kit/angular/v4/methods.mdx
@@ -0,0 +1,659 @@
+---
+title: "Methods"
+description: "Methods — CometChat documentation."
+---
+
+## Overview
+
+The UI Kit's core function is to extend the [Chat SDK](/sdk/javascript/overview), essentially translating the raw data and functionality provided by the underlying methods into visually appealing and easy-to-use UI components.
+
+To effectively manage and synchronize the UI elements and data across all components in the UI Kit, we utilize internal events. These internal events enable us to keep track of changes in real time and ensure that the UI reflects the most current state of data.
+
+The CometChat UI Kit has thoughtfully encapsulated the critical [Chat SDK](/sdk/javascript/overview) methods within its wrapper to efficiently manage internal eventing. This layer of abstraction simplifies interaction with the underlying CometChat SDK, making it more user-friendly for developers.
+
+## Methods
+
+You can access the methods using the `CometChatUIKit` class. This class provides access to all the public methods exposed by the CometChat UI Kit.
+
+### Init
+
+This method initializes the settings required for [CometChat JavaScript SDK](/sdk/javascript/overview). First, ensure UIKitSettings is set and then call the `init()` method on the app startup.
+
+
+
+Make sure you replace the **APP\_ID**, **REGION** and **AUTH\_KEY** with your CometChat App ID, Region and Auth Key in the below code. The `Auth Key` is an optional property of the `UIKitSettings` Class. It is intended for use primarily during proof-of-concept (POC) development or in the early stages of application development. You can use the [Auth Token](#login-using-auth-token) method to log in securely.
+
+
+
+
+
+```js
+import { UIKitSettingsBuilder } from "@cometchat/uikit-shared";//import shared package
+
+const COMETCHAT_CONSTANTS = {
+APP_ID: "APP_ID", __ Replace with your App ID
+REGION: "REGION", __ Replace with your App Region
+AUTH_KEY: "AUTH_KEY" __ Replace with your Auth Key
+}
+
+__create the builder
+const UIKitSettings = new UIKitSettingsBuilder()
+ .setAppId(COMETCHAT_CONSTANTS.APP_ID)
+ .setRegion(COMETCHAT_CONSTANTS.REGION)
+ .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
+ .subscribePresenceForAllUsers()
+ .build();
+
+
+__Initialize CometChat
+CometChatUIKit.init(UIKitSettings)?.then(()=>{
+__login your user
+})
+```
+
+
+
+
+
+
+### Setting Session Storage Mode
+
+If you want to use session storage instead of the default local storage, you can configure it during initialization:
+
+
+
+```js
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { UIKitSettingsBuilder } from "@cometchat/uikit-shared";
+
+const COMETCHAT_CONSTANTS = {
+ APP_ID: "APP_ID", // Replace with your App ID
+ REGION: "REGION", // Replace with your App Region
+ AUTH_KEY: "AUTH_KEY", // Replace with your Auth Key
+};
+
+const UIKitSettings = new UIKitSettingsBuilder()
+ .setAppId(COMETCHAT_CONSTANTS.APP_ID)
+ .setRegion(COMETCHAT_CONSTANTS.REGION)
+ .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
+ .subscribePresenceForAllUsers()
+ .setStorageMode(CometChat.StorageMode.SESSION)
+ .build();
+
+//Initialize CometChat UI Kit with Session Storage
+CometChatUIKit.init(UIKitSettings)?.then(() => {
+ console.log("Initialization completed successfully with session storage");
+ // You can now call login function.
+ })
+ .catch(console.log);
+```
+
+
+
+### getLoggedInUser
+
+You can use this method to check if there is any existing session in the SDK. This method should return the details of the logged-in user.
+
+
+
+```js
+import { CometChatUIKit } from "@cometchat/chat-uikit-angular";//import uikit package
+
+
+CometChatUIKit.getLoggedinUser().then(user => {
+ __Login user
+}).catch(console.log);
+```
+
+
+
+
+
+### Login using Auth Key
+
+This simple authentication procedure is useful when you are creating a POC or if you are in the development phase. For production apps, we suggest you use [AuthToken](#login-using-auth-token) instead of Auth Key.
+
+
+
+```js
+import { CometChatUIKit } from "@cometchat/chat-uikit-angular";
+
+const UID = "UID";
+const authKey = "AUTH_KEY";
+
+CometChatUIKit.getLoggedinUser()
+ .then((user) => {
+ if (!user) {
+ //Login user
+ CometChatUIKit.login({ uid: UID })
+ .then((user) => {
+ console.log("Login Successful:", { user });
+ //mount your app
+ })
+ .catch(console.log);
+ } else {
+ //user already logged in
+ //mount your app
+ }
+ })
+ .catch(console.log);
+```
+
+
+
+
+
+### Login using Auth Token
+
+This advanced authentication procedure does not use the Auth Key directly in your client code thus ensuring safety.
+
+1. [Create a User](/rest-api/chat-apis) via the CometChat API when the user signs up in your app.
+2. [Create an Auth Token](/rest-api/chat-apis) via the CometChat API for the new user and save the token in your database.
+3. Load the Auth Token in your client and pass it to the `loginWithAuthToken()` method.
+
+
+
+```js
+import { CometChatUIKit } from "@cometchat/chat-uikit-angular";
+
+const authToken = "AUTH_TOKEN";
+
+CometChatUIKit.getLoggedinUser().then(user => {
+ if(!user){
+ //Login user
+ CometChatUIKit.login({authToken}).then(user => {
+
+ console.log("Login Successful:", { user });
+ //mount your app
+
+ }).catch(console.log);
+ } else {
+ //user already logged in
+ //mount your app
+ }
+}).catch(console.log););
+```
+
+
+
+
+
+### Logout
+
+This method is used to end the user session of the logged-in user
+
+
+
+```js
+import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
+
+CometChatUIKit.logout();
+```
+
+
+
+
+
+### Create user
+
+This method takes a `User` object and the `Auth Key` as input parameters and returns the created `User` object if the request is successful.
+
+
+
+```js
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatUIKit } from "@cometchat/chat-uikit-angular";
+
+const authKey = "AUTH_KEY";
+const UID = "user1";
+const name = "Kevin";
+
+var user = new CometChat.User(UID);
+user.setName(name);
+CometChatUIKit.createUser(user, authKey)
+ .then((user) => {
+ console.log("user created", user);
+
+ CometChatUIKit.login(UID, authKey)
+ .then((user) => {
+ console.log("Login Successful:", { user });
+ //mount your app
+ })
+ .catch(console.log);
+ })
+ .catch(console.log);
+```
+
+
+
+
+
+### Update user
+
+This method takes a `User` object and the `Auth Key` as inputs and returns the updated `User` object on the successful execution of the request.
+
+
+
+```js
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatUIKit } from "@cometchat/chat-uikit-angular";
+
+const authKey = "AUTH_KEY";
+const UID = "user1";
+const name = "Kevin Fernandez";
+
+var user = new CometChat.User(UID);
+user.setName(name);
+CometChatUIKit.updateUser(user, authKey)
+ .then((user) => {
+ console.log("user updated", user);
+ })
+ .catch(console.log);
+```
+
+
+
+
+
+### Send text message
+
+This method sends a text message in a 1:1 or group chat. You need to pass a `TextMessage` object to it.
+
+
+
+```js
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatUIKit } from "@cometchat/chat-uikit-angular";
+import { CometChatUIKitConstants } from "@cometchat/uikit-resources";
+
+const receiverID = "UID";
+const messageText = "Hello world!";
+const receiverType = CometChatUIKitConstants.MessageReceiverType.user;
+const textMessage = new CometChat.TextMessage(
+ receiverID,
+ messageText,
+ receiverType
+);
+
+CometChatUIKit.sendMessage(textMessage)
+ .then((message) => {
+ console.log("Message sent successfully:", message);
+ })
+ .catch(console.log);
+```
+
+
+
+
+```js
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatUIKit } from "@cometchat/chat-uikit-angular";
+import { CometChatUIKitConstants } from "@cometchat/uikit-resources";
+
+const receiverID = "GUID";
+const messageText = "Hello world!";
+const receiverType = CometChatUIKitConstants.MessageReceiverType.group;
+const textMessage = new CometChat.TextMessage(
+ receiverID,
+ messageText,
+ receiverType
+);
+
+CometChatUIKit.sendMessage(textMessage)
+ .then((message) => {
+ console.log("Message sent successfully:", message);
+ })
+ .catch(console.log);
+```
+
+
+
+
+
+### Send media message
+
+This method sends a media message in a 1:1 or group chat. You need to pass a `MediaMessage` object to it.
+
+
+
+Make sure you replace the `INPUT FILE OBJECT` with the actual [file](https://developer.mozilla.org/en-US/docs/Web/API/File).
+
+
+
+
+
+```js
+import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
+import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
+import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package
+
+const receiverID = "UID";
+const messageType = CometChatUIKitConstants.MessageTypes.file;
+const receiverType = CometChatUIKitConstants.MessageReceiverType.user;
+const mediaMessage = new CometChat.MediaMessage(
+ receiverID,
+ `INPUT FILE OBJECT`,
+ messageType,
+ receiverType
+);
+
+CometChatUIKit.sendMediaMessage(mediaMessage)
+ .then((message) => {
+ console.log("Media message sent successfully", message);
+ })
+ .catch(console.log);
+```
+
+
+
+
+```js
+import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
+import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
+import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package
+
+const receiverID = "GUID";
+const messageType = CometChatUIKitConstants.MessageTypes.file;
+const receiverType = CometChatUIKitConstants.MessageReceiverType.group;
+const mediaMessage = new CometChat.MediaMessage(
+ receiverID,
+ `INPUT FILE OBJECT`,
+ messageType,
+ receiverType
+);
+
+CometChatUIKit.sendMediaMessage(mediaMessage)
+ .then((message) => {
+ console.log("Media message sent successfully", message);
+ })
+ .catch(console.log);
+```
+
+
+
+
+
+### Send custom message
+
+This method allows you to send custom messages which are neither text nor media messages.
+
+
+
+```js
+import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
+import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
+import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package
+
+const receiverID = "UID";
+const customData = {
+ latitude: "50.6192171633316",
+ longitude: "-72.68182268750002",
+};
+const customType = "location";
+const receiverType = CometChatUIKitConstants.MessageReceiverType.user;
+const customMessage = new CometChat.CustomMessage(
+ receiverID,
+ receiverType,
+ customType,
+ customData
+);
+
+CometChatUIKit.sendCustomMessage(customMessage)
+ .then((message) => {
+ console.log("custom message sent successfully", message);
+ })
+ .catch(console.log);
+```
+
+
+
+
+```js
+import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
+import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
+import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package
+
+const receiverID = "GUID";
+const customData = {
+ latitude: "50.6192171633316",
+ longitude: "-72.68182268750002",
+};
+const customType = "location";
+const receiverType = CometChatUIKitConstants.MessageReceiverType.group;
+const customMessage = new CometChat.CustomMessage(
+ receiverID,
+ receiverType,
+ customType,
+ customData
+);
+
+CometChatUIKit.sendCustomMessage(customMessage)
+ .then((message) => {
+ console.log("custom message sent successfully", message);
+ })
+ .catch(console.log);
+```
+
+
+
+
+
+### Send Form message
+
+This method allows you to send [Form](/web-shared/form-message)Messages which are the extension of Interactive Message
+
+
+
+```js
+import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
+import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
+import {
+ CometChatUIKitConstants,
+ APIAction,
+ ButtonElement,
+ TextInput,
+ FormMessage,
+} from "@cometchat/uikit-resources"; //import shared package
+
+const receiverID = "UID";
+// Create an instance of APIAction
+let apiAction = new APIAction("https://example.com/api", "POST");
+
+// Create an instance of ButtonElement
+let submitButton = new ButtonElement("1", apiAction, "Submit");
+
+// Create an instance of TextInput
+let nameInput = new TextInput("1", "Please enter your name");
+// Create a new instance of FormMessage
+
+let formMessage = new FormMessage(
+ "receiverId",
+ CometChatUIKitConstants.MessageReceiverType.user,
+ "Title",
+ [nameInput],
+ submitButton
+);
+
+CometChatUIKit.sendFormMessage(formMessage)
+ .then((message) => {
+ console.log("Form message sent successfully", message);
+ })
+ .catch(console.log);
+```
+
+
+
+
+```js
+import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
+import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
+import {
+ CometChatUIKitConstants,
+ APIAction,
+ ButtonElement,
+ TextInput,
+ FormMessage,
+} from "@cometchat/uikit-resources"; //import shared package
+
+const receiverID = "GUID";
+// Create an instance of APIAction
+let apiAction = new APIAction("https://example.com/api", "POST");
+// Create an instance of ButtonElement
+let submitButton = new ButtonElement("1", apiAction, "Submit");
+// Create an instance of TextInput
+let nameInput = new TextInput("1", "Please enter your name");
+// Create a new instance of FormMessage
+let formMessage = new FormMessage(
+ "receiverId",
+ CometChatUIKitConstants.MessageReceiverType.group,
+ "Title",
+ [nameInput],
+ submitButton
+);
+
+CometChatUIKit.sendFormMessage(formMessage)
+ .then((message) => {
+ console.log("Form message sent successfully", message);
+ })
+ .catch(console.log);
+```
+
+
+
+
+
+### Send Card Message
+
+This method allows you to send [Card](/web-shared/card-message)Messages which are the extension of Interactive Message
+
+
+
+```js
+import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
+import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
+import {
+ CometChatUIKitConstants,
+ ButtonElement,
+ CardMessage,
+} from "@cometchat/uikit-resources"; //import shared package
+
+const receiverID = "UID";
+// Create instance of ButtonElement for card actions
+let cardAction = new ButtonElement(
+ "1",
+ new APIAction("https://example.com/api", "POST"),
+ "Click Me"
+);
+// Create a new instance of CardMessage
+let cardMessage = new CardMessage(
+ "receiverId",
+ CometChatUIKitConstants.MessageReceiverType.user,
+ "This is a card",
+ [cardAction]
+);
+
+CometChatUIKit.sendCardMessage(cardMessage)
+ .then((message) => {
+ console.log("card message sent successfully", message);
+ })
+ .catch(console.log);
+```
+
+
+
+
+```js
+import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
+import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
+import {
+ CometChatUIKitConstants,
+ ButtonElement,
+ CardMessage,
+} from "@cometchat/uikit-resources"; //import shared package
+
+const receiverID = "GUID";
+// Create instance of ButtonElement for card actions
+let cardAction = new ButtonElement(
+ "1",
+ new APIAction("https://example.com/api", "POST"),
+ "Click Me"
+);
+// Create a new instance of CardMessage
+let cardMessage = new CardMessage(
+ "receiverId",
+ CometChatUIKitConstants.MessageReceiverType.group,
+ "This is a card",
+ [cardAction]
+);
+
+CometChatUIKit.sendCardMessage(cardMessage)
+ .then((message) => {
+ console.log("card message sent successfully", message);
+ })
+ .catch(console.log);
+```
+
+
+
+
+
+### Send Custom Interactive message
+
+This method allows you to send [Custom Interactive Messages](/web-shared/custom-interactive-message) which are the extension of Interactive Message
+
+
+
+```js
+import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
+import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
+import {
+ CometChatUIKitConstants,
+ ButtonElement,
+ CardMessage,
+} from "@cometchat/uikit-resources"; //import shared package
+
+const receiverID = "UID";
+// Create a new instance of CardMessage
+let customMessage = new CustomInteractiveMessage(
+ "receiverId",
+ CometChatUIKitConstants.MessageReceiverType.user,
+ json
+);
+
+CometChatUIKit.sendCustomInteractiveMessage(customMessage)
+ .then((message) => {
+ console.log("CustomInteractive message sent successfully", message);
+ })
+ .catch(console.log);
+```
+
+
+
+
+```js
+import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
+import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
+import {
+ CometChatUIKitConstants,
+ ButtonElement,
+ CardMessage,
+} from "@cometchat/uikit-resources"; //import shared package
+
+const receiverID = "GUID";
+// Create a new instance of CardMessage
+let customMessage = new CustomInteractiveMessage(
+ "receiverId",
+ CometChatUIKitConstants.MessageReceiverType.group,
+ json
+);
+
+CometChatUIKit.sendCustomInteractiveMessage(customMessage)
+ .then((message) => {
+ console.log("CustomInteractive message sent successfully", message);
+ })
+ .catch(console.log);
+```
+
+
+
+
diff --git a/ui-kit/angular/modal.mdx b/ui-kit/angular/v4/modal.mdx
similarity index 100%
rename from ui-kit/angular/modal.mdx
rename to ui-kit/angular/v4/modal.mdx
diff --git a/ui-kit/angular/multi-tab-chat-ui-guide.mdx b/ui-kit/angular/v4/multi-tab-chat-ui-guide.mdx
similarity index 100%
rename from ui-kit/angular/multi-tab-chat-ui-guide.mdx
rename to ui-kit/angular/v4/multi-tab-chat-ui-guide.mdx
diff --git a/ui-kit/angular/new-attachment-option-guide.mdx b/ui-kit/angular/v4/new-attachment-option-guide.mdx
similarity index 100%
rename from ui-kit/angular/new-attachment-option-guide.mdx
rename to ui-kit/angular/v4/new-attachment-option-guide.mdx
diff --git a/ui-kit/angular/new-message-option-guide.mdx b/ui-kit/angular/v4/new-message-option-guide.mdx
similarity index 100%
rename from ui-kit/angular/new-message-option-guide.mdx
rename to ui-kit/angular/v4/new-message-option-guide.mdx
diff --git a/ui-kit/angular/ongoing-call.mdx b/ui-kit/angular/v4/ongoing-call.mdx
similarity index 100%
rename from ui-kit/angular/ongoing-call.mdx
rename to ui-kit/angular/v4/ongoing-call.mdx
diff --git a/ui-kit/angular/outgoing-call.mdx b/ui-kit/angular/v4/outgoing-call.mdx
similarity index 100%
rename from ui-kit/angular/outgoing-call.mdx
rename to ui-kit/angular/v4/outgoing-call.mdx
diff --git a/ui-kit/angular/v4/overview.mdx b/ui-kit/angular/v4/overview.mdx
new file mode 100644
index 000000000..cb8f3f709
--- /dev/null
+++ b/ui-kit/angular/v4/overview.mdx
@@ -0,0 +1,67 @@
+---
+title: "Overview"
+description: "Overview of Overview in CometChat."
+---
+
+
+🚀 **CometChat Angular UI Kit v5 is now available!** It features a completely revamped component architecture, standalone components, CSS variable theming, and improved customization. [Switch to v5 →](/ui-kit/angular/overview)
+
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-angular` |
+| Peer deps | `@cometchat/uikit-elements`, `@cometchat/uikit-resources`, `@cometchat/uikit-shared` |
+| Source | [GitHub](https://github.com/cometchat-pro/cometchat-chat-sample-app-angular/tree/v4) |
+| AI Skills | `npx @cometchat/skills add` — [GitHub](https://github.com/cometchat/cometchat-skills) |
+
+
+
+CometChat's **UI Kit** for Angular, you can effortlessly build a chat app equipped with all the essential messaging features, along with customizable options tailored to your application requirements. This **UI Kit** comprises prebuilt UI components organized into smaller modules and components, each configurable to meet your specific needs.
+
+
+
+
+--------
+
+[Angular Sample App](https://github.com/cometchat-pro/cometchat-chat-sample-app-angular/tree/v4)
+
+##### **Before Getting Started**
+
+Before you begin, it's essential to grasp the fundamental concepts and features offered by CometChat's APIs, SDK, and UI Kit. You can find detailed information in [Key Concepts](/fundamentals/key-concepts) documentation.
+
+The Angular UI Kit offers pre-built components for easy integration into Angular applications, built on top of the [JavaScript Chat SDK](/sdk/javascript/overview) Installing it also includes the core SDK functionalities.
+
+To begin, please follow the [Getting Started](/ui-kit/angular/getting-started) guide.
+
+---
+
+## Integrate with AI Coding Agents
+
+Use [CometChat Skills](https://github.com/cometchat/cometchat-skills) to add chat to any Angular project through your AI coding agent. The skill takes an AI-first approach — your agent has a short conversation with you to understand your project and chat requirements, then writes production-grade integration code tailored to the files you already have.
+
+Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and [30+ more agents](https://github.com/cometchat/cometchat-skills).
+
+```bash
+npx @cometchat/skills add
+```
+
+Use `--ide ` to target a specific IDE (e.g. `--ide cursor`), or `--ide all` to install for all supported IDEs.
+
+Then in your IDE:
+
+```
+/cometchat add chat to my app
+```
+
+The skill detects your Angular version, router setup, 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 routes, modules, and components before proposing a placement (route or modal), shows the plan (which files it will create, modify, and leave untouched), and waits for your approval before writing code. Credentials are saved to `src/environments/environment.ts`.
+
+After the first integration, re-run `/cometchat` anytime to pick from the iteration menu:
+
+- **Customize look & feel** — theme presets (slack / whatsapp / imessage / discord / notion) or your own brand color
+- **Add a feature** — 40+ features including calls, reactions, polls, AI smart replies, file sharing, presence
+- **Customize a component** — custom message bubbles, headers, composer actions, empty/loading states
+- **Set up production auth** — replace the dev Auth Key with a server-side token endpoint
+- **Set up user management** — server endpoints for creating/updating/deleting CometChat users
+- **Run diagnostics** — verify, drift detection, symptom-to-cause lookup
diff --git a/ui-kit/angular/pop-over.mdx b/ui-kit/angular/v4/pop-over.mdx
similarity index 100%
rename from ui-kit/angular/pop-over.mdx
rename to ui-kit/angular/v4/pop-over.mdx
diff --git a/ui-kit/angular/radio-button.mdx b/ui-kit/angular/v4/radio-button.mdx
similarity index 100%
rename from ui-kit/angular/radio-button.mdx
rename to ui-kit/angular/v4/radio-button.mdx
diff --git a/ui-kit/angular/reaction-info.mdx b/ui-kit/angular/v4/reaction-info.mdx
similarity index 100%
rename from ui-kit/angular/reaction-info.mdx
rename to ui-kit/angular/v4/reaction-info.mdx
diff --git a/ui-kit/angular/reaction-list.mdx b/ui-kit/angular/v4/reaction-list.mdx
similarity index 100%
rename from ui-kit/angular/reaction-list.mdx
rename to ui-kit/angular/v4/reaction-list.mdx
diff --git a/ui-kit/angular/reaction.mdx b/ui-kit/angular/v4/reaction.mdx
similarity index 100%
rename from ui-kit/angular/reaction.mdx
rename to ui-kit/angular/v4/reaction.mdx
diff --git a/ui-kit/angular/receipt.mdx b/ui-kit/angular/v4/receipt.mdx
similarity index 100%
rename from ui-kit/angular/receipt.mdx
rename to ui-kit/angular/v4/receipt.mdx
diff --git a/ui-kit/angular/search-input.mdx b/ui-kit/angular/v4/search-input.mdx
similarity index 100%
rename from ui-kit/angular/search-input.mdx
rename to ui-kit/angular/v4/search-input.mdx
diff --git a/ui-kit/angular/shortcut-formatter-guide.mdx b/ui-kit/angular/v4/shortcut-formatter-guide.mdx
similarity index 100%
rename from ui-kit/angular/shortcut-formatter-guide.mdx
rename to ui-kit/angular/v4/shortcut-formatter-guide.mdx
diff --git a/ui-kit/angular/singleselect.mdx b/ui-kit/angular/v4/singleselect.mdx
similarity index 100%
rename from ui-kit/angular/singleselect.mdx
rename to ui-kit/angular/v4/singleselect.mdx
diff --git a/ui-kit/angular/v4/sound-manager.mdx b/ui-kit/angular/v4/sound-manager.mdx
new file mode 100644
index 000000000..393ed7a2d
--- /dev/null
+++ b/ui-kit/angular/v4/sound-manager.mdx
@@ -0,0 +1,63 @@
+---
+title: "Sound Manager"
+description: "Sound Manager — CometChat documentation."
+---
+
+## Overview
+
+The SoundManager is a helper class responsible for managing and playing various types of audio in the CometChat UI Kit. This includes sound events for incoming and outgoing messages and calls.
+
+## Methods
+
+### Play Sound
+
+`CometChatSoundManager.play` method plays the in-built sounds audio resources for the above mentioned enum cases. It also allows for customisation of the audio resources. You can pass a mp3 file asset path of your choice.
+
+Here are the available methods for triggering sound playback:
+
+* `play(sound: Sound)`: This method plays predefined sounds for various events such as incoming and outgoing calls and messages.
+
+* `play(sound: Sound, filePath: string)`: This method is capable of playing a custom sound for a particular event by specifying the path to a custom MP3 file.
+
+### Pause Sound
+
+The SoundManager can pause different types of sounds for incoming and outgoing calls and messages using the following method:
+
+* `pause()`: This method pauses any sound currently being played.
+
+## Usage
+
+Here is how to use CometChatSoundManager:
+
+
+
+```js
+//Trigger the audio sound for an incoming message
+CometChatSoundManager.play(Sound.incomingMessage);
+
+//Trigger the audio sound of your choice for an incoming message
+CometChatSoundManager.play(Sound.incomingMessage, "MP3_FILE_ASSET_PATH");
+
+//Pause the ongoing audio sound
+CometChatSoundManager.pause();
+```
+
+
+
+
+```ts
+//Trigger the audio sound for an incoming message
+CometChatSoundManager.play(Sound.incomingMessage);
+
+//Trigger the audio sound of your choice for an incoming message
+CometChatSoundManager.play(Sound.incomingMessage, "MP3_FILE_ASSET_PATH");
+
+//Pause the ongoing audio sound
+CometChatSoundManager.pause();
+```
+
+
+
+
+
+By using the CometChatSoundManager, you can enhance the user experience in your chat application by integrating audible cues for chat interactions.
diff --git a/ui-kit/angular/status-indicator.mdx b/ui-kit/angular/v4/status-indicator.mdx
similarity index 100%
rename from ui-kit/angular/status-indicator.mdx
rename to ui-kit/angular/v4/status-indicator.mdx
diff --git a/ui-kit/angular/text-bubble.mdx b/ui-kit/angular/v4/text-bubble.mdx
similarity index 100%
rename from ui-kit/angular/text-bubble.mdx
rename to ui-kit/angular/v4/text-bubble.mdx
diff --git a/ui-kit/angular/theme.mdx b/ui-kit/angular/v4/theme.mdx
similarity index 100%
rename from ui-kit/angular/theme.mdx
rename to ui-kit/angular/v4/theme.mdx
diff --git a/ui-kit/angular/threaded-messages.mdx b/ui-kit/angular/v4/threaded-messages.mdx
similarity index 100%
rename from ui-kit/angular/threaded-messages.mdx
rename to ui-kit/angular/v4/threaded-messages.mdx
diff --git a/ui-kit/angular/url-formatter-guide.mdx b/ui-kit/angular/v4/url-formatter-guide.mdx
similarity index 100%
rename from ui-kit/angular/url-formatter-guide.mdx
rename to ui-kit/angular/v4/url-formatter-guide.mdx
diff --git a/ui-kit/angular/user-details.mdx b/ui-kit/angular/v4/user-details.mdx
similarity index 100%
rename from ui-kit/angular/user-details.mdx
rename to ui-kit/angular/v4/user-details.mdx
diff --git a/ui-kit/angular/user-member-wrapper.mdx b/ui-kit/angular/v4/user-member-wrapper.mdx
similarity index 100%
rename from ui-kit/angular/user-member-wrapper.mdx
rename to ui-kit/angular/v4/user-member-wrapper.mdx
diff --git a/ui-kit/angular/users-with-messages.mdx b/ui-kit/angular/v4/users-with-messages.mdx
similarity index 100%
rename from ui-kit/angular/users-with-messages.mdx
rename to ui-kit/angular/v4/users-with-messages.mdx
diff --git a/ui-kit/angular/users.mdx b/ui-kit/angular/v4/users.mdx
similarity index 100%
rename from ui-kit/angular/users.mdx
rename to ui-kit/angular/v4/users.mdx
diff --git a/ui-kit/angular/video-bubble.mdx b/ui-kit/angular/v4/video-bubble.mdx
similarity index 100%
rename from ui-kit/angular/video-bubble.mdx
rename to ui-kit/angular/v4/video-bubble.mdx
diff --git a/ui-kit/angular/v5/accessibility.mdx b/ui-kit/angular/v5/accessibility.mdx
deleted file mode 100644
index b766a4ab7..000000000
--- a/ui-kit/angular/v5/accessibility.mdx
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: "Accessibility"
-description: "Overview of accessibility support in the CometChat Angular UIKit, including WCAG compliance, keyboard navigation, and ARIA attributes."
----
-
-The CometChat Angular UIKit is built with accessibility as a core principle. Components are designed targeting WCAG 2.1 Level AA guidelines, with the goal of making chat interfaces usable by everyone — including users who rely on keyboards, screen readers, or other assistive technologies.
-
-
- Full WCAG compliance requires manual testing with assistive technologies and expert accessibility review. The UIKit implements the patterns and attributes described below, but you should validate your specific integration against your accessibility requirements.
-
-
-Key accessibility features across the UIKit:
-
-- **WCAG 2.1 Level AA target** — Components are built following the Web Content Accessibility Guidelines for contrast, focus management, and semantic markup.
-- **Keyboard navigation** — All interactive components support full keyboard operation using Tab, Enter, Space, Escape, and Arrow keys. Users can navigate, select, and interact without a mouse.
-- **ARIA attributes** — Components use appropriate ARIA roles, labels, and states to communicate structure and behavior to screen readers.
-
-Each component that supports keyboard interaction documents its specific key bindings and focus behavior on its own page. The sections below link to those per-component keyboard accessibility references.
-
-## Components with Keyboard Accessibility
-
-### Conversations
-
-- [CometChatConversations](/ui-kit/angular/v5/components/cometchat-conversations#keyboard-accessibility)
-- [CometChatConversationItem](/ui-kit/angular/v5/components/cometchat-conversation-item#keyboard-accessibility)
-
-### Users
-
-- [CometChatUsers](/ui-kit/angular/v5/components/cometchat-users#keyboard-accessibility)
-- [CometChatUserItem](/ui-kit/angular/v5/components/cometchat-user-item#keyboard-accessibility)
-
-### Groups
-
-- [CometChatGroups](/ui-kit/angular/v5/components/cometchat-groups#keyboard-accessibility)
-- [CometChatGroupItem](/ui-kit/angular/v5/components/cometchat-group-item#keyboard-accessibility)
-
-### Group Members
-
-- [CometChatGroupMembers](/ui-kit/angular/v5/components/cometchat-group-members#keyboard-accessibility)
-- [CometChatGroupMemberItem](/ui-kit/angular/v5/components/cometchat-group-member-item#keyboard-accessibility)
-
-### Messages
-
-- [CometChatMessageHeader](/ui-kit/angular/v5/components/cometchat-message-header#keyboard-accessibility)
-- [CometChatMessageList](/ui-kit/angular/v5/components/cometchat-message-list#keyboard-accessibility)
-- [CometChatMessageComposer](/ui-kit/angular/v5/components/cometchat-message-composer#keyboard-accessibility)
-- [CometChatMessageBubble](/ui-kit/angular/v5/components/cometchat-message-bubble#keyboard-accessibility)
-- [CometChatMessageInformation](/ui-kit/angular/v5/components/cometchat-message-information#keyboard-accessibility)
-- [CometChatThreadHeader](/ui-kit/angular/v5/components/cometchat-thread-header#keyboard-accessibility)
-
-### Message Bubbles
-
-- [CometChatTextBubble](/ui-kit/angular/v5/components/cometchat-text-bubble#keyboard-accessibility)
-- [CometChatImageBubble](/ui-kit/angular/v5/components/cometchat-image-bubble#keyboard-accessibility)
-- [CometChatVideoBubble](/ui-kit/angular/v5/components/cometchat-video-bubble#keyboard-accessibility)
-- [CometChatAudioBubble](/ui-kit/angular/v5/components/cometchat-audio-bubble#keyboard-accessibility)
-- [CometChatFileBubble](/ui-kit/angular/v5/components/cometchat-file-bubble#keyboard-accessibility)
-- [CometChatCallBubble](/ui-kit/angular/v5/components/cometchat-call-bubble#keyboard-accessibility)
-- [CometChatPollBubble](/ui-kit/angular/v5/components/cometchat-poll-bubble#keyboard-accessibility)
-- [CometChatCollaborativeDocumentBubble](/ui-kit/angular/v5/components/cometchat-collaborative-document-bubble#keyboard-accessibility)
-- [CometChatCollaborativeWhiteboardBubble](/ui-kit/angular/v5/components/cometchat-collaborative-whiteboard-bubble#keyboard-accessibility)
-- [CometChatStickersKeyboard](/ui-kit/angular/v5/components/cometchat-stickers-keyboard#keyboard-accessibility)
-
-### Reactions
-
-- [CometChatReactions](/ui-kit/angular/v5/components/cometchat-reactions#keyboard-accessibility)
-- [CometChatReactionList](/ui-kit/angular/v5/components/cometchat-reaction-list#keyboard-accessibility)
-- [CometChatReactionInfo](/ui-kit/angular/v5/components/cometchat-reaction-info#keyboard-accessibility)
-
-### Calls
-
-- [CometChatCallButtons](/ui-kit/angular/v5/components/cometchat-call-buttons#keyboard-accessibility)
-- [CometChatIncomingCall](/ui-kit/angular/v5/components/cometchat-incoming-call#keyboard-accessibility)
-- [CometChatOutgoingCall](/ui-kit/angular/v5/components/cometchat-outgoing-call#keyboard-accessibility)
-- [CometChatCallLogs](/ui-kit/angular/v5/components/cometchat-call-logs#keyboard-accessibility)
-
-### AI Features
-
-- [CometChatSmartReplies](/ui-kit/angular/v5/components/cometchat-smart-replies#keyboard-accessibility)
-- [CometChatConversationStarter](/ui-kit/angular/v5/components/cometchat-conversation-starter#keyboard-accessibility)
diff --git a/ui-kit/angular/v5/ai-features.mdx b/ui-kit/angular/v5/ai-features.mdx
deleted file mode 100644
index 0b8297186..000000000
--- a/ui-kit/angular/v5/ai-features.mdx
+++ /dev/null
@@ -1,157 +0,0 @@
----
-title: "AI Smart Chat Features"
-description: "AI-powered features in CometChat's Angular UIKit: Conversation Starter, Smart Replies, and Conversation Summary."
----
-
-## Overview
-
-CometChat AI Smart Chat Features enhance user interaction by providing contextual suggestions and summaries. Each feature must be enabled from the CometChat Dashboard first, then activated in your Angular components via input properties.
-
-
-AI Smart Chat Features must be enabled from the [CometChat Dashboard](https://app.cometchat.com). Once activated in the dashboard, you enable them in your Angular components using the inputs described below.
-
-
-## Smart Chat Features
-
-### Conversation Starter
-
-Displays AI-generated opening lines when a user starts a new or empty conversation. Helps break the ice by suggesting relevant topics.
-
-Enable it on `cometchat-message-list`:
-
-```html
-
-
-```
-
-Or using `ChatStateService` for shared state:
-
-```typescript expandable
-import { Component } from '@angular/core';
-import { ChatStateService } from '@cometchat/chat-uikit-angular';
-import { CometChatMessageListComponent } from '@cometchat/chat-uikit-angular';
-
-@Component({
- selector: 'app-chat',
- standalone: true,
- imports: [CometChatMessageListComponent],
- template: `
-
-
- `
-})
-export class ChatComponent {
- constructor(private chatState: ChatStateService) {}
-
- openChat(user: CometChat.User): void {
- this.chatState.setActiveUser(user);
- }
-}
-```
-
-See [CometChatConversationStarter](/ui-kit/angular/v5/components/cometchat-conversation-starter) for the standalone component docs.
-
-
-
-
-
----
-
-### Smart Replies
-
-AI-generated response suggestions based on the last received message. Users can tap a suggestion to send it instantly.
-
-Enable it on `cometchat-message-list`:
-
-```html
-
-
-```
-
-Smart replies appear above the message composer when a qualifying message is received. The component respects configurable trigger keywords and a delay before showing suggestions.
-
-See [CometChatSmartReplies](/ui-kit/angular/v5/components/cometchat-smart-replies) for the standalone component docs.
-
-
-
-
-
----
-
-### Conversation Summary
-
-AI-generated recap of long conversations. Useful for catching up on missed messages without scrolling through the entire thread.
-
-Enable it on `cometchat-message-header`:
-
-```html
-
-
-
-```
-
-Full example combining the header with conversation starters and smart replies in the message list:
-
-```typescript expandable
-import { Component } from '@angular/core';
-import { CometChat } from '@cometchat/chat-sdk-javascript';
-import {
- CometChatMessageListComponent,
- CometChatMessageHeaderComponent,
- ChatStateService
-} from '@cometchat/chat-uikit-angular';
-
-@Component({
- selector: 'app-chat-view',
- standalone: true,
- imports: [CometChatMessageListComponent, CometChatMessageHeaderComponent],
- template: `
-
-
-
-
-
- `
-})
-export class ChatViewComponent {
- constructor(private chatState: ChatStateService) {}
-
- openChat(user: CometChat.User): void {
- this.chatState.setActiveUser(user);
- }
-}
-```
-
-See [CometChatConversationSummary](/ui-kit/angular/v5/components/cometchat-conversation-summary) for the standalone component docs.
-
-
-
-
-
----
-
-## Next Steps
-
-
-
- Customize the message list where AI Smart Chat Features appear
-
-
- Enable Conversation Summary in the header
-
-
- Standalone Conversation Starter component
-
-
- Standalone Smart Replies component
-
-
diff --git a/ui-kit/angular/v5/call-features.mdx b/ui-kit/angular/v5/call-features.mdx
deleted file mode 100644
index 99bb9eced..000000000
--- a/ui-kit/angular/v5/call-features.mdx
+++ /dev/null
@@ -1,109 +0,0 @@
----
-title: "Call Features"
-description: "Overview of CometChat's audio and video calling features including incoming calls, outgoing calls, and call logs — with the Angular UIKit components that power each feature."
----
-
-## Overview
-
-CometChat Calls integrates 1:1 and group audio/video calling into the Angular UIKit. Install the Calls SDK and the UIKit auto-detects it, enabling call components.
-
-
-Ensure `CometChatUIKit.init()` has completed and the user is logged in before using call features.
-
-
-## Integration
-
-Install the Calls SDK:
-
-```bash
-npm install @cometchat/calls-sdk-javascript@5.0.0-beta.1
-```
-
-Then enable calling in your `UIKitSettingsBuilder`:
-
-```typescript
-const settings = new UIKitSettingsBuilder()
- .setAppId('APP_ID')
- .setRegion('REGION')
- .setAuthKey('AUTH_KEY')
- .setCallingEnabled(true)
- .build();
-```
-
-
- Both steps are required. Installing the Calls SDK alone is not enough — you must also call `.setCallingEnabled(true)` on the builder. Without it, call buttons remain hidden and the Calls SDK is not initialized.
-
-
-When enabled, [cometchat-call-buttons](/ui-kit/angular/v5/components/cometchat-call-buttons) renders in [cometchat-message-header](/ui-kit/angular/v5/components/cometchat-message-header) and the trailing call button appears in [cometchat-call-logs](/ui-kit/angular/v5/components/cometchat-call-logs).
-
-### Custom Call App Settings
-
-By default the UIKit builds `CallAppSettings` from your `appId` and `region`. If you need custom configuration (e.g. a different region for the Calls SDK or additional settings), pass your own `CallAppSettings`:
-
-```typescript
-import { CometChatUIKitCalls } from '@cometchat/calls-sdk-javascript';
-
-const callAppSettings = new CometChatUIKitCalls.CallAppSettingsBuilder()
- .setAppId('APP_ID')
- .setRegion('REGION')
- .build();
-
-const settings = new UIKitSettingsBuilder()
- .setAppId('APP_ID')
- .setRegion('REGION')
- .setAuthKey('AUTH_KEY')
- .setCallingEnabled(true)
- .setCallAppSettings(callAppSettings)
- .build();
-```
-
-
- `setCallAppSettings` is optional. When omitted, the UIKit automatically creates settings from the `appId` and `region` you already provided.
-
-
-
-
-
-
-## Features
-
-### Incoming Call
-
-The [cometchat-incoming-call](/ui-kit/angular/v5/components/cometchat-incoming-call) component displays a call screen when a call is received, showing caller info with accept/reject options.
-
-
-
-
-
-### Outgoing Call
-
-The [cometchat-outgoing-call](/ui-kit/angular/v5/components/cometchat-outgoing-call) component displays an outgoing call screen with recipient info and call status. Transitions to the ongoing call screen when the receiver accepts.
-
-
-
-
-
-### Call Logs
-
-The [cometchat-call-logs](/ui-kit/angular/v5/components/cometchat-call-logs) component displays call history — caller, time, and duration.
-
-
-
-
-
-## Next Steps
-
-
-
- Audio and video call buttons
-
-
- Incoming call notifications and UI
-
-
- Call history and details
-
-
- Core chat features
-
-
diff --git a/ui-kit/angular/v5/core-features.mdx b/ui-kit/angular/v5/core-features.mdx
deleted file mode 100644
index 400e3ea65..000000000
--- a/ui-kit/angular/v5/core-features.mdx
+++ /dev/null
@@ -1,149 +0,0 @@
----
-title: "Core Features"
-description: "Map of CometChat's core chat features to the Angular UIKit components that power each one — instant messaging, media sharing, read receipts, typing indicators, user presence, reactions, mentions, threaded conversations, search, and moderation."
----
-
-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
-
-Real-time text messaging is at the heart of CometChat. Users can send and receive instant messages, enabling quick and efficient communication in both one-on-one and group conversations.
-
-
-
-
-
-| Component | Functionality |
-| --- | --- |
-| [cometchat-message-composer](/ui-kit/angular/v5/components/cometchat-message-composer) | Provides the input area where users write and send text messages. |
-| [cometchat-message-list](/ui-kit/angular/v5/components/cometchat-message-list) | Renders the chronological list of sent and received messages using text bubbles. |
-
-## Media Sharing
-
-CometChat supports sharing images, videos, audio files, and documents within conversations.
-
-
-
-
-
-| Component | Functionality |
-| --- | --- |
-| [cometchat-message-composer](/ui-kit/angular/v5/components/cometchat-message-composer) | Includes an ActionSheet that presents options for attaching and sharing media files. |
-| [cometchat-message-list](/ui-kit/angular/v5/components/cometchat-message-list) | Renders media message bubbles including Image, File, Audio, and Video bubbles. |
-
-## Read Receipts
-
-Read Receipts provide visibility into message status, letting users know when a message has been delivered and read. This brings clarity to communication and sets expectations about engagement.
-
-
-
-
-
-| Component | Functionality |
-| --- | --- |
-| [cometchat-conversations](/ui-kit/angular/v5/components/cometchat-conversations) | Displays the delivery and read status of the last message in each conversation list item. |
-| [cometchat-message-list](/ui-kit/angular/v5/components/cometchat-message-list) | Shows read receipt indicators on every message bubble, providing real-time status updates. |
-| [cometchat-message-information](/ui-kit/angular/v5/components/cometchat-message-information) | Gives the sender detailed insights into whether their message has been delivered and read. |
-
-## Typing Indicator
-
-The Typing Indicator shows when a user is composing a response in real time, making conversations feel more natural and interactive.
-
-
-
-
-
-| Component | Functionality |
-| --- | --- |
-| [cometchat-conversations](/ui-kit/angular/v5/components/cometchat-conversations) | Shows real-time typing status indicators in conversation list items for both one-on-one and group chats. |
-| [cometchat-message-header](/ui-kit/angular/v5/components/cometchat-message-header) | Dynamically updates to display a "typing…" status when a user or group member is composing a message. |
-
-## User Presence
-
-User Presence lets users see whether their contacts are online or offline, helping them choose the best time to start a conversation.
-
-
-
-
-
-| Component | Functionality |
-| --- | --- |
-| [cometchat-conversations](/ui-kit/angular/v5/components/cometchat-conversations) | Displays user presence information alongside each conversation list item. |
-| [cometchat-message-header](/ui-kit/angular/v5/components/cometchat-message-header) | Shows the online/offline status of the user or group in the message header toolbar. |
-| [cometchat-users](/ui-kit/angular/v5/components/cometchat-users) | Renders the list of available users with their current presence status. |
-| [cometchat-group-members](/ui-kit/angular/v5/components/cometchat-group-members) | Renders group member lists with presence information for each member. |
-
-## Reactions
-
-Reactions let users express emotions or respond to messages without typing a full reply, adding expressiveness and boosting engagement.
-
-
-
-
-
-| Component | Functionality |
-| --- | --- |
-| [cometchat-message-list](/ui-kit/angular/v5/components/cometchat-message-list) | Renders reaction indicators on message bubbles and provides the reaction picker action. |
-| [cometchat-reactions](/ui-kit/angular/v5/components/cometchat-reactions) | Displays the reaction bar beneath a message bubble showing all reactions and their counts. |
-| [cometchat-reaction-list](/ui-kit/angular/v5/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/v5/components/cometchat-reaction-info) | Displays a tooltip or popover with details about a specific reaction on hover. |
-
-## Mentions
-
-Mentions allow users to directly address specific individuals in a conversation using `@username`. The feature also supports `@all` to notify every member in a group chat simultaneously.
-
-
-
-
-
-| Component | Functionality |
-| --- | --- |
-| [cometchat-conversations](/ui-kit/angular/v5/components/cometchat-conversations) | Shows mention indicators in conversation list items so users can see where they were mentioned. |
-| [cometchat-message-composer](/ui-kit/angular/v5/components/cometchat-message-composer) | Provides the mention picker that appears as users type `@`, allowing them to select a user to mention. |
-| [cometchat-message-list](/ui-kit/angular/v5/components/cometchat-message-list) | Renders mention highlights within message text, making mentioned names visually distinct. |
-
-## Threaded Conversations
-
-Threaded Conversations enable users to respond directly to a specific message, keeping discussions organized and maintaining context — especially useful in group chats.
-
-
-
-
-
-| Component | Functionality |
-| --- | --- |
-| [cometchat-thread-header](/ui-kit/angular/v5/components/cometchat-thread-header) | Displays the parent message along with the reply count at the top of a thread view. |
-| [cometchat-message-list](/ui-kit/angular/v5/components/cometchat-message-list) | Renders thread replies when `parentMessageId` is set. |
-| [cometchat-message-composer](/ui-kit/angular/v5/components/cometchat-message-composer) | Sends replies within a thread when `parentMessageId` is set. |
-
-## Group Chat
-
-CometChat facilitates group conversations, allowing multiple participants to communicate simultaneously — ideal for team collaborations, group discussions, and social communities.
-
-
-
-
-
-| Component | Functionality |
-| --- | --- |
-| [cometchat-groups](/ui-kit/angular/v5/components/cometchat-groups) | Renders the list of available groups with search, join, and create capabilities. |
-| [cometchat-group-members](/ui-kit/angular/v5/components/cometchat-group-members) | Displays the members of a group with roles, presence status, and management actions. |
-
----
-
-## Next Steps
-
-
-
- Browse all available Angular UIKit components
-
-
- Customize the look and feel of your chat UI
-
-
- Add audio and video calling
-
-
- Explore AI-powered chat capabilities
-
-
diff --git a/ui-kit/angular/v5/events.mdx b/ui-kit/angular/v5/events.mdx
deleted file mode 100644
index 6475955f7..000000000
--- a/ui-kit/angular/v5/events.mdx
+++ /dev/null
@@ -1,168 +0,0 @@
----
-title: "Events"
-description: "Reference for CometChat Angular UIKit events including conversation, user, group, message, call, and UI events."
----
-
-Events provide decoupled communication between UIKit components using a publish/subscribe event bus pattern. Components emit events in response to user interactions or state changes, allowing other parts of your application to react without direct component references. In Angular, you subscribe to these events using RxJS observables and manage subscriptions through component lifecycle hooks.
-
-## CometChatConversationEvents
-
-`CometChatConversationEvents` emits events when the logged-in user acts on a conversation object.
-
-| Event Name | Description |
-| ------------------------- | ------------------------------------------------------------------------------------------------ |
-| **ccConversationDeleted** | Triggered when the user successfully deletes a conversation. |
-| **ccUpdateConversation** | Triggered to update a conversation in the conversation list. Takes a Conversation object to update. |
-
-## CometChatUserEvents
-
-`CometChatUserEvents` emits events when the logged-in user acts on another user object.
-
-| Event Name | Description |
-| ------------------- | ------------------------------------------------------------------------- |
-| **ccUserBlocked** | Triggered when the user successfully blocks another user. |
-| **ccUserUnblocked** | Triggered when the user successfully unblocks another user. |
-
-## CometChatGroupEvents
-
-`CometChatGroupEvents` emits events when the logged-in user acts on a group object.
-
-| Event Name | Description |
-| ------------------------------- | ------------------------------------------------------------------------------------ |
-| **ccGroupCreated** | Triggered when the user creates a group successfully. |
-| **ccGroupDeleted** | Triggered when the group member deletes the group successfully. |
-| **ccGroupLeft** | Triggered when the group member leaves the group successfully. |
-| **ccGroupMemberScopeChanged** | Triggered when the group member's scope is updated successfully. |
-| **ccGroupMemberKicked** | Triggered when a group member is kicked. |
-| **ccGroupMemberBanned** | Triggered when a group member is banned. |
-| **ccGroupMemberUnbanned** | Triggered when a group member is un-banned. |
-| **ccGroupMemberJoined** | Triggered when a user joins the group. |
-| **ccGroupMemberAdded** | Triggered when a user is added to the group. |
-| **ccOwnershipChanged** | Triggered when the group ownership is assigned to another group member. |
-
-## CometChatMessageEvents
-
-`CometChatMessageEvents` emits events when the logged-in user acts on a message object. This category includes both UIKit-level events and CometChat SDK listener events.
-
-### UIKit Events
-
-| Event Name | Description |
-| --------------------- | --------------------------------------------------------------------------------------------------------- |
-| **ccMessageSent** | Triggered when the sent message is in transit and also when it is received by the receiver. |
-| **ccMessageEdited** | Triggered when the user successfully edits a message. |
-| **ccReplyToMessage** | Triggered when the user successfully replies to a message. |
-| **ccMessageDeleted** | Triggered when the user successfully deletes a message. |
-| **ccMessageRead** | Triggered when the sent message is read by the receiver. |
-| **ccLiveReaction** | Triggered when the user sends a live reaction. |
-
-### SDK Listener Events
-
-| Event Name | Description |
-| -------------------------------- | ---------------------------------------------------------------------------------------- |
-| **onTextMessageReceived** | Emitted when the CometChat SDK listener receives a text message. |
-| **onMediaMessageReceived** | Emitted when the CometChat SDK listener receives a media message. |
-| **onCustomMessageReceived** | Emitted when the CometChat SDK listener receives a custom message. |
-| **onTypingStarted** | Emitted when the CometChat SDK listener indicates that a user has started typing. |
-| **onTypingEnded** | Emitted when the CometChat SDK listener indicates that a user has stopped typing. |
-| **onMessagesDelivered** | Emitted when the CometChat SDK listener indicates that messages have been delivered. |
-| **onMessagesRead** | Emitted when the CometChat SDK listener indicates that messages have been read. |
-| **onMessageEdited** | Emitted when the CometChat SDK listener indicates that a message has been edited. |
-| **onMessageDeleted** | Emitted when the CometChat SDK listener indicates that a message has been deleted. |
-| **onTransientMessageReceived** | Emitted when the CometChat SDK listener receives a transient message. |
-
-## CometChatCallEvents
-
-`CometChatCallEvents` emits events when the logged-in user acts on a call object.
-
-| Event Name | Description |
-| ------------------ | ---------------------------------------------------------------------------- |
-| **ccOutgoingCall** | Triggered when the user initiates a voice/video call. |
-| **ccCallAccepted** | Triggered when the initiated call is accepted by the receiver. |
-| **ccCallRejected** | Triggered when the initiated call is rejected by the receiver. |
-| **ccCallEnded** | Triggered when the initiated call successfully ends. |
-
-## UI Events
-
-UI events are triggered when a user interacts with UIKit elements such as buttons, menus, or input fields.
-
-| Event Name | Description |
-| ----------------------- | ---------------------------------------------------------------------------- |
-| **ccActiveChatChanged** | Triggered when the user navigates to a particular chat window. |
-
-## Usage
-
-Subscribe to events in `ngOnInit` and unsubscribe in `ngOnDestroy` to prevent memory leaks.
-
-```typescript expandable
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { CometChatMessageEvents } from '@cometchat/chat-uikit-angular';
-import { Subscription } from 'rxjs';
-
-@Component({
- selector: 'app-chat',
- standalone: true,
- template: ``
-})
-export class ChatComponent implements OnInit, OnDestroy {
- private messageSubscription?: Subscription;
-
- ngOnInit(): void {
- this.messageSubscription = CometChatMessageEvents.ccMessageSent.subscribe(
- (message) => {
- console.log('Message sent:', message);
- }
- );
- }
-
- ngOnDestroy(): void {
- this.messageSubscription?.unsubscribe();
- }
-}
-```
-
-
-When subscribing to multiple events, consider using a `Subscription` container to manage all subscriptions together.
-
-
-```typescript expandable
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import {
- CometChatMessageEvents,
- CometChatConversationEvents,
- CometChatGroupEvents
-} from '@cometchat/chat-uikit-angular';
-import { Subscription } from 'rxjs';
-
-@Component({
- selector: 'app-chat-listener',
- standalone: true,
- template: ``
-})
-export class ChatListenerComponent implements OnInit, OnDestroy {
- private subscriptions = new Subscription();
-
- ngOnInit(): void {
- this.subscriptions.add(
- CometChatMessageEvents.ccMessageSent.subscribe((message) => {
- console.log('Message sent:', message);
- })
- );
-
- this.subscriptions.add(
- CometChatConversationEvents.ccConversationDeleted.subscribe((conversation) => {
- console.log('Conversation deleted:', conversation);
- })
- );
-
- this.subscriptions.add(
- CometChatGroupEvents.ccGroupMemberAdded.subscribe((data) => {
- console.log('Member added:', data);
- })
- );
- }
-
- ngOnDestroy(): void {
- this.subscriptions.unsubscribe();
- }
-}
-```
diff --git a/ui-kit/angular/v5/extensions.mdx b/ui-kit/angular/v5/extensions.mdx
deleted file mode 100644
index 5e08a6958..000000000
--- a/ui-kit/angular/v5/extensions.mdx
+++ /dev/null
@@ -1,185 +0,0 @@
----
-title: "Extensions"
-description: "Overview of CometChat's extensions grouped by Dashboard categories and how they auto-integrate into Angular UIKit components."
----
-
-## Overview
-
-CometChat UI Kit includes built-in support for extensions that add interactive, secure, and efficient features to chat. Extensions are activated from the CometChat Dashboard and auto-integrate into UI Kit components on init and login.
-
-
-Ensure `CometChatUIKit.init()` has completed and the user is logged in. Extensions must be activated from the CometChat Dashboard.
-
-
-## Built-in Extensions
-
-The grouping below mirrors the CometChat Dashboard.
-
-### User Experience
-
-#### Bitly
-
-Shortens long URLs in text messages using Bitly.
-
-#### Link Preview
-
-Displays a summary (title, description, thumbnail) for URLs shared in chat.
-
-Auto-integrates into the Message Bubble of [cometchat-message-list](/ui-kit/angular/v5/components/cometchat-message-list) when activated.
-
-
-
-
-
-#### Message Shortcuts
-
-Sends predefined messages using short codes (e.g., `!hb` expands to `Happy birthday!`).
-
-#### Pin Message
-
-Pins important messages in a conversation for easy access.
-
-#### Rich Media Preview
-
-Generates rich preview panels for URLs.
-
-#### Save Message
-
-Bookmarks messages for later reference. Saved messages are private to the user.
-
-#### Thumbnail Generation
-
-Creates smaller preview images for shared images, reducing bandwidth.
-
-Auto-integrates into the Message Bubble of [cometchat-message-list](/ui-kit/angular/v5/components/cometchat-message-list) when activated.
-
-
-
-
-
-#### TinyURL
-
-URL shortening using TinyURL.
-
-#### Voice Transcription
-
-Converts audio messages to text.
-
-### User Engagement
-
-#### Giphy
-
-Search and share GIFs from Giphy.
-
-#### Message Translation
-
-Translates messages into the local locale.
-
-Auto-integrates into the Action Sheet of [cometchat-message-list](/ui-kit/angular/v5/components/cometchat-message-list) when activated.
-
-
-
-
-
-#### Polls
-
-Creates polls in group discussions with predefined answer options.
-
-Auto-integrates into the Action Sheet of [cometchat-message-composer](/ui-kit/angular/v5/components/cometchat-message-composer) when activated.
-
-
-
-
-
-#### Reminders
-
-Sets reminders for messages or creates personal reminders. A bot sends a notification when due.
-
-#### Stickers
-
-Sends pre-designed stickers in chat.
-
-Auto-integrates into [cometchat-message-composer](/ui-kit/angular/v5/components/cometchat-message-composer) when activated.
-
-
-
-
-
-#### Stipop
-
-Integrates Stipop's sticker library.
-
-#### Tenor
-
-Search and share GIFs from Tenor.
-
-### Collaboration
-
-#### Collaborative Document
-
-Shared document editing for real-time collaboration.
-
-Auto-integrates into the Action Sheet of [cometchat-message-composer](/ui-kit/angular/v5/components/cometchat-message-composer) when activated.
-
-
-
-
-
-#### Collaborative Whiteboard
-
-Real-time shared whiteboard for drawing and brainstorming.
-
-Auto-integrates into the Action Sheet of [cometchat-message-composer](/ui-kit/angular/v5/components/cometchat-message-composer) when activated.
-
-
-
-
-
-### Security
-
-#### Disappearing Messages
-
-Messages auto-delete after a specified interval. Works for 1:1 and group messages.
-
-### Customer Support
-
-#### Chatwoot
-
-Routes user messages to Chatwoot for customer support.
-
-#### Intercom
-
-Integrates Intercom for in-app customer support.
-
-### Smart Chat Features
-
-#### Conversation Starter
-
-AI-generated opening messages for new chats. See [AI Smart Chat Features](/ui-kit/angular/v5/ai-features).
-
-#### Smart Replies
-
-AI-generated response suggestions based on conversation context. See [AI Smart Chat Features](/ui-kit/angular/v5/ai-features).
-
-#### Conversation Summary
-
-AI-generated recap of long conversations. See [AI Smart Chat Features](/ui-kit/angular/v5/ai-features).
-
----
-
-## Next Steps
-
-
-
- Customize the composer where most extensions appear
-
-
- Customize the message list for extension-rendered content
-
-
- Core chat features like messaging and reactions
-
-
- AI-powered chat capabilities
-
-
diff --git a/ui-kit/angular/v5/guides/custom-text-formatter.mdx b/ui-kit/angular/v5/guides/custom-text-formatter.mdx
deleted file mode 100644
index 0e5a7d7d7..000000000
--- a/ui-kit/angular/v5/guides/custom-text-formatter.mdx
+++ /dev/null
@@ -1,331 +0,0 @@
----
-title: "Custom Text Formatter"
-description: "Extend the CometChatTextFormatter base class to implement custom inline text patterns with regex and callbacks in Angular."
----
-
-
-
-| Field | Value |
-| --- | --- |
-| Package | `@cometchat/chat-uikit-angular` |
-| Key class | `CometChatTextFormatter` (abstract base class for custom formatters) |
-| Required setup | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login("UID")` |
-| Purpose | Extend to create custom inline text patterns with regex, styling, and callbacks |
-| Features | Text formatting, customizable styles, dynamic text replacement, input field integration, key event callbacks |
-| Related | [ShortCut Formatter](/ui-kit/angular/v5/guides/shortcut-formatter) \| [Mentions Formatter](/ui-kit/angular/v5/guides/mentions-formatter) \| [All Guides](/ui-kit/angular/v5/guides/overview) |
-
-
-
-`CometChatTextFormatter` is an abstract class for formatting text in the message composer and message bubbles. Extend it to build custom formatters — hashtags, keywords, or any regex-based pattern.
-
-| Capability | Description |
-| --- | --- |
-| Text formatting | Auto-format text based on regex patterns and styles |
-| Custom styles | Set colors, fonts, and backgrounds for matched text |
-| Dynamic replacement | Regex-based find-and-replace in user input |
-| Input integration | Real-time monitoring of the composer input field |
-| Key event callbacks | Hooks for `keyUp` and `keyDown` events |
-
-
-Always wrap formatted output in a `` with a unique CSS class (e.g. `"custom-hashtag"`). This tells the UI Kit to render it as-is instead of sanitizing it.
-
-
----
-
-## Steps
-
-### 1. Import the base class
-
-```typescript
-import { CometChatTextFormatter } from "@cometchat/chat-uikit-angular";
-```
-
-### 2. Extend it
-
-```typescript
-class HashTagTextFormatter extends CometChatTextFormatter {
- // ...
-}
-```
-
-### 3. Configure tracking character and regex
-
-Set the character that triggers formatting, the regex to match, and the regex to strip formatting back to plain text.
-
-```typescript
-this.setTrackingCharacter("#");
-this.setRegexPatterns([/\B#(\w+)\b/g]);
-this.setRegexToReplaceFormatting([
- /#(\w+)<\/span>/g,
-]);
-```
-
-### 4. Set key event callbacks
-
-```typescript
-this.setKeyUpCallBack(this.onKeyUp.bind(this));
-this.setKeyDownCallBack(this.onKeyDown.bind(this));
-```
-
-### 5. Implement formatting methods
-
-```typescript
-getFormattedText(inputText: string) { /* ... */ }
-getOriginalText(inputText: string) { /* ... */ }
-customLogicToFormatText(inputText: string) { /* ... */ }
-```
-
----
-
-## Example
-
-A hashtag formatter used with `cometchat-message-list` and `cometchat-message-composer`.
-
-
-
-
-
-
-
-```typescript expandable
-import { CometChatTextFormatter } from "@cometchat/chat-uikit-angular";
-
-export class HashTagTextFormatter extends CometChatTextFormatter {
- constructor() {
- super();
- this.setTrackingCharacter("#");
- this.setRegexPatterns([/\B#(\w+)\b/g]);
- this.setRegexToReplaceFormatting([/#(\w+)/g]);
- this.setKeyUpCallBack(this.onKeyUp.bind(this));
- this.setKeyDownCallBack(this.onKeyDown.bind(this));
- this.setReRender(() => {
- console.log("Re-rendering message composer to update text content.");
- });
- }
-
- getCaretPosition(): number {
- if (!this.inputElementReference) return 0;
- const selection = window.getSelection();
- if (!selection || selection.rangeCount === 0) return 0;
- const range = selection.getRangeAt(0);
- const clonedRange = range.cloneRange();
- clonedRange.selectNodeContents(this.inputElementReference);
- clonedRange.setEnd(range.endContainer, range.endOffset);
- return clonedRange.toString().length;
- }
-
- setCaretPosition(position: number) {
- if (!this.inputElementReference) return;
- const range = document.createRange();
- const selection = window.getSelection();
- if (!selection) return;
- range.setStart(
- this.inputElementReference.childNodes[0] || this.inputElementReference,
- position
- );
- range.collapse(true);
- selection.removeAllRanges();
- selection.addRange(range);
- }
-
- onKeyUp(event: KeyboardEvent) {
- if (event.key === this.trackCharacter) {
- this.startTracking = true;
- }
- if (this.startTracking && (event.key === " " || event.key === "Enter")) {
- const caretPosition = this.getCaretPosition();
- this.formatText();
- this.setCaretPosition(caretPosition);
- }
- if (
- this.startTracking &&
- event.key !== " " &&
- event.key !== "Enter" &&
- this.getCaretPosition() === this.inputElementReference?.innerText?.length
- ) {
- this.startTracking = false;
- }
- }
-
- formatText() {
- const inputValue =
- this.inputElementReference?.innerText ||
- this.inputElementReference?.textContent ||
- "";
- const formattedText = this.getFormattedText(inputValue);
- if (this.inputElementReference) {
- this.inputElementReference.innerHTML = formattedText || "";
- this.reRender();
- }
- }
-
- onKeyDown(event: KeyboardEvent) {}
-
- getFormattedText(inputText: string) {
- if (!inputText) return;
- return this.customLogicToFormatText(inputText);
- }
-
- customLogicToFormatText(inputText: string) {
- return inputText.replace(
- /\B#(\w+)\b/g,
- '#$1'
- );
- }
-
- getOriginalText(inputText: string) {
- if (!inputText) return "";
- for (let i = 0; i < this.regexToReplaceFormatting.length; i++) {
- const regexPattern = this.regexToReplaceFormatting[i];
- if (inputText) {
- inputText = inputText.replace(regexPattern, "#$1");
- }
- }
- return inputText;
- }
-}
-```
-
-
-
-
-Pass the formatter via the `textFormatters` input on the message list and composer.
-
-```typescript expandable
-import { Component, OnInit } from "@angular/core";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageListComponent, CometChatMessageComposerComponent } from "@cometchat/chat-uikit-angular";
-import { HashTagTextFormatter } from "./HashTagTextFormatter";
-
-@Component({
- selector: "app-message-demo",
- standalone: true,
- imports: [CometChatMessageListComponent, CometChatMessageComposerComponent],
- template: `
-
-
-
-
- `,
-})
-export class MessageDemoComponent implements OnInit {
- chatUser: CometChat.User | undefined;
- textFormatters = [new HashTagTextFormatter()];
-
- ngOnInit() {
- CometChat.getUser("uid").then((user) => {
- this.chatUser = user;
- });
- }
-}
-```
-
-
-
----
-
-## Methods Reference
-
-| Field | Setter | Description |
-| --- | --- | --- |
-| `trackCharacter` | `setTrackingCharacter(char)` | Character that starts tracking (e.g. `#` for hashtags) |
-| `currentCaretPosition` | `setCaretPositionAndRange(selection, range)` | Current selection set by the composer |
-| `currentRange` | `setCaretPositionAndRange(selection, range)` | Text range or cursor position set by the composer |
-| `inputElementReference` | `setInputElementReference(element)` | DOM reference to the composer input field |
-| `regexPatterns` | `setRegexPatterns(patterns)` | Regex patterns to match text for formatting |
-| `regexToReplaceFormatting` | `setRegexToReplaceFormatting(patterns)` | Regex patterns to strip formatting back to plain text |
-| `keyUpCallBack` | `setKeyUpCallBack(fn)` | Callback for key up events |
-| `keyDownCallBack` | `setKeyDownCallBack(fn)` | Callback for key down events |
-| `reRender` | `setReRender(fn)` | Triggers a re-render of the composer to update displayed text |
-| `loggedInUser` | `setLoggedInUser(user)` | Logged-in user object, set by composer and text bubbles |
-| `id` | `setId(id)` | Unique identifier for the formatter instance |
-
-
-Don't modify `textContent` or `innerHTML` of the input element directly. Call `reRender` instead — the composer will invoke `getFormattedText` for all formatters in order.
-
-
----
-
-## Override Methods
-
-
-
-
-Returns formatted HTML from input text, or edits at cursor position if `inputText` is null.
-
-```typescript
-getFormattedText(inputText: string | null, params: any): string | void {
- if (!inputText) {
- return; // edit at cursor position
- }
- return this.customLogicToFormatText(inputText);
-}
-```
-
-
-
-
-Handles `keyup` events. Start tracking when the track character is typed.
-
-```typescript
-onKeyUp(event: KeyboardEvent) {
- if (event.key === this.trackCharacter) {
- this.startTracking = true;
- }
- if (this.startTracking && event.key === " ") {
- this.debouncedFormatTextOnKeyUp();
- }
-}
-```
-
-
-
-
-Handles `keydown` events.
-
-```typescript
-onKeyDown(event: KeyboardEvent) {}
-```
-
-
-
-
-Strips formatting and returns plain text.
-
-```typescript expandable
-getOriginalText(inputText: string | null | undefined): string {
- if (!inputText) return "";
- for (let i = 0; i < this.regexToReplaceFormatting.length; i++) {
- const regexPattern = this.regexToReplaceFormatting[i];
- if (inputText) {
- inputText = inputText.replace(regexPattern, "$1");
- }
- }
- return inputText;
-}
-```
-
-
-
----
-
-## Next Steps
-
-
-
- Add @mentions with styled tokens.
-
-
- Customize the message input component.
-
-
- Browse all feature and formatter guides.
-
-
- Implement text expansion shortcuts.
-
-
diff --git a/ui-kit/angular/v5/guides/overview.mdx b/ui-kit/angular/v5/guides/overview.mdx
deleted file mode 100644
index 6e40ad5aa..000000000
--- a/ui-kit/angular/v5/guides/overview.mdx
+++ /dev/null
@@ -1,65 +0,0 @@
----
-title: "Guides"
-sidebarTitle: "Overview"
-description: "Index of task-oriented feature guides for the CometChat Angular UIKit."
----
-
-
-
-| Field | Value |
-| --- | --- |
-| Package | `@cometchat/chat-uikit-angular` |
-| Purpose | Index of task-oriented feature guides for the Angular UIKit |
-| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-angular/tree/v5/projects/sample-app) |
-| Components | [Components Overview](/ui-kit/angular/v5/components/overview) |
-| Guides | [Threaded Messages](/ui-kit/angular/v5/guides/threaded-messages) · [Group Chat](/ui-kit/angular/v5/guides/group-chat) · [New Chat](/ui-kit/angular/v5/guides/new-chat) · [Search Messages](/ui-kit/angular/v5/guides/threaded-messages) · [Block/Unblock](/ui-kit/angular/v5/guides/block-unblock-user) · [Message Privately](/ui-kit/angular/v5/guides/message-privately) · [Call Log Details](/ui-kit/angular/v5/guides/call-log-details) · [Custom Message Types](/ui-kit/angular/v5/guides/overview) |
-
-
-
-> This page indexes focused, task-oriented feature guides for the Angular UIKit. Each guide shows how to implement a specific capability end-to-end using UI components.
-
-## When to Use These Guides
-
-Use these guides after completing the base [Integration Guide](/ui-kit/angular/v5/integration). They help you layer additional UX without rewriting core chat flows.
-
-## Guide Directory
-
-| Guide | Description |
-|:------|:------------|
-| [Threaded Messages](/ui-kit/angular/v5/guides/threaded-messages) | Implement threaded message replies with parent context, reply list, and focused thread composer. |
-| [Group Chat](/ui-kit/angular/v5/guides/group-chat) | Create and join groups, view members, manage roles and scopes, transfer ownership. |
-| [New Chat](/ui-kit/angular/v5/guides/new-chat) | Start new one-to-one or group conversations with user and group discovery. |
-| [Search Messages](/ui-kit/angular/v5/guides/threaded-messages) | Add full-text message search across conversations with result routing. |
-| [Block / Unblock User](/ui-kit/angular/v5/guides/block-unblock-user) | Block or unblock users in one-to-one chats; hide composer and show unblock prompt. |
-| [Message Privately](/ui-kit/angular/v5/guides/message-privately) | Launch a direct one-to-one chat from a user profile or group member list. |
-| [Call Log Details](/ui-kit/angular/v5/guides/call-log-details) | Display detailed call insights: metadata, participants, join/leave history, recordings. |
-| [Custom Message Types](/ui-kit/angular/v5/guides/overview) | Register custom message types with bubble templates, conversation subtitle overrides, and fetch inclusion. |
-| [Custom Text Formatter](/ui-kit/angular/v5/guides/custom-text-formatter) | Extend the base formatter to implement custom inline patterns with regex and callbacks. |
-| [Mentions Formatter](/ui-kit/angular/v5/guides/mentions-formatter) | Add @mentions with styled tokens, suggestion list, and click handling. |
-| [URL Formatter](/ui-kit/angular/v5/guides/shortcut-formatter) | Detect and style plain URLs as clickable links with optional tracking logic. |
-| [Shortcut Formatter](/ui-kit/angular/v5/guides/shortcut-formatter) | Provide shortcut-style text expansions invoking extension APIs or dialogs. |
-| [Hashtag Formatter](/ui-kit/angular/v5/guides/hashtag-formatter) | Highlight #hashtags in the composer, message bubbles, conversation last message, and edit view. |
-| [Rich Text Formatting](/ui-kit/angular/v5/guides/custom-text-formatter) | Configure and customize the rich text editor in the message composer. |
-
-
-Need another guide? Open a request via our [Support Portal](https://help.cometchat.com/hc/en-us/requests/new).
-
-
----
-
-## Next Steps
-
-
-
- Set up the Angular UIKit from scratch
-
-
- Explore all UI components
-
-
- Theme and style the UIKit to match your brand
-
-
- Subscribe to UIKit events for custom workflows
-
-
diff --git a/ui-kit/angular/v5/methods.mdx b/ui-kit/angular/v5/methods.mdx
deleted file mode 100644
index 083893746..000000000
--- a/ui-kit/angular/v5/methods.mdx
+++ /dev/null
@@ -1,282 +0,0 @@
----
-title: "Methods"
-description: "Reference for CometChat Angular UIKit methods including init, login, logout, and message-sending wrappers."
----
-
-The UIKit wraps the [Chat SDK](/sdk/javascript/overview) methods to manage internal eventing and keep UI components synchronized. Use these wrapper methods instead of raw SDK calls.
-
-
-`CometChatUIKit.init()` must be called before rendering any UIKit components or calling any SDK methods. Initialization must complete before login.
-
-
-
-Auth Key is for development/testing only. In production, generate Auth Tokens on the server using the REST API and pass them to the client via `loginWithAuthToken()`. Never expose Auth Keys in production client code.
-
-
-## UIKitSettingsBuilder
-
-`UIKitSettingsBuilder` is a fluent builder for constructing the `UIKitSettings` object passed to `CometChatUIKit.init()`.
-
-| Method | Parameter | Description |
-|--------|-----------|-------------|
-| `setAppId(appId)` | `string` | Your CometChat App ID from the Dashboard |
-| `setRegion(region)` | `string` | App region (e.g. `'us'`, `'eu'`) |
-| `setAuthKey(authKey)` | `string` | Auth Key for dev/testing — use Auth Token in production |
-| `subscribePresenceForAllUsers()` | — | Subscribe to presence updates for all users |
-| `subscribePresenceForFriends()` | — | Subscribe to presence updates for friends only |
-| `subscribePresenceForRoles(roles)` | `string[]` | Subscribe to presence updates for users with specific roles |
-| `setRoles(roles)` | `string[]` | Set roles filter independently of presence subscription |
-| `setAutoEstablishSocketConnection(autoEstablish)` | `boolean` | Control whether the WebSocket connects automatically on init |
-| `setAdminHost(adminHost)` | `string` | Override the admin API host (custom/on-premise deployments) |
-| `setClientHost(clientHost)` | `string` | Override the client API host (custom/on-premise deployments) |
-| `setStorageMode(storageMode)` | `CometChat.StorageMode` | Set the storage mode for SDK data persistence |
-| `build()` | — | Returns the configured `UIKitSettings` instance |
-
-```typescript expandable
-import { UIKitSettingsBuilder } from '@cometchat/chat-uikit-angular';
-
-const UIKitSettings = new UIKitSettingsBuilder()
- .setAppId('APP_ID')
- .setRegion('REGION')
- .setAuthKey('AUTH_KEY')
- .subscribePresenceForFriends()
- .setAutoEstablishSocketConnection(true)
- .build();
-```
-
----
-
-## Methods
-
-All methods are accessed via the `CometChatUIKit` class.
-
-### Init
-
-Initializes the CometChat SDK. Must be called on app startup before any other UIKit method.
-
-
-Replace `APP_ID`, `REGION`, and `AUTH_KEY` with values from the CometChat Dashboard. `Auth Key` is optional — use [Auth Token](#login-using-auth-token) for production.
-
-
-```typescript expandable
-import { CometChatUIKit, UIKitSettingsBuilder } from '@cometchat/chat-uikit-angular';
-
-const COMETCHAT_CONSTANTS = {
- APP_ID: 'APP_ID',
- REGION: 'REGION',
- AUTH_KEY: 'AUTH_KEY',
-};
-
-const UIKitSettings = new UIKitSettingsBuilder()
- .setAppId(COMETCHAT_CONSTANTS.APP_ID)
- .setRegion(COMETCHAT_CONSTANTS.REGION)
- .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
- .subscribePresenceForFriends()
- .build();
-
-CometChatUIKit.init(UIKitSettings)?.then(() => {
- // login your user
-});
-```
-
----
-
-### Get Logged In User
-
-Checks for an existing session in the SDK. Returns the logged-in user details or `null`.
-
-```typescript
-import { CometChatUIKit } from '@cometchat/chat-uikit-angular';
-
-CometChatUIKit.getLoggedinUser()
- .then((user) => {
- // Login user
- })
- .catch(console.log);
-```
-
----
-
-### Login using Auth Key
-
-Simple authentication for development/POC. For production, use [Auth Token](#login-using-auth-token).
-
-```typescript expandable
-import { CometChatUIKit } from '@cometchat/chat-uikit-angular';
-
-const UID = 'UID';
-
-CometChatUIKit.getLoggedinUser()
- .then((user) => {
- if (!user) {
- CometChatUIKit.login(UID)
- .then((user) => {
- console.log('Login Successful:', { user });
- })
- .catch(console.log);
- }
- })
- .catch(console.log);
-```
-
----
-
-### Login using Auth Token
-
-Production-safe authentication that does not expose the Auth Key in client code.
-
-1. [Create a User](/rest-api/chat-apis) via the CometChat API when the user signs up in your app.
-2. [Create an Auth Token](/rest-api/chat-apis) via the CometChat API for the new user and save the token in your database.
-3. Load the Auth Token in your client and pass it to the `loginWithAuthToken()` method.
-
-```typescript expandable
-import { CometChatUIKit } from '@cometchat/chat-uikit-angular';
-
-const authToken = 'AUTH_TOKEN';
-
-CometChatUIKit.getLoggedinUser()
- .then((user) => {
- if (!user) {
- CometChatUIKit.loginWithAuthToken(authToken)
- .then((user) => {
- console.log('Login Successful:', { user });
- })
- .catch(console.log);
- }
- })
- .catch(console.log);
-```
-
----
-
-### Logout
-
-Ends the current user session.
-
-```typescript
-import { CometChatUIKit } from '@cometchat/chat-uikit-angular';
-
-CometChatUIKit.logout();
-```
-
----
-
-### Create User
-
-Takes a `User` object and Auth Key, returns the created `User` object.
-
-```typescript expandable
-import { CometChat } from '@cometchat/chat-sdk-javascript';
-import { CometChatUIKit } from '@cometchat/chat-uikit-angular';
-
-const authKey = 'AUTH_KEY';
-const UID = 'user1';
-const name = 'Kevin';
-
-const user = new CometChat.User(UID);
-user.setName(name);
-CometChatUIKit.createUser(user, authKey)
- .then((user) => {
- console.log('User created:', user);
- })
- .catch(console.log);
-```
-
----
-
-### Update User
-
-Takes a `User` object and Auth Key, returns the updated `User` object.
-
-```typescript expandable
-import { CometChat } from '@cometchat/chat-sdk-javascript';
-import { CometChatUIKit } from '@cometchat/chat-uikit-angular';
-
-const authKey = 'AUTH_KEY';
-const UID = 'user1';
-const name = 'Kevin Fernandez';
-
-const user = new CometChat.User(UID);
-user.setName(name);
-CometChatUIKit.updateUser(user, authKey)
- .then((user) => {
- console.log('User updated:', user);
- })
- .catch(console.log);
-```
-
----
-
-### Base Message
-
-#### Text Message
-
-Sends a text message in a 1:1 or group chat. Takes a `TextMessage` object.
-
-```typescript expandable
-import { CometChat } from '@cometchat/chat-sdk-javascript';
-import { CometChatUIKit } from '@cometchat/chat-uikit-angular';
-import { CometChatUIKitConstants } from '@cometchat/chat-uikit-angular';
-
-const receiverID = 'UID';
-const messageText = 'Hello world!';
-const receiverType = CometChatUIKitConstants.MessageReceiverType.user;
-const textMessage = new CometChat.TextMessage(receiverID, messageText, receiverType);
-
-CometChatUIKit.sendTextMessage(textMessage)
- .then((message) => {
- console.log('Message sent successfully:', message);
- })
- .catch(console.log);
-```
-
----
-
-#### Media Message
-
-Sends a media message in a 1:1 or group chat. Takes a `MediaMessage` object.
-
-
-Replace `file` with the actual [File](https://developer.mozilla.org/en-US/docs/Web/API/File) object.
-
-
-```typescript expandable
-import { CometChat } from '@cometchat/chat-sdk-javascript';
-import { CometChatUIKit } from '@cometchat/chat-uikit-angular';
-import { CometChatUIKitConstants } from '@cometchat/chat-uikit-angular';
-
-const receiverID = 'UID';
-const messageType = CometChatUIKitConstants.MessageTypes.file;
-const receiverType = CometChatUIKitConstants.MessageReceiverType.user;
-const mediaMessage = new CometChat.MediaMessage(receiverID, file, messageType, receiverType);
-
-CometChatUIKit.sendMediaMessage(mediaMessage)
- .then((message) => {
- console.log('Media message sent successfully:', message);
- })
- .catch(console.log);
-```
-
----
-
-#### Custom Message
-
-Sends a custom message (neither text nor media) in a 1:1 or group chat. Takes a `CustomMessage` object.
-
-```typescript expandable
-import { CometChat } from '@cometchat/chat-sdk-javascript';
-import { CometChatUIKit } from '@cometchat/chat-uikit-angular';
-import { CometChatUIKitConstants } from '@cometchat/chat-uikit-angular';
-
-const receiverID = 'UID';
-const customData = { latitude: '50.6192171633316', longitude: '-72.68182268750002' };
-const customType = 'location';
-const receiverType = CometChatUIKitConstants.MessageReceiverType.user;
-const customMessage = new CometChat.CustomMessage(receiverID, receiverType, customType, customData);
-
-CometChatUIKit.sendCustomMessage(customMessage)
- .then((message) => {
- console.log('Custom message sent successfully:', message);
- })
- .catch(console.log);
-```
diff --git a/ui-kit/angular/v5/overview.mdx b/ui-kit/angular/v5/overview.mdx
deleted file mode 100644
index 038842d0c..000000000
--- a/ui-kit/angular/v5/overview.mdx
+++ /dev/null
@@ -1,89 +0,0 @@
----
-title: Overview
-description: "CometChat documentation page."
----
-
-
-This is a beta release (`5.0.0-beta.2`). APIs and components may change before the stable release. Report issues on [GitHub](https://github.com/cometchat/cometchat-uikit-angular/issues).
-
-
-CometChat UIKit for Angular (`@cometchat/chat-uikit-angular`) provides pre-built UI components to quickly add chat functionality to your Angular applications. It works with `@cometchat/chat-sdk-javascript` and supports Angular v19, v20, and v21.
-
-## Features
-
-
-
- Pre-built chat components that work out of the box
-
-
- Easily customize themes, styles, and behavior
-
-
- Built on CometChat's real-time messaging infrastructure
-
-
- Full TypeScript support with type definitions
-
-
-
-## Get Started
-
-
-
- Set up CometChat UIKit in your Angular project in 6 steps
-
-
-
----
-
-## Try It
-
-
-
- Try the full chat experience in your browser
-
-
- Clone the sample app and start building
-
-
-
----
-
-## Explore
-
-
-
- Browse all prebuilt UI components
-
-
- Chat, calling, AI, and extensions
-
-
- Colors, fonts, dark mode, and custom styling
-
-
- Rich text formatting and more
-
-
-
----
-
-## Resources
-
-
-
- Working reference app
-
-
- Full UIKit source on GitHub
-
-
- Design resources and prototyping
-
-
- Common issues and fixes
-
-
- Open a support ticket
-
-
diff --git a/ui-kit/angular/v5/sound-manager.mdx b/ui-kit/angular/v5/sound-manager.mdx
deleted file mode 100644
index b105c0b40..000000000
--- a/ui-kit/angular/v5/sound-manager.mdx
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: "Sound Manager"
-description: "Manage and customize audio cues for incoming/outgoing calls and messages in CometChat Angular UIKit."
----
-
-`CometChatSoundManager` is a helper class for managing and playing audio cues in the UI Kit — incoming/outgoing calls and messages.
-
-`Sound` is a frozen object on `CometChatSoundManager`, not a separate export. Access sound event keys via `CometChatSoundManager.Sound`.
-
----
-
-## Methods
-
-### play
-
-Plays the default or custom audio resource for a given sound event.
-
-| Parameter | Type | Description |
-| --- | --- | --- |
-| `sound` | `"incomingCall" \| "incomingMessage" \| "incomingMessageFromOther" \| "outgoingCall" \| "outgoingMessage"` | Sound event key |
-| `customSound` | `string \| null` | Optional custom audio file URL. Defaults to `null` (uses built-in sound). |
-
-### pause
-
-Pauses the currently playing sound and resets playback position.
-
-### onIncomingMessage
-
-Plays the incoming message sound directly. Accepts an optional `customSound` URL.
-
-### onIncomingOtherMessage
-
-Plays the incoming message from another user sound directly. Accepts an optional `customSound` URL.
-
-### onOutgoingMessage
-
-Plays the outgoing message sound directly. Accepts an optional `customSound` URL.
-
-### onIncomingCall
-
-Plays the incoming call sound (loops). Accepts an optional `customSound` URL.
-
-### onOutgoingCall
-
-Plays the outgoing call sound (loops). Accepts an optional `customSound` URL.
-
-### hasInteracted
-
-Returns `boolean` — checks whether the user has interacted with the page (required by browser autoplay policies).
-
----
-
-## Sound Events
-
-| Event Key | When it plays |
-| --- | --- |
-| `incomingCall` | Incoming call detected |
-| `outgoingCall` | Outgoing call initiated |
-| `incomingMessage` | New message received from the current conversation |
-| `incomingMessageFromOther` | New message received from a different conversation |
-| `outgoingMessage` | Message sent |
-
-Access via `CometChatSoundManager.Sound.incomingCall`, etc.
-
----
-
-## Usage
-
-```typescript expandable
-import { CometChatSoundManager } from '@cometchat/chat-uikit-angular';
-
-// Play default incoming call sound
-CometChatSoundManager.play(CometChatSoundManager.Sound.incomingCall);
-
-// Play custom sound for incoming message
-CometChatSoundManager.play(CometChatSoundManager.Sound.incomingMessage, 'MP3_FILE_ASSET_PATH');
-
-// Pause the ongoing sound
-CometChatSoundManager.pause();
-
-// Use individual method directly
-CometChatSoundManager.onIncomingCall();
-CometChatSoundManager.onOutgoingMessage('CUSTOM_AUDIO_PATH');
-```
diff --git a/ui-kit/flutter/call-buttons.mdx b/ui-kit/flutter/call-buttons.mdx
index e39b6b0c2..9bb9d62d8 100644
--- a/ui-kit/flutter/call-buttons.mdx
+++ b/ui-kit/flutter/call-buttons.mdx
@@ -1,71 +1,20 @@
---
title: "Call Buttons"
-description: "Widget that provides users with the ability to make voice and video calls with customizable icons and styles."
+description: "Add CometChat Flutter UI Kit call buttons for voice and video calling, call settings, and call-related user actions."
---
-
-```json
-{
- "component": "CometChatCallButtons",
- "package": "cometchat_calls_uikit",
- "import": "import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';",
- "description": "Widget that provides users with the ability to make voice and video calls with customizable icons and styles.",
- "props": {
- "data": {
- "user": { "type": "User?", "default": "null" },
- "group": { "type": "Group?", "default": "null" }
- },
- "visibility": {
- "hideVoiceCallButton": { "type": "bool?", "default": "false" },
- "hideVideoCallButton": { "type": "bool?", "default": "false" }
- },
- "icons": {
- "voiceCallIcon": "Widget?",
- "videoCallIcon": "Widget?"
- },
- "style": {
- "callButtonsStyle": "CometChatCallButtonsStyle?"
- },
- "configuration": {
- "outgoingCallConfiguration": "CometChatOutgoingCallConfiguration?",
- "callSettingsBuilder": "CallSettingsBuilder Function(User? user, Group? group, bool? isAudioOnly)?"
- }
- }
-}
-```
-
## Overview
-The `CometChatCallButtons` is a [Widget](/ui-kit/flutter/components-overview#components) provides users with the ability to make calls, access call-related functionalities, and control call settings. Clicking this button typically triggers the call to be placed to the desired recipient.
-
-
- 
-
+The `CometChatCallButtons` widget provides users with the ability to make calls, access call-related functionalities, and control call settings.
## Usage
### Integration
-You can launch `CometChatCallButtons` directly using `Navigator.push`, or you can define it as a widget within the `build` method of your `State` class.
-
-##### 1. Using Navigator to Launch `CometChatCallButtons`
-
-
-
-```dart
-Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatCallButtons()));
-```
-
-
-
-
-
-##### 2. Embedding `CometChatCallButtons` as a Widget in the build Method
-
```dart
-import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';
+import 'package:cometchat_chat_uikit/cometchat_calls_uikit.dart';
import 'package:flutter/material.dart';
class CallButtonsExample extends StatefulWidget {
@@ -80,232 +29,104 @@ class _CallButtonsExampleState extends State {
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
- child: Center(
- child: CometChatCallButtons()
- )
+ child: Center(child: CometChatCallButtons()),
),
);
}
}
```
-
-
***
### Actions
-[Actions](/ui-kit/flutter/components-overview#actions) dictate how a widget functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the widget to fit your specific needs.
-
##### onError
-You can customize this behavior by using the provided code snippet to override the `onError` and improve error handling.
-
```dart
CometChatCallButtons(
onError: (e) {
- // TODO("Not yet implemented")
+ // Handle error
},
)
```
-
-
***
-### Filters
-
-**Filters** allow you to customize the data displayed in a list within a Widget. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK.
-
-The CallButton widget does not have any exposed filters.
-
-***
-
### Events
-[Events](/ui-kit/flutter/components-overview#events) are emitted by a `Widget`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.
-
-Events emitted by the Call buttons widget are as follows.
-
-| Event | Description |
-| ------------------ | -------------------------------------------- |
-| **ccCallAccepted** | Triggers when the outgoing call is accepted. |
-| **ccCallRejected** | Triggers when the outgoing call is rejected. |
+| Event | Description |
+|---|---|
+| ccCallAccepted | Triggers when the outgoing call is accepted |
+| ccCallRejected | Triggers when the outgoing call is rejected |
```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:flutter/material.dart';
-
-class YourScreen extends StatefulWidget {
- const YourScreen({super.key});
-
- @override
- State createState() => _YourScreenState();
-}
-
class _YourScreenState extends State with CometChatCallEventListener {
-
@override
void initState() {
super.initState();
- CometChatCallEvents.addCallEventsListener("unique_listener_ID", this); // Add the listener
+ CometChatCallEvents.addCallEventsListener("unique_listener_ID", this);
}
@override
- void dispose(){
+ void dispose() {
super.dispose();
- CometChatCallEvents.removeCallEventsListener("unique_listener_ID"); // Remove the listener
+ CometChatCallEvents.removeCallEventsListener("unique_listener_ID");
}
@override
void ccCallAccepted(Call call) {
- // TODO("Not yet implemented")
+ // Handle call accepted
}
@override
void ccCallRejected(Call call) {
- // TODO("Not yet implemented")
+ // Handle call rejected
}
-
- @override
- Widget build(BuildContext context) {
- return const Placeholder();
- }
-
}
```
-
-
***
## Customization
-To fit your app's design requirements, you can customize the appearance of the conversation widget. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.
-
### Style
-You can customize the appearance of the `CometChatCallButtons` Widget by applying the `CometChatCallButtonsStyle` to it using the following code snippet.
-
```dart
CometChatCallButtons(
callButtonsStyle: CometChatCallButtonsStyle(
- voiceCallIconColor: Color(0xFF6852D6),
- videoCallIconColor: Color(0xFF6852D6),
- voiceCallButtonColor: Color(0xFFEDEAFA),
- videoCallButtonColor: Color(0xFFEDEAFA),
- voiceCallButtonBorderRadius: BorderRadius.circular(12.5),
- videoCallButtonBorderRadius: BorderRadius.circular(12.5),
- videoCallButtonBorder: BorderSide(
- color: Color(0xFFE8E8E8),
- width: 1,
- ),
- voiceCallButtonBorder: BorderSide(
- color: Color(0xFFE8E8E8),
- width: 1,
- ),
- )
+ voiceCallIconColor: Color(0xFF6852D6),
+ videoCallIconColor: Color(0xFF6852D6),
+ voiceCallButtonColor: Color(0xFFEDEAFA),
+ videoCallButtonColor: Color(0xFFEDEAFA),
+ voiceCallButtonBorderRadius: BorderRadius.circular(12.5),
+ videoCallButtonBorderRadius: BorderRadius.circular(12.5),
+ ),
)
```
-
-
-***
-
### Functionality
-These are a set of small functional customizations that allow you to fine-tune the overall experience of the widget. With these, you can change text, set custom icons, and toggle the visibility of UI elements.
-
-**Example**
-
-Here is the example for reference:
-
-
-
-```dart
-CometChatCallButtons(
- hideVideoCallButton: true,
-)
-```
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-Below is a list of customizations along with corresponding code snippets
-
-| **Property** | Description | Code |
-| ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- |
-| **User** | Used to set User object to the call button. | `user: User?` |
-| **Group** | Used to set Group object to the call button. | `group: Group?` |
-| **CallSettingsBuilder** | Sets the call settings builder callback function. This callback is responsible for configuring the call settings based on the user, group, and call type (audio/video). | `callSettingsBuilder: CallSettingsBuilder?` |
-| **Hide Video Call** | Hides the video call button. | `hideVideoCallButton: bool?` |
-| **Hide Voice Call** | Hides the voice call button. | `hideVoiceCallButton: bool?` |
-| **Video Call Icon** | Sets the icon for the video call button. | `videoCallIcon: Icon?` |
-| **Voice Call Icon** | Sets the icon for the voice call button. | `voiceCallIcon: Icon?` |
-| **outgoingCallConfiguration** | Sets the configurations for outgoing call component. | `outgoingCallConfiguration: CometChatOutgoingCallConfiguration?` |
-
-***
-
-### Advanced
-
-For advanced-level customization, you can set custom views to the widget. This lets you tailor each aspect of the widget to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the widget.
-
-The `CometChatCallButtons` widget does not provide additional functionalities beyond this level of customization.
-
-***
-
-## Configurations
-
-Configurations offer the ability to customize the properties of each individual component within a Composite Component.
-
-* `Configurations` expose properties that are available in its individual components.
-
-***
-
-### Outgoing Call
-
-You can customize the properties of the `Outgoing Call` component by making use of the `OutgoingCallConfiguration`. You can accomplish this by employing the `OutgoingCallConfiguration` as demonstrated below:
-
-
-
-```dart
-CometChatCallButtons(
- outgoingCallConfiguration: CometChatOutgoingCallConfiguration(),
-)
-```
-
-
-
-
-
-All exposed properties of OutgoingCallConfiguration can be found under `Outgoing Call`.
-
-***
+| Property | Description | Code |
+|---|---|---|
+| User | Set User object | `user: User?` |
+| Group | Set Group object | `group: Group?` |
+| CallSettingsBuilder | Configure call settings | `callSettingsBuilder: CallSettingsBuilder?` |
+| Hide Video Call | Hide video call button | `hideVideoCallButton: bool?` |
+| Hide Voice Call | Hide voice call button | `hideVoiceCallButton: bool?` |
+| Video Call Icon | Custom video call icon | `videoCallIcon: Icon?` |
+| Voice Call Icon | Custom voice call icon | `voiceCallIcon: Icon?` |
+| Outgoing Call Configuration | Configure outgoing call | `outgoingCallConfiguration: CometChatOutgoingCallConfiguration?` |
diff --git a/ui-kit/flutter/call-features.mdx b/ui-kit/flutter/call-features.mdx
index b8d6142bd..9cdb0685b 100644
--- a/ui-kit/flutter/call-features.mdx
+++ b/ui-kit/flutter/call-features.mdx
@@ -1,73 +1,174 @@
---
-title: "Call Features"
-sidebarTitle: "Calls"
-description: "Integrate one-on-one and group audio/video calling capabilities into your Flutter app with CometChat UI Kit"
+title: "Call"
+description: "Integrate CometChat Flutter UI Kit calling with one-on-one and group audio/video calls, setup, initialization, and call events."
---
-
+## Overview
-| Field | Value |
-| --- | --- |
-| Packages | `cometchat_chat_uikit` + `cometchat_calls_uikit` (add to `pubspec.yaml`) |
-| Required setup | `CometChatUIKit.init(uiKitSettings: UIKitSettings)` then `CometChatUIKit.login(uid)` — Calls SDK must also be installed |
-| Call features | Incoming Call, Outgoing Call, Call Logs, Call Buttons |
-| Key components | `CometChatCallButtons` → [Call Buttons](/ui-kit/flutter/call-buttons), `CometChatIncomingCall` → [Incoming Call](/ui-kit/flutter/incoming-call), `CometChatOutgoingCall` → [Outgoing Call](/ui-kit/flutter/outgoing-call), `CometChatCallLogs` → [Call Logs](/ui-kit/flutter/call-logs) |
-| Auto-detection | UI Kit automatically detects the Calls SDK and enables call UI components |
-| Requirements | minSdkVersion 24 (Android), iOS 12+ |
+CometChat's Calls feature allows you to integrate one-on-one and group audio/video calling capabilities into your application. In V6, calling is built into the `cometchat_chat_uikit` package — no separate calls dependency needed.
-
-
-CometChat's Calls feature is an advanced functionality that allows you to seamlessly integrate one-on-one as well as group audio and video calling capabilities into your application. This document provides a technical overview of these features, as implemented in the Flutter UI Kit.
+## Integration
-
-If you haven't set up calling yet, follow the [Calling Integration](/ui-kit/flutter/calling-integration) guide first.
-
+### Step 1: Add Dependency
+
+Since V6 is hosted on Cloudsmith, install via CLI:
+
+
+
+```bash
+dart pub add cometchat_chat_uikit:6.0.0 --hosted-url https://dart.cloudsmith.io/cometchat/cometchat/
+```
+
+
+
+Or add manually to `pubspec.yaml`:
+
+
+
+```yaml
+dependencies:
+ cometchat_chat_uikit:
+ hosted: https://dart.cloudsmith.io/cometchat/cometchat/
+ version: 6.0.0
+```
+
+
+
+***
+
+### Step 2: Update build.gradle
+
+Set `minSdkVersion` to at least 24 in `android/app/build.gradle`:
+
+
+
+```gradle
+defaultConfig {
+ minSdkVersion 24
+ targetSdkVersion flutter.targetSdkVersion
+ versionCode flutterVersionCode.toInteger()
+ versionName flutterVersionName
+}
+```
+
+
+
+***
+
+### Step 3: Update iOS Podfile
+
+In `ios/Podfile`, set the minimum iOS version to 12:
+
+```
+platform :ios, '12.0'
+```
+
+***
+
+### Step 4: Modify UIKitSettings
+
+Activate calling features by setting `enableCalls` to `true` in UIKitSettings:
+
+
+
+```dart
+UIKitSettings uiKitSettings = (UIKitSettingsBuilder()
+ ..subscriptionType = CometChatSubscriptionType.allUsers
+ ..autoEstablishSocketConnection = true
+ ..region = "REGION"
+ ..appId = "APP_ID"
+ ..authKey = "AUTH_KEY"
+ ..enableCalls = true
+ ..callingConfiguration = CallingConfiguration()
+).build();
+
+CometChatUIKit.init(uiKitSettings: uiKitSettings,
+ onSuccess: (successMessage) {},
+ onError: (e) {},
+);
+```
+
+
+
+To allow launching the Incoming Call screen from any widget, provide the navigator key:
+
+
+
+```dart
+MaterialApp(
+ navigatorKey: CallNavigationContext.navigatorKey,
+ home: YourHomeScreen(),
+)
+```
+
+
+
+### Listeners
+
+Register call listeners for top-level widgets:
+
+
+
+```dart
+class _YourClassNameState extends State with CallListener {
+ @override
+ void initState() {
+ super.initState();
+ CometChat.addCallListener(listenerId, this);
+ }
+
+ @override
+ void dispose() {
+ super.dispose();
+ CometChat.removeCallListener(listenerId);
+ }
+
+ @override
+ void onIncomingCallReceived(Call call) {
+ debugPrint("onIncomingCallReceived");
+ }
+
+ @override
+ void onOutgoingCallAccepted(Call call) {
+ debugPrint("onOutgoingCallAccepted");
+ }
+
+ @override
+ void onOutgoingCallRejected(Call call) {
+ debugPrint("onOutgoingCallRejected");
+ }
+
+ @override
+ void onIncomingCallCancelled(Call call) {
+ debugPrint("onIncomingCallCancelled");
+ }
+
+ @override
+ void onCallEndedMessageReceived(Call call) {
+ debugPrint("onCallEndedMessageReceived");
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return const Placeholder();
+ }
+}
+```
+
+
+
+***
## Features
### Incoming Call
-The [Incoming Call](/ui-kit/flutter/incoming-call) widget of the CometChat UI Kit provides the functionality that lets users receive real-time audio and video calls in the app.
-
-When a call is made to a user, the Incoming Call widget triggers and displays a call screen. This call screen typically displays the caller information and provides the user with options to either accept or reject the incoming call.
-
-
- 
-
+The Incoming Call widget lets users receive real-time audio and video calls. When a call is received, it displays caller information with accept/reject options.
### Outgoing Call
-The [Outgoing Call](/ui-kit/flutter/outgoing-call) widget of the CometChat UI Kit is designed to manage the outgoing call process within your application. When a user initiates an audio or video call to another user or group, this widget displays an outgoing call screen, showcasing information about the recipient and the call status.
-
-Importantly, the Outgoing Call widget is smartly designed to transition automatically into the ongoing call screen once the receiver accepts the call. This ensures a smooth flow from initiating the call to engaging in a conversation, without any additional steps required from the user.
-
-
- 
-
+The Outgoing Call widget manages the outgoing call process. It displays recipient information and call status, and automatically transitions to the ongoing call screen when accepted.
### Call Logs
-[Call Logs](/ui-kit/flutter/call-logs) widget provides you with the records call events such as who called who, the time of the call, and the duration of the call. This information can be fetched from the CometChat server and displayed in a structured format for users to view their past call activities.
-
-
- 
-
-
----
-
-## Next Steps
-
-
-
- Add audio and video call buttons to your chat interface
-
-
- Handle and display incoming call screens
-
-
- Manage outgoing call screens and transitions
-
-
- Display call history and records
-
-
+The [Call Logs](/ui-kit/flutter/call-logs) widget displays records of call events including caller, time, and duration.
diff --git a/ui-kit/flutter/call-logs.mdx b/ui-kit/flutter/call-logs.mdx
index 416573888..ffadbb1d0 100644
--- a/ui-kit/flutter/call-logs.mdx
+++ b/ui-kit/flutter/call-logs.mdx
@@ -1,103 +1,65 @@
---
title: "Call Logs"
-description: "Widget that shows the list of Call Logs available with filtering, call-back actions, and custom views."
+description: "Show CometChat Flutter UI Kit call logs with audio/video status, missed calls, timestamps, pagination, and call actions."
---
-
-```json
-{
- "component": "CometChatCallLogs",
- "package": "cometchat_calls_uikit",
- "import": "import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';",
- "description": "Widget that shows the list of Call Logs available with filtering, call-back actions, and custom views.",
- "props": {
- "data": {
- "callLogsRequestBuilder": { "type": "CallLogRequestBuilder?", "default": "null" },
- "callLogsBuilderProtocol": { "type": "CallLogsBuilderProtocol?", "default": "null" }
- },
- "callbacks": {
- "onItemClick": "Function(CallLog callLog)?",
- "onItemLongPress": "Function(CallLog callLog)?",
- "onCallLogIconClicked": "Function(CallLog callLog)?",
- "onBack": "VoidCallback?",
- "onError": "OnError?",
- "onLoad": "OnLoad?",
- "onEmpty": "OnEmpty?"
- },
- "visibility": {
- "hideAppbar": { "type": "bool?", "default": "false" },
- "showBackButton": { "type": "bool?", "default": "true" }
- },
- "viewSlots": {
- "listItemView": "Widget? Function(CallLog callLog, BuildContext context)?",
- "subTitleView": "Widget? Function(CallLog callLog, BuildContext context)?",
- "trailingView": "Function(BuildContext context, CallLog callLog)?",
- "leadingStateView": "Widget? Function(BuildContext, CallLog)?",
- "titleView": "Widget? Function(BuildContext, CallLog)?",
- "backButton": "Widget?",
- "emptyStateView": "WidgetBuilder?",
- "errorStateView": "WidgetBuilder?",
- "loadingStateView": "WidgetBuilder?"
- },
- "style": {
- "callLogsStyle": "CometChatCallLogsStyle?"
- },
- "icons": {
- "audioCallIcon": "Widget?",
- "videoCallIcon": "Widget?",
- "incomingCallIcon": "Widget?",
- "outgoingCallIcon": "Widget?",
- "missedCallIcon": "Widget?"
- },
- "formatting": {
- "datePattern": "String?",
- "dateSeparatorPattern": "String?"
- }
- }
-}
-```
-
-
-## Overview
-`CometChatCallLogs` is a [Widget](/ui-kit/flutter/components-overview#components) that shows the list of Call Logs available. By default, names are shown for all listed users, along with their avatars if available.
+`CometChatCallLogs` renders a scrollable list of call history with call type indicators (audio/video), call status (incoming/outgoing/missed), timestamps, and pagination support.
-The `CometChatCallLogs` widget is composed of the following BaseWidgets:
+The `CometChatCallLogs` widget is composed of the following base widgets:
-| Widgets | Description |
-| --------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [CometChatListBase](/ui-kit/flutter/components-overview) | `CometChatListBase` is a container widget featuring a title, customizable background options, and a dedicated list widget for seamless integration within your application's interface. |
-| [CometChatListItem](/ui-kit/flutter/components-overview) | This widget displays data retrieved from a CallLog object on a card, presenting a title and subtitle. |
+| Widget | Description |
+|---|---|
+| CometChatListBase | Container widget with title, background options, and list integration |
+| CometChatListItem | Displays call log data on a card with title and subtitle |
-## Usage
+---
+
+## Where It Fits
-### Integration
+`CometChatCallLogs` is a list component. It renders call history and emits the selected `CallLog` via `onItemClick`. Wire it to a detail screen or use `onCallLogIconClicked` to initiate a call directly from the log.
+
+
+
+```dart
+CometChatCallLogs(
+ onItemClick: (callLog) {
+ // Navigate to call log details or open chat
+ Navigator.push(
+ context,
+ MaterialPageRoute(
+ builder: (context) => CometChatCallLogDetails(callLog: callLog),
+ ),
+ );
+ },
+)
+```
+
+
-`CometChatCallLogs` being a wrapper widget, offers versatility in its integration. It can be seamlessly launched via button clicks or any user-triggered action, enhancing the overall user experience and facilitating smoother interactions within the application.
+---
-You can launch `CometChatCallLogs` directly using `Navigator.push`, or you can define it as a widget within the `build` method of your `State` class.
+## Quick Start
-##### 1. Using Navigator to Launch `CometChatCallLogs`
+Using Navigator:
```dart
-Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatCallLogs()));
+Navigator.push(context, MaterialPageRoute(builder: (context) => const CometChatCallLogs()));
```
-
-
-##### 2. Embedding `CometChatCallLogs` as a Widget in the build Method
+Embedding as a widget:
```dart
-import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';
+import 'package:cometchat_chat_uikit/cometchat_calls_uikit.dart';
import 'package:flutter/material.dart';
class CallLogsExample extends StatefulWidget {
@@ -108,769 +70,523 @@ class CallLogsExample extends StatefulWidget {
}
class _CallLogsExampleState extends State {
-
@override
Widget build(BuildContext context) {
return const Scaffold(
- body: SafeArea(
- child: CometChatCallLogs(),
- ),
+ body: SafeArea(child: CometChatCallLogs()),
);
}
}
```
-
+
+
+Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()`, a user logged in, and the Calls UIKit dependency added. See [Call Features](/ui-kit/flutter/call-features) for setup.
+
+---
+## Filtering Call Logs
+
+Pass a `CallLogRequestBuilder` to control what loads:
+
+
+
+```dart
+CometChatCallLogs(
+ callLogsRequestBuilder: CallLogRequestBuilder()
+ ..limit = 10
+ ..hasRecording = true,
+)
+```
+
-***
+### Filter Recipes
+
+| Recipe | Builder property |
+|---|---|
+| Limit per page | `..limit = 10` |
+| Audio calls only | `..callType = "audio"` |
+| Video calls only | `..callType = "video"` |
+| Missed calls only | `..callStatus = "missed"` |
+| Incoming calls only | `..callDirection = "incoming"` |
+| Outgoing calls only | `..callDirection = "outgoing"` |
+| Calls with recording | `..hasRecording = true` |
+| Calls for specific user | `..uid = "user_uid"` |
+| Calls for specific group | `..guid = "group_guid"` |
+| Call category (call/meet) | `..callCategory = "call"` |
+
+### Filter Properties
+
+| Property | Type | Description |
+|---|---|---|
+| `authToken` | `String?` | Authentication token |
+| `callCategory` | `String?` | Category: `"call"` or `"meet"` |
+| `callDirection` | `String?` | Direction: `"incoming"` or `"outgoing"` |
+| `callStatus` | `String?` | Status: `"ongoing"`, `"busy"`, `"rejected"`, `"cancelled"`, `"ended"`, `"missed"`, `"initiated"`, `"unanswered"` |
+| `callType` | `String?` | Type: `"audio"`, `"video"`, or `"audio/video"` |
+| `guid` | `String?` | Group ID filter |
+| `hasRecording` | `bool` | Filter calls with recordings |
+| `limit` | `int` | Max results per request |
+| `uid` | `String?` | User ID filter |
-### Actions
+---
-[Actions](/ui-kit/flutter/components-overview#actions) dictate how a widget functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the widget to fit your specific needs.
+## Actions and Events
-##### onItemClick
+### Callback Methods
-This method proves valuable when users seek to override the `onItemClick` functionality within CometChatCallLogs, empowering them with greater control and customization options.
+#### `onItemClick`
-The `onItemClick` action function invoked when a call log item is clicked, typically used to open a detailed chat screen.
+Fires when a call log item is tapped. Primary navigation hook.
```dart
CometChatCallLogs(
onItemClick: (callLog) {
- // TODO("Not yet implemented")
+ // Navigate to call details or chat
},
)
```
-
-
-***
+#### `onItemLongPress`
-##### onItemLongPress
-
-Function executed when a callLog item is long-pressed, allowing additional actions like delete or select.
+Fires when a call log item is long-pressed, allowing additional actions.
```dart
CometChatCallLogs(
onItemLongPress: (CallLog callLog) {
- // TODO("Not yet implemented")
+ // Show context menu
},
)
```
-
-
-***
-
-##### onBack
+#### `onBack`
-`onBack` is triggered when you press the back button in the app bar. It has a predefined behavior; when clicked, it navigates to the previous activity. However, you can override this action using the following code snippet.
+Fires when the user presses the back button in the app bar.
```dart
CometChatCallLogs(
onBack: () {
- // TODO("Not yet implemented")
+ Navigator.pop(context);
},
)
```
-
-
-***
+#### `onError`
-##### OnError
-
-This action doesn't change the behavior of the component but rather listens for any errors that occur in the callLogs component.
+Fires on internal errors (network failure, SDK exception).
```dart
CometChatCallLogs(
onError: (e) {
- // TODO("Not yet implemented")
+ debugPrint("Error: ${e.message}");
},
)
```
-
-
-***
+#### `onLoad`
-##### onLoad
-
-Invoked when the list is successfully fetched and loaded, helping track component readiness.
+Fires when the list is successfully fetched and loaded.
```dart
CometChatCallLogs(
onLoad: (list) {
- // print("Call Logs: $list");
- },
+ debugPrint("Loaded ${list.length} call logs");
+ },
)
```
-
-
-***
+#### `onEmpty`
-##### onEmpty
-
-Called when the list is empty, enabling custom handling such as showing a placeholder message.
+Fires when the list is empty after loading.
```dart
CometChatCallLogs(
- onEmpty: () {
- // Handle empty call logs
- },
+ onEmpty: () {
+ debugPrint("No call logs found");
+ },
)
```
-
-
-***
+#### `onCallLogIconClicked`
-##### onCallLogIconClicked
-
-You can customize this behavior by using the provided code snippet to override the `onCallLogIconClicked` and improve error handling.
+Fires when the call icon on a call log item is tapped, typically used to initiate a call back.
```dart
CometChatCallLogs(
onCallLogIconClicked: (CallLog callLog) {
- // TODO("Not yet implemented")
+ // Initiate call back to this contact
},
)
```
-
-
-***
-
-### Filters
-
-**Filters** allow you to customize the data displayed in a list within a Widget. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK.
-
-##### 1. CallLogRequestBuilder
+### Events
-The [CallLogRequestBuilder](/sdk/flutter/call-logs) enables you to filter and customize the call list based on available parameters in CallLogRequestBuilder. This feature allows you to create more specific and targeted queries during the call. The following are the parameters available in [CallLogRequestBuilder](/sdk/flutter/call-logs)
+The `CometChatCallLogs` widget does not emit global events.
-**Example**
+---
-In the example below, we are applying a filter based on the limit and have a call recording.
+## Functionality
+
+| Property | Type | Default | Description |
+|---|---|---|---|
+| `showBackButton` | `bool?` | `true` | Toggle back button visibility |
+| `hideAppbar` | `bool?` | `false` | Toggle app bar visibility |
+| `backButton` | `Widget?` | `null` | Custom back button widget |
+| `datePattern` | `String?` | `null` | Format pattern for date display |
+| `dateSeparatorPattern` | `String?` | `null` | Format pattern for date separator |
+| `hideSeparator` | `bool` | `false` | Hide separator between items |
+| `emptyStateText` | `String?` | `null` | Text for empty state |
+| `errorStateText` | `String?` | `null` | Text for error state |
+| `incomingAudioCallIcon` | `Icon?` | `null` | Custom icon for incoming audio calls |
+| `incomingVideoCallIcon` | `Icon?` | `null` | Custom icon for incoming video calls |
+| `outgoingAudioCallIcon` | `Icon?` | `null` | Custom icon for outgoing audio calls |
+| `outgoingVideoCallIcon` | `Icon?` | `null` | Custom icon for outgoing video calls |
+| `missedAudioCallIcon` | `Icon?` | `null` | Custom icon for missed audio calls |
+| `missedVideoCallIcon` | `Icon?` | `null` | Custom icon for missed video calls |
+| `infoIconUrl` | `String?` | `null` | URL for the info icon |
+| `loadingIconUrl` | `String?` | `null` | URL for the loading icon |
+
+**Example — custom back button:**
```dart
CometChatCallLogs(
- callLogsRequestBuilder: CallLogRequestBuilder()
- ..limit = 10
- ..hasRecording = true,
+ backButton: Icon(Icons.arrow_back_ios, color: Color(0xFF6851D6)),
)
```
-
-
-List of properties exposed by `CallLogRequestBuilder`
-
-| **Property** | Description | Code |
-| ------------------ | ----------------------------------------------------------- | ------------------------ |
-| **Auth Token** | Sets the authentication token. | `authToken: String?` |
-| **Call Category** | Sets the category of the call. | `callCategory: String?` |
-| **Call Direction** | Sets the direction of the call. | `callDirection: String?` |
-| **Call Status** | Sets the status of the call. | `callStatus: String?` |
-| **Call Type** | Sets the type of the call. | `callType: String?` |
-| **Guid** | Sets the unique ID of the group involved in the call. | `guid: String?` |
-| **Has Recording** | Indicates if the call has a recording. | `hasRecording: bool` |
-| **Limit** | Sets the maximum number of call logs to return per request. | `limit: int` |
-| **Uid** | Sets the unique ID of the user involved in the call. | `uid: String?` |
-
-***
-
-### Events
-
-[Events](/ui-kit/flutter/components-overview#events) are emitted by a `Widget`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.
-
-The `CometChatCallLogs` widget does not have any exposed events.
-
-***
+
+
-## Customization
+---
-To fit your app's design requirements, you can customize the appearance of the conversation widget. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.
+## Custom View Slots
-### Style
+### List Item View
-You can customize the appearance of the `CometChatCallLogs` Widget by applying the `CometChatCallLogsStyle` to it using the following code snippet.
+Replace the entire list item row with a custom widget.
```dart
CometChatCallLogs(
- callLogsStyle: CometChatCallLogsStyle(
- titleTextColor: Color(0xFFF76808),
- separatorColor: Color(0xFFF76808),
- avatarStyle: CometChatAvatarStyle(
- borderRadius: BorderRadius.circular(8),
- backgroundColor: Color(0xFFFBAA75),
+ listItemView: (callLog, context) {
+ final status = getCallStatus(context, callLog, CometChatUIKit.loggedInUser);
+ IconData icon = Icons.call;
+ Color? color;
+ Color? textColor;
+
+ if (status == "Incoming Call") {
+ icon = Icons.phone_callback_rounded;
+ color = Color(0xFF6852D6);
+ } else if (status == "Outgoing Call") {
+ icon = Icons.phone_forwarded;
+ color = Color(0xFF6852D6);
+ } else if (status == "Missed Call") {
+ icon = Icons.phone_missed;
+ color = Colors.red;
+ textColor = Colors.red;
+ }
+
+ String name = _getCallLogName(callLog);
+ String formattedDate = DateFormat('d MMM, hh:mm a').format(
+ DateTime.fromMillisecondsSinceEpoch((callLog.initiatedAt ?? 0) * 1000),
+ );
+
+ return ListTile(
+ leading: CircleAvatar(
+ backgroundColor: Color(0xFFEDEAFA),
+ child: Icon(icon, color: color, size: 24),
),
- ),
+ title: Text(name, style: TextStyle(
+ fontSize: 16, fontWeight: FontWeight.w500,
+ color: textColor ?? Color(0xFF141414),
+ )),
+ subtitle: Text(status, style: TextStyle(
+ color: Color(0xFF727272), fontSize: 14,
+ )),
+ trailing: Text(formattedDate, style: TextStyle(
+ color: Color(0xFF727272), fontSize: 14,
+ )),
+ );
+ },
)
```
-
+
+```dart
+static String getCallStatus(BuildContext context, CallLog callLog, User? loggedInUser) {
+ String callMessageText = "";
+ if (callLog.receiverType == ReceiverTypeConstants.user) {
+ CallUser initiator = callLog.initiator as CallUser;
+ bool isMe = initiator.uid == loggedInUser?.uid;
+ switch (callLog.status) {
+ case CallStatusConstants.initiated:
+ callMessageText = isMe ? "Outgoing Call" : "Incoming Call";
+ break;
+ case CallStatusConstants.ongoing:
+ callMessageText = "Call Accepted";
+ break;
+ case CallStatusConstants.ended:
+ callMessageText = "Call Ended";
+ break;
+ case CallStatusConstants.unanswered:
+ case CallStatusConstants.cancelled:
+ case CallStatusConstants.rejected:
+ case CallStatusConstants.busy:
+ callMessageText = isMe ? "Call ${callLog.status}" : "Missed Call";
+ break;
+ }
+ }
+ return callMessageText;
+}
+```
+
- 
+ 
-***
+### Title View
-### Functionality
-
-These are a set of small functional customizations that allow you to fine-tune the overall experience of the widget. With these, you can change text, set custom icons, and toggle the visibility of UI elements.
-
-| **Methods** | Description | Code |
-| ------------------ | --------------------------------------------------------- | ------------------------------ |
-| **showBackButton** | Used to toggle visibility for back button in the app bar. | `setBackIconVisibility: bool?` |
-| **hideAppbar** | Used to toggle visibility for back button in the app bar. | `hideAppbar: bool?` |
-
-***
+Replace the caller name / title text.
```dart
CometChatCallLogs(
- backButton: Icon(Icons.add_alert, color: Color(0xFF6851D6)),
+ titleView: (callLog, context) {
+ return Text(
+ _getCallLogName(callLog),
+ style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
+ );
+ },
)
```
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-Below is a list of customizations along with corresponding code snippets
-
-| **Property** | **Description** | **Code** |
-| ----------------------------- | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- |
-| **Back Button** | A widget for the back button. | `backButton: Widget?` |
-| **Call Logs Request Builder** | Builder for creating call log requests. | `callLogsRequestBuilder: CallLogRequestBuilder?` |
-| **Date Pattern** | Format pattern for date display. | `datePattern: String?` |
-| **Date Separator Pattern** | Format pattern for date separator. | `dateSeparatorPattern: String?` |
-| **Empty State Text** | Text to display when there are no call logs. | `emptyStateText: String?` |
-| **Error State Text** | Text to display when there is an error. | `errorStateText: String?` |
-| **Hide Separator** | Whether to hide the separator between call logs. | `hideSeparator: bool` |
-| **Incoming Audio Call Icon** | Icon for incoming audio calls. | `incomingAudioCallIcon: Icon?` |
-| **Incoming Video Call Icon** | Icon for incoming video calls. | `incomingVideoCallIcon: Icon?` |
-| **Info Icon Url** | URL for the info icon. | `infoIconUrl: String?` |
-| **Loading Icon Url** | URL for the loading icon. | `loadingIconUrl: String?` |
-| **Missed Audio Call Icon** | Icon for missed audio calls. | `missedAudioCallIcon: Icon?` |
-| **Missed Video Call Icon** | Icon for missed video calls. | `missedVideoCallIcon: Icon?` |
-| **Outgoing Audio Call Icon** | Icon for outgoing audio calls. | `outgoingAudioCallIcon: Icon?` |
-| **Outgoing Video Call Icon** | Icon for outgoing video calls. | `outgoingVideoCallIcon: Icon?` |
-| **Set Options** | Set List of actions available on the long press of list item . | `setOptions: List? Function(Group group,CometChatGroupsController controller, BuildContext context)?` |
-| **Add Options** | adds into the current List of actions available on the long press of list item | `addOptions: List? Function(Group group,CometChatGroupsController controller, BuildContext context)?` |
-
-***
-
-### Advanced
-
-For advanced-level customization, you can set custom widgets to the widget. This lets you tailor each aspect of the widget to fit your exact needs and application aesthetics. You can create and define your widgets, layouts, and UI elements and then incorporate those into the widget.
-
-#### setOptions
-
-Defines the available actions users can perform on a call log entry, such as deleting, marking as spam, or calling back.
+### Leading View
-**Use Cases:**
-
-* Provide quick call-back options.
-* Allow users to block a number.
-* Enable deleting multiple call logs.
+Replace the avatar / left section.
```dart
CometChatCallLogs(
- setOptions: (callLog, controller, context) {
- // Set options for call log
- },
+ leadingView: (callLog, context) {
+ return CircleAvatar(
+ backgroundColor: Color(0xFFEDEAFA),
+ child: Icon(Icons.call, color: Color(0xFF6852D6)),
+ );
+ },
)
```
-
-
-***
+### Subtitle View
-#### addOptions
-
-Adds custom actions to the existing call log options.
-
-**Use Cases:**
-
-* Add favorite/star call log option.
-* Add favorite/star call log option.
-* Provide an archive feature.
+Replace the call status text below the name.
```dart
CometChatCallLogs(
- addOptions: (callLog, controller, context) {
- // Set options for call log
- },
+ subTitleView: (callLog, context) {
+ return Row(
+ children: [
+ _getCallIcon(callLog, CometChatUIKit.loggedInUser),
+ SizedBox(width: 4),
+ Text(
+ getCallStatus(context, callLog, CometChatUIKit.loggedInUser),
+ style: TextStyle(color: Color(0xFF727272), fontSize: 14),
+ ),
+ ],
+ );
+ },
)
```
-
-
+
+```dart
+static Widget _getCallIcon(CallLog callLog, User? loggedInUser) {
+ bool isMe = (callLog.initiator as CallUser?)?.uid == loggedInUser?.uid;
+
+ Widget incoming = Icon(Icons.call_received_outlined, color: Colors.red, size: 16);
+ Widget outgoing = Icon(Icons.call_made_outlined, color: Color(0xFF09C26F), size: 16);
+ Widget missed = Icon(Icons.call_received_outlined, color: Colors.red, size: 16);
+
+ switch (callLog.status) {
+ case CallStatusConstants.initiated:
+ case CallStatusConstants.ongoing:
+ case CallStatusConstants.ended:
+ return isMe ? outgoing : incoming;
+ case CallStatusConstants.unanswered:
+ case CallStatusConstants.cancelled:
+ case CallStatusConstants.rejected:
+ case CallStatusConstants.busy:
+ return isMe ? outgoing : missed;
+ default:
+ return const SizedBox();
+ }
+}
+```
+
-***
-
-#### ListItemView
-
-With this property, you can assign a custom ListItem to the Call Logs Widget.
+
+ 
+
-**Example**
+### Trailing View
-Here is the complete example for reference:
+Replace the timestamp / right section.
```dart
- CometChatCallLogs(
- listItemView: (callLog, context) {
- final status =
- getCallStatus(context, callLog, CometChatUIKit.loggedInUser);
- IconData icon = Icons.call;
- Color? color;
- Color? textColor;
- if (status == "Incoming Call") {
- icon = Icons.phone_callback_rounded;
- color = Color(0xFF6852D6);
- } else if (status == "Outgoing Call") {
- icon = Icons.phone_forwarded;
- color = Color(0xFF6852D6);
- } else if (status == "Missed Call") {
- icon = Icons.phone_missed;
- color = Colors.red;
- textColor = Colors.red;
- }
-
- String name = "";
-
- if (CometChatUIKit.loggedInUser != null) {
- if (callLog.initiator is CallUser && callLog.receiver is CallUser) {
- CallUser callUserInitiator = callLog.initiator as CallUser;
- CallUser callUserReceiver = callLog.receiver as CallUser;
- if (CometChatUIKit.loggedInUser?.uid == callUserInitiator.uid) {
- name = callUserReceiver.name ?? "";
- } else {
- name = callUserInitiator.name ?? "";
- }
- } else if (callLog.initiator is CallUser &&
- callLog.receiver is CallGroup) {
- CallUser callUserInitiator = callLog.initiator as CallUser;
- CallGroup callGroupReceiver = callLog.receiver as CallGroup;
- if (CometChatUIKit.loggedInUser?.uid == callUserInitiator.uid) {
- name = callGroupReceiver.name ?? "";
- } else {
- name = callUserInitiator.name ?? "";
- }
- }
- }
-
- //TODO: import DateFormat from intl package
- String formattedDate = DateFormat('d MMM, hh:mm a').format(
- DateTime.fromMillisecondsSinceEpoch(
- (callLog.initiatedAt ?? 0) * 1000));
-
- return ListTile(
- leading: CircleAvatar(
- backgroundColor: Color(0xFFEDEAFA),
- child: Icon(
- icon,
- color: color,
- size: 24,
- ),
- ),
- title: Text(
- name,
- style: TextStyle(
- fontSize: 16,
- fontWeight: FontWeight.w500,
- color: textColor ?? Color(0xFF141414),
- letterSpacing: 0),
- ),
- subtitle: Text(
- status,
- style: TextStyle(
- color: Color(0xFF727272),
- fontSize: 14,
- fontWeight: FontWeight.w400,
- letterSpacing: 0),
- ),
- trailing: Text(
- formattedDate,
- style: TextStyle(
- color: Color(0xFF727272),
- fontSize: 14,
- fontWeight: FontWeight.w400,
- letterSpacing: 0),
- ),
- );
- },
+CometChatCallLogs(
+ trailingView: (context, callLog) {
+ String formattedDate = DateFormat('d MMM, hh:mm a').format(
+ DateTime.fromMillisecondsSinceEpoch((callLog.initiatedAt ?? 0) * 1000),
);
+ return Text(
+ formattedDate,
+ style: TextStyle(color: Color(0xFF727272), fontSize: 14),
+ );
+ },
+)
```
-
-
-
-
-```dart
- /// Returns the call status message.
- static String getCallStatus(
- BuildContext context, CallLog callLog, User? loggedInUser) {
- String callMessageText = "";
- //check if the message is a call message and the receiver type is user
- if (callLog.receiverType == ReceiverTypeConstants.user) {
- CallUser initiator = callLog.initiator as CallUser;
- //check if the call is initiated
- if (callLog.status == CallStatusConstants.initiated) {
- //check if the logged in user is the initiator
- if (!isLoggedInUser(initiator, loggedInUser)) {
- callMessageText = "Incoming Call";
- } else {
- callMessageText = "Outgoing Call";
- }
- } else if (callLog.status == CallStatusConstants.ongoing) {
- callMessageText = "Call Accepted";
- } else if (callLog.status == CallStatusConstants.ended) {
- callMessageText = "Call Ended";
- } else if (callLog.status == CallStatusConstants.unanswered) {
- if (isLoggedInUser(initiator, loggedInUser)) {
- callMessageText = "Call Unanswered";
- } else {
- callMessageText = "Missed Call";
- }
- } else if (callLog.status == CallStatusConstants.cancelled) {
- if (isLoggedInUser(initiator, loggedInUser)) {
- callMessageText = "Call Cancelled";
- } else {
- callMessageText = "Missed Call";
- }
- } else if (callLog.status == CallStatusConstants.rejected) {
- if (isLoggedInUser(initiator, loggedInUser)) {
- callMessageText = "Call Rejected";
- } else {
- callMessageText = "Missed Call";
- }
- } else if (callLog.status == CallStatusConstants.busy) {
- if (isLoggedInUser(initiator, loggedInUser)) {
- callMessageText = "Call Rejected";
- } else {
- callMessageText = "Missed Call";
- }
- }
- }
- return callMessageText;
- }
-
- /// Returns true if the call is initiated by the logged in user.
- static bool isLoggedInUser(CallUser? initiator, User? loggedInUser) {
- if (initiator == null || loggedInUser == null) {
- return false;
- } else {
- return initiator.uid == loggedInUser.uid;
- }
- }
-```
-
-
-
+ 
-***
-
-#### TitleView
-
-Allows setting a custom title view, typically used for the caller’s name or number.
-
-**Use Cases:**
-
-* Display caller’s full name.
-* Show a business label for saved contacts.
-* Use bold text for unknown numbers.
-
-***
-
-#### LeadingView
-
-Customizes the leading view, usually the caller’s avatar or profile picture.
-
-**Use Cases:**
-
-* Display a profile picture.
-* Show a call type icon (missed, received, dialed).
-* Indicate call status (e.g., missed calls in red).
-
-***
-
-#### SubtitleView
-
-You can customize the subtitle widget for each call logs item to meet your requirements
-
-**Example**
-
-Here is the complete example for reference:
+### State Views
```dart
CometChatCallLogs(
- subTitleView: (callLog, context) {
- return Row(
- children: [
- getCallIcon(context, callLog, CometChatUIKit.loggedInUser),
- Text(
- getCallStatus(context, callLog, CometChatUIKit.loggedInUser),
- style: TextStyle(
- color: Color(0xFF727272),
- fontSize: 14,
- fontWeight: FontWeight.w400,
- letterSpacing: 0),
- )
- ],
- );
- },
- );
+ emptyStateView: (context) => Center(child: Text("No call logs yet")),
+ errorStateView: (context) => Center(child: Text("Something went wrong")),
+ loadingStateView: (context) => Center(child: CircularProgressIndicator()),
+)
```
-
+
-
-```dart
- /// [getCallIcon] Return call status icon
- static Widget getCallIcon(
- BuildContext context, CallLog callLog, User? loggedInUser) {
- bool isInitiatedByUser =
- CallUtils.callLogLoggedInUser(callLog, loggedInUser);
-
- // Define default icons if not provided
- Widget incoming = Icon(
- Icons.call_received_outlined,
- color: Colors.red,
- size: 16,
- );
-
- Widget outgoing = Icon(
- Icons.call_made_outlined,
- color: Color(0xFF09C26F),
- size: 16,
- );
-
- Widget missed = Icon(
- Icons.call_received_outlined,
- color: Colors.red,
- size: 16,
- );
-
- // Helper function to select icon based on initiator and call type
- Widget selectIcon(bool isInitiatedByUser) {
- return isInitiatedByUser ? outgoing : incoming;
- }
-
- // Switch on call status to determine the appropriate icon
- switch (callLog.status) {
- case CallStatusConstants.initiated:
- case CallStatusConstants.ongoing:
- case CallStatusConstants.ended:
- return selectIcon(isInitiatedByUser);
-
- case CallStatusConstants.unanswered:
- case CallStatusConstants.cancelled:
- case CallStatusConstants.rejected:
- case CallStatusConstants.busy:
- return isInitiatedByUser ? outgoing : missed;
-
- default:
- return const SizedBox(); // Return empty widget for unknown statuses
- }
- }
-```
+---
-
+## Menu Options
-
+
+
```dart
- /// Returns the call status message.
- static String getCallStatus(
- BuildContext context, CallLog callLog, User? loggedInUser) {
- String callMessageText = "";
- //check if the message is a call message and the receiver type is user
- if (callLog.receiverType == ReceiverTypeConstants.user) {
- CallUser initiator = callLog.initiator as CallUser;
- //check if the call is initiated
- if (callLog.status == CallStatusConstants.initiated) {
- //check if the logged in user is the initiator
- if (!isLoggedInUser(initiator, loggedInUser)) {
- callMessageText = "Incoming Call";
- } else {
- callMessageText = "Outgoing Call";
- }
- } else if (callLog.status == CallStatusConstants.ongoing) {
- callMessageText = "Call Accepted";
- } else if (callLog.status == CallStatusConstants.ended) {
- callMessageText = "Call Ended";
- } else if (callLog.status == CallStatusConstants.unanswered) {
- if (isLoggedInUser(initiator, loggedInUser)) {
- callMessageText = "Call Unanswered";
- } else {
- callMessageText = "Missed Call";
- }
- } else if (callLog.status == CallStatusConstants.cancelled) {
- if (isLoggedInUser(initiator, loggedInUser)) {
- callMessageText = "Call Cancelled";
- } else {
- callMessageText = "Missed Call";
- }
- } else if (callLog.status == CallStatusConstants.rejected) {
- if (isLoggedInUser(initiator, loggedInUser)) {
- callMessageText = "Call Rejected";
- } else {
- callMessageText = "Missed Call";
- }
- } else if (callLog.status == CallStatusConstants.busy) {
- if (isLoggedInUser(initiator, loggedInUser)) {
- callMessageText = "Call Rejected";
- } else {
- callMessageText = "Missed Call";
- }
- }
- }
- return callMessageText;
- }
+// Replace all options
+CometChatCallLogs(
+ setOptions: (callLog, controller, context) {
+ return [
+ CometChatOption(
+ id: "callback",
+ iconWidget: Icon(Icons.call),
+ title: "Call Back",
+ onClick: () {
+ // Initiate call back
+ },
+ ),
+ ];
+ },
+)
- /// Returns true if the call is initiated by the logged in user.
- static bool isLoggedInUser(CallUser? initiator, User? loggedInUser) {
- if (initiator == null || loggedInUser == null) {
- return false;
- } else {
- return initiator.uid == loggedInUser.uid;
- }
- }
+// Append to defaults
+CometChatCallLogs(
+ addOptions: (callLog, controller, context) {
+ return [
+ CometChatOption(
+ id: "block",
+ iconWidget: Icon(Icons.block),
+ title: "Block Number",
+ onClick: () {
+ // Block this contact
+ },
+ ),
+ ];
+ },
+)
```
-
-
-
-
-
-
-***
-
-#### TrailingView
-
-You can customize the tail widget for each call logs item to meet your requirements
-
-**Example**
+---
-Here is the complete example for reference:
+## Style
```dart
CometChatCallLogs(
- trailingView: (context, callLog) {
- String formattedDate = DateFormat('d MMM, hh:mm a').format(
- DateTime.fromMillisecondsSinceEpoch(
- (callLog.initiatedAt ?? 0) * 1000));
- return Text(
- formattedDate,
- style: TextStyle(
- color: Color(0xFF727272),
- fontSize: 14,
- fontWeight: FontWeight.w400,
- letterSpacing: 0),
- );
- },
+ callLogsStyle: CometChatCallLogsStyle(
+ titleTextColor: Color(0xFFF76808),
+ separatorColor: Color(0xFFF76808),
+ avatarStyle: CometChatAvatarStyle(
+ borderRadius: BorderRadius.circular(8),
+ backgroundColor: Color(0xFFFBAA75),
+ ),
+ ),
)
```
-
-
-
+
-***
+---
## Configurations
-[Configurations](/ui-kit/flutter/components-overview#configurations) offer the ability to customize the properties of each widget within a Composite Widget.
-
-`CometChatCallLogs` has `CometChatOutgoingCall` widget. Hence, each of these widgets will have its individual \`Configuration\`\`.
-
-* `Configurations` expose properties that are available in its individual widgets.
-
-#### Outgoing Call
+### Outgoing Call
-You can customize the properties of the OutGoing Call widget by making use of the `OutgoingCallConfiguration`. You can accomplish this by employing the `outgoingCallConfiguration` props as demonstrated below:
-
-**Example**
-
-Here is the complete example for reference:
+Customize the outgoing call component that appears when a call is initiated from a call log:
@@ -880,28 +596,33 @@ CometChatCallLogs(
subtitle: "Outgoing Call",
outgoingCallStyle: OutgoingCallStyle(
background: Color(0xFFE4EBF5),
- )
+ ),
),
)
```
-
-
-
-
-
-
-
-
-
-
-
+All exposed properties of `OutgoingCallConfiguration` can be found under [Outgoing Call](/ui-kit/flutter/outgoing-call).
-All exposed properties of `OutgoingCallConfiguration` can be found under [OutGoing Call](/ui-kit/flutter/outgoing-call#functionality). Properties marked with the 🛑 symbol are not accessible within the Configuration Object.
+---
-***
+## Next Steps
+
+
+
+ Build a call log details screen
+
+
+ Add voice and video call buttons
+
+
+ Detailed styling reference
+
+
+ Browse recent conversations
+
+
diff --git a/ui-kit/flutter/color-resources.mdx b/ui-kit/flutter/color-resources.mdx
index 4ec539b47..b62d81066 100644
--- a/ui-kit/flutter/color-resources.mdx
+++ b/ui-kit/flutter/color-resources.mdx
@@ -1,128 +1,25 @@
---
title: "Color Resources"
-sidebarTitle: "Color Resources"
-description: "Complete reference for CometChatColorPalette tokens in Flutter UI Kit."
+description: "Customize the CometChat Flutter UI Kit theme with palettes for light mode, dark mode, backgrounds, text, borders, icons, and buttons."
---
-
+## Introducing CometChatColorPalette
-| Field | Value |
-| --- | --- |
-| Class | `CometChatColorPalette` |
-| Usage | `ThemeData(extensions: [CometChatColorPalette(...)])` |
-| Categories | Primary, Neutral, Alert, Text, Icon, Border, Background, Button, Shimmer |
-| Light mode | Use light color values |
-| Dark mode | Use dark color values |
-| Source | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/shared_uikit/lib/src/theme/colors) |
+The `CometChatColorPalette` class allows you to customize the colors used throughout your app. It works the same way in V6 as in V5 — you assign it to the `extensions` property of your `ThemeData`.
-
+Here's what you can customize:
-`CometChatColorPalette` controls all colors in the UI Kit. Apply it via `ThemeData.extensions`.
+* Primary Colors — Main color scheme of your app
+* Neutral Colors — Balanced base for visuals
+* Alert Colors — Informative, warning, success, and error messages
+* Background Colors — Background shades for different areas
+* Text Colors — Text element colors for readability
+* Border Colors — Borders for buttons and cards
+* Icon Colors — App icon colors
+* Button Colors — Button background and text colors
+* Shimmer Colors — Loading animation colors
----
-
-## Complete Token Reference
-
-### Primary Colors
-
-| Token | Description |
-| --- | --- |
-| `primary` | Main accent color |
-| `extendedPrimary50` | 96% lighter (light) / 80% darker (dark) |
-| `extendedPrimary100` | 88% lighter (light) / 72% darker (dark) |
-| `extendedPrimary200` | 77% lighter (light) / 64% darker (dark) |
-| `extendedPrimary300` | 66% lighter (light) / 56% darker (dark) |
-| `extendedPrimary400` | 55% lighter (light) / 48% darker (dark) |
-| `extendedPrimary500` | 44% lighter (light) / 40% darker (dark) |
-| `extendedPrimary600` | 33% lighter (light) / 32% darker (dark) |
-| `extendedPrimary700` | 22% lighter (light) / 24% darker (dark) |
-| `extendedPrimary800` | 11% lighter (light) / 16% darker (dark) |
-| `extendedPrimary900` | 11% lighter (light) / 8% darker (dark) |
-
-### Neutral Colors
-
-| Token | Description |
-| --- | --- |
-| `neutral50` - `neutral900` | Surface and background shades (50, 100, 200, 300, 400, 500, 600, 700, 800, 900) |
-
-### Alert Colors
-
-| Token | Description |
-| --- | --- |
-| `info` | Information indicator |
-| `warning` | Warning indicator |
-| `error` | Error indicator |
-| `success` | Success indicator |
-| `error100` | Light/dark mode error shade |
-
-### Text Colors
-
-| Token | Description |
-| --- | --- |
-| `textPrimary` | Primary text |
-| `textSecondary` | Secondary text |
-| `textTertiary` | Tertiary text |
-| `textDisabled` | Disabled text |
-| `textWhite` | White text |
-| `textHighlight` | Highlighted text |
-
-### Icon Colors
-
-| Token | Description |
-| --- | --- |
-| `iconPrimary` | Primary icon |
-| `iconSecondary` | Secondary icon |
-| `iconTertiary` | Tertiary icon |
-| `iconWhite` | White icon |
-| `iconHighlight` | Highlighted icon |
-
-### Border Colors
-
-| Token | Description |
-| --- | --- |
-| `borderLight` | Light border |
-| `borderDefault` | Default border |
-| `borderDark` | Dark border |
-| `borderHighlight` | Highlighted border |
-
-### Background Colors
-
-| Token | Description |
-| --- | --- |
-| `background1` | Primary background |
-| `background2` | Secondary background |
-| `background3` | Tertiary background |
-| `background4` | Quaternary background |
-
-### Button Colors
-
-| Token | Description |
-| --- | --- |
-| `buttonBackground` | Primary button background |
-| `secondaryButtonBackground` | Secondary button background |
-| `buttonIconColor` | Primary button icon |
-| `buttonText` | Primary button text |
-| `secondaryButtonIcon` | Secondary button icon |
-| `secondaryButtonText` | Secondary button text |
-
-### Other
-
-| Token | Description |
-| --- | --- |
-| `shimmerBackground` | Shimmer effect background |
-| `shimmerGradient` | Shimmer effect gradient |
-| `messageSeen` | Read receipt indicator |
-| `white` | White color |
-| `black` | Black color |
-| `transparent` | Transparent color |
-
----
-
-## Light Mode
-
-
- 
-
+### Light Mode
@@ -130,21 +27,21 @@ description: "Complete reference for CometChatColorPalette tokens in Flutter UI
ThemeData(
extensions: [
CometChatColorPalette(
- primary: Color(0xFF6852D6),
- textPrimary: Color(0xFF141414),
textSecondary: Color(0xFF727272),
background1: Color(0xFFFFFFFF),
+ textPrimary: Color(0xFF141414),
borderLight: Color(0xFFF5F5F5),
borderDark: Color(0xFFDCDCDC),
iconSecondary: Color(0xFFA1A1A1),
- iconHighlight: Color(0xFF6852D6),
success: Color(0xFF09C26F),
- warning: Color(0xFFFAAB00),
+ iconHighlight: Color(0xFF6852D6),
extendedPrimary500: Color(0xFFAA9EE8),
+ warning: Color(0xFFFAAB00),
messageSeen: Color(0xFF56E8A7),
- neutral300: Color(0xFFE8E8E8),
- neutral600: Color(0xFF727272),
neutral900: Color(0xFF141414),
+ neutral600: Color(0xFF727272),
+ neutral300: Color(0xFFE8E8E8),
+ primary: Color(0xFF6852D6),
),
],
)
@@ -152,13 +49,7 @@ ThemeData(
----
-
-## Dark Mode
-
-
- 
-
+### Dark Mode
@@ -166,20 +57,20 @@ ThemeData(
ThemeData(
extensions: [
CometChatColorPalette(
- primary: Color(0xFF6852D6),
- textPrimary: Color(0xFFFFFFFF),
textSecondary: Color(0xFF989898),
background1: Color(0xFF1A1A1A),
+ textPrimary: Color(0xFFFFFFFF),
borderLight: Color(0xFF272727),
iconSecondary: Color(0xFF858585),
- iconHighlight: Color(0xFF6852D6),
success: Color(0xFF0B9F5D),
- warning: Color(0xFFD08D04),
+ iconHighlight: Color(0xFF6852D6),
extendedPrimary500: Color(0xFF3E3180),
+ warning: Color(0xFFD08D04),
messageSeen: Color(0xFF56E8A7),
- neutral300: Color(0xFF383838),
- neutral600: Color(0xFF989898),
neutral900: Color(0xFFFFFFFF),
+ neutral600: Color(0xFF989898),
+ neutral300: Color(0xFF383838),
+ primary: Color(0xFF6852D6),
),
],
)
@@ -187,13 +78,7 @@ ThemeData(
----
-
-## Custom Brand Colors
-
-
- 
-
+### Custom Colors
@@ -201,20 +86,21 @@ ThemeData(
ThemeData(
extensions: [
CometChatColorPalette(
- primary: Color(0xFFF76808),
- iconHighlight: Color(0xFFF76808),
- extendedPrimary500: Color(0xFFFBAA75),
- textPrimary: Color(0xFF141414),
textSecondary: Color(0xFF727272),
background1: Color(0xFFFFFFFF),
+ textPrimary: Color(0xFF141414),
borderLight: Color(0xFFF5F5F5),
borderDark: Color(0xFFDCDCDC),
+ iconSecondary: Color(0xFFA1A1A1),
success: Color(0xFF09C26F),
+ iconHighlight: Color(0xFFF76808),
+ extendedPrimary500: Color(0xFFFBAA75),
warning: Color(0xFFFAAB00),
messageSeen: Color(0xFF56E8A7),
- neutral300: Color(0xFFE8E8E8),
- neutral600: Color(0xFF727272),
neutral900: Color(0xFF141414),
+ neutral600: Color(0xFF727272),
+ neutral300: Color(0xFFE8E8E8),
+ primary: Color(0xFFF76808),
),
],
)
diff --git a/ui-kit/flutter/component-styling.mdx b/ui-kit/flutter/component-styling.mdx
index c3fd79f62..3ab8b94d7 100644
--- a/ui-kit/flutter/component-styling.mdx
+++ b/ui-kit/flutter/component-styling.mdx
@@ -1,39 +1,127 @@
---
title: "Component Styling"
sidebarTitle: "Component Styling"
-description: "Style individual CometChat Flutter UI Kit components using ThemeExtensions."
+description: "Style CometChat Flutter UI Kit components with ThemeData extensions, component-level style objects, message bubbles, and call UI."
---
-
+The Flutter UI Kit uses `ThemeExtension` for styling. You can apply styles globally via `ThemeData` or pass style objects directly to components.
-| Field | Value |
-| --- | --- |
-| Method | Add component style classes to `ThemeData.extensions` |
-| Components | Conversations, MessageList, MessageComposer, MessageHeader, Users, Groups, GroupMembers |
-| Base components | Avatar, Badge, StatusIndicator, Receipts, Reactions, ReactionList, MediaRecorder |
-| AI components | ConversationStarter, ConversationSummary, SmartReplies, AIOptionSheet, AIAssistantChatHistory |
-| Option sheets | MessageOptionSheet, AttachmentOptionSheet, AIOptionSheet |
-| Pattern | `CometChatStyle` classes |
-| Source | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/chat_uikit) |
+## Two Approaches
-
+### 1. Global Theming via ThemeData
-Style individual components by adding their style classes to `ThemeData.extensions`.
+Apply styles across your entire app by adding `ThemeExtension` objects to your `MaterialApp` theme:
+
+
+
+```dart
+MaterialApp(
+ theme: ThemeData(
+ extensions: [
+ CometChatOutgoingMessageBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ ),
+ CometChatIncomingMessageBubbleStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ ),
+ CometChatActionBubbleStyle(
+ textStyle: TextStyle(color: Color(0xFFF76808)),
+ backgroundColor: Color(0xFFFEEDE1),
+ ),
+ ],
+ ),
+ home: YourApp(),
+)
+```
+
+
+
+### 2. Component-Level Styles
+
+Pass style objects directly to a component. These override global theme values:
+
+
+
+```dart
+CometChatMessageList(
+ user: user,
+ style: CometChatMessageListStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ ),
+ incomingMessageBubbleStyle: CometChatIncomingMessageBubbleStyle(
+ backgroundColor: Colors.white,
+ ),
+ ),
+)
+```
+
+
+
+## Style Precedence
+
+```
+Component style prop > ThemeData extension > Default theme
+```
---
-## Main Components
+## Style Classes by Component
-### Conversations
+| Component | Style Class |
+|---|---|
+| `CometChatConversations` | `CometChatConversationsStyle` |
+| `CometChatUsers` | `CometChatUsersStyle` |
+| `CometChatGroups` | `CometChatGroupsStyle` |
+| `CometChatGroupMembers` | `CometChatGroupMembersStyle` |
+| `CometChatMessageList` | `CometChatMessageListStyle` |
+| `CometChatMessageComposer` | `CometChatMessageComposerStyle` |
+| `CometChatMessageHeader` | `CometChatMessageHeaderStyle` |
+
+## Message Bubble Styles
+
+The message list style contains nested styles for incoming and outgoing bubbles:
+
+
+
+```dart
+CometChatMessageListStyle(
+ outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
+ textBubbleStyle: CometChatTextBubbleStyle(...),
+ imageBubbleStyle: CometChatImageBubbleStyle(...),
+ videoBubbleStyle: CometChatVideoBubbleStyle(...),
+ audioBubbleStyle: CometChatAudioBubbleStyle(...),
+ fileBubbleStyle: CometChatFileBubbleStyle(...),
+ deletedBubbleStyle: CometChatDeletedBubbleStyle(...),
+ pollsBubbleStyle: CometChatPollsBubbleStyle(...),
+ stickerBubbleStyle: CometChatStickerBubbleStyle(...),
+ collaborativeWhiteboardBubbleStyle: CometChatCollaborativeBubbleStyle(...),
+ collaborativeDocumentBubbleStyle: CometChatCollaborativeBubbleStyle(...),
+ linkPreviewBubbleStyle: CometChatLinkPreviewBubbleStyle(...),
+ videoCallBubbleStyle: CometChatCallBubbleStyle(...),
+ ),
+ incomingMessageBubbleStyle: CometChatIncomingMessageBubbleStyle(
+ // Same nested style structure
+ ),
+)
+```
+
+
-
- 
-
+See [Message Bubble Styling](/ui-kit/flutter/message-bubble-styling) for per-bubble-type examples.
+
+---
+
+## Component Style Examples
+
+### Conversations
```dart
ThemeData(
+ fontFamily: 'Times New Roman',
extensions: [
CometChatConversationsStyle(
avatarStyle: CometChatAvatarStyle(
@@ -52,10 +140,6 @@ ThemeData(
### Message List
-
- 
-
-
```dart
@@ -75,10 +159,6 @@ ThemeData(
### Message Composer
-
- 
-
-
```dart
@@ -97,10 +177,6 @@ ThemeData(
### Message Header
-
- 
-
-
```dart
@@ -111,10 +187,6 @@ ThemeData(
backgroundColor: Color(0xFFFBAA75),
borderRadius: BorderRadius.circular(6.67),
),
- callButtonsStyle: CometChatCallButtonsStyle(
- voiceCallIconColor: Color(0xFFF76808),
- videoCallIconColor: Color(0xFFF76808),
- ),
),
],
)
@@ -124,10 +196,6 @@ ThemeData(
### Users
-
- 
-
-
```dart
@@ -150,10 +218,6 @@ ThemeData(
### Groups
-
- 
-
-
```dart
@@ -192,9 +256,6 @@ ThemeData(
adminMemberScopeBackgroundColor: Color(0xFFFEEDE1),
adminMemberScopeBorder: Border.all(color: Color(0xFFF76808)),
adminMemberScopeTextColor: Color(0xFFF76808),
- moderatorMemberScopeBackgroundColor: Color(0xFFFEEDE1),
- moderatorMemberScopeTextColor: Color(0xFFF76808),
- backIconColor: Color(0xFFF76808),
),
],
)
@@ -202,39 +263,41 @@ ThemeData(
----
-
-## Base Components
-
-### Avatar
-
-
- 
-
+### AI Assistant Chat History
```dart
-CometChatAvatarStyle(
- borderRadius: BorderRadius.circular(8),
- backgroundColor: Color(0xFFFBAA75),
+final ccColor = CometChatThemeHelper.getColorPalette(context);
+CometChatAIAssistantChatHistory(
+ user: user,
+ style: CometChatAIAssistantChatHistoryStyle(
+ backgroundColor: const Color(0xFFFFFAF6),
+ headerBackgroundColor: const Color(0xFFFFFAF6),
+ headerTitleTextColor: ccColor.textPrimary,
+ ),
)
```
-### Badge
+---
+
+## Base Component Styles
-
- 
-
+
+### Avatar
```dart
-CometChatBadgeStyle(
- borderRadius: BorderRadius.circular(4),
- backgroundColor: Color(0xFFF44649),
+ThemeData(
+ extensions: [
+ CometChatAvatarStyle(
+ borderRadius: BorderRadius.circular(8),
+ backgroundColor: Color(0xFFFBAA75),
+ ),
+ ],
)
```
@@ -242,96 +305,100 @@ CometChatBadgeStyle(
### Status Indicator
-
- 
-
-
```dart
-CometChatStatusIndicatorStyle(
- backgroundColor: Color(0xFFFFAB00),
- borderRadius: BorderRadius.circular(2),
+ThemeData(
+ extensions: [
+ CometChatStatusIndicatorStyle(
+ backgroundColor: Color(0xFFFFAB00),
+ borderRadius: BorderRadius.circular(2),
+ ),
+ ],
)
```
-### Receipts
-
-
- 
-
+### Badge
```dart
-CometChatMessageReceiptStyle(
- readIconColor: Color(0xFFFFAB00),
+ThemeData(
+ extensions: [
+ CometChatBadgeStyle(
+ borderRadius: BorderRadius.circular(4),
+ backgroundColor: Color(0xFFF44649),
+ ),
+ ],
)
```
-### Reactions
-
-
- 
-
+### Receipts
```dart
-CometChatReactionsStyle(
- borderRadius: BorderRadius.circular(8),
+ThemeData(
+ extensions: [
+ CometChatMessageReceiptStyle(
+ readIconColor: Color(0xFFFFAB00),
+ ),
+ ],
)
```
-### Reaction List
+### Media Recorder
```dart
-CometChatReactionListStyle(
- activeTabTextColor: Color(0xFFF76808),
- activeTabIndicatorColor: Color(0xFFF76808),
+ThemeData(
+ extensions: [
+ CometChatMediaRecorderStyle(
+ recordIndicatorBackgroundColor: Color(0xFFF44649),
+ recordIndicatorBorderRadius: BorderRadius.circular(20),
+ pauseButtonBorderRadius: BorderRadius.circular(8),
+ deleteButtonBorderRadius: BorderRadius.circular(8),
+ stopButtonBorderRadius: BorderRadius.circular(8),
+ ),
+ ],
)
```
-### Media Recorder
+### Reactions
```dart
-CometChatMediaRecorderStyle(
- recordIndicatorBackgroundColor: Color(0xFFF44649),
- recordIndicatorBorderRadius: BorderRadius.circular(20),
- pauseButtonBorderRadius: BorderRadius.circular(8),
- deleteButtonBorderRadius: BorderRadius.circular(8),
- stopButtonBorderRadius: BorderRadius.circular(8),
+ThemeData(
+ extensions: [
+ CometChatReactionsStyle(
+ borderRadius: BorderRadius.circular(8),
+ ),
+ ],
)
```
----
-
-## Option Sheets
-
-### Message Option Sheet
+### Reaction List
```dart
ThemeData(
extensions: [
- CometChatMessageOptionSheetStyle(
- backgroundColor: Color(0xFFFEEDE1),
- iconColor: Color(0xFFF76808),
+ CometChatReactionListStyle(
+ activeTabTextColor: Color(0xFFF76808),
+ activeTabIndicatorColor: Color(0xFFF76808),
),
],
)
@@ -339,16 +406,16 @@ ThemeData(
-### Attachment Option Sheet
+### Conversation Starter
```dart
ThemeData(
extensions: [
- CometChatAttachmentOptionSheetStyle(
+ CometChatAIConversationStarterStyle(
backgroundColor: Color(0xFFFEEDE1),
- iconColor: Color(0xFFF76808),
+ border: Border.all(color: Color(0xFFFBBB90)),
),
],
)
@@ -356,21 +423,16 @@ ThemeData(
-### Message Information
+### Conversation Summary
```dart
ThemeData(
extensions: [
- CometChatOutgoingMessageBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- ),
- CometChatMessageInformationStyle(
- backgroundHighLightColor: Color(0xFFFEEDE1),
- messageReceiptStyle: CometChatMessageReceiptStyle(
- readIconColor: Color(0xFFF76808),
- ),
+ CometChatAIConversationSummaryStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ titleStyle: TextStyle(color: Color(0xFFF76808)),
),
],
)
@@ -378,18 +440,18 @@ ThemeData(
-### Mentions
+### Smart Replies
```dart
ThemeData(
extensions: [
- CometChatMentionsStyle(
- mentionSelfTextBackgroundColor: Color(0xFFF76808),
- mentionTextBackgroundColor: Colors.white,
- mentionTextColor: Colors.black,
- mentionSelfTextColor: Colors.white,
+ CometChatAISmartRepliesStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ titleStyle: TextStyle(color: Color(0xFFF76808)),
+ itemBackgroundColor: Color(0xFFFFF9F5),
+ itemBorder: Border.all(color: Color(0xFFFBBB90)),
),
],
)
@@ -397,54 +459,58 @@ ThemeData(
----
-
-## AI Components
-
-### Conversation Starter
-
-
- 
-
+### Message Information
```dart
-CometChatAIConversationStarterStyle(
- backgroundColor: Color(0xFFFEEDE1),
- border: Border.all(color: Color(0xFFFBBB90)),
+ThemeData(
+ fontFamily: "Times New Roman",
+ extensions: [
+ CometChatOutgoingMessageBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ ),
+ CometChatMessageInformationStyle(
+ backgroundHighLightColor: Color(0xFFFEEDE1),
+ messageReceiptStyle: CometChatMessageReceiptStyle(
+ readIconColor: Color(0xFFF76808),
+ ),
+ ),
+ ],
)
```
-### Smart Replies
-
-
- 
-
+### Message Option Sheet
```dart
-CometChatAISmartRepliesStyle(
- backgroundColor: Color(0xFFFEEDE1),
- titleStyle: TextStyle(color: Color(0xFFF76808)),
- itemBackgroundColor: Color(0xFFFFF9F5),
- itemBorder: Border.all(color: Color(0xFFFBBB90)),
+ThemeData(
+ extensions: [
+ CometChatMessageOptionSheetStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ iconColor: Color(0xFFF76808),
+ ),
+ ],
)
```
-### Conversation Summary
+### Attachment Option Sheet
```dart
-CometChatAIConversationSummaryStyle(
- backgroundColor: Color(0xFFFEEDE1),
- titleStyle: TextStyle(color: Color(0xFFF76808)),
+ThemeData(
+ extensions: [
+ CometChatAttachmentOptionSheetStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ iconColor: Color(0xFFF76808),
+ ),
+ ],
)
```
@@ -455,36 +521,42 @@ CometChatAIConversationSummaryStyle(
```dart
-CometChatAiOptionSheetStyle(
- backgroundColor: Color(0xFFFFF9F5),
- iconColor: Color(0xFFF76808),
+ThemeData(
+ extensions: [
+ CometChatAiOptionSheetStyle(
+ backgroundColor: Color(0xFFFFF9F5),
+ iconColor: Color(0xFFF76808),
+ ),
+ ],
)
```
-### AI Assistant Chat History
+### Mentions
```dart
-final ccColor = CometChatThemeHelper.getColorPalette(context);
-
-CometChatAIAssistantChatHistory(
- user: user,
- style: CometChatAIAssistantChatHistoryStyle(
- backgroundColor: Color(0xFFFFFAF6),
- headerBackgroundColor: Color(0xFFFFFAF6),
- headerTitleTextColor: ccColor.textPrimary,
- newChatIconColor: ccColor.iconSecondary,
- newChatTextColor: ccColor.textPrimary,
- dateSeparatorStyle: CometChatDateStyle(
- textColor: ccColor.textTertiary,
- backgroundColor: Color(0xFFFFFAF6),
+ThemeData(
+ extensions: [
+ CometChatMentionsStyle(
+ mentionSelfTextBackgroundColor: Color(0xFFF76808),
+ mentionTextBackgroundColor: Colors.white,
+ mentionTextColor: Colors.black,
+ mentionSelfTextColor: Colors.white,
),
- itemTextColor: ccColor.textPrimary,
- ),
+ ],
)
```
+
+---
+
+## Related
+
+- [Message Bubble Styling](/ui-kit/flutter/message-bubble-styling) — Per-bubble-type style examples.
+- [Color Resources](/ui-kit/flutter/color-resources) — Color palette customization.
+- [Theme Introduction](/ui-kit/flutter/theme-introduction) — Theme system overview (ColorPalette, Typography, Spacing).
+- [Customization Overview](/ui-kit/flutter/customization-overview) — All customization categories.
diff --git a/ui-kit/flutter/components-overview.mdx b/ui-kit/flutter/components-overview.mdx
index c221df3d7..8ddefb3a4 100644
--- a/ui-kit/flutter/components-overview.mdx
+++ b/ui-kit/flutter/components-overview.mdx
@@ -1,257 +1,56 @@
---
title: "Overview"
-description: "Browse all prebuilt UI components in the CometChat Flutter UI Kit — conversations, messages, users, groups, search, and AI."
+description: "Explore CometChat Flutter UI Kit V6 widgets, base widgets, component architecture, actions, filters, styles, and customization."
---
-
-
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_chat_uikit` |
-| Required setup | `CometChatUIKit.init()` + `CometChatUIKit.login()` before rendering any component |
-| Callback actions | `on: (param) { }` |
-| Data filtering | `RequestBuilder: RequestBuilder()` |
-| Toggle features | `hide: true` or `show: true` |
-| Custom rendering | `View: (context, entity) => Widget` |
-| Style overrides | `style: CometChatStyle(...)` |
-
-
-
-## Architecture
-
-The UI Kit is a set of independent widgets that compose into chat layouts. A typical two-panel layout uses four core components:
-
-- **CometChatConversations** — sidebar listing recent conversations (users and groups)
-- **CometChatMessageHeader** — toolbar showing avatar, name, online status, and typing indicator
-- **CometChatMessageList** — scrollable message feed with reactions, receipts, and threads
-- **CometChatMessageComposer** — rich text input with attachments, mentions, and voice notes
-
-**Data flow**: selecting a conversation in CometChatConversations yields a `User` or `Group` object. That object is passed as a prop (`user` or `group`) to CometChatMessageHeader, CometChatMessageList, and CometChatMessageComposer. The message components use the SDK internally — CometChatMessageComposer sends messages, CometChatMessageList receives them via real-time listeners.
-
-```mermaid
-flowchart LR
- subgraph Sidebar
- A[CometChatConversations]
- end
-
- subgraph "Chat Panel"
- B[CometChatMessageHeader]
- C[CometChatMessageList]
- D[CometChatMessageComposer]
- end
-
- subgraph SDK
- E[CometChat SDK]
- end
-
- A -->|"User/Group object"| B
- A -->|"User/Group object"| C
- A -->|"User/Group object"| D
- D -->|"sendMessage()"| E
- E -->|"Real-time listeners"| C
-```
-
-Components communicate through a publish/subscribe event bus (`CometChatMessageEvents`, `CometChatConversationEvents`, `CometChatGroupEvents`, etc.). A component emits events that other components or application code can subscribe to without direct references. See [Events](/ui-kit/flutter/events) for the full list.
-
-```mermaid
-flowchart TB
- subgraph "Event Bus"
- E1[CometChatMessageEvents]
- E2[CometChatConversationEvents]
- E3[CometChatGroupEvents]
- end
-
- C1[Component A] -->|"emit"| E1
- E1 -->|"subscribe"| C2[Component B]
- E1 -->|"subscribe"| C3[App Code]
-
- C4[Component C] -->|"emit"| E2
- E2 -->|"subscribe"| C5[Component D]
-```
-
-Each component accepts callback props (`on`), view slot props (`View`) for replacing UI sections, `RequestBuilder` props for data filtering, and style class overrides via `CometChatStyle`.
-
----
+CometChat's **UI Kit V6** is a set of pre-built UI Widgets that allows you to easily craft an in-app chat with all the essential messaging features, built on clean architecture with BLoC state management.
## Type of Widget
-UI Widgets based on behavior and functionality can be categorized into three types: Base Widget, Widget, and Composite Widget.
+UI Widgets based on behaviour and functionality can be categorized into two types: Base Widget and Widget.
### Base Widget
-Base Widgets form the building blocks of your app's user interface (UI). They focus solely on presenting visual elements based on input data, without handling any business logic. These widgets provide the foundational appearance and behavior for your UI.
+Base Widgets form the building blocks of your app's user interface (UI). They focus solely on presenting visual elements based on input data, without handling any business logic. These Widgets provide the foundational appearance and behavior for your UI.
### Widget
-Widgets build upon Base Widgets by incorporating business logic. They not only render UI elements but also manage data loading, execute specific actions, and respond to events. This combination of visual presentation and functional capabilities makes Widgets essential for creating dynamic and interactive UIs.
-
-### Composite Widget
-
-Composite Widgets are advanced UI elements that combine multiple Widgets or other Composite Widgets to achieve complex functionality. By layering widgets together, Composite Widgets offer a sophisticated and flexible approach to designing UIs. They enable diverse functionalities and interactions, making them versatile tools for creating rich user experiences.
-
----
-
-## Component Catalog
-
-All components are imported from `cometchat_chat_uikit`.
-
-### Conversations and Lists
-
-| Component | Purpose | Key Props | Page |
-| --- | --- | --- | --- |
-| CometChatConversations | Scrollable list of recent conversations | `conversationsRequestBuilder`, `onItemTap`, `onError` | [Conversations](/ui-kit/flutter/conversations) |
-| CometChatUsers | Scrollable list of users | `usersRequestBuilder`, `onItemTap`, `onError` | [Users](/ui-kit/flutter/users) |
-| CometChatGroups | Scrollable list of groups | `groupsRequestBuilder`, `onItemTap`, `onError` | [Groups](/ui-kit/flutter/groups) |
-| CometChatGroupMembers | Scrollable list of group members | `group`, `groupMemberRequestBuilder`, `onItemTap` | [Group Members](/ui-kit/flutter/group-members) |
-
-### Messages
+Widgets build upon Base Widgets by incorporating business logic via BLoC pattern. They not only render UI elements but also manage data loading through use cases and repositories, execute specific actions, and respond to events. This combination of visual presentation and functional capabilities makes Widgets essential for creating dynamic and interactive UIs.
-| Component | Purpose | Key Props | Page |
-| --- | --- | --- | --- |
-| CometChatMessageHeader | Toolbar with avatar, name, status, typing indicator | `user`, `group`, `backButton`, `hideBackButton` | [Message Header](/ui-kit/flutter/message-header) |
-| CometChatMessageList | Scrollable message list with reactions, receipts, threads | `user`, `group`, `messagesRequestBuilder`, `scrollToBottomOnNewMessages` | [Message List](/ui-kit/flutter/message-list) |
-| CometChatMessageComposer | Rich text input with attachments, mentions, voice notes | `user`, `group`, `onSendButtonTap`, `placeholderText` | [Message Composer](/ui-kit/flutter/message-composer) |
-| CometChatCompactMessageComposer | Compact input with rich text formatting, inline voice recorder, attachments | `user`, `group`, `enterKeyBehavior`, `enableRichTextFormatting` | [Compact Message Composer](/ui-kit/flutter/compact-message-composer) |
-| CometChatMessageTemplate | Pre-defined structure for custom message bubbles | `type`, `category`, `contentView`, `headerView`, `footerView` | [Message Template](/ui-kit/flutter/message-template) |
-| CometChatThreadedHeader | Parent message bubble and reply count for threaded view | `parentMessage`, `onClose`, `hideReceipts` | [Threaded Header](/ui-kit/flutter/threaded-messages-header) |
+> **V6 Note:** V6 does not have Composite Widgets like `CometChatMessages` or `CometChatConversationsWithMessages`. Instead, you compose the UI yourself using individual Widgets (`CometChatMessageList`, `CometChatMessageComposer`, `CometChatMessageHeader`). This gives you full control over layout and behavior.
-### Search and AI
-
-| Component | Purpose | Key Props | Page |
-| --- | --- | --- | --- |
-| CometChatSearch | Real-time search input field | `onSearch`, `placeholder`, `style` | [Search](/ui-kit/flutter/search) |
-| CometChatAIAssistantChatHistory | AI assistant conversation history display | `user`, `group`, `style` | [AI Assistant Chat History](/ui-kit/flutter/ai-assistant-chat-history) |
-
-### Calling
-
-| Component | Purpose | Key Props | Page |
-| --- | --- | --- | --- |
-| CometChatCallButtons | Voice and video call initiation buttons | `user`, `group`, `hideVoiceCallButton`, `hideVideoCallButton` | [Call Buttons](/ui-kit/flutter/call-buttons) |
-| CometChatIncomingCall | Incoming call notification with accept/decline | `call`, `onAccept`, `onDecline` | [Incoming Call](/ui-kit/flutter/incoming-call) |
-| CometChatOutgoingCall | Outgoing call screen with cancel control | `call`, `user`, `onCancelled` | [Outgoing Call](/ui-kit/flutter/outgoing-call) |
-| CometChatCallLogs | Scrollable list of call history | `callLogsRequestBuilder`, `onItemClick` | [Call Logs](/ui-kit/flutter/call-logs) |
-
----
-
-## Component API Pattern
-
-All components share a consistent API surface.
-
-### Actions
-
-Actions control component behavior. They split into two categories:
-
-**Predefined Actions** are built into the component and execute automatically on user interaction (e.g., tapping send dispatches the message). No configuration needed.
-
-**User-Defined Actions** are callback props that fire on specific events. Override them to customize behavior:
-
-
-
-```dart
-CometChatMessageList(
- user: chatUser,
- onThreadRepliesClick: (message, context, {bubbleView}) {
- openThreadPanel(message);
- },
- onError: (error) {
- logError(error);
- },
-)
-```
-
-
-
-### Events
-
-Events enable decoupled communication between components. A component emits events that other parts of the application can subscribe to without direct references.
-
-
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+## Architecture
-// Subscribe to message sent events
-CometChatMessageEvents.onMessageSent.listen((message) {
- // react to sent message
-});
-```
-
-
+Each Widget in V6 follows clean architecture internally:
-Each component page documents its emitted events in the Events section.
+| Layer | Purpose | Example |
+|---|---|---|
+| `bloc/` | State management (events, states, BLoC) | `ConversationsBloc`, `ConversationsEvent`, `ConversationsState` |
+| `data/` | Data sources and repository implementations | `ConversationsRemoteDatasource`, `ConversationsRepositoryImpl` |
+| `domain/` | Use cases and repository interfaces | `GetConversationsUseCase`, `ConversationsRepository` |
+| `di/` | Dependency injection | `ConversationsServiceLocator` |
+| `widgets/` | Decomposed sub-widgets | `ConversationsList`, `ConversationsEmptyView` |
-### Filters
+## Actions
-List-based components accept `RequestBuilder` props to control which data loads:
+Actions direct the operational behavior of a component. They are split into two categories: Predefined Actions and User-Defined Actions.
-
-
-```dart
-CometChatMessageList(
- user: chatUser,
- messagesRequestBuilder: MessagesRequestBuilder()
- ..limit = 20,
-)
-```
-
-
+### Predefined Actions
-### Custom View Slots
+These are actions inherently programmed into a UI component. They execute automatically in response to user interaction, without needing any additional user input.
-Components expose named view slots to replace sections of the default UI:
+### User-Defined Actions
-
-
-```dart
-CometChatMessageHeader(
- user: chatUser,
- titleView: (context, user, group) => CustomTitle(),
- subtitleView: (context, user, group) => CustomSubtitle(),
- leadingView: (context, user, group) => CustomAvatar(),
-)
-```
-
-
+These are actions that must be explicitly specified by the user. They provide adaptability and allow for the creation of custom behaviors that align with the individual needs of the application.
-### Styling
+To customize the behavior of a component, actions must be overridden by the user. This provides the user with control over how the component responds to specific events or interactions.
-Every component accepts a style class for customization:
+## Events
-
-
-```dart
-CometChatMessageList(
- user: chatUser,
- style: CometChatMessageListStyle(
- backgroundColor: Colors.white,
- borderRadius: 8,
- ),
-)
-```
-
-
+Events allow for a decoupled, flexible architecture where different parts of the application can interact without having to directly reference each other. This makes it easier to create complex, interactive experiences, as well as to extend and customize the functionality provided by the CometChat UI Kit.
----
+Widgets have the ability to emit events. These events are dispatched in response to certain changes or user interactions within the component. By emitting events, these Widgets allow other parts of the application to react to changes or interactions, thus enabling dynamic and interactive behavior within the application.
## Configurations
-Configurations offer the ability to customize the properties of each individual component within a Composite Component. If a Composite Component includes multiple Widgets, each of these Widgets will have its own set of properties that can be configured. This means multiple sets of configurations are available, one for each constituent component. This allows for fine-tuned customization of the Composite Component, enabling you to tailor its behavior and appearance to match specific requirements in a granular manner.
-
----
-
-## Next Steps
-
-
-
- Set up the Flutter UI Kit in your project
-
-
- Customize colors, fonts, and styles
-
-
- Add-on features like polls, stickers, and translation
-
-
- Task-oriented tutorials for common patterns
-
-
+Configurations offer the ability to customize the properties of each individual component. Each Widget has its own set of properties that can be configured, allowing for fine-tuned customization to tailor behavior and appearance to match specific requirements in a granular manner.
diff --git a/ui-kit/flutter/conversations.mdx b/ui-kit/flutter/conversations.mdx
index 9f6b27290..bda98e431 100644
--- a/ui-kit/flutter/conversations.mdx
+++ b/ui-kit/flutter/conversations.mdx
@@ -1,358 +1,71 @@
---
title: "Conversations"
-description: "Scrollable list of recent one-on-one and group conversations for the logged-in user."
+description: "Display CometChat Flutter UI Kit conversations with real-time updates for messages, typing indicators, read receipts, and presence."
---
-
-```json
-{
- "component": "CometChatConversations",
- "package": "cometchat_chat_uikit",
- "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
- "description": "Scrollable list of recent one-on-one and group conversations for the logged-in user.",
- "primaryOutput": {
- "prop": "onItemTap",
- "type": "Function(Conversation conversation)"
- },
- "props": {
- "data": {
- "conversationsRequestBuilder": {
- "type": "ConversationsRequestBuilder?",
- "default": "SDK default (30 per page)",
- "note": "Pass the builder, not the result of .build()"
- },
- "conversationsProtocol": {
- "type": "ConversationsBuilderProtocol?",
- "default": "null",
- "note": "Custom protocol for fetching conversations"
- },
- "scrollController": {
- "type": "ScrollController?",
- "default": "null",
- "note": "Custom scroll controller for the list"
- },
- "title": {
- "type": "String?",
- "default": "Chats",
- "note": "Title text for the app bar"
- },
- "controllerTag": {
- "type": "String?",
- "default": "null",
- "note": "Tag for controller management"
- },
- "mentionAllLabel": {
- "type": "String?",
- "default": "null",
- "note": "Custom label for @all mentions"
- },
- "mentionAllLabelId": {
- "type": "String?",
- "default": "null",
- "note": "Custom label ID for @all mentions"
- }
- },
- "callbacks": {
- "onItemTap": "Function(Conversation conversation)?",
- "onItemLongPress": "Function(Conversation conversation)?",
- "onSelection": "Function(List? list)?",
- "onBack": "VoidCallback?",
- "onError": "OnError?",
- "onLoad": "OnLoad?",
- "onEmpty": "OnEmpty?",
- "onSearchTap": "GestureTapCallback?",
- "datePattern": "String Function(Conversation conversation)?",
- "dateTimeFormatterCallback": "DateTimeFormatterCallback?"
- },
- "visibility": {
- "receiptsVisibility": { "type": "bool?", "default": true },
- "usersStatusVisibility": { "type": "bool?", "default": true },
- "groupTypeVisibility": { "type": "bool?", "default": true },
- "deleteConversationOptionVisibility": { "type": "bool?", "default": true },
- "hideAppbar": { "type": "bool?", "default": false },
- "hideError": { "type": "bool?", "default": false },
- "hideSearch": { "type": "bool?", "default": false },
- "showBackButton": { "type": "bool", "default": false },
- "dateBackgroundIsTransparent": { "type": "bool?", "default": null },
- "searchReadOnly": { "type": "bool", "default": false }
- },
- "sound": {
- "disableSoundForMessages": { "type": "bool?", "default": false },
- "customSoundForMessages": { "type": "String?", "default": "built-in" }
- },
- "selection": {
- "selectionMode": {
- "type": "SelectionMode?",
- "values": ["SelectionMode.single", "SelectionMode.multiple", "SelectionMode.none"],
- "default": "null"
- },
- "activateSelection": {
- "type": "ActivateSelection?",
- "values": ["ActivateSelection.onClick", "ActivateSelection.onLongClick"],
- "default": "null"
- }
- },
- "viewSlots": {
- "listItemView": "Widget Function(Conversation conversation)?",
- "leadingView": "Widget? Function(BuildContext context, Conversation conversation)?",
- "titleView": "Widget? Function(BuildContext context, Conversation conversation)?",
- "subtitleView": "Widget? Function(BuildContext context, Conversation conversation)?",
- "trailingView": "Widget? Function(Conversation conversation)?",
- "loadingStateView": "WidgetBuilder?",
- "emptyStateView": "WidgetBuilder?",
- "errorStateView": "WidgetBuilder?",
- "setOptions": "List? Function(Conversation, CometChatConversationsController, BuildContext)?",
- "addOptions": "List? Function(Conversation, CometChatConversationsController, BuildContext)?"
- },
- "formatting": {
- "textFormatters": {
- "type": "List?",
- "default": "default formatters from data source"
- },
- "typingIndicatorText": {
- "type": "String?",
- "default": "typing..."
- }
- },
- "icons": {
- "backButton": { "type": "Widget?", "default": "built-in back arrow" },
- "protectedGroupIcon": { "type": "Widget?", "default": "built-in lock icon" },
- "privateGroupIcon": { "type": "Widget?", "default": "built-in lock icon" },
- "readIcon": { "type": "Widget?", "default": "built-in read icon" },
- "deliveredIcon": { "type": "Widget?", "default": "built-in delivered icon" },
- "sentIcon": { "type": "Widget?", "default": "built-in sent icon" },
- "submitIcon": { "type": "Widget?", "default": "built-in check icon" },
- "searchBoxIcon": { "type": "Widget?", "default": "built-in search icon" }
- },
- "layout": {
- "datePadding": { "type": "EdgeInsets?", "default": "null" },
- "dateHeight": { "type": "double?", "default": "null" },
- "dateWidth": { "type": "double?", "default": "null" },
- "badgeWidth": { "type": "double?", "default": "null" },
- "badgeHeight": { "type": "double?", "default": "null" },
- "badgePadding": { "type": "EdgeInsetsGeometry?", "default": "null" },
- "avatarWidth": { "type": "double?", "default": "null" },
- "avatarHeight": { "type": "double?", "default": "null" },
- "avatarPadding": { "type": "EdgeInsetsGeometry?", "default": "null" },
- "avatarMargin": { "type": "EdgeInsetsGeometry?", "default": "null" },
- "statusIndicatorWidth": { "type": "double?", "default": "null" },
- "statusIndicatorHeight": { "type": "double?", "default": "null" },
- "statusIndicatorBorderRadius": { "type": "BorderRadiusGeometry?", "default": "null" },
- "searchPadding": { "type": "EdgeInsetsGeometry?", "default": "null" },
- "searchContentPadding": { "type": "EdgeInsetsGeometry?", "default": "null" }
- },
- "style": {
- "conversationsStyle": { "type": "CometChatConversationsStyle", "default": "CometChatConversationsStyle()" },
- "listItemStyle": { "type": "ListItemStyle?", "default": "null" },
- "appBarOptions": { "type": "List?", "default": "null" }
- }
- },
- "events": [
- {
- "name": "CometChatConversationEvents.ccConversationDeleted",
- "payload": "Conversation",
- "description": "Conversation deleted from list"
- },
- {
- "name": "CometChatConversationEvents.ccUpdateConversation",
- "payload": "Conversation",
- "description": "Conversation updated"
- },
- {
- "name": "CometChatConversationEvents.ccMessageRead",
- "payload": "BaseMessage",
- "description": "Message marked as read"
- },
- {
- "name": "CometChatConversationEvents.ccMessageSent",
- "payload": "BaseMessage, MessageStatus",
- "description": "Message sent"
- }
- ],
- "sdkListeners": [
- "onTextMessageReceived",
- "onMediaMessageReceived",
- "onCustomMessageReceived",
- "onFormMessageReceived",
- "onCardMessageReceived",
- "onCustomInteractiveMessageReceived",
- "onSchedulerMessageReceived",
- "onTypingStarted",
- "onTypingEnded",
- "onMessagesDelivered",
- "onMessagesRead",
- "onMessagesDeliveredToAll",
- "onMessagesReadByAll",
- "onMessageEdited",
- "onMessageDeleted",
- "onUserOnline",
- "onUserOffline",
- "ccUserBlocked",
- "onGroupMemberJoined",
- "onGroupMemberLeft",
- "onGroupMemberKicked",
- "onGroupMemberBanned",
- "onGroupMemberUnbanned",
- "onGroupMemberScopeChanged",
- "onMemberAddedToGroup",
- "ccOwnershipChanged",
- "ccGroupLeft",
- "ccGroupDeleted",
- "ccGroupMemberAdded",
- "onIncomingCallReceived",
- "onOutgoingCallAccepted",
- "onOutgoingCallRejected",
- "onIncomingCallCancelled",
- "onCallEndedMessageReceived",
- "onConnected"
- ],
- "compositionExample": {
- "description": "Sidebar conversations wired to message view",
- "components": [
- "CometChatConversations",
- "CometChatMessages",
- "CometChatMessageHeader",
- "CometChatMessageList",
- "CometChatMessageComposer"
- ],
- "flow": "onItemTap emits Conversation -> extract User/Group via conversationWith -> pass to CometChatMessages or individual MessageHeader, MessageList, MessageComposer"
- },
- "types": {
- "CometChatOption": {
- "id": "String?",
- "title": "String?",
- "icon": "String?",
- "iconWidget": "Widget?",
- "onClick": "VoidCallback?"
- },
- "SelectionMode": {
- "single": "SelectionMode.single",
- "multiple": "SelectionMode.multiple",
- "none": "SelectionMode.none"
- },
- "ActivateSelection": {
- "onClick": "ActivateSelection.onClick",
- "onLongClick": "ActivateSelection.onLongClick"
- }
- }
-}
-```
-
+`CometChatConversations` renders a scrollable list of recent conversations with real-time updates for new messages, typing indicators, read receipts, and user presence.
+---
## Where It Fits
-`CometChatConversations` is a sidebar list widget. It renders recent conversations and emits the selected `Conversation` via `onItemTap`. Wire it to `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer` to build a standard two-panel chat layout.
+`CometChatConversations` is a list component. It renders recent conversations and emits the selected `Conversation` via `onItemTap`. Wire it to `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer` to build a standard chat layout.
```dart
-import 'package:flutter/material.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
-class ChatApp extends StatefulWidget {
- const ChatApp({super.key});
-
- @override
- State createState() => _ChatAppState();
-}
-
-class _ChatAppState extends State {
- User? selectedUser;
- Group? selectedGroup;
-
- void handleItemTap(Conversation conversation) {
+CometChatConversations(
+ onItemTap: (conversation) {
final entity = conversation.conversationWith;
- setState(() {
- if (entity is User) {
- selectedUser = entity;
- selectedGroup = null;
- } else if (entity is Group) {
- selectedGroup = entity;
- selectedUser = null;
- }
- });
- }
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: Row(
- children: [
- SizedBox(
- width: 400,
- child: CometChatConversations(
- onItemTap: handleItemTap,
- ),
- ),
- Expanded(
- child: selectedUser != null || selectedGroup != null
- ? CometChatMessages(
- user: selectedUser,
- group: selectedGroup,
- )
- : const Center(
- child: Text('Select a conversation'),
- ),
- ),
- ],
- ),
- );
- }
-}
+ if (entity is User) {
+ navigateToUserChat(entity);
+ } else if (entity is Group) {
+ navigateToGroupChat(entity);
+ }
+ },
+)
```
-
- 
-
-
---
+## Quick Start
-## Minimal Render
+Using Navigator:
```dart
-import 'package:flutter/material.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
-class ConversationsDemo extends StatelessWidget {
- const ConversationsDemo({super.key});
-
- @override
- Widget build(BuildContext context) {
- return const Scaffold(
- body: SafeArea(
- child: CometChatConversations(),
- ),
- );
- }
-}
+Navigator.push(context, MaterialPageRoute(builder: (context) => const CometChatConversations()));
```
-
- 
-
-
-You can also launch it using `Navigator.push`:
+Embedding as a widget:
+
+
```dart
-Navigator.push(
- context,
- MaterialPageRoute(builder: (context) => const CometChatConversations())
-);
+@override
+Widget build(BuildContext context) {
+ return Scaffold(
+ body: SafeArea(
+ child: CometChatConversations(),
+ ),
+ );
+}
```
+
+
+
+Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()`, a user logged in, and the UI Kit dependency added.
---
## Filtering Conversations
-Pass a `ConversationsRequestBuilder` to `conversationsRequestBuilder`. Pass the builder instance — not the result of `.build()`.
+Pass a `ConversationsRequestBuilder` to control what loads:
@@ -368,173 +81,140 @@ CometChatConversations(
### Filter Recipes
-| Recipe | Code |
+| Recipe | Builder property |
| --- | --- |
-| Only user conversations | `ConversationsRequestBuilder()..conversationType = "user"` |
-| Only group conversations | `ConversationsRequestBuilder()..conversationType = "group"` |
-| Limit to 10 per page | `ConversationsRequestBuilder()..limit = 10` |
-| With specific tags | `ConversationsRequestBuilder()..tags = ["vip"]` |
-| With user and group tags | `ConversationsRequestBuilder()..withUserAndGroupTags = true` |
-| Include blocked users | `ConversationsRequestBuilder()..includeBlockedUsers = true` |
-| Search conversations | `ConversationsRequestBuilder()..searchKeyword = "hello"` |
-| Unread only | `ConversationsRequestBuilder()..unread = true` |
-
-Default page size is 30. The component uses infinite scroll — the next page loads as the user scrolls to the bottom.
-
-### ConversationsRequestBuilder Properties
-
-| Property | Description | Code |
-| --- | --- | --- |
-| `limit` | Number of conversations to fetch per request. Maximum 50. | `..limit = 30` |
-| `conversationType` | Filter by conversation type: `"user"` or `"group"`. If not set, returns both. | `..conversationType = "user"` |
-| `withTags` | Include tags associated with conversations. Default `false`. | `..withTags = true` |
-| `tags` | Filter conversations by specific tags. | `..tags = ["archived", "vip"]` |
-| `withUserAndGroupTags` | Include user/group tags in the Conversation object. Default `false`. | `..withUserAndGroupTags = true` |
-| `includeBlockedUsers` | Include conversations with blocked users. Default `false`. | `..includeBlockedUsers = true` |
-| `withBlockedInfo` | Include blocked info in the ConversationWith object. Default `false`. | `..withBlockedInfo = true` |
-| `searchKeyword` | Search conversations by user or group name. Requires Advanced plan. | `..searchKeyword = "John"` |
-| `unread` | Fetch only unread conversations. Requires Advanced plan. | `..unread = true` |
-| `build()` | Builds and returns a `ConversationsRequest` object. | `.build()` |
-
-Refer to [ConversationsRequestBuilder](/sdk/flutter/retrieve-conversations) for the full builder API.
+| Only user conversations | `..conversationType = "user"` |
+| Only group conversations | `..conversationType = "group"` |
+| Limit per page | `..limit = 10` |
+| With tags | `..tags = ["vip"]` and `..withTags = true` |
+| With user and group tags | `..withUserAndGroupTags = true` |
---
-
## Actions and Events
-### Callback Props
+### Callback Methods
-#### onItemTap
+#### `onItemTap`
-Fires when a conversation row is tapped. Primary navigation hook — set the active conversation and render the message view.
+Fires when a conversation row is tapped. Primary navigation hook.
```dart
CometChatConversations(
onItemTap: (conversation) {
- print("Selected: ${conversation.conversationId}");
+ // Navigate to chat screen
},
)
```
-#### onItemLongPress
+#### `onItemLongPress`
-Fires when a conversation row is long-pressed. Useful for showing context menus or custom actions.
+Fires when a conversation row is long-pressed. By default shows a delete overlay (when `deleteConversationOptionVisibility` is true).
```dart
CometChatConversations(
onItemLongPress: (conversation) {
- // Show custom context menu
+ // Custom long press behavior
},
)
```
-#### onSelection
+#### `onBack`
-Fires when conversations are selected in multi-select mode. Requires `selectionMode` to be set.
+Fires when the user presses the back button in the app bar.
```dart
CometChatConversations(
- selectionMode: SelectionMode.multiple,
- onSelection: (selectedList) {
- print("Selected ${selectedList?.length ?? 0} conversations");
+ onBack: () {
+ Navigator.pop(context);
},
)
```
-#### onError
+#### `onSelection`
-Fires on internal errors (network failure, auth issue, SDK exception).
+Fires when conversations are selected/deselected in multi-select mode.
```dart
CometChatConversations(
- onError: (error) {
- print("CometChatConversations error: $error");
+ selectionMode: SelectionMode.multiple,
+ onSelection: (selectedConversations) {
+ // Handle selected conversations
},
)
```
-#### onBack
+#### `onError`
-Fires when the back button is pressed.
+Fires on internal errors (network failure, auth issue, SDK exception).
```dart
CometChatConversations(
- showBackButton: true,
- onBack: () {
- Navigator.pop(context);
+ onError: (e) {
+ debugPrint("Error: ${e.message}");
},
)
```
-#### onLoad
+#### `onLoad`
-Fires when the conversation list is successfully loaded.
+Fires when the list is successfully fetched and loaded.
```dart
CometChatConversations(
- onLoad: (list) {
- print("Loaded ${list.length} conversations");
+ onLoad: (conversations) {
+ debugPrint("Loaded ${conversations.length}");
},
)
```
-#### onEmpty
+#### `onEmpty`
-Fires when the conversation list is empty.
+Fires when the list is empty after loading.
```dart
CometChatConversations(
onEmpty: () {
- print("No conversations found");
+ debugPrint("No conversations");
},
)
```
+### Global Events
-### Global UI Events
-
-`CometChatConversationEvents` emits events subscribable from anywhere in the application. Add a listener in `initState` and remove it in `dispose`.
-
-| Event | Fires when | Payload |
-| --- | --- | --- |
-| `ccConversationDeleted` | A conversation is deleted from the list | `Conversation` |
-
-When to use: sync external UI with conversation state changes. For example, update an unread count badge in a tab bar when a conversation is deleted.
+The component emits events via `CometChatConversationEvents` that can be subscribed to from anywhere:
```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
class _YourScreenState extends State with CometChatConversationEventListener {
@override
@@ -551,7 +231,7 @@ class _YourScreenState extends State with CometChatConversationEvent
@override
void ccConversationDeleted(Conversation conversation) {
- print("Deleted: ${conversation.conversationId}");
+ // Handle conversation deleted
}
}
```
@@ -560,61 +240,51 @@ class _YourScreenState extends State with CometChatConversationEvent
### SDK Events (Real-Time, Automatic)
-The component listens to these SDK events internally. No manual attachment needed unless additional side effects are required.
+The component listens to these SDK events internally. No manual setup needed.
| SDK Listener | Internal behavior |
| --- | --- |
-| `onTextMessageReceived` / `onMediaMessageReceived` / `onCustomMessageReceived` | Moves conversation to top, updates last message preview and unread count |
-| `onTypingStarted` / `onTypingEnded` | Shows/hides typing indicator in the subtitle |
-| `onMessagesDelivered` / `onMessagesRead` | Updates receipt ticks (unless `receiptsVisibility: false`) |
-| `onUserOnline` / `onUserOffline` | Updates online/offline status dot (unless `usersStatusVisibility: false`) |
-| `onGroupMemberJoined` / `onGroupMemberLeft` / `onGroupMemberKicked` / `onGroupMemberBanned` / `onMemberAddedToGroup` | Updates group conversation metadata |
-
-Automatic: new messages, typing indicators, receipts, user presence, group membership changes.
+| `onTextMessageReceived` / `onMediaMessageReceived` / `onCustomMessageReceived` | Moves conversation to top, updates last message and unread count |
+| `onTypingStarted` / `onTypingEnded` | Shows/hides typing indicator in subtitle |
+| `onMessagesDelivered` / `onMessagesRead` | Updates receipt indicators |
+| `onUserOnline` / `onUserOffline` | Updates presence status dot |
+| `onGroupMemberJoined` / `onGroupMemberLeft` / `onGroupMemberKicked` / `onGroupMemberBanned` | Updates group conversation metadata |
+| Connection reconnected | Triggers silent refresh to sync missed messages |
---
+## Functionality
-## Custom View Slots
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `title` | `String?` | `null` | Custom app bar title |
+| `showBackButton` | `bool` | `false` | Toggle back button |
+| `hideAppbar` | `bool?` | `false` | Toggle app bar visibility |
+| `hideSearch` | `bool?` | `null` | Toggle search bar |
+| `searchReadOnly` | `bool` | `false` | Make search bar read-only (tap opens custom search) |
+| `deleteConversationOptionVisibility` | `bool?` | `true` | Show delete option on long press |
+| `groupTypeVisibility` | `bool?` | `true` | Show group type icon on avatar |
+| `usersStatusVisibility` | `bool?` | `true` | Show online/offline status indicator |
+| `receiptsVisibility` | `bool?` | `true` | Show message receipts |
+| `disableSoundForMessages` | `bool` | `false` | Disable message sounds |
+| `customSoundForMessages` | `String?` | `null` | Custom notification sound asset path |
+| `selectionMode` | `SelectionMode?` | `null` | Enable selection mode (`single` or `multiple`) |
-Each slot replaces a section of the default UI. Slots that accept a conversation parameter receive the `Conversation` object for that row.
+---
-| Slot | Signature | Replaces |
-| --- | --- | --- |
-| `listItemView` | `Widget Function(Conversation)` | Entire list item row |
-| `leadingView` | `Widget? Function(BuildContext, Conversation)` | Avatar / left section |
-| `titleView` | `Widget? Function(BuildContext, Conversation)` | Name / title text |
-| `subtitleView` | `Widget? Function(BuildContext, Conversation)` | Last message preview |
-| `trailingView` | `Widget? Function(Conversation)` | Timestamp / badge / right section |
-| `loadingStateView` | `WidgetBuilder` | Loading spinner |
-| `emptyStateView` | `WidgetBuilder` | Empty state |
-| `errorStateView` | `WidgetBuilder` | Error state |
-| `setOptions` | `List? Function(Conversation, Controller, BuildContext)` | Context menu actions (replaces default) |
-| `addOptions` | `List? Function(Conversation, Controller, BuildContext)` | Context menu actions (adds to default) |
-
-### listItemView
+## Custom View Slots
-Replace the entire list item row.
+### Leading View
-
- 
-
+Replace the avatar / left section.
```dart
CometChatConversations(
- listItemView: (conversation) {
- final entity = conversation.conversationWith;
- final name = entity is User ? entity.name : (entity as Group).name;
-
- return CometChatListItem(
- avatarName: name,
- avatarURL: entity is User ? entity.avatar : (entity as Group).icon,
- title: name,
- avatarStyle: CometChatAvatarStyle(
- borderRadius: BorderRadius.circular(8),
- ),
+ leadingView: (context, conversation) {
+ return CircleAvatar(
+ child: Text(conversation.conversationWith?.name?[0] ?? ""),
);
},
)
@@ -622,342 +292,133 @@ CometChatConversations(
-For a more complete custom list item with status indicator and date:
+### Title View
+
+Replace the name / title text.
```dart
-Widget getCustomListItem(Conversation conversation, BuildContext context) {
- User? conversationWithUser;
- Group? conversationWithGroup;
-
- if (conversation.conversationWith is User) {
- conversationWithUser = conversation.conversationWith as User;
- } else {
- conversationWithGroup = conversation.conversationWith as Group;
- }
-
- // Get status indicator
- StatusIndicatorUtils statusIndicatorUtils = StatusIndicatorUtils.getStatusIndicatorFromParams(
- context: context,
- user: conversationWithUser,
- group: conversationWithGroup,
- onlineStatusIndicatorColor: Color(0xFF09C26F),
- );
-
- // Build tail view with date
- final lastMessageTime = conversation.lastMessage?.sentAt ?? DateTime.now();
- Widget tail = CometChatDate(
- date: lastMessageTime,
- padding: EdgeInsets.zero,
- style: CometChatDateStyle(
- backgroundColor: Colors.transparent,
- textStyle: TextStyle(color: Color(0xFF727272), fontSize: 12),
- border: Border.all(width: 0, color: Colors.transparent),
- ),
- pattern: DateTimePattern.dayDateTimeFormat,
- );
-
- return CometChatListItem(
- avatarHeight: 48,
- avatarWidth: 48,
- id: conversation.conversationId,
- avatarName: conversationWithUser?.name ?? conversationWithGroup?.name,
- avatarURL: conversationWithUser?.avatar ?? conversationWithGroup?.icon,
- avatarStyle: CometChatAvatarStyle(
- borderRadius: BorderRadius.circular(8),
- backgroundColor: Color(0xFFAA9EE8),
- ),
- title: conversationWithUser?.name ?? conversationWithGroup?.name,
- tailView: tail,
- statusIndicatorColor: statusIndicatorUtils.statusIndicatorColor,
- statusIndicatorIcon: statusIndicatorUtils.icon,
- statusIndicatorStyle: CometChatStatusIndicatorStyle(
- border: Border.all(width: 2, color: Colors.white),
- ),
- hideSeparator: true,
- style: ListItemStyle(
- background: Colors.transparent,
- titleStyle: TextStyle(
- overflow: TextOverflow.ellipsis,
- fontSize: 16,
- fontWeight: FontWeight.w500,
- color: Color(0xFF141414),
- ),
- padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
- ),
- );
-}
-
-// Usage:
CometChatConversations(
- listItemView: (conversation) => getCustomListItem(conversation, context),
+ titleView: (context, conversation) {
+ return Text(
+ conversation.conversationWith?.name ?? "",
+ style: TextStyle(fontWeight: FontWeight.bold),
+ );
+ },
)
```
-### leadingView
+### Subtitle View
-Replace the avatar / left section. Typing-aware avatar example.
-
-
- 
-
+Replace the last message preview.
```dart
-// In your StatefulWidget, use the MessageListener mixin:
-class _ConversationsScreenState extends State with MessageListener {
- Map typingMap = {};
-
- @override
- void initState() {
- super.initState();
- CometChat.addMessageListener("typing_listener", this);
- }
-
- @override
- void dispose() {
- CometChat.removeMessageListener("typing_listener");
- super.dispose();
- }
-
- @override
- void onTypingStarted(TypingIndicator typingIndicator) {
- setTypingIndicator(typingIndicator, true);
- }
-
- @override
- void onTypingEnded(TypingIndicator typingIndicator) {
- setTypingIndicator(typingIndicator, false);
- }
-
- void setTypingIndicator(TypingIndicator typingIndicator, bool isTypingStarted) {
- final id = typingIndicator.receiverType == ReceiverTypeConstants.user
- ? typingIndicator.sender.uid
- : typingIndicator.receiverId;
-
- setState(() {
- if (isTypingStarted) {
- typingMap[id] = typingIndicator;
- } else {
- typingMap.remove(id);
- }
- });
- }
-
- @override
- Widget build(BuildContext context) {
- return CometChatConversations(
- leadingView: (context, conversation) {
- final entity = conversation.conversationWith;
- final id = entity is User ? entity.uid : (entity as Group).guid;
-
- if (typingMap.containsKey(id)) {
- return Container(
- decoration: BoxDecoration(
- border: Border.all(color: Color(0xFFF76808), width: 2),
- borderRadius: BorderRadius.circular(8),
- ),
- child: Image.asset("assets/typing_icon.png", height: 40, width: 40),
- );
- }
- return null; // Use default avatar
- },
- );
- }
-}
+CometChatConversations(
+ subtitleView: (context, conversation) {
+ final msg = conversation.lastMessage;
+ if (msg is TextMessage) {
+ return Text(msg.text, maxLines: 1, overflow: TextOverflow.ellipsis);
+ }
+ return Text("New conversation");
+ },
+)
```
+### Trailing View
-### titleView
-
-Replace the name / title text. Inline user status example.
-
-
- 
-
+Replace the timestamp / badge / right section.
```dart
CometChatConversations(
- titleView: (context, conversation) {
- final entity = conversation.conversationWith;
- final name = entity is User ? entity.name : (entity as Group).name;
- final statusMessage = entity is User ? entity.statusMessage : null;
-
- return Row(
- children: [
- Text(name ?? "", style: TextStyle(fontWeight: FontWeight.w500)),
- if (statusMessage != null)
- Text(" · $statusMessage", style: TextStyle(color: Color(0xFF6852D6))),
- ],
- );
+ trailingView: (conversation) {
+ if (conversation.unreadMessageCount > 0) {
+ return Badge(label: Text("${conversation.unreadMessageCount}"));
+ }
+ return null;
},
)
```
-### subtitleView
+### List Item View
-Replace the last message preview text.
-
-
- 
-
+Replace the entire list item row.
```dart
CometChatConversations(
- subtitleView: (context, conversation) {
- final entity = conversation.conversationWith;
- String subtitle;
-
- if (entity is User) {
- final dateTime = entity.lastActiveAt ?? DateTime.now();
- subtitle = "Last Active: ${DateFormat('dd/MM/yyyy, HH:mm').format(dateTime)}";
- } else {
- final dateTime = (entity as Group).createdAt ?? DateTime.now();
- subtitle = "Created: ${DateFormat('dd/MM/yyyy, HH:mm').format(dateTime)}";
- }
-
- return Text(subtitle, style: TextStyle(color: Color(0xFF727272), fontSize: 14));
+ listItemView: (conversation) {
+ return ListTile(
+ leading: CircleAvatar(child: Text(conversation.conversationWith?.name?[0] ?? "")),
+ title: Text(conversation.conversationWith?.name ?? ""),
+ subtitle: Text("Custom item"),
+ );
},
)
```
-### trailingView
-
-Replace the timestamp / badge / right section. Relative time badge example.
-
-
- 
-
+### State Views
```dart
CometChatConversations(
- trailingView: (conversation) {
- final timestamp = conversation.updatedAt?.millisecondsSinceEpoch ?? 0;
- final now = DateTime.now();
- final lastSeen = DateTime.fromMillisecondsSinceEpoch(timestamp * 1000);
- final diffInMinutes = now.difference(lastSeen).inMinutes;
- final diffInHours = now.difference(lastSeen).inHours;
-
- String timeText;
- String label;
- Color cardColor;
-
- if (diffInMinutes < 60) {
- timeText = "$diffInMinutes";
- label = "Min ago";
- cardColor = Color(0x666852D6);
- } else if (diffInHours < 10) {
- timeText = "$diffInHours";
- label = "Hr ago";
- cardColor = Color(0x66FFAB00);
- } else {
- timeText = "$diffInHours";
- label = "Hr ago";
- cardColor = Color(0x66F44649);
- }
-
- return Card(
- color: cardColor,
- child: Padding(
- padding: EdgeInsets.all(4),
- child: Column(
- children: [
- Text(timeText, style: TextStyle(fontWeight: FontWeight.bold)),
- Text(label, style: TextStyle(fontSize: 12)),
- ],
- ),
- ),
- );
- },
+ emptyStateView: (context) => Center(child: Text("No conversations yet")),
+ errorStateView: (context) => Center(child: Text("Something went wrong")),
+ loadingStateView: (context) => Center(child: CircularProgressIndicator()),
)
```
+---
-### setOptions
-
-Replace the context menu / long-press actions on each conversation item.
-
-
- 
-
+## Menu Options
```dart
+// Replace all options
CometChatConversations(
- setOptions: (conversation, controller, context) {
+ setOptions: (conversation, bloc, context) {
return [
CometChatOption(
id: "delete",
- title: "Delete",
icon: AssetConstants.delete,
+ title: "Delete",
onClick: () {
- // Delete conversation
+ bloc.add(DeleteConversation(conversation.conversationId!));
},
),
];
},
)
-```
-
-
-
-### addOptions
-
-Add to the existing context menu actions without removing defaults.
-
- 
-
-
-
-
-```dart
+// Append to defaults
CometChatConversations(
- addOptions: (conversation, controller, context) {
+ addOptions: (conversation, bloc, context) {
return [
CometChatOption(
id: "archive",
- title: "Archive",
iconWidget: Icon(Icons.archive_outlined),
+ title: "Archive",
onClick: () {
// Archive conversation
},
),
- CometChatOption(
- id: "pin",
- title: "Pin",
- iconWidget: Icon(Icons.push_pin_outlined),
- onClick: () {
- // Pin conversation
- },
- ),
- CometChatOption(
- id: "mark_unread",
- title: "Mark as unread",
- iconWidget: Icon(Icons.mark_chat_unread_outlined),
- onClick: () {
- // Mark conversation as unread
- },
- ),
];
},
)
@@ -965,1201 +426,197 @@ CometChatConversations(
-### appBarOptions
+---
-Add custom widgets to the app bar.
+## Common Patterns
-
- 
-
+### Minimal list — hide all chrome
```dart
CometChatConversations(
- showBackButton: false,
- appBarOptions: [
- PopupMenuButton(
- icon: CometChatAvatar(
- image: CometChatUIKit.loggedInUser?.avatar,
- name: CometChatUIKit.loggedInUser?.name,
- ),
- itemBuilder: (context) => [
- PopupMenuItem(value: 'create', child: Text("Create Conversation")),
- PopupMenuItem(value: 'logout', child: Text("Logout")),
- ],
- onSelected: (value) {
- // Handle menu selection
- },
- ),
- ],
+ hideAppbar: true,
+ hideSearch: true,
)
```
-For a more complete popup menu with styling:
+### Users-only conversations
```dart
CometChatConversations(
- showBackButton: false,
- appBarOptions: [
- PopupMenuButton(
- shape: RoundedRectangleBorder(
- borderRadius: BorderRadius.circular(8),
- side: BorderSide(color: Color(0xFFF5F5F5), width: 1),
- ),
- color: Colors.white,
- elevation: 4,
- menuPadding: EdgeInsets.zero,
- padding: EdgeInsets.zero,
- icon: Padding(
- padding: EdgeInsets.only(left: 12, right: 16),
- child: CometChatAvatar(
- width: 40,
- height: 40,
- image: CometChatUIKit.loggedInUser?.avatar,
- name: CometChatUIKit.loggedInUser?.name,
- ),
- ),
- onSelected: (value) {
- switch (value) {
- case '/create':
- // Navigate to create conversation
- break;
- case '/logout':
- CometChatUIKit.logout();
- break;
- }
- },
- position: PopupMenuPosition.under,
- itemBuilder: (BuildContext context) {
- return [
- PopupMenuItem(
- height: 44,
- padding: EdgeInsets.all(16),
- value: '/create',
- child: Row(
- children: [
- Padding(
- padding: EdgeInsets.only(right: 8),
- child: Icon(Icons.add_comment_outlined, color: Color(0xFFA1A1A1), size: 24),
- ),
- Text("Create Conversation", style: TextStyle(fontSize: 14, color: Color(0xFF141414))),
- ],
- ),
- ),
- PopupMenuItem(
- height: 44,
- padding: EdgeInsets.all(16),
- value: '/name',
- child: Row(
- children: [
- Padding(
- padding: EdgeInsets.only(right: 8),
- child: Icon(Icons.account_circle_outlined, color: Color(0xFFA1A1A1), size: 24),
- ),
- Text(CometChatUIKit.loggedInUser?.name ?? "", style: TextStyle(fontSize: 14, color: Color(0xFF141414))),
- ],
- ),
- ),
- PopupMenuItem(
- height: 44,
- padding: EdgeInsets.all(16),
- value: '/logout',
- child: Row(
- children: [
- Padding(
- padding: EdgeInsets.only(right: 8),
- child: Icon(Icons.logout, color: Colors.red, size: 24),
- ),
- Text("Logout", style: TextStyle(fontSize: 14, color: Colors.red)),
- ],
- ),
- ),
- ];
- },
- ),
- ],
- onItemTap: (conversation) {
- User? user;
- Group? group;
- if (conversation.conversationWith is User) {
- user = conversation.conversationWith as User;
- } else {
- group = conversation.conversationWith as Group;
- }
- // Navigate to messages
- },
+ conversationsRequestBuilder: ConversationsRequestBuilder()
+ ..conversationType = "user",
)
```
----
-
-
-## Styling
-
-Set `CometChatConversationsStyle` to customize the appearance.
+### Custom date formatting
```dart
CometChatConversations(
- conversationsStyle: CometChatConversationsStyle(
- backgroundColor: Colors.white,
- titleTextColor: Color(0xFF141414),
- avatarStyle: CometChatAvatarStyle(
- borderRadius: BorderRadius.circular(8),
- backgroundColor: Color(0xFFFBAA75),
- ),
- badgeStyle: CometChatBadgeStyle(
- backgroundColor: Color(0xFFF76808),
- ),
- ),
+ datePattern: (conversation) {
+ final timestamp = conversation.updatedAt;
+ return DateFormat('MMM d').format(DateTime.fromMillisecondsSinceEpoch(timestamp! * 1000));
+ },
)
```
-
- 
-
-
-### Style Properties
-
-| Property | Type | Description |
-| --- | --- | --- |
-| `backgroundColor` | `Color` | Background color of the component |
-| `border` | `Border` | Border for the widget |
-| `borderRadius` | `BorderRadiusGeometry` | Border radius for the widget |
-| `titleTextColor` | `Color` | Color of the header title |
-| `titleTextStyle` | `TextStyle` | Style for the header title |
-| `backIconColor` | `Color` | Back button icon color |
-| `searchBackgroundColor` | `Color` | Background color of search box |
-| `searchBorder` | `BorderSide` | Border for search box |
-| `searchBorderRadius` | `BorderRadius` | Border radius for search box |
-| `searchPlaceHolderTextColor` | `Color` | Placeholder text color in search |
-| `searchPlaceHolderTextStyle` | `TextStyle` | Placeholder text style in search |
-| `searchIconColor` | `Color` | Search icon color |
-| `separatorColor` | `Color` | Color of list item separators |
-| `separatorHeight` | `double` | Height of list item separators |
-| `emptyStateTextColor` | `Color` | Text color for empty state title |
-| `emptyStateTextStyle` | `TextStyle` | Text style for empty state title |
-| `emptyStateSubTitleTextColor` | `Color` | Text color for empty state subtitle |
-| `emptyStateSubTitleTextStyle` | `TextStyle` | Text style for empty state subtitle |
-| `errorStateTextColor` | `Color` | Text color for error state title |
-| `errorStateTextStyle` | `TextStyle` | Text style for error state title |
-| `errorStateSubTitleTextColor` | `Color` | Text color for error state subtitle |
-| `errorStateSubTitleTextStyle` | `TextStyle` | Text style for error state subtitle |
-| `itemTitleTextColor` | `Color` | Text color for conversation item title |
-| `itemTitleTextStyle` | `TextStyle` | Text style for conversation item title |
-| `itemSubtitleTextColor` | `Color` | Text color for conversation item subtitle |
-| `itemSubtitleTextStyle` | `TextStyle` | Text style for conversation item subtitle |
-| `messageTypeIconColor` | `Color` | Icon color for message type indicators |
-| `avatarStyle` | `CometChatAvatarStyle` | Style for avatars |
-| `badgeStyle` | `CometChatBadgeStyle` | Style for unread badges |
-| `receiptStyle` | `CometChatMessageReceiptStyle` | Style for message receipts |
-| `statusIndicatorStyle` | `CometChatStatusIndicatorStyle` | Style for online status indicator |
-| `dateStyle` | `CometChatDateStyle` | Style for date/time display |
-| `typingIndicatorStyle` | `CometChatTypingIndicatorStyle` | Style for typing indicator |
-| `mentionsStyle` | `CometChatMentionsStyle` | Style for @mentions |
-| `deleteConversationDialogStyle` | `CometChatConfirmDialogStyle` | Style for delete confirmation dialog |
-| `privateGroupIconBackground` | `Color` | Background color for private group icon |
-| `protectedGroupIconBackground` | `Color` | Background color for protected group icon |
-| `submitIconColor` | `Color` | Color for submit icon in selection mode |
-| `checkBoxBackgroundColor` | `Color` | Background color for selection checkbox |
-| `checkBoxCheckedBackgroundColor` | `Color` | Background color when checkbox is checked |
-| `checkBoxBorder` | `BorderSide` | Border for selection checkbox |
-| `checkBoxBorderRadius` | `BorderRadiusGeometry` | Border radius for selection checkbox |
-| `checkboxSelectedIconColor` | `Color` | Icon color when checkbox is selected |
-| `listItemSelectedBackgroundColor` | `Color` | Background color for selected list items |
-
---
-## Common Patterns
+## Advanced
-### Custom empty state with CTA
+### BLoC Access
+
+Provide a custom `ConversationsBloc` to override behavior:
```dart
-import 'package:flutter/material.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
CometChatConversations(
- emptyStateView: (context) {
- return Center(
- child: Column(
- mainAxisAlignment: MainAxisAlignment.center,
- children: [
- Text("No conversations yet"),
- SizedBox(height: 16),
- ElevatedButton(
- onPressed: () {
- // Navigate to contacts
- },
- child: Text("Start a conversation"),
- ),
- ],
- ),
- );
- },
+ conversationsBloc: CustomConversationsBloc(),
)
```
-### Hide all chrome — minimal list
+### Extending ConversationsBloc
+
+`ConversationsBloc` uses the `ListBase` mixin with override hooks for custom list behavior:
```dart
-import 'package:flutter/material.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+class CustomConversationsBloc extends ConversationsBloc {
+ @override
+ void onItemAdded(Conversation item, List updatedList) {
+ // Custom sorting — pinned conversations first
+ final sorted = _sortWithPinnedFirst(updatedList);
+ super.onItemAdded(item, sorted);
+ }
-CometChatConversations(
- receiptsVisibility: false,
- usersStatusVisibility: false,
- groupTypeVisibility: false,
- deleteConversationOptionVisibility: false,
- hideAppbar: true,
-)
+ @override
+ void onListReplaced(List previousList, List newList) {
+ // Filter out blocked users on every list refresh
+ final filtered = newList.where((c) => !isBlocked(c)).toList();
+ super.onListReplaced(previousList, filtered);
+ }
+}
```
+For `ListBase` override hooks (`onItemAdded`, `onItemRemoved`, `onItemUpdated`, `onListCleared`, `onListReplaced`), see [BLoC & Data — ListBase Hooks](/ui-kit/flutter/customization-bloc-data#listbase-hooks).
-### Conversations with search
+### Public BLoC Events
-
-
-```dart
-import 'package:flutter/material.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+| Event | Description |
+| --- | --- |
+| `LoadConversations({silent})` | Load initial conversations. `silent: true` keeps existing list visible during refresh. |
+| `LoadMoreConversations()` | Load next page (pagination) |
+| `RefreshConversations()` | Refresh the list |
+| `DeleteConversation(conversationId)` | Delete via SDK and remove from list |
+| `RemoveConversation(conversationId)` | Remove from list without SDK call |
+| `SetActiveConversation(conversationId)` | Mark as active (suppresses unread count) |
+| `UpdateConversation(conversationId, updatedConversation)` | Update with modified data |
+| `ResetUnreadCount(conversationId)` | Reset unread count to 0 |
-CometChatConversations(
- hideSearch: false,
- onSearchTap: () {
- // Handle search tap - navigate to search screen
- },
-)
-```
-
-
+### Public BLoC Methods
-### Custom date pattern
+| Method | Returns | Description |
+| --- | --- | --- |
+| `getTypingNotifier(conversationId)` | `ValueNotifier>` | Per-conversation typing notifier for isolated rebuilds |
+| `getTypingIndicators(conversationId)` | `List` | Current typing indicators for a conversation |
+
+### Route Observer
-
- 
-
+Pass a `RouteObserver` to freeze rebuilds when another screen is pushed on top (prevents expensive rebuilds during keyboard animation):
```dart
-import 'package:flutter/material.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:intl/intl.dart';
+// In your app
+final RouteObserver> routeObserver = RouteObserver>();
+
+MaterialApp(
+ navigatorObservers: [routeObserver],
+)
+// Pass to conversations
CometChatConversations(
- datePattern: (conversation) {
- final date = conversation.lastMessage?.sentAt ?? DateTime.now();
- return DateFormat('d MMM, hh:mm a').format(date);
- },
+ routeObserver: routeObserver,
)
```
-### Text formatters
-
-Configure text formatters for the conversation subtitle. See [CometChatMentionsFormatter](/ui-kit/flutter/mentions-formatter-guide) for mention formatting.
+---
-
- 
-
+## Style
```dart
-import 'package:flutter/material.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
CometChatConversations(
- textFormatters: [
- CometChatMentionsFormatter(
- style: CometChatMentionsStyle(
- mentionSelfTextBackgroundColor: Color(0xFFF76808),
- mentionTextBackgroundColor: Colors.white,
- mentionTextColor: Colors.black,
- mentionSelfTextColor: Colors.white,
- ),
+ conversationsStyle: CometChatConversationsStyle(
+ backgroundColor: Colors.white,
+ avatarStyle: CometChatAvatarStyle(
+ borderRadius: BorderRadius.circular(8),
+ backgroundColor: Color(0xFFFBAA75),
+ ),
+ badgeStyle: CometChatBadgeStyle(
+ backgroundColor: Color(0xFFF76808),
),
- ],
+ receiptStyle: CometChatMessageReceiptStyle(),
+ typingIndicatorStyle: CometChatTypingIndicatorStyle(),
+ dateStyle: CometChatDateStyle(),
+ mentionsStyle: CometChatMentionsStyle(),
+ deleteConversationDialogStyle: CometChatConfirmDialogStyle(),
+ ),
)
```
----
-
-
-## Accessibility
-
-The component renders a scrollable list of interactive items. Each conversation row is tappable and responds to both tap and long-press gestures. The context menu (options) is accessible via long-press. The unread badge count is exposed as text content. Avatar images include the conversation name for accessibility.
+### Style Properties
-For screen readers, the conversation list is rendered as a semantic list using Flutter's built-in accessibility features. Status indicators (online/offline, group type icons) use visual icons — consider providing custom `Semantics` widgets via `leadingView` if screen reader descriptions are needed for these visual indicators.
+| Property | Description |
+| --- | --- |
+| `backgroundColor` | List background color |
+| `avatarStyle` | Avatar appearance |
+| `badgeStyle` | Unread badge appearance |
+| `receiptStyle` | Read receipt icons |
+| `typingIndicatorStyle` | Typing indicator text |
+| `dateStyle` | Timestamp appearance |
+| `mentionsStyle` | Mention highlight style |
+| `deleteConversationDialogStyle` | Delete confirmation dialog |
-When using selection mode, checkboxes are rendered with proper accessibility labels. The component respects system accessibility settings including text scaling and high contrast modes.
+See [Component Styling](/ui-kit/flutter/component-styling) for the full reference.
---
-
-## Props
-
-All props are optional. Sorted alphabetically.
-
-### activateSelection
-
-Controls when selection mode activates.
-
-| | |
-| --- | --- |
-| Type | `ActivateSelection` |
-| Default | `null` |
-
-Values: `ActivateSelection.onClick`, `ActivateSelection.onLongClick`
-
----
-
-### addOptions
-
-Adds to the current list of actions available on long press.
-
-| | |
-| --- | --- |
-| Type | `List? Function(Conversation, CometChatConversationsController, BuildContext)` |
-| Default | `null` |
-
----
-
-### appBarOptions
-
-List of widgets to display in the app bar.
-
-| | |
-| --- | --- |
-| Type | `List` |
-| Default | `null` |
-
----
-
-### backButton
-
-Custom back button widget.
-
-| | |
-| --- | --- |
-| Type | `Widget` |
-| Default | Built-in back arrow |
-
----
-
-### conversationsRequestBuilder
-
-Controls which conversations load and in what order.
-
-| | |
-| --- | --- |
-| Type | `ConversationsRequestBuilder` |
-| Default | SDK default (30 per page) |
-
-Pass the builder instance, not the result of `.build()`.
-
----
-
-### conversationsProtocol
-
-Custom protocol for fetching conversations.
-
-| | |
-| --- | --- |
-| Type | `ConversationsBuilderProtocol` |
-| Default | `null` |
-
-Use this for advanced customization of how conversations are fetched.
-
----
-
-### conversationsStyle
-
-Style configuration for the component.
-
-| | |
-| --- | --- |
-| Type | `CometChatConversationsStyle` |
-| Default | `CometChatConversationsStyle()` |
-
----
-
-### customSoundForMessages
-
-Path to a custom audio file for incoming message notifications.
-
-| | |
-| --- | --- |
-| Type | `String` |
-| Default | Built-in sound |
-
----
-
-### datePattern
-
-Custom date format function for conversation timestamps.
-
-| | |
-| --- | --- |
-| Type | `String Function(Conversation)` |
-| Default | Built-in date formatting |
-
----
-
-### deleteConversationOptionVisibility
-
-Controls visibility of delete option in context menu.
-
-| | |
-| --- | --- |
-| Type | `bool` |
-| Default | `true` |
-
----
-
-### deliveredIcon
-
-Custom icon for delivered message receipts.
-
-| | |
-| --- | --- |
-| Type | `Widget` |
-| Default | Built-in delivered icon |
-
----
-
-### disableSoundForMessages
-
-Disables notification sound for incoming messages.
-
-| | |
-| --- | --- |
-| Type | `bool` |
-| Default | `false` |
-
----
-
-
-### emptyStateView
-
-Custom widget displayed when there are no conversations.
-
-| | |
-| --- | --- |
-| Type | `WidgetBuilder` |
-| Default | Built-in empty state |
-
----
-
-### errorStateView
-
-Custom widget displayed when an error occurs.
-
-| | |
-| --- | --- |
-| Type | `WidgetBuilder` |
-| Default | Built-in error state |
-
-Hidden when `hideError: true`.
-
----
-
-### groupTypeVisibility
-
-Controls visibility of group type icon (public/private/password).
-
-| | |
-| --- | --- |
-| Type | `bool` |
-| Default | `true` |
-
----
-
-### hideAppbar
-
-Hides the entire app bar.
-
-| | |
-| --- | --- |
-| Type | `bool` |
-| Default | `false` |
-
----
-
-### hideError
-
-Hides the default and custom error views.
-
-| | |
-| --- | --- |
-| Type | `bool` |
-| Default | `false` |
-
----
-
-### hideSearch
-
-Hides the search bar in the app bar.
-
-| | |
-| --- | --- |
-| Type | `bool` |
-| Default | `false` |
-
----
-
-### leadingView
-
-Custom renderer for the avatar / left section.
-
-| | |
-| --- | --- |
-| Type | `Widget? Function(BuildContext, Conversation)` |
-| Default | Built-in avatar |
-
-Return `null` to use the default avatar.
-
----
-
-### listItemView
-
-Custom renderer for the entire list item row.
-
-| | |
-| --- | --- |
-| Type | `Widget Function(Conversation)` |
-| Default | Built-in list item |
-
----
-
-### loadingStateView
-
-Custom widget displayed during loading state.
-
-| | |
-| --- | --- |
-| Type | `WidgetBuilder` |
-| Default | Built-in shimmer |
-
----
-
-### mentionAllLabel
-
-Custom label for group mentions (@channel, @everyone).
-
-| | |
-| --- | --- |
-| Type | `String` |
-| Default | `null` |
-
----
-
-### mentionAllLabelId
-
-Custom label ID for group mentions.
-
-| | |
-| --- | --- |
-| Type | `String` |
-| Default | `null` |
-
----
-
-
-### onBack
-
-Callback fired when the back button is pressed.
-
-| | |
-| --- | --- |
-| Type | `VoidCallback` |
-| Default | `null` |
-
----
-
-### onEmpty
-
-Callback fired when the conversation list is empty.
-
-| | |
-| --- | --- |
-| Type | `OnEmpty` |
-| Default | `null` |
-
----
-
-### onError
-
-Callback fired when the component encounters an error.
-
-| | |
-| --- | --- |
-| Type | `OnError` |
-| Default | `null` |
-
----
-
-### onItemLongPress
-
-Callback fired when a conversation row is long-pressed.
-
-| | |
-| --- | --- |
-| Type | `Function(Conversation)` |
-| Default | `null` |
-
----
-
-### onItemTap
-
-Callback fired when a conversation row is tapped.
-
-| | |
-| --- | --- |
-| Type | `Function(Conversation)` |
-| Default | `null` |
-
----
-
-### onLoad
-
-Callback fired when the conversation list is loaded.
-
-| | |
-| --- | --- |
-| Type | `OnLoad` |
-| Default | `null` |
-
----
-
-### onSearchTap
-
-Callback fired when the search box is tapped.
-
-| | |
-| --- | --- |
-| Type | `GestureTapCallback` |
-| Default | `null` |
-
-Requires `searchReadOnly: true` to work properly.
-
----
-
-### onSelection
-
-Callback fired when conversations are selected/deselected.
-
-| | |
-| --- | --- |
-| Type | `Function(List?)` |
-| Default | `null` |
-
-Requires `selectionMode` to be set.
-
----
-
-### privateGroupIcon
-
-Custom icon for private group indicator.
-
-| | |
-| --- | --- |
-| Type | `Widget` |
-| Default | Built-in lock icon |
-
----
-
-### protectedGroupIcon
-
-Custom icon for password-protected group indicator.
-
-| | |
-| --- | --- |
-| Type | `Widget` |
-| Default | Built-in lock icon |
-
----
-
-### readIcon
-
-Custom icon for read message receipts.
-
-| | |
-| --- | --- |
-| Type | `Widget` |
-| Default | Built-in read icon |
-
----
-
-### receiptsVisibility
-
-Controls visibility of message read/delivery receipts.
-
-| | |
-| --- | --- |
-| Type | `bool` |
-| Default | `true` |
-
----
-
-
-### scrollController
-
-Custom scroll controller for the list.
-
-| | |
-| --- | --- |
-| Type | `ScrollController` |
-| Default | `null` |
-
----
-
-### searchBoxIcon
-
-Custom prefix icon for the search box.
-
-| | |
-| --- | --- |
-| Type | `Widget` |
-| Default | Built-in search icon |
-
----
-
-### searchContentPadding
-
-Padding for search box content.
-
-| | |
-| --- | --- |
-| Type | `EdgeInsetsGeometry` |
-| Default | `null` |
-
----
-
-### searchPadding
-
-Padding for the search box.
-
-| | |
-| --- | --- |
-| Type | `EdgeInsetsGeometry` |
-| Default | `null` |
-
----
-
-### searchReadOnly
-
-Makes the search box read-only (tap only).
-
-| | |
-| --- | --- |
-| Type | `bool` |
-| Default | `false` |
-
----
-
-### selectionMode
-
-Enables single or multi-select mode.
-
-| | |
-| --- | --- |
-| Type | `SelectionMode` |
-| Default | `null` |
-
-Values: `SelectionMode.single`, `SelectionMode.multiple`, `SelectionMode.none`
-
-Must pair with `onSelection` to capture selections.
-
----
-
-### sentIcon
-
-Custom icon for sent message receipts.
-
-| | |
-| --- | --- |
-| Type | `Widget` |
-| Default | Built-in sent icon |
-
----
-
-### setOptions
-
-Replaces the list of actions available on long press.
-
-| | |
-| --- | --- |
-| Type | `List? Function(Conversation, CometChatConversationsController, BuildContext)` |
-| Default | `null` |
-
----
-
-### showBackButton
-
-Shows the back button in the app bar.
-
-| | |
-| --- | --- |
-| Type | `bool` |
-| Default | `false` |
-
----
-
-### subtitleView
-
-Custom renderer for the last message preview.
-
-| | |
-| --- | --- |
-| Type | `Widget? Function(BuildContext, Conversation)` |
-| Default | Built-in subtitle |
-
----
-
-### textFormatters
-
-Custom text formatters for the conversation subtitle.
-
-| | |
-| --- | --- |
-| Type | `List` |
-| Default | Default formatters from data source |
-
-See [CometChatMentionsFormatter](/ui-kit/flutter/mentions-formatter-guide) for mention formatting.
-
----
-
-### title
-
-Custom title text for the app bar.
-
-| | |
-| --- | --- |
-| Type | `String` |
-| Default | "Chats" |
-
----
-
-### titleView
-
-Custom renderer for the name / title text.
-
-| | |
-| --- | --- |
-| Type | `Widget? Function(BuildContext, Conversation)` |
-| Default | Built-in title |
-
----
-
-### trailingView
-
-Custom renderer for the timestamp / badge / right section.
-
-| | |
-| --- | --- |
-| Type | `Widget? Function(Conversation)` |
-| Default | Built-in trailing view |
-
----
-
-### typingIndicatorText
-
-Custom text shown when a user is typing.
-
-| | |
-| --- | --- |
-| Type | `String` |
-| Default | "typing..." |
-
----
-
-### usersStatusVisibility
-
-Controls visibility of online/offline status indicator.
-
-| | |
-| --- | --- |
-| Type | `bool` |
-| Default | `true` |
-
----
-
-### avatarHeight
-
-Height for user/group avatars.
-
-| | |
-| --- | --- |
-| Type | `double` |
-| Default | `null` |
-
----
-
-### avatarWidth
-
-Width for user/group avatars.
-
-| | |
-| --- | --- |
-| Type | `double` |
-| Default | `null` |
-
----
-
-### avatarPadding
-
-Padding for user/group avatars.
-
-| | |
-| --- | --- |
-| Type | `EdgeInsetsGeometry` |
-| Default | `null` |
-
----
-
-### avatarMargin
-
-Margin for user/group avatars.
-
-| | |
-| --- | --- |
-| Type | `EdgeInsetsGeometry` |
-| Default | `null` |
-
----
-
-### badgeWidth
-
-Width for unread message badge.
-
-| | |
-| --- | --- |
-| Type | `double` |
-| Default | `null` |
-
----
-
-### badgeHeight
-
-Height for unread message badge.
-
-| | |
-| --- | --- |
-| Type | `double` |
-| Default | `null` |
-
----
-
-### badgePadding
-
-Padding for unread message badge.
-
-| | |
-| --- | --- |
-| Type | `EdgeInsetsGeometry` |
-| Default | `null` |
-
----
-
-### controllerTag
-
-Tag for controller management. When passed, parent is responsible for closing.
-
-| | |
-| --- | --- |
-| Type | `String` |
-| Default | `null` |
-
----
-
-### dateBackgroundIsTransparent
-
-Controls whether the date background is transparent.
-
-| | |
-| --- | --- |
-| Type | `bool` |
-| Default | `null` |
-
----
-
-### dateHeight
-
-Height for the conversation date display.
-
-| | |
-| --- | --- |
-| Type | `double` |
-| Default | `null` |
-
----
-
-### datePadding
-
-Padding for the conversation date display.
-
-| | |
-| --- | --- |
-| Type | `EdgeInsets` |
-| Default | `null` |
-
----
-
-### dateTimeFormatterCallback
-
-Callback for custom date and time formatting.
-
-| | |
-| --- | --- |
-| Type | `DateTimeFormatterCallback` |
-| Default | `null` |
-
----
-
-### dateWidth
-
-Width for the conversation date display.
-
-| | |
-| --- | --- |
-| Type | `double` |
-| Default | `null` |
-
----
-
-### listItemStyle
-
-Style configuration for list items.
-
-| | |
-| --- | --- |
-| Type | `ListItemStyle` |
-| Default | `null` |
-
----
-
-### searchContentPadding
-
-Padding for search box content.
-
-| | |
-| --- | --- |
-| Type | `EdgeInsetsGeometry` |
-| Default | `null` |
-
----
-
-### searchPadding
-
-Padding for the search box.
-
-| | |
-| --- | --- |
-| Type | `EdgeInsetsGeometry` |
-| Default | `null` |
-
----
-
-### statusIndicatorBorderRadius
-
-Border radius for the status indicator.
-
-| | |
-| --- | --- |
-| Type | `BorderRadiusGeometry` |
-| Default | `null` |
-
----
-
-### statusIndicatorHeight
-
-Height for the status indicator.
-
-| | |
-| --- | --- |
-| Type | `double` |
-| Default | `null` |
-
----
-
-### statusIndicatorWidth
-
-Width for the status indicator.
-
-| | |
-| --- | --- |
-| Type | `double` |
-| Default | `null` |
-
----
-
-### submitIcon
-
-Custom submit icon for selection mode.
-
-| | |
-| --- | --- |
-| Type | `Widget` |
-| Default | Built-in check icon |
-
----
-
-## Events
-
-| Event | Payload | Fires when |
-| --- | --- | --- |
-| `CometChatConversationEvents.ccConversationDeleted` | `Conversation` | Conversation deleted from list |
-| `CometChatConversationEvents.ccUpdateConversation` | `Conversation` | Conversation updated (last message change, metadata update) |
-
-Subscribe using `CometChatConversationEvents.addConversationListListener()` and unsubscribe with `removeConversationListListener()`.
-
----
-
-## Customization Matrix
-
-| What to change | Where | Property/API | Example |
-| --- | --- | --- | --- |
-| Override behavior on user interaction | Widget props | `on` callbacks | `onItemTap: (c) => setActive(c)` |
-| Filter which conversations appear | Widget props | `conversationsRequestBuilder` | `conversationsRequestBuilder: ConversationsRequestBuilder()..limit = 10` |
-| Toggle visibility of UI elements | Widget props | `Visibility` boolean props | `receiptsVisibility: false` |
-| Replace a section of the list item | Widget props | `View` render props | `listItemView: (conversation) => CustomWidget()` |
-| Change colors, fonts, spacing | Widget props | `conversationsStyle` | `conversationsStyle: CometChatConversationsStyle(backgroundColor: Colors.white)` |
-
----
+## Next Steps
-
- Display and select from a list of users
-
-
- Display and select from a list of groups
+
+ Browse and search available users
- Display messages in a conversation
+ Display messages for a conversation
+
+
+ Detailed styling reference
-
- Customize the look and feel of components
+
+ Customize message bubble structure
diff --git a/ui-kit/flutter/core-features.mdx b/ui-kit/flutter/core-features.mdx
index b94eb6f9d..5873829cf 100644
--- a/ui-kit/flutter/core-features.mdx
+++ b/ui-kit/flutter/core-features.mdx
@@ -1,278 +1,132 @@
---
title: "Core Features"
-sidebarTitle: "Core"
-description: "Comprehensive guide to CometChat's core messaging features including instant messaging, media sharing, read receipts, and more"
+description: "Review CometChat Flutter UI Kit core features for messaging, media sharing, receipts, presence, reactions, threads, and calls."
---
-
+## Overview
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_chat_uikit` |
-| Required setup | `CometChatUIKit.init(uiKitSettings: UIKitSettings)` then `CometChatUIKit.login(uid)` — must complete before rendering any component |
-| Core features | Instant Messaging, Media Sharing, Read Receipts, Mark as Unread, Typing Indicator, User Presence, Reactions, Mentions, Rich Text Formatting, Quoted Reply, Search, Threaded Conversations, Moderation, Report Message, Group Chat |
-| Key components | `CometChatConversations` → [Conversations](/ui-kit/flutter/conversations), `CometChatMessageList` → [Message List](/ui-kit/flutter/message-list), `CometChatMessageComposer` → [Message Composer](/ui-kit/flutter/message-composer), `CometChatMessageHeader` → [Message Header](/ui-kit/flutter/message-header), `CometChatUsers` → [Users](/ui-kit/flutter/users), `CometChatGroups` → [Groups](/ui-kit/flutter/groups), `CometChatGroupMembers` → [Group Members](/ui-kit/flutter/group-members) |
-
-
-
-The UI Kit comprises a variety of widgets, each designed to work seamlessly with one another to deliver a comprehensive and intuitive chat experience.
-
-Here's how different UI Kit widgets work together to achieve CometChat's Core features:
-
-***
+The UI Kit comprises a variety of widgets, each designed to work seamlessly with one another to deliver a comprehensive and intuitive chat experience. Here's how different UI Kit widgets work together to achieve CometChat's Core features:
## Instant Messaging
At the heart of CometChat's functionality is the ability to support real-time text messaging. Users can send and receive instant messages, fostering quick and efficient communication.
-
- 
-
-
| Widgets | Functionality |
-| --- | --- |
-| [MessageComposer](/ui-kit/flutter/message-composer) | [MessageComposer](/ui-kit/flutter/message-composer) is a Widget that enables users to write and send a variety of messages. |
-| [MessageList](/ui-kit/flutter/message-list) | [MessageList](/ui-kit/flutter/message-list) is a Widget that renders a list of messages sent and messages received using [TextBubble](/ui-kit/flutter/message-bubble-styling#text-bubble). |
-
-***
+|---|---|
+| MessageComposer | Enables users to write and send a variety of messages. In V6, powered by `MessageComposerBloc` with rich text formatting support. |
+| MessageList | Renders a list of messages sent and received using TextBubble. In V6, powered by `MessageListBloc` with `diffutil_dart` for efficient updates. |
## Media Sharing
-Beyond text, CometChat allows users to share various media types within their conversations. This includes images, videos, audio files, and documents, enriching the chat experience and enabling more comprehensive communication.
-
-
- 
-
+Beyond text, CometChat allows users to share various media types within their conversations — images, videos, audio files, and documents.
| Widgets | Functionality |
-| --- | --- |
-| [MessageComposer](/ui-kit/flutter/message-composer) | [MessageComposer](/ui-kit/flutter/message-composer) is a Widget that has ActionSheet, ActionSheet is a menu that appears over the context of the app, providing multiple options for sharing media files. |
-| [MessageList](/ui-kit/flutter/message-list) | [MessageList](/ui-kit/flutter/message-list) is a Widget that renders different Media Message bubbles like [Image Bubble](/ui-kit/flutter/message-bubble-styling#image-bubble), [File Bubble](/ui-kit/flutter/message-bubble-styling#file-bubble), [Audio Bubble](/ui-kit/flutter/message-bubble-styling#audio-bubble), [Video Bubble](/ui-kit/flutter/message-bubble-styling#video-bubble) |
-
-***
+|---|---|
+| MessageComposer | Has ActionSheet for sharing media files. V6 adds inline audio recorder and multi-attachment support (in progress). |
+| MessageList | Renders different Media Message bubbles like Image Bubble, File Bubble, Audio Bubble, Video Bubble. |
## Read Receipts
-CometChat's Read Receipts feature provides visibility into the message status, letting users know when a message has been delivered and read. This brings clarity to the communication and ensures users are informed about the status of their messages.
-
-
- 
-
+CometChat's Read Receipts feature provides visibility into the message status, letting users know when a message has been delivered and read.
| Widgets | Functionality |
-| --- | --- |
-| [Conversations](/ui-kit/flutter/conversations) | [Conversations](/ui-kit/flutter/conversations) is a Widget that renders Conversations item List, Conversation item also displays the delivery status of the last message providing users with real-time updates on the status of their messages. |
-| [MessageList](/ui-kit/flutter/message-list) | [MessageList](/ui-kit/flutter/message-list) is a Widget that renders different types of Message bubbles, Read Receipt status is an integral part of all message bubbles, no matter the type, and provides real-time updates about the status of the message. |
-
-***
+|---|---|
+| Conversations | Displays the delivery status of the last message. |
+| MessageList | Read receipt status is an integral part of all message bubbles. |
+| MessageInformation | Provides transparency into the status of each sent message. |
## Mark As Unread
-Mark as Unread feature allows users to manually mark messages as unread, helping them keep track of important conversations they want to revisit later. When enabled, the message list can automatically start from the first unread message, making it easier to pick up where you left off.
-
-
- 
-
+Mark as Unread feature allows users to manually mark messages as unread, helping them keep track of important conversations they want to revisit later.
| Widgets | Functionality |
-| --- | --- |
-| [Message List](/ui-kit/flutter/message-list) | [Message List](/ui-kit/flutter/message-list) provides the "Mark as unread" option in message actions and supports starting from the first unread message when enabled. |
-| [Conversations](/ui-kit/flutter/conversations) | [Conversations](/ui-kit/flutter/conversations) widget listens to conversation updates and reflects the updated unread count in real-time. |
-
-***
+|---|---|
+| Message List | Provides the "Mark as unread" option in message actions and supports starting from the first unread message. |
+| Conversations | Reflects the updated unread count in real-time. |
## Typing Indicator
-The Typing Indicator feature in CometChat shows when a user is typing a response in real-time, fostering a more interactive and engaging chat environment. This feature enhances the real-time communication experience, making conversations feel more natural and fluid.
-
-
- 
-
+The Typing Indicator feature shows when a user is typing a response in real-time.
| Widgets | Functionality |
-| --- | --- |
-| [Conversations](/ui-kit/flutter/conversations) | [Conversations](/ui-kit/flutter/conversations) is a Widget that renders Conversations item List, Conversations item also shows real-time typing status indicators. This means that if a user in a one-on-one chat or a participant in a group chat is currently typing a message |
-| [Message Header](/ui-kit/flutter/message-header) | [Message Header](/ui-kit/flutter/message-header) that renders details of User or Groups in ToolBar. The MessageHeader also handles the Typing Indicator functionality. When a user or a member in a group is typing, the MessageHeader dynamically updates to display a 'typing...' status in real-time. |
-
-***
+|---|---|
+| Conversations | Shows real-time typing status indicators in conversation items. |
+| Message Header | Dynamically updates to display a 'typing…' status in real-time. |
## User Presence
-CometChat's User Presence feature allows users to see whether their contacts are online, offline. This helps users know the best time to initiate a conversation and sets expectations about response times.
-
-
- 
-
+CometChat's User Presence feature allows users to see whether their contacts are online or offline.
| Widgets | Functionality |
-| --- | --- |
-| [Conversations](/ui-kit/flutter/conversations) | [Conversations](/ui-kit/flutter/conversations) is a Widget that renders Conversations item List, Conversations item also shows user presence information. |
-| [Message Header](/ui-kit/flutter/message-header) | [Message Header](/ui-kit/flutter/message-header) that renders details of User or Groups in ToolBar. The MessageHeader also handles user Presence information. |
-| [Users](/ui-kit/flutter/users) | [Users](/ui-kit/flutter/users) renders list of users available in your app. It also responsible to render users Presence information. |
-| [Group Members](/ui-kit/flutter/group-members) | [Group Members](/ui-kit/flutter/group-members) renders list of users available in the group. The Group Members widget also handles user Presence information. |
-
-***
+|---|---|
+| Conversations | Shows user presence information in conversation items. |
+| Message Header | Handles user Presence information in the toolbar. |
+| Users | Renders users Presence information in the user list. |
+| Group Members | Handles user Presence information in the member list. |
## Reactions
-CometChat's Reactions feature adds a layer of expressiveness to your chat application by allowing users to react to messages. With Reactions, users can convey a range of emotions or express their thoughts on a particular message without typing out a full response, enhancing their user experience and fostering greater engagement.
-
-The number of reactions displayed depends on the width of the view. For instance, if a message contains 5 reactions but the width of the CometChatReactions view can only accommodate 4 reactions at a time, the first three reactions will be shown along with an additional UI element at the end of the row. This element indicates the number of other unique reactions that are not immediately visible, informing users of the total count of different reactions.
-
-In the example, tapping on this element (depicted as "+2" in the provided image) will by default trigger the CometChatReactionList widget. This action opens a modal sheet from the bottom of the screen, displaying all reactions received by the message.
-
-
- 
-
+CometChat's Reactions feature allows users to react to messages with emojis.
| Widgets | Functionality |
-| --- | --- |
-| [MessageList](/ui-kit/flutter/message-list) | [MessageList](/ui-kit/flutter/message-list) is a Widget that renders different types of Message bubbles, Irrespective of the type of message bubble, Reactions are an integral part and offer a more engaging, expressive way for users to respond to messages. |
-
-***
+|---|---|
+| MessageList | Reactions are an integral part of all message bubbles. Width-aware display shows visible reactions + "+N" overflow indicator. |
## Mentions
-Mentions is a robust feature provided by CometChat that enhances the interactivity and clarity of group or 1-1 chats by allowing users to directly address or refer to specific individuals in a conversation. The feature also supports group mentions like @all, enabling users to quickly notify all members in a group chat simultaneously.
-
-
- 
-
+Mentions enhances interactivity by allowing users to directly address specific individuals in a conversation. Supports `@all` for group mentions.
| Widgets | Functionality |
-| --- | --- |
-| [Conversations](/ui-kit/flutter/conversations) | [Conversations](/ui-kit/flutter/conversations) widget provides an enhanced user experience by integrating the Mentions feature. This means that from the conversation list itself, users can see where they or someone else have been specifically mentioned. |
-| [MessageComposer](/ui-kit/flutter/message-composer) | [MessageComposer](/ui-kit/flutter/message-composer) is a widget that allows users to craft and send various types of messages, including the usage of the Mentions feature for direct addressing within the conversation. |
-| [MessageList](/ui-kit/flutter/message-list) | [MessageList](/ui-kit/flutter/message-list) is a widget that displays a list of sent and received messages. It also supports the rendering of Mentions, enhancing the readability and interactivity of conversations. |
-
-***
+|---|---|
+| Conversations | Shows where users have been specifically mentioned. |
+| MessageComposer | Allows users to use the Mentions feature for direct addressing. |
+| MessageList | Supports the rendering of Mentions in messages. |
-## Rich Text Formatting
-
-Rich Text Formatting allows users to style their messages with bold, italic, strikethrough, code, code blocks, blockquotes, ordered/unordered lists, and links. This brings richer expression to conversations and helps users emphasize key points.
+## Quoted Reply
-
-
-
+Quoted Reply enables users to quickly reply to specific messages by selecting the "Reply" option from a message's action menu.
| Widgets | Functionality |
-| --- | --- |
-| [CompactMessageComposer](/ui-kit/flutter/compact-message-composer#rich-text-formatting) | [CompactMessageComposer](/ui-kit/flutter/compact-message-composer#rich-text-formatting) provides a built-in rich text editor with formatting toolbar and text selection menu items for bold, italic, strikethrough, code, links, lists, blockquotes, and code blocks. |
-| [MessageList](/ui-kit/flutter/message-list) | [MessageList](/ui-kit/flutter/message-list) renders formatted messages with the appropriate styling automatically applied, ensuring that rich text formatting is displayed exactly as intended by the sender. |
-
-***
+|---|---|
+| MessageList | Supports replying to messages via the "Reply" option. |
+| MessageComposer | Shows the quoted reply above the input field using `CometChatMessagePreview` (renamed from `CometChatEditPreview` in V5). |
-## Quoted Reply
-
-Quoted Reply is a robust feature provided by CometChat that enables users to quickly reply to specific messages by selecting the "Reply" option from a message's action menu. This enhances context, keeps conversations organized, and improves overall chat experience in both 1-1 and group chats.
+## Threaded Conversations
-
- 
-
+The Threaded Conversations feature enables users to respond directly to a specific message in a chat.
| Widgets | Functionality |
-| --- | --- |
-| [MessageList](/ui-kit/flutter/message-list) | [MessageList](/ui-kit/flutter/message-list) supports replying to messages via the "Reply" option. Users can select "Reply" on a message to open the composer with the quoted reply pre-filled, maintaining context. |
-| [MessageComposer](/ui-kit/flutter/message-composer) | [MessageComposer](/ui-kit/flutter/message-composer) works seamlessly with Quoted Message by showing the quoted reply above the input field, letting users compose their response in proper context. |
-
-***
+|---|---|
+| Threaded Messages | Displays all replies made to a particular message. In V6, powered by `ThreadedHeaderBloc`. |
## Conversation and Advanced Search
-Conversation and Advanced Search is a powerful feature provided by CometChat that enables users to quickly find conversations, messages, and media across chats in real time. It supports filters, scopes, and custom actions, allowing users to locate content efficiently while keeping the chat experience smooth and intuitive.
-
-
- 
-
+Enables users to quickly find conversations, messages, and media across chats in real time.
| Widgets | Functionality |
-| --- | --- |
-| [Search](/ui-kit/flutter/search) | [Search](/ui-kit/flutter/search) allows users to search across conversations and messages in real time. Users can click on a result to open the conversation or jump directly to a specific message. |
-| [Message Header](/ui-kit/flutter/message-header) | [Message Header](/ui-kit/flutter/message-header) shows the search button in the chat header, allowing users to search within a conversation. |
-| [MessageList](/ui-kit/flutter/message-list) | [MessageList](/ui-kit/flutter/message-list) shows the selected message when clicked from search results and highlights it in the message list. |
-| [MessageComposer](/ui-kit/flutter/message-composer) | [MessageComposer](/ui-kit/flutter/message-composer) displays the search input. |
-
-***
+|---|---|
+| Search | Allows users to search across conversations and messages. In V6, powered by a single consolidated `SearchBloc`. |
+| Message Header | Shows the search button in the chat header. |
+| MessageList | Shows the selected message when clicked from search results. |
## Moderation
-CometChat's Message Moderation feature helps maintain a safe and respectful chat environment by automatically filtering and managing inappropriate content. Messages can be automatically blocked or flagged based on predefined rules, ensuring harmful content is handled before it reaches users.
-
-
- 
-
-
-
-Learn more about setting up moderation rules and managing content in the [Moderation](/moderation/overview) documentation.
-
+CometChat's Message Moderation feature helps maintain a safe and respectful chat environment by automatically filtering and managing inappropriate content.
| Widgets | Functionality |
-| --- | --- |
-| [Message List](/ui-kit/flutter/message-list) | [Message List](/ui-kit/flutter/message-list) automatically handles moderated messages, displaying blocked content appropriately based on your moderation settings. |
-
-After implementing moderation rules, users can report messages they find inappropriate or harmful. As a next step, you can enable the **[Report Message](#report-message)** feature to allow users to flag messages for review by moderators.
-
-***
+|---|---|
+| Message List | Automatically handles moderated messages, displaying blocked content appropriately. |
## Report Message
-The Report Message feature allows users to report inappropriate or harmful messages within the chat. Users can choose from predefined reasons and provide additional remarks for detailed context. This feature helps maintain a safe and respectful chat environment.
-
-
-Learn more about how flagged messages are handled, reviewed, and moderated in the [Flagged Messages](/moderation/flagged-messages) documentation.
-
-
-
- 
-
+The Report Message feature allows users to report inappropriate or harmful messages within the chat.
| Widgets | Functionality |
-| --- | --- |
-| [MessageList](/ui-kit/flutter/message-list) | [MessageList](/ui-kit/flutter/message-list) provides the "Report Message" option in the message actions menu, allowing users to initiate the reporting process for inappropriate messages. |
-
-***
-
-## Threaded Conversations
-
-The Threaded Conversations feature enables users to respond directly to a specific message in a chat. This keeps conversations organized and enhances the user experience by maintaining context, especially in group chats.
-
-
- 
-
-
-| Widgets | Functionality |
-| --- | --- |
-| [Threaded Messages](/ui-kit/flutter/threaded-messages-header) | [Threaded Messages](/ui-kit/flutter/threaded-messages-header) that displays all replies made to a particular message in a conversation. |
-
-***
+|---|---|
+| MessageList | Provides the "Report Message" option in the message actions menu. |
## Group Chat
-CometChat facilitates Group Chats, allowing users to have conversations with multiple participants simultaneously. This feature is crucial for team collaborations, group discussions, social communities, and more.
-
-
- 
-
-
-For a comprehensive understanding and guide on implementing and using the Groups feature in CometChat, you should refer to our detailed guide on [Groups](/ui-kit/flutter/groups).
-
-***
-
-## Next Steps
-
-
-
- Learn how to send text, media, and custom messages
-
-
- Display and manage messages with real-time updates
-
-
- Show conversation lists with typing indicators and receipts
-
-
- Create and manage group conversations
-
-
+CometChat facilitates Group Chats, allowing users to have conversations with multiple participants simultaneously.
-***
+For a comprehensive guide on implementing Groups, refer to our detailed [Groups guide](/ui-kit/flutter/guide-group-chat).
diff --git a/ui-kit/flutter/custom-text-formatter-guide.mdx b/ui-kit/flutter/custom-text-formatter-guide.mdx
index c0c2a9308..60909eebd 100644
--- a/ui-kit/flutter/custom-text-formatter-guide.mdx
+++ b/ui-kit/flutter/custom-text-formatter-guide.mdx
@@ -1,401 +1,267 @@
---
-title: "Custom Text Formatter"
-description: "Extend the CometChatTextFormatter base class to implement custom inline text patterns with regex and callbacks in Flutter."
+title: "Custom Text Formatter Guide"
+description: "Build a CometChat Flutter UI Kit text formatter for hashtags, links, tracked characters, composer suggestions, and message styling."
---
-
+This guide walks you through building a custom `CometChatTextFormatter` that detects `#hashtags` in messages, highlights them, and shows a suggestion dropdown in the composer.
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_chat_uikit` |
-| Key class | `CometChatTextFormatter` (abstract base class for custom formatters) |
-| Required setup | `CometChatUIKit.init(uiKitSettings: uiKitSettings)` then `CometChatUIKit.login("UID")` |
-| Purpose | Extend to create custom inline text patterns with regex, styling, and callbacks |
-| Features | Text formatting, customizable styles, dynamic text replacement, input field integration |
-| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
-| Related | [ShortCut Formatter](/ui-kit/flutter/shortcut-formatter-guide) \| [Mentions Formatter](/ui-kit/flutter/mentions-formatter-guide) \| [Custom Mentions Formatter](/ui-kit/flutter/custom-mentions-formatter-guide) \| [All Guides](/ui-kit/flutter/guide-overview) |
+## Prerequisites
-
+- CometChat Flutter UI Kit V6 installed
+- Familiarity with [Text Formatters](/ui-kit/flutter/customization-text-formatters)
-`CometChatTextFormatter` is an abstract class for formatting text in the message composer and message bubbles. Extend it to build custom formatters — hashtags, keywords, or any regex-based pattern.
+## Step 1: Create the Formatter Class
-| Capability | Description |
-| --- | --- |
-| Text formatting | Auto-format text based on regex patterns and styles |
-| Custom styles | Set colors, fonts, and backgrounds for matched text |
-| Dynamic replacement | Regex-based find-and-replace in user input |
-| Input integration | Real-time monitoring of the composer input field |
-| Attributed text | Build styled text spans for message bubbles |
-
----
-
-## Steps
-
-### 1. Import the base class
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-```
-
-### 2. Extend CometChatTextFormatter
-
-```dart
-class HashTagTextFormatter extends CometChatTextFormatter {
- HashTagTextFormatter() : super(
- trackingCharacter: '#',
- pattern: RegExp(r'\B#(\w+)\b'),
- );
-
- // Override required methods...
-}
-```
-
-### 3. Configure tracking character and regex
-
-Set the character that triggers formatting and the regex to match.
-
-```dart
-HashTagTextFormatter() : super(
- trackingCharacter: '#',
- pattern: RegExp(r'\B#(\w+)\b'),
- showLoadingIndicator: false,
-);
-```
-
-### 4. Implement required methods
-
-```dart
-@override
-void init() {
- // Initialize formatter
-}
-
-@override
-void handlePreMessageSend(BuildContext context, BaseMessage baseMessage) {
- // Process message before sending
-}
-
-@override
-TextStyle getMessageInputTextStyle(BuildContext context) {
- return TextStyle(color: Colors.blue);
-}
-
-@override
-void onScrollToBottom(TextEditingController textEditingController) {
- // Handle scroll events
-}
-
-@override
-void onChange(TextEditingController textEditingController, String previousText) {
- // Handle text changes
-}
-```
-
-### 5. Customize message bubble styling
-
-```dart
-@override
-TextStyle getMessageBubbleTextStyle(
- BuildContext context,
- BubbleAlignment? alignment,
- {bool forConversation = false}
-) {
- return TextStyle(
- color: alignment == BubbleAlignment.right
- ? Colors.white
- : Colors.blue,
- fontWeight: FontWeight.bold,
- decoration: TextDecoration.underline,
- );
-}
-```
-
----
-
-## Example
-
-A hashtag formatter used with [CometChatMessageList](/ui-kit/flutter/message-list) and [CometChatMessageComposer](/ui-kit/flutter/message-composer).
-
-{/*
- 
- */}
+Extend `CometChatTextFormatter` and set the tracking character to `#`:
-
+
```dart
import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
import 'package:flutter/material.dart';
-class HashTagTextFormatter extends CometChatTextFormatter {
- HashTagTextFormatter() : super(
- trackingCharacter: '#',
- pattern: RegExp(r'\B#(\w+)\b'),
- showLoadingIndicator: false,
- );
+class HashtagFormatter extends CometChatTextFormatter {
+ final List _allHashtags = [
+ 'flutter', 'dart', 'cometchat', 'uikit', 'mobile',
+ 'android', 'ios', 'web', 'chat', 'messaging',
+ ];
- @override
- void init() {
- // Initialization logic
- }
-
- @override
- void handlePreMessageSend(BuildContext context, BaseMessage baseMessage) {
- // Process hashtags before sending
- }
+ HashtagFormatter() : super(trackingCharacter: '#');
@override
- TextStyle getMessageInputTextStyle(BuildContext context) {
- CometChatColorPalette colorPalette = CometChatThemeHelper.getColorPalette(context);
- return TextStyle(
- color: colorPalette.primary,
- fontWeight: FontWeight.w500,
- );
- }
-
- @override
- TextStyle getMessageBubbleTextStyle(
- BuildContext context,
- BubbleAlignment? alignment,
- {bool forConversation = false}
- ) {
- CometChatColorPalette colorPalette = CometChatThemeHelper.getColorPalette(context);
- return TextStyle(
- color: alignment == BubbleAlignment.right
- ? colorPalette.white
- : colorPalette.primary,
- fontWeight: FontWeight.bold,
- decoration: TextDecoration.underline,
- );
- }
-
- @override
- void onScrollToBottom(TextEditingController textEditingController) {
- // Handle scroll to bottom
- }
-
- @override
- void onChange(TextEditingController textEditingController, String previousText) {
- // Handle text changes - detect new hashtags
- String currentText = textEditingController.text;
- if (currentText.contains('#')) {
- // Process hashtag
- }
- }
-
- @override
- List getAttributedText(
- String text,
- BuildContext context,
- BubbleAlignment? alignment,
- {List? existingAttributes,
- Function(String)? onTap,
- bool forConversation = false}
- ) {
- return super.getAttributedText(
- text,
- context,
- alignment,
- existingAttributes: existingAttributes,
- onTap: onTap ?? (hashtag) {
- // Handle hashtag tap - e.g., search for hashtag
- print('Tapped hashtag: $hashtag');
- },
- forConversation: forConversation,
- );
+ void init() {
+ // Called when the formatter is initialized
}
}
```
-
+
-
+## Step 2: Implement Search
-Pass the formatter via the `textFormatters` property.
+The `search` method is called whenever the user types after the tracking character. Filter your data and set the suggestion list:
+
+
```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:flutter/material.dart';
-
-class MessageListDemo extends StatefulWidget {
- const MessageListDemo({super.key});
-
- @override
- State createState() => _MessageListDemoState();
-}
-
-class _MessageListDemoState extends State {
- User? chatUser;
-
- @override
- void initState() {
- super.initState();
- CometChat.getUser("uid").then((user) {
- setState(() {
- chatUser = user;
- });
- });
+@override
+void search(String query) {
+ if (query.isEmpty) {
+ setSuggestionItems(_allHashtags
+ .map((tag) => SuggestionItem(
+ id: tag,
+ name: '#$tag',
+ leadingIcon: Icon(Icons.tag, size: 20),
+ ))
+ .toList());
+ return;
}
- @override
- Widget build(BuildContext context) {
- if (chatUser == null) {
- return const Center(child: CircularProgressIndicator());
- }
-
- return CometChatMessageList(
- user: chatUser,
- textFormatters: [HashTagTextFormatter()],
- );
- }
+ final filtered = _allHashtags
+ .where((tag) => tag.toLowerCase().contains(query.toLowerCase()))
+ .map((tag) => SuggestionItem(
+ id: tag,
+ name: '#$tag',
+ leadingIcon: Icon(Icons.tag, size: 20),
+ ))
+ .toList();
+
+ setSuggestionItems(filtered);
}
```
-
----
-
-## Methods Reference
+## Step 3: Handle Suggestion Selection
-| Field | Description |
-| --- | --- |
-| `trackingCharacter` | Character that starts tracking (e.g. `#` for hashtags) |
-| `pattern` | Regex pattern to match text for formatting |
-| `showLoadingIndicator` | Whether to show loading indicator during search |
-| `messageBubbleTextStyle` | Function to style message bubble text |
-| `messageInputTextStyle` | Function to style composer input text |
-| `message` | Current message being processed |
-| `user` | User context for the formatter |
-| `group` | Group context for the formatter |
-
----
-
-## Override Methods
+When the user taps a suggestion, insert the hashtag into the composer:
-
-
-Initialize the formatter. Called when the formatter is first used.
-
+
```dart
@override
-void init() {
- // Setup any initial state
+void onItemClick(SuggestionItem item, User? user, Group? group) {
+ // The base class handles inserting the text into the composer.
+ // You can add custom logic here, like tracking analytics.
+ super.onItemClick(item, user, group);
}
```
-
+
-
+## Step 4: Style Hashtags in Message Bubbles
-Process the message before it's sent. Use this to modify message metadata.
+Override `buildMessageBubbleSpan` to apply styling to hashtags when they appear in sent/received messages:
+
+
```dart
@override
-void handlePreMessageSend(BuildContext context, BaseMessage baseMessage) {
- // Add hashtag metadata to message
- if (baseMessage is TextMessage) {
- final hashtags = pattern?.allMatches(baseMessage.text)
- .map((m) => m.group(1))
- .toList();
- // Store hashtags in message metadata
+List getFormattedText(
+ String text,
+ BuildContext context,
+ BubbleAlignment alignment,
+) {
+ final results = [];
+ final regex = RegExp(r'#\w+');
+
+ for (final match in regex.allMatches(text)) {
+ results.add(CometChatTextFormatterResult(
+ start: match.start,
+ end: match.end,
+ style: TextStyle(
+ color: alignment == BubbleAlignment.right
+ ? Colors.white.withOpacity(0.8)
+ : Color(0xFF6851D6),
+ fontWeight: FontWeight.w600,
+ ),
+ onTap: () {
+ // Handle hashtag tap — navigate to hashtag feed, etc.
+ debugPrint('Tapped hashtag: ${match.group(0)}');
+ },
+ ));
}
+
+ return results;
}
```
-
+
-
+## Step 5: Pre-Send Hook (Optional)
-Returns the TextStyle for formatted text in message bubbles.
+Modify the message before it's sent — for example, attach hashtag metadata:
+
+
```dart
@override
-TextStyle getMessageBubbleTextStyle(
- BuildContext context,
- BubbleAlignment? alignment,
- {bool forConversation = false}
-) {
- return TextStyle(
- color: Colors.blue,
- fontWeight: FontWeight.bold,
- );
+BaseMessage handlePreMessageSend(BaseMessage message) {
+ if (message is TextMessage) {
+ final regex = RegExp(r'#\w+');
+ final hashtags = regex
+ .allMatches(message.text)
+ .map((m) => m.group(0)!.substring(1))
+ .toList();
+
+ if (hashtags.isNotEmpty) {
+ message.metadata ??= {};
+ message.metadata!['hashtags'] = hashtags;
+ }
+ }
+ return message;
}
```
-
+
-
+## Step 6: Register the Formatter
-Returns styled text spans for the message bubble.
+Pass your formatter to the components that should use it:
+
+
```dart
-@override
-List getAttributedText(
- String text,
- BuildContext context,
- BubbleAlignment? alignment,
- {List? existingAttributes,
- Function(String)? onTap,
- bool forConversation = false}
-) {
- // Return attributed text with styling
- return super.getAttributedText(
- text, context, alignment,
- existingAttributes: existingAttributes,
- onTap: onTap,
- forConversation: forConversation,
- );
-}
+final hashtagFormatter = HashtagFormatter();
+
+// On the message list (for rendering)
+CometChatMessageList(
+ user: user,
+ textFormatters: [
+ CometChatMentionsFormatter(), // Keep default mentions
+ hashtagFormatter,
+ ],
+)
+
+// On the composer (for input suggestions)
+CometChatMessageComposer(
+ user: user,
+ textFormatters: [
+ CometChatMentionsFormatter(),
+ hashtagFormatter,
+ ],
+)
```
-
+
-
-
-Called when text changes in the composer.
+## Complete Example
+
+
```dart
-@override
-void onChange(TextEditingController textEditingController, String previousText) {
- // Detect and process new patterns
-}
-```
+class HashtagFormatter extends CometChatTextFormatter {
+ final List _allHashtags = [
+ 'flutter', 'dart', 'cometchat', 'uikit', 'mobile',
+ ];
-
-
+ HashtagFormatter() : super(trackingCharacter: '#');
----
+ @override
+ void init() {}
-## Built-in Formatters
+ @override
+ void search(String query) {
+ final filtered = query.isEmpty
+ ? _allHashtags
+ : _allHashtags.where(
+ (tag) => tag.toLowerCase().contains(query.toLowerCase()),
+ ).toList();
+
+ setSuggestionItems(filtered
+ .map((tag) => SuggestionItem(
+ id: tag,
+ name: '#$tag',
+ leadingIcon: Icon(Icons.tag, size: 20),
+ ))
+ .toList());
+ }
-Flutter UI Kit includes these pre-built formatters:
+ @override
+ List getFormattedText(
+ String text,
+ BuildContext context,
+ BubbleAlignment alignment,
+ ) {
+ final results = [];
+ final regex = RegExp(r'#\w+');
+
+ for (final match in regex.allMatches(text)) {
+ results.add(CometChatTextFormatterResult(
+ start: match.start,
+ end: match.end,
+ style: TextStyle(
+ color: alignment == BubbleAlignment.right
+ ? Colors.white.withOpacity(0.8)
+ : Color(0xFF6851D6),
+ fontWeight: FontWeight.w600,
+ ),
+ ));
+ }
+ return results;
+ }
-| Formatter | Description |
-| --- | --- |
-| `CometChatMentionsFormatter` | @mentions with user suggestions |
-| `CometChatUrlFormatter` | Auto-detect and style URLs |
-| `CometChatEmailFormatter` | Auto-detect and style email addresses |
-| `CometChatPhoneNumberFormatter` | Auto-detect and style phone numbers |
+ @override
+ BaseMessage handlePreMessageSend(BaseMessage message) {
+ if (message is TextMessage) {
+ final hashtags = RegExp(r'#\w+')
+ .allMatches(message.text)
+ .map((m) => m.group(0)!.substring(1))
+ .toList();
+ if (hashtags.isNotEmpty) {
+ message.metadata ??= {};
+ message.metadata!['hashtags'] = hashtags;
+ }
+ }
+ return message;
+ }
+}
+```
+
+
----
+## Related
-## Next Steps
-
-
-
- Add @mentions with styled tokens.
-
-
- Build a custom mentions formatter with filtered suggestions.
-
-
- Customize the message input component.
-
-
- Browse all feature and formatter guides.
-
-
- Full working sample application on GitHub.
-
-
+- [Text Formatters](/ui-kit/flutter/customization-text-formatters) — Text formatter API reference.
+- [Mentions Formatter Guide](/ui-kit/flutter/mentions-formatter-guide) — Built-in mentions formatter.
+- [Shortcut Formatter Guide](/ui-kit/flutter/shortcut-formatter-guide) — Shortcut text replacement.
diff --git a/ui-kit/flutter/v6/customization-bloc-data.mdx b/ui-kit/flutter/customization-bloc-data.mdx
similarity index 94%
rename from ui-kit/flutter/v6/customization-bloc-data.mdx
rename to ui-kit/flutter/customization-bloc-data.mdx
index f23d84375..cc57a81ff 100644
--- a/ui-kit/flutter/v6/customization-bloc-data.mdx
+++ b/ui-kit/flutter/customization-bloc-data.mdx
@@ -117,11 +117,11 @@ All list-based BLoCs use the `ListBase` mixin with these override hooks:
Each component's BLoC has its own events and methods. See the individual component docs for details:
-- [Message List — BLoC Events & Methods](/ui-kit/flutter/v6/message-list#advanced)
-- [Conversations — BLoC Events](/ui-kit/flutter/v6/conversations#advanced)
-- [Users — BLoC Events](/ui-kit/flutter/v6/users#advanced)
-- [Groups — BLoC Events](/ui-kit/flutter/v6/groups#advanced)
-- [Group Members — BLoC Events](/ui-kit/flutter/v6/group-members#advanced)
+- [Message List — BLoC Events & Methods](/ui-kit/flutter/message-list#advanced)
+- [Conversations — BLoC Events](/ui-kit/flutter/conversations#advanced)
+- [Users — BLoC Events](/ui-kit/flutter/users#advanced)
+- [Groups — BLoC Events](/ui-kit/flutter/groups#advanced)
+- [Group Members — BLoC Events](/ui-kit/flutter/group-members#advanced)
## Lifecycle Callbacks
@@ -146,8 +146,8 @@ CometChatMessageList(
## Related
-- [Message List](/ui-kit/flutter/v6/message-list) — Full message list component reference.
-- [Customization Overview](/ui-kit/flutter/v6/customization-overview) — See all customization categories.
+- [Message List](/ui-kit/flutter/message-list) — Full message list component reference.
+- [Customization Overview](/ui-kit/flutter/customization-overview) — See all customization categories.
---
diff --git a/ui-kit/flutter/v6/customization-datasource.mdx b/ui-kit/flutter/customization-datasource.mdx
similarity index 94%
rename from ui-kit/flutter/v6/customization-datasource.mdx
rename to ui-kit/flutter/customization-datasource.mdx
index 972038527..d3ea34c48 100644
--- a/ui-kit/flutter/v6/customization-datasource.mdx
+++ b/ui-kit/flutter/customization-datasource.mdx
@@ -203,7 +203,7 @@ Unlike Android's `DataSourceDecorator` which applies globally, Flutter's templat
## Related
-- [Message Template](/ui-kit/flutter/v6/message-template) — Full template structure and examples.
-- [Menu & Options](/ui-kit/flutter/v6/customization-menu-options) — Component-level option customization.
-- [Text Formatters](/ui-kit/flutter/v6/customization-text-formatters) — Custom text processing.
-- [Customization Overview](/ui-kit/flutter/v6/customization-overview) — See all customization categories.
+- [Message Template](/ui-kit/flutter/message-template) — Full template structure and examples.
+- [Menu & Options](/ui-kit/flutter/customization-menu-options) — Component-level option customization.
+- [Text Formatters](/ui-kit/flutter/customization-text-formatters) — Custom text processing.
+- [Customization Overview](/ui-kit/flutter/customization-overview) — See all customization categories.
diff --git a/ui-kit/flutter/v6/customization-menu-options.mdx b/ui-kit/flutter/customization-menu-options.mdx
similarity index 89%
rename from ui-kit/flutter/v6/customization-menu-options.mdx
rename to ui-kit/flutter/customization-menu-options.mdx
index 9a9917751..948ec8896 100644
--- a/ui-kit/flutter/v6/customization-menu-options.mdx
+++ b/ui-kit/flutter/customization-menu-options.mdx
@@ -1,6 +1,6 @@
---
title: "Menu & Options"
-description: "Add, replace, or extend long-press actions and composer attachment options on components."
+description: "Customize CometChat Flutter UI Kit message options, long-press menus, composer attachments, and template-level actions."
---
Components provide long-press context menus (e.g., on conversations or messages) and the message composer provides attachment options. You can customize all of these at the component level or via message templates.
@@ -156,6 +156,6 @@ CometChatConversations(
## Related
-- [Message Template](/ui-kit/flutter/v6/message-template) — Full template structure including options.
-- [Message List](/ui-kit/flutter/v6/message-list) — Option visibility properties.
-- [Customization Overview](/ui-kit/flutter/v6/customization-overview) — See all customization categories.
+- [Message Template](/ui-kit/flutter/message-template) — Full template structure including options.
+- [Message List](/ui-kit/flutter/message-list) — Option visibility properties.
+- [Customization Overview](/ui-kit/flutter/customization-overview) — See all customization categories.
diff --git a/ui-kit/flutter/v6/customization-overview.mdx b/ui-kit/flutter/customization-overview.mdx
similarity index 79%
rename from ui-kit/flutter/v6/customization-overview.mdx
rename to ui-kit/flutter/customization-overview.mdx
index 724c7e4b6..ba6d86453 100644
--- a/ui-kit/flutter/v6/customization-overview.mdx
+++ b/ui-kit/flutter/customization-overview.mdx
@@ -60,29 +60,29 @@ CometChatMessageList(
The UI Kit provides seven categories of customization entry points. Each category has a dedicated guide:
-
+
Replace specific regions of a component's UI (leading view, title, subtitle, trailing view) using builder callbacks.
-
+
Customize visual appearance using ThemeData extensions or component-level style objects.
-
+
Configure data fetching with RequestBuilders, provide custom BLoC instances, override repositories and datasources.
-
+
Replace the default empty, error, and loading state views with custom widgets.
-
+
Create custom text processors for hashtags, mentions, links, or any pattern using the CometChatTextFormatter API.
-
+
Add, replace, or extend long-press actions and composer attachment options on components.
-
+
Customize how messages are rendered using MessageTemplateUtils — the central registry for message templates, options, and formatters.
## What's Next
-If you're new to customization, start with [View Slots](/ui-kit/flutter/v6/customization-view-slots) for quick UI changes, or [Styles](/ui-kit/flutter/v6/component-styling) to match your brand. For advanced use cases like custom message types or global behavior changes, head to [Message Templates](/ui-kit/flutter/v6/customization-datasource).
+If you're new to customization, start with [View Slots](/ui-kit/flutter/customization-view-slots) for quick UI changes, or [Styles](/ui-kit/flutter/component-styling) to match your brand. For advanced use cases like custom message types or global behavior changes, head to [Message Templates](/ui-kit/flutter/customization-datasource).
diff --git a/ui-kit/flutter/v6/customization-state-views.mdx b/ui-kit/flutter/customization-state-views.mdx
similarity index 93%
rename from ui-kit/flutter/v6/customization-state-views.mdx
rename to ui-kit/flutter/customization-state-views.mdx
index f81b85102..c115e95dd 100644
--- a/ui-kit/flutter/v6/customization-state-views.mdx
+++ b/ui-kit/flutter/customization-state-views.mdx
@@ -1,6 +1,6 @@
---
title: "State Views"
-description: "Replace the default empty, error, and loading state views with custom widgets."
+description: "Replace CometChat Flutter UI Kit empty, error, loading, and chat greeting state views with custom Flutter widgets."
---
Components display state views when the list is empty, an error occurs, or data is loading. You can replace these with custom widgets.
@@ -153,4 +153,4 @@ CometChatMessageList(
## Related
-- [Customization Overview](/ui-kit/flutter/v6/customization-overview) — See all customization categories.
+- [Customization Overview](/ui-kit/flutter/customization-overview) — See all customization categories.
diff --git a/ui-kit/flutter/v6/customization-text-formatters.mdx b/ui-kit/flutter/customization-text-formatters.mdx
similarity index 89%
rename from ui-kit/flutter/v6/customization-text-formatters.mdx
rename to ui-kit/flutter/customization-text-formatters.mdx
index 6651b54a4..dd83ace05 100644
--- a/ui-kit/flutter/v6/customization-text-formatters.mdx
+++ b/ui-kit/flutter/customization-text-formatters.mdx
@@ -145,10 +145,10 @@ CometChatMessageList(
-See the [Mentions Formatter Guide](/ui-kit/flutter/v6/mentions-formatter-guide) for detailed styling and behavior customization.
+See the [Mentions Formatter Guide](/ui-kit/flutter/mentions-formatter-guide) for detailed styling and behavior customization.
## Related
-- [Mentions Formatter Guide](/ui-kit/flutter/v6/mentions-formatter-guide) — Built-in mentions formatter reference.
-- [Shortcut Formatter Guide](/ui-kit/flutter/v6/shortcut-formatter-guide) — Shortcut text replacement formatter.
-- [Customization Overview](/ui-kit/flutter/v6/customization-overview) — See all customization categories.
+- [Mentions Formatter Guide](/ui-kit/flutter/mentions-formatter-guide) — Built-in mentions formatter reference.
+- [Shortcut Formatter Guide](/ui-kit/flutter/shortcut-formatter-guide) — Shortcut text replacement formatter.
+- [Customization Overview](/ui-kit/flutter/customization-overview) — See all customization categories.
diff --git a/ui-kit/flutter/v6/customization-view-slots.mdx b/ui-kit/flutter/customization-view-slots.mdx
similarity index 95%
rename from ui-kit/flutter/v6/customization-view-slots.mdx
rename to ui-kit/flutter/customization-view-slots.mdx
index 49066f259..b08790615 100644
--- a/ui-kit/flutter/v6/customization-view-slots.mdx
+++ b/ui-kit/flutter/customization-view-slots.mdx
@@ -131,5 +131,5 @@ When you set `bubbleView` on a template, all other template slots (`headerView`,
## Related
-- [Message Template](/ui-kit/flutter/v6/message-template) — Full template structure for message bubbles.
-- [Customization Overview](/ui-kit/flutter/v6/customization-overview) — See all customization categories.
+- [Message Template](/ui-kit/flutter/message-template) — Full template structure for message bubbles.
+- [Customization Overview](/ui-kit/flutter/customization-overview) — See all customization categories.
diff --git a/ui-kit/flutter/events.mdx b/ui-kit/flutter/events.mdx
index 022885d91..127234dba 100644
--- a/ui-kit/flutter/events.mdx
+++ b/ui-kit/flutter/events.mdx
@@ -1,61 +1,17 @@
---
title: "Events"
-description: "Listen to and handle real-time events for users, groups, conversations, messages, calls, and UI interactions in Flutter UI Kit"
+description: "Handle CometChat Flutter UI Kit events for users, groups, messages, conversations, calls, and UI-level interactions."
---
-
-
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_chat_uikit` |
-| Conversation events | `ccConversationDeleted`, `ccUpdateConversation` |
-| User events | `ccUserBlocked`, `ccUserUnblocked` |
-| Group events | `ccGroupCreated`, `ccGroupDeleted`, `ccGroupLeft`, `ccGroupMemberScopeChanged`, `ccGroupMemberKicked`, `ccGroupMemberBanned`, `ccGroupMemberUnbanned`, `ccGroupMemberJoined`, `ccGroupMemberAdded`, `ccOwnershipChanged` |
-| Message events | `ccMessageSent`, `ccMessageEdited`, `ccReplyToMessage`, `ccMessageDeleted`, `ccMessageRead`, `ccLiveReaction`, `ccMessageForwarded`, plus SDK listener events |
-| Call events | `ccOutgoingCall`, `ccCallAccepted`, `ccCallRejected`, `ccCallEnded` |
-| UI events | `ccActiveChatChanged`, `showPanel`, `hidePanel`, `openChat`, `ccComposeMessage`, `onAiFeatureTapped` |
-| Purpose | Decoupled communication between UI Kit components — subscribe to events to react to changes without direct component references |
-
-
-
-{/* TL;DR for Agents and Quick Reference */}
-
-**Quick Reference for AI Agents & Developers**
-
-```dart
-// Add event listener
-CometChatMessageEvents.addMessagesListener("LISTENER_ID", this);
-
-// Remove event listener
-CometChatMessageEvents.removeMessagesListener("LISTENER_ID");
-
-// Implement listener methods
-@override
-void ccMessageSent(BaseMessage message, MessageStatus messageStatus) {
- // Handle message sent event
-}
-```
-
-**Available Event Types:**
-- **User Events** → Block/Unblock users
-- **Group Events** → Create, delete, join, leave groups
-- **Conversation Events** → Delete conversations, update conversations
-- **Message Events** → Send, edit, delete, receive messages, reactions, AI messages
-- **Call Events** → Outgoing, accepted, rejected, ended calls
-- **UI Events** → Show/hide panels, active chat changes
-
+## Overview
Events allow for a decoupled, flexible architecture where different parts of the application can interact without having to directly reference each other. This makes it easier to create complex, interactive experiences, as well as to extend and customize the functionality provided by the CometChat UI Kit.
-Both Components and Composite Components have the ability to emit events. These events are dispatched in response to certain changes or user interactions within the component. By emitting events, these components allow other parts of the application to react to changes or interactions, thus enabling dynamic and interactive behavior within the application.
-
-***
-
-## User Events
+> The event system is identical between V5 and V6. All event classes, listeners, and APIs work the same way.
-`CometChatUserEvents` emit events when the logged-in user executes actions on another user. This class provides methods to add and remove listeners for user events, as well as methods to handle specific user actions such as blocking and unblocking users.
+### User Events
-**Available Events:**
+`CometChatUserEvents` emit events when the logged-in user executes actions on another user.
1. `ccUserBlocked`: Triggered when the logged-in user blocks another user.
2. `ccUserUnblocked`: Triggered when the logged-in user unblocks another user.
@@ -64,40 +20,28 @@ Both Components and Composite Components have the ability to emit events. These
```dart
import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:flutter/material.dart';
-
-class UserEventsExample extends StatefulWidget {
- const UserEventsExample({super.key});
-
- @override
- State createState() => _UserEventsExampleState();
-}
-class _UserEventsExampleState extends State with CometChatUserEventListener {
- String listenerID = "unique_listener_ID";
-
+class _YourScreenState extends State with CometChatUserEventListener {
@override
void initState() {
super.initState();
-
- CometChatUserEvents.addUsersListener(listenerID, this); // Add the listener
+ CometChatUserEvents.addUsersListener("listenerId", this);
}
@override
void dispose() {
super.dispose();
-
- CometChatUserEvents.removeUsersListener(listenerID); // Remove the listener
+ CometChatUserEvents.removeUsersListener("listenerId");
}
@override
void ccUserBlocked(User user) {
- // TODO("Not yet implemented")
+ // Handle user blocked
}
@override
void ccUserUnblocked(User user) {
- // TODO("Not yet implemented")
+ // Handle user unblocked
}
@override
@@ -111,102 +55,47 @@ class _UserEventsExampleState extends State with CometChatUse
***
-## Group Events
+### Group Events
-`CometChatGroupEvents` Emits events when the logged-in user performs actions related to groups. This class provides methods to listen to various group-related events and handle them accordingly.
-
-**Available Events:**
+`CometChatGroupEvents` emits events when the logged-in user performs actions related to groups.
1. `ccGroupCreated`: Triggered when the logged-in user creates a group.
2. `ccGroupDeleted`: Triggered when the logged-in user deletes a group.
3. `ccGroupLeft`: Triggered when the logged-in user leaves a group.
4. `ccGroupMemberScopeChanged`: Triggered when the logged-in user changes the scope of another group member.
-5. `ccGroupMemberBanned`: Triggered when the logged-in user bans a group member from the group.
-6. `ccGroupMemberKicked`: Triggered when the logged-in user kicks another group member from the group.
-7. `ccGroupMemberUnbanned`: Triggered when the logged-in user unbans a user banned from the group.
+5. `ccGroupMemberBanned`: Triggered when the logged-in user bans a group member.
+6. `ccGroupMemberKicked`: Triggered when the logged-in user kicks a group member.
+7. `ccGroupMemberUnbanned`: Triggered when the logged-in user unbans a user.
8. `ccGroupMemberJoined`: Triggered when the logged-in user joins a group.
-9. `ccGroupMemberAdded`: Triggered when the logged-in user adds new members to the group.
-10. `ccOwnershipChanged`: Triggered when the logged-in user transfers the ownership of their group to some other member.
+9. `ccGroupMemberAdded`: Triggered when the logged-in user adds new members.
+10. `ccOwnershipChanged`: Triggered when the logged-in user transfers ownership.
```dart
import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart' as sdk;
-import 'package:flutter/material.dart';
-
-class GroupEventsExample extends StatefulWidget {
- const GroupEventsExample({super.key});
-
- @override
- State createState() => _GroupEventsExampleState();
-}
-
-class _GroupEventsExampleState extends State with CometChatGroupEventListener {
- String listenerID = "unique_listener_ID";
+class _YourScreenState extends State with CometChatGroupEventListener {
@override
void initState() {
super.initState();
-
- CometChatGroupEvents.addGroupsListener(listenerID, this); // Add the listener
+ CometChatGroupEvents.addGroupsListener("listenerId", this);
}
@override
void dispose() {
super.dispose();
-
- CometChatGroupEvents.removeGroupsListener(listenerID); // Remove the listener
+ CometChatGroupEvents.removeGroupsListener("listenerId");
}
@override
void ccGroupCreated(Group group) {
- // TODO("Not yet implemented")
+ // Handle group created
}
@override
void ccGroupDeleted(Group group) {
- // TODO("Not yet implemented")
- }
-
- @override
- void ccGroupLeft(sdk.Action message, User leftUser, Group leftGroup) {
- // TODO("Not yet implemented")
- }
-
- @override
- void ccGroupMemberScopeChanged(sdk.Action message, User updatedUser, String scopeChangedTo, String scopeChangedFrom, Group group) {
- // TODO("Not yet implemented")
- }
-
- @override
- void ccGroupMemberBanned(sdk.Action message, User bannedUser, User bannedBy, Group bannedFrom) {
- // TODO("Not yet implemented")
- }
-
- @override
- void ccGroupMemberKicked(sdk.Action message, User kickedUser, User kickedBy, Group kickedFrom) {
- // TODO("Not yet implemented")
- }
-
- @override
- void ccGroupMemberUnbanned(sdk.Action message, User unbannedUser, User unbannedBy, Group unbannedFrom) {
- // TODO("Not yet implemented")
- }
-
- @override
- void ccGroupMemberJoined(User joinedUser, Group joinedGroup) {
- // TODO("Not yet implemented")
- }
-
- @override
- void ccGroupMemberAdded(List messages, List usersAdded, Group groupAddedIn, User addedBy) {
- // TODO("Not yet implemented")
- }
-
- @override
- void ccOwnershipChanged(Group group, GroupMember newOwner) {
- // TODO("Not yet implemented")
+ // Handle group deleted
}
@override
@@ -220,287 +109,26 @@ class _GroupEventsExampleState extends State with CometChatG
***
-## Conversation Events
-
-The `CometChatConversationEvents` component emits events when the logged-in user performs actions related to conversations. This allows for the UI to be updated accordingly.
+### Message Events
-**Available Events:**
-
-1. `ccConversationDeleted`: Triggered when the logged-in user deletes a conversation.
-2. `ccUpdateConversation`: Triggered when a conversation is updated (e.g., unread count changes).
+`CometChatMessageEvents` emits events related to messages.
```dart
import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:flutter/material.dart';
-
-class ConversationEventsExample extends StatefulWidget {
- const ConversationEventsExample({super.key});
-
- @override
- State createState() => _ConversationEventsExampleState();
-}
-
-class _ConversationEventsExampleState extends State with CometChatConversationEventListener {
- String listenerID = "unique_listener_ID";
+class _YourScreenState extends State with CometChatMessageEventListener {
@override
void initState() {
super.initState();
-
- CometChatConversationEvents.addConversationListListener(listenerID, this); // Add the listener
+ CometChatMessageEvents.addMessagesListener("listenerId", this);
}
@override
void dispose() {
super.dispose();
-
- CometChatConversationEvents.removeConversationListListener(listenerID); // Remove the listener
- }
-
- @override
- void ccConversationDeleted(Conversation conversation) {
- // TODO("Not yet implemented")
- }
-
- @override
- void ccUpdateConversation(Conversation conversation) {
- // TODO("Not yet implemented")
- }
-
- @override
- Widget build(BuildContext context) {
- return const Placeholder();
- }
-}
-```
-
-
-
-***
-
-## Message Events
-
-`CometChatMessageEvents` emits events when various actions are performed on messages within the application. These events facilitate updating the UI accordingly.
-
-**Available Events:**
-
-1. `ccMessageSent`: Triggered whenever a logged-in user sends any message. It can have two states: `inProgress` and `sent`.
-2. `ccMessageEdited`: Triggered whenever a logged-in user edits any message from the list of messages. It can have two states: `inProgress` and `sent`.
-3. `ccMessageDeleted`: Triggered whenever a logged-in user deletes any message from the list of messages.
-4. `ccMessageRead`: Triggered whenever a logged-in user reads any message.
-5. `ccLiveReaction`: Triggered whenever a logged-in user clicks on a live reaction.
-6. `ccMessageForwarded`: Triggered whenever a logged-in user forwards any message to a list of users or groups. It can have a state of `status`.
-7. `onTextMessageReceived`: Triggered when a text message is received.
-8. `onMediaMessageReceived`: Triggered when a media message is received.
-9. `onCustomMessageReceived`: Triggered when a custom message is received.
-10. `onTypingStarted`: Triggered when a typing indicator starts.
-11. `onTypingEnded`: Triggered when a typing indicator ends.
-12. `onMessagesDelivered`: Triggered when messages are delivered.
-13. `onMessagesRead`: Triggered when messages are read.
-14. `onMessageEdited`: Triggered when a message is edited.
-15. `onMessageDeleted`: Triggered when a message is deleted.
-16. `onTransientMessageReceived`: Triggered when a transient message is received.
-17. `onFormMessageReceived`: Triggered when a form message is received.
-18. `onCardMessageReceived`: Triggered when a card message is received.
-19. `onCustomInteractiveMessageReceived`: Triggered when a custom interactive message is received.
-20. `onInteractionGoalCompleted`: Triggered when an interaction goal is completed.
-21. `onSchedulerMessageReceived`: Triggered when a scheduler message is received.
-22. `onMessageReactionAdded`: Triggered when a reaction is added to a message.
-23. `onMessageReactionRemoved`: Triggered when a reaction is removed from a message.
-24. `ccReplyToMessage`: Triggered when the logged-in user replies to a message.
-25. `onMessagesDeliveredToAll`: Triggered when messages are delivered to all recipients.
-26. `onMessagesReadByAll`: Triggered when messages are read by all recipients.
-27. `onMessageModerated`: Triggered when a message is moderated.
-28. `onAIAssistantMessageReceived`: Triggered when an AI Assistant message is received.
-29. `onAIToolResultReceived`: Triggered when an AI tool result is received.
-30. `onAIToolArgumentsReceived`: Triggered when AI tool arguments are received.
-
-
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:flutter/material.dart';
-
-class MessageEventsExample extends StatefulWidget {
- const MessageEventsExample({super.key});
-
- @override
- State createState() => _MessageEventsExampleState();
-}
-
-class _MessageEventsExampleState extends State with CometChatMessageEventListener {
- String listenerID = "unique_listener_ID";
-
- @override
- void initState() {
- super.initState();
-
- CometChatMessageEvents.addMessagesListener(listenerID, this); // Add the listener
- }
-
- @override
- void dispose() {
- super.dispose();
-
- CometChatMessageEvents.removeMessagesListener(listenerID); // Remove the listener
- }
-
- @override
- void ccMessageSent(BaseMessage message, MessageStatus messageStatus) {
- // TODO("Not yet implemented")
- }
-
- @override
- void ccMessageEdited(BaseMessage message, MessageEditStatus status) {
- // TODO("Not yet implemented")
- }
-
- @override
- void ccMessageDeleted(BaseMessage message, EventStatus messageStatus) {
- // TODO("Not yet implemented")
- }
-
- @override
- void ccMessageRead(BaseMessage message) {
- // TODO("Not yet implemented")
- }
-
- @override
- void ccLiveReaction(String reaction) {
- // TODO("Not yet implemented")
- }
-
- @override
- void ccMessageForwarded(BaseMessage message, List? usersSent, List? groupsSent, MessageStatus status) {
- // TODO("Not yet implemented")
- }
-
- @override
- void ccReplyToMessage(BaseMessage message, MessageStatus status) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onTextMessageReceived(TextMessage textMessage) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onMediaMessageReceived(MediaMessage mediaMessage) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onCustomMessageReceived(CustomMessage customMessage) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onTypingStarted(TypingIndicator typingIndicator) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onTypingEnded(TypingIndicator typingIndicator) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onMessagesDelivered(MessageReceipt messageReceipt) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onMessagesRead(MessageReceipt messageReceipt) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onMessageEdited(BaseMessage message) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onMessageDeleted(BaseMessage message) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onTransientMessageReceived(TransientMessage message) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onFormMessageReceived(FormMessage formMessage) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onCardMessageReceived(CardMessage cardMessage) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onCustomInteractiveMessageReceived(
- CustomInteractiveMessage customInteractiveMessage) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onInteractionGoalCompleted(InteractionReceipt receipt) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onSchedulerMessageReceived(SchedulerMessage schedulerMessage) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onMessageReactionAdded(ReactionEvent reactionEvent) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onMessageReactionRemoved(ReactionEvent reactionEvent) {
- // TODO("Not yet implemented")
- }
-
- @override
- void ccReplyToMessage(BaseMessage message, MessageStatus status) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onMessagesDeliveredToAll(MessageReceipt messageReceipt) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onMessagesReadByAll(MessageReceipt messageReceipt) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onMessageModerated(BaseMessage message) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onAIAssistantMessageReceived(AIAssistantMessage aiAssistantMessage) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onAIToolResultReceived(AIToolResultMessage aiToolResultMessage) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onAIToolArgumentsReceived(AIToolArgumentMessage aiToolArgumentMessage) {
- // TODO("Not yet implemented")
+ CometChatMessageEvents.removeMessagesListener("listenerId");
}
@override
@@ -514,65 +142,33 @@ class _MessageEventsExampleState extends State with CometC
***
-## Call Events
-
-`CometChatCallEvents` emits events related to calls within the application. This class provides methods to listen to call-related events and handle them accordingly.
+### Conversation Events
-**Available Events:**
+`CometChatConversationEvents` emits events related to conversations.
-1. `ccOutgoingCall`: Triggered when the logged-in user initiates an outgoing call.
-2. `ccCallAccepted`: Triggered when a call is accepted.
-3. `ccCallRejected`: Triggered when a call is rejected.
-4. `ccCallEnded`: Triggered when a call is ended.
+1. `ccConversationDeleted`: Triggered when a conversation is deleted.
```dart
import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:flutter/material.dart';
-
-class CallEventsExample extends StatefulWidget {
- const CallEventsExample({super.key});
-
- @override
- State createState() => _CallEventsExampleState();
-}
-
-class _CallEventsExampleState extends State with CometChatCallEventListener {
- String listenerID = "unique_listener_ID";
+class _YourScreenState extends State with CometChatConversationEventListener {
@override
void initState() {
super.initState();
-
- CometChatCallEvents.addCallEventsListener(listenerID, this); // Add the listener
+ CometChatConversationEvents.addConversationListListener("listenerId", this);
}
@override
void dispose() {
super.dispose();
-
- CometChatCallEvents.removeCallEventsListener(listenerID); // Remove the listener
- }
-
- @override
- void ccOutgoingCall(Call call) {
- // TODO("Not yet implemented")
- }
-
- @override
- void ccCallAccepted(Call call) {
- // TODO("Not yet implemented")
+ CometChatConversationEvents.removeConversationListListener("listenerId");
}
@override
- void ccCallRejected(Call call) {
- // TODO("Not yet implemented")
- }
-
- @override
- void ccCallEnded(Call call) {
- // TODO("Not yet implemented")
+ void ccConversationDeleted(Conversation conversation) {
+ // Handle conversation deleted
}
@override
@@ -586,159 +182,15 @@ class _CallEventsExampleState extends State with CometChatCal
***
-## UI Events
+### UI Events
-`CometChatUIEvents` emits events related to UI components within the CometChat UI. This class provides methods to listen to UI-related events and handle them accordingly.
-
-**Available Events:**
-
-1. `showPanel`: Triggered to show an additional UI panel with custom elements.
-2. `hidePanel`: Triggered to hide a previously shown UI panel.
-3. `ccActiveChatChanged`: Triggered when the active chat changes, providing information about the current message, user, and group.
-4. `openChat`: Triggered to open a chat with a specific user or group.
-5. `ccComposeMessage`: Triggered when composing a message with a specific text and status.
-6. `onAiFeatureTapped`: Triggered when an AI feature is tapped for a specific user or group.
+`CometChatUIEvents` emits events related to UI interactions.
```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:flutter/material.dart';
-
-class UIEventsExample extends StatefulWidget {
- const UIEventsExample({super.key});
-
- @override
- State createState() => _UIEventsExampleState();
-}
-
-class _UIEventsExampleState extends State with CometChatUIEventListener {
- String listenerID = "unique_listener_ID";
-
- @override
- void initState() {
- super.initState();
-
- CometChatUIEvents.addUiListener(listenerID, this); // Add the listener
- }
-
- @override
- void dispose() {
- super.dispose();
-
- CometChatUIEvents.removeUiListener(listenerID); // Remove the listener
- }
-
- @override
- void showPanel(Map? id, CustomUIPosition uiPosition, WidgetBuilder child) {
- // TODO("Not yet implemented")
- }
-
- @override
- void hidePanel(Map? id, CustomUIPosition uiPosition) {
- // TODO("Not yet implemented")
- }
-
- @override
- void ccActiveChatChanged(Map? id, BaseMessage? lastMessage, User? user, Group? group, int unreadMessageCount) {
- // TODO("Not yet implemented")
- }
-
- @override
- void openChat(User? user, Group? group) {
- // TODO("Not yet implemented")
- }
-
- @override
- void ccComposeMessage(String text, MessageEditStatus status) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onAiFeatureTapped(User? user, Group? group) {
- // TODO("Not yet implemented")
- }
-
- @override
- Widget build(BuildContext context) {
- return const Placeholder();
- }
-}
+// UI events are used internally by the UI Kit widgets
+// to communicate state changes across components
```
-
-***
-
-## Best Practices
-
-
-
- Always remove event listeners in the `dispose()` method to prevent memory leaks:
-
-
-
- ```dart
- @override
- void dispose() {
- super.dispose();
- CometChatMessageEvents.removeMessagesListener(listenerID);
- }
- ```
-
-
-
-
-
- Use unique listener IDs for each widget to avoid conflicts:
-
-
-
- ```dart
- String listenerID = "message_list_${widget.key}";
- ```
-
-
-
-
-
- Keep event handlers lightweight and avoid heavy operations:
-
-
-
- ```dart
- @override
- void ccMessageSent(BaseMessage message, MessageStatus messageStatus) {
- if (messageStatus == MessageStatus.sent) {
- // Update UI efficiently
- setState(() {
- // Minimal state update
- });
- }
- }
- ```
-
-
-
-
-
-***
-
-## Next Steps
-
-
-
- Learn how to display and manage messages with events
-
-
- Handle conversation events and updates
-
-
- Manage group events and member actions
-
-
- Explore available methods for UI Kit operations
-
-
-
-***
diff --git a/ui-kit/flutter/extensions.mdx b/ui-kit/flutter/extensions.mdx
index 82511a0ca..8beff4881 100644
--- a/ui-kit/flutter/extensions.mdx
+++ b/ui-kit/flutter/extensions.mdx
@@ -1,255 +1,86 @@
---
title: "Extensions"
-sidebarTitle: "Extensions"
-description: "Enhance your chat with built-in extensions including stickers, polls, collaborative tools, message translation, and link previews"
+description: "Use CometChat Flutter UI Kit extensions for stickers, polls, collaborative tools, reactions, smart replies, and link previews."
---
-
-
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_chat_uikit` |
-| Required setup | `CometChatUIKit.init(uiKitSettings: UIKitSettings)` then `CometChatUIKit.login(uid)` + Extensions enabled in [CometChat Dashboard](/fundamentals/extensions-overview) |
-| Extension categories | User Experience, User Engagement, Collaboration, Security |
-| Key components | `CometChatMessageComposer` → [Message Composer](/ui-kit/flutter/message-composer) (Stickers, Polls, Whiteboard, Document), `CometChatMessageList` → [Message List](/ui-kit/flutter/message-list) (Translation, Link Preview, Thumbnails) |
-| Activation | Enable each extension from the CometChat Dashboard — UI Kit auto-integrates them, no additional code required |
-
-
+## Overview
CometChat's UI Kit comes with built-in support for a wide variety of extensions that provide additional functionality. These extensions enhance the chatting experience, making it more interactive, secure, and efficient.
Activating any of the extensions in CometChat is a simple process done through your application's dashboard. Refer to our guide for detailed information on [Extensions](/fundamentals/extensions-overview).
-Once you have successfully enabled the desired extension in your dashboard, it will be reflected in your CometChat application upon initialization and successful login. The extension features will only be available if they are supported by CometChat UI Kit.
-
-***
+> **V6 Architecture Change:** In V5, extensions used a decorator/chain-of-responsibility pattern with `*Extension` and `*ExtensionDecorator` classes that wrapped the `DataSource` interface. V6 removes this entire pattern. Extension behavior is now handled directly by `MessageTemplateUtils` static methods. No registration is needed — just enable extensions in your CometChat Dashboard and they work automatically.
## Built-in Extensions
-The grouping below mirrors the CometChat Dashboard.
-
-### User Experience
-
-#### Link Preview
-
-The Link Preview extension provides a summary of the URL shared in the chat. It includes the title, a description, and a thumbnail image from the web page. For a comprehensive understanding and guide on implementing and using the Link Preview Extension, refer to our specific guide on the [Link Preview Extension](/fundamentals/link-preview).
-
-Once you have successfully activated the [Link Preview Extension](/fundamentals/link-preview) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Widget](/ui-kit/flutter/message-list) widget of UI Kits.
-
-
- 
-
-
-***
-
-#### Thumbnail Generation
-
-The Thumbnail Generation extension automatically creates a smaller preview image whenever a larger image is shared, helping to reduce the upload/download time and bandwidth usage. For a comprehensive understanding and guide on implementing and using the Thumbnail Generation Extension, refer to our specific guide on the [Thumbnail Generation Extension](/fundamentals/thumbnail-generation).
-
-Once you have successfully activated the [Thumbnail Generation Extension](/fundamentals/thumbnail-generation) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Widget](/ui-kit/flutter/message-list) widget of UI Kits.
-
-
- 
-
-
-***
-
-#### Bitly
-
-Shortens long URLs in text messages using Bitly. See [Bitly Extension](/fundamentals/bitly).
-
-***
-
-#### TinyURL
-
-URL shortening using TinyURL. See [TinyURL Extension](/fundamentals/tinyurl).
-
-***
-
-#### Message Shortcuts
-
-Sends predefined messages using short codes (e.g., `!hb` expands to `Happy birthday!`). See [Message Shortcuts Extension](/fundamentals/message-shortcuts).
-
-***
-
-#### Pin Message
-
-Pins important messages in a conversation for easy access. See [Pin Message Extension](/fundamentals/pin-message).
-
-***
-
-#### Save Message
-
-Bookmarks messages for later reference. Saved messages are private to the user. See [Save Message Extension](/fundamentals/save-message).
-
-***
-
-#### Rich Media Preview
-
-Generates rich preview panels for URLs using iFramely. See [Rich Media Preview Extension](/fundamentals/rich-media-preview).
-
-***
-
-#### Voice Transcription
-
-Converts audio messages to text. See [Voice Transcription Extension](/fundamentals/voice-transcription).
-
-***
-
-### User Engagement
-
-#### Stickers
-
-The Stickers extension allows users to express their emotions more creatively. It adds a much-needed fun element to the chat by allowing users to send various pre-designed stickers. For a comprehensive understanding and guide on implementing and using the Sticker Extension, refer to our specific guide on the [Sticker Extension](/fundamentals/stickers).
-
-Once you have successfully activated the [Sticker Extension](/fundamentals/stickers) from your CometChat Dashboard, the feature will automatically be incorporated into the [Message Composer](/ui-kit/flutter/message-composer) widget of UI Kits.
-
-
- 
-
-
-***
-
-#### Polls
-
-The Polls extension enhances group discussions by allowing users to create polls. Users can ask questions with a predefined list of answers, enabling a quick, organized way to gather group opinions. For a comprehensive understanding and guide on implementing and using the Polls Extension, refer to our specific guide on the [Polls Extension](/fundamentals/polls).
-
-Once you have successfully activated the [Polls Extension](/fundamentals/polls) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/flutter/message-composer) widget of UI Kits.
-
-
- 
-
-
-***
-
-#### Message Translation
-
-The Message Translation extension in CometChat is designed to translate any message into your local locale. It eliminates language barriers, making the chat more inclusive. For a comprehensive understanding and guide on implementing and using the Message Translation Extension, refer to our specific guide on the [Message Translation Extension](/fundamentals/message-translation).
-
-Once you have successfully activated the [Message Translation Extension](/fundamentals/message-translation) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of [MessageList Widget](/ui-kit/flutter/message-list) widget of UI Kits.
-
-
- 
-
-
-***
-
-#### Giphy
-
-Search and share GIFs from Giphy. See [Giphy Extension](/fundamentals/giphy).
-
-***
-
-#### Tenor
-
-Search and share GIFs from Tenor. See [Tenor Extension](/fundamentals/tenor).
-
-***
-
-#### Stipop
-
-Integrates Stipop's sticker library. See [Stipop Extension](/fundamentals/stickers-stipop).
-
-***
-
-#### Reminders
-
-Sets reminders for messages or creates personal reminders. A bot sends a notification when due. See [Reminders Extension](/fundamentals/reminders).
-
-***
-
-### Collaboration
-
-#### Collaborative Whiteboard
-
-The Collaborative Whiteboard extension facilitates real-time collaboration. Users can draw, brainstorm, and share ideas on a shared digital whiteboard. For a comprehensive understanding and guide on implementing and using the Collaborative Whiteboard Extension, refer to our specific guide on the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard).
-
-Once you have successfully activated the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/flutter/message-composer) widget of UI Kits.
-
-
- 
-
-
-***
-
-#### Collaborative Document
+### Stickers
-With the Collaborative Document extension, users can work together on a shared document. This feature is essential for remote teams where document collaboration is a recurring requirement. For a comprehensive understanding and guide on implementing and using the Collaborative Document Extension, refer to our specific guide on the [Collaborative Document Extension](/fundamentals/collaborative-document).
+The Stickers extension allows users to express their emotions more creatively with pre-designed stickers.
-Once you have successfully activated the [Collaborative Document Extension](/fundamentals/collaborative-document) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/flutter/message-composer) widget of UI Kits.
+Once activated from your CometChat Dashboard, the feature will automatically be incorporated into the [Message Composer](/ui-kit/flutter/message-composer) widget.
-
- 
-
+### Polls
-***
+The Polls extension enhances group discussions by allowing users to create polls with predefined answers.
-### Security
+Once activated from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/flutter/message-composer) widget.
-#### Disappearing Messages
+### Collaborative Whiteboard
-Messages auto-delete after a specified interval. Works for 1:1 and group messages. See [Disappearing Messages Extension](/fundamentals/disappearing-messages).
+The Collaborative Whiteboard extension facilitates real-time collaboration on a shared digital whiteboard.
-***
+Once activated from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/flutter/message-composer) widget.
-### Customer Support
+### Collaborative Document
-#### Chatwoot
+Users can work together on a shared document with the Collaborative Document extension.
-Routes user messages to Chatwoot for customer support. See [Chatwoot Extension](/fundamentals/chatwoot).
+Once activated from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/flutter/message-composer) widget.
-***
+### Message Translation
-#### Intercom
+The Message Translation extension translates any message into your local locale, eliminating language barriers.
-Integrates Intercom for in-app customer support. See [Intercom Extension](/fundamentals/intercom).
+Once activated from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of [MessageList Widget](/ui-kit/flutter/message-list).
-***
+### Link Preview
-### Smart Chat Features
+The Link Preview extension provides a summary of URLs shared in the chat, including title, description, and thumbnail.
-For AI-powered features like Conversation Starter, Smart Replies, and Conversation Summary, see [AI Features](/ui-kit/flutter/ai-features).
+Once activated from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Widget](/ui-kit/flutter/message-list).
-***
+### Thumbnail Generation
-## Enabling Extensions
+The Thumbnail Generation extension automatically creates smaller preview images for shared images, reducing bandwidth usage.
-To enable extensions in your Flutter app, configure them during initialization:
+Once activated from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Widget](/ui-kit/flutter/message-list).
-
-
-```dart
-UIKitSettings uiKitSettings = (UIKitSettingsBuilder()
- ..appId = "YOUR_APP_ID"
- ..region = "YOUR_REGION"
- ..authKey = "YOUR_AUTH_KEY"
- ..subscriptionType = CometChatSubscriptionType.allUsers
- ..extensions = CometChatUIKitChatExtensions.getDefaultExtensions() // Enable all default extensions
-).build();
+## V6 Extension Architecture
-await CometChatUIKit.init(uiKitSettings: uiKitSettings);
-```
-
-
+### What Changed
+| Aspect | V5 | V6 |
+|---|---|---|
+| Registration | `UIKitSettings.extensions = CometChatUIKitChatExtensions.getDefaultExtensions()` | Not needed — built-in |
+| Architecture | Decorator chain (up to 10 layers) | `MessageTemplateUtils` static methods (1 hop) |
+| Startup cost | 9 `isExtensionEnabled()` network calls | None |
+| Files removed | — | 27 files (~7000+ lines) |
+| UI widgets | Preserved | Preserved (bubbles, configs, styles) |
-***
+### What Was Removed
-## Next Steps
+- All `*Extension` classes (e.g., `StickersExtension`, `PollsExtension`)
+- All `*ExtensionDecorator` classes (e.g., `StickersExtensionDecorator`)
+- `ChatConfigurator`, `DataSource` interface, `ExtensionsDataSource`
+- `CometChatUIKitChatExtensions`, `CometChatUIKitChatAIFeatures`
+- `CometChatUIKit.getDataSource()` method
-
-
- Learn how extensions integrate with the message composer
-
-
- See how extensions enhance message display
-
-
- Explore all available extensions in detail
-
-
- Enable extensions from your CometChat Dashboard
-
-
+### What Was Preserved
-***
+All extension UI widgets remain:
+- `CometChatStickerBubble`, `CometChatStickerKeyboard`
+- `CometChatPollsBubble`, `CometChatCreatePoll`
+- `CometChatLinkPreviewBubble`
+- `CometChatCollaborativeBubble`, `CometChatCollaborativeWebView`
+- `MessageTranslationBubble`
+- All configuration and style classes
diff --git a/ui-kit/flutter/flutter-conversation.mdx b/ui-kit/flutter/flutter-conversation.mdx
index af6bd97a7..7fd62753c 100644
--- a/ui-kit/flutter/flutter-conversation.mdx
+++ b/ui-kit/flutter/flutter-conversation.mdx
@@ -1,98 +1,70 @@
---
title: "Conversation List + Message View"
-sidebarTitle: "Conversation + Message"
-description: "Build a two-panel chat interface with conversation list and message view using Flutter UI Kit widgets."
+sidebarTitle: "Conversation List + Message View"
+description: "Build a two-panel CometChat Flutter UI Kit layout with a conversation list, active message view, headers, lists, and composer."
---
-
+The Conversation List + Message View layout provides a seamless two-panel chat interface. This layout allows users to switch between conversations while keeping the active chat open.
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_chat_uikit` |
-| Framework | Flutter |
-| Components | `CometChatConversations`, `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` |
-| Layout | Two-panel — conversation list + message view with Navigator push |
-| Prerequisite | Complete [Getting Started](/ui-kit/flutter/getting-started) Steps 1–4 first |
-| Pattern | WhatsApp, Telegram, Slack |
+## Integration
-
+### Step 1: Create the Conversations Screen
-This guide builds a two-panel chat layout — conversation list that navigates to a message screen. Users tap a conversation to open it.
-
-This assumes you've already completed [Getting Started](/ui-kit/flutter/getting-started) (project created, UI Kit installed, init + login working).
-
-
- 
-
-
-[View Sample App on GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app)
-
----
-
-## What You're Building
-
-Two screens working together:
-
-1. **Conversation list** — shows all active conversations (users and groups)
-2. **Message screen** — header + messages + composer for the selected conversation
-
----
-
-## Step 1 — Create the Conversations Screen
-
-The `CometChatConversations` widget displays all conversations. Tapping one navigates to the message screen.
-
-```dart title="lib/conversations_page.dart"
+
+
+```dart
import 'package:flutter/material.dart';
import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'messages_screen.dart';
-class ConversationsPage extends StatelessWidget {
- const ConversationsPage({super.key});
+class ConversationsScreen extends StatelessWidget {
+ const ConversationsScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
- body: SafeArea(
- child: CometChatConversations(
- onItemTap: (conversation) {
- final target = conversation.conversationWith;
- Navigator.push(
- context,
- MaterialPageRoute(
- builder: (_) => MessagesScreen(
- user: target is User ? target : null,
- group: target is Group ? target : null,
- ),
- ),
- );
- },
- ),
+ appBar: AppBar(title: const Text('Conversations')),
+ body: CometChatConversations(
+ onItemTap: (conversation) {
+ _openChat(context, conversation);
+ },
),
);
}
-}
-```
-Key points:
-- `onItemTap` fires when a conversation is tapped, passing the `Conversation` object.
-- `conversationWith` returns either a `User` or `Group` — pass the correct one to the message screen.
+ void _openChat(BuildContext context, Conversation conversation) {
+ User? user;
+ Group? group;
----
+ if (conversation.conversationType == 'user') {
+ user = conversation.conversationWith as User;
+ } else {
+ group = conversation.conversationWith as Group;
+ }
-## Step 2 — Create the Messages Screen
+ Navigator.push(
+ context,
+ MaterialPageRoute(
+ builder: (_) => ChatScreen(user: user, group: group),
+ ),
+ );
+ }
+}
+```
+
+
-The message screen combines header, message list, and composer.
+### Step 2: Create the Chat Screen
-```dart title="lib/messages_screen.dart"
-import 'package:flutter/material.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+Use the same `MessagesScreen` pattern from [One-to-One Chat](/ui-kit/flutter/flutter-one-to-one-chat#step-2-render-the-messages-component):
-class MessagesScreen extends StatelessWidget {
+
+
+```dart
+class ChatScreen extends StatelessWidget {
final User? user;
final Group? group;
- const MessagesScreen({super.key, this.user, this.group});
+ const ChatScreen({super.key, this.user, this.group});
@override
Widget build(BuildContext context) {
@@ -101,9 +73,7 @@ class MessagesScreen extends StatelessWidget {
body: SafeArea(
child: Column(
children: [
- Expanded(
- child: CometChatMessageList(user: user, group: group),
- ),
+ Expanded(child: CometChatMessageList(user: user, group: group)),
CometChatMessageComposer(user: user, group: group),
],
),
@@ -112,38 +82,78 @@ class MessagesScreen extends StatelessWidget {
}
}
```
+
+
-| Component | Purpose |
-| --- | --- |
-| `CometChatMessageHeader` | Shows conversation title, avatar, and call buttons |
-| `CometChatMessageList` | Displays messages with real-time updates |
-| `CometChatMessageComposer` | Input field for text, media, and attachments |
+### Step 3: Complete Example
----
+
+
+```dart
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-## Step 3 — Run the App
+void main() {
+ runApp(const MyApp());
+}
-```bash
-flutter run
-```
+class MyApp extends StatelessWidget {
+ const MyApp({super.key});
-You should see the conversation list. Tapping a conversation navigates to the message screen.
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: 'CometChat V6',
+ theme: ThemeData(useMaterial3: true),
+ home: const InitPage(),
+ );
+ }
+}
----
+class InitPage extends StatefulWidget {
+ const InitPage({super.key});
+
+ @override
+ State createState() => _InitPageState();
+}
-## Next Steps
-
-
-
- Customize the conversation list
-
-
- Customize the message view
-
-
- Customize colors and styles
-
-
- Handle real-time events
-
-
+class _InitPageState extends State {
+ bool _ready = false;
+
+ @override
+ void initState() {
+ super.initState();
+ _init();
+ }
+
+ Future _init() async {
+ UIKitSettings settings = (UIKitSettingsBuilder()
+ ..subscriptionType = CometChatSubscriptionType.allUsers
+ ..autoEstablishSocketConnection = true
+ ..region = "REGION"
+ ..appId = "APP_ID"
+ ..authKey = "AUTH_KEY")
+ .build();
+
+ CometChatUIKit.init(
+ uiKitSettings: settings,
+ onSuccess: (_) {
+ CometChatUIKit.login("cometchat-uid-1", onSuccess: (_) {
+ setState(() => _ready = true);
+ }, onError: (e) {});
+ },
+ onError: (e) {},
+ );
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ if (!_ready) {
+ return const Scaffold(body: Center(child: CircularProgressIndicator()));
+ }
+ return const ConversationsScreen();
+ }
+}
+```
+
+
diff --git a/ui-kit/flutter/flutter-one-to-one-chat.mdx b/ui-kit/flutter/flutter-one-to-one-chat.mdx
index 5b6d8c0ab..ee8f8d846 100644
--- a/ui-kit/flutter/flutter-one-to-one-chat.mdx
+++ b/ui-kit/flutter/flutter-one-to-one-chat.mdx
@@ -1,57 +1,116 @@
---
-title: "One-to-One / Group Chat"
-sidebarTitle: "One-to-One / Group Chat"
-description: "Build a focused one-to-one or group chat experience in Flutter with CometChat UI Kit."
+title: "Building A One To One/Group Chat Experience"
+sidebarTitle: "One To One/Group Chat"
+description: "Build one-to-one and group chat screens in CometChat Flutter UI Kit with message headers, message lists, composers, and user lookup."
---
-
-
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_chat_uikit` |
-| Framework | Flutter |
-| Components | `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` |
-| Layout | Single chat window — no conversation list |
-| Prerequisite | Complete [Getting Started](/ui-kit/flutter/getting-started) Steps 1–4 first |
-| Pattern | Support chat, embedded widgets, focused messaging |
-
-
-
-This guide builds a single chat window — no conversation list. Users go directly into a one-to-one or group chat. Good for support chat, deep links, or focused messaging.
-
-This assumes you've already completed [Getting Started](/ui-kit/flutter/getting-started) (project created, UI Kit installed, init + login working).
-
-
- 
-
-
-[View Sample App on GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app)
-
----
+The One-to-One Chat feature provides a streamlined direct messaging interface, ideal for support chats, dating apps, and private messaging platforms.
+
+***
+
+### Step 1: Render the Message View
+
+Fetch the target user and display the messaging screen. V6 uses the same `CometChatUIKit` initialization but with BLoC-powered widgets.
+
+```dart main.dart
+@override
+Widget build(BuildContext context) {
+ return Scaffold(
+ body: SafeArea(
+ child: FutureBuilder(
+ future: fetchCometChatUser("cometchat-uid-2"),
+ builder: (context, snapshot) {
+ if (snapshot.connectionState == ConnectionState.waiting) {
+ return const Center(child: CircularProgressIndicator());
+ } else if (snapshot.hasError) {
+ return Center(child: Text("Error: ${snapshot.error}"));
+ } else if (snapshot.hasData) {
+ return MessagesScreen(user: snapshot.data!);
+ } else {
+ return const Center(child: Text("User not found"));
+ }
+ },
+ ),
+ ),
+ );
+}
+```
-## What You're Building
+#### Full Example: main.dart
-Three components stacked vertically:
+
+
+```dart
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'messages_screen.dart';
+import 'cometchat_config.dart';
+import 'dart:async';
-1. **Chat header** — displays recipient name, avatar, and call buttons
-2. **Message list** — real-time chat history
-3. **Message composer** — text input with media and emojis
+void main() => runApp(const MyApp());
----
+class MyApp extends StatelessWidget {
+ const MyApp({super.key});
-## Step 1 — Create the Chat Screen
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: 'CometChat V6 UI Kit',
+ theme: ThemeData(
+ colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
+ useMaterial3: true,
+ ),
+ home: const Home(),
+ );
+ }
+}
-The app fetches a user on mount and renders the message components.
+class Home extends StatelessWidget {
+ const Home({super.key});
+
+ Future _initializeAndLogin() async {
+ final settings = UIKitSettingsBuilder()
+ ..subscriptionType = CometChatSubscriptionType.allUsers
+ ..autoEstablishSocketConnection = true
+ ..appId = CometChatConfig.appId
+ ..region = CometChatConfig.region
+ ..authKey = CometChatConfig.authKey;
+
+ await CometChatUIKit.init(uiKitSettings: settings.build());
+ await CometChatUIKit.login(
+ 'cometchat-uid-1',
+ onSuccess: (_) => debugPrint('Login Successful'),
+ onError: (err) => throw Exception('Login Failed: $err'),
+ );
+ }
-```dart title="lib/chat_screen.dart"
-import 'dart:async';
-import 'package:flutter/material.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+ @override
+ Widget build(BuildContext context) {
+ return FutureBuilder(
+ future: _initializeAndLogin(),
+ builder: (ctx, snap) {
+ if (snap.connectionState != ConnectionState.done) {
+ return const Scaffold(
+ body: SafeArea(child: Center(child: CircularProgressIndicator())),
+ );
+ }
+ if (snap.hasError) {
+ return Scaffold(
+ body: SafeArea(
+ child: Center(child: Text('Error:\n${snap.error}', textAlign: TextAlign.center)),
+ ),
+ );
+ }
+ return const MessagesPage();
+ },
+ );
+ }
+}
-class ChatScreen extends StatelessWidget {
- const ChatScreen({super.key});
+class MessagesPage extends StatelessWidget {
+ const MessagesPage({super.key});
- Future fetchUser(String uid) async {
+ Future fetchCometChatUser(String uid) async {
final completer = Completer();
CometChat.getUser(
uid,
@@ -63,104 +122,112 @@ class ChatScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
- return FutureBuilder(
- future: fetchUser("cometchat-uid-2"), // Replace with target UID
- builder: (context, snapshot) {
- if (snapshot.connectionState == ConnectionState.waiting) {
- return const Scaffold(
- body: Center(child: CircularProgressIndicator()),
- );
- }
- if (snapshot.hasError) {
- return Scaffold(
- body: Center(child: Text('Error: ${snapshot.error}')),
- );
- }
- final user = snapshot.data!;
- return Scaffold(
- appBar: CometChatMessageHeader(user: user),
- body: SafeArea(
- child: Column(
- children: [
- Expanded(child: CometChatMessageList(user: user)),
- CometChatMessageComposer(user: user),
- ],
- ),
- ),
- );
- },
+ return Scaffold(
+ body: SafeArea(
+ child: FutureBuilder(
+ future: fetchCometChatUser("cometchat-uid-2"),
+ builder: (context, snapshot) {
+ if (snapshot.connectionState == ConnectionState.waiting) {
+ return const Center(child: CircularProgressIndicator());
+ } else if (snapshot.hasError) {
+ return Center(child: Text("Error: ${snapshot.error}"));
+ } else if (snapshot.hasData) {
+ return MessagesScreen(user: snapshot.data!);
+ } else {
+ return const Center(child: Text("User not found"));
+ }
+ },
+ ),
+ ),
);
}
}
```
+
+
-Key points:
-- `CometChat.getUser(uid)` fetches the user object — you need a real user object, not a manually constructed one.
-- Pass either `user` or `group` to the message components, never both.
-
----
+### Step 2: Render the Messages Component
-## Switching to Group Chat
+Compose the messaging view using:
-To load a group chat instead, use `CometChat.getGroup()`:
+* [Message Header](/ui-kit/flutter/message-header)
+* [Message List](/ui-kit/flutter/message-list)
+* [Message Composer](/ui-kit/flutter/message-composer)
+
+
```dart
-Future fetchGroup(String guid) async {
- final completer = Completer();
- CometChat.getGroup(
- guid,
- onSuccess: (group) => completer.complete(group),
- onError: (error) => completer.completeError(error),
- );
- return completer.future;
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+class MessagesScreen extends StatefulWidget {
+ final User? user;
+ final Group? group;
+
+ const MessagesScreen({Key? key, this.user, this.group}) : super(key: key);
+
+ @override
+ State createState() => _MessagesScreenState();
}
-// Then in build():
-FutureBuilder(
- future: fetchGroup("your-group-guid"),
- builder: (context, snapshot) {
- if (snapshot.hasData) {
- final group = snapshot.data!;
- return Scaffold(
- appBar: CometChatMessageHeader(group: group),
- body: Column(
+class _MessagesScreenState extends State {
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ appBar: CometChatMessageHeader(
+ user: widget.user,
+ group: widget.group,
+ ),
+ body: SafeArea(
+ child: Column(
children: [
- Expanded(child: CometChatMessageList(group: group)),
- CometChatMessageComposer(group: group),
+ Expanded(
+ child: CometChatMessageList(
+ user: widget.user,
+ group: widget.group,
+ ),
+ ),
+ CometChatMessageComposer(
+ user: widget.user,
+ group: widget.group,
+ ),
],
),
- );
- }
- return const CircularProgressIndicator();
- },
-)
+ ),
+ );
+ }
+}
```
+
+
+
----
-## Step 2 — Run the App
+***
-```bash
+### Step 3: Run the App
+
+```
flutter run
```
-You should see the chat window load with the conversation for the UID you set.
+This launches the app with the one-to-one chat interface featuring the message header, list, and composer.
----
+***
+
+## Key V6 Differences
+
+| Aspect | V5 | V6 |
+|---|---|---|
+| Composite widget | `CometChatMessages` wraps header + list + composer | No composite — compose individually |
+| State management | GetX controllers | BLoC pattern (`MessageListBloc`, `MessageComposerBloc`) |
+| Extensions | `CometChatUIKitChatExtensions.getDefaultExtensions()` | Extensions handled via `MessageTemplateUtils` |
+| Rich text | Not available | Built-in rich text formatting and code blocks |
+
+***
## Next Steps
-
-
- Customize the message view
-
-
- Add a conversation list
-
-
- Customize colors and styles
-
-
- Handle real-time events
-
-
+* [Advanced Customizations](/ui-kit/flutter/theme-introduction) — Personalize the chat UI to align with your brand.
+* [Message List](/ui-kit/flutter/message-list) — Customize message display and behavior.
+* [Message Composer](/ui-kit/flutter/message-composer) — Configure rich text, attachments, and audio recording.
diff --git a/ui-kit/flutter/flutter-tab-based-chat.mdx b/ui-kit/flutter/flutter-tab-based-chat.mdx
index ba02849dc..e8379fb5f 100644
--- a/ui-kit/flutter/flutter-tab-based-chat.mdx
+++ b/ui-kit/flutter/flutter-tab-based-chat.mdx
@@ -1,53 +1,96 @@
---
-title: "Tab-Based Chat"
-sidebarTitle: "Tab-Based Chat"
-description: "Build a tab-based messaging UI with chats, calls, users, and groups in Flutter with CometChat UI Kit."
+title: "Building A Messaging UI With Tabs, Sidebar, And Message View"
+sidebarTitle: "Tab Based Chat Experience"
+description: "Build a tab-based CometChat Flutter UI Kit chat UI with conversations, users, groups, sidebar navigation, and message view."
---
-
+This guide walks you through creating a tab-based messaging UI using Flutter and CometChat V6 UIKit. The UI includes sections for Chats, Users, and Groups, allowing seamless navigation.
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_chat_uikit` |
-| Framework | Flutter |
-| Components | `CometChatConversations`, `CometChatCallLogs`, `CometChatUsers`, `CometChatGroups`, `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` |
-| Layout | Bottom navigation tabs (Chats, Calls, Users, Groups) + message view |
-| Prerequisite | Complete [Getting Started](/ui-kit/flutter/getting-started) Steps 1–4 first |
-| Pattern | Full-featured messaging app with multiple sections |
+***
-
+## User Interface Preview
-This guide builds a tabbed messaging UI — Chats, Calls, Users, and Groups tabs with bottom navigation. Good for full-featured apps that need more than just conversations.
+This layout consists of:
-This assumes you've already completed [Getting Started](/ui-kit/flutter/getting-started) (project created, UI Kit installed, init + login working).
+1. Sidebar (Conversation List) — Displays recent conversations with active users and groups.
+2. Message View — Shows the selected chat with real-time messages.
+3. Message Input Box — Allows users to send messages seamlessly.
-
- 
-
+***
-[View Sample App on GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app)
+### Step 1: Render the Tab Component
----
+Set up initialization and the tab-based layout. In V6, all list widgets (`CometChatConversations`, `CometChatUsers`, `CometChatGroups`) are powered by BLoC.
-## What You're Building
+#### Full Example: main.dart
-Three sections working together:
+
+
+```dart
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'messages_screen.dart';
+import 'cometchat_config.dart';
-1. **Bottom navigation** — switches between Chats, Calls, Users, and Groups
-2. **Page view** — renders the list for the active tab
-3. **Message view** — header + messages + composer for the selected item
+void main() => runApp(const MyApp());
----
+class MyApp extends StatelessWidget {
+ const MyApp({super.key});
-## Step 1 — Create the Tabs Screen
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: 'CometChat V6 UI Kit',
+ theme: ThemeData(
+ colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
+ useMaterial3: true,
+ ),
+ home: const Home(),
+ );
+ }
+}
-The tabs screen uses `BottomNavigationBar` and `PageView` to create a tabbed interface.
+class Home extends StatelessWidget {
+ const Home({super.key});
+
+ Future _initializeAndLogin() async {
+ final settings = UIKitSettingsBuilder()
+ ..subscriptionType = CometChatSubscriptionType.allUsers
+ ..autoEstablishSocketConnection = true
+ ..appId = CometChatConfig.appId
+ ..region = CometChatConfig.region
+ ..authKey = CometChatConfig.authKey;
+
+ await CometChatUIKit.init(uiKitSettings: settings.build());
+ await CometChatUIKit.login(
+ 'cometchat-uid-1',
+ onSuccess: (_) => debugPrint('Login Successful'),
+ onError: (err) => throw Exception('Login Failed: $err'),
+ );
+ }
-```dart title="lib/tabs_screen.dart"
-import 'package:flutter/material.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';
-import 'messages_screen.dart';
+ @override
+ Widget build(BuildContext context) {
+ return FutureBuilder(
+ future: _initializeAndLogin(),
+ builder: (ctx, snap) {
+ if (snap.connectionState != ConnectionState.done) {
+ return const Scaffold(
+ body: SafeArea(child: Center(child: CircularProgressIndicator())),
+ );
+ }
+ if (snap.hasError) {
+ return Scaffold(
+ body: SafeArea(
+ child: Center(child: Text('Error:\n${snap.error}', textAlign: TextAlign.center)),
+ ),
+ );
+ }
+ return const TabsScreen();
+ },
+ );
+ }
+}
class TabsScreen extends StatefulWidget {
const TabsScreen({super.key});
@@ -61,61 +104,50 @@ class _TabsScreenState extends State {
final PageController _pageController = PageController();
void _onItemTapped(int index) {
- setState(() => _selectedIndex = index);
+ setState(() {
+ _selectedIndex = index;
+ });
_pageController.jumpToPage(index);
}
- @override
- void dispose() {
- _pageController.dispose();
- super.dispose();
- }
-
@override
Widget build(BuildContext context) {
return Scaffold(
body: PageView(
controller: _pageController,
- onPageChanged: (index) => setState(() => _selectedIndex = index),
+ onPageChanged: (index) {
+ setState(() {
+ _selectedIndex = index;
+ });
+ },
children: [
CometChatConversations(
+ showBackButton: false,
onItemTap: (conversation) {
- final target = conversation.conversationWith;
Navigator.push(
context,
MaterialPageRoute(
- builder: (_) => MessagesScreen(
- user: target is User ? target : null,
- group: target is Group ? target : null,
+ builder: (context) => MessagesScreen(
+ user: conversation.conversationWith is User
+ ? conversation.conversationWith as User
+ : null,
+ group: conversation.conversationWith is Group
+ ? conversation.conversationWith as Group
+ : null,
),
),
);
},
),
- CometChatCallLogs(),
- CometChatUsers(
- onItemTap: (user) => Navigator.push(
- context,
- MaterialPageRoute(builder: (_) => MessagesScreen(user: user)),
- ),
- ),
- CometChatGroups(
- onItemTap: (group) => Navigator.push(
- context,
- MaterialPageRoute(builder: (_) => MessagesScreen(group: group)),
- ),
- ),
+ CometChatUsers(),
+ CometChatGroups(),
],
),
bottomNavigationBar: BottomNavigationBar(
- type: BottomNavigationBarType.fixed,
currentIndex: _selectedIndex,
onTap: _onItemTapped,
- selectedItemColor: Colors.deepPurple,
- unselectedItemColor: Colors.grey,
items: const [
- BottomNavigationBarItem(icon: Icon(Icons.chat), label: "Chats"),
- BottomNavigationBarItem(icon: Icon(Icons.call), label: "Calls"),
+ BottomNavigationBarItem(icon: Icon(Icons.chat), label: "Chat"),
BottomNavigationBarItem(icon: Icon(Icons.person), label: "Users"),
BottomNavigationBarItem(icon: Icon(Icons.group), label: "Groups"),
],
@@ -124,19 +156,16 @@ class _TabsScreenState extends State {
}
}
```
+
+
-Key points:
-- `PageView` enables swipeable pages for each tab.
-- `BottomNavigationBar` provides quick access to different sections.
-- Each list component navigates to `MessagesScreen` on item tap.
-
----
-
-## Step 2 — Create the Messages Screen
+### Step 2: Render the Messages Component
-Same as the [Conversation + Message](/ui-kit/flutter/flutter-conversation) guide:
+Use the same `MessagesScreen` pattern from [One-to-One Chat](/ui-kit/flutter/flutter-one-to-one-chat#step-2-render-the-messages-component):
-```dart title="lib/messages_screen.dart"
+
+
+```dart
import 'package:flutter/material.dart';
import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
@@ -162,43 +191,24 @@ class MessagesScreen extends StatelessWidget {
}
}
```
+
+
----
-
-## Step 3 — Run the App
-```bash
-flutter run
-```
-You should see the tab bar at the bottom. Switch between Chats, Calls, Users, and Groups — tapping any item opens the message view.
+***
----
+### Step 3: Run the App
-## Tab Descriptions
+```
+flutter run
+```
-| Tab | Component | Purpose |
-| --- | --- | --- |
-| Chats | `CometChatConversations` | Recent conversations with unread counts |
-| Calls | `CometChatCallLogs` | Call history (audio/video) |
-| Users | `CometChatUsers` | Browse and search all users |
-| Groups | `CometChatGroups` | Browse and join groups |
+This launches the app with the tab-based chat experience. Navigate between Chats, Users, and Groups tabs and interact with the messaging features.
----
+***
## Next Steps
-
-
- Customize the conversation list
-
-
- Configure call history
-
-
- Manage user and group lists
-
-
- Customize colors and styles
-
-
+* [Advanced Customizations](/ui-kit/flutter/theme-introduction) — Personalize the chat UI to align with your brand.
+* [Component Styling](/ui-kit/flutter/component-styling) — Fine-tune individual component appearances.
diff --git a/ui-kit/flutter/getting-started.mdx b/ui-kit/flutter/getting-started.mdx
index 1e58549c3..d25242440 100644
--- a/ui-kit/flutter/getting-started.mdx
+++ b/ui-kit/flutter/getting-started.mdx
@@ -1,150 +1,215 @@
---
-title: "Getting Started"
+title: "Getting Started With CometChat Flutter UI Kit V6"
sidebarTitle: "Getting Started"
-description: "Add CometChat to a Flutter app in 5 steps: create project, install, init, login, render."
+description: "Set up CometChat Flutter UI Kit V6 with app credentials, package installation, initialization, users, groups, messages, and calls."
---
-
+CometChat UI Kit V6 for Flutter is a package of pre-assembled UI elements built on clean architecture with BLoC state management. It provides essential messaging functionalities with options for light and dark themes, diverse fonts, colors, and extensive customization capabilities.
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_chat_uikit` |
-| Init | `CometChatUIKit.init(uiKitSettings)` — must resolve before `login()` |
-| Login | `CometChatUIKit.login("UID")` — must resolve before rendering widgets |
-| Order | `init()` → `login()` → render. Breaking this order = blank screen |
-| Auth Key | Dev/testing only. Use Auth Token in production |
-| Calling | Optional. Install `cometchat_calls_uikit` to enable |
-| Platforms | iOS 13.0+, Android API 24+ (with calling) |
-| AI Skills | `npx @cometchat/skills add` — [GitHub](https://github.com/cometchat/cometchat-skills) |
+CometChat UI Kit V6 supports both one-to-one and group conversations. Follow the guide below to initiate conversations from scratch.
-
+## Prerequisites
-This guide walks you through adding CometChat to a Flutter app. By the end you'll have a working chat UI.
+Before installing the **UI Kit**, you need to create a CometChat application on the CometChat Dashboard, which includes all the necessary data for a chat service, such as users, groups, calls, and messages. You will require the `App ID`, `AuthKey`, and `Region` of your CometChat application when initializing the SDK.
-
-
-
+**i. Register on CometChat**
----
+* You need to register on the **CometChat Dashboard** first. [Click here to sign up](https://app.cometchat.com/login).
-## Integrate with AI Coding Agents
+**ii. Get Your Application Keys**
-Skip the manual steps — use [CometChat Skills](https://github.com/cometchat/cometchat-skills) to integrate via your AI coding agent. Your agent has a short conversation with you to understand your project and chat requirements, then writes production-grade integration code tailored to the files you already have.
+* Create a **new app**
+* Head over to the **QuickStart** or **API & Auth Keys section** and note the **App ID**, **Auth Key**, and **Region**.
-```bash
-npx @cometchat/skills add
-```
+> Each CometChat application can be integrated with a single client app. Within the same application, users can communicate with each other across all platforms, whether they are on mobile devices or on the web.
-Use `--ide ` to target a specific IDE (e.g. `--ide cursor`), or `--ide all` for all supported IDEs.
+**iii. Platform & IDE Setup**
-Then in your IDE:
+* Flutter installed on your system.
+* Android Studio or VS Code with configured Flutter/Dart plugins.
+* Xcode & Pod (CocoaPods) for iOS.
+* An iOS device or emulator with iOS 13.0 or above.
+* Android device or emulator with Android version 7.0 (API 24) or above.
-```
-/cometchat add chat to my app
-```
+## Getting Started
-The skill detects your Flutter project structure, navigation setup, 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 routes, screens, and widgets before proposing a placement (route, modal sheet, or tab), shows the plan, and waits for your approval before writing code. Credentials are saved as a Dart const file or via `--dart-define`.
+### **Step 1: Create Flutter application project**
-After the first integration, re-run `/cometchat` to access the iteration menu: theme presets, 40+ features, component customization, production auth, user management, and diagnostics.
+To get started, create a new flutter application project.
-Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and [30+ more agents](https://github.com/cometchat/cometchat-skills).
+***
----
+### **Step 2: Add Dependency**
-## Prerequisites
+**1. Install via CLI**
-You need three things from the [CometChat Dashboard](https://app.cometchat.com/):
+Since V6 is hosted on Cloudsmith (not pub.dev), run this command instead of the standard `flutter pub add`:
-| Credential | Where to find it |
-| --- | --- |
-| App ID | Dashboard → Your App → Credentials |
-| Auth Key | Dashboard → Your App → Credentials |
-| Region | Dashboard → Your App → Credentials (e.g. `us`, `eu`, `in`) |
+```bash
+dart pub add cometchat_chat_uikit:6.0.0 --hosted-url https://dart.cloudsmith.io/cometchat/cometchat/
+```
-You also need Flutter 3.0+ installed with Android Studio or VS Code.
+**2. Update Pubspec**
-
-Auth Key is for development only. In production, generate Auth Tokens server-side via the [REST API](/rest-api/chat-apis) and use `loginWithAuthToken()`. Never ship Auth Keys in client code.
-
+Or add it manually to your `pubspec.yaml`:
----
+```yaml pubspec.yaml
+dependencies:
+ cometchat_chat_uikit:
+ hosted: https://dart.cloudsmith.io/cometchat/cometchat/
+ version: 6.0.0
+```
-## Step 1 — Create a Flutter Project
+Final `pubspec.yaml`
-```bash
-flutter create my_chat_app
-cd my_chat_app
-```
+```yaml pubspec.yaml
+name: my_chat_app
+description: "A Flutter app with CometChat V6."
----
+publish_to: 'none'
-## Step 2 — Install the UI Kit
+version: 1.0.0+1
-Add to your `pubspec.yaml`:
+environment:
+ sdk: ^3.8.0
-```yaml pubspec.yaml
dependencies:
flutter:
sdk: flutter
- cometchat_chat_uikit: ^5.2.14
- cometchat_calls_uikit: ^5.0.15 # Optional: for voice/video calling
-```
-Then run:
+ cometchat_chat_uikit:
+ hosted: https://dart.cloudsmith.io/cometchat/cometchat/
+ version: 6.0.0
-```bash
-flutter pub get
-```
+ cupertino_icons: ^1.0.8
+
+dev_dependencies:
+ flutter_test:
+ sdk: flutter
-**Android Setup** — Add the following to `android/gradle.properties`:
+ flutter_lints: ^4.0.0
-```properties gradle.properties
-android.enableJetifier=true
+flutter:
+ uses-material-design: true
```
-Then update `android/app/build.gradle`:
+***
+
+**2. Android App Setup**
+
+Update the `minSdkVersion` in your Android project configuration, located at `android/app/build.gradle`:
```gradle build.gradle
android {
defaultConfig {
- minSdk = 24 // Required for calling
+ minSdk = 24
+ // Other configurations...
}
}
```
-**iOS Setup** — Update `ios/Podfile`:
+***
+
+**3. Update iOS Podfile**
+
+In your Podfile (located at `ios/Podfile`), update the minimum iOS version:
```ruby Podfile
platform :ios, '13.0'
```
-Then run:
+***
-```bash
-cd ios && pod install && cd ..
+**4. Import CometChat UIKit**
+
+In your Dart code, import the CometChat UIKit package:
+
+```dart main.dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
```
----
+> V6 uses a single import. The `cometchat_uikit_shared` package is internalized — no separate import needed.
-## Step 3 — Initialize CometChat
+***
-Create a constants file and initialize the UI Kit before anything else.
+### **Step 3: Initialize UI Kit**
-```dart title="lib/cometchat_config.dart"
+Before using any features from the CometChat UI Kit, initialize it with your app credentials.
+
+1. **Create a Configuration File:**
+
+```dart cometchat_config.dart
class CometChatConfig {
- static const String appId = "APP_ID"; // Replace with your App ID
- static const String region = "REGION"; // Replace with your Region
- static const String authKey = "AUTH_KEY"; // Replace with your Auth Key (dev only)
+ static const String appId = "APP_ID"; // Replace with your App ID
+ static const String region = "REGION"; // Replace with your App Region
+ static const String authKey = "AUTH_KEY"; // Replace with your Auth Key
}
```
-```dart title="lib/main.dart"
-import 'package:flutter/material.dart';
+2. **Initialize the UI Kit:**
+
+```dart main.dart
+import 'cometchat_config.dart';
+
+UIKitSettings uiKitSettings = (UIKitSettingsBuilder()
+ ..subscriptionType = CometChatSubscriptionType.allUsers
+ ..autoEstablishSocketConnection = true
+ ..region = CometChatConfig.region
+ ..appId = CometChatConfig.appId
+ ..authKey = CometChatConfig.authKey
+).build();
+
+CometChatUIKit.init(
+ uiKitSettings: uiKitSettings,
+ onSuccess: (successMessage) async {
+ debugPrint('CometChat Initialized');
+ },
+ onError: (error) {
+ debugPrint('CometChat Initialization error');
+ },
+);
+```
+
+> **V6 difference from V5:** No `extensions` or `aiFeature` parameters needed. Extensions are built-in and handled automatically by `MessageTemplateUtils`.
+
+***
+
+### **Step 4: Login to UI Kit**
+
+Once the UI Kit is initialized, authenticate your user using the `login()` method.
+
+```dart main.dart
+CometChatUIKit.login(
+ "cometchat-uid-1", // Replace with a valid UID
+ onSuccess: (user) {
+ debugPrint('CometChat LoggedIn success');
+ },
+ onError: (error) {
+ debugPrint('CometChat LoggedIn error');
+ },
+);
+```
+
+You can test using any of the following pre-generated users:
+
+* `cometchat-uid-1`
+* `cometchat-uid-2`
+* `cometchat-uid-3`
+* `cometchat-uid-4`
+* `cometchat-uid-5`
+
+> For more information, refer to the documentation on [Init](/ui-kit/flutter/methods#init) and [Login](/ui-kit/flutter/methods#login-using-auth-key).
+
+#### **Example: Initialization and Login Combined**
+
+```dart main.dart
import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart'; // Optional
+import 'package:flutter/material.dart';
import 'cometchat_config.dart';
-void main() => runApp(const MyApp());
+void main() {
+ runApp(const MyApp());
+}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@@ -152,169 +217,166 @@ class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
- title: 'CometChat Demo',
- home: const InitializerScreen(),
+ title: 'CometChat V6',
+ theme: ThemeData(useMaterial3: true),
+ home: const InitPage(),
);
}
}
-class InitializerScreen extends StatelessWidget {
- const InitializerScreen({super.key});
+class InitPage extends StatefulWidget {
+ const InitPage({super.key});
+
+ @override
+ State createState() => _InitPageState();
+}
+
+class _InitPageState extends State {
+ bool _isInitializing = true;
+ String? _error;
+
+ @override
+ void initState() {
+ super.initState();
+ _initCometChat();
+ }
Future _initCometChat() async {
- final settings = (UIKitSettingsBuilder()
- ..appId = CometChatConfig.appId
- ..region = CometChatConfig.region
- ..authKey = CometChatConfig.authKey
- ..subscriptionType = CometChatSubscriptionType.allUsers
- ..autoEstablishSocketConnection = true
- ..extensions = CometChatUIKitChatExtensions.getDefaultExtensions()
- ..callingExtension = CometChatCallingExtension() // Optional
- ).build();
-
- await CometChatUIKit.init(uiKitSettings: settings);
+ UIKitSettings uiKitSettings = (UIKitSettingsBuilder()
+ ..subscriptionType = CometChatSubscriptionType.allUsers
+ ..autoEstablishSocketConnection = true
+ ..region = CometChatConfig.region
+ ..appId = CometChatConfig.appId
+ ..authKey = CometChatConfig.authKey)
+ .build();
+
+ CometChatUIKit.init(
+ uiKitSettings: uiKitSettings,
+ onSuccess: (msg) {
+ CometChatUIKit.login(
+ "cometchat-uid-1",
+ onSuccess: (user) {
+ debugPrint('Logged in as: ${user.name}');
+ setState(() => _isInitializing = false);
+ },
+ onError: (error) {
+ setState(() {
+ _isInitializing = false;
+ _error = error.message;
+ });
+ },
+ );
+ },
+ onError: (error) {
+ setState(() {
+ _isInitializing = false;
+ _error = error.message;
+ });
+ },
+ );
}
@override
Widget build(BuildContext context) {
- return FutureBuilder(
- future: _initCometChat(),
- builder: (context, snapshot) {
- if (snapshot.connectionState != ConnectionState.done) {
- return const Scaffold(
- body: Center(child: CircularProgressIndicator()),
- );
- }
- if (snapshot.hasError) {
- return Scaffold(
- body: Center(child: Text('Init failed: ${snapshot.error}')),
- );
- }
- return const LoginScreen();
- },
- );
+ if (_isInitializing) {
+ return const Scaffold(body: Center(child: CircularProgressIndicator()));
+ }
+ if (_error != null) {
+ return Scaffold(body: Center(child: Text('Error: $_error')));
+ }
+ return const Scaffold(body: Center(child: Text('Ready!')));
}
}
```
-
-`init()` must resolve before you call `login()`. If you call `login()` before init completes, it will fail silently.
-
+***
----
+### **Step 5: Choose a Chat Experience**
-## Step 4 — Login
+Integrate a conversation view that suits your application's UX requirements. Below are the available options:
-After init resolves, log the user in. 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`
+### **1. Conversation List + Message View**
-```dart
-CometChatUIKit.login(
- "cometchat-uid-1",
- onSuccess: (user) {
- debugPrint('Login successful: ${user.name}');
- // Navigate to chat screen
- },
- onError: (error) {
- debugPrint('Login failed: $error');
- },
-);
-```
+**Best for:** Flutter apps that need a smooth, stack-based navigation between conversations and messages.
-Key points:
-- `getLoggedInUser()` checks for an existing session so you don't re-login unnecessarily.
-- Widgets must not render until login resolves — use a state flag to gate rendering.
+**Highlights:**
-
-For production, use `loginWithAuthToken()` instead of Auth Key. Generate tokens server-side via the REST API.
-
+* **Compact Layout** – Uses `Navigator.push()` for mobile-first navigation.
+* **One-to-One & Group Chats** – Built-in support for private and group conversations.
+* **Real-Time Messaging** – Message list auto-refreshes with CometChat events.
+* **BLoC-Powered** – Predictable state management with `ConversationsBloc` and `MessageListBloc`.
----
+**Use When:**
-## Step 5 — Choose a Chat Experience
+* You want a clean navigation experience for multiple chat sessions.
+* Your Flutter app supports both direct and group messaging.
-Integrate a conversation view that suits your app's UX. Each option below includes a step-by-step guide.
+[Integrate Conversation List + Message View](./flutter-conversation)
-### Conversation List + Message View
+***
-Two-panel layout — conversation list with navigation to messages. Think WhatsApp or Telegram.
+### **2. One-to-One / Group Chat**
-- Stack-based navigation with `Navigator.push()`
-- Switch between one-to-one and group conversations
-- Real-time updates and message sync across sessions
+**Best for:** When a user lands directly into a chat screen, bypassing the conversation list.
-
-
-
+In V6, you compose the chat screen using individual widgets:
-
- Step-by-step guide to build this layout
-
+```dart
+Scaffold(
+ body: Column(
+ children: [
+ CometChatMessageHeader(user: user),
+ Expanded(child: CometChatMessageList(user: user)),
+ CometChatMessageComposer(user: user),
+ ],
+ ),
+)
+```
----
+> V6 does not have a combined `CometChatMessages` composite widget. You compose the UI yourself using `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer`.
-### One-to-One / Group Chat
+**Use When:**
-Single chat window — no conversation list. Good for support chat, embedded widgets, or focused messaging.
+* Your chat starts from a specific user or group ID.
+* You want a clean, focused chat interface.
+* Use case involves support, onboarding, or one-time messages.
-- Dedicated chat window for one-on-one or group messaging
-- No conversation list — users go directly into the chat
-- Ideal for support chat or contextual messaging
+[Integrate One-to-One / Group Chat](./flutter-one-to-one-chat)
-
-
-
+***
-
- Step-by-step guide to build this layout
-
+### **3. Tab-Based Messaging UI (All-in-One)**
----
+**Best for:** Flutter apps needing a multi-tab experience to access Chat, Users, Calls, and Settings.
-### Tab-Based Chat
+**Use When:**
-Tabbed navigation — Chat, Call Logs, Users, Groups in separate tabs. Good for full-featured apps.
+* You need a full-featured chat solution in one UI.
+* Your users require structured navigation between modules.
-- `BottomNavigationBar` with independent screens
-- Unified experience for conversations, call history, and contacts
-- Scales well for adding future features
+[Integrate Tab-Based Chat](./flutter-tab-based-chat)
-
-
-
+***
-
- Step-by-step guide to build this layout
-
+## **Build Your Own Chat Experience**
----
+**Best for:** Developers who need complete control over their chat interface.
-## Build Your Own Chat Experience
+**Key Areas to Explore:**
-Need full control over the UI? Use individual widgets, customize themes, and wire up your own layouts.
+* **[Core Features](./core-features)** – Learn about messaging, real-time updates, and other essential capabilities.
+* **[Components](./components-overview)** – Utilize prebuilt UI elements or customize them to fit your design.
+* **[Themes](./theme-introduction)** – Adjust colors, fonts, and styles to match your branding.
-- [Sample App](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) — Working reference app to compare against
-- [Components](/ui-kit/flutter/components-overview) — All prebuilt UI widgets with props and customization options
-- [Core Features](/ui-kit/flutter/core-features) — Messaging, real-time updates, and other capabilities
-- [Theming](/ui-kit/flutter/theme-introduction) — Colors, fonts, dark mode, and custom styling
-- [Build Your Own UI](/sdk/flutter/overview) — Skip the UI Kit entirely and build on the raw SDK
+***
----
+## **Next Steps**
+
+* **[Integrate Conversation List + Message](/ui-kit/flutter/flutter-conversation)**
+* **[Integrate One-to-One Chat](/ui-kit/flutter/flutter-one-to-one-chat)**
+* **[Integrate Tab-Based Chat](/ui-kit/flutter/flutter-tab-based-chat)**
+* **[Advanced Customizations](/ui-kit/flutter/theme-introduction)**
-## Next Steps
-
-
-
- Browse all prebuilt UI widgets
-
-
- Customize colors, fonts, and styles
-
-
- Chat features included out of the box
-
-
- Init, login, and other SDK methods
-
-
+***
diff --git a/ui-kit/flutter/group-members.mdx b/ui-kit/flutter/group-members.mdx
index 4dc08eee3..2dc19f7e9 100644
--- a/ui-kit/flutter/group-members.mdx
+++ b/ui-kit/flutter/group-members.mdx
@@ -1,252 +1,73 @@
---
title: "Group Members"
-description: "Displays all members of a group in a searchable, scrollable list with member scope badges and management actions."
+description: "Scrollable list of members in a group with scope indicators, search, and member management actions."
---
-
-```json
-{
- "component": "CometChatGroupMembers",
- "package": "cometchat_chat_uikit",
- "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
- "description": "Displays all members of a group in a searchable, scrollable list with member scope badges and management actions.",
- "primaryOutput": {
- "prop": "onItemTap",
- "type": "Function(GroupMember groupMember)?"
- },
- "props": {
- "data": {
- "group": {
- "type": "Group",
- "default": "required",
- "note": "The group object to fetch members from"
- },
- "groupMembersRequestBuilder": {
- "type": "GroupMembersRequestBuilder?",
- "default": "null",
- "note": "Custom request builder for filtering members"
- },
- "groupMembersProtocol": {
- "type": "GroupMembersBuilderProtocol?",
- "default": "null",
- "note": "Custom protocol for fetching group members"
- },
- "searchKeyword": {
- "type": "String?",
- "default": "null",
- "note": "Pre-fills search and filters list"
- },
- "controllerTag": {
- "type": "String?",
- "default": "null",
- "note": "Tag for controller management"
- }
- },
- "callbacks": {
- "onItemTap": "Function(GroupMember groupMember)?",
- "onItemLongPress": "Function(GroupMember groupMember)?",
- "onSelection": "Function(List?)?",
- "onBack": "VoidCallback?",
- "onError": "OnError?",
- "onLoad": "OnLoad?",
- "onEmpty": "OnEmpty?",
- "stateCallBack": "Function(CometChatGroupMembersController controller)?"
- },
- "visibility": {
- "showBackButton": { "type": "bool", "default": true },
- "hideSearch": { "type": "bool", "default": false },
- "hideSeparator": { "type": "bool?", "default": null },
- "hideError": { "type": "bool?", "default": null },
- "hideAppbar": { "type": "bool?", "default": null },
- "usersStatusVisibility": { "type": "bool?", "default": true },
- "hideKickMemberOption": { "type": "bool?", "default": null },
- "hideBanMemberOption": { "type": "bool?", "default": null },
- "hideScopeChangeOption": { "type": "bool?", "default": null }
- },
- "selection": {
- "selectionMode": {
- "type": "SelectionMode?",
- "values": ["SelectionMode.single", "SelectionMode.multiple", "SelectionMode.none"],
- "default": "null"
- },
- "activateSelection": {
- "type": "ActivateSelection?",
- "values": ["ActivateSelection.onClick", "ActivateSelection.onLongClick"],
- "default": "null"
- }
- },
- "viewSlots": {
- "listItemView": "Widget Function(GroupMember)?",
- "leadingView": "Widget? Function(BuildContext, GroupMember)?",
- "titleView": "Widget? Function(BuildContext, GroupMember)?",
- "subtitleView": "Widget? Function(BuildContext, GroupMember)?",
- "trailingView": "Function(BuildContext, GroupMember)?",
- "loadingStateView": "WidgetBuilder?",
- "emptyStateView": "WidgetBuilder?",
- "errorStateView": "WidgetBuilder?",
- "setOptions": "List? Function(Group, GroupMember, CometChatGroupMembersController, BuildContext)?",
- "addOptions": "List? Function(Group, GroupMember, CometChatGroupMembersController, BuildContext)?",
- "appBarOptions": "List?"
- },
- "icons": {
- "backButton": { "type": "Widget?", "default": "built-in back arrow" },
- "searchBoxIcon": { "type": "Widget?", "default": "built-in search icon" },
- "submitIcon": { "type": "Widget?", "default": "built-in check icon" },
- "selectIcon": { "type": "Widget?", "default": "built-in selection icon" }
- },
- "formatting": {
- "searchPlaceholder": { "type": "String?", "default": "null" },
- "height": { "type": "double?", "default": "null" },
- "width": { "type": "double?", "default": "null" }
- },
- "style": {
- "style": { "type": "CometChatGroupMembersStyle?", "default": "null" }
- }
- },
- "events": [
- { "name": "CometChatGroupEvents.ccGroupMemberScopeChanged", "payload": "Action, GroupMember, String newScope, String oldScope, Group", "description": "Member scope changed" },
- { "name": "CometChatGroupEvents.ccGroupMemberBanned", "payload": "Action, GroupMember, User bannedBy, Group", "description": "Member banned from group" },
- { "name": "CometChatGroupEvents.ccGroupMemberKicked", "payload": "Action, GroupMember, User kickedBy, Group", "description": "Member kicked from group" }
- ],
- "sdkListeners": [
- "onGroupMemberScopeChanged",
- "onGroupMemberKicked",
- "onGroupMemberLeft",
- "onGroupMemberBanned",
- "onGroupMemberJoined",
- "onMemberAddedToGroup",
- "onUserOnline",
- "onUserOffline"
- ],
- "compositionExample": {
- "description": "Group member list wired to group details or member actions",
- "components": [
- "CometChatGroupMembers",
- "CometChatGroups",
- "CometChatMessages"
- ],
- "flow": "CometChatGroups emits Group -> pass to CometChatGroupMembers -> onItemTap emits GroupMember for actions"
- },
- "types": {
- "GroupMember": {
- "uid": "String",
- "name": "String",
- "avatar": "String?",
- "scope": "String (owner/admin/moderator/participant)",
- "joinedAt": "DateTime?"
- },
- "CometChatOption": {
- "id": "String?",
- "title": "String?",
- "icon": "String?",
- "iconWidget": "Widget?",
- "onClick": "VoidCallback?"
- },
- "SelectionMode": {
- "single": "SelectionMode.single",
- "multiple": "SelectionMode.multiple",
- "none": "SelectionMode.none"
- }
- }
-}
-```
-
+`CometChatGroupMembers` renders a scrollable list of members in a specific group with real-time updates, scope indicators (owner/admin/moderator/participant), search, and member management actions (kick, ban, change scope).
+
+
+ 
+
+---
## Where It Fits
-`CometChatGroupMembers` displays all members of a group with their roles (owner, admin, moderator, participant). It provides member management actions like kick, ban, and scope change. Wire it to `CometChatGroups` to show members when a group is selected.
+`CometChatGroupMembers` is a list component that requires a `Group` object. It renders group members and supports actions like kick, ban, and scope change based on the logged-in user's permissions.
```dart
-import 'package:flutter/material.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
-class GroupMembersScreen extends StatelessWidget {
- final Group group;
-
- const GroupMembersScreen({super.key, required this.group});
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: SafeArea(
- child: CometChatGroupMembers(
- group: group,
- onItemTap: (groupMember) {
- // Handle member tap - show profile or actions
- print("Tapped: ${groupMember.name}");
- },
- ),
- ),
- );
- }
-}
+CometChatGroupMembers(
+ group: group,
+ onItemTap: (groupMember) {
+ // Navigate to member profile or chat
+ },
+)
```
-
-
-
-
-The `CometChatGroupMembers` widget is composed of the following BaseWidgets:
-
-| Widgets | Description |
-| --- | --- |
-| [CometChatListBase](/ui-kit/flutter/components-overview) | Container widget with title, search functionality, and background settings |
-| [CometChatListItem](/ui-kit/flutter/components-overview) | Renders member information with title, subtitle, leading, and trailing widgets |
-
---
+## Quick Start
-## Minimal Render
+Using Navigator:
```dart
-import 'package:flutter/material.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
-class GroupMembersDemo extends StatelessWidget {
- final Group group;
-
- const GroupMembersDemo({super.key, required this.group});
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: SafeArea(
- child: CometChatGroupMembers(
- group: group,
- ),
- ),
- );
- }
-}
+Navigator.push(context, MaterialPageRoute(
+ builder: (context) => CometChatGroupMembers(group: group),
+));
```
-You can also launch it using `Navigator.push`:
+Embedding as a widget:
+
+
```dart
-Navigator.push(
- context,
- MaterialPageRoute(
- builder: (context) => CometChatGroupMembers(
- group: Group(guid: "group_id", name: "Group Name", type: GroupTypeConstants.public),
+@override
+Widget build(BuildContext context) {
+ return Scaffold(
+ body: SafeArea(
+ child: CometChatGroupMembers(group: group),
),
- ),
-);
+ );
+}
```
+
+
+
+Prerequisites: CometChat SDK initialized, a user logged in, and a valid `Group` object.
---
-## Filtering Group Members
+## Filtering Members
-Pass a `GroupMembersRequestBuilder` to `groupMembersRequestBuilder`. Pass the builder instance — not the result of `.build()`.
+Pass a `GroupMembersRequestBuilder` to control what loads:
@@ -254,7 +75,8 @@ Pass a `GroupMembersRequestBuilder` to `groupMembersRequestBuilder`. Pass the bu
CometChatGroupMembers(
group: group,
groupMembersRequestBuilder: GroupMembersRequestBuilder(group.guid)
- ..limit = 10,
+ ..limit = 20
+ ..searchKeyword = "john",
)
```
@@ -262,70 +84,21 @@ CometChatGroupMembers(
### Filter Recipes
-| Recipe | Code |
-| --- | --- |
-| Limit to 10 per page | `GroupMembersRequestBuilder(guid)..limit = 10` |
-| Search by keyword | `GroupMembersRequestBuilder(guid)..searchKeyword = "john"` |
-| Filter by scopes | `GroupMembersRequestBuilder(guid)..scopes = ["admin", "moderator"]` |
-
-Default page size is 30. The component uses infinite scroll — the next page loads as the user scrolls to the bottom.
-
-
-### GroupMembersRequestBuilder Properties
-
-| Property | Description | Code |
-| --- | --- | --- |
-| `guid` | Group ID (required) | `GroupMembersRequestBuilder("group_id")` |
-| `limit` | Number of members to fetch per request | `..limit = 30` |
-| `searchKeyword` | Search members by name | `..searchKeyword = "John"` |
-| `scopes` | Filter by member scopes | `..scopes = ["admin"]` |
-| `build()` | Builds and returns a `GroupMembersRequest` object | `.build()` |
-
-### Custom Protocol Builder
-
-Use `GroupMembersBuilderProtocol` to customize both the initial list and search results:
-
-
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
-class CustomProtocolBuilder extends GroupMembersBuilderProtocol {
- const CustomProtocolBuilder(super.builder);
-
- @override
- GroupMembersRequest getRequest() {
- return requestBuilder.build();
- }
-
- @override
- GroupMembersRequest getSearchRequest(String val) {
- requestBuilder.searchKeyword = val;
- return requestBuilder.build();
- }
-}
-
-// Usage
-CometChatGroupMembers(
- group: group,
- groupMembersProtocol: CustomProtocolBuilder(
- GroupMembersRequestBuilder(group.guid)..scopes = ["admin", "moderator"],
- ),
-)
-```
-
-
+| Recipe | Builder property |
+|---|---|
+| Limit per page | `..limit = 20` |
+| Search by name | `..searchKeyword = "john"` |
+| Filter by scopes | `..scopes = ["admin", "moderator"]` |
---
-
## Actions and Events
-### Callback Props
+### Callback Methods
-#### onItemTap
+#### `onItemTap`
-Fires when a member row is tapped. Use for showing member profile or custom actions.
+Fires when a member row is tapped.
@@ -333,16 +106,16 @@ Fires when a member row is tapped. Use for showing member profile or custom acti
CometChatGroupMembers(
group: group,
onItemTap: (groupMember) {
- print("Selected: ${groupMember.name}");
+ // Navigate to member profile
},
)
```
-#### onItemLongPress
+#### `onItemLongPress`
-Fires when a member row is long-pressed. Useful for showing context menus.
+Fires when a member row is long-pressed. By default shows the member action menu (kick/ban/scope change).
@@ -350,88 +123,85 @@ Fires when a member row is long-pressed. Useful for showing context menus.
CometChatGroupMembers(
group: group,
onItemLongPress: (groupMember) {
- // Show custom context menu
+ // Custom long press behavior
},
)
```
-#### onSelection
+#### `onBack`
-Fires when members are selected in multi-select mode. Requires `selectionMode` to be set.
+Fires when the user presses the back button.
```dart
CometChatGroupMembers(
group: group,
- selectionMode: SelectionMode.multiple,
- activateSelection: ActivateSelection.onClick,
- onSelection: (selectedList) {
- print("Selected ${selectedList?.length ?? 0} members");
+ onBack: () {
+ Navigator.pop(context);
},
)
```
-#### onError
+#### `onSelection`
-Fires on internal errors (network failure, auth issue, SDK exception).
+Fires when members are selected/deselected in multi-select mode.
```dart
CometChatGroupMembers(
group: group,
- onError: (error) {
- print("CometChatGroupMembers error: $error");
+ selectionMode: SelectionMode.multiple,
+ onSelection: (selectedMembers, context) {
+ // Handle selected members
},
)
```
+#### `onError`
-#### onBack
-
-Fires when the back button is pressed.
+Fires on internal errors.
```dart
CometChatGroupMembers(
group: group,
- showBackButton: true,
- onBack: () {
- Navigator.pop(context);
+ onError: (e) {
+ debugPrint("Error: ${e.message}");
},
)
```
-#### onLoad
+#### `onLoad`
-Fires when the member list is successfully loaded.
+Fires when the list is successfully fetched.
```dart
CometChatGroupMembers(
group: group,
- onLoad: (list) {
- print("Loaded ${list.length} members");
+ onLoad: (memberList) {
+ debugPrint("Loaded ${memberList.length} members");
},
)
```
-#### onEmpty
+#### `onEmpty`
-Fires when the member list is empty.
+Fires when the list is empty after loading.
@@ -439,34 +209,21 @@ Fires when the member list is empty.
CometChatGroupMembers(
group: group,
onEmpty: () {
- print("No members found");
+ debugPrint("No members found");
},
)
```
-### Global UI Events
-
-`CometChatGroupEvents` emits events subscribable from anywhere in the application. Add a listener in `initState` and remove it in `dispose`.
-
-| Event | Fires when | Payload |
-| --- | --- | --- |
-| `ccGroupMemberScopeChanged` | A member's scope is changed | `Action, User, String scopeChangedTo, String scopeChangedFrom, Group` |
-| `ccGroupMemberBanned` | A member is banned | `Action, User, User bannedBy, Group` |
-| `ccGroupMemberKicked` | A member is kicked | `Action, User, User kickedBy, Group` |
-
-When to use: sync external UI with member changes. For example, update a member count badge when a member is kicked.
+### Global Events
+The component emits events via `CometChatGroupEvents`:
```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:cometchat_sdk/models/action.dart' as cc;
-
class _YourScreenState extends State with CometChatGroupEventListener {
-
@override
void initState() {
super.initState();
@@ -480,23 +237,18 @@ class _YourScreenState extends State with CometChatGroupEventListene
}
@override
- void ccGroupMemberScopeChanged(cc.Action message, User updatedUser, String scopeChangedTo, String scopeChangedFrom, Group group) {
- print("${updatedUser.name} scope changed to $scopeChangedTo");
+ void ccGroupMemberKicked(Action action, User kickedUser, User kickedBy, Group kickedFrom) {
+ // Handle member kicked
}
@override
- void ccGroupMemberBanned(cc.Action message, User bannedUser, User bannedBy, Group bannedFrom) {
- print("${bannedUser.name} was banned from ${bannedFrom.name}");
+ void ccGroupMemberBanned(Action action, User bannedUser, User bannedBy, Group bannedFrom) {
+ // Handle member banned
}
@override
- void ccGroupMemberKicked(cc.Action message, User kickedUser, User kickedBy, Group kickedFrom) {
- print("${kickedUser.name} was kicked from ${kickedFrom.name}");
- }
-
- @override
- Widget build(BuildContext context) {
- return const Placeholder();
+ void ccGroupMemberScopeChanged(Action action, User updatedUser, String scopeChangedTo, String scopeChangedFrom, Group group) {
+ // Handle scope changed
}
}
```
@@ -505,62 +257,47 @@ class _YourScreenState extends State with CometChatGroupEventListene
### SDK Events (Real-Time, Automatic)
-The component listens to these SDK events internally. No manual attachment needed unless additional side effects are required.
-
| SDK Listener | Internal behavior |
-| --- | --- |
-| `onGroupMemberScopeChanged` | Updates member scope badge |
-| `onGroupMemberKicked` | Removes member from list |
+|---|---|
+| `onGroupMemberJoined` | Adds member to list |
| `onGroupMemberLeft` | Removes member from list |
+| `onGroupMemberKicked` | Removes member from list |
| `onGroupMemberBanned` | Removes member from list |
-| `onGroupMemberJoined` | Adds new member to list |
-| `onMemberAddedToGroup` | Adds new member to list |
-| `onUserOnline` | Updates online status indicator |
-| `onUserOffline` | Updates offline status indicator |
+| `onGroupMemberScopeChanged` | Updates member scope in list |
+| `onUserOnline` / `onUserOffline` | Updates presence via per-member ValueNotifier (isolated rebuild) |
+| Connection reconnected | Triggers silent refresh |
---
+## Functionality
+
+| Property | Type | Default | Description |
+|---|---|---|---|
+| `group` | `Group` | **required** | The group whose members to display |
+| `title` | `String?` | `null` | Custom app bar title |
+| `showBackButton` | `bool` | `true` | Toggle back button |
+| `hideAppbar` | `bool?` | `false` | Toggle app bar visibility |
+| `hideSearch` | `bool` | `false` | Toggle search bar |
+| `usersStatusVisibility` | `bool?` | `true` | Show online/offline status |
+| `selectionMode` | `SelectionMode?` | `null` | Enable selection mode |
+| `hideKickMemberOption` | `bool?` | `false` | Hide kick option in action menu |
+| `hideBanMemberOption` | `bool?` | `false` | Hide ban option in action menu |
+| `hideScopeChangeOption` | `bool?` | `false` | Hide scope change option |
-## Custom View Slots
-
-Each slot replaces a section of the default UI. Slots that accept a member parameter receive the `GroupMember` object for that row.
-
-| Slot | Signature | Replaces |
-| --- | --- | --- |
-| `listItemView` | `Widget Function(GroupMember)` | Entire list item row |
-| `leadingView` | `Widget? Function(BuildContext, GroupMember)` | Avatar / left section |
-| `titleView` | `Widget? Function(BuildContext, GroupMember)` | Member name |
-| `subtitleView` | `Widget? Function(BuildContext, GroupMember)` | Secondary text |
-| `trailingView` | `Function(BuildContext, GroupMember)` | Scope badge / right section |
-| `loadingStateView` | `WidgetBuilder` | Loading spinner |
-| `emptyStateView` | `WidgetBuilder` | Empty state |
-| `errorStateView` | `WidgetBuilder` | Error state |
-| `setOptions` | `List? Function(Group, GroupMember, Controller, BuildContext)` | Context menu actions (replaces default) |
-| `addOptions` | `List? Function(Group, GroupMember, Controller, BuildContext)` | Context menu actions (adds to default) |
-| `appBarOptions` | `List` | App bar action widgets |
-
-### listItemView
+---
-Replace the entire list item row.
+## Custom View Slots
-
- 
-
+### Leading View
```dart
CometChatGroupMembers(
group: group,
- listItemView: (groupMember) {
- return ListTile(
- leading: CometChatAvatar(
- image: groupMember.avatar,
- name: groupMember.name,
- ),
- title: Text(groupMember.name ?? ''),
- subtitle: Text(groupMember.scope ?? 'participant'),
- trailing: Icon(Icons.chevron_right),
+ leadingView: (context, groupMember) {
+ return CircleAvatar(
+ child: Text(groupMember.name?[0] ?? ""),
);
},
)
@@ -568,38 +305,17 @@ CometChatGroupMembers(
-
-### leadingView
-
-Replace the avatar / left section. Online status indicator example.
+### Title View
```dart
CometChatGroupMembers(
group: group,
- leadingView: (context, groupMember) {
- return Stack(
- children: [
- CometChatAvatar(
- image: groupMember.avatar,
- name: groupMember.name,
- style: CometChatAvatarStyle(borderRadius: BorderRadius.circular(20)),
- ),
- Positioned(
- bottom: 0,
- right: 0,
- child: Container(
- width: 12,
- height: 12,
- decoration: BoxDecoration(
- color: groupMember.status == "online" ? Color(0xFF09C26F) : Colors.grey,
- shape: BoxShape.circle,
- border: Border.all(color: Colors.white, width: 2),
- ),
- ),
- ),
- ],
+ titleView: (context, groupMember) {
+ return Text(
+ groupMember.name ?? "",
+ style: TextStyle(fontWeight: FontWeight.bold),
);
},
)
@@ -607,27 +323,17 @@ CometChatGroupMembers(
-### titleView
-
-Replace the member name. Role badge inline example.
+### Subtitle View
```dart
CometChatGroupMembers(
group: group,
- titleView: (context, groupMember) {
- return Row(
- children: [
- Text(
- groupMember.name ?? '',
- style: TextStyle(fontWeight: FontWeight.w500, fontSize: 16),
- ),
- if (groupMember.scope == GroupMemberScope.owner) ...[
- SizedBox(width: 4),
- Icon(Icons.star, size: 16, color: Color(0xFFF76808)),
- ],
- ],
+ subtitleView: (context, groupMember) {
+ return Text(
+ groupMember.scope ?? "participant",
+ style: TextStyle(color: Color(0xFF727272), fontSize: 14),
);
},
)
@@ -635,66 +341,34 @@ CometChatGroupMembers(
-
-### subtitleView
-
-Replace the secondary text. Join date example.
-
-
- 
-
+### Trailing View
```dart
CometChatGroupMembers(
group: group,
- subtitleView: (context, groupMember) {
- final dateTime = groupMember.joinedAt ?? DateTime.now();
- return Text(
- "Joined ${DateFormat('dd/MM/yyyy').format(dateTime)}",
- style: TextStyle(color: Color(0xFF727272), fontSize: 14),
- );
+ trailingView: (context, groupMember) {
+ return Chip(label: Text(groupMember.scope ?? ""));
},
)
```
-### trailingView
-
-Replace the scope badge / right section. Custom scope badge example.
-
-
- 
-
+### List Item View
```dart
CometChatGroupMembers(
group: group,
- trailingView: (context, groupMember) {
- Color backgroundColor = Color(0xFFEDEAFA);
- Color textColor = Color(0xFF6852D6);
- String scope = groupMember.scope ?? GroupMemberScope.participant;
-
- if (groupMember.uid == group.owner) {
- scope = GroupMemberScope.owner;
- backgroundColor = Color(0xFF6852D6);
- textColor = Colors.white;
- }
-
- return Container(
- padding: EdgeInsets.symmetric(horizontal: 12, vertical: 4),
- decoration: BoxDecoration(
- color: backgroundColor,
- borderRadius: BorderRadius.circular(1000),
- ),
- child: Text(
- scope.capitalizeFirst ?? "",
- style: TextStyle(color: textColor, fontSize: 12, fontWeight: FontWeight.w400),
- ),
+ listItemView: (groupMember) {
+ return ListTile(
+ leading: CircleAvatar(child: Text(groupMember.name?[0] ?? "")),
+ title: Text(groupMember.name ?? ""),
+ subtitle: Text(groupMember.scope ?? "participant"),
+ trailing: Chip(label: Text(groupMember.scope ?? "")),
);
},
)
@@ -702,200 +376,133 @@ CometChatGroupMembers(
-
-### setOptions
-
-Replace the context menu / long-press actions on each member item.
+### State Views
```dart
CometChatGroupMembers(
group: group,
- setOptions: (group, groupMember, controller, context) {
- return [
- CometChatOption(
- id: "view_profile",
- title: "View Profile",
- iconWidget: Icon(Icons.person_outline),
- onClick: () {
- // Navigate to member profile
- },
- ),
- CometChatOption(
- id: "message",
- title: "Send Message",
- iconWidget: Icon(Icons.message_outlined),
- onClick: () {
- // Start direct message
- },
- ),
- ];
- },
+ emptyStateView: (context) => Center(child: Text("No members")),
+ errorStateView: (context) => Center(child: Text("Something went wrong")),
+ loadingStateView: (context) => Center(child: CircularProgressIndicator()),
)
```
-### addOptions
+---
-Add to the existing context menu actions without removing defaults.
+## Menu Options
```dart
+// Replace all options
CometChatGroupMembers(
group: group,
- addOptions: (group, groupMember, controller, context) {
+ setOptions: (groupMember, bloc, context) {
return [
CometChatOption(
- id: "report",
- title: "Report User",
- iconWidget: Icon(Icons.flag_outlined),
+ id: "message",
+ iconWidget: Icon(Icons.message),
+ title: "Message",
onClick: () {
- // Report user logic
+ // Open chat with this member
},
),
];
},
)
-```
-
-
-
-### appBarOptions
-Add custom widgets to the app bar.
-
-
- 
-
-
-
-
-```dart
+// Append to defaults
CometChatGroupMembers(
group: group,
- appBarOptions: [
- IconButton(
- onPressed: () {
- // Navigate to add members
- },
- icon: Icon(Icons.person_add_alt_1, color: Color(0xFF6852D6)),
- ),
- ],
+ addOptions: (groupMember, bloc, context) {
+ return [
+ CometChatOption(
+ id: "profile",
+ iconWidget: Icon(Icons.person),
+ title: "View Profile",
+ onClick: () {
+ // Open member profile
+ },
+ ),
+ ];
+ },
)
```
+---
+
+## Advanced
-### loadingStateView
+### BLoC Access
-Custom view displayed while members are being fetched.
+Provide a custom `GroupMembersBloc`:
```dart
CometChatGroupMembers(
group: group,
- loadingStateView: (context) {
- return Center(
- child: Column(
- mainAxisAlignment: MainAxisAlignment.center,
- children: [
- CircularProgressIndicator(),
- SizedBox(height: 16),
- Text("Loading members..."),
- ],
- ),
- );
- },
+ groupMembersBloc: CustomGroupMembersBloc(),
)
```
-### emptyStateView
+### Public BLoC Events
-Custom view displayed when no members are found.
+| Event | Description |
+|---|---|
+| `LoadGroupMembers` | Load initial members |
+| `LoadMoreGroupMembers` | Load next page (pagination) |
+| `SearchGroupMembers(keyword)` | Search members |
+| `KickMember(groupMember)` | Kick a member from the group |
+| `BanMember(groupMember)` | Ban a member from the group |
+| `ChangeMemberScope(groupMember, newScope)` | Change member's scope |
+| `ToggleMemberSelection(uid)` | Toggle selection state |
+| `ClearMemberSelection` | Clear all selections |
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- emptyStateView: (context) {
- return Center(
- child: Column(
- mainAxisAlignment: MainAxisAlignment.center,
- children: [
- Icon(Icons.people_outline, size: 64, color: Color(0xFF727272)),
- SizedBox(height: 16),
- Text("No members found"),
- ],
- ),
- );
- },
-)
-```
-
-
+For `ListBase` override hooks (`onItemAdded`, `onItemRemoved`, `onItemUpdated`, `onListCleared`, `onListReplaced`), see [BLoC & Data — ListBase Hooks](/ui-kit/flutter/customization-bloc-data#listbase-hooks).
-### errorStateView
+### Public BLoC Methods
-Custom view displayed when an error occurs.
+| Method | Returns | Description |
+|---|---|---|
+| `getStatusNotifier(uid)` | `ValueNotifier` | Per-member status notifier for isolated rebuilds |
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- errorStateView: (context) {
- return Center(
- child: Column(
- mainAxisAlignment: MainAxisAlignment.center,
- children: [
- Icon(Icons.error_outline, size: 64, color: Colors.red),
- SizedBox(height: 16),
- Text("Failed to load members"),
- ElevatedButton(
- onPressed: () {
- // Retry logic
- },
- child: Text("Retry"),
- ),
- ],
- ),
- );
- },
-)
-```
-
-
+### Permission-Based Actions
----
+Member actions (kick, ban, scope change) are permission-aware based on the logged-in user's scope:
+| Logged-in User Scope | Can Kick | Can Ban | Can Change Scope |
+|---|---|---|---|
+| Owner | All members | All members | All members |
+| Admin | Moderators, Participants | Moderators, Participants | Moderators, Participants |
+| Moderator | Participants | Participants | No |
+| Participant | No | No | No |
-## Styling
+---
-Set `CometChatGroupMembersStyle` to customize the appearance.
+## Style
```dart
CometChatGroupMembers(
group: group,
- style: CometChatGroupMembersStyle(
- titleStyle: TextStyle(color: Color(0xFFF76808)),
- separatorColor: Color(0xFFF76808),
- ownerMemberScopeBackgroundColor: Color(0xFFF76808),
- adminMemberScopeBackgroundColor: Color(0xFFFEEDE1),
- adminMemberScopeBorder: Border.all(color: Color(0xFFF76808)),
- adminMemberScopeTextColor: Color(0xFFF76808),
- moderatorMemberScopeBackgroundColor: Color(0xFFFEEDE1),
- moderatorMemberScopeTextColor: Color(0xFFF76808),
- backIconColor: Color(0xFFF76808),
+ groupMembersStyle: CometChatGroupMembersStyle(
+ avatarStyle: CometChatAvatarStyle(
+ borderRadius: BorderRadius.circular(8),
+ backgroundColor: Color(0xFFFBAA75),
+ ),
+ statusIndicatorStyle: CometChatStatusIndicatorStyle(),
+ changeScopeStyle: CometChatChangeScopeStyle(),
+ confirmDialogStyle: CometChatConfirmDialogStyle(),
),
)
```
@@ -908,198 +515,28 @@ CometChatGroupMembers(
### Style Properties
-| Property | Type | Description |
-| --- | --- | --- |
-| `backgroundColor` | `Color?` | Background color of the component |
-| `border` | `BoxBorder?` | Border for the widget |
-| `borderRadius` | `BorderRadiusGeometry?` | Border radius for the widget |
-| `titleStyle` | `TextStyle?` | Style for the header title |
-| `backIconColor` | `Color?` | Back button icon color |
-| `searchBackground` | `Color?` | Background color of search box |
-| `searchBorderRadius` | `BorderRadius?` | Border radius for search box |
-| `searchTextStyle` | `TextStyle?` | Style for search input text |
-| `searchPlaceholderStyle` | `TextStyle?` | Style for search placeholder |
-| `searchIconColor` | `Color?` | Search icon color |
-| `loadingIconColor` | `Color?` | Loading indicator color |
-| `emptyStateTextStyle` | `TextStyle?` | Style for empty state title |
-| `emptyStateTextColor` | `Color?` | Color for empty state title text |
-| `emptyStateSubtitleTextStyle` | `TextStyle?` | Style for empty state subtitle |
-| `emptyStateSubtitleTextColor` | `Color?` | Color for empty state subtitle text |
-| `errorStateTextStyle` | `TextStyle?` | Style for error state title |
-| `errorStateSubtitleStyle` | `TextStyle?` | Style for error state subtitle |
-| `onlineStatusColor` | `Color?` | Online status indicator color |
-| `separatorColor` | `Color?` | Color of list item separators |
-| `separatorHeight` | `double?` | Height of list item separators |
-| `listPadding` | `EdgeInsetsGeometry?` | Padding for the list |
-| `ownerMemberScopeBackgroundColor` | `Color?` | Background color for owner scope badge |
-| `ownerMemberScopeTextColor` | `Color?` | Text color for owner scope badge |
-| `ownerMemberScopeBorder` | `BoxBorder?` | Border for owner scope badge |
-| `ownerMemberScopeTextStyle` | `TextStyle?` | Text style for owner scope badge |
-| `adminMemberScopeBackgroundColor` | `Color?` | Background color for admin scope badge |
-| `adminMemberScopeTextColor` | `Color?` | Text color for admin scope badge |
-| `adminMemberScopeBorder` | `BoxBorder?` | Border for admin scope badge |
-| `adminMemberScopeTextStyle` | `TextStyle?` | Text style for admin scope badge |
-| `moderatorMemberScopeBackgroundColor` | `Color?` | Background color for moderator scope badge |
-| `moderatorMemberScopeTextColor` | `Color?` | Text color for moderator scope badge |
-| `moderatorMemberScopeBorder` | `BoxBorder?` | Border for moderator scope badge |
-| `moderatorMemberScopeTextStyle` | `TextStyle?` | Text style for moderator scope badge |
-| `checkboxCheckedBackgroundColor` | `Color?` | Background color for checked checkbox |
-| `checkboxBackgroundColor` | `Color?` | Background color for unchecked checkbox |
-| `checkboxSelectedIconColor` | `Color?` | Color for checkbox icon when selected |
-| `checkboxBorder` | `BorderSide?` | Border for checkbox |
-| `checkboxBorderRadius` | `BorderRadiusGeometry?` | Border radius for checkbox |
-| `listItemSelectedBackgroundColor` | `Color?` | Background color for selected list item |
-| `submitIconColor` | `Color?` | Color for submit icon |
-| `retryButtonBackgroundColor` | `Color?` | Background color for retry button |
-| `retryButtonTextColor` | `Color?` | Text color for retry button |
-| `retryButtonTextStyle` | `TextStyle?` | Text style for retry button |
-| `retryButtonBorder` | `BorderSide?` | Border for retry button |
-| `retryButtonBorderRadius` | `BorderRadiusGeometry?` | Border radius for retry button |
-| `avatarStyle` | `CometChatAvatarStyle?` | Style for member avatars |
-| `statusIndicatorStyle` | `CometChatStatusIndicatorStyle?` | Style for status indicators |
-| `listItemStyle` | `ListItemStyle?` | Style for list items |
-| `confirmDialogStyle` | `CometChatConfirmDialogStyle?` | Style for confirmation dialogs |
-| `changeScopeStyle` | `CometChatChangeScopeStyle?` | Style for change scope dialog |
-| `optionsBackgroundColor` | `Color?` | Background color for options menu |
-| `optionsIconColor` | `Color?` | Color for options icon |
-| `optionsTextStyle` | `TextStyle?` | Text style for options |
-
----
-
-
-## Common Patterns
-
-### Hide member management options
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- hideKickMemberOption: true,
- hideBanMemberOption: true,
- hideScopeChangeOption: true,
-)
-```
-
-
-
-### Multi-select with selection callback
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- selectionMode: SelectionMode.multiple,
- activateSelection: ActivateSelection.onClick,
- onSelection: (selectedMembers) {
- if (selectedMembers != null && selectedMembers.isNotEmpty) {
- print("Selected ${selectedMembers.length} members");
- // Perform batch action on selected members
- }
- },
-)
-```
-
-
-
-### Hide all chrome — minimal list
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- hideSearch: true,
- hideAppbar: true,
- hideSeparator: true,
-)
-```
-
-
-
-### Filter admins and moderators only
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- groupMembersRequestBuilder: GroupMembersRequestBuilder(group.guid)
- ..scopes = [GroupMemberScope.admin, GroupMemberScope.moderator],
-)
-```
-
-
-
----
-
-
-## Props Reference
-
-| Prop | Type | Default | Description |
-| --- | --- | --- | --- |
-| `group` | `Group` | **required** | The group object to fetch members from |
-| `groupMembersProtocol` | `GroupMembersBuilderProtocol?` | `null` | Custom request builder protocol |
-| `groupMembersRequestBuilder` | `GroupMembersRequestBuilder?` | `null` | Custom request builder for filtering members |
-| `searchKeyword` | `String?` | `null` | Pre-fills search and filters list |
-| `controllerTag` | `String?` | `null` | Tag for controller management |
-| `onSelection` | `Function(List?)?` | `null` | Callback when members are selected |
-| `onItemTap` | `Function(GroupMember)?` | `null` | Callback on tapping a member item |
-| `onItemLongPress` | `Function(GroupMember)?` | `null` | Callback on long pressing a member item |
-| `onBack` | `VoidCallback?` | `null` | Callback on closing this screen |
-| `onError` | `OnError?` | `null` | Callback in case any error occurs |
-| `onLoad` | `OnLoad?` | `null` | Callback when list is fetched and loaded |
-| `onEmpty` | `OnEmpty?` | `null` | Callback when the list is empty |
-| `stateCallBack` | `Function(CometChatGroupMembersController)?` | `null` | Access controller functions from parent |
-| `showBackButton` | `bool` | `true` | Show/hide back button |
-| `hideSearch` | `bool` | `false` | Show/hide search input |
-| `hideSeparator` | `bool?` | `null` | Toggle visibility of separator |
-| `hideError` | `bool?` | `null` | Toggle visibility of error dialog |
-| `hideAppbar` | `bool?` | `null` | Hides the appbar |
-| `usersStatusVisibility` | `bool?` | `true` | Hide status indicator on avatar |
-| `hideKickMemberOption` | `bool?` | `null` | Hide kick member option |
-| `hideBanMemberOption` | `bool?` | `null` | Hide ban member option |
-| `hideScopeChangeOption` | `bool?` | `null` | Hide scope change option |
-| `selectionMode` | `SelectionMode?` | `null` | Selection mode (single/multiple/none) |
-| `activateSelection` | `ActivateSelection?` | `null` | When to activate selection |
-| `subtitleView` | `Widget? Function(BuildContext, GroupMember)?` | `null` | Custom subtitle for each member |
-| `listItemView` | `Widget Function(GroupMember)?` | `null` | Custom view for each member |
-| `trailingView` | `Function(BuildContext, GroupMember)?` | `null` | Custom trailing widget |
-| `leadingView` | `Widget? Function(BuildContext, GroupMember)?` | `null` | Custom leading view |
-| `titleView` | `Widget? Function(BuildContext, GroupMember)?` | `null` | Custom title view |
-| `loadingStateView` | `WidgetBuilder?` | `null` | View for loading state |
-| `emptyStateView` | `WidgetBuilder?` | `null` | View for empty state |
-| `errorStateView` | `WidgetBuilder?` | `null` | View for error state |
-| `backButton` | `Widget?` | `null` | Custom back button widget |
-| `searchBoxIcon` | `Widget?` | `null` | Custom search icon |
-| `selectIcon` | `Widget?` | `null` | Custom selection icon |
-| `submitIcon` | `Widget?` | `null` | Custom selection complete icon |
-| `appBarOptions` | `List?` | `null` | App bar options |
-| `options` | `List? Function(...)?` | `null` | Options visible at slide of each member |
-| `setOptions` | `List? Function(...)?` | `null` | Replace default long press actions |
-| `addOptions` | `List? Function(...)?` | `null` | Add to default long press actions |
-| `searchPlaceholder` | `String?` | `null` | Placeholder text of search input |
-| `height` | `double?` | `null` | Height of the widget |
-| `width` | `double?` | `null` | Width of the widget |
-| `style` | `CometChatGroupMembersStyle?` | `null` | Style for the component |
-| `controller` | `ScrollController?` | `null` | Scroll controller for the list |
+| Property | Description |
+|---|---|
+| `avatarStyle` | Avatar appearance |
+| `statusIndicatorStyle` | Online/offline indicator |
+| `changeScopeStyle` | Scope change dialog style |
+| `confirmDialogStyle` | Kick/ban confirmation dialog style |
---
+## Next Steps
- Display and manage available groups
+ Browse available groups
-
- Add new members to a group
+
+ Complete group chat implementation
-
- View and manage banned members
+
+ Detailed styling reference
-
- Learn how to customize the look and feel
+
+ Browse recent conversations
-
\ No newline at end of file
+
diff --git a/ui-kit/flutter/groups.mdx b/ui-kit/flutter/groups.mdx
index 6c79bfe4c..809dc761f 100644
--- a/ui-kit/flutter/groups.mdx
+++ b/ui-kit/flutter/groups.mdx
@@ -1,275 +1,78 @@
---
title: "Groups"
-description: "Searchable, scrollable list of all available groups with icon, name, member count, and group type indicator."
+description: "Scrollable list of all available groups with search, avatars, group type indicators, and member counts."
---
-
-```json
-{
- "component": "CometChatGroups",
- "package": "cometchat_chat_uikit",
- "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
- "description": "Searchable, scrollable list of all available groups with icon, name, member count, and group type indicator.",
- "primaryOutput": {
- "prop": "onItemTap",
- "type": "Function(BuildContext context, Group group)?"
- },
- "props": {
- "data": {
- "groupsRequestBuilder": {
- "type": "GroupsRequestBuilder?",
- "default": "SDK default (30 per page)",
- "note": "Pass the builder, not the result of .build()"
- },
- "groupsProtocol": {
- "type": "GroupsBuilderProtocol?",
- "default": "null",
- "note": "Custom protocol for fetching groups"
- },
- "scrollController": {
- "type": "ScrollController?",
- "default": "null",
- "note": "Custom scroll controller for the list"
- },
- "title": {
- "type": "String?",
- "default": "Groups",
- "note": "Title text for the app bar"
- },
- "controllerTag": {
- "type": "String?",
- "default": "null",
- "note": "Tag for controller management"
- },
- "searchPlaceholder": {
- "type": "String?",
- "default": "null",
- "note": "Placeholder text for search input"
- },
- "searchKeyword": {
- "type": "String?",
- "default": "null",
- "note": "Pre-fills search and filters list"
- },
- "height": {
- "type": "double?",
- "default": "null"
- },
- "width": {
- "type": "double?",
- "default": "null"
- }
- },
- "callbacks": {
- "onItemTap": "Function(BuildContext context, Group group)?",
- "onItemLongPress": "Function(BuildContext context, Group group)?",
- "onSelection": "Function(List?)?",
- "onBack": "VoidCallback?",
- "onError": "OnError?",
- "onLoad": "OnLoad?",
- "onEmpty": "OnEmpty?",
- "stateCallBack": "Function(CometChatGroupsController controller)?"
- },
- "visibility": {
- "groupTypeVisibility": { "type": "bool?", "default": true },
- "hideAppbar": { "type": "bool?", "default": false },
- "hideError": { "type": "bool?", "default": false },
- "hideSearch": { "type": "bool", "default": false },
- "showBackButton": { "type": "bool", "default": true }
- },
- "selection": {
- "selectionMode": {
- "type": "SelectionMode?",
- "values": ["SelectionMode.single", "SelectionMode.multiple", "SelectionMode.none"],
- "default": "null"
- },
- "activateSelection": {
- "type": "ActivateSelection?",
- "values": ["ActivateSelection.onClick", "ActivateSelection.onLongClick"],
- "default": "null"
- }
- },
- "viewSlots": {
- "listItemView": "Widget Function(Group group)?",
- "leadingView": "Widget? Function(BuildContext context, Group group)?",
- "titleView": "Widget? Function(BuildContext context, Group group)?",
- "subtitleView": "Widget? Function(BuildContext context, Group group)?",
- "trailingView": "Widget? Function(BuildContext context, Group group)?",
- "loadingStateView": "WidgetBuilder?",
- "emptyStateView": "WidgetBuilder?",
- "errorStateView": "WidgetBuilder?",
- "setOptions": "List? Function(Group, CometChatGroupsController, BuildContext)?",
- "addOptions": "List? Function(Group, CometChatGroupsController, BuildContext)?",
- "appBarOptions": "List Function(BuildContext context)?"
- },
- "icons": {
- "backButton": { "type": "Widget?", "default": "built-in back arrow" },
- "searchBoxIcon": { "type": "Widget?", "default": "built-in search icon" },
- "submitIcon": { "type": "Widget?", "default": "built-in check icon" },
- "passwordGroupIcon": { "type": "Widget?", "default": "built-in lock icon" },
- "privateGroupIcon": { "type": "Widget?", "default": "built-in shield icon" }
- },
- "style": {
- "groupsStyle": { "type": "CometChatGroupsStyle?", "default": "null" }
- }
- },
- "events": [
- { "name": "CometChatGroupEvents.ccGroupCreated", "payload": "Group", "description": "Group created" },
- { "name": "CometChatGroupEvents.ccGroupDeleted", "payload": "Group", "description": "Group deleted" },
- { "name": "CometChatGroupEvents.ccGroupLeft", "payload": "Action, User, Group", "description": "User left group" },
- { "name": "CometChatGroupEvents.ccGroupMemberJoined", "payload": "User, Group", "description": "User joined group" },
- { "name": "CometChatGroupEvents.ccGroupMemberAdded", "payload": "List, List, Group, User", "description": "Members added" },
- { "name": "CometChatGroupEvents.ccGroupMemberKicked", "payload": "Action, User, User, Group", "description": "Member kicked" },
- { "name": "CometChatGroupEvents.ccGroupMemberBanned", "payload": "Action, User, User, Group", "description": "Member banned" },
- { "name": "CometChatGroupEvents.ccGroupMemberUnbanned", "payload": "Action, User, User, Group", "description": "Member unbanned" },
- { "name": "CometChatGroupEvents.ccGroupMemberScopeChanged", "payload": "Action, User, String, String, Group", "description": "Member scope changed" },
- { "name": "CometChatGroupEvents.ccOwnershipChanged", "payload": "Group, GroupMember", "description": "Ownership transferred" }
- ],
- "sdkListeners": [
- "onGroupMemberJoined",
- "onGroupMemberLeft",
- "onMemberAddedToGroup",
- "onGroupMemberKicked",
- "onGroupMemberBanned",
- "onGroupMemberScopeChanged",
- "onConnected"
- ],
- "compositionExample": {
- "description": "Group directory wired to message view",
- "components": [
- "CometChatGroups",
- "CometChatMessages",
- "CometChatMessageHeader",
- "CometChatMessageList",
- "CometChatMessageComposer"
- ],
- "flow": "onItemTap emits Group -> pass to CometChatMessages or individual message components"
- },
- "types": {
- "CometChatOption": {
- "id": "String?",
- "title": "String?",
- "icon": "String?",
- "iconWidget": "Widget?",
- "onClick": "VoidCallback?"
- },
- "SelectionMode": {
- "single": "SelectionMode.single",
- "multiple": "SelectionMode.multiple",
- "none": "SelectionMode.none"
- },
- "ActivateSelection": {
- "onClick": "ActivateSelection.onClick",
- "onLongClick": "ActivateSelection.onLongClick"
- }
- }
-}
-```
-
+`CometChatGroups` renders a scrollable list of all available groups with real-time updates for group events, search, avatars, group type indicators (public/private/password), and member counts.
+
+
+ 
+
+---
## Where It Fits
-`CometChatGroups` is a directory list widget. It renders available groups and emits the selected `Group` via `onItemTap`. Wire it to `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer` to build a group chat layout.
+`CometChatGroups` is a list component. It renders all available groups and emits the selected `Group` via `onItemTap`. Wire it to `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer` to build a group chat layout.
```dart
-import 'package:flutter/material.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
-class GroupChatApp extends StatefulWidget {
- const GroupChatApp({super.key});
-
- @override
- State createState() => _GroupChatAppState();
-}
-
-class _GroupChatAppState extends State {
- Group? selectedGroup;
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: Row(
- children: [
- SizedBox(
- width: 400,
- child: CometChatGroups(
- onItemTap: (context, group) {
- setState(() {
- selectedGroup = group;
- });
- },
- ),
- ),
- Expanded(
- child: selectedGroup != null
- ? CometChatMessages(group: selectedGroup)
- : const Center(child: Text('Select a group')),
- ),
- ],
- ),
- );
- }
-}
+CometChatGroups(
+ onItemTap: (context, group) {
+ // Navigate to group chat
+ },
+)
```
-
-
-
-
---
+## Quick Start
-## Minimal Render
+Using Navigator:
```dart
-import 'package:flutter/material.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
-class GroupsDemo extends StatelessWidget {
- const GroupsDemo({super.key});
-
- @override
- Widget build(BuildContext context) {
- return const Scaffold(
- body: SafeArea(
- child: CometChatGroups(),
- ),
- );
- }
-}
+Navigator.push(context, MaterialPageRoute(builder: (context) => const CometChatGroups()));
```
-You can also launch it using `Navigator.push`:
+Embedding as a widget:
+
+
```dart
-Navigator.push(
- context,
- MaterialPageRoute(builder: (context) => const CometChatGroups())
-);
+@override
+Widget build(BuildContext context) {
+ return Scaffold(
+ body: SafeArea(
+ child: CometChatGroups(),
+ ),
+ );
+}
```
+
+
+
+Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()`, a user logged in, and the UI Kit dependency added.
---
## Filtering Groups
-Pass a `GroupsRequestBuilder` to `groupsRequestBuilder`. Pass the builder instance — not the result of `.build()`.
+Pass a `GroupsRequestBuilder` to control what loads:
```dart
CometChatGroups(
groupsRequestBuilder: GroupsRequestBuilder()
- ..joinedOnly = true
- ..limit = 10,
+ ..limit = 10
+ ..searchKeyword = "team",
)
```
@@ -277,345 +80,176 @@ CometChatGroups(
### Filter Recipes
-| Recipe | Code |
-| --- | --- |
-| Joined groups only | `GroupsRequestBuilder()..joinedOnly = true` |
-| Limit to 10 per page | `GroupsRequestBuilder()..limit = 10` |
-| Search by keyword | `GroupsRequestBuilder()..searchKeyword = "design"` |
-| Filter by tags | `GroupsRequestBuilder()..tags = ["vip"]` |
-| With tags data | `GroupsRequestBuilder()..withTags = true` |
-
-Default page size is 30. The component uses infinite scroll — the next page loads as the user scrolls to the bottom.
-
-
-### GroupsRequestBuilder Properties
-
-| Property | Description | Code |
-| --- | --- | --- |
-| `limit` | Number of groups to fetch per request. | `..limit = 30` |
-| `searchKeyword` | Search groups by name. | `..searchKeyword = "Team"` |
-| `joinedOnly` | Fetch only joined groups. Default `false`. | `..joinedOnly = true` |
-| `tags` | Filter groups by specific tags. | `..tags = ["vip"]` |
-| `withTags` | Include tags in the Group object. Default `false`. | `..withTags = true` |
-| `build()` | Builds and returns a `GroupsRequest` object. | `.build()` |
-
-Refer to [GroupsRequestBuilder](/sdk/flutter/retrieve-groups) for the full builder API.
+| Recipe | Builder property |
+|---|---|
+| Limit per page | `..limit = 10` |
+| Search by keyword | `..searchKeyword = "team"` |
+| Joined groups only | `..joinedOnly = true` |
+| Filter by tags | `..tags = ["project"]` |
+| With tags | `..withTags = true` |
---
## Actions and Events
-### Callback Props
+### Callback Methods
-#### onItemTap
+#### `onItemTap`
-Fires when a group row is tapped. Primary navigation hook — set the active group and render the message view.
+Fires when a group row is tapped. Primary navigation hook.
```dart
CometChatGroups(
onItemTap: (context, group) {
- print("Selected: ${group.name}");
+ // Navigate to group chat screen
},
)
```
-#### onItemLongPress
+#### `onItemLongPress`
-Fires when a group row is long-pressed. Useful for showing context menus or custom actions.
+Fires when a group row is long-pressed.
```dart
CometChatGroups(
onItemLongPress: (context, group) {
- // Show custom context menu
+ // Show context menu
},
)
```
-#### onSelection
+#### `onBack`
-Fires when groups are selected in multi-select mode. Requires `selectionMode` to be set.
+Fires when the user presses the back button in the app bar.
```dart
CometChatGroups(
- selectionMode: SelectionMode.multiple,
- activateSelection: ActivateSelection.onClick,
- onSelection: (selectedList) {
- print("Selected ${selectedList?.length ?? 0} groups");
+ onBack: () {
+ Navigator.pop(context);
},
)
```
+#### `onSelection`
-#### onError
-
-Fires on internal errors (network failure, auth issue, SDK exception).
+Fires when groups are selected/deselected in multi-select mode.
```dart
CometChatGroups(
- onError: (error) {
- print("CometChatGroups error: $error");
+ selectionMode: SelectionMode.multiple,
+ onSelection: (selectedGroups, context) {
+ // Handle selected groups
},
)
```
-#### onBack
+#### `onError`
-Fires when the back button is pressed.
+Fires on internal errors.
```dart
CometChatGroups(
- showBackButton: true,
- onBack: () {
- Navigator.pop(context);
+ onError: (e) {
+ debugPrint("Error: ${e.message}");
},
)
```
-#### onLoad
+#### `onLoad`
-Fires when the group list is successfully loaded.
+Fires when the list is successfully fetched and loaded.
```dart
CometChatGroups(
- onLoad: (list) {
- print("Loaded ${list.length} groups");
+ onLoad: (groupList) {
+ debugPrint("Loaded ${groupList.length} groups");
},
)
```
-#### onEmpty
+#### `onEmpty`
-Fires when the group list is empty.
+Fires when the list is empty after loading.
```dart
CometChatGroups(
onEmpty: () {
- print("No groups found");
+ debugPrint("No groups found");
},
)
```
-### Global UI Events
-
-`CometChatGroupEvents` emits events subscribable from anywhere in the application. Add a listener in `initState` and remove it in `dispose`.
-
-| Event | Fires when | Payload |
-| --- | --- | --- |
-| `ccGroupCreated` | A new group is created | `Group` |
-| `ccGroupDeleted` | A group is deleted | `Group` |
-| `ccGroupLeft` | A user leaves a group | `Action, User, Group` |
-| `ccGroupMemberJoined` | A user joins a group | `User, Group` |
-| `ccGroupMemberAdded` | Members are added to a group | `List, List, Group, User` |
-| `ccGroupMemberKicked` | A member is kicked | `Action, User, User, Group` |
-| `ccGroupMemberBanned` | A member is banned | `Action, User, User, Group` |
-| `ccGroupMemberUnbanned` | A member is unbanned | `Action, User, User, Group` |
-| `ccGroupMemberScopeChanged` | A member's scope changes | `Action, User, String, String, Group` |
-| `ccOwnershipChanged` | Group ownership is transferred | `Group, GroupMember` |
-
-When to use: sync external UI with group state changes. For example, update a group count badge when a group is created or deleted.
-
-
-
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:cometchat_sdk/models/action.dart' as cc;
-
-class _YourScreenState extends State with CometChatGroupEventListener {
-
- @override
- void initState() {
- super.initState();
- CometChatGroupEvents.addGroupsListener("listenerId", this);
- }
-
- @override
- void dispose() {
- CometChatGroupEvents.removeGroupsListener("listenerId");
- super.dispose();
- }
-
- @override
- void ccGroupCreated(Group group) {
- print("Group created: ${group.name}");
- }
-
- @override
- void ccGroupDeleted(Group group) {
- print("Group deleted: ${group.name}");
- }
-
- @override
- void ccGroupLeft(cc.Action message, User leftUser, Group leftGroup) {
- print("User ${leftUser.name} left ${leftGroup.name}");
- }
-
- @override
- void ccGroupMemberJoined(User joinedUser, Group joinedGroup) {
- print("User ${joinedUser.name} joined ${joinedGroup.name}");
- }
-
- @override
- void ccOwnershipChanged(Group group, GroupMember newOwner) {
- print("Ownership of ${group.name} transferred to ${newOwner.name}");
- }
-
- @override
- Widget build(BuildContext context) {
- return const Placeholder();
- }
-}
-```
-
-
-
### SDK Events (Real-Time, Automatic)
-The component listens to these SDK events internally. No manual attachment needed unless additional side effects are required.
+The component listens to these SDK events internally. No manual setup needed.
| SDK Listener | Internal behavior |
-| --- | --- |
-| `onGroupMemberJoined` | Updates member count, sets `hasJoined` if current user joined |
-| `onGroupMemberLeft` | Updates member count |
-| `onMemberAddedToGroup` | Updates member count, adds group to list if current user was added |
-| `onGroupMemberKicked` | Updates member count |
-| `onGroupMemberBanned` | Updates member count |
-| `onGroupMemberScopeChanged` | Updates member scope |
-
-Automatic: group membership changes, member count updates.
+|---|---|
+| `onGroupMemberJoined` | Updates group member count |
+| `onGroupMemberLeft` | Updates group member count |
+| `onGroupMemberKicked` | Updates group member count, removes group if logged-in user was kicked |
+| `onGroupMemberBanned` | Updates group member count, removes group if logged-in user was banned |
+| `onMemberAddedToGroup` | Updates group member count |
+| `ccGroupCreated` | Adds new group to list |
+| `ccGroupDeleted` | Removes group from list |
+| Connection reconnected | Triggers silent refresh |
---
+## Functionality
-## Custom View Slots
-
-Each slot replaces a section of the default UI. Slots that accept a group parameter receive the `Group` object for that row.
-
-| Slot | Signature | Replaces |
-| --- | --- | --- |
-| `listItemView` | `Widget Function(Group)` | Entire list item row |
-| `leadingView` | `Widget? Function(BuildContext, Group)` | Avatar / left section |
-| `titleView` | `Widget? Function(BuildContext, Group)` | Name / title text |
-| `subtitleView` | `Widget? Function(BuildContext, Group)` | Member count subtitle |
-| `trailingView` | `Widget? Function(BuildContext, Group)` | Right section |
-| `loadingStateView` | `WidgetBuilder` | Loading spinner |
-| `emptyStateView` | `WidgetBuilder` | Empty state |
-| `errorStateView` | `WidgetBuilder` | Error state |
-| `setOptions` | `List? Function(Group, Controller, BuildContext)` | Context menu actions (replaces default) |
-| `addOptions` | `List? Function(Group, Controller, BuildContext)` | Context menu actions (adds to default) |
-| `appBarOptions` | `List Function(BuildContext)` | App bar action widgets |
-
-### listItemView
+| Property | Type | Default | Description |
+|---|---|---|---|
+| `title` | `String?` | `null` | Custom app bar title |
+| `showBackButton` | `bool` | `true` | Toggle back button |
+| `hideAppbar` | `bool?` | `false` | Toggle app bar visibility |
+| `hideSearch` | `bool` | `false` | Toggle search bar |
+| `selectionMode` | `SelectionMode?` | `null` | Enable selection mode (`single` or `multiple`) |
+| `searchPlaceholder` | `String?` | `null` | Search placeholder text |
-Replace the entire list item row.
-
-
- 
-
-
-
-
-```dart
-CometChatGroups(
- listItemView: (group) {
- return ListTile(
- title: Text(
- group.name,
- style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
- ),
- subtitle: Text(
- "${group.membersCount} Members • ${group.description}",
- overflow: TextOverflow.ellipsis,
- style: TextStyle(fontSize: 14, color: Color(0xFF727272)),
- ),
- trailing: ElevatedButton(
- onPressed: () {
- CometChat.joinGroup(
- group.guid,
- group.type,
- onSuccess: (group) {
- // Handle success
- },
- onError: (error) {
- // Handle error
- },
- );
- },
- style: ElevatedButton.styleFrom(
- backgroundColor: Color(0xFFEDEAFA),
- elevation: 0,
- shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(1000)),
- ),
- child: Text("JOIN", style: TextStyle(color: Color(0xFF6852D6), fontSize: 12)),
- ),
- );
- },
-)
-```
-
-
+---
+## Custom View Slots
-### leadingView
+### Leading View
-Replace the avatar / left section. Joined status badge example.
+Replace the avatar / left section.
```dart
CometChatGroups(
leadingView: (context, group) {
- return Stack(
- children: [
- CometChatAvatar(
- image: group.icon,
- name: group.name,
- style: CometChatAvatarStyle(borderRadius: BorderRadius.circular(8)),
- ),
- if (group.hasJoined)
- Positioned(
- bottom: -2,
- left: 0,
- right: 0,
- child: Container(
- padding: EdgeInsets.symmetric(horizontal: 4, vertical: 2),
- decoration: BoxDecoration(color: Color(0xFF09C26F)),
- child: Text(
- "Joined",
- textAlign: TextAlign.center,
- style: TextStyle(color: Colors.white, fontSize: 8, fontWeight: FontWeight.w600),
- ),
- ),
- ),
- ],
+ return CircleAvatar(
+ child: Text(group.name?[0] ?? "G"),
);
},
)
@@ -623,36 +257,18 @@ CometChatGroups(
-### titleView
+### Title View
-Replace the name / title text. Group type badge inline example.
+Replace the group name / title text.
```dart
CometChatGroups(
titleView: (context, group) {
- return Row(
- children: [
- Text(
- group.name,
- style: TextStyle(fontWeight: FontWeight.w500, fontSize: 16),
- ),
- SizedBox(width: 4),
- Container(
- padding: EdgeInsets.symmetric(horizontal: 4, vertical: 2),
- decoration: BoxDecoration(
- color: group.type == GroupTypeConstants.public
- ? Color(0xFF0B7BEA)
- : Color(0xFF09C26F),
- borderRadius: BorderRadius.circular(7),
- ),
- child: Text(
- group.type,
- style: TextStyle(color: Colors.white, fontSize: 8, fontWeight: FontWeight.w600),
- ),
- ),
- ],
+ return Text(
+ group.name ?? "",
+ style: TextStyle(fontWeight: FontWeight.bold),
);
},
)
@@ -660,13 +276,9 @@ CometChatGroups(
-### subtitleView
+### Subtitle View
-Replace the member count subtitle text.
-
-
- 
-
+Replace the subtitle text below the group name.
@@ -674,9 +286,8 @@ Replace the member count subtitle text.
CometChatGroups(
subtitleView: (context, group) {
return Text(
- "${group.membersCount} Members • ${group.description ?? 'No description'}",
- overflow: TextOverflow.ellipsis,
- style: TextStyle(fontSize: 14, color: Color(0xFF727272)),
+ "${group.membersCount} members",
+ style: TextStyle(color: Color(0xFF727272), fontSize: 14),
);
},
)
@@ -684,814 +295,190 @@ CometChatGroups(
+### Trailing View
-### trailingView
-
-Replace the right section. Join status button example.
+Replace the right section of each group item.
```dart
CometChatGroups(
trailingView: (context, group) {
- return Container(
- padding: EdgeInsets.symmetric(horizontal: 12, vertical: 4),
- decoration: BoxDecoration(
- color: Color(0xFFEDEAFA),
- borderRadius: BorderRadius.circular(1000),
- ),
- child: Text(
- group.hasJoined ? "JOINED" : "+ JOIN",
- style: TextStyle(color: Color(0xFF6852D6), fontSize: 12, fontWeight: FontWeight.w700),
- ),
- );
+ return Text(group.type ?? "");
},
)
```
-### setOptions
+### List Item View
-Replace the context menu / long-press actions on each group item.
+Replace the entire list item row.
```dart
CometChatGroups(
- setOptions: (group, controller, context) {
- return [
- CometChatOption(
- id: "leave",
- title: "Leave Group",
- icon: AssetConstants.close,
- onClick: () {
- CometChat.leaveGroup(group.guid, onSuccess: (response) {
- print("Left group");
- }, onError: (error) {
- print("Error: $error");
- });
- },
- ),
- CometChatOption(
- id: "view_members",
- title: "View Members",
- iconWidget: Icon(Icons.people_outline),
- onClick: () {
- // Navigate to group members
- },
- ),
- ];
+ listItemView: (group) {
+ return ListTile(
+ leading: CircleAvatar(child: Text(group.name?[0] ?? "G")),
+ title: Text(group.name ?? ""),
+ subtitle: Text("${group.membersCount} members"),
+ );
},
)
```
-### addOptions
-
-Add to the existing context menu actions without removing defaults.
+### State Views
```dart
CometChatGroups(
- addOptions: (group, controller, context) {
- return [
- CometChatOption(
- id: "mute",
- title: "Mute Notifications",
- iconWidget: Icon(Icons.notifications_off_outlined),
- onClick: () {
- // Mute notifications logic
- },
- ),
- CometChatOption(
- id: "pin",
- title: "Pin Group",
- iconWidget: Icon(Icons.push_pin_outlined),
- onClick: () {
- // Pin group logic
- },
- ),
- ];
- },
+ emptyStateView: (context) => Center(child: Text("No groups found")),
+ errorStateView: (context) => Center(child: Text("Something went wrong")),
+ loadingStateView: (context) => Center(child: CircularProgressIndicator()),
)
```
+---
-### appBarOptions
-
-Add custom widgets to the app bar.
+## Common Patterns
-
- 
-
+### Minimal list — hide all chrome
```dart
CometChatGroups(
- appBarOptions: (context) => [
- IconButton(
- onPressed: () {
- // Navigate to create group
- },
- icon: Icon(Icons.group_add, color: Color(0xFF6852D6)),
- ),
- ],
+ hideAppbar: true,
+ hideSearch: true,
)
```
----
-
-## Styling
-
-Set `CometChatGroupsStyle` to customize the appearance.
+### Joined groups only
```dart
CometChatGroups(
- groupsStyle: CometChatGroupsStyle(
- backgroundColor: Colors.white,
- titleTextColor: Color(0xFFF76808),
- separatorColor: Color(0xFFF76808),
- avatarStyle: CometChatAvatarStyle(
- borderRadius: BorderRadius.circular(8),
- backgroundColor: Color(0xFFFBAA75),
- ),
- ),
+ groupsRequestBuilder: GroupsRequestBuilder()
+ ..joinedOnly = true,
)
```
-
-
-
-
-### Style Properties
-
-| Property | Type | Description |
-| --- | --- | --- |
-| `backgroundColor` | `Color` | Background color of the component |
-| `border` | `Border` | Border for the widget |
-| `borderRadius` | `BorderRadiusGeometry` | Border radius for the widget |
-| `titleTextColor` | `Color` | Color of the header title |
-| `titleTextStyle` | `TextStyle` | Style for the header title |
-| `backIconColor` | `Color` | Back button icon color |
-| `searchBackgroundColor` | `Color` | Background color of search box |
-| `searchBorder` | `BorderSide` | Border for search box |
-| `searchBorderRadius` | `BorderRadius` | Border radius for search box |
-| `searchPlaceHolderTextColor` | `Color` | Placeholder text color in search |
-| `searchPlaceHolderTextStyle` | `TextStyle` | Placeholder text style in search |
-| `searchIconColor` | `Color` | Search icon color |
-| `searchInputTextColor` | `Color` | Search input text color |
-| `searchInputTextStyle` | `TextStyle` | Search input text style |
-| `separatorColor` | `Color` | Color of list item separators |
-| `separatorHeight` | `double` | Height of list item separators |
-| `itemTitleTextColor` | `Color` | Color of group name in list items |
-| `itemTitleTextStyle` | `TextStyle` | Style for group name in list items |
-| `itemSubtitleTextColor` | `Color` | Color of member count subtitle |
-| `itemSubtitleTextStyle` | `TextStyle` | Style for member count subtitle |
-| `listItemSelectedBackgroundColor` | `Color` | Background color for selected items |
-| `privateGroupIconBackground` | `Color` | Background color for private group icon |
-| `protectedGroupIconBackground` | `Color` | Background color for password group icon |
-| `emptyStateTextColor` | `Color` | Text color for empty state title |
-| `emptyStateTextStyle` | `TextStyle` | Text style for empty state title |
-| `emptyStateSubTitleTextColor` | `Color` | Text color for empty state subtitle |
-| `emptyStateSubTitleTextStyle` | `TextStyle` | Text style for empty state subtitle |
-| `errorStateTextColor` | `Color` | Text color for error state title |
-| `errorStateTextStyle` | `TextStyle` | Text style for error state title |
-| `errorStateSubTitleTextColor` | `Color` | Text color for error state subtitle |
-| `errorStateSubTitleTextStyle` | `TextStyle` | Text style for error state subtitle |
-| `retryButtonBackgroundColor` | `Color` | Background color for retry button |
-| `retryButtonBorderRadius` | `BorderRadius` | Border radius for retry button |
-| `retryButtonBorder` | `BorderSide` | Border for retry button |
-| `retryButtonTextColor` | `Color` | Text color for retry button |
-| `retryButtonTextStyle` | `TextStyle` | Text style for retry button |
-| `submitIconColor` | `Color` | Color of submit icon in selection mode |
-| `checkBoxBackgroundColor` | `Color` | Background color of unchecked checkbox |
-| `checkBoxCheckedBackgroundColor` | `Color` | Background color of checked checkbox |
-| `checkboxSelectedIconColor` | `Color` | Color of checkmark icon |
-| `checkBoxBorderRadius` | `BorderRadius` | Border radius for checkbox |
-| `checkBoxBorder` | `BorderSide` | Border for checkbox |
-| `avatarStyle` | `CometChatAvatarStyle` | Style for group avatars |
-| `statusIndicatorStyle` | `CometChatStatusIndicatorStyle` | Style for group type indicators |
-
---
+## Advanced
-## Common Patterns
+### BLoC Access
-### Custom empty state with CTA
+Provide a custom `GroupsBloc` to override behavior:
```dart
CometChatGroups(
- emptyStateView: (context) {
- return Center(
- child: Column(
- mainAxisAlignment: MainAxisAlignment.center,
- children: [
- Icon(Icons.group_outlined, size: 64, color: Color(0xFF727272)),
- SizedBox(height: 16),
- Text("No groups found", style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500)),
- SizedBox(height: 8),
- ElevatedButton(
- onPressed: () {
- // Navigate to create group
- },
- child: Text("Create a Group"),
- ),
- ],
- ),
- );
- },
+ groupsBloc: CustomGroupsBloc(),
)
```
-### Joined groups only
+### Extending GroupsBloc
+
+`GroupsBloc` uses the `ListBase` mixin with override hooks:
```dart
-CometChatGroups(
- groupsRequestBuilder: GroupsRequestBuilder()
- ..joinedOnly = true,
-)
+class CustomGroupsBloc extends GroupsBloc {
+ @override
+ void onItemAdded(Group item, List updatedList) {
+ // Custom sorting logic
+ super.onItemAdded(item, updatedList);
+ }
+
+ @override
+ void onListReplaced(List previousList, List newList) {
+ // Filter out specific groups
+ final filtered = newList.where((g) => g.membersCount > 0).toList();
+ super.onListReplaced(previousList, filtered);
+ }
+}
```
-### Multi-select with selection callback
+For `ListBase` override hooks (`onItemAdded`, `onItemRemoved`, `onItemUpdated`, `onListCleared`, `onListReplaced`), see [BLoC & Data — ListBase Hooks](/ui-kit/flutter/customization-bloc-data#listbase-hooks).
-
-
-```dart
-CometChatGroups(
- selectionMode: SelectionMode.multiple,
- activateSelection: ActivateSelection.onClick,
- onSelection: (selectedGroups) {
- if (selectedGroups != null && selectedGroups.isNotEmpty) {
- print("Selected ${selectedGroups.length} groups");
- // Perform batch action on selected groups
- }
- },
-)
-```
-
-
+### Public BLoC Events
-### Hide all chrome — minimal list
+| Event | Description |
+|---|---|
+| `LoadGroups({searchKeyword, silent})` | Load initial groups. `silent: true` keeps existing list visible. |
+| `LoadMoreGroups()` | Load next page (pagination) |
+| `RefreshGroups()` | Refresh the list |
+| `SearchGroups(keyword)` | Search groups with debouncing |
+
+---
+
+## Style
```dart
CometChatGroups(
- hideSearch: true,
- hideAppbar: true,
- groupTypeVisibility: false,
+ groupsStyle: CometChatGroupsStyle(
+ avatarStyle: CometChatAvatarStyle(
+ borderRadius: BorderRadius.circular(8),
+ backgroundColor: Color(0xFFFBAA75),
+ ),
+ statusIndicatorStyle: CometChatStatusIndicatorStyle(),
+ ),
)
```
----
-
-## Accessibility
-
-The component renders a scrollable list of interactive items. Each group row supports:
-
-- Tap gesture for selection/navigation
-- Long-press gesture for context menu actions
-- Checkbox selection in multi-select mode with proper touch targets
-- Group type indicators (public/private/password) with visual icons
-
-For screen readers:
-- Group names are readable as list item titles
-- Group type indicators use icons — consider adding `Semantics` widgets via `leadingView` if screen reader descriptions are needed
-- Selection state is communicated through checkbox widgets
-
-The component respects system accessibility settings including text scaling and high contrast modes.
-
----
-
-
-## Props
-
-All props are optional unless noted.
-
-### activateSelection
-
-Controls when selection mode activates.
-
-| | |
-| --- | --- |
-| Type | `ActivateSelection` |
-| Default | `null` |
-
-Values: `ActivateSelection.onClick`, `ActivateSelection.onLongClick`
-
----
-
-### addOptions
-
-Adds additional context menu actions to the default options.
-
-| | |
-| --- | --- |
-| Type | `List? Function(Group, CometChatGroupsController, BuildContext)` |
-| Default | `null` |
-
----
-
-### appBarOptions
-
-Custom widgets to display in the app bar.
-
-| | |
-| --- | --- |
-| Type | `List Function(BuildContext context)` |
-| Default | `null` |
-
----
-
-### backButton
-
-Custom back button widget.
-
-| | |
-| --- | --- |
-| Type | `Widget` |
-| Default | Built-in back arrow |
-
----
-
-### controllerTag
-
-Identifier tag for controller management.
-
-| | |
-| --- | --- |
-| Type | `String` |
-| Default | `null` |
-
----
-
-### emptyStateView
-
-Custom view displayed when there are no groups.
-
-| | |
-| --- | --- |
-| Type | `WidgetBuilder` |
-| Default | Built-in empty state |
-
----
-
-### errorStateView
-
-Custom view displayed when an error occurs.
-
-| | |
-| --- | --- |
-| Type | `WidgetBuilder` |
-| Default | Built-in error state |
-
----
-
-### groupsProtocol
-
-Custom protocol for fetching groups.
-
-| | |
-| --- | --- |
-| Type | `GroupsBuilderProtocol` |
-| Default | `null` |
-
----
-
-
-### groupsRequestBuilder
-
-Controls which groups load and in what order.
-
-| | |
-| --- | --- |
-| Type | `GroupsRequestBuilder` |
-| Default | SDK default (30 per page) |
-
-Pass the builder instance, not the result of `.build()`.
-
----
-
-### groupsStyle
-
-Styling options for the groups list.
-
-| | |
-| --- | --- |
-| Type | `CometChatGroupsStyle` |
-| Default | `null` |
-
----
-
-### groupTypeVisibility
-
-Shows or hides the group type icon (public/private/password) on group avatars.
-
-| | |
-| --- | --- |
-| Type | `bool` |
-| Default | `true` |
-
----
-
-### height
-
-Height of the widget.
-
-| | |
-| --- | --- |
-| Type | `double` |
-| Default | `null` |
-
----
-
-### hideAppbar
-
-Hides the app bar including title and search.
-
-| | |
-| --- | --- |
-| Type | `bool` |
-| Default | `false` |
-
----
-
-### hideError
-
-Hides the error state view.
-
-| | |
-| --- | --- |
-| Type | `bool` |
-| Default | `false` |
-
----
-
-### hideSearch
-
-Hides the search input box.
-
-| | |
-| --- | --- |
-| Type | `bool` |
-| Default | `false` |
-
----
-
-### leadingView
-
-Custom renderer for the avatar / left section.
-
-| | |
-| --- | --- |
-| Type | `Widget? Function(BuildContext context, Group group)` |
-| Default | Built-in avatar |
-
----
-
-### listItemView
-
-Custom renderer for the entire list item row.
-
-| | |
-| --- | --- |
-| Type | `Widget Function(Group group)` |
-| Default | Built-in list item |
-
----
-
-
-### loadingStateView
-
-Custom view displayed during loading state.
-
-| | |
-| --- | --- |
-| Type | `WidgetBuilder` |
-| Default | Built-in shimmer |
-
----
-
-### onBack
-
-Callback triggered when the back button is pressed.
-
-| | |
-| --- | --- |
-| Type | `VoidCallback` |
-| Default | `null` |
-
----
-
-### onEmpty
-
-Callback triggered when the group list is empty.
-
-| | |
-| --- | --- |
-| Type | `OnEmpty` |
-| Default | `null` |
-
----
-
-### onError
-
-Callback triggered when an error occurs.
-
-| | |
-| --- | --- |
-| Type | `OnError` |
-| Default | `null` |
-
----
-
-### onItemLongPress
-
-Callback triggered on long press of a group item.
-
-| | |
-| --- | --- |
-| Type | `Function(BuildContext context, Group group)` |
-| Default | `null` |
-
----
-
-### onItemTap
-
-Callback triggered when tapping a group item.
-
-| | |
-| --- | --- |
-| Type | `Function(BuildContext context, Group group)` |
-| Default | `null` |
-
----
-
-### onLoad
-
-Callback triggered when the list is successfully loaded.
-
-| | |
-| --- | --- |
-| Type | `OnLoad` |
-| Default | `null` |
-
----
-
-### onSelection
-
-Callback triggered when groups are selected. Requires `selectionMode` to be set.
-
-| | |
-| --- | --- |
-| Type | `Function(List? list)` |
-| Default | `null` |
-
----
-
-### passwordGroupIcon
-
-Custom icon widget for password-protected groups.
-
-| | |
-| --- | --- |
-| Type | `Widget` |
-| Default | Built-in lock icon |
-
----
-
-### privateGroupIcon
-
-Custom icon widget for private groups.
-
-| | |
-| --- | --- |
-| Type | `Widget` |
-| Default | Built-in shield icon |
-
----
-
-
-### scrollController
-
-Controller for scrolling the list.
-
-| | |
-| --- | --- |
-| Type | `ScrollController` |
-| Default | `null` |
-
----
-
-### searchBoxIcon
-
-Custom search box icon widget.
-
-| | |
-| --- | --- |
-| Type | `Widget` |
-| Default | Built-in search icon |
-
----
-
-### searchKeyword
-
-Pre-fills the search and filters the group list.
-
-| | |
-| --- | --- |
-| Type | `String` |
-| Default | `null` |
-
----
-
-### searchPlaceholder
-
-Placeholder text for the search input box.
-
-| | |
-| --- | --- |
-| Type | `String` |
-| Default | `null` |
-
----
-
-### selectionMode
-
-Enables single or multi-select mode.
-
-| | |
-| --- | --- |
-| Type | `SelectionMode` |
-| Default | `null` |
-
-Values: `SelectionMode.single`, `SelectionMode.multiple`, `SelectionMode.none`
-
----
-
-### setOptions
-
-Replaces the default context menu actions.
-
-| | |
-| --- | --- |
-| Type | `List? Function(Group, CometChatGroupsController, BuildContext)` |
-| Default | `null` |
-
----
-
-### showBackButton
-
-Shows or hides the back button.
-
-| | |
-| --- | --- |
-| Type | `bool` |
-| Default | `true` |
-
----
-
-### stateCallBack
-
-Callback to access controller functions from parent.
-
-| | |
-| --- | --- |
-| Type | `Function(CometChatGroupsController controller)` |
-| Default | `null` |
-
----
-
-### submitIcon
-
-Custom submit icon widget for selection mode.
-
-| | |
-| --- | --- |
-| Type | `Widget` |
-| Default | Built-in check icon |
-
----
-
-### subtitleView
-
-Custom renderer for the member count subtitle.
-
-| | |
-| --- | --- |
-| Type | `Widget? Function(BuildContext context, Group group)` |
-| Default | Built-in member count |
-
----
-
-### title
-
-Title text displayed in the app bar.
-
-| | |
-| --- | --- |
-| Type | `String` |
-| Default | `"Groups"` |
-
----
-
-### titleView
-
-Custom renderer for the name / title text.
-
-| | |
-| --- | --- |
-| Type | `Widget? Function(BuildContext context, Group group)` |
-| Default | Built-in title |
-
----
-
-### trailingView
-
-Custom renderer for the right section.
-
-| | |
-| --- | --- |
-| Type | `Widget? Function(BuildContext context, Group group)` |
-| Default | `null` |
-
----
-
-### width
-
-Width of the widget.
-
-| | |
-| --- | --- |
-| Type | `double` |
-| Default | `null` |
-
----
-
+
+
+
-## Events
+### Style Properties
-`CometChatGroups` subscribes to `CometChatGroupEvents`:
+| Property | Description |
+|---|---|
+| `backgroundColor` | List background color |
+| `avatarStyle` | Avatar appearance |
+| `statusIndicatorStyle` | Group type indicator |
+| `searchBoxStyle` | Search box appearance |
-| Event | Payload | Internal behavior |
-| --- | --- | --- |
-| `ccGroupCreated` | `Group` | Adds new group to list |
-| `ccGroupDeleted` | `Group` | Removes group from list |
-| `ccGroupLeft` | `Action, User, Group` | Removes private group or updates hasJoined |
-| `ccGroupMemberJoined` | `User, Group` | Updates group in list |
-| `ccGroupMemberAdded` | `List, List, Group, User` | Updates group in list |
-| `ccGroupMemberKicked` | `Action, User, User, Group` | Updates group in list |
-| `ccGroupMemberBanned` | `Action, User, User, Group` | Updates group in list |
-| `ccOwnershipChanged` | `Group, GroupMember` | Updates group in list |
+See [Component Styling](/ui-kit/flutter/component-styling) for the full reference.
---
-## Customization Matrix
-
-| What to change | Where | Property/API | Example |
-| --- | --- | --- | --- |
-| Override behavior on group interaction | Component props | `on` callbacks | `onItemTap: (ctx, group) => setActive(group)` |
-| Filter which groups appear | Component props | `groupsRequestBuilder` | `groupsRequestBuilder: GroupsRequestBuilder()..joinedOnly = true` |
-| Toggle visibility of UI elements | Component props | `hide` / `show` boolean props | `hideSearch: true` |
-| Replace a section of the list item | Component props | `View` render props | `listItemView: (group) => CustomWidget()` |
-| Change colors, fonts, spacing | Component props | `groupsStyle` | `groupsStyle: CometChatGroupsStyle(titleTextColor: Colors.red)` |
-
-
----
+## Next Steps
-
- Display and manage user contacts
+
+ View and manage group members
- Display recent one-on-one and group conversations
+ Browse recent conversations
-
- Display and manage members of a group
+
+ Detailed styling reference
-
- Learn how to customize the look and feel
+
+ Complete group chat implementation
diff --git a/ui-kit/flutter/guide-block-unblock-user.mdx b/ui-kit/flutter/guide-block-unblock-user.mdx
index 8f9cecacb..e461b73a0 100644
--- a/ui-kit/flutter/guide-block-unblock-user.mdx
+++ b/ui-kit/flutter/guide-block-unblock-user.mdx
@@ -1,189 +1,87 @@
---
-title: "Block/Unblock Users"
+title: "Implementing Block/Unblock User in Flutter with CometChat UIKit"
sidebarTitle: "Block/Unblock User"
-description: "Implement block and unblock user functionality in CometChat Flutter UI Kit with composer state management."
+description: "Block and unblock users in CometChat Flutter UI Kit with blockUsers and unblockUsers methods for privacy and moderation."
---
-
+Enable users to block and unblock other users in your Flutter chat app using CometChat's `blockUsers` and `unblockUsers` methods.
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_chat_uikit` |
-| Key components | `CometchatUserInfo` — uses `CometChatUIKit.blockUsers()` / `CometChatUIKit.unblockUsers()` SDK methods |
-| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login(uid)` |
-| Events | Block/unblock state managed via `user.blockedByMe` property |
-| UI helpers | `CometChatUserInfoController`, confirmation dialogs |
-| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
-| Related | [All Guides](/ui-kit/flutter/guide-overview) |
+## Overview
-
+The Block User feature lets one user prevent another from sending messages or interacting with them. Essential for user privacy, spam control, and moderation.
-Block/Unblock lets users prevent specific users from sending them messages. When blocked, the message composer is hidden and replaced with an unblock prompt.
+## Prerequisites
-Before starting, complete the [Getting Started](/ui-kit/flutter/getting-started) guide.
-
----
+- A Flutter project with CometChat UIKit Flutter V6 installed
+- Initialized CometChat credentials (`appID`, `region`, `authKey`)
## Components
-| Component / Class | Role |
+| Component | Role |
|:---|:---|
-| `CometchatUserInfo` | User profile screen with block/unblock controls |
-| `CometChatUserInfoController` | Controller managing block/unblock state and actions |
-| `CometChatUIKit.blockUsers()` | SDK method to block specific users |
-| `CometChatUIKit.unblockUsers()` | SDK method to unblock previously blocked users |
-| `user.blockedByMe` | Property indicating if current user blocked this user |
-
----
+| `CometChatUIKit.blockUsers([...])` | SDK method to block specified user(s) |
+| `CometChatUIKit.unblockUsers([...])` | SDK method to unblock specified user(s) |
+| `ElevatedButton` | Flutter widget for block/unblock actions |
## Integration Steps
-### 1. Navigate to User Info
-
-Open the user info screen from the messages view when tapping the user profile or info icon.
-
-_File: [messages.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/messages/messages.dart)_
-
-```dart
-Navigator.push(
- context,
- MaterialPageRoute(
- builder: (_) => CometchatUserInfo(user: tappedUser),
- ),
-);
-```
-
----
-
-### 2. Block User
-
-Call the block user dialog which uses `CometChatUIKit.blockUsers()` with the target UID. On success, update the UI to show the blocked state.
-
-_File: [cometchat_user_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info.dart)_
+### Add "Block User" Button
+
+
```dart
-listTileOptions(
- controller.user?.blockedByMe != true
- ? Translations.of(context).block
- : Translations.of(context).unBlock,
- Icon(Icons.block, color: colorPalette.error),
- () {
- if (controller.user?.blockedByMe != true) {
- controller.blockUserDialog(
- context: context,
- colorPalette: colorPalette,
- typography: typography,
+ElevatedButton(
+ onPressed: () async {
+ try {
+ await CometChatUIKit.blockUsers([user.uid]);
+ ScaffoldMessenger.of(context).showSnackBar(
+ SnackBar(content: Text('${user.name} has been blocked')),
);
- } else {
- controller.unblockUserDialog(
- context: context,
- colorPalette: colorPalette,
- typography: typography,
+ } catch (e) {
+ ScaffoldMessenger.of(context).showSnackBar(
+ SnackBar(content: Text('Error blocking user: $e')),
);
}
},
+ child: Text('Block User'),
)
```
+
+
----
-
-### 3. Unblock User
-
-Call `CometChatUIKit.unblockUsers()` with the target UID. On success, restore the UI to allow messaging.
-
-_File: [cometchat_user_info_controller.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info_controller.dart)_
+### Add "Unblock User" Button
+
+
```dart
-void unblockUserDialog({
- required BuildContext context,
- required CometChatColorPalette colorPalette,
- required CometChatTypography typography,
-}) {
- // Show confirmation dialog
- // On confirm: CometChatUIKit.unblockUsers([user.uid])
-}
-```
-
----
-
-### 4. Blocked State Banner
-
-Display a warning banner when viewing a blocked user's profile.
-
-_File: [cometchat_user_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info.dart)_
-
-```dart
-if (value.getBlockedByMe())
- Container(
- padding: EdgeInsets.symmetric(
- horizontal: spacing.padding3 ?? 0,
- vertical: spacing.padding2 ?? 0,
- ),
- color: colorPalette.warning?.withValues(alpha: 0.2),
- child: Row(
- children: [
- Icon(Icons.info, color: colorPalette.warning),
- SizedBox(width: spacing.padding2),
- Text("${Translations.of(context).youHaveBlocked} ${widget.user.name}."),
- ],
- ),
- ),
-```
-
----
-
-### 5. Composer Blocked State
-
-When a user is blocked, the composer in thread/message views is replaced with an unblock prompt.
-
-_File: [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart)_
-
-```dart
-if (controller.user?.blockedByMe == true) {
- return Container(
- padding: EdgeInsets.symmetric(vertical: 8, horizontal: 20),
- color: colorPalette.background4,
- child: Column(
- children: [
- Text(Translations.of(context).cantSendMessageBlockedUser),
- ElevatedButton(
- onPressed: () => controller.unBlockUser(),
- child: Text(Translations.of(context).unBlock),
- ),
- ],
- ),
- );
-}
+ElevatedButton(
+ onPressed: () async {
+ try {
+ await CometChatUIKit.unblockUsers([user.uid]);
+ ScaffoldMessenger.of(context).showSnackBar(
+ SnackBar(content: Text('${user.name} has been unblocked')),
+ );
+ } catch (e) {
+ ScaffoldMessenger.of(context).showSnackBar(
+ SnackBar(content: Text('Error unblocking user: $e')),
+ );
+ }
+ },
+ child: Text('Unblock User'),
+)
```
+
+
----
+## Customization Options
-## Feature Matrix
+- Conditional Rendering: Display "Block" or "Unblock" based on `user.blockedByMe` state
+- Modal Confirmation: Wrap actions in `showDialog` for confirmation prompts
+- Self-Block Prevention: Disable the button if `user.uid == loggedInUser.uid`
-| Feature | Component / Method | File |
-|:---|:---|:---|
-| User info screen | `CometchatUserInfo` | [cometchat_user_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info.dart) |
-| Block user | `blockUserDialog()` | [cometchat_user_info_controller.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info_controller.dart) |
-| Unblock user | `unblockUserDialog()` | [cometchat_user_info_controller.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info_controller.dart) |
-| Check blocked status | `user.blockedByMe` | [cometchat_user_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info.dart) |
-| Blocked banner | Warning container | [cometchat_user_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info.dart) |
-| Blocked composer | `_buildBlockedUserSection()` | [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart) |
+## Summary
----
-
-## Next Steps
-
-
-
- Display and manage user lists.
-
-
- Customize the message input component.
-
-
- Browse all feature and formatter guides.
-
-
- Full working sample application on GitHub.
-
-
+| Feature | Method |
+|:---|:---|
+| Block User | `CometChatUIKit.blockUsers([...])` |
+| Unblock User | `CometChatUIKit.unblockUsers([...])` |
diff --git a/ui-kit/flutter/guide-call-log-details.mdx b/ui-kit/flutter/guide-call-log-details.mdx
index 09d09842e..9d2ba588d 100644
--- a/ui-kit/flutter/guide-call-log-details.mdx
+++ b/ui-kit/flutter/guide-call-log-details.mdx
@@ -1,117 +1,92 @@
---
title: "Call Log Details"
sidebarTitle: "Call Log Details"
-description: "Display call history and detailed call information in CometChat Flutter UI Kit."
+description: "Show CometChat Flutter UI Kit call log details with participants, duration, timestamps, recordings, and call metadata."
---
-
+Provide a post-call details screen with metadata, participants, history, and recordings using CometChat V6 UIKit.
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_chat_uikit` |
-| Key components | `CometChatCallLogs`, `CometChatCallLogDetails` |
-| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login(uid)` |
-| Entry point | Calls tab → `CometChatCallLogs` → tap item → `CometChatCallLogDetails` |
-| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
-| Related | [All Guides](/ui-kit/flutter/guide-overview) |
+## Overview
-
-
-Call Log Details provides a dedicated Calls tab where users can view recent audio and video calls and inspect detailed information for each call.
-
-Before starting, complete the [Getting Started](/ui-kit/flutter/getting-started) guide.
-
----
+The Call Log Details feature displays detailed information about a specific call, including participants, duration, timestamps, and recordings (if available).
## Components
-| Component / Class | Role |
+| Component | Role |
|:---|:---|
-| `CometChatCallLogs` | Displays the list of recent calls with tap callbacks |
-| `CometChatCallLogDetails` | Shows detailed information (participants, duration, type) |
-| `CallLog` | Call log data model from SDK |
-
----
-
-## Integration Steps
-
-### 1. Add Calls Tab
+| `CometChatCallLogs` | Lists call logs; tap to view details |
+| `CallLogRequestBuilder` | Filters call logs by criteria |
-Integrate the Calls tab into your main dashboard using `CometChatCallLogs`.
+## Integration
-_File: [dashboard.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart)_
+### Navigate to Call Details
+
+
```dart
CometChatCallLogs(
onItemClick: (callLog) {
Navigator.push(
context,
MaterialPageRoute(
- builder: (context) => CometChatCallLogDetails(callLog: callLog),
+ builder: (_) => CallLogDetailScreen(callLog: callLog),
),
);
},
)
```
+
+
----
-
-### 2. Display Call Logs
-
-Use `CometChatCallLogs` to fetch and show recent calls with customizable styling.
-
-_File: [dashboard.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart)_
+### Build a Call Detail Screen
+
+
```dart
-CometChatCallLogs(
- onItemClick: (callLog) {
- // Navigate to details screen
- },
- callLogsStyle: CometChatCallLogsStyle(
- backgroundColor: colorPalette.background1,
- ),
-)
-```
+class CallLogDetailScreen extends StatelessWidget {
+ final CallLog callLog;
----
+ const CallLogDetailScreen({required this.callLog, super.key});
-### 3. Show Call Log Details
+ @override
+ Widget build(BuildContext context) {
+ final initiatedAt = DateTime.fromMillisecondsSinceEpoch(
+ (callLog.initiatedAt ?? 0) * 1000,
+ );
-Present detailed information when a call log is tapped.
+ return Scaffold(
+ appBar: AppBar(title: const Text("Call Details")),
+ body: Padding(
+ padding: const EdgeInsets.all(16),
+ child: Column(
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ Text("Status: ${callLog.status ?? 'Unknown'}"),
+ Text("Type: ${callLog.type ?? 'Unknown'}"),
+ Text("Duration: ${callLog.totalDurationInMinutes ?? 0} min"),
+ Text("Time: $initiatedAt"),
+ if (callLog.hasRecording == true)
+ const Text("Recording available"),
+ ],
+ ),
+ ),
+ );
+ }
+}
+```
+
+
-_File: [cometchat_call_log_details.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/call_log_details/cometchat_call_log_details.dart)_
+## Filtering Call Logs
+
+
```dart
-CometChatCallLogDetails(
- callLog: callLog,
+CometChatCallLogs(
+ callLogsRequestBuilder: CallLogRequestBuilder()
+ ..limit = 20
+ ..hasRecording = true,
)
```
-
----
-
-## Feature Matrix
-
-| Feature | Component / Method | File |
-|:---|:---|:---|
-| Calls tab | `CometChatCallLogs` | [dashboard.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart) |
-| Display call logs | `CometChatCallLogs` | [dashboard.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart) |
-| Call details | `CometChatCallLogDetails` | [cometchat_call_log_details.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/call_log_details/cometchat_call_log_details.dart) |
-
----
-
-## Next Steps
-
-
-
- Learn more about the Call Logs component.
-
-
- Explore all calling capabilities.
-
-
- Add call buttons to your chat interface.
-
-
- Browse all feature and formatter guides.
-
-
+
+
diff --git a/ui-kit/flutter/guide-group-chat.mdx b/ui-kit/flutter/guide-group-chat.mdx
index 762b4b216..e1be7e0cc 100644
--- a/ui-kit/flutter/guide-group-chat.mdx
+++ b/ui-kit/flutter/guide-group-chat.mdx
@@ -1,182 +1,92 @@
---
-title: "Group Management"
+title: "Group Chat"
sidebarTitle: "Group Chat"
-description: "Create groups, manage members, assign roles, and transfer ownership in CometChat Flutter UI Kit."
+description: "Build CometChat Flutter UI Kit group chats with group lists, members, headers, message lists, and composers."
---
-
+Build group chat functionality in your Flutter app using CometChat V6 UIKit. Create/join groups, view members, manage roles, and moderate participation.
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_chat_uikit` |
-| Key components | `CometChatGroups`, `CometChatCreateGroup`, `CometChatGroupInfo`, `CometChatAddMembers`, `CometChatBannedMembers`, `CometChatTransferOwnership` |
-| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login(uid)` |
-| Entry point | Groups tab → create/join group → `CometChatGroupInfo` for management |
-| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
-| Related | [All Guides](/ui-kit/flutter/guide-overview) |
+## Overview
-
-
-Group Management enables users to create groups, join public/password groups, manage members, ban users, update roles, and transfer ownership.
-
-Before starting, complete the [Getting Started](/ui-kit/flutter/getting-started) guide.
-
----
+V6 provides `CometChatGroups` and `CometChatGroupMembers` widgets powered by BLoC for group management.
## Components
-| Component / Class | Role |
+| Component | Role |
|:---|:---|
-| `CometChatGroups` | Displays groups and create button |
-| `CometChatCreateGroup` | UI to create new groups |
-| `CometChatGroupInfo` | Shows group info and member management |
-| `CometChatAddMembers` | Add members to a group |
-| `CometChatBannedMembers` | View/unban banned users |
-| `CometChatTransferOwnership` | Transfer group ownership |
-| `CometChatChangeScope` | Change a user's group role |
-| `JoinProtectedGroupUtils` | Utility to join password-protected groups |
-
----
-
-## Integration Steps
-
-### 1. Create a Group
-
-Show the create group dialog from the dashboard.
-
-_File: [dashboard.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart)_
-
-```dart
-IconButton(
- onPressed: () {
- showCreateGroup(
- context: context,
- colorPalette: colorPalette,
- typography: typography,
- spacing: spacing,
- );
- },
- icon: Icon(Icons.group_add),
-)
-```
-
-_File: [cometchat_create_group.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/create_group/cometchat_create_group.dart)_
-
-```dart
-await CometChat.createGroup(
- group: Group(
- guid: groupId,
- name: groupName,
- type: groupType,
- password: groupPassword,
- ),
- onSuccess: (Group group) => Navigator.pop(context),
- onError: (e) {
- // Show error
- },
-);
-```
-
----
+| `CometChatGroups` | Lists available groups |
+| `CometChatGroupMembers` | Displays and manages group members |
+| `CometChatMessageHeader` | Shows group info in chat header |
+| `CometChatMessageList` | Displays group messages |
+| `CometChatMessageComposer` | Sends messages to group |
-### 2. Join Public/Password Group
+## Integration
-Handle group tap to join or prompt for password.
-
-_File: [join_protected_group_util.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/utils/join_protected_group_util.dart)_
+### Display Groups List
+
+
```dart
CometChatGroups(
- onItemTap: (context, group) {
- JoinProtectedGroupUtils.onGroupItemTap(context, group);
+ onItemTap: (group) {
+ Navigator.push(
+ context,
+ MaterialPageRoute(
+ builder: (_) => Scaffold(
+ appBar: CometChatMessageHeader(group: group),
+ body: SafeArea(
+ child: Column(
+ children: [
+ Expanded(child: CometChatMessageList(group: group)),
+ CometChatMessageComposer(group: group),
+ ],
+ ),
+ ),
+ ),
+ ),
+ );
},
)
```
+
+
----
-
-### 3. View Group Info
-
-Display group details and member management options.
-
-_File: [cometchat_group_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/group_info/cometchat_group_info.dart)_
+### Display Group Members
+
+
```dart
-CometChatGroupInfo(
- group: group,
-)
-```
-
----
-
-### 4. Add Members
-
-Navigate to add members screen.
-
-_File: [cometchat_add_members.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/add_memebers/cometchat_add_members.dart)_
-
-```dart
-CometChatAddMembers(
- group: group,
-)
-```
-
----
-
-### 5. Ban/Unban Members
-
-Manage banned members list.
-
-_File: [cometchat_banned_members.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/banned_members/cometchat_banned_members.dart)_
-
-```dart
-CometChatBannedMembers(
+CometChatGroupMembers(
group: group,
+ onItemTap: (groupMember) {
+ // Handle member tap
+ },
)
```
+
+
----
-
-### 6. Transfer Ownership
+### Manage Members
-Transfer group ownership to another member.
-
-_File: [cometchat_transfer_ownership.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/transfer_ownership/cometchat_transfer_ownership.dart)_
+V6 provides built-in options for member management:
+
+
```dart
-CometChatTransferOwnership(
+CometChatGroupMembers(
group: group,
+ hideKickMemberOption: false,
+ hideBanMemberOption: false,
+ hideScopeChangeOption: false,
)
```
+
+
----
-
-## Feature Matrix
-
-| Feature | Component / Method | File |
-|:---|:---|:---|
-| Create group | `CometChatCreateGroup` | [cometchat_create_group.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/create_group/cometchat_create_group.dart) |
-| Join group | `JoinProtectedGroupUtils` | [join_protected_group_util.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/utils/join_protected_group_util.dart) |
-| View members | `CometChatGroupInfo` | [cometchat_group_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/group_info/cometchat_group_info.dart) |
-| Add members | `CometChatAddMembers` | [cometchat_add_members.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/add_memebers/cometchat_add_members.dart) |
-| Ban/unban | `CometChatBannedMembers` | [cometchat_banned_members.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/banned_members/cometchat_banned_members.dart) |
-| Transfer ownership | `CometChatTransferOwnership` | [cometchat_transfer_ownership.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/transfer_ownership/cometchat_transfer_ownership.dart) |
-
----
-
-## Next Steps
+## Key V6 Differences
-
-
- Learn more about the Groups component.
-
-
- Display and manage group members.
-
-
- View group conversations.
-
-
- Browse all feature and formatter guides.
-
-
+| Aspect | V5 | V6 |
+|---|---|---|
+| Composite widget | `CometChatGroupsWithMessages` | Not available — compose manually |
+| State management | GetX | BLoC (`GroupsBloc`) |
+| Member management | Via configuration objects | Direct widget properties |
diff --git a/ui-kit/flutter/guide-message-agentic-flow.mdx b/ui-kit/flutter/guide-message-agentic-flow.mdx
index 2b3c9144c..0a33d471f 100644
--- a/ui-kit/flutter/guide-message-agentic-flow.mdx
+++ b/ui-kit/flutter/guide-message-agentic-flow.mdx
@@ -1,197 +1,88 @@
---
-title: "AI Agent Integration"
-sidebarTitle: "AI Agent Integration"
-description: "Integrate AI agents with chat history, contextual responses, and seamless handoffs in CometChat Flutter UI Kit."
+title: "Message Agentic Flow"
+sidebarTitle: "Message Agentic Flow"
+description: "Implement CometChat Flutter UI Kit agentic message flows with AI-powered message handling and custom AI message rendering."
---
-
+Implement agentic message flows in your Flutter app using CometChat V6 UIKit. This guide covers how to integrate AI-powered message handling with the chat interface.
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_chat_uikit` |
-| Key components | `CometChatAIAssistantChatHistory`, `CometChatMessageList`, `CometChatMessageComposer`, `CometChatMessageHeader` |
-| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login(uid)` |
-| Entry point | AI agent user → `AIAssistantChatScreen` with AI-specific styling |
-| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
-| Related | [All Guides](/ui-kit/flutter/guide-overview) |
+## Overview
-
+The Message Agentic Flow feature enables AI-driven interactions within your chat application. In V6, AI features are handled through `MessageTemplateUtils` rather than explicit extension registration.
-AI Agent Integration enables intelligent conversational AI capabilities with chat history, contextual responses, and seamless handoffs.
+## Integration
-Before starting, complete the [Getting Started](/ui-kit/flutter/getting-started) guide.
+### Enable AI Features
----
-
-## Components
-
-| Component / Class | Role |
-|:---|:---|
-| `CometChatMessageHeader` | Manages message interactions with AI-specific buttons |
-| `CometChatMessageList` | Displays messages with AI-specific styling |
-| `CometChatMessageComposer` | Composes messages with AI placeholders |
-| `CometChatAIAssistantChatHistory` | Displays previous AI conversation history |
-| `CometChatAiAssistantBubbleStyle` | Custom styling for AI chat bubbles |
-| `AIConstants.aiRole` | Constant to detect AI agent users |
-
----
-
-## Integration Steps
-
-### 1. Detect AI Agent
+Ensure AI features are enabled on your CometChat Dashboard. V6 handles AI integration internally.
-Check if the user is an AI agent by their role.
-
-```dart
-bool isUserAgentic() {
- return widget.user?.role == AIConstants.aiRole;
-}
-```
-
----
-
-### 2. AI Chat Screen Setup
-
-Create a screen for AI Assistant chat using standard message components with AI-specific styling.
-
-```dart
-class AIAssistantChatScreen extends StatefulWidget {
- final User? user;
- final Group? group;
- final BaseMessage? parentMessage;
- final bool? isHistory;
-
- const AIAssistantChatScreen({
- Key? key,
- this.user,
- this.group,
- this.parentMessage,
- this.isHistory,
- }) : super(key: key);
-
- @override
- State createState() => _AIAssistantChatScreenState();
-}
-```
-
----
-
-### 3. Message Header with AI Actions
-
-Configure the message header with chat history and new chat buttons.
-
-```dart
-CometChatMessageHeader(
- user: widget.user,
- group: widget.group,
- chatHistoryButtonClick: () {
- Navigator.push(
- context,
- MaterialPageRoute(
- builder: (context) => CometChatAIAssistantChatHistory(
- user: widget.user,
- group: widget.group,
- onNewChatButtonClicked: () => onNewChatClicked(true),
- onMessageClicked: (message) => navigateToThread(message),
- onClose: () => Navigator.of(context).pop(),
- ),
- ),
- );
- },
- newChatButtonClick: () => onNewChatClicked(false),
-)
-```
-
----
-
-### 4. AI Message List
-
-Configure the message list with AI-specific styling and options.
+### Custom AI Message Handling
+
+
```dart
CometChatMessageList(
user: user,
- group: group,
- hideReplyInThreadOption: isUserAgentic() ? true : false,
- hideThreadView: true,
- messagesRequestBuilder: requestBuilder,
- style: CometChatMessageListStyle(
- backgroundColor: isUserAgentic() ? colorPalette.background3 : null,
- outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
- textBubbleStyle: CometChatTextBubbleStyle(
- backgroundColor: isUserAgentic() ? colorPalette.background4 : null,
- textColor: isUserAgentic() ? colorPalette.textPrimary : null,
- ),
+ templates: [
+ CometChatMessageTemplate(
+ type: "ai_response",
+ category: MessageCategoryConstants.custom,
+ contentView: (baseMessage, context, alignment, {additionalConfigurations}) {
+ // Custom rendering for AI agent messages
+ return Container(
+ padding: const EdgeInsets.all(12),
+ decoration: BoxDecoration(
+ color: Color(0xFFEDEAFA),
+ borderRadius: BorderRadius.circular(12),
+ ),
+ child: Column(
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ Row(
+ children: [
+ Icon(Icons.smart_toy, color: Color(0xFF6852D6), size: 16),
+ SizedBox(width: 4),
+ Text("AI Assistant", style: TextStyle(
+ color: Color(0xFF6852D6),
+ fontWeight: FontWeight.bold,
+ fontSize: 12,
+ )),
+ ],
+ ),
+ SizedBox(height: 8),
+ Text((baseMessage as TextMessage).text),
+ ],
+ ),
+ );
+ },
),
- ),
-)
-```
-
----
-
-### 5. AI Composer
-
-Configure the composer with AI-specific placeholder text.
-
-```dart
-CometChatMessageComposer(
- user: widget.user,
- group: widget.group,
- disableMentions: isUserAgentic() ? true : false,
- placeholderText: isUserAgentic()
- ? "${Translations.of(context).askAnything}..."
- : null,
- parentMessageId: widget.parentMessage?.id ?? 0,
+ ],
)
```
+
+
----
-
-### 6. Custom AI Bubble Styling
+### AI Assistant Chat History
-Apply custom styles for AI chat bubbles using ThemeExtension.
+Use the `CometChatAIAssistantChatHistory` widget to display past AI interactions:
+
+
```dart
-MaterialApp(
- theme: ThemeData(
- extensions: [
- CometChatAiAssistantBubbleStyle(
- backgroundColor: Colors.transparent,
- border: Border.all(color: Colors.blueAccent, width: 1),
- textColor: const Color(0xFF141414),
- ),
- ],
+CometChatAIAssistantChatHistory(
+ user: user,
+ style: CometChatAIAssistantChatHistoryStyle(
+ backgroundColor: const Color(0xFFFFFAF6),
),
)
```
+
+
----
-
-## Feature Matrix
-
-| Feature | Component / Method | Description |
-|:---|:---|:---|
-| AI detection | `AIConstants.aiRole` | Check if user is AI agent |
-| AI chat screen | `AIAssistantChatScreen` | Full AI chat interface |
-| Chat history | `CometChatAIAssistantChatHistory` | Browse previous AI sessions |
-| AI styling | `CometChatAiAssistantBubbleStyle` | Custom AI bubble appearance |
-| New chat | `onNewChatClicked()` | Start fresh AI conversation |
-
----
-
-## Next Steps
+## Key V6 Differences
-
-
- Explore all AI-powered features.
-
-
- Learn about AI chat history component.
-
-
- Learn about message display and management.
-
-
- Browse all feature and formatter guides.
-
-
+| Aspect | V5 | V6 |
+|---|---|---|
+| AI extension registration | Explicit via `UIKitSettings.aiFeature` | Handled internally via `MessageTemplateUtils` |
+| Custom AI templates | Via `CometChatUIKit.getDataSource()` | Via `MessageTemplateUtils` and direct template injection |
+| AI Assistant widget | `CometChatAIAssistantChatHistory` | Same widget, same API |
diff --git a/ui-kit/flutter/guide-message-privately.mdx b/ui-kit/flutter/guide-message-privately.mdx
index f77cecee7..3dab740a7 100644
--- a/ui-kit/flutter/guide-message-privately.mdx
+++ b/ui-kit/flutter/guide-message-privately.mdx
@@ -1,151 +1,63 @@
---
title: "Message Privately"
sidebarTitle: "Message Privately"
-description: "Initiate private one-on-one chats with group members directly from group chat in CometChat Flutter UI Kit."
+description: "Start private one-to-one chats in CometChat Flutter UI Kit from a profile, member list, search result, or custom user context."
---
-
+Start a direct 1:1 chat from a profile or list in your Flutter app using CometChat V6 UIKit.
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_chat_uikit` |
-| Key components | `CometchatUserInfo`, `CometChatMessageList`, `PageManager` |
-| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login(uid)` |
-| Entry point | Group member tap → `CometchatUserInfo` → "Message" action |
-| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
-| Related | [All Guides](/ui-kit/flutter/guide-overview) |
+## Overview
-
+The "Message Privately" feature allows users to initiate a direct conversation with another user from any context — a group member list, user profile, or search results.
-Message Privately lets users start a direct one-on-one chat with a group member.
+## Integration
-Before starting, complete the [Getting Started](/ui-kit/flutter/getting-started) guide.
-
----
-
-## Components
-
-| Component / Class | Role |
-|:---|:---|
-| `CometChatMessageList` | Displays group messages and user avatars |
-| `CometchatUserInfo` | Shows user details and actions (e.g., call, message) |
-| `CometChatUserInfoController` | Manages user info state and actions |
-| `PageManager` | Handles navigation to the private chat screen |
-
----
-
-## Integration Steps
-
-### 1. Navigate to User Info
-
-Open the user info screen when tapping on a group member's profile or info icon.
-
-_File: [cometchat_group_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/group_info/cometchat_group_info.dart)_
+### Navigate to Private Chat
+
+
```dart
-Navigator.push(
- context,
- MaterialPageRoute(
- builder: (context) => CometchatUserInfo(user: selectedUser),
- ),
-);
-```
-
----
-
-### 2. Display User Profile with Actions
-
-The `CometchatUserInfo` widget displays the user's profile with action tiles for voice call, video call, and messaging.
-
-_File: [cometchat_user_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info.dart)_
-
-```dart
-Widget _getOptionTiles(CometChatUserInfoController controller) {
- return Row(
- mainAxisAlignment: MainAxisAlignment.spaceBetween,
- children: [
- tile(
- Icon(Icons.call_outlined, color: colorPalette.iconHighlight),
- Translations.of(context).voice,
- () => controller.initiateCallWorkflow(CallTypeConstants.audioCall, context),
+void openPrivateChat(BuildContext context, User user) {
+ Navigator.push(
+ context,
+ MaterialPageRoute(
+ builder: (_) => Scaffold(
+ appBar: CometChatMessageHeader(user: user),
+ body: SafeArea(
+ child: Column(
+ children: [
+ Expanded(child: CometChatMessageList(user: user)),
+ CometChatMessageComposer(user: user),
+ ],
+ ),
+ ),
),
- tile(
- Icon(Icons.videocam_outlined, color: colorPalette.iconHighlight),
- Translations.of(context).video,
- () => controller.initiateCallWorkflow(CallTypeConstants.videoCall, context),
- ),
- ],
+ ),
);
}
```
+
+
----
-
-### 3. Start Private Chat
-
-Navigate to the private chat screen using `PageManager` when the user wants to message privately.
-
-_File: [page_manager.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/utils/page_manager.dart)_
+### From Group Members List
+
+
```dart
-PageManager().navigateToMessages(
- context: context,
- user: user,
-);
+CometChatGroupMembers(
+ group: group,
+ onItemTap: (groupMember) {
+ // Convert GroupMember to User for private messaging
+ User user = User(
+ uid: groupMember.uid,
+ name: groupMember.name,
+ avatar: groupMember.avatar,
+ );
+ openPrivateChat(context, user);
+ },
+)
```
+
+
----
-
-### 4. Handle Mentions Navigation
-
-When a user taps on a mention in a message, navigate to that user's profile or start a private chat.
-
-_File: [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart)_
-
-```dart
-CometChatMentionsFormatter getMentionsTap() {
- return CometChatMentionsFormatter(
- user: widget.user,
- group: widget.group,
- onMentionTap: (mention, mentionedUser, {message}) {
- if (mentionedUser.uid != CometChatUIKit.loggedInUser!.uid) {
- PageManager().navigateToMessages(
- context: context,
- user: mentionedUser,
- );
- }
- },
- );
-}
-```
-
----
-
-## Feature Matrix
-
-| Feature | Component / Method | File |
-|:---|:---|:---|
-| User info screen | `CometchatUserInfo` | [cometchat_user_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info.dart) |
-| Voice/video call | `initiateCallWorkflow()` | [cometchat_user_info_controller.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info_controller.dart) |
-| Navigate to chat | `PageManager.navigateToMessages` | [page_manager.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/utils/page_manager.dart) |
-| Mention tap | `CometChatMentionsFormatter` | [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart) |
-| Access from group | Group member list | [cometchat_group_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/group_info/cometchat_group_info.dart) |
-
----
-
-## Next Steps
-
-
- Display and manage group lists.
-
-
- View and manage group members.
-
-
- Display messages in private chats.
-
-
- Browse all feature and formatter guides.
-
-
diff --git a/ui-kit/flutter/guide-new-chat.mdx b/ui-kit/flutter/guide-new-chat.mdx
index 48027ccc3..d828b31c3 100644
--- a/ui-kit/flutter/guide-new-chat.mdx
+++ b/ui-kit/flutter/guide-new-chat.mdx
@@ -1,155 +1,95 @@
---
title: "New Chat"
sidebarTitle: "New Chat"
-description: "Enable users to start one-on-one or group chats with a searchable contact list in CometChat Flutter UI Kit."
+description: "Create a CometChat Flutter UI Kit new chat screen for discovering users and groups and opening one-to-one or group conversations."
---
-
+Offer a unified discovery screen for users and groups and launch new chats quickly using CometChat V6 UIKit.
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_chat_uikit` |
-| Key components | `CometChatContacts`, `CometChatUsers`, `CometChatGroups`, `CometChatAvatar` |
-| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login(uid)` |
-| Entry point | Avatar menu → "Create Conversation" → `CometChatContacts` |
-| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
-| Related | [All Guides](/ui-kit/flutter/guide-overview) |
+## Overview
-
+The "New Chat" feature provides a screen where users can browse available users and groups to start a new conversation.
-New Chat enables users to start one-on-one or group conversations by selecting from a searchable contact list.
+## Integration
-Before starting, complete the [Getting Started](/ui-kit/flutter/getting-started) guide.
-
----
-
-## Components
-
-| Component / Class | Role |
-|:---|:---|
-| `CometChatAvatar` | Displays the user avatar in the app bar |
-| `PopupMenuButton` | Shows menu options when the avatar is tapped |
-| `CometChatContacts` | UI for the "Start Conversation" screen with tabs |
-| `CometChatContactsController` | Manages tab switching and item selection |
-| `CometChatUsers` | Lists users with search and selection |
-| `CometChatGroups` | Lists groups with search and selection |
-| `PageManager` | Handles navigation to the chat screen |
-
----
-
-## Integration Steps
-
-### 1. Add Avatar Menu
-
-Show the avatar in the app bar and open a menu on tap with "Create Conversation" option.
-
-_File: [dashboard.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart)_
+### Create a New Chat Screen
+
+
```dart
-PopupMenuButton(
- icon: CometChatAvatar(
- width: 40,
- height: 40,
- image: CometChatUIKit.loggedInUser?.avatar,
- name: CometChatUIKit.loggedInUser?.name,
- ),
- itemBuilder: (context) => [
- PopupMenuItem(value: '/Create', child: Text("Create Conversation")),
- ],
- onSelected: (value) {
- if (value == '/Create') {
- Navigator.push(
- context,
- MaterialPageRoute(builder: (context) => CometChatContacts()),
- );
- }
- },
-);
-```
-
----
-
-### 2. Open Contacts Screen
-
-Navigate to the `CometChatContacts` screen which provides tabs for Users and Groups.
-
-_File: [dashboard.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart)_
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:flutter/material.dart';
+
+class NewChatScreen extends StatelessWidget {
+ const NewChatScreen({super.key});
+
+ void _openChat(BuildContext context, {User? user, Group? group}) {
+ Navigator.push(
+ context,
+ MaterialPageRoute(
+ builder: (_) => Scaffold(
+ appBar: CometChatMessageHeader(user: user, group: group),
+ body: SafeArea(
+ child: Column(
+ children: [
+ Expanded(child: CometChatMessageList(user: user, group: group)),
+ CometChatMessageComposer(user: user, group: group),
+ ],
+ ),
+ ),
+ ),
+ ),
+ );
+ }
-```dart
-void openCreateConversation(BuildContext context) {
- Navigator.push(
- context,
- MaterialPageRoute(builder: (context) => CometChatContacts()),
- );
+ @override
+ Widget build(BuildContext context) {
+ return DefaultTabController(
+ length: 2,
+ child: Scaffold(
+ appBar: AppBar(
+ title: const Text('New Chat'),
+ bottom: const TabBar(
+ tabs: [
+ Tab(text: 'Users'),
+ Tab(text: 'Groups'),
+ ],
+ ),
+ ),
+ body: TabBarView(
+ children: [
+ CometChatUsers(
+ hideAppbar: true,
+ onItemTap: (user) => _openChat(context, user: user),
+ ),
+ CometChatGroups(
+ hideAppbar: true,
+ onItemTap: (group) => _openChat(context, group: group),
+ ),
+ ],
+ ),
+ ),
+ );
+ }
}
```
+
+
----
-
-### 3. Handle User/Group Selection
-
-Wire up the `onItemTap` callback to navigate to the chat screen when a user or group is selected.
-
-_File: [cometchat_contacts_controller.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/contacts/cometchat_contacts_controller.dart)_
-
-```dart
-CometChatUsers(
- hideAppbar: true,
- onItemTap: (context, user) => _onItemTap(context: context, user: user),
-);
-
-CometChatGroups(
- hideAppbar: true,
- onItemTap: (context, group) => _onItemTap(context: context, group: group),
-);
-```
-
----
-
-### 4. Navigate to Chat
-
-Open the chat screen for the selected user or group using `PageManager`.
-
-_File: [page_manager.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/utils/page_manager.dart)_
+### Launch from a FAB
+
+
```dart
-void _onItemTap({required BuildContext context, User? user, Group? group}) {
- if (user != null) {
- PageManager.navigateToMessages(context: context, user: user);
- } else if (group != null) {
- JoinProtectedGroupUtils.onGroupItemTap(context, group);
- }
-}
+FloatingActionButton(
+ onPressed: () {
+ Navigator.push(
+ context,
+ MaterialPageRoute(builder: (_) => const NewChatScreen()),
+ );
+ },
+ child: const Icon(Icons.chat),
+)
```
-
----
-
-## Feature Matrix
-
-| Feature | Component / Method | File |
-|:---|:---|:---|
-| Avatar menu | `PopupMenuButton`, `CometChatAvatar` | [dashboard.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart) |
-| Contacts screen | `CometChatContacts` | [dashboard.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart) |
-| List users | `CometChatUsers` | [cometchat_contacts_controller.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/contacts/cometchat_contacts_controller.dart) |
-| List groups | `CometChatGroups` | [cometchat_contacts_controller.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/contacts/cometchat_contacts_controller.dart) |
-| Handle selection | `_onItemTap` | [page_manager.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/utils/page_manager.dart) |
-| Navigate to chat | `PageManager.navigateToMessages` | [page_manager.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/utils/page_manager.dart) |
-
----
-
-## Next Steps
-
-
-
- Display and search user lists.
-
-
- Display and manage group lists.
-
-
- View and manage conversation history.
-
-
- Browse all feature and formatter guides.
-
-
+
+
diff --git a/ui-kit/flutter/guide-overview.mdx b/ui-kit/flutter/guide-overview.mdx
index d056b2277..e046bfb46 100644
--- a/ui-kit/flutter/guide-overview.mdx
+++ b/ui-kit/flutter/guide-overview.mdx
@@ -1,67 +1,23 @@
---
-title: "Guides Overview"
+title: "Overview"
sidebarTitle: "Overview"
-description: "Task-oriented feature guides for implementing specific capabilities in the Flutter UI Kit"
+description: "Browse Flutter UI Kit feature guides for blocking users, group chat, private messages, new chat flows, and threaded conversations."
---
-
-
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_chat_uikit` |
-| Purpose | Index of task-oriented feature guides for the Flutter UI Kit |
-| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
-| Components | [Components Overview](/ui-kit/flutter/components-overview) |
-| Guides | [Block/Unblock](/ui-kit/flutter/guide-block-unblock-user) · [Call Log Details](/ui-kit/flutter/guide-call-log-details) · [Group Chat](/ui-kit/flutter/guide-group-chat) · [Image Preview & Caption](/ui-kit/flutter/guide-image-caption) · [Message Privately](/ui-kit/flutter/guide-message-privately) · [New Chat](/ui-kit/flutter/guide-new-chat) · [Search Messages](/ui-kit/flutter/guide-search-messages) · [Threaded Messages](/ui-kit/flutter/guide-threaded-messages) · [AI Agent](/ui-kit/flutter/guide-message-agentic-flow) |
-
-
-
-This page indexes focused, task‑oriented feature guides for the Flutter UI Kit. Each guide shows how to implement a specific capability end‑to‑end using UI kit components.
+> This page indexes focused, task-oriented feature guides for the Flutter V6 UI Kit. Each guide shows how to implement a specific capability end-to-end using V6 UI kit components.
## When to Use These Guides
Use these after finishing [Getting Started](/ui-kit/flutter/getting-started) and wiring a basic conversations/messages experience. Add them incrementally to deepen functionality without rebuilding fundamentals.
-## Feature Guides
+## Guide Directory
| Guide | Description |
|:------|:------------|
| [Block / Unblock User](/ui-kit/flutter/guide-block-unblock-user) | Let users block or unblock others; enforce privacy by hiding interaction options and preventing message flow. |
-| [Call Log Details](/ui-kit/flutter/guide-call-log-details) | Provide a post‑call details screen with metadata, participants, history, and recordings for audit & support. |
-| [Group Management](/ui-kit/flutter/guide-group-chat) | Create/join groups, view members, add / remove users, manage roles, and moderate participation. |
-| [Message Privately](/ui-kit/flutter/guide-message-privately) | Start a direct 1:1 chat from a profile or list; optionally send an initial message to surface the conversation. |
-| [New Chat](/ui-kit/flutter/guide-new-chat) | Offer a unified discovery screen for users & groups and launch new chats quickly. |
-| [Search Messages](/ui-kit/flutter/guide-search-messages) | Full-text message search across conversations with result routing and navigation. |
+| [Group Chat](/ui-kit/flutter/guide-group-chat) | Create/join groups, view members, add/remove users, manage roles, and moderate participation. |
+| [Message Privately](/ui-kit/flutter/guide-message-privately) | Start a direct 1:1 chat from a profile or list. |
+| [New Chat](/ui-kit/flutter/guide-new-chat) | Offer a unified discovery screen for users and groups and launch new chats quickly. |
| [Threaded Messages](/ui-kit/flutter/guide-threaded-messages) | Enable threaded replies: open parent message context, browse replies, and compose within a focused thread. |
-| [AI Agent Integration](/ui-kit/flutter/guide-message-agentic-flow) | Integrate AI agents with chat history, contextual responses, and seamless handoffs. |
-| [Image Preview & Caption](/ui-kit/flutter/guide-image-caption) | Preview images before sending and display captions below image thumbnails in message bubbles. |
-
-## Formatter Guides
-
-| Guide | Description |
-|:------|:------------|
-| [Custom Text Formatter](/ui-kit/flutter/custom-text-formatter-guide) | Build custom inline text patterns with regex, styling, and callbacks. |
-| [Mentions Formatter](/ui-kit/flutter/mentions-formatter-guide) | Add @mentions with user suggestions and styled tokens. |
-| [URL Formatter](/ui-kit/flutter/url-formatter-guide) | Auto-detect and style URLs as clickable links. |
-| [Shortcut Formatter](/ui-kit/flutter/shortcut-formatter-guide) | Create keyboard shortcuts for quick text insertion. |
-
-Need another guide? Request one via [CometChat Support](https://www.cometchat.com/support).
-
----
-## Next Steps
-
-
- Set up the Flutter UI Kit in your project
-
-
- Explore all available UI components
-
-
- Learn about core chat features
-
-
- View complete working examples
-
-
diff --git a/ui-kit/flutter/guide-threaded-messages.mdx b/ui-kit/flutter/guide-threaded-messages.mdx
index 967135bdc..d63735c6d 100644
--- a/ui-kit/flutter/guide-threaded-messages.mdx
+++ b/ui-kit/flutter/guide-threaded-messages.mdx
@@ -1,194 +1,119 @@
---
title: "Threaded Messages"
sidebarTitle: "Threaded Messages"
-description: "Implement threaded message replies with parent context, reply list, and focused thread composer in CometChat Flutter UI Kit."
+description: "Add threaded messages in CometChat Flutter UI Kit with parent message context, reply lists, and composers for focused conversations."
---
-
+Enhance your Flutter chat app with threaded messaging using CometChat V6's `CometChatMessageList` and `CometChatThreadedHeader` components.
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_chat_uikit` |
-| Key components | `CometChatThread`, `CometChatThreadedHeader`, `CometChatMessageList`, `CometChatMessageComposer` |
-| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login(uid)` |
-| Entry point | `CometChatMessageList.onThreadRepliesClick` opens thread view from messages |
-| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
-| Related | [All Guides](/ui-kit/flutter/guide-overview) |
+## Overview
-
+- Reply to specific messages to start focused sub-conversations
+- View all replies grouped under the parent message
+- Seamlessly switch back to the main conversation
-Threaded messages let users create sub-conversations by replying to specific messages. This reduces clutter and keeps discussions focused.
+## Prerequisites
-Before starting, complete the [Getting Started](/ui-kit/flutter/getting-started) guide.
-
----
+- A Flutter project with CometChat UIKit Flutter V6 installed
+- Initialized CometChat credentials
## Components
-| Component / Class | Role |
+| Component | Role |
|:---|:---|
-| `CometChatThread` | Main container widget for threaded messages |
-| `CometChatThreadedHeader` | Displays parent message and thread context |
-| `CometChatMessageList` | Shows messages filtered by `parentMessageId` |
-| `CometChatMessageComposer` | Input for composing threaded replies |
-| `MessagesRequestBuilder` | Builds request to fetch thread replies |
-
----
+| `CometChatMessageList` | Displays main chat; provides `onThreadRepliesClick` callback |
+| `CometChatThreadedHeader` | Shows the parent message and thread context |
+| `CometChatMessageComposer` | Sends new messages; pass `parentMessageId` for replies |
## Integration Steps
-### 1. Thread Trigger in Messages
-
-Wire the `onThreadRepliesClick` callback on `CometChatMessageList`. When a user clicks the thread reply icon on any message, this fires with the parent message object.
-
-_File: [messages.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/messages/messages.dart)_
+### Show the "Reply in Thread" Option
+
+
```dart
CometChatMessageList(
+ user: user,
onThreadRepliesClick: (BaseMessage message) {
Navigator.push(
context,
MaterialPageRoute(
- builder: (_) => CometChatThread(
- message: message,
- user: user,
- group: group,
- ),
+ builder: (_) => ThreadScreen(parentMessage: message, user: user),
),
);
},
-);
+)
```
+
+
----
-
-### 2. Thread Screen Widget
-
-Create the thread screen with header, message list, and composer. The `CometChatThread` widget handles the complete thread UI.
+### Navigate to the Thread Screen
-_File: [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart)_
+In V6, compose the thread screen using individual widgets:
+
+
```dart
-class CometChatThread extends StatefulWidget {
- const CometChatThread({
- this.user,
- this.group,
- required this.message,
- super.key,
- });
-
+class ThreadScreen extends StatelessWidget {
+ final BaseMessage parentMessage;
final User? user;
final Group? group;
- final BaseMessage message;
-
- @override
- State createState() => _CometChatThreadState();
-}
-```
-
----
-
-### 3. Thread Header and Message List
-
-Display the parent message context and threaded replies using `CometChatThreadedHeader` and `CometChatMessageList` with `parentMessageId`.
-
-_File: [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart)_
-
-```dart
-Column(
- children: [
- CometChatThreadedHeader(
- parentMessage: widget.message,
- loggedInUser: CometChatUIKit.loggedInUser!,
- ),
- Expanded(
- child: CometChatMessageList(
- user: widget.user,
- group: widget.group,
- messagesRequestBuilder: MessagesRequestBuilder()
- ..parentMessageId = widget.message.id,
- ),
- ),
- ],
-)
-```
----
-
-### 4. Thread Composer
-
-Add the message composer with `parentMessageId` to send replies in the thread context.
-
-_File: [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart)_
-
-```dart
-CometChatMessageComposer(
- user: widget.user,
- group: widget.group,
- parentMessageId: widget.message.id,
-)
-```
-
----
-
-### 5. Blocked User Handling
-
-When a user is blocked, replace the composer with an unblock prompt.
+ const ThreadScreen({required this.parentMessage, this.user, this.group, super.key});
-_File: [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart)_
-
-```dart
-Widget getComposer(CometChatThreadController controller) {
- if (controller.user?.blockedByMe == true) {
- return Container(
- padding: EdgeInsets.symmetric(vertical: 8, horizontal: 20),
- child: Column(
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ appBar: AppBar(title: Text("Thread")),
+ body: Column(
children: [
- Text(Translations.of(context).cantSendMessageBlockedUser),
- ElevatedButton(
- onPressed: () => controller.unBlockUser(),
- child: Text(Translations.of(context).unBlock),
+ CometChatThreadedHeader(message: parentMessage),
+ Expanded(
+ child: CometChatMessageList(
+ user: user,
+ group: group,
+ parentMessageId: parentMessage.id,
+ ),
+ ),
+ CometChatMessageComposer(
+ user: user,
+ group: group,
+ parentMessageId: parentMessage.id,
),
],
),
);
}
- return CometChatMessageComposer(
- user: widget.user,
- group: widget.group,
- parentMessageId: widget.message.id,
- );
}
```
+
+
----
+### Send a Threaded Message
+
+
+
+```dart
+CometChatMessageComposer(
+ user: user,
+ parentMessageId: parentMessage.id,
+)
+```
+
+
-## Feature Matrix
+## Customization Options
-| Feature | Component / Method | File |
-|:---|:---|:---|
-| Show thread option | `onThreadRepliesClick` | [messages.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/messages/messages.dart) |
-| Thread screen | `CometChatThread` | [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart) |
-| Thread header | `CometChatThreadedHeader` | [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart) |
-| Display thread msgs | `CometChatMessageList` | [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart) |
-| Compose reply | `CometChatMessageComposer` | [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart) |
-| Thread controller | `CometChatThreadController` | [cometchat_thread_controller.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread_controller.dart) |
+- Header Styling: Customize `CometChatThreadedHeader` appearance
+- Composer Placeholder: Change placeholder text based on thread context
+- Empty State: Display "No replies yet" when thread is empty
----
+## Summary
-## Next Steps
-
-
-
- Render real-time message threads.
-
-
- Customize the thread header component.
-
-
- Browse all feature and formatter guides.
-
-
- Full working sample application on GitHub.
-
-
+| Feature | Component / Method |
+|:---|:---|
+| Show thread option | `CometChatMessageList.onThreadRepliesClick` |
+| Thread view screen | Custom `ThreadScreen` widget |
+| Display threaded messages | `CometChatMessageList(parentMessageId: ...)` |
+| Send threaded message | `CometChatMessageComposer(parentMessageId: ...)` |
+| Thread header | `CometChatThreadedHeader(message: ...)` |
diff --git a/ui-kit/flutter/incoming-call.mdx b/ui-kit/flutter/incoming-call.mdx
index 7891817c9..9e37b6836 100644
--- a/ui-kit/flutter/incoming-call.mdx
+++ b/ui-kit/flutter/incoming-call.mdx
@@ -1,428 +1,238 @@
---
title: "Incoming Call"
-description: "Widget that serves as a visual representation when the user receives an incoming call, providing options to answer or decline."
+description: "Handle incoming CometChat Flutter UI Kit audio and video calls with full-screen caller info, accept, reject, and navigation setup."
---
-
-```json
-{
- "component": "CometChatIncomingCall",
- "package": "cometchat_calls_uikit",
- "import": "import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';",
- "description": "Widget that serves as a visual representation when the user receives an incoming call, providing options to answer or decline.",
- "props": {
- "data": {
- "call": { "type": "Call", "required": true },
- "user": { "type": "User?", "default": "null" }
- },
- "callbacks": {
- "onDecline": "Function(BuildContext, Call)?",
- "onAccept": "Function(BuildContext, Call)?",
- "onError": "OnError?"
- },
- "viewSlots": {
- "titleView": "Widget? Function(BuildContext context, Call call)?",
- "subTitleView": "Widget? Function(BuildContext context, Call call)?",
- "leadingView": "Widget? Function(BuildContext context, Call call)?",
- "itemView": "Widget? Function(BuildContext context, Call call)?",
- "trailingView": "Widget? Function(BuildContext context, Call call)?"
- },
- "style": {
- "incomingCallStyle": "CometChatIncomingCallStyle?"
- },
- "layout": {
- "height": { "type": "double?", "default": "null" },
- "width": { "type": "double?", "default": "null" }
- },
- "icons": {
- "callIcon": "Widget?"
- },
- "text": {
- "declineButtonText": "String?",
- "acceptButtonText": "String?"
- },
- "sound": {
- "disableSoundForCalls": { "type": "bool?", "default": "false" },
- "customSoundForCalls": "String?",
- "customSoundForCallsPackage": "String?"
- },
- "configuration": {
- "callSettingsBuilder": "CallSettingsBuilder?"
- }
- }
-}
-```
-
-
-## Overview
-The `CometChatIncomingCall` is a [Widget](/ui-kit/flutter/components-overview#components) that serves as a visual representation when the user receives an incoming call, such as a voice call or video call, providing options to answer or decline the call.
+`CometChatIncomingCall` displays a full-screen overlay when an incoming call is received, showing caller info with accept and reject buttons.
-
- 
-
+---
-***
+## Where It Fits
-## Usage
+Typically triggered automatically when `CallNavigationContext.navigatorKey` is set in your `MaterialApp`.
-### Integration
+
+
+```dart
+MaterialApp(navigatorKey: CallNavigationContext.navigatorKey, home: YourHomeScreen())
+```
+
+
-`CometChatIncomingCall` being a custom widget, offers versatility in its integration. It can be seamlessly launched via button clicks or any user-triggered action, enhancing the overall user experience and facilitating smoother interactions within the application.
+---
-You can launch `CometChatIncomingCall` directly using `Navigator.push`, or you can define it as a widget within the `build` method of your `State` class.
+## Quick Start
-##### 1. Using Navigator to Launch `CometChatIncomingCall`
+### Automatic (Recommended)
```dart
-Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatIncomingCall(user: user, call: callObject))); // User object and Call object is required to launch the incoming call widget.
+MaterialApp(navigatorKey: CallNavigationContext.navigatorKey, home: YourHomeScreen())
```
-
-
-##### 2. Embedding `CometChatIncomingCall` as a Widget in the build Method
+### Manual Launch
```dart
-import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';
-import 'package:flutter/material.dart';
-
-class IncomingCallExample extends StatefulWidget {
- const IncomingCallExample({super.key});
-
- @override
- State createState() => _IncomingCallExampleState();
-}
-
-class _IncomingCallExampleState extends State {
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: SafeArea(
- child: CometChatIncomingCall(
- user: user, // User Object
- call: callObject
- ), // User object and Call object is required to launch the incoming call widget.
- ),
- );
- }
-}
+Navigator.push(context, MaterialPageRoute(
+ builder: (context) => CometChatIncomingCall(user: user, call: callObject),
+));
```
-
-
-***
-
-### Actions
+Prerequisites: CometChat SDK initialized, Calls UIKit added, `callingExtension` set. See [Call Features](/ui-kit/flutter/call-features).
-[Actions](/ui-kit/flutter/components-overview#actions) dictate how a widget functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the widget to fit your specific needs.
+---
-##### 1. onAccept
+## Actions
-The `onAccept` action is typically triggered when the user clicks on the accept button, initiating a predefined action. However, by implementing the following code snippet, you can easily customize or override this default behavior to suit your specific requirements.
+#### `onAccept`
```dart
-CometChatIncomingCall(
- user: user, // User Object
- call: callObject, // Call Object
- onAccept: (BuildContext context, Call call) {
- // TODO("Not yet implemented")
- },
+CometChatIncomingCall(user: user, call: callObject,
+ onAccept: (BuildContext context, Call call) { /* Custom accept */ },
)
```
-
-
-***
-
-##### 2. onDecline
-
-The `onDecline` action is typically triggered when the user clicks on the reject button, initiating a predefined action. However, by implementing the following code snippet, you can easily customize or override this default behavior to suit your specific requirements.
+#### `onDecline`
```dart
-CometChatIncomingCall(
- user: user, // User Object
- call: callObject, // Call Object
- onDecline: (BuildContext context, Call call) {
- // TODO("Not yet implemented")
- },
+CometChatIncomingCall(user: user, call: callObject,
+ onDecline: (BuildContext context, Call call) { /* Custom decline */ },
)
```
-
-
-***
-
-##### 3. onError
-
-You can customize this behavior by using the provided code snippet to override the `onError` and improve error handling.
+#### `onError`
```dart
-CometChatIncomingCall(
- user: user, // User Object
- call: callObject, // Call Object
- onError: (e) {
- // TODO("Not yet implemented")
- },
+CometChatIncomingCall(user: user, call: callObject,
+ onError: (e) { debugPrint("Error: ${e.message}"); },
)
```
-
-
-***
-
-### Filters
-**Filters** allow you to customize the data displayed in a list within a Widget. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK.
-The `CometChatIncomingCall` widget does not have any exposed filters.
-
-***
-
-### Events
-
-[Events](/ui-kit/flutter/components-overview#events) are emitted by a `Widget`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.
-
-The `CometChatIncomingCall` widget does not have any exposed events.
-
-***
+---
-## Customization
+## Functionality
-To fit your app's design requirements, you can customize the appearance of the conversation widget. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.
+| Property | Type | Description |
+|---|---|---|
+| `user` | `User?` | Caller user object |
+| `call` | `Call` | Call object (required) |
+| `callSettingsBuilder` | `CallSettingsBuilder?` | Configure call settings |
+| `height` / `width` | `double?` | Widget dimensions |
+| `callIcon` | `Widget?` | Custom call type icon |
+| `acceptButtonText` | `String?` | Custom accept button text |
+| `declineButtonText` | `String?` | Custom decline button text |
+| `disableSoundForCalls` | `bool?` | Disable incoming call sound |
+| `customSoundForCalls` | `String?` | Custom sound asset path |
-### Style
+---
-You can customize the appearance of the `CometChatIncomingCall` Widget by applying the `CometChatIncomingCallStyle` to it using the following code snippet.
+## Custom View Slots
-Here is the complete example for reference:
+### Item View
```dart
-CometChatIncomingCall(
- user: user, // User Object
- call: callObject, // Call Object
- incomingCallStyle: CometChatIncomingCallStyle(
- backgroundColor: Color(0xFFEDEAFA),
- avatarStyle: CometChatAvatarStyle(
- backgroundColor: Color(0xFFAA9EE8),
- borderRadius: BorderRadius.circular(7.5),
- ),
- acceptButtonColor: Color(0xFF6852D6),
- declineButtonColor: Colors.white,
- declineTextColor: Color(0xFFF44649),
- callIconColor: Color(0xFF6852D6),
- ),
+CometChatIncomingCall(user: user, call: callObject,
+ itemView: (context, call) { return Container(); },
)
```
-
-
-
- 
-
-
-***
-
-### Functionality
-
-These are a set of small functional customizations that allow you to fine-tune the overall experience of the widget. With these, you can change text, set custom icons, and toggle the visibility of UI elements.
-
-**Example**
-
-In this example, we're enhancing the interface by customizing the accept and decline button icons. By setting custom icons for both the accept and decline buttons, users can enjoy a more visually appealing and personalized experience.
-
-This level of customization allows developers to tailor the user interface to match the overall theme and branding of their application.
-
-Here is the complete example for reference:
+### Leading View
```dart
-CometChatIncomingCall(
- user: user, // User Object
- call: callObject, // Call Object
- disableSoundForCalls: true,
- declineButtonText: "Decline",
- acceptButtonText: "Accept"
+CometChatIncomingCall(user: user, call: callObject,
+ leadingView: (context, call) {
+ return CircleAvatar(radius: 40, backgroundImage: NetworkImage(call.sender?.avatar ?? ""));
+ },
)
```
-
-
-
- 
-
-
-Below is a list of customizations along with corresponding code snippets
-
-| **Property** | Description | Code |
-| ----------------------------------- | ------------------------------------------------- | -------------------------------------- |
-| **Accept Button Text** | Sets the text for the accept button. | `acceptButtonText: String?` |
-| **Custom Sound For Calls** | Sets the custom sound for incoming calls. | `customSoundForCalls: String?` |
-| **Call Icon** | Sets the Call Icon. | `callIcon: Widget?` |
-| **Decline Button Icon Url Package** | Sets the package for the decline button icon URL. | `declineButtonIconUrlPackage: String?` |
-| **Decline Button Text** | Sets the text for the decline button. | `declineButtonText: String?` |
-| **Disable Sound For Calls** | Disables sound for incoming calls. | `disableSoundForCalls: bool?` |
-
-***
-
-### Advanced
-
-For advanced-level customization, you can set custom widget to the widget. This lets you tailor each aspect of the widget to fit your exact needs and application aesthetics. You can create and define your widget, layouts, and UI elements and then incorporate those into the widget.
-
-***
-
-### itemView
-
-Allows setting a custom item view to be rendered.
-
-Use Cases:
-
-* Customize the call card UI for incoming calls.
-* Display additional user details (e.g., caller ID, location).
-* Integrate custom animations for call alerts.
+### Title View
```dart
-CometChatIncomingCall(
- itemView: (context, call) {
- // return itemView
- },
+CometChatIncomingCall(user: user, call: callObject,
+ titleView: (context, call) {
+ return Text(call.sender?.name ?? "Unknown",
+ style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white));
+ },
)
```
-
-
-***
-
-### leadingView
-
-Customizes the leading section of the component, usually the caller’s avatar or profile picture.
-
-Use Cases:
-
-* Display a profile picture with call status effects.
-* Show a custom ringing animation around the avatar.
-* Replace the avatar with a caller ID card.
+### Subtitle View
```dart
-CometChatIncomingCall(
- leadingView: (context, call) {
- // return leadingView
- },
+CometChatIncomingCall(user: user, call: callObject,
+ subTitleView: (context, call) {
+ final type = call.type == CometChatConstants.CALL_TYPE_VIDEO ? "Video" : "Audio";
+ return Text("Incoming $type Call", style: TextStyle(fontSize: 14, color: Colors.white70));
+ },
)
```
-
-
-***
-
-### titleView
-
-Allows setting a custom title view, typically used for the caller’s name or call type.
-
-Use Cases:
-
-* Display the caller’s full name with a verified badge.
-* Indicate the call type (Voice Call, Video Call).
-* Show real-time status ("Ringing...", "Call from Work Contact", etc.).
+### Trailing View
```dart
-CometChatIncomingCall(
- titleView: (context, call) {
- // return titleView
- },
+CometChatIncomingCall(user: user, call: callObject,
+ trailingView: (context, call) {
+ return Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [
+ ElevatedButton(onPressed: () {}, child: Text("Reject"),
+ style: ElevatedButton.styleFrom(backgroundColor: Colors.red)),
+ ElevatedButton(onPressed: () {}, child: Text("Accept"),
+ style: ElevatedButton.styleFrom(backgroundColor: Colors.green)),
+ ]);
+ },
)
```
-
-
-***
-
-### subtitleView
-
-Enables customizing the subtitle view, typically used for additional call details.
-
-Use Cases:
+---
-* Display call duration if available.
-* Show network strength indicators.
-* Include a custom message like "Connecting...".
+## Style
```dart
-CometChatIncomingCall(
- subTitleView: (context, call) {
- // return subTitleView
- },
+CometChatIncomingCall(user: user, call: callObject,
+ incomingCallStyle: CometChatIncomingCallStyle(
+ backgroundColor: Color(0xFFEDEAFA),
+ avatarStyle: CometChatAvatarStyle(backgroundColor: Color(0xFFAA9EE8), borderRadius: BorderRadius.circular(7.5)),
+ acceptButtonColor: Color(0xFF6852D6),
+ declineButtonColor: Colors.white,
+ declineTextColor: Color(0xFFF44649),
+ callIconColor: Color(0xFF6852D6),
+ ),
)
```
-
-
-***
+| Property | Description |
+|---|---|
+| `backgroundColor` | Background color |
+| `avatarStyle` | Caller avatar appearance |
+| `acceptButtonColor` | Accept button background |
+| `declineButtonColor` | Decline button background |
+| `declineTextColor` | Decline button text color |
+| `callIconColor` | Call type icon color |
-### trailingView
-
-Customizes the trailing section for actions or additional call-related UI elements.
+---
-Use Cases:
+## Key V6 Differences
-* Add custom accept/reject buttons.
-* Show a mute button before answering.
-* Display a text response option (e.g., "Can’t talk now").
+| Aspect | V5 | V6 |
+|---|---|---|
+| Subtitle | Static `String?` | Dynamic `Widget? Function(BuildContext, Call)?` |
+| Decline icon | URL-based `String?` | Widget-based |
+| Custom views | Limited | Full `titleView`, `subTitleView`, `leadingView`, `trailingView`, `itemView` |
+| State management | GetX controller | BLoC (`IncomingCallBloc`) |
+| Removed | `theme`, `avatarStyle`, `cardStyle`, `ongoingCallConfiguration` | Integrated into main style |
-
-
-```dart
-CometChatIncomingCall(
- titleView: (context, call) {
- // return titleView
- },
-)
-```
-
-
+---
-
+## Next Steps
-***
+
+ Manage outgoing calls
+ Add call buttons
+ Complete calling setup
+ Styling reference
+
diff --git a/ui-kit/flutter/localize.mdx b/ui-kit/flutter/localize.mdx
index 5ae38bc1a..8c4b3a579 100644
--- a/ui-kit/flutter/localize.mdx
+++ b/ui-kit/flutter/localize.mdx
@@ -1,184 +1,167 @@
---
-title: "Localization"
-sidebarTitle: "Localize"
-description: "Configure multi-language localization and custom translations in CometChat Flutter UI Kit."
+title: "Localize"
+description: "Localize CometChat Flutter UI Kit with supported languages, device language detection, translation files, and MaterialApp setup."
---
-
+## Overview
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_uikit_shared` |
-| Import | `import 'package:cometchat_uikit_shared/l10n/translations.dart';` |
-| Set language | Add `Locale('fr')` to `supportedLocales` |
-| Delegates | `Translations.delegate`, `GlobalMaterialLocalizations.delegate`, etc. |
-| Supported | 18 languages: ar, de, en, en-GB, es, fr, hi, hu, ja, ko, lt, ms, nl, pt, ru, sv, tr, zh |
-| Source | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/shared_uikit/lib/l10n) |
+CometChat V6 UI Kit provides language localization to adapt to the language of a specific country or region. The `CometChatLocalize` class allows you to detect the language of your users based on their device settings and set the language accordingly.
-
+The UI Kit supports 19 languages:
-`Translations` manages multi-language localization for the UI Kit.
+* Arabic (ar), German (de), English (en, en-GB), Spanish (es), French (fr), Hindi (hi), Hungarian (hu), Japanese (ja), Korean (ko), Lithuanian (lt), Malay (ms), Dutch (nl), Portuguese (pt), Russian (ru), Swedish (sv), Turkish (tr), Chinese (zh, zh-TW)
----
-
-## Supported Languages
-
-| Language | Code |
-| --- | --- |
-| Arabic | `ar` |
-| German | `de` |
-| English | `en` |
-| English (UK) | `en-GB` |
-| Spanish | `es` |
-| French | `fr` |
-| Hindi | `hi` |
-| Hungarian | `hu` |
-| Japanese | `ja` |
-| Korean | `ko` |
-| Lithuanian | `lt` |
-| Malay | `ms` |
-| Dutch | `nl` |
-| Portuguese | `pt` |
-| Russian | `ru` |
-| Swedish | `sv` |
-| Turkish | `tr` |
-| Chinese | `zh` |
-
----
+## Usage
-## Setup
+### Integration
-Add the dependency in `pubspec.yaml`:
+Add the following dependency in `pubspec.yaml`:
+
+
```yaml
flutter_localizations:
sdk: flutter
```
+
+
-Configure `MaterialApp`:
+***
+Update MaterialApp Localizations Delegates:
+
+
+
```dart
-import 'package:cometchat_uikit_shared/l10n/translations.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:cometchat_uikit_shared/l10n/translations.dart' as cc;
+import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
-MaterialApp(
- supportedLocales: const [
- Locale('en'),
- Locale('fr'),
- Locale('es'),
- Locale('de'),
- // Add more as needed
- ],
- localizationsDelegates: Translations.localizationsDelegates,
- home: MyApp(),
-)
+class MyApp extends StatelessWidget {
+ const MyApp({super.key});
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ supportedLocales: const [
+ Locale('en'), Locale('en', 'GB'), Locale('ar'), Locale('de'),
+ Locale('es'), Locale('fr'), Locale('hi'), Locale('hu'),
+ Locale('ja'), Locale('ko'), Locale('lt'), Locale('ms'),
+ Locale('nl'), Locale('pt'), Locale('ru'), Locale('sv'),
+ Locale('tr'), Locale('zh'), Locale('zh', 'TW'),
+ ],
+ localizationsDelegates: const [
+ cc.Translations.delegate,
+ GlobalMaterialLocalizations.delegate,
+ GlobalWidgetsLocalizations.delegate,
+ GlobalCupertinoLocalizations.delegate,
+ ],
+ theme: ThemeData(
+ appBarTheme: AppBarTheme(scrolledUnderElevation: 0.0),
+ ),
+ title: 'CometChat Flutter App',
+ home: YourHomeScreen(),
+ debugShowCheckedModeBanner: false,
+ );
+ }
+}
```
+
+
----
+***
-## Get Translated Strings
+You can also translate specific strings:
+
+
```dart
String translatedString = Translations.of(context).users;
Text(translatedString);
```
+
+
----
-
-## Custom Translations
+### Customizing UI Kit Translations for a Specific Language
-Override default translations by extending the language class:
+Override a specific language's default translations by creating a custom localization class:
+
+
```dart
-import 'package:cometchat_uikit_shared/l10n/translations.dart';
+import 'dart:async';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart' as cc;
import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
class CustomEN extends TranslationsEn {
- static const delegate = _CustomLocalizationsDelegate();
+ static const delegate = _CustomCometChatLocalizationsDelegate();
@override
- String get chats => "My Chats";
+ String get chats => "Overridden Chat";
@override
- String get calls => "My Calls";
+ String get calls => "Overridden Call";
}
-class _CustomLocalizationsDelegate extends LocalizationsDelegate {
- const _CustomLocalizationsDelegate();
+class _CustomCometChatLocalizationsDelegate
+ extends LocalizationsDelegate {
+ const _CustomCometChatLocalizationsDelegate();
@override
bool isSupported(Locale locale) => locale.languageCode == 'en';
@override
- Future load(Locale locale) => SynchronousFuture(CustomEN());
+ Future load(Locale locale) =>
+ SynchronousFuture(CustomEN());
@override
- bool shouldReload(_CustomLocalizationsDelegate old) => false;
+ bool shouldReload(_CustomCometChatLocalizationsDelegate old) => false;
}
```
+
+
-Then add to `MaterialApp`:
+Then add `CustomEN.delegate` to your `localizationsDelegates` list before `cc.Translations.delegate`.
-```dart
-localizationsDelegates: const [
- CustomEN.delegate, // Custom override first
- ...Translations.localizationsDelegates,
-],
-```
+### Adding New Language Support
----
-
-## Add New Language
-
-Create a custom translation class for unsupported languages:
+Extend the UI Kit with a new language by creating a custom translation class:
+
+
```dart
-import 'package:cometchat_uikit_shared/l10n/translations.dart';
-import 'package:flutter/foundation.dart';
-
-class TeluguTranslations extends Translations {
- TeluguTranslations([super.locale = "te"]);
- static const delegate = _TeluguDelegate();
+class TeluguLocalization extends cc.Translations {
+ TeluguLocalization([super.locale = "te"]);
+ static const delegate = _TeluguLocalizationsDelegate();
@override
String get chats => "సందేశాలు";
@override
String get calls => "ఫోన్ కాల్స్";
-
- // Override all required getters from Translations...
+ // Override all relevant strings for full localization
}
-class _TeluguDelegate extends LocalizationsDelegate {
- const _TeluguDelegate();
+class _TeluguLocalizationsDelegate
+ extends LocalizationsDelegate {
+ const _TeluguLocalizationsDelegate();
@override
bool isSupported(Locale locale) => locale.languageCode == 'te';
@override
- Future load(Locale locale) => SynchronousFuture(TeluguTranslations());
+ Future load(Locale locale) =>
+ SynchronousFuture(TeluguLocalization());
@override
- bool shouldReload(_TeluguDelegate old) => false;
+ bool shouldReload(_TeluguLocalizationsDelegate old) => false;
}
```
+
+
-Then add to `MaterialApp`:
-
-```dart
-localizationsDelegates: const [
- TeluguTranslations.delegate, // Custom language first
- ...Translations.localizationsDelegates,
-],
-supportedLocales: const [
- Locale('te'), // Telugu
- Locale('en'),
- // Other locales...
-],
-```
-
----
-
-## Date/Time Formatting
+### DateTimeFormatter
-Customize date/time display globally via `DateTimeFormatterCallback`. See [CometChatUIKit Methods](/ui-kit/flutter/methods#dateformatter) for details.
+By providing a custom `DateTimeFormatterCallback`, you can globally configure how time and date values are displayed across all UI components. For details, refer to the [CometChatUIKit class](/ui-kit/flutter/methods#dateformatter).
diff --git a/ui-kit/flutter/mentions-formatter-guide.mdx b/ui-kit/flutter/mentions-formatter-guide.mdx
index 3db41d36f..a4a577be6 100644
--- a/ui-kit/flutter/mentions-formatter-guide.mdx
+++ b/ui-kit/flutter/mentions-formatter-guide.mdx
@@ -1,357 +1,148 @@
---
title: "Mentions Formatter"
-description: "Add @mentions with user suggestions and styled tokens in CometChat Flutter UI Kit."
+description: "Format @mentions in CometChat Flutter UI Kit message lists, composers, and conversations with custom styles and tap handling."
---
-
-
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_chat_uikit` |
-| Key class | `CometChatMentionsFormatter` (extends `CometChatTextFormatter`) |
-| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login(uid)` |
-| Purpose | Add @mentions with user suggestions, styled tokens, and click handling |
-| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
-| Related | [Custom Text Formatter](/ui-kit/flutter/custom-text-formatter-guide) · [Custom Mentions Formatter](/ui-kit/flutter/custom-mentions-formatter-guide) · [All Guides](/ui-kit/flutter/guide-overview) |
-
-
-
## Overview
-The `CometChatMentionsFormatter` class is a part of the CometChat UI Kit, a ready-to-use chat UI widget library for integrating CometChat into your Android applications. This class provides functionality to format mentions within text messages displayed in the chat interface. Mentions allow users to reference other users within a conversation, providing a convenient way to direct messages or involve specific participants.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-## Features
-
-* **Mention Formatting**: Automatically formats mentions within text messages based on provided styles and settings.
-* **Customizable Styles**: Allows customization of text styles for mentions, including colors, fonts, and background colors.
-* **User and Group Member Mentions**: Supports mentions for both individual users and group members, providing flexibility in communication scenarios.
-* **Mention List Generation**: Generates a list of suggested mentions based on user input, facilitating easy selection of recipients during message composition.
-* **Mention Click Handling**: Provides a listener interface for handling click events on mentions, enabling custom actions to be performed when a mention is tapped by the user.
+The `CometChatMentionsFormatter` class formats mentions within text messages displayed in the chat interface. For the base `CometChatTextFormatter` API, see [Text Formatters](/ui-kit/flutter/customization-text-formatters).
## Usage
-To integrate the `CometChatMentionsFormatter` class into your application:
-
-1. **Initialization**: Create an instance of the `CometChatMentionsFormatter` class and configure it with desired settings, such as mention text styles and limit settings.
-
-2. **Set Mention Listeners**: Set listeners for handling mention click events (`setOnMentionClick`).
-
-3. **Format Messages**: Use the `prepareLeftMessageBubbleSpan`, `prepareRightMessageBubbleSpan`, `prepareComposerSpan`, and `prepareConversationSpan` methods to format text messages with mentions appropriately for display in the chat interface.
-
-4. **Customization**: Customize the appearance and behavior of mentions by adjusting the text styles, colors, and other formatting properties as needed.
-
-Below is an example demonstrating how to use the `CometChatMentionsFormatter` class in widgets such as [CometChatConversations](/ui-kit/flutter/conversations), [CometChatMessageList](/ui-kit/flutter/message-list), [CometChatMessageComposer](/ui-kit/flutter/message-composer).
+Pass `CometChatMentionsFormatter` to the `textFormatters` property of widgets like [CometChatConversations](/ui-kit/flutter/conversations), [CometChatMessageList](/ui-kit/flutter/message-list), or [CometChatMessageComposer](/ui-kit/flutter/message-composer).
```dart
textFormatters: [
- CometChatMentionsFormatter(
- messageBubbleTextStyle: (theme, alignment,{forConversation = false}) =>
- TextStyle(
- color: alignment==BubbleAlignment.left? Colors.orange : Colors.pink,
- fontSize: 14,
- fontWeight: FontWeight.bold
- ),
- )
+ CometChatMentionsFormatter(
+ messageBubbleTextStyle: (theme, alignment, {forConversation = false}) =>
+ TextStyle(
+ color: alignment == BubbleAlignment.left ? Colors.orange : Colors.pink,
+ fontSize: 14,
+ fontWeight: FontWeight.bold,
+ ),
+ ),
]
```
-
-
***
## Actions
-[Actions](/ui-kit/flutter/components-overview#actions) dictate how a widget functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the widget to fit your specific needs.
-
##### onMentionTap
-Setting a listener for mention-click events in Message Bubbles enhances interactivity within the chat. This listener is activated when a mention is clicked, returning the corresponding user object. This feature transforms mentions into interactive links, enabling more in-depth and contextual engagement with the user associated with the clicked mention.
+Setting a listener for mention-click events in Message Bubbles. This listener is activated when a mention is clicked, returning the corresponding user object.
```dart
-CometChatMessages(
+CometChatMessageList(
user: user,
- messageListConfiguration: MessageListConfiguration(
- textFormatters: [
- CometChatMentionsFormatter(
- onMentionTap: (mention, mentionedUser, {message}) {
- final snackBar = SnackBar(
- content: const Text('Tap on Mentioned User', style: TextStyle(color: Colors.lightBlueAccent)),
- action: SnackBarAction(
- label: 'Undo',
- onPressed: () {
- // TODO("Not yet implemented")
- },
- ),
- );
- ScaffoldMessenger.of(context).showSnackBar(snackBar);
- },
- messageBubbleTextStyle: (theme, alignment,{forConversation = false}) => TextStyle(
- color: alignment==BubbleAlignment.left? Colors.orange : Colors.greenAccent,
- fontSize: 14,
- fontWeight: FontWeight.bold
- ),
- )
- ]
- ),
+ textFormatters: [
+ CometChatMentionsFormatter(
+ onMentionTap: (mention, mentionedUser, {message}) {
+ ScaffoldMessenger.of(context).showSnackBar(
+ SnackBar(content: Text('Tapped on ${mentionedUser.name}')),
+ );
+ },
+ messageBubbleTextStyle: (theme, alignment, {forConversation = false}) =>
+ TextStyle(
+ color: alignment == BubbleAlignment.left ? Colors.orange : Colors.greenAccent,
+ fontSize: 14,
+ fontWeight: FontWeight.bold,
+ ),
+ ),
+ ],
)
```
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
***
## Customization
-| **Property** | **Description** | **Code** |
-| ------------------------------ | -------------------------------------------------------------- | -------------------------------------------------------- |
-| **trackingCharacter** | The character that triggers the mention search. | `String? trackingCharacter` |
-| **pattern** | The regex pattern to identify mentions. | `RegExp? pattern` |
-| **showLoadingIndicator** | Whether to show a loading indicator during mention search. | `bool? showLoadingIndicator` |
-| **onSearch** | Callback function to perform search when mention is triggered. | `void Function(String)? onSearch` |
-| **onError** | Callback function to handle errors during mention search. | `void Function(String)? onError` |
-| **message** | The message in which mentions are to be formatted. | `String? message` |
-| **messageBubbleTextStyle** | The text style for the message bubble. | `TextStyle? messageBubbleTextStyle` |
-| **messageInputTextStyle** | The text style for the message input. | `TextStyle? messageInputTextStyle` |
-| **composerId** | The unique identifier for the composer. | `String? composerId` |
-| **suggestionListEventSink** | The event sink for the suggestion list. | `EventSink>? suggestionListEventSink` |
-| **previousTextEventSink** | The event sink for the previous text before mention. | `EventSink? previousTextEventSink` |
-| **user** | The user to be mentioned. | `User? user` |
-| **group** | The group in which mentions are to be formatted. | `Group? group` |
-| **groupMembersRequestBuilder** | The request builder for fetching group members to mention. | `GroupMembersRequestBuilder? groupMembersRequestBuilder` |
-| **usersRequestBuilder** | The request builder for fetching users to mention. | `UsersRequestBuilder? usersRequestBuilder` |
-| **mentionsType** | The type of mentions (e.g., user, group). | `MentionsType? mentionsType` |
-| **onMentionTap** | Callback function to handle mention tap actions. | `void Function(User)? onMentionTap` |
-| **visibleIn** | Defines where the mentions are visible. | `Set? visibleIn` |
-| **style** | Style configuration for customizing mention appearance. | `CometChatMentionsStyle? style` |
-| **disableMentions** | Disables mentions in the composer (default: false). | `bool disableMentions` |
-| **disableMentionAll** | Controls whether @all mention is enabled (default: false). | `bool disableMentionAll` |
-| **mentionAllLabel** | Custom label to display for @all mention. | `String? mentionAllLabel` |
-| **mentionAllLabelId** | Custom ID for @all mention (default: "all"). | `String? mentionAllLabelId` |
+| Property | Description | Code |
+|---|---|---|
+| trackingCharacter | Character that triggers mention search | `String? trackingCharacter` |
+| pattern | Regex pattern to identify mentions | `RegExp? pattern` |
+| messageBubbleTextStyle | Text style for message bubble | `TextStyle? messageBubbleTextStyle` |
+| messageInputTextStyle | Text style for message input | `TextStyle? messageInputTextStyle` |
+| onMentionTap | Callback for mention tap actions | `void Function(User)? onMentionTap` |
+| groupMembersRequestBuilder | Request builder for group members | `GroupMembersRequestBuilder?` |
+| usersRequestBuilder | Request builder for users | `UsersRequestBuilder?` |
***
-## Advance
-
-For advanced-level customization, you can set the style of the Mentions formatters. This lets you tailor each aspect of the widget to fit your exact needs and application aesthetics. You can create and define your formatters style.
-
-### Custom Mentions Formatter
-
-For deeper customization — such as filtering who appears in the suggestion list, transforming suggestions before they reach the UI, or handling mention taps with custom logic — you can extend `CometChatMentionsFormatter` and override its behavior. See the [Custom Mentions Formatter](/ui-kit/flutter/custom-mentions-formatter-guide) guide for a full walkthrough.
-
-### @all Mention Feature
-
-The `CometChatMentionsFormatter` supports mentioning all members in a group using the @all feature. When enabled, users can type `@` followed by "all" (or a custom label) to notify everyone in the group.
-
-
-
-```dart
-CometChatMessages(
- group: group,
- messageComposerConfiguration: MessageComposerConfiguration(
- textFormatters: [
- CometChatMentionsFormatter(
- disableMentionAll: false, // Enable @all mention (default)
- mentionAllLabel: "everyone", // Custom label (optional)
- mentionAllLabelId: "all", // Custom ID (optional)
- )
- ]
- ),
-)
-```
-
-
-
-
-
-To disable the @all mention feature:
-
-
-
-```dart
-CometChatMentionsFormatter(
- disableMentionAll: true, // Disable @all mention
-)
-```
-
-
-
-
-
-***
+## Advanced
### Composer Mention Text Style
-Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source. To configure the existing Mentions look and feel for [CometChatMessageComposer](/ui-kit/flutter/message-composer) refer to the below code snippet
-
```dart
-CometChatMessages(
- user: user,
- messageComposerConfiguration: MessageComposerConfiguration(
- textFormatters: [
- CometChatMentionsFormatter(
- messageInputTextStyle: (theme) {
- return const TextStyle(
- color: Colors.lightBlueAccent,
- fontSize: 14,
- fontWeight: FontWeight.bold
- );
- },
- )
- ]
- )
+CometChatMessageComposer(
+ user: user,
+ textFormatters: [
+ CometChatMentionsFormatter(
+ messageInputTextStyle: (theme) {
+ return const TextStyle(
+ color: Colors.lightBlueAccent,
+ fontSize: 14,
+ fontWeight: FontWeight.bold,
+ );
+ },
+ ),
+ ],
)
```
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-***
-
### Message Bubble Mention Text Style
-Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source. To configure the existing Mentions look and feel for [CometChatMessageList](/ui-kit/flutter/message-list)
-
```dart
-CometChatMessages(
+CometChatMessageList(
user: user,
- messageListConfiguration: MessageListConfiguration(
- textFormatters: [
- CometChatMentionsFormatter(
- messageBubbleTextStyle: (theme, alignment,{forConversation = false}) => TextStyle(
- color: alignment==BubbleAlignment.left? Colors.orange : Colors.greenAccent,
- fontSize: 14,
- fontWeight: FontWeight.bold
- ),
- )
- ]
- ),
+ textFormatters: [
+ CometChatMentionsFormatter(
+ messageBubbleTextStyle: (theme, alignment, {forConversation = false}) =>
+ TextStyle(
+ color: alignment == BubbleAlignment.left ? Colors.orange : Colors.greenAccent,
+ fontSize: 14,
+ fontWeight: FontWeight.bold,
+ ),
+ ),
+ ],
)
```
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-***
-
### Conversations Mention Text Style
-Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source. To configure the existing Mentions look and feel for [CometChatConversations](/ui-kit/flutter/conversations)
-
```dart
CometChatConversations(
textFormatters: [
CometChatMentionsFormatter(
- messageBubbleTextStyle: (theme, alignment,{forConversation = false}) =>
- const TextStyle(
- color: Colors.lightBlueAccent,
- fontSize: 14,
- fontWeight: FontWeight.bold
- ),
- )
+ messageBubbleTextStyle: (theme, alignment, {forConversation = false}) =>
+ const TextStyle(
+ color: Colors.lightBlueAccent,
+ fontSize: 14,
+ fontWeight: FontWeight.bold,
+ ),
+ ),
],
)
```
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-***
-
-## Next Steps
-
-
- Build a custom mentions formatter with filtered suggestions.
-
-
- Build custom inline text patterns with regex.
-
-
- Customize the standard message input component.
-
-
- Browse all feature and formatter guides.
-
-
diff --git a/ui-kit/flutter/message-bubble-styling.mdx b/ui-kit/flutter/message-bubble-styling.mdx
index 3b5fd03ca..102f36175 100644
--- a/ui-kit/flutter/message-bubble-styling.mdx
+++ b/ui-kit/flutter/message-bubble-styling.mdx
@@ -1,274 +1,362 @@
---
-title: "Message Bubble Styling"
-sidebarTitle: "Message Bubbles"
-description: "Customize incoming and outgoing message bubbles in CometChat Flutter UI Kit."
+title: "Customizing Message Bubbles"
+sidebarTitle: "Message Bubble Styling"
+description: "Customize CometChat Flutter UI Kit message bubbles with incoming and outgoing styles, theme extensions, reactions, timestamps, and avatars."
---
-
+The CometChat V6 UI Kit provides `CometChatOutgoingMessageBubbleStyle` and `CometChatIncomingMessageBubbleStyle` for fine-grained control over message bubble appearance. These classes extend `ThemeExtension`, allowing customizations through global theming or explicit style objects.
-| Field | Value |
-| --- | --- |
-| Outgoing | `CometChatOutgoingMessageBubbleStyle` |
-| Incoming | `CometChatIncomingMessageBubbleStyle` |
-| Action | `CometChatActionBubbleStyle` |
-| AI Assistant | `CometChatAiAssistantBubbleStyle` |
-| Usage | Add to `ThemeData.extensions` or pass to `CometChatMessageListStyle` |
-| Bubble types | Text, Image, Video, Audio, File, Poll, Sticker, Voice Call, Video Call, Link Preview, Collaborative Document, Collaborative Whiteboard, Message Translation, Deleted, Action, AI Assistant |
-| Source | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/shared_uikit/lib/src/models/extension_bubble_styles) |
+## How These Classes Help
-
+### 1. Targeted Customization
-Customize message bubbles using `CometChatOutgoingMessageBubbleStyle` and `CometChatIncomingMessageBubbleStyle`.
+Customize specific attributes of message bubbles:
-
- 
-
+* Background color, border radius, text style
+* Specialized bubbles: Audio, File, Collaborative, Poll, Deleted, Link Preview, Sticker, Call bubbles
+* Reactions, timestamps, avatars, and borders
----
-
-## Global Theming
+### 2. Unified Global Theming
-Apply bubble styles globally via `ThemeData.extensions`:
+Apply styles via Flutter's global theming or pass them to `CometChatMessageListStyle`:
+
+
```dart
MaterialApp(
+ title: 'Your app',
theme: ThemeData(
extensions: [
- CometChatOutgoingMessageBubbleStyle(
+ CometChatIncomingMessageBubbleStyle(
backgroundColor: Color(0xFFF76808),
),
- CometChatIncomingMessageBubbleStyle(
- backgroundColor: Color(0xFFFEEDE1),
+ CometChatOutgoingMessageBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
),
],
),
-)
+ home: ...,
+);
```
+
+
-
- 
-
-
----
-
-## Component-Level Styling
+### 3. Ease of Integration
Pass styles directly to `CometChatMessageList`:
+
+
```dart
CometChatMessageList(
user: user,
+ group: group,
style: CometChatMessageListStyle(
- outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- ),
- incomingMessageBubbleStyle: CometChatIncomingMessageBubbleStyle(
- backgroundColor: Color(0xFFFEEDE1),
- ),
+ incomingMessageBubbleStyle: CometChatIncomingMessageBubbleStyle(),
+ outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(),
),
)
```
+
+
----
-
-## Bubble Types
+## Customizable Message Bubbles
### Text Bubble
-
- 
-
-
+
+
```dart
-CometChatOutgoingMessageBubbleStyle(
- textBubbleStyle: CometChatTextBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- ),
+ThemeData(
+ extensions: [
+ CometChatOutgoingMessageBubbleStyle(
+ textBubbleStyle: CometChatTextBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ ),
+ ),
+ CometChatIncomingMessageBubbleStyle(
+ textBubbleStyle: CometChatTextBubbleStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ ),
+ ),
+ ],
)
```
+
+
### Image Bubble
-
- 
-
-
+
+
```dart
-CometChatOutgoingMessageBubbleStyle(
- imageBubbleStyle: CometChatImageBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- ),
+ThemeData(
+ extensions: [
+ CometChatOutgoingMessageBubbleStyle(
+ imageBubbleStyle: CometChatImageBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ ),
+ ),
+ CometChatIncomingMessageBubbleStyle(
+ imageBubbleStyle: CometChatImageBubbleStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ ),
+ ),
+ ],
)
```
+
+
### Video Bubble
-
- 
-
-
+
+
```dart
-CometChatOutgoingMessageBubbleStyle(
- videoBubbleStyle: CometChatVideoBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- playIconColor: Color(0xFFF76808),
- ),
+ThemeData(
+ extensions: [
+ CometChatOutgoingMessageBubbleStyle(
+ videoBubbleStyle: CometChatVideoBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ playIconColor: Color(0xFFF76808),
+ ),
+ ),
+ CometChatIncomingMessageBubbleStyle(
+ videoBubbleStyle: CometChatVideoBubbleStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ playIconColor: Color(0xFFF76808),
+ ),
+ ),
+ ],
)
```
+
+
### Audio Bubble
-
- 
-
-
+
+
```dart
-CometChatIncomingMessageBubbleStyle(
- audioBubbleStyle: CometChatAudioBubbleStyle(
- backgroundColor: Color(0xFFFEEDE1),
- downloadIconColor: Color(0xFFF76808),
- audioBarColor: Color(0xFFF76808),
- playIconColor: Color(0xFFF76808),
- ),
+ThemeData(
+ extensions: [
+ CometChatOutgoingMessageBubbleStyle(
+ audioBubbleStyle: CometChatAudioBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ playIconColor: Color(0xFFF76808),
+ ),
+ ),
+ CometChatIncomingMessageBubbleStyle(
+ audioBubbleStyle: CometChatAudioBubbleStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ downloadIconColor: Color(0xFFF76808),
+ audioBarColor: Color(0xFFF76808),
+ playIconColor: Color(0xFFF76808),
+ ),
+ ),
+ ],
)
```
+
+
### File Bubble
-
- 
-
-
+
+
```dart
-CometChatIncomingMessageBubbleStyle(
- fileBubbleStyle: CometChatFileBubbleStyle(
- backgroundColor: Color(0xFFFEEDE1),
- downloadIconTint: Color(0xFFF76808),
- ),
+ThemeData(
+ extensions: [
+ CometChatOutgoingMessageBubbleStyle(
+ fileBubbleStyle: CometChatFileBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ ),
+ ),
+ CometChatIncomingMessageBubbleStyle(
+ fileBubbleStyle: CometChatFileBubbleStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ downloadIconTint: Color(0xFFF76808),
+ ),
+ ),
+ ],
)
```
+
+
-### Poll Bubble
-
-
- 
-
+### Sticker Bubble
+
+
```dart
-CometChatOutgoingMessageBubbleStyle(
- pollsBubbleStyle: CometChatPollsBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- progressBackgroundColor: Color(0xFFFBAA75),
- iconColor: Color(0xFFF76808),
- ),
+ThemeData(
+ extensions: [
+ CometChatOutgoingMessageBubbleStyle(
+ stickerBubbleStyle: CometChatStickerBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ ),
+ ),
+ CometChatIncomingMessageBubbleStyle(
+ stickerBubbleStyle: CometChatStickerBubbleStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ ),
+ ),
+ ],
)
```
+
+
### Call Bubble
-
- 
-
-
+
+
```dart
-CometChatOutgoingMessageBubbleStyle(
- videoCallBubbleStyle: CometChatCallBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- iconColor: Color(0xFFF76808),
- buttonTextStyle: TextStyle(color: Colors.white),
- dividerColor: Color(0xFFFBAA75),
- ),
-)
-```
-
-### Link Preview Bubble
-
-
- 
-
-
-```dart
-CometChatOutgoingMessageBubbleStyle(
- linkPreviewBubbleStyle: CometChatLinkPreviewBubbleStyle(
- backgroundColor: Color(0xFFFBAA75),
- ),
- textBubbleStyle: CometChatTextBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- ),
+ThemeData(
+ extensions: [
+ CometChatOutgoingMessageBubbleStyle(
+ videoCallBubbleStyle: CometChatCallBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ iconColor: Color(0xFFF76808),
+ buttonTextStyle: TextStyle(color: Colors.white),
+ dividerColor: Color(0xFFFBAA75),
+ ),
+ ),
+ CometChatIncomingMessageBubbleStyle(
+ videoCallBubbleStyle: CometChatCallBubbleStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ iconColor: Color(0xFFF76808),
+ buttonTextStyle: TextStyle(color: Color(0xFFF76808)),
+ ),
+ ),
+ ],
)
```
+
+
-### Deleted Message Bubble
-
-
- 
-
+### Collaborative Whiteboard Bubble
+
+
```dart
-CometChatOutgoingMessageBubbleStyle(
- deletedBubbleStyle: CometChatDeletedBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- ),
+ThemeData(
+ extensions: [
+ CometChatOutgoingMessageBubbleStyle(
+ collaborativeWhiteboardBubbleStyle: CometChatCollaborativeBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ iconTint: Color(0xFFFFFFFF),
+ titleStyle: TextStyle(fontWeight: FontWeight.bold, color: Color(0xFFFFFFFF)),
+ buttonTextStyle: TextStyle(color: Color(0xFFFFFFFF)),
+ dividerColor: Color(0xFFFBAA75),
+ ),
+ ),
+ CometChatIncomingMessageBubbleStyle(
+ collaborativeWhiteboardBubbleStyle: CometChatCollaborativeBubbleStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ iconTint: Color(0xFFF76808),
+ titleStyle: TextStyle(fontWeight: FontWeight.bold),
+ buttonTextStyle: TextStyle(color: Color(0xFFF76808)),
+ ),
+ ),
+ ],
)
```
+
+
-### Collaborative Bubbles
-
-
- 
-
+### Collaborative Document Bubble
+
+
```dart
-// Collaborative Whiteboard
-CometChatOutgoingMessageBubbleStyle(
- collaborativeWhiteboardBubbleStyle: CometChatCollaborativeBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- iconTint: Color(0xFFFFFFFF),
- titleStyle: TextStyle(fontWeight: FontWeight.bold, color: Color(0xFFFFFFFF)),
- buttonTextStyle: TextStyle(color: Color(0xFFFFFFFF)),
- dividerColor: Color(0xFFFBAA75),
- ),
-)
-
-// Collaborative Document
-CometChatOutgoingMessageBubbleStyle(
- collaborativeDocumentBubbleStyle: CometChatCollaborativeBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- iconTint: Color(0xFFFFFFFF),
- titleStyle: TextStyle(fontWeight: FontWeight.bold, color: Color(0xFFFFFFFF)),
- buttonTextStyle: TextStyle(color: Color(0xFFFFFFFF)),
- dividerColor: Color(0xFFFBAA75),
- ),
+ThemeData(
+ extensions: [
+ CometChatOutgoingMessageBubbleStyle(
+ collaborativeDocumentBubbleStyle: CometChatCollaborativeBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ iconTint: Color(0xFFFFFFFF),
+ titleStyle: TextStyle(fontWeight: FontWeight.bold, color: Color(0xFFFFFFFF)),
+ buttonTextStyle: TextStyle(color: Color(0xFFFFFFFF)),
+ dividerColor: Color(0xFFFBAA75),
+ ),
+ ),
+ CometChatIncomingMessageBubbleStyle(
+ collaborativeDocumentBubbleStyle: CometChatCollaborativeBubbleStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ iconTint: Color(0xFFF76808),
+ titleStyle: TextStyle(fontWeight: FontWeight.bold),
+ buttonTextStyle: TextStyle(color: Color(0xFFF76808)),
+ ),
+ ),
+ ],
)
```
+
+
-### Sticker Bubble
+### Poll Bubble
+
+
```dart
-CometChatOutgoingMessageBubbleStyle(
- stickerBubbleStyle: CometChatStickerBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- borderRadius: BorderRadius.circular(12),
- ),
+ThemeData(
+ extensions: [
+ CometChatOutgoingMessageBubbleStyle(
+ pollsBubbleStyle: CometChatPollsBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ progressBackgroundColor: Color(0xFFFBAA75),
+ iconColor: Color(0xFFF76808),
+ ),
+ ),
+ CometChatIncomingMessageBubbleStyle(
+ pollsBubbleStyle: CometChatPollsBubbleStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ progressBackgroundColor: Color(0xFFDCDCDC),
+ progressColor: Color(0xFFF76808),
+ iconColor: Colors.white,
+ selectedOptionColor: Color(0xFFF76808),
+ ),
+ ),
+ ],
)
```
+
+
-### Voice Call Bubble
+### Link Preview Bubble
+
+
```dart
-CometChatOutgoingMessageBubbleStyle(
- voiceCallBubbleStyle: CometChatCallBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- iconColor: Color(0xFFFFFFFF),
- buttonTextStyle: TextStyle(color: Colors.white),
- ),
+ThemeData(
+ extensions: [
+ CometChatOutgoingMessageBubbleStyle(
+ linkPreviewBubbleStyle: CometChatLinkPreviewBubbleStyle(
+ backgroundColor: Color(0xFFFBAA75),
+ ),
+ textBubbleStyle: CometChatTextBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ ),
+ ),
+ CometChatIncomingMessageBubbleStyle(
+ linkPreviewBubbleStyle: CometChatLinkPreviewBubbleStyle(
+ backgroundColor: Color(0xFFFBAA75),
+ ),
+ textBubbleStyle: CometChatTextBubbleStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ ),
+ ),
+ ],
)
```
+
+
### Action Message Bubble
-Style activity-driven notifications like "User joined" or "User left":
-
+
+
```dart
ThemeData(
extensions: [
@@ -280,78 +368,45 @@ ThemeData(
],
)
```
+
+
+
+### Deleted Message Bubble
+
+
+
+```dart
+ThemeData(
+ extensions: [
+ CometChatOutgoingMessageBubbleStyle(
+ deletedBubbleStyle: CometChatDeletedBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ ),
+ ),
+ CometChatIncomingMessageBubbleStyle(
+ deletedBubbleStyle: CometChatDeletedBubbleStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ ),
+ ),
+ ],
+)
+```
+
+
### AI Assistant Bubble
+
+
```dart
ThemeData(
extensions: [
CometChatAiAssistantBubbleStyle(
backgroundColor: Colors.transparent,
- textColor: Color(0xFF141414),
- textStyle: TextStyle(fontFamily: 'Roboto'),
+ textColor: const Color(0xFF141414),
),
],
)
```
-
----
-
-## Style Properties Reference
-
-### CometChatOutgoingMessageBubbleStyle
-
-| Property | Type | Description |
-| --- | --- | --- |
-| `backgroundColor` | `Color?` | Background color of the message bubble |
-| `border` | `BoxBorder?` | Border of the message bubble |
-| `borderRadius` | `BorderRadiusGeometry?` | Border radius of the message bubble |
-| `messageBubbleBackgroundImage` | `DecorationImage?` | Background image for the bubble |
-| `threadedMessageIndicatorTextStyle` | `TextStyle?` | Text style for threaded message indicator |
-| `threadedMessageIndicatorIconColor` | `Color?` | Icon color for threaded message indicator |
-| `messageBubbleAvatarStyle` | `CometChatAvatarStyle?` | Style for sender avatar |
-| `messageReceiptStyle` | `CometChatMessageReceiptStyle?` | Style for message receipts |
-| `messageBubbleReactionStyle` | `CometChatReactionsStyle?` | Style for message reactions |
-| `messageBubbleDateStyle` | `CometChatDateStyle?` | Style for message date |
-| `textBubbleStyle` | `CometChatTextBubbleStyle?` | Style for text messages |
-| `imageBubbleStyle` | `CometChatImageBubbleStyle?` | Style for image messages |
-| `videoBubbleStyle` | `CometChatVideoBubbleStyle?` | Style for video messages |
-| `audioBubbleStyle` | `CometChatAudioBubbleStyle?` | Style for audio messages |
-| `fileBubbleStyle` | `CometChatFileBubbleStyle?` | Style for file messages |
-| `pollsBubbleStyle` | `CometChatPollsBubbleStyle?` | Style for poll messages |
-| `stickerBubbleStyle` | `CometChatStickerBubbleStyle?` | Style for sticker messages |
-| `voiceCallBubbleStyle` | `CometChatCallBubbleStyle?` | Style for voice call bubbles |
-| `videoCallBubbleStyle` | `CometChatCallBubbleStyle?` | Style for video call bubbles |
-| `linkPreviewBubbleStyle` | `CometChatLinkPreviewBubbleStyle?` | Style for link preview bubbles |
-| `collaborativeDocumentBubbleStyle` | `CometChatCollaborativeBubbleStyle?` | Style for collaborative document bubbles |
-| `collaborativeWhiteboardBubbleStyle` | `CometChatCollaborativeBubbleStyle?` | Style for collaborative whiteboard bubbles |
-| `messageTranslationBubbleStyle` | `CometChatMessageTranslationBubbleStyle?` | Style for translated messages |
-| `deletedBubbleStyle` | `CometChatDeletedBubbleStyle?` | Style for deleted messages |
-| `moderationStyle` | `CometChatModerationStyle?` | Style for moderated messages |
-| `messagePreviewStyle` | `CometChatMessagePreviewStyle?` | Style for message previews |
-| `exceptionStyle` | `CometChatExceptionStyle?` | Style for exception views |
-
-### CometChatIncomingMessageBubbleStyle
-
-Includes all properties from `CometChatOutgoingMessageBubbleStyle` except `messageReceiptStyle`, `moderationStyle`, and `exceptionStyle`, plus:
-
-| Property | Type | Description |
-| --- | --- | --- |
-| `senderNameTextStyle` | `TextStyle?` | Text style for sender name |
-| `aiAssistantBubbleStyle` | `CometChatAIAssistantBubbleStyle?` | Style for AI assistant bubbles |
-
-### CometChatActionBubbleStyle
-
-| Property | Type | Description |
-| --- | --- | --- |
-| `backgroundColor` | `Color?` | Background color of action bubble |
-| `border` | `BoxBorder?` | Border of action bubble |
-| `textStyle` | `TextStyle?` | Text style for action message |
-
-### CometChatAiAssistantBubbleStyle
-
-| Property | Type | Description |
-| --- | --- | --- |
-| `backgroundColor` | `Color?` | Background color of AI assistant bubble |
-| `textColor` | `Color?` | Text color |
-| `textStyle` | `TextStyle?` | Text style for AI messages |
+
+
diff --git a/ui-kit/flutter/message-composer.mdx b/ui-kit/flutter/message-composer.mdx
index 873d355f8..16ec80645 100644
--- a/ui-kit/flutter/message-composer.mdx
+++ b/ui-kit/flutter/message-composer.mdx
@@ -1,128 +1,58 @@
---
title: "Message Composer"
-description: "A widget that enables users to write and send messages with attachments and reactions"
+description: "Configure CometChat Flutter UI Kit Message Composer for text, media, custom messages, live reactions, editing, rich text, and audio."
---
-
-```json
-{
- "component": "CometChatMessageComposer",
- "package": "cometchat_chat_uikit",
- "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
- "description": "A widget that enables users to write and send a variety of messages, including text, image, video, and custom messages. Features such as Live Reaction, Attachments, and Message Editing are also supported.",
- "primaryOutput": {
- "prop": "onSendButtonTap",
- "type": "Function(BuildContext, BaseMessage, PreviewMessageMode?)?"
- },
- "props": {
- "data": {
- "user": {
- "type": "User?",
- "default": "null",
- "note": "User object for the message composer (one of user or group is required)"
- },
- "group": {
- "type": "Group?",
- "default": "null",
- "note": "Group object for the message composer (one of user or group is required)"
- },
- "text": {
- "type": "String?",
- "default": "null",
- "note": "Initial text for the input field"
- },
- "parentMessageId": {
- "type": "int",
- "default": "0",
- "note": "ID of the parent message for threaded replies"
- }
- },
- "callbacks": {
- "onChange": "Function(String)?",
- "onSendButtonTap": "Function(BuildContext, BaseMessage, PreviewMessageMode?)?",
- "onError": "OnError?"
- },
- "visibility": {
- "hideVoiceRecordingButton": { "type": "bool?", "default": null },
- "hideSendButton": { "type": "bool?", "default": null },
- "hideAttachmentButton": { "type": "bool?", "default": null },
- "hideStickersButton": { "type": "bool?", "default": null },
- "disableMentions": { "type": "bool?", "default": null },
- "disableTypingEvents": { "type": "bool", "default": false }
- },
- "sound": {
- "disableSoundForMessages": { "type": "bool", "default": false },
- "customSoundForMessage": { "type": "String?", "default": null }
- },
- "viewSlots": {
- "auxiliaryButtonView": "ComposerWidgetBuilder?",
- "secondaryButtonView": "ComposerWidgetBuilder?",
- "sendButtonView": "Widget?",
- "headerView": "ComposerWidgetBuilder?",
- "footerView": "ComposerWidgetBuilder?"
- },
- "formatting": {
- "placeholderText": { "type": "String?", "default": null },
- "maxLine": { "type": "int?", "default": null },
- "padding": { "type": "EdgeInsetsGeometry?", "default": null }
- }
- },
- "events": [],
- "sdkListeners": [],
- "compositionExample": {
- "description": "CometChatMessageComposer is typically used at the bottom of a messaging screen, paired with CometChatMessageHeader and CometChatMessageList",
- "components": ["CometChatMessageHeader", "CometChatMessageList", "CometChatMessages"],
- "flow": "User types message → Composer sends message → MessageList updates"
- },
- "types": {
- "CometChatMessageComposerStyle": {
- "backgroundColor": "Color?",
- "border": "BoxBorder?",
- "borderRadius": "BorderRadiusGeometry?",
- "sendButtonIconColor": "Color?",
- "sendButtonIconBackgroundColor": "Color?",
- "textStyle": "TextStyle?",
- "placeHolderTextStyle": "TextStyle?"
- }
- }
-}
-```
-
+## Overview
-## Where It Fits
+`CometChatMessageComposer` is a [Widget](/ui-kit/flutter/components-overview#widget) that enables users to write and send a variety of messages, including text, image, video, and custom messages.
-`CometChatMessageComposer` is a [Widget](/ui-kit/flutter/components-overview#components) that enables users to write and send a variety of messages, including text, image, video, and custom messages.
+Features such as **Live Reaction**, **Attachments**, **Message Editing**, **Rich Text Formatting**, **Code Blocks**, and **Inline Audio Recording** are supported.
-Features such as **Live Reaction**, **Attachments**, and **Message Editing** are also supported by it.
+`CometChatMessageComposer` is comprised of the following Base Widgets:
-
- 
-
+| Base Widgets | Description |
+|---|---|
+| MessageInput | Provides a basic layout for the contents, such as the TextField and buttons |
+| ActionSheet | Presents a list of options in either a list or grid mode |
-`CometChatMessageComposer` is comprised of the following [Base Widgets](/ui-kit/flutter/components-overview#base-components):
+In V6, the composer is powered by `MessageComposerBloc` and decomposed into focused sub-widgets.
-| Base Widgets | Description |
-| ------------ | ----------- |
-| [MessageInput](/ui-kit/flutter/message-composer) | This provides a basic layout for the contents of this component, such as the TextField and buttons |
-| [ActionSheet](/ui-kit/flutter/components-overview) | The ActionSheet widget presents a list of options in either a list or grid mode |
+## Usage
+
+### Integration
+
+##### 1. Using Navigator to Launch `CometChatMessageComposer`
+
+
+
+```dart
+Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatMessageComposer(user: user)));
+```
+
+
+
+##### 2. Embedding `CometChatMessageComposer` as a Widget in the build Method
```dart
import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:flutter/material.dart';
-// CometChatMessageComposer is typically used at the bottom of a messaging screen
-class MessagingScreen extends StatelessWidget {
- final User user;
-
- const MessagingScreen({required this.user});
+class MessageComposerScreen extends StatefulWidget {
+ const MessageComposerScreen({super.key});
+ @override
+ State createState() => _MessageComposerScreenState();
+}
+
+class _MessageComposerScreenState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
- CometChatMessageHeader(user: user),
Expanded(child: CometChatMessageList(user: user)),
CometChatMessageComposer(user: user),
],
@@ -134,53 +64,57 @@ class MessagingScreen extends StatelessWidget {
-## Minimal Render
+***
+
+### Actions
+
+##### 1. OnSendButtonClick
-The simplest way to render `CometChatMessageComposer`:
+The `OnSendButtonClick` event gets activated when the send message button is clicked.
```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
-// For a user conversation
CometChatMessageComposer(
user: user,
-)
-
-// For a group conversation
-CometChatMessageComposer(
- group: group,
+ onSendButtonTap: (BuildContext context, BaseMessage baseMessage, PreviewMessageMode? previewMessageMode) {
+ // Handle send
+ },
)
```
+***
-## Actions and Events
-
-### Callback Props
-
-Component-level callbacks that fire on specific user interactions:
+##### 2. onChange
-| Callback | Signature | Fires When |
-|----------|-----------|------------|
-| `onSendButtonTap` | `Function(BuildContext, BaseMessage, PreviewMessageMode?)?` | User taps the send button |
-| `onChange` | `Function(String)?` | Text in the input field changes |
-| `onError` | `OnError?` | An error occurs |
-| `stateCallBack` | `Function(CometChatMessageComposerController)?` | Controller state callback for accessing controller functions |
+Handles changes in the value of text in the input field.
```dart
CometChatMessageComposer(
user: user,
- onSendButtonTap: (BuildContext context, BaseMessage baseMessage, PreviewMessageMode? previewMessageMode) {
- // Handle send button tap
- },
onChange: (String? text) {
// Handle text change
},
+)
+```
+
+
+
+***
+
+##### 3. onError
+
+Listens for any errors that occur.
+
+
+
+```dart
+CometChatMessageComposer(
+ user: user,
onError: (e) {
// Handle error
},
@@ -189,153 +123,189 @@ CometChatMessageComposer(
-## Custom View Slots
+***
+
+### Filters
+
+`CometChatMessageComposer` widget does not have any available filters.
+
+***
+
+### Events
+
+The `CometChatMessageComposer` Widget does not emit any events of its own.
-Customize the appearance of `CometChatMessageComposer` by replacing default views with your own widgets.
+***
-| Slot | Signature | Replaces |
-|------|-----------|----------|
-| `auxiliaryButtonView` | `ComposerWidgetBuilder?` | Auxiliary button area (AI, stickers) |
-| `secondaryButtonView` | `ComposerWidgetBuilder?` | Secondary button area (attachment, voice) |
-| `sendButtonView` | `Widget?` | Send button |
-| `headerView` | `ComposerWidgetBuilder?` | Header section above input |
-| `footerView` | `ComposerWidgetBuilder?` | Footer section below input |
-| `attachmentOptions` | `ComposerActionsBuilder?` | Attachment options list |
+## Customization
-### Example: Custom Auxiliary Button View
+### Style
+
+##### 1. CometChatMessageComposerStyle
```dart
CometChatMessageComposer(
user: user,
- auxiliaryButtonView: (context, user, group, id) {
- final existingAuxiliaryOptions = CometChatUIKit.getDataSource()
- .getAuxiliaryOptions(user, group, context, id, Color(0xFFA1A1A1));
- return Row(
- children: [
- existingAuxiliaryOptions,
- Icon(
- Icons.location_pin,
- color: Color(0xFF6852D6),
- ),
- ],
- );
- },
+ messageComposerStyle: CometChatMessageComposerStyle(
+ sendButtonIconBackgroundColor: Color(0xFFF76808),
+ secondaryButtonIconColor: Color(0xFFF76808),
+ auxiliaryButtonIconColor: Color(0xFFF76808),
+ ),
)
```
-
- 
-
-
-### Example: Custom Secondary Button View
+##### 2. MediaRecorder Style
```dart
CometChatMessageComposer(
user: user,
- secondaryButtonView: (context, user, group, id) {
- return Icon(
- Icons.attach_file,
- color: Color(0xFF6852D6),
- );
- },
+ messageComposerStyle: CometChatMessageComposerStyle(
+ mediaRecorderStyle: CometChatMediaRecorderStyle(
+ recordIndicatorBackgroundColor: Color(0xFFF44649),
+ recordIndicatorBorderRadius: BorderRadius.circular(20),
+ ),
+ ),
)
```
-
- 
-
+***
-### Example: Custom Send Button View
+### Functionality
```dart
CometChatMessageComposer(
user: user,
- sendButtonView: IconButton(
- onPressed: () {},
- padding: EdgeInsets.all(4),
- style: IconButton.styleFrom(
- alignment: Alignment.center,
- backgroundColor: Color(0xFFEDEAFA),
- shape: RoundedRectangleBorder(
- borderRadius: BorderRadius.circular(4),
- ),
- ),
- icon: Transform.rotate(
- angle: 150,
- child: Icon(
- Icons.send,
- size: 20,
- color: Color(0xFF6852D6),
+ placeholderText: "Type a message...",
+ disableMentions: true,
+)
+```
+
+
+
+## Message Composer Properties
+
+| Property | Data Type | Description |
+|---|---|---|
+| `user` | `User?` | Sets user for the message composer. |
+| `group` | `Group?` | Sets group for the message composer. |
+| `messageComposerStyle` | `CometChatMessageComposerStyle?` | Sets style for the message composer. |
+| `placeholderText` | `String?` | Hint text for the input field. |
+| `text` | `String?` | Initial text for the input field. |
+| `onChange` | `Function(String text)?` | Callback triggered when text changes. |
+| `textEditingController` | `TextEditingController?` | Controls the state of the text field. |
+| `maxLine` | `int?` | Maximum number of lines allowed. |
+| `disableMentions` | `bool?` | Disables mentions in the composer. |
+| `disableTypingEvents` | `bool` | Disables typing events. |
+| `disableSoundForMessages` | `bool` | Disables sound for sent messages. |
+| `parentMessageId` | `int` | ID of the parent message (default is 0). |
+| `sendButtonView` | `Widget?` | Custom send button widget. |
+| `attachmentIcon` | `Widget?` | Custom attachment icon. |
+| `voiceRecordingIcon` | `Widget?` | Custom voice recording icon. |
+| `auxiliaryButtonView` | `ComposerWidgetBuilder?` | UI component as auxiliary button. |
+| `secondaryButtonView` | `ComposerWidgetBuilder?` | UI component as secondary button. |
+| `hideVoiceRecordingButton` | `bool?` | Hide the voice recording button. |
+| `attachmentOptions` | `ComposerActionsBuilder?` | Provides options for file attachments. |
+| `hideAttachmentButton` | `bool?` | Hide/display attachment button. |
+| `hideImageAttachmentOption` | `bool?` | Hide/display image attachment option. |
+| `hideVideoAttachmentOption` | `bool?` | Hide/display video attachment option. |
+| `hideAudioAttachmentOption` | `bool?` | Hide/display audio attachment option. |
+| `hideFileAttachmentOption` | `bool?` | Hide/display file attachment option. |
+| `hidePollsOption` | `bool?` | Hide/display polls option. |
+| `onSendButtonTap` | `Function(BuildContext, BaseMessage, PreviewMessageMode?)?` | Callback when send button is tapped. |
+| `onError` | `OnError?` | Callback to handle errors. |
+| `hideSendButton` | `bool?` | Hide/display the send button. |
+| `hideStickersButton` | `bool?` | Hide/display the sticker button. |
+| `sendButtonIcon` | `Widget?` | Custom send button icon. |
+| `layout` | `CometChatComposerLayout` | Composer skeleton: `singleLine` (default) or `doubleLine`. See [Layout](#layout) below. |
+| `enableRichTextFormatting` | `bool` | Master switch for rich text (markdown detection, toolbar, WYSIWYG rendering). Default `true`. |
+| `showRichTextFormattingOptions` | `bool` | Whether the rich text toolbar UI is visible. Default `true`. |
+| `hideRichTextFormattingOptions` | `Set` | Set of format buttons to hide from the toolbar. Default `{}`. |
+| `richTextToolbarView` | `Widget Function(BuildContext, TextEditingController)?` | Custom rich text toolbar widget. |
+| `onRichTextFormatApplied` | `void Function(FormatType)?` | Callback fired when a toolbar format is applied. |
+| `hideBottomSafeArea` | `bool` | Hide bottom safe area padding (default: `false`). |
+| `resizeToAvoidBottomInset` | `bool` | Indicates the parent `Scaffold` uses its default `resizeToAvoidBottomInset: true` and will handle keyboard insets itself. Default `true`. Flip to `false` only if you opt into the composer's internal keyboard-aware spacing and set `resizeToAvoidBottomInset: false` on your Scaffold. |
+| `onKeyboardDiagnostics` | `CometChatKeyboardDiagnosticsCallback?` | Debug hook fired on every internal keyboard-state change. Leave `null` in production. |
+
+***
+
+### Advanced
+
+#### TextFormatters
+
+
+
+```dart
+CometChatMessageComposer(
+ user: user,
+ textFormatters: [
+ CometChatMentionsFormatter(
+ style: CometChatMentionsStyle(
+ mentionSelfTextBackgroundColor: Color(0xFFF76808),
+ mentionTextBackgroundColor: Colors.white,
+ mentionTextColor: Colors.black,
+ mentionSelfTextColor: Colors.white,
),
),
- ),
+ ],
)
```
-
- 
-
+***
-### Example: Custom Header View
+#### AttachmentOptions
```dart
CometChatMessageComposer(
user: user,
- headerView: (context, user, group, id) {
- return Container(
- margin: EdgeInsets.only(bottom: 2, left: 8, right: 8),
- padding: EdgeInsets.all(8),
- decoration: BoxDecoration(
- color: Color(0xFFEDEAFA),
- borderRadius: BorderRadius.circular(8),
- ),
- child: Row(
- children: [
- Icon(Icons.volume_off, size: 20, color: Color(0xFF6852D6)),
- Text(
- "User has paused their notifications",
- style: TextStyle(fontSize: 14, fontWeight: FontWeight.w400),
- ),
- ],
+ attachmentOptions: (context, user, group, id) {
+ return [
+ CometChatMessageComposerAction(
+ id: "Custom Option",
+ title: "Custom Option",
+ icon: Icon(Icons.add_box, color: Colors.black),
),
- );
+ ];
},
)
```
-
- 
-
+***
+
+#### AuxiliaryButton Widget
-### Example: Custom Footer View
+You can customize the auxiliary button area (mic, sticker, etc.) using the `auxiliaryButtonView` parameter:
```dart
CometChatMessageComposer(
user: user,
- footerView: (context, user, group, id) {
- return Container(
- width: MediaQuery.of(context).size.width / 1.08,
- color: Colors.yellow,
- padding: const EdgeInsets.all(8),
- child: const Center(child: Text("Your Footer Widget")),
+ auxiliaryButtonView: (context, user, group, id) {
+ return Row(
+ children: [
+ IconButton(
+ icon: Icon(Icons.location_pin, color: Color(0xFF6852D6)),
+ onPressed: () {
+ // Handle location sharing
+ },
+ ),
+ ],
);
},
)
@@ -343,246 +313,182 @@ CometChatMessageComposer(
-
-
-
-
-
-
-
-
+***
+
+## Layout
+
+The composer skeleton supports two layouts via the `layout` prop:
-### Example: Custom Attachment Options
+| Value | Description |
+| --- | --- |
+| `CometChatComposerLayout.singleLine` | **Default.** Text field and all buttons share a single row. |
+| `CometChatComposerLayout.doubleLine` | Classic v5 look — text field on its own row, buttons on a second row below a divider. |
+
+All existing props (hide flags, view slots, style, mentions, rich text, voice recording, reply/edit preview, AI options) work identically in both layouts.
```dart
CometChatMessageComposer(
user: user,
- attachmentOptions: (context, user, group, id) {
- return [
- CometChatMessageComposerAction(
- id: "Custom Option 1",
- title: "Custom Option 1",
- icon: Icon(Icons.play_circle, color: Colors.black),
- ),
- CometChatMessageComposerAction(
- id: "Custom Option 2",
- title: "Custom Option 2",
- icon: Icon(Icons.add_box, color: Colors.black),
- ),
- ];
- },
+ layout: CometChatComposerLayout.doubleLine,
)
```
-
- 
-
-
-
-## Styling
-
-Customize the appearance of `CometChatMessageComposer` using `CometChatMessageComposerStyle`.
-
-### Style Properties
-
-| Property | Type | Description |
-|----------|------|-------------|
-| `backgroundColor` | `Color?` | Background color of the message composer |
-| `border` | `BoxBorder?` | Border of the message composer |
-| `borderRadius` | `BorderRadiusGeometry?` | Border radius of the message composer |
-| `closeIconTint` | `Color?` | Color for the close icon |
-| `dividerColor` | `Color?` | Color of the divider |
-| `dividerHeight` | `double?` | Height of the divider |
-| `sendButtonIconColor` | `Color?` | Color of the send button icon |
-| `sendButtonIconBackgroundColor` | `Color?` | Background color of the send button |
-| `sendButtonBorderRadius` | `BorderRadiusGeometry?` | Border radius of the send button |
-| `secondaryButtonIconColor` | `Color?` | Color of the secondary button icon |
-| `secondaryButtonIconBackgroundColor` | `Color?` | Background color of the secondary button |
-| `secondaryButtonBorderRadius` | `BorderRadiusGeometry?` | Border radius of the secondary button |
-| `auxiliaryButtonIconColor` | `Color?` | Color of the auxiliary button icon |
-| `auxiliaryButtonIconBackgroundColor` | `Color?` | Background color of the auxiliary button |
-| `auxiliaryButtonBorderRadius` | `BorderRadiusGeometry?` | Border radius of the auxiliary button |
-| `textStyle` | `TextStyle?` | Style of the text |
-| `textColor` | `Color?` | Color of the text |
-| `placeHolderTextStyle` | `TextStyle?` | Style of the placeholder text |
-| `placeHolderTextColor` | `Color?` | Color of the placeholder text |
-| `filledColor` | `Color?` | Background color of the text input |
-| `mentionsStyle` | `CometChatMentionsStyle?` | Style for mentions |
-| `mediaRecorderStyle` | `CometChatMediaRecorderStyle?` | Style for media recorder |
-| `aiOptionStyle` | `AIOptionsStyle?` | Style for AI options |
-| `aiOptionSheetStyle` | `CometChatAiOptionSheetStyle?` | Style for AI option sheet |
-| `attachmentOptionSheetStyle` | `CometChatAttachmentOptionSheetStyle?` | Style for attachment option sheet |
-| `suggestionListStyle` | `CometChatSuggestionListStyle?` | Style for suggestion list |
-| `messagePreviewStyle` | `CometChatMessagePreviewStyle?` | Style for message preview |
-
-### Example: Custom Styling
+***
+
+## Rich Text Formatting
+
+The composer ships with a WYSIWYG rich-text toolbar that parses Markdown as the user types and renders formatted spans in place. Configuration is done with three flat props.
+
+### Enable with defaults
+
+Rich text is on by default — no props required.
+
+
+
+```dart
+CometChatMessageComposer(user: user)
+```
+
+
+
+### Show or hide the toolbar UI
+
+`showRichTextFormattingOptions` controls toolbar visibility. When `false`, markdown is still parsed in typed text but no toolbar is rendered.
+
+| Layout | Toolbar placement |
+| --- | --- |
+| `singleLine` | Persistent row directly below the text input |
+| `doubleLine` | Behind an `Aa` toggle in the button row — tapping swaps in the toolbar |
```dart
CometChatMessageComposer(
user: user,
- messageComposerStyle: CometChatMessageComposerStyle(
- sendButtonIconBackgroundColor: Color(0xFFF76808),
- secondaryButtonIconColor: Color(0xFFF76808),
- auxiliaryButtonIconColor: Color(0xFFF76808),
- ),
+ showRichTextFormattingOptions: false, // parses markdown, no toolbar
)
```
-
-
-
+### Hide specific format buttons
-### Example: Custom Media Recorder Style
+Pass a `Set` listing the buttons to remove from the toolbar.
```dart
CometChatMessageComposer(
user: user,
- messageComposerStyle: CometChatMessageComposerStyle(
- mediaRecorderStyle: CometChatMediaRecorderStyle(
- recordIndicatorBackgroundColor: Color(0xFFF44649),
- recordIndicatorBorderRadius: BorderRadius.circular(20),
- pauseButtonBorderRadius: BorderRadius.circular(8),
- deleteButtonBorderRadius: BorderRadius.circular(8),
- stopButtonBorderRadius: BorderRadius.circular(8),
- ),
- ),
+ hideRichTextFormattingOptions: const {
+ FormatType.strikethrough,
+ FormatType.codeBlock,
+ FormatType.blockquote,
+ },
)
```
-
- 
-
+### Disable rich text entirely
-### Example: Custom AI Options Style
+Set `enableRichTextFormatting: false` to behave as a plain text field — no markdown parsing, no toolbar, regardless of the other two props.
```dart
CometChatMessageComposer(
user: user,
- messageComposerStyle: CometChatMessageComposerStyle(
- aiOptionStyle: AIOptionsStyle(
- backgroundColor: Color(0xFFE4EBF5),
- border: Border.all(width: 3, color: Colors.red),
- ),
- ),
+ enableRichTextFormatting: false,
)
```
-## Advanced
+### FormatType values
+
+| Value | Markdown |
+| --- | --- |
+| `FormatType.bold` | `**text**` |
+| `FormatType.italic` | `_text_` or `*text*` |
+| `FormatType.underline` | `text` |
+| `FormatType.strikethrough` | `~~text~~` |
+| `FormatType.inlineCode` | `` `code` `` |
+| `FormatType.codeBlock` | ` ```code``` ` |
+| `FormatType.link` | `[text](url)` |
+| `FormatType.bulletList` | `- item` |
+| `FormatType.orderedList` | `1. item` |
+| `FormatType.blockquote` | `> quote` |
-### Text Formatters
+### Custom toolbar view
-Assigns the list of text formatters. To configure the existing Mentions look and feel check out [CometChatMentionsFormatter](/ui-kit/flutter/mentions-formatter-guide).
+`richTextToolbarView` receives the active controller. Because the controller is a `RichTextEditingController` under the hood, apply formats directly via `applyFormat`.
```dart
CometChatMessageComposer(
user: user,
- textFormatters: [
- CometChatMentionsFormatter(
- style: CometChatMentionsStyle(
- mentionSelfTextBackgroundColor: Color(0xFFF76808),
- mentionTextBackgroundColor: Colors.white,
- mentionTextColor: Colors.black,
- mentionSelfTextColor: Colors.white,
- ),
- ),
- ],
+ richTextToolbarView: (context, controller) {
+ return Row(
+ children: [
+ IconButton(
+ icon: const Icon(Icons.format_bold),
+ onPressed: () {
+ (controller as RichTextEditingController).applyFormat(FormatType.bold);
+ },
+ ),
+ IconButton(
+ icon: const Icon(Icons.format_italic),
+ onPressed: () {
+ (controller as RichTextEditingController).applyFormat(FormatType.italic);
+ },
+ ),
+ ],
+ );
+ },
+ onRichTextFormatApplied: (formatType) {
+ debugPrint('Applied ${formatType.name}');
+ },
)
```
-
-
-
-
-## Props Reference
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `user` | `User?` | `null` | User object for the message composer |
-| `group` | `Group?` | `null` | Group object for the message composer |
-| `messageComposerStyle` | `CometChatMessageComposerStyle?` | - | Sets style for the message composer |
-| `placeholderText` | `String?` | - | Hint text for the input field |
-| `text` | `String?` | - | Initial text for the input field |
-| `onChange` | `Function(String)?` | - | Callback triggered when text changes |
-| `textEditingController` | `TextEditingController?` | - | Controls the state of the text field |
-| `maxLine` | `int?` | - | Maximum number of lines allowed |
-| `disableMentions` | `bool?` | `null` | Disables mentions in the composer |
-| `disableTypingEvents` | `bool` | `false` | Disables typing events |
-| `disableSoundForMessages` | `bool` | `false` | Disables sound for sent messages |
-| `customSoundForMessage` | `String?` | - | URL for custom sound |
-| `customSoundForMessagePackage` | `String?` | - | Package name for custom sound asset |
-| `parentMessageId` | `int` | `0` | ID of the parent message |
-| `padding` | `EdgeInsetsGeometry?` | - | Sets padding for the message composer |
-| `messageInputPadding` | `EdgeInsetsGeometry?` | - | Sets padding for the message input field |
-| `sendButtonView` | `Widget?` | - | Custom send button widget |
-| `attachmentIcon` | `Widget?` | - | Custom attachment icon |
-| `attachmentIconURL` | `String?` | - | Path of the icon to show in the attachments button |
-| `voiceRecordingIcon` | `Widget?` | - | Custom voice recording icon |
-| `aiIcon` | `Widget?` | - | Custom AI button icon |
-| `aiIconURL` | `String?` | - | Path of the icon to show in the AI button |
-| `aiIconPackageName` | `String?` | - | Package name for AI icon asset |
-| `auxiliaryButtonView` | `ComposerWidgetBuilder?` | - | UI component for auxiliary button |
-| `secondaryButtonView` | `ComposerWidgetBuilder?` | - | UI component for secondary button |
-| `auxiliaryButtonsAlignment` | `AuxiliaryButtonsAlignment?` | - | Controls position of auxiliary button view |
-| `hideVoiceRecordingButton` | `bool?` | `null` | Hide/display voice recording button |
-| `attachmentOptions` | `ComposerActionsBuilder?` | - | Provides options for file attachments |
-| `hideAttachmentButton` | `bool?` | `null` | Hide/display attachment button |
-| `hideImageAttachmentOption` | `bool?` | `null` | Hide/display image attachment option |
-| `hideVideoAttachmentOption` | `bool?` | `null` | Hide/display video attachment option |
-| `hideAudioAttachmentOption` | `bool?` | `null` | Hide/display audio attachment option |
-| `hideFileAttachmentOption` | `bool?` | `null` | Hide/display file attachment option |
-| `hidePollsOption` | `bool?` | `null` | Hide/display polls option |
-| `hideCollaborativeDocumentOption` | `bool?` | `null` | Hide/display collaborative document option |
-| `hideCollaborativeWhiteboardOption` | `bool?` | `null` | Hide/display collaborative whiteboard option |
-| `hideTakePhotoOption` | `bool?` | `null` | Hide/display take photo option |
-| `onSendButtonTap` | `Function(...)?` | - | Callback when send button is tapped |
-| `onError` | `OnError?` | - | Callback to handle errors |
-| `hideSendButton` | `bool?` | `null` | Hide/display the send button |
-| `hideStickersButton` | `bool?` | `null` | Hide/display the sticker button |
-| `sendButtonIcon` | `Widget?` | - | Custom send button icon |
-| `recorderStartButtonIcon` | `Widget?` | - | Custom icon for media recorder start button |
-| `recorderPauseButtonIcon` | `Widget?` | - | Custom icon for media recorder pause button |
-| `recorderDeleteButtonIcon` | `Widget?` | - | Custom icon for media recorder delete button |
-| `recorderStopButtonIcon` | `Widget?` | - | Custom icon for media recorder stop button |
-| `recorderSendButtonIcon` | `Widget?` | - | Custom icon for media recorder send button |
-| `disableMentionAll` | `bool` | `false` | Disables @all mentions in groups |
-| `mentionAllLabel` | `String?` | - | Custom label for group mentions |
-| `mentionAllLabelId` | `String?` | - | Custom label ID for group mentions |
-| `headerView` | `ComposerWidgetBuilder?` | - | Custom header view |
-| `footerView` | `ComposerWidgetBuilder?` | - | Custom footer view |
-| `textFormatters` | `List?` | - | List of text formatters |
-| `stateCallBack` | `Function(CometChatMessageComposerController)?` | - | Callback to access controller functions |
-
-
-
- Display user or group details in the header
-
-
- Display messages in a conversation
-
-
- Configure mentions look and feel
-
-
- Learn how to customize the look and feel
-
-
+***
+
+## V6 Architecture
+
+### Sub-Widget Decomposition
+
+| Widget | Purpose |
+|---|---|
+| `AttachmentOptionsOverlay` | Attachment picker overlay |
+| `MessageComposerAuxiliaryButtons` | Auxiliary button area |
+| `MessageComposerSecondaryButtons` | Secondary button area |
+| `MessageComposerSendButton` | Send button |
+| `MessageComposerSuggestionList` | Suggestion/mention list |
+| `ComposerAttachmentUtils` | Attachment utilities |
+
+### BLoC Architecture
+
+| Component | Description |
+|---|---|
+| `MessageComposerBloc` | Manages composer state |
+| `MessageComposerEvent` | Events: `SendTextMessage`, `SendMediaMessage`, `EditTextMessage`, `StartTyping`, `EndTyping`, etc. |
+| `MessageComposerState` | Composer state |
+
+### Use Cases
+
+| Use Case | Description |
+|---|---|
+| `SendTextMessageUseCase` | Sends text messages |
+| `SendMediaMessageUseCase` | Sends media messages |
+| `SendCustomMessageUseCase` | Sends custom messages |
+| `EditMessageUseCase` | Edits messages |
+| `TypingUseCases` | Start/end typing indicators |
+| `GetLoggedInUserUseCase` | Gets the logged-in user |
diff --git a/ui-kit/flutter/message-header.mdx b/ui-kit/flutter/message-header.mdx
index c2d9ded67..f723cfbb7 100644
--- a/ui-kit/flutter/message-header.mdx
+++ b/ui-kit/flutter/message-header.mdx
@@ -1,109 +1,39 @@
---
title: "Message Header"
-description: "Widget that showcases the User or Group details in the toolbar with typing indicator and back navigation button."
+description: "Configure CometChat Flutter UI Kit Message Header with user or group details, presence, typing indicators, navigation, and actions."
---
-
-```json
-{
- "component": "CometChatMessageHeader",
- "package": "cometchat_chat_uikit",
- "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
- "description": "Widget that showcases the User or Group details in the toolbar with typing indicator and back navigation button.",
- "props": {
- "data": {
- "user": { "type": "User?", "default": "null" },
- "group": { "type": "Group?", "default": "null" }
- },
- "callbacks": {
- "onBack": "VoidCallback?",
- "newChatButtonClick": "VoidCallback?",
- "chatHistoryButtonClick": "VoidCallback?"
- },
- "visibility": {
- "showBackButton": { "type": "bool?", "default": "true" },
- "hideVideoCallButton": { "type": "bool?", "default": "false" },
- "hideVoiceCallButton": { "type": "bool?", "default": "false" },
- "usersStatusVisibility": { "type": "bool?", "default": "true" },
- "hideNewChatButton": { "type": "bool?", "default": "false" },
- "hideChatHistoryButton": { "type": "bool?", "default": "false" }
- },
- "viewSlots": {
- "backButton": "WidgetBuilder?",
- "subtitleView": "Widget? Function(Group? group, User? user, BuildContext context)?",
- "listItemView": "Widget Function(Group? group, User? user, BuildContext context)?",
- "trailingView": "List? Function(User? user, Group? group, BuildContext context)?",
- "leadingStateView": "Widget? Function(Group? group, User? user, BuildContext context)?",
- "titleView": "Widget? Function(Group? group, User? user, BuildContext context)?",
- "auxiliaryButtonView": "Widget? Function(Group? group, User? user, BuildContext context)?"
- },
- "style": {
- "messageHeaderStyle": "CometChatMessageHeaderStyle?",
- "listItemStyle": "ListItemStyle?"
- },
- "layout": {
- "avatarHeight": { "type": "double?", "default": "null" },
- "avatarWidth": { "type": "double?", "default": "null" },
- "height": { "type": "double?", "default": "65" },
- "padding": { "type": "EdgeInsetsGeometry?", "default": "null" }
- },
- "icons": {
- "menuIcon": "Widget?",
- "newChatIcon": "IconData?",
- "chatHistoryIcon": "IconData?"
- },
- "formatting": {
- "dateTimeFormatterCallback": "DateTimeFormatterCallback?"
- }
- },
- "sdkListeners": [
- "onUserOnline",
- "onUserOffline",
- "onTypingStarted",
- "onTypingEnded",
- "onGroupMemberJoined",
- "onGroupMemberLeft",
- "onGroupMemberKicked",
- "onGroupMemberBanned",
- "onMemberAddedToGroup"
- ]
-}
-```
-
-
-## Overview
-`CometChatMessageHeader` is a [Widget](/ui-kit/flutter/components-overview#components) that showcases the [User](/sdk/flutter/users-overview) or [Group](/sdk/flutter/groups-overview) details in the toolbar. Furthermore, it also presents a typing indicator and a back navigation button for ease of use.
+`CometChatMessageHeader` renders the header of a chat conversation showing user/group avatar, name, online/offline status, typing indicators, back navigation, and action buttons (call buttons, menu).
-The `CometChatMessageHeader` is comprised of the following components:
-
-| Components | Description |
-| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| [ListItem Widget](/ui-kit/flutter/components-overview) | This component’s widget consists of avatar, status indicator , title, and subtitle. The fields are then mapped with the SDK’s user, group class. |
-| Back Button | BackButton that allows users to navigate back from the current activity or screen to the previous one |
-
-## Usage
-
-### Integration
+---
-You can launch `CometChatMessageHeader` directly using `Navigator.push`, or you can define it as a widget within the `build` method of your `State` class.
+## Where It Fits
-##### 1. Using Navigator to Launch `CometChatMessageHeader`
+`CometChatMessageHeader` is a toolbar component. It sits at the top of a chat screen above `CometChatMessageList` and `CometChatMessageComposer`. It automatically shows typing indicators and user presence in real-time.
```dart
-Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatMessageHeader())); // A user or group object is required to launch this widget.
+Scaffold(
+ body: Column(
+ children: [
+ CometChatMessageHeader(user: user),
+ Expanded(child: CometChatMessageList(user: user)),
+ CometChatMessageComposer(user: user),
+ ],
+ ),
+)
```
-
-
-##### 2. Embedding `CometChatMessageHeader` as a Widget in the build Method
+---
+
+## Quick Start
@@ -111,39 +41,51 @@ Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatMessage
import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
import 'package:flutter/material.dart';
-class MessageHeader extends StatefulWidget {
- const MessageHeader({super.key});
-
- @override
- State createState() => _MessageHeaderState();
-}
-
-class _MessageHeaderState extends State {
+class ChatScreen extends StatelessWidget {
+ final User user;
+ const ChatScreen({super.key, required this.user});
@override
Widget build(BuildContext context) {
return Scaffold(
- body: SafeArea(
- child: CometChatMessageHeader() // A user or group object is required to launch this widget.
- )
+ appBar: PreferredSize(
+ preferredSize: const Size.fromHeight(60),
+ child: CometChatMessageHeader(user: user),
+ ),
+ body: Column(
+ children: [
+ Expanded(child: CometChatMessageList(user: user)),
+ CometChatMessageComposer(user: user),
+ ],
+ ),
);
}
}
```
-
+
+For group chats, pass a `Group` object instead:
+
+
+
+```dart
+CometChatMessageHeader(group: group)
+```
+
-***
+Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()`, a user logged in, and a valid `User` or `Group` object.
+
+---
-### Actions
+## Actions and Events
-[Actions](/ui-kit/flutter/components-overview#actions) dictate how a widget functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the widget to fit your specific needs.
+### Callback Methods
-##### 1. onBack
+#### `onBack`
-Enhance your application's functionality by leveraging the `onBack` feature. This capability allows you to customize the behavior associated with navigating back within your app. Utilize the provided code snippet to override default behaviors and tailor the user experience according to your specific requirements.
+Fires when the user presses the back button.
@@ -151,420 +93,272 @@ Enhance your application's functionality by leveraging the `onBack` feature. Thi
CometChatMessageHeader(
user: user,
onBack: () {
- // TODO("Not yet implemented")
+ Navigator.pop(context);
},
)
```
-
-
-***
-
-### Filters
-
-**Filters** allow you to customize the data displayed in a list within a `Widget`. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using `RequestBuilders` of Chat SDK.
+#### `onError`
-The `CometChatMessageHeader` widget does not have any exposed filters.
-
-***
-
-## Customization
-
-To fit your app's design requirements, you can customize the appearance of the conversation widget. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.
-
-## Style
-
-To customize the appearance, you can assign a `CometChatMessageHeaderStyle` object to the `CometChatMessageHeader` widget.
+Fires on internal errors.
```dart
CometChatMessageHeader(
user: user,
- messageHeaderStyle: CometChatMessageHeaderStyle(
- avatarStyle: CometChatAvatarStyle(
- backgroundColor: Color(0xFFFBAA75),
- borderRadius: BorderRadius.circular(6.67),
- ),
- callButtonsStyle: CometChatCallButtonsStyle(
- voiceCallIconColor: Color(0xFFF76808),
- videoCallIconColor: Color(0xFFF76808),
- ),
- )
+ onError: (e) {
+ debugPrint("Error: ${e.message}");
+ },
)
```
-
-
-
- 
-
+### SDK Events (Real-Time, Automatic)
-### CometChatMessageHeaderStyle Properties
-
-| Property | Data Type | Description |
-| ------------------------------------- | -------------------------------- | -------------------------------------------------------- |
-| `backgroundColor` | `Color?` | Background color for the message header. |
-| `border` | `BoxBorder?` | Border for the message header. |
-| `borderRadius` | `BorderRadiusGeometry?` | Border radius for the message header. |
-| `titleTextStyle` | `TextStyle?` | Text style for the title. |
-| `titleTextColor` | `Color?` | Color for the title text. |
-| `subtitleTextStyle` | `TextStyle?` | Text style for the subtitle. |
-| `subtitleTextColor` | `Color?` | Color for the subtitle text. |
-| `typingIndicatorTextStyle` | `TextStyle?` | Text style for the typing indicator. |
-| `onlineStatusColor` | `Color?` | Color for the online status indicator. |
-| `backIconColor` | `Color?` | Color for the back icon. |
-| `backIcon` | `Widget?` | Custom back icon widget. |
-| `privateGroupBadgeIcon` | `Widget?` | Icon for private group badge. |
-| `passwordProtectedGroupBadgeIcon` | `Widget?` | Icon for password protected group badge. |
-| `privateGroupBadgeIconColor` | `Color?` | Color for private group badge icon. |
-| `passwordProtectedGroupBadgeIconColor`| `Color?` | Color for password protected group badge icon. |
-| `groupIconBackgroundColor` | `Color?` | Background color for group icon. |
-| `avatarStyle` | `CometChatAvatarStyle?` | Style for the avatar. |
-| `callButtonsStyle` | `CometChatCallButtonsStyle?` | Style for call buttons. |
-| `statusIndicatorStyle` | `CometChatStatusIndicatorStyle?` | Style for status indicator. |
-| `newChatIconColor` | `Color?` | Color for the new chat icon. |
-| `chatHistoryIconColor` | `Color?` | Color for the chat history icon. |
-| `menuIconColor` | `Color?` | Color for the menu icon. |
-
-***
-
-### Functionality
-
-These are a set of small functional customizations that allow you to fine-tune the overall experience of the widget. With these, you can change text, set custom icons, and toggle the visibility of UI elements.
+The component listens to these SDK events internally. No manual setup needed.
-
-
-
+| SDK Listener | Internal behavior |
+|---|---|
+| `onUserOnline` / `onUserOffline` | Updates online/offline status and last seen |
+| `onTypingStarted` / `onTypingEnded` | Shows/hides typing indicator in subtitle |
+| `onGroupMemberJoined` / `onGroupMemberLeft` | Updates group member count |
+| `onGroupMemberKicked` / `onGroupMemberBanned` | Updates group member count |
+| `onMemberAddedToGroup` | Updates group member count |
+| `ccOwnershipChanged` | Updates group owner info |
+| `onUserBlocked` / `onUserUnblocked` | Updates user blocked state |
+| Connection reconnected | Refreshes user/group data |
-Here is a code snippet demonstrating how you can customize the functionality of the Message Header widget.
+---
-
-
-```dart
-CometChatMessageHeader(
- user: user,
- showBackButton: true,
- usersStatusVisibility: true,
-)
-```
+## Functionality
-
+| Property | Type | Default | Description |
+|---|---|---|---|
+| `user` | `User?` | `null` | User object for 1:1 chat header |
+| `group` | `Group?` | `null` | Group object for group chat header |
+| `showBackButton` | `bool?` | `true` | Toggle back button visibility |
+| `backButton` | `Widget?` | `null` | Custom back button widget |
+| `appBarOptions` | `List?` | `null` | Additional widgets in the app bar (e.g., call buttons, menu) |
+| `hideUserStatus` | `bool?` | `false` | Hide online/offline status for users |
+| `disableTypingIndicator` | `bool?` | `false` | Disable typing indicator display |
-
+---
+
+## Custom View Slots
+
+### Subtitle View
-## CometChatMessageHeader Properties
-
-Following is a list of customizations along with their corresponding code snippets:
-
-| Property | Data Type | Description |
-| --------------------- | ------------------------------------------------------------------------- | -------------------------------------------------------------- |
-| `backButton` | `WidgetBuilder?` | Used to set the back button widget. |
-| `subtitleView` | `Widget? Function(Group? group, User? user, BuildContext context)?` | To set subtitle view for the group or user. |
-| `user` | `User?` | Set `User` object, one is mandatory either `user` or `group`. |
-| `group` | `Group?` | Set `Group` object, one is mandatory either `user` or `group`. |
-| `listItemView` | `Widget Function(Group? group, User? user, BuildContext context)?` | Set custom view for list item. |
-| `messageHeaderStyle` | `CometChatMessageHeaderStyle?` | Set styling props for message header. |
-| `listItemStyle` | `ListItemStyle?` | Style for every list item. |
-| `trailingView` | `List? Function(User? user, Group? group, BuildContext context)?` | Set appbar options for the trailing view. |
-| `onBack` | `VoidCallback?` | Callback triggered on closing the screen. |
-| `avatarHeight` | `double?` | Set height for avatar. |
-| `avatarWidth` | `double?` | Set width for avatar. |
-| `height` | `double?` | Set height for message header. |
-| `padding` | `EdgeInsetsGeometry?` | Set padding for message header. |
-| `hideVideoCallButton` | `bool?` | Used to hide video call button. |
-| `hideVoiceCallButton` | `bool?` | Used to hide voice call button. |
-| `showBackButton` | `bool?` | Toggle visibility for back button. Defaults to `true`. |
-| `usersStatusVisibility` | `bool?` | Controls visibility of status indicator. Defaults to `true`. |
-| `options` | `List? Function(User? user, Group? group, BuildContext context)?` | Set menu options for the header. |
-| `menuIcon` | `Widget?` | Set custom menu icon widget. |
-| `leadingStateView` | `Widget? Function(Group? group, User? user, BuildContext context)?` | To set leading view for the message header. |
-| `titleView` | `Widget? Function(Group? group, User? user, BuildContext context)?` | To set the title view for the message header. |
-| `auxiliaryButtonView` | `Widget? Function(Group? group, User? user, BuildContext context)?` | To set auxiliary view for the message header. |
-| `dateTimeFormatterCallback` | `DateTimeFormatterCallback?` | Callback that can be used to format the date and time. |
-| `hideChatHistoryButton` | `bool?` | Hide chat history button. |
-| `hideNewChatButton` | `bool?` | Hide new chat button. |
-| `newChatButtonClick` | `VoidCallback?` | Callback triggered on new chat button click. |
-| `chatHistoryButtonClick` | `VoidCallback?` | Callback triggered on chat history button click. |
-| `newChatIcon` | `IconData?` | Provides new chat icon. |
-| `chatHistoryIcon` | `IconData?` | Provides chat history icon. |
-
-***
-
-### Advanced
-
-For advanced-level customization, you can set custom views to the widget. This lets you tailor each aspect of the widget to fit your exact needs and application aesthetics. You can create and define your own widget and then incorporate those into the widget.
-
-***
-
-#### auxiliaryButtonView
-
-Allows adding a custom button or additional action next to the title or trailing section.
-
-Use Cases:
-
-* Add a Call button (📞) for quick voice/video calls.
-* Include a Block/Report button for moderation.
-* Implement a Pin Chat feature.
+Replace the default subtitle (online status / typing indicator / member count).
```dart
CometChatMessageHeader(
- auxiliaryButtonView: (group, user, context) {
- // return auxiliary view
+ user: user,
+ subtitleView: (user, group) {
+ if (user != null) {
+ return Text(
+ user.status == "online" ? "Active now" : "Last seen recently",
+ style: TextStyle(color: Color(0xFF727272), fontSize: 12),
+ );
+ }
+ if (group != null) {
+ return Text(
+ "${group.membersCount} members",
+ style: TextStyle(color: Color(0xFF727272), fontSize: 12),
+ );
+ }
+ return null;
},
)
```
-
-
-***
-
-#### ListItemView
+### Leading View
-The `CometChatMessageHeader` widget consists of a `ListItemView`. You can customize the ListItem according to your requirements by using the `.setListItemView` method.
+Replace the avatar / left section.
```dart
CometChatMessageHeader(
user: user,
- listItemView: (Group? group, User? user, context) {
- return Placeholder(); // Replace this placeholder with your custom widget.
+ leadingView: (user, group) {
+ return CircleAvatar(
+ backgroundImage: NetworkImage(user?.avatar ?? ""),
+ child: user?.avatar == null ? Text(user?.name?[0] ?? "") : null,
+ );
},
)
```
-
-
-**Example**
+### Title View
-Here is the complete example for reference:
+Replace the name / title text.
-```dart main.dart
- CometChatMessageHeader(
- user: user,
- group: group,
- listItemView: (group, user, context) {
- return CometChatListItem(
- avatarURL: group != null ? group.icon : user?.avatar,
- avatarName: group != null ? group.name : user?.name,
- avatarStyle: CometChatAvatarStyle(
- borderRadius: BorderRadius.circular(6.67),
- backgroundColor: Color(0xFFAA9EE8)),
- title: group != null ? group.name : user?.name ?? "",
- subtitleView: Text(
- user != null
- ? (user.status == UserStatusConstants.online
- ? "Online"
- : "Offline")
- : "${group?.membersCount} members",
- style: TextStyle(
- color: Color(0xFF727272),
- fontSize: 14,
- fontWeight: FontWeight.w400,
- ),
- ),
- tailView: CometChatUIKit.getDataSource()
- .getAuxiliaryHeaderMenu(context, user, group, null),
- style: ListItemStyle(
- titleStyle: TextStyle(
- color: Color(0xFF141414),
- fontSize: 16,
- fontWeight: FontWeight.w500,
- ),
- ),
- );
- },
- ); // Replaced the placeholder with a custom widget.
+```dart
+CometChatMessageHeader(
+ user: user,
+ titleView: (user, group) {
+ return Text(
+ user?.name ?? group?.name ?? "",
+ style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
+ );
+ },
+)
```
-
-
-
- 
-
-
-***
+### Trailing View
-#### leadingStateView
-
-Defines a custom leading view, typically used for the receiver's profile picture or avatar.
-
-Use Cases:
-
-* Display a circular profile picture with a status indicator.
-* Add a custom badge for special roles (Admin, Verified ✅).
+Replace the right section (call buttons, menu, etc.).
```dart
CometChatMessageHeader(
- leadingStateView: (group, user, context) {
- // return leading view
+ user: user,
+ trailingView: (user, group) {
+ return Row(
+ mainAxisSize: MainAxisSize.min,
+ children: [
+ IconButton(icon: Icon(Icons.call), onPressed: () {}),
+ IconButton(icon: Icon(Icons.videocam), onPressed: () {}),
+ IconButton(icon: Icon(Icons.info_outline), onPressed: () {}),
+ ],
+ );
},
)
```
-
-
-***
+---
-#### SubtitleView
+## Common Patterns
-You can customize the subtitle widget for each item to meet your specific preferences and needs.
+### Header with info button for groups
```dart
- CometChatMessageHeader(
- user: user,
- subtitleView: (group, user, context) {
- String subtitle;
- if (group != null) {
- subtitle = "${group.membersCount} . ${group.description}";
- } else {
- subtitle = user?.status ?? '';
- }
- return Text(
- subtitle,
- style: TextStyle(
- fontSize: 12,
- fontWeight: FontWeight.w400,
- color: Color(0XFF727272),
- ),
- );
+CometChatMessageHeader(
+ group: group,
+ trailingView: (user, group) {
+ return IconButton(
+ icon: Icon(Icons.info_outline),
+ onPressed: () {
+ Navigator.push(context, MaterialPageRoute(
+ builder: (context) => GroupInfoScreen(group: group!),
+ ));
},
- )
+ );
+ },
+)
```
-
-
-
- 
-
-
-***
-
-#### trailingView
-
-You can set the Custom `trailingView` to the `CometChatMessageHeader` widget.
+### Hide back button (embedded in tab layout)
```dart
CometChatMessageHeader(
user: user,
- trailingView: (User? user, Group? group, BuildContext context) {
- return [
- IconButton(
- onPressed: () {},
- icon: Icon(
- Icons.info_outline,
- color: Color(0xFF141414),
- ),
- )
- ];
- },
+ showBackButton: false,
)
```
-
-
-***
+---
+
+## Advanced
-#### Options Menu
+### BLoC Access
-You can add custom menu options to the message header using the `options` property. These options appear in a popup menu when the menu icon is tapped.
+Provide a custom `MessageHeaderBloc`:
```dart
CometChatMessageHeader(
user: user,
- options: (User? user, Group? group, BuildContext context) {
- return [
- CometChatOption(
- id: "view_profile",
- title: "View Profile",
- icon: Icons.person,
- onClick: () {
- // Handle view profile action
- },
- ),
- CometChatOption(
- id: "block_user",
- title: "Block User",
- icon: Icons.block,
- onClick: () {
- // Handle block user action
- },
- ),
- ];
- },
+ messageHeaderBloc: CustomMessageHeaderBloc(),
)
```
-
-
-***
+### Public BLoC Methods
+
+| Method | Returns | Description |
+|---|---|---|
+| `getTypingNotifier()` | `ValueNotifier` | Typing indicator notifier for isolated rebuilds |
-#### BackIcon
+---
-You can customize the Back Icon according to your specific requirements by using the `.backButton` method.
+## Style
```dart
CometChatMessageHeader(
user: user,
- backButton: (context) {
- return IconButton(
- icon: Icon(Icons.add_alert_outlined, color: Color(0xFF6851D6)),
- onPressed: () {
- // Navigator.pop(context);
- },
- );
- },
+ messageHeaderStyle: CometChatMessageHeaderStyle(
+ backgroundColor: Colors.white,
+ avatarStyle: CometChatAvatarStyle(
+ borderRadius: BorderRadius.circular(8),
+ ),
+ statusIndicatorStyle: CometChatStatusIndicatorStyle(),
+ typingIndicatorStyle: CometChatTypingIndicatorStyle(),
+ ),
)
```
-
-
-
-
-
+
+
+
-
+### Style Properties
-
-
+| Property | Description |
+|---|---|
+| `backgroundColor` | Header background color |
+| `avatarStyle` | Avatar appearance |
+| `statusIndicatorStyle` | Online/offline indicator |
+| `typingIndicatorStyle` | Typing indicator text style |
-
+See [Component Styling](/ui-kit/flutter/component-styling) for the full reference.
-
+---
-***
+## Next Steps
+
+
+
+ Display messages in a conversation
+
+
+ Compose and send messages
+
+
+ Add voice and video call buttons
+
+
+ Detailed styling reference
+
+
diff --git a/ui-kit/flutter/message-list.mdx b/ui-kit/flutter/message-list.mdx
index 6940db894..762acc616 100644
--- a/ui-kit/flutter/message-list.mdx
+++ b/ui-kit/flutter/message-list.mdx
@@ -1,184 +1,70 @@
---
title: "Message List"
-description: "A composite widget that displays a list of messages with real-time operations"
+description: "Scrollable list of messages for a conversation with real-time updates, reactions, threaded replies, and message actions."
---
-
-```json
-{
- "component": "CometChatMessageList",
- "package": "cometchat_chat_uikit",
- "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
- "description": "A composite widget that displays a list of messages with real-time operations. Includes various message types such as Text Messages, Media Messages, Stickers, and more.",
- "primaryOutput": {
- "prop": "onThreadRepliesClick",
- "type": "void Function(BaseMessage, BuildContext, {CometChatMessageTemplate?})?"
- },
- "props": {
- "data": {
- "user": {
- "type": "User?",
- "default": "null",
- "note": "User object for user message list (one of user or group is required)"
- },
- "group": {
- "type": "Group?",
- "default": "null",
- "note": "Group object for group message list (one of user or group is required)"
- },
- "messagesRequestBuilder": {
- "type": "MessagesRequestBuilder?",
- "default": "null",
- "note": "Custom request builder for filtering messages"
- },
- "templates": {
- "type": "List?",
- "default": "null",
- "note": "Message templates for the list"
- }
- },
- "callbacks": {
- "onThreadRepliesClick": "void Function(BaseMessage, BuildContext, {CometChatMessageTemplate?})?",
- "onError": "OnError?",
- "onLoad": "OnLoad?",
- "onEmpty": "OnEmpty?",
- "onReactionClick": "Function(String?, BaseMessage)?",
- "onReactionLongPress": "Function(String?, BaseMessage)?",
- "onReactionListItemClick": "Function(String?, BaseMessage?)?"
- },
- "visibility": {
- "hideTimestamp": { "type": "bool?", "default": null },
- "avatarVisibility": { "type": "bool?", "default": true },
- "receiptsVisibility": { "type": "bool?", "default": true },
- "disableReactions": { "type": "bool?", "default": false },
- "hideStickyDate": { "type": "bool?", "default": false },
- "hideReplyInThreadOption": { "type": "bool?", "default": false },
- "hideEditMessageOption": { "type": "bool?", "default": false },
- "hideDeleteMessageOption": { "type": "bool?", "default": false },
- "hideGroupActionMessages": { "type": "bool?", "default": false }
- },
- "sound": {
- "disableSoundForMessages": { "type": "bool?", "default": null },
- "customSoundForMessages": { "type": "String?", "default": null }
- },
- "viewSlots": {
- "loadingStateView": "WidgetBuilder?",
- "emptyStateView": "WidgetBuilder?",
- "errorStateView": "WidgetBuilder?",
- "headerView": "Widget? Function(BuildContext, {User?, Group?, int?})?",
- "footerView": "Widget? Function(BuildContext, {User?, Group?, int?})?"
- },
- "formatting": {
- "alignment": { "type": "ChatAlignment", "default": "ChatAlignment.standard" },
- "datePattern": { "type": "String Function(BaseMessage)?", "default": null },
- "dateSeparatorPattern": { "type": "String Function(DateTime)?", "default": null }
- }
- },
- "events": [],
- "sdkListeners": [
- "onMessageReceived",
- "onMessageEdited",
- "onMessageDeleted",
- "onTypingStarted",
- "onTypingEnded"
- ],
- "compositionExample": {
- "description": "CometChatMessageList is typically used within CometChatMessages, paired with CometChatMessageHeader and CometChatMessageComposer",
- "components": ["CometChatMessageHeader", "CometChatMessageComposer", "CometChatMessages"],
- "flow": "User/Group → MessageList displays messages → Real-time updates via SDK listeners"
- },
- "types": {
- "CometChatMessageListStyle": {
- "backgroundColor": "Color?",
- "border": "BoxBorder?",
- "borderRadius": "BorderRadiusGeometry?",
- "incomingMessageBubbleStyle": "CometChatIncomingMessageBubbleStyle?",
- "outgoingMessageBubbleStyle": "CometChatOutgoingMessageBubbleStyle?",
- "avatarStyle": "CometChatAvatarStyle?"
- }
- }
-}
-```
-
-
-## Where It Fits
+`CometChatMessageList` renders a scrollable list of messages for a conversation with real-time updates for new messages, edits, deletions, reactions, and threaded replies.
-`CometChatMessageList` is a [Composite Widget](/ui-kit/flutter/components-overview#composite-components) that displays a list of messages and effectively manages real-time operations. It includes various types of messages such as Text Messages, Media Messages, Stickers, and more.
+---
-`CometChatMessageList` is primarily a list of the base widget [MessageBubble](/ui-kit/flutter/message-bubble-styling). The MessageBubble Widget is utilized to create different types of chat bubbles depending on the message type.
+## Where It Fits
-
- 
-
+`CometChatMessageList` is a message display component. It requires either a `User` or `Group` object to fetch and render messages. Wire it with `CometChatMessageHeader` and `CometChatMessageComposer` to build a complete messaging layout.
```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
-// CometChatMessageList is typically used within CometChatMessages
-// or as part of a custom messaging screen
-class MessagingScreen extends StatelessWidget {
- final User user;
-
- const MessagingScreen({required this.user});
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: Column(
- children: [
- CometChatMessageHeader(user: user),
- Expanded(child: CometChatMessageList(user: user)),
- CometChatMessageComposer(user: user),
- ],
- ),
- );
- }
-}
+CometChatMessageList(
+ user: user,
+)
```
-## Minimal Render
+---
+
+## Quick Start
-The simplest way to render `CometChatMessageList`:
+Using Navigator:
```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatMessageList(user: user)));
+```
+
+
-// For a user conversation
-CometChatMessageList(
- user: user,
-)
+Embedding as a widget:
-// For a group conversation
-CometChatMessageList(
- group: group,
-)
+
+
+```dart
+@override
+Widget build(BuildContext context) {
+ return Scaffold(
+ body: SafeArea(
+ child: CometChatMessageList(
+ user: user, // or group: group
+ ),
+ ),
+ );
+}
```
+Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()`, a user logged in, and the UI Kit dependency added.
+
-Simply adding the `MessageList` component to the layout will only display the loading indicator. To fetch messages for a specific entity, you need to supplement it with `User` or `Group` Object.
+Simply adding the `MessageList` component to the layout will only display the loading indicator. You must supply a `User` or `Group` object to fetch messages.
+---
-## Filtering CometChatMessageList
-
-Use the `messagesRequestBuilder` prop to filter which messages appear in the list.
-
-### Filter Recipes
+## Filtering
-| Recipe | Code |
-|--------|------|
-| Limit messages | `MessagesRequestBuilder()..limit = 30` |
-| Search messages | `MessagesRequestBuilder()..searchKeyword = "keyword"` |
-| Filter by type | `MessagesRequestBuilder()..types = ["text"]` |
-| Filter by category | `MessagesRequestBuilder()..categories = ["message"]` |
+Pass a `MessagesRequestBuilder` to control what loads:
@@ -187,7 +73,7 @@ CometChatMessageList(
user: user,
messagesRequestBuilder: MessagesRequestBuilder()
..uid = user.uid
- ..searchKeyword = "searchKeyword"
+ ..searchKeyword = "hello"
..limit = 30,
)
```
@@ -195,31 +81,18 @@ CometChatMessageList(
-The following parameters in messageRequestBuilder will always be altered inside the message list:
-1. UID
-2. GUID
-3. types
-4. categories
+The following parameters in `MessagesRequestBuilder` will always be altered inside the message list: UID, GUID, types, categories.
-For the full MessagesRequestBuilder API, see the [SDK documentation](/sdk/flutter/additional-message-filtering).
+---
## Actions and Events
-### Callback Props
+### Callback Methods
-Component-level callbacks that fire on specific user interactions:
+#### `onThreadRepliesClick`
-| Callback | Signature | Fires When |
-|----------|-----------|------------|
-| `onThreadRepliesClick` | `void Function(BaseMessage, BuildContext, {CometChatMessageTemplate?})?` | User clicks on thread indicator |
-| `onError` | `OnError?` | An error occurs while fetching messages |
-| `onLoad` | `OnLoad?` | List is successfully fetched and loaded |
-| `onEmpty` | `OnEmpty?` | List is empty |
-| `onReactionClick` | `Function(String?, BaseMessage)?` | User clicks on a reaction pill |
-| `onReactionLongPress` | `Function(String?, BaseMessage)?` | User long presses on a reaction pill |
-| `onReactionListItemClick` | `Function(String?, BaseMessage?)?` | User clicks on a reaction list item |
-| `addMoreReactionTap` | `Function(BaseMessage)?` | User clicks "Add More Reactions" button |
+Fires when a user taps a threaded message bubble.
@@ -227,138 +100,160 @@ Component-level callbacks that fire on specific user interactions:
CometChatMessageList(
user: user,
onThreadRepliesClick: (message, context, {template}) {
- // Handle thread replies click
- },
- onError: (e) {
- // Handle error
- },
- onLoad: (list) {
- print("Messages loaded: ${list.length}");
- },
- onEmpty: () {
- print("No messages");
- },
- onReactionClick: (emoji, message) {
- // Handle reaction click
+ // Navigate to thread view
},
)
```
-### SDK Events (Real-Time, Automatic)
+#### `onError`
-The component automatically handles these SDK listeners for real-time updates:
+Fires on internal errors.
-| SDK Listener | Handled Automatically |
-|--------------|----------------------|
-| `onMessageReceived` | Adds new message to the list |
-| `onMessageEdited` | Updates edited message in the list |
-| `onMessageDeleted` | Removes deleted message from the list |
-| `onTypingStarted` | Shows typing indicator |
-| `onTypingEnded` | Hides typing indicator |
+
+
+```dart
+CometChatMessageList(
+ user: user,
+ onError: (e) {
+ debugPrint("Error: ${e.message}");
+ },
+)
+```
+
+
-## Custom View Slots
+#### `onLoad`
-Customize the appearance of `CometChatMessageList` by replacing default views with your own widgets.
+Fires when the list is successfully fetched and loaded.
-| Slot | Signature | Replaces |
-|------|-----------|----------|
-| `loadingStateView` | `WidgetBuilder?` | Loading spinner |
-| `emptyStateView` | `WidgetBuilder?` | Empty state display |
-| `errorStateView` | `WidgetBuilder?` | Error state display |
-| `headerView` | `Widget? Function(BuildContext, {User?, Group?, int?})?` | Header section |
-| `footerView` | `Widget? Function(BuildContext, {User?, Group?, int?})?` | Footer section |
-| `emptyChatGreetingView` | `WidgetBuilder?` | Empty chat greeting for AI |
-| `newMessageIndicatorView` | `WidgetBuilder?` | New message indicator |
+
+
+```dart
+CometChatMessageList(
+ user: user,
+ onLoad: (messages) {
+ debugPrint("Loaded ${messages.length}");
+ },
+)
+```
+
+
+
+#### `onEmpty`
-### Example: Custom Header View
+Fires when the list is empty after loading.
```dart
CometChatMessageList(
user: user,
- headerView: (context, {group, parentMessageId, user}) {
- return Container(
- width: double.maxFinite,
- color: Color(0xFFEDEAFA),
- padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
- child: Row(
- children: [
- Icon(Icons.notes_outlined, color: Color(0xFF6852D6)),
- SizedBox(width: 8),
- Text('Notes', style: TextStyle(color: Color(0xFF6852D6))),
- ],
- ),
- );
+ onEmpty: () {
+ debugPrint("No messages");
},
)
```
-
- 
-
+#### `onReactionClick`
-### Example: Custom Footer View
+Fires when a reaction pill is tapped.
```dart
CometChatMessageList(
user: user,
- footerView: (context, {group, parentMessageId, user}) {
- return Container(
- width: double.maxFinite,
- color: Color(0xFFEDEAFA),
- padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
- child: Row(
- children: [
- Icon(Icons.sunny, color: Color(0xFF6852D6)),
- SizedBox(width: 8),
- Text('Ice Breakers', style: TextStyle(color: Color(0xFF6852D6))),
- ],
- ),
- );
+ onReactionClick: (emoji, message) {
+ // Handle reaction click
},
)
```
-
- 
-
+#### `onReactionLongPress`
-### Example: Custom Loading State View
+Fires when a reaction pill is long-pressed.
```dart
CometChatMessageList(
user: user,
- loadingStateView: (context) {
- return Center(
- child: CircularProgressIndicator(),
- );
+ onReactionLongPress: (emoji, message) {
+ // Handle reaction long press
},
)
```
-### Example: Custom Empty State View
+### SDK Events (Real-Time, Automatic)
+
+The component listens to SDK message events internally. No manual setup needed.
+
+| SDK Listener | Internal behavior |
+| --- | --- |
+| `onTextMessageReceived` / `onMediaMessageReceived` / `onCustomMessageReceived` | Inserts new message with animation |
+| `onMessageEdited` | Updates message in-place |
+| `onMessageDeleted` | Removes or marks message as deleted |
+| `onMessagesDelivered` / `onMessagesRead` | Updates receipt status via ValueNotifier |
+| `onTypingStarted` / `onTypingEnded` | Updates typing indicator |
+| `onMessageReactionAdded` / `onMessageReactionRemoved` | Updates reaction counts |
+| Connection reconnected | Triggers silent sync to fetch missed messages |
+
+---
+
+## Functionality
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `user` | `User?` | required* | User for 1-on-1 conversation |
+| `group` | `Group?` | required* | Group for group conversation |
+| `parentMessageId` | `int?` | `null` | Parent message ID for thread replies |
+| `alignment` | `ChatAlignment` | `standard` | Chat alignment setting |
+| `hideDeletedMessages` | `bool` | `false` | Hide deleted messages entirely |
+| `disableReceipts` | `bool` | `false` | Disable read/delivery receipts |
+| `disableSoundForMessages` | `bool` | `false` | Disable message sounds |
+| `hideReplies` | `bool` | `true` | Hide thread replies in main conversation |
+| `hideGroupActionMessages` | `bool?` | `false` | Hide group action messages |
+| `hideTimestamp` | `bool?` | `null` | Toggle timestamp visibility |
+| `hideDateSeparator` | `bool?` | `false` | Hide date separators |
+| `hideStickyDate` | `bool?` | `false` | Hide floating sticky date header |
+| `avatarVisibility` | `bool?` | `true` | Toggle avatar visibility |
+| `receiptsVisibility` | `bool?` | `true` | Toggle read receipts |
+| `disableReactions` | `bool?` | `false` | Toggle reactions |
+| `enableSwipeToReply` | `bool` | `true` | Enable swipe-to-reply gesture |
+| `startFromUnreadMessages` | `bool` | `false` | Scroll to first unread on open |
+| `showMarkAsUnreadOption` | `bool` | `false` | Show "Mark as Unread" in long-press options |
+| `goToMessageId` | `int?` | `null` | Scroll to a specific message after load |
+| `hideFlagOption` | `bool` | `false` | Hide the Flag/Report option from message long-press actions |
+| `hideFlagRemarkField` | `bool` | `false` | Hide the optional remark/context text field in the flag dialog |
+| `flagReasonLocalizer` | `String Function(String reasonId)?` | `null` | Custom localizer that converts a flag-reason ID into a display string |
+
+\* One of `user` or `group` is required.
+
+---
+
+## Custom View Slots
+
+### Header View
+
+Custom view displayed at the top of the message list.
```dart
CometChatMessageList(
user: user,
- emptyStateView: (context) {
- return Center(
- child: Text("No messages yet. Start the conversation!"),
+ headerView: (context, {user, group, parentMessageId}) {
+ return Container(
+ padding: EdgeInsets.all(8),
+ child: Text("Pinned Messages"),
);
},
)
@@ -366,27 +261,19 @@ CometChatMessageList(
-### Example: Custom Error State View
+### Footer View
+
+Custom view displayed at the bottom of the message list.
```dart
CometChatMessageList(
user: user,
- errorStateView: (context) {
- return Center(
- child: Column(
- mainAxisAlignment: MainAxisAlignment.center,
- children: [
- Text("Couldn't load messages"),
- ElevatedButton(
- onPressed: () {
- // Retry logic
- },
- child: Text("Retry"),
- ),
- ],
- ),
+ footerView: (context, {user, group, parentMessageId}) {
+ return Container(
+ padding: EdgeInsets.all(8),
+ child: Text("End of messages"),
);
},
)
@@ -394,107 +281,61 @@ CometChatMessageList(
-
-## Styling
-
-Customize the appearance of `CometChatMessageList` using `CometChatMessageListStyle`.
-
-### Style Properties
-
-| Property | Type | Description |
-|----------|------|-------------|
-| `backgroundColor` | `Color?` | Background color of the message list |
-| `border` | `BoxBorder?` | Border of the message list |
-| `borderRadius` | `BorderRadiusGeometry?` | Border radius of the message list |
-| `avatarStyle` | `CometChatAvatarStyle?` | Style for avatar in message bubble |
-| `emptyStateTextStyle` | `TextStyle?` | Style for empty state text |
-| `emptyStateTextColor` | `Color?` | Color for empty state text |
-| `emptyStateSubtitleStyle` | `TextStyle?` | Style for empty state subtitle |
-| `emptyStateSubtitleColor` | `Color?` | Color for empty state subtitle |
-| `errorStateTextStyle` | `TextStyle?` | Style for error state text |
-| `errorStateTextColor` | `Color?` | Color for error state text |
-| `errorStateSubtitleStyle` | `TextStyle?` | Style for error state subtitle |
-| `errorStateSubtitleColor` | `Color?` | Color for error state subtitle |
-| `incomingMessageBubbleStyle` | `CometChatIncomingMessageBubbleStyle?` | Style for incoming message bubble |
-| `outgoingMessageBubbleStyle` | `CometChatOutgoingMessageBubbleStyle?` | Style for outgoing message bubble |
-| `messageInformationStyle` | `CometChatMessageInformationStyle?` | Style for message information |
-| `messageOptionSheetStyle` | `CometChatMessageOptionSheetStyle?` | Style for message option sheet |
-| `mentionsStyle` | `CometChatMentionsStyle?` | Style for mentions |
-| `actionBubbleStyle` | `CometChatActionBubbleStyle?` | Style for group action bubbles |
-| `reactionListStyle` | `CometChatReactionListStyle?` | Style for reaction list |
-| `reactionsStyle` | `CometChatReactionsStyle?` | Style for reactions |
-| `aiSmartRepliesStyle` | `CometChatAISmartRepliesStyle?` | Style for smart replies |
-| `aiConversationStarterStyle` | `CometChatAIConversationStarterStyle?` | Style for conversation starter |
-| `aiConversationSummaryStyle` | `CometChatAIConversationSummaryStyle?` | Style for conversation summary |
-| `aiAssistantSuggestedMessageTextStyle` | `TextStyle?` | Text style for AI suggested messages |
-| `aiAssistantSuggestedMessageTextColor` | `Color?` | Text color for AI suggested messages |
-| `aiAssistantSuggestedMessageBorder` | `Border?` | Border for AI suggested messages |
-| `aiAssistantSuggestedMessageBorderRadius` | `BorderRadius?` | Border radius for AI suggested messages |
-| `aiAssistantSuggestedMessageBackgroundColor` | `Color?` | Background color for AI suggested messages |
-| `aiAssistantSuggestedMessageIconColor` | `Color?` | Icon color for AI suggested messages |
-| `emptyChatGreetingTitleTextColor` | `Color?` | Text color for empty chat greeting title |
-| `emptyChatGreetingTitleTextStyle` | `TextStyle?` | Text style for empty chat greeting title |
-| `emptyChatGreetingSubtitleTextColor` | `Color?` | Text color for empty chat greeting subtitle |
-| `emptyChatGreetingSubtitleTextStyle` | `TextStyle?` | Text style for empty chat greeting subtitle |
-| `flagMessageStyle` | `CometchatFlagMessageStyle?` | Style for flag message dialog |
-| `newMessageIndicatorStyle` | `CometChatNewMessageIndicatorStyle?` | Style for new message indicator |
-
-### Example: Custom Styling
+### State Views
```dart
CometChatMessageList(
user: user,
- style: CometChatMessageListStyle(
- backgroundColor: Color(0xFFFEEDE1),
- outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- ),
- ),
+ emptyStateView: (context) => Center(child: Text("No messages yet")),
+ errorStateView: (context) => Center(child: Text("Something went wrong")),
+ loadingStateView: (context) => Center(child: CircularProgressIndicator()),
+ emptyChatGreetingView: (context) => Center(child: Text("Say hello!")),
)
```
-
-
-
-
-### Example: Custom Avatar Style
+### Text Formatters (Mentions)
```dart
CometChatMessageList(
user: user,
- style: CometChatMessageListStyle(
- avatarStyle: CometChatAvatarStyle(
- border: Border.all(width: 5),
- borderRadius: 20,
- backgroundColor: Colors.red,
- ),
- ),
+ textFormatters: [
+ CometChatMentionsFormatter(),
+ ],
)
```
-### Example: Custom Mentions Style
+### Message Templates
+
+Override or extend message bubble rendering:
```dart
+// Replace all templates
CometChatMessageList(
user: user,
- textFormatters: [
- CometChatMentionsFormatter(
- style: CometChatMentionsStyle(
- mentionSelfTextBackgroundColor: Color(0xFFF76808),
- mentionTextBackgroundColor: Colors.white,
- mentionTextColor: Colors.black,
- mentionSelfTextColor: Colors.white,
- ),
+ templates: getCustomTemplates(),
+)
+
+// Add/override specific templates (merged with defaults)
+CometChatMessageList(
+ user: user,
+ addTemplate: [
+ CometChatMessageTemplate(
+ type: MessageTypeConstants.text,
+ category: MessageCategoryConstants.message,
+ contentView: (message, context, alignment, {additionalConfigurations}) {
+ return Text((message as TextMessage).text,
+ style: TextStyle(color: Colors.red));
+ },
),
],
)
@@ -502,214 +343,251 @@ CometChatMessageList(
-
-
-
+See [Message Template](/ui-kit/flutter/message-template) for the full template structure.
-## Advanced
+---
-### Message Templates
+## Message Option Visibility
+
+| Property | Default | Description |
+| --- | --- | --- |
+| `hideCopyMessageOption` | `false` | Hide "Copy Message" |
+| `hideDeleteMessageOption` | `false` | Hide "Delete Message" |
+| `hideEditMessageOption` | `false` | Hide "Edit Message" |
+| `hideMessageInfoOption` | `false` | Hide "Message Info" |
+| `hideMessagePrivatelyOption` | `false` | Hide "Message Privately" |
+| `hideReactionOption` | `false` | Hide "Reaction" |
+| `hideReplyInThreadOption` | `false` | Hide "Reply in Thread" |
+| `hideTranslateMessageOption` | `false` | Hide "Translate Message" |
+| `hideShareMessageOption` | `false` | Hide "Share Message" |
+| `hideModerationView` | `null` | Hide moderation view |
+
+---
+
+## Common Patterns
-[CometChatMessageTemplate](/ui-kit/flutter/message-template) is a pre-defined structure for creating message views that can be used as a starting point or blueprint for creating message bubbles.
+### Thread replies view
```dart
-List getTemplate() {
- // Creating a text template
- CometChatMessageTemplate textTemplate = ChatConfigurator.getDataSource().getTextMessageTemplate();
- textTemplate.contentView = (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment, {AdditionalConfigurations? additionalConfigurations}) {
- return Padding(
- padding: const EdgeInsets.all(8.0),
- child: Text(
- (baseMessage as TextMessage).text,
- style: TextStyle(
- color: alignment == BubbleAlignment.left ? Colors.deepPurple : Colors.yellow,
- fontSize: 14,
- fontWeight: FontWeight.bold,
- ),
- ),
- );
- };
-
- // Creating a custom message template
- CometChatMessageTemplate customMessageTemplate = CometChatMessageTemplate(
- type: 'custom_template',
- category: 'custom_category',
- bubbleView: (message, context, alignment) => const Text('Custom message'),
- );
+CometChatMessageList(
+ user: user,
+ parentMessageId: parentMessage.id,
+)
+```
+
+
- return [textTemplate, customMessageTemplate];
-}
+### Jump to a specific message
-// Usage
+
+
+```dart
CometChatMessageList(
user: user,
- templates: getTemplate(),
+ goToMessageId: 12345,
)
```
+### Start from unread messages
+
-
-
-
-
-
+
+```dart
+CometChatMessageList(
+ user: user,
+ startFromUnreadMessages: true,
+)
+```
-### Date Separator Pattern
+### Flag / Report a message
-Customize the date separator pattern:
+Flag/report is available by default from the message long-press menu. Toggle its visibility and customize the dialog:
```dart
CometChatMessageList(
user: user,
- dateSeparatorPattern: (DateTime dateTime) {
- return DateFormat("dd/MM/yyyy").format(dateTime);
+ // hide the Flag option entirely
+ hideFlagOption: false,
+ // hide the optional "Remark" text field in the flag dialog
+ hideFlagRemarkField: false,
+ // localize reason IDs to your own display strings
+ flagReasonLocalizer: (reasonId) {
+ switch (reasonId) {
+ case 'spam':
+ return 'Spam or unsolicited';
+ case 'inappropriate':
+ return 'Inappropriate content';
+ default:
+ return reasonId;
+ }
},
)
```
+### Mark a message as unread
+
+Expose the "Mark as Unread" option in the long-press menu:
+
-
-
-
-
-
+
+```dart
+CometChatMessageList(
+ user: user,
+ showMarkAsUnreadOption: true,
+)
+```
-### Date Pattern
+---
-Customize the date pattern for message receipts:
+## Advanced
+
+### BLoC Access
+
+Provide a custom `MessageListBloc` to override behavior:
```dart
CometChatMessageList(
user: user,
- datePattern: (message) {
- return DateFormat('EEE, M/d/y').format(message.sentAt!);
- },
+ messageListBloc: CustomMessageListBloc(user: user),
)
```
+### Extending MessageListBloc
+
+`MessageListBloc` uses the `ListBase` mixin with override hooks:
+
-
-
+
+```dart
+class CustomMessageListBloc extends MessageListBloc {
+ CustomMessageListBloc({required User user}) : super(user: user);
+
+ @override
+ void onItemAdded(BaseMessage item, List updatedList) {
+ // Custom logic when a message is added
+ super.onItemAdded(item, updatedList);
+ }
+}
+```
-
-
+
+
+For `ListBase` override hooks (`onItemAdded`, `onItemRemoved`, `onItemUpdated`, `onListCleared`, `onListReplaced`), see [BLoC & Data — ListBase Hooks](/ui-kit/flutter/customization-bloc-data#listbase-hooks).
+
+### Public BLoC Events
+
+| Event | Description |
+| --- | --- |
+| `LoadMessages(conversationWith, conversationType)` | Load initial messages |
+| `LoadOlderMessages()` | Load older messages (scroll up) |
+| `LoadNewerMessages()` | Load newer messages (scroll down) |
+| `RefreshMessages()` | Refresh from the latest |
+| `SyncMessages()` | Silently sync missed messages |
+| `JumpToMessage(messageId)` | Jump to a specific message |
+| `AddReaction(message, reaction)` | Add a reaction |
+| `RemoveReaction(message, reaction)` | Remove a reaction |
+| `MarkMessageAsRead(message)` | Mark a message as read |
+| `MarkMessageAsUnread(...)` | Mark a message as unread |
+| `LoadFromUnread(conversationWith, conversationType)` | Load from first unread message |
+
+### Public BLoC Methods
+
+#### O(1) Lookup Methods
+
+| Method | Returns | Description |
+| --- | --- | --- |
+| `findMessageIndex(messageId)` | `int?` | Find message index by ID |
+| `findMessageIndexByMuid(muid)` | `int?` | Find message index by muid (pending messages) |
+| `findMessage(messageId)` | `BaseMessage?` | Get message by ID |
+| `findMessageByMuid(muid)` | `BaseMessage?` | Get message by muid |
+
+#### ValueNotifier Accessors (Isolated Rebuilds)
+
+| Method | Returns | Description |
+| --- | --- | --- |
+| `getReceiptNotifier(messageId)` | `ValueNotifier` | Per-message receipt status notifier |
+| `getReceiptNotifierForMessage(message)` | `ValueNotifier` | Receipt notifier handling both ID and muid |
+| `getTypingNotifier(conversationId)` | `ValueNotifier>` | Per-conversation typing notifier |
+| `getThreadReplyCountNotifier(parentMessageId)` | `ValueNotifier` | Per-message thread reply count notifier |
+
+#### MessageReceiptStatus Enum
+
+| Value | Description |
+| --- | --- |
+| `sending` | Message is being sent (id = 0) |
+| `sent` | Message has been sent to server |
+| `delivered` | Message has been delivered to recipient |
+| `read` | Message has been read by recipient |
+| `error` | Message failed to send |
+
+### Operations Stream
+
+The BLoC exposes an `operationsStream` consumed by `CometChatAnimatedMessageList` for smooth animations:
+
+| Operation | Description |
+| --- | --- |
+| `MessageOperation.insert(message, index)` | Insert a single message |
+| `MessageOperation.insertAll(messages, index)` | Insert a batch of messages |
+| `MessageOperation.update(oldMessage, newMessage, index)` | Replace a message in-place |
+| `MessageOperation.remove(message, index)` | Remove a message |
+| `MessageOperation.set(messages)` | Replace the entire list |
+
+---
+
+## Style
+
+
+
+```dart
+CometChatMessageList(
+ user: user,
+ style: CometChatMessageListStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ ),
+ incomingMessageBubbleStyle: CometChatIncomingMessageBubbleStyle(
+ backgroundColor: Colors.white,
+ ),
+ ),
+)
+```
+See [Component Styling](/ui-kit/flutter/component-styling) and [Message Bubble Styling](/ui-kit/flutter/message-bubble-styling) for the full reference.
-## Props Reference
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `user` | `User?` | `null` | User object for user message list |
-| `group` | `Group?` | `null` | Group object for group message list |
-| `messagesRequestBuilder` | `MessagesRequestBuilder?` | `null` | Custom request builder for filtering |
-| `style` | `CometChatMessageListStyle?` | - | Sets style for message list |
-| `scrollController` | `ScrollController?` | - | Controller for the message list |
-| `emptyStateText` | `String?` | - | Text when list is empty |
-| `errorStateText` | `String?` | - | Text when error occurs |
-| `loadingStateView` | `WidgetBuilder?` | - | View for loading state |
-| `emptyStateView` | `WidgetBuilder?` | - | View for empty state |
-| `errorStateView` | `WidgetBuilder?` | - | View for error state |
-| `disableSoundForMessages` | `bool?` | `null` | Disables sound for messages |
-| `customSoundForMessages` | `String?` | `null` | Custom sound URL |
-| `readIcon` | `Widget?` | - | Custom read icon |
-| `deliveredIcon` | `Widget?` | - | Custom delivered icon |
-| `sentIcon` | `Widget?` | - | Custom sent icon |
-| `waitIcon` | `Widget?` | - | Custom wait icon |
-| `alignment` | `ChatAlignment` | `standard` | Chat alignment setting |
-| `avatarVisibility` | `bool?` | `true` | Toggle avatar visibility |
-| `datePattern` | `String Function(BaseMessage)?` | - | Custom date pattern |
-| `hideTimestamp` | `bool?` | `null` | Toggle timestamp visibility |
-| `templates` | `List?` | - | Message templates |
-| `onThreadRepliesClick` | `ThreadRepliesClick?` | - | Thread replies callback |
-| `headerView` | `Widget? Function(...)?` | - | Custom header view |
-| `footerView` | `Widget? Function(...)?` | - | Custom footer view |
-| `dateSeparatorPattern` | `String Function(DateTime)?` | - | Date separator pattern |
-| `onError` | `OnError?` | - | Error callback |
-| `receiptsVisibility` | `bool?` | `true` | Toggle read receipts |
-| `dateSeparatorStyle` | `CometChatDateStyle?` | - | Date separator style |
-| `disableReactions` | `bool?` | `false` | Toggle reactions |
-| `addReactionIcon` | `Widget?` | - | Custom add reaction icon |
-| `favoriteReactions` | `List?` | - | Frequently used reactions |
-| `textFormatters` | `List?` | - | Text formatters |
-| `disableMentions` | `bool?` | `null` | Disable mentions |
-| `padding` | `EdgeInsetsGeometry?` | - | Padding for message list |
-| `margin` | `EdgeInsetsGeometry?` | - | Margin for message list |
-| `width` | `double?` | - | Width of message list |
-| `height` | `double?` | - | Height of message list |
-| `onLoad` | `OnLoad?` | - | Load callback |
-| `onEmpty` | `OnEmpty?` | - | Empty callback |
-| `onReactionClick` | `Function(String?, BaseMessage)?` | - | Reaction click callback |
-| `onReactionLongPress` | `Function(String?, BaseMessage)?` | - | Reaction long press callback |
-| `hideStickyDate` | `bool?` | `false` | Hide sticky date |
-| `hideReplyInThreadOption` | `bool?` | `false` | Hide reply in thread option |
-| `hideTranslateMessageOption` | `bool?` | `false` | Hide translate option |
-| `hideEditMessageOption` | `bool?` | `false` | Hide edit option |
-| `hideDeleteMessageOption` | `bool?` | `false` | Hide delete option |
-| `hideReactionOption` | `bool?` | `false` | Hide reaction option |
-| `hideMessagePrivatelyOption` | `bool?` | `false` | Hide message privately option |
-| `hideCopyMessageOption` | `bool?` | `false` | Hide copy option |
-| `hideMessageInfoOption` | `bool?` | `false` | Hide message info option |
-| `hideGroupActionMessages` | `bool?` | `false` | Hide group action messages |
-| `enableConversationStarters` | `bool?` | `false` | Enable conversation starters |
-| `enableSmartReplies` | `bool?` | `false` | Enable smart replies |
-| `hideShareMessageOption` | `bool?` | `false` | Hide share option |
-| `smartRepliesDelayDuration` | `int?` | `10000` | Smart replies delay (ms) |
-| `smartRepliesKeywords` | `List?` | - | Smart replies keywords |
-| `addTemplate` | `List?` | - | Add custom templates |
-| `dateTimeFormatterCallback` | `DateTimeFormatterCallback?` | - | Date time formatter |
-| `hideModerationView` | `bool?` | `null` | Hide moderation view |
-| `hideThreadView` | `bool?` | `null` | Hide thread view |
-| `suggestedMessages` | `List?` | - | AI assistant suggestions |
-| `hideSuggestedMessages` | `bool?` | `false` | Hide suggested messages |
-| `emptyChatGreetingView` | `WidgetBuilder?` | - | Empty chat greeting view |
-| `setAiAssistantTools` | `Map?` | - | AI assistant tools |
-| `streamingSpeed` | `int?` | - | AI streaming speed |
-| `hideDateSeparator` | `bool?` | `false` | Hide date separator |
-| `mentionAllLabel` | `String?` | - | Group mention label |
-| `mentionAllLabelId` | `String?` | - | Group mention label ID |
-| `hideFlagOption` | `bool?` | `false` | Hide report option |
-| `hideFlagRemarkField` | `bool?` | `false` | Hide flag remark field |
-| `startFromUnreadMessages` | `bool?` | `false` | Start from unread messages |
-| `showMarkAsUnreadOption` | `bool?` | `false` | Show mark as unread option |
-| `newMessageIndicatorView` | `WidgetBuilder?` | - | New message indicator view |
-| `enableConversationSummary` | `bool?` | `false` | Enable conversation summary |
-| `generateConversationSummary` | `bool?` | `false` | Generate conversation summary |
-| `hideReplyOption` | `bool?` | `false` | Hide reply option |
-| `flagReasonLocalizer` | `String Function(String)?` | - | Flag reason localizer |
-| `reactionsRequestBuilder` | `ReactionsRequestBuilder?` | - | Request builder for reactions |
-| `stateCallBack` | `Function(CometChatMessageListController)?` | - | Callback to access controller |
-| `customSoundForMessagePackage` | `String?` | - | Package name for custom sound |
-| `messageId` | `int?` | - | Specific message ID to scroll to |
+---
+
+## Next Steps
-
- Display user or group details in the header
+
+ Display user/group info in the app bar
-
- Compose and send messages
+
+ Rich input for sending messages
-
- Customize message bubble templates
+
+ Customize message bubble structure
-
- Learn how to customize the look and feel
+
+ Detailed styling reference
-
+
\ No newline at end of file
diff --git a/ui-kit/flutter/message-template.mdx b/ui-kit/flutter/message-template.mdx
index c78cbea09..68f0b9345 100644
--- a/ui-kit/flutter/message-template.mdx
+++ b/ui-kit/flutter/message-template.mdx
@@ -1,864 +1,252 @@
---
title: "Message Template"
-description: "Data structure defining how message bubbles render in CometChatMessageList — controls header, content, footer, bottom, status info, reply, and bubble views per message type and category."
+description: "Data structure for customizing CometChat Flutter UI Kit message bubbles, including content, header, footer, reply, and status views."
---
-
-```json
-{
- "component": "CometChatMessageTemplate",
- "kind": "model-class",
- "package": "cometchat_chat_uikit",
- "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
- "description": "Data structure defining how message bubbles render in CometChatMessageList. Each template maps a type+category pair to view functions.",
- "usage": "Pass a list of CometChatMessageTemplate instances to CometChatMessageList via the templates property.",
- "properties": {
- "type": { "type": "String", "required": true, "description": "CometChat message type" },
- "category": { "type": "String", "default": "\"\"", "description": "CometChat message category" },
- "headerView": { "type": "Function?", "default": "null", "description": "Custom header view builder function" },
- "contentView": { "type": "Function?", "default": "null", "description": "Custom content view builder function" },
- "footerView": { "type": "Function?", "default": "null", "description": "Custom footer view builder function" },
- "bottomView": { "type": "Function?", "default": "null", "description": "Custom bottom view builder function" },
- "bubbleView": { "type": "Function?", "default": "null", "description": "Replaces entire bubble" },
- "statusInfoView": { "type": "Function?", "default": "null", "description": "Custom status info view builder function" },
- "replyView": { "type": "Function?", "default": "null", "description": "Custom reply preview builder function" },
- "threadView": { "type": "Function?", "default": "null", "description": "Custom thread view builder function" },
- "options": { "type": "Function", "description": "Returns action sheet items for long-press" }
- },
- "relatedComponents": ["CometChatMessageList"],
- "events": null
-}
-```
-
-
## Overview
-A MessageTemplate provides you with the capability to define and customize both the structure and the behavior of the [MessageBubble](/ui-kit/flutter/message-bubble-styling). It acts as a schema or design blueprint for the creation of a variety of [MessageBubble](/ui-kit/flutter/message-bubble-styling) widgets, allowing you to manage the appearance and interactions of [MessageBubble](/ui-kit/flutter/message-bubble-styling) within your application effectively and consistently.
+A `CometChatMessageTemplate` provides the capability to define and customize both the structure and behavior of message bubbles. It acts as a blueprint for creating message bubble widgets, allowing you to manage appearance and interactions consistently.
### Structure
-
- 
-
-
-The MessageBubble structure can typically be broken down into the following widgets:
-
-1. **Leading widget**: This is where the sender's avatar is displayed. It's typically on the left of the MessageBubble for messages from others and on the right for messages from the current user.
-
-2. **Header widget**: This displays the sender's name and is especially useful in group chats where multiple users are sending messages.
+The MessageBubble structure can be broken down into:
-3. **Content widget**: This is the core of the MessageBubble where the message content (text, images, videos, etc.) is displayed.
-
-4. **Bottom widget**: This widget can be used to extend the MessageBubble with additional elements, such as link previews or a 'load more' button for long messages. It's typically placed beneath the Content widget.
-
-5. **Footer widget**: This is where the timestamp of the message and its delivery or read status are displayed. It's located at the bottom of the MessageBubble.
+1. Leading widget — Sender's avatar
+2. Header widget — Sender's name (useful in group chats)
+3. Content widget — Message content (text, images, videos, etc.)
+4. Bottom widget — Additional elements like link previews or "load more" buttons
+5. Footer widget — Timestamp and delivery/read status
### Properties
-MessageTemplate provides you with methods that allow you to alter various properties of the MessageBubble. These properties include aspects such as the `type` and `category` of a message, the appearance and behavior of the header, content, and footer sections of the message bubble,
-
-1. **Type**
-
- Using `type` you can set the type of CometChatMessage, This will map your MessageTemplate to the corresponding CometChatMessage. You can set the MessageTemplate Type using the following code snippet.
-
-
-
- ```dart
- CometChatMessageTemplate cometChatMessageTemplate = CometChatMessageTemplate(type: MessageTypeConstants.text);
- ```
-
-
-
-
-
-2. **Category**
-
- Using `category` you can set the category of a MessageTemplate. This will create a MessageTemplate with the specified category and link it with a CometChatMessage of the same category.
-
- Please refer to our guide on [Message Categories](/sdk/flutter/message-structure-and-hierarchy) for a deeper understanding of message categories.
-
-
-
- ```dart
- CometChatMessageTemplate cometChatMessageTemplate = CometChatMessageTemplate(category: MessageCategoryConstants.custom);
- ```
-
-
-
-
-
-3. **Header Widget**
-
- The. `headerView` property allows you to assign a custom header widget to the MessageBubble. By default, it is configured to display the sender's name.
-
-
-
- ```dart
- cometChatMessageTemplate.headerView = (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment) {
- return const Placeholder();
- };
- ```
-
-
-
-
-
-4. **Content Widget**
-
- The `contentView` method allows you to assign a custom content widget to the MessageBubble. By default, it displays the [Text Bubble](/ui-kit/flutter/message-bubble-styling#text-bubble), [Image Bubble](/ui-kit/flutter/message-bubble-styling#image-bubble), [File Bubble](/ui-kit/flutter/message-bubble-styling#file-bubble), [Audio Bubble](/ui-kit/flutter/message-bubble-styling#audio-bubble), or [Video Bubble](/ui-kit/flutter/message-bubble-styling#video-bubble), depending on the message type.
-
-
-
- ```dart
- cometChatMessageTemplate.contentView = (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment, {AdditionalConfigurations? additionalConfigurations}) {
- return const Placeholder();
- };
- ```
-
-
-
-
-
-5. **Footer Widget**
-
- The `footerView` property allows you to assign a custom Footer widget to the MessageBubble. By default, it displays the receipt and timestamp.
-
-
-
- ```dart
- cometChatMessageTemplate.footerView = (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment) {
- return const Placeholder();
- };
- ```
-
-
-
-
-
-6. **Bottom Widget**
-
- The `bottomView` property allows you to assign a custom Bottom widget to the MessageBubble.By defuault is has buttons such as link previews or a 'load more' button for long messages.
-
-
-
- ```dart
- cometChatMessageTemplate.bottomView = (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment) {
- return const Placeholder();
- };
- ```
-
-
-
-
-
-7. **Bubble Widget**
-
- The `bubbleView` property allows you to assign a custom Bubble widget to the MessageBubble. By default, headerView, contentView, and footerView together form a message bubble.
-
-
-
- ```dart
- cometChatMessageTemplate.bubbleView = (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment) {
- return const Placeholder();
- };
- ```
-
-
-
-
-
-8. **Options**
-
- The `options` lets you set the list of actions that a user can perform on a message. This includes actions like reacting to, editing, or deleting a message.
-
-
-
- ```dart
- cometChatMessageTemplate.options = (User loggedInUser, BaseMessage messageObject, BuildContext context, Group? group) {
- return [];
- };
- ```
-
-
-
-
-
-9. **Status Info Widget**
-
- The `statusInfoView` property allows you to assign a custom status info widget to the MessageBubble. By default, it displays the timestamp and read receipt under the content view.
-
-
-
- ```dart
- cometChatMessageTemplate.statusInfoView = (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment) {
- return const Placeholder();
- };
- ```
-
-
-
-
-
-10. **Thread Widget**
-
- The `threadView` property allows you to assign a custom thread widget to the MessageBubble. This is displayed at the bottom of the bubble for threaded messages.
-
-
-
- ```dart
- cometChatMessageTemplate.threadView = (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment) {
- return const Placeholder();
- };
- ```
-
-
-
-
-
-11. **Reply Widget**
-
- The `replyView` property allows you to assign a custom reply widget to the MessageBubble. This is displayed at the top of the bubble when replying to a message.
-
-
-
- ```dart
- cometChatMessageTemplate.replyView = (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment, {AdditionalConfigurations? additionalConfigurations}) {
- return const Placeholder();
- };
- ```
-
-
-
-
+| Property | Description |
+|---|---|
+| `type` | Maps the template to a CometChat message type |
+| `category` | Sets the message category |
+| `headerView` | Custom header widget for the bubble |
+| `contentView` | Custom content widget for the bubble |
+| `footerView` | Custom footer widget (timestamp, receipts) |
+| `bottomView` | Custom bottom widget (link previews, etc.) |
+| `bubbleView` | Complete custom bubble widget |
+| `options` | List of actions on long press |
## Customization
-Let's dive into how you can use the [properties](#properties) of MessageTemplate to customize an existing template or add a new one to the [MessageList](/ui-kit/flutter/message-list) Widget.
-
-#### Header widget
-
-The `headerView` method of MessageTemplate allows you to add custom widgets to the header of your message bubbles.
-
-Here is the complete example for reference:
+### Header Widget
```dart
- CometChatMessageList(
- group: group, // Group object
- templates: [
- CometChatMessageTemplate(
- type: MessageTypeConstants.text,
- // Define the template type
- category: MessageCategoryConstants.message,
- // Define the template category
- headerView: (BaseMessage baseMessage, BuildContext buildContext,
- BubbleAlignment alignment) {
- return Text(
- "${baseMessage.sender?.name}• 🗓️ In meeting",
- style: TextStyle(
- color: Color(0xFF6852D6),
- fontSize: 14.4,
- fontWeight: FontWeight.w500,
- letterSpacing: 0),
- ); // Replace this placeholder Widget with your custom Widget
- }),
- ],
- );
-```
-
-
-
-
-
-
- 
-
-
-***
-
-#### Content widget
-
-The `contentView` method of MessageTemplate allows you to add a custom widget to the content of your message bubbles.
-
-Here is the complete example for reference:
-
-
-
-```dart
- CometChatMessageList(
- group: group, // Group object
- templates: [
- CometChatMessageTemplate(
- type: "image",
- category: "message",
- contentView: (message, context, alignment,
- {AdditionalConfigurations? additionalConfigurations}) {
- if (message is! MediaMessage) {
- return const SizedBox();
- }
- return Wrap(
- direction: Axis.vertical,
- crossAxisAlignment: WrapCrossAlignment.center,
- children: [
- CometChatImageBubble(
- imageUrl: message.attachment?.fileUrl,
- metadata: message.metadata,
- key: UniqueKey(),
- ),
- TextButton(
- onPressed: () {
- //Navigate to screen with transaction features to purchase the image
- },
- child: Text(
- "Buy Now",
- style: TextStyle(
- color: alignment == BubbleAlignment.left
- ? Color(0xFF6852D6)
- : Colors.white,
- fontSize: 14,
- fontWeight: FontWeight.w500),
- ),
- style: TextButton.styleFrom(
- padding: EdgeInsets.zero,
- ))
- ],
- );
- })
- ]);
+CometChatMessageList(
+ group: group,
+ templates: [
+ CometChatMessageTemplate(
+ type: MessageTypeConstants.text,
+ category: MessageCategoryConstants.message,
+ headerView: (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment) {
+ return Text(
+ "${baseMessage.sender?.name} • 🗓️ In meeting",
+ style: TextStyle(
+ color: Color(0xFF6852D6),
+ fontSize: 14.4,
+ fontWeight: FontWeight.w500,
+ ),
+ );
+ },
+ ),
+ ],
+)
```
-
-
-
- 
-
-
***
-#### Bottom Widget
-
-The `bottomView` property of MessageTemplate allows you to add a custom button widget to your message bubbles.
-
-Here is the complete example for reference:
+### Content Widget
```dart
CometChatMessageList(
- group: group, // Group object
- templates: [
- CometChatMessageTemplate(
- type: MessageTypeConstants.text,
- // Define the template type
- category: MessageCategoryConstants.message,
- // Define the template category
- bottomView: (BaseMessage baseMessage, BuildContext buildContext,
- BubbleAlignment alignment) {
- return Container(
- decoration: BoxDecoration(
- color: Color(0xFFF44649).withOpacity(.2),
- borderRadius: BorderRadius.circular(12),
+ group: group,
+ templates: [
+ CometChatMessageTemplate(
+ type: "image",
+ category: "message",
+ contentView: (message, context, alignment, {AdditionalConfigurations? additionalConfigurations}) {
+ if (message is! MediaMessage) return const SizedBox();
+ return Wrap(
+ direction: Axis.vertical,
+ crossAxisAlignment: WrapCrossAlignment.center,
+ children: [
+ CometChatImageBubble(
+ imageUrl: message.attachment?.fileUrl,
+ metadata: message.metadata,
+ key: UniqueKey(),
),
- child: Row(
- children: [
- Icon(
- Icons.warning,
- color: Color(0xFFF44649),
- size: 12,
- ),
- Text(
- "According to guidelines you cannot share contact",
- style: TextStyle(
- color: Color(0xFFF44649),
- fontSize: 12,
- fontWeight: FontWeight.w400,
- letterSpacing: 0),
- )
- ],
+ TextButton(
+ onPressed: () {
+ // Navigate to purchase screen
+ },
+ child: Text("Buy Now"),
),
- );
- },
- ),
- ],
- )
+ ],
+ );
+ },
+ ),
+ ],
+)
```
-
-
-
- 
-
-
***
-#### Footer Widget
-
-The `footerView` property of MessageTemplate allows you to add a footer widget to your message bubbles.
-
-Here is the complete example for reference:
+### Bottom Widget
```dart
- CometChatMessageList(
- group: group, // Group object
- templates: [
- CometChatMessageTemplate(
- // Define the template type
- type: MessageTypeConstants.text,
- // Define the template category
- category: MessageCategoryConstants.message,
- // override the default status info view to hide that date time and read receipt
- statusInfoView: (baseMessage, context, alignment) {
- return const SizedBox(height: 11);
- },
- // Define the footer view which would show the date time and read receipt
- footerView: (baseMessage, context, alignment,
- {additionalConfigurations}) {
- return _getStatusInfoView(
- alignment,
- baseMessage,
- baseMessage.sender?.uid == CometChatUIKit.loggedInUser?.uid,
- context);
- },
- ),
- ],
- );
-```
-
-
-
-
-```dart
-Widget _getStatusInfoView(BubbleAlignment alignment, BaseMessage message,
- bool showReceipt, BuildContext context) {
- return Container(
- padding: EdgeInsets.only(
- left: 0,
- top: 0,
- bottom: 4,
- ),
- child: Row(
- mainAxisAlignment: MainAxisAlignment.end,
- children: [
- Container(
- child: Row(
- mainAxisAlignment: MainAxisAlignment.end,
- mainAxisSize: MainAxisSize.min,
- children: [
- getTime(message),
- if (showReceipt)
- getReceiptIcon(message, CometChatUIKit.loggedInUser),
- ],
- ),
- ),
- ],
- ),
- );
- }
-
- Widget getTime(BaseMessage messageObject) {
- if (messageObject.sentAt == null) {
- return const SizedBox();
- }
-
- DateTime lastMessageTime = messageObject.sentAt!;
- return CometChatDate(
- date: lastMessageTime,
- pattern: DateTimePattern.timeFormat,
- style: CometChatDateStyle(
- backgroundColor: Colors.transparent,
- textStyle: TextStyle(
- color: Color(0xFF727272),
- fontSize: 14.4,
- fontWeight: FontWeight.w400,
- letterSpacing: 0),
- border: Border.all(
- color: Colors.transparent,
- width: 0,
+CometChatMessageList(
+ group: group,
+ templates: [
+ CometChatMessageTemplate(
+ type: MessageTypeConstants.text,
+ category: MessageCategoryConstants.message,
+ bottomView: (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment) {
+ return Container(
+ decoration: BoxDecoration(
+ color: Color(0xFFF44649).withOpacity(.2),
+ borderRadius: BorderRadius.circular(12),
),
- ));
- }
-
- Widget getReceiptIcon(BaseMessage message, User? loggedInUser) {
- ReceiptStatus status = MessageReceiptUtils.getReceiptStatus(message);
-
- return Padding(
- padding: EdgeInsets.only(right: 8),
- child: CometChatReceipt(
- status: status,
- size: 16,
- style: CometChatMessageReceiptStyle(
- deliveredIconColor: Color(0xFF858585),
- readIconColor: Color(0xFF56E8A7),
- sentIconColor: Color(0xFF858585),
- waitIconColor: Color(0xFF858585),
+ child: Row(
+ children: [
+ Icon(Icons.warning, color: Color(0xFFF44649), size: 12),
+ Text(
+ "According to guidelines you cannot share contact",
+ style: TextStyle(color: Color(0xFFF44649), fontSize: 12),
+ ),
+ ],
),
- ));
- }
+ );
+ },
+ ),
+ ],
+)
```
-
-
-
- 
-
-
***
-#### Bubble Widget
-
-The `bubbleView` property of MessageTemplate allows you to add a bubble widget to your message bubbles.
-
-Here is the complete example for reference:
+### Footer Widget
```dart
- CometChatMessageList(
- user: user, // User object
- group: group, // Group object
- templates: [
- CometChatMessageTemplate(
- type: "text",
- category: "message",
- bubbleView: (baseMessage, context, alignment,
- {additionalConfigurations}) {
- return Padding(
- padding: const EdgeInsets.all(8.0),
- child: Column(
- crossAxisAlignment: alignment == BubbleAlignment.right
- ? CrossAxisAlignment.end
- : CrossAxisAlignment.start,
- children: [
- CustomPaint(
- size: Size(260, 100),
- painter: ChatBubblePainter(
- text: (baseMessage as TextMessage).text,
- alignment: alignment,
- color: alignment == BubbleAlignment.right
- ? Color(0xFF6852D6)
- : Color(0xFFE8E8E8)),
- ),
- _getStatusInfoView(
- alignment,
- baseMessage,
- baseMessage.sender?.uid ==
- CometChatUIKit.loggedInUser?.uid,
- context)
- ],
- ),
- );
- },
- )
- ],
- );
-```
-
-
-
-
-```dart
-class ChatBubblePainter extends CustomPainter {
- ChatBubblePainter({required this.text, this.color, this.alignment});
-
- final String text;
- final Color? color;
-
- final BubbleAlignment? alignment;
-
- @override
- void paint(Canvas canvas, Size size) {
- Paint paint = Paint()
- ..color = color ?? Colors.blue
- ..style = PaintingStyle.fill;
-
- Path path = Path();
- path.moveTo(0, 0);
- path.lineTo(size.width, 0);
- if (alignment == BubbleAlignment.right) {
- path.lineTo(size.width, size.height);
- path.lineTo(size.width * .9, size.height * .8);
- path.lineTo(0, size.height * .8);
- } else {
- path.lineTo(size.width, size.height * .8);
- path.lineTo(size.width * .1, size.height * .8);
- path.lineTo(0, size.height);
- }
- path.close();
-
- canvas.drawPath(path, paint);
-
- var style = TextStyle(
- color: alignment == BubbleAlignment.right ? Colors.white : Colors.black,
- fontSize: 20);
-
- final ParagraphBuilder paragraphBuilder = ParagraphBuilder(ParagraphStyle(
- fontSize: style.fontSize,
- fontFamily: style.fontFamily,
- fontStyle: style.fontStyle,
- fontWeight: style.fontWeight,
- textAlign: TextAlign.justify,
- ))
- ..pushStyle(style.getTextStyle())
- ..addText(text);
- final Paragraph paragraph = paragraphBuilder.build()
- ..layout(ParagraphConstraints(width: size.width));
- canvas.drawParagraph(paragraph, Offset(55, 25));
- }
-
- @override
- bool shouldRepaint(covariant CustomPainter oldDelegate) {
- return oldDelegate != this;
- }
-}
+CometChatMessageList(
+ group: group,
+ templates: [
+ CometChatMessageTemplate(
+ type: MessageTypeConstants.text,
+ category: MessageCategoryConstants.message,
+ statusInfoView: (baseMessage, context, alignment) {
+ return const SizedBox(height: 11);
+ },
+ footerView: (baseMessage, context, alignment, {additionalConfigurations}) {
+ // Custom footer with time and receipt
+ return Row(
+ mainAxisAlignment: MainAxisAlignment.end,
+ children: [
+ CometChatDate(date: baseMessage.sentAt!, pattern: DateTimePattern.timeFormat),
+ ],
+ );
+ },
+ ),
+ ],
+)
```
-
-
-
-```dart
-Widget _getStatusInfoView(BubbleAlignment alignment, BaseMessage message,
- bool showReceipt, BuildContext context) {
- return Container(
- padding: EdgeInsets.only(
- left: 0,
- top: 0,
- bottom: 4,
- ),
- child: Row(
- mainAxisAlignment: MainAxisAlignment.end,
- children: [
- Container(
- child: Row(
- mainAxisAlignment: MainAxisAlignment.end,
- mainAxisSize: MainAxisSize.min,
- children: [
- getTime(message),
- if (showReceipt)
- getReceiptIcon(message, CometChatUIKit.loggedInUser),
- ],
- ),
- ),
- ],
- ),
- );
- }
-
- Widget getTime(BaseMessage messageObject) {
- if (messageObject.sentAt == null) {
- return const SizedBox();
- }
-
- DateTime lastMessageTime = messageObject.sentAt!;
- return CometChatDate(
- date: lastMessageTime,
- pattern: DateTimePattern.timeFormat,
- style: CometChatDateStyle(
- backgroundColor: Colors.transparent,
- textStyle: TextStyle(
- color: Color(0xFF727272),
- fontSize: 14.4,
- fontWeight: FontWeight.w400,
- letterSpacing: 0),
- border: Border.all(
- color: Colors.transparent,
- width: 0,
- ),
- ));
- }
-
- Widget getReceiptIcon(BaseMessage message, User? loggedInUser) {
- ReceiptStatus status = MessageReceiptUtils.getReceiptStatus(message);
-
- return Padding(
- padding: EdgeInsets.only(right: 8),
- child: CometChatReceipt(
- status: status,
- size: 16,
- style: CometChatMessageReceiptStyle(
- deliveredIconColor: Color(0xFF858585),
- readIconColor: Color(0xFF56E8A7),
- sentIconColor: Color(0xFF858585),
- waitIconColor: Color(0xFF858585),
- ),
- ));
- }
-```
-
-
-
-
- 
-
-
***
-#### Options List
-
-The `options` property in the MessageTemplate allows you to customize the options that appear in the action sheet when a message is long-pressed. By default, CometChat UI Kit provides a set of options like "Reply", "Edit", and "Delete".
-
-However, if you wish to override or modify these options, you can use the `options` method and pass a list of `CometChatMessageOption`. This list of options will replace the default set.
-
-Here is the complete example for reference:
+### Options List
```dart
CometChatMessageList(
- group: group, // Group object
- templates: [
- CometChatMessageTemplate(
- type: MessageTypeConstants.text,
- // Define the template type
- category: MessageCategoryConstants.message,
- options: (loggedInUser, messageObject, context, group,
- additionalConfigurations) {
- // Retrieve the existing options and add a new option to it
- final existingOptions = CometChatUIKit.getDataSource()
- .getTextMessageOptions(loggedInUser, messageObject, context,
- group, additionalConfigurations); // since we are updating the options for text message, we are using getTextMessageOptions
- return [
- CometChatMessageOption(
- id: "refresh",
- title: "Refresh",
- icon: Icon(
- Icons.refresh,
- color: Color(0xFF6852D6),
- size: 24,
- ),
- messageOptionSheetStyle: CometChatMessageOptionSheetStyle(
- titleTextStyle: TextStyle(
- color: Color(0xFF6852D6),
- fontSize: 14,
- fontWeight: FontWeight.w400,
- letterSpacing: 0),
- )),
- ...existingOptions,
- ];
- },
- ),
- ],
- )
+ group: group,
+ templates: [
+ CometChatMessageTemplate(
+ type: MessageTypeConstants.text,
+ category: MessageCategoryConstants.message,
+ options: (loggedInUser, messageObject, context, group, additionalConfigurations) {
+ final existingOptions = CometChatUIKit.getDataSource()
+ .getTextMessageOptions(loggedInUser, messageObject, context, group, additionalConfigurations);
+ return [
+ CometChatMessageOption(
+ id: "refresh",
+ title: "Refresh",
+ icon: Icon(Icons.refresh, color: Color(0xFF6852D6), size: 24),
+ ),
+ ...existingOptions,
+ ];
+ },
+ ),
+ ],
+)
```
-
-
-
- 
-
-
***
## New Templates
-You can create an entirely new template for custom messages is one of the powerful features of CometChat's MessageTemplate.
-
-Here is the complete example for reference:
+Create entirely new templates for custom message types:
```dart
- CometChatMessageList(
- user: user, // User object
- group: group, // Group object
- messagesRequestBuilder: MessagesRequestBuilder()
- ..limit = 30
- ..types = [
- ...CometChatUIKit.getDataSource().getAllMessageTypes(),
- "contact"
- ] // Add the custom type here
- ..categories = CometChatUIKit.getDataSource().getAllMessageCategories(),
- templates: [
- CometChatMessageTemplate(
- type: "contact",
- // Define the template type̵
- category: MessageCategoryConstants.custom,
- // Define the template category
- contentView: (baseMessage, context, alignment,
- {additionalConfigurations}) {
- return Padding(
- padding: const EdgeInsets.fromLTRB(8, 8, 8, 0),
- child: Row(
- children: [
- CircleAvatar(
- backgroundColor: Color(0xFFEDEAFA),
- child: Icon(
- Icons.person,
- color: Colors.white,
- ),
- ),
- SizedBox(
- width: 8,
- ),
- Text("Safiya Fareena",
- style: TextStyle(
- color: alignment == BubbleAlignment.right
- ? Colors.white
- : Colors.black,
- fontSize: 14,
- ))
- ],
- ),
- );
- },
- bottomView: (baseMessage, context, alignment,
- {additionalConfigurations}) {
- return DecoratedBox(
- decoration: BoxDecoration(
- border: Border(
- top: BorderSide(color: Color(0xFF7965DB), width: 1))),
- child: ToggleButtons(
- children: [
- Padding(
- padding: EdgeInsets.fromLTRB(20, 8, 0, 8),
- child: Text("Add Contact",
- style: TextStyle(
- color: alignment == BubbleAlignment.right
- ? Colors.white
- : Colors.black,
- fontSize: 14,
- fontWeight: FontWeight.w500)),
- ),
- VerticalDivider(
- color: Color(0xFF7965DB),
- width: 0,
- ),
- Padding(
- padding: EdgeInsets.fromLTRB(0, 8, 20, 8),
- child: Text("Message",
- style: TextStyle(
- color: alignment == BubbleAlignment.right
- ? Colors.white
- : Colors.black,
- fontSize: 14,
- fontWeight: FontWeight.w500)),
- )
- ],
- isSelected: [false, false, false],
- renderBorder: false,
+CometChatMessageList(
+ user: user,
+ messagesRequestBuilder: MessagesRequestBuilder()
+ ..limit = 30
+ ..types = [...CometChatUIKit.getDataSource().getAllMessageTypes(), "contact"]
+ ..categories = CometChatUIKit.getDataSource().getAllMessageCategories(),
+ templates: [
+ CometChatMessageTemplate(
+ type: "contact",
+ category: MessageCategoryConstants.custom,
+ contentView: (baseMessage, context, alignment, {additionalConfigurations}) {
+ return Padding(
+ padding: const EdgeInsets.fromLTRB(8, 8, 8, 0),
+ child: Row(
+ children: [
+ CircleAvatar(
+ backgroundColor: Color(0xFFEDEAFA),
+ child: Icon(Icons.person, color: Colors.white),
+ ),
+ SizedBox(width: 8),
+ Text("Contact Name",
+ style: TextStyle(
+ color: alignment == BubbleAlignment.right ? Colors.white : Colors.black,
+ fontSize: 14,
),
- );
- })
- ],
- );
+ ),
+ ],
+ ),
+ );
+ },
+ ),
+ ],
+)
```
-
-
-
- 
-
+
+In V6, `CometChatUIKit.getDataSource()` is replaced by `MessageTemplateUtils` for accessing data source methods. Use the appropriate service locator to get message options and templates.
+
diff --git a/ui-kit/flutter/methods.mdx b/ui-kit/flutter/methods.mdx
index 0cd6ce2d7..9b38f9fb5 100644
--- a/ui-kit/flutter/methods.mdx
+++ b/ui-kit/flutter/methods.mdx
@@ -1,697 +1,195 @@
---
title: "Methods"
-description: "Reference for CometChat Flutter UI Kit methods including init, login, logout, and message-sending wrappers."
+description: "Use CometChatUIKit methods for initialization, login, logout, users, groups, conversations, messages, calls, and session handling."
---
-
-
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_chat_uikit` |
-| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` |
-| Init | `CometChatUIKit.init(uiKitSettings: UIKitSettings)` |
-| Login (dev) | `CometChatUIKit.login(uid)` |
-| Login (prod) | `CometChatUIKit.loginWithAuthToken(authToken)` |
-| Other methods | `CometChatUIKit.logout()`, `CometChatUIKit.getLoggedInUser()`, `CometChatUIKit.createUser(user)`, `CometChatUIKit.updateUser(user)` |
-| Send messages | `CometChatUIKit.sendTextMessage()`, `CometChatUIKit.sendMediaMessage()`, `CometChatUIKit.sendCustomMessage()` |
-| Interactive messages | `CometChatUIKit.sendFormMessage()`, `CometChatUIKit.sendCardMessage()`, `CometChatUIKit.sendSchedulerMessage()` |
-| Reactions | `CometChatUIKit.addReaction()`, `CometChatUIKit.removeReaction()` |
-| Note | Use these wrapper methods instead of raw SDK calls — they manage internal UI Kit eventing |
-
-
-
## Overview
-The UI Kit's core function is to extend the [Chat SDK](/sdk/flutter/overview), essentially translating the raw data and functionality provided by the underlying methods into visually appealing and easy-to-use UI components.
+The UI Kit's core function is to extend the Chat SDK, translating the raw data and functionality provided by the underlying methods into visually appealing and easy-to-use UI components.
-To effectively manage and synchronize the UI elements and data across all components in the UI Kit, we utilize internal events. These internal events enable us to keep track of changes in real-time and ensure that the UI reflects the most current state of data.
-
-The CometChat UI Kit has thoughtfully encapsulated the critical [Chat SDK](/sdk/flutter/overview) methods within its wrapper to efficiently manage internal eventing. This layer of abstraction simplifies interaction with the underlying CometChat SDK, making it more user-friendly for developers.
-
-## Methods
+The CometChat UI Kit has encapsulated the critical Chat SDK methods within its wrapper to efficiently manage internal eventing. This layer of abstraction simplifies interaction with the underlying CometChat SDK.
You can access the methods using the `CometChatUIKit` class. This class provides access to all the public methods exposed by the CometChat UI Kit.
-### Init
+## Init
As a developer, you need to invoke this method every time before you use any other methods provided by the UI Kit.
-This initialization is a critical step that ensures the UI Kit and Chat SDK function correctly and as intended in your application. Typical practice is to make this one of the first lines of code executed in your application's lifecycle when it comes to implementing CometChat.
-
-
-`CometChatUIKit.init()` must be called before rendering any UI Kit components or calling any SDK methods. Initialization must complete before login.
-
+The `UIKitSettings` is an important parameter of the `init()` function. It functions as a base settings object, housing properties such as `appId`, `region`, and `authKey`.
-
-Auth Key is for development/testing only. In production, generate Auth Tokens on the server using the REST API and pass them to the client via `loginWithAuthToken()`. Never expose Auth Keys in production client code.
-
+| Method | Type | Description |
+|---|---|---|
+| appId | String | Sets the unique ID for the app, available on dashboard |
+| region | String | Sets the region for the app ('us' or 'eu' or 'in') |
+| authKey | String | Sets the auth key for the app, available on dashboard |
+| subscriptionType | String | Sets subscription type for tracking the presence of all users |
+| roles | String | Sets subscription type for tracking the presence of users with specified roles |
+| autoEstablishSocketConnection | Boolean | Configures if web socket connections will be established automatically on app initialization or be done manually, set to true by default |
-
-Make sure you replace the **APP\_ID**, **REGION** and **AUTH\_KEY** with your CometChat App ID, Region and Auth Key in the below code. The `Auth Key` is an optional property of the `UIKitSettings` Class. It is intended for use primarily during proof-of-concept (POC) development or in the early stages of application development. You can use the [Auth Token](#login-using-auth-token) to log in securely.
-
+> **V6 Note:** The `extensions` and `aiFeature` parameters from V5 have been removed. Extensions are built-in and handled automatically by `MessageTemplateUtils`. No registration is needed.
-As a developer, the `UIKitSettings` is an important parameter of the `init()` function. It functions as a base settings object, housing properties such as `appId`, `region`, and `authKey`, contained within `UIKitSettings`.
-
-Here's the table format for the properties available in `UIKitSettings`:
-
-| Method | Type | Description |
-| --------------------------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| **appId** | `String` | Sets the unique ID for the app, available on dashboard |
-| **region** | `String` | Sets the region for the app ('us' or 'eu' or 'in') |
-| **authKey** | `String` | Sets the auth key for the app, available on dashboard |
-| **subscriptionType** | `String` | Sets subscription type for tracking the presence of all users |
-| **roles** | `String` | Sets subscription type for tracking the presence of users with specified roles |
-| **autoEstablishSocketConnection** | `Boolean` | Configures if web socket connections will established automatically on app initialization or be done manually, set to true by default |
-| **aiFeature** | `List` | Sets the AI Features that need to be added in UI Kit |
-| **extensions** | `List` | Sets the list of extension that need to be added in UI Kit |
-| **callingExtension** | `ExtensionsDataSource` | Sets the calling extension configuration |
-| **adminHost** | `String` | Sets a custom admin host URL |
-| **clientHost** | `String` | Sets a custom client host URL |
-| **dateTimeFormatterCallback** | `DateTimeFormatterCallback` | Sets a custom date/time formatter for consistent formatting across all UI components |
-
-***
-
-The concluding code block:
-
-
-
-```dart highlight={3-5}
+```dart
UIKitSettings uiKitSettings = (UIKitSettingsBuilder()
..subscriptionType = CometChatSubscriptionType.allUsers
..autoEstablishSocketConnection = true
- ..region = "your_region" // Replace with your region
- ..appId = "your_appID" // Replace with your app Id
- ..authKey = "your_authKey" // Replace with your app auth key
+ ..region = "your_region"
+ ..appId = "your_appID"
+ ..authKey = "your_authKey"
).build();
CometChatUIKit.init(
uiKitSettings: uiKitSettings,
onSuccess: (successMessage) async {
- // Initialization successful, proceed to login
+ // Ready to use
},
onError: (error) {
- // Handle initialization error
- },
-);
-```
-
-
-
-
-
-***
-
-### Login using Auth Key
-
-Only the `UID` of a user is needed to log in. This simple authentication procedure is useful when you are creating a POC or if you are in the development phase. For production apps, we suggest you use [AuthToken](#login-using-auth-token) instead of Auth Key.
-
-
-
-```dart highlight={1}
-String uid = "user1";
-
-CometChatUIKit.login(
- uid,
- onSuccess: (user) {
- // Login successful, mount your app
- },
- onError: (e) {
- // Handle login error
- },
-);
-```
-
-
-
-
-
-***
-
-### Login using Auth Token
-
-Production-safe authentication that does not expose the Auth Key in client code.
-
-1. [Create a User](/rest-api/chat-apis) via the CometChat API when the user signs up in your app.
-
-2. [Create an Auth Token](/rest-api/chat-apis) via the CometChat API for the new user and save the token in your database.
-
-3. Load the Auth Token in your client and pass it to the `loginWithAuthToken()` method.
-
-
-
-```dart highlight={1}
-String authToken = "AUTH_TOKEN";
-
-CometChatUIKit.loginWithAuthToken(
- authToken,
- onSuccess: (user) {
- // Login successful, mount your app
- },
- onError: (e) {
- // Handle login error
+ // Handle error
},
);
```
-
-
-
-
-***
+## Login using Auth Key
-### Logout
+Only the UID of a user is needed to log in. This simple authentication procedure is useful when you are creating a POC or if you are in the development phase. For production apps, we suggest you use AuthToken instead of Auth Key.
-The CometChat UI Kit and Chat SDK effectively handle the session of the logged-in user within the framework. Before a new user logs in, it is crucial to clean this data to avoid potential conflicts or unexpected behavior. This can be achieved by invoking the `.logout()` function
-
-
-
```dart
-CometChatUIKit.logout(onSuccess: (s) {
- // TODO("Not yet implemented")
-} , onError: (e) {
- // TODO("Not yet implemented")
+CometChatUIKit.login(uid, onSuccess: (user) {
+ // Logged in successfully
+}, onError: (e) {
+ // Handle error
});
```
-
-
-
-
-***
+## Login using Auth Token
-### Create User
+This advanced authentication procedure does not use the Auth Key directly in your client code thus ensuring safety.
-As a developer, you can dynamically create users on CometChat using the `.createUser()` function. This can be extremely useful for situations where users are registered or authenticated by your system and then need to be created on CometChat.
+1. Create a User via the CometChat API when the user signs up in your app.
+2. Create an Auth Token via the CometChat API for the new user and save the token in your database.
+3. Load the Auth Token in your client and pass it to the `loginWithAuthToken()` method.
-
-
```dart
-CometChatUIKit.createUser(userObject, onSuccess: (user) {
- // TODO("Not yet implemented")
+CometChatUIKit.loginWithAuthToken("authToken", onSuccess: (user) {
+ // Logged in successfully
}, onError: (e) {
- // TODO("Not yet implemented")
+ // Handle error
});
```
-
-
-
-
-***
+## Logout
-### Update User
+Before a new user logs in, it is crucial to clean session data to avoid potential conflicts. This can be achieved by invoking the `.logout()` function.
-As a developer, you can update user details using the `.updateUser()` function. This should ideally be achieved at your backend using the Restful APIs, but can also be done client-side when needed.
-
-
-
```dart
-CometChatUIKit.updateUser(userObject, onSuccess: (user) {
- // TODO("Not yet implemented")
+CometChatUIKit.logout(onSuccess: (s) {
+ // Logged out successfully
}, onError: (e) {
- // TODO("Not yet implemented")
+ // Handle error
});
```
-
-
-
+## Create User
-***
+You can dynamically create users on CometChat using the `.createUser()` function.
-### Get Logged In User
-
-You can check if there is any existing session in the SDK and retrieve the details of the logged-in user using the `.getLoggedInUser()` function.
-
-
-
```dart
-CometChatUIKit.getLoggedInUser(onSuccess: (user) {
- // TODO("Not yet implemented")
+CometChat.createUser(userObject, 'authKey', onSuccess: (user) {
+ // User created
}, onError: (e) {
- // TODO("Not yet implemented")
+ // Handle error
});
```
-
-
-
-
-***
-
-### DateFormatter
-
-By providing a custom implementation of the DateTimeFormatterCallback, you can globally configure how time and date values are displayed across all UI components in the CometChat UI Kit. This ensures consistent formatting for labels such as "Today", "Yesterday", "X minutes ago", and more, throughout the entire application.
+## Base Message
-Each method in the interface corresponds to a specific case:
+### Text Message
-* time(int? timestamp) → Custom full timestamp format
-* today(int? timestamp) → Called when a message is from today
-* yesterday(int? timestamp) → Called for yesterday’s messages
-* lastWeek(int? timestamp) → Messages from the past week
-* otherDays(int? timestamp) → Older messages
-* minute(int? timestamp) / hour(int? timestamp) → Exact time unit
-* minutes(int? diffInMinutesFromNow, int? timestamp) → e.g., "5 minutes ago"
-* hours(int? diffInHourFromNow, int? timestamp) → e.g., "2 hours ago"
+Send a text message to a single user or a group using the `sendTextMessage()` function.
-
-
-
```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:intl/intl.dart';
-
-/// Custom implementation of DateTimeFormatterCallback
-/// to format time and date display in the CometChat UI.
-class DateFormatter extends DateTimeFormatterCallback {
- /// Formatter for displaying full time like "10:45 PM"
- final DateFormat fullTimeFormatter = DateFormat('hh:mm a');
-
- /// Formatter for displaying date like "23 Jun 2025"
- final DateFormat dateFormatter = DateFormat('dd MMM yyyy');
-
- /// Returns formatted time (e.g., "10:45 PM") for a given timestamp.
- @override
- String? time(int? timestamp) {
- if (timestamp == null) return null;
- return fullTimeFormatter.format(DateTime.fromMillisecondsSinceEpoch(timestamp));
- }
-
- /// Returns a static label for messages sent today.
- @override
- String? today(int? timestamp) {
- return "Today";
- }
-
- /// Returns a static label for messages sent yesterday.
- @override
- String? yesterday(int? timestamp) {
- return "Yesterday";
- }
-
- /// Returns a static label for messages sent last week.
- @override
- String? lastWeek(int? timestamp) {
- return "Last Week";
- }
-
- /// Returns formatted date (e.g., "23 Jun 2025") for other days.
- @override
- String? otherDays(int? timestamp) {
- if (timestamp == null) return null;
- return dateFormatter.format(DateTime.fromMillisecondsSinceEpoch(timestamp));
- }
-
- /// Returns relative time in minutes (e.g., "5 mins ago").
- @override
- String? minutes(int? diffInMinutesFromNow, int? timestamp) {
- if (diffInMinutesFromNow == null) return null;
- return "$diffInMinutesFromNow mins ago";
- }
-
- /// Returns relative time in hours (e.g., "2 hrs ago").
- @override
- String? hours(int? diffInHourFromNow, int? timestamp) {
- if (diffInHourFromNow == null) return null;
- return "$diffInHourFromNow hrs ago";
- }
-
- /// (Optional) Returns formatted hour (e.g., "3 PM") if used by SDK.
- @override
- String? hour(int? timestamp) {
- if (timestamp == null) return null;
- return DateFormat('h a').format(DateTime.fromMillisecondsSinceEpoch(timestamp));
- }
-
- /// (Optional) Returns formatted minute value (e.g., "09") if used by SDK.
- @override
- String? minute(int? timestamp) {
- if (timestamp == null) return null;
- return DateFormat('mm').format(DateTime.fromMillisecondsSinceEpoch(timestamp));
- }
-}
-
-// Build CometChat UIKit settings
-UIKitSettings uiKitSettings = (UIKitSettingsBuilder()
- // Set subscription type (e.g., receive messages from all users)
- ..subscriptionType = CometChatSubscriptionType.allUsers
-
- // Set your CometChat region
- ..region = AppCredentials.region
-
- // Automatically connect to socket server
- ..autoEstablishSocketConnection = true
-
- // CometChat App ID and Auth Key
- ..appId = AppCredentials.appId
- ..authKey = AppCredentials.authKey
-
- // Enable calling feature
- ..callingExtension = CometChatCallingExtension()
-
- // Load default chat extensions (e.g., polls, stickers, reactions)
- ..extensions = CometChatUIKitChatExtensions.getDefaultExtensions()
-
- // Load default AI features (e.g., Smart Replies, Sentiment Analysis)
- ..aiFeature = CometChatUIKitChatAIFeatures.getDefaultAiFeatures()
-
- // Inject the custom date and time formatter
- ..dateTimeFormatterCallback = DateFormatter()
- )
- .build();
-
-// Initialize CometChat UIKit with the configured settings
-CometChatUIKit.init(
- uiKitSettings: uiKitSettings,
-
- // Callback when initialization is successful
- onSuccess: (successMessage) async {
- // On success
- },
-
- // Callback when initialization fails
- onError: (e) {
- shouldGoToHomeScreen.value = false;
- if (kDebugMode) {
- debugPrint("Initialization failed with error: ${e.details}");
- }
- },
-);
-
-
-```
-
-
-
-
-
-***
-
-### Base Message
-
-#### Text Message
-
-Sends a text message in a 1:1 or group chat. Takes a `TextMessage` object.
-
-
-
-```dart highlight={1-2}
-String receiverID = "UID";
-String messageText = "Hello world!";
-
-TextMessage textMessage = TextMessage(
- text: messageText,
- receiverUid: receiverID,
- receiverType: ReceiverType.user,
-);
-
-CometChatUIKit.sendTextMessage(
- textMessage,
- onSuccess: (message) {
- // Message sent successfully
- },
- onError: (e) {
- // Handle error
- },
-);
-```
-
-
-
-
-```dart highlight={1-2}
-String receiverID = "GUID";
-String messageText = "Hello world!";
-
-TextMessage textMessage = TextMessage(
- text: messageText,
- receiverUid: receiverID,
- receiverType: ReceiverType.group,
-);
-
-CometChatUIKit.sendTextMessage(
- textMessage,
- onSuccess: (message) {
- // Message sent successfully
- },
- onError: (e) {
- // Handle error
- },
-);
-```
-
-
-
-
-
-***
-
-#### Media Message
-
-Sends a media message in a 1:1 or group chat. Takes a `MediaMessage` object.
-
-
-
-```dart highlight={1-2}
-String receiverID = "UID";
-String filePath = "/path/to/file";
-
-MediaMessage mediaMessage = MediaMessage(
- receiverUid: receiverID,
- receiverType: ReceiverType.user,
- type: MessageType.file,
- file: filePath,
-);
-
-CometChatUIKit.sendMediaMessage(
- mediaMessage,
- onSuccess: (message) {
- // Media message sent successfully
- },
- onError: (e) {
- // Handle error
- },
-);
-```
-
-
-
-
-```dart highlight={1-2}
-String receiverID = "GUID";
-String filePath = "/path/to/file";
-
-MediaMessage mediaMessage = MediaMessage(
- receiverUid: receiverID,
- receiverType: ReceiverType.group,
- type: MessageType.file,
- file: filePath,
-);
-
-CometChatUIKit.sendMediaMessage(
- mediaMessage,
- onSuccess: (message) {
- // Media message sent successfully
- },
- onError: (e) {
- // Handle error
- },
-);
-```
-
-
-
-
-
-***
-
-#### Custom Message
-
-Sends a custom message (neither text nor media) in a 1:1 or group chat. Takes a `CustomMessage` object.
-
-
-
-```dart highlight={1,3-4}
-String receiverID = "UID";
-Map customData = {
- "latitude": "50.6192171633316",
- "longitude": "-72.68182268750002",
-};
-String customType = "location";
-
-CustomMessage customMessage = CustomMessage(
- receiverUid: receiverID,
- receiverType: ReceiverType.user,
- type: customType,
- customData: customData,
-);
-
-CometChatUIKit.sendCustomMessage(
- customMessage,
- onSuccess: (message) {
- // Custom message sent successfully
- },
- onError: (e) {
- // Handle error
- },
-);
-```
-
-
-
-
-```dart highlight={1,3-4}
-String receiverID = "GUID";
-Map customData = {
- "latitude": "50.6192171633316",
- "longitude": "-72.68182268750002",
-};
-String customType = "location";
-
-CustomMessage customMessage = CustomMessage(
- receiverUid: receiverID,
- receiverType: ReceiverType.group,
- type: customType,
- customData: customData,
-);
-
-CometChatUIKit.sendCustomMessage(
- customMessage,
- onSuccess: (message) {
- // Custom message sent successfully
- },
- onError: (e) {
- // Handle error
- },
-);
+CometChatUIKit.sendTextMessage(textMessageObject, onSuccess: (msg) {
+ // Message sent
+}, onError: (e) {
+ // Handle error
+});
```
-
-
-
-
-***
+### Media Message
-### Interactive Message
+Send a media message (image, video, audio, file) using the `sendMediaMessage()` function.
-#### Form Message
-
-As a developer, if you need to send a Form message to a single user or a group, you'll need to utilize the `sendFormMessage()` function. This function requires a `FormMessage` object as its argument, which contains the necessary information to create a form bubble for that messages
-
-
-
```dart
-CometChatUIKit.sendFormMessage(formMessageObject, onSuccess: (p0) {
- // TODO("Not yet implemented")
-}, onError: (p0) {
- // TODO("Not yet implemented")
+CometChatUIKit.sendMediaMessage(mediaMessageObject, onSuccess: (msg) {
+ // Message sent
+}, onError: (e) {
+ // Handle error
});
```
-
+### Custom Message
-
+Send a custom message using the `sendCustomMessage()` function.
-***
-
-#### Card Message
-
-As a developer, if you need to send a Card message to a single user or a group, you'll need to utilize the `sendCardMessage()` function. This function requires a `CardMessage` object as its argument, which contains the necessary information to create a card bubble for the messages
-
-
-
```dart
-CometChatUIKit.sendCardMessage(cardMessageObject, onSuccess: (p0) {
- // TODO("Not yet implemented")
-}, onError: (p0) {
- // TODO("Not yet implemented")
+CometChatUIKit.sendCustomMessage(customMessageObject, onSuccess: (msg) {
+ // Message sent
+}, onError: (e) {
+ // Handle error
});
```
-
-
-
+## Interactive Message
-***
+### Form Message
-#### Scheduler Message
-
-As a developer, if you need to send a Scheduler message to a single user or a group, you'll need to utilize the `sendSchedulerMessage()` function. This function requires a `SchedulerMessage` object as its argument, which contains the necessary information to create a SchedulerMessage bubble for the messages
-
-
-
```dart
-CometChatUIKit.sendSchedulerMessage(schedulerMessageObject, onSuccess: (p0) {
- // TODO("Not yet implemented")
-}, onError: (p0) {
- // TODO("Not yet implemented")
+CometChatUIKit.sendFormMessage(formMessageObject, onSuccess: (msg) {
+ // Form message sent
+}, onError: (e) {
+ // Handle error
});
```
-
-
-
-
-***
-
-#### Custom Interactive Message
+### Card Message
-As a developer, if you need to send a Interactive message to a single user or a group, you'll need to utilize the `sendCustomInteractiveMessage()` function. This function requires a `InteractiveMessage` object as its argument, which contains the necessary information to create a custom interactive message bubble for the messages
-
-
-
```dart
-CometChatUIKit.sendCustomInteractiveMessage(interactiveMessageObject, onSuccess: (p0) {
- // TODO("Not yet implemented")
-}, onError: (p0) {
- // TODO("Not yet implemented")
+CometChatUIKit.sendCardMessage(cardMessageObject, onSuccess: (msg) {
+ // Card message sent
+}, onError: (e) {
+ // Handle error
});
```
-
-
-
-
-***
-
-### Reactions
+### Scheduler Message
-#### Add Reaction
-
-As a developer, you can add a reaction to a message using the `addReaction()` function. This will update the UI of `CometChatMessageList` and `CometChatReactions` accordingly.
-
-
-
```dart
-CometChatUIKit.addReaction(messageId, "👍", onSuccess: (message) {
- // TODO("Not yet implemented")
+CometChatUIKit.sendSchedulerMessage(schedulerMessageObject, onSuccess: (msg) {
+ // Scheduler message sent
}, onError: (e) {
- // TODO("Not yet implemented")
+ // Handle error
});
```
-
-
-
-
-***
-
-#### Remove Reaction
-
-As a developer, you can remove a reaction from a message using the `removeReaction()` function. This will update the UI of `CometChatMessageList` and `CometChatReactions` accordingly.
+### Custom Interactive Message
-
-
```dart
-CometChatUIKit.removeReaction(messageId, "👍", onSuccess: (message) {
- // TODO("Not yet implemented")
+CometChatUIKit.sendCustomInteractiveMessage(interactiveMessageObject, onSuccess: (msg) {
+ // Interactive message sent
}, onError: (e) {
- // TODO("Not yet implemented")
+ // Handle error
});
```
-
+## DateFormatter
-
+By providing a custom implementation of the `DateTimeFormatterCallback`, you can globally configure how time and date values are displayed across all UI components.
-***
+```dart
+UIKitSettings uiKitSettings = (UIKitSettingsBuilder()
+ ..subscriptionType = CometChatSubscriptionType.allUsers
+ ..region = CometChatConfig.region
+ ..appId = CometChatConfig.appId
+ ..authKey = CometChatConfig.authKey
+ ..dateTimeFormatterCallback = DateFormatter()
+).build();
+```
diff --git a/ui-kit/flutter/multi-tab-chat-ui-guide.mdx b/ui-kit/flutter/multi-tab-chat-ui-guide.mdx
index 24f03ebfa..64ba8b6dd 100644
--- a/ui-kit/flutter/multi-tab-chat-ui-guide.mdx
+++ b/ui-kit/flutter/multi-tab-chat-ui-guide.mdx
@@ -1,59 +1,13 @@
---
title: "Multi Tab Chat UI Guide"
-description: "Multi Tab Chat UI Guide — CometChat integration guide."
+description: "Build a multi-tab CometChat Flutter UI Kit chat interface with Conversations, Users, Groups, headers, message lists, and composers."
---
-This guide will help you create a multi-tab chat user interface using the cometchat\_chat\_uikit package in Flutter. The final UI will consist of three tabs: Conversations, Users, and Groups.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+This guide helps you create a multi-tab chat user interface using the CometChat V6 UIKit in Flutter. The final UI consists of three tabs: Conversations, Users, and Groups.
##### Create the Multi-Tab Chat UI:
-Update your `lib/multi_tab_chat_ui_guid.dart` file with the following code:
+Update your `lib/multi_tab_chat_ui.dart` file with the following code:
@@ -70,6 +24,36 @@ class MultiTabUIGuideExample extends StatefulWidget {
class _MultiTabUIGuideExampleState extends State {
+ void _navigateToMessages(BuildContext context, {User? user, Group? group}) {
+ Navigator.push(
+ context,
+ MaterialPageRoute(
+ builder: (context) => Scaffold(
+ appBar: CometChatMessageHeader(
+ user: user,
+ group: group,
+ ),
+ body: SafeArea(
+ child: Column(
+ children: [
+ Expanded(
+ child: CometChatMessageList(
+ user: user,
+ group: group,
+ ),
+ ),
+ CometChatMessageComposer(
+ user: user,
+ group: group,
+ ),
+ ],
+ ),
+ ),
+ ),
+ ),
+ );
+ }
+
@override
Widget build(BuildContext context) {
return DefaultTabController(
@@ -88,24 +72,35 @@ class _MultiTabUIGuideExampleState extends State {
],
),
),
- body: const TabBarView(
+ body: TabBarView(
children: [
- CometChatConversationsWithMessages(
- conversationsConfiguration: ConversationsConfiguration(
- hideAppbar: true
- )
+ CometChatConversations(
+ hideAppbar: true,
+ onItemTap: (conversation) {
+ _navigateToMessages(
+ context,
+ user: conversation.conversationWith is User
+ ? conversation.conversationWith as User
+ : null,
+ group: conversation.conversationWith is Group
+ ? conversation.conversationWith as Group
+ : null,
+ );
+ },
),
- CometChatUsersWithMessages(
- usersConfiguration: UsersConfiguration(
- hideAppbar: true,
- hideSearch: true
- )
+ CometChatUsers(
+ hideAppbar: true,
+ hideSearch: true,
+ onItemTap: (user) {
+ _navigateToMessages(context, user: user);
+ },
),
- CometChatGroupsWithMessages(
- groupsConfiguration: GroupsConfiguration(
- hideAppbar: true,
- hideSearch: true
- )
+ CometChatGroups(
+ hideAppbar: true,
+ hideSearch: true,
+ onItemTap: (group) {
+ _navigateToMessages(context, group: group);
+ },
),
],
),
@@ -114,7 +109,13 @@ class _MultiTabUIGuideExampleState extends State {
}
}
```
-
-
+
+## Key V6 Differences
+
+| Aspect | V5 | V6 |
+|---|---|---|
+| Composite widgets | `CometChatConversationsWithMessages`, `CometChatUsersWithMessages`, `CometChatGroupsWithMessages` | Not available — compose manually |
+| Navigation to messages | Handled internally by composite widgets | You handle navigation and compose `MessageHeader` + `MessageList` + `MessageComposer` |
+| State management | GetX | BLoC |
diff --git a/ui-kit/flutter/outgoing-call.mdx b/ui-kit/flutter/outgoing-call.mdx
index 1a73ce2eb..55f369bf7 100644
--- a/ui-kit/flutter/outgoing-call.mdx
+++ b/ui-kit/flutter/outgoing-call.mdx
@@ -1,80 +1,49 @@
---
title: "Outgoing Call"
-description: "Widget that serves as a visual representation of a user-initiated call, providing options to control the call experience."
+description: "Full-screen view displaying recipient information and call status during an outgoing call, with automatic transition to the ongoing call screen."
---
-
-```json
-{
- "component": "CometChatOutgoingCall",
- "package": "cometchat_calls_uikit",
- "import": "import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';",
- "description": "Widget that serves as a visual representation of a user-initiated call, providing options to control the call experience.",
- "props": {
- "data": {
- "call": { "type": "Call", "required": true },
- "user": { "type": "User?", "default": "null" }
- },
- "callbacks": {
- "onCancelled": "Function(BuildContext context, Call call)?",
- "onError": "OnError?"
- },
- "viewSlots": {
- "subtitleView": "Widget? Function(BuildContext context, Call call)?",
- "avatarView": "Widget? Function(BuildContext context, Call call)?",
- "titleView": "Widget? Function(BuildContext context, Call call)?",
- "cancelledView": "Widget? Function(BuildContext context, Call call)?"
- },
- "style": {
- "outgoingCallStyle": "CometChatOutgoingCallStyle?"
- },
- "layout": {
- "height": { "type": "double?", "default": "null" },
- "width": { "type": "double?", "default": "null" }
- },
- "icons": {
- "declineButtonIcon": "Widget?"
- },
- "sound": {
- "disableSoundForCalls": { "type": "bool?", "default": "false" },
- "customSoundForCalls": "String?",
- "customSoundForCallsPackage": "String?"
- },
- "configuration": {
- "callSettingsBuilder": "CallSettingsBuilder?"
- }
- }
-}
-```
-
-
-## Overview
-The `CometChatOutgoingCall` [Widget](/ui-kit/android/components-overview#components) is a visual representation of a user-initiated call, whether it's a voice or video call. It serves as an interface for managing outgoing calls, providing users with essential options to control the call experience. This Widget typically includes information about the call recipient, call controls for canceling the call, and feedback on the call status, such as indicating when the call is in progress.
+`CometChatOutgoingCall` manages the outgoing call process. It displays recipient information (avatar, name) and call status, and automatically transitions to the ongoing call screen when the receiver accepts.
-You can launch `CometChatOutgoingCall` directly using `Navigator.push`, or you can define it as a widget within the `build` method of your `State` class.
+---
+
+## Where It Fits
+
+`CometChatOutgoingCall` is typically launched automatically by `CometChatCallButtons` when a call is initiated. It can also be launched manually for custom call flows.
+
+---
+
+## Quick Start
+
+### Automatic (via CallButtons)
+
+When using `CometChatCallButtons`, the outgoing call screen is launched automatically when the user taps a call button. No manual integration needed.
-##### 1. Using Navigator to Launch `CometChatOutgoingCall`
+### Manual Launch
+
+For custom call flows:
```dart
-Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatOutgoingCall(user: user, call: callObject))); // User object and Call object is required to launch the incoming call widget.
+Navigator.push(context, MaterialPageRoute(
+ builder: (context) => CometChatOutgoingCall(
+ user: user,
+ call: callObject,
+ ),
+));
```
-
-
-##### 2. Embedding `CometChatOutgoingCall` as a Widget in the build Method
-
```dart
-import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';
+import 'package:cometchat_chat_uikit/cometchat_calls_uikit.dart';
import 'package:flutter/material.dart';
class OutgoingCallExample extends StatefulWidget {
@@ -85,349 +54,299 @@ class OutgoingCallExample extends StatefulWidget {
}
class _OutgoingCallExampleState extends State {
-
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: CometChatOutgoingCall(
- user: user, // User Object
- call: callObject
- ), // User object and Call object is required to launch the incoming call widget.
+ user: user,
+ call: callObject,
+ ),
),
);
}
}
```
-
-
-***
+Prerequisites: CometChat SDK initialized, `enableCalls = true` set in UIKitSettings. See [Call Features](/ui-kit/flutter/call-features) for setup.
+
+---
-### Actions
+## Actions and Events
-[Actions](/ui-kit/android/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.
+### Callback Methods
-##### 1. onCancelled
+#### `onCancelled`
-The `onCancelled` action is typically triggered when the call is ended, carrying out default actions. However, with the following code snippet, you can effortlessly customize or override this default behavior to meet your specific needs.
+Fires when the user cancels the outgoing call. Override to customize cancel behavior.
```dart
CometChatOutgoingCall(
- user: user, // User Object
- call: callObject, // Call Object
+ user: user,
+ call: callObject,
onCancelled: (BuildContext context, Call call) {
- // TODO("Not yet implemented")
+ // Custom cancel logic
},
)
```
-
-
-***
-
-##### 2. onError
+#### `onError`
-You can customize this behavior by using the provided code snippet to override the `onError` and improve error handling.
+Fires on internal errors.
```dart
CometChatOutgoingCall(
- user: user, // User Object
- call: callObject, // Call Object
+ user: user,
+ call: callObject,
onError: (e) {
- // TODO("Not yet implemented")
+ debugPrint("Error: ${e.message}");
},
)
```
-
-
-***
-
-### Filters
-
-**Filters** allow you to customize the data displayed in a list within a Widget. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK.
-
-The `CometChatOutgoingCall` Widget does not have any exposed filters.
-
-***
-
-### Events
+### Global Events
-[Events](/ui-kit/android/components-overview#events) are emitted by a `Widget`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.
+The component emits events via `CometChatCallEvents`:
-Events emitted by the Outgoing call Widget are as follows.
-
-| Event | Description |
-| ------------------ | -------------------------------------------- |
-| **ccCallAccepted** | Triggers when the outgoing call is accepted. |
-| **ccCallRejected** | Triggers when the outgoing call is rejected. |
-
-**Example**
-
-Here is the complete example for reference:
+| Event | Description |
+|---|---|
+| `ccCallAccepted` | Triggers when the outgoing call is accepted |
+| `ccCallRejected` | Triggers when the outgoing call is rejected |
```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:flutter/material.dart';
-
-class YourScreen extends StatefulWidget {
- const YourScreen({super.key});
-
- @override
- State createState() => _YourScreenState();
-}
-
class _YourScreenState extends State with CometChatCallEventListener {
-
@override
void initState() {
super.initState();
- CometChatCallEvents.addCallEventsListener("unique_listener_ID", this); // Add the listener
+ CometChatCallEvents.addCallEventsListener("unique_listener_ID", this);
}
@override
- void dispose(){
+ void dispose() {
super.dispose();
- CometChatCallEvents.removeCallEventsListener("unique_listener_ID"); // Remove the listener
+ CometChatCallEvents.removeCallEventsListener("unique_listener_ID");
}
@override
void ccCallAccepted(Call call) {
- // TODO("Not yet implemented")
+ debugPrint("Call accepted: ${call.sessionId}");
}
@override
void ccCallRejected(Call call) {
- // TODO("Not yet implemented")
+ debugPrint("Call rejected: ${call.sessionId}");
}
@override
Widget build(BuildContext context) {
return const Placeholder();
}
-
}
```
-
-
-***
-
-## Customization
-
-To fit your app's design requirements, you can customize the appearance of the conversation widget. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.
-
-### Style
+---
-You can customize the appearance of the `CometChatOutgoingCall` Widget by applying the `CometChatOutgoingCallStyle` to it using the following code snippet.
+## Functionality
-**Example**
+| Property | Type | Default | Description |
+|---|---|---|---|
+| `user` | `User?` | `null` | Recipient user object |
+| `call` | `Call` | **required** | Call object with session details |
+| `callSettingsBuilder` | `CallSettingsBuilder?` | `null` | Configure call settings |
+| `height` | `double?` | `null` | Widget height |
+| `width` | `double?` | `null` | Widget width |
+| `declineButtonIcon` | `Widget?` | `null` | Custom decline/cancel button icon |
+| `declineButtonText` | `String?` | `null` | Custom decline button text |
+| `disableSoundForCalls` | `bool?` | `false` | Disable outgoing call sound |
+| `customSoundForCalls` | `String?` | `null` | Custom sound asset path |
-Here is the complete example for reference:
+**Example — custom decline text and disabled sound:**
```dart
CometChatOutgoingCall(
- user: user, // User Object
- call: callObject, // Call Object
- outgoingCallStyle: CometChatOutgoingCallStyle(
- avatarStyle: CometChatAvatarStyle(
- backgroundColor: Color(0xFFFBAA75),
- borderRadius: BorderRadius.circular(8),
- ),
- declineButtonColor: Color(0xFFF44649),
- declineButtonBorderRadius: BorderRadius.circular(12),
- )
+ user: user,
+ call: callObject,
+ disableSoundForCalls: true,
+ declineButtonText: "Cancel Call",
)
```
-
-
-
- 
-
-
-***
-
-### Functionality
-
-These are a set of small functional customizations that allow you to fine-tune the overall experience of the widget. With these, you can change text, set custom icons, and toggle the visibility of UI elements.
-
-**Example**
+
+
-In this example, we're enhancing the interface by customizing the decline button icons. By setting custom icons for decline buttons, users can enjoy a more visually appealing and personalized experience.
+---
-This level of customization allows developers to tailor the user interface to match the overall theme and branding of their application.
+## Custom View Slots
-**Example**
+### Avatar View
-Here is the example for reference:
+Replace the recipient's avatar.
```dart
CometChatOutgoingCall(
- user: user, // User Object
- call: callObject, // Call Object
- disableSoundForCalls: true,
- declineButtonText: "Decline",
+ user: user,
+ call: callObject,
+ avatarView: (context, call) {
+ return CircleAvatar(
+ radius: 50,
+ backgroundImage: NetworkImage(user?.avatar ?? ""),
+ );
+ },
)
```
-
-
-
-
-
-
-
+### Title View
-
-
+Replace the recipient's name / call status text.
+
+
+```dart
+CometChatOutgoingCall(
+ user: user,
+ call: callObject,
+ titleView: (context, call) {
+ return Text(
+ call.receiver?.name ?? "Unknown",
+ style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold, color: Colors.white),
+ );
+ },
+)
+```
-
-Below is a list of customizations along with corresponding code snippets
-
-| **Property** | Description | Code |
-| ---------------------------------- | --------------------------------------------------------------------------------- | ------------------------------------------- |
-| **Custom Sound For Calls** | Sets the custom sound for outgoing calls. | `customSoundForCalls: String?` |
-| **Custom Sound For Calls Package** | Sets the package for the custom sound for outgoing calls. | `customSoundForCallsPackage: String?` |
-| **Disable Sound For Calls** | Disables sound for outgoing calls. | `disableSoundForCalls: bool?` |
-| **Call** | Used to set the Call object against which we need to display the outgoing screen. | `call: Call` |
-| **callSettingsBuilder** | Sets the CallSettingsBuilder for the outgoing call configuration. | `callSettingsBuilder: CallSettingsBuilder?` |
-| **declineButtonIcon** | Sets decline button icon. | `declineButtonIcon: Widget?` |
-
-***
-
-## Advanced
-
-For advanced-level customization, you can set custom widgets to the widget. This lets you tailor each aspect of the widget to fit your exact needs and application aesthetics. You can create and define your widgets, layouts, and UI elements and then incorporate those into the widget.
-
-***
-
-### titleView
+### Subtitle View
-Allows setting a custom title view to be rendered.
-
-Use Cases:
-
-* Display the contact’s name in a unique style.
-* Show a call type indicator (Voice Call, Video Call).
-* Add status text like "Calling..." or "Ringing...".
+Replace the subtitle (e.g., "Calling...").
```dart
CometChatOutgoingCall(
- titleView: (context, call) {
- // return titleView
- },
+ user: user,
+ call: callObject,
+ subtitleView: (context, call) {
+ return Text(
+ "Ringing...",
+ style: TextStyle(fontSize: 14, color: Colors.white70),
+ );
+ },
)
```
-
-
-***
+### Cancelled View
-### subTitleView
-
-Allows setting a custom sub title view.
-
-Use Cases:
-
-* Display call duration if available.
-* Show network strength indicators.
-* Include a custom message like "Connecting...".
+Replace the cancel/end call button.
```dart
CometChatOutgoingCall(
- subtitleView: (context, call) {
- // return subtitleView
+ user: user,
+ call: callObject,
+ cancelledView: (context, call) {
+ return ElevatedButton.icon(
+ onPressed: () {
+ // Cancel call
},
+ icon: Icon(Icons.call_end),
+ label: Text("End Call"),
+ style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
+ );
+ },
)
```
-
-
-***
-
-### avatarView
-
-Allows setting a custom avatar view.
-
-Use Cases:
+---
-* Show a profile picture with an online indicator.
-* Display a custom icon based on the call type (Voice/Video).
-* Use an animated ring effect around the avatar when calling.
+## Style
```dart
CometChatOutgoingCall(
- avatarView: (context, call) {
- // return avatrView
- },
+ user: user,
+ call: callObject,
+ outgoingCallStyle: CometChatOutgoingCallStyle(
+ avatarStyle: CometChatAvatarStyle(
+ backgroundColor: Color(0xFFFBAA75),
+ borderRadius: BorderRadius.circular(8),
+ ),
+ declineButtonColor: Color(0xFFF44649),
+ declineButtonBorderRadius: BorderRadius.circular(12),
+ ),
)
```
-
-
-***
+
+
+
-### cancelledView
+### Style Properties
-Allows setting a custom cancelled view.
+| Property | Description |
+|---|---|
+| `avatarStyle` | Recipient avatar appearance |
+| `declineButtonColor` | Cancel button background color |
+| `declineButtonBorderRadius` | Cancel button corner radius |
+| `backgroundColor` | Screen background color |
-Use Cases:
+---
-* Customize the "End Call" button style.
-* Add a confirmation pop-up before ending the call.
-* Display different icons based on call status (Active, On Hold)..
+## Key V6 Differences
-
-
-```dart
-CometChatOutgoingCall(
- cancelledView: (context, call) {
- // return cancelledView
- },
-)
-```
+| Aspect | V5 | V6 |
+|---|---|---|
+| Subtitle | Static `String?` | Dynamic `subtitleView: Widget? Function(BuildContext, Call)?` |
+| Decline callback | `onDecline` | Renamed to `onCancelled` |
+| Decline icon | URL-based `String?` | Widget-based `declineButtonIcon: Widget?` |
+| State management | GetX controller | BLoC (`OutgoingCallBloc`) |
+| Removed | `theme`, `avatarStyle`, `cardStyle`, `buttonStyle`, `ongoingCallConfiguration` | Integrated into main style |
-
-
-
+---
-***
+## Next Steps
+
+
+
+ Handle incoming calls
+
+
+ Add voice and video call buttons
+
+
+ Complete calling setup
+
+
+ Detailed styling reference
+
+
diff --git a/ui-kit/flutter/overview.mdx b/ui-kit/flutter/overview.mdx
index 6f5dfc714..4f6ed46ad 100644
--- a/ui-kit/flutter/overview.mdx
+++ b/ui-kit/flutter/overview.mdx
@@ -1,126 +1,98 @@
---
-title: "Flutter UI Kit"
+title: "CometChat UI Kit For Flutter (V6)"
sidebarTitle: "Overview"
-description: "Prebuilt Flutter widgets for chat, voice, and video calling. Works on iOS and Android."
+description: "Use CometChat Flutter UI Kit V6 to add prebuilt chat widgets, calls, theming, localization, and customizable messaging experiences."
---
-
-🚀 **V6 Beta Available** — The Flutter UI Kit V6 is now available in beta with BLoC state management, clean architecture, and improved performance. [Check out the V6 Overview →](/ui-kit/flutter/v6/overview)
-
+The **CometChat UI Kit V6** for Flutter is a major architectural evolution of the Flutter Chat UIKit. It provides the same robust set of **prebuilt UI widgets** that are **modular, customizable, and highly scalable**, now built on **clean architecture** with **BLoC state management** for better testability, maintainability, and performance.
-
+***
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_chat_uikit` v5.2.x |
-| Calling | Optional — `cometchat_calls_uikit` |
-| Platforms | iOS 13.0+, Android API 21+ |
-| Flutter | 3.0+ recommended |
-| Localization | Built-in support |
-| Source | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/chat_uikit) |
-| AI Skills | `npx @cometchat/skills add` — [GitHub](https://github.com/cometchat/cometchat-skills) |
+## **What's New in V6?**
-
+* **BLoC State Management** – Replaces GetX with flutter_bloc for predictable, testable state.
+* **Clean Architecture** – Every module follows `bloc/` + `data/` + `domain/` + `di/` layers.
+* **No DataSource Decorator Chain** – Direct static method calls via `MessageTemplateUtils` replace the 10-layer decorator pattern.
+* **Internalized Shared UI** – `cometchat_uikit_shared` is now part of the package, no separate dependency needed.
+* **Faster Startup** – No extension registration or network calls at init time.
-The CometChat Flutter UI Kit provides prebuilt, customizable widgets for adding chat, voice, and video calling to any Flutter app. Each widget handles its own data fetching, real-time listeners, and state — you just drop them into your layout.
+***
-
-
-
+## **Why Choose CometChat UI Kit V6?**
----
+* **Rapid Integration** – Prebuilt UI widgets for faster deployment.
+* **Customizable & Flexible** – Modify the UI to align with your brand's identity.
+* **Cross-Platform Compatibility** – Works seamlessly across iOS and Android platforms.
+* **Scalable & Reliable** – Built on CometChat's robust chat infrastructure.
+* **Testable** – BLoC pattern with `bloc_test` and `mocktail` for comprehensive testing.
+* **Better Performance** – ~500-2000ms faster startup, no decorator chain overhead.
-## Integrate with AI Coding Agents
+***
-Use [CometChat Skills](https://github.com/cometchat/cometchat-skills) to add chat to any Flutter project through your AI coding agent. The skill takes an AI-first approach — your agent has a short conversation with you to understand your project and chat requirements, then writes production-grade integration code tailored to the files you already have.
+## **Integration**
-Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and [30+ more agents](https://github.com/cometchat/cometchat-skills).
+### **UI Components (Assemble It Yourself)**
-```bash
-npx @cometchat/skills add
-```
+A collection of individual widgets—like conversation lists, message lists, message composer, etc.—each with built-in chat logic so you can customize every element.
-Use `--ide ` to target a specific IDE (e.g. `--ide cursor`), or `--ide all` to install for all supported IDEs.
+**How It Works**
-Then in your IDE:
+* Import the widgets you need from the UI Kit.
+* Arrange them in your desired layout, applying styling or customization as needed.
+* Each widget integrates with CometChat logic via BLoC and clean architecture layers.
-```
-/cometchat add chat to my app
-```
+**Why It's Great**
-The skill detects your Flutter project structure, navigation setup, 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 routes, screens, and widgets before proposing a placement (route, modal sheet, or tab), shows the plan (which files it will create, modify, and leave untouched), and waits for your approval before writing code. Credentials are saved as a Dart const file or via `--dart-define`.
+* **Flexible Design** – You control the final UI arrangement.
+* **No Extra Overhead** – Implement only the features you need.
+* **Modular** – Use exactly what you want, when you want.
-After the first integration, re-run `/cometchat` anytime to pick from the iteration menu:
+[**Go to V6 Getting Started**](/ui-kit/flutter/getting-started)
-- **Customize look & feel** — theme presets (slack / whatsapp / imessage / discord / notion) or your own brand color
-- **Add a feature** — 40+ features including calls, reactions, polls, AI smart replies, file sharing, presence
-- **Customize a component** — custom message bubbles, headers, composer actions, empty/loading states
-- **Set up production auth** — replace the dev Auth Key with a server-side token endpoint
-- **Set up user management** — server endpoints for creating/updating/deleting CometChat users
-- **Run diagnostics** — verify, drift detection, symptom-to-cause lookup
+***
----
+## **Before Getting Started**
-## Try It
+Before you begin, grasp the fundamental concepts and features offered by CometChat's APIs, SDK, and UI Kit. You can find detailed information in the [Key Concepts](/fundamentals/key-concepts) documentation.
-
-
- Clone and run the Flutter sample project
-
-
+To begin, please follow the [Getting Started](/ui-kit/flutter/getting-started) guide.
----
+***
+
+## **Next Steps for Developers**
+
+1. **Learn the Basics** – [Key Concepts](/fundamentals/key-concepts).
+2. **Follow the Setup Guide** – [V6 Getting Started](/ui-kit/flutter/getting-started)
+3. **Customize UI** – Adjust styles, themes, and widgets.
+4. **Test & Deploy** – Run tests and launch your chat app.
+
+***
+
+## **Helpful Resources**
+
+
+
-## Get Started
+Fully functional sample applications to accelerate your development.
-
-
-
+[View on GitHub](https://github.com/cometchat/cometchat-uikit-flutter)
-
- Install, initialize, and build your first chat screen
----
+
-## Explore
-
-
-
- Browse all prebuilt UI widgets
-
-
- Chat, calling, AI, and extensions
-
-
- Colors, fonts, dark mode, and custom styling
-
-
- Understand CometChat's core concepts
-
-
+Upgrade from V5 to V6 with our step-by-step migration guide.
----
+[View Migration Guide](/ui-kit/flutter/upgrading-from-v5)
-## Resources
-
-
-
- Working reference app
-
-
- Full UI Kit source on GitHub
-
-
- Design resources and prototyping
-
-
- Common issues and fixes
-
-
- Open a support ticket
-
-
- Upgrading from v4
-
+
+
+***
+
+## **Need Help?**
+
+If you need assistance, check out:
+
+* [Developer Community](http://community.cometchat.com/)
+* [Support Portal](https://help.cometchat.com/hc/en-us/requests/new)
diff --git a/ui-kit/flutter/search.mdx b/ui-kit/flutter/search.mdx
index 24244f8a7..370085e21 100644
--- a/ui-kit/flutter/search.mdx
+++ b/ui-kit/flutter/search.mdx
@@ -1,329 +1,214 @@
---
title: "Search"
-description: "A powerful search interface for finding conversations and messages in real time"
+description: "Add CometChat Flutter UI Kit search for conversations and messages with categorized results and navigation callbacks."
---
-
-```json
-{
- "component": "CometChatSearch",
- "package": "cometchat_chat_uikit",
- "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
- "description": "A powerful search interface that allows users to search across conversations and messages in real time with filters and customization options",
- "primaryOutput": {
- "prop": "onMessageClicked",
- "type": "void Function(BaseMessage message)"
- },
- "props": {
- "data": {
- "user": {
- "type": "User?",
- "default": "null",
- "note": "User object for user message search"
- },
- "group": {
- "type": "Group?",
- "default": "null",
- "note": "Group object for group message search"
- },
- "searchFilters": {
- "type": "List?",
- "default": "null",
- "note": "List of filters to be shown in the search screen"
- },
- "searchIn": {
- "type": "List?",
- "default": "null",
- "note": "List of scopes to be shown in the search result"
- }
- },
- "callbacks": {
- "onBack": "VoidCallback?",
- "onConversationClicked": "void Function(Conversation conversation)?",
- "onMessageClicked": "void Function(BaseMessage message)?",
- "onError": "OnError?",
- "onConversationsLoad": "OnLoad?",
- "onMessagesLoad": "OnLoad?",
- "onEmpty": "OnEmpty?"
- },
- "visibility": {
- "usersStatusVisibility": {
- "type": "bool?",
- "default": "null"
- },
- "receiptsVisibility": {
- "type": "bool?",
- "default": "null"
- },
- "groupTypeVisibility": {
- "type": "bool?",
- "default": "null"
- }
- },
- "viewSlots": {
- "loadingStateView": "WidgetBuilder?",
- "errorStateView": "WidgetBuilder?",
- "emptyStateView": "WidgetBuilder?",
- "initialStateView": "WidgetBuilder?",
- "conversationItemView": "Widget? Function(BuildContext, Conversation)?",
- "conversationTitleView": "Widget? Function(BuildContext, Conversation)?",
- "conversationLeadingView": "Widget? Function(BuildContext, Conversation)?",
- "conversationSubtitleView": "Widget? Function(BuildContext, Conversation)?",
- "conversationTailView": "Widget? Function(BuildContext, Conversation)?",
- "searchTextMessageView": "Widget? Function(BuildContext, TextMessage)?",
- "searchImageMessageView": "Widget? Function(BuildContext, MediaMessage)?",
- "searchVideoMessageView": "Widget? Function(BuildContext, MediaMessage)?",
- "searchFileMessageView": "Widget? Function(BuildContext, MediaMessage)?",
- "searchAudioMessageView": "Widget? Function(BuildContext, MediaMessage)?",
- "searchMessageLinkView": "Widget? Function(BuildContext, BaseMessage)?"
- },
- "formatting": {
- "dateSeparatorFormatterCallback": {
- "type": "DateTimeFormatterCallback?",
- "default": "null"
- },
- "timeSeparatorFormatterCallback": {
- "type": "DateTimeFormatterCallback?",
- "default": "null"
- }
- }
+`CometChatSearch` provides unified search functionality across conversations and messages. In V6, it uses a single consolidated `SearchBloc` replacing the three separate controllers from V5.
+
+
+
+
+
+---
+
+## Where It Fits
+
+`CometChatSearch` is typically launched from a search button in the conversations list or message header. It searches across both conversations and messages, displaying results in categorized sections.
+
+
+
+```dart
+CometChatSearch(
+ onConversationItemClick: (conversation) {
+ // Navigate to conversation
},
- "events": [],
- "sdkListeners": [],
- "compositionExample": {
- "description": "CometChatSearch can be used standalone or embedded within other screens",
- "components": ["CometChatConversations", "CometChatMessageList"],
- "flow": "User searches → Results displayed → User clicks result → Navigate to conversation/message"
+ onMessageItemClick: (message) {
+ // Navigate to message in context
},
- "types": {
- "SearchFilter": {
- "label": "String",
- "icon": "Widget?"
- },
- "SearchScope": {
- "conversations": "bool",
- "messages": "bool"
- }
- }
-}
+)
```
-
+
+
-## Where It Fits
+---
-CometChatSearch is a full-screen search experience that allows users to find messages, conversations, media, and more through an intuitive and filterable search interface. It can be embedded in multiple contexts — as part of the conversation list, message header, or as a standalone full-screen search experience.
+## Quick Start
-
-
-
+Using Navigator:
-## Minimal Render
+
+
+```dart
+Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatSearch()));
+```
+
+
-The simplest way to render CometChatSearch:
+Embedding as a widget:
```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:flutter/material.dart';
-
-// Using Navigator to launch CometChatSearch
-Navigator.push(
- context,
- MaterialPageRoute(builder: (context) => CometChatSearch())
-);
+@override
+Widget build(BuildContext context) {
+ return Scaffold(
+ body: SafeArea(
+ child: CometChatSearch(),
+ ),
+ );
+}
```
-You can also embed it as a widget:
+Launching from conversations with search button:
```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:flutter/material.dart';
-
-class SearchScreen extends StatelessWidget {
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: SafeArea(
- child: CometChatSearch(),
+CometChatConversations(
+ hideSearch: false,
+ searchReadOnly: true,
+ onSearchTap: () {
+ Navigator.push(context, MaterialPageRoute(
+ builder: (context) => CometChatSearch(
+ onConversationItemClick: (conversation) {
+ // Navigate to chat
+ },
+ onMessageItemClick: (message) {
+ // Navigate to message
+ },
),
- );
- }
-}
+ ));
+ },
+)
```
-## Filtering
+Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()` and a user logged in.
-Use the request builder props to filter which items appear in the search results.
+---
-### ConversationsRequestBuilder
+## Actions and Events
-Filter conversations in the search results:
+### Callback Methods
+
+#### `onConversationItemClick`
+
+Fires when a conversation result is tapped.
```dart
CometChatSearch(
- conversationsRequestBuilder: ConversationsRequestBuilder()
- ..limit = 30,
+ onConversationItemClick: (conversation) {
+ final entity = conversation.conversationWith;
+ if (entity is User) {
+ navigateToUserChat(entity);
+ } else if (entity is Group) {
+ navigateToGroupChat(entity);
+ }
+ },
)
```
-### MessagesRequestBuilder
+#### `onMessageItemClick`
-Filter messages in the search results:
+Fires when a message result is tapped.
```dart
CometChatSearch(
- messagesRequestBuilder: MessagesRequestBuilder()
- ..limit = 50,
+ onMessageItemClick: (message) {
+ // Navigate to the message in its conversation
+ },
)
```
-### Scoped Search
+#### `onBack`
-Search within a specific user or group conversation:
+Fires when the user presses the back button.
```dart
-// Search within a specific user's conversation
-CometChatSearch(
- user: user,
-)
-
-// Search within a specific group's conversation
CometChatSearch(
- group: group,
+ onBack: () {
+ Navigator.pop(context);
+ },
)
```
-## Actions and Events
-
-### Callback Props
-
-Component-level callbacks that fire on specific user interactions:
+#### `onError`
-| Callback | Signature | Fires When |
-|----------|-----------|------------|
-| `onConversationClicked` | `void Function(Conversation conversation)?` | User clicks a conversation from search results |
-| `onMessageClicked` | `void Function(BaseMessage message)?` | User clicks a message from search results |
-| `onBack` | `VoidCallback?` | User clicks the back button |
-| `onError` | `OnError?` | An error occurs in the component |
-| `onConversationsLoad` | `OnLoad?` | Conversations are loaded |
-| `onMessagesLoad` | `OnLoad?` | Messages are loaded |
-| `onEmpty` | `OnEmpty?` | Search results are empty |
+Fires on internal errors.
```dart
CometChatSearch(
- onConversationClicked: (conversation) {
- // Navigate to the conversation
- print('Conversation clicked: ${conversation.conversationId}');
- },
- onMessageClicked: (message) {
- // Navigate to the message
- print('Message clicked: ${message.id}');
- },
- onBack: () {
- Navigator.pop(context);
- },
onError: (e) {
- print('Error: $e');
+ debugPrint("Search error: ${e.message}");
},
)
```
-### Global UI Events
-
-The CometChatSearch component does not produce any global UI events.
+---
-## Custom View Slots
+## Functionality
-Customize the appearance of CometChatSearch by replacing default views with your own widgets.
+| Property | Type | Default | Description |
+|---|---|---|---|
+| `showBackButton` | `bool?` | `true` | Toggle back button visibility |
+| `placeholder` | `String?` | `null` | Search input placeholder text |
+| `hideConversationResults` | `bool?` | `false` | Hide conversation search results |
+| `hideMessageResults` | `bool?` | `false` | Hide message search results |
-### State Views
+---
-| Slot | Signature | Replaces |
-|------|-----------|----------|
-| `loadingStateView` | `WidgetBuilder?` | Loading spinner |
-| `emptyStateView` | `WidgetBuilder?` | Empty state display |
-| `errorStateView` | `WidgetBuilder?` | Error state display |
-| `initialStateView` | `WidgetBuilder?` | Initial state before search |
+## Custom View Slots
-### Conversation View Slots
+### Conversation Item View
-| Slot | Signature | Replaces |
-|------|-----------|----------|
-| `conversationItemView` | `Widget? Function(BuildContext, Conversation)?` | Entire conversation list item |
-| `conversationLeadingView` | `Widget? Function(BuildContext, Conversation)?` | Avatar / left section |
-| `conversationTitleView` | `Widget? Function(BuildContext, Conversation)?` | Name / title text |
-| `conversationSubtitleView` | `Widget? Function(BuildContext, Conversation)?` | Secondary text / preview |
-| `conversationTailView` | `Widget? Function(BuildContext, Conversation)?` | Right section / timestamp |
+Replace the conversation result item.
-### Message View Slots
+
+
+```dart
+CometChatSearch(
+ conversationItemView: (conversation, context) {
+ return ListTile(
+ leading: CircleAvatar(child: Text(conversation.conversationWith?.name?[0] ?? "")),
+ title: Text(conversation.conversationWith?.name ?? ""),
+ );
+ },
+)
+```
+
+
-| Slot | Signature | Replaces |
-|------|-----------|----------|
-| `searchTextMessageView` | `Widget? Function(BuildContext, TextMessage)?` | Text message item |
-| `searchImageMessageView` | `Widget? Function(BuildContext, MediaMessage)?` | Image message item |
-| `searchVideoMessageView` | `Widget? Function(BuildContext, MediaMessage)?` | Video message item |
-| `searchFileMessageView` | `Widget? Function(BuildContext, MediaMessage)?` | File message item |
-| `searchAudioMessageView` | `Widget? Function(BuildContext, MediaMessage)?` | Audio message item |
-| `searchMessageLinkView` | `Widget? Function(BuildContext, BaseMessage)?` | Link message item |
+### Message Item View
-### Example: Custom Text Message View
+Replace the message result item.
```dart
CometChatSearch(
- searchTextMessageView: (context, message) {
- String senderName = message.sender?.name ?? "Unknown";
- return Container(
- padding: const EdgeInsets.all(16),
- width: double.infinity,
- color: const Color(0xFFE8E4F3),
- child: Row(
- children: [
- Text(
- "$senderName: ",
- style: const TextStyle(
- color: Color(0xFF6B4FBB),
- fontSize: 16,
- fontWeight: FontWeight.bold,
- ),
- ),
- Expanded(
- child: Text(
- message.text,
- maxLines: 1,
- overflow: TextOverflow.ellipsis,
- style: const TextStyle(
- color: Color(0xFF4A4A4A),
- fontSize: 16,
- ),
- ),
- ),
- ],
- ),
+ messageItemView: (message, context) {
+ return ListTile(
+ title: Text(message.sender?.name ?? ""),
+ subtitle: message is TextMessage ? Text(message.text) : Text("Media message"),
);
},
)
@@ -331,165 +216,81 @@ CometChatSearch(
-
- 
-
+### State Views
-### Icon Customization
+
+
+```dart
+CometChatSearch(
+ emptyStateView: (context) => Center(child: Text("No results found")),
+ errorStateView: (context) => Center(child: Text("Search failed")),
+ loadingStateView: (context) => Center(child: CircularProgressIndicator()),
+)
+```
+
+
-| Prop | Type | Description |
-|------|------|-------------|
-| `searchBackIcon` | `Widget?` | Custom back icon |
-| `searchClearIcon` | `Widget?` | Custom clear icon |
+---
-## Styling
+## Advanced
-Customize the appearance of CometChatSearch using `CometChatSearchStyle`.
+### BLoC Access
-
- 
-
+The search widget uses `SearchBloc` internally:
+
+| Component | Description |
+|---|---|
+| `SearchBloc` | Single consolidated BLoC for all search types |
+| `SearchEvent` | Events: `SearchTextChanged`, `ClearSearch`, `LoadMoreConversationResults`, `LoadMoreMessageResults` |
+| `SearchState` | Search state with conversation and message results |
+
+### V5 → V6 Migration
+
+| V5 | V6 |
+|---|---|
+| `CometChatSearchController` | `SearchBloc` |
+| `CometChatConversationsSearchController` | Merged into `SearchBloc` |
+| `CometChatMessagesSearchController` | Merged into `SearchBloc` |
+| `SearchUtils` | Inlined into `SearchBloc` |
+| 3 separate controllers | 1 unified BLoC |
+
+---
+
+## Style
```dart
CometChatSearch(
searchStyle: CometChatSearchStyle(
- backgroundColor: const Color(0xFFEDEAFA),
- searchBackgroundColor: Colors.white,
- searchTextColor: Colors.black,
- searchPlaceHolderTextColor: Colors.grey,
-
- // Filter chip styling
- searchFilterChipBackgroundColor: Colors.grey[200],
- searchFilterChipSelectedBackgroundColor: Colors.purple,
- searchFilterChipTextColor: Colors.black,
- searchFilterChipSelectedTextColor: Colors.white,
-
- // Conversation item styling
- searchConversationItemBackgroundColor: const Color(0xFFEDEAFA),
- searchConversationTitleTextStyle: const TextStyle(fontWeight: FontWeight.bold),
- searchConversationSubTitleTextStyle: const TextStyle(color: Colors.grey),
-
- // Message item styling
- searchMessageItemBackgroundColor: const Color(0xFFEDEAFA),
- searchMessageTitleTextStyle: const TextStyle(fontWeight: FontWeight.bold),
-
- // See more button
- searchSeeMoreColor: Colors.purple,
+ backgroundColor: Colors.white,
+ searchBoxBackgroundColor: Color(0xFFF5F5F5),
+ searchBoxBorderRadius: BorderRadius.circular(12),
),
)
```
-### Style Properties
-
-| Property | Type | Description |
-|----------|------|-------------|
-| `backgroundColor` | `Color?` | Background color of the search component |
-| `searchBackgroundColor` | `Color?` | Background color of the search text field |
-| `searchBorder` | `BorderSide?` | Border of the search text field |
-| `searchBorderRadius` | `BorderRadius?` | Border radius of the search text field |
-| `searchTextColor` | `Color?` | Color of the search text |
-| `searchTextStyle` | `TextStyle?` | Style of the search text |
-| `searchPlaceHolderTextColor` | `Color?` | Color of the placeholder text |
-| `searchPlaceHolderTextStyle` | `TextStyle?` | Style of the placeholder text |
-| `searchBackIconColor` | `Color?` | Color of the back icon |
-| `searchClearIconColor` | `Color?` | Color of the clear icon |
-| `searchFilterChipBackgroundColor` | `Color?` | Background color of filter chips |
-| `searchFilterChipSelectedBackgroundColor` | `Color?` | Background color of selected filter chips |
-| `searchFilterChipTextColor` | `Color?` | Text color of filter chips |
-| `searchFilterChipTextStyle` | `TextStyle?` | Text style of filter chips |
-| `searchFilterChipSelectedTextColor` | `Color?` | Text color of selected filter chips |
-| `searchFilterChipSelectedTextStyle` | `TextStyle?` | Text style of selected filter chips |
-| `searchFilterIconColor` | `Color?` | Color of filter icons |
-| `searchFilterSelectedIconColor` | `Color?` | Color of selected filter icons |
-| `searchFilterChipBorder` | `Border?` | Border of filter chips |
-| `searchFilterChipSelectedBorder` | `Border?` | Border of selected filter chips |
-| `searchFilterChipBorderRadius` | `BorderRadius?` | Border radius of filter chips |
-| `searchSectionHeaderTextColor` | `Color?` | Color of section header text |
-| `searchSectionHeaderTextStyle` | `TextStyle?` | Style of section header text |
-| `searchConversationItemBackgroundColor` | `Color?` | Background color of conversation items |
-| `searchConversationTitleTextColor` | `Color?` | Text color of conversation titles |
-| `searchConversationTitleTextStyle` | `TextStyle?` | Style of conversation titles |
-| `searchConversationSubTitleTextStyle` | `TextStyle?` | Style of conversation subtitles |
-| `searchConversationTitleSubTextColor` | `Color?` | Text color of conversation subtitles |
-| `searchConversationDateTextColor` | `Color?` | Text color of conversation dates |
-| `searchConversationDateTextStyle` | `TextStyle?` | Style of conversation dates |
-| `searchMessageItemBackgroundColor` | `Color?` | Background color of message items |
-| `searchMessageTitleTextColor` | `Color?` | Text color of message titles |
-| `searchMessageTitleTextStyle` | `TextStyle?` | Style of message titles |
-| `searchMessageSubTitleTextColor` | `Color?` | Text color of message subtitles |
-| `searchMessageSubTitleTextStyle` | `TextStyle?` | Style of message subtitles |
-| `searchMessageTimeStampStyle` | `CometChatDateStyle?` | Style of message timestamps |
-| `searchMessageDateSeparatorStyle` | `CometChatDateStyle?` | Style of date separators |
-| `searchEmptyStateTextColor` | `Color?` | Text color for empty state |
-| `searchEmptyStateTextStyle` | `TextStyle?` | Style for empty state text |
-| `searchEmptyStateSubtitleColor` | `Color?` | Color for empty state subtitle |
-| `searchEmptyStateSubtitleStyle` | `TextStyle?` | Style for empty state subtitle |
-| `searchErrorStateTextColor` | `Color?` | Text color for error state |
-| `searchErrorStateTextStyle` | `TextStyle?` | Style for error state text |
-| `searchErrorStateSubtitleColor` | `Color?` | Color for error state subtitle |
-| `searchErrorStateSubtitleStyle` | `TextStyle?` | Style for error state subtitle |
-| `searchSeeMoreColor` | `Color?` | Color of "See More" button |
-| `searchSeeMoreStyle` | `TextStyle?` | Style of "See More" button |
-| `avatarStyle` | `CometChatAvatarStyle?` | Style for avatars |
-| `badgeStyle` | `CometChatBadgeStyle?` | Style for badges |
-
-## Props Reference
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `user` | `User?` | `null` | User object for scoped search |
-| `group` | `Group?` | `null` | Group object for scoped search |
-| `searchFilters` | `List?` | `null` | List of filters to show |
-| `searchIn` | `List?` | `null` | List of search scopes |
-| `usersStatusVisibility` | `bool?` | `null` | Show/hide user status indicator |
-| `receiptsVisibility` | `bool?` | `null` | Show/hide message receipts |
-| `groupTypeVisibility` | `bool?` | `null` | Show/hide group type icon |
-| `onBack` | `VoidCallback?` | `null` | Back button callback |
-| `onConversationClicked` | `Function(Conversation)?` | `null` | Conversation click callback |
-| `onMessageClicked` | `Function(BaseMessage)?` | `null` | Message click callback |
-| `onError` | `OnError?` | `null` | Error callback |
-| `onConversationsLoad` | `OnLoad?` | `null` | Conversations load callback |
-| `onMessagesLoad` | `OnLoad?` | `null` | Messages load callback |
-| `onEmpty` | `OnEmpty?` | `null` | Empty state callback |
-| `loadingStateView` | `WidgetBuilder?` | `null` | Custom loading view |
-| `errorStateView` | `WidgetBuilder?` | `null` | Custom error view |
-| `emptyStateView` | `WidgetBuilder?` | `null` | Custom empty view |
-| `initialStateView` | `WidgetBuilder?` | `null` | Custom initial view |
-| `conversationItemView` | `Widget? Function(BuildContext, Conversation)?` | `null` | Custom conversation item |
-| `conversationTitleView` | `Widget? Function(BuildContext, Conversation)?` | `null` | Custom conversation title |
-| `conversationLeadingView` | `Widget? Function(BuildContext, Conversation)?` | `null` | Custom conversation leading view |
-| `conversationSubtitleView` | `Widget? Function(BuildContext, Conversation)?` | `null` | Custom conversation subtitle |
-| `conversationTailView` | `Widget? Function(BuildContext, Conversation)?` | `null` | Custom conversation tail view |
-| `searchTextMessageView` | `Widget? Function(BuildContext, TextMessage)?` | `null` | Custom text message view |
-| `searchImageMessageView` | `Widget? Function(BuildContext, MediaMessage)?` | `null` | Custom image message view |
-| `searchVideoMessageView` | `Widget? Function(BuildContext, MediaMessage)?` | `null` | Custom video message view |
-| `searchFileMessageView` | `Widget? Function(BuildContext, MediaMessage)?` | `null` | Custom file message view |
-| `searchAudioMessageView` | `Widget? Function(BuildContext, MediaMessage)?` | `null` | Custom audio message view |
-| `searchMessageLinkView` | `Widget? Function(BuildContext, BaseMessage)?` | `null` | Custom link message view |
-| `searchBackIcon` | `Widget?` | `null` | Custom back icon |
-| `searchClearIcon` | `Widget?` | `null` | Custom clear icon |
-| `dateSeparatorFormatterCallback` | `DateTimeFormatterCallback?` | `null` | Date separator formatter |
-| `timeSeparatorFormatterCallback` | `DateTimeFormatterCallback?` | `null` | Time separator formatter |
-| `conversationsProtocol` | `ConversationsBuilderProtocol?` | `null` | Conversations builder protocol |
-| `conversationsRequestBuilder` | `ConversationsRequestBuilder?` | `null` | Conversations request builder |
-| `messagesRequestBuilder` | `MessagesRequestBuilder?` | `null` | Messages request builder |
-| `searchStyle` | `CometChatSearchStyle?` | `null` | Style configuration |
+
+
+
+
+---
+
+## Next Steps
- Display and manage chat conversations
+ Browse recent conversations
Display messages in a conversation
-
- Learn how to customize the look and feel
+
+ Detailed styling reference
-
- Support multiple languages in your app
+
+ Browse available users
diff --git a/ui-kit/flutter/shortcut-formatter-guide.mdx b/ui-kit/flutter/shortcut-formatter-guide.mdx
index fe48d6ae7..e00760c42 100644
--- a/ui-kit/flutter/shortcut-formatter-guide.mdx
+++ b/ui-kit/flutter/shortcut-formatter-guide.mdx
@@ -1,311 +1,20 @@
---
title: "Shortcut Formatter"
-description: "Provide !shortcut style expansions invoking extension APIs or dialogs before inserting content in CometChat Flutter UI Kit."
+description: "Implement shortcut formatting in CometChat Flutter UI Kit with CometChatTextFormatter, trigger characters, and message shortcuts."
---
-
-
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_chat_uikit` |
-| Key class | `ShortcutFormatter` (extends `CometChatTextFormatter`) |
-| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login(uid)` |
-| Purpose | Provide !shortcut style expansions invoking extension APIs |
-| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
-| Related | [Custom Text Formatter](/ui-kit/flutter/custom-text-formatter-guide) · [All Guides](/ui-kit/flutter/guide-overview) |
-
-
-
## Introduction
-The `ShortcutFormatter` class extends the `CometChatTextFormatter` class to provide a mechanism for handling shortcuts within messages. This guide will walk you through the process of using ShortcutFormatter to implement shortcut extensions in your CometChat application.
+The `ShortcutFormatter` class extends `CometChatTextFormatter` to handle shortcuts within messages. This guide walks you through implementing shortcut extensions in your CometChat V6 application.
## Setup
-1. **Create the ShortcutFormatter Class**: Define the `ShortcutFormatter` class by extending the `CometChatTextFormatter` class.
-
-
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
-class ShortcutFormatter extends CometChatTextFormatter {
-
-}
-```
-
-
-
-
-
-2. **Init**: Initialize the `messageShortcuts` map and `shortcuts` list in the init().
-
-
-
-```dart
-@override
-void init() {
- trackingCharacter ??= "!";
-}
-```
-
-
-
-
-
-3. **Prepare Shortcuts**: Implement the `prepareShortcuts()` method to fetch shortcuts from the server using CometChat extension.
-
-
-
-```dart
-bool isShortcutTracking = false;
-
-void prepareShortcuts(TextEditingController textEditingController) {
- CometChat.callExtension('message-shortcuts', 'GET', '/v1/fetch', null,
- onSuccess: (map) {
- if (map.isNotEmpty) {
- Map data = map["data"];
- if (data.isNotEmpty) {
- Map shortcuts = data["shortcuts"];
- if (shortcuts.isNotEmpty) {
- parseData(
- shortcuts: shortcuts,
- textEditingController: textEditingController
- );
- }
- }
- }
- }, onError: (error) {});
-}
-
-void parseData({Map? shortcuts, required TextEditingController textEditingController}) async {
- if (shortcuts == null || shortcuts.isEmpty) {
- suggestionListEventSink?.add([]);
- if (onSearch != null) {
- onSearch!(null);
- }
- CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
- } else {
- CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
- if (suggestionListEventSink != null && shortcuts.isNotEmpty) {
- List list = [];
- shortcuts.forEach((key, value) => list.add(SuggestionListItem(
- id: key,
- title: "$key → $value",
- onTap: () {
- int cursorPos = textEditingController.selection.base.offset;
- String textOnLeftOfValue = textEditingController.text.substring(0, cursorPos - 1);
- String textOnRightOfValue = textEditingController.text.substring(cursorPos);
- textEditingController.text = "$textOnLeftOfValue$value $textOnRightOfValue";
- updatePreviousText(textEditingController.text);
- textEditingController.selection = TextSelection(
- baseOffset: cursorPos - 1 + "$value".length + 1,
- extentOffset: cursorPos - 1 + "$value".length + 1,
- );
- resetMatchTracker();
- isShortcutTracking = false;
- CometChatUIEvents.hidePanel(
- composerId, CustomUIPosition.composerPreview
- );
- })
- ));
- suggestionListEventSink?.add(list);
- }
- }
-}
-
-void updatePreviousText(String text) {
- if (previousTextEventSink != null) {
- previousTextEventSink!.add(text);
- }
-}
-
-void resetMatchTracker() {
- suggestionListEventSink?.add([]);
- if (onSearch != null) {
- onSearch!(null);
- }
-}
-```
-
-
-
-
-
-4. **Override onChange Method**: Override the `onChange()` method to search for shortcuts based on the entered query.
-
-
-
-```dart
-@override
-void onChange(TextEditingController textEditingController, String previousText) {
- var cursorPosition = textEditingController.selection.base.offset;
- if (textEditingController.text.isEmpty) {
- resetMatchTracker();
- if (previousText.length > textEditingController.text.length) {
- if (previousText[cursorPosition] == trackingCharacter && isShortcutTracking) {
- isShortcutTracking = false;
- if (onSearch != null) {
- onSearch!(null);
- }
- CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
- }
- return;
- }
- }
-
- if (previousText.length > textEditingController.text.length) {
- if (previousText[cursorPosition] == trackingCharacter) {
- isShortcutTracking = false;
- if (onSearch != null) {
- onSearch!(null);
- }
- CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
- }
- } else {
- String previousCharacter = cursorPosition == 0 ? "" : textEditingController.text[cursorPosition - 1];
- bool isSpace = cursorPosition == 1 || (textEditingController.text.length > 1 && cursorPosition > 1 && (textEditingController.text[cursorPosition - 2] == " " || textEditingController.text[cursorPosition - 2] == "\n"));
-
- if (isShortcutTracking) {
- isShortcutTracking = false;
- if (onSearch != null) {
- onSearch!(null);
- }
- CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
- } else if (previousCharacter == trackingCharacter && isSpace) {
- isShortcutTracking = true;
- if (onSearch != null) {
- onSearch!(trackingCharacter);
- }
- CometChatUIEvents.showPanel(composerId, CustomUIPosition.composerPreview, (context) => getLoadingIndicator(context, cometChatTheme));
- prepareShortcuts(textEditingController);
- }
- }
-}
-```
-
-
-
-
-
-5. **Handle Scroll to Bottom**: Override the `onScrollToBottom()` method if needed.
-
-
-
-```dart
-@override
-void onScrollToBottom(TextEditingController textEditingController) {
- // TODO: implement onScrollToBottom
-}
-```
-
-
-
-
-
-6. **Additional Base Class Methods**: The `CometChatTextFormatter` base class provides additional methods you can override for advanced customization:
-
-
-
-```dart
-/// Override to customize the text style in message bubbles
-@override
-TextStyle getMessageBubbleTextStyle(BuildContext context, BubbleAlignment? alignment, {bool forConversation = false}) {
- return TextStyle(
- color: alignment == BubbleAlignment.right ? Colors.white : Colors.black,
- fontSize: 14,
- fontWeight: FontWeight.bold,
- );
-}
-
-/// Override to build custom attributed text for the input field
-@override
-List buildInputFieldText({
- required BuildContext context,
- TextStyle? style,
- required bool withComposing,
- required String text,
- List? existingAttributes,
-}) {
- return existingAttributes ?? [];
-}
-
-/// Override to get attributed text for styling in message bubbles
-@override
-List getAttributedText(
- String text,
- BuildContext context,
- BubbleAlignment? alignment, {
- List? existingAttributes,
- Function(String)? onTap,
- bool forConversation = false,
-}) {
- // Custom implementation
- return super.getAttributedText(text, context, alignment,
- existingAttributes: existingAttributes,
- onTap: onTap,
- forConversation: forConversation);
-}
-```
-
-
-
-
-
-***
-
-## Usage
-
-The widgets [CometChatConversations](/ui-kit/flutter/conversations), [CometChatMessageComposer](/ui-kit/flutter/message-composer) and [CometChatMessageList](/ui-kit/flutter/message-list) have a property called `textFormatters` which accepts a list of CometChatTextFormatter to format the text. The code shared below `textFormatters` consisting of the above created Shortcuts formatter being passed down to [CometChatMessageComposer](/ui-kit/flutter/message-composer) from [CometChatConversationsWithMessages](/ui-kit/flutter/conversations) with help of configurations.
-
-
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:flutter/material.dart';
-import 'shortcut_formatter.dart';
-
-class ShortcutFormatterExample extends StatefulWidget {
- const ShortcutFormatterExample({super.key});
-
- @override
- State createState() => _ShortcutFormatterExampleState();
-}
-
-class _ShortcutFormatterExampleState extends State {
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: SafeArea(
- child: CometChatConversationsWithMessages(
- messageConfiguration: MessageConfiguration(
- messageComposerConfiguration: MessageComposerConfiguration(
- textFormatters: [ShortcutFormatter()],
- ),
- )
- ),
- ),
- );
- }
-}
-```
-
-
-
-
-
-***
-
-## Example
-
-Here is the complete example for reference:
+1. Create the ShortcutFormatter class by extending `CometChatTextFormatter`:
```dart
import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:flutter/material.dart';
class ShortcutFormatter extends CometChatTextFormatter {
@override
@@ -317,79 +26,60 @@ class ShortcutFormatter extends CometChatTextFormatter {
void prepareShortcuts(TextEditingController textEditingController) {
CometChat.callExtension('message-shortcuts', 'GET', '/v1/fetch', null,
- onSuccess: (map) {
- if (map.isNotEmpty) {
- Map data = map["data"];
- if (data.isNotEmpty) {
- Map shortcuts = data["shortcuts"];
- if (shortcuts.isNotEmpty) {
- parseData(
- shortcuts: shortcuts,
- textEditingController: textEditingController);
- }
+ onSuccess: (map) {
+ if (map.isNotEmpty) {
+ Map data = map["data"];
+ if (data.isNotEmpty) {
+ Map shortcuts = data["shortcuts"];
+ if (shortcuts.isNotEmpty) {
+ parseData(shortcuts: shortcuts, textEditingController: textEditingController);
}
}
- }, onError: (error) {});
+ }
+ },
+ onError: (error) {},
+ );
}
void parseData({Map? shortcuts, required TextEditingController textEditingController}) async {
if (shortcuts == null || shortcuts.isEmpty) {
suggestionListEventSink?.add([]);
- if (onSearch != null) {
- onSearch!(null);
- }
+ if (onSearch != null) onSearch!(null);
CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
} else {
CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
if (suggestionListEventSink != null && shortcuts.isNotEmpty) {
List list = [];
shortcuts.forEach((key, value) => list.add(SuggestionListItem(
- id: key,
- title: "$key → $value",
- onTap: () {
- int cursorPos = textEditingController.selection.base.offset;
- String textOnLeftOfValue = textEditingController.text.substring(0, cursorPos - 1);
- String textOnRightOfValue = textEditingController.text.substring(cursorPos);
- textEditingController.text = "$textOnLeftOfValue$value $textOnRightOfValue";
- updatePreviousText(textEditingController.text);
- textEditingController.selection = TextSelection(
- baseOffset: cursorPos - 1 + "$value".length + 1,
- extentOffset: cursorPos - 1 + "$value".length + 1,
- );
- resetMatchTracker();
- isShortcutTracking = false;
- CometChatUIEvents.hidePanel(
- composerId, CustomUIPosition.composerPreview
- );
- })
- ));
+ id: key,
+ title: "$key → $value",
+ onTap: () {
+ int cursorPos = textEditingController.selection.base.offset;
+ String left = textEditingController.text.substring(0, cursorPos - 1);
+ String right = textEditingController.text.substring(cursorPos);
+ textEditingController.text = "$left$value $right";
+ updatePreviousText(textEditingController.text);
+ textEditingController.selection = TextSelection(
+ baseOffset: cursorPos - 1 + "$value".length + 1,
+ extentOffset: cursorPos - 1 + "$value".length + 1,
+ );
+ resetMatchTracker();
+ isShortcutTracking = false;
+ CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
+ },
+ )));
suggestionListEventSink?.add(list);
}
}
}
void updatePreviousText(String text) {
- if (previousTextEventSink != null) {
- previousTextEventSink!.add(text);
- }
+ previousTextEventSink?.add(text);
}
void resetMatchTracker() {
suggestionListEventSink?.add([]);
- if (onSearch != null) {
- onSearch!(null);
- }
- }
-
- @override
- TextStyle getMessageInputTextStyle(CometChatTheme theme) {
- // TODO: implement getMessageInputTextStyle
- throw UnimplementedError();
- }
-
- @override
- void handlePreMessageSend(BuildContext context, BaseMessage baseMessage) {
- // TODO: implement handlePreMessageSend
+ if (onSearch != null) onSearch!(null);
}
@override
@@ -397,97 +87,54 @@ class ShortcutFormatter extends CometChatTextFormatter {
var cursorPosition = textEditingController.selection.base.offset;
if (textEditingController.text.isEmpty) {
resetMatchTracker();
- if (previousText.length > textEditingController.text.length) {
- if (previousText[cursorPosition] == trackingCharacter && isShortcutTracking) {
- isShortcutTracking = false;
- if (onSearch != null) {
- onSearch!(null);
- }
- CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
- }
- return;
- }
+ return;
}
+ // Handle shortcut tracking logic
+ String previousCharacter = cursorPosition == 0 ? "" : textEditingController.text[cursorPosition - 1];
+ bool isSpace = cursorPosition == 1 || (textEditingController.text.length > 1 && cursorPosition > 1 &&
+ (textEditingController.text[cursorPosition - 2] == " " || textEditingController.text[cursorPosition - 2] == "\n"));
- if (previousText.length > textEditingController.text.length) {
- if (previousText[cursorPosition] == trackingCharacter) {
- isShortcutTracking = false;
- if (onSearch != null) {
- onSearch!(null);
- }
- CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
- }
- } else {
- String previousCharacter = cursorPosition == 0 ? "" : textEditingController.text[cursorPosition - 1];
- bool isSpace = cursorPosition == 1 || (textEditingController.text.length > 1 && cursorPosition > 1 && (textEditingController.text[cursorPosition - 2] == " " || textEditingController.text[cursorPosition - 2] == "\n"));
-
- if (isShortcutTracking) {
- isShortcutTracking = false;
- if (onSearch != null) {
- onSearch!(null);
- }
- CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
- } else if (previousCharacter == trackingCharacter && isSpace) {
- isShortcutTracking = true;
- if (onSearch != null) {
- onSearch!(trackingCharacter);
- }
- CometChatUIEvents.showPanel(composerId, CustomUIPosition.composerPreview, (context) => getLoadingIndicator(context, cometChatTheme));
- prepareShortcuts(textEditingController);
- }
+ if (isShortcutTracking) {
+ isShortcutTracking = false;
+ if (onSearch != null) onSearch!(null);
+ CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
+ } else if (previousCharacter == trackingCharacter && isSpace) {
+ isShortcutTracking = true;
+ if (onSearch != null) onSearch!(trackingCharacter);
+ CometChatUIEvents.showPanel(composerId, CustomUIPosition.composerPreview,
+ (context) => getLoadingIndicator(context, cometChatTheme));
+ prepareShortcuts(textEditingController);
}
}
@override
- void onScrollToBottom(TextEditingController textEditingController) {
- // TODO: implement onScrollToBottom
+ TextStyle getMessageInputTextStyle(CometChatTheme theme) {
+ throw UnimplementedError();
}
+
+ @override
+ void handlePreMessageSend(BuildContext context, BaseMessage baseMessage) {}
+
+ @override
+ void onScrollToBottom(TextEditingController textEditingController) {}
}
```
-
-
+## Usage
+
+Pass the `ShortcutFormatter` to the `textFormatters` property of `CometChatMessageComposer`:
+
```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:flutter/material.dart';
-import 'shortcut_formatter.dart';
-
-class ShortcutFormatterExample extends StatefulWidget {
- const ShortcutFormatterExample({super.key});
-
- @override
- State createState() => _ShortcutFormatterExampleState();
-}
-
-class _ShortcutFormatterExampleState extends State {
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: SafeArea(
- child: CometChatConversationsWithMessages(
- messageConfiguration: MessageConfiguration(
- messageComposerConfiguration: MessageComposerConfiguration(
- textFormatters: [ShortcutFormatter()],
- ),
- )
- ),
- ),
- );
- }
-}
+CometChatMessageComposer(
+ user: user,
+ textFormatters: [ShortcutFormatter()],
+)
```
-
-
-
- 
-
-***
diff --git a/ui-kit/flutter/sound-manager.mdx b/ui-kit/flutter/sound-manager.mdx
index c70ad5b88..6c319d478 100644
--- a/ui-kit/flutter/sound-manager.mdx
+++ b/ui-kit/flutter/sound-manager.mdx
@@ -1,116 +1,62 @@
---
title: "Sound Manager"
-sidebarTitle: "Sound Manager"
-description: "Manage and customize audio cues for incoming/outgoing calls and messages in CometChat Flutter UI Kit."
+description: "Manage CometChat Flutter UI Kit sounds for incoming and outgoing messages, calls, custom audio, playback, and stop controls."
---
-
+## Overview
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_uikit_shared` |
-| Import | `import 'package:cometchat_uikit_shared/cometchat_uikit_shared.dart';` |
-| Class | `SoundManager` (singleton) |
-| Play sound | `SoundManager().play(sound: Sound.incomingMessage)` |
-| Stop sound | `SoundManager().stop()` |
-| Sound events | `incomingMessage`, `outgoingMessage`, `incomingMessageFromOther`, `incomingCall`, `outgoingCall` |
-| Source | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/shared_uikit/lib/src/resources) |
-
-
-
-`SoundManager` is a singleton helper class for managing and playing audio cues — incoming/outgoing calls and messages.
-
----
+The `SoundManager` is a helper class responsible for managing and playing various types of audio in the CometChat V6 UI Kit. This includes sound events for incoming and outgoing messages and calls.
## Methods
-### play
-
-Plays the default or custom audio for a sound event.
-
-```dart
-void play({
- required Sound sound,
- String? customSound,
- String? packageName,
- bool? isLooping,
-})
-```
+### Play Sound
-| Parameter | Type | Description |
-| --- | --- | --- |
-| `sound` | `Sound` | Required. The sound event type to play |
-| `customSound` | `String?` | Optional. Asset path for custom sound file |
-| `packageName` | `String?` | Optional. Package name when using sounds from another plugin |
-| `isLooping` | `bool?` | Optional. Whether to loop the sound (default: `false`) |
+The SoundManager plays pre-defined or custom sounds based on user interactions with the chat interface.
+
+
```dart
-// Play default sounds
+// Play default sounds:
SoundManager().play(sound: Sound.incomingMessage);
SoundManager().play(sound: Sound.outgoingMessage);
-
-// Play custom sound
-SoundManager().play(
- sound: Sound.outgoingMessage,
- customSound: "assets/custom_sound.wav",
-);
-
-// Play looping sound (e.g., for incoming call)
-SoundManager().play(
- sound: Sound.incomingCall,
- isLooping: true,
-);
```
+
+
-### stop
+### Stop Sound
-Stops any currently playing sound.
+Stop any sound currently being played:
+
+
```dart
SoundManager().stop();
```
-
----
-
-## Sound Enum
-
-| Value | Default Asset | When it plays |
-| --- | --- | --- |
-| `incomingMessage` | `assets/sound/incoming_message.wav` | New message received |
-| `outgoingMessage` | `assets/sound/outgoing_message.wav` | Message sent |
-| `incomingMessageFromOther` | `assets/sound/incoming_message.wav` | Message from another conversation |
-| `incomingCall` | `assets/sound/incoming_call.wav` | Incoming call detected |
-| `outgoingCall` | `assets/sound/outgoing_call.wav` | Outgoing call initiated |
-
----
+
+
## Usage
-```dart
-import 'package:cometchat_uikit_shared/cometchat_uikit_shared.dart';
-
-// Play incoming message sound
-SoundManager().play(sound: Sound.incomingMessage);
-
-// Play outgoing call sound
-SoundManager().play(sound: Sound.outgoingCall);
+Play a custom sound:
-// Play custom notification sound
-SoundManager().play(
- sound: Sound.incomingMessage,
- customSound: "assets/sounds/notification.mp3",
-);
+
+
+```dart
+SoundManager().play(sound: Sound.outgoingMessage, customSound: "assetPath");
+```
+
+
-// Play looping ringtone for incoming call
-SoundManager().play(
- sound: Sound.incomingCall,
- isLooping: true,
-);
+## Sound Enum Reference
-// Stop any playing sound
-SoundManager().stop();
-```
+| Sound | Asset |
+|---|---|
+| incomingMessage | assets/sound/incoming_message.wav |
+| outgoingMessage | assets/sound/outgoing_message.wav |
+| incomingMessageFromOther | assets/sound/incoming_message.wav |
+| outgoingCall | assets/sound/outgoing_call.wav |
+| incomingCall | assets/sound/incoming_call.wav |
-Sound behavior varies by OS when the app is in the background.
+In V6, the `CometChatConversations` widget provides `disableSoundForMessages` and `customSoundForMessages` properties to control sound behavior at the widget level.
diff --git a/ui-kit/flutter/theme-introduction.mdx b/ui-kit/flutter/theme-introduction.mdx
index 417ff033b..6aa14aa30 100644
--- a/ui-kit/flutter/theme-introduction.mdx
+++ b/ui-kit/flutter/theme-introduction.mdx
@@ -1,119 +1,46 @@
---
-title: "Theming"
-sidebarTitle: "Overview"
-description: "Customize the CometChat Flutter UI Kit appearance using ThemeExtensions for colors, fonts, spacing, and dark mode."
+title: "Theming In CometChat Flutter UI Kit V6"
+sidebarTitle: "Theming"
+description: "Customize CometChat Flutter UI Kit themes with color palettes, typography, spacing, light and dark mode, icons, and ThemeExtension."
---
-
+CometChat's theming framework is a robust system that empowers developers to define the look and feel of their applications with precision and consistency. It follows three essential design system principles: Color, Typography, and Shape.
-| Field | Value |
-| --- | --- |
-| Goal | Customize UI Kit appearance (colors, fonts, spacing) via Flutter ThemeExtensions |
-| Where | `ThemeData.extensions` in `MaterialApp` |
-| Color | `CometChatColorPalette` — primary, neutral, alert, text, icon, background colors |
-| Typography | `CometChatTypography` — font sizes, weights, text styles |
-| Spacing | `CometChatSpacing` — padding, margin, border radius |
-| Dark mode | Use separate `CometChatColorPalette` for dark theme |
-| Source | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/shared_uikit/lib/src/theme) |
+> The theming system is identical between V5 and V6. All theme classes, properties, and APIs work the same way.
-
+## Theming Overview
-Theming controls the look and feel of the chat UI — colors, fonts, and spacing — through Flutter's `ThemeExtension` system.
+Theming in the UI Kit consists of three core components:
-
- 
-
+- **Color:** Managed through `CometChatColorPalette`, it controls the application's color scheme, including primary, neutral, alert, and text colors.
+- **Typography:** Defined via `CometChatTypography`, it standardizes text styles, such as font size and weight.
+- **Shape:** Configured using `CometChatSpacing`, it defines the structure of margins, paddings, and border radii.
----
-
-## Core Components
-
-| Component | Class | Purpose |
-| --- | --- | --- |
-| Color | `CometChatColorPalette` | Primary, neutral, alert, text, icon, background colors |
-| Typography | `CometChatTypography` | Font sizes, weights, text styles |
-| Spacing | `CometChatSpacing` | Padding, margin, border radius |
+## Key Benefits
-### Typography Tokens
+- Achieve consistent UI design across your application.
+- Support for light and dark themes.
+- Easy scalability and customization for app-specific requirements.
-| Token | Purpose |
-| --- | --- |
-| `heading1` - `heading4` | Heading text styles |
-| `body` | Body text |
-| `caption1`, `caption2` | Caption text |
-| `button` | Button text |
-| `link` | Link text |
-| `title` | Title text |
-
-### Spacing Tokens
+## Light and Dark Themes
-| Token | Default Value |
-| --- | --- |
-| `spacing` - `spacing20` | 2px - 80px (increments of 4) |
-| `padding` - `padding10` | Derived from spacing |
-| `margin` - `margin20` | Derived from spacing |
-| `radius` - `radius6`, `radiusMax` | Border radius values |
+The Chat UI Kit supports both light and dark themes. V6 adds dedicated icon variants:
+- `assets/icons/light/` — light mode icons
+- `assets/icons/dark/` — dark mode icons
+- `assets/icons/svg/calls/` — SVG call icons
----
+## Custom Theme
-## Basic Usage
-
-Override theme properties in your `MaterialApp`:
+The Chat UI Kit offers robust support for creating customized themes using `CometChatColorPalette`, `CometChatTypography`, and `CometChatSpacing` with Flutter's `ThemeExtension`.
-```dart title="main.dart"
-MaterialApp(
- theme: ThemeData(
- fontFamily: 'Roboto',
- extensions: [
- CometChatColorPalette(
- primary: Color(0xFFF76808),
- textPrimary: Color(0xFF141414),
- background1: Color(0xFFFFFFFF),
- ),
- ],
- ),
- home: MyApp(),
-)
-```
-
-
-
----
-
-## Light and Dark Themes
-
-
-
-
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatColorPalette(
- primary: Color(0xFF6852D6),
- textPrimary: Color(0xFF141414),
- textSecondary: Color(0xFF727272),
- background1: Color(0xFFFFFFFF),
- borderLight: Color(0xFFF5F5F5),
- ),
- ],
-)
-```
-
-
```dart
ThemeData(
+ fontFamily: 'Times New Roman',
extensions: [
CometChatColorPalette(
- primary: Color(0xFF6852D6),
- textPrimary: Color(0xFFFFFFFF),
- textSecondary: Color(0xFF989898),
- background1: Color(0xFF1A1A1A),
- borderLight: Color(0xFF272727),
+ primary: Color(0xFFF76808),
),
],
)
@@ -121,50 +48,38 @@ ThemeData(
-
-
-
+## Core Components
----
+### Color
-## Custom Brand Colors
+The `CometChatColorPalette` class manages colors in your app:
-
-
-
+- **Primary Colors:** Base colors and extended shades.
+- **Neutral Colors:** Shades for surfaces and backgrounds.
+- **Alert Colors:** Colors for states like success, error, warning, and info.
+- **Text Colors:** Differentiated for primary, secondary, and disabled states.
-
-
-```dart
-ThemeData(
- fontFamily: 'Times New Roman',
- extensions: [
- CometChatColorPalette(
- primary: Color(0xFFF76808),
- iconHighlight: Color(0xFFF76808),
- extendedPrimary500: Color(0xFFFBAA75),
- ),
- ],
-)
-```
-
-
+### Typography
----
+The `CometChatTypography` class standardizes text styles:
+
+- **Headings:** Text styles for various heading levels.
+- **Body:** Styling for regular text.
+- **Captions:** Smaller text style for labels.
+- **Buttons:** Text style for button text.
+- **Links:** Styles for clickable links.
+- **Titles:** Style for main titles or component headers.
+
+### Spacing
+
+The `CometChatSpacing` class defines layout structure:
+
+- **Padding:** Internal spacing within elements.
+- **Margin:** Space between elements.
+- **Radius:** Corner rounding of UI elements.
+
+## Best Practices
-## Next Steps
-
-
-
- Full list of color tokens
-
-
- Style individual components
-
-
- Customize message bubbles
-
-
- Multi-language support
-
-
+- **Ensure Contrast:** Follow accessibility guidelines to maintain a minimum contrast ratio.
+- **Consistency:** Use a consistent color palette across all components.
+- **Adaptability:** Test your theme in various scenarios, such as low-light and high-contrast environments.
diff --git a/ui-kit/flutter/threaded-messages-header.mdx b/ui-kit/flutter/threaded-messages-header.mdx
index 23e38202c..0d0c357b0 100644
--- a/ui-kit/flutter/threaded-messages-header.mdx
+++ b/ui-kit/flutter/threaded-messages-header.mdx
@@ -1,120 +1,34 @@
---
title: "Threaded Messages Header"
-description: "A widget that displays the parent message of a thread with reply count"
+description: "Header component for threaded conversations showing the parent message, reply count, and thread navigation."
---
-
-```json
-{
- "component": "CometChatThreadedHeader",
- "package": "cometchat_chat_uikit",
- "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
- "description": "A widget that displays the parent message of a thread along with a reply count, used as the header section in threaded message views",
- "primaryOutput": {
- "prop": "messageActionView",
- "type": "Widget Function(BaseMessage message, BuildContext context)?"
- },
- "props": {
- "data": {
- "parentMessage": {
- "type": "BaseMessage",
- "required": true,
- "note": "Parent message for the thread"
- },
- "loggedInUser": {
- "type": "User",
- "required": true,
- "note": "Logged in user object"
- },
- "template": {
- "type": "CometChatMessageTemplate?",
- "default": "null",
- "note": "Message template used in the thread"
- },
- "height": {
- "type": "double?",
- "default": "null",
- "note": "Height of the widget"
- },
- "width": {
- "type": "double?",
- "default": "null",
- "note": "Width of the widget"
- }
- },
- "visibility": {
- "receiptsVisibility": {
- "type": "bool?",
- "default": true
- }
- },
- "viewSlots": {
- "messageActionView": "Widget Function(BaseMessage message, BuildContext context)?"
- }
- },
- "events": [],
- "sdkListeners": [],
- "compositionExample": {
- "description": "CometChatThreadedHeader is typically used within CometChatThreadedMessages as the header component",
- "components": ["CometChatThreadedMessages", "CometChatMessageList", "CometChatMessageComposer"],
- "flow": "Parent message displayed at top → Reply count shown → Message list below with replies"
- },
- "types": {}
-}
-```
-
-
-## Where It Fits
-
-CometChatThreadedHeader is a component that displays the parent message of a thread along with a reply count. It's typically used as part of the ThreadedMessages composite component, appearing at the top of the threaded conversation view.
-
-ThreadedMessages is composed of the following widgets:
-
-| Widget | Description |
-|--------|-------------|
-| [MessageList](/ui-kit/flutter/message-list) | CometChatMessageList displays a list of reply messages |
-| [MessageComposer](/ui-kit/flutter/message-composer) | CometChatMessageComposer helps in writing and sending replies |
+`CometChatThreadedHeader` displays the parent message of a thread along with reply count and provides the container for threaded message list and composer. It enables organized threaded conversations within a chat.
-## Minimal Render
+---
+
+## Where It Fits
-The simplest way to render CometChatThreadedHeader:
+`CometChatThreadedHeader` is used when a user taps "Reply in Thread" on a message. It wraps the parent message display with a `CometChatMessageList` (filtered by `parentMessageId`) and `CometChatMessageComposer` for thread replies.
```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
CometChatThreadedHeader(
- parentMessage: parentMessage, // Required: BaseMessage object
- loggedInUser: loggedInUser, // Required: User object
+ parentMessage: parentMessage,
+ loggedInUser: loggedInUser,
)
```
-You can also launch it using Navigator:
-
-
-
-```dart
-Navigator.push(
- context,
- MaterialPageRoute(
- builder: (context) => CometChatThreadedHeader(
- loggedInUser: loggedInUser,
- parentMessage: parentMessage,
- ),
- ),
-);
-```
-
-
+---
-Or embed it as a widget:
+## Quick Start
@@ -122,21 +36,23 @@ Or embed it as a widget:
import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
import 'package:flutter/material.dart';
-class ThreadMessages extends StatefulWidget {
- const ThreadMessages({super.key});
+class ThreadScreen extends StatelessWidget {
+ final BaseMessage parentMessage;
+ final User loggedInUser;
- @override
- State createState() => _ThreadMessagesState();
-}
+ const ThreadScreen({
+ super.key,
+ required this.parentMessage,
+ required this.loggedInUser,
+ });
-class _ThreadMessagesState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: CometChatThreadedHeader(
- loggedInUser: loggedInUser,
parentMessage: parentMessage,
+ loggedInUser: loggedInUser,
),
),
);
@@ -146,118 +62,97 @@ class _ThreadMessagesState extends State {
-## Actions and Events
-
-### Callback Props
+Typically launched from the message list when a user selects "Reply in Thread":
-The CometChatThreadedHeader component does not have traditional callback props. Instead, it provides a `messageActionView` slot for customizing the action area.
+
+
+```dart
+CometChatMessageList(
+ user: user,
+ onThreadRepliesClick: (message, context, {bubbleView}) {
+ Navigator.push(context, MaterialPageRoute(
+ builder: (context) => ThreadScreen(
+ parentMessage: message,
+ loggedInUser: CometChatUIKit.loggedInUser!,
+ ),
+ ));
+ },
+)
+```
+
+
-### Global UI Events
+Prerequisites: CometChat SDK initialized, a user logged in, and a valid `BaseMessage` object as the parent message.
-The CometChatThreadedHeader component does not produce any global UI events.
+---
-## Custom View Slots
+## Actions and Events
-Customize the appearance of CometChatThreadedHeader by replacing default views with your own widgets.
+### Callback Methods
-| Slot | Signature | Replaces |
-|------|-----------|----------|
-| `messageActionView` | `Widget Function(BaseMessage message, BuildContext context)?` | Reply count section below the message bubble |
+#### `onBack`
-### Example: Custom Message Action View
+Fires when the user presses the back button.
```dart
CometChatThreadedHeader(
- loggedInUser: loggedInUser,
parentMessage: parentMessage,
- messageActionView: (BaseMessage baseMessage, BuildContext context) {
- return Container(
- width: MediaQuery.of(context).size.width / 1.2,
- margin: const EdgeInsets.all(10),
- decoration: BoxDecoration(
- color: Color(0xFF6851D6),
- borderRadius: BorderRadius.circular(10),
- border: Border.all(width: 5, color: Color(0xFF6851D6)),
- ),
- child: const Center(
- child: Text(
- "Your Custom Action View",
- style: TextStyle(color: Colors.white),
- ),
- ),
- );
+ loggedInUser: loggedInUser,
+ onBack: () {
+ Navigator.pop(context);
},
)
```
-
-
-
-
-
-
-
-
+#### `onError`
-### Example: Custom Reply Count with Dividers
+Fires on internal errors.
```dart
CometChatThreadedHeader(
- parentMessage: message,
- loggedInUser: CometChatUIKit.loggedInUser!,
- style: CometChatThreadedHeaderStyle(
- bubbleContainerBackGroundColor: Color(0xFFFEEDE1),
- outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- borderRadius: BorderRadius.circular(12),
- ),
- ),
- messageActionView: (message, context) {
- final numberOfReplies = message.replyCount;
- String replyText = numberOfReplies == 1
- ? Translations.of(context).reply
- : Translations.of(context).replies;
- return Container(
- width: double.maxFinite,
- color: Color(0xFFFEEDE1),
- padding: EdgeInsets.symmetric(vertical: 4),
- child: Row(
- children: [
- Flexible(child: Divider(color: Color(0xFFF76808))),
- Padding(
- padding: EdgeInsets.symmetric(horizontal: 8),
- child: Text(
- "$numberOfReplies $replyText",
- style: TextStyle(
- color: Color(0xFFF76808),
- fontSize: 14,
- fontWeight: FontWeight.w400,
- ),
- ),
- ),
- Flexible(child: Divider(color: Color(0xFFF76808))),
- ],
- ),
- );
+ parentMessage: parentMessage,
+ loggedInUser: loggedInUser,
+ onError: (e) {
+ debugPrint("Error: ${e.message}");
},
)
```
-
- 
-
+### SDK Events (Real-Time, Automatic)
+
+| SDK Listener | Internal behavior |
+|---|---|
+| New thread reply received | Increments reply count |
+| Parent message edited | Updates parent message display |
+| Parent message deleted | Updates parent message display |
+
+---
+
+## Functionality
-### Templates
+| Property | Type | Default | Description |
+|---|---|---|---|
+| `parentMessage` | `BaseMessage` | **required** | The parent message of the thread |
+| `loggedInUser` | `User` | **required** | The currently logged-in user |
+| `showBackButton` | `bool?` | `true` | Toggle back button visibility |
+| `title` | `String?` | `null` | Custom title text |
+| `hideMessageComposer` | `bool?` | `false` | Hide the message composer |
-The `template` prop is used to configure and set a message template for the parent message bubble. It allows for dynamic customization of message appearance, content, or other predefined settings based on the template provided.
+---
+
+## Custom View Slots
+
+### Bubble View
+
+Replace the parent message bubble display.
@@ -265,19 +160,41 @@ The `template` prop is used to configure and set a message template for the pare
CometChatThreadedHeader(
parentMessage: parentMessage,
loggedInUser: loggedInUser,
- template: CometChatMessageTemplate(
- type: MessageTypeConstants.text,
- category: MessageCategoryConstants.message,
- // Custom template configuration
- ),
+ bubbleView: (message) {
+ if (message is TextMessage) {
+ return Container(
+ padding: EdgeInsets.all(12),
+ decoration: BoxDecoration(
+ color: Color(0xFFF5F5F5),
+ borderRadius: BorderRadius.circular(8),
+ ),
+ child: Text(message.text),
+ );
+ }
+ return null;
+ },
)
```
-## Styling
+---
+
+## Advanced
-Customize the appearance of CometChatThreadedHeader using `CometChatThreadedHeaderStyle`.
+### BLoC Access
+
+The threaded header uses `ThreadedHeaderBloc` internally:
+
+| Component | Description |
+|---|---|
+| `ThreadedHeaderBloc` | Manages threaded header state |
+| `ThreadedHeaderEvent` | Events: `InitializeThreadedHeader`, `IncrementReplyCount`, `UpdateParentMessage` |
+| `ThreadedHeaderState` | Threaded header state with parent message and reply count |
+
+---
+
+## Style
@@ -286,61 +203,33 @@ CometChatThreadedHeader(
parentMessage: parentMessage,
loggedInUser: loggedInUser,
style: CometChatThreadedHeaderStyle(
- bubbleContainerBackGroundColor: Color(0xFFFEEDE1),
- countTextColor: Colors.purple,
- countContainerBackGroundColor: Colors.grey[100],
- incomingMessageBubbleStyle: CometChatIncomingMessageBubbleStyle(
- backgroundColor: Colors.grey[200],
- ),
- outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- borderRadius: BorderRadius.circular(12),
- ),
+ backgroundColor: Colors.white,
+ replyCountTextColor: Color(0xFF727272),
),
)
```
-### Style Properties
-
-| Property | Type | Description |
-|----------|------|-------------|
-| `bubbleContainerBackGroundColor` | `Color?` | Background color for the bubble container |
-| `bubbleContainerBorder` | `BoxBorder?` | Border for the bubble container |
-| `bubbleContainerBorderRadius` | `BorderRadiusGeometry?` | Border radius for the bubble container |
-| `countTextStyle` | `TextStyle?` | Text style for the reply count |
-| `countTextColor` | `Color?` | Color for the reply count text |
-| `countContainerBackGroundColor` | `Color?` | Background color for the count container |
-| `countContainerBorder` | `BoxBorder?` | Border for the count container |
-| `constraints` | `BoxConstraints?` | Constraints for the message container |
-| `incomingMessageBubbleStyle` | `CometChatIncomingMessageBubbleStyle?` | Style for incoming message bubble |
-| `outgoingMessageBubbleStyle` | `CometChatOutgoingMessageBubbleStyle?` | Style for outgoing message bubble |
-
-## Props Reference
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `parentMessage` | `BaseMessage` | Required | Parent message for the thread |
-| `loggedInUser` | `User` | Required | Logged in user object |
-| `messageActionView` | `Function(BaseMessage, BuildContext)?` | `null` | Custom action view for the message |
-| `style` | `CometChatThreadedHeaderStyle?` | `null` | Style parameter for the threaded header |
-| `template` | `CometChatMessageTemplate?` | `null` | Message template used in the thread |
-| `height` | `double?` | `null` | Height of the widget |
-| `width` | `double?` | `null` | Width of the widget |
-| `receiptsVisibility` | `bool?` | `true` | Controls visibility of receipts |
+
+
+
+
+---
+
+## Next Steps
-
+
Display messages in a conversation
Compose and send messages
-
- Learn how to customize the look and feel
+
+ Complete threaded messages implementation
-
- Support multiple languages in your app
+
+ Detailed styling reference
diff --git a/ui-kit/flutter/troubleshooting.mdx b/ui-kit/flutter/troubleshooting.mdx
index dd24b6e9f..57e0b9bdc 100644
--- a/ui-kit/flutter/troubleshooting.mdx
+++ b/ui-kit/flutter/troubleshooting.mdx
@@ -1,207 +1,112 @@
---
title: "Troubleshooting"
-description: "Common failure modes and fixes for the CometChat Flutter UI Kit."
+description: "Troubleshoot CometChat Flutter UI Kit V6 setup, login, theming, styling, messaging, calling, navigation, and build issues."
---
-
-
-| Field | Value |
-| --- | --- |
-| Page type | Troubleshooting reference |
-| Scope | All CometChat Flutter UI Kit v5 issues — initialization, rendering, theming, calling, extensions, AI features, localization, sound, events |
-| When to reference | When a component fails to render, data is missing, styling doesn't apply, or a feature doesn't appear |
-
-
-
## Initialization and Login
| Symptom | Cause | Fix |
-| --- | --- | --- |
+|---|---|---|
| `CometChatUIKit.init()` fails silently | Invalid App ID, Region, or Auth Key | Double-check credentials from the [CometChat Dashboard](https://app.cometchat.com/) |
-| Widget doesn't render | `init()` not called or not awaited before rendering | Ensure `init()` completes before mounting widgets. See [Methods](/ui-kit/flutter/methods) |
-| Widget renders but shows no data | User not logged in | Call `CometChatUIKit.login("UID")` after init |
-| Login fails with "UID not found" | UID doesn't exist in your CometChat app | Create the user via Dashboard, SDK, or API first |
-| Blank screen after login | Widget mounted before init/login completes | Use `FutureBuilder` or state to conditionally render after login resolves |
-| `getLoggedInUser()` returns null | User not logged in or session expired | Call `login()` or `loginWithAuthToken()` first |
-| `sendTextMessage()` fails | User not logged in or invalid receiver | Ensure login completes before sending messages |
-| Auth Key exposed in production | Using Auth Key instead of Auth Token | Switch to [Auth Token](/ui-kit/flutter/methods#login-using-auth-token) for production |
-
----
-
-## Platform-Specific Issues
-
-### Android
-
-| Symptom | Cause | Fix |
-| --- | --- | --- |
-| App crashes on launch | Missing internet permission | Add `
-```json
-{
- "component": "CometChatUsers",
- "package": "cometchat_chat_uikit",
- "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
- "description": "Searchable, scrollable list of all available users with avatar, name, and online/offline status.",
- "primaryOutput": {
- "prop": "onItemTap",
- "type": "Function(BuildContext context, User user)"
- },
- "props": {
- "data": {
- "usersRequestBuilder": {
- "type": "UsersRequestBuilder?",
- "default": "SDK default (30 per page)",
- "note": "Pass the builder, not the result of .build()"
- },
- "usersProtocol": {
- "type": "UsersBuilderProtocol?",
- "default": "null",
- "note": "Custom protocol for fetching users"
- },
- "scrollController": {
- "type": "ScrollController?",
- "default": "null",
- "note": "Custom scroll controller for the list"
- },
- "title": {
- "type": "String?",
- "default": "Users",
- "note": "Title text for the app bar"
- },
- "controllerTag": {
- "type": "String?",
- "default": "null",
- "note": "Tag for controller management"
- },
- "searchPlaceholder": {
- "type": "String?",
- "default": "null",
- "note": "Placeholder text for search input"
- },
- "searchKeyword": {
- "type": "String?",
- "default": "null",
- "note": "Pre-fills search and filters list"
- },
- "height": {
- "type": "double?",
- "default": "null"
- },
- "width": {
- "type": "double?",
- "default": "null"
- }
- },
- "callbacks": {
- "onItemTap": "Function(BuildContext context, User user)?",
- "onItemLongPress": "Function(BuildContext context, User user)?",
- "onSelection": "Function(List? list, BuildContext context)?",
- "onBack": "VoidCallback?",
- "onError": "OnError?",
- "onLoad": "OnLoad?",
- "onEmpty": "OnEmpty?"
- },
- "visibility": {
- "usersStatusVisibility": { "type": "bool?", "default": true },
- "hideAppbar": { "type": "bool?", "default": false },
- "hideSearch": { "type": "bool", "default": false },
- "showBackButton": { "type": "bool", "default": true },
- "stickyHeaderVisibility": { "type": "bool?", "default": false }
- },
- "selection": {
- "selectionMode": {
- "type": "SelectionMode?",
- "values": ["SelectionMode.single", "SelectionMode.multiple", "SelectionMode.none"],
- "default": "null"
- },
- "activateSelection": {
- "type": "ActivateSelection?",
- "values": ["ActivateSelection.onClick", "ActivateSelection.onLongClick"],
- "default": "null"
- }
- },
- "viewSlots": {
- "listItemView": "Widget Function(User user)?",
- "leadingView": "Widget? Function(BuildContext context, User user)?",
- "titleView": "Widget? Function(BuildContext context, User user)?",
- "subtitleView": "Widget? Function(BuildContext context, User user)?",
- "trailingView": "Widget? Function(BuildContext context, User user)?",
- "loadingStateView": "WidgetBuilder?",
- "emptyStateView": "WidgetBuilder?",
- "errorStateView": "WidgetBuilder?",
- "setOptions": "List? Function(User, CometChatUsersController, BuildContext)?",
- "addOptions": "List? Function(User, CometChatUsersController, BuildContext)?",
- "appBarOptions": "List Function(BuildContext context)?"
- },
- "icons": {
- "backButton": { "type": "Widget?", "default": "built-in back arrow" },
- "searchBoxIcon": { "type": "Widget?", "default": "built-in search icon" },
- "submitIcon": { "type": "Widget?", "default": "built-in check icon" }
- },
- "style": {
- "usersStyle": { "type": "CometChatUsersStyle", "default": "CometChatUsersStyle()" }
- }
- },
- "events": [
- {
- "name": "CometChatUserEvents.ccUserBlocked",
- "payload": "User",
- "description": "User blocked"
- },
- {
- "name": "CometChatUserEvents.ccUserUnblocked",
- "payload": "User",
- "description": "User unblocked"
- }
- ],
- "sdkListeners": [
- "onUserOnline",
- "onUserOffline",
- "ccUserBlocked",
- "ccUserUnblocked",
- "onConnected"
- ],
- "compositionExample": {
- "description": "User list wired to message view",
- "components": [
- "CometChatUsers",
- "CometChatMessages",
- "CometChatMessageHeader",
- "CometChatMessageList",
- "CometChatMessageComposer"
- ],
- "flow": "onItemTap emits User -> pass to CometChatMessages or individual message components"
- },
- "types": {
- "CometChatOption": {
- "id": "String?",
- "title": "String?",
- "icon": "String?",
- "iconWidget": "Widget?",
- "onClick": "VoidCallback?"
- },
- "SelectionMode": {
- "single": "SelectionMode.single",
- "multiple": "SelectionMode.multiple",
- "none": "SelectionMode.none"
- },
- "ActivateSelection": {
- "onClick": "ActivateSelection.onClick",
- "onLongClick": "ActivateSelection.onLongClick"
- }
- }
-}
-```
-
+`CometChatUsers` renders a scrollable list of all available users with real-time presence updates, search, avatars, and online/offline status indicators.
+---
## Where It Fits
-`CometChatUsers` is a contact list widget. It renders all available users and emits the selected `User` via `onItemTap`. Wire it to `CometChatMessages` or individual message components (`CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer`) to build a standard two-panel chat layout.
+`CometChatUsers` is a list component. It renders all available users and emits the selected `User` via `onItemTap`. Wire it to `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer` to build a direct messaging layout.
```dart
-import 'package:flutter/material.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
-class ChatApp extends StatefulWidget {
- const ChatApp({super.key});
-
- @override
- State createState() => _ChatAppState();
-}
-
-class _ChatAppState extends State {
- User? selectedUser;
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: Row(
- children: [
- SizedBox(
- width: 400,
- child: CometChatUsers(
- onItemTap: (context, user) {
- setState(() {
- selectedUser = user;
- });
- },
- ),
- ),
- Expanded(
- child: selectedUser != null
- ? CometChatMessages(user: selectedUser)
- : const Center(child: Text('Select a user')),
- ),
- ],
- ),
- );
- }
-}
+CometChatUsers(
+ onItemTap: (context, user) {
+ // Navigate to chat with this user
+ },
+)
```
-
- 
-
-
---
+## Quick Start
-## Minimal Render
+Using Navigator:
```dart
-import 'package:flutter/material.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
-class UsersDemo extends StatelessWidget {
- const UsersDemo({super.key});
-
- @override
- Widget build(BuildContext context) {
- return const Scaffold(
- body: SafeArea(
- child: CometChatUsers(),
- ),
- );
- }
-}
+Navigator.push(context, MaterialPageRoute(builder: (context) => const CometChatUsers()));
```
-You can also launch it using `Navigator.push`:
+Embedding as a widget:
+
+
```dart
-Navigator.push(
- context,
- MaterialPageRoute(builder: (context) => const CometChatUsers())
-);
+@override
+Widget build(BuildContext context) {
+ return Scaffold(
+ body: SafeArea(
+ child: CometChatUsers(),
+ ),
+ );
+}
```
+
+
+
+Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()`, a user logged in, and the UI Kit dependency added.
---
## Filtering Users
-Pass a `UsersRequestBuilder` to `usersRequestBuilder`. Pass the builder instance — not the result of `.build()`.
+Pass a `UsersRequestBuilder` to control what loads:
```dart
CometChatUsers(
usersRequestBuilder: UsersRequestBuilder()
- ..friendsOnly = true
- ..limit = 15,
+ ..limit = 20
+ ..friendsOnly = true,
)
```
@@ -272,303 +76,168 @@ CometChatUsers(
### Filter Recipes
-| Recipe | Code |
+| Recipe | Builder property |
| --- | --- |
-| Friends only | `UsersRequestBuilder()..friendsOnly = true` |
-| Online users only | `UsersRequestBuilder()..userStatus = CometChatUserStatus.online` |
-| Limit to 15 per page | `UsersRequestBuilder()..limit = 15` |
-| Search by keyword | `UsersRequestBuilder()..searchKeyword = "alice"` |
-| Hide blocked users | `UsersRequestBuilder()..hideBlockedUsers = true` |
-| Filter by roles | `UsersRequestBuilder()..roles = ["admin", "moderator"]` |
-| Filter by tags | `UsersRequestBuilder()..tags = ["vip"]` |
-| Specific UIDs | `UsersRequestBuilder()..uids = ["uid1", "uid2"]` |
-
-Default page size is 30. The component uses infinite scroll — the next page loads as the user scrolls to the bottom.
-
-
-### UsersRequestBuilder Properties
-
-| Property | Description | Code |
-| --- | --- | --- |
-| `limit` | Number of users to fetch per request. Maximum 100. | `..limit = 30` |
-| `searchKeyword` | Search users by name. | `..searchKeyword = "John"` |
-| `friendsOnly` | Fetch only friends. Default `false`. | `..friendsOnly = true` |
-| `userStatus` | Filter by status: `CometChatUserStatus.online` or `CometChatUserStatus.offline`. | `..userStatus = CometChatUserStatus.online` |
-| `hideBlockedUsers` | Hide blocked users from the list. Default `false`. | `..hideBlockedUsers = true` |
-| `roles` | Filter users by specific roles. | `..roles = ["admin"]` |
-| `tags` | Filter users by specific tags. | `..tags = ["vip"]` |
-| `withTags` | Include tags in the User object. Default `false`. | `..withTags = true` |
-| `uids` | Fetch specific users by UIDs. | `..uids = ["uid1", "uid2"]` |
-| `build()` | Builds and returns a `UsersRequest` object. | `.build()` |
-
-Refer to [UsersRequestBuilder](/sdk/flutter/retrieve-users) for the full builder API.
+| Friends only | `..friendsOnly = true` |
+| Limit per page | `..limit = 10` |
+| Search by keyword | `..searchKeyword = "john"` |
+| Hide blocked users | `..hideBlockedUsers = true` |
+| Filter by roles | `..roles = ["admin", "moderator"]` |
+| Filter by tags | `..tags = ["vip"]` |
+| Online users only | `..userStatus = CometChatConstants.userStatusOnline` |
+| Filter by UIDs | `..UIDs = ["uid1", "uid2"]` |
---
## Actions and Events
-### Callback Props
+### Callback Methods
-#### onItemTap
+#### `onItemTap`
-Fires when a user row is tapped. Primary navigation hook — set the active user and render the message view.
+Fires when a user row is tapped. Primary navigation hook.
```dart
CometChatUsers(
onItemTap: (context, user) {
- print("Selected: ${user.name}");
+ // Navigate to chat screen
},
)
```
-#### onItemLongPress
+#### `onItemLongPress`
-Fires when a user row is long-pressed. Useful for showing context menus or custom actions.
+Fires when a user row is long-pressed.
```dart
CometChatUsers(
onItemLongPress: (context, user) {
- // Show custom context menu
+ // Show context menu
},
)
```
+#### `onBack`
-#### onSelection
-
-Fires when users are selected in multi-select mode. Requires `selectionMode` to be set.
+Fires when the user presses the back button in the app bar.
```dart
CometChatUsers(
- selectionMode: SelectionMode.multiple,
- activateSelection: ActivateSelection.onClick,
- onSelection: (selectedList, context) {
- print("Selected ${selectedList?.length ?? 0} users");
+ onBack: () {
+ Navigator.pop(context);
},
)
```
-#### onError
+#### `onSelection`
-Fires on internal errors (network failure, auth issue, SDK exception).
+Fires when users are selected/deselected in multi-select mode.
```dart
CometChatUsers(
- onError: (error) {
- print("CometChatUsers error: $error");
+ selectionMode: SelectionMode.multiple,
+ activateSelection: ActivateSelection.onClick,
+ onSelection: (selectedUsers, context) {
+ // Handle selected users
},
)
```
-#### onBack
+#### `onError`
-Fires when the back button is pressed.
+Fires on internal errors.
```dart
CometChatUsers(
- showBackButton: true,
- onBack: () {
- Navigator.pop(context);
+ onError: (e) {
+ debugPrint("Error: ${e.message}");
},
)
```
-#### onLoad
+#### `onLoad`
-Fires when the user list is successfully loaded.
+Fires when the list is successfully fetched and loaded.
```dart
CometChatUsers(
- onLoad: (list) {
- print("Loaded ${list.length} users");
+ onLoad: (userList) {
+ debugPrint("Loaded ${userList.length}");
},
)
```
-#### onEmpty
+#### `onEmpty`
-Fires when the user list is empty.
+Fires when the list is empty after loading.
```dart
CometChatUsers(
onEmpty: () {
- print("No users found");
+ debugPrint("No users found");
},
)
```
-
-### Global UI Events
-
-`CometChatUserEvents` emits events subscribable from anywhere in the application. Add a listener in `initState` and remove it in `dispose`.
-
-| Event | Fires when | Payload |
-| --- | --- | --- |
-| `ccUserBlocked` | A user is blocked | `User` |
-| `ccUserUnblocked` | A user is unblocked | `User` |
-
-When to use: sync external UI with user state changes. For example, update a blocked users count badge when a user is blocked.
-
-
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
-class _YourScreenState extends State with CometChatUserEventListener {
-
- @override
- void initState() {
- super.initState();
- CometChatUserEvents.addUsersListener("listenerId", this);
- }
-
- @override
- void dispose() {
- CometChatUserEvents.removeUsersListener("listenerId");
- super.dispose();
- }
-
- @override
- void ccUserBlocked(User user) {
- print("Blocked: ${user.name}");
- }
-
- @override
- void ccUserUnblocked(User user) {
- print("Unblocked: ${user.name}");
- }
-
- @override
- Widget build(BuildContext context) {
- return const Placeholder();
- }
-}
-```
-
-
-
### SDK Events (Real-Time, Automatic)
-The component listens to these SDK events internally. No manual attachment needed unless additional side effects are required.
+The component listens to these SDK events internally. No manual setup needed.
| SDK Listener | Internal behavior |
| --- | --- |
-| `onUserOnline` | Updates the user's status indicator to online |
-| `onUserOffline` | Updates the user's status indicator to offline |
-| `ccUserBlocked` | Updates blocked user in list |
-| `ccUserUnblocked` | Updates unblocked user in list |
-| `onConnected` | Refreshes user list when connection is re-established |
-
-Automatic: user presence changes (online/offline), blocked/unblocked state, connection recovery.
+| `onUserOnline` | Updates online status indicator for the user |
+| `onUserOffline` | Updates offline status indicator for the user |
+| Connection reconnected | Triggers silent refresh to sync user list |
---
+## Functionality
-## Custom View Slots
-
-Each slot replaces a section of the default UI. Slots that accept a user parameter receive the `User` object for that row.
-
-| Slot | Signature | Replaces |
-| --- | --- | --- |
-| `listItemView` | `Widget Function(User)` | Entire list item row |
-| `leadingView` | `Widget? Function(BuildContext, User)` | Avatar / left section |
-| `titleView` | `Widget? Function(BuildContext, User)` | Name / title text |
-| `subtitleView` | `Widget? Function(BuildContext, User)` | Subtitle text |
-| `trailingView` | `Widget? Function(BuildContext, User)` | Right section |
-| `loadingStateView` | `WidgetBuilder` | Loading spinner |
-| `emptyStateView` | `WidgetBuilder` | Empty state |
-| `errorStateView` | `WidgetBuilder` | Error state |
-| `setOptions` | `List? Function(User, CometChatUsersController, BuildContext)` | Context menu actions (replaces default) |
-| `addOptions` | `List? Function(User, CometChatUsersController, BuildContext)` | Context menu actions (adds to default) |
-| `appBarOptions` | `List Function(BuildContext)` | App bar action widgets |
-
-### listItemView
-
-Replace the entire list item row.
-
-
- 
-
-
-
-
-```dart
-Widget getCustomUserListItem(User user, BuildContext context) {
- // Get status indicator
- StatusIndicatorUtils statusIndicatorUtils = StatusIndicatorUtils.getStatusIndicatorFromParams(
- context: context,
- user: user,
- onlineStatusIndicatorColor: Color(0xFF56E8A7),
- );
-
- return CometChatListItem(
- id: user.uid,
- avatarName: user.name,
- avatarURL: user.avatar,
- avatarHeight: 40,
- avatarWidth: 40,
- title: user.name,
- key: UniqueKey(),
- statusIndicatorColor: statusIndicatorUtils.statusIndicatorColor,
- statusIndicatorIcon: statusIndicatorUtils.icon,
- statusIndicatorStyle: CometChatStatusIndicatorStyle(
- border: Border.all(width: 2, color: Color(0xFFFFFFFF)),
- backgroundColor: Color(0xFF56E8A7),
- ),
- hideSeparator: true,
- style: ListItemStyle(
- background: user.status == CometChatUserStatus.online
- ? const Color(0xFFE6F4ED)
- : Colors.transparent,
- titleStyle: TextStyle(
- overflow: TextOverflow.ellipsis,
- fontSize: 16,
- fontWeight: FontWeight.w500,
- color: Color(0xFF141414),
- ),
- padding: EdgeInsets.only(left: 16, right: 16, top: 8, bottom: 8),
- ),
- );
-}
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `title` | `String?` | `null` | Custom app bar title |
+| `showBackButton` | `bool` | `true` | Toggle back button |
+| `hideAppbar` | `bool?` | `false` | Toggle app bar visibility |
+| `hideSearch` | `bool` | `false` | Toggle search bar |
+| `usersStatusVisibility` | `bool?` | `true` | Show online/offline status indicator |
+| `stickyHeaderVisibility` | `bool?` | `false` | Show alphabetical sticky header |
+| `selectionMode` | `SelectionMode?` | `null` | Enable selection mode (`single` or `multiple`) |
+| `searchPlaceholder` | `String?` | `null` | Search placeholder text |
+| `searchKeyword` | `String?` | `null` | Pre-fill search keyword |
-// Usage:
-CometChatUsers(
- listItemView: (user) => getCustomUserListItem(user, context),
-)
-```
-
-
+---
+## Custom View Slots
-### leadingView
+### Leading View
Replace the avatar / left section.
@@ -577,23 +246,8 @@ Replace the avatar / left section.
```dart
CometChatUsers(
leadingView: (context, user) {
- return Container(
- decoration: BoxDecoration(
- border: Border.all(
- color: user.status == CometChatUserStatus.online
- ? Color(0xFF09C26F)
- : Colors.transparent,
- width: 2,
- ),
- borderRadius: BorderRadius.circular(8),
- ),
- child: CometChatAvatar(
- image: user.avatar,
- name: user.name,
- style: CometChatAvatarStyle(
- borderRadius: BorderRadius.circular(6),
- ),
- ),
+ return CircleAvatar(
+ child: Text(user.name?[0] ?? ""),
);
},
)
@@ -601,35 +255,18 @@ CometChatUsers(
-### titleView
+### Title View
-Replace the name / title text. Role badge inline example.
+Replace the name / title text.
```dart
CometChatUsers(
titleView: (context, user) {
- return Row(
- children: [
- Text(
- user.name ?? "",
- style: TextStyle(fontWeight: FontWeight.w500, fontSize: 16),
- ),
- if (user.role != null)
- Container(
- margin: EdgeInsets.only(left: 4),
- padding: EdgeInsets.symmetric(horizontal: 6, vertical: 2),
- decoration: BoxDecoration(
- color: Color(0xFF09C26F),
- borderRadius: BorderRadius.circular(7),
- ),
- child: Text(
- user.role!,
- style: TextStyle(color: Colors.white, fontSize: 8, fontWeight: FontWeight.w600),
- ),
- ),
- ],
+ return Text(
+ user.name ?? "",
+ style: TextStyle(fontWeight: FontWeight.bold),
);
},
)
@@ -637,29 +274,19 @@ CometChatUsers(
-### subtitleView
+### Subtitle View
-Replace the subtitle text for each user.
-
-
- 
-
+Replace the subtitle text below the user's name.
```dart
CometChatUsers(
subtitleView: (context, user) {
- final dateTime = user.lastActiveAt ?? DateTime.now();
- final subtitle = "Last Active at ${DateFormat('dd/MM/yyyy, HH:mm:ss').format(dateTime)}";
-
return Text(
- subtitle,
- style: TextStyle(
- color: Color(0xFF727272),
- fontSize: 14,
- fontWeight: FontWeight.w400,
- ),
+ user.status ?? "offline",
+ maxLines: 1,
+ overflow: TextOverflow.ellipsis,
);
},
)
@@ -667,849 +294,210 @@ CometChatUsers(
+### Trailing View
-### trailingView
-
-Replace the right section. Custom tag badge example.
+Replace the right section of each user item.
```dart
CometChatUsers(
trailingView: (context, user) {
- final tag = user.tags?.isNotEmpty == true ? user.tags!.first : null;
- if (tag == null) return null;
-
- return Container(
- padding: EdgeInsets.symmetric(horizontal: 6, vertical: 4),
- decoration: BoxDecoration(
- color: Color(0xFF6852D6),
- borderRadius: BorderRadius.circular(4),
- ),
- child: Text(
- tag,
- style: TextStyle(color: Colors.white, fontSize: 10, fontWeight: FontWeight.w600),
- ),
- );
+ return Text(user.role ?? "");
},
)
```
-### setOptions
+### List Item View
-Replace the context menu / long-press actions on each user item.
+Replace the entire list item row.
```dart
CometChatUsers(
- setOptions: (user, controller, context) {
- return [
- CometChatOption(
- id: "block",
- title: "Block User",
- icon: AssetConstants.close,
- onClick: () {
- CometChat.blockUsers([user.uid], onSuccess: (users) {
- print("User blocked");
- }, onError: (error) {
- print("Error: $error");
- });
- },
- ),
- CometChatOption(
- id: "view_profile",
- title: "View Profile",
- iconWidget: Icon(Icons.person_outline),
- onClick: () {
- // Navigate to user profile
- },
- ),
- ];
+ listItemView: (user) {
+ return ListTile(
+ leading: CircleAvatar(child: Text(user.name?[0] ?? "")),
+ title: Text(user.name ?? ""),
+ subtitle: Text(user.status ?? "offline"),
+ );
},
)
```
-### addOptions
-
-Add to the existing context menu actions without removing defaults.
+### State Views
```dart
CometChatUsers(
- addOptions: (user, controller, context) {
- return [
- CometChatOption(
- id: "add_friend",
- title: "Add Friend",
- iconWidget: Icon(Icons.person_add_outlined),
- onClick: () {
- // Add friend logic
- },
- ),
- CometChatOption(
- id: "send_message",
- title: "Send Message",
- iconWidget: Icon(Icons.message_outlined),
- onClick: () {
- // Navigate to messages
- },
- ),
- ];
- },
+ emptyStateView: (context) => Center(child: Text("No users found")),
+ errorStateView: (context) => Center(child: Text("Something went wrong")),
+ loadingStateView: (context) => Center(child: CircularProgressIndicator()),
)
```
+---
-### appBarOptions
-
-Add custom widgets to the app bar.
+## Common Patterns
-
- 
-
+### Minimal list — hide all chrome
```dart
CometChatUsers(
- appBarOptions: (context) => [
- IconButton(
- onPressed: () {
- // Handle action
- },
- icon: Icon(Icons.add_comment_outlined, color: Color(0xFF141414)),
- ),
- ],
+ hideAppbar: true,
+ hideSearch: true,
+ stickyHeaderVisibility: false,
)
```
-For a more complete popup menu with styling:
+### Friends-only list
```dart
CometChatUsers(
- appBarOptions: (context) => [
- PopupMenuButton(
- shape: RoundedRectangleBorder(
- borderRadius: BorderRadius.circular(8),
- side: BorderSide(color: Color(0xFFF5F5F5), width: 1),
- ),
- color: Colors.white,
- elevation: 4,
- icon: Icon(Icons.more_vert, color: Color(0xFF141414)),
- onSelected: (value) {
- switch (value) {
- case 'refresh':
- // Refresh users list
- break;
- case 'settings':
- // Navigate to settings
- break;
- }
- },
- itemBuilder: (BuildContext context) => [
- PopupMenuItem(
- value: 'refresh',
- child: Row(
- children: [
- Icon(Icons.refresh, color: Color(0xFFA1A1A1)),
- SizedBox(width: 8),
- Text("Refresh"),
- ],
- ),
- ),
- PopupMenuItem(
- value: 'settings',
- child: Row(
- children: [
- Icon(Icons.settings, color: Color(0xFFA1A1A1)),
- SizedBox(width: 8),
- Text("Settings"),
- ],
- ),
- ),
- ],
- ),
- ],
+ usersRequestBuilder: UsersRequestBuilder()
+ ..friendsOnly = true,
)
```
----
-
-
-## Styling
-
-Set `CometChatUsersStyle` to customize the appearance.
+### Online users only
```dart
CometChatUsers(
- usersStyle: CometChatUsersStyle(
- backgroundColor: Colors.white,
- titleTextColor: Color(0xFFF76808),
- separatorColor: Color(0xFFF76808),
- avatarStyle: CometChatAvatarStyle(
- borderRadius: BorderRadius.circular(8),
- backgroundColor: Color(0xFFFBAA75),
- ),
- ),
+ usersRequestBuilder: UsersRequestBuilder()
+ ..userStatus = CometChatConstants.userStatusOnline,
)
```
-
-
-
-
-### Style Properties
-
-| Property | Type | Description |
-| --- | --- | --- |
-| `backgroundColor` | `Color?` | Background color of the component |
-| `border` | `Border?` | Border for the widget |
-| `borderRadius` | `BorderRadiusGeometry?` | Border radius for the widget |
-| `titleTextColor` | `Color?` | Color of the header title |
-| `titleTextStyle` | `TextStyle?` | Style for the header title |
-| `backIconColor` | `Color?` | Back button icon color |
-| `searchBackgroundColor` | `Color?` | Background color of search box |
-| `searchBorder` | `BorderSide?` | Border for search box |
-| `searchBorderRadius` | `BorderRadius?` | Border radius for search box |
-| `searchPlaceHolderTextColor` | `Color?` | Placeholder text color in search |
-| `searchPlaceHolderTextStyle` | `TextStyle?` | Placeholder text style in search |
-| `searchIconColor` | `Color?` | Search icon color |
-| `searchInputTextColor` | `Color?` | Search input text color |
-| `searchInputTextStyle` | `TextStyle?` | Search input text style |
-| `separatorColor` | `Color?` | Color of list item separators |
-| `separatorHeight` | `double?` | Height of list item separators |
-| `stickyTitleColor` | `Color?` | Color of sticky alphabetical headers |
-| `stickyTitleTextStyle` | `TextStyle?` | Style for sticky alphabetical headers |
-| `itemTitleTextColor` | `Color?` | Color of user name in list items |
-| `itemTitleTextStyle` | `TextStyle?` | Style for user name in list items |
-| `itemBorder` | `BoxBorder?` | Border for list items |
-| `listItemSelectedBackgroundColor` | `Color?` | Background color for selected items |
-| `emptyStateTextColor` | `Color?` | Text color for empty state title |
-| `emptyStateTextStyle` | `TextStyle?` | Text style for empty state title |
-| `emptyStateSubTitleTextColor` | `Color?` | Text color for empty state subtitle |
-| `emptyStateSubTitleTextStyle` | `TextStyle?` | Text style for empty state subtitle |
-| `errorStateTextColor` | `Color?` | Text color for error state title |
-| `errorStateTextStyle` | `TextStyle?` | Text style for error state title |
-| `errorStateSubTitleTextColor` | `Color?` | Text color for error state subtitle |
-| `errorStateSubTitleTextStyle` | `TextStyle?` | Text style for error state subtitle |
-| `retryButtonBackgroundColor` | `Color?` | Background color for retry button |
-| `retryButtonBorderRadius` | `BorderRadiusGeometry?` | Border radius for retry button |
-| `retryButtonBorder` | `BorderSide?` | Border for retry button |
-| `retryButtonTextColor` | `Color?` | Text color for retry button |
-| `retryButtonTextStyle` | `TextStyle?` | Text style for retry button |
-| `submitIconColor` | `Color?` | Color of submit icon in selection mode |
-| `checkBoxBackgroundColor` | `Color?` | Background color of unchecked checkbox |
-| `checkBoxCheckedBackgroundColor` | `Color?` | Background color of checked checkbox |
-| `checkboxSelectedIconColor` | `Color?` | Color of checkmark icon |
-| `checkBoxBorderRadius` | `BorderRadiusGeometry?` | Border radius for checkbox |
-| `checkBoxBorder` | `BorderSide?` | Border for checkbox |
-| `avatarStyle` | `CometChatAvatarStyle?` | Style for user avatars |
-| `statusIndicatorStyle` | `CometChatStatusIndicatorStyle?` | Style for status indicators |
-
---
+## Advanced
-## Common Patterns
+### BLoC Access
-### Custom empty state with CTA
+Provide a custom `UsersBloc` to override behavior:
```dart
CometChatUsers(
- emptyStateView: (context) {
- return Center(
- child: Column(
- mainAxisAlignment: MainAxisAlignment.center,
- children: [
- Icon(Icons.people_outline, size: 64, color: Color(0xFF727272)),
- SizedBox(height: 16),
- Text("No users found", style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500)),
- SizedBox(height: 8),
- ElevatedButton(
- onPressed: () {
- // Invite users
- },
- child: Text("Invite Users"),
- ),
- ],
- ),
- );
- },
+ usersBloc: CustomUsersBloc(),
)
```
-### Friends-only list
+### Extending UsersBloc
+
+`UsersBloc` uses the `ListBase` mixin with override hooks:
```dart
-CometChatUsers(
- usersRequestBuilder: UsersRequestBuilder()
- ..friendsOnly = true
- ..limit = 15,
-)
+class CustomUsersBloc extends UsersBloc {
+ @override
+ void onItemAdded(User item, List updatedList) {
+ // Custom sorting logic
+ super.onItemAdded(item, updatedList);
+ }
+
+ @override
+ void onListReplaced(List previousList, List newList) {
+ // Filter out specific users
+ final filtered = newList.where((u) => u.role != "bot").toList();
+ super.onListReplaced(previousList, filtered);
+ }
+}
```
-### Multi-select with selection callback
+For `ListBase` override hooks (`onItemAdded`, `onItemRemoved`, `onItemUpdated`, `onListCleared`, `onListReplaced`), see [BLoC & Data — ListBase Hooks](/ui-kit/flutter/customization-bloc-data#listbase-hooks).
-
-
-```dart
-CometChatUsers(
- selectionMode: SelectionMode.multiple,
- activateSelection: ActivateSelection.onClick,
- onSelection: (selectedUsers, context) {
- if (selectedUsers != null && selectedUsers.isNotEmpty) {
- print("Selected ${selectedUsers.length} users");
- // Create group with selected users, etc.
- }
- },
-)
-```
-
-
+### Public BLoC Events
-### Hide all chrome — minimal list
+| Event | Description |
+| --- | --- |
+| `LoadUsers({searchKeyword, silent})` | Load initial users. `silent: true` keeps existing list visible. |
+| `LoadMoreUsers()` | Load next page (pagination) |
+| `RefreshUsers()` | Refresh the list |
+| `SearchUsers(keyword)` | Search users with debouncing |
+| `ToggleUserSelection(uid)` | Toggle selection state |
+| `ClearUserSelection()` | Clear all selections |
+| `UpdateUser(user)` | Update a specific user |
-
-
-```dart
-CometChatUsers(
- hideSearch: true,
- hideAppbar: true,
- usersStatusVisibility: false,
- stickyHeaderVisibility: true, // hides alphabetical headers
-)
-```
-
-
+### Public BLoC Methods
-### Online users only
+| Method | Returns | Description |
+| --- | --- | --- |
+| `getStatusNotifier(uid)` | `ValueNotifier` | Per-user status notifier for isolated rebuilds |
+| `getUserStatus(uid)` | `String` | Current status for a user (`online` / `offline`) |
+
+---
+
+## Style
```dart
CometChatUsers(
- usersRequestBuilder: UsersRequestBuilder()
- ..userStatus = CometChatUserStatus.online,
+ usersStyle: CometChatUsersStyle(
+ avatarStyle: CometChatAvatarStyle(
+ borderRadius: BorderRadius.circular(8),
+ backgroundColor: Color(0xFFFBAA75),
+ ),
+ statusIndicatorStyle: CometChatStatusIndicatorStyle(),
+ ),
)
```
----
-
-
-## Accessibility
-
-The component renders a scrollable list of interactive items. Each user row supports:
-
-- Tap gesture for selection/navigation
-- Long-press gesture for context menu actions
-- Checkbox selection in multi-select mode with proper touch targets
-- Status indicators with visual feedback for online/offline state
-
-For screen readers:
-- User names are readable as list item titles
-- Status indicators use color coding — consider adding `Semantics` widgets via `leadingView` if screen reader descriptions are needed for these visual indicators
-- Selection state is communicated through checkbox widgets
-
-The component respects system accessibility settings including text scaling and high contrast modes.
-
----
-
-## Props
-
-All props are optional unless noted.
-
-### activateSelection
-
-Controls when selection mode activates.
-
-| | |
-| --- | --- |
-| Type | `ActivateSelection?` |
-| Default | `null` |
-
-Values: `ActivateSelection.onClick`, `ActivateSelection.onLongClick`
-
----
-
-### addOptions
-
-Adds additional context menu actions to the default options.
-
-| | |
-| --- | --- |
-| Type | `List? Function(User, CometChatUsersController, BuildContext)?` |
-| Default | `null` |
-
----
-
-### appBarOptions
-
-Custom widgets to display in the app bar.
-
-| | |
-| --- | --- |
-| Type | `List Function(BuildContext context)?` |
-| Default | `null` |
-
----
-
-### backButton
-
-Custom back button widget.
-
-| | |
-| --- | --- |
-| Type | `Widget?` |
-| Default | Built-in back arrow |
-
----
-
-### controllerTag
-
-Identifier tag for controller management.
-
-| | |
-| --- | --- |
-| Type | `String?` |
-| Default | `null` |
-
----
-
-
-### emptyStateView
-
-Custom view displayed when there are no users.
-
-| | |
-| --- | --- |
-| Type | `WidgetBuilder?` |
-| Default | Built-in empty state |
-
----
-
-### errorStateView
-
-Custom view displayed when an error occurs.
-
-| | |
-| --- | --- |
-| Type | `WidgetBuilder?` |
-| Default | Built-in error state |
-
----
-
-### height
-
-Height of the widget.
-
-| | |
-| --- | --- |
-| Type | `double?` |
-| Default | `null` |
-
----
-
-### hideAppbar
-
-Hides the app bar including title and search.
-
-| | |
-| --- | --- |
-| Type | `bool?` |
-| Default | `false` |
-
----
-
-### hideSearch
-
-Hides the search input box.
-
-| | |
-| --- | --- |
-| Type | `bool` |
-| Default | `false` |
-
----
-
-### leadingView
-
-Custom renderer for the avatar / left section.
-
-| | |
-| --- | --- |
-| Type | `Widget? Function(BuildContext context, User user)?` |
-| Default | Built-in avatar |
-
----
-
-### listItemView
-
-Custom renderer for the entire list item row.
-
-| | |
-| --- | --- |
-| Type | `Widget Function(User user)?` |
-| Default | Built-in list item |
-
----
-
-### loadingStateView
-
-Custom view displayed during loading state.
-
-| | |
-| --- | --- |
-| Type | `WidgetBuilder?` |
-| Default | Built-in shimmer |
-
----
-
-
-### onBack
-
-Callback triggered when the back button is pressed.
-
-| | |
-| --- | --- |
-| Type | `VoidCallback?` |
-| Default | `null` |
-
----
-
-### onEmpty
-
-Callback triggered when the user list is empty.
-
-| | |
-| --- | --- |
-| Type | `OnEmpty?` |
-| Default | `null` |
-
----
-
-### onError
-
-Callback triggered when an error occurs.
-
-| | |
-| --- | --- |
-| Type | `OnError?` |
-| Default | `null` |
-
----
-
-### onItemLongPress
-
-Callback triggered on long press of a user item.
-
-| | |
-| --- | --- |
-| Type | `Function(BuildContext context, User user)?` |
-| Default | `null` |
-
----
-
-### onItemTap
-
-Callback triggered when tapping a user item.
-
-| | |
-| --- | --- |
-| Type | `Function(BuildContext context, User user)?` |
-| Default | `null` |
-
----
-
-### onLoad
-
-Callback triggered when the list is successfully loaded.
-
-| | |
-| --- | --- |
-| Type | `OnLoad?` |
-| Default | `null` |
-
----
-
-### onSelection
-
-Callback triggered when users are selected. Requires `selectionMode` to be set.
-
-| | |
-| --- | --- |
-| Type | `Function(List? list, BuildContext context)?` |
-| Default | `null` |
-
----
-
-### scrollController
-
-Controller for scrolling the list.
-
-| | |
-| --- | --- |
-| Type | `ScrollController?` |
-| Default | `null` |
-
----
-
-
-### searchBoxIcon
-
-Custom search box icon widget.
-
-| | |
-| --- | --- |
-| Type | `Widget?` |
-| Default | Built-in search icon |
-
----
-
-### searchKeyword
-
-Pre-fills the search and filters the user list.
-
-| | |
-| --- | --- |
-| Type | `String?` |
-| Default | `null` |
-
----
-
-### searchPlaceholder
-
-Placeholder text for the search input box.
-
-| | |
-| --- | --- |
-| Type | `String?` |
-| Default | `null` |
-
----
-
-### selectionMode
-
-Enables single or multi-select mode.
-
-| | |
-| --- | --- |
-| Type | `SelectionMode?` |
-| Default | `null` |
-
-Values: `SelectionMode.single`, `SelectionMode.multiple`, `SelectionMode.none`
-
----
-
-### setOptions
-
-Replaces the default context menu actions.
-
-| | |
-| --- | --- |
-| Type | `List? Function(User, CometChatUsersController, BuildContext)?` |
-| Default | `null` |
-
----
-
-### showBackButton
-
-Shows or hides the back button.
-
-| | |
-| --- | --- |
-| Type | `bool` |
-| Default | `true` |
-
----
-
-### stickyHeaderVisibility
-
-Hides alphabetical section headers when set to `true`.
-
-| | |
-| --- | --- |
-| Type | `bool?` |
-| Default | `false` |
-
-Note: When `false`, alphabetical headers (A, B, C...) are shown to separate users.
-
----
-
-
-### submitIcon
-
-Custom submit icon widget for selection mode.
-
-| | |
-| --- | --- |
-| Type | `Widget?` |
-| Default | Built-in check icon |
-
----
-
-### subtitleView
-
-Custom renderer for the subtitle text.
-
-| | |
-| --- | --- |
-| Type | `Widget? Function(BuildContext context, User user)?` |
-| Default | `null` |
-
----
-
-### title
-
-Title text displayed in the app bar.
-
-| | |
-| --- | --- |
-| Type | `String?` |
-| Default | `"Users"` |
-
----
-
-### titleView
-
-Custom renderer for the name / title text.
-
-| | |
-| --- | --- |
-| Type | `Widget? Function(BuildContext context, User user)?` |
-| Default | Built-in title |
-
----
-
-### trailingView
-
-Custom renderer for the right section.
-
-| | |
-| --- | --- |
-| Type | `Widget? Function(BuildContext context, User user)?` |
-| Default | `null` |
-
----
-
-### usersProtocol
-
-Custom protocol for fetching users.
-
-| | |
-| --- | --- |
-| Type | `UsersBuilderProtocol?` |
-| Default | `null` |
-
----
-
-### usersRequestBuilder
-
-Controls which users load and in what order.
-
-| | |
-| --- | --- |
-| Type | `UsersRequestBuilder?` |
-| Default | SDK default (30 per page) |
-
-Pass the builder instance, not the result of `.build()`.
-
----
-
-### usersStatusVisibility
-
-Shows or hides the online/offline status indicator on user avatars.
-
-| | |
-| --- | --- |
-| Type | `bool?` |
-| Default | `true` |
-
----
-
-### usersStyle
-
-Styling options for the users list.
-
-| | |
-| --- | --- |
-| Type | `CometChatUsersStyle` |
-| Default | `CometChatUsersStyle()` |
-
----
-
-### width
-
-Width of the widget.
+### Style Properties
-| | |
+| Property | Description |
| --- | --- |
-| Type | `double?` |
-| Default | `null` |
-
----
-
-
-## Events
+| `backgroundColor` | List background color |
+| `avatarStyle` | Avatar appearance |
+| `statusIndicatorStyle` | Online/offline indicator |
+| `searchBoxStyle` | Search box appearance |
-`CometChatUsers` does not emit custom UI events. It subscribes to:
-
-| Event | Payload | Internal behavior |
-| --- | --- | --- |
-| `CometChatUserEvents.ccUserBlocked` | `User` | Updates blocked user in list |
-| `CometChatUserEvents.ccUserUnblocked` | `User` | Updates unblocked user in list |
+See [Component Styling](/ui-kit/flutter/component-styling) for the full reference.
---
-## Customization Matrix
-
-| What to change | Where | Property/API | Example |
-| --- | --- | --- | --- |
-| Override behavior on user interaction | Component props | `on` callbacks | `onItemTap: (ctx, user) => setActive(user)` |
-| Filter which users appear | Component props | `usersRequestBuilder` | `usersRequestBuilder: UsersRequestBuilder()..friendsOnly = true` |
-| Toggle visibility of UI elements | Component props | `hide` / `show` boolean props | `hideSearch: true` |
-| Replace a section of the list item | Component props | `View` render props | `listItemView: (user) => CustomWidget()` |
-| Change colors, fonts, spacing | Component props | `usersStyle` | `usersStyle: CometChatUsersStyle(titleTextColor: Colors.red)` |
-
----
+## Next Steps
- Display recent one-on-one and group conversations
+ Browse recent conversations
- Display and manage group chats
+ Browse and search available groups
-
- Display messages in a conversation
+
+ Detailed styling reference
-
- Learn how to customize the look and feel
+
+ Customize message bubble structure
\ No newline at end of file
diff --git a/ui-kit/flutter/ai-assistant-chat-history.mdx b/ui-kit/flutter/v5/ai-assistant-chat-history.mdx
similarity index 98%
rename from ui-kit/flutter/ai-assistant-chat-history.mdx
rename to ui-kit/flutter/v5/ai-assistant-chat-history.mdx
index 145ca28fc..7c804677a 100644
--- a/ui-kit/flutter/ai-assistant-chat-history.mdx
+++ b/ui-kit/flutter/v5/ai-assistant-chat-history.mdx
@@ -423,16 +423,16 @@ CometChatAIAssistantChatHistory(
| `hideDateSeparator` | `bool?` | `null` | Hide date separator |
-
+
Display messages in a conversation
-
+
Compose and send messages
-
+
Learn how to customize the look and feel
-
+
Support multiple languages in your app
diff --git a/ui-kit/flutter/ai-features.mdx b/ui-kit/flutter/v5/ai-features.mdx
similarity index 89%
rename from ui-kit/flutter/ai-features.mdx
rename to ui-kit/flutter/v5/ai-features.mdx
index 034555fd8..8bda620c6 100644
--- a/ui-kit/flutter/ai-features.mdx
+++ b/ui-kit/flutter/v5/ai-features.mdx
@@ -11,7 +11,7 @@ description: "Enhance user interaction with AI-powered conversation starters, sm
| Package | `cometchat_chat_uikit` |
| Required setup | `CometChatUIKit.init(uiKitSettings: UIKitSettings)` then `CometChatUIKit.login(uid)` + AI features enabled in [CometChat Dashboard](/fundamentals/ai-user-copilot/overview) |
| AI features | Conversation Starter, Smart Replies, Conversation Summary, AI Assist Bot |
-| Key components | `CometChatMessageList` → [Message List](/ui-kit/flutter/message-list) (Conversation Starter), `CometChatMessageComposer` → [Message Composer](/ui-kit/flutter/message-composer) (Smart Replies, Summary) |
+| Key components | `CometChatMessageList` → [Message List](/ui-kit/flutter/v5/message-list) (Conversation Starter), `CometChatMessageComposer` → [Message Composer](/ui-kit/flutter/v5/message-composer) (Smart Replies, Summary) |
| AI Extensions | `AISmartRepliesExtension()`, `AIConversationStarterExtension()`, `AIAssistBotExtension()`, `AIConversationSummaryExtension()` |
| Activation | Enable each AI feature from the CometChat Dashboard — UI Kit auto-integrates them after configuration |
@@ -56,7 +56,7 @@ When a user initiates a new chat, the UI kit displays a list of suggested openin
For a comprehensive understanding and guide on implementing and using the Conversation Starters, refer to our specific guide on the [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter).
-Once you have successfully activated the [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter) from your CometChat Dashboard, the feature will automatically be incorporated into the [MessageList](/ui-kit/flutter/message-list) Widget of UI Kits.
+Once you have successfully activated the [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter) from your CometChat Dashboard, the feature will automatically be incorporated into the [MessageList](/ui-kit/flutter/v5/message-list) Widget of UI Kits.
@@ -68,7 +68,7 @@ Smart Replies are AI-generated responses to messages. They can predict what a us
For a comprehensive understanding and guide on implementing and using the Smart Replies, refer to our specific guide on the [Smart Replies](/fundamentals/ai-user-copilot/smart-replies).
-Once you have successfully activated the [Smart Replies](/fundamentals/ai-user-copilot/smart-replies) from your CometChat Dashboard, the feature will automatically be incorporated into the Action sheet of [MessageComposer](/ui-kit/flutter/message-composer) Widget of UI Kits.
+Once you have successfully activated the [Smart Replies](/fundamentals/ai-user-copilot/smart-replies) from your CometChat Dashboard, the feature will automatically be incorporated into the Action sheet of [MessageComposer](/ui-kit/flutter/v5/message-composer) Widget of UI Kits.
@@ -80,7 +80,7 @@ The Conversation Summary feature provides concise summaries of long conversation
For a comprehensive understanding and guide on implementing and using the Conversation Summary, refer to our specific guide on the [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary).
-Once you have successfully activated the [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary) from your CometChat Dashboard, the feature will automatically be incorporated into the Action sheet of [MessageComposer](/ui-kit/flutter/message-composer) Widget of UI Kits.
+Once you have successfully activated the [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary) from your CometChat Dashboard, the feature will automatically be incorporated into the Action sheet of [MessageComposer](/ui-kit/flutter/v5/message-composer) Widget of UI Kits.
@@ -91,16 +91,16 @@ Once you have successfully activated the [Conversation Summary](/fundamentals/ai
## Next Steps
-
+
Display and manage conversation messages with AI-powered starters
-
+
Compose messages with smart replies and AI assistance
Learn more about AI features and configuration
-
+
Explore other extensions to enhance your chat experience
diff --git a/ui-kit/flutter/v5/call-buttons.mdx b/ui-kit/flutter/v5/call-buttons.mdx
new file mode 100644
index 000000000..535d3d75b
--- /dev/null
+++ b/ui-kit/flutter/v5/call-buttons.mdx
@@ -0,0 +1,311 @@
+---
+title: "Call Buttons"
+description: "Widget that provides users with the ability to make voice and video calls with customizable icons and styles."
+---
+
+```json
+{
+ "component": "CometChatCallButtons",
+ "package": "cometchat_calls_uikit",
+ "import": "import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';",
+ "description": "Widget that provides users with the ability to make voice and video calls with customizable icons and styles.",
+ "props": {
+ "data": {
+ "user": { "type": "User?", "default": "null" },
+ "group": { "type": "Group?", "default": "null" }
+ },
+ "visibility": {
+ "hideVoiceCallButton": { "type": "bool?", "default": "false" },
+ "hideVideoCallButton": { "type": "bool?", "default": "false" }
+ },
+ "icons": {
+ "voiceCallIcon": "Widget?",
+ "videoCallIcon": "Widget?"
+ },
+ "style": {
+ "callButtonsStyle": "CometChatCallButtonsStyle?"
+ },
+ "configuration": {
+ "outgoingCallConfiguration": "CometChatOutgoingCallConfiguration?",
+ "callSettingsBuilder": "CallSettingsBuilder Function(User? user, Group? group, bool? isAudioOnly)?"
+ }
+ }
+}
+```
+
+
+## Overview
+
+The `CometChatCallButtons` is a [Widget](/ui-kit/flutter/v5/components-overview#components) provides users with the ability to make calls, access call-related functionalities, and control call settings. Clicking this button typically triggers the call to be placed to the desired recipient.
+
+
+
+
+
+## Usage
+
+### Integration
+
+You can launch `CometChatCallButtons` directly using `Navigator.push`, or you can define it as a widget within the `build` method of your `State` class.
+
+##### 1. Using Navigator to Launch `CometChatCallButtons`
+
+
+
+```dart
+Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatCallButtons()));
+```
+
+
+
+
+
+##### 2. Embedding `CometChatCallButtons` as a Widget in the build Method
+
+
+
+```dart
+import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';
+import 'package:flutter/material.dart';
+
+class CallButtonsExample extends StatefulWidget {
+ const CallButtonsExample({super.key});
+
+ @override
+ State createState() => _CallButtonsExampleState();
+}
+
+class _CallButtonsExampleState extends State {
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: SafeArea(
+ child: Center(
+ child: CometChatCallButtons()
+ )
+ ),
+ );
+ }
+}
+```
+
+
+
+
+
+***
+
+### Actions
+
+[Actions](/ui-kit/flutter/v5/components-overview#actions) dictate how a widget functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the widget to fit your specific needs.
+
+##### onError
+
+You can customize this behavior by using the provided code snippet to override the `onError` and improve error handling.
+
+
+
+```dart
+CometChatCallButtons(
+ onError: (e) {
+ // TODO("Not yet implemented")
+ },
+)
+```
+
+
+
+
+
+***
+
+### Filters
+
+**Filters** allow you to customize the data displayed in a list within a Widget. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK.
+
+The CallButton widget does not have any exposed filters.
+
+***
+
+### Events
+
+[Events](/ui-kit/flutter/v5/components-overview#events) are emitted by a `Widget`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.
+
+Events emitted by the Call buttons widget are as follows.
+
+| Event | Description |
+| ------------------ | -------------------------------------------- |
+| **ccCallAccepted** | Triggers when the outgoing call is accepted. |
+| **ccCallRejected** | Triggers when the outgoing call is rejected. |
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:flutter/material.dart';
+
+class YourScreen extends StatefulWidget {
+ const YourScreen({super.key});
+
+ @override
+ State createState() => _YourScreenState();
+}
+
+class _YourScreenState extends State with CometChatCallEventListener {
+
+ @override
+ void initState() {
+ super.initState();
+ CometChatCallEvents.addCallEventsListener("unique_listener_ID", this); // Add the listener
+ }
+
+ @override
+ void dispose(){
+ super.dispose();
+ CometChatCallEvents.removeCallEventsListener("unique_listener_ID"); // Remove the listener
+ }
+
+ @override
+ void ccCallAccepted(Call call) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccCallRejected(Call call) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return const Placeholder();
+ }
+
+}
+```
+
+
+
+
+
+***
+
+## Customization
+
+To fit your app's design requirements, you can customize the appearance of the conversation widget. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.
+
+### Style
+
+You can customize the appearance of the `CometChatCallButtons` Widget by applying the `CometChatCallButtonsStyle` to it using the following code snippet.
+
+
+
+```dart
+CometChatCallButtons(
+ callButtonsStyle: CometChatCallButtonsStyle(
+ voiceCallIconColor: Color(0xFF6852D6),
+ videoCallIconColor: Color(0xFF6852D6),
+ voiceCallButtonColor: Color(0xFFEDEAFA),
+ videoCallButtonColor: Color(0xFFEDEAFA),
+ voiceCallButtonBorderRadius: BorderRadius.circular(12.5),
+ videoCallButtonBorderRadius: BorderRadius.circular(12.5),
+ videoCallButtonBorder: BorderSide(
+ color: Color(0xFFE8E8E8),
+ width: 1,
+ ),
+ voiceCallButtonBorder: BorderSide(
+ color: Color(0xFFE8E8E8),
+ width: 1,
+ ),
+ )
+)
+```
+
+
+
+
+
+***
+
+### Functionality
+
+These are a set of small functional customizations that allow you to fine-tune the overall experience of the widget. With these, you can change text, set custom icons, and toggle the visibility of UI elements.
+
+**Example**
+
+Here is the example for reference:
+
+
+
+```dart
+CometChatCallButtons(
+ hideVideoCallButton: true,
+)
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Below is a list of customizations along with corresponding code snippets
+
+| **Property** | Description | Code |
+| ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- |
+| **User** | Used to set User object to the call button. | `user: User?` |
+| **Group** | Used to set Group object to the call button. | `group: Group?` |
+| **CallSettingsBuilder** | Sets the call settings builder callback function. This callback is responsible for configuring the call settings based on the user, group, and call type (audio/video). | `callSettingsBuilder: CallSettingsBuilder?` |
+| **Hide Video Call** | Hides the video call button. | `hideVideoCallButton: bool?` |
+| **Hide Voice Call** | Hides the voice call button. | `hideVoiceCallButton: bool?` |
+| **Video Call Icon** | Sets the icon for the video call button. | `videoCallIcon: Icon?` |
+| **Voice Call Icon** | Sets the icon for the voice call button. | `voiceCallIcon: Icon?` |
+| **outgoingCallConfiguration** | Sets the configurations for outgoing call component. | `outgoingCallConfiguration: CometChatOutgoingCallConfiguration?` |
+
+***
+
+### Advanced
+
+For advanced-level customization, you can set custom views to the widget. This lets you tailor each aspect of the widget to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the widget.
+
+The `CometChatCallButtons` widget does not provide additional functionalities beyond this level of customization.
+
+***
+
+## Configurations
+
+Configurations offer the ability to customize the properties of each individual component within a Composite Component.
+
+* `Configurations` expose properties that are available in its individual components.
+
+***
+
+### Outgoing Call
+
+You can customize the properties of the `Outgoing Call` component by making use of the `OutgoingCallConfiguration`. You can accomplish this by employing the `OutgoingCallConfiguration` as demonstrated below:
+
+
+
+```dart
+CometChatCallButtons(
+ outgoingCallConfiguration: CometChatOutgoingCallConfiguration(),
+)
+```
+
+
+
+
+
+All exposed properties of OutgoingCallConfiguration can be found under `Outgoing Call`.
+
+***
diff --git a/ui-kit/flutter/v5/call-features.mdx b/ui-kit/flutter/v5/call-features.mdx
new file mode 100644
index 000000000..5a70ad901
--- /dev/null
+++ b/ui-kit/flutter/v5/call-features.mdx
@@ -0,0 +1,73 @@
+---
+title: "Call Features"
+sidebarTitle: "Calls"
+description: "Integrate one-on-one and group audio/video calling capabilities into your Flutter app with CometChat UI Kit"
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Packages | `cometchat_chat_uikit` + `cometchat_calls_uikit` (add to `pubspec.yaml`) |
+| Required setup | `CometChatUIKit.init(uiKitSettings: UIKitSettings)` then `CometChatUIKit.login(uid)` — Calls SDK must also be installed |
+| Call features | Incoming Call, Outgoing Call, Call Logs, Call Buttons |
+| Key components | `CometChatCallButtons` → [Call Buttons](/ui-kit/flutter/v5/call-buttons), `CometChatIncomingCall` → [Incoming Call](/ui-kit/flutter/v5/incoming-call), `CometChatOutgoingCall` → [Outgoing Call](/ui-kit/flutter/v5/outgoing-call), `CometChatCallLogs` → [Call Logs](/ui-kit/flutter/v5/call-logs) |
+| Auto-detection | UI Kit automatically detects the Calls SDK and enables call UI components |
+| Requirements | minSdkVersion 24 (Android), iOS 12+ |
+
+
+
+CometChat's Calls feature is an advanced functionality that allows you to seamlessly integrate one-on-one as well as group audio and video calling capabilities into your application. This document provides a technical overview of these features, as implemented in the Flutter UI Kit.
+
+
+If you haven't set up calling yet, follow the [Calling Integration](/ui-kit/flutter/v5/calling-integration) guide first.
+
+
+## Features
+
+### Incoming Call
+
+The [Incoming Call](/ui-kit/flutter/v5/incoming-call) widget of the CometChat UI Kit provides the functionality that lets users receive real-time audio and video calls in the app.
+
+When a call is made to a user, the Incoming Call widget triggers and displays a call screen. This call screen typically displays the caller information and provides the user with options to either accept or reject the incoming call.
+
+
+
+
+
+### Outgoing Call
+
+The [Outgoing Call](/ui-kit/flutter/v5/outgoing-call) widget of the CometChat UI Kit is designed to manage the outgoing call process within your application. When a user initiates an audio or video call to another user or group, this widget displays an outgoing call screen, showcasing information about the recipient and the call status.
+
+Importantly, the Outgoing Call widget is smartly designed to transition automatically into the ongoing call screen once the receiver accepts the call. This ensures a smooth flow from initiating the call to engaging in a conversation, without any additional steps required from the user.
+
+
+
+
+
+### Call Logs
+
+[Call Logs](/ui-kit/flutter/v5/call-logs) widget provides you with the records call events such as who called who, the time of the call, and the duration of the call. This information can be fetched from the CometChat server and displayed in a structured format for users to view their past call activities.
+
+
+
+
+
+---
+
+## Next Steps
+
+
+
+ Add audio and video call buttons to your chat interface
+
+
+ Handle and display incoming call screens
+
+
+ Manage outgoing call screens and transitions
+
+
+ Display call history and records
+
+
diff --git a/ui-kit/flutter/v5/call-logs.mdx b/ui-kit/flutter/v5/call-logs.mdx
new file mode 100644
index 000000000..f4da2467c
--- /dev/null
+++ b/ui-kit/flutter/v5/call-logs.mdx
@@ -0,0 +1,907 @@
+---
+title: "Call Logs"
+description: "Widget that shows the list of Call Logs available with filtering, call-back actions, and custom views."
+---
+
+```json
+{
+ "component": "CometChatCallLogs",
+ "package": "cometchat_calls_uikit",
+ "import": "import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';",
+ "description": "Widget that shows the list of Call Logs available with filtering, call-back actions, and custom views.",
+ "props": {
+ "data": {
+ "callLogsRequestBuilder": { "type": "CallLogRequestBuilder?", "default": "null" },
+ "callLogsBuilderProtocol": { "type": "CallLogsBuilderProtocol?", "default": "null" }
+ },
+ "callbacks": {
+ "onItemClick": "Function(CallLog callLog)?",
+ "onItemLongPress": "Function(CallLog callLog)?",
+ "onCallLogIconClicked": "Function(CallLog callLog)?",
+ "onBack": "VoidCallback?",
+ "onError": "OnError?",
+ "onLoad": "OnLoad?",
+ "onEmpty": "OnEmpty?"
+ },
+ "visibility": {
+ "hideAppbar": { "type": "bool?", "default": "false" },
+ "showBackButton": { "type": "bool?", "default": "true" }
+ },
+ "viewSlots": {
+ "listItemView": "Widget? Function(CallLog callLog, BuildContext context)?",
+ "subTitleView": "Widget? Function(CallLog callLog, BuildContext context)?",
+ "trailingView": "Function(BuildContext context, CallLog callLog)?",
+ "leadingStateView": "Widget? Function(BuildContext, CallLog)?",
+ "titleView": "Widget? Function(BuildContext, CallLog)?",
+ "backButton": "Widget?",
+ "emptyStateView": "WidgetBuilder?",
+ "errorStateView": "WidgetBuilder?",
+ "loadingStateView": "WidgetBuilder?"
+ },
+ "style": {
+ "callLogsStyle": "CometChatCallLogsStyle?"
+ },
+ "icons": {
+ "audioCallIcon": "Widget?",
+ "videoCallIcon": "Widget?",
+ "incomingCallIcon": "Widget?",
+ "outgoingCallIcon": "Widget?",
+ "missedCallIcon": "Widget?"
+ },
+ "formatting": {
+ "datePattern": "String?",
+ "dateSeparatorPattern": "String?"
+ }
+ }
+}
+```
+
+
+## Overview
+
+`CometChatCallLogs` is a [Widget](/ui-kit/flutter/v5/components-overview#components) that shows the list of Call Logs available. By default, names are shown for all listed users, along with their avatars if available.
+
+
+
+
+
+The `CometChatCallLogs` widget is composed of the following BaseWidgets:
+
+| Widgets | Description |
+| --------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [CometChatListBase](/ui-kit/flutter/v5/components-overview) | `CometChatListBase` is a container widget featuring a title, customizable background options, and a dedicated list widget for seamless integration within your application's interface. |
+| [CometChatListItem](/ui-kit/flutter/v5/components-overview) | This widget displays data retrieved from a CallLog object on a card, presenting a title and subtitle. |
+
+## Usage
+
+### Integration
+
+`CometChatCallLogs` being a wrapper widget, offers versatility in its integration. It can be seamlessly launched via button clicks or any user-triggered action, enhancing the overall user experience and facilitating smoother interactions within the application.
+
+You can launch `CometChatCallLogs` directly using `Navigator.push`, or you can define it as a widget within the `build` method of your `State` class.
+
+##### 1. Using Navigator to Launch `CometChatCallLogs`
+
+
+
+```dart
+Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatCallLogs()));
+```
+
+
+
+
+
+##### 2. Embedding `CometChatCallLogs` as a Widget in the build Method
+
+
+
+```dart
+import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';
+import 'package:flutter/material.dart';
+
+class CallLogsExample extends StatefulWidget {
+ const CallLogsExample({super.key});
+
+ @override
+ State createState() => _CallLogsExampleState();
+}
+
+class _CallLogsExampleState extends State {
+
+ @override
+ Widget build(BuildContext context) {
+ return const Scaffold(
+ body: SafeArea(
+ child: CometChatCallLogs(),
+ ),
+ );
+ }
+}
+```
+
+
+
+
+
+***
+
+### Actions
+
+[Actions](/ui-kit/flutter/v5/components-overview#actions) dictate how a widget functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the widget to fit your specific needs.
+
+##### onItemClick
+
+This method proves valuable when users seek to override the `onItemClick` functionality within CometChatCallLogs, empowering them with greater control and customization options.
+
+The `onItemClick` action function invoked when a call log item is clicked, typically used to open a detailed chat screen.
+
+
+
+```dart
+CometChatCallLogs(
+ onItemClick: (callLog) {
+ // TODO("Not yet implemented")
+ },
+)
+```
+
+
+
+
+
+***
+
+##### onItemLongPress
+
+Function executed when a callLog item is long-pressed, allowing additional actions like delete or select.
+
+
+
+```dart
+CometChatCallLogs(
+ onItemLongPress: (CallLog callLog) {
+ // TODO("Not yet implemented")
+ },
+)
+```
+
+
+
+
+
+***
+
+##### onBack
+
+`onBack` is triggered when you press the back button in the app bar. It has a predefined behavior; when clicked, it navigates to the previous activity. However, you can override this action using the following code snippet.
+
+
+
+```dart
+CometChatCallLogs(
+ onBack: () {
+ // TODO("Not yet implemented")
+ },
+)
+```
+
+
+
+
+
+***
+
+##### OnError
+
+This action doesn't change the behavior of the component but rather listens for any errors that occur in the callLogs component.
+
+
+
+```dart
+CometChatCallLogs(
+ onError: (e) {
+ // TODO("Not yet implemented")
+ },
+)
+```
+
+
+
+
+
+***
+
+##### onLoad
+
+Invoked when the list is successfully fetched and loaded, helping track component readiness.
+
+
+
+```dart
+CometChatCallLogs(
+ onLoad: (list) {
+ // print("Call Logs: $list");
+ },
+)
+```
+
+
+
+
+
+***
+
+##### onEmpty
+
+Called when the list is empty, enabling custom handling such as showing a placeholder message.
+
+
+
+```dart
+CometChatCallLogs(
+ onEmpty: () {
+ // Handle empty call logs
+ },
+)
+```
+
+
+
+
+
+***
+
+##### onCallLogIconClicked
+
+You can customize this behavior by using the provided code snippet to override the `onCallLogIconClicked` and improve error handling.
+
+
+
+```dart
+CometChatCallLogs(
+ onCallLogIconClicked: (CallLog callLog) {
+ // TODO("Not yet implemented")
+ },
+)
+```
+
+
+
+
+
+***
+
+### Filters
+
+**Filters** allow you to customize the data displayed in a list within a Widget. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK.
+
+##### 1. CallLogRequestBuilder
+
+The [CallLogRequestBuilder](/sdk/flutter/call-logs) enables you to filter and customize the call list based on available parameters in CallLogRequestBuilder. This feature allows you to create more specific and targeted queries during the call. The following are the parameters available in [CallLogRequestBuilder](/sdk/flutter/call-logs)
+
+**Example**
+
+In the example below, we are applying a filter based on the limit and have a call recording.
+
+
+
+```dart
+CometChatCallLogs(
+ callLogsRequestBuilder: CallLogRequestBuilder()
+ ..limit = 10
+ ..hasRecording = true,
+)
+```
+
+
+
+
+
+List of properties exposed by `CallLogRequestBuilder`
+
+| **Property** | Description | Code |
+| ------------------ | ----------------------------------------------------------- | ------------------------ |
+| **Auth Token** | Sets the authentication token. | `authToken: String?` |
+| **Call Category** | Sets the category of the call. | `callCategory: String?` |
+| **Call Direction** | Sets the direction of the call. | `callDirection: String?` |
+| **Call Status** | Sets the status of the call. | `callStatus: String?` |
+| **Call Type** | Sets the type of the call. | `callType: String?` |
+| **Guid** | Sets the unique ID of the group involved in the call. | `guid: String?` |
+| **Has Recording** | Indicates if the call has a recording. | `hasRecording: bool` |
+| **Limit** | Sets the maximum number of call logs to return per request. | `limit: int` |
+| **Uid** | Sets the unique ID of the user involved in the call. | `uid: String?` |
+
+***
+
+### Events
+
+[Events](/ui-kit/flutter/v5/components-overview#events) are emitted by a `Widget`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.
+
+The `CometChatCallLogs` widget does not have any exposed events.
+
+***
+
+## Customization
+
+To fit your app's design requirements, you can customize the appearance of the conversation widget. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.
+
+### Style
+
+You can customize the appearance of the `CometChatCallLogs` Widget by applying the `CometChatCallLogsStyle` to it using the following code snippet.
+
+
+
+```dart
+CometChatCallLogs(
+ callLogsStyle: CometChatCallLogsStyle(
+ titleTextColor: Color(0xFFF76808),
+ separatorColor: Color(0xFFF76808),
+ avatarStyle: CometChatAvatarStyle(
+ borderRadius: BorderRadius.circular(8),
+ backgroundColor: Color(0xFFFBAA75),
+ ),
+ ),
+)
+```
+
+
+
+
+
+
+
+
+
+***
+
+### Functionality
+
+These are a set of small functional customizations that allow you to fine-tune the overall experience of the widget. With these, you can change text, set custom icons, and toggle the visibility of UI elements.
+
+| **Methods** | Description | Code |
+| ------------------ | --------------------------------------------------------- | ------------------------------ |
+| **showBackButton** | Used to toggle visibility for back button in the app bar. | `setBackIconVisibility: bool?` |
+| **hideAppbar** | Used to toggle visibility for back button in the app bar. | `hideAppbar: bool?` |
+
+***
+
+
+
+```dart
+CometChatCallLogs(
+ backButton: Icon(Icons.add_alert, color: Color(0xFF6851D6)),
+)
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Below is a list of customizations along with corresponding code snippets
+
+| **Property** | **Description** | **Code** |
+| ----------------------------- | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- |
+| **Back Button** | A widget for the back button. | `backButton: Widget?` |
+| **Call Logs Request Builder** | Builder for creating call log requests. | `callLogsRequestBuilder: CallLogRequestBuilder?` |
+| **Date Pattern** | Format pattern for date display. | `datePattern: String?` |
+| **Date Separator Pattern** | Format pattern for date separator. | `dateSeparatorPattern: String?` |
+| **Empty State Text** | Text to display when there are no call logs. | `emptyStateText: String?` |
+| **Error State Text** | Text to display when there is an error. | `errorStateText: String?` |
+| **Hide Separator** | Whether to hide the separator between call logs. | `hideSeparator: bool` |
+| **Incoming Audio Call Icon** | Icon for incoming audio calls. | `incomingAudioCallIcon: Icon?` |
+| **Incoming Video Call Icon** | Icon for incoming video calls. | `incomingVideoCallIcon: Icon?` |
+| **Info Icon Url** | URL for the info icon. | `infoIconUrl: String?` |
+| **Loading Icon Url** | URL for the loading icon. | `loadingIconUrl: String?` |
+| **Missed Audio Call Icon** | Icon for missed audio calls. | `missedAudioCallIcon: Icon?` |
+| **Missed Video Call Icon** | Icon for missed video calls. | `missedVideoCallIcon: Icon?` |
+| **Outgoing Audio Call Icon** | Icon for outgoing audio calls. | `outgoingAudioCallIcon: Icon?` |
+| **Outgoing Video Call Icon** | Icon for outgoing video calls. | `outgoingVideoCallIcon: Icon?` |
+| **Set Options** | Set List of actions available on the long press of list item . | `setOptions: List? Function(Group group,CometChatGroupsController controller, BuildContext context)?` |
+| **Add Options** | adds into the current List of actions available on the long press of list item | `addOptions: List? Function(Group group,CometChatGroupsController controller, BuildContext context)?` |
+
+***
+
+### Advanced
+
+For advanced-level customization, you can set custom widgets to the widget. This lets you tailor each aspect of the widget to fit your exact needs and application aesthetics. You can create and define your widgets, layouts, and UI elements and then incorporate those into the widget.
+
+#### setOptions
+
+Defines the available actions users can perform on a call log entry, such as deleting, marking as spam, or calling back.
+
+**Use Cases:**
+
+* Provide quick call-back options.
+* Allow users to block a number.
+* Enable deleting multiple call logs.
+
+
+
+```dart
+CometChatCallLogs(
+ setOptions: (callLog, controller, context) {
+ // Set options for call log
+ },
+)
+```
+
+
+
+
+
+***
+
+#### addOptions
+
+Adds custom actions to the existing call log options.
+
+**Use Cases:**
+
+* Add favorite/star call log option.
+* Add favorite/star call log option.
+* Provide an archive feature.
+
+
+
+```dart
+CometChatCallLogs(
+ addOptions: (callLog, controller, context) {
+ // Set options for call log
+ },
+)
+```
+
+
+
+
+
+***
+
+#### ListItemView
+
+With this property, you can assign a custom ListItem to the Call Logs Widget.
+
+**Example**
+
+Here is the complete example for reference:
+
+
+
+```dart
+ CometChatCallLogs(
+ listItemView: (callLog, context) {
+ final status =
+ getCallStatus(context, callLog, CometChatUIKit.loggedInUser);
+ IconData icon = Icons.call;
+ Color? color;
+ Color? textColor;
+ if (status == "Incoming Call") {
+ icon = Icons.phone_callback_rounded;
+ color = Color(0xFF6852D6);
+ } else if (status == "Outgoing Call") {
+ icon = Icons.phone_forwarded;
+ color = Color(0xFF6852D6);
+ } else if (status == "Missed Call") {
+ icon = Icons.phone_missed;
+ color = Colors.red;
+ textColor = Colors.red;
+ }
+
+ String name = "";
+
+ if (CometChatUIKit.loggedInUser != null) {
+ if (callLog.initiator is CallUser && callLog.receiver is CallUser) {
+ CallUser callUserInitiator = callLog.initiator as CallUser;
+ CallUser callUserReceiver = callLog.receiver as CallUser;
+ if (CometChatUIKit.loggedInUser?.uid == callUserInitiator.uid) {
+ name = callUserReceiver.name ?? "";
+ } else {
+ name = callUserInitiator.name ?? "";
+ }
+ } else if (callLog.initiator is CallUser &&
+ callLog.receiver is CallGroup) {
+ CallUser callUserInitiator = callLog.initiator as CallUser;
+ CallGroup callGroupReceiver = callLog.receiver as CallGroup;
+ if (CometChatUIKit.loggedInUser?.uid == callUserInitiator.uid) {
+ name = callGroupReceiver.name ?? "";
+ } else {
+ name = callUserInitiator.name ?? "";
+ }
+ }
+ }
+
+ //TODO: import DateFormat from intl package
+ String formattedDate = DateFormat('d MMM, hh:mm a').format(
+ DateTime.fromMillisecondsSinceEpoch(
+ (callLog.initiatedAt ?? 0) * 1000));
+
+ return ListTile(
+ leading: CircleAvatar(
+ backgroundColor: Color(0xFFEDEAFA),
+ child: Icon(
+ icon,
+ color: color,
+ size: 24,
+ ),
+ ),
+ title: Text(
+ name,
+ style: TextStyle(
+ fontSize: 16,
+ fontWeight: FontWeight.w500,
+ color: textColor ?? Color(0xFF141414),
+ letterSpacing: 0),
+ ),
+ subtitle: Text(
+ status,
+ style: TextStyle(
+ color: Color(0xFF727272),
+ fontSize: 14,
+ fontWeight: FontWeight.w400,
+ letterSpacing: 0),
+ ),
+ trailing: Text(
+ formattedDate,
+ style: TextStyle(
+ color: Color(0xFF727272),
+ fontSize: 14,
+ fontWeight: FontWeight.w400,
+ letterSpacing: 0),
+ ),
+ );
+ },
+ );
+```
+
+
+
+
+```dart
+ /// Returns the call status message.
+ static String getCallStatus(
+ BuildContext context, CallLog callLog, User? loggedInUser) {
+ String callMessageText = "";
+ //check if the message is a call message and the receiver type is user
+ if (callLog.receiverType == ReceiverTypeConstants.user) {
+ CallUser initiator = callLog.initiator as CallUser;
+ //check if the call is initiated
+ if (callLog.status == CallStatusConstants.initiated) {
+ //check if the logged in user is the initiator
+ if (!isLoggedInUser(initiator, loggedInUser)) {
+ callMessageText = "Incoming Call";
+ } else {
+ callMessageText = "Outgoing Call";
+ }
+ } else if (callLog.status == CallStatusConstants.ongoing) {
+ callMessageText = "Call Accepted";
+ } else if (callLog.status == CallStatusConstants.ended) {
+ callMessageText = "Call Ended";
+ } else if (callLog.status == CallStatusConstants.unanswered) {
+ if (isLoggedInUser(initiator, loggedInUser)) {
+ callMessageText = "Call Unanswered";
+ } else {
+ callMessageText = "Missed Call";
+ }
+ } else if (callLog.status == CallStatusConstants.cancelled) {
+ if (isLoggedInUser(initiator, loggedInUser)) {
+ callMessageText = "Call Cancelled";
+ } else {
+ callMessageText = "Missed Call";
+ }
+ } else if (callLog.status == CallStatusConstants.rejected) {
+ if (isLoggedInUser(initiator, loggedInUser)) {
+ callMessageText = "Call Rejected";
+ } else {
+ callMessageText = "Missed Call";
+ }
+ } else if (callLog.status == CallStatusConstants.busy) {
+ if (isLoggedInUser(initiator, loggedInUser)) {
+ callMessageText = "Call Rejected";
+ } else {
+ callMessageText = "Missed Call";
+ }
+ }
+ }
+ return callMessageText;
+ }
+
+ /// Returns true if the call is initiated by the logged in user.
+ static bool isLoggedInUser(CallUser? initiator, User? loggedInUser) {
+ if (initiator == null || loggedInUser == null) {
+ return false;
+ } else {
+ return initiator.uid == loggedInUser.uid;
+ }
+ }
+```
+
+
+
+
+
+
+
+
+
+***
+
+#### TitleView
+
+Allows setting a custom title view, typically used for the caller’s name or number.
+
+**Use Cases:**
+
+* Display caller’s full name.
+* Show a business label for saved contacts.
+* Use bold text for unknown numbers.
+
+***
+
+#### LeadingView
+
+Customizes the leading view, usually the caller’s avatar or profile picture.
+
+**Use Cases:**
+
+* Display a profile picture.
+* Show a call type icon (missed, received, dialed).
+* Indicate call status (e.g., missed calls in red).
+
+***
+
+#### SubtitleView
+
+You can customize the subtitle widget for each call logs item to meet your requirements
+
+**Example**
+
+Here is the complete example for reference:
+
+
+
+```dart
+CometChatCallLogs(
+ subTitleView: (callLog, context) {
+ return Row(
+ children: [
+ getCallIcon(context, callLog, CometChatUIKit.loggedInUser),
+ Text(
+ getCallStatus(context, callLog, CometChatUIKit.loggedInUser),
+ style: TextStyle(
+ color: Color(0xFF727272),
+ fontSize: 14,
+ fontWeight: FontWeight.w400,
+ letterSpacing: 0),
+ )
+ ],
+ );
+ },
+ );
+```
+
+
+
+
+```dart
+ /// [getCallIcon] Return call status icon
+ static Widget getCallIcon(
+ BuildContext context, CallLog callLog, User? loggedInUser) {
+ bool isInitiatedByUser =
+ CallUtils.callLogLoggedInUser(callLog, loggedInUser);
+
+ // Define default icons if not provided
+ Widget incoming = Icon(
+ Icons.call_received_outlined,
+ color: Colors.red,
+ size: 16,
+ );
+
+ Widget outgoing = Icon(
+ Icons.call_made_outlined,
+ color: Color(0xFF09C26F),
+ size: 16,
+ );
+
+ Widget missed = Icon(
+ Icons.call_received_outlined,
+ color: Colors.red,
+ size: 16,
+ );
+
+ // Helper function to select icon based on initiator and call type
+ Widget selectIcon(bool isInitiatedByUser) {
+ return isInitiatedByUser ? outgoing : incoming;
+ }
+
+ // Switch on call status to determine the appropriate icon
+ switch (callLog.status) {
+ case CallStatusConstants.initiated:
+ case CallStatusConstants.ongoing:
+ case CallStatusConstants.ended:
+ return selectIcon(isInitiatedByUser);
+
+ case CallStatusConstants.unanswered:
+ case CallStatusConstants.cancelled:
+ case CallStatusConstants.rejected:
+ case CallStatusConstants.busy:
+ return isInitiatedByUser ? outgoing : missed;
+
+ default:
+ return const SizedBox(); // Return empty widget for unknown statuses
+ }
+ }
+```
+
+
+
+
+```dart
+ /// Returns the call status message.
+ static String getCallStatus(
+ BuildContext context, CallLog callLog, User? loggedInUser) {
+ String callMessageText = "";
+ //check if the message is a call message and the receiver type is user
+ if (callLog.receiverType == ReceiverTypeConstants.user) {
+ CallUser initiator = callLog.initiator as CallUser;
+ //check if the call is initiated
+ if (callLog.status == CallStatusConstants.initiated) {
+ //check if the logged in user is the initiator
+ if (!isLoggedInUser(initiator, loggedInUser)) {
+ callMessageText = "Incoming Call";
+ } else {
+ callMessageText = "Outgoing Call";
+ }
+ } else if (callLog.status == CallStatusConstants.ongoing) {
+ callMessageText = "Call Accepted";
+ } else if (callLog.status == CallStatusConstants.ended) {
+ callMessageText = "Call Ended";
+ } else if (callLog.status == CallStatusConstants.unanswered) {
+ if (isLoggedInUser(initiator, loggedInUser)) {
+ callMessageText = "Call Unanswered";
+ } else {
+ callMessageText = "Missed Call";
+ }
+ } else if (callLog.status == CallStatusConstants.cancelled) {
+ if (isLoggedInUser(initiator, loggedInUser)) {
+ callMessageText = "Call Cancelled";
+ } else {
+ callMessageText = "Missed Call";
+ }
+ } else if (callLog.status == CallStatusConstants.rejected) {
+ if (isLoggedInUser(initiator, loggedInUser)) {
+ callMessageText = "Call Rejected";
+ } else {
+ callMessageText = "Missed Call";
+ }
+ } else if (callLog.status == CallStatusConstants.busy) {
+ if (isLoggedInUser(initiator, loggedInUser)) {
+ callMessageText = "Call Rejected";
+ } else {
+ callMessageText = "Missed Call";
+ }
+ }
+ }
+ return callMessageText;
+ }
+
+ /// Returns true if the call is initiated by the logged in user.
+ static bool isLoggedInUser(CallUser? initiator, User? loggedInUser) {
+ if (initiator == null || loggedInUser == null) {
+ return false;
+ } else {
+ return initiator.uid == loggedInUser.uid;
+ }
+ }
+```
+
+
+
+
+
+
+
+
+
+***
+
+#### TrailingView
+
+You can customize the tail widget for each call logs item to meet your requirements
+
+**Example**
+
+Here is the complete example for reference:
+
+
+
+```dart
+CometChatCallLogs(
+ trailingView: (context, callLog) {
+ String formattedDate = DateFormat('d MMM, hh:mm a').format(
+ DateTime.fromMillisecondsSinceEpoch(
+ (callLog.initiatedAt ?? 0) * 1000));
+ return Text(
+ formattedDate,
+ style: TextStyle(
+ color: Color(0xFF727272),
+ fontSize: 14,
+ fontWeight: FontWeight.w400,
+ letterSpacing: 0),
+ );
+ },
+)
+```
+
+
+
+
+
+
+
+
+
+***
+
+## Configurations
+
+[Configurations](/ui-kit/flutter/v5/components-overview#configurations) offer the ability to customize the properties of each widget within a Composite Widget.
+
+`CometChatCallLogs` has `CometChatOutgoingCall` widget. Hence, each of these widgets will have its individual \`Configuration\`\`.
+
+* `Configurations` expose properties that are available in its individual widgets.
+
+#### Outgoing Call
+
+You can customize the properties of the OutGoing Call widget by making use of the `OutgoingCallConfiguration`. You can accomplish this by employing the `outgoingCallConfiguration` props as demonstrated below:
+
+**Example**
+
+Here is the complete example for reference:
+
+
+
+```dart
+CometChatCallLogs(
+ outgoingCallConfiguration: OutgoingCallConfiguration(
+ subtitle: "Outgoing Call",
+ outgoingCallStyle: OutgoingCallStyle(
+ background: Color(0xFFE4EBF5),
+ )
+ ),
+)
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+All exposed properties of `OutgoingCallConfiguration` can be found under [OutGoing Call](/ui-kit/flutter/v5/outgoing-call#functionality). Properties marked with the 🛑 symbol are not accessible within the Configuration Object.
+
+***
diff --git a/ui-kit/flutter/calling-integration.mdx b/ui-kit/flutter/v5/calling-integration.mdx
similarity index 95%
rename from ui-kit/flutter/calling-integration.mdx
rename to ui-kit/flutter/v5/calling-integration.mdx
index 13b3dbf1d..2f07abddd 100644
--- a/ui-kit/flutter/calling-integration.mdx
+++ b/ui-kit/flutter/v5/calling-integration.mdx
@@ -8,7 +8,7 @@ description: "Add voice and video calling to your Flutter UI Kit application"
This guide walks you through adding voice and video calling capabilities to your Flutter application using the CometChat UI Kit.
-Make sure you've completed the [Getting Started](/ui-kit/flutter/getting-started) guide before proceeding.
+Make sure you've completed the [Getting Started](/ui-kit/flutter/v5/getting-started) guide before proceeding.
## Step 1: Add Dependency
@@ -81,7 +81,7 @@ CometChatUIKit.login(uid, onSuccess: (s) {
## Verify Integration
-After adding the dependency, the Flutter UI Kit will automatically detect it and activate calling features. You will see [CallButtons](/ui-kit/flutter/call-buttons) rendered in the [MessageHeader](/ui-kit/flutter/message-header) widget.
+After adding the dependency, the Flutter UI Kit will automatically detect it and activate calling features. You will see [CallButtons](/ui-kit/flutter/v5/call-buttons) rendered in the [MessageHeader](/ui-kit/flutter/v5/message-header) widget.
diff --git a/ui-kit/flutter/v5/color-resources.mdx b/ui-kit/flutter/v5/color-resources.mdx
new file mode 100644
index 000000000..4ec539b47
--- /dev/null
+++ b/ui-kit/flutter/v5/color-resources.mdx
@@ -0,0 +1,223 @@
+---
+title: "Color Resources"
+sidebarTitle: "Color Resources"
+description: "Complete reference for CometChatColorPalette tokens in Flutter UI Kit."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Class | `CometChatColorPalette` |
+| Usage | `ThemeData(extensions: [CometChatColorPalette(...)])` |
+| Categories | Primary, Neutral, Alert, Text, Icon, Border, Background, Button, Shimmer |
+| Light mode | Use light color values |
+| Dark mode | Use dark color values |
+| Source | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/shared_uikit/lib/src/theme/colors) |
+
+
+
+`CometChatColorPalette` controls all colors in the UI Kit. Apply it via `ThemeData.extensions`.
+
+---
+
+## Complete Token Reference
+
+### Primary Colors
+
+| Token | Description |
+| --- | --- |
+| `primary` | Main accent color |
+| `extendedPrimary50` | 96% lighter (light) / 80% darker (dark) |
+| `extendedPrimary100` | 88% lighter (light) / 72% darker (dark) |
+| `extendedPrimary200` | 77% lighter (light) / 64% darker (dark) |
+| `extendedPrimary300` | 66% lighter (light) / 56% darker (dark) |
+| `extendedPrimary400` | 55% lighter (light) / 48% darker (dark) |
+| `extendedPrimary500` | 44% lighter (light) / 40% darker (dark) |
+| `extendedPrimary600` | 33% lighter (light) / 32% darker (dark) |
+| `extendedPrimary700` | 22% lighter (light) / 24% darker (dark) |
+| `extendedPrimary800` | 11% lighter (light) / 16% darker (dark) |
+| `extendedPrimary900` | 11% lighter (light) / 8% darker (dark) |
+
+### Neutral Colors
+
+| Token | Description |
+| --- | --- |
+| `neutral50` - `neutral900` | Surface and background shades (50, 100, 200, 300, 400, 500, 600, 700, 800, 900) |
+
+### Alert Colors
+
+| Token | Description |
+| --- | --- |
+| `info` | Information indicator |
+| `warning` | Warning indicator |
+| `error` | Error indicator |
+| `success` | Success indicator |
+| `error100` | Light/dark mode error shade |
+
+### Text Colors
+
+| Token | Description |
+| --- | --- |
+| `textPrimary` | Primary text |
+| `textSecondary` | Secondary text |
+| `textTertiary` | Tertiary text |
+| `textDisabled` | Disabled text |
+| `textWhite` | White text |
+| `textHighlight` | Highlighted text |
+
+### Icon Colors
+
+| Token | Description |
+| --- | --- |
+| `iconPrimary` | Primary icon |
+| `iconSecondary` | Secondary icon |
+| `iconTertiary` | Tertiary icon |
+| `iconWhite` | White icon |
+| `iconHighlight` | Highlighted icon |
+
+### Border Colors
+
+| Token | Description |
+| --- | --- |
+| `borderLight` | Light border |
+| `borderDefault` | Default border |
+| `borderDark` | Dark border |
+| `borderHighlight` | Highlighted border |
+
+### Background Colors
+
+| Token | Description |
+| --- | --- |
+| `background1` | Primary background |
+| `background2` | Secondary background |
+| `background3` | Tertiary background |
+| `background4` | Quaternary background |
+
+### Button Colors
+
+| Token | Description |
+| --- | --- |
+| `buttonBackground` | Primary button background |
+| `secondaryButtonBackground` | Secondary button background |
+| `buttonIconColor` | Primary button icon |
+| `buttonText` | Primary button text |
+| `secondaryButtonIcon` | Secondary button icon |
+| `secondaryButtonText` | Secondary button text |
+
+### Other
+
+| Token | Description |
+| --- | --- |
+| `shimmerBackground` | Shimmer effect background |
+| `shimmerGradient` | Shimmer effect gradient |
+| `messageSeen` | Read receipt indicator |
+| `white` | White color |
+| `black` | Black color |
+| `transparent` | Transparent color |
+
+---
+
+## Light Mode
+
+
+
+
+
+
+
+```dart
+ThemeData(
+ extensions: [
+ CometChatColorPalette(
+ primary: Color(0xFF6852D6),
+ textPrimary: Color(0xFF141414),
+ textSecondary: Color(0xFF727272),
+ background1: Color(0xFFFFFFFF),
+ borderLight: Color(0xFFF5F5F5),
+ borderDark: Color(0xFFDCDCDC),
+ iconSecondary: Color(0xFFA1A1A1),
+ iconHighlight: Color(0xFF6852D6),
+ success: Color(0xFF09C26F),
+ warning: Color(0xFFFAAB00),
+ extendedPrimary500: Color(0xFFAA9EE8),
+ messageSeen: Color(0xFF56E8A7),
+ neutral300: Color(0xFFE8E8E8),
+ neutral600: Color(0xFF727272),
+ neutral900: Color(0xFF141414),
+ ),
+ ],
+)
+```
+
+
+
+---
+
+## Dark Mode
+
+
+
+
+
+
+
+```dart
+ThemeData(
+ extensions: [
+ CometChatColorPalette(
+ primary: Color(0xFF6852D6),
+ textPrimary: Color(0xFFFFFFFF),
+ textSecondary: Color(0xFF989898),
+ background1: Color(0xFF1A1A1A),
+ borderLight: Color(0xFF272727),
+ iconSecondary: Color(0xFF858585),
+ iconHighlight: Color(0xFF6852D6),
+ success: Color(0xFF0B9F5D),
+ warning: Color(0xFFD08D04),
+ extendedPrimary500: Color(0xFF3E3180),
+ messageSeen: Color(0xFF56E8A7),
+ neutral300: Color(0xFF383838),
+ neutral600: Color(0xFF989898),
+ neutral900: Color(0xFFFFFFFF),
+ ),
+ ],
+)
+```
+
+
+
+---
+
+## Custom Brand Colors
+
+
+
+
+
+
+
+```dart
+ThemeData(
+ extensions: [
+ CometChatColorPalette(
+ primary: Color(0xFFF76808),
+ iconHighlight: Color(0xFFF76808),
+ extendedPrimary500: Color(0xFFFBAA75),
+ textPrimary: Color(0xFF141414),
+ textSecondary: Color(0xFF727272),
+ background1: Color(0xFFFFFFFF),
+ borderLight: Color(0xFFF5F5F5),
+ borderDark: Color(0xFFDCDCDC),
+ success: Color(0xFF09C26F),
+ warning: Color(0xFFFAAB00),
+ messageSeen: Color(0xFF56E8A7),
+ neutral300: Color(0xFFE8E8E8),
+ neutral600: Color(0xFF727272),
+ neutral900: Color(0xFF141414),
+ ),
+ ],
+)
+```
+
+
diff --git a/ui-kit/flutter/compact-message-composer.mdx b/ui-kit/flutter/v5/compact-message-composer.mdx
similarity index 98%
rename from ui-kit/flutter/compact-message-composer.mdx
rename to ui-kit/flutter/v5/compact-message-composer.mdx
index 4ea60cb7b..12b3dd181 100644
--- a/ui-kit/flutter/compact-message-composer.mdx
+++ b/ui-kit/flutter/v5/compact-message-composer.mdx
@@ -101,7 +101,7 @@ description: "A streamlined, pill-shaped message composer with inline rich text
## Where It Fits
-`CometChatCompactMessageComposer` is a [Widget](/ui-kit/flutter/components-overview#components) that provides a streamlined, modern messaging input experience. It features a pill-shaped compose box with an inline rich text formatting toolbar, voice recording, attachments, mentions, and auxiliary actions like stickers.
+`CometChatCompactMessageComposer` is a [Widget](/ui-kit/flutter/v5/components-overview#components) that provides a streamlined, modern messaging input experience. It features a pill-shaped compose box with an inline rich text formatting toolbar, voice recording, attachments, mentions, and auxiliary actions like stickers.
Compared to `CometChatMessageComposer`, the compact variant offers:
- A rounded, pill-shaped input field
@@ -527,7 +527,7 @@ CometChatCompactMessageComposer(
### Text Formatters
-Assigns the list of text formatters. To configure the existing Mentions look and feel check out [CometChatMentionsFormatter](/ui-kit/flutter/mentions-formatter-guide).
+Assigns the list of text formatters. To configure the existing Mentions look and feel check out [CometChatMentionsFormatter](/ui-kit/flutter/v5/mentions-formatter-guide).
@@ -657,16 +657,16 @@ CometChatCompactMessageComposer(
| `recorderSendButtonIcon` | `Widget?` | - | Custom recorder send button icon |
-
+
The standard message composer component
-
+
Display user or group details in the header
-
+
Display messages in a conversation
-
+
Configure mentions look and feel
diff --git a/ui-kit/flutter/v5/component-styling.mdx b/ui-kit/flutter/v5/component-styling.mdx
new file mode 100644
index 000000000..c3fd79f62
--- /dev/null
+++ b/ui-kit/flutter/v5/component-styling.mdx
@@ -0,0 +1,490 @@
+---
+title: "Component Styling"
+sidebarTitle: "Component Styling"
+description: "Style individual CometChat Flutter UI Kit components using ThemeExtensions."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Method | Add component style classes to `ThemeData.extensions` |
+| Components | Conversations, MessageList, MessageComposer, MessageHeader, Users, Groups, GroupMembers |
+| Base components | Avatar, Badge, StatusIndicator, Receipts, Reactions, ReactionList, MediaRecorder |
+| AI components | ConversationStarter, ConversationSummary, SmartReplies, AIOptionSheet, AIAssistantChatHistory |
+| Option sheets | MessageOptionSheet, AttachmentOptionSheet, AIOptionSheet |
+| Pattern | `CometChatStyle` classes |
+| Source | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/chat_uikit) |
+
+
+
+Style individual components by adding their style classes to `ThemeData.extensions`.
+
+---
+
+## Main Components
+
+### Conversations
+
+
+
+
+
+
+
+```dart
+ThemeData(
+ extensions: [
+ CometChatConversationsStyle(
+ avatarStyle: CometChatAvatarStyle(
+ borderRadius: BorderRadius.circular(8),
+ backgroundColor: Color(0xFFFBAA75),
+ ),
+ badgeStyle: CometChatBadgeStyle(
+ backgroundColor: Color(0xFFF76808),
+ ),
+ ),
+ ],
+)
+```
+
+
+
+### Message List
+
+
+
+
+
+
+
+```dart
+ThemeData(
+ extensions: [
+ CometChatMessageListStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ ),
+ ),
+ ],
+)
+```
+
+
+
+### Message Composer
+
+
+
+
+
+
+
+```dart
+ThemeData(
+ extensions: [
+ CometChatMessageComposerStyle(
+ sendButtonIconBackgroundColor: Color(0xFFF76808),
+ secondaryButtonIconColor: Color(0xFFF76808),
+ auxiliaryButtonIconColor: Color(0xFFF76808),
+ ),
+ ],
+)
+```
+
+
+
+### Message Header
+
+
+
+
+
+
+
+```dart
+ThemeData(
+ extensions: [
+ CometChatMessageHeaderStyle(
+ avatarStyle: CometChatAvatarStyle(
+ backgroundColor: Color(0xFFFBAA75),
+ borderRadius: BorderRadius.circular(6.67),
+ ),
+ callButtonsStyle: CometChatCallButtonsStyle(
+ voiceCallIconColor: Color(0xFFF76808),
+ videoCallIconColor: Color(0xFFF76808),
+ ),
+ ),
+ ],
+)
+```
+
+
+
+### Users
+
+
+
+
+
+
+
+```dart
+ThemeData(
+ extensions: [
+ CometChatUsersStyle(
+ avatarStyle: CometChatAvatarStyle(
+ borderRadius: BorderRadius.circular(8),
+ backgroundColor: Color(0xFFFBAA75),
+ ),
+ titleTextColor: Color(0xFFF76808),
+ separatorColor: Color(0xFFF76808),
+ backgroundColor: Color(0xFFFFF9F5),
+ ),
+ ],
+)
+```
+
+
+
+### Groups
+
+
+
+
+
+
+
+```dart
+ThemeData(
+ extensions: [
+ CometChatGroupsStyle(
+ avatarStyle: CometChatAvatarStyle(
+ borderRadius: BorderRadius.circular(8),
+ backgroundColor: Color(0xFFFBAA75),
+ ),
+ titleTextColor: Color(0xFFF76808),
+ separatorColor: Color(0xFFF76808),
+ backgroundColor: Color(0xFFFFF9F5),
+ ),
+ ],
+)
+```
+
+
+
+### Group Members
+
+
+
+```dart
+ThemeData(
+ extensions: [
+ CometChatGroupMembersStyle(
+ avatarStyle: CometChatAvatarStyle(
+ borderRadius: BorderRadius.circular(8),
+ backgroundColor: Color(0xFFFBAA75),
+ ),
+ titleStyle: TextStyle(color: Color(0xFFF76808)),
+ separatorColor: Color(0xFFF76808),
+ ownerMemberScopeBackgroundColor: Color(0xFFF76808),
+ adminMemberScopeBackgroundColor: Color(0xFFFEEDE1),
+ adminMemberScopeBorder: Border.all(color: Color(0xFFF76808)),
+ adminMemberScopeTextColor: Color(0xFFF76808),
+ moderatorMemberScopeBackgroundColor: Color(0xFFFEEDE1),
+ moderatorMemberScopeTextColor: Color(0xFFF76808),
+ backIconColor: Color(0xFFF76808),
+ ),
+ ],
+)
+```
+
+
+
+---
+
+## Base Components
+
+### Avatar
+
+
+
+
+
+
+
+```dart
+CometChatAvatarStyle(
+ borderRadius: BorderRadius.circular(8),
+ backgroundColor: Color(0xFFFBAA75),
+)
+```
+
+
+
+### Badge
+
+
+
+
+
+
+
+```dart
+CometChatBadgeStyle(
+ borderRadius: BorderRadius.circular(4),
+ backgroundColor: Color(0xFFF44649),
+)
+```
+
+
+
+### Status Indicator
+
+
+
+
+
+
+
+```dart
+CometChatStatusIndicatorStyle(
+ backgroundColor: Color(0xFFFFAB00),
+ borderRadius: BorderRadius.circular(2),
+)
+```
+
+
+
+### Receipts
+
+
+
+
+
+
+
+```dart
+CometChatMessageReceiptStyle(
+ readIconColor: Color(0xFFFFAB00),
+)
+```
+
+
+
+### Reactions
+
+
+
+
+
+
+
+```dart
+CometChatReactionsStyle(
+ borderRadius: BorderRadius.circular(8),
+)
+```
+
+
+
+### Reaction List
+
+
+
+```dart
+CometChatReactionListStyle(
+ activeTabTextColor: Color(0xFFF76808),
+ activeTabIndicatorColor: Color(0xFFF76808),
+)
+```
+
+
+
+### Media Recorder
+
+
+
+```dart
+CometChatMediaRecorderStyle(
+ recordIndicatorBackgroundColor: Color(0xFFF44649),
+ recordIndicatorBorderRadius: BorderRadius.circular(20),
+ pauseButtonBorderRadius: BorderRadius.circular(8),
+ deleteButtonBorderRadius: BorderRadius.circular(8),
+ stopButtonBorderRadius: BorderRadius.circular(8),
+)
+```
+
+
+
+---
+
+## Option Sheets
+
+### Message Option Sheet
+
+
+
+```dart
+ThemeData(
+ extensions: [
+ CometChatMessageOptionSheetStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ iconColor: Color(0xFFF76808),
+ ),
+ ],
+)
+```
+
+
+
+### Attachment Option Sheet
+
+
+
+```dart
+ThemeData(
+ extensions: [
+ CometChatAttachmentOptionSheetStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ iconColor: Color(0xFFF76808),
+ ),
+ ],
+)
+```
+
+
+
+### Message Information
+
+
+
+```dart
+ThemeData(
+ extensions: [
+ CometChatOutgoingMessageBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ ),
+ CometChatMessageInformationStyle(
+ backgroundHighLightColor: Color(0xFFFEEDE1),
+ messageReceiptStyle: CometChatMessageReceiptStyle(
+ readIconColor: Color(0xFFF76808),
+ ),
+ ),
+ ],
+)
+```
+
+
+
+### Mentions
+
+
+
+```dart
+ThemeData(
+ extensions: [
+ CometChatMentionsStyle(
+ mentionSelfTextBackgroundColor: Color(0xFFF76808),
+ mentionTextBackgroundColor: Colors.white,
+ mentionTextColor: Colors.black,
+ mentionSelfTextColor: Colors.white,
+ ),
+ ],
+)
+```
+
+
+
+---
+
+## AI Components
+
+### Conversation Starter
+
+
+
+
+
+
+
+```dart
+CometChatAIConversationStarterStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ border: Border.all(color: Color(0xFFFBBB90)),
+)
+```
+
+
+
+### Smart Replies
+
+
+
+
+
+
+
+```dart
+CometChatAISmartRepliesStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ titleStyle: TextStyle(color: Color(0xFFF76808)),
+ itemBackgroundColor: Color(0xFFFFF9F5),
+ itemBorder: Border.all(color: Color(0xFFFBBB90)),
+)
+```
+
+
+
+### Conversation Summary
+
+
+
+```dart
+CometChatAIConversationSummaryStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ titleStyle: TextStyle(color: Color(0xFFF76808)),
+)
+```
+
+
+
+### AI Option Sheet
+
+
+
+```dart
+CometChatAiOptionSheetStyle(
+ backgroundColor: Color(0xFFFFF9F5),
+ iconColor: Color(0xFFF76808),
+)
+```
+
+
+
+### AI Assistant Chat History
+
+
+
+```dart
+final ccColor = CometChatThemeHelper.getColorPalette(context);
+
+CometChatAIAssistantChatHistory(
+ user: user,
+ style: CometChatAIAssistantChatHistoryStyle(
+ backgroundColor: Color(0xFFFFFAF6),
+ headerBackgroundColor: Color(0xFFFFFAF6),
+ headerTitleTextColor: ccColor.textPrimary,
+ newChatIconColor: ccColor.iconSecondary,
+ newChatTextColor: ccColor.textPrimary,
+ dateSeparatorStyle: CometChatDateStyle(
+ textColor: ccColor.textTertiary,
+ backgroundColor: Color(0xFFFFFAF6),
+ ),
+ itemTextColor: ccColor.textPrimary,
+ ),
+)
+```
+
+
diff --git a/ui-kit/flutter/v5/components-overview.mdx b/ui-kit/flutter/v5/components-overview.mdx
new file mode 100644
index 000000000..87c745dd6
--- /dev/null
+++ b/ui-kit/flutter/v5/components-overview.mdx
@@ -0,0 +1,257 @@
+---
+title: "Overview"
+description: "Browse all prebuilt UI components in the CometChat Flutter UI Kit — conversations, messages, users, groups, search, and AI."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_chat_uikit` |
+| Required setup | `CometChatUIKit.init()` + `CometChatUIKit.login()` before rendering any component |
+| Callback actions | `on: (param) { }` |
+| Data filtering | `RequestBuilder: RequestBuilder()` |
+| Toggle features | `hide: true` or `show: true` |
+| Custom rendering | `View: (context, entity) => Widget` |
+| Style overrides | `style: CometChatStyle(...)` |
+
+
+
+## Architecture
+
+The UI Kit is a set of independent widgets that compose into chat layouts. A typical two-panel layout uses four core components:
+
+- **CometChatConversations** — sidebar listing recent conversations (users and groups)
+- **CometChatMessageHeader** — toolbar showing avatar, name, online status, and typing indicator
+- **CometChatMessageList** — scrollable message feed with reactions, receipts, and threads
+- **CometChatMessageComposer** — rich text input with attachments, mentions, and voice notes
+
+**Data flow**: selecting a conversation in CometChatConversations yields a `User` or `Group` object. That object is passed as a prop (`user` or `group`) to CometChatMessageHeader, CometChatMessageList, and CometChatMessageComposer. The message components use the SDK internally — CometChatMessageComposer sends messages, CometChatMessageList receives them via real-time listeners.
+
+```mermaid
+flowchart LR
+ subgraph Sidebar
+ A[CometChatConversations]
+ end
+
+ subgraph "Chat Panel"
+ B[CometChatMessageHeader]
+ C[CometChatMessageList]
+ D[CometChatMessageComposer]
+ end
+
+ subgraph SDK
+ E[CometChat SDK]
+ end
+
+ A -->|"User/Group object"| B
+ A -->|"User/Group object"| C
+ A -->|"User/Group object"| D
+ D -->|"sendMessage()"| E
+ E -->|"Real-time listeners"| C
+```
+
+Components communicate through a publish/subscribe event bus (`CometChatMessageEvents`, `CometChatConversationEvents`, `CometChatGroupEvents`, etc.). A component emits events that other components or application code can subscribe to without direct references. See [Events](/ui-kit/flutter/v5/events) for the full list.
+
+```mermaid
+flowchart TB
+ subgraph "Event Bus"
+ E1[CometChatMessageEvents]
+ E2[CometChatConversationEvents]
+ E3[CometChatGroupEvents]
+ end
+
+ C1[Component A] -->|"emit"| E1
+ E1 -->|"subscribe"| C2[Component B]
+ E1 -->|"subscribe"| C3[App Code]
+
+ C4[Component C] -->|"emit"| E2
+ E2 -->|"subscribe"| C5[Component D]
+```
+
+Each component accepts callback props (`on`), view slot props (`View`) for replacing UI sections, `RequestBuilder` props for data filtering, and style class overrides via `CometChatStyle`.
+
+---
+
+## Type of Widget
+
+UI Widgets based on behavior and functionality can be categorized into three types: Base Widget, Widget, and Composite Widget.
+
+### Base Widget
+
+Base Widgets form the building blocks of your app's user interface (UI). They focus solely on presenting visual elements based on input data, without handling any business logic. These widgets provide the foundational appearance and behavior for your UI.
+
+### Widget
+
+Widgets build upon Base Widgets by incorporating business logic. They not only render UI elements but also manage data loading, execute specific actions, and respond to events. This combination of visual presentation and functional capabilities makes Widgets essential for creating dynamic and interactive UIs.
+
+### Composite Widget
+
+Composite Widgets are advanced UI elements that combine multiple Widgets or other Composite Widgets to achieve complex functionality. By layering widgets together, Composite Widgets offer a sophisticated and flexible approach to designing UIs. They enable diverse functionalities and interactions, making them versatile tools for creating rich user experiences.
+
+---
+
+## Component Catalog
+
+All components are imported from `cometchat_chat_uikit`.
+
+### Conversations and Lists
+
+| Component | Purpose | Key Props | Page |
+| --- | --- | --- | --- |
+| CometChatConversations | Scrollable list of recent conversations | `conversationsRequestBuilder`, `onItemTap`, `onError` | [Conversations](/ui-kit/flutter/v5/conversations) |
+| CometChatUsers | Scrollable list of users | `usersRequestBuilder`, `onItemTap`, `onError` | [Users](/ui-kit/flutter/v5/users) |
+| CometChatGroups | Scrollable list of groups | `groupsRequestBuilder`, `onItemTap`, `onError` | [Groups](/ui-kit/flutter/v5/groups) |
+| CometChatGroupMembers | Scrollable list of group members | `group`, `groupMemberRequestBuilder`, `onItemTap` | [Group Members](/ui-kit/flutter/v5/group-members) |
+
+### Messages
+
+| Component | Purpose | Key Props | Page |
+| --- | --- | --- | --- |
+| CometChatMessageHeader | Toolbar with avatar, name, status, typing indicator | `user`, `group`, `backButton`, `hideBackButton` | [Message Header](/ui-kit/flutter/v5/message-header) |
+| CometChatMessageList | Scrollable message list with reactions, receipts, threads | `user`, `group`, `messagesRequestBuilder`, `scrollToBottomOnNewMessages` | [Message List](/ui-kit/flutter/v5/message-list) |
+| CometChatMessageComposer | Rich text input with attachments, mentions, voice notes | `user`, `group`, `onSendButtonTap`, `placeholderText` | [Message Composer](/ui-kit/flutter/v5/message-composer) |
+| CometChatCompactMessageComposer | Compact input with rich text formatting, inline voice recorder, attachments | `user`, `group`, `enterKeyBehavior`, `enableRichTextFormatting` | [Compact Message Composer](/ui-kit/flutter/v5/compact-message-composer) |
+| CometChatMessageTemplate | Pre-defined structure for custom message bubbles | `type`, `category`, `contentView`, `headerView`, `footerView` | [Message Template](/ui-kit/flutter/v5/message-template) |
+| CometChatThreadedHeader | Parent message bubble and reply count for threaded view | `parentMessage`, `onClose`, `hideReceipts` | [Threaded Header](/ui-kit/flutter/v5/threaded-messages-header) |
+
+### Search and AI
+
+| Component | Purpose | Key Props | Page |
+| --- | --- | --- | --- |
+| CometChatSearch | Real-time search input field | `onSearch`, `placeholder`, `style` | [Search](/ui-kit/flutter/v5/search) |
+| CometChatAIAssistantChatHistory | AI assistant conversation history display | `user`, `group`, `style` | [AI Assistant Chat History](/ui-kit/flutter/v5/ai-assistant-chat-history) |
+
+### Calling
+
+| Component | Purpose | Key Props | Page |
+| --- | --- | --- | --- |
+| CometChatCallButtons | Voice and video call initiation buttons | `user`, `group`, `hideVoiceCallButton`, `hideVideoCallButton` | [Call Buttons](/ui-kit/flutter/v5/call-buttons) |
+| CometChatIncomingCall | Incoming call notification with accept/decline | `call`, `onAccept`, `onDecline` | [Incoming Call](/ui-kit/flutter/v5/incoming-call) |
+| CometChatOutgoingCall | Outgoing call screen with cancel control | `call`, `user`, `onCancelled` | [Outgoing Call](/ui-kit/flutter/v5/outgoing-call) |
+| CometChatCallLogs | Scrollable list of call history | `callLogsRequestBuilder`, `onItemClick` | [Call Logs](/ui-kit/flutter/v5/call-logs) |
+
+---
+
+## Component API Pattern
+
+All components share a consistent API surface.
+
+### Actions
+
+Actions control component behavior. They split into two categories:
+
+**Predefined Actions** are built into the component and execute automatically on user interaction (e.g., tapping send dispatches the message). No configuration needed.
+
+**User-Defined Actions** are callback props that fire on specific events. Override them to customize behavior:
+
+
+
+```dart
+CometChatMessageList(
+ user: chatUser,
+ onThreadRepliesClick: (message, context, {bubbleView}) {
+ openThreadPanel(message);
+ },
+ onError: (error) {
+ logError(error);
+ },
+)
+```
+
+
+
+### Events
+
+Events enable decoupled communication between components. A component emits events that other parts of the application can subscribe to without direct references.
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+// Subscribe to message sent events
+CometChatMessageEvents.onMessageSent.listen((message) {
+ // react to sent message
+});
+```
+
+
+
+Each component page documents its emitted events in the Events section.
+
+### Filters
+
+List-based components accept `RequestBuilder` props to control which data loads:
+
+
+
+```dart
+CometChatMessageList(
+ user: chatUser,
+ messagesRequestBuilder: MessagesRequestBuilder()
+ ..limit = 20,
+)
+```
+
+
+
+### Custom View Slots
+
+Components expose named view slots to replace sections of the default UI:
+
+
+
+```dart
+CometChatMessageHeader(
+ user: chatUser,
+ titleView: (context, user, group) => CustomTitle(),
+ subtitleView: (context, user, group) => CustomSubtitle(),
+ leadingView: (context, user, group) => CustomAvatar(),
+)
+```
+
+
+
+### Styling
+
+Every component accepts a style class for customization:
+
+
+
+```dart
+CometChatMessageList(
+ user: chatUser,
+ style: CometChatMessageListStyle(
+ backgroundColor: Colors.white,
+ borderRadius: 8,
+ ),
+)
+```
+
+
+
+---
+
+## Configurations
+
+Configurations offer the ability to customize the properties of each individual component within a Composite Component. If a Composite Component includes multiple Widgets, each of these Widgets will have its own set of properties that can be configured. This means multiple sets of configurations are available, one for each constituent component. This allows for fine-tuned customization of the Composite Component, enabling you to tailor its behavior and appearance to match specific requirements in a granular manner.
+
+---
+
+## Next Steps
+
+
+
+ Set up the Flutter UI Kit in your project
+
+
+ Customize colors, fonts, and styles
+
+
+ Add-on features like polls, stickers, and translation
+
+
+ Task-oriented tutorials for common patterns
+
+
diff --git a/ui-kit/flutter/v5/conversations.mdx b/ui-kit/flutter/v5/conversations.mdx
new file mode 100644
index 000000000..f299e346c
--- /dev/null
+++ b/ui-kit/flutter/v5/conversations.mdx
@@ -0,0 +1,2165 @@
+---
+title: "Conversations"
+description: "Scrollable list of recent one-on-one and group conversations for the logged-in user."
+---
+
+
+```json
+{
+ "component": "CometChatConversations",
+ "package": "cometchat_chat_uikit",
+ "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
+ "description": "Scrollable list of recent one-on-one and group conversations for the logged-in user.",
+ "primaryOutput": {
+ "prop": "onItemTap",
+ "type": "Function(Conversation conversation)"
+ },
+ "props": {
+ "data": {
+ "conversationsRequestBuilder": {
+ "type": "ConversationsRequestBuilder?",
+ "default": "SDK default (30 per page)",
+ "note": "Pass the builder, not the result of .build()"
+ },
+ "conversationsProtocol": {
+ "type": "ConversationsBuilderProtocol?",
+ "default": "null",
+ "note": "Custom protocol for fetching conversations"
+ },
+ "scrollController": {
+ "type": "ScrollController?",
+ "default": "null",
+ "note": "Custom scroll controller for the list"
+ },
+ "title": {
+ "type": "String?",
+ "default": "Chats",
+ "note": "Title text for the app bar"
+ },
+ "controllerTag": {
+ "type": "String?",
+ "default": "null",
+ "note": "Tag for controller management"
+ },
+ "mentionAllLabel": {
+ "type": "String?",
+ "default": "null",
+ "note": "Custom label for @all mentions"
+ },
+ "mentionAllLabelId": {
+ "type": "String?",
+ "default": "null",
+ "note": "Custom label ID for @all mentions"
+ }
+ },
+ "callbacks": {
+ "onItemTap": "Function(Conversation conversation)?",
+ "onItemLongPress": "Function(Conversation conversation)?",
+ "onSelection": "Function(List? list)?",
+ "onBack": "VoidCallback?",
+ "onError": "OnError?",
+ "onLoad": "OnLoad?",
+ "onEmpty": "OnEmpty?",
+ "onSearchTap": "GestureTapCallback?",
+ "datePattern": "String Function(Conversation conversation)?",
+ "dateTimeFormatterCallback": "DateTimeFormatterCallback?"
+ },
+ "visibility": {
+ "receiptsVisibility": { "type": "bool?", "default": true },
+ "usersStatusVisibility": { "type": "bool?", "default": true },
+ "groupTypeVisibility": { "type": "bool?", "default": true },
+ "deleteConversationOptionVisibility": { "type": "bool?", "default": true },
+ "hideAppbar": { "type": "bool?", "default": false },
+ "hideError": { "type": "bool?", "default": false },
+ "hideSearch": { "type": "bool?", "default": false },
+ "showBackButton": { "type": "bool", "default": false },
+ "dateBackgroundIsTransparent": { "type": "bool?", "default": null },
+ "searchReadOnly": { "type": "bool", "default": false }
+ },
+ "sound": {
+ "disableSoundForMessages": { "type": "bool?", "default": false },
+ "customSoundForMessages": { "type": "String?", "default": "built-in" }
+ },
+ "selection": {
+ "selectionMode": {
+ "type": "SelectionMode?",
+ "values": ["SelectionMode.single", "SelectionMode.multiple", "SelectionMode.none"],
+ "default": "null"
+ },
+ "activateSelection": {
+ "type": "ActivateSelection?",
+ "values": ["ActivateSelection.onClick", "ActivateSelection.onLongClick"],
+ "default": "null"
+ }
+ },
+ "viewSlots": {
+ "listItemView": "Widget Function(Conversation conversation)?",
+ "leadingView": "Widget? Function(BuildContext context, Conversation conversation)?",
+ "titleView": "Widget? Function(BuildContext context, Conversation conversation)?",
+ "subtitleView": "Widget? Function(BuildContext context, Conversation conversation)?",
+ "trailingView": "Widget? Function(Conversation conversation)?",
+ "loadingStateView": "WidgetBuilder?",
+ "emptyStateView": "WidgetBuilder?",
+ "errorStateView": "WidgetBuilder?",
+ "setOptions": "List? Function(Conversation, CometChatConversationsController, BuildContext)?",
+ "addOptions": "List? Function(Conversation, CometChatConversationsController, BuildContext)?"
+ },
+ "formatting": {
+ "textFormatters": {
+ "type": "List?",
+ "default": "default formatters from data source"
+ },
+ "typingIndicatorText": {
+ "type": "String?",
+ "default": "typing..."
+ }
+ },
+ "icons": {
+ "backButton": { "type": "Widget?", "default": "built-in back arrow" },
+ "protectedGroupIcon": { "type": "Widget?", "default": "built-in lock icon" },
+ "privateGroupIcon": { "type": "Widget?", "default": "built-in lock icon" },
+ "readIcon": { "type": "Widget?", "default": "built-in read icon" },
+ "deliveredIcon": { "type": "Widget?", "default": "built-in delivered icon" },
+ "sentIcon": { "type": "Widget?", "default": "built-in sent icon" },
+ "submitIcon": { "type": "Widget?", "default": "built-in check icon" },
+ "searchBoxIcon": { "type": "Widget?", "default": "built-in search icon" }
+ },
+ "layout": {
+ "datePadding": { "type": "EdgeInsets?", "default": "null" },
+ "dateHeight": { "type": "double?", "default": "null" },
+ "dateWidth": { "type": "double?", "default": "null" },
+ "badgeWidth": { "type": "double?", "default": "null" },
+ "badgeHeight": { "type": "double?", "default": "null" },
+ "badgePadding": { "type": "EdgeInsetsGeometry?", "default": "null" },
+ "avatarWidth": { "type": "double?", "default": "null" },
+ "avatarHeight": { "type": "double?", "default": "null" },
+ "avatarPadding": { "type": "EdgeInsetsGeometry?", "default": "null" },
+ "avatarMargin": { "type": "EdgeInsetsGeometry?", "default": "null" },
+ "statusIndicatorWidth": { "type": "double?", "default": "null" },
+ "statusIndicatorHeight": { "type": "double?", "default": "null" },
+ "statusIndicatorBorderRadius": { "type": "BorderRadiusGeometry?", "default": "null" },
+ "searchPadding": { "type": "EdgeInsetsGeometry?", "default": "null" },
+ "searchContentPadding": { "type": "EdgeInsetsGeometry?", "default": "null" }
+ },
+ "style": {
+ "conversationsStyle": { "type": "CometChatConversationsStyle", "default": "CometChatConversationsStyle()" },
+ "listItemStyle": { "type": "ListItemStyle?", "default": "null" },
+ "appBarOptions": { "type": "List?", "default": "null" }
+ }
+ },
+ "events": [
+ {
+ "name": "CometChatConversationEvents.ccConversationDeleted",
+ "payload": "Conversation",
+ "description": "Conversation deleted from list"
+ },
+ {
+ "name": "CometChatConversationEvents.ccUpdateConversation",
+ "payload": "Conversation",
+ "description": "Conversation updated"
+ },
+ {
+ "name": "CometChatConversationEvents.ccMessageRead",
+ "payload": "BaseMessage",
+ "description": "Message marked as read"
+ },
+ {
+ "name": "CometChatConversationEvents.ccMessageSent",
+ "payload": "BaseMessage, MessageStatus",
+ "description": "Message sent"
+ }
+ ],
+ "sdkListeners": [
+ "onTextMessageReceived",
+ "onMediaMessageReceived",
+ "onCustomMessageReceived",
+ "onFormMessageReceived",
+ "onCardMessageReceived",
+ "onCustomInteractiveMessageReceived",
+ "onSchedulerMessageReceived",
+ "onTypingStarted",
+ "onTypingEnded",
+ "onMessagesDelivered",
+ "onMessagesRead",
+ "onMessagesDeliveredToAll",
+ "onMessagesReadByAll",
+ "onMessageEdited",
+ "onMessageDeleted",
+ "onUserOnline",
+ "onUserOffline",
+ "ccUserBlocked",
+ "onGroupMemberJoined",
+ "onGroupMemberLeft",
+ "onGroupMemberKicked",
+ "onGroupMemberBanned",
+ "onGroupMemberUnbanned",
+ "onGroupMemberScopeChanged",
+ "onMemberAddedToGroup",
+ "ccOwnershipChanged",
+ "ccGroupLeft",
+ "ccGroupDeleted",
+ "ccGroupMemberAdded",
+ "onIncomingCallReceived",
+ "onOutgoingCallAccepted",
+ "onOutgoingCallRejected",
+ "onIncomingCallCancelled",
+ "onCallEndedMessageReceived",
+ "onConnected"
+ ],
+ "compositionExample": {
+ "description": "Sidebar conversations wired to message view",
+ "components": [
+ "CometChatConversations",
+ "CometChatMessages",
+ "CometChatMessageHeader",
+ "CometChatMessageList",
+ "CometChatMessageComposer"
+ ],
+ "flow": "onItemTap emits Conversation -> extract User/Group via conversationWith -> pass to CometChatMessages or individual MessageHeader, MessageList, MessageComposer"
+ },
+ "types": {
+ "CometChatOption": {
+ "id": "String?",
+ "title": "String?",
+ "icon": "String?",
+ "iconWidget": "Widget?",
+ "onClick": "VoidCallback?"
+ },
+ "SelectionMode": {
+ "single": "SelectionMode.single",
+ "multiple": "SelectionMode.multiple",
+ "none": "SelectionMode.none"
+ },
+ "ActivateSelection": {
+ "onClick": "ActivateSelection.onClick",
+ "onLongClick": "ActivateSelection.onLongClick"
+ }
+ }
+}
+```
+
+
+
+## Where It Fits
+
+`CometChatConversations` is a sidebar list widget. It renders recent conversations and emits the selected `Conversation` via `onItemTap`. Wire it to `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer` to build a standard two-panel chat layout.
+
+
+
+```dart
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+class ChatApp extends StatefulWidget {
+ const ChatApp({super.key});
+
+ @override
+ State createState() => _ChatAppState();
+}
+
+class _ChatAppState extends State {
+ User? selectedUser;
+ Group? selectedGroup;
+
+ void handleItemTap(Conversation conversation) {
+ final entity = conversation.conversationWith;
+ setState(() {
+ if (entity is User) {
+ selectedUser = entity;
+ selectedGroup = null;
+ } else if (entity is Group) {
+ selectedGroup = entity;
+ selectedUser = null;
+ }
+ });
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: Row(
+ children: [
+ SizedBox(
+ width: 400,
+ child: CometChatConversations(
+ onItemTap: handleItemTap,
+ ),
+ ),
+ Expanded(
+ child: selectedUser != null || selectedGroup != null
+ ? CometChatMessages(
+ user: selectedUser,
+ group: selectedGroup,
+ )
+ : const Center(
+ child: Text('Select a conversation'),
+ ),
+ ),
+ ],
+ ),
+ );
+ }
+}
+```
+
+
+
+
+
+
+
+---
+
+
+## Minimal Render
+
+
+
+```dart
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+class ConversationsDemo extends StatelessWidget {
+ const ConversationsDemo({super.key});
+
+ @override
+ Widget build(BuildContext context) {
+ return const Scaffold(
+ body: SafeArea(
+ child: CometChatConversations(),
+ ),
+ );
+ }
+}
+```
+
+
+
+
+
+
+
+You can also launch it using `Navigator.push`:
+
+```dart
+Navigator.push(
+ context,
+ MaterialPageRoute(builder: (context) => const CometChatConversations())
+);
+```
+
+---
+
+## Filtering Conversations
+
+Pass a `ConversationsRequestBuilder` to `conversationsRequestBuilder`. Pass the builder instance — not the result of `.build()`.
+
+
+
+```dart
+CometChatConversations(
+ conversationsRequestBuilder: ConversationsRequestBuilder()
+ ..conversationType = "user"
+ ..limit = 10,
+)
+```
+
+
+
+### Filter Recipes
+
+| Recipe | Code |
+| --- | --- |
+| Only user conversations | `ConversationsRequestBuilder()..conversationType = "user"` |
+| Only group conversations | `ConversationsRequestBuilder()..conversationType = "group"` |
+| Limit to 10 per page | `ConversationsRequestBuilder()..limit = 10` |
+| With specific tags | `ConversationsRequestBuilder()..tags = ["vip"]` |
+| With user and group tags | `ConversationsRequestBuilder()..withUserAndGroupTags = true` |
+| Include blocked users | `ConversationsRequestBuilder()..includeBlockedUsers = true` |
+| Search conversations | `ConversationsRequestBuilder()..searchKeyword = "hello"` |
+| Unread only | `ConversationsRequestBuilder()..unread = true` |
+
+Default page size is 30. The component uses infinite scroll — the next page loads as the user scrolls to the bottom.
+
+### ConversationsRequestBuilder Properties
+
+| Property | Description | Code |
+| --- | --- | --- |
+| `limit` | Number of conversations to fetch per request. Maximum 50. | `..limit = 30` |
+| `conversationType` | Filter by conversation type: `"user"` or `"group"`. If not set, returns both. | `..conversationType = "user"` |
+| `withTags` | Include tags associated with conversations. Default `false`. | `..withTags = true` |
+| `tags` | Filter conversations by specific tags. | `..tags = ["archived", "vip"]` |
+| `withUserAndGroupTags` | Include user/group tags in the Conversation object. Default `false`. | `..withUserAndGroupTags = true` |
+| `includeBlockedUsers` | Include conversations with blocked users. Default `false`. | `..includeBlockedUsers = true` |
+| `withBlockedInfo` | Include blocked info in the ConversationWith object. Default `false`. | `..withBlockedInfo = true` |
+| `searchKeyword` | Search conversations by user or group name. Requires Advanced plan. | `..searchKeyword = "John"` |
+| `unread` | Fetch only unread conversations. Requires Advanced plan. | `..unread = true` |
+| `build()` | Builds and returns a `ConversationsRequest` object. | `.build()` |
+
+Refer to [ConversationsRequestBuilder](/sdk/flutter/retrieve-conversations) for the full builder API.
+
+---
+
+
+## Actions and Events
+
+### Callback Props
+
+#### onItemTap
+
+Fires when a conversation row is tapped. Primary navigation hook — set the active conversation and render the message view.
+
+
+
+```dart
+CometChatConversations(
+ onItemTap: (conversation) {
+ print("Selected: ${conversation.conversationId}");
+ },
+)
+```
+
+
+
+#### onItemLongPress
+
+Fires when a conversation row is long-pressed. Useful for showing context menus or custom actions.
+
+
+
+```dart
+CometChatConversations(
+ onItemLongPress: (conversation) {
+ // Show custom context menu
+ },
+)
+```
+
+
+
+#### onSelection
+
+Fires when conversations are selected in multi-select mode. Requires `selectionMode` to be set.
+
+
+
+```dart
+CometChatConversations(
+ selectionMode: SelectionMode.multiple,
+ onSelection: (selectedList) {
+ print("Selected ${selectedList?.length ?? 0} conversations");
+ },
+)
+```
+
+
+
+#### onError
+
+Fires on internal errors (network failure, auth issue, SDK exception).
+
+
+
+```dart
+CometChatConversations(
+ onError: (error) {
+ print("CometChatConversations error: $error");
+ },
+)
+```
+
+
+
+#### onBack
+
+Fires when the back button is pressed.
+
+
+
+```dart
+CometChatConversations(
+ showBackButton: true,
+ onBack: () {
+ Navigator.pop(context);
+ },
+)
+```
+
+
+
+#### onLoad
+
+Fires when the conversation list is successfully loaded.
+
+
+
+```dart
+CometChatConversations(
+ onLoad: (list) {
+ print("Loaded ${list.length} conversations");
+ },
+)
+```
+
+
+
+#### onEmpty
+
+Fires when the conversation list is empty.
+
+
+
+```dart
+CometChatConversations(
+ onEmpty: () {
+ print("No conversations found");
+ },
+)
+```
+
+
+
+
+### Global UI Events
+
+`CometChatConversationEvents` emits events subscribable from anywhere in the application. Add a listener in `initState` and remove it in `dispose`.
+
+| Event | Fires when | Payload |
+| --- | --- | --- |
+| `ccConversationDeleted` | A conversation is deleted from the list | `Conversation` |
+
+When to use: sync external UI with conversation state changes. For example, update an unread count badge in a tab bar when a conversation is deleted.
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+class _YourScreenState extends State with CometChatConversationEventListener {
+
+ @override
+ void initState() {
+ super.initState();
+ CometChatConversationEvents.addConversationListListener("listenerId", this);
+ }
+
+ @override
+ void dispose() {
+ CometChatConversationEvents.removeConversationListListener("listenerId");
+ super.dispose();
+ }
+
+ @override
+ void ccConversationDeleted(Conversation conversation) {
+ print("Deleted: ${conversation.conversationId}");
+ }
+}
+```
+
+
+
+### SDK Events (Real-Time, Automatic)
+
+The component listens to these SDK events internally. No manual attachment needed unless additional side effects are required.
+
+| SDK Listener | Internal behavior |
+| --- | --- |
+| `onTextMessageReceived` / `onMediaMessageReceived` / `onCustomMessageReceived` | Moves conversation to top, updates last message preview and unread count |
+| `onTypingStarted` / `onTypingEnded` | Shows/hides typing indicator in the subtitle |
+| `onMessagesDelivered` / `onMessagesRead` | Updates receipt ticks (unless `receiptsVisibility: false`) |
+| `onUserOnline` / `onUserOffline` | Updates online/offline status dot (unless `usersStatusVisibility: false`) |
+| `onGroupMemberJoined` / `onGroupMemberLeft` / `onGroupMemberKicked` / `onGroupMemberBanned` / `onMemberAddedToGroup` | Updates group conversation metadata |
+
+Automatic: new messages, typing indicators, receipts, user presence, group membership changes.
+
+---
+
+
+## Custom View Slots
+
+Each slot replaces a section of the default UI. Slots that accept a conversation parameter receive the `Conversation` object for that row.
+
+| Slot | Signature | Replaces |
+| --- | --- | --- |
+| `listItemView` | `Widget Function(Conversation)` | Entire list item row |
+| `leadingView` | `Widget? Function(BuildContext, Conversation)` | Avatar / left section |
+| `titleView` | `Widget? Function(BuildContext, Conversation)` | Name / title text |
+| `subtitleView` | `Widget? Function(BuildContext, Conversation)` | Last message preview |
+| `trailingView` | `Widget? Function(Conversation)` | Timestamp / badge / right section |
+| `loadingStateView` | `WidgetBuilder` | Loading spinner |
+| `emptyStateView` | `WidgetBuilder` | Empty state |
+| `errorStateView` | `WidgetBuilder` | Error state |
+| `setOptions` | `List? Function(Conversation, Controller, BuildContext)` | Context menu actions (replaces default) |
+| `addOptions` | `List? Function(Conversation, Controller, BuildContext)` | Context menu actions (adds to default) |
+
+### listItemView
+
+Replace the entire list item row.
+
+
+
+
+
+
+
+```dart
+CometChatConversations(
+ listItemView: (conversation) {
+ final entity = conversation.conversationWith;
+ final name = entity is User ? entity.name : (entity as Group).name;
+
+ return CometChatListItem(
+ avatarName: name,
+ avatarURL: entity is User ? entity.avatar : (entity as Group).icon,
+ title: name,
+ avatarStyle: CometChatAvatarStyle(
+ borderRadius: BorderRadius.circular(8),
+ ),
+ );
+ },
+)
+```
+
+
+
+For a more complete custom list item with status indicator and date:
+
+
+
+```dart
+Widget getCustomListItem(Conversation conversation, BuildContext context) {
+ User? conversationWithUser;
+ Group? conversationWithGroup;
+
+ if (conversation.conversationWith is User) {
+ conversationWithUser = conversation.conversationWith as User;
+ } else {
+ conversationWithGroup = conversation.conversationWith as Group;
+ }
+
+ // Get status indicator
+ StatusIndicatorUtils statusIndicatorUtils = StatusIndicatorUtils.getStatusIndicatorFromParams(
+ context: context,
+ user: conversationWithUser,
+ group: conversationWithGroup,
+ onlineStatusIndicatorColor: Color(0xFF09C26F),
+ );
+
+ // Build tail view with date
+ final lastMessageTime = conversation.lastMessage?.sentAt ?? DateTime.now();
+ Widget tail = CometChatDate(
+ date: lastMessageTime,
+ padding: EdgeInsets.zero,
+ style: CometChatDateStyle(
+ backgroundColor: Colors.transparent,
+ textStyle: TextStyle(color: Color(0xFF727272), fontSize: 12),
+ border: Border.all(width: 0, color: Colors.transparent),
+ ),
+ pattern: DateTimePattern.dayDateTimeFormat,
+ );
+
+ return CometChatListItem(
+ avatarHeight: 48,
+ avatarWidth: 48,
+ id: conversation.conversationId,
+ avatarName: conversationWithUser?.name ?? conversationWithGroup?.name,
+ avatarURL: conversationWithUser?.avatar ?? conversationWithGroup?.icon,
+ avatarStyle: CometChatAvatarStyle(
+ borderRadius: BorderRadius.circular(8),
+ backgroundColor: Color(0xFFAA9EE8),
+ ),
+ title: conversationWithUser?.name ?? conversationWithGroup?.name,
+ tailView: tail,
+ statusIndicatorColor: statusIndicatorUtils.statusIndicatorColor,
+ statusIndicatorIcon: statusIndicatorUtils.icon,
+ statusIndicatorStyle: CometChatStatusIndicatorStyle(
+ border: Border.all(width: 2, color: Colors.white),
+ ),
+ hideSeparator: true,
+ style: ListItemStyle(
+ background: Colors.transparent,
+ titleStyle: TextStyle(
+ overflow: TextOverflow.ellipsis,
+ fontSize: 16,
+ fontWeight: FontWeight.w500,
+ color: Color(0xFF141414),
+ ),
+ padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+ ),
+ );
+}
+
+// Usage:
+CometChatConversations(
+ listItemView: (conversation) => getCustomListItem(conversation, context),
+)
+```
+
+
+
+### leadingView
+
+Replace the avatar / left section. Typing-aware avatar example.
+
+
+
+
+
+
+
+```dart
+// In your StatefulWidget, use the MessageListener mixin:
+class _ConversationsScreenState extends State with MessageListener {
+ Map typingMap = {};
+
+ @override
+ void initState() {
+ super.initState();
+ CometChat.addMessageListener("typing_listener", this);
+ }
+
+ @override
+ void dispose() {
+ CometChat.removeMessageListener("typing_listener");
+ super.dispose();
+ }
+
+ @override
+ void onTypingStarted(TypingIndicator typingIndicator) {
+ setTypingIndicator(typingIndicator, true);
+ }
+
+ @override
+ void onTypingEnded(TypingIndicator typingIndicator) {
+ setTypingIndicator(typingIndicator, false);
+ }
+
+ void setTypingIndicator(TypingIndicator typingIndicator, bool isTypingStarted) {
+ final id = typingIndicator.receiverType == ReceiverTypeConstants.user
+ ? typingIndicator.sender.uid
+ : typingIndicator.receiverId;
+
+ setState(() {
+ if (isTypingStarted) {
+ typingMap[id] = typingIndicator;
+ } else {
+ typingMap.remove(id);
+ }
+ });
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return CometChatConversations(
+ leadingView: (context, conversation) {
+ final entity = conversation.conversationWith;
+ final id = entity is User ? entity.uid : (entity as Group).guid;
+
+ if (typingMap.containsKey(id)) {
+ return Container(
+ decoration: BoxDecoration(
+ border: Border.all(color: Color(0xFFF76808), width: 2),
+ borderRadius: BorderRadius.circular(8),
+ ),
+ child: Image.asset("assets/typing_icon.png", height: 40, width: 40),
+ );
+ }
+ return null; // Use default avatar
+ },
+ );
+ }
+}
+```
+
+
+
+
+### titleView
+
+Replace the name / title text. Inline user status example.
+
+
+
+
+
+
+
+```dart
+CometChatConversations(
+ titleView: (context, conversation) {
+ final entity = conversation.conversationWith;
+ final name = entity is User ? entity.name : (entity as Group).name;
+ final statusMessage = entity is User ? entity.statusMessage : null;
+
+ return Row(
+ children: [
+ Text(name ?? "", style: TextStyle(fontWeight: FontWeight.w500)),
+ if (statusMessage != null)
+ Text(" · $statusMessage", style: TextStyle(color: Color(0xFF6852D6))),
+ ],
+ );
+ },
+)
+```
+
+
+
+### subtitleView
+
+Replace the last message preview text.
+
+
+
+
+
+
+
+```dart
+CometChatConversations(
+ subtitleView: (context, conversation) {
+ final entity = conversation.conversationWith;
+ String subtitle;
+
+ if (entity is User) {
+ final dateTime = entity.lastActiveAt ?? DateTime.now();
+ subtitle = "Last Active: ${DateFormat('dd/MM/yyyy, HH:mm').format(dateTime)}";
+ } else {
+ final dateTime = (entity as Group).createdAt ?? DateTime.now();
+ subtitle = "Created: ${DateFormat('dd/MM/yyyy, HH:mm').format(dateTime)}";
+ }
+
+ return Text(subtitle, style: TextStyle(color: Color(0xFF727272), fontSize: 14));
+ },
+)
+```
+
+
+
+### trailingView
+
+Replace the timestamp / badge / right section. Relative time badge example.
+
+
+
+
+
+
+
+```dart
+CometChatConversations(
+ trailingView: (conversation) {
+ final timestamp = conversation.updatedAt?.millisecondsSinceEpoch ?? 0;
+ final now = DateTime.now();
+ final lastSeen = DateTime.fromMillisecondsSinceEpoch(timestamp * 1000);
+ final diffInMinutes = now.difference(lastSeen).inMinutes;
+ final diffInHours = now.difference(lastSeen).inHours;
+
+ String timeText;
+ String label;
+ Color cardColor;
+
+ if (diffInMinutes < 60) {
+ timeText = "$diffInMinutes";
+ label = "Min ago";
+ cardColor = Color(0x666852D6);
+ } else if (diffInHours < 10) {
+ timeText = "$diffInHours";
+ label = "Hr ago";
+ cardColor = Color(0x66FFAB00);
+ } else {
+ timeText = "$diffInHours";
+ label = "Hr ago";
+ cardColor = Color(0x66F44649);
+ }
+
+ return Card(
+ color: cardColor,
+ child: Padding(
+ padding: EdgeInsets.all(4),
+ child: Column(
+ children: [
+ Text(timeText, style: TextStyle(fontWeight: FontWeight.bold)),
+ Text(label, style: TextStyle(fontSize: 12)),
+ ],
+ ),
+ ),
+ );
+ },
+)
+```
+
+
+
+
+### setOptions
+
+Replace the context menu / long-press actions on each conversation item.
+
+
+
+
+
+
+
+```dart
+CometChatConversations(
+ setOptions: (conversation, controller, context) {
+ return [
+ CometChatOption(
+ id: "delete",
+ title: "Delete",
+ icon: AssetConstants.delete,
+ onClick: () {
+ // Delete conversation
+ },
+ ),
+ ];
+ },
+)
+```
+
+
+
+### addOptions
+
+Add to the existing context menu actions without removing defaults.
+
+
+
+
+
+
+
+```dart
+CometChatConversations(
+ addOptions: (conversation, controller, context) {
+ return [
+ CometChatOption(
+ id: "archive",
+ title: "Archive",
+ iconWidget: Icon(Icons.archive_outlined),
+ onClick: () {
+ // Archive conversation
+ },
+ ),
+ CometChatOption(
+ id: "pin",
+ title: "Pin",
+ iconWidget: Icon(Icons.push_pin_outlined),
+ onClick: () {
+ // Pin conversation
+ },
+ ),
+ CometChatOption(
+ id: "mark_unread",
+ title: "Mark as unread",
+ iconWidget: Icon(Icons.mark_chat_unread_outlined),
+ onClick: () {
+ // Mark conversation as unread
+ },
+ ),
+ ];
+ },
+)
+```
+
+
+
+### appBarOptions
+
+Add custom widgets to the app bar.
+
+
+
+
+
+
+
+```dart
+CometChatConversations(
+ showBackButton: false,
+ appBarOptions: [
+ PopupMenuButton(
+ icon: CometChatAvatar(
+ image: CometChatUIKit.loggedInUser?.avatar,
+ name: CometChatUIKit.loggedInUser?.name,
+ ),
+ itemBuilder: (context) => [
+ PopupMenuItem(value: 'create', child: Text("Create Conversation")),
+ PopupMenuItem(value: 'logout', child: Text("Logout")),
+ ],
+ onSelected: (value) {
+ // Handle menu selection
+ },
+ ),
+ ],
+)
+```
+
+
+
+For a more complete popup menu with styling:
+
+
+
+```dart
+CometChatConversations(
+ showBackButton: false,
+ appBarOptions: [
+ PopupMenuButton(
+ shape: RoundedRectangleBorder(
+ borderRadius: BorderRadius.circular(8),
+ side: BorderSide(color: Color(0xFFF5F5F5), width: 1),
+ ),
+ color: Colors.white,
+ elevation: 4,
+ menuPadding: EdgeInsets.zero,
+ padding: EdgeInsets.zero,
+ icon: Padding(
+ padding: EdgeInsets.only(left: 12, right: 16),
+ child: CometChatAvatar(
+ width: 40,
+ height: 40,
+ image: CometChatUIKit.loggedInUser?.avatar,
+ name: CometChatUIKit.loggedInUser?.name,
+ ),
+ ),
+ onSelected: (value) {
+ switch (value) {
+ case '/create':
+ // Navigate to create conversation
+ break;
+ case '/logout':
+ CometChatUIKit.logout();
+ break;
+ }
+ },
+ position: PopupMenuPosition.under,
+ itemBuilder: (BuildContext context) {
+ return [
+ PopupMenuItem(
+ height: 44,
+ padding: EdgeInsets.all(16),
+ value: '/create',
+ child: Row(
+ children: [
+ Padding(
+ padding: EdgeInsets.only(right: 8),
+ child: Icon(Icons.add_comment_outlined, color: Color(0xFFA1A1A1), size: 24),
+ ),
+ Text("Create Conversation", style: TextStyle(fontSize: 14, color: Color(0xFF141414))),
+ ],
+ ),
+ ),
+ PopupMenuItem(
+ height: 44,
+ padding: EdgeInsets.all(16),
+ value: '/name',
+ child: Row(
+ children: [
+ Padding(
+ padding: EdgeInsets.only(right: 8),
+ child: Icon(Icons.account_circle_outlined, color: Color(0xFFA1A1A1), size: 24),
+ ),
+ Text(CometChatUIKit.loggedInUser?.name ?? "", style: TextStyle(fontSize: 14, color: Color(0xFF141414))),
+ ],
+ ),
+ ),
+ PopupMenuItem(
+ height: 44,
+ padding: EdgeInsets.all(16),
+ value: '/logout',
+ child: Row(
+ children: [
+ Padding(
+ padding: EdgeInsets.only(right: 8),
+ child: Icon(Icons.logout, color: Colors.red, size: 24),
+ ),
+ Text("Logout", style: TextStyle(fontSize: 14, color: Colors.red)),
+ ],
+ ),
+ ),
+ ];
+ },
+ ),
+ ],
+ onItemTap: (conversation) {
+ User? user;
+ Group? group;
+ if (conversation.conversationWith is User) {
+ user = conversation.conversationWith as User;
+ } else {
+ group = conversation.conversationWith as Group;
+ }
+ // Navigate to messages
+ },
+)
+```
+
+
+
+---
+
+
+## Styling
+
+Set `CometChatConversationsStyle` to customize the appearance.
+
+
+
+```dart
+CometChatConversations(
+ conversationsStyle: CometChatConversationsStyle(
+ backgroundColor: Colors.white,
+ titleTextColor: Color(0xFF141414),
+ avatarStyle: CometChatAvatarStyle(
+ borderRadius: BorderRadius.circular(8),
+ backgroundColor: Color(0xFFFBAA75),
+ ),
+ badgeStyle: CometChatBadgeStyle(
+ backgroundColor: Color(0xFFF76808),
+ ),
+ ),
+)
+```
+
+
+
+
+
+
+
+### Style Properties
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `backgroundColor` | `Color` | Background color of the component |
+| `border` | `Border` | Border for the widget |
+| `borderRadius` | `BorderRadiusGeometry` | Border radius for the widget |
+| `titleTextColor` | `Color` | Color of the header title |
+| `titleTextStyle` | `TextStyle` | Style for the header title |
+| `backIconColor` | `Color` | Back button icon color |
+| `searchBackgroundColor` | `Color` | Background color of search box |
+| `searchBorder` | `BorderSide` | Border for search box |
+| `searchBorderRadius` | `BorderRadius` | Border radius for search box |
+| `searchPlaceHolderTextColor` | `Color` | Placeholder text color in search |
+| `searchPlaceHolderTextStyle` | `TextStyle` | Placeholder text style in search |
+| `searchIconColor` | `Color` | Search icon color |
+| `separatorColor` | `Color` | Color of list item separators |
+| `separatorHeight` | `double` | Height of list item separators |
+| `emptyStateTextColor` | `Color` | Text color for empty state title |
+| `emptyStateTextStyle` | `TextStyle` | Text style for empty state title |
+| `emptyStateSubTitleTextColor` | `Color` | Text color for empty state subtitle |
+| `emptyStateSubTitleTextStyle` | `TextStyle` | Text style for empty state subtitle |
+| `errorStateTextColor` | `Color` | Text color for error state title |
+| `errorStateTextStyle` | `TextStyle` | Text style for error state title |
+| `errorStateSubTitleTextColor` | `Color` | Text color for error state subtitle |
+| `errorStateSubTitleTextStyle` | `TextStyle` | Text style for error state subtitle |
+| `itemTitleTextColor` | `Color` | Text color for conversation item title |
+| `itemTitleTextStyle` | `TextStyle` | Text style for conversation item title |
+| `itemSubtitleTextColor` | `Color` | Text color for conversation item subtitle |
+| `itemSubtitleTextStyle` | `TextStyle` | Text style for conversation item subtitle |
+| `messageTypeIconColor` | `Color` | Icon color for message type indicators |
+| `avatarStyle` | `CometChatAvatarStyle` | Style for avatars |
+| `badgeStyle` | `CometChatBadgeStyle` | Style for unread badges |
+| `receiptStyle` | `CometChatMessageReceiptStyle` | Style for message receipts |
+| `statusIndicatorStyle` | `CometChatStatusIndicatorStyle` | Style for online status indicator |
+| `dateStyle` | `CometChatDateStyle` | Style for date/time display |
+| `typingIndicatorStyle` | `CometChatTypingIndicatorStyle` | Style for typing indicator |
+| `mentionsStyle` | `CometChatMentionsStyle` | Style for @mentions |
+| `deleteConversationDialogStyle` | `CometChatConfirmDialogStyle` | Style for delete confirmation dialog |
+| `privateGroupIconBackground` | `Color` | Background color for private group icon |
+| `protectedGroupIconBackground` | `Color` | Background color for protected group icon |
+| `submitIconColor` | `Color` | Color for submit icon in selection mode |
+| `checkBoxBackgroundColor` | `Color` | Background color for selection checkbox |
+| `checkBoxCheckedBackgroundColor` | `Color` | Background color when checkbox is checked |
+| `checkBoxBorder` | `BorderSide` | Border for selection checkbox |
+| `checkBoxBorderRadius` | `BorderRadiusGeometry` | Border radius for selection checkbox |
+| `checkboxSelectedIconColor` | `Color` | Icon color when checkbox is selected |
+| `listItemSelectedBackgroundColor` | `Color` | Background color for selected list items |
+
+---
+
+## Common Patterns
+
+### Custom empty state with CTA
+
+
+
+```dart
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+CometChatConversations(
+ emptyStateView: (context) {
+ return Center(
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ Text("No conversations yet"),
+ SizedBox(height: 16),
+ ElevatedButton(
+ onPressed: () {
+ // Navigate to contacts
+ },
+ child: Text("Start a conversation"),
+ ),
+ ],
+ ),
+ );
+ },
+)
+```
+
+
+
+### Hide all chrome — minimal list
+
+
+
+```dart
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+CometChatConversations(
+ receiptsVisibility: false,
+ usersStatusVisibility: false,
+ groupTypeVisibility: false,
+ deleteConversationOptionVisibility: false,
+ hideAppbar: true,
+)
+```
+
+
+
+
+### Conversations with search
+
+
+
+```dart
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+CometChatConversations(
+ hideSearch: false,
+ onSearchTap: () {
+ // Handle search tap - navigate to search screen
+ },
+)
+```
+
+
+
+### Custom date pattern
+
+
+
+
+
+
+
+```dart
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:intl/intl.dart';
+
+CometChatConversations(
+ datePattern: (conversation) {
+ final date = conversation.lastMessage?.sentAt ?? DateTime.now();
+ return DateFormat('d MMM, hh:mm a').format(date);
+ },
+)
+```
+
+
+
+### Text formatters
+
+Configure text formatters for the conversation subtitle. See [CometChatMentionsFormatter](/ui-kit/flutter/v5/mentions-formatter-guide) for mention formatting.
+
+
+
+
+
+
+
+```dart
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+CometChatConversations(
+ textFormatters: [
+ CometChatMentionsFormatter(
+ style: CometChatMentionsStyle(
+ mentionSelfTextBackgroundColor: Color(0xFFF76808),
+ mentionTextBackgroundColor: Colors.white,
+ mentionTextColor: Colors.black,
+ mentionSelfTextColor: Colors.white,
+ ),
+ ),
+ ],
+)
+```
+
+
+
+---
+
+
+## Accessibility
+
+The component renders a scrollable list of interactive items. Each conversation row is tappable and responds to both tap and long-press gestures. The context menu (options) is accessible via long-press. The unread badge count is exposed as text content. Avatar images include the conversation name for accessibility.
+
+For screen readers, the conversation list is rendered as a semantic list using Flutter's built-in accessibility features. Status indicators (online/offline, group type icons) use visual icons — consider providing custom `Semantics` widgets via `leadingView` if screen reader descriptions are needed for these visual indicators.
+
+When using selection mode, checkboxes are rendered with proper accessibility labels. The component respects system accessibility settings including text scaling and high contrast modes.
+
+---
+
+
+## Props
+
+All props are optional. Sorted alphabetically.
+
+### activateSelection
+
+Controls when selection mode activates.
+
+| | |
+| --- | --- |
+| Type | `ActivateSelection` |
+| Default | `null` |
+
+Values: `ActivateSelection.onClick`, `ActivateSelection.onLongClick`
+
+---
+
+### addOptions
+
+Adds to the current list of actions available on long press.
+
+| | |
+| --- | --- |
+| Type | `List? Function(Conversation, CometChatConversationsController, BuildContext)` |
+| Default | `null` |
+
+---
+
+### appBarOptions
+
+List of widgets to display in the app bar.
+
+| | |
+| --- | --- |
+| Type | `List` |
+| Default | `null` |
+
+---
+
+### backButton
+
+Custom back button widget.
+
+| | |
+| --- | --- |
+| Type | `Widget` |
+| Default | Built-in back arrow |
+
+---
+
+### conversationsRequestBuilder
+
+Controls which conversations load and in what order.
+
+| | |
+| --- | --- |
+| Type | `ConversationsRequestBuilder` |
+| Default | SDK default (30 per page) |
+
+Pass the builder instance, not the result of `.build()`.
+
+---
+
+### conversationsProtocol
+
+Custom protocol for fetching conversations.
+
+| | |
+| --- | --- |
+| Type | `ConversationsBuilderProtocol` |
+| Default | `null` |
+
+Use this for advanced customization of how conversations are fetched.
+
+---
+
+### conversationsStyle
+
+Style configuration for the component.
+
+| | |
+| --- | --- |
+| Type | `CometChatConversationsStyle` |
+| Default | `CometChatConversationsStyle()` |
+
+---
+
+### customSoundForMessages
+
+Path to a custom audio file for incoming message notifications.
+
+| | |
+| --- | --- |
+| Type | `String` |
+| Default | Built-in sound |
+
+---
+
+### datePattern
+
+Custom date format function for conversation timestamps.
+
+| | |
+| --- | --- |
+| Type | `String Function(Conversation)` |
+| Default | Built-in date formatting |
+
+---
+
+### deleteConversationOptionVisibility
+
+Controls visibility of delete option in context menu.
+
+| | |
+| --- | --- |
+| Type | `bool` |
+| Default | `true` |
+
+---
+
+### deliveredIcon
+
+Custom icon for delivered message receipts.
+
+| | |
+| --- | --- |
+| Type | `Widget` |
+| Default | Built-in delivered icon |
+
+---
+
+### disableSoundForMessages
+
+Disables notification sound for incoming messages.
+
+| | |
+| --- | --- |
+| Type | `bool` |
+| Default | `false` |
+
+---
+
+
+### emptyStateView
+
+Custom widget displayed when there are no conversations.
+
+| | |
+| --- | --- |
+| Type | `WidgetBuilder` |
+| Default | Built-in empty state |
+
+---
+
+### errorStateView
+
+Custom widget displayed when an error occurs.
+
+| | |
+| --- | --- |
+| Type | `WidgetBuilder` |
+| Default | Built-in error state |
+
+Hidden when `hideError: true`.
+
+---
+
+### groupTypeVisibility
+
+Controls visibility of group type icon (public/private/password).
+
+| | |
+| --- | --- |
+| Type | `bool` |
+| Default | `true` |
+
+---
+
+### hideAppbar
+
+Hides the entire app bar.
+
+| | |
+| --- | --- |
+| Type | `bool` |
+| Default | `false` |
+
+---
+
+### hideError
+
+Hides the default and custom error views.
+
+| | |
+| --- | --- |
+| Type | `bool` |
+| Default | `false` |
+
+---
+
+### hideSearch
+
+Hides the search bar in the app bar.
+
+| | |
+| --- | --- |
+| Type | `bool` |
+| Default | `false` |
+
+---
+
+### leadingView
+
+Custom renderer for the avatar / left section.
+
+| | |
+| --- | --- |
+| Type | `Widget? Function(BuildContext, Conversation)` |
+| Default | Built-in avatar |
+
+Return `null` to use the default avatar.
+
+---
+
+### listItemView
+
+Custom renderer for the entire list item row.
+
+| | |
+| --- | --- |
+| Type | `Widget Function(Conversation)` |
+| Default | Built-in list item |
+
+---
+
+### loadingStateView
+
+Custom widget displayed during loading state.
+
+| | |
+| --- | --- |
+| Type | `WidgetBuilder` |
+| Default | Built-in shimmer |
+
+---
+
+### mentionAllLabel
+
+Custom label for group mentions (@channel, @everyone).
+
+| | |
+| --- | --- |
+| Type | `String` |
+| Default | `null` |
+
+---
+
+### mentionAllLabelId
+
+Custom label ID for group mentions.
+
+| | |
+| --- | --- |
+| Type | `String` |
+| Default | `null` |
+
+---
+
+
+### onBack
+
+Callback fired when the back button is pressed.
+
+| | |
+| --- | --- |
+| Type | `VoidCallback` |
+| Default | `null` |
+
+---
+
+### onEmpty
+
+Callback fired when the conversation list is empty.
+
+| | |
+| --- | --- |
+| Type | `OnEmpty` |
+| Default | `null` |
+
+---
+
+### onError
+
+Callback fired when the component encounters an error.
+
+| | |
+| --- | --- |
+| Type | `OnError` |
+| Default | `null` |
+
+---
+
+### onItemLongPress
+
+Callback fired when a conversation row is long-pressed.
+
+| | |
+| --- | --- |
+| Type | `Function(Conversation)` |
+| Default | `null` |
+
+---
+
+### onItemTap
+
+Callback fired when a conversation row is tapped.
+
+| | |
+| --- | --- |
+| Type | `Function(Conversation)` |
+| Default | `null` |
+
+---
+
+### onLoad
+
+Callback fired when the conversation list is loaded.
+
+| | |
+| --- | --- |
+| Type | `OnLoad` |
+| Default | `null` |
+
+---
+
+### onSearchTap
+
+Callback fired when the search box is tapped.
+
+| | |
+| --- | --- |
+| Type | `GestureTapCallback` |
+| Default | `null` |
+
+Requires `searchReadOnly: true` to work properly.
+
+---
+
+### onSelection
+
+Callback fired when conversations are selected/deselected.
+
+| | |
+| --- | --- |
+| Type | `Function(List?)` |
+| Default | `null` |
+
+Requires `selectionMode` to be set.
+
+---
+
+### privateGroupIcon
+
+Custom icon for private group indicator.
+
+| | |
+| --- | --- |
+| Type | `Widget` |
+| Default | Built-in lock icon |
+
+---
+
+### protectedGroupIcon
+
+Custom icon for password-protected group indicator.
+
+| | |
+| --- | --- |
+| Type | `Widget` |
+| Default | Built-in lock icon |
+
+---
+
+### readIcon
+
+Custom icon for read message receipts.
+
+| | |
+| --- | --- |
+| Type | `Widget` |
+| Default | Built-in read icon |
+
+---
+
+### receiptsVisibility
+
+Controls visibility of message read/delivery receipts.
+
+| | |
+| --- | --- |
+| Type | `bool` |
+| Default | `true` |
+
+---
+
+
+### scrollController
+
+Custom scroll controller for the list.
+
+| | |
+| --- | --- |
+| Type | `ScrollController` |
+| Default | `null` |
+
+---
+
+### searchBoxIcon
+
+Custom prefix icon for the search box.
+
+| | |
+| --- | --- |
+| Type | `Widget` |
+| Default | Built-in search icon |
+
+---
+
+### searchContentPadding
+
+Padding for search box content.
+
+| | |
+| --- | --- |
+| Type | `EdgeInsetsGeometry` |
+| Default | `null` |
+
+---
+
+### searchPadding
+
+Padding for the search box.
+
+| | |
+| --- | --- |
+| Type | `EdgeInsetsGeometry` |
+| Default | `null` |
+
+---
+
+### searchReadOnly
+
+Makes the search box read-only (tap only).
+
+| | |
+| --- | --- |
+| Type | `bool` |
+| Default | `false` |
+
+---
+
+### selectionMode
+
+Enables single or multi-select mode.
+
+| | |
+| --- | --- |
+| Type | `SelectionMode` |
+| Default | `null` |
+
+Values: `SelectionMode.single`, `SelectionMode.multiple`, `SelectionMode.none`
+
+Must pair with `onSelection` to capture selections.
+
+---
+
+### sentIcon
+
+Custom icon for sent message receipts.
+
+| | |
+| --- | --- |
+| Type | `Widget` |
+| Default | Built-in sent icon |
+
+---
+
+### setOptions
+
+Replaces the list of actions available on long press.
+
+| | |
+| --- | --- |
+| Type | `List? Function(Conversation, CometChatConversationsController, BuildContext)` |
+| Default | `null` |
+
+---
+
+### showBackButton
+
+Shows the back button in the app bar.
+
+| | |
+| --- | --- |
+| Type | `bool` |
+| Default | `false` |
+
+---
+
+### subtitleView
+
+Custom renderer for the last message preview.
+
+| | |
+| --- | --- |
+| Type | `Widget? Function(BuildContext, Conversation)` |
+| Default | Built-in subtitle |
+
+---
+
+### textFormatters
+
+Custom text formatters for the conversation subtitle.
+
+| | |
+| --- | --- |
+| Type | `List` |
+| Default | Default formatters from data source |
+
+See [CometChatMentionsFormatter](/ui-kit/flutter/v5/mentions-formatter-guide) for mention formatting.
+
+---
+
+### title
+
+Custom title text for the app bar.
+
+| | |
+| --- | --- |
+| Type | `String` |
+| Default | "Chats" |
+
+---
+
+### titleView
+
+Custom renderer for the name / title text.
+
+| | |
+| --- | --- |
+| Type | `Widget? Function(BuildContext, Conversation)` |
+| Default | Built-in title |
+
+---
+
+### trailingView
+
+Custom renderer for the timestamp / badge / right section.
+
+| | |
+| --- | --- |
+| Type | `Widget? Function(Conversation)` |
+| Default | Built-in trailing view |
+
+---
+
+### typingIndicatorText
+
+Custom text shown when a user is typing.
+
+| | |
+| --- | --- |
+| Type | `String` |
+| Default | "typing..." |
+
+---
+
+### usersStatusVisibility
+
+Controls visibility of online/offline status indicator.
+
+| | |
+| --- | --- |
+| Type | `bool` |
+| Default | `true` |
+
+---
+
+### avatarHeight
+
+Height for user/group avatars.
+
+| | |
+| --- | --- |
+| Type | `double` |
+| Default | `null` |
+
+---
+
+### avatarWidth
+
+Width for user/group avatars.
+
+| | |
+| --- | --- |
+| Type | `double` |
+| Default | `null` |
+
+---
+
+### avatarPadding
+
+Padding for user/group avatars.
+
+| | |
+| --- | --- |
+| Type | `EdgeInsetsGeometry` |
+| Default | `null` |
+
+---
+
+### avatarMargin
+
+Margin for user/group avatars.
+
+| | |
+| --- | --- |
+| Type | `EdgeInsetsGeometry` |
+| Default | `null` |
+
+---
+
+### badgeWidth
+
+Width for unread message badge.
+
+| | |
+| --- | --- |
+| Type | `double` |
+| Default | `null` |
+
+---
+
+### badgeHeight
+
+Height for unread message badge.
+
+| | |
+| --- | --- |
+| Type | `double` |
+| Default | `null` |
+
+---
+
+### badgePadding
+
+Padding for unread message badge.
+
+| | |
+| --- | --- |
+| Type | `EdgeInsetsGeometry` |
+| Default | `null` |
+
+---
+
+### controllerTag
+
+Tag for controller management. When passed, parent is responsible for closing.
+
+| | |
+| --- | --- |
+| Type | `String` |
+| Default | `null` |
+
+---
+
+### dateBackgroundIsTransparent
+
+Controls whether the date background is transparent.
+
+| | |
+| --- | --- |
+| Type | `bool` |
+| Default | `null` |
+
+---
+
+### dateHeight
+
+Height for the conversation date display.
+
+| | |
+| --- | --- |
+| Type | `double` |
+| Default | `null` |
+
+---
+
+### datePadding
+
+Padding for the conversation date display.
+
+| | |
+| --- | --- |
+| Type | `EdgeInsets` |
+| Default | `null` |
+
+---
+
+### dateTimeFormatterCallback
+
+Callback for custom date and time formatting.
+
+| | |
+| --- | --- |
+| Type | `DateTimeFormatterCallback` |
+| Default | `null` |
+
+---
+
+### dateWidth
+
+Width for the conversation date display.
+
+| | |
+| --- | --- |
+| Type | `double` |
+| Default | `null` |
+
+---
+
+### listItemStyle
+
+Style configuration for list items.
+
+| | |
+| --- | --- |
+| Type | `ListItemStyle` |
+| Default | `null` |
+
+---
+
+### searchContentPadding
+
+Padding for search box content.
+
+| | |
+| --- | --- |
+| Type | `EdgeInsetsGeometry` |
+| Default | `null` |
+
+---
+
+### searchPadding
+
+Padding for the search box.
+
+| | |
+| --- | --- |
+| Type | `EdgeInsetsGeometry` |
+| Default | `null` |
+
+---
+
+### statusIndicatorBorderRadius
+
+Border radius for the status indicator.
+
+| | |
+| --- | --- |
+| Type | `BorderRadiusGeometry` |
+| Default | `null` |
+
+---
+
+### statusIndicatorHeight
+
+Height for the status indicator.
+
+| | |
+| --- | --- |
+| Type | `double` |
+| Default | `null` |
+
+---
+
+### statusIndicatorWidth
+
+Width for the status indicator.
+
+| | |
+| --- | --- |
+| Type | `double` |
+| Default | `null` |
+
+---
+
+### submitIcon
+
+Custom submit icon for selection mode.
+
+| | |
+| --- | --- |
+| Type | `Widget` |
+| Default | Built-in check icon |
+
+---
+
+## Events
+
+| Event | Payload | Fires when |
+| --- | --- | --- |
+| `CometChatConversationEvents.ccConversationDeleted` | `Conversation` | Conversation deleted from list |
+| `CometChatConversationEvents.ccUpdateConversation` | `Conversation` | Conversation updated (last message change, metadata update) |
+
+Subscribe using `CometChatConversationEvents.addConversationListListener()` and unsubscribe with `removeConversationListListener()`.
+
+---
+
+## Customization Matrix
+
+| What to change | Where | Property/API | Example |
+| --- | --- | --- | --- |
+| Override behavior on user interaction | Widget props | `on` callbacks | `onItemTap: (c) => setActive(c)` |
+| Filter which conversations appear | Widget props | `conversationsRequestBuilder` | `conversationsRequestBuilder: ConversationsRequestBuilder()..limit = 10` |
+| Toggle visibility of UI elements | Widget props | `Visibility` boolean props | `receiptsVisibility: false` |
+| Replace a section of the list item | Widget props | `View` render props | `listItemView: (conversation) => CustomWidget()` |
+| Change colors, fonts, spacing | Widget props | `conversationsStyle` | `conversationsStyle: CometChatConversationsStyle(backgroundColor: Colors.white)` |
+
+---
+
+
+
+ Display and select from a list of users
+
+
+ Display and select from a list of groups
+
+
+ Display messages in a conversation
+
+
+ Customize the look and feel of components
+
+
diff --git a/ui-kit/flutter/v5/core-features.mdx b/ui-kit/flutter/v5/core-features.mdx
new file mode 100644
index 000000000..a513fccb2
--- /dev/null
+++ b/ui-kit/flutter/v5/core-features.mdx
@@ -0,0 +1,278 @@
+---
+title: "Core Features"
+sidebarTitle: "Core"
+description: "Comprehensive guide to CometChat's core messaging features including instant messaging, media sharing, read receipts, and more"
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_chat_uikit` |
+| Required setup | `CometChatUIKit.init(uiKitSettings: UIKitSettings)` then `CometChatUIKit.login(uid)` — must complete before rendering any component |
+| Core features | Instant Messaging, Media Sharing, Read Receipts, Mark as Unread, Typing Indicator, User Presence, Reactions, Mentions, Rich Text Formatting, Quoted Reply, Search, Threaded Conversations, Moderation, Report Message, Group Chat |
+| Key components | `CometChatConversations` → [Conversations](/ui-kit/flutter/v5/conversations), `CometChatMessageList` → [Message List](/ui-kit/flutter/v5/message-list), `CometChatMessageComposer` → [Message Composer](/ui-kit/flutter/v5/message-composer), `CometChatMessageHeader` → [Message Header](/ui-kit/flutter/v5/message-header), `CometChatUsers` → [Users](/ui-kit/flutter/v5/users), `CometChatGroups` → [Groups](/ui-kit/flutter/v5/groups), `CometChatGroupMembers` → [Group Members](/ui-kit/flutter/v5/group-members) |
+
+
+
+The UI Kit comprises a variety of widgets, each designed to work seamlessly with one another to deliver a comprehensive and intuitive chat experience.
+
+Here's how different UI Kit widgets work together to achieve CometChat's Core features:
+
+***
+
+## Instant Messaging
+
+At the heart of CometChat's functionality is the ability to support real-time text messaging. Users can send and receive instant messages, fostering quick and efficient communication.
+
+
+
+
+
+| Widgets | Functionality |
+| --- | --- |
+| [MessageComposer](/ui-kit/flutter/v5/message-composer) | [MessageComposer](/ui-kit/flutter/v5/message-composer) is a Widget that enables users to write and send a variety of messages. |
+| [MessageList](/ui-kit/flutter/v5/message-list) | [MessageList](/ui-kit/flutter/v5/message-list) is a Widget that renders a list of messages sent and messages received using [TextBubble](/ui-kit/flutter/v5/message-bubble-styling#text-bubble). |
+
+***
+
+## Media Sharing
+
+Beyond text, CometChat allows users to share various media types within their conversations. This includes images, videos, audio files, and documents, enriching the chat experience and enabling more comprehensive communication.
+
+
+
+
+
+| Widgets | Functionality |
+| --- | --- |
+| [MessageComposer](/ui-kit/flutter/v5/message-composer) | [MessageComposer](/ui-kit/flutter/v5/message-composer) is a Widget that has ActionSheet, ActionSheet is a menu that appears over the context of the app, providing multiple options for sharing media files. |
+| [MessageList](/ui-kit/flutter/v5/message-list) | [MessageList](/ui-kit/flutter/v5/message-list) is a Widget that renders different Media Message bubbles like [Image Bubble](/ui-kit/flutter/v5/message-bubble-styling#image-bubble), [File Bubble](/ui-kit/flutter/v5/message-bubble-styling#file-bubble), [Audio Bubble](/ui-kit/flutter/v5/message-bubble-styling#audio-bubble), [Video Bubble](/ui-kit/flutter/v5/message-bubble-styling#video-bubble) |
+
+***
+
+## Read Receipts
+
+CometChat's Read Receipts feature provides visibility into the message status, letting users know when a message has been delivered and read. This brings clarity to the communication and ensures users are informed about the status of their messages.
+
+
+
+
+
+| Widgets | Functionality |
+| --- | --- |
+| [Conversations](/ui-kit/flutter/v5/conversations) | [Conversations](/ui-kit/flutter/v5/conversations) is a Widget that renders Conversations item List, Conversation item also displays the delivery status of the last message providing users with real-time updates on the status of their messages. |
+| [MessageList](/ui-kit/flutter/v5/message-list) | [MessageList](/ui-kit/flutter/v5/message-list) is a Widget that renders different types of Message bubbles, Read Receipt status is an integral part of all message bubbles, no matter the type, and provides real-time updates about the status of the message. |
+
+***
+
+## Mark As Unread
+
+Mark as Unread feature allows users to manually mark messages as unread, helping them keep track of important conversations they want to revisit later. When enabled, the message list can automatically start from the first unread message, making it easier to pick up where you left off.
+
+
+
+
+
+| Widgets | Functionality |
+| --- | --- |
+| [Message List](/ui-kit/flutter/v5/message-list) | [Message List](/ui-kit/flutter/v5/message-list) provides the "Mark as unread" option in message actions and supports starting from the first unread message when enabled. |
+| [Conversations](/ui-kit/flutter/v5/conversations) | [Conversations](/ui-kit/flutter/v5/conversations) widget listens to conversation updates and reflects the updated unread count in real-time. |
+
+***
+
+## Typing Indicator
+
+The Typing Indicator feature in CometChat shows when a user is typing a response in real-time, fostering a more interactive and engaging chat environment. This feature enhances the real-time communication experience, making conversations feel more natural and fluid.
+
+
+
+
+
+| Widgets | Functionality |
+| --- | --- |
+| [Conversations](/ui-kit/flutter/v5/conversations) | [Conversations](/ui-kit/flutter/v5/conversations) is a Widget that renders Conversations item List, Conversations item also shows real-time typing status indicators. This means that if a user in a one-on-one chat or a participant in a group chat is currently typing a message |
+| [Message Header](/ui-kit/flutter/v5/message-header) | [Message Header](/ui-kit/flutter/v5/message-header) that renders details of User or Groups in ToolBar. The MessageHeader also handles the Typing Indicator functionality. When a user or a member in a group is typing, the MessageHeader dynamically updates to display a 'typing...' status in real-time. |
+
+***
+
+## User Presence
+
+CometChat's User Presence feature allows users to see whether their contacts are online, offline. This helps users know the best time to initiate a conversation and sets expectations about response times.
+
+
+
+
+
+| Widgets | Functionality |
+| --- | --- |
+| [Conversations](/ui-kit/flutter/v5/conversations) | [Conversations](/ui-kit/flutter/v5/conversations) is a Widget that renders Conversations item List, Conversations item also shows user presence information. |
+| [Message Header](/ui-kit/flutter/v5/message-header) | [Message Header](/ui-kit/flutter/v5/message-header) that renders details of User or Groups in ToolBar. The MessageHeader also handles user Presence information. |
+| [Users](/ui-kit/flutter/v5/users) | [Users](/ui-kit/flutter/v5/users) renders list of users available in your app. It also responsible to render users Presence information. |
+| [Group Members](/ui-kit/flutter/v5/group-members) | [Group Members](/ui-kit/flutter/v5/group-members) renders list of users available in the group. The Group Members widget also handles user Presence information. |
+
+***
+
+## Reactions
+
+CometChat's Reactions feature adds a layer of expressiveness to your chat application by allowing users to react to messages. With Reactions, users can convey a range of emotions or express their thoughts on a particular message without typing out a full response, enhancing their user experience and fostering greater engagement.
+
+The number of reactions displayed depends on the width of the view. For instance, if a message contains 5 reactions but the width of the CometChatReactions view can only accommodate 4 reactions at a time, the first three reactions will be shown along with an additional UI element at the end of the row. This element indicates the number of other unique reactions that are not immediately visible, informing users of the total count of different reactions.
+
+In the example, tapping on this element (depicted as "+2" in the provided image) will by default trigger the CometChatReactionList widget. This action opens a modal sheet from the bottom of the screen, displaying all reactions received by the message.
+
+
+
+
+
+| Widgets | Functionality |
+| --- | --- |
+| [MessageList](/ui-kit/flutter/v5/message-list) | [MessageList](/ui-kit/flutter/v5/message-list) is a Widget that renders different types of Message bubbles, Irrespective of the type of message bubble, Reactions are an integral part and offer a more engaging, expressive way for users to respond to messages. |
+
+***
+
+## Mentions
+
+Mentions is a robust feature provided by CometChat that enhances the interactivity and clarity of group or 1-1 chats by allowing users to directly address or refer to specific individuals in a conversation. The feature also supports group mentions like @all, enabling users to quickly notify all members in a group chat simultaneously.
+
+
+
+
+
+| Widgets | Functionality |
+| --- | --- |
+| [Conversations](/ui-kit/flutter/v5/conversations) | [Conversations](/ui-kit/flutter/v5/conversations) widget provides an enhanced user experience by integrating the Mentions feature. This means that from the conversation list itself, users can see where they or someone else have been specifically mentioned. |
+| [MessageComposer](/ui-kit/flutter/v5/message-composer) | [MessageComposer](/ui-kit/flutter/v5/message-composer) is a widget that allows users to craft and send various types of messages, including the usage of the Mentions feature for direct addressing within the conversation. |
+| [MessageList](/ui-kit/flutter/v5/message-list) | [MessageList](/ui-kit/flutter/v5/message-list) is a widget that displays a list of sent and received messages. It also supports the rendering of Mentions, enhancing the readability and interactivity of conversations. |
+
+***
+
+## Rich Text Formatting
+
+Rich Text Formatting allows users to style their messages with bold, italic, strikethrough, code, code blocks, blockquotes, ordered/unordered lists, and links. This brings richer expression to conversations and helps users emphasize key points.
+
+
+
+
+
+| Widgets | Functionality |
+| --- | --- |
+| [CompactMessageComposer](/ui-kit/flutter/v5/compact-message-composer#rich-text-formatting) | [CompactMessageComposer](/ui-kit/flutter/v5/compact-message-composer#rich-text-formatting) provides a built-in rich text editor with formatting toolbar and text selection menu items for bold, italic, strikethrough, code, links, lists, blockquotes, and code blocks. |
+| [MessageList](/ui-kit/flutter/v5/message-list) | [MessageList](/ui-kit/flutter/v5/message-list) renders formatted messages with the appropriate styling automatically applied, ensuring that rich text formatting is displayed exactly as intended by the sender. |
+
+***
+
+## Quoted Reply
+
+Quoted Reply is a robust feature provided by CometChat that enables users to quickly reply to specific messages by selecting the "Reply" option from a message's action menu. This enhances context, keeps conversations organized, and improves overall chat experience in both 1-1 and group chats.
+
+
+
+
+
+| Widgets | Functionality |
+| --- | --- |
+| [MessageList](/ui-kit/flutter/v5/message-list) | [MessageList](/ui-kit/flutter/v5/message-list) supports replying to messages via the "Reply" option. Users can select "Reply" on a message to open the composer with the quoted reply pre-filled, maintaining context. |
+| [MessageComposer](/ui-kit/flutter/v5/message-composer) | [MessageComposer](/ui-kit/flutter/v5/message-composer) works seamlessly with Quoted Message by showing the quoted reply above the input field, letting users compose their response in proper context. |
+
+***
+
+## Conversation and Advanced Search
+
+Conversation and Advanced Search is a powerful feature provided by CometChat that enables users to quickly find conversations, messages, and media across chats in real time. It supports filters, scopes, and custom actions, allowing users to locate content efficiently while keeping the chat experience smooth and intuitive.
+
+
+
+
+
+| Widgets | Functionality |
+| --- | --- |
+| [Search](/ui-kit/flutter/v5/search) | [Search](/ui-kit/flutter/v5/search) allows users to search across conversations and messages in real time. Users can click on a result to open the conversation or jump directly to a specific message. |
+| [Message Header](/ui-kit/flutter/v5/message-header) | [Message Header](/ui-kit/flutter/v5/message-header) shows the search button in the chat header, allowing users to search within a conversation. |
+| [MessageList](/ui-kit/flutter/v5/message-list) | [MessageList](/ui-kit/flutter/v5/message-list) shows the selected message when clicked from search results and highlights it in the message list. |
+| [MessageComposer](/ui-kit/flutter/v5/message-composer) | [MessageComposer](/ui-kit/flutter/v5/message-composer) displays the search input. |
+
+***
+
+## Moderation
+
+CometChat's Message Moderation feature helps maintain a safe and respectful chat environment by automatically filtering and managing inappropriate content. Messages can be automatically blocked or flagged based on predefined rules, ensuring harmful content is handled before it reaches users.
+
+
+
+
+
+
+Learn more about setting up moderation rules and managing content in the [Moderation](/moderation/overview) documentation.
+
+
+| Widgets | Functionality |
+| --- | --- |
+| [Message List](/ui-kit/flutter/v5/message-list) | [Message List](/ui-kit/flutter/v5/message-list) automatically handles moderated messages, displaying blocked content appropriately based on your moderation settings. |
+
+After implementing moderation rules, users can report messages they find inappropriate or harmful. As a next step, you can enable the **[Report Message](#report-message)** feature to allow users to flag messages for review by moderators.
+
+***
+
+## Report Message
+
+The Report Message feature allows users to report inappropriate or harmful messages within the chat. Users can choose from predefined reasons and provide additional remarks for detailed context. This feature helps maintain a safe and respectful chat environment.
+
+
+Learn more about how flagged messages are handled, reviewed, and moderated in the [Flagged Messages](/moderation/flagged-messages) documentation.
+
+
+
+
+
+
+| Widgets | Functionality |
+| --- | --- |
+| [MessageList](/ui-kit/flutter/v5/message-list) | [MessageList](/ui-kit/flutter/v5/message-list) provides the "Report Message" option in the message actions menu, allowing users to initiate the reporting process for inappropriate messages. |
+
+***
+
+## Threaded Conversations
+
+The Threaded Conversations feature enables users to respond directly to a specific message in a chat. This keeps conversations organized and enhances the user experience by maintaining context, especially in group chats.
+
+
+
+
+
+| Widgets | Functionality |
+| --- | --- |
+| [Threaded Messages](/ui-kit/flutter/v5/threaded-messages-header) | [Threaded Messages](/ui-kit/flutter/v5/threaded-messages-header) that displays all replies made to a particular message in a conversation. |
+
+***
+
+## Group Chat
+
+CometChat facilitates Group Chats, allowing users to have conversations with multiple participants simultaneously. This feature is crucial for team collaborations, group discussions, social communities, and more.
+
+
+
+
+
+For a comprehensive understanding and guide on implementing and using the Groups feature in CometChat, you should refer to our detailed guide on [Groups](/ui-kit/flutter/v5/groups).
+
+***
+
+## Next Steps
+
+
+
+ Learn how to send text, media, and custom messages
+
+
+ Display and manage messages with real-time updates
+
+
+ Show conversation lists with typing indicators and receipts
+
+
+ Create and manage group conversations
+
+
+
+***
diff --git a/ui-kit/flutter/custom-mentions-formatter-guide.mdx b/ui-kit/flutter/v5/custom-mentions-formatter-guide.mdx
similarity index 95%
rename from ui-kit/flutter/custom-mentions-formatter-guide.mdx
rename to ui-kit/flutter/v5/custom-mentions-formatter-guide.mdx
index a9322a839..bd527a620 100644
--- a/ui-kit/flutter/custom-mentions-formatter-guide.mdx
+++ b/ui-kit/flutter/v5/custom-mentions-formatter-guide.mdx
@@ -13,7 +13,7 @@ description: "Create a custom mentions formatter to filter suggestions, style me
| Purpose | Customize @mention suggestion behavior — filter who appears, style mentions, handle taps |
| Version | v5.2.13 |
| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
-| Related | [Mentions Formatter](/ui-kit/flutter/mentions-formatter-guide) · [Custom Text Formatter](/ui-kit/flutter/custom-text-formatter-guide) · [All Guides](/ui-kit/flutter/guide-overview) |
+| Related | [Mentions Formatter](/ui-kit/flutter/v5/mentions-formatter-guide) · [Custom Text Formatter](/ui-kit/flutter/v5/custom-text-formatter-guide) · [All Guides](/ui-kit/flutter/v5/guide-overview) |
@@ -362,16 +362,16 @@ CustomMentionsFormatter(
## Next Steps
-
+
Configure the built-in mentions formatter.
-
+
Build custom inline text patterns with regex.
-
+
Customize the standard message input component.
-
+
Customize the compact message input component.
diff --git a/ui-kit/flutter/v5/custom-text-formatter-guide.mdx b/ui-kit/flutter/v5/custom-text-formatter-guide.mdx
new file mode 100644
index 000000000..5cb33667d
--- /dev/null
+++ b/ui-kit/flutter/v5/custom-text-formatter-guide.mdx
@@ -0,0 +1,401 @@
+---
+title: "Custom Text Formatter"
+description: "Extend the CometChatTextFormatter base class to implement custom inline text patterns with regex and callbacks in Flutter."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_chat_uikit` |
+| Key class | `CometChatTextFormatter` (abstract base class for custom formatters) |
+| Required setup | `CometChatUIKit.init(uiKitSettings: uiKitSettings)` then `CometChatUIKit.login("UID")` |
+| Purpose | Extend to create custom inline text patterns with regex, styling, and callbacks |
+| Features | Text formatting, customizable styles, dynamic text replacement, input field integration |
+| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
+| Related | [ShortCut Formatter](/ui-kit/flutter/v5/shortcut-formatter-guide) \| [Mentions Formatter](/ui-kit/flutter/v5/mentions-formatter-guide) \| [Custom Mentions Formatter](/ui-kit/flutter/v5/custom-mentions-formatter-guide) \| [All Guides](/ui-kit/flutter/v5/guide-overview) |
+
+
+
+`CometChatTextFormatter` is an abstract class for formatting text in the message composer and message bubbles. Extend it to build custom formatters — hashtags, keywords, or any regex-based pattern.
+
+| Capability | Description |
+| --- | --- |
+| Text formatting | Auto-format text based on regex patterns and styles |
+| Custom styles | Set colors, fonts, and backgrounds for matched text |
+| Dynamic replacement | Regex-based find-and-replace in user input |
+| Input integration | Real-time monitoring of the composer input field |
+| Attributed text | Build styled text spans for message bubbles |
+
+---
+
+## Steps
+
+### 1. Import the base class
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+```
+
+### 2. Extend CometChatTextFormatter
+
+```dart
+class HashTagTextFormatter extends CometChatTextFormatter {
+ HashTagTextFormatter() : super(
+ trackingCharacter: '#',
+ pattern: RegExp(r'\B#(\w+)\b'),
+ );
+
+ // Override required methods...
+}
+```
+
+### 3. Configure tracking character and regex
+
+Set the character that triggers formatting and the regex to match.
+
+```dart
+HashTagTextFormatter() : super(
+ trackingCharacter: '#',
+ pattern: RegExp(r'\B#(\w+)\b'),
+ showLoadingIndicator: false,
+);
+```
+
+### 4. Implement required methods
+
+```dart
+@override
+void init() {
+ // Initialize formatter
+}
+
+@override
+void handlePreMessageSend(BuildContext context, BaseMessage baseMessage) {
+ // Process message before sending
+}
+
+@override
+TextStyle getMessageInputTextStyle(BuildContext context) {
+ return TextStyle(color: Colors.blue);
+}
+
+@override
+void onScrollToBottom(TextEditingController textEditingController) {
+ // Handle scroll events
+}
+
+@override
+void onChange(TextEditingController textEditingController, String previousText) {
+ // Handle text changes
+}
+```
+
+### 5. Customize message bubble styling
+
+```dart
+@override
+TextStyle getMessageBubbleTextStyle(
+ BuildContext context,
+ BubbleAlignment? alignment,
+ {bool forConversation = false}
+) {
+ return TextStyle(
+ color: alignment == BubbleAlignment.right
+ ? Colors.white
+ : Colors.blue,
+ fontWeight: FontWeight.bold,
+ decoration: TextDecoration.underline,
+ );
+}
+```
+
+---
+
+## Example
+
+A hashtag formatter used with [CometChatMessageList](/ui-kit/flutter/v5/message-list) and [CometChatMessageComposer](/ui-kit/flutter/v5/message-composer).
+
+{/*
+
+ */}
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:flutter/material.dart';
+
+class HashTagTextFormatter extends CometChatTextFormatter {
+ HashTagTextFormatter() : super(
+ trackingCharacter: '#',
+ pattern: RegExp(r'\B#(\w+)\b'),
+ showLoadingIndicator: false,
+ );
+
+ @override
+ void init() {
+ // Initialization logic
+ }
+
+ @override
+ void handlePreMessageSend(BuildContext context, BaseMessage baseMessage) {
+ // Process hashtags before sending
+ }
+
+ @override
+ TextStyle getMessageInputTextStyle(BuildContext context) {
+ CometChatColorPalette colorPalette = CometChatThemeHelper.getColorPalette(context);
+ return TextStyle(
+ color: colorPalette.primary,
+ fontWeight: FontWeight.w500,
+ );
+ }
+
+ @override
+ TextStyle getMessageBubbleTextStyle(
+ BuildContext context,
+ BubbleAlignment? alignment,
+ {bool forConversation = false}
+ ) {
+ CometChatColorPalette colorPalette = CometChatThemeHelper.getColorPalette(context);
+ return TextStyle(
+ color: alignment == BubbleAlignment.right
+ ? colorPalette.white
+ : colorPalette.primary,
+ fontWeight: FontWeight.bold,
+ decoration: TextDecoration.underline,
+ );
+ }
+
+ @override
+ void onScrollToBottom(TextEditingController textEditingController) {
+ // Handle scroll to bottom
+ }
+
+ @override
+ void onChange(TextEditingController textEditingController, String previousText) {
+ // Handle text changes - detect new hashtags
+ String currentText = textEditingController.text;
+ if (currentText.contains('#')) {
+ // Process hashtag
+ }
+ }
+
+ @override
+ List getAttributedText(
+ String text,
+ BuildContext context,
+ BubbleAlignment? alignment,
+ {List? existingAttributes,
+ Function(String)? onTap,
+ bool forConversation = false}
+ ) {
+ return super.getAttributedText(
+ text,
+ context,
+ alignment,
+ existingAttributes: existingAttributes,
+ onTap: onTap ?? (hashtag) {
+ // Handle hashtag tap - e.g., search for hashtag
+ print('Tapped hashtag: $hashtag');
+ },
+ forConversation: forConversation,
+ );
+ }
+}
+```
+
+
+
+
+
+Pass the formatter via the `textFormatters` property.
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:flutter/material.dart';
+
+class MessageListDemo extends StatefulWidget {
+ const MessageListDemo({super.key});
+
+ @override
+ State createState() => _MessageListDemoState();
+}
+
+class _MessageListDemoState extends State {
+ User? chatUser;
+
+ @override
+ void initState() {
+ super.initState();
+ CometChat.getUser("uid").then((user) {
+ setState(() {
+ chatUser = user;
+ });
+ });
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ if (chatUser == null) {
+ return const Center(child: CircularProgressIndicator());
+ }
+
+ return CometChatMessageList(
+ user: chatUser,
+ textFormatters: [HashTagTextFormatter()],
+ );
+ }
+}
+```
+
+
+
+
+---
+
+## Methods Reference
+
+| Field | Description |
+| --- | --- |
+| `trackingCharacter` | Character that starts tracking (e.g. `#` for hashtags) |
+| `pattern` | Regex pattern to match text for formatting |
+| `showLoadingIndicator` | Whether to show loading indicator during search |
+| `messageBubbleTextStyle` | Function to style message bubble text |
+| `messageInputTextStyle` | Function to style composer input text |
+| `message` | Current message being processed |
+| `user` | User context for the formatter |
+| `group` | Group context for the formatter |
+
+---
+
+## Override Methods
+
+
+
+
+Initialize the formatter. Called when the formatter is first used.
+
+```dart
+@override
+void init() {
+ // Setup any initial state
+}
+```
+
+
+
+
+
+Process the message before it's sent. Use this to modify message metadata.
+
+```dart
+@override
+void handlePreMessageSend(BuildContext context, BaseMessage baseMessage) {
+ // Add hashtag metadata to message
+ if (baseMessage is TextMessage) {
+ final hashtags = pattern?.allMatches(baseMessage.text)
+ .map((m) => m.group(1))
+ .toList();
+ // Store hashtags in message metadata
+ }
+}
+```
+
+
+
+
+
+Returns the TextStyle for formatted text in message bubbles.
+
+```dart
+@override
+TextStyle getMessageBubbleTextStyle(
+ BuildContext context,
+ BubbleAlignment? alignment,
+ {bool forConversation = false}
+) {
+ return TextStyle(
+ color: Colors.blue,
+ fontWeight: FontWeight.bold,
+ );
+}
+```
+
+
+
+
+
+Returns styled text spans for the message bubble.
+
+```dart
+@override
+List getAttributedText(
+ String text,
+ BuildContext context,
+ BubbleAlignment? alignment,
+ {List? existingAttributes,
+ Function(String)? onTap,
+ bool forConversation = false}
+) {
+ // Return attributed text with styling
+ return super.getAttributedText(
+ text, context, alignment,
+ existingAttributes: existingAttributes,
+ onTap: onTap,
+ forConversation: forConversation,
+ );
+}
+```
+
+
+
+
+
+Called when text changes in the composer.
+
+```dart
+@override
+void onChange(TextEditingController textEditingController, String previousText) {
+ // Detect and process new patterns
+}
+```
+
+
+
+
+---
+
+## Built-in Formatters
+
+Flutter UI Kit includes these pre-built formatters:
+
+| Formatter | Description |
+| --- | --- |
+| `CometChatMentionsFormatter` | @mentions with user suggestions |
+| `CometChatUrlFormatter` | Auto-detect and style URLs |
+| `CometChatEmailFormatter` | Auto-detect and style email addresses |
+| `CometChatPhoneNumberFormatter` | Auto-detect and style phone numbers |
+
+---
+
+## Next Steps
+
+
+
+ Add @mentions with styled tokens.
+
+
+ Build a custom mentions formatter with filtered suggestions.
+
+
+ Customize the message input component.
+
+
+ Browse all feature and formatter guides.
+
+
+ Full working sample application on GitHub.
+
+
diff --git a/ui-kit/flutter/v5/events.mdx b/ui-kit/flutter/v5/events.mdx
new file mode 100644
index 000000000..229f7e70a
--- /dev/null
+++ b/ui-kit/flutter/v5/events.mdx
@@ -0,0 +1,744 @@
+---
+title: "Events"
+description: "Listen to and handle real-time events for users, groups, conversations, messages, calls, and UI interactions in Flutter UI Kit"
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_chat_uikit` |
+| Conversation events | `ccConversationDeleted`, `ccUpdateConversation` |
+| User events | `ccUserBlocked`, `ccUserUnblocked` |
+| Group events | `ccGroupCreated`, `ccGroupDeleted`, `ccGroupLeft`, `ccGroupMemberScopeChanged`, `ccGroupMemberKicked`, `ccGroupMemberBanned`, `ccGroupMemberUnbanned`, `ccGroupMemberJoined`, `ccGroupMemberAdded`, `ccOwnershipChanged` |
+| Message events | `ccMessageSent`, `ccMessageEdited`, `ccReplyToMessage`, `ccMessageDeleted`, `ccMessageRead`, `ccLiveReaction`, `ccMessageForwarded`, plus SDK listener events |
+| Call events | `ccOutgoingCall`, `ccCallAccepted`, `ccCallRejected`, `ccCallEnded` |
+| UI events | `ccActiveChatChanged`, `showPanel`, `hidePanel`, `openChat`, `ccComposeMessage`, `onAiFeatureTapped` |
+| Purpose | Decoupled communication between UI Kit components — subscribe to events to react to changes without direct component references |
+
+
+
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```dart
+// Add event listener
+CometChatMessageEvents.addMessagesListener("LISTENER_ID", this);
+
+// Remove event listener
+CometChatMessageEvents.removeMessagesListener("LISTENER_ID");
+
+// Implement listener methods
+@override
+void ccMessageSent(BaseMessage message, MessageStatus messageStatus) {
+ // Handle message sent event
+}
+```
+
+**Available Event Types:**
+- **User Events** → Block/Unblock users
+- **Group Events** → Create, delete, join, leave groups
+- **Conversation Events** → Delete conversations, update conversations
+- **Message Events** → Send, edit, delete, receive messages, reactions, AI messages
+- **Call Events** → Outgoing, accepted, rejected, ended calls
+- **UI Events** → Show/hide panels, active chat changes
+
+
+Events allow for a decoupled, flexible architecture where different parts of the application can interact without having to directly reference each other. This makes it easier to create complex, interactive experiences, as well as to extend and customize the functionality provided by the CometChat UI Kit.
+
+Both Components and Composite Components have the ability to emit events. These events are dispatched in response to certain changes or user interactions within the component. By emitting events, these components allow other parts of the application to react to changes or interactions, thus enabling dynamic and interactive behavior within the application.
+
+***
+
+## User Events
+
+`CometChatUserEvents` emit events when the logged-in user executes actions on another user. This class provides methods to add and remove listeners for user events, as well as methods to handle specific user actions such as blocking and unblocking users.
+
+**Available Events:**
+
+1. `ccUserBlocked`: Triggered when the logged-in user blocks another user.
+2. `ccUserUnblocked`: Triggered when the logged-in user unblocks another user.
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:flutter/material.dart';
+
+class UserEventsExample extends StatefulWidget {
+ const UserEventsExample({super.key});
+
+ @override
+ State createState() => _UserEventsExampleState();
+}
+
+class _UserEventsExampleState extends State with CometChatUserEventListener {
+ String listenerID = "unique_listener_ID";
+
+ @override
+ void initState() {
+ super.initState();
+
+ CometChatUserEvents.addUsersListener(listenerID, this); // Add the listener
+ }
+
+ @override
+ void dispose() {
+ super.dispose();
+
+ CometChatUserEvents.removeUsersListener(listenerID); // Remove the listener
+ }
+
+ @override
+ void ccUserBlocked(User user) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccUserUnblocked(User user) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return const Placeholder();
+ }
+}
+```
+
+
+
+***
+
+## Group Events
+
+`CometChatGroupEvents` Emits events when the logged-in user performs actions related to groups. This class provides methods to listen to various group-related events and handle them accordingly.
+
+**Available Events:**
+
+1. `ccGroupCreated`: Triggered when the logged-in user creates a group.
+2. `ccGroupDeleted`: Triggered when the logged-in user deletes a group.
+3. `ccGroupLeft`: Triggered when the logged-in user leaves a group.
+4. `ccGroupMemberScopeChanged`: Triggered when the logged-in user changes the scope of another group member.
+5. `ccGroupMemberBanned`: Triggered when the logged-in user bans a group member from the group.
+6. `ccGroupMemberKicked`: Triggered when the logged-in user kicks another group member from the group.
+7. `ccGroupMemberUnbanned`: Triggered when the logged-in user unbans a user banned from the group.
+8. `ccGroupMemberJoined`: Triggered when the logged-in user joins a group.
+9. `ccGroupMemberAdded`: Triggered when the logged-in user adds new members to the group.
+10. `ccOwnershipChanged`: Triggered when the logged-in user transfers the ownership of their group to some other member.
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart' as sdk;
+import 'package:flutter/material.dart';
+
+class GroupEventsExample extends StatefulWidget {
+ const GroupEventsExample({super.key});
+
+ @override
+ State createState() => _GroupEventsExampleState();
+}
+
+class _GroupEventsExampleState extends State with CometChatGroupEventListener {
+ String listenerID = "unique_listener_ID";
+
+ @override
+ void initState() {
+ super.initState();
+
+ CometChatGroupEvents.addGroupsListener(listenerID, this); // Add the listener
+ }
+
+ @override
+ void dispose() {
+ super.dispose();
+
+ CometChatGroupEvents.removeGroupsListener(listenerID); // Remove the listener
+ }
+
+ @override
+ void ccGroupCreated(Group group) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccGroupDeleted(Group group) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccGroupLeft(sdk.Action message, User leftUser, Group leftGroup) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccGroupMemberScopeChanged(sdk.Action message, User updatedUser, String scopeChangedTo, String scopeChangedFrom, Group group) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccGroupMemberBanned(sdk.Action message, User bannedUser, User bannedBy, Group bannedFrom) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccGroupMemberKicked(sdk.Action message, User kickedUser, User kickedBy, Group kickedFrom) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccGroupMemberUnbanned(sdk.Action message, User unbannedUser, User unbannedBy, Group unbannedFrom) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccGroupMemberJoined(User joinedUser, Group joinedGroup) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccGroupMemberAdded(List messages, List usersAdded, Group groupAddedIn, User addedBy) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccOwnershipChanged(Group group, GroupMember newOwner) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return const Placeholder();
+ }
+}
+```
+
+
+
+***
+
+## Conversation Events
+
+The `CometChatConversationEvents` component emits events when the logged-in user performs actions related to conversations. This allows for the UI to be updated accordingly.
+
+**Available Events:**
+
+1. `ccConversationDeleted`: Triggered when the logged-in user deletes a conversation.
+2. `ccUpdateConversation`: Triggered when a conversation is updated (e.g., unread count changes).
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:flutter/material.dart';
+
+class ConversationEventsExample extends StatefulWidget {
+ const ConversationEventsExample({super.key});
+
+ @override
+ State createState() => _ConversationEventsExampleState();
+}
+
+class _ConversationEventsExampleState extends State with CometChatConversationEventListener {
+ String listenerID = "unique_listener_ID";
+
+ @override
+ void initState() {
+ super.initState();
+
+ CometChatConversationEvents.addConversationListListener(listenerID, this); // Add the listener
+ }
+
+ @override
+ void dispose() {
+ super.dispose();
+
+ CometChatConversationEvents.removeConversationListListener(listenerID); // Remove the listener
+ }
+
+ @override
+ void ccConversationDeleted(Conversation conversation) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccUpdateConversation(Conversation conversation) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return const Placeholder();
+ }
+}
+```
+
+
+
+***
+
+## Message Events
+
+`CometChatMessageEvents` emits events when various actions are performed on messages within the application. These events facilitate updating the UI accordingly.
+
+**Available Events:**
+
+1. `ccMessageSent`: Triggered whenever a logged-in user sends any message. It can have two states: `inProgress` and `sent`.
+2. `ccMessageEdited`: Triggered whenever a logged-in user edits any message from the list of messages. It can have two states: `inProgress` and `sent`.
+3. `ccMessageDeleted`: Triggered whenever a logged-in user deletes any message from the list of messages.
+4. `ccMessageRead`: Triggered whenever a logged-in user reads any message.
+5. `ccLiveReaction`: Triggered whenever a logged-in user clicks on a live reaction.
+6. `ccMessageForwarded`: Triggered whenever a logged-in user forwards any message to a list of users or groups. It can have a state of `status`.
+7. `onTextMessageReceived`: Triggered when a text message is received.
+8. `onMediaMessageReceived`: Triggered when a media message is received.
+9. `onCustomMessageReceived`: Triggered when a custom message is received.
+10. `onTypingStarted`: Triggered when a typing indicator starts.
+11. `onTypingEnded`: Triggered when a typing indicator ends.
+12. `onMessagesDelivered`: Triggered when messages are delivered.
+13. `onMessagesRead`: Triggered when messages are read.
+14. `onMessageEdited`: Triggered when a message is edited.
+15. `onMessageDeleted`: Triggered when a message is deleted.
+16. `onTransientMessageReceived`: Triggered when a transient message is received.
+17. `onFormMessageReceived`: Triggered when a form message is received.
+18. `onCardMessageReceived`: Triggered when a card message is received.
+19. `onCustomInteractiveMessageReceived`: Triggered when a custom interactive message is received.
+20. `onInteractionGoalCompleted`: Triggered when an interaction goal is completed.
+21. `onSchedulerMessageReceived`: Triggered when a scheduler message is received.
+22. `onMessageReactionAdded`: Triggered when a reaction is added to a message.
+23. `onMessageReactionRemoved`: Triggered when a reaction is removed from a message.
+24. `ccReplyToMessage`: Triggered when the logged-in user replies to a message.
+25. `onMessagesDeliveredToAll`: Triggered when messages are delivered to all recipients.
+26. `onMessagesReadByAll`: Triggered when messages are read by all recipients.
+27. `onMessageModerated`: Triggered when a message is moderated.
+28. `onAIAssistantMessageReceived`: Triggered when an AI Assistant message is received.
+29. `onAIToolResultReceived`: Triggered when an AI tool result is received.
+30. `onAIToolArgumentsReceived`: Triggered when AI tool arguments are received.
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:flutter/material.dart';
+
+class MessageEventsExample extends StatefulWidget {
+ const MessageEventsExample({super.key});
+
+ @override
+ State createState() => _MessageEventsExampleState();
+}
+
+class _MessageEventsExampleState extends State with CometChatMessageEventListener {
+ String listenerID = "unique_listener_ID";
+
+ @override
+ void initState() {
+ super.initState();
+
+ CometChatMessageEvents.addMessagesListener(listenerID, this); // Add the listener
+ }
+
+ @override
+ void dispose() {
+ super.dispose();
+
+ CometChatMessageEvents.removeMessagesListener(listenerID); // Remove the listener
+ }
+
+ @override
+ void ccMessageSent(BaseMessage message, MessageStatus messageStatus) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccMessageEdited(BaseMessage message, MessageEditStatus status) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccMessageDeleted(BaseMessage message, EventStatus messageStatus) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccMessageRead(BaseMessage message) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccLiveReaction(String reaction) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccMessageForwarded(BaseMessage message, List? usersSent, List? groupsSent, MessageStatus status) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccReplyToMessage(BaseMessage message, MessageStatus status) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onTextMessageReceived(TextMessage textMessage) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onMediaMessageReceived(MediaMessage mediaMessage) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onCustomMessageReceived(CustomMessage customMessage) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onTypingStarted(TypingIndicator typingIndicator) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onTypingEnded(TypingIndicator typingIndicator) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onMessagesDelivered(MessageReceipt messageReceipt) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onMessagesRead(MessageReceipt messageReceipt) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onMessageEdited(BaseMessage message) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onMessageDeleted(BaseMessage message) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onTransientMessageReceived(TransientMessage message) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onFormMessageReceived(FormMessage formMessage) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onCardMessageReceived(CardMessage cardMessage) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onCustomInteractiveMessageReceived(
+ CustomInteractiveMessage customInteractiveMessage) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onInteractionGoalCompleted(InteractionReceipt receipt) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onSchedulerMessageReceived(SchedulerMessage schedulerMessage) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onMessageReactionAdded(ReactionEvent reactionEvent) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onMessageReactionRemoved(ReactionEvent reactionEvent) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccReplyToMessage(BaseMessage message, MessageStatus status) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onMessagesDeliveredToAll(MessageReceipt messageReceipt) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onMessagesReadByAll(MessageReceipt messageReceipt) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onMessageModerated(BaseMessage message) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onAIAssistantMessageReceived(AIAssistantMessage aiAssistantMessage) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onAIToolResultReceived(AIToolResultMessage aiToolResultMessage) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onAIToolArgumentsReceived(AIToolArgumentMessage aiToolArgumentMessage) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return const Placeholder();
+ }
+}
+```
+
+
+
+***
+
+## Call Events
+
+`CometChatCallEvents` emits events related to calls within the application. This class provides methods to listen to call-related events and handle them accordingly.
+
+**Available Events:**
+
+1. `ccOutgoingCall`: Triggered when the logged-in user initiates an outgoing call.
+2. `ccCallAccepted`: Triggered when a call is accepted.
+3. `ccCallRejected`: Triggered when a call is rejected.
+4. `ccCallEnded`: Triggered when a call is ended.
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:flutter/material.dart';
+
+class CallEventsExample extends StatefulWidget {
+ const CallEventsExample({super.key});
+
+ @override
+ State createState() => _CallEventsExampleState();
+}
+
+class _CallEventsExampleState extends State with CometChatCallEventListener {
+ String listenerID = "unique_listener_ID";
+
+ @override
+ void initState() {
+ super.initState();
+
+ CometChatCallEvents.addCallEventsListener(listenerID, this); // Add the listener
+ }
+
+ @override
+ void dispose() {
+ super.dispose();
+
+ CometChatCallEvents.removeCallEventsListener(listenerID); // Remove the listener
+ }
+
+ @override
+ void ccOutgoingCall(Call call) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccCallAccepted(Call call) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccCallRejected(Call call) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccCallEnded(Call call) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return const Placeholder();
+ }
+}
+```
+
+
+
+***
+
+## UI Events
+
+`CometChatUIEvents` emits events related to UI components within the CometChat UI. This class provides methods to listen to UI-related events and handle them accordingly.
+
+**Available Events:**
+
+1. `showPanel`: Triggered to show an additional UI panel with custom elements.
+2. `hidePanel`: Triggered to hide a previously shown UI panel.
+3. `ccActiveChatChanged`: Triggered when the active chat changes, providing information about the current message, user, and group.
+4. `openChat`: Triggered to open a chat with a specific user or group.
+5. `ccComposeMessage`: Triggered when composing a message with a specific text and status.
+6. `onAiFeatureTapped`: Triggered when an AI feature is tapped for a specific user or group.
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:flutter/material.dart';
+
+class UIEventsExample extends StatefulWidget {
+ const UIEventsExample({super.key});
+
+ @override
+ State createState() => _UIEventsExampleState();
+}
+
+class _UIEventsExampleState extends State with CometChatUIEventListener {
+ String listenerID = "unique_listener_ID";
+
+ @override
+ void initState() {
+ super.initState();
+
+ CometChatUIEvents.addUiListener(listenerID, this); // Add the listener
+ }
+
+ @override
+ void dispose() {
+ super.dispose();
+
+ CometChatUIEvents.removeUiListener(listenerID); // Remove the listener
+ }
+
+ @override
+ void showPanel(Map? id, CustomUIPosition uiPosition, WidgetBuilder child) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void hidePanel(Map? id, CustomUIPosition uiPosition) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccActiveChatChanged(Map? id, BaseMessage? lastMessage, User? user, Group? group, int unreadMessageCount) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void openChat(User? user, Group? group) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccComposeMessage(String text, MessageEditStatus status) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onAiFeatureTapped(User? user, Group? group) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return const Placeholder();
+ }
+}
+```
+
+
+
+***
+
+## Best Practices
+
+
+
+ Always remove event listeners in the `dispose()` method to prevent memory leaks:
+
+
+
+ ```dart
+ @override
+ void dispose() {
+ super.dispose();
+ CometChatMessageEvents.removeMessagesListener(listenerID);
+ }
+ ```
+
+
+
+
+
+ Use unique listener IDs for each widget to avoid conflicts:
+
+
+
+ ```dart
+ String listenerID = "message_list_${widget.key}";
+ ```
+
+
+
+
+
+ Keep event handlers lightweight and avoid heavy operations:
+
+
+
+ ```dart
+ @override
+ void ccMessageSent(BaseMessage message, MessageStatus messageStatus) {
+ if (messageStatus == MessageStatus.sent) {
+ // Update UI efficiently
+ setState(() {
+ // Minimal state update
+ });
+ }
+ }
+ ```
+
+
+
+
+
+***
+
+## Next Steps
+
+
+
+ Learn how to display and manage messages with events
+
+
+ Handle conversation events and updates
+
+
+ Manage group events and member actions
+
+
+ Explore available methods for UI Kit operations
+
+
+
+***
diff --git a/ui-kit/flutter/v5/extensions.mdx b/ui-kit/flutter/v5/extensions.mdx
new file mode 100644
index 000000000..7da0bd4e7
--- /dev/null
+++ b/ui-kit/flutter/v5/extensions.mdx
@@ -0,0 +1,255 @@
+---
+title: "Extensions"
+sidebarTitle: "Extensions"
+description: "Enhance your chat with built-in extensions including stickers, polls, collaborative tools, message translation, and link previews"
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_chat_uikit` |
+| Required setup | `CometChatUIKit.init(uiKitSettings: UIKitSettings)` then `CometChatUIKit.login(uid)` + Extensions enabled in [CometChat Dashboard](/fundamentals/extensions-overview) |
+| Extension categories | User Experience, User Engagement, Collaboration, Security |
+| Key components | `CometChatMessageComposer` → [Message Composer](/ui-kit/flutter/v5/message-composer) (Stickers, Polls, Whiteboard, Document), `CometChatMessageList` → [Message List](/ui-kit/flutter/v5/message-list) (Translation, Link Preview, Thumbnails) |
+| Activation | Enable each extension from the CometChat Dashboard — UI Kit auto-integrates them, no additional code required |
+
+
+
+CometChat's UI Kit comes with built-in support for a wide variety of extensions that provide additional functionality. These extensions enhance the chatting experience, making it more interactive, secure, and efficient.
+
+Activating any of the extensions in CometChat is a simple process done through your application's dashboard. Refer to our guide for detailed information on [Extensions](/fundamentals/extensions-overview).
+
+Once you have successfully enabled the desired extension in your dashboard, it will be reflected in your CometChat application upon initialization and successful login. The extension features will only be available if they are supported by CometChat UI Kit.
+
+***
+
+## Built-in Extensions
+
+The grouping below mirrors the CometChat Dashboard.
+
+### User Experience
+
+#### Link Preview
+
+The Link Preview extension provides a summary of the URL shared in the chat. It includes the title, a description, and a thumbnail image from the web page. For a comprehensive understanding and guide on implementing and using the Link Preview Extension, refer to our specific guide on the [Link Preview Extension](/fundamentals/link-preview).
+
+Once you have successfully activated the [Link Preview Extension](/fundamentals/link-preview) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Widget](/ui-kit/flutter/v5/message-list) widget of UI Kits.
+
+
+
+
+
+***
+
+#### Thumbnail Generation
+
+The Thumbnail Generation extension automatically creates a smaller preview image whenever a larger image is shared, helping to reduce the upload/download time and bandwidth usage. For a comprehensive understanding and guide on implementing and using the Thumbnail Generation Extension, refer to our specific guide on the [Thumbnail Generation Extension](/fundamentals/thumbnail-generation).
+
+Once you have successfully activated the [Thumbnail Generation Extension](/fundamentals/thumbnail-generation) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Widget](/ui-kit/flutter/v5/message-list) widget of UI Kits.
+
+
+
+
+
+***
+
+#### Bitly
+
+Shortens long URLs in text messages using Bitly. See [Bitly Extension](/fundamentals/bitly).
+
+***
+
+#### TinyURL
+
+URL shortening using TinyURL. See [TinyURL Extension](/fundamentals/tinyurl).
+
+***
+
+#### Message Shortcuts
+
+Sends predefined messages using short codes (e.g., `!hb` expands to `Happy birthday!`). See [Message Shortcuts Extension](/fundamentals/message-shortcuts).
+
+***
+
+#### Pin Message
+
+Pins important messages in a conversation for easy access. See [Pin Message Extension](/fundamentals/pin-message).
+
+***
+
+#### Save Message
+
+Bookmarks messages for later reference. Saved messages are private to the user. See [Save Message Extension](/fundamentals/save-message).
+
+***
+
+#### Rich Media Preview
+
+Generates rich preview panels for URLs using iFramely. See [Rich Media Preview Extension](/fundamentals/rich-media-preview).
+
+***
+
+#### Voice Transcription
+
+Converts audio messages to text. See [Voice Transcription Extension](/fundamentals/voice-transcription).
+
+***
+
+### User Engagement
+
+#### Stickers
+
+The Stickers extension allows users to express their emotions more creatively. It adds a much-needed fun element to the chat by allowing users to send various pre-designed stickers. For a comprehensive understanding and guide on implementing and using the Sticker Extension, refer to our specific guide on the [Sticker Extension](/fundamentals/stickers).
+
+Once you have successfully activated the [Sticker Extension](/fundamentals/stickers) from your CometChat Dashboard, the feature will automatically be incorporated into the [Message Composer](/ui-kit/flutter/v5/message-composer) widget of UI Kits.
+
+
+
+
+
+***
+
+#### Polls
+
+The Polls extension enhances group discussions by allowing users to create polls. Users can ask questions with a predefined list of answers, enabling a quick, organized way to gather group opinions. For a comprehensive understanding and guide on implementing and using the Polls Extension, refer to our specific guide on the [Polls Extension](/fundamentals/polls).
+
+Once you have successfully activated the [Polls Extension](/fundamentals/polls) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/flutter/v5/message-composer) widget of UI Kits.
+
+
+
+
+
+***
+
+#### Message Translation
+
+The Message Translation extension in CometChat is designed to translate any message into your local locale. It eliminates language barriers, making the chat more inclusive. For a comprehensive understanding and guide on implementing and using the Message Translation Extension, refer to our specific guide on the [Message Translation Extension](/fundamentals/message-translation).
+
+Once you have successfully activated the [Message Translation Extension](/fundamentals/message-translation) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of [MessageList Widget](/ui-kit/flutter/v5/message-list) widget of UI Kits.
+
+
+
+
+
+***
+
+#### Giphy
+
+Search and share GIFs from Giphy. See [Giphy Extension](/fundamentals/giphy).
+
+***
+
+#### Tenor
+
+Search and share GIFs from Tenor. See [Tenor Extension](/fundamentals/tenor).
+
+***
+
+#### Stipop
+
+Integrates Stipop's sticker library. See [Stipop Extension](/fundamentals/stickers-stipop).
+
+***
+
+#### Reminders
+
+Sets reminders for messages or creates personal reminders. A bot sends a notification when due. See [Reminders Extension](/fundamentals/reminders).
+
+***
+
+### Collaboration
+
+#### Collaborative Whiteboard
+
+The Collaborative Whiteboard extension facilitates real-time collaboration. Users can draw, brainstorm, and share ideas on a shared digital whiteboard. For a comprehensive understanding and guide on implementing and using the Collaborative Whiteboard Extension, refer to our specific guide on the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard).
+
+Once you have successfully activated the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/flutter/v5/message-composer) widget of UI Kits.
+
+
+
+
+
+***
+
+#### Collaborative Document
+
+With the Collaborative Document extension, users can work together on a shared document. This feature is essential for remote teams where document collaboration is a recurring requirement. For a comprehensive understanding and guide on implementing and using the Collaborative Document Extension, refer to our specific guide on the [Collaborative Document Extension](/fundamentals/collaborative-document).
+
+Once you have successfully activated the [Collaborative Document Extension](/fundamentals/collaborative-document) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/flutter/v5/message-composer) widget of UI Kits.
+
+
+
+
+
+***
+
+### Security
+
+#### Disappearing Messages
+
+Messages auto-delete after a specified interval. Works for 1:1 and group messages. See [Disappearing Messages Extension](/fundamentals/disappearing-messages).
+
+***
+
+### Customer Support
+
+#### Chatwoot
+
+Routes user messages to Chatwoot for customer support. See [Chatwoot Extension](/fundamentals/chatwoot).
+
+***
+
+#### Intercom
+
+Integrates Intercom for in-app customer support. See [Intercom Extension](/fundamentals/intercom).
+
+***
+
+### Smart Chat Features
+
+For AI-powered features like Conversation Starter, Smart Replies, and Conversation Summary, see [AI Features](/ui-kit/flutter/v5/ai-features).
+
+***
+
+## Enabling Extensions
+
+To enable extensions in your Flutter app, configure them during initialization:
+
+
+
+```dart
+UIKitSettings uiKitSettings = (UIKitSettingsBuilder()
+ ..appId = "YOUR_APP_ID"
+ ..region = "YOUR_REGION"
+ ..authKey = "YOUR_AUTH_KEY"
+ ..subscriptionType = CometChatSubscriptionType.allUsers
+ ..extensions = CometChatUIKitChatExtensions.getDefaultExtensions() // Enable all default extensions
+).build();
+
+await CometChatUIKit.init(uiKitSettings: uiKitSettings);
+```
+
+
+
+
+***
+
+## Next Steps
+
+
+
+ Learn how extensions integrate with the message composer
+
+
+ See how extensions enhance message display
+
+
+ Explore all available extensions in detail
+
+
+ Enable extensions from your CometChat Dashboard
+
+
+
+***
diff --git a/ui-kit/flutter/v5/flutter-conversation.mdx b/ui-kit/flutter/v5/flutter-conversation.mdx
new file mode 100644
index 000000000..9d71c3214
--- /dev/null
+++ b/ui-kit/flutter/v5/flutter-conversation.mdx
@@ -0,0 +1,149 @@
+---
+title: "Conversation List + Message View"
+sidebarTitle: "Conversation + Message"
+description: "Build a two-panel chat interface with conversation list and message view using Flutter UI Kit widgets."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_chat_uikit` |
+| Framework | Flutter |
+| Components | `CometChatConversations`, `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` |
+| Layout | Two-panel — conversation list + message view with Navigator push |
+| Prerequisite | Complete [Getting Started](/ui-kit/flutter/v5/getting-started) Steps 1–4 first |
+| Pattern | WhatsApp, Telegram, Slack |
+
+
+
+This guide builds a two-panel chat layout — conversation list that navigates to a message screen. Users tap a conversation to open it.
+
+This assumes you've already completed [Getting Started](/ui-kit/flutter/v5/getting-started) (project created, UI Kit installed, init + login working).
+
+
+
+
+
+[View Sample App on GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app)
+
+---
+
+## What You're Building
+
+Two screens working together:
+
+1. **Conversation list** — shows all active conversations (users and groups)
+2. **Message screen** — header + messages + composer for the selected conversation
+
+---
+
+## Step 1 — Create the Conversations Screen
+
+The `CometChatConversations` widget displays all conversations. Tapping one navigates to the message screen.
+
+```dart title="lib/conversations_page.dart"
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'messages_screen.dart';
+
+class ConversationsPage extends StatelessWidget {
+ const ConversationsPage({super.key});
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: SafeArea(
+ child: CometChatConversations(
+ onItemTap: (conversation) {
+ final target = conversation.conversationWith;
+ Navigator.push(
+ context,
+ MaterialPageRoute(
+ builder: (_) => MessagesScreen(
+ user: target is User ? target : null,
+ group: target is Group ? target : null,
+ ),
+ ),
+ );
+ },
+ ),
+ ),
+ );
+ }
+}
+```
+
+Key points:
+- `onItemTap` fires when a conversation is tapped, passing the `Conversation` object.
+- `conversationWith` returns either a `User` or `Group` — pass the correct one to the message screen.
+
+---
+
+## Step 2 — Create the Messages Screen
+
+The message screen combines header, message list, and composer.
+
+```dart title="lib/messages_screen.dart"
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+class MessagesScreen extends StatelessWidget {
+ final User? user;
+ final Group? group;
+
+ const MessagesScreen({super.key, this.user, this.group});
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ appBar: CometChatMessageHeader(user: user, group: group),
+ body: SafeArea(
+ child: Column(
+ children: [
+ Expanded(
+ child: CometChatMessageList(user: user, group: group),
+ ),
+ CometChatMessageComposer(user: user, group: group),
+ ],
+ ),
+ ),
+ );
+ }
+}
+```
+
+| Component | Purpose |
+| --- | --- |
+| `CometChatMessageHeader` | Shows conversation title, avatar, and call buttons |
+| `CometChatMessageList` | Displays messages with real-time updates |
+| `CometChatMessageComposer` | Input field for text, media, and attachments |
+
+---
+
+## Step 3 — Run the App
+
+```bash
+flutter run
+```
+
+You should see the conversation list. Tapping a conversation navigates to the message screen.
+
+---
+
+## Next Steps
+
+
+
+ Customize the conversation list
+
+
+ Customize the message view
+
+
+ Customize colors and styles
+
+
+ Handle real-time events
+
+
diff --git a/ui-kit/flutter/v5/flutter-one-to-one-chat.mdx b/ui-kit/flutter/v5/flutter-one-to-one-chat.mdx
new file mode 100644
index 000000000..008824683
--- /dev/null
+++ b/ui-kit/flutter/v5/flutter-one-to-one-chat.mdx
@@ -0,0 +1,166 @@
+---
+title: "One-to-One / Group Chat"
+sidebarTitle: "One-to-One / Group Chat"
+description: "Build a focused one-to-one or group chat experience in Flutter with CometChat UI Kit."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_chat_uikit` |
+| Framework | Flutter |
+| Components | `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` |
+| Layout | Single chat window — no conversation list |
+| Prerequisite | Complete [Getting Started](/ui-kit/flutter/v5/getting-started) Steps 1–4 first |
+| Pattern | Support chat, embedded widgets, focused messaging |
+
+
+
+This guide builds a single chat window — no conversation list. Users go directly into a one-to-one or group chat. Good for support chat, deep links, or focused messaging.
+
+This assumes you've already completed [Getting Started](/ui-kit/flutter/v5/getting-started) (project created, UI Kit installed, init + login working).
+
+
+
+
+
+[View Sample App on GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app)
+
+---
+
+## What You're Building
+
+Three components stacked vertically:
+
+1. **Chat header** — displays recipient name, avatar, and call buttons
+2. **Message list** — real-time chat history
+3. **Message composer** — text input with media and emojis
+
+---
+
+## Step 1 — Create the Chat Screen
+
+The app fetches a user on mount and renders the message components.
+
+```dart title="lib/chat_screen.dart"
+import 'dart:async';
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+class ChatScreen extends StatelessWidget {
+ const ChatScreen({super.key});
+
+ Future fetchUser(String uid) async {
+ final completer = Completer();
+ CometChat.getUser(
+ uid,
+ onSuccess: (user) => completer.complete(user),
+ onError: (error) => completer.completeError(error),
+ );
+ return completer.future;
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return FutureBuilder(
+ future: fetchUser("cometchat-uid-2"), // Replace with target UID
+ builder: (context, snapshot) {
+ if (snapshot.connectionState == ConnectionState.waiting) {
+ return const Scaffold(
+ body: Center(child: CircularProgressIndicator()),
+ );
+ }
+ if (snapshot.hasError) {
+ return Scaffold(
+ body: Center(child: Text('Error: ${snapshot.error}')),
+ );
+ }
+ final user = snapshot.data!;
+ return Scaffold(
+ appBar: CometChatMessageHeader(user: user),
+ body: SafeArea(
+ child: Column(
+ children: [
+ Expanded(child: CometChatMessageList(user: user)),
+ CometChatMessageComposer(user: user),
+ ],
+ ),
+ ),
+ );
+ },
+ );
+ }
+}
+```
+
+Key points:
+- `CometChat.getUser(uid)` fetches the user object — you need a real user object, not a manually constructed one.
+- Pass either `user` or `group` to the message components, never both.
+
+---
+
+## Switching to Group Chat
+
+To load a group chat instead, use `CometChat.getGroup()`:
+
+```dart
+Future fetchGroup(String guid) async {
+ final completer = Completer();
+ CometChat.getGroup(
+ guid,
+ onSuccess: (group) => completer.complete(group),
+ onError: (error) => completer.completeError(error),
+ );
+ return completer.future;
+}
+
+// Then in build():
+FutureBuilder(
+ future: fetchGroup("your-group-guid"),
+ builder: (context, snapshot) {
+ if (snapshot.hasData) {
+ final group = snapshot.data!;
+ return Scaffold(
+ appBar: CometChatMessageHeader(group: group),
+ body: Column(
+ children: [
+ Expanded(child: CometChatMessageList(group: group)),
+ CometChatMessageComposer(group: group),
+ ],
+ ),
+ );
+ }
+ return const CircularProgressIndicator();
+ },
+)
+```
+
+---
+
+## Step 2 — Run the App
+
+```bash
+flutter run
+```
+
+You should see the chat window load with the conversation for the UID you set.
+
+---
+
+## Next Steps
+
+
+
+ Customize the message view
+
+
+ Add a conversation list
+
+
+ Customize colors and styles
+
+
+ Handle real-time events
+
+
diff --git a/ui-kit/flutter/v5/flutter-tab-based-chat.mdx b/ui-kit/flutter/v5/flutter-tab-based-chat.mdx
new file mode 100644
index 000000000..38cc012b5
--- /dev/null
+++ b/ui-kit/flutter/v5/flutter-tab-based-chat.mdx
@@ -0,0 +1,204 @@
+---
+title: "Tab-Based Chat"
+sidebarTitle: "Tab-Based Chat"
+description: "Build a tab-based messaging UI with chats, calls, users, and groups in Flutter with CometChat UI Kit."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_chat_uikit` |
+| Framework | Flutter |
+| Components | `CometChatConversations`, `CometChatCallLogs`, `CometChatUsers`, `CometChatGroups`, `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` |
+| Layout | Bottom navigation tabs (Chats, Calls, Users, Groups) + message view |
+| Prerequisite | Complete [Getting Started](/ui-kit/flutter/v5/getting-started) Steps 1–4 first |
+| Pattern | Full-featured messaging app with multiple sections |
+
+
+
+This guide builds a tabbed messaging UI — Chats, Calls, Users, and Groups tabs with bottom navigation. Good for full-featured apps that need more than just conversations.
+
+This assumes you've already completed [Getting Started](/ui-kit/flutter/v5/getting-started) (project created, UI Kit installed, init + login working).
+
+
+
+
+
+[View Sample App on GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app)
+
+---
+
+## What You're Building
+
+Three sections working together:
+
+1. **Bottom navigation** — switches between Chats, Calls, Users, and Groups
+2. **Page view** — renders the list for the active tab
+3. **Message view** — header + messages + composer for the selected item
+
+---
+
+## Step 1 — Create the Tabs Screen
+
+The tabs screen uses `BottomNavigationBar` and `PageView` to create a tabbed interface.
+
+```dart title="lib/tabs_screen.dart"
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';
+import 'messages_screen.dart';
+
+class TabsScreen extends StatefulWidget {
+ const TabsScreen({super.key});
+
+ @override
+ State createState() => _TabsScreenState();
+}
+
+class _TabsScreenState extends State {
+ int _selectedIndex = 0;
+ final PageController _pageController = PageController();
+
+ void _onItemTapped(int index) {
+ setState(() => _selectedIndex = index);
+ _pageController.jumpToPage(index);
+ }
+
+ @override
+ void dispose() {
+ _pageController.dispose();
+ super.dispose();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: PageView(
+ controller: _pageController,
+ onPageChanged: (index) => setState(() => _selectedIndex = index),
+ children: [
+ CometChatConversations(
+ onItemTap: (conversation) {
+ final target = conversation.conversationWith;
+ Navigator.push(
+ context,
+ MaterialPageRoute(
+ builder: (_) => MessagesScreen(
+ user: target is User ? target : null,
+ group: target is Group ? target : null,
+ ),
+ ),
+ );
+ },
+ ),
+ CometChatCallLogs(),
+ CometChatUsers(
+ onItemTap: (user) => Navigator.push(
+ context,
+ MaterialPageRoute(builder: (_) => MessagesScreen(user: user)),
+ ),
+ ),
+ CometChatGroups(
+ onItemTap: (group) => Navigator.push(
+ context,
+ MaterialPageRoute(builder: (_) => MessagesScreen(group: group)),
+ ),
+ ),
+ ],
+ ),
+ bottomNavigationBar: BottomNavigationBar(
+ type: BottomNavigationBarType.fixed,
+ currentIndex: _selectedIndex,
+ onTap: _onItemTapped,
+ selectedItemColor: Colors.deepPurple,
+ unselectedItemColor: Colors.grey,
+ items: const [
+ BottomNavigationBarItem(icon: Icon(Icons.chat), label: "Chats"),
+ BottomNavigationBarItem(icon: Icon(Icons.call), label: "Calls"),
+ BottomNavigationBarItem(icon: Icon(Icons.person), label: "Users"),
+ BottomNavigationBarItem(icon: Icon(Icons.group), label: "Groups"),
+ ],
+ ),
+ );
+ }
+}
+```
+
+Key points:
+- `PageView` enables swipeable pages for each tab.
+- `BottomNavigationBar` provides quick access to different sections.
+- Each list component navigates to `MessagesScreen` on item tap.
+
+---
+
+## Step 2 — Create the Messages Screen
+
+Same as the [Conversation + Message](/ui-kit/flutter/v5/flutter-conversation) guide:
+
+```dart title="lib/messages_screen.dart"
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+class MessagesScreen extends StatelessWidget {
+ final User? user;
+ final Group? group;
+
+ const MessagesScreen({super.key, this.user, this.group});
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ appBar: CometChatMessageHeader(user: user, group: group),
+ body: SafeArea(
+ child: Column(
+ children: [
+ Expanded(child: CometChatMessageList(user: user, group: group)),
+ CometChatMessageComposer(user: user, group: group),
+ ],
+ ),
+ ),
+ );
+ }
+}
+```
+
+---
+
+## Step 3 — Run the App
+
+```bash
+flutter run
+```
+
+You should see the tab bar at the bottom. Switch between Chats, Calls, Users, and Groups — tapping any item opens the message view.
+
+---
+
+## Tab Descriptions
+
+| Tab | Component | Purpose |
+| --- | --- | --- |
+| Chats | `CometChatConversations` | Recent conversations with unread counts |
+| Calls | `CometChatCallLogs` | Call history (audio/video) |
+| Users | `CometChatUsers` | Browse and search all users |
+| Groups | `CometChatGroups` | Browse and join groups |
+
+---
+
+## Next Steps
+
+
+
+ Customize the conversation list
+
+
+ Configure call history
+
+
+ Manage user and group lists
+
+
+ Customize colors and styles
+
+
diff --git a/ui-kit/flutter/v5/getting-started.mdx b/ui-kit/flutter/v5/getting-started.mdx
new file mode 100644
index 000000000..96032dc2b
--- /dev/null
+++ b/ui-kit/flutter/v5/getting-started.mdx
@@ -0,0 +1,320 @@
+---
+title: "Getting Started"
+sidebarTitle: "Getting Started"
+description: "Add CometChat to a Flutter app in 5 steps: create project, install, init, login, render."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_chat_uikit` |
+| Init | `CometChatUIKit.init(uiKitSettings)` — must resolve before `login()` |
+| Login | `CometChatUIKit.login("UID")` — must resolve before rendering widgets |
+| Order | `init()` → `login()` → render. Breaking this order = blank screen |
+| Auth Key | Dev/testing only. Use Auth Token in production |
+| Calling | Optional. Install `cometchat_calls_uikit` to enable |
+| Platforms | iOS 13.0+, Android API 24+ (with calling) |
+| AI Skills | `npx @cometchat/skills add` — [GitHub](https://github.com/cometchat/cometchat-skills) |
+
+
+
+This guide walks you through adding CometChat to a Flutter app. By the end you'll have a working chat UI.
+
+
+
+
+
+---
+
+## Integrate with AI Coding Agents
+
+Skip the manual steps — use [CometChat Skills](https://github.com/cometchat/cometchat-skills) to integrate via your AI coding agent. Your agent has a short conversation with you to understand your project and chat requirements, then writes production-grade integration code tailored to the files you already have.
+
+```bash
+npx @cometchat/skills add
+```
+
+Use `--ide ` to target a specific IDE (e.g. `--ide cursor`), or `--ide all` for all supported IDEs.
+
+Then in your IDE:
+
+```
+/cometchat add chat to my app
+```
+
+The skill detects your Flutter project structure, navigation setup, 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 routes, screens, and widgets before proposing a placement (route, modal sheet, or tab), shows the plan, and waits for your approval before writing code. Credentials are saved as a Dart const file or via `--dart-define`.
+
+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).
+
+---
+
+## Prerequisites
+
+You need three things from the [CometChat Dashboard](https://app.cometchat.com/):
+
+| Credential | Where to find it |
+| --- | --- |
+| App ID | Dashboard → Your App → Credentials |
+| Auth Key | Dashboard → Your App → Credentials |
+| Region | Dashboard → Your App → Credentials (e.g. `us`, `eu`, `in`) |
+
+You also need Flutter 3.0+ installed with Android Studio or VS Code.
+
+
+Auth Key is for development only. In production, generate Auth Tokens server-side via the [REST API](/rest-api/chat-apis) and use `loginWithAuthToken()`. Never ship Auth Keys in client code.
+
+
+---
+
+## Step 1 — Create a Flutter Project
+
+```bash
+flutter create my_chat_app
+cd my_chat_app
+```
+
+---
+
+## Step 2 — Install the UI Kit
+
+Add to your `pubspec.yaml`:
+
+```yaml pubspec.yaml
+dependencies:
+ flutter:
+ sdk: flutter
+ cometchat_chat_uikit: ^5.2.14
+ cometchat_calls_uikit: ^5.0.15 # Optional: for voice/video calling
+```
+
+Then run:
+
+```bash
+flutter pub get
+```
+
+**Android Setup** — Add the following to `android/gradle.properties`:
+
+```properties gradle.properties
+android.enableJetifier=true
+```
+
+Then update `android/app/build.gradle`:
+
+```gradle build.gradle
+android {
+ defaultConfig {
+ minSdk = 24 // Required for calling
+ }
+}
+```
+
+**iOS Setup** — Update `ios/Podfile`:
+
+```ruby Podfile
+platform :ios, '13.0'
+```
+
+Then run:
+
+```bash
+cd ios && pod install && cd ..
+```
+
+---
+
+## Step 3 — Initialize CometChat
+
+Create a constants file and initialize the UI Kit before anything else.
+
+```dart title="lib/cometchat_config.dart"
+class CometChatConfig {
+ static const String appId = "APP_ID"; // Replace with your App ID
+ static const String region = "REGION"; // Replace with your Region
+ static const String authKey = "AUTH_KEY"; // Replace with your Auth Key (dev only)
+}
+```
+
+```dart title="lib/main.dart"
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart'; // Optional
+import 'cometchat_config.dart';
+
+void main() => runApp(const MyApp());
+
+class MyApp extends StatelessWidget {
+ const MyApp({super.key});
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: 'CometChat Demo',
+ home: const InitializerScreen(),
+ );
+ }
+}
+
+class InitializerScreen extends StatelessWidget {
+ const InitializerScreen({super.key});
+
+ Future _initCometChat() async {
+ final settings = (UIKitSettingsBuilder()
+ ..appId = CometChatConfig.appId
+ ..region = CometChatConfig.region
+ ..authKey = CometChatConfig.authKey
+ ..subscriptionType = CometChatSubscriptionType.allUsers
+ ..autoEstablishSocketConnection = true
+ ..extensions = CometChatUIKitChatExtensions.getDefaultExtensions()
+ ..callingExtension = CometChatCallingExtension() // Optional
+ ).build();
+
+ await CometChatUIKit.init(uiKitSettings: settings);
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return FutureBuilder(
+ future: _initCometChat(),
+ builder: (context, snapshot) {
+ if (snapshot.connectionState != ConnectionState.done) {
+ return const Scaffold(
+ body: Center(child: CircularProgressIndicator()),
+ );
+ }
+ if (snapshot.hasError) {
+ return Scaffold(
+ body: Center(child: Text('Init failed: ${snapshot.error}')),
+ );
+ }
+ return const LoginScreen();
+ },
+ );
+ }
+}
+```
+
+
+`init()` must resolve before you call `login()`. If you call `login()` before init completes, it will fail silently.
+
+
+---
+
+## Step 4 — Login
+
+After init resolves, log the user in. 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`
+
+```dart
+CometChatUIKit.login(
+ "cometchat-uid-1",
+ onSuccess: (user) {
+ debugPrint('Login successful: ${user.name}');
+ // Navigate to chat screen
+ },
+ onError: (error) {
+ debugPrint('Login failed: $error');
+ },
+);
+```
+
+Key points:
+- `getLoggedInUser()` checks for an existing session so you don't re-login unnecessarily.
+- Widgets must not render until login resolves — use a state flag to gate rendering.
+
+
+For production, use `loginWithAuthToken()` instead of Auth Key. Generate tokens server-side via the REST API.
+
+
+---
+
+## Step 5 — Choose a Chat Experience
+
+Integrate a conversation view that suits your app's UX. Each option below includes a step-by-step guide.
+
+### Conversation List + Message View
+
+Two-panel layout — conversation list with navigation to messages. Think WhatsApp or Telegram.
+
+- Stack-based navigation with `Navigator.push()`
+- Switch between one-to-one and group conversations
+- Real-time updates and message sync across sessions
+
+
+
+
+
+
+ Step-by-step guide to build this layout
+
+
+---
+
+### One-to-One / Group Chat
+
+Single chat window — no conversation list. Good for support chat, embedded widgets, or focused messaging.
+
+- Dedicated chat window for one-on-one or group messaging
+- No conversation list — users go directly into the chat
+- Ideal for support chat or contextual messaging
+
+
+
+
+
+
+ Step-by-step guide to build this layout
+
+
+---
+
+### Tab-Based Chat
+
+Tabbed navigation — Chat, Call Logs, Users, Groups in separate tabs. Good for full-featured apps.
+
+- `BottomNavigationBar` with independent screens
+- Unified experience for conversations, call history, and contacts
+- Scales well for adding future features
+
+
+
+
+
+
+ Step-by-step guide to build this layout
+
+
+---
+
+## Build Your Own Chat Experience
+
+Need full control over the UI? Use individual widgets, customize themes, and wire up your own layouts.
+
+- [Sample App](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) — Working reference app to compare against
+- [Components](/ui-kit/flutter/v5/components-overview) — All prebuilt UI widgets with props and customization options
+- [Core Features](/ui-kit/flutter/v5/core-features) — Messaging, real-time updates, and other capabilities
+- [Theming](/ui-kit/flutter/v5/theme-introduction) — Colors, fonts, dark mode, and custom styling
+- [Build Your Own UI](/sdk/flutter/overview) — Skip the UI Kit entirely and build on the raw SDK
+
+---
+
+## Next Steps
+
+
+
+ Browse all prebuilt UI widgets
+
+
+ Customize colors, fonts, and styles
+
+
+ Chat features included out of the box
+
+
+ Init, login, and other SDK methods
+
+
diff --git a/ui-kit/flutter/v5/group-members.mdx b/ui-kit/flutter/v5/group-members.mdx
new file mode 100644
index 000000000..7049d9533
--- /dev/null
+++ b/ui-kit/flutter/v5/group-members.mdx
@@ -0,0 +1,1105 @@
+---
+title: "Group Members"
+description: "Displays all members of a group in a searchable, scrollable list with member scope badges and management actions."
+---
+
+
+```json
+{
+ "component": "CometChatGroupMembers",
+ "package": "cometchat_chat_uikit",
+ "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
+ "description": "Displays all members of a group in a searchable, scrollable list with member scope badges and management actions.",
+ "primaryOutput": {
+ "prop": "onItemTap",
+ "type": "Function(GroupMember groupMember)?"
+ },
+ "props": {
+ "data": {
+ "group": {
+ "type": "Group",
+ "default": "required",
+ "note": "The group object to fetch members from"
+ },
+ "groupMembersRequestBuilder": {
+ "type": "GroupMembersRequestBuilder?",
+ "default": "null",
+ "note": "Custom request builder for filtering members"
+ },
+ "groupMembersProtocol": {
+ "type": "GroupMembersBuilderProtocol?",
+ "default": "null",
+ "note": "Custom protocol for fetching group members"
+ },
+ "searchKeyword": {
+ "type": "String?",
+ "default": "null",
+ "note": "Pre-fills search and filters list"
+ },
+ "controllerTag": {
+ "type": "String?",
+ "default": "null",
+ "note": "Tag for controller management"
+ }
+ },
+ "callbacks": {
+ "onItemTap": "Function(GroupMember groupMember)?",
+ "onItemLongPress": "Function(GroupMember groupMember)?",
+ "onSelection": "Function(List?)?",
+ "onBack": "VoidCallback?",
+ "onError": "OnError?",
+ "onLoad": "OnLoad?",
+ "onEmpty": "OnEmpty?",
+ "stateCallBack": "Function(CometChatGroupMembersController controller)?"
+ },
+ "visibility": {
+ "showBackButton": { "type": "bool", "default": true },
+ "hideSearch": { "type": "bool", "default": false },
+ "hideSeparator": { "type": "bool?", "default": null },
+ "hideError": { "type": "bool?", "default": null },
+ "hideAppbar": { "type": "bool?", "default": null },
+ "usersStatusVisibility": { "type": "bool?", "default": true },
+ "hideKickMemberOption": { "type": "bool?", "default": null },
+ "hideBanMemberOption": { "type": "bool?", "default": null },
+ "hideScopeChangeOption": { "type": "bool?", "default": null }
+ },
+ "selection": {
+ "selectionMode": {
+ "type": "SelectionMode?",
+ "values": ["SelectionMode.single", "SelectionMode.multiple", "SelectionMode.none"],
+ "default": "null"
+ },
+ "activateSelection": {
+ "type": "ActivateSelection?",
+ "values": ["ActivateSelection.onClick", "ActivateSelection.onLongClick"],
+ "default": "null"
+ }
+ },
+ "viewSlots": {
+ "listItemView": "Widget Function(GroupMember)?",
+ "leadingView": "Widget? Function(BuildContext, GroupMember)?",
+ "titleView": "Widget? Function(BuildContext, GroupMember)?",
+ "subtitleView": "Widget? Function(BuildContext, GroupMember)?",
+ "trailingView": "Function(BuildContext, GroupMember)?",
+ "loadingStateView": "WidgetBuilder?",
+ "emptyStateView": "WidgetBuilder?",
+ "errorStateView": "WidgetBuilder?",
+ "setOptions": "List? Function(Group, GroupMember, CometChatGroupMembersController, BuildContext)?",
+ "addOptions": "List? Function(Group, GroupMember, CometChatGroupMembersController, BuildContext)?",
+ "appBarOptions": "List?"
+ },
+ "icons": {
+ "backButton": { "type": "Widget?", "default": "built-in back arrow" },
+ "searchBoxIcon": { "type": "Widget?", "default": "built-in search icon" },
+ "submitIcon": { "type": "Widget?", "default": "built-in check icon" },
+ "selectIcon": { "type": "Widget?", "default": "built-in selection icon" }
+ },
+ "formatting": {
+ "searchPlaceholder": { "type": "String?", "default": "null" },
+ "height": { "type": "double?", "default": "null" },
+ "width": { "type": "double?", "default": "null" }
+ },
+ "style": {
+ "style": { "type": "CometChatGroupMembersStyle?", "default": "null" }
+ }
+ },
+ "events": [
+ { "name": "CometChatGroupEvents.ccGroupMemberScopeChanged", "payload": "Action, GroupMember, String newScope, String oldScope, Group", "description": "Member scope changed" },
+ { "name": "CometChatGroupEvents.ccGroupMemberBanned", "payload": "Action, GroupMember, User bannedBy, Group", "description": "Member banned from group" },
+ { "name": "CometChatGroupEvents.ccGroupMemberKicked", "payload": "Action, GroupMember, User kickedBy, Group", "description": "Member kicked from group" }
+ ],
+ "sdkListeners": [
+ "onGroupMemberScopeChanged",
+ "onGroupMemberKicked",
+ "onGroupMemberLeft",
+ "onGroupMemberBanned",
+ "onGroupMemberJoined",
+ "onMemberAddedToGroup",
+ "onUserOnline",
+ "onUserOffline"
+ ],
+ "compositionExample": {
+ "description": "Group member list wired to group details or member actions",
+ "components": [
+ "CometChatGroupMembers",
+ "CometChatGroups",
+ "CometChatMessages"
+ ],
+ "flow": "CometChatGroups emits Group -> pass to CometChatGroupMembers -> onItemTap emits GroupMember for actions"
+ },
+ "types": {
+ "GroupMember": {
+ "uid": "String",
+ "name": "String",
+ "avatar": "String?",
+ "scope": "String (owner/admin/moderator/participant)",
+ "joinedAt": "DateTime?"
+ },
+ "CometChatOption": {
+ "id": "String?",
+ "title": "String?",
+ "icon": "String?",
+ "iconWidget": "Widget?",
+ "onClick": "VoidCallback?"
+ },
+ "SelectionMode": {
+ "single": "SelectionMode.single",
+ "multiple": "SelectionMode.multiple",
+ "none": "SelectionMode.none"
+ }
+ }
+}
+```
+
+
+
+## Where It Fits
+
+`CometChatGroupMembers` displays all members of a group with their roles (owner, admin, moderator, participant). It provides member management actions like kick, ban, and scope change. Wire it to `CometChatGroups` to show members when a group is selected.
+
+
+
+```dart
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+class GroupMembersScreen extends StatelessWidget {
+ final Group group;
+
+ const GroupMembersScreen({super.key, required this.group});
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: SafeArea(
+ child: CometChatGroupMembers(
+ group: group,
+ onItemTap: (groupMember) {
+ // Handle member tap - show profile or actions
+ print("Tapped: ${groupMember.name}");
+ },
+ ),
+ ),
+ );
+ }
+}
+```
+
+
+
+
+
+
+
+The `CometChatGroupMembers` widget is composed of the following BaseWidgets:
+
+| Widgets | Description |
+| --- | --- |
+| [CometChatListBase](/ui-kit/flutter/v5/components-overview) | Container widget with title, search functionality, and background settings |
+| [CometChatListItem](/ui-kit/flutter/v5/components-overview) | Renders member information with title, subtitle, leading, and trailing widgets |
+
+---
+
+
+## Minimal Render
+
+
+
+```dart
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+class GroupMembersDemo extends StatelessWidget {
+ final Group group;
+
+ const GroupMembersDemo({super.key, required this.group});
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: SafeArea(
+ child: CometChatGroupMembers(
+ group: group,
+ ),
+ ),
+ );
+ }
+}
+```
+
+
+
+You can also launch it using `Navigator.push`:
+
+```dart
+Navigator.push(
+ context,
+ MaterialPageRoute(
+ builder: (context) => CometChatGroupMembers(
+ group: Group(guid: "group_id", name: "Group Name", type: GroupTypeConstants.public),
+ ),
+ ),
+);
+```
+
+---
+
+## Filtering Group Members
+
+Pass a `GroupMembersRequestBuilder` to `groupMembersRequestBuilder`. Pass the builder instance — not the result of `.build()`.
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ groupMembersRequestBuilder: GroupMembersRequestBuilder(group.guid)
+ ..limit = 10,
+)
+```
+
+
+
+### Filter Recipes
+
+| Recipe | Code |
+| --- | --- |
+| Limit to 10 per page | `GroupMembersRequestBuilder(guid)..limit = 10` |
+| Search by keyword | `GroupMembersRequestBuilder(guid)..searchKeyword = "john"` |
+| Filter by scopes | `GroupMembersRequestBuilder(guid)..scopes = ["admin", "moderator"]` |
+
+Default page size is 30. The component uses infinite scroll — the next page loads as the user scrolls to the bottom.
+
+
+### GroupMembersRequestBuilder Properties
+
+| Property | Description | Code |
+| --- | --- | --- |
+| `guid` | Group ID (required) | `GroupMembersRequestBuilder("group_id")` |
+| `limit` | Number of members to fetch per request | `..limit = 30` |
+| `searchKeyword` | Search members by name | `..searchKeyword = "John"` |
+| `scopes` | Filter by member scopes | `..scopes = ["admin"]` |
+| `build()` | Builds and returns a `GroupMembersRequest` object | `.build()` |
+
+### Custom Protocol Builder
+
+Use `GroupMembersBuilderProtocol` to customize both the initial list and search results:
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+class CustomProtocolBuilder extends GroupMembersBuilderProtocol {
+ const CustomProtocolBuilder(super.builder);
+
+ @override
+ GroupMembersRequest getRequest() {
+ return requestBuilder.build();
+ }
+
+ @override
+ GroupMembersRequest getSearchRequest(String val) {
+ requestBuilder.searchKeyword = val;
+ return requestBuilder.build();
+ }
+}
+
+// Usage
+CometChatGroupMembers(
+ group: group,
+ groupMembersProtocol: CustomProtocolBuilder(
+ GroupMembersRequestBuilder(group.guid)..scopes = ["admin", "moderator"],
+ ),
+)
+```
+
+
+
+---
+
+
+## Actions and Events
+
+### Callback Props
+
+#### onItemTap
+
+Fires when a member row is tapped. Use for showing member profile or custom actions.
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ onItemTap: (groupMember) {
+ print("Selected: ${groupMember.name}");
+ },
+)
+```
+
+
+
+#### onItemLongPress
+
+Fires when a member row is long-pressed. Useful for showing context menus.
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ onItemLongPress: (groupMember) {
+ // Show custom context menu
+ },
+)
+```
+
+
+
+#### onSelection
+
+Fires when members are selected in multi-select mode. Requires `selectionMode` to be set.
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ selectionMode: SelectionMode.multiple,
+ activateSelection: ActivateSelection.onClick,
+ onSelection: (selectedList) {
+ print("Selected ${selectedList?.length ?? 0} members");
+ },
+)
+```
+
+
+
+#### onError
+
+Fires on internal errors (network failure, auth issue, SDK exception).
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ onError: (error) {
+ print("CometChatGroupMembers error: $error");
+ },
+)
+```
+
+
+
+
+#### onBack
+
+Fires when the back button is pressed.
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ showBackButton: true,
+ onBack: () {
+ Navigator.pop(context);
+ },
+)
+```
+
+
+
+#### onLoad
+
+Fires when the member list is successfully loaded.
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ onLoad: (list) {
+ print("Loaded ${list.length} members");
+ },
+)
+```
+
+
+
+#### onEmpty
+
+Fires when the member list is empty.
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ onEmpty: () {
+ print("No members found");
+ },
+)
+```
+
+
+
+### Global UI Events
+
+`CometChatGroupEvents` emits events subscribable from anywhere in the application. Add a listener in `initState` and remove it in `dispose`.
+
+| Event | Fires when | Payload |
+| --- | --- | --- |
+| `ccGroupMemberScopeChanged` | A member's scope is changed | `Action, User, String scopeChangedTo, String scopeChangedFrom, Group` |
+| `ccGroupMemberBanned` | A member is banned | `Action, User, User bannedBy, Group` |
+| `ccGroupMemberKicked` | A member is kicked | `Action, User, User kickedBy, Group` |
+
+When to use: sync external UI with member changes. For example, update a member count badge when a member is kicked.
+
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:cometchat_sdk/models/action.dart' as cc;
+
+class _YourScreenState extends State with CometChatGroupEventListener {
+
+ @override
+ void initState() {
+ super.initState();
+ CometChatGroupEvents.addGroupsListener("listenerId", this);
+ }
+
+ @override
+ void dispose() {
+ CometChatGroupEvents.removeGroupsListener("listenerId");
+ super.dispose();
+ }
+
+ @override
+ void ccGroupMemberScopeChanged(cc.Action message, User updatedUser, String scopeChangedTo, String scopeChangedFrom, Group group) {
+ print("${updatedUser.name} scope changed to $scopeChangedTo");
+ }
+
+ @override
+ void ccGroupMemberBanned(cc.Action message, User bannedUser, User bannedBy, Group bannedFrom) {
+ print("${bannedUser.name} was banned from ${bannedFrom.name}");
+ }
+
+ @override
+ void ccGroupMemberKicked(cc.Action message, User kickedUser, User kickedBy, Group kickedFrom) {
+ print("${kickedUser.name} was kicked from ${kickedFrom.name}");
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return const Placeholder();
+ }
+}
+```
+
+
+
+### SDK Events (Real-Time, Automatic)
+
+The component listens to these SDK events internally. No manual attachment needed unless additional side effects are required.
+
+| SDK Listener | Internal behavior |
+| --- | --- |
+| `onGroupMemberScopeChanged` | Updates member scope badge |
+| `onGroupMemberKicked` | Removes member from list |
+| `onGroupMemberLeft` | Removes member from list |
+| `onGroupMemberBanned` | Removes member from list |
+| `onGroupMemberJoined` | Adds new member to list |
+| `onMemberAddedToGroup` | Adds new member to list |
+| `onUserOnline` | Updates online status indicator |
+| `onUserOffline` | Updates offline status indicator |
+
+---
+
+
+## Custom View Slots
+
+Each slot replaces a section of the default UI. Slots that accept a member parameter receive the `GroupMember` object for that row.
+
+| Slot | Signature | Replaces |
+| --- | --- | --- |
+| `listItemView` | `Widget Function(GroupMember)` | Entire list item row |
+| `leadingView` | `Widget? Function(BuildContext, GroupMember)` | Avatar / left section |
+| `titleView` | `Widget? Function(BuildContext, GroupMember)` | Member name |
+| `subtitleView` | `Widget? Function(BuildContext, GroupMember)` | Secondary text |
+| `trailingView` | `Function(BuildContext, GroupMember)` | Scope badge / right section |
+| `loadingStateView` | `WidgetBuilder` | Loading spinner |
+| `emptyStateView` | `WidgetBuilder` | Empty state |
+| `errorStateView` | `WidgetBuilder` | Error state |
+| `setOptions` | `List? Function(Group, GroupMember, Controller, BuildContext)` | Context menu actions (replaces default) |
+| `addOptions` | `List? Function(Group, GroupMember, Controller, BuildContext)` | Context menu actions (adds to default) |
+| `appBarOptions` | `List` | App bar action widgets |
+
+### listItemView
+
+Replace the entire list item row.
+
+
+
+
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ listItemView: (groupMember) {
+ return ListTile(
+ leading: CometChatAvatar(
+ image: groupMember.avatar,
+ name: groupMember.name,
+ ),
+ title: Text(groupMember.name ?? ''),
+ subtitle: Text(groupMember.scope ?? 'participant'),
+ trailing: Icon(Icons.chevron_right),
+ );
+ },
+)
+```
+
+
+
+
+### leadingView
+
+Replace the avatar / left section. Online status indicator example.
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ leadingView: (context, groupMember) {
+ return Stack(
+ children: [
+ CometChatAvatar(
+ image: groupMember.avatar,
+ name: groupMember.name,
+ style: CometChatAvatarStyle(borderRadius: BorderRadius.circular(20)),
+ ),
+ Positioned(
+ bottom: 0,
+ right: 0,
+ child: Container(
+ width: 12,
+ height: 12,
+ decoration: BoxDecoration(
+ color: groupMember.status == "online" ? Color(0xFF09C26F) : Colors.grey,
+ shape: BoxShape.circle,
+ border: Border.all(color: Colors.white, width: 2),
+ ),
+ ),
+ ),
+ ],
+ );
+ },
+)
+```
+
+
+
+### titleView
+
+Replace the member name. Role badge inline example.
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ titleView: (context, groupMember) {
+ return Row(
+ children: [
+ Text(
+ groupMember.name ?? '',
+ style: TextStyle(fontWeight: FontWeight.w500, fontSize: 16),
+ ),
+ if (groupMember.scope == GroupMemberScope.owner) ...[
+ SizedBox(width: 4),
+ Icon(Icons.star, size: 16, color: Color(0xFFF76808)),
+ ],
+ ],
+ );
+ },
+)
+```
+
+
+
+
+### subtitleView
+
+Replace the secondary text. Join date example.
+
+
+
+
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ subtitleView: (context, groupMember) {
+ final dateTime = groupMember.joinedAt ?? DateTime.now();
+ return Text(
+ "Joined ${DateFormat('dd/MM/yyyy').format(dateTime)}",
+ style: TextStyle(color: Color(0xFF727272), fontSize: 14),
+ );
+ },
+)
+```
+
+
+
+### trailingView
+
+Replace the scope badge / right section. Custom scope badge example.
+
+
+
+
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ trailingView: (context, groupMember) {
+ Color backgroundColor = Color(0xFFEDEAFA);
+ Color textColor = Color(0xFF6852D6);
+ String scope = groupMember.scope ?? GroupMemberScope.participant;
+
+ if (groupMember.uid == group.owner) {
+ scope = GroupMemberScope.owner;
+ backgroundColor = Color(0xFF6852D6);
+ textColor = Colors.white;
+ }
+
+ return Container(
+ padding: EdgeInsets.symmetric(horizontal: 12, vertical: 4),
+ decoration: BoxDecoration(
+ color: backgroundColor,
+ borderRadius: BorderRadius.circular(1000),
+ ),
+ child: Text(
+ scope.capitalizeFirst ?? "",
+ style: TextStyle(color: textColor, fontSize: 12, fontWeight: FontWeight.w400),
+ ),
+ );
+ },
+)
+```
+
+
+
+
+### setOptions
+
+Replace the context menu / long-press actions on each member item.
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ setOptions: (group, groupMember, controller, context) {
+ return [
+ CometChatOption(
+ id: "view_profile",
+ title: "View Profile",
+ iconWidget: Icon(Icons.person_outline),
+ onClick: () {
+ // Navigate to member profile
+ },
+ ),
+ CometChatOption(
+ id: "message",
+ title: "Send Message",
+ iconWidget: Icon(Icons.message_outlined),
+ onClick: () {
+ // Start direct message
+ },
+ ),
+ ];
+ },
+)
+```
+
+
+
+### addOptions
+
+Add to the existing context menu actions without removing defaults.
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ addOptions: (group, groupMember, controller, context) {
+ return [
+ CometChatOption(
+ id: "report",
+ title: "Report User",
+ iconWidget: Icon(Icons.flag_outlined),
+ onClick: () {
+ // Report user logic
+ },
+ ),
+ ];
+ },
+)
+```
+
+
+
+### appBarOptions
+
+Add custom widgets to the app bar.
+
+
+
+
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ appBarOptions: [
+ IconButton(
+ onPressed: () {
+ // Navigate to add members
+ },
+ icon: Icon(Icons.person_add_alt_1, color: Color(0xFF6852D6)),
+ ),
+ ],
+)
+```
+
+
+
+
+### loadingStateView
+
+Custom view displayed while members are being fetched.
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ loadingStateView: (context) {
+ return Center(
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ CircularProgressIndicator(),
+ SizedBox(height: 16),
+ Text("Loading members..."),
+ ],
+ ),
+ );
+ },
+)
+```
+
+
+
+### emptyStateView
+
+Custom view displayed when no members are found.
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ emptyStateView: (context) {
+ return Center(
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ Icon(Icons.people_outline, size: 64, color: Color(0xFF727272)),
+ SizedBox(height: 16),
+ Text("No members found"),
+ ],
+ ),
+ );
+ },
+)
+```
+
+
+
+### errorStateView
+
+Custom view displayed when an error occurs.
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ errorStateView: (context) {
+ return Center(
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ Icon(Icons.error_outline, size: 64, color: Colors.red),
+ SizedBox(height: 16),
+ Text("Failed to load members"),
+ ElevatedButton(
+ onPressed: () {
+ // Retry logic
+ },
+ child: Text("Retry"),
+ ),
+ ],
+ ),
+ );
+ },
+)
+```
+
+
+
+---
+
+
+## Styling
+
+Set `CometChatGroupMembersStyle` to customize the appearance.
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ style: CometChatGroupMembersStyle(
+ titleStyle: TextStyle(color: Color(0xFFF76808)),
+ separatorColor: Color(0xFFF76808),
+ ownerMemberScopeBackgroundColor: Color(0xFFF76808),
+ adminMemberScopeBackgroundColor: Color(0xFFFEEDE1),
+ adminMemberScopeBorder: Border.all(color: Color(0xFFF76808)),
+ adminMemberScopeTextColor: Color(0xFFF76808),
+ moderatorMemberScopeBackgroundColor: Color(0xFFFEEDE1),
+ moderatorMemberScopeTextColor: Color(0xFFF76808),
+ backIconColor: Color(0xFFF76808),
+ ),
+)
+```
+
+
+
+
+ 
+
+
+### Style Properties
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `backgroundColor` | `Color?` | Background color of the component |
+| `border` | `BoxBorder?` | Border for the widget |
+| `borderRadius` | `BorderRadiusGeometry?` | Border radius for the widget |
+| `titleStyle` | `TextStyle?` | Style for the header title |
+| `backIconColor` | `Color?` | Back button icon color |
+| `searchBackground` | `Color?` | Background color of search box |
+| `searchBorderRadius` | `BorderRadius?` | Border radius for search box |
+| `searchTextStyle` | `TextStyle?` | Style for search input text |
+| `searchPlaceholderStyle` | `TextStyle?` | Style for search placeholder |
+| `searchIconColor` | `Color?` | Search icon color |
+| `loadingIconColor` | `Color?` | Loading indicator color |
+| `emptyStateTextStyle` | `TextStyle?` | Style for empty state title |
+| `emptyStateTextColor` | `Color?` | Color for empty state title text |
+| `emptyStateSubtitleTextStyle` | `TextStyle?` | Style for empty state subtitle |
+| `emptyStateSubtitleTextColor` | `Color?` | Color for empty state subtitle text |
+| `errorStateTextStyle` | `TextStyle?` | Style for error state title |
+| `errorStateSubtitleStyle` | `TextStyle?` | Style for error state subtitle |
+| `onlineStatusColor` | `Color?` | Online status indicator color |
+| `separatorColor` | `Color?` | Color of list item separators |
+| `separatorHeight` | `double?` | Height of list item separators |
+| `listPadding` | `EdgeInsetsGeometry?` | Padding for the list |
+| `ownerMemberScopeBackgroundColor` | `Color?` | Background color for owner scope badge |
+| `ownerMemberScopeTextColor` | `Color?` | Text color for owner scope badge |
+| `ownerMemberScopeBorder` | `BoxBorder?` | Border for owner scope badge |
+| `ownerMemberScopeTextStyle` | `TextStyle?` | Text style for owner scope badge |
+| `adminMemberScopeBackgroundColor` | `Color?` | Background color for admin scope badge |
+| `adminMemberScopeTextColor` | `Color?` | Text color for admin scope badge |
+| `adminMemberScopeBorder` | `BoxBorder?` | Border for admin scope badge |
+| `adminMemberScopeTextStyle` | `TextStyle?` | Text style for admin scope badge |
+| `moderatorMemberScopeBackgroundColor` | `Color?` | Background color for moderator scope badge |
+| `moderatorMemberScopeTextColor` | `Color?` | Text color for moderator scope badge |
+| `moderatorMemberScopeBorder` | `BoxBorder?` | Border for moderator scope badge |
+| `moderatorMemberScopeTextStyle` | `TextStyle?` | Text style for moderator scope badge |
+| `checkboxCheckedBackgroundColor` | `Color?` | Background color for checked checkbox |
+| `checkboxBackgroundColor` | `Color?` | Background color for unchecked checkbox |
+| `checkboxSelectedIconColor` | `Color?` | Color for checkbox icon when selected |
+| `checkboxBorder` | `BorderSide?` | Border for checkbox |
+| `checkboxBorderRadius` | `BorderRadiusGeometry?` | Border radius for checkbox |
+| `listItemSelectedBackgroundColor` | `Color?` | Background color for selected list item |
+| `submitIconColor` | `Color?` | Color for submit icon |
+| `retryButtonBackgroundColor` | `Color?` | Background color for retry button |
+| `retryButtonTextColor` | `Color?` | Text color for retry button |
+| `retryButtonTextStyle` | `TextStyle?` | Text style for retry button |
+| `retryButtonBorder` | `BorderSide?` | Border for retry button |
+| `retryButtonBorderRadius` | `BorderRadiusGeometry?` | Border radius for retry button |
+| `avatarStyle` | `CometChatAvatarStyle?` | Style for member avatars |
+| `statusIndicatorStyle` | `CometChatStatusIndicatorStyle?` | Style for status indicators |
+| `listItemStyle` | `ListItemStyle?` | Style for list items |
+| `confirmDialogStyle` | `CometChatConfirmDialogStyle?` | Style for confirmation dialogs |
+| `changeScopeStyle` | `CometChatChangeScopeStyle?` | Style for change scope dialog |
+| `optionsBackgroundColor` | `Color?` | Background color for options menu |
+| `optionsIconColor` | `Color?` | Color for options icon |
+| `optionsTextStyle` | `TextStyle?` | Text style for options |
+
+---
+
+
+## Common Patterns
+
+### Hide member management options
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ hideKickMemberOption: true,
+ hideBanMemberOption: true,
+ hideScopeChangeOption: true,
+)
+```
+
+
+
+### Multi-select with selection callback
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ selectionMode: SelectionMode.multiple,
+ activateSelection: ActivateSelection.onClick,
+ onSelection: (selectedMembers) {
+ if (selectedMembers != null && selectedMembers.isNotEmpty) {
+ print("Selected ${selectedMembers.length} members");
+ // Perform batch action on selected members
+ }
+ },
+)
+```
+
+
+
+### Hide all chrome — minimal list
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ hideSearch: true,
+ hideAppbar: true,
+ hideSeparator: true,
+)
+```
+
+
+
+### Filter admins and moderators only
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ groupMembersRequestBuilder: GroupMembersRequestBuilder(group.guid)
+ ..scopes = [GroupMemberScope.admin, GroupMemberScope.moderator],
+)
+```
+
+
+
+---
+
+
+## Props Reference
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `group` | `Group` | **required** | The group object to fetch members from |
+| `groupMembersProtocol` | `GroupMembersBuilderProtocol?` | `null` | Custom request builder protocol |
+| `groupMembersRequestBuilder` | `GroupMembersRequestBuilder?` | `null` | Custom request builder for filtering members |
+| `searchKeyword` | `String?` | `null` | Pre-fills search and filters list |
+| `controllerTag` | `String?` | `null` | Tag for controller management |
+| `onSelection` | `Function(List?)?` | `null` | Callback when members are selected |
+| `onItemTap` | `Function(GroupMember)?` | `null` | Callback on tapping a member item |
+| `onItemLongPress` | `Function(GroupMember)?` | `null` | Callback on long pressing a member item |
+| `onBack` | `VoidCallback?` | `null` | Callback on closing this screen |
+| `onError` | `OnError?` | `null` | Callback in case any error occurs |
+| `onLoad` | `OnLoad?` | `null` | Callback when list is fetched and loaded |
+| `onEmpty` | `OnEmpty?` | `null` | Callback when the list is empty |
+| `stateCallBack` | `Function(CometChatGroupMembersController)?` | `null` | Access controller functions from parent |
+| `showBackButton` | `bool` | `true` | Show/hide back button |
+| `hideSearch` | `bool` | `false` | Show/hide search input |
+| `hideSeparator` | `bool?` | `null` | Toggle visibility of separator |
+| `hideError` | `bool?` | `null` | Toggle visibility of error dialog |
+| `hideAppbar` | `bool?` | `null` | Hides the appbar |
+| `usersStatusVisibility` | `bool?` | `true` | Hide status indicator on avatar |
+| `hideKickMemberOption` | `bool?` | `null` | Hide kick member option |
+| `hideBanMemberOption` | `bool?` | `null` | Hide ban member option |
+| `hideScopeChangeOption` | `bool?` | `null` | Hide scope change option |
+| `selectionMode` | `SelectionMode?` | `null` | Selection mode (single/multiple/none) |
+| `activateSelection` | `ActivateSelection?` | `null` | When to activate selection |
+| `subtitleView` | `Widget? Function(BuildContext, GroupMember)?` | `null` | Custom subtitle for each member |
+| `listItemView` | `Widget Function(GroupMember)?` | `null` | Custom view for each member |
+| `trailingView` | `Function(BuildContext, GroupMember)?` | `null` | Custom trailing widget |
+| `leadingView` | `Widget? Function(BuildContext, GroupMember)?` | `null` | Custom leading view |
+| `titleView` | `Widget? Function(BuildContext, GroupMember)?` | `null` | Custom title view |
+| `loadingStateView` | `WidgetBuilder?` | `null` | View for loading state |
+| `emptyStateView` | `WidgetBuilder?` | `null` | View for empty state |
+| `errorStateView` | `WidgetBuilder?` | `null` | View for error state |
+| `backButton` | `Widget?` | `null` | Custom back button widget |
+| `searchBoxIcon` | `Widget?` | `null` | Custom search icon |
+| `selectIcon` | `Widget?` | `null` | Custom selection icon |
+| `submitIcon` | `Widget?` | `null` | Custom selection complete icon |
+| `appBarOptions` | `List?` | `null` | App bar options |
+| `options` | `List? Function(...)?` | `null` | Options visible at slide of each member |
+| `setOptions` | `List? Function(...)?` | `null` | Replace default long press actions |
+| `addOptions` | `List? Function(...)?` | `null` | Add to default long press actions |
+| `searchPlaceholder` | `String?` | `null` | Placeholder text of search input |
+| `height` | `double?` | `null` | Height of the widget |
+| `width` | `double?` | `null` | Width of the widget |
+| `style` | `CometChatGroupMembersStyle?` | `null` | Style for the component |
+| `controller` | `ScrollController?` | `null` | Scroll controller for the list |
+
+---
+
+
+
+
+ Display and manage available groups
+
+
+ Add new members to a group
+
+
+ View and manage banned members
+
+
+ Learn how to customize the look and feel
+
+
\ No newline at end of file
diff --git a/ui-kit/flutter/v5/groups.mdx b/ui-kit/flutter/v5/groups.mdx
new file mode 100644
index 000000000..9a2a9c1c9
--- /dev/null
+++ b/ui-kit/flutter/v5/groups.mdx
@@ -0,0 +1,1497 @@
+---
+title: "Groups"
+description: "Searchable, scrollable list of all available groups with icon, name, member count, and group type indicator."
+---
+
+
+```json
+{
+ "component": "CometChatGroups",
+ "package": "cometchat_chat_uikit",
+ "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
+ "description": "Searchable, scrollable list of all available groups with icon, name, member count, and group type indicator.",
+ "primaryOutput": {
+ "prop": "onItemTap",
+ "type": "Function(BuildContext context, Group group)?"
+ },
+ "props": {
+ "data": {
+ "groupsRequestBuilder": {
+ "type": "GroupsRequestBuilder?",
+ "default": "SDK default (30 per page)",
+ "note": "Pass the builder, not the result of .build()"
+ },
+ "groupsProtocol": {
+ "type": "GroupsBuilderProtocol?",
+ "default": "null",
+ "note": "Custom protocol for fetching groups"
+ },
+ "scrollController": {
+ "type": "ScrollController?",
+ "default": "null",
+ "note": "Custom scroll controller for the list"
+ },
+ "title": {
+ "type": "String?",
+ "default": "Groups",
+ "note": "Title text for the app bar"
+ },
+ "controllerTag": {
+ "type": "String?",
+ "default": "null",
+ "note": "Tag for controller management"
+ },
+ "searchPlaceholder": {
+ "type": "String?",
+ "default": "null",
+ "note": "Placeholder text for search input"
+ },
+ "searchKeyword": {
+ "type": "String?",
+ "default": "null",
+ "note": "Pre-fills search and filters list"
+ },
+ "height": {
+ "type": "double?",
+ "default": "null"
+ },
+ "width": {
+ "type": "double?",
+ "default": "null"
+ }
+ },
+ "callbacks": {
+ "onItemTap": "Function(BuildContext context, Group group)?",
+ "onItemLongPress": "Function(BuildContext context, Group group)?",
+ "onSelection": "Function(List?)?",
+ "onBack": "VoidCallback?",
+ "onError": "OnError?",
+ "onLoad": "OnLoad?",
+ "onEmpty": "OnEmpty?",
+ "stateCallBack": "Function(CometChatGroupsController controller)?"
+ },
+ "visibility": {
+ "groupTypeVisibility": { "type": "bool?", "default": true },
+ "hideAppbar": { "type": "bool?", "default": false },
+ "hideError": { "type": "bool?", "default": false },
+ "hideSearch": { "type": "bool", "default": false },
+ "showBackButton": { "type": "bool", "default": true }
+ },
+ "selection": {
+ "selectionMode": {
+ "type": "SelectionMode?",
+ "values": ["SelectionMode.single", "SelectionMode.multiple", "SelectionMode.none"],
+ "default": "null"
+ },
+ "activateSelection": {
+ "type": "ActivateSelection?",
+ "values": ["ActivateSelection.onClick", "ActivateSelection.onLongClick"],
+ "default": "null"
+ }
+ },
+ "viewSlots": {
+ "listItemView": "Widget Function(Group group)?",
+ "leadingView": "Widget? Function(BuildContext context, Group group)?",
+ "titleView": "Widget? Function(BuildContext context, Group group)?",
+ "subtitleView": "Widget? Function(BuildContext context, Group group)?",
+ "trailingView": "Widget? Function(BuildContext context, Group group)?",
+ "loadingStateView": "WidgetBuilder?",
+ "emptyStateView": "WidgetBuilder?",
+ "errorStateView": "WidgetBuilder?",
+ "setOptions": "List? Function(Group, CometChatGroupsController, BuildContext)?",
+ "addOptions": "List? Function(Group, CometChatGroupsController, BuildContext)?",
+ "appBarOptions": "List Function(BuildContext context)?"
+ },
+ "icons": {
+ "backButton": { "type": "Widget?", "default": "built-in back arrow" },
+ "searchBoxIcon": { "type": "Widget?", "default": "built-in search icon" },
+ "submitIcon": { "type": "Widget?", "default": "built-in check icon" },
+ "passwordGroupIcon": { "type": "Widget?", "default": "built-in lock icon" },
+ "privateGroupIcon": { "type": "Widget?", "default": "built-in shield icon" }
+ },
+ "style": {
+ "groupsStyle": { "type": "CometChatGroupsStyle?", "default": "null" }
+ }
+ },
+ "events": [
+ { "name": "CometChatGroupEvents.ccGroupCreated", "payload": "Group", "description": "Group created" },
+ { "name": "CometChatGroupEvents.ccGroupDeleted", "payload": "Group", "description": "Group deleted" },
+ { "name": "CometChatGroupEvents.ccGroupLeft", "payload": "Action, User, Group", "description": "User left group" },
+ { "name": "CometChatGroupEvents.ccGroupMemberJoined", "payload": "User, Group", "description": "User joined group" },
+ { "name": "CometChatGroupEvents.ccGroupMemberAdded", "payload": "List, List, Group, User", "description": "Members added" },
+ { "name": "CometChatGroupEvents.ccGroupMemberKicked", "payload": "Action, User, User, Group", "description": "Member kicked" },
+ { "name": "CometChatGroupEvents.ccGroupMemberBanned", "payload": "Action, User, User, Group", "description": "Member banned" },
+ { "name": "CometChatGroupEvents.ccGroupMemberUnbanned", "payload": "Action, User, User, Group", "description": "Member unbanned" },
+ { "name": "CometChatGroupEvents.ccGroupMemberScopeChanged", "payload": "Action, User, String, String, Group", "description": "Member scope changed" },
+ { "name": "CometChatGroupEvents.ccOwnershipChanged", "payload": "Group, GroupMember", "description": "Ownership transferred" }
+ ],
+ "sdkListeners": [
+ "onGroupMemberJoined",
+ "onGroupMemberLeft",
+ "onMemberAddedToGroup",
+ "onGroupMemberKicked",
+ "onGroupMemberBanned",
+ "onGroupMemberScopeChanged",
+ "onConnected"
+ ],
+ "compositionExample": {
+ "description": "Group directory wired to message view",
+ "components": [
+ "CometChatGroups",
+ "CometChatMessages",
+ "CometChatMessageHeader",
+ "CometChatMessageList",
+ "CometChatMessageComposer"
+ ],
+ "flow": "onItemTap emits Group -> pass to CometChatMessages or individual message components"
+ },
+ "types": {
+ "CometChatOption": {
+ "id": "String?",
+ "title": "String?",
+ "icon": "String?",
+ "iconWidget": "Widget?",
+ "onClick": "VoidCallback?"
+ },
+ "SelectionMode": {
+ "single": "SelectionMode.single",
+ "multiple": "SelectionMode.multiple",
+ "none": "SelectionMode.none"
+ },
+ "ActivateSelection": {
+ "onClick": "ActivateSelection.onClick",
+ "onLongClick": "ActivateSelection.onLongClick"
+ }
+ }
+}
+```
+
+
+
+## Where It Fits
+
+`CometChatGroups` is a directory list widget. It renders available groups and emits the selected `Group` via `onItemTap`. Wire it to `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer` to build a group chat layout.
+
+
+
+```dart
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+class GroupChatApp extends StatefulWidget {
+ const GroupChatApp({super.key});
+
+ @override
+ State createState() => _GroupChatAppState();
+}
+
+class _GroupChatAppState extends State {
+ Group? selectedGroup;
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: Row(
+ children: [
+ SizedBox(
+ width: 400,
+ child: CometChatGroups(
+ onItemTap: (context, group) {
+ setState(() {
+ selectedGroup = group;
+ });
+ },
+ ),
+ ),
+ Expanded(
+ child: selectedGroup != null
+ ? CometChatMessages(group: selectedGroup)
+ : const Center(child: Text('Select a group')),
+ ),
+ ],
+ ),
+ );
+ }
+}
+```
+
+
+
+
+
+
+
+---
+
+
+## Minimal Render
+
+
+
+```dart
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+class GroupsDemo extends StatelessWidget {
+ const GroupsDemo({super.key});
+
+ @override
+ Widget build(BuildContext context) {
+ return const Scaffold(
+ body: SafeArea(
+ child: CometChatGroups(),
+ ),
+ );
+ }
+}
+```
+
+
+
+You can also launch it using `Navigator.push`:
+
+```dart
+Navigator.push(
+ context,
+ MaterialPageRoute(builder: (context) => const CometChatGroups())
+);
+```
+
+---
+
+## Filtering Groups
+
+Pass a `GroupsRequestBuilder` to `groupsRequestBuilder`. Pass the builder instance — not the result of `.build()`.
+
+
+
+```dart
+CometChatGroups(
+ groupsRequestBuilder: GroupsRequestBuilder()
+ ..joinedOnly = true
+ ..limit = 10,
+)
+```
+
+
+
+### Filter Recipes
+
+| Recipe | Code |
+| --- | --- |
+| Joined groups only | `GroupsRequestBuilder()..joinedOnly = true` |
+| Limit to 10 per page | `GroupsRequestBuilder()..limit = 10` |
+| Search by keyword | `GroupsRequestBuilder()..searchKeyword = "design"` |
+| Filter by tags | `GroupsRequestBuilder()..tags = ["vip"]` |
+| With tags data | `GroupsRequestBuilder()..withTags = true` |
+
+Default page size is 30. The component uses infinite scroll — the next page loads as the user scrolls to the bottom.
+
+
+### GroupsRequestBuilder Properties
+
+| Property | Description | Code |
+| --- | --- | --- |
+| `limit` | Number of groups to fetch per request. | `..limit = 30` |
+| `searchKeyword` | Search groups by name. | `..searchKeyword = "Team"` |
+| `joinedOnly` | Fetch only joined groups. Default `false`. | `..joinedOnly = true` |
+| `tags` | Filter groups by specific tags. | `..tags = ["vip"]` |
+| `withTags` | Include tags in the Group object. Default `false`. | `..withTags = true` |
+| `build()` | Builds and returns a `GroupsRequest` object. | `.build()` |
+
+Refer to [GroupsRequestBuilder](/sdk/flutter/retrieve-groups) for the full builder API.
+
+---
+
+## Actions and Events
+
+### Callback Props
+
+#### onItemTap
+
+Fires when a group row is tapped. Primary navigation hook — set the active group and render the message view.
+
+
+
+```dart
+CometChatGroups(
+ onItemTap: (context, group) {
+ print("Selected: ${group.name}");
+ },
+)
+```
+
+
+
+#### onItemLongPress
+
+Fires when a group row is long-pressed. Useful for showing context menus or custom actions.
+
+
+
+```dart
+CometChatGroups(
+ onItemLongPress: (context, group) {
+ // Show custom context menu
+ },
+)
+```
+
+
+
+#### onSelection
+
+Fires when groups are selected in multi-select mode. Requires `selectionMode` to be set.
+
+
+
+```dart
+CometChatGroups(
+ selectionMode: SelectionMode.multiple,
+ activateSelection: ActivateSelection.onClick,
+ onSelection: (selectedList) {
+ print("Selected ${selectedList?.length ?? 0} groups");
+ },
+)
+```
+
+
+
+
+#### onError
+
+Fires on internal errors (network failure, auth issue, SDK exception).
+
+
+
+```dart
+CometChatGroups(
+ onError: (error) {
+ print("CometChatGroups error: $error");
+ },
+)
+```
+
+
+
+#### onBack
+
+Fires when the back button is pressed.
+
+
+
+```dart
+CometChatGroups(
+ showBackButton: true,
+ onBack: () {
+ Navigator.pop(context);
+ },
+)
+```
+
+
+
+#### onLoad
+
+Fires when the group list is successfully loaded.
+
+
+
+```dart
+CometChatGroups(
+ onLoad: (list) {
+ print("Loaded ${list.length} groups");
+ },
+)
+```
+
+
+
+#### onEmpty
+
+Fires when the group list is empty.
+
+
+
+```dart
+CometChatGroups(
+ onEmpty: () {
+ print("No groups found");
+ },
+)
+```
+
+
+
+### Global UI Events
+
+`CometChatGroupEvents` emits events subscribable from anywhere in the application. Add a listener in `initState` and remove it in `dispose`.
+
+| Event | Fires when | Payload |
+| --- | --- | --- |
+| `ccGroupCreated` | A new group is created | `Group` |
+| `ccGroupDeleted` | A group is deleted | `Group` |
+| `ccGroupLeft` | A user leaves a group | `Action, User, Group` |
+| `ccGroupMemberJoined` | A user joins a group | `User, Group` |
+| `ccGroupMemberAdded` | Members are added to a group | `List, List, Group, User` |
+| `ccGroupMemberKicked` | A member is kicked | `Action, User, User, Group` |
+| `ccGroupMemberBanned` | A member is banned | `Action, User, User, Group` |
+| `ccGroupMemberUnbanned` | A member is unbanned | `Action, User, User, Group` |
+| `ccGroupMemberScopeChanged` | A member's scope changes | `Action, User, String, String, Group` |
+| `ccOwnershipChanged` | Group ownership is transferred | `Group, GroupMember` |
+
+When to use: sync external UI with group state changes. For example, update a group count badge when a group is created or deleted.
+
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:cometchat_sdk/models/action.dart' as cc;
+
+class _YourScreenState extends State with CometChatGroupEventListener {
+
+ @override
+ void initState() {
+ super.initState();
+ CometChatGroupEvents.addGroupsListener("listenerId", this);
+ }
+
+ @override
+ void dispose() {
+ CometChatGroupEvents.removeGroupsListener("listenerId");
+ super.dispose();
+ }
+
+ @override
+ void ccGroupCreated(Group group) {
+ print("Group created: ${group.name}");
+ }
+
+ @override
+ void ccGroupDeleted(Group group) {
+ print("Group deleted: ${group.name}");
+ }
+
+ @override
+ void ccGroupLeft(cc.Action message, User leftUser, Group leftGroup) {
+ print("User ${leftUser.name} left ${leftGroup.name}");
+ }
+
+ @override
+ void ccGroupMemberJoined(User joinedUser, Group joinedGroup) {
+ print("User ${joinedUser.name} joined ${joinedGroup.name}");
+ }
+
+ @override
+ void ccOwnershipChanged(Group group, GroupMember newOwner) {
+ print("Ownership of ${group.name} transferred to ${newOwner.name}");
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return const Placeholder();
+ }
+}
+```
+
+
+
+### SDK Events (Real-Time, Automatic)
+
+The component listens to these SDK events internally. No manual attachment needed unless additional side effects are required.
+
+| SDK Listener | Internal behavior |
+| --- | --- |
+| `onGroupMemberJoined` | Updates member count, sets `hasJoined` if current user joined |
+| `onGroupMemberLeft` | Updates member count |
+| `onMemberAddedToGroup` | Updates member count, adds group to list if current user was added |
+| `onGroupMemberKicked` | Updates member count |
+| `onGroupMemberBanned` | Updates member count |
+| `onGroupMemberScopeChanged` | Updates member scope |
+
+Automatic: group membership changes, member count updates.
+
+---
+
+
+## Custom View Slots
+
+Each slot replaces a section of the default UI. Slots that accept a group parameter receive the `Group` object for that row.
+
+| Slot | Signature | Replaces |
+| --- | --- | --- |
+| `listItemView` | `Widget Function(Group)` | Entire list item row |
+| `leadingView` | `Widget? Function(BuildContext, Group)` | Avatar / left section |
+| `titleView` | `Widget? Function(BuildContext, Group)` | Name / title text |
+| `subtitleView` | `Widget? Function(BuildContext, Group)` | Member count subtitle |
+| `trailingView` | `Widget? Function(BuildContext, Group)` | Right section |
+| `loadingStateView` | `WidgetBuilder` | Loading spinner |
+| `emptyStateView` | `WidgetBuilder` | Empty state |
+| `errorStateView` | `WidgetBuilder` | Error state |
+| `setOptions` | `List? Function(Group, Controller, BuildContext)` | Context menu actions (replaces default) |
+| `addOptions` | `List? Function(Group, Controller, BuildContext)` | Context menu actions (adds to default) |
+| `appBarOptions` | `List Function(BuildContext)` | App bar action widgets |
+
+### listItemView
+
+Replace the entire list item row.
+
+
+
+
+
+
+
+```dart
+CometChatGroups(
+ listItemView: (group) {
+ return ListTile(
+ title: Text(
+ group.name,
+ style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
+ ),
+ subtitle: Text(
+ "${group.membersCount} Members • ${group.description}",
+ overflow: TextOverflow.ellipsis,
+ style: TextStyle(fontSize: 14, color: Color(0xFF727272)),
+ ),
+ trailing: ElevatedButton(
+ onPressed: () {
+ CometChat.joinGroup(
+ group.guid,
+ group.type,
+ onSuccess: (group) {
+ // Handle success
+ },
+ onError: (error) {
+ // Handle error
+ },
+ );
+ },
+ style: ElevatedButton.styleFrom(
+ backgroundColor: Color(0xFFEDEAFA),
+ elevation: 0,
+ shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(1000)),
+ ),
+ child: Text("JOIN", style: TextStyle(color: Color(0xFF6852D6), fontSize: 12)),
+ ),
+ );
+ },
+)
+```
+
+
+
+
+### leadingView
+
+Replace the avatar / left section. Joined status badge example.
+
+
+
+```dart
+CometChatGroups(
+ leadingView: (context, group) {
+ return Stack(
+ children: [
+ CometChatAvatar(
+ image: group.icon,
+ name: group.name,
+ style: CometChatAvatarStyle(borderRadius: BorderRadius.circular(8)),
+ ),
+ if (group.hasJoined)
+ Positioned(
+ bottom: -2,
+ left: 0,
+ right: 0,
+ child: Container(
+ padding: EdgeInsets.symmetric(horizontal: 4, vertical: 2),
+ decoration: BoxDecoration(color: Color(0xFF09C26F)),
+ child: Text(
+ "Joined",
+ textAlign: TextAlign.center,
+ style: TextStyle(color: Colors.white, fontSize: 8, fontWeight: FontWeight.w600),
+ ),
+ ),
+ ),
+ ],
+ );
+ },
+)
+```
+
+
+
+### titleView
+
+Replace the name / title text. Group type badge inline example.
+
+
+
+```dart
+CometChatGroups(
+ titleView: (context, group) {
+ return Row(
+ children: [
+ Text(
+ group.name,
+ style: TextStyle(fontWeight: FontWeight.w500, fontSize: 16),
+ ),
+ SizedBox(width: 4),
+ Container(
+ padding: EdgeInsets.symmetric(horizontal: 4, vertical: 2),
+ decoration: BoxDecoration(
+ color: group.type == GroupTypeConstants.public
+ ? Color(0xFF0B7BEA)
+ : Color(0xFF09C26F),
+ borderRadius: BorderRadius.circular(7),
+ ),
+ child: Text(
+ group.type,
+ style: TextStyle(color: Colors.white, fontSize: 8, fontWeight: FontWeight.w600),
+ ),
+ ),
+ ],
+ );
+ },
+)
+```
+
+
+
+### subtitleView
+
+Replace the member count subtitle text.
+
+
+
+
+
+
+
+```dart
+CometChatGroups(
+ subtitleView: (context, group) {
+ return Text(
+ "${group.membersCount} Members • ${group.description ?? 'No description'}",
+ overflow: TextOverflow.ellipsis,
+ style: TextStyle(fontSize: 14, color: Color(0xFF727272)),
+ );
+ },
+)
+```
+
+
+
+
+### trailingView
+
+Replace the right section. Join status button example.
+
+
+
+```dart
+CometChatGroups(
+ trailingView: (context, group) {
+ return Container(
+ padding: EdgeInsets.symmetric(horizontal: 12, vertical: 4),
+ decoration: BoxDecoration(
+ color: Color(0xFFEDEAFA),
+ borderRadius: BorderRadius.circular(1000),
+ ),
+ child: Text(
+ group.hasJoined ? "JOINED" : "+ JOIN",
+ style: TextStyle(color: Color(0xFF6852D6), fontSize: 12, fontWeight: FontWeight.w700),
+ ),
+ );
+ },
+)
+```
+
+
+
+### setOptions
+
+Replace the context menu / long-press actions on each group item.
+
+
+
+```dart
+CometChatGroups(
+ setOptions: (group, controller, context) {
+ return [
+ CometChatOption(
+ id: "leave",
+ title: "Leave Group",
+ icon: AssetConstants.close,
+ onClick: () {
+ CometChat.leaveGroup(group.guid, onSuccess: (response) {
+ print("Left group");
+ }, onError: (error) {
+ print("Error: $error");
+ });
+ },
+ ),
+ CometChatOption(
+ id: "view_members",
+ title: "View Members",
+ iconWidget: Icon(Icons.people_outline),
+ onClick: () {
+ // Navigate to group members
+ },
+ ),
+ ];
+ },
+)
+```
+
+
+
+### addOptions
+
+Add to the existing context menu actions without removing defaults.
+
+
+
+```dart
+CometChatGroups(
+ addOptions: (group, controller, context) {
+ return [
+ CometChatOption(
+ id: "mute",
+ title: "Mute Notifications",
+ iconWidget: Icon(Icons.notifications_off_outlined),
+ onClick: () {
+ // Mute notifications logic
+ },
+ ),
+ CometChatOption(
+ id: "pin",
+ title: "Pin Group",
+ iconWidget: Icon(Icons.push_pin_outlined),
+ onClick: () {
+ // Pin group logic
+ },
+ ),
+ ];
+ },
+)
+```
+
+
+
+
+### appBarOptions
+
+Add custom widgets to the app bar.
+
+
+
+
+
+
+
+```dart
+CometChatGroups(
+ appBarOptions: (context) => [
+ IconButton(
+ onPressed: () {
+ // Navigate to create group
+ },
+ icon: Icon(Icons.group_add, color: Color(0xFF6852D6)),
+ ),
+ ],
+)
+```
+
+
+
+---
+
+## Styling
+
+Set `CometChatGroupsStyle` to customize the appearance.
+
+
+
+```dart
+CometChatGroups(
+ groupsStyle: CometChatGroupsStyle(
+ backgroundColor: Colors.white,
+ titleTextColor: Color(0xFFF76808),
+ separatorColor: Color(0xFFF76808),
+ avatarStyle: CometChatAvatarStyle(
+ borderRadius: BorderRadius.circular(8),
+ backgroundColor: Color(0xFFFBAA75),
+ ),
+ ),
+)
+```
+
+
+
+
+
+
+
+### Style Properties
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `backgroundColor` | `Color` | Background color of the component |
+| `border` | `Border` | Border for the widget |
+| `borderRadius` | `BorderRadiusGeometry` | Border radius for the widget |
+| `titleTextColor` | `Color` | Color of the header title |
+| `titleTextStyle` | `TextStyle` | Style for the header title |
+| `backIconColor` | `Color` | Back button icon color |
+| `searchBackgroundColor` | `Color` | Background color of search box |
+| `searchBorder` | `BorderSide` | Border for search box |
+| `searchBorderRadius` | `BorderRadius` | Border radius for search box |
+| `searchPlaceHolderTextColor` | `Color` | Placeholder text color in search |
+| `searchPlaceHolderTextStyle` | `TextStyle` | Placeholder text style in search |
+| `searchIconColor` | `Color` | Search icon color |
+| `searchInputTextColor` | `Color` | Search input text color |
+| `searchInputTextStyle` | `TextStyle` | Search input text style |
+| `separatorColor` | `Color` | Color of list item separators |
+| `separatorHeight` | `double` | Height of list item separators |
+| `itemTitleTextColor` | `Color` | Color of group name in list items |
+| `itemTitleTextStyle` | `TextStyle` | Style for group name in list items |
+| `itemSubtitleTextColor` | `Color` | Color of member count subtitle |
+| `itemSubtitleTextStyle` | `TextStyle` | Style for member count subtitle |
+| `listItemSelectedBackgroundColor` | `Color` | Background color for selected items |
+| `privateGroupIconBackground` | `Color` | Background color for private group icon |
+| `protectedGroupIconBackground` | `Color` | Background color for password group icon |
+| `emptyStateTextColor` | `Color` | Text color for empty state title |
+| `emptyStateTextStyle` | `TextStyle` | Text style for empty state title |
+| `emptyStateSubTitleTextColor` | `Color` | Text color for empty state subtitle |
+| `emptyStateSubTitleTextStyle` | `TextStyle` | Text style for empty state subtitle |
+| `errorStateTextColor` | `Color` | Text color for error state title |
+| `errorStateTextStyle` | `TextStyle` | Text style for error state title |
+| `errorStateSubTitleTextColor` | `Color` | Text color for error state subtitle |
+| `errorStateSubTitleTextStyle` | `TextStyle` | Text style for error state subtitle |
+| `retryButtonBackgroundColor` | `Color` | Background color for retry button |
+| `retryButtonBorderRadius` | `BorderRadius` | Border radius for retry button |
+| `retryButtonBorder` | `BorderSide` | Border for retry button |
+| `retryButtonTextColor` | `Color` | Text color for retry button |
+| `retryButtonTextStyle` | `TextStyle` | Text style for retry button |
+| `submitIconColor` | `Color` | Color of submit icon in selection mode |
+| `checkBoxBackgroundColor` | `Color` | Background color of unchecked checkbox |
+| `checkBoxCheckedBackgroundColor` | `Color` | Background color of checked checkbox |
+| `checkboxSelectedIconColor` | `Color` | Color of checkmark icon |
+| `checkBoxBorderRadius` | `BorderRadius` | Border radius for checkbox |
+| `checkBoxBorder` | `BorderSide` | Border for checkbox |
+| `avatarStyle` | `CometChatAvatarStyle` | Style for group avatars |
+| `statusIndicatorStyle` | `CometChatStatusIndicatorStyle` | Style for group type indicators |
+
+---
+
+
+## Common Patterns
+
+### Custom empty state with CTA
+
+
+
+```dart
+CometChatGroups(
+ emptyStateView: (context) {
+ return Center(
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ Icon(Icons.group_outlined, size: 64, color: Color(0xFF727272)),
+ SizedBox(height: 16),
+ Text("No groups found", style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500)),
+ SizedBox(height: 8),
+ ElevatedButton(
+ onPressed: () {
+ // Navigate to create group
+ },
+ child: Text("Create a Group"),
+ ),
+ ],
+ ),
+ );
+ },
+)
+```
+
+
+
+### Joined groups only
+
+
+
+```dart
+CometChatGroups(
+ groupsRequestBuilder: GroupsRequestBuilder()
+ ..joinedOnly = true,
+)
+```
+
+
+
+### Multi-select with selection callback
+
+
+
+```dart
+CometChatGroups(
+ selectionMode: SelectionMode.multiple,
+ activateSelection: ActivateSelection.onClick,
+ onSelection: (selectedGroups) {
+ if (selectedGroups != null && selectedGroups.isNotEmpty) {
+ print("Selected ${selectedGroups.length} groups");
+ // Perform batch action on selected groups
+ }
+ },
+)
+```
+
+
+
+### Hide all chrome — minimal list
+
+
+
+```dart
+CometChatGroups(
+ hideSearch: true,
+ hideAppbar: true,
+ groupTypeVisibility: false,
+)
+```
+
+
+
+---
+
+## Accessibility
+
+The component renders a scrollable list of interactive items. Each group row supports:
+
+- Tap gesture for selection/navigation
+- Long-press gesture for context menu actions
+- Checkbox selection in multi-select mode with proper touch targets
+- Group type indicators (public/private/password) with visual icons
+
+For screen readers:
+- Group names are readable as list item titles
+- Group type indicators use icons — consider adding `Semantics` widgets via `leadingView` if screen reader descriptions are needed
+- Selection state is communicated through checkbox widgets
+
+The component respects system accessibility settings including text scaling and high contrast modes.
+
+---
+
+
+## Props
+
+All props are optional unless noted.
+
+### activateSelection
+
+Controls when selection mode activates.
+
+| | |
+| --- | --- |
+| Type | `ActivateSelection` |
+| Default | `null` |
+
+Values: `ActivateSelection.onClick`, `ActivateSelection.onLongClick`
+
+---
+
+### addOptions
+
+Adds additional context menu actions to the default options.
+
+| | |
+| --- | --- |
+| Type | `List? Function(Group, CometChatGroupsController, BuildContext)` |
+| Default | `null` |
+
+---
+
+### appBarOptions
+
+Custom widgets to display in the app bar.
+
+| | |
+| --- | --- |
+| Type | `List Function(BuildContext context)` |
+| Default | `null` |
+
+---
+
+### backButton
+
+Custom back button widget.
+
+| | |
+| --- | --- |
+| Type | `Widget` |
+| Default | Built-in back arrow |
+
+---
+
+### controllerTag
+
+Identifier tag for controller management.
+
+| | |
+| --- | --- |
+| Type | `String` |
+| Default | `null` |
+
+---
+
+### emptyStateView
+
+Custom view displayed when there are no groups.
+
+| | |
+| --- | --- |
+| Type | `WidgetBuilder` |
+| Default | Built-in empty state |
+
+---
+
+### errorStateView
+
+Custom view displayed when an error occurs.
+
+| | |
+| --- | --- |
+| Type | `WidgetBuilder` |
+| Default | Built-in error state |
+
+---
+
+### groupsProtocol
+
+Custom protocol for fetching groups.
+
+| | |
+| --- | --- |
+| Type | `GroupsBuilderProtocol` |
+| Default | `null` |
+
+---
+
+
+### groupsRequestBuilder
+
+Controls which groups load and in what order.
+
+| | |
+| --- | --- |
+| Type | `GroupsRequestBuilder` |
+| Default | SDK default (30 per page) |
+
+Pass the builder instance, not the result of `.build()`.
+
+---
+
+### groupsStyle
+
+Styling options for the groups list.
+
+| | |
+| --- | --- |
+| Type | `CometChatGroupsStyle` |
+| Default | `null` |
+
+---
+
+### groupTypeVisibility
+
+Shows or hides the group type icon (public/private/password) on group avatars.
+
+| | |
+| --- | --- |
+| Type | `bool` |
+| Default | `true` |
+
+---
+
+### height
+
+Height of the widget.
+
+| | |
+| --- | --- |
+| Type | `double` |
+| Default | `null` |
+
+---
+
+### hideAppbar
+
+Hides the app bar including title and search.
+
+| | |
+| --- | --- |
+| Type | `bool` |
+| Default | `false` |
+
+---
+
+### hideError
+
+Hides the error state view.
+
+| | |
+| --- | --- |
+| Type | `bool` |
+| Default | `false` |
+
+---
+
+### hideSearch
+
+Hides the search input box.
+
+| | |
+| --- | --- |
+| Type | `bool` |
+| Default | `false` |
+
+---
+
+### leadingView
+
+Custom renderer for the avatar / left section.
+
+| | |
+| --- | --- |
+| Type | `Widget? Function(BuildContext context, Group group)` |
+| Default | Built-in avatar |
+
+---
+
+### listItemView
+
+Custom renderer for the entire list item row.
+
+| | |
+| --- | --- |
+| Type | `Widget Function(Group group)` |
+| Default | Built-in list item |
+
+---
+
+
+### loadingStateView
+
+Custom view displayed during loading state.
+
+| | |
+| --- | --- |
+| Type | `WidgetBuilder` |
+| Default | Built-in shimmer |
+
+---
+
+### onBack
+
+Callback triggered when the back button is pressed.
+
+| | |
+| --- | --- |
+| Type | `VoidCallback` |
+| Default | `null` |
+
+---
+
+### onEmpty
+
+Callback triggered when the group list is empty.
+
+| | |
+| --- | --- |
+| Type | `OnEmpty` |
+| Default | `null` |
+
+---
+
+### onError
+
+Callback triggered when an error occurs.
+
+| | |
+| --- | --- |
+| Type | `OnError` |
+| Default | `null` |
+
+---
+
+### onItemLongPress
+
+Callback triggered on long press of a group item.
+
+| | |
+| --- | --- |
+| Type | `Function(BuildContext context, Group group)` |
+| Default | `null` |
+
+---
+
+### onItemTap
+
+Callback triggered when tapping a group item.
+
+| | |
+| --- | --- |
+| Type | `Function(BuildContext context, Group group)` |
+| Default | `null` |
+
+---
+
+### onLoad
+
+Callback triggered when the list is successfully loaded.
+
+| | |
+| --- | --- |
+| Type | `OnLoad` |
+| Default | `null` |
+
+---
+
+### onSelection
+
+Callback triggered when groups are selected. Requires `selectionMode` to be set.
+
+| | |
+| --- | --- |
+| Type | `Function(List? list)` |
+| Default | `null` |
+
+---
+
+### passwordGroupIcon
+
+Custom icon widget for password-protected groups.
+
+| | |
+| --- | --- |
+| Type | `Widget` |
+| Default | Built-in lock icon |
+
+---
+
+### privateGroupIcon
+
+Custom icon widget for private groups.
+
+| | |
+| --- | --- |
+| Type | `Widget` |
+| Default | Built-in shield icon |
+
+---
+
+
+### scrollController
+
+Controller for scrolling the list.
+
+| | |
+| --- | --- |
+| Type | `ScrollController` |
+| Default | `null` |
+
+---
+
+### searchBoxIcon
+
+Custom search box icon widget.
+
+| | |
+| --- | --- |
+| Type | `Widget` |
+| Default | Built-in search icon |
+
+---
+
+### searchKeyword
+
+Pre-fills the search and filters the group list.
+
+| | |
+| --- | --- |
+| Type | `String` |
+| Default | `null` |
+
+---
+
+### searchPlaceholder
+
+Placeholder text for the search input box.
+
+| | |
+| --- | --- |
+| Type | `String` |
+| Default | `null` |
+
+---
+
+### selectionMode
+
+Enables single or multi-select mode.
+
+| | |
+| --- | --- |
+| Type | `SelectionMode` |
+| Default | `null` |
+
+Values: `SelectionMode.single`, `SelectionMode.multiple`, `SelectionMode.none`
+
+---
+
+### setOptions
+
+Replaces the default context menu actions.
+
+| | |
+| --- | --- |
+| Type | `List? Function(Group, CometChatGroupsController, BuildContext)` |
+| Default | `null` |
+
+---
+
+### showBackButton
+
+Shows or hides the back button.
+
+| | |
+| --- | --- |
+| Type | `bool` |
+| Default | `true` |
+
+---
+
+### stateCallBack
+
+Callback to access controller functions from parent.
+
+| | |
+| --- | --- |
+| Type | `Function(CometChatGroupsController controller)` |
+| Default | `null` |
+
+---
+
+### submitIcon
+
+Custom submit icon widget for selection mode.
+
+| | |
+| --- | --- |
+| Type | `Widget` |
+| Default | Built-in check icon |
+
+---
+
+### subtitleView
+
+Custom renderer for the member count subtitle.
+
+| | |
+| --- | --- |
+| Type | `Widget? Function(BuildContext context, Group group)` |
+| Default | Built-in member count |
+
+---
+
+### title
+
+Title text displayed in the app bar.
+
+| | |
+| --- | --- |
+| Type | `String` |
+| Default | `"Groups"` |
+
+---
+
+### titleView
+
+Custom renderer for the name / title text.
+
+| | |
+| --- | --- |
+| Type | `Widget? Function(BuildContext context, Group group)` |
+| Default | Built-in title |
+
+---
+
+### trailingView
+
+Custom renderer for the right section.
+
+| | |
+| --- | --- |
+| Type | `Widget? Function(BuildContext context, Group group)` |
+| Default | `null` |
+
+---
+
+### width
+
+Width of the widget.
+
+| | |
+| --- | --- |
+| Type | `double` |
+| Default | `null` |
+
+---
+
+
+## Events
+
+`CometChatGroups` subscribes to `CometChatGroupEvents`:
+
+| Event | Payload | Internal behavior |
+| --- | --- | --- |
+| `ccGroupCreated` | `Group` | Adds new group to list |
+| `ccGroupDeleted` | `Group` | Removes group from list |
+| `ccGroupLeft` | `Action, User, Group` | Removes private group or updates hasJoined |
+| `ccGroupMemberJoined` | `User, Group` | Updates group in list |
+| `ccGroupMemberAdded` | `List, List, Group, User` | Updates group in list |
+| `ccGroupMemberKicked` | `Action, User, User, Group` | Updates group in list |
+| `ccGroupMemberBanned` | `Action, User, User, Group` | Updates group in list |
+| `ccOwnershipChanged` | `Group, GroupMember` | Updates group in list |
+
+---
+
+## Customization Matrix
+
+| What to change | Where | Property/API | Example |
+| --- | --- | --- | --- |
+| Override behavior on group interaction | Component props | `on` callbacks | `onItemTap: (ctx, group) => setActive(group)` |
+| Filter which groups appear | Component props | `groupsRequestBuilder` | `groupsRequestBuilder: GroupsRequestBuilder()..joinedOnly = true` |
+| Toggle visibility of UI elements | Component props | `hide` / `show` boolean props | `hideSearch: true` |
+| Replace a section of the list item | Component props | `View` render props | `listItemView: (group) => CustomWidget()` |
+| Change colors, fonts, spacing | Component props | `groupsStyle` | `groupsStyle: CometChatGroupsStyle(titleTextColor: Colors.red)` |
+
+
+---
+
+
+
+ Display and manage user contacts
+
+
+ Display recent one-on-one and group conversations
+
+
+ Display and manage members of a group
+
+
+ Learn how to customize the look and feel
+
+
diff --git a/ui-kit/flutter/v5/guide-block-unblock-user.mdx b/ui-kit/flutter/v5/guide-block-unblock-user.mdx
new file mode 100644
index 000000000..ebb1ce265
--- /dev/null
+++ b/ui-kit/flutter/v5/guide-block-unblock-user.mdx
@@ -0,0 +1,189 @@
+---
+title: "Block/Unblock Users"
+sidebarTitle: "Block/Unblock User"
+description: "Implement block and unblock user functionality in CometChat Flutter UI Kit with composer state management."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_chat_uikit` |
+| Key components | `CometchatUserInfo` — uses `CometChatUIKit.blockUsers()` / `CometChatUIKit.unblockUsers()` SDK methods |
+| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login(uid)` |
+| Events | Block/unblock state managed via `user.blockedByMe` property |
+| UI helpers | `CometChatUserInfoController`, confirmation dialogs |
+| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
+| Related | [All Guides](/ui-kit/flutter/v5/guide-overview) |
+
+
+
+Block/Unblock lets users prevent specific users from sending them messages. When blocked, the message composer is hidden and replaced with an unblock prompt.
+
+Before starting, complete the [Getting Started](/ui-kit/flutter/v5/getting-started) guide.
+
+---
+
+## Components
+
+| Component / Class | Role |
+|:---|:---|
+| `CometchatUserInfo` | User profile screen with block/unblock controls |
+| `CometChatUserInfoController` | Controller managing block/unblock state and actions |
+| `CometChatUIKit.blockUsers()` | SDK method to block specific users |
+| `CometChatUIKit.unblockUsers()` | SDK method to unblock previously blocked users |
+| `user.blockedByMe` | Property indicating if current user blocked this user |
+
+---
+
+## Integration Steps
+
+### 1. Navigate to User Info
+
+Open the user info screen from the messages view when tapping the user profile or info icon.
+
+_File: [messages.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/messages/messages.dart)_
+
+```dart
+Navigator.push(
+ context,
+ MaterialPageRoute(
+ builder: (_) => CometchatUserInfo(user: tappedUser),
+ ),
+);
+```
+
+---
+
+### 2. Block User
+
+Call the block user dialog which uses `CometChatUIKit.blockUsers()` with the target UID. On success, update the UI to show the blocked state.
+
+_File: [cometchat_user_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info.dart)_
+
+```dart
+listTileOptions(
+ controller.user?.blockedByMe != true
+ ? Translations.of(context).block
+ : Translations.of(context).unBlock,
+ Icon(Icons.block, color: colorPalette.error),
+ () {
+ if (controller.user?.blockedByMe != true) {
+ controller.blockUserDialog(
+ context: context,
+ colorPalette: colorPalette,
+ typography: typography,
+ );
+ } else {
+ controller.unblockUserDialog(
+ context: context,
+ colorPalette: colorPalette,
+ typography: typography,
+ );
+ }
+ },
+)
+```
+
+---
+
+### 3. Unblock User
+
+Call `CometChatUIKit.unblockUsers()` with the target UID. On success, restore the UI to allow messaging.
+
+_File: [cometchat_user_info_controller.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info_controller.dart)_
+
+```dart
+void unblockUserDialog({
+ required BuildContext context,
+ required CometChatColorPalette colorPalette,
+ required CometChatTypography typography,
+}) {
+ // Show confirmation dialog
+ // On confirm: CometChatUIKit.unblockUsers([user.uid])
+}
+```
+
+---
+
+### 4. Blocked State Banner
+
+Display a warning banner when viewing a blocked user's profile.
+
+_File: [cometchat_user_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info.dart)_
+
+```dart
+if (value.getBlockedByMe())
+ Container(
+ padding: EdgeInsets.symmetric(
+ horizontal: spacing.padding3 ?? 0,
+ vertical: spacing.padding2 ?? 0,
+ ),
+ color: colorPalette.warning?.withValues(alpha: 0.2),
+ child: Row(
+ children: [
+ Icon(Icons.info, color: colorPalette.warning),
+ SizedBox(width: spacing.padding2),
+ Text("${Translations.of(context).youHaveBlocked} ${widget.user.name}."),
+ ],
+ ),
+ ),
+```
+
+---
+
+### 5. Composer Blocked State
+
+When a user is blocked, the composer in thread/message views is replaced with an unblock prompt.
+
+_File: [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart)_
+
+```dart
+if (controller.user?.blockedByMe == true) {
+ return Container(
+ padding: EdgeInsets.symmetric(vertical: 8, horizontal: 20),
+ color: colorPalette.background4,
+ child: Column(
+ children: [
+ Text(Translations.of(context).cantSendMessageBlockedUser),
+ ElevatedButton(
+ onPressed: () => controller.unBlockUser(),
+ child: Text(Translations.of(context).unBlock),
+ ),
+ ],
+ ),
+ );
+}
+```
+
+---
+
+## Feature Matrix
+
+| Feature | Component / Method | File |
+|:---|:---|:---|
+| User info screen | `CometchatUserInfo` | [cometchat_user_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info.dart) |
+| Block user | `blockUserDialog()` | [cometchat_user_info_controller.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info_controller.dart) |
+| Unblock user | `unblockUserDialog()` | [cometchat_user_info_controller.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info_controller.dart) |
+| Check blocked status | `user.blockedByMe` | [cometchat_user_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info.dart) |
+| Blocked banner | Warning container | [cometchat_user_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info.dart) |
+| Blocked composer | `_buildBlockedUserSection()` | [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart) |
+
+---
+
+## Next Steps
+
+
+
+ Display and manage user lists.
+
+
+ Customize the message input component.
+
+
+ Browse all feature and formatter guides.
+
+
+ Full working sample application on GitHub.
+
+
diff --git a/ui-kit/flutter/v5/guide-call-log-details.mdx b/ui-kit/flutter/v5/guide-call-log-details.mdx
new file mode 100644
index 000000000..c0beffae0
--- /dev/null
+++ b/ui-kit/flutter/v5/guide-call-log-details.mdx
@@ -0,0 +1,117 @@
+---
+title: "Call Log Details"
+sidebarTitle: "Call Log Details"
+description: "Display call history and detailed call information in CometChat Flutter UI Kit."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_chat_uikit` |
+| Key components | `CometChatCallLogs`, `CometChatCallLogDetails` |
+| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login(uid)` |
+| Entry point | Calls tab → `CometChatCallLogs` → tap item → `CometChatCallLogDetails` |
+| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
+| Related | [All Guides](/ui-kit/flutter/v5/guide-overview) |
+
+
+
+Call Log Details provides a dedicated Calls tab where users can view recent audio and video calls and inspect detailed information for each call.
+
+Before starting, complete the [Getting Started](/ui-kit/flutter/v5/getting-started) guide.
+
+---
+
+## Components
+
+| Component / Class | Role |
+|:---|:---|
+| `CometChatCallLogs` | Displays the list of recent calls with tap callbacks |
+| `CometChatCallLogDetails` | Shows detailed information (participants, duration, type) |
+| `CallLog` | Call log data model from SDK |
+
+---
+
+## Integration Steps
+
+### 1. Add Calls Tab
+
+Integrate the Calls tab into your main dashboard using `CometChatCallLogs`.
+
+_File: [dashboard.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart)_
+
+```dart
+CometChatCallLogs(
+ onItemClick: (callLog) {
+ Navigator.push(
+ context,
+ MaterialPageRoute(
+ builder: (context) => CometChatCallLogDetails(callLog: callLog),
+ ),
+ );
+ },
+)
+```
+
+---
+
+### 2. Display Call Logs
+
+Use `CometChatCallLogs` to fetch and show recent calls with customizable styling.
+
+_File: [dashboard.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart)_
+
+```dart
+CometChatCallLogs(
+ onItemClick: (callLog) {
+ // Navigate to details screen
+ },
+ callLogsStyle: CometChatCallLogsStyle(
+ backgroundColor: colorPalette.background1,
+ ),
+)
+```
+
+---
+
+### 3. Show Call Log Details
+
+Present detailed information when a call log is tapped.
+
+_File: [cometchat_call_log_details.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/call_log_details/cometchat_call_log_details.dart)_
+
+```dart
+CometChatCallLogDetails(
+ callLog: callLog,
+)
+```
+
+---
+
+## Feature Matrix
+
+| Feature | Component / Method | File |
+|:---|:---|:---|
+| Calls tab | `CometChatCallLogs` | [dashboard.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart) |
+| Display call logs | `CometChatCallLogs` | [dashboard.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart) |
+| Call details | `CometChatCallLogDetails` | [cometchat_call_log_details.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/call_log_details/cometchat_call_log_details.dart) |
+
+---
+
+## Next Steps
+
+
+
+ Learn more about the Call Logs component.
+
+
+ Explore all calling capabilities.
+
+
+ Add call buttons to your chat interface.
+
+
+ Browse all feature and formatter guides.
+
+
diff --git a/ui-kit/flutter/v5/guide-group-chat.mdx b/ui-kit/flutter/v5/guide-group-chat.mdx
new file mode 100644
index 000000000..8066163bb
--- /dev/null
+++ b/ui-kit/flutter/v5/guide-group-chat.mdx
@@ -0,0 +1,182 @@
+---
+title: "Group Management"
+sidebarTitle: "Group Chat"
+description: "Create groups, manage members, assign roles, and transfer ownership in CometChat Flutter UI Kit."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_chat_uikit` |
+| Key components | `CometChatGroups`, `CometChatCreateGroup`, `CometChatGroupInfo`, `CometChatAddMembers`, `CometChatBannedMembers`, `CometChatTransferOwnership` |
+| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login(uid)` |
+| Entry point | Groups tab → create/join group → `CometChatGroupInfo` for management |
+| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
+| Related | [All Guides](/ui-kit/flutter/v5/guide-overview) |
+
+
+
+Group Management enables users to create groups, join public/password groups, manage members, ban users, update roles, and transfer ownership.
+
+Before starting, complete the [Getting Started](/ui-kit/flutter/v5/getting-started) guide.
+
+---
+
+## Components
+
+| Component / Class | Role |
+|:---|:---|
+| `CometChatGroups` | Displays groups and create button |
+| `CometChatCreateGroup` | UI to create new groups |
+| `CometChatGroupInfo` | Shows group info and member management |
+| `CometChatAddMembers` | Add members to a group |
+| `CometChatBannedMembers` | View/unban banned users |
+| `CometChatTransferOwnership` | Transfer group ownership |
+| `CometChatChangeScope` | Change a user's group role |
+| `JoinProtectedGroupUtils` | Utility to join password-protected groups |
+
+---
+
+## Integration Steps
+
+### 1. Create a Group
+
+Show the create group dialog from the dashboard.
+
+_File: [dashboard.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart)_
+
+```dart
+IconButton(
+ onPressed: () {
+ showCreateGroup(
+ context: context,
+ colorPalette: colorPalette,
+ typography: typography,
+ spacing: spacing,
+ );
+ },
+ icon: Icon(Icons.group_add),
+)
+```
+
+_File: [cometchat_create_group.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/create_group/cometchat_create_group.dart)_
+
+```dart
+await CometChat.createGroup(
+ group: Group(
+ guid: groupId,
+ name: groupName,
+ type: groupType,
+ password: groupPassword,
+ ),
+ onSuccess: (Group group) => Navigator.pop(context),
+ onError: (e) {
+ // Show error
+ },
+);
+```
+
+---
+
+### 2. Join Public/Password Group
+
+Handle group tap to join or prompt for password.
+
+_File: [join_protected_group_util.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/utils/join_protected_group_util.dart)_
+
+```dart
+CometChatGroups(
+ onItemTap: (context, group) {
+ JoinProtectedGroupUtils.onGroupItemTap(context, group);
+ },
+)
+```
+
+---
+
+### 3. View Group Info
+
+Display group details and member management options.
+
+_File: [cometchat_group_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/group_info/cometchat_group_info.dart)_
+
+```dart
+CometChatGroupInfo(
+ group: group,
+)
+```
+
+---
+
+### 4. Add Members
+
+Navigate to add members screen.
+
+_File: [cometchat_add_members.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/add_memebers/cometchat_add_members.dart)_
+
+```dart
+CometChatAddMembers(
+ group: group,
+)
+```
+
+---
+
+### 5. Ban/Unban Members
+
+Manage banned members list.
+
+_File: [cometchat_banned_members.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/banned_members/cometchat_banned_members.dart)_
+
+```dart
+CometChatBannedMembers(
+ group: group,
+)
+```
+
+---
+
+### 6. Transfer Ownership
+
+Transfer group ownership to another member.
+
+_File: [cometchat_transfer_ownership.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/transfer_ownership/cometchat_transfer_ownership.dart)_
+
+```dart
+CometChatTransferOwnership(
+ group: group,
+)
+```
+
+---
+
+## Feature Matrix
+
+| Feature | Component / Method | File |
+|:---|:---|:---|
+| Create group | `CometChatCreateGroup` | [cometchat_create_group.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/create_group/cometchat_create_group.dart) |
+| Join group | `JoinProtectedGroupUtils` | [join_protected_group_util.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/utils/join_protected_group_util.dart) |
+| View members | `CometChatGroupInfo` | [cometchat_group_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/group_info/cometchat_group_info.dart) |
+| Add members | `CometChatAddMembers` | [cometchat_add_members.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/add_memebers/cometchat_add_members.dart) |
+| Ban/unban | `CometChatBannedMembers` | [cometchat_banned_members.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/banned_members/cometchat_banned_members.dart) |
+| Transfer ownership | `CometChatTransferOwnership` | [cometchat_transfer_ownership.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/transfer_ownership/cometchat_transfer_ownership.dart) |
+
+---
+
+## Next Steps
+
+
+
+ Learn more about the Groups component.
+
+
+ Display and manage group members.
+
+
+ View group conversations.
+
+
+ Browse all feature and formatter guides.
+
+
diff --git a/ui-kit/flutter/guide-image-caption.mdx b/ui-kit/flutter/v5/guide-image-caption.mdx
similarity index 97%
rename from ui-kit/flutter/guide-image-caption.mdx
rename to ui-kit/flutter/v5/guide-image-caption.mdx
index 5cac7f05d..7e1d8c636 100644
--- a/ui-kit/flutter/guide-image-caption.mdx
+++ b/ui-kit/flutter/v5/guide-image-caption.mdx
@@ -14,7 +14,7 @@ description: "Preview images before sending and display captions below image thu
| Entry point | Attachment tap → image pick → inline preview → send with caption |
| Extension points | `attachmentOptions`, `headerView`, `stateCallBack`, `onSendButtonTap`, `templates` |
| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/master_app) |
-| Related | [Compact Message Composer](/ui-kit/flutter/compact-message-composer) · [Message Template](/ui-kit/flutter/message-template) · [All Guides](/ui-kit/flutter/guide-overview) |
+| Related | [Compact Message Composer](/ui-kit/flutter/v5/compact-message-composer) · [Message Template](/ui-kit/flutter/v5/message-template) · [All Guides](/ui-kit/flutter/v5/guide-overview) |
@@ -25,7 +25,7 @@ This guide adds two capabilities to the default messaging experience:
No UIKit source files are modified. Everything uses the UIKit's public extension points.
-Before starting, complete the [Getting Started](/ui-kit/flutter/getting-started) guide.
+Before starting, complete the [Getting Started](/ui-kit/flutter/v5/getting-started) guide.
---
@@ -502,16 +502,16 @@ CometChatMessageList(
## Next Steps
-
+
Full reference for the compact composer component.
-
+
Customize how message types are rendered.
-
+
Configure the message list component.
-
+
Browse all feature and formatter guides.
diff --git a/ui-kit/flutter/v5/guide-message-agentic-flow.mdx b/ui-kit/flutter/v5/guide-message-agentic-flow.mdx
new file mode 100644
index 000000000..b6ad03950
--- /dev/null
+++ b/ui-kit/flutter/v5/guide-message-agentic-flow.mdx
@@ -0,0 +1,201 @@
+---
+title: "AI Agent Integration"
+sidebarTitle: "AI Agent Integration"
+description: "Integrate AI agents with chat history, contextual responses, and seamless handoffs in CometChat Flutter UI Kit."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_chat_uikit` |
+| Key components | `CometChatAIAssistantChatHistory`, `CometChatMessageList`, `CometChatMessageComposer`, `CometChatMessageHeader` |
+| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login(uid)` |
+| Entry point | AI agent user → `AIAssistantChatScreen` with AI-specific styling |
+| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
+| Related | [All Guides](/ui-kit/flutter/v5/guide-overview) |
+
+
+
+AI Agent Integration enables intelligent conversational AI capabilities with chat history, contextual responses, and seamless handoffs.
+
+
+**1:1 conversations only.** AI Agents currently respond only in one-on-one conversations between an end user and the agent user. They do not respond to messages sent in groups, even if the agent user is added as a member or owner. Group support is on the roadmap — share your use case on [feedback.cometchat.com](https://feedback.cometchat.com).
+
+
+Before starting, complete the [Getting Started](/ui-kit/flutter/v5/getting-started) guide.
+
+---
+
+## Components
+
+| Component / Class | Role |
+|:---|:---|
+| `CometChatMessageHeader` | Manages message interactions with AI-specific buttons |
+| `CometChatMessageList` | Displays messages with AI-specific styling |
+| `CometChatMessageComposer` | Composes messages with AI placeholders |
+| `CometChatAIAssistantChatHistory` | Displays previous AI conversation history |
+| `CometChatAiAssistantBubbleStyle` | Custom styling for AI chat bubbles |
+| `AIConstants.aiRole` | Constant to detect AI agent users |
+
+---
+
+## Integration Steps
+
+### 1. Detect AI Agent
+
+Check if the user is an AI agent by their role.
+
+```dart
+bool isUserAgentic() {
+ return widget.user?.role == AIConstants.aiRole;
+}
+```
+
+---
+
+### 2. AI Chat Screen Setup
+
+Create a screen for AI Assistant chat using standard message components with AI-specific styling.
+
+```dart
+class AIAssistantChatScreen extends StatefulWidget {
+ final User? user;
+ final Group? group;
+ final BaseMessage? parentMessage;
+ final bool? isHistory;
+
+ const AIAssistantChatScreen({
+ Key? key,
+ this.user,
+ this.group,
+ this.parentMessage,
+ this.isHistory,
+ }) : super(key: key);
+
+ @override
+ State createState() => _AIAssistantChatScreenState();
+}
+```
+
+---
+
+### 3. Message Header with AI Actions
+
+Configure the message header with chat history and new chat buttons.
+
+```dart
+CometChatMessageHeader(
+ user: widget.user,
+ group: widget.group,
+ chatHistoryButtonClick: () {
+ Navigator.push(
+ context,
+ MaterialPageRoute(
+ builder: (context) => CometChatAIAssistantChatHistory(
+ user: widget.user,
+ group: widget.group,
+ onNewChatButtonClicked: () => onNewChatClicked(true),
+ onMessageClicked: (message) => navigateToThread(message),
+ onClose: () => Navigator.of(context).pop(),
+ ),
+ ),
+ );
+ },
+ newChatButtonClick: () => onNewChatClicked(false),
+)
+```
+
+---
+
+### 4. AI Message List
+
+Configure the message list with AI-specific styling and options.
+
+```dart
+CometChatMessageList(
+ user: user,
+ group: group,
+ hideReplyInThreadOption: isUserAgentic() ? true : false,
+ hideThreadView: true,
+ messagesRequestBuilder: requestBuilder,
+ style: CometChatMessageListStyle(
+ backgroundColor: isUserAgentic() ? colorPalette.background3 : null,
+ outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
+ textBubbleStyle: CometChatTextBubbleStyle(
+ backgroundColor: isUserAgentic() ? colorPalette.background4 : null,
+ textColor: isUserAgentic() ? colorPalette.textPrimary : null,
+ ),
+ ),
+ ),
+)
+```
+
+---
+
+### 5. AI Composer
+
+Configure the composer with AI-specific placeholder text.
+
+```dart
+CometChatMessageComposer(
+ user: widget.user,
+ group: widget.group,
+ disableMentions: isUserAgentic() ? true : false,
+ placeholderText: isUserAgentic()
+ ? "${Translations.of(context).askAnything}..."
+ : null,
+ parentMessageId: widget.parentMessage?.id ?? 0,
+)
+```
+
+---
+
+### 6. Custom AI Bubble Styling
+
+Apply custom styles for AI chat bubbles using ThemeExtension.
+
+```dart
+MaterialApp(
+ theme: ThemeData(
+ extensions: [
+ CometChatAiAssistantBubbleStyle(
+ backgroundColor: Colors.transparent,
+ border: Border.all(color: Colors.blueAccent, width: 1),
+ textColor: const Color(0xFF141414),
+ ),
+ ],
+ ),
+)
+```
+
+---
+
+## Feature Matrix
+
+| Feature | Component / Method | Description |
+|:---|:---|:---|
+| AI detection | `AIConstants.aiRole` | Check if user is AI agent |
+| AI chat screen | `AIAssistantChatScreen` | Full AI chat interface |
+| Chat history | `CometChatAIAssistantChatHistory` | Browse previous AI sessions |
+| AI styling | `CometChatAiAssistantBubbleStyle` | Custom AI bubble appearance |
+| New chat | `onNewChatClicked()` | Start fresh AI conversation |
+
+---
+
+## Next Steps
+
+
+
+ Explore all AI-powered features.
+
+
+ Learn about AI chat history component.
+
+
+ Learn about message display and management.
+
+
+ Browse all feature and formatter guides.
+
+
diff --git a/ui-kit/flutter/v5/guide-message-privately.mdx b/ui-kit/flutter/v5/guide-message-privately.mdx
new file mode 100644
index 000000000..df3d8c8dc
--- /dev/null
+++ b/ui-kit/flutter/v5/guide-message-privately.mdx
@@ -0,0 +1,151 @@
+---
+title: "Message Privately"
+sidebarTitle: "Message Privately"
+description: "Initiate private one-on-one chats with group members directly from group chat in CometChat Flutter UI Kit."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_chat_uikit` |
+| Key components | `CometchatUserInfo`, `CometChatMessageList`, `PageManager` |
+| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login(uid)` |
+| Entry point | Group member tap → `CometchatUserInfo` → "Message" action |
+| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
+| Related | [All Guides](/ui-kit/flutter/v5/guide-overview) |
+
+
+
+Message Privately lets users start a direct one-on-one chat with a group member.
+
+Before starting, complete the [Getting Started](/ui-kit/flutter/v5/getting-started) guide.
+
+---
+
+## Components
+
+| Component / Class | Role |
+|:---|:---|
+| `CometChatMessageList` | Displays group messages and user avatars |
+| `CometchatUserInfo` | Shows user details and actions (e.g., call, message) |
+| `CometChatUserInfoController` | Manages user info state and actions |
+| `PageManager` | Handles navigation to the private chat screen |
+
+---
+
+## Integration Steps
+
+### 1. Navigate to User Info
+
+Open the user info screen when tapping on a group member's profile or info icon.
+
+_File: [cometchat_group_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/group_info/cometchat_group_info.dart)_
+
+```dart
+Navigator.push(
+ context,
+ MaterialPageRoute(
+ builder: (context) => CometchatUserInfo(user: selectedUser),
+ ),
+);
+```
+
+---
+
+### 2. Display User Profile with Actions
+
+The `CometchatUserInfo` widget displays the user's profile with action tiles for voice call, video call, and messaging.
+
+_File: [cometchat_user_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info.dart)_
+
+```dart
+Widget _getOptionTiles(CometChatUserInfoController controller) {
+ return Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ tile(
+ Icon(Icons.call_outlined, color: colorPalette.iconHighlight),
+ Translations.of(context).voice,
+ () => controller.initiateCallWorkflow(CallTypeConstants.audioCall, context),
+ ),
+ tile(
+ Icon(Icons.videocam_outlined, color: colorPalette.iconHighlight),
+ Translations.of(context).video,
+ () => controller.initiateCallWorkflow(CallTypeConstants.videoCall, context),
+ ),
+ ],
+ );
+}
+```
+
+---
+
+### 3. Start Private Chat
+
+Navigate to the private chat screen using `PageManager` when the user wants to message privately.
+
+_File: [page_manager.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/utils/page_manager.dart)_
+
+```dart
+PageManager().navigateToMessages(
+ context: context,
+ user: user,
+);
+```
+
+---
+
+### 4. Handle Mentions Navigation
+
+When a user taps on a mention in a message, navigate to that user's profile or start a private chat.
+
+_File: [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart)_
+
+```dart
+CometChatMentionsFormatter getMentionsTap() {
+ return CometChatMentionsFormatter(
+ user: widget.user,
+ group: widget.group,
+ onMentionTap: (mention, mentionedUser, {message}) {
+ if (mentionedUser.uid != CometChatUIKit.loggedInUser!.uid) {
+ PageManager().navigateToMessages(
+ context: context,
+ user: mentionedUser,
+ );
+ }
+ },
+ );
+}
+```
+
+---
+
+## Feature Matrix
+
+| Feature | Component / Method | File |
+|:---|:---|:---|
+| User info screen | `CometchatUserInfo` | [cometchat_user_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info.dart) |
+| Voice/video call | `initiateCallWorkflow()` | [cometchat_user_info_controller.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info_controller.dart) |
+| Navigate to chat | `PageManager.navigateToMessages` | [page_manager.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/utils/page_manager.dart) |
+| Mention tap | `CometChatMentionsFormatter` | [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart) |
+| Access from group | Group member list | [cometchat_group_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/group_info/cometchat_group_info.dart) |
+
+---
+
+## Next Steps
+
+
+
+ Display and manage group lists.
+
+
+ View and manage group members.
+
+
+ Display messages in private chats.
+
+
+ Browse all feature and formatter guides.
+
+
diff --git a/ui-kit/flutter/v5/guide-new-chat.mdx b/ui-kit/flutter/v5/guide-new-chat.mdx
new file mode 100644
index 000000000..c65b30091
--- /dev/null
+++ b/ui-kit/flutter/v5/guide-new-chat.mdx
@@ -0,0 +1,155 @@
+---
+title: "New Chat"
+sidebarTitle: "New Chat"
+description: "Enable users to start one-on-one or group chats with a searchable contact list in CometChat Flutter UI Kit."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_chat_uikit` |
+| Key components | `CometChatContacts`, `CometChatUsers`, `CometChatGroups`, `CometChatAvatar` |
+| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login(uid)` |
+| Entry point | Avatar menu → "Create Conversation" → `CometChatContacts` |
+| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
+| Related | [All Guides](/ui-kit/flutter/v5/guide-overview) |
+
+
+
+New Chat enables users to start one-on-one or group conversations by selecting from a searchable contact list.
+
+Before starting, complete the [Getting Started](/ui-kit/flutter/v5/getting-started) guide.
+
+---
+
+## Components
+
+| Component / Class | Role |
+|:---|:---|
+| `CometChatAvatar` | Displays the user avatar in the app bar |
+| `PopupMenuButton` | Shows menu options when the avatar is tapped |
+| `CometChatContacts` | UI for the "Start Conversation" screen with tabs |
+| `CometChatContactsController` | Manages tab switching and item selection |
+| `CometChatUsers` | Lists users with search and selection |
+| `CometChatGroups` | Lists groups with search and selection |
+| `PageManager` | Handles navigation to the chat screen |
+
+---
+
+## Integration Steps
+
+### 1. Add Avatar Menu
+
+Show the avatar in the app bar and open a menu on tap with "Create Conversation" option.
+
+_File: [dashboard.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart)_
+
+```dart
+PopupMenuButton(
+ icon: CometChatAvatar(
+ width: 40,
+ height: 40,
+ image: CometChatUIKit.loggedInUser?.avatar,
+ name: CometChatUIKit.loggedInUser?.name,
+ ),
+ itemBuilder: (context) => [
+ PopupMenuItem(value: '/Create', child: Text("Create Conversation")),
+ ],
+ onSelected: (value) {
+ if (value == '/Create') {
+ Navigator.push(
+ context,
+ MaterialPageRoute(builder: (context) => CometChatContacts()),
+ );
+ }
+ },
+);
+```
+
+---
+
+### 2. Open Contacts Screen
+
+Navigate to the `CometChatContacts` screen which provides tabs for Users and Groups.
+
+_File: [dashboard.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart)_
+
+```dart
+void openCreateConversation(BuildContext context) {
+ Navigator.push(
+ context,
+ MaterialPageRoute(builder: (context) => CometChatContacts()),
+ );
+}
+```
+
+---
+
+### 3. Handle User/Group Selection
+
+Wire up the `onItemTap` callback to navigate to the chat screen when a user or group is selected.
+
+_File: [cometchat_contacts_controller.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/contacts/cometchat_contacts_controller.dart)_
+
+```dart
+CometChatUsers(
+ hideAppbar: true,
+ onItemTap: (context, user) => _onItemTap(context: context, user: user),
+);
+
+CometChatGroups(
+ hideAppbar: true,
+ onItemTap: (context, group) => _onItemTap(context: context, group: group),
+);
+```
+
+---
+
+### 4. Navigate to Chat
+
+Open the chat screen for the selected user or group using `PageManager`.
+
+_File: [page_manager.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/utils/page_manager.dart)_
+
+```dart
+void _onItemTap({required BuildContext context, User? user, Group? group}) {
+ if (user != null) {
+ PageManager.navigateToMessages(context: context, user: user);
+ } else if (group != null) {
+ JoinProtectedGroupUtils.onGroupItemTap(context, group);
+ }
+}
+```
+
+---
+
+## Feature Matrix
+
+| Feature | Component / Method | File |
+|:---|:---|:---|
+| Avatar menu | `PopupMenuButton`, `CometChatAvatar` | [dashboard.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart) |
+| Contacts screen | `CometChatContacts` | [dashboard.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart) |
+| List users | `CometChatUsers` | [cometchat_contacts_controller.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/contacts/cometchat_contacts_controller.dart) |
+| List groups | `CometChatGroups` | [cometchat_contacts_controller.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/contacts/cometchat_contacts_controller.dart) |
+| Handle selection | `_onItemTap` | [page_manager.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/utils/page_manager.dart) |
+| Navigate to chat | `PageManager.navigateToMessages` | [page_manager.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/utils/page_manager.dart) |
+
+---
+
+## Next Steps
+
+
+
+ Display and search user lists.
+
+
+ Display and manage group lists.
+
+
+ View and manage conversation history.
+
+
+ Browse all feature and formatter guides.
+
+
diff --git a/ui-kit/flutter/v5/guide-overview.mdx b/ui-kit/flutter/v5/guide-overview.mdx
new file mode 100644
index 000000000..3c4949eef
--- /dev/null
+++ b/ui-kit/flutter/v5/guide-overview.mdx
@@ -0,0 +1,67 @@
+---
+title: "Guides Overview"
+sidebarTitle: "Overview"
+description: "Task-oriented feature guides for implementing specific capabilities in the Flutter UI Kit"
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_chat_uikit` |
+| Purpose | Index of task-oriented feature guides for the Flutter UI Kit |
+| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
+| Components | [Components Overview](/ui-kit/flutter/v5/components-overview) |
+| Guides | [Block/Unblock](/ui-kit/flutter/v5/guide-block-unblock-user) · [Call Log Details](/ui-kit/flutter/v5/guide-call-log-details) · [Group Chat](/ui-kit/flutter/v5/guide-group-chat) · [Image Preview & Caption](/ui-kit/flutter/v5/guide-image-caption) · [Message Privately](/ui-kit/flutter/v5/guide-message-privately) · [New Chat](/ui-kit/flutter/v5/guide-new-chat) · [Search Messages](/ui-kit/flutter/v5/guide-search-messages) · [Threaded Messages](/ui-kit/flutter/v5/guide-threaded-messages) · [AI Agent](/ui-kit/flutter/v5/guide-message-agentic-flow) |
+
+
+
+This page indexes focused, task‑oriented feature guides for the Flutter UI Kit. Each guide shows how to implement a specific capability end‑to‑end using UI kit components.
+
+## When to Use These Guides
+
+Use these after finishing [Getting Started](/ui-kit/flutter/v5/getting-started) and wiring a basic conversations/messages experience. Add them incrementally to deepen functionality without rebuilding fundamentals.
+
+## Feature Guides
+
+| Guide | Description |
+|:------|:------------|
+| [Block / Unblock User](/ui-kit/flutter/v5/guide-block-unblock-user) | Let users block or unblock others; enforce privacy by hiding interaction options and preventing message flow. |
+| [Call Log Details](/ui-kit/flutter/v5/guide-call-log-details) | Provide a post‑call details screen with metadata, participants, history, and recordings for audit & support. |
+| [Group Management](/ui-kit/flutter/v5/guide-group-chat) | Create/join groups, view members, add / remove users, manage roles, and moderate participation. |
+| [Message Privately](/ui-kit/flutter/v5/guide-message-privately) | Start a direct 1:1 chat from a profile or list; optionally send an initial message to surface the conversation. |
+| [New Chat](/ui-kit/flutter/v5/guide-new-chat) | Offer a unified discovery screen for users & groups and launch new chats quickly. |
+| [Search Messages](/ui-kit/flutter/v5/guide-search-messages) | Full-text message search across conversations with result routing and navigation. |
+| [Threaded Messages](/ui-kit/flutter/v5/guide-threaded-messages) | Enable threaded replies: open parent message context, browse replies, and compose within a focused thread. |
+| [AI Agent Integration](/ui-kit/flutter/v5/guide-message-agentic-flow) | Integrate AI agents with chat history, contextual responses, and seamless handoffs. |
+| [Image Preview & Caption](/ui-kit/flutter/v5/guide-image-caption) | Preview images before sending and display captions below image thumbnails in message bubbles. |
+
+## Formatter Guides
+
+| Guide | Description |
+|:------|:------------|
+| [Custom Text Formatter](/ui-kit/flutter/v5/custom-text-formatter-guide) | Build custom inline text patterns with regex, styling, and callbacks. |
+| [Mentions Formatter](/ui-kit/flutter/v5/mentions-formatter-guide) | Add @mentions with user suggestions and styled tokens. |
+| [URL Formatter](/ui-kit/flutter/v5/url-formatter-guide) | Auto-detect and style URLs as clickable links. |
+| [Shortcut Formatter](/ui-kit/flutter/v5/shortcut-formatter-guide) | Create keyboard shortcuts for quick text insertion. |
+
+Need another guide? Request one via [CometChat Support](https://www.cometchat.com/support).
+
+---
+
+## Next Steps
+
+
+
+ Set up the Flutter UI Kit in your project
+
+
+ Explore all available UI components
+
+
+ Learn about core chat features
+
+
+ View complete working examples
+
+
diff --git a/ui-kit/flutter/guide-search-messages.mdx b/ui-kit/flutter/v5/guide-search-messages.mdx
similarity index 95%
rename from ui-kit/flutter/guide-search-messages.mdx
rename to ui-kit/flutter/v5/guide-search-messages.mdx
index bdf9382aa..325d24c29 100644
--- a/ui-kit/flutter/guide-search-messages.mdx
+++ b/ui-kit/flutter/v5/guide-search-messages.mdx
@@ -13,13 +13,13 @@ description: "Add full-text message search across conversations with result rout
| Init | `CometChatUIKit.init(uiKitSettings: uiKitSettings)` then `CometChatUIKit.login("UID")` |
| Purpose | Full-text message search across conversations with result routing and navigation |
| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
-| Related | [All Guides](/ui-kit/flutter/guide-overview) |
+| Related | [All Guides](/ui-kit/flutter/v5/guide-overview) |
Search Messages lets users locate specific messages across conversations and groups using keyword search, then navigate directly to the result.
-Before starting, complete the [Getting Started](/ui-kit/flutter/getting-started) guide.
+Before starting, complete the [Getting Started](/ui-kit/flutter/v5/getting-started) guide.
---
@@ -207,13 +207,13 @@ class SearchScreen extends StatelessWidget {
## Next Steps
-
+
Full search component reference.
-
+
Render real-time message threads.
-
+
Browse all feature and formatter guides.
diff --git a/ui-kit/flutter/v5/guide-threaded-messages.mdx b/ui-kit/flutter/v5/guide-threaded-messages.mdx
new file mode 100644
index 000000000..bc7cbb410
--- /dev/null
+++ b/ui-kit/flutter/v5/guide-threaded-messages.mdx
@@ -0,0 +1,194 @@
+---
+title: "Threaded Messages"
+sidebarTitle: "Threaded Messages"
+description: "Implement threaded message replies with parent context, reply list, and focused thread composer in CometChat Flutter UI Kit."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_chat_uikit` |
+| Key components | `CometChatThread`, `CometChatThreadedHeader`, `CometChatMessageList`, `CometChatMessageComposer` |
+| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login(uid)` |
+| Entry point | `CometChatMessageList.onThreadRepliesClick` opens thread view from messages |
+| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
+| Related | [All Guides](/ui-kit/flutter/v5/guide-overview) |
+
+
+
+Threaded messages let users create sub-conversations by replying to specific messages. This reduces clutter and keeps discussions focused.
+
+Before starting, complete the [Getting Started](/ui-kit/flutter/v5/getting-started) guide.
+
+---
+
+## Components
+
+| Component / Class | Role |
+|:---|:---|
+| `CometChatThread` | Main container widget for threaded messages |
+| `CometChatThreadedHeader` | Displays parent message and thread context |
+| `CometChatMessageList` | Shows messages filtered by `parentMessageId` |
+| `CometChatMessageComposer` | Input for composing threaded replies |
+| `MessagesRequestBuilder` | Builds request to fetch thread replies |
+
+---
+
+## Integration Steps
+
+### 1. Thread Trigger in Messages
+
+Wire the `onThreadRepliesClick` callback on `CometChatMessageList`. When a user clicks the thread reply icon on any message, this fires with the parent message object.
+
+_File: [messages.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/messages/messages.dart)_
+
+```dart
+CometChatMessageList(
+ onThreadRepliesClick: (BaseMessage message) {
+ Navigator.push(
+ context,
+ MaterialPageRoute(
+ builder: (_) => CometChatThread(
+ message: message,
+ user: user,
+ group: group,
+ ),
+ ),
+ );
+ },
+);
+```
+
+---
+
+### 2. Thread Screen Widget
+
+Create the thread screen with header, message list, and composer. The `CometChatThread` widget handles the complete thread UI.
+
+_File: [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart)_
+
+```dart
+class CometChatThread extends StatefulWidget {
+ const CometChatThread({
+ this.user,
+ this.group,
+ required this.message,
+ super.key,
+ });
+
+ final User? user;
+ final Group? group;
+ final BaseMessage message;
+
+ @override
+ State createState() => _CometChatThreadState();
+}
+```
+
+---
+
+### 3. Thread Header and Message List
+
+Display the parent message context and threaded replies using `CometChatThreadedHeader` and `CometChatMessageList` with `parentMessageId`.
+
+_File: [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart)_
+
+```dart
+Column(
+ children: [
+ CometChatThreadedHeader(
+ parentMessage: widget.message,
+ loggedInUser: CometChatUIKit.loggedInUser!,
+ ),
+ Expanded(
+ child: CometChatMessageList(
+ user: widget.user,
+ group: widget.group,
+ messagesRequestBuilder: MessagesRequestBuilder()
+ ..parentMessageId = widget.message.id,
+ ),
+ ),
+ ],
+)
+```
+
+---
+
+### 4. Thread Composer
+
+Add the message composer with `parentMessageId` to send replies in the thread context.
+
+_File: [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart)_
+
+```dart
+CometChatMessageComposer(
+ user: widget.user,
+ group: widget.group,
+ parentMessageId: widget.message.id,
+)
+```
+
+---
+
+### 5. Blocked User Handling
+
+When a user is blocked, replace the composer with an unblock prompt.
+
+_File: [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart)_
+
+```dart
+Widget getComposer(CometChatThreadController controller) {
+ if (controller.user?.blockedByMe == true) {
+ return Container(
+ padding: EdgeInsets.symmetric(vertical: 8, horizontal: 20),
+ child: Column(
+ children: [
+ Text(Translations.of(context).cantSendMessageBlockedUser),
+ ElevatedButton(
+ onPressed: () => controller.unBlockUser(),
+ child: Text(Translations.of(context).unBlock),
+ ),
+ ],
+ ),
+ );
+ }
+ return CometChatMessageComposer(
+ user: widget.user,
+ group: widget.group,
+ parentMessageId: widget.message.id,
+ );
+}
+```
+
+---
+
+## Feature Matrix
+
+| Feature | Component / Method | File |
+|:---|:---|:---|
+| Show thread option | `onThreadRepliesClick` | [messages.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/messages/messages.dart) |
+| Thread screen | `CometChatThread` | [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart) |
+| Thread header | `CometChatThreadedHeader` | [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart) |
+| Display thread msgs | `CometChatMessageList` | [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart) |
+| Compose reply | `CometChatMessageComposer` | [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart) |
+| Thread controller | `CometChatThreadController` | [cometchat_thread_controller.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread_controller.dart) |
+
+---
+
+## Next Steps
+
+
+
+ Render real-time message threads.
+
+
+ Customize the thread header component.
+
+
+ Browse all feature and formatter guides.
+
+
+ Full working sample application on GitHub.
+
+
diff --git a/ui-kit/flutter/v5/incoming-call.mdx b/ui-kit/flutter/v5/incoming-call.mdx
new file mode 100644
index 000000000..1cd873a63
--- /dev/null
+++ b/ui-kit/flutter/v5/incoming-call.mdx
@@ -0,0 +1,428 @@
+---
+title: "Incoming Call"
+description: "Widget that serves as a visual representation when the user receives an incoming call, providing options to answer or decline."
+---
+
+```json
+{
+ "component": "CometChatIncomingCall",
+ "package": "cometchat_calls_uikit",
+ "import": "import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';",
+ "description": "Widget that serves as a visual representation when the user receives an incoming call, providing options to answer or decline.",
+ "props": {
+ "data": {
+ "call": { "type": "Call", "required": true },
+ "user": { "type": "User?", "default": "null" }
+ },
+ "callbacks": {
+ "onDecline": "Function(BuildContext, Call)?",
+ "onAccept": "Function(BuildContext, Call)?",
+ "onError": "OnError?"
+ },
+ "viewSlots": {
+ "titleView": "Widget? Function(BuildContext context, Call call)?",
+ "subTitleView": "Widget? Function(BuildContext context, Call call)?",
+ "leadingView": "Widget? Function(BuildContext context, Call call)?",
+ "itemView": "Widget? Function(BuildContext context, Call call)?",
+ "trailingView": "Widget? Function(BuildContext context, Call call)?"
+ },
+ "style": {
+ "incomingCallStyle": "CometChatIncomingCallStyle?"
+ },
+ "layout": {
+ "height": { "type": "double?", "default": "null" },
+ "width": { "type": "double?", "default": "null" }
+ },
+ "icons": {
+ "callIcon": "Widget?"
+ },
+ "text": {
+ "declineButtonText": "String?",
+ "acceptButtonText": "String?"
+ },
+ "sound": {
+ "disableSoundForCalls": { "type": "bool?", "default": "false" },
+ "customSoundForCalls": "String?",
+ "customSoundForCallsPackage": "String?"
+ },
+ "configuration": {
+ "callSettingsBuilder": "CallSettingsBuilder?"
+ }
+ }
+}
+```
+
+
+## Overview
+
+The `CometChatIncomingCall` is a [Widget](/ui-kit/flutter/v5/components-overview#components) that serves as a visual representation when the user receives an incoming call, such as a voice call or video call, providing options to answer or decline the call.
+
+
+
+
+
+***
+
+## Usage
+
+### Integration
+
+`CometChatIncomingCall` being a custom widget, offers versatility in its integration. It can be seamlessly launched via button clicks or any user-triggered action, enhancing the overall user experience and facilitating smoother interactions within the application.
+
+You can launch `CometChatIncomingCall` directly using `Navigator.push`, or you can define it as a widget within the `build` method of your `State` class.
+
+##### 1. Using Navigator to Launch `CometChatIncomingCall`
+
+
+
+```dart
+Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatIncomingCall(user: user, call: callObject))); // User object and Call object is required to launch the incoming call widget.
+```
+
+
+
+
+
+##### 2. Embedding `CometChatIncomingCall` as a Widget in the build Method
+
+
+
+```dart
+import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';
+import 'package:flutter/material.dart';
+
+class IncomingCallExample extends StatefulWidget {
+ const IncomingCallExample({super.key});
+
+ @override
+ State createState() => _IncomingCallExampleState();
+}
+
+class _IncomingCallExampleState extends State {
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: SafeArea(
+ child: CometChatIncomingCall(
+ user: user, // User Object
+ call: callObject
+ ), // User object and Call object is required to launch the incoming call widget.
+ ),
+ );
+ }
+}
+```
+
+
+
+
+
+***
+
+### Actions
+
+[Actions](/ui-kit/flutter/v5/components-overview#actions) dictate how a widget functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the widget to fit your specific needs.
+
+##### 1. onAccept
+
+The `onAccept` action is typically triggered when the user clicks on the accept button, initiating a predefined action. However, by implementing the following code snippet, you can easily customize or override this default behavior to suit your specific requirements.
+
+
+
+```dart
+CometChatIncomingCall(
+ user: user, // User Object
+ call: callObject, // Call Object
+ onAccept: (BuildContext context, Call call) {
+ // TODO("Not yet implemented")
+ },
+)
+```
+
+
+
+
+
+***
+
+##### 2. onDecline
+
+The `onDecline` action is typically triggered when the user clicks on the reject button, initiating a predefined action. However, by implementing the following code snippet, you can easily customize or override this default behavior to suit your specific requirements.
+
+
+
+```dart
+CometChatIncomingCall(
+ user: user, // User Object
+ call: callObject, // Call Object
+ onDecline: (BuildContext context, Call call) {
+ // TODO("Not yet implemented")
+ },
+)
+```
+
+
+
+
+
+***
+
+##### 3. onError
+
+You can customize this behavior by using the provided code snippet to override the `onError` and improve error handling.
+
+
+
+```dart
+CometChatIncomingCall(
+ user: user, // User Object
+ call: callObject, // Call Object
+ onError: (e) {
+ // TODO("Not yet implemented")
+ },
+)
+```
+
+
+
+
+
+***
+
+### Filters
+
+**Filters** allow you to customize the data displayed in a list within a Widget. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK.
+
+The `CometChatIncomingCall` widget does not have any exposed filters.
+
+***
+
+### Events
+
+[Events](/ui-kit/flutter/v5/components-overview#events) are emitted by a `Widget`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.
+
+The `CometChatIncomingCall` widget does not have any exposed events.
+
+***
+
+## Customization
+
+To fit your app's design requirements, you can customize the appearance of the conversation widget. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.
+
+### Style
+
+You can customize the appearance of the `CometChatIncomingCall` Widget by applying the `CometChatIncomingCallStyle` to it using the following code snippet.
+
+Here is the complete example for reference:
+
+
+
+```dart
+CometChatIncomingCall(
+ user: user, // User Object
+ call: callObject, // Call Object
+ incomingCallStyle: CometChatIncomingCallStyle(
+ backgroundColor: Color(0xFFEDEAFA),
+ avatarStyle: CometChatAvatarStyle(
+ backgroundColor: Color(0xFFAA9EE8),
+ borderRadius: BorderRadius.circular(7.5),
+ ),
+ acceptButtonColor: Color(0xFF6852D6),
+ declineButtonColor: Colors.white,
+ declineTextColor: Color(0xFFF44649),
+ callIconColor: Color(0xFF6852D6),
+ ),
+)
+```
+
+
+
+
+
+
+
+
+
+***
+
+### Functionality
+
+These are a set of small functional customizations that allow you to fine-tune the overall experience of the widget. With these, you can change text, set custom icons, and toggle the visibility of UI elements.
+
+**Example**
+
+In this example, we're enhancing the interface by customizing the accept and decline button icons. By setting custom icons for both the accept and decline buttons, users can enjoy a more visually appealing and personalized experience.
+
+This level of customization allows developers to tailor the user interface to match the overall theme and branding of their application.
+
+Here is the complete example for reference:
+
+
+
+```dart
+CometChatIncomingCall(
+ user: user, // User Object
+ call: callObject, // Call Object
+ disableSoundForCalls: true,
+ declineButtonText: "Decline",
+ acceptButtonText: "Accept"
+)
+```
+
+
+
+
+
+
+
+
+
+Below is a list of customizations along with corresponding code snippets
+
+| **Property** | Description | Code |
+| ----------------------------------- | ------------------------------------------------- | -------------------------------------- |
+| **Accept Button Text** | Sets the text for the accept button. | `acceptButtonText: String?` |
+| **Custom Sound For Calls** | Sets the custom sound for incoming calls. | `customSoundForCalls: String?` |
+| **Call Icon** | Sets the Call Icon. | `callIcon: Widget?` |
+| **Decline Button Icon Url Package** | Sets the package for the decline button icon URL. | `declineButtonIconUrlPackage: String?` |
+| **Decline Button Text** | Sets the text for the decline button. | `declineButtonText: String?` |
+| **Disable Sound For Calls** | Disables sound for incoming calls. | `disableSoundForCalls: bool?` |
+
+***
+
+### Advanced
+
+For advanced-level customization, you can set custom widget to the widget. This lets you tailor each aspect of the widget to fit your exact needs and application aesthetics. You can create and define your widget, layouts, and UI elements and then incorporate those into the widget.
+
+***
+
+### itemView
+
+Allows setting a custom item view to be rendered.
+
+Use Cases:
+
+* Customize the call card UI for incoming calls.
+* Display additional user details (e.g., caller ID, location).
+* Integrate custom animations for call alerts.
+
+
+
+```dart
+CometChatIncomingCall(
+ itemView: (context, call) {
+ // return itemView
+ },
+)
+```
+
+
+
+
+
+***
+
+### leadingView
+
+Customizes the leading section of the component, usually the caller’s avatar or profile picture.
+
+Use Cases:
+
+* Display a profile picture with call status effects.
+* Show a custom ringing animation around the avatar.
+* Replace the avatar with a caller ID card.
+
+
+
+```dart
+CometChatIncomingCall(
+ leadingView: (context, call) {
+ // return leadingView
+ },
+)
+```
+
+
+
+
+
+***
+
+### titleView
+
+Allows setting a custom title view, typically used for the caller’s name or call type.
+
+Use Cases:
+
+* Display the caller’s full name with a verified badge.
+* Indicate the call type (Voice Call, Video Call).
+* Show real-time status ("Ringing...", "Call from Work Contact", etc.).
+
+
+
+```dart
+CometChatIncomingCall(
+ titleView: (context, call) {
+ // return titleView
+ },
+)
+```
+
+
+
+
+
+***
+
+### subtitleView
+
+Enables customizing the subtitle view, typically used for additional call details.
+
+Use Cases:
+
+* Display call duration if available.
+* Show network strength indicators.
+* Include a custom message like "Connecting...".
+
+
+
+```dart
+CometChatIncomingCall(
+ subTitleView: (context, call) {
+ // return subTitleView
+ },
+)
+```
+
+
+
+
+
+***
+
+### trailingView
+
+Customizes the trailing section for actions or additional call-related UI elements.
+
+Use Cases:
+
+* Add custom accept/reject buttons.
+* Show a mute button before answering.
+* Display a text response option (e.g., "Can’t talk now").
+
+
+
+```dart
+CometChatIncomingCall(
+ titleView: (context, call) {
+ // return titleView
+ },
+)
+```
+
+
+
+
+
+***
diff --git a/ui-kit/flutter/v5/localize.mdx b/ui-kit/flutter/v5/localize.mdx
new file mode 100644
index 000000000..54cb44c11
--- /dev/null
+++ b/ui-kit/flutter/v5/localize.mdx
@@ -0,0 +1,184 @@
+---
+title: "Localization"
+sidebarTitle: "Localize"
+description: "Configure multi-language localization and custom translations in CometChat Flutter UI Kit."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_uikit_shared` |
+| Import | `import 'package:cometchat_uikit_shared/l10n/translations.dart';` |
+| Set language | Add `Locale('fr')` to `supportedLocales` |
+| Delegates | `Translations.delegate`, `GlobalMaterialLocalizations.delegate`, etc. |
+| Supported | 18 languages: ar, de, en, en-GB, es, fr, hi, hu, ja, ko, lt, ms, nl, pt, ru, sv, tr, zh |
+| Source | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/shared_uikit/lib/l10n) |
+
+
+
+`Translations` manages multi-language localization for the UI Kit.
+
+---
+
+## Supported Languages
+
+| Language | Code |
+| --- | --- |
+| Arabic | `ar` |
+| German | `de` |
+| English | `en` |
+| English (UK) | `en-GB` |
+| Spanish | `es` |
+| French | `fr` |
+| Hindi | `hi` |
+| Hungarian | `hu` |
+| Japanese | `ja` |
+| Korean | `ko` |
+| Lithuanian | `lt` |
+| Malay | `ms` |
+| Dutch | `nl` |
+| Portuguese | `pt` |
+| Russian | `ru` |
+| Swedish | `sv` |
+| Turkish | `tr` |
+| Chinese | `zh` |
+
+---
+
+## Setup
+
+Add the dependency in `pubspec.yaml`:
+
+```yaml
+flutter_localizations:
+ sdk: flutter
+```
+
+Configure `MaterialApp`:
+
+```dart
+import 'package:cometchat_uikit_shared/l10n/translations.dart';
+import 'package:flutter_localizations/flutter_localizations.dart';
+
+MaterialApp(
+ supportedLocales: const [
+ Locale('en'),
+ Locale('fr'),
+ Locale('es'),
+ Locale('de'),
+ // Add more as needed
+ ],
+ localizationsDelegates: Translations.localizationsDelegates,
+ home: MyApp(),
+)
+```
+
+---
+
+## Get Translated Strings
+
+```dart
+String translatedString = Translations.of(context).users;
+Text(translatedString);
+```
+
+---
+
+## Custom Translations
+
+Override default translations by extending the language class:
+
+```dart
+import 'package:cometchat_uikit_shared/l10n/translations.dart';
+import 'package:flutter/foundation.dart';
+
+class CustomEN extends TranslationsEn {
+ static const delegate = _CustomLocalizationsDelegate();
+
+ @override
+ String get chats => "My Chats";
+
+ @override
+ String get calls => "My Calls";
+}
+
+class _CustomLocalizationsDelegate extends LocalizationsDelegate {
+ const _CustomLocalizationsDelegate();
+
+ @override
+ bool isSupported(Locale locale) => locale.languageCode == 'en';
+
+ @override
+ Future load(Locale locale) => SynchronousFuture(CustomEN());
+
+ @override
+ bool shouldReload(_CustomLocalizationsDelegate old) => false;
+}
+```
+
+Then add to `MaterialApp`:
+
+```dart
+localizationsDelegates: const [
+ CustomEN.delegate, // Custom override first
+ ...Translations.localizationsDelegates,
+],
+```
+
+---
+
+## Add New Language
+
+Create a custom translation class for unsupported languages:
+
+```dart
+import 'package:cometchat_uikit_shared/l10n/translations.dart';
+import 'package:flutter/foundation.dart';
+
+class TeluguTranslations extends Translations {
+ TeluguTranslations([super.locale = "te"]);
+ static const delegate = _TeluguDelegate();
+
+ @override
+ String get chats => "సందేశాలు";
+
+ @override
+ String get calls => "ఫోన్ కాల్స్";
+
+ // Override all required getters from Translations...
+}
+
+class _TeluguDelegate extends LocalizationsDelegate {
+ const _TeluguDelegate();
+
+ @override
+ bool isSupported(Locale locale) => locale.languageCode == 'te';
+
+ @override
+ Future load(Locale locale) => SynchronousFuture(TeluguTranslations());
+
+ @override
+ bool shouldReload(_TeluguDelegate old) => false;
+}
+```
+
+Then add to `MaterialApp`:
+
+```dart
+localizationsDelegates: const [
+ TeluguTranslations.delegate, // Custom language first
+ ...Translations.localizationsDelegates,
+],
+supportedLocales: const [
+ Locale('te'), // Telugu
+ Locale('en'),
+ // Other locales...
+],
+```
+
+---
+
+## Date/Time Formatting
+
+Customize date/time display globally via `DateTimeFormatterCallback`. See [CometChatUIKit Methods](/ui-kit/flutter/v5/methods#dateformatter) for details.
diff --git a/ui-kit/flutter/v5/mentions-formatter-guide.mdx b/ui-kit/flutter/v5/mentions-formatter-guide.mdx
new file mode 100644
index 000000000..56ea5af90
--- /dev/null
+++ b/ui-kit/flutter/v5/mentions-formatter-guide.mdx
@@ -0,0 +1,357 @@
+---
+title: "Mentions Formatter"
+description: "Add @mentions with user suggestions and styled tokens in CometChat Flutter UI Kit."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_chat_uikit` |
+| Key class | `CometChatMentionsFormatter` (extends `CometChatTextFormatter`) |
+| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login(uid)` |
+| Purpose | Add @mentions with user suggestions, styled tokens, and click handling |
+| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
+| Related | [Custom Text Formatter](/ui-kit/flutter/v5/custom-text-formatter-guide) · [Custom Mentions Formatter](/ui-kit/flutter/v5/custom-mentions-formatter-guide) · [All Guides](/ui-kit/flutter/v5/guide-overview) |
+
+
+
+## Overview
+
+The `CometChatMentionsFormatter` class is a part of the CometChat UI Kit, a ready-to-use chat UI widget library for integrating CometChat into your Android applications. This class provides functionality to format mentions within text messages displayed in the chat interface. Mentions allow users to reference other users within a conversation, providing a convenient way to direct messages or involve specific participants.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Features
+
+* **Mention Formatting**: Automatically formats mentions within text messages based on provided styles and settings.
+* **Customizable Styles**: Allows customization of text styles for mentions, including colors, fonts, and background colors.
+* **User and Group Member Mentions**: Supports mentions for both individual users and group members, providing flexibility in communication scenarios.
+* **Mention List Generation**: Generates a list of suggested mentions based on user input, facilitating easy selection of recipients during message composition.
+* **Mention Click Handling**: Provides a listener interface for handling click events on mentions, enabling custom actions to be performed when a mention is tapped by the user.
+
+## Usage
+
+To integrate the `CometChatMentionsFormatter` class into your application:
+
+1. **Initialization**: Create an instance of the `CometChatMentionsFormatter` class and configure it with desired settings, such as mention text styles and limit settings.
+
+2. **Set Mention Listeners**: Set listeners for handling mention click events (`setOnMentionClick`).
+
+3. **Format Messages**: Use the `prepareLeftMessageBubbleSpan`, `prepareRightMessageBubbleSpan`, `prepareComposerSpan`, and `prepareConversationSpan` methods to format text messages with mentions appropriately for display in the chat interface.
+
+4. **Customization**: Customize the appearance and behavior of mentions by adjusting the text styles, colors, and other formatting properties as needed.
+
+Below is an example demonstrating how to use the `CometChatMentionsFormatter` class in widgets such as [CometChatConversations](/ui-kit/flutter/v5/conversations), [CometChatMessageList](/ui-kit/flutter/v5/message-list), [CometChatMessageComposer](/ui-kit/flutter/v5/message-composer).
+
+
+
+```dart
+textFormatters: [
+ CometChatMentionsFormatter(
+ messageBubbleTextStyle: (theme, alignment,{forConversation = false}) =>
+ TextStyle(
+ color: alignment==BubbleAlignment.left? Colors.orange : Colors.pink,
+ fontSize: 14,
+ fontWeight: FontWeight.bold
+ ),
+ )
+]
+```
+
+
+
+
+
+***
+
+## Actions
+
+[Actions](/ui-kit/flutter/v5/components-overview#actions) dictate how a widget functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the widget to fit your specific needs.
+
+##### onMentionTap
+
+Setting a listener for mention-click events in Message Bubbles enhances interactivity within the chat. This listener is activated when a mention is clicked, returning the corresponding user object. This feature transforms mentions into interactive links, enabling more in-depth and contextual engagement with the user associated with the clicked mention.
+
+
+
+```dart
+CometChatMessages(
+ user: user,
+ messageListConfiguration: MessageListConfiguration(
+ textFormatters: [
+ CometChatMentionsFormatter(
+ onMentionTap: (mention, mentionedUser, {message}) {
+ final snackBar = SnackBar(
+ content: const Text('Tap on Mentioned User', style: TextStyle(color: Colors.lightBlueAccent)),
+ action: SnackBarAction(
+ label: 'Undo',
+ onPressed: () {
+ // TODO("Not yet implemented")
+ },
+ ),
+ );
+ ScaffoldMessenger.of(context).showSnackBar(snackBar);
+ },
+ messageBubbleTextStyle: (theme, alignment,{forConversation = false}) => TextStyle(
+ color: alignment==BubbleAlignment.left? Colors.orange : Colors.greenAccent,
+ fontSize: 14,
+ fontWeight: FontWeight.bold
+ ),
+ )
+ ]
+ ),
+)
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+***
+
+## Customization
+
+| **Property** | **Description** | **Code** |
+| ------------------------------ | -------------------------------------------------------------- | -------------------------------------------------------- |
+| **trackingCharacter** | The character that triggers the mention search. | `String? trackingCharacter` |
+| **pattern** | The regex pattern to identify mentions. | `RegExp? pattern` |
+| **showLoadingIndicator** | Whether to show a loading indicator during mention search. | `bool? showLoadingIndicator` |
+| **onSearch** | Callback function to perform search when mention is triggered. | `void Function(String)? onSearch` |
+| **onError** | Callback function to handle errors during mention search. | `void Function(String)? onError` |
+| **message** | The message in which mentions are to be formatted. | `String? message` |
+| **messageBubbleTextStyle** | The text style for the message bubble. | `TextStyle? messageBubbleTextStyle` |
+| **messageInputTextStyle** | The text style for the message input. | `TextStyle? messageInputTextStyle` |
+| **composerId** | The unique identifier for the composer. | `String? composerId` |
+| **suggestionListEventSink** | The event sink for the suggestion list. | `EventSink>? suggestionListEventSink` |
+| **previousTextEventSink** | The event sink for the previous text before mention. | `EventSink? previousTextEventSink` |
+| **user** | The user to be mentioned. | `User? user` |
+| **group** | The group in which mentions are to be formatted. | `Group? group` |
+| **groupMembersRequestBuilder** | The request builder for fetching group members to mention. | `GroupMembersRequestBuilder? groupMembersRequestBuilder` |
+| **usersRequestBuilder** | The request builder for fetching users to mention. | `UsersRequestBuilder? usersRequestBuilder` |
+| **mentionsType** | The type of mentions (e.g., user, group). | `MentionsType? mentionsType` |
+| **onMentionTap** | Callback function to handle mention tap actions. | `void Function(User)? onMentionTap` |
+| **visibleIn** | Defines where the mentions are visible. | `Set? visibleIn` |
+| **style** | Style configuration for customizing mention appearance. | `CometChatMentionsStyle? style` |
+| **disableMentions** | Disables mentions in the composer (default: false). | `bool disableMentions` |
+| **disableMentionAll** | Controls whether @all mention is enabled (default: false). | `bool disableMentionAll` |
+| **mentionAllLabel** | Custom label to display for @all mention. | `String? mentionAllLabel` |
+| **mentionAllLabelId** | Custom ID for @all mention (default: "all"). | `String? mentionAllLabelId` |
+
+***
+
+## Advance
+
+For advanced-level customization, you can set the style of the Mentions formatters. This lets you tailor each aspect of the widget to fit your exact needs and application aesthetics. You can create and define your formatters style.
+
+### Custom Mentions Formatter
+
+For deeper customization — such as filtering who appears in the suggestion list, transforming suggestions before they reach the UI, or handling mention taps with custom logic — you can extend `CometChatMentionsFormatter` and override its behavior. See the [Custom Mentions Formatter](/ui-kit/flutter/v5/custom-mentions-formatter-guide) guide for a full walkthrough.
+
+### @all Mention Feature
+
+The `CometChatMentionsFormatter` supports mentioning all members in a group using the @all feature. When enabled, users can type `@` followed by "all" (or a custom label) to notify everyone in the group.
+
+
+
+```dart
+CometChatMessages(
+ group: group,
+ messageComposerConfiguration: MessageComposerConfiguration(
+ textFormatters: [
+ CometChatMentionsFormatter(
+ disableMentionAll: false, // Enable @all mention (default)
+ mentionAllLabel: "everyone", // Custom label (optional)
+ mentionAllLabelId: "all", // Custom ID (optional)
+ )
+ ]
+ ),
+)
+```
+
+
+
+
+
+To disable the @all mention feature:
+
+
+
+```dart
+CometChatMentionsFormatter(
+ disableMentionAll: true, // Disable @all mention
+)
+```
+
+
+
+
+
+***
+
+### Composer Mention Text Style
+
+Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source. To configure the existing Mentions look and feel for [CometChatMessageComposer](/ui-kit/flutter/v5/message-composer) refer to the below code snippet
+
+
+
+```dart
+CometChatMessages(
+ user: user,
+ messageComposerConfiguration: MessageComposerConfiguration(
+ textFormatters: [
+ CometChatMentionsFormatter(
+ messageInputTextStyle: (theme) {
+ return const TextStyle(
+ color: Colors.lightBlueAccent,
+ fontSize: 14,
+ fontWeight: FontWeight.bold
+ );
+ },
+ )
+ ]
+ )
+)
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+***
+
+### Message Bubble Mention Text Style
+
+Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source. To configure the existing Mentions look and feel for [CometChatMessageList](/ui-kit/flutter/v5/message-list)
+
+
+
+```dart
+CometChatMessages(
+ user: user,
+ messageListConfiguration: MessageListConfiguration(
+ textFormatters: [
+ CometChatMentionsFormatter(
+ messageBubbleTextStyle: (theme, alignment,{forConversation = false}) => TextStyle(
+ color: alignment==BubbleAlignment.left? Colors.orange : Colors.greenAccent,
+ fontSize: 14,
+ fontWeight: FontWeight.bold
+ ),
+ )
+ ]
+ ),
+)
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+***
+
+### Conversations Mention Text Style
+
+Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source. To configure the existing Mentions look and feel for [CometChatConversations](/ui-kit/flutter/v5/conversations)
+
+
+
+```dart
+CometChatConversations(
+ textFormatters: [
+ CometChatMentionsFormatter(
+ messageBubbleTextStyle: (theme, alignment,{forConversation = false}) =>
+ const TextStyle(
+ color: Colors.lightBlueAccent,
+ fontSize: 14,
+ fontWeight: FontWeight.bold
+ ),
+ )
+ ],
+)
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+***
+
+## Next Steps
+
+
+
+ Build a custom mentions formatter with filtered suggestions.
+
+
+ Build custom inline text patterns with regex.
+
+
+ Customize the standard message input component.
+
+
+ Browse all feature and formatter guides.
+
+
diff --git a/ui-kit/flutter/v5/message-bubble-styling.mdx b/ui-kit/flutter/v5/message-bubble-styling.mdx
new file mode 100644
index 000000000..3b5fd03ca
--- /dev/null
+++ b/ui-kit/flutter/v5/message-bubble-styling.mdx
@@ -0,0 +1,357 @@
+---
+title: "Message Bubble Styling"
+sidebarTitle: "Message Bubbles"
+description: "Customize incoming and outgoing message bubbles in CometChat Flutter UI Kit."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Outgoing | `CometChatOutgoingMessageBubbleStyle` |
+| Incoming | `CometChatIncomingMessageBubbleStyle` |
+| Action | `CometChatActionBubbleStyle` |
+| AI Assistant | `CometChatAiAssistantBubbleStyle` |
+| Usage | Add to `ThemeData.extensions` or pass to `CometChatMessageListStyle` |
+| Bubble types | Text, Image, Video, Audio, File, Poll, Sticker, Voice Call, Video Call, Link Preview, Collaborative Document, Collaborative Whiteboard, Message Translation, Deleted, Action, AI Assistant |
+| Source | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/shared_uikit/lib/src/models/extension_bubble_styles) |
+
+
+
+Customize message bubbles using `CometChatOutgoingMessageBubbleStyle` and `CometChatIncomingMessageBubbleStyle`.
+
+
+
+
+
+---
+
+## Global Theming
+
+Apply bubble styles globally via `ThemeData.extensions`:
+
+```dart
+MaterialApp(
+ theme: ThemeData(
+ extensions: [
+ CometChatOutgoingMessageBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ ),
+ CometChatIncomingMessageBubbleStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ ),
+ ],
+ ),
+)
+```
+
+
+
+
+
+---
+
+## Component-Level Styling
+
+Pass styles directly to `CometChatMessageList`:
+
+```dart
+CometChatMessageList(
+ user: user,
+ style: CometChatMessageListStyle(
+ outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ ),
+ incomingMessageBubbleStyle: CometChatIncomingMessageBubbleStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ ),
+ ),
+)
+```
+
+---
+
+## Bubble Types
+
+### Text Bubble
+
+
+
+
+
+```dart
+CometChatOutgoingMessageBubbleStyle(
+ textBubbleStyle: CometChatTextBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ ),
+)
+```
+
+### Image Bubble
+
+
+
+
+
+```dart
+CometChatOutgoingMessageBubbleStyle(
+ imageBubbleStyle: CometChatImageBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ ),
+)
+```
+
+### Video Bubble
+
+
+
+
+
+```dart
+CometChatOutgoingMessageBubbleStyle(
+ videoBubbleStyle: CometChatVideoBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ playIconColor: Color(0xFFF76808),
+ ),
+)
+```
+
+### Audio Bubble
+
+
+
+
+
+```dart
+CometChatIncomingMessageBubbleStyle(
+ audioBubbleStyle: CometChatAudioBubbleStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ downloadIconColor: Color(0xFFF76808),
+ audioBarColor: Color(0xFFF76808),
+ playIconColor: Color(0xFFF76808),
+ ),
+)
+```
+
+### File Bubble
+
+
+
+
+
+```dart
+CometChatIncomingMessageBubbleStyle(
+ fileBubbleStyle: CometChatFileBubbleStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ downloadIconTint: Color(0xFFF76808),
+ ),
+)
+```
+
+### Poll Bubble
+
+
+
+
+
+```dart
+CometChatOutgoingMessageBubbleStyle(
+ pollsBubbleStyle: CometChatPollsBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ progressBackgroundColor: Color(0xFFFBAA75),
+ iconColor: Color(0xFFF76808),
+ ),
+)
+```
+
+### Call Bubble
+
+
+
+
+
+```dart
+CometChatOutgoingMessageBubbleStyle(
+ videoCallBubbleStyle: CometChatCallBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ iconColor: Color(0xFFF76808),
+ buttonTextStyle: TextStyle(color: Colors.white),
+ dividerColor: Color(0xFFFBAA75),
+ ),
+)
+```
+
+### Link Preview Bubble
+
+
+
+
+
+```dart
+CometChatOutgoingMessageBubbleStyle(
+ linkPreviewBubbleStyle: CometChatLinkPreviewBubbleStyle(
+ backgroundColor: Color(0xFFFBAA75),
+ ),
+ textBubbleStyle: CometChatTextBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ ),
+)
+```
+
+### Deleted Message Bubble
+
+
+
+
+
+```dart
+CometChatOutgoingMessageBubbleStyle(
+ deletedBubbleStyle: CometChatDeletedBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ ),
+)
+```
+
+### Collaborative Bubbles
+
+
+
+
+
+```dart
+// Collaborative Whiteboard
+CometChatOutgoingMessageBubbleStyle(
+ collaborativeWhiteboardBubbleStyle: CometChatCollaborativeBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ iconTint: Color(0xFFFFFFFF),
+ titleStyle: TextStyle(fontWeight: FontWeight.bold, color: Color(0xFFFFFFFF)),
+ buttonTextStyle: TextStyle(color: Color(0xFFFFFFFF)),
+ dividerColor: Color(0xFFFBAA75),
+ ),
+)
+
+// Collaborative Document
+CometChatOutgoingMessageBubbleStyle(
+ collaborativeDocumentBubbleStyle: CometChatCollaborativeBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ iconTint: Color(0xFFFFFFFF),
+ titleStyle: TextStyle(fontWeight: FontWeight.bold, color: Color(0xFFFFFFFF)),
+ buttonTextStyle: TextStyle(color: Color(0xFFFFFFFF)),
+ dividerColor: Color(0xFFFBAA75),
+ ),
+)
+```
+
+### Sticker Bubble
+
+```dart
+CometChatOutgoingMessageBubbleStyle(
+ stickerBubbleStyle: CometChatStickerBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ borderRadius: BorderRadius.circular(12),
+ ),
+)
+```
+
+### Voice Call Bubble
+
+```dart
+CometChatOutgoingMessageBubbleStyle(
+ voiceCallBubbleStyle: CometChatCallBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ iconColor: Color(0xFFFFFFFF),
+ buttonTextStyle: TextStyle(color: Colors.white),
+ ),
+)
+```
+
+### Action Message Bubble
+
+Style activity-driven notifications like "User joined" or "User left":
+
+```dart
+ThemeData(
+ extensions: [
+ CometChatActionBubbleStyle(
+ textStyle: TextStyle(color: Color(0xFFF76808)),
+ border: Border.all(color: Color(0xFFF76808)),
+ backgroundColor: Color(0xFFFEEDE1),
+ ),
+ ],
+)
+```
+
+### AI Assistant Bubble
+
+```dart
+ThemeData(
+ extensions: [
+ CometChatAiAssistantBubbleStyle(
+ backgroundColor: Colors.transparent,
+ textColor: Color(0xFF141414),
+ textStyle: TextStyle(fontFamily: 'Roboto'),
+ ),
+ ],
+)
+```
+
+---
+
+## Style Properties Reference
+
+### CometChatOutgoingMessageBubbleStyle
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `backgroundColor` | `Color?` | Background color of the message bubble |
+| `border` | `BoxBorder?` | Border of the message bubble |
+| `borderRadius` | `BorderRadiusGeometry?` | Border radius of the message bubble |
+| `messageBubbleBackgroundImage` | `DecorationImage?` | Background image for the bubble |
+| `threadedMessageIndicatorTextStyle` | `TextStyle?` | Text style for threaded message indicator |
+| `threadedMessageIndicatorIconColor` | `Color?` | Icon color for threaded message indicator |
+| `messageBubbleAvatarStyle` | `CometChatAvatarStyle?` | Style for sender avatar |
+| `messageReceiptStyle` | `CometChatMessageReceiptStyle?` | Style for message receipts |
+| `messageBubbleReactionStyle` | `CometChatReactionsStyle?` | Style for message reactions |
+| `messageBubbleDateStyle` | `CometChatDateStyle?` | Style for message date |
+| `textBubbleStyle` | `CometChatTextBubbleStyle?` | Style for text messages |
+| `imageBubbleStyle` | `CometChatImageBubbleStyle?` | Style for image messages |
+| `videoBubbleStyle` | `CometChatVideoBubbleStyle?` | Style for video messages |
+| `audioBubbleStyle` | `CometChatAudioBubbleStyle?` | Style for audio messages |
+| `fileBubbleStyle` | `CometChatFileBubbleStyle?` | Style for file messages |
+| `pollsBubbleStyle` | `CometChatPollsBubbleStyle?` | Style for poll messages |
+| `stickerBubbleStyle` | `CometChatStickerBubbleStyle?` | Style for sticker messages |
+| `voiceCallBubbleStyle` | `CometChatCallBubbleStyle?` | Style for voice call bubbles |
+| `videoCallBubbleStyle` | `CometChatCallBubbleStyle?` | Style for video call bubbles |
+| `linkPreviewBubbleStyle` | `CometChatLinkPreviewBubbleStyle?` | Style for link preview bubbles |
+| `collaborativeDocumentBubbleStyle` | `CometChatCollaborativeBubbleStyle?` | Style for collaborative document bubbles |
+| `collaborativeWhiteboardBubbleStyle` | `CometChatCollaborativeBubbleStyle?` | Style for collaborative whiteboard bubbles |
+| `messageTranslationBubbleStyle` | `CometChatMessageTranslationBubbleStyle?` | Style for translated messages |
+| `deletedBubbleStyle` | `CometChatDeletedBubbleStyle?` | Style for deleted messages |
+| `moderationStyle` | `CometChatModerationStyle?` | Style for moderated messages |
+| `messagePreviewStyle` | `CometChatMessagePreviewStyle?` | Style for message previews |
+| `exceptionStyle` | `CometChatExceptionStyle?` | Style for exception views |
+
+### CometChatIncomingMessageBubbleStyle
+
+Includes all properties from `CometChatOutgoingMessageBubbleStyle` except `messageReceiptStyle`, `moderationStyle`, and `exceptionStyle`, plus:
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `senderNameTextStyle` | `TextStyle?` | Text style for sender name |
+| `aiAssistantBubbleStyle` | `CometChatAIAssistantBubbleStyle?` | Style for AI assistant bubbles |
+
+### CometChatActionBubbleStyle
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `backgroundColor` | `Color?` | Background color of action bubble |
+| `border` | `BoxBorder?` | Border of action bubble |
+| `textStyle` | `TextStyle?` | Text style for action message |
+
+### CometChatAiAssistantBubbleStyle
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `backgroundColor` | `Color?` | Background color of AI assistant bubble |
+| `textColor` | `Color?` | Text color |
+| `textStyle` | `TextStyle?` | Text style for AI messages |
diff --git a/ui-kit/flutter/v5/message-composer.mdx b/ui-kit/flutter/v5/message-composer.mdx
new file mode 100644
index 000000000..527704b92
--- /dev/null
+++ b/ui-kit/flutter/v5/message-composer.mdx
@@ -0,0 +1,588 @@
+---
+title: "Message Composer"
+description: "A widget that enables users to write and send messages with attachments and reactions"
+---
+
+
+```json
+{
+ "component": "CometChatMessageComposer",
+ "package": "cometchat_chat_uikit",
+ "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
+ "description": "A widget that enables users to write and send a variety of messages, including text, image, video, and custom messages. Features such as Live Reaction, Attachments, and Message Editing are also supported.",
+ "primaryOutput": {
+ "prop": "onSendButtonTap",
+ "type": "Function(BuildContext, BaseMessage, PreviewMessageMode?)?"
+ },
+ "props": {
+ "data": {
+ "user": {
+ "type": "User?",
+ "default": "null",
+ "note": "User object for the message composer (one of user or group is required)"
+ },
+ "group": {
+ "type": "Group?",
+ "default": "null",
+ "note": "Group object for the message composer (one of user or group is required)"
+ },
+ "text": {
+ "type": "String?",
+ "default": "null",
+ "note": "Initial text for the input field"
+ },
+ "parentMessageId": {
+ "type": "int",
+ "default": "0",
+ "note": "ID of the parent message for threaded replies"
+ }
+ },
+ "callbacks": {
+ "onChange": "Function(String)?",
+ "onSendButtonTap": "Function(BuildContext, BaseMessage, PreviewMessageMode?)?",
+ "onError": "OnError?"
+ },
+ "visibility": {
+ "hideVoiceRecordingButton": { "type": "bool?", "default": null },
+ "hideSendButton": { "type": "bool?", "default": null },
+ "hideAttachmentButton": { "type": "bool?", "default": null },
+ "hideStickersButton": { "type": "bool?", "default": null },
+ "disableMentions": { "type": "bool?", "default": null },
+ "disableTypingEvents": { "type": "bool", "default": false }
+ },
+ "sound": {
+ "disableSoundForMessages": { "type": "bool", "default": false },
+ "customSoundForMessage": { "type": "String?", "default": null }
+ },
+ "viewSlots": {
+ "auxiliaryButtonView": "ComposerWidgetBuilder?",
+ "secondaryButtonView": "ComposerWidgetBuilder?",
+ "sendButtonView": "Widget?",
+ "headerView": "ComposerWidgetBuilder?",
+ "footerView": "ComposerWidgetBuilder?"
+ },
+ "formatting": {
+ "placeholderText": { "type": "String?", "default": null },
+ "maxLine": { "type": "int?", "default": null },
+ "padding": { "type": "EdgeInsetsGeometry?", "default": null }
+ }
+ },
+ "events": [],
+ "sdkListeners": [],
+ "compositionExample": {
+ "description": "CometChatMessageComposer is typically used at the bottom of a messaging screen, paired with CometChatMessageHeader and CometChatMessageList",
+ "components": ["CometChatMessageHeader", "CometChatMessageList", "CometChatMessages"],
+ "flow": "User types message → Composer sends message → MessageList updates"
+ },
+ "types": {
+ "CometChatMessageComposerStyle": {
+ "backgroundColor": "Color?",
+ "border": "BoxBorder?",
+ "borderRadius": "BorderRadiusGeometry?",
+ "sendButtonIconColor": "Color?",
+ "sendButtonIconBackgroundColor": "Color?",
+ "textStyle": "TextStyle?",
+ "placeHolderTextStyle": "TextStyle?"
+ }
+ }
+}
+```
+
+
+## Where It Fits
+
+`CometChatMessageComposer` is a [Widget](/ui-kit/flutter/v5/components-overview#components) that enables users to write and send a variety of messages, including text, image, video, and custom messages.
+
+Features such as **Live Reaction**, **Attachments**, and **Message Editing** are also supported by it.
+
+
+
+
+
+`CometChatMessageComposer` is comprised of the following [Base Widgets](/ui-kit/flutter/v5/components-overview#base-components):
+
+| Base Widgets | Description |
+| ------------ | ----------- |
+| [MessageInput](/ui-kit/flutter/v5/message-composer) | This provides a basic layout for the contents of this component, such as the TextField and buttons |
+| [ActionSheet](/ui-kit/flutter/v5/components-overview) | The ActionSheet widget presents a list of options in either a list or grid mode |
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+// CometChatMessageComposer is typically used at the bottom of a messaging screen
+class MessagingScreen extends StatelessWidget {
+ final User user;
+
+ const MessagingScreen({required this.user});
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: Column(
+ children: [
+ CometChatMessageHeader(user: user),
+ Expanded(child: CometChatMessageList(user: user)),
+ CometChatMessageComposer(user: user),
+ ],
+ ),
+ );
+ }
+}
+```
+
+
+
+## Minimal Render
+
+The simplest way to render `CometChatMessageComposer`:
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+// For a user conversation
+CometChatMessageComposer(
+ user: user,
+)
+
+// For a group conversation
+CometChatMessageComposer(
+ group: group,
+)
+```
+
+
+
+
+## Actions and Events
+
+### Callback Props
+
+Component-level callbacks that fire on specific user interactions:
+
+| Callback | Signature | Fires When |
+|----------|-----------|------------|
+| `onSendButtonTap` | `Function(BuildContext, BaseMessage, PreviewMessageMode?)?` | User taps the send button |
+| `onChange` | `Function(String)?` | Text in the input field changes |
+| `onError` | `OnError?` | An error occurs |
+| `stateCallBack` | `Function(CometChatMessageComposerController)?` | Controller state callback for accessing controller functions |
+
+
+
+```dart
+CometChatMessageComposer(
+ user: user,
+ onSendButtonTap: (BuildContext context, BaseMessage baseMessage, PreviewMessageMode? previewMessageMode) {
+ // Handle send button tap
+ },
+ onChange: (String? text) {
+ // Handle text change
+ },
+ onError: (e) {
+ // Handle error
+ },
+)
+```
+
+
+
+## Custom View Slots
+
+Customize the appearance of `CometChatMessageComposer` by replacing default views with your own widgets.
+
+| Slot | Signature | Replaces |
+|------|-----------|----------|
+| `auxiliaryButtonView` | `ComposerWidgetBuilder?` | Auxiliary button area (AI, stickers) |
+| `secondaryButtonView` | `ComposerWidgetBuilder?` | Secondary button area (attachment, voice) |
+| `sendButtonView` | `Widget?` | Send button |
+| `headerView` | `ComposerWidgetBuilder?` | Header section above input |
+| `footerView` | `ComposerWidgetBuilder?` | Footer section below input |
+| `attachmentOptions` | `ComposerActionsBuilder?` | Attachment options list |
+
+### Example: Custom Auxiliary Button View
+
+
+
+```dart
+CometChatMessageComposer(
+ user: user,
+ auxiliaryButtonView: (context, user, group, id) {
+ final existingAuxiliaryOptions = CometChatUIKit.getDataSource()
+ .getAuxiliaryOptions(user, group, context, id, Color(0xFFA1A1A1));
+ return Row(
+ children: [
+ existingAuxiliaryOptions,
+ Icon(
+ Icons.location_pin,
+ color: Color(0xFF6852D6),
+ ),
+ ],
+ );
+ },
+)
+```
+
+
+
+
+
+
+
+### Example: Custom Secondary Button View
+
+
+
+```dart
+CometChatMessageComposer(
+ user: user,
+ secondaryButtonView: (context, user, group, id) {
+ return Icon(
+ Icons.attach_file,
+ color: Color(0xFF6852D6),
+ );
+ },
+)
+```
+
+
+
+
+
+
+
+### Example: Custom Send Button View
+
+
+
+```dart
+CometChatMessageComposer(
+ user: user,
+ sendButtonView: IconButton(
+ onPressed: () {},
+ padding: EdgeInsets.all(4),
+ style: IconButton.styleFrom(
+ alignment: Alignment.center,
+ backgroundColor: Color(0xFFEDEAFA),
+ shape: RoundedRectangleBorder(
+ borderRadius: BorderRadius.circular(4),
+ ),
+ ),
+ icon: Transform.rotate(
+ angle: 150,
+ child: Icon(
+ Icons.send,
+ size: 20,
+ color: Color(0xFF6852D6),
+ ),
+ ),
+ ),
+)
+```
+
+
+
+
+
+
+
+### Example: Custom Header View
+
+
+
+```dart
+CometChatMessageComposer(
+ user: user,
+ headerView: (context, user, group, id) {
+ return Container(
+ margin: EdgeInsets.only(bottom: 2, left: 8, right: 8),
+ padding: EdgeInsets.all(8),
+ decoration: BoxDecoration(
+ color: Color(0xFFEDEAFA),
+ borderRadius: BorderRadius.circular(8),
+ ),
+ child: Row(
+ children: [
+ Icon(Icons.volume_off, size: 20, color: Color(0xFF6852D6)),
+ Text(
+ "User has paused their notifications",
+ style: TextStyle(fontSize: 14, fontWeight: FontWeight.w400),
+ ),
+ ],
+ ),
+ );
+ },
+)
+```
+
+
+
+
+
+
+
+### Example: Custom Footer View
+
+
+
+```dart
+CometChatMessageComposer(
+ user: user,
+ footerView: (context, user, group, id) {
+ return Container(
+ width: MediaQuery.of(context).size.width / 1.08,
+ color: Colors.yellow,
+ padding: const EdgeInsets.all(8),
+ child: const Center(child: Text("Your Footer Widget")),
+ );
+ },
+)
+```
+
+
+
+
+
+
+
+
+
+
+
+
+### Example: Custom Attachment Options
+
+
+
+```dart
+CometChatMessageComposer(
+ user: user,
+ attachmentOptions: (context, user, group, id) {
+ return [
+ CometChatMessageComposerAction(
+ id: "Custom Option 1",
+ title: "Custom Option 1",
+ icon: Icon(Icons.play_circle, color: Colors.black),
+ ),
+ CometChatMessageComposerAction(
+ id: "Custom Option 2",
+ title: "Custom Option 2",
+ icon: Icon(Icons.add_box, color: Colors.black),
+ ),
+ ];
+ },
+)
+```
+
+
+
+
+
+
+
+
+## Styling
+
+Customize the appearance of `CometChatMessageComposer` using `CometChatMessageComposerStyle`.
+
+### Style Properties
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `backgroundColor` | `Color?` | Background color of the message composer |
+| `border` | `BoxBorder?` | Border of the message composer |
+| `borderRadius` | `BorderRadiusGeometry?` | Border radius of the message composer |
+| `closeIconTint` | `Color?` | Color for the close icon |
+| `dividerColor` | `Color?` | Color of the divider |
+| `dividerHeight` | `double?` | Height of the divider |
+| `sendButtonIconColor` | `Color?` | Color of the send button icon |
+| `sendButtonIconBackgroundColor` | `Color?` | Background color of the send button |
+| `sendButtonBorderRadius` | `BorderRadiusGeometry?` | Border radius of the send button |
+| `secondaryButtonIconColor` | `Color?` | Color of the secondary button icon |
+| `secondaryButtonIconBackgroundColor` | `Color?` | Background color of the secondary button |
+| `secondaryButtonBorderRadius` | `BorderRadiusGeometry?` | Border radius of the secondary button |
+| `auxiliaryButtonIconColor` | `Color?` | Color of the auxiliary button icon |
+| `auxiliaryButtonIconBackgroundColor` | `Color?` | Background color of the auxiliary button |
+| `auxiliaryButtonBorderRadius` | `BorderRadiusGeometry?` | Border radius of the auxiliary button |
+| `textStyle` | `TextStyle?` | Style of the text |
+| `textColor` | `Color?` | Color of the text |
+| `placeHolderTextStyle` | `TextStyle?` | Style of the placeholder text |
+| `placeHolderTextColor` | `Color?` | Color of the placeholder text |
+| `filledColor` | `Color?` | Background color of the text input |
+| `mentionsStyle` | `CometChatMentionsStyle?` | Style for mentions |
+| `mediaRecorderStyle` | `CometChatMediaRecorderStyle?` | Style for media recorder |
+| `aiOptionStyle` | `AIOptionsStyle?` | Style for AI options |
+| `aiOptionSheetStyle` | `CometChatAiOptionSheetStyle?` | Style for AI option sheet |
+| `attachmentOptionSheetStyle` | `CometChatAttachmentOptionSheetStyle?` | Style for attachment option sheet |
+| `suggestionListStyle` | `CometChatSuggestionListStyle?` | Style for suggestion list |
+| `messagePreviewStyle` | `CometChatMessagePreviewStyle?` | Style for message preview |
+
+### Example: Custom Styling
+
+
+
+```dart
+CometChatMessageComposer(
+ user: user,
+ messageComposerStyle: CometChatMessageComposerStyle(
+ sendButtonIconBackgroundColor: Color(0xFFF76808),
+ secondaryButtonIconColor: Color(0xFFF76808),
+ auxiliaryButtonIconColor: Color(0xFFF76808),
+ ),
+)
+```
+
+
+
+
+
+
+
+### Example: Custom Media Recorder Style
+
+
+
+```dart
+CometChatMessageComposer(
+ user: user,
+ messageComposerStyle: CometChatMessageComposerStyle(
+ mediaRecorderStyle: CometChatMediaRecorderStyle(
+ recordIndicatorBackgroundColor: Color(0xFFF44649),
+ recordIndicatorBorderRadius: BorderRadius.circular(20),
+ pauseButtonBorderRadius: BorderRadius.circular(8),
+ deleteButtonBorderRadius: BorderRadius.circular(8),
+ stopButtonBorderRadius: BorderRadius.circular(8),
+ ),
+ ),
+)
+```
+
+
+
+
+
+
+
+### Example: Custom AI Options Style
+
+
+
+```dart
+CometChatMessageComposer(
+ user: user,
+ messageComposerStyle: CometChatMessageComposerStyle(
+ aiOptionStyle: AIOptionsStyle(
+ backgroundColor: Color(0xFFE4EBF5),
+ border: Border.all(width: 3, color: Colors.red),
+ ),
+ ),
+)
+```
+
+
+
+## Advanced
+
+### Text Formatters
+
+Assigns the list of text formatters. To configure the existing Mentions look and feel check out [CometChatMentionsFormatter](/ui-kit/flutter/v5/mentions-formatter-guide).
+
+
+
+```dart
+CometChatMessageComposer(
+ user: user,
+ textFormatters: [
+ CometChatMentionsFormatter(
+ style: CometChatMentionsStyle(
+ mentionSelfTextBackgroundColor: Color(0xFFF76808),
+ mentionTextBackgroundColor: Colors.white,
+ mentionTextColor: Colors.black,
+ mentionSelfTextColor: Colors.white,
+ ),
+ ),
+ ],
+)
+```
+
+
+
+
+
+
+
+## Props Reference
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `user` | `User?` | `null` | User object for the message composer |
+| `group` | `Group?` | `null` | Group object for the message composer |
+| `messageComposerStyle` | `CometChatMessageComposerStyle?` | - | Sets style for the message composer |
+| `placeholderText` | `String?` | - | Hint text for the input field |
+| `text` | `String?` | - | Initial text for the input field |
+| `onChange` | `Function(String)?` | - | Callback triggered when text changes |
+| `textEditingController` | `TextEditingController?` | - | Controls the state of the text field |
+| `maxLine` | `int?` | - | Maximum number of lines allowed |
+| `disableMentions` | `bool?` | `null` | Disables mentions in the composer |
+| `disableTypingEvents` | `bool` | `false` | Disables typing events |
+| `disableSoundForMessages` | `bool` | `false` | Disables sound for sent messages |
+| `customSoundForMessage` | `String?` | - | URL for custom sound |
+| `customSoundForMessagePackage` | `String?` | - | Package name for custom sound asset |
+| `parentMessageId` | `int` | `0` | ID of the parent message |
+| `padding` | `EdgeInsetsGeometry?` | - | Sets padding for the message composer |
+| `messageInputPadding` | `EdgeInsetsGeometry?` | - | Sets padding for the message input field |
+| `sendButtonView` | `Widget?` | - | Custom send button widget |
+| `attachmentIcon` | `Widget?` | - | Custom attachment icon |
+| `attachmentIconURL` | `String?` | - | Path of the icon to show in the attachments button |
+| `voiceRecordingIcon` | `Widget?` | - | Custom voice recording icon |
+| `aiIcon` | `Widget?` | - | Custom AI button icon |
+| `aiIconURL` | `String?` | - | Path of the icon to show in the AI button |
+| `aiIconPackageName` | `String?` | - | Package name for AI icon asset |
+| `auxiliaryButtonView` | `ComposerWidgetBuilder?` | - | UI component for auxiliary button |
+| `secondaryButtonView` | `ComposerWidgetBuilder?` | - | UI component for secondary button |
+| `auxiliaryButtonsAlignment` | `AuxiliaryButtonsAlignment?` | - | Controls position of auxiliary button view |
+| `hideVoiceRecordingButton` | `bool?` | `null` | Hide/display voice recording button |
+| `attachmentOptions` | `ComposerActionsBuilder?` | - | Provides options for file attachments |
+| `hideAttachmentButton` | `bool?` | `null` | Hide/display attachment button |
+| `hideImageAttachmentOption` | `bool?` | `null` | Hide/display image attachment option |
+| `hideVideoAttachmentOption` | `bool?` | `null` | Hide/display video attachment option |
+| `hideAudioAttachmentOption` | `bool?` | `null` | Hide/display audio attachment option |
+| `hideFileAttachmentOption` | `bool?` | `null` | Hide/display file attachment option |
+| `hidePollsOption` | `bool?` | `null` | Hide/display polls option |
+| `hideCollaborativeDocumentOption` | `bool?` | `null` | Hide/display collaborative document option |
+| `hideCollaborativeWhiteboardOption` | `bool?` | `null` | Hide/display collaborative whiteboard option |
+| `hideTakePhotoOption` | `bool?` | `null` | Hide/display take photo option |
+| `onSendButtonTap` | `Function(...)?` | - | Callback when send button is tapped |
+| `onError` | `OnError?` | - | Callback to handle errors |
+| `hideSendButton` | `bool?` | `null` | Hide/display the send button |
+| `hideStickersButton` | `bool?` | `null` | Hide/display the sticker button |
+| `sendButtonIcon` | `Widget?` | - | Custom send button icon |
+| `recorderStartButtonIcon` | `Widget?` | - | Custom icon for media recorder start button |
+| `recorderPauseButtonIcon` | `Widget?` | - | Custom icon for media recorder pause button |
+| `recorderDeleteButtonIcon` | `Widget?` | - | Custom icon for media recorder delete button |
+| `recorderStopButtonIcon` | `Widget?` | - | Custom icon for media recorder stop button |
+| `recorderSendButtonIcon` | `Widget?` | - | Custom icon for media recorder send button |
+| `disableMentionAll` | `bool` | `false` | Disables @all mentions in groups |
+| `mentionAllLabel` | `String?` | - | Custom label for group mentions |
+| `mentionAllLabelId` | `String?` | - | Custom label ID for group mentions |
+| `headerView` | `ComposerWidgetBuilder?` | - | Custom header view |
+| `footerView` | `ComposerWidgetBuilder?` | - | Custom footer view |
+| `textFormatters` | `List?` | - | List of text formatters |
+| `stateCallBack` | `Function(CometChatMessageComposerController)?` | - | Callback to access controller functions |
+
+
+
+ Display user or group details in the header
+
+
+ Display messages in a conversation
+
+
+ Configure mentions look and feel
+
+
+ Learn how to customize the look and feel
+
+
diff --git a/ui-kit/flutter/v5/message-header.mdx b/ui-kit/flutter/v5/message-header.mdx
new file mode 100644
index 000000000..6b5bc0bd8
--- /dev/null
+++ b/ui-kit/flutter/v5/message-header.mdx
@@ -0,0 +1,570 @@
+---
+title: "Message Header"
+description: "Widget that showcases the User or Group details in the toolbar with typing indicator and back navigation button."
+---
+
+```json
+{
+ "component": "CometChatMessageHeader",
+ "package": "cometchat_chat_uikit",
+ "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
+ "description": "Widget that showcases the User or Group details in the toolbar with typing indicator and back navigation button.",
+ "props": {
+ "data": {
+ "user": { "type": "User?", "default": "null" },
+ "group": { "type": "Group?", "default": "null" }
+ },
+ "callbacks": {
+ "onBack": "VoidCallback?",
+ "newChatButtonClick": "VoidCallback?",
+ "chatHistoryButtonClick": "VoidCallback?"
+ },
+ "visibility": {
+ "showBackButton": { "type": "bool?", "default": "true" },
+ "hideVideoCallButton": { "type": "bool?", "default": "false" },
+ "hideVoiceCallButton": { "type": "bool?", "default": "false" },
+ "usersStatusVisibility": { "type": "bool?", "default": "true" },
+ "hideNewChatButton": { "type": "bool?", "default": "false" },
+ "hideChatHistoryButton": { "type": "bool?", "default": "false" }
+ },
+ "viewSlots": {
+ "backButton": "WidgetBuilder?",
+ "subtitleView": "Widget? Function(Group? group, User? user, BuildContext context)?",
+ "listItemView": "Widget Function(Group? group, User? user, BuildContext context)?",
+ "trailingView": "List? Function(User? user, Group? group, BuildContext context)?",
+ "leadingStateView": "Widget? Function(Group? group, User? user, BuildContext context)?",
+ "titleView": "Widget? Function(Group? group, User? user, BuildContext context)?",
+ "auxiliaryButtonView": "Widget? Function(Group? group, User? user, BuildContext context)?"
+ },
+ "style": {
+ "messageHeaderStyle": "CometChatMessageHeaderStyle?",
+ "listItemStyle": "ListItemStyle?"
+ },
+ "layout": {
+ "avatarHeight": { "type": "double?", "default": "null" },
+ "avatarWidth": { "type": "double?", "default": "null" },
+ "height": { "type": "double?", "default": "65" },
+ "padding": { "type": "EdgeInsetsGeometry?", "default": "null" }
+ },
+ "icons": {
+ "menuIcon": "Widget?",
+ "newChatIcon": "IconData?",
+ "chatHistoryIcon": "IconData?"
+ },
+ "formatting": {
+ "dateTimeFormatterCallback": "DateTimeFormatterCallback?"
+ }
+ },
+ "sdkListeners": [
+ "onUserOnline",
+ "onUserOffline",
+ "onTypingStarted",
+ "onTypingEnded",
+ "onGroupMemberJoined",
+ "onGroupMemberLeft",
+ "onGroupMemberKicked",
+ "onGroupMemberBanned",
+ "onMemberAddedToGroup"
+ ]
+}
+```
+
+
+## Overview
+
+`CometChatMessageHeader` is a [Widget](/ui-kit/flutter/v5/components-overview#components) that showcases the [User](/sdk/flutter/users-overview) or [Group](/sdk/flutter/groups-overview) details in the toolbar. Furthermore, it also presents a typing indicator and a back navigation button for ease of use.
+
+
+
+
+
+The `CometChatMessageHeader` is comprised of the following components:
+
+| Components | Description |
+| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| [ListItem Widget](/ui-kit/flutter/v5/components-overview) | This component’s widget consists of avatar, status indicator , title, and subtitle. The fields are then mapped with the SDK’s user, group class. |
+| Back Button | BackButton that allows users to navigate back from the current activity or screen to the previous one |
+
+## Usage
+
+### Integration
+
+You can launch `CometChatMessageHeader` directly using `Navigator.push`, or you can define it as a widget within the `build` method of your `State` class.
+
+##### 1. Using Navigator to Launch `CometChatMessageHeader`
+
+
+
+```dart
+Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatMessageHeader())); // A user or group object is required to launch this widget.
+```
+
+
+
+
+
+##### 2. Embedding `CometChatMessageHeader` as a Widget in the build Method
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:flutter/material.dart';
+
+class MessageHeader extends StatefulWidget {
+ const MessageHeader({super.key});
+
+ @override
+ State createState() => _MessageHeaderState();
+}
+
+class _MessageHeaderState extends State {
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: SafeArea(
+ child: CometChatMessageHeader() // A user or group object is required to launch this widget.
+ )
+ );
+ }
+}
+```
+
+
+
+
+
+***
+
+### Actions
+
+[Actions](/ui-kit/flutter/v5/components-overview#actions) dictate how a widget functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the widget to fit your specific needs.
+
+##### 1. onBack
+
+Enhance your application's functionality by leveraging the `onBack` feature. This capability allows you to customize the behavior associated with navigating back within your app. Utilize the provided code snippet to override default behaviors and tailor the user experience according to your specific requirements.
+
+
+
+```dart
+CometChatMessageHeader(
+ user: user,
+ onBack: () {
+ // TODO("Not yet implemented")
+ },
+)
+```
+
+
+
+
+
+***
+
+### Filters
+
+**Filters** allow you to customize the data displayed in a list within a `Widget`. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using `RequestBuilders` of Chat SDK.
+
+The `CometChatMessageHeader` widget does not have any exposed filters.
+
+***
+
+## Customization
+
+To fit your app's design requirements, you can customize the appearance of the conversation widget. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.
+
+## Style
+
+To customize the appearance, you can assign a `CometChatMessageHeaderStyle` object to the `CometChatMessageHeader` widget.
+
+
+
+```dart
+CometChatMessageHeader(
+ user: user,
+ messageHeaderStyle: CometChatMessageHeaderStyle(
+ avatarStyle: CometChatAvatarStyle(
+ backgroundColor: Color(0xFFFBAA75),
+ borderRadius: BorderRadius.circular(6.67),
+ ),
+ callButtonsStyle: CometChatCallButtonsStyle(
+ voiceCallIconColor: Color(0xFFF76808),
+ videoCallIconColor: Color(0xFFF76808),
+ ),
+ )
+)
+```
+
+
+
+
+
+
+
+
+
+### CometChatMessageHeaderStyle Properties
+
+| Property | Data Type | Description |
+| ------------------------------------- | -------------------------------- | -------------------------------------------------------- |
+| `backgroundColor` | `Color?` | Background color for the message header. |
+| `border` | `BoxBorder?` | Border for the message header. |
+| `borderRadius` | `BorderRadiusGeometry?` | Border radius for the message header. |
+| `titleTextStyle` | `TextStyle?` | Text style for the title. |
+| `titleTextColor` | `Color?` | Color for the title text. |
+| `subtitleTextStyle` | `TextStyle?` | Text style for the subtitle. |
+| `subtitleTextColor` | `Color?` | Color for the subtitle text. |
+| `typingIndicatorTextStyle` | `TextStyle?` | Text style for the typing indicator. |
+| `onlineStatusColor` | `Color?` | Color for the online status indicator. |
+| `backIconColor` | `Color?` | Color for the back icon. |
+| `backIcon` | `Widget?` | Custom back icon widget. |
+| `privateGroupBadgeIcon` | `Widget?` | Icon for private group badge. |
+| `passwordProtectedGroupBadgeIcon` | `Widget?` | Icon for password protected group badge. |
+| `privateGroupBadgeIconColor` | `Color?` | Color for private group badge icon. |
+| `passwordProtectedGroupBadgeIconColor`| `Color?` | Color for password protected group badge icon. |
+| `groupIconBackgroundColor` | `Color?` | Background color for group icon. |
+| `avatarStyle` | `CometChatAvatarStyle?` | Style for the avatar. |
+| `callButtonsStyle` | `CometChatCallButtonsStyle?` | Style for call buttons. |
+| `statusIndicatorStyle` | `CometChatStatusIndicatorStyle?` | Style for status indicator. |
+| `newChatIconColor` | `Color?` | Color for the new chat icon. |
+| `chatHistoryIconColor` | `Color?` | Color for the chat history icon. |
+| `menuIconColor` | `Color?` | Color for the menu icon. |
+
+***
+
+### Functionality
+
+These are a set of small functional customizations that allow you to fine-tune the overall experience of the widget. With these, you can change text, set custom icons, and toggle the visibility of UI elements.
+
+
+
+
+
+Here is a code snippet demonstrating how you can customize the functionality of the Message Header widget.
+
+
+
+```dart
+CometChatMessageHeader(
+ user: user,
+ showBackButton: true,
+ usersStatusVisibility: true,
+)
+```
+
+
+
+
+
+## CometChatMessageHeader Properties
+
+Following is a list of customizations along with their corresponding code snippets:
+
+| Property | Data Type | Description |
+| --------------------- | ------------------------------------------------------------------------- | -------------------------------------------------------------- |
+| `backButton` | `WidgetBuilder?` | Used to set the back button widget. |
+| `subtitleView` | `Widget? Function(Group? group, User? user, BuildContext context)?` | To set subtitle view for the group or user. |
+| `user` | `User?` | Set `User` object, one is mandatory either `user` or `group`. |
+| `group` | `Group?` | Set `Group` object, one is mandatory either `user` or `group`. |
+| `listItemView` | `Widget Function(Group? group, User? user, BuildContext context)?` | Set custom view for list item. |
+| `messageHeaderStyle` | `CometChatMessageHeaderStyle?` | Set styling props for message header. |
+| `listItemStyle` | `ListItemStyle?` | Style for every list item. |
+| `trailingView` | `List? Function(User? user, Group? group, BuildContext context)?` | Set appbar options for the trailing view. |
+| `onBack` | `VoidCallback?` | Callback triggered on closing the screen. |
+| `avatarHeight` | `double?` | Set height for avatar. |
+| `avatarWidth` | `double?` | Set width for avatar. |
+| `height` | `double?` | Set height for message header. |
+| `padding` | `EdgeInsetsGeometry?` | Set padding for message header. |
+| `hideVideoCallButton` | `bool?` | Used to hide video call button. |
+| `hideVoiceCallButton` | `bool?` | Used to hide voice call button. |
+| `showBackButton` | `bool?` | Toggle visibility for back button. Defaults to `true`. |
+| `usersStatusVisibility` | `bool?` | Controls visibility of status indicator. Defaults to `true`. |
+| `options` | `List? Function(User? user, Group? group, BuildContext context)?` | Set menu options for the header. |
+| `menuIcon` | `Widget?` | Set custom menu icon widget. |
+| `leadingStateView` | `Widget? Function(Group? group, User? user, BuildContext context)?` | To set leading view for the message header. |
+| `titleView` | `Widget? Function(Group? group, User? user, BuildContext context)?` | To set the title view for the message header. |
+| `auxiliaryButtonView` | `Widget? Function(Group? group, User? user, BuildContext context)?` | To set auxiliary view for the message header. |
+| `dateTimeFormatterCallback` | `DateTimeFormatterCallback?` | Callback that can be used to format the date and time. |
+| `hideChatHistoryButton` | `bool?` | Hide chat history button. |
+| `hideNewChatButton` | `bool?` | Hide new chat button. |
+| `newChatButtonClick` | `VoidCallback?` | Callback triggered on new chat button click. |
+| `chatHistoryButtonClick` | `VoidCallback?` | Callback triggered on chat history button click. |
+| `newChatIcon` | `IconData?` | Provides new chat icon. |
+| `chatHistoryIcon` | `IconData?` | Provides chat history icon. |
+
+***
+
+### Advanced
+
+For advanced-level customization, you can set custom views to the widget. This lets you tailor each aspect of the widget to fit your exact needs and application aesthetics. You can create and define your own widget and then incorporate those into the widget.
+
+***
+
+#### auxiliaryButtonView
+
+Allows adding a custom button or additional action next to the title or trailing section.
+
+Use Cases:
+
+* Add a Call button (📞) for quick voice/video calls.
+* Include a Block/Report button for moderation.
+* Implement a Pin Chat feature.
+
+
+
+```dart
+CometChatMessageHeader(
+ auxiliaryButtonView: (group, user, context) {
+ // return auxiliary view
+ },
+)
+```
+
+
+
+
+
+***
+
+#### ListItemView
+
+The `CometChatMessageHeader` widget consists of a `ListItemView`. You can customize the ListItem according to your requirements by using the `.setListItemView` method.
+
+
+
+```dart
+CometChatMessageHeader(
+ user: user,
+ listItemView: (Group? group, User? user, context) {
+ return Placeholder(); // Replace this placeholder with your custom widget.
+ },
+)
+```
+
+
+
+
+
+**Example**
+
+Here is the complete example for reference:
+
+
+
+```dart main.dart
+ CometChatMessageHeader(
+ user: user,
+ group: group,
+ listItemView: (group, user, context) {
+ return CometChatListItem(
+ avatarURL: group != null ? group.icon : user?.avatar,
+ avatarName: group != null ? group.name : user?.name,
+ avatarStyle: CometChatAvatarStyle(
+ borderRadius: BorderRadius.circular(6.67),
+ backgroundColor: Color(0xFFAA9EE8)),
+ title: group != null ? group.name : user?.name ?? "",
+ subtitleView: Text(
+ user != null
+ ? (user.status == UserStatusConstants.online
+ ? "Online"
+ : "Offline")
+ : "${group?.membersCount} members",
+ style: TextStyle(
+ color: Color(0xFF727272),
+ fontSize: 14,
+ fontWeight: FontWeight.w400,
+ ),
+ ),
+ tailView: CometChatUIKit.getDataSource()
+ .getAuxiliaryHeaderMenu(context, user, group, null),
+ style: ListItemStyle(
+ titleStyle: TextStyle(
+ color: Color(0xFF141414),
+ fontSize: 16,
+ fontWeight: FontWeight.w500,
+ ),
+ ),
+ );
+ },
+ ); // Replaced the placeholder with a custom widget.
+```
+
+
+
+
+
+
+
+
+
+***
+
+#### leadingStateView
+
+Defines a custom leading view, typically used for the receiver's profile picture or avatar.
+
+Use Cases:
+
+* Display a circular profile picture with a status indicator.
+* Add a custom badge for special roles (Admin, Verified ✅).
+
+
+
+```dart
+CometChatMessageHeader(
+ leadingStateView: (group, user, context) {
+ // return leading view
+ },
+)
+```
+
+
+
+
+
+***
+
+#### SubtitleView
+
+You can customize the subtitle widget for each item to meet your specific preferences and needs.
+
+
+
+```dart
+ CometChatMessageHeader(
+ user: user,
+ subtitleView: (group, user, context) {
+ String subtitle;
+ if (group != null) {
+ subtitle = "${group.membersCount} . ${group.description}";
+ } else {
+ subtitle = user?.status ?? '';
+ }
+ return Text(
+ subtitle,
+ style: TextStyle(
+ fontSize: 12,
+ fontWeight: FontWeight.w400,
+ color: Color(0XFF727272),
+ ),
+ );
+ },
+ )
+```
+
+
+
+
+
+
+
+
+
+***
+
+#### trailingView
+
+You can set the Custom `trailingView` to the `CometChatMessageHeader` widget.
+
+
+
+```dart
+CometChatMessageHeader(
+ user: user,
+ trailingView: (User? user, Group? group, BuildContext context) {
+ return [
+ IconButton(
+ onPressed: () {},
+ icon: Icon(
+ Icons.info_outline,
+ color: Color(0xFF141414),
+ ),
+ )
+ ];
+ },
+)
+```
+
+
+
+
+
+***
+
+#### Options Menu
+
+You can add custom menu options to the message header using the `options` property. These options appear in a popup menu when the menu icon is tapped.
+
+
+
+```dart
+CometChatMessageHeader(
+ user: user,
+ options: (User? user, Group? group, BuildContext context) {
+ return [
+ CometChatOption(
+ id: "view_profile",
+ title: "View Profile",
+ icon: Icons.person,
+ onClick: () {
+ // Handle view profile action
+ },
+ ),
+ CometChatOption(
+ id: "block_user",
+ title: "Block User",
+ icon: Icons.block,
+ onClick: () {
+ // Handle block user action
+ },
+ ),
+ ];
+ },
+)
+```
+
+
+
+
+
+***
+
+#### BackIcon
+
+You can customize the Back Icon according to your specific requirements by using the `.backButton` method.
+
+
+
+```dart
+CometChatMessageHeader(
+ user: user,
+ backButton: (context) {
+ return IconButton(
+ icon: Icon(Icons.add_alert_outlined, color: Color(0xFF6851D6)),
+ onPressed: () {
+ // Navigator.pop(context);
+ },
+ );
+ },
+)
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+***
diff --git a/ui-kit/flutter/v5/message-list.mdx b/ui-kit/flutter/v5/message-list.mdx
new file mode 100644
index 000000000..b92da3813
--- /dev/null
+++ b/ui-kit/flutter/v5/message-list.mdx
@@ -0,0 +1,715 @@
+---
+title: "Message List"
+description: "A composite widget that displays a list of messages with real-time operations"
+---
+
+
+```json
+{
+ "component": "CometChatMessageList",
+ "package": "cometchat_chat_uikit",
+ "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
+ "description": "A composite widget that displays a list of messages with real-time operations. Includes various message types such as Text Messages, Media Messages, Stickers, and more.",
+ "primaryOutput": {
+ "prop": "onThreadRepliesClick",
+ "type": "void Function(BaseMessage, BuildContext, {CometChatMessageTemplate?})?"
+ },
+ "props": {
+ "data": {
+ "user": {
+ "type": "User?",
+ "default": "null",
+ "note": "User object for user message list (one of user or group is required)"
+ },
+ "group": {
+ "type": "Group?",
+ "default": "null",
+ "note": "Group object for group message list (one of user or group is required)"
+ },
+ "messagesRequestBuilder": {
+ "type": "MessagesRequestBuilder?",
+ "default": "null",
+ "note": "Custom request builder for filtering messages"
+ },
+ "templates": {
+ "type": "List?",
+ "default": "null",
+ "note": "Message templates for the list"
+ }
+ },
+ "callbacks": {
+ "onThreadRepliesClick": "void Function(BaseMessage, BuildContext, {CometChatMessageTemplate?})?",
+ "onError": "OnError?",
+ "onLoad": "OnLoad?",
+ "onEmpty": "OnEmpty?",
+ "onReactionClick": "Function(String?, BaseMessage)?",
+ "onReactionLongPress": "Function(String?, BaseMessage)?",
+ "onReactionListItemClick": "Function(String?, BaseMessage?)?"
+ },
+ "visibility": {
+ "hideTimestamp": { "type": "bool?", "default": null },
+ "avatarVisibility": { "type": "bool?", "default": true },
+ "receiptsVisibility": { "type": "bool?", "default": true },
+ "disableReactions": { "type": "bool?", "default": false },
+ "hideStickyDate": { "type": "bool?", "default": false },
+ "hideReplyInThreadOption": { "type": "bool?", "default": false },
+ "hideEditMessageOption": { "type": "bool?", "default": false },
+ "hideDeleteMessageOption": { "type": "bool?", "default": false },
+ "hideGroupActionMessages": { "type": "bool?", "default": false }
+ },
+ "sound": {
+ "disableSoundForMessages": { "type": "bool?", "default": null },
+ "customSoundForMessages": { "type": "String?", "default": null }
+ },
+ "viewSlots": {
+ "loadingStateView": "WidgetBuilder?",
+ "emptyStateView": "WidgetBuilder?",
+ "errorStateView": "WidgetBuilder?",
+ "headerView": "Widget? Function(BuildContext, {User?, Group?, int?})?",
+ "footerView": "Widget? Function(BuildContext, {User?, Group?, int?})?"
+ },
+ "formatting": {
+ "alignment": { "type": "ChatAlignment", "default": "ChatAlignment.standard" },
+ "datePattern": { "type": "String Function(BaseMessage)?", "default": null },
+ "dateSeparatorPattern": { "type": "String Function(DateTime)?", "default": null }
+ }
+ },
+ "events": [],
+ "sdkListeners": [
+ "onMessageReceived",
+ "onMessageEdited",
+ "onMessageDeleted",
+ "onTypingStarted",
+ "onTypingEnded"
+ ],
+ "compositionExample": {
+ "description": "CometChatMessageList is typically used within CometChatMessages, paired with CometChatMessageHeader and CometChatMessageComposer",
+ "components": ["CometChatMessageHeader", "CometChatMessageComposer", "CometChatMessages"],
+ "flow": "User/Group → MessageList displays messages → Real-time updates via SDK listeners"
+ },
+ "types": {
+ "CometChatMessageListStyle": {
+ "backgroundColor": "Color?",
+ "border": "BoxBorder?",
+ "borderRadius": "BorderRadiusGeometry?",
+ "incomingMessageBubbleStyle": "CometChatIncomingMessageBubbleStyle?",
+ "outgoingMessageBubbleStyle": "CometChatOutgoingMessageBubbleStyle?",
+ "avatarStyle": "CometChatAvatarStyle?"
+ }
+ }
+}
+```
+
+
+## Where It Fits
+
+`CometChatMessageList` is a [Composite Widget](/ui-kit/flutter/v5/components-overview#composite-components) that displays a list of messages and effectively manages real-time operations. It includes various types of messages such as Text Messages, Media Messages, Stickers, and more.
+
+`CometChatMessageList` is primarily a list of the base widget [MessageBubble](/ui-kit/flutter/v5/message-bubble-styling). The MessageBubble Widget is utilized to create different types of chat bubbles depending on the message type.
+
+
+
+
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+// CometChatMessageList is typically used within CometChatMessages
+// or as part of a custom messaging screen
+class MessagingScreen extends StatelessWidget {
+ final User user;
+
+ const MessagingScreen({required this.user});
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: Column(
+ children: [
+ CometChatMessageHeader(user: user),
+ Expanded(child: CometChatMessageList(user: user)),
+ CometChatMessageComposer(user: user),
+ ],
+ ),
+ );
+ }
+}
+```
+
+
+
+## Minimal Render
+
+The simplest way to render `CometChatMessageList`:
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+// For a user conversation
+CometChatMessageList(
+ user: user,
+)
+
+// For a group conversation
+CometChatMessageList(
+ group: group,
+)
+```
+
+
+
+
+Simply adding the `MessageList` component to the layout will only display the loading indicator. To fetch messages for a specific entity, you need to supplement it with `User` or `Group` Object.
+
+
+
+## Filtering CometChatMessageList
+
+Use the `messagesRequestBuilder` prop to filter which messages appear in the list.
+
+### Filter Recipes
+
+| Recipe | Code |
+|--------|------|
+| Limit messages | `MessagesRequestBuilder()..limit = 30` |
+| Search messages | `MessagesRequestBuilder()..searchKeyword = "keyword"` |
+| Filter by type | `MessagesRequestBuilder()..types = ["text"]` |
+| Filter by category | `MessagesRequestBuilder()..categories = ["message"]` |
+
+
+
+```dart
+CometChatMessageList(
+ user: user,
+ messagesRequestBuilder: MessagesRequestBuilder()
+ ..uid = user.uid
+ ..searchKeyword = "searchKeyword"
+ ..limit = 30,
+)
+```
+
+
+
+
+The following parameters in messageRequestBuilder will always be altered inside the message list:
+1. UID
+2. GUID
+3. types
+4. categories
+
+
+For the full MessagesRequestBuilder API, see the [SDK documentation](/sdk/flutter/additional-message-filtering).
+
+## Actions and Events
+
+### Callback Props
+
+Component-level callbacks that fire on specific user interactions:
+
+| Callback | Signature | Fires When |
+|----------|-----------|------------|
+| `onThreadRepliesClick` | `void Function(BaseMessage, BuildContext, {CometChatMessageTemplate?})?` | User clicks on thread indicator |
+| `onError` | `OnError?` | An error occurs while fetching messages |
+| `onLoad` | `OnLoad?` | List is successfully fetched and loaded |
+| `onEmpty` | `OnEmpty?` | List is empty |
+| `onReactionClick` | `Function(String?, BaseMessage)?` | User clicks on a reaction pill |
+| `onReactionLongPress` | `Function(String?, BaseMessage)?` | User long presses on a reaction pill |
+| `onReactionListItemClick` | `Function(String?, BaseMessage?)?` | User clicks on a reaction list item |
+| `addMoreReactionTap` | `Function(BaseMessage)?` | User clicks "Add More Reactions" button |
+
+
+
+```dart
+CometChatMessageList(
+ user: user,
+ onThreadRepliesClick: (message, context, {template}) {
+ // Handle thread replies click
+ },
+ onError: (e) {
+ // Handle error
+ },
+ onLoad: (list) {
+ print("Messages loaded: ${list.length}");
+ },
+ onEmpty: () {
+ print("No messages");
+ },
+ onReactionClick: (emoji, message) {
+ // Handle reaction click
+ },
+)
+```
+
+
+
+### SDK Events (Real-Time, Automatic)
+
+The component automatically handles these SDK listeners for real-time updates:
+
+| SDK Listener | Handled Automatically |
+|--------------|----------------------|
+| `onMessageReceived` | Adds new message to the list |
+| `onMessageEdited` | Updates edited message in the list |
+| `onMessageDeleted` | Removes deleted message from the list |
+| `onTypingStarted` | Shows typing indicator |
+| `onTypingEnded` | Hides typing indicator |
+
+## Custom View Slots
+
+Customize the appearance of `CometChatMessageList` by replacing default views with your own widgets.
+
+| Slot | Signature | Replaces |
+|------|-----------|----------|
+| `loadingStateView` | `WidgetBuilder?` | Loading spinner |
+| `emptyStateView` | `WidgetBuilder?` | Empty state display |
+| `errorStateView` | `WidgetBuilder?` | Error state display |
+| `headerView` | `Widget? Function(BuildContext, {User?, Group?, int?})?` | Header section |
+| `footerView` | `Widget? Function(BuildContext, {User?, Group?, int?})?` | Footer section |
+| `emptyChatGreetingView` | `WidgetBuilder?` | Empty chat greeting for AI |
+| `newMessageIndicatorView` | `WidgetBuilder?` | New message indicator |
+
+### Example: Custom Header View
+
+
+
+```dart
+CometChatMessageList(
+ user: user,
+ headerView: (context, {group, parentMessageId, user}) {
+ return Container(
+ width: double.maxFinite,
+ color: Color(0xFFEDEAFA),
+ padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+ child: Row(
+ children: [
+ Icon(Icons.notes_outlined, color: Color(0xFF6852D6)),
+ SizedBox(width: 8),
+ Text('Notes', style: TextStyle(color: Color(0xFF6852D6))),
+ ],
+ ),
+ );
+ },
+)
+```
+
+
+
+
+
+
+
+### Example: Custom Footer View
+
+
+
+```dart
+CometChatMessageList(
+ user: user,
+ footerView: (context, {group, parentMessageId, user}) {
+ return Container(
+ width: double.maxFinite,
+ color: Color(0xFFEDEAFA),
+ padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+ child: Row(
+ children: [
+ Icon(Icons.sunny, color: Color(0xFF6852D6)),
+ SizedBox(width: 8),
+ Text('Ice Breakers', style: TextStyle(color: Color(0xFF6852D6))),
+ ],
+ ),
+ );
+ },
+)
+```
+
+
+
+
+
+
+
+### Example: Custom Loading State View
+
+
+
+```dart
+CometChatMessageList(
+ user: user,
+ loadingStateView: (context) {
+ return Center(
+ child: CircularProgressIndicator(),
+ );
+ },
+)
+```
+
+
+
+### Example: Custom Empty State View
+
+
+
+```dart
+CometChatMessageList(
+ user: user,
+ emptyStateView: (context) {
+ return Center(
+ child: Text("No messages yet. Start the conversation!"),
+ );
+ },
+)
+```
+
+
+
+### Example: Custom Error State View
+
+
+
+```dart
+CometChatMessageList(
+ user: user,
+ errorStateView: (context) {
+ return Center(
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ Text("Couldn't load messages"),
+ ElevatedButton(
+ onPressed: () {
+ // Retry logic
+ },
+ child: Text("Retry"),
+ ),
+ ],
+ ),
+ );
+ },
+)
+```
+
+
+
+
+## Styling
+
+Customize the appearance of `CometChatMessageList` using `CometChatMessageListStyle`.
+
+### Style Properties
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `backgroundColor` | `Color?` | Background color of the message list |
+| `border` | `BoxBorder?` | Border of the message list |
+| `borderRadius` | `BorderRadiusGeometry?` | Border radius of the message list |
+| `avatarStyle` | `CometChatAvatarStyle?` | Style for avatar in message bubble |
+| `emptyStateTextStyle` | `TextStyle?` | Style for empty state text |
+| `emptyStateTextColor` | `Color?` | Color for empty state text |
+| `emptyStateSubtitleStyle` | `TextStyle?` | Style for empty state subtitle |
+| `emptyStateSubtitleColor` | `Color?` | Color for empty state subtitle |
+| `errorStateTextStyle` | `TextStyle?` | Style for error state text |
+| `errorStateTextColor` | `Color?` | Color for error state text |
+| `errorStateSubtitleStyle` | `TextStyle?` | Style for error state subtitle |
+| `errorStateSubtitleColor` | `Color?` | Color for error state subtitle |
+| `incomingMessageBubbleStyle` | `CometChatIncomingMessageBubbleStyle?` | Style for incoming message bubble |
+| `outgoingMessageBubbleStyle` | `CometChatOutgoingMessageBubbleStyle?` | Style for outgoing message bubble |
+| `messageInformationStyle` | `CometChatMessageInformationStyle?` | Style for message information |
+| `messageOptionSheetStyle` | `CometChatMessageOptionSheetStyle?` | Style for message option sheet |
+| `mentionsStyle` | `CometChatMentionsStyle?` | Style for mentions |
+| `actionBubbleStyle` | `CometChatActionBubbleStyle?` | Style for group action bubbles |
+| `reactionListStyle` | `CometChatReactionListStyle?` | Style for reaction list |
+| `reactionsStyle` | `CometChatReactionsStyle?` | Style for reactions |
+| `aiSmartRepliesStyle` | `CometChatAISmartRepliesStyle?` | Style for smart replies |
+| `aiConversationStarterStyle` | `CometChatAIConversationStarterStyle?` | Style for conversation starter |
+| `aiConversationSummaryStyle` | `CometChatAIConversationSummaryStyle?` | Style for conversation summary |
+| `aiAssistantSuggestedMessageTextStyle` | `TextStyle?` | Text style for AI suggested messages |
+| `aiAssistantSuggestedMessageTextColor` | `Color?` | Text color for AI suggested messages |
+| `aiAssistantSuggestedMessageBorder` | `Border?` | Border for AI suggested messages |
+| `aiAssistantSuggestedMessageBorderRadius` | `BorderRadius?` | Border radius for AI suggested messages |
+| `aiAssistantSuggestedMessageBackgroundColor` | `Color?` | Background color for AI suggested messages |
+| `aiAssistantSuggestedMessageIconColor` | `Color?` | Icon color for AI suggested messages |
+| `emptyChatGreetingTitleTextColor` | `Color?` | Text color for empty chat greeting title |
+| `emptyChatGreetingTitleTextStyle` | `TextStyle?` | Text style for empty chat greeting title |
+| `emptyChatGreetingSubtitleTextColor` | `Color?` | Text color for empty chat greeting subtitle |
+| `emptyChatGreetingSubtitleTextStyle` | `TextStyle?` | Text style for empty chat greeting subtitle |
+| `flagMessageStyle` | `CometchatFlagMessageStyle?` | Style for flag message dialog |
+| `newMessageIndicatorStyle` | `CometChatNewMessageIndicatorStyle?` | Style for new message indicator |
+
+### Example: Custom Styling
+
+
+
+```dart
+CometChatMessageList(
+ user: user,
+ style: CometChatMessageListStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ ),
+ ),
+)
+```
+
+
+
+
+
+
+
+### Example: Custom Avatar Style
+
+
+
+```dart
+CometChatMessageList(
+ user: user,
+ style: CometChatMessageListStyle(
+ avatarStyle: CometChatAvatarStyle(
+ border: Border.all(width: 5),
+ borderRadius: 20,
+ backgroundColor: Colors.red,
+ ),
+ ),
+)
+```
+
+
+
+### Example: Custom Mentions Style
+
+
+
+```dart
+CometChatMessageList(
+ user: user,
+ textFormatters: [
+ CometChatMentionsFormatter(
+ style: CometChatMentionsStyle(
+ mentionSelfTextBackgroundColor: Color(0xFFF76808),
+ mentionTextBackgroundColor: Colors.white,
+ mentionTextColor: Colors.black,
+ mentionSelfTextColor: Colors.white,
+ ),
+ ),
+ ],
+)
+```
+
+
+
+
+
+
+
+## Advanced
+
+### Message Templates
+
+[CometChatMessageTemplate](/ui-kit/flutter/v5/message-template) is a pre-defined structure for creating message views that can be used as a starting point or blueprint for creating message bubbles.
+
+
+
+```dart
+List getTemplate() {
+ // Creating a text template
+ CometChatMessageTemplate textTemplate = ChatConfigurator.getDataSource().getTextMessageTemplate();
+ textTemplate.contentView = (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment, {AdditionalConfigurations? additionalConfigurations}) {
+ return Padding(
+ padding: const EdgeInsets.all(8.0),
+ child: Text(
+ (baseMessage as TextMessage).text,
+ style: TextStyle(
+ color: alignment == BubbleAlignment.left ? Colors.deepPurple : Colors.yellow,
+ fontSize: 14,
+ fontWeight: FontWeight.bold,
+ ),
+ ),
+ );
+ };
+
+ // Creating a custom message template
+ CometChatMessageTemplate customMessageTemplate = CometChatMessageTemplate(
+ type: 'custom_template',
+ category: 'custom_category',
+ bubbleView: (message, context, alignment) => const Text('Custom message'),
+ );
+
+ return [textTemplate, customMessageTemplate];
+}
+
+// Usage
+CometChatMessageList(
+ user: user,
+ templates: getTemplate(),
+)
+```
+
+
+
+
+
+
+
+
+
+
+
+
+### Date Separator Pattern
+
+Customize the date separator pattern:
+
+
+
+```dart
+CometChatMessageList(
+ user: user,
+ dateSeparatorPattern: (DateTime dateTime) {
+ return DateFormat("dd/MM/yyyy").format(dateTime);
+ },
+)
+```
+
+
+
+
+
+
+
+
+
+
+
+
+### Date Pattern
+
+Customize the date pattern for message receipts:
+
+
+
+```dart
+CometChatMessageList(
+ user: user,
+ datePattern: (message) {
+ return DateFormat('EEE, M/d/y').format(message.sentAt!);
+ },
+)
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Props Reference
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `user` | `User?` | `null` | User object for user message list |
+| `group` | `Group?` | `null` | Group object for group message list |
+| `messagesRequestBuilder` | `MessagesRequestBuilder?` | `null` | Custom request builder for filtering |
+| `style` | `CometChatMessageListStyle?` | - | Sets style for message list |
+| `scrollController` | `ScrollController?` | - | Controller for the message list |
+| `emptyStateText` | `String?` | - | Text when list is empty |
+| `errorStateText` | `String?` | - | Text when error occurs |
+| `loadingStateView` | `WidgetBuilder?` | - | View for loading state |
+| `emptyStateView` | `WidgetBuilder?` | - | View for empty state |
+| `errorStateView` | `WidgetBuilder?` | - | View for error state |
+| `disableSoundForMessages` | `bool?` | `null` | Disables sound for messages |
+| `customSoundForMessages` | `String?` | `null` | Custom sound URL |
+| `readIcon` | `Widget?` | - | Custom read icon |
+| `deliveredIcon` | `Widget?` | - | Custom delivered icon |
+| `sentIcon` | `Widget?` | - | Custom sent icon |
+| `waitIcon` | `Widget?` | - | Custom wait icon |
+| `alignment` | `ChatAlignment` | `standard` | Chat alignment setting |
+| `avatarVisibility` | `bool?` | `true` | Toggle avatar visibility |
+| `datePattern` | `String Function(BaseMessage)?` | - | Custom date pattern |
+| `hideTimestamp` | `bool?` | `null` | Toggle timestamp visibility |
+| `templates` | `List?` | - | Message templates |
+| `onThreadRepliesClick` | `ThreadRepliesClick?` | - | Thread replies callback |
+| `headerView` | `Widget? Function(...)?` | - | Custom header view |
+| `footerView` | `Widget? Function(...)?` | - | Custom footer view |
+| `dateSeparatorPattern` | `String Function(DateTime)?` | - | Date separator pattern |
+| `onError` | `OnError?` | - | Error callback |
+| `receiptsVisibility` | `bool?` | `true` | Toggle read receipts |
+| `dateSeparatorStyle` | `CometChatDateStyle?` | - | Date separator style |
+| `disableReactions` | `bool?` | `false` | Toggle reactions |
+| `addReactionIcon` | `Widget?` | - | Custom add reaction icon |
+| `favoriteReactions` | `List?` | - | Frequently used reactions |
+| `textFormatters` | `List?` | - | Text formatters |
+| `disableMentions` | `bool?` | `null` | Disable mentions |
+| `padding` | `EdgeInsetsGeometry?` | - | Padding for message list |
+| `margin` | `EdgeInsetsGeometry?` | - | Margin for message list |
+| `width` | `double?` | - | Width of message list |
+| `height` | `double?` | - | Height of message list |
+| `onLoad` | `OnLoad?` | - | Load callback |
+| `onEmpty` | `OnEmpty?` | - | Empty callback |
+| `onReactionClick` | `Function(String?, BaseMessage)?` | - | Reaction click callback |
+| `onReactionLongPress` | `Function(String?, BaseMessage)?` | - | Reaction long press callback |
+| `hideStickyDate` | `bool?` | `false` | Hide sticky date |
+| `hideReplyInThreadOption` | `bool?` | `false` | Hide reply in thread option |
+| `hideTranslateMessageOption` | `bool?` | `false` | Hide translate option |
+| `hideEditMessageOption` | `bool?` | `false` | Hide edit option |
+| `hideDeleteMessageOption` | `bool?` | `false` | Hide delete option |
+| `hideReactionOption` | `bool?` | `false` | Hide reaction option |
+| `hideMessagePrivatelyOption` | `bool?` | `false` | Hide message privately option |
+| `hideCopyMessageOption` | `bool?` | `false` | Hide copy option |
+| `hideMessageInfoOption` | `bool?` | `false` | Hide message info option |
+| `hideGroupActionMessages` | `bool?` | `false` | Hide group action messages |
+| `enableConversationStarters` | `bool?` | `false` | Enable conversation starters |
+| `enableSmartReplies` | `bool?` | `false` | Enable smart replies |
+| `hideShareMessageOption` | `bool?` | `false` | Hide share option |
+| `smartRepliesDelayDuration` | `int?` | `10000` | Smart replies delay (ms) |
+| `smartRepliesKeywords` | `List?` | - | Smart replies keywords |
+| `addTemplate` | `List?` | - | Add custom templates |
+| `dateTimeFormatterCallback` | `DateTimeFormatterCallback?` | - | Date time formatter |
+| `hideModerationView` | `bool?` | `null` | Hide moderation view |
+| `hideThreadView` | `bool?` | `null` | Hide thread view |
+| `suggestedMessages` | `List?` | - | AI assistant suggestions |
+| `hideSuggestedMessages` | `bool?` | `false` | Hide suggested messages |
+| `emptyChatGreetingView` | `WidgetBuilder?` | - | Empty chat greeting view |
+| `setAiAssistantTools` | `Map?` | - | AI assistant tools |
+| `streamingSpeed` | `int?` | - | AI streaming speed |
+| `hideDateSeparator` | `bool?` | `false` | Hide date separator |
+| `mentionAllLabel` | `String?` | - | Group mention label |
+| `mentionAllLabelId` | `String?` | - | Group mention label ID |
+| `hideFlagOption` | `bool?` | `false` | Hide report option |
+| `hideFlagRemarkField` | `bool?` | `false` | Hide flag remark field |
+| `startFromUnreadMessages` | `bool?` | `false` | Start from unread messages |
+| `showMarkAsUnreadOption` | `bool?` | `false` | Show mark as unread option |
+| `newMessageIndicatorView` | `WidgetBuilder?` | - | New message indicator view |
+| `enableConversationSummary` | `bool?` | `false` | Enable conversation summary |
+| `generateConversationSummary` | `bool?` | `false` | Generate conversation summary |
+| `hideReplyOption` | `bool?` | `false` | Hide reply option |
+| `flagReasonLocalizer` | `String Function(String)?` | - | Flag reason localizer |
+| `reactionsRequestBuilder` | `ReactionsRequestBuilder?` | - | Request builder for reactions |
+| `stateCallBack` | `Function(CometChatMessageListController)?` | - | Callback to access controller |
+| `customSoundForMessagePackage` | `String?` | - | Package name for custom sound |
+| `messageId` | `int?` | - | Specific message ID to scroll to |
+
+
+
+ Display user or group details in the header
+
+
+ Compose and send messages
+
+
+ Customize message bubble templates
+
+
+ Learn how to customize the look and feel
+
+
diff --git a/ui-kit/flutter/v5/message-template.mdx b/ui-kit/flutter/v5/message-template.mdx
new file mode 100644
index 000000000..7f3ea09fa
--- /dev/null
+++ b/ui-kit/flutter/v5/message-template.mdx
@@ -0,0 +1,864 @@
+---
+title: "Message Template"
+description: "Data structure defining how message bubbles render in CometChatMessageList — controls header, content, footer, bottom, status info, reply, and bubble views per message type and category."
+---
+
+
+```json
+{
+ "component": "CometChatMessageTemplate",
+ "kind": "model-class",
+ "package": "cometchat_chat_uikit",
+ "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
+ "description": "Data structure defining how message bubbles render in CometChatMessageList. Each template maps a type+category pair to view functions.",
+ "usage": "Pass a list of CometChatMessageTemplate instances to CometChatMessageList via the templates property.",
+ "properties": {
+ "type": { "type": "String", "required": true, "description": "CometChat message type" },
+ "category": { "type": "String", "default": "\"\"", "description": "CometChat message category" },
+ "headerView": { "type": "Function?", "default": "null", "description": "Custom header view builder function" },
+ "contentView": { "type": "Function?", "default": "null", "description": "Custom content view builder function" },
+ "footerView": { "type": "Function?", "default": "null", "description": "Custom footer view builder function" },
+ "bottomView": { "type": "Function?", "default": "null", "description": "Custom bottom view builder function" },
+ "bubbleView": { "type": "Function?", "default": "null", "description": "Replaces entire bubble" },
+ "statusInfoView": { "type": "Function?", "default": "null", "description": "Custom status info view builder function" },
+ "replyView": { "type": "Function?", "default": "null", "description": "Custom reply preview builder function" },
+ "threadView": { "type": "Function?", "default": "null", "description": "Custom thread view builder function" },
+ "options": { "type": "Function", "description": "Returns action sheet items for long-press" }
+ },
+ "relatedComponents": ["CometChatMessageList"],
+ "events": null
+}
+```
+
+
+## Overview
+
+A MessageTemplate provides you with the capability to define and customize both the structure and the behavior of the [MessageBubble](/ui-kit/flutter/v5/message-bubble-styling). It acts as a schema or design blueprint for the creation of a variety of [MessageBubble](/ui-kit/flutter/v5/message-bubble-styling) widgets, allowing you to manage the appearance and interactions of [MessageBubble](/ui-kit/flutter/v5/message-bubble-styling) within your application effectively and consistently.
+
+### Structure
+
+
+
+
+
+The MessageBubble structure can typically be broken down into the following widgets:
+
+1. **Leading widget**: This is where the sender's avatar is displayed. It's typically on the left of the MessageBubble for messages from others and on the right for messages from the current user.
+
+2. **Header widget**: This displays the sender's name and is especially useful in group chats where multiple users are sending messages.
+
+3. **Content widget**: This is the core of the MessageBubble where the message content (text, images, videos, etc.) is displayed.
+
+4. **Bottom widget**: This widget can be used to extend the MessageBubble with additional elements, such as link previews or a 'load more' button for long messages. It's typically placed beneath the Content widget.
+
+5. **Footer widget**: This is where the timestamp of the message and its delivery or read status are displayed. It's located at the bottom of the MessageBubble.
+
+### Properties
+
+MessageTemplate provides you with methods that allow you to alter various properties of the MessageBubble. These properties include aspects such as the `type` and `category` of a message, the appearance and behavior of the header, content, and footer sections of the message bubble,
+
+1. **Type**
+
+ Using `type` you can set the type of CometChatMessage, This will map your MessageTemplate to the corresponding CometChatMessage. You can set the MessageTemplate Type using the following code snippet.
+
+
+
+ ```dart
+ CometChatMessageTemplate cometChatMessageTemplate = CometChatMessageTemplate(type: MessageTypeConstants.text);
+ ```
+
+
+
+
+
+2. **Category**
+
+ Using `category` you can set the category of a MessageTemplate. This will create a MessageTemplate with the specified category and link it with a CometChatMessage of the same category.
+
+ Please refer to our guide on [Message Categories](/sdk/flutter/message-structure-and-hierarchy) for a deeper understanding of message categories.
+
+
+
+ ```dart
+ CometChatMessageTemplate cometChatMessageTemplate = CometChatMessageTemplate(category: MessageCategoryConstants.custom);
+ ```
+
+
+
+
+
+3. **Header Widget**
+
+ The. `headerView` property allows you to assign a custom header widget to the MessageBubble. By default, it is configured to display the sender's name.
+
+
+
+ ```dart
+ cometChatMessageTemplate.headerView = (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment) {
+ return const Placeholder();
+ };
+ ```
+
+
+
+
+
+4. **Content Widget**
+
+ The `contentView` method allows you to assign a custom content widget to the MessageBubble. By default, it displays the [Text Bubble](/ui-kit/flutter/v5/message-bubble-styling#text-bubble), [Image Bubble](/ui-kit/flutter/v5/message-bubble-styling#image-bubble), [File Bubble](/ui-kit/flutter/v5/message-bubble-styling#file-bubble), [Audio Bubble](/ui-kit/flutter/v5/message-bubble-styling#audio-bubble), or [Video Bubble](/ui-kit/flutter/v5/message-bubble-styling#video-bubble), depending on the message type.
+
+
+
+ ```dart
+ cometChatMessageTemplate.contentView = (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment, {AdditionalConfigurations? additionalConfigurations}) {
+ return const Placeholder();
+ };
+ ```
+
+
+
+
+
+5. **Footer Widget**
+
+ The `footerView` property allows you to assign a custom Footer widget to the MessageBubble. By default, it displays the receipt and timestamp.
+
+
+
+ ```dart
+ cometChatMessageTemplate.footerView = (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment) {
+ return const Placeholder();
+ };
+ ```
+
+
+
+
+
+6. **Bottom Widget**
+
+ The `bottomView` property allows you to assign a custom Bottom widget to the MessageBubble.By defuault is has buttons such as link previews or a 'load more' button for long messages.
+
+
+
+ ```dart
+ cometChatMessageTemplate.bottomView = (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment) {
+ return const Placeholder();
+ };
+ ```
+
+
+
+
+
+7. **Bubble Widget**
+
+ The `bubbleView` property allows you to assign a custom Bubble widget to the MessageBubble. By default, headerView, contentView, and footerView together form a message bubble.
+
+
+
+ ```dart
+ cometChatMessageTemplate.bubbleView = (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment) {
+ return const Placeholder();
+ };
+ ```
+
+
+
+
+
+8. **Options**
+
+ The `options` lets you set the list of actions that a user can perform on a message. This includes actions like reacting to, editing, or deleting a message.
+
+
+
+ ```dart
+ cometChatMessageTemplate.options = (User loggedInUser, BaseMessage messageObject, BuildContext context, Group? group) {
+ return [];
+ };
+ ```
+
+
+
+
+
+9. **Status Info Widget**
+
+ The `statusInfoView` property allows you to assign a custom status info widget to the MessageBubble. By default, it displays the timestamp and read receipt under the content view.
+
+
+
+ ```dart
+ cometChatMessageTemplate.statusInfoView = (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment) {
+ return const Placeholder();
+ };
+ ```
+
+
+
+
+
+10. **Thread Widget**
+
+ The `threadView` property allows you to assign a custom thread widget to the MessageBubble. This is displayed at the bottom of the bubble for threaded messages.
+
+
+
+ ```dart
+ cometChatMessageTemplate.threadView = (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment) {
+ return const Placeholder();
+ };
+ ```
+
+
+
+
+
+11. **Reply Widget**
+
+ The `replyView` property allows you to assign a custom reply widget to the MessageBubble. This is displayed at the top of the bubble when replying to a message.
+
+
+
+ ```dart
+ cometChatMessageTemplate.replyView = (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment, {AdditionalConfigurations? additionalConfigurations}) {
+ return const Placeholder();
+ };
+ ```
+
+
+
+
+
+## Customization
+
+Let's dive into how you can use the [properties](#properties) of MessageTemplate to customize an existing template or add a new one to the [MessageList](/ui-kit/flutter/v5/message-list) Widget.
+
+#### Header widget
+
+The `headerView` method of MessageTemplate allows you to add custom widgets to the header of your message bubbles.
+
+Here is the complete example for reference:
+
+
+
+```dart
+ CometChatMessageList(
+ group: group, // Group object
+ templates: [
+ CometChatMessageTemplate(
+ type: MessageTypeConstants.text,
+ // Define the template type
+ category: MessageCategoryConstants.message,
+ // Define the template category
+ headerView: (BaseMessage baseMessage, BuildContext buildContext,
+ BubbleAlignment alignment) {
+ return Text(
+ "${baseMessage.sender?.name}• 🗓️ In meeting",
+ style: TextStyle(
+ color: Color(0xFF6852D6),
+ fontSize: 14.4,
+ fontWeight: FontWeight.w500,
+ letterSpacing: 0),
+ ); // Replace this placeholder Widget with your custom Widget
+ }),
+ ],
+ );
+```
+
+
+
+
+
+
+
+
+
+***
+
+#### Content widget
+
+The `contentView` method of MessageTemplate allows you to add a custom widget to the content of your message bubbles.
+
+Here is the complete example for reference:
+
+
+
+```dart
+ CometChatMessageList(
+ group: group, // Group object
+ templates: [
+ CometChatMessageTemplate(
+ type: "image",
+ category: "message",
+ contentView: (message, context, alignment,
+ {AdditionalConfigurations? additionalConfigurations}) {
+ if (message is! MediaMessage) {
+ return const SizedBox();
+ }
+ return Wrap(
+ direction: Axis.vertical,
+ crossAxisAlignment: WrapCrossAlignment.center,
+ children: [
+ CometChatImageBubble(
+ imageUrl: message.attachment?.fileUrl,
+ metadata: message.metadata,
+ key: UniqueKey(),
+ ),
+ TextButton(
+ onPressed: () {
+ //Navigate to screen with transaction features to purchase the image
+ },
+ child: Text(
+ "Buy Now",
+ style: TextStyle(
+ color: alignment == BubbleAlignment.left
+ ? Color(0xFF6852D6)
+ : Colors.white,
+ fontSize: 14,
+ fontWeight: FontWeight.w500),
+ ),
+ style: TextButton.styleFrom(
+ padding: EdgeInsets.zero,
+ ))
+ ],
+ );
+ })
+ ]);
+```
+
+
+
+
+
+
+
+
+
+***
+
+#### Bottom Widget
+
+The `bottomView` property of MessageTemplate allows you to add a custom button widget to your message bubbles.
+
+Here is the complete example for reference:
+
+
+
+```dart
+CometChatMessageList(
+ group: group, // Group object
+ templates: [
+ CometChatMessageTemplate(
+ type: MessageTypeConstants.text,
+ // Define the template type
+ category: MessageCategoryConstants.message,
+ // Define the template category
+ bottomView: (BaseMessage baseMessage, BuildContext buildContext,
+ BubbleAlignment alignment) {
+ return Container(
+ decoration: BoxDecoration(
+ color: Color(0xFFF44649).withOpacity(.2),
+ borderRadius: BorderRadius.circular(12),
+ ),
+ child: Row(
+ children: [
+ Icon(
+ Icons.warning,
+ color: Color(0xFFF44649),
+ size: 12,
+ ),
+ Text(
+ "According to guidelines you cannot share contact",
+ style: TextStyle(
+ color: Color(0xFFF44649),
+ fontSize: 12,
+ fontWeight: FontWeight.w400,
+ letterSpacing: 0),
+ )
+ ],
+ ),
+ );
+ },
+ ),
+ ],
+ )
+```
+
+
+
+
+
+
+
+
+
+***
+
+#### Footer Widget
+
+The `footerView` property of MessageTemplate allows you to add a footer widget to your message bubbles.
+
+Here is the complete example for reference:
+
+
+
+```dart
+ CometChatMessageList(
+ group: group, // Group object
+ templates: [
+ CometChatMessageTemplate(
+ // Define the template type
+ type: MessageTypeConstants.text,
+ // Define the template category
+ category: MessageCategoryConstants.message,
+ // override the default status info view to hide that date time and read receipt
+ statusInfoView: (baseMessage, context, alignment) {
+ return const SizedBox(height: 11);
+ },
+ // Define the footer view which would show the date time and read receipt
+ footerView: (baseMessage, context, alignment,
+ {additionalConfigurations}) {
+ return _getStatusInfoView(
+ alignment,
+ baseMessage,
+ baseMessage.sender?.uid == CometChatUIKit.loggedInUser?.uid,
+ context);
+ },
+ ),
+ ],
+ );
+```
+
+
+
+
+```dart
+Widget _getStatusInfoView(BubbleAlignment alignment, BaseMessage message,
+ bool showReceipt, BuildContext context) {
+ return Container(
+ padding: EdgeInsets.only(
+ left: 0,
+ top: 0,
+ bottom: 4,
+ ),
+ child: Row(
+ mainAxisAlignment: MainAxisAlignment.end,
+ children: [
+ Container(
+ child: Row(
+ mainAxisAlignment: MainAxisAlignment.end,
+ mainAxisSize: MainAxisSize.min,
+ children: [
+ getTime(message),
+ if (showReceipt)
+ getReceiptIcon(message, CometChatUIKit.loggedInUser),
+ ],
+ ),
+ ),
+ ],
+ ),
+ );
+ }
+
+ Widget getTime(BaseMessage messageObject) {
+ if (messageObject.sentAt == null) {
+ return const SizedBox();
+ }
+
+ DateTime lastMessageTime = messageObject.sentAt!;
+ return CometChatDate(
+ date: lastMessageTime,
+ pattern: DateTimePattern.timeFormat,
+ style: CometChatDateStyle(
+ backgroundColor: Colors.transparent,
+ textStyle: TextStyle(
+ color: Color(0xFF727272),
+ fontSize: 14.4,
+ fontWeight: FontWeight.w400,
+ letterSpacing: 0),
+ border: Border.all(
+ color: Colors.transparent,
+ width: 0,
+ ),
+ ));
+ }
+
+ Widget getReceiptIcon(BaseMessage message, User? loggedInUser) {
+ ReceiptStatus status = MessageReceiptUtils.getReceiptStatus(message);
+
+ return Padding(
+ padding: EdgeInsets.only(right: 8),
+ child: CometChatReceipt(
+ status: status,
+ size: 16,
+ style: CometChatMessageReceiptStyle(
+ deliveredIconColor: Color(0xFF858585),
+ readIconColor: Color(0xFF56E8A7),
+ sentIconColor: Color(0xFF858585),
+ waitIconColor: Color(0xFF858585),
+ ),
+ ));
+ }
+```
+
+
+
+
+
+
+
+
+
+***
+
+#### Bubble Widget
+
+The `bubbleView` property of MessageTemplate allows you to add a bubble widget to your message bubbles.
+
+Here is the complete example for reference:
+
+
+
+```dart
+ CometChatMessageList(
+ user: user, // User object
+ group: group, // Group object
+ templates: [
+ CometChatMessageTemplate(
+ type: "text",
+ category: "message",
+ bubbleView: (baseMessage, context, alignment,
+ {additionalConfigurations}) {
+ return Padding(
+ padding: const EdgeInsets.all(8.0),
+ child: Column(
+ crossAxisAlignment: alignment == BubbleAlignment.right
+ ? CrossAxisAlignment.end
+ : CrossAxisAlignment.start,
+ children: [
+ CustomPaint(
+ size: Size(260, 100),
+ painter: ChatBubblePainter(
+ text: (baseMessage as TextMessage).text,
+ alignment: alignment,
+ color: alignment == BubbleAlignment.right
+ ? Color(0xFF6852D6)
+ : Color(0xFFE8E8E8)),
+ ),
+ _getStatusInfoView(
+ alignment,
+ baseMessage,
+ baseMessage.sender?.uid ==
+ CometChatUIKit.loggedInUser?.uid,
+ context)
+ ],
+ ),
+ );
+ },
+ )
+ ],
+ );
+```
+
+
+
+
+```dart
+class ChatBubblePainter extends CustomPainter {
+ ChatBubblePainter({required this.text, this.color, this.alignment});
+
+ final String text;
+ final Color? color;
+
+ final BubbleAlignment? alignment;
+
+ @override
+ void paint(Canvas canvas, Size size) {
+ Paint paint = Paint()
+ ..color = color ?? Colors.blue
+ ..style = PaintingStyle.fill;
+
+ Path path = Path();
+ path.moveTo(0, 0);
+ path.lineTo(size.width, 0);
+ if (alignment == BubbleAlignment.right) {
+ path.lineTo(size.width, size.height);
+ path.lineTo(size.width * .9, size.height * .8);
+ path.lineTo(0, size.height * .8);
+ } else {
+ path.lineTo(size.width, size.height * .8);
+ path.lineTo(size.width * .1, size.height * .8);
+ path.lineTo(0, size.height);
+ }
+ path.close();
+
+ canvas.drawPath(path, paint);
+
+ var style = TextStyle(
+ color: alignment == BubbleAlignment.right ? Colors.white : Colors.black,
+ fontSize: 20);
+
+ final ParagraphBuilder paragraphBuilder = ParagraphBuilder(ParagraphStyle(
+ fontSize: style.fontSize,
+ fontFamily: style.fontFamily,
+ fontStyle: style.fontStyle,
+ fontWeight: style.fontWeight,
+ textAlign: TextAlign.justify,
+ ))
+ ..pushStyle(style.getTextStyle())
+ ..addText(text);
+ final Paragraph paragraph = paragraphBuilder.build()
+ ..layout(ParagraphConstraints(width: size.width));
+ canvas.drawParagraph(paragraph, Offset(55, 25));
+ }
+
+ @override
+ bool shouldRepaint(covariant CustomPainter oldDelegate) {
+ return oldDelegate != this;
+ }
+}
+```
+
+
+
+
+```dart
+Widget _getStatusInfoView(BubbleAlignment alignment, BaseMessage message,
+ bool showReceipt, BuildContext context) {
+ return Container(
+ padding: EdgeInsets.only(
+ left: 0,
+ top: 0,
+ bottom: 4,
+ ),
+ child: Row(
+ mainAxisAlignment: MainAxisAlignment.end,
+ children: [
+ Container(
+ child: Row(
+ mainAxisAlignment: MainAxisAlignment.end,
+ mainAxisSize: MainAxisSize.min,
+ children: [
+ getTime(message),
+ if (showReceipt)
+ getReceiptIcon(message, CometChatUIKit.loggedInUser),
+ ],
+ ),
+ ),
+ ],
+ ),
+ );
+ }
+
+ Widget getTime(BaseMessage messageObject) {
+ if (messageObject.sentAt == null) {
+ return const SizedBox();
+ }
+
+ DateTime lastMessageTime = messageObject.sentAt!;
+ return CometChatDate(
+ date: lastMessageTime,
+ pattern: DateTimePattern.timeFormat,
+ style: CometChatDateStyle(
+ backgroundColor: Colors.transparent,
+ textStyle: TextStyle(
+ color: Color(0xFF727272),
+ fontSize: 14.4,
+ fontWeight: FontWeight.w400,
+ letterSpacing: 0),
+ border: Border.all(
+ color: Colors.transparent,
+ width: 0,
+ ),
+ ));
+ }
+
+ Widget getReceiptIcon(BaseMessage message, User? loggedInUser) {
+ ReceiptStatus status = MessageReceiptUtils.getReceiptStatus(message);
+
+ return Padding(
+ padding: EdgeInsets.only(right: 8),
+ child: CometChatReceipt(
+ status: status,
+ size: 16,
+ style: CometChatMessageReceiptStyle(
+ deliveredIconColor: Color(0xFF858585),
+ readIconColor: Color(0xFF56E8A7),
+ sentIconColor: Color(0xFF858585),
+ waitIconColor: Color(0xFF858585),
+ ),
+ ));
+ }
+```
+
+
+
+
+
+
+
+
+
+***
+
+#### Options List
+
+The `options` property in the MessageTemplate allows you to customize the options that appear in the action sheet when a message is long-pressed. By default, CometChat UI Kit provides a set of options like "Reply", "Edit", and "Delete".
+
+However, if you wish to override or modify these options, you can use the `options` method and pass a list of `CometChatMessageOption`. This list of options will replace the default set.
+
+Here is the complete example for reference:
+
+
+
+```dart
+CometChatMessageList(
+ group: group, // Group object
+ templates: [
+ CometChatMessageTemplate(
+ type: MessageTypeConstants.text,
+ // Define the template type
+ category: MessageCategoryConstants.message,
+ options: (loggedInUser, messageObject, context, group,
+ additionalConfigurations) {
+ // Retrieve the existing options and add a new option to it
+ final existingOptions = CometChatUIKit.getDataSource()
+ .getTextMessageOptions(loggedInUser, messageObject, context,
+ group, additionalConfigurations); // since we are updating the options for text message, we are using getTextMessageOptions
+ return [
+ CometChatMessageOption(
+ id: "refresh",
+ title: "Refresh",
+ icon: Icon(
+ Icons.refresh,
+ color: Color(0xFF6852D6),
+ size: 24,
+ ),
+ messageOptionSheetStyle: CometChatMessageOptionSheetStyle(
+ titleTextStyle: TextStyle(
+ color: Color(0xFF6852D6),
+ fontSize: 14,
+ fontWeight: FontWeight.w400,
+ letterSpacing: 0),
+ )),
+ ...existingOptions,
+ ];
+ },
+ ),
+ ],
+ )
+```
+
+
+
+
+
+
+
+
+
+***
+
+## New Templates
+
+You can create an entirely new template for custom messages is one of the powerful features of CometChat's MessageTemplate.
+
+Here is the complete example for reference:
+
+
+
+```dart
+ CometChatMessageList(
+ user: user, // User object
+ group: group, // Group object
+ messagesRequestBuilder: MessagesRequestBuilder()
+ ..limit = 30
+ ..types = [
+ ...CometChatUIKit.getDataSource().getAllMessageTypes(),
+ "contact"
+ ] // Add the custom type here
+ ..categories = CometChatUIKit.getDataSource().getAllMessageCategories(),
+ templates: [
+ CometChatMessageTemplate(
+ type: "contact",
+ // Define the template type̵
+ category: MessageCategoryConstants.custom,
+ // Define the template category
+ contentView: (baseMessage, context, alignment,
+ {additionalConfigurations}) {
+ return Padding(
+ padding: const EdgeInsets.fromLTRB(8, 8, 8, 0),
+ child: Row(
+ children: [
+ CircleAvatar(
+ backgroundColor: Color(0xFFEDEAFA),
+ child: Icon(
+ Icons.person,
+ color: Colors.white,
+ ),
+ ),
+ SizedBox(
+ width: 8,
+ ),
+ Text("Safiya Fareena",
+ style: TextStyle(
+ color: alignment == BubbleAlignment.right
+ ? Colors.white
+ : Colors.black,
+ fontSize: 14,
+ ))
+ ],
+ ),
+ );
+ },
+ bottomView: (baseMessage, context, alignment,
+ {additionalConfigurations}) {
+ return DecoratedBox(
+ decoration: BoxDecoration(
+ border: Border(
+ top: BorderSide(color: Color(0xFF7965DB), width: 1))),
+ child: ToggleButtons(
+ children: [
+ Padding(
+ padding: EdgeInsets.fromLTRB(20, 8, 0, 8),
+ child: Text("Add Contact",
+ style: TextStyle(
+ color: alignment == BubbleAlignment.right
+ ? Colors.white
+ : Colors.black,
+ fontSize: 14,
+ fontWeight: FontWeight.w500)),
+ ),
+ VerticalDivider(
+ color: Color(0xFF7965DB),
+ width: 0,
+ ),
+ Padding(
+ padding: EdgeInsets.fromLTRB(0, 8, 20, 8),
+ child: Text("Message",
+ style: TextStyle(
+ color: alignment == BubbleAlignment.right
+ ? Colors.white
+ : Colors.black,
+ fontSize: 14,
+ fontWeight: FontWeight.w500)),
+ )
+ ],
+ isSelected: [false, false, false],
+ renderBorder: false,
+ ),
+ );
+ })
+ ],
+ );
+```
+
+
+
+
+
+
+
+
diff --git a/ui-kit/flutter/v5/methods.mdx b/ui-kit/flutter/v5/methods.mdx
new file mode 100644
index 000000000..0cd6ce2d7
--- /dev/null
+++ b/ui-kit/flutter/v5/methods.mdx
@@ -0,0 +1,697 @@
+---
+title: "Methods"
+description: "Reference for CometChat Flutter UI Kit methods including init, login, logout, and message-sending wrappers."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_chat_uikit` |
+| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` |
+| Init | `CometChatUIKit.init(uiKitSettings: UIKitSettings)` |
+| Login (dev) | `CometChatUIKit.login(uid)` |
+| Login (prod) | `CometChatUIKit.loginWithAuthToken(authToken)` |
+| Other methods | `CometChatUIKit.logout()`, `CometChatUIKit.getLoggedInUser()`, `CometChatUIKit.createUser(user)`, `CometChatUIKit.updateUser(user)` |
+| Send messages | `CometChatUIKit.sendTextMessage()`, `CometChatUIKit.sendMediaMessage()`, `CometChatUIKit.sendCustomMessage()` |
+| Interactive messages | `CometChatUIKit.sendFormMessage()`, `CometChatUIKit.sendCardMessage()`, `CometChatUIKit.sendSchedulerMessage()` |
+| Reactions | `CometChatUIKit.addReaction()`, `CometChatUIKit.removeReaction()` |
+| Note | Use these wrapper methods instead of raw SDK calls — they manage internal UI Kit eventing |
+
+
+
+## Overview
+
+The UI Kit's core function is to extend the [Chat SDK](/sdk/flutter/overview), essentially translating the raw data and functionality provided by the underlying methods into visually appealing and easy-to-use UI components.
+
+To effectively manage and synchronize the UI elements and data across all components in the UI Kit, we utilize internal events. These internal events enable us to keep track of changes in real-time and ensure that the UI reflects the most current state of data.
+
+The CometChat UI Kit has thoughtfully encapsulated the critical [Chat SDK](/sdk/flutter/overview) methods within its wrapper to efficiently manage internal eventing. This layer of abstraction simplifies interaction with the underlying CometChat SDK, making it more user-friendly for developers.
+
+## Methods
+
+You can access the methods using the `CometChatUIKit` class. This class provides access to all the public methods exposed by the CometChat UI Kit.
+
+### Init
+
+As a developer, you need to invoke this method every time before you use any other methods provided by the UI Kit.
+
+This initialization is a critical step that ensures the UI Kit and Chat SDK function correctly and as intended in your application. Typical practice is to make this one of the first lines of code executed in your application's lifecycle when it comes to implementing CometChat.
+
+
+`CometChatUIKit.init()` must be called before rendering any UI Kit components or calling any SDK methods. Initialization must complete before login.
+
+
+
+Auth Key is for development/testing only. In production, generate Auth Tokens on the server using the REST API and pass them to the client via `loginWithAuthToken()`. Never expose Auth Keys in production client code.
+
+
+
+Make sure you replace the **APP\_ID**, **REGION** and **AUTH\_KEY** with your CometChat App ID, Region and Auth Key in the below code. The `Auth Key` is an optional property of the `UIKitSettings` Class. It is intended for use primarily during proof-of-concept (POC) development or in the early stages of application development. You can use the [Auth Token](#login-using-auth-token) to log in securely.
+
+
+As a developer, the `UIKitSettings` is an important parameter of the `init()` function. It functions as a base settings object, housing properties such as `appId`, `region`, and `authKey`, contained within `UIKitSettings`.
+
+Here's the table format for the properties available in `UIKitSettings`:
+
+| Method | Type | Description |
+| --------------------------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| **appId** | `String` | Sets the unique ID for the app, available on dashboard |
+| **region** | `String` | Sets the region for the app ('us' or 'eu' or 'in') |
+| **authKey** | `String` | Sets the auth key for the app, available on dashboard |
+| **subscriptionType** | `String` | Sets subscription type for tracking the presence of all users |
+| **roles** | `String` | Sets subscription type for tracking the presence of users with specified roles |
+| **autoEstablishSocketConnection** | `Boolean` | Configures if web socket connections will established automatically on app initialization or be done manually, set to true by default |
+| **aiFeature** | `List` | Sets the AI Features that need to be added in UI Kit |
+| **extensions** | `List` | Sets the list of extension that need to be added in UI Kit |
+| **callingExtension** | `ExtensionsDataSource` | Sets the calling extension configuration |
+| **adminHost** | `String` | Sets a custom admin host URL |
+| **clientHost** | `String` | Sets a custom client host URL |
+| **dateTimeFormatterCallback** | `DateTimeFormatterCallback` | Sets a custom date/time formatter for consistent formatting across all UI components |
+
+***
+
+The concluding code block:
+
+
+
+```dart highlight={3-5}
+UIKitSettings uiKitSettings = (UIKitSettingsBuilder()
+ ..subscriptionType = CometChatSubscriptionType.allUsers
+ ..autoEstablishSocketConnection = true
+ ..region = "your_region" // Replace with your region
+ ..appId = "your_appID" // Replace with your app Id
+ ..authKey = "your_authKey" // Replace with your app auth key
+).build();
+
+CometChatUIKit.init(
+ uiKitSettings: uiKitSettings,
+ onSuccess: (successMessage) async {
+ // Initialization successful, proceed to login
+ },
+ onError: (error) {
+ // Handle initialization error
+ },
+);
+```
+
+
+
+
+
+***
+
+### Login using Auth Key
+
+Only the `UID` of a user is needed to log in. This simple authentication procedure is useful when you are creating a POC or if you are in the development phase. For production apps, we suggest you use [AuthToken](#login-using-auth-token) instead of Auth Key.
+
+
+
+```dart highlight={1}
+String uid = "user1";
+
+CometChatUIKit.login(
+ uid,
+ onSuccess: (user) {
+ // Login successful, mount your app
+ },
+ onError: (e) {
+ // Handle login error
+ },
+);
+```
+
+
+
+
+
+***
+
+### Login using Auth Token
+
+Production-safe authentication that does not expose the Auth Key in client code.
+
+1. [Create a User](/rest-api/chat-apis) via the CometChat API when the user signs up in your app.
+
+2. [Create an Auth Token](/rest-api/chat-apis) via the CometChat API for the new user and save the token in your database.
+
+3. Load the Auth Token in your client and pass it to the `loginWithAuthToken()` method.
+
+
+
+```dart highlight={1}
+String authToken = "AUTH_TOKEN";
+
+CometChatUIKit.loginWithAuthToken(
+ authToken,
+ onSuccess: (user) {
+ // Login successful, mount your app
+ },
+ onError: (e) {
+ // Handle login error
+ },
+);
+```
+
+
+
+
+
+***
+
+### Logout
+
+The CometChat UI Kit and Chat SDK effectively handle the session of the logged-in user within the framework. Before a new user logs in, it is crucial to clean this data to avoid potential conflicts or unexpected behavior. This can be achieved by invoking the `.logout()` function
+
+
+
+```dart
+CometChatUIKit.logout(onSuccess: (s) {
+ // TODO("Not yet implemented")
+} , onError: (e) {
+ // TODO("Not yet implemented")
+});
+```
+
+
+
+
+
+***
+
+### Create User
+
+As a developer, you can dynamically create users on CometChat using the `.createUser()` function. This can be extremely useful for situations where users are registered or authenticated by your system and then need to be created on CometChat.
+
+
+
+```dart
+CometChatUIKit.createUser(userObject, onSuccess: (user) {
+ // TODO("Not yet implemented")
+}, onError: (e) {
+ // TODO("Not yet implemented")
+});
+```
+
+
+
+
+
+***
+
+### Update User
+
+As a developer, you can update user details using the `.updateUser()` function. This should ideally be achieved at your backend using the Restful APIs, but can also be done client-side when needed.
+
+
+
+```dart
+CometChatUIKit.updateUser(userObject, onSuccess: (user) {
+ // TODO("Not yet implemented")
+}, onError: (e) {
+ // TODO("Not yet implemented")
+});
+```
+
+
+
+
+
+***
+
+### Get Logged In User
+
+You can check if there is any existing session in the SDK and retrieve the details of the logged-in user using the `.getLoggedInUser()` function.
+
+
+
+```dart
+CometChatUIKit.getLoggedInUser(onSuccess: (user) {
+ // TODO("Not yet implemented")
+}, onError: (e) {
+ // TODO("Not yet implemented")
+});
+```
+
+
+
+
+
+***
+
+### DateFormatter
+
+By providing a custom implementation of the DateTimeFormatterCallback, you can globally configure how time and date values are displayed across all UI components in the CometChat UI Kit. This ensures consistent formatting for labels such as "Today", "Yesterday", "X minutes ago", and more, throughout the entire application.
+
+Each method in the interface corresponds to a specific case:
+
+* time(int? timestamp) → Custom full timestamp format
+* today(int? timestamp) → Called when a message is from today
+* yesterday(int? timestamp) → Called for yesterday’s messages
+* lastWeek(int? timestamp) → Messages from the past week
+* otherDays(int? timestamp) → Older messages
+* minute(int? timestamp) / hour(int? timestamp) → Exact time unit
+* minutes(int? diffInMinutesFromNow, int? timestamp) → e.g., "5 minutes ago"
+* hours(int? diffInHourFromNow, int? timestamp) → e.g., "2 hours ago"
+
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:intl/intl.dart';
+
+/// Custom implementation of DateTimeFormatterCallback
+/// to format time and date display in the CometChat UI.
+class DateFormatter extends DateTimeFormatterCallback {
+ /// Formatter for displaying full time like "10:45 PM"
+ final DateFormat fullTimeFormatter = DateFormat('hh:mm a');
+
+ /// Formatter for displaying date like "23 Jun 2025"
+ final DateFormat dateFormatter = DateFormat('dd MMM yyyy');
+
+ /// Returns formatted time (e.g., "10:45 PM") for a given timestamp.
+ @override
+ String? time(int? timestamp) {
+ if (timestamp == null) return null;
+ return fullTimeFormatter.format(DateTime.fromMillisecondsSinceEpoch(timestamp));
+ }
+
+ /// Returns a static label for messages sent today.
+ @override
+ String? today(int? timestamp) {
+ return "Today";
+ }
+
+ /// Returns a static label for messages sent yesterday.
+ @override
+ String? yesterday(int? timestamp) {
+ return "Yesterday";
+ }
+
+ /// Returns a static label for messages sent last week.
+ @override
+ String? lastWeek(int? timestamp) {
+ return "Last Week";
+ }
+
+ /// Returns formatted date (e.g., "23 Jun 2025") for other days.
+ @override
+ String? otherDays(int? timestamp) {
+ if (timestamp == null) return null;
+ return dateFormatter.format(DateTime.fromMillisecondsSinceEpoch(timestamp));
+ }
+
+ /// Returns relative time in minutes (e.g., "5 mins ago").
+ @override
+ String? minutes(int? diffInMinutesFromNow, int? timestamp) {
+ if (diffInMinutesFromNow == null) return null;
+ return "$diffInMinutesFromNow mins ago";
+ }
+
+ /// Returns relative time in hours (e.g., "2 hrs ago").
+ @override
+ String? hours(int? diffInHourFromNow, int? timestamp) {
+ if (diffInHourFromNow == null) return null;
+ return "$diffInHourFromNow hrs ago";
+ }
+
+ /// (Optional) Returns formatted hour (e.g., "3 PM") if used by SDK.
+ @override
+ String? hour(int? timestamp) {
+ if (timestamp == null) return null;
+ return DateFormat('h a').format(DateTime.fromMillisecondsSinceEpoch(timestamp));
+ }
+
+ /// (Optional) Returns formatted minute value (e.g., "09") if used by SDK.
+ @override
+ String? minute(int? timestamp) {
+ if (timestamp == null) return null;
+ return DateFormat('mm').format(DateTime.fromMillisecondsSinceEpoch(timestamp));
+ }
+}
+
+// Build CometChat UIKit settings
+UIKitSettings uiKitSettings = (UIKitSettingsBuilder()
+ // Set subscription type (e.g., receive messages from all users)
+ ..subscriptionType = CometChatSubscriptionType.allUsers
+
+ // Set your CometChat region
+ ..region = AppCredentials.region
+
+ // Automatically connect to socket server
+ ..autoEstablishSocketConnection = true
+
+ // CometChat App ID and Auth Key
+ ..appId = AppCredentials.appId
+ ..authKey = AppCredentials.authKey
+
+ // Enable calling feature
+ ..callingExtension = CometChatCallingExtension()
+
+ // Load default chat extensions (e.g., polls, stickers, reactions)
+ ..extensions = CometChatUIKitChatExtensions.getDefaultExtensions()
+
+ // Load default AI features (e.g., Smart Replies, Sentiment Analysis)
+ ..aiFeature = CometChatUIKitChatAIFeatures.getDefaultAiFeatures()
+
+ // Inject the custom date and time formatter
+ ..dateTimeFormatterCallback = DateFormatter()
+ )
+ .build();
+
+// Initialize CometChat UIKit with the configured settings
+CometChatUIKit.init(
+ uiKitSettings: uiKitSettings,
+
+ // Callback when initialization is successful
+ onSuccess: (successMessage) async {
+ // On success
+ },
+
+ // Callback when initialization fails
+ onError: (e) {
+ shouldGoToHomeScreen.value = false;
+ if (kDebugMode) {
+ debugPrint("Initialization failed with error: ${e.details}");
+ }
+ },
+);
+
+
+```
+
+
+
+
+
+***
+
+### Base Message
+
+#### Text Message
+
+Sends a text message in a 1:1 or group chat. Takes a `TextMessage` object.
+
+
+
+```dart highlight={1-2}
+String receiverID = "UID";
+String messageText = "Hello world!";
+
+TextMessage textMessage = TextMessage(
+ text: messageText,
+ receiverUid: receiverID,
+ receiverType: ReceiverType.user,
+);
+
+CometChatUIKit.sendTextMessage(
+ textMessage,
+ onSuccess: (message) {
+ // Message sent successfully
+ },
+ onError: (e) {
+ // Handle error
+ },
+);
+```
+
+
+
+
+```dart highlight={1-2}
+String receiverID = "GUID";
+String messageText = "Hello world!";
+
+TextMessage textMessage = TextMessage(
+ text: messageText,
+ receiverUid: receiverID,
+ receiverType: ReceiverType.group,
+);
+
+CometChatUIKit.sendTextMessage(
+ textMessage,
+ onSuccess: (message) {
+ // Message sent successfully
+ },
+ onError: (e) {
+ // Handle error
+ },
+);
+```
+
+
+
+
+
+***
+
+#### Media Message
+
+Sends a media message in a 1:1 or group chat. Takes a `MediaMessage` object.
+
+
+
+```dart highlight={1-2}
+String receiverID = "UID";
+String filePath = "/path/to/file";
+
+MediaMessage mediaMessage = MediaMessage(
+ receiverUid: receiverID,
+ receiverType: ReceiverType.user,
+ type: MessageType.file,
+ file: filePath,
+);
+
+CometChatUIKit.sendMediaMessage(
+ mediaMessage,
+ onSuccess: (message) {
+ // Media message sent successfully
+ },
+ onError: (e) {
+ // Handle error
+ },
+);
+```
+
+
+
+
+```dart highlight={1-2}
+String receiverID = "GUID";
+String filePath = "/path/to/file";
+
+MediaMessage mediaMessage = MediaMessage(
+ receiverUid: receiverID,
+ receiverType: ReceiverType.group,
+ type: MessageType.file,
+ file: filePath,
+);
+
+CometChatUIKit.sendMediaMessage(
+ mediaMessage,
+ onSuccess: (message) {
+ // Media message sent successfully
+ },
+ onError: (e) {
+ // Handle error
+ },
+);
+```
+
+
+
+
+
+***
+
+#### Custom Message
+
+Sends a custom message (neither text nor media) in a 1:1 or group chat. Takes a `CustomMessage` object.
+
+
+
+```dart highlight={1,3-4}
+String receiverID = "UID";
+Map customData = {
+ "latitude": "50.6192171633316",
+ "longitude": "-72.68182268750002",
+};
+String customType = "location";
+
+CustomMessage customMessage = CustomMessage(
+ receiverUid: receiverID,
+ receiverType: ReceiverType.user,
+ type: customType,
+ customData: customData,
+);
+
+CometChatUIKit.sendCustomMessage(
+ customMessage,
+ onSuccess: (message) {
+ // Custom message sent successfully
+ },
+ onError: (e) {
+ // Handle error
+ },
+);
+```
+
+
+
+
+```dart highlight={1,3-4}
+String receiverID = "GUID";
+Map customData = {
+ "latitude": "50.6192171633316",
+ "longitude": "-72.68182268750002",
+};
+String customType = "location";
+
+CustomMessage customMessage = CustomMessage(
+ receiverUid: receiverID,
+ receiverType: ReceiverType.group,
+ type: customType,
+ customData: customData,
+);
+
+CometChatUIKit.sendCustomMessage(
+ customMessage,
+ onSuccess: (message) {
+ // Custom message sent successfully
+ },
+ onError: (e) {
+ // Handle error
+ },
+);
+```
+
+
+
+
+
+***
+
+### Interactive Message
+
+#### Form Message
+
+As a developer, if you need to send a Form message to a single user or a group, you'll need to utilize the `sendFormMessage()` function. This function requires a `FormMessage` object as its argument, which contains the necessary information to create a form bubble for that messages
+
+
+
+```dart
+CometChatUIKit.sendFormMessage(formMessageObject, onSuccess: (p0) {
+ // TODO("Not yet implemented")
+}, onError: (p0) {
+ // TODO("Not yet implemented")
+});
+```
+
+
+
+
+
+***
+
+#### Card Message
+
+As a developer, if you need to send a Card message to a single user or a group, you'll need to utilize the `sendCardMessage()` function. This function requires a `CardMessage` object as its argument, which contains the necessary information to create a card bubble for the messages
+
+
+
+```dart
+CometChatUIKit.sendCardMessage(cardMessageObject, onSuccess: (p0) {
+ // TODO("Not yet implemented")
+}, onError: (p0) {
+ // TODO("Not yet implemented")
+});
+```
+
+
+
+
+
+***
+
+#### Scheduler Message
+
+As a developer, if you need to send a Scheduler message to a single user or a group, you'll need to utilize the `sendSchedulerMessage()` function. This function requires a `SchedulerMessage` object as its argument, which contains the necessary information to create a SchedulerMessage bubble for the messages
+
+
+
+```dart
+CometChatUIKit.sendSchedulerMessage(schedulerMessageObject, onSuccess: (p0) {
+ // TODO("Not yet implemented")
+}, onError: (p0) {
+ // TODO("Not yet implemented")
+});
+```
+
+
+
+
+
+***
+
+#### Custom Interactive Message
+
+As a developer, if you need to send a Interactive message to a single user or a group, you'll need to utilize the `sendCustomInteractiveMessage()` function. This function requires a `InteractiveMessage` object as its argument, which contains the necessary information to create a custom interactive message bubble for the messages
+
+
+
+```dart
+CometChatUIKit.sendCustomInteractiveMessage(interactiveMessageObject, onSuccess: (p0) {
+ // TODO("Not yet implemented")
+}, onError: (p0) {
+ // TODO("Not yet implemented")
+});
+```
+
+
+
+
+
+***
+
+### Reactions
+
+#### Add Reaction
+
+As a developer, you can add a reaction to a message using the `addReaction()` function. This will update the UI of `CometChatMessageList` and `CometChatReactions` accordingly.
+
+
+
+```dart
+CometChatUIKit.addReaction(messageId, "👍", onSuccess: (message) {
+ // TODO("Not yet implemented")
+}, onError: (e) {
+ // TODO("Not yet implemented")
+});
+```
+
+
+
+
+
+***
+
+#### Remove Reaction
+
+As a developer, you can remove a reaction from a message using the `removeReaction()` function. This will update the UI of `CometChatMessageList` and `CometChatReactions` accordingly.
+
+
+
+```dart
+CometChatUIKit.removeReaction(messageId, "👍", onSuccess: (message) {
+ // TODO("Not yet implemented")
+}, onError: (e) {
+ // TODO("Not yet implemented")
+});
+```
+
+
+
+
+
+***
diff --git a/ui-kit/flutter/v5/multi-tab-chat-ui-guide.mdx b/ui-kit/flutter/v5/multi-tab-chat-ui-guide.mdx
new file mode 100644
index 000000000..24f03ebfa
--- /dev/null
+++ b/ui-kit/flutter/v5/multi-tab-chat-ui-guide.mdx
@@ -0,0 +1,120 @@
+---
+title: "Multi Tab Chat UI Guide"
+description: "Multi Tab Chat UI Guide — CometChat integration guide."
+---
+
+This guide will help you create a multi-tab chat user interface using the cometchat\_chat\_uikit package in Flutter. The final UI will consist of three tabs: Conversations, Users, and Groups.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+##### Create the Multi-Tab Chat UI:
+
+Update your `lib/multi_tab_chat_ui_guid.dart` file with the following code:
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:flutter/material.dart';
+
+class MultiTabUIGuideExample extends StatefulWidget {
+ const MultiTabUIGuideExample({super.key});
+
+ @override
+ State createState() => _MultiTabUIGuideExampleState();
+}
+
+class _MultiTabUIGuideExampleState extends State {
+
+ @override
+ Widget build(BuildContext context) {
+ return DefaultTabController(
+ length: 3,
+ child: Scaffold(
+ appBar: AppBar(
+ title: const Text('Multi Tab UI Guide'),
+ backgroundColor: Colors.white,
+ leading: null,
+ automaticallyImplyLeading: false,
+ bottom: const TabBar(
+ tabs: [
+ Tab(icon: Icon(Icons.chat), text: 'Conversation'),
+ Tab(icon: Icon(Icons.person), text: 'Users'),
+ Tab(icon: Icon(Icons.group), text: 'Groups'),
+ ],
+ ),
+ ),
+ body: const TabBarView(
+ children: [
+ CometChatConversationsWithMessages(
+ conversationsConfiguration: ConversationsConfiguration(
+ hideAppbar: true
+ )
+ ),
+ CometChatUsersWithMessages(
+ usersConfiguration: UsersConfiguration(
+ hideAppbar: true,
+ hideSearch: true
+ )
+ ),
+ CometChatGroupsWithMessages(
+ groupsConfiguration: GroupsConfiguration(
+ hideAppbar: true,
+ hideSearch: true
+ )
+ ),
+ ],
+ ),
+ ),
+ );
+ }
+}
+```
+
+
+
+
diff --git a/ui-kit/flutter/v5/outgoing-call.mdx b/ui-kit/flutter/v5/outgoing-call.mdx
new file mode 100644
index 000000000..1a73ce2eb
--- /dev/null
+++ b/ui-kit/flutter/v5/outgoing-call.mdx
@@ -0,0 +1,433 @@
+---
+title: "Outgoing Call"
+description: "Widget that serves as a visual representation of a user-initiated call, providing options to control the call experience."
+---
+
+```json
+{
+ "component": "CometChatOutgoingCall",
+ "package": "cometchat_calls_uikit",
+ "import": "import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';",
+ "description": "Widget that serves as a visual representation of a user-initiated call, providing options to control the call experience.",
+ "props": {
+ "data": {
+ "call": { "type": "Call", "required": true },
+ "user": { "type": "User?", "default": "null" }
+ },
+ "callbacks": {
+ "onCancelled": "Function(BuildContext context, Call call)?",
+ "onError": "OnError?"
+ },
+ "viewSlots": {
+ "subtitleView": "Widget? Function(BuildContext context, Call call)?",
+ "avatarView": "Widget? Function(BuildContext context, Call call)?",
+ "titleView": "Widget? Function(BuildContext context, Call call)?",
+ "cancelledView": "Widget? Function(BuildContext context, Call call)?"
+ },
+ "style": {
+ "outgoingCallStyle": "CometChatOutgoingCallStyle?"
+ },
+ "layout": {
+ "height": { "type": "double?", "default": "null" },
+ "width": { "type": "double?", "default": "null" }
+ },
+ "icons": {
+ "declineButtonIcon": "Widget?"
+ },
+ "sound": {
+ "disableSoundForCalls": { "type": "bool?", "default": "false" },
+ "customSoundForCalls": "String?",
+ "customSoundForCallsPackage": "String?"
+ },
+ "configuration": {
+ "callSettingsBuilder": "CallSettingsBuilder?"
+ }
+ }
+}
+```
+
+
+## Overview
+
+The `CometChatOutgoingCall` [Widget](/ui-kit/android/components-overview#components) is a visual representation of a user-initiated call, whether it's a voice or video call. It serves as an interface for managing outgoing calls, providing users with essential options to control the call experience. This Widget typically includes information about the call recipient, call controls for canceling the call, and feedback on the call status, such as indicating when the call is in progress.
+
+
+
+
+
+You can launch `CometChatOutgoingCall` directly using `Navigator.push`, or you can define it as a widget within the `build` method of your `State` class.
+
+##### 1. Using Navigator to Launch `CometChatOutgoingCall`
+
+
+
+```dart
+Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatOutgoingCall(user: user, call: callObject))); // User object and Call object is required to launch the incoming call widget.
+```
+
+
+
+
+
+##### 2. Embedding `CometChatOutgoingCall` as a Widget in the build Method
+
+
+
+```dart
+import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';
+import 'package:flutter/material.dart';
+
+class OutgoingCallExample extends StatefulWidget {
+ const OutgoingCallExample({super.key});
+
+ @override
+ State createState() => _OutgoingCallExampleState();
+}
+
+class _OutgoingCallExampleState extends State {
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: SafeArea(
+ child: CometChatOutgoingCall(
+ user: user, // User Object
+ call: callObject
+ ), // User object and Call object is required to launch the incoming call widget.
+ ),
+ );
+ }
+}
+```
+
+
+
+
+
+***
+
+### Actions
+
+[Actions](/ui-kit/android/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.
+
+##### 1. onCancelled
+
+The `onCancelled` action is typically triggered when the call is ended, carrying out default actions. However, with the following code snippet, you can effortlessly customize or override this default behavior to meet your specific needs.
+
+
+
+```dart
+CometChatOutgoingCall(
+ user: user, // User Object
+ call: callObject, // Call Object
+ onCancelled: (BuildContext context, Call call) {
+ // TODO("Not yet implemented")
+ },
+)
+```
+
+
+
+
+
+***
+
+##### 2. onError
+
+You can customize this behavior by using the provided code snippet to override the `onError` and improve error handling.
+
+
+
+```dart
+CometChatOutgoingCall(
+ user: user, // User Object
+ call: callObject, // Call Object
+ onError: (e) {
+ // TODO("Not yet implemented")
+ },
+)
+```
+
+
+
+
+
+***
+
+### Filters
+
+**Filters** allow you to customize the data displayed in a list within a Widget. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK.
+
+The `CometChatOutgoingCall` Widget does not have any exposed filters.
+
+***
+
+### Events
+
+[Events](/ui-kit/android/components-overview#events) are emitted by a `Widget`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.
+
+Events emitted by the Outgoing call Widget are as follows.
+
+| Event | Description |
+| ------------------ | -------------------------------------------- |
+| **ccCallAccepted** | Triggers when the outgoing call is accepted. |
+| **ccCallRejected** | Triggers when the outgoing call is rejected. |
+
+**Example**
+
+Here is the complete example for reference:
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:flutter/material.dart';
+
+class YourScreen extends StatefulWidget {
+ const YourScreen({super.key});
+
+ @override
+ State createState() => _YourScreenState();
+}
+
+class _YourScreenState extends State with CometChatCallEventListener {
+
+ @override
+ void initState() {
+ super.initState();
+ CometChatCallEvents.addCallEventsListener("unique_listener_ID", this); // Add the listener
+ }
+
+ @override
+ void dispose(){
+ super.dispose();
+ CometChatCallEvents.removeCallEventsListener("unique_listener_ID"); // Remove the listener
+ }
+
+ @override
+ void ccCallAccepted(Call call) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccCallRejected(Call call) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return const Placeholder();
+ }
+
+}
+```
+
+
+
+
+
+***
+
+## Customization
+
+To fit your app's design requirements, you can customize the appearance of the conversation widget. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.
+
+### Style
+
+You can customize the appearance of the `CometChatOutgoingCall` Widget by applying the `CometChatOutgoingCallStyle` to it using the following code snippet.
+
+**Example**
+
+Here is the complete example for reference:
+
+
+
+```dart
+CometChatOutgoingCall(
+ user: user, // User Object
+ call: callObject, // Call Object
+ outgoingCallStyle: CometChatOutgoingCallStyle(
+ avatarStyle: CometChatAvatarStyle(
+ backgroundColor: Color(0xFFFBAA75),
+ borderRadius: BorderRadius.circular(8),
+ ),
+ declineButtonColor: Color(0xFFF44649),
+ declineButtonBorderRadius: BorderRadius.circular(12),
+ )
+)
+```
+
+
+
+
+
+
+
+
+
+***
+
+### Functionality
+
+These are a set of small functional customizations that allow you to fine-tune the overall experience of the widget. With these, you can change text, set custom icons, and toggle the visibility of UI elements.
+
+**Example**
+
+In this example, we're enhancing the interface by customizing the decline button icons. By setting custom icons for decline buttons, users can enjoy a more visually appealing and personalized experience.
+
+This level of customization allows developers to tailor the user interface to match the overall theme and branding of their application.
+
+**Example**
+
+Here is the example for reference:
+
+
+
+```dart
+CometChatOutgoingCall(
+ user: user, // User Object
+ call: callObject, // Call Object
+ disableSoundForCalls: true,
+ declineButtonText: "Decline",
+)
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Below is a list of customizations along with corresponding code snippets
+
+| **Property** | Description | Code |
+| ---------------------------------- | --------------------------------------------------------------------------------- | ------------------------------------------- |
+| **Custom Sound For Calls** | Sets the custom sound for outgoing calls. | `customSoundForCalls: String?` |
+| **Custom Sound For Calls Package** | Sets the package for the custom sound for outgoing calls. | `customSoundForCallsPackage: String?` |
+| **Disable Sound For Calls** | Disables sound for outgoing calls. | `disableSoundForCalls: bool?` |
+| **Call** | Used to set the Call object against which we need to display the outgoing screen. | `call: Call` |
+| **callSettingsBuilder** | Sets the CallSettingsBuilder for the outgoing call configuration. | `callSettingsBuilder: CallSettingsBuilder?` |
+| **declineButtonIcon** | Sets decline button icon. | `declineButtonIcon: Widget?` |
+
+***
+
+## Advanced
+
+For advanced-level customization, you can set custom widgets to the widget. This lets you tailor each aspect of the widget to fit your exact needs and application aesthetics. You can create and define your widgets, layouts, and UI elements and then incorporate those into the widget.
+
+***
+
+### titleView
+
+Allows setting a custom title view to be rendered.
+
+Use Cases:
+
+* Display the contact’s name in a unique style.
+* Show a call type indicator (Voice Call, Video Call).
+* Add status text like "Calling..." or "Ringing...".
+
+
+
+```dart
+CometChatOutgoingCall(
+ titleView: (context, call) {
+ // return titleView
+ },
+)
+```
+
+
+
+
+
+***
+
+### subTitleView
+
+Allows setting a custom sub title view.
+
+Use Cases:
+
+* Display call duration if available.
+* Show network strength indicators.
+* Include a custom message like "Connecting...".
+
+
+
+```dart
+CometChatOutgoingCall(
+ subtitleView: (context, call) {
+ // return subtitleView
+ },
+)
+```
+
+
+
+
+
+***
+
+### avatarView
+
+Allows setting a custom avatar view.
+
+Use Cases:
+
+* Show a profile picture with an online indicator.
+* Display a custom icon based on the call type (Voice/Video).
+* Use an animated ring effect around the avatar when calling.
+
+
+
+```dart
+CometChatOutgoingCall(
+ avatarView: (context, call) {
+ // return avatrView
+ },
+)
+```
+
+
+
+
+
+***
+
+### cancelledView
+
+Allows setting a custom cancelled view.
+
+Use Cases:
+
+* Customize the "End Call" button style.
+* Add a confirmation pop-up before ending the call.
+* Display different icons based on call status (Active, On Hold)..
+
+
+
+```dart
+CometChatOutgoingCall(
+ cancelledView: (context, call) {
+ // return cancelledView
+ },
+)
+```
+
+
+
+
+
+***
diff --git a/ui-kit/flutter/v5/overview.mdx b/ui-kit/flutter/v5/overview.mdx
new file mode 100644
index 000000000..88d3f18ad
--- /dev/null
+++ b/ui-kit/flutter/v5/overview.mdx
@@ -0,0 +1,126 @@
+---
+title: "Flutter UI Kit"
+sidebarTitle: "Overview"
+description: "Prebuilt Flutter widgets for chat, voice, and video calling. Works on iOS and Android."
+---
+
+
+🚀 **V6 Available** — The Flutter UI Kit V6 is now available with BLoC state management, clean architecture, and improved performance. [Check out the V6 Overview →](/ui-kit/flutter/overview)
+
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_chat_uikit` v5.2.x |
+| Calling | Optional — `cometchat_calls_uikit` |
+| Platforms | iOS 13.0+, Android API 21+ |
+| Flutter | 3.0+ recommended |
+| Localization | Built-in support |
+| Source | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/chat_uikit) |
+| AI Skills | `npx @cometchat/skills add` — [GitHub](https://github.com/cometchat/cometchat-skills) |
+
+
+
+The CometChat Flutter UI Kit provides prebuilt, customizable widgets for adding chat, voice, and video calling to any Flutter app. Each widget handles its own data fetching, real-time listeners, and state — you just drop them into your layout.
+
+
+
+
+
+---
+
+## Integrate with AI Coding Agents
+
+Use [CometChat Skills](https://github.com/cometchat/cometchat-skills) to add chat to any Flutter project through your AI coding agent. The skill takes an AI-first approach — your agent has a short conversation with you to understand your project and chat requirements, then writes production-grade integration code tailored to the files you already have.
+
+Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and [30+ more agents](https://github.com/cometchat/cometchat-skills).
+
+```bash
+npx @cometchat/skills add
+```
+
+Use `--ide ` to target a specific IDE (e.g. `--ide cursor`), or `--ide all` to install for all supported IDEs.
+
+Then in your IDE:
+
+```
+/cometchat add chat to my app
+```
+
+The skill detects your Flutter project structure, navigation setup, 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 routes, screens, and widgets before proposing a placement (route, modal sheet, or tab), shows the plan (which files it will create, modify, and leave untouched), and waits for your approval before writing code. Credentials are saved as a Dart const file or via `--dart-define`.
+
+After the first integration, re-run `/cometchat` anytime to pick from the iteration menu:
+
+- **Customize look & feel** — theme presets (slack / whatsapp / imessage / discord / notion) or your own brand color
+- **Add a feature** — 40+ features including calls, reactions, polls, AI smart replies, file sharing, presence
+- **Customize a component** — custom message bubbles, headers, composer actions, empty/loading states
+- **Set up production auth** — replace the dev Auth Key with a server-side token endpoint
+- **Set up user management** — server endpoints for creating/updating/deleting CometChat users
+- **Run diagnostics** — verify, drift detection, symptom-to-cause lookup
+
+---
+
+## Try It
+
+
+
+ Clone and run the Flutter sample project
+
+
+
+---
+
+## Get Started
+
+
+
+
+
+
+ Install, initialize, and build your first chat screen
+
+
+---
+
+## Explore
+
+
+
+ Browse all prebuilt UI widgets
+
+
+ Chat, calling, AI, and extensions
+
+
+ Colors, fonts, dark mode, and custom styling
+
+
+ Understand CometChat's core concepts
+
+
+
+---
+
+## Resources
+
+
+
+ Working reference app
+
+
+ Full UI Kit source on GitHub
+
+
+ Design resources and prototyping
+
+
+ Common issues and fixes
+
+
+ Open a support ticket
+
+
+ Upgrading from v4
+
+
diff --git a/ui-kit/flutter/v5/search.mdx b/ui-kit/flutter/v5/search.mdx
new file mode 100644
index 000000000..d4a1adcf5
--- /dev/null
+++ b/ui-kit/flutter/v5/search.mdx
@@ -0,0 +1,495 @@
+---
+title: "Search"
+description: "A powerful search interface for finding conversations and messages in real time"
+---
+
+
+```json
+{
+ "component": "CometChatSearch",
+ "package": "cometchat_chat_uikit",
+ "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
+ "description": "A powerful search interface that allows users to search across conversations and messages in real time with filters and customization options",
+ "primaryOutput": {
+ "prop": "onMessageClicked",
+ "type": "void Function(BaseMessage message)"
+ },
+ "props": {
+ "data": {
+ "user": {
+ "type": "User?",
+ "default": "null",
+ "note": "User object for user message search"
+ },
+ "group": {
+ "type": "Group?",
+ "default": "null",
+ "note": "Group object for group message search"
+ },
+ "searchFilters": {
+ "type": "List?",
+ "default": "null",
+ "note": "List of filters to be shown in the search screen"
+ },
+ "searchIn": {
+ "type": "List?",
+ "default": "null",
+ "note": "List of scopes to be shown in the search result"
+ }
+ },
+ "callbacks": {
+ "onBack": "VoidCallback?",
+ "onConversationClicked": "void Function(Conversation conversation)?",
+ "onMessageClicked": "void Function(BaseMessage message)?",
+ "onError": "OnError?",
+ "onConversationsLoad": "OnLoad?",
+ "onMessagesLoad": "OnLoad?",
+ "onEmpty": "OnEmpty?"
+ },
+ "visibility": {
+ "usersStatusVisibility": {
+ "type": "bool?",
+ "default": "null"
+ },
+ "receiptsVisibility": {
+ "type": "bool?",
+ "default": "null"
+ },
+ "groupTypeVisibility": {
+ "type": "bool?",
+ "default": "null"
+ }
+ },
+ "viewSlots": {
+ "loadingStateView": "WidgetBuilder?",
+ "errorStateView": "WidgetBuilder?",
+ "emptyStateView": "WidgetBuilder?",
+ "initialStateView": "WidgetBuilder?",
+ "conversationItemView": "Widget? Function(BuildContext, Conversation)?",
+ "conversationTitleView": "Widget? Function(BuildContext, Conversation)?",
+ "conversationLeadingView": "Widget? Function(BuildContext, Conversation)?",
+ "conversationSubtitleView": "Widget? Function(BuildContext, Conversation)?",
+ "conversationTailView": "Widget? Function(BuildContext, Conversation)?",
+ "searchTextMessageView": "Widget? Function(BuildContext, TextMessage)?",
+ "searchImageMessageView": "Widget? Function(BuildContext, MediaMessage)?",
+ "searchVideoMessageView": "Widget? Function(BuildContext, MediaMessage)?",
+ "searchFileMessageView": "Widget? Function(BuildContext, MediaMessage)?",
+ "searchAudioMessageView": "Widget? Function(BuildContext, MediaMessage)?",
+ "searchMessageLinkView": "Widget? Function(BuildContext, BaseMessage)?"
+ },
+ "formatting": {
+ "dateSeparatorFormatterCallback": {
+ "type": "DateTimeFormatterCallback?",
+ "default": "null"
+ },
+ "timeSeparatorFormatterCallback": {
+ "type": "DateTimeFormatterCallback?",
+ "default": "null"
+ }
+ }
+ },
+ "events": [],
+ "sdkListeners": [],
+ "compositionExample": {
+ "description": "CometChatSearch can be used standalone or embedded within other screens",
+ "components": ["CometChatConversations", "CometChatMessageList"],
+ "flow": "User searches → Results displayed → User clicks result → Navigate to conversation/message"
+ },
+ "types": {
+ "SearchFilter": {
+ "label": "String",
+ "icon": "Widget?"
+ },
+ "SearchScope": {
+ "conversations": "bool",
+ "messages": "bool"
+ }
+ }
+}
+```
+
+
+## Where It Fits
+
+CometChatSearch is a full-screen search experience that allows users to find messages, conversations, media, and more through an intuitive and filterable search interface. It can be embedded in multiple contexts — as part of the conversation list, message header, or as a standalone full-screen search experience.
+
+
+
+
+
+## Minimal Render
+
+The simplest way to render CometChatSearch:
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:flutter/material.dart';
+
+// Using Navigator to launch CometChatSearch
+Navigator.push(
+ context,
+ MaterialPageRoute(builder: (context) => CometChatSearch())
+);
+```
+
+
+
+You can also embed it as a widget:
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:flutter/material.dart';
+
+class SearchScreen extends StatelessWidget {
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: SafeArea(
+ child: CometChatSearch(),
+ ),
+ );
+ }
+}
+```
+
+
+
+## Filtering
+
+Use the request builder props to filter which items appear in the search results.
+
+### ConversationsRequestBuilder
+
+Filter conversations in the search results:
+
+
+
+```dart
+CometChatSearch(
+ conversationsRequestBuilder: ConversationsRequestBuilder()
+ ..limit = 30,
+)
+```
+
+
+
+### MessagesRequestBuilder
+
+Filter messages in the search results:
+
+
+
+```dart
+CometChatSearch(
+ messagesRequestBuilder: MessagesRequestBuilder()
+ ..limit = 50,
+)
+```
+
+
+
+### Scoped Search
+
+Search within a specific user or group conversation:
+
+
+
+```dart
+// Search within a specific user's conversation
+CometChatSearch(
+ user: user,
+)
+
+// Search within a specific group's conversation
+CometChatSearch(
+ group: group,
+)
+```
+
+
+
+## Actions and Events
+
+### Callback Props
+
+Component-level callbacks that fire on specific user interactions:
+
+| Callback | Signature | Fires When |
+|----------|-----------|------------|
+| `onConversationClicked` | `void Function(Conversation conversation)?` | User clicks a conversation from search results |
+| `onMessageClicked` | `void Function(BaseMessage message)?` | User clicks a message from search results |
+| `onBack` | `VoidCallback?` | User clicks the back button |
+| `onError` | `OnError?` | An error occurs in the component |
+| `onConversationsLoad` | `OnLoad?` | Conversations are loaded |
+| `onMessagesLoad` | `OnLoad?` | Messages are loaded |
+| `onEmpty` | `OnEmpty?` | Search results are empty |
+
+
+
+```dart
+CometChatSearch(
+ onConversationClicked: (conversation) {
+ // Navigate to the conversation
+ print('Conversation clicked: ${conversation.conversationId}');
+ },
+ onMessageClicked: (message) {
+ // Navigate to the message
+ print('Message clicked: ${message.id}');
+ },
+ onBack: () {
+ Navigator.pop(context);
+ },
+ onError: (e) {
+ print('Error: $e');
+ },
+)
+```
+
+
+
+### Global UI Events
+
+The CometChatSearch component does not produce any global UI events.
+
+## Custom View Slots
+
+Customize the appearance of CometChatSearch by replacing default views with your own widgets.
+
+### State Views
+
+| Slot | Signature | Replaces |
+|------|-----------|----------|
+| `loadingStateView` | `WidgetBuilder?` | Loading spinner |
+| `emptyStateView` | `WidgetBuilder?` | Empty state display |
+| `errorStateView` | `WidgetBuilder?` | Error state display |
+| `initialStateView` | `WidgetBuilder?` | Initial state before search |
+
+### Conversation View Slots
+
+| Slot | Signature | Replaces |
+|------|-----------|----------|
+| `conversationItemView` | `Widget? Function(BuildContext, Conversation)?` | Entire conversation list item |
+| `conversationLeadingView` | `Widget? Function(BuildContext, Conversation)?` | Avatar / left section |
+| `conversationTitleView` | `Widget? Function(BuildContext, Conversation)?` | Name / title text |
+| `conversationSubtitleView` | `Widget? Function(BuildContext, Conversation)?` | Secondary text / preview |
+| `conversationTailView` | `Widget? Function(BuildContext, Conversation)?` | Right section / timestamp |
+
+### Message View Slots
+
+| Slot | Signature | Replaces |
+|------|-----------|----------|
+| `searchTextMessageView` | `Widget? Function(BuildContext, TextMessage)?` | Text message item |
+| `searchImageMessageView` | `Widget? Function(BuildContext, MediaMessage)?` | Image message item |
+| `searchVideoMessageView` | `Widget? Function(BuildContext, MediaMessage)?` | Video message item |
+| `searchFileMessageView` | `Widget? Function(BuildContext, MediaMessage)?` | File message item |
+| `searchAudioMessageView` | `Widget? Function(BuildContext, MediaMessage)?` | Audio message item |
+| `searchMessageLinkView` | `Widget? Function(BuildContext, BaseMessage)?` | Link message item |
+
+### Example: Custom Text Message View
+
+
+
+```dart
+CometChatSearch(
+ searchTextMessageView: (context, message) {
+ String senderName = message.sender?.name ?? "Unknown";
+ return Container(
+ padding: const EdgeInsets.all(16),
+ width: double.infinity,
+ color: const Color(0xFFE8E4F3),
+ child: Row(
+ children: [
+ Text(
+ "$senderName: ",
+ style: const TextStyle(
+ color: Color(0xFF6B4FBB),
+ fontSize: 16,
+ fontWeight: FontWeight.bold,
+ ),
+ ),
+ Expanded(
+ child: Text(
+ message.text,
+ maxLines: 1,
+ overflow: TextOverflow.ellipsis,
+ style: const TextStyle(
+ color: Color(0xFF4A4A4A),
+ fontSize: 16,
+ ),
+ ),
+ ),
+ ],
+ ),
+ );
+ },
+)
+```
+
+
+
+
+
+
+
+### Icon Customization
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `searchBackIcon` | `Widget?` | Custom back icon |
+| `searchClearIcon` | `Widget?` | Custom clear icon |
+
+## Styling
+
+Customize the appearance of CometChatSearch using `CometChatSearchStyle`.
+
+
+
+
+
+
+
+```dart
+CometChatSearch(
+ searchStyle: CometChatSearchStyle(
+ backgroundColor: const Color(0xFFEDEAFA),
+ searchBackgroundColor: Colors.white,
+ searchTextColor: Colors.black,
+ searchPlaceHolderTextColor: Colors.grey,
+
+ // Filter chip styling
+ searchFilterChipBackgroundColor: Colors.grey[200],
+ searchFilterChipSelectedBackgroundColor: Colors.purple,
+ searchFilterChipTextColor: Colors.black,
+ searchFilterChipSelectedTextColor: Colors.white,
+
+ // Conversation item styling
+ searchConversationItemBackgroundColor: const Color(0xFFEDEAFA),
+ searchConversationTitleTextStyle: const TextStyle(fontWeight: FontWeight.bold),
+ searchConversationSubTitleTextStyle: const TextStyle(color: Colors.grey),
+
+ // Message item styling
+ searchMessageItemBackgroundColor: const Color(0xFFEDEAFA),
+ searchMessageTitleTextStyle: const TextStyle(fontWeight: FontWeight.bold),
+
+ // See more button
+ searchSeeMoreColor: Colors.purple,
+ ),
+)
+```
+
+
+
+### Style Properties
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `backgroundColor` | `Color?` | Background color of the search component |
+| `searchBackgroundColor` | `Color?` | Background color of the search text field |
+| `searchBorder` | `BorderSide?` | Border of the search text field |
+| `searchBorderRadius` | `BorderRadius?` | Border radius of the search text field |
+| `searchTextColor` | `Color?` | Color of the search text |
+| `searchTextStyle` | `TextStyle?` | Style of the search text |
+| `searchPlaceHolderTextColor` | `Color?` | Color of the placeholder text |
+| `searchPlaceHolderTextStyle` | `TextStyle?` | Style of the placeholder text |
+| `searchBackIconColor` | `Color?` | Color of the back icon |
+| `searchClearIconColor` | `Color?` | Color of the clear icon |
+| `searchFilterChipBackgroundColor` | `Color?` | Background color of filter chips |
+| `searchFilterChipSelectedBackgroundColor` | `Color?` | Background color of selected filter chips |
+| `searchFilterChipTextColor` | `Color?` | Text color of filter chips |
+| `searchFilterChipTextStyle` | `TextStyle?` | Text style of filter chips |
+| `searchFilterChipSelectedTextColor` | `Color?` | Text color of selected filter chips |
+| `searchFilterChipSelectedTextStyle` | `TextStyle?` | Text style of selected filter chips |
+| `searchFilterIconColor` | `Color?` | Color of filter icons |
+| `searchFilterSelectedIconColor` | `Color?` | Color of selected filter icons |
+| `searchFilterChipBorder` | `Border?` | Border of filter chips |
+| `searchFilterChipSelectedBorder` | `Border?` | Border of selected filter chips |
+| `searchFilterChipBorderRadius` | `BorderRadius?` | Border radius of filter chips |
+| `searchSectionHeaderTextColor` | `Color?` | Color of section header text |
+| `searchSectionHeaderTextStyle` | `TextStyle?` | Style of section header text |
+| `searchConversationItemBackgroundColor` | `Color?` | Background color of conversation items |
+| `searchConversationTitleTextColor` | `Color?` | Text color of conversation titles |
+| `searchConversationTitleTextStyle` | `TextStyle?` | Style of conversation titles |
+| `searchConversationSubTitleTextStyle` | `TextStyle?` | Style of conversation subtitles |
+| `searchConversationTitleSubTextColor` | `Color?` | Text color of conversation subtitles |
+| `searchConversationDateTextColor` | `Color?` | Text color of conversation dates |
+| `searchConversationDateTextStyle` | `TextStyle?` | Style of conversation dates |
+| `searchMessageItemBackgroundColor` | `Color?` | Background color of message items |
+| `searchMessageTitleTextColor` | `Color?` | Text color of message titles |
+| `searchMessageTitleTextStyle` | `TextStyle?` | Style of message titles |
+| `searchMessageSubTitleTextColor` | `Color?` | Text color of message subtitles |
+| `searchMessageSubTitleTextStyle` | `TextStyle?` | Style of message subtitles |
+| `searchMessageTimeStampStyle` | `CometChatDateStyle?` | Style of message timestamps |
+| `searchMessageDateSeparatorStyle` | `CometChatDateStyle?` | Style of date separators |
+| `searchEmptyStateTextColor` | `Color?` | Text color for empty state |
+| `searchEmptyStateTextStyle` | `TextStyle?` | Style for empty state text |
+| `searchEmptyStateSubtitleColor` | `Color?` | Color for empty state subtitle |
+| `searchEmptyStateSubtitleStyle` | `TextStyle?` | Style for empty state subtitle |
+| `searchErrorStateTextColor` | `Color?` | Text color for error state |
+| `searchErrorStateTextStyle` | `TextStyle?` | Style for error state text |
+| `searchErrorStateSubtitleColor` | `Color?` | Color for error state subtitle |
+| `searchErrorStateSubtitleStyle` | `TextStyle?` | Style for error state subtitle |
+| `searchSeeMoreColor` | `Color?` | Color of "See More" button |
+| `searchSeeMoreStyle` | `TextStyle?` | Style of "See More" button |
+| `avatarStyle` | `CometChatAvatarStyle?` | Style for avatars |
+| `badgeStyle` | `CometChatBadgeStyle?` | Style for badges |
+
+## Props Reference
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `user` | `User?` | `null` | User object for scoped search |
+| `group` | `Group?` | `null` | Group object for scoped search |
+| `searchFilters` | `List?` | `null` | List of filters to show |
+| `searchIn` | `List?` | `null` | List of search scopes |
+| `usersStatusVisibility` | `bool?` | `null` | Show/hide user status indicator |
+| `receiptsVisibility` | `bool?` | `null` | Show/hide message receipts |
+| `groupTypeVisibility` | `bool?` | `null` | Show/hide group type icon |
+| `onBack` | `VoidCallback?` | `null` | Back button callback |
+| `onConversationClicked` | `Function(Conversation)?` | `null` | Conversation click callback |
+| `onMessageClicked` | `Function(BaseMessage)?` | `null` | Message click callback |
+| `onError` | `OnError?` | `null` | Error callback |
+| `onConversationsLoad` | `OnLoad?` | `null` | Conversations load callback |
+| `onMessagesLoad` | `OnLoad?` | `null` | Messages load callback |
+| `onEmpty` | `OnEmpty?` | `null` | Empty state callback |
+| `loadingStateView` | `WidgetBuilder?` | `null` | Custom loading view |
+| `errorStateView` | `WidgetBuilder?` | `null` | Custom error view |
+| `emptyStateView` | `WidgetBuilder?` | `null` | Custom empty view |
+| `initialStateView` | `WidgetBuilder?` | `null` | Custom initial view |
+| `conversationItemView` | `Widget? Function(BuildContext, Conversation)?` | `null` | Custom conversation item |
+| `conversationTitleView` | `Widget? Function(BuildContext, Conversation)?` | `null` | Custom conversation title |
+| `conversationLeadingView` | `Widget? Function(BuildContext, Conversation)?` | `null` | Custom conversation leading view |
+| `conversationSubtitleView` | `Widget? Function(BuildContext, Conversation)?` | `null` | Custom conversation subtitle |
+| `conversationTailView` | `Widget? Function(BuildContext, Conversation)?` | `null` | Custom conversation tail view |
+| `searchTextMessageView` | `Widget? Function(BuildContext, TextMessage)?` | `null` | Custom text message view |
+| `searchImageMessageView` | `Widget? Function(BuildContext, MediaMessage)?` | `null` | Custom image message view |
+| `searchVideoMessageView` | `Widget? Function(BuildContext, MediaMessage)?` | `null` | Custom video message view |
+| `searchFileMessageView` | `Widget? Function(BuildContext, MediaMessage)?` | `null` | Custom file message view |
+| `searchAudioMessageView` | `Widget? Function(BuildContext, MediaMessage)?` | `null` | Custom audio message view |
+| `searchMessageLinkView` | `Widget? Function(BuildContext, BaseMessage)?` | `null` | Custom link message view |
+| `searchBackIcon` | `Widget?` | `null` | Custom back icon |
+| `searchClearIcon` | `Widget?` | `null` | Custom clear icon |
+| `dateSeparatorFormatterCallback` | `DateTimeFormatterCallback?` | `null` | Date separator formatter |
+| `timeSeparatorFormatterCallback` | `DateTimeFormatterCallback?` | `null` | Time separator formatter |
+| `conversationsProtocol` | `ConversationsBuilderProtocol?` | `null` | Conversations builder protocol |
+| `conversationsRequestBuilder` | `ConversationsRequestBuilder?` | `null` | Conversations request builder |
+| `messagesRequestBuilder` | `MessagesRequestBuilder?` | `null` | Messages request builder |
+| `searchStyle` | `CometChatSearchStyle?` | `null` | Style configuration |
+
+
+
+ Display and manage chat conversations
+
+
+ Display messages in a conversation
+
+
+ Learn how to customize the look and feel
+
+
+ Support multiple languages in your app
+
+
diff --git a/ui-kit/flutter/v5/shortcut-formatter-guide.mdx b/ui-kit/flutter/v5/shortcut-formatter-guide.mdx
new file mode 100644
index 000000000..93d1404d4
--- /dev/null
+++ b/ui-kit/flutter/v5/shortcut-formatter-guide.mdx
@@ -0,0 +1,493 @@
+---
+title: "Shortcut Formatter"
+description: "Provide !shortcut style expansions invoking extension APIs or dialogs before inserting content in CometChat Flutter UI Kit."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_chat_uikit` |
+| Key class | `ShortcutFormatter` (extends `CometChatTextFormatter`) |
+| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login(uid)` |
+| Purpose | Provide !shortcut style expansions invoking extension APIs |
+| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
+| Related | [Custom Text Formatter](/ui-kit/flutter/v5/custom-text-formatter-guide) · [All Guides](/ui-kit/flutter/v5/guide-overview) |
+
+
+
+## Introduction
+
+The `ShortcutFormatter` class extends the `CometChatTextFormatter` class to provide a mechanism for handling shortcuts within messages. This guide will walk you through the process of using ShortcutFormatter to implement shortcut extensions in your CometChat application.
+
+## Setup
+
+1. **Create the ShortcutFormatter Class**: Define the `ShortcutFormatter` class by extending the `CometChatTextFormatter` class.
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+class ShortcutFormatter extends CometChatTextFormatter {
+
+}
+```
+
+
+
+
+
+2. **Init**: Initialize the `messageShortcuts` map and `shortcuts` list in the init().
+
+
+
+```dart
+@override
+void init() {
+ trackingCharacter ??= "!";
+}
+```
+
+
+
+
+
+3. **Prepare Shortcuts**: Implement the `prepareShortcuts()` method to fetch shortcuts from the server using CometChat extension.
+
+
+
+```dart
+bool isShortcutTracking = false;
+
+void prepareShortcuts(TextEditingController textEditingController) {
+ CometChat.callExtension('message-shortcuts', 'GET', '/v1/fetch', null,
+ onSuccess: (map) {
+ if (map.isNotEmpty) {
+ Map data = map["data"];
+ if (data.isNotEmpty) {
+ Map shortcuts = data["shortcuts"];
+ if (shortcuts.isNotEmpty) {
+ parseData(
+ shortcuts: shortcuts,
+ textEditingController: textEditingController
+ );
+ }
+ }
+ }
+ }, onError: (error) {});
+}
+
+void parseData({Map? shortcuts, required TextEditingController textEditingController}) async {
+ if (shortcuts == null || shortcuts.isEmpty) {
+ suggestionListEventSink?.add([]);
+ if (onSearch != null) {
+ onSearch!(null);
+ }
+ CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
+ } else {
+ CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
+ if (suggestionListEventSink != null && shortcuts.isNotEmpty) {
+ List list = [];
+ shortcuts.forEach((key, value) => list.add(SuggestionListItem(
+ id: key,
+ title: "$key → $value",
+ onTap: () {
+ int cursorPos = textEditingController.selection.base.offset;
+ String textOnLeftOfValue = textEditingController.text.substring(0, cursorPos - 1);
+ String textOnRightOfValue = textEditingController.text.substring(cursorPos);
+ textEditingController.text = "$textOnLeftOfValue$value $textOnRightOfValue";
+ updatePreviousText(textEditingController.text);
+ textEditingController.selection = TextSelection(
+ baseOffset: cursorPos - 1 + "$value".length + 1,
+ extentOffset: cursorPos - 1 + "$value".length + 1,
+ );
+ resetMatchTracker();
+ isShortcutTracking = false;
+ CometChatUIEvents.hidePanel(
+ composerId, CustomUIPosition.composerPreview
+ );
+ })
+ ));
+ suggestionListEventSink?.add(list);
+ }
+ }
+}
+
+void updatePreviousText(String text) {
+ if (previousTextEventSink != null) {
+ previousTextEventSink!.add(text);
+ }
+}
+
+void resetMatchTracker() {
+ suggestionListEventSink?.add([]);
+ if (onSearch != null) {
+ onSearch!(null);
+ }
+}
+```
+
+
+
+
+
+4. **Override onChange Method**: Override the `onChange()` method to search for shortcuts based on the entered query.
+
+
+
+```dart
+@override
+void onChange(TextEditingController textEditingController, String previousText) {
+ var cursorPosition = textEditingController.selection.base.offset;
+ if (textEditingController.text.isEmpty) {
+ resetMatchTracker();
+ if (previousText.length > textEditingController.text.length) {
+ if (previousText[cursorPosition] == trackingCharacter && isShortcutTracking) {
+ isShortcutTracking = false;
+ if (onSearch != null) {
+ onSearch!(null);
+ }
+ CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
+ }
+ return;
+ }
+ }
+
+ if (previousText.length > textEditingController.text.length) {
+ if (previousText[cursorPosition] == trackingCharacter) {
+ isShortcutTracking = false;
+ if (onSearch != null) {
+ onSearch!(null);
+ }
+ CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
+ }
+ } else {
+ String previousCharacter = cursorPosition == 0 ? "" : textEditingController.text[cursorPosition - 1];
+ bool isSpace = cursorPosition == 1 || (textEditingController.text.length > 1 && cursorPosition > 1 && (textEditingController.text[cursorPosition - 2] == " " || textEditingController.text[cursorPosition - 2] == "\n"));
+
+ if (isShortcutTracking) {
+ isShortcutTracking = false;
+ if (onSearch != null) {
+ onSearch!(null);
+ }
+ CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
+ } else if (previousCharacter == trackingCharacter && isSpace) {
+ isShortcutTracking = true;
+ if (onSearch != null) {
+ onSearch!(trackingCharacter);
+ }
+ CometChatUIEvents.showPanel(composerId, CustomUIPosition.composerPreview, (context) => getLoadingIndicator(context, cometChatTheme));
+ prepareShortcuts(textEditingController);
+ }
+ }
+}
+```
+
+
+
+
+
+5. **Handle Scroll to Bottom**: Override the `onScrollToBottom()` method if needed.
+
+
+
+```dart
+@override
+void onScrollToBottom(TextEditingController textEditingController) {
+ // TODO: implement onScrollToBottom
+}
+```
+
+
+
+
+
+6. **Additional Base Class Methods**: The `CometChatTextFormatter` base class provides additional methods you can override for advanced customization:
+
+
+
+```dart
+/// Override to customize the text style in message bubbles
+@override
+TextStyle getMessageBubbleTextStyle(BuildContext context, BubbleAlignment? alignment, {bool forConversation = false}) {
+ return TextStyle(
+ color: alignment == BubbleAlignment.right ? Colors.white : Colors.black,
+ fontSize: 14,
+ fontWeight: FontWeight.bold,
+ );
+}
+
+/// Override to build custom attributed text for the input field
+@override
+List buildInputFieldText({
+ required BuildContext context,
+ TextStyle? style,
+ required bool withComposing,
+ required String text,
+ List? existingAttributes,
+}) {
+ return existingAttributes ?? [];
+}
+
+/// Override to get attributed text for styling in message bubbles
+@override
+List getAttributedText(
+ String text,
+ BuildContext context,
+ BubbleAlignment? alignment, {
+ List? existingAttributes,
+ Function(String)? onTap,
+ bool forConversation = false,
+}) {
+ // Custom implementation
+ return super.getAttributedText(text, context, alignment,
+ existingAttributes: existingAttributes,
+ onTap: onTap,
+ forConversation: forConversation);
+}
+```
+
+
+
+
+
+***
+
+## Usage
+
+The widgets [CometChatConversations](/ui-kit/flutter/v5/conversations), [CometChatMessageComposer](/ui-kit/flutter/v5/message-composer) and [CometChatMessageList](/ui-kit/flutter/v5/message-list) have a property called `textFormatters` which accepts a list of CometChatTextFormatter to format the text. The code shared below `textFormatters` consisting of the above created Shortcuts formatter being passed down to [CometChatMessageComposer](/ui-kit/flutter/v5/message-composer) from [CometChatConversationsWithMessages](/ui-kit/flutter/v5/conversations) with help of configurations.
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:flutter/material.dart';
+import 'shortcut_formatter.dart';
+
+class ShortcutFormatterExample extends StatefulWidget {
+ const ShortcutFormatterExample({super.key});
+
+ @override
+ State createState() => _ShortcutFormatterExampleState();
+}
+
+class _ShortcutFormatterExampleState extends State {
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: SafeArea(
+ child: CometChatConversationsWithMessages(
+ messageConfiguration: MessageConfiguration(
+ messageComposerConfiguration: MessageComposerConfiguration(
+ textFormatters: [ShortcutFormatter()],
+ ),
+ )
+ ),
+ ),
+ );
+ }
+}
+```
+
+
+
+
+
+***
+
+## Example
+
+Here is the complete example for reference:
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:flutter/material.dart';
+
+class ShortcutFormatter extends CometChatTextFormatter {
+ @override
+ void init() {
+ trackingCharacter ??= "!";
+ }
+
+ bool isShortcutTracking = false;
+
+ void prepareShortcuts(TextEditingController textEditingController) {
+ CometChat.callExtension('message-shortcuts', 'GET', '/v1/fetch', null,
+ onSuccess: (map) {
+ if (map.isNotEmpty) {
+ Map data = map["data"];
+ if (data.isNotEmpty) {
+ Map shortcuts = data["shortcuts"];
+ if (shortcuts.isNotEmpty) {
+ parseData(
+ shortcuts: shortcuts,
+ textEditingController: textEditingController);
+ }
+ }
+ }
+ }, onError: (error) {});
+ }
+
+ void parseData({Map? shortcuts, required TextEditingController textEditingController}) async {
+ if (shortcuts == null || shortcuts.isEmpty) {
+ suggestionListEventSink?.add([]);
+ if (onSearch != null) {
+ onSearch!(null);
+ }
+ CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
+ } else {
+ CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
+ if (suggestionListEventSink != null && shortcuts.isNotEmpty) {
+ List list = [];
+ shortcuts.forEach((key, value) => list.add(SuggestionListItem(
+ id: key,
+ title: "$key → $value",
+ onTap: () {
+ int cursorPos = textEditingController.selection.base.offset;
+ String textOnLeftOfValue = textEditingController.text.substring(0, cursorPos - 1);
+ String textOnRightOfValue = textEditingController.text.substring(cursorPos);
+ textEditingController.text = "$textOnLeftOfValue$value $textOnRightOfValue";
+ updatePreviousText(textEditingController.text);
+ textEditingController.selection = TextSelection(
+ baseOffset: cursorPos - 1 + "$value".length + 1,
+ extentOffset: cursorPos - 1 + "$value".length + 1,
+ );
+ resetMatchTracker();
+ isShortcutTracking = false;
+ CometChatUIEvents.hidePanel(
+ composerId, CustomUIPosition.composerPreview
+ );
+ })
+ ));
+ suggestionListEventSink?.add(list);
+ }
+ }
+ }
+
+ void updatePreviousText(String text) {
+ if (previousTextEventSink != null) {
+ previousTextEventSink!.add(text);
+ }
+ }
+
+ void resetMatchTracker() {
+ suggestionListEventSink?.add([]);
+ if (onSearch != null) {
+ onSearch!(null);
+ }
+ }
+
+ @override
+ TextStyle getMessageInputTextStyle(CometChatTheme theme) {
+ // TODO: implement getMessageInputTextStyle
+ throw UnimplementedError();
+ }
+
+ @override
+ void handlePreMessageSend(BuildContext context, BaseMessage baseMessage) {
+ // TODO: implement handlePreMessageSend
+ }
+
+ @override
+ void onChange(TextEditingController textEditingController, String previousText) {
+ var cursorPosition = textEditingController.selection.base.offset;
+ if (textEditingController.text.isEmpty) {
+ resetMatchTracker();
+ if (previousText.length > textEditingController.text.length) {
+ if (previousText[cursorPosition] == trackingCharacter && isShortcutTracking) {
+ isShortcutTracking = false;
+ if (onSearch != null) {
+ onSearch!(null);
+ }
+ CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
+ }
+ return;
+ }
+ }
+
+ if (previousText.length > textEditingController.text.length) {
+ if (previousText[cursorPosition] == trackingCharacter) {
+ isShortcutTracking = false;
+ if (onSearch != null) {
+ onSearch!(null);
+ }
+ CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
+ }
+ } else {
+ String previousCharacter = cursorPosition == 0 ? "" : textEditingController.text[cursorPosition - 1];
+ bool isSpace = cursorPosition == 1 || (textEditingController.text.length > 1 && cursorPosition > 1 && (textEditingController.text[cursorPosition - 2] == " " || textEditingController.text[cursorPosition - 2] == "\n"));
+
+ if (isShortcutTracking) {
+ isShortcutTracking = false;
+ if (onSearch != null) {
+ onSearch!(null);
+ }
+ CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
+ } else if (previousCharacter == trackingCharacter && isSpace) {
+ isShortcutTracking = true;
+ if (onSearch != null) {
+ onSearch!(trackingCharacter);
+ }
+ CometChatUIEvents.showPanel(composerId, CustomUIPosition.composerPreview, (context) => getLoadingIndicator(context, cometChatTheme));
+ prepareShortcuts(textEditingController);
+ }
+ }
+ }
+
+ @override
+ void onScrollToBottom(TextEditingController textEditingController) {
+ // TODO: implement onScrollToBottom
+ }
+}
+```
+
+
+
+
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:flutter/material.dart';
+import 'shortcut_formatter.dart';
+
+class ShortcutFormatterExample extends StatefulWidget {
+ const ShortcutFormatterExample({super.key});
+
+ @override
+ State createState() => _ShortcutFormatterExampleState();
+}
+
+class _ShortcutFormatterExampleState extends State {
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: SafeArea(
+ child: CometChatConversationsWithMessages(
+ messageConfiguration: MessageConfiguration(
+ messageComposerConfiguration: MessageComposerConfiguration(
+ textFormatters: [ShortcutFormatter()],
+ ),
+ )
+ ),
+ ),
+ );
+ }
+}
+```
+
+
+
+
+
+
+
+
+
+***
diff --git a/ui-kit/flutter/v5/sound-manager.mdx b/ui-kit/flutter/v5/sound-manager.mdx
new file mode 100644
index 000000000..c70ad5b88
--- /dev/null
+++ b/ui-kit/flutter/v5/sound-manager.mdx
@@ -0,0 +1,116 @@
+---
+title: "Sound Manager"
+sidebarTitle: "Sound Manager"
+description: "Manage and customize audio cues for incoming/outgoing calls and messages in CometChat Flutter UI Kit."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_uikit_shared` |
+| Import | `import 'package:cometchat_uikit_shared/cometchat_uikit_shared.dart';` |
+| Class | `SoundManager` (singleton) |
+| Play sound | `SoundManager().play(sound: Sound.incomingMessage)` |
+| Stop sound | `SoundManager().stop()` |
+| Sound events | `incomingMessage`, `outgoingMessage`, `incomingMessageFromOther`, `incomingCall`, `outgoingCall` |
+| Source | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/shared_uikit/lib/src/resources) |
+
+
+
+`SoundManager` is a singleton helper class for managing and playing audio cues — incoming/outgoing calls and messages.
+
+---
+
+## Methods
+
+### play
+
+Plays the default or custom audio for a sound event.
+
+```dart
+void play({
+ required Sound sound,
+ String? customSound,
+ String? packageName,
+ bool? isLooping,
+})
+```
+
+| Parameter | Type | Description |
+| --- | --- | --- |
+| `sound` | `Sound` | Required. The sound event type to play |
+| `customSound` | `String?` | Optional. Asset path for custom sound file |
+| `packageName` | `String?` | Optional. Package name when using sounds from another plugin |
+| `isLooping` | `bool?` | Optional. Whether to loop the sound (default: `false`) |
+
+```dart
+// Play default sounds
+SoundManager().play(sound: Sound.incomingMessage);
+SoundManager().play(sound: Sound.outgoingMessage);
+
+// Play custom sound
+SoundManager().play(
+ sound: Sound.outgoingMessage,
+ customSound: "assets/custom_sound.wav",
+);
+
+// Play looping sound (e.g., for incoming call)
+SoundManager().play(
+ sound: Sound.incomingCall,
+ isLooping: true,
+);
+```
+
+### stop
+
+Stops any currently playing sound.
+
+```dart
+SoundManager().stop();
+```
+
+---
+
+## Sound Enum
+
+| Value | Default Asset | When it plays |
+| --- | --- | --- |
+| `incomingMessage` | `assets/sound/incoming_message.wav` | New message received |
+| `outgoingMessage` | `assets/sound/outgoing_message.wav` | Message sent |
+| `incomingMessageFromOther` | `assets/sound/incoming_message.wav` | Message from another conversation |
+| `incomingCall` | `assets/sound/incoming_call.wav` | Incoming call detected |
+| `outgoingCall` | `assets/sound/outgoing_call.wav` | Outgoing call initiated |
+
+---
+
+## Usage
+
+```dart
+import 'package:cometchat_uikit_shared/cometchat_uikit_shared.dart';
+
+// Play incoming message sound
+SoundManager().play(sound: Sound.incomingMessage);
+
+// Play outgoing call sound
+SoundManager().play(sound: Sound.outgoingCall);
+
+// Play custom notification sound
+SoundManager().play(
+ sound: Sound.incomingMessage,
+ customSound: "assets/sounds/notification.mp3",
+);
+
+// Play looping ringtone for incoming call
+SoundManager().play(
+ sound: Sound.incomingCall,
+ isLooping: true,
+);
+
+// Stop any playing sound
+SoundManager().stop();
+```
+
+
+Sound behavior varies by OS when the app is in the background.
+
diff --git a/ui-kit/flutter/v5/theme-introduction.mdx b/ui-kit/flutter/v5/theme-introduction.mdx
new file mode 100644
index 000000000..1ca1caa39
--- /dev/null
+++ b/ui-kit/flutter/v5/theme-introduction.mdx
@@ -0,0 +1,170 @@
+---
+title: "Theming"
+sidebarTitle: "Overview"
+description: "Customize the CometChat Flutter UI Kit appearance using ThemeExtensions for colors, fonts, spacing, and dark mode."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Goal | Customize UI Kit appearance (colors, fonts, spacing) via Flutter ThemeExtensions |
+| Where | `ThemeData.extensions` in `MaterialApp` |
+| Color | `CometChatColorPalette` — primary, neutral, alert, text, icon, background colors |
+| Typography | `CometChatTypography` — font sizes, weights, text styles |
+| Spacing | `CometChatSpacing` — padding, margin, border radius |
+| Dark mode | Use separate `CometChatColorPalette` for dark theme |
+| Source | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/shared_uikit/lib/src/theme) |
+
+
+
+Theming controls the look and feel of the chat UI — colors, fonts, and spacing — through Flutter's `ThemeExtension` system.
+
+
+
+
+
+---
+
+## Core Components
+
+| Component | Class | Purpose |
+| --- | --- | --- |
+| Color | `CometChatColorPalette` | Primary, neutral, alert, text, icon, background colors |
+| Typography | `CometChatTypography` | Font sizes, weights, text styles |
+| Spacing | `CometChatSpacing` | Padding, margin, border radius |
+
+### Typography Tokens
+
+| Token | Purpose |
+| --- | --- |
+| `heading1` - `heading4` | Heading text styles |
+| `body` | Body text |
+| `caption1`, `caption2` | Caption text |
+| `button` | Button text |
+| `link` | Link text |
+| `title` | Title text |
+
+### Spacing Tokens
+
+| Token | Default Value |
+| --- | --- |
+| `spacing` - `spacing20` | 2px - 80px (increments of 4) |
+| `padding` - `padding10` | Derived from spacing |
+| `margin` - `margin20` | Derived from spacing |
+| `radius` - `radius6`, `radiusMax` | Border radius values |
+
+---
+
+## Basic Usage
+
+Override theme properties in your `MaterialApp`:
+
+
+
+```dart title="main.dart"
+MaterialApp(
+ theme: ThemeData(
+ fontFamily: 'Roboto',
+ extensions: [
+ CometChatColorPalette(
+ primary: Color(0xFFF76808),
+ textPrimary: Color(0xFF141414),
+ background1: Color(0xFFFFFFFF),
+ ),
+ ],
+ ),
+ home: MyApp(),
+)
+```
+
+
+
+---
+
+## Light and Dark Themes
+
+
+
+
+
+
+
+```dart
+ThemeData(
+ extensions: [
+ CometChatColorPalette(
+ primary: Color(0xFF6852D6),
+ textPrimary: Color(0xFF141414),
+ textSecondary: Color(0xFF727272),
+ background1: Color(0xFFFFFFFF),
+ borderLight: Color(0xFFF5F5F5),
+ ),
+ ],
+)
+```
+
+
+```dart
+ThemeData(
+ extensions: [
+ CometChatColorPalette(
+ primary: Color(0xFF6852D6),
+ textPrimary: Color(0xFFFFFFFF),
+ textSecondary: Color(0xFF989898),
+ background1: Color(0xFF1A1A1A),
+ borderLight: Color(0xFF272727),
+ ),
+ ],
+)
+```
+
+
+
+
+
+
+
+---
+
+## Custom Brand Colors
+
+
+
+
+
+
+
+```dart
+ThemeData(
+ fontFamily: 'Times New Roman',
+ extensions: [
+ CometChatColorPalette(
+ primary: Color(0xFFF76808),
+ iconHighlight: Color(0xFFF76808),
+ extendedPrimary500: Color(0xFFFBAA75),
+ ),
+ ],
+)
+```
+
+
+
+---
+
+## Next Steps
+
+
+
+ Full list of color tokens
+
+
+ Style individual components
+
+
+ Customize message bubbles
+
+
+ Multi-language support
+
+
diff --git a/ui-kit/flutter/v5/threaded-messages-header.mdx b/ui-kit/flutter/v5/threaded-messages-header.mdx
new file mode 100644
index 000000000..209798949
--- /dev/null
+++ b/ui-kit/flutter/v5/threaded-messages-header.mdx
@@ -0,0 +1,346 @@
+---
+title: "Threaded Messages Header"
+description: "A widget that displays the parent message of a thread with reply count"
+---
+
+
+```json
+{
+ "component": "CometChatThreadedHeader",
+ "package": "cometchat_chat_uikit",
+ "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
+ "description": "A widget that displays the parent message of a thread along with a reply count, used as the header section in threaded message views",
+ "primaryOutput": {
+ "prop": "messageActionView",
+ "type": "Widget Function(BaseMessage message, BuildContext context)?"
+ },
+ "props": {
+ "data": {
+ "parentMessage": {
+ "type": "BaseMessage",
+ "required": true,
+ "note": "Parent message for the thread"
+ },
+ "loggedInUser": {
+ "type": "User",
+ "required": true,
+ "note": "Logged in user object"
+ },
+ "template": {
+ "type": "CometChatMessageTemplate?",
+ "default": "null",
+ "note": "Message template used in the thread"
+ },
+ "height": {
+ "type": "double?",
+ "default": "null",
+ "note": "Height of the widget"
+ },
+ "width": {
+ "type": "double?",
+ "default": "null",
+ "note": "Width of the widget"
+ }
+ },
+ "visibility": {
+ "receiptsVisibility": {
+ "type": "bool?",
+ "default": true
+ }
+ },
+ "viewSlots": {
+ "messageActionView": "Widget Function(BaseMessage message, BuildContext context)?"
+ }
+ },
+ "events": [],
+ "sdkListeners": [],
+ "compositionExample": {
+ "description": "CometChatThreadedHeader is typically used within CometChatThreadedMessages as the header component",
+ "components": ["CometChatThreadedMessages", "CometChatMessageList", "CometChatMessageComposer"],
+ "flow": "Parent message displayed at top → Reply count shown → Message list below with replies"
+ },
+ "types": {}
+}
+```
+
+
+## Where It Fits
+
+CometChatThreadedHeader is a component that displays the parent message of a thread along with a reply count. It's typically used as part of the ThreadedMessages composite component, appearing at the top of the threaded conversation view.
+
+ThreadedMessages is composed of the following widgets:
+
+| Widget | Description |
+|--------|-------------|
+| [MessageList](/ui-kit/flutter/v5/message-list) | CometChatMessageList displays a list of reply messages |
+| [MessageComposer](/ui-kit/flutter/v5/message-composer) | CometChatMessageComposer helps in writing and sending replies |
+
+
+
+
+
+## Minimal Render
+
+The simplest way to render CometChatThreadedHeader:
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+CometChatThreadedHeader(
+ parentMessage: parentMessage, // Required: BaseMessage object
+ loggedInUser: loggedInUser, // Required: User object
+)
+```
+
+
+
+You can also launch it using Navigator:
+
+
+
+```dart
+Navigator.push(
+ context,
+ MaterialPageRoute(
+ builder: (context) => CometChatThreadedHeader(
+ loggedInUser: loggedInUser,
+ parentMessage: parentMessage,
+ ),
+ ),
+);
+```
+
+
+
+Or embed it as a widget:
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:flutter/material.dart';
+
+class ThreadMessages extends StatefulWidget {
+ const ThreadMessages({super.key});
+
+ @override
+ State createState() => _ThreadMessagesState();
+}
+
+class _ThreadMessagesState extends State {
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: SafeArea(
+ child: CometChatThreadedHeader(
+ loggedInUser: loggedInUser,
+ parentMessage: parentMessage,
+ ),
+ ),
+ );
+ }
+}
+```
+
+
+
+## Actions and Events
+
+### Callback Props
+
+The CometChatThreadedHeader component does not have traditional callback props. Instead, it provides a `messageActionView` slot for customizing the action area.
+
+### Global UI Events
+
+The CometChatThreadedHeader component does not produce any global UI events.
+
+## Custom View Slots
+
+Customize the appearance of CometChatThreadedHeader by replacing default views with your own widgets.
+
+| Slot | Signature | Replaces |
+|------|-----------|----------|
+| `messageActionView` | `Widget Function(BaseMessage message, BuildContext context)?` | Reply count section below the message bubble |
+
+### Example: Custom Message Action View
+
+
+
+```dart
+CometChatThreadedHeader(
+ loggedInUser: loggedInUser,
+ parentMessage: parentMessage,
+ messageActionView: (BaseMessage baseMessage, BuildContext context) {
+ return Container(
+ width: MediaQuery.of(context).size.width / 1.2,
+ margin: const EdgeInsets.all(10),
+ decoration: BoxDecoration(
+ color: Color(0xFF6851D6),
+ borderRadius: BorderRadius.circular(10),
+ border: Border.all(width: 5, color: Color(0xFF6851D6)),
+ ),
+ child: const Center(
+ child: Text(
+ "Your Custom Action View",
+ style: TextStyle(color: Colors.white),
+ ),
+ ),
+ );
+ },
+)
+```
+
+
+
+
+
+
+
+
+
+
+
+
+### Example: Custom Reply Count with Dividers
+
+
+
+```dart
+CometChatThreadedHeader(
+ parentMessage: message,
+ loggedInUser: CometChatUIKit.loggedInUser!,
+ style: CometChatThreadedHeaderStyle(
+ bubbleContainerBackGroundColor: Color(0xFFFEEDE1),
+ outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ borderRadius: BorderRadius.circular(12),
+ ),
+ ),
+ messageActionView: (message, context) {
+ final numberOfReplies = message.replyCount;
+ String replyText = numberOfReplies == 1
+ ? Translations.of(context).reply
+ : Translations.of(context).replies;
+ return Container(
+ width: double.maxFinite,
+ color: Color(0xFFFEEDE1),
+ padding: EdgeInsets.symmetric(vertical: 4),
+ child: Row(
+ children: [
+ Flexible(child: Divider(color: Color(0xFFF76808))),
+ Padding(
+ padding: EdgeInsets.symmetric(horizontal: 8),
+ child: Text(
+ "$numberOfReplies $replyText",
+ style: TextStyle(
+ color: Color(0xFFF76808),
+ fontSize: 14,
+ fontWeight: FontWeight.w400,
+ ),
+ ),
+ ),
+ Flexible(child: Divider(color: Color(0xFFF76808))),
+ ],
+ ),
+ );
+ },
+)
+```
+
+
+
+
+
+
+
+### Templates
+
+The `template` prop is used to configure and set a message template for the parent message bubble. It allows for dynamic customization of message appearance, content, or other predefined settings based on the template provided.
+
+
+
+```dart
+CometChatThreadedHeader(
+ parentMessage: parentMessage,
+ loggedInUser: loggedInUser,
+ template: CometChatMessageTemplate(
+ type: MessageTypeConstants.text,
+ category: MessageCategoryConstants.message,
+ // Custom template configuration
+ ),
+)
+```
+
+
+
+## Styling
+
+Customize the appearance of CometChatThreadedHeader using `CometChatThreadedHeaderStyle`.
+
+
+
+```dart
+CometChatThreadedHeader(
+ parentMessage: parentMessage,
+ loggedInUser: loggedInUser,
+ style: CometChatThreadedHeaderStyle(
+ bubbleContainerBackGroundColor: Color(0xFFFEEDE1),
+ countTextColor: Colors.purple,
+ countContainerBackGroundColor: Colors.grey[100],
+ incomingMessageBubbleStyle: CometChatIncomingMessageBubbleStyle(
+ backgroundColor: Colors.grey[200],
+ ),
+ outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ borderRadius: BorderRadius.circular(12),
+ ),
+ ),
+)
+```
+
+
+
+### Style Properties
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `bubbleContainerBackGroundColor` | `Color?` | Background color for the bubble container |
+| `bubbleContainerBorder` | `BoxBorder?` | Border for the bubble container |
+| `bubbleContainerBorderRadius` | `BorderRadiusGeometry?` | Border radius for the bubble container |
+| `countTextStyle` | `TextStyle?` | Text style for the reply count |
+| `countTextColor` | `Color?` | Color for the reply count text |
+| `countContainerBackGroundColor` | `Color?` | Background color for the count container |
+| `countContainerBorder` | `BoxBorder?` | Border for the count container |
+| `constraints` | `BoxConstraints?` | Constraints for the message container |
+| `incomingMessageBubbleStyle` | `CometChatIncomingMessageBubbleStyle?` | Style for incoming message bubble |
+| `outgoingMessageBubbleStyle` | `CometChatOutgoingMessageBubbleStyle?` | Style for outgoing message bubble |
+
+## Props Reference
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `parentMessage` | `BaseMessage` | Required | Parent message for the thread |
+| `loggedInUser` | `User` | Required | Logged in user object |
+| `messageActionView` | `Function(BaseMessage, BuildContext)?` | `null` | Custom action view for the message |
+| `style` | `CometChatThreadedHeaderStyle?` | `null` | Style parameter for the threaded header |
+| `template` | `CometChatMessageTemplate?` | `null` | Message template used in the thread |
+| `height` | `double?` | `null` | Height of the widget |
+| `width` | `double?` | `null` | Width of the widget |
+| `receiptsVisibility` | `bool?` | `true` | Controls visibility of receipts |
+
+
+
+ Display messages in a conversation
+
+
+ Compose and send messages
+
+
+ Learn how to customize the look and feel
+
+
+ Support multiple languages in your app
+
+
diff --git a/ui-kit/flutter/v5/troubleshooting.mdx b/ui-kit/flutter/v5/troubleshooting.mdx
new file mode 100644
index 000000000..57a7335e1
--- /dev/null
+++ b/ui-kit/flutter/v5/troubleshooting.mdx
@@ -0,0 +1,207 @@
+---
+title: "Troubleshooting"
+description: "Common failure modes and fixes for the CometChat Flutter UI Kit."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Page type | Troubleshooting reference |
+| Scope | All CometChat Flutter UI Kit v5 issues — initialization, rendering, theming, calling, extensions, AI features, localization, sound, events |
+| When to reference | When a component fails to render, data is missing, styling doesn't apply, or a feature doesn't appear |
+
+
+
+## Initialization and Login
+
+| Symptom | Cause | Fix |
+| --- | --- | --- |
+| `CometChatUIKit.init()` fails silently | Invalid App ID, Region, or Auth Key | Double-check credentials from the [CometChat Dashboard](https://app.cometchat.com/) |
+| Widget doesn't render | `init()` not called or not awaited before rendering | Ensure `init()` completes before mounting widgets. See [Methods](/ui-kit/flutter/v5/methods) |
+| Widget renders but shows no data | User not logged in | Call `CometChatUIKit.login("UID")` after init |
+| Login fails with "UID not found" | UID doesn't exist in your CometChat app | Create the user via Dashboard, SDK, or API first |
+| Blank screen after login | Widget mounted before init/login completes | Use `FutureBuilder` or state to conditionally render after login resolves |
+| `getLoggedInUser()` returns null | User not logged in or session expired | Call `login()` or `loginWithAuthToken()` first |
+| `sendTextMessage()` fails | User not logged in or invalid receiver | Ensure login completes before sending messages |
+| Auth Key exposed in production | Using Auth Key instead of Auth Token | Switch to [Auth Token](/ui-kit/flutter/v5/methods#login-using-auth-token) for production |
+
+---
+
+## Platform-Specific Issues
+
+### Android
+
+| Symptom | Cause | Fix |
+| --- | --- | --- |
+| App crashes on launch | Missing internet permission | Add `
-Learn how to build a complete messaging UI using the **v5 UI Kit** by following the step-by-step guide [here](/ui-kit/flutter/getting-started#1%EF%B8%8F⃣-conversation-list-%2B-message-view).
+Learn how to build a complete messaging UI using the **v5 UI Kit** by following the step-by-step guide [here](/ui-kit/flutter/v5/getting-started#1%EF%B8%8F⃣-conversation-list-%2B-message-view).
@@ -115,8 +115,8 @@ This architectural redesign makes theming more intuitive and aligns with modern
For detailed guidance on theming and customizing colors in the CometChat React UI Kit, refer to the following resources:
-* **Theming Documentation:** [Guide to Theming](/ui-kit/flutter/theme-introduction)
-* **Color Customization:** [Customizing Colors](/ui-kit/flutter/color-resources)
+* **Theming Documentation:** [Guide to Theming](/ui-kit/flutter/v5/theme-introduction)
+* **Color Customization:** [Customizing Colors](/ui-kit/flutter/v5/color-resources)
diff --git a/ui-kit/flutter/url-formatter-guide.mdx b/ui-kit/flutter/v5/url-formatter-guide.mdx
similarity index 94%
rename from ui-kit/flutter/url-formatter-guide.mdx
rename to ui-kit/flutter/v5/url-formatter-guide.mdx
index f260ad2d7..4e78a6c0f 100644
--- a/ui-kit/flutter/url-formatter-guide.mdx
+++ b/ui-kit/flutter/v5/url-formatter-guide.mdx
@@ -12,11 +12,11 @@ description: "Detect and style plain URLs as clickable links with optional track
| Required setup | `CometChatUIKit.init(uiKitSettings: uiKitSettings)` then `CometChatUIKit.login("UID")` |
| Purpose | Auto-detects URLs in text messages and converts them to clickable links |
| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
-| Related | [Custom Text Formatter](/ui-kit/flutter/custom-text-formatter-guide) \| [All Guides](/ui-kit/flutter/guide-overview) |
+| Related | [Custom Text Formatter](/ui-kit/flutter/v5/custom-text-formatter-guide) \| [All Guides](/ui-kit/flutter/v5/guide-overview) |
-`CometChatUrlFormatter` extends [CometChatTextFormatter](/ui-kit/flutter/custom-text-formatter-guide) to detect URLs in text messages and render them as clickable links.
+`CometChatUrlFormatter` extends [CometChatTextFormatter](/ui-kit/flutter/v5/custom-text-formatter-guide) to detect URLs in text messages and render them as clickable links.
{/*
@@ -313,13 +313,13 @@ class _UrlFormatterExampleState extends State {
## Next Steps
-
+
Build custom inline text patterns.
-
+
Render real-time message threads.
-
+
Browse all feature and formatter guides.
diff --git a/ui-kit/flutter/v5/users.mdx b/ui-kit/flutter/v5/users.mdx
new file mode 100644
index 000000000..2914aa9ac
--- /dev/null
+++ b/ui-kit/flutter/v5/users.mdx
@@ -0,0 +1,1515 @@
+---
+title: "Users"
+description: "Searchable, scrollable list of all available users with avatar, name, and online/offline status."
+---
+
+
+```json
+{
+ "component": "CometChatUsers",
+ "package": "cometchat_chat_uikit",
+ "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
+ "description": "Searchable, scrollable list of all available users with avatar, name, and online/offline status.",
+ "primaryOutput": {
+ "prop": "onItemTap",
+ "type": "Function(BuildContext context, User user)"
+ },
+ "props": {
+ "data": {
+ "usersRequestBuilder": {
+ "type": "UsersRequestBuilder?",
+ "default": "SDK default (30 per page)",
+ "note": "Pass the builder, not the result of .build()"
+ },
+ "usersProtocol": {
+ "type": "UsersBuilderProtocol?",
+ "default": "null",
+ "note": "Custom protocol for fetching users"
+ },
+ "scrollController": {
+ "type": "ScrollController?",
+ "default": "null",
+ "note": "Custom scroll controller for the list"
+ },
+ "title": {
+ "type": "String?",
+ "default": "Users",
+ "note": "Title text for the app bar"
+ },
+ "controllerTag": {
+ "type": "String?",
+ "default": "null",
+ "note": "Tag for controller management"
+ },
+ "searchPlaceholder": {
+ "type": "String?",
+ "default": "null",
+ "note": "Placeholder text for search input"
+ },
+ "searchKeyword": {
+ "type": "String?",
+ "default": "null",
+ "note": "Pre-fills search and filters list"
+ },
+ "height": {
+ "type": "double?",
+ "default": "null"
+ },
+ "width": {
+ "type": "double?",
+ "default": "null"
+ }
+ },
+ "callbacks": {
+ "onItemTap": "Function(BuildContext context, User user)?",
+ "onItemLongPress": "Function(BuildContext context, User user)?",
+ "onSelection": "Function(List? list, BuildContext context)?",
+ "onBack": "VoidCallback?",
+ "onError": "OnError?",
+ "onLoad": "OnLoad?",
+ "onEmpty": "OnEmpty?"
+ },
+ "visibility": {
+ "usersStatusVisibility": { "type": "bool?", "default": true },
+ "hideAppbar": { "type": "bool?", "default": false },
+ "hideSearch": { "type": "bool", "default": false },
+ "showBackButton": { "type": "bool", "default": true },
+ "stickyHeaderVisibility": { "type": "bool?", "default": false }
+ },
+ "selection": {
+ "selectionMode": {
+ "type": "SelectionMode?",
+ "values": ["SelectionMode.single", "SelectionMode.multiple", "SelectionMode.none"],
+ "default": "null"
+ },
+ "activateSelection": {
+ "type": "ActivateSelection?",
+ "values": ["ActivateSelection.onClick", "ActivateSelection.onLongClick"],
+ "default": "null"
+ }
+ },
+ "viewSlots": {
+ "listItemView": "Widget Function(User user)?",
+ "leadingView": "Widget? Function(BuildContext context, User user)?",
+ "titleView": "Widget? Function(BuildContext context, User user)?",
+ "subtitleView": "Widget? Function(BuildContext context, User user)?",
+ "trailingView": "Widget? Function(BuildContext context, User user)?",
+ "loadingStateView": "WidgetBuilder?",
+ "emptyStateView": "WidgetBuilder?",
+ "errorStateView": "WidgetBuilder?",
+ "setOptions": "List? Function(User, CometChatUsersController, BuildContext)?",
+ "addOptions": "List? Function(User, CometChatUsersController, BuildContext)?",
+ "appBarOptions": "List Function(BuildContext context)?"
+ },
+ "icons": {
+ "backButton": { "type": "Widget?", "default": "built-in back arrow" },
+ "searchBoxIcon": { "type": "Widget?", "default": "built-in search icon" },
+ "submitIcon": { "type": "Widget?", "default": "built-in check icon" }
+ },
+ "style": {
+ "usersStyle": { "type": "CometChatUsersStyle", "default": "CometChatUsersStyle()" }
+ }
+ },
+ "events": [
+ {
+ "name": "CometChatUserEvents.ccUserBlocked",
+ "payload": "User",
+ "description": "User blocked"
+ },
+ {
+ "name": "CometChatUserEvents.ccUserUnblocked",
+ "payload": "User",
+ "description": "User unblocked"
+ }
+ ],
+ "sdkListeners": [
+ "onUserOnline",
+ "onUserOffline",
+ "ccUserBlocked",
+ "ccUserUnblocked",
+ "onConnected"
+ ],
+ "compositionExample": {
+ "description": "User list wired to message view",
+ "components": [
+ "CometChatUsers",
+ "CometChatMessages",
+ "CometChatMessageHeader",
+ "CometChatMessageList",
+ "CometChatMessageComposer"
+ ],
+ "flow": "onItemTap emits User -> pass to CometChatMessages or individual message components"
+ },
+ "types": {
+ "CometChatOption": {
+ "id": "String?",
+ "title": "String?",
+ "icon": "String?",
+ "iconWidget": "Widget?",
+ "onClick": "VoidCallback?"
+ },
+ "SelectionMode": {
+ "single": "SelectionMode.single",
+ "multiple": "SelectionMode.multiple",
+ "none": "SelectionMode.none"
+ },
+ "ActivateSelection": {
+ "onClick": "ActivateSelection.onClick",
+ "onLongClick": "ActivateSelection.onLongClick"
+ }
+ }
+}
+```
+
+
+
+## Where It Fits
+
+`CometChatUsers` is a contact list widget. It renders all available users and emits the selected `User` via `onItemTap`. Wire it to `CometChatMessages` or individual message components (`CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer`) to build a standard two-panel chat layout.
+
+
+
+```dart
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+class ChatApp extends StatefulWidget {
+ const ChatApp({super.key});
+
+ @override
+ State createState() => _ChatAppState();
+}
+
+class _ChatAppState extends State {
+ User? selectedUser;
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: Row(
+ children: [
+ SizedBox(
+ width: 400,
+ child: CometChatUsers(
+ onItemTap: (context, user) {
+ setState(() {
+ selectedUser = user;
+ });
+ },
+ ),
+ ),
+ Expanded(
+ child: selectedUser != null
+ ? CometChatMessages(user: selectedUser)
+ : const Center(child: Text('Select a user')),
+ ),
+ ],
+ ),
+ );
+ }
+}
+```
+
+
+
+
+
+
+
+---
+
+
+## Minimal Render
+
+
+
+```dart
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+class UsersDemo extends StatelessWidget {
+ const UsersDemo({super.key});
+
+ @override
+ Widget build(BuildContext context) {
+ return const Scaffold(
+ body: SafeArea(
+ child: CometChatUsers(),
+ ),
+ );
+ }
+}
+```
+
+
+
+You can also launch it using `Navigator.push`:
+
+```dart
+Navigator.push(
+ context,
+ MaterialPageRoute(builder: (context) => const CometChatUsers())
+);
+```
+
+---
+
+## Filtering Users
+
+Pass a `UsersRequestBuilder` to `usersRequestBuilder`. Pass the builder instance — not the result of `.build()`.
+
+
+
+```dart
+CometChatUsers(
+ usersRequestBuilder: UsersRequestBuilder()
+ ..friendsOnly = true
+ ..limit = 15,
+)
+```
+
+
+
+### Filter Recipes
+
+| Recipe | Code |
+| --- | --- |
+| Friends only | `UsersRequestBuilder()..friendsOnly = true` |
+| Online users only | `UsersRequestBuilder()..userStatus = CometChatUserStatus.online` |
+| Limit to 15 per page | `UsersRequestBuilder()..limit = 15` |
+| Search by keyword | `UsersRequestBuilder()..searchKeyword = "alice"` |
+| Hide blocked users | `UsersRequestBuilder()..hideBlockedUsers = true` |
+| Filter by roles | `UsersRequestBuilder()..roles = ["admin", "moderator"]` |
+| Filter by tags | `UsersRequestBuilder()..tags = ["vip"]` |
+| Specific UIDs | `UsersRequestBuilder()..uids = ["uid1", "uid2"]` |
+
+Default page size is 30. The component uses infinite scroll — the next page loads as the user scrolls to the bottom.
+
+
+### UsersRequestBuilder Properties
+
+| Property | Description | Code |
+| --- | --- | --- |
+| `limit` | Number of users to fetch per request. Maximum 100. | `..limit = 30` |
+| `searchKeyword` | Search users by name. | `..searchKeyword = "John"` |
+| `friendsOnly` | Fetch only friends. Default `false`. | `..friendsOnly = true` |
+| `userStatus` | Filter by status: `CometChatUserStatus.online` or `CometChatUserStatus.offline`. | `..userStatus = CometChatUserStatus.online` |
+| `hideBlockedUsers` | Hide blocked users from the list. Default `false`. | `..hideBlockedUsers = true` |
+| `roles` | Filter users by specific roles. | `..roles = ["admin"]` |
+| `tags` | Filter users by specific tags. | `..tags = ["vip"]` |
+| `withTags` | Include tags in the User object. Default `false`. | `..withTags = true` |
+| `uids` | Fetch specific users by UIDs. | `..uids = ["uid1", "uid2"]` |
+| `build()` | Builds and returns a `UsersRequest` object. | `.build()` |
+
+Refer to [UsersRequestBuilder](/sdk/flutter/retrieve-users) for the full builder API.
+
+---
+
+## Actions and Events
+
+### Callback Props
+
+#### onItemTap
+
+Fires when a user row is tapped. Primary navigation hook — set the active user and render the message view.
+
+
+
+```dart
+CometChatUsers(
+ onItemTap: (context, user) {
+ print("Selected: ${user.name}");
+ },
+)
+```
+
+
+
+#### onItemLongPress
+
+Fires when a user row is long-pressed. Useful for showing context menus or custom actions.
+
+
+
+```dart
+CometChatUsers(
+ onItemLongPress: (context, user) {
+ // Show custom context menu
+ },
+)
+```
+
+
+
+
+#### onSelection
+
+Fires when users are selected in multi-select mode. Requires `selectionMode` to be set.
+
+
+
+```dart
+CometChatUsers(
+ selectionMode: SelectionMode.multiple,
+ activateSelection: ActivateSelection.onClick,
+ onSelection: (selectedList, context) {
+ print("Selected ${selectedList?.length ?? 0} users");
+ },
+)
+```
+
+
+
+#### onError
+
+Fires on internal errors (network failure, auth issue, SDK exception).
+
+
+
+```dart
+CometChatUsers(
+ onError: (error) {
+ print("CometChatUsers error: $error");
+ },
+)
+```
+
+
+
+#### onBack
+
+Fires when the back button is pressed.
+
+
+
+```dart
+CometChatUsers(
+ showBackButton: true,
+ onBack: () {
+ Navigator.pop(context);
+ },
+)
+```
+
+
+
+#### onLoad
+
+Fires when the user list is successfully loaded.
+
+
+
+```dart
+CometChatUsers(
+ onLoad: (list) {
+ print("Loaded ${list.length} users");
+ },
+)
+```
+
+
+
+#### onEmpty
+
+Fires when the user list is empty.
+
+
+
+```dart
+CometChatUsers(
+ onEmpty: () {
+ print("No users found");
+ },
+)
+```
+
+
+
+
+### Global UI Events
+
+`CometChatUserEvents` emits events subscribable from anywhere in the application. Add a listener in `initState` and remove it in `dispose`.
+
+| Event | Fires when | Payload |
+| --- | --- | --- |
+| `ccUserBlocked` | A user is blocked | `User` |
+| `ccUserUnblocked` | A user is unblocked | `User` |
+
+When to use: sync external UI with user state changes. For example, update a blocked users count badge when a user is blocked.
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+class _YourScreenState extends State with CometChatUserEventListener {
+
+ @override
+ void initState() {
+ super.initState();
+ CometChatUserEvents.addUsersListener("listenerId", this);
+ }
+
+ @override
+ void dispose() {
+ CometChatUserEvents.removeUsersListener("listenerId");
+ super.dispose();
+ }
+
+ @override
+ void ccUserBlocked(User user) {
+ print("Blocked: ${user.name}");
+ }
+
+ @override
+ void ccUserUnblocked(User user) {
+ print("Unblocked: ${user.name}");
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return const Placeholder();
+ }
+}
+```
+
+
+
+### SDK Events (Real-Time, Automatic)
+
+The component listens to these SDK events internally. No manual attachment needed unless additional side effects are required.
+
+| SDK Listener | Internal behavior |
+| --- | --- |
+| `onUserOnline` | Updates the user's status indicator to online |
+| `onUserOffline` | Updates the user's status indicator to offline |
+| `ccUserBlocked` | Updates blocked user in list |
+| `ccUserUnblocked` | Updates unblocked user in list |
+| `onConnected` | Refreshes user list when connection is re-established |
+
+Automatic: user presence changes (online/offline), blocked/unblocked state, connection recovery.
+
+---
+
+
+## Custom View Slots
+
+Each slot replaces a section of the default UI. Slots that accept a user parameter receive the `User` object for that row.
+
+| Slot | Signature | Replaces |
+| --- | --- | --- |
+| `listItemView` | `Widget Function(User)` | Entire list item row |
+| `leadingView` | `Widget? Function(BuildContext, User)` | Avatar / left section |
+| `titleView` | `Widget? Function(BuildContext, User)` | Name / title text |
+| `subtitleView` | `Widget? Function(BuildContext, User)` | Subtitle text |
+| `trailingView` | `Widget? Function(BuildContext, User)` | Right section |
+| `loadingStateView` | `WidgetBuilder` | Loading spinner |
+| `emptyStateView` | `WidgetBuilder` | Empty state |
+| `errorStateView` | `WidgetBuilder` | Error state |
+| `setOptions` | `List? Function(User, CometChatUsersController, BuildContext)` | Context menu actions (replaces default) |
+| `addOptions` | `List? Function(User, CometChatUsersController, BuildContext)` | Context menu actions (adds to default) |
+| `appBarOptions` | `List Function(BuildContext)` | App bar action widgets |
+
+### listItemView
+
+Replace the entire list item row.
+
+
+
+
+
+
+
+```dart
+Widget getCustomUserListItem(User user, BuildContext context) {
+ // Get status indicator
+ StatusIndicatorUtils statusIndicatorUtils = StatusIndicatorUtils.getStatusIndicatorFromParams(
+ context: context,
+ user: user,
+ onlineStatusIndicatorColor: Color(0xFF56E8A7),
+ );
+
+ return CometChatListItem(
+ id: user.uid,
+ avatarName: user.name,
+ avatarURL: user.avatar,
+ avatarHeight: 40,
+ avatarWidth: 40,
+ title: user.name,
+ key: UniqueKey(),
+ statusIndicatorColor: statusIndicatorUtils.statusIndicatorColor,
+ statusIndicatorIcon: statusIndicatorUtils.icon,
+ statusIndicatorStyle: CometChatStatusIndicatorStyle(
+ border: Border.all(width: 2, color: Color(0xFFFFFFFF)),
+ backgroundColor: Color(0xFF56E8A7),
+ ),
+ hideSeparator: true,
+ style: ListItemStyle(
+ background: user.status == CometChatUserStatus.online
+ ? const Color(0xFFE6F4ED)
+ : Colors.transparent,
+ titleStyle: TextStyle(
+ overflow: TextOverflow.ellipsis,
+ fontSize: 16,
+ fontWeight: FontWeight.w500,
+ color: Color(0xFF141414),
+ ),
+ padding: EdgeInsets.only(left: 16, right: 16, top: 8, bottom: 8),
+ ),
+ );
+}
+
+// Usage:
+CometChatUsers(
+ listItemView: (user) => getCustomUserListItem(user, context),
+)
+```
+
+
+
+
+### leadingView
+
+Replace the avatar / left section.
+
+
+
+```dart
+CometChatUsers(
+ leadingView: (context, user) {
+ return Container(
+ decoration: BoxDecoration(
+ border: Border.all(
+ color: user.status == CometChatUserStatus.online
+ ? Color(0xFF09C26F)
+ : Colors.transparent,
+ width: 2,
+ ),
+ borderRadius: BorderRadius.circular(8),
+ ),
+ child: CometChatAvatar(
+ image: user.avatar,
+ name: user.name,
+ style: CometChatAvatarStyle(
+ borderRadius: BorderRadius.circular(6),
+ ),
+ ),
+ );
+ },
+)
+```
+
+
+
+### titleView
+
+Replace the name / title text. Role badge inline example.
+
+
+
+```dart
+CometChatUsers(
+ titleView: (context, user) {
+ return Row(
+ children: [
+ Text(
+ user.name ?? "",
+ style: TextStyle(fontWeight: FontWeight.w500, fontSize: 16),
+ ),
+ if (user.role != null)
+ Container(
+ margin: EdgeInsets.only(left: 4),
+ padding: EdgeInsets.symmetric(horizontal: 6, vertical: 2),
+ decoration: BoxDecoration(
+ color: Color(0xFF09C26F),
+ borderRadius: BorderRadius.circular(7),
+ ),
+ child: Text(
+ user.role!,
+ style: TextStyle(color: Colors.white, fontSize: 8, fontWeight: FontWeight.w600),
+ ),
+ ),
+ ],
+ );
+ },
+)
+```
+
+
+
+### subtitleView
+
+Replace the subtitle text for each user.
+
+
+
+
+
+
+
+```dart
+CometChatUsers(
+ subtitleView: (context, user) {
+ final dateTime = user.lastActiveAt ?? DateTime.now();
+ final subtitle = "Last Active at ${DateFormat('dd/MM/yyyy, HH:mm:ss').format(dateTime)}";
+
+ return Text(
+ subtitle,
+ style: TextStyle(
+ color: Color(0xFF727272),
+ fontSize: 14,
+ fontWeight: FontWeight.w400,
+ ),
+ );
+ },
+)
+```
+
+
+
+
+### trailingView
+
+Replace the right section. Custom tag badge example.
+
+
+
+```dart
+CometChatUsers(
+ trailingView: (context, user) {
+ final tag = user.tags?.isNotEmpty == true ? user.tags!.first : null;
+ if (tag == null) return null;
+
+ return Container(
+ padding: EdgeInsets.symmetric(horizontal: 6, vertical: 4),
+ decoration: BoxDecoration(
+ color: Color(0xFF6852D6),
+ borderRadius: BorderRadius.circular(4),
+ ),
+ child: Text(
+ tag,
+ style: TextStyle(color: Colors.white, fontSize: 10, fontWeight: FontWeight.w600),
+ ),
+ );
+ },
+)
+```
+
+
+
+### setOptions
+
+Replace the context menu / long-press actions on each user item.
+
+
+
+```dart
+CometChatUsers(
+ setOptions: (user, controller, context) {
+ return [
+ CometChatOption(
+ id: "block",
+ title: "Block User",
+ icon: AssetConstants.close,
+ onClick: () {
+ CometChat.blockUsers([user.uid], onSuccess: (users) {
+ print("User blocked");
+ }, onError: (error) {
+ print("Error: $error");
+ });
+ },
+ ),
+ CometChatOption(
+ id: "view_profile",
+ title: "View Profile",
+ iconWidget: Icon(Icons.person_outline),
+ onClick: () {
+ // Navigate to user profile
+ },
+ ),
+ ];
+ },
+)
+```
+
+
+
+### addOptions
+
+Add to the existing context menu actions without removing defaults.
+
+
+
+```dart
+CometChatUsers(
+ addOptions: (user, controller, context) {
+ return [
+ CometChatOption(
+ id: "add_friend",
+ title: "Add Friend",
+ iconWidget: Icon(Icons.person_add_outlined),
+ onClick: () {
+ // Add friend logic
+ },
+ ),
+ CometChatOption(
+ id: "send_message",
+ title: "Send Message",
+ iconWidget: Icon(Icons.message_outlined),
+ onClick: () {
+ // Navigate to messages
+ },
+ ),
+ ];
+ },
+)
+```
+
+
+
+
+### appBarOptions
+
+Add custom widgets to the app bar.
+
+
+
+
+
+
+
+```dart
+CometChatUsers(
+ appBarOptions: (context) => [
+ IconButton(
+ onPressed: () {
+ // Handle action
+ },
+ icon: Icon(Icons.add_comment_outlined, color: Color(0xFF141414)),
+ ),
+ ],
+)
+```
+
+
+
+For a more complete popup menu with styling:
+
+
+
+```dart
+CometChatUsers(
+ appBarOptions: (context) => [
+ PopupMenuButton(
+ shape: RoundedRectangleBorder(
+ borderRadius: BorderRadius.circular(8),
+ side: BorderSide(color: Color(0xFFF5F5F5), width: 1),
+ ),
+ color: Colors.white,
+ elevation: 4,
+ icon: Icon(Icons.more_vert, color: Color(0xFF141414)),
+ onSelected: (value) {
+ switch (value) {
+ case 'refresh':
+ // Refresh users list
+ break;
+ case 'settings':
+ // Navigate to settings
+ break;
+ }
+ },
+ itemBuilder: (BuildContext context) => [
+ PopupMenuItem(
+ value: 'refresh',
+ child: Row(
+ children: [
+ Icon(Icons.refresh, color: Color(0xFFA1A1A1)),
+ SizedBox(width: 8),
+ Text("Refresh"),
+ ],
+ ),
+ ),
+ PopupMenuItem(
+ value: 'settings',
+ child: Row(
+ children: [
+ Icon(Icons.settings, color: Color(0xFFA1A1A1)),
+ SizedBox(width: 8),
+ Text("Settings"),
+ ],
+ ),
+ ),
+ ],
+ ),
+ ],
+)
+```
+
+
+
+---
+
+
+## Styling
+
+Set `CometChatUsersStyle` to customize the appearance.
+
+
+
+```dart
+CometChatUsers(
+ usersStyle: CometChatUsersStyle(
+ backgroundColor: Colors.white,
+ titleTextColor: Color(0xFFF76808),
+ separatorColor: Color(0xFFF76808),
+ avatarStyle: CometChatAvatarStyle(
+ borderRadius: BorderRadius.circular(8),
+ backgroundColor: Color(0xFFFBAA75),
+ ),
+ ),
+)
+```
+
+
+
+
+
+
+
+### Style Properties
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `backgroundColor` | `Color?` | Background color of the component |
+| `border` | `Border?` | Border for the widget |
+| `borderRadius` | `BorderRadiusGeometry?` | Border radius for the widget |
+| `titleTextColor` | `Color?` | Color of the header title |
+| `titleTextStyle` | `TextStyle?` | Style for the header title |
+| `backIconColor` | `Color?` | Back button icon color |
+| `searchBackgroundColor` | `Color?` | Background color of search box |
+| `searchBorder` | `BorderSide?` | Border for search box |
+| `searchBorderRadius` | `BorderRadius?` | Border radius for search box |
+| `searchPlaceHolderTextColor` | `Color?` | Placeholder text color in search |
+| `searchPlaceHolderTextStyle` | `TextStyle?` | Placeholder text style in search |
+| `searchIconColor` | `Color?` | Search icon color |
+| `searchInputTextColor` | `Color?` | Search input text color |
+| `searchInputTextStyle` | `TextStyle?` | Search input text style |
+| `separatorColor` | `Color?` | Color of list item separators |
+| `separatorHeight` | `double?` | Height of list item separators |
+| `stickyTitleColor` | `Color?` | Color of sticky alphabetical headers |
+| `stickyTitleTextStyle` | `TextStyle?` | Style for sticky alphabetical headers |
+| `itemTitleTextColor` | `Color?` | Color of user name in list items |
+| `itemTitleTextStyle` | `TextStyle?` | Style for user name in list items |
+| `itemBorder` | `BoxBorder?` | Border for list items |
+| `listItemSelectedBackgroundColor` | `Color?` | Background color for selected items |
+| `emptyStateTextColor` | `Color?` | Text color for empty state title |
+| `emptyStateTextStyle` | `TextStyle?` | Text style for empty state title |
+| `emptyStateSubTitleTextColor` | `Color?` | Text color for empty state subtitle |
+| `emptyStateSubTitleTextStyle` | `TextStyle?` | Text style for empty state subtitle |
+| `errorStateTextColor` | `Color?` | Text color for error state title |
+| `errorStateTextStyle` | `TextStyle?` | Text style for error state title |
+| `errorStateSubTitleTextColor` | `Color?` | Text color for error state subtitle |
+| `errorStateSubTitleTextStyle` | `TextStyle?` | Text style for error state subtitle |
+| `retryButtonBackgroundColor` | `Color?` | Background color for retry button |
+| `retryButtonBorderRadius` | `BorderRadiusGeometry?` | Border radius for retry button |
+| `retryButtonBorder` | `BorderSide?` | Border for retry button |
+| `retryButtonTextColor` | `Color?` | Text color for retry button |
+| `retryButtonTextStyle` | `TextStyle?` | Text style for retry button |
+| `submitIconColor` | `Color?` | Color of submit icon in selection mode |
+| `checkBoxBackgroundColor` | `Color?` | Background color of unchecked checkbox |
+| `checkBoxCheckedBackgroundColor` | `Color?` | Background color of checked checkbox |
+| `checkboxSelectedIconColor` | `Color?` | Color of checkmark icon |
+| `checkBoxBorderRadius` | `BorderRadiusGeometry?` | Border radius for checkbox |
+| `checkBoxBorder` | `BorderSide?` | Border for checkbox |
+| `avatarStyle` | `CometChatAvatarStyle?` | Style for user avatars |
+| `statusIndicatorStyle` | `CometChatStatusIndicatorStyle?` | Style for status indicators |
+
+---
+
+
+## Common Patterns
+
+### Custom empty state with CTA
+
+
+
+```dart
+CometChatUsers(
+ emptyStateView: (context) {
+ return Center(
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ Icon(Icons.people_outline, size: 64, color: Color(0xFF727272)),
+ SizedBox(height: 16),
+ Text("No users found", style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500)),
+ SizedBox(height: 8),
+ ElevatedButton(
+ onPressed: () {
+ // Invite users
+ },
+ child: Text("Invite Users"),
+ ),
+ ],
+ ),
+ );
+ },
+)
+```
+
+
+
+### Friends-only list
+
+
+
+```dart
+CometChatUsers(
+ usersRequestBuilder: UsersRequestBuilder()
+ ..friendsOnly = true
+ ..limit = 15,
+)
+```
+
+
+
+### Multi-select with selection callback
+
+
+
+```dart
+CometChatUsers(
+ selectionMode: SelectionMode.multiple,
+ activateSelection: ActivateSelection.onClick,
+ onSelection: (selectedUsers, context) {
+ if (selectedUsers != null && selectedUsers.isNotEmpty) {
+ print("Selected ${selectedUsers.length} users");
+ // Create group with selected users, etc.
+ }
+ },
+)
+```
+
+
+
+### Hide all chrome — minimal list
+
+
+
+```dart
+CometChatUsers(
+ hideSearch: true,
+ hideAppbar: true,
+ usersStatusVisibility: false,
+ stickyHeaderVisibility: true, // hides alphabetical headers
+)
+```
+
+
+
+### Online users only
+
+
+
+```dart
+CometChatUsers(
+ usersRequestBuilder: UsersRequestBuilder()
+ ..userStatus = CometChatUserStatus.online,
+)
+```
+
+
+
+---
+
+
+## Accessibility
+
+The component renders a scrollable list of interactive items. Each user row supports:
+
+- Tap gesture for selection/navigation
+- Long-press gesture for context menu actions
+- Checkbox selection in multi-select mode with proper touch targets
+- Status indicators with visual feedback for online/offline state
+
+For screen readers:
+- User names are readable as list item titles
+- Status indicators use color coding — consider adding `Semantics` widgets via `leadingView` if screen reader descriptions are needed for these visual indicators
+- Selection state is communicated through checkbox widgets
+
+The component respects system accessibility settings including text scaling and high contrast modes.
+
+---
+
+## Props
+
+All props are optional unless noted.
+
+### activateSelection
+
+Controls when selection mode activates.
+
+| | |
+| --- | --- |
+| Type | `ActivateSelection?` |
+| Default | `null` |
+
+Values: `ActivateSelection.onClick`, `ActivateSelection.onLongClick`
+
+---
+
+### addOptions
+
+Adds additional context menu actions to the default options.
+
+| | |
+| --- | --- |
+| Type | `List? Function(User, CometChatUsersController, BuildContext)?` |
+| Default | `null` |
+
+---
+
+### appBarOptions
+
+Custom widgets to display in the app bar.
+
+| | |
+| --- | --- |
+| Type | `List Function(BuildContext context)?` |
+| Default | `null` |
+
+---
+
+### backButton
+
+Custom back button widget.
+
+| | |
+| --- | --- |
+| Type | `Widget?` |
+| Default | Built-in back arrow |
+
+---
+
+### controllerTag
+
+Identifier tag for controller management.
+
+| | |
+| --- | --- |
+| Type | `String?` |
+| Default | `null` |
+
+---
+
+
+### emptyStateView
+
+Custom view displayed when there are no users.
+
+| | |
+| --- | --- |
+| Type | `WidgetBuilder?` |
+| Default | Built-in empty state |
+
+---
+
+### errorStateView
+
+Custom view displayed when an error occurs.
+
+| | |
+| --- | --- |
+| Type | `WidgetBuilder?` |
+| Default | Built-in error state |
+
+---
+
+### height
+
+Height of the widget.
+
+| | |
+| --- | --- |
+| Type | `double?` |
+| Default | `null` |
+
+---
+
+### hideAppbar
+
+Hides the app bar including title and search.
+
+| | |
+| --- | --- |
+| Type | `bool?` |
+| Default | `false` |
+
+---
+
+### hideSearch
+
+Hides the search input box.
+
+| | |
+| --- | --- |
+| Type | `bool` |
+| Default | `false` |
+
+---
+
+### leadingView
+
+Custom renderer for the avatar / left section.
+
+| | |
+| --- | --- |
+| Type | `Widget? Function(BuildContext context, User user)?` |
+| Default | Built-in avatar |
+
+---
+
+### listItemView
+
+Custom renderer for the entire list item row.
+
+| | |
+| --- | --- |
+| Type | `Widget Function(User user)?` |
+| Default | Built-in list item |
+
+---
+
+### loadingStateView
+
+Custom view displayed during loading state.
+
+| | |
+| --- | --- |
+| Type | `WidgetBuilder?` |
+| Default | Built-in shimmer |
+
+---
+
+
+### onBack
+
+Callback triggered when the back button is pressed.
+
+| | |
+| --- | --- |
+| Type | `VoidCallback?` |
+| Default | `null` |
+
+---
+
+### onEmpty
+
+Callback triggered when the user list is empty.
+
+| | |
+| --- | --- |
+| Type | `OnEmpty?` |
+| Default | `null` |
+
+---
+
+### onError
+
+Callback triggered when an error occurs.
+
+| | |
+| --- | --- |
+| Type | `OnError?` |
+| Default | `null` |
+
+---
+
+### onItemLongPress
+
+Callback triggered on long press of a user item.
+
+| | |
+| --- | --- |
+| Type | `Function(BuildContext context, User user)?` |
+| Default | `null` |
+
+---
+
+### onItemTap
+
+Callback triggered when tapping a user item.
+
+| | |
+| --- | --- |
+| Type | `Function(BuildContext context, User user)?` |
+| Default | `null` |
+
+---
+
+### onLoad
+
+Callback triggered when the list is successfully loaded.
+
+| | |
+| --- | --- |
+| Type | `OnLoad?` |
+| Default | `null` |
+
+---
+
+### onSelection
+
+Callback triggered when users are selected. Requires `selectionMode` to be set.
+
+| | |
+| --- | --- |
+| Type | `Function(List? list, BuildContext context)?` |
+| Default | `null` |
+
+---
+
+### scrollController
+
+Controller for scrolling the list.
+
+| | |
+| --- | --- |
+| Type | `ScrollController?` |
+| Default | `null` |
+
+---
+
+
+### searchBoxIcon
+
+Custom search box icon widget.
+
+| | |
+| --- | --- |
+| Type | `Widget?` |
+| Default | Built-in search icon |
+
+---
+
+### searchKeyword
+
+Pre-fills the search and filters the user list.
+
+| | |
+| --- | --- |
+| Type | `String?` |
+| Default | `null` |
+
+---
+
+### searchPlaceholder
+
+Placeholder text for the search input box.
+
+| | |
+| --- | --- |
+| Type | `String?` |
+| Default | `null` |
+
+---
+
+### selectionMode
+
+Enables single or multi-select mode.
+
+| | |
+| --- | --- |
+| Type | `SelectionMode?` |
+| Default | `null` |
+
+Values: `SelectionMode.single`, `SelectionMode.multiple`, `SelectionMode.none`
+
+---
+
+### setOptions
+
+Replaces the default context menu actions.
+
+| | |
+| --- | --- |
+| Type | `List? Function(User, CometChatUsersController, BuildContext)?` |
+| Default | `null` |
+
+---
+
+### showBackButton
+
+Shows or hides the back button.
+
+| | |
+| --- | --- |
+| Type | `bool` |
+| Default | `true` |
+
+---
+
+### stickyHeaderVisibility
+
+Hides alphabetical section headers when set to `true`.
+
+| | |
+| --- | --- |
+| Type | `bool?` |
+| Default | `false` |
+
+Note: When `false`, alphabetical headers (A, B, C...) are shown to separate users.
+
+---
+
+
+### submitIcon
+
+Custom submit icon widget for selection mode.
+
+| | |
+| --- | --- |
+| Type | `Widget?` |
+| Default | Built-in check icon |
+
+---
+
+### subtitleView
+
+Custom renderer for the subtitle text.
+
+| | |
+| --- | --- |
+| Type | `Widget? Function(BuildContext context, User user)?` |
+| Default | `null` |
+
+---
+
+### title
+
+Title text displayed in the app bar.
+
+| | |
+| --- | --- |
+| Type | `String?` |
+| Default | `"Users"` |
+
+---
+
+### titleView
+
+Custom renderer for the name / title text.
+
+| | |
+| --- | --- |
+| Type | `Widget? Function(BuildContext context, User user)?` |
+| Default | Built-in title |
+
+---
+
+### trailingView
+
+Custom renderer for the right section.
+
+| | |
+| --- | --- |
+| Type | `Widget? Function(BuildContext context, User user)?` |
+| Default | `null` |
+
+---
+
+### usersProtocol
+
+Custom protocol for fetching users.
+
+| | |
+| --- | --- |
+| Type | `UsersBuilderProtocol?` |
+| Default | `null` |
+
+---
+
+### usersRequestBuilder
+
+Controls which users load and in what order.
+
+| | |
+| --- | --- |
+| Type | `UsersRequestBuilder?` |
+| Default | SDK default (30 per page) |
+
+Pass the builder instance, not the result of `.build()`.
+
+---
+
+### usersStatusVisibility
+
+Shows or hides the online/offline status indicator on user avatars.
+
+| | |
+| --- | --- |
+| Type | `bool?` |
+| Default | `true` |
+
+---
+
+### usersStyle
+
+Styling options for the users list.
+
+| | |
+| --- | --- |
+| Type | `CometChatUsersStyle` |
+| Default | `CometChatUsersStyle()` |
+
+---
+
+### width
+
+Width of the widget.
+
+| | |
+| --- | --- |
+| Type | `double?` |
+| Default | `null` |
+
+---
+
+
+## Events
+
+`CometChatUsers` does not emit custom UI events. It subscribes to:
+
+| Event | Payload | Internal behavior |
+| --- | --- | --- |
+| `CometChatUserEvents.ccUserBlocked` | `User` | Updates blocked user in list |
+| `CometChatUserEvents.ccUserUnblocked` | `User` | Updates unblocked user in list |
+
+---
+
+## Customization Matrix
+
+| What to change | Where | Property/API | Example |
+| --- | --- | --- | --- |
+| Override behavior on user interaction | Component props | `on` callbacks | `onItemTap: (ctx, user) => setActive(user)` |
+| Filter which users appear | Component props | `usersRequestBuilder` | `usersRequestBuilder: UsersRequestBuilder()..friendsOnly = true` |
+| Toggle visibility of UI elements | Component props | `hide` / `show` boolean props | `hideSearch: true` |
+| Replace a section of the list item | Component props | `View` render props | `listItemView: (user) => CustomWidget()` |
+| Change colors, fonts, spacing | Component props | `usersStyle` | `usersStyle: CometChatUsersStyle(titleTextColor: Colors.red)` |
+
+---
+
+
+
+ Display recent one-on-one and group conversations
+
+
+ Display and manage group chats
+
+
+ Display messages in a conversation
+
+
+ Learn how to customize the look and feel
+
+
\ No newline at end of file
diff --git a/ui-kit/flutter/v6/call-buttons.mdx b/ui-kit/flutter/v6/call-buttons.mdx
deleted file mode 100644
index fdef3d6c4..000000000
--- a/ui-kit/flutter/v6/call-buttons.mdx
+++ /dev/null
@@ -1,131 +0,0 @@
----
-title: "Call Buttons"
----
-
-## Overview
-
-The `CometChatCallButtons` widget provides users with the ability to make calls, access call-related functionalities, and control call settings.
-
-## Usage
-
-### Integration
-
-
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_calls_uikit.dart';
-import 'package:flutter/material.dart';
-
-class CallButtonsExample extends StatefulWidget {
- const CallButtonsExample({super.key});
-
- @override
- State createState() => _CallButtonsExampleState();
-}
-
-class _CallButtonsExampleState extends State {
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: SafeArea(
- child: Center(child: CometChatCallButtons()),
- ),
- );
- }
-}
-```
-
-
-
-***
-
-### Actions
-
-##### onError
-
-
-
-```dart
-CometChatCallButtons(
- onError: (e) {
- // Handle error
- },
-)
-```
-
-
-
-***
-
-### Events
-
-| Event | Description |
-|---|---|
-| ccCallAccepted | Triggers when the outgoing call is accepted |
-| ccCallRejected | Triggers when the outgoing call is rejected |
-
-
-
-```dart
-class _YourScreenState extends State with CometChatCallEventListener {
- @override
- void initState() {
- super.initState();
- CometChatCallEvents.addCallEventsListener("unique_listener_ID", this);
- }
-
- @override
- void dispose() {
- super.dispose();
- CometChatCallEvents.removeCallEventsListener("unique_listener_ID");
- }
-
- @override
- void ccCallAccepted(Call call) {
- // Handle call accepted
- }
-
- @override
- void ccCallRejected(Call call) {
- // Handle call rejected
- }
-}
-```
-
-
-
-***
-
-## Customization
-
-### Style
-
-
-
-```dart
-CometChatCallButtons(
- callButtonsStyle: CometChatCallButtonsStyle(
- voiceCallIconColor: Color(0xFF6852D6),
- videoCallIconColor: Color(0xFF6852D6),
- voiceCallButtonColor: Color(0xFFEDEAFA),
- videoCallButtonColor: Color(0xFFEDEAFA),
- voiceCallButtonBorderRadius: BorderRadius.circular(12.5),
- videoCallButtonBorderRadius: BorderRadius.circular(12.5),
- ),
-)
-```
-
-
-
-### Functionality
-
-| Property | Description | Code |
-|---|---|---|
-| User | Set User object | `user: User?` |
-| Group | Set Group object | `group: Group?` |
-| CallSettingsBuilder | Configure call settings | `callSettingsBuilder: CallSettingsBuilder?` |
-| Hide Video Call | Hide video call button | `hideVideoCallButton: bool?` |
-| Hide Voice Call | Hide voice call button | `hideVoiceCallButton: bool?` |
-| Video Call Icon | Custom video call icon | `videoCallIcon: Icon?` |
-| Voice Call Icon | Custom voice call icon | `voiceCallIcon: Icon?` |
-| Outgoing Call Configuration | Configure outgoing call | `outgoingCallConfiguration: CometChatOutgoingCallConfiguration?` |
diff --git a/ui-kit/flutter/v6/call-features.mdx b/ui-kit/flutter/v6/call-features.mdx
deleted file mode 100644
index 916cd9bf9..000000000
--- a/ui-kit/flutter/v6/call-features.mdx
+++ /dev/null
@@ -1,173 +0,0 @@
----
-title: "Call"
----
-
-## Overview
-
-CometChat's Calls feature allows you to integrate one-on-one and group audio/video calling capabilities into your application. In V6, calling is built into the `cometchat_chat_uikit` package — no separate calls dependency needed.
-
-## Integration
-
-### Step 1: Add Dependency
-
-Since V6 is hosted on Cloudsmith, install via CLI:
-
-
-
-```bash
-dart pub add cometchat_chat_uikit:6.0.0-beta1 --hosted-url https://dart.cloudsmith.io/cometchat/cometchat/
-```
-
-
-
-Or add manually to `pubspec.yaml`:
-
-
-
-```yaml
-dependencies:
- cometchat_chat_uikit:
- hosted: https://dart.cloudsmith.io/cometchat/cometchat/
- version: 6.0.0-beta1
-```
-
-
-
-***
-
-### Step 2: Update build.gradle
-
-Set `minSdkVersion` to at least 24 in `android/app/build.gradle`:
-
-
-
-```gradle
-defaultConfig {
- minSdkVersion 24
- targetSdkVersion flutter.targetSdkVersion
- versionCode flutterVersionCode.toInteger()
- versionName flutterVersionName
-}
-```
-
-
-
-***
-
-### Step 3: Update iOS Podfile
-
-In `ios/Podfile`, set the minimum iOS version to 12:
-
-```
-platform :ios, '12.0'
-```
-
-***
-
-### Step 4: Modify UIKitSettings
-
-Activate calling features by setting `enableCalls` to `true` in UIKitSettings:
-
-
-
-```dart
-UIKitSettings uiKitSettings = (UIKitSettingsBuilder()
- ..subscriptionType = CometChatSubscriptionType.allUsers
- ..autoEstablishSocketConnection = true
- ..region = "REGION"
- ..appId = "APP_ID"
- ..authKey = "AUTH_KEY"
- ..enableCalls = true
- ..callingConfiguration = CallingConfiguration()
-).build();
-
-CometChatUIKit.init(uiKitSettings: uiKitSettings,
- onSuccess: (successMessage) {},
- onError: (e) {},
-);
-```
-
-
-
-To allow launching the Incoming Call screen from any widget, provide the navigator key:
-
-
-
-```dart
-MaterialApp(
- navigatorKey: CallNavigationContext.navigatorKey,
- home: YourHomeScreen(),
-)
-```
-
-
-
-### Listeners
-
-Register call listeners for top-level widgets:
-
-
-
-```dart
-class _YourClassNameState extends State with CallListener {
- @override
- void initState() {
- super.initState();
- CometChat.addCallListener(listenerId, this);
- }
-
- @override
- void dispose() {
- super.dispose();
- CometChat.removeCallListener(listenerId);
- }
-
- @override
- void onIncomingCallReceived(Call call) {
- debugPrint("onIncomingCallReceived");
- }
-
- @override
- void onOutgoingCallAccepted(Call call) {
- debugPrint("onOutgoingCallAccepted");
- }
-
- @override
- void onOutgoingCallRejected(Call call) {
- debugPrint("onOutgoingCallRejected");
- }
-
- @override
- void onIncomingCallCancelled(Call call) {
- debugPrint("onIncomingCallCancelled");
- }
-
- @override
- void onCallEndedMessageReceived(Call call) {
- debugPrint("onCallEndedMessageReceived");
- }
-
- @override
- Widget build(BuildContext context) {
- return const Placeholder();
- }
-}
-```
-
-
-
-***
-
-## Features
-
-### Incoming Call
-
-The Incoming Call widget lets users receive real-time audio and video calls. When a call is received, it displays caller information with accept/reject options.
-
-### Outgoing Call
-
-The Outgoing Call widget manages the outgoing call process. It displays recipient information and call status, and automatically transitions to the ongoing call screen when accepted.
-
-### Call Logs
-
-The [Call Logs](/ui-kit/flutter/v6/call-logs) widget displays records of call events including caller, time, and duration.
diff --git a/ui-kit/flutter/v6/call-logs.mdx b/ui-kit/flutter/v6/call-logs.mdx
deleted file mode 100644
index 6e68801d5..000000000
--- a/ui-kit/flutter/v6/call-logs.mdx
+++ /dev/null
@@ -1,628 +0,0 @@
----
-title: "Call Logs"
-description: "Scrollable list of call history showing caller info, call type, status, and timestamps."
----
-
-`CometChatCallLogs` renders a scrollable list of call history with call type indicators (audio/video), call status (incoming/outgoing/missed), timestamps, and pagination support.
-
-
-
-
-
-The `CometChatCallLogs` widget is composed of the following base widgets:
-
-| Widget | Description |
-|---|---|
-| CometChatListBase | Container widget with title, background options, and list integration |
-| CometChatListItem | Displays call log data on a card with title and subtitle |
-
----
-
-## Where It Fits
-
-`CometChatCallLogs` is a list component. It renders call history and emits the selected `CallLog` via `onItemClick`. Wire it to a detail screen or use `onCallLogIconClicked` to initiate a call directly from the log.
-
-
-
-```dart
-CometChatCallLogs(
- onItemClick: (callLog) {
- // Navigate to call log details or open chat
- Navigator.push(
- context,
- MaterialPageRoute(
- builder: (context) => CometChatCallLogDetails(callLog: callLog),
- ),
- );
- },
-)
-```
-
-
-
----
-
-## Quick Start
-
-Using Navigator:
-
-
-
-```dart
-Navigator.push(context, MaterialPageRoute(builder: (context) => const CometChatCallLogs()));
-```
-
-
-
-Embedding as a widget:
-
-
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_calls_uikit.dart';
-import 'package:flutter/material.dart';
-
-class CallLogsExample extends StatefulWidget {
- const CallLogsExample({super.key});
-
- @override
- State createState() => _CallLogsExampleState();
-}
-
-class _CallLogsExampleState extends State {
- @override
- Widget build(BuildContext context) {
- return const Scaffold(
- body: SafeArea(child: CometChatCallLogs()),
- );
- }
-}
-```
-
-
-
-Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()`, a user logged in, and the Calls UIKit dependency added. See [Call Features](/ui-kit/flutter/call-features) for setup.
-
----
-
-## Filtering Call Logs
-
-Pass a `CallLogRequestBuilder` to control what loads:
-
-
-
-```dart
-CometChatCallLogs(
- callLogsRequestBuilder: CallLogRequestBuilder()
- ..limit = 10
- ..hasRecording = true,
-)
-```
-
-
-
-### Filter Recipes
-
-| Recipe | Builder property |
-|---|---|
-| Limit per page | `..limit = 10` |
-| Audio calls only | `..callType = "audio"` |
-| Video calls only | `..callType = "video"` |
-| Missed calls only | `..callStatus = "missed"` |
-| Incoming calls only | `..callDirection = "incoming"` |
-| Outgoing calls only | `..callDirection = "outgoing"` |
-| Calls with recording | `..hasRecording = true` |
-| Calls for specific user | `..uid = "user_uid"` |
-| Calls for specific group | `..guid = "group_guid"` |
-| Call category (call/meet) | `..callCategory = "call"` |
-
-### Filter Properties
-
-| Property | Type | Description |
-|---|---|---|
-| `authToken` | `String?` | Authentication token |
-| `callCategory` | `String?` | Category: `"call"` or `"meet"` |
-| `callDirection` | `String?` | Direction: `"incoming"` or `"outgoing"` |
-| `callStatus` | `String?` | Status: `"ongoing"`, `"busy"`, `"rejected"`, `"cancelled"`, `"ended"`, `"missed"`, `"initiated"`, `"unanswered"` |
-| `callType` | `String?` | Type: `"audio"`, `"video"`, or `"audio/video"` |
-| `guid` | `String?` | Group ID filter |
-| `hasRecording` | `bool` | Filter calls with recordings |
-| `limit` | `int` | Max results per request |
-| `uid` | `String?` | User ID filter |
-
----
-
-## Actions and Events
-
-### Callback Methods
-
-#### `onItemClick`
-
-Fires when a call log item is tapped. Primary navigation hook.
-
-
-
-```dart
-CometChatCallLogs(
- onItemClick: (callLog) {
- // Navigate to call details or chat
- },
-)
-```
-
-
-
-#### `onItemLongPress`
-
-Fires when a call log item is long-pressed, allowing additional actions.
-
-
-
-```dart
-CometChatCallLogs(
- onItemLongPress: (CallLog callLog) {
- // Show context menu
- },
-)
-```
-
-
-
-#### `onBack`
-
-Fires when the user presses the back button in the app bar.
-
-
-
-```dart
-CometChatCallLogs(
- onBack: () {
- Navigator.pop(context);
- },
-)
-```
-
-
-
-#### `onError`
-
-Fires on internal errors (network failure, SDK exception).
-
-
-
-```dart
-CometChatCallLogs(
- onError: (e) {
- debugPrint("Error: ${e.message}");
- },
-)
-```
-
-
-
-#### `onLoad`
-
-Fires when the list is successfully fetched and loaded.
-
-
-
-```dart
-CometChatCallLogs(
- onLoad: (list) {
- debugPrint("Loaded ${list.length} call logs");
- },
-)
-```
-
-
-
-#### `onEmpty`
-
-Fires when the list is empty after loading.
-
-
-
-```dart
-CometChatCallLogs(
- onEmpty: () {
- debugPrint("No call logs found");
- },
-)
-```
-
-
-
-#### `onCallLogIconClicked`
-
-Fires when the call icon on a call log item is tapped, typically used to initiate a call back.
-
-
-
-```dart
-CometChatCallLogs(
- onCallLogIconClicked: (CallLog callLog) {
- // Initiate call back to this contact
- },
-)
-```
-
-
-
-### Events
-
-The `CometChatCallLogs` widget does not emit global events.
-
----
-
-## Functionality
-
-| Property | Type | Default | Description |
-|---|---|---|---|
-| `showBackButton` | `bool?` | `true` | Toggle back button visibility |
-| `hideAppbar` | `bool?` | `false` | Toggle app bar visibility |
-| `backButton` | `Widget?` | `null` | Custom back button widget |
-| `datePattern` | `String?` | `null` | Format pattern for date display |
-| `dateSeparatorPattern` | `String?` | `null` | Format pattern for date separator |
-| `hideSeparator` | `bool` | `false` | Hide separator between items |
-| `emptyStateText` | `String?` | `null` | Text for empty state |
-| `errorStateText` | `String?` | `null` | Text for error state |
-| `incomingAudioCallIcon` | `Icon?` | `null` | Custom icon for incoming audio calls |
-| `incomingVideoCallIcon` | `Icon?` | `null` | Custom icon for incoming video calls |
-| `outgoingAudioCallIcon` | `Icon?` | `null` | Custom icon for outgoing audio calls |
-| `outgoingVideoCallIcon` | `Icon?` | `null` | Custom icon for outgoing video calls |
-| `missedAudioCallIcon` | `Icon?` | `null` | Custom icon for missed audio calls |
-| `missedVideoCallIcon` | `Icon?` | `null` | Custom icon for missed video calls |
-| `infoIconUrl` | `String?` | `null` | URL for the info icon |
-| `loadingIconUrl` | `String?` | `null` | URL for the loading icon |
-
-**Example — custom back button:**
-
-
-
-```dart
-CometChatCallLogs(
- backButton: Icon(Icons.arrow_back_ios, color: Color(0xFF6851D6)),
-)
-```
-
-
-
-
-
-
----
-
-## Custom View Slots
-
-### List Item View
-
-Replace the entire list item row with a custom widget.
-
-
-
-```dart
-CometChatCallLogs(
- listItemView: (callLog, context) {
- final status = getCallStatus(context, callLog, CometChatUIKit.loggedInUser);
- IconData icon = Icons.call;
- Color? color;
- Color? textColor;
-
- if (status == "Incoming Call") {
- icon = Icons.phone_callback_rounded;
- color = Color(0xFF6852D6);
- } else if (status == "Outgoing Call") {
- icon = Icons.phone_forwarded;
- color = Color(0xFF6852D6);
- } else if (status == "Missed Call") {
- icon = Icons.phone_missed;
- color = Colors.red;
- textColor = Colors.red;
- }
-
- String name = _getCallLogName(callLog);
- String formattedDate = DateFormat('d MMM, hh:mm a').format(
- DateTime.fromMillisecondsSinceEpoch((callLog.initiatedAt ?? 0) * 1000),
- );
-
- return ListTile(
- leading: CircleAvatar(
- backgroundColor: Color(0xFFEDEAFA),
- child: Icon(icon, color: color, size: 24),
- ),
- title: Text(name, style: TextStyle(
- fontSize: 16, fontWeight: FontWeight.w500,
- color: textColor ?? Color(0xFF141414),
- )),
- subtitle: Text(status, style: TextStyle(
- color: Color(0xFF727272), fontSize: 14,
- )),
- trailing: Text(formattedDate, style: TextStyle(
- color: Color(0xFF727272), fontSize: 14,
- )),
- );
- },
-)
-```
-
-
-```dart
-static String getCallStatus(BuildContext context, CallLog callLog, User? loggedInUser) {
- String callMessageText = "";
- if (callLog.receiverType == ReceiverTypeConstants.user) {
- CallUser initiator = callLog.initiator as CallUser;
- bool isMe = initiator.uid == loggedInUser?.uid;
-
- switch (callLog.status) {
- case CallStatusConstants.initiated:
- callMessageText = isMe ? "Outgoing Call" : "Incoming Call";
- break;
- case CallStatusConstants.ongoing:
- callMessageText = "Call Accepted";
- break;
- case CallStatusConstants.ended:
- callMessageText = "Call Ended";
- break;
- case CallStatusConstants.unanswered:
- case CallStatusConstants.cancelled:
- case CallStatusConstants.rejected:
- case CallStatusConstants.busy:
- callMessageText = isMe ? "Call ${callLog.status}" : "Missed Call";
- break;
- }
- }
- return callMessageText;
-}
-```
-
-
-
-
-
-
-
-### Title View
-
-Replace the caller name / title text.
-
-
-
-```dart
-CometChatCallLogs(
- titleView: (callLog, context) {
- return Text(
- _getCallLogName(callLog),
- style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
- );
- },
-)
-```
-
-
-
-### Leading View
-
-Replace the avatar / left section.
-
-
-
-```dart
-CometChatCallLogs(
- leadingView: (callLog, context) {
- return CircleAvatar(
- backgroundColor: Color(0xFFEDEAFA),
- child: Icon(Icons.call, color: Color(0xFF6852D6)),
- );
- },
-)
-```
-
-
-
-### Subtitle View
-
-Replace the call status text below the name.
-
-
-
-```dart
-CometChatCallLogs(
- subTitleView: (callLog, context) {
- return Row(
- children: [
- _getCallIcon(callLog, CometChatUIKit.loggedInUser),
- SizedBox(width: 4),
- Text(
- getCallStatus(context, callLog, CometChatUIKit.loggedInUser),
- style: TextStyle(color: Color(0xFF727272), fontSize: 14),
- ),
- ],
- );
- },
-)
-```
-
-
-```dart
-static Widget _getCallIcon(CallLog callLog, User? loggedInUser) {
- bool isMe = (callLog.initiator as CallUser?)?.uid == loggedInUser?.uid;
-
- Widget incoming = Icon(Icons.call_received_outlined, color: Colors.red, size: 16);
- Widget outgoing = Icon(Icons.call_made_outlined, color: Color(0xFF09C26F), size: 16);
- Widget missed = Icon(Icons.call_received_outlined, color: Colors.red, size: 16);
-
- switch (callLog.status) {
- case CallStatusConstants.initiated:
- case CallStatusConstants.ongoing:
- case CallStatusConstants.ended:
- return isMe ? outgoing : incoming;
- case CallStatusConstants.unanswered:
- case CallStatusConstants.cancelled:
- case CallStatusConstants.rejected:
- case CallStatusConstants.busy:
- return isMe ? outgoing : missed;
- default:
- return const SizedBox();
- }
-}
-```
-
-
-
-
-
-
-
-### Trailing View
-
-Replace the timestamp / right section.
-
-
-
-```dart
-CometChatCallLogs(
- trailingView: (context, callLog) {
- String formattedDate = DateFormat('d MMM, hh:mm a').format(
- DateTime.fromMillisecondsSinceEpoch((callLog.initiatedAt ?? 0) * 1000),
- );
- return Text(
- formattedDate,
- style: TextStyle(color: Color(0xFF727272), fontSize: 14),
- );
- },
-)
-```
-
-
-
-
-
-
-
-### State Views
-
-
-
-```dart
-CometChatCallLogs(
- emptyStateView: (context) => Center(child: Text("No call logs yet")),
- errorStateView: (context) => Center(child: Text("Something went wrong")),
- loadingStateView: (context) => Center(child: CircularProgressIndicator()),
-)
-```
-
-
-
----
-
-## Menu Options
-
-
-
-```dart
-// Replace all options
-CometChatCallLogs(
- setOptions: (callLog, controller, context) {
- return [
- CometChatOption(
- id: "callback",
- iconWidget: Icon(Icons.call),
- title: "Call Back",
- onClick: () {
- // Initiate call back
- },
- ),
- ];
- },
-)
-
-// Append to defaults
-CometChatCallLogs(
- addOptions: (callLog, controller, context) {
- return [
- CometChatOption(
- id: "block",
- iconWidget: Icon(Icons.block),
- title: "Block Number",
- onClick: () {
- // Block this contact
- },
- ),
- ];
- },
-)
-```
-
-
-
----
-
-## Style
-
-
-
-```dart
-CometChatCallLogs(
- callLogsStyle: CometChatCallLogsStyle(
- titleTextColor: Color(0xFFF76808),
- separatorColor: Color(0xFFF76808),
- avatarStyle: CometChatAvatarStyle(
- borderRadius: BorderRadius.circular(8),
- backgroundColor: Color(0xFFFBAA75),
- ),
- ),
-)
-```
-
-
-
-
-
-
-
----
-
-## Configurations
-
-### Outgoing Call
-
-Customize the outgoing call component that appears when a call is initiated from a call log:
-
-
-
-```dart
-CometChatCallLogs(
- outgoingCallConfiguration: OutgoingCallConfiguration(
- subtitle: "Outgoing Call",
- outgoingCallStyle: OutgoingCallStyle(
- background: Color(0xFFE4EBF5),
- ),
- ),
-)
-```
-
-
-
-
-
-
-All exposed properties of `OutgoingCallConfiguration` can be found under [Outgoing Call](/ui-kit/flutter/outgoing-call).
-
----
-
-## Next Steps
-
-
-
- Build a call log details screen
-
-
- Add voice and video call buttons
-
-
- Detailed styling reference
-
-
- Browse recent conversations
-
-
diff --git a/ui-kit/flutter/v6/color-resources.mdx b/ui-kit/flutter/v6/color-resources.mdx
deleted file mode 100644
index a66658fd0..000000000
--- a/ui-kit/flutter/v6/color-resources.mdx
+++ /dev/null
@@ -1,108 +0,0 @@
----
-title: "Color Resources"
----
-
-## Introducing CometChatColorPalette
-
-The `CometChatColorPalette` class allows you to customize the colors used throughout your app. It works the same way in V6 as in V5 — you assign it to the `extensions` property of your `ThemeData`.
-
-Here's what you can customize:
-
-* Primary Colors — Main color scheme of your app
-* Neutral Colors — Balanced base for visuals
-* Alert Colors — Informative, warning, success, and error messages
-* Background Colors — Background shades for different areas
-* Text Colors — Text element colors for readability
-* Border Colors — Borders for buttons and cards
-* Icon Colors — App icon colors
-* Button Colors — Button background and text colors
-* Shimmer Colors — Loading animation colors
-
-### Light Mode
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatColorPalette(
- textSecondary: Color(0xFF727272),
- background1: Color(0xFFFFFFFF),
- textPrimary: Color(0xFF141414),
- borderLight: Color(0xFFF5F5F5),
- borderDark: Color(0xFFDCDCDC),
- iconSecondary: Color(0xFFA1A1A1),
- success: Color(0xFF09C26F),
- iconHighlight: Color(0xFF6852D6),
- extendedPrimary500: Color(0xFFAA9EE8),
- warning: Color(0xFFFAAB00),
- messageSeen: Color(0xFF56E8A7),
- neutral900: Color(0xFF141414),
- neutral600: Color(0xFF727272),
- neutral300: Color(0xFFE8E8E8),
- primary: Color(0xFF6852D6),
- ),
- ],
-)
-```
-
-
-
-### Dark Mode
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatColorPalette(
- textSecondary: Color(0xFF989898),
- background1: Color(0xFF1A1A1A),
- textPrimary: Color(0xFFFFFFFF),
- borderLight: Color(0xFF272727),
- iconSecondary: Color(0xFF858585),
- success: Color(0xFF0B9F5D),
- iconHighlight: Color(0xFF6852D6),
- extendedPrimary500: Color(0xFF3E3180),
- warning: Color(0xFFD08D04),
- messageSeen: Color(0xFF56E8A7),
- neutral900: Color(0xFFFFFFFF),
- neutral600: Color(0xFF989898),
- neutral300: Color(0xFF383838),
- primary: Color(0xFF6852D6),
- ),
- ],
-)
-```
-
-
-
-### Custom Colors
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatColorPalette(
- textSecondary: Color(0xFF727272),
- background1: Color(0xFFFFFFFF),
- textPrimary: Color(0xFF141414),
- borderLight: Color(0xFFF5F5F5),
- borderDark: Color(0xFFDCDCDC),
- iconSecondary: Color(0xFFA1A1A1),
- success: Color(0xFF09C26F),
- iconHighlight: Color(0xFFF76808),
- extendedPrimary500: Color(0xFFFBAA75),
- warning: Color(0xFFFAAB00),
- messageSeen: Color(0xFF56E8A7),
- neutral900: Color(0xFF141414),
- neutral600: Color(0xFF727272),
- neutral300: Color(0xFFE8E8E8),
- primary: Color(0xFFF76808),
- ),
- ],
-)
-```
-
-
diff --git a/ui-kit/flutter/v6/component-styling.mdx b/ui-kit/flutter/v6/component-styling.mdx
deleted file mode 100644
index e917226dc..000000000
--- a/ui-kit/flutter/v6/component-styling.mdx
+++ /dev/null
@@ -1,562 +0,0 @@
----
-title: "Component Styling"
-sidebarTitle: "Component Styling"
-description: "Customize visual appearance using ThemeData extensions or component-level style objects."
----
-
-The Flutter UI Kit uses `ThemeExtension` for styling. You can apply styles globally via `ThemeData` or pass style objects directly to components.
-
-## Two Approaches
-
-### 1. Global Theming via ThemeData
-
-Apply styles across your entire app by adding `ThemeExtension` objects to your `MaterialApp` theme:
-
-
-
-```dart
-MaterialApp(
- theme: ThemeData(
- extensions: [
- CometChatOutgoingMessageBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- ),
- CometChatIncomingMessageBubbleStyle(
- backgroundColor: Color(0xFFFEEDE1),
- ),
- CometChatActionBubbleStyle(
- textStyle: TextStyle(color: Color(0xFFF76808)),
- backgroundColor: Color(0xFFFEEDE1),
- ),
- ],
- ),
- home: YourApp(),
-)
-```
-
-
-
-### 2. Component-Level Styles
-
-Pass style objects directly to a component. These override global theme values:
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- style: CometChatMessageListStyle(
- backgroundColor: Color(0xFFFEEDE1),
- outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- ),
- incomingMessageBubbleStyle: CometChatIncomingMessageBubbleStyle(
- backgroundColor: Colors.white,
- ),
- ),
-)
-```
-
-
-
-## Style Precedence
-
-```
-Component style prop > ThemeData extension > Default theme
-```
-
----
-
-## Style Classes by Component
-
-| Component | Style Class |
-|---|---|
-| `CometChatConversations` | `CometChatConversationsStyle` |
-| `CometChatUsers` | `CometChatUsersStyle` |
-| `CometChatGroups` | `CometChatGroupsStyle` |
-| `CometChatGroupMembers` | `CometChatGroupMembersStyle` |
-| `CometChatMessageList` | `CometChatMessageListStyle` |
-| `CometChatMessageComposer` | `CometChatMessageComposerStyle` |
-| `CometChatMessageHeader` | `CometChatMessageHeaderStyle` |
-
-## Message Bubble Styles
-
-The message list style contains nested styles for incoming and outgoing bubbles:
-
-
-
-```dart
-CometChatMessageListStyle(
- outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
- textBubbleStyle: CometChatTextBubbleStyle(...),
- imageBubbleStyle: CometChatImageBubbleStyle(...),
- videoBubbleStyle: CometChatVideoBubbleStyle(...),
- audioBubbleStyle: CometChatAudioBubbleStyle(...),
- fileBubbleStyle: CometChatFileBubbleStyle(...),
- deletedBubbleStyle: CometChatDeletedBubbleStyle(...),
- pollsBubbleStyle: CometChatPollsBubbleStyle(...),
- stickerBubbleStyle: CometChatStickerBubbleStyle(...),
- collaborativeWhiteboardBubbleStyle: CometChatCollaborativeBubbleStyle(...),
- collaborativeDocumentBubbleStyle: CometChatCollaborativeBubbleStyle(...),
- linkPreviewBubbleStyle: CometChatLinkPreviewBubbleStyle(...),
- videoCallBubbleStyle: CometChatCallBubbleStyle(...),
- ),
- incomingMessageBubbleStyle: CometChatIncomingMessageBubbleStyle(
- // Same nested style structure
- ),
-)
-```
-
-
-
-See [Message Bubble Styling](/ui-kit/flutter/v6/message-bubble-styling) for per-bubble-type examples.
-
----
-
-## Component Style Examples
-
-### Conversations
-
-
-
-```dart
-ThemeData(
- fontFamily: 'Times New Roman',
- extensions: [
- CometChatConversationsStyle(
- avatarStyle: CometChatAvatarStyle(
- borderRadius: BorderRadius.circular(8),
- backgroundColor: Color(0xFFFBAA75),
- ),
- badgeStyle: CometChatBadgeStyle(
- backgroundColor: Color(0xFFF76808),
- ),
- ),
- ],
-)
-```
-
-
-
-### Message List
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatMessageListStyle(
- backgroundColor: Color(0xFFFEEDE1),
- outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- ),
- ),
- ],
-)
-```
-
-
-
-### Message Composer
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatMessageComposerStyle(
- sendButtonIconBackgroundColor: Color(0xFFF76808),
- secondaryButtonIconColor: Color(0xFFF76808),
- auxiliaryButtonIconColor: Color(0xFFF76808),
- ),
- ],
-)
-```
-
-
-
-### Message Header
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatMessageHeaderStyle(
- avatarStyle: CometChatAvatarStyle(
- backgroundColor: Color(0xFFFBAA75),
- borderRadius: BorderRadius.circular(6.67),
- ),
- ),
- ],
-)
-```
-
-
-
-### Users
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatUsersStyle(
- avatarStyle: CometChatAvatarStyle(
- borderRadius: BorderRadius.circular(8),
- backgroundColor: Color(0xFFFBAA75),
- ),
- titleTextColor: Color(0xFFF76808),
- separatorColor: Color(0xFFF76808),
- backgroundColor: Color(0xFFFFF9F5),
- ),
- ],
-)
-```
-
-
-
-### Groups
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatGroupsStyle(
- avatarStyle: CometChatAvatarStyle(
- borderRadius: BorderRadius.circular(8),
- backgroundColor: Color(0xFFFBAA75),
- ),
- titleTextColor: Color(0xFFF76808),
- separatorColor: Color(0xFFF76808),
- backgroundColor: Color(0xFFFFF9F5),
- ),
- ],
-)
-```
-
-
-
-### Group Members
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatGroupMembersStyle(
- avatarStyle: CometChatAvatarStyle(
- borderRadius: BorderRadius.circular(8),
- backgroundColor: Color(0xFFFBAA75),
- ),
- titleStyle: TextStyle(color: Color(0xFFF76808)),
- separatorColor: Color(0xFFF76808),
- ownerMemberScopeBackgroundColor: Color(0xFFF76808),
- adminMemberScopeBackgroundColor: Color(0xFFFEEDE1),
- adminMemberScopeBorder: Border.all(color: Color(0xFFF76808)),
- adminMemberScopeTextColor: Color(0xFFF76808),
- ),
- ],
-)
-```
-
-
-
-### AI Assistant Chat History
-
-
-
-```dart
-final ccColor = CometChatThemeHelper.getColorPalette(context);
-CometChatAIAssistantChatHistory(
- user: user,
- style: CometChatAIAssistantChatHistoryStyle(
- backgroundColor: const Color(0xFFFFFAF6),
- headerBackgroundColor: const Color(0xFFFFFAF6),
- headerTitleTextColor: ccColor.textPrimary,
- ),
-)
-```
-
-
-
----
-
-## Base Component Styles
-
-
-### Avatar
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatAvatarStyle(
- borderRadius: BorderRadius.circular(8),
- backgroundColor: Color(0xFFFBAA75),
- ),
- ],
-)
-```
-
-
-
-### Status Indicator
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatStatusIndicatorStyle(
- backgroundColor: Color(0xFFFFAB00),
- borderRadius: BorderRadius.circular(2),
- ),
- ],
-)
-```
-
-
-
-### Badge
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatBadgeStyle(
- borderRadius: BorderRadius.circular(4),
- backgroundColor: Color(0xFFF44649),
- ),
- ],
-)
-```
-
-
-
-### Receipts
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatMessageReceiptStyle(
- readIconColor: Color(0xFFFFAB00),
- ),
- ],
-)
-```
-
-
-
-### Media Recorder
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatMediaRecorderStyle(
- recordIndicatorBackgroundColor: Color(0xFFF44649),
- recordIndicatorBorderRadius: BorderRadius.circular(20),
- pauseButtonBorderRadius: BorderRadius.circular(8),
- deleteButtonBorderRadius: BorderRadius.circular(8),
- stopButtonBorderRadius: BorderRadius.circular(8),
- ),
- ],
-)
-```
-
-
-
-### Reactions
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatReactionsStyle(
- borderRadius: BorderRadius.circular(8),
- ),
- ],
-)
-```
-
-
-
-### Reaction List
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatReactionListStyle(
- activeTabTextColor: Color(0xFFF76808),
- activeTabIndicatorColor: Color(0xFFF76808),
- ),
- ],
-)
-```
-
-
-
-### Conversation Starter
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatAIConversationStarterStyle(
- backgroundColor: Color(0xFFFEEDE1),
- border: Border.all(color: Color(0xFFFBBB90)),
- ),
- ],
-)
-```
-
-
-
-### Conversation Summary
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatAIConversationSummaryStyle(
- backgroundColor: Color(0xFFFEEDE1),
- titleStyle: TextStyle(color: Color(0xFFF76808)),
- ),
- ],
-)
-```
-
-
-
-### Smart Replies
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatAISmartRepliesStyle(
- backgroundColor: Color(0xFFFEEDE1),
- titleStyle: TextStyle(color: Color(0xFFF76808)),
- itemBackgroundColor: Color(0xFFFFF9F5),
- itemBorder: Border.all(color: Color(0xFFFBBB90)),
- ),
- ],
-)
-```
-
-
-
-### Message Information
-
-
-
-```dart
-ThemeData(
- fontFamily: "Times New Roman",
- extensions: [
- CometChatOutgoingMessageBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- ),
- CometChatMessageInformationStyle(
- backgroundHighLightColor: Color(0xFFFEEDE1),
- messageReceiptStyle: CometChatMessageReceiptStyle(
- readIconColor: Color(0xFFF76808),
- ),
- ),
- ],
-)
-```
-
-
-
-### Message Option Sheet
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatMessageOptionSheetStyle(
- backgroundColor: Color(0xFFFEEDE1),
- iconColor: Color(0xFFF76808),
- ),
- ],
-)
-```
-
-
-
-### Attachment Option Sheet
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatAttachmentOptionSheetStyle(
- backgroundColor: Color(0xFFFEEDE1),
- iconColor: Color(0xFFF76808),
- ),
- ],
-)
-```
-
-
-
-### AI Option Sheet
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatAiOptionSheetStyle(
- backgroundColor: Color(0xFFFFF9F5),
- iconColor: Color(0xFFF76808),
- ),
- ],
-)
-```
-
-
-
-### Mentions
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatMentionsStyle(
- mentionSelfTextBackgroundColor: Color(0xFFF76808),
- mentionTextBackgroundColor: Colors.white,
- mentionTextColor: Colors.black,
- mentionSelfTextColor: Colors.white,
- ),
- ],
-)
-```
-
-
-
----
-
-## Related
-
-- [Message Bubble Styling](/ui-kit/flutter/v6/message-bubble-styling) — Per-bubble-type style examples.
-- [Color Resources](/ui-kit/flutter/v6/color-resources) — Color palette customization.
-- [Theme Introduction](/ui-kit/flutter/v6/theme-introduction) — Theme system overview (ColorPalette, Typography, Spacing).
-- [Customization Overview](/ui-kit/flutter/v6/customization-overview) — All customization categories.
\ No newline at end of file
diff --git a/ui-kit/flutter/v6/components-overview.mdx b/ui-kit/flutter/v6/components-overview.mdx
deleted file mode 100644
index a643de7ee..000000000
--- a/ui-kit/flutter/v6/components-overview.mdx
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: "Overview"
----
-
-CometChat's **UI Kit V6** is a set of pre-built UI Widgets that allows you to easily craft an in-app chat with all the essential messaging features, built on clean architecture with BLoC state management.
-
-## Type of Widget
-
-UI Widgets based on behaviour and functionality can be categorized into two types: Base Widget and Widget.
-
-### Base Widget
-
-Base Widgets form the building blocks of your app's user interface (UI). They focus solely on presenting visual elements based on input data, without handling any business logic. These Widgets provide the foundational appearance and behavior for your UI.
-
-### Widget
-
-Widgets build upon Base Widgets by incorporating business logic via BLoC pattern. They not only render UI elements but also manage data loading through use cases and repositories, execute specific actions, and respond to events. This combination of visual presentation and functional capabilities makes Widgets essential for creating dynamic and interactive UIs.
-
-> **V6 Note:** V6 does not have Composite Widgets like `CometChatMessages` or `CometChatConversationsWithMessages`. Instead, you compose the UI yourself using individual Widgets (`CometChatMessageList`, `CometChatMessageComposer`, `CometChatMessageHeader`). This gives you full control over layout and behavior.
-
-## Architecture
-
-Each Widget in V6 follows clean architecture internally:
-
-| Layer | Purpose | Example |
-|---|---|---|
-| `bloc/` | State management (events, states, BLoC) | `ConversationsBloc`, `ConversationsEvent`, `ConversationsState` |
-| `data/` | Data sources and repository implementations | `ConversationsRemoteDatasource`, `ConversationsRepositoryImpl` |
-| `domain/` | Use cases and repository interfaces | `GetConversationsUseCase`, `ConversationsRepository` |
-| `di/` | Dependency injection | `ConversationsServiceLocator` |
-| `widgets/` | Decomposed sub-widgets | `ConversationsList`, `ConversationsEmptyView` |
-
-## Actions
-
-Actions direct the operational behavior of a component. They are split into two categories: Predefined Actions and User-Defined Actions.
-
-### Predefined Actions
-
-These are actions inherently programmed into a UI component. They execute automatically in response to user interaction, without needing any additional user input.
-
-### User-Defined Actions
-
-These are actions that must be explicitly specified by the user. They provide adaptability and allow for the creation of custom behaviors that align with the individual needs of the application.
-
-To customize the behavior of a component, actions must be overridden by the user. This provides the user with control over how the component responds to specific events or interactions.
-
-## Events
-
-Events allow for a decoupled, flexible architecture where different parts of the application can interact without having to directly reference each other. This makes it easier to create complex, interactive experiences, as well as to extend and customize the functionality provided by the CometChat UI Kit.
-
-Widgets have the ability to emit events. These events are dispatched in response to certain changes or user interactions within the component. By emitting events, these Widgets allow other parts of the application to react to changes or interactions, thus enabling dynamic and interactive behavior within the application.
-
-## Configurations
-
-Configurations offer the ability to customize the properties of each individual component. Each Widget has its own set of properties that can be configured, allowing for fine-tuned customization to tailor behavior and appearance to match specific requirements in a granular manner.
diff --git a/ui-kit/flutter/v6/conversations.mdx b/ui-kit/flutter/v6/conversations.mdx
deleted file mode 100644
index edad71b1b..000000000
--- a/ui-kit/flutter/v6/conversations.mdx
+++ /dev/null
@@ -1,622 +0,0 @@
----
-title: "Conversations"
-description: "Scrollable list of recent one-on-one and group conversations for the logged-in user."
----
-
-`CometChatConversations` renders a scrollable list of recent conversations with real-time updates for new messages, typing indicators, read receipts, and user presence.
-
----
-
-## Where It Fits
-
-`CometChatConversations` is a list component. It renders recent conversations and emits the selected `Conversation` via `onItemTap`. Wire it to `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer` to build a standard chat layout.
-
-
-
-```dart
-CometChatConversations(
- onItemTap: (conversation) {
- final entity = conversation.conversationWith;
- if (entity is User) {
- navigateToUserChat(entity);
- } else if (entity is Group) {
- navigateToGroupChat(entity);
- }
- },
-)
-```
-
-
-
----
-
-## Quick Start
-
-Using Navigator:
-
-
-
-```dart
-Navigator.push(context, MaterialPageRoute(builder: (context) => const CometChatConversations()));
-```
-
-
-
-Embedding as a widget:
-
-
-
-```dart
-@override
-Widget build(BuildContext context) {
- return Scaffold(
- body: SafeArea(
- child: CometChatConversations(),
- ),
- );
-}
-```
-
-
-
-Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()`, a user logged in, and the UI Kit dependency added.
-
----
-
-## Filtering Conversations
-
-Pass a `ConversationsRequestBuilder` to control what loads:
-
-
-
-```dart
-CometChatConversations(
- conversationsRequestBuilder: ConversationsRequestBuilder()
- ..conversationType = "user"
- ..limit = 10,
-)
-```
-
-
-
-### Filter Recipes
-
-| Recipe | Builder property |
-| --- | --- |
-| Only user conversations | `..conversationType = "user"` |
-| Only group conversations | `..conversationType = "group"` |
-| Limit per page | `..limit = 10` |
-| With tags | `..tags = ["vip"]` and `..withTags = true` |
-| With user and group tags | `..withUserAndGroupTags = true` |
-
----
-
-## Actions and Events
-
-### Callback Methods
-
-#### `onItemTap`
-
-Fires when a conversation row is tapped. Primary navigation hook.
-
-
-
-```dart
-CometChatConversations(
- onItemTap: (conversation) {
- // Navigate to chat screen
- },
-)
-```
-
-
-
-#### `onItemLongPress`
-
-Fires when a conversation row is long-pressed. By default shows a delete overlay (when `deleteConversationOptionVisibility` is true).
-
-
-
-```dart
-CometChatConversations(
- onItemLongPress: (conversation) {
- // Custom long press behavior
- },
-)
-```
-
-
-
-#### `onBack`
-
-Fires when the user presses the back button in the app bar.
-
-
-
-```dart
-CometChatConversations(
- onBack: () {
- Navigator.pop(context);
- },
-)
-```
-
-
-
-#### `onSelection`
-
-Fires when conversations are selected/deselected in multi-select mode.
-
-
-
-```dart
-CometChatConversations(
- selectionMode: SelectionMode.multiple,
- onSelection: (selectedConversations) {
- // Handle selected conversations
- },
-)
-```
-
-
-
-#### `onError`
-
-Fires on internal errors (network failure, auth issue, SDK exception).
-
-
-
-```dart
-CometChatConversations(
- onError: (e) {
- debugPrint("Error: ${e.message}");
- },
-)
-```
-
-
-
-#### `onLoad`
-
-Fires when the list is successfully fetched and loaded.
-
-
-
-```dart
-CometChatConversations(
- onLoad: (conversations) {
- debugPrint("Loaded ${conversations.length}");
- },
-)
-```
-
-
-
-#### `onEmpty`
-
-Fires when the list is empty after loading.
-
-
-
-```dart
-CometChatConversations(
- onEmpty: () {
- debugPrint("No conversations");
- },
-)
-```
-
-
-
-### Global Events
-
-The component emits events via `CometChatConversationEvents` that can be subscribed to from anywhere:
-
-
-
-```dart
-class _YourScreenState extends State with CometChatConversationEventListener {
-
- @override
- void initState() {
- super.initState();
- CometChatConversationEvents.addConversationListListener("listenerId", this);
- }
-
- @override
- void dispose() {
- CometChatConversationEvents.removeConversationListListener("listenerId");
- super.dispose();
- }
-
- @override
- void ccConversationDeleted(Conversation conversation) {
- // Handle conversation deleted
- }
-}
-```
-
-
-
-### SDK Events (Real-Time, Automatic)
-
-The component listens to these SDK events internally. No manual setup needed.
-
-| SDK Listener | Internal behavior |
-| --- | --- |
-| `onTextMessageReceived` / `onMediaMessageReceived` / `onCustomMessageReceived` | Moves conversation to top, updates last message and unread count |
-| `onTypingStarted` / `onTypingEnded` | Shows/hides typing indicator in subtitle |
-| `onMessagesDelivered` / `onMessagesRead` | Updates receipt indicators |
-| `onUserOnline` / `onUserOffline` | Updates presence status dot |
-| `onGroupMemberJoined` / `onGroupMemberLeft` / `onGroupMemberKicked` / `onGroupMemberBanned` | Updates group conversation metadata |
-| Connection reconnected | Triggers silent refresh to sync missed messages |
-
----
-
-## Functionality
-
-| Property | Type | Default | Description |
-| --- | --- | --- | --- |
-| `title` | `String?` | `null` | Custom app bar title |
-| `showBackButton` | `bool` | `false` | Toggle back button |
-| `hideAppbar` | `bool?` | `false` | Toggle app bar visibility |
-| `hideSearch` | `bool?` | `null` | Toggle search bar |
-| `searchReadOnly` | `bool` | `false` | Make search bar read-only (tap opens custom search) |
-| `deleteConversationOptionVisibility` | `bool?` | `true` | Show delete option on long press |
-| `groupTypeVisibility` | `bool?` | `true` | Show group type icon on avatar |
-| `usersStatusVisibility` | `bool?` | `true` | Show online/offline status indicator |
-| `receiptsVisibility` | `bool?` | `true` | Show message receipts |
-| `disableSoundForMessages` | `bool` | `false` | Disable message sounds |
-| `customSoundForMessages` | `String?` | `null` | Custom notification sound asset path |
-| `selectionMode` | `SelectionMode?` | `null` | Enable selection mode (`single` or `multiple`) |
-
----
-
-## Custom View Slots
-
-### Leading View
-
-Replace the avatar / left section.
-
-
-
-```dart
-CometChatConversations(
- leadingView: (context, conversation) {
- return CircleAvatar(
- child: Text(conversation.conversationWith?.name?[0] ?? ""),
- );
- },
-)
-```
-
-
-
-### Title View
-
-Replace the name / title text.
-
-
-
-```dart
-CometChatConversations(
- titleView: (context, conversation) {
- return Text(
- conversation.conversationWith?.name ?? "",
- style: TextStyle(fontWeight: FontWeight.bold),
- );
- },
-)
-```
-
-
-
-### Subtitle View
-
-Replace the last message preview.
-
-
-
-```dart
-CometChatConversations(
- subtitleView: (context, conversation) {
- final msg = conversation.lastMessage;
- if (msg is TextMessage) {
- return Text(msg.text, maxLines: 1, overflow: TextOverflow.ellipsis);
- }
- return Text("New conversation");
- },
-)
-```
-
-
-
-### Trailing View
-
-Replace the timestamp / badge / right section.
-
-
-
-```dart
-CometChatConversations(
- trailingView: (conversation) {
- if (conversation.unreadMessageCount > 0) {
- return Badge(label: Text("${conversation.unreadMessageCount}"));
- }
- return null;
- },
-)
-```
-
-
-
-### List Item View
-
-Replace the entire list item row.
-
-
-
-```dart
-CometChatConversations(
- listItemView: (conversation) {
- return ListTile(
- leading: CircleAvatar(child: Text(conversation.conversationWith?.name?[0] ?? "")),
- title: Text(conversation.conversationWith?.name ?? ""),
- subtitle: Text("Custom item"),
- );
- },
-)
-```
-
-
-
-### State Views
-
-
-
-```dart
-CometChatConversations(
- emptyStateView: (context) => Center(child: Text("No conversations yet")),
- errorStateView: (context) => Center(child: Text("Something went wrong")),
- loadingStateView: (context) => Center(child: CircularProgressIndicator()),
-)
-```
-
-
-
----
-
-## Menu Options
-
-
-
-```dart
-// Replace all options
-CometChatConversations(
- setOptions: (conversation, bloc, context) {
- return [
- CometChatOption(
- id: "delete",
- icon: AssetConstants.delete,
- title: "Delete",
- onClick: () {
- bloc.add(DeleteConversation(conversation.conversationId!));
- },
- ),
- ];
- },
-)
-
-// Append to defaults
-CometChatConversations(
- addOptions: (conversation, bloc, context) {
- return [
- CometChatOption(
- id: "archive",
- iconWidget: Icon(Icons.archive_outlined),
- title: "Archive",
- onClick: () {
- // Archive conversation
- },
- ),
- ];
- },
-)
-```
-
-
-
----
-
-## Common Patterns
-
-### Minimal list — hide all chrome
-
-
-
-```dart
-CometChatConversations(
- hideAppbar: true,
- hideSearch: true,
-)
-```
-
-
-
-### Users-only conversations
-
-
-
-```dart
-CometChatConversations(
- conversationsRequestBuilder: ConversationsRequestBuilder()
- ..conversationType = "user",
-)
-```
-
-
-
-### Custom date formatting
-
-
-
-```dart
-CometChatConversations(
- datePattern: (conversation) {
- final timestamp = conversation.updatedAt;
- return DateFormat('MMM d').format(DateTime.fromMillisecondsSinceEpoch(timestamp! * 1000));
- },
-)
-```
-
-
-
----
-
-## Advanced
-
-### BLoC Access
-
-Provide a custom `ConversationsBloc` to override behavior:
-
-
-
-```dart
-CometChatConversations(
- conversationsBloc: CustomConversationsBloc(),
-)
-```
-
-
-
-### Extending ConversationsBloc
-
-`ConversationsBloc` uses the `ListBase` mixin with override hooks for custom list behavior:
-
-
-
-```dart
-class CustomConversationsBloc extends ConversationsBloc {
- @override
- void onItemAdded(Conversation item, List updatedList) {
- // Custom sorting — pinned conversations first
- final sorted = _sortWithPinnedFirst(updatedList);
- super.onItemAdded(item, sorted);
- }
-
- @override
- void onListReplaced(List previousList, List newList) {
- // Filter out blocked users on every list refresh
- final filtered = newList.where((c) => !isBlocked(c)).toList();
- super.onListReplaced(previousList, filtered);
- }
-}
-```
-
-
-
-For `ListBase` override hooks (`onItemAdded`, `onItemRemoved`, `onItemUpdated`, `onListCleared`, `onListReplaced`), see [BLoC & Data — ListBase Hooks](/ui-kit/flutter/v6/customization-bloc-data#listbase-hooks).
-
-### Public BLoC Events
-
-| Event | Description |
-| --- | --- |
-| `LoadConversations({silent})` | Load initial conversations. `silent: true` keeps existing list visible during refresh. |
-| `LoadMoreConversations()` | Load next page (pagination) |
-| `RefreshConversations()` | Refresh the list |
-| `DeleteConversation(conversationId)` | Delete via SDK and remove from list |
-| `RemoveConversation(conversationId)` | Remove from list without SDK call |
-| `SetActiveConversation(conversationId)` | Mark as active (suppresses unread count) |
-| `UpdateConversation(conversationId, updatedConversation)` | Update with modified data |
-| `ResetUnreadCount(conversationId)` | Reset unread count to 0 |
-
-### Public BLoC Methods
-
-| Method | Returns | Description |
-| --- | --- | --- |
-| `getTypingNotifier(conversationId)` | `ValueNotifier>` | Per-conversation typing notifier for isolated rebuilds |
-| `getTypingIndicators(conversationId)` | `List` | Current typing indicators for a conversation |
-
-### Route Observer
-
-Pass a `RouteObserver` to freeze rebuilds when another screen is pushed on top (prevents expensive rebuilds during keyboard animation):
-
-
-
-```dart
-// In your app
-final RouteObserver> routeObserver = RouteObserver>();
-
-MaterialApp(
- navigatorObservers: [routeObserver],
-)
-
-// Pass to conversations
-CometChatConversations(
- routeObserver: routeObserver,
-)
-```
-
-
-
----
-
-## Style
-
-
-
-```dart
-CometChatConversations(
- conversationsStyle: CometChatConversationsStyle(
- backgroundColor: Colors.white,
- avatarStyle: CometChatAvatarStyle(
- borderRadius: BorderRadius.circular(8),
- backgroundColor: Color(0xFFFBAA75),
- ),
- badgeStyle: CometChatBadgeStyle(
- backgroundColor: Color(0xFFF76808),
- ),
- receiptStyle: CometChatMessageReceiptStyle(),
- typingIndicatorStyle: CometChatTypingIndicatorStyle(),
- dateStyle: CometChatDateStyle(),
- mentionsStyle: CometChatMentionsStyle(),
- deleteConversationDialogStyle: CometChatConfirmDialogStyle(),
- ),
-)
-```
-
-
-
-### Style Properties
-
-| Property | Description |
-| --- | --- |
-| `backgroundColor` | List background color |
-| `avatarStyle` | Avatar appearance |
-| `badgeStyle` | Unread badge appearance |
-| `receiptStyle` | Read receipt icons |
-| `typingIndicatorStyle` | Typing indicator text |
-| `dateStyle` | Timestamp appearance |
-| `mentionsStyle` | Mention highlight style |
-| `deleteConversationDialogStyle` | Delete confirmation dialog |
-
-See [Component Styling](/ui-kit/flutter/v6/component-styling) for the full reference.
-
----
-
-## Next Steps
-
-
-
- Browse and search available users
-
-
- Display messages for a conversation
-
-
- Detailed styling reference
-
-
- Customize message bubble structure
-
-
\ No newline at end of file
diff --git a/ui-kit/flutter/v6/core-features.mdx b/ui-kit/flutter/v6/core-features.mdx
deleted file mode 100644
index a6adbd4ee..000000000
--- a/ui-kit/flutter/v6/core-features.mdx
+++ /dev/null
@@ -1,131 +0,0 @@
----
-title: "Core Features"
----
-
-## Overview
-
-The UI Kit comprises a variety of widgets, each designed to work seamlessly with one another to deliver a comprehensive and intuitive chat experience. Here's how different UI Kit widgets work together to achieve CometChat's Core features:
-
-## Instant Messaging
-
-At the heart of CometChat's functionality is the ability to support real-time text messaging. Users can send and receive instant messages, fostering quick and efficient communication.
-
-| Widgets | Functionality |
-|---|---|
-| MessageComposer | Enables users to write and send a variety of messages. In V6, powered by `MessageComposerBloc` with rich text formatting support. |
-| MessageList | Renders a list of messages sent and received using TextBubble. In V6, powered by `MessageListBloc` with `diffutil_dart` for efficient updates. |
-
-## Media Sharing
-
-Beyond text, CometChat allows users to share various media types within their conversations — images, videos, audio files, and documents.
-
-| Widgets | Functionality |
-|---|---|
-| MessageComposer | Has ActionSheet for sharing media files. V6 adds inline audio recorder and multi-attachment support (in progress). |
-| MessageList | Renders different Media Message bubbles like Image Bubble, File Bubble, Audio Bubble, Video Bubble. |
-
-## Read Receipts
-
-CometChat's Read Receipts feature provides visibility into the message status, letting users know when a message has been delivered and read.
-
-| Widgets | Functionality |
-|---|---|
-| Conversations | Displays the delivery status of the last message. |
-| MessageList | Read receipt status is an integral part of all message bubbles. |
-| MessageInformation | Provides transparency into the status of each sent message. |
-
-## Mark As Unread
-
-Mark as Unread feature allows users to manually mark messages as unread, helping them keep track of important conversations they want to revisit later.
-
-| Widgets | Functionality |
-|---|---|
-| Message List | Provides the "Mark as unread" option in message actions and supports starting from the first unread message. |
-| Conversations | Reflects the updated unread count in real-time. |
-
-## Typing Indicator
-
-The Typing Indicator feature shows when a user is typing a response in real-time.
-
-| Widgets | Functionality |
-|---|---|
-| Conversations | Shows real-time typing status indicators in conversation items. |
-| Message Header | Dynamically updates to display a 'typing…' status in real-time. |
-
-## User Presence
-
-CometChat's User Presence feature allows users to see whether their contacts are online or offline.
-
-| Widgets | Functionality |
-|---|---|
-| Conversations | Shows user presence information in conversation items. |
-| Message Header | Handles user Presence information in the toolbar. |
-| Users | Renders users Presence information in the user list. |
-| Group Members | Handles user Presence information in the member list. |
-
-## Reactions
-
-CometChat's Reactions feature allows users to react to messages with emojis.
-
-| Widgets | Functionality |
-|---|---|
-| MessageList | Reactions are an integral part of all message bubbles. Width-aware display shows visible reactions + "+N" overflow indicator. |
-
-## Mentions
-
-Mentions enhances interactivity by allowing users to directly address specific individuals in a conversation. Supports `@all` for group mentions.
-
-| Widgets | Functionality |
-|---|---|
-| Conversations | Shows where users have been specifically mentioned. |
-| MessageComposer | Allows users to use the Mentions feature for direct addressing. |
-| MessageList | Supports the rendering of Mentions in messages. |
-
-## Quoted Reply
-
-Quoted Reply enables users to quickly reply to specific messages by selecting the "Reply" option from a message's action menu.
-
-| Widgets | Functionality |
-|---|---|
-| MessageList | Supports replying to messages via the "Reply" option. |
-| MessageComposer | Shows the quoted reply above the input field using `CometChatMessagePreview` (renamed from `CometChatEditPreview` in V5). |
-
-## Threaded Conversations
-
-The Threaded Conversations feature enables users to respond directly to a specific message in a chat.
-
-| Widgets | Functionality |
-|---|---|
-| Threaded Messages | Displays all replies made to a particular message. In V6, powered by `ThreadedHeaderBloc`. |
-
-## Conversation and Advanced Search
-
-Enables users to quickly find conversations, messages, and media across chats in real time.
-
-| Widgets | Functionality |
-|---|---|
-| Search | Allows users to search across conversations and messages. In V6, powered by a single consolidated `SearchBloc`. |
-| Message Header | Shows the search button in the chat header. |
-| MessageList | Shows the selected message when clicked from search results. |
-
-## Moderation
-
-CometChat's Message Moderation feature helps maintain a safe and respectful chat environment by automatically filtering and managing inappropriate content.
-
-| Widgets | Functionality |
-|---|---|
-| Message List | Automatically handles moderated messages, displaying blocked content appropriately. |
-
-## Report Message
-
-The Report Message feature allows users to report inappropriate or harmful messages within the chat.
-
-| Widgets | Functionality |
-|---|---|
-| MessageList | Provides the "Report Message" option in the message actions menu. |
-
-## Group Chat
-
-CometChat facilitates Group Chats, allowing users to have conversations with multiple participants simultaneously.
-
-For a comprehensive guide on implementing Groups, refer to our detailed [Groups guide](/ui-kit/flutter/v6/guide-group-chat).
diff --git a/ui-kit/flutter/v6/custom-text-formatter-guide.mdx b/ui-kit/flutter/v6/custom-text-formatter-guide.mdx
deleted file mode 100644
index 24bfb42b2..000000000
--- a/ui-kit/flutter/v6/custom-text-formatter-guide.mdx
+++ /dev/null
@@ -1,267 +0,0 @@
----
-title: "Custom Text Formatter Guide"
-description: "Build a custom text formatter from scratch to process hashtags, links, or any text pattern."
----
-
-This guide walks you through building a custom `CometChatTextFormatter` that detects `#hashtags` in messages, highlights them, and shows a suggestion dropdown in the composer.
-
-## Prerequisites
-
-- CometChat Flutter UI Kit V6 installed
-- Familiarity with [Text Formatters](/ui-kit/flutter/v6/customization-text-formatters)
-
-## Step 1: Create the Formatter Class
-
-Extend `CometChatTextFormatter` and set the tracking character to `#`:
-
-
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:flutter/material.dart';
-
-class HashtagFormatter extends CometChatTextFormatter {
- final List _allHashtags = [
- 'flutter', 'dart', 'cometchat', 'uikit', 'mobile',
- 'android', 'ios', 'web', 'chat', 'messaging',
- ];
-
- HashtagFormatter() : super(trackingCharacter: '#');
-
- @override
- void init() {
- // Called when the formatter is initialized
- }
-}
-```
-
-
-
-## Step 2: Implement Search
-
-The `search` method is called whenever the user types after the tracking character. Filter your data and set the suggestion list:
-
-
-
-```dart
-@override
-void search(String query) {
- if (query.isEmpty) {
- setSuggestionItems(_allHashtags
- .map((tag) => SuggestionItem(
- id: tag,
- name: '#$tag',
- leadingIcon: Icon(Icons.tag, size: 20),
- ))
- .toList());
- return;
- }
-
- final filtered = _allHashtags
- .where((tag) => tag.toLowerCase().contains(query.toLowerCase()))
- .map((tag) => SuggestionItem(
- id: tag,
- name: '#$tag',
- leadingIcon: Icon(Icons.tag, size: 20),
- ))
- .toList();
-
- setSuggestionItems(filtered);
-}
-```
-
-
-
-## Step 3: Handle Suggestion Selection
-
-When the user taps a suggestion, insert the hashtag into the composer:
-
-
-
-```dart
-@override
-void onItemClick(SuggestionItem item, User? user, Group? group) {
- // The base class handles inserting the text into the composer.
- // You can add custom logic here, like tracking analytics.
- super.onItemClick(item, user, group);
-}
-```
-
-
-
-## Step 4: Style Hashtags in Message Bubbles
-
-Override `buildMessageBubbleSpan` to apply styling to hashtags when they appear in sent/received messages:
-
-
-
-```dart
-@override
-List getFormattedText(
- String text,
- BuildContext context,
- BubbleAlignment alignment,
-) {
- final results = [];
- final regex = RegExp(r'#\w+');
-
- for (final match in regex.allMatches(text)) {
- results.add(CometChatTextFormatterResult(
- start: match.start,
- end: match.end,
- style: TextStyle(
- color: alignment == BubbleAlignment.right
- ? Colors.white.withOpacity(0.8)
- : Color(0xFF6851D6),
- fontWeight: FontWeight.w600,
- ),
- onTap: () {
- // Handle hashtag tap — navigate to hashtag feed, etc.
- debugPrint('Tapped hashtag: ${match.group(0)}');
- },
- ));
- }
-
- return results;
-}
-```
-
-
-
-## Step 5: Pre-Send Hook (Optional)
-
-Modify the message before it's sent — for example, attach hashtag metadata:
-
-
-
-```dart
-@override
-BaseMessage handlePreMessageSend(BaseMessage message) {
- if (message is TextMessage) {
- final regex = RegExp(r'#\w+');
- final hashtags = regex
- .allMatches(message.text)
- .map((m) => m.group(0)!.substring(1))
- .toList();
-
- if (hashtags.isNotEmpty) {
- message.metadata ??= {};
- message.metadata!['hashtags'] = hashtags;
- }
- }
- return message;
-}
-```
-
-
-
-## Step 6: Register the Formatter
-
-Pass your formatter to the components that should use it:
-
-
-
-```dart
-final hashtagFormatter = HashtagFormatter();
-
-// On the message list (for rendering)
-CometChatMessageList(
- user: user,
- textFormatters: [
- CometChatMentionsFormatter(), // Keep default mentions
- hashtagFormatter,
- ],
-)
-
-// On the composer (for input suggestions)
-CometChatMessageComposer(
- user: user,
- textFormatters: [
- CometChatMentionsFormatter(),
- hashtagFormatter,
- ],
-)
-```
-
-
-
-## Complete Example
-
-
-
-```dart
-class HashtagFormatter extends CometChatTextFormatter {
- final List _allHashtags = [
- 'flutter', 'dart', 'cometchat', 'uikit', 'mobile',
- ];
-
- HashtagFormatter() : super(trackingCharacter: '#');
-
- @override
- void init() {}
-
- @override
- void search(String query) {
- final filtered = query.isEmpty
- ? _allHashtags
- : _allHashtags.where(
- (tag) => tag.toLowerCase().contains(query.toLowerCase()),
- ).toList();
-
- setSuggestionItems(filtered
- .map((tag) => SuggestionItem(
- id: tag,
- name: '#$tag',
- leadingIcon: Icon(Icons.tag, size: 20),
- ))
- .toList());
- }
-
- @override
- List getFormattedText(
- String text,
- BuildContext context,
- BubbleAlignment alignment,
- ) {
- final results = [];
- final regex = RegExp(r'#\w+');
-
- for (final match in regex.allMatches(text)) {
- results.add(CometChatTextFormatterResult(
- start: match.start,
- end: match.end,
- style: TextStyle(
- color: alignment == BubbleAlignment.right
- ? Colors.white.withOpacity(0.8)
- : Color(0xFF6851D6),
- fontWeight: FontWeight.w600,
- ),
- ));
- }
- return results;
- }
-
- @override
- BaseMessage handlePreMessageSend(BaseMessage message) {
- if (message is TextMessage) {
- final hashtags = RegExp(r'#\w+')
- .allMatches(message.text)
- .map((m) => m.group(0)!.substring(1))
- .toList();
- if (hashtags.isNotEmpty) {
- message.metadata ??= {};
- message.metadata!['hashtags'] = hashtags;
- }
- }
- return message;
- }
-}
-```
-
-
-
-## Related
-
-- [Text Formatters](/ui-kit/flutter/v6/customization-text-formatters) — Text formatter API reference.
-- [Mentions Formatter Guide](/ui-kit/flutter/v6/mentions-formatter-guide) — Built-in mentions formatter.
-- [Shortcut Formatter Guide](/ui-kit/flutter/v6/shortcut-formatter-guide) — Shortcut text replacement.
diff --git a/ui-kit/flutter/v6/events.mdx b/ui-kit/flutter/v6/events.mdx
deleted file mode 100644
index c780e9feb..000000000
--- a/ui-kit/flutter/v6/events.mdx
+++ /dev/null
@@ -1,195 +0,0 @@
----
-title: "Events"
----
-
-## Overview
-
-Events allow for a decoupled, flexible architecture where different parts of the application can interact without having to directly reference each other. This makes it easier to create complex, interactive experiences, as well as to extend and customize the functionality provided by the CometChat UI Kit.
-
-> The event system is identical between V5 and V6. All event classes, listeners, and APIs work the same way.
-
-### User Events
-
-`CometChatUserEvents` emit events when the logged-in user executes actions on another user.
-
-1. `ccUserBlocked`: Triggered when the logged-in user blocks another user.
-2. `ccUserUnblocked`: Triggered when the logged-in user unblocks another user.
-
-
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
-class _YourScreenState extends State with CometChatUserEventListener {
- @override
- void initState() {
- super.initState();
- CometChatUserEvents.addUsersListener("listenerId", this);
- }
-
- @override
- void dispose() {
- super.dispose();
- CometChatUserEvents.removeUsersListener("listenerId");
- }
-
- @override
- void ccUserBlocked(User user) {
- // Handle user blocked
- }
-
- @override
- void ccUserUnblocked(User user) {
- // Handle user unblocked
- }
-
- @override
- Widget build(BuildContext context) {
- return const Placeholder();
- }
-}
-```
-
-
-
-***
-
-### Group Events
-
-`CometChatGroupEvents` emits events when the logged-in user performs actions related to groups.
-
-1. `ccGroupCreated`: Triggered when the logged-in user creates a group.
-2. `ccGroupDeleted`: Triggered when the logged-in user deletes a group.
-3. `ccGroupLeft`: Triggered when the logged-in user leaves a group.
-4. `ccGroupMemberScopeChanged`: Triggered when the logged-in user changes the scope of another group member.
-5. `ccGroupMemberBanned`: Triggered when the logged-in user bans a group member.
-6. `ccGroupMemberKicked`: Triggered when the logged-in user kicks a group member.
-7. `ccGroupMemberUnbanned`: Triggered when the logged-in user unbans a user.
-8. `ccGroupMemberJoined`: Triggered when the logged-in user joins a group.
-9. `ccGroupMemberAdded`: Triggered when the logged-in user adds new members.
-10. `ccOwnershipChanged`: Triggered when the logged-in user transfers ownership.
-
-
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
-class _YourScreenState extends State with CometChatGroupEventListener {
- @override
- void initState() {
- super.initState();
- CometChatGroupEvents.addGroupsListener("listenerId", this);
- }
-
- @override
- void dispose() {
- super.dispose();
- CometChatGroupEvents.removeGroupsListener("listenerId");
- }
-
- @override
- void ccGroupCreated(Group group) {
- // Handle group created
- }
-
- @override
- void ccGroupDeleted(Group group) {
- // Handle group deleted
- }
-
- @override
- Widget build(BuildContext context) {
- return const Placeholder();
- }
-}
-```
-
-
-
-***
-
-### Message Events
-
-`CometChatMessageEvents` emits events related to messages.
-
-
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
-class _YourScreenState extends State with CometChatMessageEventListener {
- @override
- void initState() {
- super.initState();
- CometChatMessageEvents.addMessagesListener("listenerId", this);
- }
-
- @override
- void dispose() {
- super.dispose();
- CometChatMessageEvents.removeMessagesListener("listenerId");
- }
-
- @override
- Widget build(BuildContext context) {
- return const Placeholder();
- }
-}
-```
-
-
-
-***
-
-### Conversation Events
-
-`CometChatConversationEvents` emits events related to conversations.
-
-1. `ccConversationDeleted`: Triggered when a conversation is deleted.
-
-
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
-class _YourScreenState extends State with CometChatConversationEventListener {
- @override
- void initState() {
- super.initState();
- CometChatConversationEvents.addConversationListListener("listenerId", this);
- }
-
- @override
- void dispose() {
- super.dispose();
- CometChatConversationEvents.removeConversationListListener("listenerId");
- }
-
- @override
- void ccConversationDeleted(Conversation conversation) {
- // Handle conversation deleted
- }
-
- @override
- Widget build(BuildContext context) {
- return const Placeholder();
- }
-}
-```
-
-
-
-***
-
-### UI Events
-
-`CometChatUIEvents` emits events related to UI interactions.
-
-
-
-```dart
-// UI events are used internally by the UI Kit widgets
-// to communicate state changes across components
-```
-
-
diff --git a/ui-kit/flutter/v6/extensions.mdx b/ui-kit/flutter/v6/extensions.mdx
deleted file mode 100644
index bf6b7b7db..000000000
--- a/ui-kit/flutter/v6/extensions.mdx
+++ /dev/null
@@ -1,85 +0,0 @@
----
-title: "Extensions"
----
-
-## Overview
-
-CometChat's UI Kit comes with built-in support for a wide variety of extensions that provide additional functionality. These extensions enhance the chatting experience, making it more interactive, secure, and efficient.
-
-Activating any of the extensions in CometChat is a simple process done through your application's dashboard. Refer to our guide for detailed information on [Extensions](/fundamentals/extensions-overview).
-
-> **V6 Architecture Change:** In V5, extensions used a decorator/chain-of-responsibility pattern with `*Extension` and `*ExtensionDecorator` classes that wrapped the `DataSource` interface. V6 removes this entire pattern. Extension behavior is now handled directly by `MessageTemplateUtils` static methods. No registration is needed — just enable extensions in your CometChat Dashboard and they work automatically.
-
-## Built-in Extensions
-
-### Stickers
-
-The Stickers extension allows users to express their emotions more creatively with pre-designed stickers.
-
-Once activated from your CometChat Dashboard, the feature will automatically be incorporated into the [Message Composer](/ui-kit/flutter/v6/message-composer) widget.
-
-### Polls
-
-The Polls extension enhances group discussions by allowing users to create polls with predefined answers.
-
-Once activated from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/flutter/v6/message-composer) widget.
-
-### Collaborative Whiteboard
-
-The Collaborative Whiteboard extension facilitates real-time collaboration on a shared digital whiteboard.
-
-Once activated from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/flutter/v6/message-composer) widget.
-
-### Collaborative Document
-
-Users can work together on a shared document with the Collaborative Document extension.
-
-Once activated from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/flutter/v6/message-composer) widget.
-
-### Message Translation
-
-The Message Translation extension translates any message into your local locale, eliminating language barriers.
-
-Once activated from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of [MessageList Widget](/ui-kit/flutter/v6/message-list).
-
-### Link Preview
-
-The Link Preview extension provides a summary of URLs shared in the chat, including title, description, and thumbnail.
-
-Once activated from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Widget](/ui-kit/flutter/v6/message-list).
-
-### Thumbnail Generation
-
-The Thumbnail Generation extension automatically creates smaller preview images for shared images, reducing bandwidth usage.
-
-Once activated from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Widget](/ui-kit/flutter/v6/message-list).
-
-## V6 Extension Architecture
-
-### What Changed
-
-| Aspect | V5 | V6 |
-|---|---|---|
-| Registration | `UIKitSettings.extensions = CometChatUIKitChatExtensions.getDefaultExtensions()` | Not needed — built-in |
-| Architecture | Decorator chain (up to 10 layers) | `MessageTemplateUtils` static methods (1 hop) |
-| Startup cost | 9 `isExtensionEnabled()` network calls | None |
-| Files removed | — | 27 files (~7000+ lines) |
-| UI widgets | Preserved | Preserved (bubbles, configs, styles) |
-
-### What Was Removed
-
-- All `*Extension` classes (e.g., `StickersExtension`, `PollsExtension`)
-- All `*ExtensionDecorator` classes (e.g., `StickersExtensionDecorator`)
-- `ChatConfigurator`, `DataSource` interface, `ExtensionsDataSource`
-- `CometChatUIKitChatExtensions`, `CometChatUIKitChatAIFeatures`
-- `CometChatUIKit.getDataSource()` method
-
-### What Was Preserved
-
-All extension UI widgets remain:
-- `CometChatStickerBubble`, `CometChatStickerKeyboard`
-- `CometChatPollsBubble`, `CometChatCreatePoll`
-- `CometChatLinkPreviewBubble`
-- `CometChatCollaborativeBubble`, `CometChatCollaborativeWebView`
-- `MessageTranslationBubble`
-- All configuration and style classes
diff --git a/ui-kit/flutter/v6/flutter-conversation.mdx b/ui-kit/flutter/v6/flutter-conversation.mdx
deleted file mode 100644
index b58d05343..000000000
--- a/ui-kit/flutter/v6/flutter-conversation.mdx
+++ /dev/null
@@ -1,158 +0,0 @@
----
-title: "Conversation List + Message View"
-sidebarTitle: "Conversation List + Message View"
----
-
-The Conversation List + Message View layout provides a seamless two-panel chat interface. This layout allows users to switch between conversations while keeping the active chat open.
-
-## Integration
-
-### Step 1: Create the Conversations Screen
-
-
-
-```dart
-import 'package:flutter/material.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
-class ConversationsScreen extends StatelessWidget {
- const ConversationsScreen({super.key});
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- appBar: AppBar(title: const Text('Conversations')),
- body: CometChatConversations(
- onItemTap: (conversation) {
- _openChat(context, conversation);
- },
- ),
- );
- }
-
- void _openChat(BuildContext context, Conversation conversation) {
- User? user;
- Group? group;
-
- if (conversation.conversationType == 'user') {
- user = conversation.conversationWith as User;
- } else {
- group = conversation.conversationWith as Group;
- }
-
- Navigator.push(
- context,
- MaterialPageRoute(
- builder: (_) => ChatScreen(user: user, group: group),
- ),
- );
- }
-}
-```
-
-
-
-### Step 2: Create the Chat Screen
-
-Use the same `MessagesScreen` pattern from [One-to-One Chat](/ui-kit/flutter/v6/flutter-one-to-one-chat#step-2-render-the-messages-component):
-
-
-
-```dart
-class ChatScreen extends StatelessWidget {
- final User? user;
- final Group? group;
-
- const ChatScreen({super.key, this.user, this.group});
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- appBar: CometChatMessageHeader(user: user, group: group),
- body: SafeArea(
- child: Column(
- children: [
- Expanded(child: CometChatMessageList(user: user, group: group)),
- CometChatMessageComposer(user: user, group: group),
- ],
- ),
- ),
- );
- }
-}
-```
-
-
-
-### Step 3: Complete Example
-
-
-
-```dart
-import 'package:flutter/material.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
-void main() {
- runApp(const MyApp());
-}
-
-class MyApp extends StatelessWidget {
- const MyApp({super.key});
-
- @override
- Widget build(BuildContext context) {
- return MaterialApp(
- title: 'CometChat V6',
- theme: ThemeData(useMaterial3: true),
- home: const InitPage(),
- );
- }
-}
-
-class InitPage extends StatefulWidget {
- const InitPage({super.key});
-
- @override
- State createState() => _InitPageState();
-}
-
-class _InitPageState extends State {
- bool _ready = false;
-
- @override
- void initState() {
- super.initState();
- _init();
- }
-
- Future _init() async {
- UIKitSettings settings = (UIKitSettingsBuilder()
- ..subscriptionType = CometChatSubscriptionType.allUsers
- ..autoEstablishSocketConnection = true
- ..region = "REGION"
- ..appId = "APP_ID"
- ..authKey = "AUTH_KEY")
- .build();
-
- CometChatUIKit.init(
- uiKitSettings: settings,
- onSuccess: (_) {
- CometChatUIKit.login("cometchat-uid-1", onSuccess: (_) {
- setState(() => _ready = true);
- }, onError: (e) {});
- },
- onError: (e) {},
- );
- }
-
- @override
- Widget build(BuildContext context) {
- if (!_ready) {
- return const Scaffold(body: Center(child: CircularProgressIndicator()));
- }
- return const ConversationsScreen();
- }
-}
-```
-
-
diff --git a/ui-kit/flutter/v6/flutter-one-to-one-chat.mdx b/ui-kit/flutter/v6/flutter-one-to-one-chat.mdx
deleted file mode 100644
index d3af82fd6..000000000
--- a/ui-kit/flutter/v6/flutter-one-to-one-chat.mdx
+++ /dev/null
@@ -1,232 +0,0 @@
----
-title: "Building A One To One/Group Chat Experience"
-sidebarTitle: "One To One/Group Chat"
----
-
-The One-to-One Chat feature provides a streamlined direct messaging interface, ideal for support chats, dating apps, and private messaging platforms.
-
-***
-
-### Step 1: Render the Message View
-
-Fetch the target user and display the messaging screen. V6 uses the same `CometChatUIKit` initialization but with BLoC-powered widgets.
-
-```dart main.dart
-@override
-Widget build(BuildContext context) {
- return Scaffold(
- body: SafeArea(
- child: FutureBuilder(
- future: fetchCometChatUser("cometchat-uid-2"),
- builder: (context, snapshot) {
- if (snapshot.connectionState == ConnectionState.waiting) {
- return const Center(child: CircularProgressIndicator());
- } else if (snapshot.hasError) {
- return Center(child: Text("Error: ${snapshot.error}"));
- } else if (snapshot.hasData) {
- return MessagesScreen(user: snapshot.data!);
- } else {
- return const Center(child: Text("User not found"));
- }
- },
- ),
- ),
- );
-}
-```
-
-#### Full Example: main.dart
-
-
-
-```dart
-import 'package:flutter/material.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'messages_screen.dart';
-import 'cometchat_config.dart';
-import 'dart:async';
-
-void main() => runApp(const MyApp());
-
-class MyApp extends StatelessWidget {
- const MyApp({super.key});
-
- @override
- Widget build(BuildContext context) {
- return MaterialApp(
- title: 'CometChat V6 UI Kit',
- theme: ThemeData(
- colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
- useMaterial3: true,
- ),
- home: const Home(),
- );
- }
-}
-
-class Home extends StatelessWidget {
- const Home({super.key});
-
- Future _initializeAndLogin() async {
- final settings = UIKitSettingsBuilder()
- ..subscriptionType = CometChatSubscriptionType.allUsers
- ..autoEstablishSocketConnection = true
- ..appId = CometChatConfig.appId
- ..region = CometChatConfig.region
- ..authKey = CometChatConfig.authKey;
-
- await CometChatUIKit.init(uiKitSettings: settings.build());
- await CometChatUIKit.login(
- 'cometchat-uid-1',
- onSuccess: (_) => debugPrint('Login Successful'),
- onError: (err) => throw Exception('Login Failed: $err'),
- );
- }
-
- @override
- Widget build(BuildContext context) {
- return FutureBuilder(
- future: _initializeAndLogin(),
- builder: (ctx, snap) {
- if (snap.connectionState != ConnectionState.done) {
- return const Scaffold(
- body: SafeArea(child: Center(child: CircularProgressIndicator())),
- );
- }
- if (snap.hasError) {
- return Scaffold(
- body: SafeArea(
- child: Center(child: Text('Error:\n${snap.error}', textAlign: TextAlign.center)),
- ),
- );
- }
- return const MessagesPage();
- },
- );
- }
-}
-
-class MessagesPage extends StatelessWidget {
- const MessagesPage({super.key});
-
- Future fetchCometChatUser(String uid) async {
- final completer = Completer();
- CometChat.getUser(
- uid,
- onSuccess: (user) => completer.complete(user),
- onError: (error) => completer.completeError(error),
- );
- return completer.future;
- }
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: SafeArea(
- child: FutureBuilder(
- future: fetchCometChatUser("cometchat-uid-2"),
- builder: (context, snapshot) {
- if (snapshot.connectionState == ConnectionState.waiting) {
- return const Center(child: CircularProgressIndicator());
- } else if (snapshot.hasError) {
- return Center(child: Text("Error: ${snapshot.error}"));
- } else if (snapshot.hasData) {
- return MessagesScreen(user: snapshot.data!);
- } else {
- return const Center(child: Text("User not found"));
- }
- },
- ),
- ),
- );
- }
-}
-```
-
-
-
-### Step 2: Render the Messages Component
-
-Compose the messaging view using:
-
-* [Message Header](/ui-kit/flutter/v6/message-header)
-* [Message List](/ui-kit/flutter/v6/message-list)
-* [Message Composer](/ui-kit/flutter/v6/message-composer)
-
-
-
-```dart
-import 'package:flutter/material.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
-class MessagesScreen extends StatefulWidget {
- final User? user;
- final Group? group;
-
- const MessagesScreen({Key? key, this.user, this.group}) : super(key: key);
-
- @override
- State createState() => _MessagesScreenState();
-}
-
-class _MessagesScreenState extends State {
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- appBar: CometChatMessageHeader(
- user: widget.user,
- group: widget.group,
- ),
- body: SafeArea(
- child: Column(
- children: [
- Expanded(
- child: CometChatMessageList(
- user: widget.user,
- group: widget.group,
- ),
- ),
- CometChatMessageComposer(
- user: widget.user,
- group: widget.group,
- ),
- ],
- ),
- ),
- );
- }
-}
-```
-
-
-
-
-
-***
-
-### Step 3: Run the App
-
-```
-flutter run
-```
-
-This launches the app with the one-to-one chat interface featuring the message header, list, and composer.
-
-***
-
-## Key V6 Differences
-
-| Aspect | V5 | V6 |
-|---|---|---|
-| Composite widget | `CometChatMessages` wraps header + list + composer | No composite — compose individually |
-| State management | GetX controllers | BLoC pattern (`MessageListBloc`, `MessageComposerBloc`) |
-| Extensions | `CometChatUIKitChatExtensions.getDefaultExtensions()` | Extensions handled via `MessageTemplateUtils` |
-| Rich text | Not available | Built-in rich text formatting and code blocks |
-
-***
-
-## Next Steps
-
-* [Advanced Customizations](/ui-kit/flutter/v6/theme-introduction) — Personalize the chat UI to align with your brand.
-* [Message List](/ui-kit/flutter/v6/message-list) — Customize message display and behavior.
-* [Message Composer](/ui-kit/flutter/v6/message-composer) — Configure rich text, attachments, and audio recording.
diff --git a/ui-kit/flutter/v6/flutter-tab-based-chat.mdx b/ui-kit/flutter/v6/flutter-tab-based-chat.mdx
deleted file mode 100644
index 8b9f5b40c..000000000
--- a/ui-kit/flutter/v6/flutter-tab-based-chat.mdx
+++ /dev/null
@@ -1,213 +0,0 @@
----
-title: "Building A Messaging UI With Tabs, Sidebar, And Message View"
-sidebarTitle: "Tab Based Chat Experience"
----
-
-This guide walks you through creating a tab-based messaging UI using Flutter and CometChat V6 UIKit. The UI includes sections for Chats, Users, and Groups, allowing seamless navigation.
-
-***
-
-## User Interface Preview
-
-This layout consists of:
-
-1. Sidebar (Conversation List) — Displays recent conversations with active users and groups.
-2. Message View — Shows the selected chat with real-time messages.
-3. Message Input Box — Allows users to send messages seamlessly.
-
-***
-
-### Step 1: Render the Tab Component
-
-Set up initialization and the tab-based layout. In V6, all list widgets (`CometChatConversations`, `CometChatUsers`, `CometChatGroups`) are powered by BLoC.
-
-#### Full Example: main.dart
-
-
-
-```dart
-import 'package:flutter/material.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'messages_screen.dart';
-import 'cometchat_config.dart';
-
-void main() => runApp(const MyApp());
-
-class MyApp extends StatelessWidget {
- const MyApp({super.key});
-
- @override
- Widget build(BuildContext context) {
- return MaterialApp(
- title: 'CometChat V6 UI Kit',
- theme: ThemeData(
- colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
- useMaterial3: true,
- ),
- home: const Home(),
- );
- }
-}
-
-class Home extends StatelessWidget {
- const Home({super.key});
-
- Future _initializeAndLogin() async {
- final settings = UIKitSettingsBuilder()
- ..subscriptionType = CometChatSubscriptionType.allUsers
- ..autoEstablishSocketConnection = true
- ..appId = CometChatConfig.appId
- ..region = CometChatConfig.region
- ..authKey = CometChatConfig.authKey;
-
- await CometChatUIKit.init(uiKitSettings: settings.build());
- await CometChatUIKit.login(
- 'cometchat-uid-1',
- onSuccess: (_) => debugPrint('Login Successful'),
- onError: (err) => throw Exception('Login Failed: $err'),
- );
- }
-
- @override
- Widget build(BuildContext context) {
- return FutureBuilder(
- future: _initializeAndLogin(),
- builder: (ctx, snap) {
- if (snap.connectionState != ConnectionState.done) {
- return const Scaffold(
- body: SafeArea(child: Center(child: CircularProgressIndicator())),
- );
- }
- if (snap.hasError) {
- return Scaffold(
- body: SafeArea(
- child: Center(child: Text('Error:\n${snap.error}', textAlign: TextAlign.center)),
- ),
- );
- }
- return const TabsScreen();
- },
- );
- }
-}
-
-class TabsScreen extends StatefulWidget {
- const TabsScreen({super.key});
-
- @override
- State createState() => _TabsScreenState();
-}
-
-class _TabsScreenState extends State {
- int _selectedIndex = 0;
- final PageController _pageController = PageController();
-
- void _onItemTapped(int index) {
- setState(() {
- _selectedIndex = index;
- });
- _pageController.jumpToPage(index);
- }
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: PageView(
- controller: _pageController,
- onPageChanged: (index) {
- setState(() {
- _selectedIndex = index;
- });
- },
- children: [
- CometChatConversations(
- showBackButton: false,
- onItemTap: (conversation) {
- Navigator.push(
- context,
- MaterialPageRoute(
- builder: (context) => MessagesScreen(
- user: conversation.conversationWith is User
- ? conversation.conversationWith as User
- : null,
- group: conversation.conversationWith is Group
- ? conversation.conversationWith as Group
- : null,
- ),
- ),
- );
- },
- ),
- CometChatUsers(),
- CometChatGroups(),
- ],
- ),
- bottomNavigationBar: BottomNavigationBar(
- currentIndex: _selectedIndex,
- onTap: _onItemTapped,
- items: const [
- BottomNavigationBarItem(icon: Icon(Icons.chat), label: "Chat"),
- BottomNavigationBarItem(icon: Icon(Icons.person), label: "Users"),
- BottomNavigationBarItem(icon: Icon(Icons.group), label: "Groups"),
- ],
- ),
- );
- }
-}
-```
-
-
-
-### Step 2: Render the Messages Component
-
-Use the same `MessagesScreen` pattern from [One-to-One Chat](/ui-kit/flutter/v6/flutter-one-to-one-chat#step-2-render-the-messages-component):
-
-
-
-```dart
-import 'package:flutter/material.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
-class MessagesScreen extends StatelessWidget {
- final User? user;
- final Group? group;
-
- const MessagesScreen({super.key, this.user, this.group});
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- appBar: CometChatMessageHeader(user: user, group: group),
- body: SafeArea(
- child: Column(
- children: [
- Expanded(child: CometChatMessageList(user: user, group: group)),
- CometChatMessageComposer(user: user, group: group),
- ],
- ),
- ),
- );
- }
-}
-```
-
-
-
-
-
-***
-
-### Step 3: Run the App
-
-```
-flutter run
-```
-
-This launches the app with the tab-based chat experience. Navigate between Chats, Users, and Groups tabs and interact with the messaging features.
-
-***
-
-## Next Steps
-
-* [Advanced Customizations](/ui-kit/flutter/v6/theme-introduction) — Personalize the chat UI to align with your brand.
-* [Component Styling](/ui-kit/flutter/v6/component-styling) — Fine-tune individual component appearances.
diff --git a/ui-kit/flutter/v6/getting-started.mdx b/ui-kit/flutter/v6/getting-started.mdx
deleted file mode 100644
index 71857eab1..000000000
--- a/ui-kit/flutter/v6/getting-started.mdx
+++ /dev/null
@@ -1,381 +0,0 @@
----
-title: "Getting Started With CometChat Flutter UI Kit V6"
-sidebarTitle: "Getting Started"
----
-
-CometChat UI Kit V6 for Flutter is a package of pre-assembled UI elements built on clean architecture with BLoC state management. It provides essential messaging functionalities with options for light and dark themes, diverse fonts, colors, and extensive customization capabilities.
-
-CometChat UI Kit V6 supports both one-to-one and group conversations. Follow the guide below to initiate conversations from scratch.
-
-## Prerequisites
-
-Before installing the **UI Kit**, you need to create a CometChat application on the CometChat Dashboard, which includes all the necessary data for a chat service, such as users, groups, calls, and messages. You will require the `App ID`, `AuthKey`, and `Region` of your CometChat application when initializing the SDK.
-
-**i. Register on CometChat**
-
-* You need to register on the **CometChat Dashboard** first. [Click here to sign up](https://app.cometchat.com/login).
-
-**ii. Get Your Application Keys**
-
-* Create a **new app**
-* Head over to the **QuickStart** or **API & Auth Keys section** and note the **App ID**, **Auth Key**, and **Region**.
-
-> Each CometChat application can be integrated with a single client app. Within the same application, users can communicate with each other across all platforms, whether they are on mobile devices or on the web.
-
-**iii. Platform & IDE Setup**
-
-* Flutter installed on your system.
-* Android Studio or VS Code with configured Flutter/Dart plugins.
-* Xcode & Pod (CocoaPods) for iOS.
-* An iOS device or emulator with iOS 13.0 or above.
-* Android device or emulator with Android version 7.0 (API 24) or above.
-
-## Getting Started
-
-### **Step 1: Create Flutter application project**
-
-To get started, create a new flutter application project.
-
-***
-
-### **Step 2: Add Dependency**
-
-**1. Install via CLI**
-
-Since V6 is hosted on Cloudsmith (not pub.dev), run this command instead of the standard `flutter pub add`:
-
-```bash
-dart pub add cometchat_chat_uikit:6.0.0-beta1 --hosted-url https://dart.cloudsmith.io/cometchat/cometchat/
-```
-
-**2. Update Pubspec**
-
-Or add it manually to your `pubspec.yaml`:
-
-```yaml pubspec.yaml
-dependencies:
- cometchat_chat_uikit:
- hosted: https://dart.cloudsmith.io/cometchat/cometchat/
- version: 6.0.0-beta1
-```
-
-Final `pubspec.yaml`
-
-```yaml pubspec.yaml
-name: my_chat_app
-description: "A Flutter app with CometChat V6."
-
-publish_to: 'none'
-
-version: 1.0.0+1
-
-environment:
- sdk: ^3.8.0
-
-dependencies:
- flutter:
- sdk: flutter
-
- cometchat_chat_uikit:
- hosted: https://dart.cloudsmith.io/cometchat/cometchat/
- version: 6.0.0-beta1
-
- cupertino_icons: ^1.0.8
-
-dev_dependencies:
- flutter_test:
- sdk: flutter
-
- flutter_lints: ^4.0.0
-
-flutter:
- uses-material-design: true
-```
-
-***
-
-**2. Android App Setup**
-
-Update the `minSdkVersion` in your Android project configuration, located at `android/app/build.gradle`:
-
-```gradle build.gradle
-android {
- defaultConfig {
- minSdk = 24
- // Other configurations...
- }
-}
-```
-
-***
-
-**3. Update iOS Podfile**
-
-In your Podfile (located at `ios/Podfile`), update the minimum iOS version:
-
-```ruby Podfile
-platform :ios, '13.0'
-```
-
-***
-
-**4. Import CometChat UIKit**
-
-In your Dart code, import the CometChat UIKit package:
-
-```dart main.dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-```
-
-> V6 uses a single import. The `cometchat_uikit_shared` package is internalized — no separate import needed.
-
-***
-
-### **Step 3: Initialize UI Kit**
-
-Before using any features from the CometChat UI Kit, initialize it with your app credentials.
-
-1. **Create a Configuration File:**
-
-```dart cometchat_config.dart
-class CometChatConfig {
- static const String appId = "APP_ID"; // Replace with your App ID
- static const String region = "REGION"; // Replace with your App Region
- static const String authKey = "AUTH_KEY"; // Replace with your Auth Key
-}
-```
-
-2. **Initialize the UI Kit:**
-
-```dart main.dart
-import 'cometchat_config.dart';
-
-UIKitSettings uiKitSettings = (UIKitSettingsBuilder()
- ..subscriptionType = CometChatSubscriptionType.allUsers
- ..autoEstablishSocketConnection = true
- ..region = CometChatConfig.region
- ..appId = CometChatConfig.appId
- ..authKey = CometChatConfig.authKey
-).build();
-
-CometChatUIKit.init(
- uiKitSettings: uiKitSettings,
- onSuccess: (successMessage) async {
- debugPrint('CometChat Initialized');
- },
- onError: (error) {
- debugPrint('CometChat Initialization error');
- },
-);
-```
-
-> **V6 difference from V5:** No `extensions` or `aiFeature` parameters needed. Extensions are built-in and handled automatically by `MessageTemplateUtils`.
-
-***
-
-### **Step 4: Login to UI Kit**
-
-Once the UI Kit is initialized, authenticate your user using the `login()` method.
-
-```dart main.dart
-CometChatUIKit.login(
- "cometchat-uid-1", // Replace with a valid UID
- onSuccess: (user) {
- debugPrint('CometChat LoggedIn success');
- },
- onError: (error) {
- debugPrint('CometChat LoggedIn error');
- },
-);
-```
-
-You can test using any of the following pre-generated users:
-
-* `cometchat-uid-1`
-* `cometchat-uid-2`
-* `cometchat-uid-3`
-* `cometchat-uid-4`
-* `cometchat-uid-5`
-
-> For more information, refer to the documentation on [Init](/ui-kit/flutter/v6/methods#init) and [Login](/ui-kit/flutter/v6/methods#login-using-auth-key).
-
-#### **Example: Initialization and Login Combined**
-
-```dart main.dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:flutter/material.dart';
-import 'cometchat_config.dart';
-
-void main() {
- runApp(const MyApp());
-}
-
-class MyApp extends StatelessWidget {
- const MyApp({super.key});
-
- @override
- Widget build(BuildContext context) {
- return MaterialApp(
- title: 'CometChat V6',
- theme: ThemeData(useMaterial3: true),
- home: const InitPage(),
- );
- }
-}
-
-class InitPage extends StatefulWidget {
- const InitPage({super.key});
-
- @override
- State createState() => _InitPageState();
-}
-
-class _InitPageState extends State {
- bool _isInitializing = true;
- String? _error;
-
- @override
- void initState() {
- super.initState();
- _initCometChat();
- }
-
- Future _initCometChat() async {
- UIKitSettings uiKitSettings = (UIKitSettingsBuilder()
- ..subscriptionType = CometChatSubscriptionType.allUsers
- ..autoEstablishSocketConnection = true
- ..region = CometChatConfig.region
- ..appId = CometChatConfig.appId
- ..authKey = CometChatConfig.authKey)
- .build();
-
- CometChatUIKit.init(
- uiKitSettings: uiKitSettings,
- onSuccess: (msg) {
- CometChatUIKit.login(
- "cometchat-uid-1",
- onSuccess: (user) {
- debugPrint('Logged in as: ${user.name}');
- setState(() => _isInitializing = false);
- },
- onError: (error) {
- setState(() {
- _isInitializing = false;
- _error = error.message;
- });
- },
- );
- },
- onError: (error) {
- setState(() {
- _isInitializing = false;
- _error = error.message;
- });
- },
- );
- }
-
- @override
- Widget build(BuildContext context) {
- if (_isInitializing) {
- return const Scaffold(body: Center(child: CircularProgressIndicator()));
- }
- if (_error != null) {
- return Scaffold(body: Center(child: Text('Error: $_error')));
- }
- return const Scaffold(body: Center(child: Text('Ready!')));
- }
-}
-```
-
-***
-
-### **Step 5: Choose a Chat Experience**
-
-Integrate a conversation view that suits your application's UX requirements. Below are the available options:
-
-***
-
-### **1. Conversation List + Message View**
-
-**Best for:** Flutter apps that need a smooth, stack-based navigation between conversations and messages.
-
-**Highlights:**
-
-* **Compact Layout** – Uses `Navigator.push()` for mobile-first navigation.
-* **One-to-One & Group Chats** – Built-in support for private and group conversations.
-* **Real-Time Messaging** – Message list auto-refreshes with CometChat events.
-* **BLoC-Powered** – Predictable state management with `ConversationsBloc` and `MessageListBloc`.
-
-**Use When:**
-
-* You want a clean navigation experience for multiple chat sessions.
-* Your Flutter app supports both direct and group messaging.
-
-[Integrate Conversation List + Message View](./flutter-conversation)
-
-***
-
-### **2. One-to-One / Group Chat**
-
-**Best for:** When a user lands directly into a chat screen, bypassing the conversation list.
-
-In V6, you compose the chat screen using individual widgets:
-
-```dart
-Scaffold(
- body: Column(
- children: [
- CometChatMessageHeader(user: user),
- Expanded(child: CometChatMessageList(user: user)),
- CometChatMessageComposer(user: user),
- ],
- ),
-)
-```
-
-> V6 does not have a combined `CometChatMessages` composite widget. You compose the UI yourself using `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer`.
-
-**Use When:**
-
-* Your chat starts from a specific user or group ID.
-* You want a clean, focused chat interface.
-* Use case involves support, onboarding, or one-time messages.
-
-[Integrate One-to-One / Group Chat](./flutter-one-to-one-chat)
-
-***
-
-### **3. Tab-Based Messaging UI (All-in-One)**
-
-**Best for:** Flutter apps needing a multi-tab experience to access Chat, Users, Calls, and Settings.
-
-**Use When:**
-
-* You need a full-featured chat solution in one UI.
-* Your users require structured navigation between modules.
-
-[Integrate Tab-Based Chat](./flutter-tab-based-chat)
-
-***
-
-## **Build Your Own Chat Experience**
-
-**Best for:** Developers who need complete control over their chat interface.
-
-**Key Areas to Explore:**
-
-* **[Core Features](./core-features)** – Learn about messaging, real-time updates, and other essential capabilities.
-* **[Components](./components-overview)** – Utilize prebuilt UI elements or customize them to fit your design.
-* **[Themes](./theme-introduction)** – Adjust colors, fonts, and styles to match your branding.
-
-***
-
-## **Next Steps**
-
-* **[Integrate Conversation List + Message](/ui-kit/flutter/v6/flutter-conversation)**
-* **[Integrate One-to-One Chat](/ui-kit/flutter/v6/flutter-one-to-one-chat)**
-* **[Integrate Tab-Based Chat](/ui-kit/flutter/v6/flutter-tab-based-chat)**
-* **[Advanced Customizations](/ui-kit/flutter/v6/theme-introduction)**
-
-***
diff --git a/ui-kit/flutter/v6/group-members.mdx b/ui-kit/flutter/v6/group-members.mdx
deleted file mode 100644
index ecd43f52b..000000000
--- a/ui-kit/flutter/v6/group-members.mdx
+++ /dev/null
@@ -1,542 +0,0 @@
----
-title: "Group Members"
-description: "Scrollable list of members in a group with scope indicators, search, and member management actions."
----
-
-`CometChatGroupMembers` renders a scrollable list of members in a specific group with real-time updates, scope indicators (owner/admin/moderator/participant), search, and member management actions (kick, ban, change scope).
-
-
-
-
-
----
-
-## Where It Fits
-
-`CometChatGroupMembers` is a list component that requires a `Group` object. It renders group members and supports actions like kick, ban, and scope change based on the logged-in user's permissions.
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- onItemTap: (groupMember) {
- // Navigate to member profile or chat
- },
-)
-```
-
-
-
----
-
-## Quick Start
-
-Using Navigator:
-
-
-
-```dart
-Navigator.push(context, MaterialPageRoute(
- builder: (context) => CometChatGroupMembers(group: group),
-));
-```
-
-
-
-Embedding as a widget:
-
-
-
-```dart
-@override
-Widget build(BuildContext context) {
- return Scaffold(
- body: SafeArea(
- child: CometChatGroupMembers(group: group),
- ),
- );
-}
-```
-
-
-
-Prerequisites: CometChat SDK initialized, a user logged in, and a valid `Group` object.
-
----
-
-## Filtering Members
-
-Pass a `GroupMembersRequestBuilder` to control what loads:
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- groupMembersRequestBuilder: GroupMembersRequestBuilder(group.guid)
- ..limit = 20
- ..searchKeyword = "john",
-)
-```
-
-
-
-### Filter Recipes
-
-| Recipe | Builder property |
-|---|---|
-| Limit per page | `..limit = 20` |
-| Search by name | `..searchKeyword = "john"` |
-| Filter by scopes | `..scopes = ["admin", "moderator"]` |
-
----
-
-## Actions and Events
-
-### Callback Methods
-
-#### `onItemTap`
-
-Fires when a member row is tapped.
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- onItemTap: (groupMember) {
- // Navigate to member profile
- },
-)
-```
-
-
-
-#### `onItemLongPress`
-
-Fires when a member row is long-pressed. By default shows the member action menu (kick/ban/scope change).
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- onItemLongPress: (groupMember) {
- // Custom long press behavior
- },
-)
-```
-
-
-
-#### `onBack`
-
-Fires when the user presses the back button.
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- onBack: () {
- Navigator.pop(context);
- },
-)
-```
-
-
-
-#### `onSelection`
-
-Fires when members are selected/deselected in multi-select mode.
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- selectionMode: SelectionMode.multiple,
- onSelection: (selectedMembers, context) {
- // Handle selected members
- },
-)
-```
-
-
-
-#### `onError`
-
-Fires on internal errors.
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- onError: (e) {
- debugPrint("Error: ${e.message}");
- },
-)
-```
-
-
-
-#### `onLoad`
-
-Fires when the list is successfully fetched.
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- onLoad: (memberList) {
- debugPrint("Loaded ${memberList.length} members");
- },
-)
-```
-
-
-
-#### `onEmpty`
-
-Fires when the list is empty after loading.
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- onEmpty: () {
- debugPrint("No members found");
- },
-)
-```
-
-
-
-### Global Events
-
-The component emits events via `CometChatGroupEvents`:
-
-
-
-```dart
-class _YourScreenState extends State with CometChatGroupEventListener {
- @override
- void initState() {
- super.initState();
- CometChatGroupEvents.addGroupsListener("listenerId", this);
- }
-
- @override
- void dispose() {
- CometChatGroupEvents.removeGroupsListener("listenerId");
- super.dispose();
- }
-
- @override
- void ccGroupMemberKicked(Action action, User kickedUser, User kickedBy, Group kickedFrom) {
- // Handle member kicked
- }
-
- @override
- void ccGroupMemberBanned(Action action, User bannedUser, User bannedBy, Group bannedFrom) {
- // Handle member banned
- }
-
- @override
- void ccGroupMemberScopeChanged(Action action, User updatedUser, String scopeChangedTo, String scopeChangedFrom, Group group) {
- // Handle scope changed
- }
-}
-```
-
-
-
-### SDK Events (Real-Time, Automatic)
-
-| SDK Listener | Internal behavior |
-|---|---|
-| `onGroupMemberJoined` | Adds member to list |
-| `onGroupMemberLeft` | Removes member from list |
-| `onGroupMemberKicked` | Removes member from list |
-| `onGroupMemberBanned` | Removes member from list |
-| `onGroupMemberScopeChanged` | Updates member scope in list |
-| `onUserOnline` / `onUserOffline` | Updates presence via per-member ValueNotifier (isolated rebuild) |
-| Connection reconnected | Triggers silent refresh |
-
----
-
-## Functionality
-
-| Property | Type | Default | Description |
-|---|---|---|---|
-| `group` | `Group` | **required** | The group whose members to display |
-| `title` | `String?` | `null` | Custom app bar title |
-| `showBackButton` | `bool` | `true` | Toggle back button |
-| `hideAppbar` | `bool?` | `false` | Toggle app bar visibility |
-| `hideSearch` | `bool` | `false` | Toggle search bar |
-| `usersStatusVisibility` | `bool?` | `true` | Show online/offline status |
-| `selectionMode` | `SelectionMode?` | `null` | Enable selection mode |
-| `hideKickMemberOption` | `bool?` | `false` | Hide kick option in action menu |
-| `hideBanMemberOption` | `bool?` | `false` | Hide ban option in action menu |
-| `hideScopeChangeOption` | `bool?` | `false` | Hide scope change option |
-
----
-
-## Custom View Slots
-
-### Leading View
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- leadingView: (context, groupMember) {
- return CircleAvatar(
- child: Text(groupMember.name?[0] ?? ""),
- );
- },
-)
-```
-
-
-
-### Title View
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- titleView: (context, groupMember) {
- return Text(
- groupMember.name ?? "",
- style: TextStyle(fontWeight: FontWeight.bold),
- );
- },
-)
-```
-
-
-
-### Subtitle View
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- subtitleView: (context, groupMember) {
- return Text(
- groupMember.scope ?? "participant",
- style: TextStyle(color: Color(0xFF727272), fontSize: 14),
- );
- },
-)
-```
-
-
-
-### Trailing View
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- trailingView: (context, groupMember) {
- return Chip(label: Text(groupMember.scope ?? ""));
- },
-)
-```
-
-
-
-### List Item View
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- listItemView: (groupMember) {
- return ListTile(
- leading: CircleAvatar(child: Text(groupMember.name?[0] ?? "")),
- title: Text(groupMember.name ?? ""),
- subtitle: Text(groupMember.scope ?? "participant"),
- trailing: Chip(label: Text(groupMember.scope ?? "")),
- );
- },
-)
-```
-
-
-
-### State Views
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- emptyStateView: (context) => Center(child: Text("No members")),
- errorStateView: (context) => Center(child: Text("Something went wrong")),
- loadingStateView: (context) => Center(child: CircularProgressIndicator()),
-)
-```
-
-
-
----
-
-## Menu Options
-
-
-
-```dart
-// Replace all options
-CometChatGroupMembers(
- group: group,
- setOptions: (groupMember, bloc, context) {
- return [
- CometChatOption(
- id: "message",
- iconWidget: Icon(Icons.message),
- title: "Message",
- onClick: () {
- // Open chat with this member
- },
- ),
- ];
- },
-)
-
-// Append to defaults
-CometChatGroupMembers(
- group: group,
- addOptions: (groupMember, bloc, context) {
- return [
- CometChatOption(
- id: "profile",
- iconWidget: Icon(Icons.person),
- title: "View Profile",
- onClick: () {
- // Open member profile
- },
- ),
- ];
- },
-)
-```
-
-
-
----
-
-## Advanced
-
-### BLoC Access
-
-Provide a custom `GroupMembersBloc`:
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- groupMembersBloc: CustomGroupMembersBloc(),
-)
-```
-
-
-
-### Public BLoC Events
-
-| Event | Description |
-|---|---|
-| `LoadGroupMembers` | Load initial members |
-| `LoadMoreGroupMembers` | Load next page (pagination) |
-| `SearchGroupMembers(keyword)` | Search members |
-| `KickMember(groupMember)` | Kick a member from the group |
-| `BanMember(groupMember)` | Ban a member from the group |
-| `ChangeMemberScope(groupMember, newScope)` | Change member's scope |
-| `ToggleMemberSelection(uid)` | Toggle selection state |
-| `ClearMemberSelection` | Clear all selections |
-
-For `ListBase` override hooks (`onItemAdded`, `onItemRemoved`, `onItemUpdated`, `onListCleared`, `onListReplaced`), see [BLoC & Data — ListBase Hooks](/ui-kit/flutter/v6/customization-bloc-data#listbase-hooks).
-
-### Public BLoC Methods
-
-| Method | Returns | Description |
-|---|---|---|
-| `getStatusNotifier(uid)` | `ValueNotifier` | Per-member status notifier for isolated rebuilds |
-
-### Permission-Based Actions
-
-Member actions (kick, ban, scope change) are permission-aware based on the logged-in user's scope:
-
-| Logged-in User Scope | Can Kick | Can Ban | Can Change Scope |
-|---|---|---|---|
-| Owner | All members | All members | All members |
-| Admin | Moderators, Participants | Moderators, Participants | Moderators, Participants |
-| Moderator | Participants | Participants | No |
-| Participant | No | No | No |
-
----
-
-## Style
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- groupMembersStyle: CometChatGroupMembersStyle(
- avatarStyle: CometChatAvatarStyle(
- borderRadius: BorderRadius.circular(8),
- backgroundColor: Color(0xFFFBAA75),
- ),
- statusIndicatorStyle: CometChatStatusIndicatorStyle(),
- changeScopeStyle: CometChatChangeScopeStyle(),
- confirmDialogStyle: CometChatConfirmDialogStyle(),
- ),
-)
-```
-
-
-
-
-
-
-
-### Style Properties
-
-| Property | Description |
-|---|---|
-| `avatarStyle` | Avatar appearance |
-| `statusIndicatorStyle` | Online/offline indicator |
-| `changeScopeStyle` | Scope change dialog style |
-| `confirmDialogStyle` | Kick/ban confirmation dialog style |
-
----
-
-## Next Steps
-
-
-
- Browse available groups
-
-
- Complete group chat implementation
-
-
- Detailed styling reference
-
-
- Browse recent conversations
-
-
diff --git a/ui-kit/flutter/v6/groups.mdx b/ui-kit/flutter/v6/groups.mdx
deleted file mode 100644
index ba5edb50f..000000000
--- a/ui-kit/flutter/v6/groups.mdx
+++ /dev/null
@@ -1,484 +0,0 @@
----
-title: "Groups"
-description: "Scrollable list of all available groups with search, avatars, group type indicators, and member counts."
----
-
-`CometChatGroups` renders a scrollable list of all available groups with real-time updates for group events, search, avatars, group type indicators (public/private/password), and member counts.
-
-
-
-
-
----
-
-## Where It Fits
-
-`CometChatGroups` is a list component. It renders all available groups and emits the selected `Group` via `onItemTap`. Wire it to `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer` to build a group chat layout.
-
-
-
-```dart
-CometChatGroups(
- onItemTap: (context, group) {
- // Navigate to group chat
- },
-)
-```
-
-
-
----
-
-## Quick Start
-
-Using Navigator:
-
-
-
-```dart
-Navigator.push(context, MaterialPageRoute(builder: (context) => const CometChatGroups()));
-```
-
-
-
-Embedding as a widget:
-
-
-
-```dart
-@override
-Widget build(BuildContext context) {
- return Scaffold(
- body: SafeArea(
- child: CometChatGroups(),
- ),
- );
-}
-```
-
-
-
-Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()`, a user logged in, and the UI Kit dependency added.
-
----
-
-## Filtering Groups
-
-Pass a `GroupsRequestBuilder` to control what loads:
-
-
-
-```dart
-CometChatGroups(
- groupsRequestBuilder: GroupsRequestBuilder()
- ..limit = 10
- ..searchKeyword = "team",
-)
-```
-
-
-
-### Filter Recipes
-
-| Recipe | Builder property |
-|---|---|
-| Limit per page | `..limit = 10` |
-| Search by keyword | `..searchKeyword = "team"` |
-| Joined groups only | `..joinedOnly = true` |
-| Filter by tags | `..tags = ["project"]` |
-| With tags | `..withTags = true` |
-
----
-
-## Actions and Events
-
-### Callback Methods
-
-#### `onItemTap`
-
-Fires when a group row is tapped. Primary navigation hook.
-
-
-
-```dart
-CometChatGroups(
- onItemTap: (context, group) {
- // Navigate to group chat screen
- },
-)
-```
-
-
-
-#### `onItemLongPress`
-
-Fires when a group row is long-pressed.
-
-
-
-```dart
-CometChatGroups(
- onItemLongPress: (context, group) {
- // Show context menu
- },
-)
-```
-
-
-
-#### `onBack`
-
-Fires when the user presses the back button in the app bar.
-
-
-
-```dart
-CometChatGroups(
- onBack: () {
- Navigator.pop(context);
- },
-)
-```
-
-
-
-#### `onSelection`
-
-Fires when groups are selected/deselected in multi-select mode.
-
-
-
-```dart
-CometChatGroups(
- selectionMode: SelectionMode.multiple,
- onSelection: (selectedGroups, context) {
- // Handle selected groups
- },
-)
-```
-
-
-
-#### `onError`
-
-Fires on internal errors.
-
-
-
-```dart
-CometChatGroups(
- onError: (e) {
- debugPrint("Error: ${e.message}");
- },
-)
-```
-
-
-
-#### `onLoad`
-
-Fires when the list is successfully fetched and loaded.
-
-
-
-```dart
-CometChatGroups(
- onLoad: (groupList) {
- debugPrint("Loaded ${groupList.length} groups");
- },
-)
-```
-
-
-
-#### `onEmpty`
-
-Fires when the list is empty after loading.
-
-
-
-```dart
-CometChatGroups(
- onEmpty: () {
- debugPrint("No groups found");
- },
-)
-```
-
-
-
-### SDK Events (Real-Time, Automatic)
-
-The component listens to these SDK events internally. No manual setup needed.
-
-| SDK Listener | Internal behavior |
-|---|---|
-| `onGroupMemberJoined` | Updates group member count |
-| `onGroupMemberLeft` | Updates group member count |
-| `onGroupMemberKicked` | Updates group member count, removes group if logged-in user was kicked |
-| `onGroupMemberBanned` | Updates group member count, removes group if logged-in user was banned |
-| `onMemberAddedToGroup` | Updates group member count |
-| `ccGroupCreated` | Adds new group to list |
-| `ccGroupDeleted` | Removes group from list |
-| Connection reconnected | Triggers silent refresh |
-
----
-
-## Functionality
-
-| Property | Type | Default | Description |
-|---|---|---|---|
-| `title` | `String?` | `null` | Custom app bar title |
-| `showBackButton` | `bool` | `true` | Toggle back button |
-| `hideAppbar` | `bool?` | `false` | Toggle app bar visibility |
-| `hideSearch` | `bool` | `false` | Toggle search bar |
-| `selectionMode` | `SelectionMode?` | `null` | Enable selection mode (`single` or `multiple`) |
-| `searchPlaceholder` | `String?` | `null` | Search placeholder text |
-
----
-
-## Custom View Slots
-
-### Leading View
-
-Replace the avatar / left section.
-
-
-
-```dart
-CometChatGroups(
- leadingView: (context, group) {
- return CircleAvatar(
- child: Text(group.name?[0] ?? "G"),
- );
- },
-)
-```
-
-
-
-### Title View
-
-Replace the group name / title text.
-
-
-
-```dart
-CometChatGroups(
- titleView: (context, group) {
- return Text(
- group.name ?? "",
- style: TextStyle(fontWeight: FontWeight.bold),
- );
- },
-)
-```
-
-
-
-### Subtitle View
-
-Replace the subtitle text below the group name.
-
-
-
-```dart
-CometChatGroups(
- subtitleView: (context, group) {
- return Text(
- "${group.membersCount} members",
- style: TextStyle(color: Color(0xFF727272), fontSize: 14),
- );
- },
-)
-```
-
-
-
-### Trailing View
-
-Replace the right section of each group item.
-
-
-
-```dart
-CometChatGroups(
- trailingView: (context, group) {
- return Text(group.type ?? "");
- },
-)
-```
-
-
-
-### List Item View
-
-Replace the entire list item row.
-
-
-
-```dart
-CometChatGroups(
- listItemView: (group) {
- return ListTile(
- leading: CircleAvatar(child: Text(group.name?[0] ?? "G")),
- title: Text(group.name ?? ""),
- subtitle: Text("${group.membersCount} members"),
- );
- },
-)
-```
-
-
-
-### State Views
-
-
-
-```dart
-CometChatGroups(
- emptyStateView: (context) => Center(child: Text("No groups found")),
- errorStateView: (context) => Center(child: Text("Something went wrong")),
- loadingStateView: (context) => Center(child: CircularProgressIndicator()),
-)
-```
-
-
-
----
-
-## Common Patterns
-
-### Minimal list — hide all chrome
-
-
-
-```dart
-CometChatGroups(
- hideAppbar: true,
- hideSearch: true,
-)
-```
-
-
-
-### Joined groups only
-
-
-
-```dart
-CometChatGroups(
- groupsRequestBuilder: GroupsRequestBuilder()
- ..joinedOnly = true,
-)
-```
-
-
-
----
-
-## Advanced
-
-### BLoC Access
-
-Provide a custom `GroupsBloc` to override behavior:
-
-
-
-```dart
-CometChatGroups(
- groupsBloc: CustomGroupsBloc(),
-)
-```
-
-
-
-### Extending GroupsBloc
-
-`GroupsBloc` uses the `ListBase` mixin with override hooks:
-
-
-
-```dart
-class CustomGroupsBloc extends GroupsBloc {
- @override
- void onItemAdded(Group item, List updatedList) {
- // Custom sorting logic
- super.onItemAdded(item, updatedList);
- }
-
- @override
- void onListReplaced(List previousList, List newList) {
- // Filter out specific groups
- final filtered = newList.where((g) => g.membersCount > 0).toList();
- super.onListReplaced(previousList, filtered);
- }
-}
-```
-
-
-
-For `ListBase` override hooks (`onItemAdded`, `onItemRemoved`, `onItemUpdated`, `onListCleared`, `onListReplaced`), see [BLoC & Data — ListBase Hooks](/ui-kit/flutter/v6/customization-bloc-data#listbase-hooks).
-
-### Public BLoC Events
-
-| Event | Description |
-|---|---|
-| `LoadGroups({searchKeyword, silent})` | Load initial groups. `silent: true` keeps existing list visible. |
-| `LoadMoreGroups()` | Load next page (pagination) |
-| `RefreshGroups()` | Refresh the list |
-| `SearchGroups(keyword)` | Search groups with debouncing |
-
----
-
-## Style
-
-
-
-```dart
-CometChatGroups(
- groupsStyle: CometChatGroupsStyle(
- avatarStyle: CometChatAvatarStyle(
- borderRadius: BorderRadius.circular(8),
- backgroundColor: Color(0xFFFBAA75),
- ),
- statusIndicatorStyle: CometChatStatusIndicatorStyle(),
- ),
-)
-```
-
-
-
-
-
-
-
-### Style Properties
-
-| Property | Description |
-|---|---|
-| `backgroundColor` | List background color |
-| `avatarStyle` | Avatar appearance |
-| `statusIndicatorStyle` | Group type indicator |
-| `searchBoxStyle` | Search box appearance |
-
-See [Component Styling](/ui-kit/flutter/v6/component-styling) for the full reference.
-
----
-
-## Next Steps
-
-
-
- View and manage group members
-
-
- Browse recent conversations
-
-
- Detailed styling reference
-
-
- Complete group chat implementation
-
-
diff --git a/ui-kit/flutter/v6/guide-block-unblock-user.mdx b/ui-kit/flutter/v6/guide-block-unblock-user.mdx
deleted file mode 100644
index 98f0bcf6c..000000000
--- a/ui-kit/flutter/v6/guide-block-unblock-user.mdx
+++ /dev/null
@@ -1,86 +0,0 @@
----
-title: "Implementing Block/Unblock User in Flutter with CometChat UIKit"
-sidebarTitle: "Block/Unblock User"
----
-
-Enable users to block and unblock other users in your Flutter chat app using CometChat's `blockUsers` and `unblockUsers` methods.
-
-## Overview
-
-The Block User feature lets one user prevent another from sending messages or interacting with them. Essential for user privacy, spam control, and moderation.
-
-## Prerequisites
-
-- A Flutter project with CometChat UIKit Flutter V6 installed
-- Initialized CometChat credentials (`appID`, `region`, `authKey`)
-
-## Components
-
-| Component | Role |
-|:---|:---|
-| `CometChatUIKit.blockUsers([...])` | SDK method to block specified user(s) |
-| `CometChatUIKit.unblockUsers([...])` | SDK method to unblock specified user(s) |
-| `ElevatedButton` | Flutter widget for block/unblock actions |
-
-## Integration Steps
-
-### Add "Block User" Button
-
-
-
-```dart
-ElevatedButton(
- onPressed: () async {
- try {
- await CometChatUIKit.blockUsers([user.uid]);
- ScaffoldMessenger.of(context).showSnackBar(
- SnackBar(content: Text('${user.name} has been blocked')),
- );
- } catch (e) {
- ScaffoldMessenger.of(context).showSnackBar(
- SnackBar(content: Text('Error blocking user: $e')),
- );
- }
- },
- child: Text('Block User'),
-)
-```
-
-
-
-### Add "Unblock User" Button
-
-
-
-```dart
-ElevatedButton(
- onPressed: () async {
- try {
- await CometChatUIKit.unblockUsers([user.uid]);
- ScaffoldMessenger.of(context).showSnackBar(
- SnackBar(content: Text('${user.name} has been unblocked')),
- );
- } catch (e) {
- ScaffoldMessenger.of(context).showSnackBar(
- SnackBar(content: Text('Error unblocking user: $e')),
- );
- }
- },
- child: Text('Unblock User'),
-)
-```
-
-
-
-## Customization Options
-
-- Conditional Rendering: Display "Block" or "Unblock" based on `user.blockedByMe` state
-- Modal Confirmation: Wrap actions in `showDialog` for confirmation prompts
-- Self-Block Prevention: Disable the button if `user.uid == loggedInUser.uid`
-
-## Summary
-
-| Feature | Method |
-|:---|:---|
-| Block User | `CometChatUIKit.blockUsers([...])` |
-| Unblock User | `CometChatUIKit.unblockUsers([...])` |
diff --git a/ui-kit/flutter/v6/guide-call-log-details.mdx b/ui-kit/flutter/v6/guide-call-log-details.mdx
deleted file mode 100644
index 9332d44f0..000000000
--- a/ui-kit/flutter/v6/guide-call-log-details.mdx
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: "Call Log Details"
-sidebarTitle: "Call Log Details"
----
-
-Provide a post-call details screen with metadata, participants, history, and recordings using CometChat V6 UIKit.
-
-## Overview
-
-The Call Log Details feature displays detailed information about a specific call, including participants, duration, timestamps, and recordings (if available).
-
-## Components
-
-| Component | Role |
-|:---|:---|
-| `CometChatCallLogs` | Lists call logs; tap to view details |
-| `CallLogRequestBuilder` | Filters call logs by criteria |
-
-## Integration
-
-### Navigate to Call Details
-
-
-
-```dart
-CometChatCallLogs(
- onItemClick: (callLog) {
- Navigator.push(
- context,
- MaterialPageRoute(
- builder: (_) => CallLogDetailScreen(callLog: callLog),
- ),
- );
- },
-)
-```
-
-
-
-### Build a Call Detail Screen
-
-
-
-```dart
-class CallLogDetailScreen extends StatelessWidget {
- final CallLog callLog;
-
- const CallLogDetailScreen({required this.callLog, super.key});
-
- @override
- Widget build(BuildContext context) {
- final initiatedAt = DateTime.fromMillisecondsSinceEpoch(
- (callLog.initiatedAt ?? 0) * 1000,
- );
-
- return Scaffold(
- appBar: AppBar(title: const Text("Call Details")),
- body: Padding(
- padding: const EdgeInsets.all(16),
- child: Column(
- crossAxisAlignment: CrossAxisAlignment.start,
- children: [
- Text("Status: ${callLog.status ?? 'Unknown'}"),
- Text("Type: ${callLog.type ?? 'Unknown'}"),
- Text("Duration: ${callLog.totalDurationInMinutes ?? 0} min"),
- Text("Time: $initiatedAt"),
- if (callLog.hasRecording == true)
- const Text("Recording available"),
- ],
- ),
- ),
- );
- }
-}
-```
-
-
-
-## Filtering Call Logs
-
-
-
-```dart
-CometChatCallLogs(
- callLogsRequestBuilder: CallLogRequestBuilder()
- ..limit = 20
- ..hasRecording = true,
-)
-```
-
-
diff --git a/ui-kit/flutter/v6/guide-group-chat.mdx b/ui-kit/flutter/v6/guide-group-chat.mdx
deleted file mode 100644
index c157201e3..000000000
--- a/ui-kit/flutter/v6/guide-group-chat.mdx
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: "Group Chat"
-sidebarTitle: "Group Chat"
----
-
-Build group chat functionality in your Flutter app using CometChat V6 UIKit. Create/join groups, view members, manage roles, and moderate participation.
-
-## Overview
-
-V6 provides `CometChatGroups` and `CometChatGroupMembers` widgets powered by BLoC for group management.
-
-## Components
-
-| Component | Role |
-|:---|:---|
-| `CometChatGroups` | Lists available groups |
-| `CometChatGroupMembers` | Displays and manages group members |
-| `CometChatMessageHeader` | Shows group info in chat header |
-| `CometChatMessageList` | Displays group messages |
-| `CometChatMessageComposer` | Sends messages to group |
-
-## Integration
-
-### Display Groups List
-
-
-
-```dart
-CometChatGroups(
- onItemTap: (group) {
- Navigator.push(
- context,
- MaterialPageRoute(
- builder: (_) => Scaffold(
- appBar: CometChatMessageHeader(group: group),
- body: SafeArea(
- child: Column(
- children: [
- Expanded(child: CometChatMessageList(group: group)),
- CometChatMessageComposer(group: group),
- ],
- ),
- ),
- ),
- ),
- );
- },
-)
-```
-
-
-
-### Display Group Members
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- onItemTap: (groupMember) {
- // Handle member tap
- },
-)
-```
-
-
-
-### Manage Members
-
-V6 provides built-in options for member management:
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- hideKickMemberOption: false,
- hideBanMemberOption: false,
- hideScopeChangeOption: false,
-)
-```
-
-
-
-## Key V6 Differences
-
-| Aspect | V5 | V6 |
-|---|---|---|
-| Composite widget | `CometChatGroupsWithMessages` | Not available — compose manually |
-| State management | GetX | BLoC (`GroupsBloc`) |
-| Member management | Via configuration objects | Direct widget properties |
diff --git a/ui-kit/flutter/v6/guide-message-agentic-flow.mdx b/ui-kit/flutter/v6/guide-message-agentic-flow.mdx
deleted file mode 100644
index 6f0f76bd5..000000000
--- a/ui-kit/flutter/v6/guide-message-agentic-flow.mdx
+++ /dev/null
@@ -1,87 +0,0 @@
----
-title: "Message Agentic Flow"
-sidebarTitle: "Message Agentic Flow"
----
-
-Implement agentic message flows in your Flutter app using CometChat V6 UIKit. This guide covers how to integrate AI-powered message handling with the chat interface.
-
-## Overview
-
-The Message Agentic Flow feature enables AI-driven interactions within your chat application. In V6, AI features are handled through `MessageTemplateUtils` rather than explicit extension registration.
-
-## Integration
-
-### Enable AI Features
-
-Ensure AI features are enabled on your CometChat Dashboard. V6 handles AI integration internally.
-
-### Custom AI Message Handling
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- templates: [
- CometChatMessageTemplate(
- type: "ai_response",
- category: MessageCategoryConstants.custom,
- contentView: (baseMessage, context, alignment, {additionalConfigurations}) {
- // Custom rendering for AI agent messages
- return Container(
- padding: const EdgeInsets.all(12),
- decoration: BoxDecoration(
- color: Color(0xFFEDEAFA),
- borderRadius: BorderRadius.circular(12),
- ),
- child: Column(
- crossAxisAlignment: CrossAxisAlignment.start,
- children: [
- Row(
- children: [
- Icon(Icons.smart_toy, color: Color(0xFF6852D6), size: 16),
- SizedBox(width: 4),
- Text("AI Assistant", style: TextStyle(
- color: Color(0xFF6852D6),
- fontWeight: FontWeight.bold,
- fontSize: 12,
- )),
- ],
- ),
- SizedBox(height: 8),
- Text((baseMessage as TextMessage).text),
- ],
- ),
- );
- },
- ),
- ],
-)
-```
-
-
-
-### AI Assistant Chat History
-
-Use the `CometChatAIAssistantChatHistory` widget to display past AI interactions:
-
-
-
-```dart
-CometChatAIAssistantChatHistory(
- user: user,
- style: CometChatAIAssistantChatHistoryStyle(
- backgroundColor: const Color(0xFFFFFAF6),
- ),
-)
-```
-
-
-
-## Key V6 Differences
-
-| Aspect | V5 | V6 |
-|---|---|---|
-| AI extension registration | Explicit via `UIKitSettings.aiFeature` | Handled internally via `MessageTemplateUtils` |
-| Custom AI templates | Via `CometChatUIKit.getDataSource()` | Via `MessageTemplateUtils` and direct template injection |
-| AI Assistant widget | `CometChatAIAssistantChatHistory` | Same widget, same API |
diff --git a/ui-kit/flutter/v6/guide-message-privately.mdx b/ui-kit/flutter/v6/guide-message-privately.mdx
deleted file mode 100644
index a764f1c40..000000000
--- a/ui-kit/flutter/v6/guide-message-privately.mdx
+++ /dev/null
@@ -1,62 +0,0 @@
----
-title: "Message Privately"
-sidebarTitle: "Message Privately"
----
-
-Start a direct 1:1 chat from a profile or list in your Flutter app using CometChat V6 UIKit.
-
-## Overview
-
-The "Message Privately" feature allows users to initiate a direct conversation with another user from any context — a group member list, user profile, or search results.
-
-## Integration
-
-### Navigate to Private Chat
-
-
-
-```dart
-void openPrivateChat(BuildContext context, User user) {
- Navigator.push(
- context,
- MaterialPageRoute(
- builder: (_) => Scaffold(
- appBar: CometChatMessageHeader(user: user),
- body: SafeArea(
- child: Column(
- children: [
- Expanded(child: CometChatMessageList(user: user)),
- CometChatMessageComposer(user: user),
- ],
- ),
- ),
- ),
- ),
- );
-}
-```
-
-
-
-### From Group Members List
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- onItemTap: (groupMember) {
- // Convert GroupMember to User for private messaging
- User user = User(
- uid: groupMember.uid,
- name: groupMember.name,
- avatar: groupMember.avatar,
- );
- openPrivateChat(context, user);
- },
-)
-```
-
-
-
-
diff --git a/ui-kit/flutter/v6/guide-new-chat.mdx b/ui-kit/flutter/v6/guide-new-chat.mdx
deleted file mode 100644
index fa962d94a..000000000
--- a/ui-kit/flutter/v6/guide-new-chat.mdx
+++ /dev/null
@@ -1,94 +0,0 @@
----
-title: "New Chat"
-sidebarTitle: "New Chat"
----
-
-Offer a unified discovery screen for users and groups and launch new chats quickly using CometChat V6 UIKit.
-
-## Overview
-
-The "New Chat" feature provides a screen where users can browse available users and groups to start a new conversation.
-
-## Integration
-
-### Create a New Chat Screen
-
-
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:flutter/material.dart';
-
-class NewChatScreen extends StatelessWidget {
- const NewChatScreen({super.key});
-
- void _openChat(BuildContext context, {User? user, Group? group}) {
- Navigator.push(
- context,
- MaterialPageRoute(
- builder: (_) => Scaffold(
- appBar: CometChatMessageHeader(user: user, group: group),
- body: SafeArea(
- child: Column(
- children: [
- Expanded(child: CometChatMessageList(user: user, group: group)),
- CometChatMessageComposer(user: user, group: group),
- ],
- ),
- ),
- ),
- ),
- );
- }
-
- @override
- Widget build(BuildContext context) {
- return DefaultTabController(
- length: 2,
- child: Scaffold(
- appBar: AppBar(
- title: const Text('New Chat'),
- bottom: const TabBar(
- tabs: [
- Tab(text: 'Users'),
- Tab(text: 'Groups'),
- ],
- ),
- ),
- body: TabBarView(
- children: [
- CometChatUsers(
- hideAppbar: true,
- onItemTap: (user) => _openChat(context, user: user),
- ),
- CometChatGroups(
- hideAppbar: true,
- onItemTap: (group) => _openChat(context, group: group),
- ),
- ],
- ),
- ),
- );
- }
-}
-```
-
-
-
-### Launch from a FAB
-
-
-
-```dart
-FloatingActionButton(
- onPressed: () {
- Navigator.push(
- context,
- MaterialPageRoute(builder: (_) => const NewChatScreen()),
- );
- },
- child: const Icon(Icons.chat),
-)
-```
-
-
diff --git a/ui-kit/flutter/v6/guide-overview.mdx b/ui-kit/flutter/v6/guide-overview.mdx
deleted file mode 100644
index 86311f450..000000000
--- a/ui-kit/flutter/v6/guide-overview.mdx
+++ /dev/null
@@ -1,22 +0,0 @@
----
-title: "Overview"
-sidebarTitle: "Overview"
----
-
-> This page indexes focused, task-oriented feature guides for the Flutter V6 UI Kit. Each guide shows how to implement a specific capability end-to-end using V6 UI kit components.
-
-## When to Use These Guides
-
-Use these after finishing [Getting Started](/ui-kit/flutter/v6/getting-started) and wiring a basic conversations/messages experience. Add them incrementally to deepen functionality without rebuilding fundamentals.
-
-## Guide Directory
-
-| Guide | Description |
-|:------|:------------|
-| [Block / Unblock User](/ui-kit/flutter/v6/guide-block-unblock-user) | Let users block or unblock others; enforce privacy by hiding interaction options and preventing message flow. |
-| [Group Chat](/ui-kit/flutter/v6/guide-group-chat) | Create/join groups, view members, add/remove users, manage roles, and moderate participation. |
-| [Message Privately](/ui-kit/flutter/v6/guide-message-privately) | Start a direct 1:1 chat from a profile or list. |
-| [New Chat](/ui-kit/flutter/v6/guide-new-chat) | Offer a unified discovery screen for users and groups and launch new chats quickly. |
-| [Threaded Messages](/ui-kit/flutter/v6/guide-threaded-messages) | Enable threaded replies: open parent message context, browse replies, and compose within a focused thread. |
-
-
diff --git a/ui-kit/flutter/v6/guide-threaded-messages.mdx b/ui-kit/flutter/v6/guide-threaded-messages.mdx
deleted file mode 100644
index 0e0ea924e..000000000
--- a/ui-kit/flutter/v6/guide-threaded-messages.mdx
+++ /dev/null
@@ -1,118 +0,0 @@
----
-title: "Threaded Messages"
-sidebarTitle: "Threaded Messages"
----
-
-Enhance your Flutter chat app with threaded messaging using CometChat V6's `CometChatMessageList` and `CometChatThreadedHeader` components.
-
-## Overview
-
-- Reply to specific messages to start focused sub-conversations
-- View all replies grouped under the parent message
-- Seamlessly switch back to the main conversation
-
-## Prerequisites
-
-- A Flutter project with CometChat UIKit Flutter V6 installed
-- Initialized CometChat credentials
-
-## Components
-
-| Component | Role |
-|:---|:---|
-| `CometChatMessageList` | Displays main chat; provides `onThreadRepliesClick` callback |
-| `CometChatThreadedHeader` | Shows the parent message and thread context |
-| `CometChatMessageComposer` | Sends new messages; pass `parentMessageId` for replies |
-
-## Integration Steps
-
-### Show the "Reply in Thread" Option
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- onThreadRepliesClick: (BaseMessage message) {
- Navigator.push(
- context,
- MaterialPageRoute(
- builder: (_) => ThreadScreen(parentMessage: message, user: user),
- ),
- );
- },
-)
-```
-
-
-
-### Navigate to the Thread Screen
-
-In V6, compose the thread screen using individual widgets:
-
-
-
-```dart
-class ThreadScreen extends StatelessWidget {
- final BaseMessage parentMessage;
- final User? user;
- final Group? group;
-
- const ThreadScreen({required this.parentMessage, this.user, this.group, super.key});
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- appBar: AppBar(title: Text("Thread")),
- body: Column(
- children: [
- CometChatThreadedHeader(message: parentMessage),
- Expanded(
- child: CometChatMessageList(
- user: user,
- group: group,
- parentMessageId: parentMessage.id,
- ),
- ),
- CometChatMessageComposer(
- user: user,
- group: group,
- parentMessageId: parentMessage.id,
- ),
- ],
- ),
- );
- }
-}
-```
-
-
-
-### Send a Threaded Message
-
-
-
-```dart
-CometChatMessageComposer(
- user: user,
- parentMessageId: parentMessage.id,
-)
-```
-
-
-
-## Customization Options
-
-- Header Styling: Customize `CometChatThreadedHeader` appearance
-- Composer Placeholder: Change placeholder text based on thread context
-- Empty State: Display "No replies yet" when thread is empty
-
-## Summary
-
-| Feature | Component / Method |
-|:---|:---|
-| Show thread option | `CometChatMessageList.onThreadRepliesClick` |
-| Thread view screen | Custom `ThreadScreen` widget |
-| Display threaded messages | `CometChatMessageList(parentMessageId: ...)` |
-| Send threaded message | `CometChatMessageComposer(parentMessageId: ...)` |
-| Thread header | `CometChatThreadedHeader(message: ...)` |
diff --git a/ui-kit/flutter/v6/incoming-call.mdx b/ui-kit/flutter/v6/incoming-call.mdx
deleted file mode 100644
index 3890ebb27..000000000
--- a/ui-kit/flutter/v6/incoming-call.mdx
+++ /dev/null
@@ -1,238 +0,0 @@
----
-title: "Incoming Call"
-description: "Full-screen overlay for incoming audio and video calls with accept/reject options."
----
-
-`CometChatIncomingCall` displays a full-screen overlay when an incoming call is received, showing caller info with accept and reject buttons.
-
----
-
-## Where It Fits
-
-Typically triggered automatically when `CallNavigationContext.navigatorKey` is set in your `MaterialApp`.
-
-
-
-```dart
-MaterialApp(navigatorKey: CallNavigationContext.navigatorKey, home: YourHomeScreen())
-```
-
-
-
----
-
-## Quick Start
-
-### Automatic (Recommended)
-
-
-
-```dart
-MaterialApp(navigatorKey: CallNavigationContext.navigatorKey, home: YourHomeScreen())
-```
-
-
-
-### Manual Launch
-
-
-
-```dart
-Navigator.push(context, MaterialPageRoute(
- builder: (context) => CometChatIncomingCall(user: user, call: callObject),
-));
-```
-
-
-
-Prerequisites: CometChat SDK initialized, Calls UIKit added, `callingExtension` set. See [Call Features](/ui-kit/flutter/call-features).
-
----
-
-## Actions
-
-#### `onAccept`
-
-
-
-```dart
-CometChatIncomingCall(user: user, call: callObject,
- onAccept: (BuildContext context, Call call) { /* Custom accept */ },
-)
-```
-
-
-
-#### `onDecline`
-
-
-
-```dart
-CometChatIncomingCall(user: user, call: callObject,
- onDecline: (BuildContext context, Call call) { /* Custom decline */ },
-)
-```
-
-
-
-#### `onError`
-
-
-
-```dart
-CometChatIncomingCall(user: user, call: callObject,
- onError: (e) { debugPrint("Error: ${e.message}"); },
-)
-```
-
-
-
-
-
----
-
-## Functionality
-
-| Property | Type | Description |
-|---|---|---|
-| `user` | `User?` | Caller user object |
-| `call` | `Call` | Call object (required) |
-| `callSettingsBuilder` | `CallSettingsBuilder?` | Configure call settings |
-| `height` / `width` | `double?` | Widget dimensions |
-| `callIcon` | `Widget?` | Custom call type icon |
-| `acceptButtonText` | `String?` | Custom accept button text |
-| `declineButtonText` | `String?` | Custom decline button text |
-| `disableSoundForCalls` | `bool?` | Disable incoming call sound |
-| `customSoundForCalls` | `String?` | Custom sound asset path |
-
----
-
-## Custom View Slots
-
-### Item View
-
-
-
-```dart
-CometChatIncomingCall(user: user, call: callObject,
- itemView: (context, call) { return Container(); },
-)
-```
-
-
-
-### Leading View
-
-
-
-```dart
-CometChatIncomingCall(user: user, call: callObject,
- leadingView: (context, call) {
- return CircleAvatar(radius: 40, backgroundImage: NetworkImage(call.sender?.avatar ?? ""));
- },
-)
-```
-
-
-
-### Title View
-
-
-
-```dart
-CometChatIncomingCall(user: user, call: callObject,
- titleView: (context, call) {
- return Text(call.sender?.name ?? "Unknown",
- style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white));
- },
-)
-```
-
-
-
-### Subtitle View
-
-
-
-```dart
-CometChatIncomingCall(user: user, call: callObject,
- subTitleView: (context, call) {
- final type = call.type == CometChatConstants.CALL_TYPE_VIDEO ? "Video" : "Audio";
- return Text("Incoming $type Call", style: TextStyle(fontSize: 14, color: Colors.white70));
- },
-)
-```
-
-
-
-### Trailing View
-
-
-
-```dart
-CometChatIncomingCall(user: user, call: callObject,
- trailingView: (context, call) {
- return Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [
- ElevatedButton(onPressed: () {}, child: Text("Reject"),
- style: ElevatedButton.styleFrom(backgroundColor: Colors.red)),
- ElevatedButton(onPressed: () {}, child: Text("Accept"),
- style: ElevatedButton.styleFrom(backgroundColor: Colors.green)),
- ]);
- },
-)
-```
-
-
-
----
-
-## Style
-
-
-
-```dart
-CometChatIncomingCall(user: user, call: callObject,
- incomingCallStyle: CometChatIncomingCallStyle(
- backgroundColor: Color(0xFFEDEAFA),
- avatarStyle: CometChatAvatarStyle(backgroundColor: Color(0xFFAA9EE8), borderRadius: BorderRadius.circular(7.5)),
- acceptButtonColor: Color(0xFF6852D6),
- declineButtonColor: Colors.white,
- declineTextColor: Color(0xFFF44649),
- callIconColor: Color(0xFF6852D6),
- ),
-)
-```
-
-
-
-| Property | Description |
-|---|---|
-| `backgroundColor` | Background color |
-| `avatarStyle` | Caller avatar appearance |
-| `acceptButtonColor` | Accept button background |
-| `declineButtonColor` | Decline button background |
-| `declineTextColor` | Decline button text color |
-| `callIconColor` | Call type icon color |
-
----
-
-## Key V6 Differences
-
-| Aspect | V5 | V6 |
-|---|---|---|
-| Subtitle | Static `String?` | Dynamic `Widget? Function(BuildContext, Call)?` |
-| Decline icon | URL-based `String?` | Widget-based |
-| Custom views | Limited | Full `titleView`, `subTitleView`, `leadingView`, `trailingView`, `itemView` |
-| State management | GetX controller | BLoC (`IncomingCallBloc`) |
-| Removed | `theme`, `avatarStyle`, `cardStyle`, `ongoingCallConfiguration` | Integrated into main style |
-
----
-
-## Next Steps
-
-
- Manage outgoing calls
- Add call buttons
- Complete calling setup
- Styling reference
-
diff --git a/ui-kit/flutter/v6/localize.mdx b/ui-kit/flutter/v6/localize.mdx
deleted file mode 100644
index ede87425f..000000000
--- a/ui-kit/flutter/v6/localize.mdx
+++ /dev/null
@@ -1,166 +0,0 @@
----
-title: "Localize"
----
-
-## Overview
-
-CometChat V6 UI Kit provides language localization to adapt to the language of a specific country or region. The `CometChatLocalize` class allows you to detect the language of your users based on their device settings and set the language accordingly.
-
-The UI Kit supports 19 languages:
-
-* Arabic (ar), German (de), English (en, en-GB), Spanish (es), French (fr), Hindi (hi), Hungarian (hu), Japanese (ja), Korean (ko), Lithuanian (lt), Malay (ms), Dutch (nl), Portuguese (pt), Russian (ru), Swedish (sv), Turkish (tr), Chinese (zh, zh-TW)
-
-## Usage
-
-### Integration
-
-Add the following dependency in `pubspec.yaml`:
-
-
-
-```yaml
-flutter_localizations:
- sdk: flutter
-```
-
-
-
-***
-
-Update MaterialApp Localizations Delegates:
-
-
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:cometchat_uikit_shared/l10n/translations.dart' as cc;
-import 'package:flutter/material.dart';
-import 'package:flutter_localizations/flutter_localizations.dart';
-
-class MyApp extends StatelessWidget {
- const MyApp({super.key});
-
- @override
- Widget build(BuildContext context) {
- return MaterialApp(
- supportedLocales: const [
- Locale('en'), Locale('en', 'GB'), Locale('ar'), Locale('de'),
- Locale('es'), Locale('fr'), Locale('hi'), Locale('hu'),
- Locale('ja'), Locale('ko'), Locale('lt'), Locale('ms'),
- Locale('nl'), Locale('pt'), Locale('ru'), Locale('sv'),
- Locale('tr'), Locale('zh'), Locale('zh', 'TW'),
- ],
- localizationsDelegates: const [
- cc.Translations.delegate,
- GlobalMaterialLocalizations.delegate,
- GlobalWidgetsLocalizations.delegate,
- GlobalCupertinoLocalizations.delegate,
- ],
- theme: ThemeData(
- appBarTheme: AppBarTheme(scrolledUnderElevation: 0.0),
- ),
- title: 'CometChat Flutter App',
- home: YourHomeScreen(),
- debugShowCheckedModeBanner: false,
- );
- }
-}
-```
-
-
-
-***
-
-You can also translate specific strings:
-
-
-
-```dart
-String translatedString = Translations.of(context).users;
-Text(translatedString);
-```
-
-
-
-### Customizing UI Kit Translations for a Specific Language
-
-Override a specific language's default translations by creating a custom localization class:
-
-
-
-```dart
-import 'dart:async';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart' as cc;
-import 'package:flutter/foundation.dart';
-import 'package:flutter/material.dart';
-
-class CustomEN extends TranslationsEn {
- static const delegate = _CustomCometChatLocalizationsDelegate();
-
- @override
- String get chats => "Overridden Chat";
-
- @override
- String get calls => "Overridden Call";
-}
-
-class _CustomCometChatLocalizationsDelegate
- extends LocalizationsDelegate {
- const _CustomCometChatLocalizationsDelegate();
-
- @override
- bool isSupported(Locale locale) => locale.languageCode == 'en';
-
- @override
- Future load(Locale locale) =>
- SynchronousFuture(CustomEN());
-
- @override
- bool shouldReload(_CustomCometChatLocalizationsDelegate old) => false;
-}
-```
-
-
-
-Then add `CustomEN.delegate` to your `localizationsDelegates` list before `cc.Translations.delegate`.
-
-### Adding New Language Support
-
-Extend the UI Kit with a new language by creating a custom translation class:
-
-
-
-```dart
-class TeluguLocalization extends cc.Translations {
- TeluguLocalization([super.locale = "te"]);
- static const delegate = _TeluguLocalizationsDelegate();
-
- @override
- String get chats => "సందేశాలు";
-
- @override
- String get calls => "ఫోన్ కాల్స్";
- // Override all relevant strings for full localization
-}
-
-class _TeluguLocalizationsDelegate
- extends LocalizationsDelegate {
- const _TeluguLocalizationsDelegate();
-
- @override
- bool isSupported(Locale locale) => locale.languageCode == 'te';
-
- @override
- Future load(Locale locale) =>
- SynchronousFuture(TeluguLocalization());
-
- @override
- bool shouldReload(_TeluguLocalizationsDelegate old) => false;
-}
-```
-
-
-
-### DateTimeFormatter
-
-By providing a custom `DateTimeFormatterCallback`, you can globally configure how time and date values are displayed across all UI components. For details, refer to the [CometChatUIKit class](/ui-kit/flutter/v6/methods#dateformatter).
diff --git a/ui-kit/flutter/v6/mentions-formatter-guide.mdx b/ui-kit/flutter/v6/mentions-formatter-guide.mdx
deleted file mode 100644
index dfef364a7..000000000
--- a/ui-kit/flutter/v6/mentions-formatter-guide.mdx
+++ /dev/null
@@ -1,147 +0,0 @@
----
-title: "Mentions Formatter"
----
-
-## Overview
-
-The `CometChatMentionsFormatter` class formats mentions within text messages displayed in the chat interface. For the base `CometChatTextFormatter` API, see [Text Formatters](/ui-kit/flutter/v6/customization-text-formatters).
-
-## Usage
-
-Pass `CometChatMentionsFormatter` to the `textFormatters` property of widgets like [CometChatConversations](/ui-kit/flutter/v6/conversations), [CometChatMessageList](/ui-kit/flutter/v6/message-list), or [CometChatMessageComposer](/ui-kit/flutter/v6/message-composer).
-
-
-
-```dart
-textFormatters: [
- CometChatMentionsFormatter(
- messageBubbleTextStyle: (theme, alignment, {forConversation = false}) =>
- TextStyle(
- color: alignment == BubbleAlignment.left ? Colors.orange : Colors.pink,
- fontSize: 14,
- fontWeight: FontWeight.bold,
- ),
- ),
-]
-```
-
-
-
-***
-
-## Actions
-
-##### onMentionTap
-
-Setting a listener for mention-click events in Message Bubbles. This listener is activated when a mention is clicked, returning the corresponding user object.
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- textFormatters: [
- CometChatMentionsFormatter(
- onMentionTap: (mention, mentionedUser, {message}) {
- ScaffoldMessenger.of(context).showSnackBar(
- SnackBar(content: Text('Tapped on ${mentionedUser.name}')),
- );
- },
- messageBubbleTextStyle: (theme, alignment, {forConversation = false}) =>
- TextStyle(
- color: alignment == BubbleAlignment.left ? Colors.orange : Colors.greenAccent,
- fontSize: 14,
- fontWeight: FontWeight.bold,
- ),
- ),
- ],
-)
-```
-
-
-
-***
-
-## Customization
-
-| Property | Description | Code |
-|---|---|---|
-| trackingCharacter | Character that triggers mention search | `String? trackingCharacter` |
-| pattern | Regex pattern to identify mentions | `RegExp? pattern` |
-| messageBubbleTextStyle | Text style for message bubble | `TextStyle? messageBubbleTextStyle` |
-| messageInputTextStyle | Text style for message input | `TextStyle? messageInputTextStyle` |
-| onMentionTap | Callback for mention tap actions | `void Function(User)? onMentionTap` |
-| groupMembersRequestBuilder | Request builder for group members | `GroupMembersRequestBuilder?` |
-| usersRequestBuilder | Request builder for users | `UsersRequestBuilder?` |
-
-***
-
-## Advanced
-
-### Composer Mention Text Style
-
-
-
-```dart
-CometChatMessageComposer(
- user: user,
- textFormatters: [
- CometChatMentionsFormatter(
- messageInputTextStyle: (theme) {
- return const TextStyle(
- color: Colors.lightBlueAccent,
- fontSize: 14,
- fontWeight: FontWeight.bold,
- );
- },
- ),
- ],
-)
-```
-
-
-
-### Message Bubble Mention Text Style
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- textFormatters: [
- CometChatMentionsFormatter(
- messageBubbleTextStyle: (theme, alignment, {forConversation = false}) =>
- TextStyle(
- color: alignment == BubbleAlignment.left ? Colors.orange : Colors.greenAccent,
- fontSize: 14,
- fontWeight: FontWeight.bold,
- ),
- ),
- ],
-)
-```
-
-
-
-### Conversations Mention Text Style
-
-
-
-```dart
-CometChatConversations(
- textFormatters: [
- CometChatMentionsFormatter(
- messageBubbleTextStyle: (theme, alignment, {forConversation = false}) =>
- const TextStyle(
- color: Colors.lightBlueAccent,
- fontSize: 14,
- fontWeight: FontWeight.bold,
- ),
- ),
- ],
-)
-```
-
-
-
-
diff --git a/ui-kit/flutter/v6/message-bubble-styling.mdx b/ui-kit/flutter/v6/message-bubble-styling.mdx
deleted file mode 100644
index a49c48079..000000000
--- a/ui-kit/flutter/v6/message-bubble-styling.mdx
+++ /dev/null
@@ -1,411 +0,0 @@
----
-title: "Customizing Message Bubbles"
-sidebarTitle: "Message Bubble Styling"
----
-
-The CometChat V6 UI Kit provides `CometChatOutgoingMessageBubbleStyle` and `CometChatIncomingMessageBubbleStyle` for fine-grained control over message bubble appearance. These classes extend `ThemeExtension`, allowing customizations through global theming or explicit style objects.
-
-## How These Classes Help
-
-### 1. Targeted Customization
-
-Customize specific attributes of message bubbles:
-
-* Background color, border radius, text style
-* Specialized bubbles: Audio, File, Collaborative, Poll, Deleted, Link Preview, Sticker, Call bubbles
-* Reactions, timestamps, avatars, and borders
-
-### 2. Unified Global Theming
-
-Apply styles via Flutter's global theming or pass them to `CometChatMessageListStyle`:
-
-
-
-```dart
-MaterialApp(
- title: 'Your app',
- theme: ThemeData(
- extensions: [
- CometChatIncomingMessageBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- ),
- CometChatOutgoingMessageBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- ),
- ],
- ),
- home: ...,
-);
-```
-
-
-
-### 3. Ease of Integration
-
-Pass styles directly to `CometChatMessageList`:
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- group: group,
- style: CometChatMessageListStyle(
- incomingMessageBubbleStyle: CometChatIncomingMessageBubbleStyle(),
- outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(),
- ),
-)
-```
-
-
-
-## Customizable Message Bubbles
-
-### Text Bubble
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatOutgoingMessageBubbleStyle(
- textBubbleStyle: CometChatTextBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- ),
- ),
- CometChatIncomingMessageBubbleStyle(
- textBubbleStyle: CometChatTextBubbleStyle(
- backgroundColor: Color(0xFFFEEDE1),
- ),
- ),
- ],
-)
-```
-
-
-
-### Image Bubble
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatOutgoingMessageBubbleStyle(
- imageBubbleStyle: CometChatImageBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- ),
- ),
- CometChatIncomingMessageBubbleStyle(
- imageBubbleStyle: CometChatImageBubbleStyle(
- backgroundColor: Color(0xFFFEEDE1),
- ),
- ),
- ],
-)
-```
-
-
-
-### Video Bubble
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatOutgoingMessageBubbleStyle(
- videoBubbleStyle: CometChatVideoBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- playIconColor: Color(0xFFF76808),
- ),
- ),
- CometChatIncomingMessageBubbleStyle(
- videoBubbleStyle: CometChatVideoBubbleStyle(
- backgroundColor: Color(0xFFFEEDE1),
- playIconColor: Color(0xFFF76808),
- ),
- ),
- ],
-)
-```
-
-
-
-### Audio Bubble
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatOutgoingMessageBubbleStyle(
- audioBubbleStyle: CometChatAudioBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- playIconColor: Color(0xFFF76808),
- ),
- ),
- CometChatIncomingMessageBubbleStyle(
- audioBubbleStyle: CometChatAudioBubbleStyle(
- backgroundColor: Color(0xFFFEEDE1),
- downloadIconColor: Color(0xFFF76808),
- audioBarColor: Color(0xFFF76808),
- playIconColor: Color(0xFFF76808),
- ),
- ),
- ],
-)
-```
-
-
-
-### File Bubble
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatOutgoingMessageBubbleStyle(
- fileBubbleStyle: CometChatFileBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- ),
- ),
- CometChatIncomingMessageBubbleStyle(
- fileBubbleStyle: CometChatFileBubbleStyle(
- backgroundColor: Color(0xFFFEEDE1),
- downloadIconTint: Color(0xFFF76808),
- ),
- ),
- ],
-)
-```
-
-
-
-### Sticker Bubble
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatOutgoingMessageBubbleStyle(
- stickerBubbleStyle: CometChatStickerBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- ),
- ),
- CometChatIncomingMessageBubbleStyle(
- stickerBubbleStyle: CometChatStickerBubbleStyle(
- backgroundColor: Color(0xFFFEEDE1),
- ),
- ),
- ],
-)
-```
-
-
-
-### Call Bubble
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatOutgoingMessageBubbleStyle(
- videoCallBubbleStyle: CometChatCallBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- iconColor: Color(0xFFF76808),
- buttonTextStyle: TextStyle(color: Colors.white),
- dividerColor: Color(0xFFFBAA75),
- ),
- ),
- CometChatIncomingMessageBubbleStyle(
- videoCallBubbleStyle: CometChatCallBubbleStyle(
- backgroundColor: Color(0xFFFEEDE1),
- iconColor: Color(0xFFF76808),
- buttonTextStyle: TextStyle(color: Color(0xFFF76808)),
- ),
- ),
- ],
-)
-```
-
-
-
-### Collaborative Whiteboard Bubble
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatOutgoingMessageBubbleStyle(
- collaborativeWhiteboardBubbleStyle: CometChatCollaborativeBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- iconTint: Color(0xFFFFFFFF),
- titleStyle: TextStyle(fontWeight: FontWeight.bold, color: Color(0xFFFFFFFF)),
- buttonTextStyle: TextStyle(color: Color(0xFFFFFFFF)),
- dividerColor: Color(0xFFFBAA75),
- ),
- ),
- CometChatIncomingMessageBubbleStyle(
- collaborativeWhiteboardBubbleStyle: CometChatCollaborativeBubbleStyle(
- backgroundColor: Color(0xFFFEEDE1),
- iconTint: Color(0xFFF76808),
- titleStyle: TextStyle(fontWeight: FontWeight.bold),
- buttonTextStyle: TextStyle(color: Color(0xFFF76808)),
- ),
- ),
- ],
-)
-```
-
-
-
-### Collaborative Document Bubble
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatOutgoingMessageBubbleStyle(
- collaborativeDocumentBubbleStyle: CometChatCollaborativeBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- iconTint: Color(0xFFFFFFFF),
- titleStyle: TextStyle(fontWeight: FontWeight.bold, color: Color(0xFFFFFFFF)),
- buttonTextStyle: TextStyle(color: Color(0xFFFFFFFF)),
- dividerColor: Color(0xFFFBAA75),
- ),
- ),
- CometChatIncomingMessageBubbleStyle(
- collaborativeDocumentBubbleStyle: CometChatCollaborativeBubbleStyle(
- backgroundColor: Color(0xFFFEEDE1),
- iconTint: Color(0xFFF76808),
- titleStyle: TextStyle(fontWeight: FontWeight.bold),
- buttonTextStyle: TextStyle(color: Color(0xFFF76808)),
- ),
- ),
- ],
-)
-```
-
-
-
-### Poll Bubble
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatOutgoingMessageBubbleStyle(
- pollsBubbleStyle: CometChatPollsBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- progressBackgroundColor: Color(0xFFFBAA75),
- iconColor: Color(0xFFF76808),
- ),
- ),
- CometChatIncomingMessageBubbleStyle(
- pollsBubbleStyle: CometChatPollsBubbleStyle(
- backgroundColor: Color(0xFFFEEDE1),
- progressBackgroundColor: Color(0xFFDCDCDC),
- progressColor: Color(0xFFF76808),
- iconColor: Colors.white,
- selectedOptionColor: Color(0xFFF76808),
- ),
- ),
- ],
-)
-```
-
-
-
-### Link Preview Bubble
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatOutgoingMessageBubbleStyle(
- linkPreviewBubbleStyle: CometChatLinkPreviewBubbleStyle(
- backgroundColor: Color(0xFFFBAA75),
- ),
- textBubbleStyle: CometChatTextBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- ),
- ),
- CometChatIncomingMessageBubbleStyle(
- linkPreviewBubbleStyle: CometChatLinkPreviewBubbleStyle(
- backgroundColor: Color(0xFFFBAA75),
- ),
- textBubbleStyle: CometChatTextBubbleStyle(
- backgroundColor: Color(0xFFFEEDE1),
- ),
- ),
- ],
-)
-```
-
-
-
-### Action Message Bubble
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatActionBubbleStyle(
- textStyle: TextStyle(color: Color(0xFFF76808)),
- border: Border.all(color: Color(0xFFF76808)),
- backgroundColor: Color(0xFFFEEDE1),
- ),
- ],
-)
-```
-
-
-
-### Deleted Message Bubble
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatOutgoingMessageBubbleStyle(
- deletedBubbleStyle: CometChatDeletedBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- ),
- ),
- CometChatIncomingMessageBubbleStyle(
- deletedBubbleStyle: CometChatDeletedBubbleStyle(
- backgroundColor: Color(0xFFFEEDE1),
- ),
- ),
- ],
-)
-```
-
-
-
-### AI Assistant Bubble
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatAiAssistantBubbleStyle(
- backgroundColor: Colors.transparent,
- textColor: const Color(0xFF141414),
- ),
- ],
-)
-```
-
-
diff --git a/ui-kit/flutter/v6/message-composer.mdx b/ui-kit/flutter/v6/message-composer.mdx
deleted file mode 100644
index ba4b9b12d..000000000
--- a/ui-kit/flutter/v6/message-composer.mdx
+++ /dev/null
@@ -1,445 +0,0 @@
----
-title: "Message Composer"
----
-
-## Overview
-
-`CometChatMessageComposer` is a [Widget](/ui-kit/flutter/v6/components-overview#widget) that enables users to write and send a variety of messages, including text, image, video, and custom messages.
-
-Features such as **Live Reaction**, **Attachments**, **Message Editing**, **Rich Text Formatting**, **Code Blocks**, and **Inline Audio Recording** are supported.
-
-`CometChatMessageComposer` is comprised of the following Base Widgets:
-
-| Base Widgets | Description |
-|---|---|
-| MessageInput | Provides a basic layout for the contents, such as the TextField and buttons |
-| ActionSheet | Presents a list of options in either a list or grid mode |
-
-In V6, the composer is powered by `MessageComposerBloc` and decomposed into focused sub-widgets.
-
-## Usage
-
-### Integration
-
-##### 1. Using Navigator to Launch `CometChatMessageComposer`
-
-
-
-```dart
-Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatMessageComposer(user: user)));
-```
-
-
-
-##### 2. Embedding `CometChatMessageComposer` as a Widget in the build Method
-
-
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:flutter/material.dart';
-
-class MessageComposerScreen extends StatefulWidget {
- const MessageComposerScreen({super.key});
-
- @override
- State createState() => _MessageComposerScreenState();
-}
-
-class _MessageComposerScreenState extends State {
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- resizeToAvoidBottomInset: false, // REQUIRED — composer handles keyboard internally
- body: Column(
- children: [
- Expanded(child: CometChatMessageList(user: user)),
- CometChatMessageComposer(user: user),
- ],
- ),
- );
- }
-}
-```
-
-
-
-***
-
-### Actions
-
-##### 1. OnSendButtonClick
-
-The `OnSendButtonClick` event gets activated when the send message button is clicked.
-
-
-
-```dart
-CometChatMessageComposer(
- user: user,
- onSendButtonTap: (BuildContext context, BaseMessage baseMessage, PreviewMessageMode? previewMessageMode) {
- // Handle send
- },
-)
-```
-
-
-
-***
-
-##### 2. onChange
-
-Handles changes in the value of text in the input field.
-
-
-
-```dart
-CometChatMessageComposer(
- user: user,
- onChange: (String? text) {
- // Handle text change
- },
-)
-```
-
-
-
-***
-
-##### 3. onError
-
-Listens for any errors that occur.
-
-
-
-```dart
-CometChatMessageComposer(
- user: user,
- onError: (e) {
- // Handle error
- },
-)
-```
-
-
-
-***
-
-### Filters
-
-`CometChatMessageComposer` widget does not have any available filters.
-
-***
-
-### Events
-
-The `CometChatMessageComposer` Widget does not emit any events of its own.
-
-***
-
-## Customization
-
-### Style
-
-##### 1. CometChatMessageComposerStyle
-
-
-
-```dart
-CometChatMessageComposer(
- user: user,
- messageComposerStyle: CometChatMessageComposerStyle(
- sendButtonIconBackgroundColor: Color(0xFFF76808),
- secondaryButtonIconColor: Color(0xFFF76808),
- auxiliaryButtonIconColor: Color(0xFFF76808),
- ),
-)
-```
-
-
-
-##### 2. MediaRecorder Style
-
-
-
-```dart
-CometChatMessageComposer(
- user: user,
- messageComposerStyle: CometChatMessageComposerStyle(
- mediaRecorderStyle: CometChatMediaRecorderStyle(
- recordIndicatorBackgroundColor: Color(0xFFF44649),
- recordIndicatorBorderRadius: BorderRadius.circular(20),
- ),
- ),
-)
-```
-
-
-
-***
-
-### Functionality
-
-
-
-```dart
-CometChatMessageComposer(
- user: user,
- placeholderText: "Type a message...",
- disableMentions: true,
-)
-```
-
-
-
-## Message Composer Properties
-
-| Property | Data Type | Description |
-|---|---|---|
-| `user` | `User?` | Sets user for the message composer. |
-| `group` | `Group?` | Sets group for the message composer. |
-| `messageComposerStyle` | `CometChatMessageComposerStyle?` | Sets style for the message composer. |
-| `placeholderText` | `String?` | Hint text for the input field. |
-| `text` | `String?` | Initial text for the input field. |
-| `onChange` | `Function(String text)?` | Callback triggered when text changes. |
-| `textEditingController` | `TextEditingController?` | Controls the state of the text field. |
-| `maxLine` | `int?` | Maximum number of lines allowed. |
-| `disableMentions` | `bool?` | Disables mentions in the composer. |
-| `disableTypingEvents` | `bool` | Disables typing events. |
-| `disableSoundForMessages` | `bool` | Disables sound for sent messages. |
-| `parentMessageId` | `int` | ID of the parent message (default is 0). |
-| `sendButtonView` | `Widget?` | Custom send button widget. |
-| `attachmentIcon` | `Widget?` | Custom attachment icon. |
-| `voiceRecordingIcon` | `Widget?` | Custom voice recording icon. |
-| `auxiliaryButtonView` | `ComposerWidgetBuilder?` | UI component as auxiliary button. |
-| `secondaryButtonView` | `ComposerWidgetBuilder?` | UI component as secondary button. |
-| `hideVoiceRecordingButton` | `bool?` | Hide the voice recording button. |
-| `attachmentOptions` | `ComposerActionsBuilder?` | Provides options for file attachments. |
-| `hideAttachmentButton` | `bool?` | Hide/display attachment button. |
-| `hideImageAttachmentOption` | `bool?` | Hide/display image attachment option. |
-| `hideVideoAttachmentOption` | `bool?` | Hide/display video attachment option. |
-| `hideAudioAttachmentOption` | `bool?` | Hide/display audio attachment option. |
-| `hideFileAttachmentOption` | `bool?` | Hide/display file attachment option. |
-| `hidePollsOption` | `bool?` | Hide/display polls option. |
-| `onSendButtonTap` | `Function(BuildContext, BaseMessage, PreviewMessageMode?)?` | Callback when send button is tapped. |
-| `onError` | `OnError?` | Callback to handle errors. |
-| `hideSendButton` | `bool?` | Hide/display the send button. |
-| `hideStickersButton` | `bool?` | Hide/display the sticker button. |
-| `sendButtonIcon` | `Widget?` | Custom send button icon. |
-| `richTextConfiguration` | `RichTextConfiguration?` | Configuration for rich text formatting toolbar. See Rich Text section below. |
-| `richTextToolbarView` | `Widget Function(BuildContext, TextEditingController, RichTextFormatterManager)?` | Custom rich text toolbar widget. |
-| `onRichTextFormatApplied` | `void Function(RichTextFormatType)?` | Callback when a rich text format is applied. |
-| `hideBottomSafeArea` | `bool` | Hide bottom safe area padding (default: `false`). |
-
-***
-
-### Advanced
-
-#### TextFormatters
-
-
-
-```dart
-CometChatMessageComposer(
- user: user,
- textFormatters: [
- CometChatMentionsFormatter(
- style: CometChatMentionsStyle(
- mentionSelfTextBackgroundColor: Color(0xFFF76808),
- mentionTextBackgroundColor: Colors.white,
- mentionTextColor: Colors.black,
- mentionSelfTextColor: Colors.white,
- ),
- ),
- ],
-)
-```
-
-
-
-***
-
-#### AttachmentOptions
-
-
-
-```dart
-CometChatMessageComposer(
- user: user,
- attachmentOptions: (context, user, group, id) {
- return [
- CometChatMessageComposerAction(
- id: "Custom Option",
- title: "Custom Option",
- icon: Icon(Icons.add_box, color: Colors.black),
- ),
- ];
- },
-)
-```
-
-
-
-***
-
-#### AuxiliaryButton Widget
-
-You can customize the auxiliary button area (mic, sticker, etc.) using the `auxiliaryButtonView` parameter:
-
-
-
-```dart
-CometChatMessageComposer(
- user: user,
- auxiliaryButtonView: (context, user, group, id) {
- return Row(
- children: [
- IconButton(
- icon: Icon(Icons.location_pin, color: Color(0xFF6852D6)),
- onPressed: () {
- // Handle location sharing
- },
- ),
- ],
- );
- },
-)
-```
-
-
-
-***
-
-## Rich Text Formatting
-
-The composer includes a WYSIWYG rich text toolbar. Configure it via `richTextConfiguration`:
-
-### Enable with defaults
-
-
-
-```dart
-CometChatMessageComposer(
- user: user,
- richTextConfiguration: RichTextConfiguration(),
-)
-```
-
-
-
-### Toolbar modes
-
-| Mode | Description |
-| --- | --- |
-| `RichTextToolbarMode.alwaysVisible` | Toolbar always shown (default) |
-| `RichTextToolbarMode.onSelection` | Toolbar shown when text is selected |
-| `RichTextToolbarMode.disabled` | Rich text formatting disabled |
-
-
-
-```dart
-CometChatMessageComposer(
- user: user,
- richTextConfiguration: RichTextConfiguration(
- toolbarMode: RichTextToolbarMode.onSelection,
- ),
-)
-```
-
-
-
-### Disable specific formats
-
-
-
-```dart
-CometChatMessageComposer(
- user: user,
- richTextConfiguration: RichTextConfiguration(
- enableCodeBlock: false,
- enableBlockquote: false,
- enableOrderedList: false,
- ),
-)
-```
-
-
-
-### RichTextConfiguration properties
-
-| Property | Type | Default | Description |
-| --- | --- | --- | --- |
-| `toolbarMode` | `RichTextToolbarMode` | `alwaysVisible` | How the toolbar is displayed |
-| `previewMode` | `RichTextPreviewMode` | `onFormatting` | How the preview is displayed |
-| `enableAutoFormatting` | `bool` | `true` | Auto-detect and format Markdown as user types |
-| `enableBold` | `bool` | `true` | Bold (`**text**`) |
-| `enableItalic` | `bool` | `true` | Italic (`_text_`) |
-| `enableUnderline` | `bool` | `true` | Underline (`text`) |
-| `enableStrikethrough` | `bool` | `true` | Strikethrough (`~~text~~`) |
-| `enableInlineCode` | `bool` | `true` | Inline code (`` `code` ``) |
-| `enableCodeBlock` | `bool` | `true` | Code block (` ```code``` `) |
-| `enableLinks` | `bool` | `true` | Links (`[text](url)`) |
-| `enableBulletList` | `bool` | `true` | Bullet list (`- item`) |
-| `enableOrderedList` | `bool` | `true` | Ordered list (`1. item`) |
-| `enableBlockquote` | `bool` | `true` | Blockquote (`> text`) |
-
-### Custom toolbar view
-
-
-
-```dart
-CometChatMessageComposer(
- user: user,
- richTextConfiguration: RichTextConfiguration(),
- richTextToolbarView: (context, controller, manager) {
- return Row(
- children: [
- IconButton(
- icon: Icon(Icons.format_bold),
- onPressed: () => manager.applyFormat(RichTextFormatType.bold),
- ),
- IconButton(
- icon: Icon(Icons.format_italic),
- onPressed: () => manager.applyFormat(RichTextFormatType.italic),
- ),
- ],
- );
- },
-)
-```
-
-
-
-***
-
-## V6 Architecture
-
-### Sub-Widget Decomposition
-
-| Widget | Purpose |
-|---|---|
-| `AttachmentOptionsOverlay` | Attachment picker overlay |
-| `MessageComposerAuxiliaryButtons` | Auxiliary button area |
-| `MessageComposerSecondaryButtons` | Secondary button area |
-| `MessageComposerSendButton` | Send button |
-| `MessageComposerSuggestionList` | Suggestion/mention list |
-| `ComposerAttachmentUtils` | Attachment utilities |
-
-### BLoC Architecture
-
-| Component | Description |
-|---|---|
-| `MessageComposerBloc` | Manages composer state |
-| `MessageComposerEvent` | Events: `SendTextMessage`, `SendMediaMessage`, `EditTextMessage`, `StartTyping`, `EndTyping`, etc. |
-| `MessageComposerState` | Composer state |
-
-### Use Cases
-
-| Use Case | Description |
-|---|---|
-| `SendTextMessageUseCase` | Sends text messages |
-| `SendMediaMessageUseCase` | Sends media messages |
-| `SendCustomMessageUseCase` | Sends custom messages |
-| `EditMessageUseCase` | Edits messages |
-| `TypingUseCases` | Start/end typing indicators |
-| `GetLoggedInUserUseCase` | Gets the logged-in user |
diff --git a/ui-kit/flutter/v6/message-header.mdx b/ui-kit/flutter/v6/message-header.mdx
deleted file mode 100644
index 347c14732..000000000
--- a/ui-kit/flutter/v6/message-header.mdx
+++ /dev/null
@@ -1,364 +0,0 @@
----
-title: "Message Header"
-description: "Toolbar displaying user/group info, typing indicators, online status, and navigation controls."
----
-
-`CometChatMessageHeader` renders the header of a chat conversation showing user/group avatar, name, online/offline status, typing indicators, back navigation, and action buttons (call buttons, menu).
-
-
-
-
-
----
-
-## Where It Fits
-
-`CometChatMessageHeader` is a toolbar component. It sits at the top of a chat screen above `CometChatMessageList` and `CometChatMessageComposer`. It automatically shows typing indicators and user presence in real-time.
-
-
-
-```dart
-Scaffold(
- body: Column(
- children: [
- CometChatMessageHeader(user: user),
- Expanded(child: CometChatMessageList(user: user)),
- CometChatMessageComposer(user: user),
- ],
- ),
-)
-```
-
-
-
----
-
-## Quick Start
-
-
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:flutter/material.dart';
-
-class ChatScreen extends StatelessWidget {
- final User user;
- const ChatScreen({super.key, required this.user});
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- appBar: PreferredSize(
- preferredSize: const Size.fromHeight(60),
- child: CometChatMessageHeader(user: user),
- ),
- body: Column(
- children: [
- Expanded(child: CometChatMessageList(user: user)),
- CometChatMessageComposer(user: user),
- ],
- ),
- );
- }
-}
-```
-
-
-
-For group chats, pass a `Group` object instead:
-
-
-
-```dart
-CometChatMessageHeader(group: group)
-```
-
-
-
-Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()`, a user logged in, and a valid `User` or `Group` object.
-
----
-
-## Actions and Events
-
-### Callback Methods
-
-#### `onBack`
-
-Fires when the user presses the back button.
-
-
-
-```dart
-CometChatMessageHeader(
- user: user,
- onBack: () {
- Navigator.pop(context);
- },
-)
-```
-
-
-
-#### `onError`
-
-Fires on internal errors.
-
-
-
-```dart
-CometChatMessageHeader(
- user: user,
- onError: (e) {
- debugPrint("Error: ${e.message}");
- },
-)
-```
-
-
-
-### SDK Events (Real-Time, Automatic)
-
-The component listens to these SDK events internally. No manual setup needed.
-
-| SDK Listener | Internal behavior |
-|---|---|
-| `onUserOnline` / `onUserOffline` | Updates online/offline status and last seen |
-| `onTypingStarted` / `onTypingEnded` | Shows/hides typing indicator in subtitle |
-| `onGroupMemberJoined` / `onGroupMemberLeft` | Updates group member count |
-| `onGroupMemberKicked` / `onGroupMemberBanned` | Updates group member count |
-| `onMemberAddedToGroup` | Updates group member count |
-| `ccOwnershipChanged` | Updates group owner info |
-| `onUserBlocked` / `onUserUnblocked` | Updates user blocked state |
-| Connection reconnected | Refreshes user/group data |
-
----
-
-## Functionality
-
-| Property | Type | Default | Description |
-|---|---|---|---|
-| `user` | `User?` | `null` | User object for 1:1 chat header |
-| `group` | `Group?` | `null` | Group object for group chat header |
-| `showBackButton` | `bool?` | `true` | Toggle back button visibility |
-| `backButton` | `Widget?` | `null` | Custom back button widget |
-| `appBarOptions` | `List?` | `null` | Additional widgets in the app bar (e.g., call buttons, menu) |
-| `hideUserStatus` | `bool?` | `false` | Hide online/offline status for users |
-| `disableTypingIndicator` | `bool?` | `false` | Disable typing indicator display |
-
----
-
-## Custom View Slots
-
-### Subtitle View
-
-Replace the default subtitle (online status / typing indicator / member count).
-
-
-
-```dart
-CometChatMessageHeader(
- user: user,
- subtitleView: (user, group) {
- if (user != null) {
- return Text(
- user.status == "online" ? "Active now" : "Last seen recently",
- style: TextStyle(color: Color(0xFF727272), fontSize: 12),
- );
- }
- if (group != null) {
- return Text(
- "${group.membersCount} members",
- style: TextStyle(color: Color(0xFF727272), fontSize: 12),
- );
- }
- return null;
- },
-)
-```
-
-
-
-### Leading View
-
-Replace the avatar / left section.
-
-
-
-```dart
-CometChatMessageHeader(
- user: user,
- leadingView: (user, group) {
- return CircleAvatar(
- backgroundImage: NetworkImage(user?.avatar ?? ""),
- child: user?.avatar == null ? Text(user?.name?[0] ?? "") : null,
- );
- },
-)
-```
-
-
-
-### Title View
-
-Replace the name / title text.
-
-
-
-```dart
-CometChatMessageHeader(
- user: user,
- titleView: (user, group) {
- return Text(
- user?.name ?? group?.name ?? "",
- style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
- );
- },
-)
-```
-
-
-
-### Trailing View
-
-Replace the right section (call buttons, menu, etc.).
-
-
-
-```dart
-CometChatMessageHeader(
- user: user,
- trailingView: (user, group) {
- return Row(
- mainAxisSize: MainAxisSize.min,
- children: [
- IconButton(icon: Icon(Icons.call), onPressed: () {}),
- IconButton(icon: Icon(Icons.videocam), onPressed: () {}),
- IconButton(icon: Icon(Icons.info_outline), onPressed: () {}),
- ],
- );
- },
-)
-```
-
-
-
----
-
-## Common Patterns
-
-### Header with info button for groups
-
-
-
-```dart
-CometChatMessageHeader(
- group: group,
- trailingView: (user, group) {
- return IconButton(
- icon: Icon(Icons.info_outline),
- onPressed: () {
- Navigator.push(context, MaterialPageRoute(
- builder: (context) => GroupInfoScreen(group: group!),
- ));
- },
- );
- },
-)
-```
-
-
-
-### Hide back button (embedded in tab layout)
-
-
-
-```dart
-CometChatMessageHeader(
- user: user,
- showBackButton: false,
-)
-```
-
-
-
----
-
-## Advanced
-
-### BLoC Access
-
-Provide a custom `MessageHeaderBloc`:
-
-
-
-```dart
-CometChatMessageHeader(
- user: user,
- messageHeaderBloc: CustomMessageHeaderBloc(),
-)
-```
-
-
-
-### Public BLoC Methods
-
-| Method | Returns | Description |
-|---|---|---|
-| `getTypingNotifier()` | `ValueNotifier` | Typing indicator notifier for isolated rebuilds |
-
----
-
-## Style
-
-
-
-```dart
-CometChatMessageHeader(
- user: user,
- messageHeaderStyle: CometChatMessageHeaderStyle(
- backgroundColor: Colors.white,
- avatarStyle: CometChatAvatarStyle(
- borderRadius: BorderRadius.circular(8),
- ),
- statusIndicatorStyle: CometChatStatusIndicatorStyle(),
- typingIndicatorStyle: CometChatTypingIndicatorStyle(),
- ),
-)
-```
-
-
-
-
-
-
-
-### Style Properties
-
-| Property | Description |
-|---|---|
-| `backgroundColor` | Header background color |
-| `avatarStyle` | Avatar appearance |
-| `statusIndicatorStyle` | Online/offline indicator |
-| `typingIndicatorStyle` | Typing indicator text style |
-
-See [Component Styling](/ui-kit/flutter/v6/component-styling) for the full reference.
-
----
-
-## Next Steps
-
-
-
- Display messages in a conversation
-
-
- Compose and send messages
-
-
- Add voice and video call buttons
-
-
- Detailed styling reference
-
-
diff --git a/ui-kit/flutter/v6/message-list.mdx b/ui-kit/flutter/v6/message-list.mdx
deleted file mode 100644
index 1c587b677..000000000
--- a/ui-kit/flutter/v6/message-list.mdx
+++ /dev/null
@@ -1,546 +0,0 @@
----
-title: "Message List"
-description: "Scrollable list of messages for a conversation with real-time updates, reactions, threaded replies, and message actions."
----
-
-`CometChatMessageList` renders a scrollable list of messages for a conversation with real-time updates for new messages, edits, deletions, reactions, and threaded replies.
-
----
-
-## Where It Fits
-
-`CometChatMessageList` is a message display component. It requires either a `User` or `Group` object to fetch and render messages. Wire it with `CometChatMessageHeader` and `CometChatMessageComposer` to build a complete messaging layout.
-
-
-
-```dart
-CometChatMessageList(
- user: user,
-)
-```
-
-
-
----
-
-## Quick Start
-
-Using Navigator:
-
-
-
-```dart
-Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatMessageList(user: user)));
-```
-
-
-
-Embedding as a widget:
-
-
-
-```dart
-@override
-Widget build(BuildContext context) {
- return Scaffold(
- body: SafeArea(
- child: CometChatMessageList(
- user: user, // or group: group
- ),
- ),
- );
-}
-```
-
-
-
-Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()`, a user logged in, and the UI Kit dependency added.
-
-
-Simply adding the `MessageList` component to the layout will only display the loading indicator. You must supply a `User` or `Group` object to fetch messages.
-
-
----
-
-## Filtering
-
-Pass a `MessagesRequestBuilder` to control what loads:
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- messagesRequestBuilder: MessagesRequestBuilder()
- ..uid = user.uid
- ..searchKeyword = "hello"
- ..limit = 30,
-)
-```
-
-
-
-
-The following parameters in `MessagesRequestBuilder` will always be altered inside the message list: UID, GUID, types, categories.
-
-
----
-
-## Actions and Events
-
-### Callback Methods
-
-#### `onThreadRepliesClick`
-
-Fires when a user taps a threaded message bubble.
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- onThreadRepliesClick: (message, context, {template}) {
- // Navigate to thread view
- },
-)
-```
-
-
-
-#### `onError`
-
-Fires on internal errors.
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- onError: (e) {
- debugPrint("Error: ${e.message}");
- },
-)
-```
-
-
-
-#### `onLoad`
-
-Fires when the list is successfully fetched and loaded.
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- onLoad: (messages) {
- debugPrint("Loaded ${messages.length}");
- },
-)
-```
-
-
-
-#### `onEmpty`
-
-Fires when the list is empty after loading.
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- onEmpty: () {
- debugPrint("No messages");
- },
-)
-```
-
-
-
-#### `onReactionClick`
-
-Fires when a reaction pill is tapped.
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- onReactionClick: (emoji, message) {
- // Handle reaction click
- },
-)
-```
-
-
-
-#### `onReactionLongPress`
-
-Fires when a reaction pill is long-pressed.
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- onReactionLongPress: (emoji, message) {
- // Handle reaction long press
- },
-)
-```
-
-
-
-### SDK Events (Real-Time, Automatic)
-
-The component listens to SDK message events internally. No manual setup needed.
-
-| SDK Listener | Internal behavior |
-| --- | --- |
-| `onTextMessageReceived` / `onMediaMessageReceived` / `onCustomMessageReceived` | Inserts new message with animation |
-| `onMessageEdited` | Updates message in-place |
-| `onMessageDeleted` | Removes or marks message as deleted |
-| `onMessagesDelivered` / `onMessagesRead` | Updates receipt status via ValueNotifier |
-| `onTypingStarted` / `onTypingEnded` | Updates typing indicator |
-| `onMessageReactionAdded` / `onMessageReactionRemoved` | Updates reaction counts |
-| Connection reconnected | Triggers silent sync to fetch missed messages |
-
----
-
-## Functionality
-
-| Property | Type | Default | Description |
-| --- | --- | --- | --- |
-| `user` | `User?` | required* | User for 1-on-1 conversation |
-| `group` | `Group?` | required* | Group for group conversation |
-| `parentMessageId` | `int?` | `null` | Parent message ID for thread replies |
-| `alignment` | `ChatAlignment` | `standard` | Chat alignment setting |
-| `hideDeletedMessages` | `bool` | `false` | Hide deleted messages entirely |
-| `disableReceipts` | `bool` | `false` | Disable read/delivery receipts |
-| `disableSoundForMessages` | `bool` | `false` | Disable message sounds |
-| `hideReplies` | `bool` | `true` | Hide thread replies in main conversation |
-| `hideGroupActionMessages` | `bool?` | `false` | Hide group action messages |
-| `hideTimestamp` | `bool?` | `null` | Toggle timestamp visibility |
-| `hideDateSeparator` | `bool?` | `false` | Hide date separators |
-| `hideStickyDate` | `bool?` | `false` | Hide floating sticky date header |
-| `avatarVisibility` | `bool?` | `true` | Toggle avatar visibility |
-| `receiptsVisibility` | `bool?` | `true` | Toggle read receipts |
-| `disableReactions` | `bool?` | `false` | Toggle reactions |
-| `enableSwipeToReply` | `bool` | `true` | Enable swipe-to-reply gesture |
-| `startFromUnreadMessages` | `bool` | `false` | Scroll to first unread on open |
-| `showMarkAsUnreadOption` | `bool` | `false` | Show "Mark as Unread" in long-press options |
-| `goToMessageId` | `int?` | `null` | Scroll to a specific message after load |
-
-\* One of `user` or `group` is required.
-
----
-
-## Custom View Slots
-
-### Header View
-
-Custom view displayed at the top of the message list.
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- headerView: (context, {user, group, parentMessageId}) {
- return Container(
- padding: EdgeInsets.all(8),
- child: Text("Pinned Messages"),
- );
- },
-)
-```
-
-
-
-### Footer View
-
-Custom view displayed at the bottom of the message list.
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- footerView: (context, {user, group, parentMessageId}) {
- return Container(
- padding: EdgeInsets.all(8),
- child: Text("End of messages"),
- );
- },
-)
-```
-
-
-
-### State Views
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- emptyStateView: (context) => Center(child: Text("No messages yet")),
- errorStateView: (context) => Center(child: Text("Something went wrong")),
- loadingStateView: (context) => Center(child: CircularProgressIndicator()),
- emptyChatGreetingView: (context) => Center(child: Text("Say hello!")),
-)
-```
-
-
-
-### Text Formatters (Mentions)
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- textFormatters: [
- CometChatMentionsFormatter(),
- ],
-)
-```
-
-
-
-### Message Templates
-
-Override or extend message bubble rendering:
-
-
-
-```dart
-// Replace all templates
-CometChatMessageList(
- user: user,
- templates: getCustomTemplates(),
-)
-
-// Add/override specific templates (merged with defaults)
-CometChatMessageList(
- user: user,
- addTemplate: [
- CometChatMessageTemplate(
- type: MessageTypeConstants.text,
- category: MessageCategoryConstants.message,
- contentView: (message, context, alignment, {additionalConfigurations}) {
- return Text((message as TextMessage).text,
- style: TextStyle(color: Colors.red));
- },
- ),
- ],
-)
-```
-
-
-
-See [Message Template](/ui-kit/flutter/v6/message-template) for the full template structure.
-
----
-
-## Message Option Visibility
-
-| Property | Default | Description |
-| --- | --- | --- |
-| `hideCopyMessageOption` | `false` | Hide "Copy Message" |
-| `hideDeleteMessageOption` | `false` | Hide "Delete Message" |
-| `hideEditMessageOption` | `false` | Hide "Edit Message" |
-| `hideMessageInfoOption` | `false` | Hide "Message Info" |
-| `hideMessagePrivatelyOption` | `false` | Hide "Message Privately" |
-| `hideReactionOption` | `false` | Hide "Reaction" |
-| `hideReplyInThreadOption` | `false` | Hide "Reply in Thread" |
-| `hideTranslateMessageOption` | `false` | Hide "Translate Message" |
-| `hideShareMessageOption` | `false` | Hide "Share Message" |
-| `hideModerationView` | `null` | Hide moderation view |
-
----
-
-## Common Patterns
-
-### Thread replies view
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- parentMessageId: parentMessage.id,
-)
-```
-
-
-
-### Jump to a specific message
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- goToMessageId: 12345,
-)
-```
-
-
-
-### Start from unread messages
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- startFromUnreadMessages: true,
-)
-```
-
-
-
----
-
-## Advanced
-
-### BLoC Access
-
-Provide a custom `MessageListBloc` to override behavior:
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- messageListBloc: CustomMessageListBloc(user: user),
-)
-```
-
-
-
-### Extending MessageListBloc
-
-`MessageListBloc` uses the `ListBase` mixin with override hooks:
-
-
-
-```dart
-class CustomMessageListBloc extends MessageListBloc {
- CustomMessageListBloc({required User user}) : super(user: user);
-
- @override
- void onItemAdded(BaseMessage item, List updatedList) {
- // Custom logic when a message is added
- super.onItemAdded(item, updatedList);
- }
-}
-```
-
-
-
-For `ListBase` override hooks (`onItemAdded`, `onItemRemoved`, `onItemUpdated`, `onListCleared`, `onListReplaced`), see [BLoC & Data — ListBase Hooks](/ui-kit/flutter/v6/customization-bloc-data#listbase-hooks).
-
-### Public BLoC Events
-
-| Event | Description |
-| --- | --- |
-| `LoadMessages(conversationWith, conversationType)` | Load initial messages |
-| `LoadOlderMessages()` | Load older messages (scroll up) |
-| `LoadNewerMessages()` | Load newer messages (scroll down) |
-| `RefreshMessages()` | Refresh from the latest |
-| `SyncMessages()` | Silently sync missed messages |
-| `JumpToMessage(messageId)` | Jump to a specific message |
-| `AddReaction(message, reaction)` | Add a reaction |
-| `RemoveReaction(message, reaction)` | Remove a reaction |
-| `MarkMessageAsRead(message)` | Mark a message as read |
-| `MarkMessageAsUnread(...)` | Mark a message as unread |
-| `LoadFromUnread(conversationWith, conversationType)` | Load from first unread message |
-
-### Public BLoC Methods
-
-#### O(1) Lookup Methods
-
-| Method | Returns | Description |
-| --- | --- | --- |
-| `findMessageIndex(messageId)` | `int?` | Find message index by ID |
-| `findMessageIndexByMuid(muid)` | `int?` | Find message index by muid (pending messages) |
-| `findMessage(messageId)` | `BaseMessage?` | Get message by ID |
-| `findMessageByMuid(muid)` | `BaseMessage?` | Get message by muid |
-
-#### ValueNotifier Accessors (Isolated Rebuilds)
-
-| Method | Returns | Description |
-| --- | --- | --- |
-| `getReceiptNotifier(messageId)` | `ValueNotifier` | Per-message receipt status notifier |
-| `getReceiptNotifierForMessage(message)` | `ValueNotifier` | Receipt notifier handling both ID and muid |
-| `getTypingNotifier(conversationId)` | `ValueNotifier>` | Per-conversation typing notifier |
-| `getThreadReplyCountNotifier(parentMessageId)` | `ValueNotifier` | Per-message thread reply count notifier |
-
-#### MessageReceiptStatus Enum
-
-| Value | Description |
-| --- | --- |
-| `sending` | Message is being sent (id = 0) |
-| `sent` | Message has been sent to server |
-| `delivered` | Message has been delivered to recipient |
-| `read` | Message has been read by recipient |
-| `error` | Message failed to send |
-
-### Operations Stream
-
-The BLoC exposes an `operationsStream` consumed by `CometChatAnimatedMessageList` for smooth animations:
-
-| Operation | Description |
-| --- | --- |
-| `MessageOperation.insert(message, index)` | Insert a single message |
-| `MessageOperation.insertAll(messages, index)` | Insert a batch of messages |
-| `MessageOperation.update(oldMessage, newMessage, index)` | Replace a message in-place |
-| `MessageOperation.remove(message, index)` | Remove a message |
-| `MessageOperation.set(messages)` | Replace the entire list |
-
----
-
-## Style
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- style: CometChatMessageListStyle(
- backgroundColor: Color(0xFFFEEDE1),
- outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- ),
- incomingMessageBubbleStyle: CometChatIncomingMessageBubbleStyle(
- backgroundColor: Colors.white,
- ),
- ),
-)
-```
-
-
-
-See [Component Styling](/ui-kit/flutter/v6/component-styling) and [Message Bubble Styling](/ui-kit/flutter/v6/message-bubble-styling) for the full reference.
-
----
-
-## Next Steps
-
-
-
- Display user/group info in the app bar
-
-
- Rich input for sending messages
-
-
- Customize message bubble structure
-
-
- Detailed styling reference
-
-
\ No newline at end of file
diff --git a/ui-kit/flutter/v6/message-template.mdx b/ui-kit/flutter/v6/message-template.mdx
deleted file mode 100644
index 20b51e7af..000000000
--- a/ui-kit/flutter/v6/message-template.mdx
+++ /dev/null
@@ -1,251 +0,0 @@
----
-title: "Message Template"
----
-
-## Overview
-
-A `CometChatMessageTemplate` provides the capability to define and customize both the structure and behavior of message bubbles. It acts as a blueprint for creating message bubble widgets, allowing you to manage appearance and interactions consistently.
-
-### Structure
-
-The MessageBubble structure can be broken down into:
-
-1. Leading widget — Sender's avatar
-2. Header widget — Sender's name (useful in group chats)
-3. Content widget — Message content (text, images, videos, etc.)
-4. Bottom widget — Additional elements like link previews or "load more" buttons
-5. Footer widget — Timestamp and delivery/read status
-
-### Properties
-
-| Property | Description |
-|---|---|
-| `type` | Maps the template to a CometChat message type |
-| `category` | Sets the message category |
-| `headerView` | Custom header widget for the bubble |
-| `contentView` | Custom content widget for the bubble |
-| `footerView` | Custom footer widget (timestamp, receipts) |
-| `bottomView` | Custom bottom widget (link previews, etc.) |
-| `bubbleView` | Complete custom bubble widget |
-| `options` | List of actions on long press |
-
-## Customization
-
-### Header Widget
-
-
-
-```dart
-CometChatMessageList(
- group: group,
- templates: [
- CometChatMessageTemplate(
- type: MessageTypeConstants.text,
- category: MessageCategoryConstants.message,
- headerView: (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment) {
- return Text(
- "${baseMessage.sender?.name} • 🗓️ In meeting",
- style: TextStyle(
- color: Color(0xFF6852D6),
- fontSize: 14.4,
- fontWeight: FontWeight.w500,
- ),
- );
- },
- ),
- ],
-)
-```
-
-
-
-***
-
-### Content Widget
-
-
-
-```dart
-CometChatMessageList(
- group: group,
- templates: [
- CometChatMessageTemplate(
- type: "image",
- category: "message",
- contentView: (message, context, alignment, {AdditionalConfigurations? additionalConfigurations}) {
- if (message is! MediaMessage) return const SizedBox();
- return Wrap(
- direction: Axis.vertical,
- crossAxisAlignment: WrapCrossAlignment.center,
- children: [
- CometChatImageBubble(
- imageUrl: message.attachment?.fileUrl,
- metadata: message.metadata,
- key: UniqueKey(),
- ),
- TextButton(
- onPressed: () {
- // Navigate to purchase screen
- },
- child: Text("Buy Now"),
- ),
- ],
- );
- },
- ),
- ],
-)
-```
-
-
-
-***
-
-### Bottom Widget
-
-
-
-```dart
-CometChatMessageList(
- group: group,
- templates: [
- CometChatMessageTemplate(
- type: MessageTypeConstants.text,
- category: MessageCategoryConstants.message,
- bottomView: (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment) {
- return Container(
- decoration: BoxDecoration(
- color: Color(0xFFF44649).withOpacity(.2),
- borderRadius: BorderRadius.circular(12),
- ),
- child: Row(
- children: [
- Icon(Icons.warning, color: Color(0xFFF44649), size: 12),
- Text(
- "According to guidelines you cannot share contact",
- style: TextStyle(color: Color(0xFFF44649), fontSize: 12),
- ),
- ],
- ),
- );
- },
- ),
- ],
-)
-```
-
-
-
-***
-
-### Footer Widget
-
-
-
-```dart
-CometChatMessageList(
- group: group,
- templates: [
- CometChatMessageTemplate(
- type: MessageTypeConstants.text,
- category: MessageCategoryConstants.message,
- statusInfoView: (baseMessage, context, alignment) {
- return const SizedBox(height: 11);
- },
- footerView: (baseMessage, context, alignment, {additionalConfigurations}) {
- // Custom footer with time and receipt
- return Row(
- mainAxisAlignment: MainAxisAlignment.end,
- children: [
- CometChatDate(date: baseMessage.sentAt!, pattern: DateTimePattern.timeFormat),
- ],
- );
- },
- ),
- ],
-)
-```
-
-
-
-***
-
-### Options List
-
-
-
-```dart
-CometChatMessageList(
- group: group,
- templates: [
- CometChatMessageTemplate(
- type: MessageTypeConstants.text,
- category: MessageCategoryConstants.message,
- options: (loggedInUser, messageObject, context, group, additionalConfigurations) {
- final existingOptions = CometChatUIKit.getDataSource()
- .getTextMessageOptions(loggedInUser, messageObject, context, group, additionalConfigurations);
- return [
- CometChatMessageOption(
- id: "refresh",
- title: "Refresh",
- icon: Icon(Icons.refresh, color: Color(0xFF6852D6), size: 24),
- ),
- ...existingOptions,
- ];
- },
- ),
- ],
-)
-```
-
-
-
-***
-
-## New Templates
-
-Create entirely new templates for custom message types:
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- messagesRequestBuilder: MessagesRequestBuilder()
- ..limit = 30
- ..types = [...CometChatUIKit.getDataSource().getAllMessageTypes(), "contact"]
- ..categories = CometChatUIKit.getDataSource().getAllMessageCategories(),
- templates: [
- CometChatMessageTemplate(
- type: "contact",
- category: MessageCategoryConstants.custom,
- contentView: (baseMessage, context, alignment, {additionalConfigurations}) {
- return Padding(
- padding: const EdgeInsets.fromLTRB(8, 8, 8, 0),
- child: Row(
- children: [
- CircleAvatar(
- backgroundColor: Color(0xFFEDEAFA),
- child: Icon(Icons.person, color: Colors.white),
- ),
- SizedBox(width: 8),
- Text("Contact Name",
- style: TextStyle(
- color: alignment == BubbleAlignment.right ? Colors.white : Colors.black,
- fontSize: 14,
- ),
- ),
- ],
- ),
- );
- },
- ),
- ],
-)
-```
-
-
-
-
-In V6, `CometChatUIKit.getDataSource()` is replaced by `MessageTemplateUtils` for accessing data source methods. Use the appropriate service locator to get message options and templates.
-
diff --git a/ui-kit/flutter/v6/methods.mdx b/ui-kit/flutter/v6/methods.mdx
deleted file mode 100644
index dd7cf0929..000000000
--- a/ui-kit/flutter/v6/methods.mdx
+++ /dev/null
@@ -1,194 +0,0 @@
----
-title: "Methods"
----
-
-## Overview
-
-The UI Kit's core function is to extend the Chat SDK, translating the raw data and functionality provided by the underlying methods into visually appealing and easy-to-use UI components.
-
-The CometChat UI Kit has encapsulated the critical Chat SDK methods within its wrapper to efficiently manage internal eventing. This layer of abstraction simplifies interaction with the underlying CometChat SDK.
-
-You can access the methods using the `CometChatUIKit` class. This class provides access to all the public methods exposed by the CometChat UI Kit.
-
-## Init
-
-As a developer, you need to invoke this method every time before you use any other methods provided by the UI Kit.
-
-The `UIKitSettings` is an important parameter of the `init()` function. It functions as a base settings object, housing properties such as `appId`, `region`, and `authKey`.
-
-| Method | Type | Description |
-|---|---|---|
-| appId | String | Sets the unique ID for the app, available on dashboard |
-| region | String | Sets the region for the app ('us' or 'eu' or 'in') |
-| authKey | String | Sets the auth key for the app, available on dashboard |
-| subscriptionType | String | Sets subscription type for tracking the presence of all users |
-| roles | String | Sets subscription type for tracking the presence of users with specified roles |
-| autoEstablishSocketConnection | Boolean | Configures if web socket connections will be established automatically on app initialization or be done manually, set to true by default |
-
-> **V6 Note:** The `extensions` and `aiFeature` parameters from V5 have been removed. Extensions are built-in and handled automatically by `MessageTemplateUtils`. No registration is needed.
-
-```dart
-UIKitSettings uiKitSettings = (UIKitSettingsBuilder()
- ..subscriptionType = CometChatSubscriptionType.allUsers
- ..autoEstablishSocketConnection = true
- ..region = "your_region"
- ..appId = "your_appID"
- ..authKey = "your_authKey"
-).build();
-
-CometChatUIKit.init(
- uiKitSettings: uiKitSettings,
- onSuccess: (successMessage) async {
- // Ready to use
- },
- onError: (error) {
- // Handle error
- },
-);
-```
-
-## Login using Auth Key
-
-Only the UID of a user is needed to log in. This simple authentication procedure is useful when you are creating a POC or if you are in the development phase. For production apps, we suggest you use AuthToken instead of Auth Key.
-
-```dart
-CometChatUIKit.login(uid, onSuccess: (user) {
- // Logged in successfully
-}, onError: (e) {
- // Handle error
-});
-```
-
-## Login using Auth Token
-
-This advanced authentication procedure does not use the Auth Key directly in your client code thus ensuring safety.
-
-1. Create a User via the CometChat API when the user signs up in your app.
-2. Create an Auth Token via the CometChat API for the new user and save the token in your database.
-3. Load the Auth Token in your client and pass it to the `loginWithAuthToken()` method.
-
-```dart
-CometChatUIKit.loginWithAuthToken("authToken", onSuccess: (user) {
- // Logged in successfully
-}, onError: (e) {
- // Handle error
-});
-```
-
-## Logout
-
-Before a new user logs in, it is crucial to clean session data to avoid potential conflicts. This can be achieved by invoking the `.logout()` function.
-
-```dart
-CometChatUIKit.logout(onSuccess: (s) {
- // Logged out successfully
-}, onError: (e) {
- // Handle error
-});
-```
-
-## Create User
-
-You can dynamically create users on CometChat using the `.createUser()` function.
-
-```dart
-CometChat.createUser(userObject, 'authKey', onSuccess: (user) {
- // User created
-}, onError: (e) {
- // Handle error
-});
-```
-
-## Base Message
-
-### Text Message
-
-Send a text message to a single user or a group using the `sendTextMessage()` function.
-
-```dart
-CometChatUIKit.sendTextMessage(textMessageObject, onSuccess: (msg) {
- // Message sent
-}, onError: (e) {
- // Handle error
-});
-```
-
-### Media Message
-
-Send a media message (image, video, audio, file) using the `sendMediaMessage()` function.
-
-```dart
-CometChatUIKit.sendMediaMessage(mediaMessageObject, onSuccess: (msg) {
- // Message sent
-}, onError: (e) {
- // Handle error
-});
-```
-
-### Custom Message
-
-Send a custom message using the `sendCustomMessage()` function.
-
-```dart
-CometChatUIKit.sendCustomMessage(customMessageObject, onSuccess: (msg) {
- // Message sent
-}, onError: (e) {
- // Handle error
-});
-```
-
-## Interactive Message
-
-### Form Message
-
-```dart
-CometChatUIKit.sendFormMessage(formMessageObject, onSuccess: (msg) {
- // Form message sent
-}, onError: (e) {
- // Handle error
-});
-```
-
-### Card Message
-
-```dart
-CometChatUIKit.sendCardMessage(cardMessageObject, onSuccess: (msg) {
- // Card message sent
-}, onError: (e) {
- // Handle error
-});
-```
-
-### Scheduler Message
-
-```dart
-CometChatUIKit.sendSchedulerMessage(schedulerMessageObject, onSuccess: (msg) {
- // Scheduler message sent
-}, onError: (e) {
- // Handle error
-});
-```
-
-### Custom Interactive Message
-
-```dart
-CometChatUIKit.sendCustomInteractiveMessage(interactiveMessageObject, onSuccess: (msg) {
- // Interactive message sent
-}, onError: (e) {
- // Handle error
-});
-```
-
-## DateFormatter
-
-By providing a custom implementation of the `DateTimeFormatterCallback`, you can globally configure how time and date values are displayed across all UI components.
-
-```dart
-UIKitSettings uiKitSettings = (UIKitSettingsBuilder()
- ..subscriptionType = CometChatSubscriptionType.allUsers
- ..region = CometChatConfig.region
- ..appId = CometChatConfig.appId
- ..authKey = CometChatConfig.authKey
- ..dateTimeFormatterCallback = DateFormatter()
-).build();
-```
diff --git a/ui-kit/flutter/v6/multi-tab-chat-ui-guide.mdx b/ui-kit/flutter/v6/multi-tab-chat-ui-guide.mdx
deleted file mode 100644
index b9a27b738..000000000
--- a/ui-kit/flutter/v6/multi-tab-chat-ui-guide.mdx
+++ /dev/null
@@ -1,120 +0,0 @@
----
-title: "Multi Tab Chat UI Guide"
----
-
-This guide helps you create a multi-tab chat user interface using the CometChat V6 UIKit in Flutter. The final UI consists of three tabs: Conversations, Users, and Groups.
-
-##### Create the Multi-Tab Chat UI:
-
-Update your `lib/multi_tab_chat_ui.dart` file with the following code:
-
-
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:flutter/material.dart';
-
-class MultiTabUIGuideExample extends StatefulWidget {
- const MultiTabUIGuideExample({super.key});
-
- @override
- State createState() => _MultiTabUIGuideExampleState();
-}
-
-class _MultiTabUIGuideExampleState extends State {
-
- void _navigateToMessages(BuildContext context, {User? user, Group? group}) {
- Navigator.push(
- context,
- MaterialPageRoute(
- builder: (context) => Scaffold(
- appBar: CometChatMessageHeader(
- user: user,
- group: group,
- ),
- body: SafeArea(
- child: Column(
- children: [
- Expanded(
- child: CometChatMessageList(
- user: user,
- group: group,
- ),
- ),
- CometChatMessageComposer(
- user: user,
- group: group,
- ),
- ],
- ),
- ),
- ),
- ),
- );
- }
-
- @override
- Widget build(BuildContext context) {
- return DefaultTabController(
- length: 3,
- child: Scaffold(
- appBar: AppBar(
- title: const Text('Multi Tab UI Guide'),
- backgroundColor: Colors.white,
- leading: null,
- automaticallyImplyLeading: false,
- bottom: const TabBar(
- tabs: [
- Tab(icon: Icon(Icons.chat), text: 'Conversation'),
- Tab(icon: Icon(Icons.person), text: 'Users'),
- Tab(icon: Icon(Icons.group), text: 'Groups'),
- ],
- ),
- ),
- body: TabBarView(
- children: [
- CometChatConversations(
- hideAppbar: true,
- onItemTap: (conversation) {
- _navigateToMessages(
- context,
- user: conversation.conversationWith is User
- ? conversation.conversationWith as User
- : null,
- group: conversation.conversationWith is Group
- ? conversation.conversationWith as Group
- : null,
- );
- },
- ),
- CometChatUsers(
- hideAppbar: true,
- hideSearch: true,
- onItemTap: (user) {
- _navigateToMessages(context, user: user);
- },
- ),
- CometChatGroups(
- hideAppbar: true,
- hideSearch: true,
- onItemTap: (group) {
- _navigateToMessages(context, group: group);
- },
- ),
- ],
- ),
- ),
- );
- }
-}
-```
-
-
-
-## Key V6 Differences
-
-| Aspect | V5 | V6 |
-|---|---|---|
-| Composite widgets | `CometChatConversationsWithMessages`, `CometChatUsersWithMessages`, `CometChatGroupsWithMessages` | Not available — compose manually |
-| Navigation to messages | Handled internally by composite widgets | You handle navigation and compose `MessageHeader` + `MessageList` + `MessageComposer` |
-| State management | GetX | BLoC |
diff --git a/ui-kit/flutter/v6/outgoing-call.mdx b/ui-kit/flutter/v6/outgoing-call.mdx
deleted file mode 100644
index 55f369bf7..000000000
--- a/ui-kit/flutter/v6/outgoing-call.mdx
+++ /dev/null
@@ -1,352 +0,0 @@
----
-title: "Outgoing Call"
-description: "Full-screen view displaying recipient information and call status during an outgoing call, with automatic transition to the ongoing call screen."
----
-
-`CometChatOutgoingCall` manages the outgoing call process. It displays recipient information (avatar, name) and call status, and automatically transitions to the ongoing call screen when the receiver accepts.
-
-
-
-
-
----
-
-## Where It Fits
-
-`CometChatOutgoingCall` is typically launched automatically by `CometChatCallButtons` when a call is initiated. It can also be launched manually for custom call flows.
-
----
-
-## Quick Start
-
-### Automatic (via CallButtons)
-
-When using `CometChatCallButtons`, the outgoing call screen is launched automatically when the user taps a call button. No manual integration needed.
-
-### Manual Launch
-
-For custom call flows:
-
-
-
-```dart
-Navigator.push(context, MaterialPageRoute(
- builder: (context) => CometChatOutgoingCall(
- user: user,
- call: callObject,
- ),
-));
-```
-
-
-
-
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_calls_uikit.dart';
-import 'package:flutter/material.dart';
-
-class OutgoingCallExample extends StatefulWidget {
- const OutgoingCallExample({super.key});
-
- @override
- State createState() => _OutgoingCallExampleState();
-}
-
-class _OutgoingCallExampleState extends State {
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: SafeArea(
- child: CometChatOutgoingCall(
- user: user,
- call: callObject,
- ),
- ),
- );
- }
-}
-```
-
-
-
-Prerequisites: CometChat SDK initialized, `enableCalls = true` set in UIKitSettings. See [Call Features](/ui-kit/flutter/call-features) for setup.
-
----
-
-## Actions and Events
-
-### Callback Methods
-
-#### `onCancelled`
-
-Fires when the user cancels the outgoing call. Override to customize cancel behavior.
-
-
-
-```dart
-CometChatOutgoingCall(
- user: user,
- call: callObject,
- onCancelled: (BuildContext context, Call call) {
- // Custom cancel logic
- },
-)
-```
-
-
-
-#### `onError`
-
-Fires on internal errors.
-
-
-
-```dart
-CometChatOutgoingCall(
- user: user,
- call: callObject,
- onError: (e) {
- debugPrint("Error: ${e.message}");
- },
-)
-```
-
-
-
-### Global Events
-
-The component emits events via `CometChatCallEvents`:
-
-| Event | Description |
-|---|---|
-| `ccCallAccepted` | Triggers when the outgoing call is accepted |
-| `ccCallRejected` | Triggers when the outgoing call is rejected |
-
-
-
-```dart
-class _YourScreenState extends State with CometChatCallEventListener {
- @override
- void initState() {
- super.initState();
- CometChatCallEvents.addCallEventsListener("unique_listener_ID", this);
- }
-
- @override
- void dispose() {
- super.dispose();
- CometChatCallEvents.removeCallEventsListener("unique_listener_ID");
- }
-
- @override
- void ccCallAccepted(Call call) {
- debugPrint("Call accepted: ${call.sessionId}");
- }
-
- @override
- void ccCallRejected(Call call) {
- debugPrint("Call rejected: ${call.sessionId}");
- }
-
- @override
- Widget build(BuildContext context) {
- return const Placeholder();
- }
-}
-```
-
-
-
----
-
-## Functionality
-
-| Property | Type | Default | Description |
-|---|---|---|---|
-| `user` | `User?` | `null` | Recipient user object |
-| `call` | `Call` | **required** | Call object with session details |
-| `callSettingsBuilder` | `CallSettingsBuilder?` | `null` | Configure call settings |
-| `height` | `double?` | `null` | Widget height |
-| `width` | `double?` | `null` | Widget width |
-| `declineButtonIcon` | `Widget?` | `null` | Custom decline/cancel button icon |
-| `declineButtonText` | `String?` | `null` | Custom decline button text |
-| `disableSoundForCalls` | `bool?` | `false` | Disable outgoing call sound |
-| `customSoundForCalls` | `String?` | `null` | Custom sound asset path |
-
-**Example — custom decline text and disabled sound:**
-
-
-
-```dart
-CometChatOutgoingCall(
- user: user,
- call: callObject,
- disableSoundForCalls: true,
- declineButtonText: "Cancel Call",
-)
-```
-
-
-
-
-
-
----
-
-## Custom View Slots
-
-### Avatar View
-
-Replace the recipient's avatar.
-
-
-
-```dart
-CometChatOutgoingCall(
- user: user,
- call: callObject,
- avatarView: (context, call) {
- return CircleAvatar(
- radius: 50,
- backgroundImage: NetworkImage(user?.avatar ?? ""),
- );
- },
-)
-```
-
-
-
-### Title View
-
-Replace the recipient's name / call status text.
-
-
-
-```dart
-CometChatOutgoingCall(
- user: user,
- call: callObject,
- titleView: (context, call) {
- return Text(
- call.receiver?.name ?? "Unknown",
- style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold, color: Colors.white),
- );
- },
-)
-```
-
-
-
-### Subtitle View
-
-Replace the subtitle (e.g., "Calling...").
-
-
-
-```dart
-CometChatOutgoingCall(
- user: user,
- call: callObject,
- subtitleView: (context, call) {
- return Text(
- "Ringing...",
- style: TextStyle(fontSize: 14, color: Colors.white70),
- );
- },
-)
-```
-
-
-
-### Cancelled View
-
-Replace the cancel/end call button.
-
-
-
-```dart
-CometChatOutgoingCall(
- user: user,
- call: callObject,
- cancelledView: (context, call) {
- return ElevatedButton.icon(
- onPressed: () {
- // Cancel call
- },
- icon: Icon(Icons.call_end),
- label: Text("End Call"),
- style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
- );
- },
-)
-```
-
-
-
----
-
-## Style
-
-
-
-```dart
-CometChatOutgoingCall(
- user: user,
- call: callObject,
- outgoingCallStyle: CometChatOutgoingCallStyle(
- avatarStyle: CometChatAvatarStyle(
- backgroundColor: Color(0xFFFBAA75),
- borderRadius: BorderRadius.circular(8),
- ),
- declineButtonColor: Color(0xFFF44649),
- declineButtonBorderRadius: BorderRadius.circular(12),
- ),
-)
-```
-
-
-
-
-
-
-
-### Style Properties
-
-| Property | Description |
-|---|---|
-| `avatarStyle` | Recipient avatar appearance |
-| `declineButtonColor` | Cancel button background color |
-| `declineButtonBorderRadius` | Cancel button corner radius |
-| `backgroundColor` | Screen background color |
-
----
-
-## Key V6 Differences
-
-| Aspect | V5 | V6 |
-|---|---|---|
-| Subtitle | Static `String?` | Dynamic `subtitleView: Widget? Function(BuildContext, Call)?` |
-| Decline callback | `onDecline` | Renamed to `onCancelled` |
-| Decline icon | URL-based `String?` | Widget-based `declineButtonIcon: Widget?` |
-| State management | GetX controller | BLoC (`OutgoingCallBloc`) |
-| Removed | `theme`, `avatarStyle`, `cardStyle`, `buttonStyle`, `ongoingCallConfiguration` | Integrated into main style |
-
----
-
-## Next Steps
-
-
-
- Handle incoming calls
-
-
- Add voice and video call buttons
-
-
- Complete calling setup
-
-
- Detailed styling reference
-
-
diff --git a/ui-kit/flutter/v6/overview.mdx b/ui-kit/flutter/v6/overview.mdx
deleted file mode 100644
index 00ec1d9ad..000000000
--- a/ui-kit/flutter/v6/overview.mdx
+++ /dev/null
@@ -1,101 +0,0 @@
----
-title: "CometChat UI Kit For Flutter (V6)"
-sidebarTitle: "Overview"
----
-
-
-This is a **beta release** of the CometChat Flutter UI Kit V6. APIs and features may change before the stable release.
-
-
-The **CometChat UI Kit V6** for Flutter is a major architectural evolution of the Flutter Chat UIKit. It provides the same robust set of **prebuilt UI widgets** that are **modular, customizable, and highly scalable**, now built on **clean architecture** with **BLoC state management** for better testability, maintainability, and performance.
-
-***
-
-## **What's New in V6?**
-
-* **BLoC State Management** – Replaces GetX with flutter_bloc for predictable, testable state.
-* **Clean Architecture** – Every module follows `bloc/` + `data/` + `domain/` + `di/` layers.
-* **No DataSource Decorator Chain** – Direct static method calls via `MessageTemplateUtils` replace the 10-layer decorator pattern.
-* **Internalized Shared UI** – `cometchat_uikit_shared` is now part of the package, no separate dependency needed.
-* **Faster Startup** – No extension registration or network calls at init time.
-
-***
-
-## **Why Choose CometChat UI Kit V6?**
-
-* **Rapid Integration** – Prebuilt UI widgets for faster deployment.
-* **Customizable & Flexible** – Modify the UI to align with your brand's identity.
-* **Cross-Platform Compatibility** – Works seamlessly across iOS and Android platforms.
-* **Scalable & Reliable** – Built on CometChat's robust chat infrastructure.
-* **Testable** – BLoC pattern with `bloc_test` and `mocktail` for comprehensive testing.
-* **Better Performance** – ~500-2000ms faster startup, no decorator chain overhead.
-
-***
-
-## **Integration**
-
-### **UI Components (Assemble It Yourself)**
-
-A collection of individual widgets—like conversation lists, message lists, message composer, etc.—each with built-in chat logic so you can customize every element.
-
-**How It Works**
-
-* Import the widgets you need from the UI Kit.
-* Arrange them in your desired layout, applying styling or customization as needed.
-* Each widget integrates with CometChat logic via BLoC and clean architecture layers.
-
-**Why It's Great**
-
-* **Flexible Design** – You control the final UI arrangement.
-* **No Extra Overhead** – Implement only the features you need.
-* **Modular** – Use exactly what you want, when you want.
-
-[**Go to V6 Getting Started**](/ui-kit/flutter/v6/getting-started)
-
-***
-
-## **Before Getting Started**
-
-Before you begin, grasp the fundamental concepts and features offered by CometChat's APIs, SDK, and UI Kit. You can find detailed information in the [Key Concepts](/fundamentals/key-concepts) documentation.
-
-To begin, please follow the [Getting Started](/ui-kit/flutter/v6/getting-started) guide.
-
-***
-
-## **Next Steps for Developers**
-
-1. **Learn the Basics** – [Key Concepts](/fundamentals/key-concepts).
-2. **Follow the Setup Guide** – [V6 Getting Started](/ui-kit/flutter/v6/getting-started)
-3. **Customize UI** – Adjust styles, themes, and widgets.
-4. **Test & Deploy** – Run tests and launch your chat app.
-
-***
-
-## **Helpful Resources**
-
-
-
-
-Fully functional sample applications to accelerate your development.
-
-[View on GitHub](https://github.com/cometchat/cometchat-uikit-flutter)
-
-
-
-
-
-Upgrade from V5 to V6 with our step-by-step migration guide.
-
-[View Migration Guide](/ui-kit/flutter/v6/upgrading-from-v5)
-
-
-
-
-***
-
-## **Need Help?**
-
-If you need assistance, check out:
-
-* [Developer Community](http://community.cometchat.com/)
-* [Support Portal](https://help.cometchat.com/hc/en-us/requests/new)
diff --git a/ui-kit/flutter/v6/search.mdx b/ui-kit/flutter/v6/search.mdx
deleted file mode 100644
index 124f0f0cd..000000000
--- a/ui-kit/flutter/v6/search.mdx
+++ /dev/null
@@ -1,296 +0,0 @@
----
-title: "Search"
-description: "Unified search component for finding conversations and messages across all chats."
----
-
-`CometChatSearch` provides unified search functionality across conversations and messages. In V6, it uses a single consolidated `SearchBloc` replacing the three separate controllers from V5.
-
-
-
-
-
----
-
-## Where It Fits
-
-`CometChatSearch` is typically launched from a search button in the conversations list or message header. It searches across both conversations and messages, displaying results in categorized sections.
-
-
-
-```dart
-CometChatSearch(
- onConversationItemClick: (conversation) {
- // Navigate to conversation
- },
- onMessageItemClick: (message) {
- // Navigate to message in context
- },
-)
-```
-
-
-
----
-
-## Quick Start
-
-Using Navigator:
-
-
-
-```dart
-Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatSearch()));
-```
-
-
-
-Embedding as a widget:
-
-
-
-```dart
-@override
-Widget build(BuildContext context) {
- return Scaffold(
- body: SafeArea(
- child: CometChatSearch(),
- ),
- );
-}
-```
-
-
-
-Launching from conversations with search button:
-
-
-
-```dart
-CometChatConversations(
- hideSearch: false,
- searchReadOnly: true,
- onSearchTap: () {
- Navigator.push(context, MaterialPageRoute(
- builder: (context) => CometChatSearch(
- onConversationItemClick: (conversation) {
- // Navigate to chat
- },
- onMessageItemClick: (message) {
- // Navigate to message
- },
- ),
- ));
- },
-)
-```
-
-
-
-Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()` and a user logged in.
-
----
-
-## Actions and Events
-
-### Callback Methods
-
-#### `onConversationItemClick`
-
-Fires when a conversation result is tapped.
-
-
-
-```dart
-CometChatSearch(
- onConversationItemClick: (conversation) {
- final entity = conversation.conversationWith;
- if (entity is User) {
- navigateToUserChat(entity);
- } else if (entity is Group) {
- navigateToGroupChat(entity);
- }
- },
-)
-```
-
-
-
-#### `onMessageItemClick`
-
-Fires when a message result is tapped.
-
-
-
-```dart
-CometChatSearch(
- onMessageItemClick: (message) {
- // Navigate to the message in its conversation
- },
-)
-```
-
-
-
-#### `onBack`
-
-Fires when the user presses the back button.
-
-
-
-```dart
-CometChatSearch(
- onBack: () {
- Navigator.pop(context);
- },
-)
-```
-
-
-
-#### `onError`
-
-Fires on internal errors.
-
-
-
-```dart
-CometChatSearch(
- onError: (e) {
- debugPrint("Search error: ${e.message}");
- },
-)
-```
-
-
-
----
-
-## Functionality
-
-| Property | Type | Default | Description |
-|---|---|---|---|
-| `showBackButton` | `bool?` | `true` | Toggle back button visibility |
-| `placeholder` | `String?` | `null` | Search input placeholder text |
-| `hideConversationResults` | `bool?` | `false` | Hide conversation search results |
-| `hideMessageResults` | `bool?` | `false` | Hide message search results |
-
----
-
-## Custom View Slots
-
-### Conversation Item View
-
-Replace the conversation result item.
-
-
-
-```dart
-CometChatSearch(
- conversationItemView: (conversation, context) {
- return ListTile(
- leading: CircleAvatar(child: Text(conversation.conversationWith?.name?[0] ?? "")),
- title: Text(conversation.conversationWith?.name ?? ""),
- );
- },
-)
-```
-
-
-
-### Message Item View
-
-Replace the message result item.
-
-
-
-```dart
-CometChatSearch(
- messageItemView: (message, context) {
- return ListTile(
- title: Text(message.sender?.name ?? ""),
- subtitle: message is TextMessage ? Text(message.text) : Text("Media message"),
- );
- },
-)
-```
-
-
-
-### State Views
-
-
-
-```dart
-CometChatSearch(
- emptyStateView: (context) => Center(child: Text("No results found")),
- errorStateView: (context) => Center(child: Text("Search failed")),
- loadingStateView: (context) => Center(child: CircularProgressIndicator()),
-)
-```
-
-
-
----
-
-## Advanced
-
-### BLoC Access
-
-The search widget uses `SearchBloc` internally:
-
-| Component | Description |
-|---|---|
-| `SearchBloc` | Single consolidated BLoC for all search types |
-| `SearchEvent` | Events: `SearchTextChanged`, `ClearSearch`, `LoadMoreConversationResults`, `LoadMoreMessageResults` |
-| `SearchState` | Search state with conversation and message results |
-
-### V5 → V6 Migration
-
-| V5 | V6 |
-|---|---|
-| `CometChatSearchController` | `SearchBloc` |
-| `CometChatConversationsSearchController` | Merged into `SearchBloc` |
-| `CometChatMessagesSearchController` | Merged into `SearchBloc` |
-| `SearchUtils` | Inlined into `SearchBloc` |
-| 3 separate controllers | 1 unified BLoC |
-
----
-
-## Style
-
-
-
-```dart
-CometChatSearch(
- searchStyle: CometChatSearchStyle(
- backgroundColor: Colors.white,
- searchBoxBackgroundColor: Color(0xFFF5F5F5),
- searchBoxBorderRadius: BorderRadius.circular(12),
- ),
-)
-```
-
-
-
-
-
-
-
----
-
-## Next Steps
-
-
-
- Browse recent conversations
-
-
- Display messages in a conversation
-
-
- Detailed styling reference
-
-
- Browse available users
-
-
diff --git a/ui-kit/flutter/v6/shortcut-formatter-guide.mdx b/ui-kit/flutter/v6/shortcut-formatter-guide.mdx
deleted file mode 100644
index 12ccabf9e..000000000
--- a/ui-kit/flutter/v6/shortcut-formatter-guide.mdx
+++ /dev/null
@@ -1,139 +0,0 @@
----
-title: "Shortcut Formatter"
----
-
-## Introduction
-
-The `ShortcutFormatter` class extends `CometChatTextFormatter` to handle shortcuts within messages. This guide walks you through implementing shortcut extensions in your CometChat V6 application.
-
-## Setup
-
-1. Create the ShortcutFormatter class by extending `CometChatTextFormatter`:
-
-
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
-class ShortcutFormatter extends CometChatTextFormatter {
- @override
- void init() {
- trackingCharacter ??= "!";
- }
-
- bool isShortcutTracking = false;
-
- void prepareShortcuts(TextEditingController textEditingController) {
- CometChat.callExtension('message-shortcuts', 'GET', '/v1/fetch', null,
- onSuccess: (map) {
- if (map.isNotEmpty) {
- Map data = map["data"];
- if (data.isNotEmpty) {
- Map shortcuts = data["shortcuts"];
- if (shortcuts.isNotEmpty) {
- parseData(shortcuts: shortcuts, textEditingController: textEditingController);
- }
- }
- }
- },
- onError: (error) {},
- );
- }
-
- void parseData({Map? shortcuts, required TextEditingController textEditingController}) async {
- if (shortcuts == null || shortcuts.isEmpty) {
- suggestionListEventSink?.add([]);
- if (onSearch != null) onSearch!(null);
- CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
- } else {
- CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
- if (suggestionListEventSink != null && shortcuts.isNotEmpty) {
- List list = [];
- shortcuts.forEach((key, value) => list.add(SuggestionListItem(
- id: key,
- title: "$key → $value",
- onTap: () {
- int cursorPos = textEditingController.selection.base.offset;
- String left = textEditingController.text.substring(0, cursorPos - 1);
- String right = textEditingController.text.substring(cursorPos);
- textEditingController.text = "$left$value $right";
- updatePreviousText(textEditingController.text);
- textEditingController.selection = TextSelection(
- baseOffset: cursorPos - 1 + "$value".length + 1,
- extentOffset: cursorPos - 1 + "$value".length + 1,
- );
- resetMatchTracker();
- isShortcutTracking = false;
- CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
- },
- )));
- suggestionListEventSink?.add(list);
- }
- }
- }
-
- void updatePreviousText(String text) {
- previousTextEventSink?.add(text);
- }
-
- void resetMatchTracker() {
- suggestionListEventSink?.add([]);
- if (onSearch != null) onSearch!(null);
- }
-
- @override
- void onChange(TextEditingController textEditingController, String previousText) {
- var cursorPosition = textEditingController.selection.base.offset;
- if (textEditingController.text.isEmpty) {
- resetMatchTracker();
- return;
- }
- // Handle shortcut tracking logic
- String previousCharacter = cursorPosition == 0 ? "" : textEditingController.text[cursorPosition - 1];
- bool isSpace = cursorPosition == 1 || (textEditingController.text.length > 1 && cursorPosition > 1 &&
- (textEditingController.text[cursorPosition - 2] == " " || textEditingController.text[cursorPosition - 2] == "\n"));
-
- if (isShortcutTracking) {
- isShortcutTracking = false;
- if (onSearch != null) onSearch!(null);
- CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
- } else if (previousCharacter == trackingCharacter && isSpace) {
- isShortcutTracking = true;
- if (onSearch != null) onSearch!(trackingCharacter);
- CometChatUIEvents.showPanel(composerId, CustomUIPosition.composerPreview,
- (context) => getLoadingIndicator(context, cometChatTheme));
- prepareShortcuts(textEditingController);
- }
- }
-
- @override
- TextStyle getMessageInputTextStyle(CometChatTheme theme) {
- throw UnimplementedError();
- }
-
- @override
- void handlePreMessageSend(BuildContext context, BaseMessage baseMessage) {}
-
- @override
- void onScrollToBottom(TextEditingController textEditingController) {}
-}
-```
-
-
-
-## Usage
-
-Pass the `ShortcutFormatter` to the `textFormatters` property of `CometChatMessageComposer`:
-
-
-
-```dart
-CometChatMessageComposer(
- user: user,
- textFormatters: [ShortcutFormatter()],
-)
-```
-
-
-
-
diff --git a/ui-kit/flutter/v6/sound-manager.mdx b/ui-kit/flutter/v6/sound-manager.mdx
deleted file mode 100644
index 7151fe40d..000000000
--- a/ui-kit/flutter/v6/sound-manager.mdx
+++ /dev/null
@@ -1,61 +0,0 @@
----
-title: "Sound Manager"
----
-
-## Overview
-
-The `SoundManager` is a helper class responsible for managing and playing various types of audio in the CometChat V6 UI Kit. This includes sound events for incoming and outgoing messages and calls.
-
-## Methods
-
-### Play Sound
-
-The SoundManager plays pre-defined or custom sounds based on user interactions with the chat interface.
-
-
-
-```dart
-// Play default sounds:
-SoundManager().play(sound: Sound.incomingMessage);
-SoundManager().play(sound: Sound.outgoingMessage);
-```
-
-
-
-### Stop Sound
-
-Stop any sound currently being played:
-
-
-
-```dart
-SoundManager().stop();
-```
-
-
-
-## Usage
-
-Play a custom sound:
-
-
-
-```dart
-SoundManager().play(sound: Sound.outgoingMessage, customSound: "assetPath");
-```
-
-
-
-## Sound Enum Reference
-
-| Sound | Asset |
-|---|---|
-| incomingMessage | assets/sound/incoming_message.wav |
-| outgoingMessage | assets/sound/outgoing_message.wav |
-| incomingMessageFromOther | assets/sound/incoming_message.wav |
-| outgoingCall | assets/sound/outgoing_call.wav |
-| incomingCall | assets/sound/incoming_call.wav |
-
-
-In V6, the `CometChatConversations` widget provides `disableSoundForMessages` and `customSoundForMessages` properties to control sound behavior at the widget level.
-
diff --git a/ui-kit/flutter/v6/theme-introduction.mdx b/ui-kit/flutter/v6/theme-introduction.mdx
deleted file mode 100644
index 2b7f02a34..000000000
--- a/ui-kit/flutter/v6/theme-introduction.mdx
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: "Theming In CometChat Flutter UI Kit V6"
-sidebarTitle: "Theming"
----
-
-CometChat's theming framework is a robust system that empowers developers to define the look and feel of their applications with precision and consistency. It follows three essential design system principles: Color, Typography, and Shape.
-
-> The theming system is identical between V5 and V6. All theme classes, properties, and APIs work the same way.
-
-## Theming Overview
-
-Theming in the UI Kit consists of three core components:
-
-- **Color:** Managed through `CometChatColorPalette`, it controls the application's color scheme, including primary, neutral, alert, and text colors.
-- **Typography:** Defined via `CometChatTypography`, it standardizes text styles, such as font size and weight.
-- **Shape:** Configured using `CometChatSpacing`, it defines the structure of margins, paddings, and border radii.
-
-## Key Benefits
-
-- Achieve consistent UI design across your application.
-- Support for light and dark themes.
-- Easy scalability and customization for app-specific requirements.
-
-## Light and Dark Themes
-
-The Chat UI Kit supports both light and dark themes. V6 adds dedicated icon variants:
-- `assets/icons/light/` — light mode icons
-- `assets/icons/dark/` — dark mode icons
-- `assets/icons/svg/calls/` — SVG call icons
-
-## Custom Theme
-
-The Chat UI Kit offers robust support for creating customized themes using `CometChatColorPalette`, `CometChatTypography`, and `CometChatSpacing` with Flutter's `ThemeExtension`.
-
-
-
-```dart
-ThemeData(
- fontFamily: 'Times New Roman',
- extensions: [
- CometChatColorPalette(
- primary: Color(0xFFF76808),
- ),
- ],
-)
-```
-
-
-
-## Core Components
-
-### Color
-
-The `CometChatColorPalette` class manages colors in your app:
-
-- **Primary Colors:** Base colors and extended shades.
-- **Neutral Colors:** Shades for surfaces and backgrounds.
-- **Alert Colors:** Colors for states like success, error, warning, and info.
-- **Text Colors:** Differentiated for primary, secondary, and disabled states.
-
-### Typography
-
-The `CometChatTypography` class standardizes text styles:
-
-- **Headings:** Text styles for various heading levels.
-- **Body:** Styling for regular text.
-- **Captions:** Smaller text style for labels.
-- **Buttons:** Text style for button text.
-- **Links:** Styles for clickable links.
-- **Titles:** Style for main titles or component headers.
-
-### Spacing
-
-The `CometChatSpacing` class defines layout structure:
-
-- **Padding:** Internal spacing within elements.
-- **Margin:** Space between elements.
-- **Radius:** Corner rounding of UI elements.
-
-## Best Practices
-
-- **Ensure Contrast:** Follow accessibility guidelines to maintain a minimum contrast ratio.
-- **Consistency:** Use a consistent color palette across all components.
-- **Adaptability:** Test your theme in various scenarios, such as low-light and high-contrast environments.
diff --git a/ui-kit/flutter/v6/threaded-messages-header.mdx b/ui-kit/flutter/v6/threaded-messages-header.mdx
deleted file mode 100644
index c80efb38c..000000000
--- a/ui-kit/flutter/v6/threaded-messages-header.mdx
+++ /dev/null
@@ -1,235 +0,0 @@
----
-title: "Threaded Messages Header"
-description: "Header component for threaded conversations showing the parent message, reply count, and thread navigation."
----
-
-`CometChatThreadedHeader` displays the parent message of a thread along with reply count and provides the container for threaded message list and composer. It enables organized threaded conversations within a chat.
-
-
-
-
-
----
-
-## Where It Fits
-
-`CometChatThreadedHeader` is used when a user taps "Reply in Thread" on a message. It wraps the parent message display with a `CometChatMessageList` (filtered by `parentMessageId`) and `CometChatMessageComposer` for thread replies.
-
-
-
-```dart
-CometChatThreadedHeader(
- parentMessage: parentMessage,
- loggedInUser: loggedInUser,
-)
-```
-
-
-
----
-
-## Quick Start
-
-
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:flutter/material.dart';
-
-class ThreadScreen extends StatelessWidget {
- final BaseMessage parentMessage;
- final User loggedInUser;
-
- const ThreadScreen({
- super.key,
- required this.parentMessage,
- required this.loggedInUser,
- });
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: SafeArea(
- child: CometChatThreadedHeader(
- parentMessage: parentMessage,
- loggedInUser: loggedInUser,
- ),
- ),
- );
- }
-}
-```
-
-
-
-Typically launched from the message list when a user selects "Reply in Thread":
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- onThreadRepliesClick: (message, context, {bubbleView}) {
- Navigator.push(context, MaterialPageRoute(
- builder: (context) => ThreadScreen(
- parentMessage: message,
- loggedInUser: CometChatUIKit.loggedInUser!,
- ),
- ));
- },
-)
-```
-
-
-
-Prerequisites: CometChat SDK initialized, a user logged in, and a valid `BaseMessage` object as the parent message.
-
----
-
-## Actions and Events
-
-### Callback Methods
-
-#### `onBack`
-
-Fires when the user presses the back button.
-
-
-
-```dart
-CometChatThreadedHeader(
- parentMessage: parentMessage,
- loggedInUser: loggedInUser,
- onBack: () {
- Navigator.pop(context);
- },
-)
-```
-
-
-
-#### `onError`
-
-Fires on internal errors.
-
-
-
-```dart
-CometChatThreadedHeader(
- parentMessage: parentMessage,
- loggedInUser: loggedInUser,
- onError: (e) {
- debugPrint("Error: ${e.message}");
- },
-)
-```
-
-
-
-### SDK Events (Real-Time, Automatic)
-
-| SDK Listener | Internal behavior |
-|---|---|
-| New thread reply received | Increments reply count |
-| Parent message edited | Updates parent message display |
-| Parent message deleted | Updates parent message display |
-
----
-
-## Functionality
-
-| Property | Type | Default | Description |
-|---|---|---|---|
-| `parentMessage` | `BaseMessage` | **required** | The parent message of the thread |
-| `loggedInUser` | `User` | **required** | The currently logged-in user |
-| `showBackButton` | `bool?` | `true` | Toggle back button visibility |
-| `title` | `String?` | `null` | Custom title text |
-| `hideMessageComposer` | `bool?` | `false` | Hide the message composer |
-
----
-
-## Custom View Slots
-
-### Bubble View
-
-Replace the parent message bubble display.
-
-
-
-```dart
-CometChatThreadedHeader(
- parentMessage: parentMessage,
- loggedInUser: loggedInUser,
- bubbleView: (message) {
- if (message is TextMessage) {
- return Container(
- padding: EdgeInsets.all(12),
- decoration: BoxDecoration(
- color: Color(0xFFF5F5F5),
- borderRadius: BorderRadius.circular(8),
- ),
- child: Text(message.text),
- );
- }
- return null;
- },
-)
-```
-
-
-
----
-
-## Advanced
-
-### BLoC Access
-
-The threaded header uses `ThreadedHeaderBloc` internally:
-
-| Component | Description |
-|---|---|
-| `ThreadedHeaderBloc` | Manages threaded header state |
-| `ThreadedHeaderEvent` | Events: `InitializeThreadedHeader`, `IncrementReplyCount`, `UpdateParentMessage` |
-| `ThreadedHeaderState` | Threaded header state with parent message and reply count |
-
----
-
-## Style
-
-
-
-```dart
-CometChatThreadedHeader(
- parentMessage: parentMessage,
- loggedInUser: loggedInUser,
- style: CometChatThreadedHeaderStyle(
- backgroundColor: Colors.white,
- replyCountTextColor: Color(0xFF727272),
- ),
-)
-```
-
-
-
-
-
-
-
----
-
-## Next Steps
-
-
-
- Display messages in a conversation
-
-
- Compose and send messages
-
-
- Complete threaded messages implementation
-
-
- Detailed styling reference
-
-
diff --git a/ui-kit/flutter/v6/troubleshooting.mdx b/ui-kit/flutter/v6/troubleshooting.mdx
deleted file mode 100644
index 0bc3c4c3c..000000000
--- a/ui-kit/flutter/v6/troubleshooting.mdx
+++ /dev/null
@@ -1,112 +0,0 @@
----
-title: "Troubleshooting"
-description: "Common failure modes and fixes for the CometChat Flutter V6 UI Kit."
----
-
-## Initialization and Login
-
-| Symptom | Cause | Fix |
-|---|---|---|
-| `CometChatUIKit.init()` fails silently | Invalid App ID, Region, or Auth Key | Double-check credentials from the [CometChat Dashboard](https://app.cometchat.com/) |
-| Blank screen after login | Component rendered before `init()` or `login()` completes | Ensure `init()` → `login()` order completes before rendering any UI Kit component. See [Methods](/ui-kit/flutter/v6/methods) |
-| Component renders but shows no data | User not logged in | Call `CometChatUIKit.login("UID")` after init resolves |
-| Login fails with "UID not found" | UID doesn't exist in your CometChat app | Create the user via Dashboard, SDK, or REST API first |
-| `CometChatUIKit.loggedInUser` returns null | User not logged in or session expired | Call `login()` or `loginWithAuthToken()` first |
-| Auth Key exposed in production | Using Auth Key instead of Auth Token | Switch to `loginWithAuthToken()` for production. Generate tokens server-side via the REST API |
-
----
-
-## Theming and Styling
-
-| Symptom | Cause | Fix |
-|---|---|---|
-| Theme not applied | `ThemeExtension` not added to `MaterialApp` | Add CometChat style extensions to your `ThemeData.extensions` list |
-| Dark mode not working | Brightness not detected | CometChat theme uses `MediaQuery.platformBrightnessOf(context)`. Ensure your `MaterialApp` supports dark mode |
-| Custom colors not applying | Overriding wrong style class | Check [Component Styling](/ui-kit/flutter/v6/component-styling) for the correct style class per component |
-| Component-level style ignored | Style object not passed correctly | Ensure you pass the style to the `style` property, not as a `ThemeExtension` |
-| Styles apply in light mode but not dark | Only light theme configured | Configure both light and dark themes in `MaterialApp` with separate `ThemeData` instances |
-| Bubble style not applying | Style linked to wrong direction | Define separate styles for `CometChatOutgoingMessageBubbleStyle` and `CometChatIncomingMessageBubbleStyle` — changing one does not affect the other |
-
----
-
-## Components
-
-| Symptom | Cause | Fix |
-|---|---|---|
-| Component not rendering | `init()` or `login()` not complete | Ensure both complete before building any CometChat widget |
-| Message list is empty | Invalid `User` or `Group` object | Fetch the user or group via the SDK before passing it to the component |
-| `onThreadRepliesClick` not firing | Callback not set | Pass the callback to `CometChatMessageList(onThreadRepliesClick: ...)` |
-| Custom template not rendering | Template key doesn't match message | Ensure `type` and `category` on your template match the message's `type` and `category` exactly |
-| `addTemplate` not overriding default | Template appended, not replaced | `addTemplate` appends to the list. The template map uses last-write-wins by `category_type` key, so your template must have the same key to override |
-| Keyboard covers composer | `resizeToAvoidBottomInset` not set | Set `resizeToAvoidBottomInset: true` on your `Scaffold` |
-| Swipe-to-reply not working | Disabled or message not eligible | Check `enableSwipeToReply` is `true`, message has a valid ID, and is not deleted or an action message |
-| Audio playback issues | Multiple audio states | The UI Kit uses `AudioStateManager` internally. Ensure you're not conflicting with other audio players |
-
----
-
-## Calling
-
-| Symptom | Cause | Fix |
-|---|---|---|
-| Call buttons not appearing | Calls not enabled | Ensure `enableCalls = true` is set in your `UIKitSettingsBuilder` |
-| Incoming call screen not showing | Call listener not registered | Ensure `CometChat.addCallListener()` is called in your app initialization |
-| Call connects but no audio/video | Missing permissions | Request camera and microphone permissions before initiating calls |
-
----
-
-## Extensions
-
-| Symptom | Cause | Fix |
-|---|---|---|
-| Extension feature not appearing | Extension not activated in Dashboard | Enable the specific extension from your [Dashboard](/fundamentals/extensions-overview) |
-| Stickers not showing | Sticker extension not enabled | Activate [Sticker Extension](/fundamentals/stickers) in Dashboard |
-| Polls option missing | Polls extension not enabled | Activate [Polls Extension](/fundamentals/polls) in Dashboard |
-| Link preview not rendering | Link Preview extension not enabled | Activate [Link Preview Extension](/fundamentals/link-preview) in Dashboard |
-
----
-
-## BLoC and State Management
-
-| Symptom | Cause | Fix |
-|---|---|---|
-| BLoC already closed error | External BLoC disposed prematurely | If you provide a custom BLoC via `messageListBloc`, ensure it outlives the widget |
-| State not updating after BLoC event | Event dispatched to wrong BLoC instance | Ensure you're dispatching events to the same BLoC instance the widget is using |
-| Duplicate messages appearing | Multiple BLoC instances for same conversation | Use a single BLoC instance per conversation. Don't create a new one on every rebuild |
-
----
-
-## Localization
-
-| Symptom | Cause | Fix |
-|---|---|---|
-| UI text not translated | Locale not set | Ensure your `MaterialApp` has the correct `locale` and `supportedLocales` configured |
-| String overrides not appearing | Wrong key | Verify the key matches exactly. See [Localize](/ui-kit/flutter/v6/localize) |
-
----
-
-## Sound
-
-| Symptom | Cause | Fix |
-|---|---|---|
-| No sound plays | Sound disabled | Check `disableSoundForMessages` is not set to `true` |
-| Custom sound not playing | Asset not found | Ensure the sound file is added to your `pubspec.yaml` assets and the path is correct |
-
----
-
-## Text Formatters
-
-| Symptom | Cause | Fix |
-|---|---|---|
-| Mentions render as plain text | Formatter not added | Pass `CometChatMentionsFormatter()` in the `textFormatters` list |
-| `textFormatters` has no effect | Empty list passed | Add at least one formatter to the list |
-| Markdown not rendering | `MarkdownTextFormatter` not included | Add `MarkdownTextFormatter()` to your `textFormatters` list or use `RichTextConfiguration` on the composer |
-
----
-
-## Events
-
-| Symptom | Cause | Fix |
-|---|---|---|
-| Event listener not firing | Subscribed to wrong event class | Check the [Events](/ui-kit/flutter/v6/events) page for exact event class names |
-| Duplicate event triggers | Multiple registrations without cleanup | Remove listeners when the widget is disposed |
-| Listener ID collision | Non-unique listener tag | Use a unique string for each listener registration |
diff --git a/ui-kit/flutter/v6/users.mdx b/ui-kit/flutter/v6/users.mdx
deleted file mode 100644
index fec746ab4..000000000
--- a/ui-kit/flutter/v6/users.mdx
+++ /dev/null
@@ -1,503 +0,0 @@
----
-title: "Users"
-description: "Scrollable list of all available users with search, avatars, names, and online/offline status indicators."
----
-
-`CometChatUsers` renders a scrollable list of all available users with real-time presence updates, search, avatars, and online/offline status indicators.
-
----
-
-## Where It Fits
-
-`CometChatUsers` is a list component. It renders all available users and emits the selected `User` via `onItemTap`. Wire it to `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer` to build a direct messaging layout.
-
-
-
-```dart
-CometChatUsers(
- onItemTap: (context, user) {
- // Navigate to chat with this user
- },
-)
-```
-
-
-
----
-
-## Quick Start
-
-Using Navigator:
-
-
-
-```dart
-Navigator.push(context, MaterialPageRoute(builder: (context) => const CometChatUsers()));
-```
-
-
-
-Embedding as a widget:
-
-
-
-```dart
-@override
-Widget build(BuildContext context) {
- return Scaffold(
- body: SafeArea(
- child: CometChatUsers(),
- ),
- );
-}
-```
-
-
-
-Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()`, a user logged in, and the UI Kit dependency added.
-
----
-
-## Filtering Users
-
-Pass a `UsersRequestBuilder` to control what loads:
-
-
-
-```dart
-CometChatUsers(
- usersRequestBuilder: UsersRequestBuilder()
- ..limit = 20
- ..friendsOnly = true,
-)
-```
-
-
-
-### Filter Recipes
-
-| Recipe | Builder property |
-| --- | --- |
-| Friends only | `..friendsOnly = true` |
-| Limit per page | `..limit = 10` |
-| Search by keyword | `..searchKeyword = "john"` |
-| Hide blocked users | `..hideBlockedUsers = true` |
-| Filter by roles | `..roles = ["admin", "moderator"]` |
-| Filter by tags | `..tags = ["vip"]` |
-| Online users only | `..userStatus = CometChatConstants.userStatusOnline` |
-| Filter by UIDs | `..UIDs = ["uid1", "uid2"]` |
-
----
-
-## Actions and Events
-
-### Callback Methods
-
-#### `onItemTap`
-
-Fires when a user row is tapped. Primary navigation hook.
-
-
-
-```dart
-CometChatUsers(
- onItemTap: (context, user) {
- // Navigate to chat screen
- },
-)
-```
-
-
-
-#### `onItemLongPress`
-
-Fires when a user row is long-pressed.
-
-
-
-```dart
-CometChatUsers(
- onItemLongPress: (context, user) {
- // Show context menu
- },
-)
-```
-
-
-
-#### `onBack`
-
-Fires when the user presses the back button in the app bar.
-
-
-
-```dart
-CometChatUsers(
- onBack: () {
- Navigator.pop(context);
- },
-)
-```
-
-
-
-#### `onSelection`
-
-Fires when users are selected/deselected in multi-select mode.
-
-
-
-```dart
-CometChatUsers(
- selectionMode: SelectionMode.multiple,
- activateSelection: ActivateSelection.onClick,
- onSelection: (selectedUsers, context) {
- // Handle selected users
- },
-)
-```
-
-
-
-#### `onError`
-
-Fires on internal errors.
-
-
-
-```dart
-CometChatUsers(
- onError: (e) {
- debugPrint("Error: ${e.message}");
- },
-)
-```
-
-
-
-#### `onLoad`
-
-Fires when the list is successfully fetched and loaded.
-
-
-
-```dart
-CometChatUsers(
- onLoad: (userList) {
- debugPrint("Loaded ${userList.length}");
- },
-)
-```
-
-
-
-#### `onEmpty`
-
-Fires when the list is empty after loading.
-
-
-
-```dart
-CometChatUsers(
- onEmpty: () {
- debugPrint("No users found");
- },
-)
-```
-
-
-
-### SDK Events (Real-Time, Automatic)
-
-The component listens to these SDK events internally. No manual setup needed.
-
-| SDK Listener | Internal behavior |
-| --- | --- |
-| `onUserOnline` | Updates online status indicator for the user |
-| `onUserOffline` | Updates offline status indicator for the user |
-| Connection reconnected | Triggers silent refresh to sync user list |
-
----
-
-## Functionality
-
-| Property | Type | Default | Description |
-| --- | --- | --- | --- |
-| `title` | `String?` | `null` | Custom app bar title |
-| `showBackButton` | `bool` | `true` | Toggle back button |
-| `hideAppbar` | `bool?` | `false` | Toggle app bar visibility |
-| `hideSearch` | `bool` | `false` | Toggle search bar |
-| `usersStatusVisibility` | `bool?` | `true` | Show online/offline status indicator |
-| `stickyHeaderVisibility` | `bool?` | `false` | Show alphabetical sticky header |
-| `selectionMode` | `SelectionMode?` | `null` | Enable selection mode (`single` or `multiple`) |
-| `searchPlaceholder` | `String?` | `null` | Search placeholder text |
-| `searchKeyword` | `String?` | `null` | Pre-fill search keyword |
-
----
-
-## Custom View Slots
-
-### Leading View
-
-Replace the avatar / left section.
-
-
-
-```dart
-CometChatUsers(
- leadingView: (context, user) {
- return CircleAvatar(
- child: Text(user.name?[0] ?? ""),
- );
- },
-)
-```
-
-
-
-### Title View
-
-Replace the name / title text.
-
-
-
-```dart
-CometChatUsers(
- titleView: (context, user) {
- return Text(
- user.name ?? "",
- style: TextStyle(fontWeight: FontWeight.bold),
- );
- },
-)
-```
-
-
-
-### Subtitle View
-
-Replace the subtitle text below the user's name.
-
-
-
-```dart
-CometChatUsers(
- subtitleView: (context, user) {
- return Text(
- user.status ?? "offline",
- maxLines: 1,
- overflow: TextOverflow.ellipsis,
- );
- },
-)
-```
-
-
-
-### Trailing View
-
-Replace the right section of each user item.
-
-
-
-```dart
-CometChatUsers(
- trailingView: (context, user) {
- return Text(user.role ?? "");
- },
-)
-```
-
-
-
-### List Item View
-
-Replace the entire list item row.
-
-
-
-```dart
-CometChatUsers(
- listItemView: (user) {
- return ListTile(
- leading: CircleAvatar(child: Text(user.name?[0] ?? "")),
- title: Text(user.name ?? ""),
- subtitle: Text(user.status ?? "offline"),
- );
- },
-)
-```
-
-
-
-### State Views
-
-
-
-```dart
-CometChatUsers(
- emptyStateView: (context) => Center(child: Text("No users found")),
- errorStateView: (context) => Center(child: Text("Something went wrong")),
- loadingStateView: (context) => Center(child: CircularProgressIndicator()),
-)
-```
-
-
-
----
-
-## Common Patterns
-
-### Minimal list — hide all chrome
-
-
-
-```dart
-CometChatUsers(
- hideAppbar: true,
- hideSearch: true,
- stickyHeaderVisibility: false,
-)
-```
-
-
-
-### Friends-only list
-
-
-
-```dart
-CometChatUsers(
- usersRequestBuilder: UsersRequestBuilder()
- ..friendsOnly = true,
-)
-```
-
-
-
-### Online users only
-
-
-
-```dart
-CometChatUsers(
- usersRequestBuilder: UsersRequestBuilder()
- ..userStatus = CometChatConstants.userStatusOnline,
-)
-```
-
-
-
----
-
-## Advanced
-
-### BLoC Access
-
-Provide a custom `UsersBloc` to override behavior:
-
-
-
-```dart
-CometChatUsers(
- usersBloc: CustomUsersBloc(),
-)
-```
-
-
-
-### Extending UsersBloc
-
-`UsersBloc` uses the `ListBase` mixin with override hooks:
-
-
-
-```dart
-class CustomUsersBloc extends UsersBloc {
- @override
- void onItemAdded(User item, List updatedList) {
- // Custom sorting logic
- super.onItemAdded(item, updatedList);
- }
-
- @override
- void onListReplaced(List previousList, List newList) {
- // Filter out specific users
- final filtered = newList.where((u) => u.role != "bot").toList();
- super.onListReplaced(previousList, filtered);
- }
-}
-```
-
-
-
-For `ListBase` override hooks (`onItemAdded`, `onItemRemoved`, `onItemUpdated`, `onListCleared`, `onListReplaced`), see [BLoC & Data — ListBase Hooks](/ui-kit/flutter/v6/customization-bloc-data#listbase-hooks).
-
-### Public BLoC Events
-
-| Event | Description |
-| --- | --- |
-| `LoadUsers({searchKeyword, silent})` | Load initial users. `silent: true` keeps existing list visible. |
-| `LoadMoreUsers()` | Load next page (pagination) |
-| `RefreshUsers()` | Refresh the list |
-| `SearchUsers(keyword)` | Search users with debouncing |
-| `ToggleUserSelection(uid)` | Toggle selection state |
-| `ClearUserSelection()` | Clear all selections |
-| `UpdateUser(user)` | Update a specific user |
-
-### Public BLoC Methods
-
-| Method | Returns | Description |
-| --- | --- | --- |
-| `getStatusNotifier(uid)` | `ValueNotifier` | Per-user status notifier for isolated rebuilds |
-| `getUserStatus(uid)` | `String` | Current status for a user (`online` / `offline`) |
-
----
-
-## Style
-
-
-
-```dart
-CometChatUsers(
- usersStyle: CometChatUsersStyle(
- avatarStyle: CometChatAvatarStyle(
- borderRadius: BorderRadius.circular(8),
- backgroundColor: Color(0xFFFBAA75),
- ),
- statusIndicatorStyle: CometChatStatusIndicatorStyle(),
- ),
-)
-```
-
-
-
-### Style Properties
-
-| Property | Description |
-| --- | --- |
-| `backgroundColor` | List background color |
-| `avatarStyle` | Avatar appearance |
-| `statusIndicatorStyle` | Online/offline indicator |
-| `searchBoxStyle` | Search box appearance |
-
-See [Component Styling](/ui-kit/flutter/v6/component-styling) for the full reference.
-
----
-
-## Next Steps
-
-
-
- Browse recent conversations
-
-
- Browse and search available groups
-
-
- Detailed styling reference
-
-
- Customize message bubble structure
-
-
\ No newline at end of file
diff --git a/ui-kit/ios/call-buttons.mdx b/ui-kit/ios/call-buttons.mdx
index 0c906c607..39bd76112 100644
--- a/ui-kit/ios/call-buttons.mdx
+++ b/ui-kit/ios/call-buttons.mdx
@@ -1,6 +1,6 @@
---
title: "Call Buttons"
-description: "Provides voice and video call buttons for initiating calls with users or groups"
+description: "Add CometChat iOS UI Kit call buttons for voice and video calls with user or group targets, click callbacks, and error handling."
---
The `CometChatCallButtons` component provides users with the ability to make calls, access call-related functionalities, and control call settings. Clicking this button typically triggers the call to be placed to the desired recipient.
diff --git a/ui-kit/ios/call-logs.mdx b/ui-kit/ios/call-logs.mdx
index 022371c54..07698cd62 100644
--- a/ui-kit/ios/call-logs.mdx
+++ b/ui-kit/ios/call-logs.mdx
@@ -1,6 +1,6 @@
---
title: "Call Logs"
-description: "Displays a list of call logs with call type, duration, and participant information"
+description: "Display CometChat iOS UI Kit call logs with call type, duration, participants, timestamps, request builders, and selection callbacks."
---
The `CometChatCallLogs` component shows the list of call logs available. By default, names are shown for all listed users, along with their avatar if available.
diff --git a/ui-kit/ios/calling-integration.mdx b/ui-kit/ios/calling-integration.mdx
index c373888ea..6c25e0830 100644
--- a/ui-kit/ios/calling-integration.mdx
+++ b/ui-kit/ios/calling-integration.mdx
@@ -1,6 +1,6 @@
---
title: "Calling Integration"
-description: "Add voice and video calling to your iOS UI Kit application"
+description: "Add voice and video calling to CometChat iOS UI Kit with Calls SDK installation, CocoaPods or Swift Package Manager, and verification."
---
## Overview
diff --git a/ui-kit/ios/color-resources.mdx b/ui-kit/ios/color-resources.mdx
index 9e4bd68de..3ccc395d7 100644
--- a/ui-kit/ios/color-resources.mdx
+++ b/ui-kit/ios/color-resources.mdx
@@ -1,7 +1,7 @@
---
title: "Color Resources"
sidebarTitle: "Color Resources"
-description: "Complete guide to customizing colors in CometChat iOS UI Kit - themes, dark mode, and branding"
+description: "Customize CometChat iOS UI Kit color resources with brand colors, backgrounds, text, alerts, dark mode, and theme timing."
---
diff --git a/ui-kit/ios/compact-message-composer.mdx b/ui-kit/ios/compact-message-composer.mdx
index 40a4d0cbe..30d1b757f 100644
--- a/ui-kit/ios/compact-message-composer.mdx
+++ b/ui-kit/ios/compact-message-composer.mdx
@@ -1,6 +1,6 @@
---
title: "Compact Message Composer"
-description: "Compact Message Composer — CometChat documentation."
+description: "Configure CometChat iOS UI Kit Compact Message Composer with single-line input, rich text, attachments, mentions, stickers, and voice recording."
---
## Overview
diff --git a/ui-kit/ios/component-styling.mdx b/ui-kit/ios/component-styling.mdx
index 8e6fc6d0a..2b372fb1a 100644
--- a/ui-kit/ios/component-styling.mdx
+++ b/ui-kit/ios/component-styling.mdx
@@ -1,7 +1,7 @@
---
title: "Component Styling"
sidebarTitle: "Component Styling"
-description: "Complete guide to styling CometChat iOS UI Kit components - colors, fonts, and custom appearances"
+description: "Style CometChat iOS UI Kit components globally or per instance with style classes, base styles, colors, fonts, and custom appearances."
---
diff --git a/ui-kit/ios/components-overview.mdx b/ui-kit/ios/components-overview.mdx
index e58a7fc7f..06fa3c5b1 100644
--- a/ui-kit/ios/components-overview.mdx
+++ b/ui-kit/ios/components-overview.mdx
@@ -1,7 +1,7 @@
---
title: "Components Overview"
sidebarTitle: "Overview"
-description: "Understanding CometChat iOS UI Kit components - types, actions, events, and customization"
+description: "Understand CometChat iOS UI Kit component types, base components, composite components, actions, events, filters, and customization."
---
diff --git a/ui-kit/ios/conversations.mdx b/ui-kit/ios/conversations.mdx
index dc7e20b8e..7e15e8704 100644
--- a/ui-kit/ios/conversations.mdx
+++ b/ui-kit/ios/conversations.mdx
@@ -1,6 +1,6 @@
---
title: "Conversations"
-description: "Display and manage all chat conversations for the logged-in user"
+description: "Display CometChat iOS UI Kit conversations with last messages, unread counts, typing indicators, presence, filters, and item callbacks."
---
The `CometChatConversations` component displays a list of all conversations (one-on-one and group chats) for the currently logged-in user. It shows the last message, unread count, typing indicators, and user presence in real-time.
diff --git a/ui-kit/ios/core-features.mdx b/ui-kit/ios/core-features.mdx
index 768c974ec..4e3aee7e6 100644
--- a/ui-kit/ios/core-features.mdx
+++ b/ui-kit/ios/core-features.mdx
@@ -1,6 +1,6 @@
---
title: "Core Features"
-description: "Essential chat features built into CometChat UI Kit for iOS"
+description: "Review CometChat iOS UI Kit core features for messaging, media sharing, receipts, typing indicators, presence, reactions, threads, and search."
---
diff --git a/ui-kit/ios/extensions.mdx b/ui-kit/ios/extensions.mdx
index 399619aa3..5ddc144d2 100644
--- a/ui-kit/ios/extensions.mdx
+++ b/ui-kit/ios/extensions.mdx
@@ -1,6 +1,6 @@
---
title: "Extensions"
-description: "Enable powerful chat features with zero code using CometChat extensions"
+description: "Enable CometChat iOS UI Kit extensions for stickers, polls, collaboration tools, reactions, moderation, smart replies, and link previews."
---
| Field | Value |
diff --git a/ui-kit/ios/getting-started.mdx b/ui-kit/ios/getting-started.mdx
index d5a2ce9be..5c2a909f0 100644
--- a/ui-kit/ios/getting-started.mdx
+++ b/ui-kit/ios/getting-started.mdx
@@ -1,7 +1,7 @@
---
title: "iOS Integration"
sidebarTitle: "Integration"
-description: "Add CometChat to an iOS app in 5 steps: create project, install, init, login, render."
+description: "Integrate CometChat iOS UI Kit with project setup, package installation, initialization, login, rendering, permissions, and optional calling."
---
diff --git a/ui-kit/ios/group-members.mdx b/ui-kit/ios/group-members.mdx
index b5582bc68..cc5e702f5 100644
--- a/ui-kit/ios/group-members.mdx
+++ b/ui-kit/ios/group-members.mdx
@@ -1,6 +1,6 @@
---
title: "Group Members"
-description: "Display and manage members of a CometChat group"
+description: "Display and manage CometChat iOS UI Kit group members with roles, search, kick, ban, scope changes, and permission-based actions."
---
The `CometChatGroupMembers` component displays all members of a group with their roles (owner, admin, moderator, participant). It supports member management actions like kick, ban, and role changes based on the logged-in user's permissions.
diff --git a/ui-kit/ios/groups.mdx b/ui-kit/ios/groups.mdx
index 457e22daf..8be5fe225 100644
--- a/ui-kit/ios/groups.mdx
+++ b/ui-kit/ios/groups.mdx
@@ -1,6 +1,6 @@
---
title: "Groups"
-description: "Display and manage a list of groups with search functionality"
+description: "Display CometChat iOS UI Kit groups with avatars, member counts, group type indicators, search, filtering, join, and conversation actions."
---
The `CometChatGroups` component displays a searchable list of all available groups. It shows group names, avatars, member counts, and group type indicators (public/private/password-protected). Users can browse, join, and interact with group conversations.
diff --git a/ui-kit/ios/guide-ai-agent.mdx b/ui-kit/ios/guide-ai-agent.mdx
index 5f27b32ef..0177f39fd 100644
--- a/ui-kit/ios/guide-ai-agent.mdx
+++ b/ui-kit/ios/guide-ai-agent.mdx
@@ -1,11 +1,15 @@
---
title: "AI Agent Integration"
sidebarTitle: "AI Agent Integration"
-description: "Add AI-powered chat assistants to your iOS app"
+description: "Add CometChat iOS UI Kit AI agents with chat history, contextual responses, streaming messages, suggested prompts, and custom styling."
---
Integrate AI agents into your iOS app to provide intelligent conversational experiences with chat history, contextual responses, and seamless handoffs.
+
+**1:1 conversations only.** AI Agents currently respond only in one-on-one conversations between an end user and the agent user. They do not respond to messages sent in groups, even if the agent user is added as a member or owner. Group support is on the roadmap — share your use case on [feedback.cometchat.com](https://feedback.cometchat.com).
+
+
diff --git a/ui-kit/ios/guide-block-unblock-user.mdx b/ui-kit/ios/guide-block-unblock-user.mdx
index 1f684f018..191856c88 100644
--- a/ui-kit/ios/guide-block-unblock-user.mdx
+++ b/ui-kit/ios/guide-block-unblock-user.mdx
@@ -1,7 +1,7 @@
---
title: "Block/Unblock User"
sidebarTitle: "Block/Unblock User"
-description: "Implement user blocking and profile management in your iOS app"
+description: "Build CometChat iOS UI Kit user profile actions for messaging, audio/video calls, block and unblock, and delete conversation flows."
---
Build a user profile screen with avatar display, messaging, audio/video calls, and block/unblock functionality using CometChat UIKit.
diff --git a/ui-kit/ios/guide-call-log-details.mdx b/ui-kit/ios/guide-call-log-details.mdx
index b0ce1dc4f..2a6563431 100644
--- a/ui-kit/ios/guide-call-log-details.mdx
+++ b/ui-kit/ios/guide-call-log-details.mdx
@@ -1,7 +1,7 @@
---
title: "Call Log Details"
sidebarTitle: "Call Log Details"
-description: "Display call history, participants, and recordings in your iOS app"
+description: "Show CometChat iOS UI Kit call log details with call history, participants, recordings, tabbed views, and Calls SDK integration."
---
Learn how to integrate and customize CometChat's call log components to display call history, participant details, and call recordings in your iOS app.
diff --git a/ui-kit/ios/guide-group-chat.mdx b/ui-kit/ios/guide-group-chat.mdx
index a9bfc3287..71f857fcd 100644
--- a/ui-kit/ios/guide-group-chat.mdx
+++ b/ui-kit/ios/guide-group-chat.mdx
@@ -1,7 +1,7 @@
---
title: "Group Details"
sidebarTitle: "Group Details"
-description: "Display and manage group information in your iOS app"
+description: "Display CometChat iOS UI Kit group details with group info, join, leave, delete, member management, and real-time group events."
---
Provide a detailed view for CometChat groups in your iOS app, enabling users to see group info, join/leave, manage members, and respond to real-time group events.
diff --git a/ui-kit/ios/guide-group-ownership.mdx b/ui-kit/ios/guide-group-ownership.mdx
index 12e88eb40..93ece0232 100644
--- a/ui-kit/ios/guide-group-ownership.mdx
+++ b/ui-kit/ios/guide-group-ownership.mdx
@@ -1,7 +1,7 @@
---
title: "Transfer Group Ownership"
sidebarTitle: "Transfer Group Ownership"
-description: "Enable group owners to transfer ownership to another member"
+description: "Transfer CometChat iOS UI Kit group ownership to another member with member selection, ownership API calls, and post-transfer flow."
---
Enable the current group owner to delegate ownership to another member using CometChat's UIKit for iOS.
diff --git a/ui-kit/ios/guide-message-privately.mdx b/ui-kit/ios/guide-message-privately.mdx
index 0a06146e2..c9aec2254 100644
--- a/ui-kit/ios/guide-message-privately.mdx
+++ b/ui-kit/ios/guide-message-privately.mdx
@@ -1,7 +1,7 @@
---
title: "Message Privately"
sidebarTitle: "Message Privately"
-description: "Start private one-on-one chats from group conversations"
+description: "Start private one-to-one chats from CometChat iOS UI Kit group conversations with message options, user lookup, and chat navigation."
---
Enable users to start a private one-on-one chat with a group member directly from a group chat screen using CometChat's UIKit for iOS.
diff --git a/ui-kit/ios/guide-new-chat.mdx b/ui-kit/ios/guide-new-chat.mdx
index 78f4abf90..a70c34446 100644
--- a/ui-kit/ios/guide-new-chat.mdx
+++ b/ui-kit/ios/guide-new-chat.mdx
@@ -1,7 +1,7 @@
---
title: "Create Conversation"
sidebarTitle: "Create Conversation"
-description: "Enable users to start new 1:1 or group chats"
+description: "Create new one-to-one or group conversations in CometChat iOS UI Kit with user and group discovery, search, tabs, and navigation."
---
Enable users to start new 1:1 or group chats in your iOS app using CometChat's UIKit for iOS by integrating the `CreateConversationVC` screen.
diff --git a/ui-kit/ios/guide-overview.mdx b/ui-kit/ios/guide-overview.mdx
index 3b8cc90aa..0a203929d 100644
--- a/ui-kit/ios/guide-overview.mdx
+++ b/ui-kit/ios/guide-overview.mdx
@@ -1,7 +1,7 @@
---
title: "Overview"
sidebarTitle: "Overview"
-description: "Index of feature guides for iOS UI Kit"
+description: "Browse iOS UI Kit feature guides for AI agents, user blocking, call details, group management, private messages, new chats, and threads."
---
This page indexes focused, task-oriented feature guides for the iOS UI Kit. Each guide shows how to implement a specific capability end-to-end using UIKit components.
@@ -37,7 +37,7 @@ Use these guides after completing [Getting Started](/ui-kit/ios/getting-started)
- [Components Overview](/ui-kit/ios/components-overview) - All available UI components
- [Core Features](/ui-kit/ios/core-features) - Messaging, reactions, threads, and more
-Need another guide? Request one via the [Developer Community](http://community.cometchat.com/) or Support.
+Need another guide? Request one via the [Developer Community](https://community.cometchat.com/) or Support.
---
diff --git a/ui-kit/ios/guide-threaded-messages.mdx b/ui-kit/ios/guide-threaded-messages.mdx
index c8412948d..c81acbd75 100644
--- a/ui-kit/ios/guide-threaded-messages.mdx
+++ b/ui-kit/ios/guide-threaded-messages.mdx
@@ -1,7 +1,7 @@
---
title: "Threaded Messages"
sidebarTitle: "Threaded Messages"
-description: "Add threaded reply views to your iOS chat app"
+description: "Add threaded messages in CometChat iOS UI Kit with parent message context, reply views, message composers, and thread navigation."
---
Enhance your iOS chat app with threaded messaging by integrating CometChat's UIKit for iOS, allowing users to reply to specific messages within a focused thread view.
diff --git a/ui-kit/ios/incoming-call.mdx b/ui-kit/ios/incoming-call.mdx
index 62e8b78ae..94e33e6b9 100644
--- a/ui-kit/ios/incoming-call.mdx
+++ b/ui-kit/ios/incoming-call.mdx
@@ -1,6 +1,6 @@
---
title: "Incoming Call"
-description: "Display and handle incoming voice and video calls"
+description: "Handle incoming CometChat iOS UI Kit voice and video calls with caller details, accept, reject, custom sounds, and view slots."
---
The `CometChatIncomingCall` component serves as a visual representation when the user receives an incoming call, such as a voice call or video call, providing options to answer or decline the call.
diff --git a/ui-kit/ios/ios-conversation.mdx b/ui-kit/ios/ios-conversation.mdx
index dcad85109..5fd66d9fa 100644
--- a/ui-kit/ios/ios-conversation.mdx
+++ b/ui-kit/ios/ios-conversation.mdx
@@ -1,7 +1,7 @@
---
title: "Conversation List + Message View"
sidebarTitle: "Conversation List + Message View"
-description: "Build a two-panel conversation list + message view layout in iOS with CometChat UI Kit."
+description: "Build CometChat iOS UI Kit conversation list and message view layouts with push navigation, headers, message lists, and composers."
---
diff --git a/ui-kit/ios/ios-one-to-one-chat.mdx b/ui-kit/ios/ios-one-to-one-chat.mdx
index 2cdb40fc4..89543e386 100644
--- a/ui-kit/ios/ios-one-to-one-chat.mdx
+++ b/ui-kit/ios/ios-one-to-one-chat.mdx
@@ -1,7 +1,7 @@
---
title: "One-to-One / Group Chat"
sidebarTitle: "One-to-One / Group Chat"
-description: "Build a focused one-to-one or group chat experience in iOS with CometChat UI Kit."
+description: "Build focused CometChat iOS UI Kit one-to-one or group chat screens with headers, message lists, composers, and direct chat navigation."
---
diff --git a/ui-kit/ios/ios-tab-based-chat.mdx b/ui-kit/ios/ios-tab-based-chat.mdx
index e49231e10..21985b85b 100644
--- a/ui-kit/ios/ios-tab-based-chat.mdx
+++ b/ui-kit/ios/ios-tab-based-chat.mdx
@@ -1,7 +1,7 @@
---
title: "Tab-Based Chat"
sidebarTitle: "Tab-Based Chat"
-description: "Build a tab-based messaging UI with chats, calls, users, and groups in iOS with CometChat UI Kit."
+description: "Build CometChat iOS UI Kit tab-based chat with Chats, Calls, Users, and Groups tabs, message views, and UITabBarController navigation."
---
diff --git a/ui-kit/ios/mentions-formatter-guide.mdx b/ui-kit/ios/mentions-formatter-guide.mdx
index e7bbe2056..800c82987 100644
--- a/ui-kit/ios/mentions-formatter-guide.mdx
+++ b/ui-kit/ios/mentions-formatter-guide.mdx
@@ -1,7 +1,7 @@
---
title: "Mentions Formatter"
sidebarTitle: "Mentions Formatter"
-description: "Format and customize @mentions within text messages using CometChat UI Kit for iOS"
+description: "Format @mentions in CometChat iOS UI Kit messages with custom styles, mention suggestions, group member mentions, and tap handling."
---
## Overview
diff --git a/ui-kit/ios/message-bubble-styling.mdx b/ui-kit/ios/message-bubble-styling.mdx
index 3d7e0fa88..c128c7d65 100644
--- a/ui-kit/ios/message-bubble-styling.mdx
+++ b/ui-kit/ios/message-bubble-styling.mdx
@@ -1,7 +1,7 @@
---
title: "Message Bubble Styling"
sidebarTitle: "Message Bubble Styling"
-description: "Customize the appearance of incoming and outgoing message bubbles in CometChat UI Kit for iOS"
+description: "Customize CometChat iOS UI Kit message bubbles with incoming and outgoing styles, borders, corner radius, and per-message-type styling."
---
diff --git a/ui-kit/ios/message-composer.mdx b/ui-kit/ios/message-composer.mdx
index 524bd6220..9393cc5db 100644
--- a/ui-kit/ios/message-composer.mdx
+++ b/ui-kit/ios/message-composer.mdx
@@ -1,6 +1,6 @@
---
title: "Message Composer"
-description: "Enable users to write and send text, media, and custom messages"
+description: "Configure CometChat iOS UI Kit Message Composer for text, media, attachments, mentions, voice notes, custom messages, and threads."
---
diff --git a/ui-kit/ios/message-header.mdx b/ui-kit/ios/message-header.mdx
index 76e25cdac..fa64f531b 100644
--- a/ui-kit/ios/message-header.mdx
+++ b/ui-kit/ios/message-header.mdx
@@ -1,6 +1,6 @@
---
title: "Message Header"
-description: "Display user or group details with typing indicators and navigation controls"
+description: "Configure CometChat iOS UI Kit Message Header with user or group details, avatar, status, typing indicators, navigation, and call buttons."
---
The `CometChatMessageHeader` component displays user or group details in the toolbar including avatar, name, status, and typing indicators. It also provides navigation controls and call buttons.
@@ -569,7 +569,7 @@ messageHeader.set(trailView: { user, group in
```
` |
+| ` ```lang\ncode\n``` ` | `` |
+| `> blockquote` | `` |
+| `1. item` | `- ` |
+| `- item` or `* item` | `
- ` |
+| Nested lists (up to 3 levels) | Nested `
` / `` |
+| `[text](url)` | `` |
+| `` | Clickable `![]()
` |
+| `---` | `
` |
+| Two trailing spaces or `\n\n` | `
` / paragraph |
+| GFM tables `\| col \| col \|` | `` |
+
+## Basic Usage
+
+```typescript
+import { Component } from '@angular/core';
+import { CometChatMarkdownRenderer } from '@cometchat/chat-uikit-angular';
+
+@Component({
+ selector: 'app-markdown-demo',
+ standalone: true,
+ imports: [CometChatMarkdownRenderer],
+ template: `
+ ();
+
+ private parser = new MyMarkdownParser();
+ private sanitizer = inject(DomSanitizer);
+
+ html = computed(() => {
+ const nodes = this.parser.parse(this.text());
+ // Walk nodes and produce HTML string, then sanitize
+ const raw = nodesToHtml(nodes); // your own walker
+ return this.sanitizer.bypassSecurityTrustHtml(raw);
+ });
+}
+```
+
+## BEM Class Reference
+
+All rendered elements carry BEM class names prefixed with `cometchat-markdown-renderer`. Use these to apply custom styles:
+
+| Element | Class |
+|---------|-------|
+| Headings | `cometchat-markdown-renderer__heading`, `cometchat-markdown-renderer__heading--1` … `--6` |
+| Paragraph | `cometchat-markdown-renderer__paragraph` |
+| Bold | `cometchat-markdown-renderer__bold` |
+| Italic | `cometchat-markdown-renderer__italic` |
+| Strikethrough | `cometchat-markdown-renderer__strikethrough` |
+| Inline code | `cometchat-markdown-renderer__inline-code` |
+| Code block wrapper | `cometchat-markdown-renderer__code-block` |
+| Copy button | `cometchat-markdown-renderer__code-copy-btn` |
+| Blockquote | `cometchat-markdown-renderer__blockquote` |
+| Ordered list | `cometchat-markdown-renderer__ordered-list` |
+| Unordered list | `cometchat-markdown-renderer__unordered-list` |
+| List item | `cometchat-markdown-renderer__list-item` |
+| Link | `cometchat-markdown-renderer__link` |
+| Image | `cometchat-markdown-renderer__image` |
+| Horizontal rule | `cometchat-markdown-renderer__hr` |
+| Table | `cometchat-markdown-renderer__table` |
+| Table head | `cometchat-markdown-renderer__table-head` |
+| Table header cell | `cometchat-markdown-renderer__table-header-cell` |
+| Table body | `cometchat-markdown-renderer__table-body` |
+| Table row | `cometchat-markdown-renderer__table-row` |
+| Table cell | `cometchat-markdown-renderer__table-cell` |
+
+### Example: Custom Code Block Styling
+
+```css
+cometchat-markdown-renderer .cometchat-markdown-renderer__code-block {
+ background: var(--cometchat-background-color-03);
+ border-radius: var(--cometchat-radius-2);
+ padding: var(--cometchat-spacing-3);
+ position: relative;
+}
+
+cometchat-markdown-renderer .cometchat-markdown-renderer__code-copy-btn {
+ position: absolute;
+ top: var(--cometchat-spacing-2);
+ right: var(--cometchat-spacing-2);
+ background: var(--cometchat-primary-color);
+ color: #fff;
+ border: none;
+ border-radius: var(--cometchat-radius-1);
+ padding: 2px 8px;
+ cursor: pointer;
+ font-size: 12px;
+}
+```
+
+## Localization Keys
+
+| Key | Default (en-us) |
+|-----|-----------------|
+| `ai_assistant_chat_code_copied` | "Copied!" |
+
+Override via `CometChatLocalize.updateKeys()`:
+
+```typescript
+import { CometChatLocalize } from '@cometchat/chat-uikit-angular';
+
+CometChatLocalize.updateKeys('en', {
+ ai_assistant_chat_code_copied: 'Copied to clipboard!',
+});
+```
diff --git a/ui-kit/angular/v5/components/cometchat-message-bubble.mdx b/ui-kit/angular/components/cometchat-message-bubble.mdx
similarity index 98%
rename from ui-kit/angular/v5/components/cometchat-message-bubble.mdx
rename to ui-kit/angular/components/cometchat-message-bubble.mdx
index a058e3c63..34f662d9d 100644
--- a/ui-kit/angular/v5/components/cometchat-message-bubble.mdx
+++ b/ui-kit/angular/components/cometchat-message-bubble.mdx
@@ -1297,7 +1297,7 @@ export class ThreadPanelComponent implements AfterViewInit {
}
```
-See [CometChatMessageList — Multiple Message Lists with Different Configurations](/ui-kit/angular/v5/components/cometchat-message-list#multiple-message-lists-with-different-configurations) for a complete example.
+See [CometChatMessageList — Multiple Message Lists with Different Configurations](/ui-kit/angular/components/cometchat-message-list#multiple-message-lists-with-different-configurations) for a complete example.
### BubblePart Type
@@ -1581,11 +1581,11 @@ The component provides meaningful announcements for:
## Related Components
-- [CometChatMessageList](/ui-kit/angular/v5/components/cometchat-message-list) - Parent component that renders message bubbles
-- [CometChatTextBubble](/ui-kit/angular/v5/components/cometchat-text-bubble) - Text message content component
-- [CometChatImageBubble](/ui-kit/angular/v5/components/cometchat-image-bubble) - Image message content component
-- [CometChatVideoBubble](/ui-kit/angular/v5/components/cometchat-video-bubble) - Video message content component
-- [CometChatAudioBubble](/ui-kit/angular/v5/components/cometchat-audio-bubble) - Audio message content component
-- [CometChatFileBubble](/ui-kit/angular/v5/components/cometchat-file-bubble) - File message content component
-- [CometChatMessagePreview](/ui-kit/angular/v5/components/cometchat-message-list) - Reply preview component
-- [CometChatThreadHeader](/ui-kit/angular/v5/components/cometchat-thread-header) - Thread header component
+- [CometChatMessageList](/ui-kit/angular/components/cometchat-message-list) - Parent component that renders message bubbles
+- [CometChatTextBubble](/ui-kit/angular/components/cometchat-text-bubble) - Text message content component
+- [CometChatImageBubble](/ui-kit/angular/components/cometchat-image-bubble) - Image message content component
+- [CometChatVideoBubble](/ui-kit/angular/components/cometchat-video-bubble) - Video message content component
+- [CometChatAudioBubble](/ui-kit/angular/components/cometchat-audio-bubble) - Audio message content component
+- [CometChatFileBubble](/ui-kit/angular/components/cometchat-file-bubble) - File message content component
+- [CometChatMessagePreview](/ui-kit/angular/components/cometchat-message-list) - Reply preview component
+- [CometChatThreadHeader](/ui-kit/angular/components/cometchat-thread-header) - Thread header component
diff --git a/ui-kit/angular/v5/components/cometchat-message-composer.mdx b/ui-kit/angular/components/cometchat-message-composer.mdx
similarity index 99%
rename from ui-kit/angular/v5/components/cometchat-message-composer.mdx
rename to ui-kit/angular/components/cometchat-message-composer.mdx
index 37acf10ef..bd2c4197b 100644
--- a/ui-kit/angular/v5/components/cometchat-message-composer.mdx
+++ b/ui-kit/angular/components/cometchat-message-composer.mdx
@@ -1295,7 +1295,7 @@ export class ErrorHandlingComponent {
```
-For troubleshooting tips, see the [Troubleshooting Guide](/ui-kit/angular/v5/troubleshooting#cometchatmessagecomposer).
+For troubleshooting tips, see the [Troubleshooting Guide](/ui-kit/angular/troubleshooting#cometchatmessagecomposer).
### Troubleshooting
@@ -1331,4 +1331,4 @@ import { EnterKeyBehavior } from '@cometchat/chat-uikit-angular';
- [CometChatMessageList](./cometchat-message-list.mdx) - Display messages in a conversation
- [CometChatConversations](./cometchat-conversations.mdx) - List of conversations
- [RichTextEditorService API](../api-reference/rich-text-editor-service.mdx) - Rich text editor service documentation
-- [Rich Text Formatting Guide](/ui-kit/angular/v5/guides/custom-text-formatter) - Comprehensive guide to rich text features
+- [Rich Text Formatting Guide](/ui-kit/angular/guides/custom-text-formatter) - Comprehensive guide to rich text features
diff --git a/ui-kit/angular/v5/components/cometchat-message-header.mdx b/ui-kit/angular/components/cometchat-message-header.mdx
similarity index 99%
rename from ui-kit/angular/v5/components/cometchat-message-header.mdx
rename to ui-kit/angular/components/cometchat-message-header.mdx
index ddc97fc9a..609d5bff2 100644
--- a/ui-kit/angular/v5/components/cometchat-message-header.mdx
+++ b/ui-kit/angular/components/cometchat-message-header.mdx
@@ -138,7 +138,7 @@ export class GroupChatComponent {
| `hideVideoCallButton` | `boolean` | `true` | Hide the video call button. Defaults to `true` (hidden). When calling is enabled via `UIKitSettingsBuilder.setCallingEnabled(true)`, the resolved default becomes `false` (visible). Set to `true` explicitly to hide even when calling is enabled. |
| `showSearchOption` | `boolean` | `false` | Show the search option in the header |
| `showConversationSummaryButton` | `boolean` | `false` | Show the AI conversation summary button |
-| `callSettingsBuilder` | `CallSettingsBuilder` | `undefined` | Custom `CallSettingsBuilder` forwarded to the call buttons and ongoing call screen. Follows the three-tier priority: @Input > [GlobalConfig](/ui-kit/angular/v5/customization/global-config) > default. |
+| `callSettingsBuilder` | `CallSettingsBuilder` | `undefined` | Custom `CallSettingsBuilder` forwarded to the call buttons and ongoing call screen. Follows the three-tier priority: @Input > [GlobalConfig](/ui-kit/angular/customization/global-config) > default. |
### AI Configuration Properties
@@ -363,7 +363,7 @@ export class CustomCallHeaderComponent implements OnInit {
```
- You can also set `callSettingsBuilder` globally via [GlobalConfig](/ui-kit/angular/v5/customization/global-config) so all call components use the same settings without passing the input to each one.
+ You can also set `callSettingsBuilder` globally via [GlobalConfig](/ui-kit/angular/customization/global-config) so all call components use the same settings without passing the input to each one.
### Custom Last Active Date Format
@@ -864,7 +864,7 @@ handleError(error: CometChat.CometChatException): void {
```
-For troubleshooting tips, see the [Troubleshooting Guide](/ui-kit/angular/v5/troubleshooting#cometchatmessageheader).
+For troubleshooting tips, see the [Troubleshooting Guide](/ui-kit/angular/troubleshooting#cometchatmessageheader).
diff --git a/ui-kit/angular/v5/components/cometchat-message-information.mdx b/ui-kit/angular/components/cometchat-message-information.mdx
similarity index 93%
rename from ui-kit/angular/v5/components/cometchat-message-information.mdx
rename to ui-kit/angular/components/cometchat-message-information.mdx
index 210276b86..e95952cc4 100644
--- a/ui-kit/angular/v5/components/cometchat-message-information.mdx
+++ b/ui-kit/angular/components/cometchat-message-information.mdx
@@ -193,7 +193,7 @@ The component activates a focus trap on initialization, keeping keyboard focus w
## Related Components
-- [CometChatMessageList](/ui-kit/angular/v5/components/cometchat-message-list) - Parent component that opens the message information panel
-- [CometChatMessageBubble](/ui-kit/angular/v5/components/cometchat-message-bubble) - Used internally to render the message preview
-- [CometChatAvatar](/ui-kit/angular/v5/components/cometchat-users) - Used to display user avatars in receipt items
-- [CometChatDate](/ui-kit/angular/v5/components/cometchat-message-list) - Used to format receipt timestamps
+- [CometChatMessageList](/ui-kit/angular/components/cometchat-message-list) - Parent component that opens the message information panel
+- [CometChatMessageBubble](/ui-kit/angular/components/cometchat-message-bubble) - Used internally to render the message preview
+- [CometChatAvatar](/ui-kit/angular/components/cometchat-users) - Used to display user avatars in receipt items
+- [CometChatDate](/ui-kit/angular/components/cometchat-message-list) - Used to format receipt timestamps
diff --git a/ui-kit/angular/v5/components/cometchat-message-list.mdx b/ui-kit/angular/components/cometchat-message-list.mdx
similarity index 99%
rename from ui-kit/angular/v5/components/cometchat-message-list.mdx
rename to ui-kit/angular/components/cometchat-message-list.mdx
index ca42f0872..262b6c0dd 100644
--- a/ui-kit/angular/v5/components/cometchat-message-list.mdx
+++ b/ui-kit/angular/components/cometchat-message-list.mdx
@@ -4545,7 +4545,7 @@ Avoid premature optimization. Focus on the most impactful optimizations first (p
-For troubleshooting tips, see the [Troubleshooting Guide](/ui-kit/angular/v5/troubleshooting#cometchatmessagelist).
+For troubleshooting tips, see the [Troubleshooting Guide](/ui-kit/angular/troubleshooting#cometchatmessagelist).
diff --git a/ui-kit/angular/v5/components/cometchat-outgoing-call.mdx b/ui-kit/angular/components/cometchat-outgoing-call.mdx
similarity index 97%
rename from ui-kit/angular/v5/components/cometchat-outgoing-call.mdx
rename to ui-kit/angular/components/cometchat-outgoing-call.mdx
index 23c600902..73510c3b6 100644
--- a/ui-kit/angular/v5/components/cometchat-outgoing-call.mdx
+++ b/ui-kit/angular/components/cometchat-outgoing-call.mdx
@@ -138,5 +138,5 @@ cometchat-outgoing-call {
## Related Components
- [CometChatCallButtons](./cometchat-call-buttons.mdx) — Parent component that triggers the outgoing call overlay
-- [CometChatOngoingCall](/ui-kit/angular/v5/components/cometchat-outgoing-call) — Displayed after the call is accepted
+- [CometChatOngoingCall](/ui-kit/angular/components/cometchat-outgoing-call) — Displayed after the call is accepted
- [CometChatIncomingCall](./cometchat-incoming-call.mdx) — Handles incoming call notifications
diff --git a/ui-kit/angular/v5/components/cometchat-poll-bubble.mdx b/ui-kit/angular/components/cometchat-poll-bubble.mdx
similarity index 100%
rename from ui-kit/angular/v5/components/cometchat-poll-bubble.mdx
rename to ui-kit/angular/components/cometchat-poll-bubble.mdx
diff --git a/ui-kit/angular/v5/components/cometchat-reaction-info.mdx b/ui-kit/angular/components/cometchat-reaction-info.mdx
similarity index 92%
rename from ui-kit/angular/v5/components/cometchat-reaction-info.mdx
rename to ui-kit/angular/components/cometchat-reaction-info.mdx
index 4896306cd..32bb21e0b 100644
--- a/ui-kit/angular/v5/components/cometchat-reaction-info.mdx
+++ b/ui-kit/angular/components/cometchat-reaction-info.mdx
@@ -157,6 +157,6 @@ The Reaction Info component is a passive tooltip — keyboard interaction is han
## Related Components
-- [CometChatReactions](/ui-kit/angular/v5/components/cometchat-reactions) - Parent component that hosts reaction pills with hover tooltips
-- [CometChatReactionList](/ui-kit/angular/v5/components/cometchat-reaction-list) - Full list view of all users who reacted
-- [CometChatPopover](/ui-kit/angular/v5/components/cometchat-reactions) - Popover used to display the reaction info tooltip
+- [CometChatReactions](/ui-kit/angular/components/cometchat-reactions) - Parent component that hosts reaction pills with hover tooltips
+- [CometChatReactionList](/ui-kit/angular/components/cometchat-reaction-list) - Full list view of all users who reacted
+- [CometChatPopover](/ui-kit/angular/components/cometchat-reactions) - Popover used to display the reaction info tooltip
diff --git a/ui-kit/angular/v5/components/cometchat-reaction-list.mdx b/ui-kit/angular/components/cometchat-reaction-list.mdx
similarity index 96%
rename from ui-kit/angular/v5/components/cometchat-reaction-list.mdx
rename to ui-kit/angular/components/cometchat-reaction-list.mdx
index 7f9c77b11..8d8d5aa10 100644
--- a/ui-kit/angular/v5/components/cometchat-reaction-list.mdx
+++ b/ui-kit/angular/components/cometchat-reaction-list.mdx
@@ -430,7 +430,7 @@ The component provides descriptive labels for screen readers:
## Related Components
-- [CometChatMessageList](/ui-kit/angular/v5/components/cometchat-message-list) - Parent component that displays messages with reactions
-- [CometChatMessageBubble](/ui-kit/angular/v5/components/cometchat-message-bubble) - Message container with reaction display
-- [CometChatEmojiKeyboard](/ui-kit/angular/v5/components/cometchat-stickers-keyboard) - Emoji picker for adding reactions
-- [CometChatPopover](/ui-kit/angular/v5/components/cometchat-reactions) - Popover component for displaying reaction list
+- [CometChatMessageList](/ui-kit/angular/components/cometchat-message-list) - Parent component that displays messages with reactions
+- [CometChatMessageBubble](/ui-kit/angular/components/cometchat-message-bubble) - Message container with reaction display
+- [CometChatEmojiKeyboard](/ui-kit/angular/components/cometchat-stickers-keyboard) - Emoji picker for adding reactions
+- [CometChatPopover](/ui-kit/angular/components/cometchat-reactions) - Popover component for displaying reaction list
diff --git a/ui-kit/angular/v5/components/cometchat-reactions.mdx b/ui-kit/angular/components/cometchat-reactions.mdx
similarity index 93%
rename from ui-kit/angular/v5/components/cometchat-reactions.mdx
rename to ui-kit/angular/components/cometchat-reactions.mdx
index b5179f4eb..1a7aa5a9b 100644
--- a/ui-kit/angular/v5/components/cometchat-reactions.mdx
+++ b/ui-kit/angular/components/cometchat-reactions.mdx
@@ -215,7 +215,7 @@ The component adapts to light and dark themes through CSS variables:
## Related Components
-- [CometChatReactionList](/ui-kit/angular/v5/components/cometchat-reaction-list) - Displays the full list of users who reacted, used in the overflow popover
-- [CometChatReactionInfo](/ui-kit/angular/v5/components/cometchat-reaction-info) - Tooltip showing who reacted with a specific emoji
-- [CometChatMessageBubble](/ui-kit/angular/v5/components/cometchat-message-bubble) - Parent component that hosts reactions in its footer
-- [CometChatPopover](/ui-kit/angular/v5/components/cometchat-reactions) - Used for the overflow reaction list popover
+- [CometChatReactionList](/ui-kit/angular/components/cometchat-reaction-list) - Displays the full list of users who reacted, used in the overflow popover
+- [CometChatReactionInfo](/ui-kit/angular/components/cometchat-reaction-info) - Tooltip showing who reacted with a specific emoji
+- [CometChatMessageBubble](/ui-kit/angular/components/cometchat-message-bubble) - Parent component that hosts reactions in its footer
+- [CometChatPopover](/ui-kit/angular/components/cometchat-reactions) - Used for the overflow reaction list popover
diff --git a/ui-kit/angular/components/cometchat-search.mdx b/ui-kit/angular/components/cometchat-search.mdx
new file mode 100644
index 000000000..5f96bd4b1
--- /dev/null
+++ b/ui-kit/angular/components/cometchat-search.mdx
@@ -0,0 +1,844 @@
+---
+title: "CometChatSearch"
+description: "A unified Angular search component for cross-entity search across conversations and messages with filter chips, scoped search, and template customization"
+---
+
+## Overview
+
+The CometChatSearch component provides a unified search experience across conversations and messages. It combines a debounced search input, a filter chip bar, and two lazy-loaded result sections (conversations and messages) into a single, cohesive UI.
+
+The component follows a **service-driven architecture**:
+- **SearchConversationsService** handles conversation search queries, pagination, and real-time listener updates
+- **SearchMessagesService** handles message search queries, pagination, and attachment-type filtering
+- **CometChatTemplatesService** provides template resolution with a priority chain: `@Input` → service template → shared template → default
+- **Component @Input properties** allow per-instance overrides for scoping, filtering, and display
+
+### Key Features
+
+- **Cross-Entity Search**: Search across both conversations and messages simultaneously, or scope to one
+- **9 Filter Types**: Audio, Documents, Groups, Photos, Videos, Links, Unread, Conversations, Messages
+- **Scoped Search**: Narrow results to a specific user (`uid`) or group (`guid`)
+- **Debounced Input**: 500ms debounce prevents excessive SDK calls while typing
+- **Lazy-Loaded Sections**: Conversation and message result lists use `@defer` for optimal initial load
+- **Unified State Views**: Single empty/error view when both sections report the same state
+- **Template Customization**: Override any section of conversation or message result items
+- **Real-Time Updates**: Conversation results update with new messages, typing indicators, and user status changes
+- **Filter Chip Logic**: Intelligent mutual exclusivity — content filters (Photos, Videos, etc.) are mutually exclusive with Links; conversation filters (Unread, Groups) can coexist
+
+### Architecture
+
+```
+CometChatSearchComponent (parent)
+├── Search input + filter bar
+├── CometChatSearchConversationsListComponent (@defer)
+│ ├── Uses SearchConversationsService (signal-based state)
+│ └── Renders CometChatConversationItem per result
+└── CometChatSearchMessagesListComponent (@defer)
+ ├── Uses SearchMessagesService (signal-based state)
+ └── Renders message items with type-specific leading/trailing views
+```
+
+
+ **Live Preview** — default search component preview.
+ [Open in Storybook ↗](https://storybook.cometchat.io/angular/?path=/docs/components-cometchatsearch--docs)
+
+
+
+
+## Basic Usage
+
+### Simple Implementation
+
+```typescript expandable
+import { Component } from '@angular/core';
+import { CometChatSearchComponent } from '@cometchat/chat-uikit-angular';
+
+@Component({
+ selector: 'app-search',
+ standalone: true,
+ imports: [CometChatSearchComponent],
+ template: `
+
+
+ `
+})
+export class SearchComponent {
+ onConversationClick(event: any): void {
+ console.log('Conversation:', event.conversation, 'Keyword:', event.searchKeyword);
+ }
+
+ onMessageClick(event: any): void {
+ console.log('Message:', event.message, 'Keyword:', event.searchKeyword);
+ }
+
+ onBack(): void {
+ // Navigate back
+ }
+}
+```
+
+### Scoped Search (Within a User or Group)
+
+```typescript
+
+
+
+
+
+
+
+```
+
+
+ When `uid` or `guid` is set, conversation filters (Unread, Groups, Conversations) are hidden automatically and only message results are shown.
+
+
+### Scoped to One Entity Type
+
+```typescript
+import { CometChatSearchScope } from '@cometchat/chat-uikit-angular';
+
+
+
+
+
+
+
+
+```
+
+
+## Properties
+
+### Configuration Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `searchIn` | `CometChatSearchScope[]` | `[]` (both) | Scopes to search in. Empty array means both Conversations and Messages |
+| `searchFilters` | `CometChatSearchFilter[]` | `[Audio, Documents, Groups, Photos, Videos, Links, Unread]` | Filter chips to display in the filter bar |
+| `initialSearchFilter` | `CometChatSearchFilter` | `undefined` | Filter that should be active by default when the component loads |
+| `defaultSearchText` | `string` | `undefined` | Pre-fill the search input and immediately trigger a search on load |
+| `conversationsRequestBuilder` | `ConversationsRequestBuilder` | `undefined` | Custom request builder for conversation search queries |
+| `messagesRequestBuilder` | `MessagesRequestBuilder` | `undefined` | Custom request builder for message search queries |
+| `conversationOptions` | `(conv: Conversation) => CometChatOption[]` | `undefined` | Function to provide custom context menu options for conversation results |
+| `textFormatters` | `CometChatTextFormatter[]` | `[]` | Custom text formatters for message content display |
+| `messageSentAtDateTimeFormat` | `CalendarObject` | `undefined` | Custom date/time format for message timestamps |
+
+### Display Control Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `hideBackButton` | `boolean` | `false` | Hide the back navigation button in the header |
+| `hideGroupType` | `boolean` | `false` | Hide group type icons (public, private, password) in conversation results |
+| `hideUserStatus` | `boolean` | `false` | Hide user online/offline status indicator in conversation results |
+| `hideReceipts` | `boolean` | `false` | Hide message read receipts (sent, delivered, read) in conversation results |
+
+### Scoping Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `uid` | `string` | `undefined` | Scope search to messages with a specific user. Hides conversation results and conversation filters |
+| `guid` | `string` | `undefined` | Scope search to messages within a specific group. Hides conversation results and conversation filters |
+
+### Template Properties
+
+#### Conversation Result Templates
+
+| Property | Type | Context | Description |
+|----------|------|---------|-------------|
+| `conversationItemView` | `TemplateRef` | `{ $implicit: Conversation }` | Custom template for the entire conversation result item |
+| `conversationLeadingView` | `TemplateRef` | `{ $implicit: Conversation }` | Custom template for the leading section (avatar area) |
+| `conversationTitleView` | `TemplateRef` | `{ $implicit: Conversation }` | Custom template for the title section |
+| `conversationSubtitleView` | `TemplateRef` | `{ $implicit: Conversation }` | Custom template for the subtitle section (last message preview) |
+| `conversationTrailingView` | `TemplateRef` | `{ $implicit: Conversation }` | Custom template for the trailing section (timestamp, badges) |
+
+#### Message Result Templates
+
+| Property | Type | Context | Description |
+|----------|------|---------|-------------|
+| `messageItemView` | `TemplateRef` | `{ $implicit: BaseMessage }` | Custom template for the entire message result item |
+| `messageLeadingView` | `TemplateRef` | `{ $implicit: BaseMessage }` | Custom template for the leading section (type-specific icon) |
+| `messageTitleView` | `TemplateRef` | `{ $implicit: BaseMessage }` | Custom template for the title section (conversation/sender name) |
+| `messageSubtitleView` | `TemplateRef` | `{ $implicit: BaseMessage }` | Custom template for the subtitle section (message content) |
+| `messageTrailingView` | `TemplateRef` | `{ $implicit: BaseMessage }` | Custom template for the trailing section (timestamp, image/video thumbnail) |
+
+#### State View Templates
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `initialView` | `TemplateRef` | Shown before any search is performed (no keyword, no filters) |
+| `loadingView` | `TemplateRef` | Shown while search results are being fetched (shimmer placeholders by default) |
+| `emptyView` | `TemplateRef` | Shown when search returns no results |
+| `errorView` | `TemplateRef` | Shown when a search operation fails |
+
+
+ Template resolution follows a priority chain: `@Input` template → `CometChatTemplatesService` search template → `CometChatTemplatesService` shared template → built-in default.
+
+
+## Events
+
+| Event | Payload Type | Description |
+|-------|-------------|-------------|
+| `backClick` | `void` | Emitted when the back button is clicked |
+| `conversationClick` | `SearchConversationClickEvent` | Emitted when a conversation result is clicked. Payload includes `conversation` and `searchKeyword` |
+| `messageClick` | `SearchMessageClickEvent` | Emitted when a message result is clicked. Payload includes `message` and `searchKeyword` |
+| `searchError` | `CometChat.CometChatException` | Emitted when a search operation fails in either section |
+
+### Event Payload Types
+
+```typescript
+interface SearchConversationClickEvent {
+ conversation: CometChat.Conversation;
+ searchKeyword: string;
+}
+
+interface SearchMessageClickEvent {
+ message: CometChat.BaseMessage;
+ searchKeyword: string;
+}
+```
+
+
+## Filter System
+
+The search component includes a filter chip bar that allows users to narrow results by type. Filters are organized into two categories:
+
+### Conversation Filters
+
+These filters affect the conversation results section:
+
+| Filter | Enum Value | Behavior |
+|--------|-----------|----------|
+| Unread | `CometChatSearchFilter.Unread` | Shows only conversations with unread messages |
+| Groups | `CometChatSearchFilter.Groups` | Shows only group conversations |
+| Conversations | `CometChatSearchFilter.Conversations` | Shows all conversations (explicit scope) |
+
+### Message Filters
+
+These filters affect the message results section:
+
+| Filter | Enum Value | Behavior |
+|--------|-----------|----------|
+| Photos | `CometChatSearchFilter.Photos` | Shows only image messages |
+| Videos | `CometChatSearchFilter.Videos` | Shows only video messages |
+| Documents | `CometChatSearchFilter.Documents` | Shows only file/document messages |
+| Audio | `CometChatSearchFilter.Audio` | Shows only audio messages |
+| Links | `CometChatSearchFilter.Links` | Shows only messages containing links |
+| Messages | `CometChatSearchFilter.Messages` | Shows all message types (explicit scope) |
+
+### Filter Behavior Rules
+
+- When a conversation filter is active, only the conversations section renders
+- When a message filter is active, only the messages section renders
+- Content filters (Photos, Videos, Documents, Audio) are mutually exclusive with Links
+- Multiple conversation filters can coexist (e.g., Unread + Groups)
+- When no filters are active and a keyword is entered, both sections render
+- When `uid` or `guid` is set, conversation filters are hidden automatically
+
+### Limiting Available Filters
+
+```typescript
+import { CometChatSearchFilter } from '@cometchat/chat-uikit-angular';
+
+
+
+
+```
+
+### Pre-Selecting a Filter
+
+```typescript
+
+
+```
+
+## Unified State Management
+
+When both conversation and message sections are active, the component coordinates their empty/error states to avoid duplicate views:
+
+| Conversations State | Messages State | Result |
+|-------------------|---------------|--------|
+| Empty | Empty | Single unified empty view (no section headers) |
+| Empty | Loaded | Conversations section hidden entirely; messages shown normally |
+| Loaded | Empty | Messages section hidden entirely; conversations shown normally |
+| Error | Error | Single unified error view (no section headers) |
+| Error | Loaded | Conversations shows error with header; messages shown normally |
+| Loaded | Error | Conversations shown normally; messages shows error with header |
+
+When only one scope is active (via `searchIn`, `uid`, or `guid`), that section handles its own empty/error states independently.
+
+
+## Advanced Usage
+
+### Custom Request Builders
+
+Override the default SDK query builders for conversations and messages:
+
+```typescript expandable
+import { Component, OnInit } from '@angular/core';
+import { CometChat } from '@cometchat/chat-sdk-javascript';
+import { CometChatSearchComponent } from '@cometchat/chat-uikit-angular';
+
+@Component({
+ selector: 'app-custom-search',
+ standalone: true,
+ imports: [CometChatSearchComponent],
+ template: `
+
+
+ `
+})
+export class CustomSearchComponent implements OnInit {
+ convBuilder!: CometChat.ConversationsRequestBuilder;
+ msgBuilder!: CometChat.MessagesRequestBuilder;
+
+ ngOnInit(): void {
+ this.convBuilder = new CometChat.ConversationsRequestBuilder()
+ .setLimit(15)
+ .withTags(true);
+
+ this.msgBuilder = new CometChat.MessagesRequestBuilder()
+ .setLimit(20);
+ }
+
+ onConversationClick(event: any): void {
+ // Navigate to conversation
+ }
+
+ onMessageClick(event: any): void {
+ // Navigate to message in context
+ }
+}
+```
+
+### Custom Context Menu for Conversation Results
+
+```typescript expandable
+import { Component } from '@angular/core';
+import { CometChat } from '@cometchat/chat-sdk-javascript';
+import { CometChatSearchComponent, CometChatOption } from '@cometchat/chat-uikit-angular';
+
+@Component({
+ selector: 'app-search-with-menu',
+ standalone: true,
+ imports: [CometChatSearchComponent],
+ template: `
+
+
+ `
+})
+export class SearchWithMenuComponent {
+ getOptions = (conversation: CometChat.Conversation): CometChatOption[] => {
+ return [
+ {
+ id: 'pin',
+ title: 'Pin Conversation',
+ iconURL: 'assets/pin.svg',
+ onClick: () => console.log('Pin:', conversation)
+ },
+ {
+ id: 'delete',
+ title: 'Delete',
+ iconURL: 'assets/delete.svg',
+ onClick: () => console.log('Delete:', conversation)
+ }
+ ];
+ };
+
+ onConversationClick(event: any): void {
+ console.log('Selected:', event.conversation);
+ }
+}
+```
+
+### Handling Search Results for Navigation
+
+A common pattern is navigating to the matched message within its conversation when a message result is clicked:
+
+```typescript expandable
+import { Component } from '@angular/core';
+import { CometChat } from '@cometchat/chat-sdk-javascript';
+import {
+ CometChatSearchComponent,
+ SearchConversationClickEvent,
+ SearchMessageClickEvent,
+ ChatStateService,
+} from '@cometchat/chat-uikit-angular';
+
+@Component({
+ selector: 'app-search-navigation',
+ standalone: true,
+ imports: [CometChatSearchComponent],
+ template: `
+
+
+ `
+})
+export class SearchNavigationComponent {
+ constructor(private chatState: ChatStateService) {}
+
+ onConversationClick(event: SearchConversationClickEvent): void {
+ const conversationWith = event.conversation.getConversationWith();
+ if (conversationWith instanceof CometChat.User) {
+ this.chatState.setActiveUser(conversationWith);
+ } else if (conversationWith instanceof CometChat.Group) {
+ this.chatState.setActiveGroup(conversationWith as CometChat.Group);
+ }
+ this.closeSearch();
+ }
+
+ onMessageClick(event: SearchMessageClickEvent): void {
+ // Navigate to the message's conversation and scroll to the message
+ const message = event.message;
+ const receiverType = message.getReceiverType();
+
+ if (receiverType === 'user') {
+ this.chatState.setActiveUser(message.getSender());
+ } else {
+ this.chatState.setActiveGroup(message.getReceiver() as CometChat.Group);
+ }
+ // Your app can use message.getId() to scroll to the specific message
+ this.closeSearch();
+ }
+
+ closeSearch(): void {
+ // Navigate back to the main chat view
+ }
+}
+```
+
+## Customization with Templates
+
+### Custom Message Result Item
+
+Override the entire message result row:
+
+```typescript expandable
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CometChat } from '@cometchat/chat-sdk-javascript';
+import { CometChatSearchComponent } from '@cometchat/chat-uikit-angular';
+
+@Component({
+ selector: 'app-custom-message-results',
+ standalone: true,
+ imports: [CommonModule, CometChatSearchComponent],
+ template: `
+
+
+
+
+
+
+ `,
+ styles: [`
+ .custom-message-row {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 12px 16px;
+ cursor: pointer;
+ }
+ .custom-message-row:hover {
+ background: var(--cometchat-background-color-02);
+ }
+ .message-type-badge {
+ background: var(--cometchat-primary-color);
+ color: white;
+ padding: 4px 8px;
+ border-radius: 4px;
+ font-size: 10px;
+ font-weight: 600;
+ }
+ .message-body {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ min-width: 0;
+ }
+ .sender {
+ font: var(--cometchat-font-body-medium);
+ color: var(--cometchat-text-color-primary);
+ }
+ .content {
+ font: var(--cometchat-font-body-regular);
+ color: var(--cometchat-text-color-secondary);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ .time {
+ font: var(--cometchat-font-caption1-regular);
+ color: var(--cometchat-text-color-secondary);
+ }
+ `]
+})
+export class CustomMessageResultsComponent {
+ getPreview(message: CometChat.BaseMessage): string {
+ if (message.getType() === 'text') {
+ return (message as CometChat.TextMessage).getText();
+ }
+ return message.getType();
+ }
+
+ onMessageClick(event: any): void {
+ console.log('Message clicked:', event);
+ }
+}
+```
+
+### Custom Empty and Error States
+
+```typescript expandable
+import { Component } from '@angular/core';
+import { CometChatSearchComponent } from '@cometchat/chat-uikit-angular';
+
+@Component({
+ selector: 'app-custom-states',
+ standalone: true,
+ imports: [CometChatSearchComponent],
+ template: `
+
+
+
+
+
+ Nothing found
+ Try a different keyword or filter
+
+
+
+
+
+
+ Search failed
+ Please check your connection and try again
+
+
+
+ `
+})
+export class CustomStatesComponent {}
+```
+
+### Custom Initial View
+
+Replace the default "Search for messages, conversations..." placeholder:
+
+```typescript
+
+
+
+ Find anything
+ Search across all your conversations and messages
+
+
+
+```
+
+
+## Keyboard Accessibility
+
+CometChatSearch provides keyboard accessibility for the search input, filter bar, and result items.
+
+### Keyboard Shortcuts
+
+| Key | Action | Context |
+|-----|--------|---------|
+| `Tab` | Navigate between search input, filter chips, and result items | Global |
+| `Shift + Tab` | Navigate backwards | Global |
+| `Enter` | Activate focused result item or filter chip | When focused |
+| `Space` | Toggle filter chip or activate result item | When focused |
+| `Escape` | Clear search text and active filters | When search input is focused |
+
+### Accessibility Features
+
+**ARIA Attributes:**
+- `role="search"` on the main container
+- `role="searchbox"` on the search input
+- `role="toolbar"` on the filter bar
+- `aria-pressed` on filter chips indicating active state
+- `aria-label` on back button, search input, and clear button
+- `aria-live="assertive"` on empty and error state regions
+- `role="list"` and `role="listitem"` on result sections
+
+**Screen Reader Support:**
+- Filter chip labels are localized via the translate pipe
+- State changes (empty, error) are announced via `aria-live` regions
+- Back button and clear button have descriptive `aria-label` attributes
+
+**Focus Management:**
+- Search input auto-focuses on component load
+- Clear button restores focus to search input after clearing
+- Result items are focusable with `tabindex="0"` (message results)
+- Visible focus indicators meeting WCAG contrast requirements
+
+## Styling with CSS Variables
+
+The component uses CometChat CSS variables for theming. Key variables:
+
+```css
+cometchat-search {
+ /* Background */
+ --cometchat-background-color-01: #ffffff;
+ --cometchat-background-color-02: #f5f5f5;
+ --cometchat-background-color-03: #eeeeee;
+
+ /* Text */
+ --cometchat-text-color-primary: #141414;
+ --cometchat-text-color-secondary: #727272;
+ --cometchat-text-color-tertiary: #a1a1a1;
+
+ /* Primary color (active filter, icons) */
+ --cometchat-primary-color: #6852D6;
+
+ /* Border */
+ --cometchat-border-color-dark: #dcdcdc;
+ --cometchat-border-color-light: #e8e8e8;
+
+ /* Icons */
+ --cometchat-icon-color-primary: #141414;
+ --cometchat-icon-color-secondary: #a1a1a1;
+
+ /* Typography */
+ --cometchat-font-heading4-regular: 400 16px/24px sans-serif;
+ --cometchat-font-body-regular: 400 14px/20px sans-serif;
+ --cometchat-font-body-medium: 500 14px/20px sans-serif;
+ --cometchat-font-caption1-regular: 400 12px/16px sans-serif;
+ --cometchat-font-caption1-medium: 500 12px/16px sans-serif;
+
+ /* Spacing */
+ --cometchat-padding-2: 8px;
+ --cometchat-padding-3: 12px;
+ --cometchat-padding-4: 16px;
+
+ /* Border radius */
+ --cometchat-radius-max: 1000px;
+ --cometchat-radius-2: 8px;
+}
+```
+
+### Filter Chip Styling
+
+Active filter chips use a dark pill style with white text and icons:
+
+```css
+/* Default filter chip */
+.cometchat-search__body-filter {
+ background: var(--cometchat-background-color-03);
+ color: var(--cometchat-text-color-secondary);
+ border-radius: var(--cometchat-radius-max);
+}
+
+/* Active filter chip */
+.cometchat-search__body-filter-active {
+ background: var(--cometchat-neutral-color-900);
+ color: var(--cometchat-neutral-color-50);
+ border: 1px solid var(--cometchat-neutral-color-800);
+}
+```
+
+## Error Handling
+
+### Built-in Error Handling
+
+The component handles errors from both conversation and message search services:
+
+```typescript
+
+
+```
+
+```typescript expandable
+handleSearchError(error: CometChat.CometChatException): void {
+ console.error('Search error:', error);
+
+ if (error.code === 'NETWORK_ERROR') {
+ this.showToast('Network error. Please check your connection.');
+ } else if (error.code === 'AUTH_ERROR') {
+ this.showToast('Authentication error. Please log in again.');
+ } else {
+ this.showToast('Search failed. Please try again.');
+ }
+}
+```
+
+### Error State Behavior
+
+- If only one section errors while the other has results, the errored section shows its own error view with its section header
+- If both sections error, a single unified error view is shown without section headers
+- Custom `errorView` templates are used when provided
+
+## Complete Example
+
+```typescript expandable
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CometChat } from '@cometchat/chat-sdk-javascript';
+import {
+ CometChatSearchComponent,
+ CometChatSearchFilter,
+ CometChatSearchScope,
+ SearchConversationClickEvent,
+ SearchMessageClickEvent,
+ ChatStateService,
+ CometChatOption,
+} from '@cometchat/chat-uikit-angular';
+
+@Component({
+ selector: 'app-search-demo',
+ standalone: true,
+ imports: [CommonModule, CometChatSearchComponent],
+ template: `
+
+
+
+
+
+ No results
+ Try a different search term or filter
+
+
+
+
+ `,
+ styles: [`
+ .search-container {
+ height: 100vh;
+ width: 400px;
+ }
+ `]
+})
+export class SearchDemoComponent implements OnInit {
+ filters = [
+ CometChatSearchFilter.Unread,
+ CometChatSearchFilter.Groups,
+ CometChatSearchFilter.Photos,
+ CometChatSearchFilter.Videos,
+ CometChatSearchFilter.Documents,
+ CometChatSearchFilter.Audio,
+ CometChatSearchFilter.Links,
+ ];
+
+ constructor(private chatState: ChatStateService) {}
+
+ ngOnInit(): void {}
+
+ getConversationOptions = (conv: CometChat.Conversation): CometChatOption[] => {
+ return [
+ { id: 'delete', title: 'Delete', iconURL: 'assets/delete.svg', onClick: () => console.log('Delete:', conv) },
+ ];
+ };
+
+ onConversationClick(event: SearchConversationClickEvent): void {
+ const entity = event.conversation.getConversationWith();
+ if (entity instanceof CometChat.User) {
+ this.chatState.setActiveUser(entity);
+ } else {
+ this.chatState.setActiveGroup(entity as CometChat.Group);
+ }
+ this.closeSearch();
+ }
+
+ onMessageClick(event: SearchMessageClickEvent): void {
+ const msg = event.message;
+ if (msg.getReceiverType() === 'user') {
+ this.chatState.setActiveUser(msg.getSender());
+ } else {
+ this.chatState.setActiveGroup(msg.getReceiver() as CometChat.Group);
+ }
+ this.closeSearch();
+ }
+
+ onError(error: CometChat.CometChatException): void {
+ console.error('Search error:', error);
+ }
+
+ closeSearch(): void {
+ // Navigate back to main chat view
+ }
+}
+```
+
+## Related Components
+
+- **CometChatConversations**: Full conversation list component (CometChatSearch uses `CometChatConversationItem` internally for conversation results)
+- **CometChatSearchBar**: Standalone search bar component (CometChatSearch has its own built-in search input)
+- **CometChatMessageList**: Message list component for displaying messages in a conversation
+- **CometChatMessageHeader**: Header component that pairs with search for navigation context
+
+## Technical Details
+
+- **Standalone Component**: Can be imported and used independently
+- **Change Detection**: Uses `OnPush` strategy for optimal performance
+- **Lazy Loading**: Child result components use `@defer` blocks for code splitting
+- **Signal-Based State**: Services use Angular signals for reactive state management
+- **Debounced Search**: 500ms debounce on the search input to reduce SDK calls
+- **BEM CSS**: Follows Block Element Modifier naming convention (`cometchat-search__*`)
+- **Localization**: All text uses the `translate` pipe for i18n support
+
+---
+
+## Related Documentation
+
+- [SearchConversationsService](/ui-kit/angular/api-reference/search-conversations-service) — Conversation search state, SDK queries, real-time listeners
+- [SearchMessagesService](/ui-kit/angular/api-reference/search-messages-service) — Message search state, attachment-type filtering, scoped queries
+- [CometChatTemplatesService](/ui-kit/angular/api-reference/templates-service) — Template resolution priority chain and global template overrides
+- [Accessibility](/accessibility#search) — Cross-component keyboard accessibility reference
+- [Events](/events) — UIKit event bus for decoupled component communication
diff --git a/ui-kit/angular/v5/components/cometchat-smart-replies.mdx b/ui-kit/angular/components/cometchat-smart-replies.mdx
similarity index 95%
rename from ui-kit/angular/v5/components/cometchat-smart-replies.mdx
rename to ui-kit/angular/components/cometchat-smart-replies.mdx
index 8b500f584..b1e2460a2 100644
--- a/ui-kit/angular/v5/components/cometchat-smart-replies.mdx
+++ b/ui-kit/angular/components/cometchat-smart-replies.mdx
@@ -153,5 +153,5 @@ The Smart Replies component uses BEM-style CSS classes that can be customized wi
## Related Components
-- [CometChatConversationStarter](/ui-kit/angular/v5/components/cometchat-conversation-starter) - AI-generated conversation starters for empty conversations
-- [CometChatMessageList](/ui-kit/angular/v5/components/cometchat-message-list) - Message list that hosts the smart replies component
+- [CometChatConversationStarter](/ui-kit/angular/components/cometchat-conversation-starter) - AI-generated conversation starters for empty conversations
+- [CometChatMessageList](/ui-kit/angular/components/cometchat-message-list) - Message list that hosts the smart replies component
diff --git a/ui-kit/angular/v5/components/cometchat-sticker-bubble.mdx b/ui-kit/angular/components/cometchat-sticker-bubble.mdx
similarity index 100%
rename from ui-kit/angular/v5/components/cometchat-sticker-bubble.mdx
rename to ui-kit/angular/components/cometchat-sticker-bubble.mdx
diff --git a/ui-kit/angular/v5/components/cometchat-stickers-keyboard.mdx b/ui-kit/angular/components/cometchat-stickers-keyboard.mdx
similarity index 93%
rename from ui-kit/angular/v5/components/cometchat-stickers-keyboard.mdx
rename to ui-kit/angular/components/cometchat-stickers-keyboard.mdx
index c8250db7d..127faaffa 100644
--- a/ui-kit/angular/v5/components/cometchat-stickers-keyboard.mdx
+++ b/ui-kit/angular/components/cometchat-stickers-keyboard.mdx
@@ -185,6 +185,6 @@ The Stickers Keyboard component uses BEM-style CSS classes that can be customize
## Related Components
-- [CometChatStickerBubble](/ui-kit/angular/v5/components/cometchat-sticker-bubble) - Displays a sent sticker in a message bubble
-- [CometChatMessageComposer](/ui-kit/angular/v5/components/cometchat-message-composer) - Message composer that integrates the stickers keyboard
-- [CometChatEmojiKeyboard](/ui-kit/angular/v5/components/cometchat-stickers-keyboard) - Similar keyboard component for emoji selection
+- [CometChatStickerBubble](/ui-kit/angular/components/cometchat-sticker-bubble) - Displays a sent sticker in a message bubble
+- [CometChatMessageComposer](/ui-kit/angular/components/cometchat-message-composer) - Message composer that integrates the stickers keyboard
+- [CometChatEmojiKeyboard](/ui-kit/angular/components/cometchat-stickers-keyboard) - Similar keyboard component for emoji selection
diff --git a/ui-kit/angular/v5/components/cometchat-text-bubble.mdx b/ui-kit/angular/components/cometchat-text-bubble.mdx
similarity index 99%
rename from ui-kit/angular/v5/components/cometchat-text-bubble.mdx
rename to ui-kit/angular/components/cometchat-text-bubble.mdx
index 3e7d4291d..d2def7876 100644
--- a/ui-kit/angular/v5/components/cometchat-text-bubble.mdx
+++ b/ui-kit/angular/components/cometchat-text-bubble.mdx
@@ -874,7 +874,7 @@ The component implements comprehensive XSS prevention through HTML sanitization:
-For troubleshooting tips, see the [Troubleshooting Guide](/ui-kit/angular/v5/troubleshooting#cometchattextbubble).
+For troubleshooting tips, see the [Troubleshooting Guide](/ui-kit/angular/troubleshooting#cometchattextbubble).
diff --git a/ui-kit/angular/v5/components/cometchat-thread-header.mdx b/ui-kit/angular/components/cometchat-thread-header.mdx
similarity index 95%
rename from ui-kit/angular/v5/components/cometchat-thread-header.mdx
rename to ui-kit/angular/components/cometchat-thread-header.mdx
index b7e0970ec..f4a4cd6ba 100644
--- a/ui-kit/angular/v5/components/cometchat-thread-header.mdx
+++ b/ui-kit/angular/components/cometchat-thread-header.mdx
@@ -106,7 +106,7 @@ export class ThreadHeaderServiceComponent {
}
```
-See the [ChatStateService API reference](/ui-kit/angular/v5/api-reference/chat-state-service) for the full list of signals, observables, and setter methods.
+See the [ChatStateService API reference](/ui-kit/angular/api-reference/chat-state-service) for the full list of signals, observables, and setter methods.
This is the recommended approach for most applications. It reduces boilerplate
@@ -237,5 +237,5 @@ The component adapts across breakpoints with dedicated CSS variables for tablet
## Related Components
-- [CometChatMessageList](/ui-kit/angular/v5/components/cometchat-message-list) - Displays messages within the thread
-- [CometChatMessageBubble](/ui-kit/angular/v5/components/cometchat-message-bubble) - Renders individual messages in the thread
+- [CometChatMessageList](/ui-kit/angular/components/cometchat-message-list) - Displays messages within the thread
+- [CometChatMessageBubble](/ui-kit/angular/components/cometchat-message-bubble) - Renders individual messages in the thread
diff --git a/ui-kit/angular/v5/components/cometchat-user-item.mdx b/ui-kit/angular/components/cometchat-user-item.mdx
similarity index 96%
rename from ui-kit/angular/v5/components/cometchat-user-item.mdx
rename to ui-kit/angular/components/cometchat-user-item.mdx
index 311a607f4..d6ad6a7c1 100644
--- a/ui-kit/angular/v5/components/cometchat-user-item.mdx
+++ b/ui-kit/angular/components/cometchat-user-item.mdx
@@ -152,5 +152,5 @@ Provide custom templates via inputs to override any visual section:
## Related Components
- [CometChatUsers](./cometchat-users.mdx) — Parent list component that renders multiple user items
-- [CometChatAvatar](/ui-kit/angular/v5/components/cometchat-users) — Used internally for the user avatar
-- [CometChatContextMenu](/ui-kit/angular/v5/components/cometchat-message-list) — Used internally for the context menu
+- [CometChatAvatar](/ui-kit/angular/components/cometchat-users) — Used internally for the user avatar
+- [CometChatContextMenu](/ui-kit/angular/components/cometchat-message-list) — Used internally for the context menu
diff --git a/ui-kit/angular/v5/components/cometchat-users.mdx b/ui-kit/angular/components/cometchat-users.mdx
similarity index 99%
rename from ui-kit/angular/v5/components/cometchat-users.mdx
rename to ui-kit/angular/components/cometchat-users.mdx
index 88f6b816a..fe8bb6265 100644
--- a/ui-kit/angular/v5/components/cometchat-users.mdx
+++ b/ui-kit/angular/components/cometchat-users.mdx
@@ -888,7 +888,7 @@ handleError(error: CometChat.CometChatException): void {
```
-For troubleshooting tips, see the [Troubleshooting Guide](/ui-kit/angular/v5/troubleshooting#cometchatusers).
+For troubleshooting tips, see the [Troubleshooting Guide](/ui-kit/angular/troubleshooting#cometchatusers).
## Best Practices
diff --git a/ui-kit/angular/v5/components/cometchat-video-bubble.mdx b/ui-kit/angular/components/cometchat-video-bubble.mdx
similarity index 99%
rename from ui-kit/angular/v5/components/cometchat-video-bubble.mdx
rename to ui-kit/angular/components/cometchat-video-bubble.mdx
index ea3afdac2..195d3e7ba 100644
--- a/ui-kit/angular/v5/components/cometchat-video-bubble.mdx
+++ b/ui-kit/angular/components/cometchat-video-bubble.mdx
@@ -596,6 +596,6 @@ Screen readers announce the video bubble with:
-For troubleshooting tips, see the [Troubleshooting Guide](/ui-kit/angular/v5/troubleshooting#cometchatvideobubble).
+For troubleshooting tips, see the [Troubleshooting Guide](/ui-kit/angular/troubleshooting#cometchatvideobubble).
diff --git a/ui-kit/angular/v5/components/overview.mdx b/ui-kit/angular/components/components-overview.mdx
similarity index 83%
rename from ui-kit/angular/v5/components/overview.mdx
rename to ui-kit/angular/components/components-overview.mdx
index f4218221f..2b10e53b8 100644
--- a/ui-kit/angular/v5/components/overview.mdx
+++ b/ui-kit/angular/components/components-overview.mdx
@@ -1,5 +1,5 @@
---
-title: Components Overview
+title: "Overview"
description: "Overview of all available UI components"
---
CometChat UIKit provides a comprehensive set of pre-built components for building chat experiences.
@@ -84,7 +84,7 @@ this.subscription = CometChatMessageEvents.ccMessageSent.subscribe((message) =>
this.subscription?.unsubscribe();
```
-Each component page documents its emitted events in the Events section. See [Events](/ui-kit/angular/v5/events) for the full reference.
+Each component page documents its emitted events in the Events section. See [Events](/ui-kit/angular/events) for the full reference.
### Filters
@@ -146,36 +146,36 @@ All components are imported from `@cometchat/chat-uikit-angular`.
| Component | Purpose | Key Inputs | Page |
| --- | --- | --- | --- |
-| cometchat-conversations | Scrollable list of recent conversations | `conversationsRequestBuilder`, `itemClick`, `error` | [Conversations](/ui-kit/angular/v5/components/cometchat-conversations) |
-| cometchat-users | Scrollable list of users | `usersRequestBuilder`, `itemClick`, `error` | [Users](/ui-kit/angular/v5/components/cometchat-users) |
-| cometchat-groups | Scrollable list of groups | `groupsRequestBuilder`, `itemClick`, `error` | [Groups](/ui-kit/angular/v5/components/cometchat-groups) |
-| cometchat-group-members | Scrollable list of group members | `group`, `groupMemberRequestBuilder`, `itemClick` | [Group Members](/ui-kit/angular/v5/components/cometchat-group-members) |
+| cometchat-conversations | Scrollable list of recent conversations | `conversationsRequestBuilder`, `itemClick`, `error` | [Conversations](/ui-kit/angular/components/cometchat-conversations) |
+| cometchat-users | Scrollable list of users | `usersRequestBuilder`, `itemClick`, `error` | [Users](/ui-kit/angular/components/cometchat-users) |
+| cometchat-groups | Scrollable list of groups | `groupsRequestBuilder`, `itemClick`, `error` | [Groups](/ui-kit/angular/components/cometchat-groups) |
+| cometchat-group-members | Scrollable list of group members | `group`, `groupMemberRequestBuilder`, `itemClick` | [Group Members](/ui-kit/angular/components/cometchat-group-members) |
### Messages
| Component | Purpose | Key Inputs | Page |
| --- | --- | --- | --- |
-| cometchat-message-header | Toolbar with avatar, name, status, typing indicator | `user`, `group` | [Message Header](/ui-kit/angular/v5/components/cometchat-message-header) |
-| cometchat-message-list | Scrollable message list with reactions, receipts, threads | `user`, `group`, `messagesRequestBuilder` | [Message List](/ui-kit/angular/v5/components/cometchat-message-list) |
-| cometchat-message-composer | Rich text input with attachments, mentions, voice notes | `user`, `group`, `placeholderText` | [Message Composer](/ui-kit/angular/v5/components/cometchat-message-composer) |
-| cometchat-thread-header | Parent message bubble and reply count for threaded view | `parentMessage` | [Thread Header](/ui-kit/angular/v5/components/cometchat-thread-header) |
+| cometchat-message-header | Toolbar with avatar, name, status, typing indicator | `user`, `group` | [Message Header](/ui-kit/angular/components/cometchat-message-header) |
+| cometchat-message-list | Scrollable message list with reactions, receipts, threads | `user`, `group`, `messagesRequestBuilder` | [Message List](/ui-kit/angular/components/cometchat-message-list) |
+| cometchat-message-composer | Rich text input with attachments, mentions, voice notes | `user`, `group`, `placeholderText` | [Message Composer](/ui-kit/angular/components/cometchat-message-composer) |
+| cometchat-thread-header | Parent message bubble and reply count for threaded view | `parentMessage` | [Thread Header](/ui-kit/angular/components/cometchat-thread-header) |
### Calling
| Component | Purpose | Key Inputs | Page |
| --- | --- | --- | --- |
-| cometchat-call-buttons | Voice and video call initiation buttons | `user`, `group` | [Call Buttons](/ui-kit/angular/v5/components/cometchat-call-buttons) |
-| cometchat-incoming-call | Incoming call notification with accept/decline | `call` | [Incoming Call](/ui-kit/angular/v5/components/cometchat-incoming-call) |
-| cometchat-outgoing-call | Outgoing call screen with cancel control | `call` | [Outgoing Call](/ui-kit/angular/v5/components/cometchat-outgoing-call) |
-| cometchat-call-logs | Scrollable list of call history | `callLogsRequestBuilder` | [Call Logs](/ui-kit/angular/v5/components/cometchat-call-logs) |
+| cometchat-call-buttons | Voice and video call initiation buttons | `user`, `group` | [Call Buttons](/ui-kit/angular/components/cometchat-call-buttons) |
+| cometchat-incoming-call | Incoming call notification with accept/decline | `call` | [Incoming Call](/ui-kit/angular/components/cometchat-incoming-call) |
+| cometchat-outgoing-call | Outgoing call screen with cancel control | `call` | [Outgoing Call](/ui-kit/angular/components/cometchat-outgoing-call) |
+| cometchat-call-logs | Scrollable list of call history | `callLogsRequestBuilder` | [Call Logs](/ui-kit/angular/components/cometchat-call-logs) |
### AI
| Component | Purpose | Key Inputs | Page |
| --- | --- | --- | --- |
-| cometchat-smart-replies | AI-generated response suggestions | — | [Smart Replies](/ui-kit/angular/v5/components/cometchat-smart-replies) |
-| cometchat-conversation-starter | AI-generated opening lines for new chats | — | [Conversation Starter](/ui-kit/angular/v5/components/cometchat-conversation-starter) |
-| cometchat-conversation-summary | AI-generated conversation summary panel | `getConversationSummary` | [Conversation Summary](/ui-kit/angular/v5/components/cometchat-conversation-summary) |
+| cometchat-smart-replies | AI-generated response suggestions | — | [Smart Replies](/ui-kit/angular/components/cometchat-smart-replies) |
+| cometchat-conversation-starter | AI-generated opening lines for new chats | — | [Conversation Starter](/ui-kit/angular/components/cometchat-conversation-starter) |
+| cometchat-conversation-summary | AI-generated conversation summary panel | `getConversationSummary` | [Conversation Summary](/ui-kit/angular/components/cometchat-conversation-summary) |
---
@@ -190,9 +190,9 @@ The UIKit is a set of independent components that compose into chat layouts. A t
Data flow: selecting a conversation in `cometchat-conversations` yields a `CometChat.User` or `CometChat.Group` object. That object is passed as an input (`[user]` or `[group]`) to `cometchat-message-header`, `cometchat-message-list`, and `cometchat-message-composer`. The message components use the SDK internally — `cometchat-message-composer` sends messages, `cometchat-message-list` receives them via real-time listeners.
-The UIKit supports a Hybrid Approach for wiring components: by default, components subscribe to `ChatStateService` for active chat state, but explicit `@Input()` bindings always take priority. This lets you start with zero-config service-based wiring and override individual components as needed. See the [State Management guide](/ui-kit/angular/v5/guides/state-management) for a full comparison and code examples.
+The UIKit supports a Hybrid Approach for wiring components: by default, components subscribe to `ChatStateService` for active chat state, but explicit `@Input()` bindings always take priority. This lets you start with zero-config service-based wiring and override individual components as needed. See the [State Management guide](/ui-kit/angular/guides/state-management) for a full comparison and code examples.
-Components communicate through a publish/subscribe event bus (`CometChatMessageEvents`, `CometChatConversationEvents`, `CometChatGroupEvents`, etc.). A component emits events that other components or application code can subscribe to without direct references. See [Events](/ui-kit/angular/v5/events) for the full list.
+Components communicate through a publish/subscribe event bus (`CometChatMessageEvents`, `CometChatConversationEvents`, `CometChatGroupEvents`, etc.). A component emits events that other components or application code can subscribe to without direct references. See [Events](/ui-kit/angular/events) for the full list.
Each component accepts `@Output()` callbacks, `ng-template` view slot inputs for replacing UI sections, `RequestBuilder` inputs for data filtering, and CSS variable overrides on `.cometchat-` classes.
@@ -201,16 +201,16 @@ Each component accepts `@Output()` callbacks, `ng-template` view slot inputs for
## Next Steps
-
+
Chat features included out of the box
-
+
Customize colors, fonts, and styles
-
+
Add-on features like polls, stickers, and translation
-
+
Task-oriented tutorials for common patterns
diff --git a/ui-kit/angular/core-features.mdx b/ui-kit/angular/core-features.mdx
index 88aa7691e..94fc78b12 100644
--- a/ui-kit/angular/core-features.mdx
+++ b/ui-kit/angular/core-features.mdx
@@ -1,131 +1,243 @@
---
-title: "Core"
-description: "Core — CometChat documentation."
+title: "Core Features"
+description: "Review CometChat Angular UI Kit core features for messaging, media sharing, receipts, typing indicators, presence, reactions, threads, and search."
---
-## Overview
+
-The UI Kit comprises a variety of components, each designed to work seamlessly with one another to deliver a comprehensive and intuitive chat experience.
+| Field | Value |
+| --- | --- |
+| 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, Search, Threaded Conversations, Moderation, Report Message, Group Chat |
+| 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) |
-Here's how different UI Kit components work together to achieve CometChat's Core features:
+
+
+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
-At the heart of CometChat's functionality is the ability to support real-time text messaging. Users can send and receive instant messages, fostering quick and efficient communication.
+Real-time text messaging is at the heart of CometChat. Users can send and receive instant messages, enabling quick and efficient communication in both one-on-one and group conversations.
-
+
-| Components | Functionality |
-| -------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [MessageComposer](/ui-kit/angular/message-composer) | [MessageComposer](/ui-kit/angular/message-composer) is a Component that enables users to write and send a variety of messages. |
-| [MessageList](/ui-kit/angular/message-list) | [MessageList](/ui-kit/angular/message-list) is a Component that renders a list of messages sent and messages received using [TextBubble](/ui-kit/angular/text-bubble). |
-| [Messages](/ui-kit/angular/messages) | [Messages](/ui-kit/angular/messages) component in CometChat's UI Kit is a comprehensive component that includes both the [MessageComposer](/ui-kit/angular/message-composer) and the [MessageList](/ui-kit/angular/message-list) components. So, if you're looking to implement a messaging feature in your application, using the Messages component would be a straightforward and efficient way to do it. |
+| Component | Functionality |
+| --- | --- |
+| [cometchat-message-composer](/ui-kit/angular/components/cometchat-message-composer) | Provides the input area where users write and send text messages. |
+| [cometchat-message-list](/ui-kit/angular/components/cometchat-message-list) | Renders the chronological list of sent and received messages using text bubbles. |
## Media Sharing
-Beyond text, CometChat allows users to share various media types within their conversations. This includes images, videos, audio files, and documents, enriching the chat experience and enabling more comprehensive communication.
+CometChat supports sharing images, videos, audio files, and documents within conversations.
-
+
-| Components | Functionality |
-| -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| [MessageComposer](/ui-kit/angular/message-composer) | the [MessageComposer](/ui-kit/angular/message-composer) component includes an ActionSheet. This ActionSheet serves as a menu appearing over the app's context, offering various options for sharing media files. |
-| [MessageList](/ui-kit/angular/message-list) | the [MessageList](/ui-kit/angular/message-list) component is responsible for rendering various Media Message bubbles, such as [Image Bubble](/ui-kit/angular/image-bubble), [File Bubble](/ui-kit/angular/file-bubble), [Audio Bubble](/ui-kit/angular/audio-bubble) [Video Bubble](/ui-kit/angular/video-bubble) |
-
-> In CometChat's UI Kit, the [Messages](/ui-kit/angular/messages) component combines both the [MessageComposer](/ui-kit/angular/message-composer) and the [MessageList](/ui-kit/angular/message-list) components. If you want to add messaging features to your app, using the Messages component is a simple and effective approach.
+| Component | Functionality |
+| --- | --- |
+| [cometchat-message-composer](/ui-kit/angular/components/cometchat-message-composer) | Includes an ActionSheet that presents options for attaching and sharing media files. |
+| [cometchat-message-list](/ui-kit/angular/components/cometchat-message-list) | Renders media message bubbles including Image, File, Audio, and Video bubbles. |
## Read Receipts
-CometChat's Read Receipts feature provides visibility into the message status, letting users know when a message has been delivered and read. This brings clarity to the communication and ensures users are informed about the status of their messages.
+Read Receipts provide visibility into message status, letting users know when a message has been delivered and read. This brings clarity to communication and sets expectations about engagement.
-
+
-| Components | Functionality |
-| -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Conversations](/ui-kit/angular/conversations) | [Conversations](/ui-kit/angular/conversations) is a Component that renders Conversations item List, Conversation item also displays the delivery status of the last message providing users with real-time updates on the status of their messages. |
-| [MessageList](/ui-kit/angular/message-list) | [MessageList](/ui-kit/angular/message-list) is a Component that renders different types of Message bubbles, Read Recept status is an integral part of all message bubbles, no matter the type, and provides real-time updates about the status of the message. |
-| [MessageInformation](/ui-kit/angular/message-information) | [MessageInformation](/ui-kit/angular/message-information) component provides transparency into the status of each sent message, giving the sender insights into whether their message has been delivered and read. |
+| Component | Functionality |
+| --- | --- |
+| [cometchat-conversations](/ui-kit/angular/components/cometchat-conversations) | Displays the delivery and read status of the last message in each conversation list item. |
+| [cometchat-message-list](/ui-kit/angular/components/cometchat-message-list) | Shows read receipt indicators on every message bubble, providing real-time status updates. |
+| [cometchat-message-information](/ui-kit/angular/components/cometchat-message-information) | Gives the sender detailed insights into whether their message has been delivered and read. |
## Typing Indicator
-The Typing Indicator feature in CometChat shows when a user is typing a response in real-time, fostering a more interactive and engaging chat environment. This feature enhances the real-time communication experience, making conversations feel more natural and fluid.
+The Typing Indicator shows when a user is composing a response in real time, making conversations feel more natural and interactive.
-
+
-| Components | Functionality |
-| ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Conversations](/ui-kit/angular/conversations) | [Conversations](/ui-kit/angular/conversations) is a Component that renders Conversations item List, Conversations item also shows real-time typing status indicators. This means that if a user in a one-on-one chat or a participant in a group chat is currently typing a message |
-| [Message Header](/ui-kit/angular/message-header) | [Message Header](/ui-kit/angular/message-header) that renders details of User or Groups in ToolBar. The MessageHeader also handles the Typing Indicator functionality. When a user or a member in a group is typing, the MessageHeader dynamically updates to display a 'typing...' status in real-time. |
+| Component | Functionality |
+| --- | --- |
+| [cometchat-conversations](/ui-kit/angular/components/cometchat-conversations) | Shows real-time typing status indicators in conversation list items for both one-on-one and group chats. |
+| [cometchat-message-header](/ui-kit/angular/components/cometchat-message-header) | Dynamically updates to display a "typing…" status when a user or group member is composing a message. |
## User Presence
-CometChat's User Presence feature allows users to see whether their contacts are online, offline. This helps users know the best time to initiate a conversation and sets expectations about response times.
+User Presence lets users see whether their contacts are online or offline, helping them choose the best time to start a conversation.
-
+
-| Components | Functionality |
-| ----------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Conversations](/ui-kit/angular/conversations) | [Conversations](/ui-kit/angular/conversations) is a Component that renders Conversations item List, Conversations item also shows user presence information. |
-| [Message Header](/ui-kit/angular/message-header) | [Message Header](/ui-kit/angular/message-header) that renders details of User or Groups in ToolBar. The MessageHeader also handles user Presence information. |
-| [Users](/ui-kit/angular/users) | [Users](/ui-kit/angular/users) renders list of users available in your app.It also responsible to render users Presence information. |
-| [Group Members](/ui-kit/angular/group-members) | [Group Members](/ui-kit/angular/group-members) renders list of users available in the group. The Group Members component also handles user Presence information. |
+| Component | Functionality |
+| --- | --- |
+| [cometchat-conversations](/ui-kit/angular/components/cometchat-conversations) | Displays user presence information alongside each conversation list item. |
+| [cometchat-message-header](/ui-kit/angular/components/cometchat-message-header) | Shows the online/offline status of the user or group in the message header toolbar. |
+| [cometchat-users](/ui-kit/angular/components/cometchat-users) | Renders the list of available users with their current presence status. |
+| [cometchat-group-members](/ui-kit/angular/components/cometchat-group-members) | Renders group member lists with presence information for each member. |
## Reactions
-CometChat's Reactions feature adds a layer of expressiveness to your chat application by allowing users to angular to messages. With Reactions, users can convey a range of emotions or express their thoughts on a particular message without typing out a full response, enhancing their user experience and fostering greater engagement.
+Reactions let users express emotions or respond to messages without typing a full reply, adding expressiveness and boosting engagement.
-
+
-| Components | Functionality |
-| ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [MessageList](/ui-kit/angular/message-list) | [MessageList](/ui-kit/angular/message-list) is a Component that renders different types of Message bubbles, Irrespective of the type of message bubble, Reactions are an integral part and offer a more engaging, expressive way for users to respond to messages. |
-| [Messages](/ui-kit/angular/messages) | [Messages](/ui-kit/angular/messages)component in CometChat's UI Kit is a comprehensive component that includes both the [MessageComposer](/ui-kit/angular/message-composer) and the [MessageList](/ui-kit/angular/message-list) components. So, if you're looking to implement a messaging feature in your application, using the Messages component would be a straightforward and efficient way to do it. |
+| Component | Functionality |
+| --- | --- |
+| [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
-Mentions is a robust feature provided by CometChat that enhances the interactivity and clarity of group or 1-1 chats by allowing users to directly address or refer to specific individuals in a conversation.
+Mentions allow users to directly address specific individuals in a conversation using `@username`. The feature also supports `@all` to notify every member in a group chat simultaneously.
-
+
-| Components | Functionality |
-| -------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Conversations](/ui-kit/angular/conversations) | [Conversations](/ui-kit/angular/conversations) component provides an enhanced user experience by integrating the Mentions feature. This means that from the conversation list itself, users can see where they or someone else have been specifically mentioned. |
-| [MessageComposer](/ui-kit/angular/message-composer) | [MessageComposer](/ui-kit/angular/message-composer) is a component that allows users to craft and send various types of messages, including the usage of the Mentions feature for direct addressing within the conversation. |
-| [MessageList](/ui-kit/angular/message-list) | [MessageList](/ui-kit/angular/message-list) is a component that displays a list of sent and received messages. It also supports the rendering of Mentions, enhancing the readability and interactivity of conversations. |
-| [Messages](/ui-kit/angular/messages) | [Messages](/ui-kit/angular/messages) The component is a comprehensive element in CometChat's UI Kit, encapsulating both the [MessageComposer](/ui-kit/angular/message-composer) and [MessageList](/ui-kit/angular/message-list) components. It fully supports the Mentions feature, providing a streamlined way to implement an interactive and engaging messaging function in your application. |
+| Component | Functionality |
+| --- | --- |
+| [cometchat-conversations](/ui-kit/angular/components/cometchat-conversations) | Shows mention indicators in conversation list items so users can see where they were mentioned. |
+| [cometchat-message-composer](/ui-kit/angular/components/cometchat-message-composer) | Provides the mention picker that appears as users type `@`, allowing them to select a user to mention. |
+| [cometchat-message-list](/ui-kit/angular/components/cometchat-message-list) | Renders mention highlights within message text, making mentioned names visually distinct. |
## Threaded Conversations
-The Threaded Conversations feature enables users to respond directly to a specific message in a chat. This keeps conversations organized and enhances the user experience by maintaining context, especially in group chats.
+Threaded Conversations enable users to respond directly to a specific message, keeping discussions organized and maintaining context — especially useful in group chats.
+
+
+
+
+
+| Component | Functionality |
+| --- | --- |
+| [cometchat-thread-header](/ui-kit/angular/components/cometchat-thread-header) | Displays the parent message along with the reply count at the top of a thread view. |
+| [cometchat-message-list](/ui-kit/angular/components/cometchat-message-list) | Renders thread replies when `parentMessageId` is set. |
+| [cometchat-message-composer](/ui-kit/angular/components/cometchat-message-composer) | Sends replies within a thread when `parentMessageId` is set. |
+
+## Quoted Replies
+
+Quoted Replies enable users to quickly reply to specific messages by selecting the "Reply" option from a message's action menu. This enhances context, keeps conversations organized, and improves overall chat experience in both one-on-one and group chats.
+
+
+
+
+
+| Component | Functionality |
+| --- | --- |
+| [cometchat-message-list](/ui-kit/angular/components/cometchat-message-list) | Supports replying to messages via the "Reply" option. Users can select "Reply" on a message to open the composer with the quoted reply pre-filled, maintaining context. |
+| [cometchat-message-composer](/ui-kit/angular/components/cometchat-message-composer) | Shows the quoted reply above the input field, providing context for the response. |
+
+## Rich Text Formatting
+
+Rich Text Formatting allows users to style their messages with bold, italic, underline, strikethrough, code, links, lists, and blockquotes. This brings richer expression to conversations and helps users emphasize key points, making communication clearer and more engaging.
-
+
-| Components | Functionality |
-| ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| [Threaded Messages](/ui-kit/angular/threaded-messages) | [Threaded Messages](/ui-kit/angular/threaded-messages) that displays all replies made to a particular message in a conversation. |
+| Component | Functionality |
+| --- | --- |
+| [cometchat-message-composer](/ui-kit/angular/components/cometchat-message-composer) | Provides a built-in rich text editor with formatting toolbar, floating selection toolbar, and keyboard shortcuts for bold, italic, underline, strikethrough, code, links, lists, and blockquotes. |
+| [cometchat-message-list](/ui-kit/angular/components/cometchat-message-list) | Renders formatted messages with the appropriate styling applied, displaying bold, italic, underline, strikethrough, code, links, lists, and blockquote formatting as intended by the sender. |
+
+
+See the [Rich Text Formatting Guide](/ui-kit/angular/guides/rich-text-formatting) for detailed usage instructions.
+
## Group Chat
-CometChat facilitates Group Chats, allowing users to have conversations with multiple participants simultaneously. This feature is crucial for team collaborations, group discussions, social communities, and more.
+CometChat facilitates group conversations, allowing multiple participants to communicate simultaneously — ideal for team collaborations, group discussions, and social communities.
-
+
-For a comprehensive understanding and guide on implementing and using the Groups feature in CometChat, you should refer to our detailed guide on [Groups](/ui-kit/angular/groups).
+| Component | Functionality |
+| --- | --- |
+| [cometchat-groups](/ui-kit/angular/components/cometchat-groups) | Renders the list of available groups with search, join, and create capabilities. |
+| [cometchat-group-members](/ui-kit/angular/components/cometchat-group-members) | Displays the members of a group with roles, presence status, and management actions. |
+
+## Moderation
+
+CometChat's Message Moderation feature helps maintain a safe and respectful chat environment by automatically filtering and managing inappropriate content. Messages can be automatically blocked or flagged based on predefined rules, ensuring harmful content is handled before it reaches users.
+
+
+
+
+
+
+Learn more about setting up moderation rules and managing content in the [Moderation](/moderation/overview) documentation.
+
+
+| Component | Functionality |
+| --- | --- |
+| [cometchat-message-list](/ui-kit/angular/components/cometchat-message-list) | Automatically handles moderated messages, displaying blocked content based on moderation settings. |
+
+## Report Message
+
+The Report Message feature allows users to report inappropriate or harmful messages within the chat. Users can choose from predefined reasons and provide additional remarks for detailed context. This feature helps maintain a safe and respectful chat environment.
+
+
+Learn more about how flagged messages are handled, reviewed, and moderated in the [Flagged Messages](/moderation/flagged-messages) documentation.
+
+
+
+
+
+
+| Component | Functionality |
+| --- | --- |
+| [cometchat-message-list](/ui-kit/angular/components/cometchat-message-list) | Provides the "Report Message" option in the message actions menu, allowing users to initiate the reporting process for inappropriate messages. |
+
+## Conversation and Advanced Search
+
+Conversation and Advanced Search enables users to quickly find conversations, messages, and media across chats in real time. It supports filters, scopes, and custom actions, allowing users to locate content efficiently while keeping the chat experience smooth and intuitive.
+
+
+
+
+
+| Component | Functionality |
+| --- | --- |
+| [cometchat-search](/ui-kit/angular/components/cometchat-search) | Allows users to search across conversations and messages in real time. Users can click on a result to open the conversation or jump directly to a specific message. |
+| [cometchat-message-header](/ui-kit/angular/components/cometchat-message-header) | Shows the search button in the chat header, allowing users to search within a conversation. |
+| [cometchat-message-list](/ui-kit/angular/components/cometchat-message-list) | Shows the selected message when clicked from search results and highlights it in the message list. |
+| [cometchat-conversations](/ui-kit/angular/components/cometchat-conversations) | Displays the search input for filtering conversations. |
+
+
+See the [Search Messages Guide](/ui-kit/angular/guides/search-messages) for detailed implementation instructions.
+
+
+---
+
+## Next Steps
+
+
+
+ Browse all available Angular UIKit components
+
+
+ Customize the look and feel of your chat UI
+
+
+ Add audio and video calling
+
+
+ Explore AI-powered chat capabilities
+
+
diff --git a/ui-kit/angular/customization/date-time-formatting.mdx b/ui-kit/angular/customization/date-time-formatting.mdx
new file mode 100644
index 000000000..78824f6aa
--- /dev/null
+++ b/ui-kit/angular/customization/date-time-formatting.mdx
@@ -0,0 +1,281 @@
+---
+title: "Date & Time Formatting"
+description: "Customize date and time display globally or per-component with language-aware defaults."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-angular` |
+| Key class | `CometChatLocalize` (global CalendarObject management) |
+| Key component | `CometChatDateComponent` (`cometchat-date` element) |
+| Required setup | `CometChatUIKit.init(uiKitSettings)` |
+| Purpose | Customize date/time formatting globally, per-component, or per-language |
+| Features | Language-specific defaults, global override, per-instance override, relative time |
+| Related | [Localization](/ui-kit/angular/customization/localization) \| [Theming](/ui-kit/angular/customization/theming) |
+
+
+
+CometChat UIKit provides flexible date/time formatting with language-aware defaults. Dates automatically adapt when you switch languages, and you can override formats globally or per-component.
+
+| Capability | Description |
+| --- | --- |
+| Language-specific defaults | Date formats auto-adapt per language (e.g., MM/DD/YYYY for en-US, DD/MM/YYYY for en-GB) |
+| Global override | Set a custom CalendarObject that applies to all components |
+| Per-component override | Pass a CalendarObject input to individual `cometchat-date` instances |
+| Relative time | Configure "X minutes ago" style formatting |
+| Timezone support | Set timezone globally via `CometChatLocalize` |
+
+---
+
+## How It Works
+
+The `cometchat-date` component resolves its date format using a fallback chain:
+
+1. Component `[calendarObject]` input (highest priority)
+2. Global CalendarObject from `CometChatLocalize.getCalendarObject()`
+3. Hardcoded fallback: `hh:mm A` / `[Yesterday]` / `dddd` / `DD/MM/YYYY`
+
+---
+
+## Language-Specific Defaults
+
+When you switch languages, date formats automatically adapt:
+
+| Language | Today | Yesterday | Other Days |
+| --- | --- | --- | --- |
+| en-US | `hh:mm A` | `[Yesterday]` | `MM/DD/YYYY` |
+| en-GB | `HH:mm` | `[Yesterday]` | `DD/MM/YYYY` |
+| de | `HH:mm` | `[Gestern]` | `DD.MM.YYYY` |
+| fr | `HH:mm` | `[Hier]` | `DD/MM/YYYY` |
+| es | `HH:mm` | `[Ayer]` | `DD/MM/YYYY` |
+| ja | `HH:mm` | `[昨日]` | `YYYY/MM/DD` |
+| ko | `HH:mm` | `[어제]` | `YYYY/MM/DD` |
+| zh | `HH:mm` | `[昨天]` | `YYYY/MM/DD` |
+| ru | `HH:mm` | `[Вчера]` | `DD.MM.YYYY` |
+| sv | `HH:mm` | `[Igår]` | `YYYY-MM-DD` |
+
+```typescript
+// Switching language automatically updates date formats
+CometChatLocalize.setCurrentLanguage('ja');
+// Dates now show YYYY/MM/DD format with Japanese "yesterday" label
+```
+
+---
+
+## Global Date Format Override
+
+Set a custom CalendarObject that applies to all `cometchat-date` instances:
+
+```typescript
+import { CometChatLocalize } from '@cometchat/chat-uikit-angular';
+
+// Set global date format
+CometChatLocalize.setGlobalCalendarObject({
+ today: 'HH:mm',
+ yesterday: '[Yesterday] HH:mm',
+ lastWeek: 'dddd HH:mm',
+ otherDays: 'DD/MM/YYYY'
+});
+```
+
+
+Once you set a custom global CalendarObject, switching languages will NOT override it. Your custom format is preserved across language changes. To revert to language-specific defaults, you would need to reset the CalendarObject.
+
+
+### Via Initialization
+
+```typescript
+CometChatLocalize.init({
+ language: 'en-US',
+ calendarObject: {
+ today: 'h:mm A',
+ yesterday: '[Yesterday] h:mm A',
+ lastWeek: 'dddd h:mm A',
+ otherDays: 'MMM DD, YYYY'
+ }
+});
+```
+
+---
+
+## Per-Component Override
+
+Pass a `calendarObject` input to individual `cometchat-date` instances:
+
+```html
+
+
+```
+
+```typescript
+customFormat: CalendarObject = {
+ today: 'HH:mm:ss',
+ yesterday: '[Yesterday] HH:mm',
+ lastWeek: 'ddd DD MMM',
+ otherDays: 'DD MMM YYYY'
+};
+```
+
+The component input always takes priority over the global CalendarObject.
+
+---
+
+## CalendarObject Reference
+
+```typescript expandable
+interface CalendarObject {
+ today?: string; // Format for today's dates
+ yesterday?: string; // Format for yesterday's dates
+ lastWeek?: string; // Format for dates within last 7 days
+ otherDays?: string; // Format for all other dates
+ relativeTime?: {
+ minute?: string; // "1 minute ago" (use %d for number)
+ minutes?: string; // "X minutes ago" (use %d for number)
+ hour?: string; // "1 hour ago" (use %d for number)
+ hours?: string; // "X hours ago" (use %d for number)
+ };
+}
+```
+
+### Format Tokens
+
+| Token | Output | Example |
+| --- | --- | --- |
+| `YYYY` | 4-digit year | 2026 |
+| `YY` | 2-digit year | 26 |
+| `MM` | 2-digit month | 03 |
+| `DD` | 2-digit day | 23 |
+| `dddd` | Full weekday | Monday |
+| `ddd` | Short weekday | Mon |
+| `HH` | 24-hour hour | 14 |
+| `hh` | 12-hour hour | 02 |
+| `mm` | Minutes | 30 |
+| `A` | AM/PM | PM |
+| `[text]` | Literal text | [Yesterday] → Yesterday |
+
+---
+
+## Relative Time
+
+Enable "X minutes ago" style formatting:
+
+```typescript expandable
+CometChatLocalize.setGlobalCalendarObject({
+ today: 'hh:mm A',
+ yesterday: '[Yesterday]',
+ lastWeek: 'dddd',
+ otherDays: 'DD/MM/YYYY',
+ relativeTime: {
+ minute: '1 minute ago',
+ minutes: '%d minutes ago',
+ hour: '1 hour ago',
+ hours: '%d hours ago'
+ }
+});
+```
+
+When `relativeTime` is configured, recent messages show relative timestamps instead of absolute times.
+
+---
+
+## Timezone
+
+```typescript
+// Set timezone globally
+CometChatLocalize.init({
+ language: 'en-US',
+ timezone: 'America/Los_Angeles'
+});
+
+// Or check current timezone
+const tz = CometChatLocalize.getTimezone();
+```
+
+---
+
+## Example: Custom Date Formats
+
+
+
+```typescript expandable
+import { Component, OnInit } from '@angular/core';
+import { CometChatLocalize } from '@cometchat/chat-uikit-angular';
+
+@Component({
+ selector: 'app-root',
+ template: `
+
+
+```typescript expandable
+import { Component } from '@angular/core';
+import { CalendarObject } from '@cometchat/chat-uikit-angular';
+
+@Component({
+ selector: 'app-chat',
+ template: `
+
+
+
+ `
+})
+export class ChatComponent {
+ lastSeen = 1640000000;
+
+ compactFormat: CalendarObject = {
+ today: 'HH:mm',
+ yesterday: '[Yest]',
+ lastWeek: 'ddd',
+ otherDays: 'DD/MM'
+ };
+}
+```
+
+
+
+---
+
+## Next Steps
+
+
+
+ Override translations globally or per-component.
+
+
+ Customize colors, fonts, and spacing.
+
+
+ Add custom message types with templates.
+
+
+ Configure global UIKit settings.
+
+
diff --git a/ui-kit/angular/v5/customization/global-config.mdx b/ui-kit/angular/customization/global-config.mdx
similarity index 88%
rename from ui-kit/angular/v5/customization/global-config.mdx
rename to ui-kit/angular/customization/global-config.mdx
index ac2f63da4..17cfe3652 100644
--- a/ui-kit/angular/v5/customization/global-config.mdx
+++ b/ui-kit/angular/customization/global-config.mdx
@@ -146,10 +146,10 @@ Even with a global `callSettingsBuilder`, you can override it on individual comp
| Component | Behavior |
|-----------|----------|
-| [CometChatOngoingCall](/ui-kit/angular/v5/components/cometchat-outgoing-call) | Accepts `callSettingsBuilder` as `@Input`. Passes it to `OngoingCallService`. |
-| [CometChatCallButtons](/ui-kit/angular/v5/components/cometchat-call-buttons) | Accepts `callSettingsBuilder` as `@Input`. Forwards to `CometChatOngoingCall`. |
-| [CometChatMessageHeader](/ui-kit/angular/v5/components/cometchat-message-header) | Accepts `callSettingsBuilder` as `@Input`. Forwards to `CometChatCallButtons`. |
-| [CometChatCallLogs](/ui-kit/angular/v5/components/cometchat-call-logs) | Accepts `callSettingsBuilder` as `@Input`. Uses it in the ongoing call overlay. |
+| [CometChatOngoingCall](/ui-kit/angular/components/cometchat-outgoing-call) | Accepts `callSettingsBuilder` as `@Input`. Passes it to `OngoingCallService`. |
+| [CometChatCallButtons](/ui-kit/angular/components/cometchat-call-buttons) | Accepts `callSettingsBuilder` as `@Input`. Forwards to `CometChatOngoingCall`. |
+| [CometChatMessageHeader](/ui-kit/angular/components/cometchat-message-header) | Accepts `callSettingsBuilder` as `@Input`. Forwards to `CometChatCallButtons`. |
+| [CometChatCallLogs](/ui-kit/angular/components/cometchat-call-logs) | Accepts `callSettingsBuilder` as `@Input`. Uses it in the ongoing call overlay. |
## Components That Read GlobalConfig
@@ -212,6 +212,6 @@ export const appConfig: ApplicationConfig = {
## Related
-- [Theming](/ui-kit/angular/v5/customization/theming) — Customize the visual appearance with CSS variables
-- [Localization](/ui-kit/angular/v5/customization/localization) — Configure language and translations
-- [ChatStateService](/ui-kit/angular/v5/api-reference/chat-state-service) — Centralized chat state management
+- [Theming](/ui-kit/angular/customization/theming) — Customize the visual appearance with CSS variables
+- [Localization](/ui-kit/angular/customization/localization) — Configure language and translations
+- [ChatStateService](/ui-kit/angular/api-reference/chat-state-service) — Centralized chat state management
diff --git a/ui-kit/angular/v5/customization/localization.mdx b/ui-kit/angular/customization/localization.mdx
similarity index 98%
rename from ui-kit/angular/v5/customization/localization.mdx
rename to ui-kit/angular/customization/localization.mdx
index dad930235..ee81e9301 100644
--- a/ui-kit/angular/v5/customization/localization.mdx
+++ b/ui-kit/angular/customization/localization.mdx
@@ -13,7 +13,7 @@ description: "Configure multi-language support, override translations globally,
| Required setup | `CometChatUIKit.init(uiKitSettings)` |
| Purpose | Multi-language support with runtime switching and global overrides |
| Features | 19 built-in languages, runtime switching, custom translations |
-| Related | [Date/Time Formatting](/ui-kit/angular/v5/customization/localization) \| [Theming](/ui-kit/angular/v5/customization/theming) |
+| Related | [Date/Time Formatting](/ui-kit/angular/customization/localization) \| [Theming](/ui-kit/angular/customization/theming) |
diff --git a/ui-kit/angular/customization/migration-guide.mdx b/ui-kit/angular/customization/migration-guide.mdx
new file mode 100644
index 000000000..228b0fbe2
--- /dev/null
+++ b/ui-kit/angular/customization/migration-guide.mdx
@@ -0,0 +1,283 @@
+---
+title: "Upgrading From V4"
+description: "Upgrading from CometChat Angular UIKit v4 to v5 — architecture changes, theming, properties, and shared dependencies."
+---
+
+## Introduction
+
+The **CometChat v5 Angular UI Kit** streamlines the integration of in-app chat functionality into your applications. Packed with prebuilt, modular UI components, it supports essential messaging features for both one-to-one and group conversations. With built-in theming options, including light and dark modes, customizable fonts, colors, and extensive configuration possibilities, developers can create chat experiences tailored to their application's needs.
+
+
+
+
+
+## Integration
+
+In **v4**, integration was straightforward due to the availability of composite components like `CometChatConversationsWithMessages`. This single component provided end-to-end functionality, including listing conversations, handling conversation clicks, loading messages (message header, list, composer), displaying user or group details, and supporting threaded messages. Developers could achieve all these features with minimal setup. However, customization posed significant challenges. Customizing the UI or adding custom views required a deep understanding of the internal flow of the composite component. Additionally, configurations were a mix of custom view props, behavioural props, and style props, which often led to confusion. Styling deeply nested components also proved cumbersome, limiting the developer's ability to make meaningful changes.
+
+
+
+
+
+With **v5**, composite components have been replaced with smaller, modular standalone components, such as `CometChatConversations`, `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer`. This modular approach makes integration more flexible and easier to understand. Each component has a well-defined purpose, allowing developers to use them in ways that suit their specific requirements. The need for complex configurations has been eliminated, as developers can now customize behavior and styling directly via CSS variables and Angular template projections. Styling has been significantly simplified, with every component carefully assigned thoughtful CSS class names following BEM methodology, enabling developers to customize styles globally or at the component level effortlessly.
+
+To support the transition from v4 to v5, CometChat has built a [sample app](https://github.com/cometchat/cometchat-uikit-angular/tree/v5) that replicates the functionality of v4's composite components. This sample app serves as a reference for developers looking to build additional features such as user/group details, call log details, threaded messages, and advanced messaging capabilities. By following this approach, developers can take full advantage of v5's modular design while implementing complex functionality in an organized manner.
+
+
+
+
+
+
+
+Learn how to build a complete messaging UI using the **v5 UI Kit** by following the step-by-step guide [here](/ui-kit/angular/integration).
+
+
+
+## Components
+
+The **v4** UI Kit provided composite components like `CometChatConversationsWithMessages`, which offered end-to-end functionality. These components integrated features such as conversation lists, message views (header, list, composer), user/group details, and threaded messages into a single unit. However, customization of deeply nested components through configuration was challenging and resulted in a suboptimal developer experience.
+
+| Components in v4 UI Kit: | | |
+| ---------------------------------- | -------------------------- | ---------------------------- |
+| CometChatConversationsWithMessages | CometChatUsersWithMessages | CometChatGroupsWithMessages |
+| CometChatMessages | CometChatMessageHeader | CometChatMessageList |
+| CometChatMessageComposer | CometChatThreadedMessages | CometChatConversations |
+| CometChatUsers | CometChatGroups | CometChatContacts |
+| CometChatDetails | CometChatGroupMembers | CometChatAddMembers |
+| CometChatBannedMembers | CometChatTransferOwnership | CometChatMessageInformation |
+| CometChatIncomingCall | CometChatOngoingCall | CometChatOutgoingCall |
+| CometChatCallButtons | CometChatCallLogs | CometChatCallLogDetails |
+| CometChatCallLogHistory | CometChatCallLogRecordings | CometChatCallLogParticipants |
+| CometChatCallLogsWithDetails | CometChatUserMemberWrapper | |
+
+In **v5**, the composite approach is replaced with smaller, modular standalone components like `CometChatConversations`, `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer`. Developers now stitch these components together to build the desired functionality. This change allows for greater flexibility and easier customization, significantly improving the developer experience while maintaining functionality.
+
+| Components in v5 UI Kit: | | |
+| ---------------------------- | ------------------------------ | --------------------------- |
+| CometChatConversations | CometChatUsers | CometChatGroups |
+| CometChatGroupMembers | CometChatMessageHeader | CometChatMessageList |
+| CometChatMessageComposer | CometChatThreadHeader | CometChatIncomingCall |
+| CometChatOutgoingCall | CometChatOngoingCall | CometChatCallButtons |
+| CometChatCallLogs | CometChatSearch | CometChatMessageInformation |
+| CometChatConversationStarter | CometChatSmartReplies | CometChatConversationSummary|
+
+## Theming
+
+In **v4**, theming was managed using the `CometChatThemeService`, an injectable Angular service with two key properties: `Palette` and `Typography`. The Palette property provided methods like `setPrimary()`, `setAccent()`, and `setMode()` for configuring colors and themes. The Typography property provided methods like `setFontFamily()` and `setFontWeightBold()` for configuring text styles. Developers injected this service in their component constructors and called setter methods to customize the appearance.
+
+While this approach worked, it introduced several challenges. Customizing themes required programmatic interaction with the service in every component that needed theming. Switching between light and dark modes required calling `setMode()` on the palette. Per-component styling required passing dedicated style objects (like `ConversationsStyle`, `AvatarStyle`, `ListItemStyle`) as inputs, which was verbose and hard to maintain across large applications.
+
+```typescript app.component.ts
+import { Component } from '@angular/core';
+import { CometChatThemeService } from '@cometchat/chat-uikit-angular';
+
+@Component({
+ selector: 'app-root',
+ templateUrl: './app.component.html'
+})
+export class AppComponent {
+ constructor(private themeService: CometChatThemeService) {
+ themeService.theme.palette.setMode("light");
+ themeService.theme.palette.setPrimary({ light: "#6851D6", dark: "#6851D6" });
+ themeService.theme.palette.setAccent({ light: "#6851D6", dark: "#6851D6" });
+ }
+}
+```
+
+In **v5**, theming has been completely revamped. The older `CometChatThemeService` and style object system have been replaced with modern CSS variables. This means every design token — colors, spacing, typography — is now represented as a CSS variable. Changing the primary color is as simple as updating a CSS variable; no need to interact with complex theming logic or inject services. The use of CSS variables makes styling declarative and lightweight, enhancing both performance and developer experience.
+
+To ensure consistency and scalability, the new theming system adheres to the **BEM** (Block Element Modifier) methodology for class naming. The new theming approach enables developers to style components either globally or at a component-specific level with precision. For example, applying a unique style to a particular element within a component or globally is now straightforward. This move to CSS variables and thoughtful class naming marks a significant improvement in theming flexibility and simplicity.
+
+```css styles.css
+@import '@cometchat/chat-uikit-angular/styles/css-variables.css';
+
+.cometchat {
+ --cometchat-primary-color: #f76808;
+ --cometchat-neutral-color-300: #ffffff;
+ --cometchat-background-color-03: #feede1;
+}
+
+@media (prefers-color-scheme: dark) {
+ .cometchat {
+ --cometchat-primary-color: #f76808;
+ --cometchat-neutral-color-300: #311502;
+ --cometchat-background-color-03: #451d02;
+ }
+}
+```
+
+```typescript app.component.ts
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ template: `
+
+
+
+ `
+})
+export class AppComponent implements OnInit {
+ theme = 'light';
+
+ ngOnInit(): void {
+ const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+ this.theme = mediaQuery.matches ? 'dark' : 'light';
+ mediaQuery.addEventListener('change', (e) => {
+ this.theme = e.matches ? 'dark' : 'light';
+ });
+ }
+}
+```
+
+
+
+For detailed guidance on theming and customizing colors in the CometChat Angular UI Kit, refer to the following resources:
+
+* **Theming Documentation:** [Guide to Theming](/ui-kit/angular/customization/theming)
+
+
+
+## Properties
+
+In **v5**, the approach to properties has been significantly refined to improve clarity and ease of use. All style-related inputs — previously used to customize components via style objects like `ConversationsStyle`, `AvatarStyle`, `ListItemStyle`, `BadgeStyle`, `DateStyle`, and `StatusIndicatorStyle` — have been replaced by a more efficient and native theming system based on CSS variables. This change ensures a seamless and flexible styling process without the need for verbose or redundant configuration within the component inputs.
+
+Configuration inputs, which were prominent in v4, have also been eliminated. With v5's modular design, components are no longer nested inside composite wrappers, making such configurations unnecessary. Developers now have direct control over each component, reducing complexity and increasing flexibility in how components are used and styled.
+
+Custom view inputs have undergone a comprehensive overhaul to ensure consistency across all components. For example, components that are represented as list items now share a uniform set of customizable template inputs, enabling a standardized approach to customization. These inputs include `itemView`, `leadingView`, `trailingView`, `subtitleView`, and `titleView`. This consistent naming convention makes it easier for developers to understand and apply customizations across various components, streamlining the development process.
+
+**Event naming** has also been standardized. In v4, events were callback function inputs with an `on` prefix (e.g., `[onItemClick]="handler"`). In v5, events are proper Angular `@Output()` EventEmitters without the `on` prefix (e.g., `(itemClick)="handler($event)"`). This aligns with Angular conventions and provides better IDE support.
+
+| v4 Event Pattern | v5 Event Pattern |
+|------------------|------------------|
+| `[onItemClick]="handleItemClick"` | `(itemClick)="handleItemClick($event)"` |
+| `[onSelect]="handleSelect"` | `(select)="handleSelect($event)"` |
+| `[onError]="handleError"` | `(error)="handleError($event)"` |
+| `[onBack]="handleBack"` | `(backClick)="handleBack()"` |
+| `[onThreadRepliesClick]="handleThread"` | `(threadRepliesClick)="handleThread($event)"` |
+
+## Shared Dependencies
+
+In **v4**, the Angular UI Kit relied on three shared packages: `@cometchat/uikit-resources`, `@cometchat/uikit-elements`, and `@cometchat/uikit-shared`, designed to provide common functionality and resources across the Web UI Kits (React, Angular, Vue). While these shared packages promoted code reuse, they came with significant drawbacks.
+
+One major issue was the reliance on web components in the `uikit-elements` and `uikit-shared` packages. This required the use of `CUSTOM_ELEMENTS_SCHEMA` in every Angular module that used CometChat components. Styling web components via CSS was inherently restrictive, often requiring additional effort to achieve desired results. Furthermore, the web component layer added complexity to Angular's change detection and made debugging more difficult. IDE support for web component attributes was also limited, reducing developer productivity.
+
+```typescript
+// v4: Required CUSTOM_ELEMENTS_SCHEMA and peer dependencies
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { CometChatConversations } from '@cometchat/chat-uikit-angular';
+import "@cometchat/uikit-elements"; // Required side-effect import
+
+@NgModule({
+ imports: [CometChatConversations],
+ schemas: [CUSTOM_ELEMENTS_SCHEMA] // Required for web components
+})
+export class AppModule {}
+```
+
+In **v5**, these challenges have been addressed with a complete shift to pure Angular standalone components. The dependency on shared web component packages has been removed entirely, enabling seamless integration with Angular's ecosystem. Pure Angular components eliminate limitations around styling, allowing developers to leverage modern CSS techniques without restrictions. They also provide native Angular behavior — proper `@Input()` and `@Output()` bindings, full TypeScript type checking, and complete IDE autocompletion support — significantly enhancing the development experience.
+
+```typescript
+// v5: No CUSTOM_ELEMENTS_SCHEMA, no peer dependencies, full type safety
+import { Component } from '@angular/core';
+import {
+ CometChatConversationsComponent,
+ CometChatMessageListComponent,
+ CometChatMessageComposerComponent
+} from '@cometchat/chat-uikit-angular';
+
+@Component({
+ selector: 'app-chat',
+ standalone: true,
+ imports: [
+ CometChatConversationsComponent,
+ CometChatMessageListComponent,
+ CometChatMessageComposerComponent
+ ],
+ template: `
+
+
+For detailed guidance on state management patterns, refer to the [State Management Guide](/ui-kit/angular/guides/state-management) and the [ChatStateService API Reference](/ui-kit/angular/api-reference/chat-state-service).
+
+
+
+## Localization
+
+Both **v4** and **v5** use a built-in `CometChatLocalize` class for localization — no external libraries are required. The API has been slightly updated in v5 with method renames and expanded language support (19 languages, up from 12).
+
+| v4 Method | v5 Method |
+|-----------|-----------|
+| `CometChatLocalize.setLocale("hi")` | `CometChatLocalize.setCurrentLanguage("hi")` |
+| `CometChatLocalize.getLocale()` | `CometChatLocalize.getCurrentLanguage()` |
+| `CometChatLocalize.init()` | Not needed — auto-initializes |
+
+v5 also introduces a `translate` pipe for use directly in templates:
+
+```html
+{{ 'SEND_MESSAGE' | translate }}
+```
+
+## Quick Migration Checklist
+
+- [ ] Update package: `npm install @cometchat/chat-uikit-angular`
+- [ ] Remove peer dependencies: `npm uninstall @cometchat/uikit-elements @cometchat/uikit-resources @cometchat/uikit-shared`
+- [ ] Remove `CUSTOM_ELEMENTS_SCHEMA` from NgModule schemas
+- [ ] Remove `import "@cometchat/uikit-elements"` side-effect imports
+- [ ] Convert components to standalone (recommended) or update module imports
+- [ ] Import CSS variables in global styles: `@import '@cometchat/chat-uikit-angular/styles/css-variables.css'`
+- [ ] Remove `CometChatThemeService` injection — use CSS variables instead
+- [ ] Remove all `*Style` input properties (`[conversationsStyle]`, `[avatarStyle]`, etc.)
+- [ ] Replace style objects with CSS variable overrides
+- [ ] Update event bindings: `[onXxx]="handler"` → `(xxx)="handler($event)"`
+- [ ] Optionally adopt `ChatStateService` for shared state (remove repeated `[user]`/`[group]` bindings)
+- [ ] Update localization calls: `setLocale()` → `setCurrentLanguage()`
+- [ ] Test dark mode with `data-theme="dark"` attribute
+- [ ] Verify all functionality works as expected
diff --git a/ui-kit/angular/v5/customization/theming.mdx b/ui-kit/angular/customization/theming.mdx
similarity index 100%
rename from ui-kit/angular/v5/customization/theming.mdx
rename to ui-kit/angular/customization/theming.mdx
diff --git a/ui-kit/angular/events.mdx b/ui-kit/angular/events.mdx
index 636e6ac86..6475955f7 100644
--- a/ui-kit/angular/events.mdx
+++ b/ui-kit/angular/events.mdx
@@ -1,100 +1,168 @@
---
title: "Events"
-description: "Events — CometChat documentation."
+description: "Reference for CometChat Angular UIKit events including conversation, user, group, message, call, and UI events."
---
-## Overview
+Events provide decoupled communication between UIKit components using a publish/subscribe event bus pattern. Components emit events in response to user interactions or state changes, allowing other parts of your application to react without direct component references. In Angular, you subscribe to these events using RxJS observables and manage subscriptions through component lifecycle hooks.
-Events allow for a decoupled, flexible architecture where different parts of the application can interact without having to directly reference each other. This makes it easier to create complex, interactive experiences, as well as to extend and customize the functionality provided by the CometChat UI Kit.
+## CometChatConversationEvents
-Both Components and Composite Components have the ability to emit events. These events are dispatched in response to certain changes or user interactions within the component. By emitting events, these components allow other parts of the application to react to changes or interactions, thus enabling dynamic and interactive behavior within the application.
+`CometChatConversationEvents` emits events when the logged-in user acts on a conversation object.
-### CometChatConversationEvents
+| Event Name | Description |
+| ------------------------- | ------------------------------------------------------------------------------------------------ |
+| **ccConversationDeleted** | Triggered when the user successfully deletes a conversation. |
+| **ccUpdateConversation** | Triggered to update a conversation in the conversation list. Takes a Conversation object to update. |
-`CometChatConversationEvents` emits events when the logged-in user executes some action on a conversation object.
+## CometChatUserEvents
-| Name | Description |
-| --------------------- | -------------------------------------------------------------------------- |
-| ccConversationDeleted | This event is triggered when the user successfully deletes a conversation. |
+`CometChatUserEvents` emits events when the logged-in user acts on another user object.
+
+| Event Name | Description |
+| ------------------- | ------------------------------------------------------------------------- |
+| **ccUserBlocked** | Triggered when the user successfully blocks another user. |
+| **ccUserUnblocked** | Triggered when the user successfully unblocks another user. |
+
+## CometChatGroupEvents
-### CometChatUserEvents
-
-`CometChatUserEvents` emits events when the logged-in user executes some action on an user object.
-
-It consists of the following events:
-
-| Name | Description |
-| --------------- | ------------------------------------------------------------------------- |
-| ccUserBlocked | This event is triggered when the user successfully blocks another user. |
-| ccUserUnblocked | This event is triggered when the user successfully unblocks another user. |
-
-### CometChatGroupEvents
-
-`CometChatGroupEvents` emits events when the logged-in user executes some action on a group object.
-
-It consists of the following events:
-
-| Name | Description |
-| ------------------------- | ------------------------------------------------------------------------------------ |
-| ccGroupCreated | This event is triggered when the user creates a group successfully |
-| ccGroupDeleted | This event is triggered when the group member deletes the group successfully |
-| ccGroupLeft | This event is triggered when the group member leaves the group successfully |
-| ccGroupMemberScopeChanged | This event is triggered when the group member's scope is updated successfully |
-| ccGroupMemberKicked | This event is triggered when the group member is kicked |
-| ccGroupMemberBanned | This event is triggered when the group member is banned |
-| ccGroupMemberUnbanned | This event is triggered when the group member is un-banned |
-| ccGroupMemberJoined | This event is triggered when a user joins the group |
-| ccGroupMemberAdded | This event is triggered when a user is added to the group |
-| ccOwnershipChanged | This event is triggered when the group ownership is assigned to another group member |
-
-### CometChatMessageEvents
-
-`CometChatMessageEvents` emits events when the logged-in user executes some action on a message object.
-
-It consists of the following events:
-
-| Name | Description |
-| ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
-| ccMessageSent | This event is triggered when the sent message is in transit and also when it is received by the receiver. |
-| ccMessageEdited | This event is triggered when the user successfully edits the message. |
-| ccMessageDeleted | This event is triggered when the user successfully deletes the message. |
-| ccMessageRead | This event is triggered when the sent message is read by the receiver. |
-| ccLiveReaction | This event is triggered when the user sends a live reaction. |
-| onTextMessageReceived | This event is emitted when the CometChat SDK listener emits a text message. |
-| onMediaMessageReceived | This event is emitted when the CometChat SDK listener emits a media message. |
-| onCustomMessageReceived | This event is emitted when the CometChat SDK listener emits a custom message. |
-| onTypingStarted | This event is emitted when the CometChat SDK listener indicates that a user has started typing. |
-| onTypingEnded | This event is emitted when the CometChat SDK listener indicates that a user has stopped typing. |
-| onMessagesDelivered | This event is emitted when the CometChat SDK listener indicates that messages have been delivered. |
-| onMessagesRead | This event is emitted when the CometChat SDK listener indicates that messages have been read. |
-| onMessageEdited | This event is emitted when the CometChat SDK listener indicates that a message has been edited. |
-| onMessageDeleted | This event is emitted when the CometChat SDK listener indicates that a message has been deleted. |
-| onTransientMessageReceived | This event is emitted when the CometChat SDK listener emits a transient message. |
-| onInteractionGoalCompleted | This event is emitted when the CometChat SDK listener indicates that an interaction goal has been completed. |
-| onFormMessageReceived | This event is emitted when an interactive message of 'form' type is received from the CometChat SDK listener. |
-| onCardMessageReceived | This event is emitted when an interactive message of 'card' type is received from the CometChat SDK listener. |
-| onSchedulerMessageReceived | This event is emitted when an interactive message of 'scheduler' type is received from the CometChat SDK listener. |
-| onCustomInteractiveMessageReceived | This event is emitted when an interactive message of 'customInteractive' type is received from the CometChat SDK listener. |
-
-### CometChatCallEvents
-
-`CometChatCallEvents` emits events when the logged-in user executes some action on a call object.
-
-It consists of the following events:
-
-| Name | Description |
-| -------------- | ---------------------------------------------------------------------------- |
-| ccOutgoingCall | This event is triggered when the user initiates a voice/video call. |
-| ccCallAccepted | This event is triggered when the initiated call is accepted by the receiver. |
-| ccCallRejected | This event is triggered when the initiated call is rejected by the receiver. |
-| ccCallEnded | This event is triggered when the initiated call successfully ends. |
-
-### UI events
-
-UI events, refer to actions or interactions performed by a user within the CometChat's UI Kit. These events are triggered when a user interacts with various UI elements, such as buttons, menus, checkboxes, input fields, or any other interactive components.
-
-It consists of the following events:
-
-| Name | Description |
-| ------------------- | ---------------------------------------------------------------------------- |
-| ccActiveChatChanged | This event is triggered when the user navigates to a particular chat window. |
+`CometChatGroupEvents` emits events when the logged-in user acts on a group object.
+
+| Event Name | Description |
+| ------------------------------- | ------------------------------------------------------------------------------------ |
+| **ccGroupCreated** | Triggered when the user creates a group successfully. |
+| **ccGroupDeleted** | Triggered when the group member deletes the group successfully. |
+| **ccGroupLeft** | Triggered when the group member leaves the group successfully. |
+| **ccGroupMemberScopeChanged** | Triggered when the group member's scope is updated successfully. |
+| **ccGroupMemberKicked** | Triggered when a group member is kicked. |
+| **ccGroupMemberBanned** | Triggered when a group member is banned. |
+| **ccGroupMemberUnbanned** | Triggered when a group member is un-banned. |
+| **ccGroupMemberJoined** | Triggered when a user joins the group. |
+| **ccGroupMemberAdded** | Triggered when a user is added to the group. |
+| **ccOwnershipChanged** | Triggered when the group ownership is assigned to another group member. |
+
+## CometChatMessageEvents
+
+`CometChatMessageEvents` emits events when the logged-in user acts on a message object. This category includes both UIKit-level events and CometChat SDK listener events.
+
+### UIKit Events
+
+| Event Name | Description |
+| --------------------- | --------------------------------------------------------------------------------------------------------- |
+| **ccMessageSent** | Triggered when the sent message is in transit and also when it is received by the receiver. |
+| **ccMessageEdited** | Triggered when the user successfully edits a message. |
+| **ccReplyToMessage** | Triggered when the user successfully replies to a message. |
+| **ccMessageDeleted** | Triggered when the user successfully deletes a message. |
+| **ccMessageRead** | Triggered when the sent message is read by the receiver. |
+| **ccLiveReaction** | Triggered when the user sends a live reaction. |
+
+### SDK Listener Events
+
+| Event Name | Description |
+| -------------------------------- | ---------------------------------------------------------------------------------------- |
+| **onTextMessageReceived** | Emitted when the CometChat SDK listener receives a text message. |
+| **onMediaMessageReceived** | Emitted when the CometChat SDK listener receives a media message. |
+| **onCustomMessageReceived** | Emitted when the CometChat SDK listener receives a custom message. |
+| **onTypingStarted** | Emitted when the CometChat SDK listener indicates that a user has started typing. |
+| **onTypingEnded** | Emitted when the CometChat SDK listener indicates that a user has stopped typing. |
+| **onMessagesDelivered** | Emitted when the CometChat SDK listener indicates that messages have been delivered. |
+| **onMessagesRead** | Emitted when the CometChat SDK listener indicates that messages have been read. |
+| **onMessageEdited** | Emitted when the CometChat SDK listener indicates that a message has been edited. |
+| **onMessageDeleted** | Emitted when the CometChat SDK listener indicates that a message has been deleted. |
+| **onTransientMessageReceived** | Emitted when the CometChat SDK listener receives a transient message. |
+
+## CometChatCallEvents
+
+`CometChatCallEvents` emits events when the logged-in user acts on a call object.
+
+| Event Name | Description |
+| ------------------ | ---------------------------------------------------------------------------- |
+| **ccOutgoingCall** | Triggered when the user initiates a voice/video call. |
+| **ccCallAccepted** | Triggered when the initiated call is accepted by the receiver. |
+| **ccCallRejected** | Triggered when the initiated call is rejected by the receiver. |
+| **ccCallEnded** | Triggered when the initiated call successfully ends. |
+
+## UI Events
+
+UI events are triggered when a user interacts with UIKit elements such as buttons, menus, or input fields.
+
+| Event Name | Description |
+| ----------------------- | ---------------------------------------------------------------------------- |
+| **ccActiveChatChanged** | Triggered when the user navigates to a particular chat window. |
+
+## Usage
+
+Subscribe to events in `ngOnInit` and unsubscribe in `ngOnDestroy` to prevent memory leaks.
+
+```typescript expandable
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { CometChatMessageEvents } from '@cometchat/chat-uikit-angular';
+import { Subscription } from 'rxjs';
+
+@Component({
+ selector: 'app-chat',
+ standalone: true,
+ template: ``
+})
+export class ChatComponent implements OnInit, OnDestroy {
+ private messageSubscription?: Subscription;
+
+ ngOnInit(): void {
+ this.messageSubscription = CometChatMessageEvents.ccMessageSent.subscribe(
+ (message) => {
+ console.log('Message sent:', message);
+ }
+ );
+ }
+
+ ngOnDestroy(): void {
+ this.messageSubscription?.unsubscribe();
+ }
+}
+```
+
+
+When subscribing to multiple events, consider using a `Subscription` container to manage all subscriptions together.
+
+
+```typescript expandable
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import {
+ CometChatMessageEvents,
+ CometChatConversationEvents,
+ CometChatGroupEvents
+} from '@cometchat/chat-uikit-angular';
+import { Subscription } from 'rxjs';
+
+@Component({
+ selector: 'app-chat-listener',
+ standalone: true,
+ template: ``
+})
+export class ChatListenerComponent implements OnInit, OnDestroy {
+ private subscriptions = new Subscription();
+
+ ngOnInit(): void {
+ this.subscriptions.add(
+ CometChatMessageEvents.ccMessageSent.subscribe((message) => {
+ console.log('Message sent:', message);
+ })
+ );
+
+ this.subscriptions.add(
+ CometChatConversationEvents.ccConversationDeleted.subscribe((conversation) => {
+ console.log('Conversation deleted:', conversation);
+ })
+ );
+
+ this.subscriptions.add(
+ CometChatGroupEvents.ccGroupMemberAdded.subscribe((data) => {
+ console.log('Member added:', data);
+ })
+ );
+ }
+
+ ngOnDestroy(): void {
+ this.subscriptions.unsubscribe();
+ }
+}
+```
diff --git a/ui-kit/angular/extensions.mdx b/ui-kit/angular/extensions.mdx
index e7cd18089..e08371ad3 100644
--- a/ui-kit/angular/extensions.mdx
+++ b/ui-kit/angular/extensions.mdx
@@ -1,132 +1,185 @@
---
title: "Extensions"
-description: "Extensions — CometChat documentation."
+description: "Enable CometChat Angular UI Kit extensions for stickers, polls, collaboration tools, reactions, moderation, smart replies, and link previews."
---
## Overview
-CometChat's UI Kit offers built-in support for various extensions, enriching the chatting experience with enhanced functionality. These extensions augment your chat application, making it more interactive, secure, and efficient.
+CometChat UI Kit includes built-in support for extensions that add interactive, secure, and efficient features to chat. Extensions are activated from the CometChat Dashboard and auto-integrate into UI Kit components on init and login.
-Activating extensions within CometChat is a straightforward process through your application's dashboard. For detailed instructions, refer to our guide on [Extensions](/fundamentals/extensions-overview).
+
+Ensure `CometChatUIKit.init()` has completed and the user is logged in. Extensions must be activated from the CometChat Dashboard.
+
-Once you've enabled your desired extension in the dashboard, it seamlessly integrates into your CometChat application upon initialization and successful login. It's important to note that extension features will only be available if they are supported by the CometChat UI Kit.
+## Built-in Extensions
-CometChat's UI Kit provides native support for 12 powerful extensions. This effortless integration enables you to enhance your chat application with engaging features without any additional coding. Simply enable the desired extensions from the CometChat Dashboard, and they will automatically enhance the relevant components of your application, providing a richer and more engaging experience for your users.
+The grouping below mirrors the CometChat Dashboard.
-## Built-in Extensions
+### User Experience
+
+#### Bitly
-Here's a guide on how you can enable and integrate these extensions:
+Shortens long URLs in text messages using Bitly.
-### Stickers
+#### Link Preview
-The Stickers extension allows users to express their emotions more creatively. It adds a much-needed fun element to the chat by allowing users to send various pre-designed stickers. For a comprehensive understanding and guide on implementing and using the Sticker Extension, refer to our specific guide on the [Sticker Extension](/fundamentals/stickers).
+Displays a summary (title, description, thumbnail) for URLs shared in chat.
-Once you have successfully activated the [Sticker Extension](/fundamentals/stickers) from your CometChat Dashboard, the feature will automatically be incorporated into the [Message Composer](/ui-kit/angular/message-composer) component of UI Kits.
+Auto-integrates into the Message Bubble of [cometchat-message-list](/ui-kit/angular/components/cometchat-message-list) when activated.
-
+
-### Polls
+#### Message Shortcuts
-The Polls extension enhances group discussions by allowing users to create polls. Users can ask questions with a predefined list of answers, enabling a quick, organized way to gather group opinions. For a comprehensive understanding and guide on implementing and using the Polls Extension, refer to our specific guide on the [Polls Extension](/fundamentals/polls).
+Sends predefined messages using short codes (e.g., `!hb` expands to `Happy birthday!`).
-Once you have successfully activated the [Polls Extension](/fundamentals/polls) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/angular/message-composer) component of UI Kits.
+#### Pin Message
-
-
-
+Pins important messages in a conversation for easy access.
-### Collaborative Whiteboard
+#### Rich Media Preview
-The Collaborative Whiteboard extension facilitates real-time collaboration. Users can draw, brainstorm, and share ideas on a shared digital whiteboard. For a comprehensive understanding and guide on implementing and using the Collaborative Whiteboard Extension, refer to our specific guide on the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard).
+Generates rich preview panels for URLs.
-Once you have successfully activated the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/angular/message-composer) component of UI Kits.
+#### Save Message
-
-
-
+Bookmarks messages for later reference. Saved messages are private to the user.
-### Collaborative Document
+#### Thumbnail Generation
-With the Collaborative Document extension, users can work together on a shared document. This feature is essential for remote teams where document collaboration is a recurring requirement. For a comprehensive understanding and guide on implementing and using the Collaborative Document Extension, refer to our specific guide on the [Collaborative Document Extension](/fundamentals/collaborative-document).
+Creates smaller preview images for shared images, reducing bandwidth.
-Once you have successfully activated the [Collaborative Document Extension](/fundamentals/collaborative-document) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/angular/message-composer) component of UI Kits.
+Auto-integrates into the Message Bubble of [cometchat-message-list](/ui-kit/angular/components/cometchat-message-list) when activated.
-
+
-### Message Reactions
+#### TinyURL
-Message Reactions extension lets users express their emotions towards a message by choosing from a range of emojis. It provides a quick way to respond to any shared message. For a comprehensive understanding and guide on implementing and using the Message Reactions Extension, refer to our specific guide on the [Message Reactions Extension](/fundamentals/reactions).
+URL shortening using TinyURL.
-Once you have successfully activated the [Message Reactions Extension](/fundamentals/reactions) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of [MessageList Component](/ui-kit/angular/message-list) component of UI Kits.
+#### Voice Transcription
-
-
-
+Converts audio messages to text.
-### Message Translation
+### User Engagement
-The Message Translation extension in CometChat is designed to translate any message into your local locale. It eliminates language barriers, making the chat more inclusive. For a comprehensive understanding and guide on implementing and using the Message Translation Extension, refer to our specific guide on the [Message Translation Extension](/fundamentals/message-translation).
+#### Giphy
-Once you have successfully activated the [Message Translation Extension](/fundamentals/message-translation) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of [MessageList Component](/ui-kit/angular/message-list) component of UI Kits.
+Search and share GIFs from Giphy.
+
+#### Message Translation
+
+Translates messages into the local locale.
+
+Auto-integrates into the Action Sheet of [cometchat-message-list](/ui-kit/angular/components/cometchat-message-list) when activated.
-
+
-### Link Preview
+#### Polls
-The Link Preview extension provides a summary of the URL shared in the chat. It includes the title, a description, and a thumbnail image from the web page. For a comprehensive understanding and guide on implementing and using the Link Preview Extension, refer to our specific guide on the [Link Preview Extension](/fundamentals/link-preview).
+Creates polls in group discussions with predefined answer options.
-Once you have successfully activated the [Link Preview Extension](/fundamentals/link-preview) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/angular/message-list) component of UI Kits.
+Auto-integrates into the Action Sheet of [cometchat-message-composer](/ui-kit/angular/components/cometchat-message-composer) when activated.
-
+
-### Profanity Filter
+#### Reminders
+
+Sets reminders for messages or creates personal reminders. A bot sends a notification when due.
-The Profanity Filter extension helps in maintaining the chat decorum by censoring obscene and inappropriate words in the messages. For a comprehensive understanding and guide on implementing and using the Profanity Filter Extension, refer to our specific guide on the [Legacy Extensions](/moderation/legacy-extensions).
+#### Stickers
-Once you have successfully activated the Profanity Filter Extension from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/angular/message-list) component of UI Kits.
+Sends pre-designed stickers in chat.
+
+Auto-integrates into [cometchat-message-composer](/ui-kit/angular/components/cometchat-message-composer) when activated.
-
+
-### Data Masking
+#### Stipop
-The Data Masking extension helps secure sensitive data by masking information like credit card numbers and phone numbers in a chat message. For a comprehensive understanding and guide on implementing and using the Data Masking Extension, refer to our specific guide on the [Legacy Extensions](/moderation/legacy-extensions).
+Integrates Stipop's sticker library.
-Once you have successfully activated the Data Masking Extension from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/angular/message-list) component of UI Kits.
+#### Tenor
-
-
-
+Search and share GIFs from Tenor.
+
+### Collaboration
-### Image Moderation
+#### Collaborative Document
-The Image Moderation extension uses machine learning to detect and filter out inappropriate or explicit images shared in the chat. For a comprehensive understanding and guide on implementing and using the Image Moderation Extension, refer to our specific guide on the [Legacy Extensions](/moderation/legacy-extensions).
+Shared document editing for real-time collaboration.
-Once you have successfully activated the Image Moderation Extension from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/angular/message-list) component of UI Kits.
+Auto-integrates into the Action Sheet of [cometchat-message-composer](/ui-kit/angular/components/cometchat-message-composer) when activated.
-
+
-### Thumbnail Generation
+#### Collaborative Whiteboard
-The Thumbnail Generation extension automatically creates a smaller preview image whenever a larger image is shared, helping to reduce the upload/download time and bandwidth usage. For a comprehensive understanding and guide on implementing and using the Thumbnail Generation Extension, refer to our specific guide on the [Thumbnail Generation Extension](/fundamentals/thumbnail-generation).
+Real-time shared whiteboard for drawing and brainstorming.
-Once you have successfully activated the [Thumbnail Generation Extension](/fundamentals/thumbnail-generation) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/angular/message-list) component of UI Kits.
+Auto-integrates into the Action Sheet of [cometchat-message-composer](/ui-kit/angular/components/cometchat-message-composer) when activated.
-
+
-### Smart Replies
+### Security
+
+#### Disappearing Messages
+
+Messages auto-delete after a specified interval. Works for 1:1 and group messages.
+
+### Customer Support
+
+#### Chatwoot
+
+Routes user messages to Chatwoot for customer support.
+
+#### Intercom
+
+Integrates Intercom for in-app customer support.
+
+### Smart Chat Features
+
+#### Conversation Starter
+
+AI-generated opening messages for new chats. See [AI Smart Chat Features](/ui-kit/angular/ai-features).
+
+#### Smart Replies
+
+AI-generated response suggestions based on conversation context. See [AI Smart Chat Features](/ui-kit/angular/ai-features).
+
+#### Conversation Summary
+
+AI-generated recap of long conversations. See [AI Smart Chat Features](/ui-kit/angular/ai-features).
+
+---
-Smart Replies extension provides automated, predictive text responses, making the conversation more efficient by reducing the response time. For a comprehensive understanding and guide on implementing and using the Smart Replies Extension, refer to our specific guide on the [Smart Replies Extension](/fundamentals/smart-replies).
+## Next Steps
+
+
+
+ Customize the composer where most extensions appear
+
+
+ Customize the message list for extension-rendered content
+
+
+ Core chat features like messaging and reactions
+
+
+ AI-powered chat capabilities
+
+
diff --git a/ui-kit/angular/v5/guides/block-unblock-user.mdx b/ui-kit/angular/guides/block-unblock-user.mdx
similarity index 95%
rename from ui-kit/angular/v5/guides/block-unblock-user.mdx
rename to ui-kit/angular/guides/block-unblock-user.mdx
index 626e49602..c4f5b43d0 100644
--- a/ui-kit/angular/v5/guides/block-unblock-user.mdx
+++ b/ui-kit/angular/guides/block-unblock-user.mdx
@@ -14,13 +14,13 @@ description: "Implement block and unblock user functionality in CometChat Angula
| UI helpers | `cometchat-confirm-dialog` |
| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login("UID")` |
| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-angular/tree/v5/projects/sample-app) |
-| Related | [All Guides](/ui-kit/angular/v5/guides/overview) |
+| Related | [All Guides](/ui-kit/angular/guides/guides-overview) |
Block/Unblock lets users prevent specific users from sending them messages. When blocked, the message composer is hidden and replaced with an unblock prompt.
-Before starting, complete the [Integration Guide](/ui-kit/angular/v5/integration).
+Before starting, complete the [Integration Guide](/ui-kit/angular/integration).
---
@@ -204,13 +204,13 @@ export class ChatMessagesComponent implements OnInit, OnDestroy {
## Next Steps
-
+
Display and manage user lists.
-
+
Customize the message input component.
-
+
Browse all feature and formatter guides.
diff --git a/ui-kit/angular/v5/guides/call-log-details.mdx b/ui-kit/angular/guides/call-log-details.mdx
similarity index 94%
rename from ui-kit/angular/v5/guides/call-log-details.mdx
rename to ui-kit/angular/guides/call-log-details.mdx
index af3c04e51..bbff2150c 100644
--- a/ui-kit/angular/v5/guides/call-log-details.mdx
+++ b/ui-kit/angular/guides/call-log-details.mdx
@@ -13,13 +13,13 @@ description: "Build a detailed call insights screen with metadata, participants,
| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login("UID")` + Calls SDK installed |
| Purpose | Detailed call insights screen with metadata, participants, and recordings |
| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-angular/tree/v5/projects/sample-app) |
-| Related | [All Guides](/ui-kit/angular/v5/guides/overview) |
+| Related | [All Guides](/ui-kit/angular/guides/guides-overview) |
Call Log Details shows call metadata, participants, duration, recordings, and history when a user selects a call from the Calls tab.
-Before starting, complete the [Integration Guide](/ui-kit/angular/v5/integration) and install `@cometchat/calls-sdk-javascript`.
+Before starting, complete the [Integration Guide](/ui-kit/angular/integration) and install `@cometchat/calls-sdk-javascript`.
---
@@ -190,12 +190,11 @@ Determine call direction (incoming/outgoing) by comparing the initiator's UID ag
import { CometChat } from '@cometchat/chat-sdk-javascript';
import {
CometChatUIKitConstants,
- CometChatUIKitLoginListener,
CometChatLocalize
} from '@cometchat/chat-uikit-angular';
-getCallStatus(call: CometChat.Call): string {
- const loggedInUser = CometChatUIKitLoginListener.getLoggedInUser();
+async getCallStatus(call: CometChat.Call): Promise {
+ const loggedInUser = await CometChat.getLoggedinUser();
const initiator = (call as any).getInitiator?.();
const isSentByMe = initiator?.getUid() === loggedInUser?.getUid();
const callStatus = call.getStatus();
@@ -290,13 +289,13 @@ export class CallsWithDetailsComponent implements OnDestroy {
## Next Steps
-
+
The call logs component reference.
-
+
Overview of calling capabilities.
-
+
Browse all feature and formatter guides.
diff --git a/ui-kit/angular/guides/custom-message-types.mdx b/ui-kit/angular/guides/custom-message-types.mdx
new file mode 100644
index 000000000..e776e1980
--- /dev/null
+++ b/ui-kit/angular/guides/custom-message-types.mdx
@@ -0,0 +1,370 @@
+---
+title: "Custom Message Types"
+description: "Register custom message bubble types, override conversation subtitles, and include custom messages in fetching."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-angular` |
+| Key services | `MessageBubbleConfigService`, `ConversationSubtitleService`, `MessageListService` |
+| Required setup | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login("UID")` |
+| Purpose | Add custom message types with custom bubble templates, subtitle overrides, and fetch inclusion |
+| Features | Custom bubble rendering, subtitle formatting, icon overrides, message type fetching |
+| Related | [Message Bubble](/ui-kit/angular/components/cometchat-message-bubble) \| [Conversations](/ui-kit/angular/components/cometchat-conversations) \| [Message List](/ui-kit/angular/components/cometchat-message-list) |
+
+
+
+The CometChat Angular UIKit supports extending the message system with custom message types. You can register custom bubble templates, override how messages appear in the conversation list, and include custom types in message fetching — all without modifying UIKit source code.
+
+| Capability | Description |
+| --- | --- |
+| Custom bubble templates | Register `ng-template` views for new message types |
+| Conversation subtitle override | Control last message text per message type |
+| Icon overrides | Set custom icons for conversation list items |
+| Fetch inclusion | Include custom types in the message request builder |
+
+---
+
+## Custom Message Bubble
+
+Use `MessageBubbleConfigService` to register templates for custom message types. The message type key format is `{type}_{category}` (e.g., `location_custom`).
+
+### Register a Custom Content View
+
+```typescript expandable
+import { Component, ViewChild, TemplateRef, AfterViewInit, inject } from '@angular/core';
+import { MessageBubbleConfigService } from '@cometchat/chat-uikit-angular';
+
+@Component({
+ selector: 'app-chat',
+ template: `
+
+
+ ![Location]()
+ {{ getLocationLabel(message) }}
+
+
+
+ ;
+
+ private bubbleConfig = inject(MessageBubbleConfigService);
+
+ ngAfterViewInit() {
+ this.bubbleConfig.setBubbleView('location_custom', {
+ contentView: this.locationBubble
+ });
+ }
+
+ getMapUrl(message: any): string {
+ const data = message.getCustomData();
+ return `https://maps.example.com/static?lat=${data.latitude}&lng=${data.longitude}`;
+ }
+
+ getLocationLabel(message: any): string {
+ return message.getCustomData()?.label || 'Shared location';
+ }
+}
+```
+
+The template receives the message object as `$implicit` context, so `let-message` gives you full access to the `CometChat.BaseMessage`.
+
+### Full Bubble Override
+
+To replace the entire bubble structure (header, content, footer, status), register a `bubbleView`:
+
+```typescript
+this.bubbleConfig.setBubbleView('location_custom', {
+ bubbleView: this.fullLocationBubble
+});
+```
+
+The `bubbleView` template context includes `$implicit` (message), `alignment`, and `group`.
+
+### Partial Override
+
+Register only the parts you want to customize. Unregistered parts use defaults:
+
+```typescript
+this.bubbleConfig.setBubbleView('location_custom', {
+ contentView: this.locationContent,
+ footerView: this.locationFooter
+ // headerView, statusInfoView, etc. use defaults
+});
+```
+
+---
+
+## Conversation Subtitle Override
+
+Use `ConversationSubtitleService` to control the last message text shown in the conversation list for specific message types.
+
+### Register a Subtitle Formatter
+
+```typescript expandable
+import { inject } from '@angular/core';
+import { ConversationSubtitleService } from '@cometchat/chat-uikit-angular';
+
+export class AppComponent {
+ private subtitleService = inject(ConversationSubtitleService);
+
+ ngOnInit() {
+ // Override subtitle for location messages
+ this.subtitleService.registerSubtitleFormatter('location_custom', (message) => {
+ return '📍 Shared a location';
+ });
+
+ // Override subtitle for payment messages
+ this.subtitleService.registerSubtitleFormatter('payment_custom', (message) => {
+ const data = (message as any).getCustomData();
+ return `💰 Payment: $${data.amount}`;
+ });
+ }
+}
+```
+
+### Override Subtitle Icon
+
+```typescript
+this.subtitleService.registerSubtitleIconOverride('location_custom', 'location-pin');
+```
+
+### Unregister
+
+```typescript
+this.subtitleService.unregisterSubtitleFormatter('location_custom');
+```
+
+---
+
+## Custom Message Fetching
+
+By default, the message list fetches these types and categories:
+
+**Default Types:** `text`, `file`, `image`, `audio`, `video`, `groupMember`, `form`, `scheduler`, `card`, `assistant`, `extension_sticker`, `extension_poll`, `extension_whiteboard`, `extension_document`, `meeting`
+
+**Default Categories:** `message`, `custom`, `call`, `interactive`, `agentic`, `action` (action is excluded when `hideGroupActionMessages` is true)
+
+### Inspect Current Defaults
+
+```typescript expandable
+import { inject } from '@angular/core';
+import { MessageListService } from '@cometchat/chat-uikit-angular';
+
+export class AppComponent {
+ private messageListService = inject(MessageListService);
+
+ ngOnInit() {
+ console.log(this.messageListService.getAllMessageTypes());
+ console.log(this.messageListService.getAllMessageCategories());
+ }
+}
+```
+
+### Add Custom Types and Categories
+
+Append to the existing defaults:
+
+```typescript
+// Add custom message types alongside defaults
+this.messageListService.addCustomMessageTypes(['location', 'payment']);
+
+// Add custom categories alongside defaults
+this.messageListService.addCustomMessageCategories(['custom']);
+```
+
+### Replace Types and Categories Entirely
+
+Fully replace the defaults with your own list:
+
+```typescript
+// Only fetch text and image messages
+this.messageListService.setMessageTypes(['text', 'image', 'location']);
+
+// Only fetch message and custom categories
+this.messageListService.setMessageCategories(['message', 'custom']);
+```
+
+Pass `null` to revert to the built-in defaults:
+
+```typescript
+this.messageListService.setMessageTypes(null);
+this.messageListService.setMessageCategories(null);
+```
+
+### Remove Custom Types
+
+```typescript
+this.messageListService.removeCustomMessageTypes(['location']);
+this.messageListService.removeCustomMessageCategories(['custom']);
+```
+
+
+If you provide a custom `MessagesRequestBuilder` via `setMessagesRequestBuilder`, custom types/categories registered via `addCustomMessageTypes`/`addCustomMessageCategories` are not appended. The custom builder is used as-is.
+
+
+---
+
+## End-to-End Example: Location Sharing
+
+A complete example showing a custom "location" message type with bubble template, subtitle override, and fetch inclusion.
+
+
+
+```typescript expandable
+import {
+ Component, ViewChild, TemplateRef, AfterViewInit, inject, OnInit
+} from '@angular/core';
+import { CometChat } from '@cometchat/chat-sdk-javascript';
+import {
+ MessageBubbleConfigService,
+ ConversationSubtitleService,
+ MessageListService,
+ CometChatMessageListComponent,
+ CometChatConversationsComponent
+} from '@cometchat/chat-uikit-angular';
+
+@Component({
+ selector: 'app-location-demo',
+ standalone: true,
+ imports: [CometChatMessageListComponent, CometChatConversationsComponent],
+ template: `
+
+
+
+
+ ;
+
+ user: CometChat.User | undefined;
+
+ private bubbleConfig = inject(MessageBubbleConfigService);
+ private subtitleService = inject(ConversationSubtitleService);
+ private messageListService = inject(MessageListService);
+
+ ngOnInit() {
+ // 1. Include 'location' type in message fetching
+ this.messageListService.addCustomMessageTypes(['location']);
+
+ // 2. Override conversation subtitle
+ this.subtitleService.registerSubtitleFormatter('location_custom', (msg) => {
+ const data = (msg as CometChat.CustomMessage).getCustomData() as any;
+ return `📍 ${data?.address || 'Shared a location'}`;
+ });
+
+ // Load user
+ CometChat.getUser('uid').then(u => this.user = u);
+ }
+
+ ngAfterViewInit() {
+ // 3. Register custom bubble template
+ this.bubbleConfig.setBubbleView('location_custom', {
+ contentView: this.locationBubble
+ });
+ }
+
+ getAddress(message: any): string {
+ return message.getCustomData()?.address || 'Unknown location';
+ }
+
+ getMapsLink(message: any): string {
+ const data = message.getCustomData();
+ return `https://maps.google.com/?q=${data?.latitude},${data?.longitude}`;
+ }
+}
+```
+
+
+
+```typescript expandable
+// Send a custom location message
+const receiverID = 'uid';
+const customData = {
+ latitude: 37.7749,
+ longitude: -122.4194,
+ address: '123 Main St, San Francisco, CA'
+};
+
+const customMessage = new CometChat.CustomMessage(
+ receiverID,
+ CometChat.RECEIVER_TYPE.USER,
+ 'location',
+ customData
+);
+
+CometChat.sendCustomMessage(customMessage).then(
+ (message) => console.log('Location sent:', message),
+ (error) => console.error('Error:', error)
+);
+```
+
+
+
+---
+
+## API Reference
+
+### MessageBubbleConfigService
+
+| Method | Description |
+| --- | --- |
+| `setBubbleView(typeKey, partMap)` | Register templates for a message type |
+| `setMessageTemplates(maps)` | Register templates for multiple types at once |
+| `setGlobalView(part, template)` | Set a global template for a bubble part |
+| `getView(typeKey, part)` | Get the configured template for a type and part |
+
+### ConversationSubtitleService
+
+| Method | Description |
+| --- | --- |
+| `registerSubtitleFormatter(typeKey, formatter)` | Register a subtitle formatter callback |
+| `unregisterSubtitleFormatter(typeKey)` | Remove a subtitle formatter |
+| `registerSubtitleIconOverride(typeKey, iconName)` | Override the subtitle icon |
+| `getSubtitle(typeKey, message)` | Get formatted subtitle (or null) |
+| `getIconOverride(typeKey)` | Get icon override (or null) |
+| `hasFormatter(typeKey)` | Check if a formatter is registered |
+
+### MessageListService
+
+| Method | Description |
+| --- | --- |
+| `getAllMessageTypes()` | Get the current effective list of message types |
+| `getAllMessageCategories()` | Get the current effective list of message categories |
+| `addCustomMessageTypes(types)` | Append custom types to the defaults |
+| `addCustomMessageCategories(categories)` | Append custom categories to the defaults |
+| `setMessageTypes(types)` | Replace the entire types array (pass `null` to reset) |
+| `setMessageCategories(categories)` | Replace the entire categories array (pass `null` to reset) |
+| `removeCustomMessageTypes(types)` | Remove previously added custom types |
+| `removeCustomMessageCategories(categories)` | Remove previously added custom categories |
+
+---
+
+## Next Steps
+
+
+
+ Customize the message bubble component.
+
+
+ Customize the conversations list.
+
+
+ Override text and translations.
+
+
+ Customize date and time display.
+
+
diff --git a/ui-kit/angular/guides/custom-text-formatter.mdx b/ui-kit/angular/guides/custom-text-formatter.mdx
new file mode 100644
index 000000000..d7b31d5bb
--- /dev/null
+++ b/ui-kit/angular/guides/custom-text-formatter.mdx
@@ -0,0 +1,296 @@
+---
+title: "Custom Text Formatter"
+description: "Extend the CometChatTextFormatter base class to implement custom inline text patterns with regex and callbacks in Angular."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-angular` |
+| Key class | `CometChatTextFormatter` (abstract base class for custom formatters) |
+| Required setup | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login("UID")` |
+| Purpose | Extend to create custom inline text patterns with regex, styling, and callbacks |
+| Features | Text formatting, customizable styles, dynamic text replacement, input field integration, key event callbacks |
+| Related | [ShortCut Formatter](/ui-kit/angular/guides/shortcut-formatter) \| [Mentions Formatter](/ui-kit/angular/guides/mentions-formatter) \| [All Guides](/ui-kit/angular/guides/guides-overview) |
+
+
+
+`CometChatTextFormatter` is an abstract class for formatting text in the message composer and message bubbles. Extend it to build custom formatters — hashtags, keywords, or any regex-based pattern.
+
+| Capability | Description |
+| --- | --- |
+| Text formatting | Auto-format text based on regex patterns and styles |
+| Custom styles | Set colors, fonts, and backgrounds for matched text |
+| Dynamic replacement | Regex-based find-and-replace in user input |
+| Input integration | Real-time monitoring of the composer input field |
+| Key event callbacks | Hooks for `keyUp` and `keyDown` events |
+
+
+Always wrap formatted output in a `` with a unique CSS class (e.g. `"custom-hashtag"`). This tells the UI Kit to render it as-is instead of sanitizing it.
+
+
+---
+
+## Steps
+
+### 1. Import the base class
+
+```typescript
+import { CometChatTextFormatter } from "@cometchat/chat-uikit-angular";
+```
+
+### 2. Extend it
+
+```typescript
+class HashTagTextFormatter extends CometChatTextFormatter {
+ readonly id = "hashtag-formatter";
+ override priority = 15;
+
+ getRegex(): RegExp {
+ return /\B#(\w+)\b/g;
+ }
+
+ format(text: string): string {
+ // Apply formatting logic
+ return text;
+ }
+}
+```
+
+### 3. Implement the regex pattern
+
+Return the regex that matches your target pattern from `getRegex()`:
+
+```typescript
+getRegex(): RegExp {
+ return /\B#(\w+)\b/g;
+}
+```
+
+### 4. Implement the format method
+
+The `format()` method receives the raw text and returns formatted HTML:
+
+```typescript
+format(text: string): string {
+ if (!text) {
+ this.originalText = "";
+ this.formattedText = "";
+ return "";
+ }
+
+ this.originalText = text;
+ this.formattedText = text.replace(
+ this.getRegex(),
+ '#$1'
+ );
+ return this.formattedText;
+}
+```
+
+### 5. Optionally implement shouldFormat
+
+Control when the formatter is applied:
+
+```typescript
+shouldFormat(text: string, message?: CometChat.BaseMessage): boolean {
+ return this.getRegex().test(text);
+}
+```
+
+---
+
+## Example
+
+A hashtag formatter used with `cometchat-message-list` and `cometchat-message-composer`.
+
+
+
+
+
+
+
+```typescript expandable
+import { CometChatTextFormatter } from "@cometchat/chat-uikit-angular";
+
+export class HashTagTextFormatter extends CometChatTextFormatter {
+ readonly id = "hashtag-text-formatter";
+ override priority = 15;
+
+ private hashtags: string[] = [];
+
+ getRegex(): RegExp {
+ return /\B#(\w+)\b/g;
+ }
+
+ format(text: string): string {
+ if (!text) {
+ this.originalText = "";
+ this.formattedText = "";
+ this.hashtags = [];
+ this.metadata = { hashtags: this.hashtags };
+ return "";
+ }
+
+ this.originalText = text;
+ this.hashtags = [];
+
+ this.formattedText = text.replace(this.getRegex(), (match, tag) => {
+ this.hashtags.push(`#${tag}`);
+ return `#${tag}`;
+ });
+
+ this.metadata = { hashtags: this.hashtags };
+ return this.formattedText;
+ }
+
+ getHashtags(): string[] {
+ return [...this.hashtags];
+ }
+
+ override reset(): void {
+ super.reset();
+ this.hashtags = [];
+ }
+}
+```
+
+
+
+
+Pass the formatter via the `textFormatters` input on the message list and composer.
+
+```typescript expandable
+import { Component, OnInit } from "@angular/core";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatMessageListComponent, CometChatMessageComposerComponent } from "@cometchat/chat-uikit-angular";
+import { HashTagTextFormatter } from "./HashTagTextFormatter";
+
+@Component({
+ selector: "app-message-demo",
+ standalone: true,
+ imports: [CometChatMessageListComponent, CometChatMessageComposerComponent],
+ template: `
+
+
+
+
+ `,
+})
+export class MessageDemoComponent implements OnInit {
+ chatUser: CometChat.User | undefined;
+ textFormatters = [new HashTagTextFormatter()];
+
+ ngOnInit() {
+ CometChat.getUser("uid").then((user) => {
+ this.chatUser = user;
+ });
+ }
+}
+```
+
+
+
+---
+
+## Methods Reference
+
+| Field | Type | Description |
+| --- | --- | --- |
+| `id` | `abstract readonly string` | Unique identifier for the formatter instance |
+| `priority` | `number` | Execution order in the pipeline (lower = earlier, default 100) |
+| `getRegex()` | `abstract method` | Returns the regex pattern for detecting formattable content |
+| `format(text)` | `abstract method` | Applies formatting transformations and returns formatted text |
+| `getFormattedText()` | `method` | Returns the stored formatted text after `format()` is called |
+| `getOriginalText()` | `method` | Returns the original text before formatting |
+| `getMetadata()` | `method` | Returns metadata extracted during formatting |
+| `reset()` | `method` | Clears original text, formatted text, and metadata |
+| `shouldFormat(text, message?)` | `method` | Returns whether this formatter should process the given text (default: true) |
+
+
+Formatters are applied in priority order (lower priority number = earlier in pipeline). The built-in URL formatter uses priority 10, mentions uses 20. Choose your custom formatter's priority accordingly.
+
+
+---
+
+## Override Methods
+
+
+
+
+The core method that applies formatting. Store original text, apply transformations, store metadata, and return the result.
+
+```typescript
+format(text: string): string {
+ if (!text) {
+ this.originalText = "";
+ this.formattedText = "";
+ return "";
+ }
+ this.originalText = text;
+ this.formattedText = this.customLogicToFormatText(text);
+ return this.formattedText;
+}
+```
+
+
+
+
+Returns the regex pattern used to detect formattable content.
+
+```typescript
+getRegex(): RegExp {
+ return /\B#(\w+)\b/g;
+}
+```
+
+
+
+
+Optionally override to conditionally skip formatting.
+
+```typescript
+shouldFormat(text: string, message?: CometChat.BaseMessage): boolean {
+ // Only format text messages
+ return message?.getType() === 'text';
+}
+```
+
+
+
+
+Override to clear custom state alongside the base state.
+
+```typescript expandable
+override reset(): void {
+ super.reset();
+ // Clear any custom state
+ this.customData = [];
+}
+```
+
+
+
+---
+
+## Next Steps
+
+
+
+ Add @mentions with styled tokens.
+
+
+ Customize the message input component.
+
+
+ Browse all feature and formatter guides.
+
+
+ Implement text expansion shortcuts.
+
+
diff --git a/ui-kit/angular/v5/guides/group-chat.mdx b/ui-kit/angular/guides/group-chat.mdx
similarity index 89%
rename from ui-kit/angular/v5/guides/group-chat.mdx
rename to ui-kit/angular/guides/group-chat.mdx
index 844bf8a4b..8b302c2f5 100644
--- a/ui-kit/angular/v5/guides/group-chat.mdx
+++ b/ui-kit/angular/guides/group-chat.mdx
@@ -13,13 +13,13 @@ description: "Implement group management including create, join, members, roles,
| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login("UID")` |
| Features | Create public/private/password-protected groups, manage members, roles, ownership transfer |
| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-angular/tree/v5/projects/sample-app) |
-| Related | [All Guides](/ui-kit/angular/v5/guides/overview) |
+| Related | [All Guides](/ui-kit/angular/guides/guides-overview) |
This guide covers the full group lifecycle: creating groups, joining them, managing members, changing roles, and transferring ownership.
-Before starting, complete the [Integration Guide](/ui-kit/angular/v5/integration).
+Before starting, complete the [Integration Guide](/ui-kit/angular/integration).
---
@@ -106,8 +106,7 @@ Handle joining for both public and password-protected groups. On success, emit `
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import {
- CometChatGroupEvents,
- CometChatUIKitLoginListener
+ CometChatGroupEvents
} from '@cometchat/chat-uikit-angular';
import { FormsModule } from '@angular/forms';
@@ -132,19 +131,20 @@ export class JoinGroupComponent {
password = '';
error = false;
- joinGroup(): void {
- CometChat.joinGroup(this.group.getGuid(), this.group.getType(), this.password)
- .then((joinedGroup) => {
- const loggedInUser = CometChatUIKitLoginListener.getLoggedInUser();
- CometChatGroupEvents.ccGroupMemberJoined.next({
- joinedGroup,
- joinedUser: loggedInUser
- });
- this.groupJoined.emit(joinedGroup);
- })
- .catch(() => {
- this.error = true;
+ async joinGroup(): Promise {
+ try {
+ const joinedGroup = await CometChat.joinGroup(
+ this.group.getGuid(), this.group.getType(), this.password
+ );
+ const loggedInUser = await CometChat.getLoggedinUser();
+ CometChatGroupEvents.ccGroupMemberJoined.next({
+ joinedGroup,
+ joinedUser: loggedInUser
});
+ this.groupJoined.emit(joinedGroup);
+ } catch {
+ this.error = true;
+ }
}
}
```
@@ -216,8 +216,7 @@ Promote or demote a member by calling `CometChat.updateGroupMemberScope()`. Emit
```typescript expandable
import { CometChat } from '@cometchat/chat-sdk-javascript';
import {
- CometChatGroupEvents,
- CometChatUIKitLoginListener
+ CometChatGroupEvents
} from '@cometchat/chat-uikit-angular';
async changeMemberScope(
@@ -232,8 +231,9 @@ async changeMemberScope(
group.getGuid()
);
+ const loggedInUser = await CometChat.getLoggedinUser();
CometChatGroupEvents.ccGroupMemberScopeChanged.next({
- changedBy: CometChatUIKitLoginListener.getLoggedInUser()!,
+ changedBy: loggedInUser!,
changedUser: member,
changedIn: group,
newScope,
@@ -288,13 +288,13 @@ onOwnershipTransferred(newOwner: CometChat.GroupMember): void {
## Next Steps
-
+
Display and manage group lists.
-
+
Display and manage group member lists.
-
+
Browse all feature and formatter guides.
diff --git a/ui-kit/angular/guides/guides-overview.mdx b/ui-kit/angular/guides/guides-overview.mdx
new file mode 100644
index 000000000..2dea5a2c2
--- /dev/null
+++ b/ui-kit/angular/guides/guides-overview.mdx
@@ -0,0 +1,65 @@
+---
+title: "Guides"
+sidebarTitle: "Overview"
+description: "Index of task-oriented feature guides for the CometChat Angular UIKit."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-angular` |
+| Purpose | Index of task-oriented feature guides for the Angular UIKit |
+| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-angular/tree/v5/projects/sample-app) |
+| Components | [Components Overview](/ui-kit/angular/components/components-overview) |
+| Guides | [Threaded Messages](/ui-kit/angular/guides/threaded-messages) · [Group Chat](/ui-kit/angular/guides/group-chat) · [New Chat](/ui-kit/angular/guides/new-chat) · [Search Messages](/ui-kit/angular/guides/threaded-messages) · [Block/Unblock](/ui-kit/angular/guides/block-unblock-user) · [Message Privately](/ui-kit/angular/guides/message-privately) · [Call Log Details](/ui-kit/angular/guides/call-log-details) · [Custom Message Types](/ui-kit/angular/guides/guides-overview) |
+
+
+
+> This page indexes focused, task-oriented feature guides for the Angular UIKit. Each guide shows how to implement a specific capability end-to-end using UI components.
+
+## When to Use These Guides
+
+Use these guides after completing the base [Integration Guide](/ui-kit/angular/integration). They help you layer additional UX without rewriting core chat flows.
+
+## Guide Directory
+
+| Guide | Description |
+|:------|:------------|
+| [Threaded Messages](/ui-kit/angular/guides/threaded-messages) | Implement threaded message replies with parent context, reply list, and focused thread composer. |
+| [Group Chat](/ui-kit/angular/guides/group-chat) | Create and join groups, view members, manage roles and scopes, transfer ownership. |
+| [New Chat](/ui-kit/angular/guides/new-chat) | Start new one-to-one or group conversations with user and group discovery. |
+| [Search Messages](/ui-kit/angular/guides/threaded-messages) | Add full-text message search across conversations with result routing. |
+| [Block / Unblock User](/ui-kit/angular/guides/block-unblock-user) | Block or unblock users in one-to-one chats; hide composer and show unblock prompt. |
+| [Message Privately](/ui-kit/angular/guides/message-privately) | Launch a direct one-to-one chat from a user profile or group member list. |
+| [Call Log Details](/ui-kit/angular/guides/call-log-details) | Display detailed call insights: metadata, participants, join/leave history, recordings. |
+| [Custom Message Types](/ui-kit/angular/guides/guides-overview) | Register custom message types with bubble templates, conversation subtitle overrides, and fetch inclusion. |
+| [Custom Text Formatter](/ui-kit/angular/guides/custom-text-formatter) | Extend the base formatter to implement custom inline patterns with regex and callbacks. |
+| [Mentions Formatter](/ui-kit/angular/guides/mentions-formatter) | Add @mentions with styled tokens, suggestion list, and click handling. |
+| [URL Formatter](/ui-kit/angular/guides/shortcut-formatter) | Detect and style plain URLs as clickable links with optional tracking logic. |
+| [Shortcut Formatter](/ui-kit/angular/guides/shortcut-formatter) | Provide shortcut-style text expansions invoking extension APIs or dialogs. |
+| [Hashtag Formatter](/ui-kit/angular/guides/hashtag-formatter) | Highlight #hashtags in the composer, message bubbles, conversation last message, and edit view. |
+| [Rich Text Formatting](/ui-kit/angular/guides/custom-text-formatter) | Configure and customize the rich text editor in the message composer. |
+
+
+Need another guide? Open a request via our [Support Portal](https://help.cometchat.com/hc/en-us/requests/new).
+
+
+---
+
+## Next Steps
+
+
+
+ Set up the Angular UIKit from scratch
+
+
+ Explore all UI components
+
+
+ Theme and style the UIKit to match your brand
+
+
+ Subscribe to UIKit events for custom workflows
+
+
diff --git a/ui-kit/angular/v5/guides/hashtag-formatter.mdx b/ui-kit/angular/guides/hashtag-formatter.mdx
similarity index 95%
rename from ui-kit/angular/v5/guides/hashtag-formatter.mdx
rename to ui-kit/angular/guides/hashtag-formatter.mdx
index 6063271d3..e5b82a0d9 100644
--- a/ui-kit/angular/v5/guides/hashtag-formatter.mdx
+++ b/ui-kit/angular/guides/hashtag-formatter.mdx
@@ -12,7 +12,7 @@ description: "Build a custom hashtag formatter that highlights #tags in the mess
| Required setup | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login("UID")` |
| Purpose | Detect `#word` patterns and render them as styled, highlighted hashtags |
| Surfaces | Message composer, message bubbles (text bubble), conversation last message, edit view |
-| Related | [Custom Text Formatter](/ui-kit/angular/v5/guides/custom-text-formatter) · [Mentions Formatter](/ui-kit/angular/v5/guides/mentions-formatter) · [All Guides](/ui-kit/angular/v5/guides/overview) |
+| Related | [Custom Text Formatter](/ui-kit/angular/guides/custom-text-formatter) · [Mentions Formatter](/ui-kit/angular/guides/mentions-formatter) · [All Guides](/ui-kit/angular/guides/guides-overview) |
@@ -33,9 +33,9 @@ The formatter plugs into the `textFormatters` input on `cometchat-message-list`,
## Prerequisites
-- Angular UIKit installed and initialized ([Integration Guide](/ui-kit/angular/v5/integration))
+- Angular UIKit installed and initialized ([Integration Guide](/ui-kit/angular/integration))
- A logged-in CometChat user
-- Basic understanding of the [Custom Text Formatter](/ui-kit/angular/v5/guides/custom-text-formatter) pattern
+- Basic understanding of the [Custom Text Formatter](/ui-kit/angular/guides/custom-text-formatter) pattern
---
@@ -410,16 +410,16 @@ The raw message text stored on the server is always plain text (e.g., `Check out
## Next Steps
-
+
Learn the full formatter API and lifecycle.
-
+
Add @mentions with suggestion lists.
-
+
Customize the message input component.
-
+
Browse all feature and formatter guides.
diff --git a/ui-kit/angular/v5/guides/mentions-formatter.mdx b/ui-kit/angular/guides/mentions-formatter.mdx
similarity index 68%
rename from ui-kit/angular/v5/guides/mentions-formatter.mdx
rename to ui-kit/angular/guides/mentions-formatter.mdx
index 6548ba3d3..b9682ba01 100644
--- a/ui-kit/angular/v5/guides/mentions-formatter.mdx
+++ b/ui-kit/angular/guides/mentions-formatter.mdx
@@ -11,11 +11,11 @@ description: "Add @mentions with styled tokens, suggestion list, and click handl
| Key class | `CometChatMentionsFormatter` (extends `CometChatTextFormatter`) |
| Required setup | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login("UID")` |
| Purpose | Format @mentions with styled tokens, suggestion list, and click handling for users and group members |
-| Related | [Custom Text Formatter](/ui-kit/angular/v5/guides/custom-text-formatter) \| [All Guides](/ui-kit/angular/v5/guides/overview) |
+| Related | [Custom Text Formatter](/ui-kit/angular/guides/custom-text-formatter) \| [All Guides](/ui-kit/angular/guides/guides-overview) |
-`CometChatMentionsFormatter` extends [CometChatTextFormatter](/ui-kit/angular/v5/guides/custom-text-formatter) to format @mentions in text messages. It styles mention tokens, generates suggestion lists as users type, and handles click events on rendered mentions.
+`CometChatMentionsFormatter` extends [CometChatTextFormatter](/ui-kit/angular/guides/custom-text-formatter) to format @mentions in text messages. It styles mention tokens, generates suggestion lists as users type, and handles click events on rendered mentions.
| Capability | Description |
| --- | --- |
@@ -35,7 +35,7 @@ description: "Add @mentions with styled tokens, suggestion list, and click handl
import { CometChatMentionsFormatter } from "@cometchat/chat-uikit-angular";
const mentionsFormatter = new CometChatMentionsFormatter();
-mentionsFormatter.setCometChatUserGroupMembers(userList);
+mentionsFormatter.setUsers(userList);
```
### 2. Format a message
@@ -44,7 +44,7 @@ Provide the raw message string containing mention placeholders, then apply the f
```typescript
const unformattedMessage = "<@uid:aliceuid> just shared a photo!";
-const formattedMessage = mentionsFormatter.getFormattedText(unformattedMessage);
+const formattedMessage = mentionsFormatter.formatSdkMentions(unformattedMessage, mentionedUsers);
// Render formattedMessage in your message component
```
@@ -100,28 +100,33 @@ The `CometChatMentionsFormatter` is included by default in the message composer
### Custom mention styles
-Override the default mention token styles by setting CSS properties:
+Override the default mention token styles using CSS. The formatter applies BEM classes that you can target:
-```typescript
-const mentionsFormatter = new CometChatMentionsFormatter();
-mentionsFormatter.setMentionStyle({
- color: "#7c4dff",
- backgroundColor: "#ede7f6",
- fontWeight: "600",
- borderRadius: "4px",
- padding: "0 4px",
-});
+```css
+.cometchat-mentions-you {
+ color: var(--cometchat-static-white);
+ background-color: var(--cometchat-primary-color);
+ font-weight: 600;
+ border-radius: 4px;
+ padding: 0 4px;
+}
+
+.cometchat-mentions-other {
+ color: var(--cometchat-primary-color);
+ background-color: var(--cometchat-background-color-03);
+ font-weight: 600;
+ border-radius: 4px;
+ padding: 0 4px;
+}
```
-### Custom click handler
+### Configuring the formatter
-Handle clicks on mention tokens to navigate to user profiles or show details:
+Set the logged-in user so the formatter can distinguish self-mentions:
```typescript
-mentionsFormatter.setOnMentionClick((user: CometChat.User) => {
- console.log("Mention clicked:", user.getName());
- // Navigate to user profile or show details panel
-});
+mentionsFormatter.setLoggedInUser(loggedInUser);
+mentionsFormatter.setAllMentionConfig(true, 'everyone');
```
---
@@ -129,16 +134,16 @@ mentionsFormatter.setOnMentionClick((user: CometChat.User) => {
## Next Steps
-
+
Build custom inline text patterns.
-
+
Render real-time message threads.
-
+
Browse all feature and formatter guides.
-
+
Auto-detect and style URLs as clickable links.
diff --git a/ui-kit/angular/v5/guides/message-privately.mdx b/ui-kit/angular/guides/message-privately.mdx
similarity index 95%
rename from ui-kit/angular/v5/guides/message-privately.mdx
rename to ui-kit/angular/guides/message-privately.mdx
index 3e7500ee7..94adc9a36 100644
--- a/ui-kit/angular/v5/guides/message-privately.mdx
+++ b/ui-kit/angular/guides/message-privately.mdx
@@ -13,13 +13,13 @@ description: "Launch a direct 1:1 chat from a group member profile in CometChat
| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login("UID")` |
| Purpose | Launch a direct 1:1 chat from a group member profile |
| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-angular/tree/v5/projects/sample-app) |
-| Related | [All Guides](/ui-kit/angular/v5/guides/overview) |
+| Related | [All Guides](/ui-kit/angular/guides/guides-overview) |
Message Privately lets users start a direct 1:1 conversation with a group member without leaving the group context. The user can return to the group after the private chat.
-Before starting, complete the [Integration Guide](/ui-kit/angular/v5/integration).
+Before starting, complete the [Integration Guide](/ui-kit/angular/integration).
---
@@ -223,13 +223,13 @@ export class GroupWithPrivateChatComponent implements OnDestroy {
## Next Steps
-
+
Display and manage group member lists.
-
+
Render real-time message threads.
-
+
Browse all feature and formatter guides.
diff --git a/ui-kit/angular/v5/guides/new-chat.mdx b/ui-kit/angular/guides/new-chat.mdx
similarity index 95%
rename from ui-kit/angular/v5/guides/new-chat.mdx
rename to ui-kit/angular/guides/new-chat.mdx
index 72faa9bc3..20110a485 100644
--- a/ui-kit/angular/v5/guides/new-chat.mdx
+++ b/ui-kit/angular/guides/new-chat.mdx
@@ -13,13 +13,13 @@ description: "Build a unified new chat entry point for starting 1:1 or group con
| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login("UID")` |
| Purpose | Unified new chat entry point for starting 1:1 or group conversations |
| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-angular/tree/v5/projects/sample-app) |
-| Related | [All Guides](/ui-kit/angular/v5/guides/overview) |
+| Related | [All Guides](/ui-kit/angular/guides/guides-overview) |
The New Chat feature lets users start conversations with other users or join group conversations from a single interface.
-Before starting, complete the [Integration Guide](/ui-kit/angular/v5/integration).
+Before starting, complete the [Integration Guide](/ui-kit/angular/integration).
---
@@ -224,13 +224,13 @@ joinGroup(group: CometChat.Group): void {
## Next Steps
-
+
Display and manage conversation lists.
-
+
Display and manage group lists.
-
+
Browse all feature and formatter guides.
diff --git a/ui-kit/angular/guides/rich-text-formatting.mdx b/ui-kit/angular/guides/rich-text-formatting.mdx
new file mode 100644
index 000000000..0ab7e2302
--- /dev/null
+++ b/ui-kit/angular/guides/rich-text-formatting.mdx
@@ -0,0 +1,642 @@
+# Rich Text Formatting Guide
+
+This guide explains how to use rich text formatting in the CometChat Angular V5 UIKit, including text formatting, mentions, links, and more.
+
+## Overview
+
+The UIKit provides a custom rich text editor built on native browser APIs, offering:
+- Lightweight implementation (no external dependencies)
+- Full formatting support (bold, italic, underline, etc.)
+- Mentions integration
+- Undo/redo history
+- Keyboard shortcuts
+- Full accessibility
+
+## Basic Usage
+
+### In MessageComposer
+
+The `CometChatMessageComposer` component includes rich text formatting by default:
+
+```html
+
+
+```
+
+### Custom Implementation
+
+To use the rich text editor in your own components:
+
+```typescript expandable
+import { Component, OnInit, OnDestroy, inject } from '@angular/core';
+import { RichTextEditorService } from '@cometchat/chat-uikit-angular';
+
+@Component({
+ selector: 'app-custom-editor',
+ template: `
+
+
+
+
+ `
+})
+export class CustomEditorComponent implements OnInit, OnDestroy {
+ private editorService = inject(RichTextEditorService);
+ private editor: any;
+
+ @ViewChild('editorElement') editorElement!: ElementRef;
+
+ ngOnInit() {
+ this.editor = this.editorService.createEditor({
+ placeholder: 'Type something...',
+ autofocus: true,
+ onUpdate: (html, text) => {
+ console.log('Content:', html, text);
+ }
+ }, this.editorElement.nativeElement);
+ }
+
+ ngOnDestroy() {
+ this.editorService.destroyEditor(this.editor);
+ }
+
+ toggleBold() {
+ this.editorService.toggleBold(this.editor);
+ }
+
+ toggleItalic() {
+ this.editorService.toggleItalic(this.editor);
+ }
+
+ toggleUnderline() {
+ this.editorService.toggleUnderline(this.editor);
+ }
+}
+```
+
+## Text Formatting
+
+### Inline Formatting
+
+Apply formatting to selected text or at cursor position:
+
+```typescript expandable
+// Bold
+this.editorService.toggleBold(this.editor);
+
+// Italic
+this.editorService.toggleItalic(this.editor);
+
+// Underline
+this.editorService.toggleUnderline(this.editor);
+
+// Strikethrough
+this.editorService.toggleStrikethrough(this.editor);
+
+// Inline code
+this.editorService.toggleCode(this.editor);
+```
+
+### Keyboard Shortcuts
+
+Users can apply formatting using keyboard shortcuts:
+
+| Format | Windows/Linux | Mac |
+|--------|--------------|-----|
+| Bold | `Ctrl+B` | `Cmd+B` |
+| Italic | `Ctrl+I` | `Cmd+I` |
+| Underline | `Ctrl+U` | `Cmd+U` |
+| Undo | `Ctrl+Z` | `Cmd+Z` |
+| Redo | `Ctrl+Y` or `Ctrl+Shift+Z` | `Cmd+Shift+Z` |
+
+### Block Formatting
+
+Apply formatting to entire blocks:
+
+```typescript
+// Code block
+this.editorService.toggleCodeBlock(this.editor);
+
+// Blockquote
+this.editorService.toggleBlockquote(this.editor);
+```
+
+## Lists
+
+### Creating Lists
+
+```typescript
+// Ordered (numbered) list
+this.editorService.toggleOrderedList(this.editor);
+
+// Unordered (bullet) list
+this.editorService.toggleBulletList(this.editor);
+```
+
+### List Behavior
+
+- **Enter**: Creates a new list item
+- **Enter** (twice): Exits the list
+- **Tab**: Indents the list item
+- **Shift+Tab**: Outdents the list item
+
+### Example
+
+```typescript
+// Create a numbered list
+this.editorService.toggleOrderedList(this.editor);
+
+// User types:
+// 1. First item [Enter]
+// 2. Second item [Enter]
+// 3. Third item [Enter][Enter]
+// (exits list)
+```
+
+## Links
+
+### Adding Links
+
+```typescript
+addLink() {
+ const url = prompt('Enter URL:');
+ if (url) {
+ this.editorService.setLink(this.editor, url);
+ }
+}
+```
+
+### Removing Links
+
+```typescript
+removeLink() {
+ this.editorService.setLink(this.editor, null);
+}
+```
+
+### URL Validation
+
+The editor automatically validates URLs:
+- Invalid URLs display an error
+- URLs without protocol are prefixed with `https://`
+- Pasted URLs are automatically converted to clickable links
+
+### Example
+
+```typescript
+// Valid URLs
+this.editorService.setLink(this.editor, 'https://example.com');
+this.editorService.setLink(this.editor, 'example.com'); // Auto-prefixed
+
+// Invalid URL
+this.editorService.setLink(this.editor, 'not a url'); // Shows error
+```
+
+## Mentions
+
+### Basic Mention Integration
+
+The editor integrates with `CometChatMentionsFormatter` for @mention functionality:
+
+```typescript expandable
+ngOnInit() {
+ this.editor = this.editorService.createEditor({
+ placeholder: 'Type @ to mention someone...',
+ onMentionStart: (query) => {
+ this.showMentionPopup(query);
+ },
+ onMentionEnd: () => {
+ this.hideMentionPopup();
+ },
+ getMentionSuggestions: async (query) => {
+ return await this.searchUsers(query);
+ },
+ onMentionSelect: (item) => {
+ this.insertMention(item);
+ }
+ });
+}
+```
+
+### Inserting Mentions
+
+```typescript expandable
+insertMention(user: CometChat.User) {
+ const isSelf = user.getUid() === this.loggedInUser.getUid();
+
+ this.editorService.insertMention(
+ this.editor,
+ user.getUid(),
+ user.getName(),
+ this.queryLength + 1, // +1 for @ symbol
+ isSelf
+ );
+}
+```
+
+### Mention Styling
+
+Mentions are styled differently based on whether they're for the current user:
+
+```css expandable
+/* Self mention (logged-in user) */
+.cometchat-mention--self {
+ background-color: var(--cometchat-primary-color);
+ color: var(--cometchat-static-white);
+}
+
+/* Other user mention */
+.cometchat-mention--other {
+ background-color: var(--cometchat-background-color-03);
+ color: var(--cometchat-text-color-primary);
+}
+```
+
+### Mention Limits
+
+- Maximum of **10 unique mentions** per message
+- Attempting to add more displays an error
+
+### Getting Mention Data
+
+```typescript
+// Get text with CometChat mention format
+const formattedText = this.editorService.getTextWithMentionFormat(this.editor);
+// Output: "Hello <@uid:user123>, how are you?"
+
+// Get unique mention UIDs
+const mentionUids = this.editorService.getUniqueMentionUids(this.editor);
+console.log('Mentioned users:', Array.from(mentionUids));
+```
+
+### Loading Messages with Mentions
+
+When loading a message that contains mentions:
+
+```typescript
+loadMessage(message: CometChat.TextMessage) {
+ this.editorService.setContentWithMentions(
+ this.editor,
+ message.getText(),
+ message.getMentionedUsers()
+ );
+}
+```
+
+## Undo/Redo
+
+### Using History
+
+```typescript
+// Undo
+if (this.editorService.canUndo(this.editor)) {
+ this.editorService.undo(this.editor);
+}
+
+// Redo
+if (this.editorService.canRedo(this.editor)) {
+ this.editorService.redo(this.editor);
+}
+```
+
+### History Grouping
+
+Rapid typing is automatically grouped into single undo steps:
+- Typing delay: 500ms
+- Each formatting operation creates a new undo step
+- History stack size: 100 entries
+
+### Example
+
+```typescript
+// User types "Hello world" quickly
+// This creates ONE undo step
+
+// User applies bold
+// This creates a SECOND undo step
+
+// Pressing Ctrl+Z undoes the bold
+// Pressing Ctrl+Z again removes "Hello world"
+```
+
+## Content Management
+
+### Getting Content
+
+```typescript
+// Get HTML with formatting
+const html = this.editorService.getHTML(this.editor);
+
+// Get plain text without formatting
+const text = this.editorService.getText(this.editor);
+
+// Get metadata
+const metadata = this.editorService.getRichTextMetadata(this.editor);
+console.log('Has formatting:', metadata.hasFormatting);
+```
+
+### Setting Content
+
+```typescript
+// Set HTML content
+this.editorService.setContent(this.editor, 'Bold text
');
+
+// Clear content
+this.editorService.clearContent(this.editor);
+
+// Insert text at cursor
+this.editorService.insertText(this.editor, 'Hello');
+```
+
+### Checking Content State
+
+```typescript
+// Check if empty
+if (this.editorService.isEmpty(this.editor)) {
+ console.log('Editor is empty');
+}
+
+// Check if has formatting
+if (this.editorService.hasFormatting(this.editor)) {
+ console.log('Content has rich text formatting');
+}
+```
+
+## Format State
+
+### Tracking Format State
+
+Use the reactive signal to track which formats are active:
+
+```typescript
+formatState = this.editorService.formatState;
+
+// In template
+
+
+
+```
+
+### Manual Format State Check
+
+```typescript
+const formatState = this.editorService.getFormatState(this.editor);
+
+if (formatState.bold) {
+ console.log('Bold is active');
+}
+
+if (formatState.orderedList) {
+ console.log('In ordered list');
+}
+```
+
+## Copy, Paste, and Drag
+
+### Paste Handling
+
+The editor automatically handles pasted content:
+
+```typescript expandable
+// Formatted text paste
+// - Preserves compatible formatting (bold, italic, etc.)
+// - Strips unsupported formatting
+// - Sanitizes for XSS protection
+
+// Plain text paste
+// - Inserts without formatting
+
+// URL paste
+// - Automatically converts to clickable link
+```
+
+### Drag and Drop
+
+Users can drag and drop text within the editor:
+- Formatting is preserved
+- Cursor position is updated
+
+### Copy
+
+When users copy formatted text:
+- Formatting is preserved in clipboard
+- Both HTML and plain text formats are available
+
+## Accessibility
+
+### Keyboard Navigation
+
+All features are accessible via keyboard:
+- **Tab**: Focus editor
+- **Arrow keys**: Navigate content
+- **Escape**: Close mention popup
+- **Enter**: New line or list item
+- **Formatting shortcuts**: See table above
+
+### Screen Reader Support
+
+The editor announces:
+- Formatting changes ("Bold applied")
+- Mention insertions ("Mentioned John Doe")
+- Undo/redo operations ("Undone", "Redone")
+
+### ARIA Attributes
+
+The editor includes proper ARIA attributes:
+- `role="textbox"`
+- `aria-label="Message editor"`
+- `aria-multiline="true"`
+- `aria-placeholder="Type your message..."`
+
+## Styling
+
+### Using CSS Variables
+
+Customize the editor appearance using CSS variables:
+
+```css expandable
+:root {
+ /* Editor background */
+ --cometchat-background-color-01: #ffffff;
+
+ /* Text color */
+ --cometchat-text-color-primary: #141414;
+
+ /* Placeholder color */
+ --cometchat-text-color-secondary: #666666;
+
+ /* Focus border */
+ --cometchat-primary-color: #6852D6;
+
+ /* Mention colors */
+ --cometchat-primary-color: #6852D6;
+ --cometchat-background-color-03: #f0f0f0;
+}
+```
+
+### Custom Styles
+
+Apply custom styles to the editor:
+
+```css expandable
+.cometchat-rich-text-editor {
+ min-height: 100px;
+ max-height: 300px;
+ overflow-y: auto;
+ padding: var(--cometchat-spacing-3);
+ border: 1px solid var(--cometchat-border-color-light);
+ border-radius: var(--cometchat-radius-2);
+}
+
+.cometchat-rich-text-editor:focus {
+ outline: none;
+ border-color: var(--cometchat-primary-color);
+}
+```
+
+## Performance
+
+### Optimization Tips
+
+1. **Debounce updates**: Use debouncing for expensive operations
+2. **Lazy load mentions**: Load mention suggestions on demand
+3. **Limit history**: History is automatically limited to 100 entries
+4. **Clean up**: Always destroy editors when done
+
+### Performance Metrics
+
+The editor is optimized for:
+- **Typing latency**: < 50ms per keystroke (10,000 characters)
+- **Formatting operations**: < 100ms
+- **Initialization**: < 50ms
+- **Paste operations**: < 200ms
+
+## Security
+
+### XSS Protection
+
+All HTML is sanitized to prevent XSS attacks:
+- Script tags removed
+- Event handlers removed
+- Dangerous attributes removed
+- Only safe HTML tags allowed
+
+### Content Validation
+
+- URLs are validated before insertion
+- Mention data is sanitized
+- Pasted content is sanitized
+
+## Best Practices
+
+### 1. Always Clean Up
+
+```typescript
+ngOnDestroy() {
+ if (this.editor) {
+ this.editorService.destroyEditor(this.editor);
+ }
+}
+```
+
+### 2. Use Reactive Signals
+
+```typescript
+// Good: Use reactive signal
+formatState = this.editorService.formatState;
+
+// Avoid: Polling format state
+setInterval(() => {
+ this.formatState = this.editorService.getFormatState(this.editor);
+}, 100);
+```
+
+### 3. Handle Empty State
+
+```typescript
+sendMessage() {
+ if (this.editorService.isEmpty(this.editor)) {
+ // Show error: "Message cannot be empty"
+ return;
+ }
+
+ const text = this.editorService.getTextWithMentionFormat(this.editor);
+ // Send message...
+}
+```
+
+### 4. Validate Before Sending
+
+```typescript expandable
+sendMessage() {
+ const text = this.editorService.getText(this.editor);
+
+ if (text.trim().length === 0) {
+ return; // Empty message
+ }
+
+ if (text.length > 10000) {
+ // Show error: "Message too long"
+ return;
+ }
+
+ // Send message...
+}
+```
+
+## Troubleshooting
+
+### Editor Not Focusing
+
+```typescript
+// Ensure element is mounted before creating editor
+ngAfterViewInit() {
+ this.editor = this.editorService.createEditor(
+ { autofocus: true },
+ this.editorElement.nativeElement
+ );
+}
+```
+
+### Formatting Not Working
+
+```typescript expandable
+// Check if editor is destroyed
+if (this.editor.isDestroyed()) {
+ console.error('Editor is destroyed');
+ return;
+}
+
+// Check if editor is editable
+if (!this.editor.isEditable()) {
+ console.error('Editor is not editable');
+ return;
+}
+```
+
+### Mentions Not Showing
+
+```typescript expandable
+// Ensure mention callbacks are configured
+this.editor = this.editorService.createEditor({
+ onMentionStart: (query) => {
+ console.log('Mention started:', query);
+ this.showMentionPopup(query);
+ },
+ getMentionSuggestions: async (query) => {
+ return await this.searchUsers(query);
+ }
+});
+```
+
+## See Also
+
+- [RichTextEditorService API Reference](../api-reference/rich-text-editor-service.mdx)
+- [MessageComposer Component](../components/message-composer.mdx)
diff --git a/ui-kit/angular/guides/search-messages.mdx b/ui-kit/angular/guides/search-messages.mdx
new file mode 100644
index 000000000..7303d0891
--- /dev/null
+++ b/ui-kit/angular/guides/search-messages.mdx
@@ -0,0 +1,205 @@
+---
+title: "Search Messages"
+sidebarTitle: "Search Messages"
+description: "Add full-text message search across conversations with result routing in CometChat Angular UIKit."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-angular` |
+| Key components | `cometchat-search-bar`, `cometchat-message-list`, `cometchat-message-composer`, `cometchat-message-header` |
+| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login("UID")` |
+| Purpose | Full-text message search across conversations with result routing and navigation |
+| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-angular/tree/v5/projects/sample-app) |
+| Related | [All Guides](/ui-kit/angular/guides/guides-overview) |
+
+
+
+Search Messages lets users locate specific messages across conversations and groups using keyword search, then navigate directly to the result.
+
+Before starting, complete the [Integration Guide](/integration).
+
+---
+
+## Components
+
+| Component / Selector | Role |
+|:---|:---|
+| `cometchat-search-bar` | Search input component for entering keywords |
+| `cometchat-message-list` | Displays filtered messages based on search results |
+| `cometchat-message-composer` | Supports navigation after selecting a search result |
+| `cometchat-message-header` | Displays search context and navigation controls |
+
+---
+
+## Implementation Steps
+
+### 1. Search State Management
+
+Track the current search keyword and the message ID to scroll to. When a new search is triggered, reset `goToMessageId` so the list doesn't jump to a stale result.
+
+```typescript expandable
+import { Component } from '@angular/core';
+import { CometChat } from '@cometchat/chat-sdk-javascript';
+
+@Component({
+ selector: 'app-search-messages',
+ standalone: true,
+ imports: [],
+ template: ``
+})
+export class SearchMessagesComponent {
+ searchKeyword = '';
+ goToMessageId: string | undefined;
+ selectedUser: CometChat.User | undefined;
+ selectedGroup: CometChat.Group | undefined;
+
+ onSearch(keyword: string): void {
+ this.searchKeyword = keyword;
+ this.goToMessageId = undefined;
+ }
+
+ onResultClick(messageId: string): void {
+ this.goToMessageId = messageId;
+ }
+}
+```
+
+---
+
+### 2. Search Input
+
+Render the search bar component and wire its output to update the keyword state.
+
+```html
+
+
+```
+
+---
+
+### 3. Search Result Integration
+
+Pass `searchKeyword` and `goToMessageId` to `cometchat-message-list`. The list filters messages matching the keyword and highlights them. When `goToMessageId` is set, the list scrolls to that message.
+
+```html
+
+
+```
+
+---
+
+### 4. Navigate to Search Result
+
+When a user taps a search result, set `goToMessageId` to that message's ID. The message list scrolls to and highlights the target message.
+
+```typescript
+onResultClick(messageId: string): void {
+ this.goToMessageId = messageId;
+}
+```
+
+---
+
+### 5. Complete Search Integration
+
+A full component wiring search input, result display, and navigation together.
+
+```typescript expandable
+import { Component, Input } from '@angular/core';
+import { CometChat } from '@cometchat/chat-sdk-javascript';
+import {
+ CometChatSearchBarComponent,
+ CometChatMessageListComponent,
+ CometChatMessageComposerComponent,
+ CometChatMessageHeaderComponent
+} from '@cometchat/chat-uikit-angular';
+
+@Component({
+ selector: 'app-chat-with-search',
+ standalone: true,
+ imports: [
+ CometChatSearchBarComponent,
+ CometChatMessageListComponent,
+ CometChatMessageComposerComponent,
+ CometChatMessageHeaderComponent
+ ],
+ template: `
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `
+})
+export class ChatWithSearchComponent {
+ @Input() user: CometChat.User | undefined;
+ @Input() group: CometChat.Group | undefined;
+
+ searchKeyword = '';
+ goToMessageId: string | undefined;
+
+ onSearch(keyword: string): void {
+ this.searchKeyword = keyword;
+ this.goToMessageId = undefined;
+ }
+
+ onResultClick(messageId: string): void {
+ this.goToMessageId = messageId;
+ }
+}
+```
+
+---
+
+## Feature Matrix
+
+| Feature | Component / Binding | Description |
+|:---|:---|:---|
+| Search input | `cometchat-search-bar` with `(searchChanged)` | Captures keyword input |
+| Display results | `cometchat-message-list` with `[goToMessageId]` | Scrolls to and highlights matching messages |
+| Navigate to result | `[goToMessageId]` input | Scrolls to and highlights target message |
+| State management | Component properties | Tracks keyword and target message ID |
+
+---
+
+## Next Steps
+
+
+
+ The search bar component reference.
+
+
+ Render real-time message threads.
+
+
+ Browse all feature and formatter guides.
+
+
+ Full working sample application on GitHub.
+
+
diff --git a/ui-kit/angular/v5/guides/shortcut-formatter.mdx b/ui-kit/angular/guides/shortcut-formatter.mdx
similarity index 55%
rename from ui-kit/angular/v5/guides/shortcut-formatter.mdx
rename to ui-kit/angular/guides/shortcut-formatter.mdx
index fe4914f54..db5c54053 100644
--- a/ui-kit/angular/v5/guides/shortcut-formatter.mdx
+++ b/ui-kit/angular/guides/shortcut-formatter.mdx
@@ -11,11 +11,11 @@ description: "Implement !shortcut style text expansions with extension APIs or d
| Key class | `ShortcutFormatter` (extends `CometChatTextFormatter`) |
| Required setup | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login("UID")` |
| Track character | `!` — triggers shortcut expansion in the message composer |
-| Related | [Custom Text Formatter](/ui-kit/angular/v5/guides/custom-text-formatter) \| [All Guides](/ui-kit/angular/v5/guides/overview) |
+| Related | [Custom Text Formatter](/ui-kit/angular/guides/custom-text-formatter) \| [All Guides](/ui-kit/angular/guides/guides-overview) |
-`ShortCutFormatter` extends [CometChatTextFormatter](/ui-kit/angular/v5/guides/custom-text-formatter) to expand shortcodes (like `!hb`) into full text via the Message Shortcuts extension. When a user types a shortcut, a dialog appears with the expansion — clicking it inserts the text.
+`ShortCutFormatter` extends [CometChatTextFormatter](/ui-kit/angular/guides/custom-text-formatter) to expand shortcodes (like `!hb`) into full text via the Message Shortcuts extension. When a user types a shortcut, a dialog appears with the expansion — clicking it inserts the text.
@@ -35,33 +35,40 @@ import { CometChatTextFormatter } from "@cometchat/chat-uikit-angular";
```typescript
class ShortCutFormatter extends CometChatTextFormatter {
- // ...
-}
-```
+ readonly id = "shortcut-formatter";
+ override priority = 50;
-### 3. Set the track character
+ getRegex(): RegExp {
+ return /!([a-zA-Z]+)/g;
+ }
-```typescript
-this.setTrackingCharacter("!");
+ format(text: string): string {
+ this.originalText = text;
+ this.formattedText = text;
+ return text;
+ }
+}
```
-### 4. Handle key events
-
-Detect shortcuts on `keyUp` and trigger expansion logic.
+### 3. Fetch shortcuts from the extension
```typescript
-onKeyUp(event: KeyboardEvent) {
- // Check text before caret for shortcut match
+constructor() {
+ CometChat.callExtension("message-shortcuts", "GET", "v1/fetch", undefined)
+ .then((data: any) => {
+ if (data?.shortcuts) {
+ this.shortcuts = data.shortcuts;
+ }
+ });
}
```
-### 5. Add dialog and formatting methods
+### 4. Handle dialog and formatting methods
```typescript
openDialog(buttonText: string, shortcut: string) { /* ... */ }
closeDialog() { /* ... */ }
handleButtonClick(buttonText: string) { /* ... */ }
-getFormattedText(text: string): string { return text; }
```
---
@@ -86,13 +93,15 @@ import { CometChatTextFormatter, CometChatUIEvents, PanelAlignment } from "@come
import { CometChat } from "@cometchat/chat-sdk-javascript";
export class ShortcutFormatter extends CometChatTextFormatter {
+ readonly id = "shortcut-formatter";
+ override priority = 50;
+
private shortcuts: { [key: string]: string } = {};
private dialogIsOpen = false;
private currentShortcut: string | null = null;
constructor() {
super();
- this.setTrackingCharacter("!");
CometChat.callExtension("message-shortcuts", "GET", "v1/fetch", undefined)
.then((data: any) => {
if (data?.shortcuts) {
@@ -102,31 +111,23 @@ export class ShortcutFormatter extends CometChatTextFormatter {
.catch((error) => console.error("Error fetching shortcuts", error));
}
- onKeyUp(event: KeyboardEvent) {
- const caretPosition =
- this.currentCaretPosition instanceof Selection
- ? this.currentCaretPosition.anchorOffset
- : 0;
- const textBeforeCaret = this.getTextBeforeCaret(caretPosition);
-
- const match = textBeforeCaret.match(/!([a-zA-Z]+)$/);
- if (match) {
- const shortcut = match[0];
- const replacement = this.shortcuts[shortcut];
- if (replacement) {
- if (this.dialogIsOpen && this.currentShortcut !== shortcut) {
- this.closeDialog();
- }
- this.openDialog(replacement, shortcut);
- }
- } else if (!textBeforeCaret) {
- this.closeDialog();
- }
+ getRegex(): RegExp {
+ return /!([a-zA-Z]+)/g;
+ }
+
+ format(text: string): string {
+ // Shortcut formatter doesn't transform display text — it only triggers
+ // expansion dialogs in the composer. Pass text through unchanged.
+ this.originalText = text;
+ this.formattedText = text;
+ return text;
}
openDialog(buttonText: string, shortcut: string) {
+ // Note: In a real implementation, you would use a TemplateRef via a component.
+ // The CometChatUIEvents.ccShowPanel expects a TemplateRef, not an HTMLElement.
+ // Use a component with ViewChild to create the panel template.
CometChatUIEvents.ccShowPanel.next({
- child: this.createDialogElement(buttonText),
position: PanelAlignment.messageListFooter,
});
this.dialogIsOpen = true;
@@ -139,56 +140,19 @@ export class ShortcutFormatter extends CometChatTextFormatter {
this.currentShortcut = null;
}
- private createDialogElement(buttonText: string): HTMLElement {
- const container = document.createElement("div");
- container.style.width = "100%";
- container.style.padding = "8px";
-
- const button = document.createElement("button");
- button.textContent = buttonText;
- button.style.cssText =
- "width: 100%; padding: 8px 16px; cursor: pointer; background: #f2e6ff; border: 2px solid #9b42f5; border-radius: 12px; text-align: left; font: 600 15px sans-serif;";
- button.addEventListener("click", () => this.handleButtonClick(buttonText));
-
- container.appendChild(button);
- return container;
- }
-
handleButtonClick(buttonText: string) {
- if (this.currentCaretPosition && this.currentRange) {
- const shortcut = Object.keys(this.shortcuts).find(
- (key) => this.shortcuts[key] === buttonText
- );
- if (shortcut) {
- const replacement = this.shortcuts[shortcut];
- this.addAtCaretPosition(
- replacement,
- this.currentCaretPosition,
- this.currentRange
- );
- }
+ // The expansion text is available via the shortcuts map
+ const shortcut = Object.keys(this.shortcuts).find(
+ (key) => this.shortcuts[key] === buttonText
+ );
+ if (shortcut) {
+ // Emit the expansion text for the composer to insert
+ this.metadata = { expansion: this.shortcuts[shortcut] };
}
if (this.dialogIsOpen) {
this.closeDialog();
}
}
-
- getFormattedText(text: string): string {
- return text;
- }
-
- private getTextBeforeCaret(caretPosition: number): string {
- if (
- this.currentRange?.startContainer &&
- typeof this.currentRange.startContainer.textContent === "string"
- ) {
- const textContent = this.currentRange.startContainer.textContent;
- if (textContent.length >= caretPosition) {
- return textContent.substring(0, caretPosition);
- }
- }
- return "";
- }
}
```
@@ -228,16 +192,16 @@ The Message Shortcuts extension must be enabled in your CometChat Dashboard for
## Next Steps
-
+
Build custom inline text patterns.
-
+
Customize the message input component.
-
+
Browse all feature and formatter guides.
-
+
Add @mentions with styled tokens.
diff --git a/ui-kit/angular/v5/guides/state-management.mdx b/ui-kit/angular/guides/state-management.mdx
similarity index 92%
rename from ui-kit/angular/v5/guides/state-management.mdx
rename to ui-kit/angular/guides/state-management.mdx
index 67fb4e564..20a36879f 100644
--- a/ui-kit/angular/v5/guides/state-management.mdx
+++ b/ui-kit/angular/guides/state-management.mdx
@@ -432,15 +432,15 @@ The main panel's customizations (set on the root singleton) do not affect the th
Do not scope `ChatStateService`. It is intentionally a singleton that tracks the app-wide active conversation. Scoping it would break cross-component state synchronization. Use the props-based pattern instead for independent panels.
-See [CometChatMessageList — Multiple Message Lists with Different Configurations](/ui-kit/angular/v5/components/cometchat-message-list#multiple-message-lists-with-different-configurations) for a complete example with two panels.
+See [CometChatMessageList — Multiple Message Lists with Different Configurations](/ui-kit/angular/components/cometchat-message-list#multiple-message-lists-with-different-configurations) for a complete example with two panels.
## Related Resources
-- [ChatStateService API Reference](/ui-kit/angular/v5/api-reference/chat-state-service) — Full API documentation for signals, observables, setters, getters, and mutual exclusivity behavior
-- [CometChatConversations](/ui-kit/angular/v5/components/cometchat-conversations) — Conversation list component that calls `setActiveConversation()` on selection
-- [CometChatMessageHeader](/ui-kit/angular/v5/components/cometchat-message-header) — Message header that subscribes to `activeUser` / `activeGroup`
-- [CometChatMessageList](/ui-kit/angular/v5/components/cometchat-message-list) — Message list that subscribes to `activeUser` / `activeGroup`
-- [CometChatMessageComposer](/ui-kit/angular/v5/components/cometchat-message-composer) — Message composer that subscribes to `activeUser` / `activeGroup`
-- [CometChatUsers](/ui-kit/angular/v5/components/cometchat-users) — User list that calls `setActiveUser()` on selection
-- [CometChatGroups](/ui-kit/angular/v5/components/cometchat-groups) — Group list that calls `setActiveGroup()` on selection
-- [CometChatGroupMembers](/ui-kit/angular/v5/components/cometchat-group-members) — Group members list that subscribes to `activeGroup`
+- [ChatStateService API Reference](/ui-kit/angular/api-reference/chat-state-service) — Full API documentation for signals, observables, setters, getters, and mutual exclusivity behavior
+- [CometChatConversations](/ui-kit/angular/components/cometchat-conversations) — Conversation list component that calls `setActiveConversation()` on selection
+- [CometChatMessageHeader](/ui-kit/angular/components/cometchat-message-header) — Message header that subscribes to `activeUser` / `activeGroup`
+- [CometChatMessageList](/ui-kit/angular/components/cometchat-message-list) — Message list that subscribes to `activeUser` / `activeGroup`
+- [CometChatMessageComposer](/ui-kit/angular/components/cometchat-message-composer) — Message composer that subscribes to `activeUser` / `activeGroup`
+- [CometChatUsers](/ui-kit/angular/components/cometchat-users) — User list that calls `setActiveUser()` on selection
+- [CometChatGroups](/ui-kit/angular/components/cometchat-groups) — Group list that calls `setActiveGroup()` on selection
+- [CometChatGroupMembers](/ui-kit/angular/components/cometchat-group-members) — Group members list that subscribes to `activeGroup`
diff --git a/ui-kit/angular/guides/subscription-patterns.mdx b/ui-kit/angular/guides/subscription-patterns.mdx
new file mode 100644
index 000000000..eb16718b8
--- /dev/null
+++ b/ui-kit/angular/guides/subscription-patterns.mdx
@@ -0,0 +1,254 @@
+---
+title: "RxJS Subscription Patterns"
+description: "Approved patterns for managing RxJS subscriptions in the CometChat Angular V5 UIKit to prevent memory leaks."
+---
+
+## Overview
+
+This guide documents the approved patterns for managing RxJS subscriptions in the CometChat Angular V5 UIKit. Following these patterns ensures that subscriptions are automatically cleaned up when components and services are destroyed, preventing memory leaks in long-running sessions.
+
+---
+
+## ✅ Approved Patterns
+
+### 1. `takeUntilDestroyed()` — Primary Pattern
+
+The preferred pattern for all new subscriptions. Uses Angular's `DestroyRef` to automatically unsubscribe when the component or service is destroyed.
+
+```typescript
+import { Component, inject, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { CometChatMessageEvents } from '../events/CometChatMessageEvents';
+
+@Component({ ... })
+export class MyComponent {
+ private readonly destroyRef = inject(DestroyRef);
+
+ constructor() {
+ CometChatMessageEvents.ccMessageRead
+ .pipe(takeUntilDestroyed(this.destroyRef))
+ .subscribe(message => {
+ // handle message read
+ });
+ }
+}
+```
+
+**Why this is preferred:**
+- No boilerplate `ngOnDestroy` needed for subscription cleanup
+- Works in both components and services
+- Angular manages the lifecycle automatically via `DestroyRef`
+- Composable with other RxJS operators
+
+---
+
+### 2. `toSignal()` — For Service Observables
+
+Use `toSignal()` when you need to consume a service observable as an Angular Signal in a component. The subscription is automatically cleaned up when the component is destroyed.
+
+```typescript
+import { Component, inject } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { ConversationsService } from '../services/conversations.service';
+
+@Component({ ... })
+export class MyComponent {
+ private conversationsService = inject(ConversationsService);
+
+ // Automatically subscribes and unsubscribes — no manual cleanup needed
+ conversations = toSignal(this.conversationsService.conversations$, {
+ initialValue: [] as CometChat.Conversation[],
+ });
+}
+```
+
+**Why this is preferred for service state:**
+- Zero subscription management code
+- Integrates with Angular's change detection (OnPush compatible)
+- Automatically handles initial value and completion
+
+---
+
+### 3. CometChat SDK Listeners — Service-Managed Pattern
+
+CometChat SDK listeners (`addMessageListener`, `addUserListener`, etc.) must be registered and removed via the service layer, not directly in components.
+
+```typescript
+// ✅ CORRECT — service manages SDK listener lifecycle
+@Injectable({ providedIn: 'root' })
+export class ConversationsService {
+ private readonly listenerId = `conversations_${Date.now()}`;
+
+ private setupMessageListener(): void {
+ CometChat.addMessageListener(
+ this.listenerId,
+ new CometChat.MessageListener({
+ onTextMessageReceived: (message) => { /* handle */ },
+ onMediaMessageReceived: (message) => { /* handle */ },
+ })
+ );
+ }
+
+ private removeMessageListener(): void {
+ try {
+ CometChat.removeMessageListener(this.listenerId);
+ } catch (error) {
+ // log but don't throw — cleanup errors are non-critical
+ }
+ }
+
+ cleanup(): void {
+ this.removeMessageListener();
+ // ... remove other listeners
+ }
+}
+```
+
+**Why services manage SDK listeners:**
+- SDK listeners are singleton-scoped — they must persist across component destroy/recreate cycles (e.g., tab switching)
+- Components should never call `cleanup()` in `ngOnDestroy` — this would tear down listeners on every navigation
+- Call `cleanup()` only for application-level events: user logout, account switching
+
+---
+
+## ❌ Anti-Patterns to Avoid
+
+### ❌ Manual `destroy$` Subject
+
+```typescript
+// ❌ DO NOT USE — verbose boilerplate, error-prone
+@Component({ ... })
+export class MyComponent implements OnDestroy {
+ private destroy$ = new Subject();
+
+ constructor() {
+ someObservable$
+ .pipe(takeUntil(this.destroy$))
+ .subscribe(value => { /* handle */ });
+ }
+
+ ngOnDestroy(): void {
+ this.destroy$.next(); // easy to forget
+ this.destroy$.complete(); // easy to forget
+ }
+}
+```
+
+**Problem:** Requires manual `ngOnDestroy` implementation. If `next()` or `complete()` is forgotten, subscriptions leak.
+
+**Fix:** Use `takeUntilDestroyed(this.destroyRef)` instead.
+
+---
+
+### ❌ Manual `Subscription.unsubscribe()`
+
+```typescript
+// ❌ DO NOT USE — manual tracking is error-prone
+@Component({ ... })
+export class MyComponent implements OnDestroy {
+ private subscription: Subscription | null = null;
+
+ constructor() {
+ this.subscription = someObservable$.subscribe(value => { /* handle */ });
+ }
+
+ ngOnDestroy(): void {
+ this.subscription?.unsubscribe(); // easy to miss for multiple subscriptions
+ }
+}
+```
+
+**Problem:** Each subscription requires a separate property and manual cleanup. Scales poorly.
+
+**Fix:** Use `takeUntilDestroyed(this.destroyRef)` — no property or `ngOnDestroy` needed.
+
+---
+
+### ❌ Subscribing Without Any Cleanup
+
+```typescript
+// ❌ MEMORY LEAK — subscription never cleaned up
+@Component({ ... })
+export class MyComponent {
+ constructor() {
+ someObservable$.subscribe(value => {
+ // This subscription lives forever!
+ });
+ }
+}
+```
+
+**Problem:** The subscription persists after the component is destroyed, accumulating over time.
+
+**Fix:** Always use `takeUntilDestroyed(this.destroyRef)` or `toSignal()`.
+
+---
+
+## Migration Guide
+
+If you encounter the old `takeUntil(this.destroy$)` pattern, here is how to migrate:
+
+### Before
+
+```typescript
+import { Component, OnDestroy } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+@Component({ ... })
+export class MyComponent implements OnDestroy {
+ private destroy$ = new Subject();
+
+ constructor() {
+ someObservable$
+ .pipe(takeUntil(this.destroy$))
+ .subscribe(value => { /* handle */ });
+ }
+
+ ngOnDestroy(): void {
+ this.destroy$.next();
+ this.destroy$.complete();
+ }
+}
+```
+
+### After
+
+```typescript
+import { Component, inject, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+@Component({ ... })
+export class MyComponent {
+ private readonly destroyRef = inject(DestroyRef);
+
+ constructor() {
+ someObservable$
+ .pipe(takeUntilDestroyed(this.destroyRef))
+ .subscribe(value => { /* handle */ });
+ }
+ // No ngOnDestroy needed!
+}
+```
+
+**Steps:**
+1. Add `DestroyRef` to `@angular/core` imports
+2. Add `takeUntilDestroyed` to `@angular/core/rxjs-interop` imports
+3. Add `private readonly destroyRef = inject(DestroyRef)` field
+4. Replace `.pipe(takeUntil(this.destroy$))` with `.pipe(takeUntilDestroyed(this.destroyRef))`
+5. Remove `private destroy$ = new Subject()`
+6. Remove `this.destroy$.next()` and `this.destroy$.complete()` from `ngOnDestroy`
+7. Remove `OnDestroy` interface if no other cleanup is needed
+8. Remove unused `Subject` and `takeUntil` imports
+
+---
+
+## Summary
+
+| Pattern | Use Case | Cleanup |
+|---------|----------|---------|
+| `takeUntilDestroyed(destroyRef)` | Any RxJS subscription in component/service | Automatic via DestroyRef |
+| `toSignal(obs$)` | Service observable → Signal in component | Automatic via DestroyRef |
+| Service-managed SDK listeners | CometChat SDK `addXxxListener` | Manual via `cleanup()` on logout |
+| ~~`takeUntil(destroy$)`~~ | ❌ Deprecated | Manual — avoid |
+| ~~`subscription.unsubscribe()`~~ | ❌ Deprecated | Manual — avoid |
diff --git a/ui-kit/angular/v5/guides/threaded-messages.mdx b/ui-kit/angular/guides/threaded-messages.mdx
similarity index 92%
rename from ui-kit/angular/v5/guides/threaded-messages.mdx
rename to ui-kit/angular/guides/threaded-messages.mdx
index d2023f2d0..e410a7b4b 100644
--- a/ui-kit/angular/v5/guides/threaded-messages.mdx
+++ b/ui-kit/angular/guides/threaded-messages.mdx
@@ -13,13 +13,13 @@ description: "Implement threaded message replies with parent context, reply list
| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login("UID")` |
| Entry point | `cometchat-message-list` `threadRepliesClick` output opens thread view from group messages |
| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-angular/tree/v5/projects/sample-app) |
-| Related | [All Guides](/ui-kit/angular/v5/guides/overview) |
+| Related | [All Guides](/ui-kit/angular/guides/guides-overview) |
Threaded messages let users create sub-conversations by replying to specific messages in group chats. This reduces clutter and keeps discussions focused.
-Before starting, complete the [Integration Guide](/ui-kit/angular/v5/integration).
+Before starting, complete the [Integration Guide](/ui-kit/angular/integration).
---
@@ -96,7 +96,7 @@ Render the thread panel with the parent message context, reply list filtered by
@if (showThreadPanel && threadedMessage) {
@@ -123,7 +123,7 @@ When the composer is blocked (e.g., permissions), show a fallback message instea
@if (showThreadPanel && threadedMessage) {
@@ -183,7 +183,7 @@ import {
@if (showThreadPanel && threadedMessage) {
@@ -231,7 +231,7 @@ export class ThreadedChatComponent implements OnDestroy {
| Show thread option | `(threadRepliesClick)` on `cometchat-message-list` | Fires when user clicks thread reply icon |
| Display thread messages | `cometchat-message-list` with `[parentMessageId]` | Filters messages to thread replies |
| Compose reply | `cometchat-message-composer` with `[parentMessageId]` | Scopes new messages to the thread |
-| Thread header | `cometchat-thread-header` with `[message]` | Shows parent message context |
+| Thread header | `cometchat-thread-header` with `[parentMessage]` | Shows parent message context |
| Close thread | `(closeClick)` on `cometchat-thread-header` | Closes the thread side panel |
| Thread state | Component property `threadedMessage` | Tracks the active parent message |
@@ -240,13 +240,13 @@ export class ThreadedChatComponent implements OnDestroy {
## Next Steps
-
+
Render real-time message threads.
-
+
Customize the thread header component.
-
+
Browse all feature and formatter guides.
diff --git a/ui-kit/angular/guides/url-formatter.mdx b/ui-kit/angular/guides/url-formatter.mdx
new file mode 100644
index 000000000..ea9eedd59
--- /dev/null
+++ b/ui-kit/angular/guides/url-formatter.mdx
@@ -0,0 +1,141 @@
+---
+title: "URL Formatter"
+description: "Detect and style plain URLs as clickable links with optional tracking logic in CometChat Angular UI Kit."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-angular` |
+| Key class | `CometChatUrlFormatter` (extends `CometChatTextFormatter`) |
+| Required setup | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login("UID")` |
+| Purpose | Auto-detects URLs in text messages and converts them to clickable links |
+| Related | [Custom Text Formatter](/ui-kit/angular/guides/custom-text-formatter) \| [All Guides](/ui-kit/angular/guides/guides-overview) |
+
+
+
+`CometChatUrlFormatter` extends [CometChatTextFormatter](/ui-kit/angular/guides/custom-text-formatter) to detect URLs in text messages and render them as clickable links.
+
+---
+
+## Usage
+
+Extend `CometChatTextFormatter`, set a regex pattern for URL detection, and override `format()` to handle formatting and click behavior.
+
+
+
+```typescript expandable
+import { CometChatTextFormatter } from "@cometchat/chat-uikit-angular";
+
+export class CometChatUrlsFormatter extends CometChatTextFormatter {
+ readonly id = "custom-url-formatter";
+ override priority = 10;
+
+ getRegex(): RegExp {
+ return /(https?:\/\/[^\s]+)/g;
+ }
+
+ format(text: string): string {
+ if (!text) {
+ this.originalText = "";
+ this.formattedText = "";
+ return "";
+ }
+
+ this.originalText = text;
+ this.formattedText = text.replace(
+ this.getRegex(),
+ '$1'
+ );
+ return this.formattedText;
+ }
+}
+```
+
+
+
+```typescript expandable
+import { Component, OnInit } from "@angular/core";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatMessageListComponent } from "@cometchat/chat-uikit-angular";
+import { CometChatUrlsFormatter } from "./CometChatUrlsFormatter";
+
+@Component({
+ selector: "app-url-demo",
+ standalone: true,
+ imports: [CometChatMessageListComponent],
+ template: `
+
+
+ `,
+})
+export class UrlDemoComponent implements OnInit {
+ chatUser: CometChat.User | undefined;
+ textFormatters = [new CometChatUrlsFormatter()];
+
+ ngOnInit() {
+ CometChat.getUser("uid").then((user) => {
+ this.chatUser = user;
+ });
+ }
+}
+```
+
+
+
+---
+
+## Customization
+
+### Styling links
+
+Apply CSS to your link class:
+
+```css
+.clickable-url {
+ color: var(--cometchat-primary-color);
+ text-decoration: underline;
+ cursor: pointer;
+}
+```
+
+### Handling clicks
+
+Override `onUrlClick` to add tracking or custom navigation:
+
+```typescript
+private onUrlClick(event: Event) {
+ event.preventDefault();
+ const target = event.target as HTMLAnchorElement;
+ const url = target.href;
+ // Add analytics tracking
+ console.log("URL clicked:", url);
+ window.open(url, "_blank", "noopener,noreferrer");
+}
+```
+
+
+The `CometChatUrlFormatter` is included by default in the message list. You only need to pass it explicitly if you want to customize click behavior or combine it with other formatters.
+
+
+---
+
+## Next Steps
+
+
+
+ Build custom inline text patterns.
+
+
+ Render real-time message threads.
+
+
+ Browse all feature and formatter guides.
+
+
+ Add @mentions with styled tokens.
+
+
diff --git a/ui-kit/angular/v5/integration.mdx b/ui-kit/angular/integration.mdx
similarity index 92%
rename from ui-kit/angular/v5/integration.mdx
rename to ui-kit/angular/integration.mdx
index 72f0c0dfc..dcf024e49 100644
--- a/ui-kit/angular/v5/integration.mdx
+++ b/ui-kit/angular/integration.mdx
@@ -59,12 +59,12 @@ This creates a new Angular project with CSS styling and no server-side rendering
```bash
-npm install @cometchat/chat-uikit-angular@5.0.0-beta.2 @cometchat/chat-sdk-javascript
+npm install @cometchat/chat-uikit-angular @cometchat/chat-sdk-javascript
```
```bash
-yarn add @cometchat/chat-uikit-angular@5.0.0-beta.2 @cometchat/chat-sdk-javascript
+yarn add @cometchat/chat-uikit-angular @cometchat/chat-sdk-javascript
```
@@ -80,7 +80,7 @@ npm install @cometchat/chat-sdk-javascript dompurify
If you want voice/video calling, also install:
```bash
-npm install @cometchat/calls-sdk-javascript@5.0.0-beta.1
+npm install @cometchat/calls-sdk-javascript
```
---
@@ -290,7 +290,7 @@ Two-panel layout — conversation list on the left, messages on the right. Think
-
+
Step-by-step guide to build this layout
@@ -309,7 +309,7 @@ Single chat window — no sidebar. Good for support chat, embedded widgets, or f
-
+
Step-by-step guide to build this layout
@@ -328,7 +328,7 @@ Tabbed navigation — Chat, Call Logs, Users in separate tabs. Good for full-fea
-
+
Step-by-step guide to build this layout
@@ -338,25 +338,25 @@ Tabbed navigation — Chat, Call Logs, Users in separate tabs. Good for full-fea
Need full control over the UI? Use individual components, customize themes, and wire up your own layouts.
-- [Components](/ui-kit/angular/v5/components/overview) — All prebuilt UI elements with inputs and customization options
-- [Core Features](/ui-kit/angular/v5/core-features) — Messaging, real-time updates, and other capabilities
-- [Theming](/ui-kit/angular/v5/customization/theming) — Colors, fonts, dark mode, and custom styling
+- [Components](/ui-kit/angular/components/components-overview) — All prebuilt UI elements with inputs and customization options
+- [Core Features](/ui-kit/angular/core-features) — Messaging, real-time updates, and other capabilities
+- [Theming](/ui-kit/angular/customization/theming) — Colors, fonts, dark mode, and custom styling
---
## Next Steps
-
+
Browse all prebuilt UI components
-
+
Customize colors, fonts, and styles
-
+
Chat features included out of the box
-
+
Common issues and fixes
diff --git a/ui-kit/angular/methods.mdx b/ui-kit/angular/methods.mdx
index 80e893be4..e2d0acec9 100644
--- a/ui-kit/angular/methods.mdx
+++ b/ui-kit/angular/methods.mdx
@@ -1,659 +1,282 @@
---
title: "Methods"
-description: "Methods — CometChat documentation."
+description: "Use CometChat Angular UI Kit methods for initialization, login, logout, users, groups, messages, calls, and session handling."
---
-## Overview
+The UIKit wraps the [Chat SDK](/sdk/javascript/overview) methods to manage internal eventing and keep UI components synchronized. Use these wrapper methods instead of raw SDK calls.
-The UI Kit's core function is to extend the [Chat SDK](/sdk/javascript/overview), essentially translating the raw data and functionality provided by the underlying methods into visually appealing and easy-to-use UI components.
+
+`CometChatUIKit.init()` must be called before rendering any UIKit components or calling any SDK methods. Initialization must complete before login.
+
-To effectively manage and synchronize the UI elements and data across all components in the UI Kit, we utilize internal events. These internal events enable us to keep track of changes in real time and ensure that the UI reflects the most current state of data.
+
+Auth Key is for development/testing only. In production, generate Auth Tokens on the server using the REST API and pass them to the client via `loginWithAuthToken()`. Never expose Auth Keys in production client code.
+
-The CometChat UI Kit has thoughtfully encapsulated the critical [Chat SDK](/sdk/javascript/overview) methods within its wrapper to efficiently manage internal eventing. This layer of abstraction simplifies interaction with the underlying CometChat SDK, making it more user-friendly for developers.
+## UIKitSettingsBuilder
-## Methods
-
-You can access the methods using the `CometChatUIKit` class. This class provides access to all the public methods exposed by the CometChat UI Kit.
-
-### Init
-
-This method initializes the settings required for [CometChat JavaScript SDK](/sdk/javascript/overview). First, ensure UIKitSettings is set and then call the `init()` method on the app startup.
+`UIKitSettingsBuilder` is a fluent builder for constructing the `UIKitSettings` object passed to `CometChatUIKit.init()`.
-
-
-Make sure you replace the **APP\_ID**, **REGION** and **AUTH\_KEY** with your CometChat App ID, Region and Auth Key in the below code. The `Auth Key` is an optional property of the `UIKitSettings` Class. It is intended for use primarily during proof-of-concept (POC) development or in the early stages of application development. You can use the [Auth Token](#login-using-auth-token) method to log in securely.
-
-
+| Method | Parameter | Description |
+|--------|-----------|-------------|
+| `setAppId(appId)` | `string` | Your CometChat App ID from the Dashboard |
+| `setRegion(region)` | `string` | App region (e.g. `'us'`, `'eu'`) |
+| `setAuthKey(authKey)` | `string` | Auth Key for dev/testing — use Auth Token in production |
+| `subscribePresenceForAllUsers()` | — | Subscribe to presence updates for all users |
+| `subscribePresenceForFriends()` | — | Subscribe to presence updates for friends only |
+| `subscribePresenceForRoles(roles)` | `string[]` | Subscribe to presence updates for users with specific roles |
+| `setRoles(roles)` | `string[]` | Set roles filter independently of presence subscription |
+| `setAutoEstablishSocketConnection(autoEstablish)` | `boolean` | Control whether the WebSocket connects automatically on init |
+| `setAdminHost(adminHost)` | `string` | Override the admin API host (custom/on-premise deployments) |
+| `setClientHost(clientHost)` | `string` | Override the client API host (custom/on-premise deployments) |
+| `setStorageMode(storageMode)` | `CometChat.StorageMode` | Set the storage mode for SDK data persistence |
+| `build()` | — | Returns the configured `UIKitSettings` instance |
-
-
-```js
-import { UIKitSettingsBuilder } from "@cometchat/uikit-shared";//import shared package
+```typescript expandable
+import { UIKitSettingsBuilder } from '@cometchat/chat-uikit-angular';
-const COMETCHAT_CONSTANTS = {
-APP_ID: "APP_ID", __ Replace with your App ID
-REGION: "REGION", __ Replace with your App Region
-AUTH_KEY: "AUTH_KEY" __ Replace with your Auth Key
-}
-
-__create the builder
const UIKitSettings = new UIKitSettingsBuilder()
- .setAppId(COMETCHAT_CONSTANTS.APP_ID)
- .setRegion(COMETCHAT_CONSTANTS.REGION)
- .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
- .subscribePresenceForAllUsers()
+ .setAppId('APP_ID')
+ .setRegion('REGION')
+ .setAuthKey('AUTH_KEY')
+ .subscribePresenceForFriends()
+ .setAutoEstablishSocketConnection(true)
.build();
-
-
-__Initialize CometChat
-CometChatUIKit.init(UIKitSettings)?.then(()=>{
-__login your user
-})
```
-
+---
+
+## Methods
-
+All methods are accessed via the `CometChatUIKit` class.
+### Init
-### Setting Session Storage Mode
+Initializes the CometChat SDK. Must be called on app startup before any other UIKit method.
-If you want to use session storage instead of the default local storage, you can configure it during initialization:
+
+Replace `APP_ID`, `REGION`, and `AUTH_KEY` with values from the CometChat Dashboard. `Auth Key` is optional — use [Auth Token](#login-using-auth-token) for production.
+
-
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { UIKitSettingsBuilder } from "@cometchat/uikit-shared";
+```typescript expandable
+import { CometChatUIKit, UIKitSettingsBuilder } from '@cometchat/chat-uikit-angular';
const COMETCHAT_CONSTANTS = {
- APP_ID: "APP_ID", // Replace with your App ID
- REGION: "REGION", // Replace with your App Region
- AUTH_KEY: "AUTH_KEY", // Replace with your Auth Key
+ APP_ID: 'APP_ID',
+ REGION: 'REGION',
+ AUTH_KEY: 'AUTH_KEY',
};
const UIKitSettings = new UIKitSettingsBuilder()
.setAppId(COMETCHAT_CONSTANTS.APP_ID)
.setRegion(COMETCHAT_CONSTANTS.REGION)
.setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
- .subscribePresenceForAllUsers()
- .setStorageMode(CometChat.StorageMode.SESSION)
+ .subscribePresenceForFriends()
.build();
-//Initialize CometChat UI Kit with Session Storage
CometChatUIKit.init(UIKitSettings)?.then(() => {
- console.log("Initialization completed successfully with session storage");
- // You can now call login function.
- })
- .catch(console.log);
+ // login your user
+});
```
-
-
-### getLoggedInUser
+---
-You can use this method to check if there is any existing session in the SDK. This method should return the details of the logged-in user.
+### Get Logged In User
-
-
-```js
-import { CometChatUIKit } from "@cometchat/chat-uikit-angular";//import uikit package
+Checks for an existing session in the SDK. Returns the logged-in user details or `null`.
+```typescript
+import { CometChatUIKit } from '@cometchat/chat-uikit-angular';
-CometChatUIKit.getLoggedinUser().then(user => {
- __Login user
-}).catch(console.log);
+CometChatUIKit.getLoggedinUser()
+ .then((user) => {
+ // Login user
+ })
+ .catch(console.log);
```
-
-
-
+---
### Login using Auth Key
-This simple authentication procedure is useful when you are creating a POC or if you are in the development phase. For production apps, we suggest you use [AuthToken](#login-using-auth-token) instead of Auth Key.
+Simple authentication for development/POC. For production, use [Auth Token](#login-using-auth-token).
-
-
-```js
-import { CometChatUIKit } from "@cometchat/chat-uikit-angular";
+```typescript expandable
+import { CometChatUIKit } from '@cometchat/chat-uikit-angular';
-const UID = "UID";
-const authKey = "AUTH_KEY";
+const UID = 'UID';
CometChatUIKit.getLoggedinUser()
.then((user) => {
if (!user) {
- //Login user
- CometChatUIKit.login({ uid: UID })
+ CometChatUIKit.login(UID)
.then((user) => {
- console.log("Login Successful:", { user });
- //mount your app
+ console.log('Login Successful:', { user });
})
.catch(console.log);
- } else {
- //user already logged in
- //mount your app
}
})
.catch(console.log);
```
-
-
-
+---
### Login using Auth Token
-This advanced authentication procedure does not use the Auth Key directly in your client code thus ensuring safety.
+Production-safe authentication that does not expose the Auth Key in client code.
1. [Create a User](/rest-api/chat-apis) via the CometChat API when the user signs up in your app.
2. [Create an Auth Token](/rest-api/chat-apis) via the CometChat API for the new user and save the token in your database.
3. Load the Auth Token in your client and pass it to the `loginWithAuthToken()` method.
-
-
-```js
-import { CometChatUIKit } from "@cometchat/chat-uikit-angular";
-
-const authToken = "AUTH_TOKEN";
+```typescript expandable
+import { CometChatUIKit } from '@cometchat/chat-uikit-angular';
-CometChatUIKit.getLoggedinUser().then(user => {
- if(!user){
- //Login user
- CometChatUIKit.login({authToken}).then(user => {
+const authToken = 'AUTH_TOKEN';
- console.log("Login Successful:", { user });
- //mount your app
-
- }).catch(console.log);
- } else {
- //user already logged in
- //mount your app
- }
-}).catch(console.log););
+CometChatUIKit.getLoggedinUser()
+ .then((user) => {
+ if (!user) {
+ CometChatUIKit.loginWithAuthToken(authToken)
+ .then((user) => {
+ console.log('Login Successful:', { user });
+ })
+ .catch(console.log);
+ }
+ })
+ .catch(console.log);
```
-
-
-
+---
### Logout
-This method is used to end the user session of the logged-in user
+Ends the current user session.
-
-
-```js
-import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
+```typescript
+import { CometChatUIKit } from '@cometchat/chat-uikit-angular';
CometChatUIKit.logout();
```
-
-
-
+---
-### Create user
+### Create User
-This method takes a `User` object and the `Auth Key` as input parameters and returns the created `User` object if the request is successful.
+Takes a `User` object and Auth Key, returns the created `User` object.
-
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatUIKit } from "@cometchat/chat-uikit-angular";
+```typescript expandable
+import { CometChat } from '@cometchat/chat-sdk-javascript';
+import { CometChatUIKit } from '@cometchat/chat-uikit-angular';
-const authKey = "AUTH_KEY";
-const UID = "user1";
-const name = "Kevin";
+const authKey = 'AUTH_KEY';
+const UID = 'user1';
+const name = 'Kevin';
-var user = new CometChat.User(UID);
+const user = new CometChat.User(UID);
user.setName(name);
CometChatUIKit.createUser(user, authKey)
.then((user) => {
- console.log("user created", user);
-
- CometChatUIKit.login(UID, authKey)
- .then((user) => {
- console.log("Login Successful:", { user });
- //mount your app
- })
- .catch(console.log);
+ console.log('User created:', user);
})
.catch(console.log);
```
-
-
-
+---
-### Update user
+### Update User
-This method takes a `User` object and the `Auth Key` as inputs and returns the updated `User` object on the successful execution of the request.
+Takes a `User` object and Auth Key, returns the updated `User` object.
-
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatUIKit } from "@cometchat/chat-uikit-angular";
+```typescript expandable
+import { CometChat } from '@cometchat/chat-sdk-javascript';
+import { CometChatUIKit } from '@cometchat/chat-uikit-angular';
-const authKey = "AUTH_KEY";
-const UID = "user1";
-const name = "Kevin Fernandez";
+const authKey = 'AUTH_KEY';
+const UID = 'user1';
+const name = 'Kevin Fernandez';
-var user = new CometChat.User(UID);
+const user = new CometChat.User(UID);
user.setName(name);
CometChatUIKit.updateUser(user, authKey)
.then((user) => {
- console.log("user updated", user);
+ console.log('User updated:', user);
})
.catch(console.log);
```
-
+---
-
+### Base Message
-### Send text message
+#### Text Message
-This method sends a text message in a 1:1 or group chat. You need to pass a `TextMessage` object to it.
+Sends a text message in a 1:1 or group chat. Takes a `TextMessage` object.
-
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatUIKit } from "@cometchat/chat-uikit-angular";
-import { CometChatUIKitConstants } from "@cometchat/uikit-resources";
+```typescript expandable
+import { CometChat } from '@cometchat/chat-sdk-javascript';
+import { CometChatUIKit } from '@cometchat/chat-uikit-angular';
+import { CometChatUIKitConstants } from '@cometchat/chat-uikit-angular';
-const receiverID = "UID";
-const messageText = "Hello world!";
+const receiverID = 'UID';
+const messageText = 'Hello world!';
const receiverType = CometChatUIKitConstants.MessageReceiverType.user;
-const textMessage = new CometChat.TextMessage(
- receiverID,
- messageText,
- receiverType
-);
+const textMessage = new CometChat.TextMessage(receiverID, messageText, receiverType);
-CometChatUIKit.sendMessage(textMessage)
+CometChatUIKit.sendTextMessage(textMessage)
.then((message) => {
- console.log("Message sent successfully:", message);
+ console.log('Message sent successfully:', message);
})
.catch(console.log);
```
-
-
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatUIKit } from "@cometchat/chat-uikit-angular";
-import { CometChatUIKitConstants } from "@cometchat/uikit-resources";
-
-const receiverID = "GUID";
-const messageText = "Hello world!";
-const receiverType = CometChatUIKitConstants.MessageReceiverType.group;
-const textMessage = new CometChat.TextMessage(
- receiverID,
- messageText,
- receiverType
-);
-
-CometChatUIKit.sendMessage(textMessage)
- .then((message) => {
- console.log("Message sent successfully:", message);
- })
- .catch(console.log);
-```
-
-
-
-
+---
-### Send media message
+#### Media Message
-This method sends a media message in a 1:1 or group chat. You need to pass a `MediaMessage` object to it.
+Sends a media message in a 1:1 or group chat. Takes a `MediaMessage` object.
-
-Make sure you replace the `INPUT FILE OBJECT` with the actual [file](https://developer.mozilla.org/en-US/docs/Web/API/File).
-
+Replace `file` with the actual [File](https://developer.mozilla.org/en-US/docs/Web/API/File) object.
-
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
-import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
-import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package
+```typescript expandable
+import { CometChat } from '@cometchat/chat-sdk-javascript';
+import { CometChatUIKit } from '@cometchat/chat-uikit-angular';
+import { CometChatUIKitConstants } from '@cometchat/chat-uikit-angular';
-const receiverID = "UID";
+const receiverID = 'UID';
const messageType = CometChatUIKitConstants.MessageTypes.file;
const receiverType = CometChatUIKitConstants.MessageReceiverType.user;
-const mediaMessage = new CometChat.MediaMessage(
- receiverID,
- `INPUT FILE OBJECT`,
- messageType,
- receiverType
-);
+const mediaMessage = new CometChat.MediaMessage(receiverID, file, messageType, receiverType);
CometChatUIKit.sendMediaMessage(mediaMessage)
.then((message) => {
- console.log("Media message sent successfully", message);
+ console.log('Media message sent successfully:', message);
})
.catch(console.log);
```
-
-
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
-import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
-import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package
-
-const receiverID = "GUID";
-const messageType = CometChatUIKitConstants.MessageTypes.file;
-const receiverType = CometChatUIKitConstants.MessageReceiverType.group;
-const mediaMessage = new CometChat.MediaMessage(
- receiverID,
- `INPUT FILE OBJECT`,
- messageType,
- receiverType
-);
-
-CometChatUIKit.sendMediaMessage(mediaMessage)
- .then((message) => {
- console.log("Media message sent successfully", message);
- })
- .catch(console.log);
-```
-
-
-
-
+---
-### Send custom message
+#### Custom Message
-This method allows you to send custom messages which are neither text nor media messages.
+Sends a custom message (neither text nor media) in a 1:1 or group chat. Takes a `CustomMessage` object.
-
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
-import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
-import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package
+```typescript expandable
+import { CometChat } from '@cometchat/chat-sdk-javascript';
+import { CometChatUIKit } from '@cometchat/chat-uikit-angular';
+import { CometChatUIKitConstants } from '@cometchat/chat-uikit-angular';
-const receiverID = "UID";
-const customData = {
- latitude: "50.6192171633316",
- longitude: "-72.68182268750002",
-};
-const customType = "location";
+const receiverID = 'UID';
+const customData = { latitude: '50.6192171633316', longitude: '-72.68182268750002' };
+const customType = 'location';
const receiverType = CometChatUIKitConstants.MessageReceiverType.user;
-const customMessage = new CometChat.CustomMessage(
- receiverID,
- receiverType,
- customType,
- customData
-);
+const customMessage = new CometChat.CustomMessage(receiverID, receiverType, customType, customData);
CometChatUIKit.sendCustomMessage(customMessage)
.then((message) => {
- console.log("custom message sent successfully", message);
- })
- .catch(console.log);
-```
-
-
-
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
-import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
-import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package
-
-const receiverID = "GUID";
-const customData = {
- latitude: "50.6192171633316",
- longitude: "-72.68182268750002",
-};
-const customType = "location";
-const receiverType = CometChatUIKitConstants.MessageReceiverType.group;
-const customMessage = new CometChat.CustomMessage(
- receiverID,
- receiverType,
- customType,
- customData
-);
-
-CometChatUIKit.sendCustomMessage(customMessage)
- .then((message) => {
- console.log("custom message sent successfully", message);
- })
- .catch(console.log);
-```
-
-
-
-
-
-### Send Form message
-
-This method allows you to send [Form](/web-shared/form-message)Messages which are the extension of Interactive Message
-
-
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
-import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
-import {
- CometChatUIKitConstants,
- APIAction,
- ButtonElement,
- TextInput,
- FormMessage,
-} from "@cometchat/uikit-resources"; //import shared package
-
-const receiverID = "UID";
-// Create an instance of APIAction
-let apiAction = new APIAction("https://example.com/api", "POST");
-
-// Create an instance of ButtonElement
-let submitButton = new ButtonElement("1", apiAction, "Submit");
-
-// Create an instance of TextInput
-let nameInput = new TextInput("1", "Please enter your name");
-// Create a new instance of FormMessage
-
-let formMessage = new FormMessage(
- "receiverId",
- CometChatUIKitConstants.MessageReceiverType.user,
- "Title",
- [nameInput],
- submitButton
-);
-
-CometChatUIKit.sendFormMessage(formMessage)
- .then((message) => {
- console.log("Form message sent successfully", message);
+ console.log('Custom message sent successfully:', message);
})
.catch(console.log);
```
-
-
-
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
-import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
-import {
- CometChatUIKitConstants,
- APIAction,
- ButtonElement,
- TextInput,
- FormMessage,
-} from "@cometchat/uikit-resources"; //import shared package
-
-const receiverID = "GUID";
-// Create an instance of APIAction
-let apiAction = new APIAction("https://example.com/api", "POST");
-// Create an instance of ButtonElement
-let submitButton = new ButtonElement("1", apiAction, "Submit");
-// Create an instance of TextInput
-let nameInput = new TextInput("1", "Please enter your name");
-// Create a new instance of FormMessage
-let formMessage = new FormMessage(
- "receiverId",
- CometChatUIKitConstants.MessageReceiverType.group,
- "Title",
- [nameInput],
- submitButton
-);
-
-CometChatUIKit.sendFormMessage(formMessage)
- .then((message) => {
- console.log("Form message sent successfully", message);
- })
- .catch(console.log);
-```
-
-
-
-
-
-### Send Card Message
-
-This method allows you to send [Card](/web-shared/card-message)Messages which are the extension of Interactive Message
-
-
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
-import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
-import {
- CometChatUIKitConstants,
- ButtonElement,
- CardMessage,
-} from "@cometchat/uikit-resources"; //import shared package
-
-const receiverID = "UID";
-// Create instance of ButtonElement for card actions
-let cardAction = new ButtonElement(
- "1",
- new APIAction("https://example.com/api", "POST"),
- "Click Me"
-);
-// Create a new instance of CardMessage
-let cardMessage = new CardMessage(
- "receiverId",
- CometChatUIKitConstants.MessageReceiverType.user,
- "This is a card",
- [cardAction]
-);
-
-CometChatUIKit.sendCardMessage(cardMessage)
- .then((message) => {
- console.log("card message sent successfully", message);
- })
- .catch(console.log);
-```
-
-
-
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
-import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
-import {
- CometChatUIKitConstants,
- ButtonElement,
- CardMessage,
-} from "@cometchat/uikit-resources"; //import shared package
-
-const receiverID = "GUID";
-// Create instance of ButtonElement for card actions
-let cardAction = new ButtonElement(
- "1",
- new APIAction("https://example.com/api", "POST"),
- "Click Me"
-);
-// Create a new instance of CardMessage
-let cardMessage = new CardMessage(
- "receiverId",
- CometChatUIKitConstants.MessageReceiverType.group,
- "This is a card",
- [cardAction]
-);
-
-CometChatUIKit.sendCardMessage(cardMessage)
- .then((message) => {
- console.log("card message sent successfully", message);
- })
- .catch(console.log);
-```
-
-
-
-
-
-### Send Custom Interactive message
-
-This method allows you to send [Custom Interactive Messages](/web-shared/custom-interactive-message) which are the extension of Interactive Message
-
-
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
-import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
-import {
- CometChatUIKitConstants,
- ButtonElement,
- CardMessage,
-} from "@cometchat/uikit-resources"; //import shared package
-
-const receiverID = "UID";
-// Create a new instance of CardMessage
-let customMessage = new CustomInteractiveMessage(
- "receiverId",
- CometChatUIKitConstants.MessageReceiverType.user,
- json
-);
-
-CometChatUIKit.sendCustomInteractiveMessage(customMessage)
- .then((message) => {
- console.log("CustomInteractive message sent successfully", message);
- })
- .catch(console.log);
-```
-
-
-
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
-import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
-import {
- CometChatUIKitConstants,
- ButtonElement,
- CardMessage,
-} from "@cometchat/uikit-resources"; //import shared package
-
-const receiverID = "GUID";
-// Create a new instance of CardMessage
-let customMessage = new CustomInteractiveMessage(
- "receiverId",
- CometChatUIKitConstants.MessageReceiverType.group,
- json
-);
-
-CometChatUIKit.sendCustomInteractiveMessage(customMessage)
- .then((message) => {
- console.log("CustomInteractive message sent successfully", message);
- })
- .catch(console.log);
-```
-
-
-
-
diff --git a/ui-kit/angular/overview.mdx b/ui-kit/angular/overview.mdx
index 57ad6b1b5..0347bc9f1 100644
--- a/ui-kit/angular/overview.mdx
+++ b/ui-kit/angular/overview.mdx
@@ -1,67 +1,104 @@
---
-title: "Overview"
-description: "Overview of Overview in CometChat."
+title: "Angular UI Kit"
+sidebarTitle: "Overview"
+description: "Use CometChat Angular UI Kit to add standalone chat components, voice and video calling, theming, localization, and customization."
---
-
-🚀 **CometChat Angular UI Kit v5 is now available in beta!** It features a completely revamped component architecture and improved theming. [Try the v5 Beta →](/ui-kit/angular/v5/overview)
-
-
| Field | Value |
| --- | --- |
-| Package | `@cometchat/chat-uikit-angular` |
-| Peer deps | `@cometchat/uikit-elements`, `@cometchat/uikit-resources`, `@cometchat/uikit-shared` |
-| Source | [GitHub](https://github.com/cometchat-pro/cometchat-chat-sample-app-angular/tree/v4) |
+| Package | `@cometchat/chat-uikit-angular` v5.x |
+| Peer deps | `@cometchat/chat-sdk-javascript`, `dompurify` |
+| Calling | Optional — `@cometchat/calls-sdk-javascript` |
+| Angular | v19, v20, v21 |
+| Localization | 19 languages built-in |
+| Source | [GitHub](https://github.com/cometchat/cometchat-uikit-angular/tree/v5) |
| AI Skills | `npx @cometchat/skills add` — [GitHub](https://github.com/cometchat/cometchat-skills) |
-CometChat's **UI Kit** for Angular, you can effortlessly build a chat app equipped with all the essential messaging features, along with customizable options tailored to your application requirements. This **UI Kit** comprises prebuilt UI components organized into smaller modules and components, each configurable to meet your specific needs.
+The CometChat Angular UI Kit provides prebuilt, customizable standalone components for adding chat, voice, and video calling to any Angular app. Each component handles its own data fetching, real-time listeners, and state — you just drop them into your layout.
-
+
---------
-
-[Angular Sample App](https://github.com/cometchat-pro/cometchat-chat-sample-app-angular/tree/v4)
-
-##### **Before Getting Started**
-
-Before you begin, it's essential to grasp the fundamental concepts and features offered by CometChat's APIs, SDK, and UI Kit. You can find detailed information in [Key Concepts](/fundamentals/key-concepts) documentation.
-
-The Angular UI Kit offers pre-built components for easy integration into Angular applications, built on top of the [JavaScript Chat SDK](/sdk/javascript/overview) Installing it also includes the core SDK functionalities.
-
-To begin, please follow the [Getting Started](/ui-kit/angular/getting-started) guide.
---
-## Integrate with AI Coding Agents
+## Try It
-Use [CometChat Skills](https://github.com/cometchat/cometchat-skills) to add chat to any Angular project through your AI coding agent. The skill takes an AI-first approach — your agent has a short conversation with you to understand your project and chat requirements, then writes production-grade integration code tailored to the files you already have.
+
+
+ Try the full chat experience in your browser
+
+
+ Clone the sample app and start building
+
+
-Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and [30+ more agents](https://github.com/cometchat/cometchat-skills).
-
-```bash
-npx @cometchat/skills add
-```
-
-Use `--ide ` to target a specific IDE (e.g. `--ide cursor`), or `--ide all` to install for all supported IDEs.
+---
-Then in your IDE:
+## Get Started
+
+
+
+ Set up CometChat UIKit in your Angular project
+
+
+ Get up and running in 5 minutes
+
+
+ Build a conversation list UI
+
+
+ Build a direct messaging UI
+
+
-```
-/cometchat add chat to my app
-```
+---
-The skill detects your Angular version, router setup, 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 routes, modules, and components before proposing a placement (route or modal), shows the plan (which files it will create, modify, and leave untouched), and waits for your approval before writing code. Credentials are saved to `src/environments/environment.ts`.
+## Explore
+
+
+
+ Browse all prebuilt UI components
+
+
+ Chat, calling, AI, and extensions
+
+
+ Colors, fonts, dark mode, and custom styling
+
+
+ Threaded messages, new chat, search, and more
+
+
-After the first integration, re-run `/cometchat` anytime to pick from the iteration menu:
+---
-- **Customize look & feel** — theme presets (slack / whatsapp / imessage / discord / notion) or your own brand color
-- **Add a feature** — 40+ features including calls, reactions, polls, AI smart replies, file sharing, presence
-- **Customize a component** — custom message bubbles, headers, composer actions, empty/loading states
-- **Set up production auth** — replace the dev Auth Key with a server-side token endpoint
-- **Set up user management** — server endpoints for creating/updating/deleting CometChat users
-- **Run diagnostics** — verify, drift detection, symptom-to-cause lookup
+## Resources
+
+
+
+ Working reference app
+
+
+ Full UI Kit source on GitHub
+
+
+ Interactive component playground
+
+
+ Design resources and prototyping
+
+
+ Upgrading from v4
+
+
+ Common issues and fixes
+
+
+ Open a support ticket
+
+
diff --git a/ui-kit/angular/v5/quickstart.mdx b/ui-kit/angular/quickstart.mdx
similarity index 95%
rename from ui-kit/angular/v5/quickstart.mdx
rename to ui-kit/angular/quickstart.mdx
index 70261ac22..c48632f89 100644
--- a/ui-kit/angular/v5/quickstart.mdx
+++ b/ui-kit/angular/quickstart.mdx
@@ -13,7 +13,7 @@ Follow these steps to integrate CometChat UIKit into your Angular application.
## Step 1: Install the Package
```bash
-npm install @cometchat/chat-uikit-angular@5.0.0-beta.2
+npm install @cometchat/chat-uikit-angular
```
@@ -114,7 +114,7 @@ CometChatUIKit.init(uiKitSettings)
});
```
- To enable voice and video calling, install `@cometchat/calls-sdk-javascript` and add `.setCallingEnabled(true)` to the builder. Without this, call buttons are hidden across all components. See [Call Features](/ui-kit/angular/v5/call-features) for details.
+ To enable voice and video calling, install `@cometchat/calls-sdk-javascript` and add `.setCallingEnabled(true)` to the builder. Without this, call buttons are hidden across all components. See [Call Features](/ui-kit/angular/call-features) for details.
## Step 5: Login a User
@@ -144,10 +144,10 @@ Add the conversations component to your template:
## Next Steps
-
+
Full setup guide with examples
-
+
Explore all available components
diff --git a/ui-kit/angular/sound-manager.mdx b/ui-kit/angular/sound-manager.mdx
index 393ed7a2d..b105c0b40 100644
--- a/ui-kit/angular/sound-manager.mdx
+++ b/ui-kit/angular/sound-manager.mdx
@@ -1,63 +1,84 @@
---
title: "Sound Manager"
-description: "Sound Manager — CometChat documentation."
+description: "Manage and customize audio cues for incoming/outgoing calls and messages in CometChat Angular UIKit."
---
-## Overview
+`CometChatSoundManager` is a helper class for managing and playing audio cues in the UI Kit — incoming/outgoing calls and messages.
-The SoundManager is a helper class responsible for managing and playing various types of audio in the CometChat UI Kit. This includes sound events for incoming and outgoing messages and calls.
+`Sound` is a frozen object on `CometChatSoundManager`, not a separate export. Access sound event keys via `CometChatSoundManager.Sound`.
+
+---
## Methods
-### Play Sound
+### play
-`CometChatSoundManager.play` method plays the in-built sounds audio resources for the above mentioned enum cases. It also allows for customisation of the audio resources. You can pass a mp3 file asset path of your choice.
+Plays the default or custom audio resource for a given sound event.
-Here are the available methods for triggering sound playback:
+| Parameter | Type | Description |
+| --- | --- | --- |
+| `sound` | `"incomingCall" \| "incomingMessage" \| "incomingMessageFromOther" \| "outgoingCall" \| "outgoingMessage"` | Sound event key |
+| `customSound` | `string \| null` | Optional custom audio file URL. Defaults to `null` (uses built-in sound). |
-* `play(sound: Sound)`: This method plays predefined sounds for various events such as incoming and outgoing calls and messages.
+### pause
-* `play(sound: Sound, filePath: string)`: This method is capable of playing a custom sound for a particular event by specifying the path to a custom MP3 file.
+Pauses the currently playing sound and resets playback position.
-### Pause Sound
+### onIncomingMessage
-The SoundManager can pause different types of sounds for incoming and outgoing calls and messages using the following method:
+Plays the incoming message sound directly. Accepts an optional `customSound` URL.
-* `pause()`: This method pauses any sound currently being played.
+### onIncomingOtherMessage
-## Usage
+Plays the incoming message from another user sound directly. Accepts an optional `customSound` URL.
-Here is how to use CometChatSoundManager:
+### onOutgoingMessage
-
-
-```js
-//Trigger the audio sound for an incoming message
-CometChatSoundManager.play(Sound.incomingMessage);
+Plays the outgoing message sound directly. Accepts an optional `customSound` URL.
-//Trigger the audio sound of your choice for an incoming message
-CometChatSoundManager.play(Sound.incomingMessage, "MP3_FILE_ASSET_PATH");
+### onIncomingCall
-//Pause the ongoing audio sound
-CometChatSoundManager.pause();
-```
+Plays the incoming call sound (loops). Accepts an optional `customSound` URL.
-
+### onOutgoingCall
-
-```ts
-//Trigger the audio sound for an incoming message
-CometChatSoundManager.play(Sound.incomingMessage);
+Plays the outgoing call sound (loops). Accepts an optional `customSound` URL.
-//Trigger the audio sound of your choice for an incoming message
-CometChatSoundManager.play(Sound.incomingMessage, "MP3_FILE_ASSET_PATH");
+### hasInteracted
-//Pause the ongoing audio sound
-CometChatSoundManager.pause();
-```
+Returns `boolean` — checks whether the user has interacted with the page (required by browser autoplay policies).
+
+---
+
+## Sound Events
-
+| Event Key | When it plays |
+| --- | --- |
+| `incomingCall` | Incoming call detected |
+| `outgoingCall` | Outgoing call initiated |
+| `incomingMessage` | New message received from the current conversation |
+| `incomingMessageFromOther` | New message received from a different conversation |
+| `outgoingMessage` | Message sent |
-
+Access via `CometChatSoundManager.Sound.incomingCall`, etc.
-By using the CometChatSoundManager, you can enhance the user experience in your chat application by integrating audible cues for chat interactions.
+---
+
+## Usage
+
+```typescript expandable
+import { CometChatSoundManager } from '@cometchat/chat-uikit-angular';
+
+// Play default incoming call sound
+CometChatSoundManager.play(CometChatSoundManager.Sound.incomingCall);
+
+// Play custom sound for incoming message
+CometChatSoundManager.play(CometChatSoundManager.Sound.incomingMessage, 'MP3_FILE_ASSET_PATH');
+
+// Pause the ongoing sound
+CometChatSoundManager.pause();
+
+// Use individual method directly
+CometChatSoundManager.onIncomingCall();
+CometChatSoundManager.onOutgoingMessage('CUSTOM_AUDIO_PATH');
+```
diff --git a/ui-kit/angular/v5/troubleshooting.mdx b/ui-kit/angular/troubleshooting.mdx
similarity index 99%
rename from ui-kit/angular/v5/troubleshooting.mdx
rename to ui-kit/angular/troubleshooting.mdx
index 97d8ccb51..656c1abdd 100644
--- a/ui-kit/angular/v5/troubleshooting.mdx
+++ b/ui-kit/angular/troubleshooting.mdx
@@ -18,13 +18,13 @@ description: "Common failure modes and fixes for the CometChat Angular UIKit."
| Symptom | Cause | Fix |
| --- | --- | --- |
| `CometChatUIKit.init()` fails silently | Invalid App ID, Region, or Auth Key | Double-check credentials from the CometChat Dashboard |
-| Component doesn't render | `init()` not called or not awaited before rendering | Ensure `init()` completes before mounting components. See [Methods](/ui-kit/angular/v5/methods) |
+| Component doesn't render | `init()` not called or not awaited before rendering | Ensure `init()` completes before mounting components. See [Methods](/ui-kit/angular/methods) |
| Component renders but shows no data | User not logged in | Call `CometChatUIKit.login()` after init |
| Login fails with "UID not found" | UID doesn't exist in your CometChat app | Create the user via Dashboard, SDK, or API first |
| Blank screen after login | Component mounted before init/login completes | Use state to conditionally render after login resolves |
| `getLoggedinUser()` returns null | User not logged in or session expired | Call `login()` or `loginWithAuthToken()` first |
| `sendTextMessage()` fails | User not logged in or invalid receiver | Ensure login completes before sending messages |
-| Auth Key exposed in production | Using Auth Key instead of Auth Token | Switch to [Auth Token](/ui-kit/angular/v5/methods#login-using-auth-token) for production |
+| Auth Key exposed in production | Using Auth Key instead of Auth Token | Switch to [Auth Token](/ui-kit/angular/methods#login-using-auth-token) for production |
---
@@ -55,7 +55,7 @@ description: "Common failure modes and fixes for the CometChat Angular UIKit."
| Symptom | Cause | Fix |
| --- | --- | --- |
-| Call buttons not appearing in Message Header | `@cometchat/calls-sdk-javascript` not installed | Run `npm install @cometchat/calls-sdk-javascript@5.0.0-beta.1` — UIKit auto-detects it |
+| Call buttons not appearing in Message Header | `@cometchat/calls-sdk-javascript` not installed | Run `npm install @cometchat/calls-sdk-javascript` — UIKit auto-detects it |
| Incoming call screen not showing | `cometchat-incoming-call` not in the component tree | Render the component at the app root level so it can listen for incoming calls |
---
@@ -85,7 +85,7 @@ description: "Common failure modes and fixes for the CometChat Angular UIKit."
| Symptom | Cause | Fix |
| --- | --- | --- |
-| UI text not translated | Language code not matching supported codes | Check the supported languages table in [Localization](/ui-kit/angular/v5/customization/localization) |
+| UI text not translated | Language code not matching supported codes | Check the supported languages table in [Localization](/ui-kit/angular/customization/localization) |
| Custom translations not appearing | `addTranslation` called before `init` | Call init first, then add translations |
| Date/time format unchanged | Localization config not applied | Check the localization documentation for date format configuration |
@@ -105,7 +105,7 @@ description: "Common failure modes and fixes for the CometChat Angular UIKit."
| Symptom | Cause | Fix |
| --- | --- | --- |
-| Event listener not firing | Subscribed to wrong event name | Check the [Events](/ui-kit/angular/v5/events) page for exact event names |
+| Event listener not firing | Subscribed to wrong event name | Check the [Events](/ui-kit/angular/events) page for exact event names |
| Duplicate event triggers | Multiple subscriptions without cleanup | Unsubscribe in `ngOnDestroy` |
| Event fires but UI doesn't update | State not updated in event handler | Ensure you update component state in the handler |
diff --git a/ui-kit/angular/action-sheet.mdx b/ui-kit/angular/v4/action-sheet.mdx
similarity index 100%
rename from ui-kit/angular/action-sheet.mdx
rename to ui-kit/angular/v4/action-sheet.mdx
diff --git a/ui-kit/angular/v4/ai-features.mdx b/ui-kit/angular/v4/ai-features.mdx
new file mode 100644
index 000000000..ed1f2838b
--- /dev/null
+++ b/ui-kit/angular/v4/ai-features.mdx
@@ -0,0 +1,60 @@
+---
+title: "AI"
+description: "AI — CometChat documentation."
+---
+
+## Overview
+
+CometChat's AI capabilities greatly enhance user interaction and engagement in your application. Let's understand how the Angular UI Kit achieves these features.
+
+
+
+
+
+## Conversation Starters
+
+When a user initiates a new chat, the UI kit displays a list of suggested opening lines that users can select, making it easier for them to start a conversation. These suggestions are powered by CometChat's AI, which predicts contextually relevant conversation starters.
+
+For a comprehensive understanding and guide on implementing and using the Conversation Starters, refer to our specific guide on the [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter).
+
+Once you have successfully activated the [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter) from your CometChat Dashboard, the feature will automatically be incorporated into the [MessageList](/ui-kit/angular/message-list) Component of UI Kits.
+
+
+
+
+
+## Smart Replies
+
+Smart Replies are AI-generated responses to messages. They can predict what a user might want to say next by analyzing the context of the conversation. This allows for quicker and more convenient responses, especially on mobile devices.
+
+For a comprehensive understanding and guide on implementing and using the Smart Replies, refer to our specific guide on the [Smart Replies](/fundamentals/ai-user-copilot/smart-replies).
+
+Once you have successfully activated the [Smart Replies](/fundamentals/ai-user-copilot/smart-replies) from your CometChat Dashboard, the feature will automatically be incorporated into the Action sheet of [MessageComposer](/ui-kit/angular/message-composer) Component of UI Kits.
+
+
+
+
+
+## Conversation Summary
+
+The Conversation Summary feature provides concise summaries of long conversations, allowing users to catch up quickly on missed chats. This feature uses natural language processing to determine the main points in a conversation.
+
+For a comprehensive understanding and guide on implementing and using the Conversation Summary, refer to our specific guide on the [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary).
+
+Once you have successfully activated the [Smart Replies](/fundamentals/ai-user-copilot/smart-replies) from your CometChat Dashboard, the feature will automatically be incorporated into the Action sheet of [MessageComposer](/ui-kit/angular/message-composer) Component of UI Kits.
+
+
+
+
+
+## AI Assist Bot
+
+AI Assist Bots automate responses and prompt interaction in the chat. They can handle common queries, assist with tasks, and provide information, freeing up human resources for more complex issues.
+
+For a comprehensive understanding and guide on implementing and using the AI Assist Bot, refer to our specific guide on the [AI Assist Bot](http://localhost:3000/docs-beta/ai/bots).
+
+Once you have successfully activated the [AI Assist Bot](http://localhost:3000/docs-beta/ai/bots) from your CometChat Dashboard, the feature will automatically be incorporated into the Action sheet of [MessageComposer](/ui-kit/angular/message-composer) Component of UI Kits.
+
+
+
+
diff --git a/ui-kit/angular/audio-bubble.mdx b/ui-kit/angular/v4/audio-bubble.mdx
similarity index 100%
rename from ui-kit/angular/audio-bubble.mdx
rename to ui-kit/angular/v4/audio-bubble.mdx
diff --git a/ui-kit/angular/avatar.mdx b/ui-kit/angular/v4/avatar.mdx
similarity index 100%
rename from ui-kit/angular/avatar.mdx
rename to ui-kit/angular/v4/avatar.mdx
diff --git a/ui-kit/angular/backdrop.mdx b/ui-kit/angular/v4/backdrop.mdx
similarity index 100%
rename from ui-kit/angular/backdrop.mdx
rename to ui-kit/angular/v4/backdrop.mdx
diff --git a/ui-kit/angular/badge.mdx b/ui-kit/angular/v4/badge.mdx
similarity index 100%
rename from ui-kit/angular/badge.mdx
rename to ui-kit/angular/v4/badge.mdx
diff --git a/ui-kit/angular/button-group.mdx b/ui-kit/angular/v4/button-group.mdx
similarity index 100%
rename from ui-kit/angular/button-group.mdx
rename to ui-kit/angular/v4/button-group.mdx
diff --git a/ui-kit/angular/call-buttons.mdx b/ui-kit/angular/v4/call-buttons.mdx
similarity index 100%
rename from ui-kit/angular/call-buttons.mdx
rename to ui-kit/angular/v4/call-buttons.mdx
diff --git a/ui-kit/angular/v4/call-features.mdx b/ui-kit/angular/v4/call-features.mdx
new file mode 100644
index 000000000..4c2cfe4e5
--- /dev/null
+++ b/ui-kit/angular/v4/call-features.mdx
@@ -0,0 +1,66 @@
+---
+title: "Call"
+description: "Call — CometChat documentation."
+---
+
+## Overview
+
+CometChat's Calls feature is an advanced functionality that allows you to seamlessly integrate one-on-one as well as group audio and video calling capabilities into your application. This document provides a technical overview of these features, as implemented in the Angular UI Kit.
+
+## Integration
+
+First, make sure that you've correctly integrated the UI Kit library into your project. If you haven't done this yet or are facing difficulties, refer to our [Getting Started](/ui-kit/angular/getting-started) guide. This guide will walk you through a step-by-step process of integrating our UI Kit into your Angular project.
+
+Once you've successfully integrated the UI Kit, the next step is to add the CometChat Calls SDK to your project. This is necessary to enable the calling features in the UI Kit. Here's how you do it:
+
+Add the SDK files to your project's dependencies or libraries:
+
+```java
+npm install @cometchat/calls-sdk-javascript
+```
+
+After adding this dependency, the Angular UI Kit will automatically detect it and activate the calling features. Now, your application supports both audio and video calling. You will see [CallButtons](/ui-kit/angular/call-buttons) component rendered in [MessageHeader](/ui-kit/angular/message-header) Component.
+
+
+
+
+
+## Features
+
+### Incoming Call
+
+The [Incoming Call](/ui-kit/angular/incoming-call) component of the CometChat UI Kit provides the functionality that lets users receive real-time audio and video calls in the app.
+
+When a call is made to a user, the Incoming Call component triggers and displays a call screen. This call screen typically displays the caller information and provides the user with options to either accept or reject the incoming call.
+
+
+
+
+
+### Outgoing Call
+
+The [Outgoing Call](/ui-kit/angular/outgoing-call) component of the CometChat UI Kit is designed to manage the outgoing call process within your application. When a user initiates an audio or video call to another user or group, this component displays an outgoing call screen, showcasing information about the recipient and the call status.
+
+Importantly, the Outgoing Call component is smartly designed to transition automatically into the ongoing call screen once the receiver accepts the call. This ensures a smooth flow from initiating the call to engaging in a conversation, without any additional steps required from the user.
+
+
+
+
+
+### Ongoing Call
+
+The [OngoingCall](/ui-kit/angular/ongoing-call) component is the user interface that displays during an ongoing call. For an audio call, this screen displays the participant's name, call duration, and buttons to mute the audio, enable or disable video, switch the camera, and end the call.
+
+For a video call, the Call Screen might additionally display the video footage from both the user's camera and the recipient's camera.
+
+
+
+
+
+### Call Logs
+
+[Call Logs](/ui-kit/angular/call-logs) component provides you with the records call events such as who called who, the time of the call, and the duration of the call. This information can be fetched from the CometChat server and displayed in a structured format for users to view their past call activities.
+
+
+
+
diff --git a/ui-kit/angular/call-log-details.mdx b/ui-kit/angular/v4/call-log-details.mdx
similarity index 100%
rename from ui-kit/angular/call-log-details.mdx
rename to ui-kit/angular/v4/call-log-details.mdx
diff --git a/ui-kit/angular/call-log-history.mdx b/ui-kit/angular/v4/call-log-history.mdx
similarity index 100%
rename from ui-kit/angular/call-log-history.mdx
rename to ui-kit/angular/v4/call-log-history.mdx
diff --git a/ui-kit/angular/call-log-participants.mdx b/ui-kit/angular/v4/call-log-participants.mdx
similarity index 100%
rename from ui-kit/angular/call-log-participants.mdx
rename to ui-kit/angular/v4/call-log-participants.mdx
diff --git a/ui-kit/angular/call-log-recording.mdx b/ui-kit/angular/v4/call-log-recording.mdx
similarity index 100%
rename from ui-kit/angular/call-log-recording.mdx
rename to ui-kit/angular/v4/call-log-recording.mdx
diff --git a/ui-kit/angular/call-log-with-details.mdx b/ui-kit/angular/v4/call-log-with-details.mdx
similarity index 100%
rename from ui-kit/angular/call-log-with-details.mdx
rename to ui-kit/angular/v4/call-log-with-details.mdx
diff --git a/ui-kit/angular/call-logs.mdx b/ui-kit/angular/v4/call-logs.mdx
similarity index 100%
rename from ui-kit/angular/call-logs.mdx
rename to ui-kit/angular/v4/call-logs.mdx
diff --git a/ui-kit/angular/call-overview.mdx b/ui-kit/angular/v4/call-overview.mdx
similarity index 100%
rename from ui-kit/angular/call-overview.mdx
rename to ui-kit/angular/v4/call-overview.mdx
diff --git a/ui-kit/angular/checkbox.mdx b/ui-kit/angular/v4/checkbox.mdx
similarity index 100%
rename from ui-kit/angular/checkbox.mdx
rename to ui-kit/angular/v4/checkbox.mdx
diff --git a/ui-kit/angular/cometchat-quick-view.mdx b/ui-kit/angular/v4/cometchat-quick-view.mdx
similarity index 100%
rename from ui-kit/angular/cometchat-quick-view.mdx
rename to ui-kit/angular/v4/cometchat-quick-view.mdx
diff --git a/ui-kit/angular/components-overview.mdx b/ui-kit/angular/v4/components-overview.mdx
similarity index 100%
rename from ui-kit/angular/components-overview.mdx
rename to ui-kit/angular/v4/components-overview.mdx
diff --git a/ui-kit/angular/confirm-dialog.mdx b/ui-kit/angular/v4/confirm-dialog.mdx
similarity index 100%
rename from ui-kit/angular/confirm-dialog.mdx
rename to ui-kit/angular/v4/confirm-dialog.mdx
diff --git a/ui-kit/angular/contacts.mdx b/ui-kit/angular/v4/contacts.mdx
similarity index 100%
rename from ui-kit/angular/contacts.mdx
rename to ui-kit/angular/v4/contacts.mdx
diff --git a/ui-kit/angular/conversations-with-messages.mdx b/ui-kit/angular/v4/conversations-with-messages.mdx
similarity index 100%
rename from ui-kit/angular/conversations-with-messages.mdx
rename to ui-kit/angular/v4/conversations-with-messages.mdx
diff --git a/ui-kit/angular/conversations.mdx b/ui-kit/angular/v4/conversations.mdx
similarity index 100%
rename from ui-kit/angular/conversations.mdx
rename to ui-kit/angular/v4/conversations.mdx
diff --git a/ui-kit/angular/v4/core-features.mdx b/ui-kit/angular/v4/core-features.mdx
new file mode 100644
index 000000000..88aa7691e
--- /dev/null
+++ b/ui-kit/angular/v4/core-features.mdx
@@ -0,0 +1,131 @@
+---
+title: "Core"
+description: "Core — CometChat documentation."
+---
+
+## Overview
+
+The UI Kit comprises a variety of components, each designed to work seamlessly with one another to deliver a comprehensive and intuitive chat experience.
+
+Here's how different UI Kit components work together to achieve CometChat's Core features:
+
+## Instant Messaging
+
+At the heart of CometChat's functionality is the ability to support real-time text messaging. Users can send and receive instant messages, fostering quick and efficient communication.
+
+
+
+
+
+| Components | Functionality |
+| -------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [MessageComposer](/ui-kit/angular/message-composer) | [MessageComposer](/ui-kit/angular/message-composer) is a Component that enables users to write and send a variety of messages. |
+| [MessageList](/ui-kit/angular/message-list) | [MessageList](/ui-kit/angular/message-list) is a Component that renders a list of messages sent and messages received using [TextBubble](/ui-kit/angular/text-bubble). |
+| [Messages](/ui-kit/angular/messages) | [Messages](/ui-kit/angular/messages) component in CometChat's UI Kit is a comprehensive component that includes both the [MessageComposer](/ui-kit/angular/message-composer) and the [MessageList](/ui-kit/angular/message-list) components. So, if you're looking to implement a messaging feature in your application, using the Messages component would be a straightforward and efficient way to do it. |
+
+## Media Sharing
+
+Beyond text, CometChat allows users to share various media types within their conversations. This includes images, videos, audio files, and documents, enriching the chat experience and enabling more comprehensive communication.
+
+
+
+
+
+| Components | Functionality |
+| -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| [MessageComposer](/ui-kit/angular/message-composer) | the [MessageComposer](/ui-kit/angular/message-composer) component includes an ActionSheet. This ActionSheet serves as a menu appearing over the app's context, offering various options for sharing media files. |
+| [MessageList](/ui-kit/angular/message-list) | the [MessageList](/ui-kit/angular/message-list) component is responsible for rendering various Media Message bubbles, such as [Image Bubble](/ui-kit/angular/image-bubble), [File Bubble](/ui-kit/angular/file-bubble), [Audio Bubble](/ui-kit/angular/audio-bubble) [Video Bubble](/ui-kit/angular/video-bubble) |
+
+> In CometChat's UI Kit, the [Messages](/ui-kit/angular/messages) component combines both the [MessageComposer](/ui-kit/angular/message-composer) and the [MessageList](/ui-kit/angular/message-list) components. If you want to add messaging features to your app, using the Messages component is a simple and effective approach.
+
+## Read Receipts
+
+CometChat's Read Receipts feature provides visibility into the message status, letting users know when a message has been delivered and read. This brings clarity to the communication and ensures users are informed about the status of their messages.
+
+
+
+
+
+| Components | Functionality |
+| -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Conversations](/ui-kit/angular/conversations) | [Conversations](/ui-kit/angular/conversations) is a Component that renders Conversations item List, Conversation item also displays the delivery status of the last message providing users with real-time updates on the status of their messages. |
+| [MessageList](/ui-kit/angular/message-list) | [MessageList](/ui-kit/angular/message-list) is a Component that renders different types of Message bubbles, Read Recept status is an integral part of all message bubbles, no matter the type, and provides real-time updates about the status of the message. |
+| [MessageInformation](/ui-kit/angular/message-information) | [MessageInformation](/ui-kit/angular/message-information) component provides transparency into the status of each sent message, giving the sender insights into whether their message has been delivered and read. |
+
+## Typing Indicator
+
+The Typing Indicator feature in CometChat shows when a user is typing a response in real-time, fostering a more interactive and engaging chat environment. This feature enhances the real-time communication experience, making conversations feel more natural and fluid.
+
+
+
+
+
+| Components | Functionality |
+| ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Conversations](/ui-kit/angular/conversations) | [Conversations](/ui-kit/angular/conversations) is a Component that renders Conversations item List, Conversations item also shows real-time typing status indicators. This means that if a user in a one-on-one chat or a participant in a group chat is currently typing a message |
+| [Message Header](/ui-kit/angular/message-header) | [Message Header](/ui-kit/angular/message-header) that renders details of User or Groups in ToolBar. The MessageHeader also handles the Typing Indicator functionality. When a user or a member in a group is typing, the MessageHeader dynamically updates to display a 'typing...' status in real-time. |
+
+## User Presence
+
+CometChat's User Presence feature allows users to see whether their contacts are online, offline. This helps users know the best time to initiate a conversation and sets expectations about response times.
+
+
+
+
+
+| Components | Functionality |
+| ----------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Conversations](/ui-kit/angular/conversations) | [Conversations](/ui-kit/angular/conversations) is a Component that renders Conversations item List, Conversations item also shows user presence information. |
+| [Message Header](/ui-kit/angular/message-header) | [Message Header](/ui-kit/angular/message-header) that renders details of User or Groups in ToolBar. The MessageHeader also handles user Presence information. |
+| [Users](/ui-kit/angular/users) | [Users](/ui-kit/angular/users) renders list of users available in your app.It also responsible to render users Presence information. |
+| [Group Members](/ui-kit/angular/group-members) | [Group Members](/ui-kit/angular/group-members) renders list of users available in the group. The Group Members component also handles user Presence information. |
+
+## Reactions
+
+CometChat's Reactions feature adds a layer of expressiveness to your chat application by allowing users to angular to messages. With Reactions, users can convey a range of emotions or express their thoughts on a particular message without typing out a full response, enhancing their user experience and fostering greater engagement.
+
+
+
+
+
+| Components | Functionality |
+| ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [MessageList](/ui-kit/angular/message-list) | [MessageList](/ui-kit/angular/message-list) is a Component that renders different types of Message bubbles, Irrespective of the type of message bubble, Reactions are an integral part and offer a more engaging, expressive way for users to respond to messages. |
+| [Messages](/ui-kit/angular/messages) | [Messages](/ui-kit/angular/messages)component in CometChat's UI Kit is a comprehensive component that includes both the [MessageComposer](/ui-kit/angular/message-composer) and the [MessageList](/ui-kit/angular/message-list) components. So, if you're looking to implement a messaging feature in your application, using the Messages component would be a straightforward and efficient way to do it. |
+
+## Mentions
+
+Mentions is a robust feature provided by CometChat that enhances the interactivity and clarity of group or 1-1 chats by allowing users to directly address or refer to specific individuals in a conversation.
+
+
+
+
+
+| Components | Functionality |
+| -------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Conversations](/ui-kit/angular/conversations) | [Conversations](/ui-kit/angular/conversations) component provides an enhanced user experience by integrating the Mentions feature. This means that from the conversation list itself, users can see where they or someone else have been specifically mentioned. |
+| [MessageComposer](/ui-kit/angular/message-composer) | [MessageComposer](/ui-kit/angular/message-composer) is a component that allows users to craft and send various types of messages, including the usage of the Mentions feature for direct addressing within the conversation. |
+| [MessageList](/ui-kit/angular/message-list) | [MessageList](/ui-kit/angular/message-list) is a component that displays a list of sent and received messages. It also supports the rendering of Mentions, enhancing the readability and interactivity of conversations. |
+| [Messages](/ui-kit/angular/messages) | [Messages](/ui-kit/angular/messages) The component is a comprehensive element in CometChat's UI Kit, encapsulating both the [MessageComposer](/ui-kit/angular/message-composer) and [MessageList](/ui-kit/angular/message-list) components. It fully supports the Mentions feature, providing a streamlined way to implement an interactive and engaging messaging function in your application. |
+
+## Threaded Conversations
+
+The Threaded Conversations feature enables users to respond directly to a specific message in a chat. This keeps conversations organized and enhances the user experience by maintaining context, especially in group chats.
+
+
+
+
+
+| Components | Functionality |
+| ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| [Threaded Messages](/ui-kit/angular/threaded-messages) | [Threaded Messages](/ui-kit/angular/threaded-messages) that displays all replies made to a particular message in a conversation. |
+
+## Group Chat
+
+CometChat facilitates Group Chats, allowing users to have conversations with multiple participants simultaneously. This feature is crucial for team collaborations, group discussions, social communities, and more.
+
+
+
+
+
+For a comprehensive understanding and guide on implementing and using the Groups feature in CometChat, you should refer to our detailed guide on [Groups](/ui-kit/angular/groups).
diff --git a/ui-kit/angular/create-group.mdx b/ui-kit/angular/v4/create-group.mdx
similarity index 100%
rename from ui-kit/angular/create-group.mdx
rename to ui-kit/angular/v4/create-group.mdx
diff --git a/ui-kit/angular/custom-message-guide.mdx b/ui-kit/angular/v4/custom-message-guide.mdx
similarity index 100%
rename from ui-kit/angular/custom-message-guide.mdx
rename to ui-kit/angular/v4/custom-message-guide.mdx
diff --git a/ui-kit/angular/custom-text-formatter-guide.mdx b/ui-kit/angular/v4/custom-text-formatter-guide.mdx
similarity index 100%
rename from ui-kit/angular/custom-text-formatter-guide.mdx
rename to ui-kit/angular/v4/custom-text-formatter-guide.mdx
diff --git a/ui-kit/angular/date.mdx b/ui-kit/angular/v4/date.mdx
similarity index 100%
rename from ui-kit/angular/date.mdx
rename to ui-kit/angular/v4/date.mdx
diff --git a/ui-kit/angular/document-bubble.mdx b/ui-kit/angular/v4/document-bubble.mdx
similarity index 100%
rename from ui-kit/angular/document-bubble.mdx
rename to ui-kit/angular/v4/document-bubble.mdx
diff --git a/ui-kit/angular/dropdown.mdx b/ui-kit/angular/v4/dropdown.mdx
similarity index 100%
rename from ui-kit/angular/dropdown.mdx
rename to ui-kit/angular/v4/dropdown.mdx
diff --git a/ui-kit/angular/emoji-keyboard.mdx b/ui-kit/angular/v4/emoji-keyboard.mdx
similarity index 100%
rename from ui-kit/angular/emoji-keyboard.mdx
rename to ui-kit/angular/v4/emoji-keyboard.mdx
diff --git a/ui-kit/angular/v4/events.mdx b/ui-kit/angular/v4/events.mdx
new file mode 100644
index 000000000..636e6ac86
--- /dev/null
+++ b/ui-kit/angular/v4/events.mdx
@@ -0,0 +1,100 @@
+---
+title: "Events"
+description: "Events — CometChat documentation."
+---
+
+## Overview
+
+Events allow for a decoupled, flexible architecture where different parts of the application can interact without having to directly reference each other. This makes it easier to create complex, interactive experiences, as well as to extend and customize the functionality provided by the CometChat UI Kit.
+
+Both Components and Composite Components have the ability to emit events. These events are dispatched in response to certain changes or user interactions within the component. By emitting events, these components allow other parts of the application to react to changes or interactions, thus enabling dynamic and interactive behavior within the application.
+
+### CometChatConversationEvents
+
+`CometChatConversationEvents` emits events when the logged-in user executes some action on a conversation object.
+
+| Name | Description |
+| --------------------- | -------------------------------------------------------------------------- |
+| ccConversationDeleted | This event is triggered when the user successfully deletes a conversation. |
+
+### CometChatUserEvents
+
+`CometChatUserEvents` emits events when the logged-in user executes some action on an user object.
+
+It consists of the following events:
+
+| Name | Description |
+| --------------- | ------------------------------------------------------------------------- |
+| ccUserBlocked | This event is triggered when the user successfully blocks another user. |
+| ccUserUnblocked | This event is triggered when the user successfully unblocks another user. |
+
+### CometChatGroupEvents
+
+`CometChatGroupEvents` emits events when the logged-in user executes some action on a group object.
+
+It consists of the following events:
+
+| Name | Description |
+| ------------------------- | ------------------------------------------------------------------------------------ |
+| ccGroupCreated | This event is triggered when the user creates a group successfully |
+| ccGroupDeleted | This event is triggered when the group member deletes the group successfully |
+| ccGroupLeft | This event is triggered when the group member leaves the group successfully |
+| ccGroupMemberScopeChanged | This event is triggered when the group member's scope is updated successfully |
+| ccGroupMemberKicked | This event is triggered when the group member is kicked |
+| ccGroupMemberBanned | This event is triggered when the group member is banned |
+| ccGroupMemberUnbanned | This event is triggered when the group member is un-banned |
+| ccGroupMemberJoined | This event is triggered when a user joins the group |
+| ccGroupMemberAdded | This event is triggered when a user is added to the group |
+| ccOwnershipChanged | This event is triggered when the group ownership is assigned to another group member |
+
+### CometChatMessageEvents
+
+`CometChatMessageEvents` emits events when the logged-in user executes some action on a message object.
+
+It consists of the following events:
+
+| Name | Description |
+| ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
+| ccMessageSent | This event is triggered when the sent message is in transit and also when it is received by the receiver. |
+| ccMessageEdited | This event is triggered when the user successfully edits the message. |
+| ccMessageDeleted | This event is triggered when the user successfully deletes the message. |
+| ccMessageRead | This event is triggered when the sent message is read by the receiver. |
+| ccLiveReaction | This event is triggered when the user sends a live reaction. |
+| onTextMessageReceived | This event is emitted when the CometChat SDK listener emits a text message. |
+| onMediaMessageReceived | This event is emitted when the CometChat SDK listener emits a media message. |
+| onCustomMessageReceived | This event is emitted when the CometChat SDK listener emits a custom message. |
+| onTypingStarted | This event is emitted when the CometChat SDK listener indicates that a user has started typing. |
+| onTypingEnded | This event is emitted when the CometChat SDK listener indicates that a user has stopped typing. |
+| onMessagesDelivered | This event is emitted when the CometChat SDK listener indicates that messages have been delivered. |
+| onMessagesRead | This event is emitted when the CometChat SDK listener indicates that messages have been read. |
+| onMessageEdited | This event is emitted when the CometChat SDK listener indicates that a message has been edited. |
+| onMessageDeleted | This event is emitted when the CometChat SDK listener indicates that a message has been deleted. |
+| onTransientMessageReceived | This event is emitted when the CometChat SDK listener emits a transient message. |
+| onInteractionGoalCompleted | This event is emitted when the CometChat SDK listener indicates that an interaction goal has been completed. |
+| onFormMessageReceived | This event is emitted when an interactive message of 'form' type is received from the CometChat SDK listener. |
+| onCardMessageReceived | This event is emitted when an interactive message of 'card' type is received from the CometChat SDK listener. |
+| onSchedulerMessageReceived | This event is emitted when an interactive message of 'scheduler' type is received from the CometChat SDK listener. |
+| onCustomInteractiveMessageReceived | This event is emitted when an interactive message of 'customInteractive' type is received from the CometChat SDK listener. |
+
+### CometChatCallEvents
+
+`CometChatCallEvents` emits events when the logged-in user executes some action on a call object.
+
+It consists of the following events:
+
+| Name | Description |
+| -------------- | ---------------------------------------------------------------------------- |
+| ccOutgoingCall | This event is triggered when the user initiates a voice/video call. |
+| ccCallAccepted | This event is triggered when the initiated call is accepted by the receiver. |
+| ccCallRejected | This event is triggered when the initiated call is rejected by the receiver. |
+| ccCallEnded | This event is triggered when the initiated call successfully ends. |
+
+### UI events
+
+UI events, refer to actions or interactions performed by a user within the CometChat's UI Kit. These events are triggered when a user interacts with various UI elements, such as buttons, menus, checkboxes, input fields, or any other interactive components.
+
+It consists of the following events:
+
+| Name | Description |
+| ------------------- | ---------------------------------------------------------------------------- |
+| ccActiveChatChanged | This event is triggered when the user navigates to a particular chat window. |
diff --git a/ui-kit/angular/v4/extensions.mdx b/ui-kit/angular/v4/extensions.mdx
new file mode 100644
index 000000000..e7cd18089
--- /dev/null
+++ b/ui-kit/angular/v4/extensions.mdx
@@ -0,0 +1,132 @@
+---
+title: "Extensions"
+description: "Extensions — CometChat documentation."
+---
+
+## Overview
+
+CometChat's UI Kit offers built-in support for various extensions, enriching the chatting experience with enhanced functionality. These extensions augment your chat application, making it more interactive, secure, and efficient.
+
+Activating extensions within CometChat is a straightforward process through your application's dashboard. For detailed instructions, refer to our guide on [Extensions](/fundamentals/extensions-overview).
+
+Once you've enabled your desired extension in the dashboard, it seamlessly integrates into your CometChat application upon initialization and successful login. It's important to note that extension features will only be available if they are supported by the CometChat UI Kit.
+
+CometChat's UI Kit provides native support for 12 powerful extensions. This effortless integration enables you to enhance your chat application with engaging features without any additional coding. Simply enable the desired extensions from the CometChat Dashboard, and they will automatically enhance the relevant components of your application, providing a richer and more engaging experience for your users.
+
+## Built-in Extensions
+
+Here's a guide on how you can enable and integrate these extensions:
+
+### Stickers
+
+The Stickers extension allows users to express their emotions more creatively. It adds a much-needed fun element to the chat by allowing users to send various pre-designed stickers. For a comprehensive understanding and guide on implementing and using the Sticker Extension, refer to our specific guide on the [Sticker Extension](/fundamentals/stickers).
+
+Once you have successfully activated the [Sticker Extension](/fundamentals/stickers) from your CometChat Dashboard, the feature will automatically be incorporated into the [Message Composer](/ui-kit/angular/message-composer) component of UI Kits.
+
+
+
+
+
+### Polls
+
+The Polls extension enhances group discussions by allowing users to create polls. Users can ask questions with a predefined list of answers, enabling a quick, organized way to gather group opinions. For a comprehensive understanding and guide on implementing and using the Polls Extension, refer to our specific guide on the [Polls Extension](/fundamentals/polls).
+
+Once you have successfully activated the [Polls Extension](/fundamentals/polls) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/angular/message-composer) component of UI Kits.
+
+
+
+
+
+### Collaborative Whiteboard
+
+The Collaborative Whiteboard extension facilitates real-time collaboration. Users can draw, brainstorm, and share ideas on a shared digital whiteboard. For a comprehensive understanding and guide on implementing and using the Collaborative Whiteboard Extension, refer to our specific guide on the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard).
+
+Once you have successfully activated the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/angular/message-composer) component of UI Kits.
+
+
+
+
+
+### Collaborative Document
+
+With the Collaborative Document extension, users can work together on a shared document. This feature is essential for remote teams where document collaboration is a recurring requirement. For a comprehensive understanding and guide on implementing and using the Collaborative Document Extension, refer to our specific guide on the [Collaborative Document Extension](/fundamentals/collaborative-document).
+
+Once you have successfully activated the [Collaborative Document Extension](/fundamentals/collaborative-document) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/angular/message-composer) component of UI Kits.
+
+
+
+
+
+### Message Reactions
+
+Message Reactions extension lets users express their emotions towards a message by choosing from a range of emojis. It provides a quick way to respond to any shared message. For a comprehensive understanding and guide on implementing and using the Message Reactions Extension, refer to our specific guide on the [Message Reactions Extension](/fundamentals/reactions).
+
+Once you have successfully activated the [Message Reactions Extension](/fundamentals/reactions) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of [MessageList Component](/ui-kit/angular/message-list) component of UI Kits.
+
+
+
+
+
+### Message Translation
+
+The Message Translation extension in CometChat is designed to translate any message into your local locale. It eliminates language barriers, making the chat more inclusive. For a comprehensive understanding and guide on implementing and using the Message Translation Extension, refer to our specific guide on the [Message Translation Extension](/fundamentals/message-translation).
+
+Once you have successfully activated the [Message Translation Extension](/fundamentals/message-translation) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of [MessageList Component](/ui-kit/angular/message-list) component of UI Kits.
+
+
+
+
+
+### Link Preview
+
+The Link Preview extension provides a summary of the URL shared in the chat. It includes the title, a description, and a thumbnail image from the web page. For a comprehensive understanding and guide on implementing and using the Link Preview Extension, refer to our specific guide on the [Link Preview Extension](/fundamentals/link-preview).
+
+Once you have successfully activated the [Link Preview Extension](/fundamentals/link-preview) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/angular/message-list) component of UI Kits.
+
+
+
+
+
+### Profanity Filter
+
+The Profanity Filter extension helps in maintaining the chat decorum by censoring obscene and inappropriate words in the messages. For a comprehensive understanding and guide on implementing and using the Profanity Filter Extension, refer to our specific guide on the [Legacy Extensions](/moderation/legacy-extensions).
+
+Once you have successfully activated the Profanity Filter Extension from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/angular/message-list) component of UI Kits.
+
+
+
+
+
+### Data Masking
+
+The Data Masking extension helps secure sensitive data by masking information like credit card numbers and phone numbers in a chat message. For a comprehensive understanding and guide on implementing and using the Data Masking Extension, refer to our specific guide on the [Legacy Extensions](/moderation/legacy-extensions).
+
+Once you have successfully activated the Data Masking Extension from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/angular/message-list) component of UI Kits.
+
+
+
+
+
+### Image Moderation
+
+The Image Moderation extension uses machine learning to detect and filter out inappropriate or explicit images shared in the chat. For a comprehensive understanding and guide on implementing and using the Image Moderation Extension, refer to our specific guide on the [Legacy Extensions](/moderation/legacy-extensions).
+
+Once you have successfully activated the Image Moderation Extension from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/angular/message-list) component of UI Kits.
+
+
+
+
+
+### Thumbnail Generation
+
+The Thumbnail Generation extension automatically creates a smaller preview image whenever a larger image is shared, helping to reduce the upload/download time and bandwidth usage. For a comprehensive understanding and guide on implementing and using the Thumbnail Generation Extension, refer to our specific guide on the [Thumbnail Generation Extension](/fundamentals/thumbnail-generation).
+
+Once you have successfully activated the [Thumbnail Generation Extension](/fundamentals/thumbnail-generation) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/angular/message-list) component of UI Kits.
+
+
+
+
+
+### Smart Replies
+
+Smart Replies extension provides automated, predictive text responses, making the conversation more efficient by reducing the response time. For a comprehensive understanding and guide on implementing and using the Smart Replies Extension, refer to our specific guide on the [Smart Replies Extension](/fundamentals/smart-replies).
diff --git a/ui-kit/angular/file-bubble.mdx b/ui-kit/angular/v4/file-bubble.mdx
similarity index 100%
rename from ui-kit/angular/file-bubble.mdx
rename to ui-kit/angular/v4/file-bubble.mdx
diff --git a/ui-kit/angular/getting-started.mdx b/ui-kit/angular/v4/getting-started.mdx
similarity index 99%
rename from ui-kit/angular/getting-started.mdx
rename to ui-kit/angular/v4/getting-started.mdx
index 8b7212aaa..55e240908 100644
--- a/ui-kit/angular/getting-started.mdx
+++ b/ui-kit/angular/v4/getting-started.mdx
@@ -76,7 +76,7 @@ Before installing **UI Kit** for Angular, you need to create a CometChat applica
### Built With
* [Node](https://nodejs.org/)
-* [npm](https://www.npmjs.com/get-npm)
+* [npm](https://docs.npmjs.com/getting-started)
* [Angular CLI](https://angular.io/cli)
***
@@ -104,7 +104,7 @@ Step 2
This developer kit is an add-on feature to CometChat JavaScript SDK, so installing it will also install the core Chat SDK.
```java
-npm install @cometchat/chat-uikit-angular
+npm install @cometchat/chat-uikit-angular@legacy
```
diff --git a/ui-kit/angular/group-add-members.mdx b/ui-kit/angular/v4/group-add-members.mdx
similarity index 100%
rename from ui-kit/angular/group-add-members.mdx
rename to ui-kit/angular/v4/group-add-members.mdx
diff --git a/ui-kit/angular/group-banned-members.mdx b/ui-kit/angular/v4/group-banned-members.mdx
similarity index 100%
rename from ui-kit/angular/group-banned-members.mdx
rename to ui-kit/angular/v4/group-banned-members.mdx
diff --git a/ui-kit/angular/group-details.mdx b/ui-kit/angular/v4/group-details.mdx
similarity index 100%
rename from ui-kit/angular/group-details.mdx
rename to ui-kit/angular/v4/group-details.mdx
diff --git a/ui-kit/angular/group-members.mdx b/ui-kit/angular/v4/group-members.mdx
similarity index 100%
rename from ui-kit/angular/group-members.mdx
rename to ui-kit/angular/v4/group-members.mdx
diff --git a/ui-kit/angular/group-transfer-ownership.mdx b/ui-kit/angular/v4/group-transfer-ownership.mdx
similarity index 100%
rename from ui-kit/angular/group-transfer-ownership.mdx
rename to ui-kit/angular/v4/group-transfer-ownership.mdx
diff --git a/ui-kit/angular/groups-with-messages.mdx b/ui-kit/angular/v4/groups-with-messages.mdx
similarity index 100%
rename from ui-kit/angular/groups-with-messages.mdx
rename to ui-kit/angular/v4/groups-with-messages.mdx
diff --git a/ui-kit/angular/groups.mdx b/ui-kit/angular/v4/groups.mdx
similarity index 100%
rename from ui-kit/angular/groups.mdx
rename to ui-kit/angular/v4/groups.mdx
diff --git a/ui-kit/angular/icon-button.mdx b/ui-kit/angular/v4/icon-button.mdx
similarity index 100%
rename from ui-kit/angular/icon-button.mdx
rename to ui-kit/angular/v4/icon-button.mdx
diff --git a/ui-kit/angular/icon.mdx b/ui-kit/angular/v4/icon.mdx
similarity index 100%
rename from ui-kit/angular/icon.mdx
rename to ui-kit/angular/v4/icon.mdx
diff --git a/ui-kit/angular/image-bubble.mdx b/ui-kit/angular/v4/image-bubble.mdx
similarity index 100%
rename from ui-kit/angular/image-bubble.mdx
rename to ui-kit/angular/v4/image-bubble.mdx
diff --git a/ui-kit/angular/incoming-call.mdx b/ui-kit/angular/v4/incoming-call.mdx
similarity index 100%
rename from ui-kit/angular/incoming-call.mdx
rename to ui-kit/angular/v4/incoming-call.mdx
diff --git a/ui-kit/angular/input.mdx b/ui-kit/angular/v4/input.mdx
similarity index 100%
rename from ui-kit/angular/input.mdx
rename to ui-kit/angular/v4/input.mdx
diff --git a/ui-kit/angular/interactive-action-entity.mdx b/ui-kit/angular/v4/interactive-action-entity.mdx
similarity index 100%
rename from ui-kit/angular/interactive-action-entity.mdx
rename to ui-kit/angular/v4/interactive-action-entity.mdx
diff --git a/ui-kit/angular/interactive-button-element.mdx b/ui-kit/angular/v4/interactive-button-element.mdx
similarity index 100%
rename from ui-kit/angular/interactive-button-element.mdx
rename to ui-kit/angular/v4/interactive-button-element.mdx
diff --git a/ui-kit/angular/interactive-card-bubble.mdx b/ui-kit/angular/v4/interactive-card-bubble.mdx
similarity index 100%
rename from ui-kit/angular/interactive-card-bubble.mdx
rename to ui-kit/angular/v4/interactive-card-bubble.mdx
diff --git a/ui-kit/angular/interactive-card-message.mdx b/ui-kit/angular/v4/interactive-card-message.mdx
similarity index 100%
rename from ui-kit/angular/interactive-card-message.mdx
rename to ui-kit/angular/v4/interactive-card-message.mdx
diff --git a/ui-kit/angular/interactive-checkbox-element.mdx b/ui-kit/angular/v4/interactive-checkbox-element.mdx
similarity index 100%
rename from ui-kit/angular/interactive-checkbox-element.mdx
rename to ui-kit/angular/v4/interactive-checkbox-element.mdx
diff --git a/ui-kit/angular/interactive-custom-interactive-message.mdx b/ui-kit/angular/v4/interactive-custom-interactive-message.mdx
similarity index 100%
rename from ui-kit/angular/interactive-custom-interactive-message.mdx
rename to ui-kit/angular/v4/interactive-custom-interactive-message.mdx
diff --git a/ui-kit/angular/interactive-date-time-picker-element.mdx b/ui-kit/angular/v4/interactive-date-time-picker-element.mdx
similarity index 100%
rename from ui-kit/angular/interactive-date-time-picker-element.mdx
rename to ui-kit/angular/v4/interactive-date-time-picker-element.mdx
diff --git a/ui-kit/angular/interactive-dropdown-element.mdx b/ui-kit/angular/v4/interactive-dropdown-element.mdx
similarity index 100%
rename from ui-kit/angular/interactive-dropdown-element.mdx
rename to ui-kit/angular/v4/interactive-dropdown-element.mdx
diff --git a/ui-kit/angular/interactive-element-type.mdx b/ui-kit/angular/v4/interactive-element-type.mdx
similarity index 100%
rename from ui-kit/angular/interactive-element-type.mdx
rename to ui-kit/angular/v4/interactive-element-type.mdx
diff --git a/ui-kit/angular/interactive-form-bubble.mdx b/ui-kit/angular/v4/interactive-form-bubble.mdx
similarity index 100%
rename from ui-kit/angular/interactive-form-bubble.mdx
rename to ui-kit/angular/v4/interactive-form-bubble.mdx
diff --git a/ui-kit/angular/interactive-form-message.mdx b/ui-kit/angular/v4/interactive-form-message.mdx
similarity index 100%
rename from ui-kit/angular/interactive-form-message.mdx
rename to ui-kit/angular/v4/interactive-form-message.mdx
diff --git a/ui-kit/angular/interactive-label-element.mdx b/ui-kit/angular/v4/interactive-label-element.mdx
similarity index 100%
rename from ui-kit/angular/interactive-label-element.mdx
rename to ui-kit/angular/v4/interactive-label-element.mdx
diff --git a/ui-kit/angular/interactive-radio-button-element.mdx b/ui-kit/angular/v4/interactive-radio-button-element.mdx
similarity index 100%
rename from ui-kit/angular/interactive-radio-button-element.mdx
rename to ui-kit/angular/v4/interactive-radio-button-element.mdx
diff --git a/ui-kit/angular/interactive-scheduler-bubble.mdx b/ui-kit/angular/v4/interactive-scheduler-bubble.mdx
similarity index 100%
rename from ui-kit/angular/interactive-scheduler-bubble.mdx
rename to ui-kit/angular/v4/interactive-scheduler-bubble.mdx
diff --git a/ui-kit/angular/interactive-scheduler-message.mdx b/ui-kit/angular/v4/interactive-scheduler-message.mdx
similarity index 100%
rename from ui-kit/angular/interactive-scheduler-message.mdx
rename to ui-kit/angular/v4/interactive-scheduler-message.mdx
diff --git a/ui-kit/angular/interactive-single-select-element.mdx b/ui-kit/angular/v4/interactive-single-select-element.mdx
similarity index 100%
rename from ui-kit/angular/interactive-single-select-element.mdx
rename to ui-kit/angular/v4/interactive-single-select-element.mdx
diff --git a/ui-kit/angular/interactive-text-input-element.mdx b/ui-kit/angular/v4/interactive-text-input-element.mdx
similarity index 100%
rename from ui-kit/angular/interactive-text-input-element.mdx
rename to ui-kit/angular/v4/interactive-text-input-element.mdx
diff --git a/ui-kit/angular/join-protected-group.mdx b/ui-kit/angular/v4/join-protected-group.mdx
similarity index 100%
rename from ui-kit/angular/join-protected-group.mdx
rename to ui-kit/angular/v4/join-protected-group.mdx
diff --git a/ui-kit/angular/label.mdx b/ui-kit/angular/v4/label.mdx
similarity index 100%
rename from ui-kit/angular/label.mdx
rename to ui-kit/angular/v4/label.mdx
diff --git a/ui-kit/angular/link/changelog.mdx b/ui-kit/angular/v4/link/changelog.mdx
similarity index 100%
rename from ui-kit/angular/link/changelog.mdx
rename to ui-kit/angular/v4/link/changelog.mdx
diff --git a/ui-kit/angular/link/sample.mdx b/ui-kit/angular/v4/link/sample.mdx
similarity index 100%
rename from ui-kit/angular/link/sample.mdx
rename to ui-kit/angular/v4/link/sample.mdx
diff --git a/ui-kit/angular/list-item.mdx b/ui-kit/angular/v4/list-item.mdx
similarity index 100%
rename from ui-kit/angular/list-item.mdx
rename to ui-kit/angular/v4/list-item.mdx
diff --git a/ui-kit/angular/list.mdx b/ui-kit/angular/v4/list.mdx
similarity index 100%
rename from ui-kit/angular/list.mdx
rename to ui-kit/angular/v4/list.mdx
diff --git a/ui-kit/angular/loader.mdx b/ui-kit/angular/v4/loader.mdx
similarity index 100%
rename from ui-kit/angular/loader.mdx
rename to ui-kit/angular/v4/loader.mdx
diff --git a/ui-kit/angular/localize.mdx b/ui-kit/angular/v4/localize.mdx
similarity index 100%
rename from ui-kit/angular/localize.mdx
rename to ui-kit/angular/v4/localize.mdx
diff --git a/ui-kit/angular/media-recorder.mdx b/ui-kit/angular/v4/media-recorder.mdx
similarity index 100%
rename from ui-kit/angular/media-recorder.mdx
rename to ui-kit/angular/v4/media-recorder.mdx
diff --git a/ui-kit/angular/mentions-formatter-guide.mdx b/ui-kit/angular/v4/mentions-formatter-guide.mdx
similarity index 100%
rename from ui-kit/angular/mentions-formatter-guide.mdx
rename to ui-kit/angular/v4/mentions-formatter-guide.mdx
diff --git a/ui-kit/angular/message-bubble.mdx b/ui-kit/angular/v4/message-bubble.mdx
similarity index 100%
rename from ui-kit/angular/message-bubble.mdx
rename to ui-kit/angular/v4/message-bubble.mdx
diff --git a/ui-kit/angular/message-composer.mdx b/ui-kit/angular/v4/message-composer.mdx
similarity index 100%
rename from ui-kit/angular/message-composer.mdx
rename to ui-kit/angular/v4/message-composer.mdx
diff --git a/ui-kit/angular/message-header.mdx b/ui-kit/angular/v4/message-header.mdx
similarity index 100%
rename from ui-kit/angular/message-header.mdx
rename to ui-kit/angular/v4/message-header.mdx
diff --git a/ui-kit/angular/message-information.mdx b/ui-kit/angular/v4/message-information.mdx
similarity index 100%
rename from ui-kit/angular/message-information.mdx
rename to ui-kit/angular/v4/message-information.mdx
diff --git a/ui-kit/angular/message-input.mdx b/ui-kit/angular/v4/message-input.mdx
similarity index 100%
rename from ui-kit/angular/message-input.mdx
rename to ui-kit/angular/v4/message-input.mdx
diff --git a/ui-kit/angular/message-list.mdx b/ui-kit/angular/v4/message-list.mdx
similarity index 100%
rename from ui-kit/angular/message-list.mdx
rename to ui-kit/angular/v4/message-list.mdx
diff --git a/ui-kit/angular/message-template.mdx b/ui-kit/angular/v4/message-template.mdx
similarity index 100%
rename from ui-kit/angular/message-template.mdx
rename to ui-kit/angular/v4/message-template.mdx
diff --git a/ui-kit/angular/messages.mdx b/ui-kit/angular/v4/messages.mdx
similarity index 100%
rename from ui-kit/angular/messages.mdx
rename to ui-kit/angular/v4/messages.mdx
diff --git a/ui-kit/angular/v4/methods.mdx b/ui-kit/angular/v4/methods.mdx
new file mode 100644
index 000000000..80e893be4
--- /dev/null
+++ b/ui-kit/angular/v4/methods.mdx
@@ -0,0 +1,659 @@
+---
+title: "Methods"
+description: "Methods — CometChat documentation."
+---
+
+## Overview
+
+The UI Kit's core function is to extend the [Chat SDK](/sdk/javascript/overview), essentially translating the raw data and functionality provided by the underlying methods into visually appealing and easy-to-use UI components.
+
+To effectively manage and synchronize the UI elements and data across all components in the UI Kit, we utilize internal events. These internal events enable us to keep track of changes in real time and ensure that the UI reflects the most current state of data.
+
+The CometChat UI Kit has thoughtfully encapsulated the critical [Chat SDK](/sdk/javascript/overview) methods within its wrapper to efficiently manage internal eventing. This layer of abstraction simplifies interaction with the underlying CometChat SDK, making it more user-friendly for developers.
+
+## Methods
+
+You can access the methods using the `CometChatUIKit` class. This class provides access to all the public methods exposed by the CometChat UI Kit.
+
+### Init
+
+This method initializes the settings required for [CometChat JavaScript SDK](/sdk/javascript/overview). First, ensure UIKitSettings is set and then call the `init()` method on the app startup.
+
+
+
+Make sure you replace the **APP\_ID**, **REGION** and **AUTH\_KEY** with your CometChat App ID, Region and Auth Key in the below code. The `Auth Key` is an optional property of the `UIKitSettings` Class. It is intended for use primarily during proof-of-concept (POC) development or in the early stages of application development. You can use the [Auth Token](#login-using-auth-token) method to log in securely.
+
+
+
+
+
+```js
+import { UIKitSettingsBuilder } from "@cometchat/uikit-shared";//import shared package
+
+const COMETCHAT_CONSTANTS = {
+APP_ID: "APP_ID", __ Replace with your App ID
+REGION: "REGION", __ Replace with your App Region
+AUTH_KEY: "AUTH_KEY" __ Replace with your Auth Key
+}
+
+__create the builder
+const UIKitSettings = new UIKitSettingsBuilder()
+ .setAppId(COMETCHAT_CONSTANTS.APP_ID)
+ .setRegion(COMETCHAT_CONSTANTS.REGION)
+ .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
+ .subscribePresenceForAllUsers()
+ .build();
+
+
+__Initialize CometChat
+CometChatUIKit.init(UIKitSettings)?.then(()=>{
+__login your user
+})
+```
+
+
+
+
+
+
+### Setting Session Storage Mode
+
+If you want to use session storage instead of the default local storage, you can configure it during initialization:
+
+
+
+```js
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { UIKitSettingsBuilder } from "@cometchat/uikit-shared";
+
+const COMETCHAT_CONSTANTS = {
+ APP_ID: "APP_ID", // Replace with your App ID
+ REGION: "REGION", // Replace with your App Region
+ AUTH_KEY: "AUTH_KEY", // Replace with your Auth Key
+};
+
+const UIKitSettings = new UIKitSettingsBuilder()
+ .setAppId(COMETCHAT_CONSTANTS.APP_ID)
+ .setRegion(COMETCHAT_CONSTANTS.REGION)
+ .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
+ .subscribePresenceForAllUsers()
+ .setStorageMode(CometChat.StorageMode.SESSION)
+ .build();
+
+//Initialize CometChat UI Kit with Session Storage
+CometChatUIKit.init(UIKitSettings)?.then(() => {
+ console.log("Initialization completed successfully with session storage");
+ // You can now call login function.
+ })
+ .catch(console.log);
+```
+
+
+
+### getLoggedInUser
+
+You can use this method to check if there is any existing session in the SDK. This method should return the details of the logged-in user.
+
+
+
+```js
+import { CometChatUIKit } from "@cometchat/chat-uikit-angular";//import uikit package
+
+
+CometChatUIKit.getLoggedinUser().then(user => {
+ __Login user
+}).catch(console.log);
+```
+
+
+
+
+
+### Login using Auth Key
+
+This simple authentication procedure is useful when you are creating a POC or if you are in the development phase. For production apps, we suggest you use [AuthToken](#login-using-auth-token) instead of Auth Key.
+
+
+
+```js
+import { CometChatUIKit } from "@cometchat/chat-uikit-angular";
+
+const UID = "UID";
+const authKey = "AUTH_KEY";
+
+CometChatUIKit.getLoggedinUser()
+ .then((user) => {
+ if (!user) {
+ //Login user
+ CometChatUIKit.login({ uid: UID })
+ .then((user) => {
+ console.log("Login Successful:", { user });
+ //mount your app
+ })
+ .catch(console.log);
+ } else {
+ //user already logged in
+ //mount your app
+ }
+ })
+ .catch(console.log);
+```
+
+
+
+
+
+### Login using Auth Token
+
+This advanced authentication procedure does not use the Auth Key directly in your client code thus ensuring safety.
+
+1. [Create a User](/rest-api/chat-apis) via the CometChat API when the user signs up in your app.
+2. [Create an Auth Token](/rest-api/chat-apis) via the CometChat API for the new user and save the token in your database.
+3. Load the Auth Token in your client and pass it to the `loginWithAuthToken()` method.
+
+
+
+```js
+import { CometChatUIKit } from "@cometchat/chat-uikit-angular";
+
+const authToken = "AUTH_TOKEN";
+
+CometChatUIKit.getLoggedinUser().then(user => {
+ if(!user){
+ //Login user
+ CometChatUIKit.login({authToken}).then(user => {
+
+ console.log("Login Successful:", { user });
+ //mount your app
+
+ }).catch(console.log);
+ } else {
+ //user already logged in
+ //mount your app
+ }
+}).catch(console.log););
+```
+
+
+
+
+
+### Logout
+
+This method is used to end the user session of the logged-in user
+
+
+
+```js
+import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
+
+CometChatUIKit.logout();
+```
+
+
+
+
+
+### Create user
+
+This method takes a `User` object and the `Auth Key` as input parameters and returns the created `User` object if the request is successful.
+
+
+
+```js
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatUIKit } from "@cometchat/chat-uikit-angular";
+
+const authKey = "AUTH_KEY";
+const UID = "user1";
+const name = "Kevin";
+
+var user = new CometChat.User(UID);
+user.setName(name);
+CometChatUIKit.createUser(user, authKey)
+ .then((user) => {
+ console.log("user created", user);
+
+ CometChatUIKit.login(UID, authKey)
+ .then((user) => {
+ console.log("Login Successful:", { user });
+ //mount your app
+ })
+ .catch(console.log);
+ })
+ .catch(console.log);
+```
+
+
+
+
+
+### Update user
+
+This method takes a `User` object and the `Auth Key` as inputs and returns the updated `User` object on the successful execution of the request.
+
+
+
+```js
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatUIKit } from "@cometchat/chat-uikit-angular";
+
+const authKey = "AUTH_KEY";
+const UID = "user1";
+const name = "Kevin Fernandez";
+
+var user = new CometChat.User(UID);
+user.setName(name);
+CometChatUIKit.updateUser(user, authKey)
+ .then((user) => {
+ console.log("user updated", user);
+ })
+ .catch(console.log);
+```
+
+
+
+
+
+### Send text message
+
+This method sends a text message in a 1:1 or group chat. You need to pass a `TextMessage` object to it.
+
+
+
+```js
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatUIKit } from "@cometchat/chat-uikit-angular";
+import { CometChatUIKitConstants } from "@cometchat/uikit-resources";
+
+const receiverID = "UID";
+const messageText = "Hello world!";
+const receiverType = CometChatUIKitConstants.MessageReceiverType.user;
+const textMessage = new CometChat.TextMessage(
+ receiverID,
+ messageText,
+ receiverType
+);
+
+CometChatUIKit.sendMessage(textMessage)
+ .then((message) => {
+ console.log("Message sent successfully:", message);
+ })
+ .catch(console.log);
+```
+
+
+
+
+```js
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatUIKit } from "@cometchat/chat-uikit-angular";
+import { CometChatUIKitConstants } from "@cometchat/uikit-resources";
+
+const receiverID = "GUID";
+const messageText = "Hello world!";
+const receiverType = CometChatUIKitConstants.MessageReceiverType.group;
+const textMessage = new CometChat.TextMessage(
+ receiverID,
+ messageText,
+ receiverType
+);
+
+CometChatUIKit.sendMessage(textMessage)
+ .then((message) => {
+ console.log("Message sent successfully:", message);
+ })
+ .catch(console.log);
+```
+
+
+
+
+
+### Send media message
+
+This method sends a media message in a 1:1 or group chat. You need to pass a `MediaMessage` object to it.
+
+
+
+Make sure you replace the `INPUT FILE OBJECT` with the actual [file](https://developer.mozilla.org/en-US/docs/Web/API/File).
+
+
+
+
+
+```js
+import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
+import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
+import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package
+
+const receiverID = "UID";
+const messageType = CometChatUIKitConstants.MessageTypes.file;
+const receiverType = CometChatUIKitConstants.MessageReceiverType.user;
+const mediaMessage = new CometChat.MediaMessage(
+ receiverID,
+ `INPUT FILE OBJECT`,
+ messageType,
+ receiverType
+);
+
+CometChatUIKit.sendMediaMessage(mediaMessage)
+ .then((message) => {
+ console.log("Media message sent successfully", message);
+ })
+ .catch(console.log);
+```
+
+
+
+
+```js
+import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
+import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
+import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package
+
+const receiverID = "GUID";
+const messageType = CometChatUIKitConstants.MessageTypes.file;
+const receiverType = CometChatUIKitConstants.MessageReceiverType.group;
+const mediaMessage = new CometChat.MediaMessage(
+ receiverID,
+ `INPUT FILE OBJECT`,
+ messageType,
+ receiverType
+);
+
+CometChatUIKit.sendMediaMessage(mediaMessage)
+ .then((message) => {
+ console.log("Media message sent successfully", message);
+ })
+ .catch(console.log);
+```
+
+
+
+
+
+### Send custom message
+
+This method allows you to send custom messages which are neither text nor media messages.
+
+
+
+```js
+import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
+import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
+import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package
+
+const receiverID = "UID";
+const customData = {
+ latitude: "50.6192171633316",
+ longitude: "-72.68182268750002",
+};
+const customType = "location";
+const receiverType = CometChatUIKitConstants.MessageReceiverType.user;
+const customMessage = new CometChat.CustomMessage(
+ receiverID,
+ receiverType,
+ customType,
+ customData
+);
+
+CometChatUIKit.sendCustomMessage(customMessage)
+ .then((message) => {
+ console.log("custom message sent successfully", message);
+ })
+ .catch(console.log);
+```
+
+
+
+
+```js
+import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
+import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
+import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package
+
+const receiverID = "GUID";
+const customData = {
+ latitude: "50.6192171633316",
+ longitude: "-72.68182268750002",
+};
+const customType = "location";
+const receiverType = CometChatUIKitConstants.MessageReceiverType.group;
+const customMessage = new CometChat.CustomMessage(
+ receiverID,
+ receiverType,
+ customType,
+ customData
+);
+
+CometChatUIKit.sendCustomMessage(customMessage)
+ .then((message) => {
+ console.log("custom message sent successfully", message);
+ })
+ .catch(console.log);
+```
+
+
+
+
+
+### Send Form message
+
+This method allows you to send [Form](/web-shared/form-message)Messages which are the extension of Interactive Message
+
+
+
+```js
+import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
+import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
+import {
+ CometChatUIKitConstants,
+ APIAction,
+ ButtonElement,
+ TextInput,
+ FormMessage,
+} from "@cometchat/uikit-resources"; //import shared package
+
+const receiverID = "UID";
+// Create an instance of APIAction
+let apiAction = new APIAction("https://example.com/api", "POST");
+
+// Create an instance of ButtonElement
+let submitButton = new ButtonElement("1", apiAction, "Submit");
+
+// Create an instance of TextInput
+let nameInput = new TextInput("1", "Please enter your name");
+// Create a new instance of FormMessage
+
+let formMessage = new FormMessage(
+ "receiverId",
+ CometChatUIKitConstants.MessageReceiverType.user,
+ "Title",
+ [nameInput],
+ submitButton
+);
+
+CometChatUIKit.sendFormMessage(formMessage)
+ .then((message) => {
+ console.log("Form message sent successfully", message);
+ })
+ .catch(console.log);
+```
+
+
+
+
+```js
+import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
+import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
+import {
+ CometChatUIKitConstants,
+ APIAction,
+ ButtonElement,
+ TextInput,
+ FormMessage,
+} from "@cometchat/uikit-resources"; //import shared package
+
+const receiverID = "GUID";
+// Create an instance of APIAction
+let apiAction = new APIAction("https://example.com/api", "POST");
+// Create an instance of ButtonElement
+let submitButton = new ButtonElement("1", apiAction, "Submit");
+// Create an instance of TextInput
+let nameInput = new TextInput("1", "Please enter your name");
+// Create a new instance of FormMessage
+let formMessage = new FormMessage(
+ "receiverId",
+ CometChatUIKitConstants.MessageReceiverType.group,
+ "Title",
+ [nameInput],
+ submitButton
+);
+
+CometChatUIKit.sendFormMessage(formMessage)
+ .then((message) => {
+ console.log("Form message sent successfully", message);
+ })
+ .catch(console.log);
+```
+
+
+
+
+
+### Send Card Message
+
+This method allows you to send [Card](/web-shared/card-message)Messages which are the extension of Interactive Message
+
+
+
+```js
+import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
+import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
+import {
+ CometChatUIKitConstants,
+ ButtonElement,
+ CardMessage,
+} from "@cometchat/uikit-resources"; //import shared package
+
+const receiverID = "UID";
+// Create instance of ButtonElement for card actions
+let cardAction = new ButtonElement(
+ "1",
+ new APIAction("https://example.com/api", "POST"),
+ "Click Me"
+);
+// Create a new instance of CardMessage
+let cardMessage = new CardMessage(
+ "receiverId",
+ CometChatUIKitConstants.MessageReceiverType.user,
+ "This is a card",
+ [cardAction]
+);
+
+CometChatUIKit.sendCardMessage(cardMessage)
+ .then((message) => {
+ console.log("card message sent successfully", message);
+ })
+ .catch(console.log);
+```
+
+
+
+
+```js
+import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
+import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
+import {
+ CometChatUIKitConstants,
+ ButtonElement,
+ CardMessage,
+} from "@cometchat/uikit-resources"; //import shared package
+
+const receiverID = "GUID";
+// Create instance of ButtonElement for card actions
+let cardAction = new ButtonElement(
+ "1",
+ new APIAction("https://example.com/api", "POST"),
+ "Click Me"
+);
+// Create a new instance of CardMessage
+let cardMessage = new CardMessage(
+ "receiverId",
+ CometChatUIKitConstants.MessageReceiverType.group,
+ "This is a card",
+ [cardAction]
+);
+
+CometChatUIKit.sendCardMessage(cardMessage)
+ .then((message) => {
+ console.log("card message sent successfully", message);
+ })
+ .catch(console.log);
+```
+
+
+
+
+
+### Send Custom Interactive message
+
+This method allows you to send [Custom Interactive Messages](/web-shared/custom-interactive-message) which are the extension of Interactive Message
+
+
+
+```js
+import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
+import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
+import {
+ CometChatUIKitConstants,
+ ButtonElement,
+ CardMessage,
+} from "@cometchat/uikit-resources"; //import shared package
+
+const receiverID = "UID";
+// Create a new instance of CardMessage
+let customMessage = new CustomInteractiveMessage(
+ "receiverId",
+ CometChatUIKitConstants.MessageReceiverType.user,
+ json
+);
+
+CometChatUIKit.sendCustomInteractiveMessage(customMessage)
+ .then((message) => {
+ console.log("CustomInteractive message sent successfully", message);
+ })
+ .catch(console.log);
+```
+
+
+
+
+```js
+import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
+import { CometChatUIKit } from "@cometchat/chat-uikit-angular"; //import uikit package
+import {
+ CometChatUIKitConstants,
+ ButtonElement,
+ CardMessage,
+} from "@cometchat/uikit-resources"; //import shared package
+
+const receiverID = "GUID";
+// Create a new instance of CardMessage
+let customMessage = new CustomInteractiveMessage(
+ "receiverId",
+ CometChatUIKitConstants.MessageReceiverType.group,
+ json
+);
+
+CometChatUIKit.sendCustomInteractiveMessage(customMessage)
+ .then((message) => {
+ console.log("CustomInteractive message sent successfully", message);
+ })
+ .catch(console.log);
+```
+
+
+
+
diff --git a/ui-kit/angular/modal.mdx b/ui-kit/angular/v4/modal.mdx
similarity index 100%
rename from ui-kit/angular/modal.mdx
rename to ui-kit/angular/v4/modal.mdx
diff --git a/ui-kit/angular/multi-tab-chat-ui-guide.mdx b/ui-kit/angular/v4/multi-tab-chat-ui-guide.mdx
similarity index 100%
rename from ui-kit/angular/multi-tab-chat-ui-guide.mdx
rename to ui-kit/angular/v4/multi-tab-chat-ui-guide.mdx
diff --git a/ui-kit/angular/new-attachment-option-guide.mdx b/ui-kit/angular/v4/new-attachment-option-guide.mdx
similarity index 100%
rename from ui-kit/angular/new-attachment-option-guide.mdx
rename to ui-kit/angular/v4/new-attachment-option-guide.mdx
diff --git a/ui-kit/angular/new-message-option-guide.mdx b/ui-kit/angular/v4/new-message-option-guide.mdx
similarity index 100%
rename from ui-kit/angular/new-message-option-guide.mdx
rename to ui-kit/angular/v4/new-message-option-guide.mdx
diff --git a/ui-kit/angular/ongoing-call.mdx b/ui-kit/angular/v4/ongoing-call.mdx
similarity index 100%
rename from ui-kit/angular/ongoing-call.mdx
rename to ui-kit/angular/v4/ongoing-call.mdx
diff --git a/ui-kit/angular/outgoing-call.mdx b/ui-kit/angular/v4/outgoing-call.mdx
similarity index 100%
rename from ui-kit/angular/outgoing-call.mdx
rename to ui-kit/angular/v4/outgoing-call.mdx
diff --git a/ui-kit/angular/v4/overview.mdx b/ui-kit/angular/v4/overview.mdx
new file mode 100644
index 000000000..cb8f3f709
--- /dev/null
+++ b/ui-kit/angular/v4/overview.mdx
@@ -0,0 +1,67 @@
+---
+title: "Overview"
+description: "Overview of Overview in CometChat."
+---
+
+
+🚀 **CometChat Angular UI Kit v5 is now available!** It features a completely revamped component architecture, standalone components, CSS variable theming, and improved customization. [Switch to v5 →](/ui-kit/angular/overview)
+
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-angular` |
+| Peer deps | `@cometchat/uikit-elements`, `@cometchat/uikit-resources`, `@cometchat/uikit-shared` |
+| Source | [GitHub](https://github.com/cometchat-pro/cometchat-chat-sample-app-angular/tree/v4) |
+| AI Skills | `npx @cometchat/skills add` — [GitHub](https://github.com/cometchat/cometchat-skills) |
+
+
+
+CometChat's **UI Kit** for Angular, you can effortlessly build a chat app equipped with all the essential messaging features, along with customizable options tailored to your application requirements. This **UI Kit** comprises prebuilt UI components organized into smaller modules and components, each configurable to meet your specific needs.
+
+
+
+
+--------
+
+[Angular Sample App](https://github.com/cometchat-pro/cometchat-chat-sample-app-angular/tree/v4)
+
+##### **Before Getting Started**
+
+Before you begin, it's essential to grasp the fundamental concepts and features offered by CometChat's APIs, SDK, and UI Kit. You can find detailed information in [Key Concepts](/fundamentals/key-concepts) documentation.
+
+The Angular UI Kit offers pre-built components for easy integration into Angular applications, built on top of the [JavaScript Chat SDK](/sdk/javascript/overview) Installing it also includes the core SDK functionalities.
+
+To begin, please follow the [Getting Started](/ui-kit/angular/getting-started) guide.
+
+---
+
+## Integrate with AI Coding Agents
+
+Use [CometChat Skills](https://github.com/cometchat/cometchat-skills) to add chat to any Angular project through your AI coding agent. The skill takes an AI-first approach — your agent has a short conversation with you to understand your project and chat requirements, then writes production-grade integration code tailored to the files you already have.
+
+Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and [30+ more agents](https://github.com/cometchat/cometchat-skills).
+
+```bash
+npx @cometchat/skills add
+```
+
+Use `--ide ` to target a specific IDE (e.g. `--ide cursor`), or `--ide all` to install for all supported IDEs.
+
+Then in your IDE:
+
+```
+/cometchat add chat to my app
+```
+
+The skill detects your Angular version, router setup, 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 routes, modules, and components before proposing a placement (route or modal), shows the plan (which files it will create, modify, and leave untouched), and waits for your approval before writing code. Credentials are saved to `src/environments/environment.ts`.
+
+After the first integration, re-run `/cometchat` anytime to pick from the iteration menu:
+
+- **Customize look & feel** — theme presets (slack / whatsapp / imessage / discord / notion) or your own brand color
+- **Add a feature** — 40+ features including calls, reactions, polls, AI smart replies, file sharing, presence
+- **Customize a component** — custom message bubbles, headers, composer actions, empty/loading states
+- **Set up production auth** — replace the dev Auth Key with a server-side token endpoint
+- **Set up user management** — server endpoints for creating/updating/deleting CometChat users
+- **Run diagnostics** — verify, drift detection, symptom-to-cause lookup
diff --git a/ui-kit/angular/pop-over.mdx b/ui-kit/angular/v4/pop-over.mdx
similarity index 100%
rename from ui-kit/angular/pop-over.mdx
rename to ui-kit/angular/v4/pop-over.mdx
diff --git a/ui-kit/angular/radio-button.mdx b/ui-kit/angular/v4/radio-button.mdx
similarity index 100%
rename from ui-kit/angular/radio-button.mdx
rename to ui-kit/angular/v4/radio-button.mdx
diff --git a/ui-kit/angular/reaction-info.mdx b/ui-kit/angular/v4/reaction-info.mdx
similarity index 100%
rename from ui-kit/angular/reaction-info.mdx
rename to ui-kit/angular/v4/reaction-info.mdx
diff --git a/ui-kit/angular/reaction-list.mdx b/ui-kit/angular/v4/reaction-list.mdx
similarity index 100%
rename from ui-kit/angular/reaction-list.mdx
rename to ui-kit/angular/v4/reaction-list.mdx
diff --git a/ui-kit/angular/reaction.mdx b/ui-kit/angular/v4/reaction.mdx
similarity index 100%
rename from ui-kit/angular/reaction.mdx
rename to ui-kit/angular/v4/reaction.mdx
diff --git a/ui-kit/angular/receipt.mdx b/ui-kit/angular/v4/receipt.mdx
similarity index 100%
rename from ui-kit/angular/receipt.mdx
rename to ui-kit/angular/v4/receipt.mdx
diff --git a/ui-kit/angular/search-input.mdx b/ui-kit/angular/v4/search-input.mdx
similarity index 100%
rename from ui-kit/angular/search-input.mdx
rename to ui-kit/angular/v4/search-input.mdx
diff --git a/ui-kit/angular/shortcut-formatter-guide.mdx b/ui-kit/angular/v4/shortcut-formatter-guide.mdx
similarity index 100%
rename from ui-kit/angular/shortcut-formatter-guide.mdx
rename to ui-kit/angular/v4/shortcut-formatter-guide.mdx
diff --git a/ui-kit/angular/singleselect.mdx b/ui-kit/angular/v4/singleselect.mdx
similarity index 100%
rename from ui-kit/angular/singleselect.mdx
rename to ui-kit/angular/v4/singleselect.mdx
diff --git a/ui-kit/angular/v4/sound-manager.mdx b/ui-kit/angular/v4/sound-manager.mdx
new file mode 100644
index 000000000..393ed7a2d
--- /dev/null
+++ b/ui-kit/angular/v4/sound-manager.mdx
@@ -0,0 +1,63 @@
+---
+title: "Sound Manager"
+description: "Sound Manager — CometChat documentation."
+---
+
+## Overview
+
+The SoundManager is a helper class responsible for managing and playing various types of audio in the CometChat UI Kit. This includes sound events for incoming and outgoing messages and calls.
+
+## Methods
+
+### Play Sound
+
+`CometChatSoundManager.play` method plays the in-built sounds audio resources for the above mentioned enum cases. It also allows for customisation of the audio resources. You can pass a mp3 file asset path of your choice.
+
+Here are the available methods for triggering sound playback:
+
+* `play(sound: Sound)`: This method plays predefined sounds for various events such as incoming and outgoing calls and messages.
+
+* `play(sound: Sound, filePath: string)`: This method is capable of playing a custom sound for a particular event by specifying the path to a custom MP3 file.
+
+### Pause Sound
+
+The SoundManager can pause different types of sounds for incoming and outgoing calls and messages using the following method:
+
+* `pause()`: This method pauses any sound currently being played.
+
+## Usage
+
+Here is how to use CometChatSoundManager:
+
+
+
+```js
+//Trigger the audio sound for an incoming message
+CometChatSoundManager.play(Sound.incomingMessage);
+
+//Trigger the audio sound of your choice for an incoming message
+CometChatSoundManager.play(Sound.incomingMessage, "MP3_FILE_ASSET_PATH");
+
+//Pause the ongoing audio sound
+CometChatSoundManager.pause();
+```
+
+
+
+
+```ts
+//Trigger the audio sound for an incoming message
+CometChatSoundManager.play(Sound.incomingMessage);
+
+//Trigger the audio sound of your choice for an incoming message
+CometChatSoundManager.play(Sound.incomingMessage, "MP3_FILE_ASSET_PATH");
+
+//Pause the ongoing audio sound
+CometChatSoundManager.pause();
+```
+
+
+
+
+
+By using the CometChatSoundManager, you can enhance the user experience in your chat application by integrating audible cues for chat interactions.
diff --git a/ui-kit/angular/status-indicator.mdx b/ui-kit/angular/v4/status-indicator.mdx
similarity index 100%
rename from ui-kit/angular/status-indicator.mdx
rename to ui-kit/angular/v4/status-indicator.mdx
diff --git a/ui-kit/angular/text-bubble.mdx b/ui-kit/angular/v4/text-bubble.mdx
similarity index 100%
rename from ui-kit/angular/text-bubble.mdx
rename to ui-kit/angular/v4/text-bubble.mdx
diff --git a/ui-kit/angular/theme.mdx b/ui-kit/angular/v4/theme.mdx
similarity index 100%
rename from ui-kit/angular/theme.mdx
rename to ui-kit/angular/v4/theme.mdx
diff --git a/ui-kit/angular/threaded-messages.mdx b/ui-kit/angular/v4/threaded-messages.mdx
similarity index 100%
rename from ui-kit/angular/threaded-messages.mdx
rename to ui-kit/angular/v4/threaded-messages.mdx
diff --git a/ui-kit/angular/url-formatter-guide.mdx b/ui-kit/angular/v4/url-formatter-guide.mdx
similarity index 100%
rename from ui-kit/angular/url-formatter-guide.mdx
rename to ui-kit/angular/v4/url-formatter-guide.mdx
diff --git a/ui-kit/angular/user-details.mdx b/ui-kit/angular/v4/user-details.mdx
similarity index 100%
rename from ui-kit/angular/user-details.mdx
rename to ui-kit/angular/v4/user-details.mdx
diff --git a/ui-kit/angular/user-member-wrapper.mdx b/ui-kit/angular/v4/user-member-wrapper.mdx
similarity index 100%
rename from ui-kit/angular/user-member-wrapper.mdx
rename to ui-kit/angular/v4/user-member-wrapper.mdx
diff --git a/ui-kit/angular/users-with-messages.mdx b/ui-kit/angular/v4/users-with-messages.mdx
similarity index 100%
rename from ui-kit/angular/users-with-messages.mdx
rename to ui-kit/angular/v4/users-with-messages.mdx
diff --git a/ui-kit/angular/users.mdx b/ui-kit/angular/v4/users.mdx
similarity index 100%
rename from ui-kit/angular/users.mdx
rename to ui-kit/angular/v4/users.mdx
diff --git a/ui-kit/angular/video-bubble.mdx b/ui-kit/angular/v4/video-bubble.mdx
similarity index 100%
rename from ui-kit/angular/video-bubble.mdx
rename to ui-kit/angular/v4/video-bubble.mdx
diff --git a/ui-kit/angular/v5/accessibility.mdx b/ui-kit/angular/v5/accessibility.mdx
deleted file mode 100644
index b766a4ab7..000000000
--- a/ui-kit/angular/v5/accessibility.mdx
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: "Accessibility"
-description: "Overview of accessibility support in the CometChat Angular UIKit, including WCAG compliance, keyboard navigation, and ARIA attributes."
----
-
-The CometChat Angular UIKit is built with accessibility as a core principle. Components are designed targeting WCAG 2.1 Level AA guidelines, with the goal of making chat interfaces usable by everyone — including users who rely on keyboards, screen readers, or other assistive technologies.
-
-
- Full WCAG compliance requires manual testing with assistive technologies and expert accessibility review. The UIKit implements the patterns and attributes described below, but you should validate your specific integration against your accessibility requirements.
-
-
-Key accessibility features across the UIKit:
-
-- **WCAG 2.1 Level AA target** — Components are built following the Web Content Accessibility Guidelines for contrast, focus management, and semantic markup.
-- **Keyboard navigation** — All interactive components support full keyboard operation using Tab, Enter, Space, Escape, and Arrow keys. Users can navigate, select, and interact without a mouse.
-- **ARIA attributes** — Components use appropriate ARIA roles, labels, and states to communicate structure and behavior to screen readers.
-
-Each component that supports keyboard interaction documents its specific key bindings and focus behavior on its own page. The sections below link to those per-component keyboard accessibility references.
-
-## Components with Keyboard Accessibility
-
-### Conversations
-
-- [CometChatConversations](/ui-kit/angular/v5/components/cometchat-conversations#keyboard-accessibility)
-- [CometChatConversationItem](/ui-kit/angular/v5/components/cometchat-conversation-item#keyboard-accessibility)
-
-### Users
-
-- [CometChatUsers](/ui-kit/angular/v5/components/cometchat-users#keyboard-accessibility)
-- [CometChatUserItem](/ui-kit/angular/v5/components/cometchat-user-item#keyboard-accessibility)
-
-### Groups
-
-- [CometChatGroups](/ui-kit/angular/v5/components/cometchat-groups#keyboard-accessibility)
-- [CometChatGroupItem](/ui-kit/angular/v5/components/cometchat-group-item#keyboard-accessibility)
-
-### Group Members
-
-- [CometChatGroupMembers](/ui-kit/angular/v5/components/cometchat-group-members#keyboard-accessibility)
-- [CometChatGroupMemberItem](/ui-kit/angular/v5/components/cometchat-group-member-item#keyboard-accessibility)
-
-### Messages
-
-- [CometChatMessageHeader](/ui-kit/angular/v5/components/cometchat-message-header#keyboard-accessibility)
-- [CometChatMessageList](/ui-kit/angular/v5/components/cometchat-message-list#keyboard-accessibility)
-- [CometChatMessageComposer](/ui-kit/angular/v5/components/cometchat-message-composer#keyboard-accessibility)
-- [CometChatMessageBubble](/ui-kit/angular/v5/components/cometchat-message-bubble#keyboard-accessibility)
-- [CometChatMessageInformation](/ui-kit/angular/v5/components/cometchat-message-information#keyboard-accessibility)
-- [CometChatThreadHeader](/ui-kit/angular/v5/components/cometchat-thread-header#keyboard-accessibility)
-
-### Message Bubbles
-
-- [CometChatTextBubble](/ui-kit/angular/v5/components/cometchat-text-bubble#keyboard-accessibility)
-- [CometChatImageBubble](/ui-kit/angular/v5/components/cometchat-image-bubble#keyboard-accessibility)
-- [CometChatVideoBubble](/ui-kit/angular/v5/components/cometchat-video-bubble#keyboard-accessibility)
-- [CometChatAudioBubble](/ui-kit/angular/v5/components/cometchat-audio-bubble#keyboard-accessibility)
-- [CometChatFileBubble](/ui-kit/angular/v5/components/cometchat-file-bubble#keyboard-accessibility)
-- [CometChatCallBubble](/ui-kit/angular/v5/components/cometchat-call-bubble#keyboard-accessibility)
-- [CometChatPollBubble](/ui-kit/angular/v5/components/cometchat-poll-bubble#keyboard-accessibility)
-- [CometChatCollaborativeDocumentBubble](/ui-kit/angular/v5/components/cometchat-collaborative-document-bubble#keyboard-accessibility)
-- [CometChatCollaborativeWhiteboardBubble](/ui-kit/angular/v5/components/cometchat-collaborative-whiteboard-bubble#keyboard-accessibility)
-- [CometChatStickersKeyboard](/ui-kit/angular/v5/components/cometchat-stickers-keyboard#keyboard-accessibility)
-
-### Reactions
-
-- [CometChatReactions](/ui-kit/angular/v5/components/cometchat-reactions#keyboard-accessibility)
-- [CometChatReactionList](/ui-kit/angular/v5/components/cometchat-reaction-list#keyboard-accessibility)
-- [CometChatReactionInfo](/ui-kit/angular/v5/components/cometchat-reaction-info#keyboard-accessibility)
-
-### Calls
-
-- [CometChatCallButtons](/ui-kit/angular/v5/components/cometchat-call-buttons#keyboard-accessibility)
-- [CometChatIncomingCall](/ui-kit/angular/v5/components/cometchat-incoming-call#keyboard-accessibility)
-- [CometChatOutgoingCall](/ui-kit/angular/v5/components/cometchat-outgoing-call#keyboard-accessibility)
-- [CometChatCallLogs](/ui-kit/angular/v5/components/cometchat-call-logs#keyboard-accessibility)
-
-### AI Features
-
-- [CometChatSmartReplies](/ui-kit/angular/v5/components/cometchat-smart-replies#keyboard-accessibility)
-- [CometChatConversationStarter](/ui-kit/angular/v5/components/cometchat-conversation-starter#keyboard-accessibility)
diff --git a/ui-kit/angular/v5/ai-features.mdx b/ui-kit/angular/v5/ai-features.mdx
deleted file mode 100644
index 0b8297186..000000000
--- a/ui-kit/angular/v5/ai-features.mdx
+++ /dev/null
@@ -1,157 +0,0 @@
----
-title: "AI Smart Chat Features"
-description: "AI-powered features in CometChat's Angular UIKit: Conversation Starter, Smart Replies, and Conversation Summary."
----
-
-## Overview
-
-CometChat AI Smart Chat Features enhance user interaction by providing contextual suggestions and summaries. Each feature must be enabled from the CometChat Dashboard first, then activated in your Angular components via input properties.
-
-
-AI Smart Chat Features must be enabled from the [CometChat Dashboard](https://app.cometchat.com). Once activated in the dashboard, you enable them in your Angular components using the inputs described below.
-
-
-## Smart Chat Features
-
-### Conversation Starter
-
-Displays AI-generated opening lines when a user starts a new or empty conversation. Helps break the ice by suggesting relevant topics.
-
-Enable it on `cometchat-message-list`:
-
-```html
-
-
-```
-
-Or using `ChatStateService` for shared state:
-
-```typescript expandable
-import { Component } from '@angular/core';
-import { ChatStateService } from '@cometchat/chat-uikit-angular';
-import { CometChatMessageListComponent } from '@cometchat/chat-uikit-angular';
-
-@Component({
- selector: 'app-chat',
- standalone: true,
- imports: [CometChatMessageListComponent],
- template: `
-
-
- `
-})
-export class ChatComponent {
- constructor(private chatState: ChatStateService) {}
-
- openChat(user: CometChat.User): void {
- this.chatState.setActiveUser(user);
- }
-}
-```
-
-See [CometChatConversationStarter](/ui-kit/angular/v5/components/cometchat-conversation-starter) for the standalone component docs.
-
-
-
-
-
----
-
-### Smart Replies
-
-AI-generated response suggestions based on the last received message. Users can tap a suggestion to send it instantly.
-
-Enable it on `cometchat-message-list`:
-
-```html
-
-
-```
-
-Smart replies appear above the message composer when a qualifying message is received. The component respects configurable trigger keywords and a delay before showing suggestions.
-
-See [CometChatSmartReplies](/ui-kit/angular/v5/components/cometchat-smart-replies) for the standalone component docs.
-
-
-
-
-
----
-
-### Conversation Summary
-
-AI-generated recap of long conversations. Useful for catching up on missed messages without scrolling through the entire thread.
-
-Enable it on `cometchat-message-header`:
-
-```html
-
-
-
-```
-
-Full example combining the header with conversation starters and smart replies in the message list:
-
-```typescript expandable
-import { Component } from '@angular/core';
-import { CometChat } from '@cometchat/chat-sdk-javascript';
-import {
- CometChatMessageListComponent,
- CometChatMessageHeaderComponent,
- ChatStateService
-} from '@cometchat/chat-uikit-angular';
-
-@Component({
- selector: 'app-chat-view',
- standalone: true,
- imports: [CometChatMessageListComponent, CometChatMessageHeaderComponent],
- template: `
-
-
-
-
-
- `
-})
-export class ChatViewComponent {
- constructor(private chatState: ChatStateService) {}
-
- openChat(user: CometChat.User): void {
- this.chatState.setActiveUser(user);
- }
-}
-```
-
-See [CometChatConversationSummary](/ui-kit/angular/v5/components/cometchat-conversation-summary) for the standalone component docs.
-
-
-
-
-
----
-
-## Next Steps
-
-
-
- Customize the message list where AI Smart Chat Features appear
-
-
- Enable Conversation Summary in the header
-
-
- Standalone Conversation Starter component
-
-
- Standalone Smart Replies component
-
-
diff --git a/ui-kit/angular/v5/call-features.mdx b/ui-kit/angular/v5/call-features.mdx
deleted file mode 100644
index 99bb9eced..000000000
--- a/ui-kit/angular/v5/call-features.mdx
+++ /dev/null
@@ -1,109 +0,0 @@
----
-title: "Call Features"
-description: "Overview of CometChat's audio and video calling features including incoming calls, outgoing calls, and call logs — with the Angular UIKit components that power each feature."
----
-
-## Overview
-
-CometChat Calls integrates 1:1 and group audio/video calling into the Angular UIKit. Install the Calls SDK and the UIKit auto-detects it, enabling call components.
-
-
-Ensure `CometChatUIKit.init()` has completed and the user is logged in before using call features.
-
-
-## Integration
-
-Install the Calls SDK:
-
-```bash
-npm install @cometchat/calls-sdk-javascript@5.0.0-beta.1
-```
-
-Then enable calling in your `UIKitSettingsBuilder`:
-
-```typescript
-const settings = new UIKitSettingsBuilder()
- .setAppId('APP_ID')
- .setRegion('REGION')
- .setAuthKey('AUTH_KEY')
- .setCallingEnabled(true)
- .build();
-```
-
-
- Both steps are required. Installing the Calls SDK alone is not enough — you must also call `.setCallingEnabled(true)` on the builder. Without it, call buttons remain hidden and the Calls SDK is not initialized.
-
-
-When enabled, [cometchat-call-buttons](/ui-kit/angular/v5/components/cometchat-call-buttons) renders in [cometchat-message-header](/ui-kit/angular/v5/components/cometchat-message-header) and the trailing call button appears in [cometchat-call-logs](/ui-kit/angular/v5/components/cometchat-call-logs).
-
-### Custom Call App Settings
-
-By default the UIKit builds `CallAppSettings` from your `appId` and `region`. If you need custom configuration (e.g. a different region for the Calls SDK or additional settings), pass your own `CallAppSettings`:
-
-```typescript
-import { CometChatUIKitCalls } from '@cometchat/calls-sdk-javascript';
-
-const callAppSettings = new CometChatUIKitCalls.CallAppSettingsBuilder()
- .setAppId('APP_ID')
- .setRegion('REGION')
- .build();
-
-const settings = new UIKitSettingsBuilder()
- .setAppId('APP_ID')
- .setRegion('REGION')
- .setAuthKey('AUTH_KEY')
- .setCallingEnabled(true)
- .setCallAppSettings(callAppSettings)
- .build();
-```
-
-
- `setCallAppSettings` is optional. When omitted, the UIKit automatically creates settings from the `appId` and `region` you already provided.
-
-
-
-
-
-
-## Features
-
-### Incoming Call
-
-The [cometchat-incoming-call](/ui-kit/angular/v5/components/cometchat-incoming-call) component displays a call screen when a call is received, showing caller info with accept/reject options.
-
-
-
-
-
-### Outgoing Call
-
-The [cometchat-outgoing-call](/ui-kit/angular/v5/components/cometchat-outgoing-call) component displays an outgoing call screen with recipient info and call status. Transitions to the ongoing call screen when the receiver accepts.
-
-
-
-
-
-### Call Logs
-
-The [cometchat-call-logs](/ui-kit/angular/v5/components/cometchat-call-logs) component displays call history — caller, time, and duration.
-
-
-
-
-
-## Next Steps
-
-
-
- Audio and video call buttons
-
-
- Incoming call notifications and UI
-
-
- Call history and details
-
-
- Core chat features
-
-
diff --git a/ui-kit/angular/v5/core-features.mdx b/ui-kit/angular/v5/core-features.mdx
deleted file mode 100644
index 400e3ea65..000000000
--- a/ui-kit/angular/v5/core-features.mdx
+++ /dev/null
@@ -1,149 +0,0 @@
----
-title: "Core Features"
-description: "Map of CometChat's core chat features to the Angular UIKit components that power each one — instant messaging, media sharing, read receipts, typing indicators, user presence, reactions, mentions, threaded conversations, search, and moderation."
----
-
-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
-
-Real-time text messaging is at the heart of CometChat. Users can send and receive instant messages, enabling quick and efficient communication in both one-on-one and group conversations.
-
-
-
-
-
-| Component | Functionality |
-| --- | --- |
-| [cometchat-message-composer](/ui-kit/angular/v5/components/cometchat-message-composer) | Provides the input area where users write and send text messages. |
-| [cometchat-message-list](/ui-kit/angular/v5/components/cometchat-message-list) | Renders the chronological list of sent and received messages using text bubbles. |
-
-## Media Sharing
-
-CometChat supports sharing images, videos, audio files, and documents within conversations.
-
-
-
-
-
-| Component | Functionality |
-| --- | --- |
-| [cometchat-message-composer](/ui-kit/angular/v5/components/cometchat-message-composer) | Includes an ActionSheet that presents options for attaching and sharing media files. |
-| [cometchat-message-list](/ui-kit/angular/v5/components/cometchat-message-list) | Renders media message bubbles including Image, File, Audio, and Video bubbles. |
-
-## Read Receipts
-
-Read Receipts provide visibility into message status, letting users know when a message has been delivered and read. This brings clarity to communication and sets expectations about engagement.
-
-
-
-
-
-| Component | Functionality |
-| --- | --- |
-| [cometchat-conversations](/ui-kit/angular/v5/components/cometchat-conversations) | Displays the delivery and read status of the last message in each conversation list item. |
-| [cometchat-message-list](/ui-kit/angular/v5/components/cometchat-message-list) | Shows read receipt indicators on every message bubble, providing real-time status updates. |
-| [cometchat-message-information](/ui-kit/angular/v5/components/cometchat-message-information) | Gives the sender detailed insights into whether their message has been delivered and read. |
-
-## Typing Indicator
-
-The Typing Indicator shows when a user is composing a response in real time, making conversations feel more natural and interactive.
-
-
-
-
-
-| Component | Functionality |
-| --- | --- |
-| [cometchat-conversations](/ui-kit/angular/v5/components/cometchat-conversations) | Shows real-time typing status indicators in conversation list items for both one-on-one and group chats. |
-| [cometchat-message-header](/ui-kit/angular/v5/components/cometchat-message-header) | Dynamically updates to display a "typing…" status when a user or group member is composing a message. |
-
-## User Presence
-
-User Presence lets users see whether their contacts are online or offline, helping them choose the best time to start a conversation.
-
-
-
-
-
-| Component | Functionality |
-| --- | --- |
-| [cometchat-conversations](/ui-kit/angular/v5/components/cometchat-conversations) | Displays user presence information alongside each conversation list item. |
-| [cometchat-message-header](/ui-kit/angular/v5/components/cometchat-message-header) | Shows the online/offline status of the user or group in the message header toolbar. |
-| [cometchat-users](/ui-kit/angular/v5/components/cometchat-users) | Renders the list of available users with their current presence status. |
-| [cometchat-group-members](/ui-kit/angular/v5/components/cometchat-group-members) | Renders group member lists with presence information for each member. |
-
-## Reactions
-
-Reactions let users express emotions or respond to messages without typing a full reply, adding expressiveness and boosting engagement.
-
-
-
-
-
-| Component | Functionality |
-| --- | --- |
-| [cometchat-message-list](/ui-kit/angular/v5/components/cometchat-message-list) | Renders reaction indicators on message bubbles and provides the reaction picker action. |
-| [cometchat-reactions](/ui-kit/angular/v5/components/cometchat-reactions) | Displays the reaction bar beneath a message bubble showing all reactions and their counts. |
-| [cometchat-reaction-list](/ui-kit/angular/v5/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/v5/components/cometchat-reaction-info) | Displays a tooltip or popover with details about a specific reaction on hover. |
-
-## Mentions
-
-Mentions allow users to directly address specific individuals in a conversation using `@username`. The feature also supports `@all` to notify every member in a group chat simultaneously.
-
-
-
-
-
-| Component | Functionality |
-| --- | --- |
-| [cometchat-conversations](/ui-kit/angular/v5/components/cometchat-conversations) | Shows mention indicators in conversation list items so users can see where they were mentioned. |
-| [cometchat-message-composer](/ui-kit/angular/v5/components/cometchat-message-composer) | Provides the mention picker that appears as users type `@`, allowing them to select a user to mention. |
-| [cometchat-message-list](/ui-kit/angular/v5/components/cometchat-message-list) | Renders mention highlights within message text, making mentioned names visually distinct. |
-
-## Threaded Conversations
-
-Threaded Conversations enable users to respond directly to a specific message, keeping discussions organized and maintaining context — especially useful in group chats.
-
-
-
-
-
-| Component | Functionality |
-| --- | --- |
-| [cometchat-thread-header](/ui-kit/angular/v5/components/cometchat-thread-header) | Displays the parent message along with the reply count at the top of a thread view. |
-| [cometchat-message-list](/ui-kit/angular/v5/components/cometchat-message-list) | Renders thread replies when `parentMessageId` is set. |
-| [cometchat-message-composer](/ui-kit/angular/v5/components/cometchat-message-composer) | Sends replies within a thread when `parentMessageId` is set. |
-
-## Group Chat
-
-CometChat facilitates group conversations, allowing multiple participants to communicate simultaneously — ideal for team collaborations, group discussions, and social communities.
-
-
-
-
-
-| Component | Functionality |
-| --- | --- |
-| [cometchat-groups](/ui-kit/angular/v5/components/cometchat-groups) | Renders the list of available groups with search, join, and create capabilities. |
-| [cometchat-group-members](/ui-kit/angular/v5/components/cometchat-group-members) | Displays the members of a group with roles, presence status, and management actions. |
-
----
-
-## Next Steps
-
-
-
- Browse all available Angular UIKit components
-
-
- Customize the look and feel of your chat UI
-
-
- Add audio and video calling
-
-
- Explore AI-powered chat capabilities
-
-
diff --git a/ui-kit/angular/v5/events.mdx b/ui-kit/angular/v5/events.mdx
deleted file mode 100644
index 6475955f7..000000000
--- a/ui-kit/angular/v5/events.mdx
+++ /dev/null
@@ -1,168 +0,0 @@
----
-title: "Events"
-description: "Reference for CometChat Angular UIKit events including conversation, user, group, message, call, and UI events."
----
-
-Events provide decoupled communication between UIKit components using a publish/subscribe event bus pattern. Components emit events in response to user interactions or state changes, allowing other parts of your application to react without direct component references. In Angular, you subscribe to these events using RxJS observables and manage subscriptions through component lifecycle hooks.
-
-## CometChatConversationEvents
-
-`CometChatConversationEvents` emits events when the logged-in user acts on a conversation object.
-
-| Event Name | Description |
-| ------------------------- | ------------------------------------------------------------------------------------------------ |
-| **ccConversationDeleted** | Triggered when the user successfully deletes a conversation. |
-| **ccUpdateConversation** | Triggered to update a conversation in the conversation list. Takes a Conversation object to update. |
-
-## CometChatUserEvents
-
-`CometChatUserEvents` emits events when the logged-in user acts on another user object.
-
-| Event Name | Description |
-| ------------------- | ------------------------------------------------------------------------- |
-| **ccUserBlocked** | Triggered when the user successfully blocks another user. |
-| **ccUserUnblocked** | Triggered when the user successfully unblocks another user. |
-
-## CometChatGroupEvents
-
-`CometChatGroupEvents` emits events when the logged-in user acts on a group object.
-
-| Event Name | Description |
-| ------------------------------- | ------------------------------------------------------------------------------------ |
-| **ccGroupCreated** | Triggered when the user creates a group successfully. |
-| **ccGroupDeleted** | Triggered when the group member deletes the group successfully. |
-| **ccGroupLeft** | Triggered when the group member leaves the group successfully. |
-| **ccGroupMemberScopeChanged** | Triggered when the group member's scope is updated successfully. |
-| **ccGroupMemberKicked** | Triggered when a group member is kicked. |
-| **ccGroupMemberBanned** | Triggered when a group member is banned. |
-| **ccGroupMemberUnbanned** | Triggered when a group member is un-banned. |
-| **ccGroupMemberJoined** | Triggered when a user joins the group. |
-| **ccGroupMemberAdded** | Triggered when a user is added to the group. |
-| **ccOwnershipChanged** | Triggered when the group ownership is assigned to another group member. |
-
-## CometChatMessageEvents
-
-`CometChatMessageEvents` emits events when the logged-in user acts on a message object. This category includes both UIKit-level events and CometChat SDK listener events.
-
-### UIKit Events
-
-| Event Name | Description |
-| --------------------- | --------------------------------------------------------------------------------------------------------- |
-| **ccMessageSent** | Triggered when the sent message is in transit and also when it is received by the receiver. |
-| **ccMessageEdited** | Triggered when the user successfully edits a message. |
-| **ccReplyToMessage** | Triggered when the user successfully replies to a message. |
-| **ccMessageDeleted** | Triggered when the user successfully deletes a message. |
-| **ccMessageRead** | Triggered when the sent message is read by the receiver. |
-| **ccLiveReaction** | Triggered when the user sends a live reaction. |
-
-### SDK Listener Events
-
-| Event Name | Description |
-| -------------------------------- | ---------------------------------------------------------------------------------------- |
-| **onTextMessageReceived** | Emitted when the CometChat SDK listener receives a text message. |
-| **onMediaMessageReceived** | Emitted when the CometChat SDK listener receives a media message. |
-| **onCustomMessageReceived** | Emitted when the CometChat SDK listener receives a custom message. |
-| **onTypingStarted** | Emitted when the CometChat SDK listener indicates that a user has started typing. |
-| **onTypingEnded** | Emitted when the CometChat SDK listener indicates that a user has stopped typing. |
-| **onMessagesDelivered** | Emitted when the CometChat SDK listener indicates that messages have been delivered. |
-| **onMessagesRead** | Emitted when the CometChat SDK listener indicates that messages have been read. |
-| **onMessageEdited** | Emitted when the CometChat SDK listener indicates that a message has been edited. |
-| **onMessageDeleted** | Emitted when the CometChat SDK listener indicates that a message has been deleted. |
-| **onTransientMessageReceived** | Emitted when the CometChat SDK listener receives a transient message. |
-
-## CometChatCallEvents
-
-`CometChatCallEvents` emits events when the logged-in user acts on a call object.
-
-| Event Name | Description |
-| ------------------ | ---------------------------------------------------------------------------- |
-| **ccOutgoingCall** | Triggered when the user initiates a voice/video call. |
-| **ccCallAccepted** | Triggered when the initiated call is accepted by the receiver. |
-| **ccCallRejected** | Triggered when the initiated call is rejected by the receiver. |
-| **ccCallEnded** | Triggered when the initiated call successfully ends. |
-
-## UI Events
-
-UI events are triggered when a user interacts with UIKit elements such as buttons, menus, or input fields.
-
-| Event Name | Description |
-| ----------------------- | ---------------------------------------------------------------------------- |
-| **ccActiveChatChanged** | Triggered when the user navigates to a particular chat window. |
-
-## Usage
-
-Subscribe to events in `ngOnInit` and unsubscribe in `ngOnDestroy` to prevent memory leaks.
-
-```typescript expandable
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { CometChatMessageEvents } from '@cometchat/chat-uikit-angular';
-import { Subscription } from 'rxjs';
-
-@Component({
- selector: 'app-chat',
- standalone: true,
- template: ``
-})
-export class ChatComponent implements OnInit, OnDestroy {
- private messageSubscription?: Subscription;
-
- ngOnInit(): void {
- this.messageSubscription = CometChatMessageEvents.ccMessageSent.subscribe(
- (message) => {
- console.log('Message sent:', message);
- }
- );
- }
-
- ngOnDestroy(): void {
- this.messageSubscription?.unsubscribe();
- }
-}
-```
-
-
-When subscribing to multiple events, consider using a `Subscription` container to manage all subscriptions together.
-
-
-```typescript expandable
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import {
- CometChatMessageEvents,
- CometChatConversationEvents,
- CometChatGroupEvents
-} from '@cometchat/chat-uikit-angular';
-import { Subscription } from 'rxjs';
-
-@Component({
- selector: 'app-chat-listener',
- standalone: true,
- template: ``
-})
-export class ChatListenerComponent implements OnInit, OnDestroy {
- private subscriptions = new Subscription();
-
- ngOnInit(): void {
- this.subscriptions.add(
- CometChatMessageEvents.ccMessageSent.subscribe((message) => {
- console.log('Message sent:', message);
- })
- );
-
- this.subscriptions.add(
- CometChatConversationEvents.ccConversationDeleted.subscribe((conversation) => {
- console.log('Conversation deleted:', conversation);
- })
- );
-
- this.subscriptions.add(
- CometChatGroupEvents.ccGroupMemberAdded.subscribe((data) => {
- console.log('Member added:', data);
- })
- );
- }
-
- ngOnDestroy(): void {
- this.subscriptions.unsubscribe();
- }
-}
-```
diff --git a/ui-kit/angular/v5/extensions.mdx b/ui-kit/angular/v5/extensions.mdx
deleted file mode 100644
index 5e08a6958..000000000
--- a/ui-kit/angular/v5/extensions.mdx
+++ /dev/null
@@ -1,185 +0,0 @@
----
-title: "Extensions"
-description: "Overview of CometChat's extensions grouped by Dashboard categories and how they auto-integrate into Angular UIKit components."
----
-
-## Overview
-
-CometChat UI Kit includes built-in support for extensions that add interactive, secure, and efficient features to chat. Extensions are activated from the CometChat Dashboard and auto-integrate into UI Kit components on init and login.
-
-
-Ensure `CometChatUIKit.init()` has completed and the user is logged in. Extensions must be activated from the CometChat Dashboard.
-
-
-## Built-in Extensions
-
-The grouping below mirrors the CometChat Dashboard.
-
-### User Experience
-
-#### Bitly
-
-Shortens long URLs in text messages using Bitly.
-
-#### Link Preview
-
-Displays a summary (title, description, thumbnail) for URLs shared in chat.
-
-Auto-integrates into the Message Bubble of [cometchat-message-list](/ui-kit/angular/v5/components/cometchat-message-list) when activated.
-
-
-
-
-
-#### Message Shortcuts
-
-Sends predefined messages using short codes (e.g., `!hb` expands to `Happy birthday!`).
-
-#### Pin Message
-
-Pins important messages in a conversation for easy access.
-
-#### Rich Media Preview
-
-Generates rich preview panels for URLs.
-
-#### Save Message
-
-Bookmarks messages for later reference. Saved messages are private to the user.
-
-#### Thumbnail Generation
-
-Creates smaller preview images for shared images, reducing bandwidth.
-
-Auto-integrates into the Message Bubble of [cometchat-message-list](/ui-kit/angular/v5/components/cometchat-message-list) when activated.
-
-
-
-
-
-#### TinyURL
-
-URL shortening using TinyURL.
-
-#### Voice Transcription
-
-Converts audio messages to text.
-
-### User Engagement
-
-#### Giphy
-
-Search and share GIFs from Giphy.
-
-#### Message Translation
-
-Translates messages into the local locale.
-
-Auto-integrates into the Action Sheet of [cometchat-message-list](/ui-kit/angular/v5/components/cometchat-message-list) when activated.
-
-
-
-
-
-#### Polls
-
-Creates polls in group discussions with predefined answer options.
-
-Auto-integrates into the Action Sheet of [cometchat-message-composer](/ui-kit/angular/v5/components/cometchat-message-composer) when activated.
-
-
-
-
-
-#### Reminders
-
-Sets reminders for messages or creates personal reminders. A bot sends a notification when due.
-
-#### Stickers
-
-Sends pre-designed stickers in chat.
-
-Auto-integrates into [cometchat-message-composer](/ui-kit/angular/v5/components/cometchat-message-composer) when activated.
-
-
-
-
-
-#### Stipop
-
-Integrates Stipop's sticker library.
-
-#### Tenor
-
-Search and share GIFs from Tenor.
-
-### Collaboration
-
-#### Collaborative Document
-
-Shared document editing for real-time collaboration.
-
-Auto-integrates into the Action Sheet of [cometchat-message-composer](/ui-kit/angular/v5/components/cometchat-message-composer) when activated.
-
-
-
-
-
-#### Collaborative Whiteboard
-
-Real-time shared whiteboard for drawing and brainstorming.
-
-Auto-integrates into the Action Sheet of [cometchat-message-composer](/ui-kit/angular/v5/components/cometchat-message-composer) when activated.
-
-
-
-
-
-### Security
-
-#### Disappearing Messages
-
-Messages auto-delete after a specified interval. Works for 1:1 and group messages.
-
-### Customer Support
-
-#### Chatwoot
-
-Routes user messages to Chatwoot for customer support.
-
-#### Intercom
-
-Integrates Intercom for in-app customer support.
-
-### Smart Chat Features
-
-#### Conversation Starter
-
-AI-generated opening messages for new chats. See [AI Smart Chat Features](/ui-kit/angular/v5/ai-features).
-
-#### Smart Replies
-
-AI-generated response suggestions based on conversation context. See [AI Smart Chat Features](/ui-kit/angular/v5/ai-features).
-
-#### Conversation Summary
-
-AI-generated recap of long conversations. See [AI Smart Chat Features](/ui-kit/angular/v5/ai-features).
-
----
-
-## Next Steps
-
-
-
- Customize the composer where most extensions appear
-
-
- Customize the message list for extension-rendered content
-
-
- Core chat features like messaging and reactions
-
-
- AI-powered chat capabilities
-
-
diff --git a/ui-kit/angular/v5/guides/custom-text-formatter.mdx b/ui-kit/angular/v5/guides/custom-text-formatter.mdx
deleted file mode 100644
index 0e5a7d7d7..000000000
--- a/ui-kit/angular/v5/guides/custom-text-formatter.mdx
+++ /dev/null
@@ -1,331 +0,0 @@
----
-title: "Custom Text Formatter"
-description: "Extend the CometChatTextFormatter base class to implement custom inline text patterns with regex and callbacks in Angular."
----
-
-
-
-| Field | Value |
-| --- | --- |
-| Package | `@cometchat/chat-uikit-angular` |
-| Key class | `CometChatTextFormatter` (abstract base class for custom formatters) |
-| Required setup | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login("UID")` |
-| Purpose | Extend to create custom inline text patterns with regex, styling, and callbacks |
-| Features | Text formatting, customizable styles, dynamic text replacement, input field integration, key event callbacks |
-| Related | [ShortCut Formatter](/ui-kit/angular/v5/guides/shortcut-formatter) \| [Mentions Formatter](/ui-kit/angular/v5/guides/mentions-formatter) \| [All Guides](/ui-kit/angular/v5/guides/overview) |
-
-
-
-`CometChatTextFormatter` is an abstract class for formatting text in the message composer and message bubbles. Extend it to build custom formatters — hashtags, keywords, or any regex-based pattern.
-
-| Capability | Description |
-| --- | --- |
-| Text formatting | Auto-format text based on regex patterns and styles |
-| Custom styles | Set colors, fonts, and backgrounds for matched text |
-| Dynamic replacement | Regex-based find-and-replace in user input |
-| Input integration | Real-time monitoring of the composer input field |
-| Key event callbacks | Hooks for `keyUp` and `keyDown` events |
-
-
-Always wrap formatted output in a `` with a unique CSS class (e.g. `"custom-hashtag"`). This tells the UI Kit to render it as-is instead of sanitizing it.
-
-
----
-
-## Steps
-
-### 1. Import the base class
-
-```typescript
-import { CometChatTextFormatter } from "@cometchat/chat-uikit-angular";
-```
-
-### 2. Extend it
-
-```typescript
-class HashTagTextFormatter extends CometChatTextFormatter {
- // ...
-}
-```
-
-### 3. Configure tracking character and regex
-
-Set the character that triggers formatting, the regex to match, and the regex to strip formatting back to plain text.
-
-```typescript
-this.setTrackingCharacter("#");
-this.setRegexPatterns([/\B#(\w+)\b/g]);
-this.setRegexToReplaceFormatting([
- /#(\w+)<\/span>/g,
-]);
-```
-
-### 4. Set key event callbacks
-
-```typescript
-this.setKeyUpCallBack(this.onKeyUp.bind(this));
-this.setKeyDownCallBack(this.onKeyDown.bind(this));
-```
-
-### 5. Implement formatting methods
-
-```typescript
-getFormattedText(inputText: string) { /* ... */ }
-getOriginalText(inputText: string) { /* ... */ }
-customLogicToFormatText(inputText: string) { /* ... */ }
-```
-
----
-
-## Example
-
-A hashtag formatter used with `cometchat-message-list` and `cometchat-message-composer`.
-
-
-
-
-
-
-
-```typescript expandable
-import { CometChatTextFormatter } from "@cometchat/chat-uikit-angular";
-
-export class HashTagTextFormatter extends CometChatTextFormatter {
- constructor() {
- super();
- this.setTrackingCharacter("#");
- this.setRegexPatterns([/\B#(\w+)\b/g]);
- this.setRegexToReplaceFormatting([/#(\w+)/g]);
- this.setKeyUpCallBack(this.onKeyUp.bind(this));
- this.setKeyDownCallBack(this.onKeyDown.bind(this));
- this.setReRender(() => {
- console.log("Re-rendering message composer to update text content.");
- });
- }
-
- getCaretPosition(): number {
- if (!this.inputElementReference) return 0;
- const selection = window.getSelection();
- if (!selection || selection.rangeCount === 0) return 0;
- const range = selection.getRangeAt(0);
- const clonedRange = range.cloneRange();
- clonedRange.selectNodeContents(this.inputElementReference);
- clonedRange.setEnd(range.endContainer, range.endOffset);
- return clonedRange.toString().length;
- }
-
- setCaretPosition(position: number) {
- if (!this.inputElementReference) return;
- const range = document.createRange();
- const selection = window.getSelection();
- if (!selection) return;
- range.setStart(
- this.inputElementReference.childNodes[0] || this.inputElementReference,
- position
- );
- range.collapse(true);
- selection.removeAllRanges();
- selection.addRange(range);
- }
-
- onKeyUp(event: KeyboardEvent) {
- if (event.key === this.trackCharacter) {
- this.startTracking = true;
- }
- if (this.startTracking && (event.key === " " || event.key === "Enter")) {
- const caretPosition = this.getCaretPosition();
- this.formatText();
- this.setCaretPosition(caretPosition);
- }
- if (
- this.startTracking &&
- event.key !== " " &&
- event.key !== "Enter" &&
- this.getCaretPosition() === this.inputElementReference?.innerText?.length
- ) {
- this.startTracking = false;
- }
- }
-
- formatText() {
- const inputValue =
- this.inputElementReference?.innerText ||
- this.inputElementReference?.textContent ||
- "";
- const formattedText = this.getFormattedText(inputValue);
- if (this.inputElementReference) {
- this.inputElementReference.innerHTML = formattedText || "";
- this.reRender();
- }
- }
-
- onKeyDown(event: KeyboardEvent) {}
-
- getFormattedText(inputText: string) {
- if (!inputText) return;
- return this.customLogicToFormatText(inputText);
- }
-
- customLogicToFormatText(inputText: string) {
- return inputText.replace(
- /\B#(\w+)\b/g,
- '#$1'
- );
- }
-
- getOriginalText(inputText: string) {
- if (!inputText) return "";
- for (let i = 0; i < this.regexToReplaceFormatting.length; i++) {
- const regexPattern = this.regexToReplaceFormatting[i];
- if (inputText) {
- inputText = inputText.replace(regexPattern, "#$1");
- }
- }
- return inputText;
- }
-}
-```
-
-
-
-
-Pass the formatter via the `textFormatters` input on the message list and composer.
-
-```typescript expandable
-import { Component, OnInit } from "@angular/core";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageListComponent, CometChatMessageComposerComponent } from "@cometchat/chat-uikit-angular";
-import { HashTagTextFormatter } from "./HashTagTextFormatter";
-
-@Component({
- selector: "app-message-demo",
- standalone: true,
- imports: [CometChatMessageListComponent, CometChatMessageComposerComponent],
- template: `
-
-
-
-
- `,
-})
-export class MessageDemoComponent implements OnInit {
- chatUser: CometChat.User | undefined;
- textFormatters = [new HashTagTextFormatter()];
-
- ngOnInit() {
- CometChat.getUser("uid").then((user) => {
- this.chatUser = user;
- });
- }
-}
-```
-
-
-
----
-
-## Methods Reference
-
-| Field | Setter | Description |
-| --- | --- | --- |
-| `trackCharacter` | `setTrackingCharacter(char)` | Character that starts tracking (e.g. `#` for hashtags) |
-| `currentCaretPosition` | `setCaretPositionAndRange(selection, range)` | Current selection set by the composer |
-| `currentRange` | `setCaretPositionAndRange(selection, range)` | Text range or cursor position set by the composer |
-| `inputElementReference` | `setInputElementReference(element)` | DOM reference to the composer input field |
-| `regexPatterns` | `setRegexPatterns(patterns)` | Regex patterns to match text for formatting |
-| `regexToReplaceFormatting` | `setRegexToReplaceFormatting(patterns)` | Regex patterns to strip formatting back to plain text |
-| `keyUpCallBack` | `setKeyUpCallBack(fn)` | Callback for key up events |
-| `keyDownCallBack` | `setKeyDownCallBack(fn)` | Callback for key down events |
-| `reRender` | `setReRender(fn)` | Triggers a re-render of the composer to update displayed text |
-| `loggedInUser` | `setLoggedInUser(user)` | Logged-in user object, set by composer and text bubbles |
-| `id` | `setId(id)` | Unique identifier for the formatter instance |
-
-
-Don't modify `textContent` or `innerHTML` of the input element directly. Call `reRender` instead — the composer will invoke `getFormattedText` for all formatters in order.
-
-
----
-
-## Override Methods
-
-
-
-
-Returns formatted HTML from input text, or edits at cursor position if `inputText` is null.
-
-```typescript
-getFormattedText(inputText: string | null, params: any): string | void {
- if (!inputText) {
- return; // edit at cursor position
- }
- return this.customLogicToFormatText(inputText);
-}
-```
-
-
-
-
-Handles `keyup` events. Start tracking when the track character is typed.
-
-```typescript
-onKeyUp(event: KeyboardEvent) {
- if (event.key === this.trackCharacter) {
- this.startTracking = true;
- }
- if (this.startTracking && event.key === " ") {
- this.debouncedFormatTextOnKeyUp();
- }
-}
-```
-
-
-
-
-Handles `keydown` events.
-
-```typescript
-onKeyDown(event: KeyboardEvent) {}
-```
-
-
-
-
-Strips formatting and returns plain text.
-
-```typescript expandable
-getOriginalText(inputText: string | null | undefined): string {
- if (!inputText) return "";
- for (let i = 0; i < this.regexToReplaceFormatting.length; i++) {
- const regexPattern = this.regexToReplaceFormatting[i];
- if (inputText) {
- inputText = inputText.replace(regexPattern, "$1");
- }
- }
- return inputText;
-}
-```
-
-
-
----
-
-## Next Steps
-
-
-
- Add @mentions with styled tokens.
-
-
- Customize the message input component.
-
-
- Browse all feature and formatter guides.
-
-
- Implement text expansion shortcuts.
-
-
diff --git a/ui-kit/angular/v5/guides/overview.mdx b/ui-kit/angular/v5/guides/overview.mdx
deleted file mode 100644
index 6e40ad5aa..000000000
--- a/ui-kit/angular/v5/guides/overview.mdx
+++ /dev/null
@@ -1,65 +0,0 @@
----
-title: "Guides"
-sidebarTitle: "Overview"
-description: "Index of task-oriented feature guides for the CometChat Angular UIKit."
----
-
-
-
-| Field | Value |
-| --- | --- |
-| Package | `@cometchat/chat-uikit-angular` |
-| Purpose | Index of task-oriented feature guides for the Angular UIKit |
-| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-angular/tree/v5/projects/sample-app) |
-| Components | [Components Overview](/ui-kit/angular/v5/components/overview) |
-| Guides | [Threaded Messages](/ui-kit/angular/v5/guides/threaded-messages) · [Group Chat](/ui-kit/angular/v5/guides/group-chat) · [New Chat](/ui-kit/angular/v5/guides/new-chat) · [Search Messages](/ui-kit/angular/v5/guides/threaded-messages) · [Block/Unblock](/ui-kit/angular/v5/guides/block-unblock-user) · [Message Privately](/ui-kit/angular/v5/guides/message-privately) · [Call Log Details](/ui-kit/angular/v5/guides/call-log-details) · [Custom Message Types](/ui-kit/angular/v5/guides/overview) |
-
-
-
-> This page indexes focused, task-oriented feature guides for the Angular UIKit. Each guide shows how to implement a specific capability end-to-end using UI components.
-
-## When to Use These Guides
-
-Use these guides after completing the base [Integration Guide](/ui-kit/angular/v5/integration). They help you layer additional UX without rewriting core chat flows.
-
-## Guide Directory
-
-| Guide | Description |
-|:------|:------------|
-| [Threaded Messages](/ui-kit/angular/v5/guides/threaded-messages) | Implement threaded message replies with parent context, reply list, and focused thread composer. |
-| [Group Chat](/ui-kit/angular/v5/guides/group-chat) | Create and join groups, view members, manage roles and scopes, transfer ownership. |
-| [New Chat](/ui-kit/angular/v5/guides/new-chat) | Start new one-to-one or group conversations with user and group discovery. |
-| [Search Messages](/ui-kit/angular/v5/guides/threaded-messages) | Add full-text message search across conversations with result routing. |
-| [Block / Unblock User](/ui-kit/angular/v5/guides/block-unblock-user) | Block or unblock users in one-to-one chats; hide composer and show unblock prompt. |
-| [Message Privately](/ui-kit/angular/v5/guides/message-privately) | Launch a direct one-to-one chat from a user profile or group member list. |
-| [Call Log Details](/ui-kit/angular/v5/guides/call-log-details) | Display detailed call insights: metadata, participants, join/leave history, recordings. |
-| [Custom Message Types](/ui-kit/angular/v5/guides/overview) | Register custom message types with bubble templates, conversation subtitle overrides, and fetch inclusion. |
-| [Custom Text Formatter](/ui-kit/angular/v5/guides/custom-text-formatter) | Extend the base formatter to implement custom inline patterns with regex and callbacks. |
-| [Mentions Formatter](/ui-kit/angular/v5/guides/mentions-formatter) | Add @mentions with styled tokens, suggestion list, and click handling. |
-| [URL Formatter](/ui-kit/angular/v5/guides/shortcut-formatter) | Detect and style plain URLs as clickable links with optional tracking logic. |
-| [Shortcut Formatter](/ui-kit/angular/v5/guides/shortcut-formatter) | Provide shortcut-style text expansions invoking extension APIs or dialogs. |
-| [Hashtag Formatter](/ui-kit/angular/v5/guides/hashtag-formatter) | Highlight #hashtags in the composer, message bubbles, conversation last message, and edit view. |
-| [Rich Text Formatting](/ui-kit/angular/v5/guides/custom-text-formatter) | Configure and customize the rich text editor in the message composer. |
-
-
-Need another guide? Open a request via our [Support Portal](https://help.cometchat.com/hc/en-us/requests/new).
-
-
----
-
-## Next Steps
-
-
-
- Set up the Angular UIKit from scratch
-
-
- Explore all UI components
-
-
- Theme and style the UIKit to match your brand
-
-
- Subscribe to UIKit events for custom workflows
-
-
diff --git a/ui-kit/angular/v5/methods.mdx b/ui-kit/angular/v5/methods.mdx
deleted file mode 100644
index 083893746..000000000
--- a/ui-kit/angular/v5/methods.mdx
+++ /dev/null
@@ -1,282 +0,0 @@
----
-title: "Methods"
-description: "Reference for CometChat Angular UIKit methods including init, login, logout, and message-sending wrappers."
----
-
-The UIKit wraps the [Chat SDK](/sdk/javascript/overview) methods to manage internal eventing and keep UI components synchronized. Use these wrapper methods instead of raw SDK calls.
-
-
-`CometChatUIKit.init()` must be called before rendering any UIKit components or calling any SDK methods. Initialization must complete before login.
-
-
-
-Auth Key is for development/testing only. In production, generate Auth Tokens on the server using the REST API and pass them to the client via `loginWithAuthToken()`. Never expose Auth Keys in production client code.
-
-
-## UIKitSettingsBuilder
-
-`UIKitSettingsBuilder` is a fluent builder for constructing the `UIKitSettings` object passed to `CometChatUIKit.init()`.
-
-| Method | Parameter | Description |
-|--------|-----------|-------------|
-| `setAppId(appId)` | `string` | Your CometChat App ID from the Dashboard |
-| `setRegion(region)` | `string` | App region (e.g. `'us'`, `'eu'`) |
-| `setAuthKey(authKey)` | `string` | Auth Key for dev/testing — use Auth Token in production |
-| `subscribePresenceForAllUsers()` | — | Subscribe to presence updates for all users |
-| `subscribePresenceForFriends()` | — | Subscribe to presence updates for friends only |
-| `subscribePresenceForRoles(roles)` | `string[]` | Subscribe to presence updates for users with specific roles |
-| `setRoles(roles)` | `string[]` | Set roles filter independently of presence subscription |
-| `setAutoEstablishSocketConnection(autoEstablish)` | `boolean` | Control whether the WebSocket connects automatically on init |
-| `setAdminHost(adminHost)` | `string` | Override the admin API host (custom/on-premise deployments) |
-| `setClientHost(clientHost)` | `string` | Override the client API host (custom/on-premise deployments) |
-| `setStorageMode(storageMode)` | `CometChat.StorageMode` | Set the storage mode for SDK data persistence |
-| `build()` | — | Returns the configured `UIKitSettings` instance |
-
-```typescript expandable
-import { UIKitSettingsBuilder } from '@cometchat/chat-uikit-angular';
-
-const UIKitSettings = new UIKitSettingsBuilder()
- .setAppId('APP_ID')
- .setRegion('REGION')
- .setAuthKey('AUTH_KEY')
- .subscribePresenceForFriends()
- .setAutoEstablishSocketConnection(true)
- .build();
-```
-
----
-
-## Methods
-
-All methods are accessed via the `CometChatUIKit` class.
-
-### Init
-
-Initializes the CometChat SDK. Must be called on app startup before any other UIKit method.
-
-
-Replace `APP_ID`, `REGION`, and `AUTH_KEY` with values from the CometChat Dashboard. `Auth Key` is optional — use [Auth Token](#login-using-auth-token) for production.
-
-
-```typescript expandable
-import { CometChatUIKit, UIKitSettingsBuilder } from '@cometchat/chat-uikit-angular';
-
-const COMETCHAT_CONSTANTS = {
- APP_ID: 'APP_ID',
- REGION: 'REGION',
- AUTH_KEY: 'AUTH_KEY',
-};
-
-const UIKitSettings = new UIKitSettingsBuilder()
- .setAppId(COMETCHAT_CONSTANTS.APP_ID)
- .setRegion(COMETCHAT_CONSTANTS.REGION)
- .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
- .subscribePresenceForFriends()
- .build();
-
-CometChatUIKit.init(UIKitSettings)?.then(() => {
- // login your user
-});
-```
-
----
-
-### Get Logged In User
-
-Checks for an existing session in the SDK. Returns the logged-in user details or `null`.
-
-```typescript
-import { CometChatUIKit } from '@cometchat/chat-uikit-angular';
-
-CometChatUIKit.getLoggedinUser()
- .then((user) => {
- // Login user
- })
- .catch(console.log);
-```
-
----
-
-### Login using Auth Key
-
-Simple authentication for development/POC. For production, use [Auth Token](#login-using-auth-token).
-
-```typescript expandable
-import { CometChatUIKit } from '@cometchat/chat-uikit-angular';
-
-const UID = 'UID';
-
-CometChatUIKit.getLoggedinUser()
- .then((user) => {
- if (!user) {
- CometChatUIKit.login(UID)
- .then((user) => {
- console.log('Login Successful:', { user });
- })
- .catch(console.log);
- }
- })
- .catch(console.log);
-```
-
----
-
-### Login using Auth Token
-
-Production-safe authentication that does not expose the Auth Key in client code.
-
-1. [Create a User](/rest-api/chat-apis) via the CometChat API when the user signs up in your app.
-2. [Create an Auth Token](/rest-api/chat-apis) via the CometChat API for the new user and save the token in your database.
-3. Load the Auth Token in your client and pass it to the `loginWithAuthToken()` method.
-
-```typescript expandable
-import { CometChatUIKit } from '@cometchat/chat-uikit-angular';
-
-const authToken = 'AUTH_TOKEN';
-
-CometChatUIKit.getLoggedinUser()
- .then((user) => {
- if (!user) {
- CometChatUIKit.loginWithAuthToken(authToken)
- .then((user) => {
- console.log('Login Successful:', { user });
- })
- .catch(console.log);
- }
- })
- .catch(console.log);
-```
-
----
-
-### Logout
-
-Ends the current user session.
-
-```typescript
-import { CometChatUIKit } from '@cometchat/chat-uikit-angular';
-
-CometChatUIKit.logout();
-```
-
----
-
-### Create User
-
-Takes a `User` object and Auth Key, returns the created `User` object.
-
-```typescript expandable
-import { CometChat } from '@cometchat/chat-sdk-javascript';
-import { CometChatUIKit } from '@cometchat/chat-uikit-angular';
-
-const authKey = 'AUTH_KEY';
-const UID = 'user1';
-const name = 'Kevin';
-
-const user = new CometChat.User(UID);
-user.setName(name);
-CometChatUIKit.createUser(user, authKey)
- .then((user) => {
- console.log('User created:', user);
- })
- .catch(console.log);
-```
-
----
-
-### Update User
-
-Takes a `User` object and Auth Key, returns the updated `User` object.
-
-```typescript expandable
-import { CometChat } from '@cometchat/chat-sdk-javascript';
-import { CometChatUIKit } from '@cometchat/chat-uikit-angular';
-
-const authKey = 'AUTH_KEY';
-const UID = 'user1';
-const name = 'Kevin Fernandez';
-
-const user = new CometChat.User(UID);
-user.setName(name);
-CometChatUIKit.updateUser(user, authKey)
- .then((user) => {
- console.log('User updated:', user);
- })
- .catch(console.log);
-```
-
----
-
-### Base Message
-
-#### Text Message
-
-Sends a text message in a 1:1 or group chat. Takes a `TextMessage` object.
-
-```typescript expandable
-import { CometChat } from '@cometchat/chat-sdk-javascript';
-import { CometChatUIKit } from '@cometchat/chat-uikit-angular';
-import { CometChatUIKitConstants } from '@cometchat/chat-uikit-angular';
-
-const receiverID = 'UID';
-const messageText = 'Hello world!';
-const receiverType = CometChatUIKitConstants.MessageReceiverType.user;
-const textMessage = new CometChat.TextMessage(receiverID, messageText, receiverType);
-
-CometChatUIKit.sendTextMessage(textMessage)
- .then((message) => {
- console.log('Message sent successfully:', message);
- })
- .catch(console.log);
-```
-
----
-
-#### Media Message
-
-Sends a media message in a 1:1 or group chat. Takes a `MediaMessage` object.
-
-
-Replace `file` with the actual [File](https://developer.mozilla.org/en-US/docs/Web/API/File) object.
-
-
-```typescript expandable
-import { CometChat } from '@cometchat/chat-sdk-javascript';
-import { CometChatUIKit } from '@cometchat/chat-uikit-angular';
-import { CometChatUIKitConstants } from '@cometchat/chat-uikit-angular';
-
-const receiverID = 'UID';
-const messageType = CometChatUIKitConstants.MessageTypes.file;
-const receiverType = CometChatUIKitConstants.MessageReceiverType.user;
-const mediaMessage = new CometChat.MediaMessage(receiverID, file, messageType, receiverType);
-
-CometChatUIKit.sendMediaMessage(mediaMessage)
- .then((message) => {
- console.log('Media message sent successfully:', message);
- })
- .catch(console.log);
-```
-
----
-
-#### Custom Message
-
-Sends a custom message (neither text nor media) in a 1:1 or group chat. Takes a `CustomMessage` object.
-
-```typescript expandable
-import { CometChat } from '@cometchat/chat-sdk-javascript';
-import { CometChatUIKit } from '@cometchat/chat-uikit-angular';
-import { CometChatUIKitConstants } from '@cometchat/chat-uikit-angular';
-
-const receiverID = 'UID';
-const customData = { latitude: '50.6192171633316', longitude: '-72.68182268750002' };
-const customType = 'location';
-const receiverType = CometChatUIKitConstants.MessageReceiverType.user;
-const customMessage = new CometChat.CustomMessage(receiverID, receiverType, customType, customData);
-
-CometChatUIKit.sendCustomMessage(customMessage)
- .then((message) => {
- console.log('Custom message sent successfully:', message);
- })
- .catch(console.log);
-```
diff --git a/ui-kit/angular/v5/overview.mdx b/ui-kit/angular/v5/overview.mdx
deleted file mode 100644
index 038842d0c..000000000
--- a/ui-kit/angular/v5/overview.mdx
+++ /dev/null
@@ -1,89 +0,0 @@
----
-title: Overview
-description: "CometChat documentation page."
----
-
-
-This is a beta release (`5.0.0-beta.2`). APIs and components may change before the stable release. Report issues on [GitHub](https://github.com/cometchat/cometchat-uikit-angular/issues).
-
-
-CometChat UIKit for Angular (`@cometchat/chat-uikit-angular`) provides pre-built UI components to quickly add chat functionality to your Angular applications. It works with `@cometchat/chat-sdk-javascript` and supports Angular v19, v20, and v21.
-
-## Features
-
-
-
- Pre-built chat components that work out of the box
-
-
- Easily customize themes, styles, and behavior
-
-
- Built on CometChat's real-time messaging infrastructure
-
-
- Full TypeScript support with type definitions
-
-
-
-## Get Started
-
-
-
- Set up CometChat UIKit in your Angular project in 6 steps
-
-
-
----
-
-## Try It
-
-
-
- Try the full chat experience in your browser
-
-
- Clone the sample app and start building
-
-
-
----
-
-## Explore
-
-
-
- Browse all prebuilt UI components
-
-
- Chat, calling, AI, and extensions
-
-
- Colors, fonts, dark mode, and custom styling
-
-
- Rich text formatting and more
-
-
-
----
-
-## Resources
-
-
-
- Working reference app
-
-
- Full UIKit source on GitHub
-
-
- Design resources and prototyping
-
-
- Common issues and fixes
-
-
- Open a support ticket
-
-
diff --git a/ui-kit/angular/v5/sound-manager.mdx b/ui-kit/angular/v5/sound-manager.mdx
deleted file mode 100644
index b105c0b40..000000000
--- a/ui-kit/angular/v5/sound-manager.mdx
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: "Sound Manager"
-description: "Manage and customize audio cues for incoming/outgoing calls and messages in CometChat Angular UIKit."
----
-
-`CometChatSoundManager` is a helper class for managing and playing audio cues in the UI Kit — incoming/outgoing calls and messages.
-
-`Sound` is a frozen object on `CometChatSoundManager`, not a separate export. Access sound event keys via `CometChatSoundManager.Sound`.
-
----
-
-## Methods
-
-### play
-
-Plays the default or custom audio resource for a given sound event.
-
-| Parameter | Type | Description |
-| --- | --- | --- |
-| `sound` | `"incomingCall" \| "incomingMessage" \| "incomingMessageFromOther" \| "outgoingCall" \| "outgoingMessage"` | Sound event key |
-| `customSound` | `string \| null` | Optional custom audio file URL. Defaults to `null` (uses built-in sound). |
-
-### pause
-
-Pauses the currently playing sound and resets playback position.
-
-### onIncomingMessage
-
-Plays the incoming message sound directly. Accepts an optional `customSound` URL.
-
-### onIncomingOtherMessage
-
-Plays the incoming message from another user sound directly. Accepts an optional `customSound` URL.
-
-### onOutgoingMessage
-
-Plays the outgoing message sound directly. Accepts an optional `customSound` URL.
-
-### onIncomingCall
-
-Plays the incoming call sound (loops). Accepts an optional `customSound` URL.
-
-### onOutgoingCall
-
-Plays the outgoing call sound (loops). Accepts an optional `customSound` URL.
-
-### hasInteracted
-
-Returns `boolean` — checks whether the user has interacted with the page (required by browser autoplay policies).
-
----
-
-## Sound Events
-
-| Event Key | When it plays |
-| --- | --- |
-| `incomingCall` | Incoming call detected |
-| `outgoingCall` | Outgoing call initiated |
-| `incomingMessage` | New message received from the current conversation |
-| `incomingMessageFromOther` | New message received from a different conversation |
-| `outgoingMessage` | Message sent |
-
-Access via `CometChatSoundManager.Sound.incomingCall`, etc.
-
----
-
-## Usage
-
-```typescript expandable
-import { CometChatSoundManager } from '@cometchat/chat-uikit-angular';
-
-// Play default incoming call sound
-CometChatSoundManager.play(CometChatSoundManager.Sound.incomingCall);
-
-// Play custom sound for incoming message
-CometChatSoundManager.play(CometChatSoundManager.Sound.incomingMessage, 'MP3_FILE_ASSET_PATH');
-
-// Pause the ongoing sound
-CometChatSoundManager.pause();
-
-// Use individual method directly
-CometChatSoundManager.onIncomingCall();
-CometChatSoundManager.onOutgoingMessage('CUSTOM_AUDIO_PATH');
-```
diff --git a/ui-kit/flutter/call-buttons.mdx b/ui-kit/flutter/call-buttons.mdx
index e39b6b0c2..9bb9d62d8 100644
--- a/ui-kit/flutter/call-buttons.mdx
+++ b/ui-kit/flutter/call-buttons.mdx
@@ -1,71 +1,20 @@
---
title: "Call Buttons"
-description: "Widget that provides users with the ability to make voice and video calls with customizable icons and styles."
+description: "Add CometChat Flutter UI Kit call buttons for voice and video calling, call settings, and call-related user actions."
---
-
-```json
-{
- "component": "CometChatCallButtons",
- "package": "cometchat_calls_uikit",
- "import": "import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';",
- "description": "Widget that provides users with the ability to make voice and video calls with customizable icons and styles.",
- "props": {
- "data": {
- "user": { "type": "User?", "default": "null" },
- "group": { "type": "Group?", "default": "null" }
- },
- "visibility": {
- "hideVoiceCallButton": { "type": "bool?", "default": "false" },
- "hideVideoCallButton": { "type": "bool?", "default": "false" }
- },
- "icons": {
- "voiceCallIcon": "Widget?",
- "videoCallIcon": "Widget?"
- },
- "style": {
- "callButtonsStyle": "CometChatCallButtonsStyle?"
- },
- "configuration": {
- "outgoingCallConfiguration": "CometChatOutgoingCallConfiguration?",
- "callSettingsBuilder": "CallSettingsBuilder Function(User? user, Group? group, bool? isAudioOnly)?"
- }
- }
-}
-```
-
## Overview
-The `CometChatCallButtons` is a [Widget](/ui-kit/flutter/components-overview#components) provides users with the ability to make calls, access call-related functionalities, and control call settings. Clicking this button typically triggers the call to be placed to the desired recipient.
-
-
-
-
+The `CometChatCallButtons` widget provides users with the ability to make calls, access call-related functionalities, and control call settings.
## Usage
### Integration
-You can launch `CometChatCallButtons` directly using `Navigator.push`, or you can define it as a widget within the `build` method of your `State` class.
-
-##### 1. Using Navigator to Launch `CometChatCallButtons`
-
-
-
-```dart
-Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatCallButtons()));
-```
-
-
-
-
-
-##### 2. Embedding `CometChatCallButtons` as a Widget in the build Method
-
```dart
-import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';
+import 'package:cometchat_chat_uikit/cometchat_calls_uikit.dart';
import 'package:flutter/material.dart';
class CallButtonsExample extends StatefulWidget {
@@ -80,232 +29,104 @@ class _CallButtonsExampleState extends State {
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
- child: Center(
- child: CometChatCallButtons()
- )
+ child: Center(child: CometChatCallButtons()),
),
);
}
}
```
-
-
***
### Actions
-[Actions](/ui-kit/flutter/components-overview#actions) dictate how a widget functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the widget to fit your specific needs.
-
##### onError
-You can customize this behavior by using the provided code snippet to override the `onError` and improve error handling.
-
```dart
CometChatCallButtons(
onError: (e) {
- // TODO("Not yet implemented")
+ // Handle error
},
)
```
-
-
***
-### Filters
-
-**Filters** allow you to customize the data displayed in a list within a Widget. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK.
-
-The CallButton widget does not have any exposed filters.
-
-***
-
### Events
-[Events](/ui-kit/flutter/components-overview#events) are emitted by a `Widget`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.
-
-Events emitted by the Call buttons widget are as follows.
-
-| Event | Description |
-| ------------------ | -------------------------------------------- |
-| **ccCallAccepted** | Triggers when the outgoing call is accepted. |
-| **ccCallRejected** | Triggers when the outgoing call is rejected. |
+| Event | Description |
+|---|---|
+| ccCallAccepted | Triggers when the outgoing call is accepted |
+| ccCallRejected | Triggers when the outgoing call is rejected |
```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:flutter/material.dart';
-
-class YourScreen extends StatefulWidget {
- const YourScreen({super.key});
-
- @override
- State createState() => _YourScreenState();
-}
-
class _YourScreenState extends State with CometChatCallEventListener {
-
@override
void initState() {
super.initState();
- CometChatCallEvents.addCallEventsListener("unique_listener_ID", this); // Add the listener
+ CometChatCallEvents.addCallEventsListener("unique_listener_ID", this);
}
@override
- void dispose(){
+ void dispose() {
super.dispose();
- CometChatCallEvents.removeCallEventsListener("unique_listener_ID"); // Remove the listener
+ CometChatCallEvents.removeCallEventsListener("unique_listener_ID");
}
@override
void ccCallAccepted(Call call) {
- // TODO("Not yet implemented")
+ // Handle call accepted
}
@override
void ccCallRejected(Call call) {
- // TODO("Not yet implemented")
+ // Handle call rejected
}
-
- @override
- Widget build(BuildContext context) {
- return const Placeholder();
- }
-
}
```
-
-
***
## Customization
-To fit your app's design requirements, you can customize the appearance of the conversation widget. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.
-
### Style
-You can customize the appearance of the `CometChatCallButtons` Widget by applying the `CometChatCallButtonsStyle` to it using the following code snippet.
-
```dart
CometChatCallButtons(
callButtonsStyle: CometChatCallButtonsStyle(
- voiceCallIconColor: Color(0xFF6852D6),
- videoCallIconColor: Color(0xFF6852D6),
- voiceCallButtonColor: Color(0xFFEDEAFA),
- videoCallButtonColor: Color(0xFFEDEAFA),
- voiceCallButtonBorderRadius: BorderRadius.circular(12.5),
- videoCallButtonBorderRadius: BorderRadius.circular(12.5),
- videoCallButtonBorder: BorderSide(
- color: Color(0xFFE8E8E8),
- width: 1,
- ),
- voiceCallButtonBorder: BorderSide(
- color: Color(0xFFE8E8E8),
- width: 1,
- ),
- )
+ voiceCallIconColor: Color(0xFF6852D6),
+ videoCallIconColor: Color(0xFF6852D6),
+ voiceCallButtonColor: Color(0xFFEDEAFA),
+ videoCallButtonColor: Color(0xFFEDEAFA),
+ voiceCallButtonBorderRadius: BorderRadius.circular(12.5),
+ videoCallButtonBorderRadius: BorderRadius.circular(12.5),
+ ),
)
```
-
-
-***
-
### Functionality
-These are a set of small functional customizations that allow you to fine-tune the overall experience of the widget. With these, you can change text, set custom icons, and toggle the visibility of UI elements.
-
-**Example**
-
-Here is the example for reference:
-
-
-
-```dart
-CometChatCallButtons(
- hideVideoCallButton: true,
-)
-```
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-Below is a list of customizations along with corresponding code snippets
-
-| **Property** | Description | Code |
-| ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- |
-| **User** | Used to set User object to the call button. | `user: User?` |
-| **Group** | Used to set Group object to the call button. | `group: Group?` |
-| **CallSettingsBuilder** | Sets the call settings builder callback function. This callback is responsible for configuring the call settings based on the user, group, and call type (audio/video). | `callSettingsBuilder: CallSettingsBuilder?` |
-| **Hide Video Call** | Hides the video call button. | `hideVideoCallButton: bool?` |
-| **Hide Voice Call** | Hides the voice call button. | `hideVoiceCallButton: bool?` |
-| **Video Call Icon** | Sets the icon for the video call button. | `videoCallIcon: Icon?` |
-| **Voice Call Icon** | Sets the icon for the voice call button. | `voiceCallIcon: Icon?` |
-| **outgoingCallConfiguration** | Sets the configurations for outgoing call component. | `outgoingCallConfiguration: CometChatOutgoingCallConfiguration?` |
-
-***
-
-### Advanced
-
-For advanced-level customization, you can set custom views to the widget. This lets you tailor each aspect of the widget to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the widget.
-
-The `CometChatCallButtons` widget does not provide additional functionalities beyond this level of customization.
-
-***
-
-## Configurations
-
-Configurations offer the ability to customize the properties of each individual component within a Composite Component.
-
-* `Configurations` expose properties that are available in its individual components.
-
-***
-
-### Outgoing Call
-
-You can customize the properties of the `Outgoing Call` component by making use of the `OutgoingCallConfiguration`. You can accomplish this by employing the `OutgoingCallConfiguration` as demonstrated below:
-
-
-
-```dart
-CometChatCallButtons(
- outgoingCallConfiguration: CometChatOutgoingCallConfiguration(),
-)
-```
-
-
-
-
-
-All exposed properties of OutgoingCallConfiguration can be found under `Outgoing Call`.
-
-***
+| Property | Description | Code |
+|---|---|---|
+| User | Set User object | `user: User?` |
+| Group | Set Group object | `group: Group?` |
+| CallSettingsBuilder | Configure call settings | `callSettingsBuilder: CallSettingsBuilder?` |
+| Hide Video Call | Hide video call button | `hideVideoCallButton: bool?` |
+| Hide Voice Call | Hide voice call button | `hideVoiceCallButton: bool?` |
+| Video Call Icon | Custom video call icon | `videoCallIcon: Icon?` |
+| Voice Call Icon | Custom voice call icon | `voiceCallIcon: Icon?` |
+| Outgoing Call Configuration | Configure outgoing call | `outgoingCallConfiguration: CometChatOutgoingCallConfiguration?` |
diff --git a/ui-kit/flutter/call-features.mdx b/ui-kit/flutter/call-features.mdx
index b8d6142bd..9cdb0685b 100644
--- a/ui-kit/flutter/call-features.mdx
+++ b/ui-kit/flutter/call-features.mdx
@@ -1,73 +1,174 @@
---
-title: "Call Features"
-sidebarTitle: "Calls"
-description: "Integrate one-on-one and group audio/video calling capabilities into your Flutter app with CometChat UI Kit"
+title: "Call"
+description: "Integrate CometChat Flutter UI Kit calling with one-on-one and group audio/video calls, setup, initialization, and call events."
---
-
+## Overview
-| Field | Value |
-| --- | --- |
-| Packages | `cometchat_chat_uikit` + `cometchat_calls_uikit` (add to `pubspec.yaml`) |
-| Required setup | `CometChatUIKit.init(uiKitSettings: UIKitSettings)` then `CometChatUIKit.login(uid)` — Calls SDK must also be installed |
-| Call features | Incoming Call, Outgoing Call, Call Logs, Call Buttons |
-| Key components | `CometChatCallButtons` → [Call Buttons](/ui-kit/flutter/call-buttons), `CometChatIncomingCall` → [Incoming Call](/ui-kit/flutter/incoming-call), `CometChatOutgoingCall` → [Outgoing Call](/ui-kit/flutter/outgoing-call), `CometChatCallLogs` → [Call Logs](/ui-kit/flutter/call-logs) |
-| Auto-detection | UI Kit automatically detects the Calls SDK and enables call UI components |
-| Requirements | minSdkVersion 24 (Android), iOS 12+ |
+CometChat's Calls feature allows you to integrate one-on-one and group audio/video calling capabilities into your application. In V6, calling is built into the `cometchat_chat_uikit` package — no separate calls dependency needed.
-
-
-CometChat's Calls feature is an advanced functionality that allows you to seamlessly integrate one-on-one as well as group audio and video calling capabilities into your application. This document provides a technical overview of these features, as implemented in the Flutter UI Kit.
+## Integration
-
-If you haven't set up calling yet, follow the [Calling Integration](/ui-kit/flutter/calling-integration) guide first.
-
+### Step 1: Add Dependency
+
+Since V6 is hosted on Cloudsmith, install via CLI:
+
+
+
+```bash
+dart pub add cometchat_chat_uikit:6.0.0 --hosted-url https://dart.cloudsmith.io/cometchat/cometchat/
+```
+
+
+
+Or add manually to `pubspec.yaml`:
+
+
+
+```yaml
+dependencies:
+ cometchat_chat_uikit:
+ hosted: https://dart.cloudsmith.io/cometchat/cometchat/
+ version: 6.0.0
+```
+
+
+
+***
+
+### Step 2: Update build.gradle
+
+Set `minSdkVersion` to at least 24 in `android/app/build.gradle`:
+
+
+
+```gradle
+defaultConfig {
+ minSdkVersion 24
+ targetSdkVersion flutter.targetSdkVersion
+ versionCode flutterVersionCode.toInteger()
+ versionName flutterVersionName
+}
+```
+
+
+
+***
+
+### Step 3: Update iOS Podfile
+
+In `ios/Podfile`, set the minimum iOS version to 12:
+
+```
+platform :ios, '12.0'
+```
+
+***
+
+### Step 4: Modify UIKitSettings
+
+Activate calling features by setting `enableCalls` to `true` in UIKitSettings:
+
+
+
+```dart
+UIKitSettings uiKitSettings = (UIKitSettingsBuilder()
+ ..subscriptionType = CometChatSubscriptionType.allUsers
+ ..autoEstablishSocketConnection = true
+ ..region = "REGION"
+ ..appId = "APP_ID"
+ ..authKey = "AUTH_KEY"
+ ..enableCalls = true
+ ..callingConfiguration = CallingConfiguration()
+).build();
+
+CometChatUIKit.init(uiKitSettings: uiKitSettings,
+ onSuccess: (successMessage) {},
+ onError: (e) {},
+);
+```
+
+
+
+To allow launching the Incoming Call screen from any widget, provide the navigator key:
+
+
+
+```dart
+MaterialApp(
+ navigatorKey: CallNavigationContext.navigatorKey,
+ home: YourHomeScreen(),
+)
+```
+
+
+
+### Listeners
+
+Register call listeners for top-level widgets:
+
+
+
+```dart
+class _YourClassNameState extends State with CallListener {
+ @override
+ void initState() {
+ super.initState();
+ CometChat.addCallListener(listenerId, this);
+ }
+
+ @override
+ void dispose() {
+ super.dispose();
+ CometChat.removeCallListener(listenerId);
+ }
+
+ @override
+ void onIncomingCallReceived(Call call) {
+ debugPrint("onIncomingCallReceived");
+ }
+
+ @override
+ void onOutgoingCallAccepted(Call call) {
+ debugPrint("onOutgoingCallAccepted");
+ }
+
+ @override
+ void onOutgoingCallRejected(Call call) {
+ debugPrint("onOutgoingCallRejected");
+ }
+
+ @override
+ void onIncomingCallCancelled(Call call) {
+ debugPrint("onIncomingCallCancelled");
+ }
+
+ @override
+ void onCallEndedMessageReceived(Call call) {
+ debugPrint("onCallEndedMessageReceived");
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return const Placeholder();
+ }
+}
+```
+
+
+
+***
## Features
### Incoming Call
-The [Incoming Call](/ui-kit/flutter/incoming-call) widget of the CometChat UI Kit provides the functionality that lets users receive real-time audio and video calls in the app.
-
-When a call is made to a user, the Incoming Call widget triggers and displays a call screen. This call screen typically displays the caller information and provides the user with options to either accept or reject the incoming call.
-
-
-
-
+The Incoming Call widget lets users receive real-time audio and video calls. When a call is received, it displays caller information with accept/reject options.
### Outgoing Call
-The [Outgoing Call](/ui-kit/flutter/outgoing-call) widget of the CometChat UI Kit is designed to manage the outgoing call process within your application. When a user initiates an audio or video call to another user or group, this widget displays an outgoing call screen, showcasing information about the recipient and the call status.
-
-Importantly, the Outgoing Call widget is smartly designed to transition automatically into the ongoing call screen once the receiver accepts the call. This ensures a smooth flow from initiating the call to engaging in a conversation, without any additional steps required from the user.
-
-
-
-
+The Outgoing Call widget manages the outgoing call process. It displays recipient information and call status, and automatically transitions to the ongoing call screen when accepted.
### Call Logs
-[Call Logs](/ui-kit/flutter/call-logs) widget provides you with the records call events such as who called who, the time of the call, and the duration of the call. This information can be fetched from the CometChat server and displayed in a structured format for users to view their past call activities.
-
-
-
-
-
----
-
-## Next Steps
-
-
-
- Add audio and video call buttons to your chat interface
-
-
- Handle and display incoming call screens
-
-
- Manage outgoing call screens and transitions
-
-
- Display call history and records
-
-
+The [Call Logs](/ui-kit/flutter/call-logs) widget displays records of call events including caller, time, and duration.
diff --git a/ui-kit/flutter/call-logs.mdx b/ui-kit/flutter/call-logs.mdx
index 416573888..ffadbb1d0 100644
--- a/ui-kit/flutter/call-logs.mdx
+++ b/ui-kit/flutter/call-logs.mdx
@@ -1,103 +1,65 @@
---
title: "Call Logs"
-description: "Widget that shows the list of Call Logs available with filtering, call-back actions, and custom views."
+description: "Show CometChat Flutter UI Kit call logs with audio/video status, missed calls, timestamps, pagination, and call actions."
---
-
-```json
-{
- "component": "CometChatCallLogs",
- "package": "cometchat_calls_uikit",
- "import": "import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';",
- "description": "Widget that shows the list of Call Logs available with filtering, call-back actions, and custom views.",
- "props": {
- "data": {
- "callLogsRequestBuilder": { "type": "CallLogRequestBuilder?", "default": "null" },
- "callLogsBuilderProtocol": { "type": "CallLogsBuilderProtocol?", "default": "null" }
- },
- "callbacks": {
- "onItemClick": "Function(CallLog callLog)?",
- "onItemLongPress": "Function(CallLog callLog)?",
- "onCallLogIconClicked": "Function(CallLog callLog)?",
- "onBack": "VoidCallback?",
- "onError": "OnError?",
- "onLoad": "OnLoad?",
- "onEmpty": "OnEmpty?"
- },
- "visibility": {
- "hideAppbar": { "type": "bool?", "default": "false" },
- "showBackButton": { "type": "bool?", "default": "true" }
- },
- "viewSlots": {
- "listItemView": "Widget? Function(CallLog callLog, BuildContext context)?",
- "subTitleView": "Widget? Function(CallLog callLog, BuildContext context)?",
- "trailingView": "Function(BuildContext context, CallLog callLog)?",
- "leadingStateView": "Widget? Function(BuildContext, CallLog)?",
- "titleView": "Widget? Function(BuildContext, CallLog)?",
- "backButton": "Widget?",
- "emptyStateView": "WidgetBuilder?",
- "errorStateView": "WidgetBuilder?",
- "loadingStateView": "WidgetBuilder?"
- },
- "style": {
- "callLogsStyle": "CometChatCallLogsStyle?"
- },
- "icons": {
- "audioCallIcon": "Widget?",
- "videoCallIcon": "Widget?",
- "incomingCallIcon": "Widget?",
- "outgoingCallIcon": "Widget?",
- "missedCallIcon": "Widget?"
- },
- "formatting": {
- "datePattern": "String?",
- "dateSeparatorPattern": "String?"
- }
- }
-}
-```
-
-
-## Overview
-`CometChatCallLogs` is a [Widget](/ui-kit/flutter/components-overview#components) that shows the list of Call Logs available. By default, names are shown for all listed users, along with their avatars if available.
+`CometChatCallLogs` renders a scrollable list of call history with call type indicators (audio/video), call status (incoming/outgoing/missed), timestamps, and pagination support.
-The `CometChatCallLogs` widget is composed of the following BaseWidgets:
+The `CometChatCallLogs` widget is composed of the following base widgets:
-| Widgets | Description |
-| --------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [CometChatListBase](/ui-kit/flutter/components-overview) | `CometChatListBase` is a container widget featuring a title, customizable background options, and a dedicated list widget for seamless integration within your application's interface. |
-| [CometChatListItem](/ui-kit/flutter/components-overview) | This widget displays data retrieved from a CallLog object on a card, presenting a title and subtitle. |
+| Widget | Description |
+|---|---|
+| CometChatListBase | Container widget with title, background options, and list integration |
+| CometChatListItem | Displays call log data on a card with title and subtitle |
-## Usage
+---
+
+## Where It Fits
-### Integration
+`CometChatCallLogs` is a list component. It renders call history and emits the selected `CallLog` via `onItemClick`. Wire it to a detail screen or use `onCallLogIconClicked` to initiate a call directly from the log.
+
+
+
+```dart
+CometChatCallLogs(
+ onItemClick: (callLog) {
+ // Navigate to call log details or open chat
+ Navigator.push(
+ context,
+ MaterialPageRoute(
+ builder: (context) => CometChatCallLogDetails(callLog: callLog),
+ ),
+ );
+ },
+)
+```
+
+
-`CometChatCallLogs` being a wrapper widget, offers versatility in its integration. It can be seamlessly launched via button clicks or any user-triggered action, enhancing the overall user experience and facilitating smoother interactions within the application.
+---
-You can launch `CometChatCallLogs` directly using `Navigator.push`, or you can define it as a widget within the `build` method of your `State` class.
+## Quick Start
-##### 1. Using Navigator to Launch `CometChatCallLogs`
+Using Navigator:
```dart
-Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatCallLogs()));
+Navigator.push(context, MaterialPageRoute(builder: (context) => const CometChatCallLogs()));
```
-
-
-##### 2. Embedding `CometChatCallLogs` as a Widget in the build Method
+Embedding as a widget:
```dart
-import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';
+import 'package:cometchat_chat_uikit/cometchat_calls_uikit.dart';
import 'package:flutter/material.dart';
class CallLogsExample extends StatefulWidget {
@@ -108,769 +70,523 @@ class CallLogsExample extends StatefulWidget {
}
class _CallLogsExampleState extends State {
-
@override
Widget build(BuildContext context) {
return const Scaffold(
- body: SafeArea(
- child: CometChatCallLogs(),
- ),
+ body: SafeArea(child: CometChatCallLogs()),
);
}
}
```
-
+
+
+Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()`, a user logged in, and the Calls UIKit dependency added. See [Call Features](/ui-kit/flutter/call-features) for setup.
+
+---
+## Filtering Call Logs
+
+Pass a `CallLogRequestBuilder` to control what loads:
+
+
+
+```dart
+CometChatCallLogs(
+ callLogsRequestBuilder: CallLogRequestBuilder()
+ ..limit = 10
+ ..hasRecording = true,
+)
+```
+
-***
+### Filter Recipes
+
+| Recipe | Builder property |
+|---|---|
+| Limit per page | `..limit = 10` |
+| Audio calls only | `..callType = "audio"` |
+| Video calls only | `..callType = "video"` |
+| Missed calls only | `..callStatus = "missed"` |
+| Incoming calls only | `..callDirection = "incoming"` |
+| Outgoing calls only | `..callDirection = "outgoing"` |
+| Calls with recording | `..hasRecording = true` |
+| Calls for specific user | `..uid = "user_uid"` |
+| Calls for specific group | `..guid = "group_guid"` |
+| Call category (call/meet) | `..callCategory = "call"` |
+
+### Filter Properties
+
+| Property | Type | Description |
+|---|---|---|
+| `authToken` | `String?` | Authentication token |
+| `callCategory` | `String?` | Category: `"call"` or `"meet"` |
+| `callDirection` | `String?` | Direction: `"incoming"` or `"outgoing"` |
+| `callStatus` | `String?` | Status: `"ongoing"`, `"busy"`, `"rejected"`, `"cancelled"`, `"ended"`, `"missed"`, `"initiated"`, `"unanswered"` |
+| `callType` | `String?` | Type: `"audio"`, `"video"`, or `"audio/video"` |
+| `guid` | `String?` | Group ID filter |
+| `hasRecording` | `bool` | Filter calls with recordings |
+| `limit` | `int` | Max results per request |
+| `uid` | `String?` | User ID filter |
-### Actions
+---
-[Actions](/ui-kit/flutter/components-overview#actions) dictate how a widget functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the widget to fit your specific needs.
+## Actions and Events
-##### onItemClick
+### Callback Methods
-This method proves valuable when users seek to override the `onItemClick` functionality within CometChatCallLogs, empowering them with greater control and customization options.
+#### `onItemClick`
-The `onItemClick` action function invoked when a call log item is clicked, typically used to open a detailed chat screen.
+Fires when a call log item is tapped. Primary navigation hook.
```dart
CometChatCallLogs(
onItemClick: (callLog) {
- // TODO("Not yet implemented")
+ // Navigate to call details or chat
},
)
```
-
-
-***
+#### `onItemLongPress`
-##### onItemLongPress
-
-Function executed when a callLog item is long-pressed, allowing additional actions like delete or select.
+Fires when a call log item is long-pressed, allowing additional actions.
```dart
CometChatCallLogs(
onItemLongPress: (CallLog callLog) {
- // TODO("Not yet implemented")
+ // Show context menu
},
)
```
-
-
-***
-
-##### onBack
+#### `onBack`
-`onBack` is triggered when you press the back button in the app bar. It has a predefined behavior; when clicked, it navigates to the previous activity. However, you can override this action using the following code snippet.
+Fires when the user presses the back button in the app bar.
```dart
CometChatCallLogs(
onBack: () {
- // TODO("Not yet implemented")
+ Navigator.pop(context);
},
)
```
-
-
-***
+#### `onError`
-##### OnError
-
-This action doesn't change the behavior of the component but rather listens for any errors that occur in the callLogs component.
+Fires on internal errors (network failure, SDK exception).
```dart
CometChatCallLogs(
onError: (e) {
- // TODO("Not yet implemented")
+ debugPrint("Error: ${e.message}");
},
)
```
-
-
-***
+#### `onLoad`
-##### onLoad
-
-Invoked when the list is successfully fetched and loaded, helping track component readiness.
+Fires when the list is successfully fetched and loaded.
```dart
CometChatCallLogs(
onLoad: (list) {
- // print("Call Logs: $list");
- },
+ debugPrint("Loaded ${list.length} call logs");
+ },
)
```
-
-
-***
+#### `onEmpty`
-##### onEmpty
-
-Called when the list is empty, enabling custom handling such as showing a placeholder message.
+Fires when the list is empty after loading.
```dart
CometChatCallLogs(
- onEmpty: () {
- // Handle empty call logs
- },
+ onEmpty: () {
+ debugPrint("No call logs found");
+ },
)
```
-
-
-***
+#### `onCallLogIconClicked`
-##### onCallLogIconClicked
-
-You can customize this behavior by using the provided code snippet to override the `onCallLogIconClicked` and improve error handling.
+Fires when the call icon on a call log item is tapped, typically used to initiate a call back.
```dart
CometChatCallLogs(
onCallLogIconClicked: (CallLog callLog) {
- // TODO("Not yet implemented")
+ // Initiate call back to this contact
},
)
```
-
-
-***
-
-### Filters
-
-**Filters** allow you to customize the data displayed in a list within a Widget. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK.
-
-##### 1. CallLogRequestBuilder
+### Events
-The [CallLogRequestBuilder](/sdk/flutter/call-logs) enables you to filter and customize the call list based on available parameters in CallLogRequestBuilder. This feature allows you to create more specific and targeted queries during the call. The following are the parameters available in [CallLogRequestBuilder](/sdk/flutter/call-logs)
+The `CometChatCallLogs` widget does not emit global events.
-**Example**
+---
-In the example below, we are applying a filter based on the limit and have a call recording.
+## Functionality
+
+| Property | Type | Default | Description |
+|---|---|---|---|
+| `showBackButton` | `bool?` | `true` | Toggle back button visibility |
+| `hideAppbar` | `bool?` | `false` | Toggle app bar visibility |
+| `backButton` | `Widget?` | `null` | Custom back button widget |
+| `datePattern` | `String?` | `null` | Format pattern for date display |
+| `dateSeparatorPattern` | `String?` | `null` | Format pattern for date separator |
+| `hideSeparator` | `bool` | `false` | Hide separator between items |
+| `emptyStateText` | `String?` | `null` | Text for empty state |
+| `errorStateText` | `String?` | `null` | Text for error state |
+| `incomingAudioCallIcon` | `Icon?` | `null` | Custom icon for incoming audio calls |
+| `incomingVideoCallIcon` | `Icon?` | `null` | Custom icon for incoming video calls |
+| `outgoingAudioCallIcon` | `Icon?` | `null` | Custom icon for outgoing audio calls |
+| `outgoingVideoCallIcon` | `Icon?` | `null` | Custom icon for outgoing video calls |
+| `missedAudioCallIcon` | `Icon?` | `null` | Custom icon for missed audio calls |
+| `missedVideoCallIcon` | `Icon?` | `null` | Custom icon for missed video calls |
+| `infoIconUrl` | `String?` | `null` | URL for the info icon |
+| `loadingIconUrl` | `String?` | `null` | URL for the loading icon |
+
+**Example — custom back button:**
```dart
CometChatCallLogs(
- callLogsRequestBuilder: CallLogRequestBuilder()
- ..limit = 10
- ..hasRecording = true,
+ backButton: Icon(Icons.arrow_back_ios, color: Color(0xFF6851D6)),
)
```
-
-
-List of properties exposed by `CallLogRequestBuilder`
-
-| **Property** | Description | Code |
-| ------------------ | ----------------------------------------------------------- | ------------------------ |
-| **Auth Token** | Sets the authentication token. | `authToken: String?` |
-| **Call Category** | Sets the category of the call. | `callCategory: String?` |
-| **Call Direction** | Sets the direction of the call. | `callDirection: String?` |
-| **Call Status** | Sets the status of the call. | `callStatus: String?` |
-| **Call Type** | Sets the type of the call. | `callType: String?` |
-| **Guid** | Sets the unique ID of the group involved in the call. | `guid: String?` |
-| **Has Recording** | Indicates if the call has a recording. | `hasRecording: bool` |
-| **Limit** | Sets the maximum number of call logs to return per request. | `limit: int` |
-| **Uid** | Sets the unique ID of the user involved in the call. | `uid: String?` |
-
-***
-
-### Events
-
-[Events](/ui-kit/flutter/components-overview#events) are emitted by a `Widget`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.
-
-The `CometChatCallLogs` widget does not have any exposed events.
-
-***
+
+
-## Customization
+---
-To fit your app's design requirements, you can customize the appearance of the conversation widget. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.
+## Custom View Slots
-### Style
+### List Item View
-You can customize the appearance of the `CometChatCallLogs` Widget by applying the `CometChatCallLogsStyle` to it using the following code snippet.
+Replace the entire list item row with a custom widget.
```dart
CometChatCallLogs(
- callLogsStyle: CometChatCallLogsStyle(
- titleTextColor: Color(0xFFF76808),
- separatorColor: Color(0xFFF76808),
- avatarStyle: CometChatAvatarStyle(
- borderRadius: BorderRadius.circular(8),
- backgroundColor: Color(0xFFFBAA75),
+ listItemView: (callLog, context) {
+ final status = getCallStatus(context, callLog, CometChatUIKit.loggedInUser);
+ IconData icon = Icons.call;
+ Color? color;
+ Color? textColor;
+
+ if (status == "Incoming Call") {
+ icon = Icons.phone_callback_rounded;
+ color = Color(0xFF6852D6);
+ } else if (status == "Outgoing Call") {
+ icon = Icons.phone_forwarded;
+ color = Color(0xFF6852D6);
+ } else if (status == "Missed Call") {
+ icon = Icons.phone_missed;
+ color = Colors.red;
+ textColor = Colors.red;
+ }
+
+ String name = _getCallLogName(callLog);
+ String formattedDate = DateFormat('d MMM, hh:mm a').format(
+ DateTime.fromMillisecondsSinceEpoch((callLog.initiatedAt ?? 0) * 1000),
+ );
+
+ return ListTile(
+ leading: CircleAvatar(
+ backgroundColor: Color(0xFFEDEAFA),
+ child: Icon(icon, color: color, size: 24),
),
- ),
+ title: Text(name, style: TextStyle(
+ fontSize: 16, fontWeight: FontWeight.w500,
+ color: textColor ?? Color(0xFF141414),
+ )),
+ subtitle: Text(status, style: TextStyle(
+ color: Color(0xFF727272), fontSize: 14,
+ )),
+ trailing: Text(formattedDate, style: TextStyle(
+ color: Color(0xFF727272), fontSize: 14,
+ )),
+ );
+ },
)
```
-
+
+```dart
+static String getCallStatus(BuildContext context, CallLog callLog, User? loggedInUser) {
+ String callMessageText = "";
+ if (callLog.receiverType == ReceiverTypeConstants.user) {
+ CallUser initiator = callLog.initiator as CallUser;
+ bool isMe = initiator.uid == loggedInUser?.uid;
+ switch (callLog.status) {
+ case CallStatusConstants.initiated:
+ callMessageText = isMe ? "Outgoing Call" : "Incoming Call";
+ break;
+ case CallStatusConstants.ongoing:
+ callMessageText = "Call Accepted";
+ break;
+ case CallStatusConstants.ended:
+ callMessageText = "Call Ended";
+ break;
+ case CallStatusConstants.unanswered:
+ case CallStatusConstants.cancelled:
+ case CallStatusConstants.rejected:
+ case CallStatusConstants.busy:
+ callMessageText = isMe ? "Call ${callLog.status}" : "Missed Call";
+ break;
+ }
+ }
+ return callMessageText;
+}
+```
+
-
+
-***
+### Title View
-### Functionality
-
-These are a set of small functional customizations that allow you to fine-tune the overall experience of the widget. With these, you can change text, set custom icons, and toggle the visibility of UI elements.
-
-| **Methods** | Description | Code |
-| ------------------ | --------------------------------------------------------- | ------------------------------ |
-| **showBackButton** | Used to toggle visibility for back button in the app bar. | `setBackIconVisibility: bool?` |
-| **hideAppbar** | Used to toggle visibility for back button in the app bar. | `hideAppbar: bool?` |
-
-***
+Replace the caller name / title text.
```dart
CometChatCallLogs(
- backButton: Icon(Icons.add_alert, color: Color(0xFF6851D6)),
+ titleView: (callLog, context) {
+ return Text(
+ _getCallLogName(callLog),
+ style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
+ );
+ },
)
```
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-Below is a list of customizations along with corresponding code snippets
-
-| **Property** | **Description** | **Code** |
-| ----------------------------- | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- |
-| **Back Button** | A widget for the back button. | `backButton: Widget?` |
-| **Call Logs Request Builder** | Builder for creating call log requests. | `callLogsRequestBuilder: CallLogRequestBuilder?` |
-| **Date Pattern** | Format pattern for date display. | `datePattern: String?` |
-| **Date Separator Pattern** | Format pattern for date separator. | `dateSeparatorPattern: String?` |
-| **Empty State Text** | Text to display when there are no call logs. | `emptyStateText: String?` |
-| **Error State Text** | Text to display when there is an error. | `errorStateText: String?` |
-| **Hide Separator** | Whether to hide the separator between call logs. | `hideSeparator: bool` |
-| **Incoming Audio Call Icon** | Icon for incoming audio calls. | `incomingAudioCallIcon: Icon?` |
-| **Incoming Video Call Icon** | Icon for incoming video calls. | `incomingVideoCallIcon: Icon?` |
-| **Info Icon Url** | URL for the info icon. | `infoIconUrl: String?` |
-| **Loading Icon Url** | URL for the loading icon. | `loadingIconUrl: String?` |
-| **Missed Audio Call Icon** | Icon for missed audio calls. | `missedAudioCallIcon: Icon?` |
-| **Missed Video Call Icon** | Icon for missed video calls. | `missedVideoCallIcon: Icon?` |
-| **Outgoing Audio Call Icon** | Icon for outgoing audio calls. | `outgoingAudioCallIcon: Icon?` |
-| **Outgoing Video Call Icon** | Icon for outgoing video calls. | `outgoingVideoCallIcon: Icon?` |
-| **Set Options** | Set List of actions available on the long press of list item . | `setOptions: List? Function(Group group,CometChatGroupsController controller, BuildContext context)?` |
-| **Add Options** | adds into the current List of actions available on the long press of list item | `addOptions: List? Function(Group group,CometChatGroupsController controller, BuildContext context)?` |
-
-***
-
-### Advanced
-
-For advanced-level customization, you can set custom widgets to the widget. This lets you tailor each aspect of the widget to fit your exact needs and application aesthetics. You can create and define your widgets, layouts, and UI elements and then incorporate those into the widget.
-
-#### setOptions
-
-Defines the available actions users can perform on a call log entry, such as deleting, marking as spam, or calling back.
+### Leading View
-**Use Cases:**
-
-* Provide quick call-back options.
-* Allow users to block a number.
-* Enable deleting multiple call logs.
+Replace the avatar / left section.
```dart
CometChatCallLogs(
- setOptions: (callLog, controller, context) {
- // Set options for call log
- },
+ leadingView: (callLog, context) {
+ return CircleAvatar(
+ backgroundColor: Color(0xFFEDEAFA),
+ child: Icon(Icons.call, color: Color(0xFF6852D6)),
+ );
+ },
)
```
-
-
-***
+### Subtitle View
-#### addOptions
-
-Adds custom actions to the existing call log options.
-
-**Use Cases:**
-
-* Add favorite/star call log option.
-* Add favorite/star call log option.
-* Provide an archive feature.
+Replace the call status text below the name.
```dart
CometChatCallLogs(
- addOptions: (callLog, controller, context) {
- // Set options for call log
- },
+ subTitleView: (callLog, context) {
+ return Row(
+ children: [
+ _getCallIcon(callLog, CometChatUIKit.loggedInUser),
+ SizedBox(width: 4),
+ Text(
+ getCallStatus(context, callLog, CometChatUIKit.loggedInUser),
+ style: TextStyle(color: Color(0xFF727272), fontSize: 14),
+ ),
+ ],
+ );
+ },
)
```
-
-
+
+```dart
+static Widget _getCallIcon(CallLog callLog, User? loggedInUser) {
+ bool isMe = (callLog.initiator as CallUser?)?.uid == loggedInUser?.uid;
+
+ Widget incoming = Icon(Icons.call_received_outlined, color: Colors.red, size: 16);
+ Widget outgoing = Icon(Icons.call_made_outlined, color: Color(0xFF09C26F), size: 16);
+ Widget missed = Icon(Icons.call_received_outlined, color: Colors.red, size: 16);
+
+ switch (callLog.status) {
+ case CallStatusConstants.initiated:
+ case CallStatusConstants.ongoing:
+ case CallStatusConstants.ended:
+ return isMe ? outgoing : incoming;
+ case CallStatusConstants.unanswered:
+ case CallStatusConstants.cancelled:
+ case CallStatusConstants.rejected:
+ case CallStatusConstants.busy:
+ return isMe ? outgoing : missed;
+ default:
+ return const SizedBox();
+ }
+}
+```
+
-***
-
-#### ListItemView
-
-With this property, you can assign a custom ListItem to the Call Logs Widget.
+
+
+
-**Example**
+### Trailing View
-Here is the complete example for reference:
+Replace the timestamp / right section.
```dart
- CometChatCallLogs(
- listItemView: (callLog, context) {
- final status =
- getCallStatus(context, callLog, CometChatUIKit.loggedInUser);
- IconData icon = Icons.call;
- Color? color;
- Color? textColor;
- if (status == "Incoming Call") {
- icon = Icons.phone_callback_rounded;
- color = Color(0xFF6852D6);
- } else if (status == "Outgoing Call") {
- icon = Icons.phone_forwarded;
- color = Color(0xFF6852D6);
- } else if (status == "Missed Call") {
- icon = Icons.phone_missed;
- color = Colors.red;
- textColor = Colors.red;
- }
-
- String name = "";
-
- if (CometChatUIKit.loggedInUser != null) {
- if (callLog.initiator is CallUser && callLog.receiver is CallUser) {
- CallUser callUserInitiator = callLog.initiator as CallUser;
- CallUser callUserReceiver = callLog.receiver as CallUser;
- if (CometChatUIKit.loggedInUser?.uid == callUserInitiator.uid) {
- name = callUserReceiver.name ?? "";
- } else {
- name = callUserInitiator.name ?? "";
- }
- } else if (callLog.initiator is CallUser &&
- callLog.receiver is CallGroup) {
- CallUser callUserInitiator = callLog.initiator as CallUser;
- CallGroup callGroupReceiver = callLog.receiver as CallGroup;
- if (CometChatUIKit.loggedInUser?.uid == callUserInitiator.uid) {
- name = callGroupReceiver.name ?? "";
- } else {
- name = callUserInitiator.name ?? "";
- }
- }
- }
-
- //TODO: import DateFormat from intl package
- String formattedDate = DateFormat('d MMM, hh:mm a').format(
- DateTime.fromMillisecondsSinceEpoch(
- (callLog.initiatedAt ?? 0) * 1000));
-
- return ListTile(
- leading: CircleAvatar(
- backgroundColor: Color(0xFFEDEAFA),
- child: Icon(
- icon,
- color: color,
- size: 24,
- ),
- ),
- title: Text(
- name,
- style: TextStyle(
- fontSize: 16,
- fontWeight: FontWeight.w500,
- color: textColor ?? Color(0xFF141414),
- letterSpacing: 0),
- ),
- subtitle: Text(
- status,
- style: TextStyle(
- color: Color(0xFF727272),
- fontSize: 14,
- fontWeight: FontWeight.w400,
- letterSpacing: 0),
- ),
- trailing: Text(
- formattedDate,
- style: TextStyle(
- color: Color(0xFF727272),
- fontSize: 14,
- fontWeight: FontWeight.w400,
- letterSpacing: 0),
- ),
- );
- },
+CometChatCallLogs(
+ trailingView: (context, callLog) {
+ String formattedDate = DateFormat('d MMM, hh:mm a').format(
+ DateTime.fromMillisecondsSinceEpoch((callLog.initiatedAt ?? 0) * 1000),
);
+ return Text(
+ formattedDate,
+ style: TextStyle(color: Color(0xFF727272), fontSize: 14),
+ );
+ },
+)
```
-
-
-
-
-```dart
- /// Returns the call status message.
- static String getCallStatus(
- BuildContext context, CallLog callLog, User? loggedInUser) {
- String callMessageText = "";
- //check if the message is a call message and the receiver type is user
- if (callLog.receiverType == ReceiverTypeConstants.user) {
- CallUser initiator = callLog.initiator as CallUser;
- //check if the call is initiated
- if (callLog.status == CallStatusConstants.initiated) {
- //check if the logged in user is the initiator
- if (!isLoggedInUser(initiator, loggedInUser)) {
- callMessageText = "Incoming Call";
- } else {
- callMessageText = "Outgoing Call";
- }
- } else if (callLog.status == CallStatusConstants.ongoing) {
- callMessageText = "Call Accepted";
- } else if (callLog.status == CallStatusConstants.ended) {
- callMessageText = "Call Ended";
- } else if (callLog.status == CallStatusConstants.unanswered) {
- if (isLoggedInUser(initiator, loggedInUser)) {
- callMessageText = "Call Unanswered";
- } else {
- callMessageText = "Missed Call";
- }
- } else if (callLog.status == CallStatusConstants.cancelled) {
- if (isLoggedInUser(initiator, loggedInUser)) {
- callMessageText = "Call Cancelled";
- } else {
- callMessageText = "Missed Call";
- }
- } else if (callLog.status == CallStatusConstants.rejected) {
- if (isLoggedInUser(initiator, loggedInUser)) {
- callMessageText = "Call Rejected";
- } else {
- callMessageText = "Missed Call";
- }
- } else if (callLog.status == CallStatusConstants.busy) {
- if (isLoggedInUser(initiator, loggedInUser)) {
- callMessageText = "Call Rejected";
- } else {
- callMessageText = "Missed Call";
- }
- }
- }
- return callMessageText;
- }
-
- /// Returns true if the call is initiated by the logged in user.
- static bool isLoggedInUser(CallUser? initiator, User? loggedInUser) {
- if (initiator == null || loggedInUser == null) {
- return false;
- } else {
- return initiator.uid == loggedInUser.uid;
- }
- }
-```
-
-
-
+
-***
-
-#### TitleView
-
-Allows setting a custom title view, typically used for the caller’s name or number.
-
-**Use Cases:**
-
-* Display caller’s full name.
-* Show a business label for saved contacts.
-* Use bold text for unknown numbers.
-
-***
-
-#### LeadingView
-
-Customizes the leading view, usually the caller’s avatar or profile picture.
-
-**Use Cases:**
-
-* Display a profile picture.
-* Show a call type icon (missed, received, dialed).
-* Indicate call status (e.g., missed calls in red).
-
-***
-
-#### SubtitleView
-
-You can customize the subtitle widget for each call logs item to meet your requirements
-
-**Example**
-
-Here is the complete example for reference:
+### State Views
```dart
CometChatCallLogs(
- subTitleView: (callLog, context) {
- return Row(
- children: [
- getCallIcon(context, callLog, CometChatUIKit.loggedInUser),
- Text(
- getCallStatus(context, callLog, CometChatUIKit.loggedInUser),
- style: TextStyle(
- color: Color(0xFF727272),
- fontSize: 14,
- fontWeight: FontWeight.w400,
- letterSpacing: 0),
- )
- ],
- );
- },
- );
+ emptyStateView: (context) => Center(child: Text("No call logs yet")),
+ errorStateView: (context) => Center(child: Text("Something went wrong")),
+ loadingStateView: (context) => Center(child: CircularProgressIndicator()),
+)
```
-
+
-
-```dart
- /// [getCallIcon] Return call status icon
- static Widget getCallIcon(
- BuildContext context, CallLog callLog, User? loggedInUser) {
- bool isInitiatedByUser =
- CallUtils.callLogLoggedInUser(callLog, loggedInUser);
-
- // Define default icons if not provided
- Widget incoming = Icon(
- Icons.call_received_outlined,
- color: Colors.red,
- size: 16,
- );
-
- Widget outgoing = Icon(
- Icons.call_made_outlined,
- color: Color(0xFF09C26F),
- size: 16,
- );
-
- Widget missed = Icon(
- Icons.call_received_outlined,
- color: Colors.red,
- size: 16,
- );
-
- // Helper function to select icon based on initiator and call type
- Widget selectIcon(bool isInitiatedByUser) {
- return isInitiatedByUser ? outgoing : incoming;
- }
-
- // Switch on call status to determine the appropriate icon
- switch (callLog.status) {
- case CallStatusConstants.initiated:
- case CallStatusConstants.ongoing:
- case CallStatusConstants.ended:
- return selectIcon(isInitiatedByUser);
-
- case CallStatusConstants.unanswered:
- case CallStatusConstants.cancelled:
- case CallStatusConstants.rejected:
- case CallStatusConstants.busy:
- return isInitiatedByUser ? outgoing : missed;
-
- default:
- return const SizedBox(); // Return empty widget for unknown statuses
- }
- }
-```
+---
-
+## Menu Options
-
+
+
```dart
- /// Returns the call status message.
- static String getCallStatus(
- BuildContext context, CallLog callLog, User? loggedInUser) {
- String callMessageText = "";
- //check if the message is a call message and the receiver type is user
- if (callLog.receiverType == ReceiverTypeConstants.user) {
- CallUser initiator = callLog.initiator as CallUser;
- //check if the call is initiated
- if (callLog.status == CallStatusConstants.initiated) {
- //check if the logged in user is the initiator
- if (!isLoggedInUser(initiator, loggedInUser)) {
- callMessageText = "Incoming Call";
- } else {
- callMessageText = "Outgoing Call";
- }
- } else if (callLog.status == CallStatusConstants.ongoing) {
- callMessageText = "Call Accepted";
- } else if (callLog.status == CallStatusConstants.ended) {
- callMessageText = "Call Ended";
- } else if (callLog.status == CallStatusConstants.unanswered) {
- if (isLoggedInUser(initiator, loggedInUser)) {
- callMessageText = "Call Unanswered";
- } else {
- callMessageText = "Missed Call";
- }
- } else if (callLog.status == CallStatusConstants.cancelled) {
- if (isLoggedInUser(initiator, loggedInUser)) {
- callMessageText = "Call Cancelled";
- } else {
- callMessageText = "Missed Call";
- }
- } else if (callLog.status == CallStatusConstants.rejected) {
- if (isLoggedInUser(initiator, loggedInUser)) {
- callMessageText = "Call Rejected";
- } else {
- callMessageText = "Missed Call";
- }
- } else if (callLog.status == CallStatusConstants.busy) {
- if (isLoggedInUser(initiator, loggedInUser)) {
- callMessageText = "Call Rejected";
- } else {
- callMessageText = "Missed Call";
- }
- }
- }
- return callMessageText;
- }
+// Replace all options
+CometChatCallLogs(
+ setOptions: (callLog, controller, context) {
+ return [
+ CometChatOption(
+ id: "callback",
+ iconWidget: Icon(Icons.call),
+ title: "Call Back",
+ onClick: () {
+ // Initiate call back
+ },
+ ),
+ ];
+ },
+)
- /// Returns true if the call is initiated by the logged in user.
- static bool isLoggedInUser(CallUser? initiator, User? loggedInUser) {
- if (initiator == null || loggedInUser == null) {
- return false;
- } else {
- return initiator.uid == loggedInUser.uid;
- }
- }
+// Append to defaults
+CometChatCallLogs(
+ addOptions: (callLog, controller, context) {
+ return [
+ CometChatOption(
+ id: "block",
+ iconWidget: Icon(Icons.block),
+ title: "Block Number",
+ onClick: () {
+ // Block this contact
+ },
+ ),
+ ];
+ },
+)
```
-
-
-
-
-
-
-***
-
-#### TrailingView
-
-You can customize the tail widget for each call logs item to meet your requirements
-
-**Example**
+---
-Here is the complete example for reference:
+## Style
```dart
CometChatCallLogs(
- trailingView: (context, callLog) {
- String formattedDate = DateFormat('d MMM, hh:mm a').format(
- DateTime.fromMillisecondsSinceEpoch(
- (callLog.initiatedAt ?? 0) * 1000));
- return Text(
- formattedDate,
- style: TextStyle(
- color: Color(0xFF727272),
- fontSize: 14,
- fontWeight: FontWeight.w400,
- letterSpacing: 0),
- );
- },
+ callLogsStyle: CometChatCallLogsStyle(
+ titleTextColor: Color(0xFFF76808),
+ separatorColor: Color(0xFFF76808),
+ avatarStyle: CometChatAvatarStyle(
+ borderRadius: BorderRadius.circular(8),
+ backgroundColor: Color(0xFFFBAA75),
+ ),
+ ),
)
```
-
-
-
+
-***
+---
## Configurations
-[Configurations](/ui-kit/flutter/components-overview#configurations) offer the ability to customize the properties of each widget within a Composite Widget.
-
-`CometChatCallLogs` has `CometChatOutgoingCall` widget. Hence, each of these widgets will have its individual \`Configuration\`\`.
-
-* `Configurations` expose properties that are available in its individual widgets.
-
-#### Outgoing Call
+### Outgoing Call
-You can customize the properties of the OutGoing Call widget by making use of the `OutgoingCallConfiguration`. You can accomplish this by employing the `outgoingCallConfiguration` props as demonstrated below:
-
-**Example**
-
-Here is the complete example for reference:
+Customize the outgoing call component that appears when a call is initiated from a call log:
@@ -880,28 +596,33 @@ CometChatCallLogs(
subtitle: "Outgoing Call",
outgoingCallStyle: OutgoingCallStyle(
background: Color(0xFFE4EBF5),
- )
+ ),
),
)
```
-
-
-
-
-
-
-
-
-
-
-
+All exposed properties of `OutgoingCallConfiguration` can be found under [Outgoing Call](/ui-kit/flutter/outgoing-call).
-All exposed properties of `OutgoingCallConfiguration` can be found under [OutGoing Call](/ui-kit/flutter/outgoing-call#functionality). Properties marked with the 🛑 symbol are not accessible within the Configuration Object.
+---
-***
+## Next Steps
+
+
+
+ Build a call log details screen
+
+
+ Add voice and video call buttons
+
+
+ Detailed styling reference
+
+
+ Browse recent conversations
+
+
diff --git a/ui-kit/flutter/color-resources.mdx b/ui-kit/flutter/color-resources.mdx
index 4ec539b47..b62d81066 100644
--- a/ui-kit/flutter/color-resources.mdx
+++ b/ui-kit/flutter/color-resources.mdx
@@ -1,128 +1,25 @@
---
title: "Color Resources"
-sidebarTitle: "Color Resources"
-description: "Complete reference for CometChatColorPalette tokens in Flutter UI Kit."
+description: "Customize the CometChat Flutter UI Kit theme with palettes for light mode, dark mode, backgrounds, text, borders, icons, and buttons."
---
-
+## Introducing CometChatColorPalette
-| Field | Value |
-| --- | --- |
-| Class | `CometChatColorPalette` |
-| Usage | `ThemeData(extensions: [CometChatColorPalette(...)])` |
-| Categories | Primary, Neutral, Alert, Text, Icon, Border, Background, Button, Shimmer |
-| Light mode | Use light color values |
-| Dark mode | Use dark color values |
-| Source | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/shared_uikit/lib/src/theme/colors) |
+The `CometChatColorPalette` class allows you to customize the colors used throughout your app. It works the same way in V6 as in V5 — you assign it to the `extensions` property of your `ThemeData`.
-
+Here's what you can customize:
-`CometChatColorPalette` controls all colors in the UI Kit. Apply it via `ThemeData.extensions`.
+* Primary Colors — Main color scheme of your app
+* Neutral Colors — Balanced base for visuals
+* Alert Colors — Informative, warning, success, and error messages
+* Background Colors — Background shades for different areas
+* Text Colors — Text element colors for readability
+* Border Colors — Borders for buttons and cards
+* Icon Colors — App icon colors
+* Button Colors — Button background and text colors
+* Shimmer Colors — Loading animation colors
----
-
-## Complete Token Reference
-
-### Primary Colors
-
-| Token | Description |
-| --- | --- |
-| `primary` | Main accent color |
-| `extendedPrimary50` | 96% lighter (light) / 80% darker (dark) |
-| `extendedPrimary100` | 88% lighter (light) / 72% darker (dark) |
-| `extendedPrimary200` | 77% lighter (light) / 64% darker (dark) |
-| `extendedPrimary300` | 66% lighter (light) / 56% darker (dark) |
-| `extendedPrimary400` | 55% lighter (light) / 48% darker (dark) |
-| `extendedPrimary500` | 44% lighter (light) / 40% darker (dark) |
-| `extendedPrimary600` | 33% lighter (light) / 32% darker (dark) |
-| `extendedPrimary700` | 22% lighter (light) / 24% darker (dark) |
-| `extendedPrimary800` | 11% lighter (light) / 16% darker (dark) |
-| `extendedPrimary900` | 11% lighter (light) / 8% darker (dark) |
-
-### Neutral Colors
-
-| Token | Description |
-| --- | --- |
-| `neutral50` - `neutral900` | Surface and background shades (50, 100, 200, 300, 400, 500, 600, 700, 800, 900) |
-
-### Alert Colors
-
-| Token | Description |
-| --- | --- |
-| `info` | Information indicator |
-| `warning` | Warning indicator |
-| `error` | Error indicator |
-| `success` | Success indicator |
-| `error100` | Light/dark mode error shade |
-
-### Text Colors
-
-| Token | Description |
-| --- | --- |
-| `textPrimary` | Primary text |
-| `textSecondary` | Secondary text |
-| `textTertiary` | Tertiary text |
-| `textDisabled` | Disabled text |
-| `textWhite` | White text |
-| `textHighlight` | Highlighted text |
-
-### Icon Colors
-
-| Token | Description |
-| --- | --- |
-| `iconPrimary` | Primary icon |
-| `iconSecondary` | Secondary icon |
-| `iconTertiary` | Tertiary icon |
-| `iconWhite` | White icon |
-| `iconHighlight` | Highlighted icon |
-
-### Border Colors
-
-| Token | Description |
-| --- | --- |
-| `borderLight` | Light border |
-| `borderDefault` | Default border |
-| `borderDark` | Dark border |
-| `borderHighlight` | Highlighted border |
-
-### Background Colors
-
-| Token | Description |
-| --- | --- |
-| `background1` | Primary background |
-| `background2` | Secondary background |
-| `background3` | Tertiary background |
-| `background4` | Quaternary background |
-
-### Button Colors
-
-| Token | Description |
-| --- | --- |
-| `buttonBackground` | Primary button background |
-| `secondaryButtonBackground` | Secondary button background |
-| `buttonIconColor` | Primary button icon |
-| `buttonText` | Primary button text |
-| `secondaryButtonIcon` | Secondary button icon |
-| `secondaryButtonText` | Secondary button text |
-
-### Other
-
-| Token | Description |
-| --- | --- |
-| `shimmerBackground` | Shimmer effect background |
-| `shimmerGradient` | Shimmer effect gradient |
-| `messageSeen` | Read receipt indicator |
-| `white` | White color |
-| `black` | Black color |
-| `transparent` | Transparent color |
-
----
-
-## Light Mode
-
-
-
-
+### Light Mode
@@ -130,21 +27,21 @@ description: "Complete reference for CometChatColorPalette tokens in Flutter UI
ThemeData(
extensions: [
CometChatColorPalette(
- primary: Color(0xFF6852D6),
- textPrimary: Color(0xFF141414),
textSecondary: Color(0xFF727272),
background1: Color(0xFFFFFFFF),
+ textPrimary: Color(0xFF141414),
borderLight: Color(0xFFF5F5F5),
borderDark: Color(0xFFDCDCDC),
iconSecondary: Color(0xFFA1A1A1),
- iconHighlight: Color(0xFF6852D6),
success: Color(0xFF09C26F),
- warning: Color(0xFFFAAB00),
+ iconHighlight: Color(0xFF6852D6),
extendedPrimary500: Color(0xFFAA9EE8),
+ warning: Color(0xFFFAAB00),
messageSeen: Color(0xFF56E8A7),
- neutral300: Color(0xFFE8E8E8),
- neutral600: Color(0xFF727272),
neutral900: Color(0xFF141414),
+ neutral600: Color(0xFF727272),
+ neutral300: Color(0xFFE8E8E8),
+ primary: Color(0xFF6852D6),
),
],
)
@@ -152,13 +49,7 @@ ThemeData(
----
-
-## Dark Mode
-
-
-
-
+### Dark Mode
@@ -166,20 +57,20 @@ ThemeData(
ThemeData(
extensions: [
CometChatColorPalette(
- primary: Color(0xFF6852D6),
- textPrimary: Color(0xFFFFFFFF),
textSecondary: Color(0xFF989898),
background1: Color(0xFF1A1A1A),
+ textPrimary: Color(0xFFFFFFFF),
borderLight: Color(0xFF272727),
iconSecondary: Color(0xFF858585),
- iconHighlight: Color(0xFF6852D6),
success: Color(0xFF0B9F5D),
- warning: Color(0xFFD08D04),
+ iconHighlight: Color(0xFF6852D6),
extendedPrimary500: Color(0xFF3E3180),
+ warning: Color(0xFFD08D04),
messageSeen: Color(0xFF56E8A7),
- neutral300: Color(0xFF383838),
- neutral600: Color(0xFF989898),
neutral900: Color(0xFFFFFFFF),
+ neutral600: Color(0xFF989898),
+ neutral300: Color(0xFF383838),
+ primary: Color(0xFF6852D6),
),
],
)
@@ -187,13 +78,7 @@ ThemeData(
----
-
-## Custom Brand Colors
-
-
-
-
+### Custom Colors
@@ -201,20 +86,21 @@ ThemeData(
ThemeData(
extensions: [
CometChatColorPalette(
- primary: Color(0xFFF76808),
- iconHighlight: Color(0xFFF76808),
- extendedPrimary500: Color(0xFFFBAA75),
- textPrimary: Color(0xFF141414),
textSecondary: Color(0xFF727272),
background1: Color(0xFFFFFFFF),
+ textPrimary: Color(0xFF141414),
borderLight: Color(0xFFF5F5F5),
borderDark: Color(0xFFDCDCDC),
+ iconSecondary: Color(0xFFA1A1A1),
success: Color(0xFF09C26F),
+ iconHighlight: Color(0xFFF76808),
+ extendedPrimary500: Color(0xFFFBAA75),
warning: Color(0xFFFAAB00),
messageSeen: Color(0xFF56E8A7),
- neutral300: Color(0xFFE8E8E8),
- neutral600: Color(0xFF727272),
neutral900: Color(0xFF141414),
+ neutral600: Color(0xFF727272),
+ neutral300: Color(0xFFE8E8E8),
+ primary: Color(0xFFF76808),
),
],
)
diff --git a/ui-kit/flutter/component-styling.mdx b/ui-kit/flutter/component-styling.mdx
index c3fd79f62..3ab8b94d7 100644
--- a/ui-kit/flutter/component-styling.mdx
+++ b/ui-kit/flutter/component-styling.mdx
@@ -1,39 +1,127 @@
---
title: "Component Styling"
sidebarTitle: "Component Styling"
-description: "Style individual CometChat Flutter UI Kit components using ThemeExtensions."
+description: "Style CometChat Flutter UI Kit components with ThemeData extensions, component-level style objects, message bubbles, and call UI."
---
-
+The Flutter UI Kit uses `ThemeExtension` for styling. You can apply styles globally via `ThemeData` or pass style objects directly to components.
-| Field | Value |
-| --- | --- |
-| Method | Add component style classes to `ThemeData.extensions` |
-| Components | Conversations, MessageList, MessageComposer, MessageHeader, Users, Groups, GroupMembers |
-| Base components | Avatar, Badge, StatusIndicator, Receipts, Reactions, ReactionList, MediaRecorder |
-| AI components | ConversationStarter, ConversationSummary, SmartReplies, AIOptionSheet, AIAssistantChatHistory |
-| Option sheets | MessageOptionSheet, AttachmentOptionSheet, AIOptionSheet |
-| Pattern | `CometChatStyle` classes |
-| Source | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/chat_uikit) |
+## Two Approaches
-
+### 1. Global Theming via ThemeData
-Style individual components by adding their style classes to `ThemeData.extensions`.
+Apply styles across your entire app by adding `ThemeExtension` objects to your `MaterialApp` theme:
+
+
+
+```dart
+MaterialApp(
+ theme: ThemeData(
+ extensions: [
+ CometChatOutgoingMessageBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ ),
+ CometChatIncomingMessageBubbleStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ ),
+ CometChatActionBubbleStyle(
+ textStyle: TextStyle(color: Color(0xFFF76808)),
+ backgroundColor: Color(0xFFFEEDE1),
+ ),
+ ],
+ ),
+ home: YourApp(),
+)
+```
+
+
+
+### 2. Component-Level Styles
+
+Pass style objects directly to a component. These override global theme values:
+
+
+
+```dart
+CometChatMessageList(
+ user: user,
+ style: CometChatMessageListStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ ),
+ incomingMessageBubbleStyle: CometChatIncomingMessageBubbleStyle(
+ backgroundColor: Colors.white,
+ ),
+ ),
+)
+```
+
+
+
+## Style Precedence
+
+```
+Component style prop > ThemeData extension > Default theme
+```
---
-## Main Components
+## Style Classes by Component
-### Conversations
+| Component | Style Class |
+|---|---|
+| `CometChatConversations` | `CometChatConversationsStyle` |
+| `CometChatUsers` | `CometChatUsersStyle` |
+| `CometChatGroups` | `CometChatGroupsStyle` |
+| `CometChatGroupMembers` | `CometChatGroupMembersStyle` |
+| `CometChatMessageList` | `CometChatMessageListStyle` |
+| `CometChatMessageComposer` | `CometChatMessageComposerStyle` |
+| `CometChatMessageHeader` | `CometChatMessageHeaderStyle` |
+
+## Message Bubble Styles
+
+The message list style contains nested styles for incoming and outgoing bubbles:
+
+
+
+```dart
+CometChatMessageListStyle(
+ outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
+ textBubbleStyle: CometChatTextBubbleStyle(...),
+ imageBubbleStyle: CometChatImageBubbleStyle(...),
+ videoBubbleStyle: CometChatVideoBubbleStyle(...),
+ audioBubbleStyle: CometChatAudioBubbleStyle(...),
+ fileBubbleStyle: CometChatFileBubbleStyle(...),
+ deletedBubbleStyle: CometChatDeletedBubbleStyle(...),
+ pollsBubbleStyle: CometChatPollsBubbleStyle(...),
+ stickerBubbleStyle: CometChatStickerBubbleStyle(...),
+ collaborativeWhiteboardBubbleStyle: CometChatCollaborativeBubbleStyle(...),
+ collaborativeDocumentBubbleStyle: CometChatCollaborativeBubbleStyle(...),
+ linkPreviewBubbleStyle: CometChatLinkPreviewBubbleStyle(...),
+ videoCallBubbleStyle: CometChatCallBubbleStyle(...),
+ ),
+ incomingMessageBubbleStyle: CometChatIncomingMessageBubbleStyle(
+ // Same nested style structure
+ ),
+)
+```
+
+
-
-
-
+See [Message Bubble Styling](/ui-kit/flutter/message-bubble-styling) for per-bubble-type examples.
+
+---
+
+## Component Style Examples
+
+### Conversations
```dart
ThemeData(
+ fontFamily: 'Times New Roman',
extensions: [
CometChatConversationsStyle(
avatarStyle: CometChatAvatarStyle(
@@ -52,10 +140,6 @@ ThemeData(
### Message List
-
-
-
-
```dart
@@ -75,10 +159,6 @@ ThemeData(
### Message Composer
-
-
-
-
```dart
@@ -97,10 +177,6 @@ ThemeData(
### Message Header
-
-
-
-
```dart
@@ -111,10 +187,6 @@ ThemeData(
backgroundColor: Color(0xFFFBAA75),
borderRadius: BorderRadius.circular(6.67),
),
- callButtonsStyle: CometChatCallButtonsStyle(
- voiceCallIconColor: Color(0xFFF76808),
- videoCallIconColor: Color(0xFFF76808),
- ),
),
],
)
@@ -124,10 +196,6 @@ ThemeData(
### Users
-
-
-
-
```dart
@@ -150,10 +218,6 @@ ThemeData(
### Groups
-
-
-
-
```dart
@@ -192,9 +256,6 @@ ThemeData(
adminMemberScopeBackgroundColor: Color(0xFFFEEDE1),
adminMemberScopeBorder: Border.all(color: Color(0xFFF76808)),
adminMemberScopeTextColor: Color(0xFFF76808),
- moderatorMemberScopeBackgroundColor: Color(0xFFFEEDE1),
- moderatorMemberScopeTextColor: Color(0xFFF76808),
- backIconColor: Color(0xFFF76808),
),
],
)
@@ -202,39 +263,41 @@ ThemeData(
----
-
-## Base Components
-
-### Avatar
-
-
-
-
+### AI Assistant Chat History
```dart
-CometChatAvatarStyle(
- borderRadius: BorderRadius.circular(8),
- backgroundColor: Color(0xFFFBAA75),
+final ccColor = CometChatThemeHelper.getColorPalette(context);
+CometChatAIAssistantChatHistory(
+ user: user,
+ style: CometChatAIAssistantChatHistoryStyle(
+ backgroundColor: const Color(0xFFFFFAF6),
+ headerBackgroundColor: const Color(0xFFFFFAF6),
+ headerTitleTextColor: ccColor.textPrimary,
+ ),
)
```
-### Badge
+---
+
+## Base Component Styles
-
-
-
+
+### Avatar
```dart
-CometChatBadgeStyle(
- borderRadius: BorderRadius.circular(4),
- backgroundColor: Color(0xFFF44649),
+ThemeData(
+ extensions: [
+ CometChatAvatarStyle(
+ borderRadius: BorderRadius.circular(8),
+ backgroundColor: Color(0xFFFBAA75),
+ ),
+ ],
)
```
@@ -242,96 +305,100 @@ CometChatBadgeStyle(
### Status Indicator
-
-
-
-
```dart
-CometChatStatusIndicatorStyle(
- backgroundColor: Color(0xFFFFAB00),
- borderRadius: BorderRadius.circular(2),
+ThemeData(
+ extensions: [
+ CometChatStatusIndicatorStyle(
+ backgroundColor: Color(0xFFFFAB00),
+ borderRadius: BorderRadius.circular(2),
+ ),
+ ],
)
```
-### Receipts
-
-
-
-
+### Badge
```dart
-CometChatMessageReceiptStyle(
- readIconColor: Color(0xFFFFAB00),
+ThemeData(
+ extensions: [
+ CometChatBadgeStyle(
+ borderRadius: BorderRadius.circular(4),
+ backgroundColor: Color(0xFFF44649),
+ ),
+ ],
)
```
-### Reactions
-
-
-
-
+### Receipts
```dart
-CometChatReactionsStyle(
- borderRadius: BorderRadius.circular(8),
+ThemeData(
+ extensions: [
+ CometChatMessageReceiptStyle(
+ readIconColor: Color(0xFFFFAB00),
+ ),
+ ],
)
```
-### Reaction List
+### Media Recorder
```dart
-CometChatReactionListStyle(
- activeTabTextColor: Color(0xFFF76808),
- activeTabIndicatorColor: Color(0xFFF76808),
+ThemeData(
+ extensions: [
+ CometChatMediaRecorderStyle(
+ recordIndicatorBackgroundColor: Color(0xFFF44649),
+ recordIndicatorBorderRadius: BorderRadius.circular(20),
+ pauseButtonBorderRadius: BorderRadius.circular(8),
+ deleteButtonBorderRadius: BorderRadius.circular(8),
+ stopButtonBorderRadius: BorderRadius.circular(8),
+ ),
+ ],
)
```
-### Media Recorder
+### Reactions
```dart
-CometChatMediaRecorderStyle(
- recordIndicatorBackgroundColor: Color(0xFFF44649),
- recordIndicatorBorderRadius: BorderRadius.circular(20),
- pauseButtonBorderRadius: BorderRadius.circular(8),
- deleteButtonBorderRadius: BorderRadius.circular(8),
- stopButtonBorderRadius: BorderRadius.circular(8),
+ThemeData(
+ extensions: [
+ CometChatReactionsStyle(
+ borderRadius: BorderRadius.circular(8),
+ ),
+ ],
)
```
----
-
-## Option Sheets
-
-### Message Option Sheet
+### Reaction List
```dart
ThemeData(
extensions: [
- CometChatMessageOptionSheetStyle(
- backgroundColor: Color(0xFFFEEDE1),
- iconColor: Color(0xFFF76808),
+ CometChatReactionListStyle(
+ activeTabTextColor: Color(0xFFF76808),
+ activeTabIndicatorColor: Color(0xFFF76808),
),
],
)
@@ -339,16 +406,16 @@ ThemeData(
-### Attachment Option Sheet
+### Conversation Starter
```dart
ThemeData(
extensions: [
- CometChatAttachmentOptionSheetStyle(
+ CometChatAIConversationStarterStyle(
backgroundColor: Color(0xFFFEEDE1),
- iconColor: Color(0xFFF76808),
+ border: Border.all(color: Color(0xFFFBBB90)),
),
],
)
@@ -356,21 +423,16 @@ ThemeData(
-### Message Information
+### Conversation Summary
```dart
ThemeData(
extensions: [
- CometChatOutgoingMessageBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- ),
- CometChatMessageInformationStyle(
- backgroundHighLightColor: Color(0xFFFEEDE1),
- messageReceiptStyle: CometChatMessageReceiptStyle(
- readIconColor: Color(0xFFF76808),
- ),
+ CometChatAIConversationSummaryStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ titleStyle: TextStyle(color: Color(0xFFF76808)),
),
],
)
@@ -378,18 +440,18 @@ ThemeData(
-### Mentions
+### Smart Replies
```dart
ThemeData(
extensions: [
- CometChatMentionsStyle(
- mentionSelfTextBackgroundColor: Color(0xFFF76808),
- mentionTextBackgroundColor: Colors.white,
- mentionTextColor: Colors.black,
- mentionSelfTextColor: Colors.white,
+ CometChatAISmartRepliesStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ titleStyle: TextStyle(color: Color(0xFFF76808)),
+ itemBackgroundColor: Color(0xFFFFF9F5),
+ itemBorder: Border.all(color: Color(0xFFFBBB90)),
),
],
)
@@ -397,54 +459,58 @@ ThemeData(
----
-
-## AI Components
-
-### Conversation Starter
-
-
-
-
+### Message Information
```dart
-CometChatAIConversationStarterStyle(
- backgroundColor: Color(0xFFFEEDE1),
- border: Border.all(color: Color(0xFFFBBB90)),
+ThemeData(
+ fontFamily: "Times New Roman",
+ extensions: [
+ CometChatOutgoingMessageBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ ),
+ CometChatMessageInformationStyle(
+ backgroundHighLightColor: Color(0xFFFEEDE1),
+ messageReceiptStyle: CometChatMessageReceiptStyle(
+ readIconColor: Color(0xFFF76808),
+ ),
+ ),
+ ],
)
```
-### Smart Replies
-
-
-
-
+### Message Option Sheet
```dart
-CometChatAISmartRepliesStyle(
- backgroundColor: Color(0xFFFEEDE1),
- titleStyle: TextStyle(color: Color(0xFFF76808)),
- itemBackgroundColor: Color(0xFFFFF9F5),
- itemBorder: Border.all(color: Color(0xFFFBBB90)),
+ThemeData(
+ extensions: [
+ CometChatMessageOptionSheetStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ iconColor: Color(0xFFF76808),
+ ),
+ ],
)
```
-### Conversation Summary
+### Attachment Option Sheet
```dart
-CometChatAIConversationSummaryStyle(
- backgroundColor: Color(0xFFFEEDE1),
- titleStyle: TextStyle(color: Color(0xFFF76808)),
+ThemeData(
+ extensions: [
+ CometChatAttachmentOptionSheetStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ iconColor: Color(0xFFF76808),
+ ),
+ ],
)
```
@@ -455,36 +521,42 @@ CometChatAIConversationSummaryStyle(
```dart
-CometChatAiOptionSheetStyle(
- backgroundColor: Color(0xFFFFF9F5),
- iconColor: Color(0xFFF76808),
+ThemeData(
+ extensions: [
+ CometChatAiOptionSheetStyle(
+ backgroundColor: Color(0xFFFFF9F5),
+ iconColor: Color(0xFFF76808),
+ ),
+ ],
)
```
-### AI Assistant Chat History
+### Mentions
```dart
-final ccColor = CometChatThemeHelper.getColorPalette(context);
-
-CometChatAIAssistantChatHistory(
- user: user,
- style: CometChatAIAssistantChatHistoryStyle(
- backgroundColor: Color(0xFFFFFAF6),
- headerBackgroundColor: Color(0xFFFFFAF6),
- headerTitleTextColor: ccColor.textPrimary,
- newChatIconColor: ccColor.iconSecondary,
- newChatTextColor: ccColor.textPrimary,
- dateSeparatorStyle: CometChatDateStyle(
- textColor: ccColor.textTertiary,
- backgroundColor: Color(0xFFFFFAF6),
+ThemeData(
+ extensions: [
+ CometChatMentionsStyle(
+ mentionSelfTextBackgroundColor: Color(0xFFF76808),
+ mentionTextBackgroundColor: Colors.white,
+ mentionTextColor: Colors.black,
+ mentionSelfTextColor: Colors.white,
),
- itemTextColor: ccColor.textPrimary,
- ),
+ ],
)
```
+
+---
+
+## Related
+
+- [Message Bubble Styling](/ui-kit/flutter/message-bubble-styling) — Per-bubble-type style examples.
+- [Color Resources](/ui-kit/flutter/color-resources) — Color palette customization.
+- [Theme Introduction](/ui-kit/flutter/theme-introduction) — Theme system overview (ColorPalette, Typography, Spacing).
+- [Customization Overview](/ui-kit/flutter/customization-overview) — All customization categories.
diff --git a/ui-kit/flutter/components-overview.mdx b/ui-kit/flutter/components-overview.mdx
index c221df3d7..8ddefb3a4 100644
--- a/ui-kit/flutter/components-overview.mdx
+++ b/ui-kit/flutter/components-overview.mdx
@@ -1,257 +1,56 @@
---
title: "Overview"
-description: "Browse all prebuilt UI components in the CometChat Flutter UI Kit — conversations, messages, users, groups, search, and AI."
+description: "Explore CometChat Flutter UI Kit V6 widgets, base widgets, component architecture, actions, filters, styles, and customization."
---
-
-
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_chat_uikit` |
-| Required setup | `CometChatUIKit.init()` + `CometChatUIKit.login()` before rendering any component |
-| Callback actions | `on: (param) { }` |
-| Data filtering | `RequestBuilder: RequestBuilder()` |
-| Toggle features | `hide: true` or `show: true` |
-| Custom rendering | `View: (context, entity) => Widget` |
-| Style overrides | `style: CometChatStyle(...)` |
-
-
-
-## Architecture
-
-The UI Kit is a set of independent widgets that compose into chat layouts. A typical two-panel layout uses four core components:
-
-- **CometChatConversations** — sidebar listing recent conversations (users and groups)
-- **CometChatMessageHeader** — toolbar showing avatar, name, online status, and typing indicator
-- **CometChatMessageList** — scrollable message feed with reactions, receipts, and threads
-- **CometChatMessageComposer** — rich text input with attachments, mentions, and voice notes
-
-**Data flow**: selecting a conversation in CometChatConversations yields a `User` or `Group` object. That object is passed as a prop (`user` or `group`) to CometChatMessageHeader, CometChatMessageList, and CometChatMessageComposer. The message components use the SDK internally — CometChatMessageComposer sends messages, CometChatMessageList receives them via real-time listeners.
-
-```mermaid
-flowchart LR
- subgraph Sidebar
- A[CometChatConversations]
- end
-
- subgraph "Chat Panel"
- B[CometChatMessageHeader]
- C[CometChatMessageList]
- D[CometChatMessageComposer]
- end
-
- subgraph SDK
- E[CometChat SDK]
- end
-
- A -->|"User/Group object"| B
- A -->|"User/Group object"| C
- A -->|"User/Group object"| D
- D -->|"sendMessage()"| E
- E -->|"Real-time listeners"| C
-```
-
-Components communicate through a publish/subscribe event bus (`CometChatMessageEvents`, `CometChatConversationEvents`, `CometChatGroupEvents`, etc.). A component emits events that other components or application code can subscribe to without direct references. See [Events](/ui-kit/flutter/events) for the full list.
-
-```mermaid
-flowchart TB
- subgraph "Event Bus"
- E1[CometChatMessageEvents]
- E2[CometChatConversationEvents]
- E3[CometChatGroupEvents]
- end
-
- C1[Component A] -->|"emit"| E1
- E1 -->|"subscribe"| C2[Component B]
- E1 -->|"subscribe"| C3[App Code]
-
- C4[Component C] -->|"emit"| E2
- E2 -->|"subscribe"| C5[Component D]
-```
-
-Each component accepts callback props (`on`), view slot props (`View`) for replacing UI sections, `RequestBuilder` props for data filtering, and style class overrides via `CometChatStyle`.
-
----
+CometChat's **UI Kit V6** is a set of pre-built UI Widgets that allows you to easily craft an in-app chat with all the essential messaging features, built on clean architecture with BLoC state management.
## Type of Widget
-UI Widgets based on behavior and functionality can be categorized into three types: Base Widget, Widget, and Composite Widget.
+UI Widgets based on behaviour and functionality can be categorized into two types: Base Widget and Widget.
### Base Widget
-Base Widgets form the building blocks of your app's user interface (UI). They focus solely on presenting visual elements based on input data, without handling any business logic. These widgets provide the foundational appearance and behavior for your UI.
+Base Widgets form the building blocks of your app's user interface (UI). They focus solely on presenting visual elements based on input data, without handling any business logic. These Widgets provide the foundational appearance and behavior for your UI.
### Widget
-Widgets build upon Base Widgets by incorporating business logic. They not only render UI elements but also manage data loading, execute specific actions, and respond to events. This combination of visual presentation and functional capabilities makes Widgets essential for creating dynamic and interactive UIs.
-
-### Composite Widget
-
-Composite Widgets are advanced UI elements that combine multiple Widgets or other Composite Widgets to achieve complex functionality. By layering widgets together, Composite Widgets offer a sophisticated and flexible approach to designing UIs. They enable diverse functionalities and interactions, making them versatile tools for creating rich user experiences.
-
----
-
-## Component Catalog
-
-All components are imported from `cometchat_chat_uikit`.
-
-### Conversations and Lists
-
-| Component | Purpose | Key Props | Page |
-| --- | --- | --- | --- |
-| CometChatConversations | Scrollable list of recent conversations | `conversationsRequestBuilder`, `onItemTap`, `onError` | [Conversations](/ui-kit/flutter/conversations) |
-| CometChatUsers | Scrollable list of users | `usersRequestBuilder`, `onItemTap`, `onError` | [Users](/ui-kit/flutter/users) |
-| CometChatGroups | Scrollable list of groups | `groupsRequestBuilder`, `onItemTap`, `onError` | [Groups](/ui-kit/flutter/groups) |
-| CometChatGroupMembers | Scrollable list of group members | `group`, `groupMemberRequestBuilder`, `onItemTap` | [Group Members](/ui-kit/flutter/group-members) |
-
-### Messages
+Widgets build upon Base Widgets by incorporating business logic via BLoC pattern. They not only render UI elements but also manage data loading through use cases and repositories, execute specific actions, and respond to events. This combination of visual presentation and functional capabilities makes Widgets essential for creating dynamic and interactive UIs.
-| Component | Purpose | Key Props | Page |
-| --- | --- | --- | --- |
-| CometChatMessageHeader | Toolbar with avatar, name, status, typing indicator | `user`, `group`, `backButton`, `hideBackButton` | [Message Header](/ui-kit/flutter/message-header) |
-| CometChatMessageList | Scrollable message list with reactions, receipts, threads | `user`, `group`, `messagesRequestBuilder`, `scrollToBottomOnNewMessages` | [Message List](/ui-kit/flutter/message-list) |
-| CometChatMessageComposer | Rich text input with attachments, mentions, voice notes | `user`, `group`, `onSendButtonTap`, `placeholderText` | [Message Composer](/ui-kit/flutter/message-composer) |
-| CometChatCompactMessageComposer | Compact input with rich text formatting, inline voice recorder, attachments | `user`, `group`, `enterKeyBehavior`, `enableRichTextFormatting` | [Compact Message Composer](/ui-kit/flutter/compact-message-composer) |
-| CometChatMessageTemplate | Pre-defined structure for custom message bubbles | `type`, `category`, `contentView`, `headerView`, `footerView` | [Message Template](/ui-kit/flutter/message-template) |
-| CometChatThreadedHeader | Parent message bubble and reply count for threaded view | `parentMessage`, `onClose`, `hideReceipts` | [Threaded Header](/ui-kit/flutter/threaded-messages-header) |
+> **V6 Note:** V6 does not have Composite Widgets like `CometChatMessages` or `CometChatConversationsWithMessages`. Instead, you compose the UI yourself using individual Widgets (`CometChatMessageList`, `CometChatMessageComposer`, `CometChatMessageHeader`). This gives you full control over layout and behavior.
-### Search and AI
-
-| Component | Purpose | Key Props | Page |
-| --- | --- | --- | --- |
-| CometChatSearch | Real-time search input field | `onSearch`, `placeholder`, `style` | [Search](/ui-kit/flutter/search) |
-| CometChatAIAssistantChatHistory | AI assistant conversation history display | `user`, `group`, `style` | [AI Assistant Chat History](/ui-kit/flutter/ai-assistant-chat-history) |
-
-### Calling
-
-| Component | Purpose | Key Props | Page |
-| --- | --- | --- | --- |
-| CometChatCallButtons | Voice and video call initiation buttons | `user`, `group`, `hideVoiceCallButton`, `hideVideoCallButton` | [Call Buttons](/ui-kit/flutter/call-buttons) |
-| CometChatIncomingCall | Incoming call notification with accept/decline | `call`, `onAccept`, `onDecline` | [Incoming Call](/ui-kit/flutter/incoming-call) |
-| CometChatOutgoingCall | Outgoing call screen with cancel control | `call`, `user`, `onCancelled` | [Outgoing Call](/ui-kit/flutter/outgoing-call) |
-| CometChatCallLogs | Scrollable list of call history | `callLogsRequestBuilder`, `onItemClick` | [Call Logs](/ui-kit/flutter/call-logs) |
-
----
-
-## Component API Pattern
-
-All components share a consistent API surface.
-
-### Actions
-
-Actions control component behavior. They split into two categories:
-
-**Predefined Actions** are built into the component and execute automatically on user interaction (e.g., tapping send dispatches the message). No configuration needed.
-
-**User-Defined Actions** are callback props that fire on specific events. Override them to customize behavior:
-
-
-
-```dart
-CometChatMessageList(
- user: chatUser,
- onThreadRepliesClick: (message, context, {bubbleView}) {
- openThreadPanel(message);
- },
- onError: (error) {
- logError(error);
- },
-)
-```
-
-
-
-### Events
-
-Events enable decoupled communication between components. A component emits events that other parts of the application can subscribe to without direct references.
-
-
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+## Architecture
-// Subscribe to message sent events
-CometChatMessageEvents.onMessageSent.listen((message) {
- // react to sent message
-});
-```
-
-
+Each Widget in V6 follows clean architecture internally:
-Each component page documents its emitted events in the Events section.
+| Layer | Purpose | Example |
+|---|---|---|
+| `bloc/` | State management (events, states, BLoC) | `ConversationsBloc`, `ConversationsEvent`, `ConversationsState` |
+| `data/` | Data sources and repository implementations | `ConversationsRemoteDatasource`, `ConversationsRepositoryImpl` |
+| `domain/` | Use cases and repository interfaces | `GetConversationsUseCase`, `ConversationsRepository` |
+| `di/` | Dependency injection | `ConversationsServiceLocator` |
+| `widgets/` | Decomposed sub-widgets | `ConversationsList`, `ConversationsEmptyView` |
-### Filters
+## Actions
-List-based components accept `RequestBuilder` props to control which data loads:
+Actions direct the operational behavior of a component. They are split into two categories: Predefined Actions and User-Defined Actions.
-
-
-```dart
-CometChatMessageList(
- user: chatUser,
- messagesRequestBuilder: MessagesRequestBuilder()
- ..limit = 20,
-)
-```
-
-
+### Predefined Actions
-### Custom View Slots
+These are actions inherently programmed into a UI component. They execute automatically in response to user interaction, without needing any additional user input.
-Components expose named view slots to replace sections of the default UI:
+### User-Defined Actions
-
-
-```dart
-CometChatMessageHeader(
- user: chatUser,
- titleView: (context, user, group) => CustomTitle(),
- subtitleView: (context, user, group) => CustomSubtitle(),
- leadingView: (context, user, group) => CustomAvatar(),
-)
-```
-
-
+These are actions that must be explicitly specified by the user. They provide adaptability and allow for the creation of custom behaviors that align with the individual needs of the application.
-### Styling
+To customize the behavior of a component, actions must be overridden by the user. This provides the user with control over how the component responds to specific events or interactions.
-Every component accepts a style class for customization:
+## Events
-
-
-```dart
-CometChatMessageList(
- user: chatUser,
- style: CometChatMessageListStyle(
- backgroundColor: Colors.white,
- borderRadius: 8,
- ),
-)
-```
-
-
+Events allow for a decoupled, flexible architecture where different parts of the application can interact without having to directly reference each other. This makes it easier to create complex, interactive experiences, as well as to extend and customize the functionality provided by the CometChat UI Kit.
----
+Widgets have the ability to emit events. These events are dispatched in response to certain changes or user interactions within the component. By emitting events, these Widgets allow other parts of the application to react to changes or interactions, thus enabling dynamic and interactive behavior within the application.
## Configurations
-Configurations offer the ability to customize the properties of each individual component within a Composite Component. If a Composite Component includes multiple Widgets, each of these Widgets will have its own set of properties that can be configured. This means multiple sets of configurations are available, one for each constituent component. This allows for fine-tuned customization of the Composite Component, enabling you to tailor its behavior and appearance to match specific requirements in a granular manner.
-
----
-
-## Next Steps
-
-
-
- Set up the Flutter UI Kit in your project
-
-
- Customize colors, fonts, and styles
-
-
- Add-on features like polls, stickers, and translation
-
-
- Task-oriented tutorials for common patterns
-
-
+Configurations offer the ability to customize the properties of each individual component. Each Widget has its own set of properties that can be configured, allowing for fine-tuned customization to tailor behavior and appearance to match specific requirements in a granular manner.
diff --git a/ui-kit/flutter/conversations.mdx b/ui-kit/flutter/conversations.mdx
index 9f6b27290..bda98e431 100644
--- a/ui-kit/flutter/conversations.mdx
+++ b/ui-kit/flutter/conversations.mdx
@@ -1,358 +1,71 @@
---
title: "Conversations"
-description: "Scrollable list of recent one-on-one and group conversations for the logged-in user."
+description: "Display CometChat Flutter UI Kit conversations with real-time updates for messages, typing indicators, read receipts, and presence."
---
-
-```json
-{
- "component": "CometChatConversations",
- "package": "cometchat_chat_uikit",
- "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
- "description": "Scrollable list of recent one-on-one and group conversations for the logged-in user.",
- "primaryOutput": {
- "prop": "onItemTap",
- "type": "Function(Conversation conversation)"
- },
- "props": {
- "data": {
- "conversationsRequestBuilder": {
- "type": "ConversationsRequestBuilder?",
- "default": "SDK default (30 per page)",
- "note": "Pass the builder, not the result of .build()"
- },
- "conversationsProtocol": {
- "type": "ConversationsBuilderProtocol?",
- "default": "null",
- "note": "Custom protocol for fetching conversations"
- },
- "scrollController": {
- "type": "ScrollController?",
- "default": "null",
- "note": "Custom scroll controller for the list"
- },
- "title": {
- "type": "String?",
- "default": "Chats",
- "note": "Title text for the app bar"
- },
- "controllerTag": {
- "type": "String?",
- "default": "null",
- "note": "Tag for controller management"
- },
- "mentionAllLabel": {
- "type": "String?",
- "default": "null",
- "note": "Custom label for @all mentions"
- },
- "mentionAllLabelId": {
- "type": "String?",
- "default": "null",
- "note": "Custom label ID for @all mentions"
- }
- },
- "callbacks": {
- "onItemTap": "Function(Conversation conversation)?",
- "onItemLongPress": "Function(Conversation conversation)?",
- "onSelection": "Function(List? list)?",
- "onBack": "VoidCallback?",
- "onError": "OnError?",
- "onLoad": "OnLoad?",
- "onEmpty": "OnEmpty?",
- "onSearchTap": "GestureTapCallback?",
- "datePattern": "String Function(Conversation conversation)?",
- "dateTimeFormatterCallback": "DateTimeFormatterCallback?"
- },
- "visibility": {
- "receiptsVisibility": { "type": "bool?", "default": true },
- "usersStatusVisibility": { "type": "bool?", "default": true },
- "groupTypeVisibility": { "type": "bool?", "default": true },
- "deleteConversationOptionVisibility": { "type": "bool?", "default": true },
- "hideAppbar": { "type": "bool?", "default": false },
- "hideError": { "type": "bool?", "default": false },
- "hideSearch": { "type": "bool?", "default": false },
- "showBackButton": { "type": "bool", "default": false },
- "dateBackgroundIsTransparent": { "type": "bool?", "default": null },
- "searchReadOnly": { "type": "bool", "default": false }
- },
- "sound": {
- "disableSoundForMessages": { "type": "bool?", "default": false },
- "customSoundForMessages": { "type": "String?", "default": "built-in" }
- },
- "selection": {
- "selectionMode": {
- "type": "SelectionMode?",
- "values": ["SelectionMode.single", "SelectionMode.multiple", "SelectionMode.none"],
- "default": "null"
- },
- "activateSelection": {
- "type": "ActivateSelection?",
- "values": ["ActivateSelection.onClick", "ActivateSelection.onLongClick"],
- "default": "null"
- }
- },
- "viewSlots": {
- "listItemView": "Widget Function(Conversation conversation)?",
- "leadingView": "Widget? Function(BuildContext context, Conversation conversation)?",
- "titleView": "Widget? Function(BuildContext context, Conversation conversation)?",
- "subtitleView": "Widget? Function(BuildContext context, Conversation conversation)?",
- "trailingView": "Widget? Function(Conversation conversation)?",
- "loadingStateView": "WidgetBuilder?",
- "emptyStateView": "WidgetBuilder?",
- "errorStateView": "WidgetBuilder?",
- "setOptions": "List? Function(Conversation, CometChatConversationsController, BuildContext)?",
- "addOptions": "List? Function(Conversation, CometChatConversationsController, BuildContext)?"
- },
- "formatting": {
- "textFormatters": {
- "type": "List?",
- "default": "default formatters from data source"
- },
- "typingIndicatorText": {
- "type": "String?",
- "default": "typing..."
- }
- },
- "icons": {
- "backButton": { "type": "Widget?", "default": "built-in back arrow" },
- "protectedGroupIcon": { "type": "Widget?", "default": "built-in lock icon" },
- "privateGroupIcon": { "type": "Widget?", "default": "built-in lock icon" },
- "readIcon": { "type": "Widget?", "default": "built-in read icon" },
- "deliveredIcon": { "type": "Widget?", "default": "built-in delivered icon" },
- "sentIcon": { "type": "Widget?", "default": "built-in sent icon" },
- "submitIcon": { "type": "Widget?", "default": "built-in check icon" },
- "searchBoxIcon": { "type": "Widget?", "default": "built-in search icon" }
- },
- "layout": {
- "datePadding": { "type": "EdgeInsets?", "default": "null" },
- "dateHeight": { "type": "double?", "default": "null" },
- "dateWidth": { "type": "double?", "default": "null" },
- "badgeWidth": { "type": "double?", "default": "null" },
- "badgeHeight": { "type": "double?", "default": "null" },
- "badgePadding": { "type": "EdgeInsetsGeometry?", "default": "null" },
- "avatarWidth": { "type": "double?", "default": "null" },
- "avatarHeight": { "type": "double?", "default": "null" },
- "avatarPadding": { "type": "EdgeInsetsGeometry?", "default": "null" },
- "avatarMargin": { "type": "EdgeInsetsGeometry?", "default": "null" },
- "statusIndicatorWidth": { "type": "double?", "default": "null" },
- "statusIndicatorHeight": { "type": "double?", "default": "null" },
- "statusIndicatorBorderRadius": { "type": "BorderRadiusGeometry?", "default": "null" },
- "searchPadding": { "type": "EdgeInsetsGeometry?", "default": "null" },
- "searchContentPadding": { "type": "EdgeInsetsGeometry?", "default": "null" }
- },
- "style": {
- "conversationsStyle": { "type": "CometChatConversationsStyle", "default": "CometChatConversationsStyle()" },
- "listItemStyle": { "type": "ListItemStyle?", "default": "null" },
- "appBarOptions": { "type": "List?", "default": "null" }
- }
- },
- "events": [
- {
- "name": "CometChatConversationEvents.ccConversationDeleted",
- "payload": "Conversation",
- "description": "Conversation deleted from list"
- },
- {
- "name": "CometChatConversationEvents.ccUpdateConversation",
- "payload": "Conversation",
- "description": "Conversation updated"
- },
- {
- "name": "CometChatConversationEvents.ccMessageRead",
- "payload": "BaseMessage",
- "description": "Message marked as read"
- },
- {
- "name": "CometChatConversationEvents.ccMessageSent",
- "payload": "BaseMessage, MessageStatus",
- "description": "Message sent"
- }
- ],
- "sdkListeners": [
- "onTextMessageReceived",
- "onMediaMessageReceived",
- "onCustomMessageReceived",
- "onFormMessageReceived",
- "onCardMessageReceived",
- "onCustomInteractiveMessageReceived",
- "onSchedulerMessageReceived",
- "onTypingStarted",
- "onTypingEnded",
- "onMessagesDelivered",
- "onMessagesRead",
- "onMessagesDeliveredToAll",
- "onMessagesReadByAll",
- "onMessageEdited",
- "onMessageDeleted",
- "onUserOnline",
- "onUserOffline",
- "ccUserBlocked",
- "onGroupMemberJoined",
- "onGroupMemberLeft",
- "onGroupMemberKicked",
- "onGroupMemberBanned",
- "onGroupMemberUnbanned",
- "onGroupMemberScopeChanged",
- "onMemberAddedToGroup",
- "ccOwnershipChanged",
- "ccGroupLeft",
- "ccGroupDeleted",
- "ccGroupMemberAdded",
- "onIncomingCallReceived",
- "onOutgoingCallAccepted",
- "onOutgoingCallRejected",
- "onIncomingCallCancelled",
- "onCallEndedMessageReceived",
- "onConnected"
- ],
- "compositionExample": {
- "description": "Sidebar conversations wired to message view",
- "components": [
- "CometChatConversations",
- "CometChatMessages",
- "CometChatMessageHeader",
- "CometChatMessageList",
- "CometChatMessageComposer"
- ],
- "flow": "onItemTap emits Conversation -> extract User/Group via conversationWith -> pass to CometChatMessages or individual MessageHeader, MessageList, MessageComposer"
- },
- "types": {
- "CometChatOption": {
- "id": "String?",
- "title": "String?",
- "icon": "String?",
- "iconWidget": "Widget?",
- "onClick": "VoidCallback?"
- },
- "SelectionMode": {
- "single": "SelectionMode.single",
- "multiple": "SelectionMode.multiple",
- "none": "SelectionMode.none"
- },
- "ActivateSelection": {
- "onClick": "ActivateSelection.onClick",
- "onLongClick": "ActivateSelection.onLongClick"
- }
- }
-}
-```
-
+`CometChatConversations` renders a scrollable list of recent conversations with real-time updates for new messages, typing indicators, read receipts, and user presence.
+---
## Where It Fits
-`CometChatConversations` is a sidebar list widget. It renders recent conversations and emits the selected `Conversation` via `onItemTap`. Wire it to `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer` to build a standard two-panel chat layout.
+`CometChatConversations` is a list component. It renders recent conversations and emits the selected `Conversation` via `onItemTap`. Wire it to `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer` to build a standard chat layout.
```dart
-import 'package:flutter/material.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
-class ChatApp extends StatefulWidget {
- const ChatApp({super.key});
-
- @override
- State createState() => _ChatAppState();
-}
-
-class _ChatAppState extends State {
- User? selectedUser;
- Group? selectedGroup;
-
- void handleItemTap(Conversation conversation) {
+CometChatConversations(
+ onItemTap: (conversation) {
final entity = conversation.conversationWith;
- setState(() {
- if (entity is User) {
- selectedUser = entity;
- selectedGroup = null;
- } else if (entity is Group) {
- selectedGroup = entity;
- selectedUser = null;
- }
- });
- }
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: Row(
- children: [
- SizedBox(
- width: 400,
- child: CometChatConversations(
- onItemTap: handleItemTap,
- ),
- ),
- Expanded(
- child: selectedUser != null || selectedGroup != null
- ? CometChatMessages(
- user: selectedUser,
- group: selectedGroup,
- )
- : const Center(
- child: Text('Select a conversation'),
- ),
- ),
- ],
- ),
- );
- }
-}
+ if (entity is User) {
+ navigateToUserChat(entity);
+ } else if (entity is Group) {
+ navigateToGroupChat(entity);
+ }
+ },
+)
```
-
-
-
-
---
+## Quick Start
-## Minimal Render
+Using Navigator:
```dart
-import 'package:flutter/material.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
-class ConversationsDemo extends StatelessWidget {
- const ConversationsDemo({super.key});
-
- @override
- Widget build(BuildContext context) {
- return const Scaffold(
- body: SafeArea(
- child: CometChatConversations(),
- ),
- );
- }
-}
+Navigator.push(context, MaterialPageRoute(builder: (context) => const CometChatConversations()));
```
-
-
-
-
-You can also launch it using `Navigator.push`:
+Embedding as a widget:
+
+
```dart
-Navigator.push(
- context,
- MaterialPageRoute(builder: (context) => const CometChatConversations())
-);
+@override
+Widget build(BuildContext context) {
+ return Scaffold(
+ body: SafeArea(
+ child: CometChatConversations(),
+ ),
+ );
+}
```
+
+
+
+Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()`, a user logged in, and the UI Kit dependency added.
---
## Filtering Conversations
-Pass a `ConversationsRequestBuilder` to `conversationsRequestBuilder`. Pass the builder instance — not the result of `.build()`.
+Pass a `ConversationsRequestBuilder` to control what loads:
@@ -368,173 +81,140 @@ CometChatConversations(
### Filter Recipes
-| Recipe | Code |
+| Recipe | Builder property |
| --- | --- |
-| Only user conversations | `ConversationsRequestBuilder()..conversationType = "user"` |
-| Only group conversations | `ConversationsRequestBuilder()..conversationType = "group"` |
-| Limit to 10 per page | `ConversationsRequestBuilder()..limit = 10` |
-| With specific tags | `ConversationsRequestBuilder()..tags = ["vip"]` |
-| With user and group tags | `ConversationsRequestBuilder()..withUserAndGroupTags = true` |
-| Include blocked users | `ConversationsRequestBuilder()..includeBlockedUsers = true` |
-| Search conversations | `ConversationsRequestBuilder()..searchKeyword = "hello"` |
-| Unread only | `ConversationsRequestBuilder()..unread = true` |
-
-Default page size is 30. The component uses infinite scroll — the next page loads as the user scrolls to the bottom.
-
-### ConversationsRequestBuilder Properties
-
-| Property | Description | Code |
-| --- | --- | --- |
-| `limit` | Number of conversations to fetch per request. Maximum 50. | `..limit = 30` |
-| `conversationType` | Filter by conversation type: `"user"` or `"group"`. If not set, returns both. | `..conversationType = "user"` |
-| `withTags` | Include tags associated with conversations. Default `false`. | `..withTags = true` |
-| `tags` | Filter conversations by specific tags. | `..tags = ["archived", "vip"]` |
-| `withUserAndGroupTags` | Include user/group tags in the Conversation object. Default `false`. | `..withUserAndGroupTags = true` |
-| `includeBlockedUsers` | Include conversations with blocked users. Default `false`. | `..includeBlockedUsers = true` |
-| `withBlockedInfo` | Include blocked info in the ConversationWith object. Default `false`. | `..withBlockedInfo = true` |
-| `searchKeyword` | Search conversations by user or group name. Requires Advanced plan. | `..searchKeyword = "John"` |
-| `unread` | Fetch only unread conversations. Requires Advanced plan. | `..unread = true` |
-| `build()` | Builds and returns a `ConversationsRequest` object. | `.build()` |
-
-Refer to [ConversationsRequestBuilder](/sdk/flutter/retrieve-conversations) for the full builder API.
+| Only user conversations | `..conversationType = "user"` |
+| Only group conversations | `..conversationType = "group"` |
+| Limit per page | `..limit = 10` |
+| With tags | `..tags = ["vip"]` and `..withTags = true` |
+| With user and group tags | `..withUserAndGroupTags = true` |
---
-
## Actions and Events
-### Callback Props
+### Callback Methods
-#### onItemTap
+#### `onItemTap`
-Fires when a conversation row is tapped. Primary navigation hook — set the active conversation and render the message view.
+Fires when a conversation row is tapped. Primary navigation hook.
```dart
CometChatConversations(
onItemTap: (conversation) {
- print("Selected: ${conversation.conversationId}");
+ // Navigate to chat screen
},
)
```
-#### onItemLongPress
+#### `onItemLongPress`
-Fires when a conversation row is long-pressed. Useful for showing context menus or custom actions.
+Fires when a conversation row is long-pressed. By default shows a delete overlay (when `deleteConversationOptionVisibility` is true).
```dart
CometChatConversations(
onItemLongPress: (conversation) {
- // Show custom context menu
+ // Custom long press behavior
},
)
```
-#### onSelection
+#### `onBack`
-Fires when conversations are selected in multi-select mode. Requires `selectionMode` to be set.
+Fires when the user presses the back button in the app bar.
```dart
CometChatConversations(
- selectionMode: SelectionMode.multiple,
- onSelection: (selectedList) {
- print("Selected ${selectedList?.length ?? 0} conversations");
+ onBack: () {
+ Navigator.pop(context);
},
)
```
-#### onError
+#### `onSelection`
-Fires on internal errors (network failure, auth issue, SDK exception).
+Fires when conversations are selected/deselected in multi-select mode.
```dart
CometChatConversations(
- onError: (error) {
- print("CometChatConversations error: $error");
+ selectionMode: SelectionMode.multiple,
+ onSelection: (selectedConversations) {
+ // Handle selected conversations
},
)
```
-#### onBack
+#### `onError`
-Fires when the back button is pressed.
+Fires on internal errors (network failure, auth issue, SDK exception).
```dart
CometChatConversations(
- showBackButton: true,
- onBack: () {
- Navigator.pop(context);
+ onError: (e) {
+ debugPrint("Error: ${e.message}");
},
)
```
-#### onLoad
+#### `onLoad`
-Fires when the conversation list is successfully loaded.
+Fires when the list is successfully fetched and loaded.
```dart
CometChatConversations(
- onLoad: (list) {
- print("Loaded ${list.length} conversations");
+ onLoad: (conversations) {
+ debugPrint("Loaded ${conversations.length}");
},
)
```
-#### onEmpty
+#### `onEmpty`
-Fires when the conversation list is empty.
+Fires when the list is empty after loading.
```dart
CometChatConversations(
onEmpty: () {
- print("No conversations found");
+ debugPrint("No conversations");
},
)
```
+### Global Events
-### Global UI Events
-
-`CometChatConversationEvents` emits events subscribable from anywhere in the application. Add a listener in `initState` and remove it in `dispose`.
-
-| Event | Fires when | Payload |
-| --- | --- | --- |
-| `ccConversationDeleted` | A conversation is deleted from the list | `Conversation` |
-
-When to use: sync external UI with conversation state changes. For example, update an unread count badge in a tab bar when a conversation is deleted.
+The component emits events via `CometChatConversationEvents` that can be subscribed to from anywhere:
```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
class _YourScreenState extends State with CometChatConversationEventListener {
@override
@@ -551,7 +231,7 @@ class _YourScreenState extends State with CometChatConversationEvent
@override
void ccConversationDeleted(Conversation conversation) {
- print("Deleted: ${conversation.conversationId}");
+ // Handle conversation deleted
}
}
```
@@ -560,61 +240,51 @@ class _YourScreenState extends State with CometChatConversationEvent
### SDK Events (Real-Time, Automatic)
-The component listens to these SDK events internally. No manual attachment needed unless additional side effects are required.
+The component listens to these SDK events internally. No manual setup needed.
| SDK Listener | Internal behavior |
| --- | --- |
-| `onTextMessageReceived` / `onMediaMessageReceived` / `onCustomMessageReceived` | Moves conversation to top, updates last message preview and unread count |
-| `onTypingStarted` / `onTypingEnded` | Shows/hides typing indicator in the subtitle |
-| `onMessagesDelivered` / `onMessagesRead` | Updates receipt ticks (unless `receiptsVisibility: false`) |
-| `onUserOnline` / `onUserOffline` | Updates online/offline status dot (unless `usersStatusVisibility: false`) |
-| `onGroupMemberJoined` / `onGroupMemberLeft` / `onGroupMemberKicked` / `onGroupMemberBanned` / `onMemberAddedToGroup` | Updates group conversation metadata |
-
-Automatic: new messages, typing indicators, receipts, user presence, group membership changes.
+| `onTextMessageReceived` / `onMediaMessageReceived` / `onCustomMessageReceived` | Moves conversation to top, updates last message and unread count |
+| `onTypingStarted` / `onTypingEnded` | Shows/hides typing indicator in subtitle |
+| `onMessagesDelivered` / `onMessagesRead` | Updates receipt indicators |
+| `onUserOnline` / `onUserOffline` | Updates presence status dot |
+| `onGroupMemberJoined` / `onGroupMemberLeft` / `onGroupMemberKicked` / `onGroupMemberBanned` | Updates group conversation metadata |
+| Connection reconnected | Triggers silent refresh to sync missed messages |
---
+## Functionality
-## Custom View Slots
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `title` | `String?` | `null` | Custom app bar title |
+| `showBackButton` | `bool` | `false` | Toggle back button |
+| `hideAppbar` | `bool?` | `false` | Toggle app bar visibility |
+| `hideSearch` | `bool?` | `null` | Toggle search bar |
+| `searchReadOnly` | `bool` | `false` | Make search bar read-only (tap opens custom search) |
+| `deleteConversationOptionVisibility` | `bool?` | `true` | Show delete option on long press |
+| `groupTypeVisibility` | `bool?` | `true` | Show group type icon on avatar |
+| `usersStatusVisibility` | `bool?` | `true` | Show online/offline status indicator |
+| `receiptsVisibility` | `bool?` | `true` | Show message receipts |
+| `disableSoundForMessages` | `bool` | `false` | Disable message sounds |
+| `customSoundForMessages` | `String?` | `null` | Custom notification sound asset path |
+| `selectionMode` | `SelectionMode?` | `null` | Enable selection mode (`single` or `multiple`) |
-Each slot replaces a section of the default UI. Slots that accept a conversation parameter receive the `Conversation` object for that row.
+---
-| Slot | Signature | Replaces |
-| --- | --- | --- |
-| `listItemView` | `Widget Function(Conversation)` | Entire list item row |
-| `leadingView` | `Widget? Function(BuildContext, Conversation)` | Avatar / left section |
-| `titleView` | `Widget? Function(BuildContext, Conversation)` | Name / title text |
-| `subtitleView` | `Widget? Function(BuildContext, Conversation)` | Last message preview |
-| `trailingView` | `Widget? Function(Conversation)` | Timestamp / badge / right section |
-| `loadingStateView` | `WidgetBuilder` | Loading spinner |
-| `emptyStateView` | `WidgetBuilder` | Empty state |
-| `errorStateView` | `WidgetBuilder` | Error state |
-| `setOptions` | `List? Function(Conversation, Controller, BuildContext)` | Context menu actions (replaces default) |
-| `addOptions` | `List? Function(Conversation, Controller, BuildContext)` | Context menu actions (adds to default) |
-
-### listItemView
+## Custom View Slots
-Replace the entire list item row.
+### Leading View
-
-
-
+Replace the avatar / left section.
```dart
CometChatConversations(
- listItemView: (conversation) {
- final entity = conversation.conversationWith;
- final name = entity is User ? entity.name : (entity as Group).name;
-
- return CometChatListItem(
- avatarName: name,
- avatarURL: entity is User ? entity.avatar : (entity as Group).icon,
- title: name,
- avatarStyle: CometChatAvatarStyle(
- borderRadius: BorderRadius.circular(8),
- ),
+ leadingView: (context, conversation) {
+ return CircleAvatar(
+ child: Text(conversation.conversationWith?.name?[0] ?? ""),
);
},
)
@@ -622,342 +292,133 @@ CometChatConversations(
-For a more complete custom list item with status indicator and date:
+### Title View
+
+Replace the name / title text.
```dart
-Widget getCustomListItem(Conversation conversation, BuildContext context) {
- User? conversationWithUser;
- Group? conversationWithGroup;
-
- if (conversation.conversationWith is User) {
- conversationWithUser = conversation.conversationWith as User;
- } else {
- conversationWithGroup = conversation.conversationWith as Group;
- }
-
- // Get status indicator
- StatusIndicatorUtils statusIndicatorUtils = StatusIndicatorUtils.getStatusIndicatorFromParams(
- context: context,
- user: conversationWithUser,
- group: conversationWithGroup,
- onlineStatusIndicatorColor: Color(0xFF09C26F),
- );
-
- // Build tail view with date
- final lastMessageTime = conversation.lastMessage?.sentAt ?? DateTime.now();
- Widget tail = CometChatDate(
- date: lastMessageTime,
- padding: EdgeInsets.zero,
- style: CometChatDateStyle(
- backgroundColor: Colors.transparent,
- textStyle: TextStyle(color: Color(0xFF727272), fontSize: 12),
- border: Border.all(width: 0, color: Colors.transparent),
- ),
- pattern: DateTimePattern.dayDateTimeFormat,
- );
-
- return CometChatListItem(
- avatarHeight: 48,
- avatarWidth: 48,
- id: conversation.conversationId,
- avatarName: conversationWithUser?.name ?? conversationWithGroup?.name,
- avatarURL: conversationWithUser?.avatar ?? conversationWithGroup?.icon,
- avatarStyle: CometChatAvatarStyle(
- borderRadius: BorderRadius.circular(8),
- backgroundColor: Color(0xFFAA9EE8),
- ),
- title: conversationWithUser?.name ?? conversationWithGroup?.name,
- tailView: tail,
- statusIndicatorColor: statusIndicatorUtils.statusIndicatorColor,
- statusIndicatorIcon: statusIndicatorUtils.icon,
- statusIndicatorStyle: CometChatStatusIndicatorStyle(
- border: Border.all(width: 2, color: Colors.white),
- ),
- hideSeparator: true,
- style: ListItemStyle(
- background: Colors.transparent,
- titleStyle: TextStyle(
- overflow: TextOverflow.ellipsis,
- fontSize: 16,
- fontWeight: FontWeight.w500,
- color: Color(0xFF141414),
- ),
- padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
- ),
- );
-}
-
-// Usage:
CometChatConversations(
- listItemView: (conversation) => getCustomListItem(conversation, context),
+ titleView: (context, conversation) {
+ return Text(
+ conversation.conversationWith?.name ?? "",
+ style: TextStyle(fontWeight: FontWeight.bold),
+ );
+ },
)
```
-### leadingView
+### Subtitle View
-Replace the avatar / left section. Typing-aware avatar example.
-
-
-
-
+Replace the last message preview.
```dart
-// In your StatefulWidget, use the MessageListener mixin:
-class _ConversationsScreenState extends State with MessageListener {
- Map typingMap = {};
-
- @override
- void initState() {
- super.initState();
- CometChat.addMessageListener("typing_listener", this);
- }
-
- @override
- void dispose() {
- CometChat.removeMessageListener("typing_listener");
- super.dispose();
- }
-
- @override
- void onTypingStarted(TypingIndicator typingIndicator) {
- setTypingIndicator(typingIndicator, true);
- }
-
- @override
- void onTypingEnded(TypingIndicator typingIndicator) {
- setTypingIndicator(typingIndicator, false);
- }
-
- void setTypingIndicator(TypingIndicator typingIndicator, bool isTypingStarted) {
- final id = typingIndicator.receiverType == ReceiverTypeConstants.user
- ? typingIndicator.sender.uid
- : typingIndicator.receiverId;
-
- setState(() {
- if (isTypingStarted) {
- typingMap[id] = typingIndicator;
- } else {
- typingMap.remove(id);
- }
- });
- }
-
- @override
- Widget build(BuildContext context) {
- return CometChatConversations(
- leadingView: (context, conversation) {
- final entity = conversation.conversationWith;
- final id = entity is User ? entity.uid : (entity as Group).guid;
-
- if (typingMap.containsKey(id)) {
- return Container(
- decoration: BoxDecoration(
- border: Border.all(color: Color(0xFFF76808), width: 2),
- borderRadius: BorderRadius.circular(8),
- ),
- child: Image.asset("assets/typing_icon.png", height: 40, width: 40),
- );
- }
- return null; // Use default avatar
- },
- );
- }
-}
+CometChatConversations(
+ subtitleView: (context, conversation) {
+ final msg = conversation.lastMessage;
+ if (msg is TextMessage) {
+ return Text(msg.text, maxLines: 1, overflow: TextOverflow.ellipsis);
+ }
+ return Text("New conversation");
+ },
+)
```
+### Trailing View
-### titleView
-
-Replace the name / title text. Inline user status example.
-
-
-
-
+Replace the timestamp / badge / right section.
```dart
CometChatConversations(
- titleView: (context, conversation) {
- final entity = conversation.conversationWith;
- final name = entity is User ? entity.name : (entity as Group).name;
- final statusMessage = entity is User ? entity.statusMessage : null;
-
- return Row(
- children: [
- Text(name ?? "", style: TextStyle(fontWeight: FontWeight.w500)),
- if (statusMessage != null)
- Text(" · $statusMessage", style: TextStyle(color: Color(0xFF6852D6))),
- ],
- );
+ trailingView: (conversation) {
+ if (conversation.unreadMessageCount > 0) {
+ return Badge(label: Text("${conversation.unreadMessageCount}"));
+ }
+ return null;
},
)
```
-### subtitleView
+### List Item View
-Replace the last message preview text.
-
-
-
-
+Replace the entire list item row.
```dart
CometChatConversations(
- subtitleView: (context, conversation) {
- final entity = conversation.conversationWith;
- String subtitle;
-
- if (entity is User) {
- final dateTime = entity.lastActiveAt ?? DateTime.now();
- subtitle = "Last Active: ${DateFormat('dd/MM/yyyy, HH:mm').format(dateTime)}";
- } else {
- final dateTime = (entity as Group).createdAt ?? DateTime.now();
- subtitle = "Created: ${DateFormat('dd/MM/yyyy, HH:mm').format(dateTime)}";
- }
-
- return Text(subtitle, style: TextStyle(color: Color(0xFF727272), fontSize: 14));
+ listItemView: (conversation) {
+ return ListTile(
+ leading: CircleAvatar(child: Text(conversation.conversationWith?.name?[0] ?? "")),
+ title: Text(conversation.conversationWith?.name ?? ""),
+ subtitle: Text("Custom item"),
+ );
},
)
```
-### trailingView
-
-Replace the timestamp / badge / right section. Relative time badge example.
-
-
-
-
+### State Views
```dart
CometChatConversations(
- trailingView: (conversation) {
- final timestamp = conversation.updatedAt?.millisecondsSinceEpoch ?? 0;
- final now = DateTime.now();
- final lastSeen = DateTime.fromMillisecondsSinceEpoch(timestamp * 1000);
- final diffInMinutes = now.difference(lastSeen).inMinutes;
- final diffInHours = now.difference(lastSeen).inHours;
-
- String timeText;
- String label;
- Color cardColor;
-
- if (diffInMinutes < 60) {
- timeText = "$diffInMinutes";
- label = "Min ago";
- cardColor = Color(0x666852D6);
- } else if (diffInHours < 10) {
- timeText = "$diffInHours";
- label = "Hr ago";
- cardColor = Color(0x66FFAB00);
- } else {
- timeText = "$diffInHours";
- label = "Hr ago";
- cardColor = Color(0x66F44649);
- }
-
- return Card(
- color: cardColor,
- child: Padding(
- padding: EdgeInsets.all(4),
- child: Column(
- children: [
- Text(timeText, style: TextStyle(fontWeight: FontWeight.bold)),
- Text(label, style: TextStyle(fontSize: 12)),
- ],
- ),
- ),
- );
- },
+ emptyStateView: (context) => Center(child: Text("No conversations yet")),
+ errorStateView: (context) => Center(child: Text("Something went wrong")),
+ loadingStateView: (context) => Center(child: CircularProgressIndicator()),
)
```
+---
-### setOptions
-
-Replace the context menu / long-press actions on each conversation item.
-
-
-
-
+## Menu Options
```dart
+// Replace all options
CometChatConversations(
- setOptions: (conversation, controller, context) {
+ setOptions: (conversation, bloc, context) {
return [
CometChatOption(
id: "delete",
- title: "Delete",
icon: AssetConstants.delete,
+ title: "Delete",
onClick: () {
- // Delete conversation
+ bloc.add(DeleteConversation(conversation.conversationId!));
},
),
];
},
)
-```
-
-
-
-### addOptions
-
-Add to the existing context menu actions without removing defaults.
-
-
-
-
-
-
-```dart
+// Append to defaults
CometChatConversations(
- addOptions: (conversation, controller, context) {
+ addOptions: (conversation, bloc, context) {
return [
CometChatOption(
id: "archive",
- title: "Archive",
iconWidget: Icon(Icons.archive_outlined),
+ title: "Archive",
onClick: () {
// Archive conversation
},
),
- CometChatOption(
- id: "pin",
- title: "Pin",
- iconWidget: Icon(Icons.push_pin_outlined),
- onClick: () {
- // Pin conversation
- },
- ),
- CometChatOption(
- id: "mark_unread",
- title: "Mark as unread",
- iconWidget: Icon(Icons.mark_chat_unread_outlined),
- onClick: () {
- // Mark conversation as unread
- },
- ),
];
},
)
@@ -965,1201 +426,197 @@ CometChatConversations(
-### appBarOptions
+---
-Add custom widgets to the app bar.
+## Common Patterns
-
-
-
+### Minimal list — hide all chrome
```dart
CometChatConversations(
- showBackButton: false,
- appBarOptions: [
- PopupMenuButton(
- icon: CometChatAvatar(
- image: CometChatUIKit.loggedInUser?.avatar,
- name: CometChatUIKit.loggedInUser?.name,
- ),
- itemBuilder: (context) => [
- PopupMenuItem(value: 'create', child: Text("Create Conversation")),
- PopupMenuItem(value: 'logout', child: Text("Logout")),
- ],
- onSelected: (value) {
- // Handle menu selection
- },
- ),
- ],
+ hideAppbar: true,
+ hideSearch: true,
)
```
-For a more complete popup menu with styling:
+### Users-only conversations
```dart
CometChatConversations(
- showBackButton: false,
- appBarOptions: [
- PopupMenuButton(
- shape: RoundedRectangleBorder(
- borderRadius: BorderRadius.circular(8),
- side: BorderSide(color: Color(0xFFF5F5F5), width: 1),
- ),
- color: Colors.white,
- elevation: 4,
- menuPadding: EdgeInsets.zero,
- padding: EdgeInsets.zero,
- icon: Padding(
- padding: EdgeInsets.only(left: 12, right: 16),
- child: CometChatAvatar(
- width: 40,
- height: 40,
- image: CometChatUIKit.loggedInUser?.avatar,
- name: CometChatUIKit.loggedInUser?.name,
- ),
- ),
- onSelected: (value) {
- switch (value) {
- case '/create':
- // Navigate to create conversation
- break;
- case '/logout':
- CometChatUIKit.logout();
- break;
- }
- },
- position: PopupMenuPosition.under,
- itemBuilder: (BuildContext context) {
- return [
- PopupMenuItem(
- height: 44,
- padding: EdgeInsets.all(16),
- value: '/create',
- child: Row(
- children: [
- Padding(
- padding: EdgeInsets.only(right: 8),
- child: Icon(Icons.add_comment_outlined, color: Color(0xFFA1A1A1), size: 24),
- ),
- Text("Create Conversation", style: TextStyle(fontSize: 14, color: Color(0xFF141414))),
- ],
- ),
- ),
- PopupMenuItem(
- height: 44,
- padding: EdgeInsets.all(16),
- value: '/name',
- child: Row(
- children: [
- Padding(
- padding: EdgeInsets.only(right: 8),
- child: Icon(Icons.account_circle_outlined, color: Color(0xFFA1A1A1), size: 24),
- ),
- Text(CometChatUIKit.loggedInUser?.name ?? "", style: TextStyle(fontSize: 14, color: Color(0xFF141414))),
- ],
- ),
- ),
- PopupMenuItem(
- height: 44,
- padding: EdgeInsets.all(16),
- value: '/logout',
- child: Row(
- children: [
- Padding(
- padding: EdgeInsets.only(right: 8),
- child: Icon(Icons.logout, color: Colors.red, size: 24),
- ),
- Text("Logout", style: TextStyle(fontSize: 14, color: Colors.red)),
- ],
- ),
- ),
- ];
- },
- ),
- ],
- onItemTap: (conversation) {
- User? user;
- Group? group;
- if (conversation.conversationWith is User) {
- user = conversation.conversationWith as User;
- } else {
- group = conversation.conversationWith as Group;
- }
- // Navigate to messages
- },
+ conversationsRequestBuilder: ConversationsRequestBuilder()
+ ..conversationType = "user",
)
```
----
-
-
-## Styling
-
-Set `CometChatConversationsStyle` to customize the appearance.
+### Custom date formatting
```dart
CometChatConversations(
- conversationsStyle: CometChatConversationsStyle(
- backgroundColor: Colors.white,
- titleTextColor: Color(0xFF141414),
- avatarStyle: CometChatAvatarStyle(
- borderRadius: BorderRadius.circular(8),
- backgroundColor: Color(0xFFFBAA75),
- ),
- badgeStyle: CometChatBadgeStyle(
- backgroundColor: Color(0xFFF76808),
- ),
- ),
+ datePattern: (conversation) {
+ final timestamp = conversation.updatedAt;
+ return DateFormat('MMM d').format(DateTime.fromMillisecondsSinceEpoch(timestamp! * 1000));
+ },
)
```
-
-
-
-
-### Style Properties
-
-| Property | Type | Description |
-| --- | --- | --- |
-| `backgroundColor` | `Color` | Background color of the component |
-| `border` | `Border` | Border for the widget |
-| `borderRadius` | `BorderRadiusGeometry` | Border radius for the widget |
-| `titleTextColor` | `Color` | Color of the header title |
-| `titleTextStyle` | `TextStyle` | Style for the header title |
-| `backIconColor` | `Color` | Back button icon color |
-| `searchBackgroundColor` | `Color` | Background color of search box |
-| `searchBorder` | `BorderSide` | Border for search box |
-| `searchBorderRadius` | `BorderRadius` | Border radius for search box |
-| `searchPlaceHolderTextColor` | `Color` | Placeholder text color in search |
-| `searchPlaceHolderTextStyle` | `TextStyle` | Placeholder text style in search |
-| `searchIconColor` | `Color` | Search icon color |
-| `separatorColor` | `Color` | Color of list item separators |
-| `separatorHeight` | `double` | Height of list item separators |
-| `emptyStateTextColor` | `Color` | Text color for empty state title |
-| `emptyStateTextStyle` | `TextStyle` | Text style for empty state title |
-| `emptyStateSubTitleTextColor` | `Color` | Text color for empty state subtitle |
-| `emptyStateSubTitleTextStyle` | `TextStyle` | Text style for empty state subtitle |
-| `errorStateTextColor` | `Color` | Text color for error state title |
-| `errorStateTextStyle` | `TextStyle` | Text style for error state title |
-| `errorStateSubTitleTextColor` | `Color` | Text color for error state subtitle |
-| `errorStateSubTitleTextStyle` | `TextStyle` | Text style for error state subtitle |
-| `itemTitleTextColor` | `Color` | Text color for conversation item title |
-| `itemTitleTextStyle` | `TextStyle` | Text style for conversation item title |
-| `itemSubtitleTextColor` | `Color` | Text color for conversation item subtitle |
-| `itemSubtitleTextStyle` | `TextStyle` | Text style for conversation item subtitle |
-| `messageTypeIconColor` | `Color` | Icon color for message type indicators |
-| `avatarStyle` | `CometChatAvatarStyle` | Style for avatars |
-| `badgeStyle` | `CometChatBadgeStyle` | Style for unread badges |
-| `receiptStyle` | `CometChatMessageReceiptStyle` | Style for message receipts |
-| `statusIndicatorStyle` | `CometChatStatusIndicatorStyle` | Style for online status indicator |
-| `dateStyle` | `CometChatDateStyle` | Style for date/time display |
-| `typingIndicatorStyle` | `CometChatTypingIndicatorStyle` | Style for typing indicator |
-| `mentionsStyle` | `CometChatMentionsStyle` | Style for @mentions |
-| `deleteConversationDialogStyle` | `CometChatConfirmDialogStyle` | Style for delete confirmation dialog |
-| `privateGroupIconBackground` | `Color` | Background color for private group icon |
-| `protectedGroupIconBackground` | `Color` | Background color for protected group icon |
-| `submitIconColor` | `Color` | Color for submit icon in selection mode |
-| `checkBoxBackgroundColor` | `Color` | Background color for selection checkbox |
-| `checkBoxCheckedBackgroundColor` | `Color` | Background color when checkbox is checked |
-| `checkBoxBorder` | `BorderSide` | Border for selection checkbox |
-| `checkBoxBorderRadius` | `BorderRadiusGeometry` | Border radius for selection checkbox |
-| `checkboxSelectedIconColor` | `Color` | Icon color when checkbox is selected |
-| `listItemSelectedBackgroundColor` | `Color` | Background color for selected list items |
-
---
-## Common Patterns
+## Advanced
-### Custom empty state with CTA
+### BLoC Access
+
+Provide a custom `ConversationsBloc` to override behavior:
```dart
-import 'package:flutter/material.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
CometChatConversations(
- emptyStateView: (context) {
- return Center(
- child: Column(
- mainAxisAlignment: MainAxisAlignment.center,
- children: [
- Text("No conversations yet"),
- SizedBox(height: 16),
- ElevatedButton(
- onPressed: () {
- // Navigate to contacts
- },
- child: Text("Start a conversation"),
- ),
- ],
- ),
- );
- },
+ conversationsBloc: CustomConversationsBloc(),
)
```
-### Hide all chrome — minimal list
+### Extending ConversationsBloc
+
+`ConversationsBloc` uses the `ListBase` mixin with override hooks for custom list behavior:
```dart
-import 'package:flutter/material.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+class CustomConversationsBloc extends ConversationsBloc {
+ @override
+ void onItemAdded(Conversation item, List updatedList) {
+ // Custom sorting — pinned conversations first
+ final sorted = _sortWithPinnedFirst(updatedList);
+ super.onItemAdded(item, sorted);
+ }
-CometChatConversations(
- receiptsVisibility: false,
- usersStatusVisibility: false,
- groupTypeVisibility: false,
- deleteConversationOptionVisibility: false,
- hideAppbar: true,
-)
+ @override
+ void onListReplaced(List previousList, List newList) {
+ // Filter out blocked users on every list refresh
+ final filtered = newList.where((c) => !isBlocked(c)).toList();
+ super.onListReplaced(previousList, filtered);
+ }
+}
```
+For `ListBase` override hooks (`onItemAdded`, `onItemRemoved`, `onItemUpdated`, `onListCleared`, `onListReplaced`), see [BLoC & Data — ListBase Hooks](/ui-kit/flutter/customization-bloc-data#listbase-hooks).
-### Conversations with search
+### Public BLoC Events
-
-
-```dart
-import 'package:flutter/material.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+| Event | Description |
+| --- | --- |
+| `LoadConversations({silent})` | Load initial conversations. `silent: true` keeps existing list visible during refresh. |
+| `LoadMoreConversations()` | Load next page (pagination) |
+| `RefreshConversations()` | Refresh the list |
+| `DeleteConversation(conversationId)` | Delete via SDK and remove from list |
+| `RemoveConversation(conversationId)` | Remove from list without SDK call |
+| `SetActiveConversation(conversationId)` | Mark as active (suppresses unread count) |
+| `UpdateConversation(conversationId, updatedConversation)` | Update with modified data |
+| `ResetUnreadCount(conversationId)` | Reset unread count to 0 |
-CometChatConversations(
- hideSearch: false,
- onSearchTap: () {
- // Handle search tap - navigate to search screen
- },
-)
-```
-
-
+### Public BLoC Methods
-### Custom date pattern
+| Method | Returns | Description |
+| --- | --- | --- |
+| `getTypingNotifier(conversationId)` | `ValueNotifier>` | Per-conversation typing notifier for isolated rebuilds |
+| `getTypingIndicators(conversationId)` | `List` | Current typing indicators for a conversation |
+
+### Route Observer
-
-
-
+Pass a `RouteObserver` to freeze rebuilds when another screen is pushed on top (prevents expensive rebuilds during keyboard animation):
```dart
-import 'package:flutter/material.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:intl/intl.dart';
+// In your app
+final RouteObserver> routeObserver = RouteObserver>();
+
+MaterialApp(
+ navigatorObservers: [routeObserver],
+)
+// Pass to conversations
CometChatConversations(
- datePattern: (conversation) {
- final date = conversation.lastMessage?.sentAt ?? DateTime.now();
- return DateFormat('d MMM, hh:mm a').format(date);
- },
+ routeObserver: routeObserver,
)
```
-### Text formatters
-
-Configure text formatters for the conversation subtitle. See [CometChatMentionsFormatter](/ui-kit/flutter/mentions-formatter-guide) for mention formatting.
+---
-
-
-
+## Style
```dart
-import 'package:flutter/material.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
CometChatConversations(
- textFormatters: [
- CometChatMentionsFormatter(
- style: CometChatMentionsStyle(
- mentionSelfTextBackgroundColor: Color(0xFFF76808),
- mentionTextBackgroundColor: Colors.white,
- mentionTextColor: Colors.black,
- mentionSelfTextColor: Colors.white,
- ),
+ conversationsStyle: CometChatConversationsStyle(
+ backgroundColor: Colors.white,
+ avatarStyle: CometChatAvatarStyle(
+ borderRadius: BorderRadius.circular(8),
+ backgroundColor: Color(0xFFFBAA75),
+ ),
+ badgeStyle: CometChatBadgeStyle(
+ backgroundColor: Color(0xFFF76808),
),
- ],
+ receiptStyle: CometChatMessageReceiptStyle(),
+ typingIndicatorStyle: CometChatTypingIndicatorStyle(),
+ dateStyle: CometChatDateStyle(),
+ mentionsStyle: CometChatMentionsStyle(),
+ deleteConversationDialogStyle: CometChatConfirmDialogStyle(),
+ ),
)
```
----
-
-
-## Accessibility
-
-The component renders a scrollable list of interactive items. Each conversation row is tappable and responds to both tap and long-press gestures. The context menu (options) is accessible via long-press. The unread badge count is exposed as text content. Avatar images include the conversation name for accessibility.
+### Style Properties
-For screen readers, the conversation list is rendered as a semantic list using Flutter's built-in accessibility features. Status indicators (online/offline, group type icons) use visual icons — consider providing custom `Semantics` widgets via `leadingView` if screen reader descriptions are needed for these visual indicators.
+| Property | Description |
+| --- | --- |
+| `backgroundColor` | List background color |
+| `avatarStyle` | Avatar appearance |
+| `badgeStyle` | Unread badge appearance |
+| `receiptStyle` | Read receipt icons |
+| `typingIndicatorStyle` | Typing indicator text |
+| `dateStyle` | Timestamp appearance |
+| `mentionsStyle` | Mention highlight style |
+| `deleteConversationDialogStyle` | Delete confirmation dialog |
-When using selection mode, checkboxes are rendered with proper accessibility labels. The component respects system accessibility settings including text scaling and high contrast modes.
+See [Component Styling](/ui-kit/flutter/component-styling) for the full reference.
---
-
-## Props
-
-All props are optional. Sorted alphabetically.
-
-### activateSelection
-
-Controls when selection mode activates.
-
-| | |
-| --- | --- |
-| Type | `ActivateSelection` |
-| Default | `null` |
-
-Values: `ActivateSelection.onClick`, `ActivateSelection.onLongClick`
-
----
-
-### addOptions
-
-Adds to the current list of actions available on long press.
-
-| | |
-| --- | --- |
-| Type | `List? Function(Conversation, CometChatConversationsController, BuildContext)` |
-| Default | `null` |
-
----
-
-### appBarOptions
-
-List of widgets to display in the app bar.
-
-| | |
-| --- | --- |
-| Type | `List` |
-| Default | `null` |
-
----
-
-### backButton
-
-Custom back button widget.
-
-| | |
-| --- | --- |
-| Type | `Widget` |
-| Default | Built-in back arrow |
-
----
-
-### conversationsRequestBuilder
-
-Controls which conversations load and in what order.
-
-| | |
-| --- | --- |
-| Type | `ConversationsRequestBuilder` |
-| Default | SDK default (30 per page) |
-
-Pass the builder instance, not the result of `.build()`.
-
----
-
-### conversationsProtocol
-
-Custom protocol for fetching conversations.
-
-| | |
-| --- | --- |
-| Type | `ConversationsBuilderProtocol` |
-| Default | `null` |
-
-Use this for advanced customization of how conversations are fetched.
-
----
-
-### conversationsStyle
-
-Style configuration for the component.
-
-| | |
-| --- | --- |
-| Type | `CometChatConversationsStyle` |
-| Default | `CometChatConversationsStyle()` |
-
----
-
-### customSoundForMessages
-
-Path to a custom audio file for incoming message notifications.
-
-| | |
-| --- | --- |
-| Type | `String` |
-| Default | Built-in sound |
-
----
-
-### datePattern
-
-Custom date format function for conversation timestamps.
-
-| | |
-| --- | --- |
-| Type | `String Function(Conversation)` |
-| Default | Built-in date formatting |
-
----
-
-### deleteConversationOptionVisibility
-
-Controls visibility of delete option in context menu.
-
-| | |
-| --- | --- |
-| Type | `bool` |
-| Default | `true` |
-
----
-
-### deliveredIcon
-
-Custom icon for delivered message receipts.
-
-| | |
-| --- | --- |
-| Type | `Widget` |
-| Default | Built-in delivered icon |
-
----
-
-### disableSoundForMessages
-
-Disables notification sound for incoming messages.
-
-| | |
-| --- | --- |
-| Type | `bool` |
-| Default | `false` |
-
----
-
-
-### emptyStateView
-
-Custom widget displayed when there are no conversations.
-
-| | |
-| --- | --- |
-| Type | `WidgetBuilder` |
-| Default | Built-in empty state |
-
----
-
-### errorStateView
-
-Custom widget displayed when an error occurs.
-
-| | |
-| --- | --- |
-| Type | `WidgetBuilder` |
-| Default | Built-in error state |
-
-Hidden when `hideError: true`.
-
----
-
-### groupTypeVisibility
-
-Controls visibility of group type icon (public/private/password).
-
-| | |
-| --- | --- |
-| Type | `bool` |
-| Default | `true` |
-
----
-
-### hideAppbar
-
-Hides the entire app bar.
-
-| | |
-| --- | --- |
-| Type | `bool` |
-| Default | `false` |
-
----
-
-### hideError
-
-Hides the default and custom error views.
-
-| | |
-| --- | --- |
-| Type | `bool` |
-| Default | `false` |
-
----
-
-### hideSearch
-
-Hides the search bar in the app bar.
-
-| | |
-| --- | --- |
-| Type | `bool` |
-| Default | `false` |
-
----
-
-### leadingView
-
-Custom renderer for the avatar / left section.
-
-| | |
-| --- | --- |
-| Type | `Widget? Function(BuildContext, Conversation)` |
-| Default | Built-in avatar |
-
-Return `null` to use the default avatar.
-
----
-
-### listItemView
-
-Custom renderer for the entire list item row.
-
-| | |
-| --- | --- |
-| Type | `Widget Function(Conversation)` |
-| Default | Built-in list item |
-
----
-
-### loadingStateView
-
-Custom widget displayed during loading state.
-
-| | |
-| --- | --- |
-| Type | `WidgetBuilder` |
-| Default | Built-in shimmer |
-
----
-
-### mentionAllLabel
-
-Custom label for group mentions (@channel, @everyone).
-
-| | |
-| --- | --- |
-| Type | `String` |
-| Default | `null` |
-
----
-
-### mentionAllLabelId
-
-Custom label ID for group mentions.
-
-| | |
-| --- | --- |
-| Type | `String` |
-| Default | `null` |
-
----
-
-
-### onBack
-
-Callback fired when the back button is pressed.
-
-| | |
-| --- | --- |
-| Type | `VoidCallback` |
-| Default | `null` |
-
----
-
-### onEmpty
-
-Callback fired when the conversation list is empty.
-
-| | |
-| --- | --- |
-| Type | `OnEmpty` |
-| Default | `null` |
-
----
-
-### onError
-
-Callback fired when the component encounters an error.
-
-| | |
-| --- | --- |
-| Type | `OnError` |
-| Default | `null` |
-
----
-
-### onItemLongPress
-
-Callback fired when a conversation row is long-pressed.
-
-| | |
-| --- | --- |
-| Type | `Function(Conversation)` |
-| Default | `null` |
-
----
-
-### onItemTap
-
-Callback fired when a conversation row is tapped.
-
-| | |
-| --- | --- |
-| Type | `Function(Conversation)` |
-| Default | `null` |
-
----
-
-### onLoad
-
-Callback fired when the conversation list is loaded.
-
-| | |
-| --- | --- |
-| Type | `OnLoad` |
-| Default | `null` |
-
----
-
-### onSearchTap
-
-Callback fired when the search box is tapped.
-
-| | |
-| --- | --- |
-| Type | `GestureTapCallback` |
-| Default | `null` |
-
-Requires `searchReadOnly: true` to work properly.
-
----
-
-### onSelection
-
-Callback fired when conversations are selected/deselected.
-
-| | |
-| --- | --- |
-| Type | `Function(List?)` |
-| Default | `null` |
-
-Requires `selectionMode` to be set.
-
----
-
-### privateGroupIcon
-
-Custom icon for private group indicator.
-
-| | |
-| --- | --- |
-| Type | `Widget` |
-| Default | Built-in lock icon |
-
----
-
-### protectedGroupIcon
-
-Custom icon for password-protected group indicator.
-
-| | |
-| --- | --- |
-| Type | `Widget` |
-| Default | Built-in lock icon |
-
----
-
-### readIcon
-
-Custom icon for read message receipts.
-
-| | |
-| --- | --- |
-| Type | `Widget` |
-| Default | Built-in read icon |
-
----
-
-### receiptsVisibility
-
-Controls visibility of message read/delivery receipts.
-
-| | |
-| --- | --- |
-| Type | `bool` |
-| Default | `true` |
-
----
-
-
-### scrollController
-
-Custom scroll controller for the list.
-
-| | |
-| --- | --- |
-| Type | `ScrollController` |
-| Default | `null` |
-
----
-
-### searchBoxIcon
-
-Custom prefix icon for the search box.
-
-| | |
-| --- | --- |
-| Type | `Widget` |
-| Default | Built-in search icon |
-
----
-
-### searchContentPadding
-
-Padding for search box content.
-
-| | |
-| --- | --- |
-| Type | `EdgeInsetsGeometry` |
-| Default | `null` |
-
----
-
-### searchPadding
-
-Padding for the search box.
-
-| | |
-| --- | --- |
-| Type | `EdgeInsetsGeometry` |
-| Default | `null` |
-
----
-
-### searchReadOnly
-
-Makes the search box read-only (tap only).
-
-| | |
-| --- | --- |
-| Type | `bool` |
-| Default | `false` |
-
----
-
-### selectionMode
-
-Enables single or multi-select mode.
-
-| | |
-| --- | --- |
-| Type | `SelectionMode` |
-| Default | `null` |
-
-Values: `SelectionMode.single`, `SelectionMode.multiple`, `SelectionMode.none`
-
-Must pair with `onSelection` to capture selections.
-
----
-
-### sentIcon
-
-Custom icon for sent message receipts.
-
-| | |
-| --- | --- |
-| Type | `Widget` |
-| Default | Built-in sent icon |
-
----
-
-### setOptions
-
-Replaces the list of actions available on long press.
-
-| | |
-| --- | --- |
-| Type | `List? Function(Conversation, CometChatConversationsController, BuildContext)` |
-| Default | `null` |
-
----
-
-### showBackButton
-
-Shows the back button in the app bar.
-
-| | |
-| --- | --- |
-| Type | `bool` |
-| Default | `false` |
-
----
-
-### subtitleView
-
-Custom renderer for the last message preview.
-
-| | |
-| --- | --- |
-| Type | `Widget? Function(BuildContext, Conversation)` |
-| Default | Built-in subtitle |
-
----
-
-### textFormatters
-
-Custom text formatters for the conversation subtitle.
-
-| | |
-| --- | --- |
-| Type | `List` |
-| Default | Default formatters from data source |
-
-See [CometChatMentionsFormatter](/ui-kit/flutter/mentions-formatter-guide) for mention formatting.
-
----
-
-### title
-
-Custom title text for the app bar.
-
-| | |
-| --- | --- |
-| Type | `String` |
-| Default | "Chats" |
-
----
-
-### titleView
-
-Custom renderer for the name / title text.
-
-| | |
-| --- | --- |
-| Type | `Widget? Function(BuildContext, Conversation)` |
-| Default | Built-in title |
-
----
-
-### trailingView
-
-Custom renderer for the timestamp / badge / right section.
-
-| | |
-| --- | --- |
-| Type | `Widget? Function(Conversation)` |
-| Default | Built-in trailing view |
-
----
-
-### typingIndicatorText
-
-Custom text shown when a user is typing.
-
-| | |
-| --- | --- |
-| Type | `String` |
-| Default | "typing..." |
-
----
-
-### usersStatusVisibility
-
-Controls visibility of online/offline status indicator.
-
-| | |
-| --- | --- |
-| Type | `bool` |
-| Default | `true` |
-
----
-
-### avatarHeight
-
-Height for user/group avatars.
-
-| | |
-| --- | --- |
-| Type | `double` |
-| Default | `null` |
-
----
-
-### avatarWidth
-
-Width for user/group avatars.
-
-| | |
-| --- | --- |
-| Type | `double` |
-| Default | `null` |
-
----
-
-### avatarPadding
-
-Padding for user/group avatars.
-
-| | |
-| --- | --- |
-| Type | `EdgeInsetsGeometry` |
-| Default | `null` |
-
----
-
-### avatarMargin
-
-Margin for user/group avatars.
-
-| | |
-| --- | --- |
-| Type | `EdgeInsetsGeometry` |
-| Default | `null` |
-
----
-
-### badgeWidth
-
-Width for unread message badge.
-
-| | |
-| --- | --- |
-| Type | `double` |
-| Default | `null` |
-
----
-
-### badgeHeight
-
-Height for unread message badge.
-
-| | |
-| --- | --- |
-| Type | `double` |
-| Default | `null` |
-
----
-
-### badgePadding
-
-Padding for unread message badge.
-
-| | |
-| --- | --- |
-| Type | `EdgeInsetsGeometry` |
-| Default | `null` |
-
----
-
-### controllerTag
-
-Tag for controller management. When passed, parent is responsible for closing.
-
-| | |
-| --- | --- |
-| Type | `String` |
-| Default | `null` |
-
----
-
-### dateBackgroundIsTransparent
-
-Controls whether the date background is transparent.
-
-| | |
-| --- | --- |
-| Type | `bool` |
-| Default | `null` |
-
----
-
-### dateHeight
-
-Height for the conversation date display.
-
-| | |
-| --- | --- |
-| Type | `double` |
-| Default | `null` |
-
----
-
-### datePadding
-
-Padding for the conversation date display.
-
-| | |
-| --- | --- |
-| Type | `EdgeInsets` |
-| Default | `null` |
-
----
-
-### dateTimeFormatterCallback
-
-Callback for custom date and time formatting.
-
-| | |
-| --- | --- |
-| Type | `DateTimeFormatterCallback` |
-| Default | `null` |
-
----
-
-### dateWidth
-
-Width for the conversation date display.
-
-| | |
-| --- | --- |
-| Type | `double` |
-| Default | `null` |
-
----
-
-### listItemStyle
-
-Style configuration for list items.
-
-| | |
-| --- | --- |
-| Type | `ListItemStyle` |
-| Default | `null` |
-
----
-
-### searchContentPadding
-
-Padding for search box content.
-
-| | |
-| --- | --- |
-| Type | `EdgeInsetsGeometry` |
-| Default | `null` |
-
----
-
-### searchPadding
-
-Padding for the search box.
-
-| | |
-| --- | --- |
-| Type | `EdgeInsetsGeometry` |
-| Default | `null` |
-
----
-
-### statusIndicatorBorderRadius
-
-Border radius for the status indicator.
-
-| | |
-| --- | --- |
-| Type | `BorderRadiusGeometry` |
-| Default | `null` |
-
----
-
-### statusIndicatorHeight
-
-Height for the status indicator.
-
-| | |
-| --- | --- |
-| Type | `double` |
-| Default | `null` |
-
----
-
-### statusIndicatorWidth
-
-Width for the status indicator.
-
-| | |
-| --- | --- |
-| Type | `double` |
-| Default | `null` |
-
----
-
-### submitIcon
-
-Custom submit icon for selection mode.
-
-| | |
-| --- | --- |
-| Type | `Widget` |
-| Default | Built-in check icon |
-
----
-
-## Events
-
-| Event | Payload | Fires when |
-| --- | --- | --- |
-| `CometChatConversationEvents.ccConversationDeleted` | `Conversation` | Conversation deleted from list |
-| `CometChatConversationEvents.ccUpdateConversation` | `Conversation` | Conversation updated (last message change, metadata update) |
-
-Subscribe using `CometChatConversationEvents.addConversationListListener()` and unsubscribe with `removeConversationListListener()`.
-
----
-
-## Customization Matrix
-
-| What to change | Where | Property/API | Example |
-| --- | --- | --- | --- |
-| Override behavior on user interaction | Widget props | `on` callbacks | `onItemTap: (c) => setActive(c)` |
-| Filter which conversations appear | Widget props | `conversationsRequestBuilder` | `conversationsRequestBuilder: ConversationsRequestBuilder()..limit = 10` |
-| Toggle visibility of UI elements | Widget props | `Visibility` boolean props | `receiptsVisibility: false` |
-| Replace a section of the list item | Widget props | `View` render props | `listItemView: (conversation) => CustomWidget()` |
-| Change colors, fonts, spacing | Widget props | `conversationsStyle` | `conversationsStyle: CometChatConversationsStyle(backgroundColor: Colors.white)` |
-
----
+## Next Steps
-
- Display and select from a list of users
-
-
- Display and select from a list of groups
+
+ Browse and search available users
- Display messages in a conversation
+ Display messages for a conversation
+
+
+ Detailed styling reference
-
- Customize the look and feel of components
+
+ Customize message bubble structure
diff --git a/ui-kit/flutter/core-features.mdx b/ui-kit/flutter/core-features.mdx
index b94eb6f9d..5873829cf 100644
--- a/ui-kit/flutter/core-features.mdx
+++ b/ui-kit/flutter/core-features.mdx
@@ -1,278 +1,132 @@
---
title: "Core Features"
-sidebarTitle: "Core"
-description: "Comprehensive guide to CometChat's core messaging features including instant messaging, media sharing, read receipts, and more"
+description: "Review CometChat Flutter UI Kit core features for messaging, media sharing, receipts, presence, reactions, threads, and calls."
---
-
+## Overview
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_chat_uikit` |
-| Required setup | `CometChatUIKit.init(uiKitSettings: UIKitSettings)` then `CometChatUIKit.login(uid)` — must complete before rendering any component |
-| Core features | Instant Messaging, Media Sharing, Read Receipts, Mark as Unread, Typing Indicator, User Presence, Reactions, Mentions, Rich Text Formatting, Quoted Reply, Search, Threaded Conversations, Moderation, Report Message, Group Chat |
-| Key components | `CometChatConversations` → [Conversations](/ui-kit/flutter/conversations), `CometChatMessageList` → [Message List](/ui-kit/flutter/message-list), `CometChatMessageComposer` → [Message Composer](/ui-kit/flutter/message-composer), `CometChatMessageHeader` → [Message Header](/ui-kit/flutter/message-header), `CometChatUsers` → [Users](/ui-kit/flutter/users), `CometChatGroups` → [Groups](/ui-kit/flutter/groups), `CometChatGroupMembers` → [Group Members](/ui-kit/flutter/group-members) |
-
-
-
-The UI Kit comprises a variety of widgets, each designed to work seamlessly with one another to deliver a comprehensive and intuitive chat experience.
-
-Here's how different UI Kit widgets work together to achieve CometChat's Core features:
-
-***
+The UI Kit comprises a variety of widgets, each designed to work seamlessly with one another to deliver a comprehensive and intuitive chat experience. Here's how different UI Kit widgets work together to achieve CometChat's Core features:
## Instant Messaging
At the heart of CometChat's functionality is the ability to support real-time text messaging. Users can send and receive instant messages, fostering quick and efficient communication.
-
-
-
-
| Widgets | Functionality |
-| --- | --- |
-| [MessageComposer](/ui-kit/flutter/message-composer) | [MessageComposer](/ui-kit/flutter/message-composer) is a Widget that enables users to write and send a variety of messages. |
-| [MessageList](/ui-kit/flutter/message-list) | [MessageList](/ui-kit/flutter/message-list) is a Widget that renders a list of messages sent and messages received using [TextBubble](/ui-kit/flutter/message-bubble-styling#text-bubble). |
-
-***
+|---|---|
+| MessageComposer | Enables users to write and send a variety of messages. In V6, powered by `MessageComposerBloc` with rich text formatting support. |
+| MessageList | Renders a list of messages sent and received using TextBubble. In V6, powered by `MessageListBloc` with `diffutil_dart` for efficient updates. |
## Media Sharing
-Beyond text, CometChat allows users to share various media types within their conversations. This includes images, videos, audio files, and documents, enriching the chat experience and enabling more comprehensive communication.
-
-
-
-
+Beyond text, CometChat allows users to share various media types within their conversations — images, videos, audio files, and documents.
| Widgets | Functionality |
-| --- | --- |
-| [MessageComposer](/ui-kit/flutter/message-composer) | [MessageComposer](/ui-kit/flutter/message-composer) is a Widget that has ActionSheet, ActionSheet is a menu that appears over the context of the app, providing multiple options for sharing media files. |
-| [MessageList](/ui-kit/flutter/message-list) | [MessageList](/ui-kit/flutter/message-list) is a Widget that renders different Media Message bubbles like [Image Bubble](/ui-kit/flutter/message-bubble-styling#image-bubble), [File Bubble](/ui-kit/flutter/message-bubble-styling#file-bubble), [Audio Bubble](/ui-kit/flutter/message-bubble-styling#audio-bubble), [Video Bubble](/ui-kit/flutter/message-bubble-styling#video-bubble) |
-
-***
+|---|---|
+| MessageComposer | Has ActionSheet for sharing media files. V6 adds inline audio recorder and multi-attachment support (in progress). |
+| MessageList | Renders different Media Message bubbles like Image Bubble, File Bubble, Audio Bubble, Video Bubble. |
## Read Receipts
-CometChat's Read Receipts feature provides visibility into the message status, letting users know when a message has been delivered and read. This brings clarity to the communication and ensures users are informed about the status of their messages.
-
-
-
-
+CometChat's Read Receipts feature provides visibility into the message status, letting users know when a message has been delivered and read.
| Widgets | Functionality |
-| --- | --- |
-| [Conversations](/ui-kit/flutter/conversations) | [Conversations](/ui-kit/flutter/conversations) is a Widget that renders Conversations item List, Conversation item also displays the delivery status of the last message providing users with real-time updates on the status of their messages. |
-| [MessageList](/ui-kit/flutter/message-list) | [MessageList](/ui-kit/flutter/message-list) is a Widget that renders different types of Message bubbles, Read Receipt status is an integral part of all message bubbles, no matter the type, and provides real-time updates about the status of the message. |
-
-***
+|---|---|
+| Conversations | Displays the delivery status of the last message. |
+| MessageList | Read receipt status is an integral part of all message bubbles. |
+| MessageInformation | Provides transparency into the status of each sent message. |
## Mark As Unread
-Mark as Unread feature allows users to manually mark messages as unread, helping them keep track of important conversations they want to revisit later. When enabled, the message list can automatically start from the first unread message, making it easier to pick up where you left off.
-
-
-
-
+Mark as Unread feature allows users to manually mark messages as unread, helping them keep track of important conversations they want to revisit later.
| Widgets | Functionality |
-| --- | --- |
-| [Message List](/ui-kit/flutter/message-list) | [Message List](/ui-kit/flutter/message-list) provides the "Mark as unread" option in message actions and supports starting from the first unread message when enabled. |
-| [Conversations](/ui-kit/flutter/conversations) | [Conversations](/ui-kit/flutter/conversations) widget listens to conversation updates and reflects the updated unread count in real-time. |
-
-***
+|---|---|
+| Message List | Provides the "Mark as unread" option in message actions and supports starting from the first unread message. |
+| Conversations | Reflects the updated unread count in real-time. |
## Typing Indicator
-The Typing Indicator feature in CometChat shows when a user is typing a response in real-time, fostering a more interactive and engaging chat environment. This feature enhances the real-time communication experience, making conversations feel more natural and fluid.
-
-
-
-
+The Typing Indicator feature shows when a user is typing a response in real-time.
| Widgets | Functionality |
-| --- | --- |
-| [Conversations](/ui-kit/flutter/conversations) | [Conversations](/ui-kit/flutter/conversations) is a Widget that renders Conversations item List, Conversations item also shows real-time typing status indicators. This means that if a user in a one-on-one chat or a participant in a group chat is currently typing a message |
-| [Message Header](/ui-kit/flutter/message-header) | [Message Header](/ui-kit/flutter/message-header) that renders details of User or Groups in ToolBar. The MessageHeader also handles the Typing Indicator functionality. When a user or a member in a group is typing, the MessageHeader dynamically updates to display a 'typing...' status in real-time. |
-
-***
+|---|---|
+| Conversations | Shows real-time typing status indicators in conversation items. |
+| Message Header | Dynamically updates to display a 'typing…' status in real-time. |
## User Presence
-CometChat's User Presence feature allows users to see whether their contacts are online, offline. This helps users know the best time to initiate a conversation and sets expectations about response times.
-
-
-
-
+CometChat's User Presence feature allows users to see whether their contacts are online or offline.
| Widgets | Functionality |
-| --- | --- |
-| [Conversations](/ui-kit/flutter/conversations) | [Conversations](/ui-kit/flutter/conversations) is a Widget that renders Conversations item List, Conversations item also shows user presence information. |
-| [Message Header](/ui-kit/flutter/message-header) | [Message Header](/ui-kit/flutter/message-header) that renders details of User or Groups in ToolBar. The MessageHeader also handles user Presence information. |
-| [Users](/ui-kit/flutter/users) | [Users](/ui-kit/flutter/users) renders list of users available in your app. It also responsible to render users Presence information. |
-| [Group Members](/ui-kit/flutter/group-members) | [Group Members](/ui-kit/flutter/group-members) renders list of users available in the group. The Group Members widget also handles user Presence information. |
-
-***
+|---|---|
+| Conversations | Shows user presence information in conversation items. |
+| Message Header | Handles user Presence information in the toolbar. |
+| Users | Renders users Presence information in the user list. |
+| Group Members | Handles user Presence information in the member list. |
## Reactions
-CometChat's Reactions feature adds a layer of expressiveness to your chat application by allowing users to react to messages. With Reactions, users can convey a range of emotions or express their thoughts on a particular message without typing out a full response, enhancing their user experience and fostering greater engagement.
-
-The number of reactions displayed depends on the width of the view. For instance, if a message contains 5 reactions but the width of the CometChatReactions view can only accommodate 4 reactions at a time, the first three reactions will be shown along with an additional UI element at the end of the row. This element indicates the number of other unique reactions that are not immediately visible, informing users of the total count of different reactions.
-
-In the example, tapping on this element (depicted as "+2" in the provided image) will by default trigger the CometChatReactionList widget. This action opens a modal sheet from the bottom of the screen, displaying all reactions received by the message.
-
-
-
-
+CometChat's Reactions feature allows users to react to messages with emojis.
| Widgets | Functionality |
-| --- | --- |
-| [MessageList](/ui-kit/flutter/message-list) | [MessageList](/ui-kit/flutter/message-list) is a Widget that renders different types of Message bubbles, Irrespective of the type of message bubble, Reactions are an integral part and offer a more engaging, expressive way for users to respond to messages. |
-
-***
+|---|---|
+| MessageList | Reactions are an integral part of all message bubbles. Width-aware display shows visible reactions + "+N" overflow indicator. |
## Mentions
-Mentions is a robust feature provided by CometChat that enhances the interactivity and clarity of group or 1-1 chats by allowing users to directly address or refer to specific individuals in a conversation. The feature also supports group mentions like @all, enabling users to quickly notify all members in a group chat simultaneously.
-
-
-
-
+Mentions enhances interactivity by allowing users to directly address specific individuals in a conversation. Supports `@all` for group mentions.
| Widgets | Functionality |
-| --- | --- |
-| [Conversations](/ui-kit/flutter/conversations) | [Conversations](/ui-kit/flutter/conversations) widget provides an enhanced user experience by integrating the Mentions feature. This means that from the conversation list itself, users can see where they or someone else have been specifically mentioned. |
-| [MessageComposer](/ui-kit/flutter/message-composer) | [MessageComposer](/ui-kit/flutter/message-composer) is a widget that allows users to craft and send various types of messages, including the usage of the Mentions feature for direct addressing within the conversation. |
-| [MessageList](/ui-kit/flutter/message-list) | [MessageList](/ui-kit/flutter/message-list) is a widget that displays a list of sent and received messages. It also supports the rendering of Mentions, enhancing the readability and interactivity of conversations. |
-
-***
+|---|---|
+| Conversations | Shows where users have been specifically mentioned. |
+| MessageComposer | Allows users to use the Mentions feature for direct addressing. |
+| MessageList | Supports the rendering of Mentions in messages. |
-## Rich Text Formatting
-
-Rich Text Formatting allows users to style their messages with bold, italic, strikethrough, code, code blocks, blockquotes, ordered/unordered lists, and links. This brings richer expression to conversations and helps users emphasize key points.
+## Quoted Reply
-
-
-
+Quoted Reply enables users to quickly reply to specific messages by selecting the "Reply" option from a message's action menu.
| Widgets | Functionality |
-| --- | --- |
-| [CompactMessageComposer](/ui-kit/flutter/compact-message-composer#rich-text-formatting) | [CompactMessageComposer](/ui-kit/flutter/compact-message-composer#rich-text-formatting) provides a built-in rich text editor with formatting toolbar and text selection menu items for bold, italic, strikethrough, code, links, lists, blockquotes, and code blocks. |
-| [MessageList](/ui-kit/flutter/message-list) | [MessageList](/ui-kit/flutter/message-list) renders formatted messages with the appropriate styling automatically applied, ensuring that rich text formatting is displayed exactly as intended by the sender. |
-
-***
+|---|---|
+| MessageList | Supports replying to messages via the "Reply" option. |
+| MessageComposer | Shows the quoted reply above the input field using `CometChatMessagePreview` (renamed from `CometChatEditPreview` in V5). |
-## Quoted Reply
-
-Quoted Reply is a robust feature provided by CometChat that enables users to quickly reply to specific messages by selecting the "Reply" option from a message's action menu. This enhances context, keeps conversations organized, and improves overall chat experience in both 1-1 and group chats.
+## Threaded Conversations
-
-
-
+The Threaded Conversations feature enables users to respond directly to a specific message in a chat.
| Widgets | Functionality |
-| --- | --- |
-| [MessageList](/ui-kit/flutter/message-list) | [MessageList](/ui-kit/flutter/message-list) supports replying to messages via the "Reply" option. Users can select "Reply" on a message to open the composer with the quoted reply pre-filled, maintaining context. |
-| [MessageComposer](/ui-kit/flutter/message-composer) | [MessageComposer](/ui-kit/flutter/message-composer) works seamlessly with Quoted Message by showing the quoted reply above the input field, letting users compose their response in proper context. |
-
-***
+|---|---|
+| Threaded Messages | Displays all replies made to a particular message. In V6, powered by `ThreadedHeaderBloc`. |
## Conversation and Advanced Search
-Conversation and Advanced Search is a powerful feature provided by CometChat that enables users to quickly find conversations, messages, and media across chats in real time. It supports filters, scopes, and custom actions, allowing users to locate content efficiently while keeping the chat experience smooth and intuitive.
-
-
-
-
+Enables users to quickly find conversations, messages, and media across chats in real time.
| Widgets | Functionality |
-| --- | --- |
-| [Search](/ui-kit/flutter/search) | [Search](/ui-kit/flutter/search) allows users to search across conversations and messages in real time. Users can click on a result to open the conversation or jump directly to a specific message. |
-| [Message Header](/ui-kit/flutter/message-header) | [Message Header](/ui-kit/flutter/message-header) shows the search button in the chat header, allowing users to search within a conversation. |
-| [MessageList](/ui-kit/flutter/message-list) | [MessageList](/ui-kit/flutter/message-list) shows the selected message when clicked from search results and highlights it in the message list. |
-| [MessageComposer](/ui-kit/flutter/message-composer) | [MessageComposer](/ui-kit/flutter/message-composer) displays the search input. |
-
-***
+|---|---|
+| Search | Allows users to search across conversations and messages. In V6, powered by a single consolidated `SearchBloc`. |
+| Message Header | Shows the search button in the chat header. |
+| MessageList | Shows the selected message when clicked from search results. |
## Moderation
-CometChat's Message Moderation feature helps maintain a safe and respectful chat environment by automatically filtering and managing inappropriate content. Messages can be automatically blocked or flagged based on predefined rules, ensuring harmful content is handled before it reaches users.
-
-
-
-
-
-
-Learn more about setting up moderation rules and managing content in the [Moderation](/moderation/overview) documentation.
-
+CometChat's Message Moderation feature helps maintain a safe and respectful chat environment by automatically filtering and managing inappropriate content.
| Widgets | Functionality |
-| --- | --- |
-| [Message List](/ui-kit/flutter/message-list) | [Message List](/ui-kit/flutter/message-list) automatically handles moderated messages, displaying blocked content appropriately based on your moderation settings. |
-
-After implementing moderation rules, users can report messages they find inappropriate or harmful. As a next step, you can enable the **[Report Message](#report-message)** feature to allow users to flag messages for review by moderators.
-
-***
+|---|---|
+| Message List | Automatically handles moderated messages, displaying blocked content appropriately. |
## Report Message
-The Report Message feature allows users to report inappropriate or harmful messages within the chat. Users can choose from predefined reasons and provide additional remarks for detailed context. This feature helps maintain a safe and respectful chat environment.
-
-
-Learn more about how flagged messages are handled, reviewed, and moderated in the [Flagged Messages](/moderation/flagged-messages) documentation.
-
-
-
-
-
+The Report Message feature allows users to report inappropriate or harmful messages within the chat.
| Widgets | Functionality |
-| --- | --- |
-| [MessageList](/ui-kit/flutter/message-list) | [MessageList](/ui-kit/flutter/message-list) provides the "Report Message" option in the message actions menu, allowing users to initiate the reporting process for inappropriate messages. |
-
-***
-
-## Threaded Conversations
-
-The Threaded Conversations feature enables users to respond directly to a specific message in a chat. This keeps conversations organized and enhances the user experience by maintaining context, especially in group chats.
-
-
-
-
-
-| Widgets | Functionality |
-| --- | --- |
-| [Threaded Messages](/ui-kit/flutter/threaded-messages-header) | [Threaded Messages](/ui-kit/flutter/threaded-messages-header) that displays all replies made to a particular message in a conversation. |
-
-***
+|---|---|
+| MessageList | Provides the "Report Message" option in the message actions menu. |
## Group Chat
-CometChat facilitates Group Chats, allowing users to have conversations with multiple participants simultaneously. This feature is crucial for team collaborations, group discussions, social communities, and more.
-
-
-
-
-
-For a comprehensive understanding and guide on implementing and using the Groups feature in CometChat, you should refer to our detailed guide on [Groups](/ui-kit/flutter/groups).
-
-***
-
-## Next Steps
-
-
-
- Learn how to send text, media, and custom messages
-
-
- Display and manage messages with real-time updates
-
-
- Show conversation lists with typing indicators and receipts
-
-
- Create and manage group conversations
-
-
+CometChat facilitates Group Chats, allowing users to have conversations with multiple participants simultaneously.
-***
+For a comprehensive guide on implementing Groups, refer to our detailed [Groups guide](/ui-kit/flutter/guide-group-chat).
diff --git a/ui-kit/flutter/custom-text-formatter-guide.mdx b/ui-kit/flutter/custom-text-formatter-guide.mdx
index c0c2a9308..60909eebd 100644
--- a/ui-kit/flutter/custom-text-formatter-guide.mdx
+++ b/ui-kit/flutter/custom-text-formatter-guide.mdx
@@ -1,401 +1,267 @@
---
-title: "Custom Text Formatter"
-description: "Extend the CometChatTextFormatter base class to implement custom inline text patterns with regex and callbacks in Flutter."
+title: "Custom Text Formatter Guide"
+description: "Build a CometChat Flutter UI Kit text formatter for hashtags, links, tracked characters, composer suggestions, and message styling."
---
-
+This guide walks you through building a custom `CometChatTextFormatter` that detects `#hashtags` in messages, highlights them, and shows a suggestion dropdown in the composer.
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_chat_uikit` |
-| Key class | `CometChatTextFormatter` (abstract base class for custom formatters) |
-| Required setup | `CometChatUIKit.init(uiKitSettings: uiKitSettings)` then `CometChatUIKit.login("UID")` |
-| Purpose | Extend to create custom inline text patterns with regex, styling, and callbacks |
-| Features | Text formatting, customizable styles, dynamic text replacement, input field integration |
-| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
-| Related | [ShortCut Formatter](/ui-kit/flutter/shortcut-formatter-guide) \| [Mentions Formatter](/ui-kit/flutter/mentions-formatter-guide) \| [Custom Mentions Formatter](/ui-kit/flutter/custom-mentions-formatter-guide) \| [All Guides](/ui-kit/flutter/guide-overview) |
+## Prerequisites
-
+- CometChat Flutter UI Kit V6 installed
+- Familiarity with [Text Formatters](/ui-kit/flutter/customization-text-formatters)
-`CometChatTextFormatter` is an abstract class for formatting text in the message composer and message bubbles. Extend it to build custom formatters — hashtags, keywords, or any regex-based pattern.
+## Step 1: Create the Formatter Class
-| Capability | Description |
-| --- | --- |
-| Text formatting | Auto-format text based on regex patterns and styles |
-| Custom styles | Set colors, fonts, and backgrounds for matched text |
-| Dynamic replacement | Regex-based find-and-replace in user input |
-| Input integration | Real-time monitoring of the composer input field |
-| Attributed text | Build styled text spans for message bubbles |
-
----
-
-## Steps
-
-### 1. Import the base class
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-```
-
-### 2. Extend CometChatTextFormatter
-
-```dart
-class HashTagTextFormatter extends CometChatTextFormatter {
- HashTagTextFormatter() : super(
- trackingCharacter: '#',
- pattern: RegExp(r'\B#(\w+)\b'),
- );
-
- // Override required methods...
-}
-```
-
-### 3. Configure tracking character and regex
-
-Set the character that triggers formatting and the regex to match.
-
-```dart
-HashTagTextFormatter() : super(
- trackingCharacter: '#',
- pattern: RegExp(r'\B#(\w+)\b'),
- showLoadingIndicator: false,
-);
-```
-
-### 4. Implement required methods
-
-```dart
-@override
-void init() {
- // Initialize formatter
-}
-
-@override
-void handlePreMessageSend(BuildContext context, BaseMessage baseMessage) {
- // Process message before sending
-}
-
-@override
-TextStyle getMessageInputTextStyle(BuildContext context) {
- return TextStyle(color: Colors.blue);
-}
-
-@override
-void onScrollToBottom(TextEditingController textEditingController) {
- // Handle scroll events
-}
-
-@override
-void onChange(TextEditingController textEditingController, String previousText) {
- // Handle text changes
-}
-```
-
-### 5. Customize message bubble styling
-
-```dart
-@override
-TextStyle getMessageBubbleTextStyle(
- BuildContext context,
- BubbleAlignment? alignment,
- {bool forConversation = false}
-) {
- return TextStyle(
- color: alignment == BubbleAlignment.right
- ? Colors.white
- : Colors.blue,
- fontWeight: FontWeight.bold,
- decoration: TextDecoration.underline,
- );
-}
-```
-
----
-
-## Example
-
-A hashtag formatter used with [CometChatMessageList](/ui-kit/flutter/message-list) and [CometChatMessageComposer](/ui-kit/flutter/message-composer).
-
-{/*
-
- */}
+Extend `CometChatTextFormatter` and set the tracking character to `#`:
-
+
```dart
import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
import 'package:flutter/material.dart';
-class HashTagTextFormatter extends CometChatTextFormatter {
- HashTagTextFormatter() : super(
- trackingCharacter: '#',
- pattern: RegExp(r'\B#(\w+)\b'),
- showLoadingIndicator: false,
- );
+class HashtagFormatter extends CometChatTextFormatter {
+ final List _allHashtags = [
+ 'flutter', 'dart', 'cometchat', 'uikit', 'mobile',
+ 'android', 'ios', 'web', 'chat', 'messaging',
+ ];
- @override
- void init() {
- // Initialization logic
- }
-
- @override
- void handlePreMessageSend(BuildContext context, BaseMessage baseMessage) {
- // Process hashtags before sending
- }
+ HashtagFormatter() : super(trackingCharacter: '#');
@override
- TextStyle getMessageInputTextStyle(BuildContext context) {
- CometChatColorPalette colorPalette = CometChatThemeHelper.getColorPalette(context);
- return TextStyle(
- color: colorPalette.primary,
- fontWeight: FontWeight.w500,
- );
- }
-
- @override
- TextStyle getMessageBubbleTextStyle(
- BuildContext context,
- BubbleAlignment? alignment,
- {bool forConversation = false}
- ) {
- CometChatColorPalette colorPalette = CometChatThemeHelper.getColorPalette(context);
- return TextStyle(
- color: alignment == BubbleAlignment.right
- ? colorPalette.white
- : colorPalette.primary,
- fontWeight: FontWeight.bold,
- decoration: TextDecoration.underline,
- );
- }
-
- @override
- void onScrollToBottom(TextEditingController textEditingController) {
- // Handle scroll to bottom
- }
-
- @override
- void onChange(TextEditingController textEditingController, String previousText) {
- // Handle text changes - detect new hashtags
- String currentText = textEditingController.text;
- if (currentText.contains('#')) {
- // Process hashtag
- }
- }
-
- @override
- List getAttributedText(
- String text,
- BuildContext context,
- BubbleAlignment? alignment,
- {List? existingAttributes,
- Function(String)? onTap,
- bool forConversation = false}
- ) {
- return super.getAttributedText(
- text,
- context,
- alignment,
- existingAttributes: existingAttributes,
- onTap: onTap ?? (hashtag) {
- // Handle hashtag tap - e.g., search for hashtag
- print('Tapped hashtag: $hashtag');
- },
- forConversation: forConversation,
- );
+ void init() {
+ // Called when the formatter is initialized
}
}
```
-
+
-
+## Step 2: Implement Search
-Pass the formatter via the `textFormatters` property.
+The `search` method is called whenever the user types after the tracking character. Filter your data and set the suggestion list:
+
+
```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:flutter/material.dart';
-
-class MessageListDemo extends StatefulWidget {
- const MessageListDemo({super.key});
-
- @override
- State createState() => _MessageListDemoState();
-}
-
-class _MessageListDemoState extends State {
- User? chatUser;
-
- @override
- void initState() {
- super.initState();
- CometChat.getUser("uid").then((user) {
- setState(() {
- chatUser = user;
- });
- });
+@override
+void search(String query) {
+ if (query.isEmpty) {
+ setSuggestionItems(_allHashtags
+ .map((tag) => SuggestionItem(
+ id: tag,
+ name: '#$tag',
+ leadingIcon: Icon(Icons.tag, size: 20),
+ ))
+ .toList());
+ return;
}
- @override
- Widget build(BuildContext context) {
- if (chatUser == null) {
- return const Center(child: CircularProgressIndicator());
- }
-
- return CometChatMessageList(
- user: chatUser,
- textFormatters: [HashTagTextFormatter()],
- );
- }
+ final filtered = _allHashtags
+ .where((tag) => tag.toLowerCase().contains(query.toLowerCase()))
+ .map((tag) => SuggestionItem(
+ id: tag,
+ name: '#$tag',
+ leadingIcon: Icon(Icons.tag, size: 20),
+ ))
+ .toList();
+
+ setSuggestionItems(filtered);
}
```
-
----
-
-## Methods Reference
+## Step 3: Handle Suggestion Selection
-| Field | Description |
-| --- | --- |
-| `trackingCharacter` | Character that starts tracking (e.g. `#` for hashtags) |
-| `pattern` | Regex pattern to match text for formatting |
-| `showLoadingIndicator` | Whether to show loading indicator during search |
-| `messageBubbleTextStyle` | Function to style message bubble text |
-| `messageInputTextStyle` | Function to style composer input text |
-| `message` | Current message being processed |
-| `user` | User context for the formatter |
-| `group` | Group context for the formatter |
-
----
-
-## Override Methods
+When the user taps a suggestion, insert the hashtag into the composer:
-
-
-Initialize the formatter. Called when the formatter is first used.
-
+
```dart
@override
-void init() {
- // Setup any initial state
+void onItemClick(SuggestionItem item, User? user, Group? group) {
+ // The base class handles inserting the text into the composer.
+ // You can add custom logic here, like tracking analytics.
+ super.onItemClick(item, user, group);
}
```
-
+
-
+## Step 4: Style Hashtags in Message Bubbles
-Process the message before it's sent. Use this to modify message metadata.
+Override `buildMessageBubbleSpan` to apply styling to hashtags when they appear in sent/received messages:
+
+
```dart
@override
-void handlePreMessageSend(BuildContext context, BaseMessage baseMessage) {
- // Add hashtag metadata to message
- if (baseMessage is TextMessage) {
- final hashtags = pattern?.allMatches(baseMessage.text)
- .map((m) => m.group(1))
- .toList();
- // Store hashtags in message metadata
+List getFormattedText(
+ String text,
+ BuildContext context,
+ BubbleAlignment alignment,
+) {
+ final results = [];
+ final regex = RegExp(r'#\w+');
+
+ for (final match in regex.allMatches(text)) {
+ results.add(CometChatTextFormatterResult(
+ start: match.start,
+ end: match.end,
+ style: TextStyle(
+ color: alignment == BubbleAlignment.right
+ ? Colors.white.withOpacity(0.8)
+ : Color(0xFF6851D6),
+ fontWeight: FontWeight.w600,
+ ),
+ onTap: () {
+ // Handle hashtag tap — navigate to hashtag feed, etc.
+ debugPrint('Tapped hashtag: ${match.group(0)}');
+ },
+ ));
}
+
+ return results;
}
```
-
+
-
+## Step 5: Pre-Send Hook (Optional)
-Returns the TextStyle for formatted text in message bubbles.
+Modify the message before it's sent — for example, attach hashtag metadata:
+
+
```dart
@override
-TextStyle getMessageBubbleTextStyle(
- BuildContext context,
- BubbleAlignment? alignment,
- {bool forConversation = false}
-) {
- return TextStyle(
- color: Colors.blue,
- fontWeight: FontWeight.bold,
- );
+BaseMessage handlePreMessageSend(BaseMessage message) {
+ if (message is TextMessage) {
+ final regex = RegExp(r'#\w+');
+ final hashtags = regex
+ .allMatches(message.text)
+ .map((m) => m.group(0)!.substring(1))
+ .toList();
+
+ if (hashtags.isNotEmpty) {
+ message.metadata ??= {};
+ message.metadata!['hashtags'] = hashtags;
+ }
+ }
+ return message;
}
```
-
+
-
+## Step 6: Register the Formatter
-Returns styled text spans for the message bubble.
+Pass your formatter to the components that should use it:
+
+
```dart
-@override
-List getAttributedText(
- String text,
- BuildContext context,
- BubbleAlignment? alignment,
- {List? existingAttributes,
- Function(String)? onTap,
- bool forConversation = false}
-) {
- // Return attributed text with styling
- return super.getAttributedText(
- text, context, alignment,
- existingAttributes: existingAttributes,
- onTap: onTap,
- forConversation: forConversation,
- );
-}
+final hashtagFormatter = HashtagFormatter();
+
+// On the message list (for rendering)
+CometChatMessageList(
+ user: user,
+ textFormatters: [
+ CometChatMentionsFormatter(), // Keep default mentions
+ hashtagFormatter,
+ ],
+)
+
+// On the composer (for input suggestions)
+CometChatMessageComposer(
+ user: user,
+ textFormatters: [
+ CometChatMentionsFormatter(),
+ hashtagFormatter,
+ ],
+)
```
-
+
-
-
-Called when text changes in the composer.
+## Complete Example
+
+
```dart
-@override
-void onChange(TextEditingController textEditingController, String previousText) {
- // Detect and process new patterns
-}
-```
+class HashtagFormatter extends CometChatTextFormatter {
+ final List _allHashtags = [
+ 'flutter', 'dart', 'cometchat', 'uikit', 'mobile',
+ ];
-
-
+ HashtagFormatter() : super(trackingCharacter: '#');
----
+ @override
+ void init() {}
-## Built-in Formatters
+ @override
+ void search(String query) {
+ final filtered = query.isEmpty
+ ? _allHashtags
+ : _allHashtags.where(
+ (tag) => tag.toLowerCase().contains(query.toLowerCase()),
+ ).toList();
+
+ setSuggestionItems(filtered
+ .map((tag) => SuggestionItem(
+ id: tag,
+ name: '#$tag',
+ leadingIcon: Icon(Icons.tag, size: 20),
+ ))
+ .toList());
+ }
-Flutter UI Kit includes these pre-built formatters:
+ @override
+ List getFormattedText(
+ String text,
+ BuildContext context,
+ BubbleAlignment alignment,
+ ) {
+ final results = [];
+ final regex = RegExp(r'#\w+');
+
+ for (final match in regex.allMatches(text)) {
+ results.add(CometChatTextFormatterResult(
+ start: match.start,
+ end: match.end,
+ style: TextStyle(
+ color: alignment == BubbleAlignment.right
+ ? Colors.white.withOpacity(0.8)
+ : Color(0xFF6851D6),
+ fontWeight: FontWeight.w600,
+ ),
+ ));
+ }
+ return results;
+ }
-| Formatter | Description |
-| --- | --- |
-| `CometChatMentionsFormatter` | @mentions with user suggestions |
-| `CometChatUrlFormatter` | Auto-detect and style URLs |
-| `CometChatEmailFormatter` | Auto-detect and style email addresses |
-| `CometChatPhoneNumberFormatter` | Auto-detect and style phone numbers |
+ @override
+ BaseMessage handlePreMessageSend(BaseMessage message) {
+ if (message is TextMessage) {
+ final hashtags = RegExp(r'#\w+')
+ .allMatches(message.text)
+ .map((m) => m.group(0)!.substring(1))
+ .toList();
+ if (hashtags.isNotEmpty) {
+ message.metadata ??= {};
+ message.metadata!['hashtags'] = hashtags;
+ }
+ }
+ return message;
+ }
+}
+```
+
+
----
+## Related
-## Next Steps
-
-
-
- Add @mentions with styled tokens.
-
-
- Build a custom mentions formatter with filtered suggestions.
-
-
- Customize the message input component.
-
-
- Browse all feature and formatter guides.
-
-
- Full working sample application on GitHub.
-
-
+- [Text Formatters](/ui-kit/flutter/customization-text-formatters) — Text formatter API reference.
+- [Mentions Formatter Guide](/ui-kit/flutter/mentions-formatter-guide) — Built-in mentions formatter.
+- [Shortcut Formatter Guide](/ui-kit/flutter/shortcut-formatter-guide) — Shortcut text replacement.
diff --git a/ui-kit/flutter/v6/customization-bloc-data.mdx b/ui-kit/flutter/customization-bloc-data.mdx
similarity index 94%
rename from ui-kit/flutter/v6/customization-bloc-data.mdx
rename to ui-kit/flutter/customization-bloc-data.mdx
index f23d84375..cc57a81ff 100644
--- a/ui-kit/flutter/v6/customization-bloc-data.mdx
+++ b/ui-kit/flutter/customization-bloc-data.mdx
@@ -117,11 +117,11 @@ All list-based BLoCs use the `ListBase` mixin with these override hooks:
Each component's BLoC has its own events and methods. See the individual component docs for details:
-- [Message List — BLoC Events & Methods](/ui-kit/flutter/v6/message-list#advanced)
-- [Conversations — BLoC Events](/ui-kit/flutter/v6/conversations#advanced)
-- [Users — BLoC Events](/ui-kit/flutter/v6/users#advanced)
-- [Groups — BLoC Events](/ui-kit/flutter/v6/groups#advanced)
-- [Group Members — BLoC Events](/ui-kit/flutter/v6/group-members#advanced)
+- [Message List — BLoC Events & Methods](/ui-kit/flutter/message-list#advanced)
+- [Conversations — BLoC Events](/ui-kit/flutter/conversations#advanced)
+- [Users — BLoC Events](/ui-kit/flutter/users#advanced)
+- [Groups — BLoC Events](/ui-kit/flutter/groups#advanced)
+- [Group Members — BLoC Events](/ui-kit/flutter/group-members#advanced)
## Lifecycle Callbacks
@@ -146,8 +146,8 @@ CometChatMessageList(
## Related
-- [Message List](/ui-kit/flutter/v6/message-list) — Full message list component reference.
-- [Customization Overview](/ui-kit/flutter/v6/customization-overview) — See all customization categories.
+- [Message List](/ui-kit/flutter/message-list) — Full message list component reference.
+- [Customization Overview](/ui-kit/flutter/customization-overview) — See all customization categories.
---
diff --git a/ui-kit/flutter/v6/customization-datasource.mdx b/ui-kit/flutter/customization-datasource.mdx
similarity index 94%
rename from ui-kit/flutter/v6/customization-datasource.mdx
rename to ui-kit/flutter/customization-datasource.mdx
index 972038527..d3ea34c48 100644
--- a/ui-kit/flutter/v6/customization-datasource.mdx
+++ b/ui-kit/flutter/customization-datasource.mdx
@@ -203,7 +203,7 @@ Unlike Android's `DataSourceDecorator` which applies globally, Flutter's templat
## Related
-- [Message Template](/ui-kit/flutter/v6/message-template) — Full template structure and examples.
-- [Menu & Options](/ui-kit/flutter/v6/customization-menu-options) — Component-level option customization.
-- [Text Formatters](/ui-kit/flutter/v6/customization-text-formatters) — Custom text processing.
-- [Customization Overview](/ui-kit/flutter/v6/customization-overview) — See all customization categories.
+- [Message Template](/ui-kit/flutter/message-template) — Full template structure and examples.
+- [Menu & Options](/ui-kit/flutter/customization-menu-options) — Component-level option customization.
+- [Text Formatters](/ui-kit/flutter/customization-text-formatters) — Custom text processing.
+- [Customization Overview](/ui-kit/flutter/customization-overview) — See all customization categories.
diff --git a/ui-kit/flutter/v6/customization-menu-options.mdx b/ui-kit/flutter/customization-menu-options.mdx
similarity index 89%
rename from ui-kit/flutter/v6/customization-menu-options.mdx
rename to ui-kit/flutter/customization-menu-options.mdx
index 9a9917751..948ec8896 100644
--- a/ui-kit/flutter/v6/customization-menu-options.mdx
+++ b/ui-kit/flutter/customization-menu-options.mdx
@@ -1,6 +1,6 @@
---
title: "Menu & Options"
-description: "Add, replace, or extend long-press actions and composer attachment options on components."
+description: "Customize CometChat Flutter UI Kit message options, long-press menus, composer attachments, and template-level actions."
---
Components provide long-press context menus (e.g., on conversations or messages) and the message composer provides attachment options. You can customize all of these at the component level or via message templates.
@@ -156,6 +156,6 @@ CometChatConversations(
## Related
-- [Message Template](/ui-kit/flutter/v6/message-template) — Full template structure including options.
-- [Message List](/ui-kit/flutter/v6/message-list) — Option visibility properties.
-- [Customization Overview](/ui-kit/flutter/v6/customization-overview) — See all customization categories.
+- [Message Template](/ui-kit/flutter/message-template) — Full template structure including options.
+- [Message List](/ui-kit/flutter/message-list) — Option visibility properties.
+- [Customization Overview](/ui-kit/flutter/customization-overview) — See all customization categories.
diff --git a/ui-kit/flutter/v6/customization-overview.mdx b/ui-kit/flutter/customization-overview.mdx
similarity index 79%
rename from ui-kit/flutter/v6/customization-overview.mdx
rename to ui-kit/flutter/customization-overview.mdx
index 724c7e4b6..ba6d86453 100644
--- a/ui-kit/flutter/v6/customization-overview.mdx
+++ b/ui-kit/flutter/customization-overview.mdx
@@ -60,29 +60,29 @@ CometChatMessageList(
The UI Kit provides seven categories of customization entry points. Each category has a dedicated guide:
-
+
Replace specific regions of a component's UI (leading view, title, subtitle, trailing view) using builder callbacks.
-
+
Customize visual appearance using ThemeData extensions or component-level style objects.
-
+
Configure data fetching with RequestBuilders, provide custom BLoC instances, override repositories and datasources.
-
+
Replace the default empty, error, and loading state views with custom widgets.
-
+
Create custom text processors for hashtags, mentions, links, or any pattern using the CometChatTextFormatter API.
-
+
Add, replace, or extend long-press actions and composer attachment options on components.
-
+
Customize how messages are rendered using MessageTemplateUtils — the central registry for message templates, options, and formatters.
## What's Next
-If you're new to customization, start with [View Slots](/ui-kit/flutter/v6/customization-view-slots) for quick UI changes, or [Styles](/ui-kit/flutter/v6/component-styling) to match your brand. For advanced use cases like custom message types or global behavior changes, head to [Message Templates](/ui-kit/flutter/v6/customization-datasource).
+If you're new to customization, start with [View Slots](/ui-kit/flutter/customization-view-slots) for quick UI changes, or [Styles](/ui-kit/flutter/component-styling) to match your brand. For advanced use cases like custom message types or global behavior changes, head to [Message Templates](/ui-kit/flutter/customization-datasource).
diff --git a/ui-kit/flutter/v6/customization-state-views.mdx b/ui-kit/flutter/customization-state-views.mdx
similarity index 93%
rename from ui-kit/flutter/v6/customization-state-views.mdx
rename to ui-kit/flutter/customization-state-views.mdx
index f81b85102..c115e95dd 100644
--- a/ui-kit/flutter/v6/customization-state-views.mdx
+++ b/ui-kit/flutter/customization-state-views.mdx
@@ -1,6 +1,6 @@
---
title: "State Views"
-description: "Replace the default empty, error, and loading state views with custom widgets."
+description: "Replace CometChat Flutter UI Kit empty, error, loading, and chat greeting state views with custom Flutter widgets."
---
Components display state views when the list is empty, an error occurs, or data is loading. You can replace these with custom widgets.
@@ -153,4 +153,4 @@ CometChatMessageList(
## Related
-- [Customization Overview](/ui-kit/flutter/v6/customization-overview) — See all customization categories.
+- [Customization Overview](/ui-kit/flutter/customization-overview) — See all customization categories.
diff --git a/ui-kit/flutter/v6/customization-text-formatters.mdx b/ui-kit/flutter/customization-text-formatters.mdx
similarity index 89%
rename from ui-kit/flutter/v6/customization-text-formatters.mdx
rename to ui-kit/flutter/customization-text-formatters.mdx
index 6651b54a4..dd83ace05 100644
--- a/ui-kit/flutter/v6/customization-text-formatters.mdx
+++ b/ui-kit/flutter/customization-text-formatters.mdx
@@ -145,10 +145,10 @@ CometChatMessageList(
-See the [Mentions Formatter Guide](/ui-kit/flutter/v6/mentions-formatter-guide) for detailed styling and behavior customization.
+See the [Mentions Formatter Guide](/ui-kit/flutter/mentions-formatter-guide) for detailed styling and behavior customization.
## Related
-- [Mentions Formatter Guide](/ui-kit/flutter/v6/mentions-formatter-guide) — Built-in mentions formatter reference.
-- [Shortcut Formatter Guide](/ui-kit/flutter/v6/shortcut-formatter-guide) — Shortcut text replacement formatter.
-- [Customization Overview](/ui-kit/flutter/v6/customization-overview) — See all customization categories.
+- [Mentions Formatter Guide](/ui-kit/flutter/mentions-formatter-guide) — Built-in mentions formatter reference.
+- [Shortcut Formatter Guide](/ui-kit/flutter/shortcut-formatter-guide) — Shortcut text replacement formatter.
+- [Customization Overview](/ui-kit/flutter/customization-overview) — See all customization categories.
diff --git a/ui-kit/flutter/v6/customization-view-slots.mdx b/ui-kit/flutter/customization-view-slots.mdx
similarity index 95%
rename from ui-kit/flutter/v6/customization-view-slots.mdx
rename to ui-kit/flutter/customization-view-slots.mdx
index 49066f259..b08790615 100644
--- a/ui-kit/flutter/v6/customization-view-slots.mdx
+++ b/ui-kit/flutter/customization-view-slots.mdx
@@ -131,5 +131,5 @@ When you set `bubbleView` on a template, all other template slots (`headerView`,
## Related
-- [Message Template](/ui-kit/flutter/v6/message-template) — Full template structure for message bubbles.
-- [Customization Overview](/ui-kit/flutter/v6/customization-overview) — See all customization categories.
+- [Message Template](/ui-kit/flutter/message-template) — Full template structure for message bubbles.
+- [Customization Overview](/ui-kit/flutter/customization-overview) — See all customization categories.
diff --git a/ui-kit/flutter/events.mdx b/ui-kit/flutter/events.mdx
index 022885d91..127234dba 100644
--- a/ui-kit/flutter/events.mdx
+++ b/ui-kit/flutter/events.mdx
@@ -1,61 +1,17 @@
---
title: "Events"
-description: "Listen to and handle real-time events for users, groups, conversations, messages, calls, and UI interactions in Flutter UI Kit"
+description: "Handle CometChat Flutter UI Kit events for users, groups, messages, conversations, calls, and UI-level interactions."
---
-
-
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_chat_uikit` |
-| Conversation events | `ccConversationDeleted`, `ccUpdateConversation` |
-| User events | `ccUserBlocked`, `ccUserUnblocked` |
-| Group events | `ccGroupCreated`, `ccGroupDeleted`, `ccGroupLeft`, `ccGroupMemberScopeChanged`, `ccGroupMemberKicked`, `ccGroupMemberBanned`, `ccGroupMemberUnbanned`, `ccGroupMemberJoined`, `ccGroupMemberAdded`, `ccOwnershipChanged` |
-| Message events | `ccMessageSent`, `ccMessageEdited`, `ccReplyToMessage`, `ccMessageDeleted`, `ccMessageRead`, `ccLiveReaction`, `ccMessageForwarded`, plus SDK listener events |
-| Call events | `ccOutgoingCall`, `ccCallAccepted`, `ccCallRejected`, `ccCallEnded` |
-| UI events | `ccActiveChatChanged`, `showPanel`, `hidePanel`, `openChat`, `ccComposeMessage`, `onAiFeatureTapped` |
-| Purpose | Decoupled communication between UI Kit components — subscribe to events to react to changes without direct component references |
-
-
-
-{/* TL;DR for Agents and Quick Reference */}
-
-**Quick Reference for AI Agents & Developers**
-
-```dart
-// Add event listener
-CometChatMessageEvents.addMessagesListener("LISTENER_ID", this);
-
-// Remove event listener
-CometChatMessageEvents.removeMessagesListener("LISTENER_ID");
-
-// Implement listener methods
-@override
-void ccMessageSent(BaseMessage message, MessageStatus messageStatus) {
- // Handle message sent event
-}
-```
-
-**Available Event Types:**
-- **User Events** → Block/Unblock users
-- **Group Events** → Create, delete, join, leave groups
-- **Conversation Events** → Delete conversations, update conversations
-- **Message Events** → Send, edit, delete, receive messages, reactions, AI messages
-- **Call Events** → Outgoing, accepted, rejected, ended calls
-- **UI Events** → Show/hide panels, active chat changes
-
+## Overview
Events allow for a decoupled, flexible architecture where different parts of the application can interact without having to directly reference each other. This makes it easier to create complex, interactive experiences, as well as to extend and customize the functionality provided by the CometChat UI Kit.
-Both Components and Composite Components have the ability to emit events. These events are dispatched in response to certain changes or user interactions within the component. By emitting events, these components allow other parts of the application to react to changes or interactions, thus enabling dynamic and interactive behavior within the application.
-
-***
-
-## User Events
+> The event system is identical between V5 and V6. All event classes, listeners, and APIs work the same way.
-`CometChatUserEvents` emit events when the logged-in user executes actions on another user. This class provides methods to add and remove listeners for user events, as well as methods to handle specific user actions such as blocking and unblocking users.
+### User Events
-**Available Events:**
+`CometChatUserEvents` emit events when the logged-in user executes actions on another user.
1. `ccUserBlocked`: Triggered when the logged-in user blocks another user.
2. `ccUserUnblocked`: Triggered when the logged-in user unblocks another user.
@@ -64,40 +20,28 @@ Both Components and Composite Components have the ability to emit events. These
```dart
import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:flutter/material.dart';
-
-class UserEventsExample extends StatefulWidget {
- const UserEventsExample({super.key});
-
- @override
- State createState() => _UserEventsExampleState();
-}
-class _UserEventsExampleState extends State with CometChatUserEventListener {
- String listenerID = "unique_listener_ID";
-
+class _YourScreenState extends State with CometChatUserEventListener {
@override
void initState() {
super.initState();
-
- CometChatUserEvents.addUsersListener(listenerID, this); // Add the listener
+ CometChatUserEvents.addUsersListener("listenerId", this);
}
@override
void dispose() {
super.dispose();
-
- CometChatUserEvents.removeUsersListener(listenerID); // Remove the listener
+ CometChatUserEvents.removeUsersListener("listenerId");
}
@override
void ccUserBlocked(User user) {
- // TODO("Not yet implemented")
+ // Handle user blocked
}
@override
void ccUserUnblocked(User user) {
- // TODO("Not yet implemented")
+ // Handle user unblocked
}
@override
@@ -111,102 +55,47 @@ class _UserEventsExampleState extends State with CometChatUse
***
-## Group Events
+### Group Events
-`CometChatGroupEvents` Emits events when the logged-in user performs actions related to groups. This class provides methods to listen to various group-related events and handle them accordingly.
-
-**Available Events:**
+`CometChatGroupEvents` emits events when the logged-in user performs actions related to groups.
1. `ccGroupCreated`: Triggered when the logged-in user creates a group.
2. `ccGroupDeleted`: Triggered when the logged-in user deletes a group.
3. `ccGroupLeft`: Triggered when the logged-in user leaves a group.
4. `ccGroupMemberScopeChanged`: Triggered when the logged-in user changes the scope of another group member.
-5. `ccGroupMemberBanned`: Triggered when the logged-in user bans a group member from the group.
-6. `ccGroupMemberKicked`: Triggered when the logged-in user kicks another group member from the group.
-7. `ccGroupMemberUnbanned`: Triggered when the logged-in user unbans a user banned from the group.
+5. `ccGroupMemberBanned`: Triggered when the logged-in user bans a group member.
+6. `ccGroupMemberKicked`: Triggered when the logged-in user kicks a group member.
+7. `ccGroupMemberUnbanned`: Triggered when the logged-in user unbans a user.
8. `ccGroupMemberJoined`: Triggered when the logged-in user joins a group.
-9. `ccGroupMemberAdded`: Triggered when the logged-in user adds new members to the group.
-10. `ccOwnershipChanged`: Triggered when the logged-in user transfers the ownership of their group to some other member.
+9. `ccGroupMemberAdded`: Triggered when the logged-in user adds new members.
+10. `ccOwnershipChanged`: Triggered when the logged-in user transfers ownership.
```dart
import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart' as sdk;
-import 'package:flutter/material.dart';
-
-class GroupEventsExample extends StatefulWidget {
- const GroupEventsExample({super.key});
-
- @override
- State createState() => _GroupEventsExampleState();
-}
-
-class _GroupEventsExampleState extends State with CometChatGroupEventListener {
- String listenerID = "unique_listener_ID";
+class _YourScreenState extends State with CometChatGroupEventListener {
@override
void initState() {
super.initState();
-
- CometChatGroupEvents.addGroupsListener(listenerID, this); // Add the listener
+ CometChatGroupEvents.addGroupsListener("listenerId", this);
}
@override
void dispose() {
super.dispose();
-
- CometChatGroupEvents.removeGroupsListener(listenerID); // Remove the listener
+ CometChatGroupEvents.removeGroupsListener("listenerId");
}
@override
void ccGroupCreated(Group group) {
- // TODO("Not yet implemented")
+ // Handle group created
}
@override
void ccGroupDeleted(Group group) {
- // TODO("Not yet implemented")
- }
-
- @override
- void ccGroupLeft(sdk.Action message, User leftUser, Group leftGroup) {
- // TODO("Not yet implemented")
- }
-
- @override
- void ccGroupMemberScopeChanged(sdk.Action message, User updatedUser, String scopeChangedTo, String scopeChangedFrom, Group group) {
- // TODO("Not yet implemented")
- }
-
- @override
- void ccGroupMemberBanned(sdk.Action message, User bannedUser, User bannedBy, Group bannedFrom) {
- // TODO("Not yet implemented")
- }
-
- @override
- void ccGroupMemberKicked(sdk.Action message, User kickedUser, User kickedBy, Group kickedFrom) {
- // TODO("Not yet implemented")
- }
-
- @override
- void ccGroupMemberUnbanned(sdk.Action message, User unbannedUser, User unbannedBy, Group unbannedFrom) {
- // TODO("Not yet implemented")
- }
-
- @override
- void ccGroupMemberJoined(User joinedUser, Group joinedGroup) {
- // TODO("Not yet implemented")
- }
-
- @override
- void ccGroupMemberAdded(List messages, List usersAdded, Group groupAddedIn, User addedBy) {
- // TODO("Not yet implemented")
- }
-
- @override
- void ccOwnershipChanged(Group group, GroupMember newOwner) {
- // TODO("Not yet implemented")
+ // Handle group deleted
}
@override
@@ -220,287 +109,26 @@ class _GroupEventsExampleState extends State with CometChatG
***
-## Conversation Events
-
-The `CometChatConversationEvents` component emits events when the logged-in user performs actions related to conversations. This allows for the UI to be updated accordingly.
+### Message Events
-**Available Events:**
-
-1. `ccConversationDeleted`: Triggered when the logged-in user deletes a conversation.
-2. `ccUpdateConversation`: Triggered when a conversation is updated (e.g., unread count changes).
+`CometChatMessageEvents` emits events related to messages.
```dart
import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:flutter/material.dart';
-
-class ConversationEventsExample extends StatefulWidget {
- const ConversationEventsExample({super.key});
-
- @override
- State createState() => _ConversationEventsExampleState();
-}
-
-class _ConversationEventsExampleState extends State with CometChatConversationEventListener {
- String listenerID = "unique_listener_ID";
+class _YourScreenState extends State with CometChatMessageEventListener {
@override
void initState() {
super.initState();
-
- CometChatConversationEvents.addConversationListListener(listenerID, this); // Add the listener
+ CometChatMessageEvents.addMessagesListener("listenerId", this);
}
@override
void dispose() {
super.dispose();
-
- CometChatConversationEvents.removeConversationListListener(listenerID); // Remove the listener
- }
-
- @override
- void ccConversationDeleted(Conversation conversation) {
- // TODO("Not yet implemented")
- }
-
- @override
- void ccUpdateConversation(Conversation conversation) {
- // TODO("Not yet implemented")
- }
-
- @override
- Widget build(BuildContext context) {
- return const Placeholder();
- }
-}
-```
-
-
-
-***
-
-## Message Events
-
-`CometChatMessageEvents` emits events when various actions are performed on messages within the application. These events facilitate updating the UI accordingly.
-
-**Available Events:**
-
-1. `ccMessageSent`: Triggered whenever a logged-in user sends any message. It can have two states: `inProgress` and `sent`.
-2. `ccMessageEdited`: Triggered whenever a logged-in user edits any message from the list of messages. It can have two states: `inProgress` and `sent`.
-3. `ccMessageDeleted`: Triggered whenever a logged-in user deletes any message from the list of messages.
-4. `ccMessageRead`: Triggered whenever a logged-in user reads any message.
-5. `ccLiveReaction`: Triggered whenever a logged-in user clicks on a live reaction.
-6. `ccMessageForwarded`: Triggered whenever a logged-in user forwards any message to a list of users or groups. It can have a state of `status`.
-7. `onTextMessageReceived`: Triggered when a text message is received.
-8. `onMediaMessageReceived`: Triggered when a media message is received.
-9. `onCustomMessageReceived`: Triggered when a custom message is received.
-10. `onTypingStarted`: Triggered when a typing indicator starts.
-11. `onTypingEnded`: Triggered when a typing indicator ends.
-12. `onMessagesDelivered`: Triggered when messages are delivered.
-13. `onMessagesRead`: Triggered when messages are read.
-14. `onMessageEdited`: Triggered when a message is edited.
-15. `onMessageDeleted`: Triggered when a message is deleted.
-16. `onTransientMessageReceived`: Triggered when a transient message is received.
-17. `onFormMessageReceived`: Triggered when a form message is received.
-18. `onCardMessageReceived`: Triggered when a card message is received.
-19. `onCustomInteractiveMessageReceived`: Triggered when a custom interactive message is received.
-20. `onInteractionGoalCompleted`: Triggered when an interaction goal is completed.
-21. `onSchedulerMessageReceived`: Triggered when a scheduler message is received.
-22. `onMessageReactionAdded`: Triggered when a reaction is added to a message.
-23. `onMessageReactionRemoved`: Triggered when a reaction is removed from a message.
-24. `ccReplyToMessage`: Triggered when the logged-in user replies to a message.
-25. `onMessagesDeliveredToAll`: Triggered when messages are delivered to all recipients.
-26. `onMessagesReadByAll`: Triggered when messages are read by all recipients.
-27. `onMessageModerated`: Triggered when a message is moderated.
-28. `onAIAssistantMessageReceived`: Triggered when an AI Assistant message is received.
-29. `onAIToolResultReceived`: Triggered when an AI tool result is received.
-30. `onAIToolArgumentsReceived`: Triggered when AI tool arguments are received.
-
-
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:flutter/material.dart';
-
-class MessageEventsExample extends StatefulWidget {
- const MessageEventsExample({super.key});
-
- @override
- State createState() => _MessageEventsExampleState();
-}
-
-class _MessageEventsExampleState extends State with CometChatMessageEventListener {
- String listenerID = "unique_listener_ID";
-
- @override
- void initState() {
- super.initState();
-
- CometChatMessageEvents.addMessagesListener(listenerID, this); // Add the listener
- }
-
- @override
- void dispose() {
- super.dispose();
-
- CometChatMessageEvents.removeMessagesListener(listenerID); // Remove the listener
- }
-
- @override
- void ccMessageSent(BaseMessage message, MessageStatus messageStatus) {
- // TODO("Not yet implemented")
- }
-
- @override
- void ccMessageEdited(BaseMessage message, MessageEditStatus status) {
- // TODO("Not yet implemented")
- }
-
- @override
- void ccMessageDeleted(BaseMessage message, EventStatus messageStatus) {
- // TODO("Not yet implemented")
- }
-
- @override
- void ccMessageRead(BaseMessage message) {
- // TODO("Not yet implemented")
- }
-
- @override
- void ccLiveReaction(String reaction) {
- // TODO("Not yet implemented")
- }
-
- @override
- void ccMessageForwarded(BaseMessage message, List? usersSent, List? groupsSent, MessageStatus status) {
- // TODO("Not yet implemented")
- }
-
- @override
- void ccReplyToMessage(BaseMessage message, MessageStatus status) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onTextMessageReceived(TextMessage textMessage) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onMediaMessageReceived(MediaMessage mediaMessage) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onCustomMessageReceived(CustomMessage customMessage) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onTypingStarted(TypingIndicator typingIndicator) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onTypingEnded(TypingIndicator typingIndicator) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onMessagesDelivered(MessageReceipt messageReceipt) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onMessagesRead(MessageReceipt messageReceipt) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onMessageEdited(BaseMessage message) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onMessageDeleted(BaseMessage message) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onTransientMessageReceived(TransientMessage message) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onFormMessageReceived(FormMessage formMessage) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onCardMessageReceived(CardMessage cardMessage) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onCustomInteractiveMessageReceived(
- CustomInteractiveMessage customInteractiveMessage) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onInteractionGoalCompleted(InteractionReceipt receipt) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onSchedulerMessageReceived(SchedulerMessage schedulerMessage) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onMessageReactionAdded(ReactionEvent reactionEvent) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onMessageReactionRemoved(ReactionEvent reactionEvent) {
- // TODO("Not yet implemented")
- }
-
- @override
- void ccReplyToMessage(BaseMessage message, MessageStatus status) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onMessagesDeliveredToAll(MessageReceipt messageReceipt) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onMessagesReadByAll(MessageReceipt messageReceipt) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onMessageModerated(BaseMessage message) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onAIAssistantMessageReceived(AIAssistantMessage aiAssistantMessage) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onAIToolResultReceived(AIToolResultMessage aiToolResultMessage) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onAIToolArgumentsReceived(AIToolArgumentMessage aiToolArgumentMessage) {
- // TODO("Not yet implemented")
+ CometChatMessageEvents.removeMessagesListener("listenerId");
}
@override
@@ -514,65 +142,33 @@ class _MessageEventsExampleState extends State with CometC
***
-## Call Events
-
-`CometChatCallEvents` emits events related to calls within the application. This class provides methods to listen to call-related events and handle them accordingly.
+### Conversation Events
-**Available Events:**
+`CometChatConversationEvents` emits events related to conversations.
-1. `ccOutgoingCall`: Triggered when the logged-in user initiates an outgoing call.
-2. `ccCallAccepted`: Triggered when a call is accepted.
-3. `ccCallRejected`: Triggered when a call is rejected.
-4. `ccCallEnded`: Triggered when a call is ended.
+1. `ccConversationDeleted`: Triggered when a conversation is deleted.
```dart
import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:flutter/material.dart';
-
-class CallEventsExample extends StatefulWidget {
- const CallEventsExample({super.key});
-
- @override
- State createState() => _CallEventsExampleState();
-}
-
-class _CallEventsExampleState extends State with CometChatCallEventListener {
- String listenerID = "unique_listener_ID";
+class _YourScreenState extends State with CometChatConversationEventListener {
@override
void initState() {
super.initState();
-
- CometChatCallEvents.addCallEventsListener(listenerID, this); // Add the listener
+ CometChatConversationEvents.addConversationListListener("listenerId", this);
}
@override
void dispose() {
super.dispose();
-
- CometChatCallEvents.removeCallEventsListener(listenerID); // Remove the listener
- }
-
- @override
- void ccOutgoingCall(Call call) {
- // TODO("Not yet implemented")
- }
-
- @override
- void ccCallAccepted(Call call) {
- // TODO("Not yet implemented")
+ CometChatConversationEvents.removeConversationListListener("listenerId");
}
@override
- void ccCallRejected(Call call) {
- // TODO("Not yet implemented")
- }
-
- @override
- void ccCallEnded(Call call) {
- // TODO("Not yet implemented")
+ void ccConversationDeleted(Conversation conversation) {
+ // Handle conversation deleted
}
@override
@@ -586,159 +182,15 @@ class _CallEventsExampleState extends State with CometChatCal
***
-## UI Events
+### UI Events
-`CometChatUIEvents` emits events related to UI components within the CometChat UI. This class provides methods to listen to UI-related events and handle them accordingly.
-
-**Available Events:**
-
-1. `showPanel`: Triggered to show an additional UI panel with custom elements.
-2. `hidePanel`: Triggered to hide a previously shown UI panel.
-3. `ccActiveChatChanged`: Triggered when the active chat changes, providing information about the current message, user, and group.
-4. `openChat`: Triggered to open a chat with a specific user or group.
-5. `ccComposeMessage`: Triggered when composing a message with a specific text and status.
-6. `onAiFeatureTapped`: Triggered when an AI feature is tapped for a specific user or group.
+`CometChatUIEvents` emits events related to UI interactions.
```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:flutter/material.dart';
-
-class UIEventsExample extends StatefulWidget {
- const UIEventsExample({super.key});
-
- @override
- State createState() => _UIEventsExampleState();
-}
-
-class _UIEventsExampleState extends State with CometChatUIEventListener {
- String listenerID = "unique_listener_ID";
-
- @override
- void initState() {
- super.initState();
-
- CometChatUIEvents.addUiListener(listenerID, this); // Add the listener
- }
-
- @override
- void dispose() {
- super.dispose();
-
- CometChatUIEvents.removeUiListener(listenerID); // Remove the listener
- }
-
- @override
- void showPanel(Map? id, CustomUIPosition uiPosition, WidgetBuilder child) {
- // TODO("Not yet implemented")
- }
-
- @override
- void hidePanel(Map? id, CustomUIPosition uiPosition) {
- // TODO("Not yet implemented")
- }
-
- @override
- void ccActiveChatChanged(Map? id, BaseMessage? lastMessage, User? user, Group? group, int unreadMessageCount) {
- // TODO("Not yet implemented")
- }
-
- @override
- void openChat(User? user, Group? group) {
- // TODO("Not yet implemented")
- }
-
- @override
- void ccComposeMessage(String text, MessageEditStatus status) {
- // TODO("Not yet implemented")
- }
-
- @override
- void onAiFeatureTapped(User? user, Group? group) {
- // TODO("Not yet implemented")
- }
-
- @override
- Widget build(BuildContext context) {
- return const Placeholder();
- }
-}
+// UI events are used internally by the UI Kit widgets
+// to communicate state changes across components
```
-
-***
-
-## Best Practices
-
-
-
- Always remove event listeners in the `dispose()` method to prevent memory leaks:
-
-
-
- ```dart
- @override
- void dispose() {
- super.dispose();
- CometChatMessageEvents.removeMessagesListener(listenerID);
- }
- ```
-
-
-
-
-
- Use unique listener IDs for each widget to avoid conflicts:
-
-
-
- ```dart
- String listenerID = "message_list_${widget.key}";
- ```
-
-
-
-
-
- Keep event handlers lightweight and avoid heavy operations:
-
-
-
- ```dart
- @override
- void ccMessageSent(BaseMessage message, MessageStatus messageStatus) {
- if (messageStatus == MessageStatus.sent) {
- // Update UI efficiently
- setState(() {
- // Minimal state update
- });
- }
- }
- ```
-
-
-
-
-
-***
-
-## Next Steps
-
-
-
- Learn how to display and manage messages with events
-
-
- Handle conversation events and updates
-
-
- Manage group events and member actions
-
-
- Explore available methods for UI Kit operations
-
-
-
-***
diff --git a/ui-kit/flutter/extensions.mdx b/ui-kit/flutter/extensions.mdx
index 82511a0ca..8beff4881 100644
--- a/ui-kit/flutter/extensions.mdx
+++ b/ui-kit/flutter/extensions.mdx
@@ -1,255 +1,86 @@
---
title: "Extensions"
-sidebarTitle: "Extensions"
-description: "Enhance your chat with built-in extensions including stickers, polls, collaborative tools, message translation, and link previews"
+description: "Use CometChat Flutter UI Kit extensions for stickers, polls, collaborative tools, reactions, smart replies, and link previews."
---
-
-
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_chat_uikit` |
-| Required setup | `CometChatUIKit.init(uiKitSettings: UIKitSettings)` then `CometChatUIKit.login(uid)` + Extensions enabled in [CometChat Dashboard](/fundamentals/extensions-overview) |
-| Extension categories | User Experience, User Engagement, Collaboration, Security |
-| Key components | `CometChatMessageComposer` → [Message Composer](/ui-kit/flutter/message-composer) (Stickers, Polls, Whiteboard, Document), `CometChatMessageList` → [Message List](/ui-kit/flutter/message-list) (Translation, Link Preview, Thumbnails) |
-| Activation | Enable each extension from the CometChat Dashboard — UI Kit auto-integrates them, no additional code required |
-
-
+## Overview
CometChat's UI Kit comes with built-in support for a wide variety of extensions that provide additional functionality. These extensions enhance the chatting experience, making it more interactive, secure, and efficient.
Activating any of the extensions in CometChat is a simple process done through your application's dashboard. Refer to our guide for detailed information on [Extensions](/fundamentals/extensions-overview).
-Once you have successfully enabled the desired extension in your dashboard, it will be reflected in your CometChat application upon initialization and successful login. The extension features will only be available if they are supported by CometChat UI Kit.
-
-***
+> **V6 Architecture Change:** In V5, extensions used a decorator/chain-of-responsibility pattern with `*Extension` and `*ExtensionDecorator` classes that wrapped the `DataSource` interface. V6 removes this entire pattern. Extension behavior is now handled directly by `MessageTemplateUtils` static methods. No registration is needed — just enable extensions in your CometChat Dashboard and they work automatically.
## Built-in Extensions
-The grouping below mirrors the CometChat Dashboard.
-
-### User Experience
-
-#### Link Preview
-
-The Link Preview extension provides a summary of the URL shared in the chat. It includes the title, a description, and a thumbnail image from the web page. For a comprehensive understanding and guide on implementing and using the Link Preview Extension, refer to our specific guide on the [Link Preview Extension](/fundamentals/link-preview).
-
-Once you have successfully activated the [Link Preview Extension](/fundamentals/link-preview) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Widget](/ui-kit/flutter/message-list) widget of UI Kits.
-
-
-
-
-
-***
-
-#### Thumbnail Generation
-
-The Thumbnail Generation extension automatically creates a smaller preview image whenever a larger image is shared, helping to reduce the upload/download time and bandwidth usage. For a comprehensive understanding and guide on implementing and using the Thumbnail Generation Extension, refer to our specific guide on the [Thumbnail Generation Extension](/fundamentals/thumbnail-generation).
-
-Once you have successfully activated the [Thumbnail Generation Extension](/fundamentals/thumbnail-generation) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Widget](/ui-kit/flutter/message-list) widget of UI Kits.
-
-
-
-
-
-***
-
-#### Bitly
-
-Shortens long URLs in text messages using Bitly. See [Bitly Extension](/fundamentals/bitly).
-
-***
-
-#### TinyURL
-
-URL shortening using TinyURL. See [TinyURL Extension](/fundamentals/tinyurl).
-
-***
-
-#### Message Shortcuts
-
-Sends predefined messages using short codes (e.g., `!hb` expands to `Happy birthday!`). See [Message Shortcuts Extension](/fundamentals/message-shortcuts).
-
-***
-
-#### Pin Message
-
-Pins important messages in a conversation for easy access. See [Pin Message Extension](/fundamentals/pin-message).
-
-***
-
-#### Save Message
-
-Bookmarks messages for later reference. Saved messages are private to the user. See [Save Message Extension](/fundamentals/save-message).
-
-***
-
-#### Rich Media Preview
-
-Generates rich preview panels for URLs using iFramely. See [Rich Media Preview Extension](/fundamentals/rich-media-preview).
-
-***
-
-#### Voice Transcription
-
-Converts audio messages to text. See [Voice Transcription Extension](/fundamentals/voice-transcription).
-
-***
-
-### User Engagement
-
-#### Stickers
-
-The Stickers extension allows users to express their emotions more creatively. It adds a much-needed fun element to the chat by allowing users to send various pre-designed stickers. For a comprehensive understanding and guide on implementing and using the Sticker Extension, refer to our specific guide on the [Sticker Extension](/fundamentals/stickers).
-
-Once you have successfully activated the [Sticker Extension](/fundamentals/stickers) from your CometChat Dashboard, the feature will automatically be incorporated into the [Message Composer](/ui-kit/flutter/message-composer) widget of UI Kits.
-
-
-
-
-
-***
-
-#### Polls
-
-The Polls extension enhances group discussions by allowing users to create polls. Users can ask questions with a predefined list of answers, enabling a quick, organized way to gather group opinions. For a comprehensive understanding and guide on implementing and using the Polls Extension, refer to our specific guide on the [Polls Extension](/fundamentals/polls).
-
-Once you have successfully activated the [Polls Extension](/fundamentals/polls) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/flutter/message-composer) widget of UI Kits.
-
-
-
-
-
-***
-
-#### Message Translation
-
-The Message Translation extension in CometChat is designed to translate any message into your local locale. It eliminates language barriers, making the chat more inclusive. For a comprehensive understanding and guide on implementing and using the Message Translation Extension, refer to our specific guide on the [Message Translation Extension](/fundamentals/message-translation).
-
-Once you have successfully activated the [Message Translation Extension](/fundamentals/message-translation) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of [MessageList Widget](/ui-kit/flutter/message-list) widget of UI Kits.
-
-
-
-
-
-***
-
-#### Giphy
-
-Search and share GIFs from Giphy. See [Giphy Extension](/fundamentals/giphy).
-
-***
-
-#### Tenor
-
-Search and share GIFs from Tenor. See [Tenor Extension](/fundamentals/tenor).
-
-***
-
-#### Stipop
-
-Integrates Stipop's sticker library. See [Stipop Extension](/fundamentals/stickers-stipop).
-
-***
-
-#### Reminders
-
-Sets reminders for messages or creates personal reminders. A bot sends a notification when due. See [Reminders Extension](/fundamentals/reminders).
-
-***
-
-### Collaboration
-
-#### Collaborative Whiteboard
-
-The Collaborative Whiteboard extension facilitates real-time collaboration. Users can draw, brainstorm, and share ideas on a shared digital whiteboard. For a comprehensive understanding and guide on implementing and using the Collaborative Whiteboard Extension, refer to our specific guide on the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard).
-
-Once you have successfully activated the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/flutter/message-composer) widget of UI Kits.
-
-
-
-
-
-***
-
-#### Collaborative Document
+### Stickers
-With the Collaborative Document extension, users can work together on a shared document. This feature is essential for remote teams where document collaboration is a recurring requirement. For a comprehensive understanding and guide on implementing and using the Collaborative Document Extension, refer to our specific guide on the [Collaborative Document Extension](/fundamentals/collaborative-document).
+The Stickers extension allows users to express their emotions more creatively with pre-designed stickers.
-Once you have successfully activated the [Collaborative Document Extension](/fundamentals/collaborative-document) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/flutter/message-composer) widget of UI Kits.
+Once activated from your CometChat Dashboard, the feature will automatically be incorporated into the [Message Composer](/ui-kit/flutter/message-composer) widget.
-
-
-
+### Polls
-***
+The Polls extension enhances group discussions by allowing users to create polls with predefined answers.
-### Security
+Once activated from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/flutter/message-composer) widget.
-#### Disappearing Messages
+### Collaborative Whiteboard
-Messages auto-delete after a specified interval. Works for 1:1 and group messages. See [Disappearing Messages Extension](/fundamentals/disappearing-messages).
+The Collaborative Whiteboard extension facilitates real-time collaboration on a shared digital whiteboard.
-***
+Once activated from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/flutter/message-composer) widget.
-### Customer Support
+### Collaborative Document
-#### Chatwoot
+Users can work together on a shared document with the Collaborative Document extension.
-Routes user messages to Chatwoot for customer support. See [Chatwoot Extension](/fundamentals/chatwoot).
+Once activated from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/flutter/message-composer) widget.
-***
+### Message Translation
-#### Intercom
+The Message Translation extension translates any message into your local locale, eliminating language barriers.
-Integrates Intercom for in-app customer support. See [Intercom Extension](/fundamentals/intercom).
+Once activated from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of [MessageList Widget](/ui-kit/flutter/message-list).
-***
+### Link Preview
-### Smart Chat Features
+The Link Preview extension provides a summary of URLs shared in the chat, including title, description, and thumbnail.
-For AI-powered features like Conversation Starter, Smart Replies, and Conversation Summary, see [AI Features](/ui-kit/flutter/ai-features).
+Once activated from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Widget](/ui-kit/flutter/message-list).
-***
+### Thumbnail Generation
-## Enabling Extensions
+The Thumbnail Generation extension automatically creates smaller preview images for shared images, reducing bandwidth usage.
-To enable extensions in your Flutter app, configure them during initialization:
+Once activated from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Widget](/ui-kit/flutter/message-list).
-
-
-```dart
-UIKitSettings uiKitSettings = (UIKitSettingsBuilder()
- ..appId = "YOUR_APP_ID"
- ..region = "YOUR_REGION"
- ..authKey = "YOUR_AUTH_KEY"
- ..subscriptionType = CometChatSubscriptionType.allUsers
- ..extensions = CometChatUIKitChatExtensions.getDefaultExtensions() // Enable all default extensions
-).build();
+## V6 Extension Architecture
-await CometChatUIKit.init(uiKitSettings: uiKitSettings);
-```
-
-
+### What Changed
+| Aspect | V5 | V6 |
+|---|---|---|
+| Registration | `UIKitSettings.extensions = CometChatUIKitChatExtensions.getDefaultExtensions()` | Not needed — built-in |
+| Architecture | Decorator chain (up to 10 layers) | `MessageTemplateUtils` static methods (1 hop) |
+| Startup cost | 9 `isExtensionEnabled()` network calls | None |
+| Files removed | — | 27 files (~7000+ lines) |
+| UI widgets | Preserved | Preserved (bubbles, configs, styles) |
-***
+### What Was Removed
-## Next Steps
+- All `*Extension` classes (e.g., `StickersExtension`, `PollsExtension`)
+- All `*ExtensionDecorator` classes (e.g., `StickersExtensionDecorator`)
+- `ChatConfigurator`, `DataSource` interface, `ExtensionsDataSource`
+- `CometChatUIKitChatExtensions`, `CometChatUIKitChatAIFeatures`
+- `CometChatUIKit.getDataSource()` method
-
-
- Learn how extensions integrate with the message composer
-
-
- See how extensions enhance message display
-
-
- Explore all available extensions in detail
-
-
- Enable extensions from your CometChat Dashboard
-
-
+### What Was Preserved
-***
+All extension UI widgets remain:
+- `CometChatStickerBubble`, `CometChatStickerKeyboard`
+- `CometChatPollsBubble`, `CometChatCreatePoll`
+- `CometChatLinkPreviewBubble`
+- `CometChatCollaborativeBubble`, `CometChatCollaborativeWebView`
+- `MessageTranslationBubble`
+- All configuration and style classes
diff --git a/ui-kit/flutter/flutter-conversation.mdx b/ui-kit/flutter/flutter-conversation.mdx
index af6bd97a7..7fd62753c 100644
--- a/ui-kit/flutter/flutter-conversation.mdx
+++ b/ui-kit/flutter/flutter-conversation.mdx
@@ -1,98 +1,70 @@
---
title: "Conversation List + Message View"
-sidebarTitle: "Conversation + Message"
-description: "Build a two-panel chat interface with conversation list and message view using Flutter UI Kit widgets."
+sidebarTitle: "Conversation List + Message View"
+description: "Build a two-panel CometChat Flutter UI Kit layout with a conversation list, active message view, headers, lists, and composer."
---
-
+The Conversation List + Message View layout provides a seamless two-panel chat interface. This layout allows users to switch between conversations while keeping the active chat open.
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_chat_uikit` |
-| Framework | Flutter |
-| Components | `CometChatConversations`, `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` |
-| Layout | Two-panel — conversation list + message view with Navigator push |
-| Prerequisite | Complete [Getting Started](/ui-kit/flutter/getting-started) Steps 1–4 first |
-| Pattern | WhatsApp, Telegram, Slack |
+## Integration
-
+### Step 1: Create the Conversations Screen
-This guide builds a two-panel chat layout — conversation list that navigates to a message screen. Users tap a conversation to open it.
-
-This assumes you've already completed [Getting Started](/ui-kit/flutter/getting-started) (project created, UI Kit installed, init + login working).
-
-
-
-
-
-[View Sample App on GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app)
-
----
-
-## What You're Building
-
-Two screens working together:
-
-1. **Conversation list** — shows all active conversations (users and groups)
-2. **Message screen** — header + messages + composer for the selected conversation
-
----
-
-## Step 1 — Create the Conversations Screen
-
-The `CometChatConversations` widget displays all conversations. Tapping one navigates to the message screen.
-
-```dart title="lib/conversations_page.dart"
+
+
+```dart
import 'package:flutter/material.dart';
import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'messages_screen.dart';
-class ConversationsPage extends StatelessWidget {
- const ConversationsPage({super.key});
+class ConversationsScreen extends StatelessWidget {
+ const ConversationsScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
- body: SafeArea(
- child: CometChatConversations(
- onItemTap: (conversation) {
- final target = conversation.conversationWith;
- Navigator.push(
- context,
- MaterialPageRoute(
- builder: (_) => MessagesScreen(
- user: target is User ? target : null,
- group: target is Group ? target : null,
- ),
- ),
- );
- },
- ),
+ appBar: AppBar(title: const Text('Conversations')),
+ body: CometChatConversations(
+ onItemTap: (conversation) {
+ _openChat(context, conversation);
+ },
),
);
}
-}
-```
-Key points:
-- `onItemTap` fires when a conversation is tapped, passing the `Conversation` object.
-- `conversationWith` returns either a `User` or `Group` — pass the correct one to the message screen.
+ void _openChat(BuildContext context, Conversation conversation) {
+ User? user;
+ Group? group;
----
+ if (conversation.conversationType == 'user') {
+ user = conversation.conversationWith as User;
+ } else {
+ group = conversation.conversationWith as Group;
+ }
-## Step 2 — Create the Messages Screen
+ Navigator.push(
+ context,
+ MaterialPageRoute(
+ builder: (_) => ChatScreen(user: user, group: group),
+ ),
+ );
+ }
+}
+```
+
+
-The message screen combines header, message list, and composer.
+### Step 2: Create the Chat Screen
-```dart title="lib/messages_screen.dart"
-import 'package:flutter/material.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+Use the same `MessagesScreen` pattern from [One-to-One Chat](/ui-kit/flutter/flutter-one-to-one-chat#step-2-render-the-messages-component):
-class MessagesScreen extends StatelessWidget {
+
+
+```dart
+class ChatScreen extends StatelessWidget {
final User? user;
final Group? group;
- const MessagesScreen({super.key, this.user, this.group});
+ const ChatScreen({super.key, this.user, this.group});
@override
Widget build(BuildContext context) {
@@ -101,9 +73,7 @@ class MessagesScreen extends StatelessWidget {
body: SafeArea(
child: Column(
children: [
- Expanded(
- child: CometChatMessageList(user: user, group: group),
- ),
+ Expanded(child: CometChatMessageList(user: user, group: group)),
CometChatMessageComposer(user: user, group: group),
],
),
@@ -112,38 +82,78 @@ class MessagesScreen extends StatelessWidget {
}
}
```
+
+
-| Component | Purpose |
-| --- | --- |
-| `CometChatMessageHeader` | Shows conversation title, avatar, and call buttons |
-| `CometChatMessageList` | Displays messages with real-time updates |
-| `CometChatMessageComposer` | Input field for text, media, and attachments |
+### Step 3: Complete Example
----
+
+
+```dart
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-## Step 3 — Run the App
+void main() {
+ runApp(const MyApp());
+}
-```bash
-flutter run
-```
+class MyApp extends StatelessWidget {
+ const MyApp({super.key});
-You should see the conversation list. Tapping a conversation navigates to the message screen.
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: 'CometChat V6',
+ theme: ThemeData(useMaterial3: true),
+ home: const InitPage(),
+ );
+ }
+}
----
+class InitPage extends StatefulWidget {
+ const InitPage({super.key});
+
+ @override
+ State createState() => _InitPageState();
+}
-## Next Steps
-
-
-
- Customize the conversation list
-
-
- Customize the message view
-
-
- Customize colors and styles
-
-
- Handle real-time events
-
-
+class _InitPageState extends State {
+ bool _ready = false;
+
+ @override
+ void initState() {
+ super.initState();
+ _init();
+ }
+
+ Future _init() async {
+ UIKitSettings settings = (UIKitSettingsBuilder()
+ ..subscriptionType = CometChatSubscriptionType.allUsers
+ ..autoEstablishSocketConnection = true
+ ..region = "REGION"
+ ..appId = "APP_ID"
+ ..authKey = "AUTH_KEY")
+ .build();
+
+ CometChatUIKit.init(
+ uiKitSettings: settings,
+ onSuccess: (_) {
+ CometChatUIKit.login("cometchat-uid-1", onSuccess: (_) {
+ setState(() => _ready = true);
+ }, onError: (e) {});
+ },
+ onError: (e) {},
+ );
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ if (!_ready) {
+ return const Scaffold(body: Center(child: CircularProgressIndicator()));
+ }
+ return const ConversationsScreen();
+ }
+}
+```
+
+
diff --git a/ui-kit/flutter/flutter-one-to-one-chat.mdx b/ui-kit/flutter/flutter-one-to-one-chat.mdx
index 5b6d8c0ab..ee8f8d846 100644
--- a/ui-kit/flutter/flutter-one-to-one-chat.mdx
+++ b/ui-kit/flutter/flutter-one-to-one-chat.mdx
@@ -1,57 +1,116 @@
---
-title: "One-to-One / Group Chat"
-sidebarTitle: "One-to-One / Group Chat"
-description: "Build a focused one-to-one or group chat experience in Flutter with CometChat UI Kit."
+title: "Building A One To One/Group Chat Experience"
+sidebarTitle: "One To One/Group Chat"
+description: "Build one-to-one and group chat screens in CometChat Flutter UI Kit with message headers, message lists, composers, and user lookup."
---
-
-
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_chat_uikit` |
-| Framework | Flutter |
-| Components | `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` |
-| Layout | Single chat window — no conversation list |
-| Prerequisite | Complete [Getting Started](/ui-kit/flutter/getting-started) Steps 1–4 first |
-| Pattern | Support chat, embedded widgets, focused messaging |
-
-
-
-This guide builds a single chat window — no conversation list. Users go directly into a one-to-one or group chat. Good for support chat, deep links, or focused messaging.
-
-This assumes you've already completed [Getting Started](/ui-kit/flutter/getting-started) (project created, UI Kit installed, init + login working).
-
-
-
-
-
-[View Sample App on GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app)
-
----
+The One-to-One Chat feature provides a streamlined direct messaging interface, ideal for support chats, dating apps, and private messaging platforms.
+
+***
+
+### Step 1: Render the Message View
+
+Fetch the target user and display the messaging screen. V6 uses the same `CometChatUIKit` initialization but with BLoC-powered widgets.
+
+```dart main.dart
+@override
+Widget build(BuildContext context) {
+ return Scaffold(
+ body: SafeArea(
+ child: FutureBuilder(
+ future: fetchCometChatUser("cometchat-uid-2"),
+ builder: (context, snapshot) {
+ if (snapshot.connectionState == ConnectionState.waiting) {
+ return const Center(child: CircularProgressIndicator());
+ } else if (snapshot.hasError) {
+ return Center(child: Text("Error: ${snapshot.error}"));
+ } else if (snapshot.hasData) {
+ return MessagesScreen(user: snapshot.data!);
+ } else {
+ return const Center(child: Text("User not found"));
+ }
+ },
+ ),
+ ),
+ );
+}
+```
-## What You're Building
+#### Full Example: main.dart
-Three components stacked vertically:
+
+
+```dart
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'messages_screen.dart';
+import 'cometchat_config.dart';
+import 'dart:async';
-1. **Chat header** — displays recipient name, avatar, and call buttons
-2. **Message list** — real-time chat history
-3. **Message composer** — text input with media and emojis
+void main() => runApp(const MyApp());
----
+class MyApp extends StatelessWidget {
+ const MyApp({super.key});
-## Step 1 — Create the Chat Screen
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: 'CometChat V6 UI Kit',
+ theme: ThemeData(
+ colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
+ useMaterial3: true,
+ ),
+ home: const Home(),
+ );
+ }
+}
-The app fetches a user on mount and renders the message components.
+class Home extends StatelessWidget {
+ const Home({super.key});
+
+ Future _initializeAndLogin() async {
+ final settings = UIKitSettingsBuilder()
+ ..subscriptionType = CometChatSubscriptionType.allUsers
+ ..autoEstablishSocketConnection = true
+ ..appId = CometChatConfig.appId
+ ..region = CometChatConfig.region
+ ..authKey = CometChatConfig.authKey;
+
+ await CometChatUIKit.init(uiKitSettings: settings.build());
+ await CometChatUIKit.login(
+ 'cometchat-uid-1',
+ onSuccess: (_) => debugPrint('Login Successful'),
+ onError: (err) => throw Exception('Login Failed: $err'),
+ );
+ }
-```dart title="lib/chat_screen.dart"
-import 'dart:async';
-import 'package:flutter/material.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+ @override
+ Widget build(BuildContext context) {
+ return FutureBuilder(
+ future: _initializeAndLogin(),
+ builder: (ctx, snap) {
+ if (snap.connectionState != ConnectionState.done) {
+ return const Scaffold(
+ body: SafeArea(child: Center(child: CircularProgressIndicator())),
+ );
+ }
+ if (snap.hasError) {
+ return Scaffold(
+ body: SafeArea(
+ child: Center(child: Text('Error:\n${snap.error}', textAlign: TextAlign.center)),
+ ),
+ );
+ }
+ return const MessagesPage();
+ },
+ );
+ }
+}
-class ChatScreen extends StatelessWidget {
- const ChatScreen({super.key});
+class MessagesPage extends StatelessWidget {
+ const MessagesPage({super.key});
- Future fetchUser(String uid) async {
+ Future fetchCometChatUser(String uid) async {
final completer = Completer();
CometChat.getUser(
uid,
@@ -63,104 +122,112 @@ class ChatScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
- return FutureBuilder(
- future: fetchUser("cometchat-uid-2"), // Replace with target UID
- builder: (context, snapshot) {
- if (snapshot.connectionState == ConnectionState.waiting) {
- return const Scaffold(
- body: Center(child: CircularProgressIndicator()),
- );
- }
- if (snapshot.hasError) {
- return Scaffold(
- body: Center(child: Text('Error: ${snapshot.error}')),
- );
- }
- final user = snapshot.data!;
- return Scaffold(
- appBar: CometChatMessageHeader(user: user),
- body: SafeArea(
- child: Column(
- children: [
- Expanded(child: CometChatMessageList(user: user)),
- CometChatMessageComposer(user: user),
- ],
- ),
- ),
- );
- },
+ return Scaffold(
+ body: SafeArea(
+ child: FutureBuilder(
+ future: fetchCometChatUser("cometchat-uid-2"),
+ builder: (context, snapshot) {
+ if (snapshot.connectionState == ConnectionState.waiting) {
+ return const Center(child: CircularProgressIndicator());
+ } else if (snapshot.hasError) {
+ return Center(child: Text("Error: ${snapshot.error}"));
+ } else if (snapshot.hasData) {
+ return MessagesScreen(user: snapshot.data!);
+ } else {
+ return const Center(child: Text("User not found"));
+ }
+ },
+ ),
+ ),
);
}
}
```
+
+
-Key points:
-- `CometChat.getUser(uid)` fetches the user object — you need a real user object, not a manually constructed one.
-- Pass either `user` or `group` to the message components, never both.
-
----
+### Step 2: Render the Messages Component
-## Switching to Group Chat
+Compose the messaging view using:
-To load a group chat instead, use `CometChat.getGroup()`:
+* [Message Header](/ui-kit/flutter/message-header)
+* [Message List](/ui-kit/flutter/message-list)
+* [Message Composer](/ui-kit/flutter/message-composer)
+
+
```dart
-Future fetchGroup(String guid) async {
- final completer = Completer();
- CometChat.getGroup(
- guid,
- onSuccess: (group) => completer.complete(group),
- onError: (error) => completer.completeError(error),
- );
- return completer.future;
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+class MessagesScreen extends StatefulWidget {
+ final User? user;
+ final Group? group;
+
+ const MessagesScreen({Key? key, this.user, this.group}) : super(key: key);
+
+ @override
+ State createState() => _MessagesScreenState();
}
-// Then in build():
-FutureBuilder(
- future: fetchGroup("your-group-guid"),
- builder: (context, snapshot) {
- if (snapshot.hasData) {
- final group = snapshot.data!;
- return Scaffold(
- appBar: CometChatMessageHeader(group: group),
- body: Column(
+class _MessagesScreenState extends State {
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ appBar: CometChatMessageHeader(
+ user: widget.user,
+ group: widget.group,
+ ),
+ body: SafeArea(
+ child: Column(
children: [
- Expanded(child: CometChatMessageList(group: group)),
- CometChatMessageComposer(group: group),
+ Expanded(
+ child: CometChatMessageList(
+ user: widget.user,
+ group: widget.group,
+ ),
+ ),
+ CometChatMessageComposer(
+ user: widget.user,
+ group: widget.group,
+ ),
],
),
- );
- }
- return const CircularProgressIndicator();
- },
-)
+ ),
+ );
+ }
+}
```
+
+
+
----
-## Step 2 — Run the App
+***
-```bash
+### Step 3: Run the App
+
+```
flutter run
```
-You should see the chat window load with the conversation for the UID you set.
+This launches the app with the one-to-one chat interface featuring the message header, list, and composer.
----
+***
+
+## Key V6 Differences
+
+| Aspect | V5 | V6 |
+|---|---|---|
+| Composite widget | `CometChatMessages` wraps header + list + composer | No composite — compose individually |
+| State management | GetX controllers | BLoC pattern (`MessageListBloc`, `MessageComposerBloc`) |
+| Extensions | `CometChatUIKitChatExtensions.getDefaultExtensions()` | Extensions handled via `MessageTemplateUtils` |
+| Rich text | Not available | Built-in rich text formatting and code blocks |
+
+***
## Next Steps
-
-
- Customize the message view
-
-
- Add a conversation list
-
-
- Customize colors and styles
-
-
- Handle real-time events
-
-
+* [Advanced Customizations](/ui-kit/flutter/theme-introduction) — Personalize the chat UI to align with your brand.
+* [Message List](/ui-kit/flutter/message-list) — Customize message display and behavior.
+* [Message Composer](/ui-kit/flutter/message-composer) — Configure rich text, attachments, and audio recording.
diff --git a/ui-kit/flutter/flutter-tab-based-chat.mdx b/ui-kit/flutter/flutter-tab-based-chat.mdx
index ba02849dc..e8379fb5f 100644
--- a/ui-kit/flutter/flutter-tab-based-chat.mdx
+++ b/ui-kit/flutter/flutter-tab-based-chat.mdx
@@ -1,53 +1,96 @@
---
-title: "Tab-Based Chat"
-sidebarTitle: "Tab-Based Chat"
-description: "Build a tab-based messaging UI with chats, calls, users, and groups in Flutter with CometChat UI Kit."
+title: "Building A Messaging UI With Tabs, Sidebar, And Message View"
+sidebarTitle: "Tab Based Chat Experience"
+description: "Build a tab-based CometChat Flutter UI Kit chat UI with conversations, users, groups, sidebar navigation, and message view."
---
-
+This guide walks you through creating a tab-based messaging UI using Flutter and CometChat V6 UIKit. The UI includes sections for Chats, Users, and Groups, allowing seamless navigation.
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_chat_uikit` |
-| Framework | Flutter |
-| Components | `CometChatConversations`, `CometChatCallLogs`, `CometChatUsers`, `CometChatGroups`, `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` |
-| Layout | Bottom navigation tabs (Chats, Calls, Users, Groups) + message view |
-| Prerequisite | Complete [Getting Started](/ui-kit/flutter/getting-started) Steps 1–4 first |
-| Pattern | Full-featured messaging app with multiple sections |
+***
-
+## User Interface Preview
-This guide builds a tabbed messaging UI — Chats, Calls, Users, and Groups tabs with bottom navigation. Good for full-featured apps that need more than just conversations.
+This layout consists of:
-This assumes you've already completed [Getting Started](/ui-kit/flutter/getting-started) (project created, UI Kit installed, init + login working).
+1. Sidebar (Conversation List) — Displays recent conversations with active users and groups.
+2. Message View — Shows the selected chat with real-time messages.
+3. Message Input Box — Allows users to send messages seamlessly.
-
-
-
+***
-[View Sample App on GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app)
+### Step 1: Render the Tab Component
----
+Set up initialization and the tab-based layout. In V6, all list widgets (`CometChatConversations`, `CometChatUsers`, `CometChatGroups`) are powered by BLoC.
-## What You're Building
+#### Full Example: main.dart
-Three sections working together:
+
+
+```dart
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'messages_screen.dart';
+import 'cometchat_config.dart';
-1. **Bottom navigation** — switches between Chats, Calls, Users, and Groups
-2. **Page view** — renders the list for the active tab
-3. **Message view** — header + messages + composer for the selected item
+void main() => runApp(const MyApp());
----
+class MyApp extends StatelessWidget {
+ const MyApp({super.key});
-## Step 1 — Create the Tabs Screen
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: 'CometChat V6 UI Kit',
+ theme: ThemeData(
+ colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
+ useMaterial3: true,
+ ),
+ home: const Home(),
+ );
+ }
+}
-The tabs screen uses `BottomNavigationBar` and `PageView` to create a tabbed interface.
+class Home extends StatelessWidget {
+ const Home({super.key});
+
+ Future _initializeAndLogin() async {
+ final settings = UIKitSettingsBuilder()
+ ..subscriptionType = CometChatSubscriptionType.allUsers
+ ..autoEstablishSocketConnection = true
+ ..appId = CometChatConfig.appId
+ ..region = CometChatConfig.region
+ ..authKey = CometChatConfig.authKey;
+
+ await CometChatUIKit.init(uiKitSettings: settings.build());
+ await CometChatUIKit.login(
+ 'cometchat-uid-1',
+ onSuccess: (_) => debugPrint('Login Successful'),
+ onError: (err) => throw Exception('Login Failed: $err'),
+ );
+ }
-```dart title="lib/tabs_screen.dart"
-import 'package:flutter/material.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';
-import 'messages_screen.dart';
+ @override
+ Widget build(BuildContext context) {
+ return FutureBuilder(
+ future: _initializeAndLogin(),
+ builder: (ctx, snap) {
+ if (snap.connectionState != ConnectionState.done) {
+ return const Scaffold(
+ body: SafeArea(child: Center(child: CircularProgressIndicator())),
+ );
+ }
+ if (snap.hasError) {
+ return Scaffold(
+ body: SafeArea(
+ child: Center(child: Text('Error:\n${snap.error}', textAlign: TextAlign.center)),
+ ),
+ );
+ }
+ return const TabsScreen();
+ },
+ );
+ }
+}
class TabsScreen extends StatefulWidget {
const TabsScreen({super.key});
@@ -61,61 +104,50 @@ class _TabsScreenState extends State {
final PageController _pageController = PageController();
void _onItemTapped(int index) {
- setState(() => _selectedIndex = index);
+ setState(() {
+ _selectedIndex = index;
+ });
_pageController.jumpToPage(index);
}
- @override
- void dispose() {
- _pageController.dispose();
- super.dispose();
- }
-
@override
Widget build(BuildContext context) {
return Scaffold(
body: PageView(
controller: _pageController,
- onPageChanged: (index) => setState(() => _selectedIndex = index),
+ onPageChanged: (index) {
+ setState(() {
+ _selectedIndex = index;
+ });
+ },
children: [
CometChatConversations(
+ showBackButton: false,
onItemTap: (conversation) {
- final target = conversation.conversationWith;
Navigator.push(
context,
MaterialPageRoute(
- builder: (_) => MessagesScreen(
- user: target is User ? target : null,
- group: target is Group ? target : null,
+ builder: (context) => MessagesScreen(
+ user: conversation.conversationWith is User
+ ? conversation.conversationWith as User
+ : null,
+ group: conversation.conversationWith is Group
+ ? conversation.conversationWith as Group
+ : null,
),
),
);
},
),
- CometChatCallLogs(),
- CometChatUsers(
- onItemTap: (user) => Navigator.push(
- context,
- MaterialPageRoute(builder: (_) => MessagesScreen(user: user)),
- ),
- ),
- CometChatGroups(
- onItemTap: (group) => Navigator.push(
- context,
- MaterialPageRoute(builder: (_) => MessagesScreen(group: group)),
- ),
- ),
+ CometChatUsers(),
+ CometChatGroups(),
],
),
bottomNavigationBar: BottomNavigationBar(
- type: BottomNavigationBarType.fixed,
currentIndex: _selectedIndex,
onTap: _onItemTapped,
- selectedItemColor: Colors.deepPurple,
- unselectedItemColor: Colors.grey,
items: const [
- BottomNavigationBarItem(icon: Icon(Icons.chat), label: "Chats"),
- BottomNavigationBarItem(icon: Icon(Icons.call), label: "Calls"),
+ BottomNavigationBarItem(icon: Icon(Icons.chat), label: "Chat"),
BottomNavigationBarItem(icon: Icon(Icons.person), label: "Users"),
BottomNavigationBarItem(icon: Icon(Icons.group), label: "Groups"),
],
@@ -124,19 +156,16 @@ class _TabsScreenState extends State {
}
}
```
+
+
-Key points:
-- `PageView` enables swipeable pages for each tab.
-- `BottomNavigationBar` provides quick access to different sections.
-- Each list component navigates to `MessagesScreen` on item tap.
-
----
-
-## Step 2 — Create the Messages Screen
+### Step 2: Render the Messages Component
-Same as the [Conversation + Message](/ui-kit/flutter/flutter-conversation) guide:
+Use the same `MessagesScreen` pattern from [One-to-One Chat](/ui-kit/flutter/flutter-one-to-one-chat#step-2-render-the-messages-component):
-```dart title="lib/messages_screen.dart"
+
+
+```dart
import 'package:flutter/material.dart';
import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
@@ -162,43 +191,24 @@ class MessagesScreen extends StatelessWidget {
}
}
```
+
+
----
-
-## Step 3 — Run the App
-```bash
-flutter run
-```
-You should see the tab bar at the bottom. Switch between Chats, Calls, Users, and Groups — tapping any item opens the message view.
+***
----
+### Step 3: Run the App
-## Tab Descriptions
+```
+flutter run
+```
-| Tab | Component | Purpose |
-| --- | --- | --- |
-| Chats | `CometChatConversations` | Recent conversations with unread counts |
-| Calls | `CometChatCallLogs` | Call history (audio/video) |
-| Users | `CometChatUsers` | Browse and search all users |
-| Groups | `CometChatGroups` | Browse and join groups |
+This launches the app with the tab-based chat experience. Navigate between Chats, Users, and Groups tabs and interact with the messaging features.
----
+***
## Next Steps
-
-
- Customize the conversation list
-
-
- Configure call history
-
-
- Manage user and group lists
-
-
- Customize colors and styles
-
-
+* [Advanced Customizations](/ui-kit/flutter/theme-introduction) — Personalize the chat UI to align with your brand.
+* [Component Styling](/ui-kit/flutter/component-styling) — Fine-tune individual component appearances.
diff --git a/ui-kit/flutter/getting-started.mdx b/ui-kit/flutter/getting-started.mdx
index 1e58549c3..d25242440 100644
--- a/ui-kit/flutter/getting-started.mdx
+++ b/ui-kit/flutter/getting-started.mdx
@@ -1,150 +1,215 @@
---
-title: "Getting Started"
+title: "Getting Started With CometChat Flutter UI Kit V6"
sidebarTitle: "Getting Started"
-description: "Add CometChat to a Flutter app in 5 steps: create project, install, init, login, render."
+description: "Set up CometChat Flutter UI Kit V6 with app credentials, package installation, initialization, users, groups, messages, and calls."
---
-
+CometChat UI Kit V6 for Flutter is a package of pre-assembled UI elements built on clean architecture with BLoC state management. It provides essential messaging functionalities with options for light and dark themes, diverse fonts, colors, and extensive customization capabilities.
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_chat_uikit` |
-| Init | `CometChatUIKit.init(uiKitSettings)` — must resolve before `login()` |
-| Login | `CometChatUIKit.login("UID")` — must resolve before rendering widgets |
-| Order | `init()` → `login()` → render. Breaking this order = blank screen |
-| Auth Key | Dev/testing only. Use Auth Token in production |
-| Calling | Optional. Install `cometchat_calls_uikit` to enable |
-| Platforms | iOS 13.0+, Android API 24+ (with calling) |
-| AI Skills | `npx @cometchat/skills add` — [GitHub](https://github.com/cometchat/cometchat-skills) |
+CometChat UI Kit V6 supports both one-to-one and group conversations. Follow the guide below to initiate conversations from scratch.
-
+## Prerequisites
-This guide walks you through adding CometChat to a Flutter app. By the end you'll have a working chat UI.
+Before installing the **UI Kit**, you need to create a CometChat application on the CometChat Dashboard, which includes all the necessary data for a chat service, such as users, groups, calls, and messages. You will require the `App ID`, `AuthKey`, and `Region` of your CometChat application when initializing the SDK.
-
-
-
+**i. Register on CometChat**
----
+* You need to register on the **CometChat Dashboard** first. [Click here to sign up](https://app.cometchat.com/login).
-## Integrate with AI Coding Agents
+**ii. Get Your Application Keys**
-Skip the manual steps — use [CometChat Skills](https://github.com/cometchat/cometchat-skills) to integrate via your AI coding agent. Your agent has a short conversation with you to understand your project and chat requirements, then writes production-grade integration code tailored to the files you already have.
+* Create a **new app**
+* Head over to the **QuickStart** or **API & Auth Keys section** and note the **App ID**, **Auth Key**, and **Region**.
-```bash
-npx @cometchat/skills add
-```
+> Each CometChat application can be integrated with a single client app. Within the same application, users can communicate with each other across all platforms, whether they are on mobile devices or on the web.
-Use `--ide ` to target a specific IDE (e.g. `--ide cursor`), or `--ide all` for all supported IDEs.
+**iii. Platform & IDE Setup**
-Then in your IDE:
+* Flutter installed on your system.
+* Android Studio or VS Code with configured Flutter/Dart plugins.
+* Xcode & Pod (CocoaPods) for iOS.
+* An iOS device or emulator with iOS 13.0 or above.
+* Android device or emulator with Android version 7.0 (API 24) or above.
-```
-/cometchat add chat to my app
-```
+## Getting Started
-The skill detects your Flutter project structure, navigation setup, 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 routes, screens, and widgets before proposing a placement (route, modal sheet, or tab), shows the plan, and waits for your approval before writing code. Credentials are saved as a Dart const file or via `--dart-define`.
+### **Step 1: Create Flutter application project**
-After the first integration, re-run `/cometchat` to access the iteration menu: theme presets, 40+ features, component customization, production auth, user management, and diagnostics.
+To get started, create a new flutter application project.
-Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and [30+ more agents](https://github.com/cometchat/cometchat-skills).
+***
----
+### **Step 2: Add Dependency**
-## Prerequisites
+**1. Install via CLI**
-You need three things from the [CometChat Dashboard](https://app.cometchat.com/):
+Since V6 is hosted on Cloudsmith (not pub.dev), run this command instead of the standard `flutter pub add`:
-| Credential | Where to find it |
-| --- | --- |
-| App ID | Dashboard → Your App → Credentials |
-| Auth Key | Dashboard → Your App → Credentials |
-| Region | Dashboard → Your App → Credentials (e.g. `us`, `eu`, `in`) |
+```bash
+dart pub add cometchat_chat_uikit:6.0.0 --hosted-url https://dart.cloudsmith.io/cometchat/cometchat/
+```
-You also need Flutter 3.0+ installed with Android Studio or VS Code.
+**2. Update Pubspec**
-
-Auth Key is for development only. In production, generate Auth Tokens server-side via the [REST API](/rest-api/chat-apis) and use `loginWithAuthToken()`. Never ship Auth Keys in client code.
-
+Or add it manually to your `pubspec.yaml`:
----
+```yaml pubspec.yaml
+dependencies:
+ cometchat_chat_uikit:
+ hosted: https://dart.cloudsmith.io/cometchat/cometchat/
+ version: 6.0.0
+```
-## Step 1 — Create a Flutter Project
+Final `pubspec.yaml`
-```bash
-flutter create my_chat_app
-cd my_chat_app
-```
+```yaml pubspec.yaml
+name: my_chat_app
+description: "A Flutter app with CometChat V6."
----
+publish_to: 'none'
-## Step 2 — Install the UI Kit
+version: 1.0.0+1
-Add to your `pubspec.yaml`:
+environment:
+ sdk: ^3.8.0
-```yaml pubspec.yaml
dependencies:
flutter:
sdk: flutter
- cometchat_chat_uikit: ^5.2.14
- cometchat_calls_uikit: ^5.0.15 # Optional: for voice/video calling
-```
-Then run:
+ cometchat_chat_uikit:
+ hosted: https://dart.cloudsmith.io/cometchat/cometchat/
+ version: 6.0.0
-```bash
-flutter pub get
-```
+ cupertino_icons: ^1.0.8
+
+dev_dependencies:
+ flutter_test:
+ sdk: flutter
-**Android Setup** — Add the following to `android/gradle.properties`:
+ flutter_lints: ^4.0.0
-```properties gradle.properties
-android.enableJetifier=true
+flutter:
+ uses-material-design: true
```
-Then update `android/app/build.gradle`:
+***
+
+**2. Android App Setup**
+
+Update the `minSdkVersion` in your Android project configuration, located at `android/app/build.gradle`:
```gradle build.gradle
android {
defaultConfig {
- minSdk = 24 // Required for calling
+ minSdk = 24
+ // Other configurations...
}
}
```
-**iOS Setup** — Update `ios/Podfile`:
+***
+
+**3. Update iOS Podfile**
+
+In your Podfile (located at `ios/Podfile`), update the minimum iOS version:
```ruby Podfile
platform :ios, '13.0'
```
-Then run:
+***
-```bash
-cd ios && pod install && cd ..
+**4. Import CometChat UIKit**
+
+In your Dart code, import the CometChat UIKit package:
+
+```dart main.dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
```
----
+> V6 uses a single import. The `cometchat_uikit_shared` package is internalized — no separate import needed.
-## Step 3 — Initialize CometChat
+***
-Create a constants file and initialize the UI Kit before anything else.
+### **Step 3: Initialize UI Kit**
-```dart title="lib/cometchat_config.dart"
+Before using any features from the CometChat UI Kit, initialize it with your app credentials.
+
+1. **Create a Configuration File:**
+
+```dart cometchat_config.dart
class CometChatConfig {
- static const String appId = "APP_ID"; // Replace with your App ID
- static const String region = "REGION"; // Replace with your Region
- static const String authKey = "AUTH_KEY"; // Replace with your Auth Key (dev only)
+ static const String appId = "APP_ID"; // Replace with your App ID
+ static const String region = "REGION"; // Replace with your App Region
+ static const String authKey = "AUTH_KEY"; // Replace with your Auth Key
}
```
-```dart title="lib/main.dart"
-import 'package:flutter/material.dart';
+2. **Initialize the UI Kit:**
+
+```dart main.dart
+import 'cometchat_config.dart';
+
+UIKitSettings uiKitSettings = (UIKitSettingsBuilder()
+ ..subscriptionType = CometChatSubscriptionType.allUsers
+ ..autoEstablishSocketConnection = true
+ ..region = CometChatConfig.region
+ ..appId = CometChatConfig.appId
+ ..authKey = CometChatConfig.authKey
+).build();
+
+CometChatUIKit.init(
+ uiKitSettings: uiKitSettings,
+ onSuccess: (successMessage) async {
+ debugPrint('CometChat Initialized');
+ },
+ onError: (error) {
+ debugPrint('CometChat Initialization error');
+ },
+);
+```
+
+> **V6 difference from V5:** No `extensions` or `aiFeature` parameters needed. Extensions are built-in and handled automatically by `MessageTemplateUtils`.
+
+***
+
+### **Step 4: Login to UI Kit**
+
+Once the UI Kit is initialized, authenticate your user using the `login()` method.
+
+```dart main.dart
+CometChatUIKit.login(
+ "cometchat-uid-1", // Replace with a valid UID
+ onSuccess: (user) {
+ debugPrint('CometChat LoggedIn success');
+ },
+ onError: (error) {
+ debugPrint('CometChat LoggedIn error');
+ },
+);
+```
+
+You can test using any of the following pre-generated users:
+
+* `cometchat-uid-1`
+* `cometchat-uid-2`
+* `cometchat-uid-3`
+* `cometchat-uid-4`
+* `cometchat-uid-5`
+
+> For more information, refer to the documentation on [Init](/ui-kit/flutter/methods#init) and [Login](/ui-kit/flutter/methods#login-using-auth-key).
+
+#### **Example: Initialization and Login Combined**
+
+```dart main.dart
import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart'; // Optional
+import 'package:flutter/material.dart';
import 'cometchat_config.dart';
-void main() => runApp(const MyApp());
+void main() {
+ runApp(const MyApp());
+}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@@ -152,169 +217,166 @@ class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
- title: 'CometChat Demo',
- home: const InitializerScreen(),
+ title: 'CometChat V6',
+ theme: ThemeData(useMaterial3: true),
+ home: const InitPage(),
);
}
}
-class InitializerScreen extends StatelessWidget {
- const InitializerScreen({super.key});
+class InitPage extends StatefulWidget {
+ const InitPage({super.key});
+
+ @override
+ State createState() => _InitPageState();
+}
+
+class _InitPageState extends State {
+ bool _isInitializing = true;
+ String? _error;
+
+ @override
+ void initState() {
+ super.initState();
+ _initCometChat();
+ }
Future _initCometChat() async {
- final settings = (UIKitSettingsBuilder()
- ..appId = CometChatConfig.appId
- ..region = CometChatConfig.region
- ..authKey = CometChatConfig.authKey
- ..subscriptionType = CometChatSubscriptionType.allUsers
- ..autoEstablishSocketConnection = true
- ..extensions = CometChatUIKitChatExtensions.getDefaultExtensions()
- ..callingExtension = CometChatCallingExtension() // Optional
- ).build();
-
- await CometChatUIKit.init(uiKitSettings: settings);
+ UIKitSettings uiKitSettings = (UIKitSettingsBuilder()
+ ..subscriptionType = CometChatSubscriptionType.allUsers
+ ..autoEstablishSocketConnection = true
+ ..region = CometChatConfig.region
+ ..appId = CometChatConfig.appId
+ ..authKey = CometChatConfig.authKey)
+ .build();
+
+ CometChatUIKit.init(
+ uiKitSettings: uiKitSettings,
+ onSuccess: (msg) {
+ CometChatUIKit.login(
+ "cometchat-uid-1",
+ onSuccess: (user) {
+ debugPrint('Logged in as: ${user.name}');
+ setState(() => _isInitializing = false);
+ },
+ onError: (error) {
+ setState(() {
+ _isInitializing = false;
+ _error = error.message;
+ });
+ },
+ );
+ },
+ onError: (error) {
+ setState(() {
+ _isInitializing = false;
+ _error = error.message;
+ });
+ },
+ );
}
@override
Widget build(BuildContext context) {
- return FutureBuilder(
- future: _initCometChat(),
- builder: (context, snapshot) {
- if (snapshot.connectionState != ConnectionState.done) {
- return const Scaffold(
- body: Center(child: CircularProgressIndicator()),
- );
- }
- if (snapshot.hasError) {
- return Scaffold(
- body: Center(child: Text('Init failed: ${snapshot.error}')),
- );
- }
- return const LoginScreen();
- },
- );
+ if (_isInitializing) {
+ return const Scaffold(body: Center(child: CircularProgressIndicator()));
+ }
+ if (_error != null) {
+ return Scaffold(body: Center(child: Text('Error: $_error')));
+ }
+ return const Scaffold(body: Center(child: Text('Ready!')));
}
}
```
-
-`init()` must resolve before you call `login()`. If you call `login()` before init completes, it will fail silently.
-
+***
----
+### **Step 5: Choose a Chat Experience**
-## Step 4 — Login
+Integrate a conversation view that suits your application's UX requirements. Below are the available options:
-After init resolves, log the user in. 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`
+### **1. Conversation List + Message View**
-```dart
-CometChatUIKit.login(
- "cometchat-uid-1",
- onSuccess: (user) {
- debugPrint('Login successful: ${user.name}');
- // Navigate to chat screen
- },
- onError: (error) {
- debugPrint('Login failed: $error');
- },
-);
-```
+**Best for:** Flutter apps that need a smooth, stack-based navigation between conversations and messages.
-Key points:
-- `getLoggedInUser()` checks for an existing session so you don't re-login unnecessarily.
-- Widgets must not render until login resolves — use a state flag to gate rendering.
+**Highlights:**
-
-For production, use `loginWithAuthToken()` instead of Auth Key. Generate tokens server-side via the REST API.
-
+* **Compact Layout** – Uses `Navigator.push()` for mobile-first navigation.
+* **One-to-One & Group Chats** – Built-in support for private and group conversations.
+* **Real-Time Messaging** – Message list auto-refreshes with CometChat events.
+* **BLoC-Powered** – Predictable state management with `ConversationsBloc` and `MessageListBloc`.
----
+**Use When:**
-## Step 5 — Choose a Chat Experience
+* You want a clean navigation experience for multiple chat sessions.
+* Your Flutter app supports both direct and group messaging.
-Integrate a conversation view that suits your app's UX. Each option below includes a step-by-step guide.
+[Integrate Conversation List + Message View](./flutter-conversation)
-### Conversation List + Message View
+***
-Two-panel layout — conversation list with navigation to messages. Think WhatsApp or Telegram.
+### **2. One-to-One / Group Chat**
-- Stack-based navigation with `Navigator.push()`
-- Switch between one-to-one and group conversations
-- Real-time updates and message sync across sessions
+**Best for:** When a user lands directly into a chat screen, bypassing the conversation list.
-
-
-
+In V6, you compose the chat screen using individual widgets:
-
- Step-by-step guide to build this layout
-
+```dart
+Scaffold(
+ body: Column(
+ children: [
+ CometChatMessageHeader(user: user),
+ Expanded(child: CometChatMessageList(user: user)),
+ CometChatMessageComposer(user: user),
+ ],
+ ),
+)
+```
----
+> V6 does not have a combined `CometChatMessages` composite widget. You compose the UI yourself using `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer`.
-### One-to-One / Group Chat
+**Use When:**
-Single chat window — no conversation list. Good for support chat, embedded widgets, or focused messaging.
+* Your chat starts from a specific user or group ID.
+* You want a clean, focused chat interface.
+* Use case involves support, onboarding, or one-time messages.
-- Dedicated chat window for one-on-one or group messaging
-- No conversation list — users go directly into the chat
-- Ideal for support chat or contextual messaging
+[Integrate One-to-One / Group Chat](./flutter-one-to-one-chat)
-
-
-
+***
-
- Step-by-step guide to build this layout
-
+### **3. Tab-Based Messaging UI (All-in-One)**
----
+**Best for:** Flutter apps needing a multi-tab experience to access Chat, Users, Calls, and Settings.
-### Tab-Based Chat
+**Use When:**
-Tabbed navigation — Chat, Call Logs, Users, Groups in separate tabs. Good for full-featured apps.
+* You need a full-featured chat solution in one UI.
+* Your users require structured navigation between modules.
-- `BottomNavigationBar` with independent screens
-- Unified experience for conversations, call history, and contacts
-- Scales well for adding future features
+[Integrate Tab-Based Chat](./flutter-tab-based-chat)
-
-
-
+***
-
- Step-by-step guide to build this layout
-
+## **Build Your Own Chat Experience**
----
+**Best for:** Developers who need complete control over their chat interface.
-## Build Your Own Chat Experience
+**Key Areas to Explore:**
-Need full control over the UI? Use individual widgets, customize themes, and wire up your own layouts.
+* **[Core Features](./core-features)** – Learn about messaging, real-time updates, and other essential capabilities.
+* **[Components](./components-overview)** – Utilize prebuilt UI elements or customize them to fit your design.
+* **[Themes](./theme-introduction)** – Adjust colors, fonts, and styles to match your branding.
-- [Sample App](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) — Working reference app to compare against
-- [Components](/ui-kit/flutter/components-overview) — All prebuilt UI widgets with props and customization options
-- [Core Features](/ui-kit/flutter/core-features) — Messaging, real-time updates, and other capabilities
-- [Theming](/ui-kit/flutter/theme-introduction) — Colors, fonts, dark mode, and custom styling
-- [Build Your Own UI](/sdk/flutter/overview) — Skip the UI Kit entirely and build on the raw SDK
+***
----
+## **Next Steps**
+
+* **[Integrate Conversation List + Message](/ui-kit/flutter/flutter-conversation)**
+* **[Integrate One-to-One Chat](/ui-kit/flutter/flutter-one-to-one-chat)**
+* **[Integrate Tab-Based Chat](/ui-kit/flutter/flutter-tab-based-chat)**
+* **[Advanced Customizations](/ui-kit/flutter/theme-introduction)**
-## Next Steps
-
-
-
- Browse all prebuilt UI widgets
-
-
- Customize colors, fonts, and styles
-
-
- Chat features included out of the box
-
-
- Init, login, and other SDK methods
-
-
+***
diff --git a/ui-kit/flutter/group-members.mdx b/ui-kit/flutter/group-members.mdx
index 4dc08eee3..2dc19f7e9 100644
--- a/ui-kit/flutter/group-members.mdx
+++ b/ui-kit/flutter/group-members.mdx
@@ -1,252 +1,73 @@
---
title: "Group Members"
-description: "Displays all members of a group in a searchable, scrollable list with member scope badges and management actions."
+description: "Scrollable list of members in a group with scope indicators, search, and member management actions."
---
-
-```json
-{
- "component": "CometChatGroupMembers",
- "package": "cometchat_chat_uikit",
- "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
- "description": "Displays all members of a group in a searchable, scrollable list with member scope badges and management actions.",
- "primaryOutput": {
- "prop": "onItemTap",
- "type": "Function(GroupMember groupMember)?"
- },
- "props": {
- "data": {
- "group": {
- "type": "Group",
- "default": "required",
- "note": "The group object to fetch members from"
- },
- "groupMembersRequestBuilder": {
- "type": "GroupMembersRequestBuilder?",
- "default": "null",
- "note": "Custom request builder for filtering members"
- },
- "groupMembersProtocol": {
- "type": "GroupMembersBuilderProtocol?",
- "default": "null",
- "note": "Custom protocol for fetching group members"
- },
- "searchKeyword": {
- "type": "String?",
- "default": "null",
- "note": "Pre-fills search and filters list"
- },
- "controllerTag": {
- "type": "String?",
- "default": "null",
- "note": "Tag for controller management"
- }
- },
- "callbacks": {
- "onItemTap": "Function(GroupMember groupMember)?",
- "onItemLongPress": "Function(GroupMember groupMember)?",
- "onSelection": "Function(List?)?",
- "onBack": "VoidCallback?",
- "onError": "OnError?",
- "onLoad": "OnLoad?",
- "onEmpty": "OnEmpty?",
- "stateCallBack": "Function(CometChatGroupMembersController controller)?"
- },
- "visibility": {
- "showBackButton": { "type": "bool", "default": true },
- "hideSearch": { "type": "bool", "default": false },
- "hideSeparator": { "type": "bool?", "default": null },
- "hideError": { "type": "bool?", "default": null },
- "hideAppbar": { "type": "bool?", "default": null },
- "usersStatusVisibility": { "type": "bool?", "default": true },
- "hideKickMemberOption": { "type": "bool?", "default": null },
- "hideBanMemberOption": { "type": "bool?", "default": null },
- "hideScopeChangeOption": { "type": "bool?", "default": null }
- },
- "selection": {
- "selectionMode": {
- "type": "SelectionMode?",
- "values": ["SelectionMode.single", "SelectionMode.multiple", "SelectionMode.none"],
- "default": "null"
- },
- "activateSelection": {
- "type": "ActivateSelection?",
- "values": ["ActivateSelection.onClick", "ActivateSelection.onLongClick"],
- "default": "null"
- }
- },
- "viewSlots": {
- "listItemView": "Widget Function(GroupMember)?",
- "leadingView": "Widget? Function(BuildContext, GroupMember)?",
- "titleView": "Widget? Function(BuildContext, GroupMember)?",
- "subtitleView": "Widget? Function(BuildContext, GroupMember)?",
- "trailingView": "Function(BuildContext, GroupMember)?",
- "loadingStateView": "WidgetBuilder?",
- "emptyStateView": "WidgetBuilder?",
- "errorStateView": "WidgetBuilder?",
- "setOptions": "List? Function(Group, GroupMember, CometChatGroupMembersController, BuildContext)?",
- "addOptions": "List? Function(Group, GroupMember, CometChatGroupMembersController, BuildContext)?",
- "appBarOptions": "List?"
- },
- "icons": {
- "backButton": { "type": "Widget?", "default": "built-in back arrow" },
- "searchBoxIcon": { "type": "Widget?", "default": "built-in search icon" },
- "submitIcon": { "type": "Widget?", "default": "built-in check icon" },
- "selectIcon": { "type": "Widget?", "default": "built-in selection icon" }
- },
- "formatting": {
- "searchPlaceholder": { "type": "String?", "default": "null" },
- "height": { "type": "double?", "default": "null" },
- "width": { "type": "double?", "default": "null" }
- },
- "style": {
- "style": { "type": "CometChatGroupMembersStyle?", "default": "null" }
- }
- },
- "events": [
- { "name": "CometChatGroupEvents.ccGroupMemberScopeChanged", "payload": "Action, GroupMember, String newScope, String oldScope, Group", "description": "Member scope changed" },
- { "name": "CometChatGroupEvents.ccGroupMemberBanned", "payload": "Action, GroupMember, User bannedBy, Group", "description": "Member banned from group" },
- { "name": "CometChatGroupEvents.ccGroupMemberKicked", "payload": "Action, GroupMember, User kickedBy, Group", "description": "Member kicked from group" }
- ],
- "sdkListeners": [
- "onGroupMemberScopeChanged",
- "onGroupMemberKicked",
- "onGroupMemberLeft",
- "onGroupMemberBanned",
- "onGroupMemberJoined",
- "onMemberAddedToGroup",
- "onUserOnline",
- "onUserOffline"
- ],
- "compositionExample": {
- "description": "Group member list wired to group details or member actions",
- "components": [
- "CometChatGroupMembers",
- "CometChatGroups",
- "CometChatMessages"
- ],
- "flow": "CometChatGroups emits Group -> pass to CometChatGroupMembers -> onItemTap emits GroupMember for actions"
- },
- "types": {
- "GroupMember": {
- "uid": "String",
- "name": "String",
- "avatar": "String?",
- "scope": "String (owner/admin/moderator/participant)",
- "joinedAt": "DateTime?"
- },
- "CometChatOption": {
- "id": "String?",
- "title": "String?",
- "icon": "String?",
- "iconWidget": "Widget?",
- "onClick": "VoidCallback?"
- },
- "SelectionMode": {
- "single": "SelectionMode.single",
- "multiple": "SelectionMode.multiple",
- "none": "SelectionMode.none"
- }
- }
-}
-```
-
+`CometChatGroupMembers` renders a scrollable list of members in a specific group with real-time updates, scope indicators (owner/admin/moderator/participant), search, and member management actions (kick, ban, change scope).
+
+
+
+
+---
## Where It Fits
-`CometChatGroupMembers` displays all members of a group with their roles (owner, admin, moderator, participant). It provides member management actions like kick, ban, and scope change. Wire it to `CometChatGroups` to show members when a group is selected.
+`CometChatGroupMembers` is a list component that requires a `Group` object. It renders group members and supports actions like kick, ban, and scope change based on the logged-in user's permissions.
```dart
-import 'package:flutter/material.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
-class GroupMembersScreen extends StatelessWidget {
- final Group group;
-
- const GroupMembersScreen({super.key, required this.group});
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: SafeArea(
- child: CometChatGroupMembers(
- group: group,
- onItemTap: (groupMember) {
- // Handle member tap - show profile or actions
- print("Tapped: ${groupMember.name}");
- },
- ),
- ),
- );
- }
-}
+CometChatGroupMembers(
+ group: group,
+ onItemTap: (groupMember) {
+ // Navigate to member profile or chat
+ },
+)
```
-
-
-
-
-The `CometChatGroupMembers` widget is composed of the following BaseWidgets:
-
-| Widgets | Description |
-| --- | --- |
-| [CometChatListBase](/ui-kit/flutter/components-overview) | Container widget with title, search functionality, and background settings |
-| [CometChatListItem](/ui-kit/flutter/components-overview) | Renders member information with title, subtitle, leading, and trailing widgets |
-
---
+## Quick Start
-## Minimal Render
+Using Navigator:
```dart
-import 'package:flutter/material.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
-class GroupMembersDemo extends StatelessWidget {
- final Group group;
-
- const GroupMembersDemo({super.key, required this.group});
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: SafeArea(
- child: CometChatGroupMembers(
- group: group,
- ),
- ),
- );
- }
-}
+Navigator.push(context, MaterialPageRoute(
+ builder: (context) => CometChatGroupMembers(group: group),
+));
```
-You can also launch it using `Navigator.push`:
+Embedding as a widget:
+
+
```dart
-Navigator.push(
- context,
- MaterialPageRoute(
- builder: (context) => CometChatGroupMembers(
- group: Group(guid: "group_id", name: "Group Name", type: GroupTypeConstants.public),
+@override
+Widget build(BuildContext context) {
+ return Scaffold(
+ body: SafeArea(
+ child: CometChatGroupMembers(group: group),
),
- ),
-);
+ );
+}
```
+
+
+
+Prerequisites: CometChat SDK initialized, a user logged in, and a valid `Group` object.
---
-## Filtering Group Members
+## Filtering Members
-Pass a `GroupMembersRequestBuilder` to `groupMembersRequestBuilder`. Pass the builder instance — not the result of `.build()`.
+Pass a `GroupMembersRequestBuilder` to control what loads:
@@ -254,7 +75,8 @@ Pass a `GroupMembersRequestBuilder` to `groupMembersRequestBuilder`. Pass the bu
CometChatGroupMembers(
group: group,
groupMembersRequestBuilder: GroupMembersRequestBuilder(group.guid)
- ..limit = 10,
+ ..limit = 20
+ ..searchKeyword = "john",
)
```
@@ -262,70 +84,21 @@ CometChatGroupMembers(
### Filter Recipes
-| Recipe | Code |
-| --- | --- |
-| Limit to 10 per page | `GroupMembersRequestBuilder(guid)..limit = 10` |
-| Search by keyword | `GroupMembersRequestBuilder(guid)..searchKeyword = "john"` |
-| Filter by scopes | `GroupMembersRequestBuilder(guid)..scopes = ["admin", "moderator"]` |
-
-Default page size is 30. The component uses infinite scroll — the next page loads as the user scrolls to the bottom.
-
-
-### GroupMembersRequestBuilder Properties
-
-| Property | Description | Code |
-| --- | --- | --- |
-| `guid` | Group ID (required) | `GroupMembersRequestBuilder("group_id")` |
-| `limit` | Number of members to fetch per request | `..limit = 30` |
-| `searchKeyword` | Search members by name | `..searchKeyword = "John"` |
-| `scopes` | Filter by member scopes | `..scopes = ["admin"]` |
-| `build()` | Builds and returns a `GroupMembersRequest` object | `.build()` |
-
-### Custom Protocol Builder
-
-Use `GroupMembersBuilderProtocol` to customize both the initial list and search results:
-
-
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
-class CustomProtocolBuilder extends GroupMembersBuilderProtocol {
- const CustomProtocolBuilder(super.builder);
-
- @override
- GroupMembersRequest getRequest() {
- return requestBuilder.build();
- }
-
- @override
- GroupMembersRequest getSearchRequest(String val) {
- requestBuilder.searchKeyword = val;
- return requestBuilder.build();
- }
-}
-
-// Usage
-CometChatGroupMembers(
- group: group,
- groupMembersProtocol: CustomProtocolBuilder(
- GroupMembersRequestBuilder(group.guid)..scopes = ["admin", "moderator"],
- ),
-)
-```
-
-
+| Recipe | Builder property |
+|---|---|
+| Limit per page | `..limit = 20` |
+| Search by name | `..searchKeyword = "john"` |
+| Filter by scopes | `..scopes = ["admin", "moderator"]` |
---
-
## Actions and Events
-### Callback Props
+### Callback Methods
-#### onItemTap
+#### `onItemTap`
-Fires when a member row is tapped. Use for showing member profile or custom actions.
+Fires when a member row is tapped.
@@ -333,16 +106,16 @@ Fires when a member row is tapped. Use for showing member profile or custom acti
CometChatGroupMembers(
group: group,
onItemTap: (groupMember) {
- print("Selected: ${groupMember.name}");
+ // Navigate to member profile
},
)
```
-#### onItemLongPress
+#### `onItemLongPress`
-Fires when a member row is long-pressed. Useful for showing context menus.
+Fires when a member row is long-pressed. By default shows the member action menu (kick/ban/scope change).
@@ -350,88 +123,85 @@ Fires when a member row is long-pressed. Useful for showing context menus.
CometChatGroupMembers(
group: group,
onItemLongPress: (groupMember) {
- // Show custom context menu
+ // Custom long press behavior
},
)
```
-#### onSelection
+#### `onBack`
-Fires when members are selected in multi-select mode. Requires `selectionMode` to be set.
+Fires when the user presses the back button.
```dart
CometChatGroupMembers(
group: group,
- selectionMode: SelectionMode.multiple,
- activateSelection: ActivateSelection.onClick,
- onSelection: (selectedList) {
- print("Selected ${selectedList?.length ?? 0} members");
+ onBack: () {
+ Navigator.pop(context);
},
)
```
-#### onError
+#### `onSelection`
-Fires on internal errors (network failure, auth issue, SDK exception).
+Fires when members are selected/deselected in multi-select mode.
```dart
CometChatGroupMembers(
group: group,
- onError: (error) {
- print("CometChatGroupMembers error: $error");
+ selectionMode: SelectionMode.multiple,
+ onSelection: (selectedMembers, context) {
+ // Handle selected members
},
)
```
+#### `onError`
-#### onBack
-
-Fires when the back button is pressed.
+Fires on internal errors.
```dart
CometChatGroupMembers(
group: group,
- showBackButton: true,
- onBack: () {
- Navigator.pop(context);
+ onError: (e) {
+ debugPrint("Error: ${e.message}");
},
)
```
-#### onLoad
+#### `onLoad`
-Fires when the member list is successfully loaded.
+Fires when the list is successfully fetched.
```dart
CometChatGroupMembers(
group: group,
- onLoad: (list) {
- print("Loaded ${list.length} members");
+ onLoad: (memberList) {
+ debugPrint("Loaded ${memberList.length} members");
},
)
```
-#### onEmpty
+#### `onEmpty`
-Fires when the member list is empty.
+Fires when the list is empty after loading.
@@ -439,34 +209,21 @@ Fires when the member list is empty.
CometChatGroupMembers(
group: group,
onEmpty: () {
- print("No members found");
+ debugPrint("No members found");
},
)
```
-### Global UI Events
-
-`CometChatGroupEvents` emits events subscribable from anywhere in the application. Add a listener in `initState` and remove it in `dispose`.
-
-| Event | Fires when | Payload |
-| --- | --- | --- |
-| `ccGroupMemberScopeChanged` | A member's scope is changed | `Action, User, String scopeChangedTo, String scopeChangedFrom, Group` |
-| `ccGroupMemberBanned` | A member is banned | `Action, User, User bannedBy, Group` |
-| `ccGroupMemberKicked` | A member is kicked | `Action, User, User kickedBy, Group` |
-
-When to use: sync external UI with member changes. For example, update a member count badge when a member is kicked.
+### Global Events
+The component emits events via `CometChatGroupEvents`:
```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:cometchat_sdk/models/action.dart' as cc;
-
class _YourScreenState extends State with CometChatGroupEventListener {
-
@override
void initState() {
super.initState();
@@ -480,23 +237,18 @@ class _YourScreenState extends State with CometChatGroupEventListene
}
@override
- void ccGroupMemberScopeChanged(cc.Action message, User updatedUser, String scopeChangedTo, String scopeChangedFrom, Group group) {
- print("${updatedUser.name} scope changed to $scopeChangedTo");
+ void ccGroupMemberKicked(Action action, User kickedUser, User kickedBy, Group kickedFrom) {
+ // Handle member kicked
}
@override
- void ccGroupMemberBanned(cc.Action message, User bannedUser, User bannedBy, Group bannedFrom) {
- print("${bannedUser.name} was banned from ${bannedFrom.name}");
+ void ccGroupMemberBanned(Action action, User bannedUser, User bannedBy, Group bannedFrom) {
+ // Handle member banned
}
@override
- void ccGroupMemberKicked(cc.Action message, User kickedUser, User kickedBy, Group kickedFrom) {
- print("${kickedUser.name} was kicked from ${kickedFrom.name}");
- }
-
- @override
- Widget build(BuildContext context) {
- return const Placeholder();
+ void ccGroupMemberScopeChanged(Action action, User updatedUser, String scopeChangedTo, String scopeChangedFrom, Group group) {
+ // Handle scope changed
}
}
```
@@ -505,62 +257,47 @@ class _YourScreenState extends State with CometChatGroupEventListene
### SDK Events (Real-Time, Automatic)
-The component listens to these SDK events internally. No manual attachment needed unless additional side effects are required.
-
| SDK Listener | Internal behavior |
-| --- | --- |
-| `onGroupMemberScopeChanged` | Updates member scope badge |
-| `onGroupMemberKicked` | Removes member from list |
+|---|---|
+| `onGroupMemberJoined` | Adds member to list |
| `onGroupMemberLeft` | Removes member from list |
+| `onGroupMemberKicked` | Removes member from list |
| `onGroupMemberBanned` | Removes member from list |
-| `onGroupMemberJoined` | Adds new member to list |
-| `onMemberAddedToGroup` | Adds new member to list |
-| `onUserOnline` | Updates online status indicator |
-| `onUserOffline` | Updates offline status indicator |
+| `onGroupMemberScopeChanged` | Updates member scope in list |
+| `onUserOnline` / `onUserOffline` | Updates presence via per-member ValueNotifier (isolated rebuild) |
+| Connection reconnected | Triggers silent refresh |
---
+## Functionality
+
+| Property | Type | Default | Description |
+|---|---|---|---|
+| `group` | `Group` | **required** | The group whose members to display |
+| `title` | `String?` | `null` | Custom app bar title |
+| `showBackButton` | `bool` | `true` | Toggle back button |
+| `hideAppbar` | `bool?` | `false` | Toggle app bar visibility |
+| `hideSearch` | `bool` | `false` | Toggle search bar |
+| `usersStatusVisibility` | `bool?` | `true` | Show online/offline status |
+| `selectionMode` | `SelectionMode?` | `null` | Enable selection mode |
+| `hideKickMemberOption` | `bool?` | `false` | Hide kick option in action menu |
+| `hideBanMemberOption` | `bool?` | `false` | Hide ban option in action menu |
+| `hideScopeChangeOption` | `bool?` | `false` | Hide scope change option |
-## Custom View Slots
-
-Each slot replaces a section of the default UI. Slots that accept a member parameter receive the `GroupMember` object for that row.
-
-| Slot | Signature | Replaces |
-| --- | --- | --- |
-| `listItemView` | `Widget Function(GroupMember)` | Entire list item row |
-| `leadingView` | `Widget? Function(BuildContext, GroupMember)` | Avatar / left section |
-| `titleView` | `Widget? Function(BuildContext, GroupMember)` | Member name |
-| `subtitleView` | `Widget? Function(BuildContext, GroupMember)` | Secondary text |
-| `trailingView` | `Function(BuildContext, GroupMember)` | Scope badge / right section |
-| `loadingStateView` | `WidgetBuilder` | Loading spinner |
-| `emptyStateView` | `WidgetBuilder` | Empty state |
-| `errorStateView` | `WidgetBuilder` | Error state |
-| `setOptions` | `List? Function(Group, GroupMember, Controller, BuildContext)` | Context menu actions (replaces default) |
-| `addOptions` | `List? Function(Group, GroupMember, Controller, BuildContext)` | Context menu actions (adds to default) |
-| `appBarOptions` | `List` | App bar action widgets |
-
-### listItemView
+---
-Replace the entire list item row.
+## Custom View Slots
-
-
-
+### Leading View
```dart
CometChatGroupMembers(
group: group,
- listItemView: (groupMember) {
- return ListTile(
- leading: CometChatAvatar(
- image: groupMember.avatar,
- name: groupMember.name,
- ),
- title: Text(groupMember.name ?? ''),
- subtitle: Text(groupMember.scope ?? 'participant'),
- trailing: Icon(Icons.chevron_right),
+ leadingView: (context, groupMember) {
+ return CircleAvatar(
+ child: Text(groupMember.name?[0] ?? ""),
);
},
)
@@ -568,38 +305,17 @@ CometChatGroupMembers(
-
-### leadingView
-
-Replace the avatar / left section. Online status indicator example.
+### Title View
```dart
CometChatGroupMembers(
group: group,
- leadingView: (context, groupMember) {
- return Stack(
- children: [
- CometChatAvatar(
- image: groupMember.avatar,
- name: groupMember.name,
- style: CometChatAvatarStyle(borderRadius: BorderRadius.circular(20)),
- ),
- Positioned(
- bottom: 0,
- right: 0,
- child: Container(
- width: 12,
- height: 12,
- decoration: BoxDecoration(
- color: groupMember.status == "online" ? Color(0xFF09C26F) : Colors.grey,
- shape: BoxShape.circle,
- border: Border.all(color: Colors.white, width: 2),
- ),
- ),
- ),
- ],
+ titleView: (context, groupMember) {
+ return Text(
+ groupMember.name ?? "",
+ style: TextStyle(fontWeight: FontWeight.bold),
);
},
)
@@ -607,27 +323,17 @@ CometChatGroupMembers(
-### titleView
-
-Replace the member name. Role badge inline example.
+### Subtitle View
```dart
CometChatGroupMembers(
group: group,
- titleView: (context, groupMember) {
- return Row(
- children: [
- Text(
- groupMember.name ?? '',
- style: TextStyle(fontWeight: FontWeight.w500, fontSize: 16),
- ),
- if (groupMember.scope == GroupMemberScope.owner) ...[
- SizedBox(width: 4),
- Icon(Icons.star, size: 16, color: Color(0xFFF76808)),
- ],
- ],
+ subtitleView: (context, groupMember) {
+ return Text(
+ groupMember.scope ?? "participant",
+ style: TextStyle(color: Color(0xFF727272), fontSize: 14),
);
},
)
@@ -635,66 +341,34 @@ CometChatGroupMembers(
-
-### subtitleView
-
-Replace the secondary text. Join date example.
-
-
-
-
+### Trailing View
```dart
CometChatGroupMembers(
group: group,
- subtitleView: (context, groupMember) {
- final dateTime = groupMember.joinedAt ?? DateTime.now();
- return Text(
- "Joined ${DateFormat('dd/MM/yyyy').format(dateTime)}",
- style: TextStyle(color: Color(0xFF727272), fontSize: 14),
- );
+ trailingView: (context, groupMember) {
+ return Chip(label: Text(groupMember.scope ?? ""));
},
)
```
-### trailingView
-
-Replace the scope badge / right section. Custom scope badge example.
-
-
-
-
+### List Item View
```dart
CometChatGroupMembers(
group: group,
- trailingView: (context, groupMember) {
- Color backgroundColor = Color(0xFFEDEAFA);
- Color textColor = Color(0xFF6852D6);
- String scope = groupMember.scope ?? GroupMemberScope.participant;
-
- if (groupMember.uid == group.owner) {
- scope = GroupMemberScope.owner;
- backgroundColor = Color(0xFF6852D6);
- textColor = Colors.white;
- }
-
- return Container(
- padding: EdgeInsets.symmetric(horizontal: 12, vertical: 4),
- decoration: BoxDecoration(
- color: backgroundColor,
- borderRadius: BorderRadius.circular(1000),
- ),
- child: Text(
- scope.capitalizeFirst ?? "",
- style: TextStyle(color: textColor, fontSize: 12, fontWeight: FontWeight.w400),
- ),
+ listItemView: (groupMember) {
+ return ListTile(
+ leading: CircleAvatar(child: Text(groupMember.name?[0] ?? "")),
+ title: Text(groupMember.name ?? ""),
+ subtitle: Text(groupMember.scope ?? "participant"),
+ trailing: Chip(label: Text(groupMember.scope ?? "")),
);
},
)
@@ -702,200 +376,133 @@ CometChatGroupMembers(
-
-### setOptions
-
-Replace the context menu / long-press actions on each member item.
+### State Views
```dart
CometChatGroupMembers(
group: group,
- setOptions: (group, groupMember, controller, context) {
- return [
- CometChatOption(
- id: "view_profile",
- title: "View Profile",
- iconWidget: Icon(Icons.person_outline),
- onClick: () {
- // Navigate to member profile
- },
- ),
- CometChatOption(
- id: "message",
- title: "Send Message",
- iconWidget: Icon(Icons.message_outlined),
- onClick: () {
- // Start direct message
- },
- ),
- ];
- },
+ emptyStateView: (context) => Center(child: Text("No members")),
+ errorStateView: (context) => Center(child: Text("Something went wrong")),
+ loadingStateView: (context) => Center(child: CircularProgressIndicator()),
)
```
-### addOptions
+---
-Add to the existing context menu actions without removing defaults.
+## Menu Options
```dart
+// Replace all options
CometChatGroupMembers(
group: group,
- addOptions: (group, groupMember, controller, context) {
+ setOptions: (groupMember, bloc, context) {
return [
CometChatOption(
- id: "report",
- title: "Report User",
- iconWidget: Icon(Icons.flag_outlined),
+ id: "message",
+ iconWidget: Icon(Icons.message),
+ title: "Message",
onClick: () {
- // Report user logic
+ // Open chat with this member
},
),
];
},
)
-```
-
-
-
-### appBarOptions
-Add custom widgets to the app bar.
-
-
-
-
-
-
-
-```dart
+// Append to defaults
CometChatGroupMembers(
group: group,
- appBarOptions: [
- IconButton(
- onPressed: () {
- // Navigate to add members
- },
- icon: Icon(Icons.person_add_alt_1, color: Color(0xFF6852D6)),
- ),
- ],
+ addOptions: (groupMember, bloc, context) {
+ return [
+ CometChatOption(
+ id: "profile",
+ iconWidget: Icon(Icons.person),
+ title: "View Profile",
+ onClick: () {
+ // Open member profile
+ },
+ ),
+ ];
+ },
)
```
+---
+
+## Advanced
-### loadingStateView
+### BLoC Access
-Custom view displayed while members are being fetched.
+Provide a custom `GroupMembersBloc`:
```dart
CometChatGroupMembers(
group: group,
- loadingStateView: (context) {
- return Center(
- child: Column(
- mainAxisAlignment: MainAxisAlignment.center,
- children: [
- CircularProgressIndicator(),
- SizedBox(height: 16),
- Text("Loading members..."),
- ],
- ),
- );
- },
+ groupMembersBloc: CustomGroupMembersBloc(),
)
```
-### emptyStateView
+### Public BLoC Events
-Custom view displayed when no members are found.
+| Event | Description |
+|---|---|
+| `LoadGroupMembers` | Load initial members |
+| `LoadMoreGroupMembers` | Load next page (pagination) |
+| `SearchGroupMembers(keyword)` | Search members |
+| `KickMember(groupMember)` | Kick a member from the group |
+| `BanMember(groupMember)` | Ban a member from the group |
+| `ChangeMemberScope(groupMember, newScope)` | Change member's scope |
+| `ToggleMemberSelection(uid)` | Toggle selection state |
+| `ClearMemberSelection` | Clear all selections |
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- emptyStateView: (context) {
- return Center(
- child: Column(
- mainAxisAlignment: MainAxisAlignment.center,
- children: [
- Icon(Icons.people_outline, size: 64, color: Color(0xFF727272)),
- SizedBox(height: 16),
- Text("No members found"),
- ],
- ),
- );
- },
-)
-```
-
-
+For `ListBase` override hooks (`onItemAdded`, `onItemRemoved`, `onItemUpdated`, `onListCleared`, `onListReplaced`), see [BLoC & Data — ListBase Hooks](/ui-kit/flutter/customization-bloc-data#listbase-hooks).
-### errorStateView
+### Public BLoC Methods
-Custom view displayed when an error occurs.
+| Method | Returns | Description |
+|---|---|---|
+| `getStatusNotifier(uid)` | `ValueNotifier` | Per-member status notifier for isolated rebuilds |
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- errorStateView: (context) {
- return Center(
- child: Column(
- mainAxisAlignment: MainAxisAlignment.center,
- children: [
- Icon(Icons.error_outline, size: 64, color: Colors.red),
- SizedBox(height: 16),
- Text("Failed to load members"),
- ElevatedButton(
- onPressed: () {
- // Retry logic
- },
- child: Text("Retry"),
- ),
- ],
- ),
- );
- },
-)
-```
-
-
+### Permission-Based Actions
----
+Member actions (kick, ban, scope change) are permission-aware based on the logged-in user's scope:
+| Logged-in User Scope | Can Kick | Can Ban | Can Change Scope |
+|---|---|---|---|
+| Owner | All members | All members | All members |
+| Admin | Moderators, Participants | Moderators, Participants | Moderators, Participants |
+| Moderator | Participants | Participants | No |
+| Participant | No | No | No |
-## Styling
+---
-Set `CometChatGroupMembersStyle` to customize the appearance.
+## Style
```dart
CometChatGroupMembers(
group: group,
- style: CometChatGroupMembersStyle(
- titleStyle: TextStyle(color: Color(0xFFF76808)),
- separatorColor: Color(0xFFF76808),
- ownerMemberScopeBackgroundColor: Color(0xFFF76808),
- adminMemberScopeBackgroundColor: Color(0xFFFEEDE1),
- adminMemberScopeBorder: Border.all(color: Color(0xFFF76808)),
- adminMemberScopeTextColor: Color(0xFFF76808),
- moderatorMemberScopeBackgroundColor: Color(0xFFFEEDE1),
- moderatorMemberScopeTextColor: Color(0xFFF76808),
- backIconColor: Color(0xFFF76808),
+ groupMembersStyle: CometChatGroupMembersStyle(
+ avatarStyle: CometChatAvatarStyle(
+ borderRadius: BorderRadius.circular(8),
+ backgroundColor: Color(0xFFFBAA75),
+ ),
+ statusIndicatorStyle: CometChatStatusIndicatorStyle(),
+ changeScopeStyle: CometChatChangeScopeStyle(),
+ confirmDialogStyle: CometChatConfirmDialogStyle(),
),
)
```
@@ -908,198 +515,28 @@ CometChatGroupMembers(
### Style Properties
-| Property | Type | Description |
-| --- | --- | --- |
-| `backgroundColor` | `Color?` | Background color of the component |
-| `border` | `BoxBorder?` | Border for the widget |
-| `borderRadius` | `BorderRadiusGeometry?` | Border radius for the widget |
-| `titleStyle` | `TextStyle?` | Style for the header title |
-| `backIconColor` | `Color?` | Back button icon color |
-| `searchBackground` | `Color?` | Background color of search box |
-| `searchBorderRadius` | `BorderRadius?` | Border radius for search box |
-| `searchTextStyle` | `TextStyle?` | Style for search input text |
-| `searchPlaceholderStyle` | `TextStyle?` | Style for search placeholder |
-| `searchIconColor` | `Color?` | Search icon color |
-| `loadingIconColor` | `Color?` | Loading indicator color |
-| `emptyStateTextStyle` | `TextStyle?` | Style for empty state title |
-| `emptyStateTextColor` | `Color?` | Color for empty state title text |
-| `emptyStateSubtitleTextStyle` | `TextStyle?` | Style for empty state subtitle |
-| `emptyStateSubtitleTextColor` | `Color?` | Color for empty state subtitle text |
-| `errorStateTextStyle` | `TextStyle?` | Style for error state title |
-| `errorStateSubtitleStyle` | `TextStyle?` | Style for error state subtitle |
-| `onlineStatusColor` | `Color?` | Online status indicator color |
-| `separatorColor` | `Color?` | Color of list item separators |
-| `separatorHeight` | `double?` | Height of list item separators |
-| `listPadding` | `EdgeInsetsGeometry?` | Padding for the list |
-| `ownerMemberScopeBackgroundColor` | `Color?` | Background color for owner scope badge |
-| `ownerMemberScopeTextColor` | `Color?` | Text color for owner scope badge |
-| `ownerMemberScopeBorder` | `BoxBorder?` | Border for owner scope badge |
-| `ownerMemberScopeTextStyle` | `TextStyle?` | Text style for owner scope badge |
-| `adminMemberScopeBackgroundColor` | `Color?` | Background color for admin scope badge |
-| `adminMemberScopeTextColor` | `Color?` | Text color for admin scope badge |
-| `adminMemberScopeBorder` | `BoxBorder?` | Border for admin scope badge |
-| `adminMemberScopeTextStyle` | `TextStyle?` | Text style for admin scope badge |
-| `moderatorMemberScopeBackgroundColor` | `Color?` | Background color for moderator scope badge |
-| `moderatorMemberScopeTextColor` | `Color?` | Text color for moderator scope badge |
-| `moderatorMemberScopeBorder` | `BoxBorder?` | Border for moderator scope badge |
-| `moderatorMemberScopeTextStyle` | `TextStyle?` | Text style for moderator scope badge |
-| `checkboxCheckedBackgroundColor` | `Color?` | Background color for checked checkbox |
-| `checkboxBackgroundColor` | `Color?` | Background color for unchecked checkbox |
-| `checkboxSelectedIconColor` | `Color?` | Color for checkbox icon when selected |
-| `checkboxBorder` | `BorderSide?` | Border for checkbox |
-| `checkboxBorderRadius` | `BorderRadiusGeometry?` | Border radius for checkbox |
-| `listItemSelectedBackgroundColor` | `Color?` | Background color for selected list item |
-| `submitIconColor` | `Color?` | Color for submit icon |
-| `retryButtonBackgroundColor` | `Color?` | Background color for retry button |
-| `retryButtonTextColor` | `Color?` | Text color for retry button |
-| `retryButtonTextStyle` | `TextStyle?` | Text style for retry button |
-| `retryButtonBorder` | `BorderSide?` | Border for retry button |
-| `retryButtonBorderRadius` | `BorderRadiusGeometry?` | Border radius for retry button |
-| `avatarStyle` | `CometChatAvatarStyle?` | Style for member avatars |
-| `statusIndicatorStyle` | `CometChatStatusIndicatorStyle?` | Style for status indicators |
-| `listItemStyle` | `ListItemStyle?` | Style for list items |
-| `confirmDialogStyle` | `CometChatConfirmDialogStyle?` | Style for confirmation dialogs |
-| `changeScopeStyle` | `CometChatChangeScopeStyle?` | Style for change scope dialog |
-| `optionsBackgroundColor` | `Color?` | Background color for options menu |
-| `optionsIconColor` | `Color?` | Color for options icon |
-| `optionsTextStyle` | `TextStyle?` | Text style for options |
-
----
-
-
-## Common Patterns
-
-### Hide member management options
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- hideKickMemberOption: true,
- hideBanMemberOption: true,
- hideScopeChangeOption: true,
-)
-```
-
-
-
-### Multi-select with selection callback
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- selectionMode: SelectionMode.multiple,
- activateSelection: ActivateSelection.onClick,
- onSelection: (selectedMembers) {
- if (selectedMembers != null && selectedMembers.isNotEmpty) {
- print("Selected ${selectedMembers.length} members");
- // Perform batch action on selected members
- }
- },
-)
-```
-
-
-
-### Hide all chrome — minimal list
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- hideSearch: true,
- hideAppbar: true,
- hideSeparator: true,
-)
-```
-
-
-
-### Filter admins and moderators only
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- groupMembersRequestBuilder: GroupMembersRequestBuilder(group.guid)
- ..scopes = [GroupMemberScope.admin, GroupMemberScope.moderator],
-)
-```
-
-
-
----
-
-
-## Props Reference
-
-| Prop | Type | Default | Description |
-| --- | --- | --- | --- |
-| `group` | `Group` | **required** | The group object to fetch members from |
-| `groupMembersProtocol` | `GroupMembersBuilderProtocol?` | `null` | Custom request builder protocol |
-| `groupMembersRequestBuilder` | `GroupMembersRequestBuilder?` | `null` | Custom request builder for filtering members |
-| `searchKeyword` | `String?` | `null` | Pre-fills search and filters list |
-| `controllerTag` | `String?` | `null` | Tag for controller management |
-| `onSelection` | `Function(List?)?` | `null` | Callback when members are selected |
-| `onItemTap` | `Function(GroupMember)?` | `null` | Callback on tapping a member item |
-| `onItemLongPress` | `Function(GroupMember)?` | `null` | Callback on long pressing a member item |
-| `onBack` | `VoidCallback?` | `null` | Callback on closing this screen |
-| `onError` | `OnError?` | `null` | Callback in case any error occurs |
-| `onLoad` | `OnLoad?` | `null` | Callback when list is fetched and loaded |
-| `onEmpty` | `OnEmpty?` | `null` | Callback when the list is empty |
-| `stateCallBack` | `Function(CometChatGroupMembersController)?` | `null` | Access controller functions from parent |
-| `showBackButton` | `bool` | `true` | Show/hide back button |
-| `hideSearch` | `bool` | `false` | Show/hide search input |
-| `hideSeparator` | `bool?` | `null` | Toggle visibility of separator |
-| `hideError` | `bool?` | `null` | Toggle visibility of error dialog |
-| `hideAppbar` | `bool?` | `null` | Hides the appbar |
-| `usersStatusVisibility` | `bool?` | `true` | Hide status indicator on avatar |
-| `hideKickMemberOption` | `bool?` | `null` | Hide kick member option |
-| `hideBanMemberOption` | `bool?` | `null` | Hide ban member option |
-| `hideScopeChangeOption` | `bool?` | `null` | Hide scope change option |
-| `selectionMode` | `SelectionMode?` | `null` | Selection mode (single/multiple/none) |
-| `activateSelection` | `ActivateSelection?` | `null` | When to activate selection |
-| `subtitleView` | `Widget? Function(BuildContext, GroupMember)?` | `null` | Custom subtitle for each member |
-| `listItemView` | `Widget Function(GroupMember)?` | `null` | Custom view for each member |
-| `trailingView` | `Function(BuildContext, GroupMember)?` | `null` | Custom trailing widget |
-| `leadingView` | `Widget? Function(BuildContext, GroupMember)?` | `null` | Custom leading view |
-| `titleView` | `Widget? Function(BuildContext, GroupMember)?` | `null` | Custom title view |
-| `loadingStateView` | `WidgetBuilder?` | `null` | View for loading state |
-| `emptyStateView` | `WidgetBuilder?` | `null` | View for empty state |
-| `errorStateView` | `WidgetBuilder?` | `null` | View for error state |
-| `backButton` | `Widget?` | `null` | Custom back button widget |
-| `searchBoxIcon` | `Widget?` | `null` | Custom search icon |
-| `selectIcon` | `Widget?` | `null` | Custom selection icon |
-| `submitIcon` | `Widget?` | `null` | Custom selection complete icon |
-| `appBarOptions` | `List?` | `null` | App bar options |
-| `options` | `List? Function(...)?` | `null` | Options visible at slide of each member |
-| `setOptions` | `List? Function(...)?` | `null` | Replace default long press actions |
-| `addOptions` | `List? Function(...)?` | `null` | Add to default long press actions |
-| `searchPlaceholder` | `String?` | `null` | Placeholder text of search input |
-| `height` | `double?` | `null` | Height of the widget |
-| `width` | `double?` | `null` | Width of the widget |
-| `style` | `CometChatGroupMembersStyle?` | `null` | Style for the component |
-| `controller` | `ScrollController?` | `null` | Scroll controller for the list |
+| Property | Description |
+|---|---|
+| `avatarStyle` | Avatar appearance |
+| `statusIndicatorStyle` | Online/offline indicator |
+| `changeScopeStyle` | Scope change dialog style |
+| `confirmDialogStyle` | Kick/ban confirmation dialog style |
---
+## Next Steps
- Display and manage available groups
+ Browse available groups
-
- Add new members to a group
+
+ Complete group chat implementation
-
- View and manage banned members
+
+ Detailed styling reference
-
- Learn how to customize the look and feel
+
+ Browse recent conversations
-
\ No newline at end of file
+
diff --git a/ui-kit/flutter/groups.mdx b/ui-kit/flutter/groups.mdx
index 6c79bfe4c..809dc761f 100644
--- a/ui-kit/flutter/groups.mdx
+++ b/ui-kit/flutter/groups.mdx
@@ -1,275 +1,78 @@
---
title: "Groups"
-description: "Searchable, scrollable list of all available groups with icon, name, member count, and group type indicator."
+description: "Scrollable list of all available groups with search, avatars, group type indicators, and member counts."
---
-
-```json
-{
- "component": "CometChatGroups",
- "package": "cometchat_chat_uikit",
- "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
- "description": "Searchable, scrollable list of all available groups with icon, name, member count, and group type indicator.",
- "primaryOutput": {
- "prop": "onItemTap",
- "type": "Function(BuildContext context, Group group)?"
- },
- "props": {
- "data": {
- "groupsRequestBuilder": {
- "type": "GroupsRequestBuilder?",
- "default": "SDK default (30 per page)",
- "note": "Pass the builder, not the result of .build()"
- },
- "groupsProtocol": {
- "type": "GroupsBuilderProtocol?",
- "default": "null",
- "note": "Custom protocol for fetching groups"
- },
- "scrollController": {
- "type": "ScrollController?",
- "default": "null",
- "note": "Custom scroll controller for the list"
- },
- "title": {
- "type": "String?",
- "default": "Groups",
- "note": "Title text for the app bar"
- },
- "controllerTag": {
- "type": "String?",
- "default": "null",
- "note": "Tag for controller management"
- },
- "searchPlaceholder": {
- "type": "String?",
- "default": "null",
- "note": "Placeholder text for search input"
- },
- "searchKeyword": {
- "type": "String?",
- "default": "null",
- "note": "Pre-fills search and filters list"
- },
- "height": {
- "type": "double?",
- "default": "null"
- },
- "width": {
- "type": "double?",
- "default": "null"
- }
- },
- "callbacks": {
- "onItemTap": "Function(BuildContext context, Group group)?",
- "onItemLongPress": "Function(BuildContext context, Group group)?",
- "onSelection": "Function(List?)?",
- "onBack": "VoidCallback?",
- "onError": "OnError?",
- "onLoad": "OnLoad?",
- "onEmpty": "OnEmpty?",
- "stateCallBack": "Function(CometChatGroupsController controller)?"
- },
- "visibility": {
- "groupTypeVisibility": { "type": "bool?", "default": true },
- "hideAppbar": { "type": "bool?", "default": false },
- "hideError": { "type": "bool?", "default": false },
- "hideSearch": { "type": "bool", "default": false },
- "showBackButton": { "type": "bool", "default": true }
- },
- "selection": {
- "selectionMode": {
- "type": "SelectionMode?",
- "values": ["SelectionMode.single", "SelectionMode.multiple", "SelectionMode.none"],
- "default": "null"
- },
- "activateSelection": {
- "type": "ActivateSelection?",
- "values": ["ActivateSelection.onClick", "ActivateSelection.onLongClick"],
- "default": "null"
- }
- },
- "viewSlots": {
- "listItemView": "Widget Function(Group group)?",
- "leadingView": "Widget? Function(BuildContext context, Group group)?",
- "titleView": "Widget? Function(BuildContext context, Group group)?",
- "subtitleView": "Widget? Function(BuildContext context, Group group)?",
- "trailingView": "Widget? Function(BuildContext context, Group group)?",
- "loadingStateView": "WidgetBuilder?",
- "emptyStateView": "WidgetBuilder?",
- "errorStateView": "WidgetBuilder?",
- "setOptions": "List? Function(Group, CometChatGroupsController, BuildContext)?",
- "addOptions": "List? Function(Group, CometChatGroupsController, BuildContext)?",
- "appBarOptions": "List Function(BuildContext context)?"
- },
- "icons": {
- "backButton": { "type": "Widget?", "default": "built-in back arrow" },
- "searchBoxIcon": { "type": "Widget?", "default": "built-in search icon" },
- "submitIcon": { "type": "Widget?", "default": "built-in check icon" },
- "passwordGroupIcon": { "type": "Widget?", "default": "built-in lock icon" },
- "privateGroupIcon": { "type": "Widget?", "default": "built-in shield icon" }
- },
- "style": {
- "groupsStyle": { "type": "CometChatGroupsStyle?", "default": "null" }
- }
- },
- "events": [
- { "name": "CometChatGroupEvents.ccGroupCreated", "payload": "Group", "description": "Group created" },
- { "name": "CometChatGroupEvents.ccGroupDeleted", "payload": "Group", "description": "Group deleted" },
- { "name": "CometChatGroupEvents.ccGroupLeft", "payload": "Action, User, Group", "description": "User left group" },
- { "name": "CometChatGroupEvents.ccGroupMemberJoined", "payload": "User, Group", "description": "User joined group" },
- { "name": "CometChatGroupEvents.ccGroupMemberAdded", "payload": "List, List, Group, User", "description": "Members added" },
- { "name": "CometChatGroupEvents.ccGroupMemberKicked", "payload": "Action, User, User, Group", "description": "Member kicked" },
- { "name": "CometChatGroupEvents.ccGroupMemberBanned", "payload": "Action, User, User, Group", "description": "Member banned" },
- { "name": "CometChatGroupEvents.ccGroupMemberUnbanned", "payload": "Action, User, User, Group", "description": "Member unbanned" },
- { "name": "CometChatGroupEvents.ccGroupMemberScopeChanged", "payload": "Action, User, String, String, Group", "description": "Member scope changed" },
- { "name": "CometChatGroupEvents.ccOwnershipChanged", "payload": "Group, GroupMember", "description": "Ownership transferred" }
- ],
- "sdkListeners": [
- "onGroupMemberJoined",
- "onGroupMemberLeft",
- "onMemberAddedToGroup",
- "onGroupMemberKicked",
- "onGroupMemberBanned",
- "onGroupMemberScopeChanged",
- "onConnected"
- ],
- "compositionExample": {
- "description": "Group directory wired to message view",
- "components": [
- "CometChatGroups",
- "CometChatMessages",
- "CometChatMessageHeader",
- "CometChatMessageList",
- "CometChatMessageComposer"
- ],
- "flow": "onItemTap emits Group -> pass to CometChatMessages or individual message components"
- },
- "types": {
- "CometChatOption": {
- "id": "String?",
- "title": "String?",
- "icon": "String?",
- "iconWidget": "Widget?",
- "onClick": "VoidCallback?"
- },
- "SelectionMode": {
- "single": "SelectionMode.single",
- "multiple": "SelectionMode.multiple",
- "none": "SelectionMode.none"
- },
- "ActivateSelection": {
- "onClick": "ActivateSelection.onClick",
- "onLongClick": "ActivateSelection.onLongClick"
- }
- }
-}
-```
-
+`CometChatGroups` renders a scrollable list of all available groups with real-time updates for group events, search, avatars, group type indicators (public/private/password), and member counts.
+
+
+
+
+---
## Where It Fits
-`CometChatGroups` is a directory list widget. It renders available groups and emits the selected `Group` via `onItemTap`. Wire it to `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer` to build a group chat layout.
+`CometChatGroups` is a list component. It renders all available groups and emits the selected `Group` via `onItemTap`. Wire it to `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer` to build a group chat layout.
```dart
-import 'package:flutter/material.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
-class GroupChatApp extends StatefulWidget {
- const GroupChatApp({super.key});
-
- @override
- State createState() => _GroupChatAppState();
-}
-
-class _GroupChatAppState extends State {
- Group? selectedGroup;
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: Row(
- children: [
- SizedBox(
- width: 400,
- child: CometChatGroups(
- onItemTap: (context, group) {
- setState(() {
- selectedGroup = group;
- });
- },
- ),
- ),
- Expanded(
- child: selectedGroup != null
- ? CometChatMessages(group: selectedGroup)
- : const Center(child: Text('Select a group')),
- ),
- ],
- ),
- );
- }
-}
+CometChatGroups(
+ onItemTap: (context, group) {
+ // Navigate to group chat
+ },
+)
```
-
-
-
-
---
+## Quick Start
-## Minimal Render
+Using Navigator:
```dart
-import 'package:flutter/material.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
-class GroupsDemo extends StatelessWidget {
- const GroupsDemo({super.key});
-
- @override
- Widget build(BuildContext context) {
- return const Scaffold(
- body: SafeArea(
- child: CometChatGroups(),
- ),
- );
- }
-}
+Navigator.push(context, MaterialPageRoute(builder: (context) => const CometChatGroups()));
```
-You can also launch it using `Navigator.push`:
+Embedding as a widget:
+
+
```dart
-Navigator.push(
- context,
- MaterialPageRoute(builder: (context) => const CometChatGroups())
-);
+@override
+Widget build(BuildContext context) {
+ return Scaffold(
+ body: SafeArea(
+ child: CometChatGroups(),
+ ),
+ );
+}
```
+
+
+
+Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()`, a user logged in, and the UI Kit dependency added.
---
## Filtering Groups
-Pass a `GroupsRequestBuilder` to `groupsRequestBuilder`. Pass the builder instance — not the result of `.build()`.
+Pass a `GroupsRequestBuilder` to control what loads:
```dart
CometChatGroups(
groupsRequestBuilder: GroupsRequestBuilder()
- ..joinedOnly = true
- ..limit = 10,
+ ..limit = 10
+ ..searchKeyword = "team",
)
```
@@ -277,345 +80,176 @@ CometChatGroups(
### Filter Recipes
-| Recipe | Code |
-| --- | --- |
-| Joined groups only | `GroupsRequestBuilder()..joinedOnly = true` |
-| Limit to 10 per page | `GroupsRequestBuilder()..limit = 10` |
-| Search by keyword | `GroupsRequestBuilder()..searchKeyword = "design"` |
-| Filter by tags | `GroupsRequestBuilder()..tags = ["vip"]` |
-| With tags data | `GroupsRequestBuilder()..withTags = true` |
-
-Default page size is 30. The component uses infinite scroll — the next page loads as the user scrolls to the bottom.
-
-
-### GroupsRequestBuilder Properties
-
-| Property | Description | Code |
-| --- | --- | --- |
-| `limit` | Number of groups to fetch per request. | `..limit = 30` |
-| `searchKeyword` | Search groups by name. | `..searchKeyword = "Team"` |
-| `joinedOnly` | Fetch only joined groups. Default `false`. | `..joinedOnly = true` |
-| `tags` | Filter groups by specific tags. | `..tags = ["vip"]` |
-| `withTags` | Include tags in the Group object. Default `false`. | `..withTags = true` |
-| `build()` | Builds and returns a `GroupsRequest` object. | `.build()` |
-
-Refer to [GroupsRequestBuilder](/sdk/flutter/retrieve-groups) for the full builder API.
+| Recipe | Builder property |
+|---|---|
+| Limit per page | `..limit = 10` |
+| Search by keyword | `..searchKeyword = "team"` |
+| Joined groups only | `..joinedOnly = true` |
+| Filter by tags | `..tags = ["project"]` |
+| With tags | `..withTags = true` |
---
## Actions and Events
-### Callback Props
+### Callback Methods
-#### onItemTap
+#### `onItemTap`
-Fires when a group row is tapped. Primary navigation hook — set the active group and render the message view.
+Fires when a group row is tapped. Primary navigation hook.
```dart
CometChatGroups(
onItemTap: (context, group) {
- print("Selected: ${group.name}");
+ // Navigate to group chat screen
},
)
```
-#### onItemLongPress
+#### `onItemLongPress`
-Fires when a group row is long-pressed. Useful for showing context menus or custom actions.
+Fires when a group row is long-pressed.
```dart
CometChatGroups(
onItemLongPress: (context, group) {
- // Show custom context menu
+ // Show context menu
},
)
```
-#### onSelection
+#### `onBack`
-Fires when groups are selected in multi-select mode. Requires `selectionMode` to be set.
+Fires when the user presses the back button in the app bar.
```dart
CometChatGroups(
- selectionMode: SelectionMode.multiple,
- activateSelection: ActivateSelection.onClick,
- onSelection: (selectedList) {
- print("Selected ${selectedList?.length ?? 0} groups");
+ onBack: () {
+ Navigator.pop(context);
},
)
```
+#### `onSelection`
-#### onError
-
-Fires on internal errors (network failure, auth issue, SDK exception).
+Fires when groups are selected/deselected in multi-select mode.
```dart
CometChatGroups(
- onError: (error) {
- print("CometChatGroups error: $error");
+ selectionMode: SelectionMode.multiple,
+ onSelection: (selectedGroups, context) {
+ // Handle selected groups
},
)
```
-#### onBack
+#### `onError`
-Fires when the back button is pressed.
+Fires on internal errors.
```dart
CometChatGroups(
- showBackButton: true,
- onBack: () {
- Navigator.pop(context);
+ onError: (e) {
+ debugPrint("Error: ${e.message}");
},
)
```
-#### onLoad
+#### `onLoad`
-Fires when the group list is successfully loaded.
+Fires when the list is successfully fetched and loaded.
```dart
CometChatGroups(
- onLoad: (list) {
- print("Loaded ${list.length} groups");
+ onLoad: (groupList) {
+ debugPrint("Loaded ${groupList.length} groups");
},
)
```
-#### onEmpty
+#### `onEmpty`
-Fires when the group list is empty.
+Fires when the list is empty after loading.
```dart
CometChatGroups(
onEmpty: () {
- print("No groups found");
+ debugPrint("No groups found");
},
)
```
-### Global UI Events
-
-`CometChatGroupEvents` emits events subscribable from anywhere in the application. Add a listener in `initState` and remove it in `dispose`.
-
-| Event | Fires when | Payload |
-| --- | --- | --- |
-| `ccGroupCreated` | A new group is created | `Group` |
-| `ccGroupDeleted` | A group is deleted | `Group` |
-| `ccGroupLeft` | A user leaves a group | `Action, User, Group` |
-| `ccGroupMemberJoined` | A user joins a group | `User, Group` |
-| `ccGroupMemberAdded` | Members are added to a group | `List, List, Group, User` |
-| `ccGroupMemberKicked` | A member is kicked | `Action, User, User, Group` |
-| `ccGroupMemberBanned` | A member is banned | `Action, User, User, Group` |
-| `ccGroupMemberUnbanned` | A member is unbanned | `Action, User, User, Group` |
-| `ccGroupMemberScopeChanged` | A member's scope changes | `Action, User, String, String, Group` |
-| `ccOwnershipChanged` | Group ownership is transferred | `Group, GroupMember` |
-
-When to use: sync external UI with group state changes. For example, update a group count badge when a group is created or deleted.
-
-
-
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:cometchat_sdk/models/action.dart' as cc;
-
-class _YourScreenState extends State with CometChatGroupEventListener {
-
- @override
- void initState() {
- super.initState();
- CometChatGroupEvents.addGroupsListener("listenerId", this);
- }
-
- @override
- void dispose() {
- CometChatGroupEvents.removeGroupsListener("listenerId");
- super.dispose();
- }
-
- @override
- void ccGroupCreated(Group group) {
- print("Group created: ${group.name}");
- }
-
- @override
- void ccGroupDeleted(Group group) {
- print("Group deleted: ${group.name}");
- }
-
- @override
- void ccGroupLeft(cc.Action message, User leftUser, Group leftGroup) {
- print("User ${leftUser.name} left ${leftGroup.name}");
- }
-
- @override
- void ccGroupMemberJoined(User joinedUser, Group joinedGroup) {
- print("User ${joinedUser.name} joined ${joinedGroup.name}");
- }
-
- @override
- void ccOwnershipChanged(Group group, GroupMember newOwner) {
- print("Ownership of ${group.name} transferred to ${newOwner.name}");
- }
-
- @override
- Widget build(BuildContext context) {
- return const Placeholder();
- }
-}
-```
-
-
-
### SDK Events (Real-Time, Automatic)
-The component listens to these SDK events internally. No manual attachment needed unless additional side effects are required.
+The component listens to these SDK events internally. No manual setup needed.
| SDK Listener | Internal behavior |
-| --- | --- |
-| `onGroupMemberJoined` | Updates member count, sets `hasJoined` if current user joined |
-| `onGroupMemberLeft` | Updates member count |
-| `onMemberAddedToGroup` | Updates member count, adds group to list if current user was added |
-| `onGroupMemberKicked` | Updates member count |
-| `onGroupMemberBanned` | Updates member count |
-| `onGroupMemberScopeChanged` | Updates member scope |
-
-Automatic: group membership changes, member count updates.
+|---|---|
+| `onGroupMemberJoined` | Updates group member count |
+| `onGroupMemberLeft` | Updates group member count |
+| `onGroupMemberKicked` | Updates group member count, removes group if logged-in user was kicked |
+| `onGroupMemberBanned` | Updates group member count, removes group if logged-in user was banned |
+| `onMemberAddedToGroup` | Updates group member count |
+| `ccGroupCreated` | Adds new group to list |
+| `ccGroupDeleted` | Removes group from list |
+| Connection reconnected | Triggers silent refresh |
---
+## Functionality
-## Custom View Slots
-
-Each slot replaces a section of the default UI. Slots that accept a group parameter receive the `Group` object for that row.
-
-| Slot | Signature | Replaces |
-| --- | --- | --- |
-| `listItemView` | `Widget Function(Group)` | Entire list item row |
-| `leadingView` | `Widget? Function(BuildContext, Group)` | Avatar / left section |
-| `titleView` | `Widget? Function(BuildContext, Group)` | Name / title text |
-| `subtitleView` | `Widget? Function(BuildContext, Group)` | Member count subtitle |
-| `trailingView` | `Widget? Function(BuildContext, Group)` | Right section |
-| `loadingStateView` | `WidgetBuilder` | Loading spinner |
-| `emptyStateView` | `WidgetBuilder` | Empty state |
-| `errorStateView` | `WidgetBuilder` | Error state |
-| `setOptions` | `List? Function(Group, Controller, BuildContext)` | Context menu actions (replaces default) |
-| `addOptions` | `List? Function(Group, Controller, BuildContext)` | Context menu actions (adds to default) |
-| `appBarOptions` | `List Function(BuildContext)` | App bar action widgets |
-
-### listItemView
+| Property | Type | Default | Description |
+|---|---|---|---|
+| `title` | `String?` | `null` | Custom app bar title |
+| `showBackButton` | `bool` | `true` | Toggle back button |
+| `hideAppbar` | `bool?` | `false` | Toggle app bar visibility |
+| `hideSearch` | `bool` | `false` | Toggle search bar |
+| `selectionMode` | `SelectionMode?` | `null` | Enable selection mode (`single` or `multiple`) |
+| `searchPlaceholder` | `String?` | `null` | Search placeholder text |
-Replace the entire list item row.
-
-
-
-
-
-
-
-```dart
-CometChatGroups(
- listItemView: (group) {
- return ListTile(
- title: Text(
- group.name,
- style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
- ),
- subtitle: Text(
- "${group.membersCount} Members • ${group.description}",
- overflow: TextOverflow.ellipsis,
- style: TextStyle(fontSize: 14, color: Color(0xFF727272)),
- ),
- trailing: ElevatedButton(
- onPressed: () {
- CometChat.joinGroup(
- group.guid,
- group.type,
- onSuccess: (group) {
- // Handle success
- },
- onError: (error) {
- // Handle error
- },
- );
- },
- style: ElevatedButton.styleFrom(
- backgroundColor: Color(0xFFEDEAFA),
- elevation: 0,
- shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(1000)),
- ),
- child: Text("JOIN", style: TextStyle(color: Color(0xFF6852D6), fontSize: 12)),
- ),
- );
- },
-)
-```
-
-
+---
+## Custom View Slots
-### leadingView
+### Leading View
-Replace the avatar / left section. Joined status badge example.
+Replace the avatar / left section.
```dart
CometChatGroups(
leadingView: (context, group) {
- return Stack(
- children: [
- CometChatAvatar(
- image: group.icon,
- name: group.name,
- style: CometChatAvatarStyle(borderRadius: BorderRadius.circular(8)),
- ),
- if (group.hasJoined)
- Positioned(
- bottom: -2,
- left: 0,
- right: 0,
- child: Container(
- padding: EdgeInsets.symmetric(horizontal: 4, vertical: 2),
- decoration: BoxDecoration(color: Color(0xFF09C26F)),
- child: Text(
- "Joined",
- textAlign: TextAlign.center,
- style: TextStyle(color: Colors.white, fontSize: 8, fontWeight: FontWeight.w600),
- ),
- ),
- ),
- ],
+ return CircleAvatar(
+ child: Text(group.name?[0] ?? "G"),
);
},
)
@@ -623,36 +257,18 @@ CometChatGroups(
-### titleView
+### Title View
-Replace the name / title text. Group type badge inline example.
+Replace the group name / title text.
```dart
CometChatGroups(
titleView: (context, group) {
- return Row(
- children: [
- Text(
- group.name,
- style: TextStyle(fontWeight: FontWeight.w500, fontSize: 16),
- ),
- SizedBox(width: 4),
- Container(
- padding: EdgeInsets.symmetric(horizontal: 4, vertical: 2),
- decoration: BoxDecoration(
- color: group.type == GroupTypeConstants.public
- ? Color(0xFF0B7BEA)
- : Color(0xFF09C26F),
- borderRadius: BorderRadius.circular(7),
- ),
- child: Text(
- group.type,
- style: TextStyle(color: Colors.white, fontSize: 8, fontWeight: FontWeight.w600),
- ),
- ),
- ],
+ return Text(
+ group.name ?? "",
+ style: TextStyle(fontWeight: FontWeight.bold),
);
},
)
@@ -660,13 +276,9 @@ CometChatGroups(
-### subtitleView
+### Subtitle View
-Replace the member count subtitle text.
-
-
-
-
+Replace the subtitle text below the group name.
@@ -674,9 +286,8 @@ Replace the member count subtitle text.
CometChatGroups(
subtitleView: (context, group) {
return Text(
- "${group.membersCount} Members • ${group.description ?? 'No description'}",
- overflow: TextOverflow.ellipsis,
- style: TextStyle(fontSize: 14, color: Color(0xFF727272)),
+ "${group.membersCount} members",
+ style: TextStyle(color: Color(0xFF727272), fontSize: 14),
);
},
)
@@ -684,814 +295,190 @@ CometChatGroups(
+### Trailing View
-### trailingView
-
-Replace the right section. Join status button example.
+Replace the right section of each group item.
```dart
CometChatGroups(
trailingView: (context, group) {
- return Container(
- padding: EdgeInsets.symmetric(horizontal: 12, vertical: 4),
- decoration: BoxDecoration(
- color: Color(0xFFEDEAFA),
- borderRadius: BorderRadius.circular(1000),
- ),
- child: Text(
- group.hasJoined ? "JOINED" : "+ JOIN",
- style: TextStyle(color: Color(0xFF6852D6), fontSize: 12, fontWeight: FontWeight.w700),
- ),
- );
+ return Text(group.type ?? "");
},
)
```
-### setOptions
+### List Item View
-Replace the context menu / long-press actions on each group item.
+Replace the entire list item row.
```dart
CometChatGroups(
- setOptions: (group, controller, context) {
- return [
- CometChatOption(
- id: "leave",
- title: "Leave Group",
- icon: AssetConstants.close,
- onClick: () {
- CometChat.leaveGroup(group.guid, onSuccess: (response) {
- print("Left group");
- }, onError: (error) {
- print("Error: $error");
- });
- },
- ),
- CometChatOption(
- id: "view_members",
- title: "View Members",
- iconWidget: Icon(Icons.people_outline),
- onClick: () {
- // Navigate to group members
- },
- ),
- ];
+ listItemView: (group) {
+ return ListTile(
+ leading: CircleAvatar(child: Text(group.name?[0] ?? "G")),
+ title: Text(group.name ?? ""),
+ subtitle: Text("${group.membersCount} members"),
+ );
},
)
```
-### addOptions
-
-Add to the existing context menu actions without removing defaults.
+### State Views
```dart
CometChatGroups(
- addOptions: (group, controller, context) {
- return [
- CometChatOption(
- id: "mute",
- title: "Mute Notifications",
- iconWidget: Icon(Icons.notifications_off_outlined),
- onClick: () {
- // Mute notifications logic
- },
- ),
- CometChatOption(
- id: "pin",
- title: "Pin Group",
- iconWidget: Icon(Icons.push_pin_outlined),
- onClick: () {
- // Pin group logic
- },
- ),
- ];
- },
+ emptyStateView: (context) => Center(child: Text("No groups found")),
+ errorStateView: (context) => Center(child: Text("Something went wrong")),
+ loadingStateView: (context) => Center(child: CircularProgressIndicator()),
)
```
+---
-### appBarOptions
-
-Add custom widgets to the app bar.
+## Common Patterns
-
-
-
+### Minimal list — hide all chrome
```dart
CometChatGroups(
- appBarOptions: (context) => [
- IconButton(
- onPressed: () {
- // Navigate to create group
- },
- icon: Icon(Icons.group_add, color: Color(0xFF6852D6)),
- ),
- ],
+ hideAppbar: true,
+ hideSearch: true,
)
```
----
-
-## Styling
-
-Set `CometChatGroupsStyle` to customize the appearance.
+### Joined groups only
```dart
CometChatGroups(
- groupsStyle: CometChatGroupsStyle(
- backgroundColor: Colors.white,
- titleTextColor: Color(0xFFF76808),
- separatorColor: Color(0xFFF76808),
- avatarStyle: CometChatAvatarStyle(
- borderRadius: BorderRadius.circular(8),
- backgroundColor: Color(0xFFFBAA75),
- ),
- ),
+ groupsRequestBuilder: GroupsRequestBuilder()
+ ..joinedOnly = true,
)
```
-
-
-
-
-### Style Properties
-
-| Property | Type | Description |
-| --- | --- | --- |
-| `backgroundColor` | `Color` | Background color of the component |
-| `border` | `Border` | Border for the widget |
-| `borderRadius` | `BorderRadiusGeometry` | Border radius for the widget |
-| `titleTextColor` | `Color` | Color of the header title |
-| `titleTextStyle` | `TextStyle` | Style for the header title |
-| `backIconColor` | `Color` | Back button icon color |
-| `searchBackgroundColor` | `Color` | Background color of search box |
-| `searchBorder` | `BorderSide` | Border for search box |
-| `searchBorderRadius` | `BorderRadius` | Border radius for search box |
-| `searchPlaceHolderTextColor` | `Color` | Placeholder text color in search |
-| `searchPlaceHolderTextStyle` | `TextStyle` | Placeholder text style in search |
-| `searchIconColor` | `Color` | Search icon color |
-| `searchInputTextColor` | `Color` | Search input text color |
-| `searchInputTextStyle` | `TextStyle` | Search input text style |
-| `separatorColor` | `Color` | Color of list item separators |
-| `separatorHeight` | `double` | Height of list item separators |
-| `itemTitleTextColor` | `Color` | Color of group name in list items |
-| `itemTitleTextStyle` | `TextStyle` | Style for group name in list items |
-| `itemSubtitleTextColor` | `Color` | Color of member count subtitle |
-| `itemSubtitleTextStyle` | `TextStyle` | Style for member count subtitle |
-| `listItemSelectedBackgroundColor` | `Color` | Background color for selected items |
-| `privateGroupIconBackground` | `Color` | Background color for private group icon |
-| `protectedGroupIconBackground` | `Color` | Background color for password group icon |
-| `emptyStateTextColor` | `Color` | Text color for empty state title |
-| `emptyStateTextStyle` | `TextStyle` | Text style for empty state title |
-| `emptyStateSubTitleTextColor` | `Color` | Text color for empty state subtitle |
-| `emptyStateSubTitleTextStyle` | `TextStyle` | Text style for empty state subtitle |
-| `errorStateTextColor` | `Color` | Text color for error state title |
-| `errorStateTextStyle` | `TextStyle` | Text style for error state title |
-| `errorStateSubTitleTextColor` | `Color` | Text color for error state subtitle |
-| `errorStateSubTitleTextStyle` | `TextStyle` | Text style for error state subtitle |
-| `retryButtonBackgroundColor` | `Color` | Background color for retry button |
-| `retryButtonBorderRadius` | `BorderRadius` | Border radius for retry button |
-| `retryButtonBorder` | `BorderSide` | Border for retry button |
-| `retryButtonTextColor` | `Color` | Text color for retry button |
-| `retryButtonTextStyle` | `TextStyle` | Text style for retry button |
-| `submitIconColor` | `Color` | Color of submit icon in selection mode |
-| `checkBoxBackgroundColor` | `Color` | Background color of unchecked checkbox |
-| `checkBoxCheckedBackgroundColor` | `Color` | Background color of checked checkbox |
-| `checkboxSelectedIconColor` | `Color` | Color of checkmark icon |
-| `checkBoxBorderRadius` | `BorderRadius` | Border radius for checkbox |
-| `checkBoxBorder` | `BorderSide` | Border for checkbox |
-| `avatarStyle` | `CometChatAvatarStyle` | Style for group avatars |
-| `statusIndicatorStyle` | `CometChatStatusIndicatorStyle` | Style for group type indicators |
-
---
+## Advanced
-## Common Patterns
+### BLoC Access
-### Custom empty state with CTA
+Provide a custom `GroupsBloc` to override behavior:
```dart
CometChatGroups(
- emptyStateView: (context) {
- return Center(
- child: Column(
- mainAxisAlignment: MainAxisAlignment.center,
- children: [
- Icon(Icons.group_outlined, size: 64, color: Color(0xFF727272)),
- SizedBox(height: 16),
- Text("No groups found", style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500)),
- SizedBox(height: 8),
- ElevatedButton(
- onPressed: () {
- // Navigate to create group
- },
- child: Text("Create a Group"),
- ),
- ],
- ),
- );
- },
+ groupsBloc: CustomGroupsBloc(),
)
```
-### Joined groups only
+### Extending GroupsBloc
+
+`GroupsBloc` uses the `ListBase` mixin with override hooks:
```dart
-CometChatGroups(
- groupsRequestBuilder: GroupsRequestBuilder()
- ..joinedOnly = true,
-)
+class CustomGroupsBloc extends GroupsBloc {
+ @override
+ void onItemAdded(Group item, List updatedList) {
+ // Custom sorting logic
+ super.onItemAdded(item, updatedList);
+ }
+
+ @override
+ void onListReplaced(List previousList, List newList) {
+ // Filter out specific groups
+ final filtered = newList.where((g) => g.membersCount > 0).toList();
+ super.onListReplaced(previousList, filtered);
+ }
+}
```
-### Multi-select with selection callback
+For `ListBase` override hooks (`onItemAdded`, `onItemRemoved`, `onItemUpdated`, `onListCleared`, `onListReplaced`), see [BLoC & Data — ListBase Hooks](/ui-kit/flutter/customization-bloc-data#listbase-hooks).
-
-
-```dart
-CometChatGroups(
- selectionMode: SelectionMode.multiple,
- activateSelection: ActivateSelection.onClick,
- onSelection: (selectedGroups) {
- if (selectedGroups != null && selectedGroups.isNotEmpty) {
- print("Selected ${selectedGroups.length} groups");
- // Perform batch action on selected groups
- }
- },
-)
-```
-
-
+### Public BLoC Events
-### Hide all chrome — minimal list
+| Event | Description |
+|---|---|
+| `LoadGroups({searchKeyword, silent})` | Load initial groups. `silent: true` keeps existing list visible. |
+| `LoadMoreGroups()` | Load next page (pagination) |
+| `RefreshGroups()` | Refresh the list |
+| `SearchGroups(keyword)` | Search groups with debouncing |
+
+---
+
+## Style
```dart
CometChatGroups(
- hideSearch: true,
- hideAppbar: true,
- groupTypeVisibility: false,
+ groupsStyle: CometChatGroupsStyle(
+ avatarStyle: CometChatAvatarStyle(
+ borderRadius: BorderRadius.circular(8),
+ backgroundColor: Color(0xFFFBAA75),
+ ),
+ statusIndicatorStyle: CometChatStatusIndicatorStyle(),
+ ),
)
```
----
-
-## Accessibility
-
-The component renders a scrollable list of interactive items. Each group row supports:
-
-- Tap gesture for selection/navigation
-- Long-press gesture for context menu actions
-- Checkbox selection in multi-select mode with proper touch targets
-- Group type indicators (public/private/password) with visual icons
-
-For screen readers:
-- Group names are readable as list item titles
-- Group type indicators use icons — consider adding `Semantics` widgets via `leadingView` if screen reader descriptions are needed
-- Selection state is communicated through checkbox widgets
-
-The component respects system accessibility settings including text scaling and high contrast modes.
-
----
-
-
-## Props
-
-All props are optional unless noted.
-
-### activateSelection
-
-Controls when selection mode activates.
-
-| | |
-| --- | --- |
-| Type | `ActivateSelection` |
-| Default | `null` |
-
-Values: `ActivateSelection.onClick`, `ActivateSelection.onLongClick`
-
----
-
-### addOptions
-
-Adds additional context menu actions to the default options.
-
-| | |
-| --- | --- |
-| Type | `List? Function(Group, CometChatGroupsController, BuildContext)` |
-| Default | `null` |
-
----
-
-### appBarOptions
-
-Custom widgets to display in the app bar.
-
-| | |
-| --- | --- |
-| Type | `List Function(BuildContext context)` |
-| Default | `null` |
-
----
-
-### backButton
-
-Custom back button widget.
-
-| | |
-| --- | --- |
-| Type | `Widget` |
-| Default | Built-in back arrow |
-
----
-
-### controllerTag
-
-Identifier tag for controller management.
-
-| | |
-| --- | --- |
-| Type | `String` |
-| Default | `null` |
-
----
-
-### emptyStateView
-
-Custom view displayed when there are no groups.
-
-| | |
-| --- | --- |
-| Type | `WidgetBuilder` |
-| Default | Built-in empty state |
-
----
-
-### errorStateView
-
-Custom view displayed when an error occurs.
-
-| | |
-| --- | --- |
-| Type | `WidgetBuilder` |
-| Default | Built-in error state |
-
----
-
-### groupsProtocol
-
-Custom protocol for fetching groups.
-
-| | |
-| --- | --- |
-| Type | `GroupsBuilderProtocol` |
-| Default | `null` |
-
----
-
-
-### groupsRequestBuilder
-
-Controls which groups load and in what order.
-
-| | |
-| --- | --- |
-| Type | `GroupsRequestBuilder` |
-| Default | SDK default (30 per page) |
-
-Pass the builder instance, not the result of `.build()`.
-
----
-
-### groupsStyle
-
-Styling options for the groups list.
-
-| | |
-| --- | --- |
-| Type | `CometChatGroupsStyle` |
-| Default | `null` |
-
----
-
-### groupTypeVisibility
-
-Shows or hides the group type icon (public/private/password) on group avatars.
-
-| | |
-| --- | --- |
-| Type | `bool` |
-| Default | `true` |
-
----
-
-### height
-
-Height of the widget.
-
-| | |
-| --- | --- |
-| Type | `double` |
-| Default | `null` |
-
----
-
-### hideAppbar
-
-Hides the app bar including title and search.
-
-| | |
-| --- | --- |
-| Type | `bool` |
-| Default | `false` |
-
----
-
-### hideError
-
-Hides the error state view.
-
-| | |
-| --- | --- |
-| Type | `bool` |
-| Default | `false` |
-
----
-
-### hideSearch
-
-Hides the search input box.
-
-| | |
-| --- | --- |
-| Type | `bool` |
-| Default | `false` |
-
----
-
-### leadingView
-
-Custom renderer for the avatar / left section.
-
-| | |
-| --- | --- |
-| Type | `Widget? Function(BuildContext context, Group group)` |
-| Default | Built-in avatar |
-
----
-
-### listItemView
-
-Custom renderer for the entire list item row.
-
-| | |
-| --- | --- |
-| Type | `Widget Function(Group group)` |
-| Default | Built-in list item |
-
----
-
-
-### loadingStateView
-
-Custom view displayed during loading state.
-
-| | |
-| --- | --- |
-| Type | `WidgetBuilder` |
-| Default | Built-in shimmer |
-
----
-
-### onBack
-
-Callback triggered when the back button is pressed.
-
-| | |
-| --- | --- |
-| Type | `VoidCallback` |
-| Default | `null` |
-
----
-
-### onEmpty
-
-Callback triggered when the group list is empty.
-
-| | |
-| --- | --- |
-| Type | `OnEmpty` |
-| Default | `null` |
-
----
-
-### onError
-
-Callback triggered when an error occurs.
-
-| | |
-| --- | --- |
-| Type | `OnError` |
-| Default | `null` |
-
----
-
-### onItemLongPress
-
-Callback triggered on long press of a group item.
-
-| | |
-| --- | --- |
-| Type | `Function(BuildContext context, Group group)` |
-| Default | `null` |
-
----
-
-### onItemTap
-
-Callback triggered when tapping a group item.
-
-| | |
-| --- | --- |
-| Type | `Function(BuildContext context, Group group)` |
-| Default | `null` |
-
----
-
-### onLoad
-
-Callback triggered when the list is successfully loaded.
-
-| | |
-| --- | --- |
-| Type | `OnLoad` |
-| Default | `null` |
-
----
-
-### onSelection
-
-Callback triggered when groups are selected. Requires `selectionMode` to be set.
-
-| | |
-| --- | --- |
-| Type | `Function(List? list)` |
-| Default | `null` |
-
----
-
-### passwordGroupIcon
-
-Custom icon widget for password-protected groups.
-
-| | |
-| --- | --- |
-| Type | `Widget` |
-| Default | Built-in lock icon |
-
----
-
-### privateGroupIcon
-
-Custom icon widget for private groups.
-
-| | |
-| --- | --- |
-| Type | `Widget` |
-| Default | Built-in shield icon |
-
----
-
-
-### scrollController
-
-Controller for scrolling the list.
-
-| | |
-| --- | --- |
-| Type | `ScrollController` |
-| Default | `null` |
-
----
-
-### searchBoxIcon
-
-Custom search box icon widget.
-
-| | |
-| --- | --- |
-| Type | `Widget` |
-| Default | Built-in search icon |
-
----
-
-### searchKeyword
-
-Pre-fills the search and filters the group list.
-
-| | |
-| --- | --- |
-| Type | `String` |
-| Default | `null` |
-
----
-
-### searchPlaceholder
-
-Placeholder text for the search input box.
-
-| | |
-| --- | --- |
-| Type | `String` |
-| Default | `null` |
-
----
-
-### selectionMode
-
-Enables single or multi-select mode.
-
-| | |
-| --- | --- |
-| Type | `SelectionMode` |
-| Default | `null` |
-
-Values: `SelectionMode.single`, `SelectionMode.multiple`, `SelectionMode.none`
-
----
-
-### setOptions
-
-Replaces the default context menu actions.
-
-| | |
-| --- | --- |
-| Type | `List? Function(Group, CometChatGroupsController, BuildContext)` |
-| Default | `null` |
-
----
-
-### showBackButton
-
-Shows or hides the back button.
-
-| | |
-| --- | --- |
-| Type | `bool` |
-| Default | `true` |
-
----
-
-### stateCallBack
-
-Callback to access controller functions from parent.
-
-| | |
-| --- | --- |
-| Type | `Function(CometChatGroupsController controller)` |
-| Default | `null` |
-
----
-
-### submitIcon
-
-Custom submit icon widget for selection mode.
-
-| | |
-| --- | --- |
-| Type | `Widget` |
-| Default | Built-in check icon |
-
----
-
-### subtitleView
-
-Custom renderer for the member count subtitle.
-
-| | |
-| --- | --- |
-| Type | `Widget? Function(BuildContext context, Group group)` |
-| Default | Built-in member count |
-
----
-
-### title
-
-Title text displayed in the app bar.
-
-| | |
-| --- | --- |
-| Type | `String` |
-| Default | `"Groups"` |
-
----
-
-### titleView
-
-Custom renderer for the name / title text.
-
-| | |
-| --- | --- |
-| Type | `Widget? Function(BuildContext context, Group group)` |
-| Default | Built-in title |
-
----
-
-### trailingView
-
-Custom renderer for the right section.
-
-| | |
-| --- | --- |
-| Type | `Widget? Function(BuildContext context, Group group)` |
-| Default | `null` |
-
----
-
-### width
-
-Width of the widget.
-
-| | |
-| --- | --- |
-| Type | `double` |
-| Default | `null` |
-
----
-
+
+
+
-## Events
+### Style Properties
-`CometChatGroups` subscribes to `CometChatGroupEvents`:
+| Property | Description |
+|---|---|
+| `backgroundColor` | List background color |
+| `avatarStyle` | Avatar appearance |
+| `statusIndicatorStyle` | Group type indicator |
+| `searchBoxStyle` | Search box appearance |
-| Event | Payload | Internal behavior |
-| --- | --- | --- |
-| `ccGroupCreated` | `Group` | Adds new group to list |
-| `ccGroupDeleted` | `Group` | Removes group from list |
-| `ccGroupLeft` | `Action, User, Group` | Removes private group or updates hasJoined |
-| `ccGroupMemberJoined` | `User, Group` | Updates group in list |
-| `ccGroupMemberAdded` | `List, List, Group, User` | Updates group in list |
-| `ccGroupMemberKicked` | `Action, User, User, Group` | Updates group in list |
-| `ccGroupMemberBanned` | `Action, User, User, Group` | Updates group in list |
-| `ccOwnershipChanged` | `Group, GroupMember` | Updates group in list |
+See [Component Styling](/ui-kit/flutter/component-styling) for the full reference.
---
-## Customization Matrix
-
-| What to change | Where | Property/API | Example |
-| --- | --- | --- | --- |
-| Override behavior on group interaction | Component props | `on` callbacks | `onItemTap: (ctx, group) => setActive(group)` |
-| Filter which groups appear | Component props | `groupsRequestBuilder` | `groupsRequestBuilder: GroupsRequestBuilder()..joinedOnly = true` |
-| Toggle visibility of UI elements | Component props | `hide` / `show` boolean props | `hideSearch: true` |
-| Replace a section of the list item | Component props | `View` render props | `listItemView: (group) => CustomWidget()` |
-| Change colors, fonts, spacing | Component props | `groupsStyle` | `groupsStyle: CometChatGroupsStyle(titleTextColor: Colors.red)` |
-
-
----
+## Next Steps
-
- Display and manage user contacts
+
+ View and manage group members
- Display recent one-on-one and group conversations
+ Browse recent conversations
-
- Display and manage members of a group
+
+ Detailed styling reference
-
- Learn how to customize the look and feel
+
+ Complete group chat implementation
diff --git a/ui-kit/flutter/guide-block-unblock-user.mdx b/ui-kit/flutter/guide-block-unblock-user.mdx
index 8f9cecacb..e461b73a0 100644
--- a/ui-kit/flutter/guide-block-unblock-user.mdx
+++ b/ui-kit/flutter/guide-block-unblock-user.mdx
@@ -1,189 +1,87 @@
---
-title: "Block/Unblock Users"
+title: "Implementing Block/Unblock User in Flutter with CometChat UIKit"
sidebarTitle: "Block/Unblock User"
-description: "Implement block and unblock user functionality in CometChat Flutter UI Kit with composer state management."
+description: "Block and unblock users in CometChat Flutter UI Kit with blockUsers and unblockUsers methods for privacy and moderation."
---
-
+Enable users to block and unblock other users in your Flutter chat app using CometChat's `blockUsers` and `unblockUsers` methods.
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_chat_uikit` |
-| Key components | `CometchatUserInfo` — uses `CometChatUIKit.blockUsers()` / `CometChatUIKit.unblockUsers()` SDK methods |
-| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login(uid)` |
-| Events | Block/unblock state managed via `user.blockedByMe` property |
-| UI helpers | `CometChatUserInfoController`, confirmation dialogs |
-| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
-| Related | [All Guides](/ui-kit/flutter/guide-overview) |
+## Overview
-
+The Block User feature lets one user prevent another from sending messages or interacting with them. Essential for user privacy, spam control, and moderation.
-Block/Unblock lets users prevent specific users from sending them messages. When blocked, the message composer is hidden and replaced with an unblock prompt.
+## Prerequisites
-Before starting, complete the [Getting Started](/ui-kit/flutter/getting-started) guide.
-
----
+- A Flutter project with CometChat UIKit Flutter V6 installed
+- Initialized CometChat credentials (`appID`, `region`, `authKey`)
## Components
-| Component / Class | Role |
+| Component | Role |
|:---|:---|
-| `CometchatUserInfo` | User profile screen with block/unblock controls |
-| `CometChatUserInfoController` | Controller managing block/unblock state and actions |
-| `CometChatUIKit.blockUsers()` | SDK method to block specific users |
-| `CometChatUIKit.unblockUsers()` | SDK method to unblock previously blocked users |
-| `user.blockedByMe` | Property indicating if current user blocked this user |
-
----
+| `CometChatUIKit.blockUsers([...])` | SDK method to block specified user(s) |
+| `CometChatUIKit.unblockUsers([...])` | SDK method to unblock specified user(s) |
+| `ElevatedButton` | Flutter widget for block/unblock actions |
## Integration Steps
-### 1. Navigate to User Info
-
-Open the user info screen from the messages view when tapping the user profile or info icon.
-
-_File: [messages.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/messages/messages.dart)_
-
-```dart
-Navigator.push(
- context,
- MaterialPageRoute(
- builder: (_) => CometchatUserInfo(user: tappedUser),
- ),
-);
-```
-
----
-
-### 2. Block User
-
-Call the block user dialog which uses `CometChatUIKit.blockUsers()` with the target UID. On success, update the UI to show the blocked state.
-
-_File: [cometchat_user_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info.dart)_
+### Add "Block User" Button
+
+
```dart
-listTileOptions(
- controller.user?.blockedByMe != true
- ? Translations.of(context).block
- : Translations.of(context).unBlock,
- Icon(Icons.block, color: colorPalette.error),
- () {
- if (controller.user?.blockedByMe != true) {
- controller.blockUserDialog(
- context: context,
- colorPalette: colorPalette,
- typography: typography,
+ElevatedButton(
+ onPressed: () async {
+ try {
+ await CometChatUIKit.blockUsers([user.uid]);
+ ScaffoldMessenger.of(context).showSnackBar(
+ SnackBar(content: Text('${user.name} has been blocked')),
);
- } else {
- controller.unblockUserDialog(
- context: context,
- colorPalette: colorPalette,
- typography: typography,
+ } catch (e) {
+ ScaffoldMessenger.of(context).showSnackBar(
+ SnackBar(content: Text('Error blocking user: $e')),
);
}
},
+ child: Text('Block User'),
)
```
+
+
----
-
-### 3. Unblock User
-
-Call `CometChatUIKit.unblockUsers()` with the target UID. On success, restore the UI to allow messaging.
-
-_File: [cometchat_user_info_controller.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info_controller.dart)_
+### Add "Unblock User" Button
+
+
```dart
-void unblockUserDialog({
- required BuildContext context,
- required CometChatColorPalette colorPalette,
- required CometChatTypography typography,
-}) {
- // Show confirmation dialog
- // On confirm: CometChatUIKit.unblockUsers([user.uid])
-}
-```
-
----
-
-### 4. Blocked State Banner
-
-Display a warning banner when viewing a blocked user's profile.
-
-_File: [cometchat_user_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info.dart)_
-
-```dart
-if (value.getBlockedByMe())
- Container(
- padding: EdgeInsets.symmetric(
- horizontal: spacing.padding3 ?? 0,
- vertical: spacing.padding2 ?? 0,
- ),
- color: colorPalette.warning?.withValues(alpha: 0.2),
- child: Row(
- children: [
- Icon(Icons.info, color: colorPalette.warning),
- SizedBox(width: spacing.padding2),
- Text("${Translations.of(context).youHaveBlocked} ${widget.user.name}."),
- ],
- ),
- ),
-```
-
----
-
-### 5. Composer Blocked State
-
-When a user is blocked, the composer in thread/message views is replaced with an unblock prompt.
-
-_File: [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart)_
-
-```dart
-if (controller.user?.blockedByMe == true) {
- return Container(
- padding: EdgeInsets.symmetric(vertical: 8, horizontal: 20),
- color: colorPalette.background4,
- child: Column(
- children: [
- Text(Translations.of(context).cantSendMessageBlockedUser),
- ElevatedButton(
- onPressed: () => controller.unBlockUser(),
- child: Text(Translations.of(context).unBlock),
- ),
- ],
- ),
- );
-}
+ElevatedButton(
+ onPressed: () async {
+ try {
+ await CometChatUIKit.unblockUsers([user.uid]);
+ ScaffoldMessenger.of(context).showSnackBar(
+ SnackBar(content: Text('${user.name} has been unblocked')),
+ );
+ } catch (e) {
+ ScaffoldMessenger.of(context).showSnackBar(
+ SnackBar(content: Text('Error unblocking user: $e')),
+ );
+ }
+ },
+ child: Text('Unblock User'),
+)
```
+
+
----
+## Customization Options
-## Feature Matrix
+- Conditional Rendering: Display "Block" or "Unblock" based on `user.blockedByMe` state
+- Modal Confirmation: Wrap actions in `showDialog` for confirmation prompts
+- Self-Block Prevention: Disable the button if `user.uid == loggedInUser.uid`
-| Feature | Component / Method | File |
-|:---|:---|:---|
-| User info screen | `CometchatUserInfo` | [cometchat_user_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info.dart) |
-| Block user | `blockUserDialog()` | [cometchat_user_info_controller.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info_controller.dart) |
-| Unblock user | `unblockUserDialog()` | [cometchat_user_info_controller.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info_controller.dart) |
-| Check blocked status | `user.blockedByMe` | [cometchat_user_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info.dart) |
-| Blocked banner | Warning container | [cometchat_user_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info.dart) |
-| Blocked composer | `_buildBlockedUserSection()` | [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart) |
+## Summary
----
-
-## Next Steps
-
-
-
- Display and manage user lists.
-
-
- Customize the message input component.
-
-
- Browse all feature and formatter guides.
-
-
- Full working sample application on GitHub.
-
-
+| Feature | Method |
+|:---|:---|
+| Block User | `CometChatUIKit.blockUsers([...])` |
+| Unblock User | `CometChatUIKit.unblockUsers([...])` |
diff --git a/ui-kit/flutter/guide-call-log-details.mdx b/ui-kit/flutter/guide-call-log-details.mdx
index 09d09842e..9d2ba588d 100644
--- a/ui-kit/flutter/guide-call-log-details.mdx
+++ b/ui-kit/flutter/guide-call-log-details.mdx
@@ -1,117 +1,92 @@
---
title: "Call Log Details"
sidebarTitle: "Call Log Details"
-description: "Display call history and detailed call information in CometChat Flutter UI Kit."
+description: "Show CometChat Flutter UI Kit call log details with participants, duration, timestamps, recordings, and call metadata."
---
-
+Provide a post-call details screen with metadata, participants, history, and recordings using CometChat V6 UIKit.
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_chat_uikit` |
-| Key components | `CometChatCallLogs`, `CometChatCallLogDetails` |
-| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login(uid)` |
-| Entry point | Calls tab → `CometChatCallLogs` → tap item → `CometChatCallLogDetails` |
-| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
-| Related | [All Guides](/ui-kit/flutter/guide-overview) |
+## Overview
-
-
-Call Log Details provides a dedicated Calls tab where users can view recent audio and video calls and inspect detailed information for each call.
-
-Before starting, complete the [Getting Started](/ui-kit/flutter/getting-started) guide.
-
----
+The Call Log Details feature displays detailed information about a specific call, including participants, duration, timestamps, and recordings (if available).
## Components
-| Component / Class | Role |
+| Component | Role |
|:---|:---|
-| `CometChatCallLogs` | Displays the list of recent calls with tap callbacks |
-| `CometChatCallLogDetails` | Shows detailed information (participants, duration, type) |
-| `CallLog` | Call log data model from SDK |
-
----
-
-## Integration Steps
-
-### 1. Add Calls Tab
+| `CometChatCallLogs` | Lists call logs; tap to view details |
+| `CallLogRequestBuilder` | Filters call logs by criteria |
-Integrate the Calls tab into your main dashboard using `CometChatCallLogs`.
+## Integration
-_File: [dashboard.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart)_
+### Navigate to Call Details
+
+
```dart
CometChatCallLogs(
onItemClick: (callLog) {
Navigator.push(
context,
MaterialPageRoute(
- builder: (context) => CometChatCallLogDetails(callLog: callLog),
+ builder: (_) => CallLogDetailScreen(callLog: callLog),
),
);
},
)
```
+
+
----
-
-### 2. Display Call Logs
-
-Use `CometChatCallLogs` to fetch and show recent calls with customizable styling.
-
-_File: [dashboard.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart)_
+### Build a Call Detail Screen
+
+
```dart
-CometChatCallLogs(
- onItemClick: (callLog) {
- // Navigate to details screen
- },
- callLogsStyle: CometChatCallLogsStyle(
- backgroundColor: colorPalette.background1,
- ),
-)
-```
+class CallLogDetailScreen extends StatelessWidget {
+ final CallLog callLog;
----
+ const CallLogDetailScreen({required this.callLog, super.key});
-### 3. Show Call Log Details
+ @override
+ Widget build(BuildContext context) {
+ final initiatedAt = DateTime.fromMillisecondsSinceEpoch(
+ (callLog.initiatedAt ?? 0) * 1000,
+ );
-Present detailed information when a call log is tapped.
+ return Scaffold(
+ appBar: AppBar(title: const Text("Call Details")),
+ body: Padding(
+ padding: const EdgeInsets.all(16),
+ child: Column(
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ Text("Status: ${callLog.status ?? 'Unknown'}"),
+ Text("Type: ${callLog.type ?? 'Unknown'}"),
+ Text("Duration: ${callLog.totalDurationInMinutes ?? 0} min"),
+ Text("Time: $initiatedAt"),
+ if (callLog.hasRecording == true)
+ const Text("Recording available"),
+ ],
+ ),
+ ),
+ );
+ }
+}
+```
+
+
-_File: [cometchat_call_log_details.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/call_log_details/cometchat_call_log_details.dart)_
+## Filtering Call Logs
+
+
```dart
-CometChatCallLogDetails(
- callLog: callLog,
+CometChatCallLogs(
+ callLogsRequestBuilder: CallLogRequestBuilder()
+ ..limit = 20
+ ..hasRecording = true,
)
```
-
----
-
-## Feature Matrix
-
-| Feature | Component / Method | File |
-|:---|:---|:---|
-| Calls tab | `CometChatCallLogs` | [dashboard.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart) |
-| Display call logs | `CometChatCallLogs` | [dashboard.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart) |
-| Call details | `CometChatCallLogDetails` | [cometchat_call_log_details.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/call_log_details/cometchat_call_log_details.dart) |
-
----
-
-## Next Steps
-
-
-
- Learn more about the Call Logs component.
-
-
- Explore all calling capabilities.
-
-
- Add call buttons to your chat interface.
-
-
- Browse all feature and formatter guides.
-
-
+
+
diff --git a/ui-kit/flutter/guide-group-chat.mdx b/ui-kit/flutter/guide-group-chat.mdx
index 762b4b216..e1be7e0cc 100644
--- a/ui-kit/flutter/guide-group-chat.mdx
+++ b/ui-kit/flutter/guide-group-chat.mdx
@@ -1,182 +1,92 @@
---
-title: "Group Management"
+title: "Group Chat"
sidebarTitle: "Group Chat"
-description: "Create groups, manage members, assign roles, and transfer ownership in CometChat Flutter UI Kit."
+description: "Build CometChat Flutter UI Kit group chats with group lists, members, headers, message lists, and composers."
---
-
+Build group chat functionality in your Flutter app using CometChat V6 UIKit. Create/join groups, view members, manage roles, and moderate participation.
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_chat_uikit` |
-| Key components | `CometChatGroups`, `CometChatCreateGroup`, `CometChatGroupInfo`, `CometChatAddMembers`, `CometChatBannedMembers`, `CometChatTransferOwnership` |
-| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login(uid)` |
-| Entry point | Groups tab → create/join group → `CometChatGroupInfo` for management |
-| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
-| Related | [All Guides](/ui-kit/flutter/guide-overview) |
+## Overview
-
-
-Group Management enables users to create groups, join public/password groups, manage members, ban users, update roles, and transfer ownership.
-
-Before starting, complete the [Getting Started](/ui-kit/flutter/getting-started) guide.
-
----
+V6 provides `CometChatGroups` and `CometChatGroupMembers` widgets powered by BLoC for group management.
## Components
-| Component / Class | Role |
+| Component | Role |
|:---|:---|
-| `CometChatGroups` | Displays groups and create button |
-| `CometChatCreateGroup` | UI to create new groups |
-| `CometChatGroupInfo` | Shows group info and member management |
-| `CometChatAddMembers` | Add members to a group |
-| `CometChatBannedMembers` | View/unban banned users |
-| `CometChatTransferOwnership` | Transfer group ownership |
-| `CometChatChangeScope` | Change a user's group role |
-| `JoinProtectedGroupUtils` | Utility to join password-protected groups |
-
----
-
-## Integration Steps
-
-### 1. Create a Group
-
-Show the create group dialog from the dashboard.
-
-_File: [dashboard.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart)_
-
-```dart
-IconButton(
- onPressed: () {
- showCreateGroup(
- context: context,
- colorPalette: colorPalette,
- typography: typography,
- spacing: spacing,
- );
- },
- icon: Icon(Icons.group_add),
-)
-```
-
-_File: [cometchat_create_group.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/create_group/cometchat_create_group.dart)_
-
-```dart
-await CometChat.createGroup(
- group: Group(
- guid: groupId,
- name: groupName,
- type: groupType,
- password: groupPassword,
- ),
- onSuccess: (Group group) => Navigator.pop(context),
- onError: (e) {
- // Show error
- },
-);
-```
-
----
+| `CometChatGroups` | Lists available groups |
+| `CometChatGroupMembers` | Displays and manages group members |
+| `CometChatMessageHeader` | Shows group info in chat header |
+| `CometChatMessageList` | Displays group messages |
+| `CometChatMessageComposer` | Sends messages to group |
-### 2. Join Public/Password Group
+## Integration
-Handle group tap to join or prompt for password.
-
-_File: [join_protected_group_util.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/utils/join_protected_group_util.dart)_
+### Display Groups List
+
+
```dart
CometChatGroups(
- onItemTap: (context, group) {
- JoinProtectedGroupUtils.onGroupItemTap(context, group);
+ onItemTap: (group) {
+ Navigator.push(
+ context,
+ MaterialPageRoute(
+ builder: (_) => Scaffold(
+ appBar: CometChatMessageHeader(group: group),
+ body: SafeArea(
+ child: Column(
+ children: [
+ Expanded(child: CometChatMessageList(group: group)),
+ CometChatMessageComposer(group: group),
+ ],
+ ),
+ ),
+ ),
+ ),
+ );
},
)
```
+
+
----
-
-### 3. View Group Info
-
-Display group details and member management options.
-
-_File: [cometchat_group_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/group_info/cometchat_group_info.dart)_
+### Display Group Members
+
+
```dart
-CometChatGroupInfo(
- group: group,
-)
-```
-
----
-
-### 4. Add Members
-
-Navigate to add members screen.
-
-_File: [cometchat_add_members.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/add_memebers/cometchat_add_members.dart)_
-
-```dart
-CometChatAddMembers(
- group: group,
-)
-```
-
----
-
-### 5. Ban/Unban Members
-
-Manage banned members list.
-
-_File: [cometchat_banned_members.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/banned_members/cometchat_banned_members.dart)_
-
-```dart
-CometChatBannedMembers(
+CometChatGroupMembers(
group: group,
+ onItemTap: (groupMember) {
+ // Handle member tap
+ },
)
```
+
+
----
-
-### 6. Transfer Ownership
+### Manage Members
-Transfer group ownership to another member.
-
-_File: [cometchat_transfer_ownership.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/transfer_ownership/cometchat_transfer_ownership.dart)_
+V6 provides built-in options for member management:
+
+
```dart
-CometChatTransferOwnership(
+CometChatGroupMembers(
group: group,
+ hideKickMemberOption: false,
+ hideBanMemberOption: false,
+ hideScopeChangeOption: false,
)
```
+
+
----
-
-## Feature Matrix
-
-| Feature | Component / Method | File |
-|:---|:---|:---|
-| Create group | `CometChatCreateGroup` | [cometchat_create_group.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/create_group/cometchat_create_group.dart) |
-| Join group | `JoinProtectedGroupUtils` | [join_protected_group_util.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/utils/join_protected_group_util.dart) |
-| View members | `CometChatGroupInfo` | [cometchat_group_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/group_info/cometchat_group_info.dart) |
-| Add members | `CometChatAddMembers` | [cometchat_add_members.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/add_memebers/cometchat_add_members.dart) |
-| Ban/unban | `CometChatBannedMembers` | [cometchat_banned_members.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/banned_members/cometchat_banned_members.dart) |
-| Transfer ownership | `CometChatTransferOwnership` | [cometchat_transfer_ownership.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/transfer_ownership/cometchat_transfer_ownership.dart) |
-
----
-
-## Next Steps
+## Key V6 Differences
-
-
- Learn more about the Groups component.
-
-
- Display and manage group members.
-
-
- View group conversations.
-
-
- Browse all feature and formatter guides.
-
-
+| Aspect | V5 | V6 |
+|---|---|---|
+| Composite widget | `CometChatGroupsWithMessages` | Not available — compose manually |
+| State management | GetX | BLoC (`GroupsBloc`) |
+| Member management | Via configuration objects | Direct widget properties |
diff --git a/ui-kit/flutter/guide-message-agentic-flow.mdx b/ui-kit/flutter/guide-message-agentic-flow.mdx
index 2b3c9144c..0a33d471f 100644
--- a/ui-kit/flutter/guide-message-agentic-flow.mdx
+++ b/ui-kit/flutter/guide-message-agentic-flow.mdx
@@ -1,197 +1,88 @@
---
-title: "AI Agent Integration"
-sidebarTitle: "AI Agent Integration"
-description: "Integrate AI agents with chat history, contextual responses, and seamless handoffs in CometChat Flutter UI Kit."
+title: "Message Agentic Flow"
+sidebarTitle: "Message Agentic Flow"
+description: "Implement CometChat Flutter UI Kit agentic message flows with AI-powered message handling and custom AI message rendering."
---
-
+Implement agentic message flows in your Flutter app using CometChat V6 UIKit. This guide covers how to integrate AI-powered message handling with the chat interface.
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_chat_uikit` |
-| Key components | `CometChatAIAssistantChatHistory`, `CometChatMessageList`, `CometChatMessageComposer`, `CometChatMessageHeader` |
-| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login(uid)` |
-| Entry point | AI agent user → `AIAssistantChatScreen` with AI-specific styling |
-| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
-| Related | [All Guides](/ui-kit/flutter/guide-overview) |
+## Overview
-
+The Message Agentic Flow feature enables AI-driven interactions within your chat application. In V6, AI features are handled through `MessageTemplateUtils` rather than explicit extension registration.
-AI Agent Integration enables intelligent conversational AI capabilities with chat history, contextual responses, and seamless handoffs.
+## Integration
-Before starting, complete the [Getting Started](/ui-kit/flutter/getting-started) guide.
+### Enable AI Features
----
-
-## Components
-
-| Component / Class | Role |
-|:---|:---|
-| `CometChatMessageHeader` | Manages message interactions with AI-specific buttons |
-| `CometChatMessageList` | Displays messages with AI-specific styling |
-| `CometChatMessageComposer` | Composes messages with AI placeholders |
-| `CometChatAIAssistantChatHistory` | Displays previous AI conversation history |
-| `CometChatAiAssistantBubbleStyle` | Custom styling for AI chat bubbles |
-| `AIConstants.aiRole` | Constant to detect AI agent users |
-
----
-
-## Integration Steps
-
-### 1. Detect AI Agent
+Ensure AI features are enabled on your CometChat Dashboard. V6 handles AI integration internally.
-Check if the user is an AI agent by their role.
-
-```dart
-bool isUserAgentic() {
- return widget.user?.role == AIConstants.aiRole;
-}
-```
-
----
-
-### 2. AI Chat Screen Setup
-
-Create a screen for AI Assistant chat using standard message components with AI-specific styling.
-
-```dart
-class AIAssistantChatScreen extends StatefulWidget {
- final User? user;
- final Group? group;
- final BaseMessage? parentMessage;
- final bool? isHistory;
-
- const AIAssistantChatScreen({
- Key? key,
- this.user,
- this.group,
- this.parentMessage,
- this.isHistory,
- }) : super(key: key);
-
- @override
- State createState() => _AIAssistantChatScreenState();
-}
-```
-
----
-
-### 3. Message Header with AI Actions
-
-Configure the message header with chat history and new chat buttons.
-
-```dart
-CometChatMessageHeader(
- user: widget.user,
- group: widget.group,
- chatHistoryButtonClick: () {
- Navigator.push(
- context,
- MaterialPageRoute(
- builder: (context) => CometChatAIAssistantChatHistory(
- user: widget.user,
- group: widget.group,
- onNewChatButtonClicked: () => onNewChatClicked(true),
- onMessageClicked: (message) => navigateToThread(message),
- onClose: () => Navigator.of(context).pop(),
- ),
- ),
- );
- },
- newChatButtonClick: () => onNewChatClicked(false),
-)
-```
-
----
-
-### 4. AI Message List
-
-Configure the message list with AI-specific styling and options.
+### Custom AI Message Handling
+
+
```dart
CometChatMessageList(
user: user,
- group: group,
- hideReplyInThreadOption: isUserAgentic() ? true : false,
- hideThreadView: true,
- messagesRequestBuilder: requestBuilder,
- style: CometChatMessageListStyle(
- backgroundColor: isUserAgentic() ? colorPalette.background3 : null,
- outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
- textBubbleStyle: CometChatTextBubbleStyle(
- backgroundColor: isUserAgentic() ? colorPalette.background4 : null,
- textColor: isUserAgentic() ? colorPalette.textPrimary : null,
- ),
+ templates: [
+ CometChatMessageTemplate(
+ type: "ai_response",
+ category: MessageCategoryConstants.custom,
+ contentView: (baseMessage, context, alignment, {additionalConfigurations}) {
+ // Custom rendering for AI agent messages
+ return Container(
+ padding: const EdgeInsets.all(12),
+ decoration: BoxDecoration(
+ color: Color(0xFFEDEAFA),
+ borderRadius: BorderRadius.circular(12),
+ ),
+ child: Column(
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ Row(
+ children: [
+ Icon(Icons.smart_toy, color: Color(0xFF6852D6), size: 16),
+ SizedBox(width: 4),
+ Text("AI Assistant", style: TextStyle(
+ color: Color(0xFF6852D6),
+ fontWeight: FontWeight.bold,
+ fontSize: 12,
+ )),
+ ],
+ ),
+ SizedBox(height: 8),
+ Text((baseMessage as TextMessage).text),
+ ],
+ ),
+ );
+ },
),
- ),
-)
-```
-
----
-
-### 5. AI Composer
-
-Configure the composer with AI-specific placeholder text.
-
-```dart
-CometChatMessageComposer(
- user: widget.user,
- group: widget.group,
- disableMentions: isUserAgentic() ? true : false,
- placeholderText: isUserAgentic()
- ? "${Translations.of(context).askAnything}..."
- : null,
- parentMessageId: widget.parentMessage?.id ?? 0,
+ ],
)
```
+
+
----
-
-### 6. Custom AI Bubble Styling
+### AI Assistant Chat History
-Apply custom styles for AI chat bubbles using ThemeExtension.
+Use the `CometChatAIAssistantChatHistory` widget to display past AI interactions:
+
+
```dart
-MaterialApp(
- theme: ThemeData(
- extensions: [
- CometChatAiAssistantBubbleStyle(
- backgroundColor: Colors.transparent,
- border: Border.all(color: Colors.blueAccent, width: 1),
- textColor: const Color(0xFF141414),
- ),
- ],
+CometChatAIAssistantChatHistory(
+ user: user,
+ style: CometChatAIAssistantChatHistoryStyle(
+ backgroundColor: const Color(0xFFFFFAF6),
),
)
```
+
+
----
-
-## Feature Matrix
-
-| Feature | Component / Method | Description |
-|:---|:---|:---|
-| AI detection | `AIConstants.aiRole` | Check if user is AI agent |
-| AI chat screen | `AIAssistantChatScreen` | Full AI chat interface |
-| Chat history | `CometChatAIAssistantChatHistory` | Browse previous AI sessions |
-| AI styling | `CometChatAiAssistantBubbleStyle` | Custom AI bubble appearance |
-| New chat | `onNewChatClicked()` | Start fresh AI conversation |
-
----
-
-## Next Steps
+## Key V6 Differences
-
-
- Explore all AI-powered features.
-
-
- Learn about AI chat history component.
-
-
- Learn about message display and management.
-
-
- Browse all feature and formatter guides.
-
-
+| Aspect | V5 | V6 |
+|---|---|---|
+| AI extension registration | Explicit via `UIKitSettings.aiFeature` | Handled internally via `MessageTemplateUtils` |
+| Custom AI templates | Via `CometChatUIKit.getDataSource()` | Via `MessageTemplateUtils` and direct template injection |
+| AI Assistant widget | `CometChatAIAssistantChatHistory` | Same widget, same API |
diff --git a/ui-kit/flutter/guide-message-privately.mdx b/ui-kit/flutter/guide-message-privately.mdx
index f77cecee7..3dab740a7 100644
--- a/ui-kit/flutter/guide-message-privately.mdx
+++ b/ui-kit/flutter/guide-message-privately.mdx
@@ -1,151 +1,63 @@
---
title: "Message Privately"
sidebarTitle: "Message Privately"
-description: "Initiate private one-on-one chats with group members directly from group chat in CometChat Flutter UI Kit."
+description: "Start private one-to-one chats in CometChat Flutter UI Kit from a profile, member list, search result, or custom user context."
---
-
+Start a direct 1:1 chat from a profile or list in your Flutter app using CometChat V6 UIKit.
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_chat_uikit` |
-| Key components | `CometchatUserInfo`, `CometChatMessageList`, `PageManager` |
-| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login(uid)` |
-| Entry point | Group member tap → `CometchatUserInfo` → "Message" action |
-| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
-| Related | [All Guides](/ui-kit/flutter/guide-overview) |
+## Overview
-
+The "Message Privately" feature allows users to initiate a direct conversation with another user from any context — a group member list, user profile, or search results.
-Message Privately lets users start a direct one-on-one chat with a group member.
+## Integration
-Before starting, complete the [Getting Started](/ui-kit/flutter/getting-started) guide.
-
----
-
-## Components
-
-| Component / Class | Role |
-|:---|:---|
-| `CometChatMessageList` | Displays group messages and user avatars |
-| `CometchatUserInfo` | Shows user details and actions (e.g., call, message) |
-| `CometChatUserInfoController` | Manages user info state and actions |
-| `PageManager` | Handles navigation to the private chat screen |
-
----
-
-## Integration Steps
-
-### 1. Navigate to User Info
-
-Open the user info screen when tapping on a group member's profile or info icon.
-
-_File: [cometchat_group_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/group_info/cometchat_group_info.dart)_
+### Navigate to Private Chat
+
+
```dart
-Navigator.push(
- context,
- MaterialPageRoute(
- builder: (context) => CometchatUserInfo(user: selectedUser),
- ),
-);
-```
-
----
-
-### 2. Display User Profile with Actions
-
-The `CometchatUserInfo` widget displays the user's profile with action tiles for voice call, video call, and messaging.
-
-_File: [cometchat_user_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info.dart)_
-
-```dart
-Widget _getOptionTiles(CometChatUserInfoController controller) {
- return Row(
- mainAxisAlignment: MainAxisAlignment.spaceBetween,
- children: [
- tile(
- Icon(Icons.call_outlined, color: colorPalette.iconHighlight),
- Translations.of(context).voice,
- () => controller.initiateCallWorkflow(CallTypeConstants.audioCall, context),
+void openPrivateChat(BuildContext context, User user) {
+ Navigator.push(
+ context,
+ MaterialPageRoute(
+ builder: (_) => Scaffold(
+ appBar: CometChatMessageHeader(user: user),
+ body: SafeArea(
+ child: Column(
+ children: [
+ Expanded(child: CometChatMessageList(user: user)),
+ CometChatMessageComposer(user: user),
+ ],
+ ),
+ ),
),
- tile(
- Icon(Icons.videocam_outlined, color: colorPalette.iconHighlight),
- Translations.of(context).video,
- () => controller.initiateCallWorkflow(CallTypeConstants.videoCall, context),
- ),
- ],
+ ),
);
}
```
+
+
----
-
-### 3. Start Private Chat
-
-Navigate to the private chat screen using `PageManager` when the user wants to message privately.
-
-_File: [page_manager.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/utils/page_manager.dart)_
+### From Group Members List
+
+
```dart
-PageManager().navigateToMessages(
- context: context,
- user: user,
-);
+CometChatGroupMembers(
+ group: group,
+ onItemTap: (groupMember) {
+ // Convert GroupMember to User for private messaging
+ User user = User(
+ uid: groupMember.uid,
+ name: groupMember.name,
+ avatar: groupMember.avatar,
+ );
+ openPrivateChat(context, user);
+ },
+)
```
+
+
----
-
-### 4. Handle Mentions Navigation
-
-When a user taps on a mention in a message, navigate to that user's profile or start a private chat.
-
-_File: [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart)_
-
-```dart
-CometChatMentionsFormatter getMentionsTap() {
- return CometChatMentionsFormatter(
- user: widget.user,
- group: widget.group,
- onMentionTap: (mention, mentionedUser, {message}) {
- if (mentionedUser.uid != CometChatUIKit.loggedInUser!.uid) {
- PageManager().navigateToMessages(
- context: context,
- user: mentionedUser,
- );
- }
- },
- );
-}
-```
-
----
-
-## Feature Matrix
-
-| Feature | Component / Method | File |
-|:---|:---|:---|
-| User info screen | `CometchatUserInfo` | [cometchat_user_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info.dart) |
-| Voice/video call | `initiateCallWorkflow()` | [cometchat_user_info_controller.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info_controller.dart) |
-| Navigate to chat | `PageManager.navigateToMessages` | [page_manager.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/utils/page_manager.dart) |
-| Mention tap | `CometChatMentionsFormatter` | [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart) |
-| Access from group | Group member list | [cometchat_group_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/group_info/cometchat_group_info.dart) |
-
----
-
-## Next Steps
-
-
- Display and manage group lists.
-
-
- View and manage group members.
-
-
- Display messages in private chats.
-
-
- Browse all feature and formatter guides.
-
-
diff --git a/ui-kit/flutter/guide-new-chat.mdx b/ui-kit/flutter/guide-new-chat.mdx
index 48027ccc3..d828b31c3 100644
--- a/ui-kit/flutter/guide-new-chat.mdx
+++ b/ui-kit/flutter/guide-new-chat.mdx
@@ -1,155 +1,95 @@
---
title: "New Chat"
sidebarTitle: "New Chat"
-description: "Enable users to start one-on-one or group chats with a searchable contact list in CometChat Flutter UI Kit."
+description: "Create a CometChat Flutter UI Kit new chat screen for discovering users and groups and opening one-to-one or group conversations."
---
-
+Offer a unified discovery screen for users and groups and launch new chats quickly using CometChat V6 UIKit.
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_chat_uikit` |
-| Key components | `CometChatContacts`, `CometChatUsers`, `CometChatGroups`, `CometChatAvatar` |
-| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login(uid)` |
-| Entry point | Avatar menu → "Create Conversation" → `CometChatContacts` |
-| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
-| Related | [All Guides](/ui-kit/flutter/guide-overview) |
+## Overview
-
+The "New Chat" feature provides a screen where users can browse available users and groups to start a new conversation.
-New Chat enables users to start one-on-one or group conversations by selecting from a searchable contact list.
+## Integration
-Before starting, complete the [Getting Started](/ui-kit/flutter/getting-started) guide.
-
----
-
-## Components
-
-| Component / Class | Role |
-|:---|:---|
-| `CometChatAvatar` | Displays the user avatar in the app bar |
-| `PopupMenuButton` | Shows menu options when the avatar is tapped |
-| `CometChatContacts` | UI for the "Start Conversation" screen with tabs |
-| `CometChatContactsController` | Manages tab switching and item selection |
-| `CometChatUsers` | Lists users with search and selection |
-| `CometChatGroups` | Lists groups with search and selection |
-| `PageManager` | Handles navigation to the chat screen |
-
----
-
-## Integration Steps
-
-### 1. Add Avatar Menu
-
-Show the avatar in the app bar and open a menu on tap with "Create Conversation" option.
-
-_File: [dashboard.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart)_
+### Create a New Chat Screen
+
+
```dart
-PopupMenuButton(
- icon: CometChatAvatar(
- width: 40,
- height: 40,
- image: CometChatUIKit.loggedInUser?.avatar,
- name: CometChatUIKit.loggedInUser?.name,
- ),
- itemBuilder: (context) => [
- PopupMenuItem(value: '/Create', child: Text("Create Conversation")),
- ],
- onSelected: (value) {
- if (value == '/Create') {
- Navigator.push(
- context,
- MaterialPageRoute(builder: (context) => CometChatContacts()),
- );
- }
- },
-);
-```
-
----
-
-### 2. Open Contacts Screen
-
-Navigate to the `CometChatContacts` screen which provides tabs for Users and Groups.
-
-_File: [dashboard.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart)_
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:flutter/material.dart';
+
+class NewChatScreen extends StatelessWidget {
+ const NewChatScreen({super.key});
+
+ void _openChat(BuildContext context, {User? user, Group? group}) {
+ Navigator.push(
+ context,
+ MaterialPageRoute(
+ builder: (_) => Scaffold(
+ appBar: CometChatMessageHeader(user: user, group: group),
+ body: SafeArea(
+ child: Column(
+ children: [
+ Expanded(child: CometChatMessageList(user: user, group: group)),
+ CometChatMessageComposer(user: user, group: group),
+ ],
+ ),
+ ),
+ ),
+ ),
+ );
+ }
-```dart
-void openCreateConversation(BuildContext context) {
- Navigator.push(
- context,
- MaterialPageRoute(builder: (context) => CometChatContacts()),
- );
+ @override
+ Widget build(BuildContext context) {
+ return DefaultTabController(
+ length: 2,
+ child: Scaffold(
+ appBar: AppBar(
+ title: const Text('New Chat'),
+ bottom: const TabBar(
+ tabs: [
+ Tab(text: 'Users'),
+ Tab(text: 'Groups'),
+ ],
+ ),
+ ),
+ body: TabBarView(
+ children: [
+ CometChatUsers(
+ hideAppbar: true,
+ onItemTap: (user) => _openChat(context, user: user),
+ ),
+ CometChatGroups(
+ hideAppbar: true,
+ onItemTap: (group) => _openChat(context, group: group),
+ ),
+ ],
+ ),
+ ),
+ );
+ }
}
```
+
+
----
-
-### 3. Handle User/Group Selection
-
-Wire up the `onItemTap` callback to navigate to the chat screen when a user or group is selected.
-
-_File: [cometchat_contacts_controller.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/contacts/cometchat_contacts_controller.dart)_
-
-```dart
-CometChatUsers(
- hideAppbar: true,
- onItemTap: (context, user) => _onItemTap(context: context, user: user),
-);
-
-CometChatGroups(
- hideAppbar: true,
- onItemTap: (context, group) => _onItemTap(context: context, group: group),
-);
-```
-
----
-
-### 4. Navigate to Chat
-
-Open the chat screen for the selected user or group using `PageManager`.
-
-_File: [page_manager.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/utils/page_manager.dart)_
+### Launch from a FAB
+
+
```dart
-void _onItemTap({required BuildContext context, User? user, Group? group}) {
- if (user != null) {
- PageManager.navigateToMessages(context: context, user: user);
- } else if (group != null) {
- JoinProtectedGroupUtils.onGroupItemTap(context, group);
- }
-}
+FloatingActionButton(
+ onPressed: () {
+ Navigator.push(
+ context,
+ MaterialPageRoute(builder: (_) => const NewChatScreen()),
+ );
+ },
+ child: const Icon(Icons.chat),
+)
```
-
----
-
-## Feature Matrix
-
-| Feature | Component / Method | File |
-|:---|:---|:---|
-| Avatar menu | `PopupMenuButton`, `CometChatAvatar` | [dashboard.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart) |
-| Contacts screen | `CometChatContacts` | [dashboard.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart) |
-| List users | `CometChatUsers` | [cometchat_contacts_controller.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/contacts/cometchat_contacts_controller.dart) |
-| List groups | `CometChatGroups` | [cometchat_contacts_controller.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/contacts/cometchat_contacts_controller.dart) |
-| Handle selection | `_onItemTap` | [page_manager.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/utils/page_manager.dart) |
-| Navigate to chat | `PageManager.navigateToMessages` | [page_manager.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/utils/page_manager.dart) |
-
----
-
-## Next Steps
-
-
-
- Display and search user lists.
-
-
- Display and manage group lists.
-
-
- View and manage conversation history.
-
-
- Browse all feature and formatter guides.
-
-
+
+
diff --git a/ui-kit/flutter/guide-overview.mdx b/ui-kit/flutter/guide-overview.mdx
index d056b2277..e046bfb46 100644
--- a/ui-kit/flutter/guide-overview.mdx
+++ b/ui-kit/flutter/guide-overview.mdx
@@ -1,67 +1,23 @@
---
-title: "Guides Overview"
+title: "Overview"
sidebarTitle: "Overview"
-description: "Task-oriented feature guides for implementing specific capabilities in the Flutter UI Kit"
+description: "Browse Flutter UI Kit feature guides for blocking users, group chat, private messages, new chat flows, and threaded conversations."
---
-
-
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_chat_uikit` |
-| Purpose | Index of task-oriented feature guides for the Flutter UI Kit |
-| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
-| Components | [Components Overview](/ui-kit/flutter/components-overview) |
-| Guides | [Block/Unblock](/ui-kit/flutter/guide-block-unblock-user) · [Call Log Details](/ui-kit/flutter/guide-call-log-details) · [Group Chat](/ui-kit/flutter/guide-group-chat) · [Image Preview & Caption](/ui-kit/flutter/guide-image-caption) · [Message Privately](/ui-kit/flutter/guide-message-privately) · [New Chat](/ui-kit/flutter/guide-new-chat) · [Search Messages](/ui-kit/flutter/guide-search-messages) · [Threaded Messages](/ui-kit/flutter/guide-threaded-messages) · [AI Agent](/ui-kit/flutter/guide-message-agentic-flow) |
-
-
-
-This page indexes focused, task‑oriented feature guides for the Flutter UI Kit. Each guide shows how to implement a specific capability end‑to‑end using UI kit components.
+> This page indexes focused, task-oriented feature guides for the Flutter V6 UI Kit. Each guide shows how to implement a specific capability end-to-end using V6 UI kit components.
## When to Use These Guides
Use these after finishing [Getting Started](/ui-kit/flutter/getting-started) and wiring a basic conversations/messages experience. Add them incrementally to deepen functionality without rebuilding fundamentals.
-## Feature Guides
+## Guide Directory
| Guide | Description |
|:------|:------------|
| [Block / Unblock User](/ui-kit/flutter/guide-block-unblock-user) | Let users block or unblock others; enforce privacy by hiding interaction options and preventing message flow. |
-| [Call Log Details](/ui-kit/flutter/guide-call-log-details) | Provide a post‑call details screen with metadata, participants, history, and recordings for audit & support. |
-| [Group Management](/ui-kit/flutter/guide-group-chat) | Create/join groups, view members, add / remove users, manage roles, and moderate participation. |
-| [Message Privately](/ui-kit/flutter/guide-message-privately) | Start a direct 1:1 chat from a profile or list; optionally send an initial message to surface the conversation. |
-| [New Chat](/ui-kit/flutter/guide-new-chat) | Offer a unified discovery screen for users & groups and launch new chats quickly. |
-| [Search Messages](/ui-kit/flutter/guide-search-messages) | Full-text message search across conversations with result routing and navigation. |
+| [Group Chat](/ui-kit/flutter/guide-group-chat) | Create/join groups, view members, add/remove users, manage roles, and moderate participation. |
+| [Message Privately](/ui-kit/flutter/guide-message-privately) | Start a direct 1:1 chat from a profile or list. |
+| [New Chat](/ui-kit/flutter/guide-new-chat) | Offer a unified discovery screen for users and groups and launch new chats quickly. |
| [Threaded Messages](/ui-kit/flutter/guide-threaded-messages) | Enable threaded replies: open parent message context, browse replies, and compose within a focused thread. |
-| [AI Agent Integration](/ui-kit/flutter/guide-message-agentic-flow) | Integrate AI agents with chat history, contextual responses, and seamless handoffs. |
-| [Image Preview & Caption](/ui-kit/flutter/guide-image-caption) | Preview images before sending and display captions below image thumbnails in message bubbles. |
-
-## Formatter Guides
-
-| Guide | Description |
-|:------|:------------|
-| [Custom Text Formatter](/ui-kit/flutter/custom-text-formatter-guide) | Build custom inline text patterns with regex, styling, and callbacks. |
-| [Mentions Formatter](/ui-kit/flutter/mentions-formatter-guide) | Add @mentions with user suggestions and styled tokens. |
-| [URL Formatter](/ui-kit/flutter/url-formatter-guide) | Auto-detect and style URLs as clickable links. |
-| [Shortcut Formatter](/ui-kit/flutter/shortcut-formatter-guide) | Create keyboard shortcuts for quick text insertion. |
-
-Need another guide? Request one via [CometChat Support](https://www.cometchat.com/support).
-
----
-## Next Steps
-
-
- Set up the Flutter UI Kit in your project
-
-
- Explore all available UI components
-
-
- Learn about core chat features
-
-
- View complete working examples
-
-
diff --git a/ui-kit/flutter/guide-threaded-messages.mdx b/ui-kit/flutter/guide-threaded-messages.mdx
index 967135bdc..d63735c6d 100644
--- a/ui-kit/flutter/guide-threaded-messages.mdx
+++ b/ui-kit/flutter/guide-threaded-messages.mdx
@@ -1,194 +1,119 @@
---
title: "Threaded Messages"
sidebarTitle: "Threaded Messages"
-description: "Implement threaded message replies with parent context, reply list, and focused thread composer in CometChat Flutter UI Kit."
+description: "Add threaded messages in CometChat Flutter UI Kit with parent message context, reply lists, and composers for focused conversations."
---
-
+Enhance your Flutter chat app with threaded messaging using CometChat V6's `CometChatMessageList` and `CometChatThreadedHeader` components.
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_chat_uikit` |
-| Key components | `CometChatThread`, `CometChatThreadedHeader`, `CometChatMessageList`, `CometChatMessageComposer` |
-| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login(uid)` |
-| Entry point | `CometChatMessageList.onThreadRepliesClick` opens thread view from messages |
-| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
-| Related | [All Guides](/ui-kit/flutter/guide-overview) |
+## Overview
-
+- Reply to specific messages to start focused sub-conversations
+- View all replies grouped under the parent message
+- Seamlessly switch back to the main conversation
-Threaded messages let users create sub-conversations by replying to specific messages. This reduces clutter and keeps discussions focused.
+## Prerequisites
-Before starting, complete the [Getting Started](/ui-kit/flutter/getting-started) guide.
-
----
+- A Flutter project with CometChat UIKit Flutter V6 installed
+- Initialized CometChat credentials
## Components
-| Component / Class | Role |
+| Component | Role |
|:---|:---|
-| `CometChatThread` | Main container widget for threaded messages |
-| `CometChatThreadedHeader` | Displays parent message and thread context |
-| `CometChatMessageList` | Shows messages filtered by `parentMessageId` |
-| `CometChatMessageComposer` | Input for composing threaded replies |
-| `MessagesRequestBuilder` | Builds request to fetch thread replies |
-
----
+| `CometChatMessageList` | Displays main chat; provides `onThreadRepliesClick` callback |
+| `CometChatThreadedHeader` | Shows the parent message and thread context |
+| `CometChatMessageComposer` | Sends new messages; pass `parentMessageId` for replies |
## Integration Steps
-### 1. Thread Trigger in Messages
-
-Wire the `onThreadRepliesClick` callback on `CometChatMessageList`. When a user clicks the thread reply icon on any message, this fires with the parent message object.
-
-_File: [messages.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/messages/messages.dart)_
+### Show the "Reply in Thread" Option
+
+
```dart
CometChatMessageList(
+ user: user,
onThreadRepliesClick: (BaseMessage message) {
Navigator.push(
context,
MaterialPageRoute(
- builder: (_) => CometChatThread(
- message: message,
- user: user,
- group: group,
- ),
+ builder: (_) => ThreadScreen(parentMessage: message, user: user),
),
);
},
-);
+)
```
+
+
----
-
-### 2. Thread Screen Widget
-
-Create the thread screen with header, message list, and composer. The `CometChatThread` widget handles the complete thread UI.
+### Navigate to the Thread Screen
-_File: [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart)_
+In V6, compose the thread screen using individual widgets:
+
+
```dart
-class CometChatThread extends StatefulWidget {
- const CometChatThread({
- this.user,
- this.group,
- required this.message,
- super.key,
- });
-
+class ThreadScreen extends StatelessWidget {
+ final BaseMessage parentMessage;
final User? user;
final Group? group;
- final BaseMessage message;
-
- @override
- State createState() => _CometChatThreadState();
-}
-```
-
----
-
-### 3. Thread Header and Message List
-
-Display the parent message context and threaded replies using `CometChatThreadedHeader` and `CometChatMessageList` with `parentMessageId`.
-
-_File: [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart)_
-
-```dart
-Column(
- children: [
- CometChatThreadedHeader(
- parentMessage: widget.message,
- loggedInUser: CometChatUIKit.loggedInUser!,
- ),
- Expanded(
- child: CometChatMessageList(
- user: widget.user,
- group: widget.group,
- messagesRequestBuilder: MessagesRequestBuilder()
- ..parentMessageId = widget.message.id,
- ),
- ),
- ],
-)
-```
----
-
-### 4. Thread Composer
-
-Add the message composer with `parentMessageId` to send replies in the thread context.
-
-_File: [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart)_
-
-```dart
-CometChatMessageComposer(
- user: widget.user,
- group: widget.group,
- parentMessageId: widget.message.id,
-)
-```
-
----
-
-### 5. Blocked User Handling
-
-When a user is blocked, replace the composer with an unblock prompt.
+ const ThreadScreen({required this.parentMessage, this.user, this.group, super.key});
-_File: [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart)_
-
-```dart
-Widget getComposer(CometChatThreadController controller) {
- if (controller.user?.blockedByMe == true) {
- return Container(
- padding: EdgeInsets.symmetric(vertical: 8, horizontal: 20),
- child: Column(
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ appBar: AppBar(title: Text("Thread")),
+ body: Column(
children: [
- Text(Translations.of(context).cantSendMessageBlockedUser),
- ElevatedButton(
- onPressed: () => controller.unBlockUser(),
- child: Text(Translations.of(context).unBlock),
+ CometChatThreadedHeader(message: parentMessage),
+ Expanded(
+ child: CometChatMessageList(
+ user: user,
+ group: group,
+ parentMessageId: parentMessage.id,
+ ),
+ ),
+ CometChatMessageComposer(
+ user: user,
+ group: group,
+ parentMessageId: parentMessage.id,
),
],
),
);
}
- return CometChatMessageComposer(
- user: widget.user,
- group: widget.group,
- parentMessageId: widget.message.id,
- );
}
```
+
+
----
+### Send a Threaded Message
+
+
+
+```dart
+CometChatMessageComposer(
+ user: user,
+ parentMessageId: parentMessage.id,
+)
+```
+
+
-## Feature Matrix
+## Customization Options
-| Feature | Component / Method | File |
-|:---|:---|:---|
-| Show thread option | `onThreadRepliesClick` | [messages.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/messages/messages.dart) |
-| Thread screen | `CometChatThread` | [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart) |
-| Thread header | `CometChatThreadedHeader` | [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart) |
-| Display thread msgs | `CometChatMessageList` | [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart) |
-| Compose reply | `CometChatMessageComposer` | [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart) |
-| Thread controller | `CometChatThreadController` | [cometchat_thread_controller.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread_controller.dart) |
+- Header Styling: Customize `CometChatThreadedHeader` appearance
+- Composer Placeholder: Change placeholder text based on thread context
+- Empty State: Display "No replies yet" when thread is empty
----
+## Summary
-## Next Steps
-
-
-
- Render real-time message threads.
-
-
- Customize the thread header component.
-
-
- Browse all feature and formatter guides.
-
-
- Full working sample application on GitHub.
-
-
+| Feature | Component / Method |
+|:---|:---|
+| Show thread option | `CometChatMessageList.onThreadRepliesClick` |
+| Thread view screen | Custom `ThreadScreen` widget |
+| Display threaded messages | `CometChatMessageList(parentMessageId: ...)` |
+| Send threaded message | `CometChatMessageComposer(parentMessageId: ...)` |
+| Thread header | `CometChatThreadedHeader(message: ...)` |
diff --git a/ui-kit/flutter/incoming-call.mdx b/ui-kit/flutter/incoming-call.mdx
index 7891817c9..9e37b6836 100644
--- a/ui-kit/flutter/incoming-call.mdx
+++ b/ui-kit/flutter/incoming-call.mdx
@@ -1,428 +1,238 @@
---
title: "Incoming Call"
-description: "Widget that serves as a visual representation when the user receives an incoming call, providing options to answer or decline."
+description: "Handle incoming CometChat Flutter UI Kit audio and video calls with full-screen caller info, accept, reject, and navigation setup."
---
-
-```json
-{
- "component": "CometChatIncomingCall",
- "package": "cometchat_calls_uikit",
- "import": "import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';",
- "description": "Widget that serves as a visual representation when the user receives an incoming call, providing options to answer or decline.",
- "props": {
- "data": {
- "call": { "type": "Call", "required": true },
- "user": { "type": "User?", "default": "null" }
- },
- "callbacks": {
- "onDecline": "Function(BuildContext, Call)?",
- "onAccept": "Function(BuildContext, Call)?",
- "onError": "OnError?"
- },
- "viewSlots": {
- "titleView": "Widget? Function(BuildContext context, Call call)?",
- "subTitleView": "Widget? Function(BuildContext context, Call call)?",
- "leadingView": "Widget? Function(BuildContext context, Call call)?",
- "itemView": "Widget? Function(BuildContext context, Call call)?",
- "trailingView": "Widget? Function(BuildContext context, Call call)?"
- },
- "style": {
- "incomingCallStyle": "CometChatIncomingCallStyle?"
- },
- "layout": {
- "height": { "type": "double?", "default": "null" },
- "width": { "type": "double?", "default": "null" }
- },
- "icons": {
- "callIcon": "Widget?"
- },
- "text": {
- "declineButtonText": "String?",
- "acceptButtonText": "String?"
- },
- "sound": {
- "disableSoundForCalls": { "type": "bool?", "default": "false" },
- "customSoundForCalls": "String?",
- "customSoundForCallsPackage": "String?"
- },
- "configuration": {
- "callSettingsBuilder": "CallSettingsBuilder?"
- }
- }
-}
-```
-
-
-## Overview
-The `CometChatIncomingCall` is a [Widget](/ui-kit/flutter/components-overview#components) that serves as a visual representation when the user receives an incoming call, such as a voice call or video call, providing options to answer or decline the call.
+`CometChatIncomingCall` displays a full-screen overlay when an incoming call is received, showing caller info with accept and reject buttons.
-
-
-
+---
-***
+## Where It Fits
-## Usage
+Typically triggered automatically when `CallNavigationContext.navigatorKey` is set in your `MaterialApp`.
-### Integration
+
+
+```dart
+MaterialApp(navigatorKey: CallNavigationContext.navigatorKey, home: YourHomeScreen())
+```
+
+
-`CometChatIncomingCall` being a custom widget, offers versatility in its integration. It can be seamlessly launched via button clicks or any user-triggered action, enhancing the overall user experience and facilitating smoother interactions within the application.
+---
-You can launch `CometChatIncomingCall` directly using `Navigator.push`, or you can define it as a widget within the `build` method of your `State` class.
+## Quick Start
-##### 1. Using Navigator to Launch `CometChatIncomingCall`
+### Automatic (Recommended)
```dart
-Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatIncomingCall(user: user, call: callObject))); // User object and Call object is required to launch the incoming call widget.
+MaterialApp(navigatorKey: CallNavigationContext.navigatorKey, home: YourHomeScreen())
```
-
-
-##### 2. Embedding `CometChatIncomingCall` as a Widget in the build Method
+### Manual Launch
```dart
-import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';
-import 'package:flutter/material.dart';
-
-class IncomingCallExample extends StatefulWidget {
- const IncomingCallExample({super.key});
-
- @override
- State createState() => _IncomingCallExampleState();
-}
-
-class _IncomingCallExampleState extends State {
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: SafeArea(
- child: CometChatIncomingCall(
- user: user, // User Object
- call: callObject
- ), // User object and Call object is required to launch the incoming call widget.
- ),
- );
- }
-}
+Navigator.push(context, MaterialPageRoute(
+ builder: (context) => CometChatIncomingCall(user: user, call: callObject),
+));
```
-
-
-***
-
-### Actions
+Prerequisites: CometChat SDK initialized, Calls UIKit added, `callingExtension` set. See [Call Features](/ui-kit/flutter/call-features).
-[Actions](/ui-kit/flutter/components-overview#actions) dictate how a widget functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the widget to fit your specific needs.
+---
-##### 1. onAccept
+## Actions
-The `onAccept` action is typically triggered when the user clicks on the accept button, initiating a predefined action. However, by implementing the following code snippet, you can easily customize or override this default behavior to suit your specific requirements.
+#### `onAccept`
```dart
-CometChatIncomingCall(
- user: user, // User Object
- call: callObject, // Call Object
- onAccept: (BuildContext context, Call call) {
- // TODO("Not yet implemented")
- },
+CometChatIncomingCall(user: user, call: callObject,
+ onAccept: (BuildContext context, Call call) { /* Custom accept */ },
)
```
-
-
-***
-
-##### 2. onDecline
-
-The `onDecline` action is typically triggered when the user clicks on the reject button, initiating a predefined action. However, by implementing the following code snippet, you can easily customize or override this default behavior to suit your specific requirements.
+#### `onDecline`
```dart
-CometChatIncomingCall(
- user: user, // User Object
- call: callObject, // Call Object
- onDecline: (BuildContext context, Call call) {
- // TODO("Not yet implemented")
- },
+CometChatIncomingCall(user: user, call: callObject,
+ onDecline: (BuildContext context, Call call) { /* Custom decline */ },
)
```
-
-
-***
-
-##### 3. onError
-
-You can customize this behavior by using the provided code snippet to override the `onError` and improve error handling.
+#### `onError`
```dart
-CometChatIncomingCall(
- user: user, // User Object
- call: callObject, // Call Object
- onError: (e) {
- // TODO("Not yet implemented")
- },
+CometChatIncomingCall(user: user, call: callObject,
+ onError: (e) { debugPrint("Error: ${e.message}"); },
)
```
-
-
-***
-
-### Filters
-**Filters** allow you to customize the data displayed in a list within a Widget. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK.
-The `CometChatIncomingCall` widget does not have any exposed filters.
-
-***
-
-### Events
-
-[Events](/ui-kit/flutter/components-overview#events) are emitted by a `Widget`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.
-
-The `CometChatIncomingCall` widget does not have any exposed events.
-
-***
+---
-## Customization
+## Functionality
-To fit your app's design requirements, you can customize the appearance of the conversation widget. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.
+| Property | Type | Description |
+|---|---|---|
+| `user` | `User?` | Caller user object |
+| `call` | `Call` | Call object (required) |
+| `callSettingsBuilder` | `CallSettingsBuilder?` | Configure call settings |
+| `height` / `width` | `double?` | Widget dimensions |
+| `callIcon` | `Widget?` | Custom call type icon |
+| `acceptButtonText` | `String?` | Custom accept button text |
+| `declineButtonText` | `String?` | Custom decline button text |
+| `disableSoundForCalls` | `bool?` | Disable incoming call sound |
+| `customSoundForCalls` | `String?` | Custom sound asset path |
-### Style
+---
-You can customize the appearance of the `CometChatIncomingCall` Widget by applying the `CometChatIncomingCallStyle` to it using the following code snippet.
+## Custom View Slots
-Here is the complete example for reference:
+### Item View
```dart
-CometChatIncomingCall(
- user: user, // User Object
- call: callObject, // Call Object
- incomingCallStyle: CometChatIncomingCallStyle(
- backgroundColor: Color(0xFFEDEAFA),
- avatarStyle: CometChatAvatarStyle(
- backgroundColor: Color(0xFFAA9EE8),
- borderRadius: BorderRadius.circular(7.5),
- ),
- acceptButtonColor: Color(0xFF6852D6),
- declineButtonColor: Colors.white,
- declineTextColor: Color(0xFFF44649),
- callIconColor: Color(0xFF6852D6),
- ),
+CometChatIncomingCall(user: user, call: callObject,
+ itemView: (context, call) { return Container(); },
)
```
-
-
-
-
-
-
-***
-
-### Functionality
-
-These are a set of small functional customizations that allow you to fine-tune the overall experience of the widget. With these, you can change text, set custom icons, and toggle the visibility of UI elements.
-
-**Example**
-
-In this example, we're enhancing the interface by customizing the accept and decline button icons. By setting custom icons for both the accept and decline buttons, users can enjoy a more visually appealing and personalized experience.
-
-This level of customization allows developers to tailor the user interface to match the overall theme and branding of their application.
-
-Here is the complete example for reference:
+### Leading View
```dart
-CometChatIncomingCall(
- user: user, // User Object
- call: callObject, // Call Object
- disableSoundForCalls: true,
- declineButtonText: "Decline",
- acceptButtonText: "Accept"
+CometChatIncomingCall(user: user, call: callObject,
+ leadingView: (context, call) {
+ return CircleAvatar(radius: 40, backgroundImage: NetworkImage(call.sender?.avatar ?? ""));
+ },
)
```
-
-
-
-
-
-
-Below is a list of customizations along with corresponding code snippets
-
-| **Property** | Description | Code |
-| ----------------------------------- | ------------------------------------------------- | -------------------------------------- |
-| **Accept Button Text** | Sets the text for the accept button. | `acceptButtonText: String?` |
-| **Custom Sound For Calls** | Sets the custom sound for incoming calls. | `customSoundForCalls: String?` |
-| **Call Icon** | Sets the Call Icon. | `callIcon: Widget?` |
-| **Decline Button Icon Url Package** | Sets the package for the decline button icon URL. | `declineButtonIconUrlPackage: String?` |
-| **Decline Button Text** | Sets the text for the decline button. | `declineButtonText: String?` |
-| **Disable Sound For Calls** | Disables sound for incoming calls. | `disableSoundForCalls: bool?` |
-
-***
-
-### Advanced
-
-For advanced-level customization, you can set custom widget to the widget. This lets you tailor each aspect of the widget to fit your exact needs and application aesthetics. You can create and define your widget, layouts, and UI elements and then incorporate those into the widget.
-
-***
-
-### itemView
-
-Allows setting a custom item view to be rendered.
-
-Use Cases:
-
-* Customize the call card UI for incoming calls.
-* Display additional user details (e.g., caller ID, location).
-* Integrate custom animations for call alerts.
+### Title View
```dart
-CometChatIncomingCall(
- itemView: (context, call) {
- // return itemView
- },
+CometChatIncomingCall(user: user, call: callObject,
+ titleView: (context, call) {
+ return Text(call.sender?.name ?? "Unknown",
+ style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white));
+ },
)
```
-
-
-***
-
-### leadingView
-
-Customizes the leading section of the component, usually the caller’s avatar or profile picture.
-
-Use Cases:
-
-* Display a profile picture with call status effects.
-* Show a custom ringing animation around the avatar.
-* Replace the avatar with a caller ID card.
+### Subtitle View
```dart
-CometChatIncomingCall(
- leadingView: (context, call) {
- // return leadingView
- },
+CometChatIncomingCall(user: user, call: callObject,
+ subTitleView: (context, call) {
+ final type = call.type == CometChatConstants.CALL_TYPE_VIDEO ? "Video" : "Audio";
+ return Text("Incoming $type Call", style: TextStyle(fontSize: 14, color: Colors.white70));
+ },
)
```
-
-
-***
-
-### titleView
-
-Allows setting a custom title view, typically used for the caller’s name or call type.
-
-Use Cases:
-
-* Display the caller’s full name with a verified badge.
-* Indicate the call type (Voice Call, Video Call).
-* Show real-time status ("Ringing...", "Call from Work Contact", etc.).
+### Trailing View
```dart
-CometChatIncomingCall(
- titleView: (context, call) {
- // return titleView
- },
+CometChatIncomingCall(user: user, call: callObject,
+ trailingView: (context, call) {
+ return Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [
+ ElevatedButton(onPressed: () {}, child: Text("Reject"),
+ style: ElevatedButton.styleFrom(backgroundColor: Colors.red)),
+ ElevatedButton(onPressed: () {}, child: Text("Accept"),
+ style: ElevatedButton.styleFrom(backgroundColor: Colors.green)),
+ ]);
+ },
)
```
-
-
-***
-
-### subtitleView
-
-Enables customizing the subtitle view, typically used for additional call details.
-
-Use Cases:
+---
-* Display call duration if available.
-* Show network strength indicators.
-* Include a custom message like "Connecting...".
+## Style
```dart
-CometChatIncomingCall(
- subTitleView: (context, call) {
- // return subTitleView
- },
+CometChatIncomingCall(user: user, call: callObject,
+ incomingCallStyle: CometChatIncomingCallStyle(
+ backgroundColor: Color(0xFFEDEAFA),
+ avatarStyle: CometChatAvatarStyle(backgroundColor: Color(0xFFAA9EE8), borderRadius: BorderRadius.circular(7.5)),
+ acceptButtonColor: Color(0xFF6852D6),
+ declineButtonColor: Colors.white,
+ declineTextColor: Color(0xFFF44649),
+ callIconColor: Color(0xFF6852D6),
+ ),
)
```
-
-
-***
+| Property | Description |
+|---|---|
+| `backgroundColor` | Background color |
+| `avatarStyle` | Caller avatar appearance |
+| `acceptButtonColor` | Accept button background |
+| `declineButtonColor` | Decline button background |
+| `declineTextColor` | Decline button text color |
+| `callIconColor` | Call type icon color |
-### trailingView
-
-Customizes the trailing section for actions or additional call-related UI elements.
+---
-Use Cases:
+## Key V6 Differences
-* Add custom accept/reject buttons.
-* Show a mute button before answering.
-* Display a text response option (e.g., "Can’t talk now").
+| Aspect | V5 | V6 |
+|---|---|---|
+| Subtitle | Static `String?` | Dynamic `Widget? Function(BuildContext, Call)?` |
+| Decline icon | URL-based `String?` | Widget-based |
+| Custom views | Limited | Full `titleView`, `subTitleView`, `leadingView`, `trailingView`, `itemView` |
+| State management | GetX controller | BLoC (`IncomingCallBloc`) |
+| Removed | `theme`, `avatarStyle`, `cardStyle`, `ongoingCallConfiguration` | Integrated into main style |
-
-
-```dart
-CometChatIncomingCall(
- titleView: (context, call) {
- // return titleView
- },
-)
-```
-
-
+---
-
+## Next Steps
-***
+
+ Manage outgoing calls
+ Add call buttons
+ Complete calling setup
+ Styling reference
+
diff --git a/ui-kit/flutter/localize.mdx b/ui-kit/flutter/localize.mdx
index 5ae38bc1a..8c4b3a579 100644
--- a/ui-kit/flutter/localize.mdx
+++ b/ui-kit/flutter/localize.mdx
@@ -1,184 +1,167 @@
---
-title: "Localization"
-sidebarTitle: "Localize"
-description: "Configure multi-language localization and custom translations in CometChat Flutter UI Kit."
+title: "Localize"
+description: "Localize CometChat Flutter UI Kit with supported languages, device language detection, translation files, and MaterialApp setup."
---
-
+## Overview
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_uikit_shared` |
-| Import | `import 'package:cometchat_uikit_shared/l10n/translations.dart';` |
-| Set language | Add `Locale('fr')` to `supportedLocales` |
-| Delegates | `Translations.delegate`, `GlobalMaterialLocalizations.delegate`, etc. |
-| Supported | 18 languages: ar, de, en, en-GB, es, fr, hi, hu, ja, ko, lt, ms, nl, pt, ru, sv, tr, zh |
-| Source | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/shared_uikit/lib/l10n) |
+CometChat V6 UI Kit provides language localization to adapt to the language of a specific country or region. The `CometChatLocalize` class allows you to detect the language of your users based on their device settings and set the language accordingly.
-
+The UI Kit supports 19 languages:
-`Translations` manages multi-language localization for the UI Kit.
+* Arabic (ar), German (de), English (en, en-GB), Spanish (es), French (fr), Hindi (hi), Hungarian (hu), Japanese (ja), Korean (ko), Lithuanian (lt), Malay (ms), Dutch (nl), Portuguese (pt), Russian (ru), Swedish (sv), Turkish (tr), Chinese (zh, zh-TW)
----
-
-## Supported Languages
-
-| Language | Code |
-| --- | --- |
-| Arabic | `ar` |
-| German | `de` |
-| English | `en` |
-| English (UK) | `en-GB` |
-| Spanish | `es` |
-| French | `fr` |
-| Hindi | `hi` |
-| Hungarian | `hu` |
-| Japanese | `ja` |
-| Korean | `ko` |
-| Lithuanian | `lt` |
-| Malay | `ms` |
-| Dutch | `nl` |
-| Portuguese | `pt` |
-| Russian | `ru` |
-| Swedish | `sv` |
-| Turkish | `tr` |
-| Chinese | `zh` |
-
----
+## Usage
-## Setup
+### Integration
-Add the dependency in `pubspec.yaml`:
+Add the following dependency in `pubspec.yaml`:
+
+
```yaml
flutter_localizations:
sdk: flutter
```
+
+
-Configure `MaterialApp`:
+***
+Update MaterialApp Localizations Delegates:
+
+
+
```dart
-import 'package:cometchat_uikit_shared/l10n/translations.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:cometchat_uikit_shared/l10n/translations.dart' as cc;
+import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
-MaterialApp(
- supportedLocales: const [
- Locale('en'),
- Locale('fr'),
- Locale('es'),
- Locale('de'),
- // Add more as needed
- ],
- localizationsDelegates: Translations.localizationsDelegates,
- home: MyApp(),
-)
+class MyApp extends StatelessWidget {
+ const MyApp({super.key});
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ supportedLocales: const [
+ Locale('en'), Locale('en', 'GB'), Locale('ar'), Locale('de'),
+ Locale('es'), Locale('fr'), Locale('hi'), Locale('hu'),
+ Locale('ja'), Locale('ko'), Locale('lt'), Locale('ms'),
+ Locale('nl'), Locale('pt'), Locale('ru'), Locale('sv'),
+ Locale('tr'), Locale('zh'), Locale('zh', 'TW'),
+ ],
+ localizationsDelegates: const [
+ cc.Translations.delegate,
+ GlobalMaterialLocalizations.delegate,
+ GlobalWidgetsLocalizations.delegate,
+ GlobalCupertinoLocalizations.delegate,
+ ],
+ theme: ThemeData(
+ appBarTheme: AppBarTheme(scrolledUnderElevation: 0.0),
+ ),
+ title: 'CometChat Flutter App',
+ home: YourHomeScreen(),
+ debugShowCheckedModeBanner: false,
+ );
+ }
+}
```
+
+
----
+***
-## Get Translated Strings
+You can also translate specific strings:
+
+
```dart
String translatedString = Translations.of(context).users;
Text(translatedString);
```
+
+
----
-
-## Custom Translations
+### Customizing UI Kit Translations for a Specific Language
-Override default translations by extending the language class:
+Override a specific language's default translations by creating a custom localization class:
+
+
```dart
-import 'package:cometchat_uikit_shared/l10n/translations.dart';
+import 'dart:async';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart' as cc;
import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
class CustomEN extends TranslationsEn {
- static const delegate = _CustomLocalizationsDelegate();
+ static const delegate = _CustomCometChatLocalizationsDelegate();
@override
- String get chats => "My Chats";
+ String get chats => "Overridden Chat";
@override
- String get calls => "My Calls";
+ String get calls => "Overridden Call";
}
-class _CustomLocalizationsDelegate extends LocalizationsDelegate {
- const _CustomLocalizationsDelegate();
+class _CustomCometChatLocalizationsDelegate
+ extends LocalizationsDelegate {
+ const _CustomCometChatLocalizationsDelegate();
@override
bool isSupported(Locale locale) => locale.languageCode == 'en';
@override
- Future load(Locale locale) => SynchronousFuture(CustomEN());
+ Future load(Locale locale) =>
+ SynchronousFuture(CustomEN());
@override
- bool shouldReload(_CustomLocalizationsDelegate old) => false;
+ bool shouldReload(_CustomCometChatLocalizationsDelegate old) => false;
}
```
+
+
-Then add to `MaterialApp`:
+Then add `CustomEN.delegate` to your `localizationsDelegates` list before `cc.Translations.delegate`.
-```dart
-localizationsDelegates: const [
- CustomEN.delegate, // Custom override first
- ...Translations.localizationsDelegates,
-],
-```
+### Adding New Language Support
----
-
-## Add New Language
-
-Create a custom translation class for unsupported languages:
+Extend the UI Kit with a new language by creating a custom translation class:
+
+
```dart
-import 'package:cometchat_uikit_shared/l10n/translations.dart';
-import 'package:flutter/foundation.dart';
-
-class TeluguTranslations extends Translations {
- TeluguTranslations([super.locale = "te"]);
- static const delegate = _TeluguDelegate();
+class TeluguLocalization extends cc.Translations {
+ TeluguLocalization([super.locale = "te"]);
+ static const delegate = _TeluguLocalizationsDelegate();
@override
String get chats => "సందేశాలు";
@override
String get calls => "ఫోన్ కాల్స్";
-
- // Override all required getters from Translations...
+ // Override all relevant strings for full localization
}
-class _TeluguDelegate extends LocalizationsDelegate {
- const _TeluguDelegate();
+class _TeluguLocalizationsDelegate
+ extends LocalizationsDelegate {
+ const _TeluguLocalizationsDelegate();
@override
bool isSupported(Locale locale) => locale.languageCode == 'te';
@override
- Future load(Locale locale) => SynchronousFuture(TeluguTranslations());
+ Future load(Locale locale) =>
+ SynchronousFuture(TeluguLocalization());
@override
- bool shouldReload(_TeluguDelegate old) => false;
+ bool shouldReload(_TeluguLocalizationsDelegate old) => false;
}
```
+
+
-Then add to `MaterialApp`:
-
-```dart
-localizationsDelegates: const [
- TeluguTranslations.delegate, // Custom language first
- ...Translations.localizationsDelegates,
-],
-supportedLocales: const [
- Locale('te'), // Telugu
- Locale('en'),
- // Other locales...
-],
-```
-
----
-
-## Date/Time Formatting
+### DateTimeFormatter
-Customize date/time display globally via `DateTimeFormatterCallback`. See [CometChatUIKit Methods](/ui-kit/flutter/methods#dateformatter) for details.
+By providing a custom `DateTimeFormatterCallback`, you can globally configure how time and date values are displayed across all UI components. For details, refer to the [CometChatUIKit class](/ui-kit/flutter/methods#dateformatter).
diff --git a/ui-kit/flutter/mentions-formatter-guide.mdx b/ui-kit/flutter/mentions-formatter-guide.mdx
index 3db41d36f..a4a577be6 100644
--- a/ui-kit/flutter/mentions-formatter-guide.mdx
+++ b/ui-kit/flutter/mentions-formatter-guide.mdx
@@ -1,357 +1,148 @@
---
title: "Mentions Formatter"
-description: "Add @mentions with user suggestions and styled tokens in CometChat Flutter UI Kit."
+description: "Format @mentions in CometChat Flutter UI Kit message lists, composers, and conversations with custom styles and tap handling."
---
-
-
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_chat_uikit` |
-| Key class | `CometChatMentionsFormatter` (extends `CometChatTextFormatter`) |
-| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login(uid)` |
-| Purpose | Add @mentions with user suggestions, styled tokens, and click handling |
-| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
-| Related | [Custom Text Formatter](/ui-kit/flutter/custom-text-formatter-guide) · [Custom Mentions Formatter](/ui-kit/flutter/custom-mentions-formatter-guide) · [All Guides](/ui-kit/flutter/guide-overview) |
-
-
-
## Overview
-The `CometChatMentionsFormatter` class is a part of the CometChat UI Kit, a ready-to-use chat UI widget library for integrating CometChat into your Android applications. This class provides functionality to format mentions within text messages displayed in the chat interface. Mentions allow users to reference other users within a conversation, providing a convenient way to direct messages or involve specific participants.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-## Features
-
-* **Mention Formatting**: Automatically formats mentions within text messages based on provided styles and settings.
-* **Customizable Styles**: Allows customization of text styles for mentions, including colors, fonts, and background colors.
-* **User and Group Member Mentions**: Supports mentions for both individual users and group members, providing flexibility in communication scenarios.
-* **Mention List Generation**: Generates a list of suggested mentions based on user input, facilitating easy selection of recipients during message composition.
-* **Mention Click Handling**: Provides a listener interface for handling click events on mentions, enabling custom actions to be performed when a mention is tapped by the user.
+The `CometChatMentionsFormatter` class formats mentions within text messages displayed in the chat interface. For the base `CometChatTextFormatter` API, see [Text Formatters](/ui-kit/flutter/customization-text-formatters).
## Usage
-To integrate the `CometChatMentionsFormatter` class into your application:
-
-1. **Initialization**: Create an instance of the `CometChatMentionsFormatter` class and configure it with desired settings, such as mention text styles and limit settings.
-
-2. **Set Mention Listeners**: Set listeners for handling mention click events (`setOnMentionClick`).
-
-3. **Format Messages**: Use the `prepareLeftMessageBubbleSpan`, `prepareRightMessageBubbleSpan`, `prepareComposerSpan`, and `prepareConversationSpan` methods to format text messages with mentions appropriately for display in the chat interface.
-
-4. **Customization**: Customize the appearance and behavior of mentions by adjusting the text styles, colors, and other formatting properties as needed.
-
-Below is an example demonstrating how to use the `CometChatMentionsFormatter` class in widgets such as [CometChatConversations](/ui-kit/flutter/conversations), [CometChatMessageList](/ui-kit/flutter/message-list), [CometChatMessageComposer](/ui-kit/flutter/message-composer).
+Pass `CometChatMentionsFormatter` to the `textFormatters` property of widgets like [CometChatConversations](/ui-kit/flutter/conversations), [CometChatMessageList](/ui-kit/flutter/message-list), or [CometChatMessageComposer](/ui-kit/flutter/message-composer).
```dart
textFormatters: [
- CometChatMentionsFormatter(
- messageBubbleTextStyle: (theme, alignment,{forConversation = false}) =>
- TextStyle(
- color: alignment==BubbleAlignment.left? Colors.orange : Colors.pink,
- fontSize: 14,
- fontWeight: FontWeight.bold
- ),
- )
+ CometChatMentionsFormatter(
+ messageBubbleTextStyle: (theme, alignment, {forConversation = false}) =>
+ TextStyle(
+ color: alignment == BubbleAlignment.left ? Colors.orange : Colors.pink,
+ fontSize: 14,
+ fontWeight: FontWeight.bold,
+ ),
+ ),
]
```
-
-
***
## Actions
-[Actions](/ui-kit/flutter/components-overview#actions) dictate how a widget functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the widget to fit your specific needs.
-
##### onMentionTap
-Setting a listener for mention-click events in Message Bubbles enhances interactivity within the chat. This listener is activated when a mention is clicked, returning the corresponding user object. This feature transforms mentions into interactive links, enabling more in-depth and contextual engagement with the user associated with the clicked mention.
+Setting a listener for mention-click events in Message Bubbles. This listener is activated when a mention is clicked, returning the corresponding user object.
```dart
-CometChatMessages(
+CometChatMessageList(
user: user,
- messageListConfiguration: MessageListConfiguration(
- textFormatters: [
- CometChatMentionsFormatter(
- onMentionTap: (mention, mentionedUser, {message}) {
- final snackBar = SnackBar(
- content: const Text('Tap on Mentioned User', style: TextStyle(color: Colors.lightBlueAccent)),
- action: SnackBarAction(
- label: 'Undo',
- onPressed: () {
- // TODO("Not yet implemented")
- },
- ),
- );
- ScaffoldMessenger.of(context).showSnackBar(snackBar);
- },
- messageBubbleTextStyle: (theme, alignment,{forConversation = false}) => TextStyle(
- color: alignment==BubbleAlignment.left? Colors.orange : Colors.greenAccent,
- fontSize: 14,
- fontWeight: FontWeight.bold
- ),
- )
- ]
- ),
+ textFormatters: [
+ CometChatMentionsFormatter(
+ onMentionTap: (mention, mentionedUser, {message}) {
+ ScaffoldMessenger.of(context).showSnackBar(
+ SnackBar(content: Text('Tapped on ${mentionedUser.name}')),
+ );
+ },
+ messageBubbleTextStyle: (theme, alignment, {forConversation = false}) =>
+ TextStyle(
+ color: alignment == BubbleAlignment.left ? Colors.orange : Colors.greenAccent,
+ fontSize: 14,
+ fontWeight: FontWeight.bold,
+ ),
+ ),
+ ],
)
```
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
***
## Customization
-| **Property** | **Description** | **Code** |
-| ------------------------------ | -------------------------------------------------------------- | -------------------------------------------------------- |
-| **trackingCharacter** | The character that triggers the mention search. | `String? trackingCharacter` |
-| **pattern** | The regex pattern to identify mentions. | `RegExp? pattern` |
-| **showLoadingIndicator** | Whether to show a loading indicator during mention search. | `bool? showLoadingIndicator` |
-| **onSearch** | Callback function to perform search when mention is triggered. | `void Function(String)? onSearch` |
-| **onError** | Callback function to handle errors during mention search. | `void Function(String)? onError` |
-| **message** | The message in which mentions are to be formatted. | `String? message` |
-| **messageBubbleTextStyle** | The text style for the message bubble. | `TextStyle? messageBubbleTextStyle` |
-| **messageInputTextStyle** | The text style for the message input. | `TextStyle? messageInputTextStyle` |
-| **composerId** | The unique identifier for the composer. | `String? composerId` |
-| **suggestionListEventSink** | The event sink for the suggestion list. | `EventSink>? suggestionListEventSink` |
-| **previousTextEventSink** | The event sink for the previous text before mention. | `EventSink? previousTextEventSink` |
-| **user** | The user to be mentioned. | `User? user` |
-| **group** | The group in which mentions are to be formatted. | `Group? group` |
-| **groupMembersRequestBuilder** | The request builder for fetching group members to mention. | `GroupMembersRequestBuilder? groupMembersRequestBuilder` |
-| **usersRequestBuilder** | The request builder for fetching users to mention. | `UsersRequestBuilder? usersRequestBuilder` |
-| **mentionsType** | The type of mentions (e.g., user, group). | `MentionsType? mentionsType` |
-| **onMentionTap** | Callback function to handle mention tap actions. | `void Function(User)? onMentionTap` |
-| **visibleIn** | Defines where the mentions are visible. | `Set? visibleIn` |
-| **style** | Style configuration for customizing mention appearance. | `CometChatMentionsStyle? style` |
-| **disableMentions** | Disables mentions in the composer (default: false). | `bool disableMentions` |
-| **disableMentionAll** | Controls whether @all mention is enabled (default: false). | `bool disableMentionAll` |
-| **mentionAllLabel** | Custom label to display for @all mention. | `String? mentionAllLabel` |
-| **mentionAllLabelId** | Custom ID for @all mention (default: "all"). | `String? mentionAllLabelId` |
+| Property | Description | Code |
+|---|---|---|
+| trackingCharacter | Character that triggers mention search | `String? trackingCharacter` |
+| pattern | Regex pattern to identify mentions | `RegExp? pattern` |
+| messageBubbleTextStyle | Text style for message bubble | `TextStyle? messageBubbleTextStyle` |
+| messageInputTextStyle | Text style for message input | `TextStyle? messageInputTextStyle` |
+| onMentionTap | Callback for mention tap actions | `void Function(User)? onMentionTap` |
+| groupMembersRequestBuilder | Request builder for group members | `GroupMembersRequestBuilder?` |
+| usersRequestBuilder | Request builder for users | `UsersRequestBuilder?` |
***
-## Advance
-
-For advanced-level customization, you can set the style of the Mentions formatters. This lets you tailor each aspect of the widget to fit your exact needs and application aesthetics. You can create and define your formatters style.
-
-### Custom Mentions Formatter
-
-For deeper customization — such as filtering who appears in the suggestion list, transforming suggestions before they reach the UI, or handling mention taps with custom logic — you can extend `CometChatMentionsFormatter` and override its behavior. See the [Custom Mentions Formatter](/ui-kit/flutter/custom-mentions-formatter-guide) guide for a full walkthrough.
-
-### @all Mention Feature
-
-The `CometChatMentionsFormatter` supports mentioning all members in a group using the @all feature. When enabled, users can type `@` followed by "all" (or a custom label) to notify everyone in the group.
-
-
-
-```dart
-CometChatMessages(
- group: group,
- messageComposerConfiguration: MessageComposerConfiguration(
- textFormatters: [
- CometChatMentionsFormatter(
- disableMentionAll: false, // Enable @all mention (default)
- mentionAllLabel: "everyone", // Custom label (optional)
- mentionAllLabelId: "all", // Custom ID (optional)
- )
- ]
- ),
-)
-```
-
-
-
-
-
-To disable the @all mention feature:
-
-
-
-```dart
-CometChatMentionsFormatter(
- disableMentionAll: true, // Disable @all mention
-)
-```
-
-
-
-
-
-***
+## Advanced
### Composer Mention Text Style
-Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source. To configure the existing Mentions look and feel for [CometChatMessageComposer](/ui-kit/flutter/message-composer) refer to the below code snippet
-
```dart
-CometChatMessages(
- user: user,
- messageComposerConfiguration: MessageComposerConfiguration(
- textFormatters: [
- CometChatMentionsFormatter(
- messageInputTextStyle: (theme) {
- return const TextStyle(
- color: Colors.lightBlueAccent,
- fontSize: 14,
- fontWeight: FontWeight.bold
- );
- },
- )
- ]
- )
+CometChatMessageComposer(
+ user: user,
+ textFormatters: [
+ CometChatMentionsFormatter(
+ messageInputTextStyle: (theme) {
+ return const TextStyle(
+ color: Colors.lightBlueAccent,
+ fontSize: 14,
+ fontWeight: FontWeight.bold,
+ );
+ },
+ ),
+ ],
)
```
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-***
-
### Message Bubble Mention Text Style
-Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source. To configure the existing Mentions look and feel for [CometChatMessageList](/ui-kit/flutter/message-list)
-
```dart
-CometChatMessages(
+CometChatMessageList(
user: user,
- messageListConfiguration: MessageListConfiguration(
- textFormatters: [
- CometChatMentionsFormatter(
- messageBubbleTextStyle: (theme, alignment,{forConversation = false}) => TextStyle(
- color: alignment==BubbleAlignment.left? Colors.orange : Colors.greenAccent,
- fontSize: 14,
- fontWeight: FontWeight.bold
- ),
- )
- ]
- ),
+ textFormatters: [
+ CometChatMentionsFormatter(
+ messageBubbleTextStyle: (theme, alignment, {forConversation = false}) =>
+ TextStyle(
+ color: alignment == BubbleAlignment.left ? Colors.orange : Colors.greenAccent,
+ fontSize: 14,
+ fontWeight: FontWeight.bold,
+ ),
+ ),
+ ],
)
```
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-***
-
### Conversations Mention Text Style
-Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source. To configure the existing Mentions look and feel for [CometChatConversations](/ui-kit/flutter/conversations)
-
```dart
CometChatConversations(
textFormatters: [
CometChatMentionsFormatter(
- messageBubbleTextStyle: (theme, alignment,{forConversation = false}) =>
- const TextStyle(
- color: Colors.lightBlueAccent,
- fontSize: 14,
- fontWeight: FontWeight.bold
- ),
- )
+ messageBubbleTextStyle: (theme, alignment, {forConversation = false}) =>
+ const TextStyle(
+ color: Colors.lightBlueAccent,
+ fontSize: 14,
+ fontWeight: FontWeight.bold,
+ ),
+ ),
],
)
```
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-***
-
-## Next Steps
-
-
- Build a custom mentions formatter with filtered suggestions.
-
-
- Build custom inline text patterns with regex.
-
-
- Customize the standard message input component.
-
-
- Browse all feature and formatter guides.
-
-
diff --git a/ui-kit/flutter/message-bubble-styling.mdx b/ui-kit/flutter/message-bubble-styling.mdx
index 3b5fd03ca..102f36175 100644
--- a/ui-kit/flutter/message-bubble-styling.mdx
+++ b/ui-kit/flutter/message-bubble-styling.mdx
@@ -1,274 +1,362 @@
---
-title: "Message Bubble Styling"
-sidebarTitle: "Message Bubbles"
-description: "Customize incoming and outgoing message bubbles in CometChat Flutter UI Kit."
+title: "Customizing Message Bubbles"
+sidebarTitle: "Message Bubble Styling"
+description: "Customize CometChat Flutter UI Kit message bubbles with incoming and outgoing styles, theme extensions, reactions, timestamps, and avatars."
---
-
+The CometChat V6 UI Kit provides `CometChatOutgoingMessageBubbleStyle` and `CometChatIncomingMessageBubbleStyle` for fine-grained control over message bubble appearance. These classes extend `ThemeExtension`, allowing customizations through global theming or explicit style objects.
-| Field | Value |
-| --- | --- |
-| Outgoing | `CometChatOutgoingMessageBubbleStyle` |
-| Incoming | `CometChatIncomingMessageBubbleStyle` |
-| Action | `CometChatActionBubbleStyle` |
-| AI Assistant | `CometChatAiAssistantBubbleStyle` |
-| Usage | Add to `ThemeData.extensions` or pass to `CometChatMessageListStyle` |
-| Bubble types | Text, Image, Video, Audio, File, Poll, Sticker, Voice Call, Video Call, Link Preview, Collaborative Document, Collaborative Whiteboard, Message Translation, Deleted, Action, AI Assistant |
-| Source | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/shared_uikit/lib/src/models/extension_bubble_styles) |
+## How These Classes Help
-
+### 1. Targeted Customization
-Customize message bubbles using `CometChatOutgoingMessageBubbleStyle` and `CometChatIncomingMessageBubbleStyle`.
+Customize specific attributes of message bubbles:
-
-
-
+* Background color, border radius, text style
+* Specialized bubbles: Audio, File, Collaborative, Poll, Deleted, Link Preview, Sticker, Call bubbles
+* Reactions, timestamps, avatars, and borders
----
-
-## Global Theming
+### 2. Unified Global Theming
-Apply bubble styles globally via `ThemeData.extensions`:
+Apply styles via Flutter's global theming or pass them to `CometChatMessageListStyle`:
+
+
```dart
MaterialApp(
+ title: 'Your app',
theme: ThemeData(
extensions: [
- CometChatOutgoingMessageBubbleStyle(
+ CometChatIncomingMessageBubbleStyle(
backgroundColor: Color(0xFFF76808),
),
- CometChatIncomingMessageBubbleStyle(
- backgroundColor: Color(0xFFFEEDE1),
+ CometChatOutgoingMessageBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
),
],
),
-)
+ home: ...,
+);
```
+
+
-
-
-
-
----
-
-## Component-Level Styling
+### 3. Ease of Integration
Pass styles directly to `CometChatMessageList`:
+
+
```dart
CometChatMessageList(
user: user,
+ group: group,
style: CometChatMessageListStyle(
- outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- ),
- incomingMessageBubbleStyle: CometChatIncomingMessageBubbleStyle(
- backgroundColor: Color(0xFFFEEDE1),
- ),
+ incomingMessageBubbleStyle: CometChatIncomingMessageBubbleStyle(),
+ outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(),
),
)
```
+
+
----
-
-## Bubble Types
+## Customizable Message Bubbles
### Text Bubble
-
-
-
-
+
+
```dart
-CometChatOutgoingMessageBubbleStyle(
- textBubbleStyle: CometChatTextBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- ),
+ThemeData(
+ extensions: [
+ CometChatOutgoingMessageBubbleStyle(
+ textBubbleStyle: CometChatTextBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ ),
+ ),
+ CometChatIncomingMessageBubbleStyle(
+ textBubbleStyle: CometChatTextBubbleStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ ),
+ ),
+ ],
)
```
+
+
### Image Bubble
-
-
-
-
+
+
```dart
-CometChatOutgoingMessageBubbleStyle(
- imageBubbleStyle: CometChatImageBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- ),
+ThemeData(
+ extensions: [
+ CometChatOutgoingMessageBubbleStyle(
+ imageBubbleStyle: CometChatImageBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ ),
+ ),
+ CometChatIncomingMessageBubbleStyle(
+ imageBubbleStyle: CometChatImageBubbleStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ ),
+ ),
+ ],
)
```
+
+
### Video Bubble
-
-
-
-
+
+
```dart
-CometChatOutgoingMessageBubbleStyle(
- videoBubbleStyle: CometChatVideoBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- playIconColor: Color(0xFFF76808),
- ),
+ThemeData(
+ extensions: [
+ CometChatOutgoingMessageBubbleStyle(
+ videoBubbleStyle: CometChatVideoBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ playIconColor: Color(0xFFF76808),
+ ),
+ ),
+ CometChatIncomingMessageBubbleStyle(
+ videoBubbleStyle: CometChatVideoBubbleStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ playIconColor: Color(0xFFF76808),
+ ),
+ ),
+ ],
)
```
+
+
### Audio Bubble
-
-
-
-
+
+
```dart
-CometChatIncomingMessageBubbleStyle(
- audioBubbleStyle: CometChatAudioBubbleStyle(
- backgroundColor: Color(0xFFFEEDE1),
- downloadIconColor: Color(0xFFF76808),
- audioBarColor: Color(0xFFF76808),
- playIconColor: Color(0xFFF76808),
- ),
+ThemeData(
+ extensions: [
+ CometChatOutgoingMessageBubbleStyle(
+ audioBubbleStyle: CometChatAudioBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ playIconColor: Color(0xFFF76808),
+ ),
+ ),
+ CometChatIncomingMessageBubbleStyle(
+ audioBubbleStyle: CometChatAudioBubbleStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ downloadIconColor: Color(0xFFF76808),
+ audioBarColor: Color(0xFFF76808),
+ playIconColor: Color(0xFFF76808),
+ ),
+ ),
+ ],
)
```
+
+
### File Bubble
-
-
-
-
+
+
```dart
-CometChatIncomingMessageBubbleStyle(
- fileBubbleStyle: CometChatFileBubbleStyle(
- backgroundColor: Color(0xFFFEEDE1),
- downloadIconTint: Color(0xFFF76808),
- ),
+ThemeData(
+ extensions: [
+ CometChatOutgoingMessageBubbleStyle(
+ fileBubbleStyle: CometChatFileBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ ),
+ ),
+ CometChatIncomingMessageBubbleStyle(
+ fileBubbleStyle: CometChatFileBubbleStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ downloadIconTint: Color(0xFFF76808),
+ ),
+ ),
+ ],
)
```
+
+
-### Poll Bubble
-
-
-
-
+### Sticker Bubble
+
+
```dart
-CometChatOutgoingMessageBubbleStyle(
- pollsBubbleStyle: CometChatPollsBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- progressBackgroundColor: Color(0xFFFBAA75),
- iconColor: Color(0xFFF76808),
- ),
+ThemeData(
+ extensions: [
+ CometChatOutgoingMessageBubbleStyle(
+ stickerBubbleStyle: CometChatStickerBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ ),
+ ),
+ CometChatIncomingMessageBubbleStyle(
+ stickerBubbleStyle: CometChatStickerBubbleStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ ),
+ ),
+ ],
)
```
+
+
### Call Bubble
-
-
-
-
+
+
```dart
-CometChatOutgoingMessageBubbleStyle(
- videoCallBubbleStyle: CometChatCallBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- iconColor: Color(0xFFF76808),
- buttonTextStyle: TextStyle(color: Colors.white),
- dividerColor: Color(0xFFFBAA75),
- ),
-)
-```
-
-### Link Preview Bubble
-
-
-
-
-
-```dart
-CometChatOutgoingMessageBubbleStyle(
- linkPreviewBubbleStyle: CometChatLinkPreviewBubbleStyle(
- backgroundColor: Color(0xFFFBAA75),
- ),
- textBubbleStyle: CometChatTextBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- ),
+ThemeData(
+ extensions: [
+ CometChatOutgoingMessageBubbleStyle(
+ videoCallBubbleStyle: CometChatCallBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ iconColor: Color(0xFFF76808),
+ buttonTextStyle: TextStyle(color: Colors.white),
+ dividerColor: Color(0xFFFBAA75),
+ ),
+ ),
+ CometChatIncomingMessageBubbleStyle(
+ videoCallBubbleStyle: CometChatCallBubbleStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ iconColor: Color(0xFFF76808),
+ buttonTextStyle: TextStyle(color: Color(0xFFF76808)),
+ ),
+ ),
+ ],
)
```
+
+
-### Deleted Message Bubble
-
-
-
-
+### Collaborative Whiteboard Bubble
+
+
```dart
-CometChatOutgoingMessageBubbleStyle(
- deletedBubbleStyle: CometChatDeletedBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- ),
+ThemeData(
+ extensions: [
+ CometChatOutgoingMessageBubbleStyle(
+ collaborativeWhiteboardBubbleStyle: CometChatCollaborativeBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ iconTint: Color(0xFFFFFFFF),
+ titleStyle: TextStyle(fontWeight: FontWeight.bold, color: Color(0xFFFFFFFF)),
+ buttonTextStyle: TextStyle(color: Color(0xFFFFFFFF)),
+ dividerColor: Color(0xFFFBAA75),
+ ),
+ ),
+ CometChatIncomingMessageBubbleStyle(
+ collaborativeWhiteboardBubbleStyle: CometChatCollaborativeBubbleStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ iconTint: Color(0xFFF76808),
+ titleStyle: TextStyle(fontWeight: FontWeight.bold),
+ buttonTextStyle: TextStyle(color: Color(0xFFF76808)),
+ ),
+ ),
+ ],
)
```
+
+
-### Collaborative Bubbles
-
-
-
-
+### Collaborative Document Bubble
+
+
```dart
-// Collaborative Whiteboard
-CometChatOutgoingMessageBubbleStyle(
- collaborativeWhiteboardBubbleStyle: CometChatCollaborativeBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- iconTint: Color(0xFFFFFFFF),
- titleStyle: TextStyle(fontWeight: FontWeight.bold, color: Color(0xFFFFFFFF)),
- buttonTextStyle: TextStyle(color: Color(0xFFFFFFFF)),
- dividerColor: Color(0xFFFBAA75),
- ),
-)
-
-// Collaborative Document
-CometChatOutgoingMessageBubbleStyle(
- collaborativeDocumentBubbleStyle: CometChatCollaborativeBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- iconTint: Color(0xFFFFFFFF),
- titleStyle: TextStyle(fontWeight: FontWeight.bold, color: Color(0xFFFFFFFF)),
- buttonTextStyle: TextStyle(color: Color(0xFFFFFFFF)),
- dividerColor: Color(0xFFFBAA75),
- ),
+ThemeData(
+ extensions: [
+ CometChatOutgoingMessageBubbleStyle(
+ collaborativeDocumentBubbleStyle: CometChatCollaborativeBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ iconTint: Color(0xFFFFFFFF),
+ titleStyle: TextStyle(fontWeight: FontWeight.bold, color: Color(0xFFFFFFFF)),
+ buttonTextStyle: TextStyle(color: Color(0xFFFFFFFF)),
+ dividerColor: Color(0xFFFBAA75),
+ ),
+ ),
+ CometChatIncomingMessageBubbleStyle(
+ collaborativeDocumentBubbleStyle: CometChatCollaborativeBubbleStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ iconTint: Color(0xFFF76808),
+ titleStyle: TextStyle(fontWeight: FontWeight.bold),
+ buttonTextStyle: TextStyle(color: Color(0xFFF76808)),
+ ),
+ ),
+ ],
)
```
+
+
-### Sticker Bubble
+### Poll Bubble
+
+
```dart
-CometChatOutgoingMessageBubbleStyle(
- stickerBubbleStyle: CometChatStickerBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- borderRadius: BorderRadius.circular(12),
- ),
+ThemeData(
+ extensions: [
+ CometChatOutgoingMessageBubbleStyle(
+ pollsBubbleStyle: CometChatPollsBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ progressBackgroundColor: Color(0xFFFBAA75),
+ iconColor: Color(0xFFF76808),
+ ),
+ ),
+ CometChatIncomingMessageBubbleStyle(
+ pollsBubbleStyle: CometChatPollsBubbleStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ progressBackgroundColor: Color(0xFFDCDCDC),
+ progressColor: Color(0xFFF76808),
+ iconColor: Colors.white,
+ selectedOptionColor: Color(0xFFF76808),
+ ),
+ ),
+ ],
)
```
+
+
-### Voice Call Bubble
+### Link Preview Bubble
+
+
```dart
-CometChatOutgoingMessageBubbleStyle(
- voiceCallBubbleStyle: CometChatCallBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- iconColor: Color(0xFFFFFFFF),
- buttonTextStyle: TextStyle(color: Colors.white),
- ),
+ThemeData(
+ extensions: [
+ CometChatOutgoingMessageBubbleStyle(
+ linkPreviewBubbleStyle: CometChatLinkPreviewBubbleStyle(
+ backgroundColor: Color(0xFFFBAA75),
+ ),
+ textBubbleStyle: CometChatTextBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ ),
+ ),
+ CometChatIncomingMessageBubbleStyle(
+ linkPreviewBubbleStyle: CometChatLinkPreviewBubbleStyle(
+ backgroundColor: Color(0xFFFBAA75),
+ ),
+ textBubbleStyle: CometChatTextBubbleStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ ),
+ ),
+ ],
)
```
+
+
### Action Message Bubble
-Style activity-driven notifications like "User joined" or "User left":
-
+
+
```dart
ThemeData(
extensions: [
@@ -280,78 +368,45 @@ ThemeData(
],
)
```
+
+
+
+### Deleted Message Bubble
+
+
+
+```dart
+ThemeData(
+ extensions: [
+ CometChatOutgoingMessageBubbleStyle(
+ deletedBubbleStyle: CometChatDeletedBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ ),
+ ),
+ CometChatIncomingMessageBubbleStyle(
+ deletedBubbleStyle: CometChatDeletedBubbleStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ ),
+ ),
+ ],
+)
+```
+
+
### AI Assistant Bubble
+
+
```dart
ThemeData(
extensions: [
CometChatAiAssistantBubbleStyle(
backgroundColor: Colors.transparent,
- textColor: Color(0xFF141414),
- textStyle: TextStyle(fontFamily: 'Roboto'),
+ textColor: const Color(0xFF141414),
),
],
)
```
-
----
-
-## Style Properties Reference
-
-### CometChatOutgoingMessageBubbleStyle
-
-| Property | Type | Description |
-| --- | --- | --- |
-| `backgroundColor` | `Color?` | Background color of the message bubble |
-| `border` | `BoxBorder?` | Border of the message bubble |
-| `borderRadius` | `BorderRadiusGeometry?` | Border radius of the message bubble |
-| `messageBubbleBackgroundImage` | `DecorationImage?` | Background image for the bubble |
-| `threadedMessageIndicatorTextStyle` | `TextStyle?` | Text style for threaded message indicator |
-| `threadedMessageIndicatorIconColor` | `Color?` | Icon color for threaded message indicator |
-| `messageBubbleAvatarStyle` | `CometChatAvatarStyle?` | Style for sender avatar |
-| `messageReceiptStyle` | `CometChatMessageReceiptStyle?` | Style for message receipts |
-| `messageBubbleReactionStyle` | `CometChatReactionsStyle?` | Style for message reactions |
-| `messageBubbleDateStyle` | `CometChatDateStyle?` | Style for message date |
-| `textBubbleStyle` | `CometChatTextBubbleStyle?` | Style for text messages |
-| `imageBubbleStyle` | `CometChatImageBubbleStyle?` | Style for image messages |
-| `videoBubbleStyle` | `CometChatVideoBubbleStyle?` | Style for video messages |
-| `audioBubbleStyle` | `CometChatAudioBubbleStyle?` | Style for audio messages |
-| `fileBubbleStyle` | `CometChatFileBubbleStyle?` | Style for file messages |
-| `pollsBubbleStyle` | `CometChatPollsBubbleStyle?` | Style for poll messages |
-| `stickerBubbleStyle` | `CometChatStickerBubbleStyle?` | Style for sticker messages |
-| `voiceCallBubbleStyle` | `CometChatCallBubbleStyle?` | Style for voice call bubbles |
-| `videoCallBubbleStyle` | `CometChatCallBubbleStyle?` | Style for video call bubbles |
-| `linkPreviewBubbleStyle` | `CometChatLinkPreviewBubbleStyle?` | Style for link preview bubbles |
-| `collaborativeDocumentBubbleStyle` | `CometChatCollaborativeBubbleStyle?` | Style for collaborative document bubbles |
-| `collaborativeWhiteboardBubbleStyle` | `CometChatCollaborativeBubbleStyle?` | Style for collaborative whiteboard bubbles |
-| `messageTranslationBubbleStyle` | `CometChatMessageTranslationBubbleStyle?` | Style for translated messages |
-| `deletedBubbleStyle` | `CometChatDeletedBubbleStyle?` | Style for deleted messages |
-| `moderationStyle` | `CometChatModerationStyle?` | Style for moderated messages |
-| `messagePreviewStyle` | `CometChatMessagePreviewStyle?` | Style for message previews |
-| `exceptionStyle` | `CometChatExceptionStyle?` | Style for exception views |
-
-### CometChatIncomingMessageBubbleStyle
-
-Includes all properties from `CometChatOutgoingMessageBubbleStyle` except `messageReceiptStyle`, `moderationStyle`, and `exceptionStyle`, plus:
-
-| Property | Type | Description |
-| --- | --- | --- |
-| `senderNameTextStyle` | `TextStyle?` | Text style for sender name |
-| `aiAssistantBubbleStyle` | `CometChatAIAssistantBubbleStyle?` | Style for AI assistant bubbles |
-
-### CometChatActionBubbleStyle
-
-| Property | Type | Description |
-| --- | --- | --- |
-| `backgroundColor` | `Color?` | Background color of action bubble |
-| `border` | `BoxBorder?` | Border of action bubble |
-| `textStyle` | `TextStyle?` | Text style for action message |
-
-### CometChatAiAssistantBubbleStyle
-
-| Property | Type | Description |
-| --- | --- | --- |
-| `backgroundColor` | `Color?` | Background color of AI assistant bubble |
-| `textColor` | `Color?` | Text color |
-| `textStyle` | `TextStyle?` | Text style for AI messages |
+
+
diff --git a/ui-kit/flutter/message-composer.mdx b/ui-kit/flutter/message-composer.mdx
index 873d355f8..16ec80645 100644
--- a/ui-kit/flutter/message-composer.mdx
+++ b/ui-kit/flutter/message-composer.mdx
@@ -1,128 +1,58 @@
---
title: "Message Composer"
-description: "A widget that enables users to write and send messages with attachments and reactions"
+description: "Configure CometChat Flutter UI Kit Message Composer for text, media, custom messages, live reactions, editing, rich text, and audio."
---
-
-```json
-{
- "component": "CometChatMessageComposer",
- "package": "cometchat_chat_uikit",
- "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
- "description": "A widget that enables users to write and send a variety of messages, including text, image, video, and custom messages. Features such as Live Reaction, Attachments, and Message Editing are also supported.",
- "primaryOutput": {
- "prop": "onSendButtonTap",
- "type": "Function(BuildContext, BaseMessage, PreviewMessageMode?)?"
- },
- "props": {
- "data": {
- "user": {
- "type": "User?",
- "default": "null",
- "note": "User object for the message composer (one of user or group is required)"
- },
- "group": {
- "type": "Group?",
- "default": "null",
- "note": "Group object for the message composer (one of user or group is required)"
- },
- "text": {
- "type": "String?",
- "default": "null",
- "note": "Initial text for the input field"
- },
- "parentMessageId": {
- "type": "int",
- "default": "0",
- "note": "ID of the parent message for threaded replies"
- }
- },
- "callbacks": {
- "onChange": "Function(String)?",
- "onSendButtonTap": "Function(BuildContext, BaseMessage, PreviewMessageMode?)?",
- "onError": "OnError?"
- },
- "visibility": {
- "hideVoiceRecordingButton": { "type": "bool?", "default": null },
- "hideSendButton": { "type": "bool?", "default": null },
- "hideAttachmentButton": { "type": "bool?", "default": null },
- "hideStickersButton": { "type": "bool?", "default": null },
- "disableMentions": { "type": "bool?", "default": null },
- "disableTypingEvents": { "type": "bool", "default": false }
- },
- "sound": {
- "disableSoundForMessages": { "type": "bool", "default": false },
- "customSoundForMessage": { "type": "String?", "default": null }
- },
- "viewSlots": {
- "auxiliaryButtonView": "ComposerWidgetBuilder?",
- "secondaryButtonView": "ComposerWidgetBuilder?",
- "sendButtonView": "Widget?",
- "headerView": "ComposerWidgetBuilder?",
- "footerView": "ComposerWidgetBuilder?"
- },
- "formatting": {
- "placeholderText": { "type": "String?", "default": null },
- "maxLine": { "type": "int?", "default": null },
- "padding": { "type": "EdgeInsetsGeometry?", "default": null }
- }
- },
- "events": [],
- "sdkListeners": [],
- "compositionExample": {
- "description": "CometChatMessageComposer is typically used at the bottom of a messaging screen, paired with CometChatMessageHeader and CometChatMessageList",
- "components": ["CometChatMessageHeader", "CometChatMessageList", "CometChatMessages"],
- "flow": "User types message → Composer sends message → MessageList updates"
- },
- "types": {
- "CometChatMessageComposerStyle": {
- "backgroundColor": "Color?",
- "border": "BoxBorder?",
- "borderRadius": "BorderRadiusGeometry?",
- "sendButtonIconColor": "Color?",
- "sendButtonIconBackgroundColor": "Color?",
- "textStyle": "TextStyle?",
- "placeHolderTextStyle": "TextStyle?"
- }
- }
-}
-```
-
+## Overview
-## Where It Fits
+`CometChatMessageComposer` is a [Widget](/ui-kit/flutter/components-overview#widget) that enables users to write and send a variety of messages, including text, image, video, and custom messages.
-`CometChatMessageComposer` is a [Widget](/ui-kit/flutter/components-overview#components) that enables users to write and send a variety of messages, including text, image, video, and custom messages.
+Features such as **Live Reaction**, **Attachments**, **Message Editing**, **Rich Text Formatting**, **Code Blocks**, and **Inline Audio Recording** are supported.
-Features such as **Live Reaction**, **Attachments**, and **Message Editing** are also supported by it.
+`CometChatMessageComposer` is comprised of the following Base Widgets:
-
-
-
+| Base Widgets | Description |
+|---|---|
+| MessageInput | Provides a basic layout for the contents, such as the TextField and buttons |
+| ActionSheet | Presents a list of options in either a list or grid mode |
-`CometChatMessageComposer` is comprised of the following [Base Widgets](/ui-kit/flutter/components-overview#base-components):
+In V6, the composer is powered by `MessageComposerBloc` and decomposed into focused sub-widgets.
-| Base Widgets | Description |
-| ------------ | ----------- |
-| [MessageInput](/ui-kit/flutter/message-composer) | This provides a basic layout for the contents of this component, such as the TextField and buttons |
-| [ActionSheet](/ui-kit/flutter/components-overview) | The ActionSheet widget presents a list of options in either a list or grid mode |
+## Usage
+
+### Integration
+
+##### 1. Using Navigator to Launch `CometChatMessageComposer`
+
+
+
+```dart
+Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatMessageComposer(user: user)));
+```
+
+
+
+##### 2. Embedding `CometChatMessageComposer` as a Widget in the build Method
```dart
import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:flutter/material.dart';
-// CometChatMessageComposer is typically used at the bottom of a messaging screen
-class MessagingScreen extends StatelessWidget {
- final User user;
-
- const MessagingScreen({required this.user});
+class MessageComposerScreen extends StatefulWidget {
+ const MessageComposerScreen({super.key});
+ @override
+ State createState() => _MessageComposerScreenState();
+}
+
+class _MessageComposerScreenState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
- CometChatMessageHeader(user: user),
Expanded(child: CometChatMessageList(user: user)),
CometChatMessageComposer(user: user),
],
@@ -134,53 +64,57 @@ class MessagingScreen extends StatelessWidget {
-## Minimal Render
+***
+
+### Actions
+
+##### 1. OnSendButtonClick
-The simplest way to render `CometChatMessageComposer`:
+The `OnSendButtonClick` event gets activated when the send message button is clicked.
```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
-// For a user conversation
CometChatMessageComposer(
user: user,
-)
-
-// For a group conversation
-CometChatMessageComposer(
- group: group,
+ onSendButtonTap: (BuildContext context, BaseMessage baseMessage, PreviewMessageMode? previewMessageMode) {
+ // Handle send
+ },
)
```
+***
-## Actions and Events
-
-### Callback Props
-
-Component-level callbacks that fire on specific user interactions:
+##### 2. onChange
-| Callback | Signature | Fires When |
-|----------|-----------|------------|
-| `onSendButtonTap` | `Function(BuildContext, BaseMessage, PreviewMessageMode?)?` | User taps the send button |
-| `onChange` | `Function(String)?` | Text in the input field changes |
-| `onError` | `OnError?` | An error occurs |
-| `stateCallBack` | `Function(CometChatMessageComposerController)?` | Controller state callback for accessing controller functions |
+Handles changes in the value of text in the input field.
```dart
CometChatMessageComposer(
user: user,
- onSendButtonTap: (BuildContext context, BaseMessage baseMessage, PreviewMessageMode? previewMessageMode) {
- // Handle send button tap
- },
onChange: (String? text) {
// Handle text change
},
+)
+```
+
+
+
+***
+
+##### 3. onError
+
+Listens for any errors that occur.
+
+
+
+```dart
+CometChatMessageComposer(
+ user: user,
onError: (e) {
// Handle error
},
@@ -189,153 +123,189 @@ CometChatMessageComposer(
-## Custom View Slots
+***
+
+### Filters
+
+`CometChatMessageComposer` widget does not have any available filters.
+
+***
+
+### Events
+
+The `CometChatMessageComposer` Widget does not emit any events of its own.
-Customize the appearance of `CometChatMessageComposer` by replacing default views with your own widgets.
+***
-| Slot | Signature | Replaces |
-|------|-----------|----------|
-| `auxiliaryButtonView` | `ComposerWidgetBuilder?` | Auxiliary button area (AI, stickers) |
-| `secondaryButtonView` | `ComposerWidgetBuilder?` | Secondary button area (attachment, voice) |
-| `sendButtonView` | `Widget?` | Send button |
-| `headerView` | `ComposerWidgetBuilder?` | Header section above input |
-| `footerView` | `ComposerWidgetBuilder?` | Footer section below input |
-| `attachmentOptions` | `ComposerActionsBuilder?` | Attachment options list |
+## Customization
-### Example: Custom Auxiliary Button View
+### Style
+
+##### 1. CometChatMessageComposerStyle
```dart
CometChatMessageComposer(
user: user,
- auxiliaryButtonView: (context, user, group, id) {
- final existingAuxiliaryOptions = CometChatUIKit.getDataSource()
- .getAuxiliaryOptions(user, group, context, id, Color(0xFFA1A1A1));
- return Row(
- children: [
- existingAuxiliaryOptions,
- Icon(
- Icons.location_pin,
- color: Color(0xFF6852D6),
- ),
- ],
- );
- },
+ messageComposerStyle: CometChatMessageComposerStyle(
+ sendButtonIconBackgroundColor: Color(0xFFF76808),
+ secondaryButtonIconColor: Color(0xFFF76808),
+ auxiliaryButtonIconColor: Color(0xFFF76808),
+ ),
)
```
-
-
-
-
-### Example: Custom Secondary Button View
+##### 2. MediaRecorder Style
```dart
CometChatMessageComposer(
user: user,
- secondaryButtonView: (context, user, group, id) {
- return Icon(
- Icons.attach_file,
- color: Color(0xFF6852D6),
- );
- },
+ messageComposerStyle: CometChatMessageComposerStyle(
+ mediaRecorderStyle: CometChatMediaRecorderStyle(
+ recordIndicatorBackgroundColor: Color(0xFFF44649),
+ recordIndicatorBorderRadius: BorderRadius.circular(20),
+ ),
+ ),
)
```
-
-
-
+***
-### Example: Custom Send Button View
+### Functionality
```dart
CometChatMessageComposer(
user: user,
- sendButtonView: IconButton(
- onPressed: () {},
- padding: EdgeInsets.all(4),
- style: IconButton.styleFrom(
- alignment: Alignment.center,
- backgroundColor: Color(0xFFEDEAFA),
- shape: RoundedRectangleBorder(
- borderRadius: BorderRadius.circular(4),
- ),
- ),
- icon: Transform.rotate(
- angle: 150,
- child: Icon(
- Icons.send,
- size: 20,
- color: Color(0xFF6852D6),
+ placeholderText: "Type a message...",
+ disableMentions: true,
+)
+```
+
+
+
+## Message Composer Properties
+
+| Property | Data Type | Description |
+|---|---|---|
+| `user` | `User?` | Sets user for the message composer. |
+| `group` | `Group?` | Sets group for the message composer. |
+| `messageComposerStyle` | `CometChatMessageComposerStyle?` | Sets style for the message composer. |
+| `placeholderText` | `String?` | Hint text for the input field. |
+| `text` | `String?` | Initial text for the input field. |
+| `onChange` | `Function(String text)?` | Callback triggered when text changes. |
+| `textEditingController` | `TextEditingController?` | Controls the state of the text field. |
+| `maxLine` | `int?` | Maximum number of lines allowed. |
+| `disableMentions` | `bool?` | Disables mentions in the composer. |
+| `disableTypingEvents` | `bool` | Disables typing events. |
+| `disableSoundForMessages` | `bool` | Disables sound for sent messages. |
+| `parentMessageId` | `int` | ID of the parent message (default is 0). |
+| `sendButtonView` | `Widget?` | Custom send button widget. |
+| `attachmentIcon` | `Widget?` | Custom attachment icon. |
+| `voiceRecordingIcon` | `Widget?` | Custom voice recording icon. |
+| `auxiliaryButtonView` | `ComposerWidgetBuilder?` | UI component as auxiliary button. |
+| `secondaryButtonView` | `ComposerWidgetBuilder?` | UI component as secondary button. |
+| `hideVoiceRecordingButton` | `bool?` | Hide the voice recording button. |
+| `attachmentOptions` | `ComposerActionsBuilder?` | Provides options for file attachments. |
+| `hideAttachmentButton` | `bool?` | Hide/display attachment button. |
+| `hideImageAttachmentOption` | `bool?` | Hide/display image attachment option. |
+| `hideVideoAttachmentOption` | `bool?` | Hide/display video attachment option. |
+| `hideAudioAttachmentOption` | `bool?` | Hide/display audio attachment option. |
+| `hideFileAttachmentOption` | `bool?` | Hide/display file attachment option. |
+| `hidePollsOption` | `bool?` | Hide/display polls option. |
+| `onSendButtonTap` | `Function(BuildContext, BaseMessage, PreviewMessageMode?)?` | Callback when send button is tapped. |
+| `onError` | `OnError?` | Callback to handle errors. |
+| `hideSendButton` | `bool?` | Hide/display the send button. |
+| `hideStickersButton` | `bool?` | Hide/display the sticker button. |
+| `sendButtonIcon` | `Widget?` | Custom send button icon. |
+| `layout` | `CometChatComposerLayout` | Composer skeleton: `singleLine` (default) or `doubleLine`. See [Layout](#layout) below. |
+| `enableRichTextFormatting` | `bool` | Master switch for rich text (markdown detection, toolbar, WYSIWYG rendering). Default `true`. |
+| `showRichTextFormattingOptions` | `bool` | Whether the rich text toolbar UI is visible. Default `true`. |
+| `hideRichTextFormattingOptions` | `Set` | Set of format buttons to hide from the toolbar. Default `{}`. |
+| `richTextToolbarView` | `Widget Function(BuildContext, TextEditingController)?` | Custom rich text toolbar widget. |
+| `onRichTextFormatApplied` | `void Function(FormatType)?` | Callback fired when a toolbar format is applied. |
+| `hideBottomSafeArea` | `bool` | Hide bottom safe area padding (default: `false`). |
+| `resizeToAvoidBottomInset` | `bool` | Indicates the parent `Scaffold` uses its default `resizeToAvoidBottomInset: true` and will handle keyboard insets itself. Default `true`. Flip to `false` only if you opt into the composer's internal keyboard-aware spacing and set `resizeToAvoidBottomInset: false` on your Scaffold. |
+| `onKeyboardDiagnostics` | `CometChatKeyboardDiagnosticsCallback?` | Debug hook fired on every internal keyboard-state change. Leave `null` in production. |
+
+***
+
+### Advanced
+
+#### TextFormatters
+
+
+
+```dart
+CometChatMessageComposer(
+ user: user,
+ textFormatters: [
+ CometChatMentionsFormatter(
+ style: CometChatMentionsStyle(
+ mentionSelfTextBackgroundColor: Color(0xFFF76808),
+ mentionTextBackgroundColor: Colors.white,
+ mentionTextColor: Colors.black,
+ mentionSelfTextColor: Colors.white,
),
),
- ),
+ ],
)
```
-
-
-
+***
-### Example: Custom Header View
+#### AttachmentOptions
```dart
CometChatMessageComposer(
user: user,
- headerView: (context, user, group, id) {
- return Container(
- margin: EdgeInsets.only(bottom: 2, left: 8, right: 8),
- padding: EdgeInsets.all(8),
- decoration: BoxDecoration(
- color: Color(0xFFEDEAFA),
- borderRadius: BorderRadius.circular(8),
- ),
- child: Row(
- children: [
- Icon(Icons.volume_off, size: 20, color: Color(0xFF6852D6)),
- Text(
- "User has paused their notifications",
- style: TextStyle(fontSize: 14, fontWeight: FontWeight.w400),
- ),
- ],
+ attachmentOptions: (context, user, group, id) {
+ return [
+ CometChatMessageComposerAction(
+ id: "Custom Option",
+ title: "Custom Option",
+ icon: Icon(Icons.add_box, color: Colors.black),
),
- );
+ ];
},
)
```
-
-
-
+***
+
+#### AuxiliaryButton Widget
-### Example: Custom Footer View
+You can customize the auxiliary button area (mic, sticker, etc.) using the `auxiliaryButtonView` parameter:
```dart
CometChatMessageComposer(
user: user,
- footerView: (context, user, group, id) {
- return Container(
- width: MediaQuery.of(context).size.width / 1.08,
- color: Colors.yellow,
- padding: const EdgeInsets.all(8),
- child: const Center(child: Text("Your Footer Widget")),
+ auxiliaryButtonView: (context, user, group, id) {
+ return Row(
+ children: [
+ IconButton(
+ icon: Icon(Icons.location_pin, color: Color(0xFF6852D6)),
+ onPressed: () {
+ // Handle location sharing
+ },
+ ),
+ ],
);
},
)
@@ -343,246 +313,182 @@ CometChatMessageComposer(
-
-
-
-
-
-
-
-
+***
+
+## Layout
+
+The composer skeleton supports two layouts via the `layout` prop:
-### Example: Custom Attachment Options
+| Value | Description |
+| --- | --- |
+| `CometChatComposerLayout.singleLine` | **Default.** Text field and all buttons share a single row. |
+| `CometChatComposerLayout.doubleLine` | Classic v5 look — text field on its own row, buttons on a second row below a divider. |
+
+All existing props (hide flags, view slots, style, mentions, rich text, voice recording, reply/edit preview, AI options) work identically in both layouts.
```dart
CometChatMessageComposer(
user: user,
- attachmentOptions: (context, user, group, id) {
- return [
- CometChatMessageComposerAction(
- id: "Custom Option 1",
- title: "Custom Option 1",
- icon: Icon(Icons.play_circle, color: Colors.black),
- ),
- CometChatMessageComposerAction(
- id: "Custom Option 2",
- title: "Custom Option 2",
- icon: Icon(Icons.add_box, color: Colors.black),
- ),
- ];
- },
+ layout: CometChatComposerLayout.doubleLine,
)
```
-
-
-
-
-
-## Styling
-
-Customize the appearance of `CometChatMessageComposer` using `CometChatMessageComposerStyle`.
-
-### Style Properties
-
-| Property | Type | Description |
-|----------|------|-------------|
-| `backgroundColor` | `Color?` | Background color of the message composer |
-| `border` | `BoxBorder?` | Border of the message composer |
-| `borderRadius` | `BorderRadiusGeometry?` | Border radius of the message composer |
-| `closeIconTint` | `Color?` | Color for the close icon |
-| `dividerColor` | `Color?` | Color of the divider |
-| `dividerHeight` | `double?` | Height of the divider |
-| `sendButtonIconColor` | `Color?` | Color of the send button icon |
-| `sendButtonIconBackgroundColor` | `Color?` | Background color of the send button |
-| `sendButtonBorderRadius` | `BorderRadiusGeometry?` | Border radius of the send button |
-| `secondaryButtonIconColor` | `Color?` | Color of the secondary button icon |
-| `secondaryButtonIconBackgroundColor` | `Color?` | Background color of the secondary button |
-| `secondaryButtonBorderRadius` | `BorderRadiusGeometry?` | Border radius of the secondary button |
-| `auxiliaryButtonIconColor` | `Color?` | Color of the auxiliary button icon |
-| `auxiliaryButtonIconBackgroundColor` | `Color?` | Background color of the auxiliary button |
-| `auxiliaryButtonBorderRadius` | `BorderRadiusGeometry?` | Border radius of the auxiliary button |
-| `textStyle` | `TextStyle?` | Style of the text |
-| `textColor` | `Color?` | Color of the text |
-| `placeHolderTextStyle` | `TextStyle?` | Style of the placeholder text |
-| `placeHolderTextColor` | `Color?` | Color of the placeholder text |
-| `filledColor` | `Color?` | Background color of the text input |
-| `mentionsStyle` | `CometChatMentionsStyle?` | Style for mentions |
-| `mediaRecorderStyle` | `CometChatMediaRecorderStyle?` | Style for media recorder |
-| `aiOptionStyle` | `AIOptionsStyle?` | Style for AI options |
-| `aiOptionSheetStyle` | `CometChatAiOptionSheetStyle?` | Style for AI option sheet |
-| `attachmentOptionSheetStyle` | `CometChatAttachmentOptionSheetStyle?` | Style for attachment option sheet |
-| `suggestionListStyle` | `CometChatSuggestionListStyle?` | Style for suggestion list |
-| `messagePreviewStyle` | `CometChatMessagePreviewStyle?` | Style for message preview |
-
-### Example: Custom Styling
+***
+
+## Rich Text Formatting
+
+The composer ships with a WYSIWYG rich-text toolbar that parses Markdown as the user types and renders formatted spans in place. Configuration is done with three flat props.
+
+### Enable with defaults
+
+Rich text is on by default — no props required.
+
+
+
+```dart
+CometChatMessageComposer(user: user)
+```
+
+
+
+### Show or hide the toolbar UI
+
+`showRichTextFormattingOptions` controls toolbar visibility. When `false`, markdown is still parsed in typed text but no toolbar is rendered.
+
+| Layout | Toolbar placement |
+| --- | --- |
+| `singleLine` | Persistent row directly below the text input |
+| `doubleLine` | Behind an `Aa` toggle in the button row — tapping swaps in the toolbar |
```dart
CometChatMessageComposer(
user: user,
- messageComposerStyle: CometChatMessageComposerStyle(
- sendButtonIconBackgroundColor: Color(0xFFF76808),
- secondaryButtonIconColor: Color(0xFFF76808),
- auxiliaryButtonIconColor: Color(0xFFF76808),
- ),
+ showRichTextFormattingOptions: false, // parses markdown, no toolbar
)
```
-
-
-
+### Hide specific format buttons
-### Example: Custom Media Recorder Style
+Pass a `Set` listing the buttons to remove from the toolbar.
```dart
CometChatMessageComposer(
user: user,
- messageComposerStyle: CometChatMessageComposerStyle(
- mediaRecorderStyle: CometChatMediaRecorderStyle(
- recordIndicatorBackgroundColor: Color(0xFFF44649),
- recordIndicatorBorderRadius: BorderRadius.circular(20),
- pauseButtonBorderRadius: BorderRadius.circular(8),
- deleteButtonBorderRadius: BorderRadius.circular(8),
- stopButtonBorderRadius: BorderRadius.circular(8),
- ),
- ),
+ hideRichTextFormattingOptions: const {
+ FormatType.strikethrough,
+ FormatType.codeBlock,
+ FormatType.blockquote,
+ },
)
```
-
-
-
+### Disable rich text entirely
-### Example: Custom AI Options Style
+Set `enableRichTextFormatting: false` to behave as a plain text field — no markdown parsing, no toolbar, regardless of the other two props.
```dart
CometChatMessageComposer(
user: user,
- messageComposerStyle: CometChatMessageComposerStyle(
- aiOptionStyle: AIOptionsStyle(
- backgroundColor: Color(0xFFE4EBF5),
- border: Border.all(width: 3, color: Colors.red),
- ),
- ),
+ enableRichTextFormatting: false,
)
```
-## Advanced
+### FormatType values
+
+| Value | Markdown |
+| --- | --- |
+| `FormatType.bold` | `**text**` |
+| `FormatType.italic` | `_text_` or `*text*` |
+| `FormatType.underline` | `text` |
+| `FormatType.strikethrough` | `~~text~~` |
+| `FormatType.inlineCode` | `` `code` `` |
+| `FormatType.codeBlock` | ` ```code``` ` |
+| `FormatType.link` | `[text](url)` |
+| `FormatType.bulletList` | `- item` |
+| `FormatType.orderedList` | `1. item` |
+| `FormatType.blockquote` | `> quote` |
-### Text Formatters
+### Custom toolbar view
-Assigns the list of text formatters. To configure the existing Mentions look and feel check out [CometChatMentionsFormatter](/ui-kit/flutter/mentions-formatter-guide).
+`richTextToolbarView` receives the active controller. Because the controller is a `RichTextEditingController` under the hood, apply formats directly via `applyFormat`.
```dart
CometChatMessageComposer(
user: user,
- textFormatters: [
- CometChatMentionsFormatter(
- style: CometChatMentionsStyle(
- mentionSelfTextBackgroundColor: Color(0xFFF76808),
- mentionTextBackgroundColor: Colors.white,
- mentionTextColor: Colors.black,
- mentionSelfTextColor: Colors.white,
- ),
- ),
- ],
+ richTextToolbarView: (context, controller) {
+ return Row(
+ children: [
+ IconButton(
+ icon: const Icon(Icons.format_bold),
+ onPressed: () {
+ (controller as RichTextEditingController).applyFormat(FormatType.bold);
+ },
+ ),
+ IconButton(
+ icon: const Icon(Icons.format_italic),
+ onPressed: () {
+ (controller as RichTextEditingController).applyFormat(FormatType.italic);
+ },
+ ),
+ ],
+ );
+ },
+ onRichTextFormatApplied: (formatType) {
+ debugPrint('Applied ${formatType.name}');
+ },
)
```
-
-
-
-
-## Props Reference
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `user` | `User?` | `null` | User object for the message composer |
-| `group` | `Group?` | `null` | Group object for the message composer |
-| `messageComposerStyle` | `CometChatMessageComposerStyle?` | - | Sets style for the message composer |
-| `placeholderText` | `String?` | - | Hint text for the input field |
-| `text` | `String?` | - | Initial text for the input field |
-| `onChange` | `Function(String)?` | - | Callback triggered when text changes |
-| `textEditingController` | `TextEditingController?` | - | Controls the state of the text field |
-| `maxLine` | `int?` | - | Maximum number of lines allowed |
-| `disableMentions` | `bool?` | `null` | Disables mentions in the composer |
-| `disableTypingEvents` | `bool` | `false` | Disables typing events |
-| `disableSoundForMessages` | `bool` | `false` | Disables sound for sent messages |
-| `customSoundForMessage` | `String?` | - | URL for custom sound |
-| `customSoundForMessagePackage` | `String?` | - | Package name for custom sound asset |
-| `parentMessageId` | `int` | `0` | ID of the parent message |
-| `padding` | `EdgeInsetsGeometry?` | - | Sets padding for the message composer |
-| `messageInputPadding` | `EdgeInsetsGeometry?` | - | Sets padding for the message input field |
-| `sendButtonView` | `Widget?` | - | Custom send button widget |
-| `attachmentIcon` | `Widget?` | - | Custom attachment icon |
-| `attachmentIconURL` | `String?` | - | Path of the icon to show in the attachments button |
-| `voiceRecordingIcon` | `Widget?` | - | Custom voice recording icon |
-| `aiIcon` | `Widget?` | - | Custom AI button icon |
-| `aiIconURL` | `String?` | - | Path of the icon to show in the AI button |
-| `aiIconPackageName` | `String?` | - | Package name for AI icon asset |
-| `auxiliaryButtonView` | `ComposerWidgetBuilder?` | - | UI component for auxiliary button |
-| `secondaryButtonView` | `ComposerWidgetBuilder?` | - | UI component for secondary button |
-| `auxiliaryButtonsAlignment` | `AuxiliaryButtonsAlignment?` | - | Controls position of auxiliary button view |
-| `hideVoiceRecordingButton` | `bool?` | `null` | Hide/display voice recording button |
-| `attachmentOptions` | `ComposerActionsBuilder?` | - | Provides options for file attachments |
-| `hideAttachmentButton` | `bool?` | `null` | Hide/display attachment button |
-| `hideImageAttachmentOption` | `bool?` | `null` | Hide/display image attachment option |
-| `hideVideoAttachmentOption` | `bool?` | `null` | Hide/display video attachment option |
-| `hideAudioAttachmentOption` | `bool?` | `null` | Hide/display audio attachment option |
-| `hideFileAttachmentOption` | `bool?` | `null` | Hide/display file attachment option |
-| `hidePollsOption` | `bool?` | `null` | Hide/display polls option |
-| `hideCollaborativeDocumentOption` | `bool?` | `null` | Hide/display collaborative document option |
-| `hideCollaborativeWhiteboardOption` | `bool?` | `null` | Hide/display collaborative whiteboard option |
-| `hideTakePhotoOption` | `bool?` | `null` | Hide/display take photo option |
-| `onSendButtonTap` | `Function(...)?` | - | Callback when send button is tapped |
-| `onError` | `OnError?` | - | Callback to handle errors |
-| `hideSendButton` | `bool?` | `null` | Hide/display the send button |
-| `hideStickersButton` | `bool?` | `null` | Hide/display the sticker button |
-| `sendButtonIcon` | `Widget?` | - | Custom send button icon |
-| `recorderStartButtonIcon` | `Widget?` | - | Custom icon for media recorder start button |
-| `recorderPauseButtonIcon` | `Widget?` | - | Custom icon for media recorder pause button |
-| `recorderDeleteButtonIcon` | `Widget?` | - | Custom icon for media recorder delete button |
-| `recorderStopButtonIcon` | `Widget?` | - | Custom icon for media recorder stop button |
-| `recorderSendButtonIcon` | `Widget?` | - | Custom icon for media recorder send button |
-| `disableMentionAll` | `bool` | `false` | Disables @all mentions in groups |
-| `mentionAllLabel` | `String?` | - | Custom label for group mentions |
-| `mentionAllLabelId` | `String?` | - | Custom label ID for group mentions |
-| `headerView` | `ComposerWidgetBuilder?` | - | Custom header view |
-| `footerView` | `ComposerWidgetBuilder?` | - | Custom footer view |
-| `textFormatters` | `List?` | - | List of text formatters |
-| `stateCallBack` | `Function(CometChatMessageComposerController)?` | - | Callback to access controller functions |
-
-
-
- Display user or group details in the header
-
-
- Display messages in a conversation
-
-
- Configure mentions look and feel
-
-
- Learn how to customize the look and feel
-
-
+***
+
+## V6 Architecture
+
+### Sub-Widget Decomposition
+
+| Widget | Purpose |
+|---|---|
+| `AttachmentOptionsOverlay` | Attachment picker overlay |
+| `MessageComposerAuxiliaryButtons` | Auxiliary button area |
+| `MessageComposerSecondaryButtons` | Secondary button area |
+| `MessageComposerSendButton` | Send button |
+| `MessageComposerSuggestionList` | Suggestion/mention list |
+| `ComposerAttachmentUtils` | Attachment utilities |
+
+### BLoC Architecture
+
+| Component | Description |
+|---|---|
+| `MessageComposerBloc` | Manages composer state |
+| `MessageComposerEvent` | Events: `SendTextMessage`, `SendMediaMessage`, `EditTextMessage`, `StartTyping`, `EndTyping`, etc. |
+| `MessageComposerState` | Composer state |
+
+### Use Cases
+
+| Use Case | Description |
+|---|---|
+| `SendTextMessageUseCase` | Sends text messages |
+| `SendMediaMessageUseCase` | Sends media messages |
+| `SendCustomMessageUseCase` | Sends custom messages |
+| `EditMessageUseCase` | Edits messages |
+| `TypingUseCases` | Start/end typing indicators |
+| `GetLoggedInUserUseCase` | Gets the logged-in user |
diff --git a/ui-kit/flutter/message-header.mdx b/ui-kit/flutter/message-header.mdx
index c2d9ded67..f723cfbb7 100644
--- a/ui-kit/flutter/message-header.mdx
+++ b/ui-kit/flutter/message-header.mdx
@@ -1,109 +1,39 @@
---
title: "Message Header"
-description: "Widget that showcases the User or Group details in the toolbar with typing indicator and back navigation button."
+description: "Configure CometChat Flutter UI Kit Message Header with user or group details, presence, typing indicators, navigation, and actions."
---
-
-```json
-{
- "component": "CometChatMessageHeader",
- "package": "cometchat_chat_uikit",
- "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
- "description": "Widget that showcases the User or Group details in the toolbar with typing indicator and back navigation button.",
- "props": {
- "data": {
- "user": { "type": "User?", "default": "null" },
- "group": { "type": "Group?", "default": "null" }
- },
- "callbacks": {
- "onBack": "VoidCallback?",
- "newChatButtonClick": "VoidCallback?",
- "chatHistoryButtonClick": "VoidCallback?"
- },
- "visibility": {
- "showBackButton": { "type": "bool?", "default": "true" },
- "hideVideoCallButton": { "type": "bool?", "default": "false" },
- "hideVoiceCallButton": { "type": "bool?", "default": "false" },
- "usersStatusVisibility": { "type": "bool?", "default": "true" },
- "hideNewChatButton": { "type": "bool?", "default": "false" },
- "hideChatHistoryButton": { "type": "bool?", "default": "false" }
- },
- "viewSlots": {
- "backButton": "WidgetBuilder?",
- "subtitleView": "Widget? Function(Group? group, User? user, BuildContext context)?",
- "listItemView": "Widget Function(Group? group, User? user, BuildContext context)?",
- "trailingView": "List? Function(User? user, Group? group, BuildContext context)?",
- "leadingStateView": "Widget? Function(Group? group, User? user, BuildContext context)?",
- "titleView": "Widget? Function(Group? group, User? user, BuildContext context)?",
- "auxiliaryButtonView": "Widget? Function(Group? group, User? user, BuildContext context)?"
- },
- "style": {
- "messageHeaderStyle": "CometChatMessageHeaderStyle?",
- "listItemStyle": "ListItemStyle?"
- },
- "layout": {
- "avatarHeight": { "type": "double?", "default": "null" },
- "avatarWidth": { "type": "double?", "default": "null" },
- "height": { "type": "double?", "default": "65" },
- "padding": { "type": "EdgeInsetsGeometry?", "default": "null" }
- },
- "icons": {
- "menuIcon": "Widget?",
- "newChatIcon": "IconData?",
- "chatHistoryIcon": "IconData?"
- },
- "formatting": {
- "dateTimeFormatterCallback": "DateTimeFormatterCallback?"
- }
- },
- "sdkListeners": [
- "onUserOnline",
- "onUserOffline",
- "onTypingStarted",
- "onTypingEnded",
- "onGroupMemberJoined",
- "onGroupMemberLeft",
- "onGroupMemberKicked",
- "onGroupMemberBanned",
- "onMemberAddedToGroup"
- ]
-}
-```
-
-
-## Overview
-`CometChatMessageHeader` is a [Widget](/ui-kit/flutter/components-overview#components) that showcases the [User](/sdk/flutter/users-overview) or [Group](/sdk/flutter/groups-overview) details in the toolbar. Furthermore, it also presents a typing indicator and a back navigation button for ease of use.
+`CometChatMessageHeader` renders the header of a chat conversation showing user/group avatar, name, online/offline status, typing indicators, back navigation, and action buttons (call buttons, menu).
-The `CometChatMessageHeader` is comprised of the following components:
-
-| Components | Description |
-| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| [ListItem Widget](/ui-kit/flutter/components-overview) | This component’s widget consists of avatar, status indicator , title, and subtitle. The fields are then mapped with the SDK’s user, group class. |
-| Back Button | BackButton that allows users to navigate back from the current activity or screen to the previous one |
-
-## Usage
-
-### Integration
+---
-You can launch `CometChatMessageHeader` directly using `Navigator.push`, or you can define it as a widget within the `build` method of your `State` class.
+## Where It Fits
-##### 1. Using Navigator to Launch `CometChatMessageHeader`
+`CometChatMessageHeader` is a toolbar component. It sits at the top of a chat screen above `CometChatMessageList` and `CometChatMessageComposer`. It automatically shows typing indicators and user presence in real-time.
```dart
-Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatMessageHeader())); // A user or group object is required to launch this widget.
+Scaffold(
+ body: Column(
+ children: [
+ CometChatMessageHeader(user: user),
+ Expanded(child: CometChatMessageList(user: user)),
+ CometChatMessageComposer(user: user),
+ ],
+ ),
+)
```
-
-
-##### 2. Embedding `CometChatMessageHeader` as a Widget in the build Method
+---
+
+## Quick Start
@@ -111,39 +41,51 @@ Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatMessage
import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
import 'package:flutter/material.dart';
-class MessageHeader extends StatefulWidget {
- const MessageHeader({super.key});
-
- @override
- State createState() => _MessageHeaderState();
-}
-
-class _MessageHeaderState extends State {
+class ChatScreen extends StatelessWidget {
+ final User user;
+ const ChatScreen({super.key, required this.user});
@override
Widget build(BuildContext context) {
return Scaffold(
- body: SafeArea(
- child: CometChatMessageHeader() // A user or group object is required to launch this widget.
- )
+ appBar: PreferredSize(
+ preferredSize: const Size.fromHeight(60),
+ child: CometChatMessageHeader(user: user),
+ ),
+ body: Column(
+ children: [
+ Expanded(child: CometChatMessageList(user: user)),
+ CometChatMessageComposer(user: user),
+ ],
+ ),
);
}
}
```
-
+
+For group chats, pass a `Group` object instead:
+
+
+
+```dart
+CometChatMessageHeader(group: group)
+```
+
-***
+Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()`, a user logged in, and a valid `User` or `Group` object.
+
+---
-### Actions
+## Actions and Events
-[Actions](/ui-kit/flutter/components-overview#actions) dictate how a widget functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the widget to fit your specific needs.
+### Callback Methods
-##### 1. onBack
+#### `onBack`
-Enhance your application's functionality by leveraging the `onBack` feature. This capability allows you to customize the behavior associated with navigating back within your app. Utilize the provided code snippet to override default behaviors and tailor the user experience according to your specific requirements.
+Fires when the user presses the back button.
@@ -151,420 +93,272 @@ Enhance your application's functionality by leveraging the `onBack` feature. Thi
CometChatMessageHeader(
user: user,
onBack: () {
- // TODO("Not yet implemented")
+ Navigator.pop(context);
},
)
```
-
-
-***
-
-### Filters
-
-**Filters** allow you to customize the data displayed in a list within a `Widget`. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using `RequestBuilders` of Chat SDK.
+#### `onError`
-The `CometChatMessageHeader` widget does not have any exposed filters.
-
-***
-
-## Customization
-
-To fit your app's design requirements, you can customize the appearance of the conversation widget. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.
-
-## Style
-
-To customize the appearance, you can assign a `CometChatMessageHeaderStyle` object to the `CometChatMessageHeader` widget.
+Fires on internal errors.
```dart
CometChatMessageHeader(
user: user,
- messageHeaderStyle: CometChatMessageHeaderStyle(
- avatarStyle: CometChatAvatarStyle(
- backgroundColor: Color(0xFFFBAA75),
- borderRadius: BorderRadius.circular(6.67),
- ),
- callButtonsStyle: CometChatCallButtonsStyle(
- voiceCallIconColor: Color(0xFFF76808),
- videoCallIconColor: Color(0xFFF76808),
- ),
- )
+ onError: (e) {
+ debugPrint("Error: ${e.message}");
+ },
)
```
-
-
-
-
-
+### SDK Events (Real-Time, Automatic)
-### CometChatMessageHeaderStyle Properties
-
-| Property | Data Type | Description |
-| ------------------------------------- | -------------------------------- | -------------------------------------------------------- |
-| `backgroundColor` | `Color?` | Background color for the message header. |
-| `border` | `BoxBorder?` | Border for the message header. |
-| `borderRadius` | `BorderRadiusGeometry?` | Border radius for the message header. |
-| `titleTextStyle` | `TextStyle?` | Text style for the title. |
-| `titleTextColor` | `Color?` | Color for the title text. |
-| `subtitleTextStyle` | `TextStyle?` | Text style for the subtitle. |
-| `subtitleTextColor` | `Color?` | Color for the subtitle text. |
-| `typingIndicatorTextStyle` | `TextStyle?` | Text style for the typing indicator. |
-| `onlineStatusColor` | `Color?` | Color for the online status indicator. |
-| `backIconColor` | `Color?` | Color for the back icon. |
-| `backIcon` | `Widget?` | Custom back icon widget. |
-| `privateGroupBadgeIcon` | `Widget?` | Icon for private group badge. |
-| `passwordProtectedGroupBadgeIcon` | `Widget?` | Icon for password protected group badge. |
-| `privateGroupBadgeIconColor` | `Color?` | Color for private group badge icon. |
-| `passwordProtectedGroupBadgeIconColor`| `Color?` | Color for password protected group badge icon. |
-| `groupIconBackgroundColor` | `Color?` | Background color for group icon. |
-| `avatarStyle` | `CometChatAvatarStyle?` | Style for the avatar. |
-| `callButtonsStyle` | `CometChatCallButtonsStyle?` | Style for call buttons. |
-| `statusIndicatorStyle` | `CometChatStatusIndicatorStyle?` | Style for status indicator. |
-| `newChatIconColor` | `Color?` | Color for the new chat icon. |
-| `chatHistoryIconColor` | `Color?` | Color for the chat history icon. |
-| `menuIconColor` | `Color?` | Color for the menu icon. |
-
-***
-
-### Functionality
-
-These are a set of small functional customizations that allow you to fine-tune the overall experience of the widget. With these, you can change text, set custom icons, and toggle the visibility of UI elements.
+The component listens to these SDK events internally. No manual setup needed.
-
-
-
+| SDK Listener | Internal behavior |
+|---|---|
+| `onUserOnline` / `onUserOffline` | Updates online/offline status and last seen |
+| `onTypingStarted` / `onTypingEnded` | Shows/hides typing indicator in subtitle |
+| `onGroupMemberJoined` / `onGroupMemberLeft` | Updates group member count |
+| `onGroupMemberKicked` / `onGroupMemberBanned` | Updates group member count |
+| `onMemberAddedToGroup` | Updates group member count |
+| `ccOwnershipChanged` | Updates group owner info |
+| `onUserBlocked` / `onUserUnblocked` | Updates user blocked state |
+| Connection reconnected | Refreshes user/group data |
-Here is a code snippet demonstrating how you can customize the functionality of the Message Header widget.
+---
-
-
-```dart
-CometChatMessageHeader(
- user: user,
- showBackButton: true,
- usersStatusVisibility: true,
-)
-```
+## Functionality
-
+| Property | Type | Default | Description |
+|---|---|---|---|
+| `user` | `User?` | `null` | User object for 1:1 chat header |
+| `group` | `Group?` | `null` | Group object for group chat header |
+| `showBackButton` | `bool?` | `true` | Toggle back button visibility |
+| `backButton` | `Widget?` | `null` | Custom back button widget |
+| `appBarOptions` | `List?` | `null` | Additional widgets in the app bar (e.g., call buttons, menu) |
+| `hideUserStatus` | `bool?` | `false` | Hide online/offline status for users |
+| `disableTypingIndicator` | `bool?` | `false` | Disable typing indicator display |
-
+---
+
+## Custom View Slots
+
+### Subtitle View
-## CometChatMessageHeader Properties
-
-Following is a list of customizations along with their corresponding code snippets:
-
-| Property | Data Type | Description |
-| --------------------- | ------------------------------------------------------------------------- | -------------------------------------------------------------- |
-| `backButton` | `WidgetBuilder?` | Used to set the back button widget. |
-| `subtitleView` | `Widget? Function(Group? group, User? user, BuildContext context)?` | To set subtitle view for the group or user. |
-| `user` | `User?` | Set `User` object, one is mandatory either `user` or `group`. |
-| `group` | `Group?` | Set `Group` object, one is mandatory either `user` or `group`. |
-| `listItemView` | `Widget Function(Group? group, User? user, BuildContext context)?` | Set custom view for list item. |
-| `messageHeaderStyle` | `CometChatMessageHeaderStyle?` | Set styling props for message header. |
-| `listItemStyle` | `ListItemStyle?` | Style for every list item. |
-| `trailingView` | `List? Function(User? user, Group? group, BuildContext context)?` | Set appbar options for the trailing view. |
-| `onBack` | `VoidCallback?` | Callback triggered on closing the screen. |
-| `avatarHeight` | `double?` | Set height for avatar. |
-| `avatarWidth` | `double?` | Set width for avatar. |
-| `height` | `double?` | Set height for message header. |
-| `padding` | `EdgeInsetsGeometry?` | Set padding for message header. |
-| `hideVideoCallButton` | `bool?` | Used to hide video call button. |
-| `hideVoiceCallButton` | `bool?` | Used to hide voice call button. |
-| `showBackButton` | `bool?` | Toggle visibility for back button. Defaults to `true`. |
-| `usersStatusVisibility` | `bool?` | Controls visibility of status indicator. Defaults to `true`. |
-| `options` | `List? Function(User? user, Group? group, BuildContext context)?` | Set menu options for the header. |
-| `menuIcon` | `Widget?` | Set custom menu icon widget. |
-| `leadingStateView` | `Widget? Function(Group? group, User? user, BuildContext context)?` | To set leading view for the message header. |
-| `titleView` | `Widget? Function(Group? group, User? user, BuildContext context)?` | To set the title view for the message header. |
-| `auxiliaryButtonView` | `Widget? Function(Group? group, User? user, BuildContext context)?` | To set auxiliary view for the message header. |
-| `dateTimeFormatterCallback` | `DateTimeFormatterCallback?` | Callback that can be used to format the date and time. |
-| `hideChatHistoryButton` | `bool?` | Hide chat history button. |
-| `hideNewChatButton` | `bool?` | Hide new chat button. |
-| `newChatButtonClick` | `VoidCallback?` | Callback triggered on new chat button click. |
-| `chatHistoryButtonClick` | `VoidCallback?` | Callback triggered on chat history button click. |
-| `newChatIcon` | `IconData?` | Provides new chat icon. |
-| `chatHistoryIcon` | `IconData?` | Provides chat history icon. |
-
-***
-
-### Advanced
-
-For advanced-level customization, you can set custom views to the widget. This lets you tailor each aspect of the widget to fit your exact needs and application aesthetics. You can create and define your own widget and then incorporate those into the widget.
-
-***
-
-#### auxiliaryButtonView
-
-Allows adding a custom button or additional action next to the title or trailing section.
-
-Use Cases:
-
-* Add a Call button (📞) for quick voice/video calls.
-* Include a Block/Report button for moderation.
-* Implement a Pin Chat feature.
+Replace the default subtitle (online status / typing indicator / member count).
```dart
CometChatMessageHeader(
- auxiliaryButtonView: (group, user, context) {
- // return auxiliary view
+ user: user,
+ subtitleView: (user, group) {
+ if (user != null) {
+ return Text(
+ user.status == "online" ? "Active now" : "Last seen recently",
+ style: TextStyle(color: Color(0xFF727272), fontSize: 12),
+ );
+ }
+ if (group != null) {
+ return Text(
+ "${group.membersCount} members",
+ style: TextStyle(color: Color(0xFF727272), fontSize: 12),
+ );
+ }
+ return null;
},
)
```
-
-
-***
-
-#### ListItemView
+### Leading View
-The `CometChatMessageHeader` widget consists of a `ListItemView`. You can customize the ListItem according to your requirements by using the `.setListItemView` method.
+Replace the avatar / left section.
```dart
CometChatMessageHeader(
user: user,
- listItemView: (Group? group, User? user, context) {
- return Placeholder(); // Replace this placeholder with your custom widget.
+ leadingView: (user, group) {
+ return CircleAvatar(
+ backgroundImage: NetworkImage(user?.avatar ?? ""),
+ child: user?.avatar == null ? Text(user?.name?[0] ?? "") : null,
+ );
},
)
```
-
-
-**Example**
+### Title View
-Here is the complete example for reference:
+Replace the name / title text.
-```dart main.dart
- CometChatMessageHeader(
- user: user,
- group: group,
- listItemView: (group, user, context) {
- return CometChatListItem(
- avatarURL: group != null ? group.icon : user?.avatar,
- avatarName: group != null ? group.name : user?.name,
- avatarStyle: CometChatAvatarStyle(
- borderRadius: BorderRadius.circular(6.67),
- backgroundColor: Color(0xFFAA9EE8)),
- title: group != null ? group.name : user?.name ?? "",
- subtitleView: Text(
- user != null
- ? (user.status == UserStatusConstants.online
- ? "Online"
- : "Offline")
- : "${group?.membersCount} members",
- style: TextStyle(
- color: Color(0xFF727272),
- fontSize: 14,
- fontWeight: FontWeight.w400,
- ),
- ),
- tailView: CometChatUIKit.getDataSource()
- .getAuxiliaryHeaderMenu(context, user, group, null),
- style: ListItemStyle(
- titleStyle: TextStyle(
- color: Color(0xFF141414),
- fontSize: 16,
- fontWeight: FontWeight.w500,
- ),
- ),
- );
- },
- ); // Replaced the placeholder with a custom widget.
+```dart
+CometChatMessageHeader(
+ user: user,
+ titleView: (user, group) {
+ return Text(
+ user?.name ?? group?.name ?? "",
+ style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
+ );
+ },
+)
```
-
-
-
-
-
-
-***
+### Trailing View
-#### leadingStateView
-
-Defines a custom leading view, typically used for the receiver's profile picture or avatar.
-
-Use Cases:
-
-* Display a circular profile picture with a status indicator.
-* Add a custom badge for special roles (Admin, Verified ✅).
+Replace the right section (call buttons, menu, etc.).
```dart
CometChatMessageHeader(
- leadingStateView: (group, user, context) {
- // return leading view
+ user: user,
+ trailingView: (user, group) {
+ return Row(
+ mainAxisSize: MainAxisSize.min,
+ children: [
+ IconButton(icon: Icon(Icons.call), onPressed: () {}),
+ IconButton(icon: Icon(Icons.videocam), onPressed: () {}),
+ IconButton(icon: Icon(Icons.info_outline), onPressed: () {}),
+ ],
+ );
},
)
```
-
-
-***
+---
-#### SubtitleView
+## Common Patterns
-You can customize the subtitle widget for each item to meet your specific preferences and needs.
+### Header with info button for groups
```dart
- CometChatMessageHeader(
- user: user,
- subtitleView: (group, user, context) {
- String subtitle;
- if (group != null) {
- subtitle = "${group.membersCount} . ${group.description}";
- } else {
- subtitle = user?.status ?? '';
- }
- return Text(
- subtitle,
- style: TextStyle(
- fontSize: 12,
- fontWeight: FontWeight.w400,
- color: Color(0XFF727272),
- ),
- );
+CometChatMessageHeader(
+ group: group,
+ trailingView: (user, group) {
+ return IconButton(
+ icon: Icon(Icons.info_outline),
+ onPressed: () {
+ Navigator.push(context, MaterialPageRoute(
+ builder: (context) => GroupInfoScreen(group: group!),
+ ));
},
- )
+ );
+ },
+)
```
-
-
-
-
-
-
-***
-
-#### trailingView
-
-You can set the Custom `trailingView` to the `CometChatMessageHeader` widget.
+### Hide back button (embedded in tab layout)
```dart
CometChatMessageHeader(
user: user,
- trailingView: (User? user, Group? group, BuildContext context) {
- return [
- IconButton(
- onPressed: () {},
- icon: Icon(
- Icons.info_outline,
- color: Color(0xFF141414),
- ),
- )
- ];
- },
+ showBackButton: false,
)
```
-
-
-***
+---
+
+## Advanced
-#### Options Menu
+### BLoC Access
-You can add custom menu options to the message header using the `options` property. These options appear in a popup menu when the menu icon is tapped.
+Provide a custom `MessageHeaderBloc`:
```dart
CometChatMessageHeader(
user: user,
- options: (User? user, Group? group, BuildContext context) {
- return [
- CometChatOption(
- id: "view_profile",
- title: "View Profile",
- icon: Icons.person,
- onClick: () {
- // Handle view profile action
- },
- ),
- CometChatOption(
- id: "block_user",
- title: "Block User",
- icon: Icons.block,
- onClick: () {
- // Handle block user action
- },
- ),
- ];
- },
+ messageHeaderBloc: CustomMessageHeaderBloc(),
)
```
-
-
-***
+### Public BLoC Methods
+
+| Method | Returns | Description |
+|---|---|---|
+| `getTypingNotifier()` | `ValueNotifier` | Typing indicator notifier for isolated rebuilds |
-#### BackIcon
+---
-You can customize the Back Icon according to your specific requirements by using the `.backButton` method.
+## Style
```dart
CometChatMessageHeader(
user: user,
- backButton: (context) {
- return IconButton(
- icon: Icon(Icons.add_alert_outlined, color: Color(0xFF6851D6)),
- onPressed: () {
- // Navigator.pop(context);
- },
- );
- },
+ messageHeaderStyle: CometChatMessageHeaderStyle(
+ backgroundColor: Colors.white,
+ avatarStyle: CometChatAvatarStyle(
+ borderRadius: BorderRadius.circular(8),
+ ),
+ statusIndicatorStyle: CometChatStatusIndicatorStyle(),
+ typingIndicatorStyle: CometChatTypingIndicatorStyle(),
+ ),
)
```
-
-
-
-
-
+
+
+
-
+### Style Properties
-
-
+| Property | Description |
+|---|---|
+| `backgroundColor` | Header background color |
+| `avatarStyle` | Avatar appearance |
+| `statusIndicatorStyle` | Online/offline indicator |
+| `typingIndicatorStyle` | Typing indicator text style |
-
+See [Component Styling](/ui-kit/flutter/component-styling) for the full reference.
-
+---
-***
+## Next Steps
+
+
+
+ Display messages in a conversation
+
+
+ Compose and send messages
+
+
+ Add voice and video call buttons
+
+
+ Detailed styling reference
+
+
diff --git a/ui-kit/flutter/message-list.mdx b/ui-kit/flutter/message-list.mdx
index 6940db894..762acc616 100644
--- a/ui-kit/flutter/message-list.mdx
+++ b/ui-kit/flutter/message-list.mdx
@@ -1,184 +1,70 @@
---
title: "Message List"
-description: "A composite widget that displays a list of messages with real-time operations"
+description: "Scrollable list of messages for a conversation with real-time updates, reactions, threaded replies, and message actions."
---
-
-```json
-{
- "component": "CometChatMessageList",
- "package": "cometchat_chat_uikit",
- "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
- "description": "A composite widget that displays a list of messages with real-time operations. Includes various message types such as Text Messages, Media Messages, Stickers, and more.",
- "primaryOutput": {
- "prop": "onThreadRepliesClick",
- "type": "void Function(BaseMessage, BuildContext, {CometChatMessageTemplate?})?"
- },
- "props": {
- "data": {
- "user": {
- "type": "User?",
- "default": "null",
- "note": "User object for user message list (one of user or group is required)"
- },
- "group": {
- "type": "Group?",
- "default": "null",
- "note": "Group object for group message list (one of user or group is required)"
- },
- "messagesRequestBuilder": {
- "type": "MessagesRequestBuilder?",
- "default": "null",
- "note": "Custom request builder for filtering messages"
- },
- "templates": {
- "type": "List?",
- "default": "null",
- "note": "Message templates for the list"
- }
- },
- "callbacks": {
- "onThreadRepliesClick": "void Function(BaseMessage, BuildContext, {CometChatMessageTemplate?})?",
- "onError": "OnError?",
- "onLoad": "OnLoad?",
- "onEmpty": "OnEmpty?",
- "onReactionClick": "Function(String?, BaseMessage)?",
- "onReactionLongPress": "Function(String?, BaseMessage)?",
- "onReactionListItemClick": "Function(String?, BaseMessage?)?"
- },
- "visibility": {
- "hideTimestamp": { "type": "bool?", "default": null },
- "avatarVisibility": { "type": "bool?", "default": true },
- "receiptsVisibility": { "type": "bool?", "default": true },
- "disableReactions": { "type": "bool?", "default": false },
- "hideStickyDate": { "type": "bool?", "default": false },
- "hideReplyInThreadOption": { "type": "bool?", "default": false },
- "hideEditMessageOption": { "type": "bool?", "default": false },
- "hideDeleteMessageOption": { "type": "bool?", "default": false },
- "hideGroupActionMessages": { "type": "bool?", "default": false }
- },
- "sound": {
- "disableSoundForMessages": { "type": "bool?", "default": null },
- "customSoundForMessages": { "type": "String?", "default": null }
- },
- "viewSlots": {
- "loadingStateView": "WidgetBuilder?",
- "emptyStateView": "WidgetBuilder?",
- "errorStateView": "WidgetBuilder?",
- "headerView": "Widget? Function(BuildContext, {User?, Group?, int?})?",
- "footerView": "Widget? Function(BuildContext, {User?, Group?, int?})?"
- },
- "formatting": {
- "alignment": { "type": "ChatAlignment", "default": "ChatAlignment.standard" },
- "datePattern": { "type": "String Function(BaseMessage)?", "default": null },
- "dateSeparatorPattern": { "type": "String Function(DateTime)?", "default": null }
- }
- },
- "events": [],
- "sdkListeners": [
- "onMessageReceived",
- "onMessageEdited",
- "onMessageDeleted",
- "onTypingStarted",
- "onTypingEnded"
- ],
- "compositionExample": {
- "description": "CometChatMessageList is typically used within CometChatMessages, paired with CometChatMessageHeader and CometChatMessageComposer",
- "components": ["CometChatMessageHeader", "CometChatMessageComposer", "CometChatMessages"],
- "flow": "User/Group → MessageList displays messages → Real-time updates via SDK listeners"
- },
- "types": {
- "CometChatMessageListStyle": {
- "backgroundColor": "Color?",
- "border": "BoxBorder?",
- "borderRadius": "BorderRadiusGeometry?",
- "incomingMessageBubbleStyle": "CometChatIncomingMessageBubbleStyle?",
- "outgoingMessageBubbleStyle": "CometChatOutgoingMessageBubbleStyle?",
- "avatarStyle": "CometChatAvatarStyle?"
- }
- }
-}
-```
-
-
-## Where It Fits
+`CometChatMessageList` renders a scrollable list of messages for a conversation with real-time updates for new messages, edits, deletions, reactions, and threaded replies.
-`CometChatMessageList` is a [Composite Widget](/ui-kit/flutter/components-overview#composite-components) that displays a list of messages and effectively manages real-time operations. It includes various types of messages such as Text Messages, Media Messages, Stickers, and more.
+---
-`CometChatMessageList` is primarily a list of the base widget [MessageBubble](/ui-kit/flutter/message-bubble-styling). The MessageBubble Widget is utilized to create different types of chat bubbles depending on the message type.
+## Where It Fits
-
-
-
+`CometChatMessageList` is a message display component. It requires either a `User` or `Group` object to fetch and render messages. Wire it with `CometChatMessageHeader` and `CometChatMessageComposer` to build a complete messaging layout.
```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
-// CometChatMessageList is typically used within CometChatMessages
-// or as part of a custom messaging screen
-class MessagingScreen extends StatelessWidget {
- final User user;
-
- const MessagingScreen({required this.user});
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: Column(
- children: [
- CometChatMessageHeader(user: user),
- Expanded(child: CometChatMessageList(user: user)),
- CometChatMessageComposer(user: user),
- ],
- ),
- );
- }
-}
+CometChatMessageList(
+ user: user,
+)
```
-## Minimal Render
+---
+
+## Quick Start
-The simplest way to render `CometChatMessageList`:
+Using Navigator:
```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatMessageList(user: user)));
+```
+
+
-// For a user conversation
-CometChatMessageList(
- user: user,
-)
+Embedding as a widget:
-// For a group conversation
-CometChatMessageList(
- group: group,
-)
+
+
+```dart
+@override
+Widget build(BuildContext context) {
+ return Scaffold(
+ body: SafeArea(
+ child: CometChatMessageList(
+ user: user, // or group: group
+ ),
+ ),
+ );
+}
```
+Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()`, a user logged in, and the UI Kit dependency added.
+
-Simply adding the `MessageList` component to the layout will only display the loading indicator. To fetch messages for a specific entity, you need to supplement it with `User` or `Group` Object.
+Simply adding the `MessageList` component to the layout will only display the loading indicator. You must supply a `User` or `Group` object to fetch messages.
+---
-## Filtering CometChatMessageList
-
-Use the `messagesRequestBuilder` prop to filter which messages appear in the list.
-
-### Filter Recipes
+## Filtering
-| Recipe | Code |
-|--------|------|
-| Limit messages | `MessagesRequestBuilder()..limit = 30` |
-| Search messages | `MessagesRequestBuilder()..searchKeyword = "keyword"` |
-| Filter by type | `MessagesRequestBuilder()..types = ["text"]` |
-| Filter by category | `MessagesRequestBuilder()..categories = ["message"]` |
+Pass a `MessagesRequestBuilder` to control what loads:
@@ -187,7 +73,7 @@ CometChatMessageList(
user: user,
messagesRequestBuilder: MessagesRequestBuilder()
..uid = user.uid
- ..searchKeyword = "searchKeyword"
+ ..searchKeyword = "hello"
..limit = 30,
)
```
@@ -195,31 +81,18 @@ CometChatMessageList(
-The following parameters in messageRequestBuilder will always be altered inside the message list:
-1. UID
-2. GUID
-3. types
-4. categories
+The following parameters in `MessagesRequestBuilder` will always be altered inside the message list: UID, GUID, types, categories.
-For the full MessagesRequestBuilder API, see the [SDK documentation](/sdk/flutter/additional-message-filtering).
+---
## Actions and Events
-### Callback Props
+### Callback Methods
-Component-level callbacks that fire on specific user interactions:
+#### `onThreadRepliesClick`
-| Callback | Signature | Fires When |
-|----------|-----------|------------|
-| `onThreadRepliesClick` | `void Function(BaseMessage, BuildContext, {CometChatMessageTemplate?})?` | User clicks on thread indicator |
-| `onError` | `OnError?` | An error occurs while fetching messages |
-| `onLoad` | `OnLoad?` | List is successfully fetched and loaded |
-| `onEmpty` | `OnEmpty?` | List is empty |
-| `onReactionClick` | `Function(String?, BaseMessage)?` | User clicks on a reaction pill |
-| `onReactionLongPress` | `Function(String?, BaseMessage)?` | User long presses on a reaction pill |
-| `onReactionListItemClick` | `Function(String?, BaseMessage?)?` | User clicks on a reaction list item |
-| `addMoreReactionTap` | `Function(BaseMessage)?` | User clicks "Add More Reactions" button |
+Fires when a user taps a threaded message bubble.
@@ -227,138 +100,160 @@ Component-level callbacks that fire on specific user interactions:
CometChatMessageList(
user: user,
onThreadRepliesClick: (message, context, {template}) {
- // Handle thread replies click
- },
- onError: (e) {
- // Handle error
- },
- onLoad: (list) {
- print("Messages loaded: ${list.length}");
- },
- onEmpty: () {
- print("No messages");
- },
- onReactionClick: (emoji, message) {
- // Handle reaction click
+ // Navigate to thread view
},
)
```
-### SDK Events (Real-Time, Automatic)
+#### `onError`
-The component automatically handles these SDK listeners for real-time updates:
+Fires on internal errors.
-| SDK Listener | Handled Automatically |
-|--------------|----------------------|
-| `onMessageReceived` | Adds new message to the list |
-| `onMessageEdited` | Updates edited message in the list |
-| `onMessageDeleted` | Removes deleted message from the list |
-| `onTypingStarted` | Shows typing indicator |
-| `onTypingEnded` | Hides typing indicator |
+
+
+```dart
+CometChatMessageList(
+ user: user,
+ onError: (e) {
+ debugPrint("Error: ${e.message}");
+ },
+)
+```
+
+
-## Custom View Slots
+#### `onLoad`
-Customize the appearance of `CometChatMessageList` by replacing default views with your own widgets.
+Fires when the list is successfully fetched and loaded.
-| Slot | Signature | Replaces |
-|------|-----------|----------|
-| `loadingStateView` | `WidgetBuilder?` | Loading spinner |
-| `emptyStateView` | `WidgetBuilder?` | Empty state display |
-| `errorStateView` | `WidgetBuilder?` | Error state display |
-| `headerView` | `Widget? Function(BuildContext, {User?, Group?, int?})?` | Header section |
-| `footerView` | `Widget? Function(BuildContext, {User?, Group?, int?})?` | Footer section |
-| `emptyChatGreetingView` | `WidgetBuilder?` | Empty chat greeting for AI |
-| `newMessageIndicatorView` | `WidgetBuilder?` | New message indicator |
+
+
+```dart
+CometChatMessageList(
+ user: user,
+ onLoad: (messages) {
+ debugPrint("Loaded ${messages.length}");
+ },
+)
+```
+
+
+
+#### `onEmpty`
-### Example: Custom Header View
+Fires when the list is empty after loading.
```dart
CometChatMessageList(
user: user,
- headerView: (context, {group, parentMessageId, user}) {
- return Container(
- width: double.maxFinite,
- color: Color(0xFFEDEAFA),
- padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
- child: Row(
- children: [
- Icon(Icons.notes_outlined, color: Color(0xFF6852D6)),
- SizedBox(width: 8),
- Text('Notes', style: TextStyle(color: Color(0xFF6852D6))),
- ],
- ),
- );
+ onEmpty: () {
+ debugPrint("No messages");
},
)
```
-
-
-
+#### `onReactionClick`
-### Example: Custom Footer View
+Fires when a reaction pill is tapped.
```dart
CometChatMessageList(
user: user,
- footerView: (context, {group, parentMessageId, user}) {
- return Container(
- width: double.maxFinite,
- color: Color(0xFFEDEAFA),
- padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
- child: Row(
- children: [
- Icon(Icons.sunny, color: Color(0xFF6852D6)),
- SizedBox(width: 8),
- Text('Ice Breakers', style: TextStyle(color: Color(0xFF6852D6))),
- ],
- ),
- );
+ onReactionClick: (emoji, message) {
+ // Handle reaction click
},
)
```
-
-
-
+#### `onReactionLongPress`
-### Example: Custom Loading State View
+Fires when a reaction pill is long-pressed.
```dart
CometChatMessageList(
user: user,
- loadingStateView: (context) {
- return Center(
- child: CircularProgressIndicator(),
- );
+ onReactionLongPress: (emoji, message) {
+ // Handle reaction long press
},
)
```
-### Example: Custom Empty State View
+### SDK Events (Real-Time, Automatic)
+
+The component listens to SDK message events internally. No manual setup needed.
+
+| SDK Listener | Internal behavior |
+| --- | --- |
+| `onTextMessageReceived` / `onMediaMessageReceived` / `onCustomMessageReceived` | Inserts new message with animation |
+| `onMessageEdited` | Updates message in-place |
+| `onMessageDeleted` | Removes or marks message as deleted |
+| `onMessagesDelivered` / `onMessagesRead` | Updates receipt status via ValueNotifier |
+| `onTypingStarted` / `onTypingEnded` | Updates typing indicator |
+| `onMessageReactionAdded` / `onMessageReactionRemoved` | Updates reaction counts |
+| Connection reconnected | Triggers silent sync to fetch missed messages |
+
+---
+
+## Functionality
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `user` | `User?` | required* | User for 1-on-1 conversation |
+| `group` | `Group?` | required* | Group for group conversation |
+| `parentMessageId` | `int?` | `null` | Parent message ID for thread replies |
+| `alignment` | `ChatAlignment` | `standard` | Chat alignment setting |
+| `hideDeletedMessages` | `bool` | `false` | Hide deleted messages entirely |
+| `disableReceipts` | `bool` | `false` | Disable read/delivery receipts |
+| `disableSoundForMessages` | `bool` | `false` | Disable message sounds |
+| `hideReplies` | `bool` | `true` | Hide thread replies in main conversation |
+| `hideGroupActionMessages` | `bool?` | `false` | Hide group action messages |
+| `hideTimestamp` | `bool?` | `null` | Toggle timestamp visibility |
+| `hideDateSeparator` | `bool?` | `false` | Hide date separators |
+| `hideStickyDate` | `bool?` | `false` | Hide floating sticky date header |
+| `avatarVisibility` | `bool?` | `true` | Toggle avatar visibility |
+| `receiptsVisibility` | `bool?` | `true` | Toggle read receipts |
+| `disableReactions` | `bool?` | `false` | Toggle reactions |
+| `enableSwipeToReply` | `bool` | `true` | Enable swipe-to-reply gesture |
+| `startFromUnreadMessages` | `bool` | `false` | Scroll to first unread on open |
+| `showMarkAsUnreadOption` | `bool` | `false` | Show "Mark as Unread" in long-press options |
+| `goToMessageId` | `int?` | `null` | Scroll to a specific message after load |
+| `hideFlagOption` | `bool` | `false` | Hide the Flag/Report option from message long-press actions |
+| `hideFlagRemarkField` | `bool` | `false` | Hide the optional remark/context text field in the flag dialog |
+| `flagReasonLocalizer` | `String Function(String reasonId)?` | `null` | Custom localizer that converts a flag-reason ID into a display string |
+
+\* One of `user` or `group` is required.
+
+---
+
+## Custom View Slots
+
+### Header View
+
+Custom view displayed at the top of the message list.
```dart
CometChatMessageList(
user: user,
- emptyStateView: (context) {
- return Center(
- child: Text("No messages yet. Start the conversation!"),
+ headerView: (context, {user, group, parentMessageId}) {
+ return Container(
+ padding: EdgeInsets.all(8),
+ child: Text("Pinned Messages"),
);
},
)
@@ -366,27 +261,19 @@ CometChatMessageList(
-### Example: Custom Error State View
+### Footer View
+
+Custom view displayed at the bottom of the message list.
```dart
CometChatMessageList(
user: user,
- errorStateView: (context) {
- return Center(
- child: Column(
- mainAxisAlignment: MainAxisAlignment.center,
- children: [
- Text("Couldn't load messages"),
- ElevatedButton(
- onPressed: () {
- // Retry logic
- },
- child: Text("Retry"),
- ),
- ],
- ),
+ footerView: (context, {user, group, parentMessageId}) {
+ return Container(
+ padding: EdgeInsets.all(8),
+ child: Text("End of messages"),
);
},
)
@@ -394,107 +281,61 @@ CometChatMessageList(
-
-## Styling
-
-Customize the appearance of `CometChatMessageList` using `CometChatMessageListStyle`.
-
-### Style Properties
-
-| Property | Type | Description |
-|----------|------|-------------|
-| `backgroundColor` | `Color?` | Background color of the message list |
-| `border` | `BoxBorder?` | Border of the message list |
-| `borderRadius` | `BorderRadiusGeometry?` | Border radius of the message list |
-| `avatarStyle` | `CometChatAvatarStyle?` | Style for avatar in message bubble |
-| `emptyStateTextStyle` | `TextStyle?` | Style for empty state text |
-| `emptyStateTextColor` | `Color?` | Color for empty state text |
-| `emptyStateSubtitleStyle` | `TextStyle?` | Style for empty state subtitle |
-| `emptyStateSubtitleColor` | `Color?` | Color for empty state subtitle |
-| `errorStateTextStyle` | `TextStyle?` | Style for error state text |
-| `errorStateTextColor` | `Color?` | Color for error state text |
-| `errorStateSubtitleStyle` | `TextStyle?` | Style for error state subtitle |
-| `errorStateSubtitleColor` | `Color?` | Color for error state subtitle |
-| `incomingMessageBubbleStyle` | `CometChatIncomingMessageBubbleStyle?` | Style for incoming message bubble |
-| `outgoingMessageBubbleStyle` | `CometChatOutgoingMessageBubbleStyle?` | Style for outgoing message bubble |
-| `messageInformationStyle` | `CometChatMessageInformationStyle?` | Style for message information |
-| `messageOptionSheetStyle` | `CometChatMessageOptionSheetStyle?` | Style for message option sheet |
-| `mentionsStyle` | `CometChatMentionsStyle?` | Style for mentions |
-| `actionBubbleStyle` | `CometChatActionBubbleStyle?` | Style for group action bubbles |
-| `reactionListStyle` | `CometChatReactionListStyle?` | Style for reaction list |
-| `reactionsStyle` | `CometChatReactionsStyle?` | Style for reactions |
-| `aiSmartRepliesStyle` | `CometChatAISmartRepliesStyle?` | Style for smart replies |
-| `aiConversationStarterStyle` | `CometChatAIConversationStarterStyle?` | Style for conversation starter |
-| `aiConversationSummaryStyle` | `CometChatAIConversationSummaryStyle?` | Style for conversation summary |
-| `aiAssistantSuggestedMessageTextStyle` | `TextStyle?` | Text style for AI suggested messages |
-| `aiAssistantSuggestedMessageTextColor` | `Color?` | Text color for AI suggested messages |
-| `aiAssistantSuggestedMessageBorder` | `Border?` | Border for AI suggested messages |
-| `aiAssistantSuggestedMessageBorderRadius` | `BorderRadius?` | Border radius for AI suggested messages |
-| `aiAssistantSuggestedMessageBackgroundColor` | `Color?` | Background color for AI suggested messages |
-| `aiAssistantSuggestedMessageIconColor` | `Color?` | Icon color for AI suggested messages |
-| `emptyChatGreetingTitleTextColor` | `Color?` | Text color for empty chat greeting title |
-| `emptyChatGreetingTitleTextStyle` | `TextStyle?` | Text style for empty chat greeting title |
-| `emptyChatGreetingSubtitleTextColor` | `Color?` | Text color for empty chat greeting subtitle |
-| `emptyChatGreetingSubtitleTextStyle` | `TextStyle?` | Text style for empty chat greeting subtitle |
-| `flagMessageStyle` | `CometchatFlagMessageStyle?` | Style for flag message dialog |
-| `newMessageIndicatorStyle` | `CometChatNewMessageIndicatorStyle?` | Style for new message indicator |
-
-### Example: Custom Styling
+### State Views
```dart
CometChatMessageList(
user: user,
- style: CometChatMessageListStyle(
- backgroundColor: Color(0xFFFEEDE1),
- outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- ),
- ),
+ emptyStateView: (context) => Center(child: Text("No messages yet")),
+ errorStateView: (context) => Center(child: Text("Something went wrong")),
+ loadingStateView: (context) => Center(child: CircularProgressIndicator()),
+ emptyChatGreetingView: (context) => Center(child: Text("Say hello!")),
)
```
-
-
-
-
-### Example: Custom Avatar Style
+### Text Formatters (Mentions)
```dart
CometChatMessageList(
user: user,
- style: CometChatMessageListStyle(
- avatarStyle: CometChatAvatarStyle(
- border: Border.all(width: 5),
- borderRadius: 20,
- backgroundColor: Colors.red,
- ),
- ),
+ textFormatters: [
+ CometChatMentionsFormatter(),
+ ],
)
```
-### Example: Custom Mentions Style
+### Message Templates
+
+Override or extend message bubble rendering:
```dart
+// Replace all templates
CometChatMessageList(
user: user,
- textFormatters: [
- CometChatMentionsFormatter(
- style: CometChatMentionsStyle(
- mentionSelfTextBackgroundColor: Color(0xFFF76808),
- mentionTextBackgroundColor: Colors.white,
- mentionTextColor: Colors.black,
- mentionSelfTextColor: Colors.white,
- ),
+ templates: getCustomTemplates(),
+)
+
+// Add/override specific templates (merged with defaults)
+CometChatMessageList(
+ user: user,
+ addTemplate: [
+ CometChatMessageTemplate(
+ type: MessageTypeConstants.text,
+ category: MessageCategoryConstants.message,
+ contentView: (message, context, alignment, {additionalConfigurations}) {
+ return Text((message as TextMessage).text,
+ style: TextStyle(color: Colors.red));
+ },
),
],
)
@@ -502,214 +343,251 @@ CometChatMessageList(
-
-
-
+See [Message Template](/ui-kit/flutter/message-template) for the full template structure.
-## Advanced
+---
-### Message Templates
+## Message Option Visibility
+
+| Property | Default | Description |
+| --- | --- | --- |
+| `hideCopyMessageOption` | `false` | Hide "Copy Message" |
+| `hideDeleteMessageOption` | `false` | Hide "Delete Message" |
+| `hideEditMessageOption` | `false` | Hide "Edit Message" |
+| `hideMessageInfoOption` | `false` | Hide "Message Info" |
+| `hideMessagePrivatelyOption` | `false` | Hide "Message Privately" |
+| `hideReactionOption` | `false` | Hide "Reaction" |
+| `hideReplyInThreadOption` | `false` | Hide "Reply in Thread" |
+| `hideTranslateMessageOption` | `false` | Hide "Translate Message" |
+| `hideShareMessageOption` | `false` | Hide "Share Message" |
+| `hideModerationView` | `null` | Hide moderation view |
+
+---
+
+## Common Patterns
-[CometChatMessageTemplate](/ui-kit/flutter/message-template) is a pre-defined structure for creating message views that can be used as a starting point or blueprint for creating message bubbles.
+### Thread replies view
```dart
-List getTemplate() {
- // Creating a text template
- CometChatMessageTemplate textTemplate = ChatConfigurator.getDataSource().getTextMessageTemplate();
- textTemplate.contentView = (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment, {AdditionalConfigurations? additionalConfigurations}) {
- return Padding(
- padding: const EdgeInsets.all(8.0),
- child: Text(
- (baseMessage as TextMessage).text,
- style: TextStyle(
- color: alignment == BubbleAlignment.left ? Colors.deepPurple : Colors.yellow,
- fontSize: 14,
- fontWeight: FontWeight.bold,
- ),
- ),
- );
- };
-
- // Creating a custom message template
- CometChatMessageTemplate customMessageTemplate = CometChatMessageTemplate(
- type: 'custom_template',
- category: 'custom_category',
- bubbleView: (message, context, alignment) => const Text('Custom message'),
- );
+CometChatMessageList(
+ user: user,
+ parentMessageId: parentMessage.id,
+)
+```
+
+
- return [textTemplate, customMessageTemplate];
-}
+### Jump to a specific message
-// Usage
+
+
+```dart
CometChatMessageList(
user: user,
- templates: getTemplate(),
+ goToMessageId: 12345,
)
```
+### Start from unread messages
+
-
-
-
-
-
+
+```dart
+CometChatMessageList(
+ user: user,
+ startFromUnreadMessages: true,
+)
+```
-### Date Separator Pattern
+### Flag / Report a message
-Customize the date separator pattern:
+Flag/report is available by default from the message long-press menu. Toggle its visibility and customize the dialog:
```dart
CometChatMessageList(
user: user,
- dateSeparatorPattern: (DateTime dateTime) {
- return DateFormat("dd/MM/yyyy").format(dateTime);
+ // hide the Flag option entirely
+ hideFlagOption: false,
+ // hide the optional "Remark" text field in the flag dialog
+ hideFlagRemarkField: false,
+ // localize reason IDs to your own display strings
+ flagReasonLocalizer: (reasonId) {
+ switch (reasonId) {
+ case 'spam':
+ return 'Spam or unsolicited';
+ case 'inappropriate':
+ return 'Inappropriate content';
+ default:
+ return reasonId;
+ }
},
)
```
+### Mark a message as unread
+
+Expose the "Mark as Unread" option in the long-press menu:
+
-
-
-
-
-
+
+```dart
+CometChatMessageList(
+ user: user,
+ showMarkAsUnreadOption: true,
+)
+```
-### Date Pattern
+---
-Customize the date pattern for message receipts:
+## Advanced
+
+### BLoC Access
+
+Provide a custom `MessageListBloc` to override behavior:
```dart
CometChatMessageList(
user: user,
- datePattern: (message) {
- return DateFormat('EEE, M/d/y').format(message.sentAt!);
- },
+ messageListBloc: CustomMessageListBloc(user: user),
)
```
+### Extending MessageListBloc
+
+`MessageListBloc` uses the `ListBase` mixin with override hooks:
+
-
-
+
+```dart
+class CustomMessageListBloc extends MessageListBloc {
+ CustomMessageListBloc({required User user}) : super(user: user);
+
+ @override
+ void onItemAdded(BaseMessage item, List updatedList) {
+ // Custom logic when a message is added
+ super.onItemAdded(item, updatedList);
+ }
+}
+```
-
-
+
+
+For `ListBase` override hooks (`onItemAdded`, `onItemRemoved`, `onItemUpdated`, `onListCleared`, `onListReplaced`), see [BLoC & Data — ListBase Hooks](/ui-kit/flutter/customization-bloc-data#listbase-hooks).
+
+### Public BLoC Events
+
+| Event | Description |
+| --- | --- |
+| `LoadMessages(conversationWith, conversationType)` | Load initial messages |
+| `LoadOlderMessages()` | Load older messages (scroll up) |
+| `LoadNewerMessages()` | Load newer messages (scroll down) |
+| `RefreshMessages()` | Refresh from the latest |
+| `SyncMessages()` | Silently sync missed messages |
+| `JumpToMessage(messageId)` | Jump to a specific message |
+| `AddReaction(message, reaction)` | Add a reaction |
+| `RemoveReaction(message, reaction)` | Remove a reaction |
+| `MarkMessageAsRead(message)` | Mark a message as read |
+| `MarkMessageAsUnread(...)` | Mark a message as unread |
+| `LoadFromUnread(conversationWith, conversationType)` | Load from first unread message |
+
+### Public BLoC Methods
+
+#### O(1) Lookup Methods
+
+| Method | Returns | Description |
+| --- | --- | --- |
+| `findMessageIndex(messageId)` | `int?` | Find message index by ID |
+| `findMessageIndexByMuid(muid)` | `int?` | Find message index by muid (pending messages) |
+| `findMessage(messageId)` | `BaseMessage?` | Get message by ID |
+| `findMessageByMuid(muid)` | `BaseMessage?` | Get message by muid |
+
+#### ValueNotifier Accessors (Isolated Rebuilds)
+
+| Method | Returns | Description |
+| --- | --- | --- |
+| `getReceiptNotifier(messageId)` | `ValueNotifier` | Per-message receipt status notifier |
+| `getReceiptNotifierForMessage(message)` | `ValueNotifier` | Receipt notifier handling both ID and muid |
+| `getTypingNotifier(conversationId)` | `ValueNotifier>` | Per-conversation typing notifier |
+| `getThreadReplyCountNotifier(parentMessageId)` | `ValueNotifier` | Per-message thread reply count notifier |
+
+#### MessageReceiptStatus Enum
+
+| Value | Description |
+| --- | --- |
+| `sending` | Message is being sent (id = 0) |
+| `sent` | Message has been sent to server |
+| `delivered` | Message has been delivered to recipient |
+| `read` | Message has been read by recipient |
+| `error` | Message failed to send |
+
+### Operations Stream
+
+The BLoC exposes an `operationsStream` consumed by `CometChatAnimatedMessageList` for smooth animations:
+
+| Operation | Description |
+| --- | --- |
+| `MessageOperation.insert(message, index)` | Insert a single message |
+| `MessageOperation.insertAll(messages, index)` | Insert a batch of messages |
+| `MessageOperation.update(oldMessage, newMessage, index)` | Replace a message in-place |
+| `MessageOperation.remove(message, index)` | Remove a message |
+| `MessageOperation.set(messages)` | Replace the entire list |
+
+---
+
+## Style
+
+
+
+```dart
+CometChatMessageList(
+ user: user,
+ style: CometChatMessageListStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ ),
+ incomingMessageBubbleStyle: CometChatIncomingMessageBubbleStyle(
+ backgroundColor: Colors.white,
+ ),
+ ),
+)
+```
+See [Component Styling](/ui-kit/flutter/component-styling) and [Message Bubble Styling](/ui-kit/flutter/message-bubble-styling) for the full reference.
-## Props Reference
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `user` | `User?` | `null` | User object for user message list |
-| `group` | `Group?` | `null` | Group object for group message list |
-| `messagesRequestBuilder` | `MessagesRequestBuilder?` | `null` | Custom request builder for filtering |
-| `style` | `CometChatMessageListStyle?` | - | Sets style for message list |
-| `scrollController` | `ScrollController?` | - | Controller for the message list |
-| `emptyStateText` | `String?` | - | Text when list is empty |
-| `errorStateText` | `String?` | - | Text when error occurs |
-| `loadingStateView` | `WidgetBuilder?` | - | View for loading state |
-| `emptyStateView` | `WidgetBuilder?` | - | View for empty state |
-| `errorStateView` | `WidgetBuilder?` | - | View for error state |
-| `disableSoundForMessages` | `bool?` | `null` | Disables sound for messages |
-| `customSoundForMessages` | `String?` | `null` | Custom sound URL |
-| `readIcon` | `Widget?` | - | Custom read icon |
-| `deliveredIcon` | `Widget?` | - | Custom delivered icon |
-| `sentIcon` | `Widget?` | - | Custom sent icon |
-| `waitIcon` | `Widget?` | - | Custom wait icon |
-| `alignment` | `ChatAlignment` | `standard` | Chat alignment setting |
-| `avatarVisibility` | `bool?` | `true` | Toggle avatar visibility |
-| `datePattern` | `String Function(BaseMessage)?` | - | Custom date pattern |
-| `hideTimestamp` | `bool?` | `null` | Toggle timestamp visibility |
-| `templates` | `List?` | - | Message templates |
-| `onThreadRepliesClick` | `ThreadRepliesClick?` | - | Thread replies callback |
-| `headerView` | `Widget? Function(...)?` | - | Custom header view |
-| `footerView` | `Widget? Function(...)?` | - | Custom footer view |
-| `dateSeparatorPattern` | `String Function(DateTime)?` | - | Date separator pattern |
-| `onError` | `OnError?` | - | Error callback |
-| `receiptsVisibility` | `bool?` | `true` | Toggle read receipts |
-| `dateSeparatorStyle` | `CometChatDateStyle?` | - | Date separator style |
-| `disableReactions` | `bool?` | `false` | Toggle reactions |
-| `addReactionIcon` | `Widget?` | - | Custom add reaction icon |
-| `favoriteReactions` | `List?` | - | Frequently used reactions |
-| `textFormatters` | `List?` | - | Text formatters |
-| `disableMentions` | `bool?` | `null` | Disable mentions |
-| `padding` | `EdgeInsetsGeometry?` | - | Padding for message list |
-| `margin` | `EdgeInsetsGeometry?` | - | Margin for message list |
-| `width` | `double?` | - | Width of message list |
-| `height` | `double?` | - | Height of message list |
-| `onLoad` | `OnLoad?` | - | Load callback |
-| `onEmpty` | `OnEmpty?` | - | Empty callback |
-| `onReactionClick` | `Function(String?, BaseMessage)?` | - | Reaction click callback |
-| `onReactionLongPress` | `Function(String?, BaseMessage)?` | - | Reaction long press callback |
-| `hideStickyDate` | `bool?` | `false` | Hide sticky date |
-| `hideReplyInThreadOption` | `bool?` | `false` | Hide reply in thread option |
-| `hideTranslateMessageOption` | `bool?` | `false` | Hide translate option |
-| `hideEditMessageOption` | `bool?` | `false` | Hide edit option |
-| `hideDeleteMessageOption` | `bool?` | `false` | Hide delete option |
-| `hideReactionOption` | `bool?` | `false` | Hide reaction option |
-| `hideMessagePrivatelyOption` | `bool?` | `false` | Hide message privately option |
-| `hideCopyMessageOption` | `bool?` | `false` | Hide copy option |
-| `hideMessageInfoOption` | `bool?` | `false` | Hide message info option |
-| `hideGroupActionMessages` | `bool?` | `false` | Hide group action messages |
-| `enableConversationStarters` | `bool?` | `false` | Enable conversation starters |
-| `enableSmartReplies` | `bool?` | `false` | Enable smart replies |
-| `hideShareMessageOption` | `bool?` | `false` | Hide share option |
-| `smartRepliesDelayDuration` | `int?` | `10000` | Smart replies delay (ms) |
-| `smartRepliesKeywords` | `List?` | - | Smart replies keywords |
-| `addTemplate` | `List?` | - | Add custom templates |
-| `dateTimeFormatterCallback` | `DateTimeFormatterCallback?` | - | Date time formatter |
-| `hideModerationView` | `bool?` | `null` | Hide moderation view |
-| `hideThreadView` | `bool?` | `null` | Hide thread view |
-| `suggestedMessages` | `List?` | - | AI assistant suggestions |
-| `hideSuggestedMessages` | `bool?` | `false` | Hide suggested messages |
-| `emptyChatGreetingView` | `WidgetBuilder?` | - | Empty chat greeting view |
-| `setAiAssistantTools` | `Map?` | - | AI assistant tools |
-| `streamingSpeed` | `int?` | - | AI streaming speed |
-| `hideDateSeparator` | `bool?` | `false` | Hide date separator |
-| `mentionAllLabel` | `String?` | - | Group mention label |
-| `mentionAllLabelId` | `String?` | - | Group mention label ID |
-| `hideFlagOption` | `bool?` | `false` | Hide report option |
-| `hideFlagRemarkField` | `bool?` | `false` | Hide flag remark field |
-| `startFromUnreadMessages` | `bool?` | `false` | Start from unread messages |
-| `showMarkAsUnreadOption` | `bool?` | `false` | Show mark as unread option |
-| `newMessageIndicatorView` | `WidgetBuilder?` | - | New message indicator view |
-| `enableConversationSummary` | `bool?` | `false` | Enable conversation summary |
-| `generateConversationSummary` | `bool?` | `false` | Generate conversation summary |
-| `hideReplyOption` | `bool?` | `false` | Hide reply option |
-| `flagReasonLocalizer` | `String Function(String)?` | - | Flag reason localizer |
-| `reactionsRequestBuilder` | `ReactionsRequestBuilder?` | - | Request builder for reactions |
-| `stateCallBack` | `Function(CometChatMessageListController)?` | - | Callback to access controller |
-| `customSoundForMessagePackage` | `String?` | - | Package name for custom sound |
-| `messageId` | `int?` | - | Specific message ID to scroll to |
+---
+
+## Next Steps
-
- Display user or group details in the header
+
+ Display user/group info in the app bar
-
- Compose and send messages
+
+ Rich input for sending messages
-
- Customize message bubble templates
+
+ Customize message bubble structure
-
- Learn how to customize the look and feel
+
+ Detailed styling reference
-
+
\ No newline at end of file
diff --git a/ui-kit/flutter/message-template.mdx b/ui-kit/flutter/message-template.mdx
index c78cbea09..68f0b9345 100644
--- a/ui-kit/flutter/message-template.mdx
+++ b/ui-kit/flutter/message-template.mdx
@@ -1,864 +1,252 @@
---
title: "Message Template"
-description: "Data structure defining how message bubbles render in CometChatMessageList — controls header, content, footer, bottom, status info, reply, and bubble views per message type and category."
+description: "Data structure for customizing CometChat Flutter UI Kit message bubbles, including content, header, footer, reply, and status views."
---
-
-```json
-{
- "component": "CometChatMessageTemplate",
- "kind": "model-class",
- "package": "cometchat_chat_uikit",
- "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
- "description": "Data structure defining how message bubbles render in CometChatMessageList. Each template maps a type+category pair to view functions.",
- "usage": "Pass a list of CometChatMessageTemplate instances to CometChatMessageList via the templates property.",
- "properties": {
- "type": { "type": "String", "required": true, "description": "CometChat message type" },
- "category": { "type": "String", "default": "\"\"", "description": "CometChat message category" },
- "headerView": { "type": "Function?", "default": "null", "description": "Custom header view builder function" },
- "contentView": { "type": "Function?", "default": "null", "description": "Custom content view builder function" },
- "footerView": { "type": "Function?", "default": "null", "description": "Custom footer view builder function" },
- "bottomView": { "type": "Function?", "default": "null", "description": "Custom bottom view builder function" },
- "bubbleView": { "type": "Function?", "default": "null", "description": "Replaces entire bubble" },
- "statusInfoView": { "type": "Function?", "default": "null", "description": "Custom status info view builder function" },
- "replyView": { "type": "Function?", "default": "null", "description": "Custom reply preview builder function" },
- "threadView": { "type": "Function?", "default": "null", "description": "Custom thread view builder function" },
- "options": { "type": "Function", "description": "Returns action sheet items for long-press" }
- },
- "relatedComponents": ["CometChatMessageList"],
- "events": null
-}
-```
-
-
## Overview
-A MessageTemplate provides you with the capability to define and customize both the structure and the behavior of the [MessageBubble](/ui-kit/flutter/message-bubble-styling). It acts as a schema or design blueprint for the creation of a variety of [MessageBubble](/ui-kit/flutter/message-bubble-styling) widgets, allowing you to manage the appearance and interactions of [MessageBubble](/ui-kit/flutter/message-bubble-styling) within your application effectively and consistently.
+A `CometChatMessageTemplate` provides the capability to define and customize both the structure and behavior of message bubbles. It acts as a blueprint for creating message bubble widgets, allowing you to manage appearance and interactions consistently.
### Structure
-
-
-
-
-The MessageBubble structure can typically be broken down into the following widgets:
-
-1. **Leading widget**: This is where the sender's avatar is displayed. It's typically on the left of the MessageBubble for messages from others and on the right for messages from the current user.
-
-2. **Header widget**: This displays the sender's name and is especially useful in group chats where multiple users are sending messages.
+The MessageBubble structure can be broken down into:
-3. **Content widget**: This is the core of the MessageBubble where the message content (text, images, videos, etc.) is displayed.
-
-4. **Bottom widget**: This widget can be used to extend the MessageBubble with additional elements, such as link previews or a 'load more' button for long messages. It's typically placed beneath the Content widget.
-
-5. **Footer widget**: This is where the timestamp of the message and its delivery or read status are displayed. It's located at the bottom of the MessageBubble.
+1. Leading widget — Sender's avatar
+2. Header widget — Sender's name (useful in group chats)
+3. Content widget — Message content (text, images, videos, etc.)
+4. Bottom widget — Additional elements like link previews or "load more" buttons
+5. Footer widget — Timestamp and delivery/read status
### Properties
-MessageTemplate provides you with methods that allow you to alter various properties of the MessageBubble. These properties include aspects such as the `type` and `category` of a message, the appearance and behavior of the header, content, and footer sections of the message bubble,
-
-1. **Type**
-
- Using `type` you can set the type of CometChatMessage, This will map your MessageTemplate to the corresponding CometChatMessage. You can set the MessageTemplate Type using the following code snippet.
-
-
-
- ```dart
- CometChatMessageTemplate cometChatMessageTemplate = CometChatMessageTemplate(type: MessageTypeConstants.text);
- ```
-
-
-
-
-
-2. **Category**
-
- Using `category` you can set the category of a MessageTemplate. This will create a MessageTemplate with the specified category and link it with a CometChatMessage of the same category.
-
- Please refer to our guide on [Message Categories](/sdk/flutter/message-structure-and-hierarchy) for a deeper understanding of message categories.
-
-
-
- ```dart
- CometChatMessageTemplate cometChatMessageTemplate = CometChatMessageTemplate(category: MessageCategoryConstants.custom);
- ```
-
-
-
-
-
-3. **Header Widget**
-
- The. `headerView` property allows you to assign a custom header widget to the MessageBubble. By default, it is configured to display the sender's name.
-
-
-
- ```dart
- cometChatMessageTemplate.headerView = (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment) {
- return const Placeholder();
- };
- ```
-
-
-
-
-
-4. **Content Widget**
-
- The `contentView` method allows you to assign a custom content widget to the MessageBubble. By default, it displays the [Text Bubble](/ui-kit/flutter/message-bubble-styling#text-bubble), [Image Bubble](/ui-kit/flutter/message-bubble-styling#image-bubble), [File Bubble](/ui-kit/flutter/message-bubble-styling#file-bubble), [Audio Bubble](/ui-kit/flutter/message-bubble-styling#audio-bubble), or [Video Bubble](/ui-kit/flutter/message-bubble-styling#video-bubble), depending on the message type.
-
-
-
- ```dart
- cometChatMessageTemplate.contentView = (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment, {AdditionalConfigurations? additionalConfigurations}) {
- return const Placeholder();
- };
- ```
-
-
-
-
-
-5. **Footer Widget**
-
- The `footerView` property allows you to assign a custom Footer widget to the MessageBubble. By default, it displays the receipt and timestamp.
-
-
-
- ```dart
- cometChatMessageTemplate.footerView = (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment) {
- return const Placeholder();
- };
- ```
-
-
-
-
-
-6. **Bottom Widget**
-
- The `bottomView` property allows you to assign a custom Bottom widget to the MessageBubble.By defuault is has buttons such as link previews or a 'load more' button for long messages.
-
-
-
- ```dart
- cometChatMessageTemplate.bottomView = (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment) {
- return const Placeholder();
- };
- ```
-
-
-
-
-
-7. **Bubble Widget**
-
- The `bubbleView` property allows you to assign a custom Bubble widget to the MessageBubble. By default, headerView, contentView, and footerView together form a message bubble.
-
-
-
- ```dart
- cometChatMessageTemplate.bubbleView = (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment) {
- return const Placeholder();
- };
- ```
-
-
-
-
-
-8. **Options**
-
- The `options` lets you set the list of actions that a user can perform on a message. This includes actions like reacting to, editing, or deleting a message.
-
-
-
- ```dart
- cometChatMessageTemplate.options = (User loggedInUser, BaseMessage messageObject, BuildContext context, Group? group) {
- return [];
- };
- ```
-
-
-
-
-
-9. **Status Info Widget**
-
- The `statusInfoView` property allows you to assign a custom status info widget to the MessageBubble. By default, it displays the timestamp and read receipt under the content view.
-
-
-
- ```dart
- cometChatMessageTemplate.statusInfoView = (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment) {
- return const Placeholder();
- };
- ```
-
-
-
-
-
-10. **Thread Widget**
-
- The `threadView` property allows you to assign a custom thread widget to the MessageBubble. This is displayed at the bottom of the bubble for threaded messages.
-
-
-
- ```dart
- cometChatMessageTemplate.threadView = (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment) {
- return const Placeholder();
- };
- ```
-
-
-
-
-
-11. **Reply Widget**
-
- The `replyView` property allows you to assign a custom reply widget to the MessageBubble. This is displayed at the top of the bubble when replying to a message.
-
-
-
- ```dart
- cometChatMessageTemplate.replyView = (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment, {AdditionalConfigurations? additionalConfigurations}) {
- return const Placeholder();
- };
- ```
-
-
-
-
+| Property | Description |
+|---|---|
+| `type` | Maps the template to a CometChat message type |
+| `category` | Sets the message category |
+| `headerView` | Custom header widget for the bubble |
+| `contentView` | Custom content widget for the bubble |
+| `footerView` | Custom footer widget (timestamp, receipts) |
+| `bottomView` | Custom bottom widget (link previews, etc.) |
+| `bubbleView` | Complete custom bubble widget |
+| `options` | List of actions on long press |
## Customization
-Let's dive into how you can use the [properties](#properties) of MessageTemplate to customize an existing template or add a new one to the [MessageList](/ui-kit/flutter/message-list) Widget.
-
-#### Header widget
-
-The `headerView` method of MessageTemplate allows you to add custom widgets to the header of your message bubbles.
-
-Here is the complete example for reference:
+### Header Widget
```dart
- CometChatMessageList(
- group: group, // Group object
- templates: [
- CometChatMessageTemplate(
- type: MessageTypeConstants.text,
- // Define the template type
- category: MessageCategoryConstants.message,
- // Define the template category
- headerView: (BaseMessage baseMessage, BuildContext buildContext,
- BubbleAlignment alignment) {
- return Text(
- "${baseMessage.sender?.name}• 🗓️ In meeting",
- style: TextStyle(
- color: Color(0xFF6852D6),
- fontSize: 14.4,
- fontWeight: FontWeight.w500,
- letterSpacing: 0),
- ); // Replace this placeholder Widget with your custom Widget
- }),
- ],
- );
-```
-
-
-
-
-
-
-
-
-
-***
-
-#### Content widget
-
-The `contentView` method of MessageTemplate allows you to add a custom widget to the content of your message bubbles.
-
-Here is the complete example for reference:
-
-
-
-```dart
- CometChatMessageList(
- group: group, // Group object
- templates: [
- CometChatMessageTemplate(
- type: "image",
- category: "message",
- contentView: (message, context, alignment,
- {AdditionalConfigurations? additionalConfigurations}) {
- if (message is! MediaMessage) {
- return const SizedBox();
- }
- return Wrap(
- direction: Axis.vertical,
- crossAxisAlignment: WrapCrossAlignment.center,
- children: [
- CometChatImageBubble(
- imageUrl: message.attachment?.fileUrl,
- metadata: message.metadata,
- key: UniqueKey(),
- ),
- TextButton(
- onPressed: () {
- //Navigate to screen with transaction features to purchase the image
- },
- child: Text(
- "Buy Now",
- style: TextStyle(
- color: alignment == BubbleAlignment.left
- ? Color(0xFF6852D6)
- : Colors.white,
- fontSize: 14,
- fontWeight: FontWeight.w500),
- ),
- style: TextButton.styleFrom(
- padding: EdgeInsets.zero,
- ))
- ],
- );
- })
- ]);
+CometChatMessageList(
+ group: group,
+ templates: [
+ CometChatMessageTemplate(
+ type: MessageTypeConstants.text,
+ category: MessageCategoryConstants.message,
+ headerView: (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment) {
+ return Text(
+ "${baseMessage.sender?.name} • 🗓️ In meeting",
+ style: TextStyle(
+ color: Color(0xFF6852D6),
+ fontSize: 14.4,
+ fontWeight: FontWeight.w500,
+ ),
+ );
+ },
+ ),
+ ],
+)
```
-
-
-
-
-
-
***
-#### Bottom Widget
-
-The `bottomView` property of MessageTemplate allows you to add a custom button widget to your message bubbles.
-
-Here is the complete example for reference:
+### Content Widget
```dart
CometChatMessageList(
- group: group, // Group object
- templates: [
- CometChatMessageTemplate(
- type: MessageTypeConstants.text,
- // Define the template type
- category: MessageCategoryConstants.message,
- // Define the template category
- bottomView: (BaseMessage baseMessage, BuildContext buildContext,
- BubbleAlignment alignment) {
- return Container(
- decoration: BoxDecoration(
- color: Color(0xFFF44649).withOpacity(.2),
- borderRadius: BorderRadius.circular(12),
+ group: group,
+ templates: [
+ CometChatMessageTemplate(
+ type: "image",
+ category: "message",
+ contentView: (message, context, alignment, {AdditionalConfigurations? additionalConfigurations}) {
+ if (message is! MediaMessage) return const SizedBox();
+ return Wrap(
+ direction: Axis.vertical,
+ crossAxisAlignment: WrapCrossAlignment.center,
+ children: [
+ CometChatImageBubble(
+ imageUrl: message.attachment?.fileUrl,
+ metadata: message.metadata,
+ key: UniqueKey(),
),
- child: Row(
- children: [
- Icon(
- Icons.warning,
- color: Color(0xFFF44649),
- size: 12,
- ),
- Text(
- "According to guidelines you cannot share contact",
- style: TextStyle(
- color: Color(0xFFF44649),
- fontSize: 12,
- fontWeight: FontWeight.w400,
- letterSpacing: 0),
- )
- ],
+ TextButton(
+ onPressed: () {
+ // Navigate to purchase screen
+ },
+ child: Text("Buy Now"),
),
- );
- },
- ),
- ],
- )
+ ],
+ );
+ },
+ ),
+ ],
+)
```
-
-
-
-
-
-
***
-#### Footer Widget
-
-The `footerView` property of MessageTemplate allows you to add a footer widget to your message bubbles.
-
-Here is the complete example for reference:
+### Bottom Widget
```dart
- CometChatMessageList(
- group: group, // Group object
- templates: [
- CometChatMessageTemplate(
- // Define the template type
- type: MessageTypeConstants.text,
- // Define the template category
- category: MessageCategoryConstants.message,
- // override the default status info view to hide that date time and read receipt
- statusInfoView: (baseMessage, context, alignment) {
- return const SizedBox(height: 11);
- },
- // Define the footer view which would show the date time and read receipt
- footerView: (baseMessage, context, alignment,
- {additionalConfigurations}) {
- return _getStatusInfoView(
- alignment,
- baseMessage,
- baseMessage.sender?.uid == CometChatUIKit.loggedInUser?.uid,
- context);
- },
- ),
- ],
- );
-```
-
-
-
-
-```dart
-Widget _getStatusInfoView(BubbleAlignment alignment, BaseMessage message,
- bool showReceipt, BuildContext context) {
- return Container(
- padding: EdgeInsets.only(
- left: 0,
- top: 0,
- bottom: 4,
- ),
- child: Row(
- mainAxisAlignment: MainAxisAlignment.end,
- children: [
- Container(
- child: Row(
- mainAxisAlignment: MainAxisAlignment.end,
- mainAxisSize: MainAxisSize.min,
- children: [
- getTime(message),
- if (showReceipt)
- getReceiptIcon(message, CometChatUIKit.loggedInUser),
- ],
- ),
- ),
- ],
- ),
- );
- }
-
- Widget getTime(BaseMessage messageObject) {
- if (messageObject.sentAt == null) {
- return const SizedBox();
- }
-
- DateTime lastMessageTime = messageObject.sentAt!;
- return CometChatDate(
- date: lastMessageTime,
- pattern: DateTimePattern.timeFormat,
- style: CometChatDateStyle(
- backgroundColor: Colors.transparent,
- textStyle: TextStyle(
- color: Color(0xFF727272),
- fontSize: 14.4,
- fontWeight: FontWeight.w400,
- letterSpacing: 0),
- border: Border.all(
- color: Colors.transparent,
- width: 0,
+CometChatMessageList(
+ group: group,
+ templates: [
+ CometChatMessageTemplate(
+ type: MessageTypeConstants.text,
+ category: MessageCategoryConstants.message,
+ bottomView: (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment) {
+ return Container(
+ decoration: BoxDecoration(
+ color: Color(0xFFF44649).withOpacity(.2),
+ borderRadius: BorderRadius.circular(12),
),
- ));
- }
-
- Widget getReceiptIcon(BaseMessage message, User? loggedInUser) {
- ReceiptStatus status = MessageReceiptUtils.getReceiptStatus(message);
-
- return Padding(
- padding: EdgeInsets.only(right: 8),
- child: CometChatReceipt(
- status: status,
- size: 16,
- style: CometChatMessageReceiptStyle(
- deliveredIconColor: Color(0xFF858585),
- readIconColor: Color(0xFF56E8A7),
- sentIconColor: Color(0xFF858585),
- waitIconColor: Color(0xFF858585),
+ child: Row(
+ children: [
+ Icon(Icons.warning, color: Color(0xFFF44649), size: 12),
+ Text(
+ "According to guidelines you cannot share contact",
+ style: TextStyle(color: Color(0xFFF44649), fontSize: 12),
+ ),
+ ],
),
- ));
- }
+ );
+ },
+ ),
+ ],
+)
```
-
-
-
-
-
-
***
-#### Bubble Widget
-
-The `bubbleView` property of MessageTemplate allows you to add a bubble widget to your message bubbles.
-
-Here is the complete example for reference:
+### Footer Widget
```dart
- CometChatMessageList(
- user: user, // User object
- group: group, // Group object
- templates: [
- CometChatMessageTemplate(
- type: "text",
- category: "message",
- bubbleView: (baseMessage, context, alignment,
- {additionalConfigurations}) {
- return Padding(
- padding: const EdgeInsets.all(8.0),
- child: Column(
- crossAxisAlignment: alignment == BubbleAlignment.right
- ? CrossAxisAlignment.end
- : CrossAxisAlignment.start,
- children: [
- CustomPaint(
- size: Size(260, 100),
- painter: ChatBubblePainter(
- text: (baseMessage as TextMessage).text,
- alignment: alignment,
- color: alignment == BubbleAlignment.right
- ? Color(0xFF6852D6)
- : Color(0xFFE8E8E8)),
- ),
- _getStatusInfoView(
- alignment,
- baseMessage,
- baseMessage.sender?.uid ==
- CometChatUIKit.loggedInUser?.uid,
- context)
- ],
- ),
- );
- },
- )
- ],
- );
-```
-
-
-
-
-```dart
-class ChatBubblePainter extends CustomPainter {
- ChatBubblePainter({required this.text, this.color, this.alignment});
-
- final String text;
- final Color? color;
-
- final BubbleAlignment? alignment;
-
- @override
- void paint(Canvas canvas, Size size) {
- Paint paint = Paint()
- ..color = color ?? Colors.blue
- ..style = PaintingStyle.fill;
-
- Path path = Path();
- path.moveTo(0, 0);
- path.lineTo(size.width, 0);
- if (alignment == BubbleAlignment.right) {
- path.lineTo(size.width, size.height);
- path.lineTo(size.width * .9, size.height * .8);
- path.lineTo(0, size.height * .8);
- } else {
- path.lineTo(size.width, size.height * .8);
- path.lineTo(size.width * .1, size.height * .8);
- path.lineTo(0, size.height);
- }
- path.close();
-
- canvas.drawPath(path, paint);
-
- var style = TextStyle(
- color: alignment == BubbleAlignment.right ? Colors.white : Colors.black,
- fontSize: 20);
-
- final ParagraphBuilder paragraphBuilder = ParagraphBuilder(ParagraphStyle(
- fontSize: style.fontSize,
- fontFamily: style.fontFamily,
- fontStyle: style.fontStyle,
- fontWeight: style.fontWeight,
- textAlign: TextAlign.justify,
- ))
- ..pushStyle(style.getTextStyle())
- ..addText(text);
- final Paragraph paragraph = paragraphBuilder.build()
- ..layout(ParagraphConstraints(width: size.width));
- canvas.drawParagraph(paragraph, Offset(55, 25));
- }
-
- @override
- bool shouldRepaint(covariant CustomPainter oldDelegate) {
- return oldDelegate != this;
- }
-}
+CometChatMessageList(
+ group: group,
+ templates: [
+ CometChatMessageTemplate(
+ type: MessageTypeConstants.text,
+ category: MessageCategoryConstants.message,
+ statusInfoView: (baseMessage, context, alignment) {
+ return const SizedBox(height: 11);
+ },
+ footerView: (baseMessage, context, alignment, {additionalConfigurations}) {
+ // Custom footer with time and receipt
+ return Row(
+ mainAxisAlignment: MainAxisAlignment.end,
+ children: [
+ CometChatDate(date: baseMessage.sentAt!, pattern: DateTimePattern.timeFormat),
+ ],
+ );
+ },
+ ),
+ ],
+)
```
-
-
-
-```dart
-Widget _getStatusInfoView(BubbleAlignment alignment, BaseMessage message,
- bool showReceipt, BuildContext context) {
- return Container(
- padding: EdgeInsets.only(
- left: 0,
- top: 0,
- bottom: 4,
- ),
- child: Row(
- mainAxisAlignment: MainAxisAlignment.end,
- children: [
- Container(
- child: Row(
- mainAxisAlignment: MainAxisAlignment.end,
- mainAxisSize: MainAxisSize.min,
- children: [
- getTime(message),
- if (showReceipt)
- getReceiptIcon(message, CometChatUIKit.loggedInUser),
- ],
- ),
- ),
- ],
- ),
- );
- }
-
- Widget getTime(BaseMessage messageObject) {
- if (messageObject.sentAt == null) {
- return const SizedBox();
- }
-
- DateTime lastMessageTime = messageObject.sentAt!;
- return CometChatDate(
- date: lastMessageTime,
- pattern: DateTimePattern.timeFormat,
- style: CometChatDateStyle(
- backgroundColor: Colors.transparent,
- textStyle: TextStyle(
- color: Color(0xFF727272),
- fontSize: 14.4,
- fontWeight: FontWeight.w400,
- letterSpacing: 0),
- border: Border.all(
- color: Colors.transparent,
- width: 0,
- ),
- ));
- }
-
- Widget getReceiptIcon(BaseMessage message, User? loggedInUser) {
- ReceiptStatus status = MessageReceiptUtils.getReceiptStatus(message);
-
- return Padding(
- padding: EdgeInsets.only(right: 8),
- child: CometChatReceipt(
- status: status,
- size: 16,
- style: CometChatMessageReceiptStyle(
- deliveredIconColor: Color(0xFF858585),
- readIconColor: Color(0xFF56E8A7),
- sentIconColor: Color(0xFF858585),
- waitIconColor: Color(0xFF858585),
- ),
- ));
- }
-```
-
-
-
-
-
-
-
***
-#### Options List
-
-The `options` property in the MessageTemplate allows you to customize the options that appear in the action sheet when a message is long-pressed. By default, CometChat UI Kit provides a set of options like "Reply", "Edit", and "Delete".
-
-However, if you wish to override or modify these options, you can use the `options` method and pass a list of `CometChatMessageOption`. This list of options will replace the default set.
-
-Here is the complete example for reference:
+### Options List
```dart
CometChatMessageList(
- group: group, // Group object
- templates: [
- CometChatMessageTemplate(
- type: MessageTypeConstants.text,
- // Define the template type
- category: MessageCategoryConstants.message,
- options: (loggedInUser, messageObject, context, group,
- additionalConfigurations) {
- // Retrieve the existing options and add a new option to it
- final existingOptions = CometChatUIKit.getDataSource()
- .getTextMessageOptions(loggedInUser, messageObject, context,
- group, additionalConfigurations); // since we are updating the options for text message, we are using getTextMessageOptions
- return [
- CometChatMessageOption(
- id: "refresh",
- title: "Refresh",
- icon: Icon(
- Icons.refresh,
- color: Color(0xFF6852D6),
- size: 24,
- ),
- messageOptionSheetStyle: CometChatMessageOptionSheetStyle(
- titleTextStyle: TextStyle(
- color: Color(0xFF6852D6),
- fontSize: 14,
- fontWeight: FontWeight.w400,
- letterSpacing: 0),
- )),
- ...existingOptions,
- ];
- },
- ),
- ],
- )
+ group: group,
+ templates: [
+ CometChatMessageTemplate(
+ type: MessageTypeConstants.text,
+ category: MessageCategoryConstants.message,
+ options: (loggedInUser, messageObject, context, group, additionalConfigurations) {
+ final existingOptions = CometChatUIKit.getDataSource()
+ .getTextMessageOptions(loggedInUser, messageObject, context, group, additionalConfigurations);
+ return [
+ CometChatMessageOption(
+ id: "refresh",
+ title: "Refresh",
+ icon: Icon(Icons.refresh, color: Color(0xFF6852D6), size: 24),
+ ),
+ ...existingOptions,
+ ];
+ },
+ ),
+ ],
+)
```
-
-
-
-
-
-
***
## New Templates
-You can create an entirely new template for custom messages is one of the powerful features of CometChat's MessageTemplate.
-
-Here is the complete example for reference:
+Create entirely new templates for custom message types:
```dart
- CometChatMessageList(
- user: user, // User object
- group: group, // Group object
- messagesRequestBuilder: MessagesRequestBuilder()
- ..limit = 30
- ..types = [
- ...CometChatUIKit.getDataSource().getAllMessageTypes(),
- "contact"
- ] // Add the custom type here
- ..categories = CometChatUIKit.getDataSource().getAllMessageCategories(),
- templates: [
- CometChatMessageTemplate(
- type: "contact",
- // Define the template type̵
- category: MessageCategoryConstants.custom,
- // Define the template category
- contentView: (baseMessage, context, alignment,
- {additionalConfigurations}) {
- return Padding(
- padding: const EdgeInsets.fromLTRB(8, 8, 8, 0),
- child: Row(
- children: [
- CircleAvatar(
- backgroundColor: Color(0xFFEDEAFA),
- child: Icon(
- Icons.person,
- color: Colors.white,
- ),
- ),
- SizedBox(
- width: 8,
- ),
- Text("Safiya Fareena",
- style: TextStyle(
- color: alignment == BubbleAlignment.right
- ? Colors.white
- : Colors.black,
- fontSize: 14,
- ))
- ],
- ),
- );
- },
- bottomView: (baseMessage, context, alignment,
- {additionalConfigurations}) {
- return DecoratedBox(
- decoration: BoxDecoration(
- border: Border(
- top: BorderSide(color: Color(0xFF7965DB), width: 1))),
- child: ToggleButtons(
- children: [
- Padding(
- padding: EdgeInsets.fromLTRB(20, 8, 0, 8),
- child: Text("Add Contact",
- style: TextStyle(
- color: alignment == BubbleAlignment.right
- ? Colors.white
- : Colors.black,
- fontSize: 14,
- fontWeight: FontWeight.w500)),
- ),
- VerticalDivider(
- color: Color(0xFF7965DB),
- width: 0,
- ),
- Padding(
- padding: EdgeInsets.fromLTRB(0, 8, 20, 8),
- child: Text("Message",
- style: TextStyle(
- color: alignment == BubbleAlignment.right
- ? Colors.white
- : Colors.black,
- fontSize: 14,
- fontWeight: FontWeight.w500)),
- )
- ],
- isSelected: [false, false, false],
- renderBorder: false,
+CometChatMessageList(
+ user: user,
+ messagesRequestBuilder: MessagesRequestBuilder()
+ ..limit = 30
+ ..types = [...CometChatUIKit.getDataSource().getAllMessageTypes(), "contact"]
+ ..categories = CometChatUIKit.getDataSource().getAllMessageCategories(),
+ templates: [
+ CometChatMessageTemplate(
+ type: "contact",
+ category: MessageCategoryConstants.custom,
+ contentView: (baseMessage, context, alignment, {additionalConfigurations}) {
+ return Padding(
+ padding: const EdgeInsets.fromLTRB(8, 8, 8, 0),
+ child: Row(
+ children: [
+ CircleAvatar(
+ backgroundColor: Color(0xFFEDEAFA),
+ child: Icon(Icons.person, color: Colors.white),
+ ),
+ SizedBox(width: 8),
+ Text("Contact Name",
+ style: TextStyle(
+ color: alignment == BubbleAlignment.right ? Colors.white : Colors.black,
+ fontSize: 14,
),
- );
- })
- ],
- );
+ ),
+ ],
+ ),
+ );
+ },
+ ),
+ ],
+)
```
-
-
-
-
-
+
+In V6, `CometChatUIKit.getDataSource()` is replaced by `MessageTemplateUtils` for accessing data source methods. Use the appropriate service locator to get message options and templates.
+
diff --git a/ui-kit/flutter/methods.mdx b/ui-kit/flutter/methods.mdx
index 0cd6ce2d7..9b38f9fb5 100644
--- a/ui-kit/flutter/methods.mdx
+++ b/ui-kit/flutter/methods.mdx
@@ -1,697 +1,195 @@
---
title: "Methods"
-description: "Reference for CometChat Flutter UI Kit methods including init, login, logout, and message-sending wrappers."
+description: "Use CometChatUIKit methods for initialization, login, logout, users, groups, conversations, messages, calls, and session handling."
---
-
-
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_chat_uikit` |
-| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` |
-| Init | `CometChatUIKit.init(uiKitSettings: UIKitSettings)` |
-| Login (dev) | `CometChatUIKit.login(uid)` |
-| Login (prod) | `CometChatUIKit.loginWithAuthToken(authToken)` |
-| Other methods | `CometChatUIKit.logout()`, `CometChatUIKit.getLoggedInUser()`, `CometChatUIKit.createUser(user)`, `CometChatUIKit.updateUser(user)` |
-| Send messages | `CometChatUIKit.sendTextMessage()`, `CometChatUIKit.sendMediaMessage()`, `CometChatUIKit.sendCustomMessage()` |
-| Interactive messages | `CometChatUIKit.sendFormMessage()`, `CometChatUIKit.sendCardMessage()`, `CometChatUIKit.sendSchedulerMessage()` |
-| Reactions | `CometChatUIKit.addReaction()`, `CometChatUIKit.removeReaction()` |
-| Note | Use these wrapper methods instead of raw SDK calls — they manage internal UI Kit eventing |
-
-
-
## Overview
-The UI Kit's core function is to extend the [Chat SDK](/sdk/flutter/overview), essentially translating the raw data and functionality provided by the underlying methods into visually appealing and easy-to-use UI components.
+The UI Kit's core function is to extend the Chat SDK, translating the raw data and functionality provided by the underlying methods into visually appealing and easy-to-use UI components.
-To effectively manage and synchronize the UI elements and data across all components in the UI Kit, we utilize internal events. These internal events enable us to keep track of changes in real-time and ensure that the UI reflects the most current state of data.
-
-The CometChat UI Kit has thoughtfully encapsulated the critical [Chat SDK](/sdk/flutter/overview) methods within its wrapper to efficiently manage internal eventing. This layer of abstraction simplifies interaction with the underlying CometChat SDK, making it more user-friendly for developers.
-
-## Methods
+The CometChat UI Kit has encapsulated the critical Chat SDK methods within its wrapper to efficiently manage internal eventing. This layer of abstraction simplifies interaction with the underlying CometChat SDK.
You can access the methods using the `CometChatUIKit` class. This class provides access to all the public methods exposed by the CometChat UI Kit.
-### Init
+## Init
As a developer, you need to invoke this method every time before you use any other methods provided by the UI Kit.
-This initialization is a critical step that ensures the UI Kit and Chat SDK function correctly and as intended in your application. Typical practice is to make this one of the first lines of code executed in your application's lifecycle when it comes to implementing CometChat.
-
-
-`CometChatUIKit.init()` must be called before rendering any UI Kit components or calling any SDK methods. Initialization must complete before login.
-
+The `UIKitSettings` is an important parameter of the `init()` function. It functions as a base settings object, housing properties such as `appId`, `region`, and `authKey`.
-
-Auth Key is for development/testing only. In production, generate Auth Tokens on the server using the REST API and pass them to the client via `loginWithAuthToken()`. Never expose Auth Keys in production client code.
-
+| Method | Type | Description |
+|---|---|---|
+| appId | String | Sets the unique ID for the app, available on dashboard |
+| region | String | Sets the region for the app ('us' or 'eu' or 'in') |
+| authKey | String | Sets the auth key for the app, available on dashboard |
+| subscriptionType | String | Sets subscription type for tracking the presence of all users |
+| roles | String | Sets subscription type for tracking the presence of users with specified roles |
+| autoEstablishSocketConnection | Boolean | Configures if web socket connections will be established automatically on app initialization or be done manually, set to true by default |
-
-Make sure you replace the **APP\_ID**, **REGION** and **AUTH\_KEY** with your CometChat App ID, Region and Auth Key in the below code. The `Auth Key` is an optional property of the `UIKitSettings` Class. It is intended for use primarily during proof-of-concept (POC) development or in the early stages of application development. You can use the [Auth Token](#login-using-auth-token) to log in securely.
-
+> **V6 Note:** The `extensions` and `aiFeature` parameters from V5 have been removed. Extensions are built-in and handled automatically by `MessageTemplateUtils`. No registration is needed.
-As a developer, the `UIKitSettings` is an important parameter of the `init()` function. It functions as a base settings object, housing properties such as `appId`, `region`, and `authKey`, contained within `UIKitSettings`.
-
-Here's the table format for the properties available in `UIKitSettings`:
-
-| Method | Type | Description |
-| --------------------------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| **appId** | `String` | Sets the unique ID for the app, available on dashboard |
-| **region** | `String` | Sets the region for the app ('us' or 'eu' or 'in') |
-| **authKey** | `String` | Sets the auth key for the app, available on dashboard |
-| **subscriptionType** | `String` | Sets subscription type for tracking the presence of all users |
-| **roles** | `String` | Sets subscription type for tracking the presence of users with specified roles |
-| **autoEstablishSocketConnection** | `Boolean` | Configures if web socket connections will established automatically on app initialization or be done manually, set to true by default |
-| **aiFeature** | `List` | Sets the AI Features that need to be added in UI Kit |
-| **extensions** | `List` | Sets the list of extension that need to be added in UI Kit |
-| **callingExtension** | `ExtensionsDataSource` | Sets the calling extension configuration |
-| **adminHost** | `String` | Sets a custom admin host URL |
-| **clientHost** | `String` | Sets a custom client host URL |
-| **dateTimeFormatterCallback** | `DateTimeFormatterCallback` | Sets a custom date/time formatter for consistent formatting across all UI components |
-
-***
-
-The concluding code block:
-
-
-
-```dart highlight={3-5}
+```dart
UIKitSettings uiKitSettings = (UIKitSettingsBuilder()
..subscriptionType = CometChatSubscriptionType.allUsers
..autoEstablishSocketConnection = true
- ..region = "your_region" // Replace with your region
- ..appId = "your_appID" // Replace with your app Id
- ..authKey = "your_authKey" // Replace with your app auth key
+ ..region = "your_region"
+ ..appId = "your_appID"
+ ..authKey = "your_authKey"
).build();
CometChatUIKit.init(
uiKitSettings: uiKitSettings,
onSuccess: (successMessage) async {
- // Initialization successful, proceed to login
+ // Ready to use
},
onError: (error) {
- // Handle initialization error
- },
-);
-```
-
-
-
-
-
-***
-
-### Login using Auth Key
-
-Only the `UID` of a user is needed to log in. This simple authentication procedure is useful when you are creating a POC or if you are in the development phase. For production apps, we suggest you use [AuthToken](#login-using-auth-token) instead of Auth Key.
-
-
-
-```dart highlight={1}
-String uid = "user1";
-
-CometChatUIKit.login(
- uid,
- onSuccess: (user) {
- // Login successful, mount your app
- },
- onError: (e) {
- // Handle login error
- },
-);
-```
-
-
-
-
-
-***
-
-### Login using Auth Token
-
-Production-safe authentication that does not expose the Auth Key in client code.
-
-1. [Create a User](/rest-api/chat-apis) via the CometChat API when the user signs up in your app.
-
-2. [Create an Auth Token](/rest-api/chat-apis) via the CometChat API for the new user and save the token in your database.
-
-3. Load the Auth Token in your client and pass it to the `loginWithAuthToken()` method.
-
-
-
-```dart highlight={1}
-String authToken = "AUTH_TOKEN";
-
-CometChatUIKit.loginWithAuthToken(
- authToken,
- onSuccess: (user) {
- // Login successful, mount your app
- },
- onError: (e) {
- // Handle login error
+ // Handle error
},
);
```
-
-
-
-
-***
+## Login using Auth Key
-### Logout
+Only the UID of a user is needed to log in. This simple authentication procedure is useful when you are creating a POC or if you are in the development phase. For production apps, we suggest you use AuthToken instead of Auth Key.
-The CometChat UI Kit and Chat SDK effectively handle the session of the logged-in user within the framework. Before a new user logs in, it is crucial to clean this data to avoid potential conflicts or unexpected behavior. This can be achieved by invoking the `.logout()` function
-
-
-
```dart
-CometChatUIKit.logout(onSuccess: (s) {
- // TODO("Not yet implemented")
-} , onError: (e) {
- // TODO("Not yet implemented")
+CometChatUIKit.login(uid, onSuccess: (user) {
+ // Logged in successfully
+}, onError: (e) {
+ // Handle error
});
```
-
-
-
-
-***
+## Login using Auth Token
-### Create User
+This advanced authentication procedure does not use the Auth Key directly in your client code thus ensuring safety.
-As a developer, you can dynamically create users on CometChat using the `.createUser()` function. This can be extremely useful for situations where users are registered or authenticated by your system and then need to be created on CometChat.
+1. Create a User via the CometChat API when the user signs up in your app.
+2. Create an Auth Token via the CometChat API for the new user and save the token in your database.
+3. Load the Auth Token in your client and pass it to the `loginWithAuthToken()` method.
-
-
```dart
-CometChatUIKit.createUser(userObject, onSuccess: (user) {
- // TODO("Not yet implemented")
+CometChatUIKit.loginWithAuthToken("authToken", onSuccess: (user) {
+ // Logged in successfully
}, onError: (e) {
- // TODO("Not yet implemented")
+ // Handle error
});
```
-
-
-
-
-***
+## Logout
-### Update User
+Before a new user logs in, it is crucial to clean session data to avoid potential conflicts. This can be achieved by invoking the `.logout()` function.
-As a developer, you can update user details using the `.updateUser()` function. This should ideally be achieved at your backend using the Restful APIs, but can also be done client-side when needed.
-
-
-
```dart
-CometChatUIKit.updateUser(userObject, onSuccess: (user) {
- // TODO("Not yet implemented")
+CometChatUIKit.logout(onSuccess: (s) {
+ // Logged out successfully
}, onError: (e) {
- // TODO("Not yet implemented")
+ // Handle error
});
```
-
-
-
+## Create User
-***
+You can dynamically create users on CometChat using the `.createUser()` function.
-### Get Logged In User
-
-You can check if there is any existing session in the SDK and retrieve the details of the logged-in user using the `.getLoggedInUser()` function.
-
-
-
```dart
-CometChatUIKit.getLoggedInUser(onSuccess: (user) {
- // TODO("Not yet implemented")
+CometChat.createUser(userObject, 'authKey', onSuccess: (user) {
+ // User created
}, onError: (e) {
- // TODO("Not yet implemented")
+ // Handle error
});
```
-
-
-
-
-***
-
-### DateFormatter
-
-By providing a custom implementation of the DateTimeFormatterCallback, you can globally configure how time and date values are displayed across all UI components in the CometChat UI Kit. This ensures consistent formatting for labels such as "Today", "Yesterday", "X minutes ago", and more, throughout the entire application.
+## Base Message
-Each method in the interface corresponds to a specific case:
+### Text Message
-* time(int? timestamp) → Custom full timestamp format
-* today(int? timestamp) → Called when a message is from today
-* yesterday(int? timestamp) → Called for yesterday’s messages
-* lastWeek(int? timestamp) → Messages from the past week
-* otherDays(int? timestamp) → Older messages
-* minute(int? timestamp) / hour(int? timestamp) → Exact time unit
-* minutes(int? diffInMinutesFromNow, int? timestamp) → e.g., "5 minutes ago"
-* hours(int? diffInHourFromNow, int? timestamp) → e.g., "2 hours ago"
+Send a text message to a single user or a group using the `sendTextMessage()` function.
-
-
-
```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:intl/intl.dart';
-
-/// Custom implementation of DateTimeFormatterCallback
-/// to format time and date display in the CometChat UI.
-class DateFormatter extends DateTimeFormatterCallback {
- /// Formatter for displaying full time like "10:45 PM"
- final DateFormat fullTimeFormatter = DateFormat('hh:mm a');
-
- /// Formatter for displaying date like "23 Jun 2025"
- final DateFormat dateFormatter = DateFormat('dd MMM yyyy');
-
- /// Returns formatted time (e.g., "10:45 PM") for a given timestamp.
- @override
- String? time(int? timestamp) {
- if (timestamp == null) return null;
- return fullTimeFormatter.format(DateTime.fromMillisecondsSinceEpoch(timestamp));
- }
-
- /// Returns a static label for messages sent today.
- @override
- String? today(int? timestamp) {
- return "Today";
- }
-
- /// Returns a static label for messages sent yesterday.
- @override
- String? yesterday(int? timestamp) {
- return "Yesterday";
- }
-
- /// Returns a static label for messages sent last week.
- @override
- String? lastWeek(int? timestamp) {
- return "Last Week";
- }
-
- /// Returns formatted date (e.g., "23 Jun 2025") for other days.
- @override
- String? otherDays(int? timestamp) {
- if (timestamp == null) return null;
- return dateFormatter.format(DateTime.fromMillisecondsSinceEpoch(timestamp));
- }
-
- /// Returns relative time in minutes (e.g., "5 mins ago").
- @override
- String? minutes(int? diffInMinutesFromNow, int? timestamp) {
- if (diffInMinutesFromNow == null) return null;
- return "$diffInMinutesFromNow mins ago";
- }
-
- /// Returns relative time in hours (e.g., "2 hrs ago").
- @override
- String? hours(int? diffInHourFromNow, int? timestamp) {
- if (diffInHourFromNow == null) return null;
- return "$diffInHourFromNow hrs ago";
- }
-
- /// (Optional) Returns formatted hour (e.g., "3 PM") if used by SDK.
- @override
- String? hour(int? timestamp) {
- if (timestamp == null) return null;
- return DateFormat('h a').format(DateTime.fromMillisecondsSinceEpoch(timestamp));
- }
-
- /// (Optional) Returns formatted minute value (e.g., "09") if used by SDK.
- @override
- String? minute(int? timestamp) {
- if (timestamp == null) return null;
- return DateFormat('mm').format(DateTime.fromMillisecondsSinceEpoch(timestamp));
- }
-}
-
-// Build CometChat UIKit settings
-UIKitSettings uiKitSettings = (UIKitSettingsBuilder()
- // Set subscription type (e.g., receive messages from all users)
- ..subscriptionType = CometChatSubscriptionType.allUsers
-
- // Set your CometChat region
- ..region = AppCredentials.region
-
- // Automatically connect to socket server
- ..autoEstablishSocketConnection = true
-
- // CometChat App ID and Auth Key
- ..appId = AppCredentials.appId
- ..authKey = AppCredentials.authKey
-
- // Enable calling feature
- ..callingExtension = CometChatCallingExtension()
-
- // Load default chat extensions (e.g., polls, stickers, reactions)
- ..extensions = CometChatUIKitChatExtensions.getDefaultExtensions()
-
- // Load default AI features (e.g., Smart Replies, Sentiment Analysis)
- ..aiFeature = CometChatUIKitChatAIFeatures.getDefaultAiFeatures()
-
- // Inject the custom date and time formatter
- ..dateTimeFormatterCallback = DateFormatter()
- )
- .build();
-
-// Initialize CometChat UIKit with the configured settings
-CometChatUIKit.init(
- uiKitSettings: uiKitSettings,
-
- // Callback when initialization is successful
- onSuccess: (successMessage) async {
- // On success
- },
-
- // Callback when initialization fails
- onError: (e) {
- shouldGoToHomeScreen.value = false;
- if (kDebugMode) {
- debugPrint("Initialization failed with error: ${e.details}");
- }
- },
-);
-
-
-```
-
-
-
-
-
-***
-
-### Base Message
-
-#### Text Message
-
-Sends a text message in a 1:1 or group chat. Takes a `TextMessage` object.
-
-
-
-```dart highlight={1-2}
-String receiverID = "UID";
-String messageText = "Hello world!";
-
-TextMessage textMessage = TextMessage(
- text: messageText,
- receiverUid: receiverID,
- receiverType: ReceiverType.user,
-);
-
-CometChatUIKit.sendTextMessage(
- textMessage,
- onSuccess: (message) {
- // Message sent successfully
- },
- onError: (e) {
- // Handle error
- },
-);
-```
-
-
-
-
-```dart highlight={1-2}
-String receiverID = "GUID";
-String messageText = "Hello world!";
-
-TextMessage textMessage = TextMessage(
- text: messageText,
- receiverUid: receiverID,
- receiverType: ReceiverType.group,
-);
-
-CometChatUIKit.sendTextMessage(
- textMessage,
- onSuccess: (message) {
- // Message sent successfully
- },
- onError: (e) {
- // Handle error
- },
-);
-```
-
-
-
-
-
-***
-
-#### Media Message
-
-Sends a media message in a 1:1 or group chat. Takes a `MediaMessage` object.
-
-
-
-```dart highlight={1-2}
-String receiverID = "UID";
-String filePath = "/path/to/file";
-
-MediaMessage mediaMessage = MediaMessage(
- receiverUid: receiverID,
- receiverType: ReceiverType.user,
- type: MessageType.file,
- file: filePath,
-);
-
-CometChatUIKit.sendMediaMessage(
- mediaMessage,
- onSuccess: (message) {
- // Media message sent successfully
- },
- onError: (e) {
- // Handle error
- },
-);
-```
-
-
-
-
-```dart highlight={1-2}
-String receiverID = "GUID";
-String filePath = "/path/to/file";
-
-MediaMessage mediaMessage = MediaMessage(
- receiverUid: receiverID,
- receiverType: ReceiverType.group,
- type: MessageType.file,
- file: filePath,
-);
-
-CometChatUIKit.sendMediaMessage(
- mediaMessage,
- onSuccess: (message) {
- // Media message sent successfully
- },
- onError: (e) {
- // Handle error
- },
-);
-```
-
-
-
-
-
-***
-
-#### Custom Message
-
-Sends a custom message (neither text nor media) in a 1:1 or group chat. Takes a `CustomMessage` object.
-
-
-
-```dart highlight={1,3-4}
-String receiverID = "UID";
-Map customData = {
- "latitude": "50.6192171633316",
- "longitude": "-72.68182268750002",
-};
-String customType = "location";
-
-CustomMessage customMessage = CustomMessage(
- receiverUid: receiverID,
- receiverType: ReceiverType.user,
- type: customType,
- customData: customData,
-);
-
-CometChatUIKit.sendCustomMessage(
- customMessage,
- onSuccess: (message) {
- // Custom message sent successfully
- },
- onError: (e) {
- // Handle error
- },
-);
-```
-
-
-
-
-```dart highlight={1,3-4}
-String receiverID = "GUID";
-Map customData = {
- "latitude": "50.6192171633316",
- "longitude": "-72.68182268750002",
-};
-String customType = "location";
-
-CustomMessage customMessage = CustomMessage(
- receiverUid: receiverID,
- receiverType: ReceiverType.group,
- type: customType,
- customData: customData,
-);
-
-CometChatUIKit.sendCustomMessage(
- customMessage,
- onSuccess: (message) {
- // Custom message sent successfully
- },
- onError: (e) {
- // Handle error
- },
-);
+CometChatUIKit.sendTextMessage(textMessageObject, onSuccess: (msg) {
+ // Message sent
+}, onError: (e) {
+ // Handle error
+});
```
-
-
-
-
-***
+### Media Message
-### Interactive Message
+Send a media message (image, video, audio, file) using the `sendMediaMessage()` function.
-#### Form Message
-
-As a developer, if you need to send a Form message to a single user or a group, you'll need to utilize the `sendFormMessage()` function. This function requires a `FormMessage` object as its argument, which contains the necessary information to create a form bubble for that messages
-
-
-
```dart
-CometChatUIKit.sendFormMessage(formMessageObject, onSuccess: (p0) {
- // TODO("Not yet implemented")
-}, onError: (p0) {
- // TODO("Not yet implemented")
+CometChatUIKit.sendMediaMessage(mediaMessageObject, onSuccess: (msg) {
+ // Message sent
+}, onError: (e) {
+ // Handle error
});
```
-
+### Custom Message
-
+Send a custom message using the `sendCustomMessage()` function.
-***
-
-#### Card Message
-
-As a developer, if you need to send a Card message to a single user or a group, you'll need to utilize the `sendCardMessage()` function. This function requires a `CardMessage` object as its argument, which contains the necessary information to create a card bubble for the messages
-
-
-
```dart
-CometChatUIKit.sendCardMessage(cardMessageObject, onSuccess: (p0) {
- // TODO("Not yet implemented")
-}, onError: (p0) {
- // TODO("Not yet implemented")
+CometChatUIKit.sendCustomMessage(customMessageObject, onSuccess: (msg) {
+ // Message sent
+}, onError: (e) {
+ // Handle error
});
```
-
-
-
+## Interactive Message
-***
+### Form Message
-#### Scheduler Message
-
-As a developer, if you need to send a Scheduler message to a single user or a group, you'll need to utilize the `sendSchedulerMessage()` function. This function requires a `SchedulerMessage` object as its argument, which contains the necessary information to create a SchedulerMessage bubble for the messages
-
-
-
```dart
-CometChatUIKit.sendSchedulerMessage(schedulerMessageObject, onSuccess: (p0) {
- // TODO("Not yet implemented")
-}, onError: (p0) {
- // TODO("Not yet implemented")
+CometChatUIKit.sendFormMessage(formMessageObject, onSuccess: (msg) {
+ // Form message sent
+}, onError: (e) {
+ // Handle error
});
```
-
-
-
-
-***
-
-#### Custom Interactive Message
+### Card Message
-As a developer, if you need to send a Interactive message to a single user or a group, you'll need to utilize the `sendCustomInteractiveMessage()` function. This function requires a `InteractiveMessage` object as its argument, which contains the necessary information to create a custom interactive message bubble for the messages
-
-
-
```dart
-CometChatUIKit.sendCustomInteractiveMessage(interactiveMessageObject, onSuccess: (p0) {
- // TODO("Not yet implemented")
-}, onError: (p0) {
- // TODO("Not yet implemented")
+CometChatUIKit.sendCardMessage(cardMessageObject, onSuccess: (msg) {
+ // Card message sent
+}, onError: (e) {
+ // Handle error
});
```
-
-
-
-
-***
-
-### Reactions
+### Scheduler Message
-#### Add Reaction
-
-As a developer, you can add a reaction to a message using the `addReaction()` function. This will update the UI of `CometChatMessageList` and `CometChatReactions` accordingly.
-
-
-
```dart
-CometChatUIKit.addReaction(messageId, "👍", onSuccess: (message) {
- // TODO("Not yet implemented")
+CometChatUIKit.sendSchedulerMessage(schedulerMessageObject, onSuccess: (msg) {
+ // Scheduler message sent
}, onError: (e) {
- // TODO("Not yet implemented")
+ // Handle error
});
```
-
-
-
-
-***
-
-#### Remove Reaction
-
-As a developer, you can remove a reaction from a message using the `removeReaction()` function. This will update the UI of `CometChatMessageList` and `CometChatReactions` accordingly.
+### Custom Interactive Message
-
-
```dart
-CometChatUIKit.removeReaction(messageId, "👍", onSuccess: (message) {
- // TODO("Not yet implemented")
+CometChatUIKit.sendCustomInteractiveMessage(interactiveMessageObject, onSuccess: (msg) {
+ // Interactive message sent
}, onError: (e) {
- // TODO("Not yet implemented")
+ // Handle error
});
```
-
+## DateFormatter
-
+By providing a custom implementation of the `DateTimeFormatterCallback`, you can globally configure how time and date values are displayed across all UI components.
-***
+```dart
+UIKitSettings uiKitSettings = (UIKitSettingsBuilder()
+ ..subscriptionType = CometChatSubscriptionType.allUsers
+ ..region = CometChatConfig.region
+ ..appId = CometChatConfig.appId
+ ..authKey = CometChatConfig.authKey
+ ..dateTimeFormatterCallback = DateFormatter()
+).build();
+```
diff --git a/ui-kit/flutter/multi-tab-chat-ui-guide.mdx b/ui-kit/flutter/multi-tab-chat-ui-guide.mdx
index 24f03ebfa..64ba8b6dd 100644
--- a/ui-kit/flutter/multi-tab-chat-ui-guide.mdx
+++ b/ui-kit/flutter/multi-tab-chat-ui-guide.mdx
@@ -1,59 +1,13 @@
---
title: "Multi Tab Chat UI Guide"
-description: "Multi Tab Chat UI Guide — CometChat integration guide."
+description: "Build a multi-tab CometChat Flutter UI Kit chat interface with Conversations, Users, Groups, headers, message lists, and composers."
---
-This guide will help you create a multi-tab chat user interface using the cometchat\_chat\_uikit package in Flutter. The final UI will consist of three tabs: Conversations, Users, and Groups.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+This guide helps you create a multi-tab chat user interface using the CometChat V6 UIKit in Flutter. The final UI consists of three tabs: Conversations, Users, and Groups.
##### Create the Multi-Tab Chat UI:
-Update your `lib/multi_tab_chat_ui_guid.dart` file with the following code:
+Update your `lib/multi_tab_chat_ui.dart` file with the following code:
@@ -70,6 +24,36 @@ class MultiTabUIGuideExample extends StatefulWidget {
class _MultiTabUIGuideExampleState extends State {
+ void _navigateToMessages(BuildContext context, {User? user, Group? group}) {
+ Navigator.push(
+ context,
+ MaterialPageRoute(
+ builder: (context) => Scaffold(
+ appBar: CometChatMessageHeader(
+ user: user,
+ group: group,
+ ),
+ body: SafeArea(
+ child: Column(
+ children: [
+ Expanded(
+ child: CometChatMessageList(
+ user: user,
+ group: group,
+ ),
+ ),
+ CometChatMessageComposer(
+ user: user,
+ group: group,
+ ),
+ ],
+ ),
+ ),
+ ),
+ ),
+ );
+ }
+
@override
Widget build(BuildContext context) {
return DefaultTabController(
@@ -88,24 +72,35 @@ class _MultiTabUIGuideExampleState extends State {
],
),
),
- body: const TabBarView(
+ body: TabBarView(
children: [
- CometChatConversationsWithMessages(
- conversationsConfiguration: ConversationsConfiguration(
- hideAppbar: true
- )
+ CometChatConversations(
+ hideAppbar: true,
+ onItemTap: (conversation) {
+ _navigateToMessages(
+ context,
+ user: conversation.conversationWith is User
+ ? conversation.conversationWith as User
+ : null,
+ group: conversation.conversationWith is Group
+ ? conversation.conversationWith as Group
+ : null,
+ );
+ },
),
- CometChatUsersWithMessages(
- usersConfiguration: UsersConfiguration(
- hideAppbar: true,
- hideSearch: true
- )
+ CometChatUsers(
+ hideAppbar: true,
+ hideSearch: true,
+ onItemTap: (user) {
+ _navigateToMessages(context, user: user);
+ },
),
- CometChatGroupsWithMessages(
- groupsConfiguration: GroupsConfiguration(
- hideAppbar: true,
- hideSearch: true
- )
+ CometChatGroups(
+ hideAppbar: true,
+ hideSearch: true,
+ onItemTap: (group) {
+ _navigateToMessages(context, group: group);
+ },
),
],
),
@@ -114,7 +109,13 @@ class _MultiTabUIGuideExampleState extends State {
}
}
```
-
-
+
+## Key V6 Differences
+
+| Aspect | V5 | V6 |
+|---|---|---|
+| Composite widgets | `CometChatConversationsWithMessages`, `CometChatUsersWithMessages`, `CometChatGroupsWithMessages` | Not available — compose manually |
+| Navigation to messages | Handled internally by composite widgets | You handle navigation and compose `MessageHeader` + `MessageList` + `MessageComposer` |
+| State management | GetX | BLoC |
diff --git a/ui-kit/flutter/outgoing-call.mdx b/ui-kit/flutter/outgoing-call.mdx
index 1a73ce2eb..55f369bf7 100644
--- a/ui-kit/flutter/outgoing-call.mdx
+++ b/ui-kit/flutter/outgoing-call.mdx
@@ -1,80 +1,49 @@
---
title: "Outgoing Call"
-description: "Widget that serves as a visual representation of a user-initiated call, providing options to control the call experience."
+description: "Full-screen view displaying recipient information and call status during an outgoing call, with automatic transition to the ongoing call screen."
---
-
-```json
-{
- "component": "CometChatOutgoingCall",
- "package": "cometchat_calls_uikit",
- "import": "import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';",
- "description": "Widget that serves as a visual representation of a user-initiated call, providing options to control the call experience.",
- "props": {
- "data": {
- "call": { "type": "Call", "required": true },
- "user": { "type": "User?", "default": "null" }
- },
- "callbacks": {
- "onCancelled": "Function(BuildContext context, Call call)?",
- "onError": "OnError?"
- },
- "viewSlots": {
- "subtitleView": "Widget? Function(BuildContext context, Call call)?",
- "avatarView": "Widget? Function(BuildContext context, Call call)?",
- "titleView": "Widget? Function(BuildContext context, Call call)?",
- "cancelledView": "Widget? Function(BuildContext context, Call call)?"
- },
- "style": {
- "outgoingCallStyle": "CometChatOutgoingCallStyle?"
- },
- "layout": {
- "height": { "type": "double?", "default": "null" },
- "width": { "type": "double?", "default": "null" }
- },
- "icons": {
- "declineButtonIcon": "Widget?"
- },
- "sound": {
- "disableSoundForCalls": { "type": "bool?", "default": "false" },
- "customSoundForCalls": "String?",
- "customSoundForCallsPackage": "String?"
- },
- "configuration": {
- "callSettingsBuilder": "CallSettingsBuilder?"
- }
- }
-}
-```
-
-
-## Overview
-The `CometChatOutgoingCall` [Widget](/ui-kit/android/components-overview#components) is a visual representation of a user-initiated call, whether it's a voice or video call. It serves as an interface for managing outgoing calls, providing users with essential options to control the call experience. This Widget typically includes information about the call recipient, call controls for canceling the call, and feedback on the call status, such as indicating when the call is in progress.
+`CometChatOutgoingCall` manages the outgoing call process. It displays recipient information (avatar, name) and call status, and automatically transitions to the ongoing call screen when the receiver accepts.
-You can launch `CometChatOutgoingCall` directly using `Navigator.push`, or you can define it as a widget within the `build` method of your `State` class.
+---
+
+## Where It Fits
+
+`CometChatOutgoingCall` is typically launched automatically by `CometChatCallButtons` when a call is initiated. It can also be launched manually for custom call flows.
+
+---
+
+## Quick Start
+
+### Automatic (via CallButtons)
+
+When using `CometChatCallButtons`, the outgoing call screen is launched automatically when the user taps a call button. No manual integration needed.
-##### 1. Using Navigator to Launch `CometChatOutgoingCall`
+### Manual Launch
+
+For custom call flows:
```dart
-Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatOutgoingCall(user: user, call: callObject))); // User object and Call object is required to launch the incoming call widget.
+Navigator.push(context, MaterialPageRoute(
+ builder: (context) => CometChatOutgoingCall(
+ user: user,
+ call: callObject,
+ ),
+));
```
-
-
-##### 2. Embedding `CometChatOutgoingCall` as a Widget in the build Method
-
```dart
-import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';
+import 'package:cometchat_chat_uikit/cometchat_calls_uikit.dart';
import 'package:flutter/material.dart';
class OutgoingCallExample extends StatefulWidget {
@@ -85,349 +54,299 @@ class OutgoingCallExample extends StatefulWidget {
}
class _OutgoingCallExampleState extends State {
-
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: CometChatOutgoingCall(
- user: user, // User Object
- call: callObject
- ), // User object and Call object is required to launch the incoming call widget.
+ user: user,
+ call: callObject,
+ ),
),
);
}
}
```
-
-
-***
+Prerequisites: CometChat SDK initialized, `enableCalls = true` set in UIKitSettings. See [Call Features](/ui-kit/flutter/call-features) for setup.
+
+---
-### Actions
+## Actions and Events
-[Actions](/ui-kit/android/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.
+### Callback Methods
-##### 1. onCancelled
+#### `onCancelled`
-The `onCancelled` action is typically triggered when the call is ended, carrying out default actions. However, with the following code snippet, you can effortlessly customize or override this default behavior to meet your specific needs.
+Fires when the user cancels the outgoing call. Override to customize cancel behavior.
```dart
CometChatOutgoingCall(
- user: user, // User Object
- call: callObject, // Call Object
+ user: user,
+ call: callObject,
onCancelled: (BuildContext context, Call call) {
- // TODO("Not yet implemented")
+ // Custom cancel logic
},
)
```
-
-
-***
-
-##### 2. onError
+#### `onError`
-You can customize this behavior by using the provided code snippet to override the `onError` and improve error handling.
+Fires on internal errors.
```dart
CometChatOutgoingCall(
- user: user, // User Object
- call: callObject, // Call Object
+ user: user,
+ call: callObject,
onError: (e) {
- // TODO("Not yet implemented")
+ debugPrint("Error: ${e.message}");
},
)
```
-
-
-***
-
-### Filters
-
-**Filters** allow you to customize the data displayed in a list within a Widget. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK.
-
-The `CometChatOutgoingCall` Widget does not have any exposed filters.
-
-***
-
-### Events
+### Global Events
-[Events](/ui-kit/android/components-overview#events) are emitted by a `Widget`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.
+The component emits events via `CometChatCallEvents`:
-Events emitted by the Outgoing call Widget are as follows.
-
-| Event | Description |
-| ------------------ | -------------------------------------------- |
-| **ccCallAccepted** | Triggers when the outgoing call is accepted. |
-| **ccCallRejected** | Triggers when the outgoing call is rejected. |
-
-**Example**
-
-Here is the complete example for reference:
+| Event | Description |
+|---|---|
+| `ccCallAccepted` | Triggers when the outgoing call is accepted |
+| `ccCallRejected` | Triggers when the outgoing call is rejected |
```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:flutter/material.dart';
-
-class YourScreen extends StatefulWidget {
- const YourScreen({super.key});
-
- @override
- State createState() => _YourScreenState();
-}
-
class _YourScreenState extends State with CometChatCallEventListener {
-
@override
void initState() {
super.initState();
- CometChatCallEvents.addCallEventsListener("unique_listener_ID", this); // Add the listener
+ CometChatCallEvents.addCallEventsListener("unique_listener_ID", this);
}
@override
- void dispose(){
+ void dispose() {
super.dispose();
- CometChatCallEvents.removeCallEventsListener("unique_listener_ID"); // Remove the listener
+ CometChatCallEvents.removeCallEventsListener("unique_listener_ID");
}
@override
void ccCallAccepted(Call call) {
- // TODO("Not yet implemented")
+ debugPrint("Call accepted: ${call.sessionId}");
}
@override
void ccCallRejected(Call call) {
- // TODO("Not yet implemented")
+ debugPrint("Call rejected: ${call.sessionId}");
}
@override
Widget build(BuildContext context) {
return const Placeholder();
}
-
}
```
-
-
-***
-
-## Customization
-
-To fit your app's design requirements, you can customize the appearance of the conversation widget. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.
-
-### Style
+---
-You can customize the appearance of the `CometChatOutgoingCall` Widget by applying the `CometChatOutgoingCallStyle` to it using the following code snippet.
+## Functionality
-**Example**
+| Property | Type | Default | Description |
+|---|---|---|---|
+| `user` | `User?` | `null` | Recipient user object |
+| `call` | `Call` | **required** | Call object with session details |
+| `callSettingsBuilder` | `CallSettingsBuilder?` | `null` | Configure call settings |
+| `height` | `double?` | `null` | Widget height |
+| `width` | `double?` | `null` | Widget width |
+| `declineButtonIcon` | `Widget?` | `null` | Custom decline/cancel button icon |
+| `declineButtonText` | `String?` | `null` | Custom decline button text |
+| `disableSoundForCalls` | `bool?` | `false` | Disable outgoing call sound |
+| `customSoundForCalls` | `String?` | `null` | Custom sound asset path |
-Here is the complete example for reference:
+**Example — custom decline text and disabled sound:**
```dart
CometChatOutgoingCall(
- user: user, // User Object
- call: callObject, // Call Object
- outgoingCallStyle: CometChatOutgoingCallStyle(
- avatarStyle: CometChatAvatarStyle(
- backgroundColor: Color(0xFFFBAA75),
- borderRadius: BorderRadius.circular(8),
- ),
- declineButtonColor: Color(0xFFF44649),
- declineButtonBorderRadius: BorderRadius.circular(12),
- )
+ user: user,
+ call: callObject,
+ disableSoundForCalls: true,
+ declineButtonText: "Cancel Call",
)
```
-
-
-
-
-
-
-***
-
-### Functionality
-
-These are a set of small functional customizations that allow you to fine-tune the overall experience of the widget. With these, you can change text, set custom icons, and toggle the visibility of UI elements.
-
-**Example**
+
+
-In this example, we're enhancing the interface by customizing the decline button icons. By setting custom icons for decline buttons, users can enjoy a more visually appealing and personalized experience.
+---
-This level of customization allows developers to tailor the user interface to match the overall theme and branding of their application.
+## Custom View Slots
-**Example**
+### Avatar View
-Here is the example for reference:
+Replace the recipient's avatar.
```dart
CometChatOutgoingCall(
- user: user, // User Object
- call: callObject, // Call Object
- disableSoundForCalls: true,
- declineButtonText: "Decline",
+ user: user,
+ call: callObject,
+ avatarView: (context, call) {
+ return CircleAvatar(
+ radius: 50,
+ backgroundImage: NetworkImage(user?.avatar ?? ""),
+ );
+ },
)
```
-
-
-
-
-
-
-
+### Title View
-
-
+Replace the recipient's name / call status text.
+
+
+```dart
+CometChatOutgoingCall(
+ user: user,
+ call: callObject,
+ titleView: (context, call) {
+ return Text(
+ call.receiver?.name ?? "Unknown",
+ style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold, color: Colors.white),
+ );
+ },
+)
+```
-
-Below is a list of customizations along with corresponding code snippets
-
-| **Property** | Description | Code |
-| ---------------------------------- | --------------------------------------------------------------------------------- | ------------------------------------------- |
-| **Custom Sound For Calls** | Sets the custom sound for outgoing calls. | `customSoundForCalls: String?` |
-| **Custom Sound For Calls Package** | Sets the package for the custom sound for outgoing calls. | `customSoundForCallsPackage: String?` |
-| **Disable Sound For Calls** | Disables sound for outgoing calls. | `disableSoundForCalls: bool?` |
-| **Call** | Used to set the Call object against which we need to display the outgoing screen. | `call: Call` |
-| **callSettingsBuilder** | Sets the CallSettingsBuilder for the outgoing call configuration. | `callSettingsBuilder: CallSettingsBuilder?` |
-| **declineButtonIcon** | Sets decline button icon. | `declineButtonIcon: Widget?` |
-
-***
-
-## Advanced
-
-For advanced-level customization, you can set custom widgets to the widget. This lets you tailor each aspect of the widget to fit your exact needs and application aesthetics. You can create and define your widgets, layouts, and UI elements and then incorporate those into the widget.
-
-***
-
-### titleView
+### Subtitle View
-Allows setting a custom title view to be rendered.
-
-Use Cases:
-
-* Display the contact’s name in a unique style.
-* Show a call type indicator (Voice Call, Video Call).
-* Add status text like "Calling..." or "Ringing...".
+Replace the subtitle (e.g., "Calling...").
```dart
CometChatOutgoingCall(
- titleView: (context, call) {
- // return titleView
- },
+ user: user,
+ call: callObject,
+ subtitleView: (context, call) {
+ return Text(
+ "Ringing...",
+ style: TextStyle(fontSize: 14, color: Colors.white70),
+ );
+ },
)
```
-
-
-***
+### Cancelled View
-### subTitleView
-
-Allows setting a custom sub title view.
-
-Use Cases:
-
-* Display call duration if available.
-* Show network strength indicators.
-* Include a custom message like "Connecting...".
+Replace the cancel/end call button.
```dart
CometChatOutgoingCall(
- subtitleView: (context, call) {
- // return subtitleView
+ user: user,
+ call: callObject,
+ cancelledView: (context, call) {
+ return ElevatedButton.icon(
+ onPressed: () {
+ // Cancel call
},
+ icon: Icon(Icons.call_end),
+ label: Text("End Call"),
+ style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
+ );
+ },
)
```
-
-
-***
-
-### avatarView
-
-Allows setting a custom avatar view.
-
-Use Cases:
+---
-* Show a profile picture with an online indicator.
-* Display a custom icon based on the call type (Voice/Video).
-* Use an animated ring effect around the avatar when calling.
+## Style
```dart
CometChatOutgoingCall(
- avatarView: (context, call) {
- // return avatrView
- },
+ user: user,
+ call: callObject,
+ outgoingCallStyle: CometChatOutgoingCallStyle(
+ avatarStyle: CometChatAvatarStyle(
+ backgroundColor: Color(0xFFFBAA75),
+ borderRadius: BorderRadius.circular(8),
+ ),
+ declineButtonColor: Color(0xFFF44649),
+ declineButtonBorderRadius: BorderRadius.circular(12),
+ ),
)
```
-
-
-***
+
+
+
-### cancelledView
+### Style Properties
-Allows setting a custom cancelled view.
+| Property | Description |
+|---|---|
+| `avatarStyle` | Recipient avatar appearance |
+| `declineButtonColor` | Cancel button background color |
+| `declineButtonBorderRadius` | Cancel button corner radius |
+| `backgroundColor` | Screen background color |
-Use Cases:
+---
-* Customize the "End Call" button style.
-* Add a confirmation pop-up before ending the call.
-* Display different icons based on call status (Active, On Hold)..
+## Key V6 Differences
-
-
-```dart
-CometChatOutgoingCall(
- cancelledView: (context, call) {
- // return cancelledView
- },
-)
-```
+| Aspect | V5 | V6 |
+|---|---|---|
+| Subtitle | Static `String?` | Dynamic `subtitleView: Widget? Function(BuildContext, Call)?` |
+| Decline callback | `onDecline` | Renamed to `onCancelled` |
+| Decline icon | URL-based `String?` | Widget-based `declineButtonIcon: Widget?` |
+| State management | GetX controller | BLoC (`OutgoingCallBloc`) |
+| Removed | `theme`, `avatarStyle`, `cardStyle`, `buttonStyle`, `ongoingCallConfiguration` | Integrated into main style |
-
-
-
+---
-***
+## Next Steps
+
+
+
+ Handle incoming calls
+
+
+ Add voice and video call buttons
+
+
+ Complete calling setup
+
+
+ Detailed styling reference
+
+
diff --git a/ui-kit/flutter/overview.mdx b/ui-kit/flutter/overview.mdx
index 6f5dfc714..4f6ed46ad 100644
--- a/ui-kit/flutter/overview.mdx
+++ b/ui-kit/flutter/overview.mdx
@@ -1,126 +1,98 @@
---
-title: "Flutter UI Kit"
+title: "CometChat UI Kit For Flutter (V6)"
sidebarTitle: "Overview"
-description: "Prebuilt Flutter widgets for chat, voice, and video calling. Works on iOS and Android."
+description: "Use CometChat Flutter UI Kit V6 to add prebuilt chat widgets, calls, theming, localization, and customizable messaging experiences."
---
-
-🚀 **V6 Beta Available** — The Flutter UI Kit V6 is now available in beta with BLoC state management, clean architecture, and improved performance. [Check out the V6 Overview →](/ui-kit/flutter/v6/overview)
-
+The **CometChat UI Kit V6** for Flutter is a major architectural evolution of the Flutter Chat UIKit. It provides the same robust set of **prebuilt UI widgets** that are **modular, customizable, and highly scalable**, now built on **clean architecture** with **BLoC state management** for better testability, maintainability, and performance.
-
+***
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_chat_uikit` v5.2.x |
-| Calling | Optional — `cometchat_calls_uikit` |
-| Platforms | iOS 13.0+, Android API 21+ |
-| Flutter | 3.0+ recommended |
-| Localization | Built-in support |
-| Source | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/chat_uikit) |
-| AI Skills | `npx @cometchat/skills add` — [GitHub](https://github.com/cometchat/cometchat-skills) |
+## **What's New in V6?**
-
+* **BLoC State Management** – Replaces GetX with flutter_bloc for predictable, testable state.
+* **Clean Architecture** – Every module follows `bloc/` + `data/` + `domain/` + `di/` layers.
+* **No DataSource Decorator Chain** – Direct static method calls via `MessageTemplateUtils` replace the 10-layer decorator pattern.
+* **Internalized Shared UI** – `cometchat_uikit_shared` is now part of the package, no separate dependency needed.
+* **Faster Startup** – No extension registration or network calls at init time.
-The CometChat Flutter UI Kit provides prebuilt, customizable widgets for adding chat, voice, and video calling to any Flutter app. Each widget handles its own data fetching, real-time listeners, and state — you just drop them into your layout.
+***
-
-
-
+## **Why Choose CometChat UI Kit V6?**
----
+* **Rapid Integration** – Prebuilt UI widgets for faster deployment.
+* **Customizable & Flexible** – Modify the UI to align with your brand's identity.
+* **Cross-Platform Compatibility** – Works seamlessly across iOS and Android platforms.
+* **Scalable & Reliable** – Built on CometChat's robust chat infrastructure.
+* **Testable** – BLoC pattern with `bloc_test` and `mocktail` for comprehensive testing.
+* **Better Performance** – ~500-2000ms faster startup, no decorator chain overhead.
-## Integrate with AI Coding Agents
+***
-Use [CometChat Skills](https://github.com/cometchat/cometchat-skills) to add chat to any Flutter project through your AI coding agent. The skill takes an AI-first approach — your agent has a short conversation with you to understand your project and chat requirements, then writes production-grade integration code tailored to the files you already have.
+## **Integration**
-Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and [30+ more agents](https://github.com/cometchat/cometchat-skills).
+### **UI Components (Assemble It Yourself)**
-```bash
-npx @cometchat/skills add
-```
+A collection of individual widgets—like conversation lists, message lists, message composer, etc.—each with built-in chat logic so you can customize every element.
-Use `--ide ` to target a specific IDE (e.g. `--ide cursor`), or `--ide all` to install for all supported IDEs.
+**How It Works**
-Then in your IDE:
+* Import the widgets you need from the UI Kit.
+* Arrange them in your desired layout, applying styling or customization as needed.
+* Each widget integrates with CometChat logic via BLoC and clean architecture layers.
-```
-/cometchat add chat to my app
-```
+**Why It's Great**
-The skill detects your Flutter project structure, navigation setup, 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 routes, screens, and widgets before proposing a placement (route, modal sheet, or tab), shows the plan (which files it will create, modify, and leave untouched), and waits for your approval before writing code. Credentials are saved as a Dart const file or via `--dart-define`.
+* **Flexible Design** – You control the final UI arrangement.
+* **No Extra Overhead** – Implement only the features you need.
+* **Modular** – Use exactly what you want, when you want.
-After the first integration, re-run `/cometchat` anytime to pick from the iteration menu:
+[**Go to V6 Getting Started**](/ui-kit/flutter/getting-started)
-- **Customize look & feel** — theme presets (slack / whatsapp / imessage / discord / notion) or your own brand color
-- **Add a feature** — 40+ features including calls, reactions, polls, AI smart replies, file sharing, presence
-- **Customize a component** — custom message bubbles, headers, composer actions, empty/loading states
-- **Set up production auth** — replace the dev Auth Key with a server-side token endpoint
-- **Set up user management** — server endpoints for creating/updating/deleting CometChat users
-- **Run diagnostics** — verify, drift detection, symptom-to-cause lookup
+***
----
+## **Before Getting Started**
-## Try It
+Before you begin, grasp the fundamental concepts and features offered by CometChat's APIs, SDK, and UI Kit. You can find detailed information in the [Key Concepts](/fundamentals/key-concepts) documentation.
-
-
- Clone and run the Flutter sample project
-
-
+To begin, please follow the [Getting Started](/ui-kit/flutter/getting-started) guide.
----
+***
+
+## **Next Steps for Developers**
+
+1. **Learn the Basics** – [Key Concepts](/fundamentals/key-concepts).
+2. **Follow the Setup Guide** – [V6 Getting Started](/ui-kit/flutter/getting-started)
+3. **Customize UI** – Adjust styles, themes, and widgets.
+4. **Test & Deploy** – Run tests and launch your chat app.
+
+***
+
+## **Helpful Resources**
+
+
+
-## Get Started
+Fully functional sample applications to accelerate your development.
-
-
-
+[View on GitHub](https://github.com/cometchat/cometchat-uikit-flutter)
-
- Install, initialize, and build your first chat screen
----
+
-## Explore
-
-
-
- Browse all prebuilt UI widgets
-
-
- Chat, calling, AI, and extensions
-
-
- Colors, fonts, dark mode, and custom styling
-
-
- Understand CometChat's core concepts
-
-
+Upgrade from V5 to V6 with our step-by-step migration guide.
----
+[View Migration Guide](/ui-kit/flutter/upgrading-from-v5)
-## Resources
-
-
-
- Working reference app
-
-
- Full UI Kit source on GitHub
-
-
- Design resources and prototyping
-
-
- Common issues and fixes
-
-
- Open a support ticket
-
-
- Upgrading from v4
-
+
+
+***
+
+## **Need Help?**
+
+If you need assistance, check out:
+
+* [Developer Community](http://community.cometchat.com/)
+* [Support Portal](https://help.cometchat.com/hc/en-us/requests/new)
diff --git a/ui-kit/flutter/search.mdx b/ui-kit/flutter/search.mdx
index 24244f8a7..370085e21 100644
--- a/ui-kit/flutter/search.mdx
+++ b/ui-kit/flutter/search.mdx
@@ -1,329 +1,214 @@
---
title: "Search"
-description: "A powerful search interface for finding conversations and messages in real time"
+description: "Add CometChat Flutter UI Kit search for conversations and messages with categorized results and navigation callbacks."
---
-
-```json
-{
- "component": "CometChatSearch",
- "package": "cometchat_chat_uikit",
- "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
- "description": "A powerful search interface that allows users to search across conversations and messages in real time with filters and customization options",
- "primaryOutput": {
- "prop": "onMessageClicked",
- "type": "void Function(BaseMessage message)"
- },
- "props": {
- "data": {
- "user": {
- "type": "User?",
- "default": "null",
- "note": "User object for user message search"
- },
- "group": {
- "type": "Group?",
- "default": "null",
- "note": "Group object for group message search"
- },
- "searchFilters": {
- "type": "List?",
- "default": "null",
- "note": "List of filters to be shown in the search screen"
- },
- "searchIn": {
- "type": "List?",
- "default": "null",
- "note": "List of scopes to be shown in the search result"
- }
- },
- "callbacks": {
- "onBack": "VoidCallback?",
- "onConversationClicked": "void Function(Conversation conversation)?",
- "onMessageClicked": "void Function(BaseMessage message)?",
- "onError": "OnError?",
- "onConversationsLoad": "OnLoad?",
- "onMessagesLoad": "OnLoad?",
- "onEmpty": "OnEmpty?"
- },
- "visibility": {
- "usersStatusVisibility": {
- "type": "bool?",
- "default": "null"
- },
- "receiptsVisibility": {
- "type": "bool?",
- "default": "null"
- },
- "groupTypeVisibility": {
- "type": "bool?",
- "default": "null"
- }
- },
- "viewSlots": {
- "loadingStateView": "WidgetBuilder?",
- "errorStateView": "WidgetBuilder?",
- "emptyStateView": "WidgetBuilder?",
- "initialStateView": "WidgetBuilder?",
- "conversationItemView": "Widget? Function(BuildContext, Conversation)?",
- "conversationTitleView": "Widget? Function(BuildContext, Conversation)?",
- "conversationLeadingView": "Widget? Function(BuildContext, Conversation)?",
- "conversationSubtitleView": "Widget? Function(BuildContext, Conversation)?",
- "conversationTailView": "Widget? Function(BuildContext, Conversation)?",
- "searchTextMessageView": "Widget? Function(BuildContext, TextMessage)?",
- "searchImageMessageView": "Widget? Function(BuildContext, MediaMessage)?",
- "searchVideoMessageView": "Widget? Function(BuildContext, MediaMessage)?",
- "searchFileMessageView": "Widget? Function(BuildContext, MediaMessage)?",
- "searchAudioMessageView": "Widget? Function(BuildContext, MediaMessage)?",
- "searchMessageLinkView": "Widget? Function(BuildContext, BaseMessage)?"
- },
- "formatting": {
- "dateSeparatorFormatterCallback": {
- "type": "DateTimeFormatterCallback?",
- "default": "null"
- },
- "timeSeparatorFormatterCallback": {
- "type": "DateTimeFormatterCallback?",
- "default": "null"
- }
- }
+`CometChatSearch` provides unified search functionality across conversations and messages. In V6, it uses a single consolidated `SearchBloc` replacing the three separate controllers from V5.
+
+
+
+
+
+---
+
+## Where It Fits
+
+`CometChatSearch` is typically launched from a search button in the conversations list or message header. It searches across both conversations and messages, displaying results in categorized sections.
+
+
+
+```dart
+CometChatSearch(
+ onConversationItemClick: (conversation) {
+ // Navigate to conversation
},
- "events": [],
- "sdkListeners": [],
- "compositionExample": {
- "description": "CometChatSearch can be used standalone or embedded within other screens",
- "components": ["CometChatConversations", "CometChatMessageList"],
- "flow": "User searches → Results displayed → User clicks result → Navigate to conversation/message"
+ onMessageItemClick: (message) {
+ // Navigate to message in context
},
- "types": {
- "SearchFilter": {
- "label": "String",
- "icon": "Widget?"
- },
- "SearchScope": {
- "conversations": "bool",
- "messages": "bool"
- }
- }
-}
+)
```
-
+
+
-## Where It Fits
+---
-CometChatSearch is a full-screen search experience that allows users to find messages, conversations, media, and more through an intuitive and filterable search interface. It can be embedded in multiple contexts — as part of the conversation list, message header, or as a standalone full-screen search experience.
+## Quick Start
-
-
-
+Using Navigator:
-## Minimal Render
+
+
+```dart
+Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatSearch()));
+```
+
+
-The simplest way to render CometChatSearch:
+Embedding as a widget:
```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:flutter/material.dart';
-
-// Using Navigator to launch CometChatSearch
-Navigator.push(
- context,
- MaterialPageRoute(builder: (context) => CometChatSearch())
-);
+@override
+Widget build(BuildContext context) {
+ return Scaffold(
+ body: SafeArea(
+ child: CometChatSearch(),
+ ),
+ );
+}
```
-You can also embed it as a widget:
+Launching from conversations with search button:
```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:flutter/material.dart';
-
-class SearchScreen extends StatelessWidget {
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: SafeArea(
- child: CometChatSearch(),
+CometChatConversations(
+ hideSearch: false,
+ searchReadOnly: true,
+ onSearchTap: () {
+ Navigator.push(context, MaterialPageRoute(
+ builder: (context) => CometChatSearch(
+ onConversationItemClick: (conversation) {
+ // Navigate to chat
+ },
+ onMessageItemClick: (message) {
+ // Navigate to message
+ },
),
- );
- }
-}
+ ));
+ },
+)
```
-## Filtering
+Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()` and a user logged in.
-Use the request builder props to filter which items appear in the search results.
+---
-### ConversationsRequestBuilder
+## Actions and Events
-Filter conversations in the search results:
+### Callback Methods
+
+#### `onConversationItemClick`
+
+Fires when a conversation result is tapped.
```dart
CometChatSearch(
- conversationsRequestBuilder: ConversationsRequestBuilder()
- ..limit = 30,
+ onConversationItemClick: (conversation) {
+ final entity = conversation.conversationWith;
+ if (entity is User) {
+ navigateToUserChat(entity);
+ } else if (entity is Group) {
+ navigateToGroupChat(entity);
+ }
+ },
)
```
-### MessagesRequestBuilder
+#### `onMessageItemClick`
-Filter messages in the search results:
+Fires when a message result is tapped.
```dart
CometChatSearch(
- messagesRequestBuilder: MessagesRequestBuilder()
- ..limit = 50,
+ onMessageItemClick: (message) {
+ // Navigate to the message in its conversation
+ },
)
```
-### Scoped Search
+#### `onBack`
-Search within a specific user or group conversation:
+Fires when the user presses the back button.
```dart
-// Search within a specific user's conversation
-CometChatSearch(
- user: user,
-)
-
-// Search within a specific group's conversation
CometChatSearch(
- group: group,
+ onBack: () {
+ Navigator.pop(context);
+ },
)
```
-## Actions and Events
-
-### Callback Props
-
-Component-level callbacks that fire on specific user interactions:
+#### `onError`
-| Callback | Signature | Fires When |
-|----------|-----------|------------|
-| `onConversationClicked` | `void Function(Conversation conversation)?` | User clicks a conversation from search results |
-| `onMessageClicked` | `void Function(BaseMessage message)?` | User clicks a message from search results |
-| `onBack` | `VoidCallback?` | User clicks the back button |
-| `onError` | `OnError?` | An error occurs in the component |
-| `onConversationsLoad` | `OnLoad?` | Conversations are loaded |
-| `onMessagesLoad` | `OnLoad?` | Messages are loaded |
-| `onEmpty` | `OnEmpty?` | Search results are empty |
+Fires on internal errors.
```dart
CometChatSearch(
- onConversationClicked: (conversation) {
- // Navigate to the conversation
- print('Conversation clicked: ${conversation.conversationId}');
- },
- onMessageClicked: (message) {
- // Navigate to the message
- print('Message clicked: ${message.id}');
- },
- onBack: () {
- Navigator.pop(context);
- },
onError: (e) {
- print('Error: $e');
+ debugPrint("Search error: ${e.message}");
},
)
```
-### Global UI Events
-
-The CometChatSearch component does not produce any global UI events.
+---
-## Custom View Slots
+## Functionality
-Customize the appearance of CometChatSearch by replacing default views with your own widgets.
+| Property | Type | Default | Description |
+|---|---|---|---|
+| `showBackButton` | `bool?` | `true` | Toggle back button visibility |
+| `placeholder` | `String?` | `null` | Search input placeholder text |
+| `hideConversationResults` | `bool?` | `false` | Hide conversation search results |
+| `hideMessageResults` | `bool?` | `false` | Hide message search results |
-### State Views
+---
-| Slot | Signature | Replaces |
-|------|-----------|----------|
-| `loadingStateView` | `WidgetBuilder?` | Loading spinner |
-| `emptyStateView` | `WidgetBuilder?` | Empty state display |
-| `errorStateView` | `WidgetBuilder?` | Error state display |
-| `initialStateView` | `WidgetBuilder?` | Initial state before search |
+## Custom View Slots
-### Conversation View Slots
+### Conversation Item View
-| Slot | Signature | Replaces |
-|------|-----------|----------|
-| `conversationItemView` | `Widget? Function(BuildContext, Conversation)?` | Entire conversation list item |
-| `conversationLeadingView` | `Widget? Function(BuildContext, Conversation)?` | Avatar / left section |
-| `conversationTitleView` | `Widget? Function(BuildContext, Conversation)?` | Name / title text |
-| `conversationSubtitleView` | `Widget? Function(BuildContext, Conversation)?` | Secondary text / preview |
-| `conversationTailView` | `Widget? Function(BuildContext, Conversation)?` | Right section / timestamp |
+Replace the conversation result item.
-### Message View Slots
+
+
+```dart
+CometChatSearch(
+ conversationItemView: (conversation, context) {
+ return ListTile(
+ leading: CircleAvatar(child: Text(conversation.conversationWith?.name?[0] ?? "")),
+ title: Text(conversation.conversationWith?.name ?? ""),
+ );
+ },
+)
+```
+
+
-| Slot | Signature | Replaces |
-|------|-----------|----------|
-| `searchTextMessageView` | `Widget? Function(BuildContext, TextMessage)?` | Text message item |
-| `searchImageMessageView` | `Widget? Function(BuildContext, MediaMessage)?` | Image message item |
-| `searchVideoMessageView` | `Widget? Function(BuildContext, MediaMessage)?` | Video message item |
-| `searchFileMessageView` | `Widget? Function(BuildContext, MediaMessage)?` | File message item |
-| `searchAudioMessageView` | `Widget? Function(BuildContext, MediaMessage)?` | Audio message item |
-| `searchMessageLinkView` | `Widget? Function(BuildContext, BaseMessage)?` | Link message item |
+### Message Item View
-### Example: Custom Text Message View
+Replace the message result item.
```dart
CometChatSearch(
- searchTextMessageView: (context, message) {
- String senderName = message.sender?.name ?? "Unknown";
- return Container(
- padding: const EdgeInsets.all(16),
- width: double.infinity,
- color: const Color(0xFFE8E4F3),
- child: Row(
- children: [
- Text(
- "$senderName: ",
- style: const TextStyle(
- color: Color(0xFF6B4FBB),
- fontSize: 16,
- fontWeight: FontWeight.bold,
- ),
- ),
- Expanded(
- child: Text(
- message.text,
- maxLines: 1,
- overflow: TextOverflow.ellipsis,
- style: const TextStyle(
- color: Color(0xFF4A4A4A),
- fontSize: 16,
- ),
- ),
- ),
- ],
- ),
+ messageItemView: (message, context) {
+ return ListTile(
+ title: Text(message.sender?.name ?? ""),
+ subtitle: message is TextMessage ? Text(message.text) : Text("Media message"),
);
},
)
@@ -331,165 +216,81 @@ CometChatSearch(
-
-
-
+### State Views
-### Icon Customization
+
+
+```dart
+CometChatSearch(
+ emptyStateView: (context) => Center(child: Text("No results found")),
+ errorStateView: (context) => Center(child: Text("Search failed")),
+ loadingStateView: (context) => Center(child: CircularProgressIndicator()),
+)
+```
+
+
-| Prop | Type | Description |
-|------|------|-------------|
-| `searchBackIcon` | `Widget?` | Custom back icon |
-| `searchClearIcon` | `Widget?` | Custom clear icon |
+---
-## Styling
+## Advanced
-Customize the appearance of CometChatSearch using `CometChatSearchStyle`.
+### BLoC Access
-
-
-
+The search widget uses `SearchBloc` internally:
+
+| Component | Description |
+|---|---|
+| `SearchBloc` | Single consolidated BLoC for all search types |
+| `SearchEvent` | Events: `SearchTextChanged`, `ClearSearch`, `LoadMoreConversationResults`, `LoadMoreMessageResults` |
+| `SearchState` | Search state with conversation and message results |
+
+### V5 → V6 Migration
+
+| V5 | V6 |
+|---|---|
+| `CometChatSearchController` | `SearchBloc` |
+| `CometChatConversationsSearchController` | Merged into `SearchBloc` |
+| `CometChatMessagesSearchController` | Merged into `SearchBloc` |
+| `SearchUtils` | Inlined into `SearchBloc` |
+| 3 separate controllers | 1 unified BLoC |
+
+---
+
+## Style
```dart
CometChatSearch(
searchStyle: CometChatSearchStyle(
- backgroundColor: const Color(0xFFEDEAFA),
- searchBackgroundColor: Colors.white,
- searchTextColor: Colors.black,
- searchPlaceHolderTextColor: Colors.grey,
-
- // Filter chip styling
- searchFilterChipBackgroundColor: Colors.grey[200],
- searchFilterChipSelectedBackgroundColor: Colors.purple,
- searchFilterChipTextColor: Colors.black,
- searchFilterChipSelectedTextColor: Colors.white,
-
- // Conversation item styling
- searchConversationItemBackgroundColor: const Color(0xFFEDEAFA),
- searchConversationTitleTextStyle: const TextStyle(fontWeight: FontWeight.bold),
- searchConversationSubTitleTextStyle: const TextStyle(color: Colors.grey),
-
- // Message item styling
- searchMessageItemBackgroundColor: const Color(0xFFEDEAFA),
- searchMessageTitleTextStyle: const TextStyle(fontWeight: FontWeight.bold),
-
- // See more button
- searchSeeMoreColor: Colors.purple,
+ backgroundColor: Colors.white,
+ searchBoxBackgroundColor: Color(0xFFF5F5F5),
+ searchBoxBorderRadius: BorderRadius.circular(12),
),
)
```
-### Style Properties
-
-| Property | Type | Description |
-|----------|------|-------------|
-| `backgroundColor` | `Color?` | Background color of the search component |
-| `searchBackgroundColor` | `Color?` | Background color of the search text field |
-| `searchBorder` | `BorderSide?` | Border of the search text field |
-| `searchBorderRadius` | `BorderRadius?` | Border radius of the search text field |
-| `searchTextColor` | `Color?` | Color of the search text |
-| `searchTextStyle` | `TextStyle?` | Style of the search text |
-| `searchPlaceHolderTextColor` | `Color?` | Color of the placeholder text |
-| `searchPlaceHolderTextStyle` | `TextStyle?` | Style of the placeholder text |
-| `searchBackIconColor` | `Color?` | Color of the back icon |
-| `searchClearIconColor` | `Color?` | Color of the clear icon |
-| `searchFilterChipBackgroundColor` | `Color?` | Background color of filter chips |
-| `searchFilterChipSelectedBackgroundColor` | `Color?` | Background color of selected filter chips |
-| `searchFilterChipTextColor` | `Color?` | Text color of filter chips |
-| `searchFilterChipTextStyle` | `TextStyle?` | Text style of filter chips |
-| `searchFilterChipSelectedTextColor` | `Color?` | Text color of selected filter chips |
-| `searchFilterChipSelectedTextStyle` | `TextStyle?` | Text style of selected filter chips |
-| `searchFilterIconColor` | `Color?` | Color of filter icons |
-| `searchFilterSelectedIconColor` | `Color?` | Color of selected filter icons |
-| `searchFilterChipBorder` | `Border?` | Border of filter chips |
-| `searchFilterChipSelectedBorder` | `Border?` | Border of selected filter chips |
-| `searchFilterChipBorderRadius` | `BorderRadius?` | Border radius of filter chips |
-| `searchSectionHeaderTextColor` | `Color?` | Color of section header text |
-| `searchSectionHeaderTextStyle` | `TextStyle?` | Style of section header text |
-| `searchConversationItemBackgroundColor` | `Color?` | Background color of conversation items |
-| `searchConversationTitleTextColor` | `Color?` | Text color of conversation titles |
-| `searchConversationTitleTextStyle` | `TextStyle?` | Style of conversation titles |
-| `searchConversationSubTitleTextStyle` | `TextStyle?` | Style of conversation subtitles |
-| `searchConversationTitleSubTextColor` | `Color?` | Text color of conversation subtitles |
-| `searchConversationDateTextColor` | `Color?` | Text color of conversation dates |
-| `searchConversationDateTextStyle` | `TextStyle?` | Style of conversation dates |
-| `searchMessageItemBackgroundColor` | `Color?` | Background color of message items |
-| `searchMessageTitleTextColor` | `Color?` | Text color of message titles |
-| `searchMessageTitleTextStyle` | `TextStyle?` | Style of message titles |
-| `searchMessageSubTitleTextColor` | `Color?` | Text color of message subtitles |
-| `searchMessageSubTitleTextStyle` | `TextStyle?` | Style of message subtitles |
-| `searchMessageTimeStampStyle` | `CometChatDateStyle?` | Style of message timestamps |
-| `searchMessageDateSeparatorStyle` | `CometChatDateStyle?` | Style of date separators |
-| `searchEmptyStateTextColor` | `Color?` | Text color for empty state |
-| `searchEmptyStateTextStyle` | `TextStyle?` | Style for empty state text |
-| `searchEmptyStateSubtitleColor` | `Color?` | Color for empty state subtitle |
-| `searchEmptyStateSubtitleStyle` | `TextStyle?` | Style for empty state subtitle |
-| `searchErrorStateTextColor` | `Color?` | Text color for error state |
-| `searchErrorStateTextStyle` | `TextStyle?` | Style for error state text |
-| `searchErrorStateSubtitleColor` | `Color?` | Color for error state subtitle |
-| `searchErrorStateSubtitleStyle` | `TextStyle?` | Style for error state subtitle |
-| `searchSeeMoreColor` | `Color?` | Color of "See More" button |
-| `searchSeeMoreStyle` | `TextStyle?` | Style of "See More" button |
-| `avatarStyle` | `CometChatAvatarStyle?` | Style for avatars |
-| `badgeStyle` | `CometChatBadgeStyle?` | Style for badges |
-
-## Props Reference
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `user` | `User?` | `null` | User object for scoped search |
-| `group` | `Group?` | `null` | Group object for scoped search |
-| `searchFilters` | `List?` | `null` | List of filters to show |
-| `searchIn` | `List?` | `null` | List of search scopes |
-| `usersStatusVisibility` | `bool?` | `null` | Show/hide user status indicator |
-| `receiptsVisibility` | `bool?` | `null` | Show/hide message receipts |
-| `groupTypeVisibility` | `bool?` | `null` | Show/hide group type icon |
-| `onBack` | `VoidCallback?` | `null` | Back button callback |
-| `onConversationClicked` | `Function(Conversation)?` | `null` | Conversation click callback |
-| `onMessageClicked` | `Function(BaseMessage)?` | `null` | Message click callback |
-| `onError` | `OnError?` | `null` | Error callback |
-| `onConversationsLoad` | `OnLoad?` | `null` | Conversations load callback |
-| `onMessagesLoad` | `OnLoad?` | `null` | Messages load callback |
-| `onEmpty` | `OnEmpty?` | `null` | Empty state callback |
-| `loadingStateView` | `WidgetBuilder?` | `null` | Custom loading view |
-| `errorStateView` | `WidgetBuilder?` | `null` | Custom error view |
-| `emptyStateView` | `WidgetBuilder?` | `null` | Custom empty view |
-| `initialStateView` | `WidgetBuilder?` | `null` | Custom initial view |
-| `conversationItemView` | `Widget? Function(BuildContext, Conversation)?` | `null` | Custom conversation item |
-| `conversationTitleView` | `Widget? Function(BuildContext, Conversation)?` | `null` | Custom conversation title |
-| `conversationLeadingView` | `Widget? Function(BuildContext, Conversation)?` | `null` | Custom conversation leading view |
-| `conversationSubtitleView` | `Widget? Function(BuildContext, Conversation)?` | `null` | Custom conversation subtitle |
-| `conversationTailView` | `Widget? Function(BuildContext, Conversation)?` | `null` | Custom conversation tail view |
-| `searchTextMessageView` | `Widget? Function(BuildContext, TextMessage)?` | `null` | Custom text message view |
-| `searchImageMessageView` | `Widget? Function(BuildContext, MediaMessage)?` | `null` | Custom image message view |
-| `searchVideoMessageView` | `Widget? Function(BuildContext, MediaMessage)?` | `null` | Custom video message view |
-| `searchFileMessageView` | `Widget? Function(BuildContext, MediaMessage)?` | `null` | Custom file message view |
-| `searchAudioMessageView` | `Widget? Function(BuildContext, MediaMessage)?` | `null` | Custom audio message view |
-| `searchMessageLinkView` | `Widget? Function(BuildContext, BaseMessage)?` | `null` | Custom link message view |
-| `searchBackIcon` | `Widget?` | `null` | Custom back icon |
-| `searchClearIcon` | `Widget?` | `null` | Custom clear icon |
-| `dateSeparatorFormatterCallback` | `DateTimeFormatterCallback?` | `null` | Date separator formatter |
-| `timeSeparatorFormatterCallback` | `DateTimeFormatterCallback?` | `null` | Time separator formatter |
-| `conversationsProtocol` | `ConversationsBuilderProtocol?` | `null` | Conversations builder protocol |
-| `conversationsRequestBuilder` | `ConversationsRequestBuilder?` | `null` | Conversations request builder |
-| `messagesRequestBuilder` | `MessagesRequestBuilder?` | `null` | Messages request builder |
-| `searchStyle` | `CometChatSearchStyle?` | `null` | Style configuration |
+
+
+
+
+---
+
+## Next Steps
- Display and manage chat conversations
+ Browse recent conversations
Display messages in a conversation
-
- Learn how to customize the look and feel
+
+ Detailed styling reference
-
- Support multiple languages in your app
+
+ Browse available users
diff --git a/ui-kit/flutter/shortcut-formatter-guide.mdx b/ui-kit/flutter/shortcut-formatter-guide.mdx
index fe48d6ae7..e00760c42 100644
--- a/ui-kit/flutter/shortcut-formatter-guide.mdx
+++ b/ui-kit/flutter/shortcut-formatter-guide.mdx
@@ -1,311 +1,20 @@
---
title: "Shortcut Formatter"
-description: "Provide !shortcut style expansions invoking extension APIs or dialogs before inserting content in CometChat Flutter UI Kit."
+description: "Implement shortcut formatting in CometChat Flutter UI Kit with CometChatTextFormatter, trigger characters, and message shortcuts."
---
-
-
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_chat_uikit` |
-| Key class | `ShortcutFormatter` (extends `CometChatTextFormatter`) |
-| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login(uid)` |
-| Purpose | Provide !shortcut style expansions invoking extension APIs |
-| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
-| Related | [Custom Text Formatter](/ui-kit/flutter/custom-text-formatter-guide) · [All Guides](/ui-kit/flutter/guide-overview) |
-
-
-
## Introduction
-The `ShortcutFormatter` class extends the `CometChatTextFormatter` class to provide a mechanism for handling shortcuts within messages. This guide will walk you through the process of using ShortcutFormatter to implement shortcut extensions in your CometChat application.
+The `ShortcutFormatter` class extends `CometChatTextFormatter` to handle shortcuts within messages. This guide walks you through implementing shortcut extensions in your CometChat V6 application.
## Setup
-1. **Create the ShortcutFormatter Class**: Define the `ShortcutFormatter` class by extending the `CometChatTextFormatter` class.
-
-
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
-class ShortcutFormatter extends CometChatTextFormatter {
-
-}
-```
-
-
-
-
-
-2. **Init**: Initialize the `messageShortcuts` map and `shortcuts` list in the init().
-
-
-
-```dart
-@override
-void init() {
- trackingCharacter ??= "!";
-}
-```
-
-
-
-
-
-3. **Prepare Shortcuts**: Implement the `prepareShortcuts()` method to fetch shortcuts from the server using CometChat extension.
-
-
-
-```dart
-bool isShortcutTracking = false;
-
-void prepareShortcuts(TextEditingController textEditingController) {
- CometChat.callExtension('message-shortcuts', 'GET', '/v1/fetch', null,
- onSuccess: (map) {
- if (map.isNotEmpty) {
- Map data = map["data"];
- if (data.isNotEmpty) {
- Map shortcuts = data["shortcuts"];
- if (shortcuts.isNotEmpty) {
- parseData(
- shortcuts: shortcuts,
- textEditingController: textEditingController
- );
- }
- }
- }
- }, onError: (error) {});
-}
-
-void parseData({Map? shortcuts, required TextEditingController textEditingController}) async {
- if (shortcuts == null || shortcuts.isEmpty) {
- suggestionListEventSink?.add([]);
- if (onSearch != null) {
- onSearch!(null);
- }
- CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
- } else {
- CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
- if (suggestionListEventSink != null && shortcuts.isNotEmpty) {
- List list = [];
- shortcuts.forEach((key, value) => list.add(SuggestionListItem(
- id: key,
- title: "$key → $value",
- onTap: () {
- int cursorPos = textEditingController.selection.base.offset;
- String textOnLeftOfValue = textEditingController.text.substring(0, cursorPos - 1);
- String textOnRightOfValue = textEditingController.text.substring(cursorPos);
- textEditingController.text = "$textOnLeftOfValue$value $textOnRightOfValue";
- updatePreviousText(textEditingController.text);
- textEditingController.selection = TextSelection(
- baseOffset: cursorPos - 1 + "$value".length + 1,
- extentOffset: cursorPos - 1 + "$value".length + 1,
- );
- resetMatchTracker();
- isShortcutTracking = false;
- CometChatUIEvents.hidePanel(
- composerId, CustomUIPosition.composerPreview
- );
- })
- ));
- suggestionListEventSink?.add(list);
- }
- }
-}
-
-void updatePreviousText(String text) {
- if (previousTextEventSink != null) {
- previousTextEventSink!.add(text);
- }
-}
-
-void resetMatchTracker() {
- suggestionListEventSink?.add([]);
- if (onSearch != null) {
- onSearch!(null);
- }
-}
-```
-
-
-
-
-
-4. **Override onChange Method**: Override the `onChange()` method to search for shortcuts based on the entered query.
-
-
-
-```dart
-@override
-void onChange(TextEditingController textEditingController, String previousText) {
- var cursorPosition = textEditingController.selection.base.offset;
- if (textEditingController.text.isEmpty) {
- resetMatchTracker();
- if (previousText.length > textEditingController.text.length) {
- if (previousText[cursorPosition] == trackingCharacter && isShortcutTracking) {
- isShortcutTracking = false;
- if (onSearch != null) {
- onSearch!(null);
- }
- CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
- }
- return;
- }
- }
-
- if (previousText.length > textEditingController.text.length) {
- if (previousText[cursorPosition] == trackingCharacter) {
- isShortcutTracking = false;
- if (onSearch != null) {
- onSearch!(null);
- }
- CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
- }
- } else {
- String previousCharacter = cursorPosition == 0 ? "" : textEditingController.text[cursorPosition - 1];
- bool isSpace = cursorPosition == 1 || (textEditingController.text.length > 1 && cursorPosition > 1 && (textEditingController.text[cursorPosition - 2] == " " || textEditingController.text[cursorPosition - 2] == "\n"));
-
- if (isShortcutTracking) {
- isShortcutTracking = false;
- if (onSearch != null) {
- onSearch!(null);
- }
- CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
- } else if (previousCharacter == trackingCharacter && isSpace) {
- isShortcutTracking = true;
- if (onSearch != null) {
- onSearch!(trackingCharacter);
- }
- CometChatUIEvents.showPanel(composerId, CustomUIPosition.composerPreview, (context) => getLoadingIndicator(context, cometChatTheme));
- prepareShortcuts(textEditingController);
- }
- }
-}
-```
-
-
-
-
-
-5. **Handle Scroll to Bottom**: Override the `onScrollToBottom()` method if needed.
-
-
-
-```dart
-@override
-void onScrollToBottom(TextEditingController textEditingController) {
- // TODO: implement onScrollToBottom
-}
-```
-
-
-
-
-
-6. **Additional Base Class Methods**: The `CometChatTextFormatter` base class provides additional methods you can override for advanced customization:
-
-
-
-```dart
-/// Override to customize the text style in message bubbles
-@override
-TextStyle getMessageBubbleTextStyle(BuildContext context, BubbleAlignment? alignment, {bool forConversation = false}) {
- return TextStyle(
- color: alignment == BubbleAlignment.right ? Colors.white : Colors.black,
- fontSize: 14,
- fontWeight: FontWeight.bold,
- );
-}
-
-/// Override to build custom attributed text for the input field
-@override
-List buildInputFieldText({
- required BuildContext context,
- TextStyle? style,
- required bool withComposing,
- required String text,
- List? existingAttributes,
-}) {
- return existingAttributes ?? [];
-}
-
-/// Override to get attributed text for styling in message bubbles
-@override
-List getAttributedText(
- String text,
- BuildContext context,
- BubbleAlignment? alignment, {
- List? existingAttributes,
- Function(String)? onTap,
- bool forConversation = false,
-}) {
- // Custom implementation
- return super.getAttributedText(text, context, alignment,
- existingAttributes: existingAttributes,
- onTap: onTap,
- forConversation: forConversation);
-}
-```
-
-
-
-
-
-***
-
-## Usage
-
-The widgets [CometChatConversations](/ui-kit/flutter/conversations), [CometChatMessageComposer](/ui-kit/flutter/message-composer) and [CometChatMessageList](/ui-kit/flutter/message-list) have a property called `textFormatters` which accepts a list of CometChatTextFormatter to format the text. The code shared below `textFormatters` consisting of the above created Shortcuts formatter being passed down to [CometChatMessageComposer](/ui-kit/flutter/message-composer) from [CometChatConversationsWithMessages](/ui-kit/flutter/conversations) with help of configurations.
-
-
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:flutter/material.dart';
-import 'shortcut_formatter.dart';
-
-class ShortcutFormatterExample extends StatefulWidget {
- const ShortcutFormatterExample({super.key});
-
- @override
- State createState() => _ShortcutFormatterExampleState();
-}
-
-class _ShortcutFormatterExampleState extends State {
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: SafeArea(
- child: CometChatConversationsWithMessages(
- messageConfiguration: MessageConfiguration(
- messageComposerConfiguration: MessageComposerConfiguration(
- textFormatters: [ShortcutFormatter()],
- ),
- )
- ),
- ),
- );
- }
-}
-```
-
-
-
-
-
-***
-
-## Example
-
-Here is the complete example for reference:
+1. Create the ShortcutFormatter class by extending `CometChatTextFormatter`:
```dart
import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:flutter/material.dart';
class ShortcutFormatter extends CometChatTextFormatter {
@override
@@ -317,79 +26,60 @@ class ShortcutFormatter extends CometChatTextFormatter {
void prepareShortcuts(TextEditingController textEditingController) {
CometChat.callExtension('message-shortcuts', 'GET', '/v1/fetch', null,
- onSuccess: (map) {
- if (map.isNotEmpty) {
- Map data = map["data"];
- if (data.isNotEmpty) {
- Map shortcuts = data["shortcuts"];
- if (shortcuts.isNotEmpty) {
- parseData(
- shortcuts: shortcuts,
- textEditingController: textEditingController);
- }
+ onSuccess: (map) {
+ if (map.isNotEmpty) {
+ Map data = map["data"];
+ if (data.isNotEmpty) {
+ Map shortcuts = data["shortcuts"];
+ if (shortcuts.isNotEmpty) {
+ parseData(shortcuts: shortcuts, textEditingController: textEditingController);
}
}
- }, onError: (error) {});
+ }
+ },
+ onError: (error) {},
+ );
}
void parseData({Map? shortcuts, required TextEditingController textEditingController}) async {
if (shortcuts == null || shortcuts.isEmpty) {
suggestionListEventSink?.add([]);
- if (onSearch != null) {
- onSearch!(null);
- }
+ if (onSearch != null) onSearch!(null);
CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
} else {
CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
if (suggestionListEventSink != null && shortcuts.isNotEmpty) {
List list = [];
shortcuts.forEach((key, value) => list.add(SuggestionListItem(
- id: key,
- title: "$key → $value",
- onTap: () {
- int cursorPos = textEditingController.selection.base.offset;
- String textOnLeftOfValue = textEditingController.text.substring(0, cursorPos - 1);
- String textOnRightOfValue = textEditingController.text.substring(cursorPos);
- textEditingController.text = "$textOnLeftOfValue$value $textOnRightOfValue";
- updatePreviousText(textEditingController.text);
- textEditingController.selection = TextSelection(
- baseOffset: cursorPos - 1 + "$value".length + 1,
- extentOffset: cursorPos - 1 + "$value".length + 1,
- );
- resetMatchTracker();
- isShortcutTracking = false;
- CometChatUIEvents.hidePanel(
- composerId, CustomUIPosition.composerPreview
- );
- })
- ));
+ id: key,
+ title: "$key → $value",
+ onTap: () {
+ int cursorPos = textEditingController.selection.base.offset;
+ String left = textEditingController.text.substring(0, cursorPos - 1);
+ String right = textEditingController.text.substring(cursorPos);
+ textEditingController.text = "$left$value $right";
+ updatePreviousText(textEditingController.text);
+ textEditingController.selection = TextSelection(
+ baseOffset: cursorPos - 1 + "$value".length + 1,
+ extentOffset: cursorPos - 1 + "$value".length + 1,
+ );
+ resetMatchTracker();
+ isShortcutTracking = false;
+ CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
+ },
+ )));
suggestionListEventSink?.add(list);
}
}
}
void updatePreviousText(String text) {
- if (previousTextEventSink != null) {
- previousTextEventSink!.add(text);
- }
+ previousTextEventSink?.add(text);
}
void resetMatchTracker() {
suggestionListEventSink?.add([]);
- if (onSearch != null) {
- onSearch!(null);
- }
- }
-
- @override
- TextStyle getMessageInputTextStyle(CometChatTheme theme) {
- // TODO: implement getMessageInputTextStyle
- throw UnimplementedError();
- }
-
- @override
- void handlePreMessageSend(BuildContext context, BaseMessage baseMessage) {
- // TODO: implement handlePreMessageSend
+ if (onSearch != null) onSearch!(null);
}
@override
@@ -397,97 +87,54 @@ class ShortcutFormatter extends CometChatTextFormatter {
var cursorPosition = textEditingController.selection.base.offset;
if (textEditingController.text.isEmpty) {
resetMatchTracker();
- if (previousText.length > textEditingController.text.length) {
- if (previousText[cursorPosition] == trackingCharacter && isShortcutTracking) {
- isShortcutTracking = false;
- if (onSearch != null) {
- onSearch!(null);
- }
- CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
- }
- return;
- }
+ return;
}
+ // Handle shortcut tracking logic
+ String previousCharacter = cursorPosition == 0 ? "" : textEditingController.text[cursorPosition - 1];
+ bool isSpace = cursorPosition == 1 || (textEditingController.text.length > 1 && cursorPosition > 1 &&
+ (textEditingController.text[cursorPosition - 2] == " " || textEditingController.text[cursorPosition - 2] == "\n"));
- if (previousText.length > textEditingController.text.length) {
- if (previousText[cursorPosition] == trackingCharacter) {
- isShortcutTracking = false;
- if (onSearch != null) {
- onSearch!(null);
- }
- CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
- }
- } else {
- String previousCharacter = cursorPosition == 0 ? "" : textEditingController.text[cursorPosition - 1];
- bool isSpace = cursorPosition == 1 || (textEditingController.text.length > 1 && cursorPosition > 1 && (textEditingController.text[cursorPosition - 2] == " " || textEditingController.text[cursorPosition - 2] == "\n"));
-
- if (isShortcutTracking) {
- isShortcutTracking = false;
- if (onSearch != null) {
- onSearch!(null);
- }
- CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
- } else if (previousCharacter == trackingCharacter && isSpace) {
- isShortcutTracking = true;
- if (onSearch != null) {
- onSearch!(trackingCharacter);
- }
- CometChatUIEvents.showPanel(composerId, CustomUIPosition.composerPreview, (context) => getLoadingIndicator(context, cometChatTheme));
- prepareShortcuts(textEditingController);
- }
+ if (isShortcutTracking) {
+ isShortcutTracking = false;
+ if (onSearch != null) onSearch!(null);
+ CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
+ } else if (previousCharacter == trackingCharacter && isSpace) {
+ isShortcutTracking = true;
+ if (onSearch != null) onSearch!(trackingCharacter);
+ CometChatUIEvents.showPanel(composerId, CustomUIPosition.composerPreview,
+ (context) => getLoadingIndicator(context, cometChatTheme));
+ prepareShortcuts(textEditingController);
}
}
@override
- void onScrollToBottom(TextEditingController textEditingController) {
- // TODO: implement onScrollToBottom
+ TextStyle getMessageInputTextStyle(CometChatTheme theme) {
+ throw UnimplementedError();
}
+
+ @override
+ void handlePreMessageSend(BuildContext context, BaseMessage baseMessage) {}
+
+ @override
+ void onScrollToBottom(TextEditingController textEditingController) {}
}
```
-
-
+## Usage
+
+Pass the `ShortcutFormatter` to the `textFormatters` property of `CometChatMessageComposer`:
+
```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:flutter/material.dart';
-import 'shortcut_formatter.dart';
-
-class ShortcutFormatterExample extends StatefulWidget {
- const ShortcutFormatterExample({super.key});
-
- @override
- State createState() => _ShortcutFormatterExampleState();
-}
-
-class _ShortcutFormatterExampleState extends State {
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: SafeArea(
- child: CometChatConversationsWithMessages(
- messageConfiguration: MessageConfiguration(
- messageComposerConfiguration: MessageComposerConfiguration(
- textFormatters: [ShortcutFormatter()],
- ),
- )
- ),
- ),
- );
- }
-}
+CometChatMessageComposer(
+ user: user,
+ textFormatters: [ShortcutFormatter()],
+)
```
-
-
-
-
-
-***
diff --git a/ui-kit/flutter/sound-manager.mdx b/ui-kit/flutter/sound-manager.mdx
index c70ad5b88..6c319d478 100644
--- a/ui-kit/flutter/sound-manager.mdx
+++ b/ui-kit/flutter/sound-manager.mdx
@@ -1,116 +1,62 @@
---
title: "Sound Manager"
-sidebarTitle: "Sound Manager"
-description: "Manage and customize audio cues for incoming/outgoing calls and messages in CometChat Flutter UI Kit."
+description: "Manage CometChat Flutter UI Kit sounds for incoming and outgoing messages, calls, custom audio, playback, and stop controls."
---
-
+## Overview
-| Field | Value |
-| --- | --- |
-| Package | `cometchat_uikit_shared` |
-| Import | `import 'package:cometchat_uikit_shared/cometchat_uikit_shared.dart';` |
-| Class | `SoundManager` (singleton) |
-| Play sound | `SoundManager().play(sound: Sound.incomingMessage)` |
-| Stop sound | `SoundManager().stop()` |
-| Sound events | `incomingMessage`, `outgoingMessage`, `incomingMessageFromOther`, `incomingCall`, `outgoingCall` |
-| Source | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/shared_uikit/lib/src/resources) |
-
-
-
-`SoundManager` is a singleton helper class for managing and playing audio cues — incoming/outgoing calls and messages.
-
----
+The `SoundManager` is a helper class responsible for managing and playing various types of audio in the CometChat V6 UI Kit. This includes sound events for incoming and outgoing messages and calls.
## Methods
-### play
-
-Plays the default or custom audio for a sound event.
-
-```dart
-void play({
- required Sound sound,
- String? customSound,
- String? packageName,
- bool? isLooping,
-})
-```
+### Play Sound
-| Parameter | Type | Description |
-| --- | --- | --- |
-| `sound` | `Sound` | Required. The sound event type to play |
-| `customSound` | `String?` | Optional. Asset path for custom sound file |
-| `packageName` | `String?` | Optional. Package name when using sounds from another plugin |
-| `isLooping` | `bool?` | Optional. Whether to loop the sound (default: `false`) |
+The SoundManager plays pre-defined or custom sounds based on user interactions with the chat interface.
+
+
```dart
-// Play default sounds
+// Play default sounds:
SoundManager().play(sound: Sound.incomingMessage);
SoundManager().play(sound: Sound.outgoingMessage);
-
-// Play custom sound
-SoundManager().play(
- sound: Sound.outgoingMessage,
- customSound: "assets/custom_sound.wav",
-);
-
-// Play looping sound (e.g., for incoming call)
-SoundManager().play(
- sound: Sound.incomingCall,
- isLooping: true,
-);
```
+
+
-### stop
+### Stop Sound
-Stops any currently playing sound.
+Stop any sound currently being played:
+
+
```dart
SoundManager().stop();
```
-
----
-
-## Sound Enum
-
-| Value | Default Asset | When it plays |
-| --- | --- | --- |
-| `incomingMessage` | `assets/sound/incoming_message.wav` | New message received |
-| `outgoingMessage` | `assets/sound/outgoing_message.wav` | Message sent |
-| `incomingMessageFromOther` | `assets/sound/incoming_message.wav` | Message from another conversation |
-| `incomingCall` | `assets/sound/incoming_call.wav` | Incoming call detected |
-| `outgoingCall` | `assets/sound/outgoing_call.wav` | Outgoing call initiated |
-
----
+
+
## Usage
-```dart
-import 'package:cometchat_uikit_shared/cometchat_uikit_shared.dart';
-
-// Play incoming message sound
-SoundManager().play(sound: Sound.incomingMessage);
-
-// Play outgoing call sound
-SoundManager().play(sound: Sound.outgoingCall);
+Play a custom sound:
-// Play custom notification sound
-SoundManager().play(
- sound: Sound.incomingMessage,
- customSound: "assets/sounds/notification.mp3",
-);
+
+
+```dart
+SoundManager().play(sound: Sound.outgoingMessage, customSound: "assetPath");
+```
+
+
-// Play looping ringtone for incoming call
-SoundManager().play(
- sound: Sound.incomingCall,
- isLooping: true,
-);
+## Sound Enum Reference
-// Stop any playing sound
-SoundManager().stop();
-```
+| Sound | Asset |
+|---|---|
+| incomingMessage | assets/sound/incoming_message.wav |
+| outgoingMessage | assets/sound/outgoing_message.wav |
+| incomingMessageFromOther | assets/sound/incoming_message.wav |
+| outgoingCall | assets/sound/outgoing_call.wav |
+| incomingCall | assets/sound/incoming_call.wav |
-Sound behavior varies by OS when the app is in the background.
+In V6, the `CometChatConversations` widget provides `disableSoundForMessages` and `customSoundForMessages` properties to control sound behavior at the widget level.
diff --git a/ui-kit/flutter/theme-introduction.mdx b/ui-kit/flutter/theme-introduction.mdx
index 417ff033b..6aa14aa30 100644
--- a/ui-kit/flutter/theme-introduction.mdx
+++ b/ui-kit/flutter/theme-introduction.mdx
@@ -1,119 +1,46 @@
---
-title: "Theming"
-sidebarTitle: "Overview"
-description: "Customize the CometChat Flutter UI Kit appearance using ThemeExtensions for colors, fonts, spacing, and dark mode."
+title: "Theming In CometChat Flutter UI Kit V6"
+sidebarTitle: "Theming"
+description: "Customize CometChat Flutter UI Kit themes with color palettes, typography, spacing, light and dark mode, icons, and ThemeExtension."
---
-
+CometChat's theming framework is a robust system that empowers developers to define the look and feel of their applications with precision and consistency. It follows three essential design system principles: Color, Typography, and Shape.
-| Field | Value |
-| --- | --- |
-| Goal | Customize UI Kit appearance (colors, fonts, spacing) via Flutter ThemeExtensions |
-| Where | `ThemeData.extensions` in `MaterialApp` |
-| Color | `CometChatColorPalette` — primary, neutral, alert, text, icon, background colors |
-| Typography | `CometChatTypography` — font sizes, weights, text styles |
-| Spacing | `CometChatSpacing` — padding, margin, border radius |
-| Dark mode | Use separate `CometChatColorPalette` for dark theme |
-| Source | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/shared_uikit/lib/src/theme) |
+> The theming system is identical between V5 and V6. All theme classes, properties, and APIs work the same way.
-
+## Theming Overview
-Theming controls the look and feel of the chat UI — colors, fonts, and spacing — through Flutter's `ThemeExtension` system.
+Theming in the UI Kit consists of three core components:
-
-
-
+- **Color:** Managed through `CometChatColorPalette`, it controls the application's color scheme, including primary, neutral, alert, and text colors.
+- **Typography:** Defined via `CometChatTypography`, it standardizes text styles, such as font size and weight.
+- **Shape:** Configured using `CometChatSpacing`, it defines the structure of margins, paddings, and border radii.
----
-
-## Core Components
-
-| Component | Class | Purpose |
-| --- | --- | --- |
-| Color | `CometChatColorPalette` | Primary, neutral, alert, text, icon, background colors |
-| Typography | `CometChatTypography` | Font sizes, weights, text styles |
-| Spacing | `CometChatSpacing` | Padding, margin, border radius |
+## Key Benefits
-### Typography Tokens
+- Achieve consistent UI design across your application.
+- Support for light and dark themes.
+- Easy scalability and customization for app-specific requirements.
-| Token | Purpose |
-| --- | --- |
-| `heading1` - `heading4` | Heading text styles |
-| `body` | Body text |
-| `caption1`, `caption2` | Caption text |
-| `button` | Button text |
-| `link` | Link text |
-| `title` | Title text |
-
-### Spacing Tokens
+## Light and Dark Themes
-| Token | Default Value |
-| --- | --- |
-| `spacing` - `spacing20` | 2px - 80px (increments of 4) |
-| `padding` - `padding10` | Derived from spacing |
-| `margin` - `margin20` | Derived from spacing |
-| `radius` - `radius6`, `radiusMax` | Border radius values |
+The Chat UI Kit supports both light and dark themes. V6 adds dedicated icon variants:
+- `assets/icons/light/` — light mode icons
+- `assets/icons/dark/` — dark mode icons
+- `assets/icons/svg/calls/` — SVG call icons
----
+## Custom Theme
-## Basic Usage
-
-Override theme properties in your `MaterialApp`:
+The Chat UI Kit offers robust support for creating customized themes using `CometChatColorPalette`, `CometChatTypography`, and `CometChatSpacing` with Flutter's `ThemeExtension`.
-```dart title="main.dart"
-MaterialApp(
- theme: ThemeData(
- fontFamily: 'Roboto',
- extensions: [
- CometChatColorPalette(
- primary: Color(0xFFF76808),
- textPrimary: Color(0xFF141414),
- background1: Color(0xFFFFFFFF),
- ),
- ],
- ),
- home: MyApp(),
-)
-```
-
-
-
----
-
-## Light and Dark Themes
-
-
-
-
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatColorPalette(
- primary: Color(0xFF6852D6),
- textPrimary: Color(0xFF141414),
- textSecondary: Color(0xFF727272),
- background1: Color(0xFFFFFFFF),
- borderLight: Color(0xFFF5F5F5),
- ),
- ],
-)
-```
-
-
```dart
ThemeData(
+ fontFamily: 'Times New Roman',
extensions: [
CometChatColorPalette(
- primary: Color(0xFF6852D6),
- textPrimary: Color(0xFFFFFFFF),
- textSecondary: Color(0xFF989898),
- background1: Color(0xFF1A1A1A),
- borderLight: Color(0xFF272727),
+ primary: Color(0xFFF76808),
),
],
)
@@ -121,50 +48,38 @@ ThemeData(
-
-
-
+## Core Components
----
+### Color
-## Custom Brand Colors
+The `CometChatColorPalette` class manages colors in your app:
-
-
-
+- **Primary Colors:** Base colors and extended shades.
+- **Neutral Colors:** Shades for surfaces and backgrounds.
+- **Alert Colors:** Colors for states like success, error, warning, and info.
+- **Text Colors:** Differentiated for primary, secondary, and disabled states.
-
-
-```dart
-ThemeData(
- fontFamily: 'Times New Roman',
- extensions: [
- CometChatColorPalette(
- primary: Color(0xFFF76808),
- iconHighlight: Color(0xFFF76808),
- extendedPrimary500: Color(0xFFFBAA75),
- ),
- ],
-)
-```
-
-
+### Typography
----
+The `CometChatTypography` class standardizes text styles:
+
+- **Headings:** Text styles for various heading levels.
+- **Body:** Styling for regular text.
+- **Captions:** Smaller text style for labels.
+- **Buttons:** Text style for button text.
+- **Links:** Styles for clickable links.
+- **Titles:** Style for main titles or component headers.
+
+### Spacing
+
+The `CometChatSpacing` class defines layout structure:
+
+- **Padding:** Internal spacing within elements.
+- **Margin:** Space between elements.
+- **Radius:** Corner rounding of UI elements.
+
+## Best Practices
-## Next Steps
-
-
-
- Full list of color tokens
-
-
- Style individual components
-
-
- Customize message bubbles
-
-
- Multi-language support
-
-
+- **Ensure Contrast:** Follow accessibility guidelines to maintain a minimum contrast ratio.
+- **Consistency:** Use a consistent color palette across all components.
+- **Adaptability:** Test your theme in various scenarios, such as low-light and high-contrast environments.
diff --git a/ui-kit/flutter/threaded-messages-header.mdx b/ui-kit/flutter/threaded-messages-header.mdx
index 23e38202c..0d0c357b0 100644
--- a/ui-kit/flutter/threaded-messages-header.mdx
+++ b/ui-kit/flutter/threaded-messages-header.mdx
@@ -1,120 +1,34 @@
---
title: "Threaded Messages Header"
-description: "A widget that displays the parent message of a thread with reply count"
+description: "Header component for threaded conversations showing the parent message, reply count, and thread navigation."
---
-
-```json
-{
- "component": "CometChatThreadedHeader",
- "package": "cometchat_chat_uikit",
- "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
- "description": "A widget that displays the parent message of a thread along with a reply count, used as the header section in threaded message views",
- "primaryOutput": {
- "prop": "messageActionView",
- "type": "Widget Function(BaseMessage message, BuildContext context)?"
- },
- "props": {
- "data": {
- "parentMessage": {
- "type": "BaseMessage",
- "required": true,
- "note": "Parent message for the thread"
- },
- "loggedInUser": {
- "type": "User",
- "required": true,
- "note": "Logged in user object"
- },
- "template": {
- "type": "CometChatMessageTemplate?",
- "default": "null",
- "note": "Message template used in the thread"
- },
- "height": {
- "type": "double?",
- "default": "null",
- "note": "Height of the widget"
- },
- "width": {
- "type": "double?",
- "default": "null",
- "note": "Width of the widget"
- }
- },
- "visibility": {
- "receiptsVisibility": {
- "type": "bool?",
- "default": true
- }
- },
- "viewSlots": {
- "messageActionView": "Widget Function(BaseMessage message, BuildContext context)?"
- }
- },
- "events": [],
- "sdkListeners": [],
- "compositionExample": {
- "description": "CometChatThreadedHeader is typically used within CometChatThreadedMessages as the header component",
- "components": ["CometChatThreadedMessages", "CometChatMessageList", "CometChatMessageComposer"],
- "flow": "Parent message displayed at top → Reply count shown → Message list below with replies"
- },
- "types": {}
-}
-```
-
-
-## Where It Fits
-
-CometChatThreadedHeader is a component that displays the parent message of a thread along with a reply count. It's typically used as part of the ThreadedMessages composite component, appearing at the top of the threaded conversation view.
-
-ThreadedMessages is composed of the following widgets:
-
-| Widget | Description |
-|--------|-------------|
-| [MessageList](/ui-kit/flutter/message-list) | CometChatMessageList displays a list of reply messages |
-| [MessageComposer](/ui-kit/flutter/message-composer) | CometChatMessageComposer helps in writing and sending replies |
+`CometChatThreadedHeader` displays the parent message of a thread along with reply count and provides the container for threaded message list and composer. It enables organized threaded conversations within a chat.
-## Minimal Render
+---
+
+## Where It Fits
-The simplest way to render CometChatThreadedHeader:
+`CometChatThreadedHeader` is used when a user taps "Reply in Thread" on a message. It wraps the parent message display with a `CometChatMessageList` (filtered by `parentMessageId`) and `CometChatMessageComposer` for thread replies.
```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
CometChatThreadedHeader(
- parentMessage: parentMessage, // Required: BaseMessage object
- loggedInUser: loggedInUser, // Required: User object
+ parentMessage: parentMessage,
+ loggedInUser: loggedInUser,
)
```
-You can also launch it using Navigator:
-
-
-
-```dart
-Navigator.push(
- context,
- MaterialPageRoute(
- builder: (context) => CometChatThreadedHeader(
- loggedInUser: loggedInUser,
- parentMessage: parentMessage,
- ),
- ),
-);
-```
-
-
+---
-Or embed it as a widget:
+## Quick Start
@@ -122,21 +36,23 @@ Or embed it as a widget:
import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
import 'package:flutter/material.dart';
-class ThreadMessages extends StatefulWidget {
- const ThreadMessages({super.key});
+class ThreadScreen extends StatelessWidget {
+ final BaseMessage parentMessage;
+ final User loggedInUser;
- @override
- State createState() => _ThreadMessagesState();
-}
+ const ThreadScreen({
+ super.key,
+ required this.parentMessage,
+ required this.loggedInUser,
+ });
-class _ThreadMessagesState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: CometChatThreadedHeader(
- loggedInUser: loggedInUser,
parentMessage: parentMessage,
+ loggedInUser: loggedInUser,
),
),
);
@@ -146,118 +62,97 @@ class _ThreadMessagesState extends State {
-## Actions and Events
-
-### Callback Props
+Typically launched from the message list when a user selects "Reply in Thread":
-The CometChatThreadedHeader component does not have traditional callback props. Instead, it provides a `messageActionView` slot for customizing the action area.
+
+
+```dart
+CometChatMessageList(
+ user: user,
+ onThreadRepliesClick: (message, context, {bubbleView}) {
+ Navigator.push(context, MaterialPageRoute(
+ builder: (context) => ThreadScreen(
+ parentMessage: message,
+ loggedInUser: CometChatUIKit.loggedInUser!,
+ ),
+ ));
+ },
+)
+```
+
+
-### Global UI Events
+Prerequisites: CometChat SDK initialized, a user logged in, and a valid `BaseMessage` object as the parent message.
-The CometChatThreadedHeader component does not produce any global UI events.
+---
-## Custom View Slots
+## Actions and Events
-Customize the appearance of CometChatThreadedHeader by replacing default views with your own widgets.
+### Callback Methods
-| Slot | Signature | Replaces |
-|------|-----------|----------|
-| `messageActionView` | `Widget Function(BaseMessage message, BuildContext context)?` | Reply count section below the message bubble |
+#### `onBack`
-### Example: Custom Message Action View
+Fires when the user presses the back button.
```dart
CometChatThreadedHeader(
- loggedInUser: loggedInUser,
parentMessage: parentMessage,
- messageActionView: (BaseMessage baseMessage, BuildContext context) {
- return Container(
- width: MediaQuery.of(context).size.width / 1.2,
- margin: const EdgeInsets.all(10),
- decoration: BoxDecoration(
- color: Color(0xFF6851D6),
- borderRadius: BorderRadius.circular(10),
- border: Border.all(width: 5, color: Color(0xFF6851D6)),
- ),
- child: const Center(
- child: Text(
- "Your Custom Action View",
- style: TextStyle(color: Colors.white),
- ),
- ),
- );
+ loggedInUser: loggedInUser,
+ onBack: () {
+ Navigator.pop(context);
},
)
```
-
-
-
-
-
-
-
-
+#### `onError`
-### Example: Custom Reply Count with Dividers
+Fires on internal errors.
```dart
CometChatThreadedHeader(
- parentMessage: message,
- loggedInUser: CometChatUIKit.loggedInUser!,
- style: CometChatThreadedHeaderStyle(
- bubbleContainerBackGroundColor: Color(0xFFFEEDE1),
- outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- borderRadius: BorderRadius.circular(12),
- ),
- ),
- messageActionView: (message, context) {
- final numberOfReplies = message.replyCount;
- String replyText = numberOfReplies == 1
- ? Translations.of(context).reply
- : Translations.of(context).replies;
- return Container(
- width: double.maxFinite,
- color: Color(0xFFFEEDE1),
- padding: EdgeInsets.symmetric(vertical: 4),
- child: Row(
- children: [
- Flexible(child: Divider(color: Color(0xFFF76808))),
- Padding(
- padding: EdgeInsets.symmetric(horizontal: 8),
- child: Text(
- "$numberOfReplies $replyText",
- style: TextStyle(
- color: Color(0xFFF76808),
- fontSize: 14,
- fontWeight: FontWeight.w400,
- ),
- ),
- ),
- Flexible(child: Divider(color: Color(0xFFF76808))),
- ],
- ),
- );
+ parentMessage: parentMessage,
+ loggedInUser: loggedInUser,
+ onError: (e) {
+ debugPrint("Error: ${e.message}");
},
)
```
-
-
-
+### SDK Events (Real-Time, Automatic)
+
+| SDK Listener | Internal behavior |
+|---|---|
+| New thread reply received | Increments reply count |
+| Parent message edited | Updates parent message display |
+| Parent message deleted | Updates parent message display |
+
+---
+
+## Functionality
-### Templates
+| Property | Type | Default | Description |
+|---|---|---|---|
+| `parentMessage` | `BaseMessage` | **required** | The parent message of the thread |
+| `loggedInUser` | `User` | **required** | The currently logged-in user |
+| `showBackButton` | `bool?` | `true` | Toggle back button visibility |
+| `title` | `String?` | `null` | Custom title text |
+| `hideMessageComposer` | `bool?` | `false` | Hide the message composer |
-The `template` prop is used to configure and set a message template for the parent message bubble. It allows for dynamic customization of message appearance, content, or other predefined settings based on the template provided.
+---
+
+## Custom View Slots
+
+### Bubble View
+
+Replace the parent message bubble display.
@@ -265,19 +160,41 @@ The `template` prop is used to configure and set a message template for the pare
CometChatThreadedHeader(
parentMessage: parentMessage,
loggedInUser: loggedInUser,
- template: CometChatMessageTemplate(
- type: MessageTypeConstants.text,
- category: MessageCategoryConstants.message,
- // Custom template configuration
- ),
+ bubbleView: (message) {
+ if (message is TextMessage) {
+ return Container(
+ padding: EdgeInsets.all(12),
+ decoration: BoxDecoration(
+ color: Color(0xFFF5F5F5),
+ borderRadius: BorderRadius.circular(8),
+ ),
+ child: Text(message.text),
+ );
+ }
+ return null;
+ },
)
```
-## Styling
+---
+
+## Advanced
-Customize the appearance of CometChatThreadedHeader using `CometChatThreadedHeaderStyle`.
+### BLoC Access
+
+The threaded header uses `ThreadedHeaderBloc` internally:
+
+| Component | Description |
+|---|---|
+| `ThreadedHeaderBloc` | Manages threaded header state |
+| `ThreadedHeaderEvent` | Events: `InitializeThreadedHeader`, `IncrementReplyCount`, `UpdateParentMessage` |
+| `ThreadedHeaderState` | Threaded header state with parent message and reply count |
+
+---
+
+## Style
@@ -286,61 +203,33 @@ CometChatThreadedHeader(
parentMessage: parentMessage,
loggedInUser: loggedInUser,
style: CometChatThreadedHeaderStyle(
- bubbleContainerBackGroundColor: Color(0xFFFEEDE1),
- countTextColor: Colors.purple,
- countContainerBackGroundColor: Colors.grey[100],
- incomingMessageBubbleStyle: CometChatIncomingMessageBubbleStyle(
- backgroundColor: Colors.grey[200],
- ),
- outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- borderRadius: BorderRadius.circular(12),
- ),
+ backgroundColor: Colors.white,
+ replyCountTextColor: Color(0xFF727272),
),
)
```
-### Style Properties
-
-| Property | Type | Description |
-|----------|------|-------------|
-| `bubbleContainerBackGroundColor` | `Color?` | Background color for the bubble container |
-| `bubbleContainerBorder` | `BoxBorder?` | Border for the bubble container |
-| `bubbleContainerBorderRadius` | `BorderRadiusGeometry?` | Border radius for the bubble container |
-| `countTextStyle` | `TextStyle?` | Text style for the reply count |
-| `countTextColor` | `Color?` | Color for the reply count text |
-| `countContainerBackGroundColor` | `Color?` | Background color for the count container |
-| `countContainerBorder` | `BoxBorder?` | Border for the count container |
-| `constraints` | `BoxConstraints?` | Constraints for the message container |
-| `incomingMessageBubbleStyle` | `CometChatIncomingMessageBubbleStyle?` | Style for incoming message bubble |
-| `outgoingMessageBubbleStyle` | `CometChatOutgoingMessageBubbleStyle?` | Style for outgoing message bubble |
-
-## Props Reference
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `parentMessage` | `BaseMessage` | Required | Parent message for the thread |
-| `loggedInUser` | `User` | Required | Logged in user object |
-| `messageActionView` | `Function(BaseMessage, BuildContext)?` | `null` | Custom action view for the message |
-| `style` | `CometChatThreadedHeaderStyle?` | `null` | Style parameter for the threaded header |
-| `template` | `CometChatMessageTemplate?` | `null` | Message template used in the thread |
-| `height` | `double?` | `null` | Height of the widget |
-| `width` | `double?` | `null` | Width of the widget |
-| `receiptsVisibility` | `bool?` | `true` | Controls visibility of receipts |
+
+
+
+
+---
+
+## Next Steps
-
+
Display messages in a conversation
Compose and send messages
-
- Learn how to customize the look and feel
+
+ Complete threaded messages implementation
-
- Support multiple languages in your app
+
+ Detailed styling reference
diff --git a/ui-kit/flutter/troubleshooting.mdx b/ui-kit/flutter/troubleshooting.mdx
index dd24b6e9f..57e0b9bdc 100644
--- a/ui-kit/flutter/troubleshooting.mdx
+++ b/ui-kit/flutter/troubleshooting.mdx
@@ -1,207 +1,112 @@
---
title: "Troubleshooting"
-description: "Common failure modes and fixes for the CometChat Flutter UI Kit."
+description: "Troubleshoot CometChat Flutter UI Kit V6 setup, login, theming, styling, messaging, calling, navigation, and build issues."
---
-
-
-| Field | Value |
-| --- | --- |
-| Page type | Troubleshooting reference |
-| Scope | All CometChat Flutter UI Kit v5 issues — initialization, rendering, theming, calling, extensions, AI features, localization, sound, events |
-| When to reference | When a component fails to render, data is missing, styling doesn't apply, or a feature doesn't appear |
-
-
-
## Initialization and Login
| Symptom | Cause | Fix |
-| --- | --- | --- |
+|---|---|---|
| `CometChatUIKit.init()` fails silently | Invalid App ID, Region, or Auth Key | Double-check credentials from the [CometChat Dashboard](https://app.cometchat.com/) |
-| Widget doesn't render | `init()` not called or not awaited before rendering | Ensure `init()` completes before mounting widgets. See [Methods](/ui-kit/flutter/methods) |
-| Widget renders but shows no data | User not logged in | Call `CometChatUIKit.login("UID")` after init |
-| Login fails with "UID not found" | UID doesn't exist in your CometChat app | Create the user via Dashboard, SDK, or API first |
-| Blank screen after login | Widget mounted before init/login completes | Use `FutureBuilder` or state to conditionally render after login resolves |
-| `getLoggedInUser()` returns null | User not logged in or session expired | Call `login()` or `loginWithAuthToken()` first |
-| `sendTextMessage()` fails | User not logged in or invalid receiver | Ensure login completes before sending messages |
-| Auth Key exposed in production | Using Auth Key instead of Auth Token | Switch to [Auth Token](/ui-kit/flutter/methods#login-using-auth-token) for production |
-
----
-
-## Platform-Specific Issues
-
-### Android
-
-| Symptom | Cause | Fix |
-| --- | --- | --- |
-| App crashes on launch | Missing internet permission | Add `
-```json
-{
- "component": "CometChatUsers",
- "package": "cometchat_chat_uikit",
- "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
- "description": "Searchable, scrollable list of all available users with avatar, name, and online/offline status.",
- "primaryOutput": {
- "prop": "onItemTap",
- "type": "Function(BuildContext context, User user)"
- },
- "props": {
- "data": {
- "usersRequestBuilder": {
- "type": "UsersRequestBuilder?",
- "default": "SDK default (30 per page)",
- "note": "Pass the builder, not the result of .build()"
- },
- "usersProtocol": {
- "type": "UsersBuilderProtocol?",
- "default": "null",
- "note": "Custom protocol for fetching users"
- },
- "scrollController": {
- "type": "ScrollController?",
- "default": "null",
- "note": "Custom scroll controller for the list"
- },
- "title": {
- "type": "String?",
- "default": "Users",
- "note": "Title text for the app bar"
- },
- "controllerTag": {
- "type": "String?",
- "default": "null",
- "note": "Tag for controller management"
- },
- "searchPlaceholder": {
- "type": "String?",
- "default": "null",
- "note": "Placeholder text for search input"
- },
- "searchKeyword": {
- "type": "String?",
- "default": "null",
- "note": "Pre-fills search and filters list"
- },
- "height": {
- "type": "double?",
- "default": "null"
- },
- "width": {
- "type": "double?",
- "default": "null"
- }
- },
- "callbacks": {
- "onItemTap": "Function(BuildContext context, User user)?",
- "onItemLongPress": "Function(BuildContext context, User user)?",
- "onSelection": "Function(List? list, BuildContext context)?",
- "onBack": "VoidCallback?",
- "onError": "OnError?",
- "onLoad": "OnLoad?",
- "onEmpty": "OnEmpty?"
- },
- "visibility": {
- "usersStatusVisibility": { "type": "bool?", "default": true },
- "hideAppbar": { "type": "bool?", "default": false },
- "hideSearch": { "type": "bool", "default": false },
- "showBackButton": { "type": "bool", "default": true },
- "stickyHeaderVisibility": { "type": "bool?", "default": false }
- },
- "selection": {
- "selectionMode": {
- "type": "SelectionMode?",
- "values": ["SelectionMode.single", "SelectionMode.multiple", "SelectionMode.none"],
- "default": "null"
- },
- "activateSelection": {
- "type": "ActivateSelection?",
- "values": ["ActivateSelection.onClick", "ActivateSelection.onLongClick"],
- "default": "null"
- }
- },
- "viewSlots": {
- "listItemView": "Widget Function(User user)?",
- "leadingView": "Widget? Function(BuildContext context, User user)?",
- "titleView": "Widget? Function(BuildContext context, User user)?",
- "subtitleView": "Widget? Function(BuildContext context, User user)?",
- "trailingView": "Widget? Function(BuildContext context, User user)?",
- "loadingStateView": "WidgetBuilder?",
- "emptyStateView": "WidgetBuilder?",
- "errorStateView": "WidgetBuilder?",
- "setOptions": "List? Function(User, CometChatUsersController, BuildContext)?",
- "addOptions": "List? Function(User, CometChatUsersController, BuildContext)?",
- "appBarOptions": "List Function(BuildContext context)?"
- },
- "icons": {
- "backButton": { "type": "Widget?", "default": "built-in back arrow" },
- "searchBoxIcon": { "type": "Widget?", "default": "built-in search icon" },
- "submitIcon": { "type": "Widget?", "default": "built-in check icon" }
- },
- "style": {
- "usersStyle": { "type": "CometChatUsersStyle", "default": "CometChatUsersStyle()" }
- }
- },
- "events": [
- {
- "name": "CometChatUserEvents.ccUserBlocked",
- "payload": "User",
- "description": "User blocked"
- },
- {
- "name": "CometChatUserEvents.ccUserUnblocked",
- "payload": "User",
- "description": "User unblocked"
- }
- ],
- "sdkListeners": [
- "onUserOnline",
- "onUserOffline",
- "ccUserBlocked",
- "ccUserUnblocked",
- "onConnected"
- ],
- "compositionExample": {
- "description": "User list wired to message view",
- "components": [
- "CometChatUsers",
- "CometChatMessages",
- "CometChatMessageHeader",
- "CometChatMessageList",
- "CometChatMessageComposer"
- ],
- "flow": "onItemTap emits User -> pass to CometChatMessages or individual message components"
- },
- "types": {
- "CometChatOption": {
- "id": "String?",
- "title": "String?",
- "icon": "String?",
- "iconWidget": "Widget?",
- "onClick": "VoidCallback?"
- },
- "SelectionMode": {
- "single": "SelectionMode.single",
- "multiple": "SelectionMode.multiple",
- "none": "SelectionMode.none"
- },
- "ActivateSelection": {
- "onClick": "ActivateSelection.onClick",
- "onLongClick": "ActivateSelection.onLongClick"
- }
- }
-}
-```
-
+`CometChatUsers` renders a scrollable list of all available users with real-time presence updates, search, avatars, and online/offline status indicators.
+---
## Where It Fits
-`CometChatUsers` is a contact list widget. It renders all available users and emits the selected `User` via `onItemTap`. Wire it to `CometChatMessages` or individual message components (`CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer`) to build a standard two-panel chat layout.
+`CometChatUsers` is a list component. It renders all available users and emits the selected `User` via `onItemTap`. Wire it to `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer` to build a direct messaging layout.
```dart
-import 'package:flutter/material.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
-class ChatApp extends StatefulWidget {
- const ChatApp({super.key});
-
- @override
- State createState() => _ChatAppState();
-}
-
-class _ChatAppState extends State {
- User? selectedUser;
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: Row(
- children: [
- SizedBox(
- width: 400,
- child: CometChatUsers(
- onItemTap: (context, user) {
- setState(() {
- selectedUser = user;
- });
- },
- ),
- ),
- Expanded(
- child: selectedUser != null
- ? CometChatMessages(user: selectedUser)
- : const Center(child: Text('Select a user')),
- ),
- ],
- ),
- );
- }
-}
+CometChatUsers(
+ onItemTap: (context, user) {
+ // Navigate to chat with this user
+ },
+)
```
-
-
-
-
---
+## Quick Start
-## Minimal Render
+Using Navigator:
```dart
-import 'package:flutter/material.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
-class UsersDemo extends StatelessWidget {
- const UsersDemo({super.key});
-
- @override
- Widget build(BuildContext context) {
- return const Scaffold(
- body: SafeArea(
- child: CometChatUsers(),
- ),
- );
- }
-}
+Navigator.push(context, MaterialPageRoute(builder: (context) => const CometChatUsers()));
```
-You can also launch it using `Navigator.push`:
+Embedding as a widget:
+
+
```dart
-Navigator.push(
- context,
- MaterialPageRoute(builder: (context) => const CometChatUsers())
-);
+@override
+Widget build(BuildContext context) {
+ return Scaffold(
+ body: SafeArea(
+ child: CometChatUsers(),
+ ),
+ );
+}
```
+
+
+
+Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()`, a user logged in, and the UI Kit dependency added.
---
## Filtering Users
-Pass a `UsersRequestBuilder` to `usersRequestBuilder`. Pass the builder instance — not the result of `.build()`.
+Pass a `UsersRequestBuilder` to control what loads:
```dart
CometChatUsers(
usersRequestBuilder: UsersRequestBuilder()
- ..friendsOnly = true
- ..limit = 15,
+ ..limit = 20
+ ..friendsOnly = true,
)
```
@@ -272,303 +76,168 @@ CometChatUsers(
### Filter Recipes
-| Recipe | Code |
+| Recipe | Builder property |
| --- | --- |
-| Friends only | `UsersRequestBuilder()..friendsOnly = true` |
-| Online users only | `UsersRequestBuilder()..userStatus = CometChatUserStatus.online` |
-| Limit to 15 per page | `UsersRequestBuilder()..limit = 15` |
-| Search by keyword | `UsersRequestBuilder()..searchKeyword = "alice"` |
-| Hide blocked users | `UsersRequestBuilder()..hideBlockedUsers = true` |
-| Filter by roles | `UsersRequestBuilder()..roles = ["admin", "moderator"]` |
-| Filter by tags | `UsersRequestBuilder()..tags = ["vip"]` |
-| Specific UIDs | `UsersRequestBuilder()..uids = ["uid1", "uid2"]` |
-
-Default page size is 30. The component uses infinite scroll — the next page loads as the user scrolls to the bottom.
-
-
-### UsersRequestBuilder Properties
-
-| Property | Description | Code |
-| --- | --- | --- |
-| `limit` | Number of users to fetch per request. Maximum 100. | `..limit = 30` |
-| `searchKeyword` | Search users by name. | `..searchKeyword = "John"` |
-| `friendsOnly` | Fetch only friends. Default `false`. | `..friendsOnly = true` |
-| `userStatus` | Filter by status: `CometChatUserStatus.online` or `CometChatUserStatus.offline`. | `..userStatus = CometChatUserStatus.online` |
-| `hideBlockedUsers` | Hide blocked users from the list. Default `false`. | `..hideBlockedUsers = true` |
-| `roles` | Filter users by specific roles. | `..roles = ["admin"]` |
-| `tags` | Filter users by specific tags. | `..tags = ["vip"]` |
-| `withTags` | Include tags in the User object. Default `false`. | `..withTags = true` |
-| `uids` | Fetch specific users by UIDs. | `..uids = ["uid1", "uid2"]` |
-| `build()` | Builds and returns a `UsersRequest` object. | `.build()` |
-
-Refer to [UsersRequestBuilder](/sdk/flutter/retrieve-users) for the full builder API.
+| Friends only | `..friendsOnly = true` |
+| Limit per page | `..limit = 10` |
+| Search by keyword | `..searchKeyword = "john"` |
+| Hide blocked users | `..hideBlockedUsers = true` |
+| Filter by roles | `..roles = ["admin", "moderator"]` |
+| Filter by tags | `..tags = ["vip"]` |
+| Online users only | `..userStatus = CometChatConstants.userStatusOnline` |
+| Filter by UIDs | `..UIDs = ["uid1", "uid2"]` |
---
## Actions and Events
-### Callback Props
+### Callback Methods
-#### onItemTap
+#### `onItemTap`
-Fires when a user row is tapped. Primary navigation hook — set the active user and render the message view.
+Fires when a user row is tapped. Primary navigation hook.
```dart
CometChatUsers(
onItemTap: (context, user) {
- print("Selected: ${user.name}");
+ // Navigate to chat screen
},
)
```
-#### onItemLongPress
+#### `onItemLongPress`
-Fires when a user row is long-pressed. Useful for showing context menus or custom actions.
+Fires when a user row is long-pressed.
```dart
CometChatUsers(
onItemLongPress: (context, user) {
- // Show custom context menu
+ // Show context menu
},
)
```
+#### `onBack`
-#### onSelection
-
-Fires when users are selected in multi-select mode. Requires `selectionMode` to be set.
+Fires when the user presses the back button in the app bar.
```dart
CometChatUsers(
- selectionMode: SelectionMode.multiple,
- activateSelection: ActivateSelection.onClick,
- onSelection: (selectedList, context) {
- print("Selected ${selectedList?.length ?? 0} users");
+ onBack: () {
+ Navigator.pop(context);
},
)
```
-#### onError
+#### `onSelection`
-Fires on internal errors (network failure, auth issue, SDK exception).
+Fires when users are selected/deselected in multi-select mode.
```dart
CometChatUsers(
- onError: (error) {
- print("CometChatUsers error: $error");
+ selectionMode: SelectionMode.multiple,
+ activateSelection: ActivateSelection.onClick,
+ onSelection: (selectedUsers, context) {
+ // Handle selected users
},
)
```
-#### onBack
+#### `onError`
-Fires when the back button is pressed.
+Fires on internal errors.
```dart
CometChatUsers(
- showBackButton: true,
- onBack: () {
- Navigator.pop(context);
+ onError: (e) {
+ debugPrint("Error: ${e.message}");
},
)
```
-#### onLoad
+#### `onLoad`
-Fires when the user list is successfully loaded.
+Fires when the list is successfully fetched and loaded.
```dart
CometChatUsers(
- onLoad: (list) {
- print("Loaded ${list.length} users");
+ onLoad: (userList) {
+ debugPrint("Loaded ${userList.length}");
},
)
```
-#### onEmpty
+#### `onEmpty`
-Fires when the user list is empty.
+Fires when the list is empty after loading.
```dart
CometChatUsers(
onEmpty: () {
- print("No users found");
+ debugPrint("No users found");
},
)
```
-
-### Global UI Events
-
-`CometChatUserEvents` emits events subscribable from anywhere in the application. Add a listener in `initState` and remove it in `dispose`.
-
-| Event | Fires when | Payload |
-| --- | --- | --- |
-| `ccUserBlocked` | A user is blocked | `User` |
-| `ccUserUnblocked` | A user is unblocked | `User` |
-
-When to use: sync external UI with user state changes. For example, update a blocked users count badge when a user is blocked.
-
-
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
-class _YourScreenState extends State with CometChatUserEventListener {
-
- @override
- void initState() {
- super.initState();
- CometChatUserEvents.addUsersListener("listenerId", this);
- }
-
- @override
- void dispose() {
- CometChatUserEvents.removeUsersListener("listenerId");
- super.dispose();
- }
-
- @override
- void ccUserBlocked(User user) {
- print("Blocked: ${user.name}");
- }
-
- @override
- void ccUserUnblocked(User user) {
- print("Unblocked: ${user.name}");
- }
-
- @override
- Widget build(BuildContext context) {
- return const Placeholder();
- }
-}
-```
-
-
-
### SDK Events (Real-Time, Automatic)
-The component listens to these SDK events internally. No manual attachment needed unless additional side effects are required.
+The component listens to these SDK events internally. No manual setup needed.
| SDK Listener | Internal behavior |
| --- | --- |
-| `onUserOnline` | Updates the user's status indicator to online |
-| `onUserOffline` | Updates the user's status indicator to offline |
-| `ccUserBlocked` | Updates blocked user in list |
-| `ccUserUnblocked` | Updates unblocked user in list |
-| `onConnected` | Refreshes user list when connection is re-established |
-
-Automatic: user presence changes (online/offline), blocked/unblocked state, connection recovery.
+| `onUserOnline` | Updates online status indicator for the user |
+| `onUserOffline` | Updates offline status indicator for the user |
+| Connection reconnected | Triggers silent refresh to sync user list |
---
+## Functionality
-## Custom View Slots
-
-Each slot replaces a section of the default UI. Slots that accept a user parameter receive the `User` object for that row.
-
-| Slot | Signature | Replaces |
-| --- | --- | --- |
-| `listItemView` | `Widget Function(User)` | Entire list item row |
-| `leadingView` | `Widget? Function(BuildContext, User)` | Avatar / left section |
-| `titleView` | `Widget? Function(BuildContext, User)` | Name / title text |
-| `subtitleView` | `Widget? Function(BuildContext, User)` | Subtitle text |
-| `trailingView` | `Widget? Function(BuildContext, User)` | Right section |
-| `loadingStateView` | `WidgetBuilder` | Loading spinner |
-| `emptyStateView` | `WidgetBuilder` | Empty state |
-| `errorStateView` | `WidgetBuilder` | Error state |
-| `setOptions` | `List? Function(User, CometChatUsersController, BuildContext)` | Context menu actions (replaces default) |
-| `addOptions` | `List? Function(User, CometChatUsersController, BuildContext)` | Context menu actions (adds to default) |
-| `appBarOptions` | `List Function(BuildContext)` | App bar action widgets |
-
-### listItemView
-
-Replace the entire list item row.
-
-
-
-
-
-
-
-```dart
-Widget getCustomUserListItem(User user, BuildContext context) {
- // Get status indicator
- StatusIndicatorUtils statusIndicatorUtils = StatusIndicatorUtils.getStatusIndicatorFromParams(
- context: context,
- user: user,
- onlineStatusIndicatorColor: Color(0xFF56E8A7),
- );
-
- return CometChatListItem(
- id: user.uid,
- avatarName: user.name,
- avatarURL: user.avatar,
- avatarHeight: 40,
- avatarWidth: 40,
- title: user.name,
- key: UniqueKey(),
- statusIndicatorColor: statusIndicatorUtils.statusIndicatorColor,
- statusIndicatorIcon: statusIndicatorUtils.icon,
- statusIndicatorStyle: CometChatStatusIndicatorStyle(
- border: Border.all(width: 2, color: Color(0xFFFFFFFF)),
- backgroundColor: Color(0xFF56E8A7),
- ),
- hideSeparator: true,
- style: ListItemStyle(
- background: user.status == CometChatUserStatus.online
- ? const Color(0xFFE6F4ED)
- : Colors.transparent,
- titleStyle: TextStyle(
- overflow: TextOverflow.ellipsis,
- fontSize: 16,
- fontWeight: FontWeight.w500,
- color: Color(0xFF141414),
- ),
- padding: EdgeInsets.only(left: 16, right: 16, top: 8, bottom: 8),
- ),
- );
-}
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `title` | `String?` | `null` | Custom app bar title |
+| `showBackButton` | `bool` | `true` | Toggle back button |
+| `hideAppbar` | `bool?` | `false` | Toggle app bar visibility |
+| `hideSearch` | `bool` | `false` | Toggle search bar |
+| `usersStatusVisibility` | `bool?` | `true` | Show online/offline status indicator |
+| `stickyHeaderVisibility` | `bool?` | `false` | Show alphabetical sticky header |
+| `selectionMode` | `SelectionMode?` | `null` | Enable selection mode (`single` or `multiple`) |
+| `searchPlaceholder` | `String?` | `null` | Search placeholder text |
+| `searchKeyword` | `String?` | `null` | Pre-fill search keyword |
-// Usage:
-CometChatUsers(
- listItemView: (user) => getCustomUserListItem(user, context),
-)
-```
-
-
+---
+## Custom View Slots
-### leadingView
+### Leading View
Replace the avatar / left section.
@@ -577,23 +246,8 @@ Replace the avatar / left section.
```dart
CometChatUsers(
leadingView: (context, user) {
- return Container(
- decoration: BoxDecoration(
- border: Border.all(
- color: user.status == CometChatUserStatus.online
- ? Color(0xFF09C26F)
- : Colors.transparent,
- width: 2,
- ),
- borderRadius: BorderRadius.circular(8),
- ),
- child: CometChatAvatar(
- image: user.avatar,
- name: user.name,
- style: CometChatAvatarStyle(
- borderRadius: BorderRadius.circular(6),
- ),
- ),
+ return CircleAvatar(
+ child: Text(user.name?[0] ?? ""),
);
},
)
@@ -601,35 +255,18 @@ CometChatUsers(
-### titleView
+### Title View
-Replace the name / title text. Role badge inline example.
+Replace the name / title text.
```dart
CometChatUsers(
titleView: (context, user) {
- return Row(
- children: [
- Text(
- user.name ?? "",
- style: TextStyle(fontWeight: FontWeight.w500, fontSize: 16),
- ),
- if (user.role != null)
- Container(
- margin: EdgeInsets.only(left: 4),
- padding: EdgeInsets.symmetric(horizontal: 6, vertical: 2),
- decoration: BoxDecoration(
- color: Color(0xFF09C26F),
- borderRadius: BorderRadius.circular(7),
- ),
- child: Text(
- user.role!,
- style: TextStyle(color: Colors.white, fontSize: 8, fontWeight: FontWeight.w600),
- ),
- ),
- ],
+ return Text(
+ user.name ?? "",
+ style: TextStyle(fontWeight: FontWeight.bold),
);
},
)
@@ -637,29 +274,19 @@ CometChatUsers(
-### subtitleView
+### Subtitle View
-Replace the subtitle text for each user.
-
-
-
-
+Replace the subtitle text below the user's name.
```dart
CometChatUsers(
subtitleView: (context, user) {
- final dateTime = user.lastActiveAt ?? DateTime.now();
- final subtitle = "Last Active at ${DateFormat('dd/MM/yyyy, HH:mm:ss').format(dateTime)}";
-
return Text(
- subtitle,
- style: TextStyle(
- color: Color(0xFF727272),
- fontSize: 14,
- fontWeight: FontWeight.w400,
- ),
+ user.status ?? "offline",
+ maxLines: 1,
+ overflow: TextOverflow.ellipsis,
);
},
)
@@ -667,849 +294,210 @@ CometChatUsers(
+### Trailing View
-### trailingView
-
-Replace the right section. Custom tag badge example.
+Replace the right section of each user item.
```dart
CometChatUsers(
trailingView: (context, user) {
- final tag = user.tags?.isNotEmpty == true ? user.tags!.first : null;
- if (tag == null) return null;
-
- return Container(
- padding: EdgeInsets.symmetric(horizontal: 6, vertical: 4),
- decoration: BoxDecoration(
- color: Color(0xFF6852D6),
- borderRadius: BorderRadius.circular(4),
- ),
- child: Text(
- tag,
- style: TextStyle(color: Colors.white, fontSize: 10, fontWeight: FontWeight.w600),
- ),
- );
+ return Text(user.role ?? "");
},
)
```
-### setOptions
+### List Item View
-Replace the context menu / long-press actions on each user item.
+Replace the entire list item row.
```dart
CometChatUsers(
- setOptions: (user, controller, context) {
- return [
- CometChatOption(
- id: "block",
- title: "Block User",
- icon: AssetConstants.close,
- onClick: () {
- CometChat.blockUsers([user.uid], onSuccess: (users) {
- print("User blocked");
- }, onError: (error) {
- print("Error: $error");
- });
- },
- ),
- CometChatOption(
- id: "view_profile",
- title: "View Profile",
- iconWidget: Icon(Icons.person_outline),
- onClick: () {
- // Navigate to user profile
- },
- ),
- ];
+ listItemView: (user) {
+ return ListTile(
+ leading: CircleAvatar(child: Text(user.name?[0] ?? "")),
+ title: Text(user.name ?? ""),
+ subtitle: Text(user.status ?? "offline"),
+ );
},
)
```
-### addOptions
-
-Add to the existing context menu actions without removing defaults.
+### State Views
```dart
CometChatUsers(
- addOptions: (user, controller, context) {
- return [
- CometChatOption(
- id: "add_friend",
- title: "Add Friend",
- iconWidget: Icon(Icons.person_add_outlined),
- onClick: () {
- // Add friend logic
- },
- ),
- CometChatOption(
- id: "send_message",
- title: "Send Message",
- iconWidget: Icon(Icons.message_outlined),
- onClick: () {
- // Navigate to messages
- },
- ),
- ];
- },
+ emptyStateView: (context) => Center(child: Text("No users found")),
+ errorStateView: (context) => Center(child: Text("Something went wrong")),
+ loadingStateView: (context) => Center(child: CircularProgressIndicator()),
)
```
+---
-### appBarOptions
-
-Add custom widgets to the app bar.
+## Common Patterns
-
-
-
+### Minimal list — hide all chrome
```dart
CometChatUsers(
- appBarOptions: (context) => [
- IconButton(
- onPressed: () {
- // Handle action
- },
- icon: Icon(Icons.add_comment_outlined, color: Color(0xFF141414)),
- ),
- ],
+ hideAppbar: true,
+ hideSearch: true,
+ stickyHeaderVisibility: false,
)
```
-For a more complete popup menu with styling:
+### Friends-only list
```dart
CometChatUsers(
- appBarOptions: (context) => [
- PopupMenuButton(
- shape: RoundedRectangleBorder(
- borderRadius: BorderRadius.circular(8),
- side: BorderSide(color: Color(0xFFF5F5F5), width: 1),
- ),
- color: Colors.white,
- elevation: 4,
- icon: Icon(Icons.more_vert, color: Color(0xFF141414)),
- onSelected: (value) {
- switch (value) {
- case 'refresh':
- // Refresh users list
- break;
- case 'settings':
- // Navigate to settings
- break;
- }
- },
- itemBuilder: (BuildContext context) => [
- PopupMenuItem(
- value: 'refresh',
- child: Row(
- children: [
- Icon(Icons.refresh, color: Color(0xFFA1A1A1)),
- SizedBox(width: 8),
- Text("Refresh"),
- ],
- ),
- ),
- PopupMenuItem(
- value: 'settings',
- child: Row(
- children: [
- Icon(Icons.settings, color: Color(0xFFA1A1A1)),
- SizedBox(width: 8),
- Text("Settings"),
- ],
- ),
- ),
- ],
- ),
- ],
+ usersRequestBuilder: UsersRequestBuilder()
+ ..friendsOnly = true,
)
```
----
-
-
-## Styling
-
-Set `CometChatUsersStyle` to customize the appearance.
+### Online users only
```dart
CometChatUsers(
- usersStyle: CometChatUsersStyle(
- backgroundColor: Colors.white,
- titleTextColor: Color(0xFFF76808),
- separatorColor: Color(0xFFF76808),
- avatarStyle: CometChatAvatarStyle(
- borderRadius: BorderRadius.circular(8),
- backgroundColor: Color(0xFFFBAA75),
- ),
- ),
+ usersRequestBuilder: UsersRequestBuilder()
+ ..userStatus = CometChatConstants.userStatusOnline,
)
```
-
-
-
-
-### Style Properties
-
-| Property | Type | Description |
-| --- | --- | --- |
-| `backgroundColor` | `Color?` | Background color of the component |
-| `border` | `Border?` | Border for the widget |
-| `borderRadius` | `BorderRadiusGeometry?` | Border radius for the widget |
-| `titleTextColor` | `Color?` | Color of the header title |
-| `titleTextStyle` | `TextStyle?` | Style for the header title |
-| `backIconColor` | `Color?` | Back button icon color |
-| `searchBackgroundColor` | `Color?` | Background color of search box |
-| `searchBorder` | `BorderSide?` | Border for search box |
-| `searchBorderRadius` | `BorderRadius?` | Border radius for search box |
-| `searchPlaceHolderTextColor` | `Color?` | Placeholder text color in search |
-| `searchPlaceHolderTextStyle` | `TextStyle?` | Placeholder text style in search |
-| `searchIconColor` | `Color?` | Search icon color |
-| `searchInputTextColor` | `Color?` | Search input text color |
-| `searchInputTextStyle` | `TextStyle?` | Search input text style |
-| `separatorColor` | `Color?` | Color of list item separators |
-| `separatorHeight` | `double?` | Height of list item separators |
-| `stickyTitleColor` | `Color?` | Color of sticky alphabetical headers |
-| `stickyTitleTextStyle` | `TextStyle?` | Style for sticky alphabetical headers |
-| `itemTitleTextColor` | `Color?` | Color of user name in list items |
-| `itemTitleTextStyle` | `TextStyle?` | Style for user name in list items |
-| `itemBorder` | `BoxBorder?` | Border for list items |
-| `listItemSelectedBackgroundColor` | `Color?` | Background color for selected items |
-| `emptyStateTextColor` | `Color?` | Text color for empty state title |
-| `emptyStateTextStyle` | `TextStyle?` | Text style for empty state title |
-| `emptyStateSubTitleTextColor` | `Color?` | Text color for empty state subtitle |
-| `emptyStateSubTitleTextStyle` | `TextStyle?` | Text style for empty state subtitle |
-| `errorStateTextColor` | `Color?` | Text color for error state title |
-| `errorStateTextStyle` | `TextStyle?` | Text style for error state title |
-| `errorStateSubTitleTextColor` | `Color?` | Text color for error state subtitle |
-| `errorStateSubTitleTextStyle` | `TextStyle?` | Text style for error state subtitle |
-| `retryButtonBackgroundColor` | `Color?` | Background color for retry button |
-| `retryButtonBorderRadius` | `BorderRadiusGeometry?` | Border radius for retry button |
-| `retryButtonBorder` | `BorderSide?` | Border for retry button |
-| `retryButtonTextColor` | `Color?` | Text color for retry button |
-| `retryButtonTextStyle` | `TextStyle?` | Text style for retry button |
-| `submitIconColor` | `Color?` | Color of submit icon in selection mode |
-| `checkBoxBackgroundColor` | `Color?` | Background color of unchecked checkbox |
-| `checkBoxCheckedBackgroundColor` | `Color?` | Background color of checked checkbox |
-| `checkboxSelectedIconColor` | `Color?` | Color of checkmark icon |
-| `checkBoxBorderRadius` | `BorderRadiusGeometry?` | Border radius for checkbox |
-| `checkBoxBorder` | `BorderSide?` | Border for checkbox |
-| `avatarStyle` | `CometChatAvatarStyle?` | Style for user avatars |
-| `statusIndicatorStyle` | `CometChatStatusIndicatorStyle?` | Style for status indicators |
-
---
+## Advanced
-## Common Patterns
+### BLoC Access
-### Custom empty state with CTA
+Provide a custom `UsersBloc` to override behavior:
```dart
CometChatUsers(
- emptyStateView: (context) {
- return Center(
- child: Column(
- mainAxisAlignment: MainAxisAlignment.center,
- children: [
- Icon(Icons.people_outline, size: 64, color: Color(0xFF727272)),
- SizedBox(height: 16),
- Text("No users found", style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500)),
- SizedBox(height: 8),
- ElevatedButton(
- onPressed: () {
- // Invite users
- },
- child: Text("Invite Users"),
- ),
- ],
- ),
- );
- },
+ usersBloc: CustomUsersBloc(),
)
```
-### Friends-only list
+### Extending UsersBloc
+
+`UsersBloc` uses the `ListBase` mixin with override hooks:
```dart
-CometChatUsers(
- usersRequestBuilder: UsersRequestBuilder()
- ..friendsOnly = true
- ..limit = 15,
-)
+class CustomUsersBloc extends UsersBloc {
+ @override
+ void onItemAdded(User item, List updatedList) {
+ // Custom sorting logic
+ super.onItemAdded(item, updatedList);
+ }
+
+ @override
+ void onListReplaced(List previousList, List newList) {
+ // Filter out specific users
+ final filtered = newList.where((u) => u.role != "bot").toList();
+ super.onListReplaced(previousList, filtered);
+ }
+}
```
-### Multi-select with selection callback
+For `ListBase` override hooks (`onItemAdded`, `onItemRemoved`, `onItemUpdated`, `onListCleared`, `onListReplaced`), see [BLoC & Data — ListBase Hooks](/ui-kit/flutter/customization-bloc-data#listbase-hooks).
-
-
-```dart
-CometChatUsers(
- selectionMode: SelectionMode.multiple,
- activateSelection: ActivateSelection.onClick,
- onSelection: (selectedUsers, context) {
- if (selectedUsers != null && selectedUsers.isNotEmpty) {
- print("Selected ${selectedUsers.length} users");
- // Create group with selected users, etc.
- }
- },
-)
-```
-
-
+### Public BLoC Events
-### Hide all chrome — minimal list
+| Event | Description |
+| --- | --- |
+| `LoadUsers({searchKeyword, silent})` | Load initial users. `silent: true` keeps existing list visible. |
+| `LoadMoreUsers()` | Load next page (pagination) |
+| `RefreshUsers()` | Refresh the list |
+| `SearchUsers(keyword)` | Search users with debouncing |
+| `ToggleUserSelection(uid)` | Toggle selection state |
+| `ClearUserSelection()` | Clear all selections |
+| `UpdateUser(user)` | Update a specific user |
-
-
-```dart
-CometChatUsers(
- hideSearch: true,
- hideAppbar: true,
- usersStatusVisibility: false,
- stickyHeaderVisibility: true, // hides alphabetical headers
-)
-```
-
-
+### Public BLoC Methods
-### Online users only
+| Method | Returns | Description |
+| --- | --- | --- |
+| `getStatusNotifier(uid)` | `ValueNotifier` | Per-user status notifier for isolated rebuilds |
+| `getUserStatus(uid)` | `String` | Current status for a user (`online` / `offline`) |
+
+---
+
+## Style
```dart
CometChatUsers(
- usersRequestBuilder: UsersRequestBuilder()
- ..userStatus = CometChatUserStatus.online,
+ usersStyle: CometChatUsersStyle(
+ avatarStyle: CometChatAvatarStyle(
+ borderRadius: BorderRadius.circular(8),
+ backgroundColor: Color(0xFFFBAA75),
+ ),
+ statusIndicatorStyle: CometChatStatusIndicatorStyle(),
+ ),
)
```
----
-
-
-## Accessibility
-
-The component renders a scrollable list of interactive items. Each user row supports:
-
-- Tap gesture for selection/navigation
-- Long-press gesture for context menu actions
-- Checkbox selection in multi-select mode with proper touch targets
-- Status indicators with visual feedback for online/offline state
-
-For screen readers:
-- User names are readable as list item titles
-- Status indicators use color coding — consider adding `Semantics` widgets via `leadingView` if screen reader descriptions are needed for these visual indicators
-- Selection state is communicated through checkbox widgets
-
-The component respects system accessibility settings including text scaling and high contrast modes.
-
----
-
-## Props
-
-All props are optional unless noted.
-
-### activateSelection
-
-Controls when selection mode activates.
-
-| | |
-| --- | --- |
-| Type | `ActivateSelection?` |
-| Default | `null` |
-
-Values: `ActivateSelection.onClick`, `ActivateSelection.onLongClick`
-
----
-
-### addOptions
-
-Adds additional context menu actions to the default options.
-
-| | |
-| --- | --- |
-| Type | `List? Function(User, CometChatUsersController, BuildContext)?` |
-| Default | `null` |
-
----
-
-### appBarOptions
-
-Custom widgets to display in the app bar.
-
-| | |
-| --- | --- |
-| Type | `List Function(BuildContext context)?` |
-| Default | `null` |
-
----
-
-### backButton
-
-Custom back button widget.
-
-| | |
-| --- | --- |
-| Type | `Widget?` |
-| Default | Built-in back arrow |
-
----
-
-### controllerTag
-
-Identifier tag for controller management.
-
-| | |
-| --- | --- |
-| Type | `String?` |
-| Default | `null` |
-
----
-
-
-### emptyStateView
-
-Custom view displayed when there are no users.
-
-| | |
-| --- | --- |
-| Type | `WidgetBuilder?` |
-| Default | Built-in empty state |
-
----
-
-### errorStateView
-
-Custom view displayed when an error occurs.
-
-| | |
-| --- | --- |
-| Type | `WidgetBuilder?` |
-| Default | Built-in error state |
-
----
-
-### height
-
-Height of the widget.
-
-| | |
-| --- | --- |
-| Type | `double?` |
-| Default | `null` |
-
----
-
-### hideAppbar
-
-Hides the app bar including title and search.
-
-| | |
-| --- | --- |
-| Type | `bool?` |
-| Default | `false` |
-
----
-
-### hideSearch
-
-Hides the search input box.
-
-| | |
-| --- | --- |
-| Type | `bool` |
-| Default | `false` |
-
----
-
-### leadingView
-
-Custom renderer for the avatar / left section.
-
-| | |
-| --- | --- |
-| Type | `Widget? Function(BuildContext context, User user)?` |
-| Default | Built-in avatar |
-
----
-
-### listItemView
-
-Custom renderer for the entire list item row.
-
-| | |
-| --- | --- |
-| Type | `Widget Function(User user)?` |
-| Default | Built-in list item |
-
----
-
-### loadingStateView
-
-Custom view displayed during loading state.
-
-| | |
-| --- | --- |
-| Type | `WidgetBuilder?` |
-| Default | Built-in shimmer |
-
----
-
-
-### onBack
-
-Callback triggered when the back button is pressed.
-
-| | |
-| --- | --- |
-| Type | `VoidCallback?` |
-| Default | `null` |
-
----
-
-### onEmpty
-
-Callback triggered when the user list is empty.
-
-| | |
-| --- | --- |
-| Type | `OnEmpty?` |
-| Default | `null` |
-
----
-
-### onError
-
-Callback triggered when an error occurs.
-
-| | |
-| --- | --- |
-| Type | `OnError?` |
-| Default | `null` |
-
----
-
-### onItemLongPress
-
-Callback triggered on long press of a user item.
-
-| | |
-| --- | --- |
-| Type | `Function(BuildContext context, User user)?` |
-| Default | `null` |
-
----
-
-### onItemTap
-
-Callback triggered when tapping a user item.
-
-| | |
-| --- | --- |
-| Type | `Function(BuildContext context, User user)?` |
-| Default | `null` |
-
----
-
-### onLoad
-
-Callback triggered when the list is successfully loaded.
-
-| | |
-| --- | --- |
-| Type | `OnLoad?` |
-| Default | `null` |
-
----
-
-### onSelection
-
-Callback triggered when users are selected. Requires `selectionMode` to be set.
-
-| | |
-| --- | --- |
-| Type | `Function(List? list, BuildContext context)?` |
-| Default | `null` |
-
----
-
-### scrollController
-
-Controller for scrolling the list.
-
-| | |
-| --- | --- |
-| Type | `ScrollController?` |
-| Default | `null` |
-
----
-
-
-### searchBoxIcon
-
-Custom search box icon widget.
-
-| | |
-| --- | --- |
-| Type | `Widget?` |
-| Default | Built-in search icon |
-
----
-
-### searchKeyword
-
-Pre-fills the search and filters the user list.
-
-| | |
-| --- | --- |
-| Type | `String?` |
-| Default | `null` |
-
----
-
-### searchPlaceholder
-
-Placeholder text for the search input box.
-
-| | |
-| --- | --- |
-| Type | `String?` |
-| Default | `null` |
-
----
-
-### selectionMode
-
-Enables single or multi-select mode.
-
-| | |
-| --- | --- |
-| Type | `SelectionMode?` |
-| Default | `null` |
-
-Values: `SelectionMode.single`, `SelectionMode.multiple`, `SelectionMode.none`
-
----
-
-### setOptions
-
-Replaces the default context menu actions.
-
-| | |
-| --- | --- |
-| Type | `List? Function(User, CometChatUsersController, BuildContext)?` |
-| Default | `null` |
-
----
-
-### showBackButton
-
-Shows or hides the back button.
-
-| | |
-| --- | --- |
-| Type | `bool` |
-| Default | `true` |
-
----
-
-### stickyHeaderVisibility
-
-Hides alphabetical section headers when set to `true`.
-
-| | |
-| --- | --- |
-| Type | `bool?` |
-| Default | `false` |
-
-Note: When `false`, alphabetical headers (A, B, C...) are shown to separate users.
-
----
-
-
-### submitIcon
-
-Custom submit icon widget for selection mode.
-
-| | |
-| --- | --- |
-| Type | `Widget?` |
-| Default | Built-in check icon |
-
----
-
-### subtitleView
-
-Custom renderer for the subtitle text.
-
-| | |
-| --- | --- |
-| Type | `Widget? Function(BuildContext context, User user)?` |
-| Default | `null` |
-
----
-
-### title
-
-Title text displayed in the app bar.
-
-| | |
-| --- | --- |
-| Type | `String?` |
-| Default | `"Users"` |
-
----
-
-### titleView
-
-Custom renderer for the name / title text.
-
-| | |
-| --- | --- |
-| Type | `Widget? Function(BuildContext context, User user)?` |
-| Default | Built-in title |
-
----
-
-### trailingView
-
-Custom renderer for the right section.
-
-| | |
-| --- | --- |
-| Type | `Widget? Function(BuildContext context, User user)?` |
-| Default | `null` |
-
----
-
-### usersProtocol
-
-Custom protocol for fetching users.
-
-| | |
-| --- | --- |
-| Type | `UsersBuilderProtocol?` |
-| Default | `null` |
-
----
-
-### usersRequestBuilder
-
-Controls which users load and in what order.
-
-| | |
-| --- | --- |
-| Type | `UsersRequestBuilder?` |
-| Default | SDK default (30 per page) |
-
-Pass the builder instance, not the result of `.build()`.
-
----
-
-### usersStatusVisibility
-
-Shows or hides the online/offline status indicator on user avatars.
-
-| | |
-| --- | --- |
-| Type | `bool?` |
-| Default | `true` |
-
----
-
-### usersStyle
-
-Styling options for the users list.
-
-| | |
-| --- | --- |
-| Type | `CometChatUsersStyle` |
-| Default | `CometChatUsersStyle()` |
-
----
-
-### width
-
-Width of the widget.
+### Style Properties
-| | |
+| Property | Description |
| --- | --- |
-| Type | `double?` |
-| Default | `null` |
-
----
-
-
-## Events
+| `backgroundColor` | List background color |
+| `avatarStyle` | Avatar appearance |
+| `statusIndicatorStyle` | Online/offline indicator |
+| `searchBoxStyle` | Search box appearance |
-`CometChatUsers` does not emit custom UI events. It subscribes to:
-
-| Event | Payload | Internal behavior |
-| --- | --- | --- |
-| `CometChatUserEvents.ccUserBlocked` | `User` | Updates blocked user in list |
-| `CometChatUserEvents.ccUserUnblocked` | `User` | Updates unblocked user in list |
+See [Component Styling](/ui-kit/flutter/component-styling) for the full reference.
---
-## Customization Matrix
-
-| What to change | Where | Property/API | Example |
-| --- | --- | --- | --- |
-| Override behavior on user interaction | Component props | `on` callbacks | `onItemTap: (ctx, user) => setActive(user)` |
-| Filter which users appear | Component props | `usersRequestBuilder` | `usersRequestBuilder: UsersRequestBuilder()..friendsOnly = true` |
-| Toggle visibility of UI elements | Component props | `hide` / `show` boolean props | `hideSearch: true` |
-| Replace a section of the list item | Component props | `View` render props | `listItemView: (user) => CustomWidget()` |
-| Change colors, fonts, spacing | Component props | `usersStyle` | `usersStyle: CometChatUsersStyle(titleTextColor: Colors.red)` |
-
----
+## Next Steps
- Display recent one-on-one and group conversations
+ Browse recent conversations
- Display and manage group chats
+ Browse and search available groups
-
- Display messages in a conversation
+
+ Detailed styling reference
-
- Learn how to customize the look and feel
+
+ Customize message bubble structure
\ No newline at end of file
diff --git a/ui-kit/flutter/ai-assistant-chat-history.mdx b/ui-kit/flutter/v5/ai-assistant-chat-history.mdx
similarity index 98%
rename from ui-kit/flutter/ai-assistant-chat-history.mdx
rename to ui-kit/flutter/v5/ai-assistant-chat-history.mdx
index 145ca28fc..7c804677a 100644
--- a/ui-kit/flutter/ai-assistant-chat-history.mdx
+++ b/ui-kit/flutter/v5/ai-assistant-chat-history.mdx
@@ -423,16 +423,16 @@ CometChatAIAssistantChatHistory(
| `hideDateSeparator` | `bool?` | `null` | Hide date separator |
-
+
Display messages in a conversation
-
+
Compose and send messages
-
+
Learn how to customize the look and feel
-
+
Support multiple languages in your app
diff --git a/ui-kit/flutter/ai-features.mdx b/ui-kit/flutter/v5/ai-features.mdx
similarity index 89%
rename from ui-kit/flutter/ai-features.mdx
rename to ui-kit/flutter/v5/ai-features.mdx
index 034555fd8..8bda620c6 100644
--- a/ui-kit/flutter/ai-features.mdx
+++ b/ui-kit/flutter/v5/ai-features.mdx
@@ -11,7 +11,7 @@ description: "Enhance user interaction with AI-powered conversation starters, sm
| Package | `cometchat_chat_uikit` |
| Required setup | `CometChatUIKit.init(uiKitSettings: UIKitSettings)` then `CometChatUIKit.login(uid)` + AI features enabled in [CometChat Dashboard](/fundamentals/ai-user-copilot/overview) |
| AI features | Conversation Starter, Smart Replies, Conversation Summary, AI Assist Bot |
-| Key components | `CometChatMessageList` → [Message List](/ui-kit/flutter/message-list) (Conversation Starter), `CometChatMessageComposer` → [Message Composer](/ui-kit/flutter/message-composer) (Smart Replies, Summary) |
+| Key components | `CometChatMessageList` → [Message List](/ui-kit/flutter/v5/message-list) (Conversation Starter), `CometChatMessageComposer` → [Message Composer](/ui-kit/flutter/v5/message-composer) (Smart Replies, Summary) |
| AI Extensions | `AISmartRepliesExtension()`, `AIConversationStarterExtension()`, `AIAssistBotExtension()`, `AIConversationSummaryExtension()` |
| Activation | Enable each AI feature from the CometChat Dashboard — UI Kit auto-integrates them after configuration |
@@ -56,7 +56,7 @@ When a user initiates a new chat, the UI kit displays a list of suggested openin
For a comprehensive understanding and guide on implementing and using the Conversation Starters, refer to our specific guide on the [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter).
-Once you have successfully activated the [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter) from your CometChat Dashboard, the feature will automatically be incorporated into the [MessageList](/ui-kit/flutter/message-list) Widget of UI Kits.
+Once you have successfully activated the [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter) from your CometChat Dashboard, the feature will automatically be incorporated into the [MessageList](/ui-kit/flutter/v5/message-list) Widget of UI Kits.
@@ -68,7 +68,7 @@ Smart Replies are AI-generated responses to messages. They can predict what a us
For a comprehensive understanding and guide on implementing and using the Smart Replies, refer to our specific guide on the [Smart Replies](/fundamentals/ai-user-copilot/smart-replies).
-Once you have successfully activated the [Smart Replies](/fundamentals/ai-user-copilot/smart-replies) from your CometChat Dashboard, the feature will automatically be incorporated into the Action sheet of [MessageComposer](/ui-kit/flutter/message-composer) Widget of UI Kits.
+Once you have successfully activated the [Smart Replies](/fundamentals/ai-user-copilot/smart-replies) from your CometChat Dashboard, the feature will automatically be incorporated into the Action sheet of [MessageComposer](/ui-kit/flutter/v5/message-composer) Widget of UI Kits.
@@ -80,7 +80,7 @@ The Conversation Summary feature provides concise summaries of long conversation
For a comprehensive understanding and guide on implementing and using the Conversation Summary, refer to our specific guide on the [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary).
-Once you have successfully activated the [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary) from your CometChat Dashboard, the feature will automatically be incorporated into the Action sheet of [MessageComposer](/ui-kit/flutter/message-composer) Widget of UI Kits.
+Once you have successfully activated the [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary) from your CometChat Dashboard, the feature will automatically be incorporated into the Action sheet of [MessageComposer](/ui-kit/flutter/v5/message-composer) Widget of UI Kits.
@@ -91,16 +91,16 @@ Once you have successfully activated the [Conversation Summary](/fundamentals/ai
## Next Steps
-
+
Display and manage conversation messages with AI-powered starters
-
+
Compose messages with smart replies and AI assistance
Learn more about AI features and configuration
-
+
Explore other extensions to enhance your chat experience
diff --git a/ui-kit/flutter/v5/call-buttons.mdx b/ui-kit/flutter/v5/call-buttons.mdx
new file mode 100644
index 000000000..535d3d75b
--- /dev/null
+++ b/ui-kit/flutter/v5/call-buttons.mdx
@@ -0,0 +1,311 @@
+---
+title: "Call Buttons"
+description: "Widget that provides users with the ability to make voice and video calls with customizable icons and styles."
+---
+
+```json
+{
+ "component": "CometChatCallButtons",
+ "package": "cometchat_calls_uikit",
+ "import": "import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';",
+ "description": "Widget that provides users with the ability to make voice and video calls with customizable icons and styles.",
+ "props": {
+ "data": {
+ "user": { "type": "User?", "default": "null" },
+ "group": { "type": "Group?", "default": "null" }
+ },
+ "visibility": {
+ "hideVoiceCallButton": { "type": "bool?", "default": "false" },
+ "hideVideoCallButton": { "type": "bool?", "default": "false" }
+ },
+ "icons": {
+ "voiceCallIcon": "Widget?",
+ "videoCallIcon": "Widget?"
+ },
+ "style": {
+ "callButtonsStyle": "CometChatCallButtonsStyle?"
+ },
+ "configuration": {
+ "outgoingCallConfiguration": "CometChatOutgoingCallConfiguration?",
+ "callSettingsBuilder": "CallSettingsBuilder Function(User? user, Group? group, bool? isAudioOnly)?"
+ }
+ }
+}
+```
+
+
+## Overview
+
+The `CometChatCallButtons` is a [Widget](/ui-kit/flutter/v5/components-overview#components) provides users with the ability to make calls, access call-related functionalities, and control call settings. Clicking this button typically triggers the call to be placed to the desired recipient.
+
+
+
+
+
+## Usage
+
+### Integration
+
+You can launch `CometChatCallButtons` directly using `Navigator.push`, or you can define it as a widget within the `build` method of your `State` class.
+
+##### 1. Using Navigator to Launch `CometChatCallButtons`
+
+
+
+```dart
+Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatCallButtons()));
+```
+
+
+
+
+
+##### 2. Embedding `CometChatCallButtons` as a Widget in the build Method
+
+
+
+```dart
+import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';
+import 'package:flutter/material.dart';
+
+class CallButtonsExample extends StatefulWidget {
+ const CallButtonsExample({super.key});
+
+ @override
+ State createState() => _CallButtonsExampleState();
+}
+
+class _CallButtonsExampleState extends State {
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: SafeArea(
+ child: Center(
+ child: CometChatCallButtons()
+ )
+ ),
+ );
+ }
+}
+```
+
+
+
+
+
+***
+
+### Actions
+
+[Actions](/ui-kit/flutter/v5/components-overview#actions) dictate how a widget functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the widget to fit your specific needs.
+
+##### onError
+
+You can customize this behavior by using the provided code snippet to override the `onError` and improve error handling.
+
+
+
+```dart
+CometChatCallButtons(
+ onError: (e) {
+ // TODO("Not yet implemented")
+ },
+)
+```
+
+
+
+
+
+***
+
+### Filters
+
+**Filters** allow you to customize the data displayed in a list within a Widget. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK.
+
+The CallButton widget does not have any exposed filters.
+
+***
+
+### Events
+
+[Events](/ui-kit/flutter/v5/components-overview#events) are emitted by a `Widget`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.
+
+Events emitted by the Call buttons widget are as follows.
+
+| Event | Description |
+| ------------------ | -------------------------------------------- |
+| **ccCallAccepted** | Triggers when the outgoing call is accepted. |
+| **ccCallRejected** | Triggers when the outgoing call is rejected. |
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:flutter/material.dart';
+
+class YourScreen extends StatefulWidget {
+ const YourScreen({super.key});
+
+ @override
+ State createState() => _YourScreenState();
+}
+
+class _YourScreenState extends State with CometChatCallEventListener {
+
+ @override
+ void initState() {
+ super.initState();
+ CometChatCallEvents.addCallEventsListener("unique_listener_ID", this); // Add the listener
+ }
+
+ @override
+ void dispose(){
+ super.dispose();
+ CometChatCallEvents.removeCallEventsListener("unique_listener_ID"); // Remove the listener
+ }
+
+ @override
+ void ccCallAccepted(Call call) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccCallRejected(Call call) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return const Placeholder();
+ }
+
+}
+```
+
+
+
+
+
+***
+
+## Customization
+
+To fit your app's design requirements, you can customize the appearance of the conversation widget. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.
+
+### Style
+
+You can customize the appearance of the `CometChatCallButtons` Widget by applying the `CometChatCallButtonsStyle` to it using the following code snippet.
+
+
+
+```dart
+CometChatCallButtons(
+ callButtonsStyle: CometChatCallButtonsStyle(
+ voiceCallIconColor: Color(0xFF6852D6),
+ videoCallIconColor: Color(0xFF6852D6),
+ voiceCallButtonColor: Color(0xFFEDEAFA),
+ videoCallButtonColor: Color(0xFFEDEAFA),
+ voiceCallButtonBorderRadius: BorderRadius.circular(12.5),
+ videoCallButtonBorderRadius: BorderRadius.circular(12.5),
+ videoCallButtonBorder: BorderSide(
+ color: Color(0xFFE8E8E8),
+ width: 1,
+ ),
+ voiceCallButtonBorder: BorderSide(
+ color: Color(0xFFE8E8E8),
+ width: 1,
+ ),
+ )
+)
+```
+
+
+
+
+
+***
+
+### Functionality
+
+These are a set of small functional customizations that allow you to fine-tune the overall experience of the widget. With these, you can change text, set custom icons, and toggle the visibility of UI elements.
+
+**Example**
+
+Here is the example for reference:
+
+
+
+```dart
+CometChatCallButtons(
+ hideVideoCallButton: true,
+)
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Below is a list of customizations along with corresponding code snippets
+
+| **Property** | Description | Code |
+| ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- |
+| **User** | Used to set User object to the call button. | `user: User?` |
+| **Group** | Used to set Group object to the call button. | `group: Group?` |
+| **CallSettingsBuilder** | Sets the call settings builder callback function. This callback is responsible for configuring the call settings based on the user, group, and call type (audio/video). | `callSettingsBuilder: CallSettingsBuilder?` |
+| **Hide Video Call** | Hides the video call button. | `hideVideoCallButton: bool?` |
+| **Hide Voice Call** | Hides the voice call button. | `hideVoiceCallButton: bool?` |
+| **Video Call Icon** | Sets the icon for the video call button. | `videoCallIcon: Icon?` |
+| **Voice Call Icon** | Sets the icon for the voice call button. | `voiceCallIcon: Icon?` |
+| **outgoingCallConfiguration** | Sets the configurations for outgoing call component. | `outgoingCallConfiguration: CometChatOutgoingCallConfiguration?` |
+
+***
+
+### Advanced
+
+For advanced-level customization, you can set custom views to the widget. This lets you tailor each aspect of the widget to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the widget.
+
+The `CometChatCallButtons` widget does not provide additional functionalities beyond this level of customization.
+
+***
+
+## Configurations
+
+Configurations offer the ability to customize the properties of each individual component within a Composite Component.
+
+* `Configurations` expose properties that are available in its individual components.
+
+***
+
+### Outgoing Call
+
+You can customize the properties of the `Outgoing Call` component by making use of the `OutgoingCallConfiguration`. You can accomplish this by employing the `OutgoingCallConfiguration` as demonstrated below:
+
+
+
+```dart
+CometChatCallButtons(
+ outgoingCallConfiguration: CometChatOutgoingCallConfiguration(),
+)
+```
+
+
+
+
+
+All exposed properties of OutgoingCallConfiguration can be found under `Outgoing Call`.
+
+***
diff --git a/ui-kit/flutter/v5/call-features.mdx b/ui-kit/flutter/v5/call-features.mdx
new file mode 100644
index 000000000..5a70ad901
--- /dev/null
+++ b/ui-kit/flutter/v5/call-features.mdx
@@ -0,0 +1,73 @@
+---
+title: "Call Features"
+sidebarTitle: "Calls"
+description: "Integrate one-on-one and group audio/video calling capabilities into your Flutter app with CometChat UI Kit"
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Packages | `cometchat_chat_uikit` + `cometchat_calls_uikit` (add to `pubspec.yaml`) |
+| Required setup | `CometChatUIKit.init(uiKitSettings: UIKitSettings)` then `CometChatUIKit.login(uid)` — Calls SDK must also be installed |
+| Call features | Incoming Call, Outgoing Call, Call Logs, Call Buttons |
+| Key components | `CometChatCallButtons` → [Call Buttons](/ui-kit/flutter/v5/call-buttons), `CometChatIncomingCall` → [Incoming Call](/ui-kit/flutter/v5/incoming-call), `CometChatOutgoingCall` → [Outgoing Call](/ui-kit/flutter/v5/outgoing-call), `CometChatCallLogs` → [Call Logs](/ui-kit/flutter/v5/call-logs) |
+| Auto-detection | UI Kit automatically detects the Calls SDK and enables call UI components |
+| Requirements | minSdkVersion 24 (Android), iOS 12+ |
+
+
+
+CometChat's Calls feature is an advanced functionality that allows you to seamlessly integrate one-on-one as well as group audio and video calling capabilities into your application. This document provides a technical overview of these features, as implemented in the Flutter UI Kit.
+
+
+If you haven't set up calling yet, follow the [Calling Integration](/ui-kit/flutter/v5/calling-integration) guide first.
+
+
+## Features
+
+### Incoming Call
+
+The [Incoming Call](/ui-kit/flutter/v5/incoming-call) widget of the CometChat UI Kit provides the functionality that lets users receive real-time audio and video calls in the app.
+
+When a call is made to a user, the Incoming Call widget triggers and displays a call screen. This call screen typically displays the caller information and provides the user with options to either accept or reject the incoming call.
+
+
+
+
+
+### Outgoing Call
+
+The [Outgoing Call](/ui-kit/flutter/v5/outgoing-call) widget of the CometChat UI Kit is designed to manage the outgoing call process within your application. When a user initiates an audio or video call to another user or group, this widget displays an outgoing call screen, showcasing information about the recipient and the call status.
+
+Importantly, the Outgoing Call widget is smartly designed to transition automatically into the ongoing call screen once the receiver accepts the call. This ensures a smooth flow from initiating the call to engaging in a conversation, without any additional steps required from the user.
+
+
+
+
+
+### Call Logs
+
+[Call Logs](/ui-kit/flutter/v5/call-logs) widget provides you with the records call events such as who called who, the time of the call, and the duration of the call. This information can be fetched from the CometChat server and displayed in a structured format for users to view their past call activities.
+
+
+
+
+
+---
+
+## Next Steps
+
+
+
+ Add audio and video call buttons to your chat interface
+
+
+ Handle and display incoming call screens
+
+
+ Manage outgoing call screens and transitions
+
+
+ Display call history and records
+
+
diff --git a/ui-kit/flutter/v5/call-logs.mdx b/ui-kit/flutter/v5/call-logs.mdx
new file mode 100644
index 000000000..f4da2467c
--- /dev/null
+++ b/ui-kit/flutter/v5/call-logs.mdx
@@ -0,0 +1,907 @@
+---
+title: "Call Logs"
+description: "Widget that shows the list of Call Logs available with filtering, call-back actions, and custom views."
+---
+
+```json
+{
+ "component": "CometChatCallLogs",
+ "package": "cometchat_calls_uikit",
+ "import": "import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';",
+ "description": "Widget that shows the list of Call Logs available with filtering, call-back actions, and custom views.",
+ "props": {
+ "data": {
+ "callLogsRequestBuilder": { "type": "CallLogRequestBuilder?", "default": "null" },
+ "callLogsBuilderProtocol": { "type": "CallLogsBuilderProtocol?", "default": "null" }
+ },
+ "callbacks": {
+ "onItemClick": "Function(CallLog callLog)?",
+ "onItemLongPress": "Function(CallLog callLog)?",
+ "onCallLogIconClicked": "Function(CallLog callLog)?",
+ "onBack": "VoidCallback?",
+ "onError": "OnError?",
+ "onLoad": "OnLoad?",
+ "onEmpty": "OnEmpty?"
+ },
+ "visibility": {
+ "hideAppbar": { "type": "bool?", "default": "false" },
+ "showBackButton": { "type": "bool?", "default": "true" }
+ },
+ "viewSlots": {
+ "listItemView": "Widget? Function(CallLog callLog, BuildContext context)?",
+ "subTitleView": "Widget? Function(CallLog callLog, BuildContext context)?",
+ "trailingView": "Function(BuildContext context, CallLog callLog)?",
+ "leadingStateView": "Widget? Function(BuildContext, CallLog)?",
+ "titleView": "Widget? Function(BuildContext, CallLog)?",
+ "backButton": "Widget?",
+ "emptyStateView": "WidgetBuilder?",
+ "errorStateView": "WidgetBuilder?",
+ "loadingStateView": "WidgetBuilder?"
+ },
+ "style": {
+ "callLogsStyle": "CometChatCallLogsStyle?"
+ },
+ "icons": {
+ "audioCallIcon": "Widget?",
+ "videoCallIcon": "Widget?",
+ "incomingCallIcon": "Widget?",
+ "outgoingCallIcon": "Widget?",
+ "missedCallIcon": "Widget?"
+ },
+ "formatting": {
+ "datePattern": "String?",
+ "dateSeparatorPattern": "String?"
+ }
+ }
+}
+```
+
+
+## Overview
+
+`CometChatCallLogs` is a [Widget](/ui-kit/flutter/v5/components-overview#components) that shows the list of Call Logs available. By default, names are shown for all listed users, along with their avatars if available.
+
+
+
+
+
+The `CometChatCallLogs` widget is composed of the following BaseWidgets:
+
+| Widgets | Description |
+| --------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [CometChatListBase](/ui-kit/flutter/v5/components-overview) | `CometChatListBase` is a container widget featuring a title, customizable background options, and a dedicated list widget for seamless integration within your application's interface. |
+| [CometChatListItem](/ui-kit/flutter/v5/components-overview) | This widget displays data retrieved from a CallLog object on a card, presenting a title and subtitle. |
+
+## Usage
+
+### Integration
+
+`CometChatCallLogs` being a wrapper widget, offers versatility in its integration. It can be seamlessly launched via button clicks or any user-triggered action, enhancing the overall user experience and facilitating smoother interactions within the application.
+
+You can launch `CometChatCallLogs` directly using `Navigator.push`, or you can define it as a widget within the `build` method of your `State` class.
+
+##### 1. Using Navigator to Launch `CometChatCallLogs`
+
+
+
+```dart
+Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatCallLogs()));
+```
+
+
+
+
+
+##### 2. Embedding `CometChatCallLogs` as a Widget in the build Method
+
+
+
+```dart
+import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';
+import 'package:flutter/material.dart';
+
+class CallLogsExample extends StatefulWidget {
+ const CallLogsExample({super.key});
+
+ @override
+ State createState() => _CallLogsExampleState();
+}
+
+class _CallLogsExampleState extends State {
+
+ @override
+ Widget build(BuildContext context) {
+ return const Scaffold(
+ body: SafeArea(
+ child: CometChatCallLogs(),
+ ),
+ );
+ }
+}
+```
+
+
+
+
+
+***
+
+### Actions
+
+[Actions](/ui-kit/flutter/v5/components-overview#actions) dictate how a widget functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the widget to fit your specific needs.
+
+##### onItemClick
+
+This method proves valuable when users seek to override the `onItemClick` functionality within CometChatCallLogs, empowering them with greater control and customization options.
+
+The `onItemClick` action function invoked when a call log item is clicked, typically used to open a detailed chat screen.
+
+
+
+```dart
+CometChatCallLogs(
+ onItemClick: (callLog) {
+ // TODO("Not yet implemented")
+ },
+)
+```
+
+
+
+
+
+***
+
+##### onItemLongPress
+
+Function executed when a callLog item is long-pressed, allowing additional actions like delete or select.
+
+
+
+```dart
+CometChatCallLogs(
+ onItemLongPress: (CallLog callLog) {
+ // TODO("Not yet implemented")
+ },
+)
+```
+
+
+
+
+
+***
+
+##### onBack
+
+`onBack` is triggered when you press the back button in the app bar. It has a predefined behavior; when clicked, it navigates to the previous activity. However, you can override this action using the following code snippet.
+
+
+
+```dart
+CometChatCallLogs(
+ onBack: () {
+ // TODO("Not yet implemented")
+ },
+)
+```
+
+
+
+
+
+***
+
+##### OnError
+
+This action doesn't change the behavior of the component but rather listens for any errors that occur in the callLogs component.
+
+
+
+```dart
+CometChatCallLogs(
+ onError: (e) {
+ // TODO("Not yet implemented")
+ },
+)
+```
+
+
+
+
+
+***
+
+##### onLoad
+
+Invoked when the list is successfully fetched and loaded, helping track component readiness.
+
+
+
+```dart
+CometChatCallLogs(
+ onLoad: (list) {
+ // print("Call Logs: $list");
+ },
+)
+```
+
+
+
+
+
+***
+
+##### onEmpty
+
+Called when the list is empty, enabling custom handling such as showing a placeholder message.
+
+
+
+```dart
+CometChatCallLogs(
+ onEmpty: () {
+ // Handle empty call logs
+ },
+)
+```
+
+
+
+
+
+***
+
+##### onCallLogIconClicked
+
+You can customize this behavior by using the provided code snippet to override the `onCallLogIconClicked` and improve error handling.
+
+
+
+```dart
+CometChatCallLogs(
+ onCallLogIconClicked: (CallLog callLog) {
+ // TODO("Not yet implemented")
+ },
+)
+```
+
+
+
+
+
+***
+
+### Filters
+
+**Filters** allow you to customize the data displayed in a list within a Widget. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK.
+
+##### 1. CallLogRequestBuilder
+
+The [CallLogRequestBuilder](/sdk/flutter/call-logs) enables you to filter and customize the call list based on available parameters in CallLogRequestBuilder. This feature allows you to create more specific and targeted queries during the call. The following are the parameters available in [CallLogRequestBuilder](/sdk/flutter/call-logs)
+
+**Example**
+
+In the example below, we are applying a filter based on the limit and have a call recording.
+
+
+
+```dart
+CometChatCallLogs(
+ callLogsRequestBuilder: CallLogRequestBuilder()
+ ..limit = 10
+ ..hasRecording = true,
+)
+```
+
+
+
+
+
+List of properties exposed by `CallLogRequestBuilder`
+
+| **Property** | Description | Code |
+| ------------------ | ----------------------------------------------------------- | ------------------------ |
+| **Auth Token** | Sets the authentication token. | `authToken: String?` |
+| **Call Category** | Sets the category of the call. | `callCategory: String?` |
+| **Call Direction** | Sets the direction of the call. | `callDirection: String?` |
+| **Call Status** | Sets the status of the call. | `callStatus: String?` |
+| **Call Type** | Sets the type of the call. | `callType: String?` |
+| **Guid** | Sets the unique ID of the group involved in the call. | `guid: String?` |
+| **Has Recording** | Indicates if the call has a recording. | `hasRecording: bool` |
+| **Limit** | Sets the maximum number of call logs to return per request. | `limit: int` |
+| **Uid** | Sets the unique ID of the user involved in the call. | `uid: String?` |
+
+***
+
+### Events
+
+[Events](/ui-kit/flutter/v5/components-overview#events) are emitted by a `Widget`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.
+
+The `CometChatCallLogs` widget does not have any exposed events.
+
+***
+
+## Customization
+
+To fit your app's design requirements, you can customize the appearance of the conversation widget. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.
+
+### Style
+
+You can customize the appearance of the `CometChatCallLogs` Widget by applying the `CometChatCallLogsStyle` to it using the following code snippet.
+
+
+
+```dart
+CometChatCallLogs(
+ callLogsStyle: CometChatCallLogsStyle(
+ titleTextColor: Color(0xFFF76808),
+ separatorColor: Color(0xFFF76808),
+ avatarStyle: CometChatAvatarStyle(
+ borderRadius: BorderRadius.circular(8),
+ backgroundColor: Color(0xFFFBAA75),
+ ),
+ ),
+)
+```
+
+
+
+
+
+
+
+
+
+***
+
+### Functionality
+
+These are a set of small functional customizations that allow you to fine-tune the overall experience of the widget. With these, you can change text, set custom icons, and toggle the visibility of UI elements.
+
+| **Methods** | Description | Code |
+| ------------------ | --------------------------------------------------------- | ------------------------------ |
+| **showBackButton** | Used to toggle visibility for back button in the app bar. | `setBackIconVisibility: bool?` |
+| **hideAppbar** | Used to toggle visibility for back button in the app bar. | `hideAppbar: bool?` |
+
+***
+
+
+
+```dart
+CometChatCallLogs(
+ backButton: Icon(Icons.add_alert, color: Color(0xFF6851D6)),
+)
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Below is a list of customizations along with corresponding code snippets
+
+| **Property** | **Description** | **Code** |
+| ----------------------------- | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- |
+| **Back Button** | A widget for the back button. | `backButton: Widget?` |
+| **Call Logs Request Builder** | Builder for creating call log requests. | `callLogsRequestBuilder: CallLogRequestBuilder?` |
+| **Date Pattern** | Format pattern for date display. | `datePattern: String?` |
+| **Date Separator Pattern** | Format pattern for date separator. | `dateSeparatorPattern: String?` |
+| **Empty State Text** | Text to display when there are no call logs. | `emptyStateText: String?` |
+| **Error State Text** | Text to display when there is an error. | `errorStateText: String?` |
+| **Hide Separator** | Whether to hide the separator between call logs. | `hideSeparator: bool` |
+| **Incoming Audio Call Icon** | Icon for incoming audio calls. | `incomingAudioCallIcon: Icon?` |
+| **Incoming Video Call Icon** | Icon for incoming video calls. | `incomingVideoCallIcon: Icon?` |
+| **Info Icon Url** | URL for the info icon. | `infoIconUrl: String?` |
+| **Loading Icon Url** | URL for the loading icon. | `loadingIconUrl: String?` |
+| **Missed Audio Call Icon** | Icon for missed audio calls. | `missedAudioCallIcon: Icon?` |
+| **Missed Video Call Icon** | Icon for missed video calls. | `missedVideoCallIcon: Icon?` |
+| **Outgoing Audio Call Icon** | Icon for outgoing audio calls. | `outgoingAudioCallIcon: Icon?` |
+| **Outgoing Video Call Icon** | Icon for outgoing video calls. | `outgoingVideoCallIcon: Icon?` |
+| **Set Options** | Set List of actions available on the long press of list item . | `setOptions: List? Function(Group group,CometChatGroupsController controller, BuildContext context)?` |
+| **Add Options** | adds into the current List of actions available on the long press of list item | `addOptions: List? Function(Group group,CometChatGroupsController controller, BuildContext context)?` |
+
+***
+
+### Advanced
+
+For advanced-level customization, you can set custom widgets to the widget. This lets you tailor each aspect of the widget to fit your exact needs and application aesthetics. You can create and define your widgets, layouts, and UI elements and then incorporate those into the widget.
+
+#### setOptions
+
+Defines the available actions users can perform on a call log entry, such as deleting, marking as spam, or calling back.
+
+**Use Cases:**
+
+* Provide quick call-back options.
+* Allow users to block a number.
+* Enable deleting multiple call logs.
+
+
+
+```dart
+CometChatCallLogs(
+ setOptions: (callLog, controller, context) {
+ // Set options for call log
+ },
+)
+```
+
+
+
+
+
+***
+
+#### addOptions
+
+Adds custom actions to the existing call log options.
+
+**Use Cases:**
+
+* Add favorite/star call log option.
+* Add favorite/star call log option.
+* Provide an archive feature.
+
+
+
+```dart
+CometChatCallLogs(
+ addOptions: (callLog, controller, context) {
+ // Set options for call log
+ },
+)
+```
+
+
+
+
+
+***
+
+#### ListItemView
+
+With this property, you can assign a custom ListItem to the Call Logs Widget.
+
+**Example**
+
+Here is the complete example for reference:
+
+
+
+```dart
+ CometChatCallLogs(
+ listItemView: (callLog, context) {
+ final status =
+ getCallStatus(context, callLog, CometChatUIKit.loggedInUser);
+ IconData icon = Icons.call;
+ Color? color;
+ Color? textColor;
+ if (status == "Incoming Call") {
+ icon = Icons.phone_callback_rounded;
+ color = Color(0xFF6852D6);
+ } else if (status == "Outgoing Call") {
+ icon = Icons.phone_forwarded;
+ color = Color(0xFF6852D6);
+ } else if (status == "Missed Call") {
+ icon = Icons.phone_missed;
+ color = Colors.red;
+ textColor = Colors.red;
+ }
+
+ String name = "";
+
+ if (CometChatUIKit.loggedInUser != null) {
+ if (callLog.initiator is CallUser && callLog.receiver is CallUser) {
+ CallUser callUserInitiator = callLog.initiator as CallUser;
+ CallUser callUserReceiver = callLog.receiver as CallUser;
+ if (CometChatUIKit.loggedInUser?.uid == callUserInitiator.uid) {
+ name = callUserReceiver.name ?? "";
+ } else {
+ name = callUserInitiator.name ?? "";
+ }
+ } else if (callLog.initiator is CallUser &&
+ callLog.receiver is CallGroup) {
+ CallUser callUserInitiator = callLog.initiator as CallUser;
+ CallGroup callGroupReceiver = callLog.receiver as CallGroup;
+ if (CometChatUIKit.loggedInUser?.uid == callUserInitiator.uid) {
+ name = callGroupReceiver.name ?? "";
+ } else {
+ name = callUserInitiator.name ?? "";
+ }
+ }
+ }
+
+ //TODO: import DateFormat from intl package
+ String formattedDate = DateFormat('d MMM, hh:mm a').format(
+ DateTime.fromMillisecondsSinceEpoch(
+ (callLog.initiatedAt ?? 0) * 1000));
+
+ return ListTile(
+ leading: CircleAvatar(
+ backgroundColor: Color(0xFFEDEAFA),
+ child: Icon(
+ icon,
+ color: color,
+ size: 24,
+ ),
+ ),
+ title: Text(
+ name,
+ style: TextStyle(
+ fontSize: 16,
+ fontWeight: FontWeight.w500,
+ color: textColor ?? Color(0xFF141414),
+ letterSpacing: 0),
+ ),
+ subtitle: Text(
+ status,
+ style: TextStyle(
+ color: Color(0xFF727272),
+ fontSize: 14,
+ fontWeight: FontWeight.w400,
+ letterSpacing: 0),
+ ),
+ trailing: Text(
+ formattedDate,
+ style: TextStyle(
+ color: Color(0xFF727272),
+ fontSize: 14,
+ fontWeight: FontWeight.w400,
+ letterSpacing: 0),
+ ),
+ );
+ },
+ );
+```
+
+
+
+
+```dart
+ /// Returns the call status message.
+ static String getCallStatus(
+ BuildContext context, CallLog callLog, User? loggedInUser) {
+ String callMessageText = "";
+ //check if the message is a call message and the receiver type is user
+ if (callLog.receiverType == ReceiverTypeConstants.user) {
+ CallUser initiator = callLog.initiator as CallUser;
+ //check if the call is initiated
+ if (callLog.status == CallStatusConstants.initiated) {
+ //check if the logged in user is the initiator
+ if (!isLoggedInUser(initiator, loggedInUser)) {
+ callMessageText = "Incoming Call";
+ } else {
+ callMessageText = "Outgoing Call";
+ }
+ } else if (callLog.status == CallStatusConstants.ongoing) {
+ callMessageText = "Call Accepted";
+ } else if (callLog.status == CallStatusConstants.ended) {
+ callMessageText = "Call Ended";
+ } else if (callLog.status == CallStatusConstants.unanswered) {
+ if (isLoggedInUser(initiator, loggedInUser)) {
+ callMessageText = "Call Unanswered";
+ } else {
+ callMessageText = "Missed Call";
+ }
+ } else if (callLog.status == CallStatusConstants.cancelled) {
+ if (isLoggedInUser(initiator, loggedInUser)) {
+ callMessageText = "Call Cancelled";
+ } else {
+ callMessageText = "Missed Call";
+ }
+ } else if (callLog.status == CallStatusConstants.rejected) {
+ if (isLoggedInUser(initiator, loggedInUser)) {
+ callMessageText = "Call Rejected";
+ } else {
+ callMessageText = "Missed Call";
+ }
+ } else if (callLog.status == CallStatusConstants.busy) {
+ if (isLoggedInUser(initiator, loggedInUser)) {
+ callMessageText = "Call Rejected";
+ } else {
+ callMessageText = "Missed Call";
+ }
+ }
+ }
+ return callMessageText;
+ }
+
+ /// Returns true if the call is initiated by the logged in user.
+ static bool isLoggedInUser(CallUser? initiator, User? loggedInUser) {
+ if (initiator == null || loggedInUser == null) {
+ return false;
+ } else {
+ return initiator.uid == loggedInUser.uid;
+ }
+ }
+```
+
+
+
+
+
+
+
+
+
+***
+
+#### TitleView
+
+Allows setting a custom title view, typically used for the caller’s name or number.
+
+**Use Cases:**
+
+* Display caller’s full name.
+* Show a business label for saved contacts.
+* Use bold text for unknown numbers.
+
+***
+
+#### LeadingView
+
+Customizes the leading view, usually the caller’s avatar or profile picture.
+
+**Use Cases:**
+
+* Display a profile picture.
+* Show a call type icon (missed, received, dialed).
+* Indicate call status (e.g., missed calls in red).
+
+***
+
+#### SubtitleView
+
+You can customize the subtitle widget for each call logs item to meet your requirements
+
+**Example**
+
+Here is the complete example for reference:
+
+
+
+```dart
+CometChatCallLogs(
+ subTitleView: (callLog, context) {
+ return Row(
+ children: [
+ getCallIcon(context, callLog, CometChatUIKit.loggedInUser),
+ Text(
+ getCallStatus(context, callLog, CometChatUIKit.loggedInUser),
+ style: TextStyle(
+ color: Color(0xFF727272),
+ fontSize: 14,
+ fontWeight: FontWeight.w400,
+ letterSpacing: 0),
+ )
+ ],
+ );
+ },
+ );
+```
+
+
+
+
+```dart
+ /// [getCallIcon] Return call status icon
+ static Widget getCallIcon(
+ BuildContext context, CallLog callLog, User? loggedInUser) {
+ bool isInitiatedByUser =
+ CallUtils.callLogLoggedInUser(callLog, loggedInUser);
+
+ // Define default icons if not provided
+ Widget incoming = Icon(
+ Icons.call_received_outlined,
+ color: Colors.red,
+ size: 16,
+ );
+
+ Widget outgoing = Icon(
+ Icons.call_made_outlined,
+ color: Color(0xFF09C26F),
+ size: 16,
+ );
+
+ Widget missed = Icon(
+ Icons.call_received_outlined,
+ color: Colors.red,
+ size: 16,
+ );
+
+ // Helper function to select icon based on initiator and call type
+ Widget selectIcon(bool isInitiatedByUser) {
+ return isInitiatedByUser ? outgoing : incoming;
+ }
+
+ // Switch on call status to determine the appropriate icon
+ switch (callLog.status) {
+ case CallStatusConstants.initiated:
+ case CallStatusConstants.ongoing:
+ case CallStatusConstants.ended:
+ return selectIcon(isInitiatedByUser);
+
+ case CallStatusConstants.unanswered:
+ case CallStatusConstants.cancelled:
+ case CallStatusConstants.rejected:
+ case CallStatusConstants.busy:
+ return isInitiatedByUser ? outgoing : missed;
+
+ default:
+ return const SizedBox(); // Return empty widget for unknown statuses
+ }
+ }
+```
+
+
+
+
+```dart
+ /// Returns the call status message.
+ static String getCallStatus(
+ BuildContext context, CallLog callLog, User? loggedInUser) {
+ String callMessageText = "";
+ //check if the message is a call message and the receiver type is user
+ if (callLog.receiverType == ReceiverTypeConstants.user) {
+ CallUser initiator = callLog.initiator as CallUser;
+ //check if the call is initiated
+ if (callLog.status == CallStatusConstants.initiated) {
+ //check if the logged in user is the initiator
+ if (!isLoggedInUser(initiator, loggedInUser)) {
+ callMessageText = "Incoming Call";
+ } else {
+ callMessageText = "Outgoing Call";
+ }
+ } else if (callLog.status == CallStatusConstants.ongoing) {
+ callMessageText = "Call Accepted";
+ } else if (callLog.status == CallStatusConstants.ended) {
+ callMessageText = "Call Ended";
+ } else if (callLog.status == CallStatusConstants.unanswered) {
+ if (isLoggedInUser(initiator, loggedInUser)) {
+ callMessageText = "Call Unanswered";
+ } else {
+ callMessageText = "Missed Call";
+ }
+ } else if (callLog.status == CallStatusConstants.cancelled) {
+ if (isLoggedInUser(initiator, loggedInUser)) {
+ callMessageText = "Call Cancelled";
+ } else {
+ callMessageText = "Missed Call";
+ }
+ } else if (callLog.status == CallStatusConstants.rejected) {
+ if (isLoggedInUser(initiator, loggedInUser)) {
+ callMessageText = "Call Rejected";
+ } else {
+ callMessageText = "Missed Call";
+ }
+ } else if (callLog.status == CallStatusConstants.busy) {
+ if (isLoggedInUser(initiator, loggedInUser)) {
+ callMessageText = "Call Rejected";
+ } else {
+ callMessageText = "Missed Call";
+ }
+ }
+ }
+ return callMessageText;
+ }
+
+ /// Returns true if the call is initiated by the logged in user.
+ static bool isLoggedInUser(CallUser? initiator, User? loggedInUser) {
+ if (initiator == null || loggedInUser == null) {
+ return false;
+ } else {
+ return initiator.uid == loggedInUser.uid;
+ }
+ }
+```
+
+
+
+
+
+
+
+
+
+***
+
+#### TrailingView
+
+You can customize the tail widget for each call logs item to meet your requirements
+
+**Example**
+
+Here is the complete example for reference:
+
+
+
+```dart
+CometChatCallLogs(
+ trailingView: (context, callLog) {
+ String formattedDate = DateFormat('d MMM, hh:mm a').format(
+ DateTime.fromMillisecondsSinceEpoch(
+ (callLog.initiatedAt ?? 0) * 1000));
+ return Text(
+ formattedDate,
+ style: TextStyle(
+ color: Color(0xFF727272),
+ fontSize: 14,
+ fontWeight: FontWeight.w400,
+ letterSpacing: 0),
+ );
+ },
+)
+```
+
+
+
+
+
+
+
+
+
+***
+
+## Configurations
+
+[Configurations](/ui-kit/flutter/v5/components-overview#configurations) offer the ability to customize the properties of each widget within a Composite Widget.
+
+`CometChatCallLogs` has `CometChatOutgoingCall` widget. Hence, each of these widgets will have its individual \`Configuration\`\`.
+
+* `Configurations` expose properties that are available in its individual widgets.
+
+#### Outgoing Call
+
+You can customize the properties of the OutGoing Call widget by making use of the `OutgoingCallConfiguration`. You can accomplish this by employing the `outgoingCallConfiguration` props as demonstrated below:
+
+**Example**
+
+Here is the complete example for reference:
+
+
+
+```dart
+CometChatCallLogs(
+ outgoingCallConfiguration: OutgoingCallConfiguration(
+ subtitle: "Outgoing Call",
+ outgoingCallStyle: OutgoingCallStyle(
+ background: Color(0xFFE4EBF5),
+ )
+ ),
+)
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+All exposed properties of `OutgoingCallConfiguration` can be found under [OutGoing Call](/ui-kit/flutter/v5/outgoing-call#functionality). Properties marked with the 🛑 symbol are not accessible within the Configuration Object.
+
+***
diff --git a/ui-kit/flutter/calling-integration.mdx b/ui-kit/flutter/v5/calling-integration.mdx
similarity index 95%
rename from ui-kit/flutter/calling-integration.mdx
rename to ui-kit/flutter/v5/calling-integration.mdx
index 13b3dbf1d..2f07abddd 100644
--- a/ui-kit/flutter/calling-integration.mdx
+++ b/ui-kit/flutter/v5/calling-integration.mdx
@@ -8,7 +8,7 @@ description: "Add voice and video calling to your Flutter UI Kit application"
This guide walks you through adding voice and video calling capabilities to your Flutter application using the CometChat UI Kit.
-Make sure you've completed the [Getting Started](/ui-kit/flutter/getting-started) guide before proceeding.
+Make sure you've completed the [Getting Started](/ui-kit/flutter/v5/getting-started) guide before proceeding.
## Step 1: Add Dependency
@@ -81,7 +81,7 @@ CometChatUIKit.login(uid, onSuccess: (s) {
## Verify Integration
-After adding the dependency, the Flutter UI Kit will automatically detect it and activate calling features. You will see [CallButtons](/ui-kit/flutter/call-buttons) rendered in the [MessageHeader](/ui-kit/flutter/message-header) widget.
+After adding the dependency, the Flutter UI Kit will automatically detect it and activate calling features. You will see [CallButtons](/ui-kit/flutter/v5/call-buttons) rendered in the [MessageHeader](/ui-kit/flutter/v5/message-header) widget.
diff --git a/ui-kit/flutter/v5/color-resources.mdx b/ui-kit/flutter/v5/color-resources.mdx
new file mode 100644
index 000000000..4ec539b47
--- /dev/null
+++ b/ui-kit/flutter/v5/color-resources.mdx
@@ -0,0 +1,223 @@
+---
+title: "Color Resources"
+sidebarTitle: "Color Resources"
+description: "Complete reference for CometChatColorPalette tokens in Flutter UI Kit."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Class | `CometChatColorPalette` |
+| Usage | `ThemeData(extensions: [CometChatColorPalette(...)])` |
+| Categories | Primary, Neutral, Alert, Text, Icon, Border, Background, Button, Shimmer |
+| Light mode | Use light color values |
+| Dark mode | Use dark color values |
+| Source | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/shared_uikit/lib/src/theme/colors) |
+
+
+
+`CometChatColorPalette` controls all colors in the UI Kit. Apply it via `ThemeData.extensions`.
+
+---
+
+## Complete Token Reference
+
+### Primary Colors
+
+| Token | Description |
+| --- | --- |
+| `primary` | Main accent color |
+| `extendedPrimary50` | 96% lighter (light) / 80% darker (dark) |
+| `extendedPrimary100` | 88% lighter (light) / 72% darker (dark) |
+| `extendedPrimary200` | 77% lighter (light) / 64% darker (dark) |
+| `extendedPrimary300` | 66% lighter (light) / 56% darker (dark) |
+| `extendedPrimary400` | 55% lighter (light) / 48% darker (dark) |
+| `extendedPrimary500` | 44% lighter (light) / 40% darker (dark) |
+| `extendedPrimary600` | 33% lighter (light) / 32% darker (dark) |
+| `extendedPrimary700` | 22% lighter (light) / 24% darker (dark) |
+| `extendedPrimary800` | 11% lighter (light) / 16% darker (dark) |
+| `extendedPrimary900` | 11% lighter (light) / 8% darker (dark) |
+
+### Neutral Colors
+
+| Token | Description |
+| --- | --- |
+| `neutral50` - `neutral900` | Surface and background shades (50, 100, 200, 300, 400, 500, 600, 700, 800, 900) |
+
+### Alert Colors
+
+| Token | Description |
+| --- | --- |
+| `info` | Information indicator |
+| `warning` | Warning indicator |
+| `error` | Error indicator |
+| `success` | Success indicator |
+| `error100` | Light/dark mode error shade |
+
+### Text Colors
+
+| Token | Description |
+| --- | --- |
+| `textPrimary` | Primary text |
+| `textSecondary` | Secondary text |
+| `textTertiary` | Tertiary text |
+| `textDisabled` | Disabled text |
+| `textWhite` | White text |
+| `textHighlight` | Highlighted text |
+
+### Icon Colors
+
+| Token | Description |
+| --- | --- |
+| `iconPrimary` | Primary icon |
+| `iconSecondary` | Secondary icon |
+| `iconTertiary` | Tertiary icon |
+| `iconWhite` | White icon |
+| `iconHighlight` | Highlighted icon |
+
+### Border Colors
+
+| Token | Description |
+| --- | --- |
+| `borderLight` | Light border |
+| `borderDefault` | Default border |
+| `borderDark` | Dark border |
+| `borderHighlight` | Highlighted border |
+
+### Background Colors
+
+| Token | Description |
+| --- | --- |
+| `background1` | Primary background |
+| `background2` | Secondary background |
+| `background3` | Tertiary background |
+| `background4` | Quaternary background |
+
+### Button Colors
+
+| Token | Description |
+| --- | --- |
+| `buttonBackground` | Primary button background |
+| `secondaryButtonBackground` | Secondary button background |
+| `buttonIconColor` | Primary button icon |
+| `buttonText` | Primary button text |
+| `secondaryButtonIcon` | Secondary button icon |
+| `secondaryButtonText` | Secondary button text |
+
+### Other
+
+| Token | Description |
+| --- | --- |
+| `shimmerBackground` | Shimmer effect background |
+| `shimmerGradient` | Shimmer effect gradient |
+| `messageSeen` | Read receipt indicator |
+| `white` | White color |
+| `black` | Black color |
+| `transparent` | Transparent color |
+
+---
+
+## Light Mode
+
+
+
+
+
+
+
+```dart
+ThemeData(
+ extensions: [
+ CometChatColorPalette(
+ primary: Color(0xFF6852D6),
+ textPrimary: Color(0xFF141414),
+ textSecondary: Color(0xFF727272),
+ background1: Color(0xFFFFFFFF),
+ borderLight: Color(0xFFF5F5F5),
+ borderDark: Color(0xFFDCDCDC),
+ iconSecondary: Color(0xFFA1A1A1),
+ iconHighlight: Color(0xFF6852D6),
+ success: Color(0xFF09C26F),
+ warning: Color(0xFFFAAB00),
+ extendedPrimary500: Color(0xFFAA9EE8),
+ messageSeen: Color(0xFF56E8A7),
+ neutral300: Color(0xFFE8E8E8),
+ neutral600: Color(0xFF727272),
+ neutral900: Color(0xFF141414),
+ ),
+ ],
+)
+```
+
+
+
+---
+
+## Dark Mode
+
+
+
+
+
+
+
+```dart
+ThemeData(
+ extensions: [
+ CometChatColorPalette(
+ primary: Color(0xFF6852D6),
+ textPrimary: Color(0xFFFFFFFF),
+ textSecondary: Color(0xFF989898),
+ background1: Color(0xFF1A1A1A),
+ borderLight: Color(0xFF272727),
+ iconSecondary: Color(0xFF858585),
+ iconHighlight: Color(0xFF6852D6),
+ success: Color(0xFF0B9F5D),
+ warning: Color(0xFFD08D04),
+ extendedPrimary500: Color(0xFF3E3180),
+ messageSeen: Color(0xFF56E8A7),
+ neutral300: Color(0xFF383838),
+ neutral600: Color(0xFF989898),
+ neutral900: Color(0xFFFFFFFF),
+ ),
+ ],
+)
+```
+
+
+
+---
+
+## Custom Brand Colors
+
+
+
+
+
+
+
+```dart
+ThemeData(
+ extensions: [
+ CometChatColorPalette(
+ primary: Color(0xFFF76808),
+ iconHighlight: Color(0xFFF76808),
+ extendedPrimary500: Color(0xFFFBAA75),
+ textPrimary: Color(0xFF141414),
+ textSecondary: Color(0xFF727272),
+ background1: Color(0xFFFFFFFF),
+ borderLight: Color(0xFFF5F5F5),
+ borderDark: Color(0xFFDCDCDC),
+ success: Color(0xFF09C26F),
+ warning: Color(0xFFFAAB00),
+ messageSeen: Color(0xFF56E8A7),
+ neutral300: Color(0xFFE8E8E8),
+ neutral600: Color(0xFF727272),
+ neutral900: Color(0xFF141414),
+ ),
+ ],
+)
+```
+
+
diff --git a/ui-kit/flutter/compact-message-composer.mdx b/ui-kit/flutter/v5/compact-message-composer.mdx
similarity index 98%
rename from ui-kit/flutter/compact-message-composer.mdx
rename to ui-kit/flutter/v5/compact-message-composer.mdx
index 4ea60cb7b..12b3dd181 100644
--- a/ui-kit/flutter/compact-message-composer.mdx
+++ b/ui-kit/flutter/v5/compact-message-composer.mdx
@@ -101,7 +101,7 @@ description: "A streamlined, pill-shaped message composer with inline rich text
## Where It Fits
-`CometChatCompactMessageComposer` is a [Widget](/ui-kit/flutter/components-overview#components) that provides a streamlined, modern messaging input experience. It features a pill-shaped compose box with an inline rich text formatting toolbar, voice recording, attachments, mentions, and auxiliary actions like stickers.
+`CometChatCompactMessageComposer` is a [Widget](/ui-kit/flutter/v5/components-overview#components) that provides a streamlined, modern messaging input experience. It features a pill-shaped compose box with an inline rich text formatting toolbar, voice recording, attachments, mentions, and auxiliary actions like stickers.
Compared to `CometChatMessageComposer`, the compact variant offers:
- A rounded, pill-shaped input field
@@ -527,7 +527,7 @@ CometChatCompactMessageComposer(
### Text Formatters
-Assigns the list of text formatters. To configure the existing Mentions look and feel check out [CometChatMentionsFormatter](/ui-kit/flutter/mentions-formatter-guide).
+Assigns the list of text formatters. To configure the existing Mentions look and feel check out [CometChatMentionsFormatter](/ui-kit/flutter/v5/mentions-formatter-guide).
@@ -657,16 +657,16 @@ CometChatCompactMessageComposer(
| `recorderSendButtonIcon` | `Widget?` | - | Custom recorder send button icon |
-
+
The standard message composer component
-
+
Display user or group details in the header
-
+
Display messages in a conversation
-
+
Configure mentions look and feel
diff --git a/ui-kit/flutter/v5/component-styling.mdx b/ui-kit/flutter/v5/component-styling.mdx
new file mode 100644
index 000000000..c3fd79f62
--- /dev/null
+++ b/ui-kit/flutter/v5/component-styling.mdx
@@ -0,0 +1,490 @@
+---
+title: "Component Styling"
+sidebarTitle: "Component Styling"
+description: "Style individual CometChat Flutter UI Kit components using ThemeExtensions."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Method | Add component style classes to `ThemeData.extensions` |
+| Components | Conversations, MessageList, MessageComposer, MessageHeader, Users, Groups, GroupMembers |
+| Base components | Avatar, Badge, StatusIndicator, Receipts, Reactions, ReactionList, MediaRecorder |
+| AI components | ConversationStarter, ConversationSummary, SmartReplies, AIOptionSheet, AIAssistantChatHistory |
+| Option sheets | MessageOptionSheet, AttachmentOptionSheet, AIOptionSheet |
+| Pattern | `CometChatStyle` classes |
+| Source | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/chat_uikit) |
+
+
+
+Style individual components by adding their style classes to `ThemeData.extensions`.
+
+---
+
+## Main Components
+
+### Conversations
+
+
+
+
+
+
+
+```dart
+ThemeData(
+ extensions: [
+ CometChatConversationsStyle(
+ avatarStyle: CometChatAvatarStyle(
+ borderRadius: BorderRadius.circular(8),
+ backgroundColor: Color(0xFFFBAA75),
+ ),
+ badgeStyle: CometChatBadgeStyle(
+ backgroundColor: Color(0xFFF76808),
+ ),
+ ),
+ ],
+)
+```
+
+
+
+### Message List
+
+
+
+
+
+
+
+```dart
+ThemeData(
+ extensions: [
+ CometChatMessageListStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ ),
+ ),
+ ],
+)
+```
+
+
+
+### Message Composer
+
+
+
+
+
+
+
+```dart
+ThemeData(
+ extensions: [
+ CometChatMessageComposerStyle(
+ sendButtonIconBackgroundColor: Color(0xFFF76808),
+ secondaryButtonIconColor: Color(0xFFF76808),
+ auxiliaryButtonIconColor: Color(0xFFF76808),
+ ),
+ ],
+)
+```
+
+
+
+### Message Header
+
+
+
+
+
+
+
+```dart
+ThemeData(
+ extensions: [
+ CometChatMessageHeaderStyle(
+ avatarStyle: CometChatAvatarStyle(
+ backgroundColor: Color(0xFFFBAA75),
+ borderRadius: BorderRadius.circular(6.67),
+ ),
+ callButtonsStyle: CometChatCallButtonsStyle(
+ voiceCallIconColor: Color(0xFFF76808),
+ videoCallIconColor: Color(0xFFF76808),
+ ),
+ ),
+ ],
+)
+```
+
+
+
+### Users
+
+
+
+
+
+
+
+```dart
+ThemeData(
+ extensions: [
+ CometChatUsersStyle(
+ avatarStyle: CometChatAvatarStyle(
+ borderRadius: BorderRadius.circular(8),
+ backgroundColor: Color(0xFFFBAA75),
+ ),
+ titleTextColor: Color(0xFFF76808),
+ separatorColor: Color(0xFFF76808),
+ backgroundColor: Color(0xFFFFF9F5),
+ ),
+ ],
+)
+```
+
+
+
+### Groups
+
+
+
+
+
+
+
+```dart
+ThemeData(
+ extensions: [
+ CometChatGroupsStyle(
+ avatarStyle: CometChatAvatarStyle(
+ borderRadius: BorderRadius.circular(8),
+ backgroundColor: Color(0xFFFBAA75),
+ ),
+ titleTextColor: Color(0xFFF76808),
+ separatorColor: Color(0xFFF76808),
+ backgroundColor: Color(0xFFFFF9F5),
+ ),
+ ],
+)
+```
+
+
+
+### Group Members
+
+
+
+```dart
+ThemeData(
+ extensions: [
+ CometChatGroupMembersStyle(
+ avatarStyle: CometChatAvatarStyle(
+ borderRadius: BorderRadius.circular(8),
+ backgroundColor: Color(0xFFFBAA75),
+ ),
+ titleStyle: TextStyle(color: Color(0xFFF76808)),
+ separatorColor: Color(0xFFF76808),
+ ownerMemberScopeBackgroundColor: Color(0xFFF76808),
+ adminMemberScopeBackgroundColor: Color(0xFFFEEDE1),
+ adminMemberScopeBorder: Border.all(color: Color(0xFFF76808)),
+ adminMemberScopeTextColor: Color(0xFFF76808),
+ moderatorMemberScopeBackgroundColor: Color(0xFFFEEDE1),
+ moderatorMemberScopeTextColor: Color(0xFFF76808),
+ backIconColor: Color(0xFFF76808),
+ ),
+ ],
+)
+```
+
+
+
+---
+
+## Base Components
+
+### Avatar
+
+
+
+
+
+
+
+```dart
+CometChatAvatarStyle(
+ borderRadius: BorderRadius.circular(8),
+ backgroundColor: Color(0xFFFBAA75),
+)
+```
+
+
+
+### Badge
+
+
+
+
+
+
+
+```dart
+CometChatBadgeStyle(
+ borderRadius: BorderRadius.circular(4),
+ backgroundColor: Color(0xFFF44649),
+)
+```
+
+
+
+### Status Indicator
+
+
+
+
+
+
+
+```dart
+CometChatStatusIndicatorStyle(
+ backgroundColor: Color(0xFFFFAB00),
+ borderRadius: BorderRadius.circular(2),
+)
+```
+
+
+
+### Receipts
+
+
+
+
+
+
+
+```dart
+CometChatMessageReceiptStyle(
+ readIconColor: Color(0xFFFFAB00),
+)
+```
+
+
+
+### Reactions
+
+
+
+
+
+
+
+```dart
+CometChatReactionsStyle(
+ borderRadius: BorderRadius.circular(8),
+)
+```
+
+
+
+### Reaction List
+
+
+
+```dart
+CometChatReactionListStyle(
+ activeTabTextColor: Color(0xFFF76808),
+ activeTabIndicatorColor: Color(0xFFF76808),
+)
+```
+
+
+
+### Media Recorder
+
+
+
+```dart
+CometChatMediaRecorderStyle(
+ recordIndicatorBackgroundColor: Color(0xFFF44649),
+ recordIndicatorBorderRadius: BorderRadius.circular(20),
+ pauseButtonBorderRadius: BorderRadius.circular(8),
+ deleteButtonBorderRadius: BorderRadius.circular(8),
+ stopButtonBorderRadius: BorderRadius.circular(8),
+)
+```
+
+
+
+---
+
+## Option Sheets
+
+### Message Option Sheet
+
+
+
+```dart
+ThemeData(
+ extensions: [
+ CometChatMessageOptionSheetStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ iconColor: Color(0xFFF76808),
+ ),
+ ],
+)
+```
+
+
+
+### Attachment Option Sheet
+
+
+
+```dart
+ThemeData(
+ extensions: [
+ CometChatAttachmentOptionSheetStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ iconColor: Color(0xFFF76808),
+ ),
+ ],
+)
+```
+
+
+
+### Message Information
+
+
+
+```dart
+ThemeData(
+ extensions: [
+ CometChatOutgoingMessageBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ ),
+ CometChatMessageInformationStyle(
+ backgroundHighLightColor: Color(0xFFFEEDE1),
+ messageReceiptStyle: CometChatMessageReceiptStyle(
+ readIconColor: Color(0xFFF76808),
+ ),
+ ),
+ ],
+)
+```
+
+
+
+### Mentions
+
+
+
+```dart
+ThemeData(
+ extensions: [
+ CometChatMentionsStyle(
+ mentionSelfTextBackgroundColor: Color(0xFFF76808),
+ mentionTextBackgroundColor: Colors.white,
+ mentionTextColor: Colors.black,
+ mentionSelfTextColor: Colors.white,
+ ),
+ ],
+)
+```
+
+
+
+---
+
+## AI Components
+
+### Conversation Starter
+
+
+
+
+
+
+
+```dart
+CometChatAIConversationStarterStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ border: Border.all(color: Color(0xFFFBBB90)),
+)
+```
+
+
+
+### Smart Replies
+
+
+
+
+
+
+
+```dart
+CometChatAISmartRepliesStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ titleStyle: TextStyle(color: Color(0xFFF76808)),
+ itemBackgroundColor: Color(0xFFFFF9F5),
+ itemBorder: Border.all(color: Color(0xFFFBBB90)),
+)
+```
+
+
+
+### Conversation Summary
+
+
+
+```dart
+CometChatAIConversationSummaryStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ titleStyle: TextStyle(color: Color(0xFFF76808)),
+)
+```
+
+
+
+### AI Option Sheet
+
+
+
+```dart
+CometChatAiOptionSheetStyle(
+ backgroundColor: Color(0xFFFFF9F5),
+ iconColor: Color(0xFFF76808),
+)
+```
+
+
+
+### AI Assistant Chat History
+
+
+
+```dart
+final ccColor = CometChatThemeHelper.getColorPalette(context);
+
+CometChatAIAssistantChatHistory(
+ user: user,
+ style: CometChatAIAssistantChatHistoryStyle(
+ backgroundColor: Color(0xFFFFFAF6),
+ headerBackgroundColor: Color(0xFFFFFAF6),
+ headerTitleTextColor: ccColor.textPrimary,
+ newChatIconColor: ccColor.iconSecondary,
+ newChatTextColor: ccColor.textPrimary,
+ dateSeparatorStyle: CometChatDateStyle(
+ textColor: ccColor.textTertiary,
+ backgroundColor: Color(0xFFFFFAF6),
+ ),
+ itemTextColor: ccColor.textPrimary,
+ ),
+)
+```
+
+
diff --git a/ui-kit/flutter/v5/components-overview.mdx b/ui-kit/flutter/v5/components-overview.mdx
new file mode 100644
index 000000000..87c745dd6
--- /dev/null
+++ b/ui-kit/flutter/v5/components-overview.mdx
@@ -0,0 +1,257 @@
+---
+title: "Overview"
+description: "Browse all prebuilt UI components in the CometChat Flutter UI Kit — conversations, messages, users, groups, search, and AI."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_chat_uikit` |
+| Required setup | `CometChatUIKit.init()` + `CometChatUIKit.login()` before rendering any component |
+| Callback actions | `on: (param) { }` |
+| Data filtering | `RequestBuilder: RequestBuilder()` |
+| Toggle features | `hide: true` or `show: true` |
+| Custom rendering | `View: (context, entity) => Widget` |
+| Style overrides | `style: CometChatStyle(...)` |
+
+
+
+## Architecture
+
+The UI Kit is a set of independent widgets that compose into chat layouts. A typical two-panel layout uses four core components:
+
+- **CometChatConversations** — sidebar listing recent conversations (users and groups)
+- **CometChatMessageHeader** — toolbar showing avatar, name, online status, and typing indicator
+- **CometChatMessageList** — scrollable message feed with reactions, receipts, and threads
+- **CometChatMessageComposer** — rich text input with attachments, mentions, and voice notes
+
+**Data flow**: selecting a conversation in CometChatConversations yields a `User` or `Group` object. That object is passed as a prop (`user` or `group`) to CometChatMessageHeader, CometChatMessageList, and CometChatMessageComposer. The message components use the SDK internally — CometChatMessageComposer sends messages, CometChatMessageList receives them via real-time listeners.
+
+```mermaid
+flowchart LR
+ subgraph Sidebar
+ A[CometChatConversations]
+ end
+
+ subgraph "Chat Panel"
+ B[CometChatMessageHeader]
+ C[CometChatMessageList]
+ D[CometChatMessageComposer]
+ end
+
+ subgraph SDK
+ E[CometChat SDK]
+ end
+
+ A -->|"User/Group object"| B
+ A -->|"User/Group object"| C
+ A -->|"User/Group object"| D
+ D -->|"sendMessage()"| E
+ E -->|"Real-time listeners"| C
+```
+
+Components communicate through a publish/subscribe event bus (`CometChatMessageEvents`, `CometChatConversationEvents`, `CometChatGroupEvents`, etc.). A component emits events that other components or application code can subscribe to without direct references. See [Events](/ui-kit/flutter/v5/events) for the full list.
+
+```mermaid
+flowchart TB
+ subgraph "Event Bus"
+ E1[CometChatMessageEvents]
+ E2[CometChatConversationEvents]
+ E3[CometChatGroupEvents]
+ end
+
+ C1[Component A] -->|"emit"| E1
+ E1 -->|"subscribe"| C2[Component B]
+ E1 -->|"subscribe"| C3[App Code]
+
+ C4[Component C] -->|"emit"| E2
+ E2 -->|"subscribe"| C5[Component D]
+```
+
+Each component accepts callback props (`on`), view slot props (`View`) for replacing UI sections, `RequestBuilder` props for data filtering, and style class overrides via `CometChatStyle`.
+
+---
+
+## Type of Widget
+
+UI Widgets based on behavior and functionality can be categorized into three types: Base Widget, Widget, and Composite Widget.
+
+### Base Widget
+
+Base Widgets form the building blocks of your app's user interface (UI). They focus solely on presenting visual elements based on input data, without handling any business logic. These widgets provide the foundational appearance and behavior for your UI.
+
+### Widget
+
+Widgets build upon Base Widgets by incorporating business logic. They not only render UI elements but also manage data loading, execute specific actions, and respond to events. This combination of visual presentation and functional capabilities makes Widgets essential for creating dynamic and interactive UIs.
+
+### Composite Widget
+
+Composite Widgets are advanced UI elements that combine multiple Widgets or other Composite Widgets to achieve complex functionality. By layering widgets together, Composite Widgets offer a sophisticated and flexible approach to designing UIs. They enable diverse functionalities and interactions, making them versatile tools for creating rich user experiences.
+
+---
+
+## Component Catalog
+
+All components are imported from `cometchat_chat_uikit`.
+
+### Conversations and Lists
+
+| Component | Purpose | Key Props | Page |
+| --- | --- | --- | --- |
+| CometChatConversations | Scrollable list of recent conversations | `conversationsRequestBuilder`, `onItemTap`, `onError` | [Conversations](/ui-kit/flutter/v5/conversations) |
+| CometChatUsers | Scrollable list of users | `usersRequestBuilder`, `onItemTap`, `onError` | [Users](/ui-kit/flutter/v5/users) |
+| CometChatGroups | Scrollable list of groups | `groupsRequestBuilder`, `onItemTap`, `onError` | [Groups](/ui-kit/flutter/v5/groups) |
+| CometChatGroupMembers | Scrollable list of group members | `group`, `groupMemberRequestBuilder`, `onItemTap` | [Group Members](/ui-kit/flutter/v5/group-members) |
+
+### Messages
+
+| Component | Purpose | Key Props | Page |
+| --- | --- | --- | --- |
+| CometChatMessageHeader | Toolbar with avatar, name, status, typing indicator | `user`, `group`, `backButton`, `hideBackButton` | [Message Header](/ui-kit/flutter/v5/message-header) |
+| CometChatMessageList | Scrollable message list with reactions, receipts, threads | `user`, `group`, `messagesRequestBuilder`, `scrollToBottomOnNewMessages` | [Message List](/ui-kit/flutter/v5/message-list) |
+| CometChatMessageComposer | Rich text input with attachments, mentions, voice notes | `user`, `group`, `onSendButtonTap`, `placeholderText` | [Message Composer](/ui-kit/flutter/v5/message-composer) |
+| CometChatCompactMessageComposer | Compact input with rich text formatting, inline voice recorder, attachments | `user`, `group`, `enterKeyBehavior`, `enableRichTextFormatting` | [Compact Message Composer](/ui-kit/flutter/v5/compact-message-composer) |
+| CometChatMessageTemplate | Pre-defined structure for custom message bubbles | `type`, `category`, `contentView`, `headerView`, `footerView` | [Message Template](/ui-kit/flutter/v5/message-template) |
+| CometChatThreadedHeader | Parent message bubble and reply count for threaded view | `parentMessage`, `onClose`, `hideReceipts` | [Threaded Header](/ui-kit/flutter/v5/threaded-messages-header) |
+
+### Search and AI
+
+| Component | Purpose | Key Props | Page |
+| --- | --- | --- | --- |
+| CometChatSearch | Real-time search input field | `onSearch`, `placeholder`, `style` | [Search](/ui-kit/flutter/v5/search) |
+| CometChatAIAssistantChatHistory | AI assistant conversation history display | `user`, `group`, `style` | [AI Assistant Chat History](/ui-kit/flutter/v5/ai-assistant-chat-history) |
+
+### Calling
+
+| Component | Purpose | Key Props | Page |
+| --- | --- | --- | --- |
+| CometChatCallButtons | Voice and video call initiation buttons | `user`, `group`, `hideVoiceCallButton`, `hideVideoCallButton` | [Call Buttons](/ui-kit/flutter/v5/call-buttons) |
+| CometChatIncomingCall | Incoming call notification with accept/decline | `call`, `onAccept`, `onDecline` | [Incoming Call](/ui-kit/flutter/v5/incoming-call) |
+| CometChatOutgoingCall | Outgoing call screen with cancel control | `call`, `user`, `onCancelled` | [Outgoing Call](/ui-kit/flutter/v5/outgoing-call) |
+| CometChatCallLogs | Scrollable list of call history | `callLogsRequestBuilder`, `onItemClick` | [Call Logs](/ui-kit/flutter/v5/call-logs) |
+
+---
+
+## Component API Pattern
+
+All components share a consistent API surface.
+
+### Actions
+
+Actions control component behavior. They split into two categories:
+
+**Predefined Actions** are built into the component and execute automatically on user interaction (e.g., tapping send dispatches the message). No configuration needed.
+
+**User-Defined Actions** are callback props that fire on specific events. Override them to customize behavior:
+
+
+
+```dart
+CometChatMessageList(
+ user: chatUser,
+ onThreadRepliesClick: (message, context, {bubbleView}) {
+ openThreadPanel(message);
+ },
+ onError: (error) {
+ logError(error);
+ },
+)
+```
+
+
+
+### Events
+
+Events enable decoupled communication between components. A component emits events that other parts of the application can subscribe to without direct references.
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+// Subscribe to message sent events
+CometChatMessageEvents.onMessageSent.listen((message) {
+ // react to sent message
+});
+```
+
+
+
+Each component page documents its emitted events in the Events section.
+
+### Filters
+
+List-based components accept `RequestBuilder` props to control which data loads:
+
+
+
+```dart
+CometChatMessageList(
+ user: chatUser,
+ messagesRequestBuilder: MessagesRequestBuilder()
+ ..limit = 20,
+)
+```
+
+
+
+### Custom View Slots
+
+Components expose named view slots to replace sections of the default UI:
+
+
+
+```dart
+CometChatMessageHeader(
+ user: chatUser,
+ titleView: (context, user, group) => CustomTitle(),
+ subtitleView: (context, user, group) => CustomSubtitle(),
+ leadingView: (context, user, group) => CustomAvatar(),
+)
+```
+
+
+
+### Styling
+
+Every component accepts a style class for customization:
+
+
+
+```dart
+CometChatMessageList(
+ user: chatUser,
+ style: CometChatMessageListStyle(
+ backgroundColor: Colors.white,
+ borderRadius: 8,
+ ),
+)
+```
+
+
+
+---
+
+## Configurations
+
+Configurations offer the ability to customize the properties of each individual component within a Composite Component. If a Composite Component includes multiple Widgets, each of these Widgets will have its own set of properties that can be configured. This means multiple sets of configurations are available, one for each constituent component. This allows for fine-tuned customization of the Composite Component, enabling you to tailor its behavior and appearance to match specific requirements in a granular manner.
+
+---
+
+## Next Steps
+
+
+
+ Set up the Flutter UI Kit in your project
+
+
+ Customize colors, fonts, and styles
+
+
+ Add-on features like polls, stickers, and translation
+
+
+ Task-oriented tutorials for common patterns
+
+
diff --git a/ui-kit/flutter/v5/conversations.mdx b/ui-kit/flutter/v5/conversations.mdx
new file mode 100644
index 000000000..f299e346c
--- /dev/null
+++ b/ui-kit/flutter/v5/conversations.mdx
@@ -0,0 +1,2165 @@
+---
+title: "Conversations"
+description: "Scrollable list of recent one-on-one and group conversations for the logged-in user."
+---
+
+
+```json
+{
+ "component": "CometChatConversations",
+ "package": "cometchat_chat_uikit",
+ "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
+ "description": "Scrollable list of recent one-on-one and group conversations for the logged-in user.",
+ "primaryOutput": {
+ "prop": "onItemTap",
+ "type": "Function(Conversation conversation)"
+ },
+ "props": {
+ "data": {
+ "conversationsRequestBuilder": {
+ "type": "ConversationsRequestBuilder?",
+ "default": "SDK default (30 per page)",
+ "note": "Pass the builder, not the result of .build()"
+ },
+ "conversationsProtocol": {
+ "type": "ConversationsBuilderProtocol?",
+ "default": "null",
+ "note": "Custom protocol for fetching conversations"
+ },
+ "scrollController": {
+ "type": "ScrollController?",
+ "default": "null",
+ "note": "Custom scroll controller for the list"
+ },
+ "title": {
+ "type": "String?",
+ "default": "Chats",
+ "note": "Title text for the app bar"
+ },
+ "controllerTag": {
+ "type": "String?",
+ "default": "null",
+ "note": "Tag for controller management"
+ },
+ "mentionAllLabel": {
+ "type": "String?",
+ "default": "null",
+ "note": "Custom label for @all mentions"
+ },
+ "mentionAllLabelId": {
+ "type": "String?",
+ "default": "null",
+ "note": "Custom label ID for @all mentions"
+ }
+ },
+ "callbacks": {
+ "onItemTap": "Function(Conversation conversation)?",
+ "onItemLongPress": "Function(Conversation conversation)?",
+ "onSelection": "Function(List? list)?",
+ "onBack": "VoidCallback?",
+ "onError": "OnError?",
+ "onLoad": "OnLoad?",
+ "onEmpty": "OnEmpty?",
+ "onSearchTap": "GestureTapCallback?",
+ "datePattern": "String Function(Conversation conversation)?",
+ "dateTimeFormatterCallback": "DateTimeFormatterCallback?"
+ },
+ "visibility": {
+ "receiptsVisibility": { "type": "bool?", "default": true },
+ "usersStatusVisibility": { "type": "bool?", "default": true },
+ "groupTypeVisibility": { "type": "bool?", "default": true },
+ "deleteConversationOptionVisibility": { "type": "bool?", "default": true },
+ "hideAppbar": { "type": "bool?", "default": false },
+ "hideError": { "type": "bool?", "default": false },
+ "hideSearch": { "type": "bool?", "default": false },
+ "showBackButton": { "type": "bool", "default": false },
+ "dateBackgroundIsTransparent": { "type": "bool?", "default": null },
+ "searchReadOnly": { "type": "bool", "default": false }
+ },
+ "sound": {
+ "disableSoundForMessages": { "type": "bool?", "default": false },
+ "customSoundForMessages": { "type": "String?", "default": "built-in" }
+ },
+ "selection": {
+ "selectionMode": {
+ "type": "SelectionMode?",
+ "values": ["SelectionMode.single", "SelectionMode.multiple", "SelectionMode.none"],
+ "default": "null"
+ },
+ "activateSelection": {
+ "type": "ActivateSelection?",
+ "values": ["ActivateSelection.onClick", "ActivateSelection.onLongClick"],
+ "default": "null"
+ }
+ },
+ "viewSlots": {
+ "listItemView": "Widget Function(Conversation conversation)?",
+ "leadingView": "Widget? Function(BuildContext context, Conversation conversation)?",
+ "titleView": "Widget? Function(BuildContext context, Conversation conversation)?",
+ "subtitleView": "Widget? Function(BuildContext context, Conversation conversation)?",
+ "trailingView": "Widget? Function(Conversation conversation)?",
+ "loadingStateView": "WidgetBuilder?",
+ "emptyStateView": "WidgetBuilder?",
+ "errorStateView": "WidgetBuilder?",
+ "setOptions": "List? Function(Conversation, CometChatConversationsController, BuildContext)?",
+ "addOptions": "List? Function(Conversation, CometChatConversationsController, BuildContext)?"
+ },
+ "formatting": {
+ "textFormatters": {
+ "type": "List?",
+ "default": "default formatters from data source"
+ },
+ "typingIndicatorText": {
+ "type": "String?",
+ "default": "typing..."
+ }
+ },
+ "icons": {
+ "backButton": { "type": "Widget?", "default": "built-in back arrow" },
+ "protectedGroupIcon": { "type": "Widget?", "default": "built-in lock icon" },
+ "privateGroupIcon": { "type": "Widget?", "default": "built-in lock icon" },
+ "readIcon": { "type": "Widget?", "default": "built-in read icon" },
+ "deliveredIcon": { "type": "Widget?", "default": "built-in delivered icon" },
+ "sentIcon": { "type": "Widget?", "default": "built-in sent icon" },
+ "submitIcon": { "type": "Widget?", "default": "built-in check icon" },
+ "searchBoxIcon": { "type": "Widget?", "default": "built-in search icon" }
+ },
+ "layout": {
+ "datePadding": { "type": "EdgeInsets?", "default": "null" },
+ "dateHeight": { "type": "double?", "default": "null" },
+ "dateWidth": { "type": "double?", "default": "null" },
+ "badgeWidth": { "type": "double?", "default": "null" },
+ "badgeHeight": { "type": "double?", "default": "null" },
+ "badgePadding": { "type": "EdgeInsetsGeometry?", "default": "null" },
+ "avatarWidth": { "type": "double?", "default": "null" },
+ "avatarHeight": { "type": "double?", "default": "null" },
+ "avatarPadding": { "type": "EdgeInsetsGeometry?", "default": "null" },
+ "avatarMargin": { "type": "EdgeInsetsGeometry?", "default": "null" },
+ "statusIndicatorWidth": { "type": "double?", "default": "null" },
+ "statusIndicatorHeight": { "type": "double?", "default": "null" },
+ "statusIndicatorBorderRadius": { "type": "BorderRadiusGeometry?", "default": "null" },
+ "searchPadding": { "type": "EdgeInsetsGeometry?", "default": "null" },
+ "searchContentPadding": { "type": "EdgeInsetsGeometry?", "default": "null" }
+ },
+ "style": {
+ "conversationsStyle": { "type": "CometChatConversationsStyle", "default": "CometChatConversationsStyle()" },
+ "listItemStyle": { "type": "ListItemStyle?", "default": "null" },
+ "appBarOptions": { "type": "List?", "default": "null" }
+ }
+ },
+ "events": [
+ {
+ "name": "CometChatConversationEvents.ccConversationDeleted",
+ "payload": "Conversation",
+ "description": "Conversation deleted from list"
+ },
+ {
+ "name": "CometChatConversationEvents.ccUpdateConversation",
+ "payload": "Conversation",
+ "description": "Conversation updated"
+ },
+ {
+ "name": "CometChatConversationEvents.ccMessageRead",
+ "payload": "BaseMessage",
+ "description": "Message marked as read"
+ },
+ {
+ "name": "CometChatConversationEvents.ccMessageSent",
+ "payload": "BaseMessage, MessageStatus",
+ "description": "Message sent"
+ }
+ ],
+ "sdkListeners": [
+ "onTextMessageReceived",
+ "onMediaMessageReceived",
+ "onCustomMessageReceived",
+ "onFormMessageReceived",
+ "onCardMessageReceived",
+ "onCustomInteractiveMessageReceived",
+ "onSchedulerMessageReceived",
+ "onTypingStarted",
+ "onTypingEnded",
+ "onMessagesDelivered",
+ "onMessagesRead",
+ "onMessagesDeliveredToAll",
+ "onMessagesReadByAll",
+ "onMessageEdited",
+ "onMessageDeleted",
+ "onUserOnline",
+ "onUserOffline",
+ "ccUserBlocked",
+ "onGroupMemberJoined",
+ "onGroupMemberLeft",
+ "onGroupMemberKicked",
+ "onGroupMemberBanned",
+ "onGroupMemberUnbanned",
+ "onGroupMemberScopeChanged",
+ "onMemberAddedToGroup",
+ "ccOwnershipChanged",
+ "ccGroupLeft",
+ "ccGroupDeleted",
+ "ccGroupMemberAdded",
+ "onIncomingCallReceived",
+ "onOutgoingCallAccepted",
+ "onOutgoingCallRejected",
+ "onIncomingCallCancelled",
+ "onCallEndedMessageReceived",
+ "onConnected"
+ ],
+ "compositionExample": {
+ "description": "Sidebar conversations wired to message view",
+ "components": [
+ "CometChatConversations",
+ "CometChatMessages",
+ "CometChatMessageHeader",
+ "CometChatMessageList",
+ "CometChatMessageComposer"
+ ],
+ "flow": "onItemTap emits Conversation -> extract User/Group via conversationWith -> pass to CometChatMessages or individual MessageHeader, MessageList, MessageComposer"
+ },
+ "types": {
+ "CometChatOption": {
+ "id": "String?",
+ "title": "String?",
+ "icon": "String?",
+ "iconWidget": "Widget?",
+ "onClick": "VoidCallback?"
+ },
+ "SelectionMode": {
+ "single": "SelectionMode.single",
+ "multiple": "SelectionMode.multiple",
+ "none": "SelectionMode.none"
+ },
+ "ActivateSelection": {
+ "onClick": "ActivateSelection.onClick",
+ "onLongClick": "ActivateSelection.onLongClick"
+ }
+ }
+}
+```
+
+
+
+## Where It Fits
+
+`CometChatConversations` is a sidebar list widget. It renders recent conversations and emits the selected `Conversation` via `onItemTap`. Wire it to `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer` to build a standard two-panel chat layout.
+
+
+
+```dart
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+class ChatApp extends StatefulWidget {
+ const ChatApp({super.key});
+
+ @override
+ State createState() => _ChatAppState();
+}
+
+class _ChatAppState extends State {
+ User? selectedUser;
+ Group? selectedGroup;
+
+ void handleItemTap(Conversation conversation) {
+ final entity = conversation.conversationWith;
+ setState(() {
+ if (entity is User) {
+ selectedUser = entity;
+ selectedGroup = null;
+ } else if (entity is Group) {
+ selectedGroup = entity;
+ selectedUser = null;
+ }
+ });
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: Row(
+ children: [
+ SizedBox(
+ width: 400,
+ child: CometChatConversations(
+ onItemTap: handleItemTap,
+ ),
+ ),
+ Expanded(
+ child: selectedUser != null || selectedGroup != null
+ ? CometChatMessages(
+ user: selectedUser,
+ group: selectedGroup,
+ )
+ : const Center(
+ child: Text('Select a conversation'),
+ ),
+ ),
+ ],
+ ),
+ );
+ }
+}
+```
+
+
+
+
+
+
+
+---
+
+
+## Minimal Render
+
+
+
+```dart
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+class ConversationsDemo extends StatelessWidget {
+ const ConversationsDemo({super.key});
+
+ @override
+ Widget build(BuildContext context) {
+ return const Scaffold(
+ body: SafeArea(
+ child: CometChatConversations(),
+ ),
+ );
+ }
+}
+```
+
+
+
+
+
+
+
+You can also launch it using `Navigator.push`:
+
+```dart
+Navigator.push(
+ context,
+ MaterialPageRoute(builder: (context) => const CometChatConversations())
+);
+```
+
+---
+
+## Filtering Conversations
+
+Pass a `ConversationsRequestBuilder` to `conversationsRequestBuilder`. Pass the builder instance — not the result of `.build()`.
+
+
+
+```dart
+CometChatConversations(
+ conversationsRequestBuilder: ConversationsRequestBuilder()
+ ..conversationType = "user"
+ ..limit = 10,
+)
+```
+
+
+
+### Filter Recipes
+
+| Recipe | Code |
+| --- | --- |
+| Only user conversations | `ConversationsRequestBuilder()..conversationType = "user"` |
+| Only group conversations | `ConversationsRequestBuilder()..conversationType = "group"` |
+| Limit to 10 per page | `ConversationsRequestBuilder()..limit = 10` |
+| With specific tags | `ConversationsRequestBuilder()..tags = ["vip"]` |
+| With user and group tags | `ConversationsRequestBuilder()..withUserAndGroupTags = true` |
+| Include blocked users | `ConversationsRequestBuilder()..includeBlockedUsers = true` |
+| Search conversations | `ConversationsRequestBuilder()..searchKeyword = "hello"` |
+| Unread only | `ConversationsRequestBuilder()..unread = true` |
+
+Default page size is 30. The component uses infinite scroll — the next page loads as the user scrolls to the bottom.
+
+### ConversationsRequestBuilder Properties
+
+| Property | Description | Code |
+| --- | --- | --- |
+| `limit` | Number of conversations to fetch per request. Maximum 50. | `..limit = 30` |
+| `conversationType` | Filter by conversation type: `"user"` or `"group"`. If not set, returns both. | `..conversationType = "user"` |
+| `withTags` | Include tags associated with conversations. Default `false`. | `..withTags = true` |
+| `tags` | Filter conversations by specific tags. | `..tags = ["archived", "vip"]` |
+| `withUserAndGroupTags` | Include user/group tags in the Conversation object. Default `false`. | `..withUserAndGroupTags = true` |
+| `includeBlockedUsers` | Include conversations with blocked users. Default `false`. | `..includeBlockedUsers = true` |
+| `withBlockedInfo` | Include blocked info in the ConversationWith object. Default `false`. | `..withBlockedInfo = true` |
+| `searchKeyword` | Search conversations by user or group name. Requires Advanced plan. | `..searchKeyword = "John"` |
+| `unread` | Fetch only unread conversations. Requires Advanced plan. | `..unread = true` |
+| `build()` | Builds and returns a `ConversationsRequest` object. | `.build()` |
+
+Refer to [ConversationsRequestBuilder](/sdk/flutter/retrieve-conversations) for the full builder API.
+
+---
+
+
+## Actions and Events
+
+### Callback Props
+
+#### onItemTap
+
+Fires when a conversation row is tapped. Primary navigation hook — set the active conversation and render the message view.
+
+
+
+```dart
+CometChatConversations(
+ onItemTap: (conversation) {
+ print("Selected: ${conversation.conversationId}");
+ },
+)
+```
+
+
+
+#### onItemLongPress
+
+Fires when a conversation row is long-pressed. Useful for showing context menus or custom actions.
+
+
+
+```dart
+CometChatConversations(
+ onItemLongPress: (conversation) {
+ // Show custom context menu
+ },
+)
+```
+
+
+
+#### onSelection
+
+Fires when conversations are selected in multi-select mode. Requires `selectionMode` to be set.
+
+
+
+```dart
+CometChatConversations(
+ selectionMode: SelectionMode.multiple,
+ onSelection: (selectedList) {
+ print("Selected ${selectedList?.length ?? 0} conversations");
+ },
+)
+```
+
+
+
+#### onError
+
+Fires on internal errors (network failure, auth issue, SDK exception).
+
+
+
+```dart
+CometChatConversations(
+ onError: (error) {
+ print("CometChatConversations error: $error");
+ },
+)
+```
+
+
+
+#### onBack
+
+Fires when the back button is pressed.
+
+
+
+```dart
+CometChatConversations(
+ showBackButton: true,
+ onBack: () {
+ Navigator.pop(context);
+ },
+)
+```
+
+
+
+#### onLoad
+
+Fires when the conversation list is successfully loaded.
+
+
+
+```dart
+CometChatConversations(
+ onLoad: (list) {
+ print("Loaded ${list.length} conversations");
+ },
+)
+```
+
+
+
+#### onEmpty
+
+Fires when the conversation list is empty.
+
+
+
+```dart
+CometChatConversations(
+ onEmpty: () {
+ print("No conversations found");
+ },
+)
+```
+
+
+
+
+### Global UI Events
+
+`CometChatConversationEvents` emits events subscribable from anywhere in the application. Add a listener in `initState` and remove it in `dispose`.
+
+| Event | Fires when | Payload |
+| --- | --- | --- |
+| `ccConversationDeleted` | A conversation is deleted from the list | `Conversation` |
+
+When to use: sync external UI with conversation state changes. For example, update an unread count badge in a tab bar when a conversation is deleted.
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+class _YourScreenState extends State with CometChatConversationEventListener {
+
+ @override
+ void initState() {
+ super.initState();
+ CometChatConversationEvents.addConversationListListener("listenerId", this);
+ }
+
+ @override
+ void dispose() {
+ CometChatConversationEvents.removeConversationListListener("listenerId");
+ super.dispose();
+ }
+
+ @override
+ void ccConversationDeleted(Conversation conversation) {
+ print("Deleted: ${conversation.conversationId}");
+ }
+}
+```
+
+
+
+### SDK Events (Real-Time, Automatic)
+
+The component listens to these SDK events internally. No manual attachment needed unless additional side effects are required.
+
+| SDK Listener | Internal behavior |
+| --- | --- |
+| `onTextMessageReceived` / `onMediaMessageReceived` / `onCustomMessageReceived` | Moves conversation to top, updates last message preview and unread count |
+| `onTypingStarted` / `onTypingEnded` | Shows/hides typing indicator in the subtitle |
+| `onMessagesDelivered` / `onMessagesRead` | Updates receipt ticks (unless `receiptsVisibility: false`) |
+| `onUserOnline` / `onUserOffline` | Updates online/offline status dot (unless `usersStatusVisibility: false`) |
+| `onGroupMemberJoined` / `onGroupMemberLeft` / `onGroupMemberKicked` / `onGroupMemberBanned` / `onMemberAddedToGroup` | Updates group conversation metadata |
+
+Automatic: new messages, typing indicators, receipts, user presence, group membership changes.
+
+---
+
+
+## Custom View Slots
+
+Each slot replaces a section of the default UI. Slots that accept a conversation parameter receive the `Conversation` object for that row.
+
+| Slot | Signature | Replaces |
+| --- | --- | --- |
+| `listItemView` | `Widget Function(Conversation)` | Entire list item row |
+| `leadingView` | `Widget? Function(BuildContext, Conversation)` | Avatar / left section |
+| `titleView` | `Widget? Function(BuildContext, Conversation)` | Name / title text |
+| `subtitleView` | `Widget? Function(BuildContext, Conversation)` | Last message preview |
+| `trailingView` | `Widget? Function(Conversation)` | Timestamp / badge / right section |
+| `loadingStateView` | `WidgetBuilder` | Loading spinner |
+| `emptyStateView` | `WidgetBuilder` | Empty state |
+| `errorStateView` | `WidgetBuilder` | Error state |
+| `setOptions` | `List? Function(Conversation, Controller, BuildContext)` | Context menu actions (replaces default) |
+| `addOptions` | `List? Function(Conversation, Controller, BuildContext)` | Context menu actions (adds to default) |
+
+### listItemView
+
+Replace the entire list item row.
+
+
+
+
+
+
+
+```dart
+CometChatConversations(
+ listItemView: (conversation) {
+ final entity = conversation.conversationWith;
+ final name = entity is User ? entity.name : (entity as Group).name;
+
+ return CometChatListItem(
+ avatarName: name,
+ avatarURL: entity is User ? entity.avatar : (entity as Group).icon,
+ title: name,
+ avatarStyle: CometChatAvatarStyle(
+ borderRadius: BorderRadius.circular(8),
+ ),
+ );
+ },
+)
+```
+
+
+
+For a more complete custom list item with status indicator and date:
+
+
+
+```dart
+Widget getCustomListItem(Conversation conversation, BuildContext context) {
+ User? conversationWithUser;
+ Group? conversationWithGroup;
+
+ if (conversation.conversationWith is User) {
+ conversationWithUser = conversation.conversationWith as User;
+ } else {
+ conversationWithGroup = conversation.conversationWith as Group;
+ }
+
+ // Get status indicator
+ StatusIndicatorUtils statusIndicatorUtils = StatusIndicatorUtils.getStatusIndicatorFromParams(
+ context: context,
+ user: conversationWithUser,
+ group: conversationWithGroup,
+ onlineStatusIndicatorColor: Color(0xFF09C26F),
+ );
+
+ // Build tail view with date
+ final lastMessageTime = conversation.lastMessage?.sentAt ?? DateTime.now();
+ Widget tail = CometChatDate(
+ date: lastMessageTime,
+ padding: EdgeInsets.zero,
+ style: CometChatDateStyle(
+ backgroundColor: Colors.transparent,
+ textStyle: TextStyle(color: Color(0xFF727272), fontSize: 12),
+ border: Border.all(width: 0, color: Colors.transparent),
+ ),
+ pattern: DateTimePattern.dayDateTimeFormat,
+ );
+
+ return CometChatListItem(
+ avatarHeight: 48,
+ avatarWidth: 48,
+ id: conversation.conversationId,
+ avatarName: conversationWithUser?.name ?? conversationWithGroup?.name,
+ avatarURL: conversationWithUser?.avatar ?? conversationWithGroup?.icon,
+ avatarStyle: CometChatAvatarStyle(
+ borderRadius: BorderRadius.circular(8),
+ backgroundColor: Color(0xFFAA9EE8),
+ ),
+ title: conversationWithUser?.name ?? conversationWithGroup?.name,
+ tailView: tail,
+ statusIndicatorColor: statusIndicatorUtils.statusIndicatorColor,
+ statusIndicatorIcon: statusIndicatorUtils.icon,
+ statusIndicatorStyle: CometChatStatusIndicatorStyle(
+ border: Border.all(width: 2, color: Colors.white),
+ ),
+ hideSeparator: true,
+ style: ListItemStyle(
+ background: Colors.transparent,
+ titleStyle: TextStyle(
+ overflow: TextOverflow.ellipsis,
+ fontSize: 16,
+ fontWeight: FontWeight.w500,
+ color: Color(0xFF141414),
+ ),
+ padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+ ),
+ );
+}
+
+// Usage:
+CometChatConversations(
+ listItemView: (conversation) => getCustomListItem(conversation, context),
+)
+```
+
+
+
+### leadingView
+
+Replace the avatar / left section. Typing-aware avatar example.
+
+
+
+
+
+
+
+```dart
+// In your StatefulWidget, use the MessageListener mixin:
+class _ConversationsScreenState extends State with MessageListener {
+ Map typingMap = {};
+
+ @override
+ void initState() {
+ super.initState();
+ CometChat.addMessageListener("typing_listener", this);
+ }
+
+ @override
+ void dispose() {
+ CometChat.removeMessageListener("typing_listener");
+ super.dispose();
+ }
+
+ @override
+ void onTypingStarted(TypingIndicator typingIndicator) {
+ setTypingIndicator(typingIndicator, true);
+ }
+
+ @override
+ void onTypingEnded(TypingIndicator typingIndicator) {
+ setTypingIndicator(typingIndicator, false);
+ }
+
+ void setTypingIndicator(TypingIndicator typingIndicator, bool isTypingStarted) {
+ final id = typingIndicator.receiverType == ReceiverTypeConstants.user
+ ? typingIndicator.sender.uid
+ : typingIndicator.receiverId;
+
+ setState(() {
+ if (isTypingStarted) {
+ typingMap[id] = typingIndicator;
+ } else {
+ typingMap.remove(id);
+ }
+ });
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return CometChatConversations(
+ leadingView: (context, conversation) {
+ final entity = conversation.conversationWith;
+ final id = entity is User ? entity.uid : (entity as Group).guid;
+
+ if (typingMap.containsKey(id)) {
+ return Container(
+ decoration: BoxDecoration(
+ border: Border.all(color: Color(0xFFF76808), width: 2),
+ borderRadius: BorderRadius.circular(8),
+ ),
+ child: Image.asset("assets/typing_icon.png", height: 40, width: 40),
+ );
+ }
+ return null; // Use default avatar
+ },
+ );
+ }
+}
+```
+
+
+
+
+### titleView
+
+Replace the name / title text. Inline user status example.
+
+
+
+
+
+
+
+```dart
+CometChatConversations(
+ titleView: (context, conversation) {
+ final entity = conversation.conversationWith;
+ final name = entity is User ? entity.name : (entity as Group).name;
+ final statusMessage = entity is User ? entity.statusMessage : null;
+
+ return Row(
+ children: [
+ Text(name ?? "", style: TextStyle(fontWeight: FontWeight.w500)),
+ if (statusMessage != null)
+ Text(" · $statusMessage", style: TextStyle(color: Color(0xFF6852D6))),
+ ],
+ );
+ },
+)
+```
+
+
+
+### subtitleView
+
+Replace the last message preview text.
+
+
+
+
+
+
+
+```dart
+CometChatConversations(
+ subtitleView: (context, conversation) {
+ final entity = conversation.conversationWith;
+ String subtitle;
+
+ if (entity is User) {
+ final dateTime = entity.lastActiveAt ?? DateTime.now();
+ subtitle = "Last Active: ${DateFormat('dd/MM/yyyy, HH:mm').format(dateTime)}";
+ } else {
+ final dateTime = (entity as Group).createdAt ?? DateTime.now();
+ subtitle = "Created: ${DateFormat('dd/MM/yyyy, HH:mm').format(dateTime)}";
+ }
+
+ return Text(subtitle, style: TextStyle(color: Color(0xFF727272), fontSize: 14));
+ },
+)
+```
+
+
+
+### trailingView
+
+Replace the timestamp / badge / right section. Relative time badge example.
+
+
+
+
+
+
+
+```dart
+CometChatConversations(
+ trailingView: (conversation) {
+ final timestamp = conversation.updatedAt?.millisecondsSinceEpoch ?? 0;
+ final now = DateTime.now();
+ final lastSeen = DateTime.fromMillisecondsSinceEpoch(timestamp * 1000);
+ final diffInMinutes = now.difference(lastSeen).inMinutes;
+ final diffInHours = now.difference(lastSeen).inHours;
+
+ String timeText;
+ String label;
+ Color cardColor;
+
+ if (diffInMinutes < 60) {
+ timeText = "$diffInMinutes";
+ label = "Min ago";
+ cardColor = Color(0x666852D6);
+ } else if (diffInHours < 10) {
+ timeText = "$diffInHours";
+ label = "Hr ago";
+ cardColor = Color(0x66FFAB00);
+ } else {
+ timeText = "$diffInHours";
+ label = "Hr ago";
+ cardColor = Color(0x66F44649);
+ }
+
+ return Card(
+ color: cardColor,
+ child: Padding(
+ padding: EdgeInsets.all(4),
+ child: Column(
+ children: [
+ Text(timeText, style: TextStyle(fontWeight: FontWeight.bold)),
+ Text(label, style: TextStyle(fontSize: 12)),
+ ],
+ ),
+ ),
+ );
+ },
+)
+```
+
+
+
+
+### setOptions
+
+Replace the context menu / long-press actions on each conversation item.
+
+
+
+
+
+
+
+```dart
+CometChatConversations(
+ setOptions: (conversation, controller, context) {
+ return [
+ CometChatOption(
+ id: "delete",
+ title: "Delete",
+ icon: AssetConstants.delete,
+ onClick: () {
+ // Delete conversation
+ },
+ ),
+ ];
+ },
+)
+```
+
+
+
+### addOptions
+
+Add to the existing context menu actions without removing defaults.
+
+
+
+
+
+
+
+```dart
+CometChatConversations(
+ addOptions: (conversation, controller, context) {
+ return [
+ CometChatOption(
+ id: "archive",
+ title: "Archive",
+ iconWidget: Icon(Icons.archive_outlined),
+ onClick: () {
+ // Archive conversation
+ },
+ ),
+ CometChatOption(
+ id: "pin",
+ title: "Pin",
+ iconWidget: Icon(Icons.push_pin_outlined),
+ onClick: () {
+ // Pin conversation
+ },
+ ),
+ CometChatOption(
+ id: "mark_unread",
+ title: "Mark as unread",
+ iconWidget: Icon(Icons.mark_chat_unread_outlined),
+ onClick: () {
+ // Mark conversation as unread
+ },
+ ),
+ ];
+ },
+)
+```
+
+
+
+### appBarOptions
+
+Add custom widgets to the app bar.
+
+
+
+
+
+
+
+```dart
+CometChatConversations(
+ showBackButton: false,
+ appBarOptions: [
+ PopupMenuButton(
+ icon: CometChatAvatar(
+ image: CometChatUIKit.loggedInUser?.avatar,
+ name: CometChatUIKit.loggedInUser?.name,
+ ),
+ itemBuilder: (context) => [
+ PopupMenuItem(value: 'create', child: Text("Create Conversation")),
+ PopupMenuItem(value: 'logout', child: Text("Logout")),
+ ],
+ onSelected: (value) {
+ // Handle menu selection
+ },
+ ),
+ ],
+)
+```
+
+
+
+For a more complete popup menu with styling:
+
+
+
+```dart
+CometChatConversations(
+ showBackButton: false,
+ appBarOptions: [
+ PopupMenuButton(
+ shape: RoundedRectangleBorder(
+ borderRadius: BorderRadius.circular(8),
+ side: BorderSide(color: Color(0xFFF5F5F5), width: 1),
+ ),
+ color: Colors.white,
+ elevation: 4,
+ menuPadding: EdgeInsets.zero,
+ padding: EdgeInsets.zero,
+ icon: Padding(
+ padding: EdgeInsets.only(left: 12, right: 16),
+ child: CometChatAvatar(
+ width: 40,
+ height: 40,
+ image: CometChatUIKit.loggedInUser?.avatar,
+ name: CometChatUIKit.loggedInUser?.name,
+ ),
+ ),
+ onSelected: (value) {
+ switch (value) {
+ case '/create':
+ // Navigate to create conversation
+ break;
+ case '/logout':
+ CometChatUIKit.logout();
+ break;
+ }
+ },
+ position: PopupMenuPosition.under,
+ itemBuilder: (BuildContext context) {
+ return [
+ PopupMenuItem(
+ height: 44,
+ padding: EdgeInsets.all(16),
+ value: '/create',
+ child: Row(
+ children: [
+ Padding(
+ padding: EdgeInsets.only(right: 8),
+ child: Icon(Icons.add_comment_outlined, color: Color(0xFFA1A1A1), size: 24),
+ ),
+ Text("Create Conversation", style: TextStyle(fontSize: 14, color: Color(0xFF141414))),
+ ],
+ ),
+ ),
+ PopupMenuItem(
+ height: 44,
+ padding: EdgeInsets.all(16),
+ value: '/name',
+ child: Row(
+ children: [
+ Padding(
+ padding: EdgeInsets.only(right: 8),
+ child: Icon(Icons.account_circle_outlined, color: Color(0xFFA1A1A1), size: 24),
+ ),
+ Text(CometChatUIKit.loggedInUser?.name ?? "", style: TextStyle(fontSize: 14, color: Color(0xFF141414))),
+ ],
+ ),
+ ),
+ PopupMenuItem(
+ height: 44,
+ padding: EdgeInsets.all(16),
+ value: '/logout',
+ child: Row(
+ children: [
+ Padding(
+ padding: EdgeInsets.only(right: 8),
+ child: Icon(Icons.logout, color: Colors.red, size: 24),
+ ),
+ Text("Logout", style: TextStyle(fontSize: 14, color: Colors.red)),
+ ],
+ ),
+ ),
+ ];
+ },
+ ),
+ ],
+ onItemTap: (conversation) {
+ User? user;
+ Group? group;
+ if (conversation.conversationWith is User) {
+ user = conversation.conversationWith as User;
+ } else {
+ group = conversation.conversationWith as Group;
+ }
+ // Navigate to messages
+ },
+)
+```
+
+
+
+---
+
+
+## Styling
+
+Set `CometChatConversationsStyle` to customize the appearance.
+
+
+
+```dart
+CometChatConversations(
+ conversationsStyle: CometChatConversationsStyle(
+ backgroundColor: Colors.white,
+ titleTextColor: Color(0xFF141414),
+ avatarStyle: CometChatAvatarStyle(
+ borderRadius: BorderRadius.circular(8),
+ backgroundColor: Color(0xFFFBAA75),
+ ),
+ badgeStyle: CometChatBadgeStyle(
+ backgroundColor: Color(0xFFF76808),
+ ),
+ ),
+)
+```
+
+
+
+
+
+
+
+### Style Properties
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `backgroundColor` | `Color` | Background color of the component |
+| `border` | `Border` | Border for the widget |
+| `borderRadius` | `BorderRadiusGeometry` | Border radius for the widget |
+| `titleTextColor` | `Color` | Color of the header title |
+| `titleTextStyle` | `TextStyle` | Style for the header title |
+| `backIconColor` | `Color` | Back button icon color |
+| `searchBackgroundColor` | `Color` | Background color of search box |
+| `searchBorder` | `BorderSide` | Border for search box |
+| `searchBorderRadius` | `BorderRadius` | Border radius for search box |
+| `searchPlaceHolderTextColor` | `Color` | Placeholder text color in search |
+| `searchPlaceHolderTextStyle` | `TextStyle` | Placeholder text style in search |
+| `searchIconColor` | `Color` | Search icon color |
+| `separatorColor` | `Color` | Color of list item separators |
+| `separatorHeight` | `double` | Height of list item separators |
+| `emptyStateTextColor` | `Color` | Text color for empty state title |
+| `emptyStateTextStyle` | `TextStyle` | Text style for empty state title |
+| `emptyStateSubTitleTextColor` | `Color` | Text color for empty state subtitle |
+| `emptyStateSubTitleTextStyle` | `TextStyle` | Text style for empty state subtitle |
+| `errorStateTextColor` | `Color` | Text color for error state title |
+| `errorStateTextStyle` | `TextStyle` | Text style for error state title |
+| `errorStateSubTitleTextColor` | `Color` | Text color for error state subtitle |
+| `errorStateSubTitleTextStyle` | `TextStyle` | Text style for error state subtitle |
+| `itemTitleTextColor` | `Color` | Text color for conversation item title |
+| `itemTitleTextStyle` | `TextStyle` | Text style for conversation item title |
+| `itemSubtitleTextColor` | `Color` | Text color for conversation item subtitle |
+| `itemSubtitleTextStyle` | `TextStyle` | Text style for conversation item subtitle |
+| `messageTypeIconColor` | `Color` | Icon color for message type indicators |
+| `avatarStyle` | `CometChatAvatarStyle` | Style for avatars |
+| `badgeStyle` | `CometChatBadgeStyle` | Style for unread badges |
+| `receiptStyle` | `CometChatMessageReceiptStyle` | Style for message receipts |
+| `statusIndicatorStyle` | `CometChatStatusIndicatorStyle` | Style for online status indicator |
+| `dateStyle` | `CometChatDateStyle` | Style for date/time display |
+| `typingIndicatorStyle` | `CometChatTypingIndicatorStyle` | Style for typing indicator |
+| `mentionsStyle` | `CometChatMentionsStyle` | Style for @mentions |
+| `deleteConversationDialogStyle` | `CometChatConfirmDialogStyle` | Style for delete confirmation dialog |
+| `privateGroupIconBackground` | `Color` | Background color for private group icon |
+| `protectedGroupIconBackground` | `Color` | Background color for protected group icon |
+| `submitIconColor` | `Color` | Color for submit icon in selection mode |
+| `checkBoxBackgroundColor` | `Color` | Background color for selection checkbox |
+| `checkBoxCheckedBackgroundColor` | `Color` | Background color when checkbox is checked |
+| `checkBoxBorder` | `BorderSide` | Border for selection checkbox |
+| `checkBoxBorderRadius` | `BorderRadiusGeometry` | Border radius for selection checkbox |
+| `checkboxSelectedIconColor` | `Color` | Icon color when checkbox is selected |
+| `listItemSelectedBackgroundColor` | `Color` | Background color for selected list items |
+
+---
+
+## Common Patterns
+
+### Custom empty state with CTA
+
+
+
+```dart
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+CometChatConversations(
+ emptyStateView: (context) {
+ return Center(
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ Text("No conversations yet"),
+ SizedBox(height: 16),
+ ElevatedButton(
+ onPressed: () {
+ // Navigate to contacts
+ },
+ child: Text("Start a conversation"),
+ ),
+ ],
+ ),
+ );
+ },
+)
+```
+
+
+
+### Hide all chrome — minimal list
+
+
+
+```dart
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+CometChatConversations(
+ receiptsVisibility: false,
+ usersStatusVisibility: false,
+ groupTypeVisibility: false,
+ deleteConversationOptionVisibility: false,
+ hideAppbar: true,
+)
+```
+
+
+
+
+### Conversations with search
+
+
+
+```dart
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+CometChatConversations(
+ hideSearch: false,
+ onSearchTap: () {
+ // Handle search tap - navigate to search screen
+ },
+)
+```
+
+
+
+### Custom date pattern
+
+
+
+
+
+
+
+```dart
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:intl/intl.dart';
+
+CometChatConversations(
+ datePattern: (conversation) {
+ final date = conversation.lastMessage?.sentAt ?? DateTime.now();
+ return DateFormat('d MMM, hh:mm a').format(date);
+ },
+)
+```
+
+
+
+### Text formatters
+
+Configure text formatters for the conversation subtitle. See [CometChatMentionsFormatter](/ui-kit/flutter/v5/mentions-formatter-guide) for mention formatting.
+
+
+
+
+
+
+
+```dart
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+CometChatConversations(
+ textFormatters: [
+ CometChatMentionsFormatter(
+ style: CometChatMentionsStyle(
+ mentionSelfTextBackgroundColor: Color(0xFFF76808),
+ mentionTextBackgroundColor: Colors.white,
+ mentionTextColor: Colors.black,
+ mentionSelfTextColor: Colors.white,
+ ),
+ ),
+ ],
+)
+```
+
+
+
+---
+
+
+## Accessibility
+
+The component renders a scrollable list of interactive items. Each conversation row is tappable and responds to both tap and long-press gestures. The context menu (options) is accessible via long-press. The unread badge count is exposed as text content. Avatar images include the conversation name for accessibility.
+
+For screen readers, the conversation list is rendered as a semantic list using Flutter's built-in accessibility features. Status indicators (online/offline, group type icons) use visual icons — consider providing custom `Semantics` widgets via `leadingView` if screen reader descriptions are needed for these visual indicators.
+
+When using selection mode, checkboxes are rendered with proper accessibility labels. The component respects system accessibility settings including text scaling and high contrast modes.
+
+---
+
+
+## Props
+
+All props are optional. Sorted alphabetically.
+
+### activateSelection
+
+Controls when selection mode activates.
+
+| | |
+| --- | --- |
+| Type | `ActivateSelection` |
+| Default | `null` |
+
+Values: `ActivateSelection.onClick`, `ActivateSelection.onLongClick`
+
+---
+
+### addOptions
+
+Adds to the current list of actions available on long press.
+
+| | |
+| --- | --- |
+| Type | `List? Function(Conversation, CometChatConversationsController, BuildContext)` |
+| Default | `null` |
+
+---
+
+### appBarOptions
+
+List of widgets to display in the app bar.
+
+| | |
+| --- | --- |
+| Type | `List` |
+| Default | `null` |
+
+---
+
+### backButton
+
+Custom back button widget.
+
+| | |
+| --- | --- |
+| Type | `Widget` |
+| Default | Built-in back arrow |
+
+---
+
+### conversationsRequestBuilder
+
+Controls which conversations load and in what order.
+
+| | |
+| --- | --- |
+| Type | `ConversationsRequestBuilder` |
+| Default | SDK default (30 per page) |
+
+Pass the builder instance, not the result of `.build()`.
+
+---
+
+### conversationsProtocol
+
+Custom protocol for fetching conversations.
+
+| | |
+| --- | --- |
+| Type | `ConversationsBuilderProtocol` |
+| Default | `null` |
+
+Use this for advanced customization of how conversations are fetched.
+
+---
+
+### conversationsStyle
+
+Style configuration for the component.
+
+| | |
+| --- | --- |
+| Type | `CometChatConversationsStyle` |
+| Default | `CometChatConversationsStyle()` |
+
+---
+
+### customSoundForMessages
+
+Path to a custom audio file for incoming message notifications.
+
+| | |
+| --- | --- |
+| Type | `String` |
+| Default | Built-in sound |
+
+---
+
+### datePattern
+
+Custom date format function for conversation timestamps.
+
+| | |
+| --- | --- |
+| Type | `String Function(Conversation)` |
+| Default | Built-in date formatting |
+
+---
+
+### deleteConversationOptionVisibility
+
+Controls visibility of delete option in context menu.
+
+| | |
+| --- | --- |
+| Type | `bool` |
+| Default | `true` |
+
+---
+
+### deliveredIcon
+
+Custom icon for delivered message receipts.
+
+| | |
+| --- | --- |
+| Type | `Widget` |
+| Default | Built-in delivered icon |
+
+---
+
+### disableSoundForMessages
+
+Disables notification sound for incoming messages.
+
+| | |
+| --- | --- |
+| Type | `bool` |
+| Default | `false` |
+
+---
+
+
+### emptyStateView
+
+Custom widget displayed when there are no conversations.
+
+| | |
+| --- | --- |
+| Type | `WidgetBuilder` |
+| Default | Built-in empty state |
+
+---
+
+### errorStateView
+
+Custom widget displayed when an error occurs.
+
+| | |
+| --- | --- |
+| Type | `WidgetBuilder` |
+| Default | Built-in error state |
+
+Hidden when `hideError: true`.
+
+---
+
+### groupTypeVisibility
+
+Controls visibility of group type icon (public/private/password).
+
+| | |
+| --- | --- |
+| Type | `bool` |
+| Default | `true` |
+
+---
+
+### hideAppbar
+
+Hides the entire app bar.
+
+| | |
+| --- | --- |
+| Type | `bool` |
+| Default | `false` |
+
+---
+
+### hideError
+
+Hides the default and custom error views.
+
+| | |
+| --- | --- |
+| Type | `bool` |
+| Default | `false` |
+
+---
+
+### hideSearch
+
+Hides the search bar in the app bar.
+
+| | |
+| --- | --- |
+| Type | `bool` |
+| Default | `false` |
+
+---
+
+### leadingView
+
+Custom renderer for the avatar / left section.
+
+| | |
+| --- | --- |
+| Type | `Widget? Function(BuildContext, Conversation)` |
+| Default | Built-in avatar |
+
+Return `null` to use the default avatar.
+
+---
+
+### listItemView
+
+Custom renderer for the entire list item row.
+
+| | |
+| --- | --- |
+| Type | `Widget Function(Conversation)` |
+| Default | Built-in list item |
+
+---
+
+### loadingStateView
+
+Custom widget displayed during loading state.
+
+| | |
+| --- | --- |
+| Type | `WidgetBuilder` |
+| Default | Built-in shimmer |
+
+---
+
+### mentionAllLabel
+
+Custom label for group mentions (@channel, @everyone).
+
+| | |
+| --- | --- |
+| Type | `String` |
+| Default | `null` |
+
+---
+
+### mentionAllLabelId
+
+Custom label ID for group mentions.
+
+| | |
+| --- | --- |
+| Type | `String` |
+| Default | `null` |
+
+---
+
+
+### onBack
+
+Callback fired when the back button is pressed.
+
+| | |
+| --- | --- |
+| Type | `VoidCallback` |
+| Default | `null` |
+
+---
+
+### onEmpty
+
+Callback fired when the conversation list is empty.
+
+| | |
+| --- | --- |
+| Type | `OnEmpty` |
+| Default | `null` |
+
+---
+
+### onError
+
+Callback fired when the component encounters an error.
+
+| | |
+| --- | --- |
+| Type | `OnError` |
+| Default | `null` |
+
+---
+
+### onItemLongPress
+
+Callback fired when a conversation row is long-pressed.
+
+| | |
+| --- | --- |
+| Type | `Function(Conversation)` |
+| Default | `null` |
+
+---
+
+### onItemTap
+
+Callback fired when a conversation row is tapped.
+
+| | |
+| --- | --- |
+| Type | `Function(Conversation)` |
+| Default | `null` |
+
+---
+
+### onLoad
+
+Callback fired when the conversation list is loaded.
+
+| | |
+| --- | --- |
+| Type | `OnLoad` |
+| Default | `null` |
+
+---
+
+### onSearchTap
+
+Callback fired when the search box is tapped.
+
+| | |
+| --- | --- |
+| Type | `GestureTapCallback` |
+| Default | `null` |
+
+Requires `searchReadOnly: true` to work properly.
+
+---
+
+### onSelection
+
+Callback fired when conversations are selected/deselected.
+
+| | |
+| --- | --- |
+| Type | `Function(List?)` |
+| Default | `null` |
+
+Requires `selectionMode` to be set.
+
+---
+
+### privateGroupIcon
+
+Custom icon for private group indicator.
+
+| | |
+| --- | --- |
+| Type | `Widget` |
+| Default | Built-in lock icon |
+
+---
+
+### protectedGroupIcon
+
+Custom icon for password-protected group indicator.
+
+| | |
+| --- | --- |
+| Type | `Widget` |
+| Default | Built-in lock icon |
+
+---
+
+### readIcon
+
+Custom icon for read message receipts.
+
+| | |
+| --- | --- |
+| Type | `Widget` |
+| Default | Built-in read icon |
+
+---
+
+### receiptsVisibility
+
+Controls visibility of message read/delivery receipts.
+
+| | |
+| --- | --- |
+| Type | `bool` |
+| Default | `true` |
+
+---
+
+
+### scrollController
+
+Custom scroll controller for the list.
+
+| | |
+| --- | --- |
+| Type | `ScrollController` |
+| Default | `null` |
+
+---
+
+### searchBoxIcon
+
+Custom prefix icon for the search box.
+
+| | |
+| --- | --- |
+| Type | `Widget` |
+| Default | Built-in search icon |
+
+---
+
+### searchContentPadding
+
+Padding for search box content.
+
+| | |
+| --- | --- |
+| Type | `EdgeInsetsGeometry` |
+| Default | `null` |
+
+---
+
+### searchPadding
+
+Padding for the search box.
+
+| | |
+| --- | --- |
+| Type | `EdgeInsetsGeometry` |
+| Default | `null` |
+
+---
+
+### searchReadOnly
+
+Makes the search box read-only (tap only).
+
+| | |
+| --- | --- |
+| Type | `bool` |
+| Default | `false` |
+
+---
+
+### selectionMode
+
+Enables single or multi-select mode.
+
+| | |
+| --- | --- |
+| Type | `SelectionMode` |
+| Default | `null` |
+
+Values: `SelectionMode.single`, `SelectionMode.multiple`, `SelectionMode.none`
+
+Must pair with `onSelection` to capture selections.
+
+---
+
+### sentIcon
+
+Custom icon for sent message receipts.
+
+| | |
+| --- | --- |
+| Type | `Widget` |
+| Default | Built-in sent icon |
+
+---
+
+### setOptions
+
+Replaces the list of actions available on long press.
+
+| | |
+| --- | --- |
+| Type | `List? Function(Conversation, CometChatConversationsController, BuildContext)` |
+| Default | `null` |
+
+---
+
+### showBackButton
+
+Shows the back button in the app bar.
+
+| | |
+| --- | --- |
+| Type | `bool` |
+| Default | `false` |
+
+---
+
+### subtitleView
+
+Custom renderer for the last message preview.
+
+| | |
+| --- | --- |
+| Type | `Widget? Function(BuildContext, Conversation)` |
+| Default | Built-in subtitle |
+
+---
+
+### textFormatters
+
+Custom text formatters for the conversation subtitle.
+
+| | |
+| --- | --- |
+| Type | `List` |
+| Default | Default formatters from data source |
+
+See [CometChatMentionsFormatter](/ui-kit/flutter/v5/mentions-formatter-guide) for mention formatting.
+
+---
+
+### title
+
+Custom title text for the app bar.
+
+| | |
+| --- | --- |
+| Type | `String` |
+| Default | "Chats" |
+
+---
+
+### titleView
+
+Custom renderer for the name / title text.
+
+| | |
+| --- | --- |
+| Type | `Widget? Function(BuildContext, Conversation)` |
+| Default | Built-in title |
+
+---
+
+### trailingView
+
+Custom renderer for the timestamp / badge / right section.
+
+| | |
+| --- | --- |
+| Type | `Widget? Function(Conversation)` |
+| Default | Built-in trailing view |
+
+---
+
+### typingIndicatorText
+
+Custom text shown when a user is typing.
+
+| | |
+| --- | --- |
+| Type | `String` |
+| Default | "typing..." |
+
+---
+
+### usersStatusVisibility
+
+Controls visibility of online/offline status indicator.
+
+| | |
+| --- | --- |
+| Type | `bool` |
+| Default | `true` |
+
+---
+
+### avatarHeight
+
+Height for user/group avatars.
+
+| | |
+| --- | --- |
+| Type | `double` |
+| Default | `null` |
+
+---
+
+### avatarWidth
+
+Width for user/group avatars.
+
+| | |
+| --- | --- |
+| Type | `double` |
+| Default | `null` |
+
+---
+
+### avatarPadding
+
+Padding for user/group avatars.
+
+| | |
+| --- | --- |
+| Type | `EdgeInsetsGeometry` |
+| Default | `null` |
+
+---
+
+### avatarMargin
+
+Margin for user/group avatars.
+
+| | |
+| --- | --- |
+| Type | `EdgeInsetsGeometry` |
+| Default | `null` |
+
+---
+
+### badgeWidth
+
+Width for unread message badge.
+
+| | |
+| --- | --- |
+| Type | `double` |
+| Default | `null` |
+
+---
+
+### badgeHeight
+
+Height for unread message badge.
+
+| | |
+| --- | --- |
+| Type | `double` |
+| Default | `null` |
+
+---
+
+### badgePadding
+
+Padding for unread message badge.
+
+| | |
+| --- | --- |
+| Type | `EdgeInsetsGeometry` |
+| Default | `null` |
+
+---
+
+### controllerTag
+
+Tag for controller management. When passed, parent is responsible for closing.
+
+| | |
+| --- | --- |
+| Type | `String` |
+| Default | `null` |
+
+---
+
+### dateBackgroundIsTransparent
+
+Controls whether the date background is transparent.
+
+| | |
+| --- | --- |
+| Type | `bool` |
+| Default | `null` |
+
+---
+
+### dateHeight
+
+Height for the conversation date display.
+
+| | |
+| --- | --- |
+| Type | `double` |
+| Default | `null` |
+
+---
+
+### datePadding
+
+Padding for the conversation date display.
+
+| | |
+| --- | --- |
+| Type | `EdgeInsets` |
+| Default | `null` |
+
+---
+
+### dateTimeFormatterCallback
+
+Callback for custom date and time formatting.
+
+| | |
+| --- | --- |
+| Type | `DateTimeFormatterCallback` |
+| Default | `null` |
+
+---
+
+### dateWidth
+
+Width for the conversation date display.
+
+| | |
+| --- | --- |
+| Type | `double` |
+| Default | `null` |
+
+---
+
+### listItemStyle
+
+Style configuration for list items.
+
+| | |
+| --- | --- |
+| Type | `ListItemStyle` |
+| Default | `null` |
+
+---
+
+### searchContentPadding
+
+Padding for search box content.
+
+| | |
+| --- | --- |
+| Type | `EdgeInsetsGeometry` |
+| Default | `null` |
+
+---
+
+### searchPadding
+
+Padding for the search box.
+
+| | |
+| --- | --- |
+| Type | `EdgeInsetsGeometry` |
+| Default | `null` |
+
+---
+
+### statusIndicatorBorderRadius
+
+Border radius for the status indicator.
+
+| | |
+| --- | --- |
+| Type | `BorderRadiusGeometry` |
+| Default | `null` |
+
+---
+
+### statusIndicatorHeight
+
+Height for the status indicator.
+
+| | |
+| --- | --- |
+| Type | `double` |
+| Default | `null` |
+
+---
+
+### statusIndicatorWidth
+
+Width for the status indicator.
+
+| | |
+| --- | --- |
+| Type | `double` |
+| Default | `null` |
+
+---
+
+### submitIcon
+
+Custom submit icon for selection mode.
+
+| | |
+| --- | --- |
+| Type | `Widget` |
+| Default | Built-in check icon |
+
+---
+
+## Events
+
+| Event | Payload | Fires when |
+| --- | --- | --- |
+| `CometChatConversationEvents.ccConversationDeleted` | `Conversation` | Conversation deleted from list |
+| `CometChatConversationEvents.ccUpdateConversation` | `Conversation` | Conversation updated (last message change, metadata update) |
+
+Subscribe using `CometChatConversationEvents.addConversationListListener()` and unsubscribe with `removeConversationListListener()`.
+
+---
+
+## Customization Matrix
+
+| What to change | Where | Property/API | Example |
+| --- | --- | --- | --- |
+| Override behavior on user interaction | Widget props | `on` callbacks | `onItemTap: (c) => setActive(c)` |
+| Filter which conversations appear | Widget props | `conversationsRequestBuilder` | `conversationsRequestBuilder: ConversationsRequestBuilder()..limit = 10` |
+| Toggle visibility of UI elements | Widget props | `Visibility` boolean props | `receiptsVisibility: false` |
+| Replace a section of the list item | Widget props | `View` render props | `listItemView: (conversation) => CustomWidget()` |
+| Change colors, fonts, spacing | Widget props | `conversationsStyle` | `conversationsStyle: CometChatConversationsStyle(backgroundColor: Colors.white)` |
+
+---
+
+
+
+ Display and select from a list of users
+
+
+ Display and select from a list of groups
+
+
+ Display messages in a conversation
+
+
+ Customize the look and feel of components
+
+
diff --git a/ui-kit/flutter/v5/core-features.mdx b/ui-kit/flutter/v5/core-features.mdx
new file mode 100644
index 000000000..a513fccb2
--- /dev/null
+++ b/ui-kit/flutter/v5/core-features.mdx
@@ -0,0 +1,278 @@
+---
+title: "Core Features"
+sidebarTitle: "Core"
+description: "Comprehensive guide to CometChat's core messaging features including instant messaging, media sharing, read receipts, and more"
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_chat_uikit` |
+| Required setup | `CometChatUIKit.init(uiKitSettings: UIKitSettings)` then `CometChatUIKit.login(uid)` — must complete before rendering any component |
+| Core features | Instant Messaging, Media Sharing, Read Receipts, Mark as Unread, Typing Indicator, User Presence, Reactions, Mentions, Rich Text Formatting, Quoted Reply, Search, Threaded Conversations, Moderation, Report Message, Group Chat |
+| Key components | `CometChatConversations` → [Conversations](/ui-kit/flutter/v5/conversations), `CometChatMessageList` → [Message List](/ui-kit/flutter/v5/message-list), `CometChatMessageComposer` → [Message Composer](/ui-kit/flutter/v5/message-composer), `CometChatMessageHeader` → [Message Header](/ui-kit/flutter/v5/message-header), `CometChatUsers` → [Users](/ui-kit/flutter/v5/users), `CometChatGroups` → [Groups](/ui-kit/flutter/v5/groups), `CometChatGroupMembers` → [Group Members](/ui-kit/flutter/v5/group-members) |
+
+
+
+The UI Kit comprises a variety of widgets, each designed to work seamlessly with one another to deliver a comprehensive and intuitive chat experience.
+
+Here's how different UI Kit widgets work together to achieve CometChat's Core features:
+
+***
+
+## Instant Messaging
+
+At the heart of CometChat's functionality is the ability to support real-time text messaging. Users can send and receive instant messages, fostering quick and efficient communication.
+
+
+
+
+
+| Widgets | Functionality |
+| --- | --- |
+| [MessageComposer](/ui-kit/flutter/v5/message-composer) | [MessageComposer](/ui-kit/flutter/v5/message-composer) is a Widget that enables users to write and send a variety of messages. |
+| [MessageList](/ui-kit/flutter/v5/message-list) | [MessageList](/ui-kit/flutter/v5/message-list) is a Widget that renders a list of messages sent and messages received using [TextBubble](/ui-kit/flutter/v5/message-bubble-styling#text-bubble). |
+
+***
+
+## Media Sharing
+
+Beyond text, CometChat allows users to share various media types within their conversations. This includes images, videos, audio files, and documents, enriching the chat experience and enabling more comprehensive communication.
+
+
+
+
+
+| Widgets | Functionality |
+| --- | --- |
+| [MessageComposer](/ui-kit/flutter/v5/message-composer) | [MessageComposer](/ui-kit/flutter/v5/message-composer) is a Widget that has ActionSheet, ActionSheet is a menu that appears over the context of the app, providing multiple options for sharing media files. |
+| [MessageList](/ui-kit/flutter/v5/message-list) | [MessageList](/ui-kit/flutter/v5/message-list) is a Widget that renders different Media Message bubbles like [Image Bubble](/ui-kit/flutter/v5/message-bubble-styling#image-bubble), [File Bubble](/ui-kit/flutter/v5/message-bubble-styling#file-bubble), [Audio Bubble](/ui-kit/flutter/v5/message-bubble-styling#audio-bubble), [Video Bubble](/ui-kit/flutter/v5/message-bubble-styling#video-bubble) |
+
+***
+
+## Read Receipts
+
+CometChat's Read Receipts feature provides visibility into the message status, letting users know when a message has been delivered and read. This brings clarity to the communication and ensures users are informed about the status of their messages.
+
+
+
+
+
+| Widgets | Functionality |
+| --- | --- |
+| [Conversations](/ui-kit/flutter/v5/conversations) | [Conversations](/ui-kit/flutter/v5/conversations) is a Widget that renders Conversations item List, Conversation item also displays the delivery status of the last message providing users with real-time updates on the status of their messages. |
+| [MessageList](/ui-kit/flutter/v5/message-list) | [MessageList](/ui-kit/flutter/v5/message-list) is a Widget that renders different types of Message bubbles, Read Receipt status is an integral part of all message bubbles, no matter the type, and provides real-time updates about the status of the message. |
+
+***
+
+## Mark As Unread
+
+Mark as Unread feature allows users to manually mark messages as unread, helping them keep track of important conversations they want to revisit later. When enabled, the message list can automatically start from the first unread message, making it easier to pick up where you left off.
+
+
+
+
+
+| Widgets | Functionality |
+| --- | --- |
+| [Message List](/ui-kit/flutter/v5/message-list) | [Message List](/ui-kit/flutter/v5/message-list) provides the "Mark as unread" option in message actions and supports starting from the first unread message when enabled. |
+| [Conversations](/ui-kit/flutter/v5/conversations) | [Conversations](/ui-kit/flutter/v5/conversations) widget listens to conversation updates and reflects the updated unread count in real-time. |
+
+***
+
+## Typing Indicator
+
+The Typing Indicator feature in CometChat shows when a user is typing a response in real-time, fostering a more interactive and engaging chat environment. This feature enhances the real-time communication experience, making conversations feel more natural and fluid.
+
+
+
+
+
+| Widgets | Functionality |
+| --- | --- |
+| [Conversations](/ui-kit/flutter/v5/conversations) | [Conversations](/ui-kit/flutter/v5/conversations) is a Widget that renders Conversations item List, Conversations item also shows real-time typing status indicators. This means that if a user in a one-on-one chat or a participant in a group chat is currently typing a message |
+| [Message Header](/ui-kit/flutter/v5/message-header) | [Message Header](/ui-kit/flutter/v5/message-header) that renders details of User or Groups in ToolBar. The MessageHeader also handles the Typing Indicator functionality. When a user or a member in a group is typing, the MessageHeader dynamically updates to display a 'typing...' status in real-time. |
+
+***
+
+## User Presence
+
+CometChat's User Presence feature allows users to see whether their contacts are online, offline. This helps users know the best time to initiate a conversation and sets expectations about response times.
+
+
+
+
+
+| Widgets | Functionality |
+| --- | --- |
+| [Conversations](/ui-kit/flutter/v5/conversations) | [Conversations](/ui-kit/flutter/v5/conversations) is a Widget that renders Conversations item List, Conversations item also shows user presence information. |
+| [Message Header](/ui-kit/flutter/v5/message-header) | [Message Header](/ui-kit/flutter/v5/message-header) that renders details of User or Groups in ToolBar. The MessageHeader also handles user Presence information. |
+| [Users](/ui-kit/flutter/v5/users) | [Users](/ui-kit/flutter/v5/users) renders list of users available in your app. It also responsible to render users Presence information. |
+| [Group Members](/ui-kit/flutter/v5/group-members) | [Group Members](/ui-kit/flutter/v5/group-members) renders list of users available in the group. The Group Members widget also handles user Presence information. |
+
+***
+
+## Reactions
+
+CometChat's Reactions feature adds a layer of expressiveness to your chat application by allowing users to react to messages. With Reactions, users can convey a range of emotions or express their thoughts on a particular message without typing out a full response, enhancing their user experience and fostering greater engagement.
+
+The number of reactions displayed depends on the width of the view. For instance, if a message contains 5 reactions but the width of the CometChatReactions view can only accommodate 4 reactions at a time, the first three reactions will be shown along with an additional UI element at the end of the row. This element indicates the number of other unique reactions that are not immediately visible, informing users of the total count of different reactions.
+
+In the example, tapping on this element (depicted as "+2" in the provided image) will by default trigger the CometChatReactionList widget. This action opens a modal sheet from the bottom of the screen, displaying all reactions received by the message.
+
+
+
+
+
+| Widgets | Functionality |
+| --- | --- |
+| [MessageList](/ui-kit/flutter/v5/message-list) | [MessageList](/ui-kit/flutter/v5/message-list) is a Widget that renders different types of Message bubbles, Irrespective of the type of message bubble, Reactions are an integral part and offer a more engaging, expressive way for users to respond to messages. |
+
+***
+
+## Mentions
+
+Mentions is a robust feature provided by CometChat that enhances the interactivity and clarity of group or 1-1 chats by allowing users to directly address or refer to specific individuals in a conversation. The feature also supports group mentions like @all, enabling users to quickly notify all members in a group chat simultaneously.
+
+
+
+
+
+| Widgets | Functionality |
+| --- | --- |
+| [Conversations](/ui-kit/flutter/v5/conversations) | [Conversations](/ui-kit/flutter/v5/conversations) widget provides an enhanced user experience by integrating the Mentions feature. This means that from the conversation list itself, users can see where they or someone else have been specifically mentioned. |
+| [MessageComposer](/ui-kit/flutter/v5/message-composer) | [MessageComposer](/ui-kit/flutter/v5/message-composer) is a widget that allows users to craft and send various types of messages, including the usage of the Mentions feature for direct addressing within the conversation. |
+| [MessageList](/ui-kit/flutter/v5/message-list) | [MessageList](/ui-kit/flutter/v5/message-list) is a widget that displays a list of sent and received messages. It also supports the rendering of Mentions, enhancing the readability and interactivity of conversations. |
+
+***
+
+## Rich Text Formatting
+
+Rich Text Formatting allows users to style their messages with bold, italic, strikethrough, code, code blocks, blockquotes, ordered/unordered lists, and links. This brings richer expression to conversations and helps users emphasize key points.
+
+
+
+
+
+| Widgets | Functionality |
+| --- | --- |
+| [CompactMessageComposer](/ui-kit/flutter/v5/compact-message-composer#rich-text-formatting) | [CompactMessageComposer](/ui-kit/flutter/v5/compact-message-composer#rich-text-formatting) provides a built-in rich text editor with formatting toolbar and text selection menu items for bold, italic, strikethrough, code, links, lists, blockquotes, and code blocks. |
+| [MessageList](/ui-kit/flutter/v5/message-list) | [MessageList](/ui-kit/flutter/v5/message-list) renders formatted messages with the appropriate styling automatically applied, ensuring that rich text formatting is displayed exactly as intended by the sender. |
+
+***
+
+## Quoted Reply
+
+Quoted Reply is a robust feature provided by CometChat that enables users to quickly reply to specific messages by selecting the "Reply" option from a message's action menu. This enhances context, keeps conversations organized, and improves overall chat experience in both 1-1 and group chats.
+
+
+
+
+
+| Widgets | Functionality |
+| --- | --- |
+| [MessageList](/ui-kit/flutter/v5/message-list) | [MessageList](/ui-kit/flutter/v5/message-list) supports replying to messages via the "Reply" option. Users can select "Reply" on a message to open the composer with the quoted reply pre-filled, maintaining context. |
+| [MessageComposer](/ui-kit/flutter/v5/message-composer) | [MessageComposer](/ui-kit/flutter/v5/message-composer) works seamlessly with Quoted Message by showing the quoted reply above the input field, letting users compose their response in proper context. |
+
+***
+
+## Conversation and Advanced Search
+
+Conversation and Advanced Search is a powerful feature provided by CometChat that enables users to quickly find conversations, messages, and media across chats in real time. It supports filters, scopes, and custom actions, allowing users to locate content efficiently while keeping the chat experience smooth and intuitive.
+
+
+
+
+
+| Widgets | Functionality |
+| --- | --- |
+| [Search](/ui-kit/flutter/v5/search) | [Search](/ui-kit/flutter/v5/search) allows users to search across conversations and messages in real time. Users can click on a result to open the conversation or jump directly to a specific message. |
+| [Message Header](/ui-kit/flutter/v5/message-header) | [Message Header](/ui-kit/flutter/v5/message-header) shows the search button in the chat header, allowing users to search within a conversation. |
+| [MessageList](/ui-kit/flutter/v5/message-list) | [MessageList](/ui-kit/flutter/v5/message-list) shows the selected message when clicked from search results and highlights it in the message list. |
+| [MessageComposer](/ui-kit/flutter/v5/message-composer) | [MessageComposer](/ui-kit/flutter/v5/message-composer) displays the search input. |
+
+***
+
+## Moderation
+
+CometChat's Message Moderation feature helps maintain a safe and respectful chat environment by automatically filtering and managing inappropriate content. Messages can be automatically blocked or flagged based on predefined rules, ensuring harmful content is handled before it reaches users.
+
+
+
+
+
+
+Learn more about setting up moderation rules and managing content in the [Moderation](/moderation/overview) documentation.
+
+
+| Widgets | Functionality |
+| --- | --- |
+| [Message List](/ui-kit/flutter/v5/message-list) | [Message List](/ui-kit/flutter/v5/message-list) automatically handles moderated messages, displaying blocked content appropriately based on your moderation settings. |
+
+After implementing moderation rules, users can report messages they find inappropriate or harmful. As a next step, you can enable the **[Report Message](#report-message)** feature to allow users to flag messages for review by moderators.
+
+***
+
+## Report Message
+
+The Report Message feature allows users to report inappropriate or harmful messages within the chat. Users can choose from predefined reasons and provide additional remarks for detailed context. This feature helps maintain a safe and respectful chat environment.
+
+
+Learn more about how flagged messages are handled, reviewed, and moderated in the [Flagged Messages](/moderation/flagged-messages) documentation.
+
+
+
+
+
+
+| Widgets | Functionality |
+| --- | --- |
+| [MessageList](/ui-kit/flutter/v5/message-list) | [MessageList](/ui-kit/flutter/v5/message-list) provides the "Report Message" option in the message actions menu, allowing users to initiate the reporting process for inappropriate messages. |
+
+***
+
+## Threaded Conversations
+
+The Threaded Conversations feature enables users to respond directly to a specific message in a chat. This keeps conversations organized and enhances the user experience by maintaining context, especially in group chats.
+
+
+
+
+
+| Widgets | Functionality |
+| --- | --- |
+| [Threaded Messages](/ui-kit/flutter/v5/threaded-messages-header) | [Threaded Messages](/ui-kit/flutter/v5/threaded-messages-header) that displays all replies made to a particular message in a conversation. |
+
+***
+
+## Group Chat
+
+CometChat facilitates Group Chats, allowing users to have conversations with multiple participants simultaneously. This feature is crucial for team collaborations, group discussions, social communities, and more.
+
+
+
+
+
+For a comprehensive understanding and guide on implementing and using the Groups feature in CometChat, you should refer to our detailed guide on [Groups](/ui-kit/flutter/v5/groups).
+
+***
+
+## Next Steps
+
+
+
+ Learn how to send text, media, and custom messages
+
+
+ Display and manage messages with real-time updates
+
+
+ Show conversation lists with typing indicators and receipts
+
+
+ Create and manage group conversations
+
+
+
+***
diff --git a/ui-kit/flutter/custom-mentions-formatter-guide.mdx b/ui-kit/flutter/v5/custom-mentions-formatter-guide.mdx
similarity index 95%
rename from ui-kit/flutter/custom-mentions-formatter-guide.mdx
rename to ui-kit/flutter/v5/custom-mentions-formatter-guide.mdx
index a9322a839..bd527a620 100644
--- a/ui-kit/flutter/custom-mentions-formatter-guide.mdx
+++ b/ui-kit/flutter/v5/custom-mentions-formatter-guide.mdx
@@ -13,7 +13,7 @@ description: "Create a custom mentions formatter to filter suggestions, style me
| Purpose | Customize @mention suggestion behavior — filter who appears, style mentions, handle taps |
| Version | v5.2.13 |
| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
-| Related | [Mentions Formatter](/ui-kit/flutter/mentions-formatter-guide) · [Custom Text Formatter](/ui-kit/flutter/custom-text-formatter-guide) · [All Guides](/ui-kit/flutter/guide-overview) |
+| Related | [Mentions Formatter](/ui-kit/flutter/v5/mentions-formatter-guide) · [Custom Text Formatter](/ui-kit/flutter/v5/custom-text-formatter-guide) · [All Guides](/ui-kit/flutter/v5/guide-overview) |
@@ -362,16 +362,16 @@ CustomMentionsFormatter(
## Next Steps
-
+
Configure the built-in mentions formatter.
-
+
Build custom inline text patterns with regex.
-
+
Customize the standard message input component.
-
+
Customize the compact message input component.
diff --git a/ui-kit/flutter/v5/custom-text-formatter-guide.mdx b/ui-kit/flutter/v5/custom-text-formatter-guide.mdx
new file mode 100644
index 000000000..5cb33667d
--- /dev/null
+++ b/ui-kit/flutter/v5/custom-text-formatter-guide.mdx
@@ -0,0 +1,401 @@
+---
+title: "Custom Text Formatter"
+description: "Extend the CometChatTextFormatter base class to implement custom inline text patterns with regex and callbacks in Flutter."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_chat_uikit` |
+| Key class | `CometChatTextFormatter` (abstract base class for custom formatters) |
+| Required setup | `CometChatUIKit.init(uiKitSettings: uiKitSettings)` then `CometChatUIKit.login("UID")` |
+| Purpose | Extend to create custom inline text patterns with regex, styling, and callbacks |
+| Features | Text formatting, customizable styles, dynamic text replacement, input field integration |
+| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
+| Related | [ShortCut Formatter](/ui-kit/flutter/v5/shortcut-formatter-guide) \| [Mentions Formatter](/ui-kit/flutter/v5/mentions-formatter-guide) \| [Custom Mentions Formatter](/ui-kit/flutter/v5/custom-mentions-formatter-guide) \| [All Guides](/ui-kit/flutter/v5/guide-overview) |
+
+
+
+`CometChatTextFormatter` is an abstract class for formatting text in the message composer and message bubbles. Extend it to build custom formatters — hashtags, keywords, or any regex-based pattern.
+
+| Capability | Description |
+| --- | --- |
+| Text formatting | Auto-format text based on regex patterns and styles |
+| Custom styles | Set colors, fonts, and backgrounds for matched text |
+| Dynamic replacement | Regex-based find-and-replace in user input |
+| Input integration | Real-time monitoring of the composer input field |
+| Attributed text | Build styled text spans for message bubbles |
+
+---
+
+## Steps
+
+### 1. Import the base class
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+```
+
+### 2. Extend CometChatTextFormatter
+
+```dart
+class HashTagTextFormatter extends CometChatTextFormatter {
+ HashTagTextFormatter() : super(
+ trackingCharacter: '#',
+ pattern: RegExp(r'\B#(\w+)\b'),
+ );
+
+ // Override required methods...
+}
+```
+
+### 3. Configure tracking character and regex
+
+Set the character that triggers formatting and the regex to match.
+
+```dart
+HashTagTextFormatter() : super(
+ trackingCharacter: '#',
+ pattern: RegExp(r'\B#(\w+)\b'),
+ showLoadingIndicator: false,
+);
+```
+
+### 4. Implement required methods
+
+```dart
+@override
+void init() {
+ // Initialize formatter
+}
+
+@override
+void handlePreMessageSend(BuildContext context, BaseMessage baseMessage) {
+ // Process message before sending
+}
+
+@override
+TextStyle getMessageInputTextStyle(BuildContext context) {
+ return TextStyle(color: Colors.blue);
+}
+
+@override
+void onScrollToBottom(TextEditingController textEditingController) {
+ // Handle scroll events
+}
+
+@override
+void onChange(TextEditingController textEditingController, String previousText) {
+ // Handle text changes
+}
+```
+
+### 5. Customize message bubble styling
+
+```dart
+@override
+TextStyle getMessageBubbleTextStyle(
+ BuildContext context,
+ BubbleAlignment? alignment,
+ {bool forConversation = false}
+) {
+ return TextStyle(
+ color: alignment == BubbleAlignment.right
+ ? Colors.white
+ : Colors.blue,
+ fontWeight: FontWeight.bold,
+ decoration: TextDecoration.underline,
+ );
+}
+```
+
+---
+
+## Example
+
+A hashtag formatter used with [CometChatMessageList](/ui-kit/flutter/v5/message-list) and [CometChatMessageComposer](/ui-kit/flutter/v5/message-composer).
+
+{/*
+
+ */}
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:flutter/material.dart';
+
+class HashTagTextFormatter extends CometChatTextFormatter {
+ HashTagTextFormatter() : super(
+ trackingCharacter: '#',
+ pattern: RegExp(r'\B#(\w+)\b'),
+ showLoadingIndicator: false,
+ );
+
+ @override
+ void init() {
+ // Initialization logic
+ }
+
+ @override
+ void handlePreMessageSend(BuildContext context, BaseMessage baseMessage) {
+ // Process hashtags before sending
+ }
+
+ @override
+ TextStyle getMessageInputTextStyle(BuildContext context) {
+ CometChatColorPalette colorPalette = CometChatThemeHelper.getColorPalette(context);
+ return TextStyle(
+ color: colorPalette.primary,
+ fontWeight: FontWeight.w500,
+ );
+ }
+
+ @override
+ TextStyle getMessageBubbleTextStyle(
+ BuildContext context,
+ BubbleAlignment? alignment,
+ {bool forConversation = false}
+ ) {
+ CometChatColorPalette colorPalette = CometChatThemeHelper.getColorPalette(context);
+ return TextStyle(
+ color: alignment == BubbleAlignment.right
+ ? colorPalette.white
+ : colorPalette.primary,
+ fontWeight: FontWeight.bold,
+ decoration: TextDecoration.underline,
+ );
+ }
+
+ @override
+ void onScrollToBottom(TextEditingController textEditingController) {
+ // Handle scroll to bottom
+ }
+
+ @override
+ void onChange(TextEditingController textEditingController, String previousText) {
+ // Handle text changes - detect new hashtags
+ String currentText = textEditingController.text;
+ if (currentText.contains('#')) {
+ // Process hashtag
+ }
+ }
+
+ @override
+ List getAttributedText(
+ String text,
+ BuildContext context,
+ BubbleAlignment? alignment,
+ {List? existingAttributes,
+ Function(String)? onTap,
+ bool forConversation = false}
+ ) {
+ return super.getAttributedText(
+ text,
+ context,
+ alignment,
+ existingAttributes: existingAttributes,
+ onTap: onTap ?? (hashtag) {
+ // Handle hashtag tap - e.g., search for hashtag
+ print('Tapped hashtag: $hashtag');
+ },
+ forConversation: forConversation,
+ );
+ }
+}
+```
+
+
+
+
+
+Pass the formatter via the `textFormatters` property.
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:flutter/material.dart';
+
+class MessageListDemo extends StatefulWidget {
+ const MessageListDemo({super.key});
+
+ @override
+ State createState() => _MessageListDemoState();
+}
+
+class _MessageListDemoState extends State {
+ User? chatUser;
+
+ @override
+ void initState() {
+ super.initState();
+ CometChat.getUser("uid").then((user) {
+ setState(() {
+ chatUser = user;
+ });
+ });
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ if (chatUser == null) {
+ return const Center(child: CircularProgressIndicator());
+ }
+
+ return CometChatMessageList(
+ user: chatUser,
+ textFormatters: [HashTagTextFormatter()],
+ );
+ }
+}
+```
+
+
+
+
+---
+
+## Methods Reference
+
+| Field | Description |
+| --- | --- |
+| `trackingCharacter` | Character that starts tracking (e.g. `#` for hashtags) |
+| `pattern` | Regex pattern to match text for formatting |
+| `showLoadingIndicator` | Whether to show loading indicator during search |
+| `messageBubbleTextStyle` | Function to style message bubble text |
+| `messageInputTextStyle` | Function to style composer input text |
+| `message` | Current message being processed |
+| `user` | User context for the formatter |
+| `group` | Group context for the formatter |
+
+---
+
+## Override Methods
+
+
+
+
+Initialize the formatter. Called when the formatter is first used.
+
+```dart
+@override
+void init() {
+ // Setup any initial state
+}
+```
+
+
+
+
+
+Process the message before it's sent. Use this to modify message metadata.
+
+```dart
+@override
+void handlePreMessageSend(BuildContext context, BaseMessage baseMessage) {
+ // Add hashtag metadata to message
+ if (baseMessage is TextMessage) {
+ final hashtags = pattern?.allMatches(baseMessage.text)
+ .map((m) => m.group(1))
+ .toList();
+ // Store hashtags in message metadata
+ }
+}
+```
+
+
+
+
+
+Returns the TextStyle for formatted text in message bubbles.
+
+```dart
+@override
+TextStyle getMessageBubbleTextStyle(
+ BuildContext context,
+ BubbleAlignment? alignment,
+ {bool forConversation = false}
+) {
+ return TextStyle(
+ color: Colors.blue,
+ fontWeight: FontWeight.bold,
+ );
+}
+```
+
+
+
+
+
+Returns styled text spans for the message bubble.
+
+```dart
+@override
+List getAttributedText(
+ String text,
+ BuildContext context,
+ BubbleAlignment? alignment,
+ {List? existingAttributes,
+ Function(String)? onTap,
+ bool forConversation = false}
+) {
+ // Return attributed text with styling
+ return super.getAttributedText(
+ text, context, alignment,
+ existingAttributes: existingAttributes,
+ onTap: onTap,
+ forConversation: forConversation,
+ );
+}
+```
+
+
+
+
+
+Called when text changes in the composer.
+
+```dart
+@override
+void onChange(TextEditingController textEditingController, String previousText) {
+ // Detect and process new patterns
+}
+```
+
+
+
+
+---
+
+## Built-in Formatters
+
+Flutter UI Kit includes these pre-built formatters:
+
+| Formatter | Description |
+| --- | --- |
+| `CometChatMentionsFormatter` | @mentions with user suggestions |
+| `CometChatUrlFormatter` | Auto-detect and style URLs |
+| `CometChatEmailFormatter` | Auto-detect and style email addresses |
+| `CometChatPhoneNumberFormatter` | Auto-detect and style phone numbers |
+
+---
+
+## Next Steps
+
+
+
+ Add @mentions with styled tokens.
+
+
+ Build a custom mentions formatter with filtered suggestions.
+
+
+ Customize the message input component.
+
+
+ Browse all feature and formatter guides.
+
+
+ Full working sample application on GitHub.
+
+
diff --git a/ui-kit/flutter/v5/events.mdx b/ui-kit/flutter/v5/events.mdx
new file mode 100644
index 000000000..229f7e70a
--- /dev/null
+++ b/ui-kit/flutter/v5/events.mdx
@@ -0,0 +1,744 @@
+---
+title: "Events"
+description: "Listen to and handle real-time events for users, groups, conversations, messages, calls, and UI interactions in Flutter UI Kit"
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_chat_uikit` |
+| Conversation events | `ccConversationDeleted`, `ccUpdateConversation` |
+| User events | `ccUserBlocked`, `ccUserUnblocked` |
+| Group events | `ccGroupCreated`, `ccGroupDeleted`, `ccGroupLeft`, `ccGroupMemberScopeChanged`, `ccGroupMemberKicked`, `ccGroupMemberBanned`, `ccGroupMemberUnbanned`, `ccGroupMemberJoined`, `ccGroupMemberAdded`, `ccOwnershipChanged` |
+| Message events | `ccMessageSent`, `ccMessageEdited`, `ccReplyToMessage`, `ccMessageDeleted`, `ccMessageRead`, `ccLiveReaction`, `ccMessageForwarded`, plus SDK listener events |
+| Call events | `ccOutgoingCall`, `ccCallAccepted`, `ccCallRejected`, `ccCallEnded` |
+| UI events | `ccActiveChatChanged`, `showPanel`, `hidePanel`, `openChat`, `ccComposeMessage`, `onAiFeatureTapped` |
+| Purpose | Decoupled communication between UI Kit components — subscribe to events to react to changes without direct component references |
+
+
+
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```dart
+// Add event listener
+CometChatMessageEvents.addMessagesListener("LISTENER_ID", this);
+
+// Remove event listener
+CometChatMessageEvents.removeMessagesListener("LISTENER_ID");
+
+// Implement listener methods
+@override
+void ccMessageSent(BaseMessage message, MessageStatus messageStatus) {
+ // Handle message sent event
+}
+```
+
+**Available Event Types:**
+- **User Events** → Block/Unblock users
+- **Group Events** → Create, delete, join, leave groups
+- **Conversation Events** → Delete conversations, update conversations
+- **Message Events** → Send, edit, delete, receive messages, reactions, AI messages
+- **Call Events** → Outgoing, accepted, rejected, ended calls
+- **UI Events** → Show/hide panels, active chat changes
+
+
+Events allow for a decoupled, flexible architecture where different parts of the application can interact without having to directly reference each other. This makes it easier to create complex, interactive experiences, as well as to extend and customize the functionality provided by the CometChat UI Kit.
+
+Both Components and Composite Components have the ability to emit events. These events are dispatched in response to certain changes or user interactions within the component. By emitting events, these components allow other parts of the application to react to changes or interactions, thus enabling dynamic and interactive behavior within the application.
+
+***
+
+## User Events
+
+`CometChatUserEvents` emit events when the logged-in user executes actions on another user. This class provides methods to add and remove listeners for user events, as well as methods to handle specific user actions such as blocking and unblocking users.
+
+**Available Events:**
+
+1. `ccUserBlocked`: Triggered when the logged-in user blocks another user.
+2. `ccUserUnblocked`: Triggered when the logged-in user unblocks another user.
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:flutter/material.dart';
+
+class UserEventsExample extends StatefulWidget {
+ const UserEventsExample({super.key});
+
+ @override
+ State createState() => _UserEventsExampleState();
+}
+
+class _UserEventsExampleState extends State with CometChatUserEventListener {
+ String listenerID = "unique_listener_ID";
+
+ @override
+ void initState() {
+ super.initState();
+
+ CometChatUserEvents.addUsersListener(listenerID, this); // Add the listener
+ }
+
+ @override
+ void dispose() {
+ super.dispose();
+
+ CometChatUserEvents.removeUsersListener(listenerID); // Remove the listener
+ }
+
+ @override
+ void ccUserBlocked(User user) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccUserUnblocked(User user) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return const Placeholder();
+ }
+}
+```
+
+
+
+***
+
+## Group Events
+
+`CometChatGroupEvents` Emits events when the logged-in user performs actions related to groups. This class provides methods to listen to various group-related events and handle them accordingly.
+
+**Available Events:**
+
+1. `ccGroupCreated`: Triggered when the logged-in user creates a group.
+2. `ccGroupDeleted`: Triggered when the logged-in user deletes a group.
+3. `ccGroupLeft`: Triggered when the logged-in user leaves a group.
+4. `ccGroupMemberScopeChanged`: Triggered when the logged-in user changes the scope of another group member.
+5. `ccGroupMemberBanned`: Triggered when the logged-in user bans a group member from the group.
+6. `ccGroupMemberKicked`: Triggered when the logged-in user kicks another group member from the group.
+7. `ccGroupMemberUnbanned`: Triggered when the logged-in user unbans a user banned from the group.
+8. `ccGroupMemberJoined`: Triggered when the logged-in user joins a group.
+9. `ccGroupMemberAdded`: Triggered when the logged-in user adds new members to the group.
+10. `ccOwnershipChanged`: Triggered when the logged-in user transfers the ownership of their group to some other member.
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart' as sdk;
+import 'package:flutter/material.dart';
+
+class GroupEventsExample extends StatefulWidget {
+ const GroupEventsExample({super.key});
+
+ @override
+ State createState() => _GroupEventsExampleState();
+}
+
+class _GroupEventsExampleState extends State with CometChatGroupEventListener {
+ String listenerID = "unique_listener_ID";
+
+ @override
+ void initState() {
+ super.initState();
+
+ CometChatGroupEvents.addGroupsListener(listenerID, this); // Add the listener
+ }
+
+ @override
+ void dispose() {
+ super.dispose();
+
+ CometChatGroupEvents.removeGroupsListener(listenerID); // Remove the listener
+ }
+
+ @override
+ void ccGroupCreated(Group group) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccGroupDeleted(Group group) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccGroupLeft(sdk.Action message, User leftUser, Group leftGroup) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccGroupMemberScopeChanged(sdk.Action message, User updatedUser, String scopeChangedTo, String scopeChangedFrom, Group group) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccGroupMemberBanned(sdk.Action message, User bannedUser, User bannedBy, Group bannedFrom) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccGroupMemberKicked(sdk.Action message, User kickedUser, User kickedBy, Group kickedFrom) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccGroupMemberUnbanned(sdk.Action message, User unbannedUser, User unbannedBy, Group unbannedFrom) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccGroupMemberJoined(User joinedUser, Group joinedGroup) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccGroupMemberAdded(List messages, List usersAdded, Group groupAddedIn, User addedBy) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccOwnershipChanged(Group group, GroupMember newOwner) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return const Placeholder();
+ }
+}
+```
+
+
+
+***
+
+## Conversation Events
+
+The `CometChatConversationEvents` component emits events when the logged-in user performs actions related to conversations. This allows for the UI to be updated accordingly.
+
+**Available Events:**
+
+1. `ccConversationDeleted`: Triggered when the logged-in user deletes a conversation.
+2. `ccUpdateConversation`: Triggered when a conversation is updated (e.g., unread count changes).
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:flutter/material.dart';
+
+class ConversationEventsExample extends StatefulWidget {
+ const ConversationEventsExample({super.key});
+
+ @override
+ State createState() => _ConversationEventsExampleState();
+}
+
+class _ConversationEventsExampleState extends State with CometChatConversationEventListener {
+ String listenerID = "unique_listener_ID";
+
+ @override
+ void initState() {
+ super.initState();
+
+ CometChatConversationEvents.addConversationListListener(listenerID, this); // Add the listener
+ }
+
+ @override
+ void dispose() {
+ super.dispose();
+
+ CometChatConversationEvents.removeConversationListListener(listenerID); // Remove the listener
+ }
+
+ @override
+ void ccConversationDeleted(Conversation conversation) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccUpdateConversation(Conversation conversation) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return const Placeholder();
+ }
+}
+```
+
+
+
+***
+
+## Message Events
+
+`CometChatMessageEvents` emits events when various actions are performed on messages within the application. These events facilitate updating the UI accordingly.
+
+**Available Events:**
+
+1. `ccMessageSent`: Triggered whenever a logged-in user sends any message. It can have two states: `inProgress` and `sent`.
+2. `ccMessageEdited`: Triggered whenever a logged-in user edits any message from the list of messages. It can have two states: `inProgress` and `sent`.
+3. `ccMessageDeleted`: Triggered whenever a logged-in user deletes any message from the list of messages.
+4. `ccMessageRead`: Triggered whenever a logged-in user reads any message.
+5. `ccLiveReaction`: Triggered whenever a logged-in user clicks on a live reaction.
+6. `ccMessageForwarded`: Triggered whenever a logged-in user forwards any message to a list of users or groups. It can have a state of `status`.
+7. `onTextMessageReceived`: Triggered when a text message is received.
+8. `onMediaMessageReceived`: Triggered when a media message is received.
+9. `onCustomMessageReceived`: Triggered when a custom message is received.
+10. `onTypingStarted`: Triggered when a typing indicator starts.
+11. `onTypingEnded`: Triggered when a typing indicator ends.
+12. `onMessagesDelivered`: Triggered when messages are delivered.
+13. `onMessagesRead`: Triggered when messages are read.
+14. `onMessageEdited`: Triggered when a message is edited.
+15. `onMessageDeleted`: Triggered when a message is deleted.
+16. `onTransientMessageReceived`: Triggered when a transient message is received.
+17. `onFormMessageReceived`: Triggered when a form message is received.
+18. `onCardMessageReceived`: Triggered when a card message is received.
+19. `onCustomInteractiveMessageReceived`: Triggered when a custom interactive message is received.
+20. `onInteractionGoalCompleted`: Triggered when an interaction goal is completed.
+21. `onSchedulerMessageReceived`: Triggered when a scheduler message is received.
+22. `onMessageReactionAdded`: Triggered when a reaction is added to a message.
+23. `onMessageReactionRemoved`: Triggered when a reaction is removed from a message.
+24. `ccReplyToMessage`: Triggered when the logged-in user replies to a message.
+25. `onMessagesDeliveredToAll`: Triggered when messages are delivered to all recipients.
+26. `onMessagesReadByAll`: Triggered when messages are read by all recipients.
+27. `onMessageModerated`: Triggered when a message is moderated.
+28. `onAIAssistantMessageReceived`: Triggered when an AI Assistant message is received.
+29. `onAIToolResultReceived`: Triggered when an AI tool result is received.
+30. `onAIToolArgumentsReceived`: Triggered when AI tool arguments are received.
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:flutter/material.dart';
+
+class MessageEventsExample extends StatefulWidget {
+ const MessageEventsExample({super.key});
+
+ @override
+ State createState() => _MessageEventsExampleState();
+}
+
+class _MessageEventsExampleState extends State with CometChatMessageEventListener {
+ String listenerID = "unique_listener_ID";
+
+ @override
+ void initState() {
+ super.initState();
+
+ CometChatMessageEvents.addMessagesListener(listenerID, this); // Add the listener
+ }
+
+ @override
+ void dispose() {
+ super.dispose();
+
+ CometChatMessageEvents.removeMessagesListener(listenerID); // Remove the listener
+ }
+
+ @override
+ void ccMessageSent(BaseMessage message, MessageStatus messageStatus) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccMessageEdited(BaseMessage message, MessageEditStatus status) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccMessageDeleted(BaseMessage message, EventStatus messageStatus) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccMessageRead(BaseMessage message) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccLiveReaction(String reaction) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccMessageForwarded(BaseMessage message, List? usersSent, List? groupsSent, MessageStatus status) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccReplyToMessage(BaseMessage message, MessageStatus status) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onTextMessageReceived(TextMessage textMessage) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onMediaMessageReceived(MediaMessage mediaMessage) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onCustomMessageReceived(CustomMessage customMessage) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onTypingStarted(TypingIndicator typingIndicator) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onTypingEnded(TypingIndicator typingIndicator) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onMessagesDelivered(MessageReceipt messageReceipt) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onMessagesRead(MessageReceipt messageReceipt) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onMessageEdited(BaseMessage message) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onMessageDeleted(BaseMessage message) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onTransientMessageReceived(TransientMessage message) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onFormMessageReceived(FormMessage formMessage) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onCardMessageReceived(CardMessage cardMessage) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onCustomInteractiveMessageReceived(
+ CustomInteractiveMessage customInteractiveMessage) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onInteractionGoalCompleted(InteractionReceipt receipt) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onSchedulerMessageReceived(SchedulerMessage schedulerMessage) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onMessageReactionAdded(ReactionEvent reactionEvent) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onMessageReactionRemoved(ReactionEvent reactionEvent) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccReplyToMessage(BaseMessage message, MessageStatus status) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onMessagesDeliveredToAll(MessageReceipt messageReceipt) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onMessagesReadByAll(MessageReceipt messageReceipt) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onMessageModerated(BaseMessage message) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onAIAssistantMessageReceived(AIAssistantMessage aiAssistantMessage) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onAIToolResultReceived(AIToolResultMessage aiToolResultMessage) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onAIToolArgumentsReceived(AIToolArgumentMessage aiToolArgumentMessage) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return const Placeholder();
+ }
+}
+```
+
+
+
+***
+
+## Call Events
+
+`CometChatCallEvents` emits events related to calls within the application. This class provides methods to listen to call-related events and handle them accordingly.
+
+**Available Events:**
+
+1. `ccOutgoingCall`: Triggered when the logged-in user initiates an outgoing call.
+2. `ccCallAccepted`: Triggered when a call is accepted.
+3. `ccCallRejected`: Triggered when a call is rejected.
+4. `ccCallEnded`: Triggered when a call is ended.
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:flutter/material.dart';
+
+class CallEventsExample extends StatefulWidget {
+ const CallEventsExample({super.key});
+
+ @override
+ State createState() => _CallEventsExampleState();
+}
+
+class _CallEventsExampleState extends State with CometChatCallEventListener {
+ String listenerID = "unique_listener_ID";
+
+ @override
+ void initState() {
+ super.initState();
+
+ CometChatCallEvents.addCallEventsListener(listenerID, this); // Add the listener
+ }
+
+ @override
+ void dispose() {
+ super.dispose();
+
+ CometChatCallEvents.removeCallEventsListener(listenerID); // Remove the listener
+ }
+
+ @override
+ void ccOutgoingCall(Call call) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccCallAccepted(Call call) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccCallRejected(Call call) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccCallEnded(Call call) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return const Placeholder();
+ }
+}
+```
+
+
+
+***
+
+## UI Events
+
+`CometChatUIEvents` emits events related to UI components within the CometChat UI. This class provides methods to listen to UI-related events and handle them accordingly.
+
+**Available Events:**
+
+1. `showPanel`: Triggered to show an additional UI panel with custom elements.
+2. `hidePanel`: Triggered to hide a previously shown UI panel.
+3. `ccActiveChatChanged`: Triggered when the active chat changes, providing information about the current message, user, and group.
+4. `openChat`: Triggered to open a chat with a specific user or group.
+5. `ccComposeMessage`: Triggered when composing a message with a specific text and status.
+6. `onAiFeatureTapped`: Triggered when an AI feature is tapped for a specific user or group.
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:flutter/material.dart';
+
+class UIEventsExample extends StatefulWidget {
+ const UIEventsExample({super.key});
+
+ @override
+ State createState() => _UIEventsExampleState();
+}
+
+class _UIEventsExampleState extends State with CometChatUIEventListener {
+ String listenerID = "unique_listener_ID";
+
+ @override
+ void initState() {
+ super.initState();
+
+ CometChatUIEvents.addUiListener(listenerID, this); // Add the listener
+ }
+
+ @override
+ void dispose() {
+ super.dispose();
+
+ CometChatUIEvents.removeUiListener(listenerID); // Remove the listener
+ }
+
+ @override
+ void showPanel(Map? id, CustomUIPosition uiPosition, WidgetBuilder child) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void hidePanel(Map? id, CustomUIPosition uiPosition) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccActiveChatChanged(Map? id, BaseMessage? lastMessage, User? user, Group? group, int unreadMessageCount) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void openChat(User? user, Group? group) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccComposeMessage(String text, MessageEditStatus status) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void onAiFeatureTapped(User? user, Group? group) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return const Placeholder();
+ }
+}
+```
+
+
+
+***
+
+## Best Practices
+
+
+
+ Always remove event listeners in the `dispose()` method to prevent memory leaks:
+
+
+
+ ```dart
+ @override
+ void dispose() {
+ super.dispose();
+ CometChatMessageEvents.removeMessagesListener(listenerID);
+ }
+ ```
+
+
+
+
+
+ Use unique listener IDs for each widget to avoid conflicts:
+
+
+
+ ```dart
+ String listenerID = "message_list_${widget.key}";
+ ```
+
+
+
+
+
+ Keep event handlers lightweight and avoid heavy operations:
+
+
+
+ ```dart
+ @override
+ void ccMessageSent(BaseMessage message, MessageStatus messageStatus) {
+ if (messageStatus == MessageStatus.sent) {
+ // Update UI efficiently
+ setState(() {
+ // Minimal state update
+ });
+ }
+ }
+ ```
+
+
+
+
+
+***
+
+## Next Steps
+
+
+
+ Learn how to display and manage messages with events
+
+
+ Handle conversation events and updates
+
+
+ Manage group events and member actions
+
+
+ Explore available methods for UI Kit operations
+
+
+
+***
diff --git a/ui-kit/flutter/v5/extensions.mdx b/ui-kit/flutter/v5/extensions.mdx
new file mode 100644
index 000000000..7da0bd4e7
--- /dev/null
+++ b/ui-kit/flutter/v5/extensions.mdx
@@ -0,0 +1,255 @@
+---
+title: "Extensions"
+sidebarTitle: "Extensions"
+description: "Enhance your chat with built-in extensions including stickers, polls, collaborative tools, message translation, and link previews"
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_chat_uikit` |
+| Required setup | `CometChatUIKit.init(uiKitSettings: UIKitSettings)` then `CometChatUIKit.login(uid)` + Extensions enabled in [CometChat Dashboard](/fundamentals/extensions-overview) |
+| Extension categories | User Experience, User Engagement, Collaboration, Security |
+| Key components | `CometChatMessageComposer` → [Message Composer](/ui-kit/flutter/v5/message-composer) (Stickers, Polls, Whiteboard, Document), `CometChatMessageList` → [Message List](/ui-kit/flutter/v5/message-list) (Translation, Link Preview, Thumbnails) |
+| Activation | Enable each extension from the CometChat Dashboard — UI Kit auto-integrates them, no additional code required |
+
+
+
+CometChat's UI Kit comes with built-in support for a wide variety of extensions that provide additional functionality. These extensions enhance the chatting experience, making it more interactive, secure, and efficient.
+
+Activating any of the extensions in CometChat is a simple process done through your application's dashboard. Refer to our guide for detailed information on [Extensions](/fundamentals/extensions-overview).
+
+Once you have successfully enabled the desired extension in your dashboard, it will be reflected in your CometChat application upon initialization and successful login. The extension features will only be available if they are supported by CometChat UI Kit.
+
+***
+
+## Built-in Extensions
+
+The grouping below mirrors the CometChat Dashboard.
+
+### User Experience
+
+#### Link Preview
+
+The Link Preview extension provides a summary of the URL shared in the chat. It includes the title, a description, and a thumbnail image from the web page. For a comprehensive understanding and guide on implementing and using the Link Preview Extension, refer to our specific guide on the [Link Preview Extension](/fundamentals/link-preview).
+
+Once you have successfully activated the [Link Preview Extension](/fundamentals/link-preview) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Widget](/ui-kit/flutter/v5/message-list) widget of UI Kits.
+
+
+
+
+
+***
+
+#### Thumbnail Generation
+
+The Thumbnail Generation extension automatically creates a smaller preview image whenever a larger image is shared, helping to reduce the upload/download time and bandwidth usage. For a comprehensive understanding and guide on implementing and using the Thumbnail Generation Extension, refer to our specific guide on the [Thumbnail Generation Extension](/fundamentals/thumbnail-generation).
+
+Once you have successfully activated the [Thumbnail Generation Extension](/fundamentals/thumbnail-generation) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Widget](/ui-kit/flutter/v5/message-list) widget of UI Kits.
+
+
+
+
+
+***
+
+#### Bitly
+
+Shortens long URLs in text messages using Bitly. See [Bitly Extension](/fundamentals/bitly).
+
+***
+
+#### TinyURL
+
+URL shortening using TinyURL. See [TinyURL Extension](/fundamentals/tinyurl).
+
+***
+
+#### Message Shortcuts
+
+Sends predefined messages using short codes (e.g., `!hb` expands to `Happy birthday!`). See [Message Shortcuts Extension](/fundamentals/message-shortcuts).
+
+***
+
+#### Pin Message
+
+Pins important messages in a conversation for easy access. See [Pin Message Extension](/fundamentals/pin-message).
+
+***
+
+#### Save Message
+
+Bookmarks messages for later reference. Saved messages are private to the user. See [Save Message Extension](/fundamentals/save-message).
+
+***
+
+#### Rich Media Preview
+
+Generates rich preview panels for URLs using iFramely. See [Rich Media Preview Extension](/fundamentals/rich-media-preview).
+
+***
+
+#### Voice Transcription
+
+Converts audio messages to text. See [Voice Transcription Extension](/fundamentals/voice-transcription).
+
+***
+
+### User Engagement
+
+#### Stickers
+
+The Stickers extension allows users to express their emotions more creatively. It adds a much-needed fun element to the chat by allowing users to send various pre-designed stickers. For a comprehensive understanding and guide on implementing and using the Sticker Extension, refer to our specific guide on the [Sticker Extension](/fundamentals/stickers).
+
+Once you have successfully activated the [Sticker Extension](/fundamentals/stickers) from your CometChat Dashboard, the feature will automatically be incorporated into the [Message Composer](/ui-kit/flutter/v5/message-composer) widget of UI Kits.
+
+
+
+
+
+***
+
+#### Polls
+
+The Polls extension enhances group discussions by allowing users to create polls. Users can ask questions with a predefined list of answers, enabling a quick, organized way to gather group opinions. For a comprehensive understanding and guide on implementing and using the Polls Extension, refer to our specific guide on the [Polls Extension](/fundamentals/polls).
+
+Once you have successfully activated the [Polls Extension](/fundamentals/polls) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/flutter/v5/message-composer) widget of UI Kits.
+
+
+
+
+
+***
+
+#### Message Translation
+
+The Message Translation extension in CometChat is designed to translate any message into your local locale. It eliminates language barriers, making the chat more inclusive. For a comprehensive understanding and guide on implementing and using the Message Translation Extension, refer to our specific guide on the [Message Translation Extension](/fundamentals/message-translation).
+
+Once you have successfully activated the [Message Translation Extension](/fundamentals/message-translation) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of [MessageList Widget](/ui-kit/flutter/v5/message-list) widget of UI Kits.
+
+
+
+
+
+***
+
+#### Giphy
+
+Search and share GIFs from Giphy. See [Giphy Extension](/fundamentals/giphy).
+
+***
+
+#### Tenor
+
+Search and share GIFs from Tenor. See [Tenor Extension](/fundamentals/tenor).
+
+***
+
+#### Stipop
+
+Integrates Stipop's sticker library. See [Stipop Extension](/fundamentals/stickers-stipop).
+
+***
+
+#### Reminders
+
+Sets reminders for messages or creates personal reminders. A bot sends a notification when due. See [Reminders Extension](/fundamentals/reminders).
+
+***
+
+### Collaboration
+
+#### Collaborative Whiteboard
+
+The Collaborative Whiteboard extension facilitates real-time collaboration. Users can draw, brainstorm, and share ideas on a shared digital whiteboard. For a comprehensive understanding and guide on implementing and using the Collaborative Whiteboard Extension, refer to our specific guide on the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard).
+
+Once you have successfully activated the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/flutter/v5/message-composer) widget of UI Kits.
+
+
+
+
+
+***
+
+#### Collaborative Document
+
+With the Collaborative Document extension, users can work together on a shared document. This feature is essential for remote teams where document collaboration is a recurring requirement. For a comprehensive understanding and guide on implementing and using the Collaborative Document Extension, refer to our specific guide on the [Collaborative Document Extension](/fundamentals/collaborative-document).
+
+Once you have successfully activated the [Collaborative Document Extension](/fundamentals/collaborative-document) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/flutter/v5/message-composer) widget of UI Kits.
+
+
+
+
+
+***
+
+### Security
+
+#### Disappearing Messages
+
+Messages auto-delete after a specified interval. Works for 1:1 and group messages. See [Disappearing Messages Extension](/fundamentals/disappearing-messages).
+
+***
+
+### Customer Support
+
+#### Chatwoot
+
+Routes user messages to Chatwoot for customer support. See [Chatwoot Extension](/fundamentals/chatwoot).
+
+***
+
+#### Intercom
+
+Integrates Intercom for in-app customer support. See [Intercom Extension](/fundamentals/intercom).
+
+***
+
+### Smart Chat Features
+
+For AI-powered features like Conversation Starter, Smart Replies, and Conversation Summary, see [AI Features](/ui-kit/flutter/v5/ai-features).
+
+***
+
+## Enabling Extensions
+
+To enable extensions in your Flutter app, configure them during initialization:
+
+
+
+```dart
+UIKitSettings uiKitSettings = (UIKitSettingsBuilder()
+ ..appId = "YOUR_APP_ID"
+ ..region = "YOUR_REGION"
+ ..authKey = "YOUR_AUTH_KEY"
+ ..subscriptionType = CometChatSubscriptionType.allUsers
+ ..extensions = CometChatUIKitChatExtensions.getDefaultExtensions() // Enable all default extensions
+).build();
+
+await CometChatUIKit.init(uiKitSettings: uiKitSettings);
+```
+
+
+
+
+***
+
+## Next Steps
+
+
+
+ Learn how extensions integrate with the message composer
+
+
+ See how extensions enhance message display
+
+
+ Explore all available extensions in detail
+
+
+ Enable extensions from your CometChat Dashboard
+
+
+
+***
diff --git a/ui-kit/flutter/v5/flutter-conversation.mdx b/ui-kit/flutter/v5/flutter-conversation.mdx
new file mode 100644
index 000000000..9d71c3214
--- /dev/null
+++ b/ui-kit/flutter/v5/flutter-conversation.mdx
@@ -0,0 +1,149 @@
+---
+title: "Conversation List + Message View"
+sidebarTitle: "Conversation + Message"
+description: "Build a two-panel chat interface with conversation list and message view using Flutter UI Kit widgets."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_chat_uikit` |
+| Framework | Flutter |
+| Components | `CometChatConversations`, `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` |
+| Layout | Two-panel — conversation list + message view with Navigator push |
+| Prerequisite | Complete [Getting Started](/ui-kit/flutter/v5/getting-started) Steps 1–4 first |
+| Pattern | WhatsApp, Telegram, Slack |
+
+
+
+This guide builds a two-panel chat layout — conversation list that navigates to a message screen. Users tap a conversation to open it.
+
+This assumes you've already completed [Getting Started](/ui-kit/flutter/v5/getting-started) (project created, UI Kit installed, init + login working).
+
+
+
+
+
+[View Sample App on GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app)
+
+---
+
+## What You're Building
+
+Two screens working together:
+
+1. **Conversation list** — shows all active conversations (users and groups)
+2. **Message screen** — header + messages + composer for the selected conversation
+
+---
+
+## Step 1 — Create the Conversations Screen
+
+The `CometChatConversations` widget displays all conversations. Tapping one navigates to the message screen.
+
+```dart title="lib/conversations_page.dart"
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'messages_screen.dart';
+
+class ConversationsPage extends StatelessWidget {
+ const ConversationsPage({super.key});
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: SafeArea(
+ child: CometChatConversations(
+ onItemTap: (conversation) {
+ final target = conversation.conversationWith;
+ Navigator.push(
+ context,
+ MaterialPageRoute(
+ builder: (_) => MessagesScreen(
+ user: target is User ? target : null,
+ group: target is Group ? target : null,
+ ),
+ ),
+ );
+ },
+ ),
+ ),
+ );
+ }
+}
+```
+
+Key points:
+- `onItemTap` fires when a conversation is tapped, passing the `Conversation` object.
+- `conversationWith` returns either a `User` or `Group` — pass the correct one to the message screen.
+
+---
+
+## Step 2 — Create the Messages Screen
+
+The message screen combines header, message list, and composer.
+
+```dart title="lib/messages_screen.dart"
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+class MessagesScreen extends StatelessWidget {
+ final User? user;
+ final Group? group;
+
+ const MessagesScreen({super.key, this.user, this.group});
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ appBar: CometChatMessageHeader(user: user, group: group),
+ body: SafeArea(
+ child: Column(
+ children: [
+ Expanded(
+ child: CometChatMessageList(user: user, group: group),
+ ),
+ CometChatMessageComposer(user: user, group: group),
+ ],
+ ),
+ ),
+ );
+ }
+}
+```
+
+| Component | Purpose |
+| --- | --- |
+| `CometChatMessageHeader` | Shows conversation title, avatar, and call buttons |
+| `CometChatMessageList` | Displays messages with real-time updates |
+| `CometChatMessageComposer` | Input field for text, media, and attachments |
+
+---
+
+## Step 3 — Run the App
+
+```bash
+flutter run
+```
+
+You should see the conversation list. Tapping a conversation navigates to the message screen.
+
+---
+
+## Next Steps
+
+
+
+ Customize the conversation list
+
+
+ Customize the message view
+
+
+ Customize colors and styles
+
+
+ Handle real-time events
+
+
diff --git a/ui-kit/flutter/v5/flutter-one-to-one-chat.mdx b/ui-kit/flutter/v5/flutter-one-to-one-chat.mdx
new file mode 100644
index 000000000..008824683
--- /dev/null
+++ b/ui-kit/flutter/v5/flutter-one-to-one-chat.mdx
@@ -0,0 +1,166 @@
+---
+title: "One-to-One / Group Chat"
+sidebarTitle: "One-to-One / Group Chat"
+description: "Build a focused one-to-one or group chat experience in Flutter with CometChat UI Kit."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_chat_uikit` |
+| Framework | Flutter |
+| Components | `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` |
+| Layout | Single chat window — no conversation list |
+| Prerequisite | Complete [Getting Started](/ui-kit/flutter/v5/getting-started) Steps 1–4 first |
+| Pattern | Support chat, embedded widgets, focused messaging |
+
+
+
+This guide builds a single chat window — no conversation list. Users go directly into a one-to-one or group chat. Good for support chat, deep links, or focused messaging.
+
+This assumes you've already completed [Getting Started](/ui-kit/flutter/v5/getting-started) (project created, UI Kit installed, init + login working).
+
+
+
+
+
+[View Sample App on GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app)
+
+---
+
+## What You're Building
+
+Three components stacked vertically:
+
+1. **Chat header** — displays recipient name, avatar, and call buttons
+2. **Message list** — real-time chat history
+3. **Message composer** — text input with media and emojis
+
+---
+
+## Step 1 — Create the Chat Screen
+
+The app fetches a user on mount and renders the message components.
+
+```dart title="lib/chat_screen.dart"
+import 'dart:async';
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+class ChatScreen extends StatelessWidget {
+ const ChatScreen({super.key});
+
+ Future fetchUser(String uid) async {
+ final completer = Completer();
+ CometChat.getUser(
+ uid,
+ onSuccess: (user) => completer.complete(user),
+ onError: (error) => completer.completeError(error),
+ );
+ return completer.future;
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return FutureBuilder(
+ future: fetchUser("cometchat-uid-2"), // Replace with target UID
+ builder: (context, snapshot) {
+ if (snapshot.connectionState == ConnectionState.waiting) {
+ return const Scaffold(
+ body: Center(child: CircularProgressIndicator()),
+ );
+ }
+ if (snapshot.hasError) {
+ return Scaffold(
+ body: Center(child: Text('Error: ${snapshot.error}')),
+ );
+ }
+ final user = snapshot.data!;
+ return Scaffold(
+ appBar: CometChatMessageHeader(user: user),
+ body: SafeArea(
+ child: Column(
+ children: [
+ Expanded(child: CometChatMessageList(user: user)),
+ CometChatMessageComposer(user: user),
+ ],
+ ),
+ ),
+ );
+ },
+ );
+ }
+}
+```
+
+Key points:
+- `CometChat.getUser(uid)` fetches the user object — you need a real user object, not a manually constructed one.
+- Pass either `user` or `group` to the message components, never both.
+
+---
+
+## Switching to Group Chat
+
+To load a group chat instead, use `CometChat.getGroup()`:
+
+```dart
+Future fetchGroup(String guid) async {
+ final completer = Completer();
+ CometChat.getGroup(
+ guid,
+ onSuccess: (group) => completer.complete(group),
+ onError: (error) => completer.completeError(error),
+ );
+ return completer.future;
+}
+
+// Then in build():
+FutureBuilder(
+ future: fetchGroup("your-group-guid"),
+ builder: (context, snapshot) {
+ if (snapshot.hasData) {
+ final group = snapshot.data!;
+ return Scaffold(
+ appBar: CometChatMessageHeader(group: group),
+ body: Column(
+ children: [
+ Expanded(child: CometChatMessageList(group: group)),
+ CometChatMessageComposer(group: group),
+ ],
+ ),
+ );
+ }
+ return const CircularProgressIndicator();
+ },
+)
+```
+
+---
+
+## Step 2 — Run the App
+
+```bash
+flutter run
+```
+
+You should see the chat window load with the conversation for the UID you set.
+
+---
+
+## Next Steps
+
+
+
+ Customize the message view
+
+
+ Add a conversation list
+
+
+ Customize colors and styles
+
+
+ Handle real-time events
+
+
diff --git a/ui-kit/flutter/v5/flutter-tab-based-chat.mdx b/ui-kit/flutter/v5/flutter-tab-based-chat.mdx
new file mode 100644
index 000000000..38cc012b5
--- /dev/null
+++ b/ui-kit/flutter/v5/flutter-tab-based-chat.mdx
@@ -0,0 +1,204 @@
+---
+title: "Tab-Based Chat"
+sidebarTitle: "Tab-Based Chat"
+description: "Build a tab-based messaging UI with chats, calls, users, and groups in Flutter with CometChat UI Kit."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_chat_uikit` |
+| Framework | Flutter |
+| Components | `CometChatConversations`, `CometChatCallLogs`, `CometChatUsers`, `CometChatGroups`, `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` |
+| Layout | Bottom navigation tabs (Chats, Calls, Users, Groups) + message view |
+| Prerequisite | Complete [Getting Started](/ui-kit/flutter/v5/getting-started) Steps 1–4 first |
+| Pattern | Full-featured messaging app with multiple sections |
+
+
+
+This guide builds a tabbed messaging UI — Chats, Calls, Users, and Groups tabs with bottom navigation. Good for full-featured apps that need more than just conversations.
+
+This assumes you've already completed [Getting Started](/ui-kit/flutter/v5/getting-started) (project created, UI Kit installed, init + login working).
+
+
+
+
+
+[View Sample App on GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app)
+
+---
+
+## What You're Building
+
+Three sections working together:
+
+1. **Bottom navigation** — switches between Chats, Calls, Users, and Groups
+2. **Page view** — renders the list for the active tab
+3. **Message view** — header + messages + composer for the selected item
+
+---
+
+## Step 1 — Create the Tabs Screen
+
+The tabs screen uses `BottomNavigationBar` and `PageView` to create a tabbed interface.
+
+```dart title="lib/tabs_screen.dart"
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';
+import 'messages_screen.dart';
+
+class TabsScreen extends StatefulWidget {
+ const TabsScreen({super.key});
+
+ @override
+ State createState() => _TabsScreenState();
+}
+
+class _TabsScreenState extends State {
+ int _selectedIndex = 0;
+ final PageController _pageController = PageController();
+
+ void _onItemTapped(int index) {
+ setState(() => _selectedIndex = index);
+ _pageController.jumpToPage(index);
+ }
+
+ @override
+ void dispose() {
+ _pageController.dispose();
+ super.dispose();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: PageView(
+ controller: _pageController,
+ onPageChanged: (index) => setState(() => _selectedIndex = index),
+ children: [
+ CometChatConversations(
+ onItemTap: (conversation) {
+ final target = conversation.conversationWith;
+ Navigator.push(
+ context,
+ MaterialPageRoute(
+ builder: (_) => MessagesScreen(
+ user: target is User ? target : null,
+ group: target is Group ? target : null,
+ ),
+ ),
+ );
+ },
+ ),
+ CometChatCallLogs(),
+ CometChatUsers(
+ onItemTap: (user) => Navigator.push(
+ context,
+ MaterialPageRoute(builder: (_) => MessagesScreen(user: user)),
+ ),
+ ),
+ CometChatGroups(
+ onItemTap: (group) => Navigator.push(
+ context,
+ MaterialPageRoute(builder: (_) => MessagesScreen(group: group)),
+ ),
+ ),
+ ],
+ ),
+ bottomNavigationBar: BottomNavigationBar(
+ type: BottomNavigationBarType.fixed,
+ currentIndex: _selectedIndex,
+ onTap: _onItemTapped,
+ selectedItemColor: Colors.deepPurple,
+ unselectedItemColor: Colors.grey,
+ items: const [
+ BottomNavigationBarItem(icon: Icon(Icons.chat), label: "Chats"),
+ BottomNavigationBarItem(icon: Icon(Icons.call), label: "Calls"),
+ BottomNavigationBarItem(icon: Icon(Icons.person), label: "Users"),
+ BottomNavigationBarItem(icon: Icon(Icons.group), label: "Groups"),
+ ],
+ ),
+ );
+ }
+}
+```
+
+Key points:
+- `PageView` enables swipeable pages for each tab.
+- `BottomNavigationBar` provides quick access to different sections.
+- Each list component navigates to `MessagesScreen` on item tap.
+
+---
+
+## Step 2 — Create the Messages Screen
+
+Same as the [Conversation + Message](/ui-kit/flutter/v5/flutter-conversation) guide:
+
+```dart title="lib/messages_screen.dart"
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+class MessagesScreen extends StatelessWidget {
+ final User? user;
+ final Group? group;
+
+ const MessagesScreen({super.key, this.user, this.group});
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ appBar: CometChatMessageHeader(user: user, group: group),
+ body: SafeArea(
+ child: Column(
+ children: [
+ Expanded(child: CometChatMessageList(user: user, group: group)),
+ CometChatMessageComposer(user: user, group: group),
+ ],
+ ),
+ ),
+ );
+ }
+}
+```
+
+---
+
+## Step 3 — Run the App
+
+```bash
+flutter run
+```
+
+You should see the tab bar at the bottom. Switch between Chats, Calls, Users, and Groups — tapping any item opens the message view.
+
+---
+
+## Tab Descriptions
+
+| Tab | Component | Purpose |
+| --- | --- | --- |
+| Chats | `CometChatConversations` | Recent conversations with unread counts |
+| Calls | `CometChatCallLogs` | Call history (audio/video) |
+| Users | `CometChatUsers` | Browse and search all users |
+| Groups | `CometChatGroups` | Browse and join groups |
+
+---
+
+## Next Steps
+
+
+
+ Customize the conversation list
+
+
+ Configure call history
+
+
+ Manage user and group lists
+
+
+ Customize colors and styles
+
+
diff --git a/ui-kit/flutter/v5/getting-started.mdx b/ui-kit/flutter/v5/getting-started.mdx
new file mode 100644
index 000000000..96032dc2b
--- /dev/null
+++ b/ui-kit/flutter/v5/getting-started.mdx
@@ -0,0 +1,320 @@
+---
+title: "Getting Started"
+sidebarTitle: "Getting Started"
+description: "Add CometChat to a Flutter app in 5 steps: create project, install, init, login, render."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_chat_uikit` |
+| Init | `CometChatUIKit.init(uiKitSettings)` — must resolve before `login()` |
+| Login | `CometChatUIKit.login("UID")` — must resolve before rendering widgets |
+| Order | `init()` → `login()` → render. Breaking this order = blank screen |
+| Auth Key | Dev/testing only. Use Auth Token in production |
+| Calling | Optional. Install `cometchat_calls_uikit` to enable |
+| Platforms | iOS 13.0+, Android API 24+ (with calling) |
+| AI Skills | `npx @cometchat/skills add` — [GitHub](https://github.com/cometchat/cometchat-skills) |
+
+
+
+This guide walks you through adding CometChat to a Flutter app. By the end you'll have a working chat UI.
+
+
+
+
+
+---
+
+## Integrate with AI Coding Agents
+
+Skip the manual steps — use [CometChat Skills](https://github.com/cometchat/cometchat-skills) to integrate via your AI coding agent. Your agent has a short conversation with you to understand your project and chat requirements, then writes production-grade integration code tailored to the files you already have.
+
+```bash
+npx @cometchat/skills add
+```
+
+Use `--ide ` to target a specific IDE (e.g. `--ide cursor`), or `--ide all` for all supported IDEs.
+
+Then in your IDE:
+
+```
+/cometchat add chat to my app
+```
+
+The skill detects your Flutter project structure, navigation setup, 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 routes, screens, and widgets before proposing a placement (route, modal sheet, or tab), shows the plan, and waits for your approval before writing code. Credentials are saved as a Dart const file or via `--dart-define`.
+
+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).
+
+---
+
+## Prerequisites
+
+You need three things from the [CometChat Dashboard](https://app.cometchat.com/):
+
+| Credential | Where to find it |
+| --- | --- |
+| App ID | Dashboard → Your App → Credentials |
+| Auth Key | Dashboard → Your App → Credentials |
+| Region | Dashboard → Your App → Credentials (e.g. `us`, `eu`, `in`) |
+
+You also need Flutter 3.0+ installed with Android Studio or VS Code.
+
+
+Auth Key is for development only. In production, generate Auth Tokens server-side via the [REST API](/rest-api/chat-apis) and use `loginWithAuthToken()`. Never ship Auth Keys in client code.
+
+
+---
+
+## Step 1 — Create a Flutter Project
+
+```bash
+flutter create my_chat_app
+cd my_chat_app
+```
+
+---
+
+## Step 2 — Install the UI Kit
+
+Add to your `pubspec.yaml`:
+
+```yaml pubspec.yaml
+dependencies:
+ flutter:
+ sdk: flutter
+ cometchat_chat_uikit: ^5.2.14
+ cometchat_calls_uikit: ^5.0.15 # Optional: for voice/video calling
+```
+
+Then run:
+
+```bash
+flutter pub get
+```
+
+**Android Setup** — Add the following to `android/gradle.properties`:
+
+```properties gradle.properties
+android.enableJetifier=true
+```
+
+Then update `android/app/build.gradle`:
+
+```gradle build.gradle
+android {
+ defaultConfig {
+ minSdk = 24 // Required for calling
+ }
+}
+```
+
+**iOS Setup** — Update `ios/Podfile`:
+
+```ruby Podfile
+platform :ios, '13.0'
+```
+
+Then run:
+
+```bash
+cd ios && pod install && cd ..
+```
+
+---
+
+## Step 3 — Initialize CometChat
+
+Create a constants file and initialize the UI Kit before anything else.
+
+```dart title="lib/cometchat_config.dart"
+class CometChatConfig {
+ static const String appId = "APP_ID"; // Replace with your App ID
+ static const String region = "REGION"; // Replace with your Region
+ static const String authKey = "AUTH_KEY"; // Replace with your Auth Key (dev only)
+}
+```
+
+```dart title="lib/main.dart"
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart'; // Optional
+import 'cometchat_config.dart';
+
+void main() => runApp(const MyApp());
+
+class MyApp extends StatelessWidget {
+ const MyApp({super.key});
+
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: 'CometChat Demo',
+ home: const InitializerScreen(),
+ );
+ }
+}
+
+class InitializerScreen extends StatelessWidget {
+ const InitializerScreen({super.key});
+
+ Future _initCometChat() async {
+ final settings = (UIKitSettingsBuilder()
+ ..appId = CometChatConfig.appId
+ ..region = CometChatConfig.region
+ ..authKey = CometChatConfig.authKey
+ ..subscriptionType = CometChatSubscriptionType.allUsers
+ ..autoEstablishSocketConnection = true
+ ..extensions = CometChatUIKitChatExtensions.getDefaultExtensions()
+ ..callingExtension = CometChatCallingExtension() // Optional
+ ).build();
+
+ await CometChatUIKit.init(uiKitSettings: settings);
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return FutureBuilder(
+ future: _initCometChat(),
+ builder: (context, snapshot) {
+ if (snapshot.connectionState != ConnectionState.done) {
+ return const Scaffold(
+ body: Center(child: CircularProgressIndicator()),
+ );
+ }
+ if (snapshot.hasError) {
+ return Scaffold(
+ body: Center(child: Text('Init failed: ${snapshot.error}')),
+ );
+ }
+ return const LoginScreen();
+ },
+ );
+ }
+}
+```
+
+
+`init()` must resolve before you call `login()`. If you call `login()` before init completes, it will fail silently.
+
+
+---
+
+## Step 4 — Login
+
+After init resolves, log the user in. 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`
+
+```dart
+CometChatUIKit.login(
+ "cometchat-uid-1",
+ onSuccess: (user) {
+ debugPrint('Login successful: ${user.name}');
+ // Navigate to chat screen
+ },
+ onError: (error) {
+ debugPrint('Login failed: $error');
+ },
+);
+```
+
+Key points:
+- `getLoggedInUser()` checks for an existing session so you don't re-login unnecessarily.
+- Widgets must not render until login resolves — use a state flag to gate rendering.
+
+
+For production, use `loginWithAuthToken()` instead of Auth Key. Generate tokens server-side via the REST API.
+
+
+---
+
+## Step 5 — Choose a Chat Experience
+
+Integrate a conversation view that suits your app's UX. Each option below includes a step-by-step guide.
+
+### Conversation List + Message View
+
+Two-panel layout — conversation list with navigation to messages. Think WhatsApp or Telegram.
+
+- Stack-based navigation with `Navigator.push()`
+- Switch between one-to-one and group conversations
+- Real-time updates and message sync across sessions
+
+
+
+
+
+
+ Step-by-step guide to build this layout
+
+
+---
+
+### One-to-One / Group Chat
+
+Single chat window — no conversation list. Good for support chat, embedded widgets, or focused messaging.
+
+- Dedicated chat window for one-on-one or group messaging
+- No conversation list — users go directly into the chat
+- Ideal for support chat or contextual messaging
+
+
+
+
+
+
+ Step-by-step guide to build this layout
+
+
+---
+
+### Tab-Based Chat
+
+Tabbed navigation — Chat, Call Logs, Users, Groups in separate tabs. Good for full-featured apps.
+
+- `BottomNavigationBar` with independent screens
+- Unified experience for conversations, call history, and contacts
+- Scales well for adding future features
+
+
+
+
+
+
+ Step-by-step guide to build this layout
+
+
+---
+
+## Build Your Own Chat Experience
+
+Need full control over the UI? Use individual widgets, customize themes, and wire up your own layouts.
+
+- [Sample App](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) — Working reference app to compare against
+- [Components](/ui-kit/flutter/v5/components-overview) — All prebuilt UI widgets with props and customization options
+- [Core Features](/ui-kit/flutter/v5/core-features) — Messaging, real-time updates, and other capabilities
+- [Theming](/ui-kit/flutter/v5/theme-introduction) — Colors, fonts, dark mode, and custom styling
+- [Build Your Own UI](/sdk/flutter/overview) — Skip the UI Kit entirely and build on the raw SDK
+
+---
+
+## Next Steps
+
+
+
+ Browse all prebuilt UI widgets
+
+
+ Customize colors, fonts, and styles
+
+
+ Chat features included out of the box
+
+
+ Init, login, and other SDK methods
+
+
diff --git a/ui-kit/flutter/v5/group-members.mdx b/ui-kit/flutter/v5/group-members.mdx
new file mode 100644
index 000000000..7049d9533
--- /dev/null
+++ b/ui-kit/flutter/v5/group-members.mdx
@@ -0,0 +1,1105 @@
+---
+title: "Group Members"
+description: "Displays all members of a group in a searchable, scrollable list with member scope badges and management actions."
+---
+
+
+```json
+{
+ "component": "CometChatGroupMembers",
+ "package": "cometchat_chat_uikit",
+ "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
+ "description": "Displays all members of a group in a searchable, scrollable list with member scope badges and management actions.",
+ "primaryOutput": {
+ "prop": "onItemTap",
+ "type": "Function(GroupMember groupMember)?"
+ },
+ "props": {
+ "data": {
+ "group": {
+ "type": "Group",
+ "default": "required",
+ "note": "The group object to fetch members from"
+ },
+ "groupMembersRequestBuilder": {
+ "type": "GroupMembersRequestBuilder?",
+ "default": "null",
+ "note": "Custom request builder for filtering members"
+ },
+ "groupMembersProtocol": {
+ "type": "GroupMembersBuilderProtocol?",
+ "default": "null",
+ "note": "Custom protocol for fetching group members"
+ },
+ "searchKeyword": {
+ "type": "String?",
+ "default": "null",
+ "note": "Pre-fills search and filters list"
+ },
+ "controllerTag": {
+ "type": "String?",
+ "default": "null",
+ "note": "Tag for controller management"
+ }
+ },
+ "callbacks": {
+ "onItemTap": "Function(GroupMember groupMember)?",
+ "onItemLongPress": "Function(GroupMember groupMember)?",
+ "onSelection": "Function(List?)?",
+ "onBack": "VoidCallback?",
+ "onError": "OnError?",
+ "onLoad": "OnLoad?",
+ "onEmpty": "OnEmpty?",
+ "stateCallBack": "Function(CometChatGroupMembersController controller)?"
+ },
+ "visibility": {
+ "showBackButton": { "type": "bool", "default": true },
+ "hideSearch": { "type": "bool", "default": false },
+ "hideSeparator": { "type": "bool?", "default": null },
+ "hideError": { "type": "bool?", "default": null },
+ "hideAppbar": { "type": "bool?", "default": null },
+ "usersStatusVisibility": { "type": "bool?", "default": true },
+ "hideKickMemberOption": { "type": "bool?", "default": null },
+ "hideBanMemberOption": { "type": "bool?", "default": null },
+ "hideScopeChangeOption": { "type": "bool?", "default": null }
+ },
+ "selection": {
+ "selectionMode": {
+ "type": "SelectionMode?",
+ "values": ["SelectionMode.single", "SelectionMode.multiple", "SelectionMode.none"],
+ "default": "null"
+ },
+ "activateSelection": {
+ "type": "ActivateSelection?",
+ "values": ["ActivateSelection.onClick", "ActivateSelection.onLongClick"],
+ "default": "null"
+ }
+ },
+ "viewSlots": {
+ "listItemView": "Widget Function(GroupMember)?",
+ "leadingView": "Widget? Function(BuildContext, GroupMember)?",
+ "titleView": "Widget? Function(BuildContext, GroupMember)?",
+ "subtitleView": "Widget? Function(BuildContext, GroupMember)?",
+ "trailingView": "Function(BuildContext, GroupMember)?",
+ "loadingStateView": "WidgetBuilder?",
+ "emptyStateView": "WidgetBuilder?",
+ "errorStateView": "WidgetBuilder?",
+ "setOptions": "List? Function(Group, GroupMember, CometChatGroupMembersController, BuildContext)?",
+ "addOptions": "List? Function(Group, GroupMember, CometChatGroupMembersController, BuildContext)?",
+ "appBarOptions": "List?"
+ },
+ "icons": {
+ "backButton": { "type": "Widget?", "default": "built-in back arrow" },
+ "searchBoxIcon": { "type": "Widget?", "default": "built-in search icon" },
+ "submitIcon": { "type": "Widget?", "default": "built-in check icon" },
+ "selectIcon": { "type": "Widget?", "default": "built-in selection icon" }
+ },
+ "formatting": {
+ "searchPlaceholder": { "type": "String?", "default": "null" },
+ "height": { "type": "double?", "default": "null" },
+ "width": { "type": "double?", "default": "null" }
+ },
+ "style": {
+ "style": { "type": "CometChatGroupMembersStyle?", "default": "null" }
+ }
+ },
+ "events": [
+ { "name": "CometChatGroupEvents.ccGroupMemberScopeChanged", "payload": "Action, GroupMember, String newScope, String oldScope, Group", "description": "Member scope changed" },
+ { "name": "CometChatGroupEvents.ccGroupMemberBanned", "payload": "Action, GroupMember, User bannedBy, Group", "description": "Member banned from group" },
+ { "name": "CometChatGroupEvents.ccGroupMemberKicked", "payload": "Action, GroupMember, User kickedBy, Group", "description": "Member kicked from group" }
+ ],
+ "sdkListeners": [
+ "onGroupMemberScopeChanged",
+ "onGroupMemberKicked",
+ "onGroupMemberLeft",
+ "onGroupMemberBanned",
+ "onGroupMemberJoined",
+ "onMemberAddedToGroup",
+ "onUserOnline",
+ "onUserOffline"
+ ],
+ "compositionExample": {
+ "description": "Group member list wired to group details or member actions",
+ "components": [
+ "CometChatGroupMembers",
+ "CometChatGroups",
+ "CometChatMessages"
+ ],
+ "flow": "CometChatGroups emits Group -> pass to CometChatGroupMembers -> onItemTap emits GroupMember for actions"
+ },
+ "types": {
+ "GroupMember": {
+ "uid": "String",
+ "name": "String",
+ "avatar": "String?",
+ "scope": "String (owner/admin/moderator/participant)",
+ "joinedAt": "DateTime?"
+ },
+ "CometChatOption": {
+ "id": "String?",
+ "title": "String?",
+ "icon": "String?",
+ "iconWidget": "Widget?",
+ "onClick": "VoidCallback?"
+ },
+ "SelectionMode": {
+ "single": "SelectionMode.single",
+ "multiple": "SelectionMode.multiple",
+ "none": "SelectionMode.none"
+ }
+ }
+}
+```
+
+
+
+## Where It Fits
+
+`CometChatGroupMembers` displays all members of a group with their roles (owner, admin, moderator, participant). It provides member management actions like kick, ban, and scope change. Wire it to `CometChatGroups` to show members when a group is selected.
+
+
+
+```dart
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+class GroupMembersScreen extends StatelessWidget {
+ final Group group;
+
+ const GroupMembersScreen({super.key, required this.group});
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: SafeArea(
+ child: CometChatGroupMembers(
+ group: group,
+ onItemTap: (groupMember) {
+ // Handle member tap - show profile or actions
+ print("Tapped: ${groupMember.name}");
+ },
+ ),
+ ),
+ );
+ }
+}
+```
+
+
+
+
+
+
+
+The `CometChatGroupMembers` widget is composed of the following BaseWidgets:
+
+| Widgets | Description |
+| --- | --- |
+| [CometChatListBase](/ui-kit/flutter/v5/components-overview) | Container widget with title, search functionality, and background settings |
+| [CometChatListItem](/ui-kit/flutter/v5/components-overview) | Renders member information with title, subtitle, leading, and trailing widgets |
+
+---
+
+
+## Minimal Render
+
+
+
+```dart
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+class GroupMembersDemo extends StatelessWidget {
+ final Group group;
+
+ const GroupMembersDemo({super.key, required this.group});
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: SafeArea(
+ child: CometChatGroupMembers(
+ group: group,
+ ),
+ ),
+ );
+ }
+}
+```
+
+
+
+You can also launch it using `Navigator.push`:
+
+```dart
+Navigator.push(
+ context,
+ MaterialPageRoute(
+ builder: (context) => CometChatGroupMembers(
+ group: Group(guid: "group_id", name: "Group Name", type: GroupTypeConstants.public),
+ ),
+ ),
+);
+```
+
+---
+
+## Filtering Group Members
+
+Pass a `GroupMembersRequestBuilder` to `groupMembersRequestBuilder`. Pass the builder instance — not the result of `.build()`.
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ groupMembersRequestBuilder: GroupMembersRequestBuilder(group.guid)
+ ..limit = 10,
+)
+```
+
+
+
+### Filter Recipes
+
+| Recipe | Code |
+| --- | --- |
+| Limit to 10 per page | `GroupMembersRequestBuilder(guid)..limit = 10` |
+| Search by keyword | `GroupMembersRequestBuilder(guid)..searchKeyword = "john"` |
+| Filter by scopes | `GroupMembersRequestBuilder(guid)..scopes = ["admin", "moderator"]` |
+
+Default page size is 30. The component uses infinite scroll — the next page loads as the user scrolls to the bottom.
+
+
+### GroupMembersRequestBuilder Properties
+
+| Property | Description | Code |
+| --- | --- | --- |
+| `guid` | Group ID (required) | `GroupMembersRequestBuilder("group_id")` |
+| `limit` | Number of members to fetch per request | `..limit = 30` |
+| `searchKeyword` | Search members by name | `..searchKeyword = "John"` |
+| `scopes` | Filter by member scopes | `..scopes = ["admin"]` |
+| `build()` | Builds and returns a `GroupMembersRequest` object | `.build()` |
+
+### Custom Protocol Builder
+
+Use `GroupMembersBuilderProtocol` to customize both the initial list and search results:
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+class CustomProtocolBuilder extends GroupMembersBuilderProtocol {
+ const CustomProtocolBuilder(super.builder);
+
+ @override
+ GroupMembersRequest getRequest() {
+ return requestBuilder.build();
+ }
+
+ @override
+ GroupMembersRequest getSearchRequest(String val) {
+ requestBuilder.searchKeyword = val;
+ return requestBuilder.build();
+ }
+}
+
+// Usage
+CometChatGroupMembers(
+ group: group,
+ groupMembersProtocol: CustomProtocolBuilder(
+ GroupMembersRequestBuilder(group.guid)..scopes = ["admin", "moderator"],
+ ),
+)
+```
+
+
+
+---
+
+
+## Actions and Events
+
+### Callback Props
+
+#### onItemTap
+
+Fires when a member row is tapped. Use for showing member profile or custom actions.
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ onItemTap: (groupMember) {
+ print("Selected: ${groupMember.name}");
+ },
+)
+```
+
+
+
+#### onItemLongPress
+
+Fires when a member row is long-pressed. Useful for showing context menus.
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ onItemLongPress: (groupMember) {
+ // Show custom context menu
+ },
+)
+```
+
+
+
+#### onSelection
+
+Fires when members are selected in multi-select mode. Requires `selectionMode` to be set.
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ selectionMode: SelectionMode.multiple,
+ activateSelection: ActivateSelection.onClick,
+ onSelection: (selectedList) {
+ print("Selected ${selectedList?.length ?? 0} members");
+ },
+)
+```
+
+
+
+#### onError
+
+Fires on internal errors (network failure, auth issue, SDK exception).
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ onError: (error) {
+ print("CometChatGroupMembers error: $error");
+ },
+)
+```
+
+
+
+
+#### onBack
+
+Fires when the back button is pressed.
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ showBackButton: true,
+ onBack: () {
+ Navigator.pop(context);
+ },
+)
+```
+
+
+
+#### onLoad
+
+Fires when the member list is successfully loaded.
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ onLoad: (list) {
+ print("Loaded ${list.length} members");
+ },
+)
+```
+
+
+
+#### onEmpty
+
+Fires when the member list is empty.
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ onEmpty: () {
+ print("No members found");
+ },
+)
+```
+
+
+
+### Global UI Events
+
+`CometChatGroupEvents` emits events subscribable from anywhere in the application. Add a listener in `initState` and remove it in `dispose`.
+
+| Event | Fires when | Payload |
+| --- | --- | --- |
+| `ccGroupMemberScopeChanged` | A member's scope is changed | `Action, User, String scopeChangedTo, String scopeChangedFrom, Group` |
+| `ccGroupMemberBanned` | A member is banned | `Action, User, User bannedBy, Group` |
+| `ccGroupMemberKicked` | A member is kicked | `Action, User, User kickedBy, Group` |
+
+When to use: sync external UI with member changes. For example, update a member count badge when a member is kicked.
+
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:cometchat_sdk/models/action.dart' as cc;
+
+class _YourScreenState extends State with CometChatGroupEventListener {
+
+ @override
+ void initState() {
+ super.initState();
+ CometChatGroupEvents.addGroupsListener("listenerId", this);
+ }
+
+ @override
+ void dispose() {
+ CometChatGroupEvents.removeGroupsListener("listenerId");
+ super.dispose();
+ }
+
+ @override
+ void ccGroupMemberScopeChanged(cc.Action message, User updatedUser, String scopeChangedTo, String scopeChangedFrom, Group group) {
+ print("${updatedUser.name} scope changed to $scopeChangedTo");
+ }
+
+ @override
+ void ccGroupMemberBanned(cc.Action message, User bannedUser, User bannedBy, Group bannedFrom) {
+ print("${bannedUser.name} was banned from ${bannedFrom.name}");
+ }
+
+ @override
+ void ccGroupMemberKicked(cc.Action message, User kickedUser, User kickedBy, Group kickedFrom) {
+ print("${kickedUser.name} was kicked from ${kickedFrom.name}");
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return const Placeholder();
+ }
+}
+```
+
+
+
+### SDK Events (Real-Time, Automatic)
+
+The component listens to these SDK events internally. No manual attachment needed unless additional side effects are required.
+
+| SDK Listener | Internal behavior |
+| --- | --- |
+| `onGroupMemberScopeChanged` | Updates member scope badge |
+| `onGroupMemberKicked` | Removes member from list |
+| `onGroupMemberLeft` | Removes member from list |
+| `onGroupMemberBanned` | Removes member from list |
+| `onGroupMemberJoined` | Adds new member to list |
+| `onMemberAddedToGroup` | Adds new member to list |
+| `onUserOnline` | Updates online status indicator |
+| `onUserOffline` | Updates offline status indicator |
+
+---
+
+
+## Custom View Slots
+
+Each slot replaces a section of the default UI. Slots that accept a member parameter receive the `GroupMember` object for that row.
+
+| Slot | Signature | Replaces |
+| --- | --- | --- |
+| `listItemView` | `Widget Function(GroupMember)` | Entire list item row |
+| `leadingView` | `Widget? Function(BuildContext, GroupMember)` | Avatar / left section |
+| `titleView` | `Widget? Function(BuildContext, GroupMember)` | Member name |
+| `subtitleView` | `Widget? Function(BuildContext, GroupMember)` | Secondary text |
+| `trailingView` | `Function(BuildContext, GroupMember)` | Scope badge / right section |
+| `loadingStateView` | `WidgetBuilder` | Loading spinner |
+| `emptyStateView` | `WidgetBuilder` | Empty state |
+| `errorStateView` | `WidgetBuilder` | Error state |
+| `setOptions` | `List? Function(Group, GroupMember, Controller, BuildContext)` | Context menu actions (replaces default) |
+| `addOptions` | `List? Function(Group, GroupMember, Controller, BuildContext)` | Context menu actions (adds to default) |
+| `appBarOptions` | `List` | App bar action widgets |
+
+### listItemView
+
+Replace the entire list item row.
+
+
+
+
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ listItemView: (groupMember) {
+ return ListTile(
+ leading: CometChatAvatar(
+ image: groupMember.avatar,
+ name: groupMember.name,
+ ),
+ title: Text(groupMember.name ?? ''),
+ subtitle: Text(groupMember.scope ?? 'participant'),
+ trailing: Icon(Icons.chevron_right),
+ );
+ },
+)
+```
+
+
+
+
+### leadingView
+
+Replace the avatar / left section. Online status indicator example.
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ leadingView: (context, groupMember) {
+ return Stack(
+ children: [
+ CometChatAvatar(
+ image: groupMember.avatar,
+ name: groupMember.name,
+ style: CometChatAvatarStyle(borderRadius: BorderRadius.circular(20)),
+ ),
+ Positioned(
+ bottom: 0,
+ right: 0,
+ child: Container(
+ width: 12,
+ height: 12,
+ decoration: BoxDecoration(
+ color: groupMember.status == "online" ? Color(0xFF09C26F) : Colors.grey,
+ shape: BoxShape.circle,
+ border: Border.all(color: Colors.white, width: 2),
+ ),
+ ),
+ ),
+ ],
+ );
+ },
+)
+```
+
+
+
+### titleView
+
+Replace the member name. Role badge inline example.
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ titleView: (context, groupMember) {
+ return Row(
+ children: [
+ Text(
+ groupMember.name ?? '',
+ style: TextStyle(fontWeight: FontWeight.w500, fontSize: 16),
+ ),
+ if (groupMember.scope == GroupMemberScope.owner) ...[
+ SizedBox(width: 4),
+ Icon(Icons.star, size: 16, color: Color(0xFFF76808)),
+ ],
+ ],
+ );
+ },
+)
+```
+
+
+
+
+### subtitleView
+
+Replace the secondary text. Join date example.
+
+
+
+
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ subtitleView: (context, groupMember) {
+ final dateTime = groupMember.joinedAt ?? DateTime.now();
+ return Text(
+ "Joined ${DateFormat('dd/MM/yyyy').format(dateTime)}",
+ style: TextStyle(color: Color(0xFF727272), fontSize: 14),
+ );
+ },
+)
+```
+
+
+
+### trailingView
+
+Replace the scope badge / right section. Custom scope badge example.
+
+
+
+
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ trailingView: (context, groupMember) {
+ Color backgroundColor = Color(0xFFEDEAFA);
+ Color textColor = Color(0xFF6852D6);
+ String scope = groupMember.scope ?? GroupMemberScope.participant;
+
+ if (groupMember.uid == group.owner) {
+ scope = GroupMemberScope.owner;
+ backgroundColor = Color(0xFF6852D6);
+ textColor = Colors.white;
+ }
+
+ return Container(
+ padding: EdgeInsets.symmetric(horizontal: 12, vertical: 4),
+ decoration: BoxDecoration(
+ color: backgroundColor,
+ borderRadius: BorderRadius.circular(1000),
+ ),
+ child: Text(
+ scope.capitalizeFirst ?? "",
+ style: TextStyle(color: textColor, fontSize: 12, fontWeight: FontWeight.w400),
+ ),
+ );
+ },
+)
+```
+
+
+
+
+### setOptions
+
+Replace the context menu / long-press actions on each member item.
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ setOptions: (group, groupMember, controller, context) {
+ return [
+ CometChatOption(
+ id: "view_profile",
+ title: "View Profile",
+ iconWidget: Icon(Icons.person_outline),
+ onClick: () {
+ // Navigate to member profile
+ },
+ ),
+ CometChatOption(
+ id: "message",
+ title: "Send Message",
+ iconWidget: Icon(Icons.message_outlined),
+ onClick: () {
+ // Start direct message
+ },
+ ),
+ ];
+ },
+)
+```
+
+
+
+### addOptions
+
+Add to the existing context menu actions without removing defaults.
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ addOptions: (group, groupMember, controller, context) {
+ return [
+ CometChatOption(
+ id: "report",
+ title: "Report User",
+ iconWidget: Icon(Icons.flag_outlined),
+ onClick: () {
+ // Report user logic
+ },
+ ),
+ ];
+ },
+)
+```
+
+
+
+### appBarOptions
+
+Add custom widgets to the app bar.
+
+
+
+
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ appBarOptions: [
+ IconButton(
+ onPressed: () {
+ // Navigate to add members
+ },
+ icon: Icon(Icons.person_add_alt_1, color: Color(0xFF6852D6)),
+ ),
+ ],
+)
+```
+
+
+
+
+### loadingStateView
+
+Custom view displayed while members are being fetched.
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ loadingStateView: (context) {
+ return Center(
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ CircularProgressIndicator(),
+ SizedBox(height: 16),
+ Text("Loading members..."),
+ ],
+ ),
+ );
+ },
+)
+```
+
+
+
+### emptyStateView
+
+Custom view displayed when no members are found.
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ emptyStateView: (context) {
+ return Center(
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ Icon(Icons.people_outline, size: 64, color: Color(0xFF727272)),
+ SizedBox(height: 16),
+ Text("No members found"),
+ ],
+ ),
+ );
+ },
+)
+```
+
+
+
+### errorStateView
+
+Custom view displayed when an error occurs.
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ errorStateView: (context) {
+ return Center(
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ Icon(Icons.error_outline, size: 64, color: Colors.red),
+ SizedBox(height: 16),
+ Text("Failed to load members"),
+ ElevatedButton(
+ onPressed: () {
+ // Retry logic
+ },
+ child: Text("Retry"),
+ ),
+ ],
+ ),
+ );
+ },
+)
+```
+
+
+
+---
+
+
+## Styling
+
+Set `CometChatGroupMembersStyle` to customize the appearance.
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ style: CometChatGroupMembersStyle(
+ titleStyle: TextStyle(color: Color(0xFFF76808)),
+ separatorColor: Color(0xFFF76808),
+ ownerMemberScopeBackgroundColor: Color(0xFFF76808),
+ adminMemberScopeBackgroundColor: Color(0xFFFEEDE1),
+ adminMemberScopeBorder: Border.all(color: Color(0xFFF76808)),
+ adminMemberScopeTextColor: Color(0xFFF76808),
+ moderatorMemberScopeBackgroundColor: Color(0xFFFEEDE1),
+ moderatorMemberScopeTextColor: Color(0xFFF76808),
+ backIconColor: Color(0xFFF76808),
+ ),
+)
+```
+
+
+
+
+
+
+
+### Style Properties
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `backgroundColor` | `Color?` | Background color of the component |
+| `border` | `BoxBorder?` | Border for the widget |
+| `borderRadius` | `BorderRadiusGeometry?` | Border radius for the widget |
+| `titleStyle` | `TextStyle?` | Style for the header title |
+| `backIconColor` | `Color?` | Back button icon color |
+| `searchBackground` | `Color?` | Background color of search box |
+| `searchBorderRadius` | `BorderRadius?` | Border radius for search box |
+| `searchTextStyle` | `TextStyle?` | Style for search input text |
+| `searchPlaceholderStyle` | `TextStyle?` | Style for search placeholder |
+| `searchIconColor` | `Color?` | Search icon color |
+| `loadingIconColor` | `Color?` | Loading indicator color |
+| `emptyStateTextStyle` | `TextStyle?` | Style for empty state title |
+| `emptyStateTextColor` | `Color?` | Color for empty state title text |
+| `emptyStateSubtitleTextStyle` | `TextStyle?` | Style for empty state subtitle |
+| `emptyStateSubtitleTextColor` | `Color?` | Color for empty state subtitle text |
+| `errorStateTextStyle` | `TextStyle?` | Style for error state title |
+| `errorStateSubtitleStyle` | `TextStyle?` | Style for error state subtitle |
+| `onlineStatusColor` | `Color?` | Online status indicator color |
+| `separatorColor` | `Color?` | Color of list item separators |
+| `separatorHeight` | `double?` | Height of list item separators |
+| `listPadding` | `EdgeInsetsGeometry?` | Padding for the list |
+| `ownerMemberScopeBackgroundColor` | `Color?` | Background color for owner scope badge |
+| `ownerMemberScopeTextColor` | `Color?` | Text color for owner scope badge |
+| `ownerMemberScopeBorder` | `BoxBorder?` | Border for owner scope badge |
+| `ownerMemberScopeTextStyle` | `TextStyle?` | Text style for owner scope badge |
+| `adminMemberScopeBackgroundColor` | `Color?` | Background color for admin scope badge |
+| `adminMemberScopeTextColor` | `Color?` | Text color for admin scope badge |
+| `adminMemberScopeBorder` | `BoxBorder?` | Border for admin scope badge |
+| `adminMemberScopeTextStyle` | `TextStyle?` | Text style for admin scope badge |
+| `moderatorMemberScopeBackgroundColor` | `Color?` | Background color for moderator scope badge |
+| `moderatorMemberScopeTextColor` | `Color?` | Text color for moderator scope badge |
+| `moderatorMemberScopeBorder` | `BoxBorder?` | Border for moderator scope badge |
+| `moderatorMemberScopeTextStyle` | `TextStyle?` | Text style for moderator scope badge |
+| `checkboxCheckedBackgroundColor` | `Color?` | Background color for checked checkbox |
+| `checkboxBackgroundColor` | `Color?` | Background color for unchecked checkbox |
+| `checkboxSelectedIconColor` | `Color?` | Color for checkbox icon when selected |
+| `checkboxBorder` | `BorderSide?` | Border for checkbox |
+| `checkboxBorderRadius` | `BorderRadiusGeometry?` | Border radius for checkbox |
+| `listItemSelectedBackgroundColor` | `Color?` | Background color for selected list item |
+| `submitIconColor` | `Color?` | Color for submit icon |
+| `retryButtonBackgroundColor` | `Color?` | Background color for retry button |
+| `retryButtonTextColor` | `Color?` | Text color for retry button |
+| `retryButtonTextStyle` | `TextStyle?` | Text style for retry button |
+| `retryButtonBorder` | `BorderSide?` | Border for retry button |
+| `retryButtonBorderRadius` | `BorderRadiusGeometry?` | Border radius for retry button |
+| `avatarStyle` | `CometChatAvatarStyle?` | Style for member avatars |
+| `statusIndicatorStyle` | `CometChatStatusIndicatorStyle?` | Style for status indicators |
+| `listItemStyle` | `ListItemStyle?` | Style for list items |
+| `confirmDialogStyle` | `CometChatConfirmDialogStyle?` | Style for confirmation dialogs |
+| `changeScopeStyle` | `CometChatChangeScopeStyle?` | Style for change scope dialog |
+| `optionsBackgroundColor` | `Color?` | Background color for options menu |
+| `optionsIconColor` | `Color?` | Color for options icon |
+| `optionsTextStyle` | `TextStyle?` | Text style for options |
+
+---
+
+
+## Common Patterns
+
+### Hide member management options
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ hideKickMemberOption: true,
+ hideBanMemberOption: true,
+ hideScopeChangeOption: true,
+)
+```
+
+
+
+### Multi-select with selection callback
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ selectionMode: SelectionMode.multiple,
+ activateSelection: ActivateSelection.onClick,
+ onSelection: (selectedMembers) {
+ if (selectedMembers != null && selectedMembers.isNotEmpty) {
+ print("Selected ${selectedMembers.length} members");
+ // Perform batch action on selected members
+ }
+ },
+)
+```
+
+
+
+### Hide all chrome — minimal list
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ hideSearch: true,
+ hideAppbar: true,
+ hideSeparator: true,
+)
+```
+
+
+
+### Filter admins and moderators only
+
+
+
+```dart
+CometChatGroupMembers(
+ group: group,
+ groupMembersRequestBuilder: GroupMembersRequestBuilder(group.guid)
+ ..scopes = [GroupMemberScope.admin, GroupMemberScope.moderator],
+)
+```
+
+
+
+---
+
+
+## Props Reference
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `group` | `Group` | **required** | The group object to fetch members from |
+| `groupMembersProtocol` | `GroupMembersBuilderProtocol?` | `null` | Custom request builder protocol |
+| `groupMembersRequestBuilder` | `GroupMembersRequestBuilder?` | `null` | Custom request builder for filtering members |
+| `searchKeyword` | `String?` | `null` | Pre-fills search and filters list |
+| `controllerTag` | `String?` | `null` | Tag for controller management |
+| `onSelection` | `Function(List?)?` | `null` | Callback when members are selected |
+| `onItemTap` | `Function(GroupMember)?` | `null` | Callback on tapping a member item |
+| `onItemLongPress` | `Function(GroupMember)?` | `null` | Callback on long pressing a member item |
+| `onBack` | `VoidCallback?` | `null` | Callback on closing this screen |
+| `onError` | `OnError?` | `null` | Callback in case any error occurs |
+| `onLoad` | `OnLoad?` | `null` | Callback when list is fetched and loaded |
+| `onEmpty` | `OnEmpty?` | `null` | Callback when the list is empty |
+| `stateCallBack` | `Function(CometChatGroupMembersController)?` | `null` | Access controller functions from parent |
+| `showBackButton` | `bool` | `true` | Show/hide back button |
+| `hideSearch` | `bool` | `false` | Show/hide search input |
+| `hideSeparator` | `bool?` | `null` | Toggle visibility of separator |
+| `hideError` | `bool?` | `null` | Toggle visibility of error dialog |
+| `hideAppbar` | `bool?` | `null` | Hides the appbar |
+| `usersStatusVisibility` | `bool?` | `true` | Hide status indicator on avatar |
+| `hideKickMemberOption` | `bool?` | `null` | Hide kick member option |
+| `hideBanMemberOption` | `bool?` | `null` | Hide ban member option |
+| `hideScopeChangeOption` | `bool?` | `null` | Hide scope change option |
+| `selectionMode` | `SelectionMode?` | `null` | Selection mode (single/multiple/none) |
+| `activateSelection` | `ActivateSelection?` | `null` | When to activate selection |
+| `subtitleView` | `Widget? Function(BuildContext, GroupMember)?` | `null` | Custom subtitle for each member |
+| `listItemView` | `Widget Function(GroupMember)?` | `null` | Custom view for each member |
+| `trailingView` | `Function(BuildContext, GroupMember)?` | `null` | Custom trailing widget |
+| `leadingView` | `Widget? Function(BuildContext, GroupMember)?` | `null` | Custom leading view |
+| `titleView` | `Widget? Function(BuildContext, GroupMember)?` | `null` | Custom title view |
+| `loadingStateView` | `WidgetBuilder?` | `null` | View for loading state |
+| `emptyStateView` | `WidgetBuilder?` | `null` | View for empty state |
+| `errorStateView` | `WidgetBuilder?` | `null` | View for error state |
+| `backButton` | `Widget?` | `null` | Custom back button widget |
+| `searchBoxIcon` | `Widget?` | `null` | Custom search icon |
+| `selectIcon` | `Widget?` | `null` | Custom selection icon |
+| `submitIcon` | `Widget?` | `null` | Custom selection complete icon |
+| `appBarOptions` | `List?` | `null` | App bar options |
+| `options` | `List? Function(...)?` | `null` | Options visible at slide of each member |
+| `setOptions` | `List? Function(...)?` | `null` | Replace default long press actions |
+| `addOptions` | `List? Function(...)?` | `null` | Add to default long press actions |
+| `searchPlaceholder` | `String?` | `null` | Placeholder text of search input |
+| `height` | `double?` | `null` | Height of the widget |
+| `width` | `double?` | `null` | Width of the widget |
+| `style` | `CometChatGroupMembersStyle?` | `null` | Style for the component |
+| `controller` | `ScrollController?` | `null` | Scroll controller for the list |
+
+---
+
+
+
+
+ Display and manage available groups
+
+
+ Add new members to a group
+
+
+ View and manage banned members
+
+
+ Learn how to customize the look and feel
+
+
\ No newline at end of file
diff --git a/ui-kit/flutter/v5/groups.mdx b/ui-kit/flutter/v5/groups.mdx
new file mode 100644
index 000000000..9a2a9c1c9
--- /dev/null
+++ b/ui-kit/flutter/v5/groups.mdx
@@ -0,0 +1,1497 @@
+---
+title: "Groups"
+description: "Searchable, scrollable list of all available groups with icon, name, member count, and group type indicator."
+---
+
+
+```json
+{
+ "component": "CometChatGroups",
+ "package": "cometchat_chat_uikit",
+ "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
+ "description": "Searchable, scrollable list of all available groups with icon, name, member count, and group type indicator.",
+ "primaryOutput": {
+ "prop": "onItemTap",
+ "type": "Function(BuildContext context, Group group)?"
+ },
+ "props": {
+ "data": {
+ "groupsRequestBuilder": {
+ "type": "GroupsRequestBuilder?",
+ "default": "SDK default (30 per page)",
+ "note": "Pass the builder, not the result of .build()"
+ },
+ "groupsProtocol": {
+ "type": "GroupsBuilderProtocol?",
+ "default": "null",
+ "note": "Custom protocol for fetching groups"
+ },
+ "scrollController": {
+ "type": "ScrollController?",
+ "default": "null",
+ "note": "Custom scroll controller for the list"
+ },
+ "title": {
+ "type": "String?",
+ "default": "Groups",
+ "note": "Title text for the app bar"
+ },
+ "controllerTag": {
+ "type": "String?",
+ "default": "null",
+ "note": "Tag for controller management"
+ },
+ "searchPlaceholder": {
+ "type": "String?",
+ "default": "null",
+ "note": "Placeholder text for search input"
+ },
+ "searchKeyword": {
+ "type": "String?",
+ "default": "null",
+ "note": "Pre-fills search and filters list"
+ },
+ "height": {
+ "type": "double?",
+ "default": "null"
+ },
+ "width": {
+ "type": "double?",
+ "default": "null"
+ }
+ },
+ "callbacks": {
+ "onItemTap": "Function(BuildContext context, Group group)?",
+ "onItemLongPress": "Function(BuildContext context, Group group)?",
+ "onSelection": "Function(List?)?",
+ "onBack": "VoidCallback?",
+ "onError": "OnError?",
+ "onLoad": "OnLoad?",
+ "onEmpty": "OnEmpty?",
+ "stateCallBack": "Function(CometChatGroupsController controller)?"
+ },
+ "visibility": {
+ "groupTypeVisibility": { "type": "bool?", "default": true },
+ "hideAppbar": { "type": "bool?", "default": false },
+ "hideError": { "type": "bool?", "default": false },
+ "hideSearch": { "type": "bool", "default": false },
+ "showBackButton": { "type": "bool", "default": true }
+ },
+ "selection": {
+ "selectionMode": {
+ "type": "SelectionMode?",
+ "values": ["SelectionMode.single", "SelectionMode.multiple", "SelectionMode.none"],
+ "default": "null"
+ },
+ "activateSelection": {
+ "type": "ActivateSelection?",
+ "values": ["ActivateSelection.onClick", "ActivateSelection.onLongClick"],
+ "default": "null"
+ }
+ },
+ "viewSlots": {
+ "listItemView": "Widget Function(Group group)?",
+ "leadingView": "Widget? Function(BuildContext context, Group group)?",
+ "titleView": "Widget? Function(BuildContext context, Group group)?",
+ "subtitleView": "Widget? Function(BuildContext context, Group group)?",
+ "trailingView": "Widget? Function(BuildContext context, Group group)?",
+ "loadingStateView": "WidgetBuilder?",
+ "emptyStateView": "WidgetBuilder?",
+ "errorStateView": "WidgetBuilder?",
+ "setOptions": "List? Function(Group, CometChatGroupsController, BuildContext)?",
+ "addOptions": "List? Function(Group, CometChatGroupsController, BuildContext)?",
+ "appBarOptions": "List Function(BuildContext context)?"
+ },
+ "icons": {
+ "backButton": { "type": "Widget?", "default": "built-in back arrow" },
+ "searchBoxIcon": { "type": "Widget?", "default": "built-in search icon" },
+ "submitIcon": { "type": "Widget?", "default": "built-in check icon" },
+ "passwordGroupIcon": { "type": "Widget?", "default": "built-in lock icon" },
+ "privateGroupIcon": { "type": "Widget?", "default": "built-in shield icon" }
+ },
+ "style": {
+ "groupsStyle": { "type": "CometChatGroupsStyle?", "default": "null" }
+ }
+ },
+ "events": [
+ { "name": "CometChatGroupEvents.ccGroupCreated", "payload": "Group", "description": "Group created" },
+ { "name": "CometChatGroupEvents.ccGroupDeleted", "payload": "Group", "description": "Group deleted" },
+ { "name": "CometChatGroupEvents.ccGroupLeft", "payload": "Action, User, Group", "description": "User left group" },
+ { "name": "CometChatGroupEvents.ccGroupMemberJoined", "payload": "User, Group", "description": "User joined group" },
+ { "name": "CometChatGroupEvents.ccGroupMemberAdded", "payload": "List, List, Group, User", "description": "Members added" },
+ { "name": "CometChatGroupEvents.ccGroupMemberKicked", "payload": "Action, User, User, Group", "description": "Member kicked" },
+ { "name": "CometChatGroupEvents.ccGroupMemberBanned", "payload": "Action, User, User, Group", "description": "Member banned" },
+ { "name": "CometChatGroupEvents.ccGroupMemberUnbanned", "payload": "Action, User, User, Group", "description": "Member unbanned" },
+ { "name": "CometChatGroupEvents.ccGroupMemberScopeChanged", "payload": "Action, User, String, String, Group", "description": "Member scope changed" },
+ { "name": "CometChatGroupEvents.ccOwnershipChanged", "payload": "Group, GroupMember", "description": "Ownership transferred" }
+ ],
+ "sdkListeners": [
+ "onGroupMemberJoined",
+ "onGroupMemberLeft",
+ "onMemberAddedToGroup",
+ "onGroupMemberKicked",
+ "onGroupMemberBanned",
+ "onGroupMemberScopeChanged",
+ "onConnected"
+ ],
+ "compositionExample": {
+ "description": "Group directory wired to message view",
+ "components": [
+ "CometChatGroups",
+ "CometChatMessages",
+ "CometChatMessageHeader",
+ "CometChatMessageList",
+ "CometChatMessageComposer"
+ ],
+ "flow": "onItemTap emits Group -> pass to CometChatMessages or individual message components"
+ },
+ "types": {
+ "CometChatOption": {
+ "id": "String?",
+ "title": "String?",
+ "icon": "String?",
+ "iconWidget": "Widget?",
+ "onClick": "VoidCallback?"
+ },
+ "SelectionMode": {
+ "single": "SelectionMode.single",
+ "multiple": "SelectionMode.multiple",
+ "none": "SelectionMode.none"
+ },
+ "ActivateSelection": {
+ "onClick": "ActivateSelection.onClick",
+ "onLongClick": "ActivateSelection.onLongClick"
+ }
+ }
+}
+```
+
+
+
+## Where It Fits
+
+`CometChatGroups` is a directory list widget. It renders available groups and emits the selected `Group` via `onItemTap`. Wire it to `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer` to build a group chat layout.
+
+
+
+```dart
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+class GroupChatApp extends StatefulWidget {
+ const GroupChatApp({super.key});
+
+ @override
+ State createState() => _GroupChatAppState();
+}
+
+class _GroupChatAppState extends State {
+ Group? selectedGroup;
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: Row(
+ children: [
+ SizedBox(
+ width: 400,
+ child: CometChatGroups(
+ onItemTap: (context, group) {
+ setState(() {
+ selectedGroup = group;
+ });
+ },
+ ),
+ ),
+ Expanded(
+ child: selectedGroup != null
+ ? CometChatMessages(group: selectedGroup)
+ : const Center(child: Text('Select a group')),
+ ),
+ ],
+ ),
+ );
+ }
+}
+```
+
+
+
+
+
+
+
+---
+
+
+## Minimal Render
+
+
+
+```dart
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+class GroupsDemo extends StatelessWidget {
+ const GroupsDemo({super.key});
+
+ @override
+ Widget build(BuildContext context) {
+ return const Scaffold(
+ body: SafeArea(
+ child: CometChatGroups(),
+ ),
+ );
+ }
+}
+```
+
+
+
+You can also launch it using `Navigator.push`:
+
+```dart
+Navigator.push(
+ context,
+ MaterialPageRoute(builder: (context) => const CometChatGroups())
+);
+```
+
+---
+
+## Filtering Groups
+
+Pass a `GroupsRequestBuilder` to `groupsRequestBuilder`. Pass the builder instance — not the result of `.build()`.
+
+
+
+```dart
+CometChatGroups(
+ groupsRequestBuilder: GroupsRequestBuilder()
+ ..joinedOnly = true
+ ..limit = 10,
+)
+```
+
+
+
+### Filter Recipes
+
+| Recipe | Code |
+| --- | --- |
+| Joined groups only | `GroupsRequestBuilder()..joinedOnly = true` |
+| Limit to 10 per page | `GroupsRequestBuilder()..limit = 10` |
+| Search by keyword | `GroupsRequestBuilder()..searchKeyword = "design"` |
+| Filter by tags | `GroupsRequestBuilder()..tags = ["vip"]` |
+| With tags data | `GroupsRequestBuilder()..withTags = true` |
+
+Default page size is 30. The component uses infinite scroll — the next page loads as the user scrolls to the bottom.
+
+
+### GroupsRequestBuilder Properties
+
+| Property | Description | Code |
+| --- | --- | --- |
+| `limit` | Number of groups to fetch per request. | `..limit = 30` |
+| `searchKeyword` | Search groups by name. | `..searchKeyword = "Team"` |
+| `joinedOnly` | Fetch only joined groups. Default `false`. | `..joinedOnly = true` |
+| `tags` | Filter groups by specific tags. | `..tags = ["vip"]` |
+| `withTags` | Include tags in the Group object. Default `false`. | `..withTags = true` |
+| `build()` | Builds and returns a `GroupsRequest` object. | `.build()` |
+
+Refer to [GroupsRequestBuilder](/sdk/flutter/retrieve-groups) for the full builder API.
+
+---
+
+## Actions and Events
+
+### Callback Props
+
+#### onItemTap
+
+Fires when a group row is tapped. Primary navigation hook — set the active group and render the message view.
+
+
+
+```dart
+CometChatGroups(
+ onItemTap: (context, group) {
+ print("Selected: ${group.name}");
+ },
+)
+```
+
+
+
+#### onItemLongPress
+
+Fires when a group row is long-pressed. Useful for showing context menus or custom actions.
+
+
+
+```dart
+CometChatGroups(
+ onItemLongPress: (context, group) {
+ // Show custom context menu
+ },
+)
+```
+
+
+
+#### onSelection
+
+Fires when groups are selected in multi-select mode. Requires `selectionMode` to be set.
+
+
+
+```dart
+CometChatGroups(
+ selectionMode: SelectionMode.multiple,
+ activateSelection: ActivateSelection.onClick,
+ onSelection: (selectedList) {
+ print("Selected ${selectedList?.length ?? 0} groups");
+ },
+)
+```
+
+
+
+
+#### onError
+
+Fires on internal errors (network failure, auth issue, SDK exception).
+
+
+
+```dart
+CometChatGroups(
+ onError: (error) {
+ print("CometChatGroups error: $error");
+ },
+)
+```
+
+
+
+#### onBack
+
+Fires when the back button is pressed.
+
+
+
+```dart
+CometChatGroups(
+ showBackButton: true,
+ onBack: () {
+ Navigator.pop(context);
+ },
+)
+```
+
+
+
+#### onLoad
+
+Fires when the group list is successfully loaded.
+
+
+
+```dart
+CometChatGroups(
+ onLoad: (list) {
+ print("Loaded ${list.length} groups");
+ },
+)
+```
+
+
+
+#### onEmpty
+
+Fires when the group list is empty.
+
+
+
+```dart
+CometChatGroups(
+ onEmpty: () {
+ print("No groups found");
+ },
+)
+```
+
+
+
+### Global UI Events
+
+`CometChatGroupEvents` emits events subscribable from anywhere in the application. Add a listener in `initState` and remove it in `dispose`.
+
+| Event | Fires when | Payload |
+| --- | --- | --- |
+| `ccGroupCreated` | A new group is created | `Group` |
+| `ccGroupDeleted` | A group is deleted | `Group` |
+| `ccGroupLeft` | A user leaves a group | `Action, User, Group` |
+| `ccGroupMemberJoined` | A user joins a group | `User, Group` |
+| `ccGroupMemberAdded` | Members are added to a group | `List, List, Group, User` |
+| `ccGroupMemberKicked` | A member is kicked | `Action, User, User, Group` |
+| `ccGroupMemberBanned` | A member is banned | `Action, User, User, Group` |
+| `ccGroupMemberUnbanned` | A member is unbanned | `Action, User, User, Group` |
+| `ccGroupMemberScopeChanged` | A member's scope changes | `Action, User, String, String, Group` |
+| `ccOwnershipChanged` | Group ownership is transferred | `Group, GroupMember` |
+
+When to use: sync external UI with group state changes. For example, update a group count badge when a group is created or deleted.
+
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:cometchat_sdk/models/action.dart' as cc;
+
+class _YourScreenState extends State with CometChatGroupEventListener {
+
+ @override
+ void initState() {
+ super.initState();
+ CometChatGroupEvents.addGroupsListener("listenerId", this);
+ }
+
+ @override
+ void dispose() {
+ CometChatGroupEvents.removeGroupsListener("listenerId");
+ super.dispose();
+ }
+
+ @override
+ void ccGroupCreated(Group group) {
+ print("Group created: ${group.name}");
+ }
+
+ @override
+ void ccGroupDeleted(Group group) {
+ print("Group deleted: ${group.name}");
+ }
+
+ @override
+ void ccGroupLeft(cc.Action message, User leftUser, Group leftGroup) {
+ print("User ${leftUser.name} left ${leftGroup.name}");
+ }
+
+ @override
+ void ccGroupMemberJoined(User joinedUser, Group joinedGroup) {
+ print("User ${joinedUser.name} joined ${joinedGroup.name}");
+ }
+
+ @override
+ void ccOwnershipChanged(Group group, GroupMember newOwner) {
+ print("Ownership of ${group.name} transferred to ${newOwner.name}");
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return const Placeholder();
+ }
+}
+```
+
+
+
+### SDK Events (Real-Time, Automatic)
+
+The component listens to these SDK events internally. No manual attachment needed unless additional side effects are required.
+
+| SDK Listener | Internal behavior |
+| --- | --- |
+| `onGroupMemberJoined` | Updates member count, sets `hasJoined` if current user joined |
+| `onGroupMemberLeft` | Updates member count |
+| `onMemberAddedToGroup` | Updates member count, adds group to list if current user was added |
+| `onGroupMemberKicked` | Updates member count |
+| `onGroupMemberBanned` | Updates member count |
+| `onGroupMemberScopeChanged` | Updates member scope |
+
+Automatic: group membership changes, member count updates.
+
+---
+
+
+## Custom View Slots
+
+Each slot replaces a section of the default UI. Slots that accept a group parameter receive the `Group` object for that row.
+
+| Slot | Signature | Replaces |
+| --- | --- | --- |
+| `listItemView` | `Widget Function(Group)` | Entire list item row |
+| `leadingView` | `Widget? Function(BuildContext, Group)` | Avatar / left section |
+| `titleView` | `Widget? Function(BuildContext, Group)` | Name / title text |
+| `subtitleView` | `Widget? Function(BuildContext, Group)` | Member count subtitle |
+| `trailingView` | `Widget? Function(BuildContext, Group)` | Right section |
+| `loadingStateView` | `WidgetBuilder` | Loading spinner |
+| `emptyStateView` | `WidgetBuilder` | Empty state |
+| `errorStateView` | `WidgetBuilder` | Error state |
+| `setOptions` | `List? Function(Group, Controller, BuildContext)` | Context menu actions (replaces default) |
+| `addOptions` | `List? Function(Group, Controller, BuildContext)` | Context menu actions (adds to default) |
+| `appBarOptions` | `List Function(BuildContext)` | App bar action widgets |
+
+### listItemView
+
+Replace the entire list item row.
+
+
+
+
+
+
+
+```dart
+CometChatGroups(
+ listItemView: (group) {
+ return ListTile(
+ title: Text(
+ group.name,
+ style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
+ ),
+ subtitle: Text(
+ "${group.membersCount} Members • ${group.description}",
+ overflow: TextOverflow.ellipsis,
+ style: TextStyle(fontSize: 14, color: Color(0xFF727272)),
+ ),
+ trailing: ElevatedButton(
+ onPressed: () {
+ CometChat.joinGroup(
+ group.guid,
+ group.type,
+ onSuccess: (group) {
+ // Handle success
+ },
+ onError: (error) {
+ // Handle error
+ },
+ );
+ },
+ style: ElevatedButton.styleFrom(
+ backgroundColor: Color(0xFFEDEAFA),
+ elevation: 0,
+ shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(1000)),
+ ),
+ child: Text("JOIN", style: TextStyle(color: Color(0xFF6852D6), fontSize: 12)),
+ ),
+ );
+ },
+)
+```
+
+
+
+
+### leadingView
+
+Replace the avatar / left section. Joined status badge example.
+
+
+
+```dart
+CometChatGroups(
+ leadingView: (context, group) {
+ return Stack(
+ children: [
+ CometChatAvatar(
+ image: group.icon,
+ name: group.name,
+ style: CometChatAvatarStyle(borderRadius: BorderRadius.circular(8)),
+ ),
+ if (group.hasJoined)
+ Positioned(
+ bottom: -2,
+ left: 0,
+ right: 0,
+ child: Container(
+ padding: EdgeInsets.symmetric(horizontal: 4, vertical: 2),
+ decoration: BoxDecoration(color: Color(0xFF09C26F)),
+ child: Text(
+ "Joined",
+ textAlign: TextAlign.center,
+ style: TextStyle(color: Colors.white, fontSize: 8, fontWeight: FontWeight.w600),
+ ),
+ ),
+ ),
+ ],
+ );
+ },
+)
+```
+
+
+
+### titleView
+
+Replace the name / title text. Group type badge inline example.
+
+
+
+```dart
+CometChatGroups(
+ titleView: (context, group) {
+ return Row(
+ children: [
+ Text(
+ group.name,
+ style: TextStyle(fontWeight: FontWeight.w500, fontSize: 16),
+ ),
+ SizedBox(width: 4),
+ Container(
+ padding: EdgeInsets.symmetric(horizontal: 4, vertical: 2),
+ decoration: BoxDecoration(
+ color: group.type == GroupTypeConstants.public
+ ? Color(0xFF0B7BEA)
+ : Color(0xFF09C26F),
+ borderRadius: BorderRadius.circular(7),
+ ),
+ child: Text(
+ group.type,
+ style: TextStyle(color: Colors.white, fontSize: 8, fontWeight: FontWeight.w600),
+ ),
+ ),
+ ],
+ );
+ },
+)
+```
+
+
+
+### subtitleView
+
+Replace the member count subtitle text.
+
+
+
+
+
+
+
+```dart
+CometChatGroups(
+ subtitleView: (context, group) {
+ return Text(
+ "${group.membersCount} Members • ${group.description ?? 'No description'}",
+ overflow: TextOverflow.ellipsis,
+ style: TextStyle(fontSize: 14, color: Color(0xFF727272)),
+ );
+ },
+)
+```
+
+
+
+
+### trailingView
+
+Replace the right section. Join status button example.
+
+
+
+```dart
+CometChatGroups(
+ trailingView: (context, group) {
+ return Container(
+ padding: EdgeInsets.symmetric(horizontal: 12, vertical: 4),
+ decoration: BoxDecoration(
+ color: Color(0xFFEDEAFA),
+ borderRadius: BorderRadius.circular(1000),
+ ),
+ child: Text(
+ group.hasJoined ? "JOINED" : "+ JOIN",
+ style: TextStyle(color: Color(0xFF6852D6), fontSize: 12, fontWeight: FontWeight.w700),
+ ),
+ );
+ },
+)
+```
+
+
+
+### setOptions
+
+Replace the context menu / long-press actions on each group item.
+
+
+
+```dart
+CometChatGroups(
+ setOptions: (group, controller, context) {
+ return [
+ CometChatOption(
+ id: "leave",
+ title: "Leave Group",
+ icon: AssetConstants.close,
+ onClick: () {
+ CometChat.leaveGroup(group.guid, onSuccess: (response) {
+ print("Left group");
+ }, onError: (error) {
+ print("Error: $error");
+ });
+ },
+ ),
+ CometChatOption(
+ id: "view_members",
+ title: "View Members",
+ iconWidget: Icon(Icons.people_outline),
+ onClick: () {
+ // Navigate to group members
+ },
+ ),
+ ];
+ },
+)
+```
+
+
+
+### addOptions
+
+Add to the existing context menu actions without removing defaults.
+
+
+
+```dart
+CometChatGroups(
+ addOptions: (group, controller, context) {
+ return [
+ CometChatOption(
+ id: "mute",
+ title: "Mute Notifications",
+ iconWidget: Icon(Icons.notifications_off_outlined),
+ onClick: () {
+ // Mute notifications logic
+ },
+ ),
+ CometChatOption(
+ id: "pin",
+ title: "Pin Group",
+ iconWidget: Icon(Icons.push_pin_outlined),
+ onClick: () {
+ // Pin group logic
+ },
+ ),
+ ];
+ },
+)
+```
+
+
+
+
+### appBarOptions
+
+Add custom widgets to the app bar.
+
+
+
+
+
+
+
+```dart
+CometChatGroups(
+ appBarOptions: (context) => [
+ IconButton(
+ onPressed: () {
+ // Navigate to create group
+ },
+ icon: Icon(Icons.group_add, color: Color(0xFF6852D6)),
+ ),
+ ],
+)
+```
+
+
+
+---
+
+## Styling
+
+Set `CometChatGroupsStyle` to customize the appearance.
+
+
+
+```dart
+CometChatGroups(
+ groupsStyle: CometChatGroupsStyle(
+ backgroundColor: Colors.white,
+ titleTextColor: Color(0xFFF76808),
+ separatorColor: Color(0xFFF76808),
+ avatarStyle: CometChatAvatarStyle(
+ borderRadius: BorderRadius.circular(8),
+ backgroundColor: Color(0xFFFBAA75),
+ ),
+ ),
+)
+```
+
+
+
+
+
+
+
+### Style Properties
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `backgroundColor` | `Color` | Background color of the component |
+| `border` | `Border` | Border for the widget |
+| `borderRadius` | `BorderRadiusGeometry` | Border radius for the widget |
+| `titleTextColor` | `Color` | Color of the header title |
+| `titleTextStyle` | `TextStyle` | Style for the header title |
+| `backIconColor` | `Color` | Back button icon color |
+| `searchBackgroundColor` | `Color` | Background color of search box |
+| `searchBorder` | `BorderSide` | Border for search box |
+| `searchBorderRadius` | `BorderRadius` | Border radius for search box |
+| `searchPlaceHolderTextColor` | `Color` | Placeholder text color in search |
+| `searchPlaceHolderTextStyle` | `TextStyle` | Placeholder text style in search |
+| `searchIconColor` | `Color` | Search icon color |
+| `searchInputTextColor` | `Color` | Search input text color |
+| `searchInputTextStyle` | `TextStyle` | Search input text style |
+| `separatorColor` | `Color` | Color of list item separators |
+| `separatorHeight` | `double` | Height of list item separators |
+| `itemTitleTextColor` | `Color` | Color of group name in list items |
+| `itemTitleTextStyle` | `TextStyle` | Style for group name in list items |
+| `itemSubtitleTextColor` | `Color` | Color of member count subtitle |
+| `itemSubtitleTextStyle` | `TextStyle` | Style for member count subtitle |
+| `listItemSelectedBackgroundColor` | `Color` | Background color for selected items |
+| `privateGroupIconBackground` | `Color` | Background color for private group icon |
+| `protectedGroupIconBackground` | `Color` | Background color for password group icon |
+| `emptyStateTextColor` | `Color` | Text color for empty state title |
+| `emptyStateTextStyle` | `TextStyle` | Text style for empty state title |
+| `emptyStateSubTitleTextColor` | `Color` | Text color for empty state subtitle |
+| `emptyStateSubTitleTextStyle` | `TextStyle` | Text style for empty state subtitle |
+| `errorStateTextColor` | `Color` | Text color for error state title |
+| `errorStateTextStyle` | `TextStyle` | Text style for error state title |
+| `errorStateSubTitleTextColor` | `Color` | Text color for error state subtitle |
+| `errorStateSubTitleTextStyle` | `TextStyle` | Text style for error state subtitle |
+| `retryButtonBackgroundColor` | `Color` | Background color for retry button |
+| `retryButtonBorderRadius` | `BorderRadius` | Border radius for retry button |
+| `retryButtonBorder` | `BorderSide` | Border for retry button |
+| `retryButtonTextColor` | `Color` | Text color for retry button |
+| `retryButtonTextStyle` | `TextStyle` | Text style for retry button |
+| `submitIconColor` | `Color` | Color of submit icon in selection mode |
+| `checkBoxBackgroundColor` | `Color` | Background color of unchecked checkbox |
+| `checkBoxCheckedBackgroundColor` | `Color` | Background color of checked checkbox |
+| `checkboxSelectedIconColor` | `Color` | Color of checkmark icon |
+| `checkBoxBorderRadius` | `BorderRadius` | Border radius for checkbox |
+| `checkBoxBorder` | `BorderSide` | Border for checkbox |
+| `avatarStyle` | `CometChatAvatarStyle` | Style for group avatars |
+| `statusIndicatorStyle` | `CometChatStatusIndicatorStyle` | Style for group type indicators |
+
+---
+
+
+## Common Patterns
+
+### Custom empty state with CTA
+
+
+
+```dart
+CometChatGroups(
+ emptyStateView: (context) {
+ return Center(
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ Icon(Icons.group_outlined, size: 64, color: Color(0xFF727272)),
+ SizedBox(height: 16),
+ Text("No groups found", style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500)),
+ SizedBox(height: 8),
+ ElevatedButton(
+ onPressed: () {
+ // Navigate to create group
+ },
+ child: Text("Create a Group"),
+ ),
+ ],
+ ),
+ );
+ },
+)
+```
+
+
+
+### Joined groups only
+
+
+
+```dart
+CometChatGroups(
+ groupsRequestBuilder: GroupsRequestBuilder()
+ ..joinedOnly = true,
+)
+```
+
+
+
+### Multi-select with selection callback
+
+
+
+```dart
+CometChatGroups(
+ selectionMode: SelectionMode.multiple,
+ activateSelection: ActivateSelection.onClick,
+ onSelection: (selectedGroups) {
+ if (selectedGroups != null && selectedGroups.isNotEmpty) {
+ print("Selected ${selectedGroups.length} groups");
+ // Perform batch action on selected groups
+ }
+ },
+)
+```
+
+
+
+### Hide all chrome — minimal list
+
+
+
+```dart
+CometChatGroups(
+ hideSearch: true,
+ hideAppbar: true,
+ groupTypeVisibility: false,
+)
+```
+
+
+
+---
+
+## Accessibility
+
+The component renders a scrollable list of interactive items. Each group row supports:
+
+- Tap gesture for selection/navigation
+- Long-press gesture for context menu actions
+- Checkbox selection in multi-select mode with proper touch targets
+- Group type indicators (public/private/password) with visual icons
+
+For screen readers:
+- Group names are readable as list item titles
+- Group type indicators use icons — consider adding `Semantics` widgets via `leadingView` if screen reader descriptions are needed
+- Selection state is communicated through checkbox widgets
+
+The component respects system accessibility settings including text scaling and high contrast modes.
+
+---
+
+
+## Props
+
+All props are optional unless noted.
+
+### activateSelection
+
+Controls when selection mode activates.
+
+| | |
+| --- | --- |
+| Type | `ActivateSelection` |
+| Default | `null` |
+
+Values: `ActivateSelection.onClick`, `ActivateSelection.onLongClick`
+
+---
+
+### addOptions
+
+Adds additional context menu actions to the default options.
+
+| | |
+| --- | --- |
+| Type | `List? Function(Group, CometChatGroupsController, BuildContext)` |
+| Default | `null` |
+
+---
+
+### appBarOptions
+
+Custom widgets to display in the app bar.
+
+| | |
+| --- | --- |
+| Type | `List Function(BuildContext context)` |
+| Default | `null` |
+
+---
+
+### backButton
+
+Custom back button widget.
+
+| | |
+| --- | --- |
+| Type | `Widget` |
+| Default | Built-in back arrow |
+
+---
+
+### controllerTag
+
+Identifier tag for controller management.
+
+| | |
+| --- | --- |
+| Type | `String` |
+| Default | `null` |
+
+---
+
+### emptyStateView
+
+Custom view displayed when there are no groups.
+
+| | |
+| --- | --- |
+| Type | `WidgetBuilder` |
+| Default | Built-in empty state |
+
+---
+
+### errorStateView
+
+Custom view displayed when an error occurs.
+
+| | |
+| --- | --- |
+| Type | `WidgetBuilder` |
+| Default | Built-in error state |
+
+---
+
+### groupsProtocol
+
+Custom protocol for fetching groups.
+
+| | |
+| --- | --- |
+| Type | `GroupsBuilderProtocol` |
+| Default | `null` |
+
+---
+
+
+### groupsRequestBuilder
+
+Controls which groups load and in what order.
+
+| | |
+| --- | --- |
+| Type | `GroupsRequestBuilder` |
+| Default | SDK default (30 per page) |
+
+Pass the builder instance, not the result of `.build()`.
+
+---
+
+### groupsStyle
+
+Styling options for the groups list.
+
+| | |
+| --- | --- |
+| Type | `CometChatGroupsStyle` |
+| Default | `null` |
+
+---
+
+### groupTypeVisibility
+
+Shows or hides the group type icon (public/private/password) on group avatars.
+
+| | |
+| --- | --- |
+| Type | `bool` |
+| Default | `true` |
+
+---
+
+### height
+
+Height of the widget.
+
+| | |
+| --- | --- |
+| Type | `double` |
+| Default | `null` |
+
+---
+
+### hideAppbar
+
+Hides the app bar including title and search.
+
+| | |
+| --- | --- |
+| Type | `bool` |
+| Default | `false` |
+
+---
+
+### hideError
+
+Hides the error state view.
+
+| | |
+| --- | --- |
+| Type | `bool` |
+| Default | `false` |
+
+---
+
+### hideSearch
+
+Hides the search input box.
+
+| | |
+| --- | --- |
+| Type | `bool` |
+| Default | `false` |
+
+---
+
+### leadingView
+
+Custom renderer for the avatar / left section.
+
+| | |
+| --- | --- |
+| Type | `Widget? Function(BuildContext context, Group group)` |
+| Default | Built-in avatar |
+
+---
+
+### listItemView
+
+Custom renderer for the entire list item row.
+
+| | |
+| --- | --- |
+| Type | `Widget Function(Group group)` |
+| Default | Built-in list item |
+
+---
+
+
+### loadingStateView
+
+Custom view displayed during loading state.
+
+| | |
+| --- | --- |
+| Type | `WidgetBuilder` |
+| Default | Built-in shimmer |
+
+---
+
+### onBack
+
+Callback triggered when the back button is pressed.
+
+| | |
+| --- | --- |
+| Type | `VoidCallback` |
+| Default | `null` |
+
+---
+
+### onEmpty
+
+Callback triggered when the group list is empty.
+
+| | |
+| --- | --- |
+| Type | `OnEmpty` |
+| Default | `null` |
+
+---
+
+### onError
+
+Callback triggered when an error occurs.
+
+| | |
+| --- | --- |
+| Type | `OnError` |
+| Default | `null` |
+
+---
+
+### onItemLongPress
+
+Callback triggered on long press of a group item.
+
+| | |
+| --- | --- |
+| Type | `Function(BuildContext context, Group group)` |
+| Default | `null` |
+
+---
+
+### onItemTap
+
+Callback triggered when tapping a group item.
+
+| | |
+| --- | --- |
+| Type | `Function(BuildContext context, Group group)` |
+| Default | `null` |
+
+---
+
+### onLoad
+
+Callback triggered when the list is successfully loaded.
+
+| | |
+| --- | --- |
+| Type | `OnLoad` |
+| Default | `null` |
+
+---
+
+### onSelection
+
+Callback triggered when groups are selected. Requires `selectionMode` to be set.
+
+| | |
+| --- | --- |
+| Type | `Function(List? list)` |
+| Default | `null` |
+
+---
+
+### passwordGroupIcon
+
+Custom icon widget for password-protected groups.
+
+| | |
+| --- | --- |
+| Type | `Widget` |
+| Default | Built-in lock icon |
+
+---
+
+### privateGroupIcon
+
+Custom icon widget for private groups.
+
+| | |
+| --- | --- |
+| Type | `Widget` |
+| Default | Built-in shield icon |
+
+---
+
+
+### scrollController
+
+Controller for scrolling the list.
+
+| | |
+| --- | --- |
+| Type | `ScrollController` |
+| Default | `null` |
+
+---
+
+### searchBoxIcon
+
+Custom search box icon widget.
+
+| | |
+| --- | --- |
+| Type | `Widget` |
+| Default | Built-in search icon |
+
+---
+
+### searchKeyword
+
+Pre-fills the search and filters the group list.
+
+| | |
+| --- | --- |
+| Type | `String` |
+| Default | `null` |
+
+---
+
+### searchPlaceholder
+
+Placeholder text for the search input box.
+
+| | |
+| --- | --- |
+| Type | `String` |
+| Default | `null` |
+
+---
+
+### selectionMode
+
+Enables single or multi-select mode.
+
+| | |
+| --- | --- |
+| Type | `SelectionMode` |
+| Default | `null` |
+
+Values: `SelectionMode.single`, `SelectionMode.multiple`, `SelectionMode.none`
+
+---
+
+### setOptions
+
+Replaces the default context menu actions.
+
+| | |
+| --- | --- |
+| Type | `List? Function(Group, CometChatGroupsController, BuildContext)` |
+| Default | `null` |
+
+---
+
+### showBackButton
+
+Shows or hides the back button.
+
+| | |
+| --- | --- |
+| Type | `bool` |
+| Default | `true` |
+
+---
+
+### stateCallBack
+
+Callback to access controller functions from parent.
+
+| | |
+| --- | --- |
+| Type | `Function(CometChatGroupsController controller)` |
+| Default | `null` |
+
+---
+
+### submitIcon
+
+Custom submit icon widget for selection mode.
+
+| | |
+| --- | --- |
+| Type | `Widget` |
+| Default | Built-in check icon |
+
+---
+
+### subtitleView
+
+Custom renderer for the member count subtitle.
+
+| | |
+| --- | --- |
+| Type | `Widget? Function(BuildContext context, Group group)` |
+| Default | Built-in member count |
+
+---
+
+### title
+
+Title text displayed in the app bar.
+
+| | |
+| --- | --- |
+| Type | `String` |
+| Default | `"Groups"` |
+
+---
+
+### titleView
+
+Custom renderer for the name / title text.
+
+| | |
+| --- | --- |
+| Type | `Widget? Function(BuildContext context, Group group)` |
+| Default | Built-in title |
+
+---
+
+### trailingView
+
+Custom renderer for the right section.
+
+| | |
+| --- | --- |
+| Type | `Widget? Function(BuildContext context, Group group)` |
+| Default | `null` |
+
+---
+
+### width
+
+Width of the widget.
+
+| | |
+| --- | --- |
+| Type | `double` |
+| Default | `null` |
+
+---
+
+
+## Events
+
+`CometChatGroups` subscribes to `CometChatGroupEvents`:
+
+| Event | Payload | Internal behavior |
+| --- | --- | --- |
+| `ccGroupCreated` | `Group` | Adds new group to list |
+| `ccGroupDeleted` | `Group` | Removes group from list |
+| `ccGroupLeft` | `Action, User, Group` | Removes private group or updates hasJoined |
+| `ccGroupMemberJoined` | `User, Group` | Updates group in list |
+| `ccGroupMemberAdded` | `List, List, Group, User` | Updates group in list |
+| `ccGroupMemberKicked` | `Action, User, User, Group` | Updates group in list |
+| `ccGroupMemberBanned` | `Action, User, User, Group` | Updates group in list |
+| `ccOwnershipChanged` | `Group, GroupMember` | Updates group in list |
+
+---
+
+## Customization Matrix
+
+| What to change | Where | Property/API | Example |
+| --- | --- | --- | --- |
+| Override behavior on group interaction | Component props | `on` callbacks | `onItemTap: (ctx, group) => setActive(group)` |
+| Filter which groups appear | Component props | `groupsRequestBuilder` | `groupsRequestBuilder: GroupsRequestBuilder()..joinedOnly = true` |
+| Toggle visibility of UI elements | Component props | `hide` / `show` boolean props | `hideSearch: true` |
+| Replace a section of the list item | Component props | `View` render props | `listItemView: (group) => CustomWidget()` |
+| Change colors, fonts, spacing | Component props | `groupsStyle` | `groupsStyle: CometChatGroupsStyle(titleTextColor: Colors.red)` |
+
+
+---
+
+
+
+ Display and manage user contacts
+
+
+ Display recent one-on-one and group conversations
+
+
+ Display and manage members of a group
+
+
+ Learn how to customize the look and feel
+
+
diff --git a/ui-kit/flutter/v5/guide-block-unblock-user.mdx b/ui-kit/flutter/v5/guide-block-unblock-user.mdx
new file mode 100644
index 000000000..ebb1ce265
--- /dev/null
+++ b/ui-kit/flutter/v5/guide-block-unblock-user.mdx
@@ -0,0 +1,189 @@
+---
+title: "Block/Unblock Users"
+sidebarTitle: "Block/Unblock User"
+description: "Implement block and unblock user functionality in CometChat Flutter UI Kit with composer state management."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_chat_uikit` |
+| Key components | `CometchatUserInfo` — uses `CometChatUIKit.blockUsers()` / `CometChatUIKit.unblockUsers()` SDK methods |
+| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login(uid)` |
+| Events | Block/unblock state managed via `user.blockedByMe` property |
+| UI helpers | `CometChatUserInfoController`, confirmation dialogs |
+| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
+| Related | [All Guides](/ui-kit/flutter/v5/guide-overview) |
+
+
+
+Block/Unblock lets users prevent specific users from sending them messages. When blocked, the message composer is hidden and replaced with an unblock prompt.
+
+Before starting, complete the [Getting Started](/ui-kit/flutter/v5/getting-started) guide.
+
+---
+
+## Components
+
+| Component / Class | Role |
+|:---|:---|
+| `CometchatUserInfo` | User profile screen with block/unblock controls |
+| `CometChatUserInfoController` | Controller managing block/unblock state and actions |
+| `CometChatUIKit.blockUsers()` | SDK method to block specific users |
+| `CometChatUIKit.unblockUsers()` | SDK method to unblock previously blocked users |
+| `user.blockedByMe` | Property indicating if current user blocked this user |
+
+---
+
+## Integration Steps
+
+### 1. Navigate to User Info
+
+Open the user info screen from the messages view when tapping the user profile or info icon.
+
+_File: [messages.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/messages/messages.dart)_
+
+```dart
+Navigator.push(
+ context,
+ MaterialPageRoute(
+ builder: (_) => CometchatUserInfo(user: tappedUser),
+ ),
+);
+```
+
+---
+
+### 2. Block User
+
+Call the block user dialog which uses `CometChatUIKit.blockUsers()` with the target UID. On success, update the UI to show the blocked state.
+
+_File: [cometchat_user_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info.dart)_
+
+```dart
+listTileOptions(
+ controller.user?.blockedByMe != true
+ ? Translations.of(context).block
+ : Translations.of(context).unBlock,
+ Icon(Icons.block, color: colorPalette.error),
+ () {
+ if (controller.user?.blockedByMe != true) {
+ controller.blockUserDialog(
+ context: context,
+ colorPalette: colorPalette,
+ typography: typography,
+ );
+ } else {
+ controller.unblockUserDialog(
+ context: context,
+ colorPalette: colorPalette,
+ typography: typography,
+ );
+ }
+ },
+)
+```
+
+---
+
+### 3. Unblock User
+
+Call `CometChatUIKit.unblockUsers()` with the target UID. On success, restore the UI to allow messaging.
+
+_File: [cometchat_user_info_controller.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info_controller.dart)_
+
+```dart
+void unblockUserDialog({
+ required BuildContext context,
+ required CometChatColorPalette colorPalette,
+ required CometChatTypography typography,
+}) {
+ // Show confirmation dialog
+ // On confirm: CometChatUIKit.unblockUsers([user.uid])
+}
+```
+
+---
+
+### 4. Blocked State Banner
+
+Display a warning banner when viewing a blocked user's profile.
+
+_File: [cometchat_user_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info.dart)_
+
+```dart
+if (value.getBlockedByMe())
+ Container(
+ padding: EdgeInsets.symmetric(
+ horizontal: spacing.padding3 ?? 0,
+ vertical: spacing.padding2 ?? 0,
+ ),
+ color: colorPalette.warning?.withValues(alpha: 0.2),
+ child: Row(
+ children: [
+ Icon(Icons.info, color: colorPalette.warning),
+ SizedBox(width: spacing.padding2),
+ Text("${Translations.of(context).youHaveBlocked} ${widget.user.name}."),
+ ],
+ ),
+ ),
+```
+
+---
+
+### 5. Composer Blocked State
+
+When a user is blocked, the composer in thread/message views is replaced with an unblock prompt.
+
+_File: [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart)_
+
+```dart
+if (controller.user?.blockedByMe == true) {
+ return Container(
+ padding: EdgeInsets.symmetric(vertical: 8, horizontal: 20),
+ color: colorPalette.background4,
+ child: Column(
+ children: [
+ Text(Translations.of(context).cantSendMessageBlockedUser),
+ ElevatedButton(
+ onPressed: () => controller.unBlockUser(),
+ child: Text(Translations.of(context).unBlock),
+ ),
+ ],
+ ),
+ );
+}
+```
+
+---
+
+## Feature Matrix
+
+| Feature | Component / Method | File |
+|:---|:---|:---|
+| User info screen | `CometchatUserInfo` | [cometchat_user_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info.dart) |
+| Block user | `blockUserDialog()` | [cometchat_user_info_controller.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info_controller.dart) |
+| Unblock user | `unblockUserDialog()` | [cometchat_user_info_controller.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info_controller.dart) |
+| Check blocked status | `user.blockedByMe` | [cometchat_user_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info.dart) |
+| Blocked banner | Warning container | [cometchat_user_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info.dart) |
+| Blocked composer | `_buildBlockedUserSection()` | [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart) |
+
+---
+
+## Next Steps
+
+
+
+ Display and manage user lists.
+
+
+ Customize the message input component.
+
+
+ Browse all feature and formatter guides.
+
+
+ Full working sample application on GitHub.
+
+
diff --git a/ui-kit/flutter/v5/guide-call-log-details.mdx b/ui-kit/flutter/v5/guide-call-log-details.mdx
new file mode 100644
index 000000000..c0beffae0
--- /dev/null
+++ b/ui-kit/flutter/v5/guide-call-log-details.mdx
@@ -0,0 +1,117 @@
+---
+title: "Call Log Details"
+sidebarTitle: "Call Log Details"
+description: "Display call history and detailed call information in CometChat Flutter UI Kit."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_chat_uikit` |
+| Key components | `CometChatCallLogs`, `CometChatCallLogDetails` |
+| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login(uid)` |
+| Entry point | Calls tab → `CometChatCallLogs` → tap item → `CometChatCallLogDetails` |
+| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
+| Related | [All Guides](/ui-kit/flutter/v5/guide-overview) |
+
+
+
+Call Log Details provides a dedicated Calls tab where users can view recent audio and video calls and inspect detailed information for each call.
+
+Before starting, complete the [Getting Started](/ui-kit/flutter/v5/getting-started) guide.
+
+---
+
+## Components
+
+| Component / Class | Role |
+|:---|:---|
+| `CometChatCallLogs` | Displays the list of recent calls with tap callbacks |
+| `CometChatCallLogDetails` | Shows detailed information (participants, duration, type) |
+| `CallLog` | Call log data model from SDK |
+
+---
+
+## Integration Steps
+
+### 1. Add Calls Tab
+
+Integrate the Calls tab into your main dashboard using `CometChatCallLogs`.
+
+_File: [dashboard.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart)_
+
+```dart
+CometChatCallLogs(
+ onItemClick: (callLog) {
+ Navigator.push(
+ context,
+ MaterialPageRoute(
+ builder: (context) => CometChatCallLogDetails(callLog: callLog),
+ ),
+ );
+ },
+)
+```
+
+---
+
+### 2. Display Call Logs
+
+Use `CometChatCallLogs` to fetch and show recent calls with customizable styling.
+
+_File: [dashboard.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart)_
+
+```dart
+CometChatCallLogs(
+ onItemClick: (callLog) {
+ // Navigate to details screen
+ },
+ callLogsStyle: CometChatCallLogsStyle(
+ backgroundColor: colorPalette.background1,
+ ),
+)
+```
+
+---
+
+### 3. Show Call Log Details
+
+Present detailed information when a call log is tapped.
+
+_File: [cometchat_call_log_details.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/call_log_details/cometchat_call_log_details.dart)_
+
+```dart
+CometChatCallLogDetails(
+ callLog: callLog,
+)
+```
+
+---
+
+## Feature Matrix
+
+| Feature | Component / Method | File |
+|:---|:---|:---|
+| Calls tab | `CometChatCallLogs` | [dashboard.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart) |
+| Display call logs | `CometChatCallLogs` | [dashboard.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart) |
+| Call details | `CometChatCallLogDetails` | [cometchat_call_log_details.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/call_log_details/cometchat_call_log_details.dart) |
+
+---
+
+## Next Steps
+
+
+
+ Learn more about the Call Logs component.
+
+
+ Explore all calling capabilities.
+
+
+ Add call buttons to your chat interface.
+
+
+ Browse all feature and formatter guides.
+
+
diff --git a/ui-kit/flutter/v5/guide-group-chat.mdx b/ui-kit/flutter/v5/guide-group-chat.mdx
new file mode 100644
index 000000000..8066163bb
--- /dev/null
+++ b/ui-kit/flutter/v5/guide-group-chat.mdx
@@ -0,0 +1,182 @@
+---
+title: "Group Management"
+sidebarTitle: "Group Chat"
+description: "Create groups, manage members, assign roles, and transfer ownership in CometChat Flutter UI Kit."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_chat_uikit` |
+| Key components | `CometChatGroups`, `CometChatCreateGroup`, `CometChatGroupInfo`, `CometChatAddMembers`, `CometChatBannedMembers`, `CometChatTransferOwnership` |
+| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login(uid)` |
+| Entry point | Groups tab → create/join group → `CometChatGroupInfo` for management |
+| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
+| Related | [All Guides](/ui-kit/flutter/v5/guide-overview) |
+
+
+
+Group Management enables users to create groups, join public/password groups, manage members, ban users, update roles, and transfer ownership.
+
+Before starting, complete the [Getting Started](/ui-kit/flutter/v5/getting-started) guide.
+
+---
+
+## Components
+
+| Component / Class | Role |
+|:---|:---|
+| `CometChatGroups` | Displays groups and create button |
+| `CometChatCreateGroup` | UI to create new groups |
+| `CometChatGroupInfo` | Shows group info and member management |
+| `CometChatAddMembers` | Add members to a group |
+| `CometChatBannedMembers` | View/unban banned users |
+| `CometChatTransferOwnership` | Transfer group ownership |
+| `CometChatChangeScope` | Change a user's group role |
+| `JoinProtectedGroupUtils` | Utility to join password-protected groups |
+
+---
+
+## Integration Steps
+
+### 1. Create a Group
+
+Show the create group dialog from the dashboard.
+
+_File: [dashboard.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart)_
+
+```dart
+IconButton(
+ onPressed: () {
+ showCreateGroup(
+ context: context,
+ colorPalette: colorPalette,
+ typography: typography,
+ spacing: spacing,
+ );
+ },
+ icon: Icon(Icons.group_add),
+)
+```
+
+_File: [cometchat_create_group.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/create_group/cometchat_create_group.dart)_
+
+```dart
+await CometChat.createGroup(
+ group: Group(
+ guid: groupId,
+ name: groupName,
+ type: groupType,
+ password: groupPassword,
+ ),
+ onSuccess: (Group group) => Navigator.pop(context),
+ onError: (e) {
+ // Show error
+ },
+);
+```
+
+---
+
+### 2. Join Public/Password Group
+
+Handle group tap to join or prompt for password.
+
+_File: [join_protected_group_util.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/utils/join_protected_group_util.dart)_
+
+```dart
+CometChatGroups(
+ onItemTap: (context, group) {
+ JoinProtectedGroupUtils.onGroupItemTap(context, group);
+ },
+)
+```
+
+---
+
+### 3. View Group Info
+
+Display group details and member management options.
+
+_File: [cometchat_group_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/group_info/cometchat_group_info.dart)_
+
+```dart
+CometChatGroupInfo(
+ group: group,
+)
+```
+
+---
+
+### 4. Add Members
+
+Navigate to add members screen.
+
+_File: [cometchat_add_members.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/add_memebers/cometchat_add_members.dart)_
+
+```dart
+CometChatAddMembers(
+ group: group,
+)
+```
+
+---
+
+### 5. Ban/Unban Members
+
+Manage banned members list.
+
+_File: [cometchat_banned_members.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/banned_members/cometchat_banned_members.dart)_
+
+```dart
+CometChatBannedMembers(
+ group: group,
+)
+```
+
+---
+
+### 6. Transfer Ownership
+
+Transfer group ownership to another member.
+
+_File: [cometchat_transfer_ownership.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/transfer_ownership/cometchat_transfer_ownership.dart)_
+
+```dart
+CometChatTransferOwnership(
+ group: group,
+)
+```
+
+---
+
+## Feature Matrix
+
+| Feature | Component / Method | File |
+|:---|:---|:---|
+| Create group | `CometChatCreateGroup` | [cometchat_create_group.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/create_group/cometchat_create_group.dart) |
+| Join group | `JoinProtectedGroupUtils` | [join_protected_group_util.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/utils/join_protected_group_util.dart) |
+| View members | `CometChatGroupInfo` | [cometchat_group_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/group_info/cometchat_group_info.dart) |
+| Add members | `CometChatAddMembers` | [cometchat_add_members.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/add_memebers/cometchat_add_members.dart) |
+| Ban/unban | `CometChatBannedMembers` | [cometchat_banned_members.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/banned_members/cometchat_banned_members.dart) |
+| Transfer ownership | `CometChatTransferOwnership` | [cometchat_transfer_ownership.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/transfer_ownership/cometchat_transfer_ownership.dart) |
+
+---
+
+## Next Steps
+
+
+
+ Learn more about the Groups component.
+
+
+ Display and manage group members.
+
+
+ View group conversations.
+
+
+ Browse all feature and formatter guides.
+
+
diff --git a/ui-kit/flutter/guide-image-caption.mdx b/ui-kit/flutter/v5/guide-image-caption.mdx
similarity index 97%
rename from ui-kit/flutter/guide-image-caption.mdx
rename to ui-kit/flutter/v5/guide-image-caption.mdx
index 5cac7f05d..7e1d8c636 100644
--- a/ui-kit/flutter/guide-image-caption.mdx
+++ b/ui-kit/flutter/v5/guide-image-caption.mdx
@@ -14,7 +14,7 @@ description: "Preview images before sending and display captions below image thu
| Entry point | Attachment tap → image pick → inline preview → send with caption |
| Extension points | `attachmentOptions`, `headerView`, `stateCallBack`, `onSendButtonTap`, `templates` |
| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/master_app) |
-| Related | [Compact Message Composer](/ui-kit/flutter/compact-message-composer) · [Message Template](/ui-kit/flutter/message-template) · [All Guides](/ui-kit/flutter/guide-overview) |
+| Related | [Compact Message Composer](/ui-kit/flutter/v5/compact-message-composer) · [Message Template](/ui-kit/flutter/v5/message-template) · [All Guides](/ui-kit/flutter/v5/guide-overview) |
@@ -25,7 +25,7 @@ This guide adds two capabilities to the default messaging experience:
No UIKit source files are modified. Everything uses the UIKit's public extension points.
-Before starting, complete the [Getting Started](/ui-kit/flutter/getting-started) guide.
+Before starting, complete the [Getting Started](/ui-kit/flutter/v5/getting-started) guide.
---
@@ -502,16 +502,16 @@ CometChatMessageList(
## Next Steps
-
+
Full reference for the compact composer component.
-
+
Customize how message types are rendered.
-
+
Configure the message list component.
-
+
Browse all feature and formatter guides.
diff --git a/ui-kit/flutter/v5/guide-message-agentic-flow.mdx b/ui-kit/flutter/v5/guide-message-agentic-flow.mdx
new file mode 100644
index 000000000..b6ad03950
--- /dev/null
+++ b/ui-kit/flutter/v5/guide-message-agentic-flow.mdx
@@ -0,0 +1,201 @@
+---
+title: "AI Agent Integration"
+sidebarTitle: "AI Agent Integration"
+description: "Integrate AI agents with chat history, contextual responses, and seamless handoffs in CometChat Flutter UI Kit."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_chat_uikit` |
+| Key components | `CometChatAIAssistantChatHistory`, `CometChatMessageList`, `CometChatMessageComposer`, `CometChatMessageHeader` |
+| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login(uid)` |
+| Entry point | AI agent user → `AIAssistantChatScreen` with AI-specific styling |
+| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
+| Related | [All Guides](/ui-kit/flutter/v5/guide-overview) |
+
+
+
+AI Agent Integration enables intelligent conversational AI capabilities with chat history, contextual responses, and seamless handoffs.
+
+
+**1:1 conversations only.** AI Agents currently respond only in one-on-one conversations between an end user and the agent user. They do not respond to messages sent in groups, even if the agent user is added as a member or owner. Group support is on the roadmap — share your use case on [feedback.cometchat.com](https://feedback.cometchat.com).
+
+
+Before starting, complete the [Getting Started](/ui-kit/flutter/v5/getting-started) guide.
+
+---
+
+## Components
+
+| Component / Class | Role |
+|:---|:---|
+| `CometChatMessageHeader` | Manages message interactions with AI-specific buttons |
+| `CometChatMessageList` | Displays messages with AI-specific styling |
+| `CometChatMessageComposer` | Composes messages with AI placeholders |
+| `CometChatAIAssistantChatHistory` | Displays previous AI conversation history |
+| `CometChatAiAssistantBubbleStyle` | Custom styling for AI chat bubbles |
+| `AIConstants.aiRole` | Constant to detect AI agent users |
+
+---
+
+## Integration Steps
+
+### 1. Detect AI Agent
+
+Check if the user is an AI agent by their role.
+
+```dart
+bool isUserAgentic() {
+ return widget.user?.role == AIConstants.aiRole;
+}
+```
+
+---
+
+### 2. AI Chat Screen Setup
+
+Create a screen for AI Assistant chat using standard message components with AI-specific styling.
+
+```dart
+class AIAssistantChatScreen extends StatefulWidget {
+ final User? user;
+ final Group? group;
+ final BaseMessage? parentMessage;
+ final bool? isHistory;
+
+ const AIAssistantChatScreen({
+ Key? key,
+ this.user,
+ this.group,
+ this.parentMessage,
+ this.isHistory,
+ }) : super(key: key);
+
+ @override
+ State createState() => _AIAssistantChatScreenState();
+}
+```
+
+---
+
+### 3. Message Header with AI Actions
+
+Configure the message header with chat history and new chat buttons.
+
+```dart
+CometChatMessageHeader(
+ user: widget.user,
+ group: widget.group,
+ chatHistoryButtonClick: () {
+ Navigator.push(
+ context,
+ MaterialPageRoute(
+ builder: (context) => CometChatAIAssistantChatHistory(
+ user: widget.user,
+ group: widget.group,
+ onNewChatButtonClicked: () => onNewChatClicked(true),
+ onMessageClicked: (message) => navigateToThread(message),
+ onClose: () => Navigator.of(context).pop(),
+ ),
+ ),
+ );
+ },
+ newChatButtonClick: () => onNewChatClicked(false),
+)
+```
+
+---
+
+### 4. AI Message List
+
+Configure the message list with AI-specific styling and options.
+
+```dart
+CometChatMessageList(
+ user: user,
+ group: group,
+ hideReplyInThreadOption: isUserAgentic() ? true : false,
+ hideThreadView: true,
+ messagesRequestBuilder: requestBuilder,
+ style: CometChatMessageListStyle(
+ backgroundColor: isUserAgentic() ? colorPalette.background3 : null,
+ outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
+ textBubbleStyle: CometChatTextBubbleStyle(
+ backgroundColor: isUserAgentic() ? colorPalette.background4 : null,
+ textColor: isUserAgentic() ? colorPalette.textPrimary : null,
+ ),
+ ),
+ ),
+)
+```
+
+---
+
+### 5. AI Composer
+
+Configure the composer with AI-specific placeholder text.
+
+```dart
+CometChatMessageComposer(
+ user: widget.user,
+ group: widget.group,
+ disableMentions: isUserAgentic() ? true : false,
+ placeholderText: isUserAgentic()
+ ? "${Translations.of(context).askAnything}..."
+ : null,
+ parentMessageId: widget.parentMessage?.id ?? 0,
+)
+```
+
+---
+
+### 6. Custom AI Bubble Styling
+
+Apply custom styles for AI chat bubbles using ThemeExtension.
+
+```dart
+MaterialApp(
+ theme: ThemeData(
+ extensions: [
+ CometChatAiAssistantBubbleStyle(
+ backgroundColor: Colors.transparent,
+ border: Border.all(color: Colors.blueAccent, width: 1),
+ textColor: const Color(0xFF141414),
+ ),
+ ],
+ ),
+)
+```
+
+---
+
+## Feature Matrix
+
+| Feature | Component / Method | Description |
+|:---|:---|:---|
+| AI detection | `AIConstants.aiRole` | Check if user is AI agent |
+| AI chat screen | `AIAssistantChatScreen` | Full AI chat interface |
+| Chat history | `CometChatAIAssistantChatHistory` | Browse previous AI sessions |
+| AI styling | `CometChatAiAssistantBubbleStyle` | Custom AI bubble appearance |
+| New chat | `onNewChatClicked()` | Start fresh AI conversation |
+
+---
+
+## Next Steps
+
+
+
+ Explore all AI-powered features.
+
+
+ Learn about AI chat history component.
+
+
+ Learn about message display and management.
+
+
+ Browse all feature and formatter guides.
+
+
diff --git a/ui-kit/flutter/v5/guide-message-privately.mdx b/ui-kit/flutter/v5/guide-message-privately.mdx
new file mode 100644
index 000000000..df3d8c8dc
--- /dev/null
+++ b/ui-kit/flutter/v5/guide-message-privately.mdx
@@ -0,0 +1,151 @@
+---
+title: "Message Privately"
+sidebarTitle: "Message Privately"
+description: "Initiate private one-on-one chats with group members directly from group chat in CometChat Flutter UI Kit."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_chat_uikit` |
+| Key components | `CometchatUserInfo`, `CometChatMessageList`, `PageManager` |
+| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login(uid)` |
+| Entry point | Group member tap → `CometchatUserInfo` → "Message" action |
+| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
+| Related | [All Guides](/ui-kit/flutter/v5/guide-overview) |
+
+
+
+Message Privately lets users start a direct one-on-one chat with a group member.
+
+Before starting, complete the [Getting Started](/ui-kit/flutter/v5/getting-started) guide.
+
+---
+
+## Components
+
+| Component / Class | Role |
+|:---|:---|
+| `CometChatMessageList` | Displays group messages and user avatars |
+| `CometchatUserInfo` | Shows user details and actions (e.g., call, message) |
+| `CometChatUserInfoController` | Manages user info state and actions |
+| `PageManager` | Handles navigation to the private chat screen |
+
+---
+
+## Integration Steps
+
+### 1. Navigate to User Info
+
+Open the user info screen when tapping on a group member's profile or info icon.
+
+_File: [cometchat_group_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/group_info/cometchat_group_info.dart)_
+
+```dart
+Navigator.push(
+ context,
+ MaterialPageRoute(
+ builder: (context) => CometchatUserInfo(user: selectedUser),
+ ),
+);
+```
+
+---
+
+### 2. Display User Profile with Actions
+
+The `CometchatUserInfo` widget displays the user's profile with action tiles for voice call, video call, and messaging.
+
+_File: [cometchat_user_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info.dart)_
+
+```dart
+Widget _getOptionTiles(CometChatUserInfoController controller) {
+ return Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ tile(
+ Icon(Icons.call_outlined, color: colorPalette.iconHighlight),
+ Translations.of(context).voice,
+ () => controller.initiateCallWorkflow(CallTypeConstants.audioCall, context),
+ ),
+ tile(
+ Icon(Icons.videocam_outlined, color: colorPalette.iconHighlight),
+ Translations.of(context).video,
+ () => controller.initiateCallWorkflow(CallTypeConstants.videoCall, context),
+ ),
+ ],
+ );
+}
+```
+
+---
+
+### 3. Start Private Chat
+
+Navigate to the private chat screen using `PageManager` when the user wants to message privately.
+
+_File: [page_manager.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/utils/page_manager.dart)_
+
+```dart
+PageManager().navigateToMessages(
+ context: context,
+ user: user,
+);
+```
+
+---
+
+### 4. Handle Mentions Navigation
+
+When a user taps on a mention in a message, navigate to that user's profile or start a private chat.
+
+_File: [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart)_
+
+```dart
+CometChatMentionsFormatter getMentionsTap() {
+ return CometChatMentionsFormatter(
+ user: widget.user,
+ group: widget.group,
+ onMentionTap: (mention, mentionedUser, {message}) {
+ if (mentionedUser.uid != CometChatUIKit.loggedInUser!.uid) {
+ PageManager().navigateToMessages(
+ context: context,
+ user: mentionedUser,
+ );
+ }
+ },
+ );
+}
+```
+
+---
+
+## Feature Matrix
+
+| Feature | Component / Method | File |
+|:---|:---|:---|
+| User info screen | `CometchatUserInfo` | [cometchat_user_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info.dart) |
+| Voice/video call | `initiateCallWorkflow()` | [cometchat_user_info_controller.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info_controller.dart) |
+| Navigate to chat | `PageManager.navigateToMessages` | [page_manager.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/utils/page_manager.dart) |
+| Mention tap | `CometChatMentionsFormatter` | [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart) |
+| Access from group | Group member list | [cometchat_group_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/group_info/cometchat_group_info.dart) |
+
+---
+
+## Next Steps
+
+
+
+ Display and manage group lists.
+
+
+ View and manage group members.
+
+
+ Display messages in private chats.
+
+
+ Browse all feature and formatter guides.
+
+
diff --git a/ui-kit/flutter/v5/guide-new-chat.mdx b/ui-kit/flutter/v5/guide-new-chat.mdx
new file mode 100644
index 000000000..c65b30091
--- /dev/null
+++ b/ui-kit/flutter/v5/guide-new-chat.mdx
@@ -0,0 +1,155 @@
+---
+title: "New Chat"
+sidebarTitle: "New Chat"
+description: "Enable users to start one-on-one or group chats with a searchable contact list in CometChat Flutter UI Kit."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_chat_uikit` |
+| Key components | `CometChatContacts`, `CometChatUsers`, `CometChatGroups`, `CometChatAvatar` |
+| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login(uid)` |
+| Entry point | Avatar menu → "Create Conversation" → `CometChatContacts` |
+| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
+| Related | [All Guides](/ui-kit/flutter/v5/guide-overview) |
+
+
+
+New Chat enables users to start one-on-one or group conversations by selecting from a searchable contact list.
+
+Before starting, complete the [Getting Started](/ui-kit/flutter/v5/getting-started) guide.
+
+---
+
+## Components
+
+| Component / Class | Role |
+|:---|:---|
+| `CometChatAvatar` | Displays the user avatar in the app bar |
+| `PopupMenuButton` | Shows menu options when the avatar is tapped |
+| `CometChatContacts` | UI for the "Start Conversation" screen with tabs |
+| `CometChatContactsController` | Manages tab switching and item selection |
+| `CometChatUsers` | Lists users with search and selection |
+| `CometChatGroups` | Lists groups with search and selection |
+| `PageManager` | Handles navigation to the chat screen |
+
+---
+
+## Integration Steps
+
+### 1. Add Avatar Menu
+
+Show the avatar in the app bar and open a menu on tap with "Create Conversation" option.
+
+_File: [dashboard.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart)_
+
+```dart
+PopupMenuButton(
+ icon: CometChatAvatar(
+ width: 40,
+ height: 40,
+ image: CometChatUIKit.loggedInUser?.avatar,
+ name: CometChatUIKit.loggedInUser?.name,
+ ),
+ itemBuilder: (context) => [
+ PopupMenuItem(value: '/Create', child: Text("Create Conversation")),
+ ],
+ onSelected: (value) {
+ if (value == '/Create') {
+ Navigator.push(
+ context,
+ MaterialPageRoute(builder: (context) => CometChatContacts()),
+ );
+ }
+ },
+);
+```
+
+---
+
+### 2. Open Contacts Screen
+
+Navigate to the `CometChatContacts` screen which provides tabs for Users and Groups.
+
+_File: [dashboard.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart)_
+
+```dart
+void openCreateConversation(BuildContext context) {
+ Navigator.push(
+ context,
+ MaterialPageRoute(builder: (context) => CometChatContacts()),
+ );
+}
+```
+
+---
+
+### 3. Handle User/Group Selection
+
+Wire up the `onItemTap` callback to navigate to the chat screen when a user or group is selected.
+
+_File: [cometchat_contacts_controller.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/contacts/cometchat_contacts_controller.dart)_
+
+```dart
+CometChatUsers(
+ hideAppbar: true,
+ onItemTap: (context, user) => _onItemTap(context: context, user: user),
+);
+
+CometChatGroups(
+ hideAppbar: true,
+ onItemTap: (context, group) => _onItemTap(context: context, group: group),
+);
+```
+
+---
+
+### 4. Navigate to Chat
+
+Open the chat screen for the selected user or group using `PageManager`.
+
+_File: [page_manager.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/utils/page_manager.dart)_
+
+```dart
+void _onItemTap({required BuildContext context, User? user, Group? group}) {
+ if (user != null) {
+ PageManager.navigateToMessages(context: context, user: user);
+ } else if (group != null) {
+ JoinProtectedGroupUtils.onGroupItemTap(context, group);
+ }
+}
+```
+
+---
+
+## Feature Matrix
+
+| Feature | Component / Method | File |
+|:---|:---|:---|
+| Avatar menu | `PopupMenuButton`, `CometChatAvatar` | [dashboard.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart) |
+| Contacts screen | `CometChatContacts` | [dashboard.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart) |
+| List users | `CometChatUsers` | [cometchat_contacts_controller.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/contacts/cometchat_contacts_controller.dart) |
+| List groups | `CometChatGroups` | [cometchat_contacts_controller.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/contacts/cometchat_contacts_controller.dart) |
+| Handle selection | `_onItemTap` | [page_manager.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/utils/page_manager.dart) |
+| Navigate to chat | `PageManager.navigateToMessages` | [page_manager.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/utils/page_manager.dart) |
+
+---
+
+## Next Steps
+
+
+
+ Display and search user lists.
+
+
+ Display and manage group lists.
+
+
+ View and manage conversation history.
+
+
+ Browse all feature and formatter guides.
+
+
diff --git a/ui-kit/flutter/v5/guide-overview.mdx b/ui-kit/flutter/v5/guide-overview.mdx
new file mode 100644
index 000000000..3c4949eef
--- /dev/null
+++ b/ui-kit/flutter/v5/guide-overview.mdx
@@ -0,0 +1,67 @@
+---
+title: "Guides Overview"
+sidebarTitle: "Overview"
+description: "Task-oriented feature guides for implementing specific capabilities in the Flutter UI Kit"
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_chat_uikit` |
+| Purpose | Index of task-oriented feature guides for the Flutter UI Kit |
+| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
+| Components | [Components Overview](/ui-kit/flutter/v5/components-overview) |
+| Guides | [Block/Unblock](/ui-kit/flutter/v5/guide-block-unblock-user) · [Call Log Details](/ui-kit/flutter/v5/guide-call-log-details) · [Group Chat](/ui-kit/flutter/v5/guide-group-chat) · [Image Preview & Caption](/ui-kit/flutter/v5/guide-image-caption) · [Message Privately](/ui-kit/flutter/v5/guide-message-privately) · [New Chat](/ui-kit/flutter/v5/guide-new-chat) · [Search Messages](/ui-kit/flutter/v5/guide-search-messages) · [Threaded Messages](/ui-kit/flutter/v5/guide-threaded-messages) · [AI Agent](/ui-kit/flutter/v5/guide-message-agentic-flow) |
+
+
+
+This page indexes focused, task‑oriented feature guides for the Flutter UI Kit. Each guide shows how to implement a specific capability end‑to‑end using UI kit components.
+
+## When to Use These Guides
+
+Use these after finishing [Getting Started](/ui-kit/flutter/v5/getting-started) and wiring a basic conversations/messages experience. Add them incrementally to deepen functionality without rebuilding fundamentals.
+
+## Feature Guides
+
+| Guide | Description |
+|:------|:------------|
+| [Block / Unblock User](/ui-kit/flutter/v5/guide-block-unblock-user) | Let users block or unblock others; enforce privacy by hiding interaction options and preventing message flow. |
+| [Call Log Details](/ui-kit/flutter/v5/guide-call-log-details) | Provide a post‑call details screen with metadata, participants, history, and recordings for audit & support. |
+| [Group Management](/ui-kit/flutter/v5/guide-group-chat) | Create/join groups, view members, add / remove users, manage roles, and moderate participation. |
+| [Message Privately](/ui-kit/flutter/v5/guide-message-privately) | Start a direct 1:1 chat from a profile or list; optionally send an initial message to surface the conversation. |
+| [New Chat](/ui-kit/flutter/v5/guide-new-chat) | Offer a unified discovery screen for users & groups and launch new chats quickly. |
+| [Search Messages](/ui-kit/flutter/v5/guide-search-messages) | Full-text message search across conversations with result routing and navigation. |
+| [Threaded Messages](/ui-kit/flutter/v5/guide-threaded-messages) | Enable threaded replies: open parent message context, browse replies, and compose within a focused thread. |
+| [AI Agent Integration](/ui-kit/flutter/v5/guide-message-agentic-flow) | Integrate AI agents with chat history, contextual responses, and seamless handoffs. |
+| [Image Preview & Caption](/ui-kit/flutter/v5/guide-image-caption) | Preview images before sending and display captions below image thumbnails in message bubbles. |
+
+## Formatter Guides
+
+| Guide | Description |
+|:------|:------------|
+| [Custom Text Formatter](/ui-kit/flutter/v5/custom-text-formatter-guide) | Build custom inline text patterns with regex, styling, and callbacks. |
+| [Mentions Formatter](/ui-kit/flutter/v5/mentions-formatter-guide) | Add @mentions with user suggestions and styled tokens. |
+| [URL Formatter](/ui-kit/flutter/v5/url-formatter-guide) | Auto-detect and style URLs as clickable links. |
+| [Shortcut Formatter](/ui-kit/flutter/v5/shortcut-formatter-guide) | Create keyboard shortcuts for quick text insertion. |
+
+Need another guide? Request one via [CometChat Support](https://www.cometchat.com/support).
+
+---
+
+## Next Steps
+
+
+
+ Set up the Flutter UI Kit in your project
+
+
+ Explore all available UI components
+
+
+ Learn about core chat features
+
+
+ View complete working examples
+
+
diff --git a/ui-kit/flutter/guide-search-messages.mdx b/ui-kit/flutter/v5/guide-search-messages.mdx
similarity index 95%
rename from ui-kit/flutter/guide-search-messages.mdx
rename to ui-kit/flutter/v5/guide-search-messages.mdx
index bdf9382aa..325d24c29 100644
--- a/ui-kit/flutter/guide-search-messages.mdx
+++ b/ui-kit/flutter/v5/guide-search-messages.mdx
@@ -13,13 +13,13 @@ description: "Add full-text message search across conversations with result rout
| Init | `CometChatUIKit.init(uiKitSettings: uiKitSettings)` then `CometChatUIKit.login("UID")` |
| Purpose | Full-text message search across conversations with result routing and navigation |
| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
-| Related | [All Guides](/ui-kit/flutter/guide-overview) |
+| Related | [All Guides](/ui-kit/flutter/v5/guide-overview) |
Search Messages lets users locate specific messages across conversations and groups using keyword search, then navigate directly to the result.
-Before starting, complete the [Getting Started](/ui-kit/flutter/getting-started) guide.
+Before starting, complete the [Getting Started](/ui-kit/flutter/v5/getting-started) guide.
---
@@ -207,13 +207,13 @@ class SearchScreen extends StatelessWidget {
## Next Steps
-
+
Full search component reference.
-
+
Render real-time message threads.
-
+
Browse all feature and formatter guides.
diff --git a/ui-kit/flutter/v5/guide-threaded-messages.mdx b/ui-kit/flutter/v5/guide-threaded-messages.mdx
new file mode 100644
index 000000000..bc7cbb410
--- /dev/null
+++ b/ui-kit/flutter/v5/guide-threaded-messages.mdx
@@ -0,0 +1,194 @@
+---
+title: "Threaded Messages"
+sidebarTitle: "Threaded Messages"
+description: "Implement threaded message replies with parent context, reply list, and focused thread composer in CometChat Flutter UI Kit."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_chat_uikit` |
+| Key components | `CometChatThread`, `CometChatThreadedHeader`, `CometChatMessageList`, `CometChatMessageComposer` |
+| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login(uid)` |
+| Entry point | `CometChatMessageList.onThreadRepliesClick` opens thread view from messages |
+| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
+| Related | [All Guides](/ui-kit/flutter/v5/guide-overview) |
+
+
+
+Threaded messages let users create sub-conversations by replying to specific messages. This reduces clutter and keeps discussions focused.
+
+Before starting, complete the [Getting Started](/ui-kit/flutter/v5/getting-started) guide.
+
+---
+
+## Components
+
+| Component / Class | Role |
+|:---|:---|
+| `CometChatThread` | Main container widget for threaded messages |
+| `CometChatThreadedHeader` | Displays parent message and thread context |
+| `CometChatMessageList` | Shows messages filtered by `parentMessageId` |
+| `CometChatMessageComposer` | Input for composing threaded replies |
+| `MessagesRequestBuilder` | Builds request to fetch thread replies |
+
+---
+
+## Integration Steps
+
+### 1. Thread Trigger in Messages
+
+Wire the `onThreadRepliesClick` callback on `CometChatMessageList`. When a user clicks the thread reply icon on any message, this fires with the parent message object.
+
+_File: [messages.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/messages/messages.dart)_
+
+```dart
+CometChatMessageList(
+ onThreadRepliesClick: (BaseMessage message) {
+ Navigator.push(
+ context,
+ MaterialPageRoute(
+ builder: (_) => CometChatThread(
+ message: message,
+ user: user,
+ group: group,
+ ),
+ ),
+ );
+ },
+);
+```
+
+---
+
+### 2. Thread Screen Widget
+
+Create the thread screen with header, message list, and composer. The `CometChatThread` widget handles the complete thread UI.
+
+_File: [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart)_
+
+```dart
+class CometChatThread extends StatefulWidget {
+ const CometChatThread({
+ this.user,
+ this.group,
+ required this.message,
+ super.key,
+ });
+
+ final User? user;
+ final Group? group;
+ final BaseMessage message;
+
+ @override
+ State createState() => _CometChatThreadState();
+}
+```
+
+---
+
+### 3. Thread Header and Message List
+
+Display the parent message context and threaded replies using `CometChatThreadedHeader` and `CometChatMessageList` with `parentMessageId`.
+
+_File: [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart)_
+
+```dart
+Column(
+ children: [
+ CometChatThreadedHeader(
+ parentMessage: widget.message,
+ loggedInUser: CometChatUIKit.loggedInUser!,
+ ),
+ Expanded(
+ child: CometChatMessageList(
+ user: widget.user,
+ group: widget.group,
+ messagesRequestBuilder: MessagesRequestBuilder()
+ ..parentMessageId = widget.message.id,
+ ),
+ ),
+ ],
+)
+```
+
+---
+
+### 4. Thread Composer
+
+Add the message composer with `parentMessageId` to send replies in the thread context.
+
+_File: [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart)_
+
+```dart
+CometChatMessageComposer(
+ user: widget.user,
+ group: widget.group,
+ parentMessageId: widget.message.id,
+)
+```
+
+---
+
+### 5. Blocked User Handling
+
+When a user is blocked, replace the composer with an unblock prompt.
+
+_File: [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart)_
+
+```dart
+Widget getComposer(CometChatThreadController controller) {
+ if (controller.user?.blockedByMe == true) {
+ return Container(
+ padding: EdgeInsets.symmetric(vertical: 8, horizontal: 20),
+ child: Column(
+ children: [
+ Text(Translations.of(context).cantSendMessageBlockedUser),
+ ElevatedButton(
+ onPressed: () => controller.unBlockUser(),
+ child: Text(Translations.of(context).unBlock),
+ ),
+ ],
+ ),
+ );
+ }
+ return CometChatMessageComposer(
+ user: widget.user,
+ group: widget.group,
+ parentMessageId: widget.message.id,
+ );
+}
+```
+
+---
+
+## Feature Matrix
+
+| Feature | Component / Method | File |
+|:---|:---|:---|
+| Show thread option | `onThreadRepliesClick` | [messages.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/messages/messages.dart) |
+| Thread screen | `CometChatThread` | [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart) |
+| Thread header | `CometChatThreadedHeader` | [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart) |
+| Display thread msgs | `CometChatMessageList` | [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart) |
+| Compose reply | `CometChatMessageComposer` | [cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart) |
+| Thread controller | `CometChatThreadController` | [cometchat_thread_controller.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread_controller.dart) |
+
+---
+
+## Next Steps
+
+
+
+ Render real-time message threads.
+
+
+ Customize the thread header component.
+
+
+ Browse all feature and formatter guides.
+
+
+ Full working sample application on GitHub.
+
+
diff --git a/ui-kit/flutter/v5/incoming-call.mdx b/ui-kit/flutter/v5/incoming-call.mdx
new file mode 100644
index 000000000..1cd873a63
--- /dev/null
+++ b/ui-kit/flutter/v5/incoming-call.mdx
@@ -0,0 +1,428 @@
+---
+title: "Incoming Call"
+description: "Widget that serves as a visual representation when the user receives an incoming call, providing options to answer or decline."
+---
+
+```json
+{
+ "component": "CometChatIncomingCall",
+ "package": "cometchat_calls_uikit",
+ "import": "import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';",
+ "description": "Widget that serves as a visual representation when the user receives an incoming call, providing options to answer or decline.",
+ "props": {
+ "data": {
+ "call": { "type": "Call", "required": true },
+ "user": { "type": "User?", "default": "null" }
+ },
+ "callbacks": {
+ "onDecline": "Function(BuildContext, Call)?",
+ "onAccept": "Function(BuildContext, Call)?",
+ "onError": "OnError?"
+ },
+ "viewSlots": {
+ "titleView": "Widget? Function(BuildContext context, Call call)?",
+ "subTitleView": "Widget? Function(BuildContext context, Call call)?",
+ "leadingView": "Widget? Function(BuildContext context, Call call)?",
+ "itemView": "Widget? Function(BuildContext context, Call call)?",
+ "trailingView": "Widget? Function(BuildContext context, Call call)?"
+ },
+ "style": {
+ "incomingCallStyle": "CometChatIncomingCallStyle?"
+ },
+ "layout": {
+ "height": { "type": "double?", "default": "null" },
+ "width": { "type": "double?", "default": "null" }
+ },
+ "icons": {
+ "callIcon": "Widget?"
+ },
+ "text": {
+ "declineButtonText": "String?",
+ "acceptButtonText": "String?"
+ },
+ "sound": {
+ "disableSoundForCalls": { "type": "bool?", "default": "false" },
+ "customSoundForCalls": "String?",
+ "customSoundForCallsPackage": "String?"
+ },
+ "configuration": {
+ "callSettingsBuilder": "CallSettingsBuilder?"
+ }
+ }
+}
+```
+
+
+## Overview
+
+The `CometChatIncomingCall` is a [Widget](/ui-kit/flutter/v5/components-overview#components) that serves as a visual representation when the user receives an incoming call, such as a voice call or video call, providing options to answer or decline the call.
+
+
+
+
+
+***
+
+## Usage
+
+### Integration
+
+`CometChatIncomingCall` being a custom widget, offers versatility in its integration. It can be seamlessly launched via button clicks or any user-triggered action, enhancing the overall user experience and facilitating smoother interactions within the application.
+
+You can launch `CometChatIncomingCall` directly using `Navigator.push`, or you can define it as a widget within the `build` method of your `State` class.
+
+##### 1. Using Navigator to Launch `CometChatIncomingCall`
+
+
+
+```dart
+Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatIncomingCall(user: user, call: callObject))); // User object and Call object is required to launch the incoming call widget.
+```
+
+
+
+
+
+##### 2. Embedding `CometChatIncomingCall` as a Widget in the build Method
+
+
+
+```dart
+import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';
+import 'package:flutter/material.dart';
+
+class IncomingCallExample extends StatefulWidget {
+ const IncomingCallExample({super.key});
+
+ @override
+ State createState() => _IncomingCallExampleState();
+}
+
+class _IncomingCallExampleState extends State {
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: SafeArea(
+ child: CometChatIncomingCall(
+ user: user, // User Object
+ call: callObject
+ ), // User object and Call object is required to launch the incoming call widget.
+ ),
+ );
+ }
+}
+```
+
+
+
+
+
+***
+
+### Actions
+
+[Actions](/ui-kit/flutter/v5/components-overview#actions) dictate how a widget functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the widget to fit your specific needs.
+
+##### 1. onAccept
+
+The `onAccept` action is typically triggered when the user clicks on the accept button, initiating a predefined action. However, by implementing the following code snippet, you can easily customize or override this default behavior to suit your specific requirements.
+
+
+
+```dart
+CometChatIncomingCall(
+ user: user, // User Object
+ call: callObject, // Call Object
+ onAccept: (BuildContext context, Call call) {
+ // TODO("Not yet implemented")
+ },
+)
+```
+
+
+
+
+
+***
+
+##### 2. onDecline
+
+The `onDecline` action is typically triggered when the user clicks on the reject button, initiating a predefined action. However, by implementing the following code snippet, you can easily customize or override this default behavior to suit your specific requirements.
+
+
+
+```dart
+CometChatIncomingCall(
+ user: user, // User Object
+ call: callObject, // Call Object
+ onDecline: (BuildContext context, Call call) {
+ // TODO("Not yet implemented")
+ },
+)
+```
+
+
+
+
+
+***
+
+##### 3. onError
+
+You can customize this behavior by using the provided code snippet to override the `onError` and improve error handling.
+
+
+
+```dart
+CometChatIncomingCall(
+ user: user, // User Object
+ call: callObject, // Call Object
+ onError: (e) {
+ // TODO("Not yet implemented")
+ },
+)
+```
+
+
+
+
+
+***
+
+### Filters
+
+**Filters** allow you to customize the data displayed in a list within a Widget. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK.
+
+The `CometChatIncomingCall` widget does not have any exposed filters.
+
+***
+
+### Events
+
+[Events](/ui-kit/flutter/v5/components-overview#events) are emitted by a `Widget`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.
+
+The `CometChatIncomingCall` widget does not have any exposed events.
+
+***
+
+## Customization
+
+To fit your app's design requirements, you can customize the appearance of the conversation widget. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.
+
+### Style
+
+You can customize the appearance of the `CometChatIncomingCall` Widget by applying the `CometChatIncomingCallStyle` to it using the following code snippet.
+
+Here is the complete example for reference:
+
+
+
+```dart
+CometChatIncomingCall(
+ user: user, // User Object
+ call: callObject, // Call Object
+ incomingCallStyle: CometChatIncomingCallStyle(
+ backgroundColor: Color(0xFFEDEAFA),
+ avatarStyle: CometChatAvatarStyle(
+ backgroundColor: Color(0xFFAA9EE8),
+ borderRadius: BorderRadius.circular(7.5),
+ ),
+ acceptButtonColor: Color(0xFF6852D6),
+ declineButtonColor: Colors.white,
+ declineTextColor: Color(0xFFF44649),
+ callIconColor: Color(0xFF6852D6),
+ ),
+)
+```
+
+
+
+
+
+
+
+
+
+***
+
+### Functionality
+
+These are a set of small functional customizations that allow you to fine-tune the overall experience of the widget. With these, you can change text, set custom icons, and toggle the visibility of UI elements.
+
+**Example**
+
+In this example, we're enhancing the interface by customizing the accept and decline button icons. By setting custom icons for both the accept and decline buttons, users can enjoy a more visually appealing and personalized experience.
+
+This level of customization allows developers to tailor the user interface to match the overall theme and branding of their application.
+
+Here is the complete example for reference:
+
+
+
+```dart
+CometChatIncomingCall(
+ user: user, // User Object
+ call: callObject, // Call Object
+ disableSoundForCalls: true,
+ declineButtonText: "Decline",
+ acceptButtonText: "Accept"
+)
+```
+
+
+
+
+
+
+
+
+
+Below is a list of customizations along with corresponding code snippets
+
+| **Property** | Description | Code |
+| ----------------------------------- | ------------------------------------------------- | -------------------------------------- |
+| **Accept Button Text** | Sets the text for the accept button. | `acceptButtonText: String?` |
+| **Custom Sound For Calls** | Sets the custom sound for incoming calls. | `customSoundForCalls: String?` |
+| **Call Icon** | Sets the Call Icon. | `callIcon: Widget?` |
+| **Decline Button Icon Url Package** | Sets the package for the decline button icon URL. | `declineButtonIconUrlPackage: String?` |
+| **Decline Button Text** | Sets the text for the decline button. | `declineButtonText: String?` |
+| **Disable Sound For Calls** | Disables sound for incoming calls. | `disableSoundForCalls: bool?` |
+
+***
+
+### Advanced
+
+For advanced-level customization, you can set custom widget to the widget. This lets you tailor each aspect of the widget to fit your exact needs and application aesthetics. You can create and define your widget, layouts, and UI elements and then incorporate those into the widget.
+
+***
+
+### itemView
+
+Allows setting a custom item view to be rendered.
+
+Use Cases:
+
+* Customize the call card UI for incoming calls.
+* Display additional user details (e.g., caller ID, location).
+* Integrate custom animations for call alerts.
+
+
+
+```dart
+CometChatIncomingCall(
+ itemView: (context, call) {
+ // return itemView
+ },
+)
+```
+
+
+
+
+
+***
+
+### leadingView
+
+Customizes the leading section of the component, usually the caller’s avatar or profile picture.
+
+Use Cases:
+
+* Display a profile picture with call status effects.
+* Show a custom ringing animation around the avatar.
+* Replace the avatar with a caller ID card.
+
+
+
+```dart
+CometChatIncomingCall(
+ leadingView: (context, call) {
+ // return leadingView
+ },
+)
+```
+
+
+
+
+
+***
+
+### titleView
+
+Allows setting a custom title view, typically used for the caller’s name or call type.
+
+Use Cases:
+
+* Display the caller’s full name with a verified badge.
+* Indicate the call type (Voice Call, Video Call).
+* Show real-time status ("Ringing...", "Call from Work Contact", etc.).
+
+
+
+```dart
+CometChatIncomingCall(
+ titleView: (context, call) {
+ // return titleView
+ },
+)
+```
+
+
+
+
+
+***
+
+### subtitleView
+
+Enables customizing the subtitle view, typically used for additional call details.
+
+Use Cases:
+
+* Display call duration if available.
+* Show network strength indicators.
+* Include a custom message like "Connecting...".
+
+
+
+```dart
+CometChatIncomingCall(
+ subTitleView: (context, call) {
+ // return subTitleView
+ },
+)
+```
+
+
+
+
+
+***
+
+### trailingView
+
+Customizes the trailing section for actions or additional call-related UI elements.
+
+Use Cases:
+
+* Add custom accept/reject buttons.
+* Show a mute button before answering.
+* Display a text response option (e.g., "Can’t talk now").
+
+
+
+```dart
+CometChatIncomingCall(
+ titleView: (context, call) {
+ // return titleView
+ },
+)
+```
+
+
+
+
+
+***
diff --git a/ui-kit/flutter/v5/localize.mdx b/ui-kit/flutter/v5/localize.mdx
new file mode 100644
index 000000000..54cb44c11
--- /dev/null
+++ b/ui-kit/flutter/v5/localize.mdx
@@ -0,0 +1,184 @@
+---
+title: "Localization"
+sidebarTitle: "Localize"
+description: "Configure multi-language localization and custom translations in CometChat Flutter UI Kit."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_uikit_shared` |
+| Import | `import 'package:cometchat_uikit_shared/l10n/translations.dart';` |
+| Set language | Add `Locale('fr')` to `supportedLocales` |
+| Delegates | `Translations.delegate`, `GlobalMaterialLocalizations.delegate`, etc. |
+| Supported | 18 languages: ar, de, en, en-GB, es, fr, hi, hu, ja, ko, lt, ms, nl, pt, ru, sv, tr, zh |
+| Source | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/shared_uikit/lib/l10n) |
+
+
+
+`Translations` manages multi-language localization for the UI Kit.
+
+---
+
+## Supported Languages
+
+| Language | Code |
+| --- | --- |
+| Arabic | `ar` |
+| German | `de` |
+| English | `en` |
+| English (UK) | `en-GB` |
+| Spanish | `es` |
+| French | `fr` |
+| Hindi | `hi` |
+| Hungarian | `hu` |
+| Japanese | `ja` |
+| Korean | `ko` |
+| Lithuanian | `lt` |
+| Malay | `ms` |
+| Dutch | `nl` |
+| Portuguese | `pt` |
+| Russian | `ru` |
+| Swedish | `sv` |
+| Turkish | `tr` |
+| Chinese | `zh` |
+
+---
+
+## Setup
+
+Add the dependency in `pubspec.yaml`:
+
+```yaml
+flutter_localizations:
+ sdk: flutter
+```
+
+Configure `MaterialApp`:
+
+```dart
+import 'package:cometchat_uikit_shared/l10n/translations.dart';
+import 'package:flutter_localizations/flutter_localizations.dart';
+
+MaterialApp(
+ supportedLocales: const [
+ Locale('en'),
+ Locale('fr'),
+ Locale('es'),
+ Locale('de'),
+ // Add more as needed
+ ],
+ localizationsDelegates: Translations.localizationsDelegates,
+ home: MyApp(),
+)
+```
+
+---
+
+## Get Translated Strings
+
+```dart
+String translatedString = Translations.of(context).users;
+Text(translatedString);
+```
+
+---
+
+## Custom Translations
+
+Override default translations by extending the language class:
+
+```dart
+import 'package:cometchat_uikit_shared/l10n/translations.dart';
+import 'package:flutter/foundation.dart';
+
+class CustomEN extends TranslationsEn {
+ static const delegate = _CustomLocalizationsDelegate();
+
+ @override
+ String get chats => "My Chats";
+
+ @override
+ String get calls => "My Calls";
+}
+
+class _CustomLocalizationsDelegate extends LocalizationsDelegate {
+ const _CustomLocalizationsDelegate();
+
+ @override
+ bool isSupported(Locale locale) => locale.languageCode == 'en';
+
+ @override
+ Future load(Locale locale) => SynchronousFuture(CustomEN());
+
+ @override
+ bool shouldReload(_CustomLocalizationsDelegate old) => false;
+}
+```
+
+Then add to `MaterialApp`:
+
+```dart
+localizationsDelegates: const [
+ CustomEN.delegate, // Custom override first
+ ...Translations.localizationsDelegates,
+],
+```
+
+---
+
+## Add New Language
+
+Create a custom translation class for unsupported languages:
+
+```dart
+import 'package:cometchat_uikit_shared/l10n/translations.dart';
+import 'package:flutter/foundation.dart';
+
+class TeluguTranslations extends Translations {
+ TeluguTranslations([super.locale = "te"]);
+ static const delegate = _TeluguDelegate();
+
+ @override
+ String get chats => "సందేశాలు";
+
+ @override
+ String get calls => "ఫోన్ కాల్స్";
+
+ // Override all required getters from Translations...
+}
+
+class _TeluguDelegate extends LocalizationsDelegate {
+ const _TeluguDelegate();
+
+ @override
+ bool isSupported(Locale locale) => locale.languageCode == 'te';
+
+ @override
+ Future load(Locale locale) => SynchronousFuture(TeluguTranslations());
+
+ @override
+ bool shouldReload(_TeluguDelegate old) => false;
+}
+```
+
+Then add to `MaterialApp`:
+
+```dart
+localizationsDelegates: const [
+ TeluguTranslations.delegate, // Custom language first
+ ...Translations.localizationsDelegates,
+],
+supportedLocales: const [
+ Locale('te'), // Telugu
+ Locale('en'),
+ // Other locales...
+],
+```
+
+---
+
+## Date/Time Formatting
+
+Customize date/time display globally via `DateTimeFormatterCallback`. See [CometChatUIKit Methods](/ui-kit/flutter/v5/methods#dateformatter) for details.
diff --git a/ui-kit/flutter/v5/mentions-formatter-guide.mdx b/ui-kit/flutter/v5/mentions-formatter-guide.mdx
new file mode 100644
index 000000000..56ea5af90
--- /dev/null
+++ b/ui-kit/flutter/v5/mentions-formatter-guide.mdx
@@ -0,0 +1,357 @@
+---
+title: "Mentions Formatter"
+description: "Add @mentions with user suggestions and styled tokens in CometChat Flutter UI Kit."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_chat_uikit` |
+| Key class | `CometChatMentionsFormatter` (extends `CometChatTextFormatter`) |
+| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login(uid)` |
+| Purpose | Add @mentions with user suggestions, styled tokens, and click handling |
+| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
+| Related | [Custom Text Formatter](/ui-kit/flutter/v5/custom-text-formatter-guide) · [Custom Mentions Formatter](/ui-kit/flutter/v5/custom-mentions-formatter-guide) · [All Guides](/ui-kit/flutter/v5/guide-overview) |
+
+
+
+## Overview
+
+The `CometChatMentionsFormatter` class is a part of the CometChat UI Kit, a ready-to-use chat UI widget library for integrating CometChat into your Android applications. This class provides functionality to format mentions within text messages displayed in the chat interface. Mentions allow users to reference other users within a conversation, providing a convenient way to direct messages or involve specific participants.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Features
+
+* **Mention Formatting**: Automatically formats mentions within text messages based on provided styles and settings.
+* **Customizable Styles**: Allows customization of text styles for mentions, including colors, fonts, and background colors.
+* **User and Group Member Mentions**: Supports mentions for both individual users and group members, providing flexibility in communication scenarios.
+* **Mention List Generation**: Generates a list of suggested mentions based on user input, facilitating easy selection of recipients during message composition.
+* **Mention Click Handling**: Provides a listener interface for handling click events on mentions, enabling custom actions to be performed when a mention is tapped by the user.
+
+## Usage
+
+To integrate the `CometChatMentionsFormatter` class into your application:
+
+1. **Initialization**: Create an instance of the `CometChatMentionsFormatter` class and configure it with desired settings, such as mention text styles and limit settings.
+
+2. **Set Mention Listeners**: Set listeners for handling mention click events (`setOnMentionClick`).
+
+3. **Format Messages**: Use the `prepareLeftMessageBubbleSpan`, `prepareRightMessageBubbleSpan`, `prepareComposerSpan`, and `prepareConversationSpan` methods to format text messages with mentions appropriately for display in the chat interface.
+
+4. **Customization**: Customize the appearance and behavior of mentions by adjusting the text styles, colors, and other formatting properties as needed.
+
+Below is an example demonstrating how to use the `CometChatMentionsFormatter` class in widgets such as [CometChatConversations](/ui-kit/flutter/v5/conversations), [CometChatMessageList](/ui-kit/flutter/v5/message-list), [CometChatMessageComposer](/ui-kit/flutter/v5/message-composer).
+
+
+
+```dart
+textFormatters: [
+ CometChatMentionsFormatter(
+ messageBubbleTextStyle: (theme, alignment,{forConversation = false}) =>
+ TextStyle(
+ color: alignment==BubbleAlignment.left? Colors.orange : Colors.pink,
+ fontSize: 14,
+ fontWeight: FontWeight.bold
+ ),
+ )
+]
+```
+
+
+
+
+
+***
+
+## Actions
+
+[Actions](/ui-kit/flutter/v5/components-overview#actions) dictate how a widget functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the widget to fit your specific needs.
+
+##### onMentionTap
+
+Setting a listener for mention-click events in Message Bubbles enhances interactivity within the chat. This listener is activated when a mention is clicked, returning the corresponding user object. This feature transforms mentions into interactive links, enabling more in-depth and contextual engagement with the user associated with the clicked mention.
+
+
+
+```dart
+CometChatMessages(
+ user: user,
+ messageListConfiguration: MessageListConfiguration(
+ textFormatters: [
+ CometChatMentionsFormatter(
+ onMentionTap: (mention, mentionedUser, {message}) {
+ final snackBar = SnackBar(
+ content: const Text('Tap on Mentioned User', style: TextStyle(color: Colors.lightBlueAccent)),
+ action: SnackBarAction(
+ label: 'Undo',
+ onPressed: () {
+ // TODO("Not yet implemented")
+ },
+ ),
+ );
+ ScaffoldMessenger.of(context).showSnackBar(snackBar);
+ },
+ messageBubbleTextStyle: (theme, alignment,{forConversation = false}) => TextStyle(
+ color: alignment==BubbleAlignment.left? Colors.orange : Colors.greenAccent,
+ fontSize: 14,
+ fontWeight: FontWeight.bold
+ ),
+ )
+ ]
+ ),
+)
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+***
+
+## Customization
+
+| **Property** | **Description** | **Code** |
+| ------------------------------ | -------------------------------------------------------------- | -------------------------------------------------------- |
+| **trackingCharacter** | The character that triggers the mention search. | `String? trackingCharacter` |
+| **pattern** | The regex pattern to identify mentions. | `RegExp? pattern` |
+| **showLoadingIndicator** | Whether to show a loading indicator during mention search. | `bool? showLoadingIndicator` |
+| **onSearch** | Callback function to perform search when mention is triggered. | `void Function(String)? onSearch` |
+| **onError** | Callback function to handle errors during mention search. | `void Function(String)? onError` |
+| **message** | The message in which mentions are to be formatted. | `String? message` |
+| **messageBubbleTextStyle** | The text style for the message bubble. | `TextStyle? messageBubbleTextStyle` |
+| **messageInputTextStyle** | The text style for the message input. | `TextStyle? messageInputTextStyle` |
+| **composerId** | The unique identifier for the composer. | `String? composerId` |
+| **suggestionListEventSink** | The event sink for the suggestion list. | `EventSink>? suggestionListEventSink` |
+| **previousTextEventSink** | The event sink for the previous text before mention. | `EventSink? previousTextEventSink` |
+| **user** | The user to be mentioned. | `User? user` |
+| **group** | The group in which mentions are to be formatted. | `Group? group` |
+| **groupMembersRequestBuilder** | The request builder for fetching group members to mention. | `GroupMembersRequestBuilder? groupMembersRequestBuilder` |
+| **usersRequestBuilder** | The request builder for fetching users to mention. | `UsersRequestBuilder? usersRequestBuilder` |
+| **mentionsType** | The type of mentions (e.g., user, group). | `MentionsType? mentionsType` |
+| **onMentionTap** | Callback function to handle mention tap actions. | `void Function(User)? onMentionTap` |
+| **visibleIn** | Defines where the mentions are visible. | `Set? visibleIn` |
+| **style** | Style configuration for customizing mention appearance. | `CometChatMentionsStyle? style` |
+| **disableMentions** | Disables mentions in the composer (default: false). | `bool disableMentions` |
+| **disableMentionAll** | Controls whether @all mention is enabled (default: false). | `bool disableMentionAll` |
+| **mentionAllLabel** | Custom label to display for @all mention. | `String? mentionAllLabel` |
+| **mentionAllLabelId** | Custom ID for @all mention (default: "all"). | `String? mentionAllLabelId` |
+
+***
+
+## Advance
+
+For advanced-level customization, you can set the style of the Mentions formatters. This lets you tailor each aspect of the widget to fit your exact needs and application aesthetics. You can create and define your formatters style.
+
+### Custom Mentions Formatter
+
+For deeper customization — such as filtering who appears in the suggestion list, transforming suggestions before they reach the UI, or handling mention taps with custom logic — you can extend `CometChatMentionsFormatter` and override its behavior. See the [Custom Mentions Formatter](/ui-kit/flutter/v5/custom-mentions-formatter-guide) guide for a full walkthrough.
+
+### @all Mention Feature
+
+The `CometChatMentionsFormatter` supports mentioning all members in a group using the @all feature. When enabled, users can type `@` followed by "all" (or a custom label) to notify everyone in the group.
+
+
+
+```dart
+CometChatMessages(
+ group: group,
+ messageComposerConfiguration: MessageComposerConfiguration(
+ textFormatters: [
+ CometChatMentionsFormatter(
+ disableMentionAll: false, // Enable @all mention (default)
+ mentionAllLabel: "everyone", // Custom label (optional)
+ mentionAllLabelId: "all", // Custom ID (optional)
+ )
+ ]
+ ),
+)
+```
+
+
+
+
+
+To disable the @all mention feature:
+
+
+
+```dart
+CometChatMentionsFormatter(
+ disableMentionAll: true, // Disable @all mention
+)
+```
+
+
+
+
+
+***
+
+### Composer Mention Text Style
+
+Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source. To configure the existing Mentions look and feel for [CometChatMessageComposer](/ui-kit/flutter/v5/message-composer) refer to the below code snippet
+
+
+
+```dart
+CometChatMessages(
+ user: user,
+ messageComposerConfiguration: MessageComposerConfiguration(
+ textFormatters: [
+ CometChatMentionsFormatter(
+ messageInputTextStyle: (theme) {
+ return const TextStyle(
+ color: Colors.lightBlueAccent,
+ fontSize: 14,
+ fontWeight: FontWeight.bold
+ );
+ },
+ )
+ ]
+ )
+)
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+***
+
+### Message Bubble Mention Text Style
+
+Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source. To configure the existing Mentions look and feel for [CometChatMessageList](/ui-kit/flutter/v5/message-list)
+
+
+
+```dart
+CometChatMessages(
+ user: user,
+ messageListConfiguration: MessageListConfiguration(
+ textFormatters: [
+ CometChatMentionsFormatter(
+ messageBubbleTextStyle: (theme, alignment,{forConversation = false}) => TextStyle(
+ color: alignment==BubbleAlignment.left? Colors.orange : Colors.greenAccent,
+ fontSize: 14,
+ fontWeight: FontWeight.bold
+ ),
+ )
+ ]
+ ),
+)
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+***
+
+### Conversations Mention Text Style
+
+Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source. To configure the existing Mentions look and feel for [CometChatConversations](/ui-kit/flutter/v5/conversations)
+
+
+
+```dart
+CometChatConversations(
+ textFormatters: [
+ CometChatMentionsFormatter(
+ messageBubbleTextStyle: (theme, alignment,{forConversation = false}) =>
+ const TextStyle(
+ color: Colors.lightBlueAccent,
+ fontSize: 14,
+ fontWeight: FontWeight.bold
+ ),
+ )
+ ],
+)
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+***
+
+## Next Steps
+
+
+
+ Build a custom mentions formatter with filtered suggestions.
+
+
+ Build custom inline text patterns with regex.
+
+
+ Customize the standard message input component.
+
+
+ Browse all feature and formatter guides.
+
+
diff --git a/ui-kit/flutter/v5/message-bubble-styling.mdx b/ui-kit/flutter/v5/message-bubble-styling.mdx
new file mode 100644
index 000000000..3b5fd03ca
--- /dev/null
+++ b/ui-kit/flutter/v5/message-bubble-styling.mdx
@@ -0,0 +1,357 @@
+---
+title: "Message Bubble Styling"
+sidebarTitle: "Message Bubbles"
+description: "Customize incoming and outgoing message bubbles in CometChat Flutter UI Kit."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Outgoing | `CometChatOutgoingMessageBubbleStyle` |
+| Incoming | `CometChatIncomingMessageBubbleStyle` |
+| Action | `CometChatActionBubbleStyle` |
+| AI Assistant | `CometChatAiAssistantBubbleStyle` |
+| Usage | Add to `ThemeData.extensions` or pass to `CometChatMessageListStyle` |
+| Bubble types | Text, Image, Video, Audio, File, Poll, Sticker, Voice Call, Video Call, Link Preview, Collaborative Document, Collaborative Whiteboard, Message Translation, Deleted, Action, AI Assistant |
+| Source | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/shared_uikit/lib/src/models/extension_bubble_styles) |
+
+
+
+Customize message bubbles using `CometChatOutgoingMessageBubbleStyle` and `CometChatIncomingMessageBubbleStyle`.
+
+
+
+
+
+---
+
+## Global Theming
+
+Apply bubble styles globally via `ThemeData.extensions`:
+
+```dart
+MaterialApp(
+ theme: ThemeData(
+ extensions: [
+ CometChatOutgoingMessageBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ ),
+ CometChatIncomingMessageBubbleStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ ),
+ ],
+ ),
+)
+```
+
+
+
+
+
+---
+
+## Component-Level Styling
+
+Pass styles directly to `CometChatMessageList`:
+
+```dart
+CometChatMessageList(
+ user: user,
+ style: CometChatMessageListStyle(
+ outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ ),
+ incomingMessageBubbleStyle: CometChatIncomingMessageBubbleStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ ),
+ ),
+)
+```
+
+---
+
+## Bubble Types
+
+### Text Bubble
+
+
+
+
+
+```dart
+CometChatOutgoingMessageBubbleStyle(
+ textBubbleStyle: CometChatTextBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ ),
+)
+```
+
+### Image Bubble
+
+
+
+
+
+```dart
+CometChatOutgoingMessageBubbleStyle(
+ imageBubbleStyle: CometChatImageBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ ),
+)
+```
+
+### Video Bubble
+
+
+
+
+
+```dart
+CometChatOutgoingMessageBubbleStyle(
+ videoBubbleStyle: CometChatVideoBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ playIconColor: Color(0xFFF76808),
+ ),
+)
+```
+
+### Audio Bubble
+
+
+
+
+
+```dart
+CometChatIncomingMessageBubbleStyle(
+ audioBubbleStyle: CometChatAudioBubbleStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ downloadIconColor: Color(0xFFF76808),
+ audioBarColor: Color(0xFFF76808),
+ playIconColor: Color(0xFFF76808),
+ ),
+)
+```
+
+### File Bubble
+
+
+
+
+
+```dart
+CometChatIncomingMessageBubbleStyle(
+ fileBubbleStyle: CometChatFileBubbleStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ downloadIconTint: Color(0xFFF76808),
+ ),
+)
+```
+
+### Poll Bubble
+
+
+
+
+
+```dart
+CometChatOutgoingMessageBubbleStyle(
+ pollsBubbleStyle: CometChatPollsBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ progressBackgroundColor: Color(0xFFFBAA75),
+ iconColor: Color(0xFFF76808),
+ ),
+)
+```
+
+### Call Bubble
+
+
+
+
+
+```dart
+CometChatOutgoingMessageBubbleStyle(
+ videoCallBubbleStyle: CometChatCallBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ iconColor: Color(0xFFF76808),
+ buttonTextStyle: TextStyle(color: Colors.white),
+ dividerColor: Color(0xFFFBAA75),
+ ),
+)
+```
+
+### Link Preview Bubble
+
+
+
+
+
+```dart
+CometChatOutgoingMessageBubbleStyle(
+ linkPreviewBubbleStyle: CometChatLinkPreviewBubbleStyle(
+ backgroundColor: Color(0xFFFBAA75),
+ ),
+ textBubbleStyle: CometChatTextBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ ),
+)
+```
+
+### Deleted Message Bubble
+
+
+
+
+
+```dart
+CometChatOutgoingMessageBubbleStyle(
+ deletedBubbleStyle: CometChatDeletedBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ ),
+)
+```
+
+### Collaborative Bubbles
+
+
+
+
+
+```dart
+// Collaborative Whiteboard
+CometChatOutgoingMessageBubbleStyle(
+ collaborativeWhiteboardBubbleStyle: CometChatCollaborativeBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ iconTint: Color(0xFFFFFFFF),
+ titleStyle: TextStyle(fontWeight: FontWeight.bold, color: Color(0xFFFFFFFF)),
+ buttonTextStyle: TextStyle(color: Color(0xFFFFFFFF)),
+ dividerColor: Color(0xFFFBAA75),
+ ),
+)
+
+// Collaborative Document
+CometChatOutgoingMessageBubbleStyle(
+ collaborativeDocumentBubbleStyle: CometChatCollaborativeBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ iconTint: Color(0xFFFFFFFF),
+ titleStyle: TextStyle(fontWeight: FontWeight.bold, color: Color(0xFFFFFFFF)),
+ buttonTextStyle: TextStyle(color: Color(0xFFFFFFFF)),
+ dividerColor: Color(0xFFFBAA75),
+ ),
+)
+```
+
+### Sticker Bubble
+
+```dart
+CometChatOutgoingMessageBubbleStyle(
+ stickerBubbleStyle: CometChatStickerBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ borderRadius: BorderRadius.circular(12),
+ ),
+)
+```
+
+### Voice Call Bubble
+
+```dart
+CometChatOutgoingMessageBubbleStyle(
+ voiceCallBubbleStyle: CometChatCallBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ iconColor: Color(0xFFFFFFFF),
+ buttonTextStyle: TextStyle(color: Colors.white),
+ ),
+)
+```
+
+### Action Message Bubble
+
+Style activity-driven notifications like "User joined" or "User left":
+
+```dart
+ThemeData(
+ extensions: [
+ CometChatActionBubbleStyle(
+ textStyle: TextStyle(color: Color(0xFFF76808)),
+ border: Border.all(color: Color(0xFFF76808)),
+ backgroundColor: Color(0xFFFEEDE1),
+ ),
+ ],
+)
+```
+
+### AI Assistant Bubble
+
+```dart
+ThemeData(
+ extensions: [
+ CometChatAiAssistantBubbleStyle(
+ backgroundColor: Colors.transparent,
+ textColor: Color(0xFF141414),
+ textStyle: TextStyle(fontFamily: 'Roboto'),
+ ),
+ ],
+)
+```
+
+---
+
+## Style Properties Reference
+
+### CometChatOutgoingMessageBubbleStyle
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `backgroundColor` | `Color?` | Background color of the message bubble |
+| `border` | `BoxBorder?` | Border of the message bubble |
+| `borderRadius` | `BorderRadiusGeometry?` | Border radius of the message bubble |
+| `messageBubbleBackgroundImage` | `DecorationImage?` | Background image for the bubble |
+| `threadedMessageIndicatorTextStyle` | `TextStyle?` | Text style for threaded message indicator |
+| `threadedMessageIndicatorIconColor` | `Color?` | Icon color for threaded message indicator |
+| `messageBubbleAvatarStyle` | `CometChatAvatarStyle?` | Style for sender avatar |
+| `messageReceiptStyle` | `CometChatMessageReceiptStyle?` | Style for message receipts |
+| `messageBubbleReactionStyle` | `CometChatReactionsStyle?` | Style for message reactions |
+| `messageBubbleDateStyle` | `CometChatDateStyle?` | Style for message date |
+| `textBubbleStyle` | `CometChatTextBubbleStyle?` | Style for text messages |
+| `imageBubbleStyle` | `CometChatImageBubbleStyle?` | Style for image messages |
+| `videoBubbleStyle` | `CometChatVideoBubbleStyle?` | Style for video messages |
+| `audioBubbleStyle` | `CometChatAudioBubbleStyle?` | Style for audio messages |
+| `fileBubbleStyle` | `CometChatFileBubbleStyle?` | Style for file messages |
+| `pollsBubbleStyle` | `CometChatPollsBubbleStyle?` | Style for poll messages |
+| `stickerBubbleStyle` | `CometChatStickerBubbleStyle?` | Style for sticker messages |
+| `voiceCallBubbleStyle` | `CometChatCallBubbleStyle?` | Style for voice call bubbles |
+| `videoCallBubbleStyle` | `CometChatCallBubbleStyle?` | Style for video call bubbles |
+| `linkPreviewBubbleStyle` | `CometChatLinkPreviewBubbleStyle?` | Style for link preview bubbles |
+| `collaborativeDocumentBubbleStyle` | `CometChatCollaborativeBubbleStyle?` | Style for collaborative document bubbles |
+| `collaborativeWhiteboardBubbleStyle` | `CometChatCollaborativeBubbleStyle?` | Style for collaborative whiteboard bubbles |
+| `messageTranslationBubbleStyle` | `CometChatMessageTranslationBubbleStyle?` | Style for translated messages |
+| `deletedBubbleStyle` | `CometChatDeletedBubbleStyle?` | Style for deleted messages |
+| `moderationStyle` | `CometChatModerationStyle?` | Style for moderated messages |
+| `messagePreviewStyle` | `CometChatMessagePreviewStyle?` | Style for message previews |
+| `exceptionStyle` | `CometChatExceptionStyle?` | Style for exception views |
+
+### CometChatIncomingMessageBubbleStyle
+
+Includes all properties from `CometChatOutgoingMessageBubbleStyle` except `messageReceiptStyle`, `moderationStyle`, and `exceptionStyle`, plus:
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `senderNameTextStyle` | `TextStyle?` | Text style for sender name |
+| `aiAssistantBubbleStyle` | `CometChatAIAssistantBubbleStyle?` | Style for AI assistant bubbles |
+
+### CometChatActionBubbleStyle
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `backgroundColor` | `Color?` | Background color of action bubble |
+| `border` | `BoxBorder?` | Border of action bubble |
+| `textStyle` | `TextStyle?` | Text style for action message |
+
+### CometChatAiAssistantBubbleStyle
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `backgroundColor` | `Color?` | Background color of AI assistant bubble |
+| `textColor` | `Color?` | Text color |
+| `textStyle` | `TextStyle?` | Text style for AI messages |
diff --git a/ui-kit/flutter/v5/message-composer.mdx b/ui-kit/flutter/v5/message-composer.mdx
new file mode 100644
index 000000000..527704b92
--- /dev/null
+++ b/ui-kit/flutter/v5/message-composer.mdx
@@ -0,0 +1,588 @@
+---
+title: "Message Composer"
+description: "A widget that enables users to write and send messages with attachments and reactions"
+---
+
+
+```json
+{
+ "component": "CometChatMessageComposer",
+ "package": "cometchat_chat_uikit",
+ "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
+ "description": "A widget that enables users to write and send a variety of messages, including text, image, video, and custom messages. Features such as Live Reaction, Attachments, and Message Editing are also supported.",
+ "primaryOutput": {
+ "prop": "onSendButtonTap",
+ "type": "Function(BuildContext, BaseMessage, PreviewMessageMode?)?"
+ },
+ "props": {
+ "data": {
+ "user": {
+ "type": "User?",
+ "default": "null",
+ "note": "User object for the message composer (one of user or group is required)"
+ },
+ "group": {
+ "type": "Group?",
+ "default": "null",
+ "note": "Group object for the message composer (one of user or group is required)"
+ },
+ "text": {
+ "type": "String?",
+ "default": "null",
+ "note": "Initial text for the input field"
+ },
+ "parentMessageId": {
+ "type": "int",
+ "default": "0",
+ "note": "ID of the parent message for threaded replies"
+ }
+ },
+ "callbacks": {
+ "onChange": "Function(String)?",
+ "onSendButtonTap": "Function(BuildContext, BaseMessage, PreviewMessageMode?)?",
+ "onError": "OnError?"
+ },
+ "visibility": {
+ "hideVoiceRecordingButton": { "type": "bool?", "default": null },
+ "hideSendButton": { "type": "bool?", "default": null },
+ "hideAttachmentButton": { "type": "bool?", "default": null },
+ "hideStickersButton": { "type": "bool?", "default": null },
+ "disableMentions": { "type": "bool?", "default": null },
+ "disableTypingEvents": { "type": "bool", "default": false }
+ },
+ "sound": {
+ "disableSoundForMessages": { "type": "bool", "default": false },
+ "customSoundForMessage": { "type": "String?", "default": null }
+ },
+ "viewSlots": {
+ "auxiliaryButtonView": "ComposerWidgetBuilder?",
+ "secondaryButtonView": "ComposerWidgetBuilder?",
+ "sendButtonView": "Widget?",
+ "headerView": "ComposerWidgetBuilder?",
+ "footerView": "ComposerWidgetBuilder?"
+ },
+ "formatting": {
+ "placeholderText": { "type": "String?", "default": null },
+ "maxLine": { "type": "int?", "default": null },
+ "padding": { "type": "EdgeInsetsGeometry?", "default": null }
+ }
+ },
+ "events": [],
+ "sdkListeners": [],
+ "compositionExample": {
+ "description": "CometChatMessageComposer is typically used at the bottom of a messaging screen, paired with CometChatMessageHeader and CometChatMessageList",
+ "components": ["CometChatMessageHeader", "CometChatMessageList", "CometChatMessages"],
+ "flow": "User types message → Composer sends message → MessageList updates"
+ },
+ "types": {
+ "CometChatMessageComposerStyle": {
+ "backgroundColor": "Color?",
+ "border": "BoxBorder?",
+ "borderRadius": "BorderRadiusGeometry?",
+ "sendButtonIconColor": "Color?",
+ "sendButtonIconBackgroundColor": "Color?",
+ "textStyle": "TextStyle?",
+ "placeHolderTextStyle": "TextStyle?"
+ }
+ }
+}
+```
+
+
+## Where It Fits
+
+`CometChatMessageComposer` is a [Widget](/ui-kit/flutter/v5/components-overview#components) that enables users to write and send a variety of messages, including text, image, video, and custom messages.
+
+Features such as **Live Reaction**, **Attachments**, and **Message Editing** are also supported by it.
+
+
+
+
+
+`CometChatMessageComposer` is comprised of the following [Base Widgets](/ui-kit/flutter/v5/components-overview#base-components):
+
+| Base Widgets | Description |
+| ------------ | ----------- |
+| [MessageInput](/ui-kit/flutter/v5/message-composer) | This provides a basic layout for the contents of this component, such as the TextField and buttons |
+| [ActionSheet](/ui-kit/flutter/v5/components-overview) | The ActionSheet widget presents a list of options in either a list or grid mode |
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+// CometChatMessageComposer is typically used at the bottom of a messaging screen
+class MessagingScreen extends StatelessWidget {
+ final User user;
+
+ const MessagingScreen({required this.user});
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: Column(
+ children: [
+ CometChatMessageHeader(user: user),
+ Expanded(child: CometChatMessageList(user: user)),
+ CometChatMessageComposer(user: user),
+ ],
+ ),
+ );
+ }
+}
+```
+
+
+
+## Minimal Render
+
+The simplest way to render `CometChatMessageComposer`:
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+// For a user conversation
+CometChatMessageComposer(
+ user: user,
+)
+
+// For a group conversation
+CometChatMessageComposer(
+ group: group,
+)
+```
+
+
+
+
+## Actions and Events
+
+### Callback Props
+
+Component-level callbacks that fire on specific user interactions:
+
+| Callback | Signature | Fires When |
+|----------|-----------|------------|
+| `onSendButtonTap` | `Function(BuildContext, BaseMessage, PreviewMessageMode?)?` | User taps the send button |
+| `onChange` | `Function(String)?` | Text in the input field changes |
+| `onError` | `OnError?` | An error occurs |
+| `stateCallBack` | `Function(CometChatMessageComposerController)?` | Controller state callback for accessing controller functions |
+
+
+
+```dart
+CometChatMessageComposer(
+ user: user,
+ onSendButtonTap: (BuildContext context, BaseMessage baseMessage, PreviewMessageMode? previewMessageMode) {
+ // Handle send button tap
+ },
+ onChange: (String? text) {
+ // Handle text change
+ },
+ onError: (e) {
+ // Handle error
+ },
+)
+```
+
+
+
+## Custom View Slots
+
+Customize the appearance of `CometChatMessageComposer` by replacing default views with your own widgets.
+
+| Slot | Signature | Replaces |
+|------|-----------|----------|
+| `auxiliaryButtonView` | `ComposerWidgetBuilder?` | Auxiliary button area (AI, stickers) |
+| `secondaryButtonView` | `ComposerWidgetBuilder?` | Secondary button area (attachment, voice) |
+| `sendButtonView` | `Widget?` | Send button |
+| `headerView` | `ComposerWidgetBuilder?` | Header section above input |
+| `footerView` | `ComposerWidgetBuilder?` | Footer section below input |
+| `attachmentOptions` | `ComposerActionsBuilder?` | Attachment options list |
+
+### Example: Custom Auxiliary Button View
+
+
+
+```dart
+CometChatMessageComposer(
+ user: user,
+ auxiliaryButtonView: (context, user, group, id) {
+ final existingAuxiliaryOptions = CometChatUIKit.getDataSource()
+ .getAuxiliaryOptions(user, group, context, id, Color(0xFFA1A1A1));
+ return Row(
+ children: [
+ existingAuxiliaryOptions,
+ Icon(
+ Icons.location_pin,
+ color: Color(0xFF6852D6),
+ ),
+ ],
+ );
+ },
+)
+```
+
+
+
+
+
+
+
+### Example: Custom Secondary Button View
+
+
+
+```dart
+CometChatMessageComposer(
+ user: user,
+ secondaryButtonView: (context, user, group, id) {
+ return Icon(
+ Icons.attach_file,
+ color: Color(0xFF6852D6),
+ );
+ },
+)
+```
+
+
+
+
+
+
+
+### Example: Custom Send Button View
+
+
+
+```dart
+CometChatMessageComposer(
+ user: user,
+ sendButtonView: IconButton(
+ onPressed: () {},
+ padding: EdgeInsets.all(4),
+ style: IconButton.styleFrom(
+ alignment: Alignment.center,
+ backgroundColor: Color(0xFFEDEAFA),
+ shape: RoundedRectangleBorder(
+ borderRadius: BorderRadius.circular(4),
+ ),
+ ),
+ icon: Transform.rotate(
+ angle: 150,
+ child: Icon(
+ Icons.send,
+ size: 20,
+ color: Color(0xFF6852D6),
+ ),
+ ),
+ ),
+)
+```
+
+
+
+
+
+
+
+### Example: Custom Header View
+
+
+
+```dart
+CometChatMessageComposer(
+ user: user,
+ headerView: (context, user, group, id) {
+ return Container(
+ margin: EdgeInsets.only(bottom: 2, left: 8, right: 8),
+ padding: EdgeInsets.all(8),
+ decoration: BoxDecoration(
+ color: Color(0xFFEDEAFA),
+ borderRadius: BorderRadius.circular(8),
+ ),
+ child: Row(
+ children: [
+ Icon(Icons.volume_off, size: 20, color: Color(0xFF6852D6)),
+ Text(
+ "User has paused their notifications",
+ style: TextStyle(fontSize: 14, fontWeight: FontWeight.w400),
+ ),
+ ],
+ ),
+ );
+ },
+)
+```
+
+
+
+
+
+
+
+### Example: Custom Footer View
+
+
+
+```dart
+CometChatMessageComposer(
+ user: user,
+ footerView: (context, user, group, id) {
+ return Container(
+ width: MediaQuery.of(context).size.width / 1.08,
+ color: Colors.yellow,
+ padding: const EdgeInsets.all(8),
+ child: const Center(child: Text("Your Footer Widget")),
+ );
+ },
+)
+```
+
+
+
+
+
+
+
+
+
+
+
+
+### Example: Custom Attachment Options
+
+
+
+```dart
+CometChatMessageComposer(
+ user: user,
+ attachmentOptions: (context, user, group, id) {
+ return [
+ CometChatMessageComposerAction(
+ id: "Custom Option 1",
+ title: "Custom Option 1",
+ icon: Icon(Icons.play_circle, color: Colors.black),
+ ),
+ CometChatMessageComposerAction(
+ id: "Custom Option 2",
+ title: "Custom Option 2",
+ icon: Icon(Icons.add_box, color: Colors.black),
+ ),
+ ];
+ },
+)
+```
+
+
+
+
+
+
+
+
+## Styling
+
+Customize the appearance of `CometChatMessageComposer` using `CometChatMessageComposerStyle`.
+
+### Style Properties
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `backgroundColor` | `Color?` | Background color of the message composer |
+| `border` | `BoxBorder?` | Border of the message composer |
+| `borderRadius` | `BorderRadiusGeometry?` | Border radius of the message composer |
+| `closeIconTint` | `Color?` | Color for the close icon |
+| `dividerColor` | `Color?` | Color of the divider |
+| `dividerHeight` | `double?` | Height of the divider |
+| `sendButtonIconColor` | `Color?` | Color of the send button icon |
+| `sendButtonIconBackgroundColor` | `Color?` | Background color of the send button |
+| `sendButtonBorderRadius` | `BorderRadiusGeometry?` | Border radius of the send button |
+| `secondaryButtonIconColor` | `Color?` | Color of the secondary button icon |
+| `secondaryButtonIconBackgroundColor` | `Color?` | Background color of the secondary button |
+| `secondaryButtonBorderRadius` | `BorderRadiusGeometry?` | Border radius of the secondary button |
+| `auxiliaryButtonIconColor` | `Color?` | Color of the auxiliary button icon |
+| `auxiliaryButtonIconBackgroundColor` | `Color?` | Background color of the auxiliary button |
+| `auxiliaryButtonBorderRadius` | `BorderRadiusGeometry?` | Border radius of the auxiliary button |
+| `textStyle` | `TextStyle?` | Style of the text |
+| `textColor` | `Color?` | Color of the text |
+| `placeHolderTextStyle` | `TextStyle?` | Style of the placeholder text |
+| `placeHolderTextColor` | `Color?` | Color of the placeholder text |
+| `filledColor` | `Color?` | Background color of the text input |
+| `mentionsStyle` | `CometChatMentionsStyle?` | Style for mentions |
+| `mediaRecorderStyle` | `CometChatMediaRecorderStyle?` | Style for media recorder |
+| `aiOptionStyle` | `AIOptionsStyle?` | Style for AI options |
+| `aiOptionSheetStyle` | `CometChatAiOptionSheetStyle?` | Style for AI option sheet |
+| `attachmentOptionSheetStyle` | `CometChatAttachmentOptionSheetStyle?` | Style for attachment option sheet |
+| `suggestionListStyle` | `CometChatSuggestionListStyle?` | Style for suggestion list |
+| `messagePreviewStyle` | `CometChatMessagePreviewStyle?` | Style for message preview |
+
+### Example: Custom Styling
+
+
+
+```dart
+CometChatMessageComposer(
+ user: user,
+ messageComposerStyle: CometChatMessageComposerStyle(
+ sendButtonIconBackgroundColor: Color(0xFFF76808),
+ secondaryButtonIconColor: Color(0xFFF76808),
+ auxiliaryButtonIconColor: Color(0xFFF76808),
+ ),
+)
+```
+
+
+
+
+
+
+
+### Example: Custom Media Recorder Style
+
+
+
+```dart
+CometChatMessageComposer(
+ user: user,
+ messageComposerStyle: CometChatMessageComposerStyle(
+ mediaRecorderStyle: CometChatMediaRecorderStyle(
+ recordIndicatorBackgroundColor: Color(0xFFF44649),
+ recordIndicatorBorderRadius: BorderRadius.circular(20),
+ pauseButtonBorderRadius: BorderRadius.circular(8),
+ deleteButtonBorderRadius: BorderRadius.circular(8),
+ stopButtonBorderRadius: BorderRadius.circular(8),
+ ),
+ ),
+)
+```
+
+
+
+
+
+
+
+### Example: Custom AI Options Style
+
+
+
+```dart
+CometChatMessageComposer(
+ user: user,
+ messageComposerStyle: CometChatMessageComposerStyle(
+ aiOptionStyle: AIOptionsStyle(
+ backgroundColor: Color(0xFFE4EBF5),
+ border: Border.all(width: 3, color: Colors.red),
+ ),
+ ),
+)
+```
+
+
+
+## Advanced
+
+### Text Formatters
+
+Assigns the list of text formatters. To configure the existing Mentions look and feel check out [CometChatMentionsFormatter](/ui-kit/flutter/v5/mentions-formatter-guide).
+
+
+
+```dart
+CometChatMessageComposer(
+ user: user,
+ textFormatters: [
+ CometChatMentionsFormatter(
+ style: CometChatMentionsStyle(
+ mentionSelfTextBackgroundColor: Color(0xFFF76808),
+ mentionTextBackgroundColor: Colors.white,
+ mentionTextColor: Colors.black,
+ mentionSelfTextColor: Colors.white,
+ ),
+ ),
+ ],
+)
+```
+
+
+
+
+
+
+
+## Props Reference
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `user` | `User?` | `null` | User object for the message composer |
+| `group` | `Group?` | `null` | Group object for the message composer |
+| `messageComposerStyle` | `CometChatMessageComposerStyle?` | - | Sets style for the message composer |
+| `placeholderText` | `String?` | - | Hint text for the input field |
+| `text` | `String?` | - | Initial text for the input field |
+| `onChange` | `Function(String)?` | - | Callback triggered when text changes |
+| `textEditingController` | `TextEditingController?` | - | Controls the state of the text field |
+| `maxLine` | `int?` | - | Maximum number of lines allowed |
+| `disableMentions` | `bool?` | `null` | Disables mentions in the composer |
+| `disableTypingEvents` | `bool` | `false` | Disables typing events |
+| `disableSoundForMessages` | `bool` | `false` | Disables sound for sent messages |
+| `customSoundForMessage` | `String?` | - | URL for custom sound |
+| `customSoundForMessagePackage` | `String?` | - | Package name for custom sound asset |
+| `parentMessageId` | `int` | `0` | ID of the parent message |
+| `padding` | `EdgeInsetsGeometry?` | - | Sets padding for the message composer |
+| `messageInputPadding` | `EdgeInsetsGeometry?` | - | Sets padding for the message input field |
+| `sendButtonView` | `Widget?` | - | Custom send button widget |
+| `attachmentIcon` | `Widget?` | - | Custom attachment icon |
+| `attachmentIconURL` | `String?` | - | Path of the icon to show in the attachments button |
+| `voiceRecordingIcon` | `Widget?` | - | Custom voice recording icon |
+| `aiIcon` | `Widget?` | - | Custom AI button icon |
+| `aiIconURL` | `String?` | - | Path of the icon to show in the AI button |
+| `aiIconPackageName` | `String?` | - | Package name for AI icon asset |
+| `auxiliaryButtonView` | `ComposerWidgetBuilder?` | - | UI component for auxiliary button |
+| `secondaryButtonView` | `ComposerWidgetBuilder?` | - | UI component for secondary button |
+| `auxiliaryButtonsAlignment` | `AuxiliaryButtonsAlignment?` | - | Controls position of auxiliary button view |
+| `hideVoiceRecordingButton` | `bool?` | `null` | Hide/display voice recording button |
+| `attachmentOptions` | `ComposerActionsBuilder?` | - | Provides options for file attachments |
+| `hideAttachmentButton` | `bool?` | `null` | Hide/display attachment button |
+| `hideImageAttachmentOption` | `bool?` | `null` | Hide/display image attachment option |
+| `hideVideoAttachmentOption` | `bool?` | `null` | Hide/display video attachment option |
+| `hideAudioAttachmentOption` | `bool?` | `null` | Hide/display audio attachment option |
+| `hideFileAttachmentOption` | `bool?` | `null` | Hide/display file attachment option |
+| `hidePollsOption` | `bool?` | `null` | Hide/display polls option |
+| `hideCollaborativeDocumentOption` | `bool?` | `null` | Hide/display collaborative document option |
+| `hideCollaborativeWhiteboardOption` | `bool?` | `null` | Hide/display collaborative whiteboard option |
+| `hideTakePhotoOption` | `bool?` | `null` | Hide/display take photo option |
+| `onSendButtonTap` | `Function(...)?` | - | Callback when send button is tapped |
+| `onError` | `OnError?` | - | Callback to handle errors |
+| `hideSendButton` | `bool?` | `null` | Hide/display the send button |
+| `hideStickersButton` | `bool?` | `null` | Hide/display the sticker button |
+| `sendButtonIcon` | `Widget?` | - | Custom send button icon |
+| `recorderStartButtonIcon` | `Widget?` | - | Custom icon for media recorder start button |
+| `recorderPauseButtonIcon` | `Widget?` | - | Custom icon for media recorder pause button |
+| `recorderDeleteButtonIcon` | `Widget?` | - | Custom icon for media recorder delete button |
+| `recorderStopButtonIcon` | `Widget?` | - | Custom icon for media recorder stop button |
+| `recorderSendButtonIcon` | `Widget?` | - | Custom icon for media recorder send button |
+| `disableMentionAll` | `bool` | `false` | Disables @all mentions in groups |
+| `mentionAllLabel` | `String?` | - | Custom label for group mentions |
+| `mentionAllLabelId` | `String?` | - | Custom label ID for group mentions |
+| `headerView` | `ComposerWidgetBuilder?` | - | Custom header view |
+| `footerView` | `ComposerWidgetBuilder?` | - | Custom footer view |
+| `textFormatters` | `List?` | - | List of text formatters |
+| `stateCallBack` | `Function(CometChatMessageComposerController)?` | - | Callback to access controller functions |
+
+
+
+ Display user or group details in the header
+
+
+ Display messages in a conversation
+
+
+ Configure mentions look and feel
+
+
+ Learn how to customize the look and feel
+
+
diff --git a/ui-kit/flutter/v5/message-header.mdx b/ui-kit/flutter/v5/message-header.mdx
new file mode 100644
index 000000000..6b5bc0bd8
--- /dev/null
+++ b/ui-kit/flutter/v5/message-header.mdx
@@ -0,0 +1,570 @@
+---
+title: "Message Header"
+description: "Widget that showcases the User or Group details in the toolbar with typing indicator and back navigation button."
+---
+
+```json
+{
+ "component": "CometChatMessageHeader",
+ "package": "cometchat_chat_uikit",
+ "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
+ "description": "Widget that showcases the User or Group details in the toolbar with typing indicator and back navigation button.",
+ "props": {
+ "data": {
+ "user": { "type": "User?", "default": "null" },
+ "group": { "type": "Group?", "default": "null" }
+ },
+ "callbacks": {
+ "onBack": "VoidCallback?",
+ "newChatButtonClick": "VoidCallback?",
+ "chatHistoryButtonClick": "VoidCallback?"
+ },
+ "visibility": {
+ "showBackButton": { "type": "bool?", "default": "true" },
+ "hideVideoCallButton": { "type": "bool?", "default": "false" },
+ "hideVoiceCallButton": { "type": "bool?", "default": "false" },
+ "usersStatusVisibility": { "type": "bool?", "default": "true" },
+ "hideNewChatButton": { "type": "bool?", "default": "false" },
+ "hideChatHistoryButton": { "type": "bool?", "default": "false" }
+ },
+ "viewSlots": {
+ "backButton": "WidgetBuilder?",
+ "subtitleView": "Widget? Function(Group? group, User? user, BuildContext context)?",
+ "listItemView": "Widget Function(Group? group, User? user, BuildContext context)?",
+ "trailingView": "List? Function(User? user, Group? group, BuildContext context)?",
+ "leadingStateView": "Widget? Function(Group? group, User? user, BuildContext context)?",
+ "titleView": "Widget? Function(Group? group, User? user, BuildContext context)?",
+ "auxiliaryButtonView": "Widget? Function(Group? group, User? user, BuildContext context)?"
+ },
+ "style": {
+ "messageHeaderStyle": "CometChatMessageHeaderStyle?",
+ "listItemStyle": "ListItemStyle?"
+ },
+ "layout": {
+ "avatarHeight": { "type": "double?", "default": "null" },
+ "avatarWidth": { "type": "double?", "default": "null" },
+ "height": { "type": "double?", "default": "65" },
+ "padding": { "type": "EdgeInsetsGeometry?", "default": "null" }
+ },
+ "icons": {
+ "menuIcon": "Widget?",
+ "newChatIcon": "IconData?",
+ "chatHistoryIcon": "IconData?"
+ },
+ "formatting": {
+ "dateTimeFormatterCallback": "DateTimeFormatterCallback?"
+ }
+ },
+ "sdkListeners": [
+ "onUserOnline",
+ "onUserOffline",
+ "onTypingStarted",
+ "onTypingEnded",
+ "onGroupMemberJoined",
+ "onGroupMemberLeft",
+ "onGroupMemberKicked",
+ "onGroupMemberBanned",
+ "onMemberAddedToGroup"
+ ]
+}
+```
+
+
+## Overview
+
+`CometChatMessageHeader` is a [Widget](/ui-kit/flutter/v5/components-overview#components) that showcases the [User](/sdk/flutter/users-overview) or [Group](/sdk/flutter/groups-overview) details in the toolbar. Furthermore, it also presents a typing indicator and a back navigation button for ease of use.
+
+
+
+
+
+The `CometChatMessageHeader` is comprised of the following components:
+
+| Components | Description |
+| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| [ListItem Widget](/ui-kit/flutter/v5/components-overview) | This component’s widget consists of avatar, status indicator , title, and subtitle. The fields are then mapped with the SDK’s user, group class. |
+| Back Button | BackButton that allows users to navigate back from the current activity or screen to the previous one |
+
+## Usage
+
+### Integration
+
+You can launch `CometChatMessageHeader` directly using `Navigator.push`, or you can define it as a widget within the `build` method of your `State` class.
+
+##### 1. Using Navigator to Launch `CometChatMessageHeader`
+
+
+
+```dart
+Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatMessageHeader())); // A user or group object is required to launch this widget.
+```
+
+
+
+
+
+##### 2. Embedding `CometChatMessageHeader` as a Widget in the build Method
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:flutter/material.dart';
+
+class MessageHeader extends StatefulWidget {
+ const MessageHeader({super.key});
+
+ @override
+ State createState() => _MessageHeaderState();
+}
+
+class _MessageHeaderState extends State {
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: SafeArea(
+ child: CometChatMessageHeader() // A user or group object is required to launch this widget.
+ )
+ );
+ }
+}
+```
+
+
+
+
+
+***
+
+### Actions
+
+[Actions](/ui-kit/flutter/v5/components-overview#actions) dictate how a widget functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the widget to fit your specific needs.
+
+##### 1. onBack
+
+Enhance your application's functionality by leveraging the `onBack` feature. This capability allows you to customize the behavior associated with navigating back within your app. Utilize the provided code snippet to override default behaviors and tailor the user experience according to your specific requirements.
+
+
+
+```dart
+CometChatMessageHeader(
+ user: user,
+ onBack: () {
+ // TODO("Not yet implemented")
+ },
+)
+```
+
+
+
+
+
+***
+
+### Filters
+
+**Filters** allow you to customize the data displayed in a list within a `Widget`. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using `RequestBuilders` of Chat SDK.
+
+The `CometChatMessageHeader` widget does not have any exposed filters.
+
+***
+
+## Customization
+
+To fit your app's design requirements, you can customize the appearance of the conversation widget. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.
+
+## Style
+
+To customize the appearance, you can assign a `CometChatMessageHeaderStyle` object to the `CometChatMessageHeader` widget.
+
+
+
+```dart
+CometChatMessageHeader(
+ user: user,
+ messageHeaderStyle: CometChatMessageHeaderStyle(
+ avatarStyle: CometChatAvatarStyle(
+ backgroundColor: Color(0xFFFBAA75),
+ borderRadius: BorderRadius.circular(6.67),
+ ),
+ callButtonsStyle: CometChatCallButtonsStyle(
+ voiceCallIconColor: Color(0xFFF76808),
+ videoCallIconColor: Color(0xFFF76808),
+ ),
+ )
+)
+```
+
+
+
+
+
+
+
+
+
+### CometChatMessageHeaderStyle Properties
+
+| Property | Data Type | Description |
+| ------------------------------------- | -------------------------------- | -------------------------------------------------------- |
+| `backgroundColor` | `Color?` | Background color for the message header. |
+| `border` | `BoxBorder?` | Border for the message header. |
+| `borderRadius` | `BorderRadiusGeometry?` | Border radius for the message header. |
+| `titleTextStyle` | `TextStyle?` | Text style for the title. |
+| `titleTextColor` | `Color?` | Color for the title text. |
+| `subtitleTextStyle` | `TextStyle?` | Text style for the subtitle. |
+| `subtitleTextColor` | `Color?` | Color for the subtitle text. |
+| `typingIndicatorTextStyle` | `TextStyle?` | Text style for the typing indicator. |
+| `onlineStatusColor` | `Color?` | Color for the online status indicator. |
+| `backIconColor` | `Color?` | Color for the back icon. |
+| `backIcon` | `Widget?` | Custom back icon widget. |
+| `privateGroupBadgeIcon` | `Widget?` | Icon for private group badge. |
+| `passwordProtectedGroupBadgeIcon` | `Widget?` | Icon for password protected group badge. |
+| `privateGroupBadgeIconColor` | `Color?` | Color for private group badge icon. |
+| `passwordProtectedGroupBadgeIconColor`| `Color?` | Color for password protected group badge icon. |
+| `groupIconBackgroundColor` | `Color?` | Background color for group icon. |
+| `avatarStyle` | `CometChatAvatarStyle?` | Style for the avatar. |
+| `callButtonsStyle` | `CometChatCallButtonsStyle?` | Style for call buttons. |
+| `statusIndicatorStyle` | `CometChatStatusIndicatorStyle?` | Style for status indicator. |
+| `newChatIconColor` | `Color?` | Color for the new chat icon. |
+| `chatHistoryIconColor` | `Color?` | Color for the chat history icon. |
+| `menuIconColor` | `Color?` | Color for the menu icon. |
+
+***
+
+### Functionality
+
+These are a set of small functional customizations that allow you to fine-tune the overall experience of the widget. With these, you can change text, set custom icons, and toggle the visibility of UI elements.
+
+
+
+
+
+Here is a code snippet demonstrating how you can customize the functionality of the Message Header widget.
+
+
+
+```dart
+CometChatMessageHeader(
+ user: user,
+ showBackButton: true,
+ usersStatusVisibility: true,
+)
+```
+
+
+
+
+
+## CometChatMessageHeader Properties
+
+Following is a list of customizations along with their corresponding code snippets:
+
+| Property | Data Type | Description |
+| --------------------- | ------------------------------------------------------------------------- | -------------------------------------------------------------- |
+| `backButton` | `WidgetBuilder?` | Used to set the back button widget. |
+| `subtitleView` | `Widget? Function(Group? group, User? user, BuildContext context)?` | To set subtitle view for the group or user. |
+| `user` | `User?` | Set `User` object, one is mandatory either `user` or `group`. |
+| `group` | `Group?` | Set `Group` object, one is mandatory either `user` or `group`. |
+| `listItemView` | `Widget Function(Group? group, User? user, BuildContext context)?` | Set custom view for list item. |
+| `messageHeaderStyle` | `CometChatMessageHeaderStyle?` | Set styling props for message header. |
+| `listItemStyle` | `ListItemStyle?` | Style for every list item. |
+| `trailingView` | `List? Function(User? user, Group? group, BuildContext context)?` | Set appbar options for the trailing view. |
+| `onBack` | `VoidCallback?` | Callback triggered on closing the screen. |
+| `avatarHeight` | `double?` | Set height for avatar. |
+| `avatarWidth` | `double?` | Set width for avatar. |
+| `height` | `double?` | Set height for message header. |
+| `padding` | `EdgeInsetsGeometry?` | Set padding for message header. |
+| `hideVideoCallButton` | `bool?` | Used to hide video call button. |
+| `hideVoiceCallButton` | `bool?` | Used to hide voice call button. |
+| `showBackButton` | `bool?` | Toggle visibility for back button. Defaults to `true`. |
+| `usersStatusVisibility` | `bool?` | Controls visibility of status indicator. Defaults to `true`. |
+| `options` | `List? Function(User? user, Group? group, BuildContext context)?` | Set menu options for the header. |
+| `menuIcon` | `Widget?` | Set custom menu icon widget. |
+| `leadingStateView` | `Widget? Function(Group? group, User? user, BuildContext context)?` | To set leading view for the message header. |
+| `titleView` | `Widget? Function(Group? group, User? user, BuildContext context)?` | To set the title view for the message header. |
+| `auxiliaryButtonView` | `Widget? Function(Group? group, User? user, BuildContext context)?` | To set auxiliary view for the message header. |
+| `dateTimeFormatterCallback` | `DateTimeFormatterCallback?` | Callback that can be used to format the date and time. |
+| `hideChatHistoryButton` | `bool?` | Hide chat history button. |
+| `hideNewChatButton` | `bool?` | Hide new chat button. |
+| `newChatButtonClick` | `VoidCallback?` | Callback triggered on new chat button click. |
+| `chatHistoryButtonClick` | `VoidCallback?` | Callback triggered on chat history button click. |
+| `newChatIcon` | `IconData?` | Provides new chat icon. |
+| `chatHistoryIcon` | `IconData?` | Provides chat history icon. |
+
+***
+
+### Advanced
+
+For advanced-level customization, you can set custom views to the widget. This lets you tailor each aspect of the widget to fit your exact needs and application aesthetics. You can create and define your own widget and then incorporate those into the widget.
+
+***
+
+#### auxiliaryButtonView
+
+Allows adding a custom button or additional action next to the title or trailing section.
+
+Use Cases:
+
+* Add a Call button (📞) for quick voice/video calls.
+* Include a Block/Report button for moderation.
+* Implement a Pin Chat feature.
+
+
+
+```dart
+CometChatMessageHeader(
+ auxiliaryButtonView: (group, user, context) {
+ // return auxiliary view
+ },
+)
+```
+
+
+
+
+
+***
+
+#### ListItemView
+
+The `CometChatMessageHeader` widget consists of a `ListItemView`. You can customize the ListItem according to your requirements by using the `.setListItemView` method.
+
+
+
+```dart
+CometChatMessageHeader(
+ user: user,
+ listItemView: (Group? group, User? user, context) {
+ return Placeholder(); // Replace this placeholder with your custom widget.
+ },
+)
+```
+
+
+
+
+
+**Example**
+
+Here is the complete example for reference:
+
+
+
+```dart main.dart
+ CometChatMessageHeader(
+ user: user,
+ group: group,
+ listItemView: (group, user, context) {
+ return CometChatListItem(
+ avatarURL: group != null ? group.icon : user?.avatar,
+ avatarName: group != null ? group.name : user?.name,
+ avatarStyle: CometChatAvatarStyle(
+ borderRadius: BorderRadius.circular(6.67),
+ backgroundColor: Color(0xFFAA9EE8)),
+ title: group != null ? group.name : user?.name ?? "",
+ subtitleView: Text(
+ user != null
+ ? (user.status == UserStatusConstants.online
+ ? "Online"
+ : "Offline")
+ : "${group?.membersCount} members",
+ style: TextStyle(
+ color: Color(0xFF727272),
+ fontSize: 14,
+ fontWeight: FontWeight.w400,
+ ),
+ ),
+ tailView: CometChatUIKit.getDataSource()
+ .getAuxiliaryHeaderMenu(context, user, group, null),
+ style: ListItemStyle(
+ titleStyle: TextStyle(
+ color: Color(0xFF141414),
+ fontSize: 16,
+ fontWeight: FontWeight.w500,
+ ),
+ ),
+ );
+ },
+ ); // Replaced the placeholder with a custom widget.
+```
+
+
+
+
+
+
+
+
+
+***
+
+#### leadingStateView
+
+Defines a custom leading view, typically used for the receiver's profile picture or avatar.
+
+Use Cases:
+
+* Display a circular profile picture with a status indicator.
+* Add a custom badge for special roles (Admin, Verified ✅).
+
+
+
+```dart
+CometChatMessageHeader(
+ leadingStateView: (group, user, context) {
+ // return leading view
+ },
+)
+```
+
+
+
+
+
+***
+
+#### SubtitleView
+
+You can customize the subtitle widget for each item to meet your specific preferences and needs.
+
+
+
+```dart
+ CometChatMessageHeader(
+ user: user,
+ subtitleView: (group, user, context) {
+ String subtitle;
+ if (group != null) {
+ subtitle = "${group.membersCount} . ${group.description}";
+ } else {
+ subtitle = user?.status ?? '';
+ }
+ return Text(
+ subtitle,
+ style: TextStyle(
+ fontSize: 12,
+ fontWeight: FontWeight.w400,
+ color: Color(0XFF727272),
+ ),
+ );
+ },
+ )
+```
+
+
+
+
+
+
+
+
+
+***
+
+#### trailingView
+
+You can set the Custom `trailingView` to the `CometChatMessageHeader` widget.
+
+
+
+```dart
+CometChatMessageHeader(
+ user: user,
+ trailingView: (User? user, Group? group, BuildContext context) {
+ return [
+ IconButton(
+ onPressed: () {},
+ icon: Icon(
+ Icons.info_outline,
+ color: Color(0xFF141414),
+ ),
+ )
+ ];
+ },
+)
+```
+
+
+
+
+
+***
+
+#### Options Menu
+
+You can add custom menu options to the message header using the `options` property. These options appear in a popup menu when the menu icon is tapped.
+
+
+
+```dart
+CometChatMessageHeader(
+ user: user,
+ options: (User? user, Group? group, BuildContext context) {
+ return [
+ CometChatOption(
+ id: "view_profile",
+ title: "View Profile",
+ icon: Icons.person,
+ onClick: () {
+ // Handle view profile action
+ },
+ ),
+ CometChatOption(
+ id: "block_user",
+ title: "Block User",
+ icon: Icons.block,
+ onClick: () {
+ // Handle block user action
+ },
+ ),
+ ];
+ },
+)
+```
+
+
+
+
+
+***
+
+#### BackIcon
+
+You can customize the Back Icon according to your specific requirements by using the `.backButton` method.
+
+
+
+```dart
+CometChatMessageHeader(
+ user: user,
+ backButton: (context) {
+ return IconButton(
+ icon: Icon(Icons.add_alert_outlined, color: Color(0xFF6851D6)),
+ onPressed: () {
+ // Navigator.pop(context);
+ },
+ );
+ },
+)
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+***
diff --git a/ui-kit/flutter/v5/message-list.mdx b/ui-kit/flutter/v5/message-list.mdx
new file mode 100644
index 000000000..b92da3813
--- /dev/null
+++ b/ui-kit/flutter/v5/message-list.mdx
@@ -0,0 +1,715 @@
+---
+title: "Message List"
+description: "A composite widget that displays a list of messages with real-time operations"
+---
+
+
+```json
+{
+ "component": "CometChatMessageList",
+ "package": "cometchat_chat_uikit",
+ "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
+ "description": "A composite widget that displays a list of messages with real-time operations. Includes various message types such as Text Messages, Media Messages, Stickers, and more.",
+ "primaryOutput": {
+ "prop": "onThreadRepliesClick",
+ "type": "void Function(BaseMessage, BuildContext, {CometChatMessageTemplate?})?"
+ },
+ "props": {
+ "data": {
+ "user": {
+ "type": "User?",
+ "default": "null",
+ "note": "User object for user message list (one of user or group is required)"
+ },
+ "group": {
+ "type": "Group?",
+ "default": "null",
+ "note": "Group object for group message list (one of user or group is required)"
+ },
+ "messagesRequestBuilder": {
+ "type": "MessagesRequestBuilder?",
+ "default": "null",
+ "note": "Custom request builder for filtering messages"
+ },
+ "templates": {
+ "type": "List?",
+ "default": "null",
+ "note": "Message templates for the list"
+ }
+ },
+ "callbacks": {
+ "onThreadRepliesClick": "void Function(BaseMessage, BuildContext, {CometChatMessageTemplate?})?",
+ "onError": "OnError?",
+ "onLoad": "OnLoad?",
+ "onEmpty": "OnEmpty?",
+ "onReactionClick": "Function(String?, BaseMessage)?",
+ "onReactionLongPress": "Function(String?, BaseMessage)?",
+ "onReactionListItemClick": "Function(String?, BaseMessage?)?"
+ },
+ "visibility": {
+ "hideTimestamp": { "type": "bool?", "default": null },
+ "avatarVisibility": { "type": "bool?", "default": true },
+ "receiptsVisibility": { "type": "bool?", "default": true },
+ "disableReactions": { "type": "bool?", "default": false },
+ "hideStickyDate": { "type": "bool?", "default": false },
+ "hideReplyInThreadOption": { "type": "bool?", "default": false },
+ "hideEditMessageOption": { "type": "bool?", "default": false },
+ "hideDeleteMessageOption": { "type": "bool?", "default": false },
+ "hideGroupActionMessages": { "type": "bool?", "default": false }
+ },
+ "sound": {
+ "disableSoundForMessages": { "type": "bool?", "default": null },
+ "customSoundForMessages": { "type": "String?", "default": null }
+ },
+ "viewSlots": {
+ "loadingStateView": "WidgetBuilder?",
+ "emptyStateView": "WidgetBuilder?",
+ "errorStateView": "WidgetBuilder?",
+ "headerView": "Widget? Function(BuildContext, {User?, Group?, int?})?",
+ "footerView": "Widget? Function(BuildContext, {User?, Group?, int?})?"
+ },
+ "formatting": {
+ "alignment": { "type": "ChatAlignment", "default": "ChatAlignment.standard" },
+ "datePattern": { "type": "String Function(BaseMessage)?", "default": null },
+ "dateSeparatorPattern": { "type": "String Function(DateTime)?", "default": null }
+ }
+ },
+ "events": [],
+ "sdkListeners": [
+ "onMessageReceived",
+ "onMessageEdited",
+ "onMessageDeleted",
+ "onTypingStarted",
+ "onTypingEnded"
+ ],
+ "compositionExample": {
+ "description": "CometChatMessageList is typically used within CometChatMessages, paired with CometChatMessageHeader and CometChatMessageComposer",
+ "components": ["CometChatMessageHeader", "CometChatMessageComposer", "CometChatMessages"],
+ "flow": "User/Group → MessageList displays messages → Real-time updates via SDK listeners"
+ },
+ "types": {
+ "CometChatMessageListStyle": {
+ "backgroundColor": "Color?",
+ "border": "BoxBorder?",
+ "borderRadius": "BorderRadiusGeometry?",
+ "incomingMessageBubbleStyle": "CometChatIncomingMessageBubbleStyle?",
+ "outgoingMessageBubbleStyle": "CometChatOutgoingMessageBubbleStyle?",
+ "avatarStyle": "CometChatAvatarStyle?"
+ }
+ }
+}
+```
+
+
+## Where It Fits
+
+`CometChatMessageList` is a [Composite Widget](/ui-kit/flutter/v5/components-overview#composite-components) that displays a list of messages and effectively manages real-time operations. It includes various types of messages such as Text Messages, Media Messages, Stickers, and more.
+
+`CometChatMessageList` is primarily a list of the base widget [MessageBubble](/ui-kit/flutter/v5/message-bubble-styling). The MessageBubble Widget is utilized to create different types of chat bubbles depending on the message type.
+
+
+
+
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+// CometChatMessageList is typically used within CometChatMessages
+// or as part of a custom messaging screen
+class MessagingScreen extends StatelessWidget {
+ final User user;
+
+ const MessagingScreen({required this.user});
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: Column(
+ children: [
+ CometChatMessageHeader(user: user),
+ Expanded(child: CometChatMessageList(user: user)),
+ CometChatMessageComposer(user: user),
+ ],
+ ),
+ );
+ }
+}
+```
+
+
+
+## Minimal Render
+
+The simplest way to render `CometChatMessageList`:
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+// For a user conversation
+CometChatMessageList(
+ user: user,
+)
+
+// For a group conversation
+CometChatMessageList(
+ group: group,
+)
+```
+
+
+
+
+Simply adding the `MessageList` component to the layout will only display the loading indicator. To fetch messages for a specific entity, you need to supplement it with `User` or `Group` Object.
+
+
+
+## Filtering CometChatMessageList
+
+Use the `messagesRequestBuilder` prop to filter which messages appear in the list.
+
+### Filter Recipes
+
+| Recipe | Code |
+|--------|------|
+| Limit messages | `MessagesRequestBuilder()..limit = 30` |
+| Search messages | `MessagesRequestBuilder()..searchKeyword = "keyword"` |
+| Filter by type | `MessagesRequestBuilder()..types = ["text"]` |
+| Filter by category | `MessagesRequestBuilder()..categories = ["message"]` |
+
+
+
+```dart
+CometChatMessageList(
+ user: user,
+ messagesRequestBuilder: MessagesRequestBuilder()
+ ..uid = user.uid
+ ..searchKeyword = "searchKeyword"
+ ..limit = 30,
+)
+```
+
+
+
+
+The following parameters in messageRequestBuilder will always be altered inside the message list:
+1. UID
+2. GUID
+3. types
+4. categories
+
+
+For the full MessagesRequestBuilder API, see the [SDK documentation](/sdk/flutter/additional-message-filtering).
+
+## Actions and Events
+
+### Callback Props
+
+Component-level callbacks that fire on specific user interactions:
+
+| Callback | Signature | Fires When |
+|----------|-----------|------------|
+| `onThreadRepliesClick` | `void Function(BaseMessage, BuildContext, {CometChatMessageTemplate?})?` | User clicks on thread indicator |
+| `onError` | `OnError?` | An error occurs while fetching messages |
+| `onLoad` | `OnLoad?` | List is successfully fetched and loaded |
+| `onEmpty` | `OnEmpty?` | List is empty |
+| `onReactionClick` | `Function(String?, BaseMessage)?` | User clicks on a reaction pill |
+| `onReactionLongPress` | `Function(String?, BaseMessage)?` | User long presses on a reaction pill |
+| `onReactionListItemClick` | `Function(String?, BaseMessage?)?` | User clicks on a reaction list item |
+| `addMoreReactionTap` | `Function(BaseMessage)?` | User clicks "Add More Reactions" button |
+
+
+
+```dart
+CometChatMessageList(
+ user: user,
+ onThreadRepliesClick: (message, context, {template}) {
+ // Handle thread replies click
+ },
+ onError: (e) {
+ // Handle error
+ },
+ onLoad: (list) {
+ print("Messages loaded: ${list.length}");
+ },
+ onEmpty: () {
+ print("No messages");
+ },
+ onReactionClick: (emoji, message) {
+ // Handle reaction click
+ },
+)
+```
+
+
+
+### SDK Events (Real-Time, Automatic)
+
+The component automatically handles these SDK listeners for real-time updates:
+
+| SDK Listener | Handled Automatically |
+|--------------|----------------------|
+| `onMessageReceived` | Adds new message to the list |
+| `onMessageEdited` | Updates edited message in the list |
+| `onMessageDeleted` | Removes deleted message from the list |
+| `onTypingStarted` | Shows typing indicator |
+| `onTypingEnded` | Hides typing indicator |
+
+## Custom View Slots
+
+Customize the appearance of `CometChatMessageList` by replacing default views with your own widgets.
+
+| Slot | Signature | Replaces |
+|------|-----------|----------|
+| `loadingStateView` | `WidgetBuilder?` | Loading spinner |
+| `emptyStateView` | `WidgetBuilder?` | Empty state display |
+| `errorStateView` | `WidgetBuilder?` | Error state display |
+| `headerView` | `Widget? Function(BuildContext, {User?, Group?, int?})?` | Header section |
+| `footerView` | `Widget? Function(BuildContext, {User?, Group?, int?})?` | Footer section |
+| `emptyChatGreetingView` | `WidgetBuilder?` | Empty chat greeting for AI |
+| `newMessageIndicatorView` | `WidgetBuilder?` | New message indicator |
+
+### Example: Custom Header View
+
+
+
+```dart
+CometChatMessageList(
+ user: user,
+ headerView: (context, {group, parentMessageId, user}) {
+ return Container(
+ width: double.maxFinite,
+ color: Color(0xFFEDEAFA),
+ padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+ child: Row(
+ children: [
+ Icon(Icons.notes_outlined, color: Color(0xFF6852D6)),
+ SizedBox(width: 8),
+ Text('Notes', style: TextStyle(color: Color(0xFF6852D6))),
+ ],
+ ),
+ );
+ },
+)
+```
+
+
+
+
+
+
+
+### Example: Custom Footer View
+
+
+
+```dart
+CometChatMessageList(
+ user: user,
+ footerView: (context, {group, parentMessageId, user}) {
+ return Container(
+ width: double.maxFinite,
+ color: Color(0xFFEDEAFA),
+ padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+ child: Row(
+ children: [
+ Icon(Icons.sunny, color: Color(0xFF6852D6)),
+ SizedBox(width: 8),
+ Text('Ice Breakers', style: TextStyle(color: Color(0xFF6852D6))),
+ ],
+ ),
+ );
+ },
+)
+```
+
+
+
+
+
+
+
+### Example: Custom Loading State View
+
+
+
+```dart
+CometChatMessageList(
+ user: user,
+ loadingStateView: (context) {
+ return Center(
+ child: CircularProgressIndicator(),
+ );
+ },
+)
+```
+
+
+
+### Example: Custom Empty State View
+
+
+
+```dart
+CometChatMessageList(
+ user: user,
+ emptyStateView: (context) {
+ return Center(
+ child: Text("No messages yet. Start the conversation!"),
+ );
+ },
+)
+```
+
+
+
+### Example: Custom Error State View
+
+
+
+```dart
+CometChatMessageList(
+ user: user,
+ errorStateView: (context) {
+ return Center(
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ Text("Couldn't load messages"),
+ ElevatedButton(
+ onPressed: () {
+ // Retry logic
+ },
+ child: Text("Retry"),
+ ),
+ ],
+ ),
+ );
+ },
+)
+```
+
+
+
+
+## Styling
+
+Customize the appearance of `CometChatMessageList` using `CometChatMessageListStyle`.
+
+### Style Properties
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `backgroundColor` | `Color?` | Background color of the message list |
+| `border` | `BoxBorder?` | Border of the message list |
+| `borderRadius` | `BorderRadiusGeometry?` | Border radius of the message list |
+| `avatarStyle` | `CometChatAvatarStyle?` | Style for avatar in message bubble |
+| `emptyStateTextStyle` | `TextStyle?` | Style for empty state text |
+| `emptyStateTextColor` | `Color?` | Color for empty state text |
+| `emptyStateSubtitleStyle` | `TextStyle?` | Style for empty state subtitle |
+| `emptyStateSubtitleColor` | `Color?` | Color for empty state subtitle |
+| `errorStateTextStyle` | `TextStyle?` | Style for error state text |
+| `errorStateTextColor` | `Color?` | Color for error state text |
+| `errorStateSubtitleStyle` | `TextStyle?` | Style for error state subtitle |
+| `errorStateSubtitleColor` | `Color?` | Color for error state subtitle |
+| `incomingMessageBubbleStyle` | `CometChatIncomingMessageBubbleStyle?` | Style for incoming message bubble |
+| `outgoingMessageBubbleStyle` | `CometChatOutgoingMessageBubbleStyle?` | Style for outgoing message bubble |
+| `messageInformationStyle` | `CometChatMessageInformationStyle?` | Style for message information |
+| `messageOptionSheetStyle` | `CometChatMessageOptionSheetStyle?` | Style for message option sheet |
+| `mentionsStyle` | `CometChatMentionsStyle?` | Style for mentions |
+| `actionBubbleStyle` | `CometChatActionBubbleStyle?` | Style for group action bubbles |
+| `reactionListStyle` | `CometChatReactionListStyle?` | Style for reaction list |
+| `reactionsStyle` | `CometChatReactionsStyle?` | Style for reactions |
+| `aiSmartRepliesStyle` | `CometChatAISmartRepliesStyle?` | Style for smart replies |
+| `aiConversationStarterStyle` | `CometChatAIConversationStarterStyle?` | Style for conversation starter |
+| `aiConversationSummaryStyle` | `CometChatAIConversationSummaryStyle?` | Style for conversation summary |
+| `aiAssistantSuggestedMessageTextStyle` | `TextStyle?` | Text style for AI suggested messages |
+| `aiAssistantSuggestedMessageTextColor` | `Color?` | Text color for AI suggested messages |
+| `aiAssistantSuggestedMessageBorder` | `Border?` | Border for AI suggested messages |
+| `aiAssistantSuggestedMessageBorderRadius` | `BorderRadius?` | Border radius for AI suggested messages |
+| `aiAssistantSuggestedMessageBackgroundColor` | `Color?` | Background color for AI suggested messages |
+| `aiAssistantSuggestedMessageIconColor` | `Color?` | Icon color for AI suggested messages |
+| `emptyChatGreetingTitleTextColor` | `Color?` | Text color for empty chat greeting title |
+| `emptyChatGreetingTitleTextStyle` | `TextStyle?` | Text style for empty chat greeting title |
+| `emptyChatGreetingSubtitleTextColor` | `Color?` | Text color for empty chat greeting subtitle |
+| `emptyChatGreetingSubtitleTextStyle` | `TextStyle?` | Text style for empty chat greeting subtitle |
+| `flagMessageStyle` | `CometchatFlagMessageStyle?` | Style for flag message dialog |
+| `newMessageIndicatorStyle` | `CometChatNewMessageIndicatorStyle?` | Style for new message indicator |
+
+### Example: Custom Styling
+
+
+
+```dart
+CometChatMessageList(
+ user: user,
+ style: CometChatMessageListStyle(
+ backgroundColor: Color(0xFFFEEDE1),
+ outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ ),
+ ),
+)
+```
+
+
+
+
+
+
+
+### Example: Custom Avatar Style
+
+
+
+```dart
+CometChatMessageList(
+ user: user,
+ style: CometChatMessageListStyle(
+ avatarStyle: CometChatAvatarStyle(
+ border: Border.all(width: 5),
+ borderRadius: 20,
+ backgroundColor: Colors.red,
+ ),
+ ),
+)
+```
+
+
+
+### Example: Custom Mentions Style
+
+
+
+```dart
+CometChatMessageList(
+ user: user,
+ textFormatters: [
+ CometChatMentionsFormatter(
+ style: CometChatMentionsStyle(
+ mentionSelfTextBackgroundColor: Color(0xFFF76808),
+ mentionTextBackgroundColor: Colors.white,
+ mentionTextColor: Colors.black,
+ mentionSelfTextColor: Colors.white,
+ ),
+ ),
+ ],
+)
+```
+
+
+
+
+
+
+
+## Advanced
+
+### Message Templates
+
+[CometChatMessageTemplate](/ui-kit/flutter/v5/message-template) is a pre-defined structure for creating message views that can be used as a starting point or blueprint for creating message bubbles.
+
+
+
+```dart
+List getTemplate() {
+ // Creating a text template
+ CometChatMessageTemplate textTemplate = ChatConfigurator.getDataSource().getTextMessageTemplate();
+ textTemplate.contentView = (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment, {AdditionalConfigurations? additionalConfigurations}) {
+ return Padding(
+ padding: const EdgeInsets.all(8.0),
+ child: Text(
+ (baseMessage as TextMessage).text,
+ style: TextStyle(
+ color: alignment == BubbleAlignment.left ? Colors.deepPurple : Colors.yellow,
+ fontSize: 14,
+ fontWeight: FontWeight.bold,
+ ),
+ ),
+ );
+ };
+
+ // Creating a custom message template
+ CometChatMessageTemplate customMessageTemplate = CometChatMessageTemplate(
+ type: 'custom_template',
+ category: 'custom_category',
+ bubbleView: (message, context, alignment) => const Text('Custom message'),
+ );
+
+ return [textTemplate, customMessageTemplate];
+}
+
+// Usage
+CometChatMessageList(
+ user: user,
+ templates: getTemplate(),
+)
+```
+
+
+
+
+
+
+
+
+
+
+
+
+### Date Separator Pattern
+
+Customize the date separator pattern:
+
+
+
+```dart
+CometChatMessageList(
+ user: user,
+ dateSeparatorPattern: (DateTime dateTime) {
+ return DateFormat("dd/MM/yyyy").format(dateTime);
+ },
+)
+```
+
+
+
+
+
+
+
+
+
+
+
+
+### Date Pattern
+
+Customize the date pattern for message receipts:
+
+
+
+```dart
+CometChatMessageList(
+ user: user,
+ datePattern: (message) {
+ return DateFormat('EEE, M/d/y').format(message.sentAt!);
+ },
+)
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Props Reference
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `user` | `User?` | `null` | User object for user message list |
+| `group` | `Group?` | `null` | Group object for group message list |
+| `messagesRequestBuilder` | `MessagesRequestBuilder?` | `null` | Custom request builder for filtering |
+| `style` | `CometChatMessageListStyle?` | - | Sets style for message list |
+| `scrollController` | `ScrollController?` | - | Controller for the message list |
+| `emptyStateText` | `String?` | - | Text when list is empty |
+| `errorStateText` | `String?` | - | Text when error occurs |
+| `loadingStateView` | `WidgetBuilder?` | - | View for loading state |
+| `emptyStateView` | `WidgetBuilder?` | - | View for empty state |
+| `errorStateView` | `WidgetBuilder?` | - | View for error state |
+| `disableSoundForMessages` | `bool?` | `null` | Disables sound for messages |
+| `customSoundForMessages` | `String?` | `null` | Custom sound URL |
+| `readIcon` | `Widget?` | - | Custom read icon |
+| `deliveredIcon` | `Widget?` | - | Custom delivered icon |
+| `sentIcon` | `Widget?` | - | Custom sent icon |
+| `waitIcon` | `Widget?` | - | Custom wait icon |
+| `alignment` | `ChatAlignment` | `standard` | Chat alignment setting |
+| `avatarVisibility` | `bool?` | `true` | Toggle avatar visibility |
+| `datePattern` | `String Function(BaseMessage)?` | - | Custom date pattern |
+| `hideTimestamp` | `bool?` | `null` | Toggle timestamp visibility |
+| `templates` | `List?` | - | Message templates |
+| `onThreadRepliesClick` | `ThreadRepliesClick?` | - | Thread replies callback |
+| `headerView` | `Widget? Function(...)?` | - | Custom header view |
+| `footerView` | `Widget? Function(...)?` | - | Custom footer view |
+| `dateSeparatorPattern` | `String Function(DateTime)?` | - | Date separator pattern |
+| `onError` | `OnError?` | - | Error callback |
+| `receiptsVisibility` | `bool?` | `true` | Toggle read receipts |
+| `dateSeparatorStyle` | `CometChatDateStyle?` | - | Date separator style |
+| `disableReactions` | `bool?` | `false` | Toggle reactions |
+| `addReactionIcon` | `Widget?` | - | Custom add reaction icon |
+| `favoriteReactions` | `List?` | - | Frequently used reactions |
+| `textFormatters` | `List?` | - | Text formatters |
+| `disableMentions` | `bool?` | `null` | Disable mentions |
+| `padding` | `EdgeInsetsGeometry?` | - | Padding for message list |
+| `margin` | `EdgeInsetsGeometry?` | - | Margin for message list |
+| `width` | `double?` | - | Width of message list |
+| `height` | `double?` | - | Height of message list |
+| `onLoad` | `OnLoad?` | - | Load callback |
+| `onEmpty` | `OnEmpty?` | - | Empty callback |
+| `onReactionClick` | `Function(String?, BaseMessage)?` | - | Reaction click callback |
+| `onReactionLongPress` | `Function(String?, BaseMessage)?` | - | Reaction long press callback |
+| `hideStickyDate` | `bool?` | `false` | Hide sticky date |
+| `hideReplyInThreadOption` | `bool?` | `false` | Hide reply in thread option |
+| `hideTranslateMessageOption` | `bool?` | `false` | Hide translate option |
+| `hideEditMessageOption` | `bool?` | `false` | Hide edit option |
+| `hideDeleteMessageOption` | `bool?` | `false` | Hide delete option |
+| `hideReactionOption` | `bool?` | `false` | Hide reaction option |
+| `hideMessagePrivatelyOption` | `bool?` | `false` | Hide message privately option |
+| `hideCopyMessageOption` | `bool?` | `false` | Hide copy option |
+| `hideMessageInfoOption` | `bool?` | `false` | Hide message info option |
+| `hideGroupActionMessages` | `bool?` | `false` | Hide group action messages |
+| `enableConversationStarters` | `bool?` | `false` | Enable conversation starters |
+| `enableSmartReplies` | `bool?` | `false` | Enable smart replies |
+| `hideShareMessageOption` | `bool?` | `false` | Hide share option |
+| `smartRepliesDelayDuration` | `int?` | `10000` | Smart replies delay (ms) |
+| `smartRepliesKeywords` | `List?` | - | Smart replies keywords |
+| `addTemplate` | `List?` | - | Add custom templates |
+| `dateTimeFormatterCallback` | `DateTimeFormatterCallback?` | - | Date time formatter |
+| `hideModerationView` | `bool?` | `null` | Hide moderation view |
+| `hideThreadView` | `bool?` | `null` | Hide thread view |
+| `suggestedMessages` | `List?` | - | AI assistant suggestions |
+| `hideSuggestedMessages` | `bool?` | `false` | Hide suggested messages |
+| `emptyChatGreetingView` | `WidgetBuilder?` | - | Empty chat greeting view |
+| `setAiAssistantTools` | `Map?` | - | AI assistant tools |
+| `streamingSpeed` | `int?` | - | AI streaming speed |
+| `hideDateSeparator` | `bool?` | `false` | Hide date separator |
+| `mentionAllLabel` | `String?` | - | Group mention label |
+| `mentionAllLabelId` | `String?` | - | Group mention label ID |
+| `hideFlagOption` | `bool?` | `false` | Hide report option |
+| `hideFlagRemarkField` | `bool?` | `false` | Hide flag remark field |
+| `startFromUnreadMessages` | `bool?` | `false` | Start from unread messages |
+| `showMarkAsUnreadOption` | `bool?` | `false` | Show mark as unread option |
+| `newMessageIndicatorView` | `WidgetBuilder?` | - | New message indicator view |
+| `enableConversationSummary` | `bool?` | `false` | Enable conversation summary |
+| `generateConversationSummary` | `bool?` | `false` | Generate conversation summary |
+| `hideReplyOption` | `bool?` | `false` | Hide reply option |
+| `flagReasonLocalizer` | `String Function(String)?` | - | Flag reason localizer |
+| `reactionsRequestBuilder` | `ReactionsRequestBuilder?` | - | Request builder for reactions |
+| `stateCallBack` | `Function(CometChatMessageListController)?` | - | Callback to access controller |
+| `customSoundForMessagePackage` | `String?` | - | Package name for custom sound |
+| `messageId` | `int?` | - | Specific message ID to scroll to |
+
+
+
+ Display user or group details in the header
+
+
+ Compose and send messages
+
+
+ Customize message bubble templates
+
+
+ Learn how to customize the look and feel
+
+
diff --git a/ui-kit/flutter/v5/message-template.mdx b/ui-kit/flutter/v5/message-template.mdx
new file mode 100644
index 000000000..7f3ea09fa
--- /dev/null
+++ b/ui-kit/flutter/v5/message-template.mdx
@@ -0,0 +1,864 @@
+---
+title: "Message Template"
+description: "Data structure defining how message bubbles render in CometChatMessageList — controls header, content, footer, bottom, status info, reply, and bubble views per message type and category."
+---
+
+
+```json
+{
+ "component": "CometChatMessageTemplate",
+ "kind": "model-class",
+ "package": "cometchat_chat_uikit",
+ "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
+ "description": "Data structure defining how message bubbles render in CometChatMessageList. Each template maps a type+category pair to view functions.",
+ "usage": "Pass a list of CometChatMessageTemplate instances to CometChatMessageList via the templates property.",
+ "properties": {
+ "type": { "type": "String", "required": true, "description": "CometChat message type" },
+ "category": { "type": "String", "default": "\"\"", "description": "CometChat message category" },
+ "headerView": { "type": "Function?", "default": "null", "description": "Custom header view builder function" },
+ "contentView": { "type": "Function?", "default": "null", "description": "Custom content view builder function" },
+ "footerView": { "type": "Function?", "default": "null", "description": "Custom footer view builder function" },
+ "bottomView": { "type": "Function?", "default": "null", "description": "Custom bottom view builder function" },
+ "bubbleView": { "type": "Function?", "default": "null", "description": "Replaces entire bubble" },
+ "statusInfoView": { "type": "Function?", "default": "null", "description": "Custom status info view builder function" },
+ "replyView": { "type": "Function?", "default": "null", "description": "Custom reply preview builder function" },
+ "threadView": { "type": "Function?", "default": "null", "description": "Custom thread view builder function" },
+ "options": { "type": "Function", "description": "Returns action sheet items for long-press" }
+ },
+ "relatedComponents": ["CometChatMessageList"],
+ "events": null
+}
+```
+
+
+## Overview
+
+A MessageTemplate provides you with the capability to define and customize both the structure and the behavior of the [MessageBubble](/ui-kit/flutter/v5/message-bubble-styling). It acts as a schema or design blueprint for the creation of a variety of [MessageBubble](/ui-kit/flutter/v5/message-bubble-styling) widgets, allowing you to manage the appearance and interactions of [MessageBubble](/ui-kit/flutter/v5/message-bubble-styling) within your application effectively and consistently.
+
+### Structure
+
+
+
+
+
+The MessageBubble structure can typically be broken down into the following widgets:
+
+1. **Leading widget**: This is where the sender's avatar is displayed. It's typically on the left of the MessageBubble for messages from others and on the right for messages from the current user.
+
+2. **Header widget**: This displays the sender's name and is especially useful in group chats where multiple users are sending messages.
+
+3. **Content widget**: This is the core of the MessageBubble where the message content (text, images, videos, etc.) is displayed.
+
+4. **Bottom widget**: This widget can be used to extend the MessageBubble with additional elements, such as link previews or a 'load more' button for long messages. It's typically placed beneath the Content widget.
+
+5. **Footer widget**: This is where the timestamp of the message and its delivery or read status are displayed. It's located at the bottom of the MessageBubble.
+
+### Properties
+
+MessageTemplate provides you with methods that allow you to alter various properties of the MessageBubble. These properties include aspects such as the `type` and `category` of a message, the appearance and behavior of the header, content, and footer sections of the message bubble,
+
+1. **Type**
+
+ Using `type` you can set the type of CometChatMessage, This will map your MessageTemplate to the corresponding CometChatMessage. You can set the MessageTemplate Type using the following code snippet.
+
+
+
+ ```dart
+ CometChatMessageTemplate cometChatMessageTemplate = CometChatMessageTemplate(type: MessageTypeConstants.text);
+ ```
+
+
+
+
+
+2. **Category**
+
+ Using `category` you can set the category of a MessageTemplate. This will create a MessageTemplate with the specified category and link it with a CometChatMessage of the same category.
+
+ Please refer to our guide on [Message Categories](/sdk/flutter/message-structure-and-hierarchy) for a deeper understanding of message categories.
+
+
+
+ ```dart
+ CometChatMessageTemplate cometChatMessageTemplate = CometChatMessageTemplate(category: MessageCategoryConstants.custom);
+ ```
+
+
+
+
+
+3. **Header Widget**
+
+ The. `headerView` property allows you to assign a custom header widget to the MessageBubble. By default, it is configured to display the sender's name.
+
+
+
+ ```dart
+ cometChatMessageTemplate.headerView = (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment) {
+ return const Placeholder();
+ };
+ ```
+
+
+
+
+
+4. **Content Widget**
+
+ The `contentView` method allows you to assign a custom content widget to the MessageBubble. By default, it displays the [Text Bubble](/ui-kit/flutter/v5/message-bubble-styling#text-bubble), [Image Bubble](/ui-kit/flutter/v5/message-bubble-styling#image-bubble), [File Bubble](/ui-kit/flutter/v5/message-bubble-styling#file-bubble), [Audio Bubble](/ui-kit/flutter/v5/message-bubble-styling#audio-bubble), or [Video Bubble](/ui-kit/flutter/v5/message-bubble-styling#video-bubble), depending on the message type.
+
+
+
+ ```dart
+ cometChatMessageTemplate.contentView = (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment, {AdditionalConfigurations? additionalConfigurations}) {
+ return const Placeholder();
+ };
+ ```
+
+
+
+
+
+5. **Footer Widget**
+
+ The `footerView` property allows you to assign a custom Footer widget to the MessageBubble. By default, it displays the receipt and timestamp.
+
+
+
+ ```dart
+ cometChatMessageTemplate.footerView = (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment) {
+ return const Placeholder();
+ };
+ ```
+
+
+
+
+
+6. **Bottom Widget**
+
+ The `bottomView` property allows you to assign a custom Bottom widget to the MessageBubble.By defuault is has buttons such as link previews or a 'load more' button for long messages.
+
+
+
+ ```dart
+ cometChatMessageTemplate.bottomView = (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment) {
+ return const Placeholder();
+ };
+ ```
+
+
+
+
+
+7. **Bubble Widget**
+
+ The `bubbleView` property allows you to assign a custom Bubble widget to the MessageBubble. By default, headerView, contentView, and footerView together form a message bubble.
+
+
+
+ ```dart
+ cometChatMessageTemplate.bubbleView = (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment) {
+ return const Placeholder();
+ };
+ ```
+
+
+
+
+
+8. **Options**
+
+ The `options` lets you set the list of actions that a user can perform on a message. This includes actions like reacting to, editing, or deleting a message.
+
+
+
+ ```dart
+ cometChatMessageTemplate.options = (User loggedInUser, BaseMessage messageObject, BuildContext context, Group? group) {
+ return [];
+ };
+ ```
+
+
+
+
+
+9. **Status Info Widget**
+
+ The `statusInfoView` property allows you to assign a custom status info widget to the MessageBubble. By default, it displays the timestamp and read receipt under the content view.
+
+
+
+ ```dart
+ cometChatMessageTemplate.statusInfoView = (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment) {
+ return const Placeholder();
+ };
+ ```
+
+
+
+
+
+10. **Thread Widget**
+
+ The `threadView` property allows you to assign a custom thread widget to the MessageBubble. This is displayed at the bottom of the bubble for threaded messages.
+
+
+
+ ```dart
+ cometChatMessageTemplate.threadView = (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment) {
+ return const Placeholder();
+ };
+ ```
+
+
+
+
+
+11. **Reply Widget**
+
+ The `replyView` property allows you to assign a custom reply widget to the MessageBubble. This is displayed at the top of the bubble when replying to a message.
+
+
+
+ ```dart
+ cometChatMessageTemplate.replyView = (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment, {AdditionalConfigurations? additionalConfigurations}) {
+ return const Placeholder();
+ };
+ ```
+
+
+
+
+
+## Customization
+
+Let's dive into how you can use the [properties](#properties) of MessageTemplate to customize an existing template or add a new one to the [MessageList](/ui-kit/flutter/v5/message-list) Widget.
+
+#### Header widget
+
+The `headerView` method of MessageTemplate allows you to add custom widgets to the header of your message bubbles.
+
+Here is the complete example for reference:
+
+
+
+```dart
+ CometChatMessageList(
+ group: group, // Group object
+ templates: [
+ CometChatMessageTemplate(
+ type: MessageTypeConstants.text,
+ // Define the template type
+ category: MessageCategoryConstants.message,
+ // Define the template category
+ headerView: (BaseMessage baseMessage, BuildContext buildContext,
+ BubbleAlignment alignment) {
+ return Text(
+ "${baseMessage.sender?.name}• 🗓️ In meeting",
+ style: TextStyle(
+ color: Color(0xFF6852D6),
+ fontSize: 14.4,
+ fontWeight: FontWeight.w500,
+ letterSpacing: 0),
+ ); // Replace this placeholder Widget with your custom Widget
+ }),
+ ],
+ );
+```
+
+
+
+
+
+
+
+
+
+***
+
+#### Content widget
+
+The `contentView` method of MessageTemplate allows you to add a custom widget to the content of your message bubbles.
+
+Here is the complete example for reference:
+
+
+
+```dart
+ CometChatMessageList(
+ group: group, // Group object
+ templates: [
+ CometChatMessageTemplate(
+ type: "image",
+ category: "message",
+ contentView: (message, context, alignment,
+ {AdditionalConfigurations? additionalConfigurations}) {
+ if (message is! MediaMessage) {
+ return const SizedBox();
+ }
+ return Wrap(
+ direction: Axis.vertical,
+ crossAxisAlignment: WrapCrossAlignment.center,
+ children: [
+ CometChatImageBubble(
+ imageUrl: message.attachment?.fileUrl,
+ metadata: message.metadata,
+ key: UniqueKey(),
+ ),
+ TextButton(
+ onPressed: () {
+ //Navigate to screen with transaction features to purchase the image
+ },
+ child: Text(
+ "Buy Now",
+ style: TextStyle(
+ color: alignment == BubbleAlignment.left
+ ? Color(0xFF6852D6)
+ : Colors.white,
+ fontSize: 14,
+ fontWeight: FontWeight.w500),
+ ),
+ style: TextButton.styleFrom(
+ padding: EdgeInsets.zero,
+ ))
+ ],
+ );
+ })
+ ]);
+```
+
+
+
+
+
+
+
+
+
+***
+
+#### Bottom Widget
+
+The `bottomView` property of MessageTemplate allows you to add a custom button widget to your message bubbles.
+
+Here is the complete example for reference:
+
+
+
+```dart
+CometChatMessageList(
+ group: group, // Group object
+ templates: [
+ CometChatMessageTemplate(
+ type: MessageTypeConstants.text,
+ // Define the template type
+ category: MessageCategoryConstants.message,
+ // Define the template category
+ bottomView: (BaseMessage baseMessage, BuildContext buildContext,
+ BubbleAlignment alignment) {
+ return Container(
+ decoration: BoxDecoration(
+ color: Color(0xFFF44649).withOpacity(.2),
+ borderRadius: BorderRadius.circular(12),
+ ),
+ child: Row(
+ children: [
+ Icon(
+ Icons.warning,
+ color: Color(0xFFF44649),
+ size: 12,
+ ),
+ Text(
+ "According to guidelines you cannot share contact",
+ style: TextStyle(
+ color: Color(0xFFF44649),
+ fontSize: 12,
+ fontWeight: FontWeight.w400,
+ letterSpacing: 0),
+ )
+ ],
+ ),
+ );
+ },
+ ),
+ ],
+ )
+```
+
+
+
+
+
+
+
+
+
+***
+
+#### Footer Widget
+
+The `footerView` property of MessageTemplate allows you to add a footer widget to your message bubbles.
+
+Here is the complete example for reference:
+
+
+
+```dart
+ CometChatMessageList(
+ group: group, // Group object
+ templates: [
+ CometChatMessageTemplate(
+ // Define the template type
+ type: MessageTypeConstants.text,
+ // Define the template category
+ category: MessageCategoryConstants.message,
+ // override the default status info view to hide that date time and read receipt
+ statusInfoView: (baseMessage, context, alignment) {
+ return const SizedBox(height: 11);
+ },
+ // Define the footer view which would show the date time and read receipt
+ footerView: (baseMessage, context, alignment,
+ {additionalConfigurations}) {
+ return _getStatusInfoView(
+ alignment,
+ baseMessage,
+ baseMessage.sender?.uid == CometChatUIKit.loggedInUser?.uid,
+ context);
+ },
+ ),
+ ],
+ );
+```
+
+
+
+
+```dart
+Widget _getStatusInfoView(BubbleAlignment alignment, BaseMessage message,
+ bool showReceipt, BuildContext context) {
+ return Container(
+ padding: EdgeInsets.only(
+ left: 0,
+ top: 0,
+ bottom: 4,
+ ),
+ child: Row(
+ mainAxisAlignment: MainAxisAlignment.end,
+ children: [
+ Container(
+ child: Row(
+ mainAxisAlignment: MainAxisAlignment.end,
+ mainAxisSize: MainAxisSize.min,
+ children: [
+ getTime(message),
+ if (showReceipt)
+ getReceiptIcon(message, CometChatUIKit.loggedInUser),
+ ],
+ ),
+ ),
+ ],
+ ),
+ );
+ }
+
+ Widget getTime(BaseMessage messageObject) {
+ if (messageObject.sentAt == null) {
+ return const SizedBox();
+ }
+
+ DateTime lastMessageTime = messageObject.sentAt!;
+ return CometChatDate(
+ date: lastMessageTime,
+ pattern: DateTimePattern.timeFormat,
+ style: CometChatDateStyle(
+ backgroundColor: Colors.transparent,
+ textStyle: TextStyle(
+ color: Color(0xFF727272),
+ fontSize: 14.4,
+ fontWeight: FontWeight.w400,
+ letterSpacing: 0),
+ border: Border.all(
+ color: Colors.transparent,
+ width: 0,
+ ),
+ ));
+ }
+
+ Widget getReceiptIcon(BaseMessage message, User? loggedInUser) {
+ ReceiptStatus status = MessageReceiptUtils.getReceiptStatus(message);
+
+ return Padding(
+ padding: EdgeInsets.only(right: 8),
+ child: CometChatReceipt(
+ status: status,
+ size: 16,
+ style: CometChatMessageReceiptStyle(
+ deliveredIconColor: Color(0xFF858585),
+ readIconColor: Color(0xFF56E8A7),
+ sentIconColor: Color(0xFF858585),
+ waitIconColor: Color(0xFF858585),
+ ),
+ ));
+ }
+```
+
+
+
+
+
+
+
+
+
+***
+
+#### Bubble Widget
+
+The `bubbleView` property of MessageTemplate allows you to add a bubble widget to your message bubbles.
+
+Here is the complete example for reference:
+
+
+
+```dart
+ CometChatMessageList(
+ user: user, // User object
+ group: group, // Group object
+ templates: [
+ CometChatMessageTemplate(
+ type: "text",
+ category: "message",
+ bubbleView: (baseMessage, context, alignment,
+ {additionalConfigurations}) {
+ return Padding(
+ padding: const EdgeInsets.all(8.0),
+ child: Column(
+ crossAxisAlignment: alignment == BubbleAlignment.right
+ ? CrossAxisAlignment.end
+ : CrossAxisAlignment.start,
+ children: [
+ CustomPaint(
+ size: Size(260, 100),
+ painter: ChatBubblePainter(
+ text: (baseMessage as TextMessage).text,
+ alignment: alignment,
+ color: alignment == BubbleAlignment.right
+ ? Color(0xFF6852D6)
+ : Color(0xFFE8E8E8)),
+ ),
+ _getStatusInfoView(
+ alignment,
+ baseMessage,
+ baseMessage.sender?.uid ==
+ CometChatUIKit.loggedInUser?.uid,
+ context)
+ ],
+ ),
+ );
+ },
+ )
+ ],
+ );
+```
+
+
+
+
+```dart
+class ChatBubblePainter extends CustomPainter {
+ ChatBubblePainter({required this.text, this.color, this.alignment});
+
+ final String text;
+ final Color? color;
+
+ final BubbleAlignment? alignment;
+
+ @override
+ void paint(Canvas canvas, Size size) {
+ Paint paint = Paint()
+ ..color = color ?? Colors.blue
+ ..style = PaintingStyle.fill;
+
+ Path path = Path();
+ path.moveTo(0, 0);
+ path.lineTo(size.width, 0);
+ if (alignment == BubbleAlignment.right) {
+ path.lineTo(size.width, size.height);
+ path.lineTo(size.width * .9, size.height * .8);
+ path.lineTo(0, size.height * .8);
+ } else {
+ path.lineTo(size.width, size.height * .8);
+ path.lineTo(size.width * .1, size.height * .8);
+ path.lineTo(0, size.height);
+ }
+ path.close();
+
+ canvas.drawPath(path, paint);
+
+ var style = TextStyle(
+ color: alignment == BubbleAlignment.right ? Colors.white : Colors.black,
+ fontSize: 20);
+
+ final ParagraphBuilder paragraphBuilder = ParagraphBuilder(ParagraphStyle(
+ fontSize: style.fontSize,
+ fontFamily: style.fontFamily,
+ fontStyle: style.fontStyle,
+ fontWeight: style.fontWeight,
+ textAlign: TextAlign.justify,
+ ))
+ ..pushStyle(style.getTextStyle())
+ ..addText(text);
+ final Paragraph paragraph = paragraphBuilder.build()
+ ..layout(ParagraphConstraints(width: size.width));
+ canvas.drawParagraph(paragraph, Offset(55, 25));
+ }
+
+ @override
+ bool shouldRepaint(covariant CustomPainter oldDelegate) {
+ return oldDelegate != this;
+ }
+}
+```
+
+
+
+
+```dart
+Widget _getStatusInfoView(BubbleAlignment alignment, BaseMessage message,
+ bool showReceipt, BuildContext context) {
+ return Container(
+ padding: EdgeInsets.only(
+ left: 0,
+ top: 0,
+ bottom: 4,
+ ),
+ child: Row(
+ mainAxisAlignment: MainAxisAlignment.end,
+ children: [
+ Container(
+ child: Row(
+ mainAxisAlignment: MainAxisAlignment.end,
+ mainAxisSize: MainAxisSize.min,
+ children: [
+ getTime(message),
+ if (showReceipt)
+ getReceiptIcon(message, CometChatUIKit.loggedInUser),
+ ],
+ ),
+ ),
+ ],
+ ),
+ );
+ }
+
+ Widget getTime(BaseMessage messageObject) {
+ if (messageObject.sentAt == null) {
+ return const SizedBox();
+ }
+
+ DateTime lastMessageTime = messageObject.sentAt!;
+ return CometChatDate(
+ date: lastMessageTime,
+ pattern: DateTimePattern.timeFormat,
+ style: CometChatDateStyle(
+ backgroundColor: Colors.transparent,
+ textStyle: TextStyle(
+ color: Color(0xFF727272),
+ fontSize: 14.4,
+ fontWeight: FontWeight.w400,
+ letterSpacing: 0),
+ border: Border.all(
+ color: Colors.transparent,
+ width: 0,
+ ),
+ ));
+ }
+
+ Widget getReceiptIcon(BaseMessage message, User? loggedInUser) {
+ ReceiptStatus status = MessageReceiptUtils.getReceiptStatus(message);
+
+ return Padding(
+ padding: EdgeInsets.only(right: 8),
+ child: CometChatReceipt(
+ status: status,
+ size: 16,
+ style: CometChatMessageReceiptStyle(
+ deliveredIconColor: Color(0xFF858585),
+ readIconColor: Color(0xFF56E8A7),
+ sentIconColor: Color(0xFF858585),
+ waitIconColor: Color(0xFF858585),
+ ),
+ ));
+ }
+```
+
+
+
+
+
+
+
+
+
+***
+
+#### Options List
+
+The `options` property in the MessageTemplate allows you to customize the options that appear in the action sheet when a message is long-pressed. By default, CometChat UI Kit provides a set of options like "Reply", "Edit", and "Delete".
+
+However, if you wish to override or modify these options, you can use the `options` method and pass a list of `CometChatMessageOption`. This list of options will replace the default set.
+
+Here is the complete example for reference:
+
+
+
+```dart
+CometChatMessageList(
+ group: group, // Group object
+ templates: [
+ CometChatMessageTemplate(
+ type: MessageTypeConstants.text,
+ // Define the template type
+ category: MessageCategoryConstants.message,
+ options: (loggedInUser, messageObject, context, group,
+ additionalConfigurations) {
+ // Retrieve the existing options and add a new option to it
+ final existingOptions = CometChatUIKit.getDataSource()
+ .getTextMessageOptions(loggedInUser, messageObject, context,
+ group, additionalConfigurations); // since we are updating the options for text message, we are using getTextMessageOptions
+ return [
+ CometChatMessageOption(
+ id: "refresh",
+ title: "Refresh",
+ icon: Icon(
+ Icons.refresh,
+ color: Color(0xFF6852D6),
+ size: 24,
+ ),
+ messageOptionSheetStyle: CometChatMessageOptionSheetStyle(
+ titleTextStyle: TextStyle(
+ color: Color(0xFF6852D6),
+ fontSize: 14,
+ fontWeight: FontWeight.w400,
+ letterSpacing: 0),
+ )),
+ ...existingOptions,
+ ];
+ },
+ ),
+ ],
+ )
+```
+
+
+
+
+
+
+
+
+
+***
+
+## New Templates
+
+You can create an entirely new template for custom messages is one of the powerful features of CometChat's MessageTemplate.
+
+Here is the complete example for reference:
+
+
+
+```dart
+ CometChatMessageList(
+ user: user, // User object
+ group: group, // Group object
+ messagesRequestBuilder: MessagesRequestBuilder()
+ ..limit = 30
+ ..types = [
+ ...CometChatUIKit.getDataSource().getAllMessageTypes(),
+ "contact"
+ ] // Add the custom type here
+ ..categories = CometChatUIKit.getDataSource().getAllMessageCategories(),
+ templates: [
+ CometChatMessageTemplate(
+ type: "contact",
+ // Define the template type̵
+ category: MessageCategoryConstants.custom,
+ // Define the template category
+ contentView: (baseMessage, context, alignment,
+ {additionalConfigurations}) {
+ return Padding(
+ padding: const EdgeInsets.fromLTRB(8, 8, 8, 0),
+ child: Row(
+ children: [
+ CircleAvatar(
+ backgroundColor: Color(0xFFEDEAFA),
+ child: Icon(
+ Icons.person,
+ color: Colors.white,
+ ),
+ ),
+ SizedBox(
+ width: 8,
+ ),
+ Text("Safiya Fareena",
+ style: TextStyle(
+ color: alignment == BubbleAlignment.right
+ ? Colors.white
+ : Colors.black,
+ fontSize: 14,
+ ))
+ ],
+ ),
+ );
+ },
+ bottomView: (baseMessage, context, alignment,
+ {additionalConfigurations}) {
+ return DecoratedBox(
+ decoration: BoxDecoration(
+ border: Border(
+ top: BorderSide(color: Color(0xFF7965DB), width: 1))),
+ child: ToggleButtons(
+ children: [
+ Padding(
+ padding: EdgeInsets.fromLTRB(20, 8, 0, 8),
+ child: Text("Add Contact",
+ style: TextStyle(
+ color: alignment == BubbleAlignment.right
+ ? Colors.white
+ : Colors.black,
+ fontSize: 14,
+ fontWeight: FontWeight.w500)),
+ ),
+ VerticalDivider(
+ color: Color(0xFF7965DB),
+ width: 0,
+ ),
+ Padding(
+ padding: EdgeInsets.fromLTRB(0, 8, 20, 8),
+ child: Text("Message",
+ style: TextStyle(
+ color: alignment == BubbleAlignment.right
+ ? Colors.white
+ : Colors.black,
+ fontSize: 14,
+ fontWeight: FontWeight.w500)),
+ )
+ ],
+ isSelected: [false, false, false],
+ renderBorder: false,
+ ),
+ );
+ })
+ ],
+ );
+```
+
+
+
+
+
+
+
+
diff --git a/ui-kit/flutter/v5/methods.mdx b/ui-kit/flutter/v5/methods.mdx
new file mode 100644
index 000000000..0cd6ce2d7
--- /dev/null
+++ b/ui-kit/flutter/v5/methods.mdx
@@ -0,0 +1,697 @@
+---
+title: "Methods"
+description: "Reference for CometChat Flutter UI Kit methods including init, login, logout, and message-sending wrappers."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_chat_uikit` |
+| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` |
+| Init | `CometChatUIKit.init(uiKitSettings: UIKitSettings)` |
+| Login (dev) | `CometChatUIKit.login(uid)` |
+| Login (prod) | `CometChatUIKit.loginWithAuthToken(authToken)` |
+| Other methods | `CometChatUIKit.logout()`, `CometChatUIKit.getLoggedInUser()`, `CometChatUIKit.createUser(user)`, `CometChatUIKit.updateUser(user)` |
+| Send messages | `CometChatUIKit.sendTextMessage()`, `CometChatUIKit.sendMediaMessage()`, `CometChatUIKit.sendCustomMessage()` |
+| Interactive messages | `CometChatUIKit.sendFormMessage()`, `CometChatUIKit.sendCardMessage()`, `CometChatUIKit.sendSchedulerMessage()` |
+| Reactions | `CometChatUIKit.addReaction()`, `CometChatUIKit.removeReaction()` |
+| Note | Use these wrapper methods instead of raw SDK calls — they manage internal UI Kit eventing |
+
+
+
+## Overview
+
+The UI Kit's core function is to extend the [Chat SDK](/sdk/flutter/overview), essentially translating the raw data and functionality provided by the underlying methods into visually appealing and easy-to-use UI components.
+
+To effectively manage and synchronize the UI elements and data across all components in the UI Kit, we utilize internal events. These internal events enable us to keep track of changes in real-time and ensure that the UI reflects the most current state of data.
+
+The CometChat UI Kit has thoughtfully encapsulated the critical [Chat SDK](/sdk/flutter/overview) methods within its wrapper to efficiently manage internal eventing. This layer of abstraction simplifies interaction with the underlying CometChat SDK, making it more user-friendly for developers.
+
+## Methods
+
+You can access the methods using the `CometChatUIKit` class. This class provides access to all the public methods exposed by the CometChat UI Kit.
+
+### Init
+
+As a developer, you need to invoke this method every time before you use any other methods provided by the UI Kit.
+
+This initialization is a critical step that ensures the UI Kit and Chat SDK function correctly and as intended in your application. Typical practice is to make this one of the first lines of code executed in your application's lifecycle when it comes to implementing CometChat.
+
+
+`CometChatUIKit.init()` must be called before rendering any UI Kit components or calling any SDK methods. Initialization must complete before login.
+
+
+
+Auth Key is for development/testing only. In production, generate Auth Tokens on the server using the REST API and pass them to the client via `loginWithAuthToken()`. Never expose Auth Keys in production client code.
+
+
+
+Make sure you replace the **APP\_ID**, **REGION** and **AUTH\_KEY** with your CometChat App ID, Region and Auth Key in the below code. The `Auth Key` is an optional property of the `UIKitSettings` Class. It is intended for use primarily during proof-of-concept (POC) development or in the early stages of application development. You can use the [Auth Token](#login-using-auth-token) to log in securely.
+
+
+As a developer, the `UIKitSettings` is an important parameter of the `init()` function. It functions as a base settings object, housing properties such as `appId`, `region`, and `authKey`, contained within `UIKitSettings`.
+
+Here's the table format for the properties available in `UIKitSettings`:
+
+| Method | Type | Description |
+| --------------------------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| **appId** | `String` | Sets the unique ID for the app, available on dashboard |
+| **region** | `String` | Sets the region for the app ('us' or 'eu' or 'in') |
+| **authKey** | `String` | Sets the auth key for the app, available on dashboard |
+| **subscriptionType** | `String` | Sets subscription type for tracking the presence of all users |
+| **roles** | `String` | Sets subscription type for tracking the presence of users with specified roles |
+| **autoEstablishSocketConnection** | `Boolean` | Configures if web socket connections will established automatically on app initialization or be done manually, set to true by default |
+| **aiFeature** | `List` | Sets the AI Features that need to be added in UI Kit |
+| **extensions** | `List` | Sets the list of extension that need to be added in UI Kit |
+| **callingExtension** | `ExtensionsDataSource` | Sets the calling extension configuration |
+| **adminHost** | `String` | Sets a custom admin host URL |
+| **clientHost** | `String` | Sets a custom client host URL |
+| **dateTimeFormatterCallback** | `DateTimeFormatterCallback` | Sets a custom date/time formatter for consistent formatting across all UI components |
+
+***
+
+The concluding code block:
+
+
+
+```dart highlight={3-5}
+UIKitSettings uiKitSettings = (UIKitSettingsBuilder()
+ ..subscriptionType = CometChatSubscriptionType.allUsers
+ ..autoEstablishSocketConnection = true
+ ..region = "your_region" // Replace with your region
+ ..appId = "your_appID" // Replace with your app Id
+ ..authKey = "your_authKey" // Replace with your app auth key
+).build();
+
+CometChatUIKit.init(
+ uiKitSettings: uiKitSettings,
+ onSuccess: (successMessage) async {
+ // Initialization successful, proceed to login
+ },
+ onError: (error) {
+ // Handle initialization error
+ },
+);
+```
+
+
+
+
+
+***
+
+### Login using Auth Key
+
+Only the `UID` of a user is needed to log in. This simple authentication procedure is useful when you are creating a POC or if you are in the development phase. For production apps, we suggest you use [AuthToken](#login-using-auth-token) instead of Auth Key.
+
+
+
+```dart highlight={1}
+String uid = "user1";
+
+CometChatUIKit.login(
+ uid,
+ onSuccess: (user) {
+ // Login successful, mount your app
+ },
+ onError: (e) {
+ // Handle login error
+ },
+);
+```
+
+
+
+
+
+***
+
+### Login using Auth Token
+
+Production-safe authentication that does not expose the Auth Key in client code.
+
+1. [Create a User](/rest-api/chat-apis) via the CometChat API when the user signs up in your app.
+
+2. [Create an Auth Token](/rest-api/chat-apis) via the CometChat API for the new user and save the token in your database.
+
+3. Load the Auth Token in your client and pass it to the `loginWithAuthToken()` method.
+
+
+
+```dart highlight={1}
+String authToken = "AUTH_TOKEN";
+
+CometChatUIKit.loginWithAuthToken(
+ authToken,
+ onSuccess: (user) {
+ // Login successful, mount your app
+ },
+ onError: (e) {
+ // Handle login error
+ },
+);
+```
+
+
+
+
+
+***
+
+### Logout
+
+The CometChat UI Kit and Chat SDK effectively handle the session of the logged-in user within the framework. Before a new user logs in, it is crucial to clean this data to avoid potential conflicts or unexpected behavior. This can be achieved by invoking the `.logout()` function
+
+
+
+```dart
+CometChatUIKit.logout(onSuccess: (s) {
+ // TODO("Not yet implemented")
+} , onError: (e) {
+ // TODO("Not yet implemented")
+});
+```
+
+
+
+
+
+***
+
+### Create User
+
+As a developer, you can dynamically create users on CometChat using the `.createUser()` function. This can be extremely useful for situations where users are registered or authenticated by your system and then need to be created on CometChat.
+
+
+
+```dart
+CometChatUIKit.createUser(userObject, onSuccess: (user) {
+ // TODO("Not yet implemented")
+}, onError: (e) {
+ // TODO("Not yet implemented")
+});
+```
+
+
+
+
+
+***
+
+### Update User
+
+As a developer, you can update user details using the `.updateUser()` function. This should ideally be achieved at your backend using the Restful APIs, but can also be done client-side when needed.
+
+
+
+```dart
+CometChatUIKit.updateUser(userObject, onSuccess: (user) {
+ // TODO("Not yet implemented")
+}, onError: (e) {
+ // TODO("Not yet implemented")
+});
+```
+
+
+
+
+
+***
+
+### Get Logged In User
+
+You can check if there is any existing session in the SDK and retrieve the details of the logged-in user using the `.getLoggedInUser()` function.
+
+
+
+```dart
+CometChatUIKit.getLoggedInUser(onSuccess: (user) {
+ // TODO("Not yet implemented")
+}, onError: (e) {
+ // TODO("Not yet implemented")
+});
+```
+
+
+
+
+
+***
+
+### DateFormatter
+
+By providing a custom implementation of the DateTimeFormatterCallback, you can globally configure how time and date values are displayed across all UI components in the CometChat UI Kit. This ensures consistent formatting for labels such as "Today", "Yesterday", "X minutes ago", and more, throughout the entire application.
+
+Each method in the interface corresponds to a specific case:
+
+* time(int? timestamp) → Custom full timestamp format
+* today(int? timestamp) → Called when a message is from today
+* yesterday(int? timestamp) → Called for yesterday’s messages
+* lastWeek(int? timestamp) → Messages from the past week
+* otherDays(int? timestamp) → Older messages
+* minute(int? timestamp) / hour(int? timestamp) → Exact time unit
+* minutes(int? diffInMinutesFromNow, int? timestamp) → e.g., "5 minutes ago"
+* hours(int? diffInHourFromNow, int? timestamp) → e.g., "2 hours ago"
+
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:intl/intl.dart';
+
+/// Custom implementation of DateTimeFormatterCallback
+/// to format time and date display in the CometChat UI.
+class DateFormatter extends DateTimeFormatterCallback {
+ /// Formatter for displaying full time like "10:45 PM"
+ final DateFormat fullTimeFormatter = DateFormat('hh:mm a');
+
+ /// Formatter for displaying date like "23 Jun 2025"
+ final DateFormat dateFormatter = DateFormat('dd MMM yyyy');
+
+ /// Returns formatted time (e.g., "10:45 PM") for a given timestamp.
+ @override
+ String? time(int? timestamp) {
+ if (timestamp == null) return null;
+ return fullTimeFormatter.format(DateTime.fromMillisecondsSinceEpoch(timestamp));
+ }
+
+ /// Returns a static label for messages sent today.
+ @override
+ String? today(int? timestamp) {
+ return "Today";
+ }
+
+ /// Returns a static label for messages sent yesterday.
+ @override
+ String? yesterday(int? timestamp) {
+ return "Yesterday";
+ }
+
+ /// Returns a static label for messages sent last week.
+ @override
+ String? lastWeek(int? timestamp) {
+ return "Last Week";
+ }
+
+ /// Returns formatted date (e.g., "23 Jun 2025") for other days.
+ @override
+ String? otherDays(int? timestamp) {
+ if (timestamp == null) return null;
+ return dateFormatter.format(DateTime.fromMillisecondsSinceEpoch(timestamp));
+ }
+
+ /// Returns relative time in minutes (e.g., "5 mins ago").
+ @override
+ String? minutes(int? diffInMinutesFromNow, int? timestamp) {
+ if (diffInMinutesFromNow == null) return null;
+ return "$diffInMinutesFromNow mins ago";
+ }
+
+ /// Returns relative time in hours (e.g., "2 hrs ago").
+ @override
+ String? hours(int? diffInHourFromNow, int? timestamp) {
+ if (diffInHourFromNow == null) return null;
+ return "$diffInHourFromNow hrs ago";
+ }
+
+ /// (Optional) Returns formatted hour (e.g., "3 PM") if used by SDK.
+ @override
+ String? hour(int? timestamp) {
+ if (timestamp == null) return null;
+ return DateFormat('h a').format(DateTime.fromMillisecondsSinceEpoch(timestamp));
+ }
+
+ /// (Optional) Returns formatted minute value (e.g., "09") if used by SDK.
+ @override
+ String? minute(int? timestamp) {
+ if (timestamp == null) return null;
+ return DateFormat('mm').format(DateTime.fromMillisecondsSinceEpoch(timestamp));
+ }
+}
+
+// Build CometChat UIKit settings
+UIKitSettings uiKitSettings = (UIKitSettingsBuilder()
+ // Set subscription type (e.g., receive messages from all users)
+ ..subscriptionType = CometChatSubscriptionType.allUsers
+
+ // Set your CometChat region
+ ..region = AppCredentials.region
+
+ // Automatically connect to socket server
+ ..autoEstablishSocketConnection = true
+
+ // CometChat App ID and Auth Key
+ ..appId = AppCredentials.appId
+ ..authKey = AppCredentials.authKey
+
+ // Enable calling feature
+ ..callingExtension = CometChatCallingExtension()
+
+ // Load default chat extensions (e.g., polls, stickers, reactions)
+ ..extensions = CometChatUIKitChatExtensions.getDefaultExtensions()
+
+ // Load default AI features (e.g., Smart Replies, Sentiment Analysis)
+ ..aiFeature = CometChatUIKitChatAIFeatures.getDefaultAiFeatures()
+
+ // Inject the custom date and time formatter
+ ..dateTimeFormatterCallback = DateFormatter()
+ )
+ .build();
+
+// Initialize CometChat UIKit with the configured settings
+CometChatUIKit.init(
+ uiKitSettings: uiKitSettings,
+
+ // Callback when initialization is successful
+ onSuccess: (successMessage) async {
+ // On success
+ },
+
+ // Callback when initialization fails
+ onError: (e) {
+ shouldGoToHomeScreen.value = false;
+ if (kDebugMode) {
+ debugPrint("Initialization failed with error: ${e.details}");
+ }
+ },
+);
+
+
+```
+
+
+
+
+
+***
+
+### Base Message
+
+#### Text Message
+
+Sends a text message in a 1:1 or group chat. Takes a `TextMessage` object.
+
+
+
+```dart highlight={1-2}
+String receiverID = "UID";
+String messageText = "Hello world!";
+
+TextMessage textMessage = TextMessage(
+ text: messageText,
+ receiverUid: receiverID,
+ receiverType: ReceiverType.user,
+);
+
+CometChatUIKit.sendTextMessage(
+ textMessage,
+ onSuccess: (message) {
+ // Message sent successfully
+ },
+ onError: (e) {
+ // Handle error
+ },
+);
+```
+
+
+
+
+```dart highlight={1-2}
+String receiverID = "GUID";
+String messageText = "Hello world!";
+
+TextMessage textMessage = TextMessage(
+ text: messageText,
+ receiverUid: receiverID,
+ receiverType: ReceiverType.group,
+);
+
+CometChatUIKit.sendTextMessage(
+ textMessage,
+ onSuccess: (message) {
+ // Message sent successfully
+ },
+ onError: (e) {
+ // Handle error
+ },
+);
+```
+
+
+
+
+
+***
+
+#### Media Message
+
+Sends a media message in a 1:1 or group chat. Takes a `MediaMessage` object.
+
+
+
+```dart highlight={1-2}
+String receiverID = "UID";
+String filePath = "/path/to/file";
+
+MediaMessage mediaMessage = MediaMessage(
+ receiverUid: receiverID,
+ receiverType: ReceiverType.user,
+ type: MessageType.file,
+ file: filePath,
+);
+
+CometChatUIKit.sendMediaMessage(
+ mediaMessage,
+ onSuccess: (message) {
+ // Media message sent successfully
+ },
+ onError: (e) {
+ // Handle error
+ },
+);
+```
+
+
+
+
+```dart highlight={1-2}
+String receiverID = "GUID";
+String filePath = "/path/to/file";
+
+MediaMessage mediaMessage = MediaMessage(
+ receiverUid: receiverID,
+ receiverType: ReceiverType.group,
+ type: MessageType.file,
+ file: filePath,
+);
+
+CometChatUIKit.sendMediaMessage(
+ mediaMessage,
+ onSuccess: (message) {
+ // Media message sent successfully
+ },
+ onError: (e) {
+ // Handle error
+ },
+);
+```
+
+
+
+
+
+***
+
+#### Custom Message
+
+Sends a custom message (neither text nor media) in a 1:1 or group chat. Takes a `CustomMessage` object.
+
+
+
+```dart highlight={1,3-4}
+String receiverID = "UID";
+Map customData = {
+ "latitude": "50.6192171633316",
+ "longitude": "-72.68182268750002",
+};
+String customType = "location";
+
+CustomMessage customMessage = CustomMessage(
+ receiverUid: receiverID,
+ receiverType: ReceiverType.user,
+ type: customType,
+ customData: customData,
+);
+
+CometChatUIKit.sendCustomMessage(
+ customMessage,
+ onSuccess: (message) {
+ // Custom message sent successfully
+ },
+ onError: (e) {
+ // Handle error
+ },
+);
+```
+
+
+
+
+```dart highlight={1,3-4}
+String receiverID = "GUID";
+Map customData = {
+ "latitude": "50.6192171633316",
+ "longitude": "-72.68182268750002",
+};
+String customType = "location";
+
+CustomMessage customMessage = CustomMessage(
+ receiverUid: receiverID,
+ receiverType: ReceiverType.group,
+ type: customType,
+ customData: customData,
+);
+
+CometChatUIKit.sendCustomMessage(
+ customMessage,
+ onSuccess: (message) {
+ // Custom message sent successfully
+ },
+ onError: (e) {
+ // Handle error
+ },
+);
+```
+
+
+
+
+
+***
+
+### Interactive Message
+
+#### Form Message
+
+As a developer, if you need to send a Form message to a single user or a group, you'll need to utilize the `sendFormMessage()` function. This function requires a `FormMessage` object as its argument, which contains the necessary information to create a form bubble for that messages
+
+
+
+```dart
+CometChatUIKit.sendFormMessage(formMessageObject, onSuccess: (p0) {
+ // TODO("Not yet implemented")
+}, onError: (p0) {
+ // TODO("Not yet implemented")
+});
+```
+
+
+
+
+
+***
+
+#### Card Message
+
+As a developer, if you need to send a Card message to a single user or a group, you'll need to utilize the `sendCardMessage()` function. This function requires a `CardMessage` object as its argument, which contains the necessary information to create a card bubble for the messages
+
+
+
+```dart
+CometChatUIKit.sendCardMessage(cardMessageObject, onSuccess: (p0) {
+ // TODO("Not yet implemented")
+}, onError: (p0) {
+ // TODO("Not yet implemented")
+});
+```
+
+
+
+
+
+***
+
+#### Scheduler Message
+
+As a developer, if you need to send a Scheduler message to a single user or a group, you'll need to utilize the `sendSchedulerMessage()` function. This function requires a `SchedulerMessage` object as its argument, which contains the necessary information to create a SchedulerMessage bubble for the messages
+
+
+
+```dart
+CometChatUIKit.sendSchedulerMessage(schedulerMessageObject, onSuccess: (p0) {
+ // TODO("Not yet implemented")
+}, onError: (p0) {
+ // TODO("Not yet implemented")
+});
+```
+
+
+
+
+
+***
+
+#### Custom Interactive Message
+
+As a developer, if you need to send a Interactive message to a single user or a group, you'll need to utilize the `sendCustomInteractiveMessage()` function. This function requires a `InteractiveMessage` object as its argument, which contains the necessary information to create a custom interactive message bubble for the messages
+
+
+
+```dart
+CometChatUIKit.sendCustomInteractiveMessage(interactiveMessageObject, onSuccess: (p0) {
+ // TODO("Not yet implemented")
+}, onError: (p0) {
+ // TODO("Not yet implemented")
+});
+```
+
+
+
+
+
+***
+
+### Reactions
+
+#### Add Reaction
+
+As a developer, you can add a reaction to a message using the `addReaction()` function. This will update the UI of `CometChatMessageList` and `CometChatReactions` accordingly.
+
+
+
+```dart
+CometChatUIKit.addReaction(messageId, "👍", onSuccess: (message) {
+ // TODO("Not yet implemented")
+}, onError: (e) {
+ // TODO("Not yet implemented")
+});
+```
+
+
+
+
+
+***
+
+#### Remove Reaction
+
+As a developer, you can remove a reaction from a message using the `removeReaction()` function. This will update the UI of `CometChatMessageList` and `CometChatReactions` accordingly.
+
+
+
+```dart
+CometChatUIKit.removeReaction(messageId, "👍", onSuccess: (message) {
+ // TODO("Not yet implemented")
+}, onError: (e) {
+ // TODO("Not yet implemented")
+});
+```
+
+
+
+
+
+***
diff --git a/ui-kit/flutter/v5/multi-tab-chat-ui-guide.mdx b/ui-kit/flutter/v5/multi-tab-chat-ui-guide.mdx
new file mode 100644
index 000000000..24f03ebfa
--- /dev/null
+++ b/ui-kit/flutter/v5/multi-tab-chat-ui-guide.mdx
@@ -0,0 +1,120 @@
+---
+title: "Multi Tab Chat UI Guide"
+description: "Multi Tab Chat UI Guide — CometChat integration guide."
+---
+
+This guide will help you create a multi-tab chat user interface using the cometchat\_chat\_uikit package in Flutter. The final UI will consist of three tabs: Conversations, Users, and Groups.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+##### Create the Multi-Tab Chat UI:
+
+Update your `lib/multi_tab_chat_ui_guid.dart` file with the following code:
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:flutter/material.dart';
+
+class MultiTabUIGuideExample extends StatefulWidget {
+ const MultiTabUIGuideExample({super.key});
+
+ @override
+ State createState() => _MultiTabUIGuideExampleState();
+}
+
+class _MultiTabUIGuideExampleState extends State {
+
+ @override
+ Widget build(BuildContext context) {
+ return DefaultTabController(
+ length: 3,
+ child: Scaffold(
+ appBar: AppBar(
+ title: const Text('Multi Tab UI Guide'),
+ backgroundColor: Colors.white,
+ leading: null,
+ automaticallyImplyLeading: false,
+ bottom: const TabBar(
+ tabs: [
+ Tab(icon: Icon(Icons.chat), text: 'Conversation'),
+ Tab(icon: Icon(Icons.person), text: 'Users'),
+ Tab(icon: Icon(Icons.group), text: 'Groups'),
+ ],
+ ),
+ ),
+ body: const TabBarView(
+ children: [
+ CometChatConversationsWithMessages(
+ conversationsConfiguration: ConversationsConfiguration(
+ hideAppbar: true
+ )
+ ),
+ CometChatUsersWithMessages(
+ usersConfiguration: UsersConfiguration(
+ hideAppbar: true,
+ hideSearch: true
+ )
+ ),
+ CometChatGroupsWithMessages(
+ groupsConfiguration: GroupsConfiguration(
+ hideAppbar: true,
+ hideSearch: true
+ )
+ ),
+ ],
+ ),
+ ),
+ );
+ }
+}
+```
+
+
+
+
diff --git a/ui-kit/flutter/v5/outgoing-call.mdx b/ui-kit/flutter/v5/outgoing-call.mdx
new file mode 100644
index 000000000..1a73ce2eb
--- /dev/null
+++ b/ui-kit/flutter/v5/outgoing-call.mdx
@@ -0,0 +1,433 @@
+---
+title: "Outgoing Call"
+description: "Widget that serves as a visual representation of a user-initiated call, providing options to control the call experience."
+---
+
+```json
+{
+ "component": "CometChatOutgoingCall",
+ "package": "cometchat_calls_uikit",
+ "import": "import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';",
+ "description": "Widget that serves as a visual representation of a user-initiated call, providing options to control the call experience.",
+ "props": {
+ "data": {
+ "call": { "type": "Call", "required": true },
+ "user": { "type": "User?", "default": "null" }
+ },
+ "callbacks": {
+ "onCancelled": "Function(BuildContext context, Call call)?",
+ "onError": "OnError?"
+ },
+ "viewSlots": {
+ "subtitleView": "Widget? Function(BuildContext context, Call call)?",
+ "avatarView": "Widget? Function(BuildContext context, Call call)?",
+ "titleView": "Widget? Function(BuildContext context, Call call)?",
+ "cancelledView": "Widget? Function(BuildContext context, Call call)?"
+ },
+ "style": {
+ "outgoingCallStyle": "CometChatOutgoingCallStyle?"
+ },
+ "layout": {
+ "height": { "type": "double?", "default": "null" },
+ "width": { "type": "double?", "default": "null" }
+ },
+ "icons": {
+ "declineButtonIcon": "Widget?"
+ },
+ "sound": {
+ "disableSoundForCalls": { "type": "bool?", "default": "false" },
+ "customSoundForCalls": "String?",
+ "customSoundForCallsPackage": "String?"
+ },
+ "configuration": {
+ "callSettingsBuilder": "CallSettingsBuilder?"
+ }
+ }
+}
+```
+
+
+## Overview
+
+The `CometChatOutgoingCall` [Widget](/ui-kit/android/components-overview#components) is a visual representation of a user-initiated call, whether it's a voice or video call. It serves as an interface for managing outgoing calls, providing users with essential options to control the call experience. This Widget typically includes information about the call recipient, call controls for canceling the call, and feedback on the call status, such as indicating when the call is in progress.
+
+
+
+
+
+You can launch `CometChatOutgoingCall` directly using `Navigator.push`, or you can define it as a widget within the `build` method of your `State` class.
+
+##### 1. Using Navigator to Launch `CometChatOutgoingCall`
+
+
+
+```dart
+Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatOutgoingCall(user: user, call: callObject))); // User object and Call object is required to launch the incoming call widget.
+```
+
+
+
+
+
+##### 2. Embedding `CometChatOutgoingCall` as a Widget in the build Method
+
+
+
+```dart
+import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';
+import 'package:flutter/material.dart';
+
+class OutgoingCallExample extends StatefulWidget {
+ const OutgoingCallExample({super.key});
+
+ @override
+ State createState() => _OutgoingCallExampleState();
+}
+
+class _OutgoingCallExampleState extends State {
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: SafeArea(
+ child: CometChatOutgoingCall(
+ user: user, // User Object
+ call: callObject
+ ), // User object and Call object is required to launch the incoming call widget.
+ ),
+ );
+ }
+}
+```
+
+
+
+
+
+***
+
+### Actions
+
+[Actions](/ui-kit/android/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.
+
+##### 1. onCancelled
+
+The `onCancelled` action is typically triggered when the call is ended, carrying out default actions. However, with the following code snippet, you can effortlessly customize or override this default behavior to meet your specific needs.
+
+
+
+```dart
+CometChatOutgoingCall(
+ user: user, // User Object
+ call: callObject, // Call Object
+ onCancelled: (BuildContext context, Call call) {
+ // TODO("Not yet implemented")
+ },
+)
+```
+
+
+
+
+
+***
+
+##### 2. onError
+
+You can customize this behavior by using the provided code snippet to override the `onError` and improve error handling.
+
+
+
+```dart
+CometChatOutgoingCall(
+ user: user, // User Object
+ call: callObject, // Call Object
+ onError: (e) {
+ // TODO("Not yet implemented")
+ },
+)
+```
+
+
+
+
+
+***
+
+### Filters
+
+**Filters** allow you to customize the data displayed in a list within a Widget. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK.
+
+The `CometChatOutgoingCall` Widget does not have any exposed filters.
+
+***
+
+### Events
+
+[Events](/ui-kit/android/components-overview#events) are emitted by a `Widget`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.
+
+Events emitted by the Outgoing call Widget are as follows.
+
+| Event | Description |
+| ------------------ | -------------------------------------------- |
+| **ccCallAccepted** | Triggers when the outgoing call is accepted. |
+| **ccCallRejected** | Triggers when the outgoing call is rejected. |
+
+**Example**
+
+Here is the complete example for reference:
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:flutter/material.dart';
+
+class YourScreen extends StatefulWidget {
+ const YourScreen({super.key});
+
+ @override
+ State createState() => _YourScreenState();
+}
+
+class _YourScreenState extends State with CometChatCallEventListener {
+
+ @override
+ void initState() {
+ super.initState();
+ CometChatCallEvents.addCallEventsListener("unique_listener_ID", this); // Add the listener
+ }
+
+ @override
+ void dispose(){
+ super.dispose();
+ CometChatCallEvents.removeCallEventsListener("unique_listener_ID"); // Remove the listener
+ }
+
+ @override
+ void ccCallAccepted(Call call) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ void ccCallRejected(Call call) {
+ // TODO("Not yet implemented")
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return const Placeholder();
+ }
+
+}
+```
+
+
+
+
+
+***
+
+## Customization
+
+To fit your app's design requirements, you can customize the appearance of the conversation widget. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.
+
+### Style
+
+You can customize the appearance of the `CometChatOutgoingCall` Widget by applying the `CometChatOutgoingCallStyle` to it using the following code snippet.
+
+**Example**
+
+Here is the complete example for reference:
+
+
+
+```dart
+CometChatOutgoingCall(
+ user: user, // User Object
+ call: callObject, // Call Object
+ outgoingCallStyle: CometChatOutgoingCallStyle(
+ avatarStyle: CometChatAvatarStyle(
+ backgroundColor: Color(0xFFFBAA75),
+ borderRadius: BorderRadius.circular(8),
+ ),
+ declineButtonColor: Color(0xFFF44649),
+ declineButtonBorderRadius: BorderRadius.circular(12),
+ )
+)
+```
+
+
+
+
+
+
+
+
+
+***
+
+### Functionality
+
+These are a set of small functional customizations that allow you to fine-tune the overall experience of the widget. With these, you can change text, set custom icons, and toggle the visibility of UI elements.
+
+**Example**
+
+In this example, we're enhancing the interface by customizing the decline button icons. By setting custom icons for decline buttons, users can enjoy a more visually appealing and personalized experience.
+
+This level of customization allows developers to tailor the user interface to match the overall theme and branding of their application.
+
+**Example**
+
+Here is the example for reference:
+
+
+
+```dart
+CometChatOutgoingCall(
+ user: user, // User Object
+ call: callObject, // Call Object
+ disableSoundForCalls: true,
+ declineButtonText: "Decline",
+)
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Below is a list of customizations along with corresponding code snippets
+
+| **Property** | Description | Code |
+| ---------------------------------- | --------------------------------------------------------------------------------- | ------------------------------------------- |
+| **Custom Sound For Calls** | Sets the custom sound for outgoing calls. | `customSoundForCalls: String?` |
+| **Custom Sound For Calls Package** | Sets the package for the custom sound for outgoing calls. | `customSoundForCallsPackage: String?` |
+| **Disable Sound For Calls** | Disables sound for outgoing calls. | `disableSoundForCalls: bool?` |
+| **Call** | Used to set the Call object against which we need to display the outgoing screen. | `call: Call` |
+| **callSettingsBuilder** | Sets the CallSettingsBuilder for the outgoing call configuration. | `callSettingsBuilder: CallSettingsBuilder?` |
+| **declineButtonIcon** | Sets decline button icon. | `declineButtonIcon: Widget?` |
+
+***
+
+## Advanced
+
+For advanced-level customization, you can set custom widgets to the widget. This lets you tailor each aspect of the widget to fit your exact needs and application aesthetics. You can create and define your widgets, layouts, and UI elements and then incorporate those into the widget.
+
+***
+
+### titleView
+
+Allows setting a custom title view to be rendered.
+
+Use Cases:
+
+* Display the contact’s name in a unique style.
+* Show a call type indicator (Voice Call, Video Call).
+* Add status text like "Calling..." or "Ringing...".
+
+
+
+```dart
+CometChatOutgoingCall(
+ titleView: (context, call) {
+ // return titleView
+ },
+)
+```
+
+
+
+
+
+***
+
+### subTitleView
+
+Allows setting a custom sub title view.
+
+Use Cases:
+
+* Display call duration if available.
+* Show network strength indicators.
+* Include a custom message like "Connecting...".
+
+
+
+```dart
+CometChatOutgoingCall(
+ subtitleView: (context, call) {
+ // return subtitleView
+ },
+)
+```
+
+
+
+
+
+***
+
+### avatarView
+
+Allows setting a custom avatar view.
+
+Use Cases:
+
+* Show a profile picture with an online indicator.
+* Display a custom icon based on the call type (Voice/Video).
+* Use an animated ring effect around the avatar when calling.
+
+
+
+```dart
+CometChatOutgoingCall(
+ avatarView: (context, call) {
+ // return avatrView
+ },
+)
+```
+
+
+
+
+
+***
+
+### cancelledView
+
+Allows setting a custom cancelled view.
+
+Use Cases:
+
+* Customize the "End Call" button style.
+* Add a confirmation pop-up before ending the call.
+* Display different icons based on call status (Active, On Hold)..
+
+
+
+```dart
+CometChatOutgoingCall(
+ cancelledView: (context, call) {
+ // return cancelledView
+ },
+)
+```
+
+
+
+
+
+***
diff --git a/ui-kit/flutter/v5/overview.mdx b/ui-kit/flutter/v5/overview.mdx
new file mode 100644
index 000000000..88d3f18ad
--- /dev/null
+++ b/ui-kit/flutter/v5/overview.mdx
@@ -0,0 +1,126 @@
+---
+title: "Flutter UI Kit"
+sidebarTitle: "Overview"
+description: "Prebuilt Flutter widgets for chat, voice, and video calling. Works on iOS and Android."
+---
+
+
+🚀 **V6 Available** — The Flutter UI Kit V6 is now available with BLoC state management, clean architecture, and improved performance. [Check out the V6 Overview →](/ui-kit/flutter/overview)
+
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_chat_uikit` v5.2.x |
+| Calling | Optional — `cometchat_calls_uikit` |
+| Platforms | iOS 13.0+, Android API 21+ |
+| Flutter | 3.0+ recommended |
+| Localization | Built-in support |
+| Source | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/chat_uikit) |
+| AI Skills | `npx @cometchat/skills add` — [GitHub](https://github.com/cometchat/cometchat-skills) |
+
+
+
+The CometChat Flutter UI Kit provides prebuilt, customizable widgets for adding chat, voice, and video calling to any Flutter app. Each widget handles its own data fetching, real-time listeners, and state — you just drop them into your layout.
+
+
+
+
+
+---
+
+## Integrate with AI Coding Agents
+
+Use [CometChat Skills](https://github.com/cometchat/cometchat-skills) to add chat to any Flutter project through your AI coding agent. The skill takes an AI-first approach — your agent has a short conversation with you to understand your project and chat requirements, then writes production-grade integration code tailored to the files you already have.
+
+Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and [30+ more agents](https://github.com/cometchat/cometchat-skills).
+
+```bash
+npx @cometchat/skills add
+```
+
+Use `--ide ` to target a specific IDE (e.g. `--ide cursor`), or `--ide all` to install for all supported IDEs.
+
+Then in your IDE:
+
+```
+/cometchat add chat to my app
+```
+
+The skill detects your Flutter project structure, navigation setup, 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 routes, screens, and widgets before proposing a placement (route, modal sheet, or tab), shows the plan (which files it will create, modify, and leave untouched), and waits for your approval before writing code. Credentials are saved as a Dart const file or via `--dart-define`.
+
+After the first integration, re-run `/cometchat` anytime to pick from the iteration menu:
+
+- **Customize look & feel** — theme presets (slack / whatsapp / imessage / discord / notion) or your own brand color
+- **Add a feature** — 40+ features including calls, reactions, polls, AI smart replies, file sharing, presence
+- **Customize a component** — custom message bubbles, headers, composer actions, empty/loading states
+- **Set up production auth** — replace the dev Auth Key with a server-side token endpoint
+- **Set up user management** — server endpoints for creating/updating/deleting CometChat users
+- **Run diagnostics** — verify, drift detection, symptom-to-cause lookup
+
+---
+
+## Try It
+
+
+
+ Clone and run the Flutter sample project
+
+
+
+---
+
+## Get Started
+
+
+
+
+
+
+ Install, initialize, and build your first chat screen
+
+
+---
+
+## Explore
+
+
+
+ Browse all prebuilt UI widgets
+
+
+ Chat, calling, AI, and extensions
+
+
+ Colors, fonts, dark mode, and custom styling
+
+
+ Understand CometChat's core concepts
+
+
+
+---
+
+## Resources
+
+
+
+ Working reference app
+
+
+ Full UI Kit source on GitHub
+
+
+ Design resources and prototyping
+
+
+ Common issues and fixes
+
+
+ Open a support ticket
+
+
+ Upgrading from v4
+
+
diff --git a/ui-kit/flutter/v5/search.mdx b/ui-kit/flutter/v5/search.mdx
new file mode 100644
index 000000000..d4a1adcf5
--- /dev/null
+++ b/ui-kit/flutter/v5/search.mdx
@@ -0,0 +1,495 @@
+---
+title: "Search"
+description: "A powerful search interface for finding conversations and messages in real time"
+---
+
+
+```json
+{
+ "component": "CometChatSearch",
+ "package": "cometchat_chat_uikit",
+ "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
+ "description": "A powerful search interface that allows users to search across conversations and messages in real time with filters and customization options",
+ "primaryOutput": {
+ "prop": "onMessageClicked",
+ "type": "void Function(BaseMessage message)"
+ },
+ "props": {
+ "data": {
+ "user": {
+ "type": "User?",
+ "default": "null",
+ "note": "User object for user message search"
+ },
+ "group": {
+ "type": "Group?",
+ "default": "null",
+ "note": "Group object for group message search"
+ },
+ "searchFilters": {
+ "type": "List?",
+ "default": "null",
+ "note": "List of filters to be shown in the search screen"
+ },
+ "searchIn": {
+ "type": "List?",
+ "default": "null",
+ "note": "List of scopes to be shown in the search result"
+ }
+ },
+ "callbacks": {
+ "onBack": "VoidCallback?",
+ "onConversationClicked": "void Function(Conversation conversation)?",
+ "onMessageClicked": "void Function(BaseMessage message)?",
+ "onError": "OnError?",
+ "onConversationsLoad": "OnLoad?",
+ "onMessagesLoad": "OnLoad?",
+ "onEmpty": "OnEmpty?"
+ },
+ "visibility": {
+ "usersStatusVisibility": {
+ "type": "bool?",
+ "default": "null"
+ },
+ "receiptsVisibility": {
+ "type": "bool?",
+ "default": "null"
+ },
+ "groupTypeVisibility": {
+ "type": "bool?",
+ "default": "null"
+ }
+ },
+ "viewSlots": {
+ "loadingStateView": "WidgetBuilder?",
+ "errorStateView": "WidgetBuilder?",
+ "emptyStateView": "WidgetBuilder?",
+ "initialStateView": "WidgetBuilder?",
+ "conversationItemView": "Widget? Function(BuildContext, Conversation)?",
+ "conversationTitleView": "Widget? Function(BuildContext, Conversation)?",
+ "conversationLeadingView": "Widget? Function(BuildContext, Conversation)?",
+ "conversationSubtitleView": "Widget? Function(BuildContext, Conversation)?",
+ "conversationTailView": "Widget? Function(BuildContext, Conversation)?",
+ "searchTextMessageView": "Widget? Function(BuildContext, TextMessage)?",
+ "searchImageMessageView": "Widget? Function(BuildContext, MediaMessage)?",
+ "searchVideoMessageView": "Widget? Function(BuildContext, MediaMessage)?",
+ "searchFileMessageView": "Widget? Function(BuildContext, MediaMessage)?",
+ "searchAudioMessageView": "Widget? Function(BuildContext, MediaMessage)?",
+ "searchMessageLinkView": "Widget? Function(BuildContext, BaseMessage)?"
+ },
+ "formatting": {
+ "dateSeparatorFormatterCallback": {
+ "type": "DateTimeFormatterCallback?",
+ "default": "null"
+ },
+ "timeSeparatorFormatterCallback": {
+ "type": "DateTimeFormatterCallback?",
+ "default": "null"
+ }
+ }
+ },
+ "events": [],
+ "sdkListeners": [],
+ "compositionExample": {
+ "description": "CometChatSearch can be used standalone or embedded within other screens",
+ "components": ["CometChatConversations", "CometChatMessageList"],
+ "flow": "User searches → Results displayed → User clicks result → Navigate to conversation/message"
+ },
+ "types": {
+ "SearchFilter": {
+ "label": "String",
+ "icon": "Widget?"
+ },
+ "SearchScope": {
+ "conversations": "bool",
+ "messages": "bool"
+ }
+ }
+}
+```
+
+
+## Where It Fits
+
+CometChatSearch is a full-screen search experience that allows users to find messages, conversations, media, and more through an intuitive and filterable search interface. It can be embedded in multiple contexts — as part of the conversation list, message header, or as a standalone full-screen search experience.
+
+
+
+
+
+## Minimal Render
+
+The simplest way to render CometChatSearch:
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:flutter/material.dart';
+
+// Using Navigator to launch CometChatSearch
+Navigator.push(
+ context,
+ MaterialPageRoute(builder: (context) => CometChatSearch())
+);
+```
+
+
+
+You can also embed it as a widget:
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:flutter/material.dart';
+
+class SearchScreen extends StatelessWidget {
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: SafeArea(
+ child: CometChatSearch(),
+ ),
+ );
+ }
+}
+```
+
+
+
+## Filtering
+
+Use the request builder props to filter which items appear in the search results.
+
+### ConversationsRequestBuilder
+
+Filter conversations in the search results:
+
+
+
+```dart
+CometChatSearch(
+ conversationsRequestBuilder: ConversationsRequestBuilder()
+ ..limit = 30,
+)
+```
+
+
+
+### MessagesRequestBuilder
+
+Filter messages in the search results:
+
+
+
+```dart
+CometChatSearch(
+ messagesRequestBuilder: MessagesRequestBuilder()
+ ..limit = 50,
+)
+```
+
+
+
+### Scoped Search
+
+Search within a specific user or group conversation:
+
+
+
+```dart
+// Search within a specific user's conversation
+CometChatSearch(
+ user: user,
+)
+
+// Search within a specific group's conversation
+CometChatSearch(
+ group: group,
+)
+```
+
+
+
+## Actions and Events
+
+### Callback Props
+
+Component-level callbacks that fire on specific user interactions:
+
+| Callback | Signature | Fires When |
+|----------|-----------|------------|
+| `onConversationClicked` | `void Function(Conversation conversation)?` | User clicks a conversation from search results |
+| `onMessageClicked` | `void Function(BaseMessage message)?` | User clicks a message from search results |
+| `onBack` | `VoidCallback?` | User clicks the back button |
+| `onError` | `OnError?` | An error occurs in the component |
+| `onConversationsLoad` | `OnLoad?` | Conversations are loaded |
+| `onMessagesLoad` | `OnLoad?` | Messages are loaded |
+| `onEmpty` | `OnEmpty?` | Search results are empty |
+
+
+
+```dart
+CometChatSearch(
+ onConversationClicked: (conversation) {
+ // Navigate to the conversation
+ print('Conversation clicked: ${conversation.conversationId}');
+ },
+ onMessageClicked: (message) {
+ // Navigate to the message
+ print('Message clicked: ${message.id}');
+ },
+ onBack: () {
+ Navigator.pop(context);
+ },
+ onError: (e) {
+ print('Error: $e');
+ },
+)
+```
+
+
+
+### Global UI Events
+
+The CometChatSearch component does not produce any global UI events.
+
+## Custom View Slots
+
+Customize the appearance of CometChatSearch by replacing default views with your own widgets.
+
+### State Views
+
+| Slot | Signature | Replaces |
+|------|-----------|----------|
+| `loadingStateView` | `WidgetBuilder?` | Loading spinner |
+| `emptyStateView` | `WidgetBuilder?` | Empty state display |
+| `errorStateView` | `WidgetBuilder?` | Error state display |
+| `initialStateView` | `WidgetBuilder?` | Initial state before search |
+
+### Conversation View Slots
+
+| Slot | Signature | Replaces |
+|------|-----------|----------|
+| `conversationItemView` | `Widget? Function(BuildContext, Conversation)?` | Entire conversation list item |
+| `conversationLeadingView` | `Widget? Function(BuildContext, Conversation)?` | Avatar / left section |
+| `conversationTitleView` | `Widget? Function(BuildContext, Conversation)?` | Name / title text |
+| `conversationSubtitleView` | `Widget? Function(BuildContext, Conversation)?` | Secondary text / preview |
+| `conversationTailView` | `Widget? Function(BuildContext, Conversation)?` | Right section / timestamp |
+
+### Message View Slots
+
+| Slot | Signature | Replaces |
+|------|-----------|----------|
+| `searchTextMessageView` | `Widget? Function(BuildContext, TextMessage)?` | Text message item |
+| `searchImageMessageView` | `Widget? Function(BuildContext, MediaMessage)?` | Image message item |
+| `searchVideoMessageView` | `Widget? Function(BuildContext, MediaMessage)?` | Video message item |
+| `searchFileMessageView` | `Widget? Function(BuildContext, MediaMessage)?` | File message item |
+| `searchAudioMessageView` | `Widget? Function(BuildContext, MediaMessage)?` | Audio message item |
+| `searchMessageLinkView` | `Widget? Function(BuildContext, BaseMessage)?` | Link message item |
+
+### Example: Custom Text Message View
+
+
+
+```dart
+CometChatSearch(
+ searchTextMessageView: (context, message) {
+ String senderName = message.sender?.name ?? "Unknown";
+ return Container(
+ padding: const EdgeInsets.all(16),
+ width: double.infinity,
+ color: const Color(0xFFE8E4F3),
+ child: Row(
+ children: [
+ Text(
+ "$senderName: ",
+ style: const TextStyle(
+ color: Color(0xFF6B4FBB),
+ fontSize: 16,
+ fontWeight: FontWeight.bold,
+ ),
+ ),
+ Expanded(
+ child: Text(
+ message.text,
+ maxLines: 1,
+ overflow: TextOverflow.ellipsis,
+ style: const TextStyle(
+ color: Color(0xFF4A4A4A),
+ fontSize: 16,
+ ),
+ ),
+ ),
+ ],
+ ),
+ );
+ },
+)
+```
+
+
+
+
+
+
+
+### Icon Customization
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `searchBackIcon` | `Widget?` | Custom back icon |
+| `searchClearIcon` | `Widget?` | Custom clear icon |
+
+## Styling
+
+Customize the appearance of CometChatSearch using `CometChatSearchStyle`.
+
+
+
+
+
+
+
+```dart
+CometChatSearch(
+ searchStyle: CometChatSearchStyle(
+ backgroundColor: const Color(0xFFEDEAFA),
+ searchBackgroundColor: Colors.white,
+ searchTextColor: Colors.black,
+ searchPlaceHolderTextColor: Colors.grey,
+
+ // Filter chip styling
+ searchFilterChipBackgroundColor: Colors.grey[200],
+ searchFilterChipSelectedBackgroundColor: Colors.purple,
+ searchFilterChipTextColor: Colors.black,
+ searchFilterChipSelectedTextColor: Colors.white,
+
+ // Conversation item styling
+ searchConversationItemBackgroundColor: const Color(0xFFEDEAFA),
+ searchConversationTitleTextStyle: const TextStyle(fontWeight: FontWeight.bold),
+ searchConversationSubTitleTextStyle: const TextStyle(color: Colors.grey),
+
+ // Message item styling
+ searchMessageItemBackgroundColor: const Color(0xFFEDEAFA),
+ searchMessageTitleTextStyle: const TextStyle(fontWeight: FontWeight.bold),
+
+ // See more button
+ searchSeeMoreColor: Colors.purple,
+ ),
+)
+```
+
+
+
+### Style Properties
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `backgroundColor` | `Color?` | Background color of the search component |
+| `searchBackgroundColor` | `Color?` | Background color of the search text field |
+| `searchBorder` | `BorderSide?` | Border of the search text field |
+| `searchBorderRadius` | `BorderRadius?` | Border radius of the search text field |
+| `searchTextColor` | `Color?` | Color of the search text |
+| `searchTextStyle` | `TextStyle?` | Style of the search text |
+| `searchPlaceHolderTextColor` | `Color?` | Color of the placeholder text |
+| `searchPlaceHolderTextStyle` | `TextStyle?` | Style of the placeholder text |
+| `searchBackIconColor` | `Color?` | Color of the back icon |
+| `searchClearIconColor` | `Color?` | Color of the clear icon |
+| `searchFilterChipBackgroundColor` | `Color?` | Background color of filter chips |
+| `searchFilterChipSelectedBackgroundColor` | `Color?` | Background color of selected filter chips |
+| `searchFilterChipTextColor` | `Color?` | Text color of filter chips |
+| `searchFilterChipTextStyle` | `TextStyle?` | Text style of filter chips |
+| `searchFilterChipSelectedTextColor` | `Color?` | Text color of selected filter chips |
+| `searchFilterChipSelectedTextStyle` | `TextStyle?` | Text style of selected filter chips |
+| `searchFilterIconColor` | `Color?` | Color of filter icons |
+| `searchFilterSelectedIconColor` | `Color?` | Color of selected filter icons |
+| `searchFilterChipBorder` | `Border?` | Border of filter chips |
+| `searchFilterChipSelectedBorder` | `Border?` | Border of selected filter chips |
+| `searchFilterChipBorderRadius` | `BorderRadius?` | Border radius of filter chips |
+| `searchSectionHeaderTextColor` | `Color?` | Color of section header text |
+| `searchSectionHeaderTextStyle` | `TextStyle?` | Style of section header text |
+| `searchConversationItemBackgroundColor` | `Color?` | Background color of conversation items |
+| `searchConversationTitleTextColor` | `Color?` | Text color of conversation titles |
+| `searchConversationTitleTextStyle` | `TextStyle?` | Style of conversation titles |
+| `searchConversationSubTitleTextStyle` | `TextStyle?` | Style of conversation subtitles |
+| `searchConversationTitleSubTextColor` | `Color?` | Text color of conversation subtitles |
+| `searchConversationDateTextColor` | `Color?` | Text color of conversation dates |
+| `searchConversationDateTextStyle` | `TextStyle?` | Style of conversation dates |
+| `searchMessageItemBackgroundColor` | `Color?` | Background color of message items |
+| `searchMessageTitleTextColor` | `Color?` | Text color of message titles |
+| `searchMessageTitleTextStyle` | `TextStyle?` | Style of message titles |
+| `searchMessageSubTitleTextColor` | `Color?` | Text color of message subtitles |
+| `searchMessageSubTitleTextStyle` | `TextStyle?` | Style of message subtitles |
+| `searchMessageTimeStampStyle` | `CometChatDateStyle?` | Style of message timestamps |
+| `searchMessageDateSeparatorStyle` | `CometChatDateStyle?` | Style of date separators |
+| `searchEmptyStateTextColor` | `Color?` | Text color for empty state |
+| `searchEmptyStateTextStyle` | `TextStyle?` | Style for empty state text |
+| `searchEmptyStateSubtitleColor` | `Color?` | Color for empty state subtitle |
+| `searchEmptyStateSubtitleStyle` | `TextStyle?` | Style for empty state subtitle |
+| `searchErrorStateTextColor` | `Color?` | Text color for error state |
+| `searchErrorStateTextStyle` | `TextStyle?` | Style for error state text |
+| `searchErrorStateSubtitleColor` | `Color?` | Color for error state subtitle |
+| `searchErrorStateSubtitleStyle` | `TextStyle?` | Style for error state subtitle |
+| `searchSeeMoreColor` | `Color?` | Color of "See More" button |
+| `searchSeeMoreStyle` | `TextStyle?` | Style of "See More" button |
+| `avatarStyle` | `CometChatAvatarStyle?` | Style for avatars |
+| `badgeStyle` | `CometChatBadgeStyle?` | Style for badges |
+
+## Props Reference
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `user` | `User?` | `null` | User object for scoped search |
+| `group` | `Group?` | `null` | Group object for scoped search |
+| `searchFilters` | `List?` | `null` | List of filters to show |
+| `searchIn` | `List?` | `null` | List of search scopes |
+| `usersStatusVisibility` | `bool?` | `null` | Show/hide user status indicator |
+| `receiptsVisibility` | `bool?` | `null` | Show/hide message receipts |
+| `groupTypeVisibility` | `bool?` | `null` | Show/hide group type icon |
+| `onBack` | `VoidCallback?` | `null` | Back button callback |
+| `onConversationClicked` | `Function(Conversation)?` | `null` | Conversation click callback |
+| `onMessageClicked` | `Function(BaseMessage)?` | `null` | Message click callback |
+| `onError` | `OnError?` | `null` | Error callback |
+| `onConversationsLoad` | `OnLoad?` | `null` | Conversations load callback |
+| `onMessagesLoad` | `OnLoad?` | `null` | Messages load callback |
+| `onEmpty` | `OnEmpty?` | `null` | Empty state callback |
+| `loadingStateView` | `WidgetBuilder?` | `null` | Custom loading view |
+| `errorStateView` | `WidgetBuilder?` | `null` | Custom error view |
+| `emptyStateView` | `WidgetBuilder?` | `null` | Custom empty view |
+| `initialStateView` | `WidgetBuilder?` | `null` | Custom initial view |
+| `conversationItemView` | `Widget? Function(BuildContext, Conversation)?` | `null` | Custom conversation item |
+| `conversationTitleView` | `Widget? Function(BuildContext, Conversation)?` | `null` | Custom conversation title |
+| `conversationLeadingView` | `Widget? Function(BuildContext, Conversation)?` | `null` | Custom conversation leading view |
+| `conversationSubtitleView` | `Widget? Function(BuildContext, Conversation)?` | `null` | Custom conversation subtitle |
+| `conversationTailView` | `Widget? Function(BuildContext, Conversation)?` | `null` | Custom conversation tail view |
+| `searchTextMessageView` | `Widget? Function(BuildContext, TextMessage)?` | `null` | Custom text message view |
+| `searchImageMessageView` | `Widget? Function(BuildContext, MediaMessage)?` | `null` | Custom image message view |
+| `searchVideoMessageView` | `Widget? Function(BuildContext, MediaMessage)?` | `null` | Custom video message view |
+| `searchFileMessageView` | `Widget? Function(BuildContext, MediaMessage)?` | `null` | Custom file message view |
+| `searchAudioMessageView` | `Widget? Function(BuildContext, MediaMessage)?` | `null` | Custom audio message view |
+| `searchMessageLinkView` | `Widget? Function(BuildContext, BaseMessage)?` | `null` | Custom link message view |
+| `searchBackIcon` | `Widget?` | `null` | Custom back icon |
+| `searchClearIcon` | `Widget?` | `null` | Custom clear icon |
+| `dateSeparatorFormatterCallback` | `DateTimeFormatterCallback?` | `null` | Date separator formatter |
+| `timeSeparatorFormatterCallback` | `DateTimeFormatterCallback?` | `null` | Time separator formatter |
+| `conversationsProtocol` | `ConversationsBuilderProtocol?` | `null` | Conversations builder protocol |
+| `conversationsRequestBuilder` | `ConversationsRequestBuilder?` | `null` | Conversations request builder |
+| `messagesRequestBuilder` | `MessagesRequestBuilder?` | `null` | Messages request builder |
+| `searchStyle` | `CometChatSearchStyle?` | `null` | Style configuration |
+
+
+
+ Display and manage chat conversations
+
+
+ Display messages in a conversation
+
+
+ Learn how to customize the look and feel
+
+
+ Support multiple languages in your app
+
+
diff --git a/ui-kit/flutter/v5/shortcut-formatter-guide.mdx b/ui-kit/flutter/v5/shortcut-formatter-guide.mdx
new file mode 100644
index 000000000..93d1404d4
--- /dev/null
+++ b/ui-kit/flutter/v5/shortcut-formatter-guide.mdx
@@ -0,0 +1,493 @@
+---
+title: "Shortcut Formatter"
+description: "Provide !shortcut style expansions invoking extension APIs or dialogs before inserting content in CometChat Flutter UI Kit."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_chat_uikit` |
+| Key class | `ShortcutFormatter` (extends `CometChatTextFormatter`) |
+| Init | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login(uid)` |
+| Purpose | Provide !shortcut style expansions invoking extension APIs |
+| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
+| Related | [Custom Text Formatter](/ui-kit/flutter/v5/custom-text-formatter-guide) · [All Guides](/ui-kit/flutter/v5/guide-overview) |
+
+
+
+## Introduction
+
+The `ShortcutFormatter` class extends the `CometChatTextFormatter` class to provide a mechanism for handling shortcuts within messages. This guide will walk you through the process of using ShortcutFormatter to implement shortcut extensions in your CometChat application.
+
+## Setup
+
+1. **Create the ShortcutFormatter Class**: Define the `ShortcutFormatter` class by extending the `CometChatTextFormatter` class.
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+class ShortcutFormatter extends CometChatTextFormatter {
+
+}
+```
+
+
+
+
+
+2. **Init**: Initialize the `messageShortcuts` map and `shortcuts` list in the init().
+
+
+
+```dart
+@override
+void init() {
+ trackingCharacter ??= "!";
+}
+```
+
+
+
+
+
+3. **Prepare Shortcuts**: Implement the `prepareShortcuts()` method to fetch shortcuts from the server using CometChat extension.
+
+
+
+```dart
+bool isShortcutTracking = false;
+
+void prepareShortcuts(TextEditingController textEditingController) {
+ CometChat.callExtension('message-shortcuts', 'GET', '/v1/fetch', null,
+ onSuccess: (map) {
+ if (map.isNotEmpty) {
+ Map data = map["data"];
+ if (data.isNotEmpty) {
+ Map shortcuts = data["shortcuts"];
+ if (shortcuts.isNotEmpty) {
+ parseData(
+ shortcuts: shortcuts,
+ textEditingController: textEditingController
+ );
+ }
+ }
+ }
+ }, onError: (error) {});
+}
+
+void parseData({Map? shortcuts, required TextEditingController textEditingController}) async {
+ if (shortcuts == null || shortcuts.isEmpty) {
+ suggestionListEventSink?.add([]);
+ if (onSearch != null) {
+ onSearch!(null);
+ }
+ CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
+ } else {
+ CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
+ if (suggestionListEventSink != null && shortcuts.isNotEmpty) {
+ List list = [];
+ shortcuts.forEach((key, value) => list.add(SuggestionListItem(
+ id: key,
+ title: "$key → $value",
+ onTap: () {
+ int cursorPos = textEditingController.selection.base.offset;
+ String textOnLeftOfValue = textEditingController.text.substring(0, cursorPos - 1);
+ String textOnRightOfValue = textEditingController.text.substring(cursorPos);
+ textEditingController.text = "$textOnLeftOfValue$value $textOnRightOfValue";
+ updatePreviousText(textEditingController.text);
+ textEditingController.selection = TextSelection(
+ baseOffset: cursorPos - 1 + "$value".length + 1,
+ extentOffset: cursorPos - 1 + "$value".length + 1,
+ );
+ resetMatchTracker();
+ isShortcutTracking = false;
+ CometChatUIEvents.hidePanel(
+ composerId, CustomUIPosition.composerPreview
+ );
+ })
+ ));
+ suggestionListEventSink?.add(list);
+ }
+ }
+}
+
+void updatePreviousText(String text) {
+ if (previousTextEventSink != null) {
+ previousTextEventSink!.add(text);
+ }
+}
+
+void resetMatchTracker() {
+ suggestionListEventSink?.add([]);
+ if (onSearch != null) {
+ onSearch!(null);
+ }
+}
+```
+
+
+
+
+
+4. **Override onChange Method**: Override the `onChange()` method to search for shortcuts based on the entered query.
+
+
+
+```dart
+@override
+void onChange(TextEditingController textEditingController, String previousText) {
+ var cursorPosition = textEditingController.selection.base.offset;
+ if (textEditingController.text.isEmpty) {
+ resetMatchTracker();
+ if (previousText.length > textEditingController.text.length) {
+ if (previousText[cursorPosition] == trackingCharacter && isShortcutTracking) {
+ isShortcutTracking = false;
+ if (onSearch != null) {
+ onSearch!(null);
+ }
+ CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
+ }
+ return;
+ }
+ }
+
+ if (previousText.length > textEditingController.text.length) {
+ if (previousText[cursorPosition] == trackingCharacter) {
+ isShortcutTracking = false;
+ if (onSearch != null) {
+ onSearch!(null);
+ }
+ CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
+ }
+ } else {
+ String previousCharacter = cursorPosition == 0 ? "" : textEditingController.text[cursorPosition - 1];
+ bool isSpace = cursorPosition == 1 || (textEditingController.text.length > 1 && cursorPosition > 1 && (textEditingController.text[cursorPosition - 2] == " " || textEditingController.text[cursorPosition - 2] == "\n"));
+
+ if (isShortcutTracking) {
+ isShortcutTracking = false;
+ if (onSearch != null) {
+ onSearch!(null);
+ }
+ CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
+ } else if (previousCharacter == trackingCharacter && isSpace) {
+ isShortcutTracking = true;
+ if (onSearch != null) {
+ onSearch!(trackingCharacter);
+ }
+ CometChatUIEvents.showPanel(composerId, CustomUIPosition.composerPreview, (context) => getLoadingIndicator(context, cometChatTheme));
+ prepareShortcuts(textEditingController);
+ }
+ }
+}
+```
+
+
+
+
+
+5. **Handle Scroll to Bottom**: Override the `onScrollToBottom()` method if needed.
+
+
+
+```dart
+@override
+void onScrollToBottom(TextEditingController textEditingController) {
+ // TODO: implement onScrollToBottom
+}
+```
+
+
+
+
+
+6. **Additional Base Class Methods**: The `CometChatTextFormatter` base class provides additional methods you can override for advanced customization:
+
+
+
+```dart
+/// Override to customize the text style in message bubbles
+@override
+TextStyle getMessageBubbleTextStyle(BuildContext context, BubbleAlignment? alignment, {bool forConversation = false}) {
+ return TextStyle(
+ color: alignment == BubbleAlignment.right ? Colors.white : Colors.black,
+ fontSize: 14,
+ fontWeight: FontWeight.bold,
+ );
+}
+
+/// Override to build custom attributed text for the input field
+@override
+List buildInputFieldText({
+ required BuildContext context,
+ TextStyle? style,
+ required bool withComposing,
+ required String text,
+ List? existingAttributes,
+}) {
+ return existingAttributes ?? [];
+}
+
+/// Override to get attributed text for styling in message bubbles
+@override
+List getAttributedText(
+ String text,
+ BuildContext context,
+ BubbleAlignment? alignment, {
+ List? existingAttributes,
+ Function(String)? onTap,
+ bool forConversation = false,
+}) {
+ // Custom implementation
+ return super.getAttributedText(text, context, alignment,
+ existingAttributes: existingAttributes,
+ onTap: onTap,
+ forConversation: forConversation);
+}
+```
+
+
+
+
+
+***
+
+## Usage
+
+The widgets [CometChatConversations](/ui-kit/flutter/v5/conversations), [CometChatMessageComposer](/ui-kit/flutter/v5/message-composer) and [CometChatMessageList](/ui-kit/flutter/v5/message-list) have a property called `textFormatters` which accepts a list of CometChatTextFormatter to format the text. The code shared below `textFormatters` consisting of the above created Shortcuts formatter being passed down to [CometChatMessageComposer](/ui-kit/flutter/v5/message-composer) from [CometChatConversationsWithMessages](/ui-kit/flutter/v5/conversations) with help of configurations.
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:flutter/material.dart';
+import 'shortcut_formatter.dart';
+
+class ShortcutFormatterExample extends StatefulWidget {
+ const ShortcutFormatterExample({super.key});
+
+ @override
+ State createState() => _ShortcutFormatterExampleState();
+}
+
+class _ShortcutFormatterExampleState extends State {
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: SafeArea(
+ child: CometChatConversationsWithMessages(
+ messageConfiguration: MessageConfiguration(
+ messageComposerConfiguration: MessageComposerConfiguration(
+ textFormatters: [ShortcutFormatter()],
+ ),
+ )
+ ),
+ ),
+ );
+ }
+}
+```
+
+
+
+
+
+***
+
+## Example
+
+Here is the complete example for reference:
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:flutter/material.dart';
+
+class ShortcutFormatter extends CometChatTextFormatter {
+ @override
+ void init() {
+ trackingCharacter ??= "!";
+ }
+
+ bool isShortcutTracking = false;
+
+ void prepareShortcuts(TextEditingController textEditingController) {
+ CometChat.callExtension('message-shortcuts', 'GET', '/v1/fetch', null,
+ onSuccess: (map) {
+ if (map.isNotEmpty) {
+ Map data = map["data"];
+ if (data.isNotEmpty) {
+ Map shortcuts = data["shortcuts"];
+ if (shortcuts.isNotEmpty) {
+ parseData(
+ shortcuts: shortcuts,
+ textEditingController: textEditingController);
+ }
+ }
+ }
+ }, onError: (error) {});
+ }
+
+ void parseData({Map? shortcuts, required TextEditingController textEditingController}) async {
+ if (shortcuts == null || shortcuts.isEmpty) {
+ suggestionListEventSink?.add([]);
+ if (onSearch != null) {
+ onSearch!(null);
+ }
+ CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
+ } else {
+ CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
+ if (suggestionListEventSink != null && shortcuts.isNotEmpty) {
+ List list = [];
+ shortcuts.forEach((key, value) => list.add(SuggestionListItem(
+ id: key,
+ title: "$key → $value",
+ onTap: () {
+ int cursorPos = textEditingController.selection.base.offset;
+ String textOnLeftOfValue = textEditingController.text.substring(0, cursorPos - 1);
+ String textOnRightOfValue = textEditingController.text.substring(cursorPos);
+ textEditingController.text = "$textOnLeftOfValue$value $textOnRightOfValue";
+ updatePreviousText(textEditingController.text);
+ textEditingController.selection = TextSelection(
+ baseOffset: cursorPos - 1 + "$value".length + 1,
+ extentOffset: cursorPos - 1 + "$value".length + 1,
+ );
+ resetMatchTracker();
+ isShortcutTracking = false;
+ CometChatUIEvents.hidePanel(
+ composerId, CustomUIPosition.composerPreview
+ );
+ })
+ ));
+ suggestionListEventSink?.add(list);
+ }
+ }
+ }
+
+ void updatePreviousText(String text) {
+ if (previousTextEventSink != null) {
+ previousTextEventSink!.add(text);
+ }
+ }
+
+ void resetMatchTracker() {
+ suggestionListEventSink?.add([]);
+ if (onSearch != null) {
+ onSearch!(null);
+ }
+ }
+
+ @override
+ TextStyle getMessageInputTextStyle(CometChatTheme theme) {
+ // TODO: implement getMessageInputTextStyle
+ throw UnimplementedError();
+ }
+
+ @override
+ void handlePreMessageSend(BuildContext context, BaseMessage baseMessage) {
+ // TODO: implement handlePreMessageSend
+ }
+
+ @override
+ void onChange(TextEditingController textEditingController, String previousText) {
+ var cursorPosition = textEditingController.selection.base.offset;
+ if (textEditingController.text.isEmpty) {
+ resetMatchTracker();
+ if (previousText.length > textEditingController.text.length) {
+ if (previousText[cursorPosition] == trackingCharacter && isShortcutTracking) {
+ isShortcutTracking = false;
+ if (onSearch != null) {
+ onSearch!(null);
+ }
+ CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
+ }
+ return;
+ }
+ }
+
+ if (previousText.length > textEditingController.text.length) {
+ if (previousText[cursorPosition] == trackingCharacter) {
+ isShortcutTracking = false;
+ if (onSearch != null) {
+ onSearch!(null);
+ }
+ CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
+ }
+ } else {
+ String previousCharacter = cursorPosition == 0 ? "" : textEditingController.text[cursorPosition - 1];
+ bool isSpace = cursorPosition == 1 || (textEditingController.text.length > 1 && cursorPosition > 1 && (textEditingController.text[cursorPosition - 2] == " " || textEditingController.text[cursorPosition - 2] == "\n"));
+
+ if (isShortcutTracking) {
+ isShortcutTracking = false;
+ if (onSearch != null) {
+ onSearch!(null);
+ }
+ CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
+ } else if (previousCharacter == trackingCharacter && isSpace) {
+ isShortcutTracking = true;
+ if (onSearch != null) {
+ onSearch!(trackingCharacter);
+ }
+ CometChatUIEvents.showPanel(composerId, CustomUIPosition.composerPreview, (context) => getLoadingIndicator(context, cometChatTheme));
+ prepareShortcuts(textEditingController);
+ }
+ }
+ }
+
+ @override
+ void onScrollToBottom(TextEditingController textEditingController) {
+ // TODO: implement onScrollToBottom
+ }
+}
+```
+
+
+
+
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:flutter/material.dart';
+import 'shortcut_formatter.dart';
+
+class ShortcutFormatterExample extends StatefulWidget {
+ const ShortcutFormatterExample({super.key});
+
+ @override
+ State createState() => _ShortcutFormatterExampleState();
+}
+
+class _ShortcutFormatterExampleState extends State {
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: SafeArea(
+ child: CometChatConversationsWithMessages(
+ messageConfiguration: MessageConfiguration(
+ messageComposerConfiguration: MessageComposerConfiguration(
+ textFormatters: [ShortcutFormatter()],
+ ),
+ )
+ ),
+ ),
+ );
+ }
+}
+```
+
+
+
+
+
+
+
+
+
+***
diff --git a/ui-kit/flutter/v5/sound-manager.mdx b/ui-kit/flutter/v5/sound-manager.mdx
new file mode 100644
index 000000000..c70ad5b88
--- /dev/null
+++ b/ui-kit/flutter/v5/sound-manager.mdx
@@ -0,0 +1,116 @@
+---
+title: "Sound Manager"
+sidebarTitle: "Sound Manager"
+description: "Manage and customize audio cues for incoming/outgoing calls and messages in CometChat Flutter UI Kit."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `cometchat_uikit_shared` |
+| Import | `import 'package:cometchat_uikit_shared/cometchat_uikit_shared.dart';` |
+| Class | `SoundManager` (singleton) |
+| Play sound | `SoundManager().play(sound: Sound.incomingMessage)` |
+| Stop sound | `SoundManager().stop()` |
+| Sound events | `incomingMessage`, `outgoingMessage`, `incomingMessageFromOther`, `incomingCall`, `outgoingCall` |
+| Source | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/shared_uikit/lib/src/resources) |
+
+
+
+`SoundManager` is a singleton helper class for managing and playing audio cues — incoming/outgoing calls and messages.
+
+---
+
+## Methods
+
+### play
+
+Plays the default or custom audio for a sound event.
+
+```dart
+void play({
+ required Sound sound,
+ String? customSound,
+ String? packageName,
+ bool? isLooping,
+})
+```
+
+| Parameter | Type | Description |
+| --- | --- | --- |
+| `sound` | `Sound` | Required. The sound event type to play |
+| `customSound` | `String?` | Optional. Asset path for custom sound file |
+| `packageName` | `String?` | Optional. Package name when using sounds from another plugin |
+| `isLooping` | `bool?` | Optional. Whether to loop the sound (default: `false`) |
+
+```dart
+// Play default sounds
+SoundManager().play(sound: Sound.incomingMessage);
+SoundManager().play(sound: Sound.outgoingMessage);
+
+// Play custom sound
+SoundManager().play(
+ sound: Sound.outgoingMessage,
+ customSound: "assets/custom_sound.wav",
+);
+
+// Play looping sound (e.g., for incoming call)
+SoundManager().play(
+ sound: Sound.incomingCall,
+ isLooping: true,
+);
+```
+
+### stop
+
+Stops any currently playing sound.
+
+```dart
+SoundManager().stop();
+```
+
+---
+
+## Sound Enum
+
+| Value | Default Asset | When it plays |
+| --- | --- | --- |
+| `incomingMessage` | `assets/sound/incoming_message.wav` | New message received |
+| `outgoingMessage` | `assets/sound/outgoing_message.wav` | Message sent |
+| `incomingMessageFromOther` | `assets/sound/incoming_message.wav` | Message from another conversation |
+| `incomingCall` | `assets/sound/incoming_call.wav` | Incoming call detected |
+| `outgoingCall` | `assets/sound/outgoing_call.wav` | Outgoing call initiated |
+
+---
+
+## Usage
+
+```dart
+import 'package:cometchat_uikit_shared/cometchat_uikit_shared.dart';
+
+// Play incoming message sound
+SoundManager().play(sound: Sound.incomingMessage);
+
+// Play outgoing call sound
+SoundManager().play(sound: Sound.outgoingCall);
+
+// Play custom notification sound
+SoundManager().play(
+ sound: Sound.incomingMessage,
+ customSound: "assets/sounds/notification.mp3",
+);
+
+// Play looping ringtone for incoming call
+SoundManager().play(
+ sound: Sound.incomingCall,
+ isLooping: true,
+);
+
+// Stop any playing sound
+SoundManager().stop();
+```
+
+
+Sound behavior varies by OS when the app is in the background.
+
diff --git a/ui-kit/flutter/v5/theme-introduction.mdx b/ui-kit/flutter/v5/theme-introduction.mdx
new file mode 100644
index 000000000..1ca1caa39
--- /dev/null
+++ b/ui-kit/flutter/v5/theme-introduction.mdx
@@ -0,0 +1,170 @@
+---
+title: "Theming"
+sidebarTitle: "Overview"
+description: "Customize the CometChat Flutter UI Kit appearance using ThemeExtensions for colors, fonts, spacing, and dark mode."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Goal | Customize UI Kit appearance (colors, fonts, spacing) via Flutter ThemeExtensions |
+| Where | `ThemeData.extensions` in `MaterialApp` |
+| Color | `CometChatColorPalette` — primary, neutral, alert, text, icon, background colors |
+| Typography | `CometChatTypography` — font sizes, weights, text styles |
+| Spacing | `CometChatSpacing` — padding, margin, border radius |
+| Dark mode | Use separate `CometChatColorPalette` for dark theme |
+| Source | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/shared_uikit/lib/src/theme) |
+
+
+
+Theming controls the look and feel of the chat UI — colors, fonts, and spacing — through Flutter's `ThemeExtension` system.
+
+
+
+
+
+---
+
+## Core Components
+
+| Component | Class | Purpose |
+| --- | --- | --- |
+| Color | `CometChatColorPalette` | Primary, neutral, alert, text, icon, background colors |
+| Typography | `CometChatTypography` | Font sizes, weights, text styles |
+| Spacing | `CometChatSpacing` | Padding, margin, border radius |
+
+### Typography Tokens
+
+| Token | Purpose |
+| --- | --- |
+| `heading1` - `heading4` | Heading text styles |
+| `body` | Body text |
+| `caption1`, `caption2` | Caption text |
+| `button` | Button text |
+| `link` | Link text |
+| `title` | Title text |
+
+### Spacing Tokens
+
+| Token | Default Value |
+| --- | --- |
+| `spacing` - `spacing20` | 2px - 80px (increments of 4) |
+| `padding` - `padding10` | Derived from spacing |
+| `margin` - `margin20` | Derived from spacing |
+| `radius` - `radius6`, `radiusMax` | Border radius values |
+
+---
+
+## Basic Usage
+
+Override theme properties in your `MaterialApp`:
+
+
+
+```dart title="main.dart"
+MaterialApp(
+ theme: ThemeData(
+ fontFamily: 'Roboto',
+ extensions: [
+ CometChatColorPalette(
+ primary: Color(0xFFF76808),
+ textPrimary: Color(0xFF141414),
+ background1: Color(0xFFFFFFFF),
+ ),
+ ],
+ ),
+ home: MyApp(),
+)
+```
+
+
+
+---
+
+## Light and Dark Themes
+
+
+
+
+
+
+
+```dart
+ThemeData(
+ extensions: [
+ CometChatColorPalette(
+ primary: Color(0xFF6852D6),
+ textPrimary: Color(0xFF141414),
+ textSecondary: Color(0xFF727272),
+ background1: Color(0xFFFFFFFF),
+ borderLight: Color(0xFFF5F5F5),
+ ),
+ ],
+)
+```
+
+
+```dart
+ThemeData(
+ extensions: [
+ CometChatColorPalette(
+ primary: Color(0xFF6852D6),
+ textPrimary: Color(0xFFFFFFFF),
+ textSecondary: Color(0xFF989898),
+ background1: Color(0xFF1A1A1A),
+ borderLight: Color(0xFF272727),
+ ),
+ ],
+)
+```
+
+
+
+
+
+
+
+---
+
+## Custom Brand Colors
+
+
+
+
+
+
+
+```dart
+ThemeData(
+ fontFamily: 'Times New Roman',
+ extensions: [
+ CometChatColorPalette(
+ primary: Color(0xFFF76808),
+ iconHighlight: Color(0xFFF76808),
+ extendedPrimary500: Color(0xFFFBAA75),
+ ),
+ ],
+)
+```
+
+
+
+---
+
+## Next Steps
+
+
+
+ Full list of color tokens
+
+
+ Style individual components
+
+
+ Customize message bubbles
+
+
+ Multi-language support
+
+
diff --git a/ui-kit/flutter/v5/threaded-messages-header.mdx b/ui-kit/flutter/v5/threaded-messages-header.mdx
new file mode 100644
index 000000000..209798949
--- /dev/null
+++ b/ui-kit/flutter/v5/threaded-messages-header.mdx
@@ -0,0 +1,346 @@
+---
+title: "Threaded Messages Header"
+description: "A widget that displays the parent message of a thread with reply count"
+---
+
+
+```json
+{
+ "component": "CometChatThreadedHeader",
+ "package": "cometchat_chat_uikit",
+ "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
+ "description": "A widget that displays the parent message of a thread along with a reply count, used as the header section in threaded message views",
+ "primaryOutput": {
+ "prop": "messageActionView",
+ "type": "Widget Function(BaseMessage message, BuildContext context)?"
+ },
+ "props": {
+ "data": {
+ "parentMessage": {
+ "type": "BaseMessage",
+ "required": true,
+ "note": "Parent message for the thread"
+ },
+ "loggedInUser": {
+ "type": "User",
+ "required": true,
+ "note": "Logged in user object"
+ },
+ "template": {
+ "type": "CometChatMessageTemplate?",
+ "default": "null",
+ "note": "Message template used in the thread"
+ },
+ "height": {
+ "type": "double?",
+ "default": "null",
+ "note": "Height of the widget"
+ },
+ "width": {
+ "type": "double?",
+ "default": "null",
+ "note": "Width of the widget"
+ }
+ },
+ "visibility": {
+ "receiptsVisibility": {
+ "type": "bool?",
+ "default": true
+ }
+ },
+ "viewSlots": {
+ "messageActionView": "Widget Function(BaseMessage message, BuildContext context)?"
+ }
+ },
+ "events": [],
+ "sdkListeners": [],
+ "compositionExample": {
+ "description": "CometChatThreadedHeader is typically used within CometChatThreadedMessages as the header component",
+ "components": ["CometChatThreadedMessages", "CometChatMessageList", "CometChatMessageComposer"],
+ "flow": "Parent message displayed at top → Reply count shown → Message list below with replies"
+ },
+ "types": {}
+}
+```
+
+
+## Where It Fits
+
+CometChatThreadedHeader is a component that displays the parent message of a thread along with a reply count. It's typically used as part of the ThreadedMessages composite component, appearing at the top of the threaded conversation view.
+
+ThreadedMessages is composed of the following widgets:
+
+| Widget | Description |
+|--------|-------------|
+| [MessageList](/ui-kit/flutter/v5/message-list) | CometChatMessageList displays a list of reply messages |
+| [MessageComposer](/ui-kit/flutter/v5/message-composer) | CometChatMessageComposer helps in writing and sending replies |
+
+
+
+
+
+## Minimal Render
+
+The simplest way to render CometChatThreadedHeader:
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+CometChatThreadedHeader(
+ parentMessage: parentMessage, // Required: BaseMessage object
+ loggedInUser: loggedInUser, // Required: User object
+)
+```
+
+
+
+You can also launch it using Navigator:
+
+
+
+```dart
+Navigator.push(
+ context,
+ MaterialPageRoute(
+ builder: (context) => CometChatThreadedHeader(
+ loggedInUser: loggedInUser,
+ parentMessage: parentMessage,
+ ),
+ ),
+);
+```
+
+
+
+Or embed it as a widget:
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+import 'package:flutter/material.dart';
+
+class ThreadMessages extends StatefulWidget {
+ const ThreadMessages({super.key});
+
+ @override
+ State createState() => _ThreadMessagesState();
+}
+
+class _ThreadMessagesState extends State {
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: SafeArea(
+ child: CometChatThreadedHeader(
+ loggedInUser: loggedInUser,
+ parentMessage: parentMessage,
+ ),
+ ),
+ );
+ }
+}
+```
+
+
+
+## Actions and Events
+
+### Callback Props
+
+The CometChatThreadedHeader component does not have traditional callback props. Instead, it provides a `messageActionView` slot for customizing the action area.
+
+### Global UI Events
+
+The CometChatThreadedHeader component does not produce any global UI events.
+
+## Custom View Slots
+
+Customize the appearance of CometChatThreadedHeader by replacing default views with your own widgets.
+
+| Slot | Signature | Replaces |
+|------|-----------|----------|
+| `messageActionView` | `Widget Function(BaseMessage message, BuildContext context)?` | Reply count section below the message bubble |
+
+### Example: Custom Message Action View
+
+
+
+```dart
+CometChatThreadedHeader(
+ loggedInUser: loggedInUser,
+ parentMessage: parentMessage,
+ messageActionView: (BaseMessage baseMessage, BuildContext context) {
+ return Container(
+ width: MediaQuery.of(context).size.width / 1.2,
+ margin: const EdgeInsets.all(10),
+ decoration: BoxDecoration(
+ color: Color(0xFF6851D6),
+ borderRadius: BorderRadius.circular(10),
+ border: Border.all(width: 5, color: Color(0xFF6851D6)),
+ ),
+ child: const Center(
+ child: Text(
+ "Your Custom Action View",
+ style: TextStyle(color: Colors.white),
+ ),
+ ),
+ );
+ },
+)
+```
+
+
+
+
+
+
+
+
+
+
+
+
+### Example: Custom Reply Count with Dividers
+
+
+
+```dart
+CometChatThreadedHeader(
+ parentMessage: message,
+ loggedInUser: CometChatUIKit.loggedInUser!,
+ style: CometChatThreadedHeaderStyle(
+ bubbleContainerBackGroundColor: Color(0xFFFEEDE1),
+ outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ borderRadius: BorderRadius.circular(12),
+ ),
+ ),
+ messageActionView: (message, context) {
+ final numberOfReplies = message.replyCount;
+ String replyText = numberOfReplies == 1
+ ? Translations.of(context).reply
+ : Translations.of(context).replies;
+ return Container(
+ width: double.maxFinite,
+ color: Color(0xFFFEEDE1),
+ padding: EdgeInsets.symmetric(vertical: 4),
+ child: Row(
+ children: [
+ Flexible(child: Divider(color: Color(0xFFF76808))),
+ Padding(
+ padding: EdgeInsets.symmetric(horizontal: 8),
+ child: Text(
+ "$numberOfReplies $replyText",
+ style: TextStyle(
+ color: Color(0xFFF76808),
+ fontSize: 14,
+ fontWeight: FontWeight.w400,
+ ),
+ ),
+ ),
+ Flexible(child: Divider(color: Color(0xFFF76808))),
+ ],
+ ),
+ );
+ },
+)
+```
+
+
+
+
+
+
+
+### Templates
+
+The `template` prop is used to configure and set a message template for the parent message bubble. It allows for dynamic customization of message appearance, content, or other predefined settings based on the template provided.
+
+
+
+```dart
+CometChatThreadedHeader(
+ parentMessage: parentMessage,
+ loggedInUser: loggedInUser,
+ template: CometChatMessageTemplate(
+ type: MessageTypeConstants.text,
+ category: MessageCategoryConstants.message,
+ // Custom template configuration
+ ),
+)
+```
+
+
+
+## Styling
+
+Customize the appearance of CometChatThreadedHeader using `CometChatThreadedHeaderStyle`.
+
+
+
+```dart
+CometChatThreadedHeader(
+ parentMessage: parentMessage,
+ loggedInUser: loggedInUser,
+ style: CometChatThreadedHeaderStyle(
+ bubbleContainerBackGroundColor: Color(0xFFFEEDE1),
+ countTextColor: Colors.purple,
+ countContainerBackGroundColor: Colors.grey[100],
+ incomingMessageBubbleStyle: CometChatIncomingMessageBubbleStyle(
+ backgroundColor: Colors.grey[200],
+ ),
+ outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
+ backgroundColor: Color(0xFFF76808),
+ borderRadius: BorderRadius.circular(12),
+ ),
+ ),
+)
+```
+
+
+
+### Style Properties
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `bubbleContainerBackGroundColor` | `Color?` | Background color for the bubble container |
+| `bubbleContainerBorder` | `BoxBorder?` | Border for the bubble container |
+| `bubbleContainerBorderRadius` | `BorderRadiusGeometry?` | Border radius for the bubble container |
+| `countTextStyle` | `TextStyle?` | Text style for the reply count |
+| `countTextColor` | `Color?` | Color for the reply count text |
+| `countContainerBackGroundColor` | `Color?` | Background color for the count container |
+| `countContainerBorder` | `BoxBorder?` | Border for the count container |
+| `constraints` | `BoxConstraints?` | Constraints for the message container |
+| `incomingMessageBubbleStyle` | `CometChatIncomingMessageBubbleStyle?` | Style for incoming message bubble |
+| `outgoingMessageBubbleStyle` | `CometChatOutgoingMessageBubbleStyle?` | Style for outgoing message bubble |
+
+## Props Reference
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `parentMessage` | `BaseMessage` | Required | Parent message for the thread |
+| `loggedInUser` | `User` | Required | Logged in user object |
+| `messageActionView` | `Function(BaseMessage, BuildContext)?` | `null` | Custom action view for the message |
+| `style` | `CometChatThreadedHeaderStyle?` | `null` | Style parameter for the threaded header |
+| `template` | `CometChatMessageTemplate?` | `null` | Message template used in the thread |
+| `height` | `double?` | `null` | Height of the widget |
+| `width` | `double?` | `null` | Width of the widget |
+| `receiptsVisibility` | `bool?` | `true` | Controls visibility of receipts |
+
+
+
+ Display messages in a conversation
+
+
+ Compose and send messages
+
+
+ Learn how to customize the look and feel
+
+
+ Support multiple languages in your app
+
+
diff --git a/ui-kit/flutter/v5/troubleshooting.mdx b/ui-kit/flutter/v5/troubleshooting.mdx
new file mode 100644
index 000000000..57a7335e1
--- /dev/null
+++ b/ui-kit/flutter/v5/troubleshooting.mdx
@@ -0,0 +1,207 @@
+---
+title: "Troubleshooting"
+description: "Common failure modes and fixes for the CometChat Flutter UI Kit."
+---
+
+
+
+| Field | Value |
+| --- | --- |
+| Page type | Troubleshooting reference |
+| Scope | All CometChat Flutter UI Kit v5 issues — initialization, rendering, theming, calling, extensions, AI features, localization, sound, events |
+| When to reference | When a component fails to render, data is missing, styling doesn't apply, or a feature doesn't appear |
+
+
+
+## Initialization and Login
+
+| Symptom | Cause | Fix |
+| --- | --- | --- |
+| `CometChatUIKit.init()` fails silently | Invalid App ID, Region, or Auth Key | Double-check credentials from the [CometChat Dashboard](https://app.cometchat.com/) |
+| Widget doesn't render | `init()` not called or not awaited before rendering | Ensure `init()` completes before mounting widgets. See [Methods](/ui-kit/flutter/v5/methods) |
+| Widget renders but shows no data | User not logged in | Call `CometChatUIKit.login("UID")` after init |
+| Login fails with "UID not found" | UID doesn't exist in your CometChat app | Create the user via Dashboard, SDK, or API first |
+| Blank screen after login | Widget mounted before init/login completes | Use `FutureBuilder` or state to conditionally render after login resolves |
+| `getLoggedInUser()` returns null | User not logged in or session expired | Call `login()` or `loginWithAuthToken()` first |
+| `sendTextMessage()` fails | User not logged in or invalid receiver | Ensure login completes before sending messages |
+| Auth Key exposed in production | Using Auth Key instead of Auth Token | Switch to [Auth Token](/ui-kit/flutter/v5/methods#login-using-auth-token) for production |
+
+---
+
+## Platform-Specific Issues
+
+### Android
+
+| Symptom | Cause | Fix |
+| --- | --- | --- |
+| App crashes on launch | Missing internet permission | Add `
-Learn how to build a complete messaging UI using the **v5 UI Kit** by following the step-by-step guide [here](/ui-kit/flutter/getting-started#1%EF%B8%8F⃣-conversation-list-%2B-message-view).
+Learn how to build a complete messaging UI using the **v5 UI Kit** by following the step-by-step guide [here](/ui-kit/flutter/v5/getting-started#1%EF%B8%8F⃣-conversation-list-%2B-message-view).
@@ -115,8 +115,8 @@ This architectural redesign makes theming more intuitive and aligns with modern
For detailed guidance on theming and customizing colors in the CometChat React UI Kit, refer to the following resources:
-* **Theming Documentation:** [Guide to Theming](/ui-kit/flutter/theme-introduction)
-* **Color Customization:** [Customizing Colors](/ui-kit/flutter/color-resources)
+* **Theming Documentation:** [Guide to Theming](/ui-kit/flutter/v5/theme-introduction)
+* **Color Customization:** [Customizing Colors](/ui-kit/flutter/v5/color-resources)
diff --git a/ui-kit/flutter/url-formatter-guide.mdx b/ui-kit/flutter/v5/url-formatter-guide.mdx
similarity index 94%
rename from ui-kit/flutter/url-formatter-guide.mdx
rename to ui-kit/flutter/v5/url-formatter-guide.mdx
index f260ad2d7..4e78a6c0f 100644
--- a/ui-kit/flutter/url-formatter-guide.mdx
+++ b/ui-kit/flutter/v5/url-formatter-guide.mdx
@@ -12,11 +12,11 @@ description: "Detect and style plain URLs as clickable links with optional track
| Required setup | `CometChatUIKit.init(uiKitSettings: uiKitSettings)` then `CometChatUIKit.login("UID")` |
| Purpose | Auto-detects URLs in text messages and converts them to clickable links |
| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
-| Related | [Custom Text Formatter](/ui-kit/flutter/custom-text-formatter-guide) \| [All Guides](/ui-kit/flutter/guide-overview) |
+| Related | [Custom Text Formatter](/ui-kit/flutter/v5/custom-text-formatter-guide) \| [All Guides](/ui-kit/flutter/v5/guide-overview) |
-`CometChatUrlFormatter` extends [CometChatTextFormatter](/ui-kit/flutter/custom-text-formatter-guide) to detect URLs in text messages and render them as clickable links.
+`CometChatUrlFormatter` extends [CometChatTextFormatter](/ui-kit/flutter/v5/custom-text-formatter-guide) to detect URLs in text messages and render them as clickable links.
{/*
@@ -313,13 +313,13 @@ class _UrlFormatterExampleState extends State {
## Next Steps
-
+
Build custom inline text patterns.
-
+
Render real-time message threads.
-
+
Browse all feature and formatter guides.
diff --git a/ui-kit/flutter/v5/users.mdx b/ui-kit/flutter/v5/users.mdx
new file mode 100644
index 000000000..2914aa9ac
--- /dev/null
+++ b/ui-kit/flutter/v5/users.mdx
@@ -0,0 +1,1515 @@
+---
+title: "Users"
+description: "Searchable, scrollable list of all available users with avatar, name, and online/offline status."
+---
+
+
+```json
+{
+ "component": "CometChatUsers",
+ "package": "cometchat_chat_uikit",
+ "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
+ "description": "Searchable, scrollable list of all available users with avatar, name, and online/offline status.",
+ "primaryOutput": {
+ "prop": "onItemTap",
+ "type": "Function(BuildContext context, User user)"
+ },
+ "props": {
+ "data": {
+ "usersRequestBuilder": {
+ "type": "UsersRequestBuilder?",
+ "default": "SDK default (30 per page)",
+ "note": "Pass the builder, not the result of .build()"
+ },
+ "usersProtocol": {
+ "type": "UsersBuilderProtocol?",
+ "default": "null",
+ "note": "Custom protocol for fetching users"
+ },
+ "scrollController": {
+ "type": "ScrollController?",
+ "default": "null",
+ "note": "Custom scroll controller for the list"
+ },
+ "title": {
+ "type": "String?",
+ "default": "Users",
+ "note": "Title text for the app bar"
+ },
+ "controllerTag": {
+ "type": "String?",
+ "default": "null",
+ "note": "Tag for controller management"
+ },
+ "searchPlaceholder": {
+ "type": "String?",
+ "default": "null",
+ "note": "Placeholder text for search input"
+ },
+ "searchKeyword": {
+ "type": "String?",
+ "default": "null",
+ "note": "Pre-fills search and filters list"
+ },
+ "height": {
+ "type": "double?",
+ "default": "null"
+ },
+ "width": {
+ "type": "double?",
+ "default": "null"
+ }
+ },
+ "callbacks": {
+ "onItemTap": "Function(BuildContext context, User user)?",
+ "onItemLongPress": "Function(BuildContext context, User user)?",
+ "onSelection": "Function(List? list, BuildContext context)?",
+ "onBack": "VoidCallback?",
+ "onError": "OnError?",
+ "onLoad": "OnLoad?",
+ "onEmpty": "OnEmpty?"
+ },
+ "visibility": {
+ "usersStatusVisibility": { "type": "bool?", "default": true },
+ "hideAppbar": { "type": "bool?", "default": false },
+ "hideSearch": { "type": "bool", "default": false },
+ "showBackButton": { "type": "bool", "default": true },
+ "stickyHeaderVisibility": { "type": "bool?", "default": false }
+ },
+ "selection": {
+ "selectionMode": {
+ "type": "SelectionMode?",
+ "values": ["SelectionMode.single", "SelectionMode.multiple", "SelectionMode.none"],
+ "default": "null"
+ },
+ "activateSelection": {
+ "type": "ActivateSelection?",
+ "values": ["ActivateSelection.onClick", "ActivateSelection.onLongClick"],
+ "default": "null"
+ }
+ },
+ "viewSlots": {
+ "listItemView": "Widget Function(User user)?",
+ "leadingView": "Widget? Function(BuildContext context, User user)?",
+ "titleView": "Widget? Function(BuildContext context, User user)?",
+ "subtitleView": "Widget? Function(BuildContext context, User user)?",
+ "trailingView": "Widget? Function(BuildContext context, User user)?",
+ "loadingStateView": "WidgetBuilder?",
+ "emptyStateView": "WidgetBuilder?",
+ "errorStateView": "WidgetBuilder?",
+ "setOptions": "List? Function(User, CometChatUsersController, BuildContext)?",
+ "addOptions": "List? Function(User, CometChatUsersController, BuildContext)?",
+ "appBarOptions": "List Function(BuildContext context)?"
+ },
+ "icons": {
+ "backButton": { "type": "Widget?", "default": "built-in back arrow" },
+ "searchBoxIcon": { "type": "Widget?", "default": "built-in search icon" },
+ "submitIcon": { "type": "Widget?", "default": "built-in check icon" }
+ },
+ "style": {
+ "usersStyle": { "type": "CometChatUsersStyle", "default": "CometChatUsersStyle()" }
+ }
+ },
+ "events": [
+ {
+ "name": "CometChatUserEvents.ccUserBlocked",
+ "payload": "User",
+ "description": "User blocked"
+ },
+ {
+ "name": "CometChatUserEvents.ccUserUnblocked",
+ "payload": "User",
+ "description": "User unblocked"
+ }
+ ],
+ "sdkListeners": [
+ "onUserOnline",
+ "onUserOffline",
+ "ccUserBlocked",
+ "ccUserUnblocked",
+ "onConnected"
+ ],
+ "compositionExample": {
+ "description": "User list wired to message view",
+ "components": [
+ "CometChatUsers",
+ "CometChatMessages",
+ "CometChatMessageHeader",
+ "CometChatMessageList",
+ "CometChatMessageComposer"
+ ],
+ "flow": "onItemTap emits User -> pass to CometChatMessages or individual message components"
+ },
+ "types": {
+ "CometChatOption": {
+ "id": "String?",
+ "title": "String?",
+ "icon": "String?",
+ "iconWidget": "Widget?",
+ "onClick": "VoidCallback?"
+ },
+ "SelectionMode": {
+ "single": "SelectionMode.single",
+ "multiple": "SelectionMode.multiple",
+ "none": "SelectionMode.none"
+ },
+ "ActivateSelection": {
+ "onClick": "ActivateSelection.onClick",
+ "onLongClick": "ActivateSelection.onLongClick"
+ }
+ }
+}
+```
+
+
+
+## Where It Fits
+
+`CometChatUsers` is a contact list widget. It renders all available users and emits the selected `User` via `onItemTap`. Wire it to `CometChatMessages` or individual message components (`CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer`) to build a standard two-panel chat layout.
+
+
+
+```dart
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+class ChatApp extends StatefulWidget {
+ const ChatApp({super.key});
+
+ @override
+ State createState() => _ChatAppState();
+}
+
+class _ChatAppState extends State {
+ User? selectedUser;
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: Row(
+ children: [
+ SizedBox(
+ width: 400,
+ child: CometChatUsers(
+ onItemTap: (context, user) {
+ setState(() {
+ selectedUser = user;
+ });
+ },
+ ),
+ ),
+ Expanded(
+ child: selectedUser != null
+ ? CometChatMessages(user: selectedUser)
+ : const Center(child: Text('Select a user')),
+ ),
+ ],
+ ),
+ );
+ }
+}
+```
+
+
+
+
+
+
+
+---
+
+
+## Minimal Render
+
+
+
+```dart
+import 'package:flutter/material.dart';
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+class UsersDemo extends StatelessWidget {
+ const UsersDemo({super.key});
+
+ @override
+ Widget build(BuildContext context) {
+ return const Scaffold(
+ body: SafeArea(
+ child: CometChatUsers(),
+ ),
+ );
+ }
+}
+```
+
+
+
+You can also launch it using `Navigator.push`:
+
+```dart
+Navigator.push(
+ context,
+ MaterialPageRoute(builder: (context) => const CometChatUsers())
+);
+```
+
+---
+
+## Filtering Users
+
+Pass a `UsersRequestBuilder` to `usersRequestBuilder`. Pass the builder instance — not the result of `.build()`.
+
+
+
+```dart
+CometChatUsers(
+ usersRequestBuilder: UsersRequestBuilder()
+ ..friendsOnly = true
+ ..limit = 15,
+)
+```
+
+
+
+### Filter Recipes
+
+| Recipe | Code |
+| --- | --- |
+| Friends only | `UsersRequestBuilder()..friendsOnly = true` |
+| Online users only | `UsersRequestBuilder()..userStatus = CometChatUserStatus.online` |
+| Limit to 15 per page | `UsersRequestBuilder()..limit = 15` |
+| Search by keyword | `UsersRequestBuilder()..searchKeyword = "alice"` |
+| Hide blocked users | `UsersRequestBuilder()..hideBlockedUsers = true` |
+| Filter by roles | `UsersRequestBuilder()..roles = ["admin", "moderator"]` |
+| Filter by tags | `UsersRequestBuilder()..tags = ["vip"]` |
+| Specific UIDs | `UsersRequestBuilder()..uids = ["uid1", "uid2"]` |
+
+Default page size is 30. The component uses infinite scroll — the next page loads as the user scrolls to the bottom.
+
+
+### UsersRequestBuilder Properties
+
+| Property | Description | Code |
+| --- | --- | --- |
+| `limit` | Number of users to fetch per request. Maximum 100. | `..limit = 30` |
+| `searchKeyword` | Search users by name. | `..searchKeyword = "John"` |
+| `friendsOnly` | Fetch only friends. Default `false`. | `..friendsOnly = true` |
+| `userStatus` | Filter by status: `CometChatUserStatus.online` or `CometChatUserStatus.offline`. | `..userStatus = CometChatUserStatus.online` |
+| `hideBlockedUsers` | Hide blocked users from the list. Default `false`. | `..hideBlockedUsers = true` |
+| `roles` | Filter users by specific roles. | `..roles = ["admin"]` |
+| `tags` | Filter users by specific tags. | `..tags = ["vip"]` |
+| `withTags` | Include tags in the User object. Default `false`. | `..withTags = true` |
+| `uids` | Fetch specific users by UIDs. | `..uids = ["uid1", "uid2"]` |
+| `build()` | Builds and returns a `UsersRequest` object. | `.build()` |
+
+Refer to [UsersRequestBuilder](/sdk/flutter/retrieve-users) for the full builder API.
+
+---
+
+## Actions and Events
+
+### Callback Props
+
+#### onItemTap
+
+Fires when a user row is tapped. Primary navigation hook — set the active user and render the message view.
+
+
+
+```dart
+CometChatUsers(
+ onItemTap: (context, user) {
+ print("Selected: ${user.name}");
+ },
+)
+```
+
+
+
+#### onItemLongPress
+
+Fires when a user row is long-pressed. Useful for showing context menus or custom actions.
+
+
+
+```dart
+CometChatUsers(
+ onItemLongPress: (context, user) {
+ // Show custom context menu
+ },
+)
+```
+
+
+
+
+#### onSelection
+
+Fires when users are selected in multi-select mode. Requires `selectionMode` to be set.
+
+
+
+```dart
+CometChatUsers(
+ selectionMode: SelectionMode.multiple,
+ activateSelection: ActivateSelection.onClick,
+ onSelection: (selectedList, context) {
+ print("Selected ${selectedList?.length ?? 0} users");
+ },
+)
+```
+
+
+
+#### onError
+
+Fires on internal errors (network failure, auth issue, SDK exception).
+
+
+
+```dart
+CometChatUsers(
+ onError: (error) {
+ print("CometChatUsers error: $error");
+ },
+)
+```
+
+
+
+#### onBack
+
+Fires when the back button is pressed.
+
+
+
+```dart
+CometChatUsers(
+ showBackButton: true,
+ onBack: () {
+ Navigator.pop(context);
+ },
+)
+```
+
+
+
+#### onLoad
+
+Fires when the user list is successfully loaded.
+
+
+
+```dart
+CometChatUsers(
+ onLoad: (list) {
+ print("Loaded ${list.length} users");
+ },
+)
+```
+
+
+
+#### onEmpty
+
+Fires when the user list is empty.
+
+
+
+```dart
+CometChatUsers(
+ onEmpty: () {
+ print("No users found");
+ },
+)
+```
+
+
+
+
+### Global UI Events
+
+`CometChatUserEvents` emits events subscribable from anywhere in the application. Add a listener in `initState` and remove it in `dispose`.
+
+| Event | Fires when | Payload |
+| --- | --- | --- |
+| `ccUserBlocked` | A user is blocked | `User` |
+| `ccUserUnblocked` | A user is unblocked | `User` |
+
+When to use: sync external UI with user state changes. For example, update a blocked users count badge when a user is blocked.
+
+
+
+```dart
+import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
+
+class _YourScreenState extends State with CometChatUserEventListener {
+
+ @override
+ void initState() {
+ super.initState();
+ CometChatUserEvents.addUsersListener("listenerId", this);
+ }
+
+ @override
+ void dispose() {
+ CometChatUserEvents.removeUsersListener("listenerId");
+ super.dispose();
+ }
+
+ @override
+ void ccUserBlocked(User user) {
+ print("Blocked: ${user.name}");
+ }
+
+ @override
+ void ccUserUnblocked(User user) {
+ print("Unblocked: ${user.name}");
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return const Placeholder();
+ }
+}
+```
+
+
+
+### SDK Events (Real-Time, Automatic)
+
+The component listens to these SDK events internally. No manual attachment needed unless additional side effects are required.
+
+| SDK Listener | Internal behavior |
+| --- | --- |
+| `onUserOnline` | Updates the user's status indicator to online |
+| `onUserOffline` | Updates the user's status indicator to offline |
+| `ccUserBlocked` | Updates blocked user in list |
+| `ccUserUnblocked` | Updates unblocked user in list |
+| `onConnected` | Refreshes user list when connection is re-established |
+
+Automatic: user presence changes (online/offline), blocked/unblocked state, connection recovery.
+
+---
+
+
+## Custom View Slots
+
+Each slot replaces a section of the default UI. Slots that accept a user parameter receive the `User` object for that row.
+
+| Slot | Signature | Replaces |
+| --- | --- | --- |
+| `listItemView` | `Widget Function(User)` | Entire list item row |
+| `leadingView` | `Widget? Function(BuildContext, User)` | Avatar / left section |
+| `titleView` | `Widget? Function(BuildContext, User)` | Name / title text |
+| `subtitleView` | `Widget? Function(BuildContext, User)` | Subtitle text |
+| `trailingView` | `Widget? Function(BuildContext, User)` | Right section |
+| `loadingStateView` | `WidgetBuilder` | Loading spinner |
+| `emptyStateView` | `WidgetBuilder` | Empty state |
+| `errorStateView` | `WidgetBuilder` | Error state |
+| `setOptions` | `List? Function(User, CometChatUsersController, BuildContext)` | Context menu actions (replaces default) |
+| `addOptions` | `List? Function(User, CometChatUsersController, BuildContext)` | Context menu actions (adds to default) |
+| `appBarOptions` | `List Function(BuildContext)` | App bar action widgets |
+
+### listItemView
+
+Replace the entire list item row.
+
+
+
+
+
+
+
+```dart
+Widget getCustomUserListItem(User user, BuildContext context) {
+ // Get status indicator
+ StatusIndicatorUtils statusIndicatorUtils = StatusIndicatorUtils.getStatusIndicatorFromParams(
+ context: context,
+ user: user,
+ onlineStatusIndicatorColor: Color(0xFF56E8A7),
+ );
+
+ return CometChatListItem(
+ id: user.uid,
+ avatarName: user.name,
+ avatarURL: user.avatar,
+ avatarHeight: 40,
+ avatarWidth: 40,
+ title: user.name,
+ key: UniqueKey(),
+ statusIndicatorColor: statusIndicatorUtils.statusIndicatorColor,
+ statusIndicatorIcon: statusIndicatorUtils.icon,
+ statusIndicatorStyle: CometChatStatusIndicatorStyle(
+ border: Border.all(width: 2, color: Color(0xFFFFFFFF)),
+ backgroundColor: Color(0xFF56E8A7),
+ ),
+ hideSeparator: true,
+ style: ListItemStyle(
+ background: user.status == CometChatUserStatus.online
+ ? const Color(0xFFE6F4ED)
+ : Colors.transparent,
+ titleStyle: TextStyle(
+ overflow: TextOverflow.ellipsis,
+ fontSize: 16,
+ fontWeight: FontWeight.w500,
+ color: Color(0xFF141414),
+ ),
+ padding: EdgeInsets.only(left: 16, right: 16, top: 8, bottom: 8),
+ ),
+ );
+}
+
+// Usage:
+CometChatUsers(
+ listItemView: (user) => getCustomUserListItem(user, context),
+)
+```
+
+
+
+
+### leadingView
+
+Replace the avatar / left section.
+
+
+
+```dart
+CometChatUsers(
+ leadingView: (context, user) {
+ return Container(
+ decoration: BoxDecoration(
+ border: Border.all(
+ color: user.status == CometChatUserStatus.online
+ ? Color(0xFF09C26F)
+ : Colors.transparent,
+ width: 2,
+ ),
+ borderRadius: BorderRadius.circular(8),
+ ),
+ child: CometChatAvatar(
+ image: user.avatar,
+ name: user.name,
+ style: CometChatAvatarStyle(
+ borderRadius: BorderRadius.circular(6),
+ ),
+ ),
+ );
+ },
+)
+```
+
+
+
+### titleView
+
+Replace the name / title text. Role badge inline example.
+
+
+
+```dart
+CometChatUsers(
+ titleView: (context, user) {
+ return Row(
+ children: [
+ Text(
+ user.name ?? "",
+ style: TextStyle(fontWeight: FontWeight.w500, fontSize: 16),
+ ),
+ if (user.role != null)
+ Container(
+ margin: EdgeInsets.only(left: 4),
+ padding: EdgeInsets.symmetric(horizontal: 6, vertical: 2),
+ decoration: BoxDecoration(
+ color: Color(0xFF09C26F),
+ borderRadius: BorderRadius.circular(7),
+ ),
+ child: Text(
+ user.role!,
+ style: TextStyle(color: Colors.white, fontSize: 8, fontWeight: FontWeight.w600),
+ ),
+ ),
+ ],
+ );
+ },
+)
+```
+
+
+
+### subtitleView
+
+Replace the subtitle text for each user.
+
+
+
+
+
+
+
+```dart
+CometChatUsers(
+ subtitleView: (context, user) {
+ final dateTime = user.lastActiveAt ?? DateTime.now();
+ final subtitle = "Last Active at ${DateFormat('dd/MM/yyyy, HH:mm:ss').format(dateTime)}";
+
+ return Text(
+ subtitle,
+ style: TextStyle(
+ color: Color(0xFF727272),
+ fontSize: 14,
+ fontWeight: FontWeight.w400,
+ ),
+ );
+ },
+)
+```
+
+
+
+
+### trailingView
+
+Replace the right section. Custom tag badge example.
+
+
+
+```dart
+CometChatUsers(
+ trailingView: (context, user) {
+ final tag = user.tags?.isNotEmpty == true ? user.tags!.first : null;
+ if (tag == null) return null;
+
+ return Container(
+ padding: EdgeInsets.symmetric(horizontal: 6, vertical: 4),
+ decoration: BoxDecoration(
+ color: Color(0xFF6852D6),
+ borderRadius: BorderRadius.circular(4),
+ ),
+ child: Text(
+ tag,
+ style: TextStyle(color: Colors.white, fontSize: 10, fontWeight: FontWeight.w600),
+ ),
+ );
+ },
+)
+```
+
+
+
+### setOptions
+
+Replace the context menu / long-press actions on each user item.
+
+
+
+```dart
+CometChatUsers(
+ setOptions: (user, controller, context) {
+ return [
+ CometChatOption(
+ id: "block",
+ title: "Block User",
+ icon: AssetConstants.close,
+ onClick: () {
+ CometChat.blockUsers([user.uid], onSuccess: (users) {
+ print("User blocked");
+ }, onError: (error) {
+ print("Error: $error");
+ });
+ },
+ ),
+ CometChatOption(
+ id: "view_profile",
+ title: "View Profile",
+ iconWidget: Icon(Icons.person_outline),
+ onClick: () {
+ // Navigate to user profile
+ },
+ ),
+ ];
+ },
+)
+```
+
+
+
+### addOptions
+
+Add to the existing context menu actions without removing defaults.
+
+
+
+```dart
+CometChatUsers(
+ addOptions: (user, controller, context) {
+ return [
+ CometChatOption(
+ id: "add_friend",
+ title: "Add Friend",
+ iconWidget: Icon(Icons.person_add_outlined),
+ onClick: () {
+ // Add friend logic
+ },
+ ),
+ CometChatOption(
+ id: "send_message",
+ title: "Send Message",
+ iconWidget: Icon(Icons.message_outlined),
+ onClick: () {
+ // Navigate to messages
+ },
+ ),
+ ];
+ },
+)
+```
+
+
+
+
+### appBarOptions
+
+Add custom widgets to the app bar.
+
+
+
+
+
+
+
+```dart
+CometChatUsers(
+ appBarOptions: (context) => [
+ IconButton(
+ onPressed: () {
+ // Handle action
+ },
+ icon: Icon(Icons.add_comment_outlined, color: Color(0xFF141414)),
+ ),
+ ],
+)
+```
+
+
+
+For a more complete popup menu with styling:
+
+
+
+```dart
+CometChatUsers(
+ appBarOptions: (context) => [
+ PopupMenuButton(
+ shape: RoundedRectangleBorder(
+ borderRadius: BorderRadius.circular(8),
+ side: BorderSide(color: Color(0xFFF5F5F5), width: 1),
+ ),
+ color: Colors.white,
+ elevation: 4,
+ icon: Icon(Icons.more_vert, color: Color(0xFF141414)),
+ onSelected: (value) {
+ switch (value) {
+ case 'refresh':
+ // Refresh users list
+ break;
+ case 'settings':
+ // Navigate to settings
+ break;
+ }
+ },
+ itemBuilder: (BuildContext context) => [
+ PopupMenuItem(
+ value: 'refresh',
+ child: Row(
+ children: [
+ Icon(Icons.refresh, color: Color(0xFFA1A1A1)),
+ SizedBox(width: 8),
+ Text("Refresh"),
+ ],
+ ),
+ ),
+ PopupMenuItem(
+ value: 'settings',
+ child: Row(
+ children: [
+ Icon(Icons.settings, color: Color(0xFFA1A1A1)),
+ SizedBox(width: 8),
+ Text("Settings"),
+ ],
+ ),
+ ),
+ ],
+ ),
+ ],
+)
+```
+
+
+
+---
+
+
+## Styling
+
+Set `CometChatUsersStyle` to customize the appearance.
+
+
+
+```dart
+CometChatUsers(
+ usersStyle: CometChatUsersStyle(
+ backgroundColor: Colors.white,
+ titleTextColor: Color(0xFFF76808),
+ separatorColor: Color(0xFFF76808),
+ avatarStyle: CometChatAvatarStyle(
+ borderRadius: BorderRadius.circular(8),
+ backgroundColor: Color(0xFFFBAA75),
+ ),
+ ),
+)
+```
+
+
+
+
+
+
+
+### Style Properties
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `backgroundColor` | `Color?` | Background color of the component |
+| `border` | `Border?` | Border for the widget |
+| `borderRadius` | `BorderRadiusGeometry?` | Border radius for the widget |
+| `titleTextColor` | `Color?` | Color of the header title |
+| `titleTextStyle` | `TextStyle?` | Style for the header title |
+| `backIconColor` | `Color?` | Back button icon color |
+| `searchBackgroundColor` | `Color?` | Background color of search box |
+| `searchBorder` | `BorderSide?` | Border for search box |
+| `searchBorderRadius` | `BorderRadius?` | Border radius for search box |
+| `searchPlaceHolderTextColor` | `Color?` | Placeholder text color in search |
+| `searchPlaceHolderTextStyle` | `TextStyle?` | Placeholder text style in search |
+| `searchIconColor` | `Color?` | Search icon color |
+| `searchInputTextColor` | `Color?` | Search input text color |
+| `searchInputTextStyle` | `TextStyle?` | Search input text style |
+| `separatorColor` | `Color?` | Color of list item separators |
+| `separatorHeight` | `double?` | Height of list item separators |
+| `stickyTitleColor` | `Color?` | Color of sticky alphabetical headers |
+| `stickyTitleTextStyle` | `TextStyle?` | Style for sticky alphabetical headers |
+| `itemTitleTextColor` | `Color?` | Color of user name in list items |
+| `itemTitleTextStyle` | `TextStyle?` | Style for user name in list items |
+| `itemBorder` | `BoxBorder?` | Border for list items |
+| `listItemSelectedBackgroundColor` | `Color?` | Background color for selected items |
+| `emptyStateTextColor` | `Color?` | Text color for empty state title |
+| `emptyStateTextStyle` | `TextStyle?` | Text style for empty state title |
+| `emptyStateSubTitleTextColor` | `Color?` | Text color for empty state subtitle |
+| `emptyStateSubTitleTextStyle` | `TextStyle?` | Text style for empty state subtitle |
+| `errorStateTextColor` | `Color?` | Text color for error state title |
+| `errorStateTextStyle` | `TextStyle?` | Text style for error state title |
+| `errorStateSubTitleTextColor` | `Color?` | Text color for error state subtitle |
+| `errorStateSubTitleTextStyle` | `TextStyle?` | Text style for error state subtitle |
+| `retryButtonBackgroundColor` | `Color?` | Background color for retry button |
+| `retryButtonBorderRadius` | `BorderRadiusGeometry?` | Border radius for retry button |
+| `retryButtonBorder` | `BorderSide?` | Border for retry button |
+| `retryButtonTextColor` | `Color?` | Text color for retry button |
+| `retryButtonTextStyle` | `TextStyle?` | Text style for retry button |
+| `submitIconColor` | `Color?` | Color of submit icon in selection mode |
+| `checkBoxBackgroundColor` | `Color?` | Background color of unchecked checkbox |
+| `checkBoxCheckedBackgroundColor` | `Color?` | Background color of checked checkbox |
+| `checkboxSelectedIconColor` | `Color?` | Color of checkmark icon |
+| `checkBoxBorderRadius` | `BorderRadiusGeometry?` | Border radius for checkbox |
+| `checkBoxBorder` | `BorderSide?` | Border for checkbox |
+| `avatarStyle` | `CometChatAvatarStyle?` | Style for user avatars |
+| `statusIndicatorStyle` | `CometChatStatusIndicatorStyle?` | Style for status indicators |
+
+---
+
+
+## Common Patterns
+
+### Custom empty state with CTA
+
+
+
+```dart
+CometChatUsers(
+ emptyStateView: (context) {
+ return Center(
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ Icon(Icons.people_outline, size: 64, color: Color(0xFF727272)),
+ SizedBox(height: 16),
+ Text("No users found", style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500)),
+ SizedBox(height: 8),
+ ElevatedButton(
+ onPressed: () {
+ // Invite users
+ },
+ child: Text("Invite Users"),
+ ),
+ ],
+ ),
+ );
+ },
+)
+```
+
+
+
+### Friends-only list
+
+
+
+```dart
+CometChatUsers(
+ usersRequestBuilder: UsersRequestBuilder()
+ ..friendsOnly = true
+ ..limit = 15,
+)
+```
+
+
+
+### Multi-select with selection callback
+
+
+
+```dart
+CometChatUsers(
+ selectionMode: SelectionMode.multiple,
+ activateSelection: ActivateSelection.onClick,
+ onSelection: (selectedUsers, context) {
+ if (selectedUsers != null && selectedUsers.isNotEmpty) {
+ print("Selected ${selectedUsers.length} users");
+ // Create group with selected users, etc.
+ }
+ },
+)
+```
+
+
+
+### Hide all chrome — minimal list
+
+
+
+```dart
+CometChatUsers(
+ hideSearch: true,
+ hideAppbar: true,
+ usersStatusVisibility: false,
+ stickyHeaderVisibility: true, // hides alphabetical headers
+)
+```
+
+
+
+### Online users only
+
+
+
+```dart
+CometChatUsers(
+ usersRequestBuilder: UsersRequestBuilder()
+ ..userStatus = CometChatUserStatus.online,
+)
+```
+
+
+
+---
+
+
+## Accessibility
+
+The component renders a scrollable list of interactive items. Each user row supports:
+
+- Tap gesture for selection/navigation
+- Long-press gesture for context menu actions
+- Checkbox selection in multi-select mode with proper touch targets
+- Status indicators with visual feedback for online/offline state
+
+For screen readers:
+- User names are readable as list item titles
+- Status indicators use color coding — consider adding `Semantics` widgets via `leadingView` if screen reader descriptions are needed for these visual indicators
+- Selection state is communicated through checkbox widgets
+
+The component respects system accessibility settings including text scaling and high contrast modes.
+
+---
+
+## Props
+
+All props are optional unless noted.
+
+### activateSelection
+
+Controls when selection mode activates.
+
+| | |
+| --- | --- |
+| Type | `ActivateSelection?` |
+| Default | `null` |
+
+Values: `ActivateSelection.onClick`, `ActivateSelection.onLongClick`
+
+---
+
+### addOptions
+
+Adds additional context menu actions to the default options.
+
+| | |
+| --- | --- |
+| Type | `List? Function(User, CometChatUsersController, BuildContext)?` |
+| Default | `null` |
+
+---
+
+### appBarOptions
+
+Custom widgets to display in the app bar.
+
+| | |
+| --- | --- |
+| Type | `List Function(BuildContext context)?` |
+| Default | `null` |
+
+---
+
+### backButton
+
+Custom back button widget.
+
+| | |
+| --- | --- |
+| Type | `Widget?` |
+| Default | Built-in back arrow |
+
+---
+
+### controllerTag
+
+Identifier tag for controller management.
+
+| | |
+| --- | --- |
+| Type | `String?` |
+| Default | `null` |
+
+---
+
+
+### emptyStateView
+
+Custom view displayed when there are no users.
+
+| | |
+| --- | --- |
+| Type | `WidgetBuilder?` |
+| Default | Built-in empty state |
+
+---
+
+### errorStateView
+
+Custom view displayed when an error occurs.
+
+| | |
+| --- | --- |
+| Type | `WidgetBuilder?` |
+| Default | Built-in error state |
+
+---
+
+### height
+
+Height of the widget.
+
+| | |
+| --- | --- |
+| Type | `double?` |
+| Default | `null` |
+
+---
+
+### hideAppbar
+
+Hides the app bar including title and search.
+
+| | |
+| --- | --- |
+| Type | `bool?` |
+| Default | `false` |
+
+---
+
+### hideSearch
+
+Hides the search input box.
+
+| | |
+| --- | --- |
+| Type | `bool` |
+| Default | `false` |
+
+---
+
+### leadingView
+
+Custom renderer for the avatar / left section.
+
+| | |
+| --- | --- |
+| Type | `Widget? Function(BuildContext context, User user)?` |
+| Default | Built-in avatar |
+
+---
+
+### listItemView
+
+Custom renderer for the entire list item row.
+
+| | |
+| --- | --- |
+| Type | `Widget Function(User user)?` |
+| Default | Built-in list item |
+
+---
+
+### loadingStateView
+
+Custom view displayed during loading state.
+
+| | |
+| --- | --- |
+| Type | `WidgetBuilder?` |
+| Default | Built-in shimmer |
+
+---
+
+
+### onBack
+
+Callback triggered when the back button is pressed.
+
+| | |
+| --- | --- |
+| Type | `VoidCallback?` |
+| Default | `null` |
+
+---
+
+### onEmpty
+
+Callback triggered when the user list is empty.
+
+| | |
+| --- | --- |
+| Type | `OnEmpty?` |
+| Default | `null` |
+
+---
+
+### onError
+
+Callback triggered when an error occurs.
+
+| | |
+| --- | --- |
+| Type | `OnError?` |
+| Default | `null` |
+
+---
+
+### onItemLongPress
+
+Callback triggered on long press of a user item.
+
+| | |
+| --- | --- |
+| Type | `Function(BuildContext context, User user)?` |
+| Default | `null` |
+
+---
+
+### onItemTap
+
+Callback triggered when tapping a user item.
+
+| | |
+| --- | --- |
+| Type | `Function(BuildContext context, User user)?` |
+| Default | `null` |
+
+---
+
+### onLoad
+
+Callback triggered when the list is successfully loaded.
+
+| | |
+| --- | --- |
+| Type | `OnLoad?` |
+| Default | `null` |
+
+---
+
+### onSelection
+
+Callback triggered when users are selected. Requires `selectionMode` to be set.
+
+| | |
+| --- | --- |
+| Type | `Function(List? list, BuildContext context)?` |
+| Default | `null` |
+
+---
+
+### scrollController
+
+Controller for scrolling the list.
+
+| | |
+| --- | --- |
+| Type | `ScrollController?` |
+| Default | `null` |
+
+---
+
+
+### searchBoxIcon
+
+Custom search box icon widget.
+
+| | |
+| --- | --- |
+| Type | `Widget?` |
+| Default | Built-in search icon |
+
+---
+
+### searchKeyword
+
+Pre-fills the search and filters the user list.
+
+| | |
+| --- | --- |
+| Type | `String?` |
+| Default | `null` |
+
+---
+
+### searchPlaceholder
+
+Placeholder text for the search input box.
+
+| | |
+| --- | --- |
+| Type | `String?` |
+| Default | `null` |
+
+---
+
+### selectionMode
+
+Enables single or multi-select mode.
+
+| | |
+| --- | --- |
+| Type | `SelectionMode?` |
+| Default | `null` |
+
+Values: `SelectionMode.single`, `SelectionMode.multiple`, `SelectionMode.none`
+
+---
+
+### setOptions
+
+Replaces the default context menu actions.
+
+| | |
+| --- | --- |
+| Type | `List? Function(User, CometChatUsersController, BuildContext)?` |
+| Default | `null` |
+
+---
+
+### showBackButton
+
+Shows or hides the back button.
+
+| | |
+| --- | --- |
+| Type | `bool` |
+| Default | `true` |
+
+---
+
+### stickyHeaderVisibility
+
+Hides alphabetical section headers when set to `true`.
+
+| | |
+| --- | --- |
+| Type | `bool?` |
+| Default | `false` |
+
+Note: When `false`, alphabetical headers (A, B, C...) are shown to separate users.
+
+---
+
+
+### submitIcon
+
+Custom submit icon widget for selection mode.
+
+| | |
+| --- | --- |
+| Type | `Widget?` |
+| Default | Built-in check icon |
+
+---
+
+### subtitleView
+
+Custom renderer for the subtitle text.
+
+| | |
+| --- | --- |
+| Type | `Widget? Function(BuildContext context, User user)?` |
+| Default | `null` |
+
+---
+
+### title
+
+Title text displayed in the app bar.
+
+| | |
+| --- | --- |
+| Type | `String?` |
+| Default | `"Users"` |
+
+---
+
+### titleView
+
+Custom renderer for the name / title text.
+
+| | |
+| --- | --- |
+| Type | `Widget? Function(BuildContext context, User user)?` |
+| Default | Built-in title |
+
+---
+
+### trailingView
+
+Custom renderer for the right section.
+
+| | |
+| --- | --- |
+| Type | `Widget? Function(BuildContext context, User user)?` |
+| Default | `null` |
+
+---
+
+### usersProtocol
+
+Custom protocol for fetching users.
+
+| | |
+| --- | --- |
+| Type | `UsersBuilderProtocol?` |
+| Default | `null` |
+
+---
+
+### usersRequestBuilder
+
+Controls which users load and in what order.
+
+| | |
+| --- | --- |
+| Type | `UsersRequestBuilder?` |
+| Default | SDK default (30 per page) |
+
+Pass the builder instance, not the result of `.build()`.
+
+---
+
+### usersStatusVisibility
+
+Shows or hides the online/offline status indicator on user avatars.
+
+| | |
+| --- | --- |
+| Type | `bool?` |
+| Default | `true` |
+
+---
+
+### usersStyle
+
+Styling options for the users list.
+
+| | |
+| --- | --- |
+| Type | `CometChatUsersStyle` |
+| Default | `CometChatUsersStyle()` |
+
+---
+
+### width
+
+Width of the widget.
+
+| | |
+| --- | --- |
+| Type | `double?` |
+| Default | `null` |
+
+---
+
+
+## Events
+
+`CometChatUsers` does not emit custom UI events. It subscribes to:
+
+| Event | Payload | Internal behavior |
+| --- | --- | --- |
+| `CometChatUserEvents.ccUserBlocked` | `User` | Updates blocked user in list |
+| `CometChatUserEvents.ccUserUnblocked` | `User` | Updates unblocked user in list |
+
+---
+
+## Customization Matrix
+
+| What to change | Where | Property/API | Example |
+| --- | --- | --- | --- |
+| Override behavior on user interaction | Component props | `on` callbacks | `onItemTap: (ctx, user) => setActive(user)` |
+| Filter which users appear | Component props | `usersRequestBuilder` | `usersRequestBuilder: UsersRequestBuilder()..friendsOnly = true` |
+| Toggle visibility of UI elements | Component props | `hide` / `show` boolean props | `hideSearch: true` |
+| Replace a section of the list item | Component props | `View` render props | `listItemView: (user) => CustomWidget()` |
+| Change colors, fonts, spacing | Component props | `usersStyle` | `usersStyle: CometChatUsersStyle(titleTextColor: Colors.red)` |
+
+---
+
+
+
+ Display recent one-on-one and group conversations
+
+
+ Display and manage group chats
+
+
+ Display messages in a conversation
+
+
+ Learn how to customize the look and feel
+
+
\ No newline at end of file
diff --git a/ui-kit/flutter/v6/call-buttons.mdx b/ui-kit/flutter/v6/call-buttons.mdx
deleted file mode 100644
index fdef3d6c4..000000000
--- a/ui-kit/flutter/v6/call-buttons.mdx
+++ /dev/null
@@ -1,131 +0,0 @@
----
-title: "Call Buttons"
----
-
-## Overview
-
-The `CometChatCallButtons` widget provides users with the ability to make calls, access call-related functionalities, and control call settings.
-
-## Usage
-
-### Integration
-
-
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_calls_uikit.dart';
-import 'package:flutter/material.dart';
-
-class CallButtonsExample extends StatefulWidget {
- const CallButtonsExample({super.key});
-
- @override
- State createState() => _CallButtonsExampleState();
-}
-
-class _CallButtonsExampleState extends State {
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: SafeArea(
- child: Center(child: CometChatCallButtons()),
- ),
- );
- }
-}
-```
-
-
-
-***
-
-### Actions
-
-##### onError
-
-
-
-```dart
-CometChatCallButtons(
- onError: (e) {
- // Handle error
- },
-)
-```
-
-
-
-***
-
-### Events
-
-| Event | Description |
-|---|---|
-| ccCallAccepted | Triggers when the outgoing call is accepted |
-| ccCallRejected | Triggers when the outgoing call is rejected |
-
-
-
-```dart
-class _YourScreenState extends State with CometChatCallEventListener {
- @override
- void initState() {
- super.initState();
- CometChatCallEvents.addCallEventsListener("unique_listener_ID", this);
- }
-
- @override
- void dispose() {
- super.dispose();
- CometChatCallEvents.removeCallEventsListener("unique_listener_ID");
- }
-
- @override
- void ccCallAccepted(Call call) {
- // Handle call accepted
- }
-
- @override
- void ccCallRejected(Call call) {
- // Handle call rejected
- }
-}
-```
-
-
-
-***
-
-## Customization
-
-### Style
-
-
-
-```dart
-CometChatCallButtons(
- callButtonsStyle: CometChatCallButtonsStyle(
- voiceCallIconColor: Color(0xFF6852D6),
- videoCallIconColor: Color(0xFF6852D6),
- voiceCallButtonColor: Color(0xFFEDEAFA),
- videoCallButtonColor: Color(0xFFEDEAFA),
- voiceCallButtonBorderRadius: BorderRadius.circular(12.5),
- videoCallButtonBorderRadius: BorderRadius.circular(12.5),
- ),
-)
-```
-
-
-
-### Functionality
-
-| Property | Description | Code |
-|---|---|---|
-| User | Set User object | `user: User?` |
-| Group | Set Group object | `group: Group?` |
-| CallSettingsBuilder | Configure call settings | `callSettingsBuilder: CallSettingsBuilder?` |
-| Hide Video Call | Hide video call button | `hideVideoCallButton: bool?` |
-| Hide Voice Call | Hide voice call button | `hideVoiceCallButton: bool?` |
-| Video Call Icon | Custom video call icon | `videoCallIcon: Icon?` |
-| Voice Call Icon | Custom voice call icon | `voiceCallIcon: Icon?` |
-| Outgoing Call Configuration | Configure outgoing call | `outgoingCallConfiguration: CometChatOutgoingCallConfiguration?` |
diff --git a/ui-kit/flutter/v6/call-features.mdx b/ui-kit/flutter/v6/call-features.mdx
deleted file mode 100644
index 916cd9bf9..000000000
--- a/ui-kit/flutter/v6/call-features.mdx
+++ /dev/null
@@ -1,173 +0,0 @@
----
-title: "Call"
----
-
-## Overview
-
-CometChat's Calls feature allows you to integrate one-on-one and group audio/video calling capabilities into your application. In V6, calling is built into the `cometchat_chat_uikit` package — no separate calls dependency needed.
-
-## Integration
-
-### Step 1: Add Dependency
-
-Since V6 is hosted on Cloudsmith, install via CLI:
-
-
-
-```bash
-dart pub add cometchat_chat_uikit:6.0.0-beta1 --hosted-url https://dart.cloudsmith.io/cometchat/cometchat/
-```
-
-
-
-Or add manually to `pubspec.yaml`:
-
-
-
-```yaml
-dependencies:
- cometchat_chat_uikit:
- hosted: https://dart.cloudsmith.io/cometchat/cometchat/
- version: 6.0.0-beta1
-```
-
-
-
-***
-
-### Step 2: Update build.gradle
-
-Set `minSdkVersion` to at least 24 in `android/app/build.gradle`:
-
-
-
-```gradle
-defaultConfig {
- minSdkVersion 24
- targetSdkVersion flutter.targetSdkVersion
- versionCode flutterVersionCode.toInteger()
- versionName flutterVersionName
-}
-```
-
-
-
-***
-
-### Step 3: Update iOS Podfile
-
-In `ios/Podfile`, set the minimum iOS version to 12:
-
-```
-platform :ios, '12.0'
-```
-
-***
-
-### Step 4: Modify UIKitSettings
-
-Activate calling features by setting `enableCalls` to `true` in UIKitSettings:
-
-
-
-```dart
-UIKitSettings uiKitSettings = (UIKitSettingsBuilder()
- ..subscriptionType = CometChatSubscriptionType.allUsers
- ..autoEstablishSocketConnection = true
- ..region = "REGION"
- ..appId = "APP_ID"
- ..authKey = "AUTH_KEY"
- ..enableCalls = true
- ..callingConfiguration = CallingConfiguration()
-).build();
-
-CometChatUIKit.init(uiKitSettings: uiKitSettings,
- onSuccess: (successMessage) {},
- onError: (e) {},
-);
-```
-
-
-
-To allow launching the Incoming Call screen from any widget, provide the navigator key:
-
-
-
-```dart
-MaterialApp(
- navigatorKey: CallNavigationContext.navigatorKey,
- home: YourHomeScreen(),
-)
-```
-
-
-
-### Listeners
-
-Register call listeners for top-level widgets:
-
-
-
-```dart
-class _YourClassNameState extends State with CallListener {
- @override
- void initState() {
- super.initState();
- CometChat.addCallListener(listenerId, this);
- }
-
- @override
- void dispose() {
- super.dispose();
- CometChat.removeCallListener(listenerId);
- }
-
- @override
- void onIncomingCallReceived(Call call) {
- debugPrint("onIncomingCallReceived");
- }
-
- @override
- void onOutgoingCallAccepted(Call call) {
- debugPrint("onOutgoingCallAccepted");
- }
-
- @override
- void onOutgoingCallRejected(Call call) {
- debugPrint("onOutgoingCallRejected");
- }
-
- @override
- void onIncomingCallCancelled(Call call) {
- debugPrint("onIncomingCallCancelled");
- }
-
- @override
- void onCallEndedMessageReceived(Call call) {
- debugPrint("onCallEndedMessageReceived");
- }
-
- @override
- Widget build(BuildContext context) {
- return const Placeholder();
- }
-}
-```
-
-
-
-***
-
-## Features
-
-### Incoming Call
-
-The Incoming Call widget lets users receive real-time audio and video calls. When a call is received, it displays caller information with accept/reject options.
-
-### Outgoing Call
-
-The Outgoing Call widget manages the outgoing call process. It displays recipient information and call status, and automatically transitions to the ongoing call screen when accepted.
-
-### Call Logs
-
-The [Call Logs](/ui-kit/flutter/v6/call-logs) widget displays records of call events including caller, time, and duration.
diff --git a/ui-kit/flutter/v6/call-logs.mdx b/ui-kit/flutter/v6/call-logs.mdx
deleted file mode 100644
index 6e68801d5..000000000
--- a/ui-kit/flutter/v6/call-logs.mdx
+++ /dev/null
@@ -1,628 +0,0 @@
----
-title: "Call Logs"
-description: "Scrollable list of call history showing caller info, call type, status, and timestamps."
----
-
-`CometChatCallLogs` renders a scrollable list of call history with call type indicators (audio/video), call status (incoming/outgoing/missed), timestamps, and pagination support.
-
-
-
-
-
-The `CometChatCallLogs` widget is composed of the following base widgets:
-
-| Widget | Description |
-|---|---|
-| CometChatListBase | Container widget with title, background options, and list integration |
-| CometChatListItem | Displays call log data on a card with title and subtitle |
-
----
-
-## Where It Fits
-
-`CometChatCallLogs` is a list component. It renders call history and emits the selected `CallLog` via `onItemClick`. Wire it to a detail screen or use `onCallLogIconClicked` to initiate a call directly from the log.
-
-
-
-```dart
-CometChatCallLogs(
- onItemClick: (callLog) {
- // Navigate to call log details or open chat
- Navigator.push(
- context,
- MaterialPageRoute(
- builder: (context) => CometChatCallLogDetails(callLog: callLog),
- ),
- );
- },
-)
-```
-
-
-
----
-
-## Quick Start
-
-Using Navigator:
-
-
-
-```dart
-Navigator.push(context, MaterialPageRoute(builder: (context) => const CometChatCallLogs()));
-```
-
-
-
-Embedding as a widget:
-
-
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_calls_uikit.dart';
-import 'package:flutter/material.dart';
-
-class CallLogsExample extends StatefulWidget {
- const CallLogsExample({super.key});
-
- @override
- State createState() => _CallLogsExampleState();
-}
-
-class _CallLogsExampleState extends State {
- @override
- Widget build(BuildContext context) {
- return const Scaffold(
- body: SafeArea(child: CometChatCallLogs()),
- );
- }
-}
-```
-
-
-
-Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()`, a user logged in, and the Calls UIKit dependency added. See [Call Features](/ui-kit/flutter/call-features) for setup.
-
----
-
-## Filtering Call Logs
-
-Pass a `CallLogRequestBuilder` to control what loads:
-
-
-
-```dart
-CometChatCallLogs(
- callLogsRequestBuilder: CallLogRequestBuilder()
- ..limit = 10
- ..hasRecording = true,
-)
-```
-
-
-
-### Filter Recipes
-
-| Recipe | Builder property |
-|---|---|
-| Limit per page | `..limit = 10` |
-| Audio calls only | `..callType = "audio"` |
-| Video calls only | `..callType = "video"` |
-| Missed calls only | `..callStatus = "missed"` |
-| Incoming calls only | `..callDirection = "incoming"` |
-| Outgoing calls only | `..callDirection = "outgoing"` |
-| Calls with recording | `..hasRecording = true` |
-| Calls for specific user | `..uid = "user_uid"` |
-| Calls for specific group | `..guid = "group_guid"` |
-| Call category (call/meet) | `..callCategory = "call"` |
-
-### Filter Properties
-
-| Property | Type | Description |
-|---|---|---|
-| `authToken` | `String?` | Authentication token |
-| `callCategory` | `String?` | Category: `"call"` or `"meet"` |
-| `callDirection` | `String?` | Direction: `"incoming"` or `"outgoing"` |
-| `callStatus` | `String?` | Status: `"ongoing"`, `"busy"`, `"rejected"`, `"cancelled"`, `"ended"`, `"missed"`, `"initiated"`, `"unanswered"` |
-| `callType` | `String?` | Type: `"audio"`, `"video"`, or `"audio/video"` |
-| `guid` | `String?` | Group ID filter |
-| `hasRecording` | `bool` | Filter calls with recordings |
-| `limit` | `int` | Max results per request |
-| `uid` | `String?` | User ID filter |
-
----
-
-## Actions and Events
-
-### Callback Methods
-
-#### `onItemClick`
-
-Fires when a call log item is tapped. Primary navigation hook.
-
-
-
-```dart
-CometChatCallLogs(
- onItemClick: (callLog) {
- // Navigate to call details or chat
- },
-)
-```
-
-
-
-#### `onItemLongPress`
-
-Fires when a call log item is long-pressed, allowing additional actions.
-
-
-
-```dart
-CometChatCallLogs(
- onItemLongPress: (CallLog callLog) {
- // Show context menu
- },
-)
-```
-
-
-
-#### `onBack`
-
-Fires when the user presses the back button in the app bar.
-
-
-
-```dart
-CometChatCallLogs(
- onBack: () {
- Navigator.pop(context);
- },
-)
-```
-
-
-
-#### `onError`
-
-Fires on internal errors (network failure, SDK exception).
-
-
-
-```dart
-CometChatCallLogs(
- onError: (e) {
- debugPrint("Error: ${e.message}");
- },
-)
-```
-
-
-
-#### `onLoad`
-
-Fires when the list is successfully fetched and loaded.
-
-
-
-```dart
-CometChatCallLogs(
- onLoad: (list) {
- debugPrint("Loaded ${list.length} call logs");
- },
-)
-```
-
-
-
-#### `onEmpty`
-
-Fires when the list is empty after loading.
-
-
-
-```dart
-CometChatCallLogs(
- onEmpty: () {
- debugPrint("No call logs found");
- },
-)
-```
-
-
-
-#### `onCallLogIconClicked`
-
-Fires when the call icon on a call log item is tapped, typically used to initiate a call back.
-
-
-
-```dart
-CometChatCallLogs(
- onCallLogIconClicked: (CallLog callLog) {
- // Initiate call back to this contact
- },
-)
-```
-
-
-
-### Events
-
-The `CometChatCallLogs` widget does not emit global events.
-
----
-
-## Functionality
-
-| Property | Type | Default | Description |
-|---|---|---|---|
-| `showBackButton` | `bool?` | `true` | Toggle back button visibility |
-| `hideAppbar` | `bool?` | `false` | Toggle app bar visibility |
-| `backButton` | `Widget?` | `null` | Custom back button widget |
-| `datePattern` | `String?` | `null` | Format pattern for date display |
-| `dateSeparatorPattern` | `String?` | `null` | Format pattern for date separator |
-| `hideSeparator` | `bool` | `false` | Hide separator between items |
-| `emptyStateText` | `String?` | `null` | Text for empty state |
-| `errorStateText` | `String?` | `null` | Text for error state |
-| `incomingAudioCallIcon` | `Icon?` | `null` | Custom icon for incoming audio calls |
-| `incomingVideoCallIcon` | `Icon?` | `null` | Custom icon for incoming video calls |
-| `outgoingAudioCallIcon` | `Icon?` | `null` | Custom icon for outgoing audio calls |
-| `outgoingVideoCallIcon` | `Icon?` | `null` | Custom icon for outgoing video calls |
-| `missedAudioCallIcon` | `Icon?` | `null` | Custom icon for missed audio calls |
-| `missedVideoCallIcon` | `Icon?` | `null` | Custom icon for missed video calls |
-| `infoIconUrl` | `String?` | `null` | URL for the info icon |
-| `loadingIconUrl` | `String?` | `null` | URL for the loading icon |
-
-**Example — custom back button:**
-
-
-
-```dart
-CometChatCallLogs(
- backButton: Icon(Icons.arrow_back_ios, color: Color(0xFF6851D6)),
-)
-```
-
-
-
-
-
-
----
-
-## Custom View Slots
-
-### List Item View
-
-Replace the entire list item row with a custom widget.
-
-
-
-```dart
-CometChatCallLogs(
- listItemView: (callLog, context) {
- final status = getCallStatus(context, callLog, CometChatUIKit.loggedInUser);
- IconData icon = Icons.call;
- Color? color;
- Color? textColor;
-
- if (status == "Incoming Call") {
- icon = Icons.phone_callback_rounded;
- color = Color(0xFF6852D6);
- } else if (status == "Outgoing Call") {
- icon = Icons.phone_forwarded;
- color = Color(0xFF6852D6);
- } else if (status == "Missed Call") {
- icon = Icons.phone_missed;
- color = Colors.red;
- textColor = Colors.red;
- }
-
- String name = _getCallLogName(callLog);
- String formattedDate = DateFormat('d MMM, hh:mm a').format(
- DateTime.fromMillisecondsSinceEpoch((callLog.initiatedAt ?? 0) * 1000),
- );
-
- return ListTile(
- leading: CircleAvatar(
- backgroundColor: Color(0xFFEDEAFA),
- child: Icon(icon, color: color, size: 24),
- ),
- title: Text(name, style: TextStyle(
- fontSize: 16, fontWeight: FontWeight.w500,
- color: textColor ?? Color(0xFF141414),
- )),
- subtitle: Text(status, style: TextStyle(
- color: Color(0xFF727272), fontSize: 14,
- )),
- trailing: Text(formattedDate, style: TextStyle(
- color: Color(0xFF727272), fontSize: 14,
- )),
- );
- },
-)
-```
-
-
-```dart
-static String getCallStatus(BuildContext context, CallLog callLog, User? loggedInUser) {
- String callMessageText = "";
- if (callLog.receiverType == ReceiverTypeConstants.user) {
- CallUser initiator = callLog.initiator as CallUser;
- bool isMe = initiator.uid == loggedInUser?.uid;
-
- switch (callLog.status) {
- case CallStatusConstants.initiated:
- callMessageText = isMe ? "Outgoing Call" : "Incoming Call";
- break;
- case CallStatusConstants.ongoing:
- callMessageText = "Call Accepted";
- break;
- case CallStatusConstants.ended:
- callMessageText = "Call Ended";
- break;
- case CallStatusConstants.unanswered:
- case CallStatusConstants.cancelled:
- case CallStatusConstants.rejected:
- case CallStatusConstants.busy:
- callMessageText = isMe ? "Call ${callLog.status}" : "Missed Call";
- break;
- }
- }
- return callMessageText;
-}
-```
-
-
-
-
-
-
-
-### Title View
-
-Replace the caller name / title text.
-
-
-
-```dart
-CometChatCallLogs(
- titleView: (callLog, context) {
- return Text(
- _getCallLogName(callLog),
- style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
- );
- },
-)
-```
-
-
-
-### Leading View
-
-Replace the avatar / left section.
-
-
-
-```dart
-CometChatCallLogs(
- leadingView: (callLog, context) {
- return CircleAvatar(
- backgroundColor: Color(0xFFEDEAFA),
- child: Icon(Icons.call, color: Color(0xFF6852D6)),
- );
- },
-)
-```
-
-
-
-### Subtitle View
-
-Replace the call status text below the name.
-
-
-
-```dart
-CometChatCallLogs(
- subTitleView: (callLog, context) {
- return Row(
- children: [
- _getCallIcon(callLog, CometChatUIKit.loggedInUser),
- SizedBox(width: 4),
- Text(
- getCallStatus(context, callLog, CometChatUIKit.loggedInUser),
- style: TextStyle(color: Color(0xFF727272), fontSize: 14),
- ),
- ],
- );
- },
-)
-```
-
-
-```dart
-static Widget _getCallIcon(CallLog callLog, User? loggedInUser) {
- bool isMe = (callLog.initiator as CallUser?)?.uid == loggedInUser?.uid;
-
- Widget incoming = Icon(Icons.call_received_outlined, color: Colors.red, size: 16);
- Widget outgoing = Icon(Icons.call_made_outlined, color: Color(0xFF09C26F), size: 16);
- Widget missed = Icon(Icons.call_received_outlined, color: Colors.red, size: 16);
-
- switch (callLog.status) {
- case CallStatusConstants.initiated:
- case CallStatusConstants.ongoing:
- case CallStatusConstants.ended:
- return isMe ? outgoing : incoming;
- case CallStatusConstants.unanswered:
- case CallStatusConstants.cancelled:
- case CallStatusConstants.rejected:
- case CallStatusConstants.busy:
- return isMe ? outgoing : missed;
- default:
- return const SizedBox();
- }
-}
-```
-
-
-
-
-
-
-
-### Trailing View
-
-Replace the timestamp / right section.
-
-
-
-```dart
-CometChatCallLogs(
- trailingView: (context, callLog) {
- String formattedDate = DateFormat('d MMM, hh:mm a').format(
- DateTime.fromMillisecondsSinceEpoch((callLog.initiatedAt ?? 0) * 1000),
- );
- return Text(
- formattedDate,
- style: TextStyle(color: Color(0xFF727272), fontSize: 14),
- );
- },
-)
-```
-
-
-
-
-
-
-
-### State Views
-
-
-
-```dart
-CometChatCallLogs(
- emptyStateView: (context) => Center(child: Text("No call logs yet")),
- errorStateView: (context) => Center(child: Text("Something went wrong")),
- loadingStateView: (context) => Center(child: CircularProgressIndicator()),
-)
-```
-
-
-
----
-
-## Menu Options
-
-
-
-```dart
-// Replace all options
-CometChatCallLogs(
- setOptions: (callLog, controller, context) {
- return [
- CometChatOption(
- id: "callback",
- iconWidget: Icon(Icons.call),
- title: "Call Back",
- onClick: () {
- // Initiate call back
- },
- ),
- ];
- },
-)
-
-// Append to defaults
-CometChatCallLogs(
- addOptions: (callLog, controller, context) {
- return [
- CometChatOption(
- id: "block",
- iconWidget: Icon(Icons.block),
- title: "Block Number",
- onClick: () {
- // Block this contact
- },
- ),
- ];
- },
-)
-```
-
-
-
----
-
-## Style
-
-
-
-```dart
-CometChatCallLogs(
- callLogsStyle: CometChatCallLogsStyle(
- titleTextColor: Color(0xFFF76808),
- separatorColor: Color(0xFFF76808),
- avatarStyle: CometChatAvatarStyle(
- borderRadius: BorderRadius.circular(8),
- backgroundColor: Color(0xFFFBAA75),
- ),
- ),
-)
-```
-
-
-
-
-
-
-
----
-
-## Configurations
-
-### Outgoing Call
-
-Customize the outgoing call component that appears when a call is initiated from a call log:
-
-
-
-```dart
-CometChatCallLogs(
- outgoingCallConfiguration: OutgoingCallConfiguration(
- subtitle: "Outgoing Call",
- outgoingCallStyle: OutgoingCallStyle(
- background: Color(0xFFE4EBF5),
- ),
- ),
-)
-```
-
-
-
-
-
-
-All exposed properties of `OutgoingCallConfiguration` can be found under [Outgoing Call](/ui-kit/flutter/outgoing-call).
-
----
-
-## Next Steps
-
-
-
- Build a call log details screen
-
-
- Add voice and video call buttons
-
-
- Detailed styling reference
-
-
- Browse recent conversations
-
-
diff --git a/ui-kit/flutter/v6/color-resources.mdx b/ui-kit/flutter/v6/color-resources.mdx
deleted file mode 100644
index a66658fd0..000000000
--- a/ui-kit/flutter/v6/color-resources.mdx
+++ /dev/null
@@ -1,108 +0,0 @@
----
-title: "Color Resources"
----
-
-## Introducing CometChatColorPalette
-
-The `CometChatColorPalette` class allows you to customize the colors used throughout your app. It works the same way in V6 as in V5 — you assign it to the `extensions` property of your `ThemeData`.
-
-Here's what you can customize:
-
-* Primary Colors — Main color scheme of your app
-* Neutral Colors — Balanced base for visuals
-* Alert Colors — Informative, warning, success, and error messages
-* Background Colors — Background shades for different areas
-* Text Colors — Text element colors for readability
-* Border Colors — Borders for buttons and cards
-* Icon Colors — App icon colors
-* Button Colors — Button background and text colors
-* Shimmer Colors — Loading animation colors
-
-### Light Mode
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatColorPalette(
- textSecondary: Color(0xFF727272),
- background1: Color(0xFFFFFFFF),
- textPrimary: Color(0xFF141414),
- borderLight: Color(0xFFF5F5F5),
- borderDark: Color(0xFFDCDCDC),
- iconSecondary: Color(0xFFA1A1A1),
- success: Color(0xFF09C26F),
- iconHighlight: Color(0xFF6852D6),
- extendedPrimary500: Color(0xFFAA9EE8),
- warning: Color(0xFFFAAB00),
- messageSeen: Color(0xFF56E8A7),
- neutral900: Color(0xFF141414),
- neutral600: Color(0xFF727272),
- neutral300: Color(0xFFE8E8E8),
- primary: Color(0xFF6852D6),
- ),
- ],
-)
-```
-
-
-
-### Dark Mode
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatColorPalette(
- textSecondary: Color(0xFF989898),
- background1: Color(0xFF1A1A1A),
- textPrimary: Color(0xFFFFFFFF),
- borderLight: Color(0xFF272727),
- iconSecondary: Color(0xFF858585),
- success: Color(0xFF0B9F5D),
- iconHighlight: Color(0xFF6852D6),
- extendedPrimary500: Color(0xFF3E3180),
- warning: Color(0xFFD08D04),
- messageSeen: Color(0xFF56E8A7),
- neutral900: Color(0xFFFFFFFF),
- neutral600: Color(0xFF989898),
- neutral300: Color(0xFF383838),
- primary: Color(0xFF6852D6),
- ),
- ],
-)
-```
-
-
-
-### Custom Colors
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatColorPalette(
- textSecondary: Color(0xFF727272),
- background1: Color(0xFFFFFFFF),
- textPrimary: Color(0xFF141414),
- borderLight: Color(0xFFF5F5F5),
- borderDark: Color(0xFFDCDCDC),
- iconSecondary: Color(0xFFA1A1A1),
- success: Color(0xFF09C26F),
- iconHighlight: Color(0xFFF76808),
- extendedPrimary500: Color(0xFFFBAA75),
- warning: Color(0xFFFAAB00),
- messageSeen: Color(0xFF56E8A7),
- neutral900: Color(0xFF141414),
- neutral600: Color(0xFF727272),
- neutral300: Color(0xFFE8E8E8),
- primary: Color(0xFFF76808),
- ),
- ],
-)
-```
-
-
diff --git a/ui-kit/flutter/v6/component-styling.mdx b/ui-kit/flutter/v6/component-styling.mdx
deleted file mode 100644
index e917226dc..000000000
--- a/ui-kit/flutter/v6/component-styling.mdx
+++ /dev/null
@@ -1,562 +0,0 @@
----
-title: "Component Styling"
-sidebarTitle: "Component Styling"
-description: "Customize visual appearance using ThemeData extensions or component-level style objects."
----
-
-The Flutter UI Kit uses `ThemeExtension` for styling. You can apply styles globally via `ThemeData` or pass style objects directly to components.
-
-## Two Approaches
-
-### 1. Global Theming via ThemeData
-
-Apply styles across your entire app by adding `ThemeExtension` objects to your `MaterialApp` theme:
-
-
-
-```dart
-MaterialApp(
- theme: ThemeData(
- extensions: [
- CometChatOutgoingMessageBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- ),
- CometChatIncomingMessageBubbleStyle(
- backgroundColor: Color(0xFFFEEDE1),
- ),
- CometChatActionBubbleStyle(
- textStyle: TextStyle(color: Color(0xFFF76808)),
- backgroundColor: Color(0xFFFEEDE1),
- ),
- ],
- ),
- home: YourApp(),
-)
-```
-
-
-
-### 2. Component-Level Styles
-
-Pass style objects directly to a component. These override global theme values:
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- style: CometChatMessageListStyle(
- backgroundColor: Color(0xFFFEEDE1),
- outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- ),
- incomingMessageBubbleStyle: CometChatIncomingMessageBubbleStyle(
- backgroundColor: Colors.white,
- ),
- ),
-)
-```
-
-
-
-## Style Precedence
-
-```
-Component style prop > ThemeData extension > Default theme
-```
-
----
-
-## Style Classes by Component
-
-| Component | Style Class |
-|---|---|
-| `CometChatConversations` | `CometChatConversationsStyle` |
-| `CometChatUsers` | `CometChatUsersStyle` |
-| `CometChatGroups` | `CometChatGroupsStyle` |
-| `CometChatGroupMembers` | `CometChatGroupMembersStyle` |
-| `CometChatMessageList` | `CometChatMessageListStyle` |
-| `CometChatMessageComposer` | `CometChatMessageComposerStyle` |
-| `CometChatMessageHeader` | `CometChatMessageHeaderStyle` |
-
-## Message Bubble Styles
-
-The message list style contains nested styles for incoming and outgoing bubbles:
-
-
-
-```dart
-CometChatMessageListStyle(
- outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
- textBubbleStyle: CometChatTextBubbleStyle(...),
- imageBubbleStyle: CometChatImageBubbleStyle(...),
- videoBubbleStyle: CometChatVideoBubbleStyle(...),
- audioBubbleStyle: CometChatAudioBubbleStyle(...),
- fileBubbleStyle: CometChatFileBubbleStyle(...),
- deletedBubbleStyle: CometChatDeletedBubbleStyle(...),
- pollsBubbleStyle: CometChatPollsBubbleStyle(...),
- stickerBubbleStyle: CometChatStickerBubbleStyle(...),
- collaborativeWhiteboardBubbleStyle: CometChatCollaborativeBubbleStyle(...),
- collaborativeDocumentBubbleStyle: CometChatCollaborativeBubbleStyle(...),
- linkPreviewBubbleStyle: CometChatLinkPreviewBubbleStyle(...),
- videoCallBubbleStyle: CometChatCallBubbleStyle(...),
- ),
- incomingMessageBubbleStyle: CometChatIncomingMessageBubbleStyle(
- // Same nested style structure
- ),
-)
-```
-
-
-
-See [Message Bubble Styling](/ui-kit/flutter/v6/message-bubble-styling) for per-bubble-type examples.
-
----
-
-## Component Style Examples
-
-### Conversations
-
-
-
-```dart
-ThemeData(
- fontFamily: 'Times New Roman',
- extensions: [
- CometChatConversationsStyle(
- avatarStyle: CometChatAvatarStyle(
- borderRadius: BorderRadius.circular(8),
- backgroundColor: Color(0xFFFBAA75),
- ),
- badgeStyle: CometChatBadgeStyle(
- backgroundColor: Color(0xFFF76808),
- ),
- ),
- ],
-)
-```
-
-
-
-### Message List
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatMessageListStyle(
- backgroundColor: Color(0xFFFEEDE1),
- outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- ),
- ),
- ],
-)
-```
-
-
-
-### Message Composer
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatMessageComposerStyle(
- sendButtonIconBackgroundColor: Color(0xFFF76808),
- secondaryButtonIconColor: Color(0xFFF76808),
- auxiliaryButtonIconColor: Color(0xFFF76808),
- ),
- ],
-)
-```
-
-
-
-### Message Header
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatMessageHeaderStyle(
- avatarStyle: CometChatAvatarStyle(
- backgroundColor: Color(0xFFFBAA75),
- borderRadius: BorderRadius.circular(6.67),
- ),
- ),
- ],
-)
-```
-
-
-
-### Users
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatUsersStyle(
- avatarStyle: CometChatAvatarStyle(
- borderRadius: BorderRadius.circular(8),
- backgroundColor: Color(0xFFFBAA75),
- ),
- titleTextColor: Color(0xFFF76808),
- separatorColor: Color(0xFFF76808),
- backgroundColor: Color(0xFFFFF9F5),
- ),
- ],
-)
-```
-
-
-
-### Groups
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatGroupsStyle(
- avatarStyle: CometChatAvatarStyle(
- borderRadius: BorderRadius.circular(8),
- backgroundColor: Color(0xFFFBAA75),
- ),
- titleTextColor: Color(0xFFF76808),
- separatorColor: Color(0xFFF76808),
- backgroundColor: Color(0xFFFFF9F5),
- ),
- ],
-)
-```
-
-
-
-### Group Members
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatGroupMembersStyle(
- avatarStyle: CometChatAvatarStyle(
- borderRadius: BorderRadius.circular(8),
- backgroundColor: Color(0xFFFBAA75),
- ),
- titleStyle: TextStyle(color: Color(0xFFF76808)),
- separatorColor: Color(0xFFF76808),
- ownerMemberScopeBackgroundColor: Color(0xFFF76808),
- adminMemberScopeBackgroundColor: Color(0xFFFEEDE1),
- adminMemberScopeBorder: Border.all(color: Color(0xFFF76808)),
- adminMemberScopeTextColor: Color(0xFFF76808),
- ),
- ],
-)
-```
-
-
-
-### AI Assistant Chat History
-
-
-
-```dart
-final ccColor = CometChatThemeHelper.getColorPalette(context);
-CometChatAIAssistantChatHistory(
- user: user,
- style: CometChatAIAssistantChatHistoryStyle(
- backgroundColor: const Color(0xFFFFFAF6),
- headerBackgroundColor: const Color(0xFFFFFAF6),
- headerTitleTextColor: ccColor.textPrimary,
- ),
-)
-```
-
-
-
----
-
-## Base Component Styles
-
-
-### Avatar
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatAvatarStyle(
- borderRadius: BorderRadius.circular(8),
- backgroundColor: Color(0xFFFBAA75),
- ),
- ],
-)
-```
-
-
-
-### Status Indicator
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatStatusIndicatorStyle(
- backgroundColor: Color(0xFFFFAB00),
- borderRadius: BorderRadius.circular(2),
- ),
- ],
-)
-```
-
-
-
-### Badge
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatBadgeStyle(
- borderRadius: BorderRadius.circular(4),
- backgroundColor: Color(0xFFF44649),
- ),
- ],
-)
-```
-
-
-
-### Receipts
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatMessageReceiptStyle(
- readIconColor: Color(0xFFFFAB00),
- ),
- ],
-)
-```
-
-
-
-### Media Recorder
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatMediaRecorderStyle(
- recordIndicatorBackgroundColor: Color(0xFFF44649),
- recordIndicatorBorderRadius: BorderRadius.circular(20),
- pauseButtonBorderRadius: BorderRadius.circular(8),
- deleteButtonBorderRadius: BorderRadius.circular(8),
- stopButtonBorderRadius: BorderRadius.circular(8),
- ),
- ],
-)
-```
-
-
-
-### Reactions
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatReactionsStyle(
- borderRadius: BorderRadius.circular(8),
- ),
- ],
-)
-```
-
-
-
-### Reaction List
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatReactionListStyle(
- activeTabTextColor: Color(0xFFF76808),
- activeTabIndicatorColor: Color(0xFFF76808),
- ),
- ],
-)
-```
-
-
-
-### Conversation Starter
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatAIConversationStarterStyle(
- backgroundColor: Color(0xFFFEEDE1),
- border: Border.all(color: Color(0xFFFBBB90)),
- ),
- ],
-)
-```
-
-
-
-### Conversation Summary
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatAIConversationSummaryStyle(
- backgroundColor: Color(0xFFFEEDE1),
- titleStyle: TextStyle(color: Color(0xFFF76808)),
- ),
- ],
-)
-```
-
-
-
-### Smart Replies
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatAISmartRepliesStyle(
- backgroundColor: Color(0xFFFEEDE1),
- titleStyle: TextStyle(color: Color(0xFFF76808)),
- itemBackgroundColor: Color(0xFFFFF9F5),
- itemBorder: Border.all(color: Color(0xFFFBBB90)),
- ),
- ],
-)
-```
-
-
-
-### Message Information
-
-
-
-```dart
-ThemeData(
- fontFamily: "Times New Roman",
- extensions: [
- CometChatOutgoingMessageBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- ),
- CometChatMessageInformationStyle(
- backgroundHighLightColor: Color(0xFFFEEDE1),
- messageReceiptStyle: CometChatMessageReceiptStyle(
- readIconColor: Color(0xFFF76808),
- ),
- ),
- ],
-)
-```
-
-
-
-### Message Option Sheet
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatMessageOptionSheetStyle(
- backgroundColor: Color(0xFFFEEDE1),
- iconColor: Color(0xFFF76808),
- ),
- ],
-)
-```
-
-
-
-### Attachment Option Sheet
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatAttachmentOptionSheetStyle(
- backgroundColor: Color(0xFFFEEDE1),
- iconColor: Color(0xFFF76808),
- ),
- ],
-)
-```
-
-
-
-### AI Option Sheet
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatAiOptionSheetStyle(
- backgroundColor: Color(0xFFFFF9F5),
- iconColor: Color(0xFFF76808),
- ),
- ],
-)
-```
-
-
-
-### Mentions
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatMentionsStyle(
- mentionSelfTextBackgroundColor: Color(0xFFF76808),
- mentionTextBackgroundColor: Colors.white,
- mentionTextColor: Colors.black,
- mentionSelfTextColor: Colors.white,
- ),
- ],
-)
-```
-
-
-
----
-
-## Related
-
-- [Message Bubble Styling](/ui-kit/flutter/v6/message-bubble-styling) — Per-bubble-type style examples.
-- [Color Resources](/ui-kit/flutter/v6/color-resources) — Color palette customization.
-- [Theme Introduction](/ui-kit/flutter/v6/theme-introduction) — Theme system overview (ColorPalette, Typography, Spacing).
-- [Customization Overview](/ui-kit/flutter/v6/customization-overview) — All customization categories.
\ No newline at end of file
diff --git a/ui-kit/flutter/v6/components-overview.mdx b/ui-kit/flutter/v6/components-overview.mdx
deleted file mode 100644
index a643de7ee..000000000
--- a/ui-kit/flutter/v6/components-overview.mdx
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: "Overview"
----
-
-CometChat's **UI Kit V6** is a set of pre-built UI Widgets that allows you to easily craft an in-app chat with all the essential messaging features, built on clean architecture with BLoC state management.
-
-## Type of Widget
-
-UI Widgets based on behaviour and functionality can be categorized into two types: Base Widget and Widget.
-
-### Base Widget
-
-Base Widgets form the building blocks of your app's user interface (UI). They focus solely on presenting visual elements based on input data, without handling any business logic. These Widgets provide the foundational appearance and behavior for your UI.
-
-### Widget
-
-Widgets build upon Base Widgets by incorporating business logic via BLoC pattern. They not only render UI elements but also manage data loading through use cases and repositories, execute specific actions, and respond to events. This combination of visual presentation and functional capabilities makes Widgets essential for creating dynamic and interactive UIs.
-
-> **V6 Note:** V6 does not have Composite Widgets like `CometChatMessages` or `CometChatConversationsWithMessages`. Instead, you compose the UI yourself using individual Widgets (`CometChatMessageList`, `CometChatMessageComposer`, `CometChatMessageHeader`). This gives you full control over layout and behavior.
-
-## Architecture
-
-Each Widget in V6 follows clean architecture internally:
-
-| Layer | Purpose | Example |
-|---|---|---|
-| `bloc/` | State management (events, states, BLoC) | `ConversationsBloc`, `ConversationsEvent`, `ConversationsState` |
-| `data/` | Data sources and repository implementations | `ConversationsRemoteDatasource`, `ConversationsRepositoryImpl` |
-| `domain/` | Use cases and repository interfaces | `GetConversationsUseCase`, `ConversationsRepository` |
-| `di/` | Dependency injection | `ConversationsServiceLocator` |
-| `widgets/` | Decomposed sub-widgets | `ConversationsList`, `ConversationsEmptyView` |
-
-## Actions
-
-Actions direct the operational behavior of a component. They are split into two categories: Predefined Actions and User-Defined Actions.
-
-### Predefined Actions
-
-These are actions inherently programmed into a UI component. They execute automatically in response to user interaction, without needing any additional user input.
-
-### User-Defined Actions
-
-These are actions that must be explicitly specified by the user. They provide adaptability and allow for the creation of custom behaviors that align with the individual needs of the application.
-
-To customize the behavior of a component, actions must be overridden by the user. This provides the user with control over how the component responds to specific events or interactions.
-
-## Events
-
-Events allow for a decoupled, flexible architecture where different parts of the application can interact without having to directly reference each other. This makes it easier to create complex, interactive experiences, as well as to extend and customize the functionality provided by the CometChat UI Kit.
-
-Widgets have the ability to emit events. These events are dispatched in response to certain changes or user interactions within the component. By emitting events, these Widgets allow other parts of the application to react to changes or interactions, thus enabling dynamic and interactive behavior within the application.
-
-## Configurations
-
-Configurations offer the ability to customize the properties of each individual component. Each Widget has its own set of properties that can be configured, allowing for fine-tuned customization to tailor behavior and appearance to match specific requirements in a granular manner.
diff --git a/ui-kit/flutter/v6/conversations.mdx b/ui-kit/flutter/v6/conversations.mdx
deleted file mode 100644
index edad71b1b..000000000
--- a/ui-kit/flutter/v6/conversations.mdx
+++ /dev/null
@@ -1,622 +0,0 @@
----
-title: "Conversations"
-description: "Scrollable list of recent one-on-one and group conversations for the logged-in user."
----
-
-`CometChatConversations` renders a scrollable list of recent conversations with real-time updates for new messages, typing indicators, read receipts, and user presence.
-
----
-
-## Where It Fits
-
-`CometChatConversations` is a list component. It renders recent conversations and emits the selected `Conversation` via `onItemTap`. Wire it to `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer` to build a standard chat layout.
-
-
-
-```dart
-CometChatConversations(
- onItemTap: (conversation) {
- final entity = conversation.conversationWith;
- if (entity is User) {
- navigateToUserChat(entity);
- } else if (entity is Group) {
- navigateToGroupChat(entity);
- }
- },
-)
-```
-
-
-
----
-
-## Quick Start
-
-Using Navigator:
-
-
-
-```dart
-Navigator.push(context, MaterialPageRoute(builder: (context) => const CometChatConversations()));
-```
-
-
-
-Embedding as a widget:
-
-
-
-```dart
-@override
-Widget build(BuildContext context) {
- return Scaffold(
- body: SafeArea(
- child: CometChatConversations(),
- ),
- );
-}
-```
-
-
-
-Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()`, a user logged in, and the UI Kit dependency added.
-
----
-
-## Filtering Conversations
-
-Pass a `ConversationsRequestBuilder` to control what loads:
-
-
-
-```dart
-CometChatConversations(
- conversationsRequestBuilder: ConversationsRequestBuilder()
- ..conversationType = "user"
- ..limit = 10,
-)
-```
-
-
-
-### Filter Recipes
-
-| Recipe | Builder property |
-| --- | --- |
-| Only user conversations | `..conversationType = "user"` |
-| Only group conversations | `..conversationType = "group"` |
-| Limit per page | `..limit = 10` |
-| With tags | `..tags = ["vip"]` and `..withTags = true` |
-| With user and group tags | `..withUserAndGroupTags = true` |
-
----
-
-## Actions and Events
-
-### Callback Methods
-
-#### `onItemTap`
-
-Fires when a conversation row is tapped. Primary navigation hook.
-
-
-
-```dart
-CometChatConversations(
- onItemTap: (conversation) {
- // Navigate to chat screen
- },
-)
-```
-
-
-
-#### `onItemLongPress`
-
-Fires when a conversation row is long-pressed. By default shows a delete overlay (when `deleteConversationOptionVisibility` is true).
-
-
-
-```dart
-CometChatConversations(
- onItemLongPress: (conversation) {
- // Custom long press behavior
- },
-)
-```
-
-
-
-#### `onBack`
-
-Fires when the user presses the back button in the app bar.
-
-
-
-```dart
-CometChatConversations(
- onBack: () {
- Navigator.pop(context);
- },
-)
-```
-
-
-
-#### `onSelection`
-
-Fires when conversations are selected/deselected in multi-select mode.
-
-
-
-```dart
-CometChatConversations(
- selectionMode: SelectionMode.multiple,
- onSelection: (selectedConversations) {
- // Handle selected conversations
- },
-)
-```
-
-
-
-#### `onError`
-
-Fires on internal errors (network failure, auth issue, SDK exception).
-
-
-
-```dart
-CometChatConversations(
- onError: (e) {
- debugPrint("Error: ${e.message}");
- },
-)
-```
-
-
-
-#### `onLoad`
-
-Fires when the list is successfully fetched and loaded.
-
-
-
-```dart
-CometChatConversations(
- onLoad: (conversations) {
- debugPrint("Loaded ${conversations.length}");
- },
-)
-```
-
-
-
-#### `onEmpty`
-
-Fires when the list is empty after loading.
-
-
-
-```dart
-CometChatConversations(
- onEmpty: () {
- debugPrint("No conversations");
- },
-)
-```
-
-
-
-### Global Events
-
-The component emits events via `CometChatConversationEvents` that can be subscribed to from anywhere:
-
-
-
-```dart
-class _YourScreenState extends State with CometChatConversationEventListener {
-
- @override
- void initState() {
- super.initState();
- CometChatConversationEvents.addConversationListListener("listenerId", this);
- }
-
- @override
- void dispose() {
- CometChatConversationEvents.removeConversationListListener("listenerId");
- super.dispose();
- }
-
- @override
- void ccConversationDeleted(Conversation conversation) {
- // Handle conversation deleted
- }
-}
-```
-
-
-
-### SDK Events (Real-Time, Automatic)
-
-The component listens to these SDK events internally. No manual setup needed.
-
-| SDK Listener | Internal behavior |
-| --- | --- |
-| `onTextMessageReceived` / `onMediaMessageReceived` / `onCustomMessageReceived` | Moves conversation to top, updates last message and unread count |
-| `onTypingStarted` / `onTypingEnded` | Shows/hides typing indicator in subtitle |
-| `onMessagesDelivered` / `onMessagesRead` | Updates receipt indicators |
-| `onUserOnline` / `onUserOffline` | Updates presence status dot |
-| `onGroupMemberJoined` / `onGroupMemberLeft` / `onGroupMemberKicked` / `onGroupMemberBanned` | Updates group conversation metadata |
-| Connection reconnected | Triggers silent refresh to sync missed messages |
-
----
-
-## Functionality
-
-| Property | Type | Default | Description |
-| --- | --- | --- | --- |
-| `title` | `String?` | `null` | Custom app bar title |
-| `showBackButton` | `bool` | `false` | Toggle back button |
-| `hideAppbar` | `bool?` | `false` | Toggle app bar visibility |
-| `hideSearch` | `bool?` | `null` | Toggle search bar |
-| `searchReadOnly` | `bool` | `false` | Make search bar read-only (tap opens custom search) |
-| `deleteConversationOptionVisibility` | `bool?` | `true` | Show delete option on long press |
-| `groupTypeVisibility` | `bool?` | `true` | Show group type icon on avatar |
-| `usersStatusVisibility` | `bool?` | `true` | Show online/offline status indicator |
-| `receiptsVisibility` | `bool?` | `true` | Show message receipts |
-| `disableSoundForMessages` | `bool` | `false` | Disable message sounds |
-| `customSoundForMessages` | `String?` | `null` | Custom notification sound asset path |
-| `selectionMode` | `SelectionMode?` | `null` | Enable selection mode (`single` or `multiple`) |
-
----
-
-## Custom View Slots
-
-### Leading View
-
-Replace the avatar / left section.
-
-
-
-```dart
-CometChatConversations(
- leadingView: (context, conversation) {
- return CircleAvatar(
- child: Text(conversation.conversationWith?.name?[0] ?? ""),
- );
- },
-)
-```
-
-
-
-### Title View
-
-Replace the name / title text.
-
-
-
-```dart
-CometChatConversations(
- titleView: (context, conversation) {
- return Text(
- conversation.conversationWith?.name ?? "",
- style: TextStyle(fontWeight: FontWeight.bold),
- );
- },
-)
-```
-
-
-
-### Subtitle View
-
-Replace the last message preview.
-
-
-
-```dart
-CometChatConversations(
- subtitleView: (context, conversation) {
- final msg = conversation.lastMessage;
- if (msg is TextMessage) {
- return Text(msg.text, maxLines: 1, overflow: TextOverflow.ellipsis);
- }
- return Text("New conversation");
- },
-)
-```
-
-
-
-### Trailing View
-
-Replace the timestamp / badge / right section.
-
-
-
-```dart
-CometChatConversations(
- trailingView: (conversation) {
- if (conversation.unreadMessageCount > 0) {
- return Badge(label: Text("${conversation.unreadMessageCount}"));
- }
- return null;
- },
-)
-```
-
-
-
-### List Item View
-
-Replace the entire list item row.
-
-
-
-```dart
-CometChatConversations(
- listItemView: (conversation) {
- return ListTile(
- leading: CircleAvatar(child: Text(conversation.conversationWith?.name?[0] ?? "")),
- title: Text(conversation.conversationWith?.name ?? ""),
- subtitle: Text("Custom item"),
- );
- },
-)
-```
-
-
-
-### State Views
-
-
-
-```dart
-CometChatConversations(
- emptyStateView: (context) => Center(child: Text("No conversations yet")),
- errorStateView: (context) => Center(child: Text("Something went wrong")),
- loadingStateView: (context) => Center(child: CircularProgressIndicator()),
-)
-```
-
-
-
----
-
-## Menu Options
-
-
-
-```dart
-// Replace all options
-CometChatConversations(
- setOptions: (conversation, bloc, context) {
- return [
- CometChatOption(
- id: "delete",
- icon: AssetConstants.delete,
- title: "Delete",
- onClick: () {
- bloc.add(DeleteConversation(conversation.conversationId!));
- },
- ),
- ];
- },
-)
-
-// Append to defaults
-CometChatConversations(
- addOptions: (conversation, bloc, context) {
- return [
- CometChatOption(
- id: "archive",
- iconWidget: Icon(Icons.archive_outlined),
- title: "Archive",
- onClick: () {
- // Archive conversation
- },
- ),
- ];
- },
-)
-```
-
-
-
----
-
-## Common Patterns
-
-### Minimal list — hide all chrome
-
-
-
-```dart
-CometChatConversations(
- hideAppbar: true,
- hideSearch: true,
-)
-```
-
-
-
-### Users-only conversations
-
-
-
-```dart
-CometChatConversations(
- conversationsRequestBuilder: ConversationsRequestBuilder()
- ..conversationType = "user",
-)
-```
-
-
-
-### Custom date formatting
-
-
-
-```dart
-CometChatConversations(
- datePattern: (conversation) {
- final timestamp = conversation.updatedAt;
- return DateFormat('MMM d').format(DateTime.fromMillisecondsSinceEpoch(timestamp! * 1000));
- },
-)
-```
-
-
-
----
-
-## Advanced
-
-### BLoC Access
-
-Provide a custom `ConversationsBloc` to override behavior:
-
-
-
-```dart
-CometChatConversations(
- conversationsBloc: CustomConversationsBloc(),
-)
-```
-
-
-
-### Extending ConversationsBloc
-
-`ConversationsBloc` uses the `ListBase` mixin with override hooks for custom list behavior:
-
-
-
-```dart
-class CustomConversationsBloc extends ConversationsBloc {
- @override
- void onItemAdded(Conversation item, List updatedList) {
- // Custom sorting — pinned conversations first
- final sorted = _sortWithPinnedFirst(updatedList);
- super.onItemAdded(item, sorted);
- }
-
- @override
- void onListReplaced(List previousList, List newList) {
- // Filter out blocked users on every list refresh
- final filtered = newList.where((c) => !isBlocked(c)).toList();
- super.onListReplaced(previousList, filtered);
- }
-}
-```
-
-
-
-For `ListBase` override hooks (`onItemAdded`, `onItemRemoved`, `onItemUpdated`, `onListCleared`, `onListReplaced`), see [BLoC & Data — ListBase Hooks](/ui-kit/flutter/v6/customization-bloc-data#listbase-hooks).
-
-### Public BLoC Events
-
-| Event | Description |
-| --- | --- |
-| `LoadConversations({silent})` | Load initial conversations. `silent: true` keeps existing list visible during refresh. |
-| `LoadMoreConversations()` | Load next page (pagination) |
-| `RefreshConversations()` | Refresh the list |
-| `DeleteConversation(conversationId)` | Delete via SDK and remove from list |
-| `RemoveConversation(conversationId)` | Remove from list without SDK call |
-| `SetActiveConversation(conversationId)` | Mark as active (suppresses unread count) |
-| `UpdateConversation(conversationId, updatedConversation)` | Update with modified data |
-| `ResetUnreadCount(conversationId)` | Reset unread count to 0 |
-
-### Public BLoC Methods
-
-| Method | Returns | Description |
-| --- | --- | --- |
-| `getTypingNotifier(conversationId)` | `ValueNotifier>` | Per-conversation typing notifier for isolated rebuilds |
-| `getTypingIndicators(conversationId)` | `List` | Current typing indicators for a conversation |
-
-### Route Observer
-
-Pass a `RouteObserver` to freeze rebuilds when another screen is pushed on top (prevents expensive rebuilds during keyboard animation):
-
-
-
-```dart
-// In your app
-final RouteObserver> routeObserver = RouteObserver>();
-
-MaterialApp(
- navigatorObservers: [routeObserver],
-)
-
-// Pass to conversations
-CometChatConversations(
- routeObserver: routeObserver,
-)
-```
-
-
-
----
-
-## Style
-
-
-
-```dart
-CometChatConversations(
- conversationsStyle: CometChatConversationsStyle(
- backgroundColor: Colors.white,
- avatarStyle: CometChatAvatarStyle(
- borderRadius: BorderRadius.circular(8),
- backgroundColor: Color(0xFFFBAA75),
- ),
- badgeStyle: CometChatBadgeStyle(
- backgroundColor: Color(0xFFF76808),
- ),
- receiptStyle: CometChatMessageReceiptStyle(),
- typingIndicatorStyle: CometChatTypingIndicatorStyle(),
- dateStyle: CometChatDateStyle(),
- mentionsStyle: CometChatMentionsStyle(),
- deleteConversationDialogStyle: CometChatConfirmDialogStyle(),
- ),
-)
-```
-
-
-
-### Style Properties
-
-| Property | Description |
-| --- | --- |
-| `backgroundColor` | List background color |
-| `avatarStyle` | Avatar appearance |
-| `badgeStyle` | Unread badge appearance |
-| `receiptStyle` | Read receipt icons |
-| `typingIndicatorStyle` | Typing indicator text |
-| `dateStyle` | Timestamp appearance |
-| `mentionsStyle` | Mention highlight style |
-| `deleteConversationDialogStyle` | Delete confirmation dialog |
-
-See [Component Styling](/ui-kit/flutter/v6/component-styling) for the full reference.
-
----
-
-## Next Steps
-
-
-
- Browse and search available users
-
-
- Display messages for a conversation
-
-
- Detailed styling reference
-
-
- Customize message bubble structure
-
-
\ No newline at end of file
diff --git a/ui-kit/flutter/v6/core-features.mdx b/ui-kit/flutter/v6/core-features.mdx
deleted file mode 100644
index a6adbd4ee..000000000
--- a/ui-kit/flutter/v6/core-features.mdx
+++ /dev/null
@@ -1,131 +0,0 @@
----
-title: "Core Features"
----
-
-## Overview
-
-The UI Kit comprises a variety of widgets, each designed to work seamlessly with one another to deliver a comprehensive and intuitive chat experience. Here's how different UI Kit widgets work together to achieve CometChat's Core features:
-
-## Instant Messaging
-
-At the heart of CometChat's functionality is the ability to support real-time text messaging. Users can send and receive instant messages, fostering quick and efficient communication.
-
-| Widgets | Functionality |
-|---|---|
-| MessageComposer | Enables users to write and send a variety of messages. In V6, powered by `MessageComposerBloc` with rich text formatting support. |
-| MessageList | Renders a list of messages sent and received using TextBubble. In V6, powered by `MessageListBloc` with `diffutil_dart` for efficient updates. |
-
-## Media Sharing
-
-Beyond text, CometChat allows users to share various media types within their conversations — images, videos, audio files, and documents.
-
-| Widgets | Functionality |
-|---|---|
-| MessageComposer | Has ActionSheet for sharing media files. V6 adds inline audio recorder and multi-attachment support (in progress). |
-| MessageList | Renders different Media Message bubbles like Image Bubble, File Bubble, Audio Bubble, Video Bubble. |
-
-## Read Receipts
-
-CometChat's Read Receipts feature provides visibility into the message status, letting users know when a message has been delivered and read.
-
-| Widgets | Functionality |
-|---|---|
-| Conversations | Displays the delivery status of the last message. |
-| MessageList | Read receipt status is an integral part of all message bubbles. |
-| MessageInformation | Provides transparency into the status of each sent message. |
-
-## Mark As Unread
-
-Mark as Unread feature allows users to manually mark messages as unread, helping them keep track of important conversations they want to revisit later.
-
-| Widgets | Functionality |
-|---|---|
-| Message List | Provides the "Mark as unread" option in message actions and supports starting from the first unread message. |
-| Conversations | Reflects the updated unread count in real-time. |
-
-## Typing Indicator
-
-The Typing Indicator feature shows when a user is typing a response in real-time.
-
-| Widgets | Functionality |
-|---|---|
-| Conversations | Shows real-time typing status indicators in conversation items. |
-| Message Header | Dynamically updates to display a 'typing…' status in real-time. |
-
-## User Presence
-
-CometChat's User Presence feature allows users to see whether their contacts are online or offline.
-
-| Widgets | Functionality |
-|---|---|
-| Conversations | Shows user presence information in conversation items. |
-| Message Header | Handles user Presence information in the toolbar. |
-| Users | Renders users Presence information in the user list. |
-| Group Members | Handles user Presence information in the member list. |
-
-## Reactions
-
-CometChat's Reactions feature allows users to react to messages with emojis.
-
-| Widgets | Functionality |
-|---|---|
-| MessageList | Reactions are an integral part of all message bubbles. Width-aware display shows visible reactions + "+N" overflow indicator. |
-
-## Mentions
-
-Mentions enhances interactivity by allowing users to directly address specific individuals in a conversation. Supports `@all` for group mentions.
-
-| Widgets | Functionality |
-|---|---|
-| Conversations | Shows where users have been specifically mentioned. |
-| MessageComposer | Allows users to use the Mentions feature for direct addressing. |
-| MessageList | Supports the rendering of Mentions in messages. |
-
-## Quoted Reply
-
-Quoted Reply enables users to quickly reply to specific messages by selecting the "Reply" option from a message's action menu.
-
-| Widgets | Functionality |
-|---|---|
-| MessageList | Supports replying to messages via the "Reply" option. |
-| MessageComposer | Shows the quoted reply above the input field using `CometChatMessagePreview` (renamed from `CometChatEditPreview` in V5). |
-
-## Threaded Conversations
-
-The Threaded Conversations feature enables users to respond directly to a specific message in a chat.
-
-| Widgets | Functionality |
-|---|---|
-| Threaded Messages | Displays all replies made to a particular message. In V6, powered by `ThreadedHeaderBloc`. |
-
-## Conversation and Advanced Search
-
-Enables users to quickly find conversations, messages, and media across chats in real time.
-
-| Widgets | Functionality |
-|---|---|
-| Search | Allows users to search across conversations and messages. In V6, powered by a single consolidated `SearchBloc`. |
-| Message Header | Shows the search button in the chat header. |
-| MessageList | Shows the selected message when clicked from search results. |
-
-## Moderation
-
-CometChat's Message Moderation feature helps maintain a safe and respectful chat environment by automatically filtering and managing inappropriate content.
-
-| Widgets | Functionality |
-|---|---|
-| Message List | Automatically handles moderated messages, displaying blocked content appropriately. |
-
-## Report Message
-
-The Report Message feature allows users to report inappropriate or harmful messages within the chat.
-
-| Widgets | Functionality |
-|---|---|
-| MessageList | Provides the "Report Message" option in the message actions menu. |
-
-## Group Chat
-
-CometChat facilitates Group Chats, allowing users to have conversations with multiple participants simultaneously.
-
-For a comprehensive guide on implementing Groups, refer to our detailed [Groups guide](/ui-kit/flutter/v6/guide-group-chat).
diff --git a/ui-kit/flutter/v6/custom-text-formatter-guide.mdx b/ui-kit/flutter/v6/custom-text-formatter-guide.mdx
deleted file mode 100644
index 24bfb42b2..000000000
--- a/ui-kit/flutter/v6/custom-text-formatter-guide.mdx
+++ /dev/null
@@ -1,267 +0,0 @@
----
-title: "Custom Text Formatter Guide"
-description: "Build a custom text formatter from scratch to process hashtags, links, or any text pattern."
----
-
-This guide walks you through building a custom `CometChatTextFormatter` that detects `#hashtags` in messages, highlights them, and shows a suggestion dropdown in the composer.
-
-## Prerequisites
-
-- CometChat Flutter UI Kit V6 installed
-- Familiarity with [Text Formatters](/ui-kit/flutter/v6/customization-text-formatters)
-
-## Step 1: Create the Formatter Class
-
-Extend `CometChatTextFormatter` and set the tracking character to `#`:
-
-
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:flutter/material.dart';
-
-class HashtagFormatter extends CometChatTextFormatter {
- final List _allHashtags = [
- 'flutter', 'dart', 'cometchat', 'uikit', 'mobile',
- 'android', 'ios', 'web', 'chat', 'messaging',
- ];
-
- HashtagFormatter() : super(trackingCharacter: '#');
-
- @override
- void init() {
- // Called when the formatter is initialized
- }
-}
-```
-
-
-
-## Step 2: Implement Search
-
-The `search` method is called whenever the user types after the tracking character. Filter your data and set the suggestion list:
-
-
-
-```dart
-@override
-void search(String query) {
- if (query.isEmpty) {
- setSuggestionItems(_allHashtags
- .map((tag) => SuggestionItem(
- id: tag,
- name: '#$tag',
- leadingIcon: Icon(Icons.tag, size: 20),
- ))
- .toList());
- return;
- }
-
- final filtered = _allHashtags
- .where((tag) => tag.toLowerCase().contains(query.toLowerCase()))
- .map((tag) => SuggestionItem(
- id: tag,
- name: '#$tag',
- leadingIcon: Icon(Icons.tag, size: 20),
- ))
- .toList();
-
- setSuggestionItems(filtered);
-}
-```
-
-
-
-## Step 3: Handle Suggestion Selection
-
-When the user taps a suggestion, insert the hashtag into the composer:
-
-
-
-```dart
-@override
-void onItemClick(SuggestionItem item, User? user, Group? group) {
- // The base class handles inserting the text into the composer.
- // You can add custom logic here, like tracking analytics.
- super.onItemClick(item, user, group);
-}
-```
-
-
-
-## Step 4: Style Hashtags in Message Bubbles
-
-Override `buildMessageBubbleSpan` to apply styling to hashtags when they appear in sent/received messages:
-
-
-
-```dart
-@override
-List getFormattedText(
- String text,
- BuildContext context,
- BubbleAlignment alignment,
-) {
- final results = [];
- final regex = RegExp(r'#\w+');
-
- for (final match in regex.allMatches(text)) {
- results.add(CometChatTextFormatterResult(
- start: match.start,
- end: match.end,
- style: TextStyle(
- color: alignment == BubbleAlignment.right
- ? Colors.white.withOpacity(0.8)
- : Color(0xFF6851D6),
- fontWeight: FontWeight.w600,
- ),
- onTap: () {
- // Handle hashtag tap — navigate to hashtag feed, etc.
- debugPrint('Tapped hashtag: ${match.group(0)}');
- },
- ));
- }
-
- return results;
-}
-```
-
-
-
-## Step 5: Pre-Send Hook (Optional)
-
-Modify the message before it's sent — for example, attach hashtag metadata:
-
-
-
-```dart
-@override
-BaseMessage handlePreMessageSend(BaseMessage message) {
- if (message is TextMessage) {
- final regex = RegExp(r'#\w+');
- final hashtags = regex
- .allMatches(message.text)
- .map((m) => m.group(0)!.substring(1))
- .toList();
-
- if (hashtags.isNotEmpty) {
- message.metadata ??= {};
- message.metadata!['hashtags'] = hashtags;
- }
- }
- return message;
-}
-```
-
-
-
-## Step 6: Register the Formatter
-
-Pass your formatter to the components that should use it:
-
-
-
-```dart
-final hashtagFormatter = HashtagFormatter();
-
-// On the message list (for rendering)
-CometChatMessageList(
- user: user,
- textFormatters: [
- CometChatMentionsFormatter(), // Keep default mentions
- hashtagFormatter,
- ],
-)
-
-// On the composer (for input suggestions)
-CometChatMessageComposer(
- user: user,
- textFormatters: [
- CometChatMentionsFormatter(),
- hashtagFormatter,
- ],
-)
-```
-
-
-
-## Complete Example
-
-
-
-```dart
-class HashtagFormatter extends CometChatTextFormatter {
- final List _allHashtags = [
- 'flutter', 'dart', 'cometchat', 'uikit', 'mobile',
- ];
-
- HashtagFormatter() : super(trackingCharacter: '#');
-
- @override
- void init() {}
-
- @override
- void search(String query) {
- final filtered = query.isEmpty
- ? _allHashtags
- : _allHashtags.where(
- (tag) => tag.toLowerCase().contains(query.toLowerCase()),
- ).toList();
-
- setSuggestionItems(filtered
- .map((tag) => SuggestionItem(
- id: tag,
- name: '#$tag',
- leadingIcon: Icon(Icons.tag, size: 20),
- ))
- .toList());
- }
-
- @override
- List getFormattedText(
- String text,
- BuildContext context,
- BubbleAlignment alignment,
- ) {
- final results = [];
- final regex = RegExp(r'#\w+');
-
- for (final match in regex.allMatches(text)) {
- results.add(CometChatTextFormatterResult(
- start: match.start,
- end: match.end,
- style: TextStyle(
- color: alignment == BubbleAlignment.right
- ? Colors.white.withOpacity(0.8)
- : Color(0xFF6851D6),
- fontWeight: FontWeight.w600,
- ),
- ));
- }
- return results;
- }
-
- @override
- BaseMessage handlePreMessageSend(BaseMessage message) {
- if (message is TextMessage) {
- final hashtags = RegExp(r'#\w+')
- .allMatches(message.text)
- .map((m) => m.group(0)!.substring(1))
- .toList();
- if (hashtags.isNotEmpty) {
- message.metadata ??= {};
- message.metadata!['hashtags'] = hashtags;
- }
- }
- return message;
- }
-}
-```
-
-
-
-## Related
-
-- [Text Formatters](/ui-kit/flutter/v6/customization-text-formatters) — Text formatter API reference.
-- [Mentions Formatter Guide](/ui-kit/flutter/v6/mentions-formatter-guide) — Built-in mentions formatter.
-- [Shortcut Formatter Guide](/ui-kit/flutter/v6/shortcut-formatter-guide) — Shortcut text replacement.
diff --git a/ui-kit/flutter/v6/events.mdx b/ui-kit/flutter/v6/events.mdx
deleted file mode 100644
index c780e9feb..000000000
--- a/ui-kit/flutter/v6/events.mdx
+++ /dev/null
@@ -1,195 +0,0 @@
----
-title: "Events"
----
-
-## Overview
-
-Events allow for a decoupled, flexible architecture where different parts of the application can interact without having to directly reference each other. This makes it easier to create complex, interactive experiences, as well as to extend and customize the functionality provided by the CometChat UI Kit.
-
-> The event system is identical between V5 and V6. All event classes, listeners, and APIs work the same way.
-
-### User Events
-
-`CometChatUserEvents` emit events when the logged-in user executes actions on another user.
-
-1. `ccUserBlocked`: Triggered when the logged-in user blocks another user.
-2. `ccUserUnblocked`: Triggered when the logged-in user unblocks another user.
-
-
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
-class _YourScreenState extends State with CometChatUserEventListener {
- @override
- void initState() {
- super.initState();
- CometChatUserEvents.addUsersListener("listenerId", this);
- }
-
- @override
- void dispose() {
- super.dispose();
- CometChatUserEvents.removeUsersListener("listenerId");
- }
-
- @override
- void ccUserBlocked(User user) {
- // Handle user blocked
- }
-
- @override
- void ccUserUnblocked(User user) {
- // Handle user unblocked
- }
-
- @override
- Widget build(BuildContext context) {
- return const Placeholder();
- }
-}
-```
-
-
-
-***
-
-### Group Events
-
-`CometChatGroupEvents` emits events when the logged-in user performs actions related to groups.
-
-1. `ccGroupCreated`: Triggered when the logged-in user creates a group.
-2. `ccGroupDeleted`: Triggered when the logged-in user deletes a group.
-3. `ccGroupLeft`: Triggered when the logged-in user leaves a group.
-4. `ccGroupMemberScopeChanged`: Triggered when the logged-in user changes the scope of another group member.
-5. `ccGroupMemberBanned`: Triggered when the logged-in user bans a group member.
-6. `ccGroupMemberKicked`: Triggered when the logged-in user kicks a group member.
-7. `ccGroupMemberUnbanned`: Triggered when the logged-in user unbans a user.
-8. `ccGroupMemberJoined`: Triggered when the logged-in user joins a group.
-9. `ccGroupMemberAdded`: Triggered when the logged-in user adds new members.
-10. `ccOwnershipChanged`: Triggered when the logged-in user transfers ownership.
-
-
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
-class _YourScreenState extends State with CometChatGroupEventListener {
- @override
- void initState() {
- super.initState();
- CometChatGroupEvents.addGroupsListener("listenerId", this);
- }
-
- @override
- void dispose() {
- super.dispose();
- CometChatGroupEvents.removeGroupsListener("listenerId");
- }
-
- @override
- void ccGroupCreated(Group group) {
- // Handle group created
- }
-
- @override
- void ccGroupDeleted(Group group) {
- // Handle group deleted
- }
-
- @override
- Widget build(BuildContext context) {
- return const Placeholder();
- }
-}
-```
-
-
-
-***
-
-### Message Events
-
-`CometChatMessageEvents` emits events related to messages.
-
-
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
-class _YourScreenState extends State with CometChatMessageEventListener {
- @override
- void initState() {
- super.initState();
- CometChatMessageEvents.addMessagesListener("listenerId", this);
- }
-
- @override
- void dispose() {
- super.dispose();
- CometChatMessageEvents.removeMessagesListener("listenerId");
- }
-
- @override
- Widget build(BuildContext context) {
- return const Placeholder();
- }
-}
-```
-
-
-
-***
-
-### Conversation Events
-
-`CometChatConversationEvents` emits events related to conversations.
-
-1. `ccConversationDeleted`: Triggered when a conversation is deleted.
-
-
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
-class _YourScreenState extends State with CometChatConversationEventListener {
- @override
- void initState() {
- super.initState();
- CometChatConversationEvents.addConversationListListener("listenerId", this);
- }
-
- @override
- void dispose() {
- super.dispose();
- CometChatConversationEvents.removeConversationListListener("listenerId");
- }
-
- @override
- void ccConversationDeleted(Conversation conversation) {
- // Handle conversation deleted
- }
-
- @override
- Widget build(BuildContext context) {
- return const Placeholder();
- }
-}
-```
-
-
-
-***
-
-### UI Events
-
-`CometChatUIEvents` emits events related to UI interactions.
-
-
-
-```dart
-// UI events are used internally by the UI Kit widgets
-// to communicate state changes across components
-```
-
-
diff --git a/ui-kit/flutter/v6/extensions.mdx b/ui-kit/flutter/v6/extensions.mdx
deleted file mode 100644
index bf6b7b7db..000000000
--- a/ui-kit/flutter/v6/extensions.mdx
+++ /dev/null
@@ -1,85 +0,0 @@
----
-title: "Extensions"
----
-
-## Overview
-
-CometChat's UI Kit comes with built-in support for a wide variety of extensions that provide additional functionality. These extensions enhance the chatting experience, making it more interactive, secure, and efficient.
-
-Activating any of the extensions in CometChat is a simple process done through your application's dashboard. Refer to our guide for detailed information on [Extensions](/fundamentals/extensions-overview).
-
-> **V6 Architecture Change:** In V5, extensions used a decorator/chain-of-responsibility pattern with `*Extension` and `*ExtensionDecorator` classes that wrapped the `DataSource` interface. V6 removes this entire pattern. Extension behavior is now handled directly by `MessageTemplateUtils` static methods. No registration is needed — just enable extensions in your CometChat Dashboard and they work automatically.
-
-## Built-in Extensions
-
-### Stickers
-
-The Stickers extension allows users to express their emotions more creatively with pre-designed stickers.
-
-Once activated from your CometChat Dashboard, the feature will automatically be incorporated into the [Message Composer](/ui-kit/flutter/v6/message-composer) widget.
-
-### Polls
-
-The Polls extension enhances group discussions by allowing users to create polls with predefined answers.
-
-Once activated from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/flutter/v6/message-composer) widget.
-
-### Collaborative Whiteboard
-
-The Collaborative Whiteboard extension facilitates real-time collaboration on a shared digital whiteboard.
-
-Once activated from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/flutter/v6/message-composer) widget.
-
-### Collaborative Document
-
-Users can work together on a shared document with the Collaborative Document extension.
-
-Once activated from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/flutter/v6/message-composer) widget.
-
-### Message Translation
-
-The Message Translation extension translates any message into your local locale, eliminating language barriers.
-
-Once activated from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of [MessageList Widget](/ui-kit/flutter/v6/message-list).
-
-### Link Preview
-
-The Link Preview extension provides a summary of URLs shared in the chat, including title, description, and thumbnail.
-
-Once activated from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Widget](/ui-kit/flutter/v6/message-list).
-
-### Thumbnail Generation
-
-The Thumbnail Generation extension automatically creates smaller preview images for shared images, reducing bandwidth usage.
-
-Once activated from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Widget](/ui-kit/flutter/v6/message-list).
-
-## V6 Extension Architecture
-
-### What Changed
-
-| Aspect | V5 | V6 |
-|---|---|---|
-| Registration | `UIKitSettings.extensions = CometChatUIKitChatExtensions.getDefaultExtensions()` | Not needed — built-in |
-| Architecture | Decorator chain (up to 10 layers) | `MessageTemplateUtils` static methods (1 hop) |
-| Startup cost | 9 `isExtensionEnabled()` network calls | None |
-| Files removed | — | 27 files (~7000+ lines) |
-| UI widgets | Preserved | Preserved (bubbles, configs, styles) |
-
-### What Was Removed
-
-- All `*Extension` classes (e.g., `StickersExtension`, `PollsExtension`)
-- All `*ExtensionDecorator` classes (e.g., `StickersExtensionDecorator`)
-- `ChatConfigurator`, `DataSource` interface, `ExtensionsDataSource`
-- `CometChatUIKitChatExtensions`, `CometChatUIKitChatAIFeatures`
-- `CometChatUIKit.getDataSource()` method
-
-### What Was Preserved
-
-All extension UI widgets remain:
-- `CometChatStickerBubble`, `CometChatStickerKeyboard`
-- `CometChatPollsBubble`, `CometChatCreatePoll`
-- `CometChatLinkPreviewBubble`
-- `CometChatCollaborativeBubble`, `CometChatCollaborativeWebView`
-- `MessageTranslationBubble`
-- All configuration and style classes
diff --git a/ui-kit/flutter/v6/flutter-conversation.mdx b/ui-kit/flutter/v6/flutter-conversation.mdx
deleted file mode 100644
index b58d05343..000000000
--- a/ui-kit/flutter/v6/flutter-conversation.mdx
+++ /dev/null
@@ -1,158 +0,0 @@
----
-title: "Conversation List + Message View"
-sidebarTitle: "Conversation List + Message View"
----
-
-The Conversation List + Message View layout provides a seamless two-panel chat interface. This layout allows users to switch between conversations while keeping the active chat open.
-
-## Integration
-
-### Step 1: Create the Conversations Screen
-
-
-
-```dart
-import 'package:flutter/material.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
-class ConversationsScreen extends StatelessWidget {
- const ConversationsScreen({super.key});
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- appBar: AppBar(title: const Text('Conversations')),
- body: CometChatConversations(
- onItemTap: (conversation) {
- _openChat(context, conversation);
- },
- ),
- );
- }
-
- void _openChat(BuildContext context, Conversation conversation) {
- User? user;
- Group? group;
-
- if (conversation.conversationType == 'user') {
- user = conversation.conversationWith as User;
- } else {
- group = conversation.conversationWith as Group;
- }
-
- Navigator.push(
- context,
- MaterialPageRoute(
- builder: (_) => ChatScreen(user: user, group: group),
- ),
- );
- }
-}
-```
-
-
-
-### Step 2: Create the Chat Screen
-
-Use the same `MessagesScreen` pattern from [One-to-One Chat](/ui-kit/flutter/v6/flutter-one-to-one-chat#step-2-render-the-messages-component):
-
-
-
-```dart
-class ChatScreen extends StatelessWidget {
- final User? user;
- final Group? group;
-
- const ChatScreen({super.key, this.user, this.group});
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- appBar: CometChatMessageHeader(user: user, group: group),
- body: SafeArea(
- child: Column(
- children: [
- Expanded(child: CometChatMessageList(user: user, group: group)),
- CometChatMessageComposer(user: user, group: group),
- ],
- ),
- ),
- );
- }
-}
-```
-
-
-
-### Step 3: Complete Example
-
-
-
-```dart
-import 'package:flutter/material.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
-void main() {
- runApp(const MyApp());
-}
-
-class MyApp extends StatelessWidget {
- const MyApp({super.key});
-
- @override
- Widget build(BuildContext context) {
- return MaterialApp(
- title: 'CometChat V6',
- theme: ThemeData(useMaterial3: true),
- home: const InitPage(),
- );
- }
-}
-
-class InitPage extends StatefulWidget {
- const InitPage({super.key});
-
- @override
- State createState() => _InitPageState();
-}
-
-class _InitPageState extends State {
- bool _ready = false;
-
- @override
- void initState() {
- super.initState();
- _init();
- }
-
- Future _init() async {
- UIKitSettings settings = (UIKitSettingsBuilder()
- ..subscriptionType = CometChatSubscriptionType.allUsers
- ..autoEstablishSocketConnection = true
- ..region = "REGION"
- ..appId = "APP_ID"
- ..authKey = "AUTH_KEY")
- .build();
-
- CometChatUIKit.init(
- uiKitSettings: settings,
- onSuccess: (_) {
- CometChatUIKit.login("cometchat-uid-1", onSuccess: (_) {
- setState(() => _ready = true);
- }, onError: (e) {});
- },
- onError: (e) {},
- );
- }
-
- @override
- Widget build(BuildContext context) {
- if (!_ready) {
- return const Scaffold(body: Center(child: CircularProgressIndicator()));
- }
- return const ConversationsScreen();
- }
-}
-```
-
-
diff --git a/ui-kit/flutter/v6/flutter-one-to-one-chat.mdx b/ui-kit/flutter/v6/flutter-one-to-one-chat.mdx
deleted file mode 100644
index d3af82fd6..000000000
--- a/ui-kit/flutter/v6/flutter-one-to-one-chat.mdx
+++ /dev/null
@@ -1,232 +0,0 @@
----
-title: "Building A One To One/Group Chat Experience"
-sidebarTitle: "One To One/Group Chat"
----
-
-The One-to-One Chat feature provides a streamlined direct messaging interface, ideal for support chats, dating apps, and private messaging platforms.
-
-***
-
-### Step 1: Render the Message View
-
-Fetch the target user and display the messaging screen. V6 uses the same `CometChatUIKit` initialization but with BLoC-powered widgets.
-
-```dart main.dart
-@override
-Widget build(BuildContext context) {
- return Scaffold(
- body: SafeArea(
- child: FutureBuilder(
- future: fetchCometChatUser("cometchat-uid-2"),
- builder: (context, snapshot) {
- if (snapshot.connectionState == ConnectionState.waiting) {
- return const Center(child: CircularProgressIndicator());
- } else if (snapshot.hasError) {
- return Center(child: Text("Error: ${snapshot.error}"));
- } else if (snapshot.hasData) {
- return MessagesScreen(user: snapshot.data!);
- } else {
- return const Center(child: Text("User not found"));
- }
- },
- ),
- ),
- );
-}
-```
-
-#### Full Example: main.dart
-
-
-
-```dart
-import 'package:flutter/material.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'messages_screen.dart';
-import 'cometchat_config.dart';
-import 'dart:async';
-
-void main() => runApp(const MyApp());
-
-class MyApp extends StatelessWidget {
- const MyApp({super.key});
-
- @override
- Widget build(BuildContext context) {
- return MaterialApp(
- title: 'CometChat V6 UI Kit',
- theme: ThemeData(
- colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
- useMaterial3: true,
- ),
- home: const Home(),
- );
- }
-}
-
-class Home extends StatelessWidget {
- const Home({super.key});
-
- Future _initializeAndLogin() async {
- final settings = UIKitSettingsBuilder()
- ..subscriptionType = CometChatSubscriptionType.allUsers
- ..autoEstablishSocketConnection = true
- ..appId = CometChatConfig.appId
- ..region = CometChatConfig.region
- ..authKey = CometChatConfig.authKey;
-
- await CometChatUIKit.init(uiKitSettings: settings.build());
- await CometChatUIKit.login(
- 'cometchat-uid-1',
- onSuccess: (_) => debugPrint('Login Successful'),
- onError: (err) => throw Exception('Login Failed: $err'),
- );
- }
-
- @override
- Widget build(BuildContext context) {
- return FutureBuilder(
- future: _initializeAndLogin(),
- builder: (ctx, snap) {
- if (snap.connectionState != ConnectionState.done) {
- return const Scaffold(
- body: SafeArea(child: Center(child: CircularProgressIndicator())),
- );
- }
- if (snap.hasError) {
- return Scaffold(
- body: SafeArea(
- child: Center(child: Text('Error:\n${snap.error}', textAlign: TextAlign.center)),
- ),
- );
- }
- return const MessagesPage();
- },
- );
- }
-}
-
-class MessagesPage extends StatelessWidget {
- const MessagesPage({super.key});
-
- Future fetchCometChatUser(String uid) async {
- final completer = Completer();
- CometChat.getUser(
- uid,
- onSuccess: (user) => completer.complete(user),
- onError: (error) => completer.completeError(error),
- );
- return completer.future;
- }
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: SafeArea(
- child: FutureBuilder(
- future: fetchCometChatUser("cometchat-uid-2"),
- builder: (context, snapshot) {
- if (snapshot.connectionState == ConnectionState.waiting) {
- return const Center(child: CircularProgressIndicator());
- } else if (snapshot.hasError) {
- return Center(child: Text("Error: ${snapshot.error}"));
- } else if (snapshot.hasData) {
- return MessagesScreen(user: snapshot.data!);
- } else {
- return const Center(child: Text("User not found"));
- }
- },
- ),
- ),
- );
- }
-}
-```
-
-
-
-### Step 2: Render the Messages Component
-
-Compose the messaging view using:
-
-* [Message Header](/ui-kit/flutter/v6/message-header)
-* [Message List](/ui-kit/flutter/v6/message-list)
-* [Message Composer](/ui-kit/flutter/v6/message-composer)
-
-
-
-```dart
-import 'package:flutter/material.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
-class MessagesScreen extends StatefulWidget {
- final User? user;
- final Group? group;
-
- const MessagesScreen({Key? key, this.user, this.group}) : super(key: key);
-
- @override
- State createState() => _MessagesScreenState();
-}
-
-class _MessagesScreenState extends State {
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- appBar: CometChatMessageHeader(
- user: widget.user,
- group: widget.group,
- ),
- body: SafeArea(
- child: Column(
- children: [
- Expanded(
- child: CometChatMessageList(
- user: widget.user,
- group: widget.group,
- ),
- ),
- CometChatMessageComposer(
- user: widget.user,
- group: widget.group,
- ),
- ],
- ),
- ),
- );
- }
-}
-```
-
-
-
-
-
-***
-
-### Step 3: Run the App
-
-```
-flutter run
-```
-
-This launches the app with the one-to-one chat interface featuring the message header, list, and composer.
-
-***
-
-## Key V6 Differences
-
-| Aspect | V5 | V6 |
-|---|---|---|
-| Composite widget | `CometChatMessages` wraps header + list + composer | No composite — compose individually |
-| State management | GetX controllers | BLoC pattern (`MessageListBloc`, `MessageComposerBloc`) |
-| Extensions | `CometChatUIKitChatExtensions.getDefaultExtensions()` | Extensions handled via `MessageTemplateUtils` |
-| Rich text | Not available | Built-in rich text formatting and code blocks |
-
-***
-
-## Next Steps
-
-* [Advanced Customizations](/ui-kit/flutter/v6/theme-introduction) — Personalize the chat UI to align with your brand.
-* [Message List](/ui-kit/flutter/v6/message-list) — Customize message display and behavior.
-* [Message Composer](/ui-kit/flutter/v6/message-composer) — Configure rich text, attachments, and audio recording.
diff --git a/ui-kit/flutter/v6/flutter-tab-based-chat.mdx b/ui-kit/flutter/v6/flutter-tab-based-chat.mdx
deleted file mode 100644
index 8b9f5b40c..000000000
--- a/ui-kit/flutter/v6/flutter-tab-based-chat.mdx
+++ /dev/null
@@ -1,213 +0,0 @@
----
-title: "Building A Messaging UI With Tabs, Sidebar, And Message View"
-sidebarTitle: "Tab Based Chat Experience"
----
-
-This guide walks you through creating a tab-based messaging UI using Flutter and CometChat V6 UIKit. The UI includes sections for Chats, Users, and Groups, allowing seamless navigation.
-
-***
-
-## User Interface Preview
-
-This layout consists of:
-
-1. Sidebar (Conversation List) — Displays recent conversations with active users and groups.
-2. Message View — Shows the selected chat with real-time messages.
-3. Message Input Box — Allows users to send messages seamlessly.
-
-***
-
-### Step 1: Render the Tab Component
-
-Set up initialization and the tab-based layout. In V6, all list widgets (`CometChatConversations`, `CometChatUsers`, `CometChatGroups`) are powered by BLoC.
-
-#### Full Example: main.dart
-
-
-
-```dart
-import 'package:flutter/material.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'messages_screen.dart';
-import 'cometchat_config.dart';
-
-void main() => runApp(const MyApp());
-
-class MyApp extends StatelessWidget {
- const MyApp({super.key});
-
- @override
- Widget build(BuildContext context) {
- return MaterialApp(
- title: 'CometChat V6 UI Kit',
- theme: ThemeData(
- colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
- useMaterial3: true,
- ),
- home: const Home(),
- );
- }
-}
-
-class Home extends StatelessWidget {
- const Home({super.key});
-
- Future _initializeAndLogin() async {
- final settings = UIKitSettingsBuilder()
- ..subscriptionType = CometChatSubscriptionType.allUsers
- ..autoEstablishSocketConnection = true
- ..appId = CometChatConfig.appId
- ..region = CometChatConfig.region
- ..authKey = CometChatConfig.authKey;
-
- await CometChatUIKit.init(uiKitSettings: settings.build());
- await CometChatUIKit.login(
- 'cometchat-uid-1',
- onSuccess: (_) => debugPrint('Login Successful'),
- onError: (err) => throw Exception('Login Failed: $err'),
- );
- }
-
- @override
- Widget build(BuildContext context) {
- return FutureBuilder(
- future: _initializeAndLogin(),
- builder: (ctx, snap) {
- if (snap.connectionState != ConnectionState.done) {
- return const Scaffold(
- body: SafeArea(child: Center(child: CircularProgressIndicator())),
- );
- }
- if (snap.hasError) {
- return Scaffold(
- body: SafeArea(
- child: Center(child: Text('Error:\n${snap.error}', textAlign: TextAlign.center)),
- ),
- );
- }
- return const TabsScreen();
- },
- );
- }
-}
-
-class TabsScreen extends StatefulWidget {
- const TabsScreen({super.key});
-
- @override
- State createState() => _TabsScreenState();
-}
-
-class _TabsScreenState extends State {
- int _selectedIndex = 0;
- final PageController _pageController = PageController();
-
- void _onItemTapped(int index) {
- setState(() {
- _selectedIndex = index;
- });
- _pageController.jumpToPage(index);
- }
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: PageView(
- controller: _pageController,
- onPageChanged: (index) {
- setState(() {
- _selectedIndex = index;
- });
- },
- children: [
- CometChatConversations(
- showBackButton: false,
- onItemTap: (conversation) {
- Navigator.push(
- context,
- MaterialPageRoute(
- builder: (context) => MessagesScreen(
- user: conversation.conversationWith is User
- ? conversation.conversationWith as User
- : null,
- group: conversation.conversationWith is Group
- ? conversation.conversationWith as Group
- : null,
- ),
- ),
- );
- },
- ),
- CometChatUsers(),
- CometChatGroups(),
- ],
- ),
- bottomNavigationBar: BottomNavigationBar(
- currentIndex: _selectedIndex,
- onTap: _onItemTapped,
- items: const [
- BottomNavigationBarItem(icon: Icon(Icons.chat), label: "Chat"),
- BottomNavigationBarItem(icon: Icon(Icons.person), label: "Users"),
- BottomNavigationBarItem(icon: Icon(Icons.group), label: "Groups"),
- ],
- ),
- );
- }
-}
-```
-
-
-
-### Step 2: Render the Messages Component
-
-Use the same `MessagesScreen` pattern from [One-to-One Chat](/ui-kit/flutter/v6/flutter-one-to-one-chat#step-2-render-the-messages-component):
-
-
-
-```dart
-import 'package:flutter/material.dart';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
-class MessagesScreen extends StatelessWidget {
- final User? user;
- final Group? group;
-
- const MessagesScreen({super.key, this.user, this.group});
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- appBar: CometChatMessageHeader(user: user, group: group),
- body: SafeArea(
- child: Column(
- children: [
- Expanded(child: CometChatMessageList(user: user, group: group)),
- CometChatMessageComposer(user: user, group: group),
- ],
- ),
- ),
- );
- }
-}
-```
-
-
-
-
-
-***
-
-### Step 3: Run the App
-
-```
-flutter run
-```
-
-This launches the app with the tab-based chat experience. Navigate between Chats, Users, and Groups tabs and interact with the messaging features.
-
-***
-
-## Next Steps
-
-* [Advanced Customizations](/ui-kit/flutter/v6/theme-introduction) — Personalize the chat UI to align with your brand.
-* [Component Styling](/ui-kit/flutter/v6/component-styling) — Fine-tune individual component appearances.
diff --git a/ui-kit/flutter/v6/getting-started.mdx b/ui-kit/flutter/v6/getting-started.mdx
deleted file mode 100644
index 71857eab1..000000000
--- a/ui-kit/flutter/v6/getting-started.mdx
+++ /dev/null
@@ -1,381 +0,0 @@
----
-title: "Getting Started With CometChat Flutter UI Kit V6"
-sidebarTitle: "Getting Started"
----
-
-CometChat UI Kit V6 for Flutter is a package of pre-assembled UI elements built on clean architecture with BLoC state management. It provides essential messaging functionalities with options for light and dark themes, diverse fonts, colors, and extensive customization capabilities.
-
-CometChat UI Kit V6 supports both one-to-one and group conversations. Follow the guide below to initiate conversations from scratch.
-
-## Prerequisites
-
-Before installing the **UI Kit**, you need to create a CometChat application on the CometChat Dashboard, which includes all the necessary data for a chat service, such as users, groups, calls, and messages. You will require the `App ID`, `AuthKey`, and `Region` of your CometChat application when initializing the SDK.
-
-**i. Register on CometChat**
-
-* You need to register on the **CometChat Dashboard** first. [Click here to sign up](https://app.cometchat.com/login).
-
-**ii. Get Your Application Keys**
-
-* Create a **new app**
-* Head over to the **QuickStart** or **API & Auth Keys section** and note the **App ID**, **Auth Key**, and **Region**.
-
-> Each CometChat application can be integrated with a single client app. Within the same application, users can communicate with each other across all platforms, whether they are on mobile devices or on the web.
-
-**iii. Platform & IDE Setup**
-
-* Flutter installed on your system.
-* Android Studio or VS Code with configured Flutter/Dart plugins.
-* Xcode & Pod (CocoaPods) for iOS.
-* An iOS device or emulator with iOS 13.0 or above.
-* Android device or emulator with Android version 7.0 (API 24) or above.
-
-## Getting Started
-
-### **Step 1: Create Flutter application project**
-
-To get started, create a new flutter application project.
-
-***
-
-### **Step 2: Add Dependency**
-
-**1. Install via CLI**
-
-Since V6 is hosted on Cloudsmith (not pub.dev), run this command instead of the standard `flutter pub add`:
-
-```bash
-dart pub add cometchat_chat_uikit:6.0.0-beta1 --hosted-url https://dart.cloudsmith.io/cometchat/cometchat/
-```
-
-**2. Update Pubspec**
-
-Or add it manually to your `pubspec.yaml`:
-
-```yaml pubspec.yaml
-dependencies:
- cometchat_chat_uikit:
- hosted: https://dart.cloudsmith.io/cometchat/cometchat/
- version: 6.0.0-beta1
-```
-
-Final `pubspec.yaml`
-
-```yaml pubspec.yaml
-name: my_chat_app
-description: "A Flutter app with CometChat V6."
-
-publish_to: 'none'
-
-version: 1.0.0+1
-
-environment:
- sdk: ^3.8.0
-
-dependencies:
- flutter:
- sdk: flutter
-
- cometchat_chat_uikit:
- hosted: https://dart.cloudsmith.io/cometchat/cometchat/
- version: 6.0.0-beta1
-
- cupertino_icons: ^1.0.8
-
-dev_dependencies:
- flutter_test:
- sdk: flutter
-
- flutter_lints: ^4.0.0
-
-flutter:
- uses-material-design: true
-```
-
-***
-
-**2. Android App Setup**
-
-Update the `minSdkVersion` in your Android project configuration, located at `android/app/build.gradle`:
-
-```gradle build.gradle
-android {
- defaultConfig {
- minSdk = 24
- // Other configurations...
- }
-}
-```
-
-***
-
-**3. Update iOS Podfile**
-
-In your Podfile (located at `ios/Podfile`), update the minimum iOS version:
-
-```ruby Podfile
-platform :ios, '13.0'
-```
-
-***
-
-**4. Import CometChat UIKit**
-
-In your Dart code, import the CometChat UIKit package:
-
-```dart main.dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-```
-
-> V6 uses a single import. The `cometchat_uikit_shared` package is internalized — no separate import needed.
-
-***
-
-### **Step 3: Initialize UI Kit**
-
-Before using any features from the CometChat UI Kit, initialize it with your app credentials.
-
-1. **Create a Configuration File:**
-
-```dart cometchat_config.dart
-class CometChatConfig {
- static const String appId = "APP_ID"; // Replace with your App ID
- static const String region = "REGION"; // Replace with your App Region
- static const String authKey = "AUTH_KEY"; // Replace with your Auth Key
-}
-```
-
-2. **Initialize the UI Kit:**
-
-```dart main.dart
-import 'cometchat_config.dart';
-
-UIKitSettings uiKitSettings = (UIKitSettingsBuilder()
- ..subscriptionType = CometChatSubscriptionType.allUsers
- ..autoEstablishSocketConnection = true
- ..region = CometChatConfig.region
- ..appId = CometChatConfig.appId
- ..authKey = CometChatConfig.authKey
-).build();
-
-CometChatUIKit.init(
- uiKitSettings: uiKitSettings,
- onSuccess: (successMessage) async {
- debugPrint('CometChat Initialized');
- },
- onError: (error) {
- debugPrint('CometChat Initialization error');
- },
-);
-```
-
-> **V6 difference from V5:** No `extensions` or `aiFeature` parameters needed. Extensions are built-in and handled automatically by `MessageTemplateUtils`.
-
-***
-
-### **Step 4: Login to UI Kit**
-
-Once the UI Kit is initialized, authenticate your user using the `login()` method.
-
-```dart main.dart
-CometChatUIKit.login(
- "cometchat-uid-1", // Replace with a valid UID
- onSuccess: (user) {
- debugPrint('CometChat LoggedIn success');
- },
- onError: (error) {
- debugPrint('CometChat LoggedIn error');
- },
-);
-```
-
-You can test using any of the following pre-generated users:
-
-* `cometchat-uid-1`
-* `cometchat-uid-2`
-* `cometchat-uid-3`
-* `cometchat-uid-4`
-* `cometchat-uid-5`
-
-> For more information, refer to the documentation on [Init](/ui-kit/flutter/v6/methods#init) and [Login](/ui-kit/flutter/v6/methods#login-using-auth-key).
-
-#### **Example: Initialization and Login Combined**
-
-```dart main.dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:flutter/material.dart';
-import 'cometchat_config.dart';
-
-void main() {
- runApp(const MyApp());
-}
-
-class MyApp extends StatelessWidget {
- const MyApp({super.key});
-
- @override
- Widget build(BuildContext context) {
- return MaterialApp(
- title: 'CometChat V6',
- theme: ThemeData(useMaterial3: true),
- home: const InitPage(),
- );
- }
-}
-
-class InitPage extends StatefulWidget {
- const InitPage({super.key});
-
- @override
- State createState() => _InitPageState();
-}
-
-class _InitPageState extends State {
- bool _isInitializing = true;
- String? _error;
-
- @override
- void initState() {
- super.initState();
- _initCometChat();
- }
-
- Future _initCometChat() async {
- UIKitSettings uiKitSettings = (UIKitSettingsBuilder()
- ..subscriptionType = CometChatSubscriptionType.allUsers
- ..autoEstablishSocketConnection = true
- ..region = CometChatConfig.region
- ..appId = CometChatConfig.appId
- ..authKey = CometChatConfig.authKey)
- .build();
-
- CometChatUIKit.init(
- uiKitSettings: uiKitSettings,
- onSuccess: (msg) {
- CometChatUIKit.login(
- "cometchat-uid-1",
- onSuccess: (user) {
- debugPrint('Logged in as: ${user.name}');
- setState(() => _isInitializing = false);
- },
- onError: (error) {
- setState(() {
- _isInitializing = false;
- _error = error.message;
- });
- },
- );
- },
- onError: (error) {
- setState(() {
- _isInitializing = false;
- _error = error.message;
- });
- },
- );
- }
-
- @override
- Widget build(BuildContext context) {
- if (_isInitializing) {
- return const Scaffold(body: Center(child: CircularProgressIndicator()));
- }
- if (_error != null) {
- return Scaffold(body: Center(child: Text('Error: $_error')));
- }
- return const Scaffold(body: Center(child: Text('Ready!')));
- }
-}
-```
-
-***
-
-### **Step 5: Choose a Chat Experience**
-
-Integrate a conversation view that suits your application's UX requirements. Below are the available options:
-
-***
-
-### **1. Conversation List + Message View**
-
-**Best for:** Flutter apps that need a smooth, stack-based navigation between conversations and messages.
-
-**Highlights:**
-
-* **Compact Layout** – Uses `Navigator.push()` for mobile-first navigation.
-* **One-to-One & Group Chats** – Built-in support for private and group conversations.
-* **Real-Time Messaging** – Message list auto-refreshes with CometChat events.
-* **BLoC-Powered** – Predictable state management with `ConversationsBloc` and `MessageListBloc`.
-
-**Use When:**
-
-* You want a clean navigation experience for multiple chat sessions.
-* Your Flutter app supports both direct and group messaging.
-
-[Integrate Conversation List + Message View](./flutter-conversation)
-
-***
-
-### **2. One-to-One / Group Chat**
-
-**Best for:** When a user lands directly into a chat screen, bypassing the conversation list.
-
-In V6, you compose the chat screen using individual widgets:
-
-```dart
-Scaffold(
- body: Column(
- children: [
- CometChatMessageHeader(user: user),
- Expanded(child: CometChatMessageList(user: user)),
- CometChatMessageComposer(user: user),
- ],
- ),
-)
-```
-
-> V6 does not have a combined `CometChatMessages` composite widget. You compose the UI yourself using `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer`.
-
-**Use When:**
-
-* Your chat starts from a specific user or group ID.
-* You want a clean, focused chat interface.
-* Use case involves support, onboarding, or one-time messages.
-
-[Integrate One-to-One / Group Chat](./flutter-one-to-one-chat)
-
-***
-
-### **3. Tab-Based Messaging UI (All-in-One)**
-
-**Best for:** Flutter apps needing a multi-tab experience to access Chat, Users, Calls, and Settings.
-
-**Use When:**
-
-* You need a full-featured chat solution in one UI.
-* Your users require structured navigation between modules.
-
-[Integrate Tab-Based Chat](./flutter-tab-based-chat)
-
-***
-
-## **Build Your Own Chat Experience**
-
-**Best for:** Developers who need complete control over their chat interface.
-
-**Key Areas to Explore:**
-
-* **[Core Features](./core-features)** – Learn about messaging, real-time updates, and other essential capabilities.
-* **[Components](./components-overview)** – Utilize prebuilt UI elements or customize them to fit your design.
-* **[Themes](./theme-introduction)** – Adjust colors, fonts, and styles to match your branding.
-
-***
-
-## **Next Steps**
-
-* **[Integrate Conversation List + Message](/ui-kit/flutter/v6/flutter-conversation)**
-* **[Integrate One-to-One Chat](/ui-kit/flutter/v6/flutter-one-to-one-chat)**
-* **[Integrate Tab-Based Chat](/ui-kit/flutter/v6/flutter-tab-based-chat)**
-* **[Advanced Customizations](/ui-kit/flutter/v6/theme-introduction)**
-
-***
diff --git a/ui-kit/flutter/v6/group-members.mdx b/ui-kit/flutter/v6/group-members.mdx
deleted file mode 100644
index ecd43f52b..000000000
--- a/ui-kit/flutter/v6/group-members.mdx
+++ /dev/null
@@ -1,542 +0,0 @@
----
-title: "Group Members"
-description: "Scrollable list of members in a group with scope indicators, search, and member management actions."
----
-
-`CometChatGroupMembers` renders a scrollable list of members in a specific group with real-time updates, scope indicators (owner/admin/moderator/participant), search, and member management actions (kick, ban, change scope).
-
-
-
-
-
----
-
-## Where It Fits
-
-`CometChatGroupMembers` is a list component that requires a `Group` object. It renders group members and supports actions like kick, ban, and scope change based on the logged-in user's permissions.
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- onItemTap: (groupMember) {
- // Navigate to member profile or chat
- },
-)
-```
-
-
-
----
-
-## Quick Start
-
-Using Navigator:
-
-
-
-```dart
-Navigator.push(context, MaterialPageRoute(
- builder: (context) => CometChatGroupMembers(group: group),
-));
-```
-
-
-
-Embedding as a widget:
-
-
-
-```dart
-@override
-Widget build(BuildContext context) {
- return Scaffold(
- body: SafeArea(
- child: CometChatGroupMembers(group: group),
- ),
- );
-}
-```
-
-
-
-Prerequisites: CometChat SDK initialized, a user logged in, and a valid `Group` object.
-
----
-
-## Filtering Members
-
-Pass a `GroupMembersRequestBuilder` to control what loads:
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- groupMembersRequestBuilder: GroupMembersRequestBuilder(group.guid)
- ..limit = 20
- ..searchKeyword = "john",
-)
-```
-
-
-
-### Filter Recipes
-
-| Recipe | Builder property |
-|---|---|
-| Limit per page | `..limit = 20` |
-| Search by name | `..searchKeyword = "john"` |
-| Filter by scopes | `..scopes = ["admin", "moderator"]` |
-
----
-
-## Actions and Events
-
-### Callback Methods
-
-#### `onItemTap`
-
-Fires when a member row is tapped.
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- onItemTap: (groupMember) {
- // Navigate to member profile
- },
-)
-```
-
-
-
-#### `onItemLongPress`
-
-Fires when a member row is long-pressed. By default shows the member action menu (kick/ban/scope change).
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- onItemLongPress: (groupMember) {
- // Custom long press behavior
- },
-)
-```
-
-
-
-#### `onBack`
-
-Fires when the user presses the back button.
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- onBack: () {
- Navigator.pop(context);
- },
-)
-```
-
-
-
-#### `onSelection`
-
-Fires when members are selected/deselected in multi-select mode.
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- selectionMode: SelectionMode.multiple,
- onSelection: (selectedMembers, context) {
- // Handle selected members
- },
-)
-```
-
-
-
-#### `onError`
-
-Fires on internal errors.
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- onError: (e) {
- debugPrint("Error: ${e.message}");
- },
-)
-```
-
-
-
-#### `onLoad`
-
-Fires when the list is successfully fetched.
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- onLoad: (memberList) {
- debugPrint("Loaded ${memberList.length} members");
- },
-)
-```
-
-
-
-#### `onEmpty`
-
-Fires when the list is empty after loading.
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- onEmpty: () {
- debugPrint("No members found");
- },
-)
-```
-
-
-
-### Global Events
-
-The component emits events via `CometChatGroupEvents`:
-
-
-
-```dart
-class _YourScreenState extends State with CometChatGroupEventListener {
- @override
- void initState() {
- super.initState();
- CometChatGroupEvents.addGroupsListener("listenerId", this);
- }
-
- @override
- void dispose() {
- CometChatGroupEvents.removeGroupsListener("listenerId");
- super.dispose();
- }
-
- @override
- void ccGroupMemberKicked(Action action, User kickedUser, User kickedBy, Group kickedFrom) {
- // Handle member kicked
- }
-
- @override
- void ccGroupMemberBanned(Action action, User bannedUser, User bannedBy, Group bannedFrom) {
- // Handle member banned
- }
-
- @override
- void ccGroupMemberScopeChanged(Action action, User updatedUser, String scopeChangedTo, String scopeChangedFrom, Group group) {
- // Handle scope changed
- }
-}
-```
-
-
-
-### SDK Events (Real-Time, Automatic)
-
-| SDK Listener | Internal behavior |
-|---|---|
-| `onGroupMemberJoined` | Adds member to list |
-| `onGroupMemberLeft` | Removes member from list |
-| `onGroupMemberKicked` | Removes member from list |
-| `onGroupMemberBanned` | Removes member from list |
-| `onGroupMemberScopeChanged` | Updates member scope in list |
-| `onUserOnline` / `onUserOffline` | Updates presence via per-member ValueNotifier (isolated rebuild) |
-| Connection reconnected | Triggers silent refresh |
-
----
-
-## Functionality
-
-| Property | Type | Default | Description |
-|---|---|---|---|
-| `group` | `Group` | **required** | The group whose members to display |
-| `title` | `String?` | `null` | Custom app bar title |
-| `showBackButton` | `bool` | `true` | Toggle back button |
-| `hideAppbar` | `bool?` | `false` | Toggle app bar visibility |
-| `hideSearch` | `bool` | `false` | Toggle search bar |
-| `usersStatusVisibility` | `bool?` | `true` | Show online/offline status |
-| `selectionMode` | `SelectionMode?` | `null` | Enable selection mode |
-| `hideKickMemberOption` | `bool?` | `false` | Hide kick option in action menu |
-| `hideBanMemberOption` | `bool?` | `false` | Hide ban option in action menu |
-| `hideScopeChangeOption` | `bool?` | `false` | Hide scope change option |
-
----
-
-## Custom View Slots
-
-### Leading View
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- leadingView: (context, groupMember) {
- return CircleAvatar(
- child: Text(groupMember.name?[0] ?? ""),
- );
- },
-)
-```
-
-
-
-### Title View
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- titleView: (context, groupMember) {
- return Text(
- groupMember.name ?? "",
- style: TextStyle(fontWeight: FontWeight.bold),
- );
- },
-)
-```
-
-
-
-### Subtitle View
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- subtitleView: (context, groupMember) {
- return Text(
- groupMember.scope ?? "participant",
- style: TextStyle(color: Color(0xFF727272), fontSize: 14),
- );
- },
-)
-```
-
-
-
-### Trailing View
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- trailingView: (context, groupMember) {
- return Chip(label: Text(groupMember.scope ?? ""));
- },
-)
-```
-
-
-
-### List Item View
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- listItemView: (groupMember) {
- return ListTile(
- leading: CircleAvatar(child: Text(groupMember.name?[0] ?? "")),
- title: Text(groupMember.name ?? ""),
- subtitle: Text(groupMember.scope ?? "participant"),
- trailing: Chip(label: Text(groupMember.scope ?? "")),
- );
- },
-)
-```
-
-
-
-### State Views
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- emptyStateView: (context) => Center(child: Text("No members")),
- errorStateView: (context) => Center(child: Text("Something went wrong")),
- loadingStateView: (context) => Center(child: CircularProgressIndicator()),
-)
-```
-
-
-
----
-
-## Menu Options
-
-
-
-```dart
-// Replace all options
-CometChatGroupMembers(
- group: group,
- setOptions: (groupMember, bloc, context) {
- return [
- CometChatOption(
- id: "message",
- iconWidget: Icon(Icons.message),
- title: "Message",
- onClick: () {
- // Open chat with this member
- },
- ),
- ];
- },
-)
-
-// Append to defaults
-CometChatGroupMembers(
- group: group,
- addOptions: (groupMember, bloc, context) {
- return [
- CometChatOption(
- id: "profile",
- iconWidget: Icon(Icons.person),
- title: "View Profile",
- onClick: () {
- // Open member profile
- },
- ),
- ];
- },
-)
-```
-
-
-
----
-
-## Advanced
-
-### BLoC Access
-
-Provide a custom `GroupMembersBloc`:
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- groupMembersBloc: CustomGroupMembersBloc(),
-)
-```
-
-
-
-### Public BLoC Events
-
-| Event | Description |
-|---|---|
-| `LoadGroupMembers` | Load initial members |
-| `LoadMoreGroupMembers` | Load next page (pagination) |
-| `SearchGroupMembers(keyword)` | Search members |
-| `KickMember(groupMember)` | Kick a member from the group |
-| `BanMember(groupMember)` | Ban a member from the group |
-| `ChangeMemberScope(groupMember, newScope)` | Change member's scope |
-| `ToggleMemberSelection(uid)` | Toggle selection state |
-| `ClearMemberSelection` | Clear all selections |
-
-For `ListBase` override hooks (`onItemAdded`, `onItemRemoved`, `onItemUpdated`, `onListCleared`, `onListReplaced`), see [BLoC & Data — ListBase Hooks](/ui-kit/flutter/v6/customization-bloc-data#listbase-hooks).
-
-### Public BLoC Methods
-
-| Method | Returns | Description |
-|---|---|---|
-| `getStatusNotifier(uid)` | `ValueNotifier` | Per-member status notifier for isolated rebuilds |
-
-### Permission-Based Actions
-
-Member actions (kick, ban, scope change) are permission-aware based on the logged-in user's scope:
-
-| Logged-in User Scope | Can Kick | Can Ban | Can Change Scope |
-|---|---|---|---|
-| Owner | All members | All members | All members |
-| Admin | Moderators, Participants | Moderators, Participants | Moderators, Participants |
-| Moderator | Participants | Participants | No |
-| Participant | No | No | No |
-
----
-
-## Style
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- groupMembersStyle: CometChatGroupMembersStyle(
- avatarStyle: CometChatAvatarStyle(
- borderRadius: BorderRadius.circular(8),
- backgroundColor: Color(0xFFFBAA75),
- ),
- statusIndicatorStyle: CometChatStatusIndicatorStyle(),
- changeScopeStyle: CometChatChangeScopeStyle(),
- confirmDialogStyle: CometChatConfirmDialogStyle(),
- ),
-)
-```
-
-
-
-
-
-
-
-### Style Properties
-
-| Property | Description |
-|---|---|
-| `avatarStyle` | Avatar appearance |
-| `statusIndicatorStyle` | Online/offline indicator |
-| `changeScopeStyle` | Scope change dialog style |
-| `confirmDialogStyle` | Kick/ban confirmation dialog style |
-
----
-
-## Next Steps
-
-
-
- Browse available groups
-
-
- Complete group chat implementation
-
-
- Detailed styling reference
-
-
- Browse recent conversations
-
-
diff --git a/ui-kit/flutter/v6/groups.mdx b/ui-kit/flutter/v6/groups.mdx
deleted file mode 100644
index ba5edb50f..000000000
--- a/ui-kit/flutter/v6/groups.mdx
+++ /dev/null
@@ -1,484 +0,0 @@
----
-title: "Groups"
-description: "Scrollable list of all available groups with search, avatars, group type indicators, and member counts."
----
-
-`CometChatGroups` renders a scrollable list of all available groups with real-time updates for group events, search, avatars, group type indicators (public/private/password), and member counts.
-
-
-
-
-
----
-
-## Where It Fits
-
-`CometChatGroups` is a list component. It renders all available groups and emits the selected `Group` via `onItemTap`. Wire it to `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer` to build a group chat layout.
-
-
-
-```dart
-CometChatGroups(
- onItemTap: (context, group) {
- // Navigate to group chat
- },
-)
-```
-
-
-
----
-
-## Quick Start
-
-Using Navigator:
-
-
-
-```dart
-Navigator.push(context, MaterialPageRoute(builder: (context) => const CometChatGroups()));
-```
-
-
-
-Embedding as a widget:
-
-
-
-```dart
-@override
-Widget build(BuildContext context) {
- return Scaffold(
- body: SafeArea(
- child: CometChatGroups(),
- ),
- );
-}
-```
-
-
-
-Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()`, a user logged in, and the UI Kit dependency added.
-
----
-
-## Filtering Groups
-
-Pass a `GroupsRequestBuilder` to control what loads:
-
-
-
-```dart
-CometChatGroups(
- groupsRequestBuilder: GroupsRequestBuilder()
- ..limit = 10
- ..searchKeyword = "team",
-)
-```
-
-
-
-### Filter Recipes
-
-| Recipe | Builder property |
-|---|---|
-| Limit per page | `..limit = 10` |
-| Search by keyword | `..searchKeyword = "team"` |
-| Joined groups only | `..joinedOnly = true` |
-| Filter by tags | `..tags = ["project"]` |
-| With tags | `..withTags = true` |
-
----
-
-## Actions and Events
-
-### Callback Methods
-
-#### `onItemTap`
-
-Fires when a group row is tapped. Primary navigation hook.
-
-
-
-```dart
-CometChatGroups(
- onItemTap: (context, group) {
- // Navigate to group chat screen
- },
-)
-```
-
-
-
-#### `onItemLongPress`
-
-Fires when a group row is long-pressed.
-
-
-
-```dart
-CometChatGroups(
- onItemLongPress: (context, group) {
- // Show context menu
- },
-)
-```
-
-
-
-#### `onBack`
-
-Fires when the user presses the back button in the app bar.
-
-
-
-```dart
-CometChatGroups(
- onBack: () {
- Navigator.pop(context);
- },
-)
-```
-
-
-
-#### `onSelection`
-
-Fires when groups are selected/deselected in multi-select mode.
-
-
-
-```dart
-CometChatGroups(
- selectionMode: SelectionMode.multiple,
- onSelection: (selectedGroups, context) {
- // Handle selected groups
- },
-)
-```
-
-
-
-#### `onError`
-
-Fires on internal errors.
-
-
-
-```dart
-CometChatGroups(
- onError: (e) {
- debugPrint("Error: ${e.message}");
- },
-)
-```
-
-
-
-#### `onLoad`
-
-Fires when the list is successfully fetched and loaded.
-
-
-
-```dart
-CometChatGroups(
- onLoad: (groupList) {
- debugPrint("Loaded ${groupList.length} groups");
- },
-)
-```
-
-
-
-#### `onEmpty`
-
-Fires when the list is empty after loading.
-
-
-
-```dart
-CometChatGroups(
- onEmpty: () {
- debugPrint("No groups found");
- },
-)
-```
-
-
-
-### SDK Events (Real-Time, Automatic)
-
-The component listens to these SDK events internally. No manual setup needed.
-
-| SDK Listener | Internal behavior |
-|---|---|
-| `onGroupMemberJoined` | Updates group member count |
-| `onGroupMemberLeft` | Updates group member count |
-| `onGroupMemberKicked` | Updates group member count, removes group if logged-in user was kicked |
-| `onGroupMemberBanned` | Updates group member count, removes group if logged-in user was banned |
-| `onMemberAddedToGroup` | Updates group member count |
-| `ccGroupCreated` | Adds new group to list |
-| `ccGroupDeleted` | Removes group from list |
-| Connection reconnected | Triggers silent refresh |
-
----
-
-## Functionality
-
-| Property | Type | Default | Description |
-|---|---|---|---|
-| `title` | `String?` | `null` | Custom app bar title |
-| `showBackButton` | `bool` | `true` | Toggle back button |
-| `hideAppbar` | `bool?` | `false` | Toggle app bar visibility |
-| `hideSearch` | `bool` | `false` | Toggle search bar |
-| `selectionMode` | `SelectionMode?` | `null` | Enable selection mode (`single` or `multiple`) |
-| `searchPlaceholder` | `String?` | `null` | Search placeholder text |
-
----
-
-## Custom View Slots
-
-### Leading View
-
-Replace the avatar / left section.
-
-
-
-```dart
-CometChatGroups(
- leadingView: (context, group) {
- return CircleAvatar(
- child: Text(group.name?[0] ?? "G"),
- );
- },
-)
-```
-
-
-
-### Title View
-
-Replace the group name / title text.
-
-
-
-```dart
-CometChatGroups(
- titleView: (context, group) {
- return Text(
- group.name ?? "",
- style: TextStyle(fontWeight: FontWeight.bold),
- );
- },
-)
-```
-
-
-
-### Subtitle View
-
-Replace the subtitle text below the group name.
-
-
-
-```dart
-CometChatGroups(
- subtitleView: (context, group) {
- return Text(
- "${group.membersCount} members",
- style: TextStyle(color: Color(0xFF727272), fontSize: 14),
- );
- },
-)
-```
-
-
-
-### Trailing View
-
-Replace the right section of each group item.
-
-
-
-```dart
-CometChatGroups(
- trailingView: (context, group) {
- return Text(group.type ?? "");
- },
-)
-```
-
-
-
-### List Item View
-
-Replace the entire list item row.
-
-
-
-```dart
-CometChatGroups(
- listItemView: (group) {
- return ListTile(
- leading: CircleAvatar(child: Text(group.name?[0] ?? "G")),
- title: Text(group.name ?? ""),
- subtitle: Text("${group.membersCount} members"),
- );
- },
-)
-```
-
-
-
-### State Views
-
-
-
-```dart
-CometChatGroups(
- emptyStateView: (context) => Center(child: Text("No groups found")),
- errorStateView: (context) => Center(child: Text("Something went wrong")),
- loadingStateView: (context) => Center(child: CircularProgressIndicator()),
-)
-```
-
-
-
----
-
-## Common Patterns
-
-### Minimal list — hide all chrome
-
-
-
-```dart
-CometChatGroups(
- hideAppbar: true,
- hideSearch: true,
-)
-```
-
-
-
-### Joined groups only
-
-
-
-```dart
-CometChatGroups(
- groupsRequestBuilder: GroupsRequestBuilder()
- ..joinedOnly = true,
-)
-```
-
-
-
----
-
-## Advanced
-
-### BLoC Access
-
-Provide a custom `GroupsBloc` to override behavior:
-
-
-
-```dart
-CometChatGroups(
- groupsBloc: CustomGroupsBloc(),
-)
-```
-
-
-
-### Extending GroupsBloc
-
-`GroupsBloc` uses the `ListBase` mixin with override hooks:
-
-
-
-```dart
-class CustomGroupsBloc extends GroupsBloc {
- @override
- void onItemAdded(Group item, List updatedList) {
- // Custom sorting logic
- super.onItemAdded(item, updatedList);
- }
-
- @override
- void onListReplaced(List previousList, List newList) {
- // Filter out specific groups
- final filtered = newList.where((g) => g.membersCount > 0).toList();
- super.onListReplaced(previousList, filtered);
- }
-}
-```
-
-
-
-For `ListBase` override hooks (`onItemAdded`, `onItemRemoved`, `onItemUpdated`, `onListCleared`, `onListReplaced`), see [BLoC & Data — ListBase Hooks](/ui-kit/flutter/v6/customization-bloc-data#listbase-hooks).
-
-### Public BLoC Events
-
-| Event | Description |
-|---|---|
-| `LoadGroups({searchKeyword, silent})` | Load initial groups. `silent: true` keeps existing list visible. |
-| `LoadMoreGroups()` | Load next page (pagination) |
-| `RefreshGroups()` | Refresh the list |
-| `SearchGroups(keyword)` | Search groups with debouncing |
-
----
-
-## Style
-
-
-
-```dart
-CometChatGroups(
- groupsStyle: CometChatGroupsStyle(
- avatarStyle: CometChatAvatarStyle(
- borderRadius: BorderRadius.circular(8),
- backgroundColor: Color(0xFFFBAA75),
- ),
- statusIndicatorStyle: CometChatStatusIndicatorStyle(),
- ),
-)
-```
-
-
-
-
-
-
-
-### Style Properties
-
-| Property | Description |
-|---|---|
-| `backgroundColor` | List background color |
-| `avatarStyle` | Avatar appearance |
-| `statusIndicatorStyle` | Group type indicator |
-| `searchBoxStyle` | Search box appearance |
-
-See [Component Styling](/ui-kit/flutter/v6/component-styling) for the full reference.
-
----
-
-## Next Steps
-
-
-
- View and manage group members
-
-
- Browse recent conversations
-
-
- Detailed styling reference
-
-
- Complete group chat implementation
-
-
diff --git a/ui-kit/flutter/v6/guide-block-unblock-user.mdx b/ui-kit/flutter/v6/guide-block-unblock-user.mdx
deleted file mode 100644
index 98f0bcf6c..000000000
--- a/ui-kit/flutter/v6/guide-block-unblock-user.mdx
+++ /dev/null
@@ -1,86 +0,0 @@
----
-title: "Implementing Block/Unblock User in Flutter with CometChat UIKit"
-sidebarTitle: "Block/Unblock User"
----
-
-Enable users to block and unblock other users in your Flutter chat app using CometChat's `blockUsers` and `unblockUsers` methods.
-
-## Overview
-
-The Block User feature lets one user prevent another from sending messages or interacting with them. Essential for user privacy, spam control, and moderation.
-
-## Prerequisites
-
-- A Flutter project with CometChat UIKit Flutter V6 installed
-- Initialized CometChat credentials (`appID`, `region`, `authKey`)
-
-## Components
-
-| Component | Role |
-|:---|:---|
-| `CometChatUIKit.blockUsers([...])` | SDK method to block specified user(s) |
-| `CometChatUIKit.unblockUsers([...])` | SDK method to unblock specified user(s) |
-| `ElevatedButton` | Flutter widget for block/unblock actions |
-
-## Integration Steps
-
-### Add "Block User" Button
-
-
-
-```dart
-ElevatedButton(
- onPressed: () async {
- try {
- await CometChatUIKit.blockUsers([user.uid]);
- ScaffoldMessenger.of(context).showSnackBar(
- SnackBar(content: Text('${user.name} has been blocked')),
- );
- } catch (e) {
- ScaffoldMessenger.of(context).showSnackBar(
- SnackBar(content: Text('Error blocking user: $e')),
- );
- }
- },
- child: Text('Block User'),
-)
-```
-
-
-
-### Add "Unblock User" Button
-
-
-
-```dart
-ElevatedButton(
- onPressed: () async {
- try {
- await CometChatUIKit.unblockUsers([user.uid]);
- ScaffoldMessenger.of(context).showSnackBar(
- SnackBar(content: Text('${user.name} has been unblocked')),
- );
- } catch (e) {
- ScaffoldMessenger.of(context).showSnackBar(
- SnackBar(content: Text('Error unblocking user: $e')),
- );
- }
- },
- child: Text('Unblock User'),
-)
-```
-
-
-
-## Customization Options
-
-- Conditional Rendering: Display "Block" or "Unblock" based on `user.blockedByMe` state
-- Modal Confirmation: Wrap actions in `showDialog` for confirmation prompts
-- Self-Block Prevention: Disable the button if `user.uid == loggedInUser.uid`
-
-## Summary
-
-| Feature | Method |
-|:---|:---|
-| Block User | `CometChatUIKit.blockUsers([...])` |
-| Unblock User | `CometChatUIKit.unblockUsers([...])` |
diff --git a/ui-kit/flutter/v6/guide-call-log-details.mdx b/ui-kit/flutter/v6/guide-call-log-details.mdx
deleted file mode 100644
index 9332d44f0..000000000
--- a/ui-kit/flutter/v6/guide-call-log-details.mdx
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: "Call Log Details"
-sidebarTitle: "Call Log Details"
----
-
-Provide a post-call details screen with metadata, participants, history, and recordings using CometChat V6 UIKit.
-
-## Overview
-
-The Call Log Details feature displays detailed information about a specific call, including participants, duration, timestamps, and recordings (if available).
-
-## Components
-
-| Component | Role |
-|:---|:---|
-| `CometChatCallLogs` | Lists call logs; tap to view details |
-| `CallLogRequestBuilder` | Filters call logs by criteria |
-
-## Integration
-
-### Navigate to Call Details
-
-
-
-```dart
-CometChatCallLogs(
- onItemClick: (callLog) {
- Navigator.push(
- context,
- MaterialPageRoute(
- builder: (_) => CallLogDetailScreen(callLog: callLog),
- ),
- );
- },
-)
-```
-
-
-
-### Build a Call Detail Screen
-
-
-
-```dart
-class CallLogDetailScreen extends StatelessWidget {
- final CallLog callLog;
-
- const CallLogDetailScreen({required this.callLog, super.key});
-
- @override
- Widget build(BuildContext context) {
- final initiatedAt = DateTime.fromMillisecondsSinceEpoch(
- (callLog.initiatedAt ?? 0) * 1000,
- );
-
- return Scaffold(
- appBar: AppBar(title: const Text("Call Details")),
- body: Padding(
- padding: const EdgeInsets.all(16),
- child: Column(
- crossAxisAlignment: CrossAxisAlignment.start,
- children: [
- Text("Status: ${callLog.status ?? 'Unknown'}"),
- Text("Type: ${callLog.type ?? 'Unknown'}"),
- Text("Duration: ${callLog.totalDurationInMinutes ?? 0} min"),
- Text("Time: $initiatedAt"),
- if (callLog.hasRecording == true)
- const Text("Recording available"),
- ],
- ),
- ),
- );
- }
-}
-```
-
-
-
-## Filtering Call Logs
-
-
-
-```dart
-CometChatCallLogs(
- callLogsRequestBuilder: CallLogRequestBuilder()
- ..limit = 20
- ..hasRecording = true,
-)
-```
-
-
diff --git a/ui-kit/flutter/v6/guide-group-chat.mdx b/ui-kit/flutter/v6/guide-group-chat.mdx
deleted file mode 100644
index c157201e3..000000000
--- a/ui-kit/flutter/v6/guide-group-chat.mdx
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: "Group Chat"
-sidebarTitle: "Group Chat"
----
-
-Build group chat functionality in your Flutter app using CometChat V6 UIKit. Create/join groups, view members, manage roles, and moderate participation.
-
-## Overview
-
-V6 provides `CometChatGroups` and `CometChatGroupMembers` widgets powered by BLoC for group management.
-
-## Components
-
-| Component | Role |
-|:---|:---|
-| `CometChatGroups` | Lists available groups |
-| `CometChatGroupMembers` | Displays and manages group members |
-| `CometChatMessageHeader` | Shows group info in chat header |
-| `CometChatMessageList` | Displays group messages |
-| `CometChatMessageComposer` | Sends messages to group |
-
-## Integration
-
-### Display Groups List
-
-
-
-```dart
-CometChatGroups(
- onItemTap: (group) {
- Navigator.push(
- context,
- MaterialPageRoute(
- builder: (_) => Scaffold(
- appBar: CometChatMessageHeader(group: group),
- body: SafeArea(
- child: Column(
- children: [
- Expanded(child: CometChatMessageList(group: group)),
- CometChatMessageComposer(group: group),
- ],
- ),
- ),
- ),
- ),
- );
- },
-)
-```
-
-
-
-### Display Group Members
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- onItemTap: (groupMember) {
- // Handle member tap
- },
-)
-```
-
-
-
-### Manage Members
-
-V6 provides built-in options for member management:
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- hideKickMemberOption: false,
- hideBanMemberOption: false,
- hideScopeChangeOption: false,
-)
-```
-
-
-
-## Key V6 Differences
-
-| Aspect | V5 | V6 |
-|---|---|---|
-| Composite widget | `CometChatGroupsWithMessages` | Not available — compose manually |
-| State management | GetX | BLoC (`GroupsBloc`) |
-| Member management | Via configuration objects | Direct widget properties |
diff --git a/ui-kit/flutter/v6/guide-message-agentic-flow.mdx b/ui-kit/flutter/v6/guide-message-agentic-flow.mdx
deleted file mode 100644
index 6f0f76bd5..000000000
--- a/ui-kit/flutter/v6/guide-message-agentic-flow.mdx
+++ /dev/null
@@ -1,87 +0,0 @@
----
-title: "Message Agentic Flow"
-sidebarTitle: "Message Agentic Flow"
----
-
-Implement agentic message flows in your Flutter app using CometChat V6 UIKit. This guide covers how to integrate AI-powered message handling with the chat interface.
-
-## Overview
-
-The Message Agentic Flow feature enables AI-driven interactions within your chat application. In V6, AI features are handled through `MessageTemplateUtils` rather than explicit extension registration.
-
-## Integration
-
-### Enable AI Features
-
-Ensure AI features are enabled on your CometChat Dashboard. V6 handles AI integration internally.
-
-### Custom AI Message Handling
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- templates: [
- CometChatMessageTemplate(
- type: "ai_response",
- category: MessageCategoryConstants.custom,
- contentView: (baseMessage, context, alignment, {additionalConfigurations}) {
- // Custom rendering for AI agent messages
- return Container(
- padding: const EdgeInsets.all(12),
- decoration: BoxDecoration(
- color: Color(0xFFEDEAFA),
- borderRadius: BorderRadius.circular(12),
- ),
- child: Column(
- crossAxisAlignment: CrossAxisAlignment.start,
- children: [
- Row(
- children: [
- Icon(Icons.smart_toy, color: Color(0xFF6852D6), size: 16),
- SizedBox(width: 4),
- Text("AI Assistant", style: TextStyle(
- color: Color(0xFF6852D6),
- fontWeight: FontWeight.bold,
- fontSize: 12,
- )),
- ],
- ),
- SizedBox(height: 8),
- Text((baseMessage as TextMessage).text),
- ],
- ),
- );
- },
- ),
- ],
-)
-```
-
-
-
-### AI Assistant Chat History
-
-Use the `CometChatAIAssistantChatHistory` widget to display past AI interactions:
-
-
-
-```dart
-CometChatAIAssistantChatHistory(
- user: user,
- style: CometChatAIAssistantChatHistoryStyle(
- backgroundColor: const Color(0xFFFFFAF6),
- ),
-)
-```
-
-
-
-## Key V6 Differences
-
-| Aspect | V5 | V6 |
-|---|---|---|
-| AI extension registration | Explicit via `UIKitSettings.aiFeature` | Handled internally via `MessageTemplateUtils` |
-| Custom AI templates | Via `CometChatUIKit.getDataSource()` | Via `MessageTemplateUtils` and direct template injection |
-| AI Assistant widget | `CometChatAIAssistantChatHistory` | Same widget, same API |
diff --git a/ui-kit/flutter/v6/guide-message-privately.mdx b/ui-kit/flutter/v6/guide-message-privately.mdx
deleted file mode 100644
index a764f1c40..000000000
--- a/ui-kit/flutter/v6/guide-message-privately.mdx
+++ /dev/null
@@ -1,62 +0,0 @@
----
-title: "Message Privately"
-sidebarTitle: "Message Privately"
----
-
-Start a direct 1:1 chat from a profile or list in your Flutter app using CometChat V6 UIKit.
-
-## Overview
-
-The "Message Privately" feature allows users to initiate a direct conversation with another user from any context — a group member list, user profile, or search results.
-
-## Integration
-
-### Navigate to Private Chat
-
-
-
-```dart
-void openPrivateChat(BuildContext context, User user) {
- Navigator.push(
- context,
- MaterialPageRoute(
- builder: (_) => Scaffold(
- appBar: CometChatMessageHeader(user: user),
- body: SafeArea(
- child: Column(
- children: [
- Expanded(child: CometChatMessageList(user: user)),
- CometChatMessageComposer(user: user),
- ],
- ),
- ),
- ),
- ),
- );
-}
-```
-
-
-
-### From Group Members List
-
-
-
-```dart
-CometChatGroupMembers(
- group: group,
- onItemTap: (groupMember) {
- // Convert GroupMember to User for private messaging
- User user = User(
- uid: groupMember.uid,
- name: groupMember.name,
- avatar: groupMember.avatar,
- );
- openPrivateChat(context, user);
- },
-)
-```
-
-
-
-
diff --git a/ui-kit/flutter/v6/guide-new-chat.mdx b/ui-kit/flutter/v6/guide-new-chat.mdx
deleted file mode 100644
index fa962d94a..000000000
--- a/ui-kit/flutter/v6/guide-new-chat.mdx
+++ /dev/null
@@ -1,94 +0,0 @@
----
-title: "New Chat"
-sidebarTitle: "New Chat"
----
-
-Offer a unified discovery screen for users and groups and launch new chats quickly using CometChat V6 UIKit.
-
-## Overview
-
-The "New Chat" feature provides a screen where users can browse available users and groups to start a new conversation.
-
-## Integration
-
-### Create a New Chat Screen
-
-
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:flutter/material.dart';
-
-class NewChatScreen extends StatelessWidget {
- const NewChatScreen({super.key});
-
- void _openChat(BuildContext context, {User? user, Group? group}) {
- Navigator.push(
- context,
- MaterialPageRoute(
- builder: (_) => Scaffold(
- appBar: CometChatMessageHeader(user: user, group: group),
- body: SafeArea(
- child: Column(
- children: [
- Expanded(child: CometChatMessageList(user: user, group: group)),
- CometChatMessageComposer(user: user, group: group),
- ],
- ),
- ),
- ),
- ),
- );
- }
-
- @override
- Widget build(BuildContext context) {
- return DefaultTabController(
- length: 2,
- child: Scaffold(
- appBar: AppBar(
- title: const Text('New Chat'),
- bottom: const TabBar(
- tabs: [
- Tab(text: 'Users'),
- Tab(text: 'Groups'),
- ],
- ),
- ),
- body: TabBarView(
- children: [
- CometChatUsers(
- hideAppbar: true,
- onItemTap: (user) => _openChat(context, user: user),
- ),
- CometChatGroups(
- hideAppbar: true,
- onItemTap: (group) => _openChat(context, group: group),
- ),
- ],
- ),
- ),
- );
- }
-}
-```
-
-
-
-### Launch from a FAB
-
-
-
-```dart
-FloatingActionButton(
- onPressed: () {
- Navigator.push(
- context,
- MaterialPageRoute(builder: (_) => const NewChatScreen()),
- );
- },
- child: const Icon(Icons.chat),
-)
-```
-
-
diff --git a/ui-kit/flutter/v6/guide-overview.mdx b/ui-kit/flutter/v6/guide-overview.mdx
deleted file mode 100644
index 86311f450..000000000
--- a/ui-kit/flutter/v6/guide-overview.mdx
+++ /dev/null
@@ -1,22 +0,0 @@
----
-title: "Overview"
-sidebarTitle: "Overview"
----
-
-> This page indexes focused, task-oriented feature guides for the Flutter V6 UI Kit. Each guide shows how to implement a specific capability end-to-end using V6 UI kit components.
-
-## When to Use These Guides
-
-Use these after finishing [Getting Started](/ui-kit/flutter/v6/getting-started) and wiring a basic conversations/messages experience. Add them incrementally to deepen functionality without rebuilding fundamentals.
-
-## Guide Directory
-
-| Guide | Description |
-|:------|:------------|
-| [Block / Unblock User](/ui-kit/flutter/v6/guide-block-unblock-user) | Let users block or unblock others; enforce privacy by hiding interaction options and preventing message flow. |
-| [Group Chat](/ui-kit/flutter/v6/guide-group-chat) | Create/join groups, view members, add/remove users, manage roles, and moderate participation. |
-| [Message Privately](/ui-kit/flutter/v6/guide-message-privately) | Start a direct 1:1 chat from a profile or list. |
-| [New Chat](/ui-kit/flutter/v6/guide-new-chat) | Offer a unified discovery screen for users and groups and launch new chats quickly. |
-| [Threaded Messages](/ui-kit/flutter/v6/guide-threaded-messages) | Enable threaded replies: open parent message context, browse replies, and compose within a focused thread. |
-
-
diff --git a/ui-kit/flutter/v6/guide-threaded-messages.mdx b/ui-kit/flutter/v6/guide-threaded-messages.mdx
deleted file mode 100644
index 0e0ea924e..000000000
--- a/ui-kit/flutter/v6/guide-threaded-messages.mdx
+++ /dev/null
@@ -1,118 +0,0 @@
----
-title: "Threaded Messages"
-sidebarTitle: "Threaded Messages"
----
-
-Enhance your Flutter chat app with threaded messaging using CometChat V6's `CometChatMessageList` and `CometChatThreadedHeader` components.
-
-## Overview
-
-- Reply to specific messages to start focused sub-conversations
-- View all replies grouped under the parent message
-- Seamlessly switch back to the main conversation
-
-## Prerequisites
-
-- A Flutter project with CometChat UIKit Flutter V6 installed
-- Initialized CometChat credentials
-
-## Components
-
-| Component | Role |
-|:---|:---|
-| `CometChatMessageList` | Displays main chat; provides `onThreadRepliesClick` callback |
-| `CometChatThreadedHeader` | Shows the parent message and thread context |
-| `CometChatMessageComposer` | Sends new messages; pass `parentMessageId` for replies |
-
-## Integration Steps
-
-### Show the "Reply in Thread" Option
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- onThreadRepliesClick: (BaseMessage message) {
- Navigator.push(
- context,
- MaterialPageRoute(
- builder: (_) => ThreadScreen(parentMessage: message, user: user),
- ),
- );
- },
-)
-```
-
-
-
-### Navigate to the Thread Screen
-
-In V6, compose the thread screen using individual widgets:
-
-
-
-```dart
-class ThreadScreen extends StatelessWidget {
- final BaseMessage parentMessage;
- final User? user;
- final Group? group;
-
- const ThreadScreen({required this.parentMessage, this.user, this.group, super.key});
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- appBar: AppBar(title: Text("Thread")),
- body: Column(
- children: [
- CometChatThreadedHeader(message: parentMessage),
- Expanded(
- child: CometChatMessageList(
- user: user,
- group: group,
- parentMessageId: parentMessage.id,
- ),
- ),
- CometChatMessageComposer(
- user: user,
- group: group,
- parentMessageId: parentMessage.id,
- ),
- ],
- ),
- );
- }
-}
-```
-
-
-
-### Send a Threaded Message
-
-
-
-```dart
-CometChatMessageComposer(
- user: user,
- parentMessageId: parentMessage.id,
-)
-```
-
-
-
-## Customization Options
-
-- Header Styling: Customize `CometChatThreadedHeader` appearance
-- Composer Placeholder: Change placeholder text based on thread context
-- Empty State: Display "No replies yet" when thread is empty
-
-## Summary
-
-| Feature | Component / Method |
-|:---|:---|
-| Show thread option | `CometChatMessageList.onThreadRepliesClick` |
-| Thread view screen | Custom `ThreadScreen` widget |
-| Display threaded messages | `CometChatMessageList(parentMessageId: ...)` |
-| Send threaded message | `CometChatMessageComposer(parentMessageId: ...)` |
-| Thread header | `CometChatThreadedHeader(message: ...)` |
diff --git a/ui-kit/flutter/v6/incoming-call.mdx b/ui-kit/flutter/v6/incoming-call.mdx
deleted file mode 100644
index 3890ebb27..000000000
--- a/ui-kit/flutter/v6/incoming-call.mdx
+++ /dev/null
@@ -1,238 +0,0 @@
----
-title: "Incoming Call"
-description: "Full-screen overlay for incoming audio and video calls with accept/reject options."
----
-
-`CometChatIncomingCall` displays a full-screen overlay when an incoming call is received, showing caller info with accept and reject buttons.
-
----
-
-## Where It Fits
-
-Typically triggered automatically when `CallNavigationContext.navigatorKey` is set in your `MaterialApp`.
-
-
-
-```dart
-MaterialApp(navigatorKey: CallNavigationContext.navigatorKey, home: YourHomeScreen())
-```
-
-
-
----
-
-## Quick Start
-
-### Automatic (Recommended)
-
-
-
-```dart
-MaterialApp(navigatorKey: CallNavigationContext.navigatorKey, home: YourHomeScreen())
-```
-
-
-
-### Manual Launch
-
-
-
-```dart
-Navigator.push(context, MaterialPageRoute(
- builder: (context) => CometChatIncomingCall(user: user, call: callObject),
-));
-```
-
-
-
-Prerequisites: CometChat SDK initialized, Calls UIKit added, `callingExtension` set. See [Call Features](/ui-kit/flutter/call-features).
-
----
-
-## Actions
-
-#### `onAccept`
-
-
-
-```dart
-CometChatIncomingCall(user: user, call: callObject,
- onAccept: (BuildContext context, Call call) { /* Custom accept */ },
-)
-```
-
-
-
-#### `onDecline`
-
-
-
-```dart
-CometChatIncomingCall(user: user, call: callObject,
- onDecline: (BuildContext context, Call call) { /* Custom decline */ },
-)
-```
-
-
-
-#### `onError`
-
-
-
-```dart
-CometChatIncomingCall(user: user, call: callObject,
- onError: (e) { debugPrint("Error: ${e.message}"); },
-)
-```
-
-
-
-
-
----
-
-## Functionality
-
-| Property | Type | Description |
-|---|---|---|
-| `user` | `User?` | Caller user object |
-| `call` | `Call` | Call object (required) |
-| `callSettingsBuilder` | `CallSettingsBuilder?` | Configure call settings |
-| `height` / `width` | `double?` | Widget dimensions |
-| `callIcon` | `Widget?` | Custom call type icon |
-| `acceptButtonText` | `String?` | Custom accept button text |
-| `declineButtonText` | `String?` | Custom decline button text |
-| `disableSoundForCalls` | `bool?` | Disable incoming call sound |
-| `customSoundForCalls` | `String?` | Custom sound asset path |
-
----
-
-## Custom View Slots
-
-### Item View
-
-
-
-```dart
-CometChatIncomingCall(user: user, call: callObject,
- itemView: (context, call) { return Container(); },
-)
-```
-
-
-
-### Leading View
-
-
-
-```dart
-CometChatIncomingCall(user: user, call: callObject,
- leadingView: (context, call) {
- return CircleAvatar(radius: 40, backgroundImage: NetworkImage(call.sender?.avatar ?? ""));
- },
-)
-```
-
-
-
-### Title View
-
-
-
-```dart
-CometChatIncomingCall(user: user, call: callObject,
- titleView: (context, call) {
- return Text(call.sender?.name ?? "Unknown",
- style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white));
- },
-)
-```
-
-
-
-### Subtitle View
-
-
-
-```dart
-CometChatIncomingCall(user: user, call: callObject,
- subTitleView: (context, call) {
- final type = call.type == CometChatConstants.CALL_TYPE_VIDEO ? "Video" : "Audio";
- return Text("Incoming $type Call", style: TextStyle(fontSize: 14, color: Colors.white70));
- },
-)
-```
-
-
-
-### Trailing View
-
-
-
-```dart
-CometChatIncomingCall(user: user, call: callObject,
- trailingView: (context, call) {
- return Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [
- ElevatedButton(onPressed: () {}, child: Text("Reject"),
- style: ElevatedButton.styleFrom(backgroundColor: Colors.red)),
- ElevatedButton(onPressed: () {}, child: Text("Accept"),
- style: ElevatedButton.styleFrom(backgroundColor: Colors.green)),
- ]);
- },
-)
-```
-
-
-
----
-
-## Style
-
-
-
-```dart
-CometChatIncomingCall(user: user, call: callObject,
- incomingCallStyle: CometChatIncomingCallStyle(
- backgroundColor: Color(0xFFEDEAFA),
- avatarStyle: CometChatAvatarStyle(backgroundColor: Color(0xFFAA9EE8), borderRadius: BorderRadius.circular(7.5)),
- acceptButtonColor: Color(0xFF6852D6),
- declineButtonColor: Colors.white,
- declineTextColor: Color(0xFFF44649),
- callIconColor: Color(0xFF6852D6),
- ),
-)
-```
-
-
-
-| Property | Description |
-|---|---|
-| `backgroundColor` | Background color |
-| `avatarStyle` | Caller avatar appearance |
-| `acceptButtonColor` | Accept button background |
-| `declineButtonColor` | Decline button background |
-| `declineTextColor` | Decline button text color |
-| `callIconColor` | Call type icon color |
-
----
-
-## Key V6 Differences
-
-| Aspect | V5 | V6 |
-|---|---|---|
-| Subtitle | Static `String?` | Dynamic `Widget? Function(BuildContext, Call)?` |
-| Decline icon | URL-based `String?` | Widget-based |
-| Custom views | Limited | Full `titleView`, `subTitleView`, `leadingView`, `trailingView`, `itemView` |
-| State management | GetX controller | BLoC (`IncomingCallBloc`) |
-| Removed | `theme`, `avatarStyle`, `cardStyle`, `ongoingCallConfiguration` | Integrated into main style |
-
----
-
-## Next Steps
-
-
- Manage outgoing calls
- Add call buttons
- Complete calling setup
- Styling reference
-
diff --git a/ui-kit/flutter/v6/localize.mdx b/ui-kit/flutter/v6/localize.mdx
deleted file mode 100644
index ede87425f..000000000
--- a/ui-kit/flutter/v6/localize.mdx
+++ /dev/null
@@ -1,166 +0,0 @@
----
-title: "Localize"
----
-
-## Overview
-
-CometChat V6 UI Kit provides language localization to adapt to the language of a specific country or region. The `CometChatLocalize` class allows you to detect the language of your users based on their device settings and set the language accordingly.
-
-The UI Kit supports 19 languages:
-
-* Arabic (ar), German (de), English (en, en-GB), Spanish (es), French (fr), Hindi (hi), Hungarian (hu), Japanese (ja), Korean (ko), Lithuanian (lt), Malay (ms), Dutch (nl), Portuguese (pt), Russian (ru), Swedish (sv), Turkish (tr), Chinese (zh, zh-TW)
-
-## Usage
-
-### Integration
-
-Add the following dependency in `pubspec.yaml`:
-
-
-
-```yaml
-flutter_localizations:
- sdk: flutter
-```
-
-
-
-***
-
-Update MaterialApp Localizations Delegates:
-
-
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:cometchat_uikit_shared/l10n/translations.dart' as cc;
-import 'package:flutter/material.dart';
-import 'package:flutter_localizations/flutter_localizations.dart';
-
-class MyApp extends StatelessWidget {
- const MyApp({super.key});
-
- @override
- Widget build(BuildContext context) {
- return MaterialApp(
- supportedLocales: const [
- Locale('en'), Locale('en', 'GB'), Locale('ar'), Locale('de'),
- Locale('es'), Locale('fr'), Locale('hi'), Locale('hu'),
- Locale('ja'), Locale('ko'), Locale('lt'), Locale('ms'),
- Locale('nl'), Locale('pt'), Locale('ru'), Locale('sv'),
- Locale('tr'), Locale('zh'), Locale('zh', 'TW'),
- ],
- localizationsDelegates: const [
- cc.Translations.delegate,
- GlobalMaterialLocalizations.delegate,
- GlobalWidgetsLocalizations.delegate,
- GlobalCupertinoLocalizations.delegate,
- ],
- theme: ThemeData(
- appBarTheme: AppBarTheme(scrolledUnderElevation: 0.0),
- ),
- title: 'CometChat Flutter App',
- home: YourHomeScreen(),
- debugShowCheckedModeBanner: false,
- );
- }
-}
-```
-
-
-
-***
-
-You can also translate specific strings:
-
-
-
-```dart
-String translatedString = Translations.of(context).users;
-Text(translatedString);
-```
-
-
-
-### Customizing UI Kit Translations for a Specific Language
-
-Override a specific language's default translations by creating a custom localization class:
-
-
-
-```dart
-import 'dart:async';
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart' as cc;
-import 'package:flutter/foundation.dart';
-import 'package:flutter/material.dart';
-
-class CustomEN extends TranslationsEn {
- static const delegate = _CustomCometChatLocalizationsDelegate();
-
- @override
- String get chats => "Overridden Chat";
-
- @override
- String get calls => "Overridden Call";
-}
-
-class _CustomCometChatLocalizationsDelegate
- extends LocalizationsDelegate {
- const _CustomCometChatLocalizationsDelegate();
-
- @override
- bool isSupported(Locale locale) => locale.languageCode == 'en';
-
- @override
- Future load(Locale locale) =>
- SynchronousFuture(CustomEN());
-
- @override
- bool shouldReload(_CustomCometChatLocalizationsDelegate old) => false;
-}
-```
-
-
-
-Then add `CustomEN.delegate` to your `localizationsDelegates` list before `cc.Translations.delegate`.
-
-### Adding New Language Support
-
-Extend the UI Kit with a new language by creating a custom translation class:
-
-
-
-```dart
-class TeluguLocalization extends cc.Translations {
- TeluguLocalization([super.locale = "te"]);
- static const delegate = _TeluguLocalizationsDelegate();
-
- @override
- String get chats => "సందేశాలు";
-
- @override
- String get calls => "ఫోన్ కాల్స్";
- // Override all relevant strings for full localization
-}
-
-class _TeluguLocalizationsDelegate
- extends LocalizationsDelegate {
- const _TeluguLocalizationsDelegate();
-
- @override
- bool isSupported(Locale locale) => locale.languageCode == 'te';
-
- @override
- Future load(Locale locale) =>
- SynchronousFuture(TeluguLocalization());
-
- @override
- bool shouldReload(_TeluguLocalizationsDelegate old) => false;
-}
-```
-
-
-
-### DateTimeFormatter
-
-By providing a custom `DateTimeFormatterCallback`, you can globally configure how time and date values are displayed across all UI components. For details, refer to the [CometChatUIKit class](/ui-kit/flutter/v6/methods#dateformatter).
diff --git a/ui-kit/flutter/v6/mentions-formatter-guide.mdx b/ui-kit/flutter/v6/mentions-formatter-guide.mdx
deleted file mode 100644
index dfef364a7..000000000
--- a/ui-kit/flutter/v6/mentions-formatter-guide.mdx
+++ /dev/null
@@ -1,147 +0,0 @@
----
-title: "Mentions Formatter"
----
-
-## Overview
-
-The `CometChatMentionsFormatter` class formats mentions within text messages displayed in the chat interface. For the base `CometChatTextFormatter` API, see [Text Formatters](/ui-kit/flutter/v6/customization-text-formatters).
-
-## Usage
-
-Pass `CometChatMentionsFormatter` to the `textFormatters` property of widgets like [CometChatConversations](/ui-kit/flutter/v6/conversations), [CometChatMessageList](/ui-kit/flutter/v6/message-list), or [CometChatMessageComposer](/ui-kit/flutter/v6/message-composer).
-
-
-
-```dart
-textFormatters: [
- CometChatMentionsFormatter(
- messageBubbleTextStyle: (theme, alignment, {forConversation = false}) =>
- TextStyle(
- color: alignment == BubbleAlignment.left ? Colors.orange : Colors.pink,
- fontSize: 14,
- fontWeight: FontWeight.bold,
- ),
- ),
-]
-```
-
-
-
-***
-
-## Actions
-
-##### onMentionTap
-
-Setting a listener for mention-click events in Message Bubbles. This listener is activated when a mention is clicked, returning the corresponding user object.
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- textFormatters: [
- CometChatMentionsFormatter(
- onMentionTap: (mention, mentionedUser, {message}) {
- ScaffoldMessenger.of(context).showSnackBar(
- SnackBar(content: Text('Tapped on ${mentionedUser.name}')),
- );
- },
- messageBubbleTextStyle: (theme, alignment, {forConversation = false}) =>
- TextStyle(
- color: alignment == BubbleAlignment.left ? Colors.orange : Colors.greenAccent,
- fontSize: 14,
- fontWeight: FontWeight.bold,
- ),
- ),
- ],
-)
-```
-
-
-
-***
-
-## Customization
-
-| Property | Description | Code |
-|---|---|---|
-| trackingCharacter | Character that triggers mention search | `String? trackingCharacter` |
-| pattern | Regex pattern to identify mentions | `RegExp? pattern` |
-| messageBubbleTextStyle | Text style for message bubble | `TextStyle? messageBubbleTextStyle` |
-| messageInputTextStyle | Text style for message input | `TextStyle? messageInputTextStyle` |
-| onMentionTap | Callback for mention tap actions | `void Function(User)? onMentionTap` |
-| groupMembersRequestBuilder | Request builder for group members | `GroupMembersRequestBuilder?` |
-| usersRequestBuilder | Request builder for users | `UsersRequestBuilder?` |
-
-***
-
-## Advanced
-
-### Composer Mention Text Style
-
-
-
-```dart
-CometChatMessageComposer(
- user: user,
- textFormatters: [
- CometChatMentionsFormatter(
- messageInputTextStyle: (theme) {
- return const TextStyle(
- color: Colors.lightBlueAccent,
- fontSize: 14,
- fontWeight: FontWeight.bold,
- );
- },
- ),
- ],
-)
-```
-
-
-
-### Message Bubble Mention Text Style
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- textFormatters: [
- CometChatMentionsFormatter(
- messageBubbleTextStyle: (theme, alignment, {forConversation = false}) =>
- TextStyle(
- color: alignment == BubbleAlignment.left ? Colors.orange : Colors.greenAccent,
- fontSize: 14,
- fontWeight: FontWeight.bold,
- ),
- ),
- ],
-)
-```
-
-
-
-### Conversations Mention Text Style
-
-
-
-```dart
-CometChatConversations(
- textFormatters: [
- CometChatMentionsFormatter(
- messageBubbleTextStyle: (theme, alignment, {forConversation = false}) =>
- const TextStyle(
- color: Colors.lightBlueAccent,
- fontSize: 14,
- fontWeight: FontWeight.bold,
- ),
- ),
- ],
-)
-```
-
-
-
-
diff --git a/ui-kit/flutter/v6/message-bubble-styling.mdx b/ui-kit/flutter/v6/message-bubble-styling.mdx
deleted file mode 100644
index a49c48079..000000000
--- a/ui-kit/flutter/v6/message-bubble-styling.mdx
+++ /dev/null
@@ -1,411 +0,0 @@
----
-title: "Customizing Message Bubbles"
-sidebarTitle: "Message Bubble Styling"
----
-
-The CometChat V6 UI Kit provides `CometChatOutgoingMessageBubbleStyle` and `CometChatIncomingMessageBubbleStyle` for fine-grained control over message bubble appearance. These classes extend `ThemeExtension`, allowing customizations through global theming or explicit style objects.
-
-## How These Classes Help
-
-### 1. Targeted Customization
-
-Customize specific attributes of message bubbles:
-
-* Background color, border radius, text style
-* Specialized bubbles: Audio, File, Collaborative, Poll, Deleted, Link Preview, Sticker, Call bubbles
-* Reactions, timestamps, avatars, and borders
-
-### 2. Unified Global Theming
-
-Apply styles via Flutter's global theming or pass them to `CometChatMessageListStyle`:
-
-
-
-```dart
-MaterialApp(
- title: 'Your app',
- theme: ThemeData(
- extensions: [
- CometChatIncomingMessageBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- ),
- CometChatOutgoingMessageBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- ),
- ],
- ),
- home: ...,
-);
-```
-
-
-
-### 3. Ease of Integration
-
-Pass styles directly to `CometChatMessageList`:
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- group: group,
- style: CometChatMessageListStyle(
- incomingMessageBubbleStyle: CometChatIncomingMessageBubbleStyle(),
- outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(),
- ),
-)
-```
-
-
-
-## Customizable Message Bubbles
-
-### Text Bubble
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatOutgoingMessageBubbleStyle(
- textBubbleStyle: CometChatTextBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- ),
- ),
- CometChatIncomingMessageBubbleStyle(
- textBubbleStyle: CometChatTextBubbleStyle(
- backgroundColor: Color(0xFFFEEDE1),
- ),
- ),
- ],
-)
-```
-
-
-
-### Image Bubble
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatOutgoingMessageBubbleStyle(
- imageBubbleStyle: CometChatImageBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- ),
- ),
- CometChatIncomingMessageBubbleStyle(
- imageBubbleStyle: CometChatImageBubbleStyle(
- backgroundColor: Color(0xFFFEEDE1),
- ),
- ),
- ],
-)
-```
-
-
-
-### Video Bubble
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatOutgoingMessageBubbleStyle(
- videoBubbleStyle: CometChatVideoBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- playIconColor: Color(0xFFF76808),
- ),
- ),
- CometChatIncomingMessageBubbleStyle(
- videoBubbleStyle: CometChatVideoBubbleStyle(
- backgroundColor: Color(0xFFFEEDE1),
- playIconColor: Color(0xFFF76808),
- ),
- ),
- ],
-)
-```
-
-
-
-### Audio Bubble
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatOutgoingMessageBubbleStyle(
- audioBubbleStyle: CometChatAudioBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- playIconColor: Color(0xFFF76808),
- ),
- ),
- CometChatIncomingMessageBubbleStyle(
- audioBubbleStyle: CometChatAudioBubbleStyle(
- backgroundColor: Color(0xFFFEEDE1),
- downloadIconColor: Color(0xFFF76808),
- audioBarColor: Color(0xFFF76808),
- playIconColor: Color(0xFFF76808),
- ),
- ),
- ],
-)
-```
-
-
-
-### File Bubble
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatOutgoingMessageBubbleStyle(
- fileBubbleStyle: CometChatFileBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- ),
- ),
- CometChatIncomingMessageBubbleStyle(
- fileBubbleStyle: CometChatFileBubbleStyle(
- backgroundColor: Color(0xFFFEEDE1),
- downloadIconTint: Color(0xFFF76808),
- ),
- ),
- ],
-)
-```
-
-
-
-### Sticker Bubble
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatOutgoingMessageBubbleStyle(
- stickerBubbleStyle: CometChatStickerBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- ),
- ),
- CometChatIncomingMessageBubbleStyle(
- stickerBubbleStyle: CometChatStickerBubbleStyle(
- backgroundColor: Color(0xFFFEEDE1),
- ),
- ),
- ],
-)
-```
-
-
-
-### Call Bubble
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatOutgoingMessageBubbleStyle(
- videoCallBubbleStyle: CometChatCallBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- iconColor: Color(0xFFF76808),
- buttonTextStyle: TextStyle(color: Colors.white),
- dividerColor: Color(0xFFFBAA75),
- ),
- ),
- CometChatIncomingMessageBubbleStyle(
- videoCallBubbleStyle: CometChatCallBubbleStyle(
- backgroundColor: Color(0xFFFEEDE1),
- iconColor: Color(0xFFF76808),
- buttonTextStyle: TextStyle(color: Color(0xFFF76808)),
- ),
- ),
- ],
-)
-```
-
-
-
-### Collaborative Whiteboard Bubble
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatOutgoingMessageBubbleStyle(
- collaborativeWhiteboardBubbleStyle: CometChatCollaborativeBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- iconTint: Color(0xFFFFFFFF),
- titleStyle: TextStyle(fontWeight: FontWeight.bold, color: Color(0xFFFFFFFF)),
- buttonTextStyle: TextStyle(color: Color(0xFFFFFFFF)),
- dividerColor: Color(0xFFFBAA75),
- ),
- ),
- CometChatIncomingMessageBubbleStyle(
- collaborativeWhiteboardBubbleStyle: CometChatCollaborativeBubbleStyle(
- backgroundColor: Color(0xFFFEEDE1),
- iconTint: Color(0xFFF76808),
- titleStyle: TextStyle(fontWeight: FontWeight.bold),
- buttonTextStyle: TextStyle(color: Color(0xFFF76808)),
- ),
- ),
- ],
-)
-```
-
-
-
-### Collaborative Document Bubble
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatOutgoingMessageBubbleStyle(
- collaborativeDocumentBubbleStyle: CometChatCollaborativeBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- iconTint: Color(0xFFFFFFFF),
- titleStyle: TextStyle(fontWeight: FontWeight.bold, color: Color(0xFFFFFFFF)),
- buttonTextStyle: TextStyle(color: Color(0xFFFFFFFF)),
- dividerColor: Color(0xFFFBAA75),
- ),
- ),
- CometChatIncomingMessageBubbleStyle(
- collaborativeDocumentBubbleStyle: CometChatCollaborativeBubbleStyle(
- backgroundColor: Color(0xFFFEEDE1),
- iconTint: Color(0xFFF76808),
- titleStyle: TextStyle(fontWeight: FontWeight.bold),
- buttonTextStyle: TextStyle(color: Color(0xFFF76808)),
- ),
- ),
- ],
-)
-```
-
-
-
-### Poll Bubble
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatOutgoingMessageBubbleStyle(
- pollsBubbleStyle: CometChatPollsBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- progressBackgroundColor: Color(0xFFFBAA75),
- iconColor: Color(0xFFF76808),
- ),
- ),
- CometChatIncomingMessageBubbleStyle(
- pollsBubbleStyle: CometChatPollsBubbleStyle(
- backgroundColor: Color(0xFFFEEDE1),
- progressBackgroundColor: Color(0xFFDCDCDC),
- progressColor: Color(0xFFF76808),
- iconColor: Colors.white,
- selectedOptionColor: Color(0xFFF76808),
- ),
- ),
- ],
-)
-```
-
-
-
-### Link Preview Bubble
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatOutgoingMessageBubbleStyle(
- linkPreviewBubbleStyle: CometChatLinkPreviewBubbleStyle(
- backgroundColor: Color(0xFFFBAA75),
- ),
- textBubbleStyle: CometChatTextBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- ),
- ),
- CometChatIncomingMessageBubbleStyle(
- linkPreviewBubbleStyle: CometChatLinkPreviewBubbleStyle(
- backgroundColor: Color(0xFFFBAA75),
- ),
- textBubbleStyle: CometChatTextBubbleStyle(
- backgroundColor: Color(0xFFFEEDE1),
- ),
- ),
- ],
-)
-```
-
-
-
-### Action Message Bubble
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatActionBubbleStyle(
- textStyle: TextStyle(color: Color(0xFFF76808)),
- border: Border.all(color: Color(0xFFF76808)),
- backgroundColor: Color(0xFFFEEDE1),
- ),
- ],
-)
-```
-
-
-
-### Deleted Message Bubble
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatOutgoingMessageBubbleStyle(
- deletedBubbleStyle: CometChatDeletedBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- ),
- ),
- CometChatIncomingMessageBubbleStyle(
- deletedBubbleStyle: CometChatDeletedBubbleStyle(
- backgroundColor: Color(0xFFFEEDE1),
- ),
- ),
- ],
-)
-```
-
-
-
-### AI Assistant Bubble
-
-
-
-```dart
-ThemeData(
- extensions: [
- CometChatAiAssistantBubbleStyle(
- backgroundColor: Colors.transparent,
- textColor: const Color(0xFF141414),
- ),
- ],
-)
-```
-
-
diff --git a/ui-kit/flutter/v6/message-composer.mdx b/ui-kit/flutter/v6/message-composer.mdx
deleted file mode 100644
index ba4b9b12d..000000000
--- a/ui-kit/flutter/v6/message-composer.mdx
+++ /dev/null
@@ -1,445 +0,0 @@
----
-title: "Message Composer"
----
-
-## Overview
-
-`CometChatMessageComposer` is a [Widget](/ui-kit/flutter/v6/components-overview#widget) that enables users to write and send a variety of messages, including text, image, video, and custom messages.
-
-Features such as **Live Reaction**, **Attachments**, **Message Editing**, **Rich Text Formatting**, **Code Blocks**, and **Inline Audio Recording** are supported.
-
-`CometChatMessageComposer` is comprised of the following Base Widgets:
-
-| Base Widgets | Description |
-|---|---|
-| MessageInput | Provides a basic layout for the contents, such as the TextField and buttons |
-| ActionSheet | Presents a list of options in either a list or grid mode |
-
-In V6, the composer is powered by `MessageComposerBloc` and decomposed into focused sub-widgets.
-
-## Usage
-
-### Integration
-
-##### 1. Using Navigator to Launch `CometChatMessageComposer`
-
-
-
-```dart
-Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatMessageComposer(user: user)));
-```
-
-
-
-##### 2. Embedding `CometChatMessageComposer` as a Widget in the build Method
-
-
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:flutter/material.dart';
-
-class MessageComposerScreen extends StatefulWidget {
- const MessageComposerScreen({super.key});
-
- @override
- State createState() => _MessageComposerScreenState();
-}
-
-class _MessageComposerScreenState extends State {
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- resizeToAvoidBottomInset: false, // REQUIRED — composer handles keyboard internally
- body: Column(
- children: [
- Expanded(child: CometChatMessageList(user: user)),
- CometChatMessageComposer(user: user),
- ],
- ),
- );
- }
-}
-```
-
-
-
-***
-
-### Actions
-
-##### 1. OnSendButtonClick
-
-The `OnSendButtonClick` event gets activated when the send message button is clicked.
-
-
-
-```dart
-CometChatMessageComposer(
- user: user,
- onSendButtonTap: (BuildContext context, BaseMessage baseMessage, PreviewMessageMode? previewMessageMode) {
- // Handle send
- },
-)
-```
-
-
-
-***
-
-##### 2. onChange
-
-Handles changes in the value of text in the input field.
-
-
-
-```dart
-CometChatMessageComposer(
- user: user,
- onChange: (String? text) {
- // Handle text change
- },
-)
-```
-
-
-
-***
-
-##### 3. onError
-
-Listens for any errors that occur.
-
-
-
-```dart
-CometChatMessageComposer(
- user: user,
- onError: (e) {
- // Handle error
- },
-)
-```
-
-
-
-***
-
-### Filters
-
-`CometChatMessageComposer` widget does not have any available filters.
-
-***
-
-### Events
-
-The `CometChatMessageComposer` Widget does not emit any events of its own.
-
-***
-
-## Customization
-
-### Style
-
-##### 1. CometChatMessageComposerStyle
-
-
-
-```dart
-CometChatMessageComposer(
- user: user,
- messageComposerStyle: CometChatMessageComposerStyle(
- sendButtonIconBackgroundColor: Color(0xFFF76808),
- secondaryButtonIconColor: Color(0xFFF76808),
- auxiliaryButtonIconColor: Color(0xFFF76808),
- ),
-)
-```
-
-
-
-##### 2. MediaRecorder Style
-
-
-
-```dart
-CometChatMessageComposer(
- user: user,
- messageComposerStyle: CometChatMessageComposerStyle(
- mediaRecorderStyle: CometChatMediaRecorderStyle(
- recordIndicatorBackgroundColor: Color(0xFFF44649),
- recordIndicatorBorderRadius: BorderRadius.circular(20),
- ),
- ),
-)
-```
-
-
-
-***
-
-### Functionality
-
-
-
-```dart
-CometChatMessageComposer(
- user: user,
- placeholderText: "Type a message...",
- disableMentions: true,
-)
-```
-
-
-
-## Message Composer Properties
-
-| Property | Data Type | Description |
-|---|---|---|
-| `user` | `User?` | Sets user for the message composer. |
-| `group` | `Group?` | Sets group for the message composer. |
-| `messageComposerStyle` | `CometChatMessageComposerStyle?` | Sets style for the message composer. |
-| `placeholderText` | `String?` | Hint text for the input field. |
-| `text` | `String?` | Initial text for the input field. |
-| `onChange` | `Function(String text)?` | Callback triggered when text changes. |
-| `textEditingController` | `TextEditingController?` | Controls the state of the text field. |
-| `maxLine` | `int?` | Maximum number of lines allowed. |
-| `disableMentions` | `bool?` | Disables mentions in the composer. |
-| `disableTypingEvents` | `bool` | Disables typing events. |
-| `disableSoundForMessages` | `bool` | Disables sound for sent messages. |
-| `parentMessageId` | `int` | ID of the parent message (default is 0). |
-| `sendButtonView` | `Widget?` | Custom send button widget. |
-| `attachmentIcon` | `Widget?` | Custom attachment icon. |
-| `voiceRecordingIcon` | `Widget?` | Custom voice recording icon. |
-| `auxiliaryButtonView` | `ComposerWidgetBuilder?` | UI component as auxiliary button. |
-| `secondaryButtonView` | `ComposerWidgetBuilder?` | UI component as secondary button. |
-| `hideVoiceRecordingButton` | `bool?` | Hide the voice recording button. |
-| `attachmentOptions` | `ComposerActionsBuilder?` | Provides options for file attachments. |
-| `hideAttachmentButton` | `bool?` | Hide/display attachment button. |
-| `hideImageAttachmentOption` | `bool?` | Hide/display image attachment option. |
-| `hideVideoAttachmentOption` | `bool?` | Hide/display video attachment option. |
-| `hideAudioAttachmentOption` | `bool?` | Hide/display audio attachment option. |
-| `hideFileAttachmentOption` | `bool?` | Hide/display file attachment option. |
-| `hidePollsOption` | `bool?` | Hide/display polls option. |
-| `onSendButtonTap` | `Function(BuildContext, BaseMessage, PreviewMessageMode?)?` | Callback when send button is tapped. |
-| `onError` | `OnError?` | Callback to handle errors. |
-| `hideSendButton` | `bool?` | Hide/display the send button. |
-| `hideStickersButton` | `bool?` | Hide/display the sticker button. |
-| `sendButtonIcon` | `Widget?` | Custom send button icon. |
-| `richTextConfiguration` | `RichTextConfiguration?` | Configuration for rich text formatting toolbar. See Rich Text section below. |
-| `richTextToolbarView` | `Widget Function(BuildContext, TextEditingController, RichTextFormatterManager)?` | Custom rich text toolbar widget. |
-| `onRichTextFormatApplied` | `void Function(RichTextFormatType)?` | Callback when a rich text format is applied. |
-| `hideBottomSafeArea` | `bool` | Hide bottom safe area padding (default: `false`). |
-
-***
-
-### Advanced
-
-#### TextFormatters
-
-
-
-```dart
-CometChatMessageComposer(
- user: user,
- textFormatters: [
- CometChatMentionsFormatter(
- style: CometChatMentionsStyle(
- mentionSelfTextBackgroundColor: Color(0xFFF76808),
- mentionTextBackgroundColor: Colors.white,
- mentionTextColor: Colors.black,
- mentionSelfTextColor: Colors.white,
- ),
- ),
- ],
-)
-```
-
-
-
-***
-
-#### AttachmentOptions
-
-
-
-```dart
-CometChatMessageComposer(
- user: user,
- attachmentOptions: (context, user, group, id) {
- return [
- CometChatMessageComposerAction(
- id: "Custom Option",
- title: "Custom Option",
- icon: Icon(Icons.add_box, color: Colors.black),
- ),
- ];
- },
-)
-```
-
-
-
-***
-
-#### AuxiliaryButton Widget
-
-You can customize the auxiliary button area (mic, sticker, etc.) using the `auxiliaryButtonView` parameter:
-
-
-
-```dart
-CometChatMessageComposer(
- user: user,
- auxiliaryButtonView: (context, user, group, id) {
- return Row(
- children: [
- IconButton(
- icon: Icon(Icons.location_pin, color: Color(0xFF6852D6)),
- onPressed: () {
- // Handle location sharing
- },
- ),
- ],
- );
- },
-)
-```
-
-
-
-***
-
-## Rich Text Formatting
-
-The composer includes a WYSIWYG rich text toolbar. Configure it via `richTextConfiguration`:
-
-### Enable with defaults
-
-
-
-```dart
-CometChatMessageComposer(
- user: user,
- richTextConfiguration: RichTextConfiguration(),
-)
-```
-
-
-
-### Toolbar modes
-
-| Mode | Description |
-| --- | --- |
-| `RichTextToolbarMode.alwaysVisible` | Toolbar always shown (default) |
-| `RichTextToolbarMode.onSelection` | Toolbar shown when text is selected |
-| `RichTextToolbarMode.disabled` | Rich text formatting disabled |
-
-
-
-```dart
-CometChatMessageComposer(
- user: user,
- richTextConfiguration: RichTextConfiguration(
- toolbarMode: RichTextToolbarMode.onSelection,
- ),
-)
-```
-
-
-
-### Disable specific formats
-
-
-
-```dart
-CometChatMessageComposer(
- user: user,
- richTextConfiguration: RichTextConfiguration(
- enableCodeBlock: false,
- enableBlockquote: false,
- enableOrderedList: false,
- ),
-)
-```
-
-
-
-### RichTextConfiguration properties
-
-| Property | Type | Default | Description |
-| --- | --- | --- | --- |
-| `toolbarMode` | `RichTextToolbarMode` | `alwaysVisible` | How the toolbar is displayed |
-| `previewMode` | `RichTextPreviewMode` | `onFormatting` | How the preview is displayed |
-| `enableAutoFormatting` | `bool` | `true` | Auto-detect and format Markdown as user types |
-| `enableBold` | `bool` | `true` | Bold (`**text**`) |
-| `enableItalic` | `bool` | `true` | Italic (`_text_`) |
-| `enableUnderline` | `bool` | `true` | Underline (`text`) |
-| `enableStrikethrough` | `bool` | `true` | Strikethrough (`~~text~~`) |
-| `enableInlineCode` | `bool` | `true` | Inline code (`` `code` ``) |
-| `enableCodeBlock` | `bool` | `true` | Code block (` ```code``` `) |
-| `enableLinks` | `bool` | `true` | Links (`[text](url)`) |
-| `enableBulletList` | `bool` | `true` | Bullet list (`- item`) |
-| `enableOrderedList` | `bool` | `true` | Ordered list (`1. item`) |
-| `enableBlockquote` | `bool` | `true` | Blockquote (`> text`) |
-
-### Custom toolbar view
-
-
-
-```dart
-CometChatMessageComposer(
- user: user,
- richTextConfiguration: RichTextConfiguration(),
- richTextToolbarView: (context, controller, manager) {
- return Row(
- children: [
- IconButton(
- icon: Icon(Icons.format_bold),
- onPressed: () => manager.applyFormat(RichTextFormatType.bold),
- ),
- IconButton(
- icon: Icon(Icons.format_italic),
- onPressed: () => manager.applyFormat(RichTextFormatType.italic),
- ),
- ],
- );
- },
-)
-```
-
-
-
-***
-
-## V6 Architecture
-
-### Sub-Widget Decomposition
-
-| Widget | Purpose |
-|---|---|
-| `AttachmentOptionsOverlay` | Attachment picker overlay |
-| `MessageComposerAuxiliaryButtons` | Auxiliary button area |
-| `MessageComposerSecondaryButtons` | Secondary button area |
-| `MessageComposerSendButton` | Send button |
-| `MessageComposerSuggestionList` | Suggestion/mention list |
-| `ComposerAttachmentUtils` | Attachment utilities |
-
-### BLoC Architecture
-
-| Component | Description |
-|---|---|
-| `MessageComposerBloc` | Manages composer state |
-| `MessageComposerEvent` | Events: `SendTextMessage`, `SendMediaMessage`, `EditTextMessage`, `StartTyping`, `EndTyping`, etc. |
-| `MessageComposerState` | Composer state |
-
-### Use Cases
-
-| Use Case | Description |
-|---|---|
-| `SendTextMessageUseCase` | Sends text messages |
-| `SendMediaMessageUseCase` | Sends media messages |
-| `SendCustomMessageUseCase` | Sends custom messages |
-| `EditMessageUseCase` | Edits messages |
-| `TypingUseCases` | Start/end typing indicators |
-| `GetLoggedInUserUseCase` | Gets the logged-in user |
diff --git a/ui-kit/flutter/v6/message-header.mdx b/ui-kit/flutter/v6/message-header.mdx
deleted file mode 100644
index 347c14732..000000000
--- a/ui-kit/flutter/v6/message-header.mdx
+++ /dev/null
@@ -1,364 +0,0 @@
----
-title: "Message Header"
-description: "Toolbar displaying user/group info, typing indicators, online status, and navigation controls."
----
-
-`CometChatMessageHeader` renders the header of a chat conversation showing user/group avatar, name, online/offline status, typing indicators, back navigation, and action buttons (call buttons, menu).
-
-
-
-
-
----
-
-## Where It Fits
-
-`CometChatMessageHeader` is a toolbar component. It sits at the top of a chat screen above `CometChatMessageList` and `CometChatMessageComposer`. It automatically shows typing indicators and user presence in real-time.
-
-
-
-```dart
-Scaffold(
- body: Column(
- children: [
- CometChatMessageHeader(user: user),
- Expanded(child: CometChatMessageList(user: user)),
- CometChatMessageComposer(user: user),
- ],
- ),
-)
-```
-
-
-
----
-
-## Quick Start
-
-
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:flutter/material.dart';
-
-class ChatScreen extends StatelessWidget {
- final User user;
- const ChatScreen({super.key, required this.user});
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- appBar: PreferredSize(
- preferredSize: const Size.fromHeight(60),
- child: CometChatMessageHeader(user: user),
- ),
- body: Column(
- children: [
- Expanded(child: CometChatMessageList(user: user)),
- CometChatMessageComposer(user: user),
- ],
- ),
- );
- }
-}
-```
-
-
-
-For group chats, pass a `Group` object instead:
-
-
-
-```dart
-CometChatMessageHeader(group: group)
-```
-
-
-
-Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()`, a user logged in, and a valid `User` or `Group` object.
-
----
-
-## Actions and Events
-
-### Callback Methods
-
-#### `onBack`
-
-Fires when the user presses the back button.
-
-
-
-```dart
-CometChatMessageHeader(
- user: user,
- onBack: () {
- Navigator.pop(context);
- },
-)
-```
-
-
-
-#### `onError`
-
-Fires on internal errors.
-
-
-
-```dart
-CometChatMessageHeader(
- user: user,
- onError: (e) {
- debugPrint("Error: ${e.message}");
- },
-)
-```
-
-
-
-### SDK Events (Real-Time, Automatic)
-
-The component listens to these SDK events internally. No manual setup needed.
-
-| SDK Listener | Internal behavior |
-|---|---|
-| `onUserOnline` / `onUserOffline` | Updates online/offline status and last seen |
-| `onTypingStarted` / `onTypingEnded` | Shows/hides typing indicator in subtitle |
-| `onGroupMemberJoined` / `onGroupMemberLeft` | Updates group member count |
-| `onGroupMemberKicked` / `onGroupMemberBanned` | Updates group member count |
-| `onMemberAddedToGroup` | Updates group member count |
-| `ccOwnershipChanged` | Updates group owner info |
-| `onUserBlocked` / `onUserUnblocked` | Updates user blocked state |
-| Connection reconnected | Refreshes user/group data |
-
----
-
-## Functionality
-
-| Property | Type | Default | Description |
-|---|---|---|---|
-| `user` | `User?` | `null` | User object for 1:1 chat header |
-| `group` | `Group?` | `null` | Group object for group chat header |
-| `showBackButton` | `bool?` | `true` | Toggle back button visibility |
-| `backButton` | `Widget?` | `null` | Custom back button widget |
-| `appBarOptions` | `List?` | `null` | Additional widgets in the app bar (e.g., call buttons, menu) |
-| `hideUserStatus` | `bool?` | `false` | Hide online/offline status for users |
-| `disableTypingIndicator` | `bool?` | `false` | Disable typing indicator display |
-
----
-
-## Custom View Slots
-
-### Subtitle View
-
-Replace the default subtitle (online status / typing indicator / member count).
-
-
-
-```dart
-CometChatMessageHeader(
- user: user,
- subtitleView: (user, group) {
- if (user != null) {
- return Text(
- user.status == "online" ? "Active now" : "Last seen recently",
- style: TextStyle(color: Color(0xFF727272), fontSize: 12),
- );
- }
- if (group != null) {
- return Text(
- "${group.membersCount} members",
- style: TextStyle(color: Color(0xFF727272), fontSize: 12),
- );
- }
- return null;
- },
-)
-```
-
-
-
-### Leading View
-
-Replace the avatar / left section.
-
-
-
-```dart
-CometChatMessageHeader(
- user: user,
- leadingView: (user, group) {
- return CircleAvatar(
- backgroundImage: NetworkImage(user?.avatar ?? ""),
- child: user?.avatar == null ? Text(user?.name?[0] ?? "") : null,
- );
- },
-)
-```
-
-
-
-### Title View
-
-Replace the name / title text.
-
-
-
-```dart
-CometChatMessageHeader(
- user: user,
- titleView: (user, group) {
- return Text(
- user?.name ?? group?.name ?? "",
- style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
- );
- },
-)
-```
-
-
-
-### Trailing View
-
-Replace the right section (call buttons, menu, etc.).
-
-
-
-```dart
-CometChatMessageHeader(
- user: user,
- trailingView: (user, group) {
- return Row(
- mainAxisSize: MainAxisSize.min,
- children: [
- IconButton(icon: Icon(Icons.call), onPressed: () {}),
- IconButton(icon: Icon(Icons.videocam), onPressed: () {}),
- IconButton(icon: Icon(Icons.info_outline), onPressed: () {}),
- ],
- );
- },
-)
-```
-
-
-
----
-
-## Common Patterns
-
-### Header with info button for groups
-
-
-
-```dart
-CometChatMessageHeader(
- group: group,
- trailingView: (user, group) {
- return IconButton(
- icon: Icon(Icons.info_outline),
- onPressed: () {
- Navigator.push(context, MaterialPageRoute(
- builder: (context) => GroupInfoScreen(group: group!),
- ));
- },
- );
- },
-)
-```
-
-
-
-### Hide back button (embedded in tab layout)
-
-
-
-```dart
-CometChatMessageHeader(
- user: user,
- showBackButton: false,
-)
-```
-
-
-
----
-
-## Advanced
-
-### BLoC Access
-
-Provide a custom `MessageHeaderBloc`:
-
-
-
-```dart
-CometChatMessageHeader(
- user: user,
- messageHeaderBloc: CustomMessageHeaderBloc(),
-)
-```
-
-
-
-### Public BLoC Methods
-
-| Method | Returns | Description |
-|---|---|---|
-| `getTypingNotifier()` | `ValueNotifier` | Typing indicator notifier for isolated rebuilds |
-
----
-
-## Style
-
-
-
-```dart
-CometChatMessageHeader(
- user: user,
- messageHeaderStyle: CometChatMessageHeaderStyle(
- backgroundColor: Colors.white,
- avatarStyle: CometChatAvatarStyle(
- borderRadius: BorderRadius.circular(8),
- ),
- statusIndicatorStyle: CometChatStatusIndicatorStyle(),
- typingIndicatorStyle: CometChatTypingIndicatorStyle(),
- ),
-)
-```
-
-
-
-
-
-
-
-### Style Properties
-
-| Property | Description |
-|---|---|
-| `backgroundColor` | Header background color |
-| `avatarStyle` | Avatar appearance |
-| `statusIndicatorStyle` | Online/offline indicator |
-| `typingIndicatorStyle` | Typing indicator text style |
-
-See [Component Styling](/ui-kit/flutter/v6/component-styling) for the full reference.
-
----
-
-## Next Steps
-
-
-
- Display messages in a conversation
-
-
- Compose and send messages
-
-
- Add voice and video call buttons
-
-
- Detailed styling reference
-
-
diff --git a/ui-kit/flutter/v6/message-list.mdx b/ui-kit/flutter/v6/message-list.mdx
deleted file mode 100644
index 1c587b677..000000000
--- a/ui-kit/flutter/v6/message-list.mdx
+++ /dev/null
@@ -1,546 +0,0 @@
----
-title: "Message List"
-description: "Scrollable list of messages for a conversation with real-time updates, reactions, threaded replies, and message actions."
----
-
-`CometChatMessageList` renders a scrollable list of messages for a conversation with real-time updates for new messages, edits, deletions, reactions, and threaded replies.
-
----
-
-## Where It Fits
-
-`CometChatMessageList` is a message display component. It requires either a `User` or `Group` object to fetch and render messages. Wire it with `CometChatMessageHeader` and `CometChatMessageComposer` to build a complete messaging layout.
-
-
-
-```dart
-CometChatMessageList(
- user: user,
-)
-```
-
-
-
----
-
-## Quick Start
-
-Using Navigator:
-
-
-
-```dart
-Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatMessageList(user: user)));
-```
-
-
-
-Embedding as a widget:
-
-
-
-```dart
-@override
-Widget build(BuildContext context) {
- return Scaffold(
- body: SafeArea(
- child: CometChatMessageList(
- user: user, // or group: group
- ),
- ),
- );
-}
-```
-
-
-
-Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()`, a user logged in, and the UI Kit dependency added.
-
-
-Simply adding the `MessageList` component to the layout will only display the loading indicator. You must supply a `User` or `Group` object to fetch messages.
-
-
----
-
-## Filtering
-
-Pass a `MessagesRequestBuilder` to control what loads:
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- messagesRequestBuilder: MessagesRequestBuilder()
- ..uid = user.uid
- ..searchKeyword = "hello"
- ..limit = 30,
-)
-```
-
-
-
-
-The following parameters in `MessagesRequestBuilder` will always be altered inside the message list: UID, GUID, types, categories.
-
-
----
-
-## Actions and Events
-
-### Callback Methods
-
-#### `onThreadRepliesClick`
-
-Fires when a user taps a threaded message bubble.
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- onThreadRepliesClick: (message, context, {template}) {
- // Navigate to thread view
- },
-)
-```
-
-
-
-#### `onError`
-
-Fires on internal errors.
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- onError: (e) {
- debugPrint("Error: ${e.message}");
- },
-)
-```
-
-
-
-#### `onLoad`
-
-Fires when the list is successfully fetched and loaded.
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- onLoad: (messages) {
- debugPrint("Loaded ${messages.length}");
- },
-)
-```
-
-
-
-#### `onEmpty`
-
-Fires when the list is empty after loading.
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- onEmpty: () {
- debugPrint("No messages");
- },
-)
-```
-
-
-
-#### `onReactionClick`
-
-Fires when a reaction pill is tapped.
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- onReactionClick: (emoji, message) {
- // Handle reaction click
- },
-)
-```
-
-
-
-#### `onReactionLongPress`
-
-Fires when a reaction pill is long-pressed.
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- onReactionLongPress: (emoji, message) {
- // Handle reaction long press
- },
-)
-```
-
-
-
-### SDK Events (Real-Time, Automatic)
-
-The component listens to SDK message events internally. No manual setup needed.
-
-| SDK Listener | Internal behavior |
-| --- | --- |
-| `onTextMessageReceived` / `onMediaMessageReceived` / `onCustomMessageReceived` | Inserts new message with animation |
-| `onMessageEdited` | Updates message in-place |
-| `onMessageDeleted` | Removes or marks message as deleted |
-| `onMessagesDelivered` / `onMessagesRead` | Updates receipt status via ValueNotifier |
-| `onTypingStarted` / `onTypingEnded` | Updates typing indicator |
-| `onMessageReactionAdded` / `onMessageReactionRemoved` | Updates reaction counts |
-| Connection reconnected | Triggers silent sync to fetch missed messages |
-
----
-
-## Functionality
-
-| Property | Type | Default | Description |
-| --- | --- | --- | --- |
-| `user` | `User?` | required* | User for 1-on-1 conversation |
-| `group` | `Group?` | required* | Group for group conversation |
-| `parentMessageId` | `int?` | `null` | Parent message ID for thread replies |
-| `alignment` | `ChatAlignment` | `standard` | Chat alignment setting |
-| `hideDeletedMessages` | `bool` | `false` | Hide deleted messages entirely |
-| `disableReceipts` | `bool` | `false` | Disable read/delivery receipts |
-| `disableSoundForMessages` | `bool` | `false` | Disable message sounds |
-| `hideReplies` | `bool` | `true` | Hide thread replies in main conversation |
-| `hideGroupActionMessages` | `bool?` | `false` | Hide group action messages |
-| `hideTimestamp` | `bool?` | `null` | Toggle timestamp visibility |
-| `hideDateSeparator` | `bool?` | `false` | Hide date separators |
-| `hideStickyDate` | `bool?` | `false` | Hide floating sticky date header |
-| `avatarVisibility` | `bool?` | `true` | Toggle avatar visibility |
-| `receiptsVisibility` | `bool?` | `true` | Toggle read receipts |
-| `disableReactions` | `bool?` | `false` | Toggle reactions |
-| `enableSwipeToReply` | `bool` | `true` | Enable swipe-to-reply gesture |
-| `startFromUnreadMessages` | `bool` | `false` | Scroll to first unread on open |
-| `showMarkAsUnreadOption` | `bool` | `false` | Show "Mark as Unread" in long-press options |
-| `goToMessageId` | `int?` | `null` | Scroll to a specific message after load |
-
-\* One of `user` or `group` is required.
-
----
-
-## Custom View Slots
-
-### Header View
-
-Custom view displayed at the top of the message list.
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- headerView: (context, {user, group, parentMessageId}) {
- return Container(
- padding: EdgeInsets.all(8),
- child: Text("Pinned Messages"),
- );
- },
-)
-```
-
-
-
-### Footer View
-
-Custom view displayed at the bottom of the message list.
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- footerView: (context, {user, group, parentMessageId}) {
- return Container(
- padding: EdgeInsets.all(8),
- child: Text("End of messages"),
- );
- },
-)
-```
-
-
-
-### State Views
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- emptyStateView: (context) => Center(child: Text("No messages yet")),
- errorStateView: (context) => Center(child: Text("Something went wrong")),
- loadingStateView: (context) => Center(child: CircularProgressIndicator()),
- emptyChatGreetingView: (context) => Center(child: Text("Say hello!")),
-)
-```
-
-
-
-### Text Formatters (Mentions)
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- textFormatters: [
- CometChatMentionsFormatter(),
- ],
-)
-```
-
-
-
-### Message Templates
-
-Override or extend message bubble rendering:
-
-
-
-```dart
-// Replace all templates
-CometChatMessageList(
- user: user,
- templates: getCustomTemplates(),
-)
-
-// Add/override specific templates (merged with defaults)
-CometChatMessageList(
- user: user,
- addTemplate: [
- CometChatMessageTemplate(
- type: MessageTypeConstants.text,
- category: MessageCategoryConstants.message,
- contentView: (message, context, alignment, {additionalConfigurations}) {
- return Text((message as TextMessage).text,
- style: TextStyle(color: Colors.red));
- },
- ),
- ],
-)
-```
-
-
-
-See [Message Template](/ui-kit/flutter/v6/message-template) for the full template structure.
-
----
-
-## Message Option Visibility
-
-| Property | Default | Description |
-| --- | --- | --- |
-| `hideCopyMessageOption` | `false` | Hide "Copy Message" |
-| `hideDeleteMessageOption` | `false` | Hide "Delete Message" |
-| `hideEditMessageOption` | `false` | Hide "Edit Message" |
-| `hideMessageInfoOption` | `false` | Hide "Message Info" |
-| `hideMessagePrivatelyOption` | `false` | Hide "Message Privately" |
-| `hideReactionOption` | `false` | Hide "Reaction" |
-| `hideReplyInThreadOption` | `false` | Hide "Reply in Thread" |
-| `hideTranslateMessageOption` | `false` | Hide "Translate Message" |
-| `hideShareMessageOption` | `false` | Hide "Share Message" |
-| `hideModerationView` | `null` | Hide moderation view |
-
----
-
-## Common Patterns
-
-### Thread replies view
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- parentMessageId: parentMessage.id,
-)
-```
-
-
-
-### Jump to a specific message
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- goToMessageId: 12345,
-)
-```
-
-
-
-### Start from unread messages
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- startFromUnreadMessages: true,
-)
-```
-
-
-
----
-
-## Advanced
-
-### BLoC Access
-
-Provide a custom `MessageListBloc` to override behavior:
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- messageListBloc: CustomMessageListBloc(user: user),
-)
-```
-
-
-
-### Extending MessageListBloc
-
-`MessageListBloc` uses the `ListBase` mixin with override hooks:
-
-
-
-```dart
-class CustomMessageListBloc extends MessageListBloc {
- CustomMessageListBloc({required User user}) : super(user: user);
-
- @override
- void onItemAdded(BaseMessage item, List updatedList) {
- // Custom logic when a message is added
- super.onItemAdded(item, updatedList);
- }
-}
-```
-
-
-
-For `ListBase` override hooks (`onItemAdded`, `onItemRemoved`, `onItemUpdated`, `onListCleared`, `onListReplaced`), see [BLoC & Data — ListBase Hooks](/ui-kit/flutter/v6/customization-bloc-data#listbase-hooks).
-
-### Public BLoC Events
-
-| Event | Description |
-| --- | --- |
-| `LoadMessages(conversationWith, conversationType)` | Load initial messages |
-| `LoadOlderMessages()` | Load older messages (scroll up) |
-| `LoadNewerMessages()` | Load newer messages (scroll down) |
-| `RefreshMessages()` | Refresh from the latest |
-| `SyncMessages()` | Silently sync missed messages |
-| `JumpToMessage(messageId)` | Jump to a specific message |
-| `AddReaction(message, reaction)` | Add a reaction |
-| `RemoveReaction(message, reaction)` | Remove a reaction |
-| `MarkMessageAsRead(message)` | Mark a message as read |
-| `MarkMessageAsUnread(...)` | Mark a message as unread |
-| `LoadFromUnread(conversationWith, conversationType)` | Load from first unread message |
-
-### Public BLoC Methods
-
-#### O(1) Lookup Methods
-
-| Method | Returns | Description |
-| --- | --- | --- |
-| `findMessageIndex(messageId)` | `int?` | Find message index by ID |
-| `findMessageIndexByMuid(muid)` | `int?` | Find message index by muid (pending messages) |
-| `findMessage(messageId)` | `BaseMessage?` | Get message by ID |
-| `findMessageByMuid(muid)` | `BaseMessage?` | Get message by muid |
-
-#### ValueNotifier Accessors (Isolated Rebuilds)
-
-| Method | Returns | Description |
-| --- | --- | --- |
-| `getReceiptNotifier(messageId)` | `ValueNotifier` | Per-message receipt status notifier |
-| `getReceiptNotifierForMessage(message)` | `ValueNotifier` | Receipt notifier handling both ID and muid |
-| `getTypingNotifier(conversationId)` | `ValueNotifier>` | Per-conversation typing notifier |
-| `getThreadReplyCountNotifier(parentMessageId)` | `ValueNotifier` | Per-message thread reply count notifier |
-
-#### MessageReceiptStatus Enum
-
-| Value | Description |
-| --- | --- |
-| `sending` | Message is being sent (id = 0) |
-| `sent` | Message has been sent to server |
-| `delivered` | Message has been delivered to recipient |
-| `read` | Message has been read by recipient |
-| `error` | Message failed to send |
-
-### Operations Stream
-
-The BLoC exposes an `operationsStream` consumed by `CometChatAnimatedMessageList` for smooth animations:
-
-| Operation | Description |
-| --- | --- |
-| `MessageOperation.insert(message, index)` | Insert a single message |
-| `MessageOperation.insertAll(messages, index)` | Insert a batch of messages |
-| `MessageOperation.update(oldMessage, newMessage, index)` | Replace a message in-place |
-| `MessageOperation.remove(message, index)` | Remove a message |
-| `MessageOperation.set(messages)` | Replace the entire list |
-
----
-
-## Style
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- style: CometChatMessageListStyle(
- backgroundColor: Color(0xFFFEEDE1),
- outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
- backgroundColor: Color(0xFFF76808),
- ),
- incomingMessageBubbleStyle: CometChatIncomingMessageBubbleStyle(
- backgroundColor: Colors.white,
- ),
- ),
-)
-```
-
-
-
-See [Component Styling](/ui-kit/flutter/v6/component-styling) and [Message Bubble Styling](/ui-kit/flutter/v6/message-bubble-styling) for the full reference.
-
----
-
-## Next Steps
-
-
-
- Display user/group info in the app bar
-
-
- Rich input for sending messages
-
-
- Customize message bubble structure
-
-
- Detailed styling reference
-
-
\ No newline at end of file
diff --git a/ui-kit/flutter/v6/message-template.mdx b/ui-kit/flutter/v6/message-template.mdx
deleted file mode 100644
index 20b51e7af..000000000
--- a/ui-kit/flutter/v6/message-template.mdx
+++ /dev/null
@@ -1,251 +0,0 @@
----
-title: "Message Template"
----
-
-## Overview
-
-A `CometChatMessageTemplate` provides the capability to define and customize both the structure and behavior of message bubbles. It acts as a blueprint for creating message bubble widgets, allowing you to manage appearance and interactions consistently.
-
-### Structure
-
-The MessageBubble structure can be broken down into:
-
-1. Leading widget — Sender's avatar
-2. Header widget — Sender's name (useful in group chats)
-3. Content widget — Message content (text, images, videos, etc.)
-4. Bottom widget — Additional elements like link previews or "load more" buttons
-5. Footer widget — Timestamp and delivery/read status
-
-### Properties
-
-| Property | Description |
-|---|---|
-| `type` | Maps the template to a CometChat message type |
-| `category` | Sets the message category |
-| `headerView` | Custom header widget for the bubble |
-| `contentView` | Custom content widget for the bubble |
-| `footerView` | Custom footer widget (timestamp, receipts) |
-| `bottomView` | Custom bottom widget (link previews, etc.) |
-| `bubbleView` | Complete custom bubble widget |
-| `options` | List of actions on long press |
-
-## Customization
-
-### Header Widget
-
-
-
-```dart
-CometChatMessageList(
- group: group,
- templates: [
- CometChatMessageTemplate(
- type: MessageTypeConstants.text,
- category: MessageCategoryConstants.message,
- headerView: (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment) {
- return Text(
- "${baseMessage.sender?.name} • 🗓️ In meeting",
- style: TextStyle(
- color: Color(0xFF6852D6),
- fontSize: 14.4,
- fontWeight: FontWeight.w500,
- ),
- );
- },
- ),
- ],
-)
-```
-
-
-
-***
-
-### Content Widget
-
-
-
-```dart
-CometChatMessageList(
- group: group,
- templates: [
- CometChatMessageTemplate(
- type: "image",
- category: "message",
- contentView: (message, context, alignment, {AdditionalConfigurations? additionalConfigurations}) {
- if (message is! MediaMessage) return const SizedBox();
- return Wrap(
- direction: Axis.vertical,
- crossAxisAlignment: WrapCrossAlignment.center,
- children: [
- CometChatImageBubble(
- imageUrl: message.attachment?.fileUrl,
- metadata: message.metadata,
- key: UniqueKey(),
- ),
- TextButton(
- onPressed: () {
- // Navigate to purchase screen
- },
- child: Text("Buy Now"),
- ),
- ],
- );
- },
- ),
- ],
-)
-```
-
-
-
-***
-
-### Bottom Widget
-
-
-
-```dart
-CometChatMessageList(
- group: group,
- templates: [
- CometChatMessageTemplate(
- type: MessageTypeConstants.text,
- category: MessageCategoryConstants.message,
- bottomView: (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment) {
- return Container(
- decoration: BoxDecoration(
- color: Color(0xFFF44649).withOpacity(.2),
- borderRadius: BorderRadius.circular(12),
- ),
- child: Row(
- children: [
- Icon(Icons.warning, color: Color(0xFFF44649), size: 12),
- Text(
- "According to guidelines you cannot share contact",
- style: TextStyle(color: Color(0xFFF44649), fontSize: 12),
- ),
- ],
- ),
- );
- },
- ),
- ],
-)
-```
-
-
-
-***
-
-### Footer Widget
-
-
-
-```dart
-CometChatMessageList(
- group: group,
- templates: [
- CometChatMessageTemplate(
- type: MessageTypeConstants.text,
- category: MessageCategoryConstants.message,
- statusInfoView: (baseMessage, context, alignment) {
- return const SizedBox(height: 11);
- },
- footerView: (baseMessage, context, alignment, {additionalConfigurations}) {
- // Custom footer with time and receipt
- return Row(
- mainAxisAlignment: MainAxisAlignment.end,
- children: [
- CometChatDate(date: baseMessage.sentAt!, pattern: DateTimePattern.timeFormat),
- ],
- );
- },
- ),
- ],
-)
-```
-
-
-
-***
-
-### Options List
-
-
-
-```dart
-CometChatMessageList(
- group: group,
- templates: [
- CometChatMessageTemplate(
- type: MessageTypeConstants.text,
- category: MessageCategoryConstants.message,
- options: (loggedInUser, messageObject, context, group, additionalConfigurations) {
- final existingOptions = CometChatUIKit.getDataSource()
- .getTextMessageOptions(loggedInUser, messageObject, context, group, additionalConfigurations);
- return [
- CometChatMessageOption(
- id: "refresh",
- title: "Refresh",
- icon: Icon(Icons.refresh, color: Color(0xFF6852D6), size: 24),
- ),
- ...existingOptions,
- ];
- },
- ),
- ],
-)
-```
-
-
-
-***
-
-## New Templates
-
-Create entirely new templates for custom message types:
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- messagesRequestBuilder: MessagesRequestBuilder()
- ..limit = 30
- ..types = [...CometChatUIKit.getDataSource().getAllMessageTypes(), "contact"]
- ..categories = CometChatUIKit.getDataSource().getAllMessageCategories(),
- templates: [
- CometChatMessageTemplate(
- type: "contact",
- category: MessageCategoryConstants.custom,
- contentView: (baseMessage, context, alignment, {additionalConfigurations}) {
- return Padding(
- padding: const EdgeInsets.fromLTRB(8, 8, 8, 0),
- child: Row(
- children: [
- CircleAvatar(
- backgroundColor: Color(0xFFEDEAFA),
- child: Icon(Icons.person, color: Colors.white),
- ),
- SizedBox(width: 8),
- Text("Contact Name",
- style: TextStyle(
- color: alignment == BubbleAlignment.right ? Colors.white : Colors.black,
- fontSize: 14,
- ),
- ),
- ],
- ),
- );
- },
- ),
- ],
-)
-```
-
-
-
-
-In V6, `CometChatUIKit.getDataSource()` is replaced by `MessageTemplateUtils` for accessing data source methods. Use the appropriate service locator to get message options and templates.
-
diff --git a/ui-kit/flutter/v6/methods.mdx b/ui-kit/flutter/v6/methods.mdx
deleted file mode 100644
index dd7cf0929..000000000
--- a/ui-kit/flutter/v6/methods.mdx
+++ /dev/null
@@ -1,194 +0,0 @@
----
-title: "Methods"
----
-
-## Overview
-
-The UI Kit's core function is to extend the Chat SDK, translating the raw data and functionality provided by the underlying methods into visually appealing and easy-to-use UI components.
-
-The CometChat UI Kit has encapsulated the critical Chat SDK methods within its wrapper to efficiently manage internal eventing. This layer of abstraction simplifies interaction with the underlying CometChat SDK.
-
-You can access the methods using the `CometChatUIKit` class. This class provides access to all the public methods exposed by the CometChat UI Kit.
-
-## Init
-
-As a developer, you need to invoke this method every time before you use any other methods provided by the UI Kit.
-
-The `UIKitSettings` is an important parameter of the `init()` function. It functions as a base settings object, housing properties such as `appId`, `region`, and `authKey`.
-
-| Method | Type | Description |
-|---|---|---|
-| appId | String | Sets the unique ID for the app, available on dashboard |
-| region | String | Sets the region for the app ('us' or 'eu' or 'in') |
-| authKey | String | Sets the auth key for the app, available on dashboard |
-| subscriptionType | String | Sets subscription type for tracking the presence of all users |
-| roles | String | Sets subscription type for tracking the presence of users with specified roles |
-| autoEstablishSocketConnection | Boolean | Configures if web socket connections will be established automatically on app initialization or be done manually, set to true by default |
-
-> **V6 Note:** The `extensions` and `aiFeature` parameters from V5 have been removed. Extensions are built-in and handled automatically by `MessageTemplateUtils`. No registration is needed.
-
-```dart
-UIKitSettings uiKitSettings = (UIKitSettingsBuilder()
- ..subscriptionType = CometChatSubscriptionType.allUsers
- ..autoEstablishSocketConnection = true
- ..region = "your_region"
- ..appId = "your_appID"
- ..authKey = "your_authKey"
-).build();
-
-CometChatUIKit.init(
- uiKitSettings: uiKitSettings,
- onSuccess: (successMessage) async {
- // Ready to use
- },
- onError: (error) {
- // Handle error
- },
-);
-```
-
-## Login using Auth Key
-
-Only the UID of a user is needed to log in. This simple authentication procedure is useful when you are creating a POC or if you are in the development phase. For production apps, we suggest you use AuthToken instead of Auth Key.
-
-```dart
-CometChatUIKit.login(uid, onSuccess: (user) {
- // Logged in successfully
-}, onError: (e) {
- // Handle error
-});
-```
-
-## Login using Auth Token
-
-This advanced authentication procedure does not use the Auth Key directly in your client code thus ensuring safety.
-
-1. Create a User via the CometChat API when the user signs up in your app.
-2. Create an Auth Token via the CometChat API for the new user and save the token in your database.
-3. Load the Auth Token in your client and pass it to the `loginWithAuthToken()` method.
-
-```dart
-CometChatUIKit.loginWithAuthToken("authToken", onSuccess: (user) {
- // Logged in successfully
-}, onError: (e) {
- // Handle error
-});
-```
-
-## Logout
-
-Before a new user logs in, it is crucial to clean session data to avoid potential conflicts. This can be achieved by invoking the `.logout()` function.
-
-```dart
-CometChatUIKit.logout(onSuccess: (s) {
- // Logged out successfully
-}, onError: (e) {
- // Handle error
-});
-```
-
-## Create User
-
-You can dynamically create users on CometChat using the `.createUser()` function.
-
-```dart
-CometChat.createUser(userObject, 'authKey', onSuccess: (user) {
- // User created
-}, onError: (e) {
- // Handle error
-});
-```
-
-## Base Message
-
-### Text Message
-
-Send a text message to a single user or a group using the `sendTextMessage()` function.
-
-```dart
-CometChatUIKit.sendTextMessage(textMessageObject, onSuccess: (msg) {
- // Message sent
-}, onError: (e) {
- // Handle error
-});
-```
-
-### Media Message
-
-Send a media message (image, video, audio, file) using the `sendMediaMessage()` function.
-
-```dart
-CometChatUIKit.sendMediaMessage(mediaMessageObject, onSuccess: (msg) {
- // Message sent
-}, onError: (e) {
- // Handle error
-});
-```
-
-### Custom Message
-
-Send a custom message using the `sendCustomMessage()` function.
-
-```dart
-CometChatUIKit.sendCustomMessage(customMessageObject, onSuccess: (msg) {
- // Message sent
-}, onError: (e) {
- // Handle error
-});
-```
-
-## Interactive Message
-
-### Form Message
-
-```dart
-CometChatUIKit.sendFormMessage(formMessageObject, onSuccess: (msg) {
- // Form message sent
-}, onError: (e) {
- // Handle error
-});
-```
-
-### Card Message
-
-```dart
-CometChatUIKit.sendCardMessage(cardMessageObject, onSuccess: (msg) {
- // Card message sent
-}, onError: (e) {
- // Handle error
-});
-```
-
-### Scheduler Message
-
-```dart
-CometChatUIKit.sendSchedulerMessage(schedulerMessageObject, onSuccess: (msg) {
- // Scheduler message sent
-}, onError: (e) {
- // Handle error
-});
-```
-
-### Custom Interactive Message
-
-```dart
-CometChatUIKit.sendCustomInteractiveMessage(interactiveMessageObject, onSuccess: (msg) {
- // Interactive message sent
-}, onError: (e) {
- // Handle error
-});
-```
-
-## DateFormatter
-
-By providing a custom implementation of the `DateTimeFormatterCallback`, you can globally configure how time and date values are displayed across all UI components.
-
-```dart
-UIKitSettings uiKitSettings = (UIKitSettingsBuilder()
- ..subscriptionType = CometChatSubscriptionType.allUsers
- ..region = CometChatConfig.region
- ..appId = CometChatConfig.appId
- ..authKey = CometChatConfig.authKey
- ..dateTimeFormatterCallback = DateFormatter()
-).build();
-```
diff --git a/ui-kit/flutter/v6/multi-tab-chat-ui-guide.mdx b/ui-kit/flutter/v6/multi-tab-chat-ui-guide.mdx
deleted file mode 100644
index b9a27b738..000000000
--- a/ui-kit/flutter/v6/multi-tab-chat-ui-guide.mdx
+++ /dev/null
@@ -1,120 +0,0 @@
----
-title: "Multi Tab Chat UI Guide"
----
-
-This guide helps you create a multi-tab chat user interface using the CometChat V6 UIKit in Flutter. The final UI consists of three tabs: Conversations, Users, and Groups.
-
-##### Create the Multi-Tab Chat UI:
-
-Update your `lib/multi_tab_chat_ui.dart` file with the following code:
-
-
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:flutter/material.dart';
-
-class MultiTabUIGuideExample extends StatefulWidget {
- const MultiTabUIGuideExample({super.key});
-
- @override
- State createState() => _MultiTabUIGuideExampleState();
-}
-
-class _MultiTabUIGuideExampleState extends State {
-
- void _navigateToMessages(BuildContext context, {User? user, Group? group}) {
- Navigator.push(
- context,
- MaterialPageRoute(
- builder: (context) => Scaffold(
- appBar: CometChatMessageHeader(
- user: user,
- group: group,
- ),
- body: SafeArea(
- child: Column(
- children: [
- Expanded(
- child: CometChatMessageList(
- user: user,
- group: group,
- ),
- ),
- CometChatMessageComposer(
- user: user,
- group: group,
- ),
- ],
- ),
- ),
- ),
- ),
- );
- }
-
- @override
- Widget build(BuildContext context) {
- return DefaultTabController(
- length: 3,
- child: Scaffold(
- appBar: AppBar(
- title: const Text('Multi Tab UI Guide'),
- backgroundColor: Colors.white,
- leading: null,
- automaticallyImplyLeading: false,
- bottom: const TabBar(
- tabs: [
- Tab(icon: Icon(Icons.chat), text: 'Conversation'),
- Tab(icon: Icon(Icons.person), text: 'Users'),
- Tab(icon: Icon(Icons.group), text: 'Groups'),
- ],
- ),
- ),
- body: TabBarView(
- children: [
- CometChatConversations(
- hideAppbar: true,
- onItemTap: (conversation) {
- _navigateToMessages(
- context,
- user: conversation.conversationWith is User
- ? conversation.conversationWith as User
- : null,
- group: conversation.conversationWith is Group
- ? conversation.conversationWith as Group
- : null,
- );
- },
- ),
- CometChatUsers(
- hideAppbar: true,
- hideSearch: true,
- onItemTap: (user) {
- _navigateToMessages(context, user: user);
- },
- ),
- CometChatGroups(
- hideAppbar: true,
- hideSearch: true,
- onItemTap: (group) {
- _navigateToMessages(context, group: group);
- },
- ),
- ],
- ),
- ),
- );
- }
-}
-```
-
-
-
-## Key V6 Differences
-
-| Aspect | V5 | V6 |
-|---|---|---|
-| Composite widgets | `CometChatConversationsWithMessages`, `CometChatUsersWithMessages`, `CometChatGroupsWithMessages` | Not available — compose manually |
-| Navigation to messages | Handled internally by composite widgets | You handle navigation and compose `MessageHeader` + `MessageList` + `MessageComposer` |
-| State management | GetX | BLoC |
diff --git a/ui-kit/flutter/v6/outgoing-call.mdx b/ui-kit/flutter/v6/outgoing-call.mdx
deleted file mode 100644
index 55f369bf7..000000000
--- a/ui-kit/flutter/v6/outgoing-call.mdx
+++ /dev/null
@@ -1,352 +0,0 @@
----
-title: "Outgoing Call"
-description: "Full-screen view displaying recipient information and call status during an outgoing call, with automatic transition to the ongoing call screen."
----
-
-`CometChatOutgoingCall` manages the outgoing call process. It displays recipient information (avatar, name) and call status, and automatically transitions to the ongoing call screen when the receiver accepts.
-
-
-
-
-
----
-
-## Where It Fits
-
-`CometChatOutgoingCall` is typically launched automatically by `CometChatCallButtons` when a call is initiated. It can also be launched manually for custom call flows.
-
----
-
-## Quick Start
-
-### Automatic (via CallButtons)
-
-When using `CometChatCallButtons`, the outgoing call screen is launched automatically when the user taps a call button. No manual integration needed.
-
-### Manual Launch
-
-For custom call flows:
-
-
-
-```dart
-Navigator.push(context, MaterialPageRoute(
- builder: (context) => CometChatOutgoingCall(
- user: user,
- call: callObject,
- ),
-));
-```
-
-
-
-
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_calls_uikit.dart';
-import 'package:flutter/material.dart';
-
-class OutgoingCallExample extends StatefulWidget {
- const OutgoingCallExample({super.key});
-
- @override
- State createState() => _OutgoingCallExampleState();
-}
-
-class _OutgoingCallExampleState extends State {
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: SafeArea(
- child: CometChatOutgoingCall(
- user: user,
- call: callObject,
- ),
- ),
- );
- }
-}
-```
-
-
-
-Prerequisites: CometChat SDK initialized, `enableCalls = true` set in UIKitSettings. See [Call Features](/ui-kit/flutter/call-features) for setup.
-
----
-
-## Actions and Events
-
-### Callback Methods
-
-#### `onCancelled`
-
-Fires when the user cancels the outgoing call. Override to customize cancel behavior.
-
-
-
-```dart
-CometChatOutgoingCall(
- user: user,
- call: callObject,
- onCancelled: (BuildContext context, Call call) {
- // Custom cancel logic
- },
-)
-```
-
-
-
-#### `onError`
-
-Fires on internal errors.
-
-
-
-```dart
-CometChatOutgoingCall(
- user: user,
- call: callObject,
- onError: (e) {
- debugPrint("Error: ${e.message}");
- },
-)
-```
-
-
-
-### Global Events
-
-The component emits events via `CometChatCallEvents`:
-
-| Event | Description |
-|---|---|
-| `ccCallAccepted` | Triggers when the outgoing call is accepted |
-| `ccCallRejected` | Triggers when the outgoing call is rejected |
-
-
-
-```dart
-class _YourScreenState extends State with CometChatCallEventListener {
- @override
- void initState() {
- super.initState();
- CometChatCallEvents.addCallEventsListener("unique_listener_ID", this);
- }
-
- @override
- void dispose() {
- super.dispose();
- CometChatCallEvents.removeCallEventsListener("unique_listener_ID");
- }
-
- @override
- void ccCallAccepted(Call call) {
- debugPrint("Call accepted: ${call.sessionId}");
- }
-
- @override
- void ccCallRejected(Call call) {
- debugPrint("Call rejected: ${call.sessionId}");
- }
-
- @override
- Widget build(BuildContext context) {
- return const Placeholder();
- }
-}
-```
-
-
-
----
-
-## Functionality
-
-| Property | Type | Default | Description |
-|---|---|---|---|
-| `user` | `User?` | `null` | Recipient user object |
-| `call` | `Call` | **required** | Call object with session details |
-| `callSettingsBuilder` | `CallSettingsBuilder?` | `null` | Configure call settings |
-| `height` | `double?` | `null` | Widget height |
-| `width` | `double?` | `null` | Widget width |
-| `declineButtonIcon` | `Widget?` | `null` | Custom decline/cancel button icon |
-| `declineButtonText` | `String?` | `null` | Custom decline button text |
-| `disableSoundForCalls` | `bool?` | `false` | Disable outgoing call sound |
-| `customSoundForCalls` | `String?` | `null` | Custom sound asset path |
-
-**Example — custom decline text and disabled sound:**
-
-
-
-```dart
-CometChatOutgoingCall(
- user: user,
- call: callObject,
- disableSoundForCalls: true,
- declineButtonText: "Cancel Call",
-)
-```
-
-
-
-
-
-
----
-
-## Custom View Slots
-
-### Avatar View
-
-Replace the recipient's avatar.
-
-
-
-```dart
-CometChatOutgoingCall(
- user: user,
- call: callObject,
- avatarView: (context, call) {
- return CircleAvatar(
- radius: 50,
- backgroundImage: NetworkImage(user?.avatar ?? ""),
- );
- },
-)
-```
-
-
-
-### Title View
-
-Replace the recipient's name / call status text.
-
-
-
-```dart
-CometChatOutgoingCall(
- user: user,
- call: callObject,
- titleView: (context, call) {
- return Text(
- call.receiver?.name ?? "Unknown",
- style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold, color: Colors.white),
- );
- },
-)
-```
-
-
-
-### Subtitle View
-
-Replace the subtitle (e.g., "Calling...").
-
-
-
-```dart
-CometChatOutgoingCall(
- user: user,
- call: callObject,
- subtitleView: (context, call) {
- return Text(
- "Ringing...",
- style: TextStyle(fontSize: 14, color: Colors.white70),
- );
- },
-)
-```
-
-
-
-### Cancelled View
-
-Replace the cancel/end call button.
-
-
-
-```dart
-CometChatOutgoingCall(
- user: user,
- call: callObject,
- cancelledView: (context, call) {
- return ElevatedButton.icon(
- onPressed: () {
- // Cancel call
- },
- icon: Icon(Icons.call_end),
- label: Text("End Call"),
- style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
- );
- },
-)
-```
-
-
-
----
-
-## Style
-
-
-
-```dart
-CometChatOutgoingCall(
- user: user,
- call: callObject,
- outgoingCallStyle: CometChatOutgoingCallStyle(
- avatarStyle: CometChatAvatarStyle(
- backgroundColor: Color(0xFFFBAA75),
- borderRadius: BorderRadius.circular(8),
- ),
- declineButtonColor: Color(0xFFF44649),
- declineButtonBorderRadius: BorderRadius.circular(12),
- ),
-)
-```
-
-
-
-
-
-
-
-### Style Properties
-
-| Property | Description |
-|---|---|
-| `avatarStyle` | Recipient avatar appearance |
-| `declineButtonColor` | Cancel button background color |
-| `declineButtonBorderRadius` | Cancel button corner radius |
-| `backgroundColor` | Screen background color |
-
----
-
-## Key V6 Differences
-
-| Aspect | V5 | V6 |
-|---|---|---|
-| Subtitle | Static `String?` | Dynamic `subtitleView: Widget? Function(BuildContext, Call)?` |
-| Decline callback | `onDecline` | Renamed to `onCancelled` |
-| Decline icon | URL-based `String?` | Widget-based `declineButtonIcon: Widget?` |
-| State management | GetX controller | BLoC (`OutgoingCallBloc`) |
-| Removed | `theme`, `avatarStyle`, `cardStyle`, `buttonStyle`, `ongoingCallConfiguration` | Integrated into main style |
-
----
-
-## Next Steps
-
-
-
- Handle incoming calls
-
-
- Add voice and video call buttons
-
-
- Complete calling setup
-
-
- Detailed styling reference
-
-
diff --git a/ui-kit/flutter/v6/overview.mdx b/ui-kit/flutter/v6/overview.mdx
deleted file mode 100644
index 00ec1d9ad..000000000
--- a/ui-kit/flutter/v6/overview.mdx
+++ /dev/null
@@ -1,101 +0,0 @@
----
-title: "CometChat UI Kit For Flutter (V6)"
-sidebarTitle: "Overview"
----
-
-
-This is a **beta release** of the CometChat Flutter UI Kit V6. APIs and features may change before the stable release.
-
-
-The **CometChat UI Kit V6** for Flutter is a major architectural evolution of the Flutter Chat UIKit. It provides the same robust set of **prebuilt UI widgets** that are **modular, customizable, and highly scalable**, now built on **clean architecture** with **BLoC state management** for better testability, maintainability, and performance.
-
-***
-
-## **What's New in V6?**
-
-* **BLoC State Management** – Replaces GetX with flutter_bloc for predictable, testable state.
-* **Clean Architecture** – Every module follows `bloc/` + `data/` + `domain/` + `di/` layers.
-* **No DataSource Decorator Chain** – Direct static method calls via `MessageTemplateUtils` replace the 10-layer decorator pattern.
-* **Internalized Shared UI** – `cometchat_uikit_shared` is now part of the package, no separate dependency needed.
-* **Faster Startup** – No extension registration or network calls at init time.
-
-***
-
-## **Why Choose CometChat UI Kit V6?**
-
-* **Rapid Integration** – Prebuilt UI widgets for faster deployment.
-* **Customizable & Flexible** – Modify the UI to align with your brand's identity.
-* **Cross-Platform Compatibility** – Works seamlessly across iOS and Android platforms.
-* **Scalable & Reliable** – Built on CometChat's robust chat infrastructure.
-* **Testable** – BLoC pattern with `bloc_test` and `mocktail` for comprehensive testing.
-* **Better Performance** – ~500-2000ms faster startup, no decorator chain overhead.
-
-***
-
-## **Integration**
-
-### **UI Components (Assemble It Yourself)**
-
-A collection of individual widgets—like conversation lists, message lists, message composer, etc.—each with built-in chat logic so you can customize every element.
-
-**How It Works**
-
-* Import the widgets you need from the UI Kit.
-* Arrange them in your desired layout, applying styling or customization as needed.
-* Each widget integrates with CometChat logic via BLoC and clean architecture layers.
-
-**Why It's Great**
-
-* **Flexible Design** – You control the final UI arrangement.
-* **No Extra Overhead** – Implement only the features you need.
-* **Modular** – Use exactly what you want, when you want.
-
-[**Go to V6 Getting Started**](/ui-kit/flutter/v6/getting-started)
-
-***
-
-## **Before Getting Started**
-
-Before you begin, grasp the fundamental concepts and features offered by CometChat's APIs, SDK, and UI Kit. You can find detailed information in the [Key Concepts](/fundamentals/key-concepts) documentation.
-
-To begin, please follow the [Getting Started](/ui-kit/flutter/v6/getting-started) guide.
-
-***
-
-## **Next Steps for Developers**
-
-1. **Learn the Basics** – [Key Concepts](/fundamentals/key-concepts).
-2. **Follow the Setup Guide** – [V6 Getting Started](/ui-kit/flutter/v6/getting-started)
-3. **Customize UI** – Adjust styles, themes, and widgets.
-4. **Test & Deploy** – Run tests and launch your chat app.
-
-***
-
-## **Helpful Resources**
-
-
-
-
-Fully functional sample applications to accelerate your development.
-
-[View on GitHub](https://github.com/cometchat/cometchat-uikit-flutter)
-
-
-
-
-
-Upgrade from V5 to V6 with our step-by-step migration guide.
-
-[View Migration Guide](/ui-kit/flutter/v6/upgrading-from-v5)
-
-
-
-
-***
-
-## **Need Help?**
-
-If you need assistance, check out:
-
-* [Developer Community](http://community.cometchat.com/)
-* [Support Portal](https://help.cometchat.com/hc/en-us/requests/new)
diff --git a/ui-kit/flutter/v6/search.mdx b/ui-kit/flutter/v6/search.mdx
deleted file mode 100644
index 124f0f0cd..000000000
--- a/ui-kit/flutter/v6/search.mdx
+++ /dev/null
@@ -1,296 +0,0 @@
----
-title: "Search"
-description: "Unified search component for finding conversations and messages across all chats."
----
-
-`CometChatSearch` provides unified search functionality across conversations and messages. In V6, it uses a single consolidated `SearchBloc` replacing the three separate controllers from V5.
-
-
-
-
-
----
-
-## Where It Fits
-
-`CometChatSearch` is typically launched from a search button in the conversations list or message header. It searches across both conversations and messages, displaying results in categorized sections.
-
-
-
-```dart
-CometChatSearch(
- onConversationItemClick: (conversation) {
- // Navigate to conversation
- },
- onMessageItemClick: (message) {
- // Navigate to message in context
- },
-)
-```
-
-
-
----
-
-## Quick Start
-
-Using Navigator:
-
-
-
-```dart
-Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatSearch()));
-```
-
-
-
-Embedding as a widget:
-
-
-
-```dart
-@override
-Widget build(BuildContext context) {
- return Scaffold(
- body: SafeArea(
- child: CometChatSearch(),
- ),
- );
-}
-```
-
-
-
-Launching from conversations with search button:
-
-
-
-```dart
-CometChatConversations(
- hideSearch: false,
- searchReadOnly: true,
- onSearchTap: () {
- Navigator.push(context, MaterialPageRoute(
- builder: (context) => CometChatSearch(
- onConversationItemClick: (conversation) {
- // Navigate to chat
- },
- onMessageItemClick: (message) {
- // Navigate to message
- },
- ),
- ));
- },
-)
-```
-
-
-
-Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()` and a user logged in.
-
----
-
-## Actions and Events
-
-### Callback Methods
-
-#### `onConversationItemClick`
-
-Fires when a conversation result is tapped.
-
-
-
-```dart
-CometChatSearch(
- onConversationItemClick: (conversation) {
- final entity = conversation.conversationWith;
- if (entity is User) {
- navigateToUserChat(entity);
- } else if (entity is Group) {
- navigateToGroupChat(entity);
- }
- },
-)
-```
-
-
-
-#### `onMessageItemClick`
-
-Fires when a message result is tapped.
-
-
-
-```dart
-CometChatSearch(
- onMessageItemClick: (message) {
- // Navigate to the message in its conversation
- },
-)
-```
-
-
-
-#### `onBack`
-
-Fires when the user presses the back button.
-
-
-
-```dart
-CometChatSearch(
- onBack: () {
- Navigator.pop(context);
- },
-)
-```
-
-
-
-#### `onError`
-
-Fires on internal errors.
-
-
-
-```dart
-CometChatSearch(
- onError: (e) {
- debugPrint("Search error: ${e.message}");
- },
-)
-```
-
-
-
----
-
-## Functionality
-
-| Property | Type | Default | Description |
-|---|---|---|---|
-| `showBackButton` | `bool?` | `true` | Toggle back button visibility |
-| `placeholder` | `String?` | `null` | Search input placeholder text |
-| `hideConversationResults` | `bool?` | `false` | Hide conversation search results |
-| `hideMessageResults` | `bool?` | `false` | Hide message search results |
-
----
-
-## Custom View Slots
-
-### Conversation Item View
-
-Replace the conversation result item.
-
-
-
-```dart
-CometChatSearch(
- conversationItemView: (conversation, context) {
- return ListTile(
- leading: CircleAvatar(child: Text(conversation.conversationWith?.name?[0] ?? "")),
- title: Text(conversation.conversationWith?.name ?? ""),
- );
- },
-)
-```
-
-
-
-### Message Item View
-
-Replace the message result item.
-
-
-
-```dart
-CometChatSearch(
- messageItemView: (message, context) {
- return ListTile(
- title: Text(message.sender?.name ?? ""),
- subtitle: message is TextMessage ? Text(message.text) : Text("Media message"),
- );
- },
-)
-```
-
-
-
-### State Views
-
-
-
-```dart
-CometChatSearch(
- emptyStateView: (context) => Center(child: Text("No results found")),
- errorStateView: (context) => Center(child: Text("Search failed")),
- loadingStateView: (context) => Center(child: CircularProgressIndicator()),
-)
-```
-
-
-
----
-
-## Advanced
-
-### BLoC Access
-
-The search widget uses `SearchBloc` internally:
-
-| Component | Description |
-|---|---|
-| `SearchBloc` | Single consolidated BLoC for all search types |
-| `SearchEvent` | Events: `SearchTextChanged`, `ClearSearch`, `LoadMoreConversationResults`, `LoadMoreMessageResults` |
-| `SearchState` | Search state with conversation and message results |
-
-### V5 → V6 Migration
-
-| V5 | V6 |
-|---|---|
-| `CometChatSearchController` | `SearchBloc` |
-| `CometChatConversationsSearchController` | Merged into `SearchBloc` |
-| `CometChatMessagesSearchController` | Merged into `SearchBloc` |
-| `SearchUtils` | Inlined into `SearchBloc` |
-| 3 separate controllers | 1 unified BLoC |
-
----
-
-## Style
-
-
-
-```dart
-CometChatSearch(
- searchStyle: CometChatSearchStyle(
- backgroundColor: Colors.white,
- searchBoxBackgroundColor: Color(0xFFF5F5F5),
- searchBoxBorderRadius: BorderRadius.circular(12),
- ),
-)
-```
-
-
-
-
-
-
-
----
-
-## Next Steps
-
-
-
- Browse recent conversations
-
-
- Display messages in a conversation
-
-
- Detailed styling reference
-
-
- Browse available users
-
-
diff --git a/ui-kit/flutter/v6/shortcut-formatter-guide.mdx b/ui-kit/flutter/v6/shortcut-formatter-guide.mdx
deleted file mode 100644
index 12ccabf9e..000000000
--- a/ui-kit/flutter/v6/shortcut-formatter-guide.mdx
+++ /dev/null
@@ -1,139 +0,0 @@
----
-title: "Shortcut Formatter"
----
-
-## Introduction
-
-The `ShortcutFormatter` class extends `CometChatTextFormatter` to handle shortcuts within messages. This guide walks you through implementing shortcut extensions in your CometChat V6 application.
-
-## Setup
-
-1. Create the ShortcutFormatter class by extending `CometChatTextFormatter`:
-
-
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-
-class ShortcutFormatter extends CometChatTextFormatter {
- @override
- void init() {
- trackingCharacter ??= "!";
- }
-
- bool isShortcutTracking = false;
-
- void prepareShortcuts(TextEditingController textEditingController) {
- CometChat.callExtension('message-shortcuts', 'GET', '/v1/fetch', null,
- onSuccess: (map) {
- if (map.isNotEmpty) {
- Map data = map["data"];
- if (data.isNotEmpty) {
- Map shortcuts = data["shortcuts"];
- if (shortcuts.isNotEmpty) {
- parseData(shortcuts: shortcuts, textEditingController: textEditingController);
- }
- }
- }
- },
- onError: (error) {},
- );
- }
-
- void parseData({Map? shortcuts, required TextEditingController textEditingController}) async {
- if (shortcuts == null || shortcuts.isEmpty) {
- suggestionListEventSink?.add([]);
- if (onSearch != null) onSearch!(null);
- CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
- } else {
- CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
- if (suggestionListEventSink != null && shortcuts.isNotEmpty) {
- List list = [];
- shortcuts.forEach((key, value) => list.add(SuggestionListItem(
- id: key,
- title: "$key → $value",
- onTap: () {
- int cursorPos = textEditingController.selection.base.offset;
- String left = textEditingController.text.substring(0, cursorPos - 1);
- String right = textEditingController.text.substring(cursorPos);
- textEditingController.text = "$left$value $right";
- updatePreviousText(textEditingController.text);
- textEditingController.selection = TextSelection(
- baseOffset: cursorPos - 1 + "$value".length + 1,
- extentOffset: cursorPos - 1 + "$value".length + 1,
- );
- resetMatchTracker();
- isShortcutTracking = false;
- CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
- },
- )));
- suggestionListEventSink?.add(list);
- }
- }
- }
-
- void updatePreviousText(String text) {
- previousTextEventSink?.add(text);
- }
-
- void resetMatchTracker() {
- suggestionListEventSink?.add([]);
- if (onSearch != null) onSearch!(null);
- }
-
- @override
- void onChange(TextEditingController textEditingController, String previousText) {
- var cursorPosition = textEditingController.selection.base.offset;
- if (textEditingController.text.isEmpty) {
- resetMatchTracker();
- return;
- }
- // Handle shortcut tracking logic
- String previousCharacter = cursorPosition == 0 ? "" : textEditingController.text[cursorPosition - 1];
- bool isSpace = cursorPosition == 1 || (textEditingController.text.length > 1 && cursorPosition > 1 &&
- (textEditingController.text[cursorPosition - 2] == " " || textEditingController.text[cursorPosition - 2] == "\n"));
-
- if (isShortcutTracking) {
- isShortcutTracking = false;
- if (onSearch != null) onSearch!(null);
- CometChatUIEvents.hidePanel(composerId, CustomUIPosition.composerPreview);
- } else if (previousCharacter == trackingCharacter && isSpace) {
- isShortcutTracking = true;
- if (onSearch != null) onSearch!(trackingCharacter);
- CometChatUIEvents.showPanel(composerId, CustomUIPosition.composerPreview,
- (context) => getLoadingIndicator(context, cometChatTheme));
- prepareShortcuts(textEditingController);
- }
- }
-
- @override
- TextStyle getMessageInputTextStyle(CometChatTheme theme) {
- throw UnimplementedError();
- }
-
- @override
- void handlePreMessageSend(BuildContext context, BaseMessage baseMessage) {}
-
- @override
- void onScrollToBottom(TextEditingController textEditingController) {}
-}
-```
-
-
-
-## Usage
-
-Pass the `ShortcutFormatter` to the `textFormatters` property of `CometChatMessageComposer`:
-
-
-
-```dart
-CometChatMessageComposer(
- user: user,
- textFormatters: [ShortcutFormatter()],
-)
-```
-
-
-
-
diff --git a/ui-kit/flutter/v6/sound-manager.mdx b/ui-kit/flutter/v6/sound-manager.mdx
deleted file mode 100644
index 7151fe40d..000000000
--- a/ui-kit/flutter/v6/sound-manager.mdx
+++ /dev/null
@@ -1,61 +0,0 @@
----
-title: "Sound Manager"
----
-
-## Overview
-
-The `SoundManager` is a helper class responsible for managing and playing various types of audio in the CometChat V6 UI Kit. This includes sound events for incoming and outgoing messages and calls.
-
-## Methods
-
-### Play Sound
-
-The SoundManager plays pre-defined or custom sounds based on user interactions with the chat interface.
-
-
-
-```dart
-// Play default sounds:
-SoundManager().play(sound: Sound.incomingMessage);
-SoundManager().play(sound: Sound.outgoingMessage);
-```
-
-
-
-### Stop Sound
-
-Stop any sound currently being played:
-
-
-
-```dart
-SoundManager().stop();
-```
-
-
-
-## Usage
-
-Play a custom sound:
-
-
-
-```dart
-SoundManager().play(sound: Sound.outgoingMessage, customSound: "assetPath");
-```
-
-
-
-## Sound Enum Reference
-
-| Sound | Asset |
-|---|---|
-| incomingMessage | assets/sound/incoming_message.wav |
-| outgoingMessage | assets/sound/outgoing_message.wav |
-| incomingMessageFromOther | assets/sound/incoming_message.wav |
-| outgoingCall | assets/sound/outgoing_call.wav |
-| incomingCall | assets/sound/incoming_call.wav |
-
-
-In V6, the `CometChatConversations` widget provides `disableSoundForMessages` and `customSoundForMessages` properties to control sound behavior at the widget level.
-
diff --git a/ui-kit/flutter/v6/theme-introduction.mdx b/ui-kit/flutter/v6/theme-introduction.mdx
deleted file mode 100644
index 2b7f02a34..000000000
--- a/ui-kit/flutter/v6/theme-introduction.mdx
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: "Theming In CometChat Flutter UI Kit V6"
-sidebarTitle: "Theming"
----
-
-CometChat's theming framework is a robust system that empowers developers to define the look and feel of their applications with precision and consistency. It follows three essential design system principles: Color, Typography, and Shape.
-
-> The theming system is identical between V5 and V6. All theme classes, properties, and APIs work the same way.
-
-## Theming Overview
-
-Theming in the UI Kit consists of three core components:
-
-- **Color:** Managed through `CometChatColorPalette`, it controls the application's color scheme, including primary, neutral, alert, and text colors.
-- **Typography:** Defined via `CometChatTypography`, it standardizes text styles, such as font size and weight.
-- **Shape:** Configured using `CometChatSpacing`, it defines the structure of margins, paddings, and border radii.
-
-## Key Benefits
-
-- Achieve consistent UI design across your application.
-- Support for light and dark themes.
-- Easy scalability and customization for app-specific requirements.
-
-## Light and Dark Themes
-
-The Chat UI Kit supports both light and dark themes. V6 adds dedicated icon variants:
-- `assets/icons/light/` — light mode icons
-- `assets/icons/dark/` — dark mode icons
-- `assets/icons/svg/calls/` — SVG call icons
-
-## Custom Theme
-
-The Chat UI Kit offers robust support for creating customized themes using `CometChatColorPalette`, `CometChatTypography`, and `CometChatSpacing` with Flutter's `ThemeExtension`.
-
-
-
-```dart
-ThemeData(
- fontFamily: 'Times New Roman',
- extensions: [
- CometChatColorPalette(
- primary: Color(0xFFF76808),
- ),
- ],
-)
-```
-
-
-
-## Core Components
-
-### Color
-
-The `CometChatColorPalette` class manages colors in your app:
-
-- **Primary Colors:** Base colors and extended shades.
-- **Neutral Colors:** Shades for surfaces and backgrounds.
-- **Alert Colors:** Colors for states like success, error, warning, and info.
-- **Text Colors:** Differentiated for primary, secondary, and disabled states.
-
-### Typography
-
-The `CometChatTypography` class standardizes text styles:
-
-- **Headings:** Text styles for various heading levels.
-- **Body:** Styling for regular text.
-- **Captions:** Smaller text style for labels.
-- **Buttons:** Text style for button text.
-- **Links:** Styles for clickable links.
-- **Titles:** Style for main titles or component headers.
-
-### Spacing
-
-The `CometChatSpacing` class defines layout structure:
-
-- **Padding:** Internal spacing within elements.
-- **Margin:** Space between elements.
-- **Radius:** Corner rounding of UI elements.
-
-## Best Practices
-
-- **Ensure Contrast:** Follow accessibility guidelines to maintain a minimum contrast ratio.
-- **Consistency:** Use a consistent color palette across all components.
-- **Adaptability:** Test your theme in various scenarios, such as low-light and high-contrast environments.
diff --git a/ui-kit/flutter/v6/threaded-messages-header.mdx b/ui-kit/flutter/v6/threaded-messages-header.mdx
deleted file mode 100644
index c80efb38c..000000000
--- a/ui-kit/flutter/v6/threaded-messages-header.mdx
+++ /dev/null
@@ -1,235 +0,0 @@
----
-title: "Threaded Messages Header"
-description: "Header component for threaded conversations showing the parent message, reply count, and thread navigation."
----
-
-`CometChatThreadedHeader` displays the parent message of a thread along with reply count and provides the container for threaded message list and composer. It enables organized threaded conversations within a chat.
-
-
-
-
-
----
-
-## Where It Fits
-
-`CometChatThreadedHeader` is used when a user taps "Reply in Thread" on a message. It wraps the parent message display with a `CometChatMessageList` (filtered by `parentMessageId`) and `CometChatMessageComposer` for thread replies.
-
-
-
-```dart
-CometChatThreadedHeader(
- parentMessage: parentMessage,
- loggedInUser: loggedInUser,
-)
-```
-
-
-
----
-
-## Quick Start
-
-
-
-```dart
-import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
-import 'package:flutter/material.dart';
-
-class ThreadScreen extends StatelessWidget {
- final BaseMessage parentMessage;
- final User loggedInUser;
-
- const ThreadScreen({
- super.key,
- required this.parentMessage,
- required this.loggedInUser,
- });
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: SafeArea(
- child: CometChatThreadedHeader(
- parentMessage: parentMessage,
- loggedInUser: loggedInUser,
- ),
- ),
- );
- }
-}
-```
-
-
-
-Typically launched from the message list when a user selects "Reply in Thread":
-
-
-
-```dart
-CometChatMessageList(
- user: user,
- onThreadRepliesClick: (message, context, {bubbleView}) {
- Navigator.push(context, MaterialPageRoute(
- builder: (context) => ThreadScreen(
- parentMessage: message,
- loggedInUser: CometChatUIKit.loggedInUser!,
- ),
- ));
- },
-)
-```
-
-
-
-Prerequisites: CometChat SDK initialized, a user logged in, and a valid `BaseMessage` object as the parent message.
-
----
-
-## Actions and Events
-
-### Callback Methods
-
-#### `onBack`
-
-Fires when the user presses the back button.
-
-
-
-```dart
-CometChatThreadedHeader(
- parentMessage: parentMessage,
- loggedInUser: loggedInUser,
- onBack: () {
- Navigator.pop(context);
- },
-)
-```
-
-
-
-#### `onError`
-
-Fires on internal errors.
-
-
-
-```dart
-CometChatThreadedHeader(
- parentMessage: parentMessage,
- loggedInUser: loggedInUser,
- onError: (e) {
- debugPrint("Error: ${e.message}");
- },
-)
-```
-
-
-
-### SDK Events (Real-Time, Automatic)
-
-| SDK Listener | Internal behavior |
-|---|---|
-| New thread reply received | Increments reply count |
-| Parent message edited | Updates parent message display |
-| Parent message deleted | Updates parent message display |
-
----
-
-## Functionality
-
-| Property | Type | Default | Description |
-|---|---|---|---|
-| `parentMessage` | `BaseMessage` | **required** | The parent message of the thread |
-| `loggedInUser` | `User` | **required** | The currently logged-in user |
-| `showBackButton` | `bool?` | `true` | Toggle back button visibility |
-| `title` | `String?` | `null` | Custom title text |
-| `hideMessageComposer` | `bool?` | `false` | Hide the message composer |
-
----
-
-## Custom View Slots
-
-### Bubble View
-
-Replace the parent message bubble display.
-
-
-
-```dart
-CometChatThreadedHeader(
- parentMessage: parentMessage,
- loggedInUser: loggedInUser,
- bubbleView: (message) {
- if (message is TextMessage) {
- return Container(
- padding: EdgeInsets.all(12),
- decoration: BoxDecoration(
- color: Color(0xFFF5F5F5),
- borderRadius: BorderRadius.circular(8),
- ),
- child: Text(message.text),
- );
- }
- return null;
- },
-)
-```
-
-
-
----
-
-## Advanced
-
-### BLoC Access
-
-The threaded header uses `ThreadedHeaderBloc` internally:
-
-| Component | Description |
-|---|---|
-| `ThreadedHeaderBloc` | Manages threaded header state |
-| `ThreadedHeaderEvent` | Events: `InitializeThreadedHeader`, `IncrementReplyCount`, `UpdateParentMessage` |
-| `ThreadedHeaderState` | Threaded header state with parent message and reply count |
-
----
-
-## Style
-
-
-
-```dart
-CometChatThreadedHeader(
- parentMessage: parentMessage,
- loggedInUser: loggedInUser,
- style: CometChatThreadedHeaderStyle(
- backgroundColor: Colors.white,
- replyCountTextColor: Color(0xFF727272),
- ),
-)
-```
-
-
-
-
-
-
-
----
-
-## Next Steps
-
-
-
- Display messages in a conversation
-
-
- Compose and send messages
-
-
- Complete threaded messages implementation
-
-
- Detailed styling reference
-
-
diff --git a/ui-kit/flutter/v6/troubleshooting.mdx b/ui-kit/flutter/v6/troubleshooting.mdx
deleted file mode 100644
index 0bc3c4c3c..000000000
--- a/ui-kit/flutter/v6/troubleshooting.mdx
+++ /dev/null
@@ -1,112 +0,0 @@
----
-title: "Troubleshooting"
-description: "Common failure modes and fixes for the CometChat Flutter V6 UI Kit."
----
-
-## Initialization and Login
-
-| Symptom | Cause | Fix |
-|---|---|---|
-| `CometChatUIKit.init()` fails silently | Invalid App ID, Region, or Auth Key | Double-check credentials from the [CometChat Dashboard](https://app.cometchat.com/) |
-| Blank screen after login | Component rendered before `init()` or `login()` completes | Ensure `init()` → `login()` order completes before rendering any UI Kit component. See [Methods](/ui-kit/flutter/v6/methods) |
-| Component renders but shows no data | User not logged in | Call `CometChatUIKit.login("UID")` after init resolves |
-| Login fails with "UID not found" | UID doesn't exist in your CometChat app | Create the user via Dashboard, SDK, or REST API first |
-| `CometChatUIKit.loggedInUser` returns null | User not logged in or session expired | Call `login()` or `loginWithAuthToken()` first |
-| Auth Key exposed in production | Using Auth Key instead of Auth Token | Switch to `loginWithAuthToken()` for production. Generate tokens server-side via the REST API |
-
----
-
-## Theming and Styling
-
-| Symptom | Cause | Fix |
-|---|---|---|
-| Theme not applied | `ThemeExtension` not added to `MaterialApp` | Add CometChat style extensions to your `ThemeData.extensions` list |
-| Dark mode not working | Brightness not detected | CometChat theme uses `MediaQuery.platformBrightnessOf(context)`. Ensure your `MaterialApp` supports dark mode |
-| Custom colors not applying | Overriding wrong style class | Check [Component Styling](/ui-kit/flutter/v6/component-styling) for the correct style class per component |
-| Component-level style ignored | Style object not passed correctly | Ensure you pass the style to the `style` property, not as a `ThemeExtension` |
-| Styles apply in light mode but not dark | Only light theme configured | Configure both light and dark themes in `MaterialApp` with separate `ThemeData` instances |
-| Bubble style not applying | Style linked to wrong direction | Define separate styles for `CometChatOutgoingMessageBubbleStyle` and `CometChatIncomingMessageBubbleStyle` — changing one does not affect the other |
-
----
-
-## Components
-
-| Symptom | Cause | Fix |
-|---|---|---|
-| Component not rendering | `init()` or `login()` not complete | Ensure both complete before building any CometChat widget |
-| Message list is empty | Invalid `User` or `Group` object | Fetch the user or group via the SDK before passing it to the component |
-| `onThreadRepliesClick` not firing | Callback not set | Pass the callback to `CometChatMessageList(onThreadRepliesClick: ...)` |
-| Custom template not rendering | Template key doesn't match message | Ensure `type` and `category` on your template match the message's `type` and `category` exactly |
-| `addTemplate` not overriding default | Template appended, not replaced | `addTemplate` appends to the list. The template map uses last-write-wins by `category_type` key, so your template must have the same key to override |
-| Keyboard covers composer | `resizeToAvoidBottomInset` not set | Set `resizeToAvoidBottomInset: true` on your `Scaffold` |
-| Swipe-to-reply not working | Disabled or message not eligible | Check `enableSwipeToReply` is `true`, message has a valid ID, and is not deleted or an action message |
-| Audio playback issues | Multiple audio states | The UI Kit uses `AudioStateManager` internally. Ensure you're not conflicting with other audio players |
-
----
-
-## Calling
-
-| Symptom | Cause | Fix |
-|---|---|---|
-| Call buttons not appearing | Calls not enabled | Ensure `enableCalls = true` is set in your `UIKitSettingsBuilder` |
-| Incoming call screen not showing | Call listener not registered | Ensure `CometChat.addCallListener()` is called in your app initialization |
-| Call connects but no audio/video | Missing permissions | Request camera and microphone permissions before initiating calls |
-
----
-
-## Extensions
-
-| Symptom | Cause | Fix |
-|---|---|---|
-| Extension feature not appearing | Extension not activated in Dashboard | Enable the specific extension from your [Dashboard](/fundamentals/extensions-overview) |
-| Stickers not showing | Sticker extension not enabled | Activate [Sticker Extension](/fundamentals/stickers) in Dashboard |
-| Polls option missing | Polls extension not enabled | Activate [Polls Extension](/fundamentals/polls) in Dashboard |
-| Link preview not rendering | Link Preview extension not enabled | Activate [Link Preview Extension](/fundamentals/link-preview) in Dashboard |
-
----
-
-## BLoC and State Management
-
-| Symptom | Cause | Fix |
-|---|---|---|
-| BLoC already closed error | External BLoC disposed prematurely | If you provide a custom BLoC via `messageListBloc`, ensure it outlives the widget |
-| State not updating after BLoC event | Event dispatched to wrong BLoC instance | Ensure you're dispatching events to the same BLoC instance the widget is using |
-| Duplicate messages appearing | Multiple BLoC instances for same conversation | Use a single BLoC instance per conversation. Don't create a new one on every rebuild |
-
----
-
-## Localization
-
-| Symptom | Cause | Fix |
-|---|---|---|
-| UI text not translated | Locale not set | Ensure your `MaterialApp` has the correct `locale` and `supportedLocales` configured |
-| String overrides not appearing | Wrong key | Verify the key matches exactly. See [Localize](/ui-kit/flutter/v6/localize) |
-
----
-
-## Sound
-
-| Symptom | Cause | Fix |
-|---|---|---|
-| No sound plays | Sound disabled | Check `disableSoundForMessages` is not set to `true` |
-| Custom sound not playing | Asset not found | Ensure the sound file is added to your `pubspec.yaml` assets and the path is correct |
-
----
-
-## Text Formatters
-
-| Symptom | Cause | Fix |
-|---|---|---|
-| Mentions render as plain text | Formatter not added | Pass `CometChatMentionsFormatter()` in the `textFormatters` list |
-| `textFormatters` has no effect | Empty list passed | Add at least one formatter to the list |
-| Markdown not rendering | `MarkdownTextFormatter` not included | Add `MarkdownTextFormatter()` to your `textFormatters` list or use `RichTextConfiguration` on the composer |
-
----
-
-## Events
-
-| Symptom | Cause | Fix |
-|---|---|---|
-| Event listener not firing | Subscribed to wrong event class | Check the [Events](/ui-kit/flutter/v6/events) page for exact event class names |
-| Duplicate event triggers | Multiple registrations without cleanup | Remove listeners when the widget is disposed |
-| Listener ID collision | Non-unique listener tag | Use a unique string for each listener registration |
diff --git a/ui-kit/flutter/v6/users.mdx b/ui-kit/flutter/v6/users.mdx
deleted file mode 100644
index fec746ab4..000000000
--- a/ui-kit/flutter/v6/users.mdx
+++ /dev/null
@@ -1,503 +0,0 @@
----
-title: "Users"
-description: "Scrollable list of all available users with search, avatars, names, and online/offline status indicators."
----
-
-`CometChatUsers` renders a scrollable list of all available users with real-time presence updates, search, avatars, and online/offline status indicators.
-
----
-
-## Where It Fits
-
-`CometChatUsers` is a list component. It renders all available users and emits the selected `User` via `onItemTap`. Wire it to `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer` to build a direct messaging layout.
-
-
-
-```dart
-CometChatUsers(
- onItemTap: (context, user) {
- // Navigate to chat with this user
- },
-)
-```
-
-
-
----
-
-## Quick Start
-
-Using Navigator:
-
-
-
-```dart
-Navigator.push(context, MaterialPageRoute(builder: (context) => const CometChatUsers()));
-```
-
-
-
-Embedding as a widget:
-
-
-
-```dart
-@override
-Widget build(BuildContext context) {
- return Scaffold(
- body: SafeArea(
- child: CometChatUsers(),
- ),
- );
-}
-```
-
-
-
-Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()`, a user logged in, and the UI Kit dependency added.
-
----
-
-## Filtering Users
-
-Pass a `UsersRequestBuilder` to control what loads:
-
-
-
-```dart
-CometChatUsers(
- usersRequestBuilder: UsersRequestBuilder()
- ..limit = 20
- ..friendsOnly = true,
-)
-```
-
-
-
-### Filter Recipes
-
-| Recipe | Builder property |
-| --- | --- |
-| Friends only | `..friendsOnly = true` |
-| Limit per page | `..limit = 10` |
-| Search by keyword | `..searchKeyword = "john"` |
-| Hide blocked users | `..hideBlockedUsers = true` |
-| Filter by roles | `..roles = ["admin", "moderator"]` |
-| Filter by tags | `..tags = ["vip"]` |
-| Online users only | `..userStatus = CometChatConstants.userStatusOnline` |
-| Filter by UIDs | `..UIDs = ["uid1", "uid2"]` |
-
----
-
-## Actions and Events
-
-### Callback Methods
-
-#### `onItemTap`
-
-Fires when a user row is tapped. Primary navigation hook.
-
-
-
-```dart
-CometChatUsers(
- onItemTap: (context, user) {
- // Navigate to chat screen
- },
-)
-```
-
-
-
-#### `onItemLongPress`
-
-Fires when a user row is long-pressed.
-
-
-
-```dart
-CometChatUsers(
- onItemLongPress: (context, user) {
- // Show context menu
- },
-)
-```
-
-
-
-#### `onBack`
-
-Fires when the user presses the back button in the app bar.
-
-
-
-```dart
-CometChatUsers(
- onBack: () {
- Navigator.pop(context);
- },
-)
-```
-
-
-
-#### `onSelection`
-
-Fires when users are selected/deselected in multi-select mode.
-
-
-
-```dart
-CometChatUsers(
- selectionMode: SelectionMode.multiple,
- activateSelection: ActivateSelection.onClick,
- onSelection: (selectedUsers, context) {
- // Handle selected users
- },
-)
-```
-
-
-
-#### `onError`
-
-Fires on internal errors.
-
-
-
-```dart
-CometChatUsers(
- onError: (e) {
- debugPrint("Error: ${e.message}");
- },
-)
-```
-
-
-
-#### `onLoad`
-
-Fires when the list is successfully fetched and loaded.
-
-
-
-```dart
-CometChatUsers(
- onLoad: (userList) {
- debugPrint("Loaded ${userList.length}");
- },
-)
-```
-
-
-
-#### `onEmpty`
-
-Fires when the list is empty after loading.
-
-
-
-```dart
-CometChatUsers(
- onEmpty: () {
- debugPrint("No users found");
- },
-)
-```
-
-
-
-### SDK Events (Real-Time, Automatic)
-
-The component listens to these SDK events internally. No manual setup needed.
-
-| SDK Listener | Internal behavior |
-| --- | --- |
-| `onUserOnline` | Updates online status indicator for the user |
-| `onUserOffline` | Updates offline status indicator for the user |
-| Connection reconnected | Triggers silent refresh to sync user list |
-
----
-
-## Functionality
-
-| Property | Type | Default | Description |
-| --- | --- | --- | --- |
-| `title` | `String?` | `null` | Custom app bar title |
-| `showBackButton` | `bool` | `true` | Toggle back button |
-| `hideAppbar` | `bool?` | `false` | Toggle app bar visibility |
-| `hideSearch` | `bool` | `false` | Toggle search bar |
-| `usersStatusVisibility` | `bool?` | `true` | Show online/offline status indicator |
-| `stickyHeaderVisibility` | `bool?` | `false` | Show alphabetical sticky header |
-| `selectionMode` | `SelectionMode?` | `null` | Enable selection mode (`single` or `multiple`) |
-| `searchPlaceholder` | `String?` | `null` | Search placeholder text |
-| `searchKeyword` | `String?` | `null` | Pre-fill search keyword |
-
----
-
-## Custom View Slots
-
-### Leading View
-
-Replace the avatar / left section.
-
-
-
-```dart
-CometChatUsers(
- leadingView: (context, user) {
- return CircleAvatar(
- child: Text(user.name?[0] ?? ""),
- );
- },
-)
-```
-
-
-
-### Title View
-
-Replace the name / title text.
-
-
-
-```dart
-CometChatUsers(
- titleView: (context, user) {
- return Text(
- user.name ?? "",
- style: TextStyle(fontWeight: FontWeight.bold),
- );
- },
-)
-```
-
-
-
-### Subtitle View
-
-Replace the subtitle text below the user's name.
-
-
-
-```dart
-CometChatUsers(
- subtitleView: (context, user) {
- return Text(
- user.status ?? "offline",
- maxLines: 1,
- overflow: TextOverflow.ellipsis,
- );
- },
-)
-```
-
-
-
-### Trailing View
-
-Replace the right section of each user item.
-
-
-
-```dart
-CometChatUsers(
- trailingView: (context, user) {
- return Text(user.role ?? "");
- },
-)
-```
-
-
-
-### List Item View
-
-Replace the entire list item row.
-
-
-
-```dart
-CometChatUsers(
- listItemView: (user) {
- return ListTile(
- leading: CircleAvatar(child: Text(user.name?[0] ?? "")),
- title: Text(user.name ?? ""),
- subtitle: Text(user.status ?? "offline"),
- );
- },
-)
-```
-
-
-
-### State Views
-
-
-
-```dart
-CometChatUsers(
- emptyStateView: (context) => Center(child: Text("No users found")),
- errorStateView: (context) => Center(child: Text("Something went wrong")),
- loadingStateView: (context) => Center(child: CircularProgressIndicator()),
-)
-```
-
-
-
----
-
-## Common Patterns
-
-### Minimal list — hide all chrome
-
-
-
-```dart
-CometChatUsers(
- hideAppbar: true,
- hideSearch: true,
- stickyHeaderVisibility: false,
-)
-```
-
-
-
-### Friends-only list
-
-
-
-```dart
-CometChatUsers(
- usersRequestBuilder: UsersRequestBuilder()
- ..friendsOnly = true,
-)
-```
-
-
-
-### Online users only
-
-
-
-```dart
-CometChatUsers(
- usersRequestBuilder: UsersRequestBuilder()
- ..userStatus = CometChatConstants.userStatusOnline,
-)
-```
-
-
-
----
-
-## Advanced
-
-### BLoC Access
-
-Provide a custom `UsersBloc` to override behavior:
-
-
-
-```dart
-CometChatUsers(
- usersBloc: CustomUsersBloc(),
-)
-```
-
-
-
-### Extending UsersBloc
-
-`UsersBloc` uses the `ListBase` mixin with override hooks:
-
-
-
-```dart
-class CustomUsersBloc extends UsersBloc {
- @override
- void onItemAdded(User item, List updatedList) {
- // Custom sorting logic
- super.onItemAdded(item, updatedList);
- }
-
- @override
- void onListReplaced(List previousList, List newList) {
- // Filter out specific users
- final filtered = newList.where((u) => u.role != "bot").toList();
- super.onListReplaced(previousList, filtered);
- }
-}
-```
-
-
-
-For `ListBase` override hooks (`onItemAdded`, `onItemRemoved`, `onItemUpdated`, `onListCleared`, `onListReplaced`), see [BLoC & Data — ListBase Hooks](/ui-kit/flutter/v6/customization-bloc-data#listbase-hooks).
-
-### Public BLoC Events
-
-| Event | Description |
-| --- | --- |
-| `LoadUsers({searchKeyword, silent})` | Load initial users. `silent: true` keeps existing list visible. |
-| `LoadMoreUsers()` | Load next page (pagination) |
-| `RefreshUsers()` | Refresh the list |
-| `SearchUsers(keyword)` | Search users with debouncing |
-| `ToggleUserSelection(uid)` | Toggle selection state |
-| `ClearUserSelection()` | Clear all selections |
-| `UpdateUser(user)` | Update a specific user |
-
-### Public BLoC Methods
-
-| Method | Returns | Description |
-| --- | --- | --- |
-| `getStatusNotifier(uid)` | `ValueNotifier` | Per-user status notifier for isolated rebuilds |
-| `getUserStatus(uid)` | `String` | Current status for a user (`online` / `offline`) |
-
----
-
-## Style
-
-
-
-```dart
-CometChatUsers(
- usersStyle: CometChatUsersStyle(
- avatarStyle: CometChatAvatarStyle(
- borderRadius: BorderRadius.circular(8),
- backgroundColor: Color(0xFFFBAA75),
- ),
- statusIndicatorStyle: CometChatStatusIndicatorStyle(),
- ),
-)
-```
-
-
-
-### Style Properties
-
-| Property | Description |
-| --- | --- |
-| `backgroundColor` | List background color |
-| `avatarStyle` | Avatar appearance |
-| `statusIndicatorStyle` | Online/offline indicator |
-| `searchBoxStyle` | Search box appearance |
-
-See [Component Styling](/ui-kit/flutter/v6/component-styling) for the full reference.
-
----
-
-## Next Steps
-
-
-
- Browse recent conversations
-
-
- Browse and search available groups
-
-
- Detailed styling reference
-
-
- Customize message bubble structure
-
-
\ No newline at end of file
diff --git a/ui-kit/ios/call-buttons.mdx b/ui-kit/ios/call-buttons.mdx
index 0c906c607..39bd76112 100644
--- a/ui-kit/ios/call-buttons.mdx
+++ b/ui-kit/ios/call-buttons.mdx
@@ -1,6 +1,6 @@
---
title: "Call Buttons"
-description: "Provides voice and video call buttons for initiating calls with users or groups"
+description: "Add CometChat iOS UI Kit call buttons for voice and video calls with user or group targets, click callbacks, and error handling."
---
The `CometChatCallButtons` component provides users with the ability to make calls, access call-related functionalities, and control call settings. Clicking this button typically triggers the call to be placed to the desired recipient.
diff --git a/ui-kit/ios/call-logs.mdx b/ui-kit/ios/call-logs.mdx
index 022371c54..07698cd62 100644
--- a/ui-kit/ios/call-logs.mdx
+++ b/ui-kit/ios/call-logs.mdx
@@ -1,6 +1,6 @@
---
title: "Call Logs"
-description: "Displays a list of call logs with call type, duration, and participant information"
+description: "Display CometChat iOS UI Kit call logs with call type, duration, participants, timestamps, request builders, and selection callbacks."
---
The `CometChatCallLogs` component shows the list of call logs available. By default, names are shown for all listed users, along with their avatar if available.
diff --git a/ui-kit/ios/calling-integration.mdx b/ui-kit/ios/calling-integration.mdx
index c373888ea..6c25e0830 100644
--- a/ui-kit/ios/calling-integration.mdx
+++ b/ui-kit/ios/calling-integration.mdx
@@ -1,6 +1,6 @@
---
title: "Calling Integration"
-description: "Add voice and video calling to your iOS UI Kit application"
+description: "Add voice and video calling to CometChat iOS UI Kit with Calls SDK installation, CocoaPods or Swift Package Manager, and verification."
---
## Overview
diff --git a/ui-kit/ios/color-resources.mdx b/ui-kit/ios/color-resources.mdx
index 9e4bd68de..3ccc395d7 100644
--- a/ui-kit/ios/color-resources.mdx
+++ b/ui-kit/ios/color-resources.mdx
@@ -1,7 +1,7 @@
---
title: "Color Resources"
sidebarTitle: "Color Resources"
-description: "Complete guide to customizing colors in CometChat iOS UI Kit - themes, dark mode, and branding"
+description: "Customize CometChat iOS UI Kit color resources with brand colors, backgrounds, text, alerts, dark mode, and theme timing."
---
diff --git a/ui-kit/ios/compact-message-composer.mdx b/ui-kit/ios/compact-message-composer.mdx
index 40a4d0cbe..30d1b757f 100644
--- a/ui-kit/ios/compact-message-composer.mdx
+++ b/ui-kit/ios/compact-message-composer.mdx
@@ -1,6 +1,6 @@
---
title: "Compact Message Composer"
-description: "Compact Message Composer — CometChat documentation."
+description: "Configure CometChat iOS UI Kit Compact Message Composer with single-line input, rich text, attachments, mentions, stickers, and voice recording."
---
## Overview
diff --git a/ui-kit/ios/component-styling.mdx b/ui-kit/ios/component-styling.mdx
index 8e6fc6d0a..2b372fb1a 100644
--- a/ui-kit/ios/component-styling.mdx
+++ b/ui-kit/ios/component-styling.mdx
@@ -1,7 +1,7 @@
---
title: "Component Styling"
sidebarTitle: "Component Styling"
-description: "Complete guide to styling CometChat iOS UI Kit components - colors, fonts, and custom appearances"
+description: "Style CometChat iOS UI Kit components globally or per instance with style classes, base styles, colors, fonts, and custom appearances."
---
diff --git a/ui-kit/ios/components-overview.mdx b/ui-kit/ios/components-overview.mdx
index e58a7fc7f..06fa3c5b1 100644
--- a/ui-kit/ios/components-overview.mdx
+++ b/ui-kit/ios/components-overview.mdx
@@ -1,7 +1,7 @@
---
title: "Components Overview"
sidebarTitle: "Overview"
-description: "Understanding CometChat iOS UI Kit components - types, actions, events, and customization"
+description: "Understand CometChat iOS UI Kit component types, base components, composite components, actions, events, filters, and customization."
---
diff --git a/ui-kit/ios/conversations.mdx b/ui-kit/ios/conversations.mdx
index dc7e20b8e..7e15e8704 100644
--- a/ui-kit/ios/conversations.mdx
+++ b/ui-kit/ios/conversations.mdx
@@ -1,6 +1,6 @@
---
title: "Conversations"
-description: "Display and manage all chat conversations for the logged-in user"
+description: "Display CometChat iOS UI Kit conversations with last messages, unread counts, typing indicators, presence, filters, and item callbacks."
---
The `CometChatConversations` component displays a list of all conversations (one-on-one and group chats) for the currently logged-in user. It shows the last message, unread count, typing indicators, and user presence in real-time.
diff --git a/ui-kit/ios/core-features.mdx b/ui-kit/ios/core-features.mdx
index 768c974ec..4e3aee7e6 100644
--- a/ui-kit/ios/core-features.mdx
+++ b/ui-kit/ios/core-features.mdx
@@ -1,6 +1,6 @@
---
title: "Core Features"
-description: "Essential chat features built into CometChat UI Kit for iOS"
+description: "Review CometChat iOS UI Kit core features for messaging, media sharing, receipts, typing indicators, presence, reactions, threads, and search."
---
diff --git a/ui-kit/ios/extensions.mdx b/ui-kit/ios/extensions.mdx
index 399619aa3..5ddc144d2 100644
--- a/ui-kit/ios/extensions.mdx
+++ b/ui-kit/ios/extensions.mdx
@@ -1,6 +1,6 @@
---
title: "Extensions"
-description: "Enable powerful chat features with zero code using CometChat extensions"
+description: "Enable CometChat iOS UI Kit extensions for stickers, polls, collaboration tools, reactions, moderation, smart replies, and link previews."
---
| Field | Value |
diff --git a/ui-kit/ios/getting-started.mdx b/ui-kit/ios/getting-started.mdx
index d5a2ce9be..5c2a909f0 100644
--- a/ui-kit/ios/getting-started.mdx
+++ b/ui-kit/ios/getting-started.mdx
@@ -1,7 +1,7 @@
---
title: "iOS Integration"
sidebarTitle: "Integration"
-description: "Add CometChat to an iOS app in 5 steps: create project, install, init, login, render."
+description: "Integrate CometChat iOS UI Kit with project setup, package installation, initialization, login, rendering, permissions, and optional calling."
---
diff --git a/ui-kit/ios/group-members.mdx b/ui-kit/ios/group-members.mdx
index b5582bc68..cc5e702f5 100644
--- a/ui-kit/ios/group-members.mdx
+++ b/ui-kit/ios/group-members.mdx
@@ -1,6 +1,6 @@
---
title: "Group Members"
-description: "Display and manage members of a CometChat group"
+description: "Display and manage CometChat iOS UI Kit group members with roles, search, kick, ban, scope changes, and permission-based actions."
---
The `CometChatGroupMembers` component displays all members of a group with their roles (owner, admin, moderator, participant). It supports member management actions like kick, ban, and role changes based on the logged-in user's permissions.
diff --git a/ui-kit/ios/groups.mdx b/ui-kit/ios/groups.mdx
index 457e22daf..8be5fe225 100644
--- a/ui-kit/ios/groups.mdx
+++ b/ui-kit/ios/groups.mdx
@@ -1,6 +1,6 @@
---
title: "Groups"
-description: "Display and manage a list of groups with search functionality"
+description: "Display CometChat iOS UI Kit groups with avatars, member counts, group type indicators, search, filtering, join, and conversation actions."
---
The `CometChatGroups` component displays a searchable list of all available groups. It shows group names, avatars, member counts, and group type indicators (public/private/password-protected). Users can browse, join, and interact with group conversations.
diff --git a/ui-kit/ios/guide-ai-agent.mdx b/ui-kit/ios/guide-ai-agent.mdx
index 5f27b32ef..0177f39fd 100644
--- a/ui-kit/ios/guide-ai-agent.mdx
+++ b/ui-kit/ios/guide-ai-agent.mdx
@@ -1,11 +1,15 @@
---
title: "AI Agent Integration"
sidebarTitle: "AI Agent Integration"
-description: "Add AI-powered chat assistants to your iOS app"
+description: "Add CometChat iOS UI Kit AI agents with chat history, contextual responses, streaming messages, suggested prompts, and custom styling."
---
Integrate AI agents into your iOS app to provide intelligent conversational experiences with chat history, contextual responses, and seamless handoffs.
+
+**1:1 conversations only.** AI Agents currently respond only in one-on-one conversations between an end user and the agent user. They do not respond to messages sent in groups, even if the agent user is added as a member or owner. Group support is on the roadmap — share your use case on [feedback.cometchat.com](https://feedback.cometchat.com).
+
+
diff --git a/ui-kit/ios/guide-block-unblock-user.mdx b/ui-kit/ios/guide-block-unblock-user.mdx
index 1f684f018..191856c88 100644
--- a/ui-kit/ios/guide-block-unblock-user.mdx
+++ b/ui-kit/ios/guide-block-unblock-user.mdx
@@ -1,7 +1,7 @@
---
title: "Block/Unblock User"
sidebarTitle: "Block/Unblock User"
-description: "Implement user blocking and profile management in your iOS app"
+description: "Build CometChat iOS UI Kit user profile actions for messaging, audio/video calls, block and unblock, and delete conversation flows."
---
Build a user profile screen with avatar display, messaging, audio/video calls, and block/unblock functionality using CometChat UIKit.
diff --git a/ui-kit/ios/guide-call-log-details.mdx b/ui-kit/ios/guide-call-log-details.mdx
index b0ce1dc4f..2a6563431 100644
--- a/ui-kit/ios/guide-call-log-details.mdx
+++ b/ui-kit/ios/guide-call-log-details.mdx
@@ -1,7 +1,7 @@
---
title: "Call Log Details"
sidebarTitle: "Call Log Details"
-description: "Display call history, participants, and recordings in your iOS app"
+description: "Show CometChat iOS UI Kit call log details with call history, participants, recordings, tabbed views, and Calls SDK integration."
---
Learn how to integrate and customize CometChat's call log components to display call history, participant details, and call recordings in your iOS app.
diff --git a/ui-kit/ios/guide-group-chat.mdx b/ui-kit/ios/guide-group-chat.mdx
index a9bfc3287..71f857fcd 100644
--- a/ui-kit/ios/guide-group-chat.mdx
+++ b/ui-kit/ios/guide-group-chat.mdx
@@ -1,7 +1,7 @@
---
title: "Group Details"
sidebarTitle: "Group Details"
-description: "Display and manage group information in your iOS app"
+description: "Display CometChat iOS UI Kit group details with group info, join, leave, delete, member management, and real-time group events."
---
Provide a detailed view for CometChat groups in your iOS app, enabling users to see group info, join/leave, manage members, and respond to real-time group events.
diff --git a/ui-kit/ios/guide-group-ownership.mdx b/ui-kit/ios/guide-group-ownership.mdx
index 12e88eb40..93ece0232 100644
--- a/ui-kit/ios/guide-group-ownership.mdx
+++ b/ui-kit/ios/guide-group-ownership.mdx
@@ -1,7 +1,7 @@
---
title: "Transfer Group Ownership"
sidebarTitle: "Transfer Group Ownership"
-description: "Enable group owners to transfer ownership to another member"
+description: "Transfer CometChat iOS UI Kit group ownership to another member with member selection, ownership API calls, and post-transfer flow."
---
Enable the current group owner to delegate ownership to another member using CometChat's UIKit for iOS.
diff --git a/ui-kit/ios/guide-message-privately.mdx b/ui-kit/ios/guide-message-privately.mdx
index 0a06146e2..c9aec2254 100644
--- a/ui-kit/ios/guide-message-privately.mdx
+++ b/ui-kit/ios/guide-message-privately.mdx
@@ -1,7 +1,7 @@
---
title: "Message Privately"
sidebarTitle: "Message Privately"
-description: "Start private one-on-one chats from group conversations"
+description: "Start private one-to-one chats from CometChat iOS UI Kit group conversations with message options, user lookup, and chat navigation."
---
Enable users to start a private one-on-one chat with a group member directly from a group chat screen using CometChat's UIKit for iOS.
diff --git a/ui-kit/ios/guide-new-chat.mdx b/ui-kit/ios/guide-new-chat.mdx
index 78f4abf90..a70c34446 100644
--- a/ui-kit/ios/guide-new-chat.mdx
+++ b/ui-kit/ios/guide-new-chat.mdx
@@ -1,7 +1,7 @@
---
title: "Create Conversation"
sidebarTitle: "Create Conversation"
-description: "Enable users to start new 1:1 or group chats"
+description: "Create new one-to-one or group conversations in CometChat iOS UI Kit with user and group discovery, search, tabs, and navigation."
---
Enable users to start new 1:1 or group chats in your iOS app using CometChat's UIKit for iOS by integrating the `CreateConversationVC` screen.
diff --git a/ui-kit/ios/guide-overview.mdx b/ui-kit/ios/guide-overview.mdx
index 3b8cc90aa..0a203929d 100644
--- a/ui-kit/ios/guide-overview.mdx
+++ b/ui-kit/ios/guide-overview.mdx
@@ -1,7 +1,7 @@
---
title: "Overview"
sidebarTitle: "Overview"
-description: "Index of feature guides for iOS UI Kit"
+description: "Browse iOS UI Kit feature guides for AI agents, user blocking, call details, group management, private messages, new chats, and threads."
---
This page indexes focused, task-oriented feature guides for the iOS UI Kit. Each guide shows how to implement a specific capability end-to-end using UIKit components.
@@ -37,7 +37,7 @@ Use these guides after completing [Getting Started](/ui-kit/ios/getting-started)
- [Components Overview](/ui-kit/ios/components-overview) - All available UI components
- [Core Features](/ui-kit/ios/core-features) - Messaging, reactions, threads, and more
-Need another guide? Request one via the [Developer Community](http://community.cometchat.com/) or Support.
+Need another guide? Request one via the [Developer Community](https://community.cometchat.com/) or Support.
---
diff --git a/ui-kit/ios/guide-threaded-messages.mdx b/ui-kit/ios/guide-threaded-messages.mdx
index c8412948d..c81acbd75 100644
--- a/ui-kit/ios/guide-threaded-messages.mdx
+++ b/ui-kit/ios/guide-threaded-messages.mdx
@@ -1,7 +1,7 @@
---
title: "Threaded Messages"
sidebarTitle: "Threaded Messages"
-description: "Add threaded reply views to your iOS chat app"
+description: "Add threaded messages in CometChat iOS UI Kit with parent message context, reply views, message composers, and thread navigation."
---
Enhance your iOS chat app with threaded messaging by integrating CometChat's UIKit for iOS, allowing users to reply to specific messages within a focused thread view.
diff --git a/ui-kit/ios/incoming-call.mdx b/ui-kit/ios/incoming-call.mdx
index 62e8b78ae..94e33e6b9 100644
--- a/ui-kit/ios/incoming-call.mdx
+++ b/ui-kit/ios/incoming-call.mdx
@@ -1,6 +1,6 @@
---
title: "Incoming Call"
-description: "Display and handle incoming voice and video calls"
+description: "Handle incoming CometChat iOS UI Kit voice and video calls with caller details, accept, reject, custom sounds, and view slots."
---
The `CometChatIncomingCall` component serves as a visual representation when the user receives an incoming call, such as a voice call or video call, providing options to answer or decline the call.
diff --git a/ui-kit/ios/ios-conversation.mdx b/ui-kit/ios/ios-conversation.mdx
index dcad85109..5fd66d9fa 100644
--- a/ui-kit/ios/ios-conversation.mdx
+++ b/ui-kit/ios/ios-conversation.mdx
@@ -1,7 +1,7 @@
---
title: "Conversation List + Message View"
sidebarTitle: "Conversation List + Message View"
-description: "Build a two-panel conversation list + message view layout in iOS with CometChat UI Kit."
+description: "Build CometChat iOS UI Kit conversation list and message view layouts with push navigation, headers, message lists, and composers."
---
diff --git a/ui-kit/ios/ios-one-to-one-chat.mdx b/ui-kit/ios/ios-one-to-one-chat.mdx
index 2cdb40fc4..89543e386 100644
--- a/ui-kit/ios/ios-one-to-one-chat.mdx
+++ b/ui-kit/ios/ios-one-to-one-chat.mdx
@@ -1,7 +1,7 @@
---
title: "One-to-One / Group Chat"
sidebarTitle: "One-to-One / Group Chat"
-description: "Build a focused one-to-one or group chat experience in iOS with CometChat UI Kit."
+description: "Build focused CometChat iOS UI Kit one-to-one or group chat screens with headers, message lists, composers, and direct chat navigation."
---
diff --git a/ui-kit/ios/ios-tab-based-chat.mdx b/ui-kit/ios/ios-tab-based-chat.mdx
index e49231e10..21985b85b 100644
--- a/ui-kit/ios/ios-tab-based-chat.mdx
+++ b/ui-kit/ios/ios-tab-based-chat.mdx
@@ -1,7 +1,7 @@
---
title: "Tab-Based Chat"
sidebarTitle: "Tab-Based Chat"
-description: "Build a tab-based messaging UI with chats, calls, users, and groups in iOS with CometChat UI Kit."
+description: "Build CometChat iOS UI Kit tab-based chat with Chats, Calls, Users, and Groups tabs, message views, and UITabBarController navigation."
---
diff --git a/ui-kit/ios/mentions-formatter-guide.mdx b/ui-kit/ios/mentions-formatter-guide.mdx
index e7bbe2056..800c82987 100644
--- a/ui-kit/ios/mentions-formatter-guide.mdx
+++ b/ui-kit/ios/mentions-formatter-guide.mdx
@@ -1,7 +1,7 @@
---
title: "Mentions Formatter"
sidebarTitle: "Mentions Formatter"
-description: "Format and customize @mentions within text messages using CometChat UI Kit for iOS"
+description: "Format @mentions in CometChat iOS UI Kit messages with custom styles, mention suggestions, group member mentions, and tap handling."
---
## Overview
diff --git a/ui-kit/ios/message-bubble-styling.mdx b/ui-kit/ios/message-bubble-styling.mdx
index 3d7e0fa88..c128c7d65 100644
--- a/ui-kit/ios/message-bubble-styling.mdx
+++ b/ui-kit/ios/message-bubble-styling.mdx
@@ -1,7 +1,7 @@
---
title: "Message Bubble Styling"
sidebarTitle: "Message Bubble Styling"
-description: "Customize the appearance of incoming and outgoing message bubbles in CometChat UI Kit for iOS"
+description: "Customize CometChat iOS UI Kit message bubbles with incoming and outgoing styles, borders, corner radius, and per-message-type styling."
---
diff --git a/ui-kit/ios/message-composer.mdx b/ui-kit/ios/message-composer.mdx
index 524bd6220..9393cc5db 100644
--- a/ui-kit/ios/message-composer.mdx
+++ b/ui-kit/ios/message-composer.mdx
@@ -1,6 +1,6 @@
---
title: "Message Composer"
-description: "Enable users to write and send text, media, and custom messages"
+description: "Configure CometChat iOS UI Kit Message Composer for text, media, attachments, mentions, voice notes, custom messages, and threads."
---
diff --git a/ui-kit/ios/message-header.mdx b/ui-kit/ios/message-header.mdx
index 76e25cdac..fa64f531b 100644
--- a/ui-kit/ios/message-header.mdx
+++ b/ui-kit/ios/message-header.mdx
@@ -1,6 +1,6 @@
---
title: "Message Header"
-description: "Display user or group details with typing indicators and navigation controls"
+description: "Configure CometChat iOS UI Kit Message Header with user or group details, avatar, status, typing indicators, navigation, and call buttons."
---
The `CometChatMessageHeader` component displays user or group details in the toolbar including avatar, name, status, and typing indicators. It also provides navigation controls and call buttons.
@@ -569,7 +569,7 @@ messageHeader.set(trailView: { user, group in
```