From decb634f671431e880bd78ea71006d4a5b93d61b Mon Sep 17 00:00:00 2001 From: vivekCometChat Date: Tue, 28 Apr 2026 15:42:59 +0530 Subject: [PATCH] v6-android-beta2 docs --- docs.json | 106 +- .../android/v6/ai-assistant-chat-history.mdx | 357 ++++++ ui-kit/android/v6/ai-features.mdx | 2 +- ui-kit/android/v6/call-features.mdx | 4 +- ui-kit/android/v6/calling-integration.mdx | 4 +- ui-kit/android/v6/component-styling.mdx | 624 +++++++++ ui-kit/android/v6/core-features.mdx | 30 +- ui-kit/android/v6/getting-started-jetpack.mdx | 2 +- ui-kit/android/v6/getting-started-kotlin.mdx | 2 +- ui-kit/android/v6/getting-started.mdx | 6 +- ui-kit/android/v6/guide-ai-agent.mdx | 419 ++++++ ui-kit/android/v6/guide-overview.mdx | 6 +- ui-kit/android/v6/guide-search-messages.mdx | 235 ++++ ui-kit/android/v6/search.mdx | 1136 +++++++++++++++++ 14 files changed, 2868 insertions(+), 65 deletions(-) create mode 100644 ui-kit/android/v6/ai-assistant-chat-history.mdx create mode 100644 ui-kit/android/v6/guide-ai-agent.mdx create mode 100644 ui-kit/android/v6/guide-search-messages.mdx create mode 100644 ui-kit/android/v6/search.mdx diff --git a/docs.json b/docs.json index a064bb587..3e9836fb7 100644 --- a/docs.json +++ b/docs.json @@ -916,7 +916,7 @@ "icon": "/images/icons/react.svg", "versions": [ { - "version": "v5\u200e", + "version": "v5‎", "groups": [ { "group": " ", @@ -1027,7 +1027,7 @@ ] }, { - "version": "v4\u200e", + "version": "v4‎", "groups": [ { "group": " ", @@ -1190,7 +1190,7 @@ ] }, { - "version": "v3\u200e", + "version": "v3‎", "groups": [ { "group": " ", @@ -1212,7 +1212,7 @@ ] }, { - "version": "v2\u200e", + "version": "v2‎", "groups": [ { "group": " ", @@ -1240,7 +1240,7 @@ "icon": "/images/icons/swift.svg", "versions": [ { - "version": "v5\u200e\u200e", + "version": "v5‎‎", "groups": [ { "group": " ", @@ -1347,7 +1347,7 @@ ] }, { - "version": "v4\u200e\u200e", + "version": "v4‎‎", "groups": [ { "group": " ", @@ -1511,7 +1511,7 @@ ] }, { - "version": "v3\u200e\u200e", + "version": "v3‎‎", "groups": [ { "group": " ", @@ -1533,7 +1533,7 @@ ] }, { - "version": "v2\u200e\u200e", + "version": "v2‎‎", "groups": [ { "group": " ", @@ -1561,7 +1561,7 @@ "icon": "/images/icons/android.svg", "versions": [ { - "version": "v5\u200e\u200e\u200e", + "version": "v5‎‎‎", "groups": [ { "group": " ", @@ -1678,7 +1678,7 @@ ] }, { - "version": "v6\u200e\u200e\u200e", + "version": "v6‎‎‎", "groups": [ { "group": " ", @@ -1750,7 +1750,9 @@ "ui-kit/android/v6/incoming-call", "ui-kit/android/v6/outgoing-call", "ui-kit/android/v6/call-buttons", - "ui-kit/android/v6/call-logs" + "ui-kit/android/v6/call-logs", + "ui-kit/android/v6/search", + "ui-kit/android/v6/ai-assistant-chat-history" ] }, { @@ -1772,7 +1774,9 @@ "ui-kit/android/v6/guide-group-chat", "ui-kit/android/v6/custom-text-formatter-guide", "ui-kit/android/v6/mentions-formatter-guide", - "ui-kit/android/v6/shortcut-formatter-guide" + "ui-kit/android/v6/shortcut-formatter-guide", + "ui-kit/android/v6/guide-search-messages", + "ui-kit/android/v6/guide-ai-agent" ] }, "ui-kit/android/v6/architecture-data-flow", @@ -1791,7 +1795,7 @@ ] }, { - "version": "v4\u200e\u200e\u200e", + "version": "v4‎‎‎", "groups": [ { "group": " ", @@ -1948,7 +1952,7 @@ ] }, { - "version": "v3\u200e\u200e\u200e", + "version": "v3‎‎‎", "groups": [ { "group": " ", @@ -1973,7 +1977,7 @@ ] }, { - "version": "v2\u200e\u200e\u200e", + "version": "v2‎‎‎", "groups": [ { "group": " ", @@ -2002,7 +2006,7 @@ "icon": "/images/icons/flutter.svg", "versions": [ { - "version": "v5\u200e\u200e\u200e\u200e", + "version": "v5‎‎‎‎", "groups": [ { "group": " ", @@ -2106,7 +2110,7 @@ ] }, { - "version": "v6\u200e\u200e\u200e\u200e", + "version": "v6‎‎‎‎", "groups": [ { "group": " ", @@ -2220,7 +2224,7 @@ ] }, { - "version": "v4\u200e\u200e\u200e\u200e", + "version": "v4‎‎‎‎", "groups": [ { "group": " ", @@ -2781,7 +2785,7 @@ ] }, { - "version": "v3\u200e\u200e\u200e\u200e\u200e", + "version": "v3‎‎‎‎‎", "groups": [ { "group": " ", @@ -2802,7 +2806,7 @@ ] }, { - "version": "v2\u200e\u200e\u200e\u200e\u200e", + "version": "v2‎‎‎‎‎", "groups": [ { "group": " ", @@ -2829,7 +2833,7 @@ "icon": "/images/icons/vuejs.svg", "versions": [ { - "version": "v4\u200e\u200e\u200e\u200e\u200e\u200e", + "version": "v4‎‎‎‎‎‎", "groups": [ { "group": " ", @@ -2922,7 +2926,7 @@ ] }, { - "version": "v3\u200e\u200e\u200e\u200e\u200e\u200e", + "version": "v3‎‎‎‎‎‎", "groups": [ { "group": " ", @@ -2944,7 +2948,7 @@ ] }, { - "version": "v2\u200e\u200e\u200e\u200e\u200e\u200e", + "version": "v2‎‎‎‎‎‎", "groups": [ { "group": " ", @@ -2976,7 +2980,7 @@ "icon": "/images/icons/js.svg", "versions": [ { - "version": "v4\u200e\u200e\u200e\u200e\u200e\u200e\u200e", + "version": "v4‎‎‎‎‎‎‎", "groups": [ { "group": " ", @@ -3068,7 +3072,7 @@ ] }, { - "version": "v3\u200e\u200e\u200e\u200e\u200e\u200e\u200e", + "version": "v3‎‎‎‎‎‎‎", "groups": [ { "group": " ", @@ -3191,7 +3195,7 @@ ] }, { - "version": "v2\u200e\u200e\u200e\u200e\u200e\u200e\u200e", + "version": "v2‎‎‎‎‎‎‎", "groups": [ { "group": " ", @@ -3294,7 +3298,7 @@ "icon": "/images/icons/react.svg", "versions": [ { - "version": "v4\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e", + "version": "v4‎‎‎‎‎‎‎‎", "groups": [ { "group": " ", @@ -3382,7 +3386,7 @@ ] }, { - "version": "v3\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e", + "version": "v3‎‎‎‎‎‎‎‎", "groups": [ { "group": " ", @@ -3496,7 +3500,7 @@ ] }, { - "version": "v2\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e", + "version": "v2‎‎‎‎‎‎‎‎", "groups": [ { "group": " ", @@ -3598,7 +3602,7 @@ "icon": "/images/icons/swift.svg", "versions": [ { - "version": "v4\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e", + "version": "v4‎‎‎‎‎‎‎‎‎", "groups": [ { "group": " ", @@ -3687,7 +3691,7 @@ ] }, { - "version": "v3\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e", + "version": "v3‎‎‎‎‎‎‎‎‎", "groups": [ { "group": " ", @@ -3805,7 +3809,7 @@ ] }, { - "version": "v2\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e", + "version": "v2‎‎‎‎‎‎‎‎‎", "groups": [ { "group": " ", @@ -3912,7 +3916,7 @@ "icon": "/images/icons/android.svg", "versions": [ { - "version": "v5\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e", + "version": "v5‎‎‎‎‎‎‎‎‎‎", "groups": [ { "group": " ", @@ -4013,7 +4017,7 @@ ] }, { - "version": "v4\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e", + "version": "v4‎‎‎‎‎‎‎‎‎‎", "groups": [ { "group": " ", @@ -4107,7 +4111,7 @@ ] }, { - "version": "v3\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e", + "version": "v3‎‎‎‎‎‎‎‎‎‎", "groups": [ { "group": " ", @@ -4227,7 +4231,7 @@ ] }, { - "version": "v2\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e", + "version": "v2‎‎‎‎‎‎‎‎‎‎", "groups": [ { "group": " ", @@ -4330,7 +4334,7 @@ "icon": "/images/icons/flutter.svg", "versions": [ { - "version": "v4\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e", + "version": "v4‎‎‎‎‎‎‎‎‎‎‎", "groups": [ { "group": " ", @@ -4422,7 +4426,7 @@ ] }, { - "version": "v5\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e", + "version": "v5‎‎‎‎‎‎‎‎‎‎‎", "groups": [ { "group": " ", @@ -4513,7 +4517,7 @@ ] }, { - "version": "v3\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e", + "version": "v3‎‎‎‎‎‎‎‎‎‎‎", "groups": [ { "group": " ", @@ -5079,7 +5083,7 @@ "icon": "/images/icons/js.svg", "versions": [ { - "version": "v4\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e", + "version": "v4‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎", "groups": [ { "group": " ", @@ -5121,7 +5125,7 @@ ] }, { - "version": "v5\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e", + "version": "v5‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎", "groups": [ { "group": "Overview", @@ -5205,7 +5209,7 @@ "icon": "/images/icons/react.svg", "versions": [ { - "version": "v4\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e", + "version": "v4‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎", "groups": [ { "group": " ", @@ -5246,7 +5250,7 @@ ] }, { - "version": "v5\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e", + "version": "v5‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎", "groups": [ { "group": "Overview", @@ -5320,7 +5324,7 @@ "icon": "/images/icons/swift.svg", "versions": [ { - "version": "v4\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e", + "version": "v4‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎", "groups": [ { "group": " ", @@ -5361,7 +5365,7 @@ ] }, { - "version": "v5\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e", + "version": "v5‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎", "groups": [ { "group": "Overview", @@ -5435,7 +5439,7 @@ "icon": "/images/icons/android.svg", "versions": [ { - "version": "v4\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e", + "version": "v4‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎", "groups": [ { "group": " ", @@ -5475,7 +5479,7 @@ ] }, { - "version": "v5\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e", + "version": "v5‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎", "groups": [ { "group": "Overview", @@ -5549,7 +5553,7 @@ "icon": "/images/icons/flutter.svg", "versions": [ { - "version": "v4\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e", + "version": "v4‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎", "groups": [ { "group": " ", @@ -5589,7 +5593,7 @@ ] }, { - "version": "v5\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e\u200e", + "version": "v5‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎", "groups": [ { "group": "Overview", @@ -9616,7 +9620,7 @@ "metatags": { "charset": "UTF-8", "viewport": "width=device-width, initial-scale=1.0", - "description": "Learn how to integrate, customize, and scale real-time chat using CometChat\u2019s UI Kits, SDKs, and widgets across popular frameworks. Get step-by-step guides, best practices, and implementation details to build production-ready chat experiences.", + "description": "Learn how to integrate, customize, and scale real-time chat using CometChat’s UI Kits, SDKs, and widgets across popular frameworks. Get step-by-step guides, best practices, and implementation details to build production-ready chat experiences.", "language": "en" } }, @@ -9625,4 +9629,4 @@ "redirect": true } } -} +} \ No newline at end of file diff --git a/ui-kit/android/v6/ai-assistant-chat-history.mdx b/ui-kit/android/v6/ai-assistant-chat-history.mdx new file mode 100644 index 000000000..00d8de003 --- /dev/null +++ b/ui-kit/android/v6/ai-assistant-chat-history.mdx @@ -0,0 +1,357 @@ +--- +title: "AI Assistant Chat History" +description: "Displays the conversation history between users and an AI assistant for easy review of past interactions." +--- + + +```json +{ + "component": "CometChatAIAssistantChatHistory", + "package": "com.cometchat.uikit.kotlin.presentation.aiassistantchathistory", + "xmlElement": "", + "description": "Displays the conversation history between users and an AI assistant for easy review of past interactions.", + "primaryOutput": { + "method": "setOnItemClickListener", + "type": "OnItemClickListener" + }, + "methods": { + "data": { + "setUser": { + "type": "User", + "required": true, + "note": "User must have role set to @agentic" + } + }, + "callbacks": { + "setOnItemClickListener": "OnItemClickListener", + "setOnItemLongClickListener": "OnItemLongClickListener", + "setOnNewChatClickListener": "OnClick", + "setOnCloseClickListener": "OnClick" + }, + "visibility": { + "setErrorStateVisibility": { "type": "int (View.VISIBLE | View.GONE)", "default": "View.VISIBLE" }, + "setEmptyStateVisibility": { "type": "int (View.VISIBLE | View.GONE)", "default": "View.VISIBLE" } + }, + "style": { + "setStyle": { + "type": "@StyleRes int", + "parent": "CometChatAIAssistantChatHistoryStyle" + } + } + }, + "events": [], + "sdkListeners": [] +} +``` + + + +## Quick Start + +1. Open your layout XML file. +2. Add the `CometChatAIAssistantChatHistory` XML element: + +```xml lines + +``` + +> **What this does:** Adds the `CometChatAIAssistantChatHistory` component to your layout. It fills the available width and height and renders the AI assistant chat history list. + +3. In your Activity or Fragment, create a `User` object with the role set to `@agentic` and pass it to the component: + + + + +```kotlin lines +val user = User() +user.uid = "userId" +user.name = "User Name" +user.role = "@agentic" // User role must be @agentic to use AI Assistant features + +binding.cometChatAiAssistantChatHistory.setUser(user) +``` + + + + +```kotlin lines +import com.cometchat.uikit.compose.presentation.aiassistantchathistory.ui.CometChatAIAssistantChatHistory + +@Composable +fun AIAssistantChatHistoryScreen() { + CometChatAIAssistantChatHistory( + modifier = Modifier.fillMaxSize(), + onCloseClick = { /* handle close */ }, + onNewChatClick = { /* handle new chat */ }, + onItemClick = { message -> /* handle item click */ } + ) +} +``` + + + + + +> **What this does:** Creates a `User` object with the `@agentic` role and sets it on the `CometChatAIAssistantChatHistory` component. This is required for the component to fetch and display the AI assistant chat histories for that user. + +4. Build and run your app. +5. Verify that the AI assistant chat history list appears with past conversation items. + + + + + +## Core Concepts + +- **`CometChatAIAssistantChatHistory`**: The main component class that renders the AI assistant chat history list. It is a Composite Component that can be launched via button clicks or any user-triggered action. +- **Actions**: Callbacks such as `setOnItemClickListener`, `setOnItemLongClickListener`, `setOnNewChatClickListener`, and `setOnCloseClickListener` that let you respond to user interactions. +- **Style**: XML theme styles applied via `setStyle()` to customize colors, fonts, and visual appearance of the chat history. +- **Functionality**: Methods like `setUser`, `setErrorStateVisibility`, and `setEmptyStateVisibility` that configure the component's behavior and state visibility. + +## Actions and Events + +### Callback Methods + +What you're changing: How the component responds to user interactions such as taps, long-presses, new chat clicks, and close clicks. + +- **Where**: Activity or Fragment where you hold a reference to `CometChatAIAssistantChatHistory`. +- **Applies to**: `CometChatAIAssistantChatHistory`. +- **Default behavior**: Predefined actions execute automatically when the user interacts with the component. +- **Override**: Call the corresponding setter method to replace the default behavior with your own logic. + +#### `setOnItemClickListener` + +Function invoked when a chat history item is clicked, used to open an AI assistant chat screen. + + + + +```kotlin YourActivity.kt lines +binding.cometchatAiAssistantChatHistory.setOnItemClickListener { view, position, message -> + + } +``` + + + +```kotlin lines +import com.cometchat.uikit.compose.presentation.aiassistantchathistory.ui.CometChatAIAssistantChatHistory + +CometChatAIAssistantChatHistory( + onItemClick = { message -> + Log.i(TAG, "Item clicked: ${message.id}") + } +) +``` + + + +> **What this does:** Replaces the default item-click behavior. When a user taps a chat history item, your custom lambda executes instead of the built-in navigation. + +#### `setOnItemLongClickListener` + +Function executed when a chat history item is long-pressed, allowing additional actions like delete or block. + + + + +```kotlin YourActivity.kt lines +binding.cometchatAiAssistantChatHistory.setOnItemLongClickListener { view, position, message -> + + } +``` + + + +```kotlin lines +CometChatAIAssistantChatHistory( + onItemLongClick = { message -> + Log.i(TAG, "Item long clicked: ${message.id}") + } +) +``` + + + +> **What this does:** Replaces the default long-press behavior. When a user long-presses a chat history item, your custom lambda executes. + +#### `setOnNewChatClickListener` + +Function triggered when the new chat button is clicked, used to start a new conversation with the AI assistant. + + + + +```kotlin YourActivity.kt lines +binding.cometchatAiAssistantChatHistory.setOnNewChatClickListener { + + } +``` + + + +```kotlin lines +CometChatAIAssistantChatHistory( + onNewChatClick = { + Log.i(TAG, "New chat clicked") + } +) +``` + + + +> **What this does:** Replaces the default new-chat-click behavior. When the user taps the new chat button, your custom logic runs instead of the built-in action. + +#### `setOnCloseClickListener` + +Function activated when the close button is clicked, used to exit the chat history view. + + + + +```kotlin YourActivity.kt lines +binding.cometchatAiAssistantChatHistory.setOnCloseClickListener { + + } +``` + + + +```kotlin lines +CometChatAIAssistantChatHistory( + onCloseClick = { + Log.i(TAG, "Close clicked") + } +) +``` + + + +> **What this does:** Replaces the default close-click behavior. When the user taps the close button, your custom logic runs instead of the built-in exit action. + +- **Verify**: After setting an action callback, trigger the corresponding user interaction (tap, long-press, new chat, close) and confirm your custom logic executes instead of the default behavior. + +## Styling + +What you're changing: The visual appearance of the AI Assistant Chat History component using XML theme styles. + +- **Where**: `themes.xml` for style definitions, and your Activity/Fragment for applying the style. +- **Applies to**: `CometChatAIAssistantChatHistory`. +- **Default behavior**: The component uses its default style. +- **Override**: Define a custom style in `themes.xml`, then call `setStyle()` on the component. + + + + + +- **Code**: + +```xml themes.xml lines + + + +``` + +> **What this does:** Defines a custom style `CustomAIAssistantChatHistoryStyle` that sets the background color to `#FFFAF6` for the component, header, new chat area, date separator, and items. It applies a Times New Roman font to the header, new chat text, date separator, and item text. A helper style `textStyleTimesNewRoman` defines the font family. + + + + +```kotlin lines +binding.cometchatAiAssistantChatHistory.setStyle(R.style.CustomAIAssistantChatHistoryStyle); +``` + + + +```kotlin lines +import com.cometchat.uikit.compose.presentation.aiassistantchathistory.style.CometChatAIAssistantChatHistoryStyle + +CometChatAIAssistantChatHistory( + style = CometChatAIAssistantChatHistoryStyle.default().copy( + chatHistoryBackgroundColor = Color(0xFFEDEAFA) + ) +) +``` + + + +> **What this does:** Applies the `CustomAIAssistantChatHistoryStyle` theme to the `CometChatAIAssistantChatHistory` component, changing the background colors and fonts. + +To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit/src/main/res/values/attr_cometchat_ai_assistant_chat_history.xml). + +- **Verify**: The chat history component displays with the `#FFFAF6` background color and Times New Roman font for header text, new chat text, date separator text, and item text. + +## Functionality + +What you're changing: Small functional customizations such as setting the user and toggling visibility of UI states. + +- **Where**: Activity or Fragment where you hold a reference to `CometChatAIAssistantChatHistory`. +- **Applies to**: `CometChatAIAssistantChatHistory`. +- **Default behavior**: All UI states are visible with default settings. +- **Override**: Call the corresponding method on the component instance. + +| Methods | Description | Code | +| --- | --- | --- | +| `setUser` | Sets the user whose chat histories with the AI assistant need to be fetched. This is a required property for the component to function. The user's role must be `@agentic`. | `.setUser(user);` | +| `setErrorStateVisibility` | Toggles the visibility of the error state of the component | `.setErrorStateVisibility(View.GONE);` | +| `setEmptyStateVisibility` | Toggles the visibility of the empty state of the component | `.setEmptyStateVisibility(View.GONE);` | + +- **Verify**: After calling `setUser(user)`, confirm the component fetches and displays the AI assistant chat histories for that user. After calling a visibility method, confirm the corresponding UI state is shown or hidden. + +## Customization Matrix + +| What you want to change | Where | Property/API | Example | +| --- | --- | --- | --- | +| Component background color | `themes.xml` | `cometChatAIAssistantChatHistoryBackgroundColor` | `#FFFAF6` | +| Header background color | `themes.xml` | `cometChatAIAssistantChatHistoryHeaderBackgroundColor` | `#FFFAF6` | +| Header text color | `themes.xml` | `cometChatAIAssistantChatHistoryHeaderTextColor` | `?attr/cometchatTextColorPrimary` | +| Header text appearance | `themes.xml` | `cometChatAIAssistantChatHistoryHeaderTextAppearance` | `@style/textStyleTimesNewRoman` | +| New chat background color | `themes.xml` | `cometChatAIAssistantChatHistoryNewChatBackgroundColor` | `#FFFAF6` | +| New chat text color | `themes.xml` | `cometChatAIAssistantChatHistoryNewChatTextColor` | `?attr/cometchatTextColorPrimary` | +| New chat text appearance | `themes.xml` | `cometChatAIAssistantChatHistoryNewChatTextAppearance` | `@style/textStyleTimesNewRoman` | +| Date separator text appearance | `themes.xml` | `cometChatAIAssistantChatHistoryDateSeparatorTextAppearance` | `@style/textStyleTimesNewRoman` | +| Date separator text color | `themes.xml` | `cometChatAIAssistantChatHistoryDateSeparatorTextColor` | `?attr/cometchatTextColorTertiary` | +| Date separator background color | `themes.xml` | `cometChatAIAssistantChatHistoryDateSeparatorBackgroundColor` | `#FFFAF6` | +| Item background color | `themes.xml` | `cometChatAIAssistantChatHistoryItemBackgroundColor` | `#FFFAF6` | +| Item text appearance | `themes.xml` | `cometChatAIAssistantChatHistoryItemTextAppearance` | `@style/textStyleTimesNewRoman` | +| Item text color | `themes.xml` | `cometChatAIAssistantChatHistoryItemTextColor` | `?attr/cometchatTextColorPrimary` | +| Apply a custom style | Activity/Fragment | `setStyle(int styleRes)` | `binding.cometchatAiAssistantChatHistory.setStyle(R.style.CustomAIAssistantChatHistoryStyle);` | +| Set the user for fetching history | Activity/Fragment | `setUser(User)` | `.setUser(user);` | +| Error state visibility | Activity/Fragment | `setErrorStateVisibility(int)` | `.setErrorStateVisibility(View.GONE);` | +| Empty state visibility | Activity/Fragment | `setEmptyStateVisibility(int)` | `.setEmptyStateVisibility(View.GONE);` | + +## Next Steps + + + + Display messages in a conversation + + + Browse recent conversations + + + Browse and search available users + + + Search across conversations and messages + + \ No newline at end of file diff --git a/ui-kit/android/v6/ai-features.mdx b/ui-kit/android/v6/ai-features.mdx index 3a9ffa427..d9e7c149a 100644 --- a/ui-kit/android/v6/ai-features.mdx +++ b/ui-kit/android/v6/ai-features.mdx @@ -12,7 +12,7 @@ description: "Integrate AI-powered conversation starters, smart replies, and con | AI features | Conversation Starter, Smart Replies, Conversation Summary | | Key components | [Message List](/ui-kit/android/v6/message-list) (Conversation Starter), [Message Composer](/ui-kit/android/v6/message-composer) (Smart Replies, Summary) | | Activation | Enable each AI feature from the CometChat Dashboard — UI Kit auto-integrates them, no additional code required | -| Related | [Core Features](/ui-kit/android/v6/core-features), [Extensions](/ui-kit/android/v6/extensions), [AI Agent Guide](/ui-kit/android/guide-ai-agent) | +| Related | [Core Features](/ui-kit/android/v6/core-features), [Extensions](/ui-kit/android/v6/extensions), [AI Agent Guide](/ui-kit/android/v6/guide-ai-agent) | diff --git a/ui-kit/android/v6/call-features.mdx b/ui-kit/android/v6/call-features.mdx index 62041896a..55fa8540e 100644 --- a/ui-kit/android/v6/call-features.mdx +++ b/ui-kit/android/v6/call-features.mdx @@ -33,7 +33,7 @@ Add the following dependency to your `build.gradle.kts` file: ```kotlin build.gradle.kts dependencies { - implementation("com.cometchat:chatuikit-kotlin-android:6.0.0-beta.1") + implementation("com.cometchat:chatuikit-kotlin-android:6.0.0-beta2") implementation("com.cometchat:calls-sdk-android:4.3.3") } ``` @@ -42,7 +42,7 @@ dependencies { ```kotlin build.gradle.kts dependencies { - implementation("com.cometchat:chatuikit-compose-android:6.0.0-beta.1") + implementation("com.cometchat:chatuikit-compose-android:6.0.0-beta2") implementation("com.cometchat:calls-sdk-android:4.3.3") } ``` diff --git a/ui-kit/android/v6/calling-integration.mdx b/ui-kit/android/v6/calling-integration.mdx index d3c4902eb..73e6b10d9 100644 --- a/ui-kit/android/v6/calling-integration.mdx +++ b/ui-kit/android/v6/calling-integration.mdx @@ -19,7 +19,7 @@ Add the CometChat Calls SDK dependency alongside your chosen UI Kit module: ```kotlin build.gradle.kts dependencies { - implementation("com.cometchat:chatuikit-kotlin-android:6.0.0-beta.1") + implementation("com.cometchat:chatuikit-kotlin-android:6.0.0-beta2") implementation("com.cometchat:calls-sdk-android:4.3.3") } ``` @@ -28,7 +28,7 @@ dependencies { ```kotlin build.gradle.kts dependencies { - implementation("com.cometchat:chatuikit-compose-android:6.0.0-beta.1") + implementation("com.cometchat:chatuikit-compose-android:6.0.0-beta2") implementation("com.cometchat:calls-sdk-android:4.3.3") } ``` diff --git a/ui-kit/android/v6/component-styling.mdx b/ui-kit/android/v6/component-styling.mdx index c04771737..d1313cc3b 100644 --- a/ui-kit/android/v6/component-styling.mdx +++ b/ui-kit/android/v6/component-styling.mdx @@ -704,6 +704,181 @@ Attribute references: - [Mentions attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit-kotlin/src/main/res/values/attr_cometchat_mentions.xml) - [Message Bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit-kotlin/src/main/res/values/attr_cometchat_message_bubble.xml) +#### Search + +The `CometChatSearch` component provides cross-conversation and message search UI. + + + + + +What you're changing: search background and typography styles. + +- **Where to change it**: `res/values/themes.xml` + +- **Applies to**: `CometChatSearch` + +- **Default behavior**: UI Kit default search colors and text appearance. + +- **Override**: set `cometchatSearchStyle` in `AppTheme`. + +- **Code**: +```xml res/values/themes.xml lines + + + + + + + +``` + +- **What this does**: applies custom search colors and text styles across search UI sections. + +- **Verify**: open Search and check section headers, chips, and list items. + +Attribute references: +- [Search attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit/src/main/res/values/attr_cometchat_search.xml) + + +#### Message Information + +The `CometChatMessageInformation` component displays message metadata such as delivery and read status. + + + + + +What you're changing: message information styling for metadata views. + +- **Where to change it**: `res/values/themes.xml` + +- **Applies to**: `CometChatMessageInformation` + +- **Default behavior**: UI Kit default metadata styling. + +- **Override**: set `cometchatMessageInformationStyle` in `AppTheme`. + +- **Code**: +```xml res/values/themes.xml lines + + + + + +``` + +- **What this does**: wires a custom Message Information style so you can override specific metadata attributes. + +- **Verify**: open Message Information and confirm your overrides apply. + +Attribute references: +- [Message Information attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit/src/main/res/values/attr_cometchat_message_information.xml) + + +#### Message Option Sheet + +The `CometChatMessageOptionSheet` component is the action menu for message-level actions. + + + + + +What you're changing: option sheet background and icon tint. + +- **Where to change it**: `res/values/themes.xml` + +- **Applies to**: `CometChatMessageOptionSheet` + +- **Default behavior**: UI Kit default option sheet styling. + +- **Override**: set `cometchatPopupMenuStyle` in `AppTheme`. + +- **Code**: +```xml res/values/themes.xml lines + + + + + +``` + +- **What this does**: updates message option sheet icon tint and background color. + +- **Verify**: long-press a message and confirm the option sheet styling. + +Attribute references: +- [Message Option Sheet attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit/src/main/res/values/attr_cometchat_message_option_sheet.xml) + + +#### Attachment Option Sheet + +The `CometChatAttachmentOptionSheet` component renders the attachment picker. + + + + + +What you're changing: attachment option sheet background and icon tint. + +- **Where to change it**: `res/values/themes.xml` + +- **Applies to**: `CometChatAttachmentOptionSheet` + +- **Default behavior**: UI Kit default attachment sheet styling. + +- **Override**: set `cometchatAttachmentOptionSheetStyle` in `AppTheme`. + +- **Code**: +```xml res/values/themes.xml lines + + + + + +``` + +- **What this does**: applies custom colors to the attachment picker sheet. + +- **Verify**: open the attachment menu and confirm background and icons. + +Attribute references: +- [Attachment Option Sheet attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit/src/main/res/values/attr_cometchat_attachment_option_sheet.xml) + + --- ### Calling UI @@ -879,6 +1054,272 @@ Attribute references: - [Outgoing Call attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit-kotlin/src/main/res/values/attr_cometchat_outgoing_call.xml) - [Avatar attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit-kotlin/src/main/res/values/attr_cometchat_avatar.xml) +#### Call Buttons + +The `CometChatCallButton` component renders voice and video call buttons. + + + + + +What you're changing: button background, stroke, and icon tint. + +- **Where to change it**: `res/values/themes.xml` + +- **Applies to**: `CometChatCallButtons` + +- **Default behavior**: UI Kit default call button styling. + +- **Override**: set `cometchatCallButtonsStyle` in `AppTheme`. + +- **Code**: +```xml res/values/themes.xml lines + + + + + +``` + +- **What this does**: customizes call button padding, background, and icon colors. + +- **Verify**: open a chat header and confirm button styling. + +Attribute references: +- [Call Buttons attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit/src/main/res/values/attr_cometchat_call_buttons.xml) + + +--- + +### AI UI +#### AI Assistant Chat History + +The `CometChatAIAssistantChatHistory` component renders the AI conversation history view. + + + + + +What you're changing: background, header, and list typography. + +- **Where to change it**: `res/values/themes.xml` + +- **Applies to**: `CometChatAIAssistantChatHistory` + +- **Default behavior**: UI Kit default AI history styling. + +- **Override**: set `cometChatAIAssistantChatHistoryStyle` in `AppTheme`. + +- **Code**: +```xml res/values/themes.xml lines + + + + + + + +``` + +- **What this does**: applies custom colors and font styling to the AI Assistant history screen. + +- **Verify**: open AI Assistant history and confirm background and header styling. + +Attribute references: +- [AI Assistant Chat History attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit/src/main/res/values/attr_cometchat_ai_assistant_chat_history.xml) + +#### AI Option Sheet + +The `CometChatAIOptionSheet` component renders AI action options. + + + + + +What you're changing: AI option sheet background and icon tint. + +- **Where to change it**: `res/values/themes.xml` + +- **Applies to**: `CometChatAIOptionSheet` + +- **Default behavior**: UI Kit default AI option sheet styling. + +- **Override**: set `cometchatAIOptionSheetStyle` in `AppTheme`. + +- **Code**: +```xml res/values/themes.xml lines + + + + + +``` + +- **What this does**: customizes AI option sheet colors. + +- **Verify**: open AI actions and confirm the option sheet styling. + +Attribute references: +- [AI Option Sheet attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit/src/main/res/values/attr_cometchat_ai_option_sheet.xml) + +#### Conversation Starter + +The `CometChatConversationStarter` component renders AI-powered conversation starters. + + + + + +What you're changing: conversation starter item backgrounds. + +- **Where to change it**: `res/values/themes.xml` + +- **Applies to**: `CometChatConversationStarter` + +- **Default behavior**: UI Kit default conversation starter styling. + +- **Override**: set `cometchatAIConversationStarterStyle` in `AppTheme`. + +- **Code**: +```xml res/values/themes.xml lines + + + + + +``` + +- **What this does**: applies a custom background color to AI conversation starter items. + +- **Verify**: open a new chat and confirm the conversation starter chip color. + +Attribute references: +- [AI Conversation Starter attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit/src/main/res/values/attr_cometchat_ai_conversation_starter.xml) + +#### Conversation Summary + +The `CometChatConversationSummary` component renders AI-generated summaries of chats. + + + + + +What you're changing: conversation summary background color. + +- **Where to change it**: `res/values/themes.xml` + +- **Applies to**: `CometChatConversationSummary` + +- **Default behavior**: UI Kit default conversation summary styling. + +- **Override**: set `cometchatAIConversationSummaryStyle` in `AppTheme`. + +- **Code**: +```xml res/values/themes.xml lines + + + + + +``` + +- **What this does**: applies a custom background color to conversation summary cards. + +- **Verify**: open a chat summary and confirm the background color. + +Attribute references: +- [AI Conversation Summary attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit/src/main/res/values/attr_cometchat_ai_conversation_summary.xml) + +#### Smart Replies + +The `CometChatSmartReplies` component renders AI-generated reply suggestions. + + + + + +What you're changing: smart reply background, item color, and stroke. + +- **Where to change it**: `res/values/themes.xml` + +- **Applies to**: `CometChatSmartReplies` + +- **Default behavior**: UI Kit default smart replies styling. + +- **Override**: set `cometchatAISmartRepliesStyle` in `AppTheme`. + +- **Code**: +```xml res/values/themes.xml lines + + + + + +``` + +- **What this does**: customizes smart reply container and chip styling. + +- **Verify**: open a conversation with smart replies enabled and confirm chip styling. + +Attribute references: +- [AI Smart Replies attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit/src/main/res/values/attr_cometchat_ai_smart_replies.xml) + + --- ### Base Components @@ -1092,6 +1533,184 @@ CometChatReactionList( Attribute references: - [Reaction List attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit-kotlin/src/main/res/values/attr_cometchat_reaction_list.xml) +#### Date + +The `CometChatDate` component formats timestamps in lists and message threads. + + + + + +What you're changing: date text color. + +- **Where to change it**: `res/values/themes.xml` + +- **Applies to**: `CometChatDate` + +- **Default behavior**: UI Kit default date styling. + +- **Override**: set `cometchatDateStyle` in `AppTheme`. + +- **Code**: +```xml res/values/themes.xml lines + + + + + +``` + +- **What this does**: customizes date text color in UI Kit lists and headers. + +- **Verify**: check any timestamp and confirm the color. + +Attribute references: +- [Date attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit/src/main/res/values/attr_cometchat_date.xml) + + +#### Receipts + +The `CometChatReceipts` component renders read and delivered status icons. + + + + + +What you're changing: read receipt icon drawable. + +- **Where to change it**: `res/drawable/read_receipts.xml` and `res/values/themes.xml` + +- **Applies to**: `CometChatReceipts` + +- **Default behavior**: UI Kit default receipt icons. + +- **Override**: set `cometchatMessageReceiptStyle` in `AppTheme` and reference a custom drawable. + +- **Code**: +```xml res/drawable/read_receipts.xml lines + + + + +``` + +- **What this does**: defines a custom read receipt icon. + +- **Code**: +```xml res/values/themes.xml lines + + + + + +``` + +- **What this does**: applies the custom receipt icon to message status indicators. + +- **Verify**: send a message and check the receipt icon for read status. + +Attribute references: +- [Message Receipt attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit/src/main/res/values/attr_cometchat_message_receipt.xml) + + +#### Media Recorder + +The `CometChatMediaRecorder` component controls audio and video message recording. + + + + + +What you're changing: recorder icon sizes and recording button background color. + +- **Where to change it**: `res/values/themes.xml` + +- **Applies to**: `CometChatMediaRecorder` + +- **Default behavior**: UI Kit default media recorder styling. + +- **Override**: set `cometchatMediaRecorderStyle` in `AppTheme`. + +- **Code**: +```xml res/values/themes.xml lines + + + + + +``` + +- **What this does**: applies custom sizing and color to the media recorder UI. + +- **Verify**: open the recorder and check icon sizes and record button color. + +Attribute references: +- [Media Recorder attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit/src/main/res/values/attr_cometchat_media_recorder.xml) + + +#### Sticker Keyboard + +The `CometChatStickerKeyboard` component renders the sticker picker UI. + + + + + +What you're changing: sticker keyboard background color. + +- **Where to change it**: `res/values/themes.xml` + +- **Applies to**: `CometChatStickerKeyboard` + +- **Default behavior**: UI Kit default sticker keyboard styling. + +- **Override**: set `cometchatStickerKeyboardStyle` in `AppTheme`. + +- **Code**: +```xml res/values/themes.xml lines + + + + + +``` + +- **What this does**: applies a custom background color to the sticker keyboard. + +- **Verify**: open the sticker keyboard and confirm the background color. + +Attribute references: +- [Sticker Keyboard attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit/src/main/res/values/attr_cometchat_sticker_keyboard.xml) + + --- ## Customization matrix @@ -1103,5 +1722,10 @@ Attribute references: | Group list titles | `themes.xml` / style param | `cometchatGroupsStyle` | `cometchatGroupsTitleTextColor` | | Header call icons | `themes.xml` / style param | `cometchatMessageHeaderStyle` | `cometchatMessageHeaderCallButtonsStyle` | | Message list background | `themes.xml` / style param | `cometchatMessageListStyle` | `cometchatMessageListBackgroundColor` | +| Search styling | `themes.xml` / style param | `cometchatSearchStyle` | `cometchatSearchBackgroundColor` | +| Message Information | `themes.xml` / style param | `cometchatMessageInformationStyle` | `cometchatMessageInformationBackgroundColor` | +| AI Chat History | `themes.xml` / style param | `cometchatAIAssistantChatHistoryStyle` | `cometchatAIAssistantChatHistoryBackgroundColor` | +| Date formatting | `themes.xml` / style param | `cometchatDateStyle` | `cometchatDateTextColor` | +| Receipts icons | `themes.xml` / style param | `cometchatReceiptsStyle` | `cometchatReceiptsReadColor` | | Composer send button | `res/drawable/` + `themes.xml` | `cometchatMessageComposerActiveSendButtonDrawable` | `@drawable/active_send_button` | | Call buttons styling | `themes.xml` / style param | `cometchatCallButtonsStyle` | `cometchatCallButtonsVideoCallBackgroundColor` | diff --git a/ui-kit/android/v6/core-features.mdx b/ui-kit/android/v6/core-features.mdx index fcc6bef02..ad33a43b5 100644 --- a/ui-kit/android/v6/core-features.mdx +++ b/ui-kit/android/v6/core-features.mdx @@ -9,7 +9,7 @@ description: "Overview of CometChat's core chat features including instant messa | --- | --- | | Packages | `com.cometchat:chatuikit-kotlin-android` (Kotlin XML Views), `com.cometchat:chatuikit-compose-android` (Jetpack Compose) | | Required setup | `CometChatUIKit.init()` then `CometChatUIKit.login()` — must complete before rendering any component | -| Core features | Instant Messaging, Media Sharing, Read Receipts, Mark as Unread, Typing Indicator, User Presence, Reactions, Mentions, Quoted Reply, Threaded Conversations, Moderation, Report Message, Group Chat | +| Core features | Instant Messaging, Media Sharing, Read Receipts, Mark as Unread, Typing Indicator, User Presence, Reactions, Mentions, Rich Text Formatting, Quoted Reply, Search, Threaded Conversations, Moderation, Report Message, Group Chat | | Key components | `CometChatConversations`, `CometChatMessageList`, `CometChatMessageComposer`, `CometChatMessageHeader`, `CometChatUsers`, `CometChatGroups`, `CometChatGroupMembers`, `CometChatMessageInformation`, `CometChatThreadHeader` | | Theming | See [Theming](/ui-kit/android/v6/theme-introduction) | @@ -124,6 +124,19 @@ Address specific users in a conversation by typing `@` to trigger mention sugges | [CometChatMessageComposer](/ui-kit/android/v6/message-composer) | Triggers mention suggestions on `@` and inserts formatted mentions. | | [CometChatMessageList](/ui-kit/android/v6/message-list) | Renders mentions with distinct styling in the message flow. | + +## Rich Text Formatting + +Rich Text Formatting allows users to style their messages with bold, italic, strikethrough, code, code blocks, blockquotes, ordered/unordered lists, and links. This brings richer expression to conversations and helps users emphasize key points. + + + + + +| Component | Role | +| --- | --- | +| [CometChatMessageComposer](/ui-kit/android/v6/message-composer) | Provides a built-in rich text editor with formatting toolbar and text selection menu items for bold, italic, strikethrough, code, links, lists, blockquotes, and code blocks. | +| [CometChatMessageList](/ui-kit/android/v6/message-list) | Renders formatted messages with the appropriate styling automatically applied, ensuring that rich text formatting is displayed exactly as intended by the sender. | ## Threaded Conversations Respond directly to a specific message, keeping conversations organized. @@ -196,6 +209,21 @@ Learn more about flagged messages in the [Flagged Messages](/moderation/flagged- | --- | --- | | [CometChatMessageList](/ui-kit/android/v6/message-list) | Provides the "Report Message" option in message actions. | +## Conversation and Advanced Search + +Conversation and Advanced Search enables users to quickly find conversations, messages, and media across chats in real time. It supports filters, scopes, and custom actions, allowing users to locate content efficiently while keeping the chat experience smooth and intuitive. + + + + + +| Component | Role | +| --- | --- | +| [CometChatSearch](/ui-kit/android/v6/search) | Allows users to search across conversations and messages in real time. Users can click on a result to open the conversation or jump directly to a specific message. | +| [CometChatMessageHeader](/ui-kit/android/v6/message-header) | Shows the search button in the chat header, allowing users to search within a conversation. | +| [CometChatMessageList](/ui-kit/android/v6/message-list) | Shows the selected message when clicked from search results and highlights it in the message list. | +| [CometChatConversations](/ui-kit/android/v6/conversations) | Displays the search input. | + --- ## Next Steps diff --git a/ui-kit/android/v6/getting-started-jetpack.mdx b/ui-kit/android/v6/getting-started-jetpack.mdx index 0c28eb164..70daf0f25 100644 --- a/ui-kit/android/v6/getting-started-jetpack.mdx +++ b/ui-kit/android/v6/getting-started-jetpack.mdx @@ -98,7 +98,7 @@ android { dependencies { // CometChat Jetpack Compose UI Kit - implementation("com.cometchat:chatuikit-compose-android:6.0.0-beta.1") + implementation("com.cometchat:chatuikit-compose-android:6.0.0-beta2") // (Optional) Voice/video calling implementation("com.cometchat:calls-sdk-android:latest") diff --git a/ui-kit/android/v6/getting-started-kotlin.mdx b/ui-kit/android/v6/getting-started-kotlin.mdx index 2170d4953..f11460459 100644 --- a/ui-kit/android/v6/getting-started-kotlin.mdx +++ b/ui-kit/android/v6/getting-started-kotlin.mdx @@ -93,7 +93,7 @@ android { dependencies { // CometChat Kotlin UI Kit - implementation("com.cometchat:chatuikit-kotlin-android:6.0.0-beta.1") + implementation("com.cometchat:chatuikit-kotlin-android:6.0.0-beta2") // (Optional) Voice/video calling implementation("com.cometchat:calls-sdk-android:latest") diff --git a/ui-kit/android/v6/getting-started.mdx b/ui-kit/android/v6/getting-started.mdx index e44f68347..af5b47393 100644 --- a/ui-kit/android/v6/getting-started.mdx +++ b/ui-kit/android/v6/getting-started.mdx @@ -88,7 +88,7 @@ Inside `libs.versions.toml`, add the versions: ```toml libs.versions.toml [versions] -cometchat-ui-kit = "6.0.0-beta.1" +cometchat-ui-kit = "6.0.0-beta2" cometchat-calls-sdk = "4.3.3" ``` @@ -132,7 +132,7 @@ Open the app-level `build.gradle.kts` file and add the dependency for your chose ```kotlin build.gradle.kts dependencies { - implementation("com.cometchat:chatuikit-kotlin-android:6.0.0-beta.1") + implementation("com.cometchat:chatuikit-kotlin-android:6.0.0-beta2") // (Optional) Include if using voice/video calling features implementation("com.cometchat:calls-sdk-android:4.3.3") @@ -143,7 +143,7 @@ dependencies { ```kotlin build.gradle.kts dependencies { - implementation("com.cometchat:chatuikit-compose-android:6.0.0-beta.1") + implementation("com.cometchat:chatuikit-compose-android:6.0.0-beta2") // (Optional) Include if using voice/video calling features implementation("com.cometchat:calls-sdk-android:4.3.3") diff --git a/ui-kit/android/v6/guide-ai-agent.mdx b/ui-kit/android/v6/guide-ai-agent.mdx new file mode 100644 index 000000000..2da496105 --- /dev/null +++ b/ui-kit/android/v6/guide-ai-agent.mdx @@ -0,0 +1,419 @@ +--- +title: "AI Agent Integration" +sidebarTitle: "AI Agent Integration" +description: "Enable AI-powered conversational assistance with chat history, contextual responses, and seamless handoffs." +--- + + + +| Field | Value | +| --- | --- | +| Packages | `com.cometchat:chatuikit-kotlin-android` · `com.cometchat:chatuikit-compose-android` | +| Key components | `CometChatAIAssistantChatHistory`, `CometChatMessageList`, `CometChatMessageComposer`, `CometChatMessageHeader` | +| Purpose | Enable AI-powered conversational assistance with chat history, contextual responses, and seamless handoffs. | +| Related | [AI Assistant Chat History](/ui-kit/android/v6/ai-assistant-chat-history), [AI Features](/ui-kit/android/v6/ai-features), [All Guides](/ui-kit/android/v6/guide-overview) | + + + +Enable intelligent conversational AI capabilities in your Android app using CometChat UIKit v6 with AI Agent integration: + +- **AI Assistant Chat History** +- **Chat History Management** +- **Contextual Responses** +- **Agent Detection** +- **Seamless Handoffs** + +Transform your chat experience with AI-powered assistance that provides intelligent responses and seamless integration with your existing chat infrastructure. + +## Overview + +Users can interact with AI agents through a dedicated chat interface that: + +- Provides intelligent responses based on conversation context. +- Maintains chat history for continuity. +- Seamlessly integrates with your existing user chat system. + +The AI Agent chat interface provides a familiar messaging experience enhanced with AI capabilities, accessible through your main chat flow or as a standalone feature. + + + + + +## Prerequisites + +- Android Studio project with `com.cometchat:chatuikit-kotlin-android` or `com.cometchat:chatuikit-compose-android` in `build.gradle`. +- Internet permission in `AndroidManifest.xml`. +- Valid CometChat **App ID**, **Region**, and **Auth Key** configured via `UIKitSettings`. +- User logged in with `CometChatUIKit.login()`. +- AI Agent configured in your CometChat dashboard. + +## Components + +| Component / Class | Role | +|:----------------------------------|:-----| +| `AIAssistantChatActivity` | Main activity for AI agent chat. | +| `CometChatAIAssistantChatHistory` | Displays previous AI conversation history. | +| `CometChatMessageList` | Shows AI messages with threading support. | +| `CometChatMessageComposer` | Input interface for AI conversations. | +| `CometChatMessageHeader` | Header with AI agent info and controls. | + +## Integration Steps + +### Step 1 — Activity / Screen Setup + +Create the AI Assistant chat screen with proper layout configuration. + + + +```kotlin AIAssistantChatActivity.kt lines +class AIAssistantChatActivity : AppCompatActivity() { + private lateinit var binding: ActivityAiAssistantChatBinding + + override fun onCreate(savedInstanceState: Bundle?) { + super.onCreate(savedInstanceState) + binding = ActivityAiAssistantChatBinding.inflate(layoutInflater) + setContentView(binding.root) + + val messageJson = intent.getStringExtra(getString(R.string.app_base_message)) + val userJson = intent.getStringExtra(getString(R.string.app_user)) + + var user: User? = null + var parentMessage: BaseMessage? = null + + if (!userJson.isNullOrEmpty()) + user = User.fromJson(userJson) + if (!messageJson.isNullOrEmpty()) + parentMessage = BaseMessage.processMessage(JSONObject(messageJson)) + + initializeComponents(user, parentMessage) + initClickListeners() + } + + private fun initializeComponents(user: User?, parentMessage: BaseMessage?) { + user?.let { + binding.messageHeader.user = it + binding.messageList.user = it + binding.messageComposer.user = it + } + + if (parentMessage != null) { + binding.messageList.setParentMessage(parentMessage.getId()) + binding.messageComposer.setParentMessageId(parentMessage.getId()) + } + + binding.messageList.setStyle(R.style.CustomCometChatMessageListStyle) + binding.messageComposer.style = R.style.CustomMessageComposerStyle + } +} +``` + + + +```kotlin AIAssistantChatScreen.kt lines +import com.cometchat.uikit.compose.presentation.messageheader.ui.CometChatMessageHeader +import com.cometchat.uikit.compose.presentation.messagelist.ui.CometChatMessageList +import com.cometchat.uikit.compose.presentation.messagecomposer.ui.CometChatMessageComposer + +@Composable +fun AIAssistantChatScreen( + user: User, + parentMessageId: Int? = null, + onNewChatClick: () -> Unit = {}, + onChatHistoryClick: () -> Unit = {} +) { + Column(modifier = Modifier.fillMaxSize()) { + CometChatMessageHeader( + user = user + ) + + CometChatMessageList( + user = user, + parentMessageId = parentMessageId ?: 0, + modifier = Modifier.weight(1f) + ) + + CometChatMessageComposer( + user = user, + parentMessageId = parentMessageId ?: 0 + ) + } +} +``` + + + +**File reference:** +[`AIAssistantChatActivity.kt`](https://github.com/cometchat/cometchat-uikit-android/blob/v6/ai-sample-app/src/main/java/com/cometchat/ai/sampleapp/ui/activity/AIAssistantChatActivity.kt) + +### Step 2 — Layout (XML Views only) + +Add `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer` to your layout. + +```xml activity_ai_assistant_chat.xml lines + + + + + + + + + +``` + +> **Note:** In Jetpack Compose, layout is handled declaratively in the composable function — no XML needed. + +### Step 3 — Style of Message List & Composer (XML Views only) + +Define custom styles for the message list and composer to differentiate AI agent chats. + +```xml themes.xml lines + + + + + +``` + +> **Jetpack Compose:** Pass a custom style object via the `style` parameter on each composable instead of XML styles. + +### Step 4 — Initialize click listeners + +Initialize click listeners to handle new chat creation and chat history access. + + + +```kotlin AIAssistantChatActivity.kt lines +private fun initClickListeners() { + // New chat creation + binding.messageHeader.setNewChatButtonClick { + Utils.hideKeyBoard(this@AIAssistantChatActivity, binding.root) + val intent = Intent(this@AIAssistantChatActivity, AIAssistantChatActivity::class.java) + intent.putExtra(getString(R.string.app_user), user.toJson().toString()) + startActivity(intent) + finish() + } + + // Chat history access + binding.messageHeader.setChatHistoryButtonClick { + val intent = Intent(this@AIAssistantChatActivity, AIAssistantChatHistoryActivity::class.java) + intent.putExtra(getString(R.string.app_user), user.toJson().toString()) + startActivity(intent) + } +} +``` + + + +```kotlin AIAssistantChatScreen.kt lines +// In Jetpack Compose, pass callbacks as lambda parameters: +AIAssistantChatScreen( + user = aiUser, + onNewChatClick = { + // Navigate to a fresh AI chat screen + navController.navigate("ai_chat/${Gson().toJson(aiUser)}") + }, + onChatHistoryClick = { + // Navigate to chat history screen + navController.navigate("ai_chat_history/${Gson().toJson(aiUser)}") + } +) +``` + + + +### Step 5 — AI Assistant Chat History screen + +Create a screen to host the `CometChatAIAssistantChatHistory` component. + + + +```kotlin AIAssistantChatHistoryActivity.kt lines +class AIAssistantChatHistoryActivity : AppCompatActivity() { + private lateinit var binding: ActivityAiAssistantChatHistoryBinding + private var user: User? = null + + override fun onCreate(savedInstanceState: Bundle?) { + super.onCreate(savedInstanceState) + binding = ActivityAiAssistantChatHistoryBinding.inflate(layoutInflater) + setContentView(binding.root) + + val userJson = intent.getStringExtra(getString(R.string.app_user)) + + if (userJson != null && userJson.isNotEmpty()) { + user = User.fromJson(userJson) + binding.cometchatAiAssistantChatHistory.setUser(user) + } + + initClickListeners() + } + + private fun initClickListeners() { + binding.cometchatAiAssistantChatHistory.setOnItemClickListener { view, position, message -> + val appEntity = message.getReceiver() + if (appEntity is User) { + user = appEntity + val intent = Intent(this, AIAssistantChatActivity::class.java) + intent.putExtra(getString(R.string.app_user), appEntity.toJson().toString()) + intent.putExtra(getString(R.string.app_base_message), message.getRawMessage().toString()) + startActivity(intent) + finish() + } + } + + binding.cometchatAiAssistantChatHistory.setOnNewChatClickListener { + val intent = Intent(this, AIAssistantChatActivity::class.java) + intent.putExtra(getString(R.string.app_user), user!!.toJson().toString()) + startActivity(intent) + finish() + } + + binding.cometchatAiAssistantChatHistory.setOnCloseClickListener { + finish() + } + } +} +``` + + + +```kotlin AIAssistantChatHistoryScreen.kt lines +import com.cometchat.uikit.compose.presentation.aiassistantchathistory.ui.CometChatAIAssistantChatHistory + +@Composable +fun AIAssistantChatHistoryScreen( + user: User, + navController: NavController +) { + CometChatAIAssistantChatHistory( + modifier = Modifier.fillMaxSize(), + onCloseClick = { + navController.popBackStack() + }, + onNewChatClick = { + navController.navigate("ai_chat/${Gson().toJson(user)}") + }, + onItemClick = { message -> + val receiver = message.receiver + if (receiver is User) { + navController.navigate( + "ai_chat/${Gson().toJson(receiver)}/${message.rawMessage}" + ) + } + } + ) +} +``` + + + +### Step 6 — Chat History layout (XML Views only) + +```xml activity_ai_assistant_chat_history.xml lines + + + + + +``` + +> **Note:** In Jetpack Compose, the `CometChatAIAssistantChatHistory` composable is used directly — no XML layout needed. + +### Step 7 — Launching AI Chat + + + +```kotlin lines +fun launchAIAssistantChat(aiUser: User) { + val intent = Intent(this, AIAssistantChatActivity::class.java) + intent.putExtra(getString(R.string.app_user), aiUser.toJson().toString()) + startActivity(intent) +} +``` + + + +```kotlin lines +// In your NavHost setup: +composable("ai_chat/{userJson}") { backStackEntry -> + val userJson = backStackEntry.arguments?.getString("userJson") + val user = Gson().fromJson(userJson, User::class.java) + AIAssistantChatScreen(user = user) +} + +composable("ai_chat_history/{userJson}") { backStackEntry -> + val userJson = backStackEntry.arguments?.getString("userJson") + val user = Gson().fromJson(userJson, User::class.java) + AIAssistantChatHistoryScreen(user = user, navController = navController) +} +``` + + + +## Implementation Flow Summary + +| Step | Action | +|:-----|:-------| +| 1 | User selects AI agent from chat list | +| 2 | AI chat screen launches | +| 3 | Parse intent data and detect agent chat (Role of user must be "@agentic") | +| 4 | Initialize UI with AI-specific styling | +| 5 | Configure chat history and navigation | +| 6 | Launch chat with AI agent | + +## Customization Options + +- **Custom AI Assistant Empty Chat View:** Customize the empty state view using `setAIAssistantEmptyChatGreetingView()` (XML Views) or the `emptyView` composable slot (Compose). +- **Streaming Speed:** Adjust AI response streaming speed via `setStreamingSpeed()`. +- **AI Assistant Suggested Messages:** Create custom list of suggested messages using `setAIAssistantSuggestedMessages()`. +- **AI Assistant Tools:** Set tools for the AI agent using `setAIAssistantTools()`. + +## Feature Matrix + +| Feature | Kotlin (XML Views) | Jetpack Compose | +|:--------|:-------------------|:----------------| +| AI Chat Interface | `AIAssistantChatActivity` | `AIAssistantChatScreen` composable | +| Chat History | `CometChatAIAssistantChatHistory` XML | `CometChatAIAssistantChatHistory()` composable | +| Message List | `CometChatMessageList` XML | `CometChatMessageList()` composable | +| Message Composer | `CometChatMessageComposer` XML | `CometChatMessageComposer()` composable | + + + + Explore this feature in the CometChat AI Builder: + [GitHub → AI Builder](https://github.com/cometchat/cometchat-uikit-android/tree/v6/ai-sample-app) + + + Explore this feature in the CometChat SampleApp: + [GitHub → SampleApp](https://github.com/cometchat/cometchat-uikit-android/tree/v6/sample-app-kotlin) + + diff --git a/ui-kit/android/v6/guide-overview.mdx b/ui-kit/android/v6/guide-overview.mdx index 21ec20682..2551ff7d3 100644 --- a/ui-kit/android/v6/guide-overview.mdx +++ b/ui-kit/android/v6/guide-overview.mdx @@ -12,7 +12,7 @@ description: "Index of task-oriented feature guides for the CometChat Android UI | Purpose | Index of task-oriented feature guides for the Android UI Kit | | Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-android/tree/v6/sample-app-kotlin) | | Components | [Components Overview](/ui-kit/android/v6/components-overview) | -| Guides | [Block/Unblock](/ui-kit/android/v6/guide-block-unblock-user) · [Call Log Details](/ui-kit/android/v6/guide-call-log-details) · [Group Chat](/ui-kit/android/v6/guide-group-chat) · [Message Privately](/ui-kit/android/v6/guide-message-privately) · [New Chat](/ui-kit/android/v6/guide-new-chat) · [Search Messages](/ui-kit/android/guide-search-messages) · [Threaded Messages](/ui-kit/android/v6/guide-threaded-messages) · [AI Agent](/ui-kit/android/guide-ai-agent) · [Custom Text Formatter](/ui-kit/android/v6/custom-text-formatter-guide) · [Mentions Formatter](/ui-kit/android/v6/mentions-formatter-guide) · [ShortCut Formatter](/ui-kit/android/v6/shortcut-formatter-guide) | +| Guides | [Block/Unblock](/ui-kit/android/v6/guide-block-unblock-user) · [Call Log Details](/ui-kit/android/v6/guide-call-log-details) · [Group Chat](/ui-kit/android/v6/guide-group-chat) · [Message Privately](/ui-kit/android/v6/guide-message-privately) · [New Chat](/ui-kit/android/v6/guide-new-chat) · [Search Messages](/ui-kit/android/v6/guide-search-messages) · [Threaded Messages](/ui-kit/android/v6/guide-threaded-messages) · [AI Agent](/ui-kit/android/v6/guide-ai-agent) · [Custom Text Formatter](/ui-kit/android/v6/custom-text-formatter-guide) · [Mentions Formatter](/ui-kit/android/v6/mentions-formatter-guide) · [ShortCut Formatter](/ui-kit/android/v6/shortcut-formatter-guide) | @@ -39,8 +39,8 @@ The CometChat Android UI Kit is available in two modules: | [Message Privately](/ui-kit/android/v6/guide-message-privately) | Launch a direct 1:1 chat from a profile/list; optionally send initial message to surface conversation. | | [New Chat](/ui-kit/android/v6/guide-new-chat) | Unified entry for starting new 1:1 or group chats with tabbed Users / Groups search + navigation. | | [Threaded Messages](/ui-kit/android/v6/guide-threaded-messages) | Threaded replies: open parent message context, list replies, compose with parent linkage. | -| [Search Messages](/ui-kit/android/guide-search-messages) | Full-text message search across conversations with result routing and navigation. | -| [AI Agent](/ui-kit/android/guide-ai-agent) | Build an AI-powered agent that responds to user messages using CometChat's AI features. | +| [Search Messages](/ui-kit/android/v6/guide-search-messages) | Full-text message search across conversations with result routing and navigation. | +| [AI Agent](/ui-kit/android/v6/guide-ai-agent) | Build an AI-powered agent that responds to user messages using CometChat's AI features. | | [Custom Text Formatter](/ui-kit/android/v6/custom-text-formatter-guide) | Extend `CometChatTextFormatter` to build custom inline text patterns with tracking characters and suggestion lists. | | [Mentions Formatter](/ui-kit/android/v6/mentions-formatter-guide) | Format @mentions with styled tokens, suggestion lists, and click handling. | | [ShortCut Formatter](/ui-kit/android/v6/shortcut-formatter-guide) | Add shortcut text expansion to the message composer via the message-shortcuts extension. | diff --git a/ui-kit/android/v6/guide-search-messages.mdx b/ui-kit/android/v6/guide-search-messages.mdx new file mode 100644 index 000000000..d533d4d82 --- /dev/null +++ b/ui-kit/android/v6/guide-search-messages.mdx @@ -0,0 +1,235 @@ +--- +title: "Search Messages" +sidebarTitle: "Search Messages" +description: "Add full-text message search across conversations with result routing in CometChat Android UI Kit." +--- + + + +| Field | Value | +| --- | --- | +| Packages | `com.cometchat:chatuikit-kotlin-android` · `com.cometchat:chatuikit-compose-android` | +| Key components | `CometChatSearch`, `CometChatMessageList`, `CometChatMessageComposer`, `CometChatMessageHeader` | +| Purpose | Full-text message search across conversations with result routing and navigation | +| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-android/tree/v6/sample-app-kotlin) | +| Related | [Search Component](/ui-kit/android/v6/search), [All Guides](/ui-kit/android/v6/guide-overview) | + + + +Search Messages lets users locate specific messages across conversations and groups using keyword search, then navigate directly to the result. + +Before starting, complete the [Getting Started](/ui-kit/android/v6/getting-started) guide. + +--- + +## Components + +| Component / Class | Role | +|:---|:---| +| `CometChatSearch` | Main search interface with filter chips and result lists | +| `CometChatMessageList` | Displays messages in the selected conversation | +| `CometChatMessageComposer` | Message input for the selected conversation | +| `CometChatMessageHeader` | Header bar showing conversation context | + +--- + +## Integration Steps + +### 1. Add CometChatSearch to your layout + + + +```xml activity_search.xml lines + +``` + + + +```kotlin SearchScreen.kt lines +import com.cometchat.uikit.compose.presentation.search.ui.CometChatSearch + +@Composable +fun SearchScreen(navController: NavController) { + CometChatSearch( + modifier = Modifier.fillMaxSize(), + onConversationClick = { conversation -> + navController.navigate("messages/${Gson().toJson(conversation)}") + }, + onMessageClick = { message -> + if (message.receiverType == CometChatConstants.RECEIVER_TYPE_USER) { + navController.navigate("messages/user/${(message.receiver as User).uid}/${message.id}") + } else { + navController.navigate("messages/group/${(message.receiver as Group).guid}/${message.id}") + } + } + ) +} +``` + + + +--- + +### 2. Handle conversation result clicks + +When a user taps a conversation result, navigate to the message view for that conversation. + + + +```kotlin SearchActivity.kt lines +val search: CometChatSearch = findViewById(R.id.cometchat_search) + +search.setOnConversationClicked { view, position, conversation -> + val intent = Intent(this, ChatActivity::class.java) + intent.putExtra("conversation", conversation) + startActivity(intent) +} +``` + + + +```kotlin SearchScreen.kt lines +// Handled inline via onConversationClick lambda in the CometChatSearch composable above +``` + + + +--- + +### 3. Handle message result clicks + +When a user taps a message result, navigate to the conversation and scroll to that message. + + + +```kotlin SearchActivity.kt lines +search.setOnMessageClicked { view, position, message -> + val intent = Intent(this, ChatActivity::class.java) + if (message.receiverType == CometChatConstants.RECEIVER_TYPE_USER) { + intent.putExtra("uid", (message.receiver as User).uid) + } else { + intent.putExtra("guid", (message.receiver as Group).guid) + } + intent.putExtra("messageId", message.id) + startActivity(intent) +} +``` + + + +```kotlin SearchScreen.kt lines +// Handled inline via onMessageClick lambda in the CometChatSearch composable above +``` + + + +--- + +### 4. Scope search to a specific conversation (optional) + +Restrict search results to a single user or group conversation. + + + +```kotlin lines +// Scope to a specific user conversation +search.setUid("alice-uid") + +// Or scope to a specific group conversation +search.setGuid("group-guid") +``` + + + +```kotlin lines +// Scope to a specific user conversation +CometChatSearch( + uid = "alice-uid", + modifier = Modifier.fillMaxSize(), + onConversationClick = { /* handle click */ }, + onMessageClick = { /* handle click */ } +) + +// Or scope to a specific group conversation +CometChatSearch( + guid = "group-guid", + modifier = Modifier.fillMaxSize(), + onConversationClick = { /* handle click */ }, + onMessageClick = { /* handle click */ } +) +``` + + + +--- + +### 5. Configure search filters (optional) + +Control which filter chips appear. + + + +```kotlin lines +search.setSearchFilters( + listOf( + UIKitConstants.SearchFilter.MESSAGES, + UIKitConstants.SearchFilter.CONVERSATIONS + ) +) +search.setInitialSearchFilter(UIKitConstants.SearchFilter.MESSAGES) +``` + + + +```kotlin lines +import com.cometchat.uikit.core.constants.SearchFilter + +CometChatSearch( + searchFilters = listOf( + SearchFilter.UNREAD, + SearchFilter.GROUPS, + SearchFilter.PHOTOS, + SearchFilter.VIDEOS + ), + modifier = Modifier.fillMaxSize(), + onConversationClick = { /* handle click */ }, + onMessageClick = { /* handle click */ } +) +``` + + + +--- + +## Feature Matrix + +| Feature | Kotlin (XML Views) | Jetpack Compose | +|:---|:---|:---| +| Search interface | `CometChatSearch` XML element | `CometChatSearch()` composable | +| Conversation results | `setOnConversationClicked` | `onConversationClick` lambda | +| Message results | `setOnMessageClicked` | `onMessageClick` lambda | +| Scoped search | `setUid()` / `setGuid()` | `uid` / `guid` parameters | +| Filter chips | `setSearchFilters()` | `searchFilters` parameter | +| Custom views | `setEmptyView()`, `setErrorView()` | `emptyView`, `errorView` composable slots | + +--- + +## Next Steps + + + + The search component reference + + + Display messages in a conversation + + + Browse all feature and formatter guides + + + Full working sample application on GitHub + + diff --git a/ui-kit/android/v6/search.mdx b/ui-kit/android/v6/search.mdx new file mode 100644 index 000000000..7aa3cd0f2 --- /dev/null +++ b/ui-kit/android/v6/search.mdx @@ -0,0 +1,1136 @@ +--- +title: "Search" +description: "Real-time search interface for finding conversations and messages with filters, scopes, and customization options." +--- + + +```json +{ + "component": "CometChatSearch", + "package": "com.cometchat.uikit.kotlin.presentation.search (XML Views) / com.cometchat.uikit.compose.presentation.search (Compose)", + "xmlElement": "", + "description": "Real-time search interface for finding conversations and messages with filters, scopes, and customization options.", + "primaryOutput": { + "conversationClicked": { + "method": "setOnConversationClicked", + "type": "OnItemClick" + }, + "messageClicked": { + "method": "setOnMessageClicked", + "type": "OnItemClick" + } + }, + "methods": { + "data": { + "setConversationsRequestBuilder": { + "type": "ConversationsRequest.ConversationsRequestBuilder", + "default": "SDK default", + "note": "Pass the builder, not the result of .build()" + }, + "setMessagesRequestBuilder": { + "type": "MessagesRequest.MessagesRequestBuilder", + "default": "SDK default", + "note": "Pass the builder, not the result of .build()" + } + }, + "callbacks": { + "setOnConversationClicked": "OnItemClick", + "setOnMessageClicked": "OnItemClick", + "setOnBackPressListener": "OnBackPress", + "setOnError": "OnError", + "setOnEmpty": "OnEmpty", + "setOnLoadMessages": "OnLoad", + "setOnLoadConversations": "OnLoad" + }, + "visibility": { + "setEmptyStateVisibility": { "type": "int (View.VISIBLE | View.GONE)", "default": "View.VISIBLE" }, + "setErrorStateVisibility": { "type": "int", "default": "View.VISIBLE" } + }, + "functionality": { + "setUid": { "type": "String", "note": "Scope search to a specific user conversation" }, + "setGuid": { "type": "String", "note": "Scope search to a specific group conversation" }, + "setSearchFilters": { "type": "List", "note": "Filters rendered as chips" }, + "setInitialSearchFilter": { "type": "UIKitConstants.SearchFilter", "note": "Default active filter on load" }, + "setSearchIn": { "type": "List", "note": "Entities to search in" }, + "setHideGroupType": { "type": "boolean", "default": "false" }, + "setHideUserStatus": { "type": "boolean", "default": "false" } + }, + "viewSlots": { + "setConversationItemView": "ConversationsSearchViewHolderListener — entire conversation item row", + "setTextMessageItemView": "MessagesSearchViewHolderListener — text message item", + "setImageMessageItemView": "MessagesSearchViewHolderListener — image message item", + "setAudioMessageItemView": "MessagesSearchViewHolderListener — audio message item", + "setVideoMessageItemView": "MessagesSearchViewHolderListener — video message item", + "setDocumentMessageItemView": "MessagesSearchViewHolderListener — document message item", + "setLinkMessageItemView": "MessagesSearchViewHolderListener — link message item", + "setInitialView": "@LayoutRes int — initial state before search", + "setEmptyView": "@LayoutRes int — empty state", + "setLoadingView": "View — loading state", + "setErrorView": "View — error state" + }, + "advanced": { + "setTextFormatters": "List — custom text formatters", + "setDateTimeFormatter": "DateTimeFormatterCallback — custom date/time formatting", + "setMentionAllLabelId": "String id, String mentionAllLabel — custom mention-all label", + "setHintText": "String — search bar hint text" + }, + "style": { + "setStyle": { + "type": "@StyleRes int", + "parent": "CometChatSearchStyle" + } + } + }, + "events": [], + "sdkListeners": [] +} +``` + + + +## Where It Fits + +`CometChatSearch` is a composite search component. It searches across conversations and messages in real time and emits the selected result via `setOnConversationClicked` or `setOnMessageClicked`. Wire it to navigation so tapping a conversation opens the message view, or tapping a message scrolls to it in context. + + + +```kotlin ChatActivity.kt lines +class ChatActivity : AppCompatActivity() { + + private lateinit var search: CometChatSearch + private lateinit var messageHeader: CometChatMessageHeader + private lateinit var messageList: CometChatMessageList + private lateinit var messageComposer: CometChatMessageComposer + + override fun onCreate(savedInstanceState: Bundle?) { + super.onCreate(savedInstanceState) + setContentView(R.layout.activity_chat) + + search = findViewById(R.id.cometchat_search) + messageHeader = findViewById(R.id.message_header) + messageList = findViewById(R.id.message_list) + messageComposer = findViewById(R.id.message_composer) + + search.setOnConversationClicked { view, position, conversation -> + val user = conversation.conversationWith as? User + user?.let { + messageHeader.setUser(it) + messageList.setUser(it) + messageComposer.setUser(it) + } + } + + search.setOnMessageClicked { view, position, baseMessage -> + // Navigate to the message in context + } + } +} +``` + + +```kotlin lines +CometChatSearch( + onMessageClick = { message -> + Log.i(TAG, "Message Clicked!") + } +) +``` + + + +## Quick Start + +Add the component to your layout XML: + +```xml activity_search.xml lines + + + + + + +``` + + + + + +Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()`, a user logged in, and the `cometchat-chat-uikit-android` dependency added. + +To add programmatically in an Activity: + + + +```kotlin SearchActivity.kt lines +class SearchActivity : AppCompatActivity() { + private lateinit var binding: ActivitySearchBinding + + override fun onCreate(savedInstanceState: Bundle?) { + super.onCreate(savedInstanceState) + binding = ActivitySearchBinding.inflate(layoutInflater) + setContentView(binding.root) + } +} +``` + + +```kotlin lines +CometChatSearch( + onMessageClick = { message -> + Log.i(TAG, "Message Clicked!") + } +) +``` + + + +## Actions and Events + +### Callback Methods + +#### `setOnConversationClicked` + +Fires when a user taps a conversation from the search results. Primary navigation hook — set the active conversation and render the message view. + + + +```kotlin SearchActivity.kt lines +binding.cometchatSearch.setOnConversationClicked { view, position, conversation -> + Log.i(TAG, "onCreate: Conversation Clicked !") +} +``` + + +```kotlin lines +CometChatSearch( + onConversationClick = { conversation -> + Log.i(TAG, "Conversation Clicked!") + } +) +``` + + + +> **What this does:** Replaces the default conversation-click behavior. When a user taps a conversation item, your custom lambda executes. The callback receives the view, position, and `Conversation` object. + +#### `setOnMessageClicked` + +Fires when a user taps a message from the search results. Use to navigate to the message in context. + + + +```kotlin SearchActivity.kt lines +binding.cometchatSearch.setOnMessageClicked { view, position, baseMessage -> + Log.i(TAG, "onCreate: Message Clicked !") +} +``` + + +```kotlin lines +CometChatSearch( + onMessageClick = { message -> + Log.i(TAG, "Message Clicked!") + } +) +``` + + + +> **What this does:** Registers a callback that fires when the user taps a message in the search results. The callback receives the view, position, and `BaseMessage` object. + +#### `setOnBackPressListener` + +Fires when the user presses the back button in the search bar. Default: no predefined behavior. + + + +```kotlin SearchActivity.kt lines +binding.cometchatSearch.setOnBackPressListener { + Log.i(TAG, "onCreate: Back Pressed !") +} +``` + + +```kotlin lines +CometChatSearch( + onBackPress = { + Log.i(TAG, "Back Pressed!") + } +) +``` + + + +#### `setOnError` + +Fires on internal errors (network failure, auth issue, SDK exception). + + + +```kotlin SearchActivity.kt lines +binding.cometchatSearch.onError = OnError { + Log.i(TAG, "onCreate: Error Occurred ! ${it.message}") +} +``` + + +```kotlin lines +CometChatSearch( + onError = { exception -> + Log.i(TAG, "Error: ${exception.message}") + } +) +``` + + + +#### `setOnLoadMessages` + +Fires when the message list is successfully fetched and loaded, helping track when message search results are ready. + + + +```kotlin SearchActivity.kt lines +binding.cometchatSearch.setOnLoadMessages(OnLoad { list -> + Log.i(TAG, "Messages loaded: ${list.size}") +}) +``` + + +```kotlin lines +CometChatSearch( + onLoadMessages = { messages -> + Log.i(TAG, "Messages loaded: ${messages.size}") + } +) +``` + + + +#### `setOnLoadConversations` + +Fires when the conversation list is successfully fetched and loaded, helping track when conversation search results are ready. + + + +```kotlin SearchActivity.kt lines +binding.cometchatSearch.setOnLoadConversations(OnLoad { list -> + Log.i(TAG, "Conversations loaded: ${list.size}") +}) +``` + + +```kotlin lines +CometChatSearch( + onLoadConversations = { conversations -> + Log.i(TAG, "Conversations loaded: ${conversations.size}") + } +) +``` + + + +#### `setOnEmpty` + +Fires when the search returns no results, enabling custom handling such as showing a placeholder. + + + +```kotlin SearchActivity.kt lines +binding.cometchatSearch.onEmpty = OnEmpty { + Log.i(TAG, "onCreate: No Results Found !") +} +``` + + +```kotlin lines +CometChatSearch( + onEmpty = { + Log.i(TAG, "No Results Found!") + } +) +``` + + + +- **Verify**: After setting an action callback, trigger the corresponding user interaction (tap a conversation result, tap a message result, press back, cause an error, or search for a term with no results) and confirm your custom logic executes. + +### Global UI Events + +The `CometChatSearch` component does not produce any global UI events. + +### SDK Events (Real-Time, Automatic) + +The `CometChatSearch` component does not listen to any SDK events internally. Search results are fetched on demand when the user types a query. + +## Functionality + +Small functional customizations such as toggling visibility of UI elements and configuring search scope. + +| Methods | Description | Code | +| --- | --- | --- | +| `setEmptyStateVisibility` | Hides the empty state when search returns no results | `.setEmptyStateVisibility(View.GONE);` | +| `setErrorStateVisibility` | Hides the error state on search failure | `.setErrorStateVisibility(View.GONE);` | +| `setSearchFilters` | List of filters rendered as chips in the search component | `.setSearchFilters(filters);` | +| `setInitialSearchFilter` | The filter which will be active by default on load | `.setInitialSearchFilter(UIKitConstants.SearchFilter.MESSAGES);` | +| `setSearchIn` | List of entities in which the search should be performed | `.setSearchIn(scopes);` | +| `setHideGroupType` | Hides the group type icon in conversation leading view | `.setHideGroupType(true);` | +| `setHideUserStatus` | Hides the user's online/offline status indicator | `.setHideUserStatus(true);` | + +- **Verify**: After calling a visibility or functionality method, confirm the corresponding UI element is shown or hidden, or the search scope is correctly applied. + +## Custom View Slots + +Each slot replaces a section of the default UI. Conversation item slots use the `ConversationsSearchViewHolderListener` pattern (`createView` + `bindView`). Message item slots use the `MessagesSearchViewHolderListener` pattern. + +| Slot | Method | Replaces | +| --- | --- | --- | +| Conversation item view | `setConversationItemView(ConversationsSearchViewHolderListener)` | Entire conversation item row | +| Text message item | `setTextMessageItemView(MessagesSearchViewHolderListener)` | Text message item | +| Image message item | `setImageMessageItemView(MessagesSearchViewHolderListener)` | Image message item | +| Audio message item | `setAudioMessageItemView(MessagesSearchViewHolderListener)` | Audio message item | +| Video message item | `setVideoMessageItemView(MessagesSearchViewHolderListener)` | Video message item | +| Document message item | `setDocumentMessageItemView(MessagesSearchViewHolderListener)` | Document message item | +| Link message item | `setLinkMessageItemView(MessagesSearchViewHolderListener)` | Link message item | +| Initial view | `setInitialView(@LayoutRes int)` | Initial state before search | +| Empty view | `setEmptyView(@LayoutRes int)` | Empty state | +| Loading view | `setLoadingView(View)` | Loading spinner | +| Error view | `setErrorView(View)` | Error state | + +### `setConversationItemView` + +Replace the entire conversation item row in search results. + + + +```kotlin SearchActivity.kt lines +binding.cometchatSearch.setConversationItemView(object : ConversationsSearchViewHolderListener() { + override fun createView(context: Context?, listItem: View?): View? { + return layoutInflater.inflate(R.layout.custom_conversation_search_item, null) + } + + override fun bindView( + context: Context?, + createdView: View?, + conversation: Conversation?, + holder: RecyclerView.ViewHolder?, + conversationList: List?, + position: Int + ) { + val titleTv = createdView?.findViewById(R.id.tv_title) + conversation?.let { + if (it.conversationType == CometChatConstants.CONVERSATION_TYPE_USER) { + titleTv?.text = (it.conversationWith as User).name + } else { + titleTv?.text = (it.conversationWith as Group).name + } + } + } +}) +``` + + +```kotlin lines +CometChatSearch( + conversationItemView = { conversation -> + Row(modifier = Modifier.padding(16.dp)) { + val name = when (conversation.conversationType) { + CometChatConstants.CONVERSATION_TYPE_USER -> + (conversation.conversationWith as User).name + else -> + (conversation.conversationWith as Group).name + } + Text(text = name ?: "", style = MaterialTheme.typography.bodyLarge) + } + } +) +``` + + + +> **What this does:** Registers a `ConversationsSearchViewHolderListener` for conversation items in search results. The `createView` method inflates a custom layout, and `bindView` populates it with the conversation name based on whether it's a user or group conversation. + +### `setTextMessageItemView` + +Replace the text message item view in search results. + +Define a custom layout XML: + +```xml custom_message_item_view.xml lines + + + + + + + +``` + + + +```kotlin SearchActivity.kt lines +binding.cometchatSearch.setTextMessageItemView(object : MessagesSearchViewHolderListener() { + override fun createView( + context: Context?, + listItem: View? + ): View? { + return layoutInflater.inflate(R.layout.custom_message_item_view, null) + } + + override fun bindView( + context: Context?, + createdView: View?, + message: TextMessage?, + holder: RecyclerView.ViewHolder?, + messagesList: List?, + position: Int + ) { + val titleTv = createdView?.findViewById(R.id.tv_sender_name) + val messageTv = createdView?.findViewById(R.id.tv_message) + + titleTv?.text = message?.sender?.name + messageTv?.text = message?.text + } +}) +``` + + +```kotlin lines +CometChatSearch( + textMessageItemView = { message -> + Row( + modifier = Modifier + .fillMaxWidth() + .background(Color(0xFFE8E4F3)) + .padding(16.dp) + ) { + Text( + text = "${message.sender?.name}: ", + color = Color(0xFF6B4FBB), + fontWeight = FontWeight.Bold + ) + Text( + text = message.text ?: "", + color = Color(0xFF4A4A4A), + maxLines = 1, + overflow = TextOverflow.Ellipsis + ) + } + } +) +``` + + + +> **What this does:** Registers a `MessagesSearchViewHolderListener` for text messages. The `createView` method inflates the custom layout, and `bindView` populates the sender name and message text from the `TextMessage` object. + + + + + +### Other Message Item Views + +The following message item view methods follow the same `MessagesSearchViewHolderListener` pattern as `setTextMessageItemView`: + +| Method | Message Type | Generic Type | +| --- | --- | --- | +| `setImageMessageItemView` | Image Message | `MessagesSearchViewHolderListener` | +| `setVideoMessageItemView` | Video Message | `MessagesSearchViewHolderListener` | +| `setAudioMessageItemView` | Audio Message | `MessagesSearchViewHolderListener` | +| `setDocumentMessageItemView` | Document Message | `MessagesSearchViewHolderListener` | +| `setLinkMessageItemView` | Link Message | `MessagesSearchViewHolderListener` | + +### `setInitialView` + +Sets a custom view displayed when the search component is rendered and no search has been performed. + + + +```kotlin lines +binding.cometchatSearch.setInitialView(R.layout.your_initial_view) +``` + + +```kotlin lines +CometChatSearch( + initialView = { + // Your custom initial composable + Text("Start searching...") + } +) +``` + + + +### `setEmptyView` + +Configures a custom view displayed when the search returns no results. + + + +```kotlin lines +binding.cometchatSearch.setEmptyView(R.layout.your_empty_view) +``` + + +```kotlin lines +CometChatSearch( + emptyView = { + // Your custom empty state composable + Text("No results found") + } +) +``` + + + +### `setLoadingView` + +Sets a custom loading view displayed when search results are being fetched. + + + +```kotlin lines +binding.cometchatSearch.setLoadingView(loadingView) +``` + + +```kotlin lines +CometChatSearch( + loadingView = { + // Your custom loading composable + CircularProgressIndicator() + } +) +``` + + + +### `setErrorView` + +Defines a custom error state view that appears when an issue occurs while searching. + + + +```kotlin lines +binding.cometchatSearch.setErrorView(errorView) +``` + + +```kotlin lines +CometChatSearch( + errorView = { onRetry -> + // Your custom error composable + Column { + Text("Something went wrong") + Button(onClick = onRetry) { Text("Retry") } + } + } +) +``` + + + +- **Verify**: After setting any custom view slot, confirm the custom view renders in the correct position within the search result items, and the data binding populates correctly for each result. + +## Common Patterns + +### Messages-only search + + + +```kotlin lines +binding.cometchatSearch.setSearchFilters( + listOf(UIKitConstants.SearchFilter.MESSAGES) +) +binding.cometchatSearch.setInitialSearchFilter(UIKitConstants.SearchFilter.MESSAGES) +``` + + +```kotlin lines +import com.cometchat.uikit.core.constants.SearchFilter + +CometChatSearch( + searchFilters = listOf(SearchFilter.UNREAD), + modifier = Modifier.fillMaxSize() +) +``` + + + +### Filter by message type + + + +```kotlin lines +binding.cometchatSearch.setMessagesRequestBuilder( + MessagesRequest.MessagesRequestBuilder().setLimit(10) +) +``` + + +```kotlin lines +import com.cometchat.uikit.core.constants.SearchFilter + +CometChatSearch( + searchFilters = listOf(SearchFilter.UNREAD), + modifier = Modifier.fillMaxSize() +) +``` + + + +### Scope search to a specific user + + + +```kotlin lines +binding.cometchatSearch.setUid("user123") +``` + + +```kotlin lines +CometChatSearch( + uid = "user123", + modifier = Modifier.fillMaxSize() +) +``` + + + +### Scope search to a specific group + + + +```kotlin lines +binding.cometchatSearch.setGuid("group123") +``` + + +```kotlin lines +CometChatSearch( + guid = "group123", + modifier = Modifier.fillMaxSize() +) +``` + + + +## Advanced Methods + +### Search Scope + +#### `setUid` + +Scopes the search to a specific user's conversation. + + + +```kotlin lines +binding.cometchatSearch.setUid("user123") +``` + + +```kotlin lines +CometChatSearch( + uid = "user123", + modifier = Modifier.fillMaxSize() +) +``` + + + +#### `setGuid` + +Scopes the search to a specific group's conversation. + + + +```kotlin lines +binding.cometchatSearch.setGuid("group123") +``` + + +```kotlin lines +CometChatSearch( + guid = "group123", + modifier = Modifier.fillMaxSize() +) +``` + + + +### Request Builders + +#### `setConversationsRequestBuilder` + +Sets a `ConversationsRequest.ConversationsRequestBuilder` to filter conversation search results. Pass the builder instance — not the result of `.build()`. For all available builder options, refer to the [ConversationRequestBuilder](/sdk/android/retrieve-conversations) documentation. + + + +```kotlin lines +binding.cometchatSearch.setConversationsRequestBuilder( + ConversationsRequest.ConversationsRequestBuilder().setLimit(10) +) +``` + + +```kotlin lines +CometChatSearch( + guid = "group123", + modifier = Modifier.fillMaxSize() +) +``` + + + +#### `setMessagesRequestBuilder` + +Sets a `MessagesRequest.MessagesRequestBuilder` to filter message search results. For all available builder options, refer to the [MessagesRequestBuilder](/sdk/android/additional-message-filtering) documentation. + + + +```kotlin lines +binding.cometchatSearch.setMessagesRequestBuilder( + MessagesRequest.MessagesRequestBuilder().setLimit(5) +) +``` + + +```kotlin lines +CometChatSearch( + guid = "group123", + modifier = Modifier.fillMaxSize() +) +``` + + + +### Text Formatters + +#### `setTextFormatters` + +Enables developers to define and apply text formatters that dynamically modify or transform message content before rendering it in the UI. Text formatters can be used for: + +* Automatically converting URLs into clickable links +* Applying Markdown or rich text styling +* Replacing certain words or patterns with emojis or predefined text +* Censoring specific words for moderation + +For implementation details, refer to the [MentionsFormatter Guide](/ui-kit/android/v6/mentions-formatter-guide). + +### Date/Time Formatting + +#### `setDateTimeFormatter` + +Provides a custom implementation of `DateTimeFormatterCallback` to configure how time and date values are displayed in search results. + + + +```kotlin lines +import java.text.SimpleDateFormat +import java.util.* + +binding.cometchatSearch.setDateTimeFormatter(object : DateTimeFormatterCallback { + + private val fullTimeFormatter = SimpleDateFormat("hh:mm a", Locale.getDefault()) + private val dateFormatter = SimpleDateFormat("dd MMM yyyy", Locale.getDefault()) + + override fun time(timestamp: Long): String { + return fullTimeFormatter.format(Date(timestamp)) + } + + override fun today(timestamp: Long): String { + return "Today" + } + + override fun yesterday(timestamp: Long): String { + return "Yesterday" + } + + override fun lastWeek(timestamp: Long): String { + return "Last Week" + } + + override fun otherDays(timestamp: Long): String { + return dateFormatter.format(Date(timestamp)) + } + + override fun minutes(diffInMinutesFromNow: Long, timestamp: Long): String { + return "$diffInMinutesFromNow mins ago" + } + + override fun hours(diffInHourFromNow: Long, timestamp: Long): String { + return "$diffInHourFromNow hrs ago" + } +}) +``` + + +```kotlin lines +CometChatSearch( + guid = "group123", + modifier = Modifier.fillMaxSize() +) +``` + + + +> **What this does:** Provides a custom date/time formatter that displays "Today", "Yesterday", "Last Week" for recent messages, a "dd MMM yyyy" format for older messages, and relative time strings like "5 mins ago" or "2 hrs ago" for recent activity. + +### Other Advanced Methods + +| Method | Type | Description | +| --- | --- | --- | +| `setMentionAllLabelId` | `String id, String mentionAllLabel` | Sets a custom label for the "mention all" feature for a specific ID | +| `setHintText` | `String` | Sets the hint text displayed in the search bar | + +## Style + +The component uses XML theme styles. Define a custom style with parent `CometChatSearchStyle` in `themes.xml`, then apply with `setStyle()`. + + + + + +```xml themes.xml lines + + + +``` + +> **What this does:** Defines a custom search style that sets a light purple background color (`#EDEAFA`) for the search component, conversation items, and message items, and applies a Times New Roman font to all text elements including filter chips, section headers, conversation titles/subtitles, message titles/subtitles, timestamps, "see more" text, and the search bar. + + + +```kotlin lines +binding.cometchatSearch.setStyle(R.style.CustomSearchStyle) +``` + + +```kotlin lines +import com.cometchat.uikit.compose.presentation.search.style.CometChatSearchStyle + +CometChatSearch( + style = CometChatSearchStyle.default().copy( + backgroundColor = Color(0xFFEDEAFA), + searchBarBackgroundColor = Color(0xFFEDEAFA), + filterChipBackgroundColor = Color(0xFFEDEAFA) + ), + modifier = Modifier.fillMaxSize() +) +``` + + + +To view all available style attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit/src/main/res/values/attr_cometchat_search.xml). + +### Programmatic Style Properties + +In addition to XML theme styles, the component exposes programmatic setters for fine-grained control: + +**Search Bar** + +| Method | Type | Description | +| --- | --- | --- | +| `setBackgroundColor` | `@ColorInt int` | Background color of the component | +| `setSearchBarBackgroundColor` | `@ColorInt int` | Background color of the search bar | +| `setSearchBarStrokeWidth` | `@Dimension int` | Stroke width of the search bar border | +| `setSearchBarStrokeColor` | `@ColorInt int` | Stroke color of the search bar border | +| `setSearchBarCornerRadius` | `@Dimension int` | Corner radius of the search bar | +| `setSearchBarTextColor` | `@ColorInt int` | Text color of the search bar input | +| `setSearchBarTextAppearance` | `@StyleRes int` | Text appearance of the search bar input | +| `setSearchBarHintTextColor` | `@ColorInt int` | Hint text color of the search bar | +| `setBackIcon` | `Drawable` | Custom back icon drawable | +| `setBackIconTint` | `@ColorInt int` | Tint color for the back icon | +| `setClearIcon` | `Drawable` | Custom clear icon drawable | +| `setClearIconTint` | `@ColorInt int` | Tint color for the clear icon | +| `setSearchIcon` | `Drawable` | Custom search icon drawable | +| `setSearchIconTint` | `@ColorInt int` | Tint color for the search icon | + +**Filter Chips** + +| Method | Type | Description | +| --- | --- | --- | +| `setFilterChipBackgroundColor` | `@ColorInt int` | Background color of filter chips | +| `setFilterChipSelectedBackgroundColor` | `@ColorInt int` | Background color of selected filter chips | +| `setFilterChipTextColor` | `@ColorInt int` | Text color of filter chips | +| `setFilterChipSelectedTextColor` | `@ColorInt int` | Text color of selected filter chips | +| `setFilterChipTextAppearance` | `@StyleRes int` | Text appearance of filter chips | +| `setFilterChipStrokeColor` | `@ColorInt int` | Stroke color of filter chips | +| `setFilterChipSelectedStrokeColor` | `@ColorInt int` | Stroke color of selected filter chips | +| `setFilterChipStrokeWidth` | `@Dimension int` | Stroke width of filter chips | +| `setFilterChipCornerRadius` | `@Dimension int` | Corner radius of filter chips | + +**Section Headers** + +| Method | Type | Description | +| --- | --- | --- | +| `setSectionHeaderTextColor` | `@ColorInt int` | Text color for section headers | +| `setSectionHeaderTextAppearance` | `@StyleRes int` | Text appearance for section headers | +| `setSectionHeaderBackgroundColor` | `@ColorInt int` | Background color for section headers | + +**Conversation Items** + +| Method | Type | Description | +| --- | --- | --- | +| `setConversationItemBackgroundColor` | `@ColorInt int` | Background color for conversation items | +| `setConversationTitleTextColor` | `@ColorInt int` | Text color for conversation titles | +| `setConversationTitleTextAppearance` | `@StyleRes int` | Text appearance for conversation titles | +| `setConversationSubtitleTextColor` | `@ColorInt int` | Text color for conversation subtitles | +| `setConversationSubtitleTextAppearance` | `@StyleRes int` | Text appearance for conversation subtitles | +| `setConversationTimestampTextColor` | `@ColorInt int` | Text color for conversation timestamps | +| `setConversationTimestampTextAppearance` | `@StyleRes int` | Text appearance for conversation timestamps | + +**Message Items** + +| Method | Type | Description | +| --- | --- | --- | +| `setMessageItemBackgroundColor` | `@ColorInt int` | Background color for message items | +| `setMessageTitleTextColor` | `@ColorInt int` | Text color for message titles | +| `setMessageTitleTextAppearance` | `@StyleRes int` | Text appearance for message titles | +| `setMessageSubtitleTextColor` | `@ColorInt int` | Text color for message subtitles | +| `setMessageSubtitleTextAppearance` | `@StyleRes int` | Text appearance for message subtitles | +| `setMessageTimestampTextColor` | `@ColorInt int` | Text color for message timestamps | +| `setMessageTimestampTextAppearance` | `@StyleRes int` | Text appearance for message timestamps | +| `setMessageLinkTextColor` | `@ColorInt int` | Text color for links in messages | +| `setMessageLinkTextAppearance` | `@StyleRes int` | Text appearance for links in messages | + +**Other Style Properties** + +| Method | Type | Description | +| --- | --- | --- | +| `setAvatarStyle` | `@StyleRes int` | Style for avatars in search results | +| `setBadgeStyle` | `@StyleRes int` | Style for badges in search results | +| `setSeeMoreTextColor` | `@ColorInt int` | Text color for "See more" links | +| `setSeeMoreTextAppearance` | `@StyleRes int` | Text appearance for "See more" links | +| `setDateSeparatorTextColor` | `@ColorInt int` | Text color for date separators | +| `setDateSeparatorBackgroundColor` | `@ColorInt int` | Background color for date separators | +| `setDateSeparatorTextAppearance` | `@StyleRes int` | Text appearance for date separators | +| `setEmptyStateTextColor` | `@ColorInt int` | Title text color for the empty state | +| `setEmptyStateTextAppearance` | `@StyleRes int` | Title text appearance for the empty state | +| `setEmptyStateSubtitleTextColor` | `@ColorInt int` | Subtitle text color for the empty state | +| `setEmptyStateSubtitleTextAppearance` | `@StyleRes int` | Subtitle text appearance for the empty state | +| `setEmptyStateIcon` | `Drawable` | Icon for the empty state | +| `setEmptyStateIconTint` | `@ColorInt int` | Tint for the empty state icon | +| `setErrorStateTextColor` | `@ColorInt int` | Title text color for the error state | +| `setErrorStateTextAppearance` | `@StyleRes int` | Title text appearance for the error state | +| `setErrorStateSubtitleTextColor` | `@ColorInt int` | Subtitle text color for the error state | +| `setErrorStateSubtitleTextAppearance` | `@StyleRes int` | Subtitle text appearance for the error state | +| `setErrorStateIcon` | `Drawable` | Icon for the error state | +| `setErrorStateIconTint` | `@ColorInt int` | Tint for the error state icon | + +## Customization Matrix + +| What to change | Where | Property/API | Example | +| --- | --- | --- | --- | +| Override behavior on conversation tap | Activity/Fragment | `setOnConversationClicked` | `setOnConversationClicked { v, pos, conv -> ... }` | +| Override behavior on message tap | Activity/Fragment | `setOnMessageClicked` | `setOnMessageClicked { v, pos, msg -> ... }` | +| Override back press behavior | Activity/Fragment | `setOnBackPressListener` | `setOnBackPressListener { ... }` | +| Scope search to a user | Activity/Fragment | `setUid(String)` | `.setUid("user123")` | +| Scope search to a group | Activity/Fragment | `setGuid(String)` | `.setGuid("group123")` | +| Hide user online status | Activity/Fragment | `setHideUserStatus(boolean)` | `.setHideUserStatus(true)` | +| Hide group type icon | Activity/Fragment | `setHideGroupType(boolean)` | `.setHideGroupType(true)` | +| Set search filters | Activity/Fragment | `setSearchFilters(List)` | `.setSearchFilters(filters)` | +| Set initial active filter | Activity/Fragment | `setInitialSearchFilter(SearchFilter)` | `.setInitialSearchFilter(UIKitConstants.SearchFilter.MESSAGES)` | +| Set search scope | Activity/Fragment | `setSearchIn(List)` | `.setSearchIn(scopes)` | +| Filter conversation results | Activity/Fragment | `setConversationsRequestBuilder` | See Request Builders code above | +| Filter message results | Activity/Fragment | `setMessagesRequestBuilder` | See Request Builders code above | +| Custom conversation item view | Activity/Fragment | `setConversationItemView(ConversationsSearchViewHolderListener)` | See `setConversationItemView` code above | +| Custom text message item view | Activity/Fragment | `setTextMessageItemView(MessagesSearchViewHolderListener)` | See `setTextMessageItemView` code above | +| Custom image message item view | Activity/Fragment | `setImageMessageItemView(MessagesSearchViewHolderListener)` | See `setTextMessageItemView` pattern | +| Custom video message item view | Activity/Fragment | `setVideoMessageItemView(MessagesSearchViewHolderListener)` | See `setTextMessageItemView` pattern | +| Custom audio message item view | Activity/Fragment | `setAudioMessageItemView(MessagesSearchViewHolderListener)` | See `setTextMessageItemView` pattern | +| Custom document message item view | Activity/Fragment | `setDocumentMessageItemView(MessagesSearchViewHolderListener)` | See `setTextMessageItemView` pattern | +| Custom link message item view | Activity/Fragment | `setLinkMessageItemView(MessagesSearchViewHolderListener)` | See `setTextMessageItemView` pattern | +| Custom initial view | Activity/Fragment | `setInitialView(@LayoutRes int)` | `.setInitialView(R.layout.your_initial_view)` | +| Custom loading view | Activity/Fragment | `setLoadingView(View)` | `.setLoadingView(loadingView)` | +| Custom empty view | Activity/Fragment | `setEmptyView(@LayoutRes int)` | `.setEmptyView(R.layout.your_empty_view)` | +| Custom error view | Activity/Fragment | `setErrorView(View)` | `.setErrorView(errorView)` | +| Empty state visibility | Activity/Fragment | `setEmptyStateVisibility(int)` | `.setEmptyStateVisibility(View.GONE)` | +| Error state visibility | Activity/Fragment | `setErrorStateVisibility(int)` | `.setErrorStateVisibility(View.GONE)` | +| Change colors, fonts, spacing | `themes.xml` | `CometChatSearchStyle` | `#EDEAFA` | +| Apply a custom style | Activity/Fragment | `setStyle(int styleRes)` | `binding.cometchatSearch.setStyle(R.style.CustomSearchStyle)` | +| Search bar background | Activity/Fragment | `setSearchBarBackgroundColor` | `.setSearchBarBackgroundColor(color)` | +| Filter chip colors | Activity/Fragment | `setFilterChip*` methods | `.setFilterChipBackgroundColor(color)` | +| Section header style | Activity/Fragment | `setSectionHeader*` methods | `.setSectionHeaderTextColor(color)` | +| Conversation item style | Activity/Fragment | `setConversation*` methods | `.setConversationTitleTextColor(color)` | +| Message item style | Activity/Fragment | `setMessage*` methods | `.setMessageTitleTextColor(color)` | +| Date/time formatting | Activity/Fragment | `setDateTimeFormatter(DateTimeFormatterCallback)` | See `setDateTimeFormatter` code above | +| Text formatters | Activity/Fragment | `setTextFormatters(List)` | See Text Formatters section | +| Search bar hint text | Activity/Fragment | `setHintText(String)` | `.setHintText("Search...")` | +| Mention-all label | Activity/Fragment | `setMentionAllLabelId(String, String)` | `.setMentionAllLabelId(id, label)` | +| Callback on messages loaded | Activity/Fragment | `setOnLoadMessages(OnLoad)` | `.setOnLoadMessages { list -> ... }` | +| Callback on conversations loaded | Activity/Fragment | `setOnLoadConversations(OnLoad)` | `.setOnLoadConversations { list -> ... }` | + +## Next Steps + + + + Browse recent conversations + + + Browse and search available users + + + Browse and search available groups + + + Display messages in a conversation + + \ No newline at end of file