From 8ac82522822a7e27d37ab3724492e5eb5adbeff5 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Mon, 28 Jul 2025 17:51:46 +0530 Subject: [PATCH 001/196] adds flutter guide for threaded messages --- docs.json | 3 +- ui-kit/flutter/guide-threaded-messages.mdx | 142 +++++++++++++++++++++ 2 files changed, 144 insertions(+), 1 deletion(-) create mode 100644 ui-kit/flutter/guide-threaded-messages.mdx diff --git a/docs.json b/docs.json index 6a5ae03e..fc62f85f 100644 --- a/docs.json +++ b/docs.json @@ -1708,7 +1708,8 @@ { "group": "Guides", "pages": [ - "ui-kit/flutter/multi-tab-chat-ui-guide" + "ui-kit/flutter/multi-tab-chat-ui-guide", + "ui-kit/flutter/guide-threaded-messages" ] }, "ui-kit/flutter/link/sample", diff --git a/ui-kit/flutter/guide-threaded-messages.mdx b/ui-kit/flutter/guide-threaded-messages.mdx new file mode 100644 index 00000000..9048f1a5 --- /dev/null +++ b/ui-kit/flutter/guide-threaded-messages.mdx @@ -0,0 +1,142 @@ +--- +title: "CometChat Flutter UI Kit — Threaded Messages" +sidebarTitle: "Threaded Messages" +--- + +## Table of Contents + +1. [Overview](#overview) +2. [What Are Threaded Messages?](#what-are-threaded-messages) +3. [Components Used](#components-used) +4. [Integration Steps](#integration-steps) + 1. [Show the “Reply in Thread” Option](#show-the-reply-in-thread-option) + 2. [Navigate to the Thread Screen](#navigate-to-the-thread-screen) + 3. [Sending a Threaded Message](#sending-a-threaded-message) + 4. [Fetching & Displaying Thread Replies](#fetching--displaying-thread-replies) +5. [Example User Flow](#example-user-flow) +6. [Summary](#summary) + +## Overview + +The sample app demonstrates how to use `CometChatMessageList` and `CometChatThreadedMessageList` to enable: +- Replying to messages in a thread +- Viewing all replies under a parent message +- Switching back to the main conversation + +## What Are Threaded Messages? + +Threaded messages let users reply to a specific message, creating a sub-conversation (thread) beneath the original. This keeps group chats organized when multiple topics arise simultaneously. + +## Components Used + +| Component | Role | +|-------------------------------|----------------------------------------------------------------------| +| `CometChatMessageList` | Displays the main chat list; provides `onThreadRepliesClick` callback. | +| `CometChatThreadedMessageList`| Fetches and displays replies for a parent message. | +| `CometChatMessageComposer` | Input field that sends replies with `parentMessageId`. | +| `CometChatThreadedHeader` | Shows the parent message and thread info at the top. | + +## Integration Steps + +### Show the “Reply in Thread” Option + +In your `messages.dart` (under `lib/messages/`), hook into the `onThreadRepliesClick` callback: + +```dart +CometChatMessageList( + onThreadRepliesClick: (BaseMessage message) { + Navigator.push( + context, + MaterialPageRoute( + builder: (_) => CometChatThread( + parentMessage: message, + ), + ), + ); + }, + // … other props +); +``` + +File reference: `sample_app/lib/messages/messages.dart` + +### Navigate to the Thread Screen + +Create a `CometChatThread` widget (e.g. in `lib/thread_screen/cometchat_thread.dart`) that: + +- Receives `parentMessage` via constructor. +- Displays the parent at top with `CometChatThreadedHeader`. +- Renders replies with `CometChatThreadedMessageList`. +- Includes a `CometChatMessageComposer` configured for threads. + +```dart +class CometChatThread extends StatelessWidget { + final BaseMessage parentMessage; + + CometChatThread({required this.parentMessage}); + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar(title: Text("Thread")), + body: Column( + children: [ + CometChatThreadedHeader(message: parentMessage), + Expanded( + child: CometChatThreadedMessageList( + parentMessageId: parentMessage.id, + ), + ), + CometChatMessageComposer( + parentMessageId: parentMessage.id, + ), + ], + ), + ); + } +} +``` + +File reference: `sample_app/lib/thread_screen/cometchat_thread.dart` + +### Sending a Threaded Message + +The composer automatically sends with a thread context when you pass `parentMessageId`: + +```dart +CometChatMessageComposer( + parentMessageId: parentMessage.id, + // …other props +); +``` + +### Fetching & Displaying Thread Replies + +Internally, `CometChatThreadedMessageList` uses: + +```dart +MessagesRequest request = MessagesRequestBuilder() + .setParentMessageId(parentMessageId) + .build(); + +request.fetchPrevious().then((replies) { + // Display these in the list +}); +``` + +## Example User Flow + +1. Tap the thread icon on a message in the main chat. +2. Navigate to the `CometChatThread` screen. +3. View the parent message at top and its replies below. +4. Compose and send a reply via the threaded composer. +5. All participants see and can join the thread. + +## Summary + +| Feature | Implementation Component | +|----------------------------|---------------------------------------------------------------| +| Show thread option | `CometChatMessageList.onThreadRepliesClick` | +| Navigate to thread screen | Push `CometChatThread(parentMessage)` | +| Display thread messages | `CometChatThreadedMessageList(parentMessageId)` | +| Send threaded reply | `CometChatMessageComposer(parentMessageId)` | From a5c7a304e8d0e12d0af01bac5da2ed44cc30730f Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Mon, 28 Jul 2025 18:07:52 +0530 Subject: [PATCH 002/196] flutter guide to block/unblock user --- docs.json | 3 +- ui-kit/flutter/guide-block-unblock-user.mdx | 158 ++++++++++++++++++++ ui-kit/flutter/guide-threaded-messages.mdx | 4 +- 3 files changed, 162 insertions(+), 3 deletions(-) create mode 100644 ui-kit/flutter/guide-block-unblock-user.mdx diff --git a/docs.json b/docs.json index fc62f85f..67841ff4 100644 --- a/docs.json +++ b/docs.json @@ -1709,7 +1709,8 @@ "group": "Guides", "pages": [ "ui-kit/flutter/multi-tab-chat-ui-guide", - "ui-kit/flutter/guide-threaded-messages" + "ui-kit/flutter/guide-threaded-messages", + "ui-kit/flutter/guide-block-unblock-user" ] }, "ui-kit/flutter/link/sample", diff --git a/ui-kit/flutter/guide-block-unblock-user.mdx b/ui-kit/flutter/guide-block-unblock-user.mdx new file mode 100644 index 00000000..4a1d8e30 --- /dev/null +++ b/ui-kit/flutter/guide-block-unblock-user.mdx @@ -0,0 +1,158 @@ +--- +title: "Implementing Block/Unblock User in Flutter with CometChat UIKit" +sidebarTitle: "Block/Unblock User" +--- + +## Table of Contents + +1. [Overview](#overview) +2. [Prerequisites](#prerequisites) +3. [Components](#components) +4. [Integration Steps](#integration-steps) + 1. [Navigate to User Info Screen](#navigate-to-user-info-screen) + 2. [Add “Block User” Button](#add-block-user-button) + 3. [Add “Unblock User” Button](#-add-unblock-user-button) +5. [Customization Options](#customization-options) +6. [Filtering / Edge Cases](#filtering--edge-cases) +7. [Error Handling & Blocked-User Handling](#error-handling--blocked-user-handling) +8. [Optional Context-Specific Notes](#optional-context-specific-notes) +9. [Summary / Feature Matrix](#summary--feature-matrix) +10. [Next Steps & Further Reading](#next-steps--further-reading) +11. [Best Practices](#best-practices) + +## Overview + +The Block User feature lets one user prevent another from sending messages or interacting with them. Essential for user privacy, spam control, and moderation in public or group chats. Users tap “Block” or “Unblock,” and the CometChat SDK enforces the block state. + +## Prerequisites + +- Flutter project with CometChat UIKit Flutter v5 installed +- Valid CometChat `appID`, `region`, and `authKey` initialized +- Navigation set up between your chat list (`lib/messages.dart`) and user-info screen + +## Components + +| Component | Role | +|---------------------------------------|---------------------------------------------------------| +| `CometChatUserInfo` | Displays user profile with block/unblock controls | +| `CometChatUIKit.blockUsers([...])` | SDK method to block specified user(s) | +| `CometChatUIKit.unblockUsers([...])` | SDK method to unblock specified user(s) | +| `ElevatedButton` | Flutter widget for block/unblock actions | + +## Integration Steps + +### 4.1 Navigate to User Info Screen + +Open the user-info screen when tapping the info icon in chat: + +```dart +IconButton( + icon: Icon(Icons.info_outline), + onPressed: () { + Navigator.push( + context, + MaterialPageRoute( + builder: (_) => CometChatUserInfo(user: tappedUser), + ), + ); + }, +); +``` + +File reference: `lib/messages.dart` + +### 4.2 Add “Block User” Button + +Add a button that blocks the target user: + +```dart +ElevatedButton( + onPressed: () async { + try { + await CometChatUIKit.blockUsers([user.uid]); + ScaffoldMessenger.of(context).showSnackBar( + SnackBar(content: Text('\${user.name} has been blocked')), + ); + } catch (e) { + ScaffoldMessenger.of(context).showSnackBar( + SnackBar(content: Text('Error blocking user: \$e')), + ); + } + }, + child: Text('Block User'), +); +``` + +File reference: `lib/user_info/cometchat_user_info.dart` + +### 4.3 Add “Unblock User” Button + +Add a button that unblocks the target user: + +```dart +ElevatedButton( + onPressed: () async { + try { + await CometChatUIKit.unblockUsers([user.uid]); + ScaffoldMessenger.of(context).showSnackBar( + SnackBar(content: Text('\${user.name} has been unblocked')), + ); + } catch (e) { + ScaffoldMessenger.of(context).showSnackBar( + SnackBar(content: Text('Error unblocking user: \$e')), + ); + } + }, + child: Text('Unblock User'), +); +``` + +File reference: `lib/user_info/cometchat_user_info.dart` + +## Customization Options + +- **Button Styling:** Use `ElevatedButton.styleFrom(...)` to customize colors, padding, and shape. +- **Conditional Rendering:** Display “Block” or “Unblock” based on `user.blockedByMe` state. +- **Modal Confirmation:** Wrap actions in `showDialog` for “Are you sure?” prompts. + +## Filtering / Edge Cases + +- **Self-Block Prevention:** Disable the button if `user.uid == loggedInUser.uid`. +- **Offline Users:** Optionally disable or queue actions when network is unavailable. + +## Error Handling & Blocked-User Handling + +- **SnackBars:** Show success or error messages via `ScaffoldMessenger`. +- **Retry Logic:** Offer a “Retry” action in the SnackBar on failure. +- **UI State:** Disable the button while the SDK call is in progress to prevent duplicates. + +## Optional Context-Specific Notes + +**Group vs. User Blocking:** +This feature covers only user-to-user blocking. For group moderation (ban or remove members), see `lib/group_info/cometchat_group_info.dart` methods like `removeMembers` and `banMembers`. + +## Summary / Feature Matrix + +| Feature | File | Method | +|------------------------|----------------------------------------------|---------------------------------------------| +| Open User Info | `lib/messages.dart` | `Navigator.push(...)` | +| Block User | `lib/user_info/cometchat_user_info.dart` | `CometChatUIKit.blockUsers([...])` | +| Unblock User | `lib/user_info/cometchat_user_info.dart` | `CometChatUIKit.unblockUsers([...])` | +| Group Member Mgmt | `lib/group_info/cometchat_group_info.dart` | `removeMembers`, `banMembers` | + +## Next Steps & Further Reading + +- **Full Sample App:** + https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app +- **CometChat Flutter Docs:** + https://prodocs.cometchat.com/docs/flutter-quickstart +- **Group Moderation:** + Explore `banMembers` and `kickGroupMember` for group-level controls. + +## Best Practices + +- Keep code snippets minimal and focused. +- Explain the rationale for each step. +- Reference exact file paths for clarity. +- Provide actionable UI feedback (SnackBars, disabled states). +- Guard against self-blocks and handle network errors gracefully. diff --git a/ui-kit/flutter/guide-threaded-messages.mdx b/ui-kit/flutter/guide-threaded-messages.mdx index 9048f1a5..a6134e6c 100644 --- a/ui-kit/flutter/guide-threaded-messages.mdx +++ b/ui-kit/flutter/guide-threaded-messages.mdx @@ -9,10 +9,10 @@ sidebarTitle: "Threaded Messages" 2. [What Are Threaded Messages?](#what-are-threaded-messages) 3. [Components Used](#components-used) 4. [Integration Steps](#integration-steps) - 1. [Show the “Reply in Thread” Option](#show-the-reply-in-thread-option) + 1. [Show the “Reply in Thread” Option](#show-the-“reply-in-thread”-option) 2. [Navigate to the Thread Screen](#navigate-to-the-thread-screen) 3. [Sending a Threaded Message](#sending-a-threaded-message) - 4. [Fetching & Displaying Thread Replies](#fetching--displaying-thread-replies) + 4. [Fetching & Displaying Thread Replies](#fetching-%26-displaying-thread-replies) 5. [Example User Flow](#example-user-flow) 6. [Summary](#summary) From cfff540c123f685a3a380208b790e5a45de0b046 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Mon, 28 Jul 2025 18:12:19 +0530 Subject: [PATCH 003/196] Update guide-block-unblock-user.mdx --- ui-kit/flutter/guide-block-unblock-user.mdx | 141 +++++++++----------- 1 file changed, 66 insertions(+), 75 deletions(-) diff --git a/ui-kit/flutter/guide-block-unblock-user.mdx b/ui-kit/flutter/guide-block-unblock-user.mdx index 4a1d8e30..156cf893 100644 --- a/ui-kit/flutter/guide-block-unblock-user.mdx +++ b/ui-kit/flutter/guide-block-unblock-user.mdx @@ -3,48 +3,53 @@ title: "Implementing Block/Unblock User in Flutter with CometChat UIKit" sidebarTitle: "Block/Unblock User" --- -## Table of Contents - -1. [Overview](#overview) -2. [Prerequisites](#prerequisites) -3. [Components](#components) -4. [Integration Steps](#integration-steps) - 1. [Navigate to User Info Screen](#navigate-to-user-info-screen) - 2. [Add “Block User” Button](#add-block-user-button) - 3. [Add “Unblock User” Button](#-add-unblock-user-button) -5. [Customization Options](#customization-options) -6. [Filtering / Edge Cases](#filtering--edge-cases) -7. [Error Handling & Blocked-User Handling](#error-handling--blocked-user-handling) -8. [Optional Context-Specific Notes](#optional-context-specific-notes) -9. [Summary / Feature Matrix](#summary--feature-matrix) -10. [Next Steps & Further Reading](#next-steps--further-reading) -11. [Best Practices](#best-practices) - -## Overview - -The Block User feature lets one user prevent another from sending messages or interacting with them. Essential for user privacy, spam control, and moderation in public or group chats. Users tap “Block” or “Unblock,” and the CometChat SDK enforces the block state. - -## Prerequisites - -- Flutter project with CometChat UIKit Flutter v5 installed -- Valid CometChat `appID`, `region`, and `authKey` initialized -- Navigation set up between your chat list (`lib/messages.dart`) and user-info screen +## 1. Title & TL;DR + +- **Title:** Implementing Block/Unblock User in Flutter with CometChat UIKit +- **TL;DR:** Enable users to block and unblock other users in your Flutter chat app by integrating CometChat’s `blockUsers` and `unblockUsers` methods with a simple UI. + +## 2. Table of Contents + +1. [Overview](#3-overview) +2. [Prerequisites](#4-prerequisites) +3. [Components](#5-components) +4. [Integration Steps](#6-integration-steps) + 4.1 [Navigate to User Info Screen](#61-navigate-to-user-info-screen) + 4.2 [Add “Block User” Button](#62-add-block-user-button) + 4.3 [Add “Unblock User” Button](#63-add-unblock-user-button) +5. [Customization Options](#7-customization-options) +6. [Filtering / Edge Cases](#8-filtering--edge-cases) +7. [Error Handling & Blocked-User Handling](#9-error-handling--blocked-user-handling) +8. [(Optional) Context-Specific Notes](#10-optional-context-specific-notes) +9. [Summary / Feature Matrix](#11-summary--feature-matrix) +10. [Next Steps & Further Reading](#12-next-steps--further-reading) -## Components +## 3. Overview + +- **What:** The Block User feature lets one user prevent another user from sending messages or interacting with them. +- **Why:** Essential for user privacy, spam control, and moderation in public or group chats. +- **Result:** A UI where users tap “Block” or “Unblock,” and the CometChat SDK enforces the block state. + +## 4. Prerequisites + +- Flutter project with **CometChat UIKit Flutter v5** installed +- Valid CometChat **appID**, **region**, and **authKey** initialized +- Navigation set up between your chat list (`lib/messages.dart`) and user-info screen -| Component | Role | -|---------------------------------------|---------------------------------------------------------| -| `CometChatUserInfo` | Displays user profile with block/unblock controls | -| `CometChatUIKit.blockUsers([...])` | SDK method to block specified user(s) | -| `CometChatUIKit.unblockUsers([...])` | SDK method to unblock specified user(s) | -| `ElevatedButton` | Flutter widget for block/unblock actions | +## 5. Components -## Integration Steps +| Component | Role | +|----------------------------------------|-----------------------------------------------------------| +| `CometChatUserInfo` | Displays user profile with block/unblock controls | +| `CometChatUIKit.blockUsers([...])` | SDK method to block specified user(s) | +| `CometChatUIKit.unblockUsers([...])` | SDK method to unblock specified user(s) | +| `ElevatedButton` | Flutter widget for block/unblock actions | -### 4.1 Navigate to User Info Screen +## 6. Integration Steps -Open the user-info screen when tapping the info icon in chat: +### 6.1 Navigate to User Info Screen +**Goal:** Open the user-info screen when tapping the info icon in chat. ```dart IconButton( icon: Icon(Icons.info_outline), @@ -58,13 +63,12 @@ IconButton( }, ); ``` +File reference: `lib/messages.dart` +**Why:** Allows the user to view profile details and access block/unblock controls. -File reference: `lib/messages.dart` - -### 4.2 Add “Block User” Button - -Add a button that blocks the target user: +### 6.2 Add “Block User” Button +**Goal:** Let users block another user via the SDK. ```dart ElevatedButton( onPressed: () async { @@ -82,13 +86,12 @@ ElevatedButton( child: Text('Block User'), ); ``` +File reference: `lib/user_info/cometchat_user_info.dart` +**Why:** Calls `blockUsers`, then provides user feedback. -File reference: `lib/user_info/cometchat_user_info.dart` - -### 4.3 Add “Unblock User” Button - -Add a button that unblocks the target user: +### 6.3 Add “Unblock User” Button +**Goal:** Allow users to undo the block. ```dart ElevatedButton( onPressed: () async { @@ -106,53 +109,41 @@ ElevatedButton( child: Text('Unblock User'), ); ``` +File reference: `lib/user_info/cometchat_user_info.dart` +**Why:** Calls `unblockUsers`, then provides user feedback. -File reference: `lib/user_info/cometchat_user_info.dart` - -## Customization Options +## 7. Customization Options - **Button Styling:** Use `ElevatedButton.styleFrom(...)` to customize colors, padding, and shape. - **Conditional Rendering:** Display “Block” or “Unblock” based on `user.blockedByMe` state. - **Modal Confirmation:** Wrap actions in `showDialog` for “Are you sure?” prompts. -## Filtering / Edge Cases +## 8. Filtering / Edge Cases - **Self-Block Prevention:** Disable the button if `user.uid == loggedInUser.uid`. - **Offline Users:** Optionally disable or queue actions when network is unavailable. -## Error Handling & Blocked-User Handling +## 9. Error Handling & Blocked-User Handling - **SnackBars:** Show success or error messages via `ScaffoldMessenger`. - **Retry Logic:** Offer a “Retry” action in the SnackBar on failure. - **UI State:** Disable the button while the SDK call is in progress to prevent duplicates. -## Optional Context-Specific Notes +## 10. (Optional) Context-Specific Notes **Group vs. User Blocking:** -This feature covers only user-to-user blocking. For group moderation (ban or remove members), see `lib/group_info/cometchat_group_info.dart` methods like `removeMembers` and `banMembers`. - -## Summary / Feature Matrix - -| Feature | File | Method | -|------------------------|----------------------------------------------|---------------------------------------------| -| Open User Info | `lib/messages.dart` | `Navigator.push(...)` | -| Block User | `lib/user_info/cometchat_user_info.dart` | `CometChatUIKit.blockUsers([...])` | -| Unblock User | `lib/user_info/cometchat_user_info.dart` | `CometChatUIKit.unblockUsers([...])` | -| Group Member Mgmt | `lib/group_info/cometchat_group_info.dart` | `removeMembers`, `banMembers` | +This guide covers only user-to-user blocking. For group moderation (ban or remove members), see `lib/group_info/cometchat_group_info.dart` methods like `removeMembers` and `banMembers`. -## Next Steps & Further Reading +## 11. Summary / Feature Matrix -- **Full Sample App:** - https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app -- **CometChat Flutter Docs:** - https://prodocs.cometchat.com/docs/flutter-quickstart -- **Group Moderation:** - Explore `banMembers` and `kickGroupMember` for group-level controls. +| Feature | File | Method Used | +|-----------------|--------------------------------------------|---------------------------------------| +| Open User Info | `lib/messages.dart` | `Navigator.push(...)` | +| Block User | `lib/user_info/cometchat_user_info.dart` | `CometChatUIKit.blockUsers([...])` | +| Unblock User | `lib/user_info/cometchat_user_info.dart` | `CometChatUIKit.unblockUsers([...])` | +| Group Members | `lib/group_info/cometchat_group_info.dart` | `removeMembers`, `banMembers` | -## Best Practices +## 12. Next Steps & Further Reading -- Keep code snippets minimal and focused. -- Explain the rationale for each step. -- Reference exact file paths for clarity. -- Provide actionable UI feedback (SnackBars, disabled states). -- Guard against self-blocks and handle network errors gracefully. +- **Full Sample App:** https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app +- **CometChat Flutter Docs:** https://prodocs.cometchat.com/docs/flutter-quickstart From 119146ea9c40f9c3c90cacfdcf8084e205f5a4cb Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Mon, 28 Jul 2025 18:12:43 +0530 Subject: [PATCH 004/196] Update guide-threaded-messages.mdx --- ui-kit/flutter/guide-threaded-messages.mdx | 156 ++++++++++++--------- 1 file changed, 91 insertions(+), 65 deletions(-) diff --git a/ui-kit/flutter/guide-threaded-messages.mdx b/ui-kit/flutter/guide-threaded-messages.mdx index a6134e6c..6b7860ea 100644 --- a/ui-kit/flutter/guide-threaded-messages.mdx +++ b/ui-kit/flutter/guide-threaded-messages.mdx @@ -3,72 +3,75 @@ title: "CometChat Flutter UI Kit — Threaded Messages" sidebarTitle: "Threaded Messages" --- -## Table of Contents +## 1. Title & TL;DR -1. [Overview](#overview) -2. [What Are Threaded Messages?](#what-are-threaded-messages) -3. [Components Used](#components-used) -4. [Integration Steps](#integration-steps) - 1. [Show the “Reply in Thread” Option](#show-the-“reply-in-thread”-option) - 2. [Navigate to the Thread Screen](#navigate-to-the-thread-screen) - 3. [Sending a Threaded Message](#sending-a-threaded-message) - 4. [Fetching & Displaying Thread Replies](#fetching-%26-displaying-thread-replies) -5. [Example User Flow](#example-user-flow) -6. [Summary](#summary) +- **Title:** CometChat Flutter UI Kit — Threaded Messages +- **TL;DR:** Enhance your Flutter chat app with threaded messaging by integrating CometChat’s `CometChatThreadedMessageList` and `CometChatMessageList` components to reply to messages in threads and view focused sub-conversations seamlessly. -## Overview +## 2. Table of Contents -The sample app demonstrates how to use `CometChatMessageList` and `CometChatThreadedMessageList` to enable: -- Replying to messages in a thread -- Viewing all replies under a parent message -- Switching back to the main conversation +1. [Overview](#3-overview) +2. [Prerequisites](#4-prerequisites) +3. [Components](#5-components) +4. [Integration Steps](#6-integration-steps) + 4.1 [Show the “Reply in Thread” Option](#61-show-the-reply-in-thread-option) + 4.2 [Navigate to the Thread Screen](#62-navigate-to-the-thread-screen) + 4.3 [Send a Threaded Message](#63-send-a-threaded-message) + 4.4 [Fetch & Display Thread Replies](#64-fetch--display-thread-replies) +5. [Customization Options](#7-customization-options) +6. [Filtering / Edge Cases](#8-filtering--edge-cases) +7. [Error Handling & Edge Cases](#9-error-handling--edge-cases) +8. [Optional Context-Specific Notes](#10-optional-context-specific-notes) +9. [Summary / Feature Matrix](#11-summary--feature-matrix) +10. [Next Steps & Further Reading](#12-next-steps--further-reading) -## What Are Threaded Messages? +## 3. Overview -Threaded messages let users reply to a specific message, creating a sub-conversation (thread) beneath the original. This keeps group chats organized when multiple topics arise simultaneously. +The sample app demonstrates how to enable threaded messaging in Flutter using CometChat’s UI Kit: -## Components Used +- Reply to specific messages to start focused sub-conversations. +- View all replies grouped under the parent message. +- Seamlessly switch back to the main conversation. -| Component | Role | -|-------------------------------|----------------------------------------------------------------------| -| `CometChatMessageList` | Displays the main chat list; provides `onThreadRepliesClick` callback. | -| `CometChatThreadedMessageList`| Fetches and displays replies for a parent message. | -| `CometChatMessageComposer` | Input field that sends replies with `parentMessageId`. | -| `CometChatThreadedHeader` | Shows the parent message and thread info at the top. | +## 4. Prerequisites -## Integration Steps +- A Flutter project with **CometChat UIKit Flutter v5** installed. +- Initialized CometChat credentials (`appID`, `region`, `authKey`). +- Navigation set up (e.g., `lib/messages.dart` to `lib/thread_screen/cometchat_thread.dart`). -### Show the “Reply in Thread” Option +## 5. Components -In your `messages.dart` (under `lib/messages/`), hook into the `onThreadRepliesClick` callback: +| Component | Role | +|------------------------------------|--------------------------------------------------------------| +| `CometChatMessageList` | Displays main chat; provides `onThreadRepliesClick` callback.| +| `CometChatThreadedMessageList` | Fetches and displays replies for a parent message. | +| `CometChatMessageComposer` | Sends new messages; pass `parentMessageId` to send replies. | +| `CometChatThreadedHeader` | Shows the parent message and thread context at the top. | +## 6. Integration Steps + +### 6.1 Show the “Reply in Thread” Option + +**Goal:** Trigger thread view when tapping the thread icon. ```dart CometChatMessageList( onThreadRepliesClick: (BaseMessage message) { Navigator.push( context, MaterialPageRoute( - builder: (_) => CometChatThread( - parentMessage: message, - ), + builder: (_) => CometChatThread(parentMessage: message), ), ); }, - // … other props + // …other props ); ``` +File: `sample_app/lib/messages/messages.dart` +**Why:** Captures the user's intent to view or add to a thread. -File reference: `sample_app/lib/messages/messages.dart` - -### Navigate to the Thread Screen - -Create a `CometChatThread` widget (e.g. in `lib/thread_screen/cometchat_thread.dart`) that: - -- Receives `parentMessage` via constructor. -- Displays the parent at top with `CometChatThreadedHeader`. -- Renders replies with `CometChatThreadedMessageList`. -- Includes a `CometChatMessageComposer` configured for threads. +### 6.2 Navigate to the Thread Screen +**Goal:** Display a dedicated thread view. ```dart class CometChatThread extends StatelessWidget { final BaseMessage parentMessage; @@ -96,47 +99,70 @@ class CometChatThread extends StatelessWidget { } } ``` +File: `sample_app/lib/thread_screen/cometchat_thread.dart` +**Why:** Provides a focused UI for thread interactions. -File reference: `sample_app/lib/thread_screen/cometchat_thread.dart` - -### Sending a Threaded Message - -The composer automatically sends with a thread context when you pass `parentMessageId`: +### 6.3 Send a Threaded Message +**Goal:** Send replies in the context of a thread. ```dart CometChatMessageComposer( parentMessageId: parentMessage.id, - // …other props + // …other composer props ); ``` +File: `cometchat_thread.dart` +**Why:** Automatically associates new messages with the parent thread. -### Fetching & Displaying Thread Replies - -Internally, `CometChatThreadedMessageList` uses: +### 6.4 Fetch & Display Thread Replies +**Goal:** Retrieve and show all replies under a parent message. ```dart MessagesRequest request = MessagesRequestBuilder() .setParentMessageId(parentMessageId) .build(); request.fetchPrevious().then((replies) { - // Display these in the list + // Render these replies in the list }); ``` +File: `cometchat_thread.dart` +**Why:** Ensures only relevant threaded messages are shown. + +## 7. Customization Options + +- **Header Styling:** Customize `CometChatThreadedHeader` appearance (colors, fonts). +- **List Pagination:** Adjust `limit` in `MessagesRequestBuilder`. +- **Composer Placeholder:** Change placeholder text based on thread context. + +## 8. Filtering / Edge Cases + +- **Parent Deleted:** Show a fallback message or disable composer if parent is deleted. +- **No Replies:** Display an empty state (e.g., “No replies yet”). +- **Offline Mode:** Queue thread operations or show connectivity indicators. + +## 9. Error Handling & Edge Cases + +- **Fetch Failures:** Show error UI with retry option on `fetchPrevious` errors. +- **Send Failures:** Display SnackBar on composer send errors; allow retry. +- **Loading States:** Show loading indicators during fetch/send operations. + +## 10. Optional Context-Specific Notes + +- **Group vs. Direct Threads:** Threads work the same for groups and 1:1 chats. +- **Blocked Users:** Threading respects block state; blocked users cannot send replies. -## Example User Flow +## 11. Summary / Feature Matrix -1. Tap the thread icon on a message in the main chat. -2. Navigate to the `CometChatThread` screen. -3. View the parent message at top and its replies below. -4. Compose and send a reply via the threaded composer. -5. All participants see and can join the thread. +| Feature | Component / Method | +|-------------------------------|------------------------------------------------| +| Show thread option | `CometChatMessageList.onThreadRepliesClick` | +| Thread view screen | `CometChatThread` widget | +| Display threaded messages | `CometChatThreadedMessageList(parentMessageId)`| +| Send threaded message | `CometChatMessageComposer(parentMessageId)` | +| Fetch thread replies | `MessagesRequestBuilder.setParentMessageId` | -## Summary +## 12. Next Steps & Further Reading -| Feature | Implementation Component | -|----------------------------|---------------------------------------------------------------| -| Show thread option | `CometChatMessageList.onThreadRepliesClick` | -| Navigate to thread screen | Push `CometChatThread(parentMessage)` | -| Display thread messages | `CometChatThreadedMessageList(parentMessageId)` | -| Send threaded reply | `CometChatMessageComposer(parentMessageId)` | +- **Full Sample App:** + https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app \ No newline at end of file From 225137d28845eb80bfcc800edf33caa2d5080826 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Mon, 28 Jul 2025 18:18:09 +0530 Subject: [PATCH 005/196] Update guide-threaded-messages.mdx --- ui-kit/flutter/guide-threaded-messages.mdx | 95 ++++++++++++---------- 1 file changed, 54 insertions(+), 41 deletions(-) diff --git a/ui-kit/flutter/guide-threaded-messages.mdx b/ui-kit/flutter/guide-threaded-messages.mdx index 6b7860ea..58656815 100644 --- a/ui-kit/flutter/guide-threaded-messages.mdx +++ b/ui-kit/flutter/guide-threaded-messages.mdx @@ -3,29 +3,26 @@ title: "CometChat Flutter UI Kit — Threaded Messages" sidebarTitle: "Threaded Messages" --- -## 1. Title & TL;DR - -- **Title:** CometChat Flutter UI Kit — Threaded Messages -- **TL;DR:** Enhance your Flutter chat app with threaded messaging by integrating CometChat’s `CometChatThreadedMessageList` and `CometChatMessageList` components to reply to messages in threads and view focused sub-conversations seamlessly. - -## 2. Table of Contents - -1. [Overview](#3-overview) -2. [Prerequisites](#4-prerequisites) -3. [Components](#5-components) -4. [Integration Steps](#6-integration-steps) - 4.1 [Show the “Reply in Thread” Option](#61-show-the-reply-in-thread-option) - 4.2 [Navigate to the Thread Screen](#62-navigate-to-the-thread-screen) - 4.3 [Send a Threaded Message](#63-send-a-threaded-message) - 4.4 [Fetch & Display Thread Replies](#64-fetch--display-thread-replies) -5. [Customization Options](#7-customization-options) -6. [Filtering / Edge Cases](#8-filtering--edge-cases) -7. [Error Handling & Edge Cases](#9-error-handling--edge-cases) -8. [Optional Context-Specific Notes](#10-optional-context-specific-notes) -9. [Summary / Feature Matrix](#11-summary--feature-matrix) -10. [Next Steps & Further Reading](#12-next-steps--further-reading) - -## 3. Overview +Enhance your Flutter chat app with threaded messaging by integrating CometChat’s `CometChatThreadedMessageList` and `CometChatMessageList` components to reply to messages in threads and view focused sub-conversations seamlessly. + +## Table of Contents + +1. [Overview](#overview) +2. [Prerequisites](#prerequisites) +3. [Components](#components) +4. [Integration Steps](#integration-steps) + - [Show the “Reply in Thread” Option](#show-the-reply-in-thread-option) + - [Navigate to the Thread Screen](#navigate-to-the-thread-screen) + - [Send a Threaded Message](#send-a-threaded-message) + - [Fetch & Display Thread Replies](#fetch--display-thread-replies) +5. [Customization Options](#customization-options) +6. [Filtering / Edge Cases](#filtering--edge-cases) +7. [Error Handling & Edge Cases](#error-handling--edge-cases) +8. [Optional Context-Specific Notes](#optional-context-specific-notes) +9. [Summary / Feature Matrix](#summary--feature-matrix) +10. [Next Steps & Further Reading](#next-steps--further-reading) + +## Overview The sample app demonstrates how to enable threaded messaging in Flutter using CometChat’s UI Kit: @@ -33,13 +30,13 @@ The sample app demonstrates how to enable threaded messaging in Flutter using Co - View all replies grouped under the parent message. - Seamlessly switch back to the main conversation. -## 4. Prerequisites +## Prerequisites - A Flutter project with **CometChat UIKit Flutter v5** installed. - Initialized CometChat credentials (`appID`, `region`, `authKey`). - Navigation set up (e.g., `lib/messages.dart` to `lib/thread_screen/cometchat_thread.dart`). -## 5. Components +## Components | Component | Role | |------------------------------------|--------------------------------------------------------------| @@ -48,9 +45,9 @@ The sample app demonstrates how to enable threaded messaging in Flutter using Co | `CometChatMessageComposer` | Sends new messages; pass `parentMessageId` to send replies. | | `CometChatThreadedHeader` | Shows the parent message and thread context at the top. | -## 6. Integration Steps +## Integration Steps -### 6.1 Show the “Reply in Thread” Option +### Show the “Reply in Thread” Option **Goal:** Trigger thread view when tapping the thread icon. ```dart @@ -66,10 +63,13 @@ CometChatMessageList( // …other props ); ``` -File: `sample_app/lib/messages/messages.dart` + +**File reference:** +[`sample_app/lib/messages/messages.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/messages/messages.dart) + **Why:** Captures the user's intent to view or add to a thread. -### 6.2 Navigate to the Thread Screen +### Navigate to the Thread Screen **Goal:** Display a dedicated thread view. ```dart @@ -99,10 +99,13 @@ class CometChatThread extends StatelessWidget { } } ``` -File: `sample_app/lib/thread_screen/cometchat_thread.dart` + +**File reference:** +[`lib/thread_screen/cometchat_thread.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart) + **Why:** Provides a focused UI for thread interactions. -### 6.3 Send a Threaded Message +### Send a Threaded Message **Goal:** Send replies in the context of a thread. ```dart @@ -111,10 +114,13 @@ CometChatMessageComposer( // …other composer props ); ``` -File: `cometchat_thread.dart` + +**File reference:** +[`lib/thread_screen/cometchat_thread.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart) + **Why:** Automatically associates new messages with the parent thread. -### 6.4 Fetch & Display Thread Replies +### Fetch & Display Thread Replies **Goal:** Retrieve and show all replies under a parent message. ```dart @@ -126,33 +132,36 @@ request.fetchPrevious().then((replies) { // Render these replies in the list }); ``` -File: `cometchat_thread.dart` + +**File reference:** +[`lib/thread_screen/cometchat_thread.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart) + **Why:** Ensures only relevant threaded messages are shown. -## 7. Customization Options +## Customization Options - **Header Styling:** Customize `CometChatThreadedHeader` appearance (colors, fonts). - **List Pagination:** Adjust `limit` in `MessagesRequestBuilder`. - **Composer Placeholder:** Change placeholder text based on thread context. -## 8. Filtering / Edge Cases +## Filtering / Edge Cases - **Parent Deleted:** Show a fallback message or disable composer if parent is deleted. - **No Replies:** Display an empty state (e.g., “No replies yet”). - **Offline Mode:** Queue thread operations or show connectivity indicators. -## 9. Error Handling & Edge Cases +## Error Handling & Edge Cases - **Fetch Failures:** Show error UI with retry option on `fetchPrevious` errors. - **Send Failures:** Display SnackBar on composer send errors; allow retry. - **Loading States:** Show loading indicators during fetch/send operations. -## 10. Optional Context-Specific Notes +## Optional Context-Specific Notes - **Group vs. Direct Threads:** Threads work the same for groups and 1:1 chats. - **Blocked Users:** Threading respects block state; blocked users cannot send replies. -## 11. Summary / Feature Matrix +## Summary / Feature Matrix | Feature | Component / Method | |-------------------------------|------------------------------------------------| @@ -162,7 +171,11 @@ request.fetchPrevious().then((replies) { | Send threaded message | `CometChatMessageComposer(parentMessageId)` | | Fetch thread replies | `MessagesRequestBuilder.setParentMessageId` | -## 12. Next Steps & Further Reading +## Next Steps & Further Reading - **Full Sample App:** - https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app \ No newline at end of file + https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app +- **Flutter Quickstart:** + https://prodocs.cometchat.com/docs/flutter-quickstart +- **Threaded Messaging Docs:** + https://prodocs.cometchat.com/docs/flutter-threaded-messaging From feb75fcd65a3b1018407a9501a4c09c00d958b3c Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Mon, 28 Jul 2025 18:19:52 +0530 Subject: [PATCH 006/196] Update guide-threaded-messages.mdx --- ui-kit/flutter/guide-threaded-messages.mdx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/ui-kit/flutter/guide-threaded-messages.mdx b/ui-kit/flutter/guide-threaded-messages.mdx index 58656815..a757e2fc 100644 --- a/ui-kit/flutter/guide-threaded-messages.mdx +++ b/ui-kit/flutter/guide-threaded-messages.mdx @@ -175,7 +175,3 @@ request.fetchPrevious().then((replies) { - **Full Sample App:** https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app -- **Flutter Quickstart:** - https://prodocs.cometchat.com/docs/flutter-quickstart -- **Threaded Messaging Docs:** - https://prodocs.cometchat.com/docs/flutter-threaded-messaging From eaef6379cefbf298f284ae0a702b6009030a5975 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Mon, 28 Jul 2025 18:21:34 +0530 Subject: [PATCH 007/196] Update guide-block-unblock-user.mdx --- ui-kit/flutter/guide-block-unblock-user.mdx | 114 ++++++++++---------- 1 file changed, 56 insertions(+), 58 deletions(-) diff --git a/ui-kit/flutter/guide-block-unblock-user.mdx b/ui-kit/flutter/guide-block-unblock-user.mdx index 156cf893..fdd57c4e 100644 --- a/ui-kit/flutter/guide-block-unblock-user.mdx +++ b/ui-kit/flutter/guide-block-unblock-user.mdx @@ -3,51 +3,46 @@ title: "Implementing Block/Unblock User in Flutter with CometChat UIKit" sidebarTitle: "Block/Unblock User" --- -## 1. Title & TL;DR +Enable users to block and unblock other users in your Flutter chat app by integrating CometChat’s `blockUsers` and `unblockUsers` methods with a simple UI. -- **Title:** Implementing Block/Unblock User in Flutter with CometChat UIKit -- **TL;DR:** Enable users to block and unblock other users in your Flutter chat app by integrating CometChat’s `blockUsers` and `unblockUsers` methods with a simple UI. +## Table of Contents -## 2. Table of Contents +1. [Overview](#overview) +2. [Prerequisites](#prerequisites) +3. [Components](#components) +4. [Integration Steps](#integration-steps) + - [Navigate to User Info Screen](#navigate-to-user-info-screen) + - [Add “Block User” Button](#add-block-user-button) + - [Add “Unblock User” Button](#add-unblock-user-button) +5. [Customization Options](#customization-options) +6. [Filtering / Edge Cases](#filtering--edge-cases) +7. [Error Handling & Blocked-User Handling](#error-handling--blocked-user-handling) +8. [Optional Context-Specific Notes](#optional-context-specific-notes) +9. [Summary / Feature Matrix](#summary--feature-matrix) +10. [Next Steps & Further Reading](#next-steps--further-reading) -1. [Overview](#3-overview) -2. [Prerequisites](#4-prerequisites) -3. [Components](#5-components) -4. [Integration Steps](#6-integration-steps) - 4.1 [Navigate to User Info Screen](#61-navigate-to-user-info-screen) - 4.2 [Add “Block User” Button](#62-add-block-user-button) - 4.3 [Add “Unblock User” Button](#63-add-unblock-user-button) -5. [Customization Options](#7-customization-options) -6. [Filtering / Edge Cases](#8-filtering--edge-cases) -7. [Error Handling & Blocked-User Handling](#9-error-handling--blocked-user-handling) -8. [(Optional) Context-Specific Notes](#10-optional-context-specific-notes) -9. [Summary / Feature Matrix](#11-summary--feature-matrix) -10. [Next Steps & Further Reading](#12-next-steps--further-reading) +## Overview -## 3. Overview +The Block User feature lets one user prevent another from sending messages or interacting with them. Essential for user privacy, spam control, and moderation in public or group chats. Users tap “Block” or “Unblock,” and the CometChat SDK enforces the block state. -- **What:** The Block User feature lets one user prevent another user from sending messages or interacting with them. -- **Why:** Essential for user privacy, spam control, and moderation in public or group chats. -- **Result:** A UI where users tap “Block” or “Unblock,” and the CometChat SDK enforces the block state. +## Prerequisites -## 4. Prerequisites +- A Flutter project with **CometChat UIKit Flutter v5** installed +- Initialized CometChat credentials (`appID`, `region`, `authKey`) +- Navigation set up between your chat list and user-info screen (`lib/messages.dart`) -- Flutter project with **CometChat UIKit Flutter v5** installed -- Valid CometChat **appID**, **region**, and **authKey** initialized -- Navigation set up between your chat list (`lib/messages.dart`) and user-info screen +## Components -## 5. Components +| Component | Role | +|-------------------------------------|---------------------------------------------------------| +| `CometChatUserInfo` | Displays user profile with block/unblock controls | +| `CometChatUIKit.blockUsers([...])` | SDK method to block specified user(s) | +| `CometChatUIKit.unblockUsers([...])` | SDK method to unblock specified user(s) | +| `ElevatedButton` | Flutter widget for block/unblock actions | -| Component | Role | -|----------------------------------------|-----------------------------------------------------------| -| `CometChatUserInfo` | Displays user profile with block/unblock controls | -| `CometChatUIKit.blockUsers([...])` | SDK method to block specified user(s) | -| `CometChatUIKit.unblockUsers([...])` | SDK method to unblock specified user(s) | -| `ElevatedButton` | Flutter widget for block/unblock actions | +## Integration Steps -## 6. Integration Steps - -### 6.1 Navigate to User Info Screen +### Navigate to User Info Screen **Goal:** Open the user-info screen when tapping the info icon in chat. ```dart @@ -63,10 +58,11 @@ IconButton( }, ); ``` -File reference: `lib/messages.dart` -**Why:** Allows the user to view profile details and access block/unblock controls. -### 6.2 Add “Block User” Button +**File reference:** +[`sample_app/lib/messages/messages.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/messages/messages.dart) + +### Add “Block User” Button **Goal:** Let users block another user via the SDK. ```dart @@ -86,10 +82,11 @@ ElevatedButton( child: Text('Block User'), ); ``` -File reference: `lib/user_info/cometchat_user_info.dart` -**Why:** Calls `blockUsers`, then provides user feedback. -### 6.3 Add “Unblock User” Button +**File reference:** +[`sample_app/lib/user_info/cometchat_user_info.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info.dart) + +### Add “Unblock User” Button **Goal:** Allow users to undo the block. ```dart @@ -109,41 +106,42 @@ ElevatedButton( child: Text('Unblock User'), ); ``` -File reference: `lib/user_info/cometchat_user_info.dart` -**Why:** Calls `unblockUsers`, then provides user feedback. -## 7. Customization Options +**File reference:** +[`sample_app/lib/user_info/cometchat_user_info.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info.dart) + +## Customization Options - **Button Styling:** Use `ElevatedButton.styleFrom(...)` to customize colors, padding, and shape. - **Conditional Rendering:** Display “Block” or “Unblock” based on `user.blockedByMe` state. - **Modal Confirmation:** Wrap actions in `showDialog` for “Are you sure?” prompts. -## 8. Filtering / Edge Cases +## Filtering / Edge Cases - **Self-Block Prevention:** Disable the button if `user.uid == loggedInUser.uid`. - **Offline Users:** Optionally disable or queue actions when network is unavailable. -## 9. Error Handling & Blocked-User Handling +## Error Handling & Blocked-User Handling - **SnackBars:** Show success or error messages via `ScaffoldMessenger`. - **Retry Logic:** Offer a “Retry” action in the SnackBar on failure. - **UI State:** Disable the button while the SDK call is in progress to prevent duplicates. -## 10. (Optional) Context-Specific Notes +## Optional Context-Specific Notes **Group vs. User Blocking:** -This guide covers only user-to-user blocking. For group moderation (ban or remove members), see `lib/group_info/cometchat_group_info.dart` methods like `removeMembers` and `banMembers`. +This guide covers only user-to-user blocking. For group moderation (ban or remove members), see [`sample_app/lib/group_info/cometchat_group_info.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/group_info/cometchat_group_info.dart) methods like `removeMembers` and `banMembers`. -## 11. Summary / Feature Matrix +## Summary / Feature Matrix -| Feature | File | Method Used | -|-----------------|--------------------------------------------|---------------------------------------| -| Open User Info | `lib/messages.dart` | `Navigator.push(...)` | -| Block User | `lib/user_info/cometchat_user_info.dart` | `CometChatUIKit.blockUsers([...])` | -| Unblock User | `lib/user_info/cometchat_user_info.dart` | `CometChatUIKit.unblockUsers([...])` | -| Group Members | `lib/group_info/cometchat_group_info.dart` | `removeMembers`, `banMembers` | +| Feature | File | Method | +|----------------------|----------------------------------------------|------------------------------------------| +| Open User Info | `sample_app/lib/messages/messages.dart` | `Navigator.push(...)` | +| Block User | `sample_app/lib/user_info/cometchat_user_info.dart` | `CometChatUIKit.blockUsers([...])` | +| Unblock User | `sample_app/lib/user_info/cometchat_user_info.dart` | `CometChatUIKit.unblockUsers([...])` | +| Group Management | `sample_app/lib/group_info/cometchat_group_info.dart` | `removeMembers`, `banMembers` | -## 12. Next Steps & Further Reading +## Next Steps & Further Reading -- **Full Sample App:** https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app -- **CometChat Flutter Docs:** https://prodocs.cometchat.com/docs/flutter-quickstart +- **Full Sample App:** + https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app From 351a78d8a2ad3365f40f1be6cd433fa46891b702 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Tue, 29 Jul 2025 12:03:29 +0530 Subject: [PATCH 008/196] adds doc for threaded message --- docs.json | 6 + ui-kit/android/guide-threaded-messages.mdx | 171 +++++++++++++++++++++ 2 files changed, 177 insertions(+) create mode 100644 ui-kit/android/guide-threaded-messages.mdx diff --git a/docs.json b/docs.json index 67841ff4..9f85f33c 100644 --- a/docs.json +++ b/docs.json @@ -1408,6 +1408,12 @@ "ui-kit/android/shortcut-formatter-guide" ] }, + { + "group": "Guides", + "pages": [ + "ui-kit/android/guide-threaded-messages" + ] + }, "ui-kit/android/link/sample", "ui-kit/android/link/figma", "ui-kit/android/link/changelog" diff --git a/ui-kit/android/guide-threaded-messages.mdx b/ui-kit/android/guide-threaded-messages.mdx new file mode 100644 index 00000000..a831308e --- /dev/null +++ b/ui-kit/android/guide-threaded-messages.mdx @@ -0,0 +1,171 @@ +--- +title: "Integrating Threads in Android with CometChat UIKit" +sidebarTitle: "Android Threaded Messaging" +--- + +Implement threaded replies in your Android chat app by integrating CometChat’s UI Kit components—allowing users to reply to specific messages within a focused sub-conversation. + +## Table of Contents + +1. [Overview](#overview) +2. [Prerequisites](#prerequisites) +3. [Components](#components) +4. [Integration Steps](#integration-steps) + - [Add Thread Layout](#add-thread-layout) + - [Set up ThreadMessageActivity](#set-up-threadmessageactivity) + - [Create ThreadMessageViewModel](#create-threadmessageviewmodel) + - [Hook Thread Entry from Message List](#hook-thread-entry-from-message-list) +5. [Implementation Flow](#implementation-flow) +6. [Customization Options](#customization-options) +7. [Filtering / Edge Cases](#filtering--edge-cases) +8. [Error Handling / Blocked-User Handling](#error-handling--blocked-user-handling) +9. [Group vs. User-Level Differences](#group-vs-user-level-differences) +10. [Summary / Feature Matrix](#summary--feature-matrix) +11. [Next Steps & Further Reading](#next-steps--further-reading) +12. [Best Practices Recap](#best-practices-recap) + +## Overview + +Threaded replies allow users to respond directly to a specific message in a one-on-one or group chat, improving context and clarity. Users tap a message → enter thread screen → see parent message + all replies → compose their own response within the thread. + +## Prerequisites + +- Android Studio setup +- **CometChat Android UI Kit v5.x** added to your project +- CometChat **App ID**, **Auth Key**, and **Region** configured +- Internet permission in **AndroidManifest.xml** +- Logged-in user (via CometChat login) +- Working **MessagesActivity** with `CometChatMessageList` + +## Components + +| Component / Class | Role | +|:--------------------------------|:---------------------------------------------------------| +| `CometChatThreadHeader` | Displays the parent message on the thread screen | +| `CometChatMessageList` | Shows all threaded replies | +| `CometChatMessageComposer` | Input field for sending replies | +| `ThreadMessageActivity` | New Activity for thread view | +| `ThreadMessageViewModel` | Fetches and manages thread data (LiveData) | +| `unblockLayout` | UI shown when a user is blocked | + +## Integration Steps + +### Add Thread Layout + +**Goal:** Define the UI for the thread screen with header, message list, composer, and unblock layout. +```xml + + + + +``` + +**File reference:** +[`activity_thread_message.xml`](https://github.com/cometchat/cometchat-uikit-android/blob/v5/sample_app/app/src/main/res/layout/activity_thread_message.xml) + +### Set up ThreadMessageActivity + +**Goal:** Initialize the thread screen, retrieve the parent message, and handle blocked users. +```java +// ThreadMessageActivity.java +public class ThreadMessageActivity extends AppCompatActivity { + @Override + protected void onCreate(Bundle savedInstanceState) { + super.onCreate(savedInstanceState); + setContentView(R.layout.activity_thread_message); + // Initialize header, list, composer; fetch parent message + } +} +``` + +**File reference:** +[`ThreadMessageActivity.java`](https://github.com/cometchat/cometchat-uikit-android/blob/v5/sample_app/app/src/main/java/com/cometchat/sampleapp/ThreadMessageActivity.java) + +### Create ThreadMessageViewModel + +**Goal:** Use ViewModel to fetch and expose the parent message and manage unblocking logic via LiveData. +```java +// ThreadMessageViewModel.java +public class ThreadMessageViewModel extends ViewModel { + // fetchMessageDetails(), unblockUser(), LiveData for UI +} +``` + +**File reference:** +[`ThreadMessageViewModel.java`](https://github.com/cometchat/cometchat-uikit-android/blob/v5/sample_app/app/src/main/java/com/cometchat/sampleapp/ThreadMessageViewModel.java) + +### Hook Thread Entry from Message List + +**Goal:** Allow users to tap any message to transition to the thread view. +```java +// MessagesActivity.java +binding.messageList.setOnThreadRepliesClick((context, baseMessage, template) -> { + Intent intent = new Intent(context, ThreadMessageActivity.class); + intent.putExtra("message_id", baseMessage.getId()); + context.startActivity(intent); +}); +``` + +**File reference:** +[`MessagesActivity.java`](https://github.com/cometchat/cometchat-uikit-android/blob/v5/sample_app/app/src/main/java/com/cometchat/sampleapp/MessagesActivity.java) + +## Implementation Flow + +| Step | Action | Location | +|:-----|---------------------------------|:---------------------------------| +| 1 | Fetch Parent Message | `ThreadMessageViewModel.java` | +| 2 | Observe & Display | `ThreadMessageActivity.java` | +| 3 | Send Reply | `CometChatMessageComposer` | +| 4 | Live Updates | Handled by CometChat UI Kit | + +## Customization Options + +- **Styling Components:** Override colors in your theme or use setters on components. +- **Limit Header Height:** `threadHeader.setMaxHeight(...)`. +- **Hide Reactions:** `threadHeader.setReactionVisibility(View.GONE)`. +- **Dynamic Behavior:** Use conditional logic based on `receiverType` in `ThreadMessageActivity`. + +## Filtering / Edge Cases + +- **Empty Threads:** Display a “No replies yet” state. +- **Parent Deleted:** Show fallback or disable composer. +- **Offline Mode:** Queue thread operations or indicate offline status. + +## Error Handling / Blocked-User Handling + +- **Blocked Users:** In `UserDetailActivity.java`, check `user.isBlockedByMe()` to hide composer and show unblock UI. +- **Unblock Flow:** `viewModel.unblockUser()` with LiveData observers for progress and feedback. +- **Progress Indicators:** Show `ProgressBar` during unblock; use `Snackbar` for status messages. + +## Group vs. User-Level Differences + +| Scenario | Behavior | +|:-----------------|:----------------------------------------------| +| `USER` | Compose reply directly if not blocked | +| `GROUP` | Check membership before allowing reply | +| Blocked User | Hide composer; show unblock layout | +| Not in Group | Show join group option before replying | + +## Summary / Feature Matrix + +| Feature | Component / Method | +|:------------------------|:-----------------------------------------------| +| Show thread option | `setOnThreadRepliesClick(...)` | +| Display thread messages | `setParentMessage(...)` | +| Show parent message | `threadHeader.setParentMessage(...)` | +| Compose reply | `messageComposer.setParentMessageId(...)` | +| Block user | `CometChatUIKit.blockUsers([...])` | +| Unblock user | `viewModel.unblockUser()` | + +## Next Steps & Further Reading + +- **Sample App on GitHub:** + https://github.com/cometchat/cometchat-uikit-android/tree/v5/sample-app-kotlin + +## Best Practices Recap + +- Keep `ViewModel`s lean and lifecycle-aware. +- Pass `message_id` clearly between activities. +- Separate UI and logic layers. +- Minimize header height to focus on replies. +- Use `LiveData` for reactive UI updates. From 9aec527d54c0930ab9c5dc16e181730e31fcc7d9 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Tue, 29 Jul 2025 12:04:54 +0530 Subject: [PATCH 009/196] Update guide-threaded-messages.mdx --- ui-kit/android/guide-threaded-messages.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui-kit/android/guide-threaded-messages.mdx b/ui-kit/android/guide-threaded-messages.mdx index a831308e..d464d9dd 100644 --- a/ui-kit/android/guide-threaded-messages.mdx +++ b/ui-kit/android/guide-threaded-messages.mdx @@ -112,7 +112,7 @@ binding.messageList.setOnThreadRepliesClick((context, baseMessage, template) -> ## Implementation Flow | Step | Action | Location | -|:-----|---------------------------------|:---------------------------------| +|:-----|:--------------------------------|:---------------------------------| | 1 | Fetch Parent Message | `ThreadMessageViewModel.java` | | 2 | Observe & Display | `ThreadMessageActivity.java` | | 3 | Send Reply | `CometChatMessageComposer` | From 81b9e5b8d2f7e30e6a3a835135e52fbde722fee1 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Tue, 29 Jul 2025 12:23:27 +0530 Subject: [PATCH 010/196] Flutter - New Chat / Create Conversation in Your Flutter Chat App --- docs.json | 3 +- ui-kit/flutter/guide-new-chat.mdx | 170 ++++++++++++++++++++++++++++++ 2 files changed, 172 insertions(+), 1 deletion(-) create mode 100644 ui-kit/flutter/guide-new-chat.mdx diff --git a/docs.json b/docs.json index 9f85f33c..04a41458 100644 --- a/docs.json +++ b/docs.json @@ -1716,7 +1716,8 @@ "pages": [ "ui-kit/flutter/multi-tab-chat-ui-guide", "ui-kit/flutter/guide-threaded-messages", - "ui-kit/flutter/guide-block-unblock-user" + "ui-kit/flutter/guide-block-unblock-user", + "ui-kit/flutter/guide-new-chat" ] }, "ui-kit/flutter/link/sample", diff --git a/ui-kit/flutter/guide-new-chat.mdx b/ui-kit/flutter/guide-new-chat.mdx new file mode 100644 index 00000000..9b80d635 --- /dev/null +++ b/ui-kit/flutter/guide-new-chat.mdx @@ -0,0 +1,170 @@ +--- +title: "New Chat / Create Conversation in Your Flutter Chat App" +sidebarTitle: "New Chat" +--- + +Enable users to start one-on-one or group chats by integrating CometChat’s avatar menu and `CometChatContacts` screen, providing a seamless flow from the dashboard to a conversation. + +## Table of Contents + +1. [Overview](#overview) +2. [Prerequisites](#prerequisites) +3. [Components](#components) +4. [Integration Steps](#integration-steps) + - [Add Avatar Menu](#add-avatar-menu) + - [Open Start Conversation Screen](#open-start-conversation-screen) + - [Select User or Group](#select-user-or-group) + - [Navigate to Chat](#navigate-to-chat) +5. [Implementation Flow](#implementation-flow) +6. [Customization Options](#customization-options) +7. [Filtering / Edge Cases](#filtering--edge-cases) +8. [Error Handling & Blocked-User Handling](#error-handling--blocked-user-handling) +9. [Optional Context-Specific Notes](#optional-context-specific-notes) +10. [Summary / Feature Matrix](#summary--feature-matrix) +11. [Next Steps & Further Reading](#next-steps--further-reading) + +## Overview + +- **What:** Users can start a new one-on-one or group chat by tapping the avatar in the top bar, selecting “Create Conversation,” and choosing a contact from a searchable list. +- **Why:** Streamlines finding contacts or groups and initiating conversations, improving user experience and engagement. +- **Result:** Quick creation or opening of chats directly from the main screen. + +## Prerequisites + +- Flutter project with **CometChat UIKit Flutter v5** installed +- CometChat credentials (`appID`, `region`, `authKey`) initialized +- Navigation configured in your app +- Internet/network permissions granted + +## Components + +| Component / Class | Role | +|:-------------------------------|:--------------------------------------------------------------| +| `CometChatAvatar` | Displays the user avatar in the app bar | +| `PopupMenuButton` | Shows menu options when the avatar is tapped | +| `CometChatContacts` | UI for the “Start Conversation” screen | +| `CometChatContactsController` | Manages tab switching and item selection | +| `CometChatUsers` / `CometChatGroups` | Lists users or groups with search and selection | +| `PageManager` | Handles navigation to the chat screen | + +## Integration Steps + +### Add Avatar Menu + +**Goal:** Show the avatar in the app bar and open a menu on tap. +```dart +PopupMenuButton( + icon: CometChatAvatar( + width: 40, + height: 40, + image: CometChatUIKit.loggedInUser?.avatar, + name: CometChatUIKit.loggedInUser?.name, + ), + itemBuilder: (context) => [ + PopupMenuItem(value: '/Create', child: Text("Create Conversation")), + ], + onSelected: (value) { + if (value == '/Create') openCreateConversation(context); + }, +); +``` + +**File reference:** +[`sample_app/lib/dashboard.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart) + +### Open Start Conversation Screen + +**Goal:** Navigate to the “Start Conversation” screen when “Create Conversation” is selected. +```dart +void openCreateConversation(BuildContext context) { + Navigator.push( + context, + MaterialPageRoute(builder: (context) => CometChatContacts()), + ); +} +``` + +**File reference:** +[`sample_app/lib/dashboard.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart) + +### Select User or Group + +**Goal:** Let the user pick a contact or group to chat with. +```dart +CometChatContactsController( + currentView: [ + CometChatUsers( + hideAppbar: true, + onItemTap: (context, user) => _onItemTap(context: context, user: user), + ), + CometChatGroups( + hideAppbar: true, + onItemTap: (context, group) => _onItemTap(context: context, group: group), + ), + ], +); +``` + +**File reference:** +[`sample_app/lib/contacts/cometchat_contacts_controller.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/contacts/cometchat_contacts_controller.dart) + +### Navigate to Chat + +**Goal:** Open the chat screen for the selected user or group. +```dart +void _onItemTap({required BuildContext context, User? user, Group? group}) { + if (user != null) { + PageManager.navigateToMessages(context: context, user: user); + } else if (group != null) { + JoinProtectedGroupUtils.onGroupItemTap(context, group); + } +} +``` + +**File reference:** +[`sample_app/lib/utils/page_manager.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/utils/page_manager.dart) + +## Implementation Flow + +1. User taps avatar → menu opens +2. User selects “Create Conversation” → navigates to `CometChatContacts` +3. User searches and selects a user or group → triggers `_onItemTap` +4. App navigates to the chat screen for the selected user or group + +## Customization Options + +- **Styling:** Customize avatar, menu, and contact list appearance via UIKit theming +- **APIs:** Use callbacks like `onSearch` and `onItemTap` for custom logic +- **Configuration:** Adjust tab visibility, search placeholder, or add custom menu actions + +## Filtering / Edge Cases + +- **Filtering:** `CometChatUsers` and `CometChatGroups` provide real-time search +- **Empty Results:** Display an empty state if no matches are found +- **Blocked Users:** Exclude blocked users from search and messaging + +## Error Handling & Blocked-User Handling + +- **UI States:** Default UIKit states handle network errors or empty results +- **Feedback:** Use `SnackBar` or `Toast` for custom error messages +- **Blocked Users:** Blocked users cannot be selected or messaged + +## Optional Context-Specific Notes + +- **User vs. Group:** The flow is identical; only the data source changes + +## Summary / Feature Matrix + +| Feature | Component / Method | File(s) | +|------------------------|-------------------------------------------------|-------------------------------------------------| +| Show avatar/menu | `PopupMenuButton`, `CometChatAvatar` | [`dashboard.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart) | +| Open conversation UI | `CometChatContacts` | [`dashboard.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart) | +| List/search users | `CometChatUsers` | [`cometchat_contacts_controller.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/contacts/cometchat_contacts_controller.dart) | +| List/search groups | `CometChatGroups` | [`cometchat_contacts_controller.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/contacts/cometchat_contacts_controller.dart) | +| Handle selection | `_onItemTap` | [`page_manager.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/utils/page_manager.dart) | +| Navigate to chat | `PageManager.navigateToMessages` | [`page_manager.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/utils/page_manager.dart) | + +## Next Steps & Further Reading + +- [CometChat Flutter UIKit Docs – Conversations](https://prodocs.cometchat.com/docs/flutter-quickstart) +- [CometChat Flutter UIKit Sample App](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) From da79a8ebe9105f5d4a6a7a6cf1461ad7fecd8a90 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Tue, 29 Jul 2025 12:24:10 +0530 Subject: [PATCH 011/196] Update guide-new-chat.mdx --- ui-kit/flutter/guide-new-chat.mdx | 1 - 1 file changed, 1 deletion(-) diff --git a/ui-kit/flutter/guide-new-chat.mdx b/ui-kit/flutter/guide-new-chat.mdx index 9b80d635..870681a9 100644 --- a/ui-kit/flutter/guide-new-chat.mdx +++ b/ui-kit/flutter/guide-new-chat.mdx @@ -166,5 +166,4 @@ void _onItemTap({required BuildContext context, User? user, Group? group}) { ## Next Steps & Further Reading -- [CometChat Flutter UIKit Docs – Conversations](https://prodocs.cometchat.com/docs/flutter-quickstart) - [CometChat Flutter UIKit Sample App](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) From ff6e757092fd68d1c6e694c30b7d0e4a24e8356e Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Tue, 29 Jul 2025 12:42:02 +0530 Subject: [PATCH 012/196] flutter message privately --- docs.json | 4 +- ui-kit/flutter/guide-message-privately.mdx | 125 +++++++++++++++++++++ 2 files changed, 127 insertions(+), 2 deletions(-) create mode 100644 ui-kit/flutter/guide-message-privately.mdx diff --git a/docs.json b/docs.json index 04a41458..1c4367a0 100644 --- a/docs.json +++ b/docs.json @@ -1714,10 +1714,10 @@ { "group": "Guides", "pages": [ - "ui-kit/flutter/multi-tab-chat-ui-guide", "ui-kit/flutter/guide-threaded-messages", "ui-kit/flutter/guide-block-unblock-user", - "ui-kit/flutter/guide-new-chat" + "ui-kit/flutter/guide-new-chat", + "ui-kit/flutter/guide-message-privately" ] }, "ui-kit/flutter/link/sample", diff --git a/ui-kit/flutter/guide-message-privately.mdx b/ui-kit/flutter/guide-message-privately.mdx new file mode 100644 index 00000000..5e2d2bdd --- /dev/null +++ b/ui-kit/flutter/guide-message-privately.mdx @@ -0,0 +1,125 @@ +--- +title: "Message a User Privately from a Group Chat" +sidebarTitle: "Message Privately" +--- + +Learn how to initiate a private one-on-one chat with a group member directly from a group chat screen. + +## Table of Contents + +1. [Overview](#overview) +2. [Prerequisites](#prerequisites) +3. [Components](#components) +4. [Integration Steps](#integration-steps) + - [Add User Info/Action in Group Chat](#add-user-infoaction-in-group-chat) + - [Handle Private Message Navigation](#handle-private-message-navigation) +5. [Implementation Flow](#implementation-flow) +6. [Customization Options](#customization-options) +7. [Filtering / Edge Cases](#filtering--edge-cases) +8. [Error Handling & Blocked-User-Handling](#error-handling--blocked-user-handling) +9. [Optional Context-Specific Notes](#optional-context-specific-notes) +10. [Summary / Feature Matrix](#summary--feature-matrix) +11. [Next Steps & Further Reading](#next-steps--further-reading) + +## Overview + +This feature allows users to start a private, direct chat with a member of a group without leaving the group chat context. It enables seamless, context-aware private conversations, improving collaboration and user experience. Users can tap on a group member to instantly open a private chat. + +## Prerequisites + +- A Flutter project with **CometChat UIKit Flutter v5** installed +- CometChat credentials (`appID`, `region`, `authKey`) initialized +- Group chat and user info screens implemented +- Navigation setup for moving between group and private chat screens + +## Components + +| Component / Class | Role | +|--------------------------------------|----------------------------------------------------------------| +| `CometChatMessageList` | Displays group messages and user avatars | +| `CometChatUserInfo` | Shows user details and actions (e.g., "Message" button) | +| `PageManager` | Handles navigation to the private chat screen | +| `messages.dart` | Main chat screen logic | +| `user_info/cometchat_user_info.dart` | User info and action UI | + +## Integration Steps + +### Add User Info/Action in Group Chat + +**Goal:** Allow users to view group member info and provide a "Message" action. +```dart +IconButton( + icon: Icon(Icons.info_outline), + onPressed: () { + Navigator.push( + context, + MaterialPageRoute( + builder: (context) => CometChatUserInfo(user: user), + ), + ); + }, +); +``` + +**File reference:** +[`lib/group_info/cometchat_group_info.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/group_info/cometchat_group_info.dart) + +### Handle Private Message Navigation + +**Goal:** Start a private chat with the selected user. +```dart +ElevatedButton( + onPressed: () { + PageManager().navigateToMessages( + context: context, + user: user, + ); + }, + child: Text('Message'), +); +``` + +**File reference:** +[`lib/user_info/cometchat_user_info.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info.dart) + +## Implementation Flow + +1. User taps a group member’s avatar or info icon +2. `CometChatUserInfo` screen opens +3. User taps "Message" +4. App navigates to the private chat screen with that user + +## Customization Options + +- **Styling:** Customize the user info screen and action buttons using UIKit theming +- **APIs:** Add more actions (e.g., block, view profile) in the user info screen +- **Configuration:** Control which users can be messaged (e.g., block list, admin-only) + +## Filtering / Edge Cases + +- **Filtering:** Exclude users who are blocked or not allowed to be messaged +- **Existing Conversation:** Navigate to the existing private chat if one exists +- **User Blocked:** Disable the "Message" button if the user is blocked + +## Error Handling & Blocked-User-Handling + +- **UI States:** Disable the message button and show a tooltip if a user is blocked +- **Feedback:** Use `SnackBar` or `Toast` for error messages (e.g., "Cannot message this user") +- **Retry Logic:** Allow retrying navigation if a network error occurs + +## Optional Context-Specific Notes + +- **Group vs. User:** This flow applies only to group members; use the standard new chat flow for users outside the group + +## Summary / Feature Matrix + +| Feature | Component / Method | File(s) | +|:------------------------|:---------------------------------:-----------------------------------------------------------------------| +| Show user info | `CometChatUserInfo` | [`cometchat_group_info.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/group_info/cometchat_group_info.dart) | +| Message user | `PageManager.navigateToMessages` | [`cometchat_user_info.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info.dart) | +| Access from group | Avatar/IconButton | [`messages.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/messages/messages.dart) | + +## Next Steps & Further Reading + +- **Sample App on GitHub:** + https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app \ No newline at end of file From bc7525ff90e0de1379b42b1711a92f0de4f36880 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Tue, 29 Jul 2025 12:47:07 +0530 Subject: [PATCH 013/196] Update guide-message-privately.mdx --- ui-kit/flutter/guide-message-privately.mdx | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/ui-kit/flutter/guide-message-privately.mdx b/ui-kit/flutter/guide-message-privately.mdx index 5e2d2bdd..68188650 100644 --- a/ui-kit/flutter/guide-message-privately.mdx +++ b/ui-kit/flutter/guide-message-privately.mdx @@ -35,12 +35,12 @@ This feature allows users to start a private, direct chat with a member of a gro ## Components | Component / Class | Role | -|--------------------------------------|----------------------------------------------------------------| +|:-------------------------------------|:---------------------------------------------------------------| | `CometChatMessageList` | Displays group messages and user avatars | | `CometChatUserInfo` | Shows user details and actions (e.g., "Message" button) | | `PageManager` | Handles navigation to the private chat screen | -| `messages.dart` | Main chat screen logic | -| `user_info/cometchat_user_info.dart` | User info and action UI | +| `lib/messages.dart` | Main chat screen logic | +| `lib/user_info/cometchat_user_info.dart` | User info and action UI | ## Integration Steps @@ -97,8 +97,8 @@ ElevatedButton( ## Filtering / Edge Cases -- **Filtering:** Exclude users who are blocked or not allowed to be messaged -- **Existing Conversation:** Navigate to the existing private chat if one exists +- **Exclude Blocked Users:** Remove blocked users from selection +- **Existing Conversation:** Navigate to an existing private chat if one exists - **User Blocked:** Disable the "Message" button if the user is blocked ## Error Handling & Blocked-User-Handling @@ -113,13 +113,13 @@ ElevatedButton( ## Summary / Feature Matrix -| Feature | Component / Method | File(s) | -|:------------------------|:---------------------------------:-----------------------------------------------------------------------| -| Show user info | `CometChatUserInfo` | [`cometchat_group_info.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/group_info/cometchat_group_info.dart) | -| Message user | `PageManager.navigateToMessages` | [`cometchat_user_info.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info.dart) | -| Access from group | Avatar/IconButton | [`messages.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/messages/messages.dart) | +| Feature | Component / Method | File(s) | +|:------------------------|:---------------------------------|:---------------------------------------------------------------------| +| Show user info | `CometChatUserInfo` | [`lib/group_info/cometchat_group_info.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/group_info/cometchat_group_info.dart) | +| Message user | `PageManager.navigateToMessages` | [`lib/user_info/cometchat_user_info.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info.dart) | +| Access from group | Avatar/IconButton | [`lib/messages.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/messages/messages.dart) | ## Next Steps & Further Reading - **Sample App on GitHub:** - https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app \ No newline at end of file + https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app From 7fd7baa4a9b574cf8cc77d2c62c76ea4aca9bd76 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Tue, 29 Jul 2025 12:59:33 +0530 Subject: [PATCH 014/196] flutter - Managing & Viewing Call Logs in Your Flutter Chat App --- docs.json | 3 +- ui-kit/flutter/guide-call-log-details.mdx | 139 ++++++++++++++++++++++ 2 files changed, 141 insertions(+), 1 deletion(-) create mode 100644 ui-kit/flutter/guide-call-log-details.mdx diff --git a/docs.json b/docs.json index 1c4367a0..f3f6d984 100644 --- a/docs.json +++ b/docs.json @@ -1717,7 +1717,8 @@ "ui-kit/flutter/guide-threaded-messages", "ui-kit/flutter/guide-block-unblock-user", "ui-kit/flutter/guide-new-chat", - "ui-kit/flutter/guide-message-privately" + "ui-kit/flutter/guide-message-privately", + "ui-kit/flutter/guide-call-log-details" ] }, "ui-kit/flutter/link/sample", diff --git a/ui-kit/flutter/guide-call-log-details.mdx b/ui-kit/flutter/guide-call-log-details.mdx new file mode 100644 index 00000000..4ed9e2a8 --- /dev/null +++ b/ui-kit/flutter/guide-call-log-details.mdx @@ -0,0 +1,139 @@ +--- +title: "Managing & Viewing Call Logs in Your Flutter Chat App" +sidebarTitle: "Call Logs" +--- + +Learn how to integrate and customize CometChat’s `CometChatCallLogs` and `CometChatCallLogDetails` components to display call history and detailed call information in your Flutter chat app. + +## Table of Contents + +1. [Overview](#overview) +2. [Prerequisites](#prerequisites) +3. [Components](#components) +4. [Integration Steps](#integration-steps) + - [Add Calls Tab to Main UI](#add-calls-tab-to-main-ui) + - [Display Call Logs](#display-call-logs) + - [Show Call Log Details](#show-call-log-details) +5. [Implementation Flow](#implementation-flow) +6. [Customization Options](#customization-options) +7. [Filtering / Edge Cases](#filtering--edge-cases) +8. [Error Handling & Blocked-User Handling](#error-handling--blocked-user-handling) +9. [Optional Context-Specific Notes](#optional-context-specific-notes) +10. [Summary / Feature Matrix](#summary--feature-matrix) +11. [Next Steps & Further Reading](#next-steps--further-reading) + +## Overview + +- **What:** This feature provides a dedicated Calls tab where users can view a list of recent audio and video calls and inspect detailed information for each call. +- **Why:** Enables users to review communication history, redial, or manage past calls directly within the app. +- **Result:** Users access comprehensive call logs and individual call details via intuitive UI components. + +## Prerequisites + +- A Flutter project with **CometChat UIKit Flutter v5** installed +- CometChat credentials (`appID`, `region`, `authKey`) initialized +- Call functionality enabled in your CometChat app dashboard +- Required permissions for microphone and camera in your app +- Navigation setup for tabs and detail screens + +## Components + +| Component | Role | +|:-----------------------------------|:---------------------------------------------------------------------| +| `CometChatCallLogs` | Displays the list of recent calls with tap callbacks | +| `CometChatCallLogDetails` | Shows detailed information (participants, duration, type) | +| `dashboard.dart` | Contains the Calls tab integration in the main UI | +| `call_log_details/cometchat_call_log_details.dart` | Implements the details screen UI | + +## Integration Steps + +### Add Calls Tab to Main UI + +**Goal:** Integrate the Calls tab into your main dashboard. +```dart +// In sample_app/lib/dashboard.dart, update your PageView or BottomNavigation +_pageController.selectedIndex == 2 + ? CometChatCallLogs( + onItemClick: (callLog) { + Navigator.push( + context, + MaterialPageRoute( + builder: (context) => CometChatCallLogDetails(callLog: callLog), + ), + ); + }, + ) + : SizedBox.shrink(), +``` + +**File reference:** +[`sample_app/lib/dashboard.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart) + +### Display Call Logs + +**Goal:** Use `CometChatCallLogs` to fetch and show recent calls. +```dart +CometChatCallLogs( + onItemClick: (callLog) { + // Navigates to details screen + }, +); +``` + +**File reference:** +[`sample_app/lib/dashboard.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart) + +### Show Call Log Details + +**Goal:** Present detailed information when a call log is tapped. +```dart +CometChatCallLogDetails( + callLog: callLog, +); +``` + +**File reference:** +[`sample_app/lib/call_log_details/cometchat_call_log_details.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/call_log_details/cometchat_call_log_details.dart) + +## Implementation Flow + +1. User selects the Calls tab in the dashboard +2. `CometChatCallLogs` displays recent calls +3. User taps on a call log entry +4. App navigates to `CometChatCallLogDetails` showing call details + +## Customization Options + +- **Styling:** Override colors, fonts, and list item layouts via UIKit theming +- **Call Type Filters:** Apply filters in `CometChatCallLogs` if supported +- **Empty State:** Provide custom UI when no call logs are available + +## Filtering / Edge Cases + +- **No Call Logs:** Display an empty state message when call history is empty +- **Pagination:** Handle large call logs with lazy loading or pagination controls +- **Blocked Users:** Indicate or hide entries involving blocked users + +## Error Handling & Blocked-User Handling + +- **Network Errors:** Show `SnackBar` or error widgets when fetch fails +- **Blocked Users:** Disable detail navigation or show warning if a user is blocked +- **Retry Logic:** Offer retry options for failed fetch or navigation + +## Optional Context-Specific Notes + +- **Group Calls:** `CometChatCallLogDetails` will list all participants for group calls +- **1:1 Calls:** Details screen focuses on the other participant + +## Summary / Feature Matrix + +| Feature | Component / Method | File(s) | +|:--------------------------|:------------------------------------|:---------------------------------------------------------------------| +| Calls tab integration | `CometChatCallLogs(onItemClick)` | [`dashboard.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart) | +| Display call logs | `CometChatCallLogs` | [`dashboard.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart) | +| Show call details | `CometChatCallLogDetails(callLog)` | [`call_log_details/cometchat_call_log_details.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/call_log_details/cometchat_call_log_details.dart) | + +## Next Steps & Further Reading + +- **Sample App on GitHub:** + https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app From 714b813589d4ea1c323ad1acc3a1a47594ef3861 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Tue, 29 Jul 2025 13:23:03 +0530 Subject: [PATCH 015/196] removes table of content --- ui-kit/flutter/guide-block-unblock-user.mdx | 16 ---------------- ui-kit/flutter/guide-call-log-details.mdx | 17 ----------------- ui-kit/flutter/guide-message-privately.mdx | 16 ---------------- ui-kit/flutter/guide-new-chat.mdx | 18 ------------------ ui-kit/flutter/guide-threaded-messages.mdx | 17 ----------------- 5 files changed, 84 deletions(-) diff --git a/ui-kit/flutter/guide-block-unblock-user.mdx b/ui-kit/flutter/guide-block-unblock-user.mdx index fdd57c4e..dfab4d60 100644 --- a/ui-kit/flutter/guide-block-unblock-user.mdx +++ b/ui-kit/flutter/guide-block-unblock-user.mdx @@ -5,22 +5,6 @@ sidebarTitle: "Block/Unblock User" Enable users to block and unblock other users in your Flutter chat app by integrating CometChat’s `blockUsers` and `unblockUsers` methods with a simple UI. -## Table of Contents - -1. [Overview](#overview) -2. [Prerequisites](#prerequisites) -3. [Components](#components) -4. [Integration Steps](#integration-steps) - - [Navigate to User Info Screen](#navigate-to-user-info-screen) - - [Add “Block User” Button](#add-block-user-button) - - [Add “Unblock User” Button](#add-unblock-user-button) -5. [Customization Options](#customization-options) -6. [Filtering / Edge Cases](#filtering--edge-cases) -7. [Error Handling & Blocked-User Handling](#error-handling--blocked-user-handling) -8. [Optional Context-Specific Notes](#optional-context-specific-notes) -9. [Summary / Feature Matrix](#summary--feature-matrix) -10. [Next Steps & Further Reading](#next-steps--further-reading) - ## Overview The Block User feature lets one user prevent another from sending messages or interacting with them. Essential for user privacy, spam control, and moderation in public or group chats. Users tap “Block” or “Unblock,” and the CometChat SDK enforces the block state. diff --git a/ui-kit/flutter/guide-call-log-details.mdx b/ui-kit/flutter/guide-call-log-details.mdx index 4ed9e2a8..894acd2c 100644 --- a/ui-kit/flutter/guide-call-log-details.mdx +++ b/ui-kit/flutter/guide-call-log-details.mdx @@ -5,23 +5,6 @@ sidebarTitle: "Call Logs" Learn how to integrate and customize CometChat’s `CometChatCallLogs` and `CometChatCallLogDetails` components to display call history and detailed call information in your Flutter chat app. -## Table of Contents - -1. [Overview](#overview) -2. [Prerequisites](#prerequisites) -3. [Components](#components) -4. [Integration Steps](#integration-steps) - - [Add Calls Tab to Main UI](#add-calls-tab-to-main-ui) - - [Display Call Logs](#display-call-logs) - - [Show Call Log Details](#show-call-log-details) -5. [Implementation Flow](#implementation-flow) -6. [Customization Options](#customization-options) -7. [Filtering / Edge Cases](#filtering--edge-cases) -8. [Error Handling & Blocked-User Handling](#error-handling--blocked-user-handling) -9. [Optional Context-Specific Notes](#optional-context-specific-notes) -10. [Summary / Feature Matrix](#summary--feature-matrix) -11. [Next Steps & Further Reading](#next-steps--further-reading) - ## Overview - **What:** This feature provides a dedicated Calls tab where users can view a list of recent audio and video calls and inspect detailed information for each call. diff --git a/ui-kit/flutter/guide-message-privately.mdx b/ui-kit/flutter/guide-message-privately.mdx index 68188650..18ce7027 100644 --- a/ui-kit/flutter/guide-message-privately.mdx +++ b/ui-kit/flutter/guide-message-privately.mdx @@ -5,22 +5,6 @@ sidebarTitle: "Message Privately" Learn how to initiate a private one-on-one chat with a group member directly from a group chat screen. -## Table of Contents - -1. [Overview](#overview) -2. [Prerequisites](#prerequisites) -3. [Components](#components) -4. [Integration Steps](#integration-steps) - - [Add User Info/Action in Group Chat](#add-user-infoaction-in-group-chat) - - [Handle Private Message Navigation](#handle-private-message-navigation) -5. [Implementation Flow](#implementation-flow) -6. [Customization Options](#customization-options) -7. [Filtering / Edge Cases](#filtering--edge-cases) -8. [Error Handling & Blocked-User-Handling](#error-handling--blocked-user-handling) -9. [Optional Context-Specific Notes](#optional-context-specific-notes) -10. [Summary / Feature Matrix](#summary--feature-matrix) -11. [Next Steps & Further Reading](#next-steps--further-reading) - ## Overview This feature allows users to start a private, direct chat with a member of a group without leaving the group chat context. It enables seamless, context-aware private conversations, improving collaboration and user experience. Users can tap on a group member to instantly open a private chat. diff --git a/ui-kit/flutter/guide-new-chat.mdx b/ui-kit/flutter/guide-new-chat.mdx index 870681a9..d57498af 100644 --- a/ui-kit/flutter/guide-new-chat.mdx +++ b/ui-kit/flutter/guide-new-chat.mdx @@ -5,24 +5,6 @@ sidebarTitle: "New Chat" Enable users to start one-on-one or group chats by integrating CometChat’s avatar menu and `CometChatContacts` screen, providing a seamless flow from the dashboard to a conversation. -## Table of Contents - -1. [Overview](#overview) -2. [Prerequisites](#prerequisites) -3. [Components](#components) -4. [Integration Steps](#integration-steps) - - [Add Avatar Menu](#add-avatar-menu) - - [Open Start Conversation Screen](#open-start-conversation-screen) - - [Select User or Group](#select-user-or-group) - - [Navigate to Chat](#navigate-to-chat) -5. [Implementation Flow](#implementation-flow) -6. [Customization Options](#customization-options) -7. [Filtering / Edge Cases](#filtering--edge-cases) -8. [Error Handling & Blocked-User Handling](#error-handling--blocked-user-handling) -9. [Optional Context-Specific Notes](#optional-context-specific-notes) -10. [Summary / Feature Matrix](#summary--feature-matrix) -11. [Next Steps & Further Reading](#next-steps--further-reading) - ## Overview - **What:** Users can start a new one-on-one or group chat by tapping the avatar in the top bar, selecting “Create Conversation,” and choosing a contact from a searchable list. diff --git a/ui-kit/flutter/guide-threaded-messages.mdx b/ui-kit/flutter/guide-threaded-messages.mdx index a757e2fc..80f70443 100644 --- a/ui-kit/flutter/guide-threaded-messages.mdx +++ b/ui-kit/flutter/guide-threaded-messages.mdx @@ -5,23 +5,6 @@ sidebarTitle: "Threaded Messages" Enhance your Flutter chat app with threaded messaging by integrating CometChat’s `CometChatThreadedMessageList` and `CometChatMessageList` components to reply to messages in threads and view focused sub-conversations seamlessly. -## Table of Contents - -1. [Overview](#overview) -2. [Prerequisites](#prerequisites) -3. [Components](#components) -4. [Integration Steps](#integration-steps) - - [Show the “Reply in Thread” Option](#show-the-reply-in-thread-option) - - [Navigate to the Thread Screen](#navigate-to-the-thread-screen) - - [Send a Threaded Message](#send-a-threaded-message) - - [Fetch & Display Thread Replies](#fetch--display-thread-replies) -5. [Customization Options](#customization-options) -6. [Filtering / Edge Cases](#filtering--edge-cases) -7. [Error Handling & Edge Cases](#error-handling--edge-cases) -8. [Optional Context-Specific Notes](#optional-context-specific-notes) -9. [Summary / Feature Matrix](#summary--feature-matrix) -10. [Next Steps & Further Reading](#next-steps--further-reading) - ## Overview The sample app demonstrates how to enable threaded messaging in Flutter using CometChat’s UI Kit: From 9b33faf148897e89f8a1770545530e502ea147d5 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Tue, 29 Jul 2025 13:25:18 +0530 Subject: [PATCH 016/196] Update guide-threaded-messages.mdx --- ui-kit/android/guide-threaded-messages.mdx | 19 ------------------- 1 file changed, 19 deletions(-) diff --git a/ui-kit/android/guide-threaded-messages.mdx b/ui-kit/android/guide-threaded-messages.mdx index d464d9dd..da0bb01b 100644 --- a/ui-kit/android/guide-threaded-messages.mdx +++ b/ui-kit/android/guide-threaded-messages.mdx @@ -5,25 +5,6 @@ sidebarTitle: "Android Threaded Messaging" Implement threaded replies in your Android chat app by integrating CometChat’s UI Kit components—allowing users to reply to specific messages within a focused sub-conversation. -## Table of Contents - -1. [Overview](#overview) -2. [Prerequisites](#prerequisites) -3. [Components](#components) -4. [Integration Steps](#integration-steps) - - [Add Thread Layout](#add-thread-layout) - - [Set up ThreadMessageActivity](#set-up-threadmessageactivity) - - [Create ThreadMessageViewModel](#create-threadmessageviewmodel) - - [Hook Thread Entry from Message List](#hook-thread-entry-from-message-list) -5. [Implementation Flow](#implementation-flow) -6. [Customization Options](#customization-options) -7. [Filtering / Edge Cases](#filtering--edge-cases) -8. [Error Handling / Blocked-User Handling](#error-handling--blocked-user-handling) -9. [Group vs. User-Level Differences](#group-vs-user-level-differences) -10. [Summary / Feature Matrix](#summary--feature-matrix) -11. [Next Steps & Further Reading](#next-steps--further-reading) -12. [Best Practices Recap](#best-practices-recap) - ## Overview Threaded replies allow users to respond directly to a specific message in a one-on-one or group chat, improving context and clarity. Users tap a message → enter thread screen → see parent message + all replies → compose their own response within the thread. From 42c28a2529245845581745489934ad13f154acfa Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Fri, 1 Aug 2025 07:42:15 +0530 Subject: [PATCH 017/196] updates guides --- docs.json | 3 +- ui-kit/flutter/guide-block-unblock-user.mdx | 6 +- ui-kit/flutter/guide-call-log-details.mdx | 12 +- ui-kit/flutter/guide-group-chat.mdx | 139 ++++++++++++++++++++ ui-kit/flutter/guide-message-privately.mdx | 4 +- ui-kit/flutter/guide-new-chat.mdx | 14 +- ui-kit/flutter/guide-threaded-messages.mdx | 14 +- 7 files changed, 166 insertions(+), 26 deletions(-) create mode 100644 ui-kit/flutter/guide-group-chat.mdx diff --git a/docs.json b/docs.json index f3f6d984..a788badd 100644 --- a/docs.json +++ b/docs.json @@ -1718,7 +1718,8 @@ "ui-kit/flutter/guide-block-unblock-user", "ui-kit/flutter/guide-new-chat", "ui-kit/flutter/guide-message-privately", - "ui-kit/flutter/guide-call-log-details" + "ui-kit/flutter/guide-call-log-details", + "ui-kit/flutter/guide-group-chat" ] }, "ui-kit/flutter/link/sample", diff --git a/ui-kit/flutter/guide-block-unblock-user.mdx b/ui-kit/flutter/guide-block-unblock-user.mdx index dfab4d60..eff42182 100644 --- a/ui-kit/flutter/guide-block-unblock-user.mdx +++ b/ui-kit/flutter/guide-block-unblock-user.mdx @@ -28,7 +28,7 @@ The Block User feature lets one user prevent another from sending messages or in ### Navigate to User Info Screen -**Goal:** Open the user-info screen when tapping the info icon in chat. +Open the user-info screen when tapping the info icon in chat. ```dart IconButton( icon: Icon(Icons.info_outline), @@ -48,7 +48,7 @@ IconButton( ### Add “Block User” Button -**Goal:** Let users block another user via the SDK. +Let users block another user via the SDK. ```dart ElevatedButton( onPressed: () async { @@ -72,7 +72,7 @@ ElevatedButton( ### Add “Unblock User” Button -**Goal:** Allow users to undo the block. +Allow users to undo the block. ```dart ElevatedButton( onPressed: () async { diff --git a/ui-kit/flutter/guide-call-log-details.mdx b/ui-kit/flutter/guide-call-log-details.mdx index 894acd2c..8e170a28 100644 --- a/ui-kit/flutter/guide-call-log-details.mdx +++ b/ui-kit/flutter/guide-call-log-details.mdx @@ -7,9 +7,9 @@ Learn how to integrate and customize CometChat’s `CometChatCallLogs` and `Come ## Overview -- **What:** This feature provides a dedicated Calls tab where users can view a list of recent audio and video calls and inspect detailed information for each call. -- **Why:** Enables users to review communication history, redial, or manage past calls directly within the app. -- **Result:** Users access comprehensive call logs and individual call details via intuitive UI components. +- This feature provides a dedicated Calls tab where users can view a list of recent audio and video calls and inspect detailed information for each call. +- Enables users to review communication history, redial, or manage past calls directly within the app. +- Users access comprehensive call logs and individual call details via intuitive UI components. ## Prerequisites @@ -32,7 +32,7 @@ Learn how to integrate and customize CometChat’s `CometChatCallLogs` and `Come ### Add Calls Tab to Main UI -**Goal:** Integrate the Calls tab into your main dashboard. +Integrate the Calls tab into your main dashboard. ```dart // In sample_app/lib/dashboard.dart, update your PageView or BottomNavigation _pageController.selectedIndex == 2 @@ -54,7 +54,7 @@ _pageController.selectedIndex == 2 ### Display Call Logs -**Goal:** Use `CometChatCallLogs` to fetch and show recent calls. +Use `CometChatCallLogs` to fetch and show recent calls. ```dart CometChatCallLogs( onItemClick: (callLog) { @@ -68,7 +68,7 @@ CometChatCallLogs( ### Show Call Log Details -**Goal:** Present detailed information when a call log is tapped. +Present detailed information when a call log is tapped. ```dart CometChatCallLogDetails( callLog: callLog, diff --git a/ui-kit/flutter/guide-group-chat.mdx b/ui-kit/flutter/guide-group-chat.mdx new file mode 100644 index 00000000..e7a99442 --- /dev/null +++ b/ui-kit/flutter/guide-group-chat.mdx @@ -0,0 +1,139 @@ +--- +title: "Customizing Group Chat UI in Flutter with CometChat UI Kit" +sidebarTitle: "Group Chat" +--- + +Learn how to tailor the CometChat Flutter UI Kit’s group chat components to match your app’s design and functionality requirements. + +## Overview +- Enables developers to modify the appearance and behavior of group chat screens, list items, and dialogs in the CometChat Flutter UI Kit. +- Aligns group chat UI with brand identity and improves user engagement by offering a consistent, customized user experience. +- A Flutter group chat interface with custom colors, layouts, and interaction patterns for group listings, headers, and messages. + +## Prerequisites +- Flutter SDK 3.0+ +- CometChat Flutter UI Kit v5.x +- A Flutter project with `cometchat_flutter` dependency added +- Initialized CometChat with valid App ID, Region, and Auth Key +- Basic familiarity with Flutter theming and widget composition + +## Components +| Component / Class | Role | +|--------------------------------------|--------------------------------------------------------------| +| `CometChatGroupList` | Displays list of available groups | +| `CometChatGroupListItem` | Renders each group tile with avatar and name | +| `CometChatGroupInfoHeader` | Shows group name, avatar, member count in the chat screen | +| `CometChatMessageList` | Displays messages within a group | +| `CometChatMessageComposer` | Input field for sending messages in a group | + +## Integration Steps + +### Override Group List Item UI +Customize the layout and styling of each group tile. + ```dart + CometChatGroupList( + groupItemBuilder: (context, group) { + return ListTile( + leading: CircleAvatar( + backgroundImage: NetworkImage(group.avatar), + radius: 24, + backgroundColor: Colors.blueAccent, + ), + title: Text( + group.name, + style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18), + ), + subtitle: Text('\${group.memberCount} members'), + ); + }, + ); + ``` +**File path:** `lib/screens/groups_screen.dart` + +### Customize Group Info Header +Modify header layout and actions in the group chat screen. + ```dart + CometChatGroupInfoHeader( + style: GroupInfoHeaderStyle( + backgroundColor: Colors.white, + titleTextStyle: TextStyle(color: Colors.deepPurple, fontSize: 20), + avatarRadius: 32, + ), + onBack: () => Navigator.pop(context), + onViewMembers: () => showGroupMembers(context, group), + ); + ``` +**File path:** `lib/widgets/group_info_header.dart` + +### Apply Custom Message Bubbles in Group +Change message bubble colors and border radius. + ```dart + CometChatMessageList( + messageBubbleBuilder: (context, message, isSentByMe) { + return Bubble( + color: isSentByMe ? Colors.green[200] : Colors.grey[300], + borderRadius: BorderRadius.circular(16), + child: Text(message.text ?? ''), + ); + }, + ); + ``` +**File path:** `lib/widgets/message_list.dart` + +### Customize the Message Composer +Adjust the composer background and send button appearance. + ```dart + CometChatMessageComposer( + composerStyle: ComposerStyle( + backgroundColor: Colors.white, + sendButtonIcon: Icons.send_rounded, + sendButtonColor: Colors.deepPurple, + ), + ); + ``` +**File path:** `lib/widgets/message_composer.dart` + +## Implementation Flow +- Fetch list of groups from CometChat service +- Render custom group list using overridden builder +- On group selection, navigate to group chat screen +- Display custom header and message list +- Handle sending and receiving messages with custom composer + +## Customization Options +- **Styling Themes:** Override `ThemeData` or use dedicated style classes. +- **Event Callbacks:** Use `onGroupUpdated`, `onMemberAdded` hooks for dynamic UI updates. +- **Template Overrides:** Provide entirely custom widgets via builder properties. + +## Filtering / Edge Cases +- Long group names: use `TextOverflow.ellipsis` +- Empty avatar URL: fallback to initials avatar builder +- Offline group member count: display loading indicator + +## Error Handling & Blocked-User Handling +- **UI states:** Show snackbars for join or leave failures in groups +- **Retry flows:** Provide retry button when message send fails due to network errors + +## (Optional) Group vs. User-Level Differences +When customizing one-on-one chat vs. group chat: +- Group chats often include member lists and admin controls +- One-on-one chats skip member count and group settings + +## Summary / Feature Matrix +| Feature | Component / Method | +|:--------------------------------|:--------------------------------------------------------| +| Custom group list item UI | `groupItemBuilder` in `CometChatGroupList` | +| Styled group info header | `GroupInfoHeaderStyle` in `CometChatGroupInfoHeader` | +| Colored message bubbles | `messageBubbleBuilder` in `CometChatMessageList` | +| Custom send button in composer | `ComposerStyle.sendButtonIcon` and `.sendButtonColor` | + +## Next Steps & Further Reading +- Refer to the [CometChat Flutter UI Kit docs](https://www.cometchat.com/docs/flutter-ui-kit) +- Explore sample repo for advanced theming +- Learn about custom actions in group context + +## Best Practices +- Keep custom widgets small and reusable +- Document style overrides for maintainability +- Test UI on different screen sizes and orientations +- Leverage builder callbacks instead of forking SDK diff --git a/ui-kit/flutter/guide-message-privately.mdx b/ui-kit/flutter/guide-message-privately.mdx index 18ce7027..dca9b851 100644 --- a/ui-kit/flutter/guide-message-privately.mdx +++ b/ui-kit/flutter/guide-message-privately.mdx @@ -30,7 +30,7 @@ This feature allows users to start a private, direct chat with a member of a gro ### Add User Info/Action in Group Chat -**Goal:** Allow users to view group member info and provide a "Message" action. +Allow users to view group member info and provide a "Message" action. ```dart IconButton( icon: Icon(Icons.info_outline), @@ -50,7 +50,7 @@ IconButton( ### Handle Private Message Navigation -**Goal:** Start a private chat with the selected user. +Start a private chat with the selected user. ```dart ElevatedButton( onPressed: () { diff --git a/ui-kit/flutter/guide-new-chat.mdx b/ui-kit/flutter/guide-new-chat.mdx index d57498af..db664e62 100644 --- a/ui-kit/flutter/guide-new-chat.mdx +++ b/ui-kit/flutter/guide-new-chat.mdx @@ -7,9 +7,9 @@ Enable users to start one-on-one or group chats by integrating CometChat’s ava ## Overview -- **What:** Users can start a new one-on-one or group chat by tapping the avatar in the top bar, selecting “Create Conversation,” and choosing a contact from a searchable list. -- **Why:** Streamlines finding contacts or groups and initiating conversations, improving user experience and engagement. -- **Result:** Quick creation or opening of chats directly from the main screen. +- Users can start a new one-on-one or group chat by tapping the avatar in the top bar, selecting “Create Conversation,” and choosing a contact from a searchable list. +- Streamlines finding contacts or groups and initiating conversations, improving user experience and engagement. +- Quick creation or opening of chats directly from the main screen. ## Prerequisites @@ -33,7 +33,7 @@ Enable users to start one-on-one or group chats by integrating CometChat’s ava ### Add Avatar Menu -**Goal:** Show the avatar in the app bar and open a menu on tap. +Show the avatar in the app bar and open a menu on tap. ```dart PopupMenuButton( icon: CometChatAvatar( @@ -56,7 +56,7 @@ PopupMenuButton( ### Open Start Conversation Screen -**Goal:** Navigate to the “Start Conversation” screen when “Create Conversation” is selected. +Navigate to the “Start Conversation” screen when “Create Conversation” is selected. ```dart void openCreateConversation(BuildContext context) { Navigator.push( @@ -71,7 +71,7 @@ void openCreateConversation(BuildContext context) { ### Select User or Group -**Goal:** Let the user pick a contact or group to chat with. +Let the user pick a contact or group to chat with. ```dart CometChatContactsController( currentView: [ @@ -92,7 +92,7 @@ CometChatContactsController( ### Navigate to Chat -**Goal:** Open the chat screen for the selected user or group. +Open the chat screen for the selected user or group. ```dart void _onItemTap({required BuildContext context, User? user, Group? group}) { if (user != null) { diff --git a/ui-kit/flutter/guide-threaded-messages.mdx b/ui-kit/flutter/guide-threaded-messages.mdx index 80f70443..ba1c199e 100644 --- a/ui-kit/flutter/guide-threaded-messages.mdx +++ b/ui-kit/flutter/guide-threaded-messages.mdx @@ -32,7 +32,7 @@ The sample app demonstrates how to enable threaded messaging in Flutter using Co ### Show the “Reply in Thread” Option -**Goal:** Trigger thread view when tapping the thread icon. +Trigger thread view when tapping the thread icon. ```dart CometChatMessageList( onThreadRepliesClick: (BaseMessage message) { @@ -50,11 +50,11 @@ CometChatMessageList( **File reference:** [`sample_app/lib/messages/messages.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/messages/messages.dart) -**Why:** Captures the user's intent to view or add to a thread. +Captures the user's intent to view or add to a thread. ### Navigate to the Thread Screen -**Goal:** Display a dedicated thread view. +Display a dedicated thread view. ```dart class CometChatThread extends StatelessWidget { final BaseMessage parentMessage; @@ -86,11 +86,11 @@ class CometChatThread extends StatelessWidget { **File reference:** [`lib/thread_screen/cometchat_thread.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart) -**Why:** Provides a focused UI for thread interactions. +Provides a focused UI for thread interactions. ### Send a Threaded Message -**Goal:** Send replies in the context of a thread. +Send replies in the context of a thread. ```dart CometChatMessageComposer( parentMessageId: parentMessage.id, @@ -105,7 +105,7 @@ CometChatMessageComposer( ### Fetch & Display Thread Replies -**Goal:** Retrieve and show all replies under a parent message. +Retrieve and show all replies under a parent message. ```dart MessagesRequest request = MessagesRequestBuilder() .setParentMessageId(parentMessageId) @@ -119,7 +119,7 @@ request.fetchPrevious().then((replies) { **File reference:** [`lib/thread_screen/cometchat_thread.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart) -**Why:** Ensures only relevant threaded messages are shown. +Ensures only relevant threaded messages are shown. ## Customization Options From ef74d769c239e220434a6f415a8d9162559ece08 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Fri, 1 Aug 2025 14:07:15 +0530 Subject: [PATCH 018/196] updates link to sample app --- ui-kit/flutter/guide-block-unblock-user.mdx | 19 +++++++++++++-- ui-kit/flutter/guide-call-log-details.mdx | 19 +++++++++++++-- ui-kit/flutter/guide-group-chat.mdx | 26 ++++++++++++++------- ui-kit/flutter/guide-message-privately.mdx | 21 ++++++++++++++--- ui-kit/flutter/guide-new-chat.mdx | 18 +++++++++++++- ui-kit/flutter/guide-threaded-messages.mdx | 23 ++++++++++++++---- ui-kit/flutter/overview.mdx | 4 ++-- 7 files changed, 107 insertions(+), 23 deletions(-) diff --git a/ui-kit/flutter/guide-block-unblock-user.mdx b/ui-kit/flutter/guide-block-unblock-user.mdx index eff42182..f9de7634 100644 --- a/ui-kit/flutter/guide-block-unblock-user.mdx +++ b/ui-kit/flutter/guide-block-unblock-user.mdx @@ -127,5 +127,20 @@ This guide covers only user-to-user blocking. For group moderation (ban or remov ## Next Steps & Further Reading -- **Full Sample App:** - https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app + + + +Fully functional sample applications to accelerate your development. + +[View on GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) + + + + + +Access the complete UI Kit source code on GitHub. + +[View on GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/chat_uikit) + + + \ No newline at end of file diff --git a/ui-kit/flutter/guide-call-log-details.mdx b/ui-kit/flutter/guide-call-log-details.mdx index 8e170a28..14ee8bc6 100644 --- a/ui-kit/flutter/guide-call-log-details.mdx +++ b/ui-kit/flutter/guide-call-log-details.mdx @@ -118,5 +118,20 @@ CometChatCallLogDetails( ## Next Steps & Further Reading -- **Sample App on GitHub:** - https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app + + + +Fully functional sample applications to accelerate your development. + +[View on GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) + + + + + +Access the complete UI Kit source code on GitHub. + +[View on GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/chat_uikit) + + + \ No newline at end of file diff --git a/ui-kit/flutter/guide-group-chat.mdx b/ui-kit/flutter/guide-group-chat.mdx index e7a99442..4aee75ec 100644 --- a/ui-kit/flutter/guide-group-chat.mdx +++ b/ui-kit/flutter/guide-group-chat.mdx @@ -128,12 +128,20 @@ When customizing one-on-one chat vs. group chat: | Custom send button in composer | `ComposerStyle.sendButtonIcon` and `.sendButtonColor` | ## Next Steps & Further Reading -- Refer to the [CometChat Flutter UI Kit docs](https://www.cometchat.com/docs/flutter-ui-kit) -- Explore sample repo for advanced theming -- Learn about custom actions in group context - -## Best Practices -- Keep custom widgets small and reusable -- Document style overrides for maintainability -- Test UI on different screen sizes and orientations -- Leverage builder callbacks instead of forking SDK + + + +Fully functional sample applications to accelerate your development. + +[View on GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) + + + + + +Access the complete UI Kit source code on GitHub. + +[View on GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/chat_uikit) + + + \ No newline at end of file diff --git a/ui-kit/flutter/guide-message-privately.mdx b/ui-kit/flutter/guide-message-privately.mdx index dca9b851..ed8f8332 100644 --- a/ui-kit/flutter/guide-message-privately.mdx +++ b/ui-kit/flutter/guide-message-privately.mdx @@ -24,7 +24,7 @@ This feature allows users to start a private, direct chat with a member of a gro | `CometChatUserInfo` | Shows user details and actions (e.g., "Message" button) | | `PageManager` | Handles navigation to the private chat screen | | `lib/messages.dart` | Main chat screen logic | -| `lib/user_info/cometchat_user_info.dart` | User info and action UI | +| `lib/user_info/cometchat_user_info.dart` | User info and action UI | ## Integration Steps @@ -105,5 +105,20 @@ ElevatedButton( ## Next Steps & Further Reading -- **Sample App on GitHub:** - https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app + + + +Fully functional sample applications to accelerate your development. + +[View on GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) + + + + + +Access the complete UI Kit source code on GitHub. + +[View on GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/chat_uikit) + + + \ No newline at end of file diff --git a/ui-kit/flutter/guide-new-chat.mdx b/ui-kit/flutter/guide-new-chat.mdx index db664e62..8ec4b682 100644 --- a/ui-kit/flutter/guide-new-chat.mdx +++ b/ui-kit/flutter/guide-new-chat.mdx @@ -148,4 +148,20 @@ void _onItemTap({required BuildContext context, User? user, Group? group}) { ## Next Steps & Further Reading -- [CometChat Flutter UIKit Sample App](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) + + + +Fully functional sample applications to accelerate your development. + +[View on GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) + + + + + +Access the complete UI Kit source code on GitHub. + +[View on GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/chat_uikit) + + + \ No newline at end of file diff --git a/ui-kit/flutter/guide-threaded-messages.mdx b/ui-kit/flutter/guide-threaded-messages.mdx index ba1c199e..dcfc38c7 100644 --- a/ui-kit/flutter/guide-threaded-messages.mdx +++ b/ui-kit/flutter/guide-threaded-messages.mdx @@ -22,7 +22,7 @@ The sample app demonstrates how to enable threaded messaging in Flutter using Co ## Components | Component | Role | -|------------------------------------|--------------------------------------------------------------| +|:-----------------------------------|:-------------------------------------------------------------| | `CometChatMessageList` | Displays main chat; provides `onThreadRepliesClick` callback.| | `CometChatThreadedMessageList` | Fetches and displays replies for a parent message. | | `CometChatMessageComposer` | Sends new messages; pass `parentMessageId` to send replies. | @@ -147,7 +147,7 @@ Ensures only relevant threaded messages are shown. ## Summary / Feature Matrix | Feature | Component / Method | -|-------------------------------|------------------------------------------------| +|:------------------------------|:-----------------------------------------------| | Show thread option | `CometChatMessageList.onThreadRepliesClick` | | Thread view screen | `CometChatThread` widget | | Display threaded messages | `CometChatThreadedMessageList(parentMessageId)`| @@ -156,5 +156,20 @@ Ensures only relevant threaded messages are shown. ## Next Steps & Further Reading -- **Full Sample App:** - https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app + + + +Fully functional sample applications to accelerate your development. + +[View on GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) + + + + + +Access the complete UI Kit source code on GitHub. + +[View on GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/chat_uikit) + + + \ No newline at end of file diff --git a/ui-kit/flutter/overview.mdx b/ui-kit/flutter/overview.mdx index cd02bb21..f0b3d155 100644 --- a/ui-kit/flutter/overview.mdx +++ b/ui-kit/flutter/overview.mdx @@ -70,7 +70,7 @@ To begin, please follow the [Getting Started](/ui-kit/flutter/getting-started) g Explore these essential resources to gain a deeper understanding of **CometChat UI Kits** and streamline your integration process. - + Fully functional sample applications to accelerate your development. @@ -78,7 +78,7 @@ Fully functional sample applications to accelerate your development. - + Access the complete UI Kit source code on GitHub. From e2b8e747a41e2258ed880df853dfb6ac1b2e761b Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Fri, 1 Aug 2025 15:15:06 +0530 Subject: [PATCH 019/196] Update guide-threaded-messages.mdx --- ui-kit/flutter/guide-threaded-messages.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui-kit/flutter/guide-threaded-messages.mdx b/ui-kit/flutter/guide-threaded-messages.mdx index dcfc38c7..c03f5ce7 100644 --- a/ui-kit/flutter/guide-threaded-messages.mdx +++ b/ui-kit/flutter/guide-threaded-messages.mdx @@ -101,7 +101,7 @@ CometChatMessageComposer( **File reference:** [`lib/thread_screen/cometchat_thread.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart) -**Why:** Automatically associates new messages with the parent thread. +Automatically associates new messages with the parent thread. ### Fetch & Display Thread Replies From f2fd612bc5f3aae4c3defa24230407e70a1348f2 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Fri, 1 Aug 2025 15:22:30 +0530 Subject: [PATCH 020/196] Update guide-threaded-messages.mdx --- ui-kit/flutter/guide-threaded-messages.mdx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/ui-kit/flutter/guide-threaded-messages.mdx b/ui-kit/flutter/guide-threaded-messages.mdx index c03f5ce7..5339716c 100644 --- a/ui-kit/flutter/guide-threaded-messages.mdx +++ b/ui-kit/flutter/guide-threaded-messages.mdx @@ -17,8 +17,7 @@ The sample app demonstrates how to enable threaded messaging in Flutter using Co - A Flutter project with **CometChat UIKit Flutter v5** installed. - Initialized CometChat credentials (`appID`, `region`, `authKey`). -- Navigation set up (e.g., `lib/messages.dart` to `lib/thread_screen/cometchat_thread.dart`). - + ## Components | Component | Role | From 5be77352af40dc9823d31d4f92a63e9f3ce8cb04 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Fri, 1 Aug 2025 15:26:16 +0530 Subject: [PATCH 021/196] Update guide-block-unblock-user.mdx --- ui-kit/flutter/guide-block-unblock-user.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui-kit/flutter/guide-block-unblock-user.mdx b/ui-kit/flutter/guide-block-unblock-user.mdx index f9de7634..dce75147 100644 --- a/ui-kit/flutter/guide-block-unblock-user.mdx +++ b/ui-kit/flutter/guide-block-unblock-user.mdx @@ -18,7 +18,7 @@ The Block User feature lets one user prevent another from sending messages or in ## Components | Component | Role | -|-------------------------------------|---------------------------------------------------------| +|:------------------------------------|:--------------------------------------------------------| | `CometChatUserInfo` | Displays user profile with block/unblock controls | | `CometChatUIKit.blockUsers([...])` | SDK method to block specified user(s) | | `CometChatUIKit.unblockUsers([...])` | SDK method to unblock specified user(s) | @@ -119,7 +119,7 @@ This guide covers only user-to-user blocking. For group moderation (ban or remov ## Summary / Feature Matrix | Feature | File | Method | -|----------------------|----------------------------------------------|------------------------------------------| +|:---------------------|:---------------------------------------------|:-----------------------------------------| | Open User Info | `sample_app/lib/messages/messages.dart` | `Navigator.push(...)` | | Block User | `sample_app/lib/user_info/cometchat_user_info.dart` | `CometChatUIKit.blockUsers([...])` | | Unblock User | `sample_app/lib/user_info/cometchat_user_info.dart` | `CometChatUIKit.unblockUsers([...])` | From 63cfaa466005bf597f70da00c8118579d6bd1704 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Fri, 1 Aug 2025 15:49:23 +0530 Subject: [PATCH 022/196] Update guide-block-unblock-user.mdx --- ui-kit/flutter/guide-block-unblock-user.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/ui-kit/flutter/guide-block-unblock-user.mdx b/ui-kit/flutter/guide-block-unblock-user.mdx index dce75147..a3191fae 100644 --- a/ui-kit/flutter/guide-block-unblock-user.mdx +++ b/ui-kit/flutter/guide-block-unblock-user.mdx @@ -120,10 +120,10 @@ This guide covers only user-to-user blocking. For group moderation (ban or remov | Feature | File | Method | |:---------------------|:---------------------------------------------|:-----------------------------------------| -| Open User Info | `sample_app/lib/messages/messages.dart` | `Navigator.push(...)` | -| Block User | `sample_app/lib/user_info/cometchat_user_info.dart` | `CometChatUIKit.blockUsers([...])` | -| Unblock User | `sample_app/lib/user_info/cometchat_user_info.dart` | `CometChatUIKit.unblockUsers([...])` | -| Group Management | `sample_app/lib/group_info/cometchat_group_info.dart` | `removeMembers`, `banMembers` | +| Open User Info | [sample_app/lib/messages/messages.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/messages/messages.dart) | `Navigator.push(...)` | +| Block User | [sample_app/lib/user_info/cometchat_user_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info.dart) | `CometChatUIKit.blockUsers([...])` | +| Unblock User | [sample_app/lib/user_info/cometchat_user_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info.dart) | `CometChatUIKit.unblockUsers([...])` | +| Group Management | [sample_app/lib/group_info/cometchat_group_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/group_info/cometchat_group_info.dart) | `removeMembers`, `banMembers` | ## Next Steps & Further Reading From 8698321249a1bae591c4f37ba171f2d15dcde892 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Fri, 1 Aug 2025 15:50:36 +0530 Subject: [PATCH 023/196] Update guide-block-unblock-user.mdx --- ui-kit/flutter/guide-block-unblock-user.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui-kit/flutter/guide-block-unblock-user.mdx b/ui-kit/flutter/guide-block-unblock-user.mdx index a3191fae..125c6185 100644 --- a/ui-kit/flutter/guide-block-unblock-user.mdx +++ b/ui-kit/flutter/guide-block-unblock-user.mdx @@ -123,7 +123,7 @@ This guide covers only user-to-user blocking. For group moderation (ban or remov | Open User Info | [sample_app/lib/messages/messages.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/messages/messages.dart) | `Navigator.push(...)` | | Block User | [sample_app/lib/user_info/cometchat_user_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info.dart) | `CometChatUIKit.blockUsers([...])` | | Unblock User | [sample_app/lib/user_info/cometchat_user_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info.dart) | `CometChatUIKit.unblockUsers([...])` | -| Group Management | [sample_app/lib/group_info/cometchat_group_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/group_info/cometchat_group_info.dart) | `removeMembers`, `banMembers` | +| Group Management | [sample_app/lib/group_info/cometchat_group_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/group_info/cometchat_group_info.dart) | Group-related actions (not blocking) | ## Next Steps & Further Reading From ad06ffb6055f7d8d8997c9d005da084755bb7ff1 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Fri, 1 Aug 2025 16:33:02 +0530 Subject: [PATCH 024/196] Update guide-group-chat.mdx --- ui-kit/flutter/guide-group-chat.mdx | 303 +++++++++++++++++----------- 1 file changed, 188 insertions(+), 115 deletions(-) diff --git a/ui-kit/flutter/guide-group-chat.mdx b/ui-kit/flutter/guide-group-chat.mdx index 4aee75ec..958fdd46 100644 --- a/ui-kit/flutter/guide-group-chat.mdx +++ b/ui-kit/flutter/guide-group-chat.mdx @@ -1,147 +1,220 @@ --- -title: "Customizing Group Chat UI in Flutter with CometChat UI Kit" -sidebarTitle: "Group Chat" +title: "Managing Groups in Flutter UI Kit" +sidebarTitle: "Groups" --- -Learn how to tailor the CometChat Flutter UI Kit’s group chat components to match your app’s design and functionality requirements. +Learn how to create groups, join public/password groups, manage members, ban users, update roles, and transfer group ownership using CometChat UIKit for Flutter. ## Overview -- Enables developers to modify the appearance and behavior of group chat screens, list items, and dialogs in the CometChat Flutter UI Kit. -- Aligns group chat UI with brand identity and improves user engagement by offering a consistent, customized user experience. -- A Flutter group chat interface with custom colors, layouts, and interaction patterns for group listings, headers, and messages. + +Enable your users to: + +- Create or join public/private/password-protected groups +- View and manage group members +- Assign roles and moderate participants +- Transfer group ownership for continuity ## Prerequisites -- Flutter SDK 3.0+ -- CometChat Flutter UI Kit v5.x -- A Flutter project with `cometchat_flutter` dependency added -- Initialized CometChat with valid App ID, Region, and Auth Key -- Basic familiarity with Flutter theming and widget composition + +- **CometChat UIKit for Flutter** installed via `pubspec.yaml` +- CometChat initialized with `App ID`, `Region`, and `Auth Key` +- Group chat enabled in your CometChat app +- Navigation set up between group/member screens +- Internet permissions ## Components -| Component / Class | Role | -|--------------------------------------|--------------------------------------------------------------| -| `CometChatGroupList` | Displays list of available groups | -| `CometChatGroupListItem` | Renders each group tile with avatar and name | -| `CometChatGroupInfoHeader` | Shows group name, avatar, member count in the chat screen | -| `CometChatMessageList` | Displays messages within a group | -| `CometChatMessageComposer` | Input field for sending messages in a group | + +| Component/Class | Role | +|-----------------------------|------------------------------------------------------| +| `CometChatGroups` | Displays groups and a “create” button | +| `CometChatCreateGroup` | UI to create new groups | +| `CometChatContacts` | Lets users search/join groups | +| `CometChatGroupInfo` | Shows group info and member management options | +| `CometChatAddMembers` | Add members to a group | +| `CometChatBannedMembers` | View/unban banned users | +| `CometChatTransferOwnership`| Transfer group ownership | +| `CometChatChangeScope` | Change a user’s group role | +| `JoinProtectedGroupUtils` | Utility to join password-protected groups | ## Integration Steps -### Override Group List Item UI -Customize the layout and styling of each group tile. - ```dart - CometChatGroupList( - groupItemBuilder: (context, group) { - return ListTile( - leading: CircleAvatar( - backgroundImage: NetworkImage(group.avatar), - radius: 24, - backgroundColor: Colors.blueAccent, - ), - title: Text( - group.name, - style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18), - ), - subtitle: Text('\${group.memberCount} members'), - ); - }, - ); - ``` -**File path:** `lib/screens/groups_screen.dart` - -### Customize Group Info Header -Modify header layout and actions in the group chat screen. - ```dart - CometChatGroupInfoHeader( - style: GroupInfoHeaderStyle( - backgroundColor: Colors.white, - titleTextStyle: TextStyle(color: Colors.deepPurple, fontSize: 20), - avatarRadius: 32, - ), - onBack: () => Navigator.pop(context), - onViewMembers: () => showGroupMembers(context, group), - ); - ``` -**File path:** `lib/widgets/group_info_header.dart` - -### Apply Custom Message Bubbles in Group -Change message bubble colors and border radius. - ```dart - CometChatMessageList( - messageBubbleBuilder: (context, message, isSentByMe) { - return Bubble( - color: isSentByMe ? Colors.green[200] : Colors.grey[300], - borderRadius: BorderRadius.circular(16), - child: Text(message.text ?? ''), - ); - }, - ); - ``` -**File path:** `lib/widgets/message_list.dart` - -### Customize the Message Composer -Adjust the composer background and send button appearance. - ```dart - CometChatMessageComposer( - composerStyle: ComposerStyle( - backgroundColor: Colors.white, - sendButtonIcon: Icons.send_rounded, - sendButtonColor: Colors.deepPurple, - ), - ); - ``` -**File path:** `lib/widgets/message_composer.dart` +### Create a Group + +```dart +IconButton( + onPressed: () { + showCreateGroup( + context: context, + colorPalette: colorPalette, + typography: typography, + spacing: spacing, + ); + }, + icon: Icon(Icons.group_add), +); +``` + +```dart +ElevatedButton( + onPressed: () async { + await CometChat.createGroup( + group: Group( + guid: groupId, + name: groupName, + type: groupType, + password: groupPassword, + ), + onSuccess: (Group group) => Navigator.pop(context), + onError: (e) { + // Show error + }, + ); + }, + child: Text('Create Group'), +); +``` + +📄 [`dashboard.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart) + +--- + +### Join Public/Password Group + +```dart +CometChatGroups( + onItemTap: (context, group) { + JoinProtectedGroupUtils.onGroupItemTap(context, group, ...); + }, +); +``` + +```dart +if (group.type == GroupType.password) { + // Show password prompt + // Join via CometChat.joinGroup with password +} +``` + +📄 [`join_protected_group_util.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/utils/join_protected_group_util.dart) + +--- + +### View Members + +```dart +CometChatGroupInfo( + group: group, +); +``` + +📄 [`group_info/cometchat_group_info.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/group_info/cometchat_group_info.dart) + +--- + +### Add Members + +```dart +CometChatAddMembers( + group: group, +); +``` + +📄 [`add_members/cometchat_add_members.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/add_members/cometchat_add_members.dart) + +--- + +### Ban/Unban Members + +```dart +CometChatBannedMembers( + group: group, +); +``` + +📄 [`banned_members/cometchat_banned_members.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/banned_members/cometchat_banned_members.dart) + +--- + +### Change Member Scope + +```dart +CometChatChangeScope( + group: group, + user: user, +); +``` + +📄 [`group_info/cometchat_group_info_controller.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/group_info/cometchat_group_info_controller.dart) + +--- + +### Transfer Ownership + +```dart +CometChatTransferOwnership( + group: group, +); +``` + +📄 [`transfer_ownership/cometchat_transfer_ownership.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/transfer_ownership/cometchat_transfer_ownership.dart) + +--- ## Implementation Flow -- Fetch list of groups from CometChat service -- Render custom group list using overridden builder -- On group selection, navigate to group chat screen -- Display custom header and message list -- Handle sending and receiving messages with custom composer + +1. User creates or joins a group +2. Admin views group info and member list +3. Admin can add, ban, change scope, or transfer ownership ## Customization Options -- **Styling Themes:** Override `ThemeData` or use dedicated style classes. -- **Event Callbacks:** Use `onGroupUpdated`, `onMemberAdded` hooks for dynamic UI updates. -- **Template Overrides:** Provide entirely custom widgets via builder properties. + +- Modify theme using CometChat UIKit theming APIs +- Add logic to validate group name or enforce limits +- Adjust member filters or role options as needed ## Filtering / Edge Cases -- Long group names: use `TextOverflow.ellipsis` -- Empty avatar URL: fallback to initials avatar builder -- Offline group member count: display loading indicator -## Error Handling & Blocked-User Handling -- **UI states:** Show snackbars for join or leave failures in groups -- **Retry flows:** Provide retry button when message send fails due to network errors +- Filter by roles or banned status +- Prevent duplicate group IDs +- Prevent banning owner or transferring to non-member + +## Error Handling & Blocked Users + +- Show UI feedback (SnackBars) on failure +- Blocked users cannot be added or may be auto-banned +- Retry logic for failed actions (create, join, etc.) + +## Group Type Notes -## (Optional) Group vs. User-Level Differences -When customizing one-on-one chat vs. group chat: -- Group chats often include member lists and admin controls -- One-on-one chats skip member count and group settings +- Public: anyone can join +- Password: prompt required +- Private: invite-only +- Only admins can ban, change roles, or transfer ownership ## Summary / Feature Matrix -| Feature | Component / Method | -|:--------------------------------|:--------------------------------------------------------| -| Custom group list item UI | `groupItemBuilder` in `CometChatGroupList` | -| Styled group info header | `GroupInfoHeaderStyle` in `CometChatGroupInfoHeader` | -| Colored message bubbles | `messageBubbleBuilder` in `CometChatMessageList` | -| Custom send button in composer | `ComposerStyle.sendButtonIcon` and `.sendButtonColor` | + +| Feature | Component / Method | File Path | +|---------------------|----------------------------------|-----------------------------------------------------| +| Create group | `CometChatCreateGroup` | `create_group/cometchat_create_group.dart` | +| Join group | `CometChatGroups`, `JoinProtectedGroupUtils` | `contacts/cometchat_contacts_controller.dart`, `utils/join_protected_group_util.dart` | +| View members | `CometChatGroupInfo` | `group_info/cometchat_group_info.dart` | +| Add members | `CometChatAddMembers` | `add_members/cometchat_add_members.dart` | +| Ban/unban members | `CometChatBannedMembers` | `banned_members/cometchat_banned_members.dart` | +| Change scope | `CometChatChangeScope` | `group_info/cometchat_group_info.dart` | +| Transfer ownership | `CometChatTransferOwnership` | `transfer_ownership/cometchat_transfer_ownership.dart` | ## Next Steps & Further Reading - - -Fully functional sample applications to accelerate your development. + + +Explore the working implementation in our official sample app. [View on GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) - - - -Access the complete UI Kit source code on GitHub. + +Get the full UI Kit source for deeper customization. [View on GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/chat_uikit) - - \ No newline at end of file + From a5b1c6a90b3ef92ace53459e820df22d205aae36 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 6 Aug 2025 13:43:37 +0530 Subject: [PATCH 025/196] adds guides from sample app --- docs.json | 11 ++ ui-kit/ios/guide-block-unblock-user.mdx | 0 ui-kit/ios/guide-call-log-details.mdx | 0 ui-kit/ios/guide-group-chat.mdx | 0 ui-kit/ios/guide-message-privately.mdx | 0 ui-kit/ios/guide-new-chat.mdx | 0 ui-kit/ios/guide-threaded-messages.mdx | 153 ++++++++++++++++++++++++ 7 files changed, 164 insertions(+) create mode 100644 ui-kit/ios/guide-block-unblock-user.mdx create mode 100644 ui-kit/ios/guide-call-log-details.mdx create mode 100644 ui-kit/ios/guide-group-chat.mdx create mode 100644 ui-kit/ios/guide-message-privately.mdx create mode 100644 ui-kit/ios/guide-new-chat.mdx create mode 100644 ui-kit/ios/guide-threaded-messages.mdx diff --git a/docs.json b/docs.json index a788badd..9cb4029c 100644 --- a/docs.json +++ b/docs.json @@ -1113,6 +1113,17 @@ "ui-kit/ios/message-template" ] }, + { + "group": "Guides", + "pages": [ + "ui-kit/ios/guide-threaded-messages", + "ui-kit/ios/guide-block-unblock-user", + "ui-kit/ios/guide-new-chat", + "ui-kit/ios/guide-message-privately", + "ui-kit/ios/guide-call-log-details", + "ui-kit/ios/guide-group-chat" + ] + }, "ui-kit/ios/link/sample", "ui-kit/ios/link/figma", "ui-kit/ios/link/changelog" diff --git a/ui-kit/ios/guide-block-unblock-user.mdx b/ui-kit/ios/guide-block-unblock-user.mdx new file mode 100644 index 00000000..e69de29b diff --git a/ui-kit/ios/guide-call-log-details.mdx b/ui-kit/ios/guide-call-log-details.mdx new file mode 100644 index 00000000..e69de29b diff --git a/ui-kit/ios/guide-group-chat.mdx b/ui-kit/ios/guide-group-chat.mdx new file mode 100644 index 00000000..e69de29b diff --git a/ui-kit/ios/guide-message-privately.mdx b/ui-kit/ios/guide-message-privately.mdx new file mode 100644 index 00000000..e69de29b diff --git a/ui-kit/ios/guide-new-chat.mdx b/ui-kit/ios/guide-new-chat.mdx new file mode 100644 index 00000000..e69de29b diff --git a/ui-kit/ios/guide-threaded-messages.mdx b/ui-kit/ios/guide-threaded-messages.mdx new file mode 100644 index 00000000..91e28a0c --- /dev/null +++ b/ui-kit/ios/guide-threaded-messages.mdx @@ -0,0 +1,153 @@ +--- +title: "CometChat UIKit iOS — Threaded Messages" +sidebarTitle: "Threaded Messages" +--- + +Enhance your iOS chat app with threaded messaging by integrating CometChat’s **UIKit for iOS**, allowing users to reply to specific messages within a focused thread view. + +## Overview + +Threaded messages allow users to reply to specific messages within a conversation, creating a sub-conversation for improved clarity and context. With CometChat’s UIKit for iOS, you can: + +- Display a dedicated thread view. +- View and send replies to a selected message. +- Maintain context between the main conversation and the thread. + +## Prerequisites + +- A working UIKit-based iOS project. +- CometChat UIKit for iOS v4+ installed via Swift Package Manager or CocoaPods. +- Valid CometChat **App ID**, **Region**, and **Auth Key**. +- A navigation controller configured in your project. + +## Components + +| Component | Role | +|:----------------------------------|:-----------------------------------------------------------| +| `CometChatMessageList` | Displays messages and provides `onThreadRepliesClick` handler. | +| `CometChatThreadedMessageHeader` | Shows the parent message context at the top of the thread. | +| `CometChatMessageComposer` | Composes messages with an optional `parentMessageId`. | +| `ThreadedMessagesVC` | View controller that hosts the threaded conversation. | + +## Integration Steps + +### Show the "Reply in Thread" Option + +Navigate to the thread when a message’s thread icon is tapped. + +```swift +messageListView.set(onThreadRepliesClick: { [weak self] message, _ in + guard let self = self else { return } + let threadVC = ThreadedMessagesVC() + threadVC.parentMessage = message + self.navigationController?.pushViewController(threadVC, animated: true) +}) +``` + +**File reference:** +[`ThreadedMessagesVC.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/ThreadedMessagesVC.swift) + +Captures user intent and opens a focused thread screen. + +### Navigate to the Thread Screen + +Show a dedicated UI for thread replies. + +In `ThreadedMessagesVC.swift`: + +```swift +view.addSubview(parentMessageView) +view.addSubview(messageListView) +view.addSubview(composerView) +``` + +Header: + +```swift +let parentMessageContainerView = CometChatThreadedMessageHeader() +``` + +Message List: + +```swift +messageListView.set(user: user, parentMessage: parentMessage) +``` + +Provides a focused UI for thread interactions. + +### Send a Threaded Message + +Ensure new replies are attached to the correct parent message. + +```swift +composerView.set(parentMessageId: parentMessage?.id ?? 0) +``` + +Set the conversation context: + +```swift +composerView.set(user: user) +composerView.set(group: group) +``` + +### Fetch & Display Thread Replies + +Only messages that are part of the thread are displayed. + +Handled internally by: + +```swift +messageListView.set(user: user, parentMessage: parentMessage) +``` + +Ensures `CometChatMessageList` fetches replies using the `parentMessageId`. + +## Customization Options + +- **Header Styling:** Customize `CometChatThreadedMessageHeader` (fonts, colors, etc.). +- **Composer:** Modify placeholder text, input styles, and icons. +- **Navigation:** Add a custom `navigationItem.leftBarButtonItem` for back navigation. + +## Filtering / Edge Cases + +- **Parent Message Deleted:** Display a fallback UI or disable the composer. +- **No Replies:** Show an empty state (e.g., “No replies yet”). +- **Offline Mode:** Disable the composer and queue thread operations. + +## Error Handling & Edge Cases + +- **Fetch Failures:** Show an error UI or retry mechanism when loading thread messages. +- **Send Failures:** Handle send errors via delegate callbacks or show an alert with retry. +- **Loading States:** Display a `UIActivityIndicatorView` during fetch/send operations. +- **Blocked Users:** Remove the composer and display a blocked status label. + +## Summary / Feature Matrix + +| Feature | Implementation | +|:----------------------------|:------------------------------------------------------| +| Show thread option | `CometChatMessageList.onThreadRepliesClick` | +| Thread view screen | `ThreadedMessagesVC.swift` | +| Display threaded messages | `CometChatMessageList.set(parentMessage:)` | +| Send threaded message | `CometChatMessageComposer.set(parentMessageId:)` | +| Thread header | `CometChatThreadedMessageHeader` | +| Handle blocked user | Remove composer & show a blocked user label | + + + + + +Explore a complete sample application demonstrating threaded messaging. + +[View on GitHub](https://github.com/cometchat/cometchat-uikit-ios/tree/v5/SampleApp) + + + + + +Browse the CometChat UIKit for iOS source code. + +[View on GitHub](https://github.com/cometchat/cometchat-uikit-ios/tree/v5) + + + + \ No newline at end of file From 35d7aecb6feadb02755b3e23ca3faf9461b4bcbd Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 6 Aug 2025 13:51:12 +0530 Subject: [PATCH 026/196] Update guide-block-unblock-user.mdx --- ui-kit/ios/guide-block-unblock-user.mdx | 163 ++++++++++++++++++++++++ 1 file changed, 163 insertions(+) diff --git a/ui-kit/ios/guide-block-unblock-user.mdx b/ui-kit/ios/guide-block-unblock-user.mdx index e69de29b..dcd3b18e 100644 --- a/ui-kit/ios/guide-block-unblock-user.mdx +++ b/ui-kit/ios/guide-block-unblock-user.mdx @@ -0,0 +1,163 @@ +--- +title: "CometChat UIKit iOS — User Details" +sidebarTitle: "User Details" +--- + +Build a comprehensive user profile screen in your iOS app using CometChat’s UIKit for iOS, complete with avatar display, messaging, audio/video calls, and block/unblock actions. + +## Overview + +The `UserDetailsViewController` provides a detailed view of a CometChat user’s profile and key interaction options, including: + +- Displaying the user’s avatar, name, and online status. +- Initiating one-on-one chats. +- Starting audio or video calls. +- Blocking or unblocking users. +- Deleting the conversation with the user. + +## Prerequisites + +- A UIKit-based iOS project. +- CometChat UIKit for iOS v5 installed via CocoaPods or Swift Package Manager. +- Valid CometChat **App ID**, **Region**, and **Auth Key**. +- User authenticated with `CometChat.login()` before presenting the details screen. + +## Components + +| Component | Role | +|-----------------------------------|---------------------------------------------------------------| +| `CometChatAvatar` | Displays user’s profile picture with customizable styling. | +| `CometChatMessagesViewController`| Opens the 1-on-1 chat interface when “Message” is tapped. | +| `CometChatCallButtons` | Initiates audio/video calls (`CometChat.startCall()`). | +| `CometChatUIKit.blockUser()` | Blocks the selected user and updates UI accordingly. | +| `CometChatUIKit.unblockUser()` | Unblocks a user if previously blocked. | + +## Integration Steps + +### 1. Presenting the User Details Screen + +Initialize and push `UserDetailsViewController` with the selected user’s data. + +```swift +import UIKit +import CometChatSDK + +func showUserDetails(for user: User) { + let detailsVC = UserDetailsViewController(user: user) + navigationController?.pushViewController(detailsVC, animated: true) +} +``` + +Ensures the details screen loads with the correct user context. + +### 2. Configuring the UI + +Arrange avatar, labels, and action buttons on the view. + +```swift +override public func viewWillAppear(_ animated: Bool) { + super.viewWillAppear(animated) + setupLayout() + setupNavigationBar() + if let user = user { + updateUserStatus(user: user) + } +} +``` + +Applies theme-based styling and updates status label on appearance. + +### 3. Enabling Call Buttons + +Add audio and video call buttons if calls SDK is available. + +```swift +#if canImport(CometChatCallsSDK) +buttonContainerStackView.addArrangedSubview(audioCallButton) +buttonContainerStackView.addArrangedSubview(videoCallButton) +#endif +``` + +Conditionally shows call options based on SDK availability. + +### 4. Block/Unblock and Delete Actions + +Provide block/unblock and delete conversation functionality. + +```swift +@objc func showBlockAlert() { + // Toggle block/unblock logic with CometChat.blockUsers / unblockUsers +} + +@objc func showDeleteAlert() { + // Confirm and call CometChat.deleteConversation() +} +``` + +Manages user relationships and conversation lifecycle. + +### 5. Listening for User Events + +Update UI in response to status, block, and unblock events. + +```swift +func connect() { + CometChat.addUserListener(listenerID, self) + CometChatUserEvents.addListener(listenerID, self) +} + +func disconnect() { + CometChat.removeUserListener(listenerID) + CometChatUserEvents.removeListener(listenerID) +} + +extension UserDetailsViewController: CometChatUserEventListener, CometChatUserDelegate { + func onUserOnline(user: User) { updateUserStatus(user: user) } + func onUserOffline(user: User) { updateUserStatus(user: user) } + func ccUserBlocked(user: User) { statusLabel.isHidden = true } + func ccUserUnblocked(user: User) { statusLabel.isHidden = false; updateUserStatus(user: user) } +} +``` + +Keeps profile status and block state in sync with real-time events. + +## Customization Options + +- **Avatar Styling:** Use `CometChatAvatarStyle` to adjust shape and border. +- **Button Assets:** Replace default icons with custom images. +- **Localization:** Override button titles and alerts with localized strings. +- **Theming:** Leverage `CometChatTheme` and `CometChatTypography` for fonts and colors. + +## Filtering & Edge Cases + +- Hide block/unblock controls for the logged-in user. +- Disable call buttons if calling is disabled in settings. +- Handle missing or partially loaded user data with fallback UI. + +## Error Handling + +- **Fetch Failures:** Show error label or dismiss the view. +- **Block/Unblock Errors:** Present retry alert on API failure. +- **Call Failures:** Alert user on call initiation error or permission denial. + +## Feature Matrix + +| Feature | Component / Method | +|:-------------------------|:--------------------------------------------| +| Display user details | `CometChatAvatar`, `UILabel` | +| Open chat | `CometChatMessagesViewController(user:)` | +| Audio/video call | `CometChat.startCall()` via Call Buttons | +| Block user | `CometChatUIKit.blockUser(uid:)` | +| Unblock user | `CometChatUIKit.unblockUser(uid:)` | +| Delete conversation | `CometChat.deleteConversation()` | + + + + Try the complete sample app for User Details: + [GitHub → SampleApp](https://github.com/cometchat/cometchat-uikit-ios/tree/v5/SampleApp) + + + Explore CometChat UIKit iOS repository: + [GitHub → UIKit v5](https://github.com/cometchat/cometchat-uikit-ios/tree/v5) + + \ No newline at end of file From 1bc33932281e4a634dbe7d70df7b8dd25011deb8 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 6 Aug 2025 13:54:27 +0530 Subject: [PATCH 027/196] updates titles --- ui-kit/flutter/guide-threaded-messages.mdx | 2 +- ui-kit/ios/guide-block-unblock-user.mdx | 4 ++-- ui-kit/ios/guide-threaded-messages.mdx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/ui-kit/flutter/guide-threaded-messages.mdx b/ui-kit/flutter/guide-threaded-messages.mdx index 5339716c..7e140d86 100644 --- a/ui-kit/flutter/guide-threaded-messages.mdx +++ b/ui-kit/flutter/guide-threaded-messages.mdx @@ -1,5 +1,5 @@ --- -title: "CometChat Flutter UI Kit — Threaded Messages" +title: "Threaded Messages" sidebarTitle: "Threaded Messages" --- diff --git a/ui-kit/ios/guide-block-unblock-user.mdx b/ui-kit/ios/guide-block-unblock-user.mdx index dcd3b18e..0e569d42 100644 --- a/ui-kit/ios/guide-block-unblock-user.mdx +++ b/ui-kit/ios/guide-block-unblock-user.mdx @@ -1,6 +1,6 @@ --- -title: "CometChat UIKit iOS — User Details" -sidebarTitle: "User Details" +title: "Implementing Block/Unblock User in iOS with CometChat UIKit" +sidebarTitle: "Block/Unblock User" --- Build a comprehensive user profile screen in your iOS app using CometChat’s UIKit for iOS, complete with avatar display, messaging, audio/video calls, and block/unblock actions. diff --git a/ui-kit/ios/guide-threaded-messages.mdx b/ui-kit/ios/guide-threaded-messages.mdx index 91e28a0c..a1cee6d7 100644 --- a/ui-kit/ios/guide-threaded-messages.mdx +++ b/ui-kit/ios/guide-threaded-messages.mdx @@ -1,5 +1,5 @@ --- -title: "CometChat UIKit iOS — Threaded Messages" +title: "Threaded Messages" sidebarTitle: "Threaded Messages" --- From 8d86a0c2a748fa1c82e567e726cf9b4415e221c2 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 6 Aug 2025 14:40:52 +0530 Subject: [PATCH 028/196] Update guide-block-unblock-user.mdx --- ui-kit/ios/guide-block-unblock-user.mdx | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/ui-kit/ios/guide-block-unblock-user.mdx b/ui-kit/ios/guide-block-unblock-user.mdx index 0e569d42..23ca23e6 100644 --- a/ui-kit/ios/guide-block-unblock-user.mdx +++ b/ui-kit/ios/guide-block-unblock-user.mdx @@ -25,7 +25,7 @@ The `UserDetailsViewController` provides a detailed view of a CometChat user’s ## Components | Component | Role | -|-----------------------------------|---------------------------------------------------------------| +|:----------------------------------|:--------------------------------------------------------------| | `CometChatAvatar` | Displays user’s profile picture with customizable styling. | | `CometChatMessagesViewController`| Opens the 1-on-1 chat interface when “Message” is tapped. | | `CometChatCallButtons` | Initiates audio/video calls (`CometChat.startCall()`). | @@ -48,6 +48,9 @@ func showUserDetails(for user: User) { } ``` +**File reference:** +[`UserDetailsViewController.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/UserDetailsViewController.swift) + Ensures the details screen loads with the correct user context. ### 2. Configuring the UI @@ -65,6 +68,9 @@ override public func viewWillAppear(_ animated: Bool) { } ``` +**File reference:** +[`UserDetailsViewController.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/UserDetailsViewController.swift#L45-L60) + Applies theme-based styling and updates status label on appearance. ### 3. Enabling Call Buttons @@ -78,6 +84,9 @@ buttonContainerStackView.addArrangedSubview(videoCallButton) #endif ``` +**File reference:** +[`UserDetailsViewController.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/UserDetailsViewController.swift#L75-L82) + Conditionally shows call options based on SDK availability. ### 4. Block/Unblock and Delete Actions @@ -94,6 +103,9 @@ Provide block/unblock and delete conversation functionality. } ``` +**File reference:** +[`UserDetailsViewController.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/UserDetailsViewController.swift#L90-L110) + Manages user relationships and conversation lifecycle. ### 5. Listening for User Events @@ -119,6 +131,9 @@ extension UserDetailsViewController: CometChatUserEventListener, CometChatUserDe } ``` +**File reference:** +[`UserDetailsViewController.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/UserDetailsViewController.swift#L120-L145) + Keeps profile status and block state in sync with real-time events. ## Customization Options @@ -143,7 +158,7 @@ Keeps profile status and block state in sync with real-time events. ## Feature Matrix | Feature | Component / Method | -|:-------------------------|:--------------------------------------------| +|:-------------------------|:---------------------------------------------| | Display user details | `CometChatAvatar`, `UILabel` | | Open chat | `CometChatMessagesViewController(user:)` | | Audio/video call | `CometChat.startCall()` via Call Buttons | From f84dc4acf4608e100056f2ee820d93ce2fd5624b Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 6 Aug 2025 14:49:31 +0530 Subject: [PATCH 029/196] Update guide-new-chat.mdx --- ui-kit/ios/guide-new-chat.mdx | 202 ++++++++++++++++++++++++++++++++++ 1 file changed, 202 insertions(+) diff --git a/ui-kit/ios/guide-new-chat.mdx b/ui-kit/ios/guide-new-chat.mdx index e69de29b..2628ccbd 100644 --- a/ui-kit/ios/guide-new-chat.mdx +++ b/ui-kit/ios/guide-new-chat.mdx @@ -0,0 +1,202 @@ +--- +title: "Create Conversation" +sidebarTitle: "Create Conversation" +--- + +Enable users to start new 1:1 or group chats in your iOS app using CometChat’s UIKit for iOS by integrating the **CreateConversationVC** screen. + +## Overview + +The `CreateConversationVC` enables users to: + +- Browse CometChat users and groups via native list components. +- Search within users and groups. +- Toggle between “Users” and “Groups” tabs using a segmented control. +- Swipe between lists with a `UIPageViewController`. +- Navigate to `MessagesVC` upon selecting a user or group. + +## Prerequisites + +- A UIKit-based iOS project. +- CometChat UIKit for iOS v5 installed via CocoaPods or Swift Package Manager. +- User authenticated with `CometChat.login()` before presenting this screen. +- A `UINavigationController` embedded in your flow. +- `MessagesVC` implemented to handle chat screens. + +## Components + +| Component | Role | +|:------------------------|:------------------------------------------------------------| +| `UISegmentedControl` | Switches between “Users” and “Groups” tabs. | +| `UIPageViewController` | Enables swipe navigation between list views. | +| `CometChatUsers` | Displays the list of CometChat users. | +| `CometChatGroups` | Displays the list of CometChat groups. | +| `MessagesVC` | Chat interface, launched upon item selection. | +| `searchController` | Provides search for both users and groups. | +| `CometChatTheme` | Applies theming (colors, fonts) for UI consistency. | +| `CometChatTypography` | Defines text styles for segment labels. | + +## Integration Steps + +### 1. Presenting the Create Conversation Screen + +Push `CreateConversations` to allow starting a chat. + +```swift +import UIKit +import CometChatSDK + +func showCreateConversation() { + let createVC = CreateConversationVC() + navigationController?.pushViewController(createVC, animated: true) +} +``` + +**File reference:** +[`HomeScreenViewController.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/HomeScreenViewController.swift) + +Provides entry point to the create-conversation flow. + +### 2. Setting Up the User Interface + +Build the segmented control and page view controller. + +```swift +override public func viewDidLoad() { + super.viewDidLoad() + buildUI() // sets up segmentedControl, pageViewController, and searchController + setupPageViewController() + segmentedControl.addTarget(self, action: #selector(segmentChanged(_:)), for: .valueChanged) + navigationItem.searchController = usersViewController.searchController +} +``` + +**File reference:** +[`CreateConversations.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/CreateConversations.swift) + +Initializes the UI elements and search integration. + +### 3. Configuring Segmented Control Navigation + +Toggle between user and group lists when the segment changes. + +```swift +@objc public func segmentChanged(_ sender: UISegmentedControl) { + let index = sender.selectedSegmentIndex + let direction: UIPageViewController.NavigationDirection = index == 0 ? .reverse : .forward + navigationItem.searchController = (index == 0) + ? usersViewController.searchController + : groupsViewController.searchController + pageViewController.setViewControllers([pages[index]], direction: direction, animated: true) +} +``` + +**File reference:** +[`CreateConversations.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/CreateConversations.swift) + +Keeps the proper search bar and view in sync with the selected tab. + +### 4. Handling Item Selection + +Navigate to `MessagesVC` when a user or group is tapped. + +```swift +// User tap +public lazy var usersViewController: CometChatUsers = { + let vc = CometChatUsers() + vc.set(onItemClick: { [weak self] user, _ in + let chatVC = MessagesVC() + chatVC.user = user + self?.navigationController?.pushViewController(chatVC, animated: true) + }) + vc.searchController.hidesNavigationBarDuringPresentation = false + return vc +}() + +// Group tap +public lazy var groupsViewController: CometChatGroups = { + let vc = CometChatGroups() + vc.set(onItemClick: { [weak self] group, _ in + let chatVC = MessagesVC() + chatVC.group = group + self?.navigationController?.pushViewController(chatVC, animated: true) + }) + vc.searchController.hidesNavigationBarDuringPresentation = false + return vc +}() +``` + +**File reference:** +[`CreateConversations.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/CreateConversations.swift) + +Routes the user to the appropriate chat screen. + +### 5. Managing Page View Transitions + +Implement data source and delegate for smooth swiping. + +```swift +extension CreateConversationVC: UIPageViewControllerDataSource { + public func pageViewController(_ pvc: UIPageViewController, viewControllerBefore vc: UIViewController) -> UIViewController? { + guard let idx = pages.firstIndex(of: vc), idx > 0 else { return nil } + return pages[idx - 1] + } + public func pageViewController(_ pvc: UIPageViewController, viewControllerAfter vc: UIViewController) -> UIViewController? { + guard let idx = pages.firstIndex(of: vc), idx < pages.count - 1 else { return nil } + return pages[idx + 1] + } +} + +extension CreateConversationVC: UIPageViewControllerDelegate { + public func pageViewController(_ pvc: UIPageViewController, didFinishAnimating finished: Bool, previousViewControllers: [UIViewController], transitionCompleted completed: Bool) { + if completed, let current = pvc.viewControllers?.first, let idx = pages.firstIndex(of: current) { + segmentedControl.selectedSegmentIndex = idx + } + } +} +``` + +**File reference:** +[`CreateConversations.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/CreateConversations.swift) + +Synchronizes the segmented control with page swipes. + +## Customization Options + +- **Segment Styling:** Use `CometChatTheme` to customize tint and font. +- **Labels:** Localize or rebrand “USERS” / “GROUPS” labels. +- **Search:** Adjust `searchController.placeholder` and styling. + +## Filtering & Edge Cases + +- **Live Search:** Built-in in `CometChatUsers` and `CometChatGroups`. +- **Empty States:** Components display default “no results” views. +- **Segment Disabled:** Hide tabs if only one list is relevant. + +## Error Handling + +- **Load Errors:** Use `setErrorView()` on list components. +- **Navigation Failures:** Present an alert if push fails. +- **Blocked Users:** Intercept in `onItemClick` to prevent navigation. + +## Feature Matrix + +| Feature | Implementation | +|:------------------------------|:-----------------------------------------------| +| Show create screen | `showCreateConversation()` | +| Tabbed lists | `UISegmentedControl` + `UIPageViewController` | +| Display users | `CometChatUsers()` | +| Display groups | `CometChatGroups()` | +| Search functionality | `searchController` | +| Navigate to chat | `MessagesVC(user:)` / `MessagesVC(group:)` | + + + + Explore the complete create-conversation flow: + [GitHub → SampleApp](https://github.com/cometchat/cometchat-uikit-ios/tree/v5/SampleApp) + + + Browse the source for `CreateConversationVC`: + [GitHub → CreateConversationVC.swift](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/CreateConversationVC.swift) + + \ No newline at end of file From 344616876989a660c3a6e4feb7d540536b9f8733 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 6 Aug 2025 14:53:24 +0530 Subject: [PATCH 030/196] Update guide-message-privately.mdx --- ui-kit/ios/guide-message-privately.mdx | 121 +++++++++++++++++++++++++ 1 file changed, 121 insertions(+) diff --git a/ui-kit/ios/guide-message-privately.mdx b/ui-kit/ios/guide-message-privately.mdx index e69de29b..7425fb30 100644 --- a/ui-kit/ios/guide-message-privately.mdx +++ b/ui-kit/ios/guide-message-privately.mdx @@ -0,0 +1,121 @@ +--- +title: "Message Privately" +sidebarTitle: "Message Privately" +--- + +Enable users to start a private one-on-one chat with a group member directly from a group chat screen using CometChat’s UIKit for iOS. + +## Overview + +The **Message Privately** feature allows users to long-press a message in a group chat and select **Message Privately** to transition into a private conversation with the original sender. This streamlines side discussions and follow-ups without manual user searches. + +## Prerequisites + +- UIKit-based iOS project. +- CometChat UIKit for iOS v5 installed via CocoaPods or Swift Package Manager. +- Valid CometChat **App ID**, **Region**, and **Auth Key**. +- Functional group chat via `CometChatMessageList`. +- A one-on-one chat screen (`CometChatMessages` or custom) and navigation flow configured. + +## Components + +| Component | Role | +|:-----------------------------------|:-------------------------------------------------------------------------------------------------| +| `CometChatMessageList` | Displays group messages; handles long-press to show options. | +| `CometChatMessageOption` | Defines the **Message Privately** option in the context menu. | +| `MessageDataSource` | Supplies the `messagePrivatelyOption` in the options array. | +| `CometChatMessageListViewModel` | Manages UI state, including `hideMessagePrivatelyOption`. | +| `CometChatMessages` | Entry point for rendering or pushing the private chat interface. | +| `CometChatUIKit.getUser(uid:)` | Retrieves the `User` object for the selected message sender. | +| `CometChatUIKit.getConversationWith(user:)` | Creates or fetches the 1-on-1 conversation instance. | +| `UIViewController` (Navigation) | Pushes or presents the private chat screen (`CometChatMessages`). | + +## Integration Steps + +### 1. Control Option Visibility via ViewModel + +Dynamically show or hide **Message Privately** based on app context. + +```swift +public var hideMessagePrivatelyOption: Bool = false { + didSet { + viewModel.hideMessagePrivatelyOption = hideMessagePrivatelyOption + } +} +``` + +**File reference:** +[`CometChatMessageList.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20List/CometChatMessageList.swift) + +Ensures the option only appears when appropriate (e.g., user permissions). + +### 2. Handle Private Chat Navigation + +Retrieve the sender and initiate a private 1-on-1 chat. + +```swift +if let uid = selectedMessage.sender?.uid { + CometChatUIKit.getUser(uid: uid) { user in + CometChatUIKit.getConversationWith(user: user) { conversation in + let messagesVC = CometChatMessages(conversation: conversation) + navigationController?.pushViewController(messagesVC, animated: true) + } + } +} +``` + +**File reference:** +[`CometChatMessageList.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20List/CometChatMessageList.swift) + +Automates transition from group context to private conversation. + +## Implementation Flow + +1. Long-press a group message in `CometChatMessageList`. +2. Options menu appears with **Message Privately**. +3. User taps **Message Privately**. +4. App fetches `User` via `CometChatUIKit.getUser(uid:)`. +5. Retrieves or creates conversation via `CometChatUIKit.getConversationWith(user:)`. +6. Pushes `CometChatMessages` onto the navigation stack. + +## Customization Options + +- **Styling:** Override `CometChatMessageOption` UI (icons, fonts, colors). +- **Availability:** Control via `viewModel.hideMessagePrivatelyOption`. +- **Extend Options:** Add additional actions in `MessageDataSource.getMessageOptions(for:)`. + +## Filtering & Edge Cases + +- **Blocked Users:** Hide option if the sender is in block list. +- **Existing Conversations:** Reuse existing thread via `getConversationWith`. +- **Unavailable Users:** Skip option or show disabled state if user data missing. + +## Error Handling & Blocked-User Handling + +- **Block State:** Catch errors from `getUser`/`getConversationWith` and alert user. +- **Network Failures:** Present retry or toast on navigation errors. +- **Invalid Data:** Disable option if `sender.uid` is nil. + +## Optional Context-Specific Notes + +- Only available in **group chat** screens (`CometChatMessageList`). +- Hidden automatically in direct/private chat views. + +## Summary / Feature Matrix + +| Feature | Component / Method | File(s) | +|:----------------------------|:------------------------------------------|:--------------------------------------------------------------------------------------------| +| Show options menu | `getMessageOptions(for:)` | [`MessageDataSource.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20List/MessageDataSource.swift) | +| Toggle **Message Privately**| `viewModel.hideMessagePrivatelyOption` | [`CometChatMessageList.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20List/CometChatMessageList.swift),
[`CometChatMessageListViewModel.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20List/CometChatMessageListViewModel.swift) | +| Initiate private chat | `CometChatUIKit.getUser` & `getConversationWith` | [`CometChatUIKit.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/CometChatUIKit.swift) | + + + + Explore this feature in the CometChat SampleApp: + [GitHub → SampleApp](https://github.com/cometchat/cometchat-uikit-ios/tree/v5/SampleApp) + + + Browse the message list component: + [GitHub → CometChatMessageList.swift](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20List/CometChatMessageList.swift) + + \ No newline at end of file From bdcab1a306c7b41cb813982650fb1d6fe4671d4a Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 6 Aug 2025 14:58:27 +0530 Subject: [PATCH 031/196] Update guide-message-privately.mdx --- ui-kit/ios/guide-message-privately.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui-kit/ios/guide-message-privately.mdx b/ui-kit/ios/guide-message-privately.mdx index 7425fb30..d497a3f5 100644 --- a/ui-kit/ios/guide-message-privately.mdx +++ b/ui-kit/ios/guide-message-privately.mdx @@ -106,7 +106,7 @@ Automates transition from group context to private conversation. | Feature | Component / Method | File(s) | |:----------------------------|:------------------------------------------|:--------------------------------------------------------------------------------------------| | Show options menu | `getMessageOptions(for:)` | [`MessageDataSource.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20List/MessageDataSource.swift) | -| Toggle **Message Privately**| `viewModel.hideMessagePrivatelyOption` | [`CometChatMessageList.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20List/CometChatMessageList.swift),
[`CometChatMessageListViewModel.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20List/CometChatMessageListViewModel.swift) | +| Toggle **Message Privately**| `viewModel.hideMessagePrivatelyOption` | [`CometChatMessageList.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20List/CometChatMessageList.swift),
[`CometChatMessageListViewModel.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20List/CometChatMessageListViewModel.swift) | | Initiate private chat | `CometChatUIKit.getUser` & `getConversationWith` | [`CometChatUIKit.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/CometChatUIKit.swift) | From f6cc52e201dc92d2df7e25513fc578d6ec3be84f Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 6 Aug 2025 15:02:49 +0530 Subject: [PATCH 032/196] Update guide-message-privately.mdx --- ui-kit/ios/guide-message-privately.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui-kit/ios/guide-message-privately.mdx b/ui-kit/ios/guide-message-privately.mdx index d497a3f5..c7cb7192 100644 --- a/ui-kit/ios/guide-message-privately.mdx +++ b/ui-kit/ios/guide-message-privately.mdx @@ -106,7 +106,7 @@ Automates transition from group context to private conversation. | Feature | Component / Method | File(s) | |:----------------------------|:------------------------------------------|:--------------------------------------------------------------------------------------------| | Show options menu | `getMessageOptions(for:)` | [`MessageDataSource.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20List/MessageDataSource.swift) | -| Toggle **Message Privately**| `viewModel.hideMessagePrivatelyOption` | [`CometChatMessageList.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20List/CometChatMessageList.swift),
[`CometChatMessageListViewModel.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20List/CometChatMessageListViewModel.swift) | +| Toggle **Message Privately**| `viewModel.hideMessagePrivatelyOption` | [`CometChatMessageList.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20List/CometChatMessageList.swift),
[`MessageListViewModel.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20List/MessageListViewModel.swift) | | Initiate private chat | `CometChatUIKit.getUser` & `getConversationWith` | [`CometChatUIKit.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/CometChatUIKit.swift) | From 8c84537a43ce3e15e5c96aa935087cb0cce22a2c Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 6 Aug 2025 15:07:08 +0530 Subject: [PATCH 033/196] Update guide-call-log-details.mdx --- ui-kit/ios/guide-call-log-details.mdx | 145 ++++++++++++++++++++++++++ 1 file changed, 145 insertions(+) diff --git a/ui-kit/ios/guide-call-log-details.mdx b/ui-kit/ios/guide-call-log-details.mdx index e69de29b..7802e8db 100644 --- a/ui-kit/ios/guide-call-log-details.mdx +++ b/ui-kit/ios/guide-call-log-details.mdx @@ -0,0 +1,145 @@ +--- +title: "CometChat UIKit iOS — Call Log Details" +sidebarTitle: "Call Log Details" +--- + +Learn how to integrate and customize CometChat’s call log components to display call history, participant details, and call recordings in your iOS UIKit chat app. + +## Overview + +The `CallLogDetailsVC` module provides a tabbed interface to view details of past calls: + +- **History:** Chronological join/leave events. +- **Participants:** Users who joined the call. +- **Recordings:** Links to cloud-hosted call recordings. + +This ensures transparency and auditability for both users and admins. + +## Prerequisites + +- A UIKit-based iOS project. +- **CometChatSDK**, **CometChatCallsSDK**, and **CometChatUIKitSwift** integrated. +- Active internet connection. +- A valid, logged-in CometChat user. + +## Components + +| Component | Role | +|-----------------------------|----------------------------------------------------------------------------------------| +| `CallLogDetailsVC` | Main container with segmented control and page view. | +| `CallLogParticipantsVC` | Displays a list of users who participated in the call. | +| `CallLogHistoryVC` | Shows join/leave history entries with timestamps and statuses. | +| `CallLogRecordingsVC` | Lists call recordings with playback actions. | +| `CallLogDetailsHeaderView` | Header view showing call metadata (title, status, duration). | +| `CallLogUserCell` | UITableViewCell for participants, history, and recordings entries. | +| `CallLogDetailsModel` | Data model formatting participants, history, and recordings data. | +| `CallLogViewModel` | Fetches and distributes call log data to the UI components. | + +## Integration Steps + +### 1. Present Call Log Details Screen + +Show the call log interface for a selected call. + +```swift +let detailsVC = CallLogDetailsVC(call: call) +navigationController?.pushViewController(detailsVC, animated: true) +``` + +**File reference:** +[`CallLogDetailsVC.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/Call%20Log%20Details/CallLogDetailsVC.swift) + +Bundles history, participants, and recordings into a single UI flow. + +### 2. Display Participants List + +Populate the participants tab with the call’s members. + +```swift +participantsTableView.reloadData() +``` + +**File reference:** +[`CallLogParticipantsVC.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/Call%20Log%20Details/Call%20Participants/CallLogParticipantsVC.swift) + +Audits who was present in the call. + +### 3. Show Call History + +Render join/leave activities in chronological order. + +```swift +history.append(CallHistoryEntry(...)) +tableView.reloadData() +``` + +**File references:** +- [`CallHistoyTVC.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/Call%20Log%20Details/Call%20History%20/CallHistoyTVC.swift) +- [`CallLogHistoryVC.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/Call%20Log%20Details/Call%20History%20/CallLogHistoryVC.swift) + +Tracks user join/leave times for transparency. + +### 4. List and Play Recordings + +Provide playback links for any recorded calls. + +```swift +UIApplication.shared.open(url) +``` + +**File references:** +- [`CallLogRecordingsVC.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/Call%20Log%20Details/Call%20Recording%20/CallLogRecordingsVC.swift) +- [`CallRecordingTVC.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/Call%20Log%20Details/Call%20Recording%20/CallRecordingTVC.swift) + +Enables admins and users to review call content (if recording enabled). + +## Customization Options + +- **Styling:** Customize colors, fonts, and spacing via `CometChatTheme`, `CometChatTypography`, and `CometChatSpacing` in `CallLogUserCell` and `CallLogDetailsHeaderView`. +- **Filters:** Use `CallLogViewModel` to filter by call type (incoming, outgoing, missed). +- **Empty States:** Implement an `EmptyStateView` in `CallLogHistoryVC` for no-history scenarios. + +## Filtering & Edge Cases + +- **No Call Logs:** Show a custom empty state instead of a blank table. +- **Pagination:** Add lazy loading in `scrollViewDidScroll` of `CallLogHistoryVC` to fetch more entries. +- **Blocked Users:** In `CallLogParticipantsVC`, disable profile navigation if the user is blocked. + +## Error Handling + +- **Network/API Errors:** Display `UIAlertController` on fetch failures; expose error via `CallLogViewModel` delegate. +- **Retry Mechanism:** Add pull-to-refresh or a retry button in `CallLogDetailsVC`. +- **Recording Unavailable:** Gracefully disable playback links if URL is missing. + +## Optional Notes + +- **Group Calls vs 1:1 Calls:** Customize `CallLogParticipantsVC` display based on call type and participant roles. +- **Metadata Display:** Use `CallLogDetailsHeaderView` to show titles, call duration, and status icons. + +## Feature Matrix + +| Feature | Component / Method | File(s) | +|:-----------------------------|:----------------------------------|:--------------------------------------------------------------------------------------------------| +| Show call log details screen | `CallLogDetailsVC(call:)` | `CallLogDetailsVC.swift` | +| Display participants | `CallLogParticipantsVC` | `CallLogParticipantsVC.swift` | +| Display history entries | `CallLogHistoryVC` | `CallHistoyTVC.swift`, `CallLogHistoryVC.swift` | +| List recordings | `CallLogRecordingsVC` | `CallLogRecordingsVC.swift`, `CallRecordingTVC.swift` | +| Header metadata | `CallLogDetailsHeaderView` | `CallLogDetailsHeaderView.swift` | +| Data handling | `CallLogDetailsModel` | `CallLogDetailsModel.swift` | +| Data fetching & distribution | `CallLogViewModel` | `CallLogViewModel.swift` | + + + + +Explore a full sample implementation: +[GitHub → SampleApp](https://github.com/cometchat/cometchat-uikit-ios/tree/v5/SampleApp) + + + + +Review the call log components in the UIKit library: +[GitHub → Call Log Components](https://github.com/cometchat/cometchat-uikit-ios/tree/v5/CometChatUIKitSwift/Components/Message%20List) + + + + \ No newline at end of file From a9cd250addf843cf004d8802b3c745790d172e61 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 6 Aug 2025 15:09:22 +0530 Subject: [PATCH 034/196] Update guide-group-chat.mdx --- ui-kit/ios/guide-group-chat.mdx | 180 ++++++++++++++++++++++++++++++++ 1 file changed, 180 insertions(+) diff --git a/ui-kit/ios/guide-group-chat.mdx b/ui-kit/ios/guide-group-chat.mdx index e69de29b..fda2195b 100644 --- a/ui-kit/ios/guide-group-chat.mdx +++ b/ui-kit/ios/guide-group-chat.mdx @@ -0,0 +1,180 @@ +--- +title: "CometChat UIKit iOS — Group Details" +sidebarTitle: "Group Details" +--- + +Provide a detailed view for CometChat groups in your iOS app, enabling users to see group info, join/leave, manage members, and respond to real-time group events. + +## Overview + +`GroupDetailsViewController` displays comprehensive group information and actions: + +- **Group Info:** Name, icon, description, and member count. +- **Actions:** Join/Leave/Delete group. +- **Member Management:** View members, add members, view banned members. +- **Real-Time Updates:** Reflects joins, leaves, bans, and ownership changes. + +## Prerequisites + +- A UIKit-based iOS project. +- CometChat UIKit for iOS v5 installed via CocoaPods or Swift Package Manager. +- Valid CometChat **App ID**, **Region**, and **Auth Key**. +- User logged in with `CometChat.login()`. +- Navigation stack (`UINavigationController`) configured. + +## Components + +| Component | Role | +|-------------------------------|-----------------------------------------------------------------| +| `CometChatGroup` | Renders group avatar, name, and metadata. | +| `GroupActionView` | Custom view for action buttons (view/add/banned members). | +| `CometChatMessagesViewController` | Opens group chat interface when “Chat” is tapped. | +| `CometChat.joinGroup()` | Joins public or password-protected groups. | +| `CometChat.leaveGroup()` | Leaves the current group. | +| `CometChat.deleteGroup()` | Deletes and exits the group (owners only). | +| `CometChatGroupMembers` | Lists current group members. | +| `CometChatGroupDelegate` | Receives real-time group events. | + +## Integration Steps + +### 1. Presenting the Group Details Screen + +Push `GroupDetailsViewController` for a selected group. + +```swift +import UIKit +import CometChatSDK + +func showGroupDetails(for group: Group) { + let detailsVC = GroupDetailsViewController() + detailsVC.group = group + navigationController?.pushViewController(detailsVC, animated: true) +} +``` + +**File reference:** +[`HomeScreenViewController.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/HomeScreenViewController.swift) + +Initializes and presents the details UI with the correct group context. + +### 2. Setting Up the UI + +Configure scroll view, header, and action views. + +```swift +override public func viewDidLoad() { + super.viewDidLoad() + connect() + view.backgroundColor = CometChatTheme.backgroundColor01 + setupScrollView() + setupLayout() + addButtonActions() +} +``` + +**File reference:** +[`GroupDetailsViewController.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/DetailsPage/GroupDetailsViewController.swift) + +Lays out the UI components and registers for group events. + +### 3. Enabling Group Action Buttons + +Wire up view/add/banned members actions. + +```swift +public func addButtonActions() { + viewMembersView.onActionButtonTapped = { self.viewMembers() } + addMembersView.onActionButtonTapped = { self.addMembers() } + bannedMembersView.onActionButtonTapped = { self.banMembers() } +} +``` + +**File reference:** +[`GroupDetailsViewController.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/DetailsPage/GroupDetailsViewController.swift) + +Enables user interaction for member management. + +### 4. Handling Leave and Delete Actions + +Provide ownership-aware leave/delete flows. + +```swift +@objc func showLeaveGroupAlert() { /* ownership transfer or leave logic */ } + +@objc func showDeleteGroupAlert() { /* deleteGroup and pop to Home */ } +``` + +**File reference:** +[`GroupDetailsViewController.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/DetailsPage/GroupDetailsViewController.swift) + +Manages group exit, with transfer prompt for owners. + +### 5. Listening for Group Events + +Update UI on member joins, leaves, bans, and ownership changes. + +```swift +func connect() { + CometChat.addGroupListener(listenerId, self) + CometChatGroupEvents.addListener(listenerId, self) +} + +func disconnect() { + CometChat.removeGroupListener(listenerId) + CometChatGroupEvents.removeListener(listenerId) +} + +extension GroupDetailsViewController: CometChatGroupDelegate, CometChatGroupEventListener { + func onGroupMemberJoined(_ action: ActionMessage, user: User, group: Group) { updateGroupInfo(group) } + func onGroupMemberLeft(_ action: ActionMessage, user: User, group: Group) { /* hide UI if self-left */ } + // other event methods... +} +``` + +**File reference:** +[`GroupDetailsViewController.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/DetailsPage/GroupDetailsViewController.swift#L200-L245) + +Keeps the group details in sync with back-end events. + +## Customization Options + +- **Header Styling:** Use `CometChatTheme` to customize fonts, colors, and borders. +- **Button Labels:** Localize or rebrand action texts. +- **Avatar Placeholder:** Provide fallback initials or default images. + +## Filtering & Edge Cases + +- **Private/Protected Groups:** Prompt for a password before joining. +- **Already a Member:** Hide or disable Join button. +- **Empty Group:** Show an empty state when no members. +- **Owner Restrictions:** Disable Delete for non-owners. + +## Error Handling + +- **Join Failures:** Show alert on network or permission errors. +- **Leave/Delete Errors:** Display retry prompt on API failure. +- **Event Errors:** Log and notify user if group events fail. + +## Feature Matrix + +| Feature | Component / Method | File(s) | +|------------------------|-------------------------------|---------------------------------------------------------------------------------| +| Show group details | `GroupDetailsViewController` | `GroupDetailsViewController.swift` | +| View group members | `viewMembersView` action | `GroupDetailsViewController.swift` | +| Add members | `addMembersView` action | `GroupDetailsViewController.swift` | +| Ban members | `bannedMembersView` action | `GroupDetailsViewController.swift` | +| Join group | `CometChat.joinGroup()` | `GroupDetailsViewController.swift` | +| Leave group | `showLeaveGroupAlert()` | `GroupDetailsViewController.swift` | +| Delete group | `showDeleteGroupAlert()` | `GroupDetailsViewController.swift` | +| Real-time updates | `CometChatGroupDelegate` | `GroupDetailsViewController.swift` | + + + + Explore the complete Group Details flow: + [GitHub → SampleApp](https://github.com/cometchat/cometchat-uikit-ios/tree/v5/SampleApp) + + + Browse the Group Details implementation: + [GitHub → GroupDetailsViewController.swift](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/DetailsPage/GroupDetailsViewController.swift) + + \ No newline at end of file From 37afce73ffaf7f41a19071032b69fcfa74cff9d6 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 6 Aug 2025 15:10:54 +0530 Subject: [PATCH 035/196] Update guide-group-chat.mdx --- ui-kit/ios/guide-group-chat.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui-kit/ios/guide-group-chat.mdx b/ui-kit/ios/guide-group-chat.mdx index fda2195b..a8768bc1 100644 --- a/ui-kit/ios/guide-group-chat.mdx +++ b/ui-kit/ios/guide-group-chat.mdx @@ -25,7 +25,7 @@ Provide a detailed view for CometChat groups in your iOS app, enabling users to ## Components | Component | Role | -|-------------------------------|-----------------------------------------------------------------| +|:------------------------------|:----------------------------------------------------------------| | `CometChatGroup` | Renders group avatar, name, and metadata. | | `GroupActionView` | Custom view for action buttons (view/add/banned members). | | `CometChatMessagesViewController` | Opens group chat interface when “Chat” is tapped. | @@ -158,7 +158,7 @@ Keeps the group details in sync with back-end events. ## Feature Matrix | Feature | Component / Method | File(s) | -|------------------------|-------------------------------|---------------------------------------------------------------------------------| +|:-----------------------|:------------------------------|:--------------------------------------------------------------------------------| | Show group details | `GroupDetailsViewController` | `GroupDetailsViewController.swift` | | View group members | `viewMembersView` action | `GroupDetailsViewController.swift` | | Add members | `addMembersView` action | `GroupDetailsViewController.swift` | From 4249416818f4971148d0a6774065f23438d2f2f5 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 6 Aug 2025 15:13:42 +0530 Subject: [PATCH 036/196] Update guide-group-chat.mdx --- ui-kit/ios/guide-group-chat.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui-kit/ios/guide-group-chat.mdx b/ui-kit/ios/guide-group-chat.mdx index a8768bc1..dd71cfe6 100644 --- a/ui-kit/ios/guide-group-chat.mdx +++ b/ui-kit/ios/guide-group-chat.mdx @@ -1,5 +1,5 @@ --- -title: "CometChat UIKit iOS — Group Details" +title: "Group Details" sidebarTitle: "Group Details" --- From c99221a4a30fe2be61fa7ac8e723826b8033290f Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 6 Aug 2025 15:14:09 +0530 Subject: [PATCH 037/196] Create guide-group-ownership.mdx --- ui-kit/ios/guide-group-ownership.mdx | 185 +++++++++++++++++++++++++++ 1 file changed, 185 insertions(+) create mode 100644 ui-kit/ios/guide-group-ownership.mdx diff --git a/ui-kit/ios/guide-group-ownership.mdx b/ui-kit/ios/guide-group-ownership.mdx new file mode 100644 index 00000000..1ee408e8 --- /dev/null +++ b/ui-kit/ios/guide-group-ownership.mdx @@ -0,0 +1,185 @@ +--- +title: "Transfer Group Ownership" +sidebarTitle: "Transfer Group Ownership" +--- + +Enable the current group owner to delegate ownership to another member using CometChat’s UIKit for iOS. + +## Overview + +The **Transfer Group Ownership** feature provides a modal interface where the group owner can: + +- See a list of current group members (excluding themselves). +- Select exactly one member to become the new owner. +- Trigger the ownership transfer API call. +- Automatically exit the group after successful transfer. + +## Prerequisites + +- A UIKit-based iOS project. +- CometChat UIKit for iOS v5 installed via CocoaPods or Swift Package Manager. +- CometChat SDKs (`CometChatSDK`, `CometChatUIKitSwift`) integrated. +- Logged-in user with `CometChat.login()`. +- `UINavigationController` or modal presentation flow set up. +- Group context (GUID) available when invoking the transfer screen. + +## Components + +| Component | Responsibility | +|:------------------------------------|:--------------------------------------------------------------------| +| `TransferOwnership` | Subclass of `CometChatGroupMembers` enabling single selection mode. | +| `viewModel.groupMembers` | Data source array of `GroupMember` objects. | +| `onSelectedItemProceed` | Closure invoked when user confirms selection. | +| `CometChat.transferGroupOwnership` | API call to delegate group ownership. | +| `spinnerView` | `UIActivityIndicatorView` showing loading state. | +| `leaveGroupCallback` | Callback to perform group exit after transfer. | + +## Integration Steps + +### 1. Present Transfer Ownership Screen + +Show the ownership transfer UI modally. + +```swift +func showTransferOwnership(for group: Group) { + let transferVC = TransferOwnership() + transferVC.set(group: group) + let nav = UINavigationController(rootViewController: transferVC) + present(nav, animated: true) +} +``` + +**File reference:** +[`GroupDetailsViewController.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/DetailsPage/GroupDetailsViewController.swift) + +### 2. Configure Single Selection Mode + +Restrict selection to one member and capture selection. + +```swift +override func viewDidLoad() { + selectionMode = .single + super.viewDidLoad() + title = "OWNERSHIP_TRANSFER".localize() + onSelectedItemProceed = { [weak self] users in + if let newOwner = users.first { + self?.transferOwnership(to: newOwner) + } + } +} +``` + +**File reference:** +[`TransferOwnership.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/Transfer%20ownership%20/TransferOwnership.swift#L1-L30) + +### 3. Load & Filter Member List + +Exclude the current owner from the selectable list. + +```swift +override func reloadData() { + super.reloadData() + viewModel.reload = { [weak self] in + guard let self = self else { return } + let currentUID = CometChat.getLoggedInUser()?.uid + self.viewModel.groupMembers.removeAll { $0.uid == currentUID } + DispatchQueue.main.async { + self.removeLoadingView() + self.removeErrorView() + self.reload() + if self.viewModel.groupMembers.isEmpty { self.showEmptyView() } + } + } +} +``` + +**File reference:** +[`TransferOwnership.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/Transfer%20ownership%20/TransferOwnership.swift#L31-L60) + +### 4. Perform Ownership Transfer + +Call the API, emit event, and exit the group. + +```swift +func transferOwnership(to member: GroupMember) { + addSpinnerView() + let uid = member.uid ?? "" + let guid = viewModel.group.guid + + CometChat.transferGroupOwnership(UID: uid, GUID: guid) { [weak self] _ in + DispatchQueue.main.async { + // Update local state + self?.viewModel.group.owner = uid + CometChatGroupEvents.ccOwnershipChanged(group: self!.viewModel.group, newOwner: member) + self?.leaveGroupCallback?() + self?.removeSpinnerView() + self?.dismiss(animated: true) + } + } onError: { [weak self] error in + DispatchQueue.main.async { + self?.removeSpinnerView() + // TODO: Show error alert + } + } +} +``` + +**File reference:** +[`TransferOwnership.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/Transfer%20ownership%20/TransferOwnership.swift#L61-L100) + +### 5. Manage Loading State + +Provide visual feedback during network calls. + +```swift +func addSpinnerView() { + spinnerView.startAnimating() + navigationItem.rightBarButtonItem = UIBarButtonItem(customView: spinnerView) +} + +func removeSpinnerView() { + spinnerView.stopAnimating() + navigationItem.rightBarButtonItem = nil +} +``` + +**File reference:** +[`TransferOwnership.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/Transfer%20ownership%20/TransferOwnership.swift#L101-L130) + +## Customization Options + +- **Title Text:** Replace localization key with custom string. +- **Spinner Style:** Adjust `spinnerView.style` and color using `CometChatTheme`. +- **Error Handling:** Customize error alerts in the `onError` closure. + +## Filtering & Edge Cases + +- **Empty Member List:** Show an informative empty state when no eligible members exist. +- **Network Failures:** Disable proceed button until connection restores. +- **Blocked Members:** Exclude or disable blocked users from selection. + +## Error Handling + +- **Transfer Failures:** Present `UIAlertController` with retry option. +- **Unexpected States:** Ensure `removeSpinnerView()` always executes in `defer`. + +## Feature Matrix + +| Feature | Method / Component | File(s) | +|:-------------------------------|:---------------------------------------|:------------------------------------------------------------------------------------------| +| Launch transfer flow | `showTransferOwnership(for:)` | `GroupDetailsViewController.swift` | +| Single-member selection | `selectionMode = .single` | `TransferOwnership.swift` | +| Filter out current owner | `reloadData()` override | `TransferOwnership.swift` | +| Execute API transfer | `CometChat.transferGroupOwnership()` | `TransferOwnership.swift` | +| Show/hide loading indicator | `addSpinnerView()`, `removeSpinnerView()` | `TransferOwnership.swift` | + + + + Explore the transfer ownership feature in context: + [GitHub → SampleApp](https://github.com/cometchat/cometchat-uikit-ios/tree/v5/SampleApp) + + + Review the implementation: + [TransferOwnership.swift](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/SampleApp/View%20Controllers/CometChat%20Components/Transfer%20ownership%20/TransferOwnership.swift) + + \ No newline at end of file From 93803803aca236d480119a822b56c2852e837e9d Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 6 Aug 2025 15:15:53 +0530 Subject: [PATCH 038/196] Update docs.json --- docs.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs.json b/docs.json index 9cb4029c..bffefc7a 100644 --- a/docs.json +++ b/docs.json @@ -1121,7 +1121,8 @@ "ui-kit/ios/guide-new-chat", "ui-kit/ios/guide-message-privately", "ui-kit/ios/guide-call-log-details", - "ui-kit/ios/guide-group-chat" + "ui-kit/ios/guide-group-chat", + "ui-kit/ios/guide-group-ownership" ] }, "ui-kit/ios/link/sample", From 2950b283205a184acd27edec2d8a50bdcfd391bd Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 6 Aug 2025 15:41:39 +0530 Subject: [PATCH 039/196] Update guide-threaded-messages.mdx --- ui-kit/android/guide-threaded-messages.mdx | 223 +++++++++++++-------- 1 file changed, 134 insertions(+), 89 deletions(-) diff --git a/ui-kit/android/guide-threaded-messages.mdx b/ui-kit/android/guide-threaded-messages.mdx index da0bb01b..09bfa5fd 100644 --- a/ui-kit/android/guide-threaded-messages.mdx +++ b/ui-kit/android/guide-threaded-messages.mdx @@ -1,152 +1,197 @@ --- -title: "Integrating Threads in Android with CometChat UIKit" -sidebarTitle: "Android Threaded Messaging" +title: "Threaded Messages" +sidebarTitle: "Threaded Messages" --- -Implement threaded replies in your Android chat app by integrating CometChat’s UI Kit components—allowing users to reply to specific messages within a focused sub-conversation. +Implement threaded replies in your Android chat app using CometChat’s UI Kit, enabling users to reply to specific messages in a focused sub-conversation. ## Overview -Threaded replies allow users to respond directly to a specific message in a one-on-one or group chat, improving context and clarity. Users tap a message → enter thread screen → see parent message + all replies → compose their own response within the thread. +Threaded replies allow users to respond directly to a specific message in one-on-one or group chats, improving context and readability: + +- Organizes related replies into a dedicated thread view. +- Mirrors functionality in Slack, Discord, and WhatsApp. +- Maintains clarity in active conversations. + +Users tap a message → open thread screen → view parent message + replies → compose within thread. ## Prerequisites -- Android Studio setup -- **CometChat Android UI Kit v5.x** added to your project -- CometChat **App ID**, **Auth Key**, and **Region** configured -- Internet permission in **AndroidManifest.xml** -- Logged-in user (via CometChat login) -- Working **MessagesActivity** with `CometChatMessageList` +- Android project in Android Studio. +- CometChat Android UI Kit v5 added to your `build.gradle`. +- Valid CometChat **App ID**, **Auth Key**, and **Region** initialized. +- `` in `AndroidManifest.xml`. +- Logged-in user via `CometChat.login()`. +- Existing `MessagesActivity` using `CometChatMessageList`. ## Components -| Component / Class | Role | -|:--------------------------------|:---------------------------------------------------------| -| `CometChatThreadHeader` | Displays the parent message on the thread screen | -| `CometChatMessageList` | Shows all threaded replies | -| `CometChatMessageComposer` | Input field for sending replies | -| `ThreadMessageActivity` | New Activity for thread view | -| `ThreadMessageViewModel` | Fetches and manages thread data (LiveData) | -| `unblockLayout` | UI shown when a user is blocked | +| Component | Role | +|----------------------------|---------------------------------------------------------------| +| `activity_thread_message.xml` | Defines thread UI: header, message list, composer, unblock. | +| `ThreadMessageActivity` | Hosts thread screen; initializes UI & ViewModel. | +| `ThreadMessageViewModel` | Fetches parent message & thread replies; manages state. | +| `CometChatMessageList` | Displays threaded replies when given parent message ID. | +| `CometChatMessageComposer` | Composes and sends replies with `parentMessageId`. | +| `CometChatMessageOption` | Defines “Message Privately” in message context menus. | +| `UserDetailActivity` | Handles blocked-user UI; hides composer & shows unblock. | ## Integration Steps -### Add Thread Layout +### Step 1: Add Thread Layout + +Create `res/layout/activity_thread_message.xml`: -**Goal:** Define the UI for the thread screen with header, message list, composer, and unblock layout. ```xml - - - - + + + + + + ``` **File reference:** -[`activity_thread_message.xml`](https://github.com/cometchat/cometchat-uikit-android/blob/v5/sample_app/app/src/main/res/layout/activity_thread_message.xml) +[`activity_thread_message.xml`](https://github.com/cometchat/cometchat-uikit-android/blob/v5/sample-app-java/app/src/main/res/layout/activity_thread_message.xml) + +### Step 2: Set up ThreadMessageActivity -### Set up ThreadMessageActivity +Initialize UI & handle blocked-user flows: -**Goal:** Initialize the thread screen, retrieve the parent message, and handle blocked users. ```java -// ThreadMessageActivity.java public class ThreadMessageActivity extends AppCompatActivity { - @Override - protected void onCreate(Bundle savedInstanceState) { - super.onCreate(savedInstanceState); - setContentView(R.layout.activity_thread_message); - // Initialize header, list, composer; fetch parent message + @Override + protected void onCreate(Bundle savedInstanceState) { + super.onCreate(savedInstanceState); + setContentView(R.layout.activity_thread_message); + ThreadHeaderView header = findViewById(R.id.threadHeader); + CometChatMessageList messageList = findViewById(R.id.threadMessageList); + CometChatMessageComposer composer = findViewById(R.id.threadComposer); + View unblock = findViewById(R.id.unblockLayout); + + String messageId = getIntent().getStringExtra("message_id"); + viewModel = new ViewModelProvider(this).get(ThreadMessageViewModel.class); + viewModel.fetchParentMessage(messageId); + viewModel.getParentMessage().observe(this, msg -> header.setMessage(msg)); + messageList.setParentMessage(messageId); + composer.setParentMessageId(messageId); + + // Handle blocked user + if (viewModel.isBlocked()) { + composer.setVisibility(View.GONE); + unblock.setVisibility(View.VISIBLE); } + } } ``` **File reference:** -[`ThreadMessageActivity.java`](https://github.com/cometchat/cometchat-uikit-android/blob/v5/sample_app/app/src/main/java/com/cometchat/sampleapp/ThreadMessageActivity.java) +[`ThreadMessageActivity.java`](https://github.com/cometchat/cometchat-uikit-android/blob/v5/sample-app-java/app/src/main/java/com/cometchat/sampleapp/threads/ThreadMessageActivity.java) -### Create ThreadMessageViewModel +### Step 3: Create ThreadMessageViewModel + +Fetch parent message and expose LiveData: -**Goal:** Use ViewModel to fetch and expose the parent message and manage unblocking logic via LiveData. ```java -// ThreadMessageViewModel.java public class ThreadMessageViewModel extends ViewModel { - // fetchMessageDetails(), unblockUser(), LiveData for UI + private MutableLiveData parentMessage = new MutableLiveData<>(); + + public void fetchParentMessage(String id) { + CometChat.getMessage(id, new CometChat.CallbackListener() { + @Override + public void onSuccess(BaseMessage msg) { + parentMessage.postValue(msg); + } + @Override public void onError(CometChatException e) {} + }); + } + + public LiveData getParentMessage() { + return parentMessage; + } } ``` **File reference:** -[`ThreadMessageViewModel.java`](https://github.com/cometchat/cometchat-uikit-android/blob/v5/sample_app/app/src/main/java/com/cometchat/sampleapp/ThreadMessageViewModel.java) +[`ThreadMessageViewModel.java`](https://github.com/cometchat/cometchat-uikit-android/blob/v5/sample-app-java/src/main/java/com/cometchat/sampleapp/java/viewmodels/ThreadMessageViewModel.java) + +### Step 4: Hook Thread Entry from Message List -### Hook Thread Entry from Message List +In `MessagesActivity.java`, capture thread icon taps: -**Goal:** Allow users to tap any message to transition to the thread view. ```java -// MessagesActivity.java -binding.messageList.setOnThreadRepliesClick((context, baseMessage, template) -> { - Intent intent = new Intent(context, ThreadMessageActivity.class); - intent.putExtra("message_id", baseMessage.getId()); - context.startActivity(intent); +messageList.setOnThreadRepliesClick((context, baseMessage, template) -> { + Intent intent = new Intent(context, ThreadMessageActivity.class); + intent.putExtra("message_id", baseMessage.getId()); + context.startActivity(intent); }); ``` **File reference:** -[`MessagesActivity.java`](https://github.com/cometchat/cometchat-uikit-android/blob/v5/sample_app/app/src/main/java/com/cometchat/sampleapp/MessagesActivity.java) +[`MessagesActivity.java`](https://github.com/cometchat/cometchat-uikit-android/blob/v5/sample-app-java/src/main/java/com/cometchat/sampleapp/java/ui/activity/MessagesActivity.java) ## Implementation Flow -| Step | Action | Location | -|:-----|:--------------------------------|:---------------------------------| -| 1 | Fetch Parent Message | `ThreadMessageViewModel.java` | -| 2 | Observe & Display | `ThreadMessageActivity.java` | -| 3 | Send Reply | `CometChatMessageComposer` | -| 4 | Live Updates | Handled by CometChat UI Kit | +1. User taps thread icon on a message. +2. `Intent` launches `ThreadMessageActivity` with `message_id`. +3. ViewModel fetches parent message details. +4. Header & `MessageList` render parent + replies. +5. Composer sends new replies under the parent message. +6. Live updates flow automatically via UI Kit. ## Customization Options -- **Styling Components:** Override colors in your theme or use setters on components. -- **Limit Header Height:** `threadHeader.setMaxHeight(...)`. -- **Hide Reactions:** `threadHeader.setReactionVisibility(View.GONE)`. -- **Dynamic Behavior:** Use conditional logic based on `receiverType` in `ThreadMessageActivity`. +- **Styling:** Override theme attributes or call setter methods on views. +- **Header Height:** `threadHeader.setMaxHeight(...)`. +- **Hide Reactions:** `threadHeader.setReactionVisibility(View.GONE)`. + +## Filtering & Edge Cases -## Filtering / Edge Cases +- **Group Membership:** Verify membership before enabling composer. +- **Empty Thread:** Show placeholder if no replies. +- **Blocked Users:** Composer hidden; use unblock layout. -- **Empty Threads:** Display a “No replies yet” state. -- **Parent Deleted:** Show fallback or disable composer. -- **Offline Mode:** Queue thread operations or indicate offline status. +## Blocked-User Handling -## Error Handling / Blocked-User Handling +In `UserDetailActivity`, detect and toggle UI: -- **Blocked Users:** In `UserDetailActivity.java`, check `user.isBlockedByMe()` to hide composer and show unblock UI. -- **Unblock Flow:** `viewModel.unblockUser()` with LiveData observers for progress and feedback. -- **Progress Indicators:** Show `ProgressBar` during unblock; use `Snackbar` for status messages. +```java +if (user.isBlockedByMe()) { + composer.setVisibility(View.GONE); + unblockLayout.setVisibility(View.VISIBLE); +} +``` + +**File reference:** +[`UserDetailActivity.java`](https://github.com/cometchat/cometchat-uikit-android/blob/v5/sample-app-java/src/main/java/com/cometchat/sampleapp/java/ui/activity/UserDetailsActivity.java) ## Group vs. User-Level Differences -| Scenario | Behavior | -|:-----------------|:----------------------------------------------| -| `USER` | Compose reply directly if not blocked | -| `GROUP` | Check membership before allowing reply | -| Blocked User | Hide composer; show unblock layout | -| Not in Group | Show join group option before replying | +| Scenario | Behavior | +|----------------------------|-----------------------------------------------| +| `ReceiverType.USER` | Direct replies allowed if not blocked. | +| `ReceiverType.GROUP` | Checks membership before thread access. | +| Blocked User | Composer hidden; unblock layout shown. | +| Not in Group | Show option to join group first. | ## Summary / Feature Matrix -| Feature | Component / Method | -|:------------------------|:-----------------------------------------------| -| Show thread option | `setOnThreadRepliesClick(...)` | -| Display thread messages | `setParentMessage(...)` | -| Show parent message | `threadHeader.setParentMessage(...)` | -| Compose reply | `messageComposer.setParentMessageId(...)` | -| Block user | `CometChatUIKit.blockUsers([...])` | -| Unblock user | `viewModel.unblockUser()` | +| Feature | Component / Method | +|---------------------------|------------------------------------------------------| +| Show thread option | `setOnThreadRepliesClick()` | +| Display thread messages | `messageList.setParentMessage(messageId)` | +| Show parent message | `header.setMessage(parentMessage)` | +| Compose reply | `composer.setParentMessageId(messageId)` | +| Handle blocked users | `isBlockedByMe()`, hide composer + show unblock UI | ## Next Steps & Further Reading -- **Sample App on GitHub:** - https://github.com/cometchat/cometchat-uikit-android/tree/v5/sample-app-kotlin - -## Best Practices Recap - -- Keep `ViewModel`s lean and lifecycle-aware. -- Pass `message_id` clearly between activities. -- Separate UI and logic layers. -- Minimize header height to focus on replies. -- Use `LiveData` for reactive UI updates. +- [Android Sample App (Java)](https://github.com/cometchat/cometchat-uikit-android/tree/v5/sample-app-java) From aa3cd15ac7097ff5b86791a4cfd1be2b0d1031e5 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 6 Aug 2025 15:42:01 +0530 Subject: [PATCH 040/196] Update guide-threaded-messages.mdx --- ui-kit/android/guide-threaded-messages.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/ui-kit/android/guide-threaded-messages.mdx b/ui-kit/android/guide-threaded-messages.mdx index 09bfa5fd..f3f0f8a2 100644 --- a/ui-kit/android/guide-threaded-messages.mdx +++ b/ui-kit/android/guide-threaded-messages.mdx @@ -195,3 +195,4 @@ if (user.isBlockedByMe()) { ## Next Steps & Further Reading - [Android Sample App (Java)](https://github.com/cometchat/cometchat-uikit-android/tree/v5/sample-app-java) +- [Android Sample App (Kotlin)](https://github.com/cometchat/cometchat-uikit-android/tree/v5/sample-app-kotlin) \ No newline at end of file From 4ca1aa30d4781e80bb3ff4b9246ce33e55d9b035 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 6 Aug 2025 15:52:57 +0530 Subject: [PATCH 041/196] Create guide-block-unblock-user.mdx --- ui-kit/android/guide-block-unblock-user.mdx | 183 ++++++++++++++++++++ 1 file changed, 183 insertions(+) create mode 100644 ui-kit/android/guide-block-unblock-user.mdx diff --git a/ui-kit/android/guide-block-unblock-user.mdx b/ui-kit/android/guide-block-unblock-user.mdx new file mode 100644 index 00000000..d68f9059 --- /dev/null +++ b/ui-kit/android/guide-block-unblock-user.mdx @@ -0,0 +1,183 @@ +--- +title: "Block/Unblock User" +sidebarTitle: "Block/Unblock User" +--- + +Enable users to block and unblock others directly within chat using CometChat’s Android UI Kit v5+, preventing unwanted communication and giving users more control. + +## Overview + +Blocking a user stops them from sending messages to the blocker. The CometChat UIKit handles most behaviors internally: + +- **Composer Hidden:** The message composer is hidden when chatting with a blocked user. +- **Unblock Prompt:** An “Unblock” button is displayed to reverse the block. +- **Message Restrictions:** Blocked users cannot send messages to the blocker. + +## Prerequisites + +- Android Studio project with CometChat Android UI Kit v5 added to `build.gradle`. +- CometChat **App ID**, **Auth Key**, and **Region** configured and initialized. +- `` in `AndroidManifest.xml`. +- Logged-in user via `CometChat.login()`. +- Existing one-on-one chat screen using `CometChatMessageList` and `CometChatMessageComposer`. + +## Components + +| Component / Class | Role | +|:-------------------------------------|:------------------------------------------------------------| +| `UserDetailActivity.java` | Displays user profile and provides block/unblock options. | +| `MessagesActivity.java` | Hosts the chat screen and toggles UI based on block state. | +| `CometChatUIKit.blockUsers()` | API to block one or more users by UID. | +| `CometChatUIKit.unblockUsers()` | API to unblock one or more users by UID. | +| `User.isBlockedByMe()` | Checks if the current user has blocked this user. | +| `unblockLayout` (View) | Layout shown when a user is blocked, containing unblock. | +| `CometChatMessageComposer` | Hidden when chatting with a blocked user. | + +## Integration Steps + +### 1. Detect Block Status + +Update UI when block state changes. + +```java +// In MessagesActivity.java +private void updateUserBlockStatus(User user) { + boolean blocked = user.isBlockedByMe(); + binding.messageComposer.setVisibility(blocked ? View.GONE : View.VISIBLE); + binding.unblockLayout.setVisibility(blocked ? View.VISIBLE : View.GONE); +} +``` + +**File reference:** +[`MessagesActivity.java`](https://github.com/cometchat/cometchat-uikit-android/blob/v5/sample-app-java/app/src/main/java/com/cometchat/sampleapp/MessagesActivity.java#L120-L130) + +Ensures the composer and unblock UI reflect the current block state. + +### 2. Hide Composer & Show Unblock UI + +Define layout elements and their visibility toggles. + +```xml + + + +