diff --git a/sdk/flutter/ai-agents.mdx b/sdk/flutter/ai-agents.mdx index 5ca04c766..cd29b254c 100644 --- a/sdk/flutter/ai-agents.mdx +++ b/sdk/flutter/ai-agents.mdx @@ -3,6 +3,22 @@ title: "AI Agents" description: "Learn how to integrate AI Agents in your Flutter app to process messages, trigger tools, and respond with context." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_sdk` | +| Import | `import 'package:cometchat_sdk/cometchat_sdk.dart';` | +| Purpose | Learn how to integrate AI Agents in your Flutter app to process messages, trigger tools, and respond with context. | +| Key methods | `addAIAssistantListener()` · `addMessageListener()` · `removeAIAssistantListener()` | +| Key classes | `AIAssistantMessage` · `Call` · `CometChatCardView` · `AIAssistantBaseEvent` · `AIAssistantCardEndedEvent` · `AIAssistantCardReceivedEvent` · `AIAssistantCardStartedEvent` · `AIToolArgumentMessage` | +| Listener callbacks | `onAIAssistantEventReceived()` · `onAIAssistantMessageReceived()` · `onAIToolArgumentsReceived()` · `onAIToolResultReceived()` · `onCardMessageReceived()` | +| Prerequisites | SDK initialised via [`CometChat.init()`](/sdk/flutter/setup) and a logged-in user via [`CometChat.login()`](/sdk/flutter/authentication-overview). | +| Constraints | `onSuccess` and `onError` are **both required** — omitting either is a compile error, and awaiting the call alone gives you nothing to act on. Put the success path inside `onSuccess`. | +| Full reference | [`AIAssistantMessage`](/sdk/reference/messages#aiassistantmessage) · [`Call`](/sdk/reference/messages#call) · [`AIAssistantBaseEvent`](/sdk/reference/messages#aiassistantbaseevent) · [`AIAssistantCardEndedEvent`](/sdk/reference/messages#aiassistantcardendedevent) · [`AIAssistantCardReceivedEvent`](/sdk/reference/messages#aiassistantcardreceivedevent) · [`AIAssistantCardStartedEvent`](/sdk/reference/messages#aiassistantcardstartedevent) | + + + # 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/flutter/ai-moderation.mdx b/sdk/flutter/ai-moderation.mdx index ff3bf5a8f..05f4d7664 100644 --- a/sdk/flutter/ai-moderation.mdx +++ b/sdk/flutter/ai-moderation.mdx @@ -3,6 +3,22 @@ title: "AI Moderation" description: "Automatically review CometChat messages for inappropriate content in Flutter apps using AI moderation rules and message status updates." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_sdk` | +| Import | `import 'package:cometchat_sdk/cometchat_sdk.dart';` | +| Purpose | Automatically review CometChat messages for inappropriate content in Flutter apps using AI moderation rules and message status updates. | +| Key methods | `addMessageListener()` · `removeMessageListener()` · `sendMessage()` | +| Key classes | `TextMessage` · `BaseMessage` · `CometChatException` · `MediaMessage` | +| Listener callbacks | `onMessageModerated()` | +| Prerequisites | SDK initialised via [`CometChat.init()`](/sdk/flutter/setup) and a logged-in user via [`CometChat.login()`](/sdk/flutter/authentication-overview). | +| Constraints | `onSuccess` and `onError` are **both required** — omitting either is a compile error, and awaiting the call alone gives you nothing to act on. Put the success path inside `onSuccess`. | +| Full reference | [`TextMessage`](/sdk/reference/messages#textmessage) · [`BaseMessage`](/sdk/reference/messages#basemessage) · [`CometChatException`](/sdk/reference/auxiliary#cometchatexception) · [`MediaMessage`](/sdk/reference/messages#mediamessage) | + + + ## Overview AI Moderation in the CometChat SDK helps ensure that your chat application remains safe and compliant by automatically reviewing messages for inappropriate content. This feature leverages AI to moderate messages in real-time, reducing manual intervention and improving user experience. diff --git a/sdk/flutter/authentication-overview.mdx b/sdk/flutter/authentication-overview.mdx index ef71739ff..21e700cda 100644 --- a/sdk/flutter/authentication-overview.mdx +++ b/sdk/flutter/authentication-overview.mdx @@ -4,6 +4,22 @@ sidebarTitle: "Overview" description: "Authenticate Flutter app users with CometChat using UID login, auth tokens, session checks, logout, and backend user management." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_sdk` | +| Import | `import 'package:cometchat_sdk/cometchat_sdk.dart';` | +| Purpose | Authenticate Flutter app users with CometChat using UID login, auth tokens, session checks, logout, and backend user management. | +| Key methods | `getLoggedInUser()` · `login()` · `loginWithAuthToken()` · `logout()` | +| Key classes | `CometChatException` · `User` | +| Prerequisites | SDK initialised via [`CometChat.init()`](/sdk/flutter/setup) and a logged-in user via [`CometChat.login()`](/sdk/flutter/authentication-overview). | +| Constraints | `onSuccess` and `onError` are **both required** — omitting either is a compile error, and awaiting the call alone gives you nothing to act on. Put the success path inside `onSuccess`. | +| Related | [Setup](/sdk/flutter/setup) · [Login Listeners](/sdk/flutter/login-listeners) | +| Full reference | [`CometChatException`](/sdk/reference/auxiliary#cometchatexception) · [`User`](/sdk/reference/entities#user) | + + + To allow a user to use CometChat, the user must log in to CometChat. **CometChat does not handle user management.** You must handle user registration and login at your end. Once the user is logged into your app/site, you can log in the user to CometChat **programmatically**. The user does not ever directly login to CometChat. diff --git a/sdk/flutter/block-users.mdx b/sdk/flutter/block-users.mdx index ae2187e6e..bbb8eb19c 100644 --- a/sdk/flutter/block-users.mdx +++ b/sdk/flutter/block-users.mdx @@ -3,6 +3,22 @@ title: "Block Users" description: "Block and unblock CometChat users in Flutter apps to stop direct communication and manage blocked user lists." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_sdk` | +| Import | `import 'package:cometchat_sdk/cometchat_sdk.dart';` | +| Purpose | Block and unblock CometChat users in Flutter apps to stop direct communication and manage blocked user lists. | +| Key methods | `blockUser()` · `unblockUser()` | +| Key classes | `User` · `CometChatException` · `CometChatBlockedUsersDirection` | +| Prerequisites | SDK initialised via [`CometChat.init()`](/sdk/flutter/setup) and a logged-in user via [`CometChat.login()`](/sdk/flutter/authentication-overview). | +| Constraints | `onSuccess` and `onError` are **both required** — omitting either is a compile error, and awaiting the call alone gives you nothing to act on. Put the success path inside `onSuccess`. | +| Related | [Retrieve Users](/sdk/flutter/retrieve-users) · [User Management](/sdk/flutter/user-management) | +| Full reference | [`User`](/sdk/reference/entities#user) · [`CometChatException`](/sdk/reference/auxiliary#cometchatexception) | + + + ## Block Users diff --git a/sdk/flutter/campaigns.mdx b/sdk/flutter/campaigns.mdx index 47501606b..23de1eae7 100644 --- a/sdk/flutter/campaigns.mdx +++ b/sdk/flutter/campaigns.mdx @@ -3,6 +3,22 @@ title: "Campaigns" description: "Fetch notification feed items, listen for real-time delivery, mark items as read/delivered, report engagement, and retrieve unread counts in Flutter." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_sdk` | +| Import | `import 'package:cometchat_sdk/cometchat_sdk.dart';` | +| Purpose | Fetch notification feed items, listen for real-time delivery, mark items as read/delivered, report engagement, and retrieve unread counts in Flutter. | +| Key methods | `addMessageListener()` · `addNotificationFeedListener()` · `getNotificationFeedItem()` · `getNotificationFeedUnreadCount()` · `markFeedItemAsDelivered()` · `markFeedItemAsRead()` · `markPushNotificationClicked()` · `markPushNotificationDelivered()` · `removeNotificationFeedListener()` · `reportFeedEngagement()` | +| Key classes | `CometChatException` · `CometChatCardView` · `CardMessage` · `CometChatCardActionEvent` · `CometChatCardChatWithUserAction` · `CometChatCardOpenUrlAction` · `CometChatCardThemeMode` | +| Listener callbacks | `onCardMessageReceived()` · `onFeedItemReceived()` | +| Prerequisites | SDK initialised via [`CometChat.init()`](/sdk/flutter/setup) and a logged-in user via [`CometChat.login()`](/sdk/flutter/authentication-overview). | +| Constraints | `onSuccess` and `onError` are **both required** — omitting either is a compile error, and awaiting the call alone gives you nothing to act on. Put the success path inside `onSuccess`. | +| Full reference | [`CometChatException`](/sdk/reference/auxiliary#cometchatexception) · [`CardMessage`](/sdk/reference/messages#cardmessage) | + + + CometChat Campaigns lets you deliver targeted, rich notifications to users via an in-app notification feed. Each notification is a **Card Schema JSON** — a structured layout rendered natively by the CometChat Cards library. The SDK provides APIs to fetch feed items, listen for real-time delivery, mark items as read/delivered, report engagement, and retrieve unread counts. diff --git a/sdk/flutter/connection-behaviour.mdx b/sdk/flutter/connection-behaviour.mdx index 6c4fcb354..95921171e 100644 --- a/sdk/flutter/connection-behaviour.mdx +++ b/sdk/flutter/connection-behaviour.mdx @@ -3,6 +3,22 @@ title: "Connection Behaviour" description: "Manage CometChat Flutter SDK WebSocket behavior with automatic connection handling, background disconnects, and manual connection mode." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_sdk` | +| Import | `import 'package:cometchat_sdk/cometchat_sdk.dart';` | +| Purpose | Manage CometChat Flutter SDK WebSocket behavior with automatic connection handling, background disconnects, and manual connection mode. | +| Key methods | `connect()` · `disconnect()` · `init()` · `ping()` | +| Key classes | `CometChatException` · `CometChatSubscriptionType` | +| Prerequisites | SDK initialised via [`CometChat.init()`](/sdk/flutter/setup) and a logged-in user via [`CometChat.login()`](/sdk/flutter/authentication-overview). | +| Constraints | `onSuccess` and `onError` are **both required** — omitting either is a compile error, and awaiting the call alone gives you nothing to act on. Put the success path inside `onSuccess`. | +| Related | [Connection Status](/sdk/flutter/connection-status) | +| Full reference | [`CometChatException`](/sdk/reference/auxiliary#cometchatexception) | + + + ## Default SDK behaviour on login diff --git a/sdk/flutter/connection-status.mdx b/sdk/flutter/connection-status.mdx index 1e594983a..a1e161ad8 100644 --- a/sdk/flutter/connection-status.mdx +++ b/sdk/flutter/connection-status.mdx @@ -3,6 +3,23 @@ title: "Connection Status" description: "Monitor CometChat WebSocket connection status in Flutter apps with callbacks for connecting, connected, disconnected, and errors." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_sdk` | +| Import | `import 'package:cometchat_sdk/cometchat_sdk.dart';` | +| Purpose | Monitor CometChat WebSocket connection status in Flutter apps with callbacks for connecting, connected, disconnected, and errors. | +| Key methods | `addConnectionListener()` · `getConnectionStatus()` | +| Key classes | `CometChatException` | +| Listener callbacks | `onConnected()` · `onConnecting()` · `onConnectionError()` · `onDisconnected()` · `onFeatureThrottled()` | +| Prerequisites | SDK initialised via [`CometChat.init()`](/sdk/flutter/setup) and a logged-in user via [`CometChat.login()`](/sdk/flutter/authentication-overview). | +| Constraints | `onSuccess` and `onError` are **both required** — omitting either is a compile error, and awaiting the call alone gives you nothing to act on. Put the success path inside `onSuccess`. | +| Related | [Connection Behaviour](/sdk/flutter/connection-behaviour) · [All Real Time Listeners](/sdk/flutter/real-time-listeners) | +| Full reference | [`CometChatException`](/sdk/reference/auxiliary#cometchatexception) | + + + CometChat SDK provides you with a mechanism to get real-time status of the connection to CometChat web-socket servers. To achieve this you need to use the `ConnectionListener` class provided by the CometChat SDK @@ -21,12 +38,14 @@ Once the connection is broken, the disconnected callback is triggered, the SDK a In order to use the ConnectionListeners, you need to add the ConnectionListeners using the `addConnectionListener` method provided by the SDK. You can add multiple listeners as shown below. Just make sure you add listeners with unique IDs. +Remove a listener with `removeConnectionListener(listenerId)` when the subscriber goes away — typically in `dispose()` — passing the same ID you registered with. + ```dart class Class_Name with ConnectionListener { //1. Register Connection listener -//CometChat.addConnctionListener("listenerId", this); +//CometChat.addConnectionListener("listenerId", this); //2. Ovveride the ConnectionListener methods @override diff --git a/sdk/flutter/create-group.mdx b/sdk/flutter/create-group.mdx index a7208e6d6..99bebbacc 100644 --- a/sdk/flutter/create-group.mdx +++ b/sdk/flutter/create-group.mdx @@ -3,6 +3,22 @@ title: "Create A Group" description: "Create CometChat public, private, and password-protected groups in Flutter apps with group GUID, name, type, and password." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_sdk` | +| Import | `import 'package:cometchat_sdk/cometchat_sdk.dart';` | +| Purpose | Create CometChat public, private, and password-protected groups in Flutter apps with group GUID, name, type, and password. | +| Key methods | `createGroup()` · `createGroupWithMembers()` | +| Key classes | `Group` · `GroupMember` · `CometChatMemberScope` · `CometChatException` · `CometChatGroupType` | +| Prerequisites | SDK initialised via [`CometChat.init()`](/sdk/flutter/setup) and a logged-in user via [`CometChat.login()`](/sdk/flutter/authentication-overview). | +| Constraints | `onSuccess` and `onError` are **both required** — omitting either is a compile error, and awaiting the call alone gives you nothing to act on. Put the success path inside `onSuccess`. | +| Related | [Join A Group](/sdk/flutter/join-group) · [Update A Group](/sdk/flutter/update-group) · [Delete A Group](/sdk/flutter/delete-group) · [Add Members To A Group](/sdk/flutter/group-add-members) | +| Full reference | [`Group`](/sdk/reference/entities#group) · [`GroupMember`](/sdk/reference/entities#groupmember) · [`CometChatException`](/sdk/reference/auxiliary#cometchatexception) | + + + ## Create a Group diff --git a/sdk/flutter/delete-conversation.mdx b/sdk/flutter/delete-conversation.mdx index a046d4330..3d3d66fd1 100644 --- a/sdk/flutter/delete-conversation.mdx +++ b/sdk/flutter/delete-conversation.mdx @@ -3,6 +3,22 @@ title: "Delete A Conversation" description: "Delete one-on-one or group conversations for the logged-in user in Flutter apps using conversation ID and type." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_sdk` | +| Import | `import 'package:cometchat_sdk/cometchat_sdk.dart';` | +| Purpose | Delete one-on-one or group conversations for the logged-in user in Flutter apps using conversation ID and type. | +| Key methods | `deleteConversation()` | +| Key classes | `Conversation` · `CometChatException` · `CometChatConversationType` | +| Prerequisites | SDK initialised via [`CometChat.init()`](/sdk/flutter/setup) and a logged-in user via [`CometChat.login()`](/sdk/flutter/authentication-overview). | +| Constraints | `onSuccess` and `onError` are **both required** — omitting either is a compile error, and awaiting the call alone gives you nothing to act on. Put the success path inside `onSuccess`. | +| Related | [Retrieve Conversations](/sdk/flutter/retrieve-conversations) | +| Full reference | [`Conversation`](/sdk/reference/entities#conversation) · [`CometChatException`](/sdk/reference/auxiliary#cometchatexception) | + + + In case you want to delete a conversation, you can use the `deleteConversation()` method. diff --git a/sdk/flutter/delete-group.mdx b/sdk/flutter/delete-group.mdx index 6d64e0a20..aa7ef80bc 100644 --- a/sdk/flutter/delete-group.mdx +++ b/sdk/flutter/delete-group.mdx @@ -3,6 +3,22 @@ title: "Delete A Group" description: "Delete CometChat groups from Flutter apps by GUID when the logged-in user has admin permissions." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_sdk` | +| Import | `import 'package:cometchat_sdk/cometchat_sdk.dart';` | +| Purpose | Delete CometChat groups from Flutter apps by GUID when the logged-in user has admin permissions. | +| Key methods | `deleteGroup()` | +| Key classes | `Group` · `CometChatException` | +| Prerequisites | SDK initialised via [`CometChat.init()`](/sdk/flutter/setup) and a logged-in user via [`CometChat.login()`](/sdk/flutter/authentication-overview). | +| Constraints | `onSuccess` and `onError` are **both required** — omitting either is a compile error, and awaiting the call alone gives you nothing to act on. Put the success path inside `onSuccess`. | +| Related | [Create A Group](/sdk/flutter/create-group) · [Leave A Group](/sdk/flutter/leave-group) | +| Full reference | [`Group`](/sdk/reference/entities#group) · [`CometChatException`](/sdk/reference/auxiliary#cometchatexception) | + + + ## Delete Group diff --git a/sdk/flutter/delete-message.mdx b/sdk/flutter/delete-message.mdx index 4e7965188..e5fd0f910 100644 --- a/sdk/flutter/delete-message.mdx +++ b/sdk/flutter/delete-message.mdx @@ -3,6 +3,23 @@ title: "Delete A Message" description: "Delete CometChat messages in Flutter apps and handle real-time or missed message deletion events." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_sdk` | +| Import | `import 'package:cometchat_sdk/cometchat_sdk.dart';` | +| Purpose | Delete CometChat messages in Flutter apps and handle real-time or missed message deletion events. | +| Key methods | `addMessageListener()` · `deleteMessage()` | +| Key classes | `BaseMessage` · `CometChatException` | +| Listener callbacks | `onMessageDeleted()` | +| Prerequisites | SDK initialised via [`CometChat.init()`](/sdk/flutter/setup) and a logged-in user via [`CometChat.login()`](/sdk/flutter/authentication-overview). | +| Constraints | `onSuccess` and `onError` are **both required** — omitting either is a compile error, and awaiting the call alone gives you nothing to act on. Put the success path inside `onSuccess`. | +| Related | [Send A Message](/sdk/flutter/send-message) · [Edit A Message](/sdk/flutter/edit-message) | +| Full reference | [`BaseMessage`](/sdk/reference/messages#basemessage) · [`CometChatException`](/sdk/reference/auxiliary#cometchatexception) | + + + While [deleting a message](/sdk/flutter/delete-message#delete-a-message) is straightforward, receiving events for deleted messages with CometChat has two parts: diff --git a/sdk/flutter/delivery-read-receipts.mdx b/sdk/flutter/delivery-read-receipts.mdx index d2fa4aa33..ae883b02e 100644 --- a/sdk/flutter/delivery-read-receipts.mdx +++ b/sdk/flutter/delivery-read-receipts.mdx @@ -3,6 +3,23 @@ title: "Delivery & Read Receipts" description: "Mark CometChat messages as delivered or read in Flutter apps and listen for real-time receipt events." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_sdk` | +| Import | `import 'package:cometchat_sdk/cometchat_sdk.dart';` | +| Purpose | Mark CometChat messages as delivered or read in Flutter apps and listen for real-time receipt events. | +| Key methods | `addMessageListener()` · `getMessageReceipts()` · `markAsDelivered()` · `markAsRead()` · `markConversationAsDelivered()` · `markConversationAsRead()` · `markMessageAsUnread()` | +| Key classes | `MessageReceipt` · `CometChatException` | +| Listener callbacks | `onError()` · `onMessagesDelivered()` · `onMessagesDeliveredToAll()` · `onMessagesRead()` · `onMessagesReadByAll()` · `onSuccess()` | +| Prerequisites | SDK initialised via [`CometChat.init()`](/sdk/flutter/setup) and a logged-in user via [`CometChat.login()`](/sdk/flutter/authentication-overview). | +| Constraints | `onSuccess` and `onError` are **both required** — omitting either is a compile error, and awaiting the call alone gives you nothing to act on. Put the success path inside `onSuccess`. | +| Related | [Receive A Message](/sdk/flutter/receive-messages) · [All Real Time Listeners](/sdk/flutter/real-time-listeners) | +| Full reference | [`MessageReceipt`](/sdk/reference/auxiliary#messagereceipt) · [`CometChatException`](/sdk/reference/auxiliary#cometchatexception) | + + + ## Mark Messages as Delivered @@ -138,7 +155,8 @@ You can mark an entire conversation as delivered using the `markConversationAsDe ```dart CometChat.markConversationAsDelivered( - conversation, + "cometchat-uid-1", // UID for a 1:1 conversation, GUID for a group + CometChatConversationType.user, // or CometChatConversationType.group onSuccess: (success) { debugPrint("markConversationAsDelivered : $success"); }, @@ -162,7 +180,8 @@ You can mark an entire conversation as read using the `markConversationAsRead()` ```dart CometChat.markConversationAsRead( - conversation, + "cometchat-uid-1", // UID for a 1:1 conversation, GUID for a group + CometChatConversationType.user, // or CometChatConversationType.group onSuccess: (success) { debugPrint("markConversationAsRead : $success"); }, diff --git a/sdk/flutter/edit-message.mdx b/sdk/flutter/edit-message.mdx index 216ab688f..c3f80ef9f 100644 --- a/sdk/flutter/edit-message.mdx +++ b/sdk/flutter/edit-message.mdx @@ -3,6 +3,23 @@ title: "Edit A Message" description: "Edit CometChat text and custom messages in Flutter apps and handle real-time or missed edit events." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_sdk` | +| Import | `import 'package:cometchat_sdk/cometchat_sdk.dart';` | +| Purpose | Edit CometChat text and custom messages in Flutter apps and handle real-time or missed edit events. | +| Key methods | `addMessageListener()` · `editMessage()` | +| Key classes | `BaseMessage` · `TextMessage` · `CometChatException` | +| Listener callbacks | `onMessageEdited()` | +| Prerequisites | SDK initialised via [`CometChat.init()`](/sdk/flutter/setup) and a logged-in user via [`CometChat.login()`](/sdk/flutter/authentication-overview). | +| Constraints | `onSuccess` and `onError` are **both required** — omitting either is a compile error, and awaiting the call alone gives you nothing to act on. Put the success path inside `onSuccess`. | +| Related | [Send A Message](/sdk/flutter/send-message) · [Delete A Message](/sdk/flutter/delete-message) | +| Full reference | [`BaseMessage`](/sdk/reference/messages#basemessage) · [`TextMessage`](/sdk/reference/messages#textmessage) · [`CometChatException`](/sdk/reference/auxiliary#cometchatexception) | + + + While editing a message is straightforward, receiving events for edited messages with CometChat has two parts: diff --git a/sdk/flutter/flag-message.mdx b/sdk/flutter/flag-message.mdx index 1fee01677..f2ec79375 100644 --- a/sdk/flutter/flag-message.mdx +++ b/sdk/flutter/flag-message.mdx @@ -3,6 +3,22 @@ title: "Flag Message" description: "Get flag reasons and report inappropriate CometChat messages in Flutter apps for moderation review in the dashboard." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_sdk` | +| Import | `import 'package:cometchat_sdk/cometchat_sdk.dart';` | +| Purpose | Get flag reasons and report inappropriate CometChat messages in Flutter apps for moderation review in the dashboard. | +| Key methods | `flagMessage()` · `getFlagReasons()` | +| Key classes | `CometChatException` · `User` | +| Prerequisites | SDK initialised via [`CometChat.init()`](/sdk/flutter/setup) and a logged-in user via [`CometChat.login()`](/sdk/flutter/authentication-overview). | +| Constraints | `onSuccess` and `onError` are **both required** — omitting either is a compile error, and awaiting the call alone gives you nothing to act on. Put the success path inside `onSuccess`. | +| Related | [Send A Message](/sdk/flutter/send-message) · [AI Moderation](/sdk/flutter/ai-moderation) | +| Full reference | [`CometChatException`](/sdk/reference/auxiliary#cometchatexception) · [`User`](/sdk/reference/entities#user) | + + + ## Overview Flagging messages allows users to report inappropriate content to moderators or administrators. When a message is flagged, it appears in the [CometChat Dashboard](https://app.cometchat.com) under **Moderation > Flagged Messages** for review. diff --git a/sdk/flutter/group-add-members.mdx b/sdk/flutter/group-add-members.mdx index 0d09fea10..8d68a8640 100644 --- a/sdk/flutter/group-add-members.mdx +++ b/sdk/flutter/group-add-members.mdx @@ -3,6 +3,23 @@ title: "Add Members To A Group" description: "Add CometChat users to Flutter group chats with member scopes and optional banned member handling." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_sdk` | +| Import | `import 'package:cometchat_sdk/cometchat_sdk.dart';` | +| Purpose | Add CometChat users to Flutter group chats with member scopes and optional banned member handling. | +| Key methods | `addGroupListener()` · `addMembersToGroup()` | +| Key classes | `GroupMember` · `Group` · `User` · `CometChatMemberScope` · `Action` · `CometChatException` | +| Listener callbacks | `onMemberAddedToGroup()` | +| Prerequisites | SDK initialised via [`CometChat.init()`](/sdk/flutter/setup) and a logged-in user via [`CometChat.login()`](/sdk/flutter/authentication-overview). | +| Constraints | `onSuccess` and `onError` are **both required** — omitting either is a compile error, and awaiting the call alone gives you nothing to act on. Put the success path inside `onSuccess`. | +| Related | [Retrieve Group Members](/sdk/flutter/retrieve-group-members) · [Change Member Scope](/sdk/flutter/group-change-member-scope) · [Ban/Kick Member From A Group](/sdk/flutter/group-kick-member) | +| Full reference | [`GroupMember`](/sdk/reference/entities#groupmember) · [`Group`](/sdk/reference/entities#group) · [`User`](/sdk/reference/entities#user) · [`Action`](/sdk/reference/messages#action) · [`CometChatException`](/sdk/reference/auxiliary#cometchatexception) | + + + ## Add Members to Group diff --git a/sdk/flutter/group-change-member-scope.mdx b/sdk/flutter/group-change-member-scope.mdx index dedbba887..5d0d9e4f1 100644 --- a/sdk/flutter/group-change-member-scope.mdx +++ b/sdk/flutter/group-change-member-scope.mdx @@ -3,6 +3,23 @@ title: "Change Member Scope" description: "Update CometChat group member scopes in Flutter apps to change participants between admin, moderator, and participant roles." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_sdk` | +| Import | `import 'package:cometchat_sdk/cometchat_sdk.dart';` | +| Purpose | Update CometChat group member scopes in Flutter apps to change participants between admin, moderator, and participant roles. | +| Key methods | `addGroupListener()` · `updateGroupMemberScope()` | +| Key classes | `Group` · `User` · `Action` · `CometChatException` · `CometChatMemberScope` | +| Listener callbacks | `onGroupMemberScopeChanged()` | +| Prerequisites | SDK initialised via [`CometChat.init()`](/sdk/flutter/setup) and a logged-in user via [`CometChat.login()`](/sdk/flutter/authentication-overview). | +| Constraints | `onSuccess` and `onError` are **both required** — omitting either is a compile error, and awaiting the call alone gives you nothing to act on. Put the success path inside `onSuccess`. | +| Related | [Retrieve Group Members](/sdk/flutter/retrieve-group-members) · [Transfer Group Ownership](/sdk/flutter/transfer-group-ownership) | +| Full reference | [`Group`](/sdk/reference/entities#group) · [`User`](/sdk/reference/entities#user) · [`Action`](/sdk/reference/messages#action) · [`CometChatException`](/sdk/reference/auxiliary#cometchatexception) | + + + ## Change Scope of a Group Member diff --git a/sdk/flutter/group-kick-member.mdx b/sdk/flutter/group-kick-member.mdx index 49ce8a038..8d186ad93 100644 --- a/sdk/flutter/group-kick-member.mdx +++ b/sdk/flutter/group-kick-member.mdx @@ -3,6 +3,23 @@ title: "Ban/Kick Member From A Group" description: "Kick, ban, and unban CometChat group members in Flutter apps when the logged-in user is an admin or moderator." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_sdk` | +| Import | `import 'package:cometchat_sdk/cometchat_sdk.dart';` | +| Purpose | Kick, ban, and unban CometChat group members in Flutter apps when the logged-in user is an admin or moderator. | +| Key methods | `addGroupListener()` · `banGroupMember()` · `kickGroupMember()` · `unbanGroupMember()` | +| Key classes | `Group` · `User` · `CometChatException` · `Action` · `GroupMember` | +| Listener callbacks | `onGroupMemberBanned()` · `onGroupMemberKicked()` · `onGroupMemberUnbanned()` | +| Prerequisites | SDK initialised via [`CometChat.init()`](/sdk/flutter/setup) and a logged-in user via [`CometChat.login()`](/sdk/flutter/authentication-overview). | +| Constraints | `onSuccess` and `onError` are **both required** — omitting either is a compile error, and awaiting the call alone gives you nothing to act on. Put the success path inside `onSuccess`. | +| Related | [Retrieve Group Members](/sdk/flutter/retrieve-group-members) · [Leave A Group](/sdk/flutter/leave-group) | +| Full reference | [`Group`](/sdk/reference/entities#group) · [`User`](/sdk/reference/entities#user) · [`CometChatException`](/sdk/reference/auxiliary#cometchatexception) · [`Action`](/sdk/reference/messages#action) · [`GroupMember`](/sdk/reference/entities#groupmember) | + + + There are certain actions that can be performed on the group members: diff --git a/sdk/flutter/join-group.mdx b/sdk/flutter/join-group.mdx index 0a7827d6c..0d76ea546 100644 --- a/sdk/flutter/join-group.mdx +++ b/sdk/flutter/join-group.mdx @@ -3,6 +3,23 @@ title: "Join A Group" description: "Join CometChat public and password-protected groups in Flutter apps using group GUIDs and password validation." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_sdk` | +| Import | `import 'package:cometchat_sdk/cometchat_sdk.dart';` | +| Purpose | Join CometChat public and password-protected groups in Flutter apps using group GUIDs and password validation. | +| Key methods | `addGroupListener()` · `joinGroup()` | +| Key classes | `Group` · `Action` · `CometChatException` · `User` · `CometChatGroupType` | +| Listener callbacks | `onGroupMemberJoined()` | +| Prerequisites | SDK initialised via [`CometChat.init()`](/sdk/flutter/setup) and a logged-in user via [`CometChat.login()`](/sdk/flutter/authentication-overview). | +| Constraints | `onSuccess` and `onError` are **both required** — omitting either is a compile error, and awaiting the call alone gives you nothing to act on. Put the success path inside `onSuccess`. | +| Related | [Create A Group](/sdk/flutter/create-group) · [Leave A Group](/sdk/flutter/leave-group) | +| Full reference | [`Group`](/sdk/reference/entities#group) · [`Action`](/sdk/reference/messages#action) · [`CometChatException`](/sdk/reference/auxiliary#cometchatexception) · [`User`](/sdk/reference/entities#user) | + + + ## Join a Group diff --git a/sdk/flutter/leave-group.mdx b/sdk/flutter/leave-group.mdx index 74e7b28ed..259ed10bf 100644 --- a/sdk/flutter/leave-group.mdx +++ b/sdk/flutter/leave-group.mdx @@ -3,6 +3,23 @@ title: "Leave A Group" description: "Leave CometChat groups from Flutter apps by GUID and listen for real-time group member left events." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_sdk` | +| Import | `import 'package:cometchat_sdk/cometchat_sdk.dart';` | +| Purpose | Leave CometChat groups from Flutter apps by GUID and listen for real-time group member left events. | +| Key methods | `addGroupListener()` · `leaveGroup()` | +| Key classes | `Group` · `Action` · `CometChatException` · `User` | +| Listener callbacks | `onGroupMemberLeft()` | +| Prerequisites | SDK initialised via [`CometChat.init()`](/sdk/flutter/setup) and a logged-in user via [`CometChat.login()`](/sdk/flutter/authentication-overview). | +| Constraints | `onSuccess` and `onError` are **both required** — omitting either is a compile error, and awaiting the call alone gives you nothing to act on. Put the success path inside `onSuccess`. | +| Related | [Join A Group](/sdk/flutter/join-group) · [Ban/Kick Member From A Group](/sdk/flutter/group-kick-member) | +| Full reference | [`Group`](/sdk/reference/entities#group) · [`Action`](/sdk/reference/messages#action) · [`CometChatException`](/sdk/reference/auxiliary#cometchatexception) · [`User`](/sdk/reference/entities#user) | + + + ## Leave a Group diff --git a/sdk/flutter/llms-flutter-v5.mdx b/sdk/flutter/llms-flutter-v5.mdx new file mode 100644 index 000000000..391e32819 --- /dev/null +++ b/sdk/flutter/llms-flutter-v5.mdx @@ -0,0 +1,128 @@ +--- +title: "Flutter Chat SDK v5 — LLM docs index" +description: "Machine-readable, Flutter-SDK-v5-scoped index of every SDK page as a clean .md twin. Built for AI coding agents; kept out of the human sidebar." +--- + +{/* + SCOPED LLM INDEX for the Flutter Chat SDK v5. + - UNLISTED, NOT hidden: intentionally omitted from docs.json navigation so it never shows in + the human sidebar — but it IS built, served as a clean .md twin, and INDEXED for search + + AI assistants (so AI tools, and this pack's skill via its docs-map, can discover and read it). + - We deliberately do NOT use `hidden: true`/`noindex` here: in Mintlify `hidden` auto-applies + noindex, which would drop this page from search AND the auto global llms.txt / AI context. + We want it discoverable, so it stays indexable. + - Fetch this file's own .md twin as a lightweight, Flutter-SDK-only routing index instead of + the site-wide /docs/llms.txt (which spans every product and is far larger). +*/} + +# Flutter Chat SDK v5 — LLM docs index (Latest) + +> Low-level (headless) Flutter chat + calling client — no UI. Package `cometchat_sdk@5` +> (calling adds `cometchat_calls_sdk@5`). This page is a **Flutter-SDK-v5-only** routing index +> for AI agents — a scoped alternative to the site-wide `/docs/llms.txt`. + +## How to use this index +Each link points to the docs page; **append `.md`** to its URL to fetch the clean Markdown twin +(verbatim code + method signatures, parameters, and listener contracts). Pick the page for the +intent, then read the API there. +- Convention: any docs page URL + `.md` → raw Markdown. +- Fallback: if a `.md` twin 404s, fetch the same URL **without** `.md` (HTML). Never read the + installed Dart source in place of a doc, and never answer APIs from memory. + +## Platform rules — headless, and Dart +This is the **SDK**, not the UI Kit: it ships no widgets. You own every view. Also: +- **Callbacks, not futures, carry the result.** The message and group APIs take `onSuccess` and + `onError` callbacks and both are **required** — awaiting the call alone gives you nothing to + act on. Write the success path inside `onSuccess`. +- **Listeners must be removed.** Every `add*Listener(id, …)` needs the matching + `remove*Listener(id)`, normally in `dispose()`. Leaked listeners are the top source of + duplicate-message bugs. +- **You do not receive your own sends.** The realtime listeners deliver other people's messages. + A message you send is returned to you through `onSuccess` and nowhere else, so any local list + must append it yourself. +- **The UI Kit re-exports this SDK.** If the app already depends on `cometchat_chat_uikit`, the + SDK types resolve from the kit barrel — do not add a second, differently-versioned direct + dependency. +- Building UI from scratch is a lot of work. If the goal is "add chat", prefer the + [Flutter UI Kit](/ui-kit/flutter/overview) and drop to this SDK only for custom UI or + headless/background logic. + +## Hot path — usually no fetch needed +For a plain integration the install, `init → login`, and the core send / receive-listener flow +are stable; a well-built agent skill bakes them. Fetch below only for exhaustive parameters, +long-tail methods, group/user management, calling, or edge-case listeners. +- Setup: [Setup](/sdk/flutter/setup) +- Auth/lifecycle: [Authentication](/sdk/flutter/authentication-overview) +- Core send/receive: [Send A Message](/sdk/flutter/send-message) · [Receive A Message](/sdk/flutter/receive-messages) · [All Real Time Listeners](/sdk/flutter/real-time-listeners) + +## Getting started / integration +- [Overview](/sdk/flutter/overview) +- [Setup](/sdk/flutter/setup) +- [Authentication](/sdk/flutter/authentication-overview) +- [Login Listeners](/sdk/flutter/login-listeners) +- [Flutter Chat UI Kit](/sdk/flutter/flutter-overview) + +## Messaging — send & receive +- [Messaging Overview](/sdk/flutter/messaging-overview) +- [Send A Message](/sdk/flutter/send-message) +- [Receive A Message](/sdk/flutter/receive-messages) +- [Edit A Message](/sdk/flutter/edit-message) +- [Delete A Message](/sdk/flutter/delete-message) +- [Upload Files & Send Attachments](/sdk/flutter/upload-files) +- [Threaded Messages](/sdk/flutter/threaded-messages) +- [Transient Messages](/sdk/flutter/transient-messages) +- [Additional Message Filtering](/sdk/flutter/additional-message-filtering) + +## Messaging — signals & state +- [All Real Time Listeners](/sdk/flutter/real-time-listeners) +- [Typing Indicators](/sdk/flutter/typing-indicators) +- [Delivery & Read Receipts](/sdk/flutter/delivery-read-receipts) +- [Reactions](/sdk/flutter/reactions) +- [Mentions](/sdk/flutter/mentions) +- [Flag Message](/sdk/flutter/flag-message) + +## Conversations +- [Retrieve Conversations](/sdk/flutter/retrieve-conversations) +- [Delete A Conversation](/sdk/flutter/delete-conversation) + +## Users +- [Users Overview](/sdk/flutter/users-overview) +- [User Management](/sdk/flutter/user-management) +- [Retrieve Users](/sdk/flutter/retrieve-users) +- [User Presence](/sdk/flutter/user-presence) +- [Block Users](/sdk/flutter/block-users) + +## Groups +- [Groups Overview](/sdk/flutter/groups-overview) +- [Create A Group](/sdk/flutter/create-group) +- [Retrieve Groups](/sdk/flutter/retrieve-groups) +- [Join A Group](/sdk/flutter/join-group) +- [Leave A Group](/sdk/flutter/leave-group) +- [Update A Group](/sdk/flutter/update-group) +- [Delete A Group](/sdk/flutter/delete-group) +- [Add Members To A Group](/sdk/flutter/group-add-members) +- [Retrieve Group Members](/sdk/flutter/retrieve-group-members) +- [Change Member Scope](/sdk/flutter/group-change-member-scope) +- [Ban / Kick Member](/sdk/flutter/group-kick-member) +- [Transfer Group Ownership](/sdk/flutter/transfer-group-ownership) + +## Connection & lifecycle +- [Connection Status](/sdk/flutter/connection-status) +- [Connection Behaviour](/sdk/flutter/connection-behaviour) + +## AI & moderation +- [AI Overview](/sdk/flutter/ai-user-copilot-overview) +- [AI Agents](/sdk/flutter/ai-agents) +- [Bots](/sdk/flutter/ai-chatbots-overview) +- [AI Moderation](/sdk/flutter/ai-moderation) + +## Extend & operate +- [Extensions](/sdk/flutter/extensions-overview) +- [Webhooks](/sdk/flutter/webhooks-overview) +- [Campaigns](/sdk/flutter/campaigns) +- [Advanced](/sdk/flutter/advanced-overview) +- [Resources](/sdk/flutter/resources-overview) + +## Migration & misc +- [Upgrading from v4](/sdk/flutter/upgrading-from-v4-guide) +- [Changelog](/sdk/flutter/changelog) diff --git a/sdk/flutter/login-listeners.mdx b/sdk/flutter/login-listeners.mdx index 0f460ab98..7cdd331bc 100644 --- a/sdk/flutter/login-listeners.mdx +++ b/sdk/flutter/login-listeners.mdx @@ -3,6 +3,22 @@ title: "Login Listeners" description: "Listen for CometChat login and logout success or failure events in Flutter apps using LoginListener callbacks." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_sdk` | +| Import | `import 'package:cometchat_sdk/cometchat_sdk.dart';` | +| Purpose | Listen for CometChat login and logout success or failure events in Flutter apps using LoginListener callbacks. | +| Key methods | `addloginListener()` · `removeLoginListener()` | +| Key classes | `CometChatException` · `User` | +| Prerequisites | SDK initialised via [`CometChat.init()`](/sdk/flutter/setup) and a logged-in user via [`CometChat.login()`](/sdk/flutter/authentication-overview). | +| Constraints | `onSuccess` and `onError` are **both required** — omitting either is a compile error, and awaiting the call alone gives you nothing to act on. Put the success path inside `onSuccess`. | +| Related | [Authentication](/sdk/flutter/authentication-overview) | +| Full reference | [`CometChatException`](/sdk/reference/auxiliary#cometchatexception) · [`User`](/sdk/reference/entities#user) | + + + The CometChat SDK provides you with real-time updates for the `login` and `logout` events. This can be achieved using the `LoginListener` class provided. LoginListener consists of 4 events that can be triggered. These are as follows: @@ -14,7 +30,11 @@ The CometChat SDK provides you with real-time updates for the `login` and `logou | logoutSuccess() | Informs you about the user being logged out successfully. | | logoutFailure(CometChatException e) | Informs you about the failure while logging out the user. The reason for the failure can be obtained from the object of the `CometChatException` class provided. | -To add the `LoginListener`, you need to use the `addLoginListener()` method provided by the SDK which takes a unique identifier for the listener and object of the `LoginListener` class itself. +To add the `LoginListener`, you need to use the `addloginListener()` method provided by the SDK which takes a unique identifier for the listener and object of the `LoginListener` class itself. + + +`addloginListener` is spelled with a **lowercase `l`** in `login`, while its counterpart `removeLoginListener` uses a capital `L`. The names are genuinely inconsistent — copying the capitalised form for both does not compile. + We suggest adding the listener in the `init` method of the Stateful class or at the initialization of class where you wish to receive these events in. @@ -24,7 +44,7 @@ We suggest adding the listener in the `init` method of the Stateful class or at class Class_Name with LoginListener { // String loginListenerId = "UNIQUE_LISTENER_ID"; -// CometChat.addLoginListener(loginListenerId, Class_Name()); // add this in init +// CometChat.addloginListener(loginListenerId, Class_Name()); // add this in init @override void loginSuccess(User user) { debugPrint("LoginListener loginSuccess $user"); diff --git a/sdk/flutter/mentions.mdx b/sdk/flutter/mentions.mdx index 40284f47a..b4948ffa1 100644 --- a/sdk/flutter/mentions.mdx +++ b/sdk/flutter/mentions.mdx @@ -3,6 +3,22 @@ title: "Mentions" description: "Send, receive, and inspect CometChat mentioned messages in Flutter apps using user UIDs in one-on-one and group conversations." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_sdk` | +| Import | `import 'package:cometchat_sdk/cometchat_sdk.dart';` | +| Purpose | Send, receive, and inspect CometChat mentioned messages in Flutter apps using user UIDs in one-on-one and group conversations. | +| Key methods | `sendMessage()` | +| Key classes | `BaseMessage` · `User` · `CometChatException` · `TextMessage` · `CometChatMessageCategory` · `CometChatMessageType` · `CometChatReceiverType` | +| Prerequisites | SDK initialised via [`CometChat.init()`](/sdk/flutter/setup) and a logged-in user via [`CometChat.login()`](/sdk/flutter/authentication-overview). | +| Constraints | `onSuccess` and `onError` are **both required** — omitting either is a compile error, and awaiting the call alone gives you nothing to act on. Put the success path inside `onSuccess`. | +| Related | [Send A Message](/sdk/flutter/send-message) · [Users](/sdk/flutter/users-overview) | +| Full reference | [`BaseMessage`](/sdk/reference/messages#basemessage) · [`User`](/sdk/reference/entities#user) · [`CometChatException`](/sdk/reference/auxiliary#cometchatexception) · [`TextMessage`](/sdk/reference/messages#textmessage) | + + + Mentions are a powerful tool for enhancing communication in messaging platforms. They streamline interaction by allowing users to easily engage and collaborate with particular individuals, especially in group conversations. diff --git a/sdk/flutter/reactions.mdx b/sdk/flutter/reactions.mdx index c57cc4626..3834f6c46 100644 --- a/sdk/flutter/reactions.mdx +++ b/sdk/flutter/reactions.mdx @@ -3,6 +3,23 @@ title: "Reactions" description: "Add, remove, fetch, and listen for CometChat message reactions in Flutter apps for text, media, and custom messages." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_sdk` | +| Import | `import 'package:cometchat_sdk/cometchat_sdk.dart';` | +| Purpose | Add, remove, fetch, and listen for CometChat message reactions in Flutter apps for text, media, and custom messages. | +| Key methods | `addMessageListener()` · `addReaction()` · `removeMessageListener()` · `removeReaction()` | +| Key classes | `BaseMessage` · `Reaction` · `ReactionEvent` · `ReactionCount` · `CometChatHelper` | +| Listener callbacks | `onMessageReactionAdded()` · `onMessageReactionRemoved()` | +| Prerequisites | SDK initialised via [`CometChat.init()`](/sdk/flutter/setup) and a logged-in user via [`CometChat.login()`](/sdk/flutter/authentication-overview). | +| Constraints | `onSuccess` and `onError` are **both required** — omitting either is a compile error, and awaiting the call alone gives you nothing to act on. Put the success path inside `onSuccess`. | +| Related | [Send A Message](/sdk/flutter/send-message) · [Receive A Message](/sdk/flutter/receive-messages) | +| Full reference | [`BaseMessage`](/sdk/reference/messages#basemessage) · [`Reaction`](/sdk/reference/auxiliary#reaction) · [`ReactionEvent`](/sdk/reference/auxiliary#reactionevent) · [`ReactionCount`](/sdk/reference/auxiliary#reactioncount) | + + + 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 Flutter SDK. @@ -16,7 +33,7 @@ Users can add a reaction to a message by calling `addReaction` with the message int messageId = 1; CometChat.addReaction(messageId, "😴", onSuccess: (message) { - debugPrint("Success : ${message.getReactions().last}"); + debugPrint("Success : ${message.reactions.last.reaction}"); }, onError: (e) { debugPrint("Error: ${e.message}"); }); @@ -39,7 +56,7 @@ Removing a reaction from a message can be done using the `removeReaction` method int messageId = 1; CometChat.removeReaction(messageId, "😴", onSuccess: (message) { - debugPrint("Success : ${message.getReactions().last}"); + debugPrint("Success : ${message.reactions.last.reaction}"); }, onError: (e) { debugPrint("Error: ${e.message}"); }); @@ -73,8 +90,8 @@ ReactionRequest reactionRequest = (ReactionRequestBuilder()..limit = 30..messag reactionRequest.fetchNext( onSuccess: (messageReactions) { - for (MessageReaction messageReaction in messageReactions) { - debugPrint("Success: ${messageReaction.getReactions()}"); + for (Reaction reaction in messageReactions) { + debugPrint("Success: ${reaction.reaction} by ${reaction.uid}"); } }, onError: (e) { @@ -98,8 +115,8 @@ ReactionRequest reactionRequest = (ReactionRequestBuilder()..limit = 30..messag reactionRequest.fetchPrevious( onSuccess: (messageReactions) { - for (MessageReaction messageReaction in messageReactions) { - debugPrint("Success: ${messageReaction.getReactions()}"); + for (Reaction reaction in messageReactions) { + debugPrint("Success: ${reaction.reaction} by ${reaction.uid}"); } }, onError: (e) { @@ -144,14 +161,14 @@ class MyClass with MessageListener { ## Removing a Reaction Listener -To stop listening for reaction events, remove the listener as follows: +Reaction events arrive through the **message** listener registered above, so removal uses `removeMessageListener` with the same ID — there is no separate reaction-listener API: ```dart String listenerID = "UNIQUE_LISTENER_ID"; -CometChat.removeMessageReactionListener(listenerID); +CometChat.removeMessageListener(listenerID); ``` @@ -187,9 +204,9 @@ for (ReactionCount reactionCount in message.reactions) { ## Updated Message With Reaction Info When a user adds or removes a reaction, you will receive a real-time event. Once you receive the real time event you would want to update the message with the latest reaction information. To do so you can use the `updateMessageWithReactionInfo()` method. -The `updateMessageWithReactionInfo()` method provides a seamless way to update the reactions on a message instance (`BaseMessage`) in real-time. This method ensures that when a reaction is added or removed from a message, the BaseMessage object's `getReactions()` property reflects this change immediately. +The `updateMessageWithReactionInfo()` method provides a seamless way to update the reactions on a message instance (`BaseMessage`) in real-time. This method ensures that when a reaction is added or removed from a message, the `BaseMessage` object's `reactions` property reflects this change immediately. -When you receive a real-time reaction event (MessageReaction), call the `updateMessageWithReactionInfo()` method, passing the BaseMessage instance (message), event data (MessageReaction) and reaction event action type (`ReactionAction.REACTION_ADDED` or `ReactionAction.REACTION_REMOVED`) that corresponds to the message being reacted to. +When you receive a real-time reaction event (`Reaction`), call the `updateMessageWithReactionInfo()` method, passing the BaseMessage instance (message), event data (`Reaction`) and reaction event action type (`ReactionAction.REACTION_ADDED` or `ReactionAction.REACTION_REMOVED`) that corresponds to the message being reacted to. @@ -198,7 +215,7 @@ When you receive a real-time reaction event (MessageReaction), call the `updateM BaseMessage message = ...; // The reaction event data received in real-time -MessageReaction messageReaction = ...; +Reaction messageReaction = ...; // The recieved reaction event real-time action type. Can be CometChatConstants.REACTION_ADDED or CometChatConstants.REACTION_REMOVED var action = CometChatConstants.REACTION_ADDED; diff --git a/sdk/flutter/real-time-listeners.mdx b/sdk/flutter/real-time-listeners.mdx index 099c041ea..1177f8da2 100644 --- a/sdk/flutter/real-time-listeners.mdx +++ b/sdk/flutter/real-time-listeners.mdx @@ -3,6 +3,23 @@ title: "All Real Time Listeners" description: "Handle CometChat real-time events in Flutter apps with user, group, and message listeners for presence, membership, and messages." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_sdk` | +| Import | `import 'package:cometchat_sdk/cometchat_sdk.dart';` | +| Purpose | Handle CometChat real-time events in Flutter apps with user, group, and message listeners for presence, membership, and messages. | +| Key methods | `addAIAssistantListener()` · `addGroupListener()` · `addMessageListener()` · `addUserListener()` · `removeAIAssistantListener()` · `removeGroupListener()` · `removeUserListener()` | +| Key classes | `User` · `Action` · `Group` · `BaseMessage` · `MessageReceipt` · `ReactionEvent` · `TypingIndicator` · `AIAssistantBaseEvent` | +| Listener callbacks | `onAIAssistantEventReceived()` · `onAIAssistantMessageReceived()` · `onAIToolArgumentsReceived()` · `onAIToolResultReceived()` · `onCardMessageReceived()` · `onCustomMessageReceived()` · `onGroupMemberBanned()` · `onGroupMemberJoined()` | +| Prerequisites | SDK initialised via [`CometChat.init()`](/sdk/flutter/setup) and a logged-in user via [`CometChat.login()`](/sdk/flutter/authentication-overview). | +| Constraints | `onSuccess` and `onError` are **both required** — omitting either is a compile error, and awaiting the call alone gives you nothing to act on. Put the success path inside `onSuccess`. | +| Related | [Receive A Message](/sdk/flutter/receive-messages) · [Connection Status](/sdk/flutter/connection-status) · [User Presence](/sdk/flutter/user-presence) | +| Full reference | [`User`](/sdk/reference/entities#user) · [`Action`](/sdk/reference/messages#action) · [`Group`](/sdk/reference/entities#group) · [`BaseMessage`](/sdk/reference/messages#basemessage) · [`MessageReceipt`](/sdk/reference/auxiliary#messagereceipt) · [`ReactionEvent`](/sdk/reference/auxiliary#reactionevent) | + + + CometChat provides 4 listeners viz. diff --git a/sdk/flutter/receive-messages.mdx b/sdk/flutter/receive-messages.mdx index 6675f136e..a53a066bd 100644 --- a/sdk/flutter/receive-messages.mdx +++ b/sdk/flutter/receive-messages.mdx @@ -3,6 +3,23 @@ title: "Receive A Message" description: "Receive CometChat messages in Flutter apps with real-time MessageListener callbacks and missed message retrieval." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_sdk` | +| Import | `import 'package:cometchat_sdk/cometchat_sdk.dart';` | +| Purpose | Receive CometChat messages in Flutter apps with real-time MessageListener callbacks and missed message retrieval. | +| Key methods | `addMessageListener()` · `getUnreadMessageCount()` · `getUnreadMessageCountForAllGroups()` · `getUnreadMessageCountForAllUsers()` · `getUnreadMessageCountForGroup()` · `getUnreadMessageCountForUser()` · `removeMessageListener()` | +| Key classes | `MediaMessage` · `TextMessage` · `BaseMessage` · `CometChatException` · `CardMessage` · `CustomMessage` | +| Listener callbacks | `onCardMessageReceived()` · `onCustomMessageReceived()` · `onError()` · `onMediaMessageReceived()` · `onSuccess()` · `onTextMessageReceived()` | +| Prerequisites | SDK initialised via [`CometChat.init()`](/sdk/flutter/setup) and a logged-in user via [`CometChat.login()`](/sdk/flutter/authentication-overview). | +| Constraints | `onSuccess` and `onError` are **both required** — omitting either is a compile error, and awaiting the call alone gives you nothing to act on. Put the success path inside `onSuccess`. | +| Related | [Send A Message](/sdk/flutter/send-message) · [All Real Time Listeners](/sdk/flutter/real-time-listeners) · [Additional Message Filtering](/sdk/flutter/additional-message-filtering) · [Delivery & Read Receipts](/sdk/flutter/delivery-read-receipts) | +| Full reference | [`MediaMessage`](/sdk/reference/messages#mediamessage) · [`TextMessage`](/sdk/reference/messages#textmessage) · [`BaseMessage`](/sdk/reference/messages#basemessage) · [`CometChatException`](/sdk/reference/auxiliary#cometchatexception) · [`CardMessage`](/sdk/reference/messages#cardmessage) · [`CustomMessage`](/sdk/reference/messages#custommessage) | + + + Receiving messages with CometChat has two parts: @@ -417,26 +434,38 @@ messageRequest.fetchPrevious(onSuccess: (List list) { *In other words, how do I find out the number of unread messages I have from a particular user?* -In order to get the unread message count for a particular user (with respect to the logged-in user), you can use the `getUnreadMessageCountForUser()`. - -This method has the two variants: +The Flutter SDK has no per-user method. Call `getUnreadMessageCountForAllUsers()` and read the +UID's entry from the returned map — the map is keyed by UID, and a UID with nothing unread is +simply absent. ```dart -CometChat.getUnreadMessageCountForUser(String UID, Callbacks); +CometChat.getUnreadMessageCountForAllUsers( + onSuccess: (Map counts) { + final int unread = counts["cometchat-uid-1"] ?? 0; + debugPrint("Unread from that user: $unread"); + }, + onError: (CometChatException e) { + // Handle failure + }, +); ``` -If you wish to ignore the messages from blocked users you can use the below syntax setting the boolean parameter to `true`: +Pass `hideMessagesFromBlockedUsers: true` to leave out messages from users you have blocked: ```dart -CometChat.getUnreadMessageCountForUser(String UID, boolean hideMessagesFromBlockedUsers, Callbacks); +CometChat.getUnreadMessageCountForAllUsers( + hideMessagesFromBlockedUsers: true, + onSuccess: (Map counts) {}, + onError: (CometChatException e) {}, +); ``` diff --git a/sdk/flutter/retrieve-conversations.mdx b/sdk/flutter/retrieve-conversations.mdx index a0ceccc9c..d105d6466 100644 --- a/sdk/flutter/retrieve-conversations.mdx +++ b/sdk/flutter/retrieve-conversations.mdx @@ -3,6 +3,22 @@ title: "Retrieve Conversations" description: "Fetch, filter, tag, and search CometChat conversations in Flutter apps using conversation request builders." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_sdk` | +| Import | `import 'package:cometchat_sdk/cometchat_sdk.dart';` | +| Purpose | Fetch, filter, tag, and search CometChat conversations in Flutter apps using conversation request builders. | +| Key methods | `getConversation()` · `getConversationFromMessage()` · `tagConversation()` | +| Key classes | `Conversation` · `CometChatException` · `CometChatConversationType` | +| Prerequisites | SDK initialised via [`CometChat.init()`](/sdk/flutter/setup) and a logged-in user via [`CometChat.login()`](/sdk/flutter/authentication-overview). | +| Constraints | `onSuccess` and `onError` are **both required** — omitting either is a compile error, and awaiting the call alone gives you nothing to act on. Put the success path inside `onSuccess`. | +| Related | [Delete A Conversation](/sdk/flutter/delete-conversation) · [Receive A Message](/sdk/flutter/receive-messages) | +| Full reference | [`Conversation`](/sdk/reference/entities#conversation) · [`CometChatException`](/sdk/reference/auxiliary#cometchatexception) | + + + ## Retrieve List of Conversations diff --git a/sdk/flutter/retrieve-group-members.mdx b/sdk/flutter/retrieve-group-members.mdx index 3321fbb89..ec820f39b 100644 --- a/sdk/flutter/retrieve-group-members.mdx +++ b/sdk/flutter/retrieve-group-members.mdx @@ -3,6 +3,20 @@ title: "Retrieve Group Members" description: "Fetch CometChat group members in Flutter apps with group GUID, pagination limits, search keywords, and member scopes." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_sdk` | +| Import | `import 'package:cometchat_sdk/cometchat_sdk.dart';` | +| Purpose | Fetch CometChat group members in Flutter apps with group GUID, pagination limits, search keywords, and member scopes. | +| Key classes | `Group` · `CometChatUserStatus` · `CometChatException` · `GroupMember` | +| Prerequisites | SDK initialised via [`CometChat.init()`](/sdk/flutter/setup) and a logged-in user via [`CometChat.login()`](/sdk/flutter/authentication-overview). | +| Related | [Add Members To A Group](/sdk/flutter/group-add-members) · [Change Member Scope](/sdk/flutter/group-change-member-scope) | +| Full reference | [`Group`](/sdk/reference/entities#group) · [`CometChatException`](/sdk/reference/auxiliary#cometchatexception) · [`GroupMember`](/sdk/reference/entities#groupmember) | + + + ## Retrieve the List of Group Members diff --git a/sdk/flutter/retrieve-groups.mdx b/sdk/flutter/retrieve-groups.mdx index 210f531e7..dc7883a28 100644 --- a/sdk/flutter/retrieve-groups.mdx +++ b/sdk/flutter/retrieve-groups.mdx @@ -3,6 +3,22 @@ title: "Retrieve Groups" description: "Fetch CometChat groups in Flutter apps with pagination, search keywords, joined-only filters, tags, and group request builders." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_sdk` | +| Import | `import 'package:cometchat_sdk/cometchat_sdk.dart';` | +| Purpose | Fetch CometChat groups in Flutter apps with pagination, search keywords, joined-only filters, tags, and group request builders. | +| Key methods | `getGroup()` · `getOnlineGroupMemberCount()` | +| Key classes | `Group` · `CometChatException` | +| Prerequisites | SDK initialised via [`CometChat.init()`](/sdk/flutter/setup) and a logged-in user via [`CometChat.login()`](/sdk/flutter/authentication-overview). | +| Constraints | `onSuccess` and `onError` are **both required** — omitting either is a compile error, and awaiting the call alone gives you nothing to act on. Put the success path inside `onSuccess`. | +| Related | [Groups](/sdk/flutter/groups-overview) · [Join A Group](/sdk/flutter/join-group) | +| Full reference | [`Group`](/sdk/reference/entities#group) · [`CometChatException`](/sdk/reference/auxiliary#cometchatexception) | + + + ## Retrieve List of Groups diff --git a/sdk/flutter/retrieve-users.mdx b/sdk/flutter/retrieve-users.mdx index a9f40a488..d323abcaa 100644 --- a/sdk/flutter/retrieve-users.mdx +++ b/sdk/flutter/retrieve-users.mdx @@ -3,6 +3,22 @@ title: "Retrieve Users" description: "Fetch CometChat users in Flutter apps, get logged-in user details, and filter user lists with request builder options." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_sdk` | +| Import | `import 'package:cometchat_sdk/cometchat_sdk.dart';` | +| Purpose | Fetch CometChat users in Flutter apps, get logged-in user details, and filter user lists with request builder options. | +| Key methods | `getLoggedInUser()` · `getOnlineUserCount()` · `getUser()` | +| Key classes | `User` · `CometChatException` · `CometChatUserStatus` | +| Prerequisites | SDK initialised via [`CometChat.init()`](/sdk/flutter/setup) and a logged-in user via [`CometChat.login()`](/sdk/flutter/authentication-overview). | +| Constraints | `onSuccess` and `onError` are **both required** — omitting either is a compile error, and awaiting the call alone gives you nothing to act on. Put the success path inside `onSuccess`. | +| Related | [User Management](/sdk/flutter/user-management) · [User Presence](/sdk/flutter/user-presence) · [Block Users](/sdk/flutter/block-users) | +| Full reference | [`User`](/sdk/reference/entities#user) · [`CometChatException`](/sdk/reference/auxiliary#cometchatexception) | + + + ## Retrieve Logged In User Details diff --git a/sdk/flutter/send-message.mdx b/sdk/flutter/send-message.mdx index d6114b184..814d74bc8 100644 --- a/sdk/flutter/send-message.mdx +++ b/sdk/flutter/send-message.mdx @@ -3,6 +3,22 @@ title: "Send A Message" description: "Send CometChat text, media, and custom messages to users and groups from Flutter apps, and handle receive-only card messages." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_sdk` | +| Import | `import 'package:cometchat_sdk/cometchat_sdk.dart';` | +| Purpose | Send CometChat text, media, and custom messages to users and groups from Flutter apps, and handle receive-only card messages. | +| Key methods | `sendCustomMessage()` · `sendMediaMessage()` · `sendMessage()` | +| Key classes | `CustomMessage` · `CometChatException` · `TextMessage` · `MediaMessage` · `CometChatConversationType` · `CometChatMessageType` · `Attachment` · `CometChatReceiverType` | +| Prerequisites | SDK initialised via [`CometChat.init()`](/sdk/flutter/setup) and a logged-in user via [`CometChat.login()`](/sdk/flutter/authentication-overview). | +| Constraints | `onSuccess` and `onError` are **both required** — omitting either is a compile error, and awaiting the call alone gives you nothing to act on. Put the success path inside `onSuccess`. | +| Related | [Receive A Message](/sdk/flutter/receive-messages) · [Edit A Message](/sdk/flutter/edit-message) · [Delete A Message](/sdk/flutter/delete-message) · [Threaded Messages](/sdk/flutter/threaded-messages) · [Upload Files & Send Attachments](/sdk/flutter/upload-files) | +| Full reference | [`CustomMessage`](/sdk/reference/messages#custommessage) · [`CometChatException`](/sdk/reference/auxiliary#cometchatexception) · [`TextMessage`](/sdk/reference/messages#textmessage) · [`MediaMessage`](/sdk/reference/messages#mediamessage) · [`Attachment`](/sdk/reference/auxiliary#attachment) | + + + Using CometChat, you can work with four types of messages. The first three you can send directly: diff --git a/sdk/flutter/setup.mdx b/sdk/flutter/setup.mdx index 4d23df6d5..7a66ab0a0 100644 --- a/sdk/flutter/setup.mdx +++ b/sdk/flutter/setup.mdx @@ -3,6 +3,22 @@ title: "Setup" description: "Install, configure, initialize, and log in users with the CometChat Flutter SDK using app keys and region." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_sdk` | +| Import | `import 'package:cometchat_sdk/cometchat_sdk.dart';` | +| Purpose | Install, configure, initialize, and log in users with the CometChat Flutter SDK using app keys and region. | +| Key methods | `init()` | +| Key classes | `CometChatException` · `CometChatSubscriptionType` | +| Prerequisites | SDK initialised via [`CometChat.init()`](/sdk/flutter/setup) and a logged-in user via [`CometChat.login()`](/sdk/flutter/authentication-overview). | +| Constraints | `onSuccess` and `onError` are **both required** — omitting either is a compile error, and awaiting the call alone gives you nothing to act on. Put the success path inside `onSuccess`. | +| Related | [Authentication](/sdk/flutter/authentication-overview) · [Chat SDK](/sdk/flutter/overview) | +| Full reference | [`CometChatException`](/sdk/reference/auxiliary#cometchatexception) | + + + ### Get your Application Keys [Signup for CometChat](https://app.cometchat.com/) and then: diff --git a/sdk/flutter/threaded-messages.mdx b/sdk/flutter/threaded-messages.mdx index c796bcd1b..760715f27 100644 --- a/sdk/flutter/threaded-messages.mdx +++ b/sdk/flutter/threaded-messages.mdx @@ -3,6 +3,23 @@ title: "Threaded Messages" description: "Send, receive, and fetch CometChat threaded messages in Flutter apps using parent message IDs." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_sdk` | +| Import | `import 'package:cometchat_sdk/cometchat_sdk.dart';` | +| Purpose | Send, receive, and fetch CometChat threaded messages in Flutter apps using parent message IDs. | +| Key methods | `addMessageListener()` · `sendMessage()` | +| Key classes | `TextMessage` · `CometChatException` · `BaseMessage` · `CustomMessage` · `MediaMessage` · `CometChatConversationType` · `CometChatMessageType` | +| Listener callbacks | `onCustomMessageReceived()` · `onMediaMessageReceived()` · `onTextMessageReceived()` | +| Prerequisites | SDK initialised via [`CometChat.init()`](/sdk/flutter/setup) and a logged-in user via [`CometChat.login()`](/sdk/flutter/authentication-overview). | +| Constraints | `onSuccess` and `onError` are **both required** — omitting either is a compile error, and awaiting the call alone gives you nothing to act on. Put the success path inside `onSuccess`. | +| Related | [Send A Message](/sdk/flutter/send-message) · [Receive A Message](/sdk/flutter/receive-messages) | +| Full reference | [`TextMessage`](/sdk/reference/messages#textmessage) · [`CometChatException`](/sdk/reference/auxiliary#cometchatexception) · [`BaseMessage`](/sdk/reference/messages#basemessage) · [`CustomMessage`](/sdk/reference/messages#custommessage) · [`MediaMessage`](/sdk/reference/messages#mediamessage) | + + + Messages that are started from a particular message are called Threaded messages or simply threads. diff --git a/sdk/flutter/transfer-group-ownership.mdx b/sdk/flutter/transfer-group-ownership.mdx index 1f45e7f11..013143c60 100644 --- a/sdk/flutter/transfer-group-ownership.mdx +++ b/sdk/flutter/transfer-group-ownership.mdx @@ -3,6 +3,22 @@ title: "Transfer Group Ownership" description: "Transfer CometChat group ownership to another member in Flutter apps before the current owner leaves the group." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_sdk` | +| Import | `import 'package:cometchat_sdk/cometchat_sdk.dart';` | +| Purpose | Transfer CometChat group ownership to another member in Flutter apps before the current owner leaves the group. | +| Key methods | `transferGroupOwnership()` | +| Key classes | `CometChatException` | +| Prerequisites | SDK initialised via [`CometChat.init()`](/sdk/flutter/setup) and a logged-in user via [`CometChat.login()`](/sdk/flutter/authentication-overview). | +| Constraints | `onSuccess` and `onError` are **both required** — omitting either is a compile error, and awaiting the call alone gives you nothing to act on. Put the success path inside `onSuccess`. | +| Related | [Change Member Scope](/sdk/flutter/group-change-member-scope) · [Update A Group](/sdk/flutter/update-group) | +| Full reference | [`CometChatException`](/sdk/reference/auxiliary#cometchatexception) | + + + *In other words, as a logged-in user, how do I transfer the ownership of any group if I am the owner of the group?* diff --git a/sdk/flutter/transient-messages.mdx b/sdk/flutter/transient-messages.mdx index 4d2676079..9f7faf295 100644 --- a/sdk/flutter/transient-messages.mdx +++ b/sdk/flutter/transient-messages.mdx @@ -4,6 +4,23 @@ sidebarTitle: "Transient Messages" description: "Send and receive ephemeral real-time messages with the CometChat Flutter SDK for live reactions and temporary indicators." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_sdk` | +| Import | `import 'package:cometchat_sdk/cometchat_sdk.dart';` | +| Purpose | Send and receive ephemeral real-time messages with the CometChat Flutter SDK for live reactions and temporary indicators. | +| Key methods | `addMessageListener()` · `sendTransientMessage()` | +| Key classes | `TransientMessage` · `CometChatException` · `CometChatReceiverType` | +| Listener callbacks | `onTransientMessageReceived()` | +| Prerequisites | SDK initialised via [`CometChat.init()`](/sdk/flutter/setup) and a logged-in user via [`CometChat.login()`](/sdk/flutter/authentication-overview). | +| Constraints | `onSuccess` and `onError` are **both required** — omitting either is a compile error, and awaiting the call alone gives you nothing to act on. Put the success path inside `onSuccess`. | +| Related | [Send A Message](/sdk/flutter/send-message) · [Typing Indicators](/sdk/flutter/typing-indicators) | +| Full reference | [`TransientMessage`](/sdk/reference/auxiliary#transientmessage) · [`CometChatException`](/sdk/reference/auxiliary#cometchatexception) | + + + Transient messages are messages that are sent in real-time only and are not saved or tracked anywhere. The receiver of the message will only receive the message if he is online and these messages cannot be retrieved later. diff --git a/sdk/flutter/typing-indicators.mdx b/sdk/flutter/typing-indicators.mdx index 0bc6cabd5..5afc2c98f 100644 --- a/sdk/flutter/typing-indicators.mdx +++ b/sdk/flutter/typing-indicators.mdx @@ -3,6 +3,23 @@ title: "Typing Indicators" description: "Send and receive CometChat typing indicators in Flutter apps for one-on-one and group conversations." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_sdk` | +| Import | `import 'package:cometchat_sdk/cometchat_sdk.dart';` | +| Purpose | Send and receive CometChat typing indicators in Flutter apps for one-on-one and group conversations. | +| Key methods | `addMessageListener()` · `endTyping()` · `startTyping()` | +| Key classes | `CometChatReceiverType` · `TypingIndicator` | +| Listener callbacks | `onTypingEnded()` · `onTypingStarted()` | +| Prerequisites | SDK initialised via [`CometChat.init()`](/sdk/flutter/setup) and a logged-in user via [`CometChat.login()`](/sdk/flutter/authentication-overview). | +| Constraints | `onSuccess` and `onError` are **both required** — omitting either is a compile error, and awaiting the call alone gives you nothing to act on. Put the success path inside `onSuccess`. | +| Related | [Transient Messages](/sdk/flutter/transient-messages) · [All Real Time Listeners](/sdk/flutter/real-time-listeners) | +| Full reference | [`TypingIndicator`](/sdk/reference/auxiliary#typingindicator) | + + + ## Send a Typing Indicator diff --git a/sdk/flutter/update-group.mdx b/sdk/flutter/update-group.mdx index 3200bd55c..5a8e0a143 100644 --- a/sdk/flutter/update-group.mdx +++ b/sdk/flutter/update-group.mdx @@ -3,6 +3,22 @@ title: "Update A Group" description: "Update CometChat group details from Flutter apps with updateGroup and a Group object containing changed fields." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_sdk` | +| Import | `import 'package:cometchat_sdk/cometchat_sdk.dart';` | +| Purpose | Update CometChat group details from Flutter apps with updateGroup and a Group object containing changed fields. | +| Key methods | `updateGroup()` | +| Key classes | `Group` · `CometChatException` · `CometChatGroupType` | +| Prerequisites | SDK initialised via [`CometChat.init()`](/sdk/flutter/setup) and a logged-in user via [`CometChat.login()`](/sdk/flutter/authentication-overview). | +| Constraints | `onSuccess` and `onError` are **both required** — omitting either is a compile error, and awaiting the call alone gives you nothing to act on. Put the success path inside `onSuccess`. | +| Related | [Create A Group](/sdk/flutter/create-group) · [Delete A Group](/sdk/flutter/delete-group) | +| Full reference | [`Group`](/sdk/reference/entities#group) · [`CometChatException`](/sdk/reference/auxiliary#cometchatexception) | + + + ## Update Group diff --git a/sdk/flutter/upload-files.mdx b/sdk/flutter/upload-files.mdx index 1cd48be55..a0d1c0c35 100644 --- a/sdk/flutter/upload-files.mdx +++ b/sdk/flutter/upload-files.mdx @@ -4,6 +4,23 @@ sidebarTitle: "Upload Files" description: "Upload files directly to storage with per-file progress, remove, and retry through an UploadFileRequest — then send them as one or more media messages with multiple attachments." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_sdk` | +| Import | `import 'package:cometchat_sdk/cometchat_sdk.dart';` | +| Purpose | Upload files directly to storage with per-file progress, remove, and retry through an UploadFileRequest — then send them as one or more media messages with multiple attachments. | +| Key methods | `createUploadFileRequest()` · `getMaxAttachmentCount()` · `getMaxAttachmentSize()` · `sendMediaMessage()` | +| Key classes | `CometChatException` · `MediaMessage` · `Attachment` · `CometChatConversationType` · `CometChatMessageType` | +| Listener callbacks | `onComplete()` · `onFileError()` · `onFileFailure()` · `onFileProgress()` · `onFileUploaded()` | +| Prerequisites | SDK initialised via [`CometChat.init()`](/sdk/flutter/setup) and a logged-in user via [`CometChat.login()`](/sdk/flutter/authentication-overview). | +| Constraints | `onSuccess` and `onError` are **both required** — omitting either is a compile error, and awaiting the call alone gives you nothing to act on. Put the success path inside `onSuccess`. | +| Related | [Send A Message](/sdk/flutter/send-message) · [Messaging](/sdk/flutter/messaging-overview) | +| Full reference | [`CometChatException`](/sdk/reference/auxiliary#cometchatexception) · [`MediaMessage`](/sdk/reference/messages#mediamessage) · [`Attachment`](/sdk/reference/auxiliary#attachment) | + + + `CometChat.createUploadFileRequest(receiverId, receiverType)` returns an **`UploadFileRequest`** — the entry point for uploading files **directly to storage** with **per-file progress, success, and failure**. Upload is **decoupled from sending**: each uploaded file yields an `Attachment` (carrying a hosted URL), which you then attach to a `MediaMessage` and send with [`sendMediaMessage()`](/sdk/flutter/send-message#media-message). A request object is scoped to **one destination** (`receiverId` / `receiverType`) and **one upload batch**. This is the recommended way to build a **multi-attachment composer**: create a request, upload a batch of files, show a progress bar per file, let the user remove or retry individual files, then send them as a single media message with multiple attachments (or split across several). diff --git a/sdk/flutter/user-management.mdx b/sdk/flutter/user-management.mdx index 4da1892b3..7ae216b68 100644 --- a/sdk/flutter/user-management.mdx +++ b/sdk/flutter/user-management.mdx @@ -3,6 +3,22 @@ title: "User Management" description: "Create, update, and manage CometChat users in Flutter apps before login using user objects, auth keys, and REST API workflows." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_sdk` | +| Import | `import 'package:cometchat_sdk/cometchat_sdk.dart';` | +| Purpose | Create, update, and manage CometChat users in Flutter apps before login using user objects, auth keys, and REST API workflows. | +| Key methods | `createUser()` · `updateCurrentUserDetails()` | +| Key classes | `User` · `CometChatException` | +| Prerequisites | SDK initialised via [`CometChat.init()`](/sdk/flutter/setup) and a logged-in user via [`CometChat.login()`](/sdk/flutter/authentication-overview). | +| Constraints | `onSuccess` and `onError` are **both required** — omitting either is a compile error, and awaiting the call alone gives you nothing to act on. Put the success path inside `onSuccess`. | +| Related | [Users](/sdk/flutter/users-overview) · [Retrieve Users](/sdk/flutter/retrieve-users) | +| Full reference | [`User`](/sdk/reference/entities#user) · [`CometChatException`](/sdk/reference/auxiliary#cometchatexception) | + + + When a user logs into your app, you need to programmatically login the user into CometChat. But before you log in the user to CometChat, you need to create the user. diff --git a/sdk/flutter/user-presence.mdx b/sdk/flutter/user-presence.mdx index 8c567ea0c..c8af0f2d1 100644 --- a/sdk/flutter/user-presence.mdx +++ b/sdk/flutter/user-presence.mdx @@ -3,6 +3,23 @@ title: "User Presence" description: "Track CometChat user presence in Flutter apps with subscriptions for all users, roles, friends, and real-time user listeners." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_sdk` | +| Import | `import 'package:cometchat_sdk/cometchat_sdk.dart';` | +| Purpose | Track CometChat user presence in Flutter apps with subscriptions for all users, roles, friends, and real-time user listeners. | +| Key methods | `addUserListener()` · `removeUserListener()` | +| Key classes | `User` | +| Listener callbacks | `onUserOffline()` · `onUserOnline()` | +| Prerequisites | SDK initialised via [`CometChat.init()`](/sdk/flutter/setup) and a logged-in user via [`CometChat.login()`](/sdk/flutter/authentication-overview). | +| Constraints | `onSuccess` and `onError` are **both required** — omitting either is a compile error, and awaiting the call alone gives you nothing to act on. Put the success path inside `onSuccess`. | +| Related | [Retrieve Users](/sdk/flutter/retrieve-users) · [All Real Time Listeners](/sdk/flutter/real-time-listeners) | +| Full reference | [`User`](/sdk/reference/entities#user) | + + + User Presence helps us understand if a user is available to chat or not. diff --git a/ui-kit/flutter/FLUTTER-V6-DOCS-AUDIT.md b/ui-kit/flutter/FLUTTER-V6-DOCS-AUDIT.md new file mode 100644 index 000000000..9c96182a6 --- /dev/null +++ b/ui-kit/flutter/FLUTTER-V6-DOCS-AUDIT.md @@ -0,0 +1,77 @@ +# Flutter UI Kit v6 — docs vs. published package audit + +**Method:** every ```dart fence on all 54 `ui-kit/flutter/*.mdx` pages was extracted and compiled +against the **published** `cometchat_chat_uikit 6.1.0` (pub.dev), with `cometchat_sdk 5.0.6` and +`cometchat_calls_sdk 5.0.6`. Nothing here was inferred from reading — every item was a compiler +diagnostic, and every fix was re-compiled before being committed. + +## Result + +| | Before | After | +|---|---|---| +| Pages with errors | 26 of 54 | **0** | +| Kit-API errors | 90 | **0** | +| Fences compiling clean | — | **352 of 374** | + +The 22 fences not counted are multi-expression illustrative blocks that do not parse standalone in any +wrapper (they are listed by the tool on every run — it never silently drops them). Spot-checks of the +suspicious ones (`conversationsBloc`, `stateCallBack`) confirmed they use real APIs. + +`upgrading-from-v5` is excluded by design: its "before" snippets are v5 code and are correct as written. + +## What was wrong (all fixed) + +**1. View slots were missing the trailing `BuildContext` (17).** In v6 every view-slot callback gained a +final `BuildContext`; the docs still showed v5 arity. On `message-header` the first two parameters were +**also swapped** — the real signature is `(Group? group, User? user, BuildContext context)` while the docs +named them `(user, group)`, which is why `user.status` and `group.membersCount` appeared broken. They are +both real fields; only the parameter names were wrong. + +**2. `onError` handlers used `e.message` (10).** The typedef is `OnError = Function(Exception e)` and +`Exception` has no `.message`. (`getting-started` was left alone — init/login's `onError` really is +typed `CometChatException`, so `error.message` is correct there.) + +**3. Parameters that do not exist (13)** — `searchBoxBackgroundColor` → `searchBackgroundColor`, +`replyCountTextColor` → `countTextColor`, `groupMembersStyle` → `style`, `leadingView` → +`leadingStateView`, `errorAlertStyle` → `attachmentErrorAlertStyle`, `declineButtonText` (no text +variant exists), and `onError`/`messageHeaderBloc`/`typingIndicatorStyle` on `CometChatMessageHeader`, +which has none of them. + +**4. Symbols that do not exist (17)** — `CometChatCallLogDetails`, `CometChatErrorAlertStyle`, +`CometChatAttachmentErrorSnackBarStyle`, `CometChatConstants`, `CometChatTextFormatterResult`, +`CometChatAiAssistantBubbleStyle` (the real class is `CometChatAIAssistantBubbleStyle` — capital AI). +Constants moved to `CometChatCallType.video` / `CometChatUserStatus.online`. + +**5. `CometChatUIKit.getDataSource()` (4)** — removed in v6 with the DataSource architecture. The +defaults now come from `MessageTemplateUtils` (`getTextMessageOptions`, `getAllMessageTypes`, +`getAllMessageCategories`). + +**6. Wrong method names and arities** — `CometChatUIKit.blockUsers/unblockUsers` are actually +`CometChat.blockUser/unblockUser` (singular, still taking a list); `onSelection` takes one argument, not +two; `onItemTap` on `CometChatUsers`/`CometChatGroups` takes `(context, item)` while +`CometChatConversations`/`CometChatGroupMembers` take just `(item)`; `CometChatMessageOption.onClick` is +`onItemClick(message, state)`. + +**7. Structural errors** — `conversationItemView`'s parameters were in the **reverse** order; +`messageItemView` does not exist (message results override per type: `searchTextMessageView`, +`searchImageMessageView`, …); `CometChatThreadedHeader` has no `bubbleView` (it lives on +`CometChatMessageTemplate`, passed via `template`) and no `onBack`/`onError`; the custom-text-formatter +guide subclassed an abstract class without its five required members and used a non-existent +`getFormattedText`/`CometChatTextFormatterResult` API instead of `getAttributedText`/`AttributedText`; +`localize` mixed an aliased import with unprefixed symbols and imported a package that no longer exists. + +## Recommendation — add this to docs CI + +The engine is `test-suite/scripts/typecheck-fences-dart.mjs` in the `cometchat-skills` repo. It takes a +pinned Flutter project and a list of markdown files, and exits non-zero on kit-API drift: + +```bash +node test-suite/scripts/typecheck-fences-dart.mjs \ + --project test-suite/typecheck/flutter-v6 \ + --exclude upgrading-from-v5 \ + ui-kit/flutter/*.mdx +``` + +It is CI-safe: it distinguishes real drift from the reader's own placeholders (symbols the page itself +declares, relative imports, host helper functions), supports `--exclude` for pages that intentionally +show a previous major, and prints any fence it could not check rather than quietly skipping it. diff --git a/ui-kit/flutter/call-buttons.mdx b/ui-kit/flutter/call-buttons.mdx index 9bb9d62d8..2e61ecdd4 100644 --- a/ui-kit/flutter/call-buttons.mdx +++ b/ui-kit/flutter/call-buttons.mdx @@ -3,6 +3,24 @@ title: "Call Buttons" description: "Add CometChat Flutter UI Kit call buttons for voice and video calling, call settings, and call-related user actions." --- + + +| Field | Value | +| --- | --- | +| Component | `CometChatCallButtons` | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_calls_uikit.dart';` | +| Barrel | **Calls barrel only** — this widget does not resolve from `cometchat_chat_uikit.dart`. A screen showing chat *and* calling imports both. | +| Purpose | Add CometChat Flutter UI Kit call buttons for voice and video calling, call settings, and call-related user actions. | +| Data props | `user` · `group` | +| Actions | `onError` | +| View slots | `callSettingsBuilder` | +| Styling | `callButtonsStyle` — the app `ThemeData` does not reach inside a kit widget, so scope colours here. | +| Prerequisites | `CometChatUIKit` initialised and a user logged in. | +| Full props | [11 props](#functionality) | + + + ## Overview The `CometChatCallButtons` widget provides users with the ability to make calls, access call-related functionalities, and control call settings. diff --git a/ui-kit/flutter/call-features.mdx b/ui-kit/flutter/call-features.mdx index 503c018ad..548d123d0 100644 --- a/ui-kit/flutter/call-features.mdx +++ b/ui-kit/flutter/call-features.mdx @@ -3,6 +3,19 @@ title: "Call" description: "Integrate CometChat Flutter UI Kit calling with one-on-one and group audio/video calls, setup, initialization, and call events." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Integrate CometChat Flutter UI Kit calling with one-on-one and group audio/video calls, setup, initialization, and call events. | +| Key classes | `CometChatSubscriptionType` · `CometChatUIKit` | +| Key methods | `addCallListener()` · `init()` · `removeCallListener()` | +| Related | [Call Buttons](/ui-kit/flutter/call-buttons) · [Incoming Call](/ui-kit/flutter/incoming-call) · [Outgoing Call](/ui-kit/flutter/outgoing-call) · [Call Logs](/ui-kit/flutter/call-logs) | + + + ## 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. diff --git a/ui-kit/flutter/call-logs.mdx b/ui-kit/flutter/call-logs.mdx index ffadbb1d0..73e32d059 100644 --- a/ui-kit/flutter/call-logs.mdx +++ b/ui-kit/flutter/call-logs.mdx @@ -3,6 +3,25 @@ title: "Call Logs" description: "Show CometChat Flutter UI Kit call logs with audio/video status, missed calls, timestamps, pagination, and call actions." --- + + +| Field | Value | +| --- | --- | +| Component | `CometChatCallLogs` | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_calls_uikit.dart';` | +| Barrel | **Calls barrel only** — this widget does not resolve from `cometchat_chat_uikit.dart`. A screen showing chat *and* calling imports both. | +| Purpose | Show CometChat Flutter UI Kit call logs with audio/video status, missed calls, timestamps, pagination, and call actions. | +| Data props | `callLogsRequestBuilder` | +| Actions | `onItemClick` · `onError` · `onBack` · `onCallLogIconClicked` · `onItemLongPress` · `onEmpty` · `onLoad` — [details](#actions-and-events) | +| View slots | `listItemView` · `subTitleView` · `emptyStateView` · `errorStateView` · `loadingStateView` · `trailingView` · `leadingStateView` · `titleView` — [details](#custom-view-slots) | +| Styling | `callLogsStyle` — the app `ThemeData` does not reach inside a kit widget, so scope colours here. | +| Layout | Fills its parent — place it in an `Expanded` (or a sized box) inside a `Column`, or layout throws an unbounded-height error at render. | +| Prerequisites | `CometChatUIKit` initialised and a user logged in. | +| Full props | [33 props](#functionality) | + + + `CometChatCallLogs` renders a scrollable list of call history with call type indicators (audio/video), call status (incoming/outgoing/missed), timestamps, and pagination support. @@ -31,7 +50,7 @@ CometChatCallLogs( Navigator.push( context, MaterialPageRoute( - builder: (context) => CometChatCallLogDetails(callLog: callLog), + builder: (context) => CallLogDetailsScreen(callLog: callLog), ), ); }, @@ -193,7 +212,7 @@ Fires on internal errors (network failure, SDK exception). ```dart CometChatCallLogs( onError: (e) { - debugPrint("Error: ${e.message}"); + debugPrint("Error: $e"); }, ) ``` @@ -257,23 +276,40 @@ 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 | +| --- | --- | --- | --- | +| `listItemView` | `Widget? Function(CallLog callLog, BuildContext context)?` | `null` | `listItemView` set custom view for each callLog | +| `subTitleView` | `Widget? Function(CallLog callLog, BuildContext context)?` | `null` | `subTitleView` set custom sub title view for each callLog | | `backButton` | `Widget?` | `null` | Custom back button widget | +| `emptyStateView` | `WidgetBuilder?` | `null` | `emptyStateView` returns view fow empty state | +| `errorStateView` | `WidgetBuilder?` | `null` | `errorStateView` returns view fow error state | +| `loadingStateView` | `WidgetBuilder?` | `null` | `loadingStateView` returns view fow loading state | +| `onItemClick` | `Function(CallLog callLog)?` | `null` | `onItemClick` callback triggered on clicking of the callLog item | +| `onError` | `OnError?` | `null` | `onError` callback triggered in case any error happens when fetching callLogs | +| `onBack` | `VoidCallback?` | `null` | `onBack` callback triggered on closing this screen | +| `trailingView` | `Function(BuildContext context, CallLog callLog)?` | `null` | `trailingView` a custom widget for the tail section of the callLog list item | +| `callLogsBuilderProtocol` | `CallLogsBuilderProtocol?` | `null` | `callLogsBuilderProtocol` set custom call Log request builder protocol | | `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 | +| `callLogsStyle` | `CometChatCallLogsStyle?` | `null` | `callLogsStyle` style for every call logs | +| `callLogsRequestBuilder` | `CallLogRequestBuilder?` | `null` | `callLogsRequestBuilder` set custom conversations request builder | +| `outgoingCallConfiguration` | `CometChatOutgoingCallConfiguration?` | `null` | `outgoingCallConfiguration` is a object of `CometChatOutgoingCallConfiguration` which sets the configuration for outgoing call | +| `audioCallIcon` | `Widget?` | `null` | `audioCallIcon` custom audio call icon | +| `videoCallIcon` | `Widget?` | `null` | `videoCallIcon` custom video call icon | +| `incomingCallIcon` | `Widget?` | `null` | `incomingCallIcon` custom incoming call icon | +| `outgoingCallIcon` | `Widget?` | `null` | `outgoingCallIcon` custom outgoing call icon | +| `missedCallIcon` | `Widget?` | `null` | `missedCallIcon` custom missed call icon | +| `hideAppbar` | `bool?` | `false` | Toggle app bar visibility | +| `appBarOptions` | `List?` | `null` | `appBarOptions` list of options to be visible in app bar | +| `onCallLogIconClicked` | `Function(CallLog callLog)?` | `null` | `onCallLogIconClicked` callback triggered on clicking of the callLog icon audio/video icon | +| `onItemLongPress` | `Function(CallLog callLog)?` | `null` | `onItemLongPress` callback triggered on long pressing of the callLog item | +| `addOptions` | `List? Function( CallLog callLog, CallLogsBloc bloc, BuildContext context, )?` | `null` | `addOptions` adds into the current List of actions available on the long press of list item | +| `setOptions` | `List? Function( CallLog callLog, CallLogsBloc bloc, BuildContext context, )?` | `null` | `setOptions` sets List of actions available on the long press of list item | +| `onEmpty` | `OnEmpty?` | `null` | `onEmpty` callback triggered when the list is empty | +| `onLoad` | `OnLoad?` | `null` | `onLoad` callback triggered when list is fetched and load | +| `leadingStateView` | `Widget? Function(BuildContext, CallLog)?` | `null` | `leadingStateView` to set leading view for each callLog | +| `titleView` | `Widget? Function(BuildContext, CallLog)?` | `null` | `titleView` to set title view for each callLog | +| `showBackButton` | `bool?` | `null` | Toggle back button visibility | +| `callLogsBloc` | `CallLogsBloc?` | `null` | `callLogsBloc` Optional external CallLogsBloc instance. | **Example — custom back button:** @@ -408,7 +444,7 @@ Replace the avatar / left section. ```dart CometChatCallLogs( - leadingView: (callLog, context) { + leadingStateView: (context, callLog) { return CircleAvatar( backgroundColor: Color(0xFFEDEAFA), child: Icon(Icons.call, color: Color(0xFF6852D6)), diff --git a/ui-kit/flutter/campaigns.mdx b/ui-kit/flutter/campaigns.mdx index 35a8e190b..a12bf8d98 100644 --- a/ui-kit/flutter/campaigns.mdx +++ b/ui-kit/flutter/campaigns.mdx @@ -3,6 +3,19 @@ title: "Campaigns" description: "Deliver targeted, rich notifications to users via an in-app notification feed powered by the CometChat Cards renderer." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Deliver targeted, rich notifications to users via an in-app notification feed powered by the CometChat Cards renderer. | +| Key classes | `CometChatNotificationFeed` | +| Key methods | `getNotificationFeedItem()` · `markPushNotificationClicked()` · `markPushNotificationDelivered()` | +| Related | [Notification Feed](/ui-kit/flutter/notification-feed) | + + + CometChat Campaigns enables you to send rich, interactive notifications to users through an in-app notification feed. Each notification is rendered as a native card using the **CometChat Cards** library — supporting images, text, buttons, layouts, and interactive actions. diff --git a/ui-kit/flutter/color-resources.mdx b/ui-kit/flutter/color-resources.mdx index b62d81066..f11f6d1dd 100644 --- a/ui-kit/flutter/color-resources.mdx +++ b/ui-kit/flutter/color-resources.mdx @@ -3,6 +3,18 @@ title: "Color Resources" description: "Customize the CometChat Flutter UI Kit theme with palettes for light mode, dark mode, backgrounds, text, borders, icons, and buttons." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Customize the CometChat Flutter UI Kit theme with palettes for light mode, dark mode, backgrounds, text, borders, icons, and buttons. | +| Key classes | `CometChatColorPalette` | +| Related | [Theming In CometChat Flutter UI Kit V6](/ui-kit/flutter/theme-introduction) · [Component Styling](/ui-kit/flutter/component-styling) | + + + ## 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`. diff --git a/ui-kit/flutter/component-styling.mdx b/ui-kit/flutter/component-styling.mdx index 3ab8b94d7..2ba0a02eb 100644 --- a/ui-kit/flutter/component-styling.mdx +++ b/ui-kit/flutter/component-styling.mdx @@ -4,6 +4,19 @@ sidebarTitle: "Component Styling" description: "Style CometChat Flutter UI Kit components with ThemeData extensions, component-level style objects, message bubbles, and call UI." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Style CometChat Flutter UI Kit components with ThemeData extensions, component-level style objects, message bubbles, and call UI. | +| Key classes | `CometChatAvatarStyle` · `CometChatOutgoingMessageBubbleStyle` · `CometChatIncomingMessageBubbleStyle` · `CometChatMessageListStyle` · `CometChatBadgeStyle` · `CometChatCollaborativeBubbleStyle` · `CometChatMessageReceiptStyle` | +| Constraints | A kit widget paints its own surface; the app `ThemeData` does not reach inside it. Pass the widget's style object (`CometChatMessageListStyle`, `CometChatConversationsStyle`, …) to change its background. | +| Related | [Theming In CometChat Flutter UI Kit V6](/ui-kit/flutter/theme-introduction) · [Customizing Message Bubbles](/ui-kit/flutter/message-bubble-styling) | + + + The Flutter UI Kit uses `ThemeExtension` for styling. You can apply styles globally via `ThemeData` or pass style objects directly to components. ## Two Approaches diff --git a/ui-kit/flutter/components-overview.mdx b/ui-kit/flutter/components-overview.mdx index 8ddefb3a4..29d4fedc7 100644 --- a/ui-kit/flutter/components-overview.mdx +++ b/ui-kit/flutter/components-overview.mdx @@ -3,6 +3,18 @@ title: "Overview" description: "Explore CometChat Flutter UI Kit V6 widgets, base widgets, component architecture, actions, filters, styles, and customization." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Explore CometChat Flutter UI Kit V6 widgets, base widgets, component architecture, actions, filters, styles, and customization. | +| Key classes | `CometChatMessageComposer` · `CometChatMessageHeader` · `CometChatMessageList` | +| Related | [Core Features](/ui-kit/flutter/core-features) · [Conversations](/ui-kit/flutter/conversations) | + + + 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 diff --git a/ui-kit/flutter/conversations.mdx b/ui-kit/flutter/conversations.mdx index bda98e431..d17705a7e 100644 --- a/ui-kit/flutter/conversations.mdx +++ b/ui-kit/flutter/conversations.mdx @@ -3,6 +3,25 @@ title: "Conversations" description: "Display CometChat Flutter UI Kit conversations with real-time updates for messages, typing indicators, read receipts, and presence." --- + + +| Field | Value | +| --- | --- | +| Component | `CometChatConversations` | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Display CometChat Flutter UI Kit conversations with real-time updates for messages, typing indicators, read receipts, and presence. | +| Data props | `conversationsRequestBuilder` | +| Actions | `onSelection` · `onBack` · `onItemTap` · `onItemLongPress` · `onLoad` · `onEmpty` · `onError` · `onSearchTap` — [details](#actions-and-events) | +| View slots | `subtitleView` · `listItemView` · `emptyStateView` · `errorStateView` · `trailingView` · `loadingStateView` · `leadingView` · `titleView` — [details](#custom-view-slots) | +| Styling | `conversationsStyle` — the app `ThemeData` does not reach inside a kit widget, so scope colours here. | +| Layout | Fills its parent — place it in an `Expanded` (or a sized box) inside a `Column`, or layout throws an unbounded-height error at render. | +| Stitching | Tap a conversation to open a message view built from `CometChatMessageHeader` + `CometChatMessageList` + `CometChatMessageComposer`. | +| Prerequisites | `CometChatUIKit` initialised and a user logged in. | +| Full props | [71 props](#functionality) | + + + `CometChatConversations` renders a scrollable list of recent conversations with real-time updates for new messages, typing indicators, read receipts, and user presence. --- @@ -169,7 +188,7 @@ Fires on internal errors (network failure, auth issue, SDK exception). ```dart CometChatConversations( onError: (e) { - debugPrint("Error: ${e.message}"); + debugPrint("Error: $e"); }, ) ``` @@ -257,18 +276,77 @@ The component listens to these SDK events internally. No manual setup needed. | Property | Type | Default | Description | | --- | --- | --- | --- | -| `title` | `String?` | `null` | Custom app bar title | +| `conversationsProtocol` | `ConversationsBuilderProtocol?` | `null` | `conversationsProtocol` Request builder protocol to fetch conversations. | +| `subtitleView` | `Widget? Function(BuildContext context, Conversation conversation)?` | `null` | `subtitleView` to set subtitle for each conversation | +| `listItemView` | `Widget Function(Conversation conversation)?` | `null` | `listItemView` set custom view for each conversation | +| `conversationsStyle` | `CometChatConversationsStyle` | `const CometChatConversationsStyle()` | `conversationsStyle` sets style | +| `scrollController` | `ScrollController?` | `null` | `scrollController` to handle scrolling behavior. | +| `backButton` | `Widget?` | `null` | `backButton` back button | | `showBackButton` | `bool` | `false` | Toggle back button | +| `selectionMode` | `SelectionMode?` | `null` | Enable selection mode (`single` or `multiple`) | +| `onSelection` | `Function(List? list)?` | `null` | `onSelection` function will be performed | +| `title` | `String?` | `null` | Custom app bar title | +| `conversationsRequestBuilder` | `ConversationsRequestBuilder?` | `null` | `conversationsRequestBuilder` Request builder to fetch conversations. | +| `hideError` | `bool?` | `null` | `hideError` toggle visibility of error dialog | +| `emptyStateView` | `WidgetBuilder?` | `null` | `emptyStateView` returns view fow empty state | +| `errorStateView` | `WidgetBuilder?` | `null` | `errorStateView` returns view fow error state | +| `listItemStyle` | `ListItemStyle?` | `null` | `listItemStyle` style for every list item | +| `trailingView` | `Widget? Function(Conversation conversation)?` | `null` | `trailingView` to set tailView for each conversation | +| `appBarOptions` | `List?` | `null` | `appBarOptions` list of options to be visible in app bar | +| `usersStatusVisibility` | `bool?` | `true` | Show online/offline status indicator | +| `receiptsVisibility` | `bool?` | `true` | Show message receipts | +| `protectedGroupIcon` | `Widget?` | `null` | `protectedGroupIcon` provides icon in status indicator for protected group | +| `privateGroupIcon` | `Widget?` | `null` | `privateGroupIcon` provides icon in status indicator for private group | +| `readIcon` | `Widget?` | `null` | `readIcon` provides icon in read receipts if a message is read | +| `deliveredIcon` | `Widget?` | `null` | `deliveredIcon` provides icon in read receipts if a message is delivered | +| `sentIcon` | `Widget?` | `null` | `sentIcon` provides icon in read receipts if a message is sent | +| `activateSelection` | `ActivateSelection?` | `null` | `activateSelection` lets the widget know if conversations are allowed to be selected | +| `datePattern` | `String Function(Conversation conversation)?` | `null` | `datePattern` is used to generate customDateString for CometChatDate | +| `typingIndicatorText` | `String?` | `null` | `typingIndicatorText` if not null is visible instead of default text shown when another user is typing | +| `onBack` | `VoidCallback?` | `null` | `onBack` callback triggered on closing this screen | +| `onItemTap` | `Function(Conversation conversation)?` | `null` | `onItemTap` callback triggered on tapping a conversation item | +| `onItemLongPress` | `Function(Conversation conversation)?` | `null` | `onItemLongPress` callback triggered on pressing for long on a conversation item | | `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) | +| `textFormatters` | `List?` | `null` | `textFormatters` is a list of text formatters for message bubbles with type text | +| `mentionAllLabel` | `String?` | `null` | `mentionAllLabel` is a String which is used to set a custom label for @all mentions | +| `mentionAllLabelId` | `String?` | `null` | `mentionAllLabelId` is a String which is used to set a custom label ID for @all mentions | +| `datePadding` | `EdgeInsets?` | `null` | `datePadding` provides padding for `CometChatDate` | +| `dateHeight` | `double?` | `null` | `dateHeight` provides height for `CometChatDate` | +| `dateBackgroundIsTransparent` | `bool?` | `null` | `dateBackgroundIsTransparent` controls the background of `CometChatDate` | +| `dateWidth` | `double?` | `null` | `dateWidth` provides width for `CometChatDate` | +| `badgeWidth` | `double?` | `null` | `badgeWidth` provides width for `CometChatBadge` | +| `badgeHeight` | `double?` | `null` | `badgeHeight` provides height for `CometChatBadge` | +| `badgePadding` | `EdgeInsetsGeometry?` | `null` | `badgePadding` provides padding to the widget | +| `statusIndicatorWidth` | `double?` | `null` | `statusIndicatorWidth` provides width to the status indicator | +| `statusIndicatorHeight` | `double?` | `null` | `statusIndicatorHeight` provides height to the status indicator | +| `statusIndicatorBorderRadius` | `BorderRadiusGeometry?` | `null` | `statusIndicatorBorderRadius` provides borderRadius to the status indicator | +| `avatarMargin` | `EdgeInsetsGeometry?` | `null` | `avatarMargin` provides margin to the widget | +| `avatarPadding` | `EdgeInsetsGeometry?` | `null` | `avatarPadding` provides padding to the widget | +| `avatarWidth` | `double?` | `null` | `avatarWidth` provides width to the widget | +| `avatarHeight` | `double?` | `null` | `avatarHeight` provides height to the widget | | `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 | +| `setOptions` | `List? Function( Conversation conversation, ConversationsBloc bloc, BuildContext context, )?` | `null` | `setOptions` sets List of actions available on the long press of list item | +| `addOptions` | `List? Function( Conversation conversation, ConversationsBloc bloc, BuildContext context, )?` | `null` | `addOptions` adds into the current List of actions available on the long press of list item | +| `loadingStateView` | `WidgetBuilder?` | `null` | `loadingStateView` returns view fow loading state | +| `leadingView` | `Widget? Function(BuildContext context, Conversation conversation)?` | `null` | `leadingView` to set leading view for each conversation | +| `titleView` | `Widget? Function(BuildContext context, Conversation conversation)?` | `null` | `titleView` to set title view for each conversation | +| `controllerTag` | `String?` | `null` | `controllerTag` tag to create from , if this is passed its parent responsibility to close this | +| `onLoad` | `OnLoad?` | `null` | `onLoad` callback triggered when conversations are loaded successfully | +| `onEmpty` | `OnEmpty?` | `null` | `onEmpty` callback triggered when the conversations list is empty | +| `onError` | `OnError?` | `null` | `onError` callback triggered when the component encounters an error | | `customSoundForMessages` | `String?` | `null` | Custom notification sound asset path | -| `selectionMode` | `SelectionMode?` | `null` | Enable selection mode (`single` or `multiple`) | +| `disableSoundForMessages` | `bool?` | `false` | Disable message sounds | +| `submitIcon` | `Widget?` | `null` | `submitIcon` will override the default submit icon | +| `dateTimeFormatterCallback` | `DateTimeFormatterCallback?` | `null` | `dateTimeFormatterCallback` is a callback that can be used to format the date and time | +| `conversationsBloc` | `ConversationsBloc?` | `null` | `conversationsBloc` Optional external ConversationsBloc instance. | +| `routeObserver` | `RouteObserver>?` | `null` | `routeObserver` Optional RouteObserver to detect when this widget is not visible. | +| `hideSearch` | `bool?` | `null` | Toggle search bar | +| `searchReadOnly` | `bool` | `false` | Make search bar read-only (tap opens custom search) | +| `onSearchTap` | `GestureTapCallback?` | `null` | `onSearchTap` callback triggered on search box tap | +| `searchBoxIcon` | `Widget?` | `null` | `searchBoxIcon` search box prefix icon | +| `searchPadding` | `EdgeInsetsGeometry?` | `null` | `searchPadding` provides padding to the search | +| `searchContentPadding` | `EdgeInsetsGeometry?` | `null` | `searchContentPadding` provides padding to the search content | --- @@ -278,13 +356,25 @@ The component listens to these SDK events internally. No manual setup needed. Replace the avatar / left section. + +`Conversation.conversationWith` is an `AppEntity` (a `User` **or** a `Group`), so it has no `.name`. +Narrow the type before reading a display name. The snippets below use this helper: + +```dart +String _displayName(Conversation conversation) { + final entity = conversation.conversationWith; + return entity is User ? entity.name : (entity is Group ? entity.name : ""); +} +``` + + ```dart CometChatConversations( leadingView: (context, conversation) { return CircleAvatar( - child: Text(conversation.conversationWith?.name?[0] ?? ""), + child: Text(_displayName(conversation).isNotEmpty ? _displayName(conversation)[0] : ""), ); }, ) @@ -302,7 +392,7 @@ Replace the name / title text. CometChatConversations( titleView: (context, conversation) { return Text( - conversation.conversationWith?.name ?? "", + _displayName(conversation), style: TextStyle(fontWeight: FontWeight.bold), ); }, @@ -360,8 +450,10 @@ Replace the entire list item row. CometChatConversations( listItemView: (conversation) { return ListTile( - leading: CircleAvatar(child: Text(conversation.conversationWith?.name?[0] ?? "")), - title: Text(conversation.conversationWith?.name ?? ""), + leading: CircleAvatar( + child: Text(_displayName(conversation).isNotEmpty ? _displayName(conversation)[0] : ""), + ), + title: Text(_displayName(conversation)), subtitle: Text("Custom item"), ); }, diff --git a/ui-kit/flutter/core-features.mdx b/ui-kit/flutter/core-features.mdx index 5873829cf..be691486c 100644 --- a/ui-kit/flutter/core-features.mdx +++ b/ui-kit/flutter/core-features.mdx @@ -3,6 +3,18 @@ title: "Core Features" description: "Review CometChat Flutter UI Kit core features for messaging, media sharing, receipts, presence, reactions, threads, and calls." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Review CometChat Flutter UI Kit core features for messaging, media sharing, receipts, presence, reactions, threads, and calls. | +| Key classes | `CometChatMessagePreview` | +| Related | [Overview](/ui-kit/flutter/components-overview) · [Methods](/ui-kit/flutter/methods) | + + + ## 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: diff --git a/ui-kit/flutter/custom-text-formatter-guide.mdx b/ui-kit/flutter/custom-text-formatter-guide.mdx index 60909eebd..ea52e92fa 100644 --- a/ui-kit/flutter/custom-text-formatter-guide.mdx +++ b/ui-kit/flutter/custom-text-formatter-guide.mdx @@ -3,6 +3,18 @@ title: "Custom Text Formatter Guide" description: "Build a CometChat Flutter UI Kit text formatter for hashtags, links, tracked characters, composer suggestions, and message styling." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Build a CometChat Flutter UI Kit text formatter for hashtags, links, tracked characters, composer suggestions, and message styling. | +| Key classes | `CometChatTextFormatter` · `CometChatMentionsFormatter` · `CometChatMessageComposer` · `CometChatMessageList` | +| Related | [Text Formatters](/ui-kit/flutter/customization-text-formatters) · [Mentions Formatter](/ui-kit/flutter/mentions-formatter-guide) | + + + 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 @@ -28,10 +40,24 @@ class HashtagFormatter extends CometChatTextFormatter { HashtagFormatter() : super(trackingCharacter: '#'); + // CometChatTextFormatter is abstract — these five members are required. @override void init() { // Called when the formatter is initialized } + + @override + TextStyle getMessageInputTextStyle(BuildContext context) => + const TextStyle(color: Color(0xFF6851D6)); + + @override + void handlePreMessageSend(BuildContext context, BaseMessage baseMessage) {} + + @override + void onChange(TextEditingController textEditingController, String previousText) {} + + @override + void onScrollToBottom(TextEditingController textEditingController) {} } ``` @@ -97,32 +123,24 @@ Override `buildMessageBubbleSpan` to apply styling to hashtags when they appear ```dart @override -List getFormattedText( +List getAttributedText( 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; + BubbleAlignment? alignment, { + List? existingAttributes, + Function(String)? onTap, + bool forConversation = false, +}) { + // The base implementation matches `pattern` (built from trackingCharacter) and + // returns the styled ranges. Call it, then adjust the result if you need to. + return super.getAttributedText( + text, + context, + alignment, + existingAttributes: existingAttributes, + onTap: onTap, + forConversation: forConversation, + ); } ``` diff --git a/ui-kit/flutter/customization-bloc-data.mdx b/ui-kit/flutter/customization-bloc-data.mdx index cc57a81ff..1651052a1 100644 --- a/ui-kit/flutter/customization-bloc-data.mdx +++ b/ui-kit/flutter/customization-bloc-data.mdx @@ -3,6 +3,18 @@ title: "BLoC & Data" description: "Configure data fetching with RequestBuilders, provide custom BLoC instances, and listen to state changes." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Configure data fetching with RequestBuilders, provide custom BLoC instances, and listen to state changes. | +| Key classes | `CometChatMessageList` · `CometChatConversations` | +| Related | [Message List](/ui-kit/flutter/message-list) · [Conversations](/ui-kit/flutter/conversations) | + + + Each component's BLoC manages data fetching, state transitions, and business logic. You can configure it via RequestBuilders, provide a custom BLoC instance, or extend the default one. ## Configuring Data Fetching with RequestBuilders @@ -137,7 +149,7 @@ CometChatMessageList( debugPrint('No messages found'); }, onError: (e) { - debugPrint('Error: ${e.message}'); + debugPrint('Error: $e'); }, ) ``` diff --git a/ui-kit/flutter/customization-datasource.mdx b/ui-kit/flutter/customization-datasource.mdx index d3ea34c48..cb41c781c 100644 --- a/ui-kit/flutter/customization-datasource.mdx +++ b/ui-kit/flutter/customization-datasource.mdx @@ -3,6 +3,19 @@ title: "MessageTemplateUtils & Data Source" description: "Customize how messages are rendered, what options appear on bubbles, and what formatters are used — all through the central MessageTemplateUtils registry." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Customize how messages are rendered, what options appear on bubbles, and what formatters are used — all through the central MessageTemplateUtils registry. | +| Key classes | `CometChatMessageTemplate` · `CometChatMessageList` · `CometChatEmailFormatter` · `CometChatMentionsFormatter` · `CometChatPhoneNumberFormatter` | +| v5 → v6 | `CometChatUIKit.getDataSource()` no longer exists. v6 exposes `MessageTemplateUtils`; emitting the v5 registration path does not compile. | +| Related | [Message Template](/ui-kit/flutter/message-template) · [Message List](/ui-kit/flutter/message-list) | + + + `MessageTemplateUtils` is the central registry that defines how each message type is rendered, what options appear on message bubbles, and what text formatters are applied. It replaces the `DataSource` / `ChatConfigurator` pattern used in the Android UI Kit. ## How It Works diff --git a/ui-kit/flutter/customization-menu-options.mdx b/ui-kit/flutter/customization-menu-options.mdx index 948ec8896..9116a4996 100644 --- a/ui-kit/flutter/customization-menu-options.mdx +++ b/ui-kit/flutter/customization-menu-options.mdx @@ -3,6 +3,18 @@ title: "Menu & Options" description: "Customize CometChat Flutter UI Kit message options, long-press menus, composer attachments, and template-level actions." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Customize CometChat Flutter UI Kit message options, long-press menus, composer attachments, and template-level actions. | +| Key classes | `CometChatMessageOption` · `CometChatConversations` · `CometChatMessageTemplate` · `CometChatMessageComposer` · `CometChatMessageList` | +| Related | [Message List](/ui-kit/flutter/message-list) · [Message Template](/ui-kit/flutter/message-template) | + + + 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. ## Message Bubble Options @@ -28,7 +40,7 @@ CometChatMessageTemplate( id: 'translate', title: 'Translate', icon: Icon(Icons.translate, size: 24), - onClick: () => translateMessage(messageObject), + onItemClick: (message, state) => translateMessage(message), ), ...defaults, ]; @@ -54,13 +66,13 @@ CometChatMessageTemplate( id: 'bookmark', title: 'Bookmark', icon: Icon(Icons.bookmark_border, size: 24), - onClick: () => bookmarkMessage(messageObject), + onItemClick: (message, state) => bookmarkMessage(message), ), CometChatMessageOption( id: 'share', title: 'Share', icon: Icon(Icons.share, size: 24), - onClick: () => shareMessage(messageObject), + onItemClick: (message, state) => shareMessage(message), ), ]; }, diff --git a/ui-kit/flutter/customization-overview.mdx b/ui-kit/flutter/customization-overview.mdx index ba6d86453..b70d78e14 100644 --- a/ui-kit/flutter/customization-overview.mdx +++ b/ui-kit/flutter/customization-overview.mdx @@ -3,6 +3,18 @@ title: "Customization Overview" description: "Understand the Widget + BLoC + Template architecture and discover all customization entry points in the CometChat Flutter UI Kit." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Understand the Widget + BLoC + Template architecture and discover all customization entry points in the CometChat Flutter UI Kit. | +| Key classes | `CometChatConversations` · `CometChatMessageList` | +| Related | [View Slots](/ui-kit/flutter/customization-view-slots) · [State Views](/ui-kit/flutter/customization-state-views) · [Menu & Options](/ui-kit/flutter/customization-menu-options) | + + + Every component in the Flutter UI Kit follows a layered architecture built on BLoC for state management and declarative widget composition. Understanding these layers is the key to unlocking deep customization without rebuilding components from scratch. ## Architecture diff --git a/ui-kit/flutter/customization-state-views.mdx b/ui-kit/flutter/customization-state-views.mdx index c115e95dd..0056fe22e 100644 --- a/ui-kit/flutter/customization-state-views.mdx +++ b/ui-kit/flutter/customization-state-views.mdx @@ -3,6 +3,18 @@ title: "State Views" description: "Replace CometChat Flutter UI Kit empty, error, loading, and chat greeting state views with custom Flutter widgets." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Replace CometChat Flutter UI Kit empty, error, loading, and chat greeting state views with custom Flutter widgets. | +| Key classes | `CometChatMessageList` · `CometChatConversations` | +| Related | [View Slots](/ui-kit/flutter/customization-view-slots) | + + + Components display state views when the list is empty, an error occurs, or data is loading. You can replace these with custom widgets. ## Replacing State Views @@ -144,7 +156,7 @@ CometChatMessageList( debugPrint('No messages found'); }, onError: (e) { - debugPrint('Error: ${e.message}'); + debugPrint('Error: $e'); }, ) ``` diff --git a/ui-kit/flutter/customization-text-formatters.mdx b/ui-kit/flutter/customization-text-formatters.mdx index dd83ace05..618603ac9 100644 --- a/ui-kit/flutter/customization-text-formatters.mdx +++ b/ui-kit/flutter/customization-text-formatters.mdx @@ -3,6 +3,18 @@ title: "Text Formatters" description: "Create custom text processors for hashtags, mentions, links, or any pattern using the CometChatTextFormatter API." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Create custom text processors for hashtags, mentions, links, or any pattern using the CometChatTextFormatter API. | +| Key classes | `CometChatMentionsFormatter` · `CometChatMessageList` · `CometChatEmailFormatter` · `CometChatMessageComposer` · `CometChatPhoneNumberFormatter` · `CometChatTextFormatter` | +| Related | [Custom Text Formatter Guide](/ui-kit/flutter/custom-text-formatter-guide) · [Mentions Formatter](/ui-kit/flutter/mentions-formatter-guide) · [Shortcut Formatter](/ui-kit/flutter/shortcut-formatter-guide) | + + + Text formatters let you process message text with tracking characters, suggestion lists, and rich text transformations. Use them to add hashtag detection, custom mentions, link previews, or any text pattern processing. ## CometChatTextFormatter diff --git a/ui-kit/flutter/customization-view-slots.mdx b/ui-kit/flutter/customization-view-slots.mdx index b08790615..e3b6d5343 100644 --- a/ui-kit/flutter/customization-view-slots.mdx +++ b/ui-kit/flutter/customization-view-slots.mdx @@ -3,6 +3,18 @@ title: "View Slots" description: "Replace specific regions of a component's UI using builder callbacks without rebuilding the entire component." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Replace specific regions of a component's UI using builder callbacks without rebuilding the entire component. | +| Key classes | `CometChatConversations` · `CometChatMessageList` | +| Related | [State Views](/ui-kit/flutter/customization-state-views) · [Message Template](/ui-kit/flutter/message-template) | + + + View Slots let you swap out specific parts of a component — the avatar area, title, subtitle, trailing section, or the entire row — while keeping the rest of the component's behavior intact. ## The Builder Callback Pattern @@ -55,7 +67,8 @@ Each `CometChatMessageTemplate` has its own view slots for the bubble structure: ```dart CometChatConversations( leadingView: (context, conversation) { - final name = conversation.conversationWith?.name ?? ''; + final entity = conversation.conversationWith; + final name = entity is User ? entity.name : (entity is Group ? entity.name : ''); return CircleAvatar( backgroundColor: Color(0xFF6851D6), child: Text( diff --git a/ui-kit/flutter/events.mdx b/ui-kit/flutter/events.mdx index aafde12a6..c4957cd25 100644 --- a/ui-kit/flutter/events.mdx +++ b/ui-kit/flutter/events.mdx @@ -3,6 +3,20 @@ title: "Events" description: "Handle CometChat Flutter UI Kit events for users, groups, messages, conversations, calls, and UI-level interactions." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Handle CometChat Flutter UI Kit events for users, groups, messages, conversations, calls, and UI-level interactions. | +| Key classes | `CometChatMessageEvents` · `CometChatCallEvents` · `CometChatConversationEvents` · `CometChatGroupEvents` · `CometChatUIEvents` · `CometChatUserEvents` · `CometChatCallEventListener` | +| Key methods | `sendCustomMessage()` | +| Emitting | A message sent with `CometChat.send*Message` instead of through `CometChatMessageComposer` must emit `CometChatMessageEvents.ccMessageSent(...)` in `onSuccess`, or an already-mounted `CometChatMessageList` never shows it. | +| Related | [Methods](/ui-kit/flutter/methods) · [Core Features](/ui-kit/flutter/core-features) | + + + ## 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. @@ -111,12 +125,24 @@ class _YourScreenState extends State with CometChatGroupEventListene ### Message Events -`CometChatMessageEvents` emits events related to messages. +`CometChatMessageEvents` emit events when the logged-in user executes actions on a message. + +1. `ccMessageSent`: Triggered when the logged-in user sends a message. +2. `ccMessageEdited`: Triggered when the logged-in user edits a message. +3. `ccMessageDeleted`: Triggered when the logged-in user deletes a message. +4. `ccMessageRead`: Triggered when the logged-in user reads a message. +5. `ccLiveReaction`: Triggered when the logged-in user sends a live reaction. +6. `ccMessageForwarded`: Triggered when the logged-in user forwards a message. +7. `ccReplyToMessage`: Triggered when the logged-in user replies to a message. +8. `onFormMessageReceived`: Triggered when a [form message](/sdk/flutter/interactive-form-message) is received. +9. `onSchedulerMessageReceived`: Triggered when a [scheduler message](/sdk/flutter/interactive-scheduler-message) is received. +10. `onCustomInteractiveMessageReceived`: Triggered when a custom interactive message is received. ```dart import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; +import 'package:flutter/material.dart'; class _YourScreenState extends State with CometChatMessageEventListener { @override @@ -131,6 +157,16 @@ class _YourScreenState extends State with CometChatMessageEventListe CometChatMessageEvents.removeMessagesListener("listenerId"); } + @override + void ccMessageRead(BaseMessage message) { + // Handle message read + } + + @override + void ccReplyToMessage(BaseMessage message) { + // Handle reply + } + @override Widget build(BuildContext context) { return const Placeholder(); @@ -140,6 +176,44 @@ class _YourScreenState extends State with CometChatMessageEventListe +#### Emitting `ccMessageSent` for messages you send yourself + +`CometChatMessageComposer` emits `ccMessageSent` for you. If you send a message with the SDK directly +— `CometChat.sendCustomMessage`, `sendTextMessage`, `sendMediaMessage` — you must emit it yourself, or +an already-mounted `CometChatMessageList` will not show that message. + +CometChat does not deliver your own sends back to you over the real-time listener, so a list that is +already on screen has no way to learn about them and only picks them up on its next fetch. That hides +the problem whenever a chat screen is opened fresh each time, and surfaces it as soon as a list stays +mounted — for example a chat panel kept alongside other UI. + + + +```dart +import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; +// `ccMessageSent` takes the `MessageStatus` declared in the UI Kit's core constants. +// The package barrel exports a different enum of the same name, so import this one +// under a prefix. The same applies to `ccMessageEdited` (`MessageEditStatus`), +// `ccMessageDeleted` (`EventStatus`) and `ccMessageForwarded` — whether you are +// emitting these events or overriding them in a listener. +import 'package:cometchat_chat_uikit/shared_ui/src/clean_architecture/core/constants/enums.dart' + as core_enums; + +Future sendGameEvent(CustomMessage message) async { + await CometChat.sendCustomMessage( + message, + onSuccess: (sent) { + CometChatMessageEvents.ccMessageSent(sent, core_enums.MessageStatus.sent); + }, + onError: (e) { + // Handle send failure + }, + ); +} +``` + + + *** ### Conversation Events @@ -147,6 +221,7 @@ class _YourScreenState extends State with CometChatMessageEventListe `CometChatConversationEvents` emits events related to conversations. 1. `ccConversationDeleted`: Triggered when a conversation is deleted. +2. `ccUpdateConversation`: Triggered when a conversation is updated — for example when it is marked as unread. @@ -171,6 +246,62 @@ class _YourScreenState extends State with CometChatConversationEvent // Handle conversation deleted } + @override + void ccUpdateConversation(Conversation conversation) { + // Handle conversation updated + } + + @override + Widget build(BuildContext context) { + return const Placeholder(); + } +} +``` + + + +*** + +### Call Events + +`CometChatCallEvents` emit events when the logged-in user acts on a call. They are UI-Kit +events — distinct from the Calls SDK's own listeners — and fire for calls started or +answered through the kit's calling widgets. + +1. `ccOutgoingCall`: Triggered when the logged-in user initiates an outgoing call. +2. `ccCallAccepted`: Triggered when the logged-in user accepts an incoming call. +3. `ccCallRejected`: Triggered when the logged-in user rejects an incoming call. +4. `ccCallEnded`: Triggered when a call the logged-in user was on has ended. + + + +```dart +import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; +import 'package:flutter/material.dart'; + +class _YourScreenState extends State with CometChatCallEventListener { + @override + void initState() { + super.initState(); + CometChatCallEvents.addCallEventsListener("listenerId", this); + } + + @override + void dispose() { + super.dispose(); + CometChatCallEvents.removeCallEventsListener("listenerId"); + } + + @override + void ccOutgoingCall(Call call) { + // Handle outgoing call initiated + } + + @override + void ccCallEnded(Call call) { + // Handle call ended + } + @override Widget build(BuildContext context) { return const Placeholder(); @@ -197,6 +328,9 @@ class _YourScreenState extends State with CometChatConversationEvent | `ccComposeMessage(text, status)` | Triggered when composing a message with a specific text and status. | | `onAiFeatureTapped(user, group)` | Triggered when an AI feature is tapped for a specific user or group. | | `ccCardActionClicked(message, action)` | Triggered when a user taps an interactive element (button/link) inside a [card message](/sdk/flutter/send-message#card-message) (`CardMessage`) or an AI agent card (`AIAssistantMessage`). `action` is typed `dynamic`; cast it to `CometChatCardActionEvent`. | +| `requestComposerFocus(id)` | Ask `CometChatMessageComposer` to focus its text field, which opens the OS keyboard. | +| `lockBottomPadding(id, height)` | Hold the composer's bottom padding at a fixed `height` instead of tracking the keyboard — use it while your own panel occupies that space. | +| `unlockBottomPadding(id)` | Release a previous `lockBottomPadding` and return to normal keyboard-based padding. | diff --git a/ui-kit/flutter/extensions.mdx b/ui-kit/flutter/extensions.mdx index 8beff4881..87476c804 100644 --- a/ui-kit/flutter/extensions.mdx +++ b/ui-kit/flutter/extensions.mdx @@ -3,6 +3,18 @@ title: "Extensions" description: "Use CometChat Flutter UI Kit extensions for stickers, polls, collaborative tools, reactions, smart replies, and link previews." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Use CometChat Flutter UI Kit extensions for stickers, polls, collaborative tools, reactions, smart replies, and link previews. | +| Key classes | `CometChatCollaborativeBubble` · `CometChatCollaborativeWebView` · `CometChatCreatePoll` · `CometChatLinkPreviewBubble` · `CometChatPollsBubble` · `CometChatStickerBubble` · `CometChatStickerKeyboard` | +| Related | [Core Features](/ui-kit/flutter/core-features) | + + + ## 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. diff --git a/ui-kit/flutter/flutter-conversation.mdx b/ui-kit/flutter/flutter-conversation.mdx index 7fd62753c..965ac766f 100644 --- a/ui-kit/flutter/flutter-conversation.mdx +++ b/ui-kit/flutter/flutter-conversation.mdx @@ -4,6 +4,20 @@ 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." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Build a two-panel CometChat Flutter UI Kit layout with a conversation list, active message view, headers, lists, and composer. | +| Key widgets | `CometChatUIKit` · `CometChatConversations` · `CometChatMessageComposer` · `CometChatMessageHeader` · `CometChatMessageList` · `CometChatSubscriptionType` | +| Key methods | `init()` · `login()` | +| Prerequisites | `CometChatUIKit` initialised and a user logged in. | +| Related | [Conversations](/ui-kit/flutter/conversations) · [Message List](/ui-kit/flutter/message-list) · [Message Composer](/ui-kit/flutter/message-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. ## Integration diff --git a/ui-kit/flutter/flutter-one-to-one-chat.mdx b/ui-kit/flutter/flutter-one-to-one-chat.mdx index ee8f8d846..c1097a785 100644 --- a/ui-kit/flutter/flutter-one-to-one-chat.mdx +++ b/ui-kit/flutter/flutter-one-to-one-chat.mdx @@ -4,6 +4,20 @@ 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` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Build one-to-one and group chat screens in CometChat Flutter UI Kit with message headers, message lists, composers, and user lookup. | +| Key widgets | `CometChatUIKit` · `CometChatMessageComposer` · `CometChatMessageHeader` · `CometChatMessageList` · `CometChatSubscriptionType` | +| Key methods | `getUser()` · `init()` · `login()` | +| Prerequisites | `CometChatUIKit` initialised and a user logged in. | +| Related | [Message Header](/ui-kit/flutter/message-header) · [Message List](/ui-kit/flutter/message-list) · [Message Composer](/ui-kit/flutter/message-composer) | + + + The One-to-One Chat feature provides a streamlined direct messaging interface, ideal for support chats, dating apps, and private messaging platforms. *** diff --git a/ui-kit/flutter/flutter-tab-based-chat.mdx b/ui-kit/flutter/flutter-tab-based-chat.mdx index e8379fb5f..d61059539 100644 --- a/ui-kit/flutter/flutter-tab-based-chat.mdx +++ b/ui-kit/flutter/flutter-tab-based-chat.mdx @@ -4,6 +4,20 @@ 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." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Build a tab-based CometChat Flutter UI Kit chat UI with conversations, users, groups, sidebar navigation, and message view. | +| Key widgets | `CometChatUIKit` · `CometChatConversations` · `CometChatGroups` · `CometChatMessageComposer` · `CometChatMessageHeader` · `CometChatMessageList` · `CometChatSubscriptionType` | +| Key methods | `init()` · `login()` | +| Prerequisites | `CometChatUIKit` initialised and a user logged in. | +| Related | [Conversations](/ui-kit/flutter/conversations) · [Users](/ui-kit/flutter/users) · [Groups](/ui-kit/flutter/groups) | + + + 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. *** diff --git a/ui-kit/flutter/getting-started.mdx b/ui-kit/flutter/getting-started.mdx index 42fd68740..fe681f1a3 100644 --- a/ui-kit/flutter/getting-started.mdx +++ b/ui-kit/flutter/getting-started.mdx @@ -4,6 +4,19 @@ sidebarTitle: "Getting Started" description: "Set up CometChat Flutter UI Kit V6 with app credentials, package installation, initialization, users, groups, messages, and calls." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Set up CometChat Flutter UI Kit V6 with app credentials, package installation, initialization, users, groups, messages, and calls. | +| Key classes | `CometChatUIKit` · `CometChatSubscriptionType` · `CometChatMessageComposer` · `CometChatMessageHeader` · `CometChatMessageList` | +| Key methods | `init()` · `login()` | +| Related | [CometChat UI Kit For Flutter (V6)](/ui-kit/flutter/overview) · [Overview](/ui-kit/flutter/components-overview) · [Core Features](/ui-kit/flutter/core-features) | + + + 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. diff --git a/ui-kit/flutter/group-members.mdx b/ui-kit/flutter/group-members.mdx index 2dc19f7e9..ed0af7fc0 100644 --- a/ui-kit/flutter/group-members.mdx +++ b/ui-kit/flutter/group-members.mdx @@ -3,6 +3,24 @@ title: "Group Members" description: "Scrollable list of members in a group with scope indicators, search, and member management actions." --- + + +| Field | Value | +| --- | --- | +| Component | `CometChatGroupMembers` | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Scrollable list of members in a group with scope indicators, search, and member management actions. | +| Data props | `groupMembersRequestBuilder` · `group` · `searchKeyword` | +| Actions | `onSelection` · `onError` · `onBack` · `onItemTap` · `onItemLongPress` · `onLoad` · `onEmpty` — [details](#actions-and-events) | +| View slots | `subtitleView` · `listItemView` · `loadingStateView` · `emptyStateView` · `errorStateView` · `trailingView` · `leadingView` · `titleView` — [details](#custom-view-slots) | +| Styling | `style` — the app `ThemeData` does not reach inside a kit widget, so scope colours here. | +| Layout | Fills its parent — place it in an `Expanded` (or a sized box) inside a `Column`, or layout throws an unbounded-height error at render. | +| Prerequisites | `CometChatUIKit` initialised and a user logged in. | +| Full props | [45 props](#functionality) | + + + `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). @@ -157,7 +175,7 @@ Fires when members are selected/deselected in multi-select mode. CometChatGroupMembers( group: group, selectionMode: SelectionMode.multiple, - onSelection: (selectedMembers, context) { + onSelection: (selectedMembers) { // Handle selected members }, ) @@ -175,7 +193,7 @@ Fires on internal errors. CometChatGroupMembers( group: group, onError: (e) { - debugPrint("Error: ${e.message}"); + debugPrint("Error: $e"); }, ) ``` @@ -272,17 +290,52 @@ class _YourScreenState extends State with CometChatGroupEventListene ## Functionality | Property | Type | Default | Description | -|---|---|---|---| -| `group` | `Group` | **required** | The group whose members to display | -| `title` | `String?` | `null` | Custom app bar title | +| --- | --- | --- | --- | +| `groupMembersProtocol` | `GroupMembersBuilderProtocol?` | `null` | Supplies the group-member list yourself instead of letting the widget fetch it. | +| `subtitleView` | `Widget? Function(BuildContext context, GroupMember groupMember)?` | `null` | Replaces the subtitle slot of each group member row. | +| `hideSeparator` | `bool?` | `null` | `hideSeparator` toggle separator visibility | +| `listItemView` | `Widget Function(GroupMember groupMember)?` | `null` | Replaces the entire group member row. Overrides the leading, title, subtitle and trailing slots. | +| `style` | `CometChatGroupMembersStyle?` | `null` | Style object for this widget. The app `ThemeData` does not reach inside a kit widget, so scope colours here. | +| `controller` | `ScrollController?` | `null` | Scroll controller for the list. | +| `searchPlaceholder` | `String?` | `null` | `searchPlaceholder` placeholder text of search input | +| `backButton` | `Widget?` | `null` | `backButton` back button | | `showBackButton` | `bool` | `true` | Toggle back button | -| `hideAppbar` | `bool?` | `false` | Toggle app bar visibility | +| `searchBoxIcon` | `Widget?` | `null` | `searchBoxIcon` search box prefix icon | | `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 | +| `onSelection` | `Function(List?)?` | `null` | Called with the selected group members when selection mode is confirmed. | +| `stateCallBack` | `Function(CometChatGroupMembersController controller)?` | `null` | Legacy stateCallBack — kept for backward compatibility. | +| `groupMembersRequestBuilder` | `GroupMembersRequestBuilder?` | `null` | Request builder used to fetch the group members. | +| `hideError` | `bool?` | `null` | `hideError` toggle visibility of error dialog | +| `loadingStateView` | `WidgetBuilder?` | `null` | `loadingStateView` is a parameter used to show the loading state view in case of loading | +| `emptyStateView` | `WidgetBuilder?` | `null` | `emptyStateView` returns view fow empty state | +| `errorStateView` | `WidgetBuilder?` | `null` | `errorStateView` is a parameter used to show the error state view in case of any error | +| `appBarOptions` | `List?` | `null` | `appBarOptions` list of options to be visible in app bar | +| `options` | `List? Function( Group group, GroupMember member, CometChatGroupMembersController controller, BuildContext context, )?` | `null` | Legacy options callback — kept for backward compatibility. | +| `group` | `Group` | required | The group whose members to display | +| `trailingView` | `Function(BuildContext context, GroupMember groupMember)?` | `null` | Replaces the trailing slot of each group member row. | +| `selectIcon` | `Widget?` | `null` | Icon shown on a row while selection mode is active. | +| `submitIcon` | `Widget?` | `null` | `submitIcon` will override the default submit icon | +| `onError` | `OnError?` | `null` | Called when the list fails to load. | +| `onBack` | `VoidCallback?` | `null` | `onBack` callback triggered on closing a screen | +| `onItemTap` | `Function(GroupMember groupMember)?` | `null` | Called when a group member row is tapped. | +| `onItemLongPress` | `Function(GroupMember groupMember)?` | `null` | Called when a group member row is long-pressed. | +| `activateSelection` | `ActivateSelection?` | `null` | `activateSelection` lets the widget know if groups are allowed to be selected | +| `height` | `double?` | `null` | `height` provides height to the widget | +| `width` | `double?` | `null` | `width` provides width to the widget | +| `controllerTag` | `String?` | `null` | Group tag to create from, if this is passed its parent responsibility to close this @deprecated Use groupsBloc parameter for external bloc injection | +| `hideAppbar` | `bool?` | `null` | Toggle app bar visibility | +| `searchKeyword` | `String?` | `null` | `searchKeyword` Used to set searchKeyword to fetch initial list with | +| `onLoad` | `OnLoad?` | `null` | Called once the first page of group members has loaded. | +| `onEmpty` | `OnEmpty?` | `null` | Called when the group member list resolves with no results. | +| `setOptions` | `List? Function( Group group, GroupMember groupMember, CometChatGroupMembersController controller, BuildContext context, )?` | `null` | Replaces the actions offered on a group member row. | +| `addOptions` | `List? Function( Group group, GroupMember groupMember, CometChatGroupMembersController controller, BuildContext context, )?` | `null` | Appends to the actions offered on a group member row. | +| `leadingView` | `Widget? Function(BuildContext context, GroupMember groupMember)?` | `null` | Replaces the leading slot of each group member row — the avatar area by default. | +| `titleView` | `Widget? Function(BuildContext context, GroupMember groupMember)?` | `null` | Replaces the title slot of each group member row. | +| `hideBanMemberOption` | `bool?` | `null` | Hide ban option in action menu | +| `hideKickMemberOption` | `bool?` | `null` | Hide kick option in action menu | +| `hideScopeChangeOption` | `bool?` | `null` | Hide scope change option | +| `usersStatusVisibility` | `bool?` | `true` | Show online/offline status | --- @@ -448,7 +501,9 @@ Provide a custom `GroupMembersBloc`: ```dart CometChatGroupMembers( group: group, - groupMembersBloc: CustomGroupMembersBloc(), + // Supply your own data source with groupMembersProtocol / groupMembersRequestBuilder, + // and observe list state with stateCallBack — there is no `groupMembersBloc` parameter. + groupMembersRequestBuilder: GroupMembersRequestBuilder(group.guid), ) ``` @@ -495,7 +550,7 @@ Member actions (kick, ban, scope change) are permission-aware based on the logge ```dart CometChatGroupMembers( group: group, - groupMembersStyle: CometChatGroupMembersStyle( + style: CometChatGroupMembersStyle( avatarStyle: CometChatAvatarStyle( borderRadius: BorderRadius.circular(8), backgroundColor: Color(0xFFFBAA75), diff --git a/ui-kit/flutter/groups.mdx b/ui-kit/flutter/groups.mdx index 809dc761f..52e7239c9 100644 --- a/ui-kit/flutter/groups.mdx +++ b/ui-kit/flutter/groups.mdx @@ -3,6 +3,24 @@ title: "Groups" description: "Scrollable list of all available groups with search, avatars, group type indicators, and member counts." --- + + +| Field | Value | +| --- | --- | +| Component | `CometChatGroups` | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Scrollable list of all available groups with search, avatars, group type indicators, and member counts. | +| Data props | `groupsRequestBuilder` · `searchKeyword` | +| Actions | `onSelection` · `onBack` · `onItemTap` · `onItemLongPress` · `onError` · `onLoad` · `onEmpty` — [details](#actions-and-events) | +| View slots | `subtitleView` · `listItemView` · `loadingStateView` · `emptyStateView` · `errorStateView` · `appBarOptions` · `titleView` · `leadingView` · +1 more — [details](#custom-view-slots) | +| Styling | `groupsStyle` — the app `ThemeData` does not reach inside a kit widget, so scope colours here. | +| Layout | Fills its parent — place it in an `Expanded` (or a sized box) inside a `Column`, or layout throws an unbounded-height error at render. | +| Prerequisites | `CometChatUIKit` initialised and a user logged in. | +| Full props | [41 props](#functionality) | + + + `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. @@ -151,7 +169,7 @@ Fires when groups are selected/deselected in multi-select mode. ```dart CometChatGroups( selectionMode: SelectionMode.multiple, - onSelection: (selectedGroups, context) { + onSelection: (selectedGroups) { // Handle selected groups }, ) @@ -168,7 +186,7 @@ Fires on internal errors. ```dart CometChatGroups( onError: (e) { - debugPrint("Error: ${e.message}"); + debugPrint("Error: $e"); }, ) ``` @@ -227,13 +245,48 @@ The component listens to these SDK events internally. No manual setup needed. ## Functionality | Property | Type | Default | Description | -|---|---|---|---| -| `title` | `String?` | `null` | Custom app bar title | +| --- | --- | --- | --- | +| `groupsBloc` | `GroupsBloc?` | `null` | `groupsBloc` Optional external GroupsBloc instance. | +| `groupsProtocol` | `GroupsBuilderProtocol?` | `null` | `groupsProtocol` set custom groups request builder protocol @deprecated Use groupsBloc for custom implementations | +| `subtitleView` | `Widget? Function(BuildContext context, Group group)?` | `null` | `subtitleView` to set subtitle for each group | +| `listItemView` | `Widget Function(Group group)?` | `null` | `listItemView` set custom view for each group | +| `groupsStyle` | `CometChatGroupsStyle?` | `null` | `groupsStyle` sets style | +| `scrollController` | `ScrollController?` | `null` | `scrollController` sets controller for the list | +| `searchPlaceholder` | `String?` | `null` | Search placeholder text | +| `backButton` | `Widget?` | `null` | `backButton` back button | | `showBackButton` | `bool` | `true` | Toggle back button | -| `hideAppbar` | `bool?` | `false` | Toggle app bar visibility | +| `searchBoxIcon` | `Widget?` | `null` | `searchBoxIcon` search icon | | `hideSearch` | `bool` | `false` | Toggle search bar | | `selectionMode` | `SelectionMode?` | `null` | Enable selection mode (`single` or `multiple`) | -| `searchPlaceholder` | `String?` | `null` | Search placeholder text | +| `onSelection` | `Function(List?)?` | `null` | `onSelection` function will be performed | +| `title` | `String?` | `null` | Custom app bar title | +| `groupsRequestBuilder` | `GroupsRequestBuilder?` | `null` | `groupsRequestBuilder` custom request builder @deprecated Use groupsBloc for custom implementations | +| `hideError` | `bool?` | `null` | `hideError` toggle visibility of error dialog | +| `loadingStateView` | `WidgetBuilder?` | `null` | `loadingStateView` returns view for loading state | +| `emptyStateView` | `WidgetBuilder?` | `null` | `emptyStateView` returns view for empty state | +| `errorStateView` | `WidgetBuilder?` | `null` | `errorStateView` returns view for error state behind the dialog | +| `appBarOptions` | `List Function(BuildContext context)?` | `null` | `appBarOptions` list of options to be visible in app bar | +| `passwordGroupIcon` | `Widget?` | `null` | `passwordGroupIcon` sets icon in status indicator for password group | +| `privateGroupIcon` | `Widget?` | `null` | `privateGroupIcon` sets icon in status indicator for private group | +| `activateSelection` | `ActivateSelection?` | `null` | `activateSelection` lets the widget know if groups are allowed to be selected | +| `onBack` | `VoidCallback?` | `null` | `onBack` callback triggered on closing this screen | +| `onItemTap` | `Function(BuildContext context, Group group)?` | `null` | `onItemTap` callback triggered on tapping a group item | +| `onItemLongPress` | `Function(BuildContext context, Group group)?` | `null` | `onItemLongPress` callback triggered on pressing for long on a group item | +| `onError` | `OnError?` | `null` | `onError` callback triggered on error | +| `submitIcon` | `Widget?` | `null` | `submitIcon` will override the default submit icon | +| `hideAppbar` | `bool?` | `false` | Toggle app bar visibility | +| `controllerTag` | `String?` | `null` | Group tag to create from, if this is passed its parent responsibility to close this @deprecated Use groupsBloc parameter for external bloc injection | +| `height` | `double?` | `null` | `height` provides height to the widget | +| `width` | `double?` | `null` | `width` provides width to the widget | +| `searchKeyword` | `String?` | `null` | `searchKeyword` Used to set searchKeyword to fetch initial list with | +| `onLoad` | `OnLoad?` | `null` | `onLoad` callback triggered when list is fetched and load | +| `onEmpty` | `OnEmpty?` | `null` | `onEmpty` callback triggered when the list is empty | +| `groupTypeVisibility` | `bool?` | `true` | `groupTypeVisibility` Hide the group type icon which is visible on the group icon. | +| `setOptions` | `List? Function( Group group, GroupsBloc bloc, BuildContext context, )?` | `null` | `setOptions` sets List of actions available on the long press of list item | +| `addOptions` | `List? Function( Group group, GroupsBloc bloc, BuildContext context, )?` | `null` | `addOptions` adds into the current List of actions available on the long press of list item | +| `titleView` | `Widget? Function(BuildContext context, Group group)?` | `null` | `titleView` to set title view for each group | +| `leadingView` | `Widget? Function(BuildContext context, Group group)?` | `null` | `leadingView` to set leading view for each group | +| `trailingView` | `Widget? Function(BuildContext context, Group group)?` | `null` | `trailingView` to set tailView for each group | --- diff --git a/ui-kit/flutter/guide-block-unblock-user.mdx b/ui-kit/flutter/guide-block-unblock-user.mdx index e461b73a0..15ed6da8e 100644 --- a/ui-kit/flutter/guide-block-unblock-user.mdx +++ b/ui-kit/flutter/guide-block-unblock-user.mdx @@ -1,10 +1,23 @@ --- title: "Implementing Block/Unblock User in Flutter with CometChat UIKit" sidebarTitle: "Block/Unblock User" -description: "Block and unblock users in CometChat Flutter UI Kit with blockUsers and unblockUsers methods for privacy and moderation." +description: "Block and unblock users in CometChat Flutter UI Kit with blockUser and unblockUser 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` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Block and unblock users in CometChat Flutter UI Kit with blockUser and unblockUser methods for privacy and moderation. | +| Key methods | `blockUser()` · `unblockUser()` | +| Prerequisites | `CometChatUIKit` initialised and a user logged in. | +| Related | [Users](/ui-kit/flutter/users) | + + + +Enable users to block and unblock other users in your Flutter chat app using CometChat's `blockUser` and `unblockUser` methods. ## Overview @@ -19,8 +32,8 @@ The Block User feature lets one user prevent another from sending messages or in | Component | Role | |:---|:---| -| `CometChatUIKit.blockUsers([...])` | SDK method to block specified user(s) | -| `CometChatUIKit.unblockUsers([...])` | SDK method to unblock specified user(s) | +| `CometChat.blockUser([...])` | SDK method to block specified user(s) | +| `CometChat.unblockUser([...])` | SDK method to unblock specified user(s) | | `ElevatedButton` | Flutter widget for block/unblock actions | ## Integration Steps @@ -33,7 +46,7 @@ The Block User feature lets one user prevent another from sending messages or in ElevatedButton( onPressed: () async { try { - await CometChatUIKit.blockUsers([user.uid]); + await CometChat.blockUser([user.uid]); ScaffoldMessenger.of(context).showSnackBar( SnackBar(content: Text('${user.name} has been blocked')), ); @@ -57,7 +70,7 @@ ElevatedButton( ElevatedButton( onPressed: () async { try { - await CometChatUIKit.unblockUsers([user.uid]); + await CometChat.unblockUser([user.uid]); ScaffoldMessenger.of(context).showSnackBar( SnackBar(content: Text('${user.name} has been unblocked')), ); @@ -83,5 +96,5 @@ ElevatedButton( | Feature | Method | |:---|:---| -| Block User | `CometChatUIKit.blockUsers([...])` | -| Unblock User | `CometChatUIKit.unblockUsers([...])` | +| Block User | `CometChat.blockUser([...])` | +| Unblock User | `CometChat.unblockUser([...])` | diff --git a/ui-kit/flutter/guide-call-log-details.mdx b/ui-kit/flutter/guide-call-log-details.mdx index 9d2ba588d..472823456 100644 --- a/ui-kit/flutter/guide-call-log-details.mdx +++ b/ui-kit/flutter/guide-call-log-details.mdx @@ -4,6 +4,19 @@ sidebarTitle: "Call Log Details" description: "Show CometChat Flutter UI Kit call log details with participants, duration, timestamps, recordings, and call metadata." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_calls_uikit.dart';` | +| Purpose | Show CometChat Flutter UI Kit call log details with participants, duration, timestamps, recordings, and call metadata. | +| Key widgets | `CometChatCallLogs` | +| Prerequisites | `CometChatUIKit` initialised and a user logged in. | +| Related | [Call Logs](/ui-kit/flutter/call-logs) · [Call](/ui-kit/flutter/call-features) | + + + Provide a post-call details screen with metadata, participants, history, and recordings using CometChat V6 UIKit. ## Overview diff --git a/ui-kit/flutter/guide-group-chat.mdx b/ui-kit/flutter/guide-group-chat.mdx index e1be7e0cc..6b160d9d2 100644 --- a/ui-kit/flutter/guide-group-chat.mdx +++ b/ui-kit/flutter/guide-group-chat.mdx @@ -4,6 +4,19 @@ sidebarTitle: "Group Chat" description: "Build CometChat Flutter UI Kit group chats with group lists, members, headers, message lists, and composers." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Build CometChat Flutter UI Kit group chats with group lists, members, headers, message lists, and composers. | +| Key widgets | `CometChatGroupMembers` · `CometChatGroups` · `CometChatMessageComposer` · `CometChatMessageHeader` · `CometChatMessageList` | +| Prerequisites | `CometChatUIKit` initialised and a user logged in. | +| Related | [Groups](/ui-kit/flutter/groups) · [Group Members](/ui-kit/flutter/group-members) · [Message List](/ui-kit/flutter/message-list) | + + + Build group chat functionality in your Flutter app using CometChat V6 UIKit. Create/join groups, view members, manage roles, and moderate participation. ## Overview @@ -28,7 +41,7 @@ V6 provides `CometChatGroups` and `CometChatGroupMembers` widgets powered by BLo ```dart CometChatGroups( - onItemTap: (group) { + onItemTap: (context, group) { Navigator.push( context, MaterialPageRoute( diff --git a/ui-kit/flutter/guide-message-agentic-flow.mdx b/ui-kit/flutter/guide-message-agentic-flow.mdx index 3024663e2..8d4fed003 100644 --- a/ui-kit/flutter/guide-message-agentic-flow.mdx +++ b/ui-kit/flutter/guide-message-agentic-flow.mdx @@ -4,6 +4,19 @@ sidebarTitle: "Message Agentic Flow" description: "Implement CometChat Flutter UI Kit agentic message flows with AI-powered message handling and custom AI message rendering." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Implement CometChat Flutter UI Kit agentic message flows with AI-powered message handling and custom AI message rendering. | +| Key widgets | `CometChatAIAssistantChatHistory` · `CometChatAIAssistantChatHistoryStyle` · `CometChatMessageList` · `CometChatMessageTemplate` | +| Prerequisites | `CometChatUIKit` initialised and a user logged in. | +| Related | [Message List](/ui-kit/flutter/message-list) · [Message Template](/ui-kit/flutter/message-template) | + + + 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 diff --git a/ui-kit/flutter/guide-message-privately.mdx b/ui-kit/flutter/guide-message-privately.mdx index 3dab740a7..b0e71ef1c 100644 --- a/ui-kit/flutter/guide-message-privately.mdx +++ b/ui-kit/flutter/guide-message-privately.mdx @@ -4,6 +4,19 @@ sidebarTitle: "Message Privately" description: "Start private one-to-one chats in CometChat Flutter UI Kit from a profile, member list, search result, or custom user context." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Start private one-to-one chats in CometChat Flutter UI Kit from a profile, member list, search result, or custom user context. | +| Key widgets | `CometChatGroupMembers` · `CometChatMessageComposer` · `CometChatMessageHeader` · `CometChatMessageList` | +| Prerequisites | `CometChatUIKit` initialised and a user logged in. | +| Related | [Message List](/ui-kit/flutter/message-list) · [Conversations](/ui-kit/flutter/conversations) | + + + Start a direct 1:1 chat from a profile or list in your Flutter app using CometChat V6 UIKit. ## Overview diff --git a/ui-kit/flutter/guide-new-chat.mdx b/ui-kit/flutter/guide-new-chat.mdx index d828b31c3..f0eeafb0c 100644 --- a/ui-kit/flutter/guide-new-chat.mdx +++ b/ui-kit/flutter/guide-new-chat.mdx @@ -4,6 +4,19 @@ sidebarTitle: "New Chat" description: "Create a CometChat Flutter UI Kit new chat screen for discovering users and groups and opening one-to-one or group conversations." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Create a CometChat Flutter UI Kit new chat screen for discovering users and groups and opening one-to-one or group conversations. | +| Key widgets | `CometChatGroups` · `CometChatMessageComposer` · `CometChatMessageHeader` · `CometChatMessageList` · `CometChatUsers` | +| Prerequisites | `CometChatUIKit` initialised and a user logged in. | +| Related | [Users](/ui-kit/flutter/users) · [Groups](/ui-kit/flutter/groups) · [Conversations](/ui-kit/flutter/conversations) | + + + Offer a unified discovery screen for users and groups and launch new chats quickly using CometChat V6 UIKit. ## Overview @@ -60,11 +73,11 @@ class NewChatScreen extends StatelessWidget { children: [ CometChatUsers( hideAppbar: true, - onItemTap: (user) => _openChat(context, user: user), + onItemTap: (context, user) => _openChat(context, user: user), ), CometChatGroups( hideAppbar: true, - onItemTap: (group) => _openChat(context, group: group), + onItemTap: (context, group) => _openChat(context, group: group), ), ], ), diff --git a/ui-kit/flutter/guide-overview.mdx b/ui-kit/flutter/guide-overview.mdx index e046bfb46..bd255d366 100644 --- a/ui-kit/flutter/guide-overview.mdx +++ b/ui-kit/flutter/guide-overview.mdx @@ -4,6 +4,18 @@ sidebarTitle: "Overview" 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` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Browse Flutter UI Kit feature guides for blocking users, group chat, private messages, new chat flows, and threaded conversations. | +| Prerequisites | `CometChatUIKit` initialised and a user logged in. | +| Related | [New Chat](/ui-kit/flutter/guide-new-chat) · [Group Chat](/ui-kit/flutter/guide-group-chat) · [Threaded Messages](/ui-kit/flutter/guide-threaded-messages) | + + + > 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 diff --git a/ui-kit/flutter/guide-threaded-messages.mdx b/ui-kit/flutter/guide-threaded-messages.mdx index d63735c6d..57fcc37e6 100644 --- a/ui-kit/flutter/guide-threaded-messages.mdx +++ b/ui-kit/flutter/guide-threaded-messages.mdx @@ -4,6 +4,19 @@ sidebarTitle: "Threaded Messages" description: "Add threaded messages in CometChat Flutter UI Kit with parent message context, reply lists, and composers for focused conversations." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Add threaded messages in CometChat Flutter UI Kit with parent message context, reply lists, and composers for focused conversations. | +| Key widgets | `CometChatMessageComposer` · `CometChatMessageList` · `CometChatMessageTemplate` · `CometChatThreadedHeader` · `CometChatUIKit` | +| Prerequisites | `CometChatUIKit` initialised and a user logged in. | +| Related | [Threaded Messages Header](/ui-kit/flutter/threaded-messages-header) · [Message List](/ui-kit/flutter/message-list) | + + + Enhance your Flutter chat app with threaded messaging using CometChat V6's `CometChatMessageList` and `CometChatThreadedHeader` components. ## Overview @@ -34,7 +47,8 @@ Enhance your Flutter chat app with threaded messaging using CometChat V6's `Come ```dart CometChatMessageList( user: user, - onThreadRepliesClick: (BaseMessage message) { + onThreadRepliesClick: (BaseMessage message, BuildContext context, + {CometChatMessageTemplate? template}) { Navigator.push( context, MaterialPageRoute( @@ -67,7 +81,10 @@ class ThreadScreen extends StatelessWidget { appBar: AppBar(title: Text("Thread")), body: Column( children: [ - CometChatThreadedHeader(message: parentMessage), + CometChatThreadedHeader( + parentMessage: parentMessage, + loggedInUser: CometChatUIKit.loggedInUser!, + ), Expanded( child: CometChatMessageList( user: user, @@ -116,4 +133,4 @@ CometChatMessageComposer( | Thread view screen | Custom `ThreadScreen` widget | | Display threaded messages | `CometChatMessageList(parentMessageId: ...)` | | Send threaded message | `CometChatMessageComposer(parentMessageId: ...)` | -| Thread header | `CometChatThreadedHeader(message: ...)` | +| Thread header | `CometChatThreadedHeader(parentMessage: ..., loggedInUser: ...)` | diff --git a/ui-kit/flutter/incoming-call.mdx b/ui-kit/flutter/incoming-call.mdx index 9e37b6836..beffbae16 100644 --- a/ui-kit/flutter/incoming-call.mdx +++ b/ui-kit/flutter/incoming-call.mdx @@ -3,6 +3,24 @@ title: "Incoming Call" description: "Handle incoming CometChat Flutter UI Kit audio and video calls with full-screen caller info, accept, reject, and navigation setup." --- + + +| Field | Value | +| --- | --- | +| Component | `CometChatIncomingCall` | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_calls_uikit.dart';` | +| Barrel | **Calls barrel only** — this widget does not resolve from `cometchat_chat_uikit.dart`. A screen showing chat *and* calling imports both. | +| Purpose | Handle incoming CometChat Flutter UI Kit audio and video calls with full-screen caller info, accept, reject, and navigation setup. | +| Data props | `call` · `user` | +| Actions | `onError` · `onDecline` · `onAccept` | +| View slots | `callSettingsBuilder` · `titleView` · `subTitleView` · `leadingView` · `itemView` · `trailingView` — [details](#custom-view-slots) | +| Styling | `incomingCallStyle` — the app `ThemeData` does not reach inside a kit widget, so scope colours here. | +| Prerequisites | `CometChatUIKit` initialised and a user logged in. | +| Full props | [21 props](#functionality) | + + + `CometChatIncomingCall` displays a full-screen overlay when an incoming call is received, showing caller info with accept and reject buttons. --- @@ -81,7 +99,7 @@ CometChatIncomingCall(user: user, call: callObject, ```dart CometChatIncomingCall(user: user, call: callObject, - onError: (e) { debugPrint("Error: ${e.message}"); }, + onError: (e) { debugPrint("Error: $e"); }, ) ``` @@ -157,7 +175,7 @@ CometChatIncomingCall(user: user, call: callObject, ```dart CometChatIncomingCall(user: user, call: callObject, subTitleView: (context, call) { - final type = call.type == CometChatConstants.CALL_TYPE_VIDEO ? "Video" : "Audio"; + final type = call.type == CometChatCallType.video ? "Video" : "Audio"; return Text("Incoming $type Call", style: TextStyle(fontSize: 14, color: Colors.white70)); }, ) diff --git a/ui-kit/flutter/llms-flutter-v6.mdx b/ui-kit/flutter/llms-flutter-v6.mdx new file mode 100644 index 000000000..39e97bc9e --- /dev/null +++ b/ui-kit/flutter/llms-flutter-v6.mdx @@ -0,0 +1,162 @@ +--- +title: "Flutter UI Kit v6 — LLM docs index" +description: "Machine-readable, Flutter-v6-scoped index of every UI Kit page as a clean .md twin. Built for AI coding agents; kept out of the human sidebar." +--- + +{/* + SCOPED LLM INDEX for the Flutter v6 UI Kit. + - UNLISTED, NOT hidden: intentionally omitted from docs.json navigation so it never shows in + the human sidebar — but it IS built, served as a clean .md twin, and INDEXED for search + + AI assistants (so AI tools, and this pack's skill via its docs-map, can discover and read it). + - We deliberately do NOT use `hidden: true`/`noindex` here: in Mintlify `hidden` auto-applies + noindex, which would drop this page from search AND the auto global llms.txt / AI context. + We want it discoverable, so it stays indexable. + - Fetch this file's own .md twin as a lightweight, Flutter-only routing index instead of the + site-wide /docs/llms.txt (which spans every product and is far larger). +*/} + +# Flutter UI Kit v6 — LLM docs index (Latest) + +> Stateful, drop-in Flutter chat/calling UI. Package `cometchat_chat_uikit@6`, which re-exports +> `cometchat_sdk@5` (and `cometchat_calls_sdk@5` through the calls barrel). This page is a +> **Flutter-v6-only** routing index for AI agents — a scoped alternative to the site-wide +> `/docs/llms.txt`. + +## How to use this index +Each link points to the docs page; **append `.md`** to its URL to fetch the clean Markdown twin +(verbatim code + a props table with names, types, and defaults). Pick the page for the intent, +then read the props there. +- Convention: any docs page URL + `.md` → raw Markdown. +- Fallback: if a `.md` twin 404s, fetch the same URL **without** `.md` (HTML). Never read the + installed Dart source in place of a doc, and never answer props from memory. + +## Platform rules — Flutter is not the web, and v6 is not v5 +Widgets render through Flutter's own tree. Non-negotiables: +- **TWO barrels, different surfaces.** Chat widgets come from + `package:cometchat_chat_uikit/cometchat_chat_uikit.dart`; calling widgets come from + `package:cometchat_chat_uikit/cometchat_calls_uikit.dart`. The chat barrel does **not** export + the calling widgets and the calls barrel does **not** re-export the chat widgets, so a screen + that shows both imports **both**. Importing a calling widget from the chat barrel does not + compile — this is the single most common Flutter-specific failure. +- **Lists need a bounded box.** `CometChatMessageList`, `CometChatConversations` and the other + list widgets fill their parent. Put them in an `Expanded` (or a sized box) inside a `Column`, + or layout throws an unbounded-height error at render, not at build. +- **Widgets paint their own surface.** The app `ThemeData` does not reach inside a kit widget's + background. Scope colours with the widget's own style object — `CometChatMessageListStyle`, + `CometChatMessageComposerStyle`, and so on — see [Component Styling](/ui-kit/flutter/component-styling). +- **Theming is `ThemeExtension`, not a theme object.** Register `CometChatColorPalette`, + `CometChatTypography` and `CometChatSpacing` in `ThemeData.extensions`. Register them on + **both** the light and dark themes or one mode silently keeps kit defaults. See + [Theming](/ui-kit/flutter/theme-introduction). +- **v5's DataSource is gone.** `CometChatUIKit.getDataSource()` no longer exists; v6 exposes + `MessageTemplateUtils` instead. Emitting the v5 registration path does not compile — see + [MessageTemplateUtils & Data Source](/ui-kit/flutter/customization-datasource) and + [Upgrading from v5](/ui-kit/flutter/upgrading-from-v5). +- **Custom message types: use `addTemplate`, never `templates`.** `addTemplate:` merges your + template with the defaults **and** folds its type/category into the list's fetch and realtime + filter. `templates:` replaces the default set and only registers the bubble — a custom type + passed there sends successfully and then **never appears**, with no error anywhere. A + hand-rolled `MessagesRequestBuilder` does not rescue it either: the list always overrides + `uid`, `guid`, `types` and `categories` on the builder you pass. See + [Message List](/ui-kit/flutter/message-list) and [Message Template](/ui-kit/flutter/message-template). +- **Messages you send yourself must announce themselves.** CometChat does not deliver a client + its own sends over the realtime listener, so a message sent with `CometChat.send*Message` + rather than through `CometChatMessageComposer` never reaches an already-mounted + `CometChatMessageList` — it only appears on that list's next fetch. Emit + `CometChatMessageEvents.ccMessageSent(...)` in `onSuccess`. See [Events](/ui-kit/flutter/events). + +## Hot path — usually no fetch needed +For a plain "add chat" the install, `init → login → render`, and the core drop-in props are +stable; a well-built agent skill bakes them. Fetch below only for exhaustive props, long-tail +components, theming tokens, or feature enablement. +- Setup: [Getting Started](/ui-kit/flutter/getting-started) +- Core drop-ins: [Conversations](/ui-kit/flutter/conversations) · [Message Header](/ui-kit/flutter/message-header) · [Message List](/ui-kit/flutter/message-list) · [Message Composer](/ui-kit/flutter/message-composer) + +## Getting started / integration +- [Getting Started](/ui-kit/flutter/getting-started) +- [Flutter UI Kit — Overview](/ui-kit/flutter/overview) +- [Components Overview](/ui-kit/flutter/components-overview) +- [Core Features](/ui-kit/flutter/core-features) + +## Core & configuration +- [Methods](/ui-kit/flutter/methods) +- [Events](/ui-kit/flutter/events) +- [Sound Manager](/ui-kit/flutter/sound-manager) +- [Localize](/ui-kit/flutter/localize) +- [Extensions](/ui-kit/flutter/extensions) +- [Troubleshooting](/ui-kit/flutter/troubleshooting) + +## Theming & styling +- [Theming](/ui-kit/flutter/theme-introduction) +- [Color Resources](/ui-kit/flutter/color-resources) +- [Component Styling](/ui-kit/flutter/component-styling) +- [Message Bubble Styling](/ui-kit/flutter/message-bubble-styling) + +## Components — conversations & lists +- [Conversations](/ui-kit/flutter/conversations) +- [Users](/ui-kit/flutter/users) +- [Groups](/ui-kit/flutter/groups) +- [Group Members](/ui-kit/flutter/group-members) +- [Search](/ui-kit/flutter/search) + +## Components — messages +- [Message Header](/ui-kit/flutter/message-header) +- [Message List](/ui-kit/flutter/message-list) +- [Message Composer](/ui-kit/flutter/message-composer) +- [Message Template](/ui-kit/flutter/message-template) +- [Threaded Messages Header](/ui-kit/flutter/threaded-messages-header) + +## Components — calling +Every widget below resolves from the **calls** barrel only +(`package:cometchat_chat_uikit/cometchat_calls_uikit.dart`). +- [Call Buttons](/ui-kit/flutter/call-buttons) +- [Incoming Call](/ui-kit/flutter/incoming-call) +- [Outgoing Call](/ui-kit/flutter/outgoing-call) +- [Call Logs](/ui-kit/flutter/call-logs) +- [Call Features](/ui-kit/flutter/call-features) + +## Components — AI & notifications +- [Notification Feed](/ui-kit/flutter/notification-feed) +- [Campaigns](/ui-kit/flutter/campaigns) + +## Customization & extensibility +Entries name the **API**, not just the page, because the intent ("add a custom message type") +does not match any page title. +- **Custom message type** — `CometChatMessageTemplate` + `addTemplate:` (never `templates:`) → + [Message Template](/ui-kit/flutter/message-template) · + [MessageTemplateUtils & Data Source](/ui-kit/flutter/customization-datasource) +- **Custom bubble rendering** — the template's `bubbleView` / `contentView` → + [Message Template](/ui-kit/flutter/message-template) +- **Replacing a slice of a widget** — per-widget view slots → + [View Slots](/ui-kit/flutter/customization-view-slots) +- **Loading / empty / error states** — [State Views](/ui-kit/flutter/customization-state-views) +- **Long-press menu / composer actions** — [Menu & Options](/ui-kit/flutter/customization-menu-options) +- **Driving a widget's data yourself** — [BLoC & Data](/ui-kit/flutter/customization-bloc-data) +- **Text formatters** — [Text Formatters](/ui-kit/flutter/customization-text-formatters) +- **UI events** — `CometChatUIEvents` → [Events](/ui-kit/flutter/events) +- **Kit methods** — [Methods](/ui-kit/flutter/methods) +- **Where to start** — [Customization Overview](/ui-kit/flutter/customization-overview) + +## Text formatters +- [Custom Text Formatter](/ui-kit/flutter/custom-text-formatter-guide) +- [Mentions Formatter](/ui-kit/flutter/mentions-formatter-guide) +- [Shortcut Formatter](/ui-kit/flutter/shortcut-formatter-guide) + +## Task guides (recipes) +- [Guides — Overview](/ui-kit/flutter/guide-overview) +- [New Chat](/ui-kit/flutter/guide-new-chat) +- [Group Chat](/ui-kit/flutter/guide-group-chat) +- [Threaded Messages](/ui-kit/flutter/guide-threaded-messages) +- [Message Privately](/ui-kit/flutter/guide-message-privately) +- [Block / Unblock User](/ui-kit/flutter/guide-block-unblock-user) +- [Call Log Details](/ui-kit/flutter/guide-call-log-details) +- [Message Agentic Flow](/ui-kit/flutter/guide-message-agentic-flow) + +## Framework recipes (full-page layouts) +- [Conversation List + Message View](/ui-kit/flutter/flutter-conversation) +- [One-to-One / Group Chat](/ui-kit/flutter/flutter-one-to-one-chat) +- [Tab-Based Chat](/ui-kit/flutter/flutter-tab-based-chat) +- [Multi-Tab Chat UI](/ui-kit/flutter/multi-tab-chat-ui-guide) + +## Migration & misc +- [Upgrading from v5](/ui-kit/flutter/upgrading-from-v5) diff --git a/ui-kit/flutter/localize.mdx b/ui-kit/flutter/localize.mdx index 8c4b3a579..c8e4d48ee 100644 --- a/ui-kit/flutter/localize.mdx +++ b/ui-kit/flutter/localize.mdx @@ -3,6 +3,17 @@ title: "Localize" description: "Localize CometChat Flutter UI Kit with supported languages, device language detection, translation files, and MaterialApp setup." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Localize CometChat Flutter UI Kit with supported languages, device language detection, translation files, and MaterialApp setup. | +| Related | [Core Features](/ui-kit/flutter/core-features) | + + + ## 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. @@ -34,7 +45,6 @@ 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'; @@ -95,7 +105,7 @@ 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 { +class CustomEN extends cc.TranslationsEn { static const delegate = _CustomCometChatLocalizationsDelegate(); @override diff --git a/ui-kit/flutter/mentions-formatter-guide.mdx b/ui-kit/flutter/mentions-formatter-guide.mdx index a4a577be6..99ebabe68 100644 --- a/ui-kit/flutter/mentions-formatter-guide.mdx +++ b/ui-kit/flutter/mentions-formatter-guide.mdx @@ -3,6 +3,18 @@ title: "Mentions Formatter" 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` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Format @mentions in CometChat Flutter UI Kit message lists, composers, and conversations with custom styles and tap handling. | +| Key classes | `CometChatMentionsFormatter` · `CometChatMessageList` · `CometChatConversations` · `CometChatMessageComposer` | +| Related | [Text Formatters](/ui-kit/flutter/customization-text-formatters) · [Custom Text Formatter Guide](/ui-kit/flutter/custom-text-formatter-guide) | + + + ## 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/customization-text-formatters). diff --git a/ui-kit/flutter/message-bubble-styling.mdx b/ui-kit/flutter/message-bubble-styling.mdx index e50a8dbb6..093badf23 100644 --- a/ui-kit/flutter/message-bubble-styling.mdx +++ b/ui-kit/flutter/message-bubble-styling.mdx @@ -4,6 +4,18 @@ sidebarTitle: "Message Bubble Styling" description: "Customize CometChat Flutter UI Kit message bubbles with incoming and outgoing styles, theme extensions, reactions, timestamps, and avatars." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Customize CometChat Flutter UI Kit message bubbles with incoming and outgoing styles, theme extensions, reactions, timestamps, and avatars. | +| Key classes | `CometChatIncomingMessageBubbleStyle` · `CometChatOutgoingMessageBubbleStyle` · `CometChatCollaborativeBubbleStyle` · `CometChatTextBubbleStyle` · `CometChatCallBubbleStyle` · `CometChatDeletedBubbleStyle` · `CometChatFileBubbleStyle` | +| Related | [Message Template](/ui-kit/flutter/message-template) · [Component Styling](/ui-kit/flutter/component-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 @@ -407,7 +419,7 @@ ThemeData( ```dart ThemeData( extensions: [ - CometChatAiAssistantBubbleStyle( + CometChatAIAssistantBubbleStyle( backgroundColor: Colors.transparent, textColor: const Color(0xFF141414), ), diff --git a/ui-kit/flutter/message-composer.mdx b/ui-kit/flutter/message-composer.mdx index 9862351e8..0b54cd8bb 100644 --- a/ui-kit/flutter/message-composer.mdx +++ b/ui-kit/flutter/message-composer.mdx @@ -3,6 +3,25 @@ title: "Message Composer" description: "Configure CometChat Flutter UI Kit Message Composer for text, media, custom messages, live reactions, editing, rich text, and audio." --- + + +| Field | Value | +| --- | --- | +| Component | `CometChatMessageComposer` | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Configure CometChat Flutter UI Kit Message Composer for text, media, custom messages, live reactions, editing, rich text, and audio. | +| Data props | `user` · `group` · `parentMessageId` | +| Actions | `onChange` · `onError` · `onSendButtonTap` · `onRichTextFormatApplied` · `onKeyboardDiagnostics` · `onAttachmentTrayAdd` · `onAttachmentTraySend` · `onAttachmentErrorTap` | +| View slots | `auxiliaryButtonView` · `headerView` · `footerView` · `secondaryButtonView` · `richTextToolbarView` · `attachmentErrorSnackBarBuilder` | +| Styling | `messageComposerStyle` — the app `ThemeData` does not reach inside a kit widget, so scope colours here. | +| Sending outside the composer | A message sent with `CometChat.send*Message` instead of through this widget must emit `CometChatMessageEvents.ccMessageSent(...)` in `onSuccess`, or an already-mounted `CometChatMessageList` never shows it. | +| Stitching | Pair with `CometChatMessageHeader` and `CometChatMessageList`, passing the same `user` or `group` to all three. | +| Prerequisites | `CometChatUIKit` initialised and a user logged in. | +| Full props | [73 props](#message-composer-properties) | + + + ## Overview `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. @@ -194,47 +213,81 @@ CometChatMessageComposer( ## 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. | +| Property | Type | Default | Description | +| --- | --- | --- | --- | +| `user` | `User?` | `null` | Sets user for the message composer. | +| `group` | `Group?` | `null` | Sets group for the message composer. | +| `messageComposerStyle` | `CometChatMessageComposerStyle?` | `null` | Sets style for the message composer. | +| `placeholderText` | `String?` | `null` | Hint text for the input field. | +| `disableTypingEvents` | `bool` | `false` | Disables typing events. | +| `disableSoundForMessages` | `bool` | `false` | Disables sound for sent messages. | +| `parentMessageId` | `int` | `0` | ID of the parent message (default is 0). | +| `customSoundForMessage` | `String?` | `null` | `customSoundForMessage` provides custom sound for message sent | +| `customSoundForMessagePackage` | `String?` | `null` | `customSoundForMessagePackage` package name to show icon from | +| `auxiliaryButtonView` | `ComposerWidgetBuilder?` | `null` | UI component as auxiliary button. | +| `headerView` | `ComposerWidgetBuilder?` | `null` | `headerView` ui component to be forwarded to message input component | +| `footerView` | `ComposerWidgetBuilder?` | `null` | `footerView` ui component to be forwarded to message input component | +| `secondaryButtonView` | `ComposerWidgetBuilder?` | `null` | UI component as secondary button. | +| `sendButtonView` | `Widget?` | `null` | Custom send button widget. | +| `attachmentOptions` | `ComposerActionsBuilder?` | `null` | Provides options for file attachments. | +| `text` | `String?` | `null` | Initial text for the input field. | +| `onChange` | `Function(String text)?` | `null` | Callback triggered when text changes. | +| `maxLine` | `int?` | `null` | Maximum number of lines allowed. | +| `auxiliaryButtonsAlignment` | `AuxiliaryButtonsAlignment?` | `null` | `auxiliaryButtonsAlignment` controls position auxiliary button view | +| `attachmentIconURL` | `String?` | `null` | `attachmentIconURL` path of the icon to show in the attachments button | +| `stateCallBack` | `void Function(MessageComposerBloc bloc)?` | `null` | `stateCallBack` callback to handle state of the message composer Now returns MessageComposerBloc instead of the old controller | +| `attachmentIcon` | `Widget?` | `null` | Custom attachment icon. | +| `onError` | `OnError?` | `null` | Callback to handle errors. | +| `onSendButtonTap` | `Function( BuildContext context, BaseMessage message, PreviewMessageMode? previewMessageMode, )?` | `null` | Callback when send button is tapped. | +| `hideVoiceRecordingButton` | `bool?` | `null` | Hide the voice recording button. | +| `useInlineAudioRecorder` | `bool` | `true` | `useInlineAudioRecorder` when true, shows inline audio recorder in the composer instead of opening a bottom sheet. | +| `voiceRecordingIcon` | `Widget?` | `null` | Custom voice recording icon. | +| `aiIcon` | `Widget?` | `null` | `attachmentIcon` custom ai icon | +| `aiIconURL` | `String?` | `null` | `aiIconURL` path of the icon to show in the ai button | +| `aiIconPackageName` | `String?` | `null` | `aiIconPackageName` package name to show icon from | +| `textFormatters` | `List?` | `null` | `textFormatters` provides list of text formatters | +| `disableMentions` | `bool?` | `null` | Disables mentions in the composer. | +| `textEditingController` | `TextEditingController?` | `null` | Controls the state of the text field. | +| `padding` | `EdgeInsetsGeometry?` | `null` | `padding` provides padding to the message composer | +| `messageInputPadding` | `EdgeInsetsGeometry?` | `null` | `messageInputPadding` sets the padding to the message input field | +| `recorderStartButtonIcon` | `Widget?` | `null` | `recorderStartButtonIcon` defines the icon of the start button. | +| `recorderPauseButtonIcon` | `Widget?` | `null` | `recorderPauseButtonIcon` defines the icon of the pause button. | +| `recorderDeleteButtonIcon` | `Widget?` | `null` | `recorderDeleteButtonIcon` defines the icon of the delete button. | +| `recorderStopButtonIcon` | `Widget?` | `null` | `recorderStopButtonIcon` defines the icon of the stop button. | +| `recorderSendButtonIcon` | `Widget?` | `null` | `recorderSendButtonIcon` defines the icon of the send button. | +| `hideSendButton` | `bool?` | `null` | Hide/display the send button. | +| `hideAttachmentButton` | `bool?` | `null` | Hide/display attachment button. | +| `hideStickersButton` | `bool?` | `null` | Hide/display the sticker button. | +| `hideAudioAttachmentOption` | `bool?` | `null` | Hide/display audio attachment option. | +| `hideFileAttachmentOption` | `bool?` | `null` | Hide/display file attachment option. | +| `hideImageAttachmentOption` | `bool?` | `null` | Hide/display image attachment option. | +| `hideVideoAttachmentOption` | `bool?` | `null` | Hide/display video attachment option. | +| `hidePollsOption` | `bool?` | `null` | Hide/display polls option. | +| `hideCollaborativeDocumentOption` | `bool?` | `null` | `hideCollaborativeDocumentOption` is a `bool` that can be used to hide/display collaborative document option | +| `hideCollaborativeWhiteboardOption` | `bool?` | `null` | `hideCollaborativeWhiteboardOption` is a `bool` that can be used to hide/display collaborative whiteboard option | +| `hideTakePhotoOption` | `bool?` | `null` | `hideTakePhotoOption` is a `bool` that can be used to hide/display take photo option | +| `sendButtonIcon` | `Widget?` | `null` | Custom send button icon. | +| `disableMentionAll` | `bool` | `false` | `disableMentionAll` is a boolean which is used to disable @all mentions in groups | +| `mentionAllLabel` | `String?` | `null` | `mentionAllLabel` is a String which is used to set a custom label for @all mentions | +| `mentionAllLabelId` | `String?` | `null` | `mentionAllLabelId` is a String which is used to set a custom label ID for @all mentions | +| `enableRichTextFormatting` | `bool` | `true` | Master switch for rich text (markdown detection, toolbar, WYSIWYG rendering). Default `true`. | +| `showRichTextFormattingOptions` | `bool` | `true` | Whether the rich text toolbar UI is visible. Default `true`. | +| `hideRichTextFormattingOptions` | `Set` | `const {}` | Set of format buttons to hide from the toolbar. Default `{}`. | +| `richTextToolbarView` | `Widget Function(BuildContext context, TextEditingController controller)?` | `null` | Custom rich text toolbar widget. | +| `onRichTextFormatApplied` | `void Function(FormatType formatType)?` | `null` | Callback fired when a toolbar format is applied. | +| `hideBottomSafeArea` | `bool` | `false` | Hide bottom safe area padding (default: `false`). | +| `resizeToAvoidBottomInset` | `bool` | `true` | 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. | +| `layout` | `CometChatComposerLayout` | `CometChatComposerLayout.singleLine` | Composer skeleton: `singleLine` (default) or `doubleLine`. See [Layout](#layout) below. | +| `onKeyboardDiagnostics` | `CometChatKeyboardDiagnosticsCallback?` | `null` | Debug hook fired on every internal keyboard-state change. Leave `null` in production. | +| `enableMultipleAttachments` | `bool` | `true` | `enableMultipleAttachments` when true (the default) the composer owns a multi-attachment staging tray: picked files upload immediately, stage as tray tiles, and send as one message per… | +| `attachmentTrayController` | `AttachmentTrayController?` | `null` | Optional external staging tray controller. | +| `onAttachmentTrayAdd` | `VoidCallback?` | `null` | Invoked by the tray's Add affordance when `attachmentTrayController` is set. | +| `onAttachmentTraySend` | `VoidCallback?` | `null` | Invoked by the tray's Send affordance (shown only when the tray can send). | +| `disableImagePaste` | `bool` | `false` | `disableImagePaste` disables staging an image pasted from the clipboard (context-menu Paste, Cmd/Ctrl+V, and the web paste event). | +| `disableDragAndDrop` | `bool` | `false` | `disableDragAndDrop` disables staging files dragged onto the chat and the "drop files here" overlay (web only). | +| `attachmentErrorAlertStyle` | `CometChatAttachmentErrorAlertStyle?` | `null` | `attachmentErrorAlertStyle` styles every attachment error alert: the toast shown when a selection is over the count/size limit, and the alert stating why a staged attachment was rejected… | +| `attachmentErrorSnackBarBuilder` | `SnackBar Function(BuildContext context, AttachmentTile tile)?` | `null` | `attachmentErrorSnackBarBuilder` fully replaces the default error snackbar. | +| `onAttachmentErrorTap` | `void Function(BuildContext context, AttachmentTile tile)?` | `null` | `onAttachmentErrorTap` fully overrides the tap/hover action on an errored tile (skips showing the default/custom snackbar entirely). | *** @@ -537,14 +590,12 @@ CometChatMessageComposer( ```dart CometChatMessageComposer( user: user, - // Brief toast shown when a selection is over the count limit. - errorAlertStyle: CometChatErrorAlertStyle(), - // Snackbar that explains why a tile failed. - attachmentErrorSnackBarStyle: CometChatAttachmentErrorSnackBarStyle(), - // Or replace that snackbar entirely. + // Styles the alert shown when a selection is over the count limit. + attachmentErrorAlertStyle: CometChatAttachmentErrorAlertStyle(), + // Replace the default error snackbar entirely. attachmentErrorSnackBarBuilder: (context, tile) => MySnackBar(tile), - // Called when the user taps an error tile. - onAttachmentErrorTap: (tile) {}, + // Called when the user taps an error tile (skips the snackbar). + onAttachmentErrorTap: (context, tile) {}, ) ``` diff --git a/ui-kit/flutter/message-header.mdx b/ui-kit/flutter/message-header.mdx index f723cfbb7..080b9a659 100644 --- a/ui-kit/flutter/message-header.mdx +++ b/ui-kit/flutter/message-header.mdx @@ -3,6 +3,24 @@ title: "Message Header" description: "Configure CometChat Flutter UI Kit Message Header with user or group details, presence, typing indicators, navigation, and actions." --- + + +| Field | Value | +| --- | --- | +| Component | `CometChatMessageHeader` | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Configure CometChat Flutter UI Kit Message Header with user or group details, presence, typing indicators, navigation, and actions. | +| Data props | `group` · `user` | +| Actions | `onBack` · `chatHistoryButtonClick` · `newChatButtonClick` — [details](#actions-and-events) | +| View slots | `backButton` · `trailingView` · `listItemView` · `subtitleView` · `titleView` · `leadingStateView` · `auxiliaryButtonView` — [details](#custom-view-slots) | +| Styling | `messageHeaderStyle` — the app `ThemeData` does not reach inside a kit widget, so scope colours here. | +| Stitching | Pair with `CometChatMessageList` and `CometChatMessageComposer`, passing the same `user` or `group` to all three. | +| Prerequisites | `CometChatUIKit` initialised and a user logged in. | +| Full props | [27 props](#functionality) | + + + `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). @@ -102,21 +120,6 @@ CometChatMessageHeader( #### `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. @@ -137,14 +140,34 @@ The component listens to these SDK events internally. No manual setup needed. ## Functionality | Property | Type | Default | Description | -|---|---|---|---| -| `user` | `User?` | `null` | User object for 1:1 chat header | +| --- | --- | --- | --- | +| `backButton` | `WidgetBuilder?` | `null` | Custom back button widget | +| `messageHeaderStyle` | `CometChatMessageHeaderStyle?` | `null` | `CometChatMessageHeaderStyle` set styling props for message header | | `group` | `Group?` | `null` | Group object for group chat header | +| `user` | `User?` | `null` | User object for 1:1 chat header | +| `trailingView` | `List? Function(User? user, Group? group, BuildContext context)?` | `null` | `trailingView` set appbar options | +| `listItemView` | `Widget Function(Group? group, User? user, BuildContext context)?` | `null` | `listItemView` set custom view for listItem | | `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 | +| `subtitleView` | `Widget? Function(Group? group, User? user, BuildContext context)?` | `null` | `subtitleView` to set subtitle view | +| `listItemStyle` | `ListItemStyle?` | `null` | `listItemStyle` style for every list item | +| `onBack` | `VoidCallback?` | `null` | `onBack` callback triggered on closing this screen | +| `avatarHeight` | `double?` | `null` | `avatarHeight` set height for avatar | +| `avatarWidth` | `double?` | `null` | `avatarWidth` set width for avatar | +| `height` | `double?` | `null` | `height` set height for message header | +| `padding` | `EdgeInsetsGeometry?` | `null` | `padding` set padding for message header | +| `hideVideoCallButton` | `bool?` | `null` | `hideVideoCallButton` is a `bool` that can be used to hide/display video call button | +| `hideVoiceCallButton` | `bool?` | `null` | `hideVoiceCallButton` is a `bool` that can be used to hide/display voice call button | +| `titleView` | `Widget? Function(Group? group, User? user, BuildContext context)?` | `null` | `titleView` to set to set titleView view | +| `leadingStateView` | `Widget? Function(Group? group, User? user, BuildContext context)?` | `null` | `leadingStateView` to set leading View | +| `auxiliaryButtonView` | `Widget? Function(Group? group, User? user, BuildContext context)?` | `null` | `auxiliaryButtonView` to set auxiliary view | +| `usersStatusVisibility` | `bool?` | `true` | `usersStatusVisibility` controls visibility of status indicator shown if a user is online | +| `dateTimeFormatterCallback` | `DateTimeFormatterCallback?` | `null` | `dateTimeFormatterCallback` is a callback that can be used to format the date and time | +| `hideNewChatButton` | `bool?` | `null` | `hideNewChatButton` is a `bool` that can be used to hide/display chat button button | +| `hideChatHistoryButton` | `bool?` | `null` | `hideChatHistoryButton` is a `bool` that can be used to hide/display chat history button | +| `chatHistoryButtonClick` | `VoidCallback?` | `null` | `chatHistoryButtonClick` callback triggered on chat history button click | +| `newChatButtonClick` | `VoidCallback?` | `null` | `newChatButtonClick` callback triggered on new chat button click | +| `newChatIcon` | `IconData?` | `null` | `newChatIcon` provides new chat icon | +| `chatHistoryIcon` | `IconData?` | `null` | `chatHistoryIcon` provides chat history icon | --- @@ -159,7 +182,7 @@ Replace the default subtitle (online status / typing indicator / member count). ```dart CometChatMessageHeader( user: user, - subtitleView: (user, group) { + subtitleView: (group, user, context) { if (user != null) { return Text( user.status == "online" ? "Active now" : "Last seen recently", @@ -188,10 +211,10 @@ Replace the avatar / left section. ```dart CometChatMessageHeader( user: user, - leadingView: (user, group) { + leadingStateView: (group, user, context) { return CircleAvatar( backgroundImage: NetworkImage(user?.avatar ?? ""), - child: user?.avatar == null ? Text(user?.name?[0] ?? "") : null, + child: user?.avatar == null ? Text(user?.name.isNotEmpty == true ? user!.name[0] : "") : null, ); }, ) @@ -208,7 +231,7 @@ Replace the name / title text. ```dart CometChatMessageHeader( user: user, - titleView: (user, group) { + titleView: (group, user, context) { return Text( user?.name ?? group?.name ?? "", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16), @@ -228,7 +251,7 @@ Replace the right section (call buttons, menu, etc.). ```dart CometChatMessageHeader( user: user, - trailingView: (user, group) { + trailingView: (user, group, context) { return Row( mainAxisSize: MainAxisSize.min, children: [ @@ -254,7 +277,7 @@ CometChatMessageHeader( ```dart CometChatMessageHeader( group: group, - trailingView: (user, group) { + trailingView: (user, group, context) { return IconButton( icon: Icon(Icons.info_outline), onPressed: () { @@ -293,9 +316,11 @@ Provide a custom `MessageHeaderBloc`: ```dart +// CometChatMessageHeader has no `messageHeaderBloc` parameter — it manages its own +// MessageHeaderBloc internally. Customize presentation with the view slots above. CometChatMessageHeader( user: user, - messageHeaderBloc: CustomMessageHeaderBloc(), + subtitleView: (group, user, context) => const Text("Custom subtitle"), ) ``` @@ -318,11 +343,10 @@ CometChatMessageHeader( user: user, messageHeaderStyle: CometChatMessageHeaderStyle( backgroundColor: Colors.white, - avatarStyle: CometChatAvatarStyle( - borderRadius: BorderRadius.circular(8), - ), - statusIndicatorStyle: CometChatStatusIndicatorStyle(), - typingIndicatorStyle: CometChatTypingIndicatorStyle(), + titleTextColor: Color(0xFF141414), + subtitleTextColor: Color(0xFF727272), + onlineStatusColor: Color(0xFF09C26F), + typingIndicatorTextStyle: TextStyle(fontSize: 12), ), ) ``` diff --git a/ui-kit/flutter/message-list.mdx b/ui-kit/flutter/message-list.mdx index 449301f06..3e613d6b7 100644 --- a/ui-kit/flutter/message-list.mdx +++ b/ui-kit/flutter/message-list.mdx @@ -3,6 +3,26 @@ title: "Message List" description: "Scrollable list of messages for a conversation with real-time updates, reactions, threaded replies, and message actions." --- + + +| Field | Value | +| --- | --- | +| Component | `CometChatMessageList` | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Scrollable list of messages for a conversation with real-time updates, reactions, threaded replies, and message actions. | +| Data props | `user` · `group` · `messagesRequestBuilder` · `templates` · `addTemplate` · `parentMessageId` · `reactionsRequestBuilder` | +| Actions | `onError` · `onLoad` · `onEmpty` · `onThreadRepliesClick` · `addMoreReactionTap` · `onReactionClick` · `onReactionLongPress` · `onReactionListItemClick` — [details](#actions-and-events) | +| View slots | `headerView` · `footerView` · `loadingStateView` · `emptyStateView` · `errorStateView` · `emptyChatGreetingView` — [details](#custom-view-slots) | +| Styling | `style` — the app `ThemeData` does not reach inside a kit widget, so scope colours here. | +| Layout | Fills its parent — place it in an `Expanded` (or a sized box) inside a `Column`, or layout throws an unbounded-height error at render. | +| Custom message types | Use `addTemplate:` — **never** `templates:`. `addTemplate` merges your `CometChatMessageTemplate` with the defaults **and** folds its type/category into the list's fetch + realtime filter; `templates` replaces the default set and only registers the bubble, so a custom type sends fine and **never appears**, with no error. A hand-rolled `MessagesRequestBuilder` does not help — the list always overrides `uid`/`guid`/`types`/`categories` on it. | +| Stitching | Pair with `CometChatMessageHeader` and `CometChatMessageComposer`, passing the same `user` or `group` to all three. | +| Prerequisites | `CometChatUIKit` initialised and a user logged in. | +| Full props | [88 props](#functionality) | + + + `CometChatMessageList` renders a scrollable list of messages for a conversation with real-time updates for new messages, edits, deletions, reactions, and threaded replies. --- @@ -117,7 +137,7 @@ Fires on internal errors. CometChatMessageList( user: user, onError: (e) { - debugPrint("Error: ${e.message}"); + debugPrint("Error: $e"); }, ) ``` @@ -212,30 +232,94 @@ The component listens to SDK message events internally. No manual setup needed. | Property | Type | Default | Description | | --- | --- | --- | --- | -| `user` | `User?` | required* | User for 1-on-1 conversation | -| `group` | `Group?` | required* | Group for group conversation | +| `user` | `User?` | `null` | User for 1-on-1 conversation | +| `group` | `Group?` | `null` | Group for group conversation | +| `messageListBloc` | `MessageListBloc?` | `null` | Optional external `MessageListBloc` instance. | +| `messagesRequestBuilder` | `MessagesRequestBuilder?` | `null` | Request builder used to fetch the message list. Note the widget always overrides `uid`, `guid`, `types` and `categories` on whatever builder you pass. | +| `templates` | `List?` | `null` | REPLACES the default message templates. For a message type of your own use `addTemplate` instead — `templates` only registers the bubble and does not widen the fetch filter, so a custom type sends successfully and never appears. | +| `addTemplate` | `List?` | `null` | Merges templates with the defaults. Each template's type and category are also folded into the list's fetch and realtime filter, which is what makes a custom message type actually render. | | `parentMessageId` | `int?` | `null` | Parent message ID for thread replies | -| `alignment` | `ChatAlignment` | `standard` | Chat alignment setting | +| `withParent` | `bool` | `true` | Whether to include the parent message in thread results (default: false). Set to true for AI chat history where the parent message should appear in the list. | | `hideDeletedMessages` | `bool` | `false` | Hide deleted messages entirely | -| `disableReceipts` | `bool` | `false` | Disable read/delivery receipts | | `disableSoundForMessages` | `bool` | `false` | Disable message sounds | +| `disableReceipts` | `bool` | `false` | Disable read/delivery receipts | | `hideReplies` | `bool` | `true` | Hide thread replies in main conversation | -| `hideGroupActionMessages` | `bool?` | `false` | Hide group action messages | +| `headerView` | `HeaderFooterBuilder?` | `null` | Custom header view displayed above the message list. **Validates: Requirements 13.2** | +| `footerView` | `HeaderFooterBuilder?` | `null` | Custom footer view displayed below the message list. **Validates: Requirements 13.2** | +| `loadingStateView` | `WidgetBuilder?` | `null` | `loadingStateView` is a parameter used to show the loading state view in case of loading | +| `emptyStateView` | `WidgetBuilder?` | `null` | `emptyStateView` returns view fow empty state | +| `errorStateView` | `WidgetBuilder?` | `null` | `errorStateView` is a parameter used to show the error state view in case of any error | +| `emptyChatGreetingView` | `WidgetBuilder?` | `null` | View shown in an empty conversation, in place of the generic empty state. | +| `style` | `CometChatMessageListStyle?` | `null` | Style configuration for the message list. | +| `scrollController` | `ScrollController?` | `null` | Optional scroll controller | +| `alignment` | `ChatAlignment` | `ChatAlignment.standard` | Chat alignment setting | +| `onError` | `OnError?` | `null` | `onError` callback triggered in case any error happens when fetching data | +| `onLoad` | `OnLoad?` | `null` | Called once the first page of messages has loaded. | +| `onEmpty` | `OnEmpty?` | `null` | `onEmpty` callback triggered when the list is empty | +| `stateCallBack` | `Function(CometChatMessageListControllerProtocol controller)?` | `null` | Exposes the widget's state so a host can drive it imperatively. | +| `customSoundForMessages` | `String?` | `null` | `customSoundForMessages` set custom sound for messages | +| `customSoundForMessagePackage` | `String?` | `null` | `customSoundForMessagePackage` package name to show icon from | +| `readIcon` | `Widget?` | `null` | `readIcon` widget visible when readAt != null in `BaseMessage`. If blank will load default readIcon | +| `deliveredIcon` | `Widget?` | `null` | `deliveredIcon` widget visible while deliveredAt != null in `BaseMessage`. If blank will load default deliveredIcon | +| `sentIcon` | `Widget?` | `null` | `sentIcon` widget visible while sentAt != null and deliveredAt is null in `BaseMessage`. If blank will load default sentIcon | +| `waitIcon` | `Widget?` | `null` | `waitIcon` widget visible while sentAt and deliveredAt is null in `BaseMessage`. If blank will load default waitIcon | +| `avatarVisibility` | `bool?` | `true` | Toggle avatar visibility | +| `enableMultipleAttachments` | `bool` | `true` | Render multi-attachment media messages as grouped per-type bubbles. See [Multiple Attachments](#multiple-attachments) | | `hideTimestamp` | `bool?` | `null` | Toggle timestamp visibility | +| `datePattern` | `String Function(BaseMessage message)?` | `null` | Builds the timestamp string shown on a bubble. | +| `dateSeparatorPattern` | `String Function(DateTime dateTime)?` | `null` | Builds the date string shown on the separator between days. | +| `dateSeparatorStyle` | `CometChatDateStyle?` | `null` | Style for the date separator shown between days. | | `hideDateSeparator` | `bool?` | `false` | Hide date separators | | `hideStickyDate` | `bool?` | `false` | Hide floating sticky date header | -| `avatarVisibility` | `bool?` | `true` | Toggle avatar visibility | +| `onThreadRepliesClick` | `ThreadRepliesClick?` | `null` | Called when the thread-replies indicator on a bubble is tapped. Wire this to push your thread screen. | +| `hideThreadView` | `bool?` | `null` | When true, hides the thread-replies indicator on bubbles. | | `receiptsVisibility` | `bool?` | `true` | Toggle read receipts | | `disableReactions` | `bool?` | `false` | Toggle reactions | -| `enableMultipleAttachments` | `bool` | `true` | Render multi-attachment media messages as grouped per-type bubbles. See [Multiple Attachments](#multiple-attachments) | +| `addReactionIcon` | `Widget?` | `null` | `addReactionIcon` sets custom icon for adding reaction | +| `addMoreReactionTap` | `Function(BaseMessage message)?` | `null` | Called when the 'add reaction' affordance is tapped. | +| `favoriteReactions` | `List?` | `null` | `favoriteReactions` is a list of frequently used reactions | +| `onReactionClick` | `Function(String? emoji, BaseMessage message)?` | `null` | Called when an existing reaction chip is tapped. | +| `onReactionLongPress` | `Function(String? emoji, BaseMessage message)?` | `null` | Called when an existing reaction chip is long-pressed. | +| `onReactionListItemClick` | `Function(String? reaction, BaseMessage? message)?` | `null` | Called when a row in the reaction list sheet is tapped. | +| `reactionsRequestBuilder` | `ReactionsRequestBuilder?` | `null` | Request builder used to fetch the reaction list for a message. | +| `textFormatters` | `List?` | `null` | `textFormatters` is a list of `CometChatTextFormatter` that can be used to format text | +| `additionalConfigurations` | `AdditionalConfigurations?` | `null` | Configuration passed down to the bubble views this list renders. | +| `disableMentions` | `bool?` | `null` | `disableMentions` disables mentions in the composer | +| `mentionAllLabel` | `String?` | `null` | `mentionAllLabel` is the label to display for @all mention (default: localized "Notify All") | +| `mentionAllLabelId` | `String?` | `null` | `mentionAllLabelId` is the ID for @all mention (default: "all") | +| `padding` | `EdgeInsetsGeometry?` | `null` | `padding` sets the padding for snackBar | +| `margin` | `EdgeInsetsGeometry?` | `null` | `margin` sets the margin for snackBar | +| `width` | `double?` | `null` | `width` provides width to the widget | +| `height` | `double?` | `null` | `height` provides height to the widget | +| `hideCopyMessageOption` | `bool?` | `false` | `hideCopyMessageOption` This prop defines whether a user can copy message or not. | +| `hideDeleteMessageOption` | `bool?` | `false` | `hideDeleteMessageOption` This prop defines whether Delete Message option should be visible or not. | +| `hideEditMessageOption` | `bool?` | `false` | `hideEditMessageOption` This prop defines whether Edit Message option should be visible or not. | +| `hideGroupActionMessages` | `bool?` | `false` | Hide group action messages | +| `hideMessageInfoOption` | `bool?` | `false` | `hideMessageInfoOption` This prop defines whether a user can fetch information about the message whether it's received or not. | +| `hideMessagePrivatelyOption` | `bool?` | `false` | `hideMessagePrivatelyOption` This prop defines whether a user can privately message other member of the group or not. | +| `hideReactionOption` | `bool?` | `false` | `hideReactionOption` This prop defines whether Reaction option should be visible or not. | +| `hideReplyInThreadOption` | `bool?` | `false` | `hideReplyInThreadOption` This prop defines whether Reply In Thread option should be visible or not. | +| `hideReplyOption` | `bool?` | `false` | `hideReplyOption` This prop defines whether the inline Reply option should be visible or not. | +| `hideTranslateMessageOption` | `bool?` | `false` | `hideTranslateMessageOption` This prop defines whether Reply In Thread option should be visible or not. | +| `hideShareMessageOption` | `bool?` | `false` | `hideShareMessageOption` This prop defines whether share option should be visible or not. | +| `hideModerationView` | `bool?` | `null` | When true, hides the moderation affordance on bubbles. | +| `enableConversationStarters` | `bool?` | `false` | When true, shows AI conversation starters in an empty conversation. | +| `enableSmartReplies` | `bool?` | `false` | When true, shows AI smart replies beneath the list. | +| `smartRepliesDelayDuration` | `int?` | `10000` | Milliseconds to wait after the last message before smart replies appear. | +| `smartRepliesKeywords` | `List?` | `const [ 'what', 'when', 'why', 'who', '…` | Keywords in the last message that trigger smart replies. | +| `suggestedMessages` | `List?` | `null` | Suggested messages offered in an empty conversation. | +| `hideSuggestedMessages` | `bool?` | `false` | When true, suppresses the suggested messages. | +| `emptyStateText` | `String?` | `null` | `emptyStateText` text to be displayed when the list is empty | +| `errorStateText` | `String?` | `null` | `errorStateText` is a parameter used to show the error state text in case of any error | +| `dateTimeFormatterCallback` | `DateTimeFormatterCallback?` | `null` | `dateTimeFormatterCallback` is a callback that can be used to format the date and time | | `enableSwipeToReply` | `bool` | `true` | Enable swipe-to-reply gesture | -| `startFromUnreadMessages` | `bool` | `false` | Scroll to first unread on open | -| `loadLastAgentConversation` | `bool` | `false` | Loads the most recent existing agent conversation on start | -| `showMarkAsUnreadOption` | `bool` | `false` | Show "Mark as Unread" in long-press options | | `goToMessageId` | `int?` | `null` | Scroll to a specific message after load | +| `showMarkAsUnreadOption` | `bool` | `false` | Show "Mark as Unread" in long-press options | +| `startFromUnreadMessages` | `bool` | `false` | Scroll to first unread on open | | `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 | +| `hideFlagRemarkField` | `bool` | `false` | Hide the optional remark/context text field in the flag dialog | +| `loadLastAgentConversation` | `bool` | `false` | Loads the most recent existing agent conversation on start | \* One of `user` or `group` is required. diff --git a/ui-kit/flutter/message-template.mdx b/ui-kit/flutter/message-template.mdx index 68f0b9345..cea828a92 100644 --- a/ui-kit/flutter/message-template.mdx +++ b/ui-kit/flutter/message-template.mdx @@ -3,6 +3,19 @@ title: "Message Template" description: "Data structure for customizing CometChat Flutter UI Kit message bubbles, including content, header, footer, reply, and status views." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Data structure for customizing CometChat Flutter UI Kit message bubbles, including content, header, footer, reply, and status views. | +| Key classes | `CometChatMessageList` · `CometChatMessageTemplate` · `CometChatDate` · `CometChatImageBubble` · `CometChatMessageOption` | +| Custom message types | Hand a template to `CometChatMessageList(addTemplate: …)`, **never** `templates:`. `addTemplate` merges with the defaults and folds your type into the list's fetch + realtime filter; `templates` replaces the set and only registers the bubble, so a custom type sends fine and never appears. | +| Related | [Message List](/ui-kit/flutter/message-list) · [MessageTemplateUtils & Data Source](/ui-kit/flutter/customization-datasource) · [Customizing Message Bubbles](/ui-kit/flutter/message-bubble-styling) | + + + ## 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. @@ -183,8 +196,9 @@ CometChatMessageList( type: MessageTypeConstants.text, category: MessageCategoryConstants.message, options: (loggedInUser, messageObject, context, group, additionalConfigurations) { - final existingOptions = CometChatUIKit.getDataSource() - .getTextMessageOptions(loggedInUser, messageObject, context, group, additionalConfigurations); + // V6: the DataSource is gone — the defaults come from MessageTemplateUtils. + final existingOptions = MessageTemplateUtils.getTextMessageOptions( + loggedInUser, messageObject, context, group, additionalConfigurations); return [ CometChatMessageOption( id: "refresh", @@ -214,8 +228,8 @@ CometChatMessageList( user: user, messagesRequestBuilder: MessagesRequestBuilder() ..limit = 30 - ..types = [...CometChatUIKit.getDataSource().getAllMessageTypes(), "contact"] - ..categories = CometChatUIKit.getDataSource().getAllMessageCategories(), + ..types = [...MessageTemplateUtils.getAllMessageTypes(), "contact"] + ..categories = MessageTemplateUtils.getAllMessageCategories(), templates: [ CometChatMessageTemplate( type: "contact", diff --git a/ui-kit/flutter/methods.mdx b/ui-kit/flutter/methods.mdx index c5ff2ef7d..95599f6ed 100644 --- a/ui-kit/flutter/methods.mdx +++ b/ui-kit/flutter/methods.mdx @@ -3,6 +3,19 @@ title: "Methods" 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';` | +| Purpose | Use CometChatUIKit methods for initialization, login, logout, users, groups, conversations, messages, calls, and session handling. | +| Key classes | `CometChatUIKit` · `CometChatAIAssistantEvents` · `CometChatSubscriptionType` · `CometChatAIAssistantEventsListener` · `CometChatCardActionEvent` · `CometChatUIEventListener` · `CometChatUIEvents` | +| Key methods | `createUser()` · `init()` · `login()` · `loginWithAuthToken()` · `logout()` · `sendCardMessage()` | +| Related | [Events](/ui-kit/flutter/events) · [Core Features](/ui-kit/flutter/core-features) | + + + ## 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. diff --git a/ui-kit/flutter/multi-tab-chat-ui-guide.mdx b/ui-kit/flutter/multi-tab-chat-ui-guide.mdx index 64ba8b6dd..affb25db1 100644 --- a/ui-kit/flutter/multi-tab-chat-ui-guide.mdx +++ b/ui-kit/flutter/multi-tab-chat-ui-guide.mdx @@ -3,6 +3,19 @@ title: "Multi Tab Chat UI Guide" description: "Build a multi-tab CometChat Flutter UI Kit chat interface with Conversations, Users, Groups, headers, message lists, and composers." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Build a multi-tab CometChat Flutter UI Kit chat interface with Conversations, Users, Groups, headers, message lists, and composers. | +| Key widgets | `CometChatConversations` · `CometChatGroups` · `CometChatMessageComposer` · `CometChatMessageHeader` · `CometChatMessageList` · `CometChatUsers` | +| Prerequisites | `CometChatUIKit` initialised and a user logged in. | +| Related | [Conversations](/ui-kit/flutter/conversations) · [Users](/ui-kit/flutter/users) · [Groups](/ui-kit/flutter/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: @@ -91,14 +104,14 @@ class _MultiTabUIGuideExampleState extends State { CometChatUsers( hideAppbar: true, hideSearch: true, - onItemTap: (user) { + onItemTap: (context, user) { _navigateToMessages(context, user: user); }, ), CometChatGroups( hideAppbar: true, hideSearch: true, - onItemTap: (group) { + onItemTap: (context, group) { _navigateToMessages(context, group: group); }, ), diff --git a/ui-kit/flutter/notification-feed.mdx b/ui-kit/flutter/notification-feed.mdx index 8705df47c..fe3796b77 100644 --- a/ui-kit/flutter/notification-feed.mdx +++ b/ui-kit/flutter/notification-feed.mdx @@ -3,6 +3,23 @@ title: "Notification Feed" description: "Full-screen notification feed component with category filtering, card rendering, real-time updates, and engagement reporting." --- + + +| Field | Value | +| --- | --- | +| Component | `CometChatNotificationFeed` | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Full-screen notification feed component with category filtering, card rendering, real-time updates, and engagement reporting. | +| Data props | `notificationFeedRequestBuilder` · `notificationCategoriesRequestBuilder` | +| Actions | `onItemClick` · `onActionClick` · `onError` · `onBackPress` — [details](#actions-and-events) | +| Styling | `style` — the app `ThemeData` does not reach inside a kit widget, so scope colours here. | +| Layout | Fills its parent — place it in an `Expanded` (or a sized box) inside a `Column`, or layout throws an unbounded-height error at render. | +| Prerequisites | `CometChatUIKit` initialised and a user logged in. | +| Full props | [18 props](#properties) | + + + `CometChatNotificationFeed` displays a scrollable notification feed where each item is rendered as a native card using the CometChat Cards library. It handles fetching, pagination, category filtering, timestamp grouping, real-time updates, and read/delivered/engagement reporting automatically. @@ -185,16 +202,24 @@ The component handles these automatically — no manual setup needed: | Property | Type | Default | Description | | --- | --- | --- | --- | -| `title` | String | `"Notifications"` | Header title text | -| `showHeader` | bool | `true` | Toggle header visibility | -| `showBackButton` | bool | `false` | Toggle back button | -| `showFilterChips` | bool | `true` | Toggle category filter chips | -| `headerView` | Widget? | null | Custom header widget | -| `scrollToItemId` | String? | null | Deep link to a specific item | -| `notificationFeedRequestBuilder` | NotificationFeedRequestBuilder? | null | Custom feed request | -| `notificationCategoriesRequestBuilder` | NotificationCategoriesRequestBuilder? | null | Custom categories request | -| `cardThemeMode` | CometChatCardThemeMode? | null | Card renderer theme mode | -| `cardThemeOverride` | CometChatCardThemeOverride? | null | Card renderer theme override | +| `title` | `String` | `'Notifications'` | Header title text | +| `showHeader` | `bool` | `true` | Toggle header visibility | +| `showBackButton` | `bool` | `false` | Toggle back button | +| `showFilterChips` | `bool` | `true` | Toggle category filter chips | +| `headerView` | `Widget?` | `null` | Custom header widget | +| `scrollToItemId` | `String?` | `null` | Deep link to a specific item | +| `notificationFeedRequestBuilder` | `NotificationFeedRequestBuilder?` | `null` | Custom feed request | +| `notificationCategoriesRequestBuilder` | `NotificationCategoriesRequestBuilder?` | `null` | Custom categories request | +| `onItemClick` | `void Function(NotificationFeedItem feedItem)?` | `null` | Callback when a feed item card is tapped. | +| `onActionClick` | `void Function( NotificationFeedItem feedItem, CometChatCardActionEvent action, )?` | `null` | Callback when an action button within a card is tapped. | +| `onError` | `void Function(String error)?` | `null` | Callback when an error occurs. | +| `onBackPress` | `VoidCallback?` | `null` | Callback when back button is pressed. | +| `emptyStateView` | `Widget?` | `null` | Custom empty state view. | +| `errorStateView` | `Widget?` | `null` | Custom error state view. | +| `loadingStateView` | `Widget?` | `null` | Custom loading state view. | +| `style` | `CometChatNotificationFeedStyle?` | `null` | Style configuration for the notification feed. | +| `cardThemeMode` | `CometChatCardThemeMode?` | `null` | Card renderer theme mode | +| `cardThemeOverride` | `CometChatCardThemeOverride?` | `null` | Card renderer theme override | --- diff --git a/ui-kit/flutter/outgoing-call.mdx b/ui-kit/flutter/outgoing-call.mdx index 55f369bf7..8fb5cf70b 100644 --- a/ui-kit/flutter/outgoing-call.mdx +++ b/ui-kit/flutter/outgoing-call.mdx @@ -3,6 +3,24 @@ 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." --- + + +| Field | Value | +| --- | --- | +| Component | `CometChatOutgoingCall` | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_calls_uikit.dart';` | +| Barrel | **Calls barrel only** — this widget does not resolve from `cometchat_chat_uikit.dart`. A screen showing chat *and* calling imports both. | +| Purpose | Full-screen view displaying recipient information and call status during an outgoing call, with automatic transition to the ongoing call screen. | +| Data props | `call` · `user` | +| Actions | `onError` · `onCancelled` — [details](#actions-and-events) | +| View slots | `subtitleView` · `sessionSettingsBuilder` · `avatarView` · `titleView` · `cancelledView` — [details](#custom-view-slots) | +| Styling | `outgoingCallStyle` — the app `ThemeData` does not reach inside a kit widget, so scope colours here. | +| Prerequisites | `CometChatUIKit` initialised and a user logged in. | +| Full props | [17 props](#functionality) | + + + `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. @@ -107,7 +125,7 @@ CometChatOutgoingCall( user: user, call: callObject, onError: (e) { - debugPrint("Error: ${e.message}"); + debugPrint("Error: $e"); }, ) ``` @@ -163,18 +181,26 @@ class _YourScreenState extends State with CometChatCallEventListener ## Functionality | Property | Type | Default | Description | -|---|---|---|---| +| --- | --- | --- | --- | +| `call` | `Call` | required | Call object with session details | | `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 | +| `onError` | `OnError?` | `null` | Error callback | +| `onCancelled` | `Function(BuildContext context, Call call)?` | `null` | Callback when call is cancelled | +| `subtitleView` | `Widget? Function(BuildContext context, Call call)?` | `null` | Subtitle view builder | +| `disableSoundForCalls` | `bool?` | `null` | Disable outgoing call sound | | `customSoundForCalls` | `String?` | `null` | Custom sound asset path | +| `customSoundForCallsPackage` | `String?` | `null` | Package name for custom sound asset | +| `declineButtonIcon` | `Widget?` | `null` | Custom decline/cancel button icon | +| `outgoingCallStyle` | `CometChatOutgoingCallStyle?` | `null` | Custom outgoing call style | +| `sessionSettingsBuilder` | `SessionSettingsBuilder?` | `null` | Custom session settings builder (V5) | +| `width` | `double?` | `null` | Widget width | +| `height` | `double?` | `null` | Widget height | +| `avatarView` | `Widget? Function(BuildContext context, Call call)?` | `null` | Avatar view builder | +| `titleView` | `Widget? Function(BuildContext context, Call call)?` | `null` | Title view builder | +| `cancelledView` | `Widget? Function(BuildContext context, Call call)?` | `null` | Cancelled view builder (bottom action button) | +| `bloc` | `OutgoingCallBloc?` | `null` | Optional external BLoC for testing/injection | -**Example — custom decline text and disabled sound:** +**Example — custom decline icon and disabled sound:** @@ -183,7 +209,7 @@ CometChatOutgoingCall( user: user, call: callObject, disableSoundForCalls: true, - declineButtonText: "Cancel Call", + declineButtonIcon: const Icon(Icons.call_end, color: Colors.white), ) ``` @@ -229,7 +255,9 @@ CometChatOutgoingCall( call: callObject, titleView: (context, call) { return Text( - call.receiver?.name ?? "Unknown", + call.receiver is User + ? (call.receiver as User).name + : (call.receiver is Group ? (call.receiver as Group).name : "Unknown"), style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold, color: Colors.white), ); }, diff --git a/ui-kit/flutter/overview.mdx b/ui-kit/flutter/overview.mdx index 4f6ed46ad..ff1544346 100644 --- a/ui-kit/flutter/overview.mdx +++ b/ui-kit/flutter/overview.mdx @@ -4,6 +4,17 @@ sidebarTitle: "Overview" description: "Use CometChat Flutter UI Kit V6 to add prebuilt chat widgets, calls, theming, localization, and customizable messaging experiences." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Use CometChat Flutter UI Kit V6 to add prebuilt chat widgets, calls, theming, localization, and customizable messaging experiences. | +| Related | [Getting Started With CometChat Flutter UI Kit V6](/ui-kit/flutter/getting-started) · [Overview](/ui-kit/flutter/components-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. *** diff --git a/ui-kit/flutter/search.mdx b/ui-kit/flutter/search.mdx index 370085e21..1f82fab50 100644 --- a/ui-kit/flutter/search.mdx +++ b/ui-kit/flutter/search.mdx @@ -3,6 +3,24 @@ title: "Search" description: "Add CometChat Flutter UI Kit search for conversations and messages with categorized results and navigation callbacks." --- + + +| Field | Value | +| --- | --- | +| Component | `CometChatSearch` | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Add CometChat Flutter UI Kit search for conversations and messages with categorized results and navigation callbacks. | +| Data props | `user` · `group` · `conversationsRequestBuilder` · `messagesRequestBuilder` | +| Actions | `onBack` · `onConversationClicked` · `onMessageClicked` · `onEmpty` · `onError` · `onMessagesLoad` · `onConversationsLoad` — [details](#actions-and-events) | +| View slots | `loadingStateView` · `emptyStateView` · `errorStateView` · `initialStateView` · `conversationItemView` · `conversationTitleView` · `conversationLeadingView` · `conversationSubtitleView` · +6 more — [details](#custom-view-slots) | +| Styling | `searchStyle` — the app `ThemeData` does not reach inside a kit widget, so scope colours here. | +| Layout | Fills its parent — place it in an `Expanded` (or a sized box) inside a `Column`, or layout throws an unbounded-height error at render. | +| Prerequisites | `CometChatUIKit` initialised and a user logged in. | +| Full props | [35 props](#functionality) | + + + `CometChatSearch` provides unified search functionality across conversations and messages. In V6, it uses a single consolidated `SearchBloc` replacing the three separate controllers from V5. @@ -19,10 +37,10 @@ description: "Add CometChat Flutter UI Kit search for conversations and messages ```dart CometChatSearch( - onConversationItemClick: (conversation) { + onConversationClicked: (conversation) { // Navigate to conversation }, - onMessageItemClick: (message) { + onMessageClicked: (message) { // Navigate to message in context }, ) @@ -72,10 +90,10 @@ CometChatConversations( onSearchTap: () { Navigator.push(context, MaterialPageRoute( builder: (context) => CometChatSearch( - onConversationItemClick: (conversation) { + onConversationClicked: (conversation) { // Navigate to chat }, - onMessageItemClick: (message) { + onMessageClicked: (message) { // Navigate to message }, ), @@ -94,7 +112,7 @@ Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()` and a user ### Callback Methods -#### `onConversationItemClick` +#### `onConversationClicked` Fires when a conversation result is tapped. @@ -102,7 +120,7 @@ Fires when a conversation result is tapped. ```dart CometChatSearch( - onConversationItemClick: (conversation) { + onConversationClicked: (conversation) { final entity = conversation.conversationWith; if (entity is User) { navigateToUserChat(entity); @@ -115,7 +133,7 @@ CometChatSearch( -#### `onMessageItemClick` +#### `onMessageClicked` Fires when a message result is tapped. @@ -123,7 +141,7 @@ Fires when a message result is tapped. ```dart CometChatSearch( - onMessageItemClick: (message) { + onMessageClicked: (message) { // Navigate to the message in its conversation }, ) @@ -156,7 +174,7 @@ Fires on internal errors. ```dart CometChatSearch( onError: (e) { - debugPrint("Search error: ${e.message}"); + debugPrint("Search error: $e"); }, ) ``` @@ -168,11 +186,42 @@ CometChatSearch( ## 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 | +| --- | --- | --- | --- | +| `onBack` | `VoidCallback?` | `null` | `onBack` callback triggered on closing a screen | +| `onConversationClicked` | `Function(Conversation conversation)?` | `null` | Called when a conversation result is tapped. | +| `onMessageClicked` | `Function(BaseMessage message)?` | `null` | Called when a message result is tapped. | +| `onEmpty` | `OnEmpty?` | `null` | `onEmpty` callback triggered when the list is empty | +| `onError` | `OnError?` | `null` | `onError` callback triggered in case any error happens when fetching data | +| `onMessagesLoad` | `OnLoad?` | `null` | Called once message results have loaded. | +| `onConversationsLoad` | `OnLoad?` | `null` | Called once conversation results have loaded. | +| `searchFilters` | `List?` | `null` | Filters offered above the results, such as photos or links. | +| `searchIn` | `List?` | `null` | Scopes the search — conversations, messages, or both. | +| `user` | `User?` | `null` | Target user for 1-on-1 conversation (mutually exclusive with `group`) | +| `group` | `Group?` | `null` | Target group for group conversation (mutually exclusive with `user`) | +| `searchStyle` | `CometChatSearchStyle?` | `null` | Style object for this widget. The app `ThemeData` does not reach inside a kit widget, so scope colours here. | +| `searchBackIcon` | `Widget?` | `null` | Icon for the back affordance in the search bar. | +| `searchClearIcon` | `Widget?` | `null` | Icon for the clear affordance in the search bar. | +| `loadingStateView` | `WidgetBuilder?` | `null` | `loadingStateView` is a parameter used to show the loading state view in case of loading | +| `emptyStateView` | `WidgetBuilder?` | `null` | `emptyStateView` returns view fow empty state | +| `errorStateView` | `WidgetBuilder?` | `null` | `errorStateView` is a parameter used to show the error state view in case of any error | +| `initialStateView` | `WidgetBuilder?` | `null` | View shown before a query is entered. | +| `conversationItemView` | `Widget? Function(BuildContext, Conversation)?` | `null` | Replaces an entire conversation result row. | +| `conversationTitleView` | `Widget? Function(BuildContext, Conversation)?` | `null` | Replaces the title slot of a conversation result row. | +| `conversationLeadingView` | `Widget? Function(BuildContext, Conversation)?` | `null` | Replaces the leading slot of a conversation result row. | +| `conversationSubtitleView` | `Widget? Function(BuildContext, Conversation)?` | `null` | Replaces the subtitle slot of a conversation result row. | +| `conversationTailView` | `Widget? Function(BuildContext, Conversation)?` | `null` | Replaces the trailing slot of a conversation result row. | +| `usersStatusVisibility` | `bool?` | `null` | `usersStatusVisibility` controls visibility of status indicator shown if a user is online | +| `receiptsVisibility` | `bool?` | `null` | `receiptsVisibility` controls visibility of receipts | +| `groupTypeVisibility` | `bool?` | `null` | `groupTypeVisibility` Hide the group type icon which is visible on the group icon. | +| `dateSeparatorFormatterCallback` | `DateTimeFormatterCallback?` | `null` | Builds the date string shown on the separator between result groups. | +| `timeSeparatorFormatterCallback` | `DateTimeFormatterCallback?` | `null` | Builds the time string shown on a result row. | +| `searchTextMessageView` | `Widget? Function(BuildContext, TextMessage)?` | `null` | Replaces the row used for a text-message result. | +| `searchImageMessageView` | `Widget? Function(BuildContext, MediaMessage)?` | `null` | Replaces the row used for an image-message result. | +| `searchVideoMessageView` | `Widget? Function(BuildContext, MediaMessage)?` | `null` | Replaces the row used for a video-message result. | +| `searchFileMessageView` | `Widget? Function(BuildContext, MediaMessage)?` | `null` | Replaces the row used for a file-message result. | +| `searchAudioMessageView` | `Widget? Function(BuildContext, MediaMessage)?` | `null` | Replaces the row used for an audio-message result. | +| `conversationsRequestBuilder` | `ConversationsRequestBuilder?` | `null` | `conversationsRequestBuilder` Request builder to fetch conversations. | +| `messagesRequestBuilder` | `MessagesRequestBuilder?` | `null` | Request builder used to fetch message results. | --- @@ -186,10 +235,12 @@ Replace the conversation result item. ```dart CometChatSearch( - conversationItemView: (conversation, context) { + conversationItemView: (context, conversation) { + final entity = conversation.conversationWith; + final name = entity is User ? entity.name : (entity is Group ? entity.name : ""); return ListTile( - leading: CircleAvatar(child: Text(conversation.conversationWith?.name?[0] ?? "")), - title: Text(conversation.conversationWith?.name ?? ""), + leading: CircleAvatar(child: Text(name.isNotEmpty ? name[0] : "")), + title: Text(name), ); }, ) @@ -199,16 +250,24 @@ CometChatSearch( ### Message Item View -Replace the message result item. +Replace a message result item. There is no single `messageItemView` — message results are overridden +per message **type**: `searchTextMessageView`, `searchImageMessageView`, `searchVideoMessageView`, +`searchFileMessageView`, and `searchAudioMessageView`. Each receives `(BuildContext, message)`. ```dart CometChatSearch( - messageItemView: (message, context) { + searchTextMessageView: (context, message) { + return ListTile( + title: Text(message.sender?.name ?? ""), + subtitle: Text(message.text), + ); + }, + searchImageMessageView: (context, message) { return ListTile( title: Text(message.sender?.name ?? ""), - subtitle: message is TextMessage ? Text(message.text) : Text("Media message"), + subtitle: const Text("Image"), ); }, ) @@ -264,8 +323,8 @@ The search widget uses `SearchBloc` internally: CometChatSearch( searchStyle: CometChatSearchStyle( backgroundColor: Colors.white, - searchBoxBackgroundColor: Color(0xFFF5F5F5), - searchBoxBorderRadius: BorderRadius.circular(12), + searchBackgroundColor: Color(0xFFF5F5F5), + searchBorderRadius: BorderRadius.circular(12), ), ) ``` diff --git a/ui-kit/flutter/shortcut-formatter-guide.mdx b/ui-kit/flutter/shortcut-formatter-guide.mdx index e00760c42..19a27bf89 100644 --- a/ui-kit/flutter/shortcut-formatter-guide.mdx +++ b/ui-kit/flutter/shortcut-formatter-guide.mdx @@ -3,6 +3,19 @@ title: "Shortcut Formatter" description: "Implement shortcut formatting in CometChat Flutter UI Kit with CometChatTextFormatter, trigger characters, and message shortcuts." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Implement shortcut formatting in CometChat Flutter UI Kit with CometChatTextFormatter, trigger characters, and message shortcuts. | +| Key classes | `CometChatUIEvents` · `CometChatMessageComposer` · `CometChatTextFormatter` · `CometChatTheme` | +| Key methods | `callExtension()` | +| Related | [Text Formatters](/ui-kit/flutter/customization-text-formatters) · [Custom Text Formatter Guide](/ui-kit/flutter/custom-text-formatter-guide) | + + + ## Introduction The `ShortcutFormatter` class extends `CometChatTextFormatter` to handle shortcuts within messages. This guide walks you through implementing shortcut extensions in your CometChat V6 application. diff --git a/ui-kit/flutter/sound-manager.mdx b/ui-kit/flutter/sound-manager.mdx index 6c319d478..c8fd53dd3 100644 --- a/ui-kit/flutter/sound-manager.mdx +++ b/ui-kit/flutter/sound-manager.mdx @@ -3,6 +3,17 @@ title: "Sound Manager" description: "Manage CometChat Flutter UI Kit sounds for incoming and outgoing messages, calls, custom audio, playback, and stop controls." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Manage CometChat Flutter UI Kit sounds for incoming and outgoing messages, calls, custom audio, playback, and stop controls. | +| Related | [Events](/ui-kit/flutter/events) | + + + ## 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. diff --git a/ui-kit/flutter/theme-introduction.mdx b/ui-kit/flutter/theme-introduction.mdx index 6aa14aa30..571ac59ed 100644 --- a/ui-kit/flutter/theme-introduction.mdx +++ b/ui-kit/flutter/theme-introduction.mdx @@ -4,6 +4,20 @@ sidebarTitle: "Theming" description: "Customize CometChat Flutter UI Kit themes with color palettes, typography, spacing, light and dark mode, icons, and ThemeExtension." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Customize CometChat Flutter UI Kit themes with color palettes, typography, spacing, light and dark mode, icons, and ThemeExtension. | +| Key classes | `CometChatColorPalette` · `CometChatTheme` | +| Mechanism | Register `CometChatColorPalette`, `CometChatTypography` and `CometChatSpacing` in `ThemeData.extensions` — the kit reads them through Flutter's `ThemeExtension`, there is no CometChat theme object. | +| Constraints | Register on **both** the light and dark `ThemeData` or one mode silently keeps kit defaults. Widget backgrounds are **not** covered — scope those with each widget's own style object. | +| Related | [Color Resources](/ui-kit/flutter/color-resources) · [Component Styling](/ui-kit/flutter/component-styling) · [Customizing Message Bubbles](/ui-kit/flutter/message-bubble-styling) | + + + 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. @@ -48,6 +62,35 @@ ThemeData( +### Adding extensions without dropping existing ones + +Assigning `extensions:` replaces whatever the ancestor `ThemeData` already provided, which +silently drops any extension registered further up the tree. When you are theming a subtree +rather than the whole app, use `CometChatTheme.mergeThemeExtensions` to append yours to the +inherited set instead of overwriting it. + +`CometChatTheme` exists only for this helper — it holds no palette of its own. + + + +```dart +import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; +import 'package:flutter/material.dart'; + +Widget themedSubtree(BuildContext context, Widget child) { + return Theme( + data: Theme.of(context).copyWith( + extensions: CometChatTheme.mergeThemeExtensions(context, [ + CometChatColorPalette(primary: const Color(0xFFF76808)), + ]), + ), + child: child, + ); +} +``` + + + ## Core Components ### Color diff --git a/ui-kit/flutter/threaded-messages-header.mdx b/ui-kit/flutter/threaded-messages-header.mdx index 0d0c357b0..36600d064 100644 --- a/ui-kit/flutter/threaded-messages-header.mdx +++ b/ui-kit/flutter/threaded-messages-header.mdx @@ -3,6 +3,22 @@ title: "Threaded Messages Header" description: "Header component for threaded conversations showing the parent message, reply count, and thread navigation." --- + + +| Field | Value | +| --- | --- | +| Component | `CometChatThreadedHeader` | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Header component for threaded conversations showing the parent message, reply count, and thread navigation. | +| Data props | `parentMessage` · `loggedInUser` | +| View slots | `messageActionView` — [details](#custom-view-slots) | +| Styling | `style` — the app `ThemeData` does not reach inside a kit widget, so scope colours here. | +| Prerequisites | `CometChatUIKit` initialised and a user logged in. | +| Full props | [11 props](#functionality) | + + + `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. @@ -69,7 +85,7 @@ Typically launched from the message list when a user selects "Reply in Thread": ```dart CometChatMessageList( user: user, - onThreadRepliesClick: (message, context, {bubbleView}) { + onThreadRepliesClick: (message, context, {template}) { Navigator.push(context, MaterialPageRoute( builder: (context) => ThreadScreen( parentMessage: message, @@ -88,29 +104,52 @@ Prerequisites: CometChat SDK initialized, a user logged in, and a valid `BaseMes ## Actions and Events -### Callback Methods - -#### `onBack` +### Navigation (host-owned) -Fires when the user presses the back button. +`CometChatThreadedHeader` renders the parent-message context only — it exposes **no** `onBack` or +`onError` callback. Provide navigation from the screen that hosts it: a pushed route already gets a +back button from its `AppBar`, so no wiring is required. ```dart -CometChatThreadedHeader( - parentMessage: parentMessage, - loggedInUser: loggedInUser, - onBack: () { - Navigator.pop(context); - }, +Scaffold( + appBar: AppBar(title: const Text("Thread")), // back button is automatic on a pushed route + body: SafeArea( + child: Column( + children: [ + CometChatThreadedHeader( + parentMessage: parentMessage, + loggedInUser: loggedInUser, + ), + Expanded( + child: CometChatMessageList( + user: user, + group: group, + parentMessageId: parentMessage.id, + ), + ), + CometChatMessageComposer( + user: user, + group: group, + parentMessageId: parentMessage.id, + ), + ], + ), + ), ) ``` -#### `onError` + +The thread list **and** composer each need `parentMessageId` **and** the same `user`/`group` target as +the parent chat. Passing `parentMessageId` alone sends replies to the wrong target. + + +### Custom message actions -Fires on internal errors. +Use `messageActionView` to render your own actions next to the parent message. @@ -118,8 +157,11 @@ Fires on internal errors. CometChatThreadedHeader( parentMessage: parentMessage, loggedInUser: loggedInUser, - onError: (e) { - debugPrint("Error: ${e.message}"); + messageActionView: (BaseMessage message, BuildContext context) { + return IconButton( + icon: const Icon(Icons.more_vert), + onPressed: () {}, + ); }, ) ``` @@ -139,12 +181,18 @@ CometChatThreadedHeader( ## 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 | +| --- | --- | --- | --- | +| `parentMessage` | `BaseMessage` | required | The parent message of the thread | +| `messageActionView` | `Function(BaseMessage message, BuildContext context)?` | `null` | `messageActionView` custom action view | +| `style` | `CometChatThreadedHeaderStyle?` | `null` | `style` style parameter | +| `loggedInUser` | `User` | required | The currently logged-in user | +| `template` | `CometChatMessageTemplate?` | `null` | `template` to get the message template | +| `height` | `double?` | `null` | `height` provides height to the widget | +| `width` | `double?` | `null` | `width` provides width to the widget | +| `receiptsVisibility` | `bool?` | `true` | `receiptsVisibility` controls visibility of receipts | +| `textFormatters` | `List?` | `null` | `textFormatters` list of text formatters. | +| `typography` | `CometChatTypography?` | `null` | `typography` optional pre-cached typography for optimization | +| `spacing` | `CometChatSpacing?` | `null` | `spacing` optional pre-cached spacing for optimization | --- @@ -152,7 +200,8 @@ CometChatThreadedHeader( ### Bubble View -Replace the parent message bubble display. +Replace the parent message bubble display. `CometChatThreadedHeader` has no `bubbleView` parameter of +its own — pass a `CometChatMessageTemplate` via `template` and override its `bubbleView`. @@ -160,19 +209,23 @@ Replace the parent message bubble display. 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; - }, + template: CometChatMessageTemplate( + type: CometChatMessageType.text, + category: CometChatMessageCategory.message, + bubbleView: (message, context, alignment) { + if (message is TextMessage) { + return Container( + padding: const EdgeInsets.all(12), + decoration: BoxDecoration( + color: const Color(0xFFF5F5F5), + borderRadius: BorderRadius.circular(8), + ), + child: Text(message.text), + ); + } + return const SizedBox.shrink(); + }, + ), ) ``` @@ -203,8 +256,8 @@ CometChatThreadedHeader( parentMessage: parentMessage, loggedInUser: loggedInUser, style: CometChatThreadedHeaderStyle( - backgroundColor: Colors.white, - replyCountTextColor: Color(0xFF727272), + bubbleContainerBackGroundColor: Colors.white, + countTextColor: Color(0xFF727272), ), ) ``` diff --git a/ui-kit/flutter/troubleshooting.mdx b/ui-kit/flutter/troubleshooting.mdx index 57e0b9bdc..105c84bfb 100644 --- a/ui-kit/flutter/troubleshooting.mdx +++ b/ui-kit/flutter/troubleshooting.mdx @@ -3,6 +3,18 @@ title: "Troubleshooting" description: "Troubleshoot CometChat Flutter UI Kit V6 setup, login, theming, styling, messaging, calling, navigation, and build issues." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Troubleshoot CometChat Flutter UI Kit V6 setup, login, theming, styling, messaging, calling, navigation, and build issues. | +| Key classes | `CometChatUIKit` · `CometChatIncomingMessageBubbleStyle` · `CometChatMentionsFormatter` · `CometChatMessageList` · `CometChatOutgoingMessageBubbleStyle` | +| Related | [Getting Started With CometChat Flutter UI Kit V6](/ui-kit/flutter/getting-started) | + + + ## Initialization and Login | Symptom | Cause | Fix | diff --git a/ui-kit/flutter/upgrading-from-v5.mdx b/ui-kit/flutter/upgrading-from-v5.mdx index 13d5b79a4..ccafe4aca 100644 --- a/ui-kit/flutter/upgrading-from-v5.mdx +++ b/ui-kit/flutter/upgrading-from-v5.mdx @@ -4,6 +4,20 @@ sidebarTitle: "Upgrading From V5" description: "Upgrade from CometChat Flutter UI Kit V5 to V6 with package changes, initialization updates, BLoC architecture, and migration steps." --- + + +| Field | Value | +| --- | --- | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Upgrade from CometChat Flutter UI Kit V5 to V6 with package changes, initialization updates, BLoC architecture, and migration steps. | +| Key classes | `CometChatUIKit` · `CometChatUIKitChatAIFeatures` | +| Key methods | `getDataSource()` | +| Constraints | Snippets marked *Before* are v5 and will not compile against v6 — that is deliberate. | +| Related | [MessageTemplateUtils & Data Source](/ui-kit/flutter/customization-datasource) · [Message Template](/ui-kit/flutter/message-template) | + + + This guide helps you migrate from CometChat Flutter UI Kit V5 to V6. V6 is a major architectural refactor that introduces clean architecture with BLoC state management while maintaining the same user-facing widget APIs. ## Key Changes diff --git a/ui-kit/flutter/users.mdx b/ui-kit/flutter/users.mdx index 013e4f384..b2eeae452 100644 --- a/ui-kit/flutter/users.mdx +++ b/ui-kit/flutter/users.mdx @@ -3,6 +3,24 @@ title: "Users" description: "Scrollable list of all available users with search, avatars, names, and online/offline status indicators." --- + + +| Field | Value | +| --- | --- | +| Component | `CometChatUsers` | +| Package | `cometchat_chat_uikit` | +| Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` | +| Purpose | Scrollable list of all available users with search, avatars, names, and online/offline status indicators. | +| Data props | `searchKeyword` · `usersRequestBuilder` | +| Actions | `onSelection` · `onError` · `onBack` · `onItemTap` · `onItemLongPress` · `onLoad` · `onEmpty` — [details](#actions-and-events) | +| View slots | `loadingStateView` · `emptyStateView` · `errorStateView` · `appBarOptions` · `subtitleView` · `listItemView` · `titleView` · `leadingView` · +1 more — [details](#custom-view-slots) | +| Styling | `usersStyle` — the app `ThemeData` does not reach inside a kit widget, so scope colours here. | +| Layout | Fills its parent — place it in an `Expanded` (or a sized box) inside a `Column`, or layout throws an unbounded-height error at render. | +| Prerequisites | `CometChatUIKit` initialised and a user logged in. | +| Full props | [35 props](#functionality) | + + + `CometChatUsers` renders a scrollable list of all available users with real-time presence updates, search, avatars, and online/offline status indicators. --- @@ -84,7 +102,7 @@ CometChatUsers( | Hide blocked users | `..hideBlockedUsers = true` | | Filter by roles | `..roles = ["admin", "moderator"]` | | Filter by tags | `..tags = ["vip"]` | -| Online users only | `..userStatus = CometChatConstants.userStatusOnline` | +| Online users only | `..userStatus = CometChatUserStatus.online` | | Filter by UIDs | `..UIDs = ["uid1", "uid2"]` | --- @@ -168,7 +186,7 @@ Fires on internal errors. ```dart CometChatUsers( onError: (e) { - debugPrint("Error: ${e.message}"); + debugPrint("Error: $e"); }, ) ``` @@ -223,15 +241,41 @@ The component listens to these SDK events internally. No manual setup needed. | Property | Type | Default | Description | | --- | --- | --- | --- | -| `title` | `String?` | `null` | Custom app bar title | +| `usersStyle` | `CometChatUsersStyle` | `const CometChatUsersStyle()` | Style object for this widget. The app `ThemeData` does not reach inside a kit widget, so scope colours here. | +| `scrollController` | `ScrollController?` | `null` | Optional scroll controller | +| `searchPlaceholder` | `String?` | `null` | Search placeholder text | +| `backButton` | `Widget?` | `null` | `backButton` back button | | `showBackButton` | `bool` | `true` | Toggle back button | -| `hideAppbar` | `bool?` | `false` | Toggle app bar visibility | +| `searchBoxIcon` | `Widget?` | `null` | `searchBoxIcon` search box prefix icon | | `hideSearch` | `bool` | `false` | Toggle search bar | +| `selectionMode` | `SelectionMode?` | `null` | Enable selection mode (`single` or `multiple`) | +| `onSelection` | `Function(List?, BuildContext)?` | `null` | Called with the selected users when selection mode is confirmed. | +| `title` | `String?` | `null` | Custom app bar title | +| `loadingStateView` | `WidgetBuilder?` | `null` | `loadingStateView` is a parameter used to show the loading state view in case of loading | +| `emptyStateView` | `WidgetBuilder?` | `null` | `emptyStateView` returns view fow empty state | +| `errorStateView` | `WidgetBuilder?` | `null` | `errorStateView` is a parameter used to show the error state view in case of any error | +| `appBarOptions` | `List Function(BuildContext context)?` | `null` | `appBarOptions` list of options to be visible in app bar | | `usersStatusVisibility` | `bool?` | `true` | Show online/offline status indicator | +| `activateSelection` | `ActivateSelection?` | `null` | `activateSelection` lets the widget know if groups are allowed to be selected | +| `onError` | `OnError?` | `null` | Called when the list fails to load. | +| `onBack` | `VoidCallback?` | `null` | `onBack` callback triggered on closing a screen | +| `onItemTap` | `Function(BuildContext context, User)?` | `null` | Called when a user row is tapped. | +| `onItemLongPress` | `Function(BuildContext context, User)?` | `null` | Called when a user row is long-pressed. | +| `submitIcon` | `Widget?` | `null` | `submitIcon` will override the default submit icon | +| `hideAppbar` | `bool?` | `false` | Toggle app bar visibility | +| `height` | `double?` | `null` | `height` provides height to the widget | +| `width` | `double?` | `null` | `width` provides width to the widget | | `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 | +| `onLoad` | `OnLoad?` | `null` | Called once the first page of users has loaded. | +| `onEmpty` | `OnEmpty?` | `null` | Called when the user list resolves with no results. | +| `subtitleView` | `Widget? Function(BuildContext, User)?` | `null` | Replaces the subtitle slot of each user row. | +| `listItemView` | `Widget Function(User)?` | `null` | Replaces the entire user row. Overrides the leading, title, subtitle and trailing slots. | +| `titleView` | `Widget? Function(BuildContext context, User user)?` | `null` | Replaces the title slot of each user row. | +| `leadingView` | `Widget? Function(BuildContext context, User user)?` | `null` | Replaces the leading slot of each user row — the avatar area by default. | +| `trailingView` | `Widget? Function(BuildContext context, User user)?` | `null` | Replaces the trailing slot of each user row. | +| `usersBloc` | `UsersBloc?` | `null` | External BLoC instance. Pass one to share list state with another widget instead of letting this one create its own. | +| `usersRequestBuilder` | `UsersRequestBuilder?` | `null` | `usersRequestBuilder` custom request builder for filtering users | --- @@ -382,7 +426,7 @@ CometChatUsers( ```dart CometChatUsers( usersRequestBuilder: UsersRequestBuilder() - ..userStatus = CometChatConstants.userStatusOnline, + ..userStatus = CometChatUserStatus.online, ) ```