diff --git a/.gitignore b/.gitignore index 96adadbc..fcf7bc15 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,10 @@ .DS_Store .kiro/ + +# IDE files +.idea/ + +# Python caches +__pycache__/ +*.pyc diff --git a/ui-kit/android/ai-features.mdx b/ui-kit/android/ai-features.mdx index fa995487..95ecc270 100644 --- a/ui-kit/android/ai-features.mdx +++ b/ui-kit/android/ai-features.mdx @@ -4,7 +4,7 @@ title: "AI" ## Overview -CometChat's AI capabilities greatly enhance user interaction and engagement in your application. Let's understand how the Android UI Kit achieves these features. +CometChat's AI capabilities greatly enhance user interaction and engagement in your application. Here's how the Android UI Kit integrates these features. @@ -40,7 +40,7 @@ The Conversation Summary feature provides concise summaries of long conversation For a comprehensive understanding and guide on implementing and using the Conversation Summary, refer to our specific guide on the [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary). -Once you have successfully activated the [Smart Replies](/fundamentals/ai-user-copilot/smart-replies) from your CometChat Dashboard, the feature will automatically be incorporated into the Action sheet of [MessageComposer](/ui-kit/android/message-composer) Component of UI Kits. +Once you have successfully activated the [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary) from your CometChat Dashboard, the feature will automatically be incorporated into the Action sheet of [MessageComposer](/ui-kit/android/message-composer) Component of UI Kits. diff --git a/ui-kit/android/android-conversation.mdx b/ui-kit/android/android-conversation.mdx index 4bebefe4..50b51569 100644 --- a/ui-kit/android/android-conversation.mdx +++ b/ui-kit/android/android-conversation.mdx @@ -3,9 +3,9 @@ title: "Building A Conversation List + Message View" sidebarTitle: "Conversation List + Message View" --- -The **Conversation List + Message View** layout offers a seamless **two-panel chat interface**, commonly used in modern messaging applications like **WhatsApp Web, Slack, and Microsoft Teams**. +The **Conversation List + Message View** layout provides a **sequential navigation pattern** for Android messaging applications, similar to **WhatsApp, Slack, and Telegram**. -This design enables users to switch between conversations effortlessly while keeping the chat window open, ensuring a **smooth, real-time messaging experience**. +This design allows users to view their conversation list and tap on any conversation to open a full-screen message view, providing a **familiar mobile real-time messaging experience**. *** @@ -17,19 +17,29 @@ This design enables users to switch between conversations effortlessly while kee ### **Key Components** -1. **Chat Header** – Displays user/group name, profile image, and status. -2. **Message List** – Shows chat history and new messages. -3. **Message Composer** – Allows users to send messages, media, and reactions. +1. **Message Header** – Displays user/group name, avatar, and status. +2. **Message List** – Shows chat history with real-time message updates. +3. **Message Composer** – Provides input field for sending text messages, media, and attachments. *** ## **Step-by-Step Guide** +### **Navigation Flow** + +This implementation follows Android's standard Activity navigation pattern: + +1. **ConversationActivity** displays the list of conversations +2. User taps a conversation item +3. **MessageActivity** launches with the selected user/group data passed via Intent extras + +*** + ### **Step 1: Set Up Conversation Activity** -Create an Activity - `ConversationActivity.kt` to manage and display the chat UI. +Create a new Activity called `ConversationActivity` to display the list of conversations. #### **Layout** -Define the layout using the `CometChatConversations` component: +Define the layout using the `CometChatConversations` component in `activity_conversations.xml`: ```xml activity_conversations.xml @@ -189,10 +199,12 @@ This is necessary to properly manage the **UI Kit's lifecycle events**. *** ### **Step 2: Set Up Message Activity** -Create an Activity - `MessageActivity.kt` to manage and display the chat UI. +Create a new Activity - `MessageActivity` to display the chat interface. #### **Layout** +Define the layout with `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer` in `activity_message.xml`: + ```xml activity_message.xml @@ -458,7 +470,7 @@ public class MessageActivity extends AppCompatActivity { ### **Step 3: Update MainActivity** -Update the `MainActivity` to navigate to the `MessageActivity`: +Update your `MainActivity` to launch `ConversationActivity` after successful login: @@ -595,15 +607,21 @@ public class MainActivity extends ComponentActivity { *** -## **Running the Project** +## **Running the Application** -Once the components are configured, build and run the app: +Once you've completed the setup, build and run your Android application: -```sh -gradle build -``` -Ensure you've added the necessary permissions and initialized CometChat in your `Application` class. + +**Required Permissions** + +Ensure you've added the necessary permissions in your `AndroidManifest.xml`: + +```xml + + +``` + *** diff --git a/ui-kit/android/android-one-to-one-chat.mdx b/ui-kit/android/android-one-to-one-chat.mdx index 4308e76e..40c317f4 100644 --- a/ui-kit/android/android-one-to-one-chat.mdx +++ b/ui-kit/android/android-one-to-one-chat.mdx @@ -3,7 +3,7 @@ title: "Building A One To One/Group Chat Experience" sidebarTitle: "One To One/Group Chat" --- -The **One-to-One Chat** feature provides a streamlined **direct messaging interface**, making it ideal for **support chats, dating apps, and private messaging platforms**. This setup eliminates distractions by focusing solely on a **dedicated chat window**. +The **One-to-One Chat** feature provides a **direct messaging interface** for Android applications, ideal for **support chats, dating apps, and private messaging **. This implementation launches directly into a specific chat conversation without showing a conversation list, providing a **focused messaging experience**. *** @@ -15,20 +15,32 @@ The **One-to-One Chat** feature provides a streamlined **direct messaging interf ### **Key Components** -1. **Chat Header** – Displays user/group name, profile image, and status. -2. **Message List** – Shows chat history and new messages. -3. **Message Composer** – Allows users to send messages, media, and reactions. +1. **Message Header** – Displays user/group name, avatar, and status. +2. **Message List** – Shows chat history with real-time message updates. +3. **Message Composer** – Provides input field for sending text messages, media, and attachments. *** ## **Step-by-Step Guide** +### **Use Case** + +This pattern is ideal when you want to: +- Launch a chat directly from a user profile or contact card +- Open a support chat from a help button +- Start a conversation from a notification +- Navigate to a specific chat without showing the conversation list + +The user or group ID is passed via Intent extras when launching the Activity. + +*** + ### **Step 1: Set Up Message Activity** -Create an Activity - `MessageActivity.kt` to manage and display the chat UI. +Create an Activity - `MessageActivity` to display the full-screen chat interface. #### **Layout** -Define the layout using CometChat UI Kit components: +Define the layout with `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer` in `activity_message.xml`: ```xml activity_message.xml ```kotlin MessageActivity.kt @@ -303,9 +317,19 @@ This is necessary to properly manage the **UI Kit's lifecycle events**. *** -### **Step 2: Update MainActivity** +### **Step 2: Launch MessageActivity from Your App** -Update the `MainActivity` to navigate to the `MessageActivity`: +Update your `MainActivity` (or any other Activity) to launch `MessageActivity` with the appropriate user or group ID: + + +**Passing Data via Intent** + +You can pass either: +- `uid` (String) - for one-to-one chats +- `guid` (String) - for group chats + +The `MessageActivity` will automatically detect which type of chat to display based on the Intent extras. + @@ -447,13 +471,23 @@ public class MainActivity extends ComponentActivity { ## **Running the Project** -Once the components are configured, build and run the app: +Once you've completed the setup, build and run the app: ```sh gradle build ``` -Ensure you've added the necessary permissions and initialized CometChat in your `Application` class. + +**Required Permissions** + +Ensure you've added the necessary permissions in your `AndroidManifest.xml` and initialized CometChat in your `Application` class. +: + +```xml + + +``` + *** diff --git a/ui-kit/android/android-tab-based-chat.mdx b/ui-kit/android/android-tab-based-chat.mdx index 87ad5689..cf297df1 100644 --- a/ui-kit/android/android-tab-based-chat.mdx +++ b/ui-kit/android/android-tab-based-chat.mdx @@ -1,9 +1,9 @@ --- -title: "Building A Messaging UI With Tabs, Sidebar, And Message View" +title: "Building A Tab-Based Messaging UI" sidebarTitle: "Tab Based Chat Experience" --- -This guide walks you through creating a **tab-based messaging UI** using **React** and **CometChat UIKit**. The UI will include different sections for **Chats, Calls, Users, and Groups**, allowing seamless navigation. +This guide walks you through creating a **tab-based messaging UI** using **Android** and **CometChat UIKit**. The UI uses **BottomNavigationView** with different sections for **Chats, Calls, Users, and Groups**, allowing seamless navigation. *** @@ -15,29 +15,41 @@ This guide walks you through creating a **tab-based messaging UI** using **React This layout consists of: -1. **Sidebar (Conversation List)** – Displays recent conversations with active users and groups. -2. **Message View** – Shows the selected chat with real-time messages. -3. **Message Input Box** – Allows users to send messages seamlessly. +1. **Bottom Navigation Bar** – Provides quick access to main sections (Chats, Calls, Users, Groups). +2. **Fragment Container** – Displays the selected section's content using Android Fragments. +3. **Dynamic Content** – Each tab loads its respective Fragment with CometChat UI components. *** ## **Step-by-Step Guide** -### **Step 1: Create a Tab Component** +### **Navigation Pattern** -To manage navigation, let's build a **`CometChatTabs`** component. This component will render different tabs and allow switching between sections dynamically. +This implementation uses Android's **BottomNavigationView** pattern: -#### **Folder Structure** +1. **TabbedActivity** hosts the bottom navigation and fragment container +2. User taps a tab in the bottom navigation +3. The corresponding Fragment is loaded into the container +4. Each Fragment displays its CometChat UI component (Conversations, CallLogs, Users, or Groups) -Create a `TabbedActivity` inside your `src` directory and add the following files: +This is the standard Android pattern for apps with multiple top-level destinations. + +*** + +### **Step 1: Set Up Tabbed Activity** +Create a new Activity called `TabbedActivity` with **BottomNavigationView** to manage tab navigation. + +#### **Project Structure** + +Create the following files in your Android project: ```txt src/main/java/your-package-name/ -├── TabbedActivity.kt -├── ChatsFragment.kt -├── CallLogsFragment.kt -├── UsersFragment.kt -├── GroupsFragment.kt +├── TabbedActivity.kt (or .java) +├── ChatsFragment.kt (or .java) +├── CallLogsFragment.kt (or .java) +├── UsersFragment.kt (or .java) +└── GroupsFragment.kt (or .java) src/main/java/your-package-name/ ├── res/ @@ -51,10 +63,13 @@ src/main/java/your-package-name/ │ └── bottom_nav_menu.xml ``` -#### **Download the Icons** +#### **Vector Drawable Icons** + +Download the navigation icons from the **CometChat UI Kit repository**: + +🔗 [GitHub Drawable Resources](https://github.com/cometchat/cometchat-uikit-android/tree/v5/sample-app-java/src/main/res/drawable) -These icons are available in the **CometChat UI Kit res folder**. You can find them at:\ -🔗 [GitHub Assets Folder](https://github.com/cometchat/cometchat-uikit-android/tree/v5/sample-app-java/src/main/res/drawable) +Place the icon files (`ic_chats.xml`, `ic_calls.xml`, `ic_user.xml`, `ic_group.xml`) in your `res/drawable/` directory. #### **Implementation** @@ -352,9 +367,11 @@ This is necessary to properly manage the **UI Kit's lifecycle events**. *** -### **Step 3: Create Fragments for Chat, Calls, Users and Groups** +### **Step 2: Create Fragments for Each Tab** -#### Chats Fragment +Each tab displays a different CometChat UI component wrapped in a Fragment. + +#### **Chats Fragment** @@ -429,7 +446,7 @@ public class ChatsFragment extends Fragment { -#### Call Logs Fragment +#### **Call Logs Fragment** @@ -507,7 +524,7 @@ public class CallLogsFragment extends Fragment { -#### Users Fragment +#### **Users Fragment** @@ -581,7 +598,7 @@ public class UsersFragment extends Fragment { -#### Groups Fragment +#### **Groups Fragment** @@ -658,9 +675,9 @@ public class GroupsFragment extends Fragment { *** -### **Step 3: Update MainActivity** +### **Step 3: Launch TabbedActivity from Your App** -Update the `MainActivity` to navigate to the `MessageActivity`: +Update your `MainActivity` to launch `TabbedActivity` after successful login: @@ -798,15 +815,32 @@ public class MainActivity extends ComponentActivity { *** -## **Running the Project** +## **Running the Application** -Once the components are configured, build and run the app: +Once you've completed the setup, build and run your Android application: ```sh gradle build ``` -Ensure you've added the necessary permissions and initialized CometChat in your `Application` class. + +**Required Permissions** + +Ensure you've added the necessary permissions in your `AndroidManifest.xml`and initialized CometChat in your `Application` class: + +```xml + + +``` + +**For Call Features**, also add: + +```xml + + + +``` + *** diff --git a/ui-kit/android/call-features.mdx b/ui-kit/android/call-features.mdx index a5deb296..03654342 100644 --- a/ui-kit/android/call-features.mdx +++ b/ui-kit/android/call-features.mdx @@ -10,53 +10,74 @@ CometChat's Calls feature is an advanced functionality that allows you to seamle First, make sure that you've correctly integrated the UI Kit library into your project. If you haven't done this yet or are facing difficulties, refer to our [Getting Started](/ui-kit/android/getting-started) guide. This guide will walk you through a step-by-step process of integrating our UI Kit into your Android project. -Once you've successfully integrated the UI Kit, the next step is to add the CometChat Calls SDK to your project. This is necessary to enable the calling features in the UI Kit. Here's how you do it: +Once you've successfully integrated the UI Kit, the next step is to add the CometChat Calls SDK to your project. This is necessary to enable the calling features in the UI Kit. -Add the following dependency to your build.gradle file: +### Step 1: Add Calls SDK Dependency -```javascript +Add the following dependency to your `build.gradle` file: + +```gradle dependencies { implementation 'com.cometchat:calls-sdk-android:4.+.+' } ``` -After adding this dependency, the Android UI Kit will automatically detect it and activate the calling features. Now, your application supports both audio and video calling. You will see [CallButtons](/ui-kit/android/call-buttons) component rendered in [MessageHeader](/ui-kit/android/message-header) Component. +After adding this dependency, sync your project. The Android UI Kit will automatically detect the Calls SDK and activate the calling features. + +### Step 2: Verify Call Buttons Appear + +Once the Calls SDK is integrated, you will see the [CallButtons](/ui-kit/android/call-buttons) component automatically rendered in the [MessageHeader](/ui-kit/android/message-header) component. This provides users with quick access to initiate audio and video calls. -To start receive calls globally in your app you will need to add `CallListener`, This needs to be added before the you initialize CometChat UI kit, We sudgest you making a custom Application class and adding call listener. +### Step 3: Add Call Listener for Incoming Calls + +To receive incoming calls globally in your app, you will need to add a `CallListener`. This should be added before you initialize the CometChat UI Kit. We recommend creating a custom Application class and adding the call listener there. + +When an incoming call is received, you can display the `CometChatIncomingCall` component using the current activity context. ```java public class BaseApplication extends Application { - private static String LISTENER_ID = BaseApplication.class.getSimpleName()+System.currentTimeMillis(); + private static final String LISTENER_ID = BaseApplication.class.getSimpleName() + System.currentTimeMillis(); @Override public void onCreate() { super.onCreate(); + CometChat.addCallListener(LISTENER_ID, new CometChat.CallListener() { @Override public void onIncomingCallReceived(Call call) { - CometChatCallActivity.launchIncomingCallScreen(BaseApplication.this, call, null); //pass null or IncomingCallConfiguration if need to configure CometChatIncomingCall component + // Get the current activity context + Activity currentActivity = getCurrentActivity(); // Implement this method + + if (currentActivity != null) { + // Create and display the incoming call component + CometChatIncomingCall incomingCallView = new CometChatIncomingCall(currentActivity); + incomingCallView.setCall(call); + incomingCallView.setFitsSystemWindows(true); + + // Display the component (e.g., as dialog or snackbar) + } } @Override public void onOutgoingCallAccepted(Call call) { - + // Handle outgoing call acceptance } @Override public void onOutgoingCallRejected(Call call) { - + // Handle outgoing call rejection } @Override public void onIncomingCallCancelled(Call call) { - + // Handle incoming call cancellation } }); } @@ -68,28 +89,42 @@ public class BaseApplication extends Application { ```kotlin class BaseApplication : Application() { + companion object { private val LISTENER_ID = "${BaseApplication::class.java.simpleName}${System.currentTimeMillis()}" } override fun onCreate() { super.onCreate() + CometChat.addCallListener(LISTENER_ID, object : CometChat.CallListener { override fun onIncomingCallReceived(call: Call) { - CometChatCallActivity.launchIncomingCallScreen(this@BaseApplication, call, null) - // Pass null or IncomingCallConfiguration if need to configure CometChatIncomingCall component + // Get the current activity context + val currentActivity = getCurrentActivity() // Implement this method + + currentActivity?.let { + // Create and display the incoming call component + val incomingCallView = CometChatIncomingCall(it) + incomingCallView.call = call + incomingCallView.fitsSystemWindows = true + incomingCallView.onError = OnError { exception -> + // Handle errors + } + + // Display the component (e.g., as dialog or snackbar) + } } override fun onOutgoingCallAccepted(call: Call) { - // To be implemented + // Handle outgoing call acceptance } override fun onOutgoingCallRejected(call: Call) { - // To be implemented + // Handle outgoing call rejection } override fun onIncomingCallCancelled(call: Call) { - // To be implemented + // Handle incoming call cancellation } }) } @@ -100,32 +135,70 @@ class BaseApplication : Application() { -## Features +## Call Components -### Incoming Call +The CometChat Android UI Kit provides four main components for implementing calling features in your app. Each component handles a specific part of the calling experience. + +### Call Buttons + +The [Call Buttons](/ui-kit/android/call-buttons) component provides users with quick access to initiate audio and video calls. This component is automatically rendered in the [MessageHeader](/ui-kit/android/message-header) when the Calls SDK is integrated. + + + + -The [Incoming Call](/ui-kit/android/incoming-call) component of the CometChat UI Kit provides the functionality that lets users receive real-time audio and video calls in the app. +[Learn more about Call Buttons →](/ui-kit/android/call-buttons) -When a call is made to a user, the Incoming Call component triggers and displays a call screen. This call screen typically displays the caller information and provides the user with options to either accept or reject the incoming call. +### Incoming Call + +The [Incoming Call](/ui-kit/android/incoming-call) component displays when a user receives an incoming call. It provides a full-screen interface showing caller information and call controls. -### Outgoing Call +[Learn more about Incoming Call →](/ui-kit/android/incoming-call) -The [Outgoing Call](/ui-kit/android/outgoing-call) component of the CometChat UI Kit is designed to manage the outgoing call process within your application. When a user initiates an audio or video call to another user or group, this component displays an outgoing call screen, showcasing information about the recipient and the call status. +### Outgoing Call -Importantly, the Outgoing Call component is smartly designed to transition automatically into the ongoing call screen once the receiver accepts the call. This ensures a smooth flow from initiating the call to engaging in a conversation, without any additional steps required from the user. +The [Outgoing Call](/ui-kit/android/outgoing-call) component manages the outgoing call experience. It displays while waiting for the recipient to answer and automatically transitions to the active call screen once accepted. +[Learn more about Outgoing Call →](/ui-kit/android/outgoing-call) + ### Call Logs -[Call Logs](/ui-kit/android/call-logs) component provides you with the records call events such as who called who, the time of the call, and the duration of the call. This information can be fetched from the CometChat server and displayed in a structured format for users to view their past call activities. +The [Call Logs](/ui-kit/android/call-logs) component displays a history of all call activities, including missed, received, and dialed calls. Users can view call details and initiate new calls from the log. + + +[Learn more about Call Logs →](/ui-kit/android/call-logs) + +### Call Log Details + +For detailed information about individual calls, including participants, join/leave history, and recordings, see the [Call Log Details](/ui-kit/android/guide-call-log-details) guide. + +## Troubleshooting + +### Call Buttons Not Appearing + +If the call buttons don't appear in the MessageHeader: + +1. **Verify Calls SDK is added** - Check that `com.cometchat:calls-sdk-android:4.+.+` is in your `build.gradle` +2. **Sync Gradle** - Make sure you've synced your project after adding the dependency +3. **Check UI Kit version** - Ensure you're using CometChat UI Kit v5 or later +4. **Verify initialization** - Confirm CometChat is properly initialized before loading the UI + +### Incoming Calls Not Showing + +If incoming calls aren't displaying: + +1. **Check CallListener registration** - Ensure `CometChat.addCallListener()` is called in your Application class +2. **Verify Application class** - Confirm your custom Application class is registered in `AndroidManifest.xml` +3. **Test listener ID** - Make sure the listener ID is unique and not being removed elsewhere \ No newline at end of file diff --git a/ui-kit/android/color-resources.mdx b/ui-kit/android/color-resources.mdx index ac2e6b55..973125af 100644 --- a/ui-kit/android/color-resources.mdx +++ b/ui-kit/android/color-resources.mdx @@ -26,7 +26,7 @@ CometChat provides separate color definitions for **light mode** and **dark mode CometChat includes predefined color sets for light and dark modes in the `res/values` and `res/values-night` directories, respectively. These ensure proper visual contrast and accessibility.\ Example: Light Mode Color Resources -```html +```xml #6852D6 @@ -39,7 +39,7 @@ Example: Light Mode Color Resources Example: Night Mode Color Resources -```html +```xml #6852D6 @@ -58,17 +58,23 @@ You can override the default colors to align them with your application's brandi Example: Changing the Primary Color Define your custom color in your themes.xml: -```html +```xml ``` -To know more such attributes, visit the [theme attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_theme.xml). - + +### Apply Theme + +Set your custom theme in `AndroidManifest.xml`: + +```xml + + +``` \ No newline at end of file diff --git a/ui-kit/android/component-styling.mdx b/ui-kit/android/component-styling.mdx index 529c1fee..38c90012 100644 --- a/ui-kit/android/component-styling.mdx +++ b/ui-kit/android/component-styling.mdx @@ -2,9 +2,26 @@ title: "Component Styling" --- -## Overview +CometChat UIKit components are fully customizable through XML styling. Each component supports theme attributes for colors, fonts, sizes, icons, and more, allowing you to match your app's design system. -CometChat UIKit enables developers to seamlessly integrate customizable components into their applications. Each component is designed to ensure a consistent user experience while offering flexibility to adapt to your app’s design system. You can modify attributes such as colors, fonts, sizes, icons, and more using XML or programmatically. Below is a detailed guide for styling individual components within the UIKit. +## How to Style Components + +All component styles follow the same pattern: + +1. Create a custom style extending the component's parent style +2. Override specific attributes +3. Apply the style to your app theme + +```xml + + + + +``` ## Components @@ -16,7 +33,7 @@ The `CometChatConversations` Component provides a list of recent chats, showing -```html +```xml ``` -```html +```xml ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_conversations.xml). +**Attribute References:** +- [Conversations attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_conversations.xml) +- [Avatar attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_avatar.xml) +- [Badge attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_badge.xml) ### Users @@ -55,7 +75,7 @@ The `CometChatUsers` Component displays a scrollable list of users. It is ideal -```html +```xml ``` -```html +```xml ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_users.xml). +**Attribute References:** +- [Users attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_users.xml) +- [Avatar attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_avatar.xml) ### Groups @@ -89,7 +111,7 @@ The `CometChatGroups` Component allows you to display and interact with chat gro -```html +```xml ``` -```html +```xml ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_groups.xml). +**Attribute References:** +- [Groups attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_groups.xml) +- [Avatar attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_avatar.xml) ### Message Header @@ -123,7 +147,7 @@ The `CometChatMessageHeader` Component provides essential information about the -```html +```xml ``` -```html +```xml ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_message_header.xml). +**Attribute References:** +- [Message Header attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_message_header.xml) +- [Call Buttons attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_call_buttons.xml) ### Message List @@ -168,7 +194,7 @@ The `CometChatMessageList` Component displays the sequence of messages in a conv ``` -```html +```xml ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_message_list.xml). +**Attribute References:** +- [Message List attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_message_list.xml) +- [Outgoing Message Bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_outgoing_message_bubble.xml) ### Message Composer @@ -228,7 +256,8 @@ The `CometChatMessageComposer` Component enables users to compose and send messa ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_message_composer.xml). +**Attribute References:** +- [Message Composer attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_message_composer.xml) ### Group Members @@ -238,7 +267,7 @@ The `CometChatGroupMembers` Component lists participants in a chat group with de -```html +```xml ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_group_members.xml). +**Attribute References:** +- [Group Members attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_group_members.xml) +- [Avatar attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_avatar.xml) ### Thread Header @@ -300,7 +331,10 @@ The `CometChatThreadHeader` is used in threaded message views, displaying inform ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_thread_header.xml). +**Attribute References:** +- [Thread Header attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_thread_header.xml) +- [Outgoing Message Bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_outgoing_message_bubble.xml) +- [Incoming Message Bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_incoming_message_bubble.xml) ### Call Logs @@ -328,7 +362,8 @@ The `CometChatCallLogs` Component provides a list of recent calls (voice or vide ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_call_logs.xml). +**Attribute References:** +- [Call Logs attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_call_logs.xml) ### Incoming Call @@ -367,7 +402,9 @@ The `CometChatIncomingCall` component displays a notification for an incoming ca ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_incoming_call.xml). +**Attribute References:** +- [Incoming Call attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_incoming_call.xml) +- [Avatar attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_avatar.xml) ### Outgoing Call @@ -399,7 +436,9 @@ The `CometChatOutgoingCall` component displays a status view for calls initiated ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_outgoing_call.xml). +**Attribute References:** +- [Outgoing Call attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_outgoing_call.xml) +- [Avatar attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_avatar.xml) ### Call Button @@ -433,7 +472,8 @@ The `CometChatCallButton` Component initiates voice or video calls with a single ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_call_buttons.xml). +**Attribute References:** +- [Call Buttons attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_call_buttons.xml) ### AI Assistant Chat History @@ -471,7 +511,8 @@ The `CometChatAIAssistantChatHistory` component displays the history of interact ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_ai_assistant_chat_history.xml). +**Attribute References:** +- [AI Assistant Chat History attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_ai_assistant_chat_history.xml) ### Search @@ -518,7 +559,8 @@ The `CometChatSearch` component allows users to search through conversations and *** -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_search.xml). +**Attribute References:** +- [Search attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_search.xml) ## Base Component @@ -543,7 +585,8 @@ The `CometChatAvatar` Component is used across the UIKit to represent users, gro ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_avatar.xml). +**Attribute References:** +- [Avatar attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_avatar.xml) ### Status indicator @@ -580,7 +623,8 @@ The `CometChatStatusIndicator` visually represents user presence (online, offlin ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_status_indicator.xml). +**Attribute References:** +- [Status Indicator attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_status_indicator.xml) ### Badge @@ -604,7 +648,8 @@ The `CometChatBadge` Component displays notifications or counts, such as unread ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_badge.xml). +**Attribute References:** +- [Badge attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_badge.xml) ### Date @@ -626,7 +671,8 @@ The `CometChatDate` Component formats and displays timestamps in conversation li ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_date.xml). +**Attribute References:** +- [Date attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_date.xml) ### Receipts @@ -664,7 +710,8 @@ The `CometChatReceipts` Component indicates message delivery and read statuses u ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_message_receipt.xml). +**Attribute References:** +- [Message Receipt attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_message_receipt.xml) ### Media Recorder @@ -689,7 +736,8 @@ The `CometChatMediaRecorder` Component facilitates the recording of audio and vi ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_media_recorder.xml). +**Attribute References:** +- [Media Recorder attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_media_recorder.xml) ### Sticker Keyboard @@ -711,7 +759,8 @@ The `CometChatStickerKeyboard` simplifies the integration of sticker-based messa ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_sticker_keyboard.xml). +**Attribute References:** +- [Sticker Keyboard attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_sticker_keyboard.xml) ### Reaction list @@ -733,7 +782,8 @@ The `CometChatReactionList` Component provides a visual representation of emoji ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_reaction_list.xml). +**Attribute References:** +- [Reaction List attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_reaction_list.xml) ### Conversation Starter @@ -755,7 +805,8 @@ The `CometChatConversationStarter` Component offers AI-based suggestions or repl ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_ai_conversation_starter.xml). +**Attribute References:** +- [AI Conversation Starter attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_ai_conversation_starter.xml) ### Conversation Summary @@ -777,7 +828,8 @@ The `CometChatConversationSummary` Component highlights the essence of a convers ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_ai_conversation_summary.xml). +**Attribute References:** +- [AI Conversation Summary attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_ai_conversation_summary.xml) ### Smart Replies @@ -803,7 +855,8 @@ The `CometChatSmartReplies` Component provides AI-driven suggestions for quick m ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_ai_smart_replies.xml). +**Attribute References:** +- [AI Smart Replies attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_ai_smart_replies.xml) ### Message Information @@ -813,7 +866,8 @@ The `CometChatMessageInformation` Component displays metadata for messages, such -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_message_information.xml). +**Attribute References:** +- [Message Information attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_message_information.xml) ### Message option sheet @@ -836,7 +890,8 @@ The `CometChatMessageOptionSheet` Component is a context menu for performing act ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_message_option_sheet.xml). +**Attribute References:** +- [Message Option Sheet attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_message_option_sheet.xml) ### Attachment option sheet @@ -859,7 +914,8 @@ The `CometChatAttachmentOptionSheet` Component provides a sleek interface for us ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_attachment_option_sheet.xml). +**Attribute References:** +- [Attachment Option Sheet attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_attachment_option_sheet.xml) ### AIOption Sheet @@ -882,7 +938,8 @@ The `CometChatAIOptionSheet` Component offers AI-powered action options, like ge ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_ai_option_sheet.xml). +**Attribute References:** +- [AI Option Sheet attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_ai_option_sheet.xml) ### Mentions @@ -920,11 +977,14 @@ The `CometChatMentions` Component highlights referenced users or groups within m ``` -```html +```xml ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_mentions.xml). +**Attribute References:** +- [Mentions attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_mentions.xml) +- [Incoming Message Bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_incoming_message_bubble.xml) +- [Outgoing Message Bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_outgoing_message_bubble.xml) diff --git a/ui-kit/android/components-overview.mdx b/ui-kit/android/components-overview.mdx index 5b41f2aa..181aef74 100644 --- a/ui-kit/android/components-overview.mdx +++ b/ui-kit/android/components-overview.mdx @@ -6,7 +6,7 @@ CometChat's **UI Kit** is a set of pre-built UI components that allows you to ea ## Type of Components -UI components based on the behaviour and functionality can be categorized into three types: Base Components and Components +UI components can be categorized into two types based on their behavior and functionality: Base Components and Components. ### Base Components @@ -22,15 +22,15 @@ Actions direct the operational behavior of a component. They are split into two ### Predefined Actions -These are actions that are inherently programmed into a UI component. They are ingrained in thecomponent itself by default, and they execute automatically in response to user interaction,without needing any additional user input. +These are actions that are inherently programmed into a UI component. They are ingrained in the component itself by default and execute automatically in response to user interaction, without needing any additional user input. ### User-Defined Actions -These are actions that must be explicitly specified by the user. They are not innately part ofthe component like predefined actions. Instead, they must be developed based on the unique needsof the user or the application. User-defined actions provide adaptability and allow for thecreation of custom behaviors that align with the individual needs of the application. +These are actions that must be explicitly specified by the user. They are not innately part of the component like predefined actions. Instead, they must be developed based on the unique needs of the user or the application. User-defined actions provide adaptability and allow for the creation of custom behaviors that align with the individual needs of the application. To customize the behavior of a component, actions must be overridden by the user. This provides the user with control over how the component responds to specific events or interactions. -Both Components and Composite Components expose actions to the user, which means that users can interact with these types of components through predefined or user-defined actions. On the otherhand, Base Components do not expose actions to the user as they are the foundational buildingblocks mainly responsible for rendering the user interface and do not carry any business logic oractions. +Both Components and Composite Components expose actions to the user, which means that users can interact with these types of components through predefined or user-defined actions. On the other hand, Base Components do not expose actions to the user, as they are the foundational building blocks mainly responsible for rendering the user interface and do not carry any business logic or actions. ## Events diff --git a/ui-kit/android/core-features.mdx b/ui-kit/android/core-features.mdx index ecc7e147..3f9d7b1b 100644 --- a/ui-kit/android/core-features.mdx +++ b/ui-kit/android/core-features.mdx @@ -91,7 +91,7 @@ CometChat's User Presence feature allows users to see whether their contacts are | ----------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [Conversations](/ui-kit/android/conversations) | [Conversations](/ui-kit/android/conversations) is a Component that renders Conversations item List, Conversations item also shows user presence information. | | [Message Header](/ui-kit/android/message-header) | [Message Header](/ui-kit/android/message-header) that renders details of User or Groups in ToolBar. The MessageHeader also handles user Presence information. | -| [Users](/ui-kit/android/users) | [Users](/ui-kit/android/users) renders list of users available in your app.It also responsible to render users Presence information. | +| [Users](/ui-kit/android/users) | [Users](/ui-kit/android/users) renders a list of users available in your app. It is also responsible for rendering user presence information. | | [Group Members](/ui-kit/android/group-members) | [Group Members](/ui-kit/android/group-members) renders list of users available in the group. The Group Members component also handles user Presence information. | ## Reactions @@ -117,9 +117,23 @@ Mentions is a robust feature provided by CometChat that enhances the interactivi | Components | Functionality | | -------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [Conversations](/ui-kit/android/conversations) | [Conversations](/ui-kit/android/conversations) component provides an enhanced user experience by integrating the Mentions feature. This means that from the conversation list itself, users can see where they or someone else have been specifically mentioned. | -| [MessageComposer](/ui-kit/android/message-composer) | [MessageComposer](/ui-kit/android/message-composer)is a component that allows users to craft and send various types of messages, including the usage of the Mentions feature for direct addressing within the conversation. | +| [MessageComposer](/ui-kit/android/message-composer) | [MessageComposer](/ui-kit/android/message-composer) is a component that allows users to craft and send various types of messages, including the usage of the Mentions feature for direct addressing within the conversation. | | [MessageList](/ui-kit/android/message-list) | [MessageList](/ui-kit/android/message-list) is a component that displays a list of sent and received messages. It also supports the rendering of Mentions, enhancing the readability and interactivity of conversations. | +## Threaded Conversations + +The Threaded Conversations feature enables users to respond directly to a specific message in a chat. This keeps conversations organized and enhances the user experience by maintaining context, especially in group chats. + + + + + +| Components | Functionality | +| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [Threaded Header](/ui-kit/android/threaded-messages-header) | [Threaded Header](/ui-kit/android/threaded-messages-header) that displays all replies made to a particular message in a conversation. | +| [MessageComposer](/ui-kit/android/message-composer) | [MessageComposer](/ui-kit/android/message-composer) is a component that allows users to craft and send various types of messages, including the usage of the Mentions feature for direct addressing within the conversation. | +| [MessageList](/ui-kit/android/message-list) | [MessageList](/ui-kit/android/message-list) is a component that displays a list of sent and received messages. It also supports the rendering of Mentions, enhancing the readability and interactivity of conversations. | + ## Quoted Reply Quoted Reply is a robust feature provided by CometChat that enables users to quickly reply to specific messages by selecting the "Reply" option from a message's action menu. This enhances context, keeps conversations organized, and improves overall chat experience in both 1-1 and group chats. @@ -133,20 +147,15 @@ Quoted Reply is a robust feature provided by CometChat that enables users to qui | [Message List](/ui-kit/android/message-list) | [Message List](/ui-kit/android/message-list) supports replying to messages via the "Reply" option. Users can select "Reply" on a message to open the composer with the quoted reply pre-filled, maintaining context. | | [Message Composer](/ui-kit/android/message-composer) | [Message Composer](/ui-kit/android/message-composer) works seamlessly with Quoted Message by showing the quoted reply above the input field, letting users compose their response in proper context. | -## Conversation and Advanced Search +## Group Chat -Conversation and Advanced Search is a powerful feature provided by CometChat that enables users to quickly find conversations, messages, and media across chats in real time. It supports filters, scopes, and custom actions, allowing users to locate content efficiently while keeping the chat experience smooth and intuitive. +CometChat facilitates Group Chats, allowing users to have conversations with multiple participants simultaneously. This feature is crucial for team collaborations, group discussions, social communities, and more. - + -| Components | Functionality | -| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Search](/ui-kit/android/search) | [Search](/ui-kit/android/search) allows users to search across conversations and messages in real time. Users can click on a result to open the conversation or jump directly to a specific message. | -| [Message Header](/ui-kit/android/message-header) | [Message Header](/ui-kit/android/message-header) shows the search button in the chat header, allowing users to search within a conversation. | -| [Message List](/ui-kit/android/message-list) | [Message List](/ui-kit/android/message-list) shows the selected message when clicked from search results and highlights it in the message list. | -| [Conversations](/ui-kit/android/conversations) | [Conversations](/ui-kit/android/conversations) displays the search input. | +For a comprehensive understanding and guide on implementing and using the Groups feature in CometChat, you should refer to our detailed guide on [Groups](/ui-kit/android/groups). ## Moderation @@ -182,26 +191,17 @@ Learn more about how flagged messages are handled, reviewed, and moderated in th | ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [Message List](/ui-kit/android/message-list) | [Message List](/ui-kit/android/message-list) provides the "Report Message" option in the message actions menu, allowing users to initiate the reporting process for inappropriate messages. | -## Threaded Conversations - -The Threaded Conversations feature enables users to respond directly to a specific message in a chat. This keeps conversations organized and enhances the user experience by maintaining context, especially in group chats. - - - - - -| Components | Functionality | -| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Threaded Header](/ui-kit/android/threaded-messages-header) | [Threaded Header](/ui-kit/android/threaded-messages-header) that displays all replies made to a particular message in a conversation. | -| [MessageComposer](/ui-kit/android/message-composer) | [MessageComposer](/ui-kit/android/message-composer)is a component that allows users to craft and send various types of messages, including the usage of the Mentions feature for direct addressing within the conversation. | -| [MessageList](/ui-kit/android/message-list) | [MessageList](/ui-kit/android/message-list) is a component that displays a list of sent and received messages. It also supports the rendering of Mentions, enhancing the readability and interactivity of conversations. | - -## Group Chat +## Conversation and Advanced Search -CometChat facilitates Group Chats, allowing users to have conversations with multiple participants simultaneously. This feature is crucial for team collaborations, group discussions, social communities, and more. +Conversation and Advanced Search is a powerful feature provided by CometChat that enables users to quickly find conversations, messages, and media across chats in real time. It supports filters, scopes, and custom actions, allowing users to locate content efficiently while keeping the chat experience smooth and intuitive. - + -For a comprehensive understanding and guide on implementing and using the Groups feature in CometChat, you should refer to our detailed guide on [Groups](/ui-kit/android/groups). +| Components | Functionality | +| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [Search](/ui-kit/android/search) | [Search](/ui-kit/android/search) allows users to search across conversations and messages in real time. Users can click on a result to open the conversation or jump directly to a specific message. | +| [Message Header](/ui-kit/android/message-header) | [Message Header](/ui-kit/android/message-header) shows the search button in the chat header, allowing users to search within a conversation. | +| [Message List](/ui-kit/android/message-list) | [Message List](/ui-kit/android/message-list) shows the selected message when clicked from search results and highlights it in the message list. | +| [Conversations](/ui-kit/android/conversations) | [Conversations](/ui-kit/android/conversations) displays the search input. | diff --git a/ui-kit/android/events.mdx b/ui-kit/android/events.mdx index 61c3696e..822619fa 100644 --- a/ui-kit/android/events.mdx +++ b/ui-kit/android/events.mdx @@ -4,9 +4,9 @@ title: "Events" ## Overview -Events allow for a decoupled, flexible architecture where different parts of the application can interact without having to directly reference each other. This makes it easier to create complex, interactive experiences, as well as to extend and customize the functionality provided by the CometChat UI Kit. +Events enable a decoupled, flexible architecture where different parts of the application can interact without directly referencing each other. This makes it easier to create complex, interactive experiences and to extend and customize the CometChat UI Kit's functionality. -Both Components and Composite Components have the ability to emit events. These events are dispatched in response to certain changes or user interactions within the component. By emitting events, these components allow other parts of the application to react to changes or interactions, thus enabling dynamic and interactive behavior within the application. +Both Components and Composite Components can emit events. These events are dispatched in response to certain changes or user interactions within the component, allowing other parts of the application to react accordingly and enabling dynamic, interactive behavior. ### User Events @@ -52,9 +52,9 @@ CometChatUserEvents.addUserListener(LISTENERS_TAG, object : CometChatUserEvents( ### Group Events -`GroupEvents` Emits events when the logged-in user performs actions related to groups. This class provides methods to listen to various group-related events and handle them accordingly. +`GroupEvents` emits events when the logged-in user performs actions related to groups. This class provides methods to listen to various group-related events and handle them accordingly. -Following are all the group events +Following are all the group events: 1. `ccGroupCreated`: Triggered when the logged-in user creates a group. 2. `ccGroupDeleted`: Triggered when the logged-in user deletes a group. @@ -69,7 +69,7 @@ Following are all the group events To listen to group events -```typescript +```java CometChatGroupEvents.addGroupListener(LISTENERS_TAG, new CometChatGroupEvents() { @Override public void ccGroupCreated(Group group) { @@ -257,7 +257,7 @@ CometChatMessageEvents.addListener("UNIQUE_ID", object : CometChatMessageEvents( To listen to call events and handle them in your application, you can use the following code snippet: -```typescript +```java CometChatCallEvents.addListener("ListenerID", new CometChatCallEvents() { @Override public void ccOutgoingCall(Call call) { @@ -285,7 +285,7 @@ CometChatCallEvents.addListener("ListenerID", new CometChatCallEvents() { `UIEvents` emits events related to UI components within the CometChat UI. This class provides methods to listen to UI-related events and handle them accordingly. -Following are the UI events +Following are the UI events: * `showPanel`: Triggered to show an additional UI panel with custom elements. * `hidePanel`: Triggered to hide a previously shown UI panel. @@ -294,7 +294,7 @@ Following are the UI events To listen to UI events and handle them in your application, you can use the following code snippet: -```typescript +```java CometChatUIEvents.addListener("UNIQUE_ID", new CometChatUIEvents() { @Override public void showPanel(HashMap id, UIKitConstants.CustomUIPosition alignment, Function1 view) { diff --git a/ui-kit/android/extensions.mdx b/ui-kit/android/extensions.mdx index 6333a963..a86a079d 100644 --- a/ui-kit/android/extensions.mdx +++ b/ui-kit/android/extensions.mdx @@ -6,9 +6,9 @@ title: "Extensions" CometChat’s UI Kit comes with built-in support for a wide variety of extensions that provide additional functionality. These extensions enhance the chatting experience, making it more interactive, secure, and efficient. -Activating any of the extensions in CometChat is a simple process done through your application's dashboard. Refer to our guide For detailed information on [Extensions](/fundamentals/extensions-overview) +Activating any of the extensions in CometChat is a simple process done through your application's dashboard. Refer to our guide for detailed information on [Extensions](/fundamentals/extensions-overview). -Once you have successfully enabled the desired extension in your dashboard, it will be reflected in your CometChat application upon initialization and successful login. Please note, that the extension features will only be available if they are supported by CometChat UI Kit. +Once you have successfully enabled the desired extension in your dashboard, it will be reflected in your CometChat application upon initialization and successful login. Please note that extension features will only be available if they are supported by the CometChat UI Kit. CometChat’s UI Kit offers built-in support for 12 powerful extensions. This seamless integration makes it easy for you to enhance your chat application with engaging features without any extra coding effort. Just enable the desired extensions from the CometChat Dashboard, and they will be automatically reflected in the relevant components of your application, providing a richer and more engaging experience for your users. diff --git a/ui-kit/android/getting-started.mdx b/ui-kit/android/getting-started.mdx index 20f734f1..bbbf481e 100644 --- a/ui-kit/android/getting-started.mdx +++ b/ui-kit/android/getting-started.mdx @@ -447,7 +447,7 @@ Integrate a conversation view that suits your application's **UX requirements**. * You need **mobile-friendly navigation** between multiple chats. * Your app supports **both 1:1 and group messaging**. -* You want a **clean switch between list and message view** without sidebars. +* You want **standard Android navigation patterns** with back stack support. [Integrate Conversation List + Message View](./android-conversation) @@ -471,9 +471,9 @@ Integrate a conversation view that suits your application's **UX requirements**. **Use When:** -* Your flow starts with **a specific contact or ticket** (e.g., customer support). -* You want a **no-frills, clean chat screen**. -* Perfect for **helpdesks, dating apps, or onboarding flows**. +* Your flow starts with **a specific user or group** (e.g., customer support, user profile). +* You want **direct chat access** without showing a conversation list. +* Perfect for **support apps, dating apps, or notification-driven chats**. [Integrate One-to-One / Group Chat](./android-one-to-one-chat) diff --git a/ui-kit/android/localize.mdx b/ui-kit/android/localize.mdx index 6bf2205b..eed3f90f 100644 --- a/ui-kit/android/localize.mdx +++ b/ui-kit/android/localize.mdx @@ -4,9 +4,9 @@ title: "Localize" ## Overview -CometChat UI Kit provides language localization to adapt to the language of a specific country or region. The CometChatLocalize class allows you to detect the language of your users based on their browser or device settings, and set the language accordingly. +CometChat UI Kit provides language localization to adapt the interface to the language of a specific country or region. The `CometChatLocalize` class allows you to detect the language of your users based on their device settings and set the language accordingly. -CometChatLocalize is a class that includes methods related to locale. Developers can use these methods to change the language of the UI Kit library. +`CometChatLocalize` is a class that includes methods related to locale. Developers can use these methods to change the language of the UI Kit library. Presently, the UI Kit supports 19 languages for localization, which are: @@ -30,7 +30,7 @@ Presently, the UI Kit supports 19 languages for localization, which are: ## Methods -Here are the methods included in the CometChatLocalize class: +Here are the methods available in the `CometChatLocalize` class: * `setLocale(Activity activity, @Language.Code String language)`: This method is used to set the language in the UI Kit. It will take the constant value from the Language class and set the value accordingly. @@ -61,7 +61,7 @@ val currentLanguage = CometChatLocalize.getLocale() -By using the CometChatLocalize class, you can provide a user-friendly, localized experience to your users, enhancing the overall user experience within your application. +By using the `CometChatLocalize` class, you can provide a user-friendly, localized experience to your users, enhancing the overall experience within your application. ## Customization @@ -97,7 +97,7 @@ In CometChat UIKit, a string resource is defined as: ``` -This string is used in the `CometChatConversations` component to label the chat list. Customizing the String To change this text to "Conversations", add the following line in your app’s `res/values/strings.xml` file: +This string is used in the `CometChatConversations` component to label the chat list. To change this text to "Conversations", add the following line in your app’s `res/values/strings.xml` file: ```xml strings.xml @@ -106,7 +106,7 @@ This string is used in the `CometChatConversations` component to label the chat ``` -Now, wherever cometchat\_chats is referenced in UIKit, it will display "Conversations" instead of the default "Chats". [String attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/strings.xml) for more such customization. +Now, wherever `cometchat_chats` is referenced in UIKit, it will display "Conversations" instead of the default "Chats". See the [String attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/strings.xml) for more customization options. ### Why Use This Approach? diff --git a/ui-kit/android/message-bubble-styling.mdx b/ui-kit/android/message-bubble-styling.mdx index f7103f73..889541d5 100644 --- a/ui-kit/android/message-bubble-styling.mdx +++ b/ui-kit/android/message-bubble-styling.mdx @@ -40,14 +40,14 @@ Message bubbles are core elements of the messaging interface. Their collective a -```html +```xml ``` -```html +```xml ``` -```html +```xml ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_message_bubble.xml). +**Attribute References:** +- [Incoming Message Bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_incoming_message_bubble.xml) +- [Outgoing Message Bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_outgoing_message_bubble.xml) +- [Message Bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_message_bubble.xml) ### Text Bubble @@ -114,7 +117,7 @@ Text bubbles display plain text messages. These are the most common bubble type **Customizing Outgoing Bubble** -```html +```xml ``` -```html +```xml ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_text_bubble.xml). +**Attribute References:** +- [Text Bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_text_bubble.xml) ### Link Preview Bubble @@ -152,7 +156,7 @@ The Link Preview Bubble is designed to display a preview of links shared in mess **Customizing Incoming Bubble** -```html +```xml ``` -```html +```xml ``` -```html +```xml ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_text_bubble.xml). +**Attribute References:** +- [Text Bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_text_bubble.xml) ### Image Bubble @@ -212,7 +217,7 @@ Image bubbles display images shared within a conversation. **Customizing Incoming Bubble** -```html +```xml ``` -```html +```xml ``` -```html +```xml ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_image_bubble.xml). +**Attribute References:** +- [Image Bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_image_bubble.xml) ### Video Bubble @@ -266,7 +272,7 @@ Video bubbles display video messages or clips in a chat. **Customizing Incoming Bubble** -```html +```xml ``` -```html +```xml ``` -```html +```xml ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_video_bubble.xml). +**Attribute References:** +- [Video Bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_video_bubble.xml) ### Audio Bubble @@ -326,7 +333,7 @@ Audio bubbles represent audio messages or voice recordings. **Customizing Incoming Bubble** -```html +```xml ``` -```html +```xml ``` -```html +```xml ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_audio_bubble.xml). +**Attribute References:** +- [Audio Bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_audio_bubble.xml) ### File Bubble @@ -389,7 +397,7 @@ File bubbles are used to display shared files, such as documents, PDFs, or sprea **Customizing Incoming Bubble** -```html +```xml ``` -```html +```xml ``` -```html +```xml ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_file_bubble.xml). +**Attribute References:** +- [File Bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_file_bubble.xml) ### Sticker Bubble @@ -448,7 +457,7 @@ Sticker bubbles display stickers shared in a conversation, enhancing visual expr **Customizing Incoming Bubble** -```html +```xml ``` -```html +```xml ``` -```html +```xml ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_sticker_bubble.xml). +**Attribute References:** +- [Sticker Bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_sticker_bubble.xml) ### Poll Bubble @@ -506,7 +516,7 @@ Poll bubbles represent polls shared within the chat, showing options and results **Customizing Incoming Bubble** -```html +```xml ``` -```html +```xml ``` -```html +```xml ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_poll_bubble.xml). +**Attribute References:** +- [Poll Bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_poll_bubble.xml) ### Collaborative Bubble @@ -565,7 +576,7 @@ Collaborative bubbles display collaborative content, such as shared documents or **Customizing Incoming Bubble** -```html +```xml ``` -```html +```xml ``` -```html +```xml ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_collaborative_bubble.xml). +**Attribute References:** +- [Collaborative Bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_collaborative_bubble.xml) ### Meet Call Bubble @@ -624,7 +636,7 @@ Meet call bubbles display call-related actions and statuses in the chat interfac **Customizing Incoming Bubble** -```html +```xml ``` -```html +```xml ``` -```html +```xml ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_meet_call_bubble.xml). +**Attribute References:** +- [Meet Call Bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_meet_call_bubble.xml) ### Delete Bubble @@ -685,7 +698,7 @@ Delete bubbles are used to display messages that have been deleted by the sender **Customizing Incoming Bubble** -```html +```xml ``` -```html +```xml ``` -```html +```xml ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_delete_bubble.xml). +**Attribute References:** +- [Delete Bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_delete_bubble.xml) ### Call Action Bubble @@ -743,7 +757,7 @@ Call action bubbles display call-related actions, such as missed calls, in the c **Customizing Bubble** -```html +```xml ``` -```html +```xml ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_call_action_bubble.xml). +**Attribute References:** +- [Call Action Bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_call_action_bubble.xml) +- [Message List attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_message_list.xml) ### Action Bubble @@ -788,7 +804,7 @@ Action bubbles provide a customizable interface for displaying a variety of acti **Customizing Bubble** -```html +```xml ``` -```html +```xml ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_action_bubble.xml). - +**Attribute References:** +- [Action Bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_action_bubble.xml) ### AI Assistant Bubble AI Assistant bubbles display messages and interactions from an AI assistant within the chat interface. @@ -829,7 +845,7 @@ AI Assistant bubbles display messages and interactions from an AI assistant with **Customizing Bubble** -```html +```xml ``` -```html +```xml ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_action_bubble.xml). +**Attribute References:** +- [AI Assistant Bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_ai_assistant_bubble.xml) ### Quoted Reply @@ -905,4 +922,5 @@ To know more such attributes, visit the [attributes file](https://github.com/com ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_message_preview.xml). \ No newline at end of file +**Attribute References:** +- [Message Preview attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_message_preview.xml) \ No newline at end of file diff --git a/ui-kit/android/methods.mdx b/ui-kit/android/methods.mdx index 3cbfd0f5..a587ddba 100644 --- a/ui-kit/android/methods.mdx +++ b/ui-kit/android/methods.mdx @@ -4,11 +4,11 @@ title: "Methods" ## Overview -The UI Kit's core function is to extend the [Chat SDK](/sdk/android/overview), essentially translating the raw data and functionality provided by the underlying methods into visually appealing and easy-to-use UI components. +The UI Kit's core function is to extend the [Chat SDK](/sdk/android/overview), translating the raw data and functionality provided by the underlying methods into visually appealing and easy-to-use UI components. -To effectively manage and synchronize the UI elements and data across all components in the UI Kit, we utilize internal events. These internal events enable us to keep track of changes in real-time and ensure that the UI reflects the most current state of data. +To effectively manage and synchronize UI elements and data across all components in the UI Kit, internal events are used. These internal events enable real-time tracking of changes and ensure that the UI reflects the most current state of data. -The CometChat UI Kit has thoughtfully encapsulated the critical [Chat SDK](/sdk/android/overview) methods within its wrapper to efficiently manage internal eventing. This layer of abstraction simplifies interaction with the underlying CometChat SDK, making it more user-friendly for developers. +The CometChat UI Kit encapsulates the critical [Chat SDK](/sdk/android/overview) methods within its wrapper to efficiently manage internal eventing. This layer of abstraction simplifies interaction with the underlying CometChat SDK, making it more developer-friendly. ## Methods @@ -16,9 +16,9 @@ You can access the methods using the `CometChatUIKit` class. This class provides ### Init -As a developer, you need to invoke this method every time before you use any other methods provided by the UI Kit. +You must invoke this method before using any other methods provided by the UI Kit. -This initialization is a critical step that ensures the UI Kit and Chat SDK function correctly and as intended in your application. Typical practice is to make this one of the first lines of code executed in your application's lifecycle when it comes to implementing CometChat. +This initialization is a critical step that ensures the UI Kit and Chat SDK function correctly in your application. Typical practice is to make this one of the first lines of code executed in your application's lifecycle. @@ -43,7 +43,7 @@ CometChatUIKit.init(context: Context, authSettings: UIKitSettings, callbackListe -As a developer, the `UIKitSettings` is an important parameter of the `init()` function. It functions as a base settings object, housing properties such as `appId`, `region`, and `authKey`, contained within `UIKitSettings`. +The `UIKitSettings` is an important parameter of the `init()` function. It serves as the base settings object, housing properties such as `appId`, `region`, and `authKey`. Here's the table format for the properties available in `UIKitSettings`: @@ -238,7 +238,7 @@ This advanced authentication procedure does not use the Auth Key directly in you ### Logout -The CometChat UI Kit and Chat SDK effectively handle the session of the logged-in user within the framework. Before a new user logs in, it is crucial to clean this data to avoid potential conflicts or unexpected behavior. This can be achieved by invoking the `.logout()` function +The CometChat UI Kit and Chat SDK effectively handle the session of the logged-in user within the framework. Before a new user logs in, it is crucial to clean this data to avoid potential conflicts or unexpected behavior. This can be achieved by invoking the `.logout()` function. @@ -296,7 +296,7 @@ CometChatUIKit.logout(object: CometChat.CallbackListener() { ### Create User -As a developer, you can dynamically create users on CometChat using the `.createUser()` function. This can be extremely useful for situations where users are registered or authenticated by your system and then need to be created on CometChat. +You can dynamically create users on CometChat using the `.createUser()` function. This is useful when users are registered or authenticated by your system and then need to be created on CometChat. @@ -514,7 +514,7 @@ CometChatUIKit.init(context, uiKitSettings, object : CometChat.CallbackListener< #### Text Message -As a developer, if you need to send a text message to a single user or a group, you'll need to utilize the `sendMessage()` function. This function requires a `TextMessage` object as its argument, which contains the necessary information for delivering the message. +To send a text message to a single user or a group, use the `sendMessage()` function. This function requires a `TextMessage` object as its argument, which contains the necessary information for delivering the message. @@ -575,7 +575,7 @@ CometChatUIKit.sendTextMessage(textMessage, object : CometChat.CallbackListener< #### Media Message -As a developer, if you need to send a media message to a single user or a group, you'll need to utilize the `sendMediaMessage()` function. This function requires a `MediaMessage` object as its argument, which contains the necessary information for delivering the message. +To send a media message to a single user or a group, use the `sendMediaMessage()` function. This function requires a `MediaMessage` object as its argument, which contains the necessary information for delivering the message. @@ -638,7 +638,7 @@ CometChatUIKit.sendMediaMessage(mediaMessage, object : CometChat.CallbackListene #### Custom Message -As a developer, if you need to send a media message to a single user or a group, you'll need to utilize the `sendCustomMessage()` function. This function requires a `CustomMessage` object as its argument, which contains the necessary information for delivering the message. +To send a custom message to a single user or a group, use the `sendCustomMessage()` function. This function requires a `CustomMessage` object as its argument, which contains the necessary information for delivering the message. @@ -721,7 +721,7 @@ CometChatUIKit.sendCustomMessage(customMessage, object : CometChat.CallbackListe #### Form Message -As a developer, if you need to send a Form message to a single user or a group, you'll need to utilize the `sendFormMessage()` function. This function requires a `FormMessage` object as its argument, which contains the necessary information to create a form bubble for that messages +To send a Form message to a single user or a group, utilize the `sendFormMessage()` function. This function requires a `FormMessage` object as its argument, which contains the necessary information to create a form bubble for that message. @@ -833,7 +833,7 @@ CometChatUIKit.sendFormMessage(formMessage, false, object : CometChat.CallbackLi #### Card Message -As a developer, if you need to send a Card message to a single user or a group, you'll need to utilize the `sendCardMessage()` function. This function requires a `CardMessage` object as its argument, which contains the necessary information to create a card bubble for the messages +To send a Card message to a single user or a group, utilize the `sendCardMessage()` function. This function requires a `CardMessage` object as its argument, which contains the necessary information to create a card bubble for the message. @@ -926,7 +926,7 @@ CometChatUIKit.sendCardMessage(cardMessage, false, object : CometChat.CallbackLi #### Scheduler Message -As a developer, if you need to send a Scheduler message to a single user or a group, you'll need to utilize the `sendCardMessage()` function. This function requires a `SchedulerMessage` object as its argument, which contains the necessary information to create a SchedulerMessage bubble for the messages +To send a Scheduler message to a single user or a group, use the `sendSchedulerMessage()` function. This function requires a `SchedulerMessage` object as its argument, which contains the necessary information to create a SchedulerMessage bubble for the messages. @@ -1044,7 +1044,7 @@ CometChatUIKit.sendSchedulerMessage(schedulerMessage, false, object : CometChat. #### Custom InteractiveMessage -As a developer, if you need to send a Custom Interactive message to a single user or a group, you'll need to utilize the `sendCustomInteractiveMessage()` function. This function requires a `CustomInteractiveMessage` object as its argument. +To send a Custom Interactive message to a single user or a group, use the `sendCustomInteractiveMessage()` function. This function requires a `CustomInteractiveMessage` object as its argument. diff --git a/ui-kit/android/overview.mdx b/ui-kit/android/overview.mdx index 82e6f306..6d678664 100644 --- a/ui-kit/android/overview.mdx +++ b/ui-kit/android/overview.mdx @@ -44,7 +44,7 @@ Get started with the **CometChat UI Kit** on your mobile device: ## **Getting Started** -Before integrating the CometChat UI Kit, familiarize yourself with the key concepts and features offered by CometChat’s platform. +Before integrating the CometChat UI Kit, familiarize yourself with the key concepts and features of CometChat’s platform. * Review the [Key Concepts](/fundamentals/key-concepts) to understand essential terminology and features. * Follow the [Getting Started Guide](/ui-kit/android/getting-started) for detailed steps on initial setup and integration. diff --git a/ui-kit/android/property-changes.mdx b/ui-kit/android/property-changes.mdx index aec1a2f7..f0eecd8e 100644 --- a/ui-kit/android/property-changes.mdx +++ b/ui-kit/android/property-changes.mdx @@ -206,7 +206,7 @@ title: "Property Changes" | setOnSelection | setOnSelect | Method | Sets selection listener for users | | setSubtitle | setSubtitleView | Method | Sets custom subtitle view | | setTail | setTailView | Method | Sets custom tail view (renamed to setTrailingView) | -| setListItemView | seItemView | Method | Sets custom item view | +| setListItemView | setItemView | Method | Sets custom item view | | getConversationsAdapter | getUsersAdapter | Method | Gets the users adapter | ### Removed Properties diff --git a/ui-kit/android/sound-manager.mdx b/ui-kit/android/sound-manager.mdx index c57d4466..f53158b8 100644 --- a/ui-kit/android/sound-manager.mdx +++ b/ui-kit/android/sound-manager.mdx @@ -4,7 +4,7 @@ title: "Sound Manager" ## Overview -The SoundManager is a helper class responsible for managing and playing various types of audio in the CometChat UI Kit. This includes sound events for incoming and outgoing messages and calls. +The SoundManager is a helper class responsible for managing and playing audio in the CometChat UI Kit. This includes sound events for incoming and outgoing messages and calls. Before you can use the SoundManager, it must be initialized: @@ -47,7 +47,7 @@ The SoundManager can pause different types of sounds for incoming and outgoing c Here is how to use CometChatSoundManager: -```java +```kotlin // Initialize SoundManager val soundManager = CometChatSoundManager(context) @@ -67,4 +67,4 @@ soundManager.play(Sound.outgoingMessage, R.raw.outgoing_message) //To play outgo soundManager.pause() ``` -By using the CometChatSoundManager, you can enhance the user experience in your chat application by integrating audible cues for chat interactions. +By using CometChatSoundManager, you can enhance the user experience in your chat application by integrating audible cues for chat interactions. diff --git a/ui-kit/android/theme-introduction.mdx b/ui-kit/android/theme-introduction.mdx index 3e36cc70..e34e072d 100644 --- a/ui-kit/android/theme-introduction.mdx +++ b/ui-kit/android/theme-introduction.mdx @@ -4,44 +4,54 @@ title: "Introduction" ## Overview -Theming in CometChat allows you to create visually consistent and customizable user interfaces that align with your application's branding. With the `CometChatTheme.DayNight` style which is built on `Theme.MaterialComponents.DayNight.NoActionBar` and acts as a global theme applied across all components, you can seamlessly integrate light and dark modes, define custom colors, typography, and component-specific styles, and enhance user experience across all CometChat components. +Theming in CometChat allows you to create visually consistent and customizable user interfaces that align with your application's branding. The `CometChatTheme.DayNight` style is built on `Theme.MaterialComponents.DayNight.NoActionBar` and serves as the global theme applied across all CometChat components. -## Using Theming in Your Project +With theming, you can: +- Seamlessly integrate light and dark modes +- Define custom colors and typography +- Apply component-specific styles +- Maintain consistent branding across your app -Set the `CometChatTheme.DayNight` as the parent theme for your application in the `themes.xml` file. You can extend it with your custom theme as needed: +## Quick Start -```html - - +### Step 1: Set Up Your Theme + +Create or update your `themes.xml` file and extend `CometChatTheme.DayNight`: + +```xml themes.xml + + + ``` -In your AndroidManifest.xml file, set the theme for your application or activity: +### Step 2: Apply Theme to Your Application -```html - +In your `AndroidManifest.xml`, set the theme for your application: + +```xml AndroidManifest.xml - + android:name=".YourApplication" + android:theme="@style/AppTheme" + ...> + ``` -If you need to apply specific styles to a particular activity, override the theme as follows: - -```html - - - +### Step 3: (Optional) Apply Theme to Specific Activities - - +If you need different theming for specific activities: +```xml AndroidManifest.xml + + + + ``` @@ -49,21 +59,65 @@ If you need to apply specific styles to a particular activity, override the them -## Customization +## Basic Customization -To customize the primary color in your app, you can override the cometchatPrimaryColor attribute in your theme. Here's how: +### Changing Primary Color -```html - - ``` -To know more such attributes, visit the [theme attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_theme.xml). - + +### Common Theme Attributes + +Here are some commonly customized theme attributes: + +```xml themes.xml + +``` + +## Light and Dark Mode + +`CometChatTheme.DayNight` automatically supports both light and dark modes based on the system setting. To customize colors for each mode: + +### Create themes-night.xml + +Create a `values-night` folder and add `themes.xml`: + +```xml values-night/themes.xml + + + +``` + +The system will automatically use the appropriate theme based on the device's dark mode setting. + + +For a complete list of theme attributes, visit the [theme attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_theme.xml) on GitHub. +