From 9bb572a68dd66fdecf111858e023e8b93044c2de Mon Sep 17 00:00:00 2001 From: vivekCometChat Date: Thu, 25 Jun 2026 16:58:09 +0000 Subject: [PATCH] docs(android): update UI Kit v6 docs to 6.0.3 --- ui-kit/android/v6/campaigns.mdx | 232 ------------ ui-kit/android/v6/guide-ai-agent.mdx | 4 - ui-kit/android/v6/notification-feed.mdx | 478 ------------------------ ui-kit/android/v6/overview copy.mdx | 105 ++++++ 4 files changed, 105 insertions(+), 714 deletions(-) delete mode 100644 ui-kit/android/v6/campaigns.mdx delete mode 100644 ui-kit/android/v6/notification-feed.mdx create mode 100644 ui-kit/android/v6/overview copy.mdx diff --git a/ui-kit/android/v6/campaigns.mdx b/ui-kit/android/v6/campaigns.mdx deleted file mode 100644 index 7eae80dea..000000000 --- a/ui-kit/android/v6/campaigns.mdx +++ /dev/null @@ -1,232 +0,0 @@ ---- -title: "Campaigns" -description: "Deliver targeted, rich notifications to users via an in-app notification feed powered by the CometChat Cards renderer." ---- - -CometChat Campaigns enables you to send rich, interactive notifications to users through an in-app notification feed. Each notification is rendered as a native card using the **CometChat Cards** library — supporting images, text, buttons, layouts, and interactive actions. - - -Before proceeding, ensure you have completed the [UI Kit integration](/ui-kit/android/v6/getting-started) and the [Dashboard Setup](/campaigns#setup-flow) for Campaigns. - - - - - - ---- - -## Overview - -Campaigns delivers notifications as **Card Schema JSON** — a structured format that defines the visual layout of each notification card. The system consists of three layers: - -1. **CometChat Chat SDK** — Fetches feed items, manages read/delivered state, provides real-time listeners, handles push notification tracking -2. **CometChat Cards Library** — Renders Card Schema JSON into native Android views (Jetpack Compose and XML Views) -3. **CometChat UI Kit** — Provides the ready-to-use `CometChatNotificationFeed` component that wires everything together - -### Architecture Flow - -``` -Dashboard / API → Campaign Created → Push + WebSocket Delivery - ↓ - SDK: NotificationFeedRequest.fetchNext() - ↓ - NotificationFeedItem.getContent() → Card Schema JSON - ↓ - Cards Library: CometChatCardView / CometChatCardComposable - ↓ - Native Rendered Card (images, text, buttons, layouts) - ↓ - User taps button → ActionCallback → Your code handles it -``` - ---- - -## How Cards Work - -Each `NotificationFeedItem` from the SDK contains a `content` field — a `JSONObject` holding the Card Schema JSON. This JSON is passed directly to the CometChat Cards renderer which produces a native view. - -The Cards library is a **pure renderer**: -- **Input**: Card Schema JSON string + theme mode + optional action callback -- **Output**: Native Android view hierarchy - -It does not execute actions, manage message state, or call any SDK methods. When users tap interactive elements (buttons, links), the library emits the action to your callback. You decide what happens — open a URL, navigate to a chat, make an API call, etc. - -### Card Schema JSON Example - -```json -{ - "version": "1.0", - "body": [ - { - "type": "column", - "backgroundColor": { - "light": "transparent", - "dark": "transparent" - }, - "gap": 5, - "items": [ - { - "type": "text", - "content": "📢 Announcement", - "variant": "heading2", - "id": "txt_99323141-2459-4e33-88d3-ca39c5fd2f50" - }, - { - "type": "text", - "content": "Your announcement message here.", - "variant": "body", - "id": "txt_61a417bc-5e4a-4ba2-bfe7-b7bc64dbaf35" - }, - { - "type": "divider", - "id": "div_80f5c7fb-fd10-41d1-8c2f-51498f0f62d0" - }, - { - "type": "button", - "label": "Learn More", - "backgroundColor": { - "light": "transparent", - "dark": "transparent" - }, - "textColor": { - "light": "#6C5CE7", - "dark": "#6C5CE7" - }, - "size": 40, - "fontSize": 13, - "borderRadius": 6, - "padding": { - "top": 0, - "right": 16, - "bottom": 0, - "left": 16 - }, - "action": { - "type": "openUrl", - "url": "" - }, - "id": "btn_9b87a3f1-b0c6-45b9-a4c2-e22ea590f17f" - } - ], - "id": "col_98fed9bd-1a95-4cee-aa81-84a9016e41f2" - } - ], - "fallbackText": "", - "style": { - "background": { - "light": "#E8E8E8", - "dark": "#E8E8E8" - }, - "borderRadius": 16, - "borderColor": { - "light": "#DFE6E9", - "dark": "#DFE6E9" - }, - "padding": 12 - } -} -``` - -The schema supports **20 element types** (text, image, icon, avatar, badge, divider, spacer, chip, progressBar, codeBlock, markdown, row, column, grid, accordion, tabs, button, iconButton, link, table) and **9 action types** (openUrl, chatWithUser, chatWithGroup, sendMessage, copyToClipboard, downloadFile, initiateCall, apiCall, customCallback). - -Here's how the above JSON renders as a native card: - - - - - ---- - -## How Cards Work in the UI Kit - -The `CometChatNotificationFeed` component uses the **CometChat Cards** library internally to render each notification. Here's what happens under the hood: - -1. The component fetches `NotificationFeedItem` objects from the SDK -2. For each item, it extracts the `content` field (Card Schema JSON) -3. It passes the JSON to `CometChatCardComposable` (Compose) or `CometChatCardView` (XML) from the Cards library -4. The Cards renderer produces native UI — text, images, buttons, layouts — directly from the JSON -5. When users tap buttons/links inside a card, the action is emitted back to the component which handles navigation (open URL, navigate to chat, etc.) - -You don't need to interact with the Cards library directly when using `CometChatNotificationFeed` — it's all wired up. But if you want to render cards outside the feed (e.g., a standalone card in a dialog), you can use the Cards library directly. See the [SDK Campaigns documentation](/sdk/android/v5/campaigns#rendering-cards) for standalone usage. - ---- - -## Handling Push Notifications for Campaigns - -When a campaign push notification arrives via FCM, you should: - -1. **Report delivery** — Call `CometChat.markPushNotificationDelivered()` in your `FirebaseMessagingService` -2. **Report click** — Call `CometChat.markPushNotificationClicked()` when the user taps the notification -3. **Deep link** — Use the announcement ID from the push payload to fetch the full item via `CometChat.getNotificationFeedItem(id)` and display it - -```kotlin -// In FirebaseMessagingService.onMessageReceived() -val pushNotification = PushNotification.fromJson(data) -CometChat.markPushNotificationDelivered(pushNotification, ...) - -// When user taps the notification -CometChat.markPushNotificationClicked(pushNotification, ...) - -// Navigate to feed or show specific item -CometChat.getNotificationFeedItem(pushNotification.id, ...) -``` - -See the [SDK Campaigns documentation](/sdk/android/v5/campaigns) for the complete push notification tracking API. - ---- - -## Sending Campaigns - -Before integrating the frontend, you need to set up channels, categories, templates, and campaigns in the CometChat Dashboard. Follow the [Dashboard Setup Guide](/campaigns#setup-flow) for step-by-step instructions with screenshots. - ---- - -## Using the UI Kit Component - -The easiest way to add a notification feed to your app is the `CometChatNotificationFeed` component. It handles fetching, rendering, pagination, filtering, real-time updates, and engagement reporting out of the box. - - - -```kotlin -@Composable -fun NotificationsScreen() { - CometChatNotificationFeed( - modifier = Modifier.fillMaxSize(), - onItemClick = { item -> - // Handle item tap - }, - onBackPress = { /* navigate back */ } - ) -} -``` - - -```xml - -``` - -```kotlin -val feed = findViewById(R.id.notificationFeed) -feed.init(this) // Pass ViewModelStoreOwner -feed.onItemClick = { item -> /* handle tap */ } -``` - - - -See the full [CometChatNotificationFeed component documentation](/ui-kit/android/v6/notification-feed) for all configuration options, styling, and customization. - ---- - -## Next Steps - - - - Full API reference for feed items, categories, engagement, and push tracking - - - Ready-to-use component with filtering, real-time updates, and styling - - diff --git a/ui-kit/android/v6/guide-ai-agent.mdx b/ui-kit/android/v6/guide-ai-agent.mdx index 856abac5c..2da496105 100644 --- a/ui-kit/android/v6/guide-ai-agent.mdx +++ b/ui-kit/android/v6/guide-ai-agent.mdx @@ -25,10 +25,6 @@ Enable intelligent conversational AI capabilities in your Android app using Come Transform your chat experience with AI-powered assistance that provides intelligent responses and seamless integration with your existing chat infrastructure. - -**1:1 conversations only.** AI Agents currently respond only in one-on-one conversations between an end user and the agent user. They do not respond to messages sent in groups, even if the agent user is added as a member or owner. Group support is on the roadmap — share your use case on [feedback.cometchat.com](https://feedback.cometchat.com). - - ## Overview Users can interact with AI agents through a dedicated chat interface that: diff --git a/ui-kit/android/v6/notification-feed.mdx b/ui-kit/android/v6/notification-feed.mdx deleted file mode 100644 index c876dc303..000000000 --- a/ui-kit/android/v6/notification-feed.mdx +++ /dev/null @@ -1,478 +0,0 @@ ---- -title: "Notification Feed" -description: "Full-screen notification feed component with category filtering, card rendering, real-time updates, and engagement reporting." ---- - -`CometChatNotificationFeed` displays a scrollable notification feed where each item is rendered as a native card using the CometChat Cards library. It handles fetching, pagination, category filtering, timestamp grouping, real-time updates, and read/delivered/engagement reporting automatically. - - - - - ---- - -## Where It Fits - -`CometChatNotificationFeed` is a full-screen component. Drop it into an Activity, Fragment, or navigation destination. It manages its own data fetching, state, and real-time listeners — you just handle navigation callbacks. - - - -```kotlin -@Composable -fun NotificationsScreen(onBack: () -> Unit) { - CometChatNotificationFeed( - modifier = Modifier.fillMaxSize(), - showBackButton = true, - onBackPress = onBack, - onItemClick = { item -> - // Handle item tap (e.g., open detail or deep link) - } - ) -} -``` - - -```xml - -``` - -```kotlin -val feed = findViewById(R.id.notificationFeed) -feed.init(this) // Pass Activity or Fragment — needed to create the ViewModel -feed.onItemClick = { item -> /* navigate */ } -feed.onBackPress = { finish() } -``` - - - ---- - -## Quick Start - - - -```kotlin -@Composable -fun NotificationsScreen() { - CometChatNotificationFeed( - modifier = Modifier.fillMaxSize() - ) -} -``` - - -```kotlin -override fun onCreate(savedInstanceState: Bundle?) { - super.onCreate(savedInstanceState) - val feed = CometChatNotificationFeed(this) - setContentView(feed) - feed.init(this) // Required — binds the ViewModel to this Activity's lifecycle -} -``` - - - -Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()` and a user logged in. - ---- - -## Filtering Feed Items - -Control what loads using custom request builders: - - - -```kotlin -CometChatNotificationFeed( - feedRequestBuilder = NotificationFeedRequest.NotificationFeedRequestBuilder() - .setLimit(30) - .setReadState(FeedReadState.UNREAD) - .setCategory("promotions") -) -``` - - -```kotlin -feed.setFeedRequestBuilder( - NotificationFeedRequest.NotificationFeedRequestBuilder() - .setLimit(30) - .setReadState(FeedReadState.UNREAD) - .setCategory("promotions") -) -feed.init(this) -``` - - - -### Filter Options - -| Builder Method | Description | -| --- | --- | -| `.setLimit(int)` | Items per page (default 20, max 100) | -| `.setReadState(FeedReadState)` | `READ`, `UNREAD`, or `ALL` | -| `.setCategory(String)` | Filter by category ID | -| `.setChannelId(String)` | Filter by channel | -| `.setTags(List)` | Filter by tags | -| `.setDateFrom(String)` | ISO 8601 date lower bound | -| `.setDateTo(String)` | ISO 8601 date upper bound | - - -Pass the builder object, not the result of `.build()`. The component calls `.build()` internally. - - ---- - -## Actions and Events - -### Callback Methods - -#### `onItemClick` - -Fires when a feed item card is tapped. - - - -```kotlin -CometChatNotificationFeed( - onItemClick = { item -> - // item.id, item.content (Card JSON), item.category - } -) -``` - - -```kotlin -feed.onItemClick = { item -> - // Handle item tap -} -``` - - - -#### `onActionClick` - -Fires when an interactive element (button, link) inside a card is tapped. - - - -```kotlin -CometChatNotificationFeed( - onActionClick = { item, actionMap -> - // actionMap contains action type and parameters - val actionType = actionMap["type"] as? String - when (actionType) { - "openUrl" -> openBrowser(actionMap["url"] as String) - "chatWithUser" -> navigateToChat(actionMap["uid"] as String) - } - } -) -``` - - -```kotlin -feed.onActionClick = { item, actionMap -> - val actionType = actionMap["type"] as? String - // Handle action -} -``` - - - -#### `onError` - -Fires when an internal error occurs (network failure, SDK exception). - - - -```kotlin -CometChatNotificationFeed( - onError = { exception -> - Log.e("Feed", "Error: ${exception.message}") - } -) -``` - - -```kotlin -feed.onError = { exception -> - Log.e("Feed", "Error: ${exception.message}") -} -``` - - - -#### `onBackPress` - -Fires when the back button in the header is tapped. - - - -```kotlin -CometChatNotificationFeed( - showBackButton = true, - onBackPress = { /* navigate back */ } -) -``` - - -```kotlin -feed.setShowBackButton(true) -feed.onBackPress = { finish() } -``` - - - -### Automatic Behaviors - -The component handles these automatically — no manual setup needed: - -| Behavior | Description | -| --- | --- | -| Real-time updates | New items appear at the top via WebSocket listener | -| Delivery reporting | Items are reported as delivered when fetched | -| Read reporting | Items are reported as read after 1 second of visibility | -| Unread count polling | Polls unread count every 30 seconds to update badges | -| Infinite scroll | Fetches next page when scrolling near the bottom | -| Pull-to-refresh | Resets and fetches fresh data on pull | -| Timestamp grouping | Groups items as "Today", "Yesterday", day name, or date | -| Category filtering | Filter chips row for category-based filtering | - ---- - -## Functionality - -| Method (XML Views) | Compose Parameter | Description | -| --- | --- | --- | -| `setTitle("Notifications")` | `title = "Notifications"` | Header title text | -| `setShowHeader(true)` | `showHeader = true` | Toggle header visibility | -| `setShowBackButton(false)` | `showBackButton = false` | Toggle back button | -| `setShowFilterChips(true)` | `showFilterChips = true` | Toggle category filter chips | -| `setFeedRequestBuilder(...)` | `feedRequestBuilder = ...` | Custom feed request | -| `setCategoriesRequestBuilder(...)` | `categoriesRequestBuilder = ...` | Custom categories request | - ---- - -## Custom View Slots - -### Header View - -Replace the entire header: - - - -```kotlin -CometChatNotificationFeed( - headerView = { - Row( - modifier = Modifier.fillMaxWidth().padding(16.dp), - verticalAlignment = Alignment.CenterVertically - ) { - Text("My Notifications", style = CometChatTheme.typography.heading1Bold) - } - } -) -``` - - - -### State Views - - - -```kotlin -CometChatNotificationFeed( - emptyStateView = { - Column( - modifier = Modifier.fillMaxSize(), - horizontalAlignment = Alignment.CenterHorizontally, - verticalArrangement = Arrangement.Center - ) { - Text("No notifications yet") - } - }, - errorStateView = { exception, onRetry -> - Column(horizontalAlignment = Alignment.CenterHorizontally) { - Text("Something went wrong") - Button(onClick = onRetry) { Text("Retry") } - } - }, - loadingStateView = { - Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) { - CircularProgressIndicator() - } - } -) -``` - - - ---- - -## Style - - - -```kotlin -CometChatNotificationFeed( - style = CometChatNotificationFeedStyle( - backgroundColor = Color(0xFFF5F5F5), - headerBackgroundColor = Color.White, - headerTitleColor = Color(0xFF141414), - chipActiveBackgroundColor = Color(0xFF3399FF), - chipActiveTextColor = Color.White, - chipInactiveBackgroundColor = Color.White, - chipInactiveTextColor = Color(0xFF727272), - cardBackgroundColor = Color.White, - cardBorderColor = Color(0xFFE0E0E0), - cardBorderRadius = 12.dp, - unreadIndicatorColor = Color(0xFF3399FF) - ) -) -``` - - -```kotlin -feed.setStyle(CometChatNotificationFeedStyle( - backgroundColor = Color.parseColor("#F5F5F5"), - headerTitleColor = Color.parseColor("#141414"), - chipActiveBackgroundColor = Color.parseColor("#3399FF"), - chipActiveTextColor = Color.WHITE, - chipInactiveBackgroundColor = Color.TRANSPARENT, - chipInactiveTextColor = Color.DKGRAY, - cardBackgroundColor = Color.WHITE, - cardBorderColor = Color.parseColor("#E0E0E0"), - unreadIndicatorColor = Color.parseColor("#3399FF") -)) -``` - - - -### Style Properties - -| Property | Description | -| --- | --- | -| `backgroundColor` | Screen background color | -| `headerBackgroundColor` | Header bar background | -| `headerTitleColor` | Header title text color | -| `headerBorderColor` | Divider below header | -| `chipActiveBackgroundColor` | Selected filter chip background | -| `chipActiveTextColor` | Selected filter chip text | -| `chipInactiveBackgroundColor` | Unselected filter chip background | -| `chipInactiveTextColor` | Unselected filter chip text | -| `chipBorderColor` | Filter chip border | -| `badgeActiveBackgroundColor` | Active chip badge background | -| `badgeActiveTextColor` | Active chip badge text | -| `badgeInactiveBackgroundColor` | Inactive chip badge background | -| `badgeInactiveTextColor` | Inactive chip badge text | -| `timestampTextColor` | Section header timestamp color | -| `cardBackgroundColor` | Card container background | -| `cardBorderColor` | Card container border | -| `cardBorderRadius` | Card corner radius | -| `cardBorderWidth` | Card border width | -| `unreadIndicatorColor` | Unread dot indicator color | -| `separatorColor` | Separator between cards | - -All colors default to `Color.Unspecified` (Compose) or `0` (XML) to inherit from `CometChatTheme`. Override individual values without losing theme support. - ---- - -## ViewModel Access - -The component uses `CometChatNotificationFeedViewModel` from the shared `chatuikit-core` module. You can provide a custom ViewModel for advanced scenarios: - - - -```kotlin -val viewModel: CometChatNotificationFeedViewModel = viewModel( - factory = CometChatNotificationFeedViewModelFactory( - feedRequestBuilder = customBuilder, - pollingIntervalMs = 60_000L // 1 minute polling - ) -) - -CometChatNotificationFeed( - viewModel = viewModel -) -``` - - - -### ViewModel Factory Parameters - -| Parameter | Default | Description | -| --- | --- | --- | -| `feedRequestBuilder` | null | Custom feed request builder | -| `categoriesRequestBuilder` | null | Custom categories request builder | -| `enableListeners` | true | Enable WebSocket listeners (false for testing) | -| `pollingIntervalMs` | 30000 | Unread count polling interval in ms | - ---- - -## Common Patterns - -### Show only unread items - - - -```kotlin -CometChatNotificationFeed( - feedRequestBuilder = NotificationFeedRequest.NotificationFeedRequestBuilder() - .setReadState(FeedReadState.UNREAD) -) -``` - - - -### Hide filter chips and header - - - -```kotlin -CometChatNotificationFeed( - showHeader = false, - showFilterChips = false -) -``` - - -```kotlin -feed.setShowHeader(false) -feed.setShowFilterChips(false) -``` - - - -### Custom categories request - - - -```kotlin -CometChatNotificationFeed( - categoriesRequestBuilder = NotificationCategoriesRequest.NotificationCategoriesRequestBuilder() - .setLimit(10) -) -``` - - - ---- - -## Next Steps - - - - Overview of how campaigns work end-to-end - - - Low-level SDK APIs for feed items, categories, and engagement - - - Full styling reference for all components - - - Custom ViewModels, repositories, and ListOperations - - diff --git a/ui-kit/android/v6/overview copy.mdx b/ui-kit/android/v6/overview copy.mdx new file mode 100644 index 000000000..02fcb45af --- /dev/null +++ b/ui-kit/android/v6/overview copy.mdx @@ -0,0 +1,105 @@ +--- +title: "Android UI Kit" +sidebarTitle: "Overview" +description: "Prebuilt Android Views for chat, voice, and video calling. Supports Kotlin and Java with XML and Jetpack Compose compatibility." +--- + + + +| Field | Value | +| --- | --- | +| Package | `com.cometchat:chat-uikit-android` v5.x | +| Peer deps | `com.cometchat:chat-sdk-android` >=4.x, `minSdk` 24 | +| Calling | Optional — `com.cometchat:calls-sdk-android` | +| Localization | 19 languages built-in | +| Source | [GitHub](https://github.com/cometchat/cometchat-uikit-android) | + + + +The CometChat Android UI Kit provides prebuilt, customizable Views for adding chat, voice, and video calling to any Android app. Each component handles its own data fetching, real-time listeners, and state — you just drop them into your layout. + + + + + +--- + +## Try It + + + + Try the full chat experience on your device + + + Clone, add your credentials, and start building + + + +### Download the CometChat Demo App + +[](https://link.cometchat.com/android-demo-app) + +Or scan the QR code to install directly: + + + + + +--- + +## Get Started + +Follow the step-by-step integration guide to add the UI Kit to your Android project: + + + + Gradle setup, initialization, and login + + + Essential terminology and platform features + + + +--- + +## Explore + + + + Browse all prebuilt UI components + + + Chat, calling, AI, and extensions + + + Colors, fonts, dark mode, and custom styling + + + Threaded messages, new chat, search, and more + + + +--- + +## Resources + + + + Working reference app + + + Full UI Kit source on GitHub + + + Design resources and prototyping + + + Common issues and fixes + + + Open a support ticket + + + Upgrading from v4 + +