From 1d52633bfeb32c7a2e06cd9436e33eee2aca84c5 Mon Sep 17 00:00:00 2001 From: Anshuman-cometchat Date: Fri, 13 Feb 2026 19:52:02 +0530 Subject: [PATCH 1/4] docs: added code snippets and made Flutter UI Kit v5 docs agentic friendly --- ui-kit/flutter/ai-features.mdx | 63 +- ui-kit/flutter/call-features.mdx | 118 +++- ui-kit/flutter/core-features.mdx | 185 ++++-- ui-kit/flutter/events.mdx | 159 +++-- ui-kit/flutter/extensions.mdx | 107 +++- ui-kit/flutter/flutter-conversation.mdx | 294 ++++++++- ui-kit/flutter/flutter-one-to-one-chat.mdx | 530 ++++++++++++++- ui-kit/flutter/flutter-tab-based-chat.mdx | 604 ++++++++++++++++-- ui-kit/flutter/getting-started.mdx | 573 ++++++++++++----- ui-kit/flutter/guide-block-unblock-user.mdx | 73 ++- ui-kit/flutter/guide-call-log-details.mdx | 70 +- ui-kit/flutter/guide-group-chat.mdx | 76 ++- ui-kit/flutter/guide-message-agentic-flow.mdx | 70 +- ui-kit/flutter/guide-message-privately.mdx | 75 ++- ui-kit/flutter/guide-new-chat.mdx | 77 ++- ui-kit/flutter/guide-overview.mdx | 47 +- ui-kit/flutter/guide-threaded-messages.mdx | 74 ++- ui-kit/flutter/overview.mdx | 140 +++- 18 files changed, 2813 insertions(+), 522 deletions(-) diff --git a/ui-kit/flutter/ai-features.mdx b/ui-kit/flutter/ai-features.mdx index 18e1637c..8ffcac57 100644 --- a/ui-kit/flutter/ai-features.mdx +++ b/ui-kit/flutter/ai-features.mdx @@ -1,7 +1,43 @@ --- -title: "AI" +title: "AI Features" +description: "Enhance user interaction with AI-powered conversation starters, smart replies, and conversation summaries in your Flutter app" --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```dart +import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; + +// Enable AI features in UIKitSettings +UIKitSettings uiKitSettings = (UIKitSettingsBuilder() + ..aiFeature = [ + AISmartRepliesExtension(), + AIConversationStarterExtension(), + AIAssistBotExtension(), + AIConversationSummaryExtension() + ] +).build(); + +// Initialize with AI features +CometChatUIKit.init(uiKitSettings: uiKitSettings); +``` + +**Key AI Extensions:** +- `AISmartRepliesExtension` → Smart reply suggestions +- `AIConversationStarterExtension` → Conversation starters +- `AIAssistBotExtension` → AI assistant bot +- `AIConversationSummaryExtension` → Conversation summaries + +**Components:** +- Conversation Starters → Auto-displayed in `CometChatMessageList` ([Docs](/ui-kit/flutter/message-list)) +- Smart Replies → Available in `CometChatMessageComposer` action sheet ([Docs](/ui-kit/flutter/message-composer)) +- Conversation Summary → Available in `CometChatMessageComposer` action sheet ([Docs](/ui-kit/flutter/message-composer)) + +Activate features from [CometChat Dashboard](https://app.cometchat.com) → Extensions → AI + + ## Overview CometChat's AI capabilities greatly enhance user interaction and engagement in your application. Let's understand how the Flutter UI Kit achieves these features. @@ -10,6 +46,10 @@ CometChat's AI capabilities greatly enhance user interaction and engagement in y + +**Available via:** [UI Kits](/ui-kit/flutter/overview) | [SDK](/sdk/flutter/overview) | [Dashboard](https://app.cometchat.com) + + *** ## Usage @@ -67,8 +107,27 @@ The Conversation Summary feature provides concise summaries of long conversation For a comprehensive understanding and guide on implementing and using the Conversation Summary, refer to our specific guide on the [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary). -Once you have successfully activated the [Smart Replies](/fundamentals/ai-user-copilot/smart-replies) from your CometChat Dashboard, the feature will automatically be incorporated into the Action sheet of [MessageComposer](/ui-kit/flutter/message-composer) Widget of UI Kits. +Once you have successfully activated the [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary) from your CometChat Dashboard, the feature will automatically be incorporated into the Action sheet of [MessageComposer](/ui-kit/flutter/message-composer) Widget of UI Kits. + +--- + +## Next Steps + + + + Display and manage conversation messages with AI-powered starters + + + Compose messages with smart replies and AI assistance + + + Learn more about AI features and configuration + + + Explore other extensions to enhance your chat experience + + diff --git a/ui-kit/flutter/call-features.mdx b/ui-kit/flutter/call-features.mdx index 12559e90..2322a5c2 100644 --- a/ui-kit/flutter/call-features.mdx +++ b/ui-kit/flutter/call-features.mdx @@ -1,11 +1,53 @@ --- -title: "Call" +title: "Call Features" +description: "Integrate one-on-one and group audio/video calling capabilities into your Flutter app with CometChat UI Kit" --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```dart +import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; +import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart'; + +// Enable calling features in UIKitSettings +UIKitSettings uiKitSettings = (UIKitSettingsBuilder() + ..appId = "APP_ID" + ..authKey = "AUTH_KEY" + ..region = "REGION" + ..callingExtension = CometChatCallingExtension() +).build(); + +// Initialize with calling support +CometChatUIKit.init(uiKitSettings: uiKitSettings); + +// Set navigation key for incoming calls +CometChatUsersWithMessages(key: CallNavigationContext.navigatorKey) + +// Add call listener +CometChat.addCallListener(listenerId, this); +``` + +**Key Calling Components:** +- `CometChatCallButtons` → [Docs](/ui-kit/flutter/call-buttons) +- `CometChatIncomingCall` → [Docs](/ui-kit/flutter/incoming-call) +- `CometChatOutgoingCall` → [Docs](/ui-kit/flutter/outgoing-call) +- `CometChatCallLogs` → [Docs](/ui-kit/flutter/call-logs) +- `CometChatCallingExtension` → Calling extension +- `CallNavigationContext` → Navigation context for calls + +**Requirements:** `cometchat_calls_uikit` package, minSdkVersion 24 (Android), iOS 12+ + + ## Overview CometChat's Calls feature is an advanced functionality that allows you to seamlessly integrate one-on-one as well as group audio and video calling capabilities into your application. This document provides a technical overview of these features, as implemented in the Flutter UI Kit. + +**Available via:** [UI Kits](/ui-kit/flutter/overview) | [SDK](/sdk/flutter/overview) + + ## Integration First, make sure that you've correctly integrated the UI Kit library into your project. If you haven't done this yet or are facing difficulties, refer to our [Getting Started](/ui-kit/flutter/getting-started) guide. This guide will walk you through a step-by-step process of integrating our UI Kit into your Flutter project. @@ -24,9 +66,7 @@ Add the following dependency to your `pubspec.yaml` file: dependencies: cometchat_calls_uikit: ^5.0.12 ``` - - *** @@ -47,17 +87,11 @@ defaultConfig { versionName flutterVersionName } ``` - - - -If you want to use the Flutter UI Kit or enable calling support within it, you'll need to: - -1. Set the `minSdkVersion` to 24 in your `android/app/build.gradle` file. - +If you want to use the Flutter UI Kit or enable calling support within it, you'll need to set the `minSdkVersion` to 24 in your `android/app/build.gradle` file. *** @@ -73,9 +107,7 @@ In your Podfile located at `ios/Podfile`, update the minimum iOS version that yo ```xml platform :ios, '12.0' ``` - - *** @@ -94,22 +126,24 @@ Example UIKitSettings uiKitSettings = (UIKitSettingsBuilder() ..subscriptionType = CometChatSubscriptionType.allUsers ..autoEstablishSocketConnection = true - ..region = "REGION"//Replace with your App Region - ..appId = "APP_ID" //Replace with your App ID - ..authKey = "AUTH_KEY" //Replace with your app Auth Key - ..extensions = CometChatUIKitChatExtensions.getDefaultExtensions() //Replace this with empty array you want to disable all extensions - ..callingExtension = CometChatCallingExtension() //Added this to Enable calling feature in the UI Kit + ..region = "REGION" // Replace with your App Region + ..appId = "APP_ID" // Replace with your App ID + ..authKey = "AUTH_KEY" // Replace with your app Auth Key + ..extensions = CometChatUIKitChatExtensions.getDefaultExtensions() + ..callingExtension = CometChatCallingExtension() // Enable calling feature ).build(); -CometChatUIKit.init(uiKitSettings: uiKitSettings,onSuccess: (successMessage) { - // TODO("Not yet implemented") -}, onError: (e) { - // TODO("Not yet implemented") -}); +CometChatUIKit.init( + uiKitSettings: uiKitSettings, + onSuccess: (successMessage) { + // TODO("Not yet implemented") + }, + onError: (e) { + // TODO("Not yet implemented") + } +); ``` - - To allow launching of Incoming Call screen from any widget whenever a call is received provide set key: CallNavigationContext.navigatorKey in the top most widget of your project (the widget that appears first of your app launch). @@ -118,14 +152,19 @@ To allow launching of Incoming Call screen from any widget whenever a call is re ```dart CometChatUIKit.login(uid, onSuccess: (s) { - Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatUsersWithMessages(key: CallNavigationContext.navigatorKey))); + Navigator.push( + context, + MaterialPageRoute( + builder: (context) => CometChatUsersWithMessages( + key: CallNavigationContext.navigatorKey + ) + ) + ); }, onError: (e) { // TODO("Not yet implemented") }); ``` - - After adding this dependency, the Flutter UI Kit will automatically detect it and activate the calling features. Now, your application supports both audio and video calling. You will see [CallButtons](/ui-kit/flutter/call-buttons) widget rendered in [MessageHeader](/ui-kit/flutter/message-header) Widget. @@ -147,13 +186,13 @@ class _YourClassNameState extends State with CallListener { @override void initState() { super.initState(); - CometChat.addCallListener(listenerId, this); //Add listener + CometChat.addCallListener(listenerId, this); // Add listener } @override void dispose() { super.dispose(); - CometChat.removeCallListener(listenerId); //Remove listener + CometChat.removeCallListener(listenerId); // Remove listener } @override @@ -193,9 +232,7 @@ class _YourClassNameState extends State with CallListener { } } ``` - - *** @@ -229,3 +266,22 @@ Importantly, the Outgoing Call widget is smartly designed to transition automati + +--- + +## Next Steps + + + + Add audio and video call buttons to your chat interface + + + Handle and display incoming call screens + + + Manage outgoing call screens and transitions + + + Display call history and records + + diff --git a/ui-kit/flutter/core-features.mdx b/ui-kit/flutter/core-features.mdx index 5d91b8c1..fc991048 100644 --- a/ui-kit/flutter/core-features.mdx +++ b/ui-kit/flutter/core-features.mdx @@ -1,13 +1,35 @@ --- -title: "Core" +title: "Core Features" +sidebarTitle: "Core" +description: "Comprehensive guide to CometChat's core messaging features including instant messaging, media sharing, read receipts, and more" --- -## Overview +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +Key components for core features: +- **Instant Messaging** → [MessageComposer](/ui-kit/flutter/message-composer) | [MessageList](/ui-kit/flutter/message-list) +- **Media Sharing** → [MessageComposer](/ui-kit/flutter/message-composer) | [MessageList](/ui-kit/flutter/message-list) +- **Read Receipts** → [Conversations](/ui-kit/flutter/conversations) | [MessageList](/ui-kit/flutter/message-list) +- **Typing Indicators** → [Conversations](/ui-kit/flutter/conversations) | [MessageHeader](/ui-kit/flutter/message-header) +- **User Presence** → [Conversations](/ui-kit/flutter/conversations) | [Users](/ui-kit/flutter/users) +- **Reactions** → [MessageList](/ui-kit/flutter/message-list) +- **Mentions** → [MessageComposer](/ui-kit/flutter/message-composer) | [MessageList](/ui-kit/flutter/message-list) +- **Threaded Messages** → [Threaded Messages](/ui-kit/flutter/threaded-messages-header) +- **Group Chat** → [Groups](/ui-kit/flutter/groups) + The UI Kit comprises a variety of widgets, each designed to work seamlessly with one another to deliver a comprehensive and intuitive chat experience. + +**Available via:** [UI Kits](/ui-kit/flutter/overview) | [SDK](/sdk/flutter/overview) | [REST API](https://api-explorer.cometchat.com) + + Here's how different UI Kit widgets work together to achieve CometChat's Core features: +*** + ## Instant Messaging At the heart of CometChat's functionality is the ability to support real-time text messaging. Users can send and receive instant messages, fostering quick and efficient communication. @@ -16,10 +38,12 @@ At the heart of CometChat's functionality is the ability to support real-time te -| Widgets | Functionality | -| -------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [MessageComposer](/ui-kit/flutter/message-composer) | [MessageComposer](/ui-kit/flutter/message-composer) is a Widget that enables users to write and send a variety of messages. | -| [MessageList](/ui-kit/flutter/message-list) | [MessageList](/ui-kit/flutter/message-list) is a Widget that renders a list of messages sent and messages received using [TextBubble](/ui-kit/flutter/message-bubble-styling#text-bubble). | +| Widgets | Functionality | +| --- | --- | +| [MessageComposer](/ui-kit/flutter/message-composer) | [MessageComposer](/ui-kit/flutter/message-composer) is a Widget that enables users to write and send a variety of messages. | +| [MessageList](/ui-kit/flutter/message-list) | [MessageList](/ui-kit/flutter/message-list) is a Widget that renders a list of messages sent and messages received using [TextBubble](/ui-kit/flutter/message-bubble-styling#text-bubble). | + +*** ## Media Sharing @@ -29,10 +53,12 @@ Beyond text, CometChat allows users to share various media types within their co -| Widgets | Functionality | -| -------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [MessageComposer](/ui-kit/flutter/message-composer) | [MessageComposer](/ui-kit/flutter/message-composer) is a Widget that has ActionSheet, ActionSheet is a menu that appears over the context of the app, providing multiple options for sharing media files. | -| [MessageList](/ui-kit/flutter/message-list) | [MessageList](/ui-kit/flutter/message-list) is a Widget that renders different Media Message bubbles like [Image Bubble](/ui-kit/flutter/message-bubble-styling-styling#image-bubble), [File Bubble](/ui-kit/flutter/message-bubble-styling-styling#file-bubble), [Audio Bubble](/ui-kit/flutter/message-bubble-styling-styling#audio-bubble) [Video Bubble](/ui-kit/flutter/message-bubble-styling#video-bubble) | +| Widgets | Functionality | +| --- | --- | +| [MessageComposer](/ui-kit/flutter/message-composer) | [MessageComposer](/ui-kit/flutter/message-composer) is a Widget that has ActionSheet, ActionSheet is a menu that appears over the context of the app, providing multiple options for sharing media files. | +| [MessageList](/ui-kit/flutter/message-list) | [MessageList](/ui-kit/flutter/message-list) is a Widget that renders different Media Message bubbles like [Image Bubble](/ui-kit/flutter/message-bubble-styling#image-bubble), [File Bubble](/ui-kit/flutter/message-bubble-styling#file-bubble), [Audio Bubble](/ui-kit/flutter/message-bubble-styling#audio-bubble), [Video Bubble](/ui-kit/flutter/message-bubble-styling#video-bubble) | + +*** ## Read Receipts @@ -42,11 +68,12 @@ CometChat's Read Receipts feature provides visibility into the message status, l -| Widgets | Functionality | -| -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Conversations](/ui-kit/flutter/conversations) | [Conversations](/ui-kit/flutter/conversations) is a Widget that renders Conversations item List, Conversation item also displays the delivery status of the last message providing users with real-time updates on the status of their messages. | -| [MessageList](/ui-kit/flutter/message-list) | [MessageList](/ui-kit/flutter/message-list) is a Widget that renders different types of Message bubbles, Read Recept status is an integral part of all message bubbles, no matter the type, and provides real-time updates about the status of the message. | -| [MessageInformation](/ui-kit/flutter/message-information) | [MessageInformation](/ui-kit/flutter/message-information) widget provides transparency into the status of each sent message, giving the sender insights into whether their message has been delivered and read. | +| Widgets | Functionality | +| --- | --- | +| [Conversations](/ui-kit/flutter/conversations) | [Conversations](/ui-kit/flutter/conversations) is a Widget that renders Conversations item List, Conversation item also displays the delivery status of the last message providing users with real-time updates on the status of their messages. | +| [MessageList](/ui-kit/flutter/message-list) | [MessageList](/ui-kit/flutter/message-list) is a Widget that renders different types of Message bubbles, Read Receipt status is an integral part of all message bubbles, no matter the type, and provides real-time updates about the status of the message. | + +*** ## Mark As Unread @@ -56,10 +83,12 @@ Mark as Unread feature allows users to manually mark messages as unread, helping -| Widgets | Functionality | -| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Message List](/ui-kit/flutter/message-list#functionality) | [Message List](/ui-kit/flutter/message-list#functionality) provides the "Mark as unread" option in message actions and supports starting from the first unread message when enabled. | -| [Conversations](/ui-kit/flutter/conversations) | [Conversations](/ui-kit/flutter/conversations) widget listens to conversation updates and reflects the updated unread count in real-time. | +| Widgets | Functionality | +| --- | --- | +| [Message List](/ui-kit/flutter/message-list) | [Message List](/ui-kit/flutter/message-list) provides the "Mark as unread" option in message actions and supports starting from the first unread message when enabled. | +| [Conversations](/ui-kit/flutter/conversations) | [Conversations](/ui-kit/flutter/conversations) widget listens to conversation updates and reflects the updated unread count in real-time. | + +*** ## Typing Indicator @@ -69,11 +98,13 @@ The Typing Indicator feature in CometChat shows when a user is typing a response -| Widgets | Functionality | -| ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Conversations](/ui-kit/flutter/conversations) | [Conversations](/ui-kit/flutter/conversations) is a Widget that renders Conversations item List, Conversations item also shows real-time typing status indicators. This means that if a user in a one-on-one chat or a participant in a group chat is currently typing a message | +| Widgets | Functionality | +| --- | --- | +| [Conversations](/ui-kit/flutter/conversations) | [Conversations](/ui-kit/flutter/conversations) is a Widget that renders Conversations item List, Conversations item also shows real-time typing status indicators. This means that if a user in a one-on-one chat or a participant in a group chat is currently typing a message | | [Message Header](/ui-kit/flutter/message-header) | [Message Header](/ui-kit/flutter/message-header) that renders details of User or Groups in ToolBar. The MessageHeader also handles the Typing Indicator functionality. When a user or a member in a group is typing, the MessageHeader dynamically updates to display a 'typing...' status in real-time. | +*** + ## User Presence CometChat's User Presence feature allows users to see whether their contacts are online, offline. This helps users know the best time to initiate a conversation and sets expectations about response times. @@ -82,12 +113,14 @@ CometChat's User Presence feature allows users to see whether their contacts are -| Widgets | Functionality | -| ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| [Conversations](/ui-kit/flutter/conversations) | [Conversations](/ui-kit/flutter/conversations) is a Widget that renders Conversations item List, Conversations item also shows user presence information. | +| Widgets | Functionality | +| --- | --- | +| [Conversations](/ui-kit/flutter/conversations) | [Conversations](/ui-kit/flutter/conversations) is a Widget that renders Conversations item List, Conversations item also shows user presence information. | | [Message Header](/ui-kit/flutter/message-header) | [Message Header](/ui-kit/flutter/message-header) that renders details of User or Groups in ToolBar. The MessageHeader also handles user Presence information. | -| [Users](/ui-kit/flutter/users) | [Users](/ui-kit/flutter/users) renders list of users available in your app.It also responsible to render users Presence information. | -| [Group Members](/ui-kit/flutter/group-members) | [Group Members](/ui-kit/flutter/group-members) renders list of users available in the group. The Group Members widget also handles user Presence information. | +| [Users](/ui-kit/flutter/users) | [Users](/ui-kit/flutter/users) renders list of users available in your app. It also responsible to render users Presence information. | +| [Group Members](/ui-kit/flutter/group-members) | [Group Members](/ui-kit/flutter/group-members) renders list of users available in the group. The Group Members widget also handles user Presence information. | + +*** ## Reactions @@ -101,10 +134,12 @@ In the example, tapping on this element (depicted as "+2" in the provided image) -| Widgets | Functionality | -| ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Widgets | Functionality | +| --- | --- | | [MessageList](/ui-kit/flutter/message-list) | [MessageList](/ui-kit/flutter/message-list) is a Widget that renders different types of Message bubbles, Irrespective of the type of message bubble, Reactions are an integral part and offer a more engaging, expressive way for users to respond to messages. | +*** + ## Mentions Mentions is a robust feature provided by CometChat that enhances the interactivity and clarity of group or 1-1 chats by allowing users to directly address or refer to specific individuals in a conversation. The feature also supports group mentions like @all, enabling users to quickly notify all members in a group chat simultaneously. @@ -113,38 +148,45 @@ Mentions is a robust feature provided by CometChat that enhances the interactivi -| Widgets | Functionality | -| -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| [Conversations](/ui-kit/flutter/conversations) | [Conversations](/ui-kit/flutter/conversations) widget provides an enhanced user experience by integrating the Mentions feature. This means that from the conversation list itself, users can see where they or someone else have been specifically mentioned. | -| [MessageComposer](/ui-kit/flutter/message-composer) | [MessageComposer](/ui-kit/flutter/message-composer)is a widget that allows users to craft and send various types of messages, including the usage of the Mentions feature for direct addressing within the conversation. | -| [MessageList](/ui-kit/flutter/message-list) | [MessageList](/ui-kit/flutter/message-list) is a widget that displays a list of sent and received messages. It also supports the rendering of Mentions, enhancing the readability and interactivity of conversations. | +| Widgets | Functionality | +| --- | --- | +| [Conversations](/ui-kit/flutter/conversations) | [Conversations](/ui-kit/flutter/conversations) widget provides an enhanced user experience by integrating the Mentions feature. This means that from the conversation list itself, users can see where they or someone else have been specifically mentioned. | +| [MessageComposer](/ui-kit/flutter/message-composer) | [MessageComposer](/ui-kit/flutter/message-composer) is a widget that allows users to craft and send various types of messages, including the usage of the Mentions feature for direct addressing within the conversation. | +| [MessageList](/ui-kit/flutter/message-list) | [MessageList](/ui-kit/flutter/message-list) is a widget that displays a list of sent and received messages. It also supports the rendering of Mentions, enhancing the readability and interactivity of conversations. | + +*** ## Quoted Reply -Quoted Reply is a robust feature provided by CometChat that enables users to quickly reply to specific messages by selecting the “Reply” option from a message’s action menu. This enhances context, keeps conversations organized, and improves overall chat experience in both 1-1 and group chats. +Quoted Reply is a robust feature provided by CometChat that enables users to quickly reply to specific messages by selecting the "Reply" option from a message's action menu. This enhances context, keeps conversations organized, and improves overall chat experience in both 1-1 and group chats. -| Widgets | Functionality | -| -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| [MessageList](/ui-kit/flutter/message-list) | [MessageList](/ui-kit/flutter/message-list) supports replying to messages via the “Reply” option. Users can select “Reply” on a message to open the composer with the quoted reply pre-filled, maintaining context. | -| [MessageComposer](/ui-kit/flutter/message-composer) | [MessageComposer](/ui-kit/flutter/message-composer)works seamlessly with Quoted Message by showing the quoted reply above the input field, letting users compose their response in proper context. | +| Widgets | Functionality | +| --- | --- | +| [MessageList](/ui-kit/flutter/message-list) | [MessageList](/ui-kit/flutter/message-list) supports replying to messages via the "Reply" option. Users can select "Reply" on a message to open the composer with the quoted reply pre-filled, maintaining context. | +| [MessageComposer](/ui-kit/flutter/message-composer) | [MessageComposer](/ui-kit/flutter/message-composer) works seamlessly with Quoted Message by showing the quoted reply above the input field, letting users compose their response in proper context. | + +*** ## Conversation and Advanced Search Conversation and Advanced Search is a powerful feature provided by CometChat that enables users to quickly find conversations, messages, and media across chats in real time. It supports filters, scopes, and custom actions, allowing users to locate content efficiently while keeping the chat experience smooth and intuitive. + -| Widgets | Functionality | -| -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| [Search](/ui-kit/flutter/message-header) | [Search](/ui-kit/flutter/message-header) allows users to search across conversations and messages in real time. Users can click on a result to open the conversation or jump directly to a specific message. | -| [Message Header](/ui-kit/flutter/message-header) | [Message Header](/ui-kit/flutter/message-header) shows the search button in the chat header, allowing users to search within a conversation. | -| [MessageList](/ui-kit/flutter/message-list) | [MessageList](/ui-kit/flutter/message-list) shows the selected message when clicked from search results and highlights it in the message list. | -| [MessageComposer](/ui-kit/flutter/message-composer) | [MessageComposer](/ui-kit/flutter/message-composer) displays the search input. | +| Widgets | Functionality | +| --- | --- | +| [Search](/ui-kit/flutter/search) | [Search](/ui-kit/flutter/search) allows users to search across conversations and messages in real time. Users can click on a result to open the conversation or jump directly to a specific message. | +| [Message Header](/ui-kit/flutter/message-header) | [Message Header](/ui-kit/flutter/message-header) shows the search button in the chat header, allowing users to search within a conversation. | +| [MessageList](/ui-kit/flutter/message-list) | [MessageList](/ui-kit/flutter/message-list) shows the selected message when clicked from search results and highlights it in the message list. | +| [MessageComposer](/ui-kit/flutter/message-composer) | [MessageComposer](/ui-kit/flutter/message-composer) displays the search input. | + +*** ## Moderation @@ -158,12 +200,14 @@ CometChat's Message Moderation feature helps maintain a safe and respectful chat Learn more about setting up moderation rules and managing content in the [Moderation](/moderation/overview) documentation. -| Widgets | Functionality | -| ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Widgets | Functionality | +| --- | --- | | [Message List](/ui-kit/flutter/message-list) | [Message List](/ui-kit/flutter/message-list) automatically handles moderated messages, displaying blocked content appropriately based on your moderation settings. | After implementing moderation rules, users can report messages they find inappropriate or harmful. As a next step, you can enable the **[Report Message](#report-message)** feature to allow users to flag messages for review by moderators. +*** + ## Report Message The Report Message feature allows users to report inappropriate or harmful messages within the chat. Users can choose from predefined reasons and provide additional remarks for detailed context. This feature helps maintain a safe and respectful chat environment. @@ -173,12 +217,14 @@ Learn more about how flagged messages are handled, reviewed, and moderated in th - + -| Components | Functionality | -| ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Message List](/ui-kit/flutter/message-list) | [Message List](/ui-kit/flutter/message-list) provides the "Report Message" option in the message actions menu, allowing users to initiate the reporting process for inappropriate messages. | +| Widgets | Functionality | +| --- | --- | +| [MessageList](/ui-kit/flutter/message-list) | [MessageList](/ui-kit/flutter/message-list) provides the "Report Message" option in the message actions menu, allowing users to initiate the reporting process for inappropriate messages. | + +*** ## Threaded Conversations @@ -188,21 +234,11 @@ The Threaded Conversations feature enables users to respond directly to a specif -| Widgets | Functionality | -| ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | +| Widgets | Functionality | +| --- | --- | | [Threaded Messages](/ui-kit/flutter/threaded-messages-header) | [Threaded Messages](/ui-kit/flutter/threaded-messages-header) that displays all replies made to a particular message in a conversation. | -## Report Message - -The Report Message feature allows users to report inappropriate or harmful messages within the chat. Users can choose from predefined reasons and provide additional remarks for detailed context. This feature helps maintain a safe and respectful chat environment. - - - - - -| Widgets | Functionality | -| -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| [MessageList](/ui-kit/flutter/message-list) | [MessageList](/ui-kit/flutter/message-list) provides the “Report Message” option in the message actions menu, allowing users to initiate the reporting process for inappropriate messages. | +*** ## Group Chat @@ -213,3 +249,24 @@ CometChat facilitates Group Chats, allowing users to have conversations with mul For a comprehensive understanding and guide on implementing and using the Groups feature in CometChat, you should refer to our detailed guide on [Groups](/ui-kit/flutter/groups). + +*** + +## Next Steps + + + + Learn how to send text, media, and custom messages + + + Display and manage messages with real-time updates + + + Show conversation lists with typing indicators and receipts + + + Create and manage group conversations + + + +*** diff --git a/ui-kit/flutter/events.mdx b/ui-kit/flutter/events.mdx index 7e059a76..7d7f857d 100644 --- a/ui-kit/flutter/events.mdx +++ b/ui-kit/flutter/events.mdx @@ -1,17 +1,47 @@ --- title: "Events" +description: "Listen to and handle real-time events for users, groups, conversations, messages, calls, and UI interactions in Flutter UI Kit" --- -## Overview +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```dart +// Add event listener +CometChatMessageEvents.addMessagesListener("LISTENER_ID", this); + +// Remove event listener +CometChatMessageEvents.removeMessagesListener("LISTENER_ID"); + +// Implement listener methods +@override +void ccMessageSent(BaseMessage message, MessageStatus messageStatus) { + // Handle message sent event +} +``` + +**Available Event Types:** +- **User Events** → Block/Unblock users +- **Group Events** → Create, delete, join, leave groups +- **Conversation Events** → Delete conversations +- **Message Events** → Send, edit, delete, receive messages +- **Call Events** → Outgoing, accepted, rejected, ended calls +- **UI Events** → Show/hide panels, active chat changes + Events allow for a decoupled, flexible architecture where different parts of the application can interact without having to directly reference each other. This makes it easier to create complex, interactive experiences, as well as to extend and customize the functionality provided by the CometChat UI Kit. Both Components and Composite Components have the ability to emit events. These events are dispatched in response to certain changes or user interactions within the component. By emitting events, these components allow other parts of the application to react to changes or interactions, thus enabling dynamic and interactive behavior within the application. -### User Events +*** + +## User Events `CometChatUserEvents` emit events when the logged-in user executes actions on another user. This class provides methods to add and remove listeners for user events, as well as methods to handle specific user actions such as blocking and unblocking users. +**Available Events:** + 1. `ccUserBlocked`: Triggered when the logged-in user blocks another user. 2. `ccUserUnblocked`: Triggered when the logged-in user unblocks another user. @@ -61,18 +91,16 @@ class _UserEventsExampleState extends State with CometChatUse } } ``` - - *** -### Group Events +## Group Events `CometChatGroupEvents` Emits events when the logged-in user performs actions related to groups. This class provides methods to listen to various group-related events and handle them accordingly. -Following are all the group events +**Available Events:** 1. `ccGroupCreated`: Triggered when the logged-in user creates a group. 2. `ccGroupDeleted`: Triggered when the logged-in user deletes a group. @@ -85,8 +113,6 @@ Following are all the group events 9. `ccGroupMemberAdded`: Triggered when the logged-in user adds new members to the group. 10. `ccOwnershipChanged`: Triggered when the logged-in user transfers the ownership of their group to some other member. -To listen to group events - ```dart @@ -165,30 +191,27 @@ class _GroupEventsExampleState extends State with CometChatG @override void ccOwnershipChanged(Group group, GroupMember newOwner) { - + // TODO("Not yet implemented") } @override Widget build(BuildContext context) { return const Placeholder(); } - } ``` - - *** -### Conversation Events +## Conversation Events -The `CometChatConversationEvents` component emits events when the logged-in user performs actions related to conversations. This allows for the UI to be updated accordingly. Below are the events emitted by the Conversation Component: +The `CometChatConversationEvents` component emits events when the logged-in user performs actions related to conversations. This allows for the UI to be updated accordingly. -1. `ccConversationDeleted`: Triggered when the logged-in user deletes a conversation. +**Available Events:** -To listen to conversation events and handle them in your application, you can use the following code snippets: +1. `ccConversationDeleted`: Triggered when the logged-in user deletes a conversation. @@ -229,19 +252,18 @@ class _ConversationEventsExampleState extends State w Widget build(BuildContext context) { return const Placeholder(); } - } ``` - - *** -### Message Events +## Message Events + +`CometChatMessageEvents` emits events when various actions are performed on messages within the application. These events facilitate updating the UI accordingly. -`CometChatMessageEvents` emits events when various actions are performed on messages within the application. These events facilitate updating the UI accordingly. Below are the events emitted by the MessageEvents component: +**Available Events:** 1. `ccMessageSent`: Triggered whenever a logged-in user sends any message. It can have two states: `inProgress` and `sent`. 2. `ccMessageEdited`: Triggered whenever a logged-in user edits any message from the list of messages. It can have two states: `inProgress` and `sent`. @@ -267,8 +289,6 @@ class _ConversationEventsExampleState extends State w 22. `onMessageReactionAdded`: Triggered when a reaction is added to a message. 23. `onMessageReactionRemoved`: Triggered when a reaction is removed from a message. -To listen to message events and handle them in your application, you can use the following code snippets: - ```dart @@ -296,7 +316,7 @@ class _MessageEventsExampleState extends State with CometC void dispose() { super.dispose(); - CometChatConversationEvents.removeConversationListListener(listenerID); // Remove the listener + CometChatMessageEvents.removeMessagesListener(listenerID); // Remove the listener } @override @@ -407,7 +427,7 @@ class _MessageEventsExampleState extends State with CometC @override void onMessageReactionRemoved(ReactionEvent reactionEvent) { - // TODO("Not yet implemented") + // TODO("Not yet implemented") } @override @@ -416,17 +436,17 @@ class _MessageEventsExampleState extends State with CometC } } ``` - - *** -### Call Events +## Call Events `CometChatCallEvents` emits events related to calls within the application. This class provides methods to listen to call-related events and handle them accordingly. +**Available Events:** + 1. `ccOutgoingCall`: Triggered when the logged-in user initiates an outgoing call. 2. `ccCallAccepted`: Triggered when a call is accepted. 3. `ccCallRejected`: Triggered when a call is rejected. @@ -488,26 +508,22 @@ class _CallEventsExampleState extends State with CometChatCal } } ``` - - *** -### UI Events +## UI Events `CometChatUIEvents` emits events related to UI components within the CometChat UI. This class provides methods to listen to UI-related events and handle them accordingly. -Following are the UI events +**Available Events:** 1. `showPanel`: Triggered to show an additional UI panel with custom elements. 2. `hidePanel`: Triggered to hide a previously shown UI panel. 3. `ccActiveChatChanged`: Triggered when the active chat changes, providing information about the current message, user, and group. 4. `ccOpenChat`: Triggered to open a chat with a specific user or group. -To listen to UI events and handle them in your application, you can use the following code snippet: - ```dart @@ -574,9 +590,80 @@ class _UIEventsExampleState extends State with CometChatUIEvent } } ``` - - *** + +## Best Practices + + + + Always remove event listeners in the `dispose()` method to prevent memory leaks: + + + + ```dart + @override + void dispose() { + super.dispose(); + CometChatMessageEvents.removeMessagesListener(listenerID); + } + ``` + + + + + + Use unique listener IDs for each widget to avoid conflicts: + + + + ```dart + String listenerID = "message_list_${widget.key}"; + ``` + + + + + + Keep event handlers lightweight and avoid heavy operations: + + + + ```dart + @override + void ccMessageSent(BaseMessage message, MessageStatus messageStatus) { + if (messageStatus == MessageStatus.sent) { + // Update UI efficiently + setState(() { + // Minimal state update + }); + } + } + ``` + + + + + +*** + +## Next Steps + + + + Learn how to display and manage messages with events + + + Handle conversation events and updates + + + Manage group events and member actions + + + Explore available methods for UI Kit operations + + + +*** diff --git a/ui-kit/flutter/extensions.mdx b/ui-kit/flutter/extensions.mdx index 0e4c88e7..24d3cc1d 100644 --- a/ui-kit/flutter/extensions.mdx +++ b/ui-kit/flutter/extensions.mdx @@ -1,16 +1,48 @@ --- title: "Extensions" +description: "Enhance your chat with built-in extensions including stickers, polls, collaborative tools, message translation, and link previews" --- -## Overview +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** -CometChat’s UI Kit comes with built-in support for a wide variety of extensions that provide additional functionality. These extensions enhance the chatting experience, making it more interactive, secure, and efficient. +```dart +// Enable extensions during initialization +UIKitSettings uiKitSettings = (UIKitSettingsBuilder() + ..appId = "YOUR_APP_ID" + ..region = "YOUR_REGION" + ..extensions = CometChatUIKitChatExtensions.getDefaultExtensions() +).build(); + +await CometChatUIKit.init(uiKitSettings: uiKitSettings); +``` + +**Built-in Extensions:** +- **Stickers** → Express emotions with pre-designed stickers +- **Polls** → Create polls for group discussions +- **Collaborative Whiteboard** → Real-time drawing and brainstorming +- **Collaborative Document** → Shared document editing +- **Message Translation** → Translate messages to local locale +- **Link Preview** → Show URL summaries with thumbnails +- **Thumbnail Generation** → Auto-generate image previews + +**Enable from:** [CometChat Dashboard](https://app.cometchat.com) → Extensions + + +CometChat's UI Kit comes with built-in support for a wide variety of extensions that provide additional functionality. These extensions enhance the chatting experience, making it more interactive, secure, and efficient. + + +**Available via:** [UI Kits](/ui-kit/flutter/overview) | [SDK](/sdk/flutter/overview) | [Dashboard](https://app.cometchat.com) + Activating any of the extensions in CometChat is a simple process done through your application's dashboard. Refer to our guide For detailed information on [Extensions](/fundamentals/extensions-overview) Once you have successfully enabled the desired extension in your dashboard, it will be reflected in your CometChat application upon initialization and successful login. Please note, that the extension features will only be available if they are supported by CometChat UI Kit. -CometChat’s UI Kit offers built-in support for 12 powerful extensions. This seamless integration makes it easy for you to enhance your chat application with engaging features without any extra coding effort. Just enable the desired extensions from the CometChat Dashboard, and they will be automatically reflected in the relevant widgets of your application, providing a richer and more engaging experience for your users. +CometChat's UI Kit offers built-in support for 12 powerful extensions. This seamless integration makes it easy for you to enhance your chat application with engaging features without any extra coding effort. Just enable the desired extensions from the CometChat Dashboard, and they will be automatically reflected in the relevant widgets of your application, providing a richer and more engaging experience for your users. + +*** ## Built-in Extensions @@ -26,6 +58,8 @@ Once you have successfully activated the [Sticker Extension](/fundamentals/stick +*** + ### Polls The Polls extension enhances group discussions by allowing users to create polls. Users can ask questions with a predefined list of answers, enabling a quick, organized way to gather group opinions. For a comprehensive understanding and guide on implementing and using the Polls Extension, refer to our specific guide on the [Polls Extension](/fundamentals/polls). @@ -36,6 +70,8 @@ Once you have successfully activated the [Polls Extension](/fundamentals/polls) +*** + ### Collaborative Whiteboard The Collaborative Whiteboard extension facilitates real-time collaboration. Users can draw, brainstorm, and share ideas on a shared digital whiteboard. For a comprehensive understanding and guide on implementing and using the Collaborative Whiteboard Extension, refer to our specific guide on the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard). @@ -46,6 +82,8 @@ Once you have successfully activated the [Collaborative Whiteboard Extension](/f +*** + ### Collaborative Document With the Collaborative Document extension, users can work together on a shared document. This feature is essential for remote teams where document collaboration is a recurring requirement. For a comprehensive understanding and guide on implementing and using the Collaborative Document Extension, refer to our specific guide on the [Collaborative Document Extension](/fundamentals/collaborative-document). @@ -56,6 +94,8 @@ Once you have successfully activated the [Collaborative Document Extension](/fun +*** + ### Message Translation The Message Translation extension in CometChat is designed to translate any message into your local locale. It eliminates language barriers, making the chat more inclusive. For a comprehensive understanding and guide on implementing and using the Message Translation Extension, refer to our specific guide on the [Message Translation Extension](/fundamentals/message-translation). @@ -66,6 +106,8 @@ Once you have successfully activated the [Message Translation Extension](/fundam +*** + ### Link Preview The Link Preview extension provides a summary of the URL shared in the chat. It includes the title, a description, and a thumbnail image from the web page. For a comprehensive understanding and guide on implementing and using the Link Preview Extension, refer to our specific guide on the [Link Preview Extension](/fundamentals/link-preview). @@ -76,6 +118,8 @@ Once you have successfully activated the [Link Preview Extension](/fundamentals/ +*** + ### Thumbnail Generation The Thumbnail Generation extension automatically creates a smaller preview image whenever a larger image is shared, helping to reduce the upload/download time and bandwidth usage. For a comprehensive understanding and guide on implementing and using the Thumbnail Generation Extension, refer to our specific guide on the [Thumbnail Generation Extension](/fundamentals/thumbnail-generation). @@ -85,3 +129,60 @@ Once you have successfully activated the [Thumbnail Generation Extension](/funda + +*** + +## Enabling Extensions + +To enable extensions in your Flutter app, configure them during initialization: + + + +```dart +UIKitSettings uiKitSettings = (UIKitSettingsBuilder() + ..appId = "YOUR_APP_ID" + ..region = "YOUR_REGION" + ..authKey = "YOUR_AUTH_KEY" + ..subscriptionType = CometChatSubscriptionType.allUsers + ..extensions = CometChatUIKitChatExtensions.getDefaultExtensions() // Enable all default extensions +).build(); + +await CometChatUIKit.init(uiKitSettings: uiKitSettings); +``` + + + +To disable all extensions, pass an empty array: + + + +```dart +UIKitSettings uiKitSettings = (UIKitSettingsBuilder() + ..appId = "YOUR_APP_ID" + ..region = "YOUR_REGION" + ..extensions = [] // Disable all extensions +).build(); +``` + + + +*** + +## Next Steps + + + + Learn how extensions integrate with the message composer + + + See how extensions enhance message display + + + Explore all available extensions in detail + + + Enable extensions from your CometChat Dashboard + + + +*** diff --git a/ui-kit/flutter/flutter-conversation.mdx b/ui-kit/flutter/flutter-conversation.mdx index 6a198673..965ae848 100644 --- a/ui-kit/flutter/flutter-conversation.mdx +++ b/ui-kit/flutter/flutter-conversation.mdx @@ -1,7 +1,50 @@ --- title: "Conversation List + Message View" +sidebarTitle: "Conversation + Message" +description: "Build a two-panel chat interface with conversation list and message view using Flutter UI Kit widgets" --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```dart +// Show conversations with navigation to messages +CometChatConversations( + showBackButton: true, + onItemTap: (conversation) { + final target = conversation.conversationWith; + Navigator.push( + context, + MaterialPageRoute( + builder: (_) => MessagesScreen( + user: target is User ? target : null, + group: target is Group ? target : null, + ), + ), + ); + }, +) + +// Messages screen with header, list, and composer +Scaffold( + appBar: CometChatMessageHeader(user: user, group: group), + body: Column( + children: [ + Expanded(child: CometChatMessageList(user: user, group: group)), + CometChatMessageComposer(user: user, group: group), + ], + ), +) +``` + +**Key Components:** +- **Conversations** → [CometChatConversations](/ui-kit/flutter/conversations) +- **Message List** → [CometChatMessageList](/ui-kit/flutter/message-list) +- **Message Composer** → [CometChatMessageComposer](/ui-kit/flutter/message-composer) +- **Message Header** → [CometChatMessageHeader](/ui-kit/flutter/message-header) + + The **Conversation List + Message View** layout provides a seamless **two-panel chat interface**, commonly seen in modern messaging apps like **WhatsApp Web**, **Slack**, and **Microsoft Teams**. This layout allows users to switch between conversations while keeping the active chat open, delivering a **smooth, real-time messaging experience**. @@ -12,43 +55,71 @@ This layout allows users to switch between conversations while keeping the activ *** +## **How It Works** + +This implementation uses Flutter's navigation system to create a mobile-friendly chat experience: + +1. **Conversation List Screen** – Displays all recent conversations using `CometChatConversations` +2. **Navigation** – Tapping a conversation pushes the message screen onto the navigation stack +3. **Message Screen** – Shows the full chat interface with header, message list, and composer +4. **Back Navigation** – Users can return to the conversation list using the back button + +*** + +## **Implementation** + ### **Step 1: Render the Conversation Component** The `CometChatConversations` widget displays all conversations related to the currently logged-in user. Follow the steps below to render this component: + + ```dart main.dart - @override - Widget build(BuildContext context) { - return Scaffold( - body: SafeArea( - child: CometChatConversations( - showBackButton: true, - onItemTap: (conversation) { - - final target = conversation.conversationWith; - - Navigator.push( - context, - MaterialPageRoute( - builder: (_) => MessagesScreen( - user: target is User ? target : null, - group: target is Group ? target : null, - ), +@override +Widget build(BuildContext context) { + return Scaffold( + body: SafeArea( + child: CometChatConversations( + showBackButton: true, + onItemTap: (conversation) { + final target = conversation.conversationWith; + + Navigator.push( + context, + MaterialPageRoute( + builder: (_) => MessagesScreen( + user: target is User ? target : null, + group: target is Group ? target : null, ), - ); - }, - ), + ), + ); + }, ), - ); - } + ), + ); +} ``` + + + +**Key Properties:** + +| Property | Type | Description | +| --- | --- | --- | +| `showBackButton` | bool | Shows/hides the back button in the app bar | +| `onItemTap` | Function | Callback when a conversation is tapped | +| `conversationWith` | User or Group | The target entity (user or group) for the conversation | + +*** -#### **Full Example: main.dart** +### **Full Example: main.dart** + + ```dart main.dart import 'package:flutter/material.dart'; import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; -import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart'; //Optional: Include if you're using Audio/Video Calling +import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart'; // Optional: Include if you're using Audio/Video Calling import 'messages_screen.dart'; import 'cometchat_config.dart'; @@ -80,8 +151,8 @@ class Home extends StatelessWidget { ..appId = CometChatConfig.appId ..region = CometChatConfig.region ..authKey = CometChatConfig.authKey - ..extensions = CometChatUIKitChatExtensions.getDefaultExtensions() //Replace this with empty array, if you want to disable all extensions - ..callingExtension = CometChatCallingExtension(); //Optional: Include if you're using Audio/Video Calling + ..extensions = CometChatUIKitChatExtensions.getDefaultExtensions() // Replace with empty array to disable extensions + ..callingExtension = CometChatCallingExtension(); // Optional: Include if you're using Audio/Video Calling await CometChatUIKit.init(uiKitSettings: settings.build()); await CometChatUIKit.login( @@ -131,7 +202,6 @@ class ConversationsPage extends StatelessWidget { child: CometChatConversations( showBackButton: true, onItemTap: (conversation) { - final target = conversation.conversationWith; Navigator.push( @@ -150,19 +220,25 @@ class ConversationsPage extends StatelessWidget { } } ``` + + + +*** ### **Step 2: Render the Messages Component** To create a complete messaging view, include the following components in `messages_screen.dart`: -* [Message Header](/ui-kit/flutter/message-header) -* [Message List](/ui-kit/flutter/message-list) -* [Message Composer](/ui-kit/flutter/message-composer) +* [Message Header](/ui-kit/flutter/message-header) – Displays conversation title and actions +* [Message List](/ui-kit/flutter/message-list) – Shows all messages in the conversation +* [Message Composer](/ui-kit/flutter/message-composer) – Input field for sending messages + + ```dart messages_screen.dart import 'package:flutter/material.dart'; import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; @@ -205,6 +281,16 @@ class _MessagesScreenState extends State { } } ``` + + + +**Component Breakdown:** + +| Component | Purpose | Key Features | +| --- | --- | --- | +| `CometChatMessageHeader` | Shows conversation title, avatar, and actions | User/group info, back button, call buttons | +| `CometChatMessageList` | Displays messages in chronological order | Real-time updates, reactions, replies | +| `CometChatMessageComposer` | Input field for composing messages | Text, media, attachments, emojis | *** @@ -212,7 +298,7 @@ class _MessagesScreenState extends State { Use the following command to run the app on a connected device or emulator: -``` +```bash flutter run ``` @@ -220,10 +306,150 @@ This will launch the app and display the **Conversation List**. Tapping a conver *** -## **Next Steps** +## **Customization Options** + +### **Conversation List Customization** + + + +```dart +CometChatConversations( + title: "My Chats", + showBackButton: false, + hideSearch: false, + onItemTap: (conversation) { + // Custom navigation logic + }, + onItemLongPress: (conversation) { + // Show options menu + }, + conversationsStyle: ConversationsStyle( + background: Colors.white, + titleStyle: TextStyle(fontSize: 20, fontWeight: FontWeight.bold), + ), +) +``` + + + +### **Message Screen Customization** + + + +```dart +CometChatMessageList( + user: user, + group: group, + hideMessageComposer: false, + hideMessageHeader: false, + messageListStyle: MessageListStyle( + background: Colors.grey[100], + ), +) +``` + + + +For complete customization options, see: +* [Conversations Customization](/ui-kit/flutter/conversations) +* [Message List Customization](/ui-kit/flutter/message-list) +* [Message Composer Customization](/ui-kit/flutter/message-composer) +* [Theming Guide](/ui-kit/flutter/theme-introduction) + +*** -### **Enhance the User Experience** +## **Common Use Cases** + + + + + + ```dart + CometChatConversations( + conversationsRequestBuilder: ConversationsRequestBuilder() + ..conversationType = CometChatConversationType.user // or .group + ..limit = 30, + ) + ``` + + + + + + + + ```dart + CometChatConversations( + onItemLongPress: (conversation) { + showDialog( + context: context, + builder: (context) => AlertDialog( + title: Text('Options'), + content: Column( + mainAxisSize: MainAxisSize.min, + children: [ + ListTile( + title: Text('Delete Conversation'), + onTap: () { + // Delete conversation logic + }, + ), + ], + ), + ), + ); + }, + ) + ``` + + + + + + + + ```dart + Navigator.push( + context, + PageRouteBuilder( + pageBuilder: (context, animation, secondaryAnimation) => MessagesScreen( + user: target is User ? target : null, + group: target is Group ? target : null, + ), + transitionsBuilder: (context, animation, secondaryAnimation, child) { + return SlideTransition( + position: Tween( + begin: const Offset(1.0, 0.0), + end: Offset.zero, + ).animate(animation), + child: child, + ); + }, + ), + ); + ``` + + + + + +*** + +## **Next Steps** -* **[Advanced Customizations](/ui-kit/flutter/theme-introduction)** – Personalize the chat UI to align with your brand. + + + Learn about all conversation list customization options + + + Explore message list, header, and composer features + + + Customize colors, fonts, and styles to match your brand + + + Handle real-time events and user interactions + + *** diff --git a/ui-kit/flutter/flutter-one-to-one-chat.mdx b/ui-kit/flutter/flutter-one-to-one-chat.mdx index 36a22d78..13609591 100644 --- a/ui-kit/flutter/flutter-one-to-one-chat.mdx +++ b/ui-kit/flutter/flutter-one-to-one-chat.mdx @@ -1,8 +1,54 @@ --- title: "Building A One To One/Group Chat Experience" sidebarTitle: "One To One/Group Chat" +description: "Create a focused direct messaging interface for one-to-one or group conversations using Flutter UI Kit" --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```dart +// Fetch a user and show messages directly +Future fetchCometChatUser(String uid) async { + final completer = Completer(); + CometChat.getUser( + uid, + onSuccess: (user) => completer.complete(user), + onError: (error) => completer.completeError(error), + ); + return completer.future; +} + +// Show messages screen directly +FutureBuilder( + future: fetchCometChatUser("cometchat-uid-2"), + builder: (context, snapshot) { + if (snapshot.hasData) { + return MessagesScreen(user: snapshot.data!); + } + return CircularProgressIndicator(); + }, +) + +// Messages screen +Scaffold( + appBar: CometChatMessageHeader(user: user, group: group), + body: Column( + children: [ + Expanded(child: CometChatMessageList(user: user, group: group)), + CometChatMessageComposer(user: user, group: group), + ], + ), +) +``` + +**Key Components:** +- **Message List** → [CometChatMessageList](/ui-kit/flutter/message-list) +- **Message Composer** → [CometChatMessageComposer](/ui-kit/flutter/message-composer) +- **Message Header** → [CometChatMessageHeader](/ui-kit/flutter/message-header) + + The **One-to-One Chat** feature provides a streamlined **direct messaging interface**, making it ideal for **support chats, dating apps, and private messaging platforms**. This setup eliminates distractions by focusing solely on a **dedicated chat window**. @@ -11,40 +57,79 @@ The **One-to-One Chat** feature provides a streamlined **direct messaging interf *** +## **How It Works** + +This implementation bypasses the conversation list and opens directly into a chat: + +1. **Fetch User/Group** – Retrieve the target user or group using their UID/GUID +2. **Direct Navigation** – Launch directly into the message screen +3. **Focused Experience** – No conversation list, just the active chat +4. **Ideal for Context** – Perfect for support tickets, notifications, or deep links + +*** + +## **Use Cases** + +* **Customer Support** – Direct users to agent chat from help center +* **Dating Apps** – Open chat after a match +* **Notifications** – Deep link from push notification to specific chat +* **Onboarding** – Guide new users through a welcome chat +* **Contextual Messaging** – Start chat from user profile or product page + +*** + +## **Implementation** + ### **Step 1: Render the Message View** -The `CometChatConversations` widget displays all conversations related to the currently logged-in user. Follow the steps below to render this component: +The `CometChatMessageList` widget displays all messages for a specific user or group. Follow the steps below to render this component: + + ```dart main.dart - @override - Widget build(BuildContext context) { - return Scaffold( - body: SafeArea( - child: FutureBuilder( - future: fetchCometChatUser("cometchat-uid-2"), - builder: (context, snapshot) { - if (snapshot.connectionState == ConnectionState.waiting) { - return const Center(child: CircularProgressIndicator()); - } else if (snapshot.hasError) { - return Center(child: Text("Error: ${snapshot.error}")); - } else if (snapshot.hasData) { - return MessagesScreen(user: snapshot.data!); - } else { - return const Center(child: Text("User not found")); - } - }, - ), +@override +Widget build(BuildContext context) { + return Scaffold( + body: SafeArea( + child: FutureBuilder( + future: fetchCometChatUser("cometchat-uid-2"), + builder: (context, snapshot) { + if (snapshot.connectionState == ConnectionState.waiting) { + return const Center(child: CircularProgressIndicator()); + } else if (snapshot.hasError) { + return Center(child: Text("Error: ${snapshot.error}")); + } else if (snapshot.hasData) { + return MessagesScreen(user: snapshot.data!); + } else { + return const Center(child: Text("User not found")); + } + }, ), - ); - } + ), + ); +} ``` + + + +**Key Concepts:** -#### **Full Example: main.dart** +| Concept | Description | +| --- | --- | +| `fetchCometChatUser()` | Async function to retrieve user by UID | +| `FutureBuilder` | Widget that builds based on async operation state | +| `MessagesScreen` | Custom widget containing message components | +*** + +### **Full Example: main.dart** + + + ```dart main.dart import 'package:flutter/material.dart'; import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; -import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart'; //Optional: Include if you're using Audio/Video Calling +import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart'; // Optional: Include if you're using Audio/Video Calling import 'messages_screen.dart'; import 'cometchat_config.dart'; @@ -78,8 +163,8 @@ class Home extends StatelessWidget { ..appId = CometChatConfig.appId ..region = CometChatConfig.region ..authKey = CometChatConfig.authKey - ..extensions = CometChatUIKitChatExtensions.getDefaultExtensions() //Replace this with empty array, if you want to disable all extensions - ..callingExtension = CometChatCallingExtension(); //Optional: Include if you're using Audio/Video Calling + ..extensions = CometChatUIKitChatExtensions.getDefaultExtensions() // Replace with empty array to disable extensions + ..callingExtension = CometChatCallingExtension(); // Optional: Include if you're using Audio/Video Calling await CometChatUIKit.init(uiKitSettings: settings.build()); await CometChatUIKit.login( @@ -155,19 +240,25 @@ class MessagesPage extends StatelessWidget { } } ``` + + + +*** ### **Step 2: Render the Messages Component** To create a complete messaging view, include the following components in `messages_screen.dart`: -* [Message Header](/ui-kit/flutter/message-header) -* [Message List](/ui-kit/flutter/message-list) -* [Message Composer](/ui-kit/flutter/message-composer) +* [Message Header](/ui-kit/flutter/message-header) – Displays conversation title and actions +* [Message List](/ui-kit/flutter/message-list) – Shows all messages in the conversation +* [Message Composer](/ui-kit/flutter/message-composer) – Input field for sending messages + + ```dart messages_screen.dart import 'package:flutter/material.dart'; import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; @@ -210,6 +301,16 @@ class _MessagesScreenState extends State { } } ``` + + + +**Component Breakdown:** + +| Component | Purpose | Key Features | +| --- | --- | --- | +| `CometChatMessageHeader` | Shows conversation title, avatar, and actions | User/group info, back button, call buttons | +| `CometChatMessageList` | Displays messages in chronological order | Real-time updates, reactions, replies | +| `CometChatMessageComposer` | Input field for composing messages | Text, media, attachments, emojis | *** @@ -217,7 +318,7 @@ class _MessagesScreenState extends State { Use the following command to run the app on a connected device or emulator: -``` +```bash flutter run ``` @@ -225,10 +326,375 @@ This will launch the app, and you should see the one-to-one chat interface with *** -## **Next Steps** +## **Variations** + +### **For Group Chat** + +To open a group chat instead of a one-to-one chat, fetch a group instead of a user: + + + +```dart +Future fetchCometChatGroup(String guid) async { + final completer = Completer(); + CometChat.getGroup( + guid, + onSuccess: (group) => completer.complete(group), + onError: (error) => completer.completeError(error), + ); + return completer.future; +} -### **Enhance the User Experience** +// In your widget +FutureBuilder( + future: fetchCometChatGroup("your-group-guid"), + builder: (context, snapshot) { + if (snapshot.hasData) { + return MessagesScreen(group: snapshot.data!); + } + return CircularProgressIndicator(); + }, +) +``` + + + +### **From Route Parameters** + +Pass user/group ID through navigation: + + + +```dart +// Navigate with parameters +Navigator.push( + context, + MaterialPageRoute( + builder: (_) => ChatScreen(userId: "cometchat-uid-2"), + ), +); + +// ChatScreen widget +class ChatScreen extends StatelessWidget { + final String userId; + + const ChatScreen({Key? key, required this.userId}) : super(key: key); + + Future fetchUser() async { + final completer = Completer(); + CometChat.getUser( + userId, + onSuccess: (user) => completer.complete(user), + onError: (error) => completer.completeError(error), + ); + return completer.future; + } + + @override + Widget build(BuildContext context) { + return FutureBuilder( + future: fetchUser(), + builder: (context, snapshot) { + if (snapshot.hasData) { + return MessagesScreen(user: snapshot.data!); + } + return Scaffold( + body: Center(child: CircularProgressIndicator()), + ); + }, + ); + } +} +``` + + + +### **From Deep Link** + +Handle deep links to open specific chats: + + + +```dart +// In your main app +MaterialApp( + onGenerateRoute: (settings) { + if (settings.name == '/chat') { + final args = settings.arguments as Map; + return MaterialPageRoute( + builder: (_) => ChatScreen( + userId: args['userId'], + groupId: args['groupId'], + ), + ); + } + return null; + }, +) + +// Navigate from deep link +Navigator.pushNamed( + context, + '/chat', + arguments: {'userId': 'cometchat-uid-2'}, +); +``` + + + +*** + +## **Customization Options** + +### **Hide Header or Composer** + + + +```dart +MessagesScreen( + user: user, + hideMessageHeader: true, // Hide the header + hideMessageComposer: false, // Show the composer +) +``` + + + +### **Custom Message Actions** + + + +```dart +CometChatMessageList( + user: user, + onMessageTap: (message) { + // Handle message tap + }, + onMessageLongPress: (message) { + // Show options menu + }, +) +``` + + + +### **Styling** + + + +```dart +CometChatMessageList( + user: user, + messageListStyle: MessageListStyle( + background: Colors.grey[100], + loadingIconTint: Colors.blue, + ), +) +``` + + + +For complete customization options, see: +* [Message List Customization](/ui-kit/flutter/message-list) +* [Message Header Customization](/ui-kit/flutter/message-header) +* [Message Composer Customization](/ui-kit/flutter/message-composer) +* [Theming Guide](/ui-kit/flutter/theme-introduction) + +*** + +## **Common Use Cases** + + + + + + ```dart + // From support ticket screen + ElevatedButton( + onPressed: () { + Navigator.push( + context, + MaterialPageRoute( + builder: (_) => ChatScreen( + userId: ticket.assignedAgentId, + ), + ), + ); + }, + child: Text('Chat with Support'), + ) + ``` + + + + + + + + ```dart + // From user profile screen + IconButton( + icon: Icon(Icons.message), + onPressed: () { + Navigator.push( + context, + MaterialPageRoute( + builder: (_) => ChatScreen(userId: profile.userId), + ), + ); + }, + ) + ``` + + + + + + + + ```dart + // Handle notification tap + void handleNotificationTap(Map data) { + final userId = data['senderId']; + Navigator.pushNamed( + context, + '/chat', + arguments: {'userId': userId}, + ); + } + ``` + + + + + + + + ```dart + CometChatMessageComposer( + user: user, + text: "Hello! I need help with...", // Pre-filled text + ) + ``` + + + + + +*** + +## **Best Practices** + + + + Always handle errors when fetching users or groups: + + + + ```dart + FutureBuilder( + future: fetchCometChatUser(userId), + builder: (context, snapshot) { + if (snapshot.hasError) { + return Scaffold( + body: Center( + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Icon(Icons.error, size: 48, color: Colors.red), + SizedBox(height: 16), + Text('Failed to load chat'), + ElevatedButton( + onPressed: () => setState(() {}), // Retry + child: Text('Retry'), + ), + ], + ), + ), + ); + } + // ... rest of builder + }, + ) + ``` + + + + + + Provide clear loading indicators: + + + + ```dart + if (snapshot.connectionState == ConnectionState.waiting) { + return Scaffold( + body: Center( + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + CircularProgressIndicator(), + SizedBox(height: 16), + Text('Loading chat...'), + ], + ), + ), + ); + } + ``` + + + + + + Cache fetched users to avoid repeated API calls: + + + + ```dart + class UserCache { + static final Map _cache = {}; + + static Future getUser(String uid) async { + if (_cache.containsKey(uid)) { + return _cache[uid]!; + } + + final completer = Completer(); + CometChat.getUser( + uid, + onSuccess: (user) { + _cache[uid] = user; + completer.complete(user); + }, + onError: (error) => completer.completeError(error), + ); + return completer.future; + } + } + ``` + + + + + +*** + +## **Next Steps** -* **[Advanced Customizations](/ui-kit/flutter/theme-introduction)** – Personalize the chat UI to align with your brand. + + + Explore message list, header, and composer features + + + Add a conversation list for multi-chat support + + + Customize colors, fonts, and styles to match your brand + + + Handle real-time events and user interactions + + *** diff --git a/ui-kit/flutter/flutter-tab-based-chat.mdx b/ui-kit/flutter/flutter-tab-based-chat.mdx index cc2abe66..5959a206 100644 --- a/ui-kit/flutter/flutter-tab-based-chat.mdx +++ b/ui-kit/flutter/flutter-tab-based-chat.mdx @@ -1,9 +1,49 @@ --- title: "Building A Messaging UI With Tabs, Sidebar, And Message View" sidebarTitle: "Tab Based Chat Experience" +description: "Create a multi-tab chat interface with conversations, calls, users, and groups using Flutter bottom navigation" --- -This guide walks you through creating a **tab-based messaging UI** using **React** and **CometChat UIKit**. The UI will include different sections for **Chats, Calls, Users, and Groups**, allowing seamless navigation. +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```dart +// Tab-based UI with bottom navigation +Scaffold( + body: PageView( + controller: _pageController, + children: [ + CometChatConversations(), + CometChatCallLogs(), + CometChatUsers(), + CometChatGroups(), + ], + ), + bottomNavigationBar: BottomNavigationBar( + currentIndex: _selectedIndex, + onTap: (index) { + setState(() => _selectedIndex = index); + _pageController.jumpToPage(index); + }, + items: [ + BottomNavigationBarItem(icon: Icon(Icons.chat), label: "Chat"), + BottomNavigationBarItem(icon: Icon(Icons.call), label: "Calls"), + BottomNavigationBarItem(icon: Icon(Icons.person), label: "Users"), + BottomNavigationBarItem(icon: Icon(Icons.group), label: "Groups"), + ], + ), +) +``` + +**Key Components:** +- **Conversations** → [CometChatConversations](/ui-kit/flutter/conversations) +- **Call Logs** → [CometChatCallLogs](/ui-kit/flutter/call-logs) +- **Users** → [CometChatUsers](/ui-kit/flutter/users) +- **Groups** → [CometChatGroups](/ui-kit/flutter/groups) + + +This guide walks you through creating a **tab-based messaging UI** using **Flutter** and **CometChat UIKit**. The UI will include different sections for **Chats, Calls, Users, and Groups**, allowing seamless navigation. *** @@ -15,50 +55,123 @@ This guide walks you through creating a **tab-based messaging UI** using **React This layout consists of: -1. **Sidebar (Conversation List)** – Displays recent conversations with active users and groups. -2. **Message View** – Shows the selected chat with real-time messages. -3. **Message Input Box** – Allows users to send messages seamlessly. +1. **Bottom Navigation Bar** – Tabs for switching between Chats, Calls, Users, and Groups +2. **Page View** – Displays the selected tab's content +3. **Conversation List** – Shows recent conversations with active users and groups +4. **Message View** – Opens when a conversation is tapped + +*** + +## **How It Works** + +This implementation uses Flutter's `BottomNavigationBar` and `PageView` to create a tabbed interface: + +1. **Bottom Navigation** – Provides quick access to different sections +2. **Page View** – Swipeable pages for each tab +3. **State Management** – Syncs selected tab with page view +4. **Navigation** – Tapping a conversation opens the message screen *** +## **Use Cases** + +* **All-in-One Chat Apps** – Complete messaging solution with multiple features +* **Business Messengers** – Professional communication with organized sections +* **Social Platforms** – Community chat with user discovery +* **Support Apps** – Help desk with call logs and user management +* **Team Collaboration** – Internal communication with group management + +*** + +## **Implementation** + ### **Step 1: Render the Tab Component** -The `CometChatConversations` widget displays all conversations related to the currently logged-in user. Follow the steps below to render this component: +The tab-based UI uses `BottomNavigationBar` for navigation and `PageView` for content display: + + ```dart main.dart - @override - Widget build(BuildContext context) { - return Scaffold( - appBar: CometChatMessageHeader( - user: widget.user, - group: widget.group, - ), - body: SafeArea( - child: Column( - children: [ - Expanded( - child: CometChatMessageList( - user: widget.user, - group: widget.group, +@override +Widget build(BuildContext context) { + return Scaffold( + body: PageView( + controller: _pageController, + onPageChanged: (index) { + setState(() { + _selectedIndex = index; + }); + }, + children: [ + CometChatConversations( + showBackButton: false, + onItemTap: (conversation) { + Navigator.push( + context, + MaterialPageRoute( + builder: (context) => MessagesScreen( + user: conversation.conversationWith is User + ? conversation.conversationWith as User + : null, + group: conversation.conversationWith is Group + ? conversation.conversationWith as Group + : null, + ), ), - ), - CometChatMessageComposer( - user: widget.user, - group: widget.group, - ), - ], + ); + }, ), - ), - ); - } + CometChatCallLogs(), + CometChatUsers(), + CometChatGroups(), + ], + ), + bottomNavigationBar: BottomNavigationBar( + currentIndex: _selectedIndex, + onTap: _onItemTapped, + items: const [ + BottomNavigationBarItem( + icon: Icon(Icons.chat), + label: "Chat", + ), + BottomNavigationBarItem( + icon: Icon(Icons.call), + label: "Calls", + ), + BottomNavigationBarItem( + icon: Icon(Icons.person), + label: "Users", + ), + BottomNavigationBarItem( + icon: Icon(Icons.group), + label: "Groups", + ), + ], + ), + ); +} ``` + + + +**Key Components:** -#### **Full Example: main.dart** +| Component | Purpose | Key Features | +| --- | --- | --- | +| `PageView` | Container for swipeable pages | Smooth transitions, gesture support | +| `BottomNavigationBar` | Tab navigation | Icon + label, active state | +| `PageController` | Controls page view | Jump to page, animate transitions | + +*** +### **Full Example: main.dart** + + + ```dart main.dart import 'package:flutter/material.dart'; import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; -import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart'; //Optional: Include if you're using Audio/Video Calling +import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart'; // Optional: Include if you're using Audio/Video Calling import 'messages_screen.dart'; import 'cometchat_config.dart'; @@ -90,8 +203,8 @@ class Home extends StatelessWidget { ..appId = CometChatConfig.appId ..region = CometChatConfig.region ..authKey = CometChatConfig.authKey - ..extensions = CometChatUIKitChatExtensions.getDefaultExtensions() //Replace this with empty array, if you want to disable all extensions - ..callingExtension = CometChatCallingExtension(); //Optional: Include if you're using Audio/Video Calling + ..extensions = CometChatUIKitChatExtensions.getDefaultExtensions() // Replace with empty array to disable extensions + ..callingExtension = CometChatCallingExtension(); // Optional: Include if you're using Audio/Video Calling await CometChatUIKit.init(uiKitSettings: settings.build()); await CometChatUIKit.login( @@ -149,6 +262,12 @@ class _TabsScreenState extends State { _pageController.jumpToPage(index); } + @override + void dispose() { + _pageController.dispose(); + super.dispose(); + } + @override Widget build(BuildContext context) { return Scaffold( @@ -179,13 +298,34 @@ class _TabsScreenState extends State { }, ), CometChatCallLogs(), - CometChatUsers(), - CometChatGroups(), + CometChatUsers( + onItemTap: (user) { + Navigator.push( + context, + MaterialPageRoute( + builder: (context) => MessagesScreen(user: user), + ), + ); + }, + ), + CometChatGroups( + onItemTap: (group) { + Navigator.push( + context, + MaterialPageRoute( + builder: (context) => MessagesScreen(group: group), + ), + ); + }, + ), ], ), bottomNavigationBar: BottomNavigationBar( + type: BottomNavigationBarType.fixed, currentIndex: _selectedIndex, onTap: _onItemTapped, + selectedItemColor: Colors.deepPurple, + unselectedItemColor: Colors.grey, items: const [ BottomNavigationBarItem( icon: Icon(Icons.chat), @@ -209,19 +349,25 @@ class _TabsScreenState extends State { } } ``` + + + +*** ### **Step 2: Render the Messages Component** To create a complete messaging view, include the following components in `messages_screen.dart`: -* [Message Header](/ui-kit/flutter/message-header) -* [Message List](/ui-kit/flutter/message-list) -* [Message Composer](/ui-kit/flutter/message-composer) +* [Message Header](/ui-kit/flutter/message-header) – Displays conversation title and actions +* [Message List](/ui-kit/flutter/message-list) – Shows all messages in the conversation +* [Message Composer](/ui-kit/flutter/message-composer) – Input field for sending messages + + ```dart messages_screen.dart import 'package:flutter/material.dart'; import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; @@ -264,6 +410,8 @@ class _MessagesScreenState extends State { } } ``` + + *** @@ -271,7 +419,7 @@ class _MessagesScreenState extends State { Use the following command to run the app on a connected device or emulator: -``` +```bash flutter run ``` @@ -279,10 +427,384 @@ This will launch the app, and you should see the tab-based chat experience with *** -## **Next Steps** +## **Tab Descriptions** + +### **1. Chat Tab** + +Displays recent conversations with users and groups: + +* **CometChatConversations** – Shows conversation list +* **Real-time updates** – New messages appear instantly +* **Unread counts** – Badge showing unread message count +* **Last message preview** – Shows snippet of last message +* **Tap to open** – Navigate to full message view + +### **2. Calls Tab** + +Shows call history and logs: + +* **CometChatCallLogs** – Displays all call records +* **Call types** – Audio and video calls +* **Call status** – Missed, incoming, outgoing +* **Tap to call back** – Initiate new call from history +* **Call duration** – Shows length of completed calls + +### **3. Users Tab** + +Browse and search all users: + +* **CometChatUsers** – Lists all available users +* **Search functionality** – Find users by name +* **User status** – Online/offline indicators +* **Tap to chat** – Start conversation with any user +* **User avatars** – Profile pictures + +### **4. Groups Tab** + +Manage and join groups: + +* **CometChatGroups** – Shows all groups +* **Group types** – Public, private, password-protected +* **Member count** – Number of participants +* **Join groups** – Request to join or join directly +* **Tap to chat** – Open group conversation + +*** + +## **Customization Options** + +### **Custom Tab Icons** + + + +```dart +BottomNavigationBar( + items: const [ + BottomNavigationBarItem( + icon: Icon(Icons.forum), + activeIcon: Icon(Icons.forum, size: 28), + label: "Chats", + ), + BottomNavigationBarItem( + icon: Icon(Icons.phone), + activeIcon: Icon(Icons.phone, size: 28), + label: "Calls", + ), + // ... more tabs + ], +) +``` + + + +### **Custom Tab Colors** + + + +```dart +BottomNavigationBar( + selectedItemColor: Colors.blue, + unselectedItemColor: Colors.grey, + backgroundColor: Colors.white, + elevation: 8, + // ... items +) +``` + + + +### **Disable Swipe Between Tabs** + + + +```dart +PageView( + controller: _pageController, + physics: NeverScrollableScrollPhysics(), // Disable swipe + children: [ + // ... pages + ], +) +``` + + + +### **Add More Tabs** + + + +```dart +// Add a Settings tab +children: [ + CometChatConversations(), + CometChatCallLogs(), + CometChatUsers(), + CometChatGroups(), + SettingsScreen(), // New tab +], + +items: [ + // ... existing items + BottomNavigationBarItem( + icon: Icon(Icons.settings), + label: "Settings", + ), +], +``` + + + +### **Custom Tab Styling** + + + +```dart +CometChatConversations( + title: "My Chats", + conversationsStyle: ConversationsStyle( + background: Colors.white, + titleStyle: TextStyle( + fontSize: 20, + fontWeight: FontWeight.bold, + ), + ), +) +``` + + + +For complete customization options, see: +* [Conversations Customization](/ui-kit/flutter/conversations) +* [Call Logs Customization](/ui-kit/flutter/call-logs) +* [Users Customization](/ui-kit/flutter/users) +* [Groups Customization](/ui-kit/flutter/groups) +* [Theming Guide](/ui-kit/flutter/theme-introduction) + +*** + +## **Common Use Cases** + + + + + + ```dart + BottomNavigationBarItem( + icon: Stack( + children: [ + Icon(Icons.chat), + if (unreadCount > 0) + Positioned( + right: 0, + top: 0, + child: Container( + padding: EdgeInsets.all(2), + decoration: BoxDecoration( + color: Colors.red, + borderRadius: BorderRadius.circular(10), + ), + constraints: BoxConstraints( + minWidth: 16, + minHeight: 16, + ), + child: Text( + '$unreadCount', + style: TextStyle( + color: Colors.white, + fontSize: 10, + ), + textAlign: TextAlign.center, + ), + ), + ), + ], + ), + label: "Chat", + ) + ``` + + + + + + + + ```dart + // Save selected tab to shared preferences + void _onItemTapped(int index) async { + setState(() => _selectedIndex = index); + _pageController.jumpToPage(index); + + final prefs = await SharedPreferences.getInstance(); + await prefs.setInt('selected_tab', index); + } + + // Load selected tab on init + @override + void initState() { + super.initState(); + _loadSelectedTab(); + } + + Future _loadSelectedTab() async { + final prefs = await SharedPreferences.getInstance(); + final savedIndex = prefs.getInt('selected_tab') ?? 0; + setState(() => _selectedIndex = savedIndex); + _pageController.jumpToPage(savedIndex); + } + ``` + + + + + + + + ```dart + void _onItemTapped(int index) { + setState(() => _selectedIndex = index); + _pageController.animateToPage( + index, + duration: Duration(milliseconds: 300), + curve: Curves.easeInOut, + ); + } + ``` + + + + + + + + ```dart + @override + Widget build(BuildContext context) { + return WillPopScope( + onWillPop: () async { + if (_selectedIndex != 0) { + // Go back to first tab instead of exiting + _onItemTapped(0); + return false; + } + return true; // Allow exit + }, + child: Scaffold( + // ... rest of widget + ), + ); + } + ``` + + + + + +*** + +## **Best Practices** + + + + Always dispose of controllers to prevent memory leaks: + + + + ```dart + @override + void dispose() { + _pageController.dispose(); + super.dispose(); + } + ``` + + + + + + For 4+ tabs, use fixed type to prevent shifting: + + + + ```dart + BottomNavigationBar( + type: BottomNavigationBarType.fixed, // Prevents label shifting + // ... rest of properties + ) + ``` + + + + + + Load tab content only when needed: + + + + ```dart + PageView( + controller: _pageController, + children: [ + _selectedIndex == 0 ? CometChatConversations() : SizedBox(), + _selectedIndex == 1 ? CometChatCallLogs() : SizedBox(), + _selectedIndex == 2 ? CometChatUsers() : SizedBox(), + _selectedIndex == 3 ? CometChatGroups() : SizedBox(), + ], + ) + ``` + + + + + + Refresh tab content when switching: + + + + ```dart + void _onItemTapped(int index) { + setState(() => _selectedIndex = index); + _pageController.jumpToPage(index); + + // Refresh current tab + _refreshTab(index); + } + + void _refreshTab(int index) { + // Implement refresh logic for each tab + switch (index) { + case 0: + // Refresh conversations + break; + case 1: + // Refresh call logs + break; + // ... etc + } + } + ``` + + + + -### **Enhance the User Experience** +*** + +## **Next Steps** -* **[Advanced Customizations](/ui-kit/flutter/theme-introduction)** – Personalize the chat UI to align with your brand. + + + Customize the conversation list appearance and behavior + + + Configure call history and calling features + + + Manage user lists and group memberships + + + Customize colors, fonts, and styles to match your brand + + *** diff --git a/ui-kit/flutter/getting-started.mdx b/ui-kit/flutter/getting-started.mdx index d919825e..1b53fde4 100644 --- a/ui-kit/flutter/getting-started.mdx +++ b/ui-kit/flutter/getting-started.mdx @@ -1,48 +1,127 @@ --- title: "Getting Started With CometChat Flutter UI Kit" sidebarTitle: "Getting Started" +description: "Install and configure CometChat Flutter UI Kit with step-by-step setup, initialization, and authentication guide" --- -CometChat UI Kit for Flutter is a package of pre-assembled UI elements crafted to streamline the creation of an in-app chat equipped with essential messaging functionalities. Our UI Kit presents options for light and dark themes, diverse fonts, colors, and extra customization capabilities. +{/* TL;DR for Agents and Quick Reference */} + +**Quick Setup Reference** + +```bash +# Install +flutter pub add cometchat_chat_uikit +flutter pub add cometchat_calls_uikit # Optional: for calling + +# Initialize (run once at app start) +UIKitSettings uiKitSettings = (UIKitSettingsBuilder() + ..appId = "YOUR_APP_ID" + ..region = "YOUR_REGION" + ..authKey = "YOUR_AUTH_KEY" + ..subscriptionType = CometChatSubscriptionType.allUsers + ..extensions = CometChatUIKitChatExtensions.getDefaultExtensions() + ..callingExtension = CometChatCallingExtension() +).build(); +await CometChatUIKit.init(uiKitSettings: uiKitSettings); + +# Login (after init) +await CometChatUIKit.login("cometchat-uid-1"); +``` -CometChat UI Kit supports both one-to-one and group conversations. Follow the guide below to initiate conversations from scratch using CometChat Flutter UI Kit. +**Required Credentials:** App ID, Region, Auth Key (dev) or Auth Token (prod) +**Get from:** [CometChat Dashboard](https://app.cometchat.com) → Your App → API & Auth Keys -{/* - - */} +**Integration Paths:** +- **Conversation List + Message** → [flutter-conversation](/ui-kit/flutter/flutter-conversation) +- **One-to-One Chat** → [flutter-one-to-one-chat](/ui-kit/flutter/flutter-one-to-one-chat) +- **Tab-Based Chat** → [flutter-tab-based-chat](/ui-kit/flutter/flutter-tab-based-chat) + + +The **CometChat UI Kit for Flutter** streamlines the integration of in-app chat functionality by providing a **comprehensive set of prebuilt UI widgets**. It offers seamless **theming options**, including **light and dark modes**, customizable fonts, colors, and extensive styling capabilities. + +With built-in support for **one-to-one and group conversations**, developers can efficiently enable chat features within their applications. Follow this guide to **quickly integrate chat functionality** using the CometChat Flutter UI Kit. -## Prerequisites +*** + +## **Prerequisites** + +Before installing the **CometChat UI Kit for Flutter**, you must first **create a CometChat application** via the **[CometChat Dashboard](https://app.cometchat.com/)**. The dashboard provides all the essential chat service components, including: + +* **User Management** +* **Group Chat & Messaging** +* **Voice & Video Calling** +* **Real-time Notifications** + + + +To initialize the **UI Kit**, you will need the following credentials from your **CometChat application**: + +1. **App ID** +2. **Auth Key** +3. **Region** + +Ensure you have these details ready before proceeding with the installation and configuration. + + + +*** + +## **Register & Set Up CometChat** + +Follow these steps to **register on CometChat** and **set up your development environment**. + +### **Step 1: Register on CometChat** + +To use **CometChat UI Kit**, you first need to register on the **CometChat Dashboard**. + +🔗 **[Click here to Sign Up](https://app.cometchat.com/login)** + +### **Step 2: Get Your Application Keys** -Before installing the **UI Kit**, you need to create a CometChat application on the CometChat Dashboard, which includes all the necessary data for a chat service, such as users, groups, calls, and messages. You will require the `App ID`, `AuthKey`, and `Region` of your CometChat application when initializing the SDK. +After registering, create a **new app** and retrieve your **authentication details**: -**i. Register on CometChat** +1. Navigate to the **QuickStart** or **API & Auth Keys** section. -* You need to register on the **CometChat Dashboard** first. [Click here to sign up](https://app.cometchat.com/login). +2. Note down the following keys: -**ii. Get Your Application Keys** + * **App ID** + * **Auth Key** + * **Region** -* Create a **new app** -* Head over to the **QuickStart** or **API & Auth Keys section** and note the **App ID**, **Auth Key**, and **Region**. + -> Each CometChat application can be integrated with a single client app. Within the same application, users can communicate with each other across all platforms, whether they are on mobile devices or on the web. +Each CometChat application can be integrated with a **single client app**. Users within the same application can communicate across multiple platforms, including **iOS, Android, and web**. -**iii. Platform & IDE Setup** + -* Flutter installed on your system. -* Android Studio or VS Code with configured Flutter/Dart plugins. -* Xcode & Pod (CocoaPods) for iOS -* An iOS device or emulator with iOS 12.0 or above. -* Android device or emulator with Android version 5.0 or above. +### **Step 3: Set Up Your Development Environment** -## Getting Started +Ensure your system meets the following **prerequisites** before proceeding with integration. -### **Step 1: Create Flutter application project** +**System Requirements:** -To get started, create a new flutter application project. +* **Flutter** installed on your system (Flutter 3.0 or higher recommended) +* **Android Studio** or **VS Code** with configured Flutter/Dart plugins +* **Xcode & CocoaPods** for iOS development +* An **iOS device or simulator** with iOS 12.0 or above +* An **Android device or emulator** with Android version 5.0 (API level 21) or above + +*** + +## **Getting Started** + +### **Step 1: Create Flutter Application Project** + +To get started, create a new Flutter application project: + +```bash +flutter create my_chat_app +cd my_chat_app +``` *** @@ -53,46 +132,57 @@ To get started, create a new flutter application project. To use this UI Kit in your Flutter project, you'll need to add the following dependency to the dependencies section of your `pubspec.yaml` file: ```yaml pubspec.yaml +dependencies: + flutter: + sdk: flutter + cometchat_chat_uikit: ^5.2.8 - cometchat_calls_uikit: ^5.0.12 #Optional: Include if you're using Audio/Video Calling + cometchat_calls_uikit: ^5.0.12 # Optional: Include if you're using Audio/Video Calling ``` -Final `pubspec.yaml` +**Final `pubspec.yaml` Example:** ```yaml pubspec.yaml - name: getting_started - description: "A new Flutter project." +name: my_chat_app +description: "A Flutter chat application using CometChat UI Kit" - publish_to: 'none' # Remove this line if you wish to publish to pub.dev +publish_to: 'none' - version: 1.0.0+1 +version: 1.0.0+1 - environment: - sdk: ^3.5.3 +environment: + sdk: ^3.5.3 - dependencies: - flutter: - sdk: flutter +dependencies: + flutter: + sdk: flutter - cometchat_chat_uikit: ^5.2.8 - cometchat_calls_uikit: ^5.0.12 #Optional: Include if you're using Audio/Video Calling - cupertino_icons: ^1.0.8 + cometchat_chat_uikit: ^5.2.8 + cometchat_calls_uikit: ^5.0.12 # Optional: Include if you're using Audio/Video Calling + cupertino_icons: ^1.0.8 - dev_dependencies: - flutter_test: - sdk: flutter +dev_dependencies: + flutter_test: + sdk: flutter - flutter_lints: ^4.0.0 + flutter_lints: ^4.0.0 - flutter: - uses-material-design: true +flutter: + uses-material-design: true +``` + +After updating `pubspec.yaml`, run: + +```bash +flutter pub get ``` *** **2. Android App Setup** -To ensure compatibility with the CometChat Calling UI Kit and its dependencies, your Flutter project must target a minimum SDK version of **24 or higher**.\ +To ensure compatibility with the CometChat Calling UI Kit and its dependencies, your Flutter project must target a minimum SDK version of **24 or higher**. + Update the `minSdkVersion` in your Android project configuration, located at `android/app/build.gradle`: ```gradle build.gradle @@ -108,20 +198,34 @@ android { **3. Update iOS Podfile** -In your Podfile (located at ios/Podfile), update the minimum iOS version your project supports to 12.0: +In your Podfile (located at `ios/Podfile`), update the minimum iOS version your project supports to 12.0: ```ruby Podfile platform :ios, '12.0' ``` +After updating, run: + +```bash +cd ios +pod install +cd .. +``` + *** -4. Import CometChat UIKit In your Dart code, import the CometChat UIKit package to access its features. Add the following import statement to your main.dart file: +**4. Import CometChat UIKit** + +In your Dart code, import the CometChat UIKit package to access its features. Add the following import statement to your `main.dart` file: + + ```dart main.dart - import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; - import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart'; //Optional: Include if you're using Audio/Video Calling +import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; +import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart'; // Optional: Include if you're using Audio/Video Calling ``` + + *** @@ -129,64 +233,153 @@ platform :ios, '12.0' Before using any features from the CometChat UI Kit, initialize it with your app credentials. -1. **Import & Configure UIKit Settings** You can store your app credentials (App ID, Auth Key, Region) in a dedicated configuration file and load them dynamically in your app. - - **Example Configuration File:** - - ```dart cometchat_config.dart - class CometChatConfig { - static const String appId = "APP_ID"; // Replace with your App ID - static const String region = "REGION"; // Replace with your App Region - static const String authKey = "AUTH_KEY"; // Replace with your Auth Key - } - ``` - - **Initialization Code:** - - ```dart main.dart - import 'cometchat_config.dart'; - - UIKitSettings uiKitSettings = (UIKitSettingsBuilder() - ..subscriptionType = CometChatSubscriptionType.allUsers - ..autoEstablishSocketConnection = true - ..region = CometChatConfig.region - ..appId = CometChatConfig.appId - ..authKey = CometChatConfig.authKey - ..extensions = CometChatUIKitChatExtensions.getDefaultExtensions() //Replace this with empty array, if you want to disable all extensions - ..callingExtension = CometChatCallingExtension(); //Optional: Include if you're using Audio/Video Calling - ).build(); - - CometChatUIKit.init( - uiKitSettings: uiKitSettings, - onSuccess: (successMessage) async { - debugPrint('CometChat Initialized'); - // You can now log in the user - }, - onError: (error) { - debugPrint('CometChat Initialization error'); - }, - ); - ``` - - > Store your CometChat credentials in a config file to simplify environment management and avoid hardcoding. + + +You must call `CometChatUIKit.init()` before rendering any UI Kit widgets or calling any SDK methods. Initialization must complete before login. + + + +**1. Import & Configure UIKit Settings** + +You can store your app credentials (App ID, Auth Key, Region) in a dedicated configuration file and load them dynamically in your app. + +**Example Configuration File:** + + + +```dart cometchat_config.dart +class CometChatConfig { + static const String appId = "APP_ID"; // Replace with your App ID + static const String region = "REGION"; // Replace with your App Region + static const String authKey = "AUTH_KEY"; // Replace with your Auth Key +} +``` + + + +**Initialization Code:** + + + +```dart main.dart +import 'package:flutter/material.dart'; +import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; +import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart'; // Optional +import 'cometchat_config.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + title: 'CometChat UI Kit', + theme: ThemeData( + colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), + useMaterial3: true, + ), + home: const Home(), + ); + } +} + +class Home extends StatelessWidget { + const Home({super.key}); + + Future _initializeAndLogin() async { + final settings = UIKitSettingsBuilder() + ..subscriptionType = CometChatSubscriptionType.allUsers + ..autoEstablishSocketConnection = true + ..appId = CometChatConfig.appId + ..region = CometChatConfig.region + ..authKey = CometChatConfig.authKey + ..extensions = CometChatUIKitChatExtensions.getDefaultExtensions() // Replace with empty array to disable extensions + ..callingExtension = CometChatCallingExtension(); // Optional: Include if using Audio/Video Calling + + await CometChatUIKit.init( + uiKitSettings: settings.build(), + onSuccess: (successMessage) { + debugPrint('✅ CometChat Initialized'); + }, + onError: (error) { + debugPrint('❌ CometChat Initialization error: $error'); + }, + ); + } + + @override + Widget build(BuildContext context) { + return FutureBuilder( + future: _initializeAndLogin(), + builder: (ctx, snap) { + if (snap.connectionState != ConnectionState.done) { + return const Scaffold( + body: SafeArea( + child: Center(child: CircularProgressIndicator()), + ), + ); + } + if (snap.hasError) { + return Scaffold( + body: SafeArea( + child: Center( + child: Text( + 'Error starting app:\n${snap.error}', + textAlign: TextAlign.center, + ), + ), + ), + ); + } + return const LoginScreen(); // Navigate to your login screen + }, + ); + } +} +``` + + + + + +Store your CometChat credentials in a config file to simplify environment management and avoid hardcoding sensitive information. + + + + + +**Auth Key** is for development/testing only. In production, generate **Auth Tokens** on your server using the REST API and pass them to the client. Never expose Auth Keys in production client code. + + *** ### **Step 4: Login to UI Kit** -Once the UI Kit is initialized, authenticate your user using the `login()` method. You’ll receive a `User` object upon success. +Once the UI Kit is initialized, authenticate your user using the `login()` method. You'll receive a `User` object upon success. + + ```dart main.dart CometChatUIKit.login( - "cometchat-uid-1", // Replace with a valid UID + "cometchat-uid-1", // Replace with a valid UID onSuccess: (user) { - debugPrint('CometChat LoggedIn success'); + debugPrint('✅ CometChat LoggedIn success: ${user.name}'); + // Navigate to your chat screen }, onError: (error) { - debugPrint('CometChat LoggedIn error'); + debugPrint('❌ CometChat LoggedIn error: $error'); }, ); ``` + + + +**Test Users:** You can test using any of the following pre-generated users: @@ -196,47 +389,99 @@ You can test using any of the following pre-generated users: * `cometchat-uid-4` * `cometchat-uid-5` -> For more information, refer to the documentation on [Init](/ui-kit/flutter/methods#init) and [Login](/ui-kit/flutter/methods#login-using-auth-key). + + +For more information, refer to the documentation on [Init](/ui-kit/flutter/methods#init) and [Login](/ui-kit/flutter/methods#login-using-auth-key). -#### **Example: Initialization and Login Combined** + +**Example: Initialization and Login Combined** + + + ```dart main.dart +import 'package:flutter/material.dart'; +import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; +import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart'; import 'cometchat_config.dart'; -void main() { - UIKitSettings uiKitSettings = (UIKitSettingsBuilder() +void main() => runApp(const MyApp()); + +class MyApp extends StatelessWidget { + const MyApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + title: 'CometChat UI Kit', + theme: ThemeData( + colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), + useMaterial3: true, + ), + home: const Home(), + ); + } +} + +class Home extends StatelessWidget { + const Home({super.key}); + + Future _initializeAndLogin() async { + final settings = UIKitSettingsBuilder() ..subscriptionType = CometChatSubscriptionType.allUsers ..autoEstablishSocketConnection = true - ..region = CometChatConfig.region ..appId = CometChatConfig.appId + ..region = CometChatConfig.region ..authKey = CometChatConfig.authKey - ..extensions = CometChatUIKitChatExtensions.getDefaultExtensions() //Replace this with empty array, if you want to disable all extensions - ..callingExtension = CometChatCallingExtension(); //Optional: Include if you're using Audio/Video Calling - ).build(); - - CometChatUIKit.init( - uiKitSettings: uiKitSettings, - onSuccess: (successMessage) async { - debugPrint('CometChat Initialized'); - - CometChatUIKit.login( - "cometchat-uid-1", - onSuccess: (user) { - debugPrint('CometChat LoggedIn success'); - }, - onError: (error) { - debugPrint('CometChat LoggedIn error'); - }, - ); - }, - onError: (error) { - debugPrint('CometChat Initialization error'); - }, - ); + ..extensions = CometChatUIKitChatExtensions.getDefaultExtensions() + ..callingExtension = CometChatCallingExtension(); + + await CometChatUIKit.init(uiKitSettings: settings.build()); + await CometChatUIKit.login( + 'cometchat-uid-1', + onSuccess: (_) => debugPrint('✅ Login Successful'), + onError: (err) => throw Exception('Login Failed: $err'), + ); + } + + @override + Widget build(BuildContext context) { + return FutureBuilder( + future: _initializeAndLogin(), + builder: (ctx, snap) { + if (snap.connectionState != ConnectionState.done) { + return const Scaffold( + body: SafeArea( + child: Center(child: CircularProgressIndicator()), + ), + ); + } + if (snap.hasError) { + return Scaffold( + body: SafeArea( + child: Center( + child: Text( + 'Error starting app:\n${snap.error}', + textAlign: TextAlign.center, + ), + ), + ), + ); + } + return const ConversationsPage(); // Your main chat screen + }, + ); + } } ``` + + + + -> Extract credentials into a separate file (`cometchat_config.dart`) for better maintainability. +Extract credentials into a separate file (`cometchat_config.dart`) for better maintainability. + + *** @@ -252,12 +497,12 @@ Integrate a conversation view that suits your application's **UX requirements**. **Highlights:** -* **Compact Layout** – Uses `Navigator.push()` for mobile-first navigation. -* **One-to-One & Group Chats** – Built-in support for private and group conversations. -* **Real-Time Messaging** – Message list and view auto-refresh with CometChat events. -* **State Persistence** – Session-aware updates across screens and app restarts. -* **Mobile-First UI** – Optimized widgets that adapt to different screen sizes. -* **Extremely Customizable** – Modify styles, themes, and components easily. +* **Compact Layout** – Uses `Navigator.push()` for mobile-first navigation +* **One-to-One & Group Chats** – Built-in support for private and group conversations +* **Real-Time Messaging** – Message list and view auto-refresh with CometChat events +* **State Persistence** – Session-aware updates across screens and app restarts +* **Mobile-First UI** – Optimized widgets that adapt to different screen sizes +* **Extremely Customizable** – Modify styles, themes, and components easily @@ -265,9 +510,9 @@ Integrate a conversation view that suits your application's **UX requirements**. **Use When:** -* You want a **clean navigation experience** for multiple chat sessions. -* Your Flutter app supports **both direct and group messaging**. -* You prefer a **stack-based routing approach** using `Navigator`. +* You want a **clean navigation experience** for multiple chat sessions +* Your Flutter app supports **both direct and group messaging** +* You prefer a **stack-based routing approach** using `Navigator` [Integrate Conversation List + Message View](./flutter-conversation) @@ -279,11 +524,11 @@ Integrate a conversation view that suits your application's **UX requirements**. **Highlights:** -* **Single Screen Chat** – Use `CometChatMessages` widget with preselected user/group. -* **No Conversation List** – Start with just the message screen. -* **Ideal for support & contextual chat** – Ticket-based or user-to-agent communication. -* **Simplified Routing** – Pass user/group as route argument. -* **Real-Time Communication** – Auto-updates messages and statuses. +* **Single Screen Chat** – Use `CometChatMessageList` widget with preselected user/group +* **No Conversation List** – Start with just the message screen +* **Ideal for support & contextual chat** – Ticket-based or user-to-agent communication +* **Simplified Routing** – Pass user/group as route argument +* **Real-Time Communication** – Auto-updates messages and statuses @@ -291,9 +536,9 @@ Integrate a conversation view that suits your application's **UX requirements**. **Use When:** -* Your chat starts **from a specific user or group ID**. -* You want a **clean, focused chat interface**. -* Use case involves **support, onboarding, or one-time messages**. +* Your chat starts **from a specific user or group ID** +* You want a **clean, focused chat interface** +* Use case involves **support, onboarding, or one-time messages** [Integrate One-to-One / Group Chat](./flutter-one-to-one-chat) @@ -305,11 +550,11 @@ Integrate a conversation view that suits your application's **UX requirements**. **Highlights:** -* **Tab Navigation** – Use `BottomNavigationBar` to switch between core features. -* **Independent Screens** – Chats, Calls, Users, and Settings in dedicated widgets. -* **No Sidebar** – True mobile layout using bottom tabs, ideal for smaller devices. -* **Scalable** – Add new tabs like Profile, Notifications, or Help later. -* **Seamless UX** – Syncs chat state across tabs with minimal boilerplate. +* **Tab Navigation** – Use `BottomNavigationBar` to switch between core features +* **Independent Screens** – Chats, Calls, Users, and Settings in dedicated widgets +* **No Sidebar** – True mobile layout using bottom tabs, ideal for smaller devices +* **Scalable** – Add new tabs like Profile, Notifications, or Help later +* **Seamless UX** – Syncs chat state across tabs with minimal boilerplate @@ -317,9 +562,9 @@ Integrate a conversation view that suits your application's **UX requirements**. **Use When:** -* You need a **full-featured chat solution** in one UI. -* Your users require **structured navigation** between modules. -* Use cases like **support apps, business messengers, or social platforms**. +* You need a **full-featured chat solution** in one UI +* Your users require **structured navigation** between modules +* Use cases like **support apps, business messengers, or social platforms** [Integrate Tab-Based Chat](./flutter-tab-based-chat) @@ -327,31 +572,39 @@ Integrate a conversation view that suits your application's **UX requirements**. ## **Build Your Own Chat Experience** -**Best for:** Developers who need complete control over their chat interface, allowing customization of components, themes, and features to align with their app’s design and functionality. Whether you're enhancing an existing chat experience or building from scratch, this approach provides the flexibility to tailor every aspect to your needs. +**Best for:** Developers who need complete control over their chat interface, allowing customization of components, themes, and features to align with their app's design and functionality. Whether you're enhancing an existing chat experience or building from scratch, this approach provides the flexibility to tailor every aspect to your needs. **Recommended for:** -* Apps that require **a fully customized chat experience**. -* Developers who want to **extend functionalities and modify UI components**. -* Businesses integrating chat seamlessly into **existing platforms**. +* Apps that require **a fully customized chat experience** +* Developers who want to **extend functionalities and modify UI components** +* Businesses integrating chat seamlessly into **existing platforms** **Key Areas to Explore:** -* **[Flutter Sample App](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app)** – Fully functional sample applications to accelerate your development. -* **[Core Features](./core-features)** – Learn about messaging, real-time updates, and other essential capabilities. -* **[Components](./components-overview)** – Utilize prebuilt UI elements or customize them to fit your design. -* **[Themes](./theme-introduction)** – Adjust colors, fonts, and styles to match your branding. -* **[Build Your Own UI](/sdk/flutter/overview)** – Prefer a custom UI over our UI Kits? Explore our SDKs to create a tailored chat experience. +* **[Flutter Sample App](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app)** – Fully functional sample applications to accelerate your development +* **[Core Features](./core-features)** – Learn about messaging, real-time updates, and other essential capabilities +* **[Components](./components-overview)** – Utilize prebuilt UI elements or customize them to fit your design +* **[Themes](./theme-introduction)** – Adjust colors, fonts, and styles to match your branding +* **[Build Your Own UI](/sdk/flutter/overview)** – Prefer a custom UI over our UI Kits? Explore our SDKs to create a tailored chat experience *** ## **Next Steps** -Now that you’ve selected your **chat experience**, proceed to the **integration guide**: - -* **[Integrate Conversation List + Message](/ui-kit/flutter/flutter-conversation)** -* **[Integrate One-to-One Chat](/ui-kit/flutter/flutter-one-to-one-chat)** -* **[Integrate Tab-Based Chat](/ui-kit/flutter/flutter-tab-based-chat)** -* **[Advanced Customizations](/ui-kit/flutter/theme-introduction)** + + + Two-panel layout with conversation list and message view + + + Direct messaging interface for focused conversations + + + Multi-tab experience with chats, calls, users, and groups + + + Adjust colors, fonts, and styles to match your brand + + *** diff --git a/ui-kit/flutter/guide-block-unblock-user.mdx b/ui-kit/flutter/guide-block-unblock-user.mdx index 125c6185..5a7eed5c 100644 --- a/ui-kit/flutter/guide-block-unblock-user.mdx +++ b/ui-kit/flutter/guide-block-unblock-user.mdx @@ -1,8 +1,48 @@ --- title: "Implementing Block/Unblock User in Flutter with CometChat UIKit" sidebarTitle: "Block/Unblock User" +description: "Enable users to block and unblock other users for privacy and spam control" --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```dart +import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; + +// Block a user +await CometChatUIKit.blockUsers([user.uid]); + +// Unblock a user +await CometChatUIKit.unblockUsers([user.uid]); + +// Navigate to user info screen +Navigator.push( + context, + MaterialPageRoute( + builder: (_) => CometChatUserInfo(user: tappedUser), + ), +); + +// Check block status +if (user.blockedByMe) { + // Show unblock button +} else { + // Show block button +} +``` + +**Key Components & Methods:** +- `CometChatUIKit.blockUsers()` → SDK method to block users +- `CometChatUIKit.unblockUsers()` → SDK method to unblock users +- `CometChatUserInfo` → User profile screen +- `User.blockedByMe` → Block status property (SDK) + +**Sample Implementation:** [user_info/cometchat_user_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info.dart) + + + 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. ## Overview @@ -125,22 +165,19 @@ This guide covers only user-to-user blocking. For group moderation (ban or remov | 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) | Group-related actions (not blocking) | -## Next Steps & Further Reading - - - - -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) - - +## Next Steps + + + + Display and manage user lists + + + View messages with blocked user handling + + + Learn about group moderation features + + + Explore other implementation guides + \ 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 14ee8bc6..e7393ed1 100644 --- a/ui-kit/flutter/guide-call-log-details.mdx +++ b/ui-kit/flutter/guide-call-log-details.mdx @@ -1,8 +1,45 @@ --- title: "Managing & Viewing Call Logs in Your Flutter Chat App" sidebarTitle: "Call Logs" +description: "Display call history and detailed call information in your Flutter chat app" --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```dart +import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; + +// Display call logs list +CometChatCallLogs( + onItemClick: (callLog) { + Navigator.push( + context, + MaterialPageRoute( + builder: (context) => CometChatCallLogDetails(callLog: callLog), + ), + ); + }, +); + +// Show call log details +CometChatCallLogDetails( + callLog: callLog, +); +``` + +**Key Components:** +- `CometChatCallLogs` → [Docs](/ui-kit/flutter/call-logs) +- `CometChatCallLogDetails` → Call details screen +- `CallLog` → Call log data model (SDK) + +**Sample Implementation:** [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) + +**Requirements:** Call functionality enabled in CometChat dashboard, microphone/camera permissions + + + 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. ## Overview @@ -116,22 +153,19 @@ CometChatCallLogDetails( | 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 - - - - -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) - - +## Next Steps + + + + Learn more about the Call Logs component + + + Explore all calling capabilities + + + Add call buttons to your chat interface + + + Explore other implementation guides + \ 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 958fdd46..cdc64052 100644 --- a/ui-kit/flutter/guide-group-chat.mdx +++ b/ui-kit/flutter/guide-group-chat.mdx @@ -1,8 +1,55 @@ --- title: "Managing Groups in Flutter UI Kit" sidebarTitle: "Groups" +description: "Create groups, manage members, assign roles, and transfer ownership in your Flutter chat app" --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```dart +import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; + +// Create a group +await CometChat.createGroup( + group: Group( + guid: groupId, + name: groupName, + type: groupType, + password: groupPassword, + ), +); + +// Join a group +await CometChat.joinGroup(guid: groupId, groupType: groupType, password: password); + +// Add members +CometChatAddMembers(group: group); + +// Ban/unban members +CometChatBannedMembers(group: group); + +// Change member scope +CometChatChangeScope(group: group, user: user); + +// Transfer ownership +CometChatTransferOwnership(group: group); +``` + +**Key Components:** +- `CometChatGroups` → [Docs](/ui-kit/flutter/groups) +- `CometChatCreateGroup` → Group creation UI +- `CometChatGroupInfo` → Group info screen +- `CometChatAddMembers` → Add members UI +- `CometChatBannedMembers` → Banned members management +- `CometChatTransferOwnership` → Ownership transfer UI +- `JoinProtectedGroupUtils` → Password group join utility (sample app) + +**Sample Implementation:** [group_info/cometchat_group_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/group_info/cometchat_group_info.dart) + + + 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 @@ -203,18 +250,19 @@ CometChatTransferOwnership( | Change scope | `CometChatChangeScope` | `group_info/cometchat_group_info.dart` | | Transfer ownership | `CometChatTransferOwnership` | `transfer_ownership/cometchat_transfer_ownership.dart` | -## Next Steps & Further Reading - - - -Explore the working implementation in our official sample app. - -[View on GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) - - - -Get the full UI Kit source for deeper customization. - -[View on GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/chat_uikit) - +## Next Steps + + + + Learn more about the Groups component + + + Display and manage group members + + + View group conversations + + + Explore other implementation guides + diff --git a/ui-kit/flutter/guide-message-agentic-flow.mdx b/ui-kit/flutter/guide-message-agentic-flow.mdx index acbb3788..545f64be 100644 --- a/ui-kit/flutter/guide-message-agentic-flow.mdx +++ b/ui-kit/flutter/guide-message-agentic-flow.mdx @@ -1,8 +1,57 @@ --- title: "AI Agent Integration" sidebarTitle: "AI Agent Integration" +description: "Integrate AI agents with chat history, contextual responses, and seamless handoffs in your Flutter app" --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```dart +import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; + +// Check if user is an AI agent +bool isUserAgentic() { + return widget.user?.role == AIConstants.aiRole; +} + +// AI Assistant chat screen +AIAssistantChatScreen( + user: aiUser, + group: group, + parentMessage: message, + isHistory: true, +); + +// AI chat history +CometChatAIAssistantChatHistory( + user: widget.user, + group: widget.group, + onNewChatButtonClicked: () => onNewChatClicked(true), + onMessageClicked: (message) => navigateToThread(message), +); + +// Custom AI bubble styling +CometChatAiAssistantBubbleStyle( + backgroundColor: Colors.transparent, + border: Border.all(color: Colors.blueAccent), + textColor: Color(0xFF141414), +); +``` + +**Key Components:** +- `CometChatMessageList` → [Docs](/ui-kit/flutter/message-list) +- `CometChatMessageComposer` → [Docs](/ui-kit/flutter/message-composer) +- `CometChatMessageHeader` → [Docs](/ui-kit/flutter/message-header) +- `CometChatAIAssistantChatHistory` → [Docs](/ui-kit/flutter/ai-assistant-chat-history) +- `CometChatAiAssistantBubbleStyle` → AI bubble styling +- `AIConstants.aiRole` → AI role constant + +**Sample Implementation:** Custom AI Assistant chat screen (see guide for full implementation) + + + Enable intelligent conversational AI capabilities in your Android app using CometChat UIKit v5 with AI Agent integration: - **AI Assistant Chat History** @@ -396,4 +445,23 @@ class MyApp extends StatelessWidget { | Feature | Implementation | UI Component | |:-----------------------|:-------------------------------------------- |:------------------------| | AI Chat | `AIAssistantChatScreen` | Full chat screen | -| Chat History | `CometChatAIAssistantChatHistory` | Chat history screen | \ No newline at end of file +| Chat History | `CometChatAIAssistantChatHistory` | Chat history screen | + +--- + +## Next Steps + + + + Explore all AI-powered features + + + Learn about message display and management + + + Compose messages with AI assistance + + + Explore other implementation guides + + \ 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 ed8f8332..245dbbf3 100644 --- a/ui-kit/flutter/guide-message-privately.mdx +++ b/ui-kit/flutter/guide-message-privately.mdx @@ -1,8 +1,50 @@ --- title: "Message a User Privately from a Group Chat" sidebarTitle: "Message Privately" +description: "Initiate private one-on-one chats with group members directly from group chat" --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```dart +import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; + +// Navigate to user info from group chat +IconButton( + icon: Icon(Icons.info_outline), + onPressed: () { + Navigator.push( + context, + MaterialPageRoute( + builder: (context) => CometChatUserInfo(user: user), + ), + ); + }, +); + +// Start private chat with user +ElevatedButton( + onPressed: () { + PageManager().navigateToMessages( + context: context, + user: user, + ); + }, + child: Text('Message'), +); +``` + +**Key Components:** +- `CometChatUserInfo` → User profile screen +- `CometChatMessageList` → [Docs](/ui-kit/flutter/message-list) +- `PageManager` → Navigation utility (sample app) + +**Sample Implementation:** [user_info/cometchat_user_info.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/user_info/cometchat_user_info.dart) + + + Learn how to initiate a private one-on-one chat with a group member directly from a group chat screen. ## Overview @@ -103,22 +145,19 @@ ElevatedButton( | 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 - - - - -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) - - +## Next Steps + + + + Display and manage group lists + + + View and manage group members + + + Display messages in private chats + + + Explore other implementation guides + \ 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 8ec4b682..c337f3fc 100644 --- a/ui-kit/flutter/guide-new-chat.mdx +++ b/ui-kit/flutter/guide-new-chat.mdx @@ -1,8 +1,52 @@ --- title: "New Chat / Create Conversation in Your Flutter Chat App" sidebarTitle: "New Chat" +description: "Enable users to start one-on-one or group chats with a searchable contact list" --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```dart +import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; + +// Add avatar menu with "Create Conversation" option +PopupMenuButton( + icon: CometChatAvatar( + image: CometChatUIKit.loggedInUser?.avatar, + name: CometChatUIKit.loggedInUser?.name, + ), + itemBuilder: (context) => [ + PopupMenuItem(value: '/Create', child: Text("Create Conversation")), + ], + onSelected: (value) { + if (value == '/Create') { + Navigator.push( + context, + MaterialPageRoute(builder: (context) => CometChatContacts()), + ); + } + }, +); + +// Handle user/group selection +CometChatUsers( + onItemTap: (context, user) => PageManager.navigateToMessages(context: context, user: user), +); +``` + +**Key Components:** +- `CometChatAvatar` → Avatar display widget +- `CometChatContacts` → Contact selection screen +- `CometChatUsers` → [Docs](/ui-kit/flutter/users) +- `CometChatGroups` → [Docs](/ui-kit/flutter/groups) +- `CometChatContactsController` → Tab switching controller (sample app) + +**Sample Implementation:** [contacts/cometchat_contacts_controller.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/contacts/cometchat_contacts_controller.dart) + + + 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. ## Overview @@ -146,22 +190,19 @@ void _onItemTap({required BuildContext context, User? user, Group? group}) { | 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 - - - - -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) - - +## Next Steps + + + + Display and search user lists + + + Display and manage group lists + + + View and manage conversation history + + + Explore other implementation guides + \ No newline at end of file diff --git a/ui-kit/flutter/guide-overview.mdx b/ui-kit/flutter/guide-overview.mdx index 609ddfba..89632411 100644 --- a/ui-kit/flutter/guide-overview.mdx +++ b/ui-kit/flutter/guide-overview.mdx @@ -1,8 +1,30 @@ --- -title: "Overview" +title: "Guides Overview" sidebarTitle: "Overview" +description: "Task-oriented feature guides for implementing specific capabilities in the Flutter UI Kit" --- -> This page indexes focused, task‑oriented feature guides for the Flutter UI Kit. Each guide shows how to implement a specific capability end‑to‑end using UI kit components. + +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +Available implementation guides for Flutter UI Kit: + +**Feature Guides:** +- [Threaded Messages](/ui-kit/flutter/guide-threaded-messages) → `CometChatThreadedMessageList` +- [Block/Unblock User](/ui-kit/flutter/guide-block-unblock-user) → `CometChatUIKit.blockUsers()` +- [New Chat](/ui-kit/flutter/guide-new-chat) → `CometChatContacts` +- [Message Privately](/ui-kit/flutter/guide-message-privately) → `CometChatUserInfo` +- [Group Management](/ui-kit/flutter/guide-group-chat) → `CometChatGroups` +- [Call Log Details](/ui-kit/flutter/guide-call-log-details) → `CometChatCallLogs` +- [AI Agent Integration](/ui-kit/flutter/guide-message-agentic-flow) → `CometChatAIAssistantChatHistory` + +**Sample App:** [GitHub Repository](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) + +Each guide provides end-to-end implementation with code examples and component references. + + +This page indexes focused, task‑oriented feature guides for the Flutter UI Kit. Each guide shows how to implement a specific capability end‑to‑end using UI kit components. ## When to Use These Guides @@ -18,6 +40,25 @@ Use these after finishing [Getting Started](/ui-kit/flutter/getting-started) and | [Message Privately](/ui-kit/flutter/guide-message-privately) | Start a direct 1:1 chat from a profile or list; optionally send an initial message to surface the conversation. | | [New Chat](/ui-kit/flutter/guide-new-chat) | Offer a unified discovery screen for users & groups and launch new chats quickly. | | [Threaded Messages](/ui-kit/flutter/guide-threaded-messages) | Enable threaded replies: open parent message context, browse replies, and compose within a focused thread. | -| [Call Log Details](/ui-kit/flutter/guide-call-log-details) | Provide a post‑call details screen with metadata, participants, history, and recordings for audit & support. | +| [AI Agent Integration](/ui-kit/flutter/guide-message-agentic-flow) | Integrate AI agents with chat history, contextual responses, and seamless handoffs. | Need another guide? Request one via the [Developer Community](http://community.cometchat.com/) or Support. + +--- + +## Next Steps + + + + Set up the Flutter UI Kit in your project + + + Explore all available UI components + + + Learn about core chat features + + + View complete working examples + + diff --git a/ui-kit/flutter/guide-threaded-messages.mdx b/ui-kit/flutter/guide-threaded-messages.mdx index 7e140d86..510f2dc6 100644 --- a/ui-kit/flutter/guide-threaded-messages.mdx +++ b/ui-kit/flutter/guide-threaded-messages.mdx @@ -1,8 +1,49 @@ --- title: "Threaded Messages" sidebarTitle: "Threaded Messages" +description: "Enable threaded replies in your Flutter chat app with focused sub-conversations" --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```dart +import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; + +// Enable thread replies in message list +CometChatMessageList( + onThreadRepliesClick: (BaseMessage message) { + Navigator.push( + context, + MaterialPageRoute( + builder: (_) => CometChatThread(parentMessage: message), + ), + ); + }, +); + +// Display threaded messages +CometChatThreadedMessageList( + parentMessageId: parentMessage.id, +); + +// Send threaded reply +CometChatMessageComposer( + parentMessageId: parentMessage.id, +); +``` + +**Key Components:** +- `CometChatMessageList` → [Docs](/ui-kit/flutter/message-list) +- `CometChatThreadedMessageList` → Displays threaded messages +- `CometChatMessageComposer` → [Docs](/ui-kit/flutter/message-composer) +- `CometChatThreadedHeader` → [Docs](/ui-kit/flutter/threaded-messages-header) + +**Sample Implementation:** [thread_screen/cometchat_thread.dart](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/thread_screen/cometchat_thread.dart) + + + 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 @@ -153,22 +194,19 @@ Ensures only relevant threaded messages are shown. | Send threaded message | `CometChatMessageComposer(parentMessageId)` | | Fetch thread replies | `MessagesRequestBuilder.setParentMessageId` | -## Next Steps & Further Reading - - - - -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) - - +## Next Steps + + + + Display and manage conversation messages + + + Compose and send messages with threading support + + + Display thread context and parent message + + + Explore other implementation guides + \ No newline at end of file diff --git a/ui-kit/flutter/overview.mdx b/ui-kit/flutter/overview.mdx index e1d04635..ea11a933 100644 --- a/ui-kit/flutter/overview.mdx +++ b/ui-kit/flutter/overview.mdx @@ -1,8 +1,39 @@ --- title: "CometChat UI Kit For Flutter" sidebarTitle: "Overview" +description: "Prebuilt Flutter widgets for chat, calling, and messaging with modular, customizable components for iOS and Android" --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```dart +// Install +flutter pub add cometchat_chat_uikit + +// Initialize (run once at app start) +UIKitSettings uiKitSettings = (UIKitSettingsBuilder() + ..appId = "YOUR_APP_ID" + ..region = "YOUR_REGION" + ..subscriptionType = CometChatSubscriptionType.allUsers +).build(); +CometChatUIKit.init(uiKitSettings: uiKitSettings); + +// Login +CometChatUIKit.login("UID"); + +// Show conversations +CometChatConversations() + +// Show messages +CometChatMessageList(user: user) // or group: group +``` + +**Required Credentials:** App ID, Region, Auth Key (dev) or Auth Token (prod) +**Get from:** [CometChat Dashboard](https://app.cometchat.com) → Your App → API & Auth Keys + + The **CometChat UI Kit** for Flutter is a powerful solution designed to seamlessly integrate chat functionality into applications. It provides a robust set of **prebuilt UI widgets** that are **modular, customizable, and highly scalable**, allowing developers to accelerate their development process with minimal effort. *** @@ -60,12 +91,91 @@ To begin, please follow the [Getting Started](/ui-kit/flutter/getting-started) g *** -## **Next Steps for Developers** +## **Key Features** + +### **Comprehensive Widget Library** + +The UI Kit includes a complete set of widgets for building chat experiences: + +* **CometChatConversations** – Display recent conversations with users and groups +* **CometChatMessageList** – Full-featured messaging interface with real-time updates +* **CometChatMessageComposer** – Input field for sending text, media, and attachments +* **CometChatMessageHeader** – Conversation header with user/group info and actions +* **CometChatUsers** – Browse and search users +* **CometChatGroups** – Manage and join groups +* **CometChatGroupMembers** – View and manage group participants +* **Calling Components** – Voice and video calling widgets + +### **Built-in Chat Logic** + +Each widget comes with integrated CometChat SDK functionality: + +* Real-time message delivery and updates +* Typing indicators and read receipts +* User presence and status +* Message reactions and threading +* File and media sharing +* Push notifications support + +### **Extensive Customization** + +Tailor the UI to match your brand: + +* **Theming** – Customize colors, fonts, and spacing +* **Styling** – Override default styles for any component +* **Templates** – Create custom message bubble layouts +* **Formatters** – Add mentions, shortcuts, and URL previews +* **Configurations** – Control feature availability and behavior + +*** + +## **Architecture** + +The CometChat UI Kit for Flutter is built on top of the [CometChat Flutter SDK](/sdk/flutter/overview) and follows a modular architecture: + +``` +Your Flutter App + ↓ +CometChat UI Kit (Widgets) + ↓ +CometChat Flutter SDK (Core Chat Logic) + ↓ +CometChat Platform +``` + +This layered approach means: + +* **Widgets handle UI** – Rendering, user interactions, animations +* **SDK handles logic** – Message delivery, real-time events, data management +* **Platform handles infrastructure** – Scalability, reliability, security + +*** + +## **Supported Platforms** + +The Flutter UI Kit works seamlessly across: -1. **Learn the Basics** – [Key Concepts](/fundamentals/key-concepts). -2. **Follow the Setup Guide** – [Flutter Integration Guide](/ui-kit/flutter/getting-started) -3. **Customize UI** – Adjust styles, themes, and widgets. -4. **Test & Deploy** – Run tests and launch your chat app. +* **iOS** – iPhone and iPad (iOS 12.0+) +* **Android** – Phones and tablets (API level 21+) + +*** + +## **Next Steps** + + + + Install the UI Kit and build your first chat screen + + + Understand CometChat's core concepts and terminology + + + Explore all available widgets and their capabilities + + + Customize colors, fonts, and styles to match your brand + + *** @@ -73,27 +183,35 @@ 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. -[View on GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) +View on GitHub - + Access the complete UI Kit source code on GitHub. -[View on GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/chat_uikit) +View on GitHub + + + + + +UI design resources for customization and prototyping. + +View on Figma *** -## **💡 Need Help?** +## **Need Help?** If you need assistance, check out: From 83c918a7dcf07846d12c0b384471f3fc3acb755f Mon Sep 17 00:00:00 2001 From: Anshuman-cometchat Date: Fri, 13 Feb 2026 20:29:53 +0530 Subject: [PATCH 2/4] improvement : docs --- ui-kit/flutter/ai-assistant-chat-history.mdx | 48 ++++++++++++++++++- ui-kit/flutter/call-buttons.mdx | 47 +++++++++++++++++++ ui-kit/flutter/call-logs.mdx | 47 +++++++++++++++++++ ui-kit/flutter/color-resources.mdx | 42 +++++++++++++++++ ui-kit/flutter/component-styling.mdx | 45 ++++++++++++++++++ ui-kit/flutter/components-overview.mdx | 35 ++++++++++++++ ui-kit/flutter/conversations.mdx | 48 +++++++++++++++++++ ui-kit/flutter/group-members.mdx | 47 +++++++++++++++++++ ui-kit/flutter/groups.mdx | 48 +++++++++++++++++++ ui-kit/flutter/incoming-call.mdx | 49 ++++++++++++++++++++ ui-kit/flutter/localize.mdx | 40 +++++++++++++++- ui-kit/flutter/mentions-formatter-guide.mdx | 45 ++++++++++++++++++ ui-kit/flutter/message-bubble-styling.mdx | 47 ++++++++++++++++++- ui-kit/flutter/message-composer.mdx | 49 ++++++++++++++++++++ ui-kit/flutter/message-header.mdx | 49 ++++++++++++++++++++ ui-kit/flutter/message-list.mdx | 49 ++++++++++++++++++++ ui-kit/flutter/message-template.mdx | 45 ++++++++++++++++++ ui-kit/flutter/methods.mdx | 47 +++++++++++++++++++ ui-kit/flutter/multi-tab-chat-ui-guide.mdx | 46 ++++++++++++++++++ ui-kit/flutter/outgoing-call.mdx | 46 ++++++++++++++++++ ui-kit/flutter/property-changes.mdx | 35 +++++++++++++- ui-kit/flutter/search.mdx | 45 ++++++++++++++++++ ui-kit/flutter/shortcut-formatter-guide.mdx | 43 +++++++++++++++++ ui-kit/flutter/sound-manager.mdx | 39 ++++++++++++++++ ui-kit/flutter/theme-introduction.mdx | 47 +++++++++++++++++++ ui-kit/flutter/threaded-messages-header.mdx | 46 ++++++++++++++++++ ui-kit/flutter/upgrading-from-v4.mdx | 34 +++++++++++++- ui-kit/flutter/users.mdx | 48 +++++++++++++++++++ 28 files changed, 1251 insertions(+), 5 deletions(-) diff --git a/ui-kit/flutter/ai-assistant-chat-history.mdx b/ui-kit/flutter/ai-assistant-chat-history.mdx index f01aa81d..93eb0a5b 100644 --- a/ui-kit/flutter/ai-assistant-chat-history.mdx +++ b/ui-kit/flutter/ai-assistant-chat-history.mdx @@ -1,7 +1,29 @@ --- title: "AI Assistant Chat History" +description: "Display conversation history between users and AI assistants with structured message presentation in Flutter" --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```dart +import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; + +// For user chat with AI assistant +CometChatAIAssistantChatHistory(user: user) + +// For group chat with AI assistant +CometChatAIAssistantChatHistory(group: group) + +// With common props +CometChatAIAssistantChatHistory( + user: user, + assistantUID: "assistant_uid", +) +``` + + ## Overview The `AI Assistant Chat History` widget is a pre-built user interface widget designed to display the conversation history between users and an AI assistant within a chat application. It provides a structured and visually appealing way to present past interactions, making it easy for users to review previous messages and context. @@ -10,6 +32,10 @@ The `AI Assistant Chat History` widget is a pre-built user interface widget desi + +**Available via:** [UI Kits](/ui-kit/flutter/overview) | [SDK](/sdk/flutter/overview) + + ## Usage ### Integration @@ -430,4 +456,24 @@ CometChatAIAssistantChatHistory( -*** \ No newline at end of file +*** + + +--- + +## Next Steps + + + + Explore all AI-powered features + + + Display and manage messages within a conversation + + + Enable users to compose and send messages + + + Display and manage conversation lists + + diff --git a/ui-kit/flutter/call-buttons.mdx b/ui-kit/flutter/call-buttons.mdx index 0f404d59..0343ec0a 100644 --- a/ui-kit/flutter/call-buttons.mdx +++ b/ui-kit/flutter/call-buttons.mdx @@ -1,7 +1,30 @@ --- title: "Call Buttons" +description: "Initiate voice and video calls with customizable call buttons and call settings in Flutter" --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```dart +import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; + +// For user calls +CometChatCallButtons(user: user) + +// For group calls +CometChatCallButtons(group: group) + +// With common props +CometChatCallButtons( + user: user, + voiceCallIconUrl: "custom_voice_icon.png", + videoCallIconUrl: "custom_video_icon.png", +) +``` + + ## Overview The `CometChatCallButtons` is a [Widget](/ui-kit/flutter/components-overview#components) provides users with the ability to make calls, access call-related functionalities, and control call settings. Clicking this button typically triggers the call to be placed to the desired recipient. @@ -10,6 +33,10 @@ The `CometChatCallButtons` is a [Widget](/ui-kit/flutter/components-overview#com + +**Available via:** [UI Kits](/ui-kit/flutter/overview) | [SDK](/sdk/flutter/overview) + + ## Usage ### Integration @@ -277,3 +304,23 @@ CometChatCallButtons( All exposed properties of OutgoingCallConfiguration can be found under `Outgoing Call`. *** + + +--- + +## Next Steps + + + + Handle incoming voice and video calls + + + Initiate and manage outgoing calls + + + Display and manage call history + + + Explore all calling capabilities + + diff --git a/ui-kit/flutter/call-logs.mdx b/ui-kit/flutter/call-logs.mdx index 053d4db8..97cfb784 100644 --- a/ui-kit/flutter/call-logs.mdx +++ b/ui-kit/flutter/call-logs.mdx @@ -1,7 +1,30 @@ --- title: "Call Logs" +description: "Display and manage call history with call details, timestamps, and call actions in Flutter" --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```dart +import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; + +// Minimal usage +CometChatCallLogs() + +// With common props +CometChatCallLogs( + onItemTap: (callLog) { + // Handle call log selection + }, + callLogsRequestBuilder: CallLogsRequestBuilder() + ..limit = 30 + ..callType = "audio", +) +``` + + ## Overview `CometChatCallLogs` is a [Widget](/ui-kit/flutter/components-overview#components) that shows the list of Call Logs available. By default, names are shown for all listed users, along with their avatars if available. @@ -10,6 +33,10 @@ title: "Call Logs" + +**Available via:** [UI Kits](/ui-kit/flutter/overview) | [SDK](/sdk/flutter/overview) | [REST API](https://api-explorer.cometchat.com) + + The `CometChatCallLogs` widget is composed of the following BaseWidgets: | Widgets | Description | @@ -850,3 +877,23 @@ CometChatCallLogs( All exposed properties of `OutgoingCallConfiguration` can be found under [OutGoing Call](/ui-kit/flutter/outgoing-call#functionality). Properties marked with the 🛑 symbol are not accessible within the Configuration Object. *** + + +--- + +## Next Steps + + + + Initiate voice and video calls + + + Handle incoming voice and video calls + + + Initiate and manage outgoing calls + + + Learn how to display call log details + + diff --git a/ui-kit/flutter/color-resources.mdx b/ui-kit/flutter/color-resources.mdx index 9d9a8550..0fb20fc2 100644 --- a/ui-kit/flutter/color-resources.mdx +++ b/ui-kit/flutter/color-resources.mdx @@ -1,7 +1,29 @@ --- title: "Color Resources" +description: "Customize color palettes for primary, neutral, alert, and UI element colors in Flutter UI Kit" --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```dart +import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; + +// Create custom color palette +CometChatColorPalette customPalette = CometChatColorPalette( + primary: Color(0xFF6852D6), + neutral800: Color(0xFF141414), + background: Color(0xFFFFFFFF), + textPrimary: Color(0xFF141414), + error: Color(0xFFF44649), +); + +// Apply to theme +ThemeData(extensions: [customPalette]) +``` + + ## Introducing CometChatColorPalette: ### Your Theme Customization Toolbox! @@ -138,3 +160,23 @@ ThemeData( Ready to unleash your inner designer? Explore the `CometChatColorPalette` and create a stunning and personalized user experience! + + +--- + +## Next Steps + + + + Understand theming framework basics + + + Customize message bubble appearance + + + Style individual UI components + + + Explore all available components + + diff --git a/ui-kit/flutter/component-styling.mdx b/ui-kit/flutter/component-styling.mdx index 312a7ce3..91f80b59 100644 --- a/ui-kit/flutter/component-styling.mdx +++ b/ui-kit/flutter/component-styling.mdx @@ -1,8 +1,33 @@ --- title: "Elevate Your Chat Experience: Mastering Component Styling In CometChat" sidebarTitle: "Component Styling" +description: "Customize individual component styles including conversations, messages, users, and groups in Flutter UI Kit" --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```dart +import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; + +// Apply component-specific styles +ThemeData( + extensions: [ + CometChatConversationsStyle( + backgroundColor: Color(0xFFFFFFFF), + borderRadius: BorderRadius.circular(12), + ), + CometChatMessageListStyle( + backgroundColor: Color(0xFFF5F5F5), + ), + ], +); +``` + +**Customizable Components:** Conversations | Message List | Users | Groups | Message Composer + + ## Unlock the Power of Customization Tired of generic chat interfaces? With CometChat's powerful component styling capabilities, you can now create truly unique and visually stunning chat experiences. @@ -668,3 +693,23 @@ ThemeData( + + +--- + +## Next Steps + + + + Understand theming framework basics + + + Customize color palettes and schemes + + + Customize message bubble appearance + + + Explore all available components + + diff --git a/ui-kit/flutter/components-overview.mdx b/ui-kit/flutter/components-overview.mdx index d379c361..9b35a9b0 100644 --- a/ui-kit/flutter/components-overview.mdx +++ b/ui-kit/flutter/components-overview.mdx @@ -1,7 +1,22 @@ --- title: "Overview" +description: "Comprehensive guide to CometChat UI Kit component types, actions, and architecture in Flutter" --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +Key component types: +- **Base Widgets** → Building blocks (ListItem, Avatar, Badge) +- **Widgets** → Business logic + UI (Conversations, Users, Groups) +- **Composite Widgets** → Complex combinations (MessageList, ThreadedMessages) + +**Actions:** Predefined (built-in) and User-Defined (custom callbacks) + +**All Components:** [Conversations](/ui-kit/flutter/conversations) | [Message List](/ui-kit/flutter/message-list) | [Users](/ui-kit/flutter/users) | [Groups](/ui-kit/flutter/groups) + + CometChat's **UI Kit** is a set of pre-built UI Widget that allows you to easily craft an in-app chat with all the essential messaging features. ## Type of Widget @@ -45,3 +60,23 @@ Both Widget and Composite Widget have the ability to emit events. These events a ## Configurations Configurations offer the ability to customize the properties of each individual component within a Composite Component. If a Composite Component includes multiple Widget, each of these Widget will have its own set of properties that can be configured. This means multiple sets of configurations are available, one for each constituent component. This allows for fine-tuned customization of the Composite Component, enabling you to tailor its behavior and appearance to match specific requirements in a granular manner. + + +--- + +## Next Steps + + + + Display and manage conversation lists + + + Display and manage messages within a conversation + + + Core UI Kit methods and initialization + + + Handle real-time events and notifications + + diff --git a/ui-kit/flutter/conversations.mdx b/ui-kit/flutter/conversations.mdx index 32dc1707..dc7ff7f9 100644 --- a/ui-kit/flutter/conversations.mdx +++ b/ui-kit/flutter/conversations.mdx @@ -1,7 +1,31 @@ --- title: "Conversations" +description: "Display and manage conversation lists with real-time updates, read receipts, and typing indicators in Flutter" --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```dart +import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; + +// Minimal usage +CometChatConversations() + +// With common props +CometChatConversations( + onItemTap: (conversation) { + // Handle conversation selection + }, + conversationsRequestBuilder: ConversationsRequestBuilder() + ..conversationType = "user" + ..limit = 10, + selectionMode: SelectionMode.none, +) +``` + + ## Overview The `CometChatConversations` is a [Widget](/ui-kit/flutter/components-overview#components), That shows all conversations related to the currently logged-in user, @@ -10,6 +34,10 @@ The `CometChatConversations` is a [Widget](/ui-kit/flutter/components-overview#c + +**Available via:** [UI Kits](/ui-kit/flutter/overview) | [SDK](/sdk/flutter/overview) | [REST API](https://api-explorer.cometchat.com) + + ## Usage ### Integration @@ -1397,3 +1425,23 @@ CometChatConversations( *** + + +--- + +## Next Steps + + + + Display and manage messages within a conversation + + + Browse and select users to start conversations + + + Manage group conversations and memberships + + + Enable users to compose and send messages + + diff --git a/ui-kit/flutter/group-members.mdx b/ui-kit/flutter/group-members.mdx index 8ad574c0..9115c1f9 100644 --- a/ui-kit/flutter/group-members.mdx +++ b/ui-kit/flutter/group-members.mdx @@ -1,7 +1,30 @@ --- title: "Group Members" +description: "View and manage group members with role-based permissions, member actions, and real-time updates in Flutter" --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```dart +import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; + +// Minimal usage (requires group object) +CometChatGroupMembers(group: group) + +// With common props +CometChatGroupMembers( + group: group, + onItemTap: (groupMember) { + // Handle member selection + }, + groupMembersRequestBuilder: GroupMembersRequestBuilder(group.guid) + ..limit = 30, +) +``` + + ## Overview `CometChatGroupMembers` is a versatile [Widget](/ui-kit/flutter/components-overview#components) designed to showcase all users who are either added to or invited to a group, thereby enabling them to participate in group discussions, access shared content, and engage in collaborative activities. `CometChatGroupMembers` have the capability to communicate in real-time through messaging, voice and video calls, and various other interactions. Additionally, they can interact with each other, share files, and join calls based on the permissions established by the group administrator or owner. @@ -10,6 +33,10 @@ title: "Group Members" + +**Available via:** [UI Kits](/ui-kit/flutter/overview) | [SDK](/sdk/flutter/overview) | [REST API](https://api-explorer.cometchat.com) + + The `CometChatGroupMembers` widget is composed of the following BaseWidgets: | Widgets | Description | @@ -985,3 +1012,23 @@ Here is the complete example for reference: *** + + +--- + +## Next Steps + + + + Manage group conversations and memberships + + + Browse and select users to start conversations + + + Display and manage messages within a conversation + + + Display and manage conversation lists + + diff --git a/ui-kit/flutter/groups.mdx b/ui-kit/flutter/groups.mdx index a613f6f0..7901875a 100644 --- a/ui-kit/flutter/groups.mdx +++ b/ui-kit/flutter/groups.mdx @@ -1,7 +1,31 @@ --- title: "Groups" +description: "Display and manage group lists with search functionality, group types, and member management in Flutter" --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```dart +import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; + +// Minimal usage +CometChatGroups() + +// With common props +CometChatGroups( + onItemTap: (group) { + // Handle group selection + }, + groupsRequestBuilder: GroupsRequestBuilder() + ..limit = 30 + ..joinedOnly = false, + selectionMode: SelectionMode.none, +) +``` + + ## Overview `CometChatGroups` functions as a standalone [Widget](/ui-kit/flutter/components-overview#components) designed to create a screen displaying a list of groups, with the added functionality of enabling users to search for specific groups. Acting as a container widget, `CometChatGroups` encapsulates and formats the `CometChatListBase` and `CometChatGroupList` widgets without introducing any additional behavior of its own. @@ -10,6 +34,10 @@ title: "Groups" + +**Available via:** [UI Kits](/ui-kit/flutter/overview) | [SDK](/sdk/flutter/overview) | [REST API](https://api-explorer.cometchat.com) + + The `CometChatGroups` widget is composed of the following BaseWidget: | Widgets | Description | @@ -816,3 +844,23 @@ CometChatGroups( *** + + +--- + +## Next Steps + + + + View and manage members within a group + + + Display and manage conversation lists + + + Display and manage messages within a conversation + + + Browse and select users to start conversations + + diff --git a/ui-kit/flutter/incoming-call.mdx b/ui-kit/flutter/incoming-call.mdx index 41895e4a..6fc0b238 100644 --- a/ui-kit/flutter/incoming-call.mdx +++ b/ui-kit/flutter/incoming-call.mdx @@ -1,7 +1,32 @@ --- title: "Incoming Call" +description: "Handle incoming voice and video calls with accept/decline options and caller information in Flutter" --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```dart +import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; + +// Minimal usage (requires user and call objects) +CometChatIncomingCall(user: user, call: callObject) + +// With common props +CometChatIncomingCall( + user: user, + call: callObject, + onAccept: (call) { + // Handle call acceptance + }, + onDecline: (call) { + // Handle call decline + }, +) +``` + + ## Overview The `CometChatIncomingCall` is a [Widget](/ui-kit/flutter/components-overview#components) that serves as a visual representation when the user receives an incoming call, such as a voice call or video call, providing options to answer or decline the call. @@ -10,6 +35,10 @@ The `CometChatIncomingCall` is a [Widget](/ui-kit/flutter/components-overview#co + +**Available via:** [UI Kits](/ui-kit/flutter/overview) | [SDK](/sdk/flutter/overview) + + *** ## Usage @@ -375,3 +404,23 @@ CometChatIncomingCall( *** + + +--- + +## Next Steps + + + + Initiate and manage outgoing calls + + + Initiate voice and video calls + + + Display and manage call history + + + Explore all calling capabilities + + diff --git a/ui-kit/flutter/localize.mdx b/ui-kit/flutter/localize.mdx index 3b839900..bfe2431c 100644 --- a/ui-kit/flutter/localize.mdx +++ b/ui-kit/flutter/localize.mdx @@ -1,7 +1,25 @@ --- title: "Localize" +description: "Adapt UI Kit to different languages and regions with built-in localization support for 19 languages in Flutter" --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```dart +import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; + +// Set language +CometChatLocalize.setLanguage("es"); // Spanish + +// Get current language +String currentLang = CometChatLocalize.getLanguage(); + +// Supported languages: ar, de, en, es, fr, hi, hu, ja, ko, lt, ms, nl, pt, ru, sv, tr, zh +``` + + ## Overview CometChat UI Kit provides language localization to adapt to the language of a specific country or region. The CometChatLocalize class allows you to detect the language of your users based on their browser or device settings, and set the language accordingly. @@ -399,4 +417,24 @@ class MmCCLocalization extends cc.Translations { ### DateTimeFormatter By providing a custom implementation of the DateTimeFormatterCallback, you can globally configure how time and date values are displayed across all UI components in the CometChat UI Kit. This ensures consistent formatting for labels such as "Today", "Yesterday", "X minutes ago", and more, throughout the entire application. -For more detailed information and the full reference for the DateTimeFormatterCallback methods, refer to the DateTimeFormatterCallback methods section in the [CometChatUIKit class](/ui-kit/flutter/methods#dateformatter) \ No newline at end of file +For more detailed information and the full reference for the DateTimeFormatterCallback methods, refer to the DateTimeFormatterCallback methods section in the [CometChatUIKit class](/ui-kit/flutter/methods#dateformatter) + + +--- + +## Next Steps + + + + Customize UI Kit appearance and styling + + + Manage notification sounds and audio + + + Explore all available components + + + Set up and initialize the UI Kit + + diff --git a/ui-kit/flutter/mentions-formatter-guide.mdx b/ui-kit/flutter/mentions-formatter-guide.mdx index aa5989ca..cbdb447e 100644 --- a/ui-kit/flutter/mentions-formatter-guide.mdx +++ b/ui-kit/flutter/mentions-formatter-guide.mdx @@ -1,7 +1,32 @@ --- title: "Mentions Formatter" +description: "Format and style user mentions in messages with customizable appearance and click handling in Flutter" --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```dart +import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; + +// Use mentions formatter +CometChatMessageList( + user: user, + textFormatters: [ + CometChatMentionsFormatter( + style: CometChatMentionsStyle( + mentionTextColor: Color(0xFF6852D6), + mentionTextBackgroundColor: Color(0xFFE8E4FF), + ), + ), + ], +) +``` + +**Related:** [Message Composer](/ui-kit/flutter/message-composer) | [Message List](/ui-kit/flutter/message-list) + + ## Overview The `CometChatMentionsFormatter` class is a part of the CometChat UI Kit, a ready-to-use chat UI widget library for integrating CometChat into your Android applications. This class provides functionality to format mentions within text messages displayed in the chat interface. Mentions allow users to reference other users within a conversation, providing a convenient way to direct messages or involve specific participants. @@ -275,3 +300,23 @@ CometChatConversations( *** + + +--- + +## Next Steps + + + + Enable users to compose messages with mentions + + + Display messages with formatted mentions + + + Implement custom text shortcuts + + + Explore core messaging features + + diff --git a/ui-kit/flutter/message-bubble-styling.mdx b/ui-kit/flutter/message-bubble-styling.mdx index c3e519d0..1892d28c 100644 --- a/ui-kit/flutter/message-bubble-styling.mdx +++ b/ui-kit/flutter/message-bubble-styling.mdx @@ -1,8 +1,33 @@ --- title: "Customizing Message Bubbles" sidebarTitle: "Message Bubble Styling" +description: "Customize message bubble appearance for different message types with incoming and outgoing styles in Flutter" --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```dart +import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; + +// Customize outgoing message bubbles +CometChatOutgoingMessageBubbleStyle outgoingStyle = CometChatOutgoingMessageBubbleStyle( + backgroundColor: Color(0xFF6852D6), + borderRadius: BorderRadius.circular(12), +); + +// Customize incoming message bubbles +CometChatIncomingMessageBubbleStyle incomingStyle = CometChatIncomingMessageBubbleStyle( + backgroundColor: Color(0xFFF5F5F5), + borderRadius: BorderRadius.circular(12), +); + +// Apply to theme +ThemeData(extensions: [outgoingStyle, incomingStyle]) +``` + + When building chat applications, customizing the look and feel of message bubbles is often a significant challenge. Developers frequently encounter difficulties when they need to modify specific design elements, such as background colors or styles for particular message types. This complexity is amplified by the wide range of message bubbles available in the **CometChat Flutter UI Kit**. To simplify this process, the CometChat UI Kit provides two specialized classes: **CometChatOutgoingMessageBubbleStyle** and **CometChatIncomingMessageBubbleStyle**. These classes are designed to give developers fine-grained control over the appearance of message bubbles for **sent** and **received** messages, respectively. Both classes extend the `ThemeExtension` class, allowing customizations to be seamlessly applied through global theming or by explicitly passing style objects. @@ -771,4 +796,24 @@ ThemeData( - \ No newline at end of file + + + +--- + +## Next Steps + + + + Define custom message bubble structure + + + Display and manage messages + + + Customize color palettes and schemes + + + Understand theming framework basics + + diff --git a/ui-kit/flutter/message-composer.mdx b/ui-kit/flutter/message-composer.mdx index 201a42dd..525ff7d8 100644 --- a/ui-kit/flutter/message-composer.mdx +++ b/ui-kit/flutter/message-composer.mdx @@ -1,7 +1,32 @@ --- title: "Message Composer" +description: "Enable users to compose and send text, media, and custom messages with attachments and live reactions in Flutter" --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```dart +import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; + +// For user chat +CometChatMessageComposer(user: user) + +// For group chat +CometChatMessageComposer(group: group) + +// With common props +CometChatMessageComposer( + user: user, + onSendButtonTap: (message) { + // Handle message send + }, + disableTypingEvents: false, +) +``` + + ## Overview `CometChatMessageComposer` is a [Widget](/ui-kit/flutter/components-overview#components) that enables users to write and send a variety of messages, including text, image, video, and custom messages. @@ -12,6 +37,10 @@ Features such as **Live Reaction**, **Attachments**, and **Message Editing** are + +**Available via:** [UI Kits](/ui-kit/flutter/overview) | [SDK](/sdk/flutter/overview) + + `CometChatMessageComposer` is comprised of the following [Base Widgets](/ui-kit/flutter/components-overview#base-components): | Base Widgets | Description | @@ -643,3 +672,23 @@ CometChatMessageComposer( *** + + +--- + +## Next Steps + + + + Display and manage messages within a conversation + + + Customize message bubble appearance and behavior + + + Display conversation header with user/group info + + + Enable user mentions in messages + + diff --git a/ui-kit/flutter/message-header.mdx b/ui-kit/flutter/message-header.mdx index 6cddfc8a..56c7e181 100644 --- a/ui-kit/flutter/message-header.mdx +++ b/ui-kit/flutter/message-header.mdx @@ -1,7 +1,32 @@ --- title: "Message Header" +description: "Display conversation header with user/group info, typing indicators, and navigation controls in Flutter" --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```dart +import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; + +// For user chat +CometChatMessageHeader(user: user) + +// For group chat +CometChatMessageHeader(group: group) + +// With common props +CometChatMessageHeader( + user: user, + onBack: () { + // Handle back navigation + }, + hideBackButton: false, +) +``` + + ## Overview `CometChatMessageHeader` is a [Widget](/ui-kit/flutter/components-overview#components) that showcases the [User](/sdk/flutter/users-overview) or [Group](/sdk/flutter/groups-overview) details in the toolbar. Furthermore, it also presents a typing indicator and a back navigation button for ease of use. @@ -10,6 +35,10 @@ title: "Message Header" + +**Available via:** [UI Kits](/ui-kit/flutter/overview) | [SDK](/sdk/flutter/overview) + + The `CometChatMessageHeader` is comprised of the following components: | Components | Description | @@ -435,3 +464,23 @@ CometChatMessageHeader( *** + + +--- + +## Next Steps + + + + Display and manage messages within a conversation + + + Enable threaded conversations and replies + + + Enable users to compose and send messages + + + Display and manage conversation lists + + diff --git a/ui-kit/flutter/message-list.mdx b/ui-kit/flutter/message-list.mdx index 097a0164..548b02bd 100644 --- a/ui-kit/flutter/message-list.mdx +++ b/ui-kit/flutter/message-list.mdx @@ -1,7 +1,32 @@ --- title: "Message List" +description: "Display and manage messages with real-time updates, reactions, replies, and various message types in Flutter" --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```dart +import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; + +// For user chat +CometChatMessageList(user: user) + +// For group chat +CometChatMessageList(group: group) + +// With common props +CometChatMessageList( + user: user, + messagesRequestBuilder: MessagesRequestBuilder() + ..limit = 30 + ..hideReplies = false, + hideReceipts: false, +) +``` + + ## Overview `MessageList` is a [Composite Widget](/ui-kit/flutter/components-overview#composite-components) that displays a list of messages and effectively manages real-time operations. It includes various types of messages such as Text Messages, Media Messages, Stickers, and more. @@ -12,6 +37,10 @@ title: "Message List" + +**Available via:** [UI Kits](/ui-kit/flutter/overview) | [SDK](/sdk/flutter/overview) + + ## Usage ### Integration @@ -1010,3 +1039,23 @@ CometChatMessageList( *** + + +--- + +## Next Steps + + + + Enable users to compose and send messages + + + Display conversation header with user/group info + + + Customize message bubble appearance and behavior + + + Enable threaded conversations and replies + + diff --git a/ui-kit/flutter/message-template.mdx b/ui-kit/flutter/message-template.mdx index ddd2891d..8469954d 100644 --- a/ui-kit/flutter/message-template.mdx +++ b/ui-kit/flutter/message-template.mdx @@ -1,7 +1,32 @@ --- title: "Message Template" +description: "Define and customize message bubble structure, appearance, and behavior for different message types in Flutter" --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```dart +import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; + +// Create custom message template +CometChatMessageTemplate template = CometChatMessageTemplate( + type: "text", + category: CometChatMessageCategory.message, + contentView: (message, context, alignment) { + // Return custom content widget + }, +); + +// Use in MessageList +CometChatMessageList( + user: user, + templates: [template], +) +``` + + ## Overview A MessageTemplate provides you with the capability to define and customize both the structure and the behavior of the [MessageBubble](/ui-kit/flutter/message-bubble-styling). It acts as a schema or design blueprint for the creation of a variety of [MessageBubble](/ui-kit/flutter/message-bubble-styling) widgets, allowing you to manage the appearance and interactions of [MessageBubble](/ui-kit/flutter/message-bubble-styling) within your application effectively and consistently. @@ -785,3 +810,23 @@ Here is the complete example for reference: + + +--- + +## Next Steps + + + + Display and manage messages within a conversation + + + Customize message bubble appearance + + + Enable users to compose and send messages + + + Explore all available components + + diff --git a/ui-kit/flutter/methods.mdx b/ui-kit/flutter/methods.mdx index 9423a600..b0c073f6 100644 --- a/ui-kit/flutter/methods.mdx +++ b/ui-kit/flutter/methods.mdx @@ -1,7 +1,34 @@ --- title: "Methods" +description: "Core UI Kit methods for initialization, authentication, and message operations in Flutter" --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```dart +import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; + +// Initialize (run once at app start) +UIKitSettings uiKitSettings = (UIKitSettingsBuilder() + ..appId = "YOUR_APP_ID" + ..region = "YOUR_REGION" + ..subscriptionType = CometChatSubscriptionType.allUsers +).build(); +CometChatUIKit.init(uiKitSettings: uiKitSettings); + +// Login with UID +CometChatUIKit.login("UID"); + +// Login with Auth Token (production) +CometChatUIKit.loginWithAuthToken("AUTH_TOKEN"); + +// Logout +CometChatUIKit.logout(); +``` + + ## Overview The UI Kit's core function is to extend the [Chat SDK](/sdk/flutter/overview), essentially translating the raw data and functionality provided by the underlying methods into visually appealing and easy-to-use UI components. @@ -446,3 +473,23 @@ CometChatUIKit.sendCustomInteractiveMessage(interactiveMessageObject, onSuccess: *** + + +--- + +## Next Steps + + + + Handle real-time events and notifications + + + Explore all available components + + + Set up and initialize the UI Kit + + + Explore core messaging features + + diff --git a/ui-kit/flutter/multi-tab-chat-ui-guide.mdx b/ui-kit/flutter/multi-tab-chat-ui-guide.mdx index 949a0cc3..831ca1ab 100644 --- a/ui-kit/flutter/multi-tab-chat-ui-guide.mdx +++ b/ui-kit/flutter/multi-tab-chat-ui-guide.mdx @@ -1,7 +1,33 @@ --- title: "Multi Tab Chat UI Guide" +description: "Build a multi-tab chat interface with Conversations, Users, and Groups tabs in Flutter" --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```dart +import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; + +// Create tab-based UI +DefaultTabController( + length: 3, + child: Scaffold( + body: TabBarView( + children: [ + CometChatConversations(), + CometChatUsers(), + CometChatGroups(), + ], + ), + ), +) +``` + +**Components Used:** [Conversations](/ui-kit/flutter/conversations) | [Users](/ui-kit/flutter/users) | [Groups](/ui-kit/flutter/groups) + + This guide will help you create a multi-tab chat user interface using the cometchat\_chat\_uikit package in Flutter. The final UI will consist of three tabs: Conversations, Users, and Groups. @@ -117,3 +143,23 @@ class _MultiTabUIGuideExampleState extends State { + + +--- + +## Next Steps + + + + Display and manage conversation lists + + + Browse and select users + + + Manage group conversations + + + Set up and initialize the UI Kit + + diff --git a/ui-kit/flutter/outgoing-call.mdx b/ui-kit/flutter/outgoing-call.mdx index 2bbc3a3f..8ef356ab 100644 --- a/ui-kit/flutter/outgoing-call.mdx +++ b/ui-kit/flutter/outgoing-call.mdx @@ -1,7 +1,29 @@ --- title: "Outgoing Call" +description: "Initiate and manage outgoing voice and video calls with call controls and status feedback in Flutter" --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```dart +import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; + +// Minimal usage (requires user and call objects) +CometChatOutgoingCall(user: user, call: callObject) + +// With common props +CometChatOutgoingCall( + user: user, + call: callObject, + onCancel: (call) { + // Handle call cancellation + }, +) +``` + + ## Overview The `CometChatOutgoingCall` [Widget](/ui-kit/android/components-overview#components) is a visual representation of a user-initiated call, whether it's a voice or video call. It serves as an interface for managing outgoing calls, providing users with essential options to control the call experience. This Widget typically includes information about the call recipient, call controls for canceling the call, and feedback on the call status, such as indicating when the call is in progress. @@ -10,6 +32,10 @@ The `CometChatOutgoingCall` [Widget](/ui-kit/android/components-overview#compone + +**Available via:** [UI Kits](/ui-kit/flutter/overview) | [SDK](/sdk/flutter/overview) + + You can launch `CometChatOutgoingCall` directly using `Navigator.push`, or you can define it as a widget within the `build` method of your `State` class. ##### 1. Using Navigator to Launch `CometChatOutgoingCall` @@ -386,3 +412,23 @@ CometChatOutgoingCall( *** + + +--- + +## Next Steps + + + + Handle incoming voice and video calls + + + Initiate voice and video calls + + + Display and manage call history + + + Explore all calling capabilities + + diff --git a/ui-kit/flutter/property-changes.mdx b/ui-kit/flutter/property-changes.mdx index c38585b3..baf81c3f 100644 --- a/ui-kit/flutter/property-changes.mdx +++ b/ui-kit/flutter/property-changes.mdx @@ -1,7 +1,20 @@ --- title: "Property Changes" +description: "Reference guide for new and updated properties in Flutter UI Kit v5 components" --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +This page documents property changes from v4 to v5: +- **New Properties** → Added functionality and customization options +- **Updated Properties** → Changed behavior or types +- **Removed Properties** → Deprecated or replaced features + +See [Upgrading from v4](/ui-kit/flutter/upgrading-from-v4) for migration guide. + + ## Conversations ### New Properties @@ -452,4 +465,24 @@ title: "Property Changes" | outgoingAudioCallIcon | String? | Custom outgoing audio call icon URL (replaced by outgoingCallIcon widget). | | outgoingVideoCallIcon | String? | Custom outgoing video call icon URL (replaced by outgoingCallIcon widget). | | missedAudioCallIcon | String? | Custom missed audio call icon URL (replaced by missedCallIcon widget). | -| missedVideoCallIcon | String? | Custom missed video call icon URL (replaced by missedCallIcon widget). | \ No newline at end of file +| missedVideoCallIcon | String? | Custom missed video call icon URL (replaced by missedCallIcon widget). | + + +--- + +## Next Steps + + + + Complete migration guide from v4 to v5 + + + Explore all available components + + + Display and manage conversation lists + + + Display and manage messages + + diff --git a/ui-kit/flutter/search.mdx b/ui-kit/flutter/search.mdx index e4511c55..758e8e14 100644 --- a/ui-kit/flutter/search.mdx +++ b/ui-kit/flutter/search.mdx @@ -1,7 +1,28 @@ --- title: "Search" +description: "Search across conversations and messages with real-time filtering and customizable search scopes in Flutter" --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```dart +import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; + +// Minimal usage +CometChatSearch() + +// With common props +CometChatSearch( + onItemTap: (conversation, message) { + // Handle search result selection + }, + searchPlaceholder: "Search messages...", +) +``` + + ## Overview The `CometChatSearch` component is a powerful and customizable search interface that allows users to search across conversations and messages in real time. It supports a wide variety of filters, scopes, and customization options. `CometChatSearch` helps users find messages, conversations, media, and more through an intuitive and filterable search experience. It can be embedded in multiple contexts — as part of the conversation list, message header, or as a full-screen search experience. @@ -10,6 +31,10 @@ The `CometChatSearch` component is a powerful and customizable search interface + +**Available via:** [UI Kits](/ui-kit/flutter/overview) + + ## Usage ### Integration @@ -363,3 +388,23 @@ You can modify the date pattern of the chat history date separator to your requi Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source. To configure the existing Mentions look and feel check out [MentionsFormatter Guide](/ui-kit/flutter/mentions-formatter-guide) *** + + +--- + +## Next Steps + + + + Display and manage conversation lists + + + Display and manage messages within a conversation + + + Browse and select users to start conversations + + + Manage group conversations and memberships + + diff --git a/ui-kit/flutter/shortcut-formatter-guide.mdx b/ui-kit/flutter/shortcut-formatter-guide.mdx index efa1b70c..204c0bfd 100644 --- a/ui-kit/flutter/shortcut-formatter-guide.mdx +++ b/ui-kit/flutter/shortcut-formatter-guide.mdx @@ -1,7 +1,30 @@ --- title: "Shortcut Formatter" +description: "Implement custom text shortcuts and replacements in messages with the ShortcutFormatter in Flutter" --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```dart +import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; + +// Create custom shortcut formatter +class ShortcutFormatter extends CometChatTextFormatter { + // Define shortcuts (e.g., :smile: → 😊) +} + +// Use in MessageList +CometChatMessageList( + user: user, + textFormatters: [ShortcutFormatter()], +) +``` + +**Related:** [Message Composer](/ui-kit/flutter/message-composer) | [Message List](/ui-kit/flutter/message-list) + + ## Introduction The `ShortcutFormatter` class extends the `CometChatTextFormatter` class to provide a mechanism for handling shortcuts within messages. This guide will walk you through the process of using ShortcutFormatter to implement shortcut extensions in your CometChat application. @@ -428,3 +451,23 @@ class _ShortcutFormatterExampleState extends State { *** + + +--- + +## Next Steps + + + + Format and style user mentions + + + Enable users to compose messages + + + Display messages with formatted text + + + Customize message bubble structure + + diff --git a/ui-kit/flutter/sound-manager.mdx b/ui-kit/flutter/sound-manager.mdx index fd331755..2bbd48a0 100644 --- a/ui-kit/flutter/sound-manager.mdx +++ b/ui-kit/flutter/sound-manager.mdx @@ -1,7 +1,26 @@ --- title: "Sound Manager" +description: "Manage notification sounds and audio for messages and calls in Flutter UI Kit" --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```dart +import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; + +// Play default sounds +SoundManager().play(sound: Sound.incomingMessage); +SoundManager().play(sound: Sound.outgoingMessage); +SoundManager().play(sound: Sound.incomingCall); +SoundManager().play(sound: Sound.outgoingCall); + +// Play custom sound +SoundManager().play(sound: Sound.incomingMessage, customSound: "custom.mp3"); +``` + + ## Overview The SoundManager is a helper class responsible for managing and playing various types of audio in the CometChat UI Kit. This includes sound events for incoming and outgoing messages and calls. @@ -70,3 +89,23 @@ The table below lists down various Sound enum cases and the corresponding assets | incomingMessageFromOther | assets/sound/incoming\_message.wav | | outgoingCall | assets/sound/outgoing\_call.wav | | incomingCall | assets/sound/incoming\_call.wav | + + +--- + +## Next Steps + + + + Adapt UI Kit to different languages + + + Customize UI Kit appearance and styling + + + Core UI Kit methods and initialization + + + Explore all available components + + diff --git a/ui-kit/flutter/theme-introduction.mdx b/ui-kit/flutter/theme-introduction.mdx index a4f87496..15d6b9de 100644 --- a/ui-kit/flutter/theme-introduction.mdx +++ b/ui-kit/flutter/theme-introduction.mdx @@ -1,8 +1,35 @@ --- title: "Theming In CometChat Flutter UI Kit" sidebarTitle: "Introduction" +description: "Customize UI Kit appearance with color palettes, typography, and spacing for light and dark themes in Flutter" --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```dart +import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; + +// Apply custom theme +ThemeData theme = ThemeData( + extensions: [ + CometChatColorPalette( + primary: Color(0xFF6852D6), + background: Color(0xFFFFFFFF), + ), + CometChatTypography(), + CometChatSpacing(), + ], +); + +// Use in MaterialApp +MaterialApp(theme: theme, ...) +``` + +**Core Components:** Color Palette | Typography | Spacing + + CometChat's theming framework is a robust system that empowers developers to define the **look and feel** of their applications with precision and consistency. It follows three essential design system principles: **Color**, **Typography**, and **Shape**. These principles guide the customization of various UI components. @@ -127,3 +154,23 @@ Spacing plays a key role in modern UI design by improving clarity, readability, * **Ensure** Contrast: Follow accessibility guidelines to maintain a minimum contrast ratio. * **Consistency**: Use a consistent color palette across all components. * **Adaptability**: Test your theme in various scenarios, such as low-light and high-contrast environments. + + +--- + +## Next Steps + + + + Customize color palettes and schemes + + + Customize message bubble appearance + + + Style individual UI components + + + Adapt UI Kit to different languages + + diff --git a/ui-kit/flutter/threaded-messages-header.mdx b/ui-kit/flutter/threaded-messages-header.mdx index 5d92d918..34ba66ec 100644 --- a/ui-kit/flutter/threaded-messages-header.mdx +++ b/ui-kit/flutter/threaded-messages-header.mdx @@ -1,7 +1,29 @@ --- title: "Threaded Messages Header" +description: "Display and manage threaded message replies with parent message context in Flutter" --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```dart +import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; + +// Minimal usage (requires parent message) +CometChatThreadedMessages(parentMessage: parentMessage) + +// With common props +CometChatThreadedMessages( + parentMessage: parentMessage, + onBack: () { + // Handle back navigation + }, + hideBackButton: false, +) +``` + + ## Overview ThreadedMessages is a [Composite Widget](/ui-kit/flutter/components-overview#composite-components) that displays all replies made to a particular message in a conversation. By default, the parent message will be displayed at the top, the message composer will be at the bottom and between them a message list will contain all replies. @@ -10,6 +32,10 @@ ThreadedMessages is a [Composite Widget](/ui-kit/flutter/components-overview#com + +**Available via:** [UI Kits](/ui-kit/flutter/overview) | [SDK](/sdk/flutter/overview) + + ThreadedMessages is composed of the following widgets: | Widget | Description | @@ -238,3 +264,23 @@ CometChatThreadedHeader( #### Templates The template method is used to configure and set a list of templates for message bubbles. It allows for dynamic customization of message appearance, content, or other predefined settings based on the templates provided. This method can be called to update or apply a new set of templates to the message handling system. + + +--- + +## Next Steps + + + + Display and manage messages within a conversation + + + Display conversation header with user/group info + + + Enable users to compose and send messages + + + Learn how to implement threaded messages + + diff --git a/ui-kit/flutter/upgrading-from-v4.mdx b/ui-kit/flutter/upgrading-from-v4.mdx index c2e9183e..1bcf7667 100644 --- a/ui-kit/flutter/upgrading-from-v4.mdx +++ b/ui-kit/flutter/upgrading-from-v4.mdx @@ -1,8 +1,20 @@ --- title: "Upgrading From V4" +description: "Migration guide for upgrading from CometChat Flutter UI Kit v4 to v5 with modular components" --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** +**Key Changes in v5:** +- Composite components → Modular components (Conversations, Message List, Message Composer) +- Simplified styling with component-level customization +- Cleaner prop structure without complex configurations +- [Sample app](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) replicates v4 functionality + +**Migration Path:** Replace composite components with modular ones + customize via props + ## Introduction @@ -135,4 +147,24 @@ Custom view properties have undergone a comprehensive overhaul to ensure consist This consistent naming convention makes it easier for developers to understand and apply customizations across various components, streamlining the development process. -For a comprehensive overview of newly added, renamed, and removed properties, refer to the [Property Changes](/ui-kit/flutter/property-changes) Documentation. \ No newline at end of file +For a comprehensive overview of newly added, renamed, and removed properties, refer to the [Property Changes](/ui-kit/flutter/property-changes) Documentation. + + +--- + +## Next Steps + + + + Review all property changes in v5 + + + Set up and initialize the UI Kit + + + Explore all available components + + + Reference implementation for v5 + + diff --git a/ui-kit/flutter/users.mdx b/ui-kit/flutter/users.mdx index c8324ee6..ecfaa0a0 100644 --- a/ui-kit/flutter/users.mdx +++ b/ui-kit/flutter/users.mdx @@ -1,7 +1,31 @@ --- title: "Users" +description: "Browse and select users with search functionality, online status indicators, and customizable user lists in Flutter" --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```dart +import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; + +// Minimal usage +CometChatUsers() + +// With common props +CometChatUsers( + onItemTap: (user) { + // Handle user selection + }, + usersRequestBuilder: UsersRequestBuilder() + ..limit = 30 + ..friendsOnly = false, + selectionMode: SelectionMode.none, +) +``` + + ## Overview The `CometChatUsers` is a [Widget](/ui-kit/flutter/components-overview#components), showcasing an accessible list of all available users. It provides an integral search functionality, allowing you to locate any specific user swiftly and easily. For each user listed, the widget displays the user's name by default, in conjunction with their avatar when available. Furthermore, it includes a status indicator, visually informing you whether a user is currently online or offline. @@ -10,6 +34,10 @@ The `CometChatUsers` is a [Widget](/ui-kit/flutter/components-overview#component + +**Available via:** [UI Kits](/ui-kit/flutter/overview) | [SDK](/sdk/flutter/overview) | [REST API](https://api-explorer.cometchat.com) + + The `CometChatUsers` widget is composed of the following Base Widgets: | Widgets | Description | @@ -756,3 +784,23 @@ CometChatUsers( *** + + +--- + +## Next Steps + + + + Manage group conversations and memberships + + + Display and manage conversation lists + + + Display and manage messages within a conversation + + + View and manage members within a group + + From 6fa426b8067cd45952c58e2c5fb88afb90f41d1f Mon Sep 17 00:00:00 2001 From: Anshuman-cometchat Date: Fri, 13 Feb 2026 20:41:18 +0530 Subject: [PATCH 3/4] fix : broken links --- ui-kit/flutter/call-logs.mdx | 4 ++-- ui-kit/flutter/group-members.mdx | 4 ++-- ui-kit/flutter/groups.mdx | 4 ++-- ui-kit/flutter/message-composer.mdx | 4 ++-- ui-kit/flutter/message-header.mdx | 2 +- ui-kit/flutter/users.mdx | 4 ++-- 6 files changed, 11 insertions(+), 11 deletions(-) diff --git a/ui-kit/flutter/call-logs.mdx b/ui-kit/flutter/call-logs.mdx index 97cfb784..94e3ae2a 100644 --- a/ui-kit/flutter/call-logs.mdx +++ b/ui-kit/flutter/call-logs.mdx @@ -41,8 +41,8 @@ The `CometChatCallLogs` widget is composed of the following BaseWidgets: | Widgets | Description | | --------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [CometChatListBase](/ui-kit/flutter/list-base) | `CometChatListBase` is a container widget featuring a title, customizable background options, and a dedicated list widget for seamless integration within your application's interface. | -| [CometChatListItem](/ui-kit/flutter/list-item) | This widget displays data retrieved from a CallLog object on a card, presenting a title and subtitle. | +| CometChatListBase | `CometChatListBase` is a container widget featuring a title, customizable background options, and a dedicated list widget for seamless integration within your application's interface. | +| CometChatListItem | This widget displays data retrieved from a CallLog object on a card, presenting a title and subtitle. | ## Usage diff --git a/ui-kit/flutter/group-members.mdx b/ui-kit/flutter/group-members.mdx index 9115c1f9..311124e2 100644 --- a/ui-kit/flutter/group-members.mdx +++ b/ui-kit/flutter/group-members.mdx @@ -41,8 +41,8 @@ The `CometChatGroupMembers` widget is composed of the following BaseWidgets: | Widgets | Description | | --------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [CometChatListBase](/ui-kit/flutter/list-base) | `CometChatListBase` serves as a container widget equipped with a title (navigationBar), search functionality (search-bar), background settings, and a container for embedding a list widget. | -| [CometChatListItem](/ui-kit/flutter/list-item) | This widget renders information extracted from a `User` object onto a tile, featuring a title, subtitle, leading widget, and trailing widget. experience, facilitating seamless navigation and interaction within the widget. | +| CometChatListBase | `CometChatListBase` serves as a container widget equipped with a title (navigationBar), search functionality (search-bar), background settings, and a container for embedding a list widget. | +| CometChatListItem | This widget renders information extracted from a `User` object onto a tile, featuring a title, subtitle, leading widget, and trailing widget. experience, facilitating seamless navigation and interaction within the widget. | *** diff --git a/ui-kit/flutter/groups.mdx b/ui-kit/flutter/groups.mdx index 7901875a..5c0b88d9 100644 --- a/ui-kit/flutter/groups.mdx +++ b/ui-kit/flutter/groups.mdx @@ -42,8 +42,8 @@ The `CometChatGroups` widget is composed of the following BaseWidget: | Widgets | Description | | --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| [CometChatListBase](/ui-kit/flutter/list-base) | `CometChatListBase` serves as a container widget equipped with a title (navigationBar), search functionality (search-bar), background settings, and a container for embedding a list view. | -| [CometChatListItem](/ui-kit/flutter/list-item) | This widget renders information extracted from a `Group` object onto a tile, featuring a title, subtitle, leading view, and trailing view. | +| CometChatListBase | `CometChatListBase` serves as a container widget equipped with a title (navigationBar), search functionality (search-bar), background settings, and a container for embedding a list view. | +| CometChatListItem | This widget renders information extracted from a `Group` object onto a tile, featuring a title, subtitle, leading view, and trailing view. | ## Usage diff --git a/ui-kit/flutter/message-composer.mdx b/ui-kit/flutter/message-composer.mdx index 525ff7d8..a13ab967 100644 --- a/ui-kit/flutter/message-composer.mdx +++ b/ui-kit/flutter/message-composer.mdx @@ -45,8 +45,8 @@ Features such as **Live Reaction**, **Attachments**, and **Message Editing** are | Base Widgets | Description | | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | -| [MessageInput](/ui-kit/flutter/message-input) | This provides a basic layout for the contents of this component, such as the TextField and buttons | -| [ActionSheet](/ui-kit/flutter/action-sheet) | The ActionSheet widget presents a list of options in either a list or grid mode, depending on the user's preference | +| MessageInput | This provides a basic layout for the contents of this component, such as the TextField and buttons | +| ActionSheet | The ActionSheet widget presents a list of options in either a list or grid mode, depending on the user's preference | ## Usage diff --git a/ui-kit/flutter/message-header.mdx b/ui-kit/flutter/message-header.mdx index 56c7e181..2a04298d 100644 --- a/ui-kit/flutter/message-header.mdx +++ b/ui-kit/flutter/message-header.mdx @@ -43,7 +43,7 @@ The `CometChatMessageHeader` is comprised of the following components: | Components | Description | | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | -| [ListItem Widget](/ui-kit/flutter/list-item) | This component’s widget consists of avatar, status indicator , title, and subtitle. The fields are then mapped with the SDK’s user, group class. | +| ListItem Widget | This component’s widget consists of avatar, status indicator , title, and subtitle. The fields are then mapped with the SDK’s user, group class. | | Back Button | BackButton that allows users to navigate back from the current activity or screen to the previous one | ## Usage diff --git a/ui-kit/flutter/users.mdx b/ui-kit/flutter/users.mdx index ecfaa0a0..438ef37d 100644 --- a/ui-kit/flutter/users.mdx +++ b/ui-kit/flutter/users.mdx @@ -42,8 +42,8 @@ The `CometChatUsers` widget is composed of the following Base Widgets: | Widgets | Description | | ------------------------------------------ | -------------------------------------------------------------------------------------------------------------------- | -| [ListBase](/ui-kit/flutter/list-base) | a reusable container widget having title, search box, customisable background and a List View | -| [ListItem](/ui-kit/flutter/list-item) | a widget that renders data obtained from a User object on a Tile having a title, subtitle, leading and trailing view | +| ListBase | a reusable container widget having title, search box, customisable background and a List View | +| ListItem | a widget that renders data obtained from a User object on a Tile having a title, subtitle, leading and trailing view | ## Usage From 0183f88308ef6cccffcaa2227058853915596c26 Mon Sep 17 00:00:00 2001 From: Anshuman-cometchat Date: Tue, 17 Feb 2026 16:54:06 +0530 Subject: [PATCH 4/4] changes : fixedf youtube video not rendering, all dashboard features are now visible in core features of docs. --- docs.json | 4 +- ui-kit/flutter/ai-assistant-chat-history.mdx | 2 +- ui-kit/flutter/core-features.mdx | 58 +++++++++++++++++++ ui-kit/flutter/getting-started.mdx | 2 +- ui-kit/flutter/guide-message-agentic-flow.mdx | 2 +- ui-kit/flutter/guide-threaded-messages.mdx | 2 +- ui-kit/flutter/incoming-call.mdx | 4 +- ui-kit/flutter/link/reference_api.mdx | 4 ++ ui-kit/flutter/methods.mdx | 4 ++ ui-kit/flutter/outgoing-call.mdx | 6 +- ui-kit/flutter/overview.mdx | 4 ++ ui-kit/flutter/search.mdx | 2 +- ui-kit/flutter/threaded-messages-header.mdx | 17 +++--- 13 files changed, 93 insertions(+), 18 deletions(-) create mode 100644 ui-kit/flutter/link/reference_api.mdx diff --git a/docs.json b/docs.json index 6fe2a0c0..6411332b 100644 --- a/docs.json +++ b/docs.json @@ -1935,7 +1935,9 @@ ] }, "ui-kit/flutter/link/sample", - "ui-kit/flutter/link/changelog" + "ui-kit/flutter/link/changelog", + + "ui-kit/flutter/link/reference_api" ] } ] diff --git a/ui-kit/flutter/ai-assistant-chat-history.mdx b/ui-kit/flutter/ai-assistant-chat-history.mdx index 93eb0a5b..c59507ab 100644 --- a/ui-kit/flutter/ai-assistant-chat-history.mdx +++ b/ui-kit/flutter/ai-assistant-chat-history.mdx @@ -322,7 +322,7 @@ CometChatAIAssistantChatHistory( -## CometChatMessageList Properties +## Properties Below is a list of customizations along with corresponding code snippets: diff --git a/ui-kit/flutter/core-features.mdx b/ui-kit/flutter/core-features.mdx index fc991048..379a40a0 100644 --- a/ui-kit/flutter/core-features.mdx +++ b/ui-kit/flutter/core-features.mdx @@ -18,6 +18,10 @@ Key components for core features: - **Mentions** → [MessageComposer](/ui-kit/flutter/message-composer) | [MessageList](/ui-kit/flutter/message-list) - **Threaded Messages** → [Threaded Messages](/ui-kit/flutter/threaded-messages-header) - **Group Chat** → [Groups](/ui-kit/flutter/groups) + +Additional features via extensions: Bitly, Link Preview, Message Shortcuts, Pin Message, Polls, Stickers, Message Translation, Voice Transcription, Collaborative Document/Whiteboard, Disappearing Messages, and [more](#more-features). + +AI-powered features: [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter), [Smart Replies](/fundamentals/ai-user-copilot/smart-replies), [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary). The UI Kit comprises a variety of widgets, each designed to work seamlessly with one another to deliver a comprehensive and intuitive chat experience. @@ -252,6 +256,60 @@ For a comprehensive understanding and guide on implementing and using the Groups *** +## More Features + +The following table lists additional features available in CometChat that enhance your chat experience. These features can be enabled via extensions, AI capabilities, or integrations. + +### Extensions & Enhancements + +| Feature | Description | +| --- | --- | +| **Bitly** | Bitly helps you create and share branded links with custom domains at scale. See [Bitly Extension](/fundamentals/bitly). | +| **Link Preview** | Generate meta description for URLs shared in messages. See [Link Preview](/fundamentals/link-preview). | +| **Message Shortcuts** | Send pre-defined messages using shortcuts (e.g., `\hello`). See [Message Shortcuts](/fundamentals/message-shortcuts). | +| **Pin Message** | Pin important messages for all users in a conversation to easily reference later. | +| **Rich Media Preview** | Generate rich media previews for all popular sites including YouTube, Twitter, and more. | +| **Save Message** | Enable users to save messages from one-on-one and group conversations for quick access later. | +| **Thumbnail Generation** | Automatically generate thumbnails for images and videos shared in chat. | +| **TinyURL** | TinyURL helps you convert long website links into short, manageable URLs that are reliable, secure, and never expire. | +| **Voice Transcription** | Transcribe audio messages using powerful neural network models for accessibility and searchability. | +| **Giphy** | Allow users to search and share animated GIFs directly in conversations. See [Giphy Extension](/fundamentals/giphy). | +| **Message Translation** | Translate text messages in different languages on-the-fly. See [Message Translation](/fundamentals/message-translation). | +| **Polls** | Create polls to quickly ask for opinions in chats and gather feedback from participants. | +| **Reminders** | Create reminders for messages or anything else to stay on top of important conversations. | +| **Stickers** | Send and manage stickers to add fun and expressiveness to conversations. | +| **Stipop** | Create meaningful experiences in your app with stickers that users love. | +| **Tenor** | Bring personality to your conversations with Tenor's extensive GIF library. | + +### Collaboration Tools + +| Feature | Description | +| --- | --- | +| **Collaborative Document** | Create and share documents for real-time collaboration within conversations. See [Collaborative Document](/fundamentals/collaborative-document). | +| **Collaborative Whiteboard** | Create and share whiteboards for visual collaboration and brainstorming. See [Collaborative Whiteboard](/fundamentals/collaborative-whiteboard). | +| **Disappearing Messages** | Allow end-users to send messages that disappear after a certain interval of time. See [Disappearing Messages](/fundamentals/disappearing-messages). | + +### Third-Party Integrations + +| Feature | Description | +| --- | --- | +| **Chatwoot** | Connect and exchange messages between CometChat and Chatwoot for unified customer support. See [Chatwoot Integration](/fundamentals/chatwoot). | +| **Intercom** | Connect and exchange messages between CometChat and Intercom for seamless customer communication. See [Intercom Integration](/fundamentals/intercom). | + +### AI-Powered Features + +| Feature | Description | +| --- | --- | +| **Conversation Starter** | AI-suggested first message for a conversation to help users break the ice. See [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter). | +| **Smart Replies** | AI-suggested replies for a conversation to speed up responses. See [Smart Replies](/fundamentals/ai-user-copilot/smart-replies). | +| **Conversation Summary** | AI-generated summary of a conversation to quickly catch up on missed messages. See [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary). | + + +Most extension features require enabling the corresponding extension in your [CometChat Dashboard](https://app.cometchat.com). AI features require the AI add-on to be enabled. + + +*** + ## Next Steps diff --git a/ui-kit/flutter/getting-started.mdx b/ui-kit/flutter/getting-started.mdx index 1b53fde4..aa255545 100644 --- a/ui-kit/flutter/getting-started.mdx +++ b/ui-kit/flutter/getting-started.mdx @@ -42,7 +42,7 @@ The **CometChat UI Kit for Flutter** streamlines the integration of in-app chat With built-in support for **one-to-one and group conversations**, developers can efficiently enable chat features within their applications. Follow this guide to **quickly integrate chat functionality** using the CometChat Flutter UI Kit. - + *** diff --git a/ui-kit/flutter/guide-message-agentic-flow.mdx b/ui-kit/flutter/guide-message-agentic-flow.mdx index 545f64be..93cf74e7 100644 --- a/ui-kit/flutter/guide-message-agentic-flow.mdx +++ b/ui-kit/flutter/guide-message-agentic-flow.mdx @@ -52,7 +52,7 @@ CometChatAiAssistantBubbleStyle( -Enable intelligent conversational AI capabilities in your Android app using CometChat UIKit v5 with AI Agent integration: +Enable intelligent conversational AI capabilities in your Flutter app using CometChat UIKit with AI Agent integration: - **AI Assistant Chat History** - **Chat History Management** diff --git a/ui-kit/flutter/guide-threaded-messages.mdx b/ui-kit/flutter/guide-threaded-messages.mdx index 510f2dc6..def4b383 100644 --- a/ui-kit/flutter/guide-threaded-messages.mdx +++ b/ui-kit/flutter/guide-threaded-messages.mdx @@ -203,7 +203,7 @@ Ensures only relevant threaded messages are shown. Compose and send messages with threading support - + Display thread context and parent message diff --git a/ui-kit/flutter/incoming-call.mdx b/ui-kit/flutter/incoming-call.mdx index 6fc0b238..2d56f23d 100644 --- a/ui-kit/flutter/incoming-call.mdx +++ b/ui-kit/flutter/incoming-call.mdx @@ -393,8 +393,8 @@ Use Cases: ```dart CometChatIncomingCall( - titleView: (context, call) { - // return titleView + trailingView: (context, call) { + // return trailingView }, ) ``` diff --git a/ui-kit/flutter/link/reference_api.mdx b/ui-kit/flutter/link/reference_api.mdx new file mode 100644 index 00000000..b3a744d1 --- /dev/null +++ b/ui-kit/flutter/link/reference_api.mdx @@ -0,0 +1,4 @@ +--- +title: "Reference API" +url: "https://pub.dev/documentation/cometchat_chat_uikit/latest/cometchat_chat_uikit/" +--- \ No newline at end of file diff --git a/ui-kit/flutter/methods.mdx b/ui-kit/flutter/methods.mdx index b0c073f6..03093e64 100644 --- a/ui-kit/flutter/methods.mdx +++ b/ui-kit/flutter/methods.mdx @@ -29,6 +29,10 @@ CometChatUIKit.logout(); ``` + +**Auth Key** is for development/testing only. In production, generate **Auth Tokens** on your server using the [REST API](https://api-explorer.cometchat.com/reference/create-authtoken) and pass them to the client via `loginWithAuthToken()`. Never expose Auth Keys in production client code. + + ## Overview The UI Kit's core function is to extend the [Chat SDK](/sdk/flutter/overview), essentially translating the raw data and functionality provided by the underlying methods into visually appealing and easy-to-use UI components. diff --git a/ui-kit/flutter/outgoing-call.mdx b/ui-kit/flutter/outgoing-call.mdx index 8ef356ab..f873b094 100644 --- a/ui-kit/flutter/outgoing-call.mdx +++ b/ui-kit/flutter/outgoing-call.mdx @@ -26,7 +26,7 @@ CometChatOutgoingCall( ## Overview -The `CometChatOutgoingCall` [Widget](/ui-kit/android/components-overview#components) is a visual representation of a user-initiated call, whether it's a voice or video call. It serves as an interface for managing outgoing calls, providing users with essential options to control the call experience. This Widget typically includes information about the call recipient, call controls for canceling the call, and feedback on the call status, such as indicating when the call is in progress. +The `CometChatOutgoingCall` [Widget](/ui-kit/flutter/components-overview#components) is a visual representation of a user-initiated call, whether it's a voice or video call. It serves as an interface for managing outgoing calls, providing users with essential options to control the call experience. This Widget typically includes information about the call recipient, call controls for canceling the call, and feedback on the call status, such as indicating when the call is in progress. @@ -89,7 +89,7 @@ class _OutgoingCallExampleState extends State { ### Actions -[Actions](/ui-kit/android/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. +[Actions](/ui-kit/flutter/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. ##### 1. onCancelled @@ -145,7 +145,7 @@ The `CometChatOutgoingCall` Widget does not have any exposed filters. ### Events -[Events](/ui-kit/android/components-overview#events) are emitted by a `Widget`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. +[Events](/ui-kit/flutter/components-overview#events) are emitted by a `Widget`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. Events emitted by the Outgoing call Widget are as follows. diff --git a/ui-kit/flutter/overview.mdx b/ui-kit/flutter/overview.mdx index ea11a933..3ea7dc59 100644 --- a/ui-kit/flutter/overview.mdx +++ b/ui-kit/flutter/overview.mdx @@ -34,6 +34,10 @@ CometChatMessageList(user: user) // or group: group **Get from:** [CometChat Dashboard](https://app.cometchat.com) → Your App → API & Auth Keys + +**Auth Key** is for development/testing only. In production, generate **Auth Tokens** on your server using the REST API and pass them to the client. Never expose Auth Keys in production client code. + + The **CometChat UI Kit** for Flutter is a powerful solution designed to seamlessly integrate chat functionality into applications. It provides a robust set of **prebuilt UI widgets** that are **modular, customizable, and highly scalable**, allowing developers to accelerate their development process with minimal effort. *** diff --git a/ui-kit/flutter/search.mdx b/ui-kit/flutter/search.mdx index 758e8e14..6c35c9b7 100644 --- a/ui-kit/flutter/search.mdx +++ b/ui-kit/flutter/search.mdx @@ -266,7 +266,7 @@ These are a set of small functional customizations that allow you to fine-tune t Below is a list of customizations along with corresponding code snippets -## CometChatMessageHeader Properties +## CometChatSearch Properties Following is a list of customizations along with their corresponding code snippets: diff --git a/ui-kit/flutter/threaded-messages-header.mdx b/ui-kit/flutter/threaded-messages-header.mdx index 34ba66ec..c8a49385 100644 --- a/ui-kit/flutter/threaded-messages-header.mdx +++ b/ui-kit/flutter/threaded-messages-header.mdx @@ -10,16 +10,19 @@ description: "Display and manage threaded message replies with parent message co ```dart import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; -// Minimal usage (requires parent message) -CometChatThreadedMessages(parentMessage: parentMessage) +// Minimal usage (requires parent message and logged in user) +CometChatThreadedHeader( + parentMessage: parentMessage, + loggedInUser: loggedInUser, +) // With common props -CometChatThreadedMessages( +CometChatThreadedHeader( parentMessage: parentMessage, - onBack: () { - // Handle back navigation - }, - hideBackButton: false, + loggedInUser: loggedInUser, + style: CometChatThreadedHeaderStyle( + bubbleContainerBackGroundColor: Colors.grey[100], + ), ) ```