-
-
-***
-
-## Usage
-
-### Integration
+
+
+
+## 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.
-##### setOnItemClickListener
+- **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.
-Function invoked when a chat history item is clicked, typically used to open an ai assistant chat screen.
+#### `setOnItemClickListener`
+
+Function invoked when a chat history item is clicked, used to open an AI assistant chat screen.
-```xml themes.xml
-
-
-
+- **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.
+
-## Conversation Starters
+## Conversation Starter
-When a user initiates a new chat, the UI kit displays a list of suggested opening lines that users can select, making it easier for them to start a conversation. These suggestions are powered by CometChat's AI, which predicts contextually relevant conversation starters.
+When a user initiates a new chat, the UI kit displays a list of suggested opening lines that users can select, making it easier for them to start a conversation. These suggestions are powered by CometChat's AI, which predicts contextually relevant conversation starter options.
-For a comprehensive understanding and guide on implementing and using the Conversation Starters, refer to our specific guide on the [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter).
+For a comprehensive understanding and guide on implementing and using the Conversation Starter, refer to our specific guide on the [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter).
Once you have successfully activated the [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter) from your CometChat Dashboard, the feature will automatically be incorporated into the [MessageList](/ui-kit/android/message-list) Component of UI Kits.
@@ -40,7 +52,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 4bebefe49..791267aff 100644
--- a/ui-kit/android/android-conversation.mdx
+++ b/ui-kit/android/android-conversation.mdx
@@ -1,37 +1,50 @@
---
title: "Building A Conversation List + Message View"
sidebarTitle: "Conversation List + Message View"
+description: "Build a conversation list with a full-screen message view using a sequential navigation pattern."
---
-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**.
+
-### **Key Components**
+Three sections working together:
-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. **Conversation list** — shows all active conversations (users and groups)
+2. **Message header** — displays user/group name, avatar, and status
+3. **Message list + composer** — chat history with real-time updates and text input
-***
+This implementation uses Android's standard Activity navigation: `ConversationActivity` displays the list, user taps a conversation, `MessageActivity` launches with the selected user/group data via Intent extras.
-## **Step-by-Step Guide**
+---
-### **Step 1: Set Up Conversation Activity**
-Create an Activity - `ConversationActivity.kt` to manage and display the chat UI.
+### Step 1: Set Up Conversation Activity
+Create a new Activity called `ConversationActivity` to display the list of conversations.
-#### **Layout**
-Define the layout using the `CometChatConversations` component:
+#### Layout
+Define the layout using the `CometChatConversations` component in `activity_conversations.xml`:
-```xml activity_conversations.xml
+```xml activity_conversations.xml lines
-### **Key Components**
+Three components stacked vertically:
-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** — real-time chat history with scrolling
+3. **Message composer** — text input with media and attachments
-***
+The user or group ID is passed via Intent extras when launching the Activity — ideal for launching from a user profile, support button, or notification.
-## **Step-by-Step Guide**
+---
-### **Step 1: Set Up Message Activity**
-Create an Activity - `MessageActivity.kt` to manage and display the chat UI.
+### Step 1: Set Up Message Activity
+Create an Activity - `MessageActivity` to display the full-screen chat interface.
-#### **Layout**
+#### 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
+```xml activity_message.xml lines
-This layout consists of:
+Three sections working together:
-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** — switches between Chats, Calls, Users, and Groups
+2. **Fragment container** — renders the CometChat component for the active tab
+3. **Dynamic content** — each tab loads its respective Fragment with real-time data
-***
+This uses Android's `BottomNavigationView` pattern: `TabbedActivity` hosts the navigation and fragment container, user taps a tab, the corresponding Fragment loads.
-## **Step-by-Step Guide**
-
-### **Step 1: Create a Tab Component**
+---
-To manage navigation, let's build a **`CometChatTabs`** component. This component will render different tabs and allow switching between sections dynamically.
+### Step 1: Set Up Tabbed Activity
+Create a new Activity called `TabbedActivity` with **BottomNavigationView** to manage tab navigation.
-#### **Folder Structure**
+#### Project Structure
-Create a `TabbedActivity` inside your `src` directory and add the following files:
+Create the following files in your Android project:
-```txt
+```txt lines
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,16 +65,19 @@ 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**:
-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)
+🔗 [GitHub Drawable Resources](https://github.com/cometchat/cometchat-uikit-android/tree/v5/sample-app-java/src/main/res/drawable)
-#### **Implementation**
+Place the icon files (`ic_chats.xml`, `ic_calls.xml`, `ic_user.xml`, `ic_group.xml`) in your `res/drawable/` directory.
+
+#### Implementation
-
-
-You can create an `custom_title_view.xml` as a custom layout file. Which we will inflate in `setTitleView()`
-
-```html
-
-
+
+
+### `setTitleView`
+
+Replace the name / title text.
+
+
+ 
-You can create an `item_converation_list.xml` as a custom layout file. Which we will inflate in `setListItemView()`
+Create an `item_converation_list.xml` custom layout file:
-```html
+```html lines
+
+
+
+
-This method 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 purposes such as:
+
-```xml themes.xml
+```xml themes.xml lines
- @Override
- public void bindView(Context context, View createdView, Conversation conversation, RecyclerView.ViewHolder holder, List
@@ -91,7 +100,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,12 +126,26 @@ 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. |
-## Quoted Reply
+## Threaded Conversations
-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.
+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 Replies
+
+Quoted Replies are 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 +156,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 Chats
-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 +200,36 @@ 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
+## Conversation and Advanced Search
-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.
+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.
-
+
-| 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
-
-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).
+## Next Steps
+
+
-### Profanity Filter
-
-The Profanity Filter extension helps in maintaining the chat decorum by censoring obscene and inappropriate words in the messages. For a comprehensive understanding and guide on implementing and using the Profanity Filter Extension, refer to our specific guide on the [Legacy Extensions](/moderation/legacy-extensions).
-
-Once you have successfully activated the Profanity Filter Extension from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/android/message-list) component of UI Kits.
-
### Thumbnail Generation
The Thumbnail Generation extension automatically creates a smaller preview image whenever a larger image is shared, helping to reduce the upload/download time and bandwidth usage. For a comprehensive understanding and guide on implementing and using the Thumbnail Generation Extension, refer to our specific guide on the [Thumbnail Generation Extension](/fundamentals/thumbnail-generation).
@@ -91,3 +97,9 @@ Once you have successfully activated the [Thumbnail Generation Extension](/funda
+
+### Profanity Filter
+
+The Profanity Filter extension helps in maintaining the chat decorum by censoring obscene and inappropriate words in the messages. For a comprehensive understanding and guide on implementing and using the Profanity Filter Extension, refer to our specific guide on the [Legacy Extensions](/moderation/legacy-extensions).
+
+Once you have successfully activated the Profanity Filter Extension from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/android/message-list) component of UI Kits.
diff --git a/ui-kit/android/getting-started.mdx b/ui-kit/android/getting-started.mdx
index 20f734f15..1fb12abe1 100644
--- a/ui-kit/android/getting-started.mdx
+++ b/ui-kit/android/getting-started.mdx
@@ -1,106 +1,75 @@
---
title: "Getting Started With CometChat Android UI Kit"
sidebarTitle: "Integration"
+description: "Install, configure, and launch the CometChat Android UI Kit in your app with step-by-step integration instructions."
---
-The **CometChat UI Kit for Android** streamlines the integration of in-app chat functionality by providing a **comprehensive set of prebuilt UI components**. It offers seamless **theming options**, including **light and dark modes**, customizable fonts, colors, and extensive styling capabilities.
+
---------
-
-***
-
-## **Prerequisites**
-
-Before installing the **CometChat UI Kit for Android**, you must first **create a CometChat application** via the **[CometChat Dashboard](https://app.cometchat.com/)**. The dashboard provides all the essential chat service components, including:
-
-* **User Management**
-* **Group Chat & Messaging**
-* **Voice & Video Calling**
-* **Real-time Notifications**
-
-
-**Use When:**
-
-* 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.
-
-[Integrate Conversation List + Message View](./android-conversation)
-
-***
-
-### **2️⃣ One-to-One / Group Chat**
+
-**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**.
-
-[Integrate One-to-One / Group Chat](./android-one-to-one-chat)
-
-***
-
-### **3️⃣ Tab-Based Messaging UI (All-in-One)**
+
-**Use When:**
-
-* You want a **multi-functional chat app** in one interface.
-* Your users need to **navigate easily between modules**.
-* Ideal for **support, enterprise, or social apps**.
-
-[Integrate Tab-Based Chat](./android-tab-based-chat)
-
-***
+
-
+`CometChatGroupMembers` is a list component. It renders all members of a specific group and emits the selected `GroupMember` via `setOnItemClick`. It requires a `Group` object set via `setGroup()` before it can load data. Wire it to `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer` to build a group messaging layout.
+
+
+
-
-
-
-```xml themes.xml
-
+
+
-| Methods | Description | Code |
-| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- |
-| setGroup | Sets the group whose members need to be fetched. This is a required property for the component to function properly. | `.setGroup(group);` |
-| setBackIconVisibility | Used to toggle visibility for back button in the app bar | `.setBackIconVisibility(View.VISIBLE);` |
-| setToolbarVisibility | Used to toggle visibility for back button in the app bar | `.setToolbarVisibility(View.GONE);` |
-| setErrorStateVisibility | Used to hide error state on fetching Users | `.setErrorStateVisibility(View.GONE);` |
-| setEmptyStateVisibility | Used to hide empty state on fetching Users | `.setEmptyStateVisibility(View.GONE);` |
-| setLoadingStateVisibility | Used to hide loading state while fetching Users | `.setLoadingStateVisibility(View.GONE);` |
-| setSeparatorVisibility | Used to control visibility of Separators in the list view | `.setSeparatorVisibility(View.GONE);` |
-| setUsersStatusVisibility | Used to control visibility of status indicator shown if user is online | `.setUsersStatusVisibility(View.GONE);` |
-| setSelectionMode | This method determines the selection mode for members, enabling users to select either a single or multiple members at once. | `.setSelectionMode(UIKitConstants.SelectionMode.MULTIPLE);` |
-| setSearchkeyword | Used for fetching members matching the passed keywords | `.setSearchkeyword("anything");` |
-| setSearchBoxVisibility | Used to hide search box shown in the tool bar | `.setSearchBoxVisibility(View.GONE);` |
+Create a custom layout file named `custom_title_view.xml`:
-***
-
-### Advanced
-
-For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your own views, layouts, and UI elements and then incorporate those into the component.
-
-The `Group Memebers` component does not provide additional functionalities beyond this level of customization.
-
-***
-
-#### setOptions
-
-Defines a set of available actions that users can perform when they interact with a group member item.
+```xml custom_title_view.xml lines
+
+
+
-Configures a view to be displayed when no group members are found.
+Create a custom layout file named `custom_title_view.xml`:
-Use Cases:
+```xml custom_title_view.xml lines
+
+
-
-
-You can indeed create a custom layout file named `custom_title_view.xml` for more complex or unique list items.
+
+
-
+ 
-You can indeed create a custom layout file named `custom_title_view.xml` for more complex or unique list items.
-
-Once this layout file is made, you would inflate it inside the `createView()` method of the `GroupsViewHolderListener`. The inflation process prepares the layout for use in your application:
+Create a custom layout file named `custom_tail_view.xml`:
-Following this, you would use the `bindView()` method to initialize and assign values to your individual views. This could include setting text on TextViews, images on ImageViews, and so on based on the properties of the Group object:
-
-```xml custom_title_view.xml
+```xml custom_tail_view.xml lines
-You can indeed create a custom layout file named `item_list.xml` for more complex or unique list items.
-
-Once this layout file is made, you would inflate it inside the `createView()` method of the `GroupsViewHolderListener`. The inflation process prepares the layout for use in your application:
+Create a custom layout file named `item_list.xml`:
-Following this, you would use the `bindView()` method to initialize and assign values to your individual views. This could include setting text on TextViews, images on ImageViews, and so on based on the properties of the Group object:
-
-```xml item_list.xml
+```xml item_list.xml lines
+
-You can indeed create a custom layout file named `subtitle_layout.xml` for more complex or unique list items.
-
-Once this layout file is made, you would inflate it inside the `createView()` method of the `GroupsViewHolderListener`. The inflation process prepares the layout for use in your application:
-
-Following this, you would use the `bindView()` method to initialize and assign values to your individual views. This could include setting text on TextViews, images on ImageViews, and so on based on the properties of the Group object:
-
-
+### Hide kick/ban/scope options
-You can indeed create a custom layout file named `tail_view_layout.xml` for more complex or unique list items.
+
+
-
-
+`CometChatGroups` is a list component. It renders all available groups and emits the selected `Group` via `setOnItemClick`. Wire it to `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer` to build a group messaging layout.
+
+
+
-##### setOnItemClick
+Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()`, a user logged in, and the `cometchat-chat-uikit-android` dependency added.
-Function invoked when a Group item is clicked, typically used to open a Group profile or chat screen.
+To add programmatically in an Activity:
-
-
-```html
-
-
-
-```
-
-
-You can indeed create a custom layout file named `custom_leading_avatar_view.xml` for more complex or unique list items.
-
-Once this layout file is made, you would inflate it inside the `createView()` method of the `GroupsViewHolderListener`. The inflation process prepares the layout for use in your application:
-
-Following this, you would use the `bindView()` method to initialize and assign values to your individual views. This could include setting text on TextViews, images on ImageViews, and so on based on the properties of the Group object:
+Create a `custom_leading_avatar_view.xml` layout:
-```xml custom_leading_avatar_view.xml
+```xml custom_leading_avatar_view.xml lines
-You can indeed create a custom layout file named `custom_title_view.xml` for more complex or unique list items.
+Create a `custom_group_title_view.xml` layout:
-Once this layout file is made, you would inflate it inside the `createView()` method of the `GroupsViewHolderListener`. The inflation process prepares the layout for use in your application:
-
-Following this, you would use the `bindView()` method to initialize and assign values to your individual views. This could include setting text on TextViews, images on ImageViews, and so on based on the properties of the Group object:
-
-```xml custom_title_view.xml
+```xml custom_group_title_view.xml lines
+
-You can indeed create a custom layout file named `custom_tail_view.xml` for more complex or unique list items.
-
-Once this layout file is made, you would inflate it inside the `createView()` method of the `GroupsViewHolderListener`. The inflation process prepares the layout for use in your application:
-
-Following this, you would use the `bindView()` method to initialize and assign values to your individual views. This could include setting text on TextViews, images on ImageViews, and so on based on the properties of the Group object:
+Create a `custom_tail_view.xml` layout:
-```xml custom_tail_view.xml
+```xml custom_tail_view.xml lines
-You can indeed create a custom layout file named `item_list.xml` for more complex or unique list items.
-
-Once this layout file is made, you would inflate it inside the `createView()` method of the `GroupsViewHolderListener`. The inflation process prepares the layout for use in your application:
-
-Following this, you would use the `bindView()` method to initialize and assign values to your individual views. This could include setting text on TextViews, images on ImageViews, and so on based on the properties of the Group object:
-
-```xml custom_group_list_itemd.xml
+Create a `custom_group_list_item.xml` layout:
+```xml custom_group_list_item.xml lines
-
-
-You can indeed create a custom layout file named `subtitle_layout.xml` for more complex or unique list items.
-
-Once this layout file is made, you would inflate it inside the `createView()` method of the `GroupsViewHolderListener`. The inflation process prepares the layout for use in your application:
-
-Following this, you would use the `bindView()` method to initialize and assign values to your individual views. This could include setting text on TextViews, images on ImageViews, and so on based on the properties of the Group object:
+Append to the long-press context menu without removing defaults.
-You need to create a `overflow_menu_layout.xml` as a custom view file. Which we will inflate and pass to `.setOverflowMenu()`.
+Create an `overflow_menu_layout.xml` layout:
-```xml overflow_menu_layout.xml
+```xml overflow_menu_layout.xml lines
+
+
+```xml themes.xml lines
+
+
```
+
-
+`CometChatIncomingCall` is a call-handling component. It renders when the logged-in user receives an incoming voice or video call, displaying the caller's information and providing accept/reject controls. Wire it to `CometChatOngoingCallActivity` after the user accepts the call.
-***
+
+
-##### Activity and Fragment
+Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()`, a user logged in, and the `cometchat-chat-uikit-android` dependency added.
-You can integrate `CometChatIncomingCall` into your Activity and Fragment by adding the following code snippets into the respective classes.
+In your Activity, get a reference and set the `Call` object:
-
+ override fun ccCallEnded(call: Call?) {
+ super.ccCallEnded(call)
+ }
+})
+```
-```xml themes.xml
-
+Remove Listener
-
```
+CometChatCallEvents.removeListener("LISTENER_TAG")
+```
+
-```xml leading_view.xml
+```xml leading_view.xml lines
-```xml custom_title_view.xml
+```xml custom_title_view.xml lines
-trailing\_view\.xml
-
-```xml trailing_view.xml
+```xml trailing_view.xml lines
+
+
+```xml themes.xml lines
+
+
+
+```
+
+
-In CometChat UIKit, a string resource is defined as:
-
-```xml strings.xml
+```xml strings.xml lines
-
+Use `setTextFormatters()` on [CometChatMessageComposer](/ui-kit/android/message-composer), [CometChatMessageList](/ui-kit/android/message-list), or [CometChatConversations](/ui-kit/android/conversations).
+
+
-```xml themes.xml
-
+```xml themes.xml lines
-```
-```html
-
+
+
+
+
```
-**Customizing Outgoing Message Bubble**
+Customizing Incoming Message Bubble
- 
+ 
-```html
-
-
-```
+Customizing Outgoing Message Bubble
-```html
-
-
-```
+
+
+
-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:**
+- [Message bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_message_bubble.xml)
-### Text Bubble
-Text bubbles display plain text messages. These are the most common bubble type in a chat interface.
+## Core Message Bubbles
+
+The following sections define how to style specific types of messages. Define the custom style, then link it to the central hubs (`CustomIncomingMessageBubbleStyle` or `CustomOutgoingMessageBubbleStyle`) established above.
-**Default**
+### Text Bubble
+Text bubbles display plain text messages. These are the most common bubble type.
+**Default & Customization**
-
-**Customization**
-
-**Customizing Incoming Bubble**
-
-```xml themes.xml
-
-
+
-```
-
-```xml themes.xml
-
-
-```
-
-**Customizing Outgoing Bubble**
-```html
-
-
+
```
+**Attribute reference:**
+- [Text bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_text_bubble.xml)
-```html
-
-
-```
-
-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).
### Link Preview Bubble
+Displays a preview of links shared in messages, enriching the experience with titles, descriptions, and images.
-The Link Preview Bubble is designed to display a preview of links shared in messages. It enriches the messaging experience by showing details such as the page title, description, and an image from the linked content, making links more engaging and informative.
-
-**Default**
-
+**Default & Customization**
-
-**Customization**
-
-**Customizing Incoming Bubble**
-
-```html
-
-
-
-```
-
-```html
-
-
-```
-
-**Customizing Outgoing Bubble**
-
-```html
-
-
-
-
-```
-
-```html
-
-
```
-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).
### Image Bubble
-
Image bubbles display images shared within a conversation.
-**Default**
-
+**Default & Customization**
-
-**Customization**
-
-**Customizing Incoming Bubble**
-
-```html
-
-
-```
-
-```html
-
-
-```
-**Customizing Outgoing Bubble**
-
-```html
-
+
@@ -242,32 +199,20 @@ Image bubbles display images shared within a conversation.
-**Customizing Incoming Bubble**
-
-```html
-
+```xml themes.xml lines
+
-```
-
-```html
-
-
-```
-**Customizing Outgoing Bubble**
-
-```html
-
+
```
+**Attribute reference:**
+- [Video bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_video_bubble.xml)
-```html
-
-
-```
-
-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).
### Audio Bubble
-
Audio bubbles represent audio messages or voice recordings.
-**Default**
-
+**Default & Customization**
-
-**Customization**
-
-**Customizing Incoming Bubble**
-
-```html
-
+```xml themes.xml lines
+
-```
-
-```html
-
-
-```
-**Customizing Outgoing Bubble**
-
-```html
-
+
```
+**Attribute reference:**
+- [Audio bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_audio_bubble.xml)
-```html
-
-
-```
-
-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).
### File Bubble
+Displays shared files, such as documents, PDFs, or spreadsheets.
-File bubbles are used to display shared files, such as documents, PDFs, or spreadsheets.
-
-**Default**
-
+**Default & Customization**
-
-**Customization**
-
-**Customizing Incoming Bubble**
-
-```html
-
+```xml themes.xml lines
+
-```
-
-```html
-
-
-```
-**Customizing Outgoing Bubble**
-
-```html
-
+
@@ -420,36 +306,23 @@ File bubbles are used to display shared files, such as documents, PDFs, or sprea
-
-**Customization**
-
-**Customizing Incoming Bubble**
-
-```html
-
+```xml themes.xml lines
+
@@ -457,19 +330,8 @@ Sticker bubbles display stickers shared in a conversation, enhancing visual expr
-```
-
-```html
-
-
-```
-**Customizing Outgoing Bubble**
-
-```html
-
+
@@ -478,36 +340,23 @@ Sticker bubbles display stickers shared in a conversation, enhancing visual expr
-
-**Customization**
-
-**Customizing Incoming Bubble**
-
-```html
-
+```xml themes.xml lines
+
@@ -515,19 +364,8 @@ Poll bubbles represent polls shared within the chat, showing options and results
-```
-
-```html
-
-
-```
-**Customizing Outgoing Bubble**
-
-```html
-
+
```
+**Attribute reference:**
+- [Poll bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_poll_bubble.xml)
-```html
-
-
-```
-
-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).
### Collaborative Bubble
+Displays collaborative content, such as shared documents or tasks.
-Collaborative bubbles display collaborative content, such as shared documents or tasks.
-
-**Default**
-
+**Default & Customization**
-
-**Customization**
-
-**Customizing Incoming Bubble**
-
-```html
-
+```xml themes.xml lines
+
@@ -574,19 +399,8 @@ Collaborative bubbles display collaborative content, such as shared documents or
-```
-
-```html
-
-
-```
-**Customizing Outgoing Bubble**
-
-```html
-
+
```
+**Attribute reference:**
+- [Collaborative bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_collaborative_bubble.xml)
-```html
-
-
-```
-
-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).
### Meet Call Bubble
+Displays call-related actions and statuses in the chat interface.
-Meet call bubbles display call-related actions and statuses in the chat interface.
-
-**Default**
-
+**Default & Customization**
-
-**Customization**
-
-**Customizing Incoming Bubble**
-
-```html
-
+```xml themes.xml lines
+
-```
-
-```html
-
-
-```
-**Customizing Outgoing Bubble**
-
-```html
-
+
```
+**Attribute reference:**
+- [Meet call bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_meet_call_bubble.xml)
-```html
-
-
-```
-
-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).
### Delete Bubble
+Indicates a message that has been removed by the sender.
-Delete bubbles are used to display messages that have been deleted by the sender. These indicate the message removal within the chat interface.
-
-**Default**
-
+**Default & Customization**
-
-**Customization**
-
-**Customizing Incoming Bubble**
-
-```html
-
-
-```
-
-```html
-
-
-```
-**Customizing Outgoing Bubble**
-
-```html
-
+
```
+**Attribute reference:**
+- [Delete bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_delete_bubble.xml)
-```html
-
-
-```
-
-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).
-### Call Action Bubble
+## List-Level Bubbles & Special Features
-Call action bubbles display call-related actions, such as missed calls, in the chat interface.
+Unlike standard messages, **Call Action** and **Action** bubbles are tied to the **Message List Style**, not the Incoming/Outgoing Hubs. AI Assistants and Quoted Replies have specialized formatting.
-**Default**
+### Call Action Bubble
+Displays call actions like missed calls within the message list.
+**Default & Customization**
-
-**Customization**
-
-**Customizing Bubble**
-
-```html
-
+```xml themes.xml lines
+
+
-```
-```html
-
+
```
+**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)
-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).
### Action Bubble
+Displays global group actions (e.g., "User joined the chat").
-Action bubbles provide a customizable interface for displaying a variety of actions, such as group actions, within a chat.
-
-**Default**
-
+**Default & Customization**
-
-**Customization**
-
-**Customizing Bubble**
-
-```html
-
+```xml themes.xml lines
+
+
-```
-```html
-
+
```
+**Attribute reference:**
+- [Action bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_action_bubble.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).
### AI Assistant Bubble
+Styles interactions generated by the AI assistant. These are anchored to the `IncomingMessageBubbleStyle`.
-AI Assistant bubbles display messages and interactions from an AI assistant within the chat interface.
-
-**Default**
-
+**Default & Customization**
-
-**Customization**
-
-**Customizing Bubble**
-
-```html
-
-
-
-
-
-
+```xml themes.xml lines
+
+
-
-```
+
+
-```html
-
-
```
+**Attribute reference:**
+- [AI assistant bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/att_cometchat_ai_assistant_bubble.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).
### Quoted Reply
+Styles the preview block when a user replies to a specific message.
-```xml themes.xml
-
-
-
-
-
-
-
-
-
-
-
-```
+```xml themes.xml lines
+
+
-```xml themes.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_preview.xml).
\ No newline at end of file
+
+
+
+
+
+
+
+
+```
+**Attribute reference:**
+- [Message preview attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_message_preview.xml)
+
+## Customization matrix
+
+| What you want to change | Where | Property/API | Example |
+| --- | --- | --- | --- |
+| Incoming bubble background | `res/values/themes.xml` | `cometchatMessageBubbleBackgroundColor` in `CometChatIncomingMessageBubbleStyle` | `
-
+
+
-The MessageComposer is responsible for managing runtime permissions. To ensure the **ActivityResultLauncher** is properly initialized, its object should be created in the the **onCreate** state of an activity. To ensure that the composer is loaded within the fragment, it is important to make sure that the fragment is loaded in the `onCreate` state of the activity.
+Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()`, a user logged in, and the `cometchat-chat-uikit-android` dependency added.
+
+
+
+Create a `custom_header_layout.xml` layout:
+
+```xml custom_header_layout.xml lines
+
+
+ 
-```html
-
+First, create a custom send button drawable:
+
+```xml drawable/custom_send_button.xml lines
+
+
+
+
+
+
-```xml themes.xml
-
+```xml themes.xml lines
+```
+
-
+`CometChatMessageHeader` is a header bar component. It sits at the top of a chat screen and displays the avatar, name, and status of the user or group in the conversation. Wire it alongside `CometChatMessageList` and `CometChatMessageComposer` to build a complete messaging layout.
-***
+
+
-This action doesn't change the behavior of the component but rather listens for any errors that occur in the Users component.
+Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()`, a user logged in, and the `cometchat-chat-uikit-android` dependency added.
-
-
+## Custom View Slots
-```xml themes.xml
-
+Each slot replaces a section of the default header UI. Slots accept a `Function3
-
+Sets a custom style for the overflow popup menu.
+
+
+```xml themes.xml lines
+
+
+
+```
+
+
+
-#### setLoadingView
+```xml custom_footer_layout.xml lines
-Customizes the loading indicator when messages are being fetched.
+
+
-```xml themes.xml
+```xml themes.xml lines
-
+
+```
+
+> **What this does:** Defines custom mention styles for incoming and outgoing message bubbles. Incoming mentions appear in pink (`#D6409F`) and outgoing mentions appear in white (`#FFFFFF`), both with green self-mentions (`#30A46C`).
+
+
-
+cometchatMessageList.setDateTimeFormatter(new DateTimeFormatterCallback() {
-```html custom_header_layout.xml
+ private final SimpleDateFormat fullTimeFormatter = new SimpleDateFormat("hh:mm a", Locale.getDefault());
+ private final SimpleDateFormat dateFormatter = new SimpleDateFormat("dd MMM yyyy", Locale.getDefault());
-
-
-
+Replaces the entire message list with a new list.
-```xml custom_footer_layout.xml
+
+
+
+```xml themes.xml lines
+
+
+
+```
+
+> **What this does:** Defines two custom styles: `CustomOutgoingMessageBubbleStyle` sets the outgoing message bubble background to orange (`#F76808`); `CustomCometChatMessageListStyle` sets the message list background to light peach (`#FEEDE1`) and applies the custom outgoing bubble style.
+
+
-
-
-The MessageBubble structure can typically be broken down into the following views:
-
-1. **Leading view**: This is where the sender's avatar is displayed. It's typically on the left of the MessageBubble for messages from others and on the right for messages from the current user.
-
-2. **Header view**: This displays the sender's name and is especially useful in group chats where multiple users are sending messages.
-
-3. **Content view**: This is the core of the MessageBubble where the message content (text, images, videos, etc.) is displayed.
-
-4. **Bottom view**: This view can be used to extend the MessageBubble with additional elements, such as link previews or a 'load more' button for long messages. It's typically placed beneath the Content view.
-
-5. **Footer view**: This is where the timestamp of the message and its delivery or read status are displayed. It's located at the bottom of the MessageBubble.
-
-### Properties
-
-MessageTemplate provides you with methods that allow you to alter various properties of the MessageBubble. These properties include aspects such as the `type` and `category` of a message, the appearance and behavior of the header, content, and footer sections of the message bubble,
-
-1. **Type**
-
- Using `setType()` you can set the type of CometChatMessage, This will map your MessageTemplate to the corresponding CometChatMessage. You can set the MessageTemplate Type using the following code snippet.
-
- ```swift
- messageTemplate.setType(UIKitConstants.MessageType.CUSTOM);
- ```
-
-2. **Category**
-
- Using `.setCategory()` you can set the category of a MessageTemplate. This will create a MessageTemplate with the specified category and link it with a CometChatMessage of the same category.
-
- Please refer to our guide on [Message Categories](/sdk/android/message-structure-and-hierarchy) for a deeper understanding of message categories.
-
- ```swift
- messageTemplate.setCategory(UIKitConstants.MessageCategory.CUSTOM);
- ```
-
-3. **Header View**
-
- The .`setHeaderView()` method allows you to assign a custom header view to the MessageBubble. By default, it is configured to display the sender's name.
-
-```typescript
-messageTemplate.setHeaderView(new MessagesViewHolderListener() {
- @Override
- public View createView(Context context, CometChatMessageBubble messageBubble, UIKitConstants.MessageBubbleAlignment alignment) {
- return null;
- }
-
- @Override
- public void bindView(Context context,
- View createdView,
- BaseMessage message,
- UIKitConstants.MessageBubbleAlignment alignment,
- RecyclerView.ViewHolder holder,
- List
+
+
+The `MessageBubble` structure is broken down into these views:
+
+1. **Leading view**: Displays the sender's avatar. It appears on the left of the `MessageBubble` for messages from others and on the right for messages from the current user.
+
+2. **Header view**: Displays the sender's name. This is useful in group chats where multiple users are sending messages.
+
+3. **Content view**: The core of the `MessageBubble` where the message content (text, images, videos, etc.) is displayed.
+
+4. **Bottom view**: Extends the `MessageBubble` with additional elements, such as link previews or a "load more" button for long messages. It is placed beneath the Content view.
+
+5. **Footer view**: Displays the timestamp of the message and its delivery or read status. It is located at the bottom of the `MessageBubble`.
+
+### Template Properties
+
+`MessageTemplate` provides methods that allow you to alter various properties of the `MessageBubble`, including the `type` and `category` of a message, and the appearance and behavior of the header, content, and footer sections.
+
+**Type**: Use `setType()` to set the type of `CometChatMessage`. This maps your `MessageTemplate` to the corresponding `CometChatMessage`.
+
+```java
+messageTemplate.setType(UIKitConstants.MessageType.CUSTOM);
```
-
-```xml message_template_header_view.xml
+**XML Layout:**
+
+```xml message_template_header_view.xml lines
-```xml image_bubble_content_view.xml
+**XML Layout:**
+
+```xml image_bubble_content_view.xml lines
-```xml status_info_layout.xml
+**XML Layout:**
+
+```xml status_info_layout.xml lines
-```xml message_template_bottom_view.xml
+**XML Layout:**
+
+```xml message_template_bottom_view.xml lines
-```html
+**XML Layout:**
+
+```html lines
+**XML Layouts:**
+
drawable/left\_bubble\_bg
-```html
+```html lines
+**Code:**
+
-First, let's see how to send a custom message:
+**Sending a custom message:**
-
-
-***
-
-## Usage
-
-### Integration
-
-`CometChatOutgoingCall` being a custom component, offers versatility in its integration. It can be seamlessly launched via button clicks or any user-triggered action, enhancing the overall user experience and facilitating smoother interactions within the application.
-
-Since `CometChatOutgoingCall` can be launched by adding the following code snippet into the XML layout file.
-
-
+
- setContentView(cometchatOutgoingCall);
-}
-```
+Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()`, a user logged in, and the `cometchat-chat-uikit-android` dependency added.
-
-
-
-```xml themes.xml
-
-
-```
-
-
-```xml custom_title_view.xml
+Create a `custom_title_view.xml` layout:
+
+```xml custom_title_view.xml lines
-```html custom_subtitle_view.xml
+Create a `custom_subtitle_view.xml` layout:
+
+```xml custom_subtitle_view.xml lines
-```xml custom_avatar_view.xml
+Create a `custom_avatar_view.xml` layout:
+
+```xml custom_avatar_view.xml lines
-```xml end_call_button.xml
+Create an `end_call_button.xml` layout:
+
+```xml end_call_button.xml lines
+
+
+```xml themes.xml lines
+
+
+```
+
+
-***
+---
-## **Download the CometChat Demo App**
+## Try It
-Get started with the **CometChat UI Kit** on your mobile device:
+
](https://link.cometchat.com/android-demo-app)
-**Or Scan the QR Code**
+Or scan the QR code to install directly:
-> **Tip:** On Android, you can use Google Lens or any QR code scanning app to install directly.
-
-***
-
-## **Getting Started**
-
-Before integrating the CometChat UI Kit, familiarize yourself with the key concepts and features offered by 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.
-
-***
-
-## **Integration and Customization**
-
-The CometChat UI Kit comprises modular Android Views that can be integrated effortlessly into your app, offering flexible customization:
-
-* **Prebuilt UI Components:** Ready-to-use UI elements.
-* **Modular Structure:** Easy to integrate and modify.
-* **Customization Options:** Highly configurable to fit your brand and UI requirements.
-
-Explore more about UI customization in the [Customization Guide](/ui-kit/android/theme-introduction).
-
-***
-
-## **Helpful Resources**
-
-Explore these essential resources to gain a deeper understanding of **CometChat UI Kits** and streamline your integration process.
-
-
-
+`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.
-***
+
+
-
+ 
-```xml themes.xml
-
+
-
+#### `setTextFormatters`
-Bellow is the list of message item view functions available for customization:
+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:
-| Function | Message Type |
-| -------------------------------- | ---------------------|
-| **setTextMessageItemView** | Text Message |
-| **setImageMessageItemView** | Image Message |
-| **setVideoMessageItemView** | Video Message |
-| **setAudioMessageItemView** | Audio Message |
-| **setDocumentMessageItemView** | Document Message |
-| **setLinkMessageItemView** | Link Message |
+* 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
-#### DateTime Formatters
+For implementation details, refer to the [MentionsFormatter Guide](/ui-kit/android/mentions-formatter-guide).
-#### setDateTimeFormatter
+### Date/Time Formatting
-By providing a custom implementation of the DateTimeFormatterCallback, you can configure how time and date values are displayed. This ensures consistent formatting for labels such as "Today", "Yesterday", "X minutes ago", and more.
+#### `setDateTimeFormatter`
-Each method in the interface corresponds to a specific case:
+Provides a custom implementation of `DateTimeFormatterCallback` to configure how time and date values are displayed in search results.
-`time(long timestamp)` → Custom full timestamp format
+
+
- override fun lastWeek(timestamp: Long): String {
- return "Last Week"
- }
+```xml themes.xml lines
+
-#### Text Formatters
+
+```
-#### setTextFormatters
+> **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.
-This method 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 purposes such as:
+
+
-
-
+---
+
+## Next Steps
+
+
+
+
+### Apply a theme to a specific activity
+What you're changing: The theme for a single activity.
+
+- **Where to change it**: `AndroidManifest.xml`.
+
+- **Applies to**: Only the targeted activity.
+
+- **Default behavior**: Activities inherit the application theme.
+
+- **Override**: Set `android:theme` on the `
-
+- **What this does**: Applies `ChatTheme` only to `ChatActivity`.
-## Customization
+- **Verify**: Open `ChatActivity` and confirm the theme differs from the rest of the app.
-To customize the primary color in your app, you can override the cometchatPrimaryColor attribute in your theme. Here's how:
+### Change the primary color
+What you're changing: The primary brand color used across UI Kit.
-```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).
+- **What this does**: Replaces the UI Kit primary color with your brand color.
+
+- **Verify**: Buttons and highlights use the new color.
+
+### Customize common theme attributes
+What you're changing: Background, text, and stroke colors.
+
+- **Where to change it**: `app/src/main/res/values/themes.xml`.
+
+- **Applies to**: All UI Kit components that use these attributes.
+
+- **Default behavior**: UI Kit uses its default theme values.
+
+- **Override**: Define the attributes in your app theme.
+
+- **Code**:
+
+```xml themes.xml lines
+
+```
+
+- **What this does**: Updates common UI Kit colors in one place.
+
+- **Verify**: Backgrounds, text, and dividers reflect the new values.
+
+### Add dark mode overrides
+What you're changing: Theme values used in dark mode.
+
+- **Where to change it**: `app/src/main/res/values-night/themes.xml`.
+
+- **Applies to**: Dark mode only.
+
+- **Default behavior**: Dark mode uses the same values as light mode.
+
+- **Override**: Create `values-night/themes.xml` and override the attributes.
+
+- **Code**:
+
+```xml values-night/themes.xml lines
+
+
+
+```xml themes.xml lines
+
+
+
+
+```
+
+
@@ -14,7 +13,7 @@ The **CometChat v5 Android UI Kit** streamlines the integration of in-app chat f
## Integration
-In **v4**, integration was straightforward due to the availability of composite components like `CometChatConversationsWithMessages`. This single component provided end-to-end functionality, including listing conversations, handling conversation clicks, loading messages (message header, list, composer), displaying user or group details, and supporting threaded messages. Developers could achieve all these features with minimal setup. However, customization posed significant challenges. Customizing the UI or adding custom views required a deep understanding of the internal flow of the composite component. Additionally, configurations were a mix of custom view props, behavioural props, and style props, which often led to confusion. Styling deeply nested components also proved cumbersome, limiting the developer’s ability to make meaningful changes.
+In **v4**, integration was straightforward due to the availability of composite components like `CometChatConversationsWithMessages`. This single component provided end-to-end functionality, including listing conversations, handling conversation clicks, loading messages (message header, list, composer), displaying user or group details, and supporting threaded messages. Developers could achieve all these features with minimal setup. However, customization posed significant challenges. Customizing the UI or adding custom views required a deep understanding of the internal flow of the composite component. Additionally, configurations were a mix of custom view props, behavioural props, and style props, which often led to confusion. Styling deeply nested components also proved cumbersome, limiting the developer's ability to make meaningful changes.
@@ -22,7 +21,7 @@ In **v4**, integration was straightforward due to the availability of composite
With **v5**, composite components have been replaced with smaller, modular components, such as `Conversations`, `Message Header`, `Message List`, and `Message Composer`. This modular approach makes integration more flexible and easier to understand. Each component has a well-defined purpose, allowing developers to use them in ways that suit their specific requirements. The need for complex configurations has been eliminated, as developers can now customize behavior and styling directly via props. Styling has been significantly simplified, with every component carefully assigned, enabling developers to customize styles globally or at the component level effortlessly.
-To support the transition from v4 to v5, CometChat has built a [sample app](https://github.com/cometchat/cometchat-uikit-android) that replicates the functionality of v4’s composite components. This sample app serves as a reference for developers looking to build additional features such as user/group details, call log details, threaded messages, and advanced messaging capabilities. By following this approach, developers can take full advantage of v5’s modular design while implementing complex functionality in an organized manner.
+To support the transition from v4 to v5, CometChat has built a [sample app](https://github.com/cometchat/cometchat-uikit-android) that replicates the functionality of v4's composite components. This sample app serves as a reference for developers looking to build additional features such as user/group details, call log details, threaded messages, and advanced messaging capabilities. By following this approach, developers can take full advantage of v5's modular design while implementing complex functionality in an organized manner.
@@ -64,11 +63,11 @@ In **v5**, the composite approach is replaced with smaller, modular components l
In **v4**, theming was managed using the `Palette` and `Typography` classes. The `Palette` class provided methods like `background`, `mode`, `primary`, `secondary`, and similar setters for configuring colors and themes. While this approach worked, it required instantiating multiple objects and passing them through constructors, which added complexity to the theming process. Developers had to create palette and typography instances, configure them with various color and font settings, and then pass them to create a theme object.
-The reliance on Context for theming introduced several challenges. Customizing themes often required developers to consume the theme from the context and then explicitly update values programmatically, which added unnecessary complexity. For example, switching between light and dark modes required interacting with the theme’s context and invoking specific methods like `mode`. This process was less straightforward compared to the traditional approach to define themes dynamically.
+The reliance on Context for theming introduced several challenges. Customizing themes often required developers to consume the theme from the context and then explicitly update values programmatically, which added unnecessary complexity. For example, switching between light and dark modes required interacting with the theme's context and invoking specific methods like `mode`. This process was less straightforward compared to the traditional approach to define themes dynamically.
-You can indeed create a custom layout file named `custom_user_title_view.xml` for more complex or unique list items.
-
-Once this layout file is made, you would inflate it inside the `createView()` method of the `UsersViewHolderListener`. The inflation process prepares the layout for use in your application:
+Create a `custom_user_title_view.xml` layout:
-Following this, you would use the `bindView()` method to initialize and assign values to your individual views. This could include setting text on TextViews, images on ImageViews, and so on based on the properties of the User object:
-
-```xml custom_user_title_view.xml
+```xml custom_user_title_view.xml lines
+
-You can indeed create a custom layout file named `custom_user_tail_view.xml` for more complex or unique list items.
-
-Once this layout file is made, you would inflate it inside the `createView()` method of the `UsersViewHolderListener`. The inflation process prepares the layout for use in your application:
+Create a `custom_user_tail_view.xml` layout:
-Following this, you would use the `bindView()` method to initialize and assign values to your individual views. This could include setting text on TextViews, images on ImageViews, and so on based on the properties of the User object:
-
-```xml custom_user_tail_view.xml
+```xml custom_user_tail_view.xml lines
-You can indeed create a custom layout file named `custom_list_item_view.xml` for more complex or unique list items.
+Create a `custom_list_item_view.xml` layout:
-Once this layout file is made, you would inflate it inside the `createView()` method of the `UsersViewHolderListener`. The inflation process prepares the layout for use in your application:
-
-Following this, you would use the `bindView()` method to initialize and assign values to your individual views. This could include setting text on TextViews, images on ImageViews, and so on based on the properties of the User object:
-
-```xml custom_list_item_view.xml
+```xml custom_list_item_view.xml lines
+ 
-You can indeed create a custom layout file named `subtitle_layout.xml` for more complex or unique list items.
+
-
+Returns the list of currently selected `User` objects.
+
+
+```xml themes.xml lines
+
+
```
+
-## Usage
-
-### Integration
-
-##### Using Navigation Controller to Present `CometChatAIAssistantChatHistory`
-
-The `CometChatAIAssistanceChatHistory` component can be launched using a navigation controller.
-This approach is ideal when you want to present the chat history as a standalone screen within your app’s navigation flow
-
-
-
-
-***
+import UIKit
+import CometChatUIKitSwift
+
+class CustomErrorView: UIView {
+
+ private let iconView: UIImageView = {
+ let iv = UIImageView()
+ iv.image = UIImage(systemName: "exclamationmark.triangle")
+ iv.tintColor = .systemRed
+ iv.contentMode = .scaleAspectFit
+ iv.translatesAutoresizingMaskIntoConstraints = false
+ return iv
+ }()
+
+ private let titleLabel: UILabel = {
+ let label = UILabel()
+ label.text = "Something went wrong"
+ label.font = .systemFont(ofSize: 18, weight: .semibold)
+ label.textAlignment = .center
+ label.translatesAutoresizingMaskIntoConstraints = false
+ return label
+ }()
+
+ private let messageLabel: UILabel = {
+ let label = UILabel()
+ label.text = "We couldn't load your AI chat history.\nPlease check your connection."
+ label.font = .systemFont(ofSize: 14)
+ label.textColor = .secondaryLabel
+ label.textAlignment = .center
+ label.numberOfLines = 0
+ label.translatesAutoresizingMaskIntoConstraints = false
+ return label
+ }()
+
+ let retryButton: UIButton = {
+ let button = UIButton(type: .system)
+ button.setTitle("Try Again", for: .normal)
+ button.titleLabel?.font = .systemFont(ofSize: 16, weight: .medium)
+ button.backgroundColor = .systemBlue
+ button.setTitleColor(.white, for: .normal)
+ button.layer.cornerRadius = 10
+ button.translatesAutoresizingMaskIntoConstraints = false
+ return button
+ }()
+
+ override init(frame: CGRect) {
+ super.init(frame: frame)
+ setupUI()
+ }
+
+ required init?(coder: NSCoder) {
+ fatalError("init(coder:) has not been implemented")
+ }
+
+ private func setupUI() {
+ addSubview(iconView)
+ addSubview(titleLabel)
+ addSubview(messageLabel)
+ addSubview(retryButton)
+
+ NSLayoutConstraint.activate([
+ iconView.centerXAnchor.constraint(equalTo: centerXAnchor),
+ iconView.centerYAnchor.constraint(equalTo: centerYAnchor, constant: -60),
+ iconView.widthAnchor.constraint(equalToConstant: 60),
+ iconView.heightAnchor.constraint(equalToConstant: 60),
+
+ titleLabel.topAnchor.constraint(equalTo: iconView.bottomAnchor, constant: 16),
+ titleLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 24),
+ titleLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -24),
+
+ messageLabel.topAnchor.constraint(equalTo: titleLabel.bottomAnchor, constant: 8),
+ messageLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 24),
+ messageLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -24),
+
+ retryButton.topAnchor.constraint(equalTo: messageLabel.bottomAnchor, constant: 20),
+ retryButton.centerXAnchor.constraint(equalTo: centerXAnchor),
+ retryButton.widthAnchor.constraint(equalToConstant: 140),
+ retryButton.heightAnchor.constraint(equalToConstant: 44)
+ ])
+ }
+}
-### Functionality
+// Usage
+let chatHistory = CometChatAIAssistanceChatHistory()
+chatHistory.user = user
-These functional customizations allow you to fine-tune the overall behavior and user experience of the component.
-With these options, you can modify text, customize icons, and toggle visibility for specific UI elements within the `CometChatAIAssistanceChatHistory` component.
+let errorView = CustomErrorView()
+errorView.retryButton.addTarget(self, action: #selector(retryLoading), for: .touchUpInside)
-
-## Conversation Starters
+| Feature | What It Does | Where It Appears |
+|---------|--------------|------------------|
+| Conversation Starters | Suggests opening messages for new chats | `CometChatMessageList` |
+| Smart Replies | Suggests responses based on context | `CometChatMessageComposer` |
+| Conversation Summary | Summarizes long conversations | `CometChatMessageComposer` |
+| AI Assistant | Chat with AI bot | `CometChatAIAssistanceChatHistory` |
+
+---
+
+## Enable AI Features
+
+
-## Smart Replies
+### How It Works
+
+1. User opens chat with someone they haven't messaged before
+2. AI analyzes user profiles and context
+3. Suggested messages appear in the message list
+4. User taps a suggestion to send it
+
+### Implementation
+
+Conversation starters appear automatically in `CometChatMessages`:
+
+
-## Conversation Summary
+### How It Works
+
+1. User receives a message
+2. AI analyzes the message and conversation context
+3. Smart reply suggestions appear in the composer action sheet
+4. User taps a suggestion to insert it
+
+### Implementation
+
+Smart replies appear automatically in `CometChatMessageComposer`:
+
+
+
+### How It Works
+
+1. User opens a conversation with many messages
+2. User taps the summary option in composer action sheet
+3. AI processes the conversation
+4. Summary of key points is displayed
+
+### Implementation
+
+Conversation summary is available automatically:
+
+
+
+
+
List of properties exposed by ButtonStyle
@@ -332,3 +374,95 @@ callButtons.set(controller: UIViewController) // Passing the controller is requi
***
+
+## Props
+
+All props are optional.
+
+---
+
+### user
+
+The user for 1-on-1 call buttons. Pass either `user` or `group`, not both.
+
+| | |
+|---|---|
+| Type | `User?` |
+| Default | `nil` |
+
+---
+
+### group
+
+The group for group call buttons. Pass either `user` or `group`, not both.
+
+| | |
+|---|---|
+| Type | `Group?` |
+| Default | `nil` |
+
+---
+
+### hideVoiceCallButton
+
+Hides the voice call button.
+
+| | |
+|---|---|
+| Type | `Bool` |
+| Default | `false` |
+
+---
+
+### hideVideoCallButton
+
+Hides the video call button.
+
+| | |
+|---|---|
+| Type | `Bool` |
+| Default | `false` |
+
+---
+
+### outgoingCallConfiguration
+
+Configuration object for the internal `CometChatOutgoingCall` sub-component.
+
+| | |
+|---|---|
+| Type | `OutgoingCallConfiguration` |
+| Default | `OutgoingCallConfiguration()` |
+
+---
+
+### customSoundForCalls
+
+Custom sound file URL for calls.
+
+| | |
+|---|---|
+| Type | `URL?` |
+| Default | `nil` |
+
+---
+
+## Events
+
+Events emitted by the Call Buttons component:
+
+| Event | Description |
+|-------|-------------|
+| `onOutgoingCallAccepted` | Triggers when the outgoing call is accepted |
+| `onOutgoingCallRejected` | Triggers when the outgoing call is rejected |
+| `onCallEnded` | Triggers when the call ends |
+
+---
+
+## Related Components
+
+- [Incoming Call](/ui-kit/ios/incoming-call) - Display incoming call interface
+- [Outgoing Call](/ui-kit/ios/outgoing-call) - Display outgoing call interface
+- [Call Logs](/ui-kit/ios/call-logs) - Display call history
+
+***
diff --git a/ui-kit/ios/call-features.mdx b/ui-kit/ios/call-features.mdx
index c22dfa285..d39515839 100644
--- a/ui-kit/ios/call-features.mdx
+++ b/ui-kit/ios/call-features.mdx
@@ -1,39 +1,47 @@
---
-title: "Call"
+title: "Calling Features"
+sidebarTitle: "Call"
+description: "Complete guide to adding voice and video calling to iOS apps with CometChat UI Kit - production-ready code included"
---
-## Overview
-
-CometChat's Calls feature is an advanced functionality that allows you to seamlessly integrate one-on-one as well as group audio and video calling capabilities into your application. This document provides a technical overview of these features, as implemented in the iOS UI Kit.
-
-## Integration
-
-First, make sure that you've correctly integrated the UI Kit library into your project. If you haven't done this yet or are facing difficulties, refer to our [Getting Started](/ui-kit/ios/getting-started) guide. This guide will walk you through a step-by-step process of integrating our UI Kit into your iOS 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:
-
-**1. CocoaPods**
-
-We recommend using CocoaPods, as they are the most advanced way of managing iOS project dependencies. Open a terminal window, move to your project directory, and then create a Podfile by running the following command.
-
-
+
-```ruby Swift
-$ pod init
-```
+---
-Add the following lines to the Podfile.
+## Quick Setup
-```ruby Swift
-platform :ios, '11.0'
+
-
+incomingCall.set(onAcceptClick: { call in })
+incomingCall.set(onDeclineClick: { call in })
+```
-## Features
+### CometChatOutgoingCall
-### Incoming Call
+Displays outgoing call screen while waiting for answer.
-The [Incoming Call](/ui-kit/ios/incoming-call) component of the CometChat UI Kit provides the functionality that lets users receive real-time audio and video calls in the app.
+```swift
+let outgoingCall = CometChatOutgoingCall()
+outgoingCall.set(call: call)
-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.
+outgoingCall.set(onCancelClick: { call in })
+```
-
- 
-
+### CometChatCallLogs
+
+Displays call history. See [Call Logs](/ui-kit/ios/call-logs) for full documentation.
-### Outgoing Call
+```swift
+let callLogs = CometChatCallLogs()
+callLogs.set(onItemClick: { callLog, indexPath in })
+```
-The [Outgoing Call](/ui-kit/ios/incoming-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.
+---
-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.
+## Troubleshooting
-
- 
-
+| Problem | Solution |
+|---------|----------|
+| Call buttons not showing | Verify `CometChatCallsSDK` is in Podfile and run `pod install` |
+| "Permission denied" error | Add camera/microphone permissions to Info.plist |
+| Calls not connecting | Check network connection and CometChat credentials |
+| No incoming call UI | Ensure `CometChatCallsSDK` is initialized before login |
+| Audio not working | Check device is not on silent mode |
-### Call Logs
+---
-[Call Logs](/ui-kit/ios/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.
+## Related
-
- 
-
+- [Call Logs](/ui-kit/ios/call-logs) - Display call history
+- [Call Buttons](/ui-kit/ios/call-buttons) - Call button component
+- [Incoming Call](/ui-kit/ios/incoming-call) - Incoming call screen
+- [Outgoing Call](/ui-kit/ios/outgoing-call) - Outgoing call screen
+- [Ongoing Call](/ui-kit/ios/ongoing-call) - Active call screen
diff --git a/ui-kit/ios/call-logs.mdx b/ui-kit/ios/call-logs.mdx
index f59346b3a..503e71e94 100644
--- a/ui-kit/ios/call-logs.mdx
+++ b/ui-kit/ios/call-logs.mdx
@@ -1,15 +1,64 @@
---
title: "Call Logs"
+description: "Displays a list of call logs with call type, duration, and participant information"
---
-## Overview
-
-`CometChatCallLogs` is a [Component](/ui-kit/ios/components-overview#components) that shows the list of Call Log available . By default, names are shown for all listed users, along with their avatar if available.
+The `CometChatCallLogs` component shows the list of call logs available. By default, names are shown for all listed users, along with their avatar if available.
- 
+
+
+
List of properties exposed by CallLogStyle
@@ -432,7 +481,7 @@ callLogs.set(listItemView: { callLog in
- 
+
+
+
+
+
+
+
+
+
-
+---
+
+## Dark Mode Support
-Example: Dark Mode Color Usage
+CometChat automatically adapts to system appearance. You can also customize dark mode colors:
-
+---
+
+## Troubleshooting
+
+| Problem | Solution |
+|---------|----------|
+| Colors not applying | Apply theme before `CometChatUIKit.init()` |
+| Dark mode not working | Use `UIColor { traitCollection in }` for dynamic colors |
+| Inconsistent colors | Set all related colors (text, background, border) together |
+
+---
+
+## Related
+
+- [Component Styling](/ui-kit/ios/component-styling) - Style individual components
+- [Theme Introduction](/ui-kit/ios/theme-introduction) - Complete theming guide
+- [Getting Started](/ui-kit/ios/getting-started) - Initial setup
diff --git a/ui-kit/ios/component-styling.mdx b/ui-kit/ios/component-styling.mdx
index 369923b4e..f3308ea0a 100644
--- a/ui-kit/ios/component-styling.mdx
+++ b/ui-kit/ios/component-styling.mdx
@@ -1,240 +1,320 @@
---
title: "Component Styling"
+sidebarTitle: "Component Styling"
+description: "Complete guide to styling CometChat iOS UI Kit components - colors, fonts, and custom appearances"
---
## Overview
-CometChat UIKit for iOS enables developers to integrate customizable components into their applications effortlessly. Each component is designed to ensure a consistent user experience, offering flexibility to align with your app’s design system. You can modify attributes such as colors, fonts, sizes, and more using CometChatTheme or directly applying styles to components.
+Every CometChat component can be styled to match your app's design. You can apply styles globally (affects all instances) or per-instance (affects one component).
-Below is a detailed guide for styling individual components within the UIKit.
-
-## Components
+---
-### Conversations
+## Styling Methods
-The `CometChatConversations` component provides a list of recent chats, displaying participants, message previews, and timestamps. It supports default themes while offering extensive customization for text appearance, icons, and layout. This component allows you to create an intuitive and visually appealing chat list that matches your app's branding.
+### Global Styling
-You can check out the list of styling properties offered by [CometChatConversations](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Conversations/ConversationsStyle.swift)
+Apply once, affects all instances of a component:
-
-
-### Users
+### Instance Styling
-The CometChatUsers component displays a scrollable list of users, ideal for showcasing available contacts for messaging, calls, or group creation. Customization includes user avatars, status indicators, and list backgrounds, enabling alignment with your app's design system.
-
-You can check out the list of styling properties offered by [CometChatUsers](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Users/UsersStyle.swift)
+Apply to a specific component instance:
-
+---
-### Groups
+## Component Styles
-The CometChatGroups component enables displaying and interacting with chat groups. Each group item highlights key details like group name, participant count, and last active time. Developers can customize avatar styles, fonts, borders, and background colors.
+### Conversations
-You can check out the list of styling properties offered by [CometChatGroups](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Groups/GroupsStyle.swift)
+
+
+
+
+
-
+[View all UsersStyle properties →](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Users/UsersStyle.swift)
-### Message Header
+---
-The CometChatMessageHeader component displays essential information about the active chat, such as the recipient's name, avatar, and status (online/offline). It also includes navigation, search, or menu buttons. Customization options include header background, text appearance, and icon styles.
+### Groups
-You can check out the list of styling properties offered by [CometChatMessageHeader](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20Header/MessageHeaderStyle.swift)
+
+
+
-
+[View all GroupsStyle properties →](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Groups/GroupsStyle.swift)
-### Message List
+---
-The CometChatMessageList component displays a conversation's sequence of messages, supporting text, media, reactions, and more. Developers can customize bubble colors, text appearance, timestamps, and alignment to enhance the chat experience.
+### Message Header
-You can check out the list of styling properties offered by [CometChatMessageList](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20List/MessageListStyle.swift)
+
+
+
-
+[View all MessageHeaderStyle properties →](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20Header/MessageHeaderStyle.swift)
-### Message Composer
+---
-The CometChatMessageComposer component provides users with an interface to compose and send messages, including text, attachments, and stickers. Developers can style input boxes, buttons, and icons to match their app’s design.
+### Message List
-You can check out the list of styling properties offered by [CometChatMessageList](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20Composer/MessageComposerStyle.swift)
+
+
+
-
+[View all MessageListStyle properties →](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20List/MessageListStyle.swift)
-### Call Logs
+---
-The CometChatCallLogs Component provides a comprehensive list of recent voice and video calls. Each call log displays details such as the caller’s name, avatar, call type (audio/video), call status (missed, incoming, outgoing), and timestamps. This component ensures smooth integration and allows developers to customize styles, icons, and colors to align with the app’s branding.
+### Message Composer
-You can check out the list of styling properties offered by [CometChatCallLogs](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Calls/Call%20Log/Call%20Logs/CallLogStyle.swift)
+
+
+
-### AI Assistant Chat History
-
-The CometChatAIAssistantChatHistory component provides a pre-built interface to display the conversation history between a user and an AI assistant. Each message shows the sender, timestamp, and message content. This component ensures smooth integration and allows developers to customize styles, icons, and colors to align with the app’s branding.
-
@@ -242,129 +322,231 @@ The `CometChatSearch` component allows users to search through conversations and
+
+
+
+
-## Usage
+---
-### Integration
+## Minimal Render
-As CometChatConversations is a custom view controller, it can be initiated either by tapping a button or through the trigger of any event. It offers multiple parameters and methods for tailoring its user interface.
+```swift
+import CometChatUIKitSwift
-```ruby swift
-let cometChatConversations = CometChatConversations()
-self.navigationController.pushViewController(cometChatConversations, animated: true)
+let conversations = CometChatConversations()
+navigationController?.pushViewController(conversations, animated: true)
```
-* Integration (With Custom Request Builder)
+
+
+
+
+---
+
+## Filtering
+
+Use `ConversationRequest.ConversationRequestBuilder` to filter which conversations appear in the list. The builder pattern allows chaining multiple filter conditions.
-During the initialization of **CometChatConversations,** users can provide this custom request builder.
+```swift
+import CometChatUIKitSwift
+import CometChatSDK
-```ruby swift
-// You can create ConversationRequestBuilder as per your requirement
-let conversationRequestBuilder = ConversationRequest.ConversationRequestBuilder(limit: 20).set(conversationType: .both)
+// Create a custom request builder
+let requestBuilder = ConversationRequest.ConversationRequestBuilder(limit: 30)
+ .set(conversationType: .both)
-let cometChatConversations = CometChatConversations(conversationRequestBuilder: conversationRequestBuilder)
-self.navigationController.pushViewController(cometChatConversations, animated: true)
+let conversations = CometChatConversations(conversationRequestBuilder: requestBuilder)
```
-
+
-
-
+Sets custom text formatters for processing and displaying message text in conversation subtitles.
-List of properties exposed by ConversationStyle
-
-| **Property** | **Description** | **Code** |
-| ------------------------------- | ---------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
-| **Background Color** | Used to set the background color of the conversation screen. | `CometChatConversation.style.backgroundColor = UIColor.white` |
-| **Background Drawable** | Used to set a background image for the conversation screen. | `CometChatConversation.style.backgroundDrawable = UIImage(named: "background")` |
-| **Border Width** | Used to set the border width of the conversation UI. | `CometChatConversation.style.borderWidth = 2.0` |
-| **Border Color** | Used to set the border color of the conversation UI. | `CometChatConversation.style.borderColor = UIColor.gray` |
-| **Corner Radius** | Used to set the corner radius of the conversation UI. | `CometChatConversation.style.cornerRadius = 10.0` |
-| **Back Icon Tint** | Used to set the tint color of the back icon in the conversation UI. | `CometChatConversation.style.backIconTint = UIColor.blue` |
-| **Back Icon** | Used to set a custom back icon for the conversation UI. | `CometChatConversation.style.backIcon = UIImage(named: "customBackIcon")` |
-| **Separator Color** | Used to set the color of separators in the conversation list. | `CometChatConversation.style.separatorColor = UIColor.lightGray` |
-| **Separator Width** | Used to set the width of separators in the conversation list. | `CometChatConversation.style.separatorWidth = 1.0` |
-| **Error Text Color** | Used to set the color of error messages in the conversation UI. | `CometChatConversation.style.errorTextColor = UIColor.red` |
-| **Last Message Text Color** | Used to set the color of the last message text in the conversation list. | `CometChatConversation.style.lastMessageTextColor = UIColor.darkGray` |
-| **Typing Indicator Color** | Used to set the color of the typing indicator in the conversation UI. | `CometChatConversation.style.typingIndicatorColor = UIColor.green` |
-| **Title Appearance** | Used to customize the appearance of the conversation screen's title. | `CometChatConversation.style.titleAppearance = UIFont.boldSystemFont(ofSize: 18.0)` |
-| **Last Message Appearance** | Used to customize the appearance of the last message text in the list. | `CometChatConversation.style.lastMessageAppearance = UIFont.italicSystemFont(ofSize: 14.0)` |
-| **Thread Indicator Appearance** | Used to customize the appearance of thread indicators in the list. | `CometChatConversation.style.threadIndicatorTextAppearance = UIFont.systemFont(ofSize: 12.0)` |
-| **Avatar Style** | Used to customize the appearance of avatars in the conversation list. | `CometChatConversation.style.avatarStyle = customAvatarStyle` |
-| **Status Indicator Style** | Used to customize the style of status indicators for online/offline members. | `CometChatConversation.style.statusIndicatorStyle = customStatusIndicatorStyle` |
-| **Date Style** | Used to customize the appearance of date labels in the conversation list. | `CometChatConversation.style.dateStyle = customDateStyle` |
-| **Badge Style** | Used to customize the appearance of badges in the conversation list. | `CometChatConversation.style.badgeStyle = customBadgeStyle` |
-| **List Item Style** | Used to customize the appearance of the list items in the conversation list. | `CometChatConversation.style.listItemStyle = customListItemStyle` |
-
-##### 2. Avatar Style
-
-To apply customized styles to the `Avatar` component in the `Conversations` Component, you can use the following code snippet. For more information, visit [Avatar Styles](/ui-kit/ios/component-styling#avatar).
-
-**Global level styling**
-
-
-
+All props are optional. Sorted alphabetically.
-##### 3. StatusIndicator Style
+### avatarStyle
-To apply customized styles to the Status Indicator component in the `Conversations` Component, you can use the following code snippet. For more information, visit [Indicator Styles](/ui-kit/ios/status-indicator).
+Customizes the appearance of avatars in conversation list items.
-**Global level styling**
+| | |
+|---|---|
+| Type | `AvatarStyle` |
+| Default | `AvatarStyle()` |
-
-
+| | |
+|---|---|
+| Type | `BadgeStyle` |
+| Default | `BadgeStyle()` |
-##### 4. Badge Style
+```swift
+import CometChatUIKitSwift
-To apply customized styles to the `Badge` component in the `Conversations` Component, you can use the following code snippet. For more information, visit [Badge Styles](https://www.cometchat.com/docs/ui-kit/ios/component-styling#badge)
+let conversations = CometChatConversations()
-**Global level styling**
+let badgeStyle = BadgeStyle()
+badgeStyle.backgroundColor = UIColor.systemRed
+badgeStyle.textColor = UIColor.white
+badgeStyle.textFont = UIFont.systemFont(ofSize: 12, weight: .bold)
+badgeStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 10)
-
-
+```swift
+import CometChatUIKitSwift
+
+let conversations = CometChatConversations()
-### Functionality
+let dateStyle = DateStyle()
+dateStyle.textColor = UIColor.secondaryLabel
+dateStyle.textFont = UIFont.systemFont(ofSize: 12)
-These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements.
+conversations.set(dateStyle: dateStyle)
+```
-Below is a list of customizations along with corresponding code snippets
+### dateTimeFormatter
-| Property | Description | Code |
-| ---------------------------- | ------------------------------------------ | ------------------------------------- |
-| hideErrorView | Hides the error state view. | `hideErrorView = true` |
-| hideNavigationBar | Hides or shows the navigation bar. | `hideNavigationBar = true` |
-| hideSearch | Hides the search bar. | `hideSearch = true` |
-| hideBackButton | Hides the back button. | `hideBackButton = true` |
-| hideLoadingState | Hides the loading state indicator. | `hideLoadingState = true` |
-| hideReceipts | Hides message read/delivery receipts. | `hideReceipts = true` |
-| hideDeleteConversationOption | Hides the option to delete a conversation. | `hideDeleteConversationOption = true` |
-| hideUserStatus | Hides the online/offline status of users. | `hideUserStatus = true` |
-| hideGroupType | Hides the group type (private/public). | `hideGroupType = true` |
+Custom formatter for date/time display in conversation list items.
-### Advanced
+| | |
+|---|---|
+| Type | `CometChatDateTimeFormatter?` |
+| Default | `nil` |
-For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component.
+```swift
+import CometChatUIKitSwift
-***
+let conversations = CometChatConversations()
-#### Date Time Formatter
+let dateTimeFormatter = CometChatDateTimeFormatter()
+dateTimeFormatter.todayFormat = "h:mm a"
+dateTimeFormatter.yesterdayFormat = "'Yesterday'"
+dateTimeFormatter.otherFormat = "MMM d"
-The **CometChatConversations** component supports full customization of how date and time are displayed using the [CometChatDateTimeFormatter](/ui-kit/ios/localize#datetimeformatter).
+conversations.dateTimeFormatter = dateTimeFormatter
+```
-This enables developers to localize, format, or personalize the date and time strings shown next to each conversation—such as “Today”, “Yesterday”, “12:45 PM”, etc.
+### customSoundForMessages
-1. Component-Level (Global)
+Custom sound URL for new message notifications.
-
-
+### hideUserStatus
+
+Hides online/offline status indicators.
-***
+| | |
+|---|---|
+| Type | `Bool` |
+| Default | `false` |
-#### SetOptions
+### onSearchClick
-You can define custom options for each conversation using .set(options:). This method allows you to return an array of CometChatConversationOption based on the conversation object.
+Callback triggered when the search button is clicked.
+
+| | |
+|---|---|
+| Type | `(() -> Void)?` |
+| Default | `nil` |
-
-
+### statusIndicatorStyle
-You can create a `CustomListItemView` as a custom `UIView`. Which we will inflate in `setListItemView()`
+Customizes the appearance of online/offline status indicators.
-```swift swift
+| | |
+|---|---|
+| Type | `StatusIndicatorStyle` |
+| Default | `StatusIndicatorStyle()` |
-import UIKit
+```swift
import CometChatUIKitSwift
-class CustomListItem: UIView {
- // Initialize UI components
- private var profileImageView: CometChatAvatar = {
- let imageView = CometChatAvatar(image: UIImage())
- imageView.translatesAutoresizingMaskIntoConstraints = false // Important for manual layout
- return imageView
- }()
+let conversations = CometChatConversations()
- private var nameLabel: UILabel = {
- let label = UILabel()
- label.translatesAutoresizingMaskIntoConstraints = false // Important for manual layout
- return label
- }()
+let statusIndicatorStyle = StatusIndicatorStyle()
+statusIndicatorStyle.backgroundColor = UIColor.systemGreen
+statusIndicatorStyle.borderWidth = 2
+statusIndicatorStyle.borderColor = UIColor.white
- override init(frame: CGRect) {
- super.init(frame: frame)
- setupUI()
- }
+conversations.set(statusIndicatorStyle: statusIndicatorStyle)
+```
- required init?(coder aDecoder: NSCoder) {
- fatalError("init(coder:) has not been implemented")
- }
+### textFormatters
- private func setupUI() {
- addSubview(profileImageView)
- addSubview(nameLabel)
-
- NSLayoutConstraint.activate([
- // Profile image constraints
- profileImageView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 8),
- profileImageView.centerYAnchor.constraint(equalTo: centerYAnchor),
- profileImageView.widthAnchor.constraint(equalToConstant: 40),
- profileImageView.heightAnchor.constraint(equalToConstant: 40),
-
- nameLabel.leadingAnchor.constraint(equalTo: profileImageView.trailingAnchor, constant: 8),
- nameLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -8),
- nameLabel.centerYAnchor.constraint(equalTo: centerYAnchor)
- ])
- }
+Array of text formatters for customizing message text display.
- func set(conversation: Conversation) {
- var avatarURL: String?
- if let group = conversation.conversationWith as? Group {
- nameLabel.text = group.name
- avatarURL = group.icon
- }
+| | |
+|---|---|
+| Type | `[CometChatTextFormatter]` |
+| Default | `[]` |
- if let user = conversation.conversationWith as? User {
- nameLabel.text = user.name
- avatarURL = user.avatar
- }
+### typingIndicatorStyle
+Customizes the appearance of typing indicators in conversation list items.
+| | |
+|---|---|
+| Type | `TypingIndicatorStyle` |
+| Default | `TypingIndicatorStyle()` |
+```swift
+import CometChatUIKitSwift
- self.profileImageView.setAvatar(avatarUrl: avatarURL, with: nameLabel.text)
- }
-}
-```
+let conversations = CometChatConversations()
-***
+let typingIndicatorStyle = TypingIndicatorStyle()
+typingIndicatorStyle.textColor = UIColor.systemGray
+typingIndicatorStyle.textFont = UIFont.italicSystemFont(ofSize: 14)
-#### SetLeadingView
+conversations.set(typingIndicatorStyle: typingIndicatorStyle)
+```
-You can modify the leading view of a conversation cell using .set(leadingView:).
+---
-
-
+Customize how timestamps appear in the conversation list using the `datePattern` callback.
-You can create a `CustomLeadingView` as a custom `UIView`. Which we will inflate in `setLeadingView()`
+### Global Level Formatting
-
-
+```swift
+import CometChatUIKitSwift
-You can create a `CustomTitleView` as a custom `UIView`. Which we will inflate in `setTitleView()`
+let conversations = CometChatConversations()
-
-
+let conversations = CometChatConversations()
-You can create a `CustomTrailView` as a custom `UIView`. Which we will inflate in `setTrailView()`
+// Set a custom label for @all mentions
+conversations.setMentionAllLabel("all", "Everyone")
+```
-
-
-
-You need to create a `SubtitleView` a custom `UIView` `cocoa touch file` and inflate it in the setSubtitleView apply function. Then, you can define individual actions depending on your requirements.
-
-* `SubtitleView` file should should appear as follows:
-
-```swift swift
import UIKit
import CometChatUIKitSwift
import CometChatSDK
-class CustomSubtitleView: UIView {
-
- // MARK: - Properties
- private let subtitleLabel: UILabel = {
- let label = UILabel()
- label.translatesAutoresizingMaskIntoConstraints = false
- label.font = UIFont.systemFont(ofSize: 14, weight: .regular) // Customize font
- label.textColor = .darkGray // Customize text color
- label.numberOfLines = 1 // Single line
- label.textAlignment = .left // Align to the left
- return label
- }()
-
- // MARK: - Initializers
- override init(frame: CGRect) {
- super.init(frame: frame)
- setupView()
- }
+class MainTabBarController: UITabBarController {
- required init?(coder: NSCoder) {
- super.init(coder: coder)
- setupView()
+ override func viewDidLoad() {
+ super.viewDidLoad()
+ setupTabs()
}
- // MARK: - Setup
- private func setupView() {
- addSubview(subtitleLabel)
+ private func setupTabs() {
+ // Conversations Tab
+ let conversationsVC = ConversationsContainerViewController()
+ conversationsVC.tabBarItem = UITabBarItem(
+ title: "Chats",
+ image: UIImage(systemName: "message"),
+ selectedImage: UIImage(systemName: "message.fill")
+ )
+
+ // Users Tab
+ let usersVC = UINavigationController(rootViewController: CometChatUsers())
+ usersVC.tabBarItem = UITabBarItem(
+ title: "Users",
+ image: UIImage(systemName: "person.2"),
+ selectedImage: UIImage(systemName: "person.2.fill")
+ )
- // Constraints
- NSLayoutConstraint.activate([
- subtitleLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 8),
- subtitleLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -8),
- subtitleLabel.topAnchor.constraint(equalTo: topAnchor, constant: 4),
- subtitleLabel.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -4)
- ])
+ // Groups Tab
+ let groupsVC = UINavigationController(rootViewController: CometChatGroups())
+ groupsVC.tabBarItem = UITabBarItem(
+ title: "Groups",
+ image: UIImage(systemName: "person.3"),
+ selectedImage: UIImage(systemName: "person.3.fill")
+ )
+
+ viewControllers = [conversationsVC, usersVC, groupsVC]
}
+}
+
+class ConversationsContainerViewController: UINavigationController {
- // MARK: - Configuration
- func set(conversation: Conversation) {
- subtitleLabel.text = conversation.lastMessage
+ override func viewDidLoad() {
+ super.viewDidLoad()
+
+ let conversations = CometChatConversations()
+
+ // Navigate to messages on tap
+ conversations.set(onItemClick: { [weak self] conversation, _ in
+ let messagesVC = CometChatMessages()
+
+ if let user = conversation.conversationWith as? User {
+ messagesVC.set(user: user)
+ } else if let group = conversation.conversationWith as? Group {
+ messagesVC.set(group: group)
+ }
+
+ self?.pushViewController(messagesVC, animated: true)
+ })
+
+ setViewControllers([conversations], animated: false)
}
}
```
-***
-
-#### SetLoadingView
-
-You can set a custom loading view using .set(loadingView:). This method accepts a UIView to display while data is being fetched.
-
-
-| Components | Functionality |
-| ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [MessageComposer](/ui-kit/ios/message-composer) | [MessageComposer](/ui-kit/ios/message-composer) is a Component that has ActionSheet, ActionSheet is a menu that appears over the context of the app, providing multiple options for sharing media files. |
-| [MessageList](/ui-kit/ios/message-list) | [MessageList](/ui-kit/ios/message-list) is a Component that renders different Media Message bubbles like [Image Bubble](/ui-kit/ios/message-bubble-styling-styling#image-bubble), [File Bubble](/ui-kit/ios/message-bubble-styling-styling), [Audio Bubble](/ui-kit/ios/message-bubble-styling-styling#audio-bubble) [Video Bubble](/ui-kit/ios/message-bubble-styling#video-bubble) |
+```swift
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class ChatViewController: UIViewController {
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+
+ // For one-on-one chat
+ let messagesVC = CometChatMessages()
+
+ // Set the user to chat with
+ CometChat.getUser(UID: "user-123") { user in
+ DispatchQueue.main.async {
+ messagesVC.set(user: user)
+ self.navigationController?.pushViewController(messagesVC, animated: true)
+ }
+ } onError: { error in
+ print("Error: \(error?.errorDescription ?? "")")
+ }
+ }
+}
+```
+
+**Components Used:**
+- [MessageComposer](/ui-kit/ios/message-composer) - Text input and send button
+- [MessageList](/ui-kit/ios/message-list) - Displays sent and received messages
+- [Messages](/ui-kit/ios/message-header) - Complete messaging screen (includes both)
-> [Messages](/ui-kit/ios/message-header) component in CometChat's UI Kit is a comprehensive component that includes both the [MessageComposer](/ui-kit/ios/message-composer) and the [MessageList](/ui-kit/ios/message-list) components. So, if you're looking to implement a messaging feature in your application, using the Messages component would be a straightforward and efficient way to do it.
+## Media Sharing
+
+Share images, videos, audio files, and documents.
+
+```swift
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class MediaChatViewController: UIViewController {
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+
+ let messagesVC = CometChatMessages()
+
+ // The message composer automatically includes media sharing options
+ // Users can tap the attachment button to share:
+ // - Photos from library
+ // - Camera capture
+ // - Documents
+ // - Audio files
+
+ CometChat.getUser(UID: "user-123") { user in
+ DispatchQueue.main.async {
+ messagesVC.set(user: user)
+ self.navigationController?.pushViewController(messagesVC, animated: true)
+ }
+ } onError: { error in
+ print("Error: \(error?.errorDescription ?? "")")
+ }
+ }
+
+ // Send media programmatically
+ func sendImage(to receiverUID: String, imageURL: URL) {
+ let mediaMessage = MediaMessage(
+ receiverUid: receiverUID,
+ fileurl: imageURL.absoluteString,
+ messageType: .image,
+ receiverType: .user
+ )
+
+ CometChat.sendMediaMessage(message: mediaMessage) { message in
+ print("Image sent successfully")
+ } onError: { error in
+ print("Error sending image: \(error?.errorDescription ?? "")")
+ }
+ }
+}
+```
+
+**Supported Media Types:**
+| Type | Bubble Component |
+|------|------------------|
+| Images | [Image Bubble](/ui-kit/ios/message-bubble-styling#image-bubble) |
+| Videos | [Video Bubble](/ui-kit/ios/message-bubble-styling#video-bubble) |
+| Audio | [Audio Bubble](/ui-kit/ios/message-bubble-styling#audio-bubble) |
+| Files | [File Bubble](/ui-kit/ios/message-bubble-styling#file-bubble) |
## Read Receipts
-CometChat's Read Receipts feature provides visibility into the message status, letting users know when a message has been delivered and read. This brings clarity to the communication and ensures users are informed about the status of their messages.
+Show when messages are delivered and read.
-| Components | Functionality |
-| ---------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Conversations](/ui-kit/ios/conversations) | [Conversations](/ui-kit/ios/conversations) is a Component that renders Conversations item List, Conversation item also displays the delivery status of the last message providing users with real-time updates on the status of their messages. |
-| [MessageList](/ui-kit/ios/message-list) | [MessageList](/ui-kit/ios/message-list) is a Component that renders different types of Message bubbles, Read Recept status is an integral part of all message bubbles, no matter the type, and provides real-time updates about the status of the message. |
-| [MessageInformation](/ui-kit/ios/message-information) | [MessageInformation](/ui-kit/ios/message-information) component provides transparency into the status of each sent message, giving the sender insights into whether their message has been delivered and read. |
-
+```swift
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class ReceiptsViewController: UIViewController {
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+
+ // Read receipts are enabled by default
+ let messagesVC = CometChatMessages()
+
+ // To hide receipts:
+ // messagesVC.hideReceipts = true
+
+ CometChat.getUser(UID: "user-123") { user in
+ DispatchQueue.main.async {
+ messagesVC.set(user: user)
+ self.navigationController?.pushViewController(messagesVC, animated: true)
+ }
+ } onError: { error in
+ print("Error: \(error?.errorDescription ?? "")")
+ }
+ }
+
+ // View detailed message information
+ func showMessageInfo(for message: BaseMessage) {
+ let messageInfo = CometChatMessageInformation()
+ messageInfo.set(message: message)
+ navigationController?.pushViewController(messageInfo, animated: true)
+ }
+}
+```
+
+**Receipt States:**
+- ✓ Sent - Message sent to server
+- ✓✓ Delivered - Message delivered to recipient's device
+- ✓✓ (blue) Read - Recipient has seen the message
+
+**Components Used:**
+- [Conversations](/ui-kit/ios/conversations) - Shows receipt status on last message
+- [MessageList](/ui-kit/ios/message-list) - Shows receipts on each message
+- [MessageInformation](/ui-kit/ios/message-information) - Detailed delivery/read info
## Mark As Unread
-Mark as Unread feature allows users to manually mark messages as unread, helping them keep track of important conversations they want to revisit later. When enabled, the message list can automatically start from the first unread message, making it easier to pick up where you left off.
+Let users mark messages as unread to revisit later.
-| Components | Functionality |
-| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Message List](/ui-kit/ios/message-list) | [Message List](/ui-kit/ios/message-list#functionality) provides the "Mark as unread" option in message actions and supports starting from the first unread message when enabled. |
-| [Conversations](/ui-kit/ios/conversations) | [Conversations](/ui-kit/ios/conversations#functionality) component listens to conversation updates and reflects the updated unread count in real-time. |
-
-## Typing Indicator
-
-The Typing Indicator feature in CometChat shows when a user is typing a response in real-time, fostering a more interactive and engaging chat environment. This feature enhances the real-time communication experience, making conversations feel more natural and fluid.
+```swift
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class UnreadMessagesViewController: UIViewController {
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+
+ let messagesVC = CometChatMessages()
+
+ // Enable starting from first unread message
+ messagesVC.scrollToUnreadMessages = true
+
+ CometChat.getUser(UID: "user-123") { user in
+ DispatchQueue.main.async {
+ messagesVC.set(user: user)
+ self.navigationController?.pushViewController(messagesVC, animated: true)
+ }
+ } onError: { error in
+ print("Error: \(error?.errorDescription ?? "")")
+ }
+ }
+
+ // Mark a message as unread programmatically
+ func markAsUnread(message: BaseMessage) {
+ CometChat.markAsUnread(
+ baseMessage: message
+ ) { _ in
+ print("Marked as unread")
+ } onError: { error in
+ print("Error: \(error?.errorDescription ?? "")")
+ }
+ }
+}
+```
+
+## Typing Indicators
+
+Show when users are typing in real-time.
-| Components | Functionality |
-| ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Conversations](/ui-kit/ios/conversations) | [Conversations](/ui-kit/ios/conversations) is a Component that renders Conversations item List, Conversations item also shows real-time typing status indicators. This means that if a user in a one-on-one chat or a participant in a group chat is currently typing a message |
-| [Message Header](/ui-kit/ios/message-header) | [Message Header](/ui-kit/ios/message-header) that renders details of User or Groups in ToolBar. The MessageHeader also handles the Typing Indicator functionality. When a user or a member in a group is typing, the MessageHeader dynamically updates to display a 'typing...' status in real-time. |
+```swift
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class TypingIndicatorViewController: UIViewController {
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+
+ // Typing indicators are enabled by default in:
+ // - CometChatConversations (shows "typing..." in conversation list)
+ // - CometChatMessageHeader (shows "typing..." below user name)
+
+ let messagesVC = CometChatMessages()
+
+ CometChat.getUser(UID: "user-123") { user in
+ DispatchQueue.main.async {
+ messagesVC.set(user: user)
+ self.navigationController?.pushViewController(messagesVC, animated: true)
+ }
+ } onError: { error in
+ print("Error: \(error?.errorDescription ?? "")")
+ }
+ }
+
+ // Send typing indicator manually
+ func startTyping(to receiverUID: String) {
+ let typingIndicator = TypingIndicator(
+ receiverID: receiverUID,
+ receiverType: .user
+ )
+ CometChat.startTyping(indicator: typingIndicator)
+ }
+
+ func stopTyping(to receiverUID: String) {
+ let typingIndicator = TypingIndicator(
+ receiverID: receiverUID,
+ receiverType: .user
+ )
+ CometChat.endTyping(indicator: typingIndicator)
+ }
+}
+```
+
+**Components Used:**
+- [Conversations](/ui-kit/ios/conversations) - Shows typing in conversation list
+- [MessageHeader](/ui-kit/ios/message-header) - Shows typing below user/group name
## User Presence
-CometChat's User Presence feature allows users to see whether their contacts are online, offline. This helps users know the best time to initiate a conversation and sets expectations about response times.
+Display online/offline status for users.
-| Components | Functionality |
-| ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Conversations](/ui-kit/ios/conversations) | [Conversations](/ui-kit/ios/conversations) is a Component that renders Conversations item List, Conversations item also shows user presence information. |
-| [Message Header](/ui-kit/ios/message-header) | [Message Header](/ui-kit/ios/message-header) that renders details of User or Groups in ToolBar. The MessageHeader also handles user Presence information. |
-| [Users](/ui-kit/ios/users) | [Users](/ui-kit/ios/users) renders list of users available in your app.It also responsible to render users Presence information. |
-| [Group Members](/ui-kit/ios/group-members) | [Group Members](/ui-kit/ios/group-members) renders list of users available in the group. The Group Members component also handles user Presence information. |
+```swift
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class PresenceViewController: UIViewController {
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+
+ // User presence is shown automatically in:
+ // - CometChatConversations (green dot for online users)
+ // - CometChatMessageHeader (shows "Online" or "Last seen")
+ // - CometChatUsers (green dot for online users)
+ // - CometChatGroupMembers (green dot for online members)
+
+ let conversations = CometChatConversations()
+
+ // To hide user status:
+ // conversations.hideUserStatus = true
+
+ navigationController?.pushViewController(conversations, animated: true)
+ }
+
+ // Listen for presence changes
+ func listenForPresenceChanges() {
+ CometChat.addUserListener("presence-listener", self)
+ }
+}
+
+extension PresenceViewController: CometChatUserDelegate {
+ func onUserOnline(user: User) {
+ print("\(user.name ?? "") is now online")
+ }
+
+ func onUserOffline(user: User) {
+ print("\(user.name ?? "") went offline")
+ }
+}
+```
## Reactions
-CometChat's Reactions feature adds a layer of expressiveness to your chat application by allowing users to react to messages. With Reactions, users can convey a range of emotions or express their thoughts on a particular message without typing out a full response, enhancing their user experience and fostering greater engagement.
-
-The number of reactions displayed depends on the width of the view. For instance, if a message contains 5 reactions but the width of the CometChatReactions view can only accommodate 4 reactions at a time, the first three reactions will be shown along with an additional UI element at the end of the row. This element indicates the number of other unique reactions that are not immediately visible, informing users of the total count of different reactions.
-
-In the example, tapping on this element (depicted as "+2" in the provided image) will by default trigger the CometChatReactionList component. This action opens a modal sheet from the bottom of the screen, displaying all reactions received by the message.
+Let users react to messages with emojis.
-| Components | Functionality |
-| -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [MessageList](/ui-kit/ios/message-list) | [MessageList](/ui-kit/ios/message-list) is a Component that renders different types of Message bubbles, Irrespective of the type of message bubble, Reactions are an integral part and offer a more engaging, expressive way for users to respond to messages. |
-| [Messages](/ui-kit/ios/message-header) | [Messages](/ui-kit/ios/message-header) component in CometChat's UI Kit is a comprehensive component that includes both the [MessageComposer](/ui-kit/ios/message-composer) and the [MessageList](/ui-kit/ios/message-list) components. So, if you're looking to implement a messaging feature in your application, using the Messages component would be a straightforward and efficient way to do it. |
+```swift
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class ReactionsViewController: UIViewController {
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+
+ // Reactions are enabled by default
+ // Users can long-press a message to add reactions
+
+ let messagesVC = CometChatMessages()
+
+ CometChat.getUser(UID: "user-123") { user in
+ DispatchQueue.main.async {
+ messagesVC.set(user: user)
+ self.navigationController?.pushViewController(messagesVC, animated: true)
+ }
+ } onError: { error in
+ print("Error: \(error?.errorDescription ?? "")")
+ }
+ }
+
+ // Add reaction programmatically
+ func addReaction(to message: BaseMessage, emoji: String) {
+ CometChat.addReaction(
+ messageId: message.id,
+ reaction: emoji
+ ) { message in
+ print("Reaction added")
+ } onError: { error in
+ print("Error: \(error?.errorDescription ?? "")")
+ }
+ }
+
+ // Remove reaction
+ func removeReaction(from message: BaseMessage, emoji: String) {
+ CometChat.removeReaction(
+ messageId: message.id,
+ reaction: emoji
+ ) { message in
+ print("Reaction removed")
+ } onError: { error in
+ print("Error: \(error?.errorDescription ?? "")")
+ }
+ }
+}
+```
## Mentions
-Mentions is a robust feature provided by CometChat that enhances the interactivity and clarity of group or 1-1 chats by allowing users to directly address or refer to specific individuals in a conversation.
+Tag users in messages with @mentions.
-| Components | Functionality |
-| ---------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Conversations](/ui-kit/ios/conversations) | [Conversations](/ui-kit/ios/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/ios/message-composer) | [MessageComposer](/ui-kit/ios/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/ios/message-list) | [MessageList](/ui-kit/ios/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. |
-| [Messages](/ui-kit/ios/message-header) | [Messages](/ui-kit/ios/message-header) The component is a comprehensive element in CometChat's UI Kit, encapsulating both the [MessageComposer](/ui-kit/ios/message-composer) and [MessageList](/ui-kit/ios/message-list) components. It fully supports the Mentions feature, providing a streamlined way to implement an interactive and engaging messaging function in your application. |
+```swift
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class MentionsViewController: UIViewController {
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+
+ // Mentions are enabled by default
+ // Type @ in the composer to see mention suggestions
+
+ let messagesVC = CometChatMessages()
+
+ CometChat.getGroup(GUID: "group-123") { group in
+ DispatchQueue.main.async {
+ messagesVC.set(group: group)
+ self.navigationController?.pushViewController(messagesVC, animated: true)
+ }
+ } onError: { error in
+ print("Error: \(error?.errorDescription ?? "")")
+ }
+ }
+
+ // Send message with mention programmatically
+ func sendMessageWithMention(to groupID: String, mentionedUser: User) {
+ let textMessage = TextMessage(
+ receiverUid: groupID,
+ text: "Hey @\(mentionedUser.name ?? ""), check this out!",
+ receiverType: .group
+ )
+
+ // Add mentioned users
+ textMessage.mentionedUsers = [mentionedUser]
+
+ CometChat.sendTextMessage(message: textMessage) { message in
+ print("Message with mention sent")
+ } onError: { error in
+ print("Error: \(error?.errorDescription ?? "")")
+ }
+ }
+}
+```
## 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.
+Reply to specific messages in threads.
-| Components | Functionality |
-| ------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
-| [Threaded Messages](/ui-kit/ios/threaded-messages-header) | [Threaded Messages](/ui-kit/ios/threaded-messages-header) that displays all replies made to a particular message in a conversation. |
+```swift
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class ThreadedMessagesViewController: UIViewController {
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+
+ // Threaded messages are enabled by default
+ // Users can tap "Reply in thread" on any message
+
+ let messagesVC = CometChatMessages()
+
+ CometChat.getUser(UID: "user-123") { user in
+ DispatchQueue.main.async {
+ messagesVC.set(user: user)
+ self.navigationController?.pushViewController(messagesVC, animated: true)
+ }
+ } onError: { error in
+ print("Error: \(error?.errorDescription ?? "")")
+ }
+ }
+
+ // Open thread view for a message
+ func openThread(for parentMessage: BaseMessage, user: User) {
+ let threadedMessages = CometChatThreadedMessages()
+ threadedMessages.set(parentMessage: parentMessage)
+ threadedMessages.set(user: user)
+ navigationController?.pushViewController(threadedMessages, animated: true)
+ }
+
+ // Send reply in thread programmatically
+ func sendThreadReply(parentMessage: BaseMessage, text: String) {
+ let reply = TextMessage(
+ receiverUid: parentMessage.receiverUid,
+ text: text,
+ receiverType: parentMessage.receiverType
+ )
+ reply.parentMessageId = parentMessage.id
+
+ CometChat.sendTextMessage(message: reply) { message in
+ print("Thread reply sent")
+ } onError: { error in
+ print("Error: \(error?.errorDescription ?? "")")
+ }
+ }
+}
+```
+
+**Component Used:**
+- [ThreadedMessages](/ui-kit/ios/threaded-messages-header) - Displays thread replies
## Group Chat
-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.
+Create and manage group conversations.
-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/ios/groups).
-
+```swift
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class GroupChatViewController: UIViewController {
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+ showGroupsList()
+ }
+
+ // Show all groups
+ func showGroupsList() {
+ let groups = CometChatGroups()
+
+ groups.set(onItemClick: { [weak self] group, _ in
+ self?.openGroupChat(group: group)
+ })
+
+ navigationController?.pushViewController(groups, animated: true)
+ }
+
+ // Open chat for a group
+ func openGroupChat(group: Group) {
+ let messagesVC = CometChatMessages()
+ messagesVC.set(group: group)
+ navigationController?.pushViewController(messagesVC, animated: true)
+ }
+
+ // Create a new group
+ func createGroup(name: String, type: CometChat.groupType) {
+ let group = Group(
+ guid: UUID().uuidString,
+ name: name,
+ groupType: type,
+ password: nil
+ )
+
+ CometChat.createGroup(group: group) { createdGroup in
+ print("Group created: \(createdGroup.name ?? "")")
+ DispatchQueue.main.async {
+ self.openGroupChat(group: createdGroup)
+ }
+ } onError: { error in
+ print("Error: \(error?.errorDescription ?? "")")
+ }
+ }
+
+ // Join a public group
+ func joinGroup(guid: String) {
+ CometChat.joinGroup(
+ GUID: guid,
+ groupType: .public,
+ password: nil
+ ) { group in
+ print("Joined group: \(group.name ?? "")")
+ DispatchQueue.main.async {
+ self.openGroupChat(group: group)
+ }
+ } onError: { error in
+ print("Error: \(error?.errorDescription ?? "")")
+ }
+ }
+}
+```
+
+**Related Guide:** [Groups](/ui-kit/ios/groups)
## 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.
+Reply to specific messages with context.
-| Components | Functionality |
-| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [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
-
-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.
+```swift
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class QuotedReplyViewController: UIViewController {
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+
+ // Quoted reply is enabled by default
+ // Users can swipe right on a message or tap "Reply" in message actions
+
+ let messagesVC = CometChatMessages()
+
+ CometChat.getUser(UID: "user-123") { user in
+ DispatchQueue.main.async {
+ messagesVC.set(user: user)
+ self.navigationController?.pushViewController(messagesVC, animated: true)
+ }
+ } onError: { error in
+ print("Error: \(error?.errorDescription ?? "")")
+ }
+ }
+}
+```
+
+## Search
+
+Search across conversations and messages.
-| Components | Functionality |
-| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Search](/ui-kit/ios/search) | [Search](/ui-kit/ios/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/ios/message-header) | [Message Header](/ui-kit/ios/message-header) shows the search button in the chat header, allowing users to search within a conversation. |
-| [Message List](/ui-kit/ios/message-list) | [Message List](/ui-kit/ios/message-list) shows the selected message when clicked from search results and highlights it in the message list. |
-| [Conversations](/ui-kit/ios/conversations) | [Conversations](/ui-kit/ios/conversations) displays the search input. |
-
+```swift
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class SearchViewController: UIViewController {
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+
+ // Search is available in:
+ // - CometChatConversations (search bar at top)
+ // - CometChatMessageHeader (search button)
+
+ let conversations = CometChatConversations()
+
+ // Search is enabled by default
+ // To hide search:
+ // conversations.hideSearch = true
+
+ navigationController?.pushViewController(conversations, animated: true)
+ }
+
+ // Open dedicated search screen
+ func openSearch() {
+ let search = CometChatSearch()
+ navigationController?.pushViewController(search, animated: true)
+ }
+}
+```
+
+**Components Used:**
+- [Search](/ui-kit/ios/search) - Dedicated search screen
+- [MessageHeader](/ui-kit/ios/message-header) - Search within conversation
+- [Conversations](/ui-kit/ios/conversations) - Search conversations
## Moderation
-CometChat's Message Moderation feature helps maintain a safe and respectful chat environment by automatically filtering and managing inappropriate content. Messages can be automatically blocked or flagged based on predefined rules, ensuring harmful content is handled before it reaches users.
+Automatically filter inappropriate content.
+```swift
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class ModerationViewController: UIViewController {
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+
+ // Moderation is handled automatically based on your
+ // CometChat dashboard settings
+
+ // Blocked messages are displayed appropriately
+ // based on your moderation rules
+
+ let messagesVC = CometChatMessages()
+
+ CometChat.getUser(UID: "user-123") { user in
+ DispatchQueue.main.async {
+ messagesVC.set(user: user)
+ self.navigationController?.pushViewController(messagesVC, animated: true)
+ }
+ } onError: { error in
+ print("Error: \(error?.errorDescription ?? "")")
+ }
+ }
+}
+```
+
-| Components | Functionality |
-| ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [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. |
+```swift
+import UIKit
+import CometChatUIKitSwift
+import CometChatSDK
+
+class ReportMessageViewController: UIViewController {
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+
+ // Report message is available in message actions
+ // Users can long-press a message and select "Report"
+
+ let messagesVC = CometChatMessages()
+
+ CometChat.getUser(UID: "user-123") { user in
+ DispatchQueue.main.async {
+ messagesVC.set(user: user)
+ self.navigationController?.pushViewController(messagesVC, animated: true)
+ }
+ } onError: { error in
+ print("Error: \(error?.errorDescription ?? "")")
+ }
+ }
+}
+```
+
+
-### Polls
+| Feature | Details |
+|---------|---------|
+| Appears in | [Message Composer](/ui-kit/ios/message-composer) attachment menu |
+| Setup guide | [Sticker Extension](/fundamentals/stickers) |
+| Code required | None - automatic after dashboard activation |
-The Polls extension enhances group discussions by allowing users to create polls. Users can ask questions with a predefined list of answers, enabling a quick, organized way to gather group opinions. For a comprehensive understanding and guide on implementing and using the Polls Extension, refer to our specific guide on the [Polls Extension](/fundamentals/polls).
+### Polls
-Once you have successfully activated the [Polls Extension](/fundamentals/polls) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/ios/message-composer) component of UI Kits.
+Create polls to gather opinions in group chats quickly.
-### Collaborative Whiteboard
+| Feature | Details |
+|---------|---------|
+| Appears in | [Message Composer](/ui-kit/ios/message-composer) action sheet |
+| Setup guide | [Polls Extension](/fundamentals/polls) |
+| Code required | None - automatic after dashboard activation |
-The Collaborative Whiteboard extension facilitates real-time collaboration. Users can draw, brainstorm, and share ideas on a shared digital whiteboard. For a comprehensive understanding and guide on implementing and using the Collaborative Whiteboard Extension, refer to our specific guide on the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard).
+### Collaborative Whiteboard
-Once you have successfully activated the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/ios/message-composer) component of UI Kits.
+Real-time whiteboard for drawing, brainstorming, and sharing ideas together.
-### Collaborative Document
+| Feature | Details |
+|---------|---------|
+| Appears in | [Message Composer](/ui-kit/ios/message-composer) action sheet |
+| Setup guide | [Collaborative Whiteboard](/fundamentals/collaborative-whiteboard) |
+| Code required | None - automatic after dashboard activation |
-With the Collaborative Document extension, users can work together on a shared document. This feature is essential for remote teams where document collaboration is a recurring requirement. For a comprehensive understanding and guide on implementing and using the Collaborative Document Extension, refer to our specific guide on the [Collaborative Document Extension](/fundamentals/collaborative-document).
+### Collaborative Document
-Once you have successfully activated the [Collaborative Document Extension](/fundamentals/collaborative-document) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/ios/message-composer) component of UI Kits.
+Work together on shared documents in real-time with other users.
-### Message Reactions
+| Feature | Details |
+|---------|---------|
+| Appears in | [Message Composer](/ui-kit/ios/message-composer) action sheet |
+| Setup guide | [Collaborative Document](/fundamentals/collaborative-document) |
+| Code required | None - automatic after dashboard activation |
-Message Reactions extension lets users express their emotions towards a message by choosing from a range of emojis. It provides a quick way to respond to any shared message. For a comprehensive understanding and guide on implementing and using the Message Reactions Extension, refer to our specific guide on the [Message Reactions Extension](/fundamentals/reactions).
+### Message Reactions
-Once you have successfully activated the [Message Reactions Extension](/fundamentals/reactions) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of [MessageList Component](/ui-kit/ios/message-list) component of UI Kits.
+Let users react to messages with a range of emojis for quick responses.
-### Message Translation
+| Feature | Details |
+|---------|---------|
+| Appears in | [Message List](/ui-kit/ios/message-list) long-press menu |
+| Setup guide | [Reactions Extension](/fundamentals/reactions) |
+| Code required | None - automatic after dashboard activation |
-The Message Translation extension in CometChat is designed to translate any message into your local. It eliminates language barriers, making the chat more inclusive. For a comprehensive understanding and guide on implementing and using the Message Translation Extension, refer to our specific guide on the [Message Translation Extension](/fundamentals/message-translation).
+### Message Translation
-Once you have successfully activated the [Message Translation Extension](/fundamentals/message-translation) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of [MessageList Component](/ui-kit/ios/message-list) component of UI Kits.
+Translate messages into any language instantly, eliminating language barriers.
-### Link Preview
+| Feature | Details |
+|---------|---------|
+| Appears in | [Message List](/ui-kit/ios/message-list) message actions |
+| Setup guide | [Message Translation](/fundamentals/message-translation) |
+| Code required | None - automatic after dashboard activation |
-The Link Preview extension provides a summary of the URL shared in the chat. It includes the title, a description, and a thumbnail image from the web page. For a comprehensive understanding and guide on implementing and using the Link Preview Extension, refer to our specific guide on the [Link Preview Extension](/fundamentals/link-preview).
+### Link Preview
-Once you have successfully activated the [Link Preview Extension](/fundamentals/link-preview) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/ios/message-list) component of UI Kits.
+Show rich previews for URLs shared in chat including title, description, and thumbnail.
-### Profanity Filter
+| Feature | Details |
+|---------|---------|
+| Appears in | [Message List](/ui-kit/ios/message-list) message bubbles |
+| Setup guide | [Link Preview](/fundamentals/link-preview) |
+| Code required | None - automatic after dashboard activation |
-The Profanity Filter extension helps in maintaining the chat decorum by censoring obscene and inappropriate words in the messages. For a comprehensive understanding and guide on implementing and using the Profanity Filter Extension, refer to our specific guide on the [Legacy Extensions](/moderation/legacy-extensions).
+### Profanity Filter
-Once you have successfully activated the Profanity Filter Extension from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/ios/message-list) component of UI Kits.
+Automatically censor inappropriate and obscene words in messages.
-### Data Masking
+| Feature | Details |
+|---------|---------|
+| Appears in | [Message List](/ui-kit/ios/message-list) - filtered automatically |
+| Setup guide | [Legacy Extensions](/moderation/legacy-extensions) |
+| Code required | None - automatic after dashboard activation |
-The Data Masking extension helps secure sensitive data by masking information like credit card numbers and phone numbers in a chat message. For a comprehensive understanding and guide on implementing and using the Data Masking Extension, refer to our specific guide on the [Legacy Extensions](/moderation/legacy-extensions).
+### Data Masking
-Once you have successfully activated the Data Masking Extension from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/ios/message-list) component of UI Kits.
+Automatically mask sensitive data like credit card numbers and phone numbers.
-### Image Moderation
+| Feature | Details |
+|---------|---------|
+| Appears in | [Message List](/ui-kit/ios/message-list) - masked automatically |
+| Setup guide | [Legacy Extensions](/moderation/legacy-extensions) |
+| Code required | None - automatic after dashboard activation |
-The Image Moderation extension uses machine learning to detect and filter out inappropriate or explicit images shared in the chat. For a comprehensive understanding and guide on implementing and using the Image Moderation Extension, refer to our specific guide on the [Legacy Extensions](/moderation/legacy-extensions).
+### Image Moderation
-Once you have successfully activated the Image Moderation Extension from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/ios/message-list) component of UI Kits.
+Detect and filter inappropriate or explicit images using AI/ML.
-### Thumbnail Generation
+| Feature | Details |
+|---------|---------|
+| Appears in | [Message List](/ui-kit/ios/message-list) - filtered automatically |
+| Setup guide | [Legacy Extensions](/moderation/legacy-extensions) |
+| Code required | None - automatic after dashboard activation |
-The Thumbnail Generation extension automatically creates a smaller preview image whenever a larger image is shared, helping to reduce the upload/download time and bandwidth usage. For a comprehensive understanding and guide on implementing and using the Thumbnail Generation Extension, refer to our specific guide on the [Thumbnail Generation Extension](/fundamentals/thumbnail-generation).
+### Thumbnail Generation
-Once you have successfully activated the [Thumbnail Generation Extension](/fundamentals/thumbnail-generation) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/ios/message-list) component of UI Kits.
+Automatically create smaller preview images for faster loading and reduced bandwidth.
+| Feature | Details |
+|---------|---------|
+| Appears in | [Message List](/ui-kit/ios/message-list) image bubbles |
+| Setup guide | [Thumbnail Generation](/fundamentals/thumbnail-generation) |
+| Code required | None - automatic after dashboard activation |
+
### Smart Replies
-Smart Replies extension provides automated, predictive text responses, making the conversation more efficient by reducing the response time. For a comprehensive understanding and guide on implementing and using the Smart Replies Extension, refer to our specific guide on the [Smart Replies Extension](/fundamentals/smart-replies).
+AI-powered suggested responses for faster, more efficient conversations.
+
+| Feature | Details |
+|---------|---------|
+| Appears in | [Message Composer](/ui-kit/ios/message-composer) suggestions |
+| Setup guide | [Smart Replies](/fundamentals/smart-replies) |
+| Code required | None - automatic after dashboard activation |
+
+## Extensions Summary
+
+| Extension | Component | Use Case |
+|-----------|-----------|----------|
+| Stickers | Message Composer | Fun expression |
+| Polls | Message Composer | Group decisions |
+| Whiteboard | Message Composer | Visual collaboration |
+| Document | Message Composer | Document collaboration |
+| Reactions | Message List | Quick responses |
+| Translation | Message List | Multi-language support |
+| Link Preview | Message List | Rich URL previews |
+| Profanity Filter | Message List | Content moderation |
+| Data Masking | Message List | Privacy protection |
+| Image Moderation | Message List | Safe content |
+| Thumbnails | Message List | Faster loading |
+| Smart Replies | Message Composer | Quick responses |
+
+## Related
+
+- [Extensions Overview](/fundamentals/extensions-overview) - Full extension documentation
+- [Moderation](/moderation/overview) - Content moderation features
+- [Message Composer](/ui-kit/ios/message-composer) - Where composer extensions appear
+- [Message List](/ui-kit/ios/message-list) - Where message extensions appear
diff --git a/ui-kit/ios/getting-started.mdx b/ui-kit/ios/getting-started.mdx
index 0fabda03d..a78eed906 100644
--- a/ui-kit/ios/getting-started.mdx
+++ b/ui-kit/ios/getting-started.mdx
@@ -3,6 +3,34 @@ title: "Getting Started With CometChat iOS UI Kit"
sidebarTitle: "Integration"
---
+
+
-The `CometChatGroupMembers` component is composed of the following BaseComponents:
+
+
-`CometChatGroupMembers`, as a custom **view controller**, offers flexible integration options, allowing it to be launched directly via button clicks or any user-triggered action. Additionally, it seamlessly integrates into tab view controllers. With group members, users gain access to a wide range of parameters and methods for effortless customization of its user interface.
+---
-The following code snippet exemplifies how you can seamlessly integrate the GroupMembers component into your application.
+## Minimal Render
-
+
-
+
-You can set the `GroupMembersStyle` to the `Group Memebers` Component to customize the styling.
+### Key Style Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `backgroundColor` | `UIColor` | `CometChatTheme.backgroundColor01` | Background color |
+| `titleColor` | `UIColor` | `CometChatTheme.textColorPrimary` | Navigation title color |
+| `titleFont` | `UIFont` | `CometChatTypography.Heading4.medium` | Navigation title font |
+| `listItemTitleTextColor` | `UIColor` | `CometChatTheme.textColorPrimary` | Member name color |
+| `listItemTitleFont` | `UIFont` | `CometChatTypography.Heading4.medium` | Member name font |
+| `listItemSubTitleTextColor` | `UIColor` | `CometChatTheme.textColorSecondary` | Subtitle color |
+| `listItemBackground` | `UIColor` | `.clear` | List item background |
+
+### Customization Matrix
+
+| What to change | Where | Property/API | Example |
+|----------------|-------|--------------|---------|
+| Background color | Style | `backgroundColor` | `UIColor.systemBackground` |
+| Title appearance | Style | `titleColor`, `titleFont` | Custom colors and fonts |
+| List item look | Style | `listItemBackground` | `UIColor.white` |
+| Avatar appearance | Style | `avatarStyle` | `AvatarStyle()` with custom radius |
+| Hide search | Property | `hideSearch` | `groupMembers.hideSearch = true` |
+| Hide kick option | Property | `hideKickMemberOption` | `groupMembers.hideKickMemberOption = true` |
+| Custom row | View Slot | `set(listItemView:)` | See Custom View Slots |
-**Global level styling**
+---
-
-
+let avatarStyle = AvatarStyle()
+avatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 20)
+avatarStyle.backgroundColor = UIColor.systemBlue.withAlphaComponent(0.1)
-List of properties exposed by GroupMemberStyle
-
-| Property | Description | Code |
-| --------------------------------- | ---------------------------------------------------- | ------------------------------------------------ |
-| retryButtonTextColor | Sets the text color for the retry button. | `.retryButtonTextColor: UIColor` |
-| retryButtonTextFont | Sets the text font for the retry button. | `.retryButtonTextFont: UIFont` |
-| retryButtonBackgroundColor | Sets the background color for the retry button. | `.retryButtonBackgroundColor: UIColor` |
-| retryButtonBorderColor | Sets the border color for the retry button. | `.retryButtonBorderColor: UIColor` |
-| retryButtonBorderWidth | Sets the border width for the retry button. | `.retryButtonBorderWidth: CGFloat` |
-| retryButtonCornerRadius | Sets the corner radius for the retry button. | `.retryButtonCornerRadius: CometChatCornerStyle` |
-| listItemSelectedBackground | Sets the background color for selected list items. | `.listItemSelectedBackground: UIColor` |
-| listItemDeSelectedImageTint | Sets the tint color for deselected list item images. | `.listItemDeSelectedImageTint: UIColor` |
-| listItemSelectionImageTint | Sets the tint color for selected list item images. | `.listItemSelectionImageTint: UIColor` |
-| listItemSelectedImage | Sets the image for selected list items. | `.listItemSelectedImage: UIImage` |
-| listItemDeSelectedImage | Sets the image for deselected list items. | `.listItemDeSelectedImage: UIImage` |
-| backgroundColor | Sets the background color. | `.backgroundColor: UIColor` |
-| borderWidth | Sets the border width. | `.borderWidth: CGFloat` |
-| borderColor | Sets the border color. | `.borderColor: UIColor` |
-| cornerRadius | Sets the corner radius style. | `.cornerRadius: CometChatCornerStyle` |
-| titleFont | Sets the font for the title. | `.titleFont: UIFont?` |
-| largeTitleFont | Sets the font for the large title. | `.largeTitleFont: UIFont?` |
-| titleColor | Sets the color for the title text. | `.titleColor: UIColor?` |
-| largeTitleColor | Sets the color for the large title text. | `.largeTitleColor: UIColor?` |
-| navigationBarTintColor | Sets the tint color for the navigation bar. | `.navigationBarTintColor: UIColor?` |
-| navigationBarItemsTintColor | Sets the tint color for navigation bar items. | `.navigationBarItemsTintColor: UIColor?` |
-| errorTitleTextFont | Sets the font for the error title text. | `.errorTitleTextFont: UIFont` |
-| errorTitleTextColor | Sets the color for the error title text. | `.errorTitleTextColor: UIColor` |
-| errorSubTitleFont | Sets the font for the error subtitle text. | `.errorSubTitleFont: UIFont` |
-| errorSubTitleTextColor | Sets the color for the error subtitle text. | `.errorSubTitleTextColor: UIColor` |
-| emptyTitleTextFont | Sets the font for the empty state title text. | `.emptyTitleTextFont: UIFont` |
-| emptyTitleTextColor | Sets the color for the empty state title text. | `.emptyTitleTextColor: UIColor` |
-| emptySubTitleFont | Sets the font for the empty state subtitle text. | `.emptySubTitleFont: UIFont` |
-| emptySubTitleTextColor | Sets the color for the empty state subtitle text. | `.emptySubTitleTextColor: UIColor` |
-| tableViewSeparator | Sets the color for the table view separator. | `.tableViewSeparator: UIColor` |
-| listItemTitleTextColor | Sets the text color for list item titles. | `.listItemTitleTextColor: UIColor` |
-| listItemTitleFont | Sets the font for list item titles. | `.listItemTitleFont: UIFont` |
-| listItemSubTitleTextColor | Sets the text color for list item subtitles. | `.listItemSubTitleTextColor: UIColor` |
-| listItemSubTitleFont | Sets the font for list item subtitles. | `.listItemSubTitleFont: UIFont` |
-| listItemBackground | Sets the background color for list items. | `.listItemBackground: UIColor` |
-| listItemBorderWidth | Sets the border width for list items. | `.listItemBorderWidth: CGFloat` |
-| listItemBorderColor | Sets the border color for list items. | `.listItemBorderColor: UIColor` |
-| listItemCornerRadius | Sets the corner radius for list items. | `.listItemCornerRadius: CometChatCornerStyle` |
-| messageTypeImageTint | Sets the tint color for message type icons. | `.messageTypeImageTint: UIColor` |
-| passwordGroupImageTintColor | Sets the tint color for password group icons. | `.passwordGroupImageTintColor: UIColor` |
-| passwordGroupImageBackgroundColor | Sets the background color for password group icons. | `.passwordGroupImageBackgroundColor: UIColor` |
-| privateGroupImageTintColor | Sets the tint color for private group icons. | `.privateGroupImageTintColor: UIColor` |
-| privateGroupImageBackgroundColor | Sets the background color for private group icons. | `.privateGroupImageBackgroundColor: UIColor` |
-
-***
-
-### Functionality
-
-These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements.
-
-
-
+### hideErrorView
-In this example, we will create a UIView file `CustomListItemGroupView` and pass it inside the `setListItemView()` method.
+Hides the error state view.
-```swift CustomListItemGroupView
+| | |
+|---|---|
+| Type | `Bool` |
+| Default | `false` |
-import UIKit
-import CometChatSDK
-import CometChatUIKitSwift
+### hideKickMemberOption
-class CustomListItemView: UIView {
-
- private let profileImageView: CometChatAvatar = {
- let imageView = CometChatAvatar()
- imageView.layer.cornerRadius = 12 // Rounded corners
- imageView.translatesAutoresizingMaskIntoConstraints = false
- return imageView
- }()
-
- private let nameLabel: UILabel = {
- let label = UILabel()
- label.textColor = .black
- label.font = UIFont.boldSystemFont(ofSize: 18)
- label.translatesAutoresizingMaskIntoConstraints = false
- return label
- }()
-
- private let roleBadgeButton: UIButton = {
- let button = UIButton(type: .system)
- button.setTitle("Owner", for: .normal)
- button.setTitleColor(.white, for: .normal)
- button.backgroundColor = UIColor.purple
- button.titleLabel?.font = UIFont.systemFont(ofSize: 14, weight: .medium)
- button.layer.cornerRadius = 12
- button.translatesAutoresizingMaskIntoConstraints = false
- return button
- }()
-
- override init(frame: CGRect) {
- super.init(frame: frame)
- setupView()
- }
-
- required init?(coder: NSCoder) {
- super.init(coder: coder)
- setupView()
- }
-
- private func setupView() {
- addSubview(profileImageView)
- addSubview(nameLabel)
- addSubview(roleBadgeButton)
-
- NSLayoutConstraint.activate([
- // Profile Image Constraints
- profileImageView.leadingAnchor.constraint(equalTo: leadingAnchor),
- profileImageView.centerYAnchor.constraint(equalTo: centerYAnchor),
- profileImageView.widthAnchor.constraint(equalToConstant: 50),
- profileImageView.heightAnchor.constraint(equalToConstant: 50),
-
- // Name Label Constraints
- nameLabel.leadingAnchor.constraint(equalTo: profileImageView.trailingAnchor, constant: 12),
- nameLabel.centerYAnchor.constraint(equalTo: profileImageView.centerYAnchor),
-
- // Role Badge Button Constraints
- roleBadgeButton.leadingAnchor.constraint(greaterThanOrEqualTo: nameLabel.trailingAnchor, constant: 12),
- roleBadgeButton.trailingAnchor.constraint(equalTo: trailingAnchor),
- roleBadgeButton.centerYAnchor.constraint(equalTo: profileImageView.centerYAnchor),
- roleBadgeButton.heightAnchor.constraint(equalToConstant: 24),
- roleBadgeButton.widthAnchor.constraint(equalToConstant: 70)
- ])
- }
-
- // Method to configure the view with data
- func configure(with groupMember: GroupMember) {
- nameLabel.text = groupMember.name ?? ""
- profileImageView.setAvatar(avatarUrl: groupMember.avatar ?? "")
- roleBadgeButton.setTitle("\(groupMember.scope)", for: .normal)
- }
-}
-```
+Hides the kick member option in swipe actions.
-***
+| | |
+|---|---|
+| Type | `Bool` |
+| Default | `false` |
-#### SetLeadingView
+### hideLoadingState
-You can modify the leading view of a group member cell using .set(leadingView:).
+Hides the loading state indicator.
-
-
+### hideScopeChangeOption
-You can create a `CustomLeadingView` as a custom `UIView`. Which we will inflate in `setLeadingView()`
+Hides the role change option in swipe actions.
-
-
+Customizes the appearance of online/offline status indicators.
-You can create a `CustomTitleView` as a custom `UIView`. Which we will inflate in `setTitleView()`
+| | |
+|---|---|
+| Type | `StatusIndicatorStyle` |
+| Default | `StatusIndicatorStyle()` |
-
-
+groupMembers.set(options: { group, member in
+ var options = [CometChatGroupMemberOption]()
+
+ // Add message option
+ let messageOption = CometChatGroupMemberOption(
+ id: "message",
+ title: "Message",
+ icon: UIImage(systemName: "message"),
+ backgroundColor: .systemBlue,
+ onClick: { member, group, section, option, controller in
+ let messages = CometChatMessages()
+ messages.set(user: member)
+ controller.navigationController?.pushViewController(messages, animated: true)
+ }
+ )
+ options.append(messageOption)
+
+ // Add remove option
+ let removeOption = CometChatGroupMemberOption(
+ id: "remove",
+ title: "Remove",
+ icon: UIImage(systemName: "trash"),
+ backgroundColor: .systemRed,
+ onClick: { member, group, section, option, controller in
+ print("Remove member: \(member.name ?? "")")
+ }
+ )
+ options.append(removeOption)
+
+ return options
+})
+```
+
+#### add(options:)
+
+Adds additional swipe actions to the existing default options.
-In this example, we will create a UIView file `Custom_Tail_GroupView` and pass it inside the `.setTailView()` method.
+```swift
+@discardableResult
+public func add(options: ((_ group: Group, _ member: GroupMember?) -> [CometChatGroupMemberOption])?) -> Self
+```
-```swift Custom_Tail_GroupView
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `options` | `((Group, GroupMember?) -> [CometChatGroupMemberOption])?` | Closure that returns additional swipe action options to append |
+```swift
import UIKit
-import CometChatSDK
import CometChatUIKitSwift
+import CometChatSDK
-class CustomTailGroupView: UIView {
-
- let tailLabel: UILabel = {
- let label = UILabel()
- label.translatesAutoresizingMaskIntoConstraints = false
- label.font = UIFont.systemFont(ofSize: 10, weight: .semibold)
- label.textColor = UIColor(hex: "#6852D6")
- return label
- }()
-
- override init(frame: CGRect) {
- super.init(frame: frame)
- addSubview(tailLabel)
- NSLayoutConstraint.activate([
- tailLabel.centerXAnchor.constraint(equalTo: centerXAnchor),
- tailLabel.centerYAnchor.constraint(equalTo: centerYAnchor),
- self.heightAnchor.constraint(equalToConstant: 22),
- self.layer.cornerRadius = 11
- ])
- self.backgroundColor = UIColor(hex: "#EDEAFA")
- }
-
- required init?(coder: NSCoder) {
- fatalError("init(coder:) has not been implemented")
- }
+let groupMembers = CometChatGroupMembers(group: group)
- // Configure the view with a group member
- func configure(with groupMember: GroupMember) {
- tailLabel.text = "\(groupMember.name!.description )"
- }
-}
+groupMembers.add(options: { group, member in
+ var options = [CometChatGroupMemberOption]()
+
+ // Add promote option
+ let promoteOption = CometChatGroupMemberOption(
+ id: "promote",
+ title: "Promote",
+ icon: UIImage(systemName: "arrow.up.circle"),
+ backgroundColor: .systemGreen,
+ onClick: { member, group, section, option, controller in
+ print("Promote member: \(member.name ?? "")")
+ }
+ )
+ options.append(promoteOption)
+
+ return options
+})
```
-***
+### Data Manipulation Methods
-#### SubtitleView
+#### add(groupMember:)
-You can set your custom Subtitle view using the `.setSubtitleView()` method. But keep in mind, by using this you will override the default Subtitle view functionality.
+Adds a new group member to the list.
-
-
+// Add a member programmatically
+let newMember = GroupMember(uid: "user-123", groupMemberScope: .participant)
+newMember.name = "John Doe"
+groupMembers.add(groupMember: newMember)
+```
-In this example, we will create a `Custom_Subtitle_GroupMember_View`a UIView file.
+#### update(groupMember:)
-```swift Custom_Subtitle_GroupMember_View
+Updates an existing group member in the list.
-import UIKit
-import CometChatSDK
-import CometChatUIKitSwift
+```swift
+@discardableResult
+public func update(groupMember: GroupMember) -> Self
+```
-class CustomSubtitleGroupMemberView: UIView {
-
- let memberNameLabel: UILabel = {
- let label = UILabel()
- label.translatesAutoresizingMaskIntoConstraints = false
- label.textColor = .init(red: 0.42, green: 0.01, blue: 0.84, alpha: 1.00)
- label.font = UIFont.systemFont(ofSize: 15, weight: .bold)
- return label
- }()
-
- let joinedAtLabel: UILabel = {
- let label = UILabel()
- label.translatesAutoresizingMaskIntoConstraints = false
- label.textColor = .systemBrown
- label.font = UIFont.systemFont(ofSize: 10, weight: .medium)
- return label
- }()
-
- override init(frame: CGRect) {
- super.init(frame: frame)
- addSubview(memberNameLabel)
- addSubview(joinedAtLabel)
-
- NSLayoutConstraint.activate([
- memberNameLabel.topAnchor.constraint(equalTo: topAnchor),
- memberNameLabel.leadingAnchor.constraint(equalTo: leadingAnchor),
- memberNameLabel.trailingAnchor.constraint(equalTo: trailingAnchor),
-
- joinedAtLabel.topAnchor.constraint(equalTo: memberNameLabel.bottomAnchor, constant: 2),
- joinedAtLabel.leadingAnchor.constraint(equalTo: leadingAnchor),
- joinedAtLabel.trailingAnchor.constraint(equalTo: trailingAnchor),
- joinedAtLabel.bottomAnchor.constraint(equalTo: bottomAnchor)
- ])
- }
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `groupMember` | `GroupMember` | The group member with updated information |
- required init?(coder: NSCoder) {
- fatalError("init(coder:) has not been implemented")
- }
+```swift
+import CometChatUIKitSwift
+import CometChatSDK
- func configure(with groupMember: GroupMember) {
- memberNameLabel.text = "Member: \(groupMember.name ?? "")"
+let groupMembers = CometChatGroupMembers(group: group)
- let date = Date(timeIntervalSince1970: Double(groupMember.joinedAt))
- let dateFormatter = DateFormatter()
- dateFormatter.dateStyle = .medium
- joinedAtLabel.text = "Joined at: \(dateFormatter.string(from: date))"
- }
+// Update a member's information
+if var existingMember = memberToUpdate {
+ existingMember.scope = .admin
+ groupMembers.update(groupMember: existingMember)
}
```
-***
-
-#### Options
+#### remove(groupMember:)
-Enhance your GroupsMembers component by setting Custom Options to incorporate additional functionalities when swiping
+Removes a group member from the list.
-
-
+#### insert(groupMember:at:)
-In this example, we've enhanced the interface of `CometChatGroupMembers` by introducing a tailored feature. By adding a custom option, such as "Delete" with a corresponding trash icon, users can now enjoy a more interactive and user-friendly experience.
+Inserts a group member at a specific index in the list.
-
-
+Returns the number of group members currently in the list.
-In this example, we'll craft a custom button tailored for `CometChatGroupMembers`, enhancing its interface with a personalized `menu` for a more user-friendly experience.
+```swift
+public func size() -> Int
+```
-
+
-You can customize the empty state view using .set(emptyView:). This method accepts a UIView that appears when no group members are available.
+---
+
+## Custom Menu Buttons
+
+Add buttons to the navigation bar:
-
+
-
+
-The `Groups` component is composed of the following BaseComponents:
-
-| Components | Description |
-| ----------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [CometChatListBase](/ui-kit/ios/list-base) | `CometChatListBase` serves as a container component equipped with a title (navigationBar), search functionality (search-bar), background settings, and a container for embedding a list view. |
-| [CometChatListItem](/ui-kit/ios/list-item) | This component renders information extracted from a `Group` object onto a tile, featuring a title, subtitle, leading view, and trailing view. |
-
-***
+
+
-
+
-[Actions](/ui-kit/ios/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.
+---
-1. ##### set(onItemClick:)
+## Filtering
-`set(OnItemClick:)` is triggered when you click on a ListItem of the groups component. This `set(OnItemClick:)` method proves beneficial when a user intends to customize the on-click behavior in CometChatGroups.
+Use `GroupsRequest.GroupsRequestBuilder` to filter which groups appear in the list. The builder pattern allows chaining multiple filter conditions.
-
-
-
-| **Property** | **Description** | **Code** |
-| ----------------------------------------- | ---------------------------------------------------------------------------------------------------------- | ----------------------------------- |
-| **List Item Selected Image** | Check box image when a list item is selected. | `listItemSelectedImage` |
-| **List Item Deselected Image** | Check box image when a list item is deselected. | `listItemDeSelectedImage` |
-| **Search Icon Tint Color** | Tint color for the search icon, defaults to the secondary icon color from CometChatTheme. | `searchIconTintColor` |
-| **Search Bar Style** | Style of the search bar, defaulting to the standard style. | `searchBarStyle` |
-| **Search Tint Color** | Tint color for the search bar, defaults to the primary color from CometChatTheme. | `searchTintColor` |
-| **Search Bar Tint Color** | Background color of the search bar, defaulting to clear. | `searchBarTintColor` |
-| **Search Bar Placeholder Text Color** | Placeholder text color for the search bar, defaults to the tertiary text color from CometChatTheme. | `searchBarPlaceholderTextColor` |
-| **Search Bar Placeholder Text Font** | Font used for the placeholder text in the search bar, defaults to regular body font. | `searchBarPlaceholderTextFont` |
-| **Search Bar Text Color** | Color of the text entered in the search bar, defaults to the primary text color from CometChatTheme. | `searchBarTextColor` |
-| **Search Bar Text Font** | Font used for the text in the search bar, defaults to regular body font. | `searchBarTextFont` |
-| **Search Bar Background Color** | Background color of the search bar, defaults to a specific background color from CometChatTheme. | `searchBarBackgroundColor` |
-| **Search Bar Cancel Icon Tint Color** | Tint color for the cancel icon in the search bar, defaults to the primary color from CometChatTheme. | `searchBarCancelIconTintColor` |
-| **Search Bar Cross Icon Tint Color** | Tint color for the cross icon in the search bar, defaults to the secondary icon color from CometChatTheme. | `searchBarCrossIconTintColor` |
-| **Background Color** | Background color of the overall view, defaults to a specific background color from CometChatTheme. | `backgroundColor` |
-| **Border Width** | Width of the border around the view, defaults to 0 (no border). | `borderWidth` |
-| **Border Color** | Color of the border around the view, defaults to clear. | `borderColor` |
-| **Corner Radius** | Corner radius settings for the view, defaults to no corner radius. | `cornerRadius` |
-| **Title Color** | Color for the title text, defaults to the primary text color from CometChatTheme. | `titleColor` |
-| **Title Font** | Font used for the title text, defaults to nil (not set). | `titleFont` |
-| **Large Title Color** | Color for the large title text, defaults to the primary text color from CometChatTheme. | `largeTitleColor` |
-| **Large Title Font** | Font used for the large title text, defaults to nil (not set). | `largeTitleFont` |
-| **Navigation Bar Tint Color** | Background color of the navigation bar, defaults to a specific background color from CometChatTheme. | `navigationBarTintColor` |
-| **Navigation Bar Items Tint Color** | Tint color for items in the navigation bar, defaults to the highlight color from CometChatTheme. | `navigationBarItemsTintColor` |
-| **Error Title Text Font** | Font used for the error title text, defaults to a bold heading 3 font from CometChatTypography. | `errorTitleTextFont` |
-| **Error Title Text Color** | Color of the error title text, defaults to the primary text color from CometChatTheme. | `errorTitleTextColor` |
-| **Error Subtitle Font** | Font used for the error subtitle text, defaults to regular body font. | `errorSubTitleFont` |
-| **Error Subtitle Text Color** | Color of the error subtitle text, defaults to the secondary text color from CometChatTheme. | `errorSubTitleTextColor` |
-| **Retry Button Text Color** | Color for the retry button text, defaults to button text color from CometChatTheme. | `retryButtonTextColor` |
-| **Retry Button Text Font** | Font used for the retry button text, defaults to medium button font from CometChatTypography. | `retryButtonTextFont` |
-| **Retry Button Background Color** | Background color for the retry button, defaults to the primary color from CometChatTheme. | `retryButtonBackgroundColor` |
-| **Retry Button Border Color** | Border color for the retry button, defaults to clear. | `retryButtonBorderColor` |
-| **Retry Button Border Width** | Width of the border around the retry button, defaults to 0 (no border). | `retryButtonBorderWidth` |
-| **Retry Button Corner Radius** | Corner radius settings for the retry button, defaults to a specific corner radius from CometChatSpacing. | `retryButtonCornerRadius` |
-| **Empty State Title Font** | Font used for the empty state title text, defaults to a bold heading 3 font from CometChatTypography. | `emptyTitleTextFont` |
-| **Empty State Title Color** | Color of the empty state title text, defaults to the primary text color from CometChatTheme. | `emptyTitleTextColor` |
-| **Empty State Subtitle Font** | Font used for the empty state subtitle text, defaults to regular body font. | `emptySubTitleFont` |
-| **Empty State Subtitle Color** | Color of the empty state subtitle text, defaults to the secondary text color from CometChatTheme. | `emptySubTitleTextColor` |
-| **Table View Separator** | Color of the table view separator, defaults to clear. | `tableViewSeparator` |
-| **List Item Title Text Color** | Color of the title text in list items, defaults to the primary text color from CometChatTheme. | `listItemTitleTextColor` |
-| **List Item Title Font** | Font used for the title text in list items, defaults to medium heading 4 font from CometChatTypography. | `listItemTitleFont` |
-| **List Item Subtitle Text Color** | Color of the subtitle text in list items, defaults to the secondary text color from CometChatTheme. | `listItemSubTitleTextColor` |
-| **List Item Subtitle Font** | Font used for the subtitle text in list items, defaults to regular body font. | `listItemSubTitleFont` |
-| **List Item Background** | Background color for list items, defaults to clear. | `listItemBackground` |
-| **List Item Selected Background** | Background color for list items if selected, defaults to clear. | `listItemSelectedBackground` |
-| **List Item Border Width** | Width of the border around list items, defaults to 0 (no border). | `listItemBorderWidth` |
-| **List Item Border Color** | Color of the border around list items, defaults to the light border color from CometChatTheme. | `listItemBorderColor` |
-| **List Item Corner Radius** | Corner radius settings for list items, defaults to no corner radius. | `listItemCornerRadius` |
-| **List Item Selection Image Tint** | Tint color for the selection image in list items, defaults to the highlight color from CometChatTheme. | `listItemSelectionImageTint` |
-| **List Item Deselection Image Tint** | Tint color for the deselected image in list items. | `listItemDeSelectedImageTint` |
-| **Password Group Image Tint Color** | Tint color for the password group image, defaults to the background color from CometChatTheme. | `passwordGroupImageTintColor` |
-| **Password Group Image Background Color** | Background color for the password group image, defaults to the warning color from CometChatTheme. | `passwordGroupImageBackgroundColor` |
-| **Private Group Image Tint Color** | Tint color for the private group image, defaults to the background color from CometChatTheme. | `privateGroupImageTintColor` |
-| **Private Group Image Background Color** | Background color for the private group image, defaults to the success color from CometChatTheme. | `privateGroupImageBackgroundColor` |
-| **Private Group Icon** | Image for a private group icon. | `privateGroupIcon` |
-| **Protected Group Icon** | Image for a protected group icon. | `protectedGroupIcon` |
-
-***
-
-### Functionality
-
-These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements.
-
-Below is a list of customizations along with corresponding code snippets
-
-| Method | Description | Code |
-| ---------------------------- | ---------------------------------------------- | ------------------------------------------------- |
-| set(groupsRequestBuilder:) | Sets the request builder for fetching groups. | `set(groupsRequestBuilder: requestBuilder)` |
-| set(searchRequestBuilder:) | Sets the request builder for searching groups. | `set(searchRequestBuilder: searchRequestBuilder)` |
-| set(searchKeyword:) | Sets the search keyword to filter groups. | `set(searchKeyword: "group_name")` |
-| hideErrorView | Hides the error state view. | `hideErrorView = true` |
-| hideNavigationBar | Hides or shows the navigation bar. | `hideNavigationBar = true` |
-| hideSearch | Hides the search bar. | `hideSearch = true` |
-| hideBackButton | Hides the back button. | `hideBackButton = true` |
-| hideLoadingState | Hides the loading state indicator. | `hideLoadingState = true` |
-| hideReceipts | Hides message read/delivery receipts. | `hideReceipts = true` |
-| hideDeleteConversationOption | Hides the option to delete a conversation. | `hideDeleteConversationOption = true` |
-| hideUserStatus | Hides the online/offline status of users. | `hideUserStatus = true` |
-| hideGroupType | Hides the group type (private/public). | `hideGroupType = true` |
-
-***
-
-### Advanced
-
-For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component.
-
-***
-
-#### SetOptions
-
-You can define custom options for each group using .set(options:). This method allows you to return an array of CometChatGroupOption based on the group object.
-
-
+
-You can create a `CustomListItemView` as a custom `UIView`. Which we will inflate in `setListItemView()`
+You can create a `CustomGroupCell` as a custom `UIView`:
-```swift swift
+```swift
import UIKit
import CometChatSDK
-import CometChatUIKitSwift
-class GroupCellView: UIView {
-
- // MARK: - Properties
+class CustomGroupCell: UIView {
private let avatarImageView: UIImageView = {
let imageView = UIImageView()
imageView.translatesAutoresizingMaskIntoConstraints = false
- imageView.contentMode = .scaleAspectFit
- imageView.layer.cornerRadius = 20 // Circular avatar
+ imageView.contentMode = .scaleAspectFill
+ imageView.layer.cornerRadius = 20
imageView.clipsToBounds = true
+ imageView.backgroundColor = .systemGray5
return imageView
}()
private let titleLabel: UILabel = {
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
- label.font = UIFont.systemFont(ofSize: 16, weight: .bold)
- label.textColor = .black
- label.numberOfLines = 1
+ label.font = .systemFont(ofSize: 16, weight: .semibold)
+ label.textColor = .label
return label
}()
- private let subtitleLabel: UILabel = {
+ private let membersLabel: UILabel = {
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
- label.font = UIFont.systemFont(ofSize: 14, weight: .regular)
- label.textColor = .darkGray
- label.numberOfLines = 1
+ label.font = .systemFont(ofSize: 14)
+ label.textColor = .secondaryLabel
return label
}()
@@ -615,17 +507,13 @@ class GroupCellView: UIView {
let button = UIButton(type: .system)
button.translatesAutoresizingMaskIntoConstraints = false
button.setTitle("JOIN", for: .normal)
- button.setTitleColor(.systemBlue, for: .normal)
- button.titleLabel?.font = UIFont.systemFont(ofSize: 14, weight: .bold)
+ button.titleLabel?.font = .systemFont(ofSize: 12, weight: .bold)
button.layer.cornerRadius = 12
button.layer.borderWidth = 1
button.layer.borderColor = UIColor.systemBlue.cgColor
- button.clipsToBounds = true
return button
}()
- // MARK: - Initializers
-
override init(frame: CGRect) {
super.init(frame: frame)
setupView()
@@ -636,40 +524,26 @@ class GroupCellView: UIView {
setupView()
}
- // MARK: - Setup
-
private func setupView() {
- // Add subviews
addSubview(avatarImageView)
addSubview(titleLabel)
- addSubview(subtitleLabel)
+ addSubview(membersLabel)
addSubview(joinButton)
- // Constraints for avatarImageView
NSLayoutConstraint.activate([
avatarImageView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 16),
avatarImageView.centerYAnchor.constraint(equalTo: centerYAnchor),
avatarImageView.widthAnchor.constraint(equalToConstant: 40),
- avatarImageView.heightAnchor.constraint(equalToConstant: 40)
- ])
-
- // Constraints for titleLabel
- NSLayoutConstraint.activate([
+ avatarImageView.heightAnchor.constraint(equalToConstant: 40),
+
titleLabel.leadingAnchor.constraint(equalTo: avatarImageView.trailingAnchor, constant: 12),
- titleLabel.topAnchor.constraint(equalTo: topAnchor, constant: 8),
- titleLabel.trailingAnchor.constraint(lessThanOrEqualTo: joinButton.leadingAnchor, constant: -8)
- ])
-
- // Constraints for subtitleLabel
- NSLayoutConstraint.activate([
- subtitleLabel.leadingAnchor.constraint(equalTo: avatarImageView.trailingAnchor, constant: 12),
- subtitleLabel.topAnchor.constraint(equalTo: titleLabel.bottomAnchor, constant: 4),
- subtitleLabel.trailingAnchor.constraint(lessThanOrEqualTo: joinButton.leadingAnchor, constant: -8),
- subtitleLabel.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -8)
- ])
-
- // Constraints for joinButton
- NSLayoutConstraint.activate([
+ titleLabel.topAnchor.constraint(equalTo: topAnchor, constant: 12),
+ titleLabel.trailingAnchor.constraint(lessThanOrEqualTo: joinButton.leadingAnchor, constant: -8),
+
+ membersLabel.leadingAnchor.constraint(equalTo: avatarImageView.trailingAnchor, constant: 12),
+ membersLabel.topAnchor.constraint(equalTo: titleLabel.bottomAnchor, constant: 4),
+ membersLabel.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -12),
+
joinButton.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -16),
joinButton.centerYAnchor.constraint(equalTo: centerYAnchor),
joinButton.widthAnchor.constraint(equalToConstant: 60),
@@ -677,48 +551,51 @@ class GroupCellView: UIView {
])
}
- // MARK: - Configuration
-
- func configure(avatar: UIImage?, title: String, subtitle: String, isJoined: Bool) {
- avatarImageView.image = avatar
- titleLabel.text = title
- subtitleLabel.text = subtitle
+ func configure(with group: Group) {
+ titleLabel.text = group.name
+ membersLabel.text = "\(group.membersCount) members"
+
+ if let iconURL = group.icon, let url = URL(string: iconURL) {
+ URLSession.shared.dataTask(with: url) { [weak self] data, _, _ in
+ if let data = data, let image = UIImage(data: data) {
+ DispatchQueue.main.async {
+ self?.avatarImageView.image = image
+ }
+ }
+ }.resume()
+ }
+
+ let isJoined = group.hasJoined
joinButton.setTitle(isJoined ? "JOINED" : "JOIN", for: .normal)
- joinButton.setTitleColor(isJoined ? .gray : .systemBlue, for: .normal)
- joinButton.layer.borderColor = isJoined ? UIColor.gray.cgColor : UIColor.systemBlue.cgColor
+ joinButton.setTitleColor(isJoined ? .systemGray : .systemBlue, for: .normal)
+ joinButton.layer.borderColor = isJoined ? UIColor.systemGray.cgColor : UIColor.systemBlue.cgColor
}
}
```
-***
-
-#### SetLeadingView
+### leadingView
-You can modify the leading view of a group cell using .set(leadingView:).
+Customize the leading view (avatar area) of a group cell.
-
+
-You can create a `CustomLeadingView` as a custom `UIView`. Which we will inflate in `setLeadingView()`
+You can create a `CustomLeadingView` as a custom `UIView`:
-
+
-You can create a `CustomTitleView` as a custom `UIView`. Which we will inflate in `setTitleView()`
+You can create a `CustomTitleView` as a custom `UIView`:
-
+
-You can modify the trailing view of a group cell using .set(trailView:).
+You can create a `CustomSubtitleView` as a custom `UIView`:
-
+
-You can create a `CustomTrailView` as a custom `UIView`. Which we will inflate in `setTrailView()`
+You can create a `CustomTrailView` as a custom `UIView`:
-
-
+## Options
+
+### set(options:)
-You can seamlessly integrate this `CustomSubtitleView` UIView file into the `.set(subtitleView:)` method within CometChatGroups.
+Define custom swipe options for each group. This method allows you to return an array of `CometChatGroupOption` based on the group object. These options appear when the user swipes on a group cell.
-
@@ -29,166 +12,530 @@ The AI Agent chat interface provides a familiar messaging experience enhanced wi
## Prerequisites
-- **CometChat UIKit for iOS** installed via CocoaPods or Swift Package Manager
-- CometChat initialized with `App ID`, `Region`, and `Auth Key`
-- Message chat enabled in your CometChat app
-- Navigation set up between message and user/group screens
-- Internet permissions
+Before implementing AI agents, ensure you have:
-## Components
+- Completed [Getting Started](/ui-kit/ios/getting-started) setup
+- CometChat UIKit v5+ installed
+- AI features enabled in your [CometChat Dashboard](https://app.cometchat.com)
+- User logged in with `CometChatUIKit.login()`
-| Component/Class | Role |
-|------------------------------ |------------------------------------------------------|
-| `CometChatMessageHeader` | Manages message interactions and state |
-| `CometChatMessageList` | Displays a list of messages |
-| `CometChatMessageComposer` | Composes and sends new messages |
-| `CometChatAIAssistantChatHistory` | Displays previous AI conversation history |
+## Overview
----
+The AI Agent integration provides:
-## Integration Steps
+- **Intelligent Responses** - Context-aware AI conversations
+- **Chat History** - Browse and resume previous AI sessions
+- **Streaming Responses** - Real-time message streaming
+- **Custom Styling** - Match your app's design
+- **Suggested Messages** - Quick-start prompts for users
-### Step 1 - Screen Setup
+## Basic Implementation
-Create a screen for AI Assistant chat using `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer`.
+Create a simple AI chat screen:
-[`MessageListViewModel.swift`](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20List/CometChatMessageList.swift) | - -
+
-***
+
+
-List of properties exposed by IncomingCallStyle
-
-| Property | Description | Code |
-| ----------------------------- | --------------------------------------- | ------------------------------------------------- |
-| `overlayBackgroundColor` | Background color for the overlay. | `overlayBackgroundColor: UIColor` |
-| `acceptButtonBackgroundColor` | Background color for the accept button. | `acceptButtonBackgroundColor: UIColor` |
-| `rejectButtonBackgroundColor` | Background color for the reject button. | `rejectButtonBackgroundColor: UIColor` |
-| `acceptButtonTintColor` | Tint color for the accept button. | `acceptButtonTintColor: UIColor` |
-| `rejectButtonTintColor` | Tint color for the reject button. | `rejectButtonTintColor: UIColor` |
-| `acceptButtonImage` | Icon image for the accept button. | `acceptButtonImage: UIImage` |
-| `rejectButtonImage` | Icon image for the reject button. | `rejectButtonImage: UIImage` |
-| `acceptButtonCornerRadius` | Sets corner radius for accept button | `acceptButtonCornerRadius: CometChatCornerStyle?` |
-| `rejectButtonCornerRadius` | Sets corner radius for reject button | `rejectButtonCornerRadius: CometChatCornerStyle?` |
-| `acceptButtonBorderWidth` | Sets border width for accept button | `acceptButtonBorderWidth: CGFloat?` |
-| `rejectButtonBorderWidth` | Sets border width for reject button | `rejectButtonBorderWidth: CGFloat?` |
-| `acceptButtonBorderColor` | Sets border color for accept button | `acceptButtonBorderColor: UIColor?` |
-| `rejectButtonBorderColor` | Sets border color for reject button | `rejectButtonBorderColor: UIColor?` |
-| `backgroundColor` | Background color for the call view. | `backgroundColor: UIColor` |
-| `cornerRadius` | Corner radius for the view. | `cornerRadius: nil` |
-| `borderColor` | Border color for the view. | `borderColor: UIColor` |
-| `borderWidth` | Border width for the view. | `borderWidth: CGFloat` |
-| `callLabelColor` | Text color for the call label. | `callLabelColor: UIColor` |
-| `callLabelFont` | Font for the call label. | `callLabelFont: UIFont` |
-| `nameLabelColor` | Text color for the name label. | `nameLabelColor: UIColor` |
-| `nameLabelFont` | Font for the name label. | `nameLabelFont: UIFont` |
-
-***
+List of properties exposed by IncomingCallStyle:
+
+| Property | Description | Code |
+|----------|-------------|------|
+| `overlayBackgroundColor` | Background color for the overlay | `overlayBackgroundColor: UIColor` |
+| `acceptButtonBackgroundColor` | Background color for the accept button | `acceptButtonBackgroundColor: UIColor` |
+| `rejectButtonBackgroundColor` | Background color for the reject button | `rejectButtonBackgroundColor: UIColor` |
+| `acceptButtonTintColor` | Tint color for the accept button | `acceptButtonTintColor: UIColor` |
+| `rejectButtonTintColor` | Tint color for the reject button | `rejectButtonTintColor: UIColor` |
+| `acceptButtonImage` | Icon image for the accept button | `acceptButtonImage: UIImage` |
+| `rejectButtonImage` | Icon image for the reject button | `rejectButtonImage: UIImage` |
+| `acceptButtonCornerRadius` | Sets corner radius for accept button | `acceptButtonCornerRadius: CometChatCornerStyle?` |
+| `rejectButtonCornerRadius` | Sets corner radius for reject button | `rejectButtonCornerRadius: CometChatCornerStyle?` |
+| `acceptButtonBorderWidth` | Sets border width for accept button | `acceptButtonBorderWidth: CGFloat?` |
+| `rejectButtonBorderWidth` | Sets border width for reject button | `rejectButtonBorderWidth: CGFloat?` |
+| `acceptButtonBorderColor` | Sets border color for accept button | `acceptButtonBorderColor: UIColor?` |
+| `rejectButtonBorderColor` | Sets border color for reject button | `rejectButtonBorderColor: UIColor?` |
+| `backgroundColor` | Background color for the call view | `backgroundColor: UIColor` |
+| `cornerRadius` | Corner radius for the view | `cornerRadius: nil` |
+| `borderColor` | Border color for the view | `borderColor: UIColor` |
+| `borderWidth` | Border width for the view | `borderWidth: CGFloat` |
+| `callLabelColor` | Text color for the call label | `callLabelColor: UIColor` |
+| `callLabelFont` | Font for the call label | `callLabelFont: UIFont` |
+| `nameLabelColor` | Text color for the name label | `nameLabelColor: UIColor` |
+| `nameLabelFont` | Font for the name label | `nameLabelFont: UIFont` |
+
+---
### Functionality
These are a set of small functional customizations that allow you to fine-tune the overall experience of the component.
-| Property | Description | Code |
-| ---------------------- | --------------------------------------- | ------------------------------- |
-| disableSoundForCalls | Disables sound for incoming calls. | `disableSoundForCalls = true` |
-| setCustomSoundForCalls | Sets a custom sound for incoming calls. | `set(customSoundForCalls: URL)` |
+| Property | Description | Code |
+|----------|-------------|------|
+| `disableSoundForCalls` | Disables sound for incoming calls | `disableSoundForCalls = true` |
+| `setCustomSoundForCalls` | Sets a custom sound for incoming calls | `set(customSoundForCalls: URL)` |
### Advanced
@@ -292,20 +326,18 @@ cometChatIncomingCall.set(listItemView: { call in
return customView
})
```
-
+
-You can create a CustomListItemView as a custom `UIView`.
+You can create a CustomListItemView as a custom `UIView`:
-```swift swift
+```swift
import UIKit
class CustomListItemView: UIView {
@@ -405,11 +437,11 @@ class CustomListItemView: UIView {
}
```
-***
+---
#### SetLeadingView
-You can modify the leading view of a Incoming call component using the property below.
+You can modify the leading view of an Incoming call component using the property below.
+
-You can create a CustomLeadingView as a custom `UIView`.
+You can create a CustomLeadingView as a custom `UIView`:
+
-You can create a `CustomTitleView` as a custom `UIView`. Which we will inflate in `setTitleView()`
+You can create a `CustomTitleView` as a custom `UIView` which we will inflate in `setTitleView()`:
@@ -60,22 +66,32 @@ Setting a listener for mention-click events in Message Bubbles enhances interact
@@ -120,21 +143,19 @@ Assigns the list of text formatters. If the provided list is not null, it sets t
@@ -143,26 +164,22 @@ Assigns the list of text formatters. If the provided list is not null, it sets t
@@ -171,12 +188,22 @@ Assigns the list of text formatters. If the provided list is not null, it sets t
+---
+
## Image Bubble
Image bubbles display messages with images.
-The following code snippet shows how customize the Image message bubble:
+The following code snippet shows how to customize the image message bubble:
+---
+
## Video Bubble
Video bubbles display messages with video clips.
-The following code snippet shows how customize the Video message bubble:
+The following code snippet shows how to customize the video message bubble:
+---
+
## Audio Bubble
-Audio bubbles display Audio messages.
+Audio bubbles display audio messages.
-The following code snippet shows how customize the Audio message bubble:
+The following code snippet shows how to customize the audio message bubble:
+---
+
## Poll Bubble
-Poll bubbles display messages with polling.
+Poll bubbles display messages with polling options.
-The following code snippet shows how customize the Poll message bubble:
+The following code snippet shows how to customize the poll message bubble:
+---
+
## Link Preview Bubble
-The Link Preview Bubble is designed to display a preview of links shared in messages. It enriches the messaging experience by showing details such as the page title, description, and an image from the linked content, making links more engaging and informative.
+The Link Preview Bubble displays a preview of links shared in messages. It enriches the messaging experience by showing details such as the page title, description, and an image from the linked content, making links more engaging and informative.
-The following code snippet shows how customize the Link preview message bubble:
+The following code snippet shows how to customize the link preview message bubble:
+---
+
## Action Bubble
Action bubbles provide a customizable interface for displaying a variety of actions, such as group actions, within a chat.
-The following code snippet shows how customize the action message bubble:
+The following code snippet shows how to customize the action message bubble:
+---
+
## Delete Bubble
-Delete bubbles displays messages that have been deleted by the sender. These indicate the message removal within the chat interface.
+Delete bubbles display messages that have been deleted by the sender. These indicate the message removal within the chat interface.
-The following code snippet shows how customize the delete message bubble:
+The following code snippet shows how to customize the delete message bubble:
+---
-## AIAssistantBubble
+## AI Assistant Bubble
The AI Assistant Bubble displays responses or messages sent by the AI assistant within the chat interface. These bubbles are designed to visually distinguish AI-generated messages from user messages, maintaining a clear and intuitive conversation flow.
-You can customize the appearance of the AI Assistant message bubble to match your app’s theme — including background color, text color, font, and border styling.
+You can customize the appearance of the AI Assistant message bubble to match your app's theme — including background color, text color, font, and border styling.
The following code snippet shows how to customize the AI Assistant message bubble:
+
-MessageComposer is comprised of the following [Base Components](/ui-kit/ios/components-overview#base-components):
+
+
-## Usage
+---
-### Integration
+## Minimal Render
-The following code snippet illustrates how you can directly incorporate the MessageComposer component into your file.
+```swift
+import CometChatUIKitSwift
+import CometChatSDK
-```csharp
-// syntax for set(user: User)
let messageComposer = CometChatMessageComposer()
messageComposer.set(user: user)
-messageComposer.set(parentMessageId: 20)
```
-### Actions
+
+
+
-[Actions](/ui-kit/ios/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.
+---
+
+## Actions and Events
+
+### Callback Props
-##### 1. onSendButtonClick
+#### onSendButtonClick
-The `set(onSendButtonClick:)` event gets activated when the send message button is clicked. The following code snippet Overrides the action of the send button in CometChatMessageComposer.
+Fires when the send button is clicked. Use this to handle custom send actions.
-
+
+
+You can create a `CustomHeaderView` as a custom `UIView`:
+
+```swift
+import UIKit
+
+class CustomHeaderView: UIView {
+
+ private let iconImageView: UIImageView = {
+ let imageView = UIImageView()
+ imageView.image = UIImage(systemName: "bell.slash.fill")
+ imageView.tintColor = .purple
+ imageView.contentMode = .scaleAspectFit
+ return imageView
+ }()
+
+ private let messageLabel: UILabel = {
+ let label = UILabel()
+ label.text = "User has paused their notifications"
+ label.textColor = .black
+ label.font = UIFont.systemFont(ofSize: 14, weight: .medium)
+ return label
+ }()
+
+ override init(frame: CGRect) {
+ super.init(frame: frame)
+ setupView()
+ }
+
+ required init?(coder: NSCoder) {
+ fatalError("init(coder:) has not been implemented")
+ }
+
+ private func setupView() {
+ backgroundColor = UIColor.purple.withAlphaComponent(0.1)
+ layer.cornerRadius = 12
+
+ addSubview(iconImageView)
+ addSubview(messageLabel)
-
+
-The following properties are exposed by MessageComposerStyle:
-
-| **Property** | **Description** | **Code** |
-| ----------------------------------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
-| **Placeholder Text Font** | Font for the placeholder text in the input field. | `CometChatMessageComposer.style.placeHolderTextFont = CometChatTypography.Body.regular` |
-| **Placeholder Text Color** | Color for the placeholder text in the input field. | `CometChatMessageComposer.style.placeHolderTextColor = CometChatTheme.textColorTertiary` |
-| **Text Field Color** | Text color for the input field. | `CometChatMessageComposer.style.textFiledColor = CometChatTheme.textColorPrimary` |
-| **Text Field Font** | Font for the input field text. | `CometChatMessageComposer.style.textFiledFont = CometChatTypography.Body.regular` |
-| **Background Color** | Background color with dynamic support for light and dark mode. | `CometChatMessageComposer.style.backgroundColor = UIColor.dynamicColor(lightModeColor: ..., darkModeColor: ...)` |
-| **Corner Radius** | Corner radius for the composer. | `CometChatMessageComposer.style.cornerRadius = CometChatCornerStyle?` |
-| **Border Width** | Border width for the composer. | `CometChatMessageComposer.style.borderWidth = 0` |
-| **Border Color** | Border color for the composer. | `CometChatMessageComposer.style.borderColor = .clear` |
-| **Send Button Image** | Icon for the send button. | `CometChatMessageComposer.style.sendButtonImage = UIImage(named: "custom-send")` |
-| **Send Button Tint Color** | Tint color for the send button image. | `CometChatMessageComposer.style.sendButtonImageTint = CometChatTheme.white` |
-| **Active Send Button Background Color** | Background color for the send button when active. | `CometChatMessageComposer.style.activeSendButtonImageBackgroundColor = CometChatTheme.primaryColor` |
-| **Inactive Send Button Background Color** | Background color for the send button when inactive. | `CometChatMessageComposer.style.inactiveSendButtonImageBackgroundColor = CometChatTheme.neutralColor300` |
-| **Compose Box Background Color** | Background color for the compose box. | `CometChatMessageComposer.style.composeBoxBackgroundColor = CometChatTheme.backgroundColor01` |
-| **Compose Box Border Color** | Border color for the compose box. | `CometChatMessageComposer.style.composeBoxBorderColor = CometChatTheme.borderColorDefault` |
-| **Compose Box Border Width** | Border width for the compose box. | `CometChatMessageComposer.style.composeBoxBorderWidth = 1` |
-| **Compose Box Corner Radius** | Corner radius for the compose box. | `CometChatMessageComposer.style.composerBoxCornerRadius = .init(cornerRadius: CometChatSpacing.Radius.r2)` |
-| **Compose Box Separator Color** | Color for the separator in the compose box. | `CometChatMessageComposer.style.composerSeparatorColor = CometChatTheme.borderColorLight` |
-| **Attachment Image** | Icon for the attachment button. | `CometChatMessageComposer.style.attachmentImage = UIImage(systemName: "plus.circle")` |
-| **Attachment Image Tint** | Tint color for the attachment image. | `CometChatMessageComposer.style.attachmentImageTint = CometChatTheme.iconColorSecondary` |
-| **Voice Recording Image** | Icon for the voice recording button. | `CometChatMessageComposer.style.voiceRecordingImage = UIImage(systemName: "mic")?.withRenderingMode(.alwaysTemplate)` |
-| **Voice Recording Image Tint** | Tint color for the voice recording image. | `CometChatMessageComposer.style.voiceRecordingImageTint = CometChatTheme.iconColorSecondary` |
-| **AI Image** | Icon for the AI button. | `CometChatMessageComposer.style.aiImage = UIImage(named: "ai-image")` |
-| **AI Image Tint** | Tint color for the AI image. | `CometChatMessageComposer.style.aiImageTint = CometChatTheme.iconColorSecondary` |
-| **Sticker Image** | Icon for the sticker button. | `CometChatMessageComposer.style.stickerImage = UIImage(named: "sticker-image")` |
-| **Sticker Image Tint** | Tint color for the sticker image. | `CometChatMessageComposer.style.stickerTint = CometChatTheme.iconColorSecondary` |
-| **Edit Preview Title Font** | Font for the title in the edit preview. | `CometChatMessageComposer.style.editPreviewTitleTextFont = CometChatTypography.Body.regular` |
-| **Edit Preview Message Font** | Font for the message text in the edit preview. | `CometChatMessageComposer.style.editPreviewMessageTextFont = CometChatTypography.Caption1.regular` |
-| **Edit Preview Title Color** | Text color for the title in the edit preview. | `CometChatMessageComposer.style.editPreviewTitleTextColor = CometChatTheme.textColorPrimary` |
-| **Edit Preview Message Color** | Text color for the message in the edit preview. | `CometChatMessageComposer.style.editPreviewMessageTextColor = CometChatTheme.textColorSecondary` |
-| **Edit Preview Background Color** | Background color for the edit preview. | `CometChatMessageComposer.style.editPreviewBackgroundColor = CometChatTheme.backgroundColor03` |
-| **Edit Preview Corner Radius** | Corner radius for the edit preview. | `CometChatMessageComposer.style.editPreviewCornerRadius = .init(cornerRadius: CometChatSpacing.Radius.r1)` |
-| **Edit Preview Border Color** | Border color for the edit preview. | `CometChatMessageComposer.style.editPreviewBorderColor = .clear` |
-| **Edit Preview Border Width** | Border width for the edit preview. | `CometChatMessageComposer.style.editPreviewBorderWidth = 0` |
-| **Edit Preview Close Icon** | Icon for closing the edit preview. | `CometChatMessageComposer.style.editPreviewCloseIcon = UIImage(systemName: "xmark")?.withRenderingMode(.alwaysTemplate)` |
-| **Edit Preview Close Icon Tint** | Tint color for the close icon in the edit preview. | `CometChatMessageComposer.style.editPreviewCloseIconTint = CometChatTheme.iconColorPrimary` |
-| **Info Icon** | Icon for the info button. | `CometChatMessageComposer.style.infoIcon = UIImage(systemName: "info.circle")` |
-| **Info Icon Tint** | Tint color for the info icon. | `CometChatMessageComposer.style.infoIconTint = CometChatTheme.errorColor` |
-| **Info Text Color** | Text color for the info text. | `CometChatMessageComposer.style.infoTextColor = CometChatTheme.errorColor` |
-| **Info Text Font** | Font for the info text. | `CometChatMessageComposer.style.infoTextFont = CometChatTypography.Caption1.regular` |
-| **Info Separator Color** | Color for the separator in the info section. | `CometChatMessageComposer.style.infoSeparatorColor = CometChatTheme.borderColorLight` |
-| **Info Background Color** | Background color for the info section. | `CometChatMessageComposer.style.infoBackgroundColor = CometChatTheme.backgroundColor02` |
-| **Info Corner Radius** | Corner radius for the info section. | `CometChatMessageComposer.style.infoCornerRadius = .init(cornerRadius: CometChatSpacing.Radius.r1)` |
-| **Info Border Color** | Border color for the info section. | `CometChatMessageComposer.style.infoBorderColor = .clear` |
-| **Info Border Width** | Border width for the info section. | `CometChatMessageComposer.style.infoBorderWidth = 0` |
-
-##### 2. MediaRecorder Style
-
-To customize the media recording styling, you can apply the `MediaRecorderStyle` to the `MessageComposer` component. For more details, please refer to [MediaRecorder](/ui-kit/ios/component-styling#media-recorder) styles.
-
-**Global level styling**
-
-
-
+| | |
+|---|---|
+| Type | `AttachmentSheetStyle` |
+| Default | `AttachmentSheetStyle()` |
-The following properties are exposed by Media Recorder Style:
+```swift
+import CometChatUIKitSwift
+
+let messageComposer = CometChatMessageComposer()
-| **Property** | **Description** | **Code** |
-| ---------------------------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
-| **backgroundColor** | Sets the background color of the media recorder. | `mediaRecorderStyle.backgroundColor: UIColor = CometChatTheme.backgroundColor01` |
-| **borderWidth** | Defines the width of the border for the media recorder. | `mediaRecorderStyle.borderWidth: CGFloat = 1` |
-| **borderColor** | Specifies the border color of the media recorder. | `mediaRecorderStyle.borderColor: UIColor = CometChatTheme.borderColorLight` |
-| **cornerRadius** | Configures the corner radius of the media recorder. | `mediaRecorderStyle.cornerRadius: CometChatCornerStyle? = nil` |
-| **recordingButtonBackgroundColor** | Sets the background color of the recording button. | `mediaRecorderStyle.recordingButtonBackgroundColor: UIColor = CometChatTheme.iconColorHighlight` |
-| **recordingButtonCornerRadius** | Configures the corner radius of the recording button. | `mediaRecorderStyle.recordingButtonCornerRadius: CometChatCornerStyle? = nil` |
-| **recordingButtonBorderWidth** | Sets the border width of the recording button. | `mediaRecorderStyle.recordingButtonBorderWidth: CGFloat = 0` |
-| **recordingButtonBorderColor** | Sets the border color of the recording button. | `mediaRecorderStyle.recordingButtonBorderColor: UIColor = .clear` |
-| **recordingButtonImageTintColor** | Specifies the tint color of the recording button image. | `mediaRecorderStyle.recordingButtonImageTintColor: UIColor = CometChatTheme.white` |
-| **recordingButtonImage** | The image displayed on the recording button. | `mediaRecorderStyle.recordingButtonImage: UIImage = UIImage(systemName: "mic.fill") ?? UIImage()` |
-| **deleteButtonBackgroundColor** | Sets the background color of the delete button. | `mediaRecorderStyle.deleteButtonBackgroundColor: UIColor = CometChatTheme.backgroundColor01` |
-| **deleteButtonImageTintColor** | Specifies the tint color of the delete button image. | `mediaRecorderStyle.deleteButtonImageTintColor: UIColor = CometChatTheme.iconColorSecondary` |
-| **deleteButtonImage** | The image displayed on the delete button. | `mediaRecorderStyle.deleteButtonImage: UIImage = UIImage(systemName: "trash.fill") ?? UIImage()` |
-| **deleteButtonCornerRadius** | Configures the corner radius of the delete button. | `mediaRecorderStyle.deleteButtonCornerRadius: CometChatCornerStyle? = nil` |
-| **deleteButtonBorderWidth** | Sets the border width of the delete button. | `mediaRecorderStyle.deleteButtonBorderWidth: CGFloat = 1` |
-| **deleteButtonBorderColor** | Specifies the border color of the delete button. | `mediaRecorderStyle.deleteButtonBorderColor: UIColor = CometChatTheme.borderColorLight` |
+let attachmentSheetStyle = AttachmentSheetStyle()
+attachmentSheetStyle.backgroundColor = UIColor.systemBackground
+attachmentSheetStyle.iconTint = UIColor.systemBlue
+attachmentSheetStyle.titleColor = UIColor.label
-##### 3. AI Options Style
+messageComposer.attachmentSheetStyle = attachmentSheetStyle
+```
+
+#### suggestionsStyle
-To customize the media recording styling, you can apply the `AIOptionsStyle` to the `MessageComposer` component. For more details, please refer to [MediaRecorder](/ui-kit/ios/component-styling#media-recorder) styles.
+Customizes the appearance of the suggestions view (for mentions and other suggestions).
-**Global level styling**
+| | |
+|---|---|
+| Type | `SuggestionsStyle` |
+| Default | `SuggestionsStyle()` |
-
-
+| | |
+|---|---|
+| Type | `MentionStyle` |
+| Default | `MentionStyle()` |
-The following properties are exposed by AI Options Style:
-
-| **Property** | **Description** | **Code** |
-| ---------------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------ |
-| **errorViewTextFont** | Specifies the font used for the text in the error view. | `aIOptionsStyle.errorViewTextFont: UIFont?` |
-| **errorViewTextColor** | Sets the color of the text in the error view. | `aIOptionsStyle.errorViewTextColor: UIColor?` |
-| **emptyViewTextFont** | Specifies the font used for the text in the empty view. | `aIOptionsStyle.emptyViewTextFont: UIFont?` |
-| **emptyViewTextColor** | Sets the color of the text in the empty view. | `aIOptionsStyle.emptyViewTextColor: UIColor?` |
-| **aiImageTintColor** | Configures the tint color for AI-related images. | `aIOptionsStyle.aiImageTintColor: UIColor = CometChatTheme.iconColorHighlight` |
-| **textColor** | Sets the color of the text. | `aIOptionsStyle.textColor: UIColor = CometChatTheme.textColorPrimary` |
-| **textFont** | Specifies the font for the text. | `aIOptionsStyle.textFont: UIFont = CometChatTypography.Heading4.regular` |
-| **backgroundColor** | Sets the background color. | `aIOptionsStyle.backgroundColor: UIColor = CometChatTheme.backgroundColor01` |
-| **borderWidth** | Sets the width of the border. | `aIOptionsStyle.borderWidth: CGFloat = 0` |
-| **borderColor** | Sets the color of the border. | `aIOptionsStyle.borderColor: UIColor = .clear` |
-| **cornerRadius** | Configures the corner radius of the view. | `aIOptionsStyle.cornerRadius: CometChatCornerStyle? = nil` |
-
-***
-
-### Functionality
-
-These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can set maximum lines text area will show before scrolling in the composer, edit a message, add header view and footer view to the composer, etc.
-
-Below is a list of customizations along with corresponding code snippets message composer offers
-
-| Property | Description | Code |
-| --------------------------------- | -------------------------------------------------------- | ------------------------------------------ |
-| setInitialComposerText | Sets the initial text in the composer when it loads. | `setInitialComposerText("Hello")` |
-| disableTypingEvents | Disables sending typing indicators when the user types. | `disableTypingEvents = true` |
-| disableMentions | Disables the mention feature in the composer. | `disableMentions = true` |
-| hideImageAttachmentOption | Hides the option to attach images. | `hideImageAttachmentOption = true` |
-| hideVideoAttachmentOption | Hides the option to attach videos. | `hideVideoAttachmentOption = true` |
-| hideAudioAttachmentOption | Hides the option to attach audio files. | `hideAudioAttachmentOption = true` |
-| hideFileAttachmentOption | Hides the option to attach files. | `hideFileAttachmentOption = true` |
-| hidePollsOption | Hides the option to create polls. | `hidePollsOption = true` |
-| hideCollaborativeDocumentOption | Hides the option for collaborative documents. | `hideCollaborativeDocumentOption = true` |
-| hideCollaborativeWhiteboardOption | Hides the option for collaborative whiteboards. | `hideCollaborativeWhiteboardOption = true` |
-| hideAttachmentButton | Hides the attachment button in the composer. | `hideAttachmentButton = true` |
-| hideVoiceRecordingButton | Hides the voice recording button. | `hideVoiceRecordingButton = true` |
-| hideStickersButton | Hides the stickers button. | `hideStickersButton = true` |
-| hideSendButton | Hides the send button. | `hideSendButton = true` |
-| setUser | Sets the user for direct messaging. | `set(user: User)` |
-| setGroup | Sets the group for group messaging. | `set(group: Group)` |
-| setParentMessageId | Sets the parent message ID for replying in a thread. | `set(parentMessageId: 12345)` |
-| setMaxLine | Sets the maximum number of lines for the composer input. | `set(maxLine: 3)` |
-| setCustomSoundForMessages | Sets a custom sound for sending messages. | `set(customSoundForMessages: URL?)` |
-| disableSoundForMessages | Disables sound while sending messages. | `disableSoundForMessages = true` |
-
-***
-
-### Advanced
-
-For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component.
-
-#### AttachmentOptions
-
-By using `set(attachmentOptions:)`, you can set a list of custom `MessageComposerActions` for the MessageComposer Component. This will override the existing list of `CometChatMessageComposerAction`.
-
-
-
+All props are optional. Sorted alphabetically.
-In this example, we are overriding the existing MessageComposerActions List with Capture Photo actions.
-
-
-
+### hideCollaborativeDocumentOption
+
+Hides the collaborative document option in the attachment menu.
+
+| | |
+|---|---|
+| Type | `Bool` |
+| Default | `false` |
-
-
+```swift
+import CometChatUIKitSwift
+
+let messageComposer = CometChatMessageComposer()
+messageComposer.hideImageAttachmentOption = true
+```
+
+### hidePollsOption
+
+Hides the polls option in the attachment menu.
+
+| | |
+|---|---|
+| Type | `Bool` |
+| Default | `false` |
-
+
-The `MessageHeader` is comprised of the following components:
-
-| Components | Description |
-| ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- |
-| [ListItem Component](/ui-kit/ios/list-item) | This component’s view consists of avatar, status indicator , title, and subtitle. The fields are then mapped with the SDK’s user, group class. |
-| Back Button | BackButton that allows users to navigate back from the current activity or screen to the previous one |
-
-## Usage
-
-### Integration
-
-You can add `MessageHeader` component directly by setting the user.
-
-```ruby Swift
-// syntax for set(user: User)
-messageHeader.set(user: user) // The object which is going to be rendered in the data item
-```
-
-### Actions
-
-[Actions](/ui-kit/ios/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.
-
-The `MessageHeader` component does not have any exposed actions.
-
-##### 1. set(onBack:)
-
-This `set(onBack:)` method becomes valuable when a user needs to override the action triggered upon pressing the back button in CometChatMessageHeader.
-
-
+
-The properties exposed by `MessageHeaderStyle` are as follows:
-
-| **Property** | **Description** | **Code** |
-| --------------------------------------- | ------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
-| **Title Text Color** | Used to set the text color of the header title. | `CometChatMessageHeader.style.titleTextColor = UIColor.black` |
-| **Title Text Font** | Used to set the font style of the header title. | `CometChatMessageHeader.style.titleTextFont = UIFont.boldSystemFont(ofSize: 18)` |
-| **Subtitle Text Color** | Used to set the text color of the subtitle in the header. | `CometChatMessageHeader.style.subtitleTextColor = UIColor.gray` |
-| **Subtitle Text Font** | Used to set the font style of the subtitle in the header. | `CometChatMessageHeader.style.subtitleTextFont = UIFont.systemFont(ofSize: 14)` |
-| **Back Button Image Tint Color** | Used to set the tint color of the back button image in the header. | `CometChatMessageHeader.style.backButtonImageTintColor = UIColor.blue` |
-| **Private Group Badge Tint Color** | Used to set the tint color of the private group badge in the header. | `CometChatMessageHeader.style.privateGroupBadgeImageTintColor = UIColor.green` |
-| **Password-Protected Badge Tint Color** | Used to set the tint color of the password-protected group badge in the header. | `CometChatMessageHeader.style.passwordProtectedGroupBadgeImageTintColor = UIColor.orange` |
-| **Private Group Background Color** | Used to set the background color of the private group badge. | `CometChatMessageHeader.style.privateGroupImageBackgroundColor = UIColor.lightGray` |
-| **Password-Protected Background Color** | Used to set the background color of the password-protected group badge. | `CometChatMessageHeader.style.passwordGroupImageBackgroundColor = UIColor.red` |
-| **Group Image Background Color** | Used to set the background color for group icons in the header. | `CometChatMessageHeader.style.groupImageBackgroundColor = UIColor.clear` |
-| **Avatar Style** | Used to customize the appearance of the avatar in the header. | `CometChatMessageHeader.style.avatarStyle = customAvatarStyle` |
-| **Background Color** | Used to set the background color of the header. | `CometChatMessageHeader.style.backgroundColor = UIColor.white` |
-| **Corner Radius** | Used to set the corner radius of the header. | `CometChatMessageHeader.style.cornerRadius = CometChatCornerStyle(cornerRadius: 8)` |
-| **Border Width** | Used to set the border width of the header. | `CometChatMessageHeader.style.borderWidth = 2` |
-| **Border Color** | Used to set the border color of the header. | `CometChatMessageHeader.style.borderColor = UIColor.gray` |
-| **Back Button Icon** | Used to set a custom icon for the back button. | `CometChatMessageHeader.style.backButtonIcon = UIImage(named: "customBackIcon")` |
-| **Private Group Icon** | Used to set a custom icon for private groups. | `CometChatMessageHeader.style.privateGroupIcon = UIImage(named: "privateIcon")` |
-| **Protected Group Icon** | Used to set a custom icon for password-protected groups. | `CometChatMessageHeader.style.protectedGroupIcon = UIImage(named: "protectedIcon")` |
-| **Background Image** | Used to set a background image for the header. | `CometChatMessageHeader.style.backgroundImage = UIImage(named: "headerBackground")` |
-| **New Chat Icon** | Sets a custom icon for the new chat button for AI agent. | `CometChatAIAssistantChatHistory.newChatIcon = UIImage(named: "iconName")` |
-| **Chat History Icon** | Sets a custom icon for the chat history button for AI agent. | `CometChatAIAssistantChatHistory.chatHistoryIcon = UIImage(named: "iconName")` |
-
-##### 2. Avatar Style
-
-If you want to apply customized styles to the `Avatar` component within the `MessageHeader` Component, you can use the following code snippet. For more information you can refer [Avatar Styles](/ui-kit/ios/component-styling#avatar#methods).
-
-**Global level styling**
-
-
+
-***
-
-### Functionality
-
-These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements.
+---
-Below is a list of customizations along with corresponding code snippets
+## Actions and Events
-| Method | Description | Code |
-| ------------------- | ---------------------------------------------------------------------- | ---------------------------- |
-| set(user:User) | Sets message header for CometChat user. | `.set(user:User)` |
-| set(group:Group) | Sets message header for CometChat group. | `.set(group:Group)` |
-| hideBackButton | Hides the back button of message header. | `hideBackButton = true` |
-| hideUserStatus | Hides or shows the user status of user(online/offline/last active at). | `hideUserStatus = true` |
-| hideVideoCallButton | Hides the video call button. | `hideVideoCallButton = true` |
-| hideVoiceCallButton | Hides the voice call button. | `hideVoiceCallButton = true` |
-| hideChatHistoryButton | Hides the chat history button in the component. | `CometChatAIAssistantChatHistory.hideChatHistoryButton = true` |
-| hideNewChatButton | Hides the new chat button in the component for AI agent. | `CometChatAIAssistantChatHistory.hideNewChatButton = true` |
-| onNewChatButtonClicked | Used to handle actions when the “New Chat” button is clicked. | `CometChatAIAssistantChatHistory.set(onNewChatButtonClicked: { user in })` |
-| onMessageClicked | Used to handle actions when a message is clicked. | `CometChatAIAssistantChatHistory.set(onMessageClicked: { message in })` |
+### Callback Props
-***
+#### onBack
-### Advanced
+Fires when the back button is pressed. Use this for custom navigation handling.
-For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component.
+```swift
+import CometChatUIKitSwift
-#### Date Time Formatter
+let messageHeader = CometChatMessageHeader()
-The **CometChatMessageHeader** component supports full customization of how date and time are displayed using the [CometChatDateTimeFormatter](/ui-kit/ios/localize#datetimeformatter).
+messageHeader.set(onBack: { [weak self] in
+ self?.navigationController?.popViewController(animated: true)
+})
+```
-This enables developers to localize, format, or personalize the date and time strings shown next to the message header such as “Today”, “Yesterday”, “12:45 PM”, etc.
+#### onError
-1. Component-Level (Global)
+Fires when an error occurs.
-
-
-
-You can create a `CustomListItemView` as a custom `UIView`. Which we will inflate in `setListItemView()`
-
-```swift swift
+```swift
import UIKit
+import CometChatSDK
-class CustomListItemView: UIView {
-
+class CustomHeaderView: UIView {
+
private let backButton: UIButton = {
let button = UIButton(type: .system)
- let image = UIImage(systemName: "chevron.left")?.withRenderingMode(.alwaysTemplate)
- button.setImage(image, for: .normal)
+ button.setImage(UIImage(systemName: "chevron.left"), for: .normal)
button.tintColor = .black
return button
}()
-
- private let profileImageView: UIView = {
- let view = UIView()
- view.backgroundColor = UIColor.systemPurple
- view.layer.cornerRadius = 18
- view.clipsToBounds = true
-
- let label = UILabel()
- label.text = "GA"
- label.font = UIFont.systemFont(ofSize: 16, weight: .bold)
- label.textColor = .white
- label.textAlignment = .center
- label.translatesAutoresizingMaskIntoConstraints = false
-
- view.addSubview(label)
-
- NSLayoutConstraint.activate([
- label.centerXAnchor.constraint(equalTo: view.centerXAnchor),
- label.centerYAnchor.constraint(equalTo: view.centerYAnchor)
- ])
-
- return view
+
+ private let profileImageView: UIImageView = {
+ let imageView = UIImageView()
+ imageView.contentMode = .scaleAspectFill
+ imageView.layer.cornerRadius = 18
+ imageView.clipsToBounds = true
+ imageView.backgroundColor = .lightGray
+ return imageView
}()
-
+
private let nameLabel: UILabel = {
let label = UILabel()
- label.text = "George Alan"
- label.font = UIFont.systemFont(ofSize: 16, weight: .bold)
+ label.font = UIFont.systemFont(ofSize: 16, weight: .semibold)
label.textColor = .black
return label
}()
-
+
private let statusLabel: UILabel = {
let label = UILabel()
- label.text = "Online"
- label.font = UIFont.systemFont(ofSize: 12, weight: .regular)
+ label.font = UIFont.systemFont(ofSize: 12)
label.textColor = .gray
return label
}()
-
+
private let videoCallButton: UIButton = {
let button = UIButton(type: .system)
- let image = UIImage(systemName: "video.fill")?.withRenderingMode(.alwaysTemplate)
- button.setImage(image, for: .normal)
+ button.setImage(UIImage(systemName: "video.fill"), for: .normal)
button.tintColor = .black
return button
}()
-
+
private let callButton: UIButton = {
let button = UIButton(type: .system)
- let image = UIImage(systemName: "phone.fill")?.withRenderingMode(.alwaysTemplate)
- button.setImage(image, for: .normal)
+ button.setImage(UIImage(systemName: "phone.fill"), for: .normal)
button.tintColor = .black
return button
}()
-
+
override init(frame: CGRect) {
super.init(frame: frame)
setupView()
@@ -438,38 +330,41 @@ class CustomListItemView: UIView {
rightButtonsStack.centerYAnchor.constraint(equalTo: centerYAnchor)
])
}
+
+ func configure(user: User?, group: Group?) {
+ nameLabel.text = user?.name ?? group?.name ?? "Chat"
+ if let user = user {
+ statusLabel.text = user.status == .online ? "Online" : "Offline"
+ } else if let group = group {
+ statusLabel.text = "\(group.membersCount) members"
+ }
+ }
}
```
-***
-
-#### SetLeadingView
+### leadingView
-You can modify the leading view of a group cell using .set(leadingView:).
+Customize the leading view (avatar area) of the header.
-
+
-You can create a `CustomLeadingView` as a custom `UIView`. Which we will inflate in `setLeadingView()`
+You can create a `CustomLeadingView` as a custom `UIView`:
-
+
-You can create a `CustomTitleView` as a custom `UIView`. Which we will inflate in `setTitleView()`
+You can create a `CustomTitleView` as a custom `UIView`:
-
+ 
-You can create a `CustomTrailView` as a custom `UIView`. Which we will inflate in `setTrailView()`
+You can create a `CustomTrailView` as a custom `UIView`:
-
+
-You can seamlessly integrate this `CustomSubtitleView` UIView file into the `.set(subtitleView:)` method within CometChatMessageHeader.
+### Key Style Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `backgroundColor` | `UIColor` | `CometChatTheme.backgroundColor01` | Background color |
+| `borderWidth` | `CGFloat` | `0` | Border width |
+| `borderColor` | `UIColor` | `.clear` | Border color |
+| `cornerRadius` | `CometChatCornerStyle?` | `nil` | Corner radius |
+| `titleTextColor` | `UIColor` | `CometChatTheme.textColorPrimary` | Title text color |
+| `titleTextFont` | `UIFont` | `CometChatTypography.Heading4.medium` | Title font |
+| `subtitleTextColor` | `UIColor` | `CometChatTheme.textColorSecondary` | Subtitle text color |
+| `subtitleTextFont` | `UIFont` | `CometChatTypography.Body.regular` | Subtitle font |
+| `backButtonImageTintColor` | `UIColor` | `CometChatTheme.iconColorPrimary` | Back button tint |
+| `backButtonIcon` | `UIImage?` | System chevron | Back button icon |
+| `privateGroupBadgeImageTintColor` | `UIColor` | `CometChatTheme.iconColorSecondary` | Private group badge tint |
+| `passwordProtectedGroupBadgeImageTintColor` | `UIColor` | `CometChatTheme.iconColorSecondary` | Password group badge tint |
+| `avatarStyle` | `AvatarStyle` | `AvatarStyle()` | Avatar customization |
+| `statusIndicatorStyle` | `StatusIndicatorStyle` | `StatusIndicatorStyle()` | Online/offline status indicator customization |
+| `typingIndicatorStyle` | `TypingIndicatorStyle` | `TypingIndicatorStyle()` | Typing indicator customization |
+
+### Customization Matrix
+
+| What to change | Where | Property/API | Example |
+|----------------|-------|--------------|---------|
+| Background color | Style | `backgroundColor` | `UIColor.systemBackground` |
+| Title appearance | Style | `titleTextColor`, `titleTextFont` | Custom colors and fonts |
+| Subtitle appearance | Style | `subtitleTextColor`, `subtitleTextFont` | Custom colors and fonts |
+| Back button | Style | `backButtonIcon`, `backButtonImageTintColor` | Custom icon and color |
+| Avatar look | Style | `avatarStyle` | `AvatarStyle()` with custom radius |
+| Status indicator | Style | `statusIndicatorStyle` | `StatusIndicatorStyle()` with custom colors |
+| Typing indicator | Style | `typingIndicatorStyle` | `TypingIndicatorStyle()` with custom font |
+| Hide back button | Property | `hideBackButton` | `header.hideBackButton = true` |
+| Hide status | Property | `hideUserStatus` | `header.hideUserStatus = true` |
+| Disable typing | Property | `disableTyping` | `header.disableTyping = true` |
+| Hide AI buttons | Property | `hideNewChatButton`, `hideChatHistoryButton` | `header.hideNewChatButton = true` |
+| Custom subtitle | View Slot | `set(subtitleView:)` | See Custom View Slots |
+| Custom menu options | Method | `set(options:)` | See Menu Customization |
+
+---
+
+## Connection Management
+
+Manually control the WebSocket connection for the message header.
+
+### connect()
+
+Establishes the WebSocket connection for real-time updates. Use this when you need to manually reconnect after disconnecting.
+
+```swift
+@discardableResult
+public func connect() -> Self
+```
+
+```swift
+import CometChatUIKitSwift
+
+let messageHeader = CometChatMessageHeader()
+
+// Manually connect to receive real-time updates
+messageHeader.connect()
+```
+
+### disconnect()
+
+Disconnects the WebSocket connection. Use this when you want to temporarily stop receiving real-time updates, such as when the view is not visible.
+
+```swift
+@discardableResult
+public func disconnect() -> Self
+```
-
+
+
+
+
-***
+---
+
+## Minimal Render
+
+```swift
+import CometChatUIKitSwift
+import CometChatSDK
+
+let messageList = CometChatMessageList()
+messageList.set(user: user)
+```
+
+
+
+
-## Usage
+---
-### Integration
+## Filtering
-The following code snippet illustrates how you can directly incorporate the MessageList component.
+Use `MessagesRequest.MessageRequestBuilder` to filter which messages appear in the list. The builder pattern allows chaining multiple filter conditions.
-
-
+| Slot | Signature | Replaces |
+|------|-----------|----------|
+| `headerView` | `UIView` | Header above message list |
+| `footerView` | `UIView` | Footer below message list |
+| `emptyView` | `UIView` | Empty state display |
+| `errorView` | `UIView` | Error state display |
+| `loadingView` | `UIView` | Loading state display |
+| `newMessageIndicatorView` | `UIView` | New message indicator |
+
+### set(headerView:)
+
+Replaces the default header with a custom view.
+
+| | |
+|---|---|
+| Signature | `(UIView) -> Self` |
+| Replaces | Default header above message list |
-List of properties exposed by MessageListStyle
-
-| **Property** | **Description** | **Code** |
-| ------------------------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
-| **Background Color** | Background color with dynamic support for light and dark mode. | `CometChatMessageList.style.backgroundColor = UIColor.dynamicColor(lightModeColor: ..., darkModeColor: ...)` |
-| **Border Width** | Border width for the component. | `CometChatMessageList.style.borderWidth = 0` |
-| **Border Color** | Border color for the component. | `CometChatMessageList.style.borderColor = .clear` |
-| **Corner Radius** | Corner radius for the component. | `CometChatMessageList.style.cornerRadius = CometChatCornerStyle?` |
-| **Shimmer Gradient Color 1** | First color of the shimmer gradient. | `CometChatMessageList.style.shimmerGradientColor1 = CometChatTheme.backgroundColor04` |
-| **Shimmer Gradient Color 2** | Second color of the shimmer gradient. | `CometChatMessageList.style.shimmerGradientColor2 = CometChatTheme.backgroundColor03` |
-| **Empty State Title Color** | Text color for the title in the empty state. | `CometChatMessageList.style.emptyStateTitleColor = CometChatTheme.textColorPrimary` |
-| **Empty State Title Font** | Font for the title in the empty state. | `CometChatMessageList.style.emptyStateTitleFont = CometChatTypography.Heading3.bold` |
-| **Empty State Subtitle Color** | Text color for the subtitle in the empty state. | `CometChatMessageList.style.emptyStateSubtitleColor = CometChatTheme.textColorSecondary` |
-| **Empty State Subtitle Font** | Font for the subtitle in the empty state. | `CometChatMessageList.style.emptyStateSubtitleFont = CometChatTypography.Body.regular` |
-| **Error State Title Color** | Text color for the title in the error state. | `CometChatMessageList.style.errorStateTitleColor = CometChatTheme.textColorPrimary` |
-| **Error State Title Font** | Font for the title in the error state. | `CometChatMessageList.style.errorStateTitleFont = CometChatTypography.Heading3.bold` |
-| **Error State Subtitle Color** | Text color for the subtitle in the error state. | `CometChatMessageList.style.errorStateSubtitleColor = CometChatTheme.textColorSecondary` |
-| **Error State Subtitle Font** | Font for the subtitle in the error state. | `CometChatMessageList.style.errorStateSubtitleFont = CometChatTypography.Body.regular` |
-| **Threaded Message Image** | Icon image for threaded messages. | `CometChatMessageList.style.threadedMessageImage = UIImage(systemName: "arrow.turn.down.right")` |
-| **Error Image** | Icon image for error state. | `CometChatMessageList.style.errorImage = UIImage(named: "error-icon")` |
-| **Empty Image** | Icon image for empty state. | `CometChatMessageList.style.emptyImage = UIImage(named: "empty-icon")` |
-| **New Message Indicator Image** | Icon image for new message indicator. | `CometChatMessageList.style.newMessageIndicatorImage = UIImage?` |
-| **New Message Indicator Text Color** | Text color for unread messages indicator. | `CometChatMessageList.style.newMessageIndicatorTextColor = UIColor?` |
-| **New Message Indicator Text Font** | Text font for unread messages indicator. | `CometChatMessageList.style.newMessageIndicatorTextFont = UIFont?` |
-| **New Message Indicator Background Color** | Background color for unread messages indicator. | `CometChatMessageList.style.newMessageIndicatorBackgroundColor = UIColor?` |
-
-
-
-***
-
-### Functionality
-
-These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements.
-
-Below is a list of customizations along with corresponding code snippets
-
-| Property | Description | Code |
-| ------------------------------- | ------------------------------------------------------------ | ------------------------------------------- |
-| hideAvatar | Hides the avatar of the sender. | `hideAvatar = true` |
-| hideGroupActionMessages | Hides group action messages (like join/leave notifications). | `hideGroupActionMessages = true` |
-| hideReplyInThreadOption | Hides the reply in thread option. | `hideReplyInThreadOption = true` |
-| hideTranslateMessageOption | Hides the message translation option. | `hideTranslateMessageOption = true` |
-| hideEditMessageOption | Hides the edit message option. | `hideEditMessageOption = true` |
-| hideDeleteMessageOption | Hides the delete message option. | `hideDeleteMessageOption = true` |
-| hideReactionOption | Hides the reaction option on messages. | `hideReactionOption = true` |
-| hideMessagePrivatelyOption | Hides the option to message privately. | `hideMessagePrivatelyOption = true` |
-| hideCopyMessageOption | Hides the option to copy a message. | `hideCopyMessageOption = true` |
-| hideMessageInfoOption | Hides the message info option. | `hideMessageInfoOption = true` |
-| hideHeaderView | Hides the header view of the message list. | `hideHeaderView = true` |
-| hideFooterView | Hides the footer view of the message list. | `hideFooterView = true` |
-| hideDateSeparator | Hides the date separator between messages. | `hideDateSeparator = true` |
-| scrollToBottomOnNewMessages | Scrolls to the bottom when new messages arrive. | `scrollToBottomOnNewMessages = true` |
-| hideReceipts | Hides the message read receipts (ticks). | `hideReceipts = true` |
-| disableSoundForMessages | Disables the sound when a new message arrives. | `disableSoundForMessages = true` |
-| hideEmptyView | Hides the empty state view when no messages are available. | `hideEmptyView = true` |
-| hideErrorView | Hides the error view when an error occurs. | `hideErrorView = true` |
-| hideLoadingView | Hides the loading view when fetching messages. | `hideLoadingView = true` |
-| hideNewMessageIndicator | Hides the "new message" indicator. | `hideNewMessageIndicator = true` |
-| scrollToBottom(isAnimated:) | Scrolls to the bottom of the message list. | `scrollToBottom(isAnimated: true)` |
-| set(messageAlignment:) | Sets the alignment of messages in the list. | `set(messageAlignment: .left)` |
-| set(smartRepliesKeywords:) | Sets keywords for smart replies. | `set(smartRepliesKeywords: ["Hi", "Bye"])` |
-| set(smartRepliesDelayDuration:) | Sets the delay duration for smart replies. | `set(smartRepliesDelayDuration: 2)` |
-| set(user:parentMessage:) | Sets the user and an optional parent message. | `set(user: user, parentMessage: message)` |
-| set(group:parentMessage:) | Sets the group and an optional parent message. | `set(group: group, parentMessage: message)` |
-| set(messagesRequestBuilder:) | Sets the message request builder. | `set(messagesRequestBuilder: builder)` |
-| set(reactionsRequestBuilder:) | Sets the reactions request builder. | `set(reactionsRequestBuilder: builder)` |
-| set(parentMessageId:) | Sets the parent message ID. | `set(parentMessageId: 12345)` |
-| hideModerationView | Hides the moderation view in the AI assistant chat. | `hideModerationView = true` |
-|hideThreadView | Hides the thread view in the AI assistant chat. | `hideThreadView = true` |
-| set(suggestedMessages:) | List of predefined replies shown in the AI assistant. | `suggestedMessages = ["Hello", "Hi"]` |
-| hideSuggestedMessages | Hides the suggested message replies. | `hideSuggestedMessages = true` |
-| set(emptyChatGreetingView:) | Custom view displayed when the AI assistant chat is empty. | `emptyChatGreetingView = { /* custom view */ }` |
-| set(streamingSpeed:) | Sets the speed of streaming for AI assistant messages. | `streamingSpeed = 50` |
-| goToMessage(withId:) | Scrolls the message list to a specific message, making it visible to the user based on the provided message ID | `goToMessage(messageId: Int)` |
-| startFromUnreadMessages | Starts the message list from the first unread message.. | `startFromUnreadMessages = true` |
-| showMarkAsUnreadOption | Sets the visibility of the “Mark as unread” option in the message actions menu. | `showMarkAsUnreadOption = true` |
-
-
-***
-
-### Advance
-
-For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component.
-
-#### Date Time Formatter
-
-The **CometChatMessageList** component supports full customization of how date and time are displayed using the [CometChatDateTimeFormatter](/ui-kit/ios/localize#datetimeformatter).
-
-This enables developers to localize, format, or personalize the date and time strings shown next to each message such as “Today”, “Yesterday”, “12:45 PM”, etc.
-
-1. Component-Level (Global)
-
-
-
+| | |
+|---|---|
+| Signature | `(UIView) -> Self` |
+| Replaces | Default loading indicator |
+
+```swift
+import UIKit
+import CometChatUIKitSwift
+
+let messageList = CometChatMessageList()
+
+let loadingView = UIActivityIndicatorView(style: .large)
+loadingView.color = UIColor.systemBlue
+loadingView.startAnimating()
+
+messageList.set(loadingView: loadingView)
+```
+
+### set(newMessageIndicatorView:)
-Following is the code of CustomHeaderView - UIView Class
+Replaces the default new message indicator with a custom view.
+
+| | |
+|---|---|
+| Signature | `(UIView) -> Self` |
+| Replaces | Default new message indicator |
```swift
import UIKit
+import CometChatUIKitSwift
-class CustomHeaderView: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
-
- private var collectionData: [CollectionItem] = [
- CollectionItem(title: "Notes", icon: UIImage(systemName: "doc.text.fill")),
- CollectionItem(title: "Pinned Messages", icon: UIImage(systemName: "bookmark.fill")),
- CollectionItem(title: "Saved Links", icon: UIImage(systemName: "link"))
- ]
-
- private lazy var collectionView: UICollectionView = {
- let layout = UICollectionViewFlowLayout()
- layout.scrollDirection = .horizontal
- layout.minimumInteritemSpacing = 10
- layout.sectionInset = UIEdgeInsets(top: 0, left: 10, bottom: 0, right: 10)
-
- let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
- collectionView.register(CustomHeaderViewCell.self, forCellWithReuseIdentifier: CustomHeaderViewCell.identifier)
- collectionView.backgroundColor = .clear
- collectionView.showsHorizontalScrollIndicator = false
- collectionView.delegate = self
- collectionView.dataSource = self
- collectionView.tag = 1
- return collectionView
- }()
-
-
- override func viewDidLoad() {
- super.viewDidLoad()
- view.backgroundColor = UIColor(white: 0.95, alpha: 1)
- setupUI()
- }
-
- private func setupUI() {
- view.addSubview(collectionView)
-
- collectionView.translatesAutoresizingMaskIntoConstraints = false
-
- NSLayoutConstraint.activate([
- collectionView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 10),
- collectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
- collectionView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
- collectionView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: 10)
- ])
- }
-
- // MARK: - UICollectionView DataSource & Delegate
-
- func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
- return collectionData.count
- }
-
- func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
- guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: CustomHeaderViewCell.identifier, for: indexPath) as? CustomHeaderViewCell else {
- return UICollectionViewCell()
- }
-
- cell.configure(with: collectionData[indexPath.row])
- return cell
- }
-
- func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
- return CGSize(width: 150, height: 40)
- }
-}
+let messageList = CometChatMessageList()
-struct CollectionItem {
- let title: String
- let icon: UIImage?
-}
+let newMessageIndicatorView = NewUnreadMessageIndicator()
+messageList.set(newMessageIndicatorView: newMessageIndicatorView)
-class CustomHeaderViewCell: UICollectionViewCell {
-
- static let identifier = "CustomCollectionViewCell"
-
- private let iconImageView: UIImageView = {
- let imageView = UIImageView()
- imageView.contentMode = .scaleAspectFit
- imageView.translatesAutoresizingMaskIntoConstraints = false
- return imageView
- }()
+class NewUnreadMessageIndicator: UIView {
- private let titleLabel: UILabel = {
+ private let label: UILabel = {
let label = UILabel()
+ label.text = "New Messages ↓"
+ label.textColor = .white
label.font = UIFont.systemFont(ofSize: 14, weight: .medium)
- label.textColor = UIColor.purple
- label.translatesAutoresizingMaskIntoConstraints = false
+ label.textAlignment = .center
return label
}()
override init(frame: CGRect) {
super.init(frame: frame)
- setupUI()
- }
-
- required init?(coder: NSCoder) {
- fatalError("init(coder:) has not been implemented")
- }
-
- private func setupUI() {
- backgroundColor = UIColor(white: 0.95, alpha: 1) // Light purple background
- layer.cornerRadius = 18
- clipsToBounds = true
-
- addSubview(iconImageView)
- addSubview(titleLabel)
+ backgroundColor = UIColor.systemBlue
+ layer.cornerRadius = 16
+ addSubview(label)
+ label.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
- iconImageView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 8),
- iconImageView.centerYAnchor.constraint(equalTo: centerYAnchor),
- iconImageView.widthAnchor.constraint(equalToConstant: 20),
- iconImageView.heightAnchor.constraint(equalToConstant: 20),
-
- titleLabel.leadingAnchor.constraint(equalTo: iconImageView.trailingAnchor, constant: 5),
- titleLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -8),
- titleLabel.centerYAnchor.constraint(equalTo: centerYAnchor)
+ label.centerXAnchor.constraint(equalTo: centerXAnchor),
+ label.centerYAnchor.constraint(equalTo: centerYAnchor)
])
}
- func configure(with model: CollectionItem) {
- iconImageView.image = model.icon
- titleLabel.text = model.title
+ required init?(coder: NSCoder) {
+ fatalError("init(coder:) has not been implemented")
}
}
```
-***
-
-#### SetFooterView
+---
-You can set custom footerView to the Message List component using the following method.
+## Text Formatters
-Example
+Customize how text is displayed in messages using text formatters.
-
-
+```swift
+@discardableResult
+public func set(textFormatters: [CometChatTextFormatter]) -> Self
+```
-Following is the code of CustomFooterView UIView Class
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `textFormatters` | `[CometChatTextFormatter]` | Array of text formatters to apply |
```swift
-import UIKit
+import CometChatUIKitSwift
-class CustomFooterView: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
-
- private var collectionData: [CollectionItem] = [
- CollectionItem(title: "Ice Breakers", icon: UIImage(systemName: "sun.max.fill")),
- CollectionItem(title: "+1-212-456-7890", icon: UIImage(systemName: "phone.fill")),
- CollectionItem(title: "+ Instagram", icon: UIImage(systemName: "camera.fill"))
- ]
-
- private lazy var collectionView: UICollectionView = {
- let layout = UICollectionViewFlowLayout()
- layout.scrollDirection = .horizontal
- layout.minimumInteritemSpacing = 10
- layout.sectionInset = UIEdgeInsets(top: 0, left: 10, bottom: 0, right: 10)
-
- let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
- collectionView.register(CustomFooterViewCell.self, forCellWithReuseIdentifier: CustomFooterViewCell.identifier)
- collectionView.backgroundColor = .clear
- collectionView.showsHorizontalScrollIndicator = false
- collectionView.delegate = self
- collectionView.dataSource = self
- collectionView.tag = 1
- return collectionView
- }()
-
-
- override func viewDidLoad() {
- super.viewDidLoad()
- view.backgroundColor = UIColor(white: 0.95, alpha: 1)
- setupUI()
- }
-
- private func setupUI() {
- view.addSubview(collectionView)
-
- collectionView.translatesAutoresizingMaskIntoConstraints = false
-
- NSLayoutConstraint.activate([
- collectionView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 10),
- collectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
- collectionView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
- collectionView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: 10)
- ])
- }
-
- // MARK: - UICollectionView DataSource & Delegate
+let messageList = CometChatMessageList()
+
+let hashtagFormatter = HashtagTextFormatter(trackingCharacter: "#")
+let mentionFormatter = MentionTextFormatter(trackingCharacter: "@")
+
+messageList.set(textFormatters: [hashtagFormatter, mentionFormatter])
+```
+
+### setMentionAllLabel(_:_:)
+
+Customizes the label displayed for @all mentions.
+
+```swift
+@discardableResult
+public func setMentionAllLabel(_ title: String, _ subtitle: String) -> Self
+```
+
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `title` | `String` | The title for the @all mention |
+| `subtitle` | `String` | The subtitle for the @all mention |
+
+```swift
+import CometChatUIKitSwift
+
+let messageList = CometChatMessageList()
+
+// Customize the @all mention label
+messageList.setMentionAllLabel("Everyone", "Notify all members")
+```
+
+You can create a custom text formatter:
+
+```swift
+import Foundation
+import CometChatSDK
+import CometChatUIKitSwift
+
+class MyCustomTextFormatter: CometChatTextFormatter {
- func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
- return collectionData.count
+ override func getRegex() -> String {
+ return "(\\bsure\\b)"
}
-
- func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
- guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: CustomFooterViewCell.identifier, for: indexPath) as? CustomFooterViewCell else {
- return UICollectionViewCell()
- }
-
- cell.configure(with: collectionData[indexPath.row])
- return cell
+
+ override func getTrackingCharacter() -> Character {
+ return "#"
}
-
- func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
- return CGSize(width: 150, height: 40)
+
+ override func search(string: String, suggestedItems: ((_: [SuggestionItem]) -> ())? = nil) {
+ // This function would call an API or perform a local search
}
-}
-struct CollectionItem {
- let title: String
- let icon: UIImage?
-}
+ override func onScrollToBottom(suggestionItemList: [SuggestionItem], listItem: ((_: [SuggestionItem]) -> ())?) {
+ // This function would call the next page of an API
+ }
-class CustomFooterViewCell: UICollectionViewCell {
-
- static let identifier = "CustomCollectionViewCell"
-
- private let iconImageView: UIImageView = {
- let imageView = UIImageView()
- imageView.contentMode = .scaleAspectFit
- imageView.translatesAutoresizingMaskIntoConstraints = false
- return imageView
- }()
-
- private let titleLabel: UILabel = {
- let label = UILabel()
- label.font = UIFont.systemFont(ofSize: 14, weight: .medium)
- label.textColor = UIColor.purple
- label.translatesAutoresizingMaskIntoConstraints = false
- return label
- }()
-
- override init(frame: CGRect) {
- super.init(frame: frame)
- setupUI()
+ override func onItemClick(suggestedItem: SuggestionItem, user: User?, group: Group?) {
+ // Handle clicked item
}
-
- required init?(coder: NSCoder) {
- fatalError("init(coder:) has not been implemented")
+
+ override func handlePreMessageSend(baseMessage: BaseMessage, suggestionItemList: [SuggestionItem]) {
+ // Modify the message before it's sent
}
-
- private func setupUI() {
- backgroundColor = UIColor(white: 0.95, alpha: 1) // Light purple background
- layer.cornerRadius = 18
- clipsToBounds = true
-
- addSubview(iconImageView)
- addSubview(titleLabel)
-
- NSLayoutConstraint.activate([
- iconImageView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 8),
- iconImageView.centerYAnchor.constraint(equalTo: centerYAnchor),
- iconImageView.widthAnchor.constraint(equalToConstant: 20),
- iconImageView.heightAnchor.constraint(equalToConstant: 20),
-
- titleLabel.leadingAnchor.constraint(equalTo: iconImageView.trailingAnchor, constant: 5),
- titleLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -8),
- titleLabel.centerYAnchor.constraint(equalTo: centerYAnchor)
- ])
+
+ override func prepareMessageString(
+ baseMessage: BaseMessage,
+ regexString: String,
+ alignment: MessageBubbleAlignment = .left,
+ formattingType: FormattingType
+ ) -> NSAttributedString {
+ let attrString = NSMutableAttributedString(string: "SURE")
+ if alignment == .left {
+ // Received message styling
+ attrString.addAttribute(.foregroundColor, value: UIColor.blue, range: NSRange(location: 0, length: attrString.length))
+ } else {
+ // Sent message styling
+ attrString.addAttribute(.foregroundColor, value: UIColor.green, range: NSRange(location: 0, length: attrString.length))
+ }
+ attrString.addAttribute(.font, value: UIFont.boldSystemFont(ofSize: 18), range: NSRange(location: 0, length: attrString.length))
+ return attrString
}
-
- func configure(with model: CollectionItem) {
- iconImageView.image = model.icon
- titleLabel.text = model.title
+
+ override func onTextTapped(baseMessage: BaseMessage, tappedText: String, controller: UIViewController?) {
+ // Handle text tap action
}
}
```
-***
+---
+
+## AI Features
+
+Configure AI-powered features for the message list.
-#### SetDateSeparatorPattern
+### enableSmartReplies
-You can modify the date pattern of the message list date separator to your requirement using `setDateSeparatorPattern()`. This method accepts a function with a return type String. Inside the function, you can create your own pattern and return it as a String.
+Enables AI-powered smart reply suggestions.
-**Example**
+| | |
+|---|---|
+| Type | `Bool` |
+| Default | `false` |
-
+
+
+### Key Style Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `backgroundColor` | `UIColor` | `CometChatTheme.backgroundColor01` | Background color of the list |
+| `borderWidth` | `CGFloat` | `0` | Border width for the component |
+| `borderColor` | `UIColor` | `.clear` | Border color for the component |
+| `cornerRadius` | `CometChatCornerStyle?` | `nil` | Corner radius for the component |
+| `shimmerGradientColor1` | `UIColor` | `CometChatTheme.backgroundColor04` | First shimmer gradient color |
+| `shimmerGradientColor2` | `UIColor` | `CometChatTheme.backgroundColor03` | Second shimmer gradient color |
+| `emptyStateTitleColor` | `UIColor` | `CometChatTheme.textColorPrimary` | Empty state title color |
+| `emptyStateTitleFont` | `UIFont` | `CometChatTypography.Heading3.bold` | Empty state title font |
+| `emptyStateSubtitleColor` | `UIColor` | `CometChatTheme.textColorSecondary` | Empty state subtitle color |
+| `emptyStateSubtitleFont` | `UIFont` | `CometChatTypography.Body.regular` | Empty state subtitle font |
+| `errorStateTitleColor` | `UIColor` | `CometChatTheme.textColorPrimary` | Error state title color |
+| `errorStateTitleFont` | `UIFont` | `CometChatTypography.Heading3.bold` | Error state title font |
+| `newMessageIndicatorTextColor` | `UIColor?` | `nil` | New message indicator text color |
+| `newMessageIndicatorBackgroundColor` | `UIColor?` | `nil` | New message indicator background |
-
@@ -24,216 +28,232 @@ The MessageBubble structure can typically be broken down into the following view
5. **Bottom view**: This view can be used to extend the MessageBubble with additional elements, such as link previews or a 'load more' button for long messages. It's typically placed beneath the Content view.
-6. **Thread view**:This is where the thread reply icon and reply counts are displayed. It's located below the footer view.
+6. **Thread view**: This is where the thread reply icon and reply counts are displayed. It's located below the footer view.
7. **Footer view**: This is where the timestamp of the message and its delivery or read status are displayed. It's located at the bottom of the MessageBubble.
8. **Status Info view**: This is where the timestamp of the message and its delivery or read status are displayed. It's located inside the MessageBubble just below the content view.
-### Properties
-
-MessageTemplate provides you with methods that allow you to alter various properties of the MessageBubble. These properties include aspects such as the `type` and `category` of a message, the appearance and behavior of the header, content, and footer sections of the message bubble,
-
-1. **Type**
+---
- Using `setType()` you can set the type of CometChatMessage, This will map your MessageTemplate to the corresponding CometChatMessage. You can set the MessageTemplates Type using the following code snippet.
+## Properties
- ```csharp
+MessageTemplate provides you with methods that allow you to alter various properties of the MessageBubble. These properties include aspects such as the `type` and `category` of a message, the appearance and behavior of the header, content, and footer sections of the message bubble.
- let type = "custom_template"//replace this with your own custom type
+### 1. Type
- //Creating a custom message template
- let customMessageTemplate =
- CometChatMessageTemplate(category: category, type: type, contentView: { message, alignment, controller in
- return UIView() //replace this with your own UI for message list
+Using `setType()` you can set the type of CometChatMessage. This will map your MessageTemplate to the corresponding CometChatMessage. You can set the MessageTemplate's Type using the following code snippet:
- }, bubbleView: nil, headerView: nil, footerView: nil) { message, alignment, controller in
- return UIView() //replace this with your own UI for message composer
- } options: { message, group, controller in
- return [CometChatMessageOption]() //replace this with your own options
- }
- ```
+```swift
+let type = "custom_template" // Replace with your own custom type
+
+// Creating a custom message template
+let customMessageTemplate = CometChatMessageTemplate(
+ category: category,
+ type: type,
+ contentView: { message, alignment, controller in
+ return UIView() // Replace with your own UI for message list
+ },
+ bubbleView: nil,
+ headerView: nil,
+ footerView: nil
+) { message, alignment, controller in
+ return UIView() // Replace with your own UI for message composer
+} options: { message, group, controller in
+ return [CometChatMessageOption]() // Replace with your own options
+}
+```
-2. **Category**
+### 2. Category
Using `.setCategory()` you can set the category of a MessageTemplate. This will create a MessageTemplate with the specified category and link it with a CometChatMessage of the same category.
Please refer to our guide on [Message Categories](/sdk/ios/message-structure-and-hierarchy) for a deeper understanding of message categories.
-```csharp
-let category = "custom_category"//replace this with your own category
-
-//Creating a custom message template
-//You can also set UI for bubbleView, headerView and footerView instead of nil
-let customMessageTemplate =
- CometChatMessageTemplate(category: category, type: type, contentView: { message, alignment, controller in
- return UIView() //replace this with your own UI for message list
-
- }, bubbleView: nil, headerView: nil, footerView: nil) { message, alignment, controller in
- return UIView() //replace this with your own UI for message composer
- } options: { message, group, controller in
- return [CometChatMessageOption]() //replace this with your own options
- }
+```swift
+let category = "custom_category" // Replace with your own category
+
+// Creating a custom message template
+// You can also set UI for bubbleView, headerView and footerView instead of nil
+let customMessageTemplate = CometChatMessageTemplate(
+ category: category,
+ type: type,
+ contentView: { message, alignment, controller in
+ return UIView() // Replace with your own UI for message list
+ },
+ bubbleView: nil,
+ headerView: nil,
+ footerView: nil
+) { message, alignment, controller in
+ return UIView() // Replace with your own UI for message composer
+} options: { message, group, controller in
+ return [CometChatMessageOption]() // Replace with your own options
+}
```
-3. **Header View**
-
- The .`template.headerView` method allows you to assign a custom header view to the MessageBubble. By default, it is configured to display the sender's name.
+### 3. Header View
- ```swift
- var allTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates()
+The `template.headerView` method allows you to assign a custom header view to the MessageBubble. By default, it is configured to display the sender's name.
- for (index, template) in allTemplates.enumerated() {
- var template = template
- template.headerView = { (baseMessage: BaseMessage?, bubbleAlignment: MessageBubbleAlignment, viewController: UIViewController?) -> (UIView)? in
- return UIView()
+```swift
+var allTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates()
- }
- }
- ```
+for (index, template) in allTemplates.enumerated() {
+ var template = template
+ template.headerView = { (baseMessage: BaseMessage?, bubbleAlignment: MessageBubbleAlignment, viewController: UIViewController?) -> (UIView)? in
+ return UIView()
+ }
+}
+```
-4. **Content View**
+### 4. Content View
- The `template.contentView` method allows you to assign a custom content view to the MessageBubble. By default, it displays the [Text Bubble](/ui-kit/ios/message-bubble-styling#text-bubble), [Image Bubble](/ui-kit/ios/message-bubble-styling-styling#image-bubble), [File Bubble](/ui-kit/ios/message-bubble-styling-styling), [Audio Bubble](/ui-kit/ios/message-bubble-styling-styling#audio-bubble), or [Video Bubble](/ui-kit/ios/message-bubble-styling#video-bubble), depending on the message type.
+The `template.contentView` method allows you to assign a custom content view to the MessageBubble. By default, it displays the [Text Bubble](/ui-kit/ios/message-bubble-styling#text-bubble), [Image Bubble](/ui-kit/ios/message-bubble-styling#image-bubble), [File Bubble](/ui-kit/ios/message-bubble-styling), [Audio Bubble](/ui-kit/ios/message-bubble-styling#audio-bubble), or [Video Bubble](/ui-kit/ios/message-bubble-styling#video-bubble), depending on the message type.
- ```swift
- var allTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates()
+```swift
+var allTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates()
- for (index, template) in allTemplates.enumerated() {
- var template = template
- template.contentView = { (baseMessage: BaseMessage?, bubbleAlignment: MessageBubbleAlignment, viewController: UIViewController?) -> (UIView)? in
- return UIView()
+for (index, template) in allTemplates.enumerated() {
+ var template = template
+ template.contentView = { (baseMessage: BaseMessage?, bubbleAlignment: MessageBubbleAlignment, viewController: UIViewController?) -> (UIView)? in
+ return UIView()
}
- }
- ```
+}
+```
-5. **Footer View**
+### 5. Footer View
- The `template.footerView` method allows you to assign a custom Footer view to the MessageBubble. By default, it displays the receipt and timestamp.
+The `template.footerView` method allows you to assign a custom Footer view to the MessageBubble. By default, it displays the receipt and timestamp.
- ```swift
- var allTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates()
+```swift
+var allTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates()
- for (index, template) in allTemplates.enumerated() {
- var template = template
- template.footerView = { (baseMessage: BaseMessage?, bubbleAlignment: MessageBubbleAlignment, viewController: UIViewController?) -> (UIView)? in
- return UIView()
+for (index, template) in allTemplates.enumerated() {
+ var template = template
+ template.footerView = { (baseMessage: BaseMessage?, bubbleAlignment: MessageBubbleAlignment, viewController: UIViewController?) -> (UIView)? in
+ return UIView()
}
- }
- ```
+}
+```
-6. **Bottom View**
+### 6. Bottom View
- The `template.bottomView` method allows you to assign a custom Bottom view to the MessageBubble.By defuault is has buttons such as link previews or a 'load more' button for long messages.
+The `template.bottomView` method allows you to assign a custom Bottom view to the MessageBubble. By default, it has buttons such as link previews or a 'load more' button for long messages.
- ```swift
- var allTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates()
+```swift
+var allTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates()
- for (index, template) in allTemplates.enumerated() {
- var template = template
- template.bottomView = { (baseMessage: BaseMessage?, bubbleAlignment: MessageBubbleAlignment, viewController: UIViewController?) -> (UIView)? in
- return UIView()
+for (index, template) in allTemplates.enumerated() {
+ var template = template
+ template.bottomView = { (baseMessage: BaseMessage?, bubbleAlignment: MessageBubbleAlignment, viewController: UIViewController?) -> (UIView)? in
+ return UIView()
}
- }
- ```
+}
+```
-7. **Bubble View**
+### 7. Bubble View
- The `template.bubbleView` method allows you to assign a custom Bubble view to the MessageBubble. By default, headerView, contentView, and footerView together form a message bubble.
+The `template.bubbleView` method allows you to assign a custom Bubble view to the MessageBubble. By default, headerView, contentView, and footerView together form a message bubble.
- ```swift
- var allTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates()
+```swift
+var allTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates()
- for (index, template) in allTemplates.enumerated() {
- var template = template
- template.bubbleView = { (baseMessage: BaseMessage?, bubbleAlignment: MessageBubbleAlignment, viewController: UIViewController?) -> (UIView)? in
- return UIView()
+for (index, template) in allTemplates.enumerated() {
+ var template = template
+ template.bubbleView = { (baseMessage: BaseMessage?, bubbleAlignment: MessageBubbleAlignment, viewController: UIViewController?) -> (UIView)? in
+ return UIView()
}
- }
- ```
+}
+```
-8. **Options**
+### 8. Options
- The `template.options` lets you set the list of actions that a user can perform on a message. This includes actions like reacting to, editing, or deleting a message.
+The `template.options` lets you set the list of actions that a user can perform on a message. This includes actions like reacting to, editing, or deleting a message.
- ```csharp
- var allTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates()
- for (index, template) in allTemplates.enumerated() {
- var template = template
- template.options = { message, group, controller in
- let loggedInUser = CometChat.getLoggedInUser()
- let options = CometChatUIKit.getDataSource().getMessageOptions(loggedInUser: loggedInUser!, messageObject: message!, controller: controller, group: group)
+```swift
+var allTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates()
- return options
+for (index, template) in allTemplates.enumerated() {
+ var template = template
+ template.options = { message, group, controller in
+ let loggedInUser = CometChat.getLoggedInUser()
+ let options = CometChatUIKit.getDataSource().getMessageOptions(
+ loggedInUser: loggedInUser!,
+ messageObject: message!,
+ controller: controller,
+ group: group
+ )
+ return options
}
- allTemplates[index] = template
- }
- ```
+ allTemplates[index] = template
+}
+```
-***
+---
## Customization
Let's dive into how you can use the [properties](#properties) of MessageTemplate to customize an existing template or add a new one to the [MessageList](/ui-kit/ios/message-list) component.
-The First step is to fetch the list of existing templates when you want to modify or add to them. This can be done using the getAllMessageTemplates() method from the DataSource of the CometChatUIKit class.
+The first step is to fetch the list of existing templates when you want to modify or add to them. This can be done using the `getAllMessageTemplates()` method from the DataSource of the CometChatUIKit class:
-```javascript
-var messageTemplates : [CometChatMessageTemplate] = CometChatUIKit.getDataSource().getAllMessageTemplates()
+```swift
+var messageTemplates: [CometChatMessageTemplate] = CometChatUIKit.getDataSource().getAllMessageTemplates()
```
+---
+
### Existing Templates
-You will need to first get the MessageTemplates object for the type of message you want to customize. You will be customizing the TextMessage Bubble here. The code snippet to get the Text MessageTemplate is as follows.
+You will need to first get the MessageTemplates object for the type of message you want to customize. In this example, we'll customize the TextMessage Bubble. The code snippet to get the Text MessageTemplate is as follows:
-```swift custom_header_view
+
+
-```swift custom_bottom_view_file
+
-```swift custom_footer_view
+
-```swift custom_bubble_view
+
-```swift Swiftphp
+
-```swift custom_status_view
+
-```swift Swift
+
-***
+
+
-***
+
+
-List of properties exposed by OutgoingCallStyle
+#### OutgoingCallStyle Properties
| Property | Description | Code |
| ------------------------------ | --------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
@@ -230,15 +251,15 @@ List of properties exposed by OutgoingCallStyle
| `declineButtonBackgroundColor` | Sets the background color for the decline button in the outgoing call view. | `CometChatOutgoingCall.style.declineButtonBackgroundColor = UIColor()` |
| `declineButtonIconTint` | Sets the tint color for the decline button icon. | `CometChatOutgoingCall.style.declineButtonIconTint = UIColor()` |
| `declineButtonIcon` | Sets the icon for the decline button. | `CometChatOutgoingCall.style.declineButtonIcon = UIImage(systemName: "phone.down.fill")` |
-| `declineButtonCornerRadius` | Sets the corner radius for decline button. | `CometChatOutgoingCall.style.declineButtonCornerRadius: CometChatCornerStyle?` |
-| `declineButtonBorderColor` | Sets the border color for decline button. | `CometChatOutgoingCall.style.declineButtonBorderColor: UIColor?` |
-| `declineButtonBorderWidth` | Sets the border width for decline button. | `CometChatOutgoingCall.style.declineButtonBorderWidth: CGFloat?` |
+| `declineButtonCornerRadius` | Sets the corner radius for the decline button. | `CometChatOutgoingCall.style.declineButtonCornerRadius: CometChatCornerStyle?` |
+| `declineButtonBorderColor` | Sets the border color for the decline button. | `CometChatOutgoingCall.style.declineButtonBorderColor: UIColor?` |
+| `declineButtonBorderWidth` | Sets the border width for the decline button. | `CometChatOutgoingCall.style.declineButtonBorderWidth: CGFloat?` |
-***
+---
### Functionality
-These are a set of small functional customizations that allow you to fine-tune the overall experience of the component.
+These are small functional customizations that allow you to fine-tune the overall experience of the component.
| Property | Description | Code |
| ---------------------- | --------------------------------------- | ------------------------------- |
@@ -247,11 +268,11 @@ These are a set of small functional customizations that allow you to fine-tune t
### Advanced
-For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component.
+For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your own views, layouts, and UI elements and then incorporate those into the component.
-#### SetAvatarVieww
+#### SetAvatarView
-With this function, you can assign a custom view to the avatar of OutgoingCall Component.
+With this function, you can assign a custom view to the avatar of the OutgoingCall Component.
+
-You can create a CustomAvatarView as a custom `UIView`.
+You can create a `CustomAvatarView` as a custom `UIView`:
-```swift swift
+
+
-You can create a CustomCancelView as a custom `UIView`.
+You can create a `CustomCancelView` as a custom `UIView`:
+
-You can create a `CustomTitleView` as a custom `UIView`. Which we will inflate in `setTitleView()`
+You can create a `CustomTitleView` as a custom `UIView`:
+
-You can create a CustomSubtitleView as a custom `UIView`.
+You can create a `CustomSubtitleView` as a custom `UIView`:
-
+---
-***
+## Try It
-## **Download the CometChat Demo App**
+
](https://link.cometchat.com/ios-demo-app)
+Before integrating the CometChat UI Kit, familiarize yourself with the key concepts and features offered by CometChat's platform:
-**Or Scan the QR Code**
+- Review the [Key Concepts](/fundamentals/key-concepts) to understand essential terminology and features
+- Follow the [Getting Started Guide](/ui-kit/ios/getting-started) for detailed steps on initial setup and integration
- 
+
-
+
-***
+
+
+
-- code for custom view:
+Custom view implementation:
+
+
+---
diff --git a/ui-kit/ios/sound-manager.mdx b/ui-kit/ios/sound-manager.mdx
index a9fdcd3cc..ea6bc926a 100644
--- a/ui-kit/ios/sound-manager.mdx
+++ b/ui-kit/ios/sound-manager.mdx
@@ -1,42 +1,96 @@
---
title: "Sound Manager"
+sidebarTitle: "Sound Manager"
+description: "Manage and play audio for messages and calls in CometChat UI Kit for iOS"
---
## 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.
+`CometChatSoundManager` is a helper class that manages audio playback in the CometChat UI Kit. It handles sound events for incoming and outgoing messages and calls, supporting both default sounds and custom audio files.
+
+---
## Methods
### Play Sound
-The SoundManager plays pre-defined or custom sounds based on user interactions with the chat interface. If no custom sound file is provided, the default sound is played.
+The `play(sound:customSound:)` method triggers audio playback based on user interactions with the chat interface. If no custom sound file is provided, the default sound for that event type is played.
-Here are the available methods for triggering sound playback:
+```swift
+play(sound: Sound, customSound: URL?)
+```
-* `play(sound: Sound, customSound: URL?)`: This method plays different types of sounds for incoming and outgoing calls and messages.Moreover, it can play a customized sound for a specific URL when triggered.
+| Parameter | Type | Description |
+| ----------- | ------ | ------------------------------------------------------------------------------------------------ |
+| sound | Sound | The type of sound event (e.g., `.incomingMessage`, `.outgoingMessage`, `.incomingCall`, `.outgoingCall`) |
+| customSound | URL? | Optional URL to a custom sound file. If `nil`, the default sound is used. |
### Pause Sound
-The SoundManager can pause different types of sounds for incoming and outgoing calls and messages using the following method:
+The `pause()` method stops any sound currently being played by the SoundManager.
+
+```swift
+pause()
+```
-* `pause()`: This method pauses any sound currently being played.
+---
## Usage
-Here is how to use CometChatSoundManager:
+### Playing Default Sounds
+
+Play the default sound for an incoming message:
-```php
-// Play sound:
+
-## Customization
+---
-Customizing Colors
+## Customization
-Override specific color attributes globally in CometChatTheme. This is equivalent to overriding attributes in Android's themes.xml.
+### Customizing Colors
-Example: Setting Primary Color
+Override specific color attributes globally in `CometChatTheme`. This is equivalent to overriding attributes in Android's `themes.xml`.
+
+---
diff --git a/ui-kit/ios/threaded-messages-header.mdx b/ui-kit/ios/threaded-messages-header.mdx
index ac5a95af2..6f9b50893 100644
--- a/ui-kit/ios/threaded-messages-header.mdx
+++ b/ui-kit/ios/threaded-messages-header.mdx
@@ -1,27 +1,62 @@
---
title: "Threaded Messages Header"
+sidebarTitle: "Threaded Messages Header"
+description: "Display and customize the header for threaded message conversations in CometChat UI Kit for iOS"
---
-## Overview
-
-ThreadedMessages is a [Composite Component](/ui-kit/ios/components-overview#composite-components) that displays all replies made to a particular message in a conversation. By default, the parent message will be displayed at the top, the message composer will be at the bottom and between them a message list will contain all replies.
+The `CometChatThreadedMessageHeader` component displays the header for threaded message conversations showing parent message info. By default, the parent message appears at the top, the message composer is at the bottom, and a message list containing all replies is displayed between them.
+
+
-The Users component is composed of the following BaseComponents:
-
-| Components | Description |
-| -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
-| [ListBase](/ui-kit/ios/list-base) | a reusable container component having title, search box, customisable background and a List View |
-| [ListItem](/ui-kit/ios/list-item) | a component that renders data obtained from a User object on a Tile having a title, subtitle, leading and trailing view |
-
-***
+
+
-1. ##### set(onItemClick:)
+---
-`set(OnItemClick:)` is triggered when you click on a ListItem of the users component. This `set(OnItemClick:)` method proves beneficial when a user intends to customize the on-click behavior in CometChatUsers.
+## Minimal Render
-
+
-***
+---
-2. ##### set(OnItemLongClick:)
+## Filtering
-`set(OnItemLongClick:)` is triggered when you long press on a ListItem of the users component. This `set(OnItemLongClick:)` method proves beneficial when a user intends to additional functionality on long press on list item in CometChatUsers.
+Use `UsersRequest.UsersRequestBuilder` to filter which users appear in the list. The builder pattern allows chaining multiple filter conditions.
-
-
-
-List of properties exposed by MessageListStyle
-
-| **Property** | **Description** | **Code** |
-| ----------------------------------- | ----------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
-| **List Item Selected Image** | Image shown when a list item is selected. | `CometChatUsers.style.listItemSelectedImage = UIImage()` |
-| **List Item Deselected Image** | Image shown when a list item is deselected. | `CometChatUsers.style.listItemDeSelectedImage = UIImage()` |
-| **Search Icon Tint Color** | Tint color for the search icon in the search bar. | `CometChatUsers.style.searchIconTintColor = UIColor()` |
-| **Search Bar Style** | Style of the search bar (e.g., default, prominent). | `CometChatUsers.style.searchBarStyle = .default` |
-| **Search Tint Color** | Tint color for the search bar elements. | `CometChatUsers.style.searchTintColor = UIColor?` |
-| **Search Bar Tint Color** | Background color for the search bar (excluding text input). | `CometChatUsers.style.searchBarTintColor = UIColor?` |
-| **Placeholder Text Color** | Color of the placeholder text in the search bar. | `CometChatUsers.style.searchBarPlaceholderTextColor = UIColor?` |
-| **Placeholder Text Font** | Font of the placeholder text in the search bar. | `CometChatUsers.style.searchBarPlaceholderTextFont = UIFont?` |
-| **Search Bar Text Color** | Color of the entered text in the search bar. | `CometChatUsers.style.searchBarTextColor = UIColor?` |
-| **Search Bar Text Font** | Font of the entered text in the search bar. | `CometChatUsers.style.searchBarTextFont = UIFont?` |
-| **Search Bar Background Color** | Background color of the search bar’s text input area. | `CometChatUsers.style.searchBarBackgroundColor = UIColor?` |
-| **Cancel Icon Tint Color** | Tint color for the cancel button in the search bar. | `CometChatUsers.style.searchBarCancelIconTintColor = UIColor?` |
-| **Cross Icon Tint Color** | Tint color for the clear (cross) button in the search bar. | `CometChatUsers.style.searchBarCrossIconTintColor = UIColor?` |
-| **Background Color** | Background color for the entire screen or view. | `.backgroundColor = CometChatTheme.backgroundColor01` |
-| **Border Width** | Border width for the search bar or container. | `CometChatUsers.style.borderWidth = 0` |
-| **Border Color** | Color of the border, default is clear. | `CometChatUsers.style.borderColor = .clear` |
-| **Corner Radius** | Corner radius for search bar or other elements. | `CometChatUsers.style.cornerRadius = CometChatCornerStyle.init(cornerRadius: 0)` |
-| **Title Text Color** | Text color for title elements within the list or navigation bar. | `CometChatUsers.style.titleColor = CometChatTheme.textColorPrimary` |
-| **Title Font** | Font for title text. | `CometChatUsers.style.titleFont = CometChatTypography.Heading4.medium` |
-| **Large Title Text Color** | Text color for large titles. | `CometChatUsers.style.largeTitleColor = CometChatTheme.textColorPrimary` |
-| **Large Title Font** | Font for large titles. | `CometChatUsers.style.largeTitleFont = UIFont?` |
-| **Navigation Bar Tint Color** | Tint color for the navigation bar background. | `CometChatUsers.style.navigationBarTintColor = CometChatTheme.backgroundColor01` |
-| **Navigation Bar Items Tint Color** | Tint color for navigation bar items (buttons, icons). | `CometChatUsers.style.navigationBarItemsTintColor = CometChatTheme.iconColorHighlight` |
-| **Error Title Font** | Font for the error title displayed in UI. | `CometChatUsers.style.errorTitleTextFont = CometChatTypography.Heading3.bold` |
-| **Error Title Text Color** | Text color for the error title. | `CometChatUsers.style.errorTitleTextColor = CometChatTheme.textColorPrimary` |
-| **Error Subtitle Font** | Font for the subtitle of error messages. | `CometChatUsers.style.errorSubTitleFont = CometChatTypography.Body.regular` |
-| **Error Subtitle Text Color** | Text color for the subtitle of error messages. | `CometChatUsers.style.errorSubTitleTextColor = CometChatTheme.textColorSecondary` |
-| **Retry Button Text Color** | Text color for the retry button in error states. | `CometChatUsers.style.retryButtonTextColor = CometChatTheme.buttonTextColor` |
-| **Retry Button Text Font** | Font for the retry button text. | `CometChatUsers.style.retryButtonTextFont = CometChatTypography.Button.medium` |
-| **Retry Button Background Color** | Background color for the retry button. | `CometChatUsers.style.retryButtonBackgroundColor = CometChatTheme.primaryColor` |
-| **Retry Button Border Color** | Border color for the retry button. | `CometChatUsers.style.retryButtonBorderColor = .clear` |
-| **Retry Button Border Width** | Border width for the retry button. | `CometChatUsers.style.retryButtonBorderWidth = 0` |
-| **Retry Button Corner Radius** | Corner radius for the retry button. | `CometChatUsers.style.retryButtonCornerRadius = CometChatCornerStyle?` |
-| **Empty State Title Font** | Font for the empty state title (when no users/items are present). | `CometChatUsers.style.emptyTitleTextFont = CometChatTypography.Heading3.bold` |
-| **Empty State Title Color** | Text color for the empty state title. | `CometChatUsers.style.emptyTitleTextColor = CometChatTheme.textColorPrimary` |
-| **Empty Subtitle Font** | Font for the subtitle in the empty state. | `CometChatUsers.style.emptySubTitleFont = CometChatTypography.Body.regular` |
-| **Empty Subtitle Text Color** | Text color for the subtitle in the empty state. | `CometChatUsers.style.emptySubTitleTextColor = CometChatTheme.textColorSecondary` |
-| **Table View Separator Color** | Color for the table view separator. | `CometChatUsers.style.tableViewSeparator = .clear` |
-| **List Item Title Text Color** | Text color for list item titles. | `CometChatUsers.style.listItemTitleTextColor = CometChatTheme.textColorPrimary` |
-| **List Item Title Font** | Font for list item titles. | `CometChatUsers.style.listItemTitleFont = CometChatTypography.Heading4.medium` |
-| **List Item Subtitle Text Color** | Text color for list item subtitles. | `CometChatUsers.style.listItemSubTitleTextColor = CometChatTheme.textColorSecondary` |
-| **List Item Subtitle Font** | Font for list item subtitles. | `CometChatUsers.style.listItemSubTitleFont = CometChatTypography.Body.regular` |
-| **List Item Background** | Background color for individual list items. | `CometChatUsers.style.listItemBackground = .clear` |
-| **List Item Border Width** | Border width for individual list items. | `CometChatUsers.style.listItemBorderWidth = 0` |
-| **List Item Border Color** | Border color for individual list items. | `CometChatUsers.style.listItemBorderColor = CometChatTheme.borderColorLight` |
-| **List Item Corner Radius** | Corner radius for list items. | `CometChatUsers.style.listItemCornerRadius = CometChatCornerStyle.init(cornerRadius: 0)` |
-| **Selection Image Tint Color** | Tint color for selection indicator in list items. | `CometChatUsers.style.listItemSelectionImageTint = CometChatTheme.iconColorHighlight` |
-| **Selected Background Color** | Background color for selected list items. | `CometChatUsers.style.listItemSelectedBackground = .clear` |
-| **Deselected Image Tint Color** | Tint color for the deselected state image. | `CometChatUsers.style.listItemDeSelectedImageTint = CometChatTheme.borderColorDefault` |
-| **Header Title Color** | Text color for section header titles in the list. | `CometChatUsers.style.headerTitleColor = CometChatTheme.textColorHighlight` |
-| **Header Title Font** | Font for section header titles. | `CometChatUsers.style.headerTitleFont = CometChatTypography.Heading4.medium` |
-
-***
-
-### Functionality
-
-These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements.
-
-Below is a list of customizations along with corresponding code snippets
-
-| Method | Description | Code |
-| -------------------------- | --------------------------------------------------------------------- | ---------------------------------------------------------------- |
-| set(userRequestBuilder:) | Sets a custom request builder for fetching users. | `.set(userRequestBuilder: UsersRequest.UsersRequestBuilder())` |
-| set(searchRequestBuilder:) | Sets a custom request builder for searching users. | `.set(searchRequestBuilder: UsersRequest.UsersRequestBuilder())` |
-| set(searchKeyword:) | Sets a search keyword for filtering users. | `.set(searchKeyword: "John")` |
-| hideErrorView | Hides the error state view. | `hideErrorView = true` |
-| hideNavigationBar | Hides or shows the navigation bar. | `hideNavigationBar = true` |
-| hideSearch | Hides the search bar. | `hideSearch = true` |
-| hideBackButton | Hides the back button. | `hideBackButton = true` |
-| hideLoadingState | Hides the loading state indicator. | `hideLoadingState = true` |
-| hideUserStatus | Hides the online/offline status of users. | `hideUserStatus = true` |
-| hideSectionHeader | Hides the section header for table view indicating initials of users. | `hideSectionHeader = true` |
-
-***
-
-### Advance
-
-For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component.
-
-***
-
-#### SetOptions
-
-You can define custom options for each user using .set(options:). This method allows you to return an array of CometChatUserOption based on the user object.
-
-
-
-
-You can indeed create a custom listitem UIView file named `Custom_User_ListItem_View` for more complex or unique list items.
+### leadingView
-Afterwards, seamlessly integrate this `Custom_User_ListItem_View` UIView file into the `.setListItemView` method within **CometChatUsers()**.
-
-You can create a `CustomListItemView` as a custom `UIView`. Which we will inflate in `setListItemView()`
-
-```swift swift
+Customize the leading view (avatar area) of a user cell.
+```swift
import UIKit
import CometChatUIKitSwift
+import CometChatSDK
-class CustomListItem: UIView {
- // Initialize UI components
- private var profileImageView: CometChatAvatar = {
- let imageView = CometChatAvatar(image: UIImage())
- imageView.translatesAutoresizingMaskIntoConstraints = false // Important for manual layout
- return imageView
- }()
-
- private var nameLabel: UILabel = {
- let label = UILabel()
- label.translatesAutoresizingMaskIntoConstraints = false // Important for manual layout
- return label
- }()
+let users = CometChatUsers()
- override init(frame: CGRect) {
- super.init(frame: frame)
- setupUI()
- }
-
- required init?(coder aDecoder: NSCoder) {
- fatalError("init(coder:) has not been implemented")
- }
-
- private func setupUI() {
- addSubview(profileImageView)
- addSubview(nameLabel)
-
- NSLayoutConstraint.activate([
- // Profile image constraints
- profileImageView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 8),
- profileImageView.centerYAnchor.constraint(equalTo: centerYAnchor),
- profileImageView.widthAnchor.constraint(equalToConstant: 40),
- profileImageView.heightAnchor.constraint(equalToConstant: 40),
-
- nameLabel.leadingAnchor.constraint(equalTo: profileImageView.trailingAnchor, constant: 8),
- nameLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -8),
- nameLabel.centerYAnchor.constraint(equalTo: centerYAnchor)
- ])
- }
-
- func set(user: User) {
- var avatarURL: String?
- if let group = conversation.conversationWith as? Group {
- nameLabel.text = group.name
- avatarURL = group.icon
- }
-
- if let user = conversation.conversationWith as? User {
- nameLabel.text = user.name
- avatarURL = user.avatar
- }
-
-
-
-
- self.profileImageView.setAvatar(avatarUrl: avatarURL, with: nameLabel.text)
- }
-}
-```
-
-***
-
-#### SetLeadingView
-
-You can modify the leading view of a user cell using .set(leadingView:).
-
-
+
-You can create a `CustomLeadingView` as a custom `UIView`. Which we will inflate in `setLeadingView()`
+You can create a `CustomLeadingView` as a custom `UIView`:
-
+
-You can create a `CustomTitleView` as a custom `UIView`. Which we will inflate in `setTitleView()`
+You can create a `CustomTitleView` as a custom `UIView`:
-
+
-You can modify the trailing view of a user cell using .set(trailView:).
+You can create a `CustomSubtitleView` as a custom `UIView`:
-
+
-You can create a `CustomTrailView` as a custom `UIView`. Which we will inflate in `setTrailView()`
+You can create a `CustomTrailView` as a custom `UIView`:
-
+
-You can seamlessly integrate this `CustomSubtitleView` UIView file into the `.set(subtitleView:)` method within CometChatUsers.
-
-
+
+
+### Key Style Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `backgroundColor` | `UIColor` | `CometChatTheme.backgroundColor01` | Background color |
+| `titleColor` | `UIColor` | `CometChatTheme.textColorPrimary` | Navigation title color |
+| `titleFont` | `UIFont` | `CometChatTypography.Heading4.medium` | Navigation title font |
+| `listItemTitleTextColor` | `UIColor` | `CometChatTheme.textColorPrimary` | User name color |
+| `listItemTitleFont` | `UIFont` | `CometChatTypography.Heading4.medium` | User name font |
+| `listItemSubTitleTextColor` | `UIColor` | `CometChatTheme.textColorSecondary` | Status text color |
+| `listItemSubTitleFont` | `UIFont` | `CometChatTypography.Body.regular` | Status text font |
+| `listItemBackground` | `UIColor` | `.clear` | List item background |
+| `searchBarBackgroundColor` | `UIColor?` | `nil` | Search bar background |
+| `searchBarTextColor` | `UIColor?` | `nil` | Search bar text color |
+| `headerTitleColor` | `UIColor` | `CometChatTheme.textColorHighlight` | Section header color |
+| `headerTitleFont` | `UIFont` | `CometChatTypography.Heading4.medium` | Section header font |
+
+### Customization Matrix
+
+| What to change | Where | Property/API | Example |
+|----------------|-------|--------------|---------|
+| Background color | Style | `backgroundColor` | `UIColor.systemBackground` |
+| Title appearance | Style | `titleColor`, `titleFont` | Custom colors and fonts |
+| List item look | Style | `listItemBackground` | `UIColor.white` |
+| Avatar appearance | Style | `avatarStyle` | `AvatarStyle()` with custom radius |
+| Search bar | Style | `searchBarBackgroundColor` | Custom background |
+| Hide search | Property | `hideSearch` | `users.hideSearch = true` |
+| Hide status | Property | `hideUserStatus` | `users.hideUserStatus = true` |
+| Custom row | View Slot | `set(listItemView:)` | See Custom View Slots |
+
+---
+
+## Props
+
+All props are optional. Sorted alphabetically.
+
+### avatarStyle
+
+Customizes the appearance of avatars in user list items.
+
+| | |
+|---|---|
+| Type | `AvatarStyle` |
+| Default | `AvatarStyle()` |
+
+```swift
+import CometChatUIKitSwift
+
+let users = CometChatUsers()
+
+let avatarStyle = AvatarStyle()
+avatarStyle.backgroundColor = UIColor.systemBlue
+avatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 8)
+avatarStyle.borderWidth = 1
+avatarStyle.borderColor = UIColor.systemGray4
+
+users.set(avatarStyle: avatarStyle)
+```
+
+### hideBackButton
+
+Hides the back button in the navigation bar.
+
+| | |
+|---|---|
+| Type | `Bool` |
+| Default | `false` |
+
+### hideErrorView
+
+Hides the error state view.
+
+| | |
+|---|---|
+| Type | `Bool` |
+| Default | `false` |
+
+### hideLoadingState
+
+Hides the loading state indicator.
-
-
+`CometChatAIAssistantChat` is a standalone AI chat panel. It composes an internal message header, message list, and message composer into a self-contained AI conversation experience. It requires a `CometChat.User` representing the AI agent.
-
+
+ );
}
-
```
-
+
-
-
- );
+## Minimal Render
+
+```tsx lines
+import { useState, useEffect } from "react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";
+
+function AIAssistantDemo() {
+ const [agent, setAgent] = useState
+
+
+```tsx lines
+import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";
-export function AIAssistantChatDemo() {
- const [agent, setAgent] = React.useState
+
-
+
-
+ return
-
- );
+ if (!agent) return null;
+
+ return (
+
-
- );
+ return (
+
+
+
+```css lines
.cometchat-ai-assistant-chat
.cometchat-ai-assistant-chat__suggested-message-pill {
- background: #30a46c;
- color: #ffffff;
- text-align: center;
- font-family: "Times New Roman";
- font-size: 9px;
- font-style: normal;
- font-weight: 400;
- line-height: 120%;
+ background: #30a46c;
+ color: #ffffff;
+ font-size: 9px;
}
.cometchat-ai-assistant-chat
.cometchat-ai-assistant-chat__suggested-message-pill
.cometchat-ai-assistant-chat__suggested-message-icon {
- background: #ffffff;
- width: 9.55px;
- height: 9.55px;
+ background: #ffffff;
+ width: 9.55px;
+ height: 9.55px;
}
+
.cometchat-ai-assistant-chat
.cometchat-ai-assistant-chat__header-auxiliary-view
.cometchat-button
.cometchat-button__icon-default {
- background: #30a46c;
+ background: #30a46c;
}
```
-Hello
}` |
+| Change colors, fonts, spacing | Global CSS | Target `.cometchat-ai-assistant-chat` class | `.cometchat-ai-assistant-chat .cometchat-ai-assistant-chat__suggested-message-pill { background: #30a46c; }` |
-These props tailor the experience. Most message options (copy/edit/delete/react, receipts, date separators, etc.) are disabled by default for assistant chats.
+---
-
-
+| Key | Value |
+| --- | --- |
+| Type | `React.JSX.Element` |
+| Default | `undefined` |
-
-
+### headerSubtitleView
-
-
+---
-
-
- ) : null;
-}
-```
+| Key | Value |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-
-
- ) : null;
-}
-```
+---
-
-
+
-## Smart Replies
-
-Smart Replies are AI-generated responses to messages. They can predict what a user might want to say next by analyzing the context of the conversation. This allows for quicker and more convenient responses, especially on mobile devices.
+### Smart Replies
-For a comprehensive understanding and guide on implementing and using the Smart Replies, refer to our specific guide on the [Smart Replies](/fundamentals/ai-user-copilot/smart-replies).
+AI-generated response suggestions based on conversation context. See [Smart Replies](/fundamentals/ai-user-copilot/smart-replies).
-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/react/message-composer) Component of UI Kits.
+Auto-integrates into the Action Sheet of [MessageComposer](/ui-kit/react/message-composer) when activated.
-## Conversation Summary
+### Conversation Summary
-The Conversation Summary feature provides concise summaries of long conversations, allowing users to catch up quickly on missed chats. This feature uses natural language processing to determine the main points in a conversation.
+AI-generated recap of long conversations. See [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary).
-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 [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/react/message-composer) Component of UI Kits.
+Auto-integrates into the Action Sheet of [MessageComposer](/ui-kit/react/message-composer) when activated.
+
+## Next Steps
+
+
+ 
-This layout includes:
-
-1. Sidebar (Conversation List) – Users and groups
-2. Message View – Real-time messages for the selected conversation
-3. Message Composer – Input for sending text and media
-
-***
-
-## Prerequisites
-
-- Astro project set up
-- React integration added to Astro
-- CometChat credentials
-
-Loading chat…
;
- if (phase === "error") {
- return (
-
- CometChat error: {errorMsg}
-
- );
- }
-
- return (
-
- {/* LEFT: conversations */}
-
- Import the island and styles, then hydrate the component on the client.
-
- ```astro src/pages/index.astro
- ---
- import ChatApp from "../components/ChatApp.jsx";
- import "../styles/globals.css";
- import "../styles/cometchat-layout.css";
- ---
-
-
-
-
- CometChat + Astro
-
-
-
- The CSS files `globals.css` and `cometchat-layout.css` are included in the sample. Ensure your layout CSS sets a two‑panel flex container and sizes the sidebar.
-
-
-
-
- ```bash
- npm run dev
- ```
-
-
- Open your app and verify you can select conversations on the left and exchange messages on the right.
-
-
-
-
-***
-
-## Troubleshooting
-
-
-
-Ensure the component is rendered as a React island (`client:only=\"react\"`) so it runs only in the browser.
-
+ ) : (
+
+ );
+}
+```
+
+
+
-
+ });
+ })
+ .catch((error) => console.error("Initialization failed", error));
+ }, []);
+
+ if (!user) return Initializing Chat...
;
+
+ return (
+
+
- );
- }
- ```
-
-
-
+ {
+ let item: any = activeItem;
+ if (activeItem instanceof CometChat.Conversation) {
+ item = activeItem.getConversationWith();
+ }
+ if (item instanceof CometChat.User) {
+ setSelectedUser(item);
+ setSelectedGroup(undefined);
+ } else if (item instanceof CometChat.Group) {
+ setSelectedUser(undefined);
+ setSelectedGroup(item);
+ } else {
+ setSelectedUser(undefined);
+ setSelectedGroup(undefined);
+ }
+ }}
+ />
+
- {/* RIGHT: header + list (scrolling) + composer */}
+ {selectedUser || selectedGroup ? (
- {selectedUser || selectedGroup ? (
- <>
-
-
-
-
- Select a conversation to start
- )}
+ Select a conversation to start chatting
+ )}
+ 
-
-
+This guide walks you through adding CometChat to an Astro app using React islands. By the end you'll have a working chat UI.
-***
+
+
-**Recommended for:**
-
-* Desktop-first applications
-* Apps requiring a **rich user experience** with seamless navigation
-* Platforms supporting both **individual and group messaging**
-* **Mobile-friendly** apps needing a **tap-to-open message view**
+
+ 
-**Recommended for:**
-
-* **Support chat applications** – Direct user-agent communication.
-* **Apps focusing on direct messaging** – No distractions from other conversations.
-* **Community or group chat applications** – A structured way to interact in groups.
-* **Mobile-first applications** – Designed for compact and dedicated messaging experiences.
+
+ 
-**Recommended for:**
-
-* **Apps requiring structured navigation** – Clearly separate chat, calls, and settings.
-* **Multi-feature chat apps** – Supporting different functionalities in an organized way.
-* **Mobile-first applications** – Ideal for apps needing tab-based UI for easy access to features.
-* **Support & enterprise chat solutions** – Perfect for help desks, business chat platforms, and customer support apps.
+
+
-**Key Components**
-
-1. Chat Header – recipient details and status
-2. Message View – history and live messages
-3. Message Composer – text, media, attachments
-
-***
-
-## Prerequisites
-
-- Astro project with React integration
-- CometChat credentials in `.env`
-
-Initializing Chat...
;
+
+ return (
+ <>
+ {selectedUser || selectedGroup ? (
+
+
+ ) : (
+
+ Set a user or group UID in OneToOneChat.tsx to start chatting
+
+ )}
+
+ );
+}
+```
- // 3) Ensure logged in as correct user
- await ensureLogin(LOGIN_UID);
+
+
-
- );
-
- if (phase === "error") return (
- Loading…
-
-
- );
-
- if (!peer) return Error: {errorMsg}
- Invalid target user.
;
-
- return (
-
-
- );
- }
- ```
-
-
- 
+ 
-Layout structure:
-
-1. Sidebar – conversations, users, groups, or call logs
-2. Messages – header, list, and composer
-3. Tabs – switch between Chats, Calls, Users, and Groups
-
-***
-
-## Prerequisites
-
-- Astro project with React integration
-- CometChat credentials in `.env`
-
-
- {items.map((t) => {
- const key = t.name.toLowerCase();
- const active = activeTab === key || hover === key;
- return (
+Three sections working together:
+
+1. **Tab bar** — switches between Chats, Calls, Users, and Groups
+2. **Sidebar** — renders the list for the active tab
+3. **Message view** — header + messages + composer for the selected item
+
+
+---
+
+## Step 1 — Create the Tab Component
+
+
+
+
+
+
+
+
+
+
+Tab icons need to be placed in `public/assets/`. Download them from the [CometChat UI Kit assets folder on GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app/src/assets).
+
+
+
+
+
+
+
+
+
+
+
+```tsx title="CometChatTabs.tsx" lines
+import { useState } from "react";
+import "./CometChatTabs.css";
+
+const chatsIcon = "/assets/chats.svg";
+const callsIcon = "/assets/calls.svg";
+const usersIcon = "/assets/users.svg";
+const groupsIcon = "/assets/groups.svg";
+
+export const CometChatTabs = (props: {
+ onTabClicked?: (tabItem: { name: string; icon?: string }) => void;
+ activeTab?: string;
+}) => {
+ const { onTabClicked = () => {}, activeTab } = props;
+ const [hoverTab, setHoverTab] = useState("");
+
+ const tabItems = [
+ { name: "CHATS", icon: chatsIcon },
+ { name: "CALLS", icon: callsIcon },
+ { name: "USERS", icon: usersIcon },
+ { name: "GROUPS", icon: groupsIcon },
+ ];
+
+ return (
+
+ {tabItems.map((tabItem) => {
+ const isActive =
+ activeTab === tabItem.name.toLowerCase() ||
+ hoverTab === tabItem.name.toLowerCase();
+
+ return (
+
onTabClicked(tabItem)}
+ >
+
- This component renders the sidebar list based on the active tab and shows the message panel on the right.
-
- ```javascript src/components/TabbedChat.jsx
- import { useEffect, useState } from "react";
- import {
- CometChatUIKit,
- CometChatConversations,
- CometChatUsers,
- CometChatGroups,
- CometChatCallLogs,
- CometChatMessageHeader,
- CometChatMessageList,
- CometChatMessageComposer,
- } from "@cometchat/chat-uikit-react";
- import "@cometchat/chat-uikit-react/css-variables.css";
- import CometChatTabs from "./CometChatTabs.jsx";
- import { initCometChat } from "../lib/cometchat-init.js";
-
- const LOGIN_UID = import.meta.env.PUBLIC_COMETCHAT_LOGIN_UID; // UID of the user to log in as
-
- export default function TabbedChat() {
- const [phase, setPhase] = useState("boot"); // boot | ready | error
- const [errorMsg, setErrorMsg] = useState("");
-
- const [activeTab, setActiveTab] = useState("chats"); // chats | calls | users | groups
-
- const [selectedUser, setSelectedUser] = useState(null);
- const [selectedGroup, setSelectedGroup] = useState(null);
-
- useEffect(() => {
- let cancelled = false;
- (async () => {
- try {
- // Use the centralized init function
- await initCometChat();
-
- // Check if current logged-in user matches the desired UID
- let me = await CometChatUIKit.getLoggedinUser();
- if (!me || me.getUid() !== LOGIN_UID) {
- // Logout current user if different UID, then login with correct UID
- if (me) {
- await CometChatUIKit.logout();
- }
- me = await CometChatUIKit.login(LOGIN_UID);
- }
-
- if (!cancelled) setPhase("ready");
- } catch (e) {
- console.error("TabbedChat init error:", e);
- if (!cancelled) {
- setErrorMsg(String(e?.message || e));
- setPhase("error");
- }
- }
- })();
-
- return () => { cancelled = true; };
- }, [LOGIN_UID]); // Add LOGIN_UID as dependency so effect runs when UID changes
-
- const handleSelect = (item) => {
- // item can be Conversation, User, Group, or Call
- const maybeConv = item?.getConversationWith ? item.getConversationWith() : null;
- const picked = maybeConv || item;
-
- if (picked?.getUid) {
- setSelectedUser(picked);
- setSelectedGroup(null);
- setActiveTab("chats"); // keep in chats context
- } else if (picked?.getGuid) {
- setSelectedGroup(picked);
- setSelectedUser(null);
- setActiveTab("chats"); // show messages in same area
- } else {
- // For calls tab, we don’t open message panel
- setSelectedUser(null);
- setSelectedGroup(null);
- }
- };
-
- if (phase === "boot") return { setActiveItem(item); onSelectorItemClicked(item, "updateSelectedItemCall"); }}
+ />
+ )}
+ {activeTab === "users" && (
+ { setActiveItem(item); onSelectorItemClicked(item, "updateSelectedItemUser"); }}
+ />
+ )}
+ {activeTab === "groups" && (
+ { setActiveItem(item); onSelectorItemClicked(item, "updateSelectedItemGroup"); }}
+ />
+ )}
+
+ )}
+ setActiveTab(item.name.toLowerCase())} />
+
+ );
+};
+```
+
+
+
+
+```css title="CometChatSelector.css" lines
+.selector-wrapper .cometchat-conversations .cometchat-list__header-menu .cometchat-button__icon {
+ background: var(--cometchat-icon-color-primary);
+}
+.cometchat-conversations .cometchat-list__header-menu .cometchat-button__icon:hover {
+ background: var(--cometchat-icon-color-highlight);
+}
+.cometchat-list__header-search-bar { border-right: none; }
+.cometchat .cometchat-menu-list__sub-menu-list-item { text-align: left; }
+.cometchat .cometchat-conversations .cometchat-menu-list__sub-menu-list {
+ width: 212px; top: 40px !important; left: 172px !important;
+}
+#logged-in-user { border-bottom: 2px solid var(--cometchat-border-color-default, #E8E8E8); }
+#logged-in-user .cometchat-menu-list__sub-menu-item-title,
+#logged-in-user .cometchat-menu-list__sub-menu-list-item { cursor: default; }
+.cometchat-menu-list__sub-menu-list-item-icon-log-out { background-color: var(--cometchat-error-color, #F44649); }
+.cometchat-menu-list__sub-menu-item-title-log-out { color: var(--cometchat-error-color, #F44649); }
+.chat-menu .cometchat .cometchat-menu-list__sub-menu-item-title { cursor: pointer; }
+.chat-menu .cometchat .cometchat-menu-list__sub-menu { box-shadow: none; }
+.chat-menu .cometchat .cometchat-menu-list__sub-menu-icon {
+ background-color: var(--cometchat-icon-color-primary, #141414); width: 24px; height: 24px;
+}
+```
+
+
+
+
+Key points:
+- The `activeTab` state drives which list component renders — `CometChatConversations`, `CometChatCallLogs`, `CometChatUsers`, or `CometChatGroups`.
+- Each list component passes its selection back to the parent via `onSelectorItemClicked`.
+- `CometChatTabs` renders at the bottom of the sidebar.
+
+
+---
+
+## Step 3 — Create the TabbedChat Island
+
+This component handles init, login, and renders the full tabbed chat experience. It runs client-side only via `client:only="react"`.
+
+
+
+
+
+
+
+
+
+
+
+```tsx title="TabbedChat.tsx" lines highlight={15-17, 20}
+import { useEffect, useState } from "react";
+import {
+ CometChatMessageComposer,
+ CometChatMessageHeader,
+ CometChatMessageList,
+ CometChatUIKit,
+ UIKitSettingsBuilder,
+} from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatSelector } from "./CometChatSelector/CometChatSelector";
+import "@cometchat/chat-uikit-react/css-variables.css";
+import "./TabbedChat.css";
+
+const COMETCHAT_CONSTANTS = {
+ APP_ID: "", // Replace with your App ID
+ REGION: "", // Replace with your Region
+ AUTH_KEY: "", // Replace with your Auth Key (dev only)
+};
+
+const UID = "cometchat-uid-4"; // Replace with your actual UID
+
+export default function TabbedChat() {
+ const [user, setUser] = useState(undefined);
+ const [selectedUser, setSelectedUser] = useState(undefined);
+ const [selectedGroup, setSelectedGroup] = useState(undefined);
+
+ useEffect(() => {
+ const UIKitSettings = new UIKitSettingsBuilder()
+ .setAppId(COMETCHAT_CONSTANTS.APP_ID)
+ .setRegion(COMETCHAT_CONSTANTS.REGION)
+ .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
+ .subscribePresenceForAllUsers()
+ .build();
+
+ CometChatUIKit.init(UIKitSettings)
+ .then(() => {
+ console.log("Initialization completed successfully");
+ CometChatUIKit.getLoggedinUser().then((loggedInUser) => {
+ if (!loggedInUser) {
+ CometChatUIKit.login(UID)
+ .then((u) => {
+ console.log("Login Successful", { u });
+ setUser(u);
+ })
+ .catch((error) => console.error("Login failed", error));
+ } else {
+ console.log("Already logged-in", { loggedInUser });
+ setUser(loggedInUser);
+ }
+ });
+ })
+ .catch((error) => console.error("Initialization failed", error));
+ }, []);
+
+ if (!user) return
+
+
+```css title="TabbedChat.css" lines
+.conversations-with-messages {
+ display: flex;
+ height: 100%;
+ width: 100%;
+}
+.conversations-wrapper {
+ height: 100%;
+ width: 480px;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+}
+.conversations-wrapper > .cometchat { overflow: hidden; }
+.messages-wrapper {
+ width: calc(100% - 480px);
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+}
+.empty-conversation {
+ height: 100%;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: var(--cometchat-background-color-03, #F5F5F5);
+ color: var(--cometchat-text-color-secondary, #727272);
+ font: var(--cometchat-font-body-regular, 400 14px Roboto);
+}
+.cometchat .cometchat-message-composer { border-radius: 0px; }
+```
+
+
+
+
+How it works:
+- Selections from any tab (Chats, Calls, Users, Groups) flow through the same `onSelectorItemClicked` callback.
+- Conversation items are unwrapped via `getConversationWith()` to extract the underlying `User` or `Group`.
+- Only one of `selectedUser` / `selectedGroup` is set at a time — the other is cleared.
-
-The message panel shows only for Chats, Users, or Groups. Calls tab does not open a message panel.
-
-
+---
-***
+## Step 4 — Render the Astro Page
-## Next Steps
+Import the island and hydrate it client-side using `client:only="react"`.
+
+```astro title="src/pages/index.astro" lines
+---
+import TabbedChat from "../components/TabbedChat.tsx";
+import "../styles/globals.css";
+---
-- Add call handling with CometChat Calls SDK
-- Apply theming and component overrides
-- Extend with unread badges and notifications
+
+
+
+ Tabbed Messaging UI
+
+
+
-You can reuse `src/lib/cometchat-init.js` and swap the island component to build other experiences.
-
+The `client:only="react"` directive ensures the component skips SSR entirely and only renders in the browser.
+---
+
+## Step 5 — Run the Project
+
+
+
+```bash lines
+npm run dev
+```
+
+
+```bash lines
+pnpm dev
+```
+
+
+```bash lines
+yarn dev
+```
+
+
+
+You should see the tab bar at the bottom of the sidebar. Switch between Chats, Calls, Users, and Groups — tapping any item loads the message view on the right.
+
+---
+
+## Next Steps
+
+
+ Customize colors, fonts, and styles to match your brand
+
+
+ Browse all prebuilt UI components
+
+
+ Chat features included out of the box
+
+
diff --git a/ui-kit/react/call-buttons.mdx b/ui-kit/react/call-buttons.mdx
index 4c67d12bb..bf2c5d5a8 100644
--- a/ui-kit/react/call-buttons.mdx
+++ b/ui-kit/react/call-buttons.mdx
@@ -1,409 +1,537 @@
---
title: "Call Buttons"
+description: "Voice and video call initiation buttons for user or group conversations."
---
+
+```json
+{
+ "component": "CometChatCallButtons",
+ "package": "@cometchat/chat-uikit-react",
+ "import": "import { CometChatCallButtons } from \"@cometchat/chat-uikit-react\";",
+ "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";",
+ "description": "Voice and video call initiation buttons for user or group conversations.",
+ "cssRootClass": ".cometchat-call-button",
+ "primaryOutput": {
+ "description": "Initiates calls via SDK, emits CometChatCallEvents"
+ },
+ "props": {
+ "data": {
+ "user": {
+ "type": "CometChat.User",
+ "default": "undefined",
+ "note": "Pass either user or group, not both"
+ },
+ "group": {
+ "type": "CometChat.Group",
+ "default": "undefined",
+ "note": "Pass either user or group, not both"
+ }
+ },
+ "callbacks": {
+ "onError": "((error: CometChat.CometChatException) => void) | null",
+ "onVoiceCallClick": "(user?: CometChat.User, group?: CometChat.Group) => void",
+ "onVideoCallClick": "(user?: CometChat.User, group?: CometChat.Group) => void"
+ },
+ "visibility": {
+ "hideVoiceCallButton": { "type": "boolean", "default": false },
+ "hideVideoCallButton": { "type": "boolean", "default": false }
+ },
+ "configuration": {
+ "callSettingsBuilder": "(isAudioOnlyCall: boolean, user?: CometChat.User, group?: CometChat.Group) => typeof CometChatUIKitCalls.CallSettingsBuilder",
+ "outgoingCallConfiguration": {
+ "type": "OutgoingCallConfiguration",
+ "default": "new OutgoingCallConfiguration({})",
+ "properties": {
+ "disableSoundForCalls": "boolean",
+ "customSoundForCalls": "string",
+ "onError": "(error: CometChat.CometChatException) => void",
+ "onCallCanceled": "Function",
+ "titleView": "(call: CometChat.Call) => JSX.Element",
+ "subtitleView": "(call: CometChat.Call) => JSX.Element",
+ "avatarView": "(call: CometChat.Call) => JSX.Element",
+ "cancelButtonView": "(call: CometChat.Call) => JSX.Element"
+ }
+ }
+ }
+ },
+ "events": [
+ {
+ "name": "CometChatCallEvents.ccOutgoingCall",
+ "payload": "CometChat.Call",
+ "description": "Call initiated"
+ },
+ {
+ "name": "CometChatCallEvents.ccCallRejected",
+ "payload": "CometChat.Call",
+ "description": "Call rejected/cancelled"
+ },
+ {
+ "name": "CometChatCallEvents.ccCallEnded",
+ "payload": "CometChat.Call",
+ "description": "Call session ends"
+ },
+ {
+ "name": "CometChatMessageEvents.ccMessageSent",
+ "payload": "IMessages",
+ "description": "Group call message sent"
+ }
+ ],
+ "sdkListeners": [
+ "onIncomingCallReceived",
+ "onIncomingCallCancelled",
+ "onOutgoingCallRejected",
+ "onOutgoingCallAccepted"
+ ],
+ "compositionExample": {
+ "description": "Standalone call buttons or embedded in MessageHeader auxiliary view",
+ "components": ["CometChatCallButtons", "CometChatOutgoingCall", "CometChatOngoingCall"],
+ "flow": "user/group prop -> click button -> SDK initiateCall -> CometChatOutgoingCall overlay -> onOutgoingCallAccepted -> CometChatOngoingCall"
+ }
+}
+```
+
-## Overview
-
-The `Call Button` is a Component provides users with the ability to make calls, access call-related functionalities, and control call settings. Clicking this button typically triggers the call to be placed to the desired recipient.
-
-
- 
-
-
-## Usage
+## Where It Fits
-### Integration
+`CometChatCallButtons` renders voice and video call buttons. Pass a `user` for 1-on-1 calls or a `group` for group calls. Typically embedded in `CometChatMessageHeader`'s auxiliary view or used standalone. The component handles call initiation, renders `CometChatOutgoingCall` internally, and manages the full call lifecycle.
-
-
-```tsx
+```tsx lines
+import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatCallButtons } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const CallButtonDemo = () => {
- const [chatUser, setChatUser] = React.useState();
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
- return
+function CallButtonsDemo() {
+ const [chatUser, setChatUser] = useState();
-
-```tsx
-import { CallButtonDemo } from "./CallButtonDemo";
+ useEffect(() => {
+ CometChat.getUser("uid").then((user) => setChatUser(user));
+ }, []);
-export default function App() {
- return (
-
+
+
+
-
+---
-### Actions
+## Minimal Render
-[Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.
+```tsx lines
+import { CometChatCallButtons } from "@cometchat/chat-uikit-react";
+import "@cometchat/chat-uikit-react/css-variables.css";
-##### 1. onError
+function CallButtonsMinimal() {
+ return
-
-```ts
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatCallButtons } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const CallButtonDemo = () => {
- const [chatUser, setChatUser] = React.useState();
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
+---
- const handleOnError = (error: CometChat.CometChatException) => {
- console.log("Your Custom on error actions", error);
- };
+## Actions and Events
- return
+Overrides the default voice call initiation behavior. When set, clicking the voice button invokes this callback instead of initiating a call via the SDK.
-
-```js
-import React, { useState, useEffect } from "react";
+```tsx lines
+import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatCallButtons } from "@cometchat/chat-uikit-react";
-const CallButtonDemo = () => {
- const [chatUser, setChatUser] = useState(null);
+function CallButtonsVoiceOverride() {
+ const [chatUser, setChatUser] = useState();
useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
+ CometChat.getUser("uid").then((user) => setChatUser(user));
}, []);
- const handleOnError = (error) => {
- console.log("Your Custom on error actions", error);
- };
-
- return {
+ console.log("Custom voice call logic");
+ }}
+ />
+ );
+}
```
-
-
-
+#### onVideoCallClick
-***
+Overrides the default video call initiation behavior.
-### Filters
-
-You can set `CallSettingsBuilder` in the Call Buttons Component to customise the calling experience. To know more about the filters available please refer to [CallSettingsBuilder](/sdk/javascript/direct-call#settings).
-
-
-
-```ts
+```tsx lines
+import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatCallButtons } from "@cometchat/chat-uikit-react";
-import React from "react";
-const CallButtonDemo = () => {
- const [chatUser, setChatUser] = React.useState();
+function CallButtonsVideoOverride() {
+ const [chatUser, setChatUser] = useState();
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
+ useEffect(() => {
+ CometChat.getUser("uid").then((user) => setChatUser(user));
}, []);
- const getCallSettingsBuilder = (call: CometChat.Call) => {
- return new CometChatCalls.CallSettingsBuilder()
- .setIsAudioOnlyCall(
- call?.getType() === CometChatUIKitConstants.MessageTypes.audio
- ? true
- : false
- )
- .build();
- };
-
return (
{
+ console.log("Custom video call logic");
+ }}
/>
);
-};
-
-export default CallButtonDemo;
+}
```
-
-
-
-```js
-import React, { useState, useEffect } from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatCallButtons } from "@cometchat/chat-uikit-react";
-
-const CallButtonDemo = () => {
- const [chatUser, setChatUser] = useState(null);
+#### onError
- useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
+Fires on internal errors during call initiation.
- const getCallSettingsBuilder = (call) => {
- return new CometChatCalls.CallSettingsBuilder()
- .setIsAudioOnlyCall(
- call?.getType() === CometChatUIKitConstants.MessageTypes.audio
- ? true
- : false
- )
- .build();
- };
+```tsx lines
+import { CometChatCallButtons } from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+function CallButtonsWithError() {
return (
{
+ console.error("CallButtons error:", error);
+ }}
/>
);
-};
-
-export default CallButtonDemo;
+}
```
-
-
-
+### Global UI Events
-***
+`CometChatCallEvents` emits call lifecycle events subscribable from anywhere.
-### Events
+| Event | Fires when | Payload |
+| --- | --- | --- |
+| `ccOutgoingCall` | User initiates a voice/video call | `CometChat.Call` |
+| `ccCallRejected` | Initiated call is rejected/cancelled | `CometChat.Call` |
+| `ccCallEnded` | Call session ends | `CometChat.Call` |
-[Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.
+```tsx lines
+import { useEffect } from "react";
+import { CometChatCallEvents } from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
-The list of events emitted by the `Call Buttons` component is as follows.
+function useCallButtonEvents() {
+ useEffect(() => {
+ const outgoingSub = CometChatCallEvents.ccOutgoingCall.subscribe(
+ (call: CometChat.Call) => {
+ console.log("Outgoing call:", call.getSessionId());
+ }
+ );
+ const rejectedSub = CometChatCallEvents.ccCallRejected.subscribe(
+ (call: CometChat.Call) => {
+ console.log("Call rejected:", call.getSessionId());
+ }
+ );
+ const endedSub = CometChatCallEvents.ccCallEnded.subscribe(
+ (call: CometChat.Call) => {
+ console.log("Call ended:", call.getSessionId());
+ }
+ );
+
+ return () => {
+ outgoingSub?.unsubscribe();
+ rejectedSub?.unsubscribe();
+ endedSub?.unsubscribe();
+ };
+ }, []);
+}
+```
-| Event | Description |
-| ------------------ | --------------------------------------------------------------------------------------------------------- |
-| **ccCallRejected** | This event is triggered when the initiated call is rejected by the receiver. |
-| **ccCallEnded** | This event is triggered when the initiated call successfully ends. |
-| **ccOutgoingCall** | This event is triggered when the user initiates a voice/video call. |
-| **ccMessageSent** | This event is triggered when the sent message is in transit and also when it is received by the receiver. |
+### SDK Events (Real-Time, Automatic)
-***
+The component attaches SDK call listeners internally:
-
-
-```tsx
-const ccCallRejected = CometChatCallEvents.ccCallRejected.subscribe(
- (call: CometChat.Call) => {
- //Your Code
- }
-);
+| SDK Listener | Internal behavior |
+| --- | --- |
+| `onIncomingCallReceived` | Disables call buttons to prevent concurrent calls |
+| `onIncomingCallCancelled` | Re-enables call buttons |
+| `onOutgoingCallRejected` | Hides outgoing call screen, re-enables buttons |
+| `onOutgoingCallAccepted` | Transitions to ongoing call screen |
-const ccCallEnded = CometChatCallEvents.ccCallEnded.subscribe(
- (call: CometChat.Call) => {
- //Your Code
- }
-);
+---
-const ccOutgoingCall = CometChatCallEvents.ccOutgoingCall.subscribe(
- (call: CometChat.Call) => {
- //Your Code
- }
-);
+## Configuring the Outgoing Call Sub-Component
-const ccMessageSent = CometChatMessageEvents.ccMessageSent.subscribe(() => {
- //Your Code
-});
-```
+`CometChatCallButtons` renders `CometChatOutgoingCall` internally. Customize it via `outgoingCallConfiguration`.
-
+```tsx lines
+import { CometChatCallButtons, OutgoingCallConfiguration } from "@cometchat/chat-uikit-react";
-
+function CallButtonsCustomOutgoing() {
+ return (
+
-
-```tsx
-ccCallRejected?.unsubscribe();
+| Property | Type | Description |
+| --- | --- | --- |
+| `disableSoundForCalls` | `boolean` | Disables outgoing call ringtone |
+| `customSoundForCalls` | `string` | Custom ringtone URL |
+| `onError` | `(error: CometChat.CometChatException) => void` | Error callback |
+| `onCallCanceled` | `Function` | Cancel button callback |
+| `titleView` | `(call: CometChat.Call) => JSX.Element` | Custom title |
+| `subtitleView` | `(call: CometChat.Call) => JSX.Element` | Custom subtitle |
+| `avatarView` | `(call: CometChat.Call) => JSX.Element` | Custom avatar |
+| `cancelButtonView` | `(call: CometChat.Call) => JSX.Element` | Custom cancel button |
-ccCallEnded?.unsubscribe();
+Refer to [CometChatOutgoingCall](/ui-kit/react/outgoing-call) for details on each view slot.
-ccOutgoingCall?.unsubscribe();
+---
-ccMessageSent?.unsubscribe();
-```
+## Call Settings
-
+Customize the calling experience via `callSettingsBuilder`.
-
+```tsx lines
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatCallButtons, CometChatUIKitCalls } from "@cometchat/chat-uikit-react";
-***
+function CallButtonsCustomSettings() {
+ return (
+
+ new CometChatUIKitCalls.CallSettingsBuilder()
+ .enableDefaultLayout(true)
+ .setIsAudioOnlyCall(isAudioOnlyCall)
+ }
+ />
+ );
+}
+```
-## Customization
+---
-To fit your app's design requirements, you can customize the appearance of the Call Buttons component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.
+## Common Patterns
-### Style
+### Voice-only call button
-Using CSS you can customize the look and feel of the component in your app like the color, size, shape, and fonts.
+```tsx lines
+import { CometChatCallButtons } from "@cometchat/chat-uikit-react";
-
- 
-
+function VoiceOnlyCallButtons() {
+ return
-
-```ts
+```tsx lines
+import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatCallButtons } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const CallButtonDemo = () => {
- const [chatUser, setChatUser] = React.useState();
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
- return ();
+
+ useEffect(() => {
+ CometChat.getGroup("guid").then((g) => setGroup(g));
+ }, []);
-export default CallButtonDemo;
+ return group ?
+---
-
-```js
-import React, { useState, useEffect } from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatCallButtons } from "@cometchat/chat-uikit-react";
+## CSS Architecture
-const CallButtonDemo = () => {
- const [chatUser, setChatUser] = useState(null);
+The component uses CSS custom properties (design tokens) defined in `@cometchat/chat-uikit-react/css-variables.css`. The cascade:
- useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
+1. Global tokens set on the `.cometchat` root wrapper.
+2. Component CSS (`.cometchat-call-button`) consumes these tokens via `var()`.
+3. Overrides target `.cometchat-call-button` descendant selectors.
- return
+
+
+
-
-```css
+```css lines
.cometchat-call-button {
display: flex;
- width: 183px;
- height: 64px;
padding: 8px 16px;
justify-content: center;
align-items: center;
- border-bottom: 1px solid #f5f5f5;
background: #fff;
}
-.cometchat-call-button .cometchat-call-button__voice,
-.cometchat-call-button .cometchat-call-button__video {
- width: auto;
- height: auto;
-}
-
.cometchat .cometchat-button {
- display: flex;
- width: 52px;
- height: 40px;
- justify-content: center;
- padding: 8px 20px;
- align-items: center;
border-radius: 8px;
border: 1px solid #e8e8e8;
background: #edeafa;
}
-.cometchat .cometchat-button:hover {
- background-color: #edeafa;
-}
-
.cometchat-call-button .cometchat-call-button__video .cometchat-button__icon,
.cometchat-call-button .cometchat-call-button__voice .cometchat-button__icon {
- width: 24px;
- height: 24px;
- flex-shrink: 0;
background-color: #6852d6;
}
```
-
+### Customization Matrix
+
+| What to change | Where | Property/API | Example |
+| --- | --- | --- | --- |
+| Override call initiation | Component props | `onVoiceCallClick` / `onVideoCallClick` | `onVoiceCallClick={() => customCall()}` |
+| Hide a call button | Component props | `hideVoiceCallButton` / `hideVideoCallButton` | `hideVideoCallButton={true}` |
+| Customize outgoing call UI | Component props | `outgoingCallConfiguration` | `outgoingCallConfiguration={new OutgoingCallConfiguration({...})}` |
+| Customize call settings | Component props | `callSettingsBuilder` | `callSettingsBuilder={(audio) => builder}` |
+| Change colors, fonts, spacing | Global CSS | Target `.cometchat-call-button` class | `.cometchat-call-button .cometchat-button__icon { background: red; }` |
+
+---
+
+## Accessibility
+
+The voice and video call buttons are keyboard-focusable and activate on Enter/Space. Each button includes hover text ("Voice Call" / "Video Call") for tooltip display. Buttons are disabled during active calls to prevent concurrent call initiation.
-
+---
+
+---
+
+## Props
+
+All props are optional. Sorted alphabetically.
+
+### callSettingsBuilder
+
+Builder function for customizing call settings.
+
+| | |
+| --- | --- |
+| Type | `(isAudioOnlyCall: boolean, user?: CometChat.User, group?: CometChat.Group) => typeof CometChatUIKitCalls.CallSettingsBuilder` |
+| Default | `undefined` |
+
+---
+
+### group
+
+The group for group call buttons. Pass either `user` or `group`, not both.
+
+| | |
+| --- | --- |
+| Type | `CometChat.Group` |
+| Default | `undefined` |
+
+---
+
+### hideVideoCallButton
+
+Hides the video call button.
+
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
+
+---
-***
+### hideVoiceCallButton
-## Configurations
+Hides the voice call button.
-Configurations offer the ability to customize the properties of each component within a Composite Component. `CallButtons` component renders [CometChatOutgoingCall](/ui-kit/react/outgoing-call) component.
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-#### Outgoing Call
+---
+
+### onError
+
+Callback fired when the component encounters an error.
+
+| | |
+| --- | --- |
+| Type | `((error: CometChat.CometChatException) => void) \| null` |
+| Default | `undefined` |
+
+---
+
+### outgoingCallConfiguration
+
+Configuration object for the internal `CometChatOutgoingCall` sub-component.
+
+| | |
+| --- | --- |
+| Type | `OutgoingCallConfiguration` |
+| Default | `new OutgoingCallConfiguration({})` |
+
+See [Configuring the Outgoing Call Sub-Component](#configuring-the-outgoing-call-sub-component) for properties.
-You can customize the properties of the `CometChatOutgoingCall` component by making use of the `OutgoingCallConfiguration`. Below properties are available in `OutgoingCallConfiguration`.
+---
+
+### user
+
+The user for 1-on-1 call buttons. Pass either `user` or `group`, not both.
+
+| | |
+| --- | --- |
+| Type | `CometChat.User` |
+| Default | `undefined` |
+
+---
+
+## Events
+
+| Event | Payload | Fires when |
+| --- | --- | --- |
+| `CometChatCallEvents.ccOutgoingCall` | `CometChat.Call` | Call initiated |
+| `CometChatCallEvents.ccCallRejected` | `CometChat.Call` | Call rejected/cancelled |
+| `CometChatCallEvents.ccCallEnded` | `CometChat.Call` | Call session ends |
+| `CometChatMessageEvents.ccMessageSent` | `IMessages` | Group call message sent |
-| Property | Description | Code |
-| -------------------------- | ------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
-| **User** | Sets the user object for Call Buttons | `user={chatUser}` |
-| **Group** | Used to set the group object for Call Buttons | `group={chatGroup}` |
-| **Custom Sound** | Specifies a custom sound to play for outgoing calls. | `customSoundForCalls='Your Custom Sound For Calls'` |
-| **Disable Sound** | Disables the sound of outgoing calls. | `disableSoundForCalls={false}` |
-| **On Error** | Callback function triggered when an error occurs in the call buttons component. | `onError={(error: CometChat.CometChatException)=>{ console.log('error', error) }}` |
-| **Cancel Call Clicked** | Callback function triggered when the cancel button is clicked. | `onCloseClicked={()=>{console.log("Outgoing call canceled")}}` |
-| **Title View** | This prop renders the custom title view for the outgoing call. | `titleView={<>Custom Title View}` |
-| **Sub Title View** | This prop renders the custom sub title view for the outgoing call. | `subtitleView={<>Custom Sub Title View}` |
-| **Avatar View** | This prop renders the custom avatar view for the outgoing call. | `avatarView={<>Custom Avatar View}` |
-| **Cancel Button View** | This prop renders the custom cancel-call button view for the outgoing call. | `cancelButtonView={<>Custom Cancel Button View}` |
-| **Hide Video Call Button** | Used to hide the video call button. | `hideVideoCallButton={true}` |
-| **Hide Voice Call Button** | Used to hide the voice call button. | `hideVoiceCallButton={true}` |
+All call events are `Subject` from RxJS. Subscribe with `.subscribe()`, unsubscribe with the returned subscription's `.unsubscribe()`.
+
+---
-You can refer to [CometChatOutgoingCall](/ui-kit/react/outgoing-call) component to know more about each of the above properties.
+## CSS Selectors
-***
+| Target | Selector |
+| --- | --- |
+| Root | `.cometchat-call-button` |
+| Voice button wrapper | `.cometchat-call-button__voice` |
+| Video button wrapper | `.cometchat-call-button__video` |
+| Button element | `.cometchat-call-button .cometchat-button` |
+| Button icon | `.cometchat-call-button .cometchat-button__icon` |
+| Outgoing call backdrop | `.cometchat-outgoing-call__backdrop` |
diff --git a/ui-kit/react/call-features.mdx b/ui-kit/react/call-features.mdx
index f9d61886a..8ab4b87cb 100644
--- a/ui-kit/react/call-features.mdx
+++ b/ui-kit/react/call-features.mdx
@@ -1,24 +1,38 @@
---
title: "Call"
+description: "Overview of CometChat's audio and video calling features including incoming calls, outgoing calls, and call logs — with the UI Kit components that power each feature."
---
-## Overview
+
-CometChat's Calls feature is an advanced functionality that allows you to seamlessly integrate one-on-one as well as group audio and video calling capabilities into your application. This document provides a technical overview of these features, as implemented in the React UI Kit.
+| Field | Value |
+| --- | --- |
+| Packages | `@cometchat/chat-uikit-react` + `@cometchat/calls-sdk-javascript` (`npm install @cometchat/calls-sdk-javascript`) |
+| Required setup | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` — Calls SDK must also be installed |
+| Call features | Incoming Call, Outgoing Call, Call Logs, Call Buttons |
+| Key components | `CometChatCallButtons` → [Call Buttons](/ui-kit/react/call-buttons), `CometChatIncomingCall` → [Incoming Call](/ui-kit/react/incoming-call), `CometChatOutgoingCall` → [Outgoing Call](/ui-kit/react/outgoing-call), `CometChatCallLogs` → [Call Logs](/ui-kit/react/call-logs) |
+| Auto-detection | UI Kit automatically detects the Calls SDK and enables call UI components |
+| CSS class prefix | `.cometchat-` |
-## Integration
+
-First, make sure that you've correctly integrated the UI Kit library into your project. If you haven't done this yet or are facing difficulties, refer to our [Getting Started](/ui-kit/react/integration) guide. This guide will walk you through a step-by-step process of integrating our UI Kit into your React project.
+## Overview
-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:
+CometChat Calls integrates 1:1 and group audio/video calling into the React UI Kit. Install the Calls SDK and the UI Kit auto-detects it, enabling call components.
-Add the SDK files to your project's dependencies or libraries:
+
+Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration).
+
+
+## Integration
-```java
+Install the Calls SDK:
+
+```bash lines
npm install @cometchat/calls-sdk-javascript
```
-After adding this dependency, the React 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/react/call-buttons) component rendered in [MessageHeader](/ui-kit/react/message-header) Component.
+The React UI Kit auto-detects the SDK and activates calling features. [CallButtons](/ui-kit/react/call-buttons) renders in [MessageHeader](/ui-kit/react/message-header).
@@ -28,9 +42,7 @@ After adding this dependency, the React UI Kit will automatically detect it and
### Incoming Call
-The [Incoming Call](/ui-kit/react/incoming-call) component of the CometChat UI Kit provides the functionality that lets users receive real-time audio and video calls in the app.
-
-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.
+The [Incoming Call](/ui-kit/react/incoming-call) component displays a call screen when a call is received, showing caller info with accept/reject options.
@@ -38,9 +50,7 @@ When a call is made to a user, the Incoming Call component triggers and displays
### Outgoing Call
-The [Outgoing Call](/ui-kit/react/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.
-
-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/react/outgoing-call) component displays an outgoing call screen with recipient info and call status. Transitions to the ongoing call screen when the receiver accepts.
@@ -48,8 +58,25 @@ Importantly, the Outgoing Call component is smartly designed to transition autom
### Call Logs
-[Call Logs](/ui-kit/react/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/react/call-logs) component displays call history — caller, time, and duration.
+
+## Next Steps
+
+
+
+ Audio and video call buttons
+
+
+ Incoming call notifications and UI
+
+
+ Call history and details
+
+
+ Core chat features
+
+
diff --git a/ui-kit/react/call-logs.mdx b/ui-kit/react/call-logs.mdx
index 35f786e34..1d3778b72 100644
--- a/ui-kit/react/call-logs.mdx
+++ b/ui-kit/react/call-logs.mdx
@@ -1,1151 +1,679 @@
---
title: "Call Logs"
+description: "Scrollable list of call history entries with filtering, call-back actions, and custom views."
---
+
+```json
+{
+ "component": "CometChatCallLogs",
+ "package": "@cometchat/chat-uikit-react",
+ "import": "import { CometChatCallLogs } from \"@cometchat/chat-uikit-react\";",
+ "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";",
+ "description": "Scrollable list of call history entries with filtering, call-back actions, and custom views.",
+ "cssRootClass": ".cometchat-call-logs",
+ "primaryOutput": {
+ "prop": "onItemClick",
+ "type": "(call: any) => void"
+ },
+ "props": {
+ "data": {
+ "callLogRequestBuilder": {
+ "type": "any (CallLogRequestBuilder)",
+ "default": "SDK default (30 per page)"
+ },
+ "activeCall": {
+ "type": "any",
+ "default": "undefined"
+ },
+ "callInitiatedDateTimeFormat": {
+ "type": "CalendarObject",
+ "default": "DD MMM, hh:mm A"
+ }
+ },
+ "callbacks": {
+ "onItemClick": "(call: any) => void",
+ "onCallButtonClicked": "(call: any) => void",
+ "onError": "((error: CometChat.CometChatException) => void) | null"
+ },
+ "visibility": {
+ "showScrollbar": { "type": "boolean", "default": false }
+ },
+ "viewSlots": {
+ "itemView": "(call: any) => JSX.Element",
+ "leadingView": "(call: any) => JSX.Element",
+ "titleView": "(call: any) => JSX.Element",
+ "subtitleView": "(call: any) => JSX.Element",
+ "trailingView": "(call: any) => JSX.Element",
+ "loadingView": "JSX.Element",
+ "emptyView": "JSX.Element",
+ "errorView": "JSX.Element"
+ }
+ },
+ "events": [
+ {
+ "name": "CometChatMessageEvents.ccMessageSent",
+ "payload": "IMessages",
+ "description": "Call message sent"
+ }
+ ],
+ "types": {
+ "CalendarObject": {
+ "today": "string | undefined",
+ "yesterday": "string | undefined",
+ "lastWeek": "string | undefined",
+ "otherDays": "string | undefined"
+ }
+ }
+}
+```
+
-## Overview
-
-`CometChatCallLogs` is a Component that shows the list of Call Log available . By default, names are shown for all listed users, along with their avatar if available.
-
-
- 
-
-
-The `Call Logs` is comprised of the following components:
-
-| Components | Description |
-| ----------------- | --------------------------------------------------------------------------------------------------------------------------- |
-| CometChatList | A reusable container component having title, search box, customizable background and a list view. |
-| CometChatListItem | A component that renders data obtained from a Group object on a Tile having a title, subtitle, leading and trailing view. |
-| CometChatDate | This component used to show the date and time. You can also customize the appearance of this widget by modifying its logic. |
-
-## Usage
+## Where It Fits
-### Integration
+`CometChatCallLogs` is a standalone list component that renders call history entries. Each entry shows the caller/callee, call type (audio/video), direction (incoming/outgoing/missed), and timestamp. The `onItemClick` callback emits the selected call log, and `onCallButtonClicked` fires when the call-back button is tapped.
-
-
-```tsx
+```tsx lines
import { CometChatCallLogs } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const CallLogDemo = () => {
- return
+import "@cometchat/chat-uikit-react/css-variables.css";
-
-```tsx
-import { CallLogDemo } from "./CallLogDemo";
-
-export default function App() {
+function CallLogPanel() {
return (
-
setHoverTab(tabItem.name.toLowerCase())}
+ onMouseLeave={() => setHoverTab("")}
+ />
- );
- }
- ```
-
-
- onTabClicked({ name: t.name })}
- onMouseEnter={() => setHover(key)}
- onMouseLeave={() => setHover("")}
+ className={
+ isActive
+ ? "cometchat-tab-component__tab-text cometchat-tab-component__tab-text-active"
+ : "cometchat-tab-component__tab-text"
+ }
+ onMouseEnter={() => setHoverTab(tabItem.name.toLowerCase())}
+ onMouseLeave={() => setHoverTab("")}
>
- {/* if icons not present, this still renders a label-only tab */}
- {t.icon ? (
-
- ) : null}
-
- );
- })}
-
- {t.name}
-
+ {tabItem.name}
Loading…
;
- if (phase === "error") return CometChat error: {errorMsg}
;
-
- return (
-
- {/* LEFT: Sidebar */}
-
+
+```css title="CometChatTabs.css" lines
+.cometchat-tab-component {
+ display: flex;
+ width: 100%;
+ padding: 0px 8px;
+ align-items: flex-start;
+ gap: 8px;
+ border-top: 1px solid var(--cometchat-border-color-light, #F5F5F5);
+ border-right: 1px solid var(--cometchat-border-color-light, #F5F5F5);
+ background: var(--cometchat-background-color-01, #FFF);
+}
+
+.cometchat-tab-component__tab {
+ display: flex;
+ padding: 12px 0px 10px 0px;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 4px;
+ flex: 1 0 0;
+ min-height: 48px;
+}
+
+.cometchat-tab-component__tab-icon {
+ display: flex;
+ width: 32px;
+ height: 32px;
+ justify-content: center;
+ align-items: center;
+ background: var(--cometchat-icon-color-secondary);
+ -webkit-mask-size: contain;
+ -webkit-mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ mask-size: contain;
+ mask-position: center;
+ mask-repeat: no-repeat;
+ cursor: pointer;
+}
+
+.cometchat-tab-component__tab-text {
+ color: var(--cometchat-text-color-secondary, #727272);
+ text-align: center;
+ font: var(--cometchat-font-caption1-medium, 500 12px Roboto);
+ cursor: pointer;
+}
+
+.cometchat-tab-component__tab-icon-active {
+ background: var(--cometchat-icon-color-highlight);
+}
+
+.cometchat-tab-component__tab-text-active {
+ color: var(--cometchat-text-color-highlight);
+}
+```
+
+
+
- {/* Tabs bar at bottom */}
- setActiveTab(t.name.toLowerCase())}
- />
-
- {/* RIGHT: Messages panel (appears for chats/users/groups) */}
-
-
+ );
+};
+```
+
+
+
- {activeTab === "chats" && (
- {
- // If you integrate Calls SDK later, you can open call details here
- console.log("Call log clicked:", call);
- }}
- />
- )}
-
- {activeTab === "users" && (
- handleSelect(user)}
- />
- )}
-
- {activeTab === "groups" && (
- handleSelect(group)}
- />
- )}
+ );
+ })}
+
- {activeTab === "calls" ? (
-
+
+
+
+
+
+
+
+
+
+
+
+```tsx title="CometChatSelector.tsx" lines
+import { useEffect, useState } from "react";
+import { Call, Conversation, Group, User, CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatCallLogs, CometChatConversations, CometChatGroups, CometChatUIKitLoginListener, CometChatUsers } from "@cometchat/chat-uikit-react";
+import { CometChatTabs } from "../CometChatTabs/CometChatTabs";
+
+interface SelectorProps {
+ onSelectorItemClicked?: (input: User | Group | Conversation | Call, type: string) => void;
+}
+
+export const CometChatSelector = (props: SelectorProps) => {
+ const { onSelectorItemClicked = () => {} } = props;
+ const [loggedInUser, setLoggedInUser] = useState();
+ const [activeItem, setActiveItem] = useState();
+ const [activeTab, setActiveTab] = useState("chats");
+
+ useEffect(() => {
+ const user = CometChatUIKitLoginListener.getLoggedInUser();
+ setLoggedInUser(user);
+ }, []);
+
+ return (
+ <>
+ {loggedInUser && (
+ <>
+ {activeTab === "chats" && (
+ { setActiveItem(item); onSelectorItemClicked(item, "updateSelectedItem"); }}
+ />
)}
-
+ {activeTab === "calls" && (
+ Select a call log
- ) : selectedUser || selectedGroup ? (
- <>
-
-
- Select a conversation to start
+---
+
+## Step 2 — Create the Sidebar Component
+
+The sidebar renders the list for whichever tab is active, plus the tab bar at the bottom.
+
+Initializing Chat...
;
+
+ return (
+
+
- Import the island and styles, then hydrate on the client.
-
- ```astro src/pages/index.astro
- ---
- import TabbedChat from "../components/TabbedChat.jsx";
- import "../styles/tabs-layout.css"; // the CSS from this setup
- // (optional) also import your existing globals.css if you have one
- import "../styles/globals.css";
- ---
-
-
-
-
- Tabbed Messaging UI
-
-
-
-
-
-
-
- ```bash
- npm run dev
- ```
-
-
- Log in using `PUBLIC_COMETCHAT_LOGIN_UID`, switch tabs, and open a conversation to send messages.
-
-
-
-
-***
-
-## Troubleshooting
-
-
-
-Ensure `CometChatTabs` is wired via `onTabClicked` and that the active tab state drives which list is rendered.
-
-
-Verify `.env` contains `PUBLIC_COMETCHAT_APP_ID`, `PUBLIC_COMETCHAT_REGION`, `PUBLIC_COMETCHAT_AUTH_KEY`, and `PUBLIC_COMETCHAT_LOGIN_UID`.
-
+ {selectedUser || selectedGroup ? (
+
+ );
+}
+```
+
+
+ {
+ let item: any = activeItem;
+ if (activeItem instanceof CometChat.Conversation) {
+ item = activeItem.getConversationWith();
+ }
+ if (item instanceof CometChat.User) {
+ setSelectedUser(item);
+ setSelectedGroup(undefined);
+ } else if (item instanceof CometChat.Group) {
+ setSelectedUser(undefined);
+ setSelectedGroup(item);
+ } else {
+ setSelectedUser(undefined);
+ setSelectedGroup(undefined);
+ }
+ }}
+ />
- );
- }
- ```
-
-
-
+
+ ) : (
+ Select a conversation to start chatting
+ )}
+
-
-
-## Usage
+## Where It Fits
-### Integration
+`CometChatCallButtons` renders voice and video call buttons. Pass a `user` for 1-on-1 calls or a `group` for group calls. Typically embedded in `CometChatMessageHeader`'s auxiliary view or used standalone. The component handles call initiation, renders `CometChatOutgoingCall` internally, and manages the full call lifecycle.
-
-
- );
+ return chatUser ?
-
-
+
-{call.getCallReceiver().getName()}
,
+ })
+ }
+ />
+ );
+}
+```
-***
+`OutgoingCallConfiguration` properties:
-
-
+function VoiceOnlyCallButtons() {
+ return
+
-
@@ -28,9 +42,7 @@ After adding this dependency, the React UI Kit will automatically detect it and
### Incoming Call
-The [Incoming Call](/ui-kit/react/incoming-call) component of the CometChat UI Kit provides the functionality that lets users receive real-time audio and video calls in the app.
-
-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.
+The [Incoming Call](/ui-kit/react/incoming-call) component displays a call screen when a call is received, showing caller info with accept/reject options.
@@ -38,9 +50,7 @@ When a call is made to a user, the Incoming Call component triggers and displays
### Outgoing Call
-The [Outgoing Call](/ui-kit/react/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.
-
-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/react/outgoing-call) component displays an outgoing call screen with recipient info and call status. Transitions to the ongoing call screen when the receiver accepts.
@@ -48,8 +58,25 @@ Importantly, the Outgoing Call component is smartly designed to transition autom
### Call Logs
-[Call Logs](/ui-kit/react/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/react/call-logs) component displays call history — caller, time, and duration.
+
+## Next Steps
+
+
-
-
-The `Call Logs` is comprised of the following components:
-
-| Components | Description |
-| ----------------- | --------------------------------------------------------------------------------------------------------------------------- |
-| CometChatList | A reusable container component having title, search box, customizable background and a list view. |
-| CometChatListItem | A component that renders data obtained from a Group object on a Tile having a title, subtitle, leading and trailing view. |
-| CometChatDate | This component used to show the date and time. You can also customize the appearance of this widget by modifying its logic. |
-
-## Usage
+## Where It Fits
-### Integration
+`CometChatCallLogs` is a standalone list component that renders call history entries. Each entry shows the caller/callee, call type (audio/video), direction (incoming/outgoing/missed), and timestamp. The `onItemClick` callback emits the selected call log, and `onCallButtonClicked` fires when the call-back button is tapped.
-
-
-
-```ts
-import { CometChatCallLogs } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const CallLogDemo = () => {
- const handleOnItemClick = (callLog: any) => {
- console.log("custom on item click", callLog);
- };
- return
+## Minimal Render
-
-```js
+```tsx lines
import { CometChatCallLogs } from "@cometchat/chat-uikit-react";
-import React from "react";
+import "@cometchat/chat-uikit-react/css-variables.css";
-const CallLogDemo = () => {
- const handleOnItemClick = (callLog) => {
- console.log("custom on item click", callLog);
- };
- return
-
-
-
-##### 2. onCallButtonClicked
-
-`onCallButtonClicked` is a callback function which triggers when the call button in the trailing view is clicked.
+Root CSS class: `.cometchat-call-logs`
-
-
-```ts
-import { CometChatCallLogs } from "@cometchat/chat-uikit-react";
-import React from "react";
+---
-const CallLogDemo = () => {
- const handleOnCallButtonClick = (callLog: any) => {
- console.log("custom on info click", callLog);
- };
- return
-
-
-```js
+```tsx lines
+import { CallLogRequestBuilder } from "@cometchat/calls-sdk-javascript";
import { CometChatCallLogs } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const CallLogDemo = () => {
- const handleOnCallButtonClick = (callLog) => {
- console.log("custom on info click", callLog);
- };
- return
+### Filter Recipes
-
+| Recipe | Code |
+| --- | --- |
+| Limit to 5 per page | `new CallLogRequestBuilder().setAuthToken(token).setLimit(5)` |
+| Cancelled calls only | `new CallLogRequestBuilder().setAuthToken(token).setCallStatus("cancelled")` |
+| Video calls only | `new CallLogRequestBuilder().setAuthToken(token).setCallType("video")` |
+| Calls with recordings | `new CallLogRequestBuilder().setAuthToken(token).setHasRecording(true)` |
+| Calls for a specific user | `new CallLogRequestBuilder().setAuthToken(token).setUid("user_uid")` |
+| Calls for a specific group | `new CallLogRequestBuilder().setAuthToken(token).setGuid("group_guid")` |
-##### 3. onError
+Refer to [CallLogRequestBuilder](/sdk/javascript/call-logs) for the full builder API.
-This is a callback function which is triggered when the component encounters an error.
+---
-
-
-```ts
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatCallLogs } from "@cometchat/chat-uikit-react";
-import React from "react";
+## Actions and Events
-const CallLogDemo = () => {
- const handleOnError = (error: CometChat.CometChatException) => {
- console.log("your custom on error actions", error);
- };
- return
+Fires when a call log entry is tapped.
-
-```js
+```tsx lines
import { CometChatCallLogs } from "@cometchat/chat-uikit-react";
-import React from "react";
-const CallLogDemo = () => {
- const handleOnError = (error) => {
- console.log("your custom on error actions", error);
- };
- return {
+ console.log("Selected call log:", callLog);
+ }}
+ />
+ );
+}
```
-
-
-
-
-***
-
-### Filters
-
-**Filters** allow you to customize the data displayed in a list within a `Component`. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using `RequestBuilders` of Chat SDK.
+#### onCallButtonClicked
-##### 1. CallLogRequestBuilder
+Fires when the call-back button in the trailing view is tapped.
-The [CallLogRequestBuilder](/sdk/javascript/call-logs) enables you to filter and customize the Call Log based on available parameters in [CallLogRequestBuilder](/sdk/javascript/call-logs). This feature allows you to create more specific and targeted queries when fetching the call logs. The following are the parameters available in [CallLogRequestBuilder](/sdk/javascript/call-logs)
-
-| Methods | Type | Description |
-| -------------------- | ---------- | ------------------------------------------------------------ |
-| **setLimit** | number | Specifies the number of call logs to fetch. |
-| **setCallType** | String | Sets the type of calls to fetch (call or meet). |
-| **setCallStatus** | callStatus | Sets the status of calls to fetch (initiated, ongoing, etc.) |
-| **setHasRecording** | boolean | Sets whether to fetch calls that have recordings. |
-| **setCallCategory** | string | Sets the category of calls to fetch (call or meet). |
-| **setCallDirection** | string | Sets the direction of calls to fetch (incoming or outgoing) |
-| **setUid** | string | Sets the UID of the user whose call logs to fetch. |
-| **setGuid** | string | Sets the GUID of the user whose call logs to fetch. |
-| **setAuthToken** | string | Sets the Auth token of the logged-in user. |
-
-**Example**
-
-In the example below, we're filtering Call Logs to show only canceled calls and setting the limit to five.
-
-
-
-```ts
-import { CallLogRequestBuilder } from "@cometchat/calls-sdk-javascript";
+```tsx lines
import { CometChatCallLogs } from "@cometchat/chat-uikit-react";
-import React from "react";
-const CallLogDemo = () => {
+function CallLogsWithCallback() {
return (
{
+ console.log("Call back:", callLog);
+ }}
/>
);
-};
-
-export default CallLogDemo;
+}
```
-
+#### onError
-
-```js
-import { CallLogRequestBuilder } from "@cometchat/calls-sdk-javascript";
+Fires on internal errors (network failure, auth issue, SDK exception).
+
+```tsx lines
import { CometChatCallLogs } from "@cometchat/chat-uikit-react";
-import React from "react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
-const CallLogDemo = () => {
+function CallLogsWithError() {
return (
{
+ console.error("CometChatCallLogs error:", error);
+ }}
/>
);
-};
-
-export default CallLogDemo;
-```
-
-
-
-
-
-***
-
-### Events
-
-[Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.
-
-The list of events emitted by the `Call Logs` component is as follows.
-
-| Event | Description |
-| ----------------- | --------------------------------------------------------------------------------------------------------- |
-| **ccMessageSent** | This event is triggered when the sent message is in transit and also when it is received by the receiver. |
-
-***
-
-
-
-```tsx
-const ccMessageSent = CometChatMessageEvents.ccMessageSent.subscribe(() => {
- //Your Code
-});
+}
```
-
+### Global UI Events
-
+The component subscribes to `CometChatMessageEvents.ccMessageSent` to detect when a call message is sent and refresh the list.
-***
+### SDK Events (Real-Time, Automatic)
-
-
-```tsx
-ccMessageSent?.unsubscribe();
-```
+The component listens to SDK call events internally for real-time updates. No manual attachment needed.
-
-
-
-
-***
+
+In React 18 StrictMode, `useEffect` runs twice on mount in development. The component handles listener cleanup internally.
+
-## Customization
+---
-To fit your app's design requirements, you can customize the appearance of the Call Logs component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.
+## Custom View Slots
-### Style
+Each slot replaces a section of the default UI. Slots that accept a call log parameter receive the call log object for that row.
-Using CSS you can customize the look and feel of the component in your app like the color, size, shape, and fonts.
+| Slot | Signature | Replaces |
+| --- | --- | --- |
+| `itemView` | `(call: any) => JSX.Element` | Entire list item row |
+| `leadingView` | `(call: any) => JSX.Element` | Avatar / left section |
+| `titleView` | `(call: any) => JSX.Element` | Name / title text |
+| `subtitleView` | `(call: any) => JSX.Element` | Call type, direction, timestamp |
+| `trailingView` | `(call: any) => JSX.Element` | Call-back button area |
+| `loadingView` | `JSX.Element` | Loading spinner |
+| `emptyView` | `JSX.Element` | Empty state |
+| `errorView` | `JSX.Element` | Error state |
-**Example:**
+### itemView
-
- 
-
+Replace the entire call log list item.
-```ts
+```tsx lines
import { CometChatCallLogs } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const CallLogDemo = () => {
- return
-
-
-```js
-import { CometChatCallLogs } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const CallLogDemo = () => {
- return
-
-
-```css
-.cometchat .cometchat-call-logs .cometchat-list__header-title {
- background-color: #fce9ea;
- color: #f76808;
- border: 0px 1px 1px 0px solid #e5484d;
- font-family: "Times New Roman";
-}
-
-.cometchat .cometchat-call-logs .cometchat-list-item__body-title {
- overflow: hidden;
- color: #141414;
- text-overflow: ellipsis;
- font-family: "Times New Roman";
- font-size: 16px;
- font-style: normal;
- font-weight: 400;
- line-height: 19.2px;
-}
-
-.cometchat .cometchat-call-logs .cometchat-list-item__body-subtitle {
- overflow: hidden;
- color: #727272;
- text-overflow: ellipsis;
- white-space: nowrap;
- font-family: "Times New Roman";
- font-size: 14px;
- font-style: normal;
- font-weight: 400;
- line-height: 16.8px;
+
+```css lines
+.custom-call-log-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 8px 16px;
+ border-bottom: 1px solid var(--cometchat-border-color-light);
}
-.cometchat .cometchat-call-logs .cometchat-avatar {
- border-radius: 8px;
- background: #fbaa75;
+.custom-call-log-item__name {
+ font: var(--cometchat-font-heading4-medium);
+ color: var(--cometchat-text-color-primary);
}
-.cometchat .cometchat-call-logs .cometchat-avatar__image {
- border-radius: 8px;
+.custom-call-log-item__status {
+ font: var(--cometchat-font-body-regular);
+ color: var(--cometchat-text-color-secondary);
}
```
-
-
-***
-
-### Functionality
+### subtitleView
-These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements.
-
-Here is a code snippet demonstrating how you can customize the functionality of the `Call Logs` component.
+Replace the subtitle text (call type, duration).
-```ts
+```tsx lines
import { CometChatCallLogs } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const CallLogDemo = () => {
- return
-
-
-```js
-import { CometChatCallLogs } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const CallLogDemo = () => {
- return
-
-
-
-Below is a list of customizations along with corresponding code snippets
-
-| Property | Description | Code |
-| ------------------ | --------------------------------------------------------------------------- | ----------------------------------------------------------------- |
-| **Active Call** | Object representing the active call that is currently selected. | `activeCall={call}` |
-| **Show Scrollbar** | Controls the visibility of the scrollbar in the list. | `showScrollbar={true}` |
-| **Loading View** | A custom view to display when call logs are being loaded. | `loadingView={<>Custom Loading View}` |
-| **Empty View** | A custom view to display when no call logs are available. | `emptyView={<>Custom Empty View}` |
-| **Error View** | A custom view to display when an error occurs while fetching the call logs. | `errorView={<>Custom Error View}` |
-| **Item View** | A function that renders a JSX element to display the item view. | `itemView={(call) => { return (<>Custom Item View)}}` |
-| **Leading View** | A function that renders a JSX element to display the leading view. | `leadingView={(call) => { return (<>Custom Leading View)}}` |
-| **Title View** | A function that renders a JSX element to display the title view. | `titleView={(call) => { return (<>Custom Title View)}}` |
-| **Sub Title View** | A function that renders a JSX element to display the subtitle view. | `subtitleView={(call) => { return (<>Custom Sub Title View)}}` |
-| **Trailing View** | A function that renders a JSX element to display the trailing view. | `trailingView={(call) => { return (<>Custom Trailing View)}}` |
-
-***
-
-### Advanced
-
-For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component.
-
-***
-
-#### Call Initiated Date Time Format
-
-The `callInitiatedDateTimeFormat` property allows you to customize the **Call Initiated** timestamp displayed in the call logs.
-
-Default Date Time Format:
-
-```ruby
-new CalendarObject({
- today: `DD MMM, hh:mm A`, // Example: "25 Jan, 10:30 AM"
- yesterday: `DD MMM, hh:mm A`, // Example: "25 Jan, 10:30 AM"
- otherDays: `DD MMM, hh:mm A`, // Example: "25 Jan, 10:30 AM"
-});
-```
-
-The following example demonstrates how to modify the **Call Initiated** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject).
-
-
-
-```ts
-import { CometChatCallLogs, CalendarObject } from "@cometchat/chat-uikit-react";
-
-// Define a custom date format pattern
-function getDateFormat() {
- const dateFormat = new CalendarObject({
- today: `hh:mm A`, // Example: "10:30 AM"
- yesterday: `[yesterday]`, // Example: "yesterday"
- otherDays: `DD/MM/YYYY`, // Example: "25/05/2025"
- });
- return dateFormat;
+
+```css lines
+.custom-call-log-subtitle {
+ font: var(--cometchat-font-body-regular);
+ color: var(--cometchat-text-color-secondary);
}
-
-// Apply the custom format to the CometChatCallLogs component
-
-
-
-
-**Fallback Mechanism**
-
-* If you **do not** pass any property in the [**CalendarObject**](/ui-kit/react/localize#calendarobject), the component will first check the [**global configuration**](/ui-kit/react/localize#customisation). If the property is **also missing in the global configuration**, it will **fallback to the component's default formatting**.
+### trailingView
-
-
-***
-
-#### ItemView
-
-With this property, you can assign a custom ListItem to the Call Logs Component.
-
-Shown below is the default chat interface.
-
-
- 
-
-
-The customized chat interface is displayed below.
-
-
- 
-
-
-Use the following code to achieve the customization shown above.
+Replace the right section (call-back button area).
-```ts
-import {
- CometChatCallLogs,
- CometChatUIKitLoginListener,
- isMissedCall,
- isSentByMe,
- verifyCallUser,
-} from "@cometchat/chat-uikit-react";
+```tsx lines
import { CometChatCallLogs } from "@cometchat/chat-uikit-react";
-const CallLogDemo = () => {
- const getItemView = (call: any) => {
- const missedCall = isMissedCall(
- call,
- CometChatUIKitLoginListener?.getLoggedInUser()!
- );
- const isCallSentByMe = isSentByMe(
- call,
- CometChatUIKitLoginListener?.getLoggedInUser()!
- );
-
- let callStatus = missedCall
- ? "Missed Call"
- : isCallSentByMe
- ? "Outgoing Call"
- : "Incoming Call";
-
- let callIcon = missedCall
- ? missedIcon
- : isCallSentByMe
- ? outgoingIcon
- : incomingIcon;
-
- function formatDate(timestamp: number) {
- // Convert the timestamp from seconds to milliseconds
- const date = new Date(timestamp * 1000);
-
- // Define options for formatting
- const options: Object = {
- day: "2-digit",
- month: "short",
- hour: "2-digit",
- minute: "2-digit",
- hour12: true,
- };
-
- // Format the date with the specified options
- return date.toLocaleDateString("en-GB", options);
- }
-
+function TrailingViewCallLogs() {
+ const getTrailingView = (callLog: any) => {
return (
-
+### Filtered to video calls only
-
-```js
-import { CometChatCallLogs,CometChatUIKitLoginListener,isMissedCall,isSentByMe } from "@cometchat/chat-uikit-react";
-import React from "react";
+```tsx lines
+import { CallLogRequestBuilder } from "@cometchat/calls-sdk-javascript";
+import { CometChatCallLogs } from "@cometchat/chat-uikit-react";
-const CallLogDemo = () => {
- const getSubtitleView = (call) => {
+function VideoCallLogs({ authToken }: { authToken: string }) {
+ return (
+ ` callbacks | `onItemClick={(c) => showDetails(c)}` |
+| Filter which call logs appear | Component props | `callLogRequestBuilder` | `callLogRequestBuilder={new CallLogRequestBuilder().setLimit(5)}` |
+| Replace a section of the list item | Component props | `View` render props | `subtitleView={(c) =>
+---
-
-```css
-.cometchat-call-logs__list-item-subtitle-text {
- overflow: hidden;
- color: #727272;
- text-overflow: ellipsis;
- font: 400 14px/120% Roboto;
- font-style: normal;
-}
-```
+## Props
-
+All props are optional.
-
+---
-***
+### activeCall
-#### TrailingView
+Highlights the currently active/selected call log entry.
-You can customize the trailing view for each call logs item to meet your requirements.
+| | |
+| --- | --- |
+| Type | `any` |
+| Default | `undefined` |
-Shown below is the default chat interface.
+---
-
- 
-
+### callInitiatedDateTimeFormat
-The customized chat interface is displayed below.
+Format for displaying the call initiated timestamp.
-
- 
-
+| | |
+| --- | --- |
+| Type | `CalendarObject` |
+| Default | Component default (`DD MMM, hh:mm A`) |
-Use the following code to achieve the customization shown above.
+Falls back to [global calendar configuration](/ui-kit/react/localize#customisation) if not set.
-
-
-```ts
-import { CallLog } from "@cometchat/calls-sdk-javascript";
-import { CometChatCallLogs } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const CallLogDemo = () => {
- function formatDate(timestamp: number) {
- // Convert the timestamp from seconds to milliseconds
- const date = new Date(timestamp * 1000);
-
- // Define options for formatting
- const options: Object = {
- day: "2-digit",
- month: "short",
- hour: "2-digit",
- minute: "2-digit",
- hour12: true,
- };
-
- // Format the date with the specified options
- return date.toLocaleDateString("en-GB", options);
- }
+---
- const getTrailingView = (call: any) => {
- return (
-
+---
-
-```js
-import { CometChatCallLogs } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const CallLogDemo = () => {
- function formatDate(timestamp) {
- // Convert the timestamp from seconds to milliseconds
- const date = new Date(timestamp * 1000);
-
- // Define options for formatting
- const options = {
- day: "2-digit",
- month: "short",
- hour: "2-digit",
- minute: "2-digit",
- hour12: true,
- };
-
- // Format the date with the specified options
- return date.toLocaleDateString("en-GB", options);
- }
+### emptyView
- const getTrailingView = (call) => {
- return (
-
+### errorView
-
-```css
-.cometchat .cometchat-call-logs .cometchat-list-item__trailing-view {
- width: auto;
- overflow: hidden;
- color: #727272;
- text-overflow: ellipsis;
- font: 400 14px/120% roboto;
- font-style: normal;
-}
-```
+Custom component displayed when an error occurs.
-
+| | |
+| --- | --- |
+| Type | `JSX.Element` |
+| Default | Built-in error state |
-
+---
-#### LeadingView
+### itemView
-You can customize the leading view for each call logs item to meet your requirements.
+Custom renderer for the entire call log list item.
-Shown below is the default chat interface.
+| | |
+| --- | --- |
+| Type | `(call: any) => JSX.Element` |
+| Default | Built-in list item |
-
-
-
+---
-The customized chat interface is displayed below.
+### leadingView
-
- 
-
+Custom renderer for the avatar / left section.
-Use the following code to achieve the customization shown above.
+| | |
+| --- | --- |
+| Type | `(call: any) => JSX.Element` |
+| Default | Built-in avatar |
-
-
-```ts
-import { CallLog } from "@cometchat/calls-sdk-javascript";
-import {
- CometChatUIKitLoginListener,
- CometChatCallLogs,
-} from "@cometchat/chat-uikit-react";
-import React from "react";
+---
-const CallLogDemo = () => {
- const getLeadingView = (call: any) => {
- const loggedInUser = CometChatUIKitLoginListener.getLoggedInUser();
- return (
-
+---
-
-```js
-import {
- CometChatUIKitLoginListener,
- CometChatCallLogs,
-} from "@cometchat/chat-uikit-react";
-import React from "react";
+### onCallButtonClicked
-const CallLogDemo = () => {
- const getLeadingView = (call) => {
- const loggedInUser = CometChatUIKitLoginListener.getLoggedInUser();
- return (
-
+### onError
-
-```css
-.call-log-avatar {
- display: flex;
- width: 48px;
- height: 48px;
- padding: 8px;
- justify-content: center;
- align-items: center;
- border-radius: 1000px;
- background: #edeafa;
-}
+Callback fired when the component encounters an error.
-.call-log-missed {
- background-image: url("");
- background-size: contain;
- height: 32px;
- width: 32px;
-}
+| | |
+| --- | --- |
+| Type | `((error: CometChat.CometChatException) => void) \| null` |
+| Default | `undefined` |
-.call-log-incoming {
- background-image: url("");
- background-size: contain;
- height: 32px;
- width: 32px;
-}
+---
-.call-log-outgoing {
- background-image: url("");
- background-size: contain;
- height: 32px;
- width: 32px;
-}
-```
+### onItemClick
-
+Callback fired when a call log entry is clicked.
-
+| | |
+| --- | --- |
+| Type | `(call: any) => void` |
+| Default | `undefined` |
-#### TitleView
+---
-You can customize the title view for each call logs item to meet your requirements.
+### showScrollbar
-Shown below is the default chat interface.
+Shows the scrollbar in the call log list.
-
-
-
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-The customized chat interface is displayed below.
+---
-
- 
-
+### subtitleView
-Use the following code to achieve the customization shown above.
+Custom renderer for the subtitle text.
-
-
-```ts
-import { CallLog } from "@cometchat/calls-sdk-javascript";
-import { CometChatCallLogs } from "@cometchat/chat-uikit-react";
-import React from "react";
+| | |
+| --- | --- |
+| Type | `(call: any) => JSX.Element` |
+| Default | Built-in subtitle |
-const CallLogDemo = () => {
- const getTitleView = (call: any) => {
- return (
-
+| | |
+| --- | --- |
+| Type | `(call: any) => JSX.Element` |
+| Default | Built-in title |
-
-```js
-import { CometChatCallLogs } from "@cometchat/chat-uikit-react";
-import React from "react";
+---
-const CallLogDemo = () => {
- const getTitleView = (call) => {
- return (
-
+---
-
-```css
-.call-log-title {
- overflow: hidden;
- color: #141414;
- text-overflow: ellipsis;
- white-space: nowrap;
- font: 500 16px Roboto;
-}
-```
+## Events
-
+| Event | Payload | Fires when |
+| --- | --- | --- |
+| `CometChatMessageEvents.ccMessageSent` | `IMessages` | Call message sent |
-
+---
+
+## CSS Selectors
+
+| Target | Selector |
+| --- | --- |
+| Root | `.cometchat-call-logs` |
+| List item | `.cometchat-call-logs .cometchat-list-item` |
+| Active item | `.cometchat-call-logs__list-item-active .cometchat-list-item` |
+| Trailing view (video) | `.cometchat-call-logs__list-item-trailing-view-video` |
+| Trailing view (audio) | `.cometchat-call-logs__list-item-trailing-view-audio` |
+| Subtitle | `.cometchat-call-logs__list-item-subtitle` |
+| Subtitle date | `.cometchat-call-logs__list-item-subtitle .cometchat-date` |
+| Missed call icon | `.cometchat-call-logs__list-item-subtitle-icon-missed-call` |
+| Outgoing call icon | `.cometchat-call-logs__list-item-subtitle-icon-outgoing-call` |
+| Incoming call icon | `.cometchat-call-logs__list-item-subtitle-icon-incoming-call` |
+| Empty state | `.cometchat-call-logs__empty-state-view` |
+| Error state | `.cometchat-call-logs__error-state-view` |
+| Shimmer loading | `.cometchat-call-logs__shimmer` |
+| Outgoing call overlay | `.cometchat-call-logs__outgoing-call` |
diff --git a/ui-kit/react/components-overview.mdx b/ui-kit/react/components-overview.mdx
index dfc456255..4418f1c8d 100644
--- a/ui-kit/react/components-overview.mdx
+++ b/ui-kit/react/components-overview.mdx
@@ -1,29 +1,167 @@
---
title: "Overview"
+description: "Browse all prebuilt UI components in the CometChat React UI Kit — conversations, messages, users, groups, calls, search, and AI."
---
-CometChat's **UI Kit** is a set of pre-built UI components that allows you to easily craft an in-app chat with all the essential messaging features.
+
-## Actions
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` |
+| Required setup | `CometChatUIKit.init()` + `CometChatUIKit.login()` before rendering any component |
+| Callback actions | `on={(param) => {}}` |
+| Data filtering | `RequestBuilder={new CometChat.RequestBuilder()}` |
+| Toggle features | `hide={true}` or `show={true}` |
+| Custom rendering | `View={() => JSX}` |
+| CSS overrides | Target `.cometchat-` class in global CSS |
+| Calling | Requires separate `@cometchat/calls-sdk-javascript` package |
-Actions direct the operational behavior of a component. They are split into two categories: Predefined Actions and User-Defined Actions.
+
-### Predefined Actions
+## Architecture
-These are actions that are inherently programmed into a UI component. They are ingrained in the component itself by default, and they execute automatically in response to user interaction, without needing any additional user input.
+The UI Kit is a set of independent components that compose into chat layouts. A typical two-panel layout uses four core components:
-### User-Defined Actions
+- **CometChatConversations** — sidebar listing recent conversations (users and groups)
+- **CometChatMessageHeader** — toolbar showing avatar, name, online status, and typing indicator
+- **CometChatMessageList** — scrollable message feed with reactions, receipts, and threads
+- **CometChatMessageComposer** — rich text input with attachments, mentions, and voice notes
-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.
+Data flow: selecting a conversation in CometChatConversations yields a `CometChat.User` or `CometChat.Group` object. That object is passed as a prop (`user` or `group`) to CometChatMessageHeader, CometChatMessageList, and CometChatMessageComposer. The message components use the SDK internally — CometChatMessageComposer sends messages, CometChatMessageList receives them via real-time listeners.
-To customize the behavior of a component, actions can be overridden by you. This provides you with control over how the component responds to specific events or interactions.
+Components communicate through a publish/subscribe event bus (`CometChatMessageEvents`, `CometChatConversationEvents`, `CometChatGroupEvents`, etc.). A component emits events that other components or application code can subscribe to without direct references. See [Events](/ui-kit/react/events) for the full list.
-All components expose actions to the user, which means that users can interact with these types of components through predefined or user-defined actions.
+Each component accepts callback props (`on`), view slot props (`View`) for replacing UI sections, `RequestBuilder` props for data filtering, and CSS variable overrides on `.cometchat-` classes.
-***
+---
+
+## Component Catalog
+
+All components are imported from `@cometchat/chat-uikit-react`.
+
+### Conversations and Lists
+
+| Component | Purpose | Key Props | Page |
+| --- | --- | --- | --- |
+| CometChatConversations | Scrollable list of recent conversations | `conversationsRequestBuilder`, `onItemClick`, `onError` | [Conversations](/ui-kit/react/conversations) |
+| CometChatUsers | Scrollable list of users | `usersRequestBuilder`, `onItemClick`, `onError` | [Users](/ui-kit/react/users) |
+| CometChatGroups | Scrollable list of groups | `groupsRequestBuilder`, `onItemClick`, `onError` | [Groups](/ui-kit/react/groups) |
+| CometChatGroupMembers | Scrollable list of group members | `group`, `groupMemberRequestBuilder`, `onItemClick` | [Group Members](/ui-kit/react/group-members) |
+
+### Messages
+
+| Component | Purpose | Key Props | Page |
+| --- | --- | --- | --- |
+| CometChatMessageHeader | Toolbar with avatar, name, status, typing indicator | `user`, `group`, `enableAutoSummaryGeneration` | [Message Header](/ui-kit/react/message-header) |
+| CometChatMessageList | Scrollable message list with reactions, receipts, threads | `user`, `group`, `messagesRequestBuilder`, `goToMessageId` (string) | [Message List](/ui-kit/react/message-list) |
+| CometChatMessageComposer | Rich text input with attachments, mentions, voice notes | `user`, `group`, `onSendButtonClick`, `placeholderText` | [Message Composer](/ui-kit/react/message-composer) |
+| CometChatMessageTemplate | Pre-defined structure for custom message bubbles | `type`, `category`, `contentView`, `headerView`, `footerView` | [Message Template](/ui-kit/react/message-template) |
+| CometChatThreadHeader | Parent message bubble and reply count for threaded view | `parentMessage`, `onClose`, `hideReceipts`, `textFormatters` | [Thread Header](/ui-kit/react/thread-header) |
+
+### Calling
+
+| Component | Purpose | Key Props | Page |
+| --- | --- | --- | --- |
+| CometChatCallButtons | Voice and video call initiation buttons | `user`, `group`, `onVoiceCallClick`, `onVideoCallClick` | [Call Buttons](/ui-kit/react/call-buttons) |
+| CometChatIncomingCall | Incoming call notification with accept/decline | `call`, `onAccept(call)`, `onDecline(call)` | [Incoming Call](/ui-kit/react/incoming-call) |
+| CometChatOutgoingCall | Outgoing call screen with cancel control | `call`, `onCloseClicked` | [Outgoing Call](/ui-kit/react/outgoing-call) |
+| CometChatCallLogs | Scrollable list of call history | `callLogsRequestBuilder`, `onItemClick` | [Call Logs](/ui-kit/react/call-logs) |
+
+### Search and AI
+
+| Component | Purpose | Key Props | Page |
+| --- | --- | --- | --- |
+| CometChatSearch | Real-time search across conversations and messages | `onConversationClicked(conversation, searchKeyword?)`, `onMessageClicked(message, searchKeyword?)`, `uid`, `guid`, `textFormatters` | [Search](/ui-kit/react/search) |
+| CometChatAIAssistantChat | AI agent chat with streaming, suggestions, history | `user`, `onSendButtonClick(message, previewMessageMode?)`, `aiAssistantTools` | [AI Assistant Chat](/ui-kit/react/ai-assistant-chat) |
+
+## Component API Pattern
+
+All components share a consistent API surface.
+
+### Actions
+
+Actions control component behavior. They split into two categories:
+
+**Predefined Actions** are built into the component and execute automatically on user interaction (e.g., clicking send dispatches the message). No configuration needed.
+
+**User-Defined Actions** are callback props that fire on specific events. Override them to customize behavior:
-## Events
+```tsx lines
+ openThreadPanel(message)}
+ onError={(error) => logError(error)}
+/>
+```
+
+### Events
+
+Events enable decoupled communication between components. A component emits events that other parts of the application can subscribe to without direct references.
+
+```tsx lines
+import { CometChatMessageEvents } from "@cometchat/chat-uikit-react";
+
+const sub = CometChatMessageEvents.ccMessageSent.subscribe((message) => {
+ // react to sent message
+});
+
+// cleanup
+sub?.unsubscribe();
+```
+
+Each component page documents its emitted events in the Events section.
+
+### Filters
+
+List-based components accept `RequestBuilder` props to control which data loads:
+
+```tsx lines
+`) for style customization:
+
+```css lines
+.cometchat-message-list .cometchat-text-bubble__body-text {
+ font-family: "SF Pro";
+}
+```
+
+---
-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.
+## Next Steps
-All 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.
+
+
+ Chat features included out of the box
+
+
+ Customize colors, fonts, and styles
+
+
+ Add-on features like polls, stickers, and translation
+
+
+ Task-oriented tutorials for common patterns
+
+
diff --git a/ui-kit/react/conversations.mdx b/ui-kit/react/conversations.mdx
index a148e2bb6..d0765a5e5 100644
--- a/ui-kit/react/conversations.mdx
+++ b/ui-kit/react/conversations.mdx
@@ -1,380 +1,505 @@
---
title: "Conversations"
+description: "Scrollable list of recent one-on-one and group conversations for the logged-in user."
---
+
+```json
+{
+ "component": "CometChatConversations",
+ "package": "@cometchat/chat-uikit-react",
+ "import": "import { CometChatConversations } from \"@cometchat/chat-uikit-react\";",
+ "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";",
+ "description": "Scrollable list of recent one-on-one and group conversations for the logged-in user.",
+ "cssRootClass": ".cometchat-conversations",
+ "primaryOutput": {
+ "prop": "onItemClick",
+ "type": "(conversation: CometChat.Conversation) => void"
+ },
+ "props": {
+ "data": {
+ "conversationsRequestBuilder": {
+ "type": "CometChat.ConversationsRequestBuilder",
+ "default": "SDK default (30 per page)",
+ "note": "Pass the builder, not the result of .build()"
+ },
+ "activeConversation": {
+ "type": "CometChat.Conversation",
+ "default": "undefined"
+ },
+ "lastMessageDateTimeFormat": {
+ "type": "CalendarObject",
+ "default": "Component default (hh:mm A today, [yesterday], DD/MM/YYYY other days)",
+ "note": "Falls back to global CometChatLocalize.calendarObject if not set"
+ }
+ },
+ "callbacks": {
+ "onItemClick": "(conversation: CometChat.Conversation) => void",
+ "onSelect": "(conversation: CometChat.Conversation, selected: boolean) => void",
+ "onError": "((error: CometChat.CometChatException) => void) | null",
+ "onSearchBarClicked": "() => void"
+ },
+ "visibility": {
+ "hideReceipts": { "type": "boolean", "default": false },
+ "hideError": { "type": "boolean", "default": false },
+ "hideDeleteConversation": { "type": "boolean", "default": false },
+ "hideUserStatus": { "type": "boolean", "default": false },
+ "hideGroupType": { "type": "boolean", "default": false },
+ "showSearchBar": { "type": "boolean", "default": false },
+ "showScrollbar": { "type": "boolean", "default": false }
+ },
+ "sound": {
+ "disableSoundForMessages": { "type": "boolean", "default": false },
+ "customSoundForMessages": { "type": "string", "default": "built-in" }
+ },
+ "selection": {
+ "selectionMode": {
+ "type": "SelectionMode",
+ "values": ["SelectionMode.single (0)", "SelectionMode.multiple (1)", "SelectionMode.none (2)"],
+ "default": "SelectionMode.none"
+ }
+ },
+ "viewSlots": {
+ "itemView": "(conversation: CometChat.Conversation) => JSX.Element",
+ "leadingView": "(conversation: CometChat.Conversation) => JSX.Element",
+ "titleView": "(conversation: CometChat.Conversation) => JSX.Element",
+ "subtitleView": "(conversation: CometChat.Conversation) => JSX.Element",
+ "trailingView": "(conversation: CometChat.Conversation) => JSX.Element",
+ "headerView": "JSX.Element",
+ "searchView": "JSX.Element",
+ "loadingView": "JSX.Element",
+ "emptyView": "JSX.Element",
+ "errorView": "JSX.Element",
+ "options": "((conversation: CometChat.Conversation) => CometChatOption[]) | null"
+ },
+ "formatting": {
+ "textFormatters": {
+ "type": "CometChatTextFormatter[]",
+ "default": "default formatters from data source"
+ }
+ }
+ },
+ "events": [
+ {
+ "name": "CometChatConversationEvents.ccConversationDeleted",
+ "payload": "CometChat.Conversation",
+ "description": "Conversation deleted from list"
+ },
+ {
+ "name": "CometChatConversationEvents.ccUpdateConversation",
+ "payload": "CometChat.Conversation",
+ "description": "Conversation updated"
+ },
+ {
+ "name": "CometChatConversationEvents.ccMarkConversationAsRead",
+ "payload": "CometChat.Conversation",
+ "description": "Conversation marked as read"
+ }
+ ],
+ "sdkListeners": [
+ "onTextMessageReceived",
+ "onMediaMessageReceived",
+ "onCustomMessageReceived",
+ "onTypingStarted",
+ "onTypingEnded",
+ "onMessagesDelivered",
+ "onMessagesRead",
+ "onMessagesDeliveredToAll",
+ "onMessagesReadByAll",
+ "onUserOnline",
+ "onUserOffline",
+ "onGroupMemberJoined",
+ "onGroupMemberLeft",
+ "onGroupMemberKicked",
+ "onGroupMemberBanned",
+ "onMemberAddedToGroup"
+ ],
+ "compositionExample": {
+ "description": "Sidebar conversations wired to message view",
+ "components": [
+ "CometChatConversations",
+ "CometChatMessageHeader",
+ "CometChatMessageList",
+ "CometChatMessageComposer"
+ ],
+ "flow": "onItemClick emits CometChat.Conversation -> extract User/Group via getConversationWith() -> pass to MessageHeader, MessageList, MessageComposer"
+ },
+ "types": {
+ "CalendarObject": {
+ "today": "string | undefined",
+ "yesterday": "string | undefined",
+ "lastWeek": "string | undefined",
+ "otherDays": "string | undefined",
+ "relativeTime": {
+ "minute": "string | undefined",
+ "minutes": "string | undefined",
+ "hour": "string | undefined",
+ "hours": "string | undefined"
+ }
+ },
+ "CometChatOption": {
+ "id": "string | undefined",
+ "title": "string | undefined",
+ "iconURL": "string | undefined",
+ "onClick": "(() => void) | undefined"
+ },
+ "SelectionMode": {
+ "single": 0,
+ "multiple": 1,
+ "none": 2
+ }
+ }
+}
+```
+
-## Overview
-
-The Conversations is a Component, that shows all conversations related to the currently logged-in user.
-
-This component lists the most recent or latest conversations or contacts with whom you have exchanged messages. It provides a convenient way to quickly access and resume conversations with the people you have been in contact with recently.
-
-
- 
-
-
-## Usage
+## Where It Fits
-### Integration
+`CometChatConversations` is a sidebar list component. It renders recent conversations and emits the selected `CometChat.Conversation` via `onItemClick`. Wire it to `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer` to build a standard two-panel chat layout.
-
-
-```tsx
+```tsx lines
+import { useState } from "react";
import {
CometChatConversations,
- TitleAlignment,
+ CometChatMessageHeader,
+ CometChatMessageList,
+ CometChatMessageComposer,
} from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import "@cometchat/chat-uikit-react/css-variables.css";
+
+function ChatApp() {
+ const [selectedUser, setSelectedUser] = useState();
+ const [selectedGroup, setSelectedGroup] = useState();
+
+ const handleItemClick = (conversation: CometChat.Conversation) => {
+ const entity = conversation.getConversationWith();
+ if (entity instanceof CometChat.User) {
+ setSelectedUser(entity);
+ setSelectedGroup(undefined);
+ } else if (entity instanceof CometChat.Group) {
+ setSelectedGroup(entity);
+ setSelectedUser(undefined);
+ }
+ };
-function ConversationsDemo() {
return (
-
+
+```css lines
+.group-members__header {
+ display: flex;
+ width: 100%;
+ padding: 8px 16px;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+ border-radius: 10px;
+ border: 1px solid #e8e8e8;
+ background: #edeafa;
+}
+.group-members__header__title {
+ overflow: hidden;
+ color: #141414;
+ text-overflow: ellipsis;
+ font: 700 24px Roboto;
+}
+```
+
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
-import { useEffect, useState } from "react";
+### options
-const GroupMembersDemo = () => {
- const [chatGroup, setChatGroup] = useState(null);
+Replace the context menu / hover actions on each member item. The `options` callback receives both the group and the member.
- useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
- }, []);
+
+ 
+
+
+
+```tsx lines
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import {
+ CometChatGroupMembers,
+ CometChatOption,
+} from "@cometchat/chat-uikit-react";
+
+function CustomOptionsMembers({ group }: { group: CometChat.Group }) {
return (
- <>
- {chatGroup && (
- [
+ new CometChatOption({
+ id: "kick",
+ title: "Kick User",
+ onClick: () => { /* kick logic */ },
+ }),
+ ]}
+ />
);
-};
-
-export default GroupMembersDemo;
+}
```
-
+
+```css lines
+.cometchat-group-members .cometchat-menu-list__main-menu-item-icon {
+ background: #f44649;
+}
+.cometchat-group-members .cometchat-menu-list__menu {
+ background: transparent;
+ box-shadow: none;
+}
+```
+
-***
-
-### Events
-
-[Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.
+---
-Events emitted by the Group Members component is as follows.
+## Common Patterns
-| Event | Description |
-| ----------------------------- | ----------------------------------------------------------------- |
-| **ccGroupMemberBanned** | Triggers when the group member banned from the group successfully |
-| **ccGroupMemberKicked** | Triggers when the group member kicked from the group successfully |
-| **ccGroupMemberScopeChanged** | Triggers when the group member scope is changed in the group |
+### Hide member management actions
-
-
-```tsx
-const ccGroupMemberBanned = CometChatGroupEvents.ccGroupMemberBanned.subscribe(
- (item: IGroupMemberKickedBanned) => {
- /** Your Code */
- }
-);
-
-const ccGroupMemberKicked = CometChatGroupEvents.ccGroupMemberKicked.subscribe(
- (item: IGroupMemberKickedBanned) => {
- /** Your Code */
- }
-);
+```tsx lines
+import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
-const ccGroupMemberScopeChanged =
- CometChatGroupEvents.ccGroupMemberScopeChanged.subscribe(
- (item: IGroupMemberScopeChanged) => {
- /** Your Code */
- }
+function ReadOnlyMembers({ group }: { group: CometChat.Group }) {
+ return (
+
+### Admins and moderators only
-
+```tsx lines
+import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
-***
+function AdminMembers({ group }: { group: CometChat.Group }) {
+ return (
+
-
-```tsx
-ccGroupMemberBanned?.unsubscribe();
+### Minimal chrome
-ccGroupMemberKicked?.unsubscribe();
+```tsx lines
+import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
-ccGroupMemberScopeChanged?.unsubscribe();
+function MinimalMembers({ group }: { group: CometChat.Group }) {
+ return (
+
+---
-
+## CSS Architecture
-***
+The component uses CSS custom properties (design tokens) defined in `@cometchat/chat-uikit-react/css-variables.css`. The cascade:
-## Customization
+1. Global tokens (e.g., `--cometchat-primary-color`, `--cometchat-background-color-01`) are set on the `.cometchat` root wrapper.
+2. Component CSS (`.cometchat-group-members`) consumes these tokens via `var()` with fallback values.
+3. Overrides target `.cometchat-group-members` descendant selectors in a global stylesheet.
-To fit your app's design requirements, you can customize the appearance of the Group Members component.
+### Key Selectors
-### Style
+| Target | Selector |
+| --- | --- |
+| Root | `.cometchat-group-members` |
+| Header title | `.cometchat-group-members .cometchat-list__header-title` |
+| List item | `.cometchat-group-members .cometchat-list-item` |
+| Body title | `.cometchat-group-members .cometchat-list-item__body-title` |
+| Trailing view | `.cometchat-group-members .cometchat-list-item__trailing-view` |
+| Scope badge | `.cometchat-group-members__trailing-view-options` |
+| Admin scope badge | `.cometchat-group-members__trailing-view-options-admin` |
+| Owner scope badge | `.cometchat-group-members__trailing-view-options-owner` |
+| Participant scope badge | `.cometchat-group-members__trailing-view-options-participant` |
+| Online status | `.cometchat-group-members__list-item-online .cometchat-list-item__status` |
+| Scope change dropdown | `.cometchat-group-members .cometchat-menu-list__sub-menu` |
+| Empty state | `.cometchat-group-members__empty-state-view` |
+| Error state | `.cometchat-group-members__error-state-view` |
+| Shimmer loading | `.cometchat-group-members__shimmer` |
+| Backdrop (modal) | `.cometchat-group-members__backdrop` |
-Using CSS you can customize the look and feel of the component in your app like the color, size, shape, and fonts.
+### Example: Brand-themed group members
-
-
-```ts
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
-import React from "react";
-import "./GroupMembersStyle.css";
-
-const GroupMembersDemo = () => {
- const [chatGroup, setChatGroup] = React.useState();
-
- React.useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
- }, []);
-
- return <>{chatGroup &&
-
-
-```css
+```css lines
.cometchat-group-members .cometchat-list__header-title {
background: #feede1;
color: #f76808;
font-family: "Times New Roman";
}
-.cometchat-group-members .cometchat-list-item__body-title,
-.cometchat-group-members .cometchat-search-bar__input::placeholder {
+.cometchat-group-members .cometchat-list-item__body-title {
font-family: "Times New Roman";
}
.cometchat-group-members .cometchat-group-members__trailing-view-options {
- background: #feede1;
- color: #f76808;
font-family: "Times New Roman";
}
-
-.cometchat-group-members .cometchat-group-members__trailing-view-options-admin {
- border: 1px solid #f76808;
-}
-
-.cometchat-group-members .cometchat-group-members__trailing-view-options-owner {
- background: #f76808;
- color: #fff;
- font-family: "Times New Roman";
-}
-
-.cometchat-group-members .cometchat-list-item__leading-view,
-.cometchat-group-members .cometchat-avatar {
- height: 40px;
- width: 40px;
-}
```
-
+### Customization Matrix
-
+| What to change | Where | Property/API | Example |
+| --- | --- | --- | --- |
+| Override behavior on user interaction | Component props | `on` callbacks | `onItemClick={(m) => openProfile(m)}` |
+| Filter which members appear | Component props | `groupMemberRequestBuilder` | `groupMemberRequestBuilder={new CometChat.GroupMembersRequestBuilder("GUID").setScopes(["admin"])}` |
+| Toggle visibility of UI elements | Component props | `hide` boolean props | `hideKickMemberOption={true}` |
+| Replace a section of the list item | Component props | `View` render props | `subtitleView={(m) =>
-
-```ts
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const GroupMembersDemo = () => {
- const [chatGroup, setChatGroup] = React.useState();
-
- React.useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
- }, []);
+---
- return (
- <>
- {chatGroup && (
-
+All props are optional unless noted otherwise.
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
-import { useEffect, useState } from "react";
+---
-const GroupMembersDemo = () => {
- const [chatGroup, setChatGroup] = useState(null);
+### disableLoadingState
- useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
- }, []);
+Skips the loading spinner when re-fetching.
- return (
- <>
- {chatGroup && (
-
+### emptyView
-
+Custom component displayed when there are no members.
-Below is a list of customizations along with corresponding code snippets,
+| | |
+| --- | --- |
+| Type | `JSX.Element` |
+| Default | Built-in empty state |
-| Property | Description | Code |
-| ---------------------------- | ------------------------------------------------------------------------- | ---------------------------------------- |
-| **Hide Search** | Hides the default search bar. | `hideSearch={true}` |
-| **Hide Error** | Hides the default and custom error view passed in `errorView` prop. | `hideError={true}` |
-| **Hide Kick Member Option** | Hides the option to kick a member from the group. | `hideKickMemberOption={true}` |
-| **Hide Ban Member Option** | Hides the option to ban a member from the group. | `hideBanMemberOption={true}` |
-| **Hide Scope Change Option** | Hides the option to change the scope of a group member. | `hideScopeChangeOption={true}` |
-| **Hide User Status** | Hides the user's online/offline status indicator. | `hideUserStatus={true}` |
-| **Group** | The group for which members are being fetched. | `group={chatGroup}` |
-| **Search Keyword** | The keyword used to filter the group members list. | `searchKeyword="admin"` |
-| **Selection Mode** | Selection mode to use for the default list item view. | `selectionMode={SelectionMode.multiple}` |
-| **Show Scrollbar** | Controls the visibility of the scrollbar in the list. | `showScrollbar={true}` |
-| **Loading View** | A custom view to display during the loading state. | `loadingView={
-
+| | |
+| --- | --- |
+| Type | `CometChat.Group` |
+| Default | — |
-The customized chat interface is displayed below.
+---
-
- 
-
+### groupMemberRequestBuilder
-Use the following code to achieve the customization shown above.
+Controls which members load and in what order.
-
-
-```ts
-import { CometChat, GroupMember } from "@cometchat/chat-sdk-javascript";
-import React from "react";
-import {
- CometChatAvatar,
- CometChatGroupMembers,
- CometChatOption,
- CometChatUIKitLoginListener,
- GroupMemberUtils,
- localize,
-} from "@cometchat/chat-uikit-react";
-import "./GroupMembersStyle.css";
+| | |
+| --- | --- |
+| Type | `CometChat.GroupMembersRequestBuilder` |
+| Default | SDK default (30 per page) |
-const GroupMembersDemo = () => {
- const [chatGroup, setChatGroup] = React.useState();
+Pass the builder instance, not the result of `.build()`.
- React.useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
- }, []);
+---
- const getCustomItemView = (groupMember: GroupMember) => {
- const loggedInUser = CometChatUIKitLoginListener.getLoggedInUser();
- let scope: string | CometChatOption[] =
- GroupMemberUtils.getViewMemberOptions(
- groupMember,
- chatGroup!,
- loggedInUser?.getUid()
- );
- if (typeof scope !== "string") {
- scope = groupMember.getScope();
- }
+### headerView
- return (
-
+### hideBanMemberOption
-
-```css
-.group-member-list-item {
- display: flex;
- min-width: 240px;
- max-width: 1440px;
- padding: 8px 16px;
- align-items: center;
- gap: 12px;
- flex: 1 0 0;
- border-right: 1px solid #f5f5f5;
- background: #fff;
-}
+Hides the option to ban a member from the group.
-.group-member-list-item__content {
- display: flex;
- justify-content: space-between;
- align-items: center;
- align-self: stretch;
- width: 100%;
-}
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-.group-member-list-item__avatar {
- display: flex;
- width: 40px;
- height: 40px;
-}
-
-.group-member-list-item__avatar .cometchat-avatar,
-.group-member-list-item__avatar .cometchat-avatar__image {
- height: 40px;
- width: 40px;
- border-radius: 12px;
-}
-
-.group-member-list-item__avatar-status {
- width: 10px;
- padding: 5px;
- height: 10px;
- border-radius: 1000px;
- border: 1px solid #fff;
- position: relative;
- background: #09c26f;
- left: -12px;
- top: 30px;
-}
+---
-.group-member-list-item__content-name {
- overflow: hidden;
- color: #141414;
- text-overflow: ellipsis;
- font: 500 16px Roboto;
-}
+### hideError
-.group-member-list-item__content-tag {
- display: flex;
- padding: 4px 12px;
- justify-content: center;
- align-items: center;
- gap: 20px;
- border-radius: 1000px;
- background: #edeafa;
- overflow: hidden;
- color: #6852d6;
- text-overflow: ellipsis;
- font: 400 12px Roboto;
-}
+Hides the default and custom error views.
-.group-member-list-item__content-tag-owner {
- background: #6852d6;
- color: #fff;
-}
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-.group-member-list-item__content-tag-admin {
- border: 1px solid #6852d6;
-}
+---
-.group-member-list-item__content-tag-participant {
- display: none;
-}
-```
+### hideKickMemberOption
-
+Hides the option to kick a member from the group.
-
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-***
+---
-#### TitleView
+### hideScopeChangeOption
-The customized chat interface is displayed below.
+Hides the option to change the scope of a group member.
-
- 
-
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-Use the following code to achieve the customization shown above.
+---
-
-
-```ts
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatGroups } from "@cometchat/chat-uikit-react";
-
-// Custom title view component
-const customTitleView = (member: CometChat.GroupMember) => {
- return
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-
-```css
-.group-members__title-view{
- display: flex;
- align-items: center;
- gap: 4px;
- align-self: stretch;
- }
- .group-members__title-view-name{
- overflow: hidden;
- color: #141414;
- text-overflow: ellipsis;
- font:500 16px Roboto
- }
- .group-members__title-view-type{
- color: #FFF;
- font: 600 8px Roboto;
- display: flex;
- height: 15px;
- padding: 1px 3px;
- justify-content: center;
- align-items: center;
- gap: 3px;
- border-radius: 7px;
- background: #09C26F;
- }
- .group-members__title-view-public .group-members__title-view-role{
- //add css based on roles
- background: #0B7BEA;
- }
-```
+---
-
+### hideUserStatus
-
+Hides the user's online/offline status indicator.
-***
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-#### SubtitleView
+---
-You can customize the subtitle view for each group members to meet your requirements.
+### itemView
-Shown below is the default chat interface.
+Custom renderer for the entire list item row.
-
- 
-
+| | |
+| --- | --- |
+| Type | `(groupMember: CometChat.GroupMember) => JSX.Element` |
+| Default | Built-in list item |
-The customized chat interface is displayed below.
+---
-
- 
-
+### leadingView
-Use the following code to achieve the customization shown above.
+Custom renderer for the avatar / left section.
-
-
-```ts
-import { CometChat, GroupMember } from "@cometchat/chat-sdk-javascript";
-import React from "react";
-import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
-import "./GroupMembersStyle.css";
+| | |
+| --- | --- |
+| Type | `(groupMember: CometChat.GroupMember) => JSX.Element` |
+| Default | Built-in avatar |
-const GroupMembersDemo = () => {
- const [chatGroup, setChatGroup] = React.useState();
-
- React.useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
- }, []);
+---
- const getCustomSubtitleView = (groupMember: GroupMember) => {
- const formatTime = (timestamp: number) => {
- const date = new Date(timestamp * 1000);
- return date.toLocaleDateString();
- };
- return (
-
+---
-
-```css
-.group-member-subtitle {
- overflow: hidden;
- color: #727272;
- text-overflow: ellipsis;
- white-space: nowrap;
- font: 400 14px Roboto;
-}
-```
+### onEmpty
-
+Callback fired when the member list is empty.
-
+| | |
+| --- | --- |
+| Type | `() => void` |
+| Default | `undefined` |
-***
+---
-#### LeadingView
+### onError
-The customized chat interface is displayed below.
+Callback fired when the component encounters an error.
-
- 
-
+| | |
+| --- | --- |
+| Type | `((error: CometChat.CometChatException) => void) \| null` |
+| Default | `undefined` |
-Use the following code to achieve the customization shown above.
+---
-
-
-```ts
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatGroupMembers,CometChatAvatar } from "@cometchat/chat-uikit-react";
+### onItemClick
-// Custom leading view component
-const customLeadingView = (member: CometChat.GroupMember): JSX.Element => {
- // Determine the member's scope or owner status
- const scope = member.getUid() === group.getOwner() ? "owner" : member.getScope();
+Callback fired when a member row is clicked.
- return (
-
+---
-
-```css
-.cometchat-group-members .cometchat-list-item .group-member__leading-view .cometchat-avatar__image, .cometchat-group-members .cometchat-list-item .group-member__leading-view .cometchat-avatar{
-border-radius: 8px;
-height: 48px ;
-width: 48px ;
-}
-.group-member__leading-view-scope{
-display: flex;
-width: 48px;
-height: 15px;
-padding: 1px 3px;
-justify-content: center;
-align-items: center;
-color:#FFF;
-font:600 8px/9.6px Roboto;
-background:#FFAB00;
-position:absolute;
-bottom:-2px;
-}
-.group-member__leading-view{
-position: relative;
-}
+### onSelect
-.group-member__leading-view-participant .group-member__leading-view-scope{
-display: none;
-}
-.group-member__leading-view-owner .group-member__leading-view-scope{
-background: #0B7BEA;
-}
-.group-member__leading-view-admin .group-member__leading-view-scope{
-background: #FFAB00;
-}
-.group-member__leading-view-moderator .group-member__leading-view-scope{
-background: #09C26F;
-}
-```
+Callback fired when a member is selected/deselected. Requires `selectionMode` to be set.
-
+| | |
+| --- | --- |
+| Type | `(groupMember: CometChat.GroupMember, selected: boolean) => void` |
+| Default | `undefined` |
-
+---
-***
+### options
-#### TrailingView
+Custom context menu / hover actions for each member item.
-You can customize the trailing view for each group members to meet your requirements.
+| | |
+| --- | --- |
+| Type | `(group: CometChat.Group, groupMember: CometChat.GroupMember) => CometChatOption[]` |
+| Default | `undefined` |
-Shown below is the default chat interface.
+---
-
- 
-
+### searchKeyword
-The customized chat interface is displayed below.
+Pre-fills the search and filters the member list.
-
- 
-
+| | |
+| --- | --- |
+| Type | `string` |
+| Default | `""` |
-Use the following code to achieve the customization shown above.
+---
-
-
-```ts
-import { CometChat, GroupMember } from "@cometchat/chat-sdk-javascript";
-import React from "react";
-import {
- CometChatGroupMembers,
- CometChatOption,
- CometChatUIKitLoginListener,
- GroupMemberUtils,
- localize,
-} from "@cometchat/chat-uikit-react";
-import "./GroupMembersStyle.css";
+### searchRequestBuilder
-const GroupMembersDemo = () => {
- const [chatGroup, setChatGroup] = React.useState();
+Controls filtering when the search bar is active.
- React.useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
- }, []);
+| | |
+| --- | --- |
+| Type | `CometChat.GroupMembersRequestBuilder` |
+| Default | `undefined` |
- const getCustomTrailingView = (groupMember: GroupMember) => {
- const loggedInUser = CometChatUIKitLoginListener.getLoggedInUser();
- let scope: string | CometChatOption[] =
- GroupMemberUtils.getViewMemberOptions(
- groupMember,
- chatGroup!,
- loggedInUser?.getUid()
- );
- if (typeof scope !== "string") {
- scope = groupMember.getScope();
- }
- return (
-
+| | |
+| --- | --- |
+| Type | `SelectionMode` |
+| Default | `SelectionMode.none` |
-
-```css
-.group-member-scope-tag {
- display: flex;
- padding: 4px 12px;
- justify-content: center;
- align-items: center;
- gap: 20px;
- border-radius: 1000px;
- background: #edeafa;
- overflow: hidden;
- color: #6852d6;
- text-overflow: ellipsis;
- font: 400 12px Roboto;
+```ts lines
+enum SelectionMode {
+ single, // 0
+ multiple, // 1
+ none, // 2
}
```
-
-
-
-
-***
-
-#### HeaderView
-
-You can set the Custom headerView to add more options to the Group Members component.
-
-The customized chat interface is displayed below.
-
-
- 
-
-
-Use the following code to achieve the customization shown above.
-
-
-
-```ts
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatGroupMembers,localize } from "@cometchat/chat-uikit-react";
-import React from "react";
+---
-const getHeaderView = () => {
- return (
-
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-
-```css
-.cometchat-group-members__header {
- display: flex;
- width: 100%;
- padding: 8px 16px;
- align-items: center;
- justify-content: space-between;
- gap: 12px;
- flex: 1 0 0;
- align-self: stretch;
- border-radius: 10px;
- border: 1px solid #E8E8E8;
- background: #EDEAFA;
-}
-.cometchat-group-members__header__title {
- overflow: hidden;
- color: #141414;
- text-overflow: ellipsis;
- font: 700 24px Roboto;
-}
-.cometchat-group-members__header .cometchat-button .cometchat-button__icon {
- background: #6852D6;
-}
-.cometchat-group-members__header .cometchat-button{
- width: 24px;
- border: none;
- background: transparent;
- border-radius: 0;
- display: block;
-}
-```
-
-
-
-
+---
-***
+### subtitleView
-#### Options
+Custom renderer for the subtitle text.
-You can set the Custom options to the Group Members component.
+| | |
+| --- | --- |
+| Type | `(groupMember: CometChat.GroupMember) => JSX.Element` |
+| Default | Built-in subtitle |
-The customized chat interface is displayed below.
+---
-
-
-
+### titleView
-Use the following code to achieve the customization shown above.
+Custom renderer for the name / title text.
-
-
-```ts
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import {
- CometChatGroupMembers,
- CometChatOption,
-} from "@cometchat/chat-uikit-react";
-import React from "react";
-import "./GroupMembersStyle.css";
+| | |
+| --- | --- |
+| Type | `(groupMember: CometChat.GroupMember) => JSX.Element` |
+| Default | Built-in title |
-const GroupMembersDemo = () => {
- const [chatGroup, setChatGroup] = React.useState();
+---
- React.useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
- }, []);
+### trailingView
- return (
- <>
- {chatGroup && (
- {
- const customOptions = [
- new CometChatOption({
- id: "1",
- title: "Kick User",
- onClick: () => {
- /** Your logic for handling click of custom option. */
- },
- }),
- ];
- return customOptions;
- }}
- />
- )}
-
- );
-};
+Custom renderer for the right section (scope badge / actions).
-export default GroupMembersDemo;
-```
+| | |
+| --- | --- |
+| Type | `(groupMember: CometChat.GroupMember) => JSX.Element` |
+| Default | Built-in trailing view |
-
+---
-
-```css
-.cometchat-group-members .cometchat-menu-list__main-menu-item-icon {
- height: 24px;
- width: 24px;
- -webkit-mask: url("./assets/delete.svg") center center no-repeat;
- background: #f44649;
-}
+## Events
-.cometchat-group-members .cometchat-menu-list__menu,
-.cometchat-group-members .cometchat-menu-list__main-menu-item {
- background: transparent;
- box-shadow: none;
-}
-```
+| Event | Payload | Fires when |
+| --- | --- | --- |
+| `CometChatGroupEvents.ccGroupMemberKicked` | `IGroupMemberKickedBanned` | Member kicked |
+| `CometChatGroupEvents.ccGroupMemberBanned` | `IGroupMemberKickedBanned` | Member banned |
+| `CometChatGroupEvents.ccGroupMemberScopeChanged` | `IGroupMemberScopeChanged` | Member scope changed |
+| `CometChatGroupEvents.ccGroupMemberAdded` | `IGroupMemberAdded` | Members added |
-
+All events are RxJS `Subject` instances. Subscribe with `.subscribe()`, unsubscribe with the returned subscription's `.unsubscribe()`.
-
+---
-***
+## CSS Selectors
+
+| Target | Selector |
+| --- | --- |
+| Root | `.cometchat-group-members` |
+| Header title | `.cometchat-group-members .cometchat-list__header-title` |
+| List item | `.cometchat-group-members .cometchat-list-item` |
+| Body title | `.cometchat-group-members .cometchat-list-item__body-title` |
+| Trailing view | `.cometchat-group-members .cometchat-list-item__trailing-view` |
+| Scope badge | `.cometchat-group-members__trailing-view-options` |
+| Admin scope badge | `.cometchat-group-members__trailing-view-options-admin` |
+| Owner scope badge | `.cometchat-group-members__trailing-view-options-owner` |
+| Participant scope badge | `.cometchat-group-members__trailing-view-options-participant` |
+| Online status | `.cometchat-group-members__list-item-online .cometchat-list-item__status` |
+| Scope change dropdown | `.cometchat-group-members .cometchat-menu-list__sub-menu` |
+| Scope change list | `.cometchat-group-members .cometchat-menu-list__sub-menu-list` |
+| Empty state | `.cometchat-group-members__empty-state-view` |
+| Empty state title | `.cometchat-group-members__empty-state-view-body-title` |
+| Error state | `.cometchat-group-members__error-state-view` |
+| Error state title | `.cometchat-group-members__error-state-view-body-title` |
+| Shimmer loading | `.cometchat-group-members__shimmer` |
+| Backdrop | `.cometchat-group-members__backdrop` |
diff --git a/ui-kit/react/groups.mdx b/ui-kit/react/groups.mdx
index 27bd1cd69..ea6d13996 100644
--- a/ui-kit/react/groups.mdx
+++ b/ui-kit/react/groups.mdx
@@ -1,1129 +1,1345 @@
---
title: "Groups"
+description: "Searchable, scrollable list of all available groups with icon, name, member count, and group type indicator."
---
+
+```json
+{
+ "component": "CometChatGroups",
+ "package": "@cometchat/chat-uikit-react",
+ "import": "import { CometChatGroups } from \"@cometchat/chat-uikit-react\";",
+ "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";",
+ "description": "Searchable, scrollable list of all available groups with icon, name, member count, and group type indicator.",
+ "cssRootClass": ".cometchat-groups",
+ "primaryOutput": {
+ "prop": "onItemClick",
+ "type": "(group: CometChat.Group) => void"
+ },
+ "props": {
+ "data": {
+ "groupsRequestBuilder": {
+ "type": "CometChat.GroupsRequestBuilder",
+ "default": "SDK default (30 per page)",
+ "note": "Pass the builder, not the result of .build()"
+ },
+ "searchRequestBuilder": {
+ "type": "CometChat.GroupsRequestBuilder",
+ "default": "undefined"
+ },
+ "activeGroup": {
+ "type": "CometChat.Group",
+ "default": "undefined"
+ }
+ },
+ "callbacks": {
+ "onItemClick": "(group: CometChat.Group) => void",
+ "onSelect": "(group: CometChat.Group, selected: boolean) => void",
+ "onError": "((error: CometChat.CometChatException) => void) | null"
+ },
+ "visibility": {
+ "hideSearch": { "type": "boolean", "default": false },
+ "hideError": { "type": "boolean", "default": false },
+ "hideGroupType": { "type": "boolean", "default": false },
+ "showScrollbar": { "type": "boolean", "default": false }
+ },
+ "selection": {
+ "selectionMode": {
+ "type": "SelectionMode",
+ "values": ["SelectionMode.single (0)", "SelectionMode.multiple (1)", "SelectionMode.none (2)"],
+ "default": "SelectionMode.none"
+ }
+ },
+ "viewSlots": {
+ "itemView": "(group: CometChat.Group) => JSX.Element",
+ "leadingView": "(group: CometChat.Group) => JSX.Element",
+ "titleView": "(group: CometChat.Group) => JSX.Element",
+ "subtitleView": "(group: CometChat.Group) => JSX.Element",
+ "trailingView": "(group: CometChat.Group) => JSX.Element",
+ "headerView": "JSX.Element",
+ "loadingView": "JSX.Element",
+ "emptyView": "JSX.Element",
+ "errorView": "JSX.Element",
+ "options": "(group: CometChat.Group) => CometChatOption[]"
+ }
+ },
+ "events": [
+ {
+ "name": "CometChatGroupEvents.ccGroupCreated",
+ "payload": "CometChat.Group",
+ "description": "New group created"
+ },
+ {
+ "name": "CometChatGroupEvents.ccGroupDeleted",
+ "payload": "CometChat.Group",
+ "description": "Group deleted"
+ },
+ {
+ "name": "CometChatGroupEvents.ccGroupMemberJoined",
+ "payload": "IGroupMemberJoined",
+ "description": "User joins a group"
+ },
+ {
+ "name": "CometChatGroupEvents.ccGroupLeft",
+ "payload": "IGroupLeft",
+ "description": "User leaves a group"
+ },
+ {
+ "name": "CometChatGroupEvents.ccGroupMemberAdded",
+ "payload": "IGroupMemberAdded",
+ "description": "Members added to a group"
+ },
+ {
+ "name": "CometChatGroupEvents.ccGroupMemberScopeChanged",
+ "payload": "IGroupMemberScopeChanged",
+ "description": "Member scope changed"
+ },
+ {
+ "name": "CometChatGroupEvents.ccGroupMemberKicked",
+ "payload": "IGroupMemberKickedBanned",
+ "description": "Member kicked"
+ },
+ {
+ "name": "CometChatGroupEvents.ccGroupMemberBanned",
+ "payload": "IGroupMemberKickedBanned",
+ "description": "Member banned"
+ },
+ {
+ "name": "CometChatGroupEvents.ccOwnershipChanged",
+ "payload": "IOwnershipChanged",
+ "description": "Ownership transferred"
+ }
+ ],
+ "sdkListeners": [
+ "onGroupMemberJoined",
+ "onGroupMemberLeft",
+ "onMemberAddedToGroup",
+ "onGroupMemberKicked",
+ "onGroupMemberBanned",
+ "onGroupMemberScopeChanged"
+ ],
+ "compositionExample": {
+ "description": "Group directory wired to message view",
+ "components": [
+ "CometChatGroups",
+ "CometChatMessageHeader",
+ "CometChatMessageList",
+ "CometChatMessageComposer"
+ ],
+ "flow": "onItemClick emits CometChat.Group -> pass to MessageHeader, MessageList, MessageComposer"
+ },
+ "types": {
+ "CometChatOption": {
+ "id": "string | undefined",
+ "title": "string | undefined",
+ "iconURL": "string | undefined",
+ "onClick": "(() => void) | undefined"
+ },
+ "SelectionMode": {
+ "single": 0,
+ "multiple": 1,
+ "none": 2
+ }
+ }
+}
+```
+
-## Overview
-
-The Groups is a Component, showcasing an accessible list of all available groups. It provides an integral search functionality, allowing you to locate any specific groups swiftly and easily. For each group listed, the group name is displayed by default, in conjunction with the group icon when available. Additionally, it provides a useful feature by displaying the number of members in each group as a subtitle, offering valuable context about group size and activity level.
+## Where It Fits
-
- 
-
+`CometChatGroups` is a directory list component. It renders available groups and emits the selected `CometChat.Group` via `onItemClick`. Wire it to `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer` to build a group chat layout.
-The Groups component is composed of the following BaseComponents:
+```tsx lines
+import { useState } from "react";
+import {
+ CometChatGroups,
+ CometChatMessageHeader,
+ CometChatMessageList,
+ CometChatMessageComposer,
+} from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import "@cometchat/chat-uikit-react/css-variables.css";
-| Components | Description |
-| ----------------- | ------------------------------------------------------------------------------------------------------------------------- |
-| CometChatList | A reusable container component having title, search box, customisable background and a list view. |
-| CometChatListItem | A component that renders data obtained from a Group object on a Tile having a title, subtitle, leading and trailing view. |
+function GroupChatApp() {
+ const [selectedGroup, setSelectedGroup] = useState();
-***
+ return (
+
+
-### Integration
+---
-The following code snippet illustrates how you can directly incorporate the Groups component into your Application.
+## Minimal Render
-
-
-```tsx
+```tsx lines
import { CometChatGroups } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const GroupsDemo = () => {
- return
-
-
-```tsx
-import { GroupsDemo } from "./GroupsDemo";
+import "@cometchat/chat-uikit-react/css-variables.css";
-export default function App() {
+function GroupsDemo() {
return (
-
+### Hide all chrome — minimal list
-
-```css
-.cometchat .cometchat-groups .group-subtitle {
- overflow: hidden;
- color: #727272;
- text-overflow: ellipsis;
- white-space: nowrap;
- font-size: 14px;
- font-style: normal;
- font-weight: 400;
- line-height: 120%;
+```tsx lines
+import { CometChatGroups } from "@cometchat/chat-uikit-react";
+
+function MinimalGroups() {
+ return (
+
+### Joined groups only
-
+```tsx lines
+import { CometChatGroups } from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
-***
+function JoinedGroups() {
+ return (
+ 
-
+The component uses CSS custom properties (design tokens) defined in `@cometchat/chat-uikit-react/css-variables.css`. The cascade:
-Use the following code to achieve the customization shown above.
+1. Global tokens (e.g., `--cometchat-primary-color`, `--cometchat-background-color-01`) are set on the `.cometchat` root wrapper.
+2. Component CSS (`.cometchat-groups`) consumes these tokens via `var()` with fallback values.
+3. Overrides target `.cometchat-groups` descendant selectors in a global stylesheet.
-
-
-```ts
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatGroups,CometChatAvatar } from "@cometchat/chat-uikit-react";
-
-// Custom leading view component
- const customLeadingView = (group: CometChat.Group) => {
- return <>
- {group.getHasJoined() ?
+### Key Selectors
+
+| Target | Selector |
+| --- | --- |
+| Root | `.cometchat-groups` |
+| Header title | `.cometchat-groups .cometchat-list__header-title` |
+| Search bar input | `.cometchat-groups .cometchat-search-bar__input` |
+| List item | `.cometchat-groups .cometchat-list-item` |
+| Body title | `.cometchat-groups .cometchat-list-item__body-title` |
+| Avatar | `.cometchat-groups__list-item .cometchat-avatar` |
+| Subtitle | `.cometchat-groups__subtitle` |
+| Active item | `.cometchat-groups__list-item-active .cometchat-list-item` |
+| Password group icon | `.cometchat-groups__list-item-password .cometchat-list-item__status` |
+| Private group icon | `.cometchat-groups__list-item-private .cometchat-list-item__status` |
+| Empty state | `.cometchat-groups__empty-state-view` |
+| Error state | `.cometchat-groups__error-state-view` |
+| Shimmer loading | `.cometchat-groups__shimmer` |
+
+### Example: Brand-themed groups
-
-```css
+
+ 
+
-.cometchat-groups .cometchat-list-item .groups__leading-view .cometchat-avatar__image, .cometchat-groups .cometchat-list-item .groups__leading-view .cometchat-avatar{
- border-radius: 8px;
- height: 48px ;
- width: 48px ;
+```css lines
+.cometchat-groups .cometchat-list__header-title {
+ background-color: #edeafa;
+ color: #6852d6;
+ border-width: 0px 1px 1px 0px;
+ border-style: solid;
+ border-color: #6852d6;
+ font-family: "Times New Roman";
+ font-size: 24px;
+ font-weight: 700;
}
-.groups__leading-view-info{
- display: flex;
- width: 48px;
- height: 15px;
- padding: 1px 3px;
- justify-content: center;
- align-items: center;
- color:#FFF;
- font:600 8px/9.6px Roboto;
- background:#FFAB00;
- position:absolute;
- bottom:-2px;
+.cometchat-groups__list-item .cometchat-avatar {
+ background-color: #aa9ee8;
+ border-radius: 6.67px;
}
-.groups__leading-view-joined .groups__leading-view-info{
- background:#09C26F;
+
+.cometchat-groups .cometchat-list-item__body-title {
+ font-family: "Times New Roman";
+ font-size: 16px;
+ font-weight: 400;
}
-.groups__leading-view{
- position: relative;
+
+.cometchat-groups .cometchat-groups__subtitle {
+ font-family: "Times New Roman";
+ font-size: 14px;
+ font-weight: 400;
}
```
-
+### Customization Matrix
-
+| What to change | Where | Property/API | Example |
+| --- | --- | --- | --- |
+| Override behavior on user interaction | Component props | `on` callbacks | `onItemClick={(g) => setActive(g)}` |
+| Filter which groups appear | Component props | `groupsRequestBuilder` | `groupsRequestBuilder={new CometChat.GroupsRequestBuilder().joinedOnly(true)}` |
+| Toggle visibility of UI elements | Component props | `hide` boolean props | `hideGroupType={true}` |
+| Replace a section of the list item | Component props | `View` render props | `itemView={(group) => 
-
+---
-Use the following code to achieve the customization shown above.
+---
-
-
-```ts
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import {
- CometChatGroups,
-} from "@cometchat/chat-uikit-react";
+## Props
-// Custom trailing view component
-const customTrailingButtonView = (group:CometChat.Group) => {
-return
+### activeGroup
-
-```css
-.groups__trailing-view{
-display: flex;
-padding: 4px 12px;
-justify-content: center;
-align-items: center;
-border-radius: 1000px;
-background: #EDEAFA;
-overflow: hidden;
-color: #6852D6;
-text-overflow: ellipsis;
-font:700 12px Roboto;
-}
-.cometchat-groups .cometchat-list-item__trailing-view{
-width: fit-content;
-height: fit-content;
-}
-```
+Highlights the specified group in the list.
-
+| | |
+| --- | --- |
+| Type | `CometChat.Group` |
+| Default | `undefined` |
-
+Must be a reference-equal object from the SDK; a manually constructed object will not match.
-***
+---
-#### Header View
+### emptyView
-A custom component to render in the top-right corner of the groups list.
+Custom component displayed when there are no groups.
-The customized chat interface is displayed below.
+| | |
+| --- | --- |
+| Type | `JSX.Element` |
+| Default | Built-in empty state |
-
- 
-
+---
-Use the following code to achieve the customization shown above.
+### errorView
-
-
-```ts
-import { CometChatGroups } from "@cometchat/chat-uikit-react";
-import React from "react";
+Custom component displayed when an error occurs.
-const GroupsDemo = () => {
- const getHeaderView = () => {
- return ;
- };
+| | |
+| --- | --- |
+| Type | `JSX.Element` |
+| Default | Built-in error state |
- return
+### groupsRequestBuilder
-
-```js
-import { CometChatGroups } from "@cometchat/chat-uikit-react";
-import React from "react";
+Controls which groups load and in what order.
-const GroupsDemo = () => {
- const getHeaderView = () => {
- return ;
- };
+| | |
+| --- | --- |
+| Type | `CometChat.GroupsRequestBuilder` |
+| Default | SDK default (30 per page) |
- return
+### headerView
-
-```css
-.group-header-view {
- height: 24px;
- width: 24px;
- display: flex;
- align-items: center;
- justify-content: center;
- border: none;
- align-self: center;
- background: #6852d6;
- flex-shrink: 0;
- -webkit-mask: url("../assets/create-group.svg") center center no-repeat;
- mask: url("../assets/create-group.svg") center center no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
-}
-```
+Custom component rendered as the entire header bar.
-
+| | |
+| --- | --- |
+| Type | `JSX.Element` |
+| Default | Built-in header with title |
-
+---
-***
+### hideError
-#### Options
+Hides the default and custom error views.
-You can set the Custom options to the Groups component.
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-The customized chat interface is displayed below.
+Also suppresses `errorView` if set.
-
- 
-
+---
-Use the following code to achieve the customization shown above.
+### hideGroupType
-
-
-```ts
-import { CometChatGroups, CometChatOption } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const GroupsDemo = () => {
- const getOptions = (group: CometChat.Group): CometChatOption[] => {
- return [
- new CometChatOption({
- id: "delete",
- title: "delete",
- onClick: () => {
- console.log("Custom option clicked for group:", group);
- },
- }),
- ];
- };
+Hides the group type icon (public/private/password).
- return
+### hideSearch
-
-```js
-import { CometChatGroups, CometChatOption } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const GroupsDemo = () => {
- const getOptions = (group: CometChat.Group): CometChatOption[] => {
- return [
- new CometChatOption({
- id: "delete",
- title: "delete",
- onClick: () => {
- console.log("Custom option clicked for group:", group);
- },
- }),
- ];
- };
+Hides the default search bar.
- return
+### itemView
-
-```css
-.cometchat .cometchat-groups .cometchat-menu-list__menu {
- background: none;
+Custom renderer for the entire list item row.
+
+| | |
+| --- | --- |
+| Type | `(group: CometChat.Group) => JSX.Element` |
+| Default | Built-in list item |
+
+---
+
+### leadingView
+
+Custom renderer for the avatar / left section.
+
+| | |
+| --- | --- |
+| Type | `(group: CometChat.Group) => JSX.Element` |
+| Default | Built-in avatar |
+
+---
+
+### loadingView
+
+Custom component displayed during the loading state.
+
+| | |
+| --- | --- |
+| Type | `JSX.Element` |
+| Default | Built-in shimmer |
+
+---
+
+### onError
+
+Callback fired when the component encounters an error.
+
+| | |
+| --- | --- |
+| Type | `((error: CometChat.CometChatException) => void) \| null` |
+| Default | `undefined` |
+
+---
+
+### onItemClick
+
+Callback fired when a group row is clicked.
+
+| | |
+| --- | --- |
+| Type | `(group: CometChat.Group) => void` |
+| Default | `undefined` |
+
+---
+
+### onSelect
+
+Callback fired when a group is selected/deselected. Requires `selectionMode` to be set.
+
+| | |
+| --- | --- |
+| Type | `(group: CometChat.Group, selected: boolean) => void` |
+| Default | `undefined` |
+
+---
+
+### options
+
+Custom context menu / hover actions for each group item.
+
+| | |
+| --- | --- |
+| Type | `(group: CometChat.Group) => CometChatOption[]` |
+| Default | `undefined` |
+
+```ts lines
+class CometChatOption {
+ id?: string;
+ title?: string;
+ iconURL?: string;
+ onClick?: () => void;
}
-.cometchat .cometchat-groups .cometchat-menu-list__main-menu-item-icon {
- height: 24px;
- width: 24px;
- display: flex;
- align-items: center;
- justify-content: center;
- border: none;
- align-self: center;
- background: #f44649;
- flex-shrink: 0;
- -webkit-mask: url("../assets/delete.svg") center center no-repeat;
- mask: url("../assets/delete.svg") center center no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
+```
+
+---
+
+### searchRequestBuilder
+
+Controls filtering when the search bar is active.
+
+| | |
+| --- | --- |
+| Type | `CometChat.GroupsRequestBuilder` |
+| Default | `undefined` |
+
+---
+
+### selectionMode
+
+Enables single or multi-select checkboxes on list items.
+
+| | |
+| --- | --- |
+| Type | `SelectionMode` |
+| Default | `SelectionMode.none` |
+
+```ts lines
+enum SelectionMode {
+ single, // 0
+ multiple, // 1
+ none, // 2
}
```
-
+Must pair with `onSelect` to capture selections.
-
+---
+
+### showScrollbar
+
+Shows the scrollbar in the group list.
+
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
+
+---
+
+### subtitleView
+
+Custom renderer for the member count subtitle text.
+
+| | |
+| --- | --- |
+| Type | `(group: CometChat.Group) => JSX.Element` |
+| Default | Built-in subtitle |
+
+---
+
+### titleView
+
+Custom renderer for the name / title text.
+
+| | |
+| --- | --- |
+| Type | `(group: CometChat.Group) => JSX.Element` |
+| Default | Built-in title |
+
+---
+
+### trailingView
+
+Custom renderer for the right section.
+
+| | |
+| --- | --- |
+| Type | `(group: CometChat.Group) => JSX.Element` |
+| Default | Built-in trailing view |
+
+---
+
+## Events
+
+| Event | Payload | Fires when |
+| --- | --- | --- |
+| `CometChatGroupEvents.ccGroupCreated` | `CometChat.Group` | New group created |
+| `CometChatGroupEvents.ccGroupDeleted` | `CometChat.Group` | Group deleted |
+| `CometChatGroupEvents.ccGroupMemberJoined` | `IGroupMemberJoined` | User joins a group |
+| `CometChatGroupEvents.ccGroupLeft` | `IGroupLeft` | User leaves a group |
+| `CometChatGroupEvents.ccGroupMemberAdded` | `IGroupMemberAdded` | Members added to a group |
+| `CometChatGroupEvents.ccGroupMemberScopeChanged` | `IGroupMemberScopeChanged` | Member scope changed |
+| `CometChatGroupEvents.ccGroupMemberKicked` | `IGroupMemberKickedBanned` | Member kicked |
+| `CometChatGroupEvents.ccGroupMemberBanned` | `IGroupMemberKickedBanned` | Member banned |
+| `CometChatGroupEvents.ccGroupMemberUnbanned` | `IGroupMemberUnBanned` | Member unbanned |
+| `CometChatGroupEvents.ccOwnershipChanged` | `IOwnershipChanged` | Ownership transferred |
+
+All events are RxJS `Subject` instances. Subscribe with `.subscribe()`, unsubscribe with the returned subscription's `.unsubscribe()`.
+
+---
+
+## CSS Selectors
+
+| Target | Selector |
+| --- | --- |
+| Root | `.cometchat-groups` |
+| Header title | `.cometchat-groups .cometchat-list__header-title` |
+| Search bar input | `.cometchat-groups .cometchat-search-bar__input` |
+| List item | `.cometchat-groups .cometchat-list-item` |
+| Body title | `.cometchat-groups .cometchat-list-item__body-title` |
+| Avatar | `.cometchat-groups__list-item .cometchat-avatar` |
+| Leading view | `.cometchat-groups__list-item .cometchat-list-item__leading-view` |
+| Subtitle | `.cometchat-groups__subtitle` |
+| Active item | `.cometchat-groups__list-item-active .cometchat-list-item` |
+| Password group icon | `.cometchat-groups__list-item-password .cometchat-list-item__status` |
+| Password group status icon | `.cometchat-groups__list-item-password .cometchat-list-item__status-icon` |
+| Private group icon | `.cometchat-groups__list-item-private .cometchat-list-item__status` |
+| Private group status icon | `.cometchat-groups__list-item-private .cometchat-list-item__status-icon` |
+| Empty state | `.cometchat-groups__empty-state-view` |
+| Empty state title | `.cometchat-groups__empty-state-view-body-title` |
+| Empty state description | `.cometchat-groups__empty-state-view-body-description` |
+| Error state | `.cometchat-groups__error-state-view` |
+| Error state title | `.cometchat-groups__error-state-view-body-title` |
+| Error state description | `.cometchat-groups__error-state-view-body-description` |
+| Shimmer loading | `.cometchat-groups__shimmer` |
+| Shimmer item | `.cometchat-groups__shimmer-item` |
+| Shimmer avatar | `.cometchat-groups__shimmer-item-avatar` |
+| Shimmer title | `.cometchat-groups__shimmer-item-body-title` |
+| Shimmer subtitle | `.cometchat-groups__shimmer-item-body-subtitle` |
diff --git a/ui-kit/react/guide-block-unblock-user.mdx b/ui-kit/react/guide-block-unblock-user.mdx
index f758f45b3..163d7b9c1 100644
--- a/ui-kit/react/guide-block-unblock-user.mdx
+++ b/ui-kit/react/guide-block-unblock-user.mdx
@@ -1,51 +1,50 @@
---
title: "Block/Unblock Users"
sidebarTitle: "Block/Unblock Users"
+description: "Implement block and unblock user functionality in CometChat React UI Kit with composer state management."
---
-Implement user blocking functionality to prevent unwanted communication in your React chat app.
+
-## Overview
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` |
+| Key components | `CometChatMessages` — uses `CometChat.blockUsers()` / `CometChat.unblockUsers()` SDK methods |
+| Init | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` |
+| Events | `CometChatUserEvents.ccUserBlocked`, `CometChatUserEvents.ccUserUnblocked` |
+| UI helpers | `CometChatConfirmDialog`, `CometChatToast` |
+| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) |
+| Related | [All Guides](/ui-kit/react/guide-overview) |
-The Block Users feature allows users to prevent specific users from sending them messages, effectively cutting off communication from unwanted contacts.
+
-- Block Users feature allows users to prevent specific users from sending them messages.
-- Provides privacy control, prevents harassment, and allows users to manage their communication preferences.
-- Your app will allow users to block/unblock other users, hide message composers for blocked users, and provide appropriate UI feedback for blocked states.
+Block/Unblock lets users prevent specific users from sending them messages. When blocked, the message composer is hidden and replaced with an unblock prompt.
----
-
-## Prerequisites
-
-- React v18.2.0+
-- CometChat React UI Kit v6.1.0+
-- CometChat Chat SDK JavaScript v4.0.13+
-- Project setup with initialized CometChat credentials (App ID, Auth Key, Region)
-- TypeScript support (recommended)
-- User authentication and chat functionality already implemented
+Before starting, complete the [Getting Started](/ui-kit/react/react-js-integration) guide for your framework.
---
## Components
-| Component / Class | Role |
-|:-----------------------------------|:-----|
-| **CometChat.blockUsers()** | SDK method to block specific users |
-| **CometChat.unblockUsers()** | SDK method to unblock previously blocked users |
-| **CometChatUserEvents.ccUserBlocked** | Event listener for when a user is blocked |
-| **CometChatUserEvents.ccUserUnblocked** | Event listener for when a user is unblocked |
-| **CometChatConfirmDialog** | Confirmation dialog for block/unblock actions |
-| **CometChatToast** | Toast notifications for action feedback |
+| Component / Class | Role |
+|:---|:---|
+| `CometChat.blockUsers()` | SDK method to block specific users |
+| `CometChat.unblockUsers()` | SDK method to unblock previously blocked users |
+| `CometChatUserEvents.ccUserBlocked` | Event fired when a user is blocked |
+| `CometChatUserEvents.ccUserUnblocked` | Event fired when a user is unblocked |
+| `CometChatConfirmDialog` | Confirmation dialog for block/unblock actions |
---
## Integration Steps
-### 1. Block User Function Implementation
+### 1. Block User
+
+Call `CometChat.blockUsers()` with the target UID. On success, update the local user object with `setBlockedByMe(true)` and emit `ccUserBlocked` so all subscribed components (like the composer) react to the change.
_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
-```tsx
+```tsx lines
const onBlockUserClicked: () => Promise = () => {
let UID = user.getUid();
return new Promise(async (resolve, reject) => {
@@ -67,11 +66,13 @@ const onBlockUserClicked: () => Promise = () => {
---
-### 2. Unblock User Function Implementation
+### 2. Unblock User
+
+Call `CometChat.unblockUsers()` with the target UID. On success, reset the action items back to "Block" (instead of "Unblock"), update the local user object, and emit `ccUserUnblocked` to restore the composer.
_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
-```tsx
+```tsx lines
const onUnblockUserClicked = () => {
let UID = user.getUid();
CometChat.unblockUsers([UID]).then(
@@ -96,11 +97,13 @@ const onUnblockUserClicked = () => {
---
-### 3. Block User Confirmation Dialog
+### 3. Confirmation Dialog
+
+Show a confirmation dialog before blocking. This prevents accidental blocks. The dialog uses `CometChatConfirmDialog` with localized title, message, and button text.
_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
-```tsx
+```tsx lines
const getBlockUserConfirmationDialogView = () => {
return <>
-
+
+ {
+ console.log("Call log selected:", callLog);
+ }}
+ onCallButtonClicked={(callLog: any) => {
+ console.log("Call back:", callLog);
+ }}
+ />
);
}
```
-
-
-
-
-### Actions
-
-[Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.
-
-##### 1. onItemClick
-
-`onItemClick` is a callback function which triggers when a call log list item is clicked. It does not have a default behavior. However, you can override its behavior using the following code snippet.
-
-
+
-export default CallLogDemo;
-```
+---
-
+
+ );
+}
-export default CallLogDemo;
+export default CallLogsDemo;
```
-
-
+Replace the entire call log list item.
+
+ );
+ };
-export default CallLogDemo;
+ return
+ {callLog?.getInitiator()?.getName()}
+
+
+ {callLog?.getStatus()}
+
+
+ {callLog?.getStatus()} • {callLog?.getType()}
+
+ );
+ };
-export default CallLogDemo;
+ return
-
-
-The customized chat interface is displayed below.
-
-
-
-
-
-Use the following code to achieve the customization shown above.
+Replace the right section (call-back button area).
-
-```js
-import { CometChatCallLogs, CometChatUIKitLoginListener, isMissedCall, isSentByMe, verifyCallUser } from "@cometchat/chat-uikit-react";
-
-const CallLogDemo = () => {
- const getItemView = (call) => {
- const missedCall = isMissedCall(call, CometChatUIKitLoginListener?.getLoggedInUser()!);
- const isCallSentByMe = isSentByMe(call, CometChatUIKitLoginListener?.getLoggedInUser()!);
-
- let callStatus = missedCall
- ? "Missed Call"
- : isCallSentByMe
- ? "Outgoing Call"
- : "Incoming Call";
-
- let callIcon = missedCall
- ? missedIcon
- : isCallSentByMe
- ? outgoingIcon
- : incomingIcon;
-
- function formatDate(timestamp: number) {
- // Convert the timestamp from seconds to milliseconds
- const date = new Date(timestamp * 1000);
-
- // Define options for formatting
- const options: Object = {
- day: '2-digit',
- month: 'short',
- hour: '2-digit',
- minute: '2-digit',
- hour12: true,
- };
-
- // Format the date with the specified options
- return date.toLocaleDateString('en-GB', options);
- }
-
- return (
-
-
-
-```css
-.cometchat .cometchat-call-logs .cometchat-list-item__trailing-view {
- width: auto;
- overflow: hidden;
- color: #727272;
- text-overflow: ellipsis;
- font: 400 14px/120% roboto;
- font-style: normal;
-}
-
-.cometchat .cometchat-call-logs .cometchat-avatar {
- background-color: #edeafa;
-}
-
-.cometchat .cometchat-call-logs .cometchat-avatar__image {
- height: 24px;
- width: 24px;
-}
-
-.cometchat .cometchat-call-logs .cometchat-list-item__body-title {
- overflow: hidden;
- color: #141414;
- text-overflow: ellipsis;
- white-space: nowrap;
- font: 500 16px/19.2px roboto;
- font-style: normal;
-}
-
-.cometchat .cometchat-call-logs .cometchat-list-item__body-subtitle {
- overflow: hidden;
- color: #727272;
- text-overflow: ellipsis;
- font: 400 14px/120% roboto;
- font-style: normal;
+
+```css lines
+.custom-call-log-trailing button {
+ background: var(--cometchat-primary-color);
+ color: var(--cometchat-static-white);
+ border: none;
+ border-radius: var(--cometchat-radius-2);
+ padding: 4px 12px;
+ cursor: pointer;
}
```
-
-
-***
-
-#### SubtitleView
-
-You can customize the subtitle view for each call logs item to meet your requirements.
-
-Shown below is the default chat interface.
-
-
- 
-
-
-The customized chat interface is displayed below.
-
-
- 
-
+### callInitiatedDateTimeFormat
-Use the following code to achieve the customization shown above.
+Customize the call initiated timestamp format using a `CalendarObject`.
-
-
-```ts
+```tsx lines
import {
CometChatCallLogs,
- CometChatUIKitLoginListener,
- isMissedCall,
- isSentByMe,
+ CalendarObject,
} from "@cometchat/chat-uikit-react";
-import React from "react";
-const CallLogDemo = () => {
- const getSubtitleView = (call: any): JSX.Element => {
- const missedCall = isMissedCall(
- call,
- CometChatUIKitLoginListener?.getLoggedInUser()!
- );
- const isCallSentByMe = isSentByMe(
- call,
- CometChatUIKitLoginListener?.getLoggedInUser()!
- );
+function CustomDateCallLogs() {
+ const dateFormat = new CalendarObject({
+ today: "hh:mm A",
+ yesterday: "[yesterday]",
+ otherDays: "DD MM YYYY",
+ });
- const iconClass = missedCall
- ? "cometchat-call-logs__list-item-subtitle-icon-missed-call"
- : isCallSentByMe
- ? "cometchat-call-logs__list-item-subtitle-icon-outgoing-call"
- : "cometchat-call-logs__list-item-subtitle-icon-incoming-call";
+ return
+If no property is passed in the [CalendarObject](/ui-kit/react/localize#calendarobject), the component checks the [global configuration](/ui-kit/react/localize#customisation) first. If also missing there, the component's default formatting applies.
+
- return (
- <>
-
+
+ }
+ />
+ );
+}
```
-
+
);
};
- return
-
- )
- }
- return
-
-
-The customized chat interface is displayed below.
-
-
-
-
+### callInitiatedDateTimeFormat
-Use the following code to achieve the customization shown above.
+Customize the call initiated timestamp format using a `CalendarObject`.
-
-
-
-
- );
- };
+---
- return
- {" "}
- {callStatus}
-
- No call history
+{c.getStatus()}
}` |
+| Change colors, fonts, spacing | Global CSS | Target `.cometchat-call-logs` class | `.cometchat-call-logs .cometchat-list-item { background: #f9f8fd; }` |
- const callStatus = missedCall
- ? "Missed Call"
- : isCallSentByMe
- ? "Outgoing Call"
- : "Incoming Call";
+---
- return (
- <>
-
-
-
-
- )
- }
+## Accessibility
- return
- {callStatus}
-
-
-
+### callInitiatedDateTimeFormat
-The customized chat interface is displayed below.
+Format for displaying the call initiated timestamp.
-
-
-
+| | |
+| --- | --- |
+| Type | `CalendarObject` |
+| Default | Component default (`DD MMM, hh:mm A`) |
-Use the following code to achieve the customization shown above.
+Falls back to [global calendar configuration](/ui-kit/react/localize#customisation) if not set.
-
- {formatDate(call?.getInitiatedAt())}
-
- );
- };
+### callLogRequestBuilder
- return
- {formatDate(call?.getInitiatedAt())}
-
- );
- };
+Custom component displayed when there are no call logs.
- return
-
+---
-The customized chat interface is displayed below.
+### leadingView
-
-
-
+Custom renderer for the avatar / left section.
-Use the following code to achieve the customization shown above.
+| | |
+| --- | --- |
+| Type | `(call: any) => JSX.Element` |
+| Default | Built-in avatar |
-
- {call.status === "unanswered" || call.status === "cancelled" ? (
-
- ) : call.initiator?.uid === loggedInUser?.getUid() ? (
-
- ) : (
-
- )}
-
- );
- };
+### loadingView
- return
- {call.status === "unanswered" || call.status === "cancelled" ? (
-
- ) : call.initiator?.uid === loggedInUser?.getUid() ? (
-
- ) : (
-
- )}
-
- );
- };
+Callback fired when the call-back button is clicked.
- return
-
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-The customized chat interface is displayed below.
+---
-
-
-
+### subtitleView
-Use the following code to achieve the customization shown above.
+Custom renderer for the subtitle text.
-
- {call.initiator?.name}
- {call.status !== "unanswered" && call.status !== "cancelled" && (
- <>{" • 🕚️ " + Math.ceil(call.totalDurationInMinutes) + " mins"}
- )}
-
- );
- };
+---
- return
- {call.initiator?.name}
- {call.status !== "unanswered" && call.status !== "cancelled" && (
- <>{" • 🕚️ " + Math.ceil(call.totalDurationInMinutes) + " mins"}
- )}
-
- );
- };
+### trailingView
- return
-
-
-## Usage
+## Where It Fits
-### Integration
+`CometChatConversations` is a sidebar list component. It renders recent conversations and emits the selected `CometChat.Conversation` via `onItemClick`. Wire it to `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer` to build a standard two-panel chat layout.
-
-
-```css
-.cometchat-conversations .conversations__title-view {
- display: flex;
- gap: 4px;
- width: 100%;
-}
+```tsx lines
+import { CometChatConversations } from "@cometchat/chat-uikit-react";
-.cometchat-conversations
- .conversations__title-view
- .conversations__title-view-name {
- color: #141414;
- font: 500 16px/19.2px Roboto;
- text-align: left;
+function MinimalConversations() {
+ return (
+
+---
-
+## CSS Architecture
-***
+The component uses CSS custom properties (design tokens) defined in `@cometchat/chat-uikit-react/css-variables.css`. The cascade:
-#### SubtitleView
+1. Global tokens (e.g., `--cometchat-primary-color`, `--cometchat-background-color-01`) are set on the `.cometchat` root wrapper.
+2. Component CSS (`.cometchat-conversations`) consumes these tokens via `var()` with fallback values.
+3. Overrides target `.cometchat-conversations` descendant selectors in a global stylesheet.
-You can customize the subtitle view for each conversation item to meet your requirements.
+To scope overrides to a single instance when multiple `CometChatConversations` exist on the same page, wrap the component in a container and scope selectors:
-Shown below is the default chat interface.
+```css lines
+.sidebar-left .cometchat-conversations .cometchat-badge {
+ background: #e5484d;
+}
+```
-
- 
-
+Overrides survive component updates because the component never sets inline styles on these elements — all styling flows through CSS classes and custom properties.
+
+### Key Selectors
-The customized chat interface is displayed below.
+| Target | Selector |
+| --- | --- |
+| Root | `.cometchat-conversations` |
+| Header title | `.cometchat-conversations .cometchat-list__header-title` |
+| List item | `.cometchat-conversations .cometchat-list-item` |
+| Body title | `.cometchat-conversations .cometchat-list-item__body-title` |
+| Avatar | `.cometchat-conversations .cometchat-avatar` |
+| Avatar text | `.cometchat-conversations .cometchat-avatar__text` |
+| Unread badge | `.cometchat-conversations .cometchat-badge` |
+| Subtitle text | `.cometchat-conversations .cometchat-conversations__subtitle-text` |
+| Status indicator | `.cometchat-conversations .cometchat-status-indicator` |
+| Read receipts | `.cometchat-conversations .cometchat-receipts-read` |
+| Active item | `.cometchat-conversations__list-item-active .cometchat-list-item` |
+| Typing indicator | `.cometchat-conversations__subtitle-typing` |
+| Trailing view | `.cometchat-conversations__trailing-view` |
+
+### Example: Brand-themed conversations
- 
+ 
-Use the following code to achieve the customization shown above.
+```css lines
+.cometchat-conversations .cometchat-list-item__body-title,
+.cometchat-conversations .cometchat-list__header-title,
+.cometchat-conversations .cometchat-avatar__text,
+.cometchat-conversations .cometchat-badge,
+.cometchat-conversations .cometchat-conversations__subtitle-text {
+ font-family: "SF Pro";
+}
-
-
-```ts
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatConversations } from "@cometchat/chat-uikit-react";
+.cometchat-conversations .cometchat-list__header-title {
+ background: #fef8f8;
+ border-bottom: 2px solid #f4b6b8;
+}
-const subtitleView = (conversation: CometChat.Conversation) => {
- if (conversation.getConversationType() === "user") {
- return (
- <>
- Last Message at:{" "}
- {getFormattedTimestamp(
- (
- conversation.getConversationWith() as CometChat.User
- ).getLastActiveAt()
- )}
-
- );
- } else {
- return (
- <>
- Created at:{" "}
- {getFormattedTimestamp(
- (conversation.getConversationWith() as CometChat.Group).getCreatedAt()
- )}
-
- );
- }
-};
+.cometchat-conversations .cometchat-avatar {
+ background: #f0999b;
+}
-function getFormattedTimestamp(timestamp: number): string {
- const date = new Date(timestamp * 1000);
- return date.toLocaleString();
+.cometchat-conversations .cometchat-status-indicator {
+ min-width: 10px;
+ height: 10px;
}
-
+### Customization Matrix
-
-```css
-.cometchat-conversations .cometchat-list-item__body-subtitle {
- overflow: hidden;
- color: var(--cometchat-text-color-secondary, #727272);
- text-overflow: ellipsis;
- white-space: nowrap;
- font: var(--cometchat-font-body-regular);
- font-family: "SF Pro";
- font-style: normal;
+| What to change | Where | Property/API | Example |
+| --- | --- | --- | --- |
+| Override behavior on user interaction | Component props | `on` callbacks | `onItemClick={(c) => setActive(c)}` |
+| Filter which conversations appear | Component props | `conversationsRequestBuilder` | `conversationsRequestBuilder={new CometChat.ConversationsRequestBuilder().setLimit(10)}` |
+| Toggle visibility of UI elements | Component props | `hide` boolean props | `hideReceipts={true}` |
+| Replace a section of the list item | Component props | `View` render props | `itemView={(conversation) =>
+Falls back to [global calendar configuration](/ui-kit/react/localize#customisation) if not set.
-
+---
-***
+### leadingView
-#### Options
+Custom renderer for the avatar / left section.
-A function that returns a list of actions available when hovering over a conversation item.
+| | |
+| --- | --- |
+| Type | `(conversation: CometChat.Conversation) => JSX.Element` |
+| Default | Built-in avatar |
-Shown below is the default chat interface.
+---
-
- 
-
+### loadingView
-The customized chat interface is displayed below.
+Custom component displayed during the loading state.
-
- 
-
+| | |
+| --- | --- |
+| Type | `JSX.Element` |
+| Default | Built-in shimmer |
-Use the following code to achieve the customization shown above.
+---
-
-
-```ts
-import {
- CometChatOption,
- CometChatConversations,
-} from "@cometchat/chat-uikit-react";
+### onError
-const getOptions = (conversation: CometChat.Conversation) => {
- return [
- new CometChatOption({
- title: "Delete",
- iconURL: deleteIcon,
- id: "delete",
- onClick: () => {
- // Logic here
- },
- }),
- new CometChatOption({
- title: "Mute Notification",
- id: "mute",
- onClick: () => {
- // Logic here
- },
- }),
- new CometChatOption({
- title: "Mark as Unread",
- id: "unread",
- onClick: () => {
- // Logic here
- },
- }),
- new CometChatOption({
- title: "Block",
- id: "block",
- onClick: () => {
- // Logic here
- },
- }),
- ];
-};
+Callback fired when the component encounters an error.
-
+---
-
-```css
-.cometchat-conversations .cometchat-menu-list__main-menu-item-icon-delete {
- background: red;
-}
+### onItemClick
-.cometchat-conversations .cometchat-menu-list__sub-menu {
- background: transparent;
- box-shadow: none;
+Callback fired when a conversation row is clicked.
+
+| | |
+| --- | --- |
+| Type | `(conversation: CometChat.Conversation) => void` |
+| Default | `undefined` |
+
+---
+
+### onSearchBarClicked
+
+Callback fired when the search bar is clicked. Requires `showSearchBar={true}`.
+
+| | |
+| --- | --- |
+| Type | `() => void` |
+| Default | `undefined` |
+
+---
+
+### onSelect
+
+Callback fired when a conversation is selected/deselected. Requires `selectionMode` to be set.
+
+| | |
+| --- | --- |
+| Type | `(conversation: CometChat.Conversation, selected: boolean) => void` |
+| Default | `undefined` |
+
+---
+
+### options
+
+Custom context menu / hover actions for each conversation item.
+
+| | |
+| --- | --- |
+| Type | `((conversation: CometChat.Conversation) => CometChatOption[]) \| null` |
+| Default | Built-in delete option |
+
+```ts lines
+class CometChatOption {
+ id?: string;
+ title?: string;
+ iconURL?: string;
+ onClick?: () => void;
}
+```
+
+---
+
+### searchView
+
+Custom search bar component in the header.
+
+| | |
+| --- | --- |
+| Type | `JSX.Element` |
+| Default | Built-in search bar |
-.cometchat-conversations .cometchat-menu-list__sub-menu-icon {
- -webkit-mask: url(./assets/down-arrow.svg) center center no-repeat;
- -webkit-mask-size: contain;
+---
+
+### selectionMode
+
+Enables single or multi-select checkboxes on list items.
+
+| | |
+| --- | --- |
+| Type | `SelectionMode` |
+| Default | `SelectionMode.none` |
+
+```ts lines
+enum SelectionMode {
+ single, // 0
+ multiple, // 1
+ none, // 2
}
```
-
+Must pair with `onSelect` to capture selections.
-
+---
+
+### showScrollbar
+
+Shows the scrollbar in the conversation list.
+
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
+
+---
+
+### showSearchBar
-##### Structure of CometChatOption
+Shows a search bar at the top of the list.
-| Name | Description |
-| ----------- | ----------------------------------------------------- |
-| **id** | Unique identifier for each option. |
-| **title** | Heading text for each option. |
-| **iconURL** | Sets the asset URL of the icon for each option. |
-| **onClick** | Method to be invoked when user clicks on each option. |
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
+
+---
+
+### subtitleView
+
+Custom renderer for the last message preview text.
+
+| | |
+| --- | --- |
+| Type | `(conversation: CometChat.Conversation) => JSX.Element` |
+| Default | Built-in subtitle |
+
+---
+
+### textFormatters
+
+Custom text formatters for the conversation subtitle.
+
+| | |
+| --- | --- |
+| Type | `CometChatTextFormatter[]` |
+| Default | Default formatters from data source |
+
+See [CometChatMentionsFormatter](/ui-kit/react/mentions-formatter-guide) for mention formatting.
+
+---
+
+### titleView
+
+Custom renderer for the name / title text.
+
+| | |
+| --- | --- |
+| Type | `(conversation: CometChat.Conversation) => JSX.Element` |
+| Default | Built-in title |
+
+---
+
+### trailingView
+
+Custom renderer for the timestamp / badge / right section.
+
+| | |
+| --- | --- |
+| Type | `(conversation: CometChat.Conversation) => JSX.Element` |
+| Default | Built-in trailing view |
+
+---
+
+## Events
+
+| Event | Payload | Fires when |
+| --- | --- | --- |
+| `CometChatConversationEvents.ccConversationDeleted` | `CometChat.Conversation` | Conversation deleted from list |
+| `CometChatConversationEvents.ccUpdateConversation` | `CometChat.Conversation` | Conversation updated |
+| `CometChatConversationEvents.ccMarkConversationAsRead` | `CometChat.Conversation` | Conversation marked as read |
+
+All events are `Subject` from RxJS. Subscribe with `.subscribe()`, unsubscribe with the returned subscription's `.unsubscribe()`.
+
+---
-***
+## CSS Selectors
+
+| Target | Selector |
+| --- | --- |
+| Root | `.cometchat-conversations` |
+| Header title | `.cometchat-conversations .cometchat-list__header-title` |
+| List item | `.cometchat-conversations .cometchat-list-item` |
+| Body title | `.cometchat-conversations .cometchat-list-item__body-title` |
+| Avatar | `.cometchat-conversations .cometchat-avatar` |
+| Avatar text | `.cometchat-conversations .cometchat-avatar__text` |
+| Unread badge | `.cometchat-conversations .cometchat-badge` |
+| Subtitle text | `.cometchat-conversations .cometchat-conversations__subtitle-text` |
+| Subtitle sender | `.cometchat-conversations__subtitle-text-sender` |
+| Status indicator (online) | `.cometchat-conversations__list-item-online .cometchat-list-item__status` |
+| Group type (password) | `.cometchat-conversations__list-item-password .cometchat-list-item__status` |
+| Group type (private) | `.cometchat-conversations__list-item-private .cometchat-list-item__status` |
+| Read receipts | `.cometchat-conversations__subtitle-receipts-read` |
+| Delivered receipts | `.cometchat-conversations__subtitle-receipts-delivered` |
+| Sent receipts | `.cometchat-conversations__subtitle-receipts-sent` |
+| Error receipts | `.cometchat-conversations__subtitle-receipts-error` |
+| Active item | `.cometchat-conversations__list-item-active .cometchat-list-item` |
+| Typing indicator | `.cometchat-conversations__subtitle-typing` |
+| Trailing view | `.cometchat-conversations__trailing-view` |
+| Badge count | `.cometchat-conversations__trailing-view-badge-count` |
+| Empty state | `.cometchat-conversations__empty-state-view` |
+| Error state | `.cometchat-conversations__error-state-view` |
+| Shimmer loading | `.cometchat-conversations__shimmer` |
+| Context menu | `.cometchat-conversations__trailing-view-options` |
+| Mentions highlight | `.cometchat-conversations__subtitle-text .cometchat-mentions` |
+| @you mentions | `.cometchat-conversations__subtitle-text .cometchat-mentions-you` |
diff --git a/ui-kit/react/core-features.mdx b/ui-kit/react/core-features.mdx
index 78a6de7de..8af49af9c 100644
--- a/ui-kit/react/core-features.mdx
+++ b/ui-kit/react/core-features.mdx
@@ -1,12 +1,22 @@
---
title: "Core"
+description: "Overview of CometChat's core chat features including instant messaging, media sharing, read receipts, typing indicators, user presence, reactions, mentions, threaded conversations, search, and moderation — with the UI Kit components that power each feature."
---
-## Overview
+
-The UI Kit comprises a variety of components, each designed to work seamlessly with one another to deliver a comprehensive and intuitive chat experience.
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` |
+| Required setup | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` — 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, Search, Threaded Conversations, Moderation, Report Message, Group Chat |
+| Key components | `CometChatConversations` → [Conversations](/ui-kit/react/conversations), `CometChatMessageList` → [Message List](/ui-kit/react/message-list), `CometChatMessageComposer` → [Message Composer](/ui-kit/react/message-composer), `CometChatMessageHeader` → [Message Header](/ui-kit/react/message-header), `CometChatUsers` → [Users](/ui-kit/react/users), `CometChatGroups` → [Groups](/ui-kit/react/groups), `CometChatGroupMembers` → [Group Members](/ui-kit/react/group-members) |
+| CSS class prefix | `.cometchat-` |
+| Theming | Override CSS variables on `.cometchat` class. See [Theming](/ui-kit/react/theme) |
-Here's how different UI Kit components work together to achieve CometChat's Core features:
+
+
+The UI Kit components work together to deliver a complete chat experience. The sections below map each core feature to the components that power it.
## Instant Messaging
@@ -23,7 +33,7 @@ At the heart of CometChat's functionality is the ability to support real-time te
## Media Sharing
-Beyond text, CometChat allows users to share various media types within their conversations. This includes images, videos, audio files, and documents, enriching the chat experience and enabling more comprehensive communication.
+CometChat supports sharing images, videos, audio files, and documents within conversations.
@@ -86,7 +96,7 @@ CometChat's User Presence feature allows users to see whether their contacts are
| --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Conversations](/ui-kit/react/conversations) | [Conversations](/ui-kit/react/conversations) is a component that renders conversation list item. Conversations item also shows user presence information. |
| [Message Header](/ui-kit/react/message-header) | [Message Header](/ui-kit/react/message-header) that renders details of user/group. The Message Header also handles user presence information. |
-| [Users](/ui-kit/react/users) | [Users](/ui-kit/react/users) renders list of users available in your app.It also responsible to render users presence information. |
+| [Users](/ui-kit/react/users) | [Users](/ui-kit/react/users) renders the list of available users with presence information. |
| [Group Members](/ui-kit/react/group-members) | [Group Members](/ui-kit/react/group-members) renders list of users available in the group. The Group Members component also handles user presence information. |
## Reactions
@@ -115,45 +125,40 @@ Mentions is a robust feature provided by CometChat that enhances the interactivi
| [Message Composer](/ui-kit/react/message-composer) | [Message Composer](/ui-kit/react/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. |
| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/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
+## Threaded Conversations
-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.
+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 |
-| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/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/react/message-composer) | [Message Composer](/ui-kit/react/message-composer) works seamlessly with Quoted Message by showing the quoted reply above the input field, letting users compose their response in proper context. |
+| Components | Functionality |
+| ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Threaded Message Preview](/ui-kit/react/threaded-message-preview) | [Threaded Message Preview](/ui-kit/react/threaded-message-preview) component displays the parent message along with the number of replies. |
-## Conversation and Advanced Search
+## Quoted Replies
-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.
+Quoted Replies 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.
- 
+
| Components | Functionality |
| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Search](/ui-kit/react/search) | [Search](/ui-kit/react/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/react/message-header) | [Message Header](/ui-kit/react/message-header) shows the search button in the chat header, allowing users to search within a conversation. |
-| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) shows the selected message when clicked from search results and highlights it in the message list. |
-| [Conversations](/ui-kit/react/conversations) | [Conversations](/ui-kit/react/conversations) displays the search input. |
+| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/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/react/message-composer) | [Message Composer](/ui-kit/react/message-composer) shows the quoted reply above the input field, providing context for the response. |
-## Threaded Conversations
+## Group Chat
-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.
+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 |
-| ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Threaded Message Preview](/ui-kit/react/threaded-message-preview) | [Threaded Message Preview](/ui-kit/react/threaded-message-preview) component displays the parent message along with the number of replies. |
+See the [Groups](/ui-kit/react/groups) component page for details.
## Moderation
@@ -169,9 +174,9 @@ Learn more about setting up moderation rules and managing content in the [Modera
| Components | Functionality |
| ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) automatically handles moderated messages, displaying blocked content appropriately based on your moderation settings. |
+| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) automatically handles moderated messages, displaying blocked content based on moderation settings. |
-After implementing moderation rules, users can report messages they find inappropriate or harmful. As a next step, you can enable the **[Report Message](#report-message)** feature to allow users to flag messages for review by moderators.
+The **[Report Message](#report-message)** feature enables users to flag messages for review by moderators.
## Report Message
@@ -189,12 +194,37 @@ Learn more about how flagged messages are handled, reviewed, and moderated in th
| ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) provides the "Report Message" option in the message actions menu, allowing users to initiate the reporting process for inappropriate messages. |
-## 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/react/groups).
+| Components | Functionality |
+| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Search](/ui-kit/react/search) | [Search](/ui-kit/react/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/react/message-header) | [Message Header](/ui-kit/react/message-header) shows the search button in the chat header, allowing users to search within a conversation. |
+| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) shows the selected message when clicked from search results and highlights it in the message list. |
+| [Conversations](/ui-kit/react/conversations) | [Conversations](/ui-kit/react/conversations) displays the search input. |
+
+See the [Groups](/ui-kit/react/groups) component page for details.
+---
+
+## Next Steps
+
+
+
+ Browse all available UI Kit components
+
+
+ Customize the look and feel of your chat UI
+
+
+ Add audio and video calling
+
+
+ Explore AI-powered chat capabilities
+
+
diff --git a/ui-kit/react/custom-text-formatter-guide.mdx b/ui-kit/react/custom-text-formatter-guide.mdx
index eadbdc933..5411a5ec3 100644
--- a/ui-kit/react/custom-text-formatter-guide.mdx
+++ b/ui-kit/react/custom-text-formatter-guide.mdx
@@ -1,46 +1,59 @@
---
title: "Custom Text Formatter"
+description: "Extend the CometChatTextFormatter base class to implement custom inline text patterns with regex and callbacks."
---
-## Overview
+
-You can create your custom text formatter for CometChat using the `CometChatTextFormatter`. `CometChatTextFormatter` is an abstract utility class that serves as a foundational structure for enabling text formatting in the message composer and text message bubbles. It can be extended to create custom formatter classes, tailored to suit specific application needs, making it a valuable tool for text customization and enhancement in chat interfaces.
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` |
+| Key class | `CometChatTextFormatter` (abstract base class for custom formatters) |
+| Required setup | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` |
+| Purpose | Extend to create custom inline text patterns with regex, styling, and callbacks |
+| Features | Text formatting, customizable styles, dynamic text replacement, input field integration, key event callbacks |
+| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) |
+| Related | [ShortCut Formatter](/ui-kit/react/shortcut-formatter-guide) \| [Mentions Formatter](/ui-kit/react/mentions-formatter-guide) \| [All Guides](/ui-kit/react/guide-overview) |
-## Features
+
-* **Text Formatting:**: Enables automatic formatting of text within messages based on specified styles and settings, enhancing the visual presentation of chat content.
-* **Customizable Styles:**: Tailor text styles, including colors, fonts, and background colors, to match the desired appearance for formatted text.
-* **Dynamic Text Replacement:**: Utilizes regular expression patterns to identify and replace specific text patterns with formatted content, offering flexibility in text manipulation.
-* **Input Field Integration:**: Seamlessly integrates with the text input field, allowing for real-time monitoring and processing of user input for formatting purposes.
-* **Callback Functions:**: Implement callback functions for key up and key down events, providing hooks for custom actions or formatting logic based on user interactions.
+`CometChatTextFormatter` is an abstract class for formatting text in the message composer and message bubbles. Extend it to build custom formatters — hashtags, keywords, or any regex-based pattern.
+
+| Capability | Description |
+| --- | --- |
+| Text formatting | Auto-format text based on regex patterns and styles |
+| Custom styles | Set colors, fonts, and backgrounds for matched text |
+| Dynamic replacement | Regex-based find-and-replace in user input |
+| Input integration | Real-time monitoring of the composer input field |
+| Key event callbacks | Hooks for `keyUp` and `keyDown` events |
-Always wrap formatted data in a span with a unique CSS class (for example, "custom-hashtag"). This lets the UI Kit render it as-is instead of sanitizing it along with other tags.
+Always wrap formatted output in a `` with a unique CSS class (e.g. `"custom-hashtag"`). This tells the UI Kit to render it as-is instead of sanitizing it.
-## Usage
-
-here are the steps to create your custom text formatter for CometChat using the `CometChatTextFormatter`:
+---
-To integrate the `CometChatTextFormatter` class into your application:
+## Steps
-1. Firstly, you need to import `CometChatTextFormatter` from the CometChat UI Kit react library.
+### 1. Import the base class
-```javascript
+```javascript lines
import { CometChatTextFormatter } from "@cometchat/chat-uikit-react";
```
-2. Now, extend the `CometChatTextFormatter` class to create your custom text formatter class. In this case, let's create a `HashTagTextFormatter`.
+### 2. Extend it
-```java
+```javascript lines
class HashTagTextFormatter extends CometChatTextFormatter {
...
}
```
-3. set up the `trackCharacter`, `regexPatterns` and `regexToReplaceFormatting`. For a hashtag formatter, we're setting the track character to `#`.
+### 3. Configure tracking character and regex
+
+Set the character that triggers formatting, the regex to match, and the regex to strip formatting back to plain text.
-```csharp
+```javascript lines
this.setTrackingCharacter("#");
this.setRegexPatterns([/\B#(\w+)\b/g]);
this.setRegexToReplaceFormatting([
@@ -48,24 +61,26 @@ this.setRegexToReplaceFormatting([
]);
```
-4. Set callback functions for key up and key down events.
+### 4. Set key event callbacks
-```javascript
+```javascript lines
this.setKeyUpCallBack(this.onKeyUp.bind(this));
this.setKeyDownCallBack(this.onKeyDown.bind(this));
```
-5. Implement the `getFormattedText`, `getOriginalText` and custom logic to format text methods.
+### 5. Implement formatting methods
-```typescript
+```typescript lines
getFormattedText(inputText:string) { ... }
getOriginalText(inputText:string) { ... }
customLogicToFormatText(inputText: string) { ... }
```
+---
+
## Example
-Below is an example demonstrating how to use a custom formatter class in components such as [CometChatConversations](/ui-kit/react/conversations), [CometChatMessageList](/ui-kit/react/message-list), [CometChatMessageComposer](/ui-kit/react/message-composer).
+A hashtag formatter used with [CometChatMessageList](/ui-kit/react/message-list) and [CometChatMessageComposer](/ui-kit/react/message-composer).
@@ -73,75 +88,49 @@ Below is an example demonstrating how to use a custom formatter class in compone
-```ts
+```ts lines
import { CometChatTextFormatter } from "@cometchat/chat-uikit-react";
class HashTagTextFormatter extends CometChatTextFormatter {
constructor() {
super();
- // Set the tracking character to #
this.setTrackingCharacter("#");
-
- // Define regex patterns to find specific text patterns
- this.setRegexPatterns([
- /\B#(\w+)\b/g, // Matches hashtags starting with #
- ]);
-
- // Define regex patterns to replace formatter text with original text
- this.setRegexToReplaceFormatting([
- /#(\w+)/g, // Replace hashtags without formatting
- ]);
-
- // Set callback functions for key up and key down events
+ this.setRegexPatterns([/\B#(\w+)\b/g]);
+ this.setRegexToReplaceFormatting([/#(\w+)/g]);
this.setKeyUpCallBack(this.onKeyUp.bind(this));
this.setKeyDownCallBack(this.onKeyDown.bind(this));
-
- // Set the re-render callback function
this.setReRender(() => {
- // Trigger re-rendering of the message composer component
- // This could involve updating the UI with the formatted text
console.log("Re-rendering message composer to update text content.");
});
-
- // Initialize composer tracking
this.initializeComposerTracking();
}
initializeComposerTracking() {
- // Get the reference to the input field (composer)
const composerInput = document.getElementById("yourComposerInputId");
-
- // Set the reference to the input field
this.setInputElementReference(composerInput);
}
getCaretPosition(): number {
if (!this.inputElementReference) return 0;
-
const selection = window.getSelection();
if (!selection || selection.rangeCount === 0) return 0;
-
const range = selection.getRangeAt(0);
const clonedRange = range.cloneRange();
clonedRange.selectNodeContents(this.inputElementReference);
clonedRange.setEnd(range.endContainer, range.endOffset);
-
return clonedRange.toString().length;
}
setCaretPosition(position: number) {
if (!this.inputElementReference) return;
-
const range = document.createRange();
const selection = window.getSelection();
if (!selection) return;
-
range.setStart(
this.inputElementReference.childNodes[0] || this.inputElementReference,
position
);
range.collapse(true);
-
selection.removeAllRanges();
selection.addRange(range);
}
@@ -150,14 +139,11 @@ class HashTagTextFormatter extends CometChatTextFormatter {
if (event.key === this.trackCharacter) {
this.startTracking = true;
}
- // Custom logic to format hashtags as users type in the composer
if (this.startTracking && (event.key === " " || event.key === "Enter")) {
const caretPosition = this.getCaretPosition();
this.formatText();
this.setCaretPosition(caretPosition);
}
- // Check if the last character typed was not a space or enter
- // and if the caret position is at the end, then we need to set start tracking to false
if (
this.startTracking &&
event.key !== " " &&
@@ -174,29 +160,20 @@ class HashTagTextFormatter extends CometChatTextFormatter {
this.inputElementReference?.textContent ||
"";
const formattedText = this.getFormattedText(inputValue);
- // Update the composer with formatted text
if (this.inputElementReference) {
this.inputElementReference.innerHTML = formattedText || "";
- // Trigger re-render of the composer
this.reRender();
}
}
- onKeyDown(event: KeyboardEvent) {
- // Custom onKeyDown logic can be added here
- }
+ onKeyDown(event: KeyboardEvent) {}
getFormattedText(inputText: string) {
- if (!inputText) {
- // Edit at cursor position and return void
- return;
- }
- // Perform custom logic to format text (e.g., formatting hashtags)
+ if (!inputText) return;
return this.customLogicToFormatText(inputText);
}
customLogicToFormatText(inputText: string) {
- // Replace hashtags with HTML span elements to change color to green
return inputText.replace(
/\B#(\w+)\b/g,
'#$1'
@@ -204,19 +181,13 @@ class HashTagTextFormatter extends CometChatTextFormatter {
}
getOriginalText(inputText: string) {
- // Sample implementation
- if (!inputText) {
- return "";
- }
- // Remove formatting and return original text
+ if (!inputText) return "";
for (let i = 0; i < this.regexToReplaceFormatting.length; i++) {
let regexPattern = this.regexToReplaceFormatting[i];
-
if (inputText) {
inputText = inputText.replace(regexPattern, "#$1");
}
}
-
return inputText;
}
}
@@ -227,11 +198,13 @@ export default HashTagTextFormatter;
-```tsx
+
+Pass the formatter via the `textFormatters` prop.
+
+```tsx lines
import { HashTagTextFormatter } from "./HashTagTextFormatter";
export default function MessageListDemo() {
-
const [chatUser, setChatUser] = React.useState();
React.useEffect(() => {
@@ -239,83 +212,70 @@ export default function MessageListDemo() {
setChatUser(user);
})
}, [])
- return (
-
-
-## Methods
-
-| Methods | Setter | Description |
-| ------------------------------------ | -------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| protected `trackCharacter` | `setTrackingCharacter(trackCharacter: string)` | The character to track in the text input field. This can be used to start capturing texts to format. Example: This would be `#` in case of HashTags. And a HashTag formatter would start capturing texts as soon as it encounters `#`. |
-| protected `currentCaretPosition` | `setCaretPositionAndRange(currentCaretPosition: Selection, currentRange: Range)` | Message Composer sets the current selection in this field. |
-| protected `currentRange` | `setCaretPositionAndRange(currentCaretPosition: Selection, currentRange: Range)` | Message Composer sets the text range that the user has selected or the cursor position in this field. |
-| protected `inputElementReference` | `setInputElementReference(inputElementReference: HTMLElement)` | Message Composer sets the Reference to the text input field(DOM element) in this field. This can be used to `read` the `textContent`. |
-| protected `regexPatterns` | `setRegexPatterns(regexPatterns: Array)` | Array of regex patterns to find specific text pattern in the user input text in order to replace those with formatted texts. |
-| protected `regexToReplaceFormatting` | `setRegexToReplaceFormatting(regexToReplaceFormatting: Array)` | Array of regex patterns to replace the formatter text with original text. |
-| protected `keyUpCallBack` | `setKeyUpCallBack(keyUpCallBack: Function)` | The callback function to be called for key up events. |
-| protected `keyDownCallBack` | `setKeyDownCallBack(keyDownCallBack: Function)` | The callback function to be called for key down events. |
-| protected `reRender` | `setReRender(reRender: Function)` | Callback function to be called in order to trigger a re-render of the message composer component. This is useful for force rerendering the composer in order to update text content on the UI. |
-| protected `loggedInUser` | `setLoggedInUser(loggedInUser: CometChat.User)` | Composer and text bubbles will set the logged in user object in this field. |
-| protected `id` | `setId(id: string)` | Use this to set a unique id for the formatter instance. |
-
-
+---
-The `textContent` or `innerHtml` of the reference element should not be directly modified in a formatter. The formatters should instead call the `reRender` callback to force the composer to call the `getFormattedText` function of the formatter instead.
+## Methods Reference
+
+| Field | Setter | Description |
+| --- | --- | --- |
+| `trackCharacter` | `setTrackingCharacter(char)` | Character that starts tracking (e.g. `#` for hashtags) |
+| `currentCaretPosition` | `setCaretPositionAndRange(selection, range)` | Current selection set by the composer |
+| `currentRange` | `setCaretPositionAndRange(selection, range)` | Text range or cursor position set by the composer |
+| `inputElementReference` | `setInputElementReference(element)` | DOM reference to the composer input field |
+| `regexPatterns` | `setRegexPatterns(patterns)` | Regex patterns to match text for formatting |
+| `regexToReplaceFormatting` | `setRegexToReplaceFormatting(patterns)` | Regex patterns to strip formatting back to plain text |
+| `keyUpCallBack` | `setKeyUpCallBack(fn)` | Callback for key up events |
+| `keyDownCallBack` | `setKeyDownCallBack(fn)` | Callback for key down events |
+| `reRender` | `setReRender(fn)` | Triggers a re-render of the composer to update displayed text |
+| `loggedInUser` | `setLoggedInUser(user)` | Logged-in user object, set by composer and text bubbles |
+| `id` | `setId(id)` | Unique identifier for the formatter instance |
+
+Don't modify `textContent` or `innerHTML` of the input element directly. Call `reRender` instead — the composer will invoke `getFormattedText` for all formatters in order.
-
-
-Upon calling `reRender`, the composer will invoke the `getFormattedText` function for all text formatters, following the same order in which they were received as props.
-
-
+---
-## Methods to be overriden for your custom formatter implementations:
+## Override Methods
-```js
- /**
- * If the input text is provided, it returns the formatted text. Otherwise, it edits the text using the current cursor position.
- * @param {string|null} inputText - The text to format.
- * @return {string|void} - The original or formatted input text, or void if editing was done based on cursor position.
- */
- getFormattedText(inputText: string | null, params: any): string | void {
- if (!inputText) {
- //edit at cursor position and return void
- return;
- }
- return this.customLogicToFromatText(inputText);
+
+Returns formatted HTML from input text, or edits at cursor position if `inputText` is null.
+
+```js lines
+getFormattedText(inputText: string | null, params: any): string | void {
+ if (!inputText) {
+ return; // edit at cursor position
}
+ return this.customLogicToFromatText(inputText);
+}
```
-```js
-/**
- * Handles 'keydown' events.
- * @param {KeyboardEvent} event - The keyboard event.
- */
+
+Handles `keyup` events. Start tracking when the track character is typed.
+
+```js lines
onKeyUp(event: KeyboardEvent) {
if (event.key == this.trackCharacter) {
this.startTracking = true;
}
- //sample implementation
if (this.startTracking && event.key == " ") {
this.debouncedFormatTextOnKeyUp();
}
@@ -325,32 +285,23 @@ onKeyUp(event: KeyboardEvent) {
-```js
-/**
- * Handles 'keydown' events.
- * @param {KeyboardEvent} event - The keyboard event.
- */
+
+Handles `keydown` events.
+
+```js lines
onKeyDown(event: KeyboardEvent) {}
```
-```js
-/**
- * Composer and Text Bubbles will call this function when rendering the HTML content.
- * This will be called for each HTML Element present in the formatted string.
- * Each formatter will check if the HTML Element belongs to the formatter before registering event listeners
- * Formatters can identify the respective HTML Element using unique css classes
- * @param {HTMLElement} element - The element on which the events need to be registered
- * @param {DOMTokenList} domTokenList - The classes to be added
- * @return {HTMLElement} - The element with the registered event listeners
- */
+
+Called by the composer and text bubbles for each HTML element in the formatted string. Check for your formatter's CSS class before attaching listeners.
+
+```js lines
registerEventListeners(element: HTMLElement, domTokenList: DOMTokenList) {
- //sample implementation
let classList: string[] = Array.from(domTokenList);
for (let i = 0; i < classList.length; i++) {
- //mentionsCssClassMapping is a list of unique css classes Mentions Formatter checks for
if (classList[i] in this.mentionsCssClassMapping) {
element.addEventListener("click", (event: Event) => {
clearTimeout(this.timeoutID);
@@ -407,30 +358,40 @@ registerEventListeners(element: HTMLElement, domTokenList: DOMTokenList) {
-```js
- /**
- * Returns the original unformatted text from the input text.
- * @param {string|null|undefined} inputText - The input text to get original text from.
- * @return {string} - The original text.
- */
- getOriginalText(inputText: string | null | undefined): string {
- //sample implmentation
- if (!inputText) {
- return "";
- }
- for (let i = 0; i < this.regexToReplaceFormatting.length; i++) {
- let regexPattern = this.regexToReplaceFormatting[i];
-
- if (inputText) {
- inputText = inputText.replace(regexPattern, "$1");
- }
- }
- return inputText;
+Strips formatting and returns plain text.
+```js lines
+getOriginalText(inputText: string | null | undefined): string {
+ if (!inputText) return "";
+ for (let i = 0; i < this.regexToReplaceFormatting.length; i++) {
+ let regexPattern = this.regexToReplaceFormatting[i];
+ if (inputText) {
+ inputText = inputText.replace(regexPattern, "$1");
+ }
+ }
+ return inputText;
}
```
+
+
+---
-
\ No newline at end of file
+## Next Steps
+
+
+
+ Add @mentions with styled tokens.
+
+
+ Customize the message input component.
+
+
+ Browse all feature and formatter guides.
+
+
+ Full working sample application on GitHub.
+
+
diff --git a/ui-kit/react/events.mdx b/ui-kit/react/events.mdx
index 0ba3e00fc..b00bb4989 100644
--- a/ui-kit/react/events.mdx
+++ b/ui-kit/react/events.mdx
@@ -1,96 +1,98 @@
---
title: "Events"
+description: "Reference for CometChat React UI Kit events including conversation, user, group, message, and call 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.
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` |
+| Conversation events | `ccConversationDeleted`, `ccUpdateConversation` |
+| User events | `ccUserBlocked`, `ccUserUnblocked` |
+| Group events | `ccGroupCreated`, `ccGroupDeleted`, `ccGroupLeft`, `ccGroupMemberScopeChanged`, `ccGroupMemberKicked`, `ccGroupMemberBanned`, `ccGroupMemberUnbanned`, `ccGroupMemberJoined`, `ccGroupMemberAdded`, `ccOwnershipChanged` |
+| Message events | `ccMessageSent`, `ccMessageEdited`, `ccReplyToMessage`, `ccMessageDeleted`, `ccMessageRead`, `ccLiveReaction`, plus SDK listener events |
+| Call events | `ccOutgoingCall`, `ccCallAccepted`, `ccCallRejected`, `ccCallEnded` |
+| UI events | `ccActiveChatChanged` |
+| Purpose | Decoupled communication between UI Kit components — subscribe to events to react to changes without direct component references |
-All 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.
+
+
+Events provide decoupled communication between UI Kit components. Components emit events in response to user interactions or state changes, allowing other parts of the application to react without direct component references.
### CometChatConversationEvents
-`CometChatConversationEvents` emits events when the logged-in user executes some action on a conversation object.
+`CometChatConversationEvents` emits events when the logged-in user acts on a conversation object.
| Name | Description |
| ------------------------- | ------------------------------------------------------------------------------------------------ |
-| ccConversationDeleted | This event is triggered when the user successfully deletes a conversation. |
-| ccUpdateConversation | This event is triggered to update a conversation in the conversation list. Takes a Conversation object to update. |
+| **ccConversationDeleted** | This event is triggered when the user successfully deletes a conversation. |
+| **ccUpdateConversation** | This event is triggered to update a conversation in the conversation list. Takes a Conversation object to update. |
### CometChatUserEvents
-`CometChatUserEvents` emits events when the logged-in user executes some action on an user object.
-
-It consists of the following events:
+`CometChatUserEvents` emits events when the logged-in user acts on another user object.
| Name | Description |
| --------------- | ------------------------------------------------------------------------- |
-| ccUserBlocked | This event is triggered when the user successfully blocks another user. |
-| ccUserUnblocked | This event is triggered when the user successfully unblocks another user. |
+| **ccUserBlocked** | This event is triggered when the user successfully blocks another user. |
+| **ccUserUnblocked** | This event is triggered when the user successfully unblocks another user. |
### CometChatGroupEvents
-`CometChatGroupEvents` emits events when the logged-in user executes some action on a group object.
-
-It consists of the following events:
+`CometChatGroupEvents` emits events when the logged-in user acts on a group object.
| Name | Description |
| ------------------------- | ------------------------------------------------------------------------------------ |
-| ccGroupCreated | This event is triggered when the user creates a group successfully |
-| ccGroupDeleted | This event is triggered when the group member deletes the group successfully |
-| ccGroupLeft | This event is triggered when the group member leaves the group successfully |
-| ccGroupMemberScopeChanged | This event is triggered when the group member's scope is updated successfully |
-| ccGroupMemberKicked | This event is triggered when the group member is kicked |
-| ccGroupMemberBanned | This event is triggered when the group member is banned |
-| ccGroupMemberUnbanned | This event is triggered when the group member is un-banned |
-| ccGroupMemberJoined | This event is triggered when a user joins the group |
-| ccGroupMemberAdded | This event is triggered when a user is added to the group |
-| ccOwnershipChanged | This event is triggered when the group ownership is assigned to another group member |
+| **ccGroupCreated** | This event is triggered when the user creates a group successfully |
+| **ccGroupDeleted** | This event is triggered when the group member deletes the group successfully |
+| **ccGroupLeft** | This event is triggered when the group member leaves the group successfully |
+| **ccGroupMemberScopeChanged** | This event is triggered when the group member's scope is updated successfully |
+| **ccGroupMemberKicked** | This event is triggered when the group member is kicked |
+| **ccGroupMemberBanned** | This event is triggered when the group member is banned |
+| **ccGroupMemberUnbanned** | This event is triggered when the group member is un-banned |
+| **ccGroupMemberJoined** | This event is triggered when a user joins the group |
+| **ccGroupMemberAdded** | This event is triggered when a user is added to the group |
+| **ccOwnershipChanged** | This event is triggered when the group ownership is assigned to another group member |
### CometChatMessageEvents
-`CometChatMessageEvents` emits events when the logged-in user executes some action on a message object.
-
-It consists of the following events:
+`CometChatMessageEvents` emits events when the logged-in user acts on a message object.
| Name | Description |
| -------------------------- | --------------------------------------------------------------------------------------------------------- |
-| ccMessageSent | This event is triggered when the sent message is in transit and also when it is received by the receiver. |
-| ccMessageEdited | This event is triggered when the user successfully edits the message. |
-| ccReplyToMessage | This event is triggered when the user successfully replies to a message. |
-| ccMessageDeleted | This event is triggered when the user successfully deletes the message. |
-| ccMessageRead | This event is triggered when the sent message is read by the receiver. |
-| ccLiveReaction | This event is triggered when the user sends a live reaction. |
-| onTextMessageReceived | This event is emitted when the CometChat SDK listener emits a text message. |
-| onMediaMessageReceived | This event is emitted when the CometChat SDK listener emits a media message. |
-| onCustomMessageReceived | This event is emitted when the CometChat SDK listener emits a custom message. |
-| onTypingStarted | This event is emitted when the CometChat SDK listener indicates that a user has started typing. |
-| onTypingEnded | This event is emitted when the CometChat SDK listener indicates that a user has stopped typing. |
-| onMessagesDelivered | This event is emitted when the CometChat SDK listener indicates that messages have been delivered. |
-| onMessagesRead | This event is emitted when the CometChat SDK listener indicates that messages have been read. |
-| onMessageEdited | This event is emitted when the CometChat SDK listener indicates that a message has been edited. |
-| onMessageDeleted | This event is emitted when the CometChat SDK listener indicates that a message has been deleted. |
-| onTransientMessageReceived | This event is emitted when the CometChat SDK listener emits a transient message. |
+| **ccMessageSent** | This event is triggered when the sent message is in transit and also when it is received by the receiver. |
+| **ccMessageEdited** | This event is triggered when the user successfully edits the message. |
+| **ccReplyToMessage** | This event is triggered when the user successfully replies to a message. |
+| **ccMessageDeleted** | This event is triggered when the user successfully deletes the message. |
+| **ccMessageRead** | This event is triggered when the sent message is read by the receiver. |
+| **ccLiveReaction** | This event is triggered when the user sends a live reaction. |
+| **onTextMessageReceived** | This event is emitted when the CometChat SDK listener emits a text message. |
+| **onMediaMessageReceived** | This event is emitted when the CometChat SDK listener emits a media message. |
+| **onCustomMessageReceived** | This event is emitted when the CometChat SDK listener emits a custom message. |
+| **onTypingStarted** | This event is emitted when the CometChat SDK listener indicates that a user has started typing. |
+| **onTypingEnded** | This event is emitted when the CometChat SDK listener indicates that a user has stopped typing. |
+| **onMessagesDelivered** | This event is emitted when the CometChat SDK listener indicates that messages have been delivered. |
+| **onMessagesRead** | This event is emitted when the CometChat SDK listener indicates that messages have been read. |
+| **onMessageEdited** | This event is emitted when the CometChat SDK listener indicates that a message has been edited. |
+| **onMessageDeleted** | This event is emitted when the CometChat SDK listener indicates that a message has been deleted. |
+| **onTransientMessageReceived** | This event is emitted when the CometChat SDK listener emits a transient message. |
### CometChatCallEvents
-`CometChatCallEvents` emits events when the logged-in user executes some action on a call object.
-
-It consists of the following events:
+`CometChatCallEvents` emits events when the logged-in user acts on a call object.
| Name | Description |
| -------------- | ---------------------------------------------------------------------------- |
-| ccOutgoingCall | This event is triggered when the user initiates a voice/video call. |
-| ccCallAccepted | This event is triggered when the initiated call is accepted by the receiver. |
-| ccCallRejected | This event is triggered when the initiated call is rejected by the receiver. |
-| ccCallEnded | This event is triggered when the initiated call successfully ends. |
+| **ccOutgoingCall** | This event is triggered when the user initiates a voice/video call. |
+| **ccCallAccepted** | This event is triggered when the initiated call is accepted by the receiver. |
+| **ccCallRejected** | This event is triggered when the initiated call is rejected by the receiver. |
+| **ccCallEnded** | This event is triggered when the initiated call successfully ends. |
### UI events
-UI events, refer to actions or interactions performed by a user within the CometChat's UI Kit. These events are triggered when a user interacts with various UI elements, such as buttons, menus, checkboxes, input fields, or any other interactive components.
-
-It consists of the following events:
+UI events are triggered when a user interacts with UI Kit elements such as buttons, menus, or input fields.
| Name | Description |
| ------------------- | ---------------------------------------------------------------------------- |
-| ccActiveChatChanged | This event is triggered when the user navigates to a particular chat window. |
+| **ccActiveChatChanged** | This event is triggered when the user navigates to a particular chat window. |
diff --git a/ui-kit/react/extensions.mdx b/ui-kit/react/extensions.mdx
index 15f4332d9..613091fb2 100644
--- a/ui-kit/react/extensions.mdx
+++ b/ui-kit/react/extensions.mdx
@@ -1,87 +1,197 @@
---
title: "Extensions"
+description: "Overview of CometChat's extensions grouped by Dashboard categories (User Experience, User Engagement, Collaboration, Security, Customer Support, Smart Chat Features) and how they auto-integrate into React UI Kit components."
---
-## Overview
+
+
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` |
+| Required setup | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` + Extensions enabled in [CometChat Dashboard](/fundamentals/extensions-overview) |
+| Extension categories | User Experience, User Engagement, Collaboration, Security, Customer Support, Smart Chat Features |
+| Key components | `CometChatMessageComposer` → [Message Composer](/ui-kit/react/message-composer) (Stickers, Polls, Whiteboard, Document), `CometChatMessageList` → [Message List](/ui-kit/react/message-list) (Translation, Link Preview, Thumbnails) |
+| Activation | Enable each extension from the CometChat Dashboard — UI Kit auto-integrates them, no additional code required |
-CometChat's UI Kit offers built-in support for various extensions, enriching the chatting experience with enhanced functionality. These extensions augment your chat application, making it more interactive, secure, and efficient.
+
-Activating extensions within CometChat is a straightforward process through your application's dashboard. For detailed instructions, refer to our guide on [Extensions](/fundamentals/extensions-overview).
+## Overview
-Once you've enabled your desired extension in the dashboard, it seamlessly integrates into your CometChat application upon initialization and successful login. It's important to note that extension features will only be available if they are supported by the CometChat UI Kit.
+CometChat UI Kit includes built-in support for extensions that add interactive, secure, and efficient features to chat. Extensions are activated from the [CometChat Dashboard](/fundamentals/extensions-overview) and auto-integrate into UI Kit components on init and login.
-CometChat's UI Kit provides native support for 12 powerful extensions. This effortless integration enables you to enhance your chat application with engaging features without any additional coding. Simply enable the desired extensions from the CometChat Dashboard, and they will automatically enhance the relevant components of your application, providing a richer and more engaging experience for your users.
+
+Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. Extensions must be activated from the [CometChat Dashboard](/fundamentals/extensions-overview).
+
## Built-in Extensions
-Here's a guide on how you can enable and integrate these extensions:
+The grouping below mirrors the CometChat Dashboard.
+
+### User Experience
-### Stickers
+#### Bitly
-The Stickers extension allows users to express their emotions more creatively. It adds a much-needed fun element to the chat by allowing users to send various pre-designed stickers. For a comprehensive understanding and guide on implementing and using the Sticker Extension, refer to our specific guide on the [Sticker Extension](/fundamentals/stickers).
+Shortens long URLs in text messages using Bitly. See [Bitly Extension](/fundamentals/bitly).
-Once you have successfully activated the [Sticker Extension](/fundamentals/stickers) from your CometChat Dashboard, the feature will automatically be incorporated into the [Message Composer](/ui-kit/react/message-composer) component of UI Kits.
+#### Link Preview
+
+Displays a summary (title, description, thumbnail) for URLs shared in chat. See [Link Preview Extension](/fundamentals/link-preview).
+
+Auto-integrates into the Message Bubble of [MessageList](/ui-kit/react/message-list) when activated.
- 
+ 
-### Polls
+#### Message Shortcuts
+
+Sends predefined messages using short codes (e.g., `!hb` expands to `Happy birthday!`). See [Message Shortcuts Extension](/fundamentals/message-shortcuts).
+
+#### Pin Message
+
+Pins important messages in a conversation for easy access. See [Pin Message Extension](/fundamentals/pin-message).
+
+#### Rich Media Preview
+
+Generates rich preview panels for URLs using iFramely. See [Rich Media Preview Extension](/fundamentals/rich-media-preview).
+
+#### Save Message
+
+Bookmarks messages for later reference. Saved messages are private to the user. See [Save Message Extension](/fundamentals/save-message).
-The Polls extension enhances group discussions by allowing users to create polls. Users can ask questions with a predefined list of answers, enabling a quick, organized way to gather group opinions. For a comprehensive understanding and guide on implementing and using the Polls Extension, refer to our specific guide on the [Polls Extension](/fundamentals/polls).
+#### Thumbnail Generation
-Once you have successfully activated the [Polls Extension](/fundamentals/polls) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/react/message-composer) component of UI Kits.
+Creates smaller preview images for shared images, reducing bandwidth. See [Thumbnail Generation Extension](/fundamentals/thumbnail-generation).
+
+Auto-integrates into the Message Bubble of [MessageList](/ui-kit/react/message-list) when activated.
- 
+ 
-### Collaborative Whiteboard
+#### TinyURL
+
+URL shortening using TinyURL. See [TinyURL Extension](/fundamentals/tinyurl).
+
+#### Voice Transcription
+
+Converts audio messages to text. See [Voice Transcription Extension](/fundamentals/voice-transcription).
+
+### User Engagement
+
+#### Giphy
-The Collaborative Whiteboard extension facilitates real-time collaboration. Users can draw, brainstorm, and share ideas on a shared digital whiteboard. For a comprehensive understanding and guide on implementing and using the Collaborative Whiteboard Extension, refer to our specific guide on the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard).
+Search and share GIFs from Giphy. See [Giphy Extension](/fundamentals/giphy).
-Once you have successfully activated the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/react/message-composer) component of UI Kits.
+#### Message Translation
+
+Translates messages into the local locale. See [Message Translation Extension](/fundamentals/message-translation).
+
+Auto-integrates into the Action Sheet of [MessageList](/ui-kit/react/message-list) when activated.
- 
+ 
-### Collaborative Document
+#### Polls
-With the Collaborative Document extension, users can work together on a shared document. This feature is essential for remote teams where document collaboration is a recurring requirement. For a comprehensive understanding and guide on implementing and using the Collaborative Document Extension, refer to our specific guide on the [Collaborative Document Extension](/fundamentals/collaborative-document).
+Creates polls in group discussions with predefined answer options. See [Polls Extension](/fundamentals/polls).
-Once you have successfully activated the [Collaborative Document Extension](/fundamentals/collaborative-document) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/react/message-composer) component of UI Kits.
+Auto-integrates into the Action Sheet of [Message Composer](/ui-kit/react/message-composer) when activated.
- 
+
-### Message Translation
+#### Reminders
+
+Sets reminders for messages or creates personal reminders. A bot sends a notification when due. See [Reminders Extension](/fundamentals/reminders).
-The Message Translation extension in CometChat is designed to translate any message into your local locale. It eliminates language barriers, making the chat more inclusive. For a comprehensive understanding and guide on implementing and using the Message Translation Extension, refer to our specific guide on the [Message Translation Extension](/fundamentals/message-translation).
+#### Stickers
-Once you have successfully activated the [Message Translation Extension](/fundamentals/message-translation) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of [MessageList Component](/ui-kit/react/message-list) component of UI Kits.
+Sends pre-designed stickers in chat. See [Sticker Extension](/fundamentals/stickers).
+
+Auto-integrates into [Message Composer](/ui-kit/react/message-composer) when activated.
-
+
-### Link Preview
+#### Stipop
+
+Integrates Stipop's sticker library. See [Stipop Extension](/fundamentals/stickers-stipop).
+
+#### Tenor
+
+Search and share GIFs from Tenor. See [Tenor Extension](/fundamentals/tenor).
+
+### Collaboration
+
+#### Collaborative Document
-The Link Preview extension provides a summary of the URL shared in the chat. It includes the title, a description, and a thumbnail image from the web page. For a comprehensive understanding and guide on implementing and using the Link Preview Extension, refer to our specific guide on the [Link Preview Extension](/fundamentals/link-preview).
+Shared document editing for real-time collaboration. See [Collaborative Document Extension](/fundamentals/collaborative-document).
-Once you have successfully activated the [Link Preview Extension](/fundamentals/link-preview) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/react/message-list) component of UI Kits.
+Auto-integrates into the Action Sheet of [Message Composer](/ui-kit/react/message-composer) when activated.
-
+
-### Thumbnail Generation
+#### Collaborative Whiteboard
-The Thumbnail Generation extension automatically creates a smaller preview image whenever a larger image is shared, helping to reduce the upload/download time and bandwidth usage. For a comprehensive understanding and guide on implementing and using the Thumbnail Generation Extension, refer to our specific guide on the [Thumbnail Generation Extension](/fundamentals/thumbnail-generation).
+Real-time shared whiteboard for drawing and brainstorming. See [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard).
-Once you have successfully activated the [Thumbnail Generation Extension](/fundamentals/thumbnail-generation) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/react/message-list) component of UI Kits.
+Auto-integrates into the Action Sheet of [Message Composer](/ui-kit/react/message-composer) when activated.
-
+
+
+### Security
+
+#### Disappearing Messages
+
+Messages auto-delete after a specified interval. Works for 1:1 and group messages. See [Disappearing Messages Extension](/fundamentals/disappearing-messages).
+
+### Customer Support
+
+#### Chatwoot
+
+Routes user messages to Chatwoot for customer support. See [Chatwoot Extension](/fundamentals/chatwoot).
+
+#### Intercom
+
+Integrates Intercom for in-app customer support. See [Intercom Extension](/fundamentals/intercom).
+
+### Smart Chat Features
+
+#### Conversation Starter
+
+AI-generated opening messages for new chats. See [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter) and [AI Features](/ui-kit/react/ai-features).
+
+#### Smart Replies
+
+AI-generated response suggestions based on conversation context. See [Smart Replies](/fundamentals/ai-user-copilot/smart-replies) and [AI Features](/ui-kit/react/ai-features).
+
+#### Conversation Summary
+
+AI-generated recap of long conversations. See [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary) and [AI Features](/ui-kit/react/ai-features).
+
+---
+
+## Next Steps
+
+
+
+ Customize the composer where most extensions appear
+
+
+ Customize the message list for extension-rendered content
+
+
+ Core chat features like messaging and reactions
+
+
+ AI-powered chat capabilities
+
+
diff --git a/ui-kit/react/group-members.mdx b/ui-kit/react/group-members.mdx
index ce7ec270f..7e1fa0397 100644
--- a/ui-kit/react/group-members.mdx
+++ b/ui-kit/react/group-members.mdx
@@ -1,1463 +1,1197 @@
---
title: "Group Members"
+description: "Scrollable, searchable list of members in a specific group with roles, scopes, online status, and member management actions."
---
+
+```json
+{
+ "component": "CometChatGroupMembers",
+ "package": "@cometchat/chat-uikit-react",
+ "import": "import { CometChatGroupMembers } from \"@cometchat/chat-uikit-react\";",
+ "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";",
+ "description": "Scrollable, searchable list of members in a specific group with roles, scopes, online status, and member management actions.",
+ "cssRootClass": ".cometchat-group-members",
+ "primaryOutput": {
+ "prop": "onItemClick",
+ "type": "(groupMember: CometChat.GroupMember) => void"
+ },
+ "props": {
+ "data": {
+ "group": {
+ "type": "CometChat.Group",
+ "required": true,
+ "note": "The group whose members are displayed"
+ },
+ "groupMemberRequestBuilder": {
+ "type": "CometChat.GroupMembersRequestBuilder",
+ "default": "SDK default (30 per page)",
+ "note": "Pass the builder, not the result of .build()"
+ },
+ "searchRequestBuilder": {
+ "type": "CometChat.GroupMembersRequestBuilder",
+ "default": "undefined"
+ },
+ "searchKeyword": {
+ "type": "string",
+ "default": "\"\""
+ }
+ },
+ "callbacks": {
+ "onItemClick": "(groupMember: CometChat.GroupMember) => void",
+ "onSelect": "(groupMember: CometChat.GroupMember, selected: boolean) => void",
+ "onEmpty": "() => void",
+ "onError": "((error: CometChat.CometChatException) => void) | null"
+ },
+ "visibility": {
+ "hideSearch": { "type": "boolean", "default": false },
+ "hideError": { "type": "boolean", "default": false },
+ "hideKickMemberOption": { "type": "boolean", "default": false },
+ "hideBanMemberOption": { "type": "boolean", "default": false },
+ "hideScopeChangeOption": { "type": "boolean", "default": false },
+ "hideUserStatus": { "type": "boolean", "default": false },
+ "disableLoadingState": { "type": "boolean", "default": false },
+ "showScrollbar": { "type": "boolean", "default": false }
+ },
+ "selection": {
+ "selectionMode": {
+ "type": "SelectionMode",
+ "values": ["SelectionMode.single (0)", "SelectionMode.multiple (1)", "SelectionMode.none (2)"],
+ "default": "SelectionMode.none"
+ }
+ },
+ "viewSlots": {
+ "itemView": "(groupMember: CometChat.GroupMember) => JSX.Element",
+ "leadingView": "(groupMember: CometChat.GroupMember) => JSX.Element",
+ "titleView": "(groupMember: CometChat.GroupMember) => JSX.Element",
+ "subtitleView": "(groupMember: CometChat.GroupMember) => JSX.Element",
+ "trailingView": "(groupMember: CometChat.GroupMember) => JSX.Element",
+ "headerView": "JSX.Element",
+ "loadingView": "JSX.Element",
+ "emptyView": "JSX.Element",
+ "errorView": "JSX.Element",
+ "options": "(group: CometChat.Group, groupMember: CometChat.GroupMember) => CometChatOption[]"
+ }
+ },
+ "events": [
+ {
+ "name": "CometChatGroupEvents.ccGroupMemberKicked",
+ "payload": "IGroupMemberKickedBanned",
+ "description": "Member kicked"
+ },
+ {
+ "name": "CometChatGroupEvents.ccGroupMemberBanned",
+ "payload": "IGroupMemberKickedBanned",
+ "description": "Member banned"
+ },
+ {
+ "name": "CometChatGroupEvents.ccGroupMemberScopeChanged",
+ "payload": "IGroupMemberScopeChanged",
+ "description": "Member scope changed"
+ },
+ {
+ "name": "CometChatGroupEvents.ccGroupMemberAdded",
+ "payload": "IGroupMemberAdded",
+ "description": "Members added"
+ }
+ ],
+ "sdkListeners": [
+ "onGroupMemberScopeChanged",
+ "onGroupMemberKicked",
+ "onGroupMemberBanned",
+ "onMemberAddedToGroup",
+ "onGroupMemberLeft",
+ "onGroupMemberJoined",
+ "onUserOnline",
+ "onUserOffline"
+ ],
+ "types": {
+ "CometChatOption": {
+ "id": "string | undefined",
+ "title": "string | undefined",
+ "iconURL": "string | undefined",
+ "onClick": "(() => void) | undefined"
+ },
+ "SelectionMode": {
+ "single": 0,
+ "multiple": 1,
+ "none": 2
+ }
+ }
+}
+```
+
+
+## Where It Fits
+
+`CometChatGroupMembers` is a panel component that renders the member list for a specific group. It requires a `group` prop and provides built-in member management actions (kick, ban, scope change) based on the logged-in user's role. Typically rendered alongside the message view in a group chat layout.
+
+```tsx lines
+import { useEffect, useState } from "react";
+import {
+ CometChatGroupMembers,
+ CometChatMessageHeader,
+ CometChatMessageList,
+ CometChatMessageComposer,
+} from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import "@cometchat/chat-uikit-react/css-variables.css";
+
+function GroupChatWithMembers() {
+ const [group, setGroup] = useState();
+
+ useEffect(() => {
+ CometChat.getGroup("GROUP_GUID").then(setGroup);
+ }, []);
-## Overview
+ if (!group) return null;
-`CometChatGroupMembers` is a Component that displays all users added or invited to a group, granting them access to group discussions, shared content, and collaborative features. Group members can communicate in real-time via messaging, voice and video calls, and other activities. They can interact, share files, and join calls based on group permissions set by the administrator or owner.
+ return (
+ 
-***
-
-## Usage
-
-### Integration
+---
-The following code snippet illustrates how you can directly incorporate the Group Members component into your Application.
+## Minimal Render
-
-
-```tsx
-import { CometChat } from "@cometchat/chat-sdk-javascript";
+```tsx lines
+import { useEffect, useState } from "react";
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
-import React from "react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import "@cometchat/chat-uikit-react/css-variables.css";
-const GroupMembersDemo = () => {
- const [chatGroup, setChatGroup] = React.useState();
+function GroupMembersDemo() {
+ const [group, setGroup] = useState();
- React.useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
+ useEffect(() => {
+ CometChat.getGroup("GROUP_GUID").then(setGroup);
}, []);
- return <>{chatGroup &&
+Root CSS class: `.cometchat-group-members`
+
+---
+
+## Filtering Group Members
+
+Pass a `CometChat.GroupMembersRequestBuilder` to `groupMemberRequestBuilder`. Pass the builder instance — not the result of `.build()`.
-
-```tsx
-import { GroupMembersDemo } from "./GroupMembersDemo";
+```tsx lines
+import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
-export default function App() {
+function FilteredGroupMembers({ group }: { group: CometChat.Group }) {
return (
-
-
-
+### Filter Recipes
-***
+| Recipe | Code |
+| --- | --- |
+| Limit to 10 per page | `new CometChat.GroupMembersRequestBuilder("GUID").setLimit(10)` |
+| Search by keyword | `new CometChat.GroupMembersRequestBuilder("GUID").setSearchKeyword("john")` |
+| Admins and moderators only | `new CometChat.GroupMembersRequestBuilder("GUID").setScopes(["admin", "moderator"])` |
-### Actions
+Default page size is 30. The component uses infinite scroll — the next page loads as the user scrolls to the bottom.
-[Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.
+The `searchRequestBuilder` prop accepts a separate `GroupMembersRequestBuilder` for filtering when the search bar is active.
-##### 1. onSelect
+Refer to [GroupMembersRequestBuilder](/sdk/javascript/retrieve-group-members) for the full builder API.
-The `onSelect` action is activated when you select the done icon while in selection mode. This returns a list of all the group members that you have selected.
+---
-This action does not come with any predefined behavior. However, you have the flexibility to override this event and tailor it to suit your needs using the following code snippet.
+## Actions and Events
-
-
-```ts
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import {
- CometChatGroupMembers,
- SelectionMode,
-} from "@cometchat/chat-uikit-react";
-import React from "react";
+### Callback Props
-const GroupMembersDemo = () => {
- const [chatGroup, setChatGroup] = React.useState();
+#### onItemClick
- React.useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
- }, []);
+Fires when a member row is tapped.
- function handleOnSelect(
- groupMembers: CometChat.GroupMember,
- selected: boolean
- ): void {
- console.log(groupMembers, selected);
- /** Your custom onSelect actions */
- }
+```tsx lines
+import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+function GroupMembersWithClick({ group }: { group: CometChat.Group }) {
return (
- <>
- {chatGroup && (
- {
+ console.log("Selected member:", member.getName());
+ }}
+ />
);
-};
-
-export default GroupMembersDemo;
+}
```
-
+#### onSelect
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript";
+Fires when a member is checked/unchecked in multi-select mode. Requires `selectionMode` to be set.
+
+```tsx lines
+import { useState } from "react";
import {
- CometChatGroupMembers,
- SelectionMode,
+ CometChatGroupMembers,
+ SelectionMode,
} from "@cometchat/chat-uikit-react";
-import React, { useEffect, useState } from "react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
-const GroupMembersDemo = () => {
- const [chatGroup, setChatGroup] = useState(null);
+function BatchSelectMembers({ group }: { group: CometChat.Group }) {
+ const [selected, setSelected] = useState>(new Set());
- useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
+ return (
+ {
+ setSelected((prev) => {
+ const next = new Set(prev);
+ const uid = member.getUid();
+ isSelected ? next.add(uid) : next.delete(uid);
+ return next;
});
- }, []);
-
- function handleOnSelect(groupMembers, selected) {
- console.log(groupMembers);
- /** Your custom onSelect actions
- }
-
- return (
- <>
- {chatGroup && (
-
-
-
-
-##### 2. onItemClick
+#### onEmpty
-The `onItemClick` event is activated when you click on the Group Members List item. This action does not come with any predefined behavior. However, you have the flexibility to override this event and tailor it to suit your needs using the following code snippet.
+Fires when the member list has no data to display.
-
-
-```ts
-import { CometChat } from "@cometchat/chat-sdk-javascript";
+```tsx lines
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const GroupMembersDemo = () => {
- const [chatGroup, setChatGroup] = React.useState();
-
- React.useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
- }, []);
-
- function handleOnItemClick(groupMembers: CometChat.GroupMember): void {
- console.log(groupMembers, "your custom on item click action");
- }
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+function GroupMembersWithEmpty({ group }: { group: CometChat.Group }) {
return (
- <>
- {chatGroup && (
- console.log("No members found")}
+ />
);
-};
-
-export default GroupMembersDemo;
+}
```
-
-
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
-import { useEffect, useState } from "react";
-
-const GroupMembersDemo = () => {
- const [chatGroup, setChatGroup] = useState(null);
+#### onError
- useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
- }, []);
+Fires on internal errors (network failure, auth issue, SDK exception).
- function handleOnItemClick(groupMembers) {
- console.log(groupMembers, "your custom on item click action");
- }
+```tsx lines
+import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+function GroupMembersWithError({ group }: { group: CometChat.Group }) {
return (
- <>
- {chatGroup && (
- {
+ console.error("CometChatGroupMembers error:", error);
+ }}
+ />
);
-};
-
-export default GroupMembersDemo;
+}
```
-
+### Global UI Events
-
+`CometChatGroupEvents` emits events subscribable from anywhere in the application. The component both emits and subscribes to these events.
-##### 3. onEmpty
+Events emitted by this component:
-This action allows you to specify a callback function to be executed when a certain condition, typically the absence of data or content, is met within the component or element.
+| Event | Fires when | Payload |
+| --- | --- | --- |
+| `ccGroupMemberKicked` | A member is kicked | `IGroupMemberKickedBanned` |
+| `ccGroupMemberBanned` | A member is banned | `IGroupMemberKickedBanned` |
+| `ccGroupMemberScopeChanged` | A member's scope changes | `IGroupMemberScopeChanged` |
-
-
-```ts
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
-import React from "react";
+Events subscribed internally:
+
+| Event | Internal behavior |
+| --- | --- |
+| `ccGroupMemberKicked` | Removes the kicked member from the list |
+| `ccGroupMemberBanned` | Removes the banned member from the list |
+| `ccGroupMemberScopeChanged` | Updates the member's scope in the list |
+| `ccGroupMemberAdded` | Appends newly added members to the list |
-const GroupMembersDemo = () => {
- const [chatGroup, setChatGroup] = React.useState();
+```tsx lines
+import { useEffect } from "react";
+import { CometChatGroupEvents } from "@cometchat/chat-uikit-react";
+
+function useGroupMemberEvents() {
+ useEffect(() => {
+ const kickedSub = CometChatGroupEvents.ccGroupMemberKicked.subscribe(
+ (item) => {
+ console.log("Member kicked:", item.kickedUser.getName());
+ }
+ );
+ const scopeSub = CometChatGroupEvents.ccGroupMemberScopeChanged.subscribe(
+ (item) => {
+ console.log("Scope changed:", item.updatedUser.getName(), "to", item.scopeChangedTo);
+ }
+ );
- React.useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
+ return () => {
+ kickedSub?.unsubscribe();
+ scopeSub?.unsubscribe();
+ };
}, []);
+}
+```
- function handleOnEmpty(): void {
- console.log("your custom on empty actions");
- }
+### SDK Events (Real-Time, Automatic)
- return (
- <>
- {chatGroup && (
-
+
+In React 18 StrictMode, `useEffect` runs twice on mount in development. The component handles listener cleanup internally, but any additional listeners added alongside the component need cleanup in the `useEffect` return function to avoid duplicate event handling.
+
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
-import { useEffect, useState } from "react";
+---
-const GroupMembersDemo = () => {
- const [chatGroup, setChatGroup] = useState(null);
+## Custom View Slots
- useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
- }, []);
+Each slot replaces a section of the default UI. Slots that accept a member parameter receive the `CometChat.GroupMember` object for that row.
- function handleOnEmpty() {
- console.log("your custom on empty actions");
- }
+| Slot | Signature | Replaces |
+| --- | --- | --- |
+| `itemView` | `(groupMember: CometChat.GroupMember) => JSX.Element` | Entire list item row |
+| `leadingView` | `(groupMember: CometChat.GroupMember) => JSX.Element` | Avatar / left section |
+| `titleView` | `(groupMember: CometChat.GroupMember) => JSX.Element` | Name / title text |
+| `subtitleView` | `(groupMember: CometChat.GroupMember) => JSX.Element` | Subtitle text |
+| `trailingView` | `(groupMember: CometChat.GroupMember) => JSX.Element` | Right section (scope badge / actions) |
+| `headerView` | `JSX.Element` | Entire header bar |
+| `loadingView` | `JSX.Element` | Loading spinner |
+| `emptyView` | `JSX.Element` | Empty state |
+| `errorView` | `JSX.Element` | Error state |
+| `options` | `(group: CometChat.Group, groupMember: CometChat.GroupMember) => CometChatOption[]` | Context menu / hover actions |
- return (
- <>
- {chatGroup && (
-
+Default:
-
+
+
+
-##### 4. onError
+Customized:
-This action doesn't change the behavior of the component but rather listens for any errors that occur in the Group Members component.
+
+
+
-```ts
+```tsx lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const GroupMembersDemo = () => {
- const [chatGroup, setChatGroup] = React.useState();
-
- React.useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
- }, []);
-
- function handleOnError(error: CometChat.CometChatException): void {
- /** Your Custom on error actions */
- }
+import {
+ CometChatAvatar,
+ CometChatGroupMembers,
+} from "@cometchat/chat-uikit-react";
- return (
- <>
- {chatGroup && (
-
+
+```css lines
+.group-member-list-item {
+ display: flex;
+ min-width: 240px;
+ padding: 8px 16px;
+ align-items: center;
+ gap: 12px;
+ background: #fff;
+}
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
-import { useEffect, useState } from "react";
+.group-member-list-item__content {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+}
+
+.group-member-list-item__avatar {
+ width: 40px;
+ height: 40px;
+}
-const GroupMembersDemo = () => {
- const [chatGroup, setChatGroup] = useState(null);
+.group-member-list-item__content-name {
+ overflow: hidden;
+ color: #141414;
+ text-overflow: ellipsis;
+ font: 500 16px Roboto;
+}
- useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
- }, []);
+.group-member-list-item__content-tag {
+ display: flex;
+ padding: 4px 12px;
+ border-radius: 1000px;
+ background: #edeafa;
+ color: #6852d6;
+ font: 400 12px Roboto;
+}
- function handleOnError(error) {
- /** Your Custom on error actions */
- }
+.group-member-list-item__content-tag-owner {
+ background: #6852d6;
+ color: #fff;
+}
- return (
- <>
- {chatGroup && (
-
-
-***
-
-### Filters
+### subtitleView
-**Filters** allow you to customize the data displayed in a list within a Component. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK.
+Replace the subtitle text. Joined date example.
-##### 1. GroupMembersRequestBuilder
+Default:
-The [GroupMembersRequestBuilder](/sdk/javascript/retrieve-group-members) enables you to filter and customize the group members list based on available parameters in GroupMembersRequestBuilder. This feature allows you to create more specific and targeted queries when fetching groups. The following are the parameters available in [GroupMembersRequestBuilder](/sdk/javascript/retrieve-group-members)
-
-| Methods | Type | Description |
-| -------------------- | -------------- | ------------------------------------------------------------------------------------------------- |
-| **setLimit** | number | sets the number of group members that can be fetched in a single request, suitable for pagination |
-| **setSearchKeyword** | String | used for fetching group members matching the passed string |
-| **setScopes** | Array\ | used for fetching group members based on multiple scopes |
+
+
+
-**Example**
+Customized:
-In the example below, we are applying a filter to the Group Members by setting the limit to two and setting the scope to show only admin and moderator.
+
+
+
-```ts
+```tsx lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const GroupMembersDemo = () => {
- const [chatGroup, setChatGroup] = React.useState();
-
- React.useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
- }, []);
- return (
- <>
- {chatGroup && (
-
+
+```css lines
+.group-member-subtitle {
+ overflow: hidden;
+ color: #727272;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font: 400 14px Roboto;
+}
```
-
+
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
-import { useEffect, useState } from "react";
+### trailingView
-const GroupMembersDemo = () => {
- const [chatGroup, setChatGroup] = useState(null);
+Replace the right section. Scope tag example.
- useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
- }, []);
+Default:
- return (
- <>
- {chatGroup && (
-
+
+
+
+
+
+
+```tsx lines
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
+
+function TrailingViewMembers({ group }: { group: CometChat.Group }) {
+ const getTrailingView = (member: CometChat.GroupMember) => {
+ return (
+
+
+```css lines
+.group-member-scope-tag {
+ display: flex;
+ padding: 4px 12px;
+ border-radius: 1000px;
+ background: #edeafa;
+ color: #6852d6;
+ font: 400 12px Roboto;
+}
+```
+
-##### 2. SearchRequestBuilder
+### headerView
-The SearchRequestBuilder uses [GroupMembersRequestBuilder](/sdk/javascript/retrieve-group-members) enables you to filter and customize the search list based on available parameters in GroupMembersRequestBuilder. This feature allows you to keep uniformity between the displayed Group Members List and searched Group Members List.
+Replace the entire header bar.
-**Example**
+
+
+
-```ts
+```tsx lines
+import {
+ CometChatGroupMembers,
+ CometChatButton,
+ getLocalizedString,
+} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const GroupMembersDemo = () => {
- const [chatGroup, setChatGroup] = React.useState();
-
- React.useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
- }, []);
+function CustomHeaderMembers({ group }: { group: CometChat.Group }) {
return (
- <>
- {chatGroup && (
-
+ { /* handle click */ }} />
+
+ }
+ />
);
-};
-
-export default GroupMembersDemo;
+}
```
+
-
-```tsx
-import { ConversationsDemo } from "./ConversationsDemo";
+```tsx lines
+import { CometChatConversations } from "@cometchat/chat-uikit-react";
+import "@cometchat/chat-uikit-react/css-variables.css";
-export default function App() {
+function ConversationsDemo() {
return (
-
-
-
-```css
+
+```css lines
.conversations__header {
display: flex;
width: 100%;
@@ -837,332 +846,732 @@ const getHeaderView = () => {
align-items: center;
justify-content: space-between;
gap: 12px;
- flex: 1 0 0;
- align-self: stretch;
border-radius: 10px;
border: 1px solid #e8e8e8;
background: #edeafa;
}
+
.conversations__header__title {
overflow: hidden;
color: #141414;
text-overflow: ellipsis;
font: 700 24px Roboto;
}
+
.conversations__header .cometchat-button .cometchat-button__icon {
background: #141414;
}
+
.conversations__header .cometchat-button {
width: 24px;
border: none;
background: transparent;
border-radius: 0;
- display: block;
}
```
-
-
-***
+### options
-#### Last Message Date Time Format
+Replace the context menu / hover actions on each conversation item.
-The `lastMessageDateTimeFormat` property allows you to customize the **Last Message** timestamp is displayed in the conversations.
+Default:
-Default Date Time Format:
+
+
+
-```ruby
-new CalendarObject({
- today: `hh:mm A`, // Example: "10:30 AM"
- yesterday: `[yesterday]`, // Example: "yesterday"
- otherDays: `DD/MM/YYYY`, // Example: "25/05/2025"
-});
-```
+Customized:
-The following example demonstrates how to modify the **Last Message** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject).
+
+
+
-```ts
+```tsx lines
+import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
+ CometChatOption,
CometChatConversations,
- CalendarObject,
} from "@cometchat/chat-uikit-react";
-// Define a custom date format pattern
-function getDateFormat() {
- const dateFormat = new CalendarObject({
- today: `DD MMM, hh:mm A`, // Example: "25 Jan, 10:30 AM"
- yesterday: `DD MMM, hh:mm A`, // Example: "25 Jan, 10:30 AM"
- otherDays: `DD MMM, hh:mm A`, // Example: "25 Jan, 10:30 AM"
- });
- return dateFormat;
-}
+function CustomOptionsConversations() {
+ const getOptions = (conversation: CometChat.Conversation) => [
+ new CometChatOption({
+ title: "Delete",
+ id: "delete",
+ onClick: () => { /* delete logic */ },
+ }),
+ new CometChatOption({
+ title: "Mute Notification",
+ id: "mute",
+ onClick: () => { /* mute logic */ },
+ }),
+ new CometChatOption({
+ title: "Mark as Unread",
+ id: "unread",
+ onClick: () => { /* mark unread logic */ },
+ }),
+ new CometChatOption({
+ title: "Block",
+ id: "block",
+ onClick: () => { /* block logic */ },
+ }),
+ ];
-// Apply the custom format to the CometChatConversations component
-
+
+```css lines
+.cometchat-conversations .cometchat-menu-list__main-menu-item-icon-delete {
+ background: red;
+}
+.cometchat-conversations .cometchat-menu-list__sub-menu {
+ background: transparent;
+ box-shadow: none;
+}
+```
+
-
+```ts lines
+// CometChatOption interface
+interface CometChatOption {
+ id?: string; // Unique identifier
+ title?: string; // Display text
+ iconURL?: string; // Icon asset URL
+ onClick?: () => void; // Click handler
+}
+```
-**Fallback Mechanism**
+### textFormatters
-* If you **do not** pass any property in the [**CalendarObject**](/ui-kit/react/localize#calendarobject), the component will first check the [**global configuration**](/ui-kit/react/localize#customisation). If the property is **also missing in the global configuration**, it will **fallback to the component's default formatting**.
+Custom text formatters for the conversation subtitle. Array of `CometChatTextFormatter` instances. If not provided, default formatters from the data source are used.
-
+```tsx lines
+import { CometChatConversations } from "@cometchat/chat-uikit-react";
+import ShortcutFormatter from "./ShortCutFormatter";
-***
+function FormattedConversations() {
+ return (
+ 
-
+Customize the last message timestamp format using a `CalendarObject`.
-Use the following code to achieve the customization shown above.
+```ts lines
+// CalendarObject interface (from source)
+class CalendarObject {
+ today?: string;
+ yesterday?: string;
+ lastWeek?: string;
+ otherDays?: string;
+ relativeTime?: {
+ minute?: string;
+ minutes?: string;
+ hour?: string;
+ hours?: string;
+ };
+}
+```
-
-
-```ts
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
+```tsx lines
+import {
+ CometChatConversations,
+ CalendarObject,
+} from "@cometchat/chat-uikit-react";
+
+function CustomDateConversations() {
+ const dateFormat = new CalendarObject({
+ today: "DD MMM, hh:mm A",
+ yesterday: "DD MMM, hh:mm A",
+ otherDays: "DD MMM, hh:mm A",
+ });
+
+ return
+If no property is passed in the [CalendarObject](/ui-kit/react/localize#calendarobject), the component checks the [global configuration](/ui-kit/react/localize#customisation) first. If also missing there, the component's default formatting applies.
+
+
+---
+
+## Common Patterns
+
+### Custom empty state with CTA
+
+```tsx lines
import { CometChatConversations } from "@cometchat/chat-uikit-react";
-// Custom title view component
-const customTitleView = (conversation: CometChat.Conversation) => {
- let user =
- conversation.getConversationType() == "user"
- ? (conversation.getConversationWith() as CometChat.User)
- : undefined;
+function EmptyStateConversations() {
return (
-
+
+ }
+ />
);
-};
-
-
+
);
}
-
-export default ConversationsDemo;
```
-
+[Open in CodeSandbox](https://link.cometchat.com/react-conversation-list-message)
+
+
+
+
+ {selectedUser || selectedGroup ? (
+
+
+ ) : (
+
+ Select a conversation
+
+ )}
+
+
+---
+
+## Minimal Render
-
- 
+
-### Actions
+Root CSS class: `.cometchat-conversations`
-[Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.
+---
-#### 1. OnItemClick
+## Filtering Conversations
-`OnItemClick` is triggered when you click on a ListItem of the Conversations component. The `OnItemClick` action doesn't have a predefined behavior. You can override this action using the following code snippet.
+Pass a `CometChat.ConversationsRequestBuilder` to `conversationsRequestBuilder`. Pass the builder instance — not the result of `.build()`.
-
-
-```tsx
+```tsx lines
import { CometChatConversations } from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
-const getOnItemClick = (conversation: CometChat.Conversation) => {
- console.log("ItemClick:", conversation);
- // Your custom action here
-};
-
-
-
-
-
-***
-
-#### 2. OnSelect
+### Filter Recipes
-The `OnSelect` event is triggered upon the completion of a selection in `SelectionMode`. It does not have a default behavior. However, you can override its behavior using the following code snippet.
+| Recipe | Code |
+| --- | --- |
+| Only user conversations | `new CometChat.ConversationsRequestBuilder().setConversationType("user")` |
+| Only group conversations | `new CometChat.ConversationsRequestBuilder().setConversationType("group")` |
+| Limit to 10 per page | `new CometChat.ConversationsRequestBuilder().setLimit(10)` |
+| With specific tags | `new CometChat.ConversationsRequestBuilder().setTags(["vip"])` |
+| Filter by user tags | `new CometChat.ConversationsRequestBuilder().withUserAndGroupTags(true).setUserTags(["premium"])` |
+| Filter by group tags | `new CometChat.ConversationsRequestBuilder().withUserAndGroupTags(true).setGroupTags(["support"])` |
-
-
-```tsx
-import {
- CometChatConversations,
- SelectionMode,
-} from "@cometchat/chat-uikit-react";
+Default page size is 30. The component uses infinite scroll — the next page loads as the user scrolls to the bottom.
-const getOnSelect = (
- conversation: CometChat.Conversation,
- selected: boolean
-) => {
- console.log("Selected, ", conversation.getConversationId(), selected);
- // Your custom action on select
-};
-
-
+---
-
+## Actions and Events
-***
+### Callback Props
-#### 3. OnError
+#### onItemClick
-This action doesn't change the behavior of the component but rather listens for any errors that occur in the Conversations component.
+Fires when a conversation row is tapped. Primary navigation hook — set the active conversation and render the message view.
-
-
-```tsx
+```tsx lines
import { CometChatConversations } from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
-const handleOnError = (error: CometChat.CometChatException) => {
- // Your exception handling code
-};
+function ConversationsWithClick() {
+ const handleItemClick = (conversation: CometChat.Conversation) => {
+ console.log("Selected:", conversation.getConversationId());
+ };
-
-
-
-
-***
+#### onSelect
-#### 4. onSearchBarClicked
+Fires when a conversation is checked/unchecked in multi-select mode. Requires `selectionMode` to be set.
-The `onSearchBarClicked` event is triggered when the user clicks the search bar. It does not have a default behavior. However, you can override its behavior using the following code snippet.
+```tsx lines
+import { useState } from "react";
+import {
+ CometChatConversations,
+ SelectionMode,
+} from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
-
-
-```tsx
-import { CometChatConversations } from "@cometchat/chat-uikit-react";
+function BatchSelectDemo() {
+ const [selected, setSelected] = useState>(new Set());
-const handleSearchClick = () => {
- console.log("Search bar clicked");
-};
+ const handleSelect = (conversation: CometChat.Conversation, isSelected: boolean) => {
+ setSelected((prev) => {
+ const next = new Set(prev);
+ const id = conversation.getConversationId();
+ isSelected ? next.add(id) : next.delete(id);
+ return next;
+ });
+ };
-
-
-
-
-***
-
-### Filters
-
-You can set `ConversationsRequestBuilder` in the Conversations Component to filter the conversation list. You can modify the builder as per your specific requirements with multiple options available to know more refer to [ConversationRequestBuilder](/sdk/javascript/retrieve-conversations).
+#### onError
-You can set filters using the following parameters.
+Fires on internal errors (network failure, auth issue, SDK exception).
-1. **Conversation Type:** Filters on type of Conversation, `User` or `Groups`
-2. **Limit:** Number of conversations fetched in a single request.
-3. **WithTags:** Filter on fetching conversations containing tags
-4. **Tags:** Filters on specific `Tag`
-5. **UserTags:** Filters on specific User `Tag`
-6. **GroupTags:** Filters on specific Group `Tag`
-
-
-
-```tsx
+```tsx lines
import { CometChatConversations } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
-
-
-
-
-***
-
-### Events
-
-[Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.
-
-
-
-```tsxtsx
-const ccConversationDeleted =
- CometChatConversationEvents.ccConversationDeleted.subscribe(
- (conversation: CometChat.Conversation) => {
- // Your code here
- }
+function ConversationsWithErrorHandler() {
+ return (
+ {
+ console.error("CometChatConversations error:", error);
+ }}
+ />
);
+}
```
-
-
-
-
-***
-
-
-
-```tsxtsx
-ccConversationDeleted?.unsubscribe();
-```
-
-
-
-
-
-## Customization
-
-To fit your app's design requirements, you can customize the appearance of the conversation component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.
+#### onSearchBarClicked
-### Style
+Fires when the search bar is clicked. Requires `showSearchBar={true}`.
-Using CSS you can customize the look and feel of the component in your app like the color, size, shape, and fonts.
-
-
-
-
+```tsx lines
+import { CometChatConversations } from "@cometchat/chat-uikit-react";
-
-
-```tsx
- {
+ console.log("Search bar clicked");
+ }}
+ />
+ );
+}
```
-
+### Global UI Events
-
-```css
-.cometchat-conversations .cometchat-list-item__body-title,
-.cometchat-conversations .cometchat-list__header-title,
-.cometchat-conversations .cometchat-avatar__text,
-.cometchat-conversations .cometchat-badge,
-.cometchat-conversations .cometchat-conversations__subtitle-text {
- font-family: "SF Pro";
-}
+`CometChatConversationEvents` emits events subscribable from anywhere in the application. Subscribe in a `useEffect` and unsubscribe on cleanup.
-.cometchat-conversations .cometchat-list__header-title {
- background: #fef8f8;
- border-bottom: 2px solid #f4b6b8;
-}
+| Event | Fires when | Payload |
+| --- | --- | --- |
+| `ccConversationDeleted` | A conversation is deleted from the list | `CometChat.Conversation` |
+| `ccUpdateConversation` | A conversation is updated (last message change, metadata update) | `CometChat.Conversation` |
+| `ccMarkConversationAsRead` | A conversation is marked as read | `CometChat.Conversation` |
-.cometchat-conversations .cometchat-avatar {
- background: #f0999b;
-}
+When to use: sync external UI with conversation state changes. For example, update an unread count badge in a tab bar when `ccMarkConversationAsRead` fires, or remove a conversation from a custom sidebar when `ccConversationDeleted` fires.
-.cometchat-conversations .cometchat-status-indicator {
- min-width: 10px;
- height: 10px;
-}
+```tsx lines
+import { useEffect } from "react";
+import { CometChatConversationEvents } from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
-.cometchat-conversations .cometchat-badge {
- background: #e5484d;
-}
+function useConversationEvents() {
+ useEffect(() => {
+ const deletedSub = CometChatConversationEvents.ccConversationDeleted.subscribe(
+ (conversation: CometChat.Conversation) => {
+ console.log("Deleted:", conversation.getConversationId());
+ }
+ );
+ const updatedSub = CometChatConversationEvents.ccUpdateConversation.subscribe(
+ (conversation: CometChat.Conversation) => {
+ console.log("Updated:", conversation.getConversationId());
+ }
+ );
+ const readSub = CometChatConversationEvents.ccMarkConversationAsRead.subscribe(
+ (conversation: CometChat.Conversation) => {
+ console.log("Marked as read:", conversation.getConversationId());
+ }
+ );
-.cometchat-conversations .cometchat-receipts-read {
- background: #e96b6f;
+ return () => {
+ deletedSub?.unsubscribe();
+ updatedSub?.unsubscribe();
+ readSub?.unsubscribe();
+ };
+ }, []);
}
```
-
-
-
-
-### Functionality
+### SDK Events (Real-Time, Automatic)
-These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements.
+The component listens to these SDK events internally. No manual attachment needed unless additional side effects are required.
-
-
-```tsx
-
+Automatic: new messages, typing indicators, receipts, user presence, group membership changes.
-
+Manual: deleting a conversation via the SDK directly (not through the component's context menu) requires emitting `CometChatConversationEvents.ccConversationDeleted` for the UI to update.
-Below is a list of customizations along with corresponding code snippets
+
+In React 18 StrictMode, `useEffect` runs twice on mount in development. The component handles listener cleanup internally, but any additional listeners added alongside the component need cleanup in the `useEffect` return function to avoid duplicate event handling.
+
-| Property | Description | Code |
-| ------------------------------ | --------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ |
-| **Hide Receipts** | Disables the display of message read receipts. If set to `true`, the receipt status of the sent message won't be displayed. | `hideReceipts={false}` |
-| **Hide Error** | Hides the default and the custom error view passed in the `errorView` prop. | `hideError={true}` |
-| **Hide Delete Conversation** | Hides the delete conversation option in the default context menu. | `hideDeleteConversation={false}` |
-| **Hide User Status** | Hides the user's online/offline status indicator. | `hideUserStatus={true}` |
-| **Hide Group Type** | Hides the group type icon. | `hideGroupType={false}` |
-| **Show Search Bar** | Shows the search bar. | `showSearchBar={true}` |
-| **Active Conversation** | Specifies the conversation to highlight in the list. | `activeConversation={activeConversation}` |
-| **Selection Mode** | Determines the selection mode for the component. | `selectionMode={SelectionMode.multiple}` |
-| **Disable Sound For Messages** | Used to Disable sound for incoming messages. | `disableSoundForMessages={false}` |
-| **Custom Sound For Messages** | Custom audio sound for incoming messages. | `customSoundForMessages="Your custom sound url"` |
-| **Search View** | A custom search view which replaces the default search bar. | `searchView={<>Custom Search View}` |
-| **Loading View** | A custom component to display during the loading state. | `loadingView={<>Custom Loading View}` |
-| **Empty View** | A custom component to display when there are no conversations available. | `emptyView={<>Custom Empty View}` |
-| **Error View** | A custom component to display when an error occurs. | `errorView={<>Custom Error View}` |
+---
-### Advanced
+## Custom View Slots
-For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component.
+Each slot replaces a section of the default UI. Slots that accept a conversation parameter receive the `CometChat.Conversation` object for that row.
-***
+| Slot | Signature | Replaces |
+| --- | --- | --- |
+| `itemView` | `(conversation: CometChat.Conversation) => JSX.Element` | Entire list item row |
+| `leadingView` | `(conversation: CometChat.Conversation) => JSX.Element` | Avatar / left section |
+| `titleView` | `(conversation: CometChat.Conversation) => JSX.Element` | Name / title text |
+| `subtitleView` | `(conversation: CometChat.Conversation) => JSX.Element` | Last message preview |
+| `trailingView` | `(conversation: CometChat.Conversation) => JSX.Element` | Timestamp / badge / right section |
+| `headerView` | `JSX.Element` | Entire header bar |
+| `searchView` | `JSX.Element` | Search bar |
+| `loadingView` | `JSX.Element` | Loading spinner |
+| `emptyView` | `JSX.Element` | Empty state |
+| `errorView` | `JSX.Element` | Error state |
+| `options` | `(conversation: CometChat.Conversation) => CometChatOption[]` | Context menu / hover actions |
-#### ItemView
+### itemView
-With this function, you can assign a custom ListItem to the Conversations Component.
+Replace the entire list item row.
-Shown below is the default chat interface.
+Default:
-The customized chat interface is displayed below.
+Customized:
-Use the following code to achieve the customization shown above.
-
-```ts
+```tsx lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
CometChatListItem,
CometChatConversations,
+ CometChatDate,
} from "@cometchat/chat-uikit-react";
-const getItemView = (conversation: CometChat.Conversation) => {
- const title = conversation.getConversationWith().getName();
- const timestamp = conversation?.getLastMessage()?.getSentAt();
+function CustomItemViewConversations() {
+ const getItemView = (conversation: CometChat.Conversation) => {
+ const title = conversation.getConversationWith().getName();
+ const timestamp = conversation?.getLastMessage()?.getSentAt();
- return (
-
-
-
-```css
+
+```css lines
.cometchat-conversations .cometchat-avatar {
border-radius: 8px;
width: 32px;
@@ -385,165 +510,140 @@ const getItemView = (conversation: CometChat.Conversation) => {
gap: 4px;
}
```
-
-
-***
+### leadingView
-#### LeadingView
-
-The customized chat interface is displayed below.
+Replace the avatar / left section. Typing-aware avatar example.
-Use the following code to achieve the customization shown above.
-
-
-
-```ts
-import React from "react";
+```tsx lines
+import { useEffect, useRef, useState } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
CometChatConversations,
CometChatAvatar,
+ CometChatUIKitLoginListener,
} from "@cometchat/chat-uikit-react";
-import { useEffect, useRef, useState } from "react";
-const [isTyping, setIsTyping] = useState(false);
-const typingObjRef = useRef(null);
-
-useEffect(() => {
- //adding typing listeners
- const messageListenerId: string = "typing_demo_" + new Date().getTime();
- CometChat.addMessageListener(
- messageListenerId,
- new CometChat.MessageListener({
- onTypingStarted: (typingIndicator: CometChat.TypingIndicator) => {
- typingObjRef.current = typingIndicator;
- setIsTyping(true);
- },
- onTypingEnded: (typingIndicator: CometChat.TypingIndicator) => {
- if (
- typingObjRef.current &&
- typingObjRef.current.getSender().getUid() ==
- typingIndicator.getSender().getUid()
- ) {
- typingObjRef.current = null;
- setIsTyping(false);
- }
- },
- })
- );
- return () => {
- CometChat.removeMessageListener(messageListenerId);
- };
-}, [setIsTyping]);
-
-// Custom leading view component
-const CustomLeadingView = (conversation: CometChat.Conversation) => {
- const conversationObj = conversation.getConversationWith();
- const isUser = conversationObj instanceof CometChat.User;
- const isGroup = conversationObj instanceof CometChat.Group;
-
- // Check if the current user is typing
- const isMyTyping = isUser
- ? (conversationObj as CometChat.User).getUid() ===
- typingObjRef.current?.getSender().getUid() &&
- loggedInUser?.getUid() === typingObjRef.current?.getReceiverId()
- : isGroup &&
- (conversationObj as CometChat.Group).getGuid() ===
- typingObjRef.current?.getReceiverId();
-
- // Determine avatar and name
- const avatar = isUser
- ? (conversationObj as CometChat.User).getAvatar()
- : (conversationObj as CometChat.Group).getIcon();
- const name = isTyping && isMyTyping ? undefined : conversationObj.getName();
- const image = isTyping && isMyTyping ? "TYPING_ICON_HERE" : avatar;
- return (
- (null);
+ const loggedInUser = CometChatUIKitLoginListener.getLoggedInUser();
+
+ useEffect(() => {
+ const listenerId = "typing_demo_" + Date.now();
+ CometChat.addMessageListener(
+ listenerId,
+ new CometChat.MessageListener({
+ onTypingStarted: (typingIndicator: CometChat.TypingIndicator) => {
+ typingObjRef.current = typingIndicator;
+ setIsTyping(true);
+ },
+ onTypingEnded: (typingIndicator: CometChat.TypingIndicator) => {
+ if (
+ typingObjRef.current &&
+ typingObjRef.current.getSender().getUid() ===
+ typingIndicator.getSender().getUid()
+ ) {
+ typingObjRef.current = null;
+ setIsTyping(false);
+ }
+ },
+ })
+ );
+ return () => {
+ CometChat.removeMessageListener(listenerId);
+ };
+ }, []);
-
+ const getLeadingView = (conversation: CometChat.Conversation) => {
+ const entity = conversation.getConversationWith();
+ const isUser = entity instanceof CometChat.User;
+ const isGroup = entity instanceof CometChat.Group;
-
+ const isMyTyping = isUser
+ ? (entity as CometChat.User).getUid() ===
+ typingObjRef.current?.getSender().getUid() &&
+ loggedInUser?.getUid() === typingObjRef.current?.getReceiverId()
+ : isGroup &&
+ (entity as CometChat.Group).getGuid() ===
+ typingObjRef.current?.getReceiverId();
+
+ const avatar = isUser
+ ? (entity as CometChat.User).getAvatar()
+ : (entity as CometChat.Group).getIcon();
+
+ return (
+ 
-Use the following code to achieve the customization shown above.
-
-```ts
-import React from "react";
+```tsx lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatConversations } from "@cometchat/chat-uikit-react";
-// Custom trailing view component
-const CustomTrailingButtonView = (conv: CometChat.Conversation) => {
- if (!conv.getLastMessage()) {
- return <>;
- }
- const timestamp = conv.getLastMessage()?.getSentAt() * 1000;
- const now = new Date();
- const time = new Date(timestamp);
-
- // Calculate time difference
- const diffInMs = now.getTime() - time.getTime();
- const diffInMinutes = Math.floor(diffInMs / (1000 * 60));
- const diffInHours = Math.floor(diffInMs / (1000 * 60 * 60));
-
- // Determine the labels
- let backgroundColorClass = "conversations__trailing-view-min"; // Default (less than 1 hour)
- let topLabel = `${diffInMinutes}`; // Default minutes
- let bottomLabel = `${diffInMinutes === 1 ? "Min ago" : "Mins ago"}`; // Default "Mins ago"
-
- if (diffInHours >= 1 && diffInHours <= 10) {
- // 1-10 hours
- backgroundColorClass = "conversations__trailing-view-hour";
- topLabel = `${diffInHours}`;
- bottomLabel = `${diffInHours === 1 ? "Hour ago" : "Hours ago"}`;
- } else if (diffInHours > 10) {
- // More than 10 hours
- backgroundColorClass = "conversations__trailing-view-date";
- topLabel = time.toLocaleDateString("en-US", { day: "numeric" });
- bottomLabel = time.toLocaleDateString("en-US", {
- month: "short",
- year: "numeric",
- });
- }
- return (
-
-
-
-```css
+
+```css lines
.conversations__trailing-view {
display: flex;
flex-direction: column;
@@ -553,283 +653,192 @@ const CustomTrailingButtonView = (conv: CometChat.Conversation) => {
height: 40px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
- font-family: Arial, sans-serif;
-}
-
-.conversations__trailing-view-min {
- background-color: #e0d4f7;
-}
-
-.conversations__trailing-view-hour {
- background-color: #fff3cd;
}
-.conversations__trailing-view-date {
- background-color: #f8d7da;
-}
+.conversations__trailing-view-min { background-color: #e0d4f7; }
+.conversations__trailing-view-hour { background-color: #fff3cd; }
+.conversations__trailing-view-date { background-color: #f8d7da; }
.conversations__trailing-view-time {
- font-size: 20px;
- font-weight: bold;
+ font: 600 18px Roboto;
color: #4a3f99;
margin-bottom: 4px;
- font: 600 18px Roboto;
}
.conversations__trailing-view-status {
font: 600 8px Roboto;
color: #6a5b99;
}
+
.cometchat-conversations .cometchat-list-item__trailing-view {
height: 50px;
}
```
-
-
-***
+### titleView
-#### TextFormatters
+Replace the name / title text. Inline user status example.
-Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source. To configure the existing Mentions look and feel check out [CometChatMentionsFormatter](/ui-kit/react/mentions-formatter-guide)
+
+
+
-
-```ts
-import { CometChatTextFormatter } from "@cometchat/chat-uikit-react";
-import DialogHelper from "./Dialog";
+
+```tsx lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatConversations } from "@cometchat/chat-uikit-react";
-class ShortcutFormatter extends CometChatTextFormatter {
- private shortcuts: { [key: string]: string } = {};
- private dialogIsOpen: boolean = false;
- private dialogHelper = new DialogHelper();
- private currentShortcut: string | null = null; // Track the currently open shortcut
-
- constructor() {
- super();
- this.setTrackingCharacter("!");
- CometChat.callExtension("message-shortcuts", "GET", "v1/fetch", undefined)
- .then((data: any) => {
- if (data && data.shortcuts) {
- this.shortcuts = data.shortcuts;
- }
- })
- .catch((error) => console.log("error fetching shortcuts", error));
- }
-
- onKeyDown(event: KeyboardEvent) {
- const caretPosition =
- this.currentCaretPosition instanceof Selection
- ? this.currentCaretPosition.anchorOffset
- : 0;
- const textBeforeCaret = this.getTextBeforeCaret(caretPosition);
-
- const match = textBeforeCaret.match(/!([a-zA-Z]+)$/);
- if (match) {
- const shortcut = match[0];
- const replacement = this.shortcuts[shortcut];
- if (replacement) {
- // Close the currently open dialog, if any
- if (this.dialogIsOpen && this.currentShortcut !== shortcut) {
- this.closeDialog();
- }
- this.openDialog(replacement, shortcut);
- }
- }
- }
+function StatusTitleConversations() {
+ const getTitleView = (conversation: CometChat.Conversation) => {
+ const user =
+ conversation.getConversationType() === "user"
+ ? (conversation.getConversationWith() as CometChat.User)
+ : undefined;
- getCaretPosition() {
- if (!this.currentCaretPosition?.rangeCount) return { x: 0, y: 0 };
- const range = this.currentCaretPosition?.getRangeAt(0);
- const rect = range.getBoundingClientRect();
- return {
- x: rect.left,
- y: rect.top,
- };
- }
-
- openDialog(buttonText: string, shortcut: string) {
- this.dialogHelper.createDialog(
- () => this.handleButtonClick(buttonText),
- buttonText
+ return (
+
+
+```css lines
+.cometchat-conversations .conversations__title-view {
+ display: flex;
+ gap: 4px;
+ width: 100%;
+}
- private getTextBeforeCaret(caretPosition: number): string {
- if (
- this.currentRange &&
- this.currentRange.startContainer &&
- typeof this.currentRange.startContainer.textContent === "string"
- ) {
- const textContent = this.currentRange.startContainer.textContent;
- if (textContent.length >= caretPosition) {
- return textContent.substring(0, caretPosition);
- }
- }
- return "";
- }
+.conversations__title-view-name {
+ color: #141414;
+ font: 500 16px/19.2px Roboto;
}
-export default ShortcutFormatter;
+.conversations__title-view-status {
+ color: #6852d6;
+ font: 400 16px/19.2px Roboto;
+}
```
-
+
-
-```tsx
-import React from "react";
-import ReactDOM from "react-dom";
+### subtitleView
-interface DialogProps {
- onClick: () => void;
- buttonText: string;
-}
+Replace the last message preview text.
-const Dialog: React.FC = ({ onClick, buttonText }) => {
- console.log("buttonText", buttonText);
+Default:
- return (
-
+
-export default class DialogHelper {
- private dialogContainer: HTMLDivElement | null = null;
+Customized:
- createDialog(onClick: () => void, buttonText: string) {
- this.dialogContainer = document.createElement("div");
- document.body.appendChild(this.dialogContainer);
+
+
+
- ReactDOM.render(
- ,
- this.dialogContainer
- );
- }
+
+
+```tsx lines
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatConversations } from "@cometchat/chat-uikit-react";
+
+function formatTimestamp(timestamp: number): string {
+ return new Date(timestamp * 1000).toLocaleString();
+}
- closeDialog() {
- if (this.dialogContainer) {
- ReactDOM.unmountComponentAtNode(this.dialogContainer);
- this.dialogContainer.remove();
- this.dialogContainer = null;
+function SubtitleConversations() {
+ const getSubtitleView = (conversation: CometChat.Conversation) => {
+ if (conversation.getConversationType() === "user") {
+ return (
+ <>
+ Last active:{" "}
+ {formatTimestamp(
+ (conversation.getConversationWith() as CometChat.User).getLastActiveAt()
+ )}
+
+ );
}
- }
+ return (
+ <>
+ Created:{" "}
+ {formatTimestamp(
+ (conversation.getConversationWith() as CometChat.Group).getCreatedAt()
+ )}
+
+ );
+ };
+
+ return
-
-
-```tsx
-import ShortcutFormatter from "./ShortCutFormatter";
-
-
+```css lines
+.cometchat-conversations .cometchat-list-item__body-subtitle {
+ overflow: hidden;
+ color: var(--cometchat-text-color-secondary, #727272);
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font: var(--cometchat-font-body-regular);
+}
```
-
-
-#### Header View
-
-You can set the Custom Header view to add more options to the Conversations component.
+### headerView
-The customized chat interface is displayed below.
+Replace the entire header bar.
-Use the following code to achieve the customization shown above.
-
-```ts
+```tsx lines
import {
CometChatButton,
CometChatConversations,
+ getLocalizedString,
} from "@cometchat/chat-uikit-react";
-const getHeaderView = () => {
+function CustomHeaderConversations() {
return (
-
+ { /* handle click */ }} />
+
+ }
+ />
);
-};
-
-
+
);
}
-```
-
+export default ConversationsDemo;
+```
-
+
+
+
-### Actions
+Root CSS class: `.cometchat-conversations`
-[Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.
+---
-#### 1. OnItemClick
+## Filtering Conversations
-`OnItemClick` is triggered when you click on a ListItem of the Conversations component. The `OnItemClick` action doesn't have a predefined behavior. You can override this action using the following code snippet.
+Pass a `CometChat.ConversationsRequestBuilder` to `conversationsRequestBuilder`. Pass the builder instance — not the result of `.build()`.
-
-
+```tsx lines
+import { CometChatConversations } from "@cometchat/chat-uikit-react";
-
-
-```
+| SDK Listener | Internal behavior |
+| --- | --- |
+| `onTextMessageReceived` / `onMediaMessageReceived` / `onCustomMessageReceived` | Moves conversation to top, updates last message preview and unread count |
+| `onTypingStarted` / `onTypingEnded` | Shows/hides typing indicator in the subtitle |
+| `onMessagesDelivered` / `onMessagesRead` / `onMessagesDeliveredToAll` / `onMessagesReadByAll` | Updates receipt ticks (unless `hideReceipts={true}`) |
+| `onUserOnline` / `onUserOffline` | Updates online/offline status dot (unless `hideUserStatus={true}`) |
+| `onGroupMemberJoined` / `onGroupMemberLeft` / `onGroupMemberKicked` / `onGroupMemberBanned` / `onMemberAddedToGroup` | Updates group conversation metadata |
-
-
-
-The customized chat interface is displayed below.
+Customized:
-Use the following code to achieve the customization shown above.
-
-Use the following code to achieve the customization shown above.
-
-
-
- );
-};
-
+
+ );
+ };
-***
+ return
-Use the following code to achieve the customization shown above.
-
- {topLabel}
- {bottomLabel}
-
- );
-};
+function RelativeTimeConversations() {
+ const getTrailingView = (conv: CometChat.Conversation) => {
+ if (!conv.getLastMessage()) return <>;
+
+ const timestamp = conv.getLastMessage()?.getSentAt() * 1000;
+ const now = Date.now();
+ const diffInMinutes = Math.floor((now - timestamp) / (1000 * 60));
+ const diffInHours = Math.floor((now - timestamp) / (1000 * 60 * 60));
+
+ let className = "conversations__trailing-view-min";
+ let topLabel = `${diffInMinutes}`;
+ let bottomLabel = diffInMinutes === 1 ? "Min ago" : "Mins ago";
+
+ if (diffInHours >= 1 && diffInHours <= 10) {
+ className = "conversations__trailing-view-hour";
+ topLabel = `${diffInHours}`;
+ bottomLabel = diffInHours === 1 ? "Hour ago" : "Hours ago";
+ } else if (diffInHours > 10) {
+ className = "conversations__trailing-view-date";
+ const time = new Date(timestamp);
+ topLabel = time.toLocaleDateString("en-US", { day: "numeric" });
+ bottomLabel = time.toLocaleDateString("en-US", { month: "short", year: "numeric" });
+ }
-
+ {topLabel}
+ {bottomLabel}
+
+ );
+ };
+ return
+
+
+ {user
+ ? conversation.getConversationWith().getName() + " · "
+ : conversation.getConversationWith().getName()}
+
+ {user && (
+
+ {user.getStatusMessage()}
+
+ )}
+
);
- this.dialogIsOpen = true;
- this.currentShortcut = shortcut;
- }
-
- closeDialog() {
- this.dialogHelper.closeDialog(); // Use DialogHelper to close the dialog
- this.dialogIsOpen = false;
- this.currentShortcut = null;
- }
-
- handleButtonClick = (buttonText: string) => {
- if (this.currentCaretPosition && this.currentRange) {
- // Inserting the replacement text corresponding to the shortcut
- const shortcut = Object.keys(this.shortcuts).find(
- (key) => this.shortcuts[key] === buttonText
- );
- if (shortcut) {
- const replacement = this.shortcuts[shortcut];
- this.addAtCaretPosition(
- replacement,
- this.currentCaretPosition,
- this.currentRange
- );
- }
- }
- if (this.dialogIsOpen) {
- this.closeDialog();
- }
};
- getFormattedText(text: string): string {
- return text;
- }
+ return
-
-
- );
-};
+
+
+
-export default class DialogHelper {
- private dialogContainer: HTMLDivElement | null = null;
+Customized:
- createDialog(onClick: () => void, buttonText: string) {
- this.dialogContainer = document.createElement("div");
- document.body.appendChild(this.dialogContainer);
+
+
+
- ReactDOM.render(
- ,
- this.dialogContainer
- );
- }
+
-Use the following code to achieve the customization shown above.
-
- {
- // logic here
- }}
- iconURL={ICON_URL}
- />
-
+ {localize("CHATS")}
-
+ {getLocalizedString("CHATS")}
+
+
+
-```ruby
-new CalendarObject({
- today: `hh:mm A`, // Example: "10:30 AM"
- yesterday: `[yesterday]`, // Example: "yesterday"
- otherDays: `DD/MM/YYYY`, // Example: "25/05/2025"
-});
-```
+Customized:
-The following example demonstrates how to modify the **Last Message** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject).
+
+
+
-
+Customize the last message timestamp format using a `CalendarObject`.
-Use the following code to achieve the customization shown above.
+```ts lines
+// CalendarObject interface (from source)
+class CalendarObject {
+ today?: string;
+ yesterday?: string;
+ lastWeek?: string;
+ otherDays?: string;
+ relativeTime?: {
+ minute?: string;
+ minutes?: string;
+ hour?: string;
+ hours?: string;
+ };
+}
+```
-
-
- {user
- ? conversation.getConversationWith().getName() + " • "
- : conversation.getConversationWith().getName()}
-
- {user ? (
-
- {user.getStatusMessage()}
-
- ) : null}
-
+ No conversations yet
+ +
-
+Overrides survive component updates because the component never sets inline styles on these elements — all styling flows through CSS classes and custom properties.
+
+### Key Selectors
-The customized chat interface is displayed below.
+| Target | Selector |
+| --- | --- |
+| Root | `.cometchat-conversations` |
+| Header title | `.cometchat-conversations .cometchat-list__header-title` |
+| List item | `.cometchat-conversations .cometchat-list-item` |
+| Body title | `.cometchat-conversations .cometchat-list-item__body-title` |
+| Avatar | `.cometchat-conversations .cometchat-avatar` |
+| Avatar text | `.cometchat-conversations .cometchat-avatar__text` |
+| Unread badge | `.cometchat-conversations .cometchat-badge` |
+| Subtitle text | `.cometchat-conversations .cometchat-conversations__subtitle-text` |
+| Status indicator | `.cometchat-conversations .cometchat-status-indicator` |
+| Read receipts | `.cometchat-conversations .cometchat-receipts-read` |
+| Active item | `.cometchat-conversations__list-item-active .cometchat-list-item` |
+| Typing indicator | `.cometchat-conversations__subtitle-typing` |
+| Trailing view | `.cometchat-conversations__trailing-view` |
+
+### Example: Brand-themed conversations
-
+
-Use the following code to achieve the customization shown above.
+```css lines
+.cometchat-conversations .cometchat-list-item__body-title,
+.cometchat-conversations .cometchat-list__header-title,
+.cometchat-conversations .cometchat-avatar__text,
+.cometchat-conversations .cometchat-badge,
+.cometchat-conversations .cometchat-conversations__subtitle-text {
+ font-family: "SF Pro";
+}
-...
}` |
+| Change colors, fonts, spacing | Global CSS | Target `.cometchat-conversations` class | `.cometchat-conversations .cometchat-badge { background: #e5484d; }` |
+
+---
+
+## Accessibility
+
+The component renders a scrollable list of interactive items. Each conversation row is keyboard-focusable and activates on Enter/Space. The context menu (options) is accessible via keyboard. The unread badge count is exposed as text content. Avatar images include the conversation name as alt text.
+
+For screen readers, the conversation list is rendered as a semantic list. Status indicators (online/offline, group type icons) use CSS mask images — add `aria-label` attributes via `itemView` if screen reader descriptions are needed for these visual indicators.
+
+---
+
+---
+
+## Props
+
+All props are optional. Sorted alphabetically.
+
+### activeConversation
+
+Highlights the specified conversation in the list.
+
+| | |
+| --- | --- |
+| Type | `CometChat.Conversation` |
+| Default | `undefined` |
+
+Must be a reference-equal object from the SDK; a manually constructed object will not match.
+
+---
+
+### conversationsRequestBuilder
+
+Controls which conversations load and in what order.
+
+| | |
+| --- | --- |
+| Type | `CometChat.ConversationsRequestBuilder` |
+| Default | SDK default (30 per page) |
+
+Pass the builder instance, not the result of `.build()`.
+
+---
+
+### customSoundForMessages
+
+URL to a custom audio file for incoming message notifications.
+
+| | |
+| --- | --- |
+| Type | `string` |
+| Default | Built-in sound |
+
+Must be a valid audio URL accessible from the browser.
+
+---
+
+### disableSoundForMessages
+
+Disables the notification sound for incoming messages.
+
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
+
+---
+
+### emptyView
+
+Custom component displayed when there are no conversations.
+
+| | |
+| --- | --- |
+| Type | `JSX.Element` |
+| Default | Built-in empty state |
+
+---
+
+### errorView
+
+Custom component displayed when an error occurs.
+
+| | |
+| --- | --- |
+| Type | `JSX.Element` |
+| Default | Built-in error state |
+
+Hidden when `hideError={true}`.
+
+---
+
+### headerView
+
+Custom component rendered as the entire header bar.
+
+| | |
+| --- | --- |
+| Type | `JSX.Element` |
+| Default | Built-in header with title |
+
+---
+
+### hideDeleteConversation
+
+Hides the delete option in the context menu.
+
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
+
+---
+
+### hideError
+
+Hides the default and custom error views.
+
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
+
+Also suppresses `errorView` if set.
+
+---
+
+### hideGroupType
+
+Hides the group type icon (public/private/password).
+
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
+
+---
+
+### hideReceipts
+
+Hides message read/delivery receipt indicators.
+
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
+
+---
+
+### hideUserStatus
+
+Hides the online/offline status indicator.
+
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
+
+---
+
+### itemView
+
+Custom renderer for the entire list item row.
+
+| | |
+| --- | --- |
+| Type | `(conversation: CometChat.Conversation) => JSX.Element` |
+| Default | Built-in list item |
+
+---
+
+### lastMessageDateTimeFormat
+
+Format for displaying the timestamp of the last message.
+
+| | |
+| --- | --- |
+| Type | `CalendarObject` |
+| Default | Component default (`hh:mm A` today, `[yesterday]`, `DD/MM/YYYY` other days) |
+
+```ts lines
+class CalendarObject {
+ today?: string;
+ yesterday?: string;
+ lastWeek?: string;
+ otherDays?: string;
+ relativeTime?: {
+ minute?: string;
+ minutes?: string;
+ hour?: string;
+ hours?: string;
+ };
}
```
-
-
+### loadingView
-The customized chat interface is displayed below.
+Custom component displayed during the loading state.
-
-
-
+| | |
+| --- | --- |
+| Type | `JSX.Element` |
+| Default | Built-in shimmer |
-Use the following code to achieve the customization shown above.
+---
-
@@ -86,7 +96,7 @@ CometChat's User Presence feature allows users to see whether their contacts are
| --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Conversations](/ui-kit/react/conversations) | [Conversations](/ui-kit/react/conversations) is a component that renders conversation list item. Conversations item also shows user presence information. |
| [Message Header](/ui-kit/react/message-header) | [Message Header](/ui-kit/react/message-header) that renders details of user/group. The Message Header also handles user presence information. |
-| [Users](/ui-kit/react/users) | [Users](/ui-kit/react/users) renders list of users available in your app.It also responsible to render users presence information. |
+| [Users](/ui-kit/react/users) | [Users](/ui-kit/react/users) renders the list of available users with presence information. |
| [Group Members](/ui-kit/react/group-members) | [Group Members](/ui-kit/react/group-members) renders list of users available in the group. The Group Members component also handles user presence information. |
## Reactions
@@ -115,45 +125,40 @@ Mentions is a robust feature provided by CometChat that enhances the interactivi
| [Message Composer](/ui-kit/react/message-composer) | [Message Composer](/ui-kit/react/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. |
| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/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
+## Threaded Conversations
-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.
+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 |
-| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/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/react/message-composer) | [Message Composer](/ui-kit/react/message-composer) works seamlessly with Quoted Message by showing the quoted reply above the input field, letting users compose their response in proper context. |
+| Components | Functionality |
+| ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Threaded Message Preview](/ui-kit/react/threaded-message-preview) | [Threaded Message Preview](/ui-kit/react/threaded-message-preview) component displays the parent message along with the number of replies. |
-## Conversation and Advanced Search
+## Quoted Replies
-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.
+Quoted Replies 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.
-
+
| Components | Functionality |
| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Search](/ui-kit/react/search) | [Search](/ui-kit/react/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/react/message-header) | [Message Header](/ui-kit/react/message-header) shows the search button in the chat header, allowing users to search within a conversation. |
-| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) shows the selected message when clicked from search results and highlights it in the message list. |
-| [Conversations](/ui-kit/react/conversations) | [Conversations](/ui-kit/react/conversations) displays the search input. |
+| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/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/react/message-composer) | [Message Composer](/ui-kit/react/message-composer) shows the quoted reply above the input field, providing context for the response. |
-## Threaded Conversations
+## Group Chat
-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.
+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 |
-| ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Threaded Message Preview](/ui-kit/react/threaded-message-preview) | [Threaded Message Preview](/ui-kit/react/threaded-message-preview) component displays the parent message along with the number of replies. |
+See the [Groups](/ui-kit/react/groups) component page for details.
## Moderation
@@ -169,9 +174,9 @@ Learn more about setting up moderation rules and managing content in the [Modera
| Components | Functionality |
| ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) automatically handles moderated messages, displaying blocked content appropriately based on your moderation settings. |
+| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) automatically handles moderated messages, displaying blocked content based on moderation settings. |
-After implementing moderation rules, users can report messages they find inappropriate or harmful. As a next step, you can enable the **[Report Message](#report-message)** feature to allow users to flag messages for review by moderators.
+The **[Report Message](#report-message)** feature enables users to flag messages for review by moderators.
## Report Message
@@ -189,12 +194,37 @@ Learn more about how flagged messages are handled, reviewed, and moderated in th
| ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) provides the "Report Message" option in the message actions menu, allowing users to initiate the reporting process for inappropriate messages. |
-## 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/react/groups).
+| Components | Functionality |
+| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Search](/ui-kit/react/search) | [Search](/ui-kit/react/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/react/message-header) | [Message Header](/ui-kit/react/message-header) shows the search button in the chat header, allowing users to search within a conversation. |
+| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) shows the selected message when clicked from search results and highlights it in the message list. |
+| [Conversations](/ui-kit/react/conversations) | [Conversations](/ui-kit/react/conversations) displays the search input. |
+
+See the [Groups](/ui-kit/react/groups) component page for details.
+---
+
+## Next Steps
+
+
@@ -73,75 +88,49 @@ Below is an example demonstrating how to use a custom formatter class in compone
-
- );
+ );
}
```
+
+ return (
-
+
-### Polls
+#### Message Shortcuts
+
+Sends predefined messages using short codes (e.g., `!hb` expands to `Happy birthday!`). See [Message Shortcuts Extension](/fundamentals/message-shortcuts).
+
+#### Pin Message
+
+Pins important messages in a conversation for easy access. See [Pin Message Extension](/fundamentals/pin-message).
+
+#### Rich Media Preview
+
+Generates rich preview panels for URLs using iFramely. See [Rich Media Preview Extension](/fundamentals/rich-media-preview).
+
+#### Save Message
+
+Bookmarks messages for later reference. Saved messages are private to the user. See [Save Message Extension](/fundamentals/save-message).
-The Polls extension enhances group discussions by allowing users to create polls. Users can ask questions with a predefined list of answers, enabling a quick, organized way to gather group opinions. For a comprehensive understanding and guide on implementing and using the Polls Extension, refer to our specific guide on the [Polls Extension](/fundamentals/polls).
+#### Thumbnail Generation
-Once you have successfully activated the [Polls Extension](/fundamentals/polls) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/react/message-composer) component of UI Kits.
+Creates smaller preview images for shared images, reducing bandwidth. See [Thumbnail Generation Extension](/fundamentals/thumbnail-generation).
+
+Auto-integrates into the Message Bubble of [MessageList](/ui-kit/react/message-list) when activated.
-
+
-### Collaborative Whiteboard
+#### TinyURL
+
+URL shortening using TinyURL. See [TinyURL Extension](/fundamentals/tinyurl).
+
+#### Voice Transcription
+
+Converts audio messages to text. See [Voice Transcription Extension](/fundamentals/voice-transcription).
+
+### User Engagement
+
+#### Giphy
-The Collaborative Whiteboard extension facilitates real-time collaboration. Users can draw, brainstorm, and share ideas on a shared digital whiteboard. For a comprehensive understanding and guide on implementing and using the Collaborative Whiteboard Extension, refer to our specific guide on the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard).
+Search and share GIFs from Giphy. See [Giphy Extension](/fundamentals/giphy).
-Once you have successfully activated the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/react/message-composer) component of UI Kits.
+#### Message Translation
+
+Translates messages into the local locale. See [Message Translation Extension](/fundamentals/message-translation).
+
+Auto-integrates into the Action Sheet of [MessageList](/ui-kit/react/message-list) when activated.
-
+
-### Collaborative Document
+#### Polls
-With the Collaborative Document extension, users can work together on a shared document. This feature is essential for remote teams where document collaboration is a recurring requirement. For a comprehensive understanding and guide on implementing and using the Collaborative Document Extension, refer to our specific guide on the [Collaborative Document Extension](/fundamentals/collaborative-document).
+Creates polls in group discussions with predefined answer options. See [Polls Extension](/fundamentals/polls).
-Once you have successfully activated the [Collaborative Document Extension](/fundamentals/collaborative-document) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/react/message-composer) component of UI Kits.
+Auto-integrates into the Action Sheet of [Message Composer](/ui-kit/react/message-composer) when activated.
-
+
-### Message Translation
+#### Reminders
+
+Sets reminders for messages or creates personal reminders. A bot sends a notification when due. See [Reminders Extension](/fundamentals/reminders).
-The Message Translation extension in CometChat is designed to translate any message into your local locale. It eliminates language barriers, making the chat more inclusive. For a comprehensive understanding and guide on implementing and using the Message Translation Extension, refer to our specific guide on the [Message Translation Extension](/fundamentals/message-translation).
+#### Stickers
-Once you have successfully activated the [Message Translation Extension](/fundamentals/message-translation) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of [MessageList Component](/ui-kit/react/message-list) component of UI Kits.
+Sends pre-designed stickers in chat. See [Sticker Extension](/fundamentals/stickers).
+
+Auto-integrates into [Message Composer](/ui-kit/react/message-composer) when activated.
-
+
-### Link Preview
+#### Stipop
+
+Integrates Stipop's sticker library. See [Stipop Extension](/fundamentals/stickers-stipop).
+
+#### Tenor
+
+Search and share GIFs from Tenor. See [Tenor Extension](/fundamentals/tenor).
+
+### Collaboration
+
+#### Collaborative Document
-The Link Preview extension provides a summary of the URL shared in the chat. It includes the title, a description, and a thumbnail image from the web page. For a comprehensive understanding and guide on implementing and using the Link Preview Extension, refer to our specific guide on the [Link Preview Extension](/fundamentals/link-preview).
+Shared document editing for real-time collaboration. See [Collaborative Document Extension](/fundamentals/collaborative-document).
-Once you have successfully activated the [Link Preview Extension](/fundamentals/link-preview) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/react/message-list) component of UI Kits.
+Auto-integrates into the Action Sheet of [Message Composer](/ui-kit/react/message-composer) when activated.
-
+
-### Thumbnail Generation
+#### Collaborative Whiteboard
-The Thumbnail Generation extension automatically creates a smaller preview image whenever a larger image is shared, helping to reduce the upload/download time and bandwidth usage. For a comprehensive understanding and guide on implementing and using the Thumbnail Generation Extension, refer to our specific guide on the [Thumbnail Generation Extension](/fundamentals/thumbnail-generation).
+Real-time shared whiteboard for drawing and brainstorming. See [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard).
-Once you have successfully activated the [Thumbnail Generation Extension](/fundamentals/thumbnail-generation) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/react/message-list) component of UI Kits.
+Auto-integrates into the Action Sheet of [Message Composer](/ui-kit/react/message-composer) when activated.
-
+
+
+### Security
+
+#### Disappearing Messages
+
+Messages auto-delete after a specified interval. Works for 1:1 and group messages. See [Disappearing Messages Extension](/fundamentals/disappearing-messages).
+
+### Customer Support
+
+#### Chatwoot
+
+Routes user messages to Chatwoot for customer support. See [Chatwoot Extension](/fundamentals/chatwoot).
+
+#### Intercom
+
+Integrates Intercom for in-app customer support. See [Intercom Extension](/fundamentals/intercom).
+
+### Smart Chat Features
+
+#### Conversation Starter
+
+AI-generated opening messages for new chats. See [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter) and [AI Features](/ui-kit/react/ai-features).
+
+#### Smart Replies
+
+AI-generated response suggestions based on conversation context. See [Smart Replies](/fundamentals/ai-user-copilot/smart-replies) and [AI Features](/ui-kit/react/ai-features).
+
+#### Conversation Summary
+
+AI-generated recap of long conversations. See [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary) and [AI Features](/ui-kit/react/ai-features).
+
+---
+
+## Next Steps
+
+
+
+ );
+}
+```
+
+
+
+
-***
-
-## Usage
-
-### Integration
+---
-The following code snippet illustrates how you can directly incorporate the Group Members component into your Application.
+## Minimal Render
-
+
+ ) : null;
+}
export default GroupMembersDemo;
```
-
-
+
+
-##### 4. onError
+Customized:
-This action doesn't change the behavior of the component but rather listens for any errors that occur in the Group Members component.
+
+
+
+
+ );
+ };
-export default GroupMembersDemo;
+ return
+
+
+
+ {member.getName()}
+
+ {scope}
+
+
+
-**Example**
+Customized:
-In the example below, we are applying a filter to the Group Members by setting the limit to two and setting the scope to show only admin and moderator.
+
+
+
Joined: {date}
;
+ };
-export default GroupMembersDemo;
+ return
+
-export default GroupMembersDemo;
-```
+Customized:
-
+
+
+
+ {member.getScope()}
+
+ );
+ };
+ return
+
+ {getLocalizedString("GROUP_MEMBERS")}
+
+
+
+
-{m.getScope()}
}` |
+| Change colors, fonts, spacing | Global CSS | Target `.cometchat-group-members` class | `.cometchat-group-members .cometchat-avatar { border-radius: 8px; }` |
-***
+---
-### Functionality
+## Accessibility
-These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements.
+The component renders a scrollable list of interactive items. Each member row is keyboard-focusable and activates on Enter/Space. The scope change dropdown and context menu (options) are accessible via keyboard. Online status indicators use CSS — add `aria-label` attributes via `itemView` if screen reader descriptions are needed.
-
-
+| | |
+| --- | --- |
+| Type | `CometChat.Group` |
+| Default | — |
-The customized chat interface is displayed below.
+---
-
-
-
+### groupMemberRequestBuilder
-Use the following code to achieve the customization shown above.
+Controls which members load and in what order.
-
-
- );
- };
+Custom component rendered as the entire header bar.
- return (
- <>
- {chatGroup && (
-
-
-
-
-
- {groupMember.getName()}
-
-
- {localize(scope.toUpperCase())}
-
-
-
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-Use the following code to achieve the customization shown above.
+---
-
- {member.getName()}
- 
{member.getRole()}
-
;
-}
+### hideSearch
-
-
+| | |
+| --- | --- |
+| Type | `(groupMember: CometChat.GroupMember) => JSX.Element` |
+| Default | Built-in list item |
-The customized chat interface is displayed below.
+---
-
-
-
+### leadingView
-Use the following code to achieve the customization shown above.
+Custom renderer for the avatar / left section.
-
- {"Joined at: " + formatTime(groupMember.getJoinedAt())}
-
- );
- };
+### loadingView
- return (
- <>
- {chatGroup && (
-
-
+| | |
+| --- | --- |
+| Type | `((error: CometChat.CometChatException) => void) \| null` |
+| Default | `undefined` |
-Use the following code to achieve the customization shown above.
+---
-
-
- );
-};
-
-
+### searchKeyword
-The customized chat interface is displayed below.
+Pre-fills the search and filters the member list.
-
-
-
+| | |
+| --- | --- |
+| Type | `string` |
+| Default | `""` |
-Use the following code to achieve the customization shown above.
+---
-
- {localize((scope as string).toUpperCase())}
-
- );
- };
+---
- return (
- <>
- {chatGroup && (
-
-
-
-Use the following code to achieve the customization shown above.
-
-
- {
- // logic here
- }}
- iconURL={ICON_URL}
- />
-
- );
-};
+### showScrollbar
-
- {localize("GROUP_MEMBERS")}
-
-
-
+### titleView
-Use the following code to achieve the customization shown above.
+Custom renderer for the name / title text.
-
-
+`CometChatGroups` is a directory list component. It renders available groups and emits the selected `CometChat.Group` via `onItemClick`. Wire it to `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer` to build a group chat layout.
-The Groups component is composed of the following BaseComponents:
+```tsx lines
+import { useState } from "react";
+import {
+ CometChatGroups,
+ CometChatMessageHeader,
+ CometChatMessageList,
+ CometChatMessageComposer,
+} from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import "@cometchat/chat-uikit-react/css-variables.css";
-| Components | Description |
-| ----------------- | ------------------------------------------------------------------------------------------------------------------------- |
-| CometChatList | A reusable container component having title, search box, customisable background and a list view. |
-| CometChatListItem | A component that renders data obtained from a Group object on a Tile having a title, subtitle, leading and trailing view. |
+function GroupChatApp() {
+ const [selectedGroup, setSelectedGroup] = useState
+
+ );
+}
+```
-## Usage
+
+
+ setSelectedGroup(group)}
+ />
+
+ {selectedGroup ? (
+
+
+ ) : (
+
+ Select a group
+
+ )}
+
+
-### Integration
+---
-The following code snippet illustrates how you can directly incorporate the Groups component into your Application.
+## Minimal Render
-
-
-
-```ts
+```tsx lines
+import { CometChatGroups } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatGroups, SelectionMode } from "@cometchat/chat-uikit-react";
-import React from "react";
-const GroupsDemo = () => {
- function handleOnSelect(group: CometChat.Group, selected: boolean): void {
- console.log(group);
- //your custom onSelect actions
- }
+function FilteredGroups() {
return (
+### Filter Recipes
-
-```js
-import { CometChatGroups, SelectionMode } from "@cometchat/chat-uikit-react";
-import React from "react";
+| Recipe | Code |
+| --- | --- |
+| Joined groups only | `new CometChat.GroupsRequestBuilder().joinedOnly(true)` |
+| Limit to 10 per page | `new CometChat.GroupsRequestBuilder().setLimit(10)` |
+| Search by keyword | `new CometChat.GroupsRequestBuilder().setSearchKeyword("design")` |
+| Filter by tags | `new CometChat.GroupsRequestBuilder().setTags(["vip"])` |
+| With tags data | `new CometChat.GroupsRequestBuilder().withTags(true)` |
-const GroupsDemo = () => {
- function handleOnSelect(group, selected) {
- console.log(group);
- //your custom onSelect actions
- }
+Default page size is 30. The component uses infinite scroll — the next page loads as the user scrolls to the bottom.
+
+The `searchRequestBuilder` prop accepts a separate `GroupsRequestBuilder` for filtering when the search bar is active.
+
+```tsx lines
+import { CometChatGroups } from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+
+function SearchFilteredGroups() {
return (
-
-
-
-##### 2. onItemClick
+Refer to [GroupsRequestBuilder](/sdk/javascript/retrieve-groups) for the full builder API.
-The `onItemClick` event is activated when you click on the Group List item. This action does not come with any predefined behavior. However, you have the flexibility to override this event and tailor it to suit your needs using the following code snippet.
+---
-
-
-```ts
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatGroups } from "@cometchat/chat-uikit-react";
-import React from "react";
+## Actions and Events
-const GroupsDemo = () => {
- function handleOnItemClick(group: CometChat.Group): void {
- console.log(group, "your custom on item click action");
- }
- return
+Fires when a group row is tapped. Primary navigation hook — set the active group and render the message view.
-
-```js
+```tsx lines
import { CometChatGroups } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const GroupsDemo = () => {
- function handleOnItemClick(group) {
- console.log(group, "your custom on item click action");
- }
- return
-
-
-
-##### 3. onError
-
-This action doesn't change the behavior of the component but rather listens for any errors that occur in the Groups component.
-
-
-
-```ts
import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatGroups } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const GroupsDemo = () => {
- const handleOnError = (error: CometChat.CometChatException) => {
- console.log("Your custom on error actions");
- };
- return
-
-
-```js
-import { CometChatGroups } from "@cometchat/chat-uikit-react";
-import React from "react";
-const GroupsDemo = () => {
- const handleOnError = (error) => {
- console.log("Your custom on error actions");
+function GroupsWithClick() {
+ const handleItemClick = (group: CometChat.Group) => {
+ console.log("Selected:", group.getGuid());
};
- return
-
-
-
-### Filters
-
-**Filters** allow you to customize the data displayed in a list within a Component. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK.
-
-##### 1. GroupsRequestBuilder
-
-The [GroupsRequestBuilder](/sdk/javascript/retrieve-groups) enables you to filter and customize the group list based on available parameters in [GroupsRequestBuilder](/sdk/javascript/retrieve-groups). This feature allows you to create more specific and targeted queries when fetching groups. The following are the parameters available in [GroupsRequestBuilder](/sdk/javascript/retrieve-groups)
+#### onSelect
-| Methods | Type | Description |
-| -------------------- | -------------- | --------------------------------------------------------------------------------------- |
-| **setLimit** | number | sets the number groups that can be fetched in a single request, suitable for pagination |
-| **setSearchKeyword** | String | used for fetching groups matching the passed string |
-| **joinedOnly** | boolean | to fetch only joined groups. |
-| **setTags** | Array\ | used for fetching groups containing the passed tags |
-| **withTags** | boolean | used to fetch tags data along with the list of groups |
+Fires when a group is checked/unchecked in multi-select mode. Requires `selectionMode` to be set.
-**Example**
-
-In the example below, we are applying a filter to the Group List based on only joined groups and setting the limit to two.
-
-
-
-```ts
+```tsx lines
+import { useState } from "react";
+import {
+ CometChatGroups,
+ SelectionMode,
+} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatGroups } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const GroupsDemo = () => {
- return (
-
+function BatchSelectGroups() {
+ const [selected, setSelected] = useState>(new Set());
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatGroups } from "@cometchat/chat-uikit-react";
-import React from "react";
+ const handleSelect = (group: CometChat.Group, isSelected: boolean) => {
+ setSelected((prev) => {
+ const next = new Set(prev);
+ const id = group.getGuid();
+ isSelected ? next.add(id) : next.delete(id);
+ return next;
+ });
+ };
-const GroupsDemo = () => {
return (
-
-
-
-##### 2. SearchRequestBuilder
+#### onError
-The SearchRequestBuilder uses [GroupsRequestBuilder](/sdk/javascript/retrieve-groups) enables you to filter and customize the search list based on available parameters in GroupsRequestBuilder. This feature allows you to keep uniformity between the displayed Groups List and searched Group List.
+Fires on internal errors (network failure, auth issue, SDK exception).
-**Example**
-
-
-
-```ts
-import { CometChat } from "@cometchat/chat-sdk-javascript";
+```tsx lines
import { CometChatGroups } from "@cometchat/chat-uikit-react";
-import React from "react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
-const GroupsDemo = () => {
+function GroupsWithErrorHandler() {
return (
{
+ console.error("CometChatGroups error:", error);
+ }}
/>
);
-};
-
-export default GroupsDemo;
+}
```
-
-
-
-```js
+### Global UI Events
+
+`CometChatGroupEvents` emits events subscribable from anywhere in the application. Subscribe in a `useEffect` and unsubscribe on cleanup.
+
+| Event | Fires when | Payload |
+| --- | --- | --- |
+| `ccGroupCreated` | A new group is created | `CometChat.Group` |
+| `ccGroupDeleted` | A group is deleted | `CometChat.Group` |
+| `ccGroupMemberJoined` | A user joins a group | `IGroupMemberJoined` |
+| `ccGroupLeft` | A user leaves a group | `IGroupLeft` |
+| `ccGroupMemberAdded` | Members are added to a group | `IGroupMemberAdded` |
+| `ccGroupMemberScopeChanged` | A member's scope changes | `IGroupMemberScopeChanged` |
+| `ccGroupMemberKicked` | A member is kicked | `IGroupMemberKickedBanned` |
+| `ccGroupMemberBanned` | A member is banned | `IGroupMemberKickedBanned` |
+| `ccGroupMemberUnbanned` | A member is unbanned | `IGroupMemberUnBanned` |
+| `ccOwnershipChanged` | Group ownership is transferred | `IOwnershipChanged` |
+
+```tsx lines
+import { useEffect } from "react";
+import { CometChatGroupEvents } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatGroups } from "@cometchat/chat-uikit-react";
-import React from "react";
-const GroupsDemo = () => {
- return (
-
+### SDK Events (Real-Time, Automatic)
-
+The component listens to these SDK events internally. No manual attachment needed unless additional side effects are required.
-***
+| SDK Listener | Internal behavior |
+| --- | --- |
+| `onGroupMemberJoined` | Updates member count, sets `hasJoined` if current user joined |
+| `onGroupMemberLeft` | Updates member count, sets `hasJoined(false)` if current user left |
+| `onMemberAddedToGroup` | Updates member count, adds group to list if current user was added |
+| `onGroupMemberKicked` | Updates member count, sets `hasJoined(false)` if current user was kicked |
+| `onGroupMemberBanned` | Removes group if current user was banned, otherwise updates member count |
+| `onGroupMemberScopeChanged` | Updates scope if current user's scope changed, updates member count |
-### Events
+
+In React 18 StrictMode, `useEffect` runs twice on mount in development. The component handles listener cleanup internally, but any additional listeners added alongside the component need cleanup in the `useEffect` return function to avoid duplicate event handling.
+
-[Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.
+---
-To handle events supported by Groups you have to add corresponding listeners by using `CometChatGroupEvents`
+## Custom View Slots
-The `Groups` component does not produce any events directly.
+Each slot replaces a section of the default UI. Slots that accept a group parameter receive the `CometChat.Group` object for that row.
-***
+| Slot | Signature | Replaces |
+| --- | --- | --- |
+| `itemView` | `(group: CometChat.Group) => JSX.Element` | Entire list item row |
+| `leadingView` | `(group: CometChat.Group) => JSX.Element` | Avatar / left section |
+| `titleView` | `(group: CometChat.Group) => JSX.Element` | Name / title text |
+| `subtitleView` | `(group: CometChat.Group) => JSX.Element` | Member count subtitle |
+| `trailingView` | `(group: CometChat.Group) => JSX.Element` | Right section |
+| `headerView` | `JSX.Element` | Entire header bar |
+| `loadingView` | `JSX.Element` | Loading spinner |
+| `emptyView` | `JSX.Element` | Empty state |
+| `errorView` | `JSX.Element` | Error state |
+| `options` | `(group: CometChat.Group) => CometChatOption[]` | Context menu / hover actions |
-## Customization
+### itemView
-To fit your app's design requirements, you can customize the appearance of the Groups component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.
+Replace the entire list item row.
-### Style
+Default:
-Using CSS you can customize the look and feel of the component in your app like the color, size, shape, and fonts.
+
+ 
+
-**Example**
+Customized:
-
+ 
-```ts
-import { CometChatGroups } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const GroupsDemo = () => {
- return
-
-
-```js
+```tsx lines
+import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroups } from "@cometchat/chat-uikit-react";
-import React from "react";
-const GroupsDemo = () => {
- return
-
-
-```css
-.cometchat .cometchat-groups .cometchat-list__header-title {
- background-color: #edeafa;
- color: #6852d6;
- border-width: 0px 1px 1px 0px;
- border-style: solid;
- border-color: #6852d6;
- overflow: hidden;
- text-overflow: ellipsis;
- font-family: "Times New Roman";
- font-size: 24px;
- font-style: normal;
- font-weight: 700;
- line-height: 28.8px;
+
+```css lines
+.group-list-item {
+ display: flex;
+ flex-direction: column;
+ text-align: left;
+ min-width: 240px;
+ padding: 8px 16px;
+ gap: 4px;
+ flex: 1 0 0;
+ border-right: 1px solid #f5f5f5;
+ background: #fff;
}
-.cometchat .cometchat-groups .cometchat-search-bar__input::placeholder {
- font-family: "Times New Roman";
- font-size: 16px;
- font-style: normal;
- font-weight: 400;
- line-height: 19.2px;
+.group-list-item:hover {
+ background-color: #f5f5f5;
}
-.cometchat .cometchat-groups .cometchat-list-item {
- background: #fff;
- border-right: 1px solid #f5f5f5;
+.group-list-item__title-wrapper {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ align-self: stretch;
}
-.cometchat .cometchat-groups__list-item .cometchat-avatar {
- background-color: #aa9ee8;
- border-radius: 6.67px;
+.group-list-item__title {
+ overflow: hidden;
+ color: #141414;
+ text-overflow: ellipsis;
+ font: 500 16px Roboto;
}
-.cometchat .cometchat-groups .cometchat-list-item__body-title {
+.group-list-item__tail {
+ display: flex;
+ padding: 4px 12px;
+ justify-content: center;
+ align-items: center;
+ border-radius: 1000px;
+ background: #edeafa;
overflow: hidden;
- color: #141414;
+ color: #6852d6;
text-overflow: ellipsis;
- font-family: "Times New Roman";
- font-size: 16px;
- font-style: normal;
- font-weight: 400;
- line-height: 19.2px;
+ font: 700 12px Roboto;
}
-.cometchat .cometchat-groups .cometchat-groups__subtitle {
+.group-list-item__subtitle {
overflow: hidden;
color: #727272;
text-overflow: ellipsis;
white-space: nowrap;
- font-family: "Times New Roman";
- font-size: 14px;
- font-style: normal;
- font-weight: 400;
- line-height: 16.8px;
+ font: 400 14px Roboto;
}
```
-
-
-***
+### titleView
-### Functionality
+Replace the name / title text. Group type badge inline example.
-These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements.
+
+ 
+
-```ts
-import { CometChatGroups, TitleAlignment } from "@cometchat/chat-uikit-react";
-import React from "react";
+```tsx lines
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatGroups } from "@cometchat/chat-uikit-react";
-const GroupsDemo = () => {
- return (
-
+
+```css lines
+.groups__title-view {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ align-self: stretch;
+}
-
-```js
-import { CometChatGroups, TitleAlignment } from "@cometchat/chat-uikit-react";
-import React from "react";
+.groups__title-view-name {
+ overflow: hidden;
+ color: #141414;
+ text-overflow: ellipsis;
+ font: 500 16px Roboto;
+}
-const GroupsDemo = () => {
- return (
-
-
-Below is a list of customizations along with corresponding code snippets:
-
-| Property | Description | Code |
-| ------------------- | ------------------------------------------------------------------- | ---------------------------------------- |
-| **Hide Search** | Hides the default search bar. | `hideSearch={true}` |
-| **Hide Error** | Hides the default and custom error view passed in `errorView` prop. | `hideError={true}` |
-| **Hide Group Type** | Hides the group type icon. | `hideGroupType={true}` |
-| **Active Group** | The group to highlight in the list. | `activeGroup={chatGroup}` |
-| **Selection Mode** | Selection mode to use for the default trailing view. | `selectionMode={SelectionMode.multiple}` |
-| **Show Scrollbar** | Controls the visibility of the scrollbar in the list. | `showScrollbar={true}` |
-| **Loading View** | A custom view to display during the loading state. | `loadingView={<>Custom Loading View}` |
-| **Empty View** | Custom view for the empty state of the component. | `emptyView={<>Custom Empty View}` |
-| **Error View** | A custom view to display when an error occurs. | `errorView={<>Custom Error View}` |
-
-***
-
-### Advanced
-
-For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component.
+### subtitleView
-***
+Replace the member count subtitle text.
-#### ItemView
-
-A custom view to render for each group in the fetched list.
-
-Shown below is the default chat interface.
+Default:
-
+ 
-The customized chat interface is displayed below.
+Customized:
-
+ 
-Use the following code to achieve the customization shown above.
-
-```ts
+```tsx lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroups } from "@cometchat/chat-uikit-react";
-import React from "react";
-const GroupsDemo = () => {
- const getItemView = (group: CometChat.Group) => {
+function SubtitleGroups() {
+ const getSubtitleView = (group: CometChat.Group) => {
return (
-
-
-
-```css
-.groups__title-view{
-display: flex;
-align-items: center;
-gap: 4px;
-align-self: stretch;
-}
-.groups__title-view-name{
-overflow: hidden;
-color: #141414;
-text-overflow: ellipsis;
-font:500 16px Roboto
+
+```css lines
+.groups__header {
+ display: flex;
+ width: 100%;
+ padding: 8px 16px;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+ border-radius: 10px;
+ border: 1px solid #e8e8e8;
+ background: #edeafa;
}
-.groups__title-view-type{
-color: #FFF;
-font: 600 8px Roboto;
-display: flex;
-height: 15px;
-padding: 1px 3px;
-justify-content: center;
-align-items: center;
-gap: 4px;
-border-radius: 7px;
-background: #09C26F;
+
+.groups__header__title {
+ overflow: hidden;
+ color: #141414;
+ text-overflow: ellipsis;
+ font: 700 24px Roboto;
}
-.groups__title-view-public .groups__title-view-type{
-background: #0B7BEA;
+
+.groups__header .cometchat-button .cometchat-button__icon {
+ background: #141414;
}
-.groups__title-view-type img{
-background: #fff;
-border-radius: 4px;
-height: 12px;
-width: 12px;
+
+.groups__header .cometchat-button {
+ width: 24px;
+ border: none;
+ background: transparent;
+ border-radius: 0;
}
```
-
-
-***
-
-#### SubtitleView
-
-Custom subtitle view to be rendered for each group in the fetched list.
-
-Shown below is the default chat interface.
-
-
-
-
+### options
-The customized chat interface is displayed below.
+Replace the context menu / hover actions on each group item.
-
+
-Use the following code to achieve the customization shown above.
-
-```ts
+```tsx lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatGroups } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const GroupsDemo = () => {
- const getSubtitleView = (group: CometChat.Group): JSX.Element => {
- if (!(group instanceof CometChat.Group)) {
- return <>;
- }
-
- return (
-
+
+```css lines
+.cometchat .cometchat-groups .cometchat-menu-list__menu {
+ background: none;
+}
+.cometchat .cometchat-groups .cometchat-menu-list__main-menu-item-icon {
+ background: #f44649;
+}
+```
+
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatGroups } from "@cometchat/chat-uikit-react";
-import React from "react";
+```ts lines
+// CometChatOption interface
+interface CometChatOption {
+ id?: string; // Unique identifier
+ title?: string; // Display text
+ iconURL?: string; // Icon asset URL
+ onClick?: () => void; // Click handler
+}
+```
-const GroupsDemo = () => {
- const getSubtitleView = (group) => {
- if (!(group instanceof CometChat.Group)) {
- return <>;
- }
+---
- return (
-
+
+ }
+ />
+ );
+}
```
-
+
);
}
-```
-
-
-
-
-
-***
-### Actions
+export default GroupsDemo;
+```
-[Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.
+Root CSS class: `.cometchat-groups`
-##### 1. onSelect
+---
-The `onSelect` action is activated when you select the done icon while in selection mode. This returns the `group` object along with the boolean flag `selected` to indicate if the group was selected or unselected.
+## Filtering Groups
-This action does not come with any predefined behavior. However, you have the flexibility to override this event and tailor it to suit your needs using the following code snippet.
+Pass a `CometChat.GroupsRequestBuilder` to `groupsRequestBuilder`. Pass the builder instance — not the result of `.build()`.
-
+
-**Example**
+Customized:
-
+
+
+ );
+ };
-export default GroupsDemo;
+ return
+
+ {group.getName()}
+ JOIN
+
+ {group.getMembersCount()} Members • {group.getDescription()}
+
+
+
+ {group.getName()}
+ {group.getType()}
+
+ );
+ };
-export default GroupsDemo;
+ return
+
-The customized chat interface is displayed below.
+Customized:
-
+
-Use the following code to achieve the customization shown above.
-
-
+```css lines
+.cometchat .cometchat-groups .group-subtitle {
+ overflow: hidden;
+ color: #727272;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font: 400 14px Roboto;
+}
+```
+
+
-
-```js
-import { CometChatGroups } from "@cometchat/chat-uikit-react";
-import React from "react";
+### leadingView
-const GroupsDemo = () => {
- const getItemView = (group: CometChat.Group) => {
+Replace the avatar / left section. Joined status badge example.
+
+
+
+
+
+
+
+```tsx lines
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatGroups, CometChatAvatar } from "@cometchat/chat-uikit-react";
+
+function LeadingViewGroups() {
+ const getLeadingView = (group: CometChat.Group) => {
return (
-
+
+```css lines
+.cometchat-groups .cometchat-list-item .groups__leading-view .cometchat-avatar__image,
+.cometchat-groups .cometchat-list-item .groups__leading-view .cometchat-avatar {
+ border-radius: 8px;
+ height: 48px;
+ width: 48px;
+}
-
-```css
-.group-list-item {
- display: flex;
- flex-direction: column;
- text-align: left;
+.groups__leading-view-info {
display: flex;
- min-width: 240px;
- padding: 8px 16px;
- gap: 4px;
- flex: 1 0 0;
- border-right: 1px solid #f5f5f5;
- background: #fff;
+ width: 48px;
+ height: 15px;
+ padding: 1px 3px;
+ justify-content: center;
+ align-items: center;
+ color: #fff;
+ font: 600 8px/9.6px Roboto;
+ background: #ffab00;
+ position: absolute;
+ bottom: -2px;
}
-.group-list-item:hover {
- background-color: #f5f5f5;
+.groups__leading-view-joined .groups__leading-view-info {
+ background: #09c26f;
}
-.group-list-item__title-wrapper {
- display: flex;
- justify-content: space-between;
- align-items: center;
- align-self: stretch;
+.groups__leading-view {
+ position: relative;
}
+```
+
+
-.group-list-item__title {
- overflow: hidden;
- color: #141414;
- text-overflow: ellipsis;
- font-family: Roboto;
- font-size: var(--Size-H4, 16px);
- font-style: normal;
- font-weight: 500;
- line-height: 19.2px;
-}
+### trailingView
-.group-list-item__tail {
+Replace the right section. Join status button example.
+
+
+
+
+
+
+
+```tsx lines
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatGroups } from "@cometchat/chat-uikit-react";
+
+function TrailingViewGroups() {
+ const getTrailingView = (group: CometChat.Group) => {
+ return (
+
+
+```css lines
+.groups__trailing-view {
display: flex;
padding: 4px 12px;
justify-content: center;
align-items: center;
- gap: 20px;
border-radius: 1000px;
background: #edeafa;
overflow: hidden;
color: #6852d6;
text-overflow: ellipsis;
- font-family: Roboto;
- font-size: 12px;
- font-style: normal;
- font-weight: 700;
- line-height: 14.4px;
+ font: 700 12px Roboto;
}
-.group-list-item__subtitle {
- overflow: hidden;
- color: #727272;
- text-overflow: ellipsis;
- white-space: nowrap;
- font-family: Roboto;
- font-size: 14px;
- font-style: normal;
- font-weight: 400;
- line-height: 16.8px;
+.cometchat-groups .cometchat-list-item__trailing-view {
+ width: fit-content;
+ height: fit-content;
}
```
-
-
-***
+### headerView
-#### TitleView
-
-The customized chat interface is displayed below.
+Replace the entire header bar.
-
+
-Use the following code to achieve the customization shown above.
-
-```ts
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatGroups } from "@cometchat/chat-uikit-react";
+```tsx lines
+import {
+ CometChatButton,
+ CometChatGroups,
+ getLocalizedString,
+} from "@cometchat/chat-uikit-react";
-// Custom title view component
-const customTitleView = (group: CometChat.Group) => {
- return
+ { /* handle click */ }} />
+
+ }
+ />
+ );
}
-
-
-
- {group.getName()}
- JOIN
-
- {group.getMembersCount()} Members • {group.getDescription()}
-
+
+ {group.getMembersCount()} Members • {group.getDescription()}
);
};
- return
+
+
+
-
+ <>
+ {group.getHasJoined() ? (
+
-
- {group.getName()}
- JOIN
-
- {group.getMembersCount()} Members • {group.getDescription()}
-
-
+
+ ) : (
+
+
+ )}
+
);
};
- return
+
+
+
+ {group.getHasJoined() ? "JOINED" : "+ JOIN"}
+
+ );
+ };
+
+ return
+
-Use the following code to achieve the customization shown above.
-
- {group.getName()}
- ![]({"ICON_HERE"}/)
{group.getType()}
-
;
+function CustomHeaderGroups() {
+ return (
+
+ {getLocalizedString("GROUPS")}
+
+
-
+### options
-The customized chat interface is displayed below.
+Replace the context menu / hover actions on each group item.
-
+
-Use the following code to achieve the customization shown above.
-
- {group.getMembersCount()} Members • {group.getDescription()}
-
- );
- };
+import {
+ CometChatOption,
+ CometChatGroups,
+} from "@cometchat/chat-uikit-react";
- return
- {group.getMembersCount()} Members • {group.getDescription()}
-
- );
- };
+## Common Patterns
- return No groups available
+ +
-
+The component uses CSS custom properties (design tokens) defined in `@cometchat/chat-uikit-react/css-variables.css`. The cascade:
-Use the following code to achieve the customization shown above.
+1. Global tokens (e.g., `--cometchat-primary-color`, `--cometchat-background-color-01`) are set on the `.cometchat` root wrapper.
+2. Component CSS (`.cometchat-groups`) consumes these tokens via `var()` with fallback values.
+3. Overrides target `.cometchat-groups` descendant selectors in a global stylesheet.
-
-
:
-
};
- }
+To scope overrides to a single instance when multiple `CometChatGroups` exist on the same page, wrap the component in a container and scope selectors:
-
+
-.cometchat-groups .cometchat-list-item .groups__leading-view .cometchat-avatar__image, .cometchat-groups .cometchat-list-item .groups__leading-view .cometchat-avatar{
- border-radius: 8px;
- height: 48px ;
- width: 48px ;
+```css lines
+.cometchat-groups .cometchat-list__header-title {
+ background-color: #edeafa;
+ color: #6852d6;
+ border-width: 0px 1px 1px 0px;
+ border-style: solid;
+ border-color: #6852d6;
+ font-family: "Times New Roman";
+ font-size: 24px;
+ font-weight: 700;
}
-.groups__leading-view-info{
- display: flex;
- width: 48px;
- height: 15px;
- padding: 1px 3px;
- justify-content: center;
- align-items: center;
- color:#FFF;
- font:600 8px/9.6px Roboto;
- background:#FFAB00;
- position:absolute;
- bottom:-2px;
+.cometchat-groups__list-item .cometchat-avatar {
+ background-color: #aa9ee8;
+ border-radius: 6.67px;
}
-.groups__leading-view-joined .groups__leading-view-info{
- background:#09C26F;
+
+.cometchat-groups .cometchat-list-item__body-title {
+ font-family: "Times New Roman";
+ font-size: 16px;
+ font-weight: 400;
}
-.groups__leading-view{
- position: relative;
+
+.cometchat-groups .cometchat-groups__subtitle {
+ font-family: "Times New Roman";
+ font-size: 14px;
+ font-weight: 400;
}
```
-...
}` |
+| Change colors, fonts, spacing | Global CSS | Target `.cometchat-groups` class | `.cometchat-groups .cometchat-avatar { border-radius: 8px; }` |
-***
+---
-#### TrailingView
+## Accessibility
-The customized chat interface is displayed below.
+The component renders a scrollable list of interactive items. Each group row is keyboard-focusable and activates on Enter/Space. The context menu (options) is accessible via keyboard. Avatar images include the group name as alt text. Group type indicators (public/private/password) use CSS mask images — add `aria-label` attributes via `itemView` if screen reader descriptions are needed for these visual indicators.
-
-
-
+---
-Use the following code to achieve the customization shown above.
+---
-
- {group.getHasJoined() ? "JOINED" : "+ JOIN"}
-
-}
+All props are optional unless noted otherwise.
-
-
+---
-Use the following code to achieve the customization shown above.
+### errorView
-
-
+---
-Use the following code to achieve the customization shown above.
+### hideGroupType
-
@@ -119,11 +122,13 @@ const getBlockUserConfirmationDialogView = () => {
---
-### 4. Message Composer Blocked State
+### 4. Composer Blocked State
_File: [CometChatMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatMessages/CometChatMessages.tsx)_
-```tsx
+When a user is blocked, the composer is replaced with an unblock prompt:
+
+```tsx lines
{showComposerState ? (
{
- if (messageUser?.getBlockedByMe()) {
- setShowComposer(false);
- }
- const unsubscribeFromEvents = subscribeToEvents();
- return () => {
- unsubscribeFromEvents();
- };
-}, [subscribeToEvents, selectedItem]);
-```
-
-- **Send Block/Unblock Action Handler**
+### 5. Event Listeners
_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
-```tsx
-const onUserActionClick = (item: { name: string; icon: string; }) => {
- if (item.name == getLocalizedString("user_details_block")) {
- setShowBlockUserDialog(true);
- } else if (item.name == getLocalizedString("user_details_unblock")) {
- onUnblockUserClicked();
- }
-}
-```
+Subscribe to block/unblock events to update the UI in real time:
-- **Live Updates / Observers**
-
-_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
-
-```tsx
+```tsx lines
const ccUserBlocked = CometChatUserEvents.ccUserBlocked.subscribe(user => {
if (user.getBlockedByMe()) {
setShowComposer(false);
@@ -214,76 +179,34 @@ const ccUserUnblocked = CometChatUserEvents.ccUserUnblocked.subscribe(user => {
---
-## Customization Options
-
-- Styling overrides for blocked states and confirmation dialogs
-- Custom block/unblock confirmation messages
-- Toast notification customization
-- Custom action items for different user states
-- Custom blocked state UI
-
----
-
-## Filtering / Edge Cases
+## Feature Matrix
-- Detect when blocking status changes mid-chat
-- Prevent duplicate block actions
-- Handle blocked users in search results
-- Respect group chat rules when blocking
-- Keep old messages visible from blocked users
+| Feature | Component / Method | File |
+|:---|:---|:---|
+| Block user | `CometChat.blockUsers([UID])` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
+| Unblock user | `CometChat.unblockUsers([UID])` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
+| Check blocked status | `user.getBlockedByMe()` | [CometChatMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatMessages/CometChatMessages.tsx) |
+| Block confirmation | `CometChatConfirmDialog` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
+| Blocked composer state | `message-composer-blocked` | [CometChatMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatMessages/CometChatMessages.tsx) |
+| Block events | `ccUserBlocked.subscribe()` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
+| Unblock events | `ccUserUnblocked.subscribe()` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
+| Update user state | `user.setBlockedByMe(boolean)` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
---
-## Error Handling
-
-```tsx
-CometChat.blockUsers([UID]).then(
- list => {
- user.setBlockedByMe(true);
- CometChatUserEvents.ccUserBlocked.next(user);
- toastTextRef.current = getLocalizedString("blocked_successfully");
- setShowToast(true);
- }, error => {
- console.log("Blocking user fails with error", error);
- }
-)
-```
-
-- Handle block/unblock network errors
-- Provide retry options
-- Maintain UI consistency on errors
-
----
-
-## Context-Specific Notes
-
-- Blocking applies only to private chats, not groups
-- Blocked users may still appear in lists but with indicators
-- Existing messages remain visible
-- Updates are reflected in real-time
-
----
-
-## Summary / Feature Matrix
-
-| Feature | Component / Method | File Reference |
-|:-----------------------|:------------------------------------|:---------------|
-| Block user | `CometChat.blockUsers([UID])` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
-| Unblock user | `CometChat.unblockUsers([UID])` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
-| Check blocked status | `user.getBlockedByMe()` | [CometChatMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatMessages/CometChatMessages.tsx) |
-| Block confirmation dlg | `CometChatConfirmDialog` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
-| Blocked composer state | `message-composer-blocked` | [CometChatMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatMessages/CometChatMessages.tsx) |
-| Block user events | `ccUserBlocked.subscribe()` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
-| Unblock user events | `ccUserUnblocked.subscribe()` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
-| Update user state | `user.setBlockedByMe(boolean)` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
-
----
-
-## Next Steps & Further Reading
-
-- [CometChat React UI Kit Documentation](https://www.cometchat.com/docs/ui-kit/react/overview)
-- [Sample App Repository](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app)
-- User Management Features
-- Advanced Customization Guide
-- Event Handling Documentation
-
+## Next Steps
+
+
+
+ Display and manage user lists.
+
+
+ Customize the message input component.
+
+
+ Browse all feature and formatter guides.
+
+
+ Full working sample application on GitHub.
+
+
\ No newline at end of file
diff --git a/ui-kit/react/guide-call-log-details.mdx b/ui-kit/react/guide-call-log-details.mdx
index a029b601e..136921cac 100644
--- a/ui-kit/react/guide-call-log-details.mdx
+++ b/ui-kit/react/guide-call-log-details.mdx
@@ -1,54 +1,51 @@
---
title: "Call Log Details"
sidebarTitle: "Call Log Details"
+description: "Build a detailed call insights screen with metadata, participants, and recordings in CometChat React UI Kit."
---
-Display comprehensive call information and history when users select calls from the calls tab in your React chat app.
+
-## Overview
+| Field | Value |
+| --- | --- |
+| Packages | `@cometchat/chat-uikit-react` + `@cometchat/calls-sdk-javascript` |
+| Key components | `CometChatCallDetails`, `CometChatCallDetailsInfo`, `CometChatCallDetailsParticipants`, `CometChatCallDetailsRecording` |
+| Init | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` + Calls SDK installed |
+| Purpose | Detailed call insights screen with metadata, participants, and recordings |
+| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) |
+| Related | [All Guides](/ui-kit/react/guide-overview) |
-The Calls Log Details feature provides users with detailed information about specific calls, including call status, participants, duration, recordings, and call history.
+
-- Provides detailed information about specific calls when selected from the calls tab.
-- Enables users to review call details, understand outcomes, view participants, and access recordings for reference.
-- Users can view call details with tabbed navigation showing participants, recordings, and call history.
+Call Log Details shows call metadata, participants, duration, recordings, and history when a user selects a call from the Calls tab.
----
-
-## Prerequisites
-
-- React v18.2.0+
-- CometChat React UI Kit v6.1.0+
-- CometChat Chat SDK JavaScript v4.0.13+
-- CometChat Calls SDK JavaScript v4.0.11+
-- Project setup with initialized CometChat credentials (App ID, Auth Key, Region)
-- TypeScript support (recommended)
-- Call functionality implemented
-- Calls tab navigation configured
+Before starting, complete the [Getting Started](/ui-kit/react/react-js-integration) guide for your framework and install `@cometchat/calls-sdk-javascript`.
---
## Components
-| Component / Class | Role |
-|:--------------------------------|:-----|
-| **CometChatCallDetails** | Main container for call details display |
-| **CometChatCallDetailsInfo** | Shows call status, duration, and info |
-| **CometChatCallDetailsParticipants** | Displays call participants |
-| **CometChatCallDetailsRecording** | Shows call recordings if available |
-| **CometChatCallDetailsHistory** | Displays call history |
-| **CometChatCallLogs** | Calls list component in the calls tab |
+| Component / Class | Role |
+|:---|:---|
+| `CometChatCallDetails` | Main container for call details display |
+| `CometChatCallDetailsInfo` | Shows call status, duration, and info |
+| `CometChatCallDetailsParticipants` | Displays call participants |
+| `CometChatCallDetailsRecording` | Shows call recordings if available |
+| `CometChatCallDetailsHistory` | Displays call history |
+| `CometChatCallLogs` | Calls list component in the calls tab |
---
## Integration Steps
-### 1. Calls Tab Integration Setup
+### 1. Calls Tab Integration
+
+Render `CometChatCallLogs` when the "Calls" tab is active. When a call is clicked, dispatch it to the app state so the details panel can display it.
_File: [CometChatSelector.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatSelector/CometChatSelector.tsx)_
-```tsx
-{activeTab == "calls" ? (
+```tsx lines
+{activeTab === "calls" ? (
{
@@ -60,11 +57,13 @@ _File: [CometChatSelector.tsx](https://github.com/cometchat/cometchat-uikit-reac
---
-### 2. Call Details Component Integration
+### 2. Call Details Component
+
+Guard-check that the selected item is a `CometChat.Call` instance, then render `CometChatCallDetails`. The `onBack` callback clears the selection and returns to the call list.
_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
-```tsx
+```tsx lines
const CallDetailsView = () => {
if (!selectedItem || !(selectedItem instanceof CometChat.Call)) return null;
@@ -82,11 +81,13 @@ const CallDetailsView = () => {
---
-### 3. Call Details Main Component Implementation
+### 3. Call Details Implementation
+
+The main details screen. It shows the caller's avatar and name at the top, call info (status, duration) below, and three tabs: Participants, Recording, and History. Tab selection switches the content panel.
_File: [CometChatCallLogDetails.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCallLog/CometChatCallLogDetails.tsx)_
-```tsx
+```tsx lines
export const CometChatCallDetails = (props: { selectedItem: any, onBack?: () => void }) => {
const { selectedItem, onBack } = props;
const callDetailTabItems = [
@@ -136,11 +137,13 @@ export const CometChatCallDetails = (props: { selectedItem: any, onBack?: () =>
---
-### 4. Call Information Display Component
+### 4. Call Information Display
+
+Renders the call status line (incoming/outgoing) based on who initiated the call. Compares the initiator's UID against the logged-in user to determine direction, then maps the SDK call status to a localized label.
_File: [CometChatCallLogInfo.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCallLog/CometChatCallLogInfo.tsx)_
-```tsx
+```tsx lines
export const CometChatCallDetailsInfo = (props: { call: any }) => {
const { call } = props;
const [loggedInUser, setLoggedInUser] = useState(null);
@@ -160,7 +163,6 @@ export const CometChatCallDetailsInfo = (props: { call: any }) => {
case CometChatUIKitConstants.calls.ended: {
return isSentByMeFlag ? getLocalizedString("calls_outgoing_call") : getLocalizedString('calls_incoming_call');
}
- // ... other status cases
}
}
@@ -179,127 +181,34 @@ export const CometChatCallDetailsInfo = (props: { call: any }) => {
---
-## Implementation Flow
-
-- **Fetch Data / Call Selection**
-
-```tsx
-const onSelectorItemClicked = (e: CometChat.Conversation | CometChat.User | CometChat.Group | CometChat.Call, type: string) => {
- if (type === "updateSelectedItemCall") {
- setSelectedItem(e as CometChat.Call);
- setAppState({ type: "updateSelectedItemCall", payload: e as CometChat.Call });
- }
-}
-```
-
-- **Load Call Data / Associated Information**
-
-```tsx
-useEffect(() => {
- const loggedInUser = CometChatUIKitLoginListener.getLoggedInUser();
- const callUser = verifyCallUser(selectedItem, loggedInUser!);
-
- if (selectedItem.receiverType === CometChatUIKitConstants.MessageReceiverType.user) {
- CometChat.getUser(callUser.uid).then((response: CometChat.User) => {
- setUser(response);
- });
- }
-}, [selectedItem]);
-```
-
-- **Display Call Details / Tab Navigation**
-
-```tsx
-const [activeTab, setActiveTab] = useState("Participants");
-
-const renderTabContent = () => {
- switch (activeTab) {
- case "Participants":
- return
+
+ The call logs component reference.
+
+
+ Overview of calling capabilities.
+
+
+ Browse all feature and formatter guides.
+
+
+ Full working sample application on GitHub.
+
+
\ No newline at end of file
diff --git a/ui-kit/react/guide-group-chat.mdx b/ui-kit/react/guide-group-chat.mdx
index b62e735ec..aa08c0532 100644
--- a/ui-kit/react/guide-group-chat.mdx
+++ b/ui-kit/react/guide-group-chat.mdx
@@ -1,54 +1,50 @@
---
title: "Group Chat"
sidebarTitle: "Group Chat"
+description: "Implement group management including create, join, members, roles, and ownership transfer in CometChat React UI Kit."
---
-Implement comprehensive group management functionality including creation, joining, member management, and administrative controls in your React chat app.
+
----
-
-## Overview
-
-Groups Management provides a complete set of features for creating, managing, and participating in group conversations, including member administration, permissions, and group lifecycle management.
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` |
+| Key components | `CometChatGroups`, `CometChatGroupMembers`, `CometChatCreateGroup`, `CometChatJoinGroup`, `CometChatAddMembers`, `CometChatBannedMembers`, `CometChatTransferOwnership` |
+| Init | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` |
+| Features | Create public/private/password-protected groups, manage members, roles, ownership transfer |
+| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) |
+| Related | [All Guides](/ui-kit/react/guide-overview) |
-- Provides a full set of features for creating and managing group conversations, including member administration, permissions, and lifecycle management.
-- Enables users to create collaborative spaces, manage team communications, control access through different group types, and maintain group organization through administrative tools.
-- Your app will support full group lifecycle management from creation to administration, allowing users to create public/private/password-protected groups, manage members, and control group operations.
+
----
-
-## Prerequisites
+This guide covers the full group lifecycle: creating groups, joining them, managing members, changing roles, and transferring ownership.
-- React v18.2.0+
-- CometChat React UI Kit v6.1.0+
-- CometChat Chat SDK JavaScript v4.0.13+
-- Project setup with initialized CometChat credentials (App ID, Auth Key, Region)
-- TypeScript support (recommended)
-- Basic chat functionality already implemented
-- User authentication already configured
+Before starting, complete the [Getting Started](/ui-kit/react/react-js-integration) guide for your framework.
---
## Components
-| Component / Class | Role |
-|--------------------------------|------|
-| **CometChatCreateGroup** | Creates new groups with different types and settings |
-| **CometChatJoinGroup** | Handles joining public and password-protected groups |
-| **CometChatGroupMembers** | Displays and manages group member lists |
-| **CometChatAddMembers** | Adds new members to existing groups |
-| **CometChatBannedMembers** | Manages banned members and unban operations |
-| **CometChatTransferOwnership** | Transfers group ownership to other members |
+| Component / Class | Role |
+|:---|:---|
+| `CometChatCreateGroup` | Creates new groups with different types and settings |
+| `CometChatJoinGroup` | Handles joining public and password-protected groups |
+| `CometChatGroupMembers` | Displays and manages group member lists |
+| `CometChatAddMembers` | Adds new members to existing groups |
+| `CometChatBannedMembers` | Manages banned members and unban operations |
+| `CometChatTransferOwnership` | Transfers group ownership to other members |
---
## Integration Steps
-### 1. Create Group Implementation
+### 1. Create Group
+
+Build a form that collects a group name, type (public/private/password), and optional password. On submit, generate a unique GUID, call `CometChat.createGroup()`, and emit `ccGroupCreated` so the rest of the UI updates.
_File: [CometChatCreateGroup.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCreateGroup/CometChatCreateGroup.tsx)_
-```tsx
+```tsx lines
export const CometChatCreateGroup = ({ setShowCreateGroup, onGroupCreated }: CreateGroupProps) => {
const [groupType, setGroupType] = useState("public");
const [groupName, setGroupName] = useState("");
@@ -73,12 +69,14 @@ export const CometChatCreateGroup = ({ setShowCreateGroup, onGroupCreated }: Cre
---
-### 2. Join Group Implementation
+### 2. Join Group
+
+Handle joining for both public and password-protected groups. Call `CometChat.joinGroup()` with the group's GUID, type, and password (if applicable). On success, emit `ccGroupMemberJoined` to update the member list across the app.
_File: [CometChatJoinGroup.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatJoinGroup/CometChatJoinGroup.tsx)_
-```tsx
-export const CometChatJoinGroup = ({ group, onHide, onProtectedGroupJoin }) => {
+```tsx lines
+export const CometChatJoinGroup = ({ group, onProtectedGroupJoin }) => {
const [password, setPassword] = useState("");
const [error, setError] = useState(false);
const loggedInUser = CometChatUIKitLoginListener.getLoggedInUser();
@@ -86,7 +84,6 @@ export const CometChatJoinGroup = ({ group, onHide, onProtectedGroupJoin }) => {
const joinGroup = () => {
CometChat.joinGroup(group.getGuid(), group.getType(), password)
.then((res) => {
- onHide();
onProtectedGroupJoin(group);
CometChatGroupEvents.ccGroupMemberJoined.next({
joinedGroup: res,
@@ -100,11 +97,13 @@ export const CometChatJoinGroup = ({ group, onHide, onProtectedGroupJoin }) => {
---
-### 3. View Group Members Implementation
+### 3. View Group Members
+
+Render the member list for a group using `CometChatGroupMembers`. Pass `onItemClick` to handle member selection and `options` to add context-menu actions like "View Profile".
_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
-```tsx
+```tsx lines
const GroupMembersView = ({ group }: { group: CometChat.Group }) => {
return (
+```css lines
+.header-view {
+ display: flex;
+ width: 100%;
+ padding: 3px 16px;
+ align-items: flex-start;
+ gap: 5px;
+ background: #edeafa;
+}
-
-```js
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageList } from "@cometchat/chat-uikit-react";
-
-export function MessageListDemo() {
- const [chatUser, setChatUser] = React.useState(null);
-
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
-
- const onReactionClick = (reaction, message) => {
- //your custom action
- };
+.header-view .cometchat .cometchat-button {
+ width: auto;
+ height: 32px;
+ border-radius: 1000px;
+ border: 1px solid #e8e8e8;
+ background: #fafafa;
+}
- return chatUser ? (
-
-
-##### 4. onReactionListItemClick
+### footerView
+
+Custom view below the message list.
-`onReactionListItemClick` is triggered when you click on the reaction list item of the reaction list. The `onReactionListItemClick` action doesn't have a predefined behavior. You can override this action using the following code snippet.
+
+ 
+
-```ts
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageList } from "@cometchat/chat-uikit-react";
+```tsx lines
+import { CometChatMessageList, CometChatButton } from "@cometchat/chat-uikit-react";
-export function MessageListDemo() {
- const [chatUser, setChatUser] = React.useState();
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
+function MessageListWithFooter() {
+ return (
+
+
+ }
+ />
+ );
+}
+```
+
+
+```css lines
+.footer-view {
+ display: flex;
+ width: 100%;
+ padding: 3px 16px;
+ align-items: flex-start;
+ gap: 5px;
+ background: #edeafa;
+}
- function onReactionListItemClick(
- reaction: CometChat.Reaction,
- message: CometChat.BaseMessage
- ) {
- //your custom action
- }
+.footer-view .cometchat .cometchat-button {
+ width: auto;
+ height: 32px;
+ border-radius: 1000px;
+ border: 1px solid #e8e8e8;
+ background: #fafafa;
+}
- return chatUser ? (
-
+
+
+### templates
+
+Custom message bubble templates via [CometChatMessageTemplate](/ui-kit/react/message-template).
-
-```js
-import React from "react";
+```tsx lines
+import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageList } from "@cometchat/chat-uikit-react";
+import {
+ CometChatMessageList,
+ ChatConfigurator,
+ CometChatActionsIcon,
+} from "@cometchat/chat-uikit-react";
-export function MessageListDemo() {
- const [chatUser, setChatUser] = React.useState(null);
+function MessageListCustomTemplates() {
+ const [chatUser, setChatUser] = useState();
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
+ useEffect(() => {
+ CometChat.getUser("uid").then((user) => setChatUser(user));
}, []);
- const onReactionListItemClick = (reaction, message) => {
- //your custom action
+ const getTemplates = () => {
+ const templates = ChatConfigurator.getDataSource().getAllMessageTemplates();
+ templates.map((data) => {
+ data.options = (loggedInUser, message, group) => {
+ const defaults = ChatConfigurator.getDataSource().getMessageOptions(
+ loggedInUser, message, group
+ );
+ defaults.push(
+ new CometChatActionsIcon({
+ id: "custom",
+ title: "Custom Action",
+ onClick: () => console.log("custom action"),
+ })
+ );
+ return defaults;
+ };
+ });
+ return templates;
};
return chatUser ? (
-
+### Date Time Formatting
-
+Customize timestamps using `CalendarObject`:
-### Filters
+```tsx lines
+import { CometChatMessageList, CalendarObject } from "@cometchat/chat-uikit-react";
-##### 1. Messages Request Builder
+function MessageListCustomDates() {
+ const dateFormat = new CalendarObject({
+ today: "hh:mm A",
+ yesterday: "[yesterday]",
+ otherDays: "DD/MM/YYYY",
+ });
-You can adjust the `MessagesRequestBuilder` in the MessageList Component to customize your message list. Numerous options are available to alter the builder to meet your specific needs. For additional details on `MessagesRequestBuilder`, please visit [MessagesRequestBuilder](/sdk/javascript/additional-message-filtering).
+ return (
+
-
-```ts
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageList } from "@cometchat/chat-uikit-react";
+## Common Patterns
-export function MessageListDemo() {
- const [chatUser, setChatUser] = React.useState();
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
+### Threaded message list
- return chatUser ? (
-
+### Hide all chrome — minimal list
-
-```js
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
+```tsx lines
import { CometChatMessageList } from "@cometchat/chat-uikit-react";
-export function MessageListDemo() {
- const [chatUser, setChatUser] = React.useState(null);
+function MinimalMessageList() {
+ return (
+
+### AI conversation starters and smart replies
-
+```tsx lines
+import { CometChatMessageList } from "@cometchat/chat-uikit-react";
-
+function AIMessageList() {
+ return (
+
+The component uses CSS custom properties (design tokens) defined in `@cometchat/chat-uikit-react/css-variables.css`. The cascade:
-##### 2. Reactions Request Builder
+1. Global tokens set on the `.cometchat` root wrapper.
+2. Component CSS (`.cometchat-message-list`) consumes these tokens via `var()`.
+3. Overrides target `.cometchat-message-list` descendant selectors.
-You can adjust the `ReactionsRequestBuilder` in the MessageList Component to customize and fetch the reactions for the messages. Numerous options are available to alter the builder to meet your specific needs.
+### Key Selectors
-
-
-```ts
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageList } from "@cometchat/chat-uikit-react";
+| Target | Selector |
+| --- | --- |
+| Root | `.cometchat-message-list` |
+| Error state | `.cometchat-message-list__error-state-view` |
+| Footer smart replies | `.cometchat-message-list__footer-smart-replies` |
+| Footer conversation starters | `.cometchat-message-list__footer-conversation-starter` |
+| Outgoing message bubble | `.cometchat-message-bubble-outgoing` |
+| Incoming message bubble | `.cometchat-message-bubble-incoming` |
+| Message bubble status info | `.cometchat-message-bubble__status-info-view` |
+| Thread view replies | `.cometchat-message-bubble__thread-view-replies` |
+| Text bubble | `.cometchat-message-bubble .cometchat-text-bubble` |
+| Date separator | `.cometchat-message-bubble__status-info-view .cometchat-date` |
-export function MessageListDemo() {
- const [chatUser, setChatUser] = React.useState();
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
+### Customization Matrix
- return chatUser ? (
- ` boolean props | `hideReceipts={true}` |
+| Custom message bubbles | Component props | `templates` | `templates={customTemplates}` |
+| Add header/footer | Component props | `headerView` / `footerView` | `headerView={
+---
-
-```js
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageList } from "@cometchat/chat-uikit-react";
+## Accessibility
-export function MessageListDemo() {
- const [chatUser, setChatUser] = React.useState(null);
+Message bubbles are rendered as semantic elements. Date separators provide temporal context. The list supports keyboard scrolling. Thread reply counts are interactive and keyboard-focusable. Reaction buttons activate on Enter/Space. Avatar images include the sender name as alt text.
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
+---
- return chatUser ? (
-
+## Props
-
+All props are optional. Sorted alphabetically.
-### Events
+### customSoundForMessages
-[Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.
+URL to a custom audio file for incoming message notifications.
-The list of events emitted by the Message List component is as follows.
+| | |
+| --- | --- |
+| Type | `string` |
+| Default | `undefined` |
-| Event | Description |
-| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| **ccOpenChat** | this event alerts the listeners if the logged-in user has opened a user or a group chat. |
-| **ccMessageEdited** | Triggers whenever a loggedIn user edits any message from the list of messages .it will have three states such as: inProgress, success and error. |
-| **ccReplyToMessage** | Triggers whenever a loggedIn user replies to any message from the list of messages .it will have three states such as: inProgress, success and error. |
-| **ccMessageDeleted** | Triggers whenever a loggedIn user deletes any message from the list of messages. |
-| **ccActiveChatChanged** | This event is triggered when the user navigates to a particular chat window. |
-| **ccMessageRead** | Triggers whenever a loggedIn user reads any message. |
+---
-Adding `CometChatMessageEvents` Listener's
+### disableSoundForMessages
-
-
-```ts
-import { CometChatMessageEvents, CometChatUIEvents } from "@cometchat/chat-uikit-react";
+Disables the notification sound for incoming messages.
-const ccOpenChat = CometChatUIEvents.ccOpenChat.subscribe(() => {
- // Your Code
-});
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `true` |
-const ccMessageEdited = CometChatMessageEvents.ccMessageEdited.subscribe(() => {
- // Your Code
-});
+---
-const ccReplyToMessage = CometChatMessageEvents.ccReplyToMessage.subscribe(() => {
- // Your Code
-});
+### emptyView
-const ccMessageDeleted = CometChatMessageEvents.ccMessageDeleted.subscribe(() => {
- // Your Code
-});
+Custom component displayed when there are no messages.
-const ccActiveChatChanged = CometChatUIEvents.ccActiveChatChanged.subscribe(() => {
- // Your Code
-});
+| | |
+| --- | --- |
+| Type | `JSX.Element` |
+| Default | Built-in empty state |
-const ccMessageRead = CometChatMessageEvents.ccMessageRead.subscribe(() => {
- // Your Code
-});
-```
+---
-
+### errorView
-
-```js
-import { CometChatMessageEvents, CometChatUIEvents } from "@cometchat/chat-uikit-react";
+Custom component displayed when an error occurs.
-const ccOpenChat = CometChatUIEvents.ccOpenChat.subscribe(() => {
- // Your Code
-});
+| | |
+| --- | --- |
+| Type | `JSX.Element` |
+| Default | Built-in error state |
-const ccMessageEdited = CometChatMessageEvents.ccMessageEdited.subscribe(() => {
- // Your Code
-});
+---
-const ccReplyToMessage = CometChatMessageEvents.ccReplyToMessage.subscribe(() => {
- // Your Code
-});
+### footerView
-const ccMessageDeleted = CometChatMessageEvents.ccMessageDeleted.subscribe(() => {
- // Your Code
-});
+Custom component displayed below the message list.
-const ccActiveChatChanged = CometChatUIEvents.ccActiveChatChanged.subscribe(() => {
- // Your Code
-});
+| | |
+| --- | --- |
+| Type | `JSX.Element` |
+| Default | `undefined` |
-const ccMessageRead = CometChatMessageEvents.ccMessageRead.subscribe(() => {
- // Your Code
-});
-```
+---
-
+### goToMessageId
-
+Scrolls to the specified message on initial load.
-***
+| | |
+| --- | --- |
+| Type | `string` |
+| Default | `undefined` |
-Removing `CometChatMessageEvents` Listener's
+---
-
-
-```ts
-ccMessageEdited?.unsubscribe();
-ccReplyToMessage?.unsubscribe();
-ccActiveChatChanged?.unsubscribe();
-```
+### group
-
+The group for group conversation messages.
-
-```js
-ccMessageEdited?.unsubscribe();
-ccReplyToMessage?.unsubscribe();
-ccActiveChatChanged?.unsubscribe();
-```
+| | |
+| --- | --- |
+| Type | `CometChat.Group` |
+| Default | `undefined` |
-
+---
-
+### headerView
-***
+Custom component displayed above the message list.
-## Customization
+| | |
+| --- | --- |
+| Type | `JSX.Element` |
+| Default | `undefined` |
-To fit your app's design requirements, you can customize the appearance of the Message List component. We provide exposed properties that allow you to modify the experience and behavior according to your specific needs.
+---
-### Style
+### hideAvatar
-You can set the css to the MessageList Component Component to customize the styling.
+Hides avatars on messages.
-**Example**
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-
- 
-
+---
-
-
-```ts
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageList } from "@cometchat/chat-uikit-react";
+### hideCopyMessageOption
-
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-
-```css
-.cometchat-message-bubble__body
- .cometchat-text-bubble.cometchat-text-bubble-incoming
- .cometchat-text-bubble__body-text {
- font-family: "SF Pro";
-}
-```
+---
-
+### hideDateSeparator
-
+Hides date separators between message groups.
-### Functionality
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements.
+---
-
-
-```ts
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageList } from "@cometchat/chat-uikit-react";
+### hideDeleteMessageOption
-export function MessageListDemo() {
- const [chatUser, setChatUser] = React.useState();
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
+Hides the delete message option.
- return chatUser ? (
-
+---
-
-```js
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageList } from "@cometchat/chat-uikit-react";
+### hideEditMessageOption
-export function MessageListDemo() {
- const [chatUser, setChatUser] = React.useState(null);
+Hides the edit message option.
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
- return chatUser ? (
-
+### hideError
-
+Hides the default and custom error views.
-***
-
-Below is a list of customizations along with corresponding code snippets
-
-| Property | Description | Code |
-| ------------------------------------ | ------------------------------------------------------------------------------------------- | ---------------------------------------------- |
-| **Hide Date Separator** | Hides the visibility of the date separator in the message list. | `hideDateSeparator={true}` |
-| **Hide Sticky Date** | Hides the sticky date header in the message list. | `hideStickyDate={true}` |
-| **Hide Receipts** | Hides the visibility of receipts in the message list. | `hideReceipts={true}` |
-| **Hide Error** | Hides the default & custom error view passed in the `errorView` prop. | `hideError={true}` |
-| **Hide Reply In Thread Option** | Hides the option to reply to messages in a thread. | `hideReplyInThreadOption={true}` |
-| **Hide Translate Message Option** | Hides the option to translate messages. | `hideTranslateMessageOption={true}` |
-| **Hide Edit Message Option** | Hides the option to edit messages. | `hideEditMessageOption={true}` |
-| **Hide Delete Message Option** | Hides the option to delete messages. | `hideDeleteMessageOption={true}` |
-| **Hide Reaction Option** | Hides the option to react to messages. | `hideReactionOption={true}` |
-| **Hide Message Privately Option** | Hides the option to message a user privately. | `hideMessagePrivatelyOption={true}` |
-| **Hide Copy Message Option** | Hides the option to copy messages. | `hideCopyMessageOption={true}` |
-| **Hide Message Info Option** | Hides the option to view message information. | `hideMessageInfoOption={true}` |
-| **Hide Reply Option** | Hides the reply option for a message. | `hideReplyOption={true}` |
-| **Hide Avatar** | Hides avatars for messages. | `hideAvatar={true}` |
-| **Hide Group Action Messages** | Hides group action messages. | `hideGroupActionMessages={true}` |
-| **Hide Conversation Starters** | Hides the visibility of the conversation starters in the message list. | `hideConversationStarters={true}` |
-| **Hide Smart Replies** | Hides the visibility of the smart replies in the message list. | `hideSmartReplies={true}` |
-| **Hide Moderation View** | Hides the moderation view shown below the message bubble in the bottom view when a message is moderated. | `hideModerationView={true}` |
-| **Hide Flag Message Option** | Hides the "Report Message" option from message actions menu. | `hideFlagMessageOption={true}` |
-| **Hide Flag Remark Field** | Hides the remark text area in the flag message dialog. | `hideFlagRemarkField={true}` |
-| **Parent Message ID** | Unique identifier of the parent message for displaying threaded conversations. | `parentMessageId={1234}` |
-| **User** | A `CometChat.User` object representing the participant of the chat. | `user={chatUser}` |
-| **Group** | A `CometChat.Group` object representing the group whose chat messages are displayed. | `group={chatGroup}` |
-| **Message Alignment** | Specifies the alignment of messages in the list (e.g., left, right). | `messageAlignment={MessageListAlignment.left}` |
-| **Scroll To Bottom On New Messages** | Automatically scrolls the message list to the bottom when a new message arrives. | `scrollToBottomOnNewMessages={true}` |
-| **Quick Options Count** | Specifies how many message options are visible in the main menu by default. | `quickOptionsCount={3}` |
-| **Disable Sound For Messages** | Disables the sound effect when new messages arrive. | `disableSoundForMessages={true}` |
-| **Custom Sound For Messages** | Specifies a custom sound file to play when new messages arrive. | `customSoundForMessages="sound.mp3"` |
-| **Smart Replies Keywords** | Sets the keywords on which the smart replies should be triggered in the message list. | `smartRepliesKeywords={['why', 'how']}` |
-| **Smart Replies Delay Duration** | Sets the delay duration (in milliseconds) before smart replies are shown. | `smartRepliesDelayDuration={5000}` |
-| **Start From Unread Messages** | When set to true, the chat will load from the first unread message if unread messages exist, otherwise loads from the latest messages. Default is false. | `startFromUnreadMessages={true}` |
-| **Show Mark Unread Option** | When set to true, shows the "Mark Unread" option in the message actions menu. This option will only appear for received messages, not for the user's own messages. Default is false. | `showMarkAsUnreadOption={true}` |
-| **Empty View** | Custom empty state view to display when there are no messages. | `emptyView={
-
-```ts
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import {
- CometChatMessageList,
- ChatConfigurator,
- CometChatActionsIcon,
-} from "@cometchat/chat-uikit-react";
+---
-export function MessageListDemo() {
- const [chatUser, setChatUser] = React.useState();
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
+### hideFlagMessageOption
- const getCustomOptions = (
- loggedInUser: CometChat.User,
- message: CometChat.BaseMessage,
- group?: CometChat.Group
- ) => {
- const defaultOptions: any =
- ChatConfigurator.getDataSource().getMessageOptions(
- loggedInUser,
- message,
- group
- );
- const myView: any = new CometChatActionsIcon({
- id: "custom id",
- title: "your custom title for options",
- iconURL: "your custom icon url for options",
- onClick: () => console.log("custom action"),
- });
- defaultOptions.push(myView);
- return defaultOptions;
- };
+Hides the "Report Message" option.
- const getTemplates = () => {
- let templates = ChatConfigurator.getDataSource().getAllMessageTemplates();
- templates.map((data) => {
- data.options = (
- loggedInUser: CometChat.User,
- message: CometChat.BaseMessage,
- group?: CometChat.Group
- ) => getCustomOptions(loggedInUser, message, group);
- });
- return templates;
- };
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
- return chatUser ? (
-
+### hideFlagRemarkField
-
-```js
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import {
- CometChatMessageList,
- ChatConfigurator,
- CometChatActionsIcon,
-} from "@cometchat/chat-uikit-react";
+Hides the remark text area in the flag message dialog.
+
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
+
+---
+
+### hideGroupActionMessages
+
+Hides group action messages (join, leave, kick, etc.).
+
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
+
+---
+
+### hideMessageInfoOption
+
+Hides the message info option.
+
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
+
+---
+
+### hideMessagePrivatelyOption
+
+Hides the "Message Privately" option.
-export function MessageListDemo() {
- const [chatUser, setChatUser] = React.useState(null);
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
+---
- const getCustomOptions = (loggedInUser, message, theme, group) => {
- const defaultOptions = ChatConfigurator.getDataSource().getMessageOptions(
- loggedInUser,
- message,
- group
- );
- const myView = new CometChatActionsIcon({
- id: "custom id",
- title: "your custom title for options",
- iconURL: "your custom icon url for options",
- onClick: () => console.log("custom action"),
- });
- defaultOptions.push(myView);
- return defaultOptions;
- };
+### hideModerationView
- const getTemplates = () => {
- let templates = ChatConfigurator.getDataSource().getAllMessageTemplates();
- templates.map((data) => {
- data.options = (loggedInUser, message, group) =>
- getCustomOptions(loggedInUser, message, group);
- });
- return templates;
- };
+Hides the moderation view below moderated messages.
- return chatUser ? (
-
+---
-
+### hideReactionOption
-***
+Hides the reaction option.
-#### Separator DateTime Format
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-The `separatorDateTimeFormat` property allows you to customize the **Date Separator** timestamp displayed in the Message List.
+---
-Default Date Time Format:
+### hideReceipts
-```javascript
-new CalendarObject({
- today: "today" // Example: "today"
- yesterday: "yesterday", // Example: "yesterday"
- otherDays: `DD MMM, YYYY`, // Example: "25 Jan, 2025"
-});
-```
+Hides read/delivery receipt indicators.
-The following example demonstrates how to modify the **Date Separator** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject).
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-
-
-```ts
-import {
- CometChatMessageList,
- CalendarObject,
-} from "@cometchat/chat-uikit-react";
+---
-// Define a custom date format pattern
-function getDateFormat() {
- const dateFormat = new CalendarObject({
- today: `hh:mm A`, // Example: "10:30 AM"
- yesterday: `[yesterday]`, // Example: "yesterday"
- otherDays: `DD/MM/YYYY`, // Example: "25/05/2025"
- });
- return dateFormat;
-}
+### hideReplyInThreadOption
-// Apply the custom format to the CometChatMessageList component
-
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-
+---
-
+### hideReplyOption
-**Fallback Mechanism**
+Hides the reply option.
-* If you **do not** pass any property in the [**CalendarObject**](/ui-kit/react/localize#calendarobject), the component will first check the [**global configuration**](/ui-kit/react/localize#customisation). If the property is **also missing in the global configuration**, it will **fallback to the component's default formatting**.
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-
+---
-***
+### hideStickyDate
-#### Sticky DateTime Format
+Hides the sticky date header.
-The `stickyDateTimeFormat` property allows you to customize the **Sticky Date** timestamp displayed in the Message List.
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-!\[]\(Screenshot HERE)
+---
-Default Date Time Format:
+### hideTranslateMessageOption
-```javascript
-new CalendarObject({
- today: "today" // Example: "today"
- yesterday: "yesterday", // Example: "yesterday"
- otherDays: `DD MMM, YYYY`, // Example: "25 Jan, 2025"
-});
-```
+Hides the translate message option.
-The following example demonstrates how to modify the **Sticky Date** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject).
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-
-
-```ts
-import {
- CometChatMessageList,
- CalendarObject,
-} from "@cometchat/chat-uikit-react";
+---
-// Define a custom date format pattern
-function getDateFormat() {
- const dateFormat = new CalendarObject({
- today: `hh:mm A`, // Example: "10:30 AM"
- yesterday: `[yesterday]`, // Example: "yesterday"
- otherDays: `DD/MM/YYYY`, // Example: "25/05/2025"
- });
- return dateFormat;
-}
+### isAgentChat
-// Apply the custom format to the CometChatMessageList component
-
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-
+---
-
+### loadingView
-**Fallback Mechanism**
+Custom component displayed during the loading state.
-* If you **do not** pass any property in the [**CalendarObject**](/ui-kit/react/localize#calendarobject), the component will first check the [**global configuration**](/ui-kit/react/localize#customisation). If the property is **also missing in the global configuration**, it will **fallback to the component's default formatting**.
+| | |
+| --- | --- |
+| Type | `JSX.Element` |
+| Default | Built-in shimmer |
-
+---
-***
+### loadLastAgentConversation
-#### Message SentAt DateTime Format
+Loads the most recent existing agent conversation on mount.
-The `messageSentAtDateTimeFormat` property allows you to customize the **Message SentAt** timestamp displayed in the Message List.
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-Default Date Time Format:
+---
-```javascript
-new CalendarObject({
- today: "hh:mm A" // Example: "12:00 PM"
- yesterday: "hh:mm A", // Example: "01:00 AM"
- otherDays: `hh:mm A`, // Example: "09:30 PM"
-});
-```
+### messageAlignment
-The following example demonstrates how to modify the **Message SentAt** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject).
+Controls message alignment.
-
-
-```ts
-import {
- CometChatMessageList,
- CalendarObject,
-} from "@cometchat/chat-uikit-react";
+| | |
+| --- | --- |
+| Type | `MessageListAlignment` |
+| Default | `MessageListAlignment.standard` |
-// Define a custom date format pattern
-function getDateFormat() {
- const dateFormat = new CalendarObject({
- today: `hh:mm A`, // Example: "10:30 AM"
- yesterday: `[yesterday]`, // Example: "yesterday"
- otherDays: `DD/MM/YYYY`, // Example: "25/05/2025"
- });
- return dateFormat;
+```ts lines
+enum MessageListAlignment {
+ left, // 0
+ standard, // 1
}
-
-// Apply the custom format to the CometChatMessageList component
-
+---
-
+### messageInfoDateTimeFormat
-
+Format for message info timestamps.
-**Fallback Mechanism**
+| | |
+| --- | --- |
+| Type | `CalendarObject` |
+| Default | Component default |
-* If you **do not** pass any property in the [**CalendarObject**](/ui-kit/react/localize#calendarobject), the component will first check the [**global configuration**](/ui-kit/react/localize#customisation). If the property is **also missing in the global configuration**, it will **fallback to the component's default formatting**.
+---
-
+### messageSentAtDateTimeFormat
-***
+Format for message sent-at timestamps.
-#### Message Info DateTime Format
+| | |
+| --- | --- |
+| Type | `CalendarObject` |
+| Default | Component default |
-The `messageInfoDateTimeFormat` property allows you to customize the **Message Info** timestamp displayed in the Message List.
+---
-Default Date Time Format:
+### messagesRequestBuilder
-```ruby
-new CalendarObject({
- today: `DD MMM, hh:mm A`, // Example: "29 Jan, 04:34 AM"
- yesterday: `DD MMM, hh:mm A`, // Example: "29 Jan, 04:34 AM"
- otherDays: `DD MMM, hh:mm A`, // Example: "29 Jan, 04:34 AM"
-});
-```
+Controls which messages load and in what order.
-The following example demonstrates how to modify the **Message Info** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject).
+| | |
+| --- | --- |
+| Type | `CometChat.MessagesRequestBuilder` |
+| Default | SDK default |
-
-
-```ts
-import {
- CometChatMessageList,
- CalendarObject,
-} from "@cometchat/chat-uikit-react";
+UID/GUID are always overridden internally.
-// Define a custom date format pattern
-function getDateFormat() {
- const dateFormat = new CalendarObject({
- today: `hh:mm A`, // Example: "10:30 AM"
- yesterday: `[yesterday]`, // Example: "yesterday"
- otherDays: `DD/MM/YYYY`, // Example: "25/05/2025"
- });
- return dateFormat;
-}
+---
-// Apply the custom format to the CometChatMessageList component
-
+Callback fired when the component encounters an error.
-
+| | |
+| --- | --- |
+| Type | `((error: CometChat.CometChatException) => void) \| null` |
+| Default | `undefined` |
-
+---
-**Fallback Mechanism**
+### onReactionClick
-* If you **do not** pass any property in the [**CalendarObject**](/ui-kit/react/localize#calendarobject), the component will first check the [**global configuration**](/ui-kit/react/localize#customisation). If the property is **also missing in the global configuration**, it will **fallback to the component's default formatting**.
+Callback fired when a reaction on a message is clicked.
-
+| | |
+| --- | --- |
+| Type | `(reaction: CometChat.ReactionCount, message: CometChat.BaseMessage) => void` |
+| Default | `undefined` |
-***
+---
-#### Headerview
+### onReactionListItemClick
-You can set custom headerView to the Message List component using the following method.
+Callback fired when a reaction list item is clicked.
-The customized chat interface is displayed below.
+| | |
+| --- | --- |
+| Type | `(reaction: CometChat.Reaction, message: CometChat.BaseMessage) => void` |
+| Default | `undefined` |
-
- 
-
+---
-Use the following code to achieve the customization shown above.
+### onThreadRepliesClick
-
-
-```ts
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageList } from "@cometchat/chat-uikit-react";
-import notesIcon from "../../assets/notesIcon.svg";
-import pinnedIcon from "../../assets/pinnedIcon.svg";
-import savedIcon from "../../assets/savedIcon.svg";
+Callback fired when a threaded message reply count is clicked.
-export function MessageListDemo() {
- const [chatUser, setChatUser] = React.useState();
+| | |
+| --- | --- |
+| Type | `(message: CometChat.BaseMessage) => void` |
+| Default | `undefined` |
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
+---
- const getHeaderView = () => {
- return (
-
+| | |
+| --- | --- |
+| Type | `number` |
+| Default | `undefined` |
-
-```js
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageList } from "@cometchat/chat-uikit-react";
-import notesIcon from "../../assets/notesIcon.svg";
-import pinnedIcon from "../../assets/pinnedIcon.svg";
-import savedIcon from "../../assets/savedIcon.svg";
+---
-export function MessageListDemo() {
- const [chatUser, setChatUser] = React.useState(null);
+### quickOptionsCount
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
+Number of message options visible in the main menu before overflow.
- const getHeaderView = () => {
- return (
-
+### reactionsRequestBuilder
-
-```css
-.header-view {
- display: flex;
- width: 100%;
- padding: 3px 16px;
- align-items: flex-start;
- gap: 5px;
- background: #edeafa;
-}
+Controls how reactions are fetched for messages.
-.header-view .cometchat .cometchat-button {
- width: auto;
- height: 32px;
- border-radius: 1000px;
- border: 1px solid #e8e8e8;
- background: #fafafa;
- color: #6852d6;
- text-align: center;
-}
+| | |
+| --- | --- |
+| Type | `CometChat.ReactionsRequestBuilder` |
+| Default | `undefined` |
-.header-view .cometchat .cometchat-button__text {
- color: #6852d6;
- text-align: center;
- font: 400 12px/14.4px Roboto;
- font-style: normal;
-}
+---
-.header-view .cometchat .cometchat-button__icon {
- background-color: #6852d6;
- display: flex;
- justify-content: center;
- align-items: center;
-}
-```
+### scrollToBottomOnNewMessages
-
+Auto-scrolls to bottom when new messages arrive.
-
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-***
+---
-#### FooterView
+### separatorDateTimeFormat
-You can set custom footerview to the Message List component using the following method.
+Format for date separator timestamps.
-The customized chat interface is displayed below.
+| | |
+| --- | --- |
+| Type | `CalendarObject` |
+| Default | Component default |
-
-
-
+---
-Use the following code to achieve the customization shown above.
+### showConversationStarters
-
-
-```ts
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageList } from "@cometchat/chat-uikit-react";
-import iceBreakersIcon from "../../assets/iceBreakersIcon.svg";
-import callIcon from "../../assets/callIcon.svg";
-import instagramIcon from "../../assets/instagramIcon.svg";
-import snapchatIcon from "../../assets/snapchatIcon.svg";
+Shows AI conversation starters.
-export function MessageListDemo() {
- const [chatUser, setChatUser] = React.useState();
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
+---
- const getFooterView = () => {
- return (
-
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-
-```js
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageList } from "@cometchat/chat-uikit-react";
-import iceBreakersIcon from "../../assets/iceBreakersIcon.svg";
-import callIcon from "../../assets/callIcon.svg";
-import instagramIcon from "../../assets/instagramIcon.svg";
-import snapchatIcon from "../../assets/snapchatIcon.svg";
+---
-export function MessageListDemo() {
- const [chatUser, setChatUser] = React.useState(null);
+### showScrollbar
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
+Shows the scrollbar in the message list.
- const getFooterView = () => {
- return (
-
+### showSmartReplies
-
-```css
-.footer-view {
- display: flex;
- width: 100%;
- padding: 3px 16px;
- align-items: flex-start;
- gap: 5px;
- background: #edeafa;
-}
+Shows AI smart replies.
-.footer-view .cometchat .cometchat-button {
- width: auto;
- height: 32px;
- border-radius: 1000px;
- border: 1px solid #e8e8e8;
- background: #fafafa;
- color: #6852d6;
- text-align: center;
-}
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-.footer-view .cometchat .cometchat-button__text {
- color: #6852d6;
- text-align: center;
- font: 400 12px/14.4px Roboto;
- font-style: normal;
-}
+---
-.footer-view .cometchat .cometchat-button__icon {
- background-color: #6852d6;
- display: flex;
- justify-content: center;
- align-items: center;
-}
-```
+### smartRepliesDelayDuration
-
+Delay in milliseconds before smart replies appear.
-
+| | |
+| --- | --- |
+| Type | `number` |
+| Default | `10000` |
-***
+---
-#### TextFormatters
+### smartRepliesKeywords
-Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source. To configure the existing Mentions look and feel check out [CometChatMentionsFormatter](/ui-kit/react/mentions-formatter-guide)
+Keywords that trigger smart replies.
-
-
-```ts
-import { CometChatTextFormatter } from "@cometchat/chat-uikit-react";
-import DialogHelper from "./Dialog";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
+| | |
+| --- | --- |
+| Type | `string[]` |
+| Default | `["what", "when", "why", "who", "where", "how", "?"]` |
-class ShortcutFormatter extends CometChatTextFormatter {
- private shortcuts: { [key: string]: string } = {};
- private dialogIsOpen: boolean = false;
- private dialogHelper = new DialogHelper();
- private currentShortcut: string | null = null; // Track the currently open shortcut
-
- constructor() {
- super();
- this.setTrackingCharacter("!");
- CometChat.callExtension("message-shortcuts", "GET", "v1/fetch", undefined)
- .then((data: any) => {
- if (data && data.shortcuts) {
- this.shortcuts = data.shortcuts;
- }
- })
- .catch((error) => console.log("error fetching shortcuts", error));
- }
+---
- onKeyDown(event: KeyboardEvent) {
- const caretPosition =
- this.currentCaretPosition instanceof Selection
- ? this.currentCaretPosition.anchorOffset
- : 0;
- const textBeforeCaret = this.getTextBeforeCaret(caretPosition);
-
- const match = textBeforeCaret.match(/!([a-zA-Z]+)$/);
- if (match) {
- const shortcut = match[0];
- const replacement = this.shortcuts[shortcut];
- if (replacement) {
- // Close the currently open dialog, if any
- if (this.dialogIsOpen && this.currentShortcut !== shortcut) {
- this.closeDialog();
- }
- this.openDialog(replacement, shortcut);
- }
- }
- }
+### startFromUnreadMessages
- getCaretPosition() {
- if (!this.currentCaretPosition?.rangeCount) return { x: 0, y: 0 };
- const range = this.currentCaretPosition?.getRangeAt(0);
- const rect = range.getBoundingClientRect();
- return {
- x: rect.left,
- y: rect.top,
- };
- }
+Loads from the first unread message if available.
- openDialog(buttonText: string, shortcut: string) {
- this.dialogHelper.createDialog(
- () => this.handleButtonClick(buttonText),
- buttonText
- );
- this.dialogIsOpen = true;
- this.currentShortcut = shortcut;
- }
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
- closeDialog() {
- this.dialogHelper.closeDialog(); // Use DialogHelper to close the dialog
- this.dialogIsOpen = false;
- this.currentShortcut = null;
- }
+---
- handleButtonClick = (buttonText: string) => {
- if (this.currentCaretPosition && this.currentRange) {
- // Inserting the replacement text corresponding to the shortcut
- const shortcut = Object.keys(this.shortcuts).find(
- (key) => this.shortcuts[key] === buttonText
- );
- if (shortcut) {
- const replacement = this.shortcuts[shortcut];
- this.addAtCaretPosition(
- replacement,
- this.currentCaretPosition,
- this.currentRange
- );
- }
- }
- if (this.dialogIsOpen) {
- this.closeDialog();
- }
- };
+### stickyDateTimeFormat
- getFormattedText(text: string): string {
- return text;
- }
+Format for sticky date header timestamps.
- private getTextBeforeCaret(caretPosition: number): string {
- if (
- this.currentRange &&
- this.currentRange.startContainer &&
- typeof this.currentRange.startContainer.textContent === "string"
- ) {
- const textContent = this.currentRange.startContainer.textContent;
- if (textContent.length >= caretPosition) {
- return textContent.substring(0, caretPosition);
- }
- }
- return "";
- }
-}
+| | |
+| --- | --- |
+| Type | `CalendarObject` |
+| Default | Component default |
-export default ShortcutFormatter;
-```
+---
-
+### templates
-
-```tsx
-import React from "react";
-import ReactDOM from "react-dom";
+Custom message bubble templates.
-interface DialogProps {
- onClick: () => void;
- buttonText: string;
-}
+| | |
+| --- | --- |
+| Type | `CometChatMessageTemplate[]` |
+| Default | SDK defaults |
-const Dialog: React.FC = ({ onClick, buttonText }) => {
- console.log("buttonText", buttonText);
+See [CometChatMessageTemplate](/ui-kit/react/message-template).
- return (
-
+---
-
-```tsx
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageList } from "@cometchat/chat-uikit-react";
-import ShortcutFormatter from "./ShortCutFormatter";
+### user
-export function MessageListDemo() {
- const [chatUser, setChatUser] = React.useState();
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
+The user for 1-on-1 conversation messages.
- return chatUser ? (
-
+---
-
+## Events
+
+| Event | Payload | Fires when |
+| --- | --- | --- |
+| `CometChatMessageEvents.ccMessageEdited` | `IMessages` | Message edited |
+| `CometChatMessageEvents.ccMessageDeleted` | `CometChat.BaseMessage` | Message deleted |
+| `CometChatMessageEvents.ccMessageRead` | `CometChat.BaseMessage` | Message read |
+| `CometChatMessageEvents.ccReplyToMessage` | `IMessages` | User replies to message |
+| `CometChatUIEvents.ccOpenChat` | `IOpenChat` | Chat opened |
+| `CometChatUIEvents.ccActiveChatChanged` | `IActiveChatChanged` | Active chat changes |
+
+---
-***
+## CSS Selectors
+
+| Target | Selector |
+| --- | --- |
+| Root | `.cometchat-message-list` |
+| Error state | `.cometchat-message-list__error-state-view` |
+| Footer smart replies | `.cometchat-message-list__footer-smart-replies` |
+| Footer conversation starters | `.cometchat-message-list__footer-conversation-starter` |
+| Outgoing bubble | `.cometchat-message-bubble-outgoing` |
+| Incoming bubble | `.cometchat-message-bubble-incoming` |
+| Status info view | `.cometchat-message-bubble__status-info-view` |
+| Thread view replies | `.cometchat-message-bubble__thread-view-replies` |
+| Text bubble | `.cometchat-message-bubble .cometchat-text-bubble` |
+| Delete bubble | `.cometchat-message-bubble .cometchat-delete-bubble` |
diff --git a/ui-kit/react/message-template.mdx b/ui-kit/react/message-template.mdx
index 7659b7286..cbd24f100 100644
--- a/ui-kit/react/message-template.mdx
+++ b/ui-kit/react/message-template.mdx
@@ -1,282 +1,166 @@
---
title: "Message Template"
+description: "Data structure defining how message bubbles render in CometChatMessageList — controls header, content, footer, bottom, status info, reply, and bubble views per message type and category."
---
+
+```json
+{
+ "component": "CometChatMessageTemplate",
+ "kind": "model-class",
+ "package": "@cometchat/chat-uikit-react",
+ "import": "import { CometChatMessageTemplate } from \"@cometchat/chat-uikit-react\";",
+ "description": "Data structure defining how message bubbles render in CometChatMessageList. Each template maps a type+category pair to view functions.",
+ "usage": "Pass an array of CometChatMessageTemplate instances to CometChatMessageList via the templates prop.",
+ "properties": {
+ "type": { "type": "string", "required": true, "description": "CometChat message type" },
+ "category": { "type": "string", "default": "\"\"", "description": "CometChat message category" },
+ "headerView": { "type": "function | null", "default": "null", "description": "Custom header view function" },
+ "contentView": { "type": "function | null", "default": "null", "description": "Custom content view function" },
+ "footerView": { "type": "function | null", "default": "null", "description": "Custom footer view function" },
+ "bottomView": { "type": "function | null", "default": "null", "description": "Custom bottom view function" },
+ "bubbleView": { "type": "function | null", "default": "null", "description": "Replaces entire bubble" },
+ "statusInfoView": { "type": "function | null", "default": "null", "description": "Custom status info view function" },
+ "replyView": { "type": "function | null", "default": "null", "description": "Custom reply preview function" },
+ "options": { "type": "function", "description": "Returns action sheet items for long-press" }
+ },
+ "relatedComponents": ["CometChatMessageList"],
+ "cssRootClass": null,
+ "events": null
+}
+```
+
-## Overview
-
-MessageTemplate provides you with the capability to define and customize both the structure and the behavior of the Message Bubble. It acts as a schema or design blueprint for the creation of a variety of Message Bubble components, allowing you to manage the appearance and interactions of Message Bubble within your application effectively and consistently.
-
-### Structure
-
-
- 
-
-
-The Message Bubble structure can typically be broken down into the following views:
-
-1. **Leading view**: This is where the sender's avatar is displayed. It's typically on the left of the Message Bubble for messages from others and on the right for messages from the current user.
-
-2. **Header view**: This displays the sender's name and is especially useful in group chats where multiple users are sending messages.
-
-3. **Reply view**: This view can be used to extend the Message Bubble with additional elements. It's typically placed above the Content view.
-
-4. **Content view**: This is the core of the Message Bubble where the message content (text, images, videos, etc.) is displayed.
-
-5. **Bottom view**: This view can be used to extend the Message Bubble with additional elements, such as link previews or a 'load more' button for long messages. It's typically placed beneath the Content view.
-
-6. **Thread view**: This is where the thread reply icon and reply counts are displayed. It's located below the footer view.
-
-7. **Footer view**: This is where the reactions are displayed. It's located at the bottom of the Message Bubble.
-
-8. **Status Info view**: This is where the timestamp of the message and its delivery or read status are displayed. It's located inside the Message Bubble just below the content view.
-
-***
-
-### Properties
-
-MessageTemplate provides you with methods that allow you to alter various properties of the Message Bubble. These properties include aspects such as the `type` and `category` of a message, the appearance and behavior of the header, content, and footer sections of the message bubble,
-
-1. **type**
-
- Using `type` you can set the type of CometChatMessage, This will map your MessageTemplate to the corresponding CometChatMessage. You can set the MessageTemplates Type using the following code snippet.
-
-2. **category**
-
- Using `category` you can set the category of a MessageTemplate. This will create a MessageTemplate with the specified category and link it with a CometChatMessage of the same category.
-
- Please refer to our guide on [Message Categories](/sdk/javascript/message-structure-and-hierarchy) for a deeper understanding of message categories.
-
-3. **headerView**
-
- The `headerView` method allows you to assign a custom header view to the Message Bubble. By default, it is configured to display the sender's name.
-
-4. **contentView**
-
- The `contentView` method allows you to assign a custom content view to the Message Bubble. By default, it displays the Text Bubble, Image Bubble, File Bubble, Audio Bubble, or Video Bubble depending on the message type.
-
-5. **footerView**
-
- The `footerView` method allows you to assign a custom Footer view to the Message Bubble. By default it shows thr reactions for the message bubble.
-
-6. **bottomView**
-
- The `bottomView` method allows you to assign a custom Bottom view to the Message Bubble. By defuault is has buttons such as link previews or a 'load more' button for long messages.
-
-7. **bubbleView**
+## What It Is
- The `bubbleView` method allows you to assign a custom Bubble view to the Message Bubble. By default, headerView, contentView, statusInfoView and footerView together form a message bubble.
+`CometChatMessageTemplate` is a model class, not a rendered component. Each instance maps a message `type` + `category` pair to a set of view functions that control how that message renders inside `CometChatMessageList`. Pass an array of templates to the `templates` prop on `CometChatMessageList`.
-8. **statusInfoView**
+```tsx lines
+import { useState, useEffect } from "react";
+import {
+ CometChatMessageList,
+ CometChatMessageTemplate,
+ CometChatUIKit,
+ CometChatUIKitConstants,
+} from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
- The `statusInfoView` method allows you to assign a custom status info view to the Message Bubble. By default, it displays the receipt and timestamp.
+function CustomTemplateDemo() {
+ const [chatGroup, setChatGroup] = useState();
+ const [templates, setTemplates] = useState([]);
-9. **replyView**
+ useEffect(() => {
+ CometChat.getGroup("guid").then((group) => setChatGroup(group));
- The `replyView` method allows you to assign a custom reply view to the Message Bubble. By default, it displays the preview of the replied message.
+ const allTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates();
+ const modified = allTemplates.map((t) => {
+ if (
+ t.type === CometChatUIKitConstants.MessageTypes.text &&
+ t.category === CometChatUIKitConstants.MessageCategory.message
+ ) {
+ t.headerView = (message: CometChat.BaseMessage) => (
+ <>{message.getSender().getName()} • 🗓️ In meeting
+ );
+ }
+ return t;
+ });
+ setTemplates(modified);
+ }, []);
-10. **options**
+ if (!chatGroup) return null;
- The `options` lets you set the list of actions that a user can perform on a message. This includes actions like reacting to, editing, or deleting a message.
+ return
-
-```ts
+```tsx lines
import {
CometChatUIKit,
CometChatUIKitConstants,
+ CometChatMessageTemplate,
} from "@cometchat/chat-uikit-react";
-let allTemplates: CometChatMessageTemplate[] =
+const allTemplates: CometChatMessageTemplate[] =
CometChatUIKit.getDataSource().getAllMessageTemplates();
-for (let i = 0; i < allTemplates.length; i++) {
- if (allTemplates[i].type === CometChatUIKitConstants.MessageTypes.text) {
- //customize allTemplates[i]
- }
-}
-```
-
-
-
-
-```js
-import {
- CometChatUIKit,
- CometChatUIKitConstants,
-} from "@cometchat/chat-uikit-react";
-let allTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates();
for (let i = 0; i < allTemplates.length; i++) {
if (allTemplates[i].type === CometChatUIKitConstants.MessageTypes.text) {
- //customize allTemplates[i]
+ // customize allTemplates[i]
}
}
```
-
-
-
-
-You will be using [Message List](/ui-kit/react/message-list) component using the `templates` prop of `CometChatMessageList` component.
-
-
-
-```ts
-import { CometChatMessageList } from "@cometchat/uikit-react";
-
-
-
-
-```js
-import { CometChatMessageList } from "@cometchat/uikit-react";
-
-
-
-
+---
-#### HeaderView
+## Common Patterns
-The `headerView` method of MessageTemplate allows you to add custom views to the header of your message bubbles. In the example below, we will add a custom header view of every text message in the MessageList.
+### Custom header with status badge
-
-
-```ts
-import React, { useEffect, useState } from "react";
-import {
- CometChatMessageList,
- CometChatUIKit,
- CometChatUIKitConstants,
-} from "@cometchat/chat-uikit-react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-
-const CustomMessageTemplate = () => {
- const [templates, setTemplates] = React.useState(
- []
- );
- const [chatGroup, setChatGroup] = React.useState();
-
- useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
-
- let definedTemplates: CometChatMessageTemplate[] =
- CometChatUIKit.getDataSource().getAllMessageTemplates();
- const template = definedTemplates.map((templates) => {
- if (
- templates.type === CometChatUIKitConstants.MessageTypes.text &&
- templates.category === CometChatUIKitConstants.MessageCategory.message
- ) {
- templates.headerView = (message: CometChat.BaseMessage) =>
- getHeaderView(message);
- return templates;
- }
- return templates;
- });
- setTemplates(template);
- }, []);
-
- const getHeaderView = (message: CometChat.BaseMessage) => {
- return <> {message.getSender().getName()} • 🗓️ In meeting;
- };
-
- return (
-
-
-
-```js
-import React, { useEffect, useState } from "react";
+```tsx lines
+import { useState, useEffect } from "react";
import {
CometChatMessageList,
CometChatUIKit,
CometChatUIKitConstants,
+ CometChatMessageTemplate,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
-const CustomMessageTemplate = () => {
- const [templates, setTemplates] = useState([]);
- const [chatGroup, setChatGroup] = useState(null);
+function HeaderViewDemo() {
+ const [chatGroup, setChatGroup] = useState();
+ const [templates, setTemplates] = useState([]);
useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
+ CometChat.getGroup("guid").then((group) => setChatGroup(group));
- let definedTemplates =
- CometChatUIKit.getDataSource().getAllMessageTemplates();
- const template = definedTemplates.map((templates) => {
+ const definedTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates();
+ const modified = definedTemplates.map((t) => {
if (
- templates.type === CometChatUIKitConstants.MessageTypes.text &&
- templates.category === CometChatUIKitConstants.MessageCategory.message
+ t.type === CometChatUIKitConstants.MessageTypes.text &&
+ t.category === CometChatUIKitConstants.MessageCategory.message
) {
- templates.headerView = (message: CometChat.BaseMessage) =>
- getHeaderView(message);
- return templates;
+ t.headerView = (message: CometChat.BaseMessage) => (
+ <>{message.getSender().getName()} • 🗓️ In meeting
+ );
}
- return templates;
+ return t;
});
- setTemplates(template);
+ setTemplates(modified);
}, []);
- const getHeaderView = (message: CometChat.BaseMessage) => {
- return <> {message.getSender().getName()} • 🗓️ In meeting;
- };
-
- return (
-
-
-
-
-#### Contentview
-
-The `contentview` method of MessageTemplate allows you to add a custom view to the content of your message bubbles. In the example below, we will add a custom layout to the content view of every text message in the MessageList.
+### Custom content view for a custom message type
@@ -284,8 +168,8 @@ The `contentview` method of MessageTemplate allows you to add a custom view to t
-```ts
-import React from "react";
+```tsx lines
+import { useState, useEffect } from "react";
import {
CometChatMessageList,
CometChatUIKit,
@@ -293,164 +177,43 @@ import {
CometChatMessageTemplate,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
-import bannerImage from "../../assets/banner.svg";
-const CustomMessageTemplate = () => {
- const [templates, setTemplates] = React.useState(
- []
- );
- const [chatGroup, setChatGroup] = React.useState();
+function ContentViewDemo() {
+ const [chatGroup, setChatGroup] = useState();
+ const [templates, setTemplates] = useState([]);
- React.useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
+ useEffect(() => {
+ CometChat.getGroup("guid").then((group) => setChatGroup(group));
- let definedTemplates: CometChatMessageTemplate[] =
- CometChatUIKit.getDataSource().getAllMessageTemplates();
+ const definedTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates();
const CUSTOM_MESSAGE_TYPE = "customType";
- let customMessageTemplate = new CometChatMessageTemplate({
+ const customTemplate = new CometChatMessageTemplate({
type: CUSTOM_MESSAGE_TYPE,
category: CometChatUIKitConstants.MessageCategory.custom,
- contentView: (message: CometChat.BaseMessage) => getContentView(message),
- });
- definedTemplates.push(customMessageTemplate);
- setTemplates(definedTemplates);
- }, []);
-
- const getContentView = (message: CometChat.BaseMessage) => {
- return (
-
@@ -127,13 +126,16 @@ const GroupMembersView = ({ group }: { group: CometChat.Group }) => {
};
```
+
---
-### 4. Add Members to Group Implementation
+### 4. Add Members
+
+Let admins select users and add them to the group. Collect selected UIDs, call `CometChat.addMembersToGroup()`, and emit `ccGroupMemberAdded` so the member list refreshes.
_File: [CometChatAddMembers.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatAddMembers/CometChatAddMembers.tsx)_
-```tsx
+```tsx lines
export const CometChatAddMembers = ({ group, onBack }: IAddMembersProps) => {
const [selectedUsers, setSelectedUsers] = useState([]);
const [isLoading, setIsLoading] = useState(false);
@@ -161,11 +163,13 @@ export const CometChatAddMembers = ({ group, onBack }: IAddMembersProps) => {
---
-### 5. Ban Member from Group Implementation
+### 5. Ban Members
+
+Fetch the list of banned members using `BannedMembersRequestBuilder`. This component displays banned users and provides unban functionality for group admins.
_File: [CometChatBannedMembers.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatBannedMembers/CometChatBannedMembers.tsx)_
-```tsx
+```tsx lines
export const CometChatBannedMembers = ({ group }: bannedMembersProp) => {
const [bannedMembers, setBannedMembers] = useState([]);
const [state, setState] = useState(States.loading);
@@ -189,13 +193,16 @@ export const CometChatBannedMembers = ({ group }: bannedMembersProp) => {
};
```
+
---
-### 6. Change Member Scope Implementation
+### 6. Change Member Scope
+
+Promote or demote a member by calling `CometChat.updateGroupMemberScope()`. Pass the member's UID, the new scope (`admin`, `moderator`, or `participant`), and the group GUID. Emit `ccGroupMemberScopeChanged` so the UI reflects the role change.
_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
-```tsx
+```tsx lines
const changeMemberScope = async (member: CometChat.GroupMember, newScope: string) => {
try {
await CometChat.updateGroupMemberScope(member.getUid(), newScope, group.getGuid());
@@ -207,21 +214,21 @@ const changeMemberScope = async (member: CometChat.GroupMember, newScope: string
newScope: newScope,
oldScope: member.getScope()
});
- showSuccessMessage("Member scope updated successfully");
} catch (error) {
console.error("Failed to update member scope:", error);
- showErrorMessage("Failed to update member scope");
}
};
```
---
-### 7. Transfer Group Ownership Implementation
+### 7. Transfer Ownership
+
+Let the current owner select a member and transfer ownership via `CometChat.transferGroupOwnership()`. The group object is cloned and updated locally, then `ccOwnershipChanged` is emitted to sync the UI.
_File: [CometChatTransferOwnership.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatTransferOwnership/CometChatTransferOwnership.tsx)_
-```tsx
+```tsx lines
export const CometChatTransferOwnership = ({ group, onClose }: ITransferOwnershipProps) => {
const [selectedMember, setSelectedMember] = useState(null);
const [isLoading, setIsLoading] = useState(false);
@@ -252,96 +259,34 @@ export const CometChatTransferOwnership = ({ group, onClose }: ITransferOwnershi
---
-## Implementation Flow
-
-- **Fetch Data / Group Information**: Retrieve group details and member lists.
-- **Load Group Data / Member Information**: Fetch members with pagination.
-- **Execute Group Operations / Action Handlers**: Handle creation, adding, banning, etc., with proper error handling.
-- **Live Updates / Event Handling**: Subscribe to CometChatGroupEvents for member changes and update UI in real time.
-
----
-
-## Customization Options
-
-- Styling: Override CSS classes
-- Group Types: Customize available types
-- Member Permissions: Add custom roles
-- UI Components: Modify list/form elements
-- Validation Rules: Add extra checks
-- Event Handling: Custom responses
-- Search & Filtering: Add search for members
-
----
-
-## Filtering / Edge Cases
+## Feature Matrix
-- Handle group type restrictions, member limits, and permission checks
-- Manage large groups efficiently
-- Handle empty groups and network errors gracefully
-- Maintain UI consistency with concurrent actions
+| Feature | Component / Method | File |
+|:---|:---|:---|
+| Create group | `CometChatCreateGroup` | [CometChatCreateGroup.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCreateGroup/CometChatCreateGroup.tsx) |
+| Join group | `CometChatJoinGroup` | [CometChatJoinGroup.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatJoinGroup/CometChatJoinGroup.tsx) |
+| View members | `CometChatGroupMembers` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
+| Add members | `CometChatAddMembers` | [CometChatAddMembers.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatAddMembers/CometChatAddMembers.tsx) |
+| Ban members | `CometChatBannedMembers` | [CometChatBannedMembers.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatBannedMembers/CometChatBannedMembers.tsx) |
+| Change scope | `updateGroupMemberScope()` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
+| Transfer ownership | `CometChatTransferOwnership` | [CometChatTransferOwnership.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatTransferOwnership/CometChatTransferOwnership.tsx) |
+| Group events | `CometChatGroupEvents` | Multiple files |
---
-## Error Handling & Permission Management
-
-```tsx
-const handleGroupOperation = async (operation: () => Promise) => {
- try {
- if (!hasPermission(currentUser, currentGroup, 'manage_members')) {
- showErrorMessage("You don't have permission to perform this action");
- return;
- }
- const result = await operation();
- showSuccessMessage("Operation completed successfully");
- return result;
- } catch (error) {
- if (error.code === "ERR_PERMISSION_DENIED") {
- showErrorMessage("Permission denied for this operation");
- } else if (error.code === "ERR_GROUP_NOT_FOUND") {
- showErrorMessage("Group not found or no longer exists");
- } else if (error.code === "ERR_MEMBER_NOT_FOUND") {
- showErrorMessage("Member not found in this group");
- } else {
- showErrorMessage("An error occurred while performing the operation");
- }
- console.error("Group operation failed:", error);
- }
-};
-```
-
----
-
-## Context-Specific Notes
-
-- Different handling for public, private, password-protected groups
-- Different permissions for admins, moderators, participants
-- Optimize for large groups
-- Real-time updates across devices
-- Works cross-platform
-
----
-
-## Summary / Feature Matrix
-
-| Feature | Component / Method | File Reference |
-|--------------------|--------------------------------|----------------|
-| Create group | `CometChatCreateGroup` | [CometChatCreateGroup.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCreateGroup/CometChatCreateGroup.tsx) |
-| Join group | `CometChatJoinGroup` | [CometChatJoinGroup.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatJoinGroup/CometChatJoinGroup.tsx) |
-| View members | `CometChatGroupMembers` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
-| Add members | `CometChatAddMembers` | [CometChatAddMembers.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatAddMembers/CometChatAddMembers.tsx) |
-| Ban members | `CometChatBannedMembers` | [CometChatBannedMembers.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatBannedMembers/CometChatBannedMembers.tsx) |
-| Change scope | `updateGroupMemberScope()` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
-| Transfer ownership | `CometChatTransferOwnership` | [CometChatTransferOwnership.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatTransferOwnership/CometChatTransferOwnership.tsx) |
-| Group events | `CometChatGroupEvents` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx), [CometChatAddMembers.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatAddMembers/CometChatAddMembers.tsx), [CometChatBannedMembers.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatBannedMembers/CometChatBannedMembers.tsx), [CometChatTransferOwnership.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatTransferOwnership/CometChatTransferOwnership.tsx) |
-| Member management | `CometChat.GroupMembersRequestBuilder` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx), [CometChatTransferOwnership.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatTransferOwnership/CometChatTransferOwnership.tsx) |
-
----
-
-## Next Steps & Further Reading
-
-- [CometChat React UI Kit Documentation](https://www.cometchat.com/docs/ui-kit/react/overview)
-- [Sample App Repository](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app)
-- Group Management Features
-- Advanced Customization Guide
-- Member Management Documentation
-
+## Next Steps
+
+
+
+ Display and manage group lists.
+
+
+ Display and manage group member lists.
+
+
+ Browse all feature and formatter guides.
+
+
+ Full working sample application on GitHub.
+
+
\ No newline at end of file
diff --git a/ui-kit/react/guide-message-privately.mdx b/ui-kit/react/guide-message-privately.mdx
index 1d0add7ad..daa97ebf2 100644
--- a/ui-kit/react/guide-message-privately.mdx
+++ b/ui-kit/react/guide-message-privately.mdx
@@ -1,51 +1,48 @@
---
title: "Message Privately"
sidebarTitle: "Message Privately"
+description: "Launch a direct 1:1 chat from a group member profile in CometChat React UI Kit."
---
-Enable users to initiate private conversations with group members directly from group chat interfaces.
+
-## Overview
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` |
+| Key components | `CometChatMessages`, `CometChatGroupMembers`, `CometChatMessageComposer`, `CometChatMessageList`, `CometChatMessageHeader` |
+| Init | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` |
+| Purpose | Launch a direct 1:1 chat from a group member profile |
+| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) |
+| Related | [All Guides](/ui-kit/react/guide-overview) |
-The Message Privately (from a Group) feature allows users to start private, one-on-one conversations with specific group members while remaining in the group context.
+
-- Allows users to start private conversations with specific group members directly from a group.
-- Enables confidential discussions, sharing sensitive information, or asking personal questions without disrupting the group conversation.
-- Your app will support initiating private messages from group contexts, allowing users to seamlessly switch between group discussions and private conversations.
+Message Privately lets users start a direct 1:1 conversation with a group member without leaving the group context. The user can return to the group after the private chat.
----
-
-## Prerequisites
-
-- React v18.2.0+
-- CometChat React UI Kit v6.1.0+
-- CometChat Chat SDK JavaScript v4.0.13+
-- Project setup with initialized CometChat credentials (App ID, Auth Key, Region)
-- TypeScript support (recommended)
-- Group chat functionality already implemented
-- User management and conversation handling already implemented
+Before starting, complete the [Getting Started](/ui-kit/react/react-js-integration) guide for your framework.
---
## Components
-| Component / Class | Role |
-|--------------------------|------|
-| **CometChatGroupMembers** | Displays group members with click handlers for private messaging |
-| **CometChatUsers** | Alternative user list component for private messaging |
-| **CometChatMessageComposer** | Input component for composing private messages |
-| **CometChatMessageList** | Displays private conversation messages |
-| **CometChatMessageHeader** | Header showing private chat information |
+| Component / Class | Role |
+|:---|:---|
+| `CometChatGroupMembers` | Displays group members with click handlers for private messaging |
+| `CometChatMessageComposer` | Input component for composing private messages |
+| `CometChatMessageList` | Displays private conversation messages |
+| `CometChatMessageHeader` | Header showing private chat information |
---
## Integration Steps
-### 1. Group Member Click Handler Setup
+### 1. Group Member Click Handler
+
+When a group member is clicked, cast them to a `User` object and initiate a private chat. The current group is saved so the user can return to it later. `CometChat.getConversation()` fetches or creates the 1:1 conversation.
_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
-```tsx
+```tsx lines
const handleGroupMemberClick = (groupMember: CometChat.GroupMember) => {
const user = groupMember as CometChat.User;
startPrivateChatFromGroup(user, currentGroup);
@@ -62,18 +59,19 @@ const startPrivateChatFromGroup = (user: CometChat.User, group: CometChat.Group)
})
.catch((error) => {
console.error("Failed to start private chat:", error);
- showErrorMessage("Unable to start private conversation");
});
}
```
---
-### 2. Group Members Component Integration
+### 2. Group Members with Private Messaging Option
+
+Add a "Message Privately" option to the group members list. The `options` prop adds a context-menu action that triggers the private chat flow when clicked.
_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
-```tsx
+```tsx lines
const GroupMembersWithPrivateMessaging = ({ group }: { group: CometChat.Group }) => {
return (
+
+ Display and manage group member lists.
+
+
+ Render real-time message threads.
+
+
+ Browse all feature and formatter guides.
+
+
+ Full working sample application on GitHub.
+
+
diff --git a/ui-kit/react/guide-new-chat.mdx b/ui-kit/react/guide-new-chat.mdx
index 54ee2e6b2..40beee2ac 100644
--- a/ui-kit/react/guide-new-chat.mdx
+++ b/ui-kit/react/guide-new-chat.mdx
@@ -1,51 +1,49 @@
---
title: "New Chat"
sidebarTitle: "New Chat"
+description: "Build a unified new chat entry point for starting 1:1 or group conversations in CometChat React UI Kit."
---
-Enable users to create new conversations with individual users or join existing groups in your React chat app.
+
-## Overview
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` |
+| Key components | `CometChatUsers`, `CometChatGroups`, `CometChatJoinGroup`, `CometChatSelector` |
+| Init | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` |
+| Purpose | Unified new chat entry point for starting 1:1 or group conversations |
+| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) |
+| Related | [All Guides](/ui-kit/react/guide-overview) |
-The New Chat feature allows users to initiate conversations with other users or join group conversations, providing a seamless way to start new communications.
+
-- Allows users to initiate conversations with other users or join group conversations.
-- Enables users to expand their network, join group discussions, and create new chat threads without navigating through complex menus.
-- Your app will provide an intuitive interface for users to discover and connect with other users, join groups, and start new conversations with proper navigation and state management.
+The New Chat feature lets users start conversations with other users or join group conversations from a single interface.
----
-
-## Prerequisites
-
-- React v18.2.0+
-- CometChat React UI Kit v6.1.0+
-- CometChat Chat SDK JavaScript v4.0.13+
-- Project setup with initialized CometChat credentials (App ID, Auth Key, Region)
-- TypeScript support (recommended)
-- User authentication and basic chat functionality implemented
-- User and group management components available
+Before starting, complete the [Getting Started](/ui-kit/react/react-js-integration) guide for your framework.
---
## Components
-| Component / Class | Role |
-|--------------------------|------|
-| **CometChatNewChatView** | Main container for new chat creation interface |
-| **CometChatUsers** | Displays list of available users for chat creation |
-| **CometChatGroups** | Shows available groups for joining |
-| **CometChatJoinGroup** | Handles protected group joining process |
-| **CometChatSelector** | Navigation component with new chat button |
+| Component / Class | Role |
+|:---|:---|
+| `CometChatNewChatView` | Main container for new chat creation interface |
+| `CometChatUsers` | Displays list of available users for chat creation |
+| `CometChatGroups` | Shows available groups for joining |
+| `CometChatJoinGroup` | Handles protected group joining process |
+| `CometChatSelector` | Navigation component with new chat button |
---
## Integration Steps
-### 1. New Chat State Management Setup
+### 1. New Chat State Management
+
+Track whether the new chat view is visible and which user/group was selected. When the "New Chat" button is clicked, show the view and hide any open side panels.
_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
-```tsx
+```tsx lines
const [showNewChat, setShowNewChat] = useState(false);
const [newChat, setNewChat] = useState<{
user?: CometChat.User,
@@ -58,15 +56,15 @@ const onNewChatClicked = () => {
}
```
-Manages the new chat view visibility and resets side components when opening new chat.
-
---
-### 2. New Chat View Component Integration
+### 2. Conditional Rendering
+
+Switch between the new chat view, the messages view, or an empty state depending on the current app state. `useCallback` prevents unnecessary re-renders.
_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
-```tsx
+```tsx lines
const InformationComponent = useCallback(() => {
return (
<>
@@ -81,15 +79,15 @@ const InformationComponent = useCallback(() => {
}, [activeTab, showNewChat, selectedItem, newChat, appState.goToMessageId]);
```
-Conditionally renders the new chat view or message view based on application state.
-
---
-### 3. New Chat View Implementation
+### 3. New Chat View
+
+The main new chat interface with a header, back button, and tabbed navigation between Users and Groups. Selecting a tab switches the list below.
_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
-```tsx
+```tsx lines
const CometChatNewChatView: React.FC = () => {
const [selectedTab, setSelectedTab] = useState('user');
const [group, setGroup] = useState();
@@ -101,7 +99,6 @@ const CometChatNewChatView: React.FC = () => {
return (
-```css
-.cometchat-message-header
- .cometchat-list-item
- .message-header__leading-view
- .cometchat-avatar__image,
-.cometchat-message-header
- .cometchat-list-item
- .message-header__leading-view
- .cometchat-avatar {
+
+```css lines
+.cometchat-message-header .message-header__leading-view .cometchat-avatar {
border-radius: 8px;
height: 48px;
width: 48px;
@@ -503,203 +422,488 @@ function CustomLeadingView() {
position: absolute;
bottom: -2px;
}
+
.message-header__leading-view {
position: relative;
}
```
-
-
-***
+### trailingView
-#### TrailingView
-
-The customized chat interface is displayed below.
+Replace the right section (call buttons area).
-Use the following code to achieve the customization shown above.
-
-
-
-```ts
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
+```tsx lines
import {
CometChatMessageHeader,
CometChatButton,
} from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
-// Custom trailing view component
-function CustomTrailingButtonView() {
+function CustomTrailingHeader({ user }: { user: CometChat.User }) {
return (
- <>
- {
- // Your logic here
- }}
- iconURL={icon} // Ensure `icon` is defined or passed as a prop
- />
-
+ { /* custom action */ }} />
+ }
+ />
);
}
-
-
+### auxiliaryButtonView
-
-```css
-.cometchat-message-header
- .cometchat-list-item__trailing-view
- .cometchat-button {
- background: transparent;
- height: 24px;
- width: 24px;
- padding: 0;
-}
+Replace the auxiliary button area (next to call buttons).
+
+
+ 
+
-.cometchat-message-header
- .cometchat-list-item__trailing-view
- .cometchat-button__icon {
- background: black;
+```tsx lines
+import {
+ CometChatMessageHeader,
+ CometChatButton,
+} from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+
+function AuxiliaryButtonHeader({ group }: { group: CometChat.Group }) {
+ return (
+ { /* custom action */ }} />
+ }
+ />
+ );
}
```
-
+### lastActiveAtDateTimeFormat
-
+Customize the "last seen" timestamp format using a `CalendarObject`.
-***
+```tsx lines
+import {
+ CometChatMessageHeader,
+ CalendarObject,
+} from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
-#### AuxiliaryButtonView
+function CustomDateHeader({ user }: { user: CometChat.User }) {
+ const dateFormat = new CalendarObject({
+ today: "hh:mm A",
+ yesterday: "[yesterday]",
+ otherDays: "DD MM YYYY",
+ });
+
+ return (
+
+If no property is passed in the [CalendarObject](/ui-kit/react/localize#calendarobject), the component checks the [global configuration](/ui-kit/react/localize#customisation) first. If also missing there, the component's default formatting applies.
+
-
-
-
+---
-Use the following code to achieve the customization shown above.
+## Common Patterns
-
-
-```ts
-import React from "react";
+### Header with back button and search
+
+```tsx lines
+import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
-import {
- CometChatMessageHeader,
- CometChatButton,
-} from "@cometchat/chat-uikit-react";
-// Custom auxiliary view component
-function CustomAuxiliaryButtonView() {
+function FullFeaturedHeader({ user }: { user: CometChat.User }) {
return (
- <>
- {
- // Your logic here
- }}
- iconURL={icon} // Ensure `icon` is defined or passed as a prop
- />
-
+ { /* navigate back */ }}
+ onSearchOptionClicked={() => { /* open search */ }}
+ />
);
}
-
-
+### Hide call buttons
-
-```css
-.cometchat-message-header
- .cometchat-message-header__auxiliary-view
- .cometchat-button {
- background: transparent;
- height: 24px;
- width: 24px;
- padding: 0;
+```tsx lines
+import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+
+function NoCalls({ user }: { user: CometChat.User }) {
+ return (
+
+---
-
+## CSS Architecture
-#### LastActiveAt Date Time Format
+The component uses CSS custom properties (design tokens) defined in `@cometchat/chat-uikit-react/css-variables.css`. The cascade:
-The `lastActiveAtDateTimeFormat` property allows you to customize the **last active** timestamp displayed in the message header.
+1. Global tokens are set on the `.cometchat` root wrapper.
+2. Component CSS (`.cometchat-message-header`) consumes these tokens via `var()` with fallback values.
+3. Overrides target `.cometchat-message-header` descendant selectors in a global stylesheet.
-Default Date Time Format:
+### Key Selectors
-```ruby
-new CalendarObject({
- today: `[Last seen DD MMM at] hh:mm A`, // Example: "today at 10:30 AM"
- yesterday: `[Last seen DD MMM at] hh:mm A`, // Example: "yesterday at 08:15 PM"
- otherDays: `[Last seen DD MMM at] hh:mm A`, // Example: "25, Jan 05:45 PM"
- relativeTime: {
- hour: `Last seen %d hour ago`, // Example: "1 hour ago"
- minute: `Last seen %d minute ago`, // Example: "1 minute ago"
- minutes: `Last seen %d minutes ago`, // Example: "5 minutes ago"
- },
-});
-```
+| Target | Selector |
+| --- | --- |
+| Root | `.cometchat-message-header` |
+| List item | `.cometchat-message-header .cometchat-list-item` |
+| Body title | `.cometchat-message-header .cometchat-list-item__body-title` |
+| Avatar | `.cometchat-message-header .cometchat-list-item .cometchat-avatar` |
+| Leading view | `.cometchat-message-header .cometchat-list-item__leading-view` |
+| Trailing view | `.cometchat-message-header .cometchat-list-item__trailing-view` |
+| Subtitle | `.cometchat-message-header__subtitle` |
+| Subtitle (typing) | `.cometchat-message-header__subtitle-typing` |
+| Back button | `.cometchat-message-header__back-button` |
+| Auxiliary button view | `.cometchat-message-header__auxiliary-button-view` |
+| List item container | `.cometchat-message-header__listitem` |
+| Title container | `.cometchat-message-header .cometchat-list-item__title-container` |
-The following example demonstrates how to modify the **last active** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject).
+### Example: Brand-themed header
-
-
-```ts
-import {
- CometChatMessageHeader,
- CalendarObject,
-} from "@cometchat/chat-uikit-react";
+
+ 
+
-// Define a custom date format pattern
-function getDateFormat() {
- const dateFormat = new CalendarObject({
- today: `hh:mm A`, // Example: "10:30 AM"
- yesterday: `[yesterday]`, // Example: "yesterday"
- otherDays: `DD MM YYYY`, // Example: "25 01 2025"
- });
- return dateFormat;
+```css lines
+.cometchat-message-header .cometchat-list-item .cometchat-avatar {
+ background: #f0999b;
+ border-radius: 8px;
}
-// Apply the custom format to the CometChatMessageHeader component
-
+### Customization Matrix
-
+| What to change | Where | Property/API | Example |
+| --- | --- | --- | --- |
+| Override behavior on user interaction | Component props | `on` callbacks | `onBack={() => navigate(-1)}` |
+| Toggle visibility of UI elements | Component props | `hide` / `show` boolean props | `hideVideoCallButton={true}` |
+| Replace a section of the header | Component props | `View` JSX.Element props | `titleView={
+---
-**Fallback Mechanism**
+## Accessibility
-* If you **do not** pass any property in the [**CalendarObject**](/ui-kit/react/localize#calendarobject), the component will first check the [**global configuration**](/ui-kit/react/localize#customisation). If the property is **also missing in the global configuration**, it will **fallback to the component's default formatting**.
+The component renders a toolbar with interactive elements. The back button, call buttons, and auxiliary buttons are keyboard-focusable and activate on Enter/Space. The avatar includes alt text. The typing indicator updates the subtitle text dynamically — screen readers announce the change via live region behavior.
-
+---
+
+---
+
+## Props
+
+All props are optional unless noted otherwise.
+
+---
+
+### auxiliaryButtonView
+
+Custom component for the auxiliary button area.
+
+| | |
+| --- | --- |
+| Type | `JSX.Element` |
+| Default | `undefined` |
+
+---
+
+### enableAutoSummaryGeneration
+
+Enables automatic conversation summary generation.
+
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
+
+---
+
+### group
+
+Displays group details in the header.
+
+| | |
+| --- | --- |
+| Type | `CometChat.Group` |
+| Default | `undefined` |
+
+Pass either `user` or `group`, not both.
+
+---
+
+### hideBackButton
+
+Hides the back navigation button. Deprecated — use `showBackButton` instead.
+
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `true` |
+
+---
+
+### hideUserStatus
+
+Hides the user's online/offline status indicator.
+
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
+
+---
+
+### hideVideoCallButton
+
+Hides the video call button.
+
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
+
+---
+
+### hideVoiceCallButton
+
+Hides the voice call button.
+
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
+
+---
+
+### itemView
+
+Custom component for the entire list item.
+
+| | |
+| --- | --- |
+| Type | `JSX.Element` |
+| Default | `undefined` |
+
+---
+
+### lastActiveAtDateTimeFormat
+
+Format for displaying the "last seen" timestamp.
+
+| | |
+| --- | --- |
+| Type | `CalendarObject` |
+| Default | Component default |
+
+---
+
+### leadingView
+
+Custom component for the avatar / left section.
+
+| | |
+| --- | --- |
+| Type | `JSX.Element` |
+| Default | `undefined` |
+
+---
+
+### onBack
+
+Callback fired when the back button is clicked.
+
+| | |
+| --- | --- |
+| Type | `() => void` |
+| Default | `() => {}` |
+
+---
+
+### onError
+
+Callback fired when the component encounters an error.
+
+| | |
+| --- | --- |
+| Type | `((error: CometChat.CometChatException) => void) \| null` |
+| Default | `undefined` |
+
+---
+
+### onItemClick
+
+Callback fired when the header list item is clicked.
+
+| | |
+| --- | --- |
+| Type | `() => void` |
+| Default | `() => {}` |
+
+---
+
+### onSearchOptionClicked
+
+Callback fired when the search option is clicked.
+
+| | |
+| --- | --- |
+| Type | `() => void` |
+| Default | `() => {}` |
+
+---
+
+### showBackButton
+
+Shows the back navigation button.
+
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
+
+---
+
+### showConversationSummaryButton
+
+Shows the AI conversation summary button.
+
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
+
+---
+
+### showSearchOption
+
+Shows the search option in the header.
+
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
+
+---
+
+### subtitleView
+
+Custom component for the subtitle text.
+
+| | |
+| --- | --- |
+| Type | `JSX.Element` |
+| Default | `undefined` |
+
+---
+
+### summaryGenerationMessageCount
+
+Number of messages used for AI summary generation.
+
+| | |
+| --- | --- |
+| Type | `number` |
+| Default | `1000` |
+
+---
+
+### titleView
+
+Custom component for the name / title text.
+
+| | |
+| --- | --- |
+| Type | `JSX.Element` |
+| Default | `undefined` |
+
+---
+
+### trailingView
+
+Custom component for the right section.
+
+| | |
+| --- | --- |
+| Type | `JSX.Element` |
+| Default | `undefined` |
+
+---
+
+### user
+
+Displays user details in the header.
+
+| | |
+| --- | --- |
+| Type | `CometChat.User` |
+| Default | `undefined` |
+
+Pass either `user` or `group`, not both.
+
+---
-***
+## CSS Selectors
+
+| Target | Selector |
+| --- | --- |
+| Root | `.cometchat-message-header` |
+| List item | `.cometchat-message-header .cometchat-list-item` |
+| Body title | `.cometchat-message-header .cometchat-list-item__body-title` |
+| Avatar | `.cometchat-message-header .cometchat-list-item .cometchat-avatar` |
+| Leading view | `.cometchat-message-header .cometchat-list-item__leading-view` |
+| Trailing view | `.cometchat-message-header .cometchat-list-item__trailing-view` |
+| Subtitle | `.cometchat-message-header__subtitle` |
+| Subtitle (typing) | `.cometchat-message-header__subtitle-typing` |
+| Back button | `.cometchat-message-header__back-button` |
+| Auxiliary button view | `.cometchat-message-header__auxiliary-button-view` |
+| List item container | `.cometchat-message-header__listitem` |
+| Title container | `.cometchat-message-header .cometchat-list-item__title-container` |
+| Summary button | `.cometchat-message-header__conversation-summary-button` |
+| Search button | `.cometchat-message-header__search-button` |
+| Menu | `.cometchat-message-header__menu` |
diff --git a/ui-kit/react/message-list.mdx b/ui-kit/react/message-list.mdx
index e2300b1d1..18f5ab683 100644
--- a/ui-kit/react/message-list.mdx
+++ b/ui-kit/react/message-list.mdx
@@ -1,1585 +1,1293 @@
---
title: "Message List"
+description: "Scrollable list of sent and received messages with text, media, reactions, read receipts, threaded replies, and AI features."
---
+
+```json
+{
+ "component": "CometChatMessageList",
+ "package": "@cometchat/chat-uikit-react",
+ "import": "import { CometChatMessageList } from \"@cometchat/chat-uikit-react\";",
+ "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";",
+ "description": "Scrollable list of sent and received messages with text, media, reactions, read receipts, threaded replies, and AI features.",
+ "cssRootClass": ".cometchat-message-list",
+ "primaryOutput": {
+ "prop": "onThreadRepliesClick",
+ "type": "(message: CometChat.BaseMessage) => void"
+ },
+ "props": {
+ "data": {
+ "user": { "type": "CometChat.User", "default": "undefined" },
+ "group": { "type": "CometChat.Group", "default": "undefined" },
+ "messagesRequestBuilder": { "type": "CometChat.MessagesRequestBuilder", "default": "SDK default" },
+ "reactionsRequestBuilder": { "type": "CometChat.ReactionsRequestBuilder", "default": "undefined" },
+ "parentMessageId": { "type": "number", "default": "undefined" },
+ "templates": { "type": "CometChatMessageTemplate[]", "default": "SDK defaults" },
+ "goToMessageId": { "type": "string", "default": "undefined" }
+ },
+ "callbacks": {
+ "onThreadRepliesClick": "(message: CometChat.BaseMessage) => void",
+ "onReactionClick": "(reaction: CometChat.ReactionCount, message: CometChat.BaseMessage) => void",
+ "onReactionListItemClick": "(reaction: CometChat.Reaction, message: CometChat.BaseMessage) => void",
+ "onError": "((error: CometChat.CometChatException) => void) | null"
+ },
+ "visibility": {
+ "hideDateSeparator": { "type": "boolean", "default": false },
+ "hideStickyDate": { "type": "boolean", "default": false },
+ "hideReceipts": { "type": "boolean", "default": false },
+ "hideError": { "type": "boolean", "default": false },
+ "hideReplyInThreadOption": { "type": "boolean", "default": false },
+ "hideReplyOption": { "type": "boolean", "default": false },
+ "hideTranslateMessageOption": { "type": "boolean", "default": false },
+ "hideEditMessageOption": { "type": "boolean", "default": false },
+ "hideDeleteMessageOption": { "type": "boolean", "default": false },
+ "hideReactionOption": { "type": "boolean", "default": false },
+ "hideMessagePrivatelyOption": { "type": "boolean", "default": false },
+ "hideCopyMessageOption": { "type": "boolean", "default": false },
+ "hideMessageInfoOption": { "type": "boolean", "default": false },
+ "hideAvatar": { "type": "boolean", "default": false },
+ "hideGroupActionMessages": { "type": "boolean", "default": false },
+ "hideModerationView": { "type": "boolean", "default": false },
+ "hideFlagMessageOption": { "type": "boolean", "default": false },
+ "hideFlagRemarkField": { "type": "boolean", "default": false },
+ "showConversationStarters": { "type": "boolean", "default": false },
+ "showSmartReplies": { "type": "boolean", "default": false },
+ "showMarkAsUnreadOption": { "type": "boolean", "default": false },
+ "showScrollbar": { "type": "boolean", "default": false }
+ },
+ "behavior": {
+ "messageAlignment": { "type": "MessageListAlignment", "default": "MessageListAlignment.standard" },
+ "scrollToBottomOnNewMessages": { "type": "boolean", "default": false },
+ "quickOptionsCount": { "type": "number", "default": 3 },
+ "startFromUnreadMessages": { "type": "boolean", "default": false },
+ "isAgentChat": { "type": "boolean", "default": false },
+ "loadLastAgentConversation": { "type": "boolean", "default": false }
+ },
+ "sound": {
+ "disableSoundForMessages": { "type": "boolean", "default": true },
+ "customSoundForMessages": { "type": "string", "default": "undefined" }
+ },
+ "ai": {
+ "smartRepliesKeywords": { "type": "string[]", "default": "[\"what\",\"when\",\"why\",\"who\",\"where\",\"how\",\"?\"]" },
+ "smartRepliesDelayDuration": { "type": "number", "default": 10000 }
+ },
+ "dateFormatting": {
+ "separatorDateTimeFormat": "CalendarObject",
+ "stickyDateTimeFormat": "CalendarObject",
+ "messageSentAtDateTimeFormat": "CalendarObject",
+ "messageInfoDateTimeFormat": "CalendarObject"
+ },
+ "viewSlots": {
+ "headerView": "JSX.Element",
+ "footerView": "JSX.Element",
+ "loadingView": "JSX.Element",
+ "emptyView": "JSX.Element",
+ "errorView": "JSX.Element"
+ },
+ "formatting": {
+ "textFormatters": { "type": "CometChatTextFormatter[]", "default": "default formatters" }
+ }
+ },
+ "events": [
+ { "name": "CometChatMessageEvents.ccMessageEdited", "payload": "IMessages" },
+ { "name": "CometChatMessageEvents.ccMessageDeleted", "payload": "CometChat.BaseMessage" },
+ { "name": "CometChatMessageEvents.ccMessageRead", "payload": "CometChat.BaseMessage" },
+ { "name": "CometChatMessageEvents.ccReplyToMessage", "payload": "IMessages" },
+ { "name": "CometChatUIEvents.ccOpenChat", "payload": "IOpenChat" },
+ { "name": "CometChatUIEvents.ccActiveChatChanged", "payload": "IActiveChatChanged" }
+ ],
+ "sdkListeners": [
+ "onTextMessageReceived", "onMediaMessageReceived", "onCustomMessageReceived",
+ "onMessageEdited", "onMessageDeleted", "onMessageModerated",
+ "onTypingStarted", "onTypingEnded",
+ "onMessagesDelivered", "onMessagesRead", "onMessagesDeliveredToAll", "onMessagesReadByAll"
+ ],
+ "types": {
+ "MessageListAlignment": { "left": 0, "standard": 1 },
+ "CalendarObject": { "today": "string", "yesterday": "string", "lastWeek": "string", "otherDays": "string" }
+ }
+}
+```
+
-## Overview
+## Where It Fits
+
+`CometChatMessageList` renders a scrollable, real-time message feed for a user or group conversation. Wire it alongside `CometChatMessageHeader` and `CometChatMessageComposer` to build a standard chat view.
+
+```tsx lines
+import { useState, useEffect } from "react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import {
+ CometChatMessageHeader,
+ CometChatMessageList,
+ CometChatMessageComposer,
+} from "@cometchat/chat-uikit-react";
+import "@cometchat/chat-uikit-react/css-variables.css";
+
+function ChatView() {
+ const [chatUser, setChatUser] = useState();
+
+ useEffect(() => {
+ CometChat.getUser("uid").then((user) => setChatUser(user));
+ }, []);
-`MessageList` is a composite component that displays a list of messages and effectively manages real-time operations. It includes various types of messages such as Text Messages, Media Messages, Stickers, and more.
+ return chatUser ? (
+ 
-***
-
-## Usage
-
-### Integration
+---
-The following code snippet illustrates how you can directly incorporate the MessageList component into your Application.
+## Minimal Render
-
-
-```tsx
-import React from "react";
+```tsx lines
+import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageList } from "@cometchat/chat-uikit-react";
+import "@cometchat/chat-uikit-react/css-variables.css";
-export function MessageListDemo() {
- const [chatUser, setChatUser] = React.useState();
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
+function MessageListDemo() {
+ const [chatUser, setChatUser] = useState();
+
+ useEffect(() => {
+ CometChat.getUser("uid").then((user) => setChatUser(user));
}, []);
- return chatUser ? (
-
+Root CSS class: `.cometchat-message-list`
+
+---
-
-```tsx
-import { MessageListDemo } from "./MessageListDemo";
+## Filtering Messages
-export default function App() {
+Pass a `CometChat.MessagesRequestBuilder` to `messagesRequestBuilder`. The `UID`/`GUID` parameters are always overridden internally based on the `user`/`group` prop.
+
+```tsx lines
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatMessageList } from "@cometchat/chat-uikit-react";
+
+function FilteredMessageList() {
return (
-
-
-
+### Reactions Request Builder
-
+```tsx lines
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatMessageList } from "@cometchat/chat-uikit-react";
-To fetch messages for a specific entity, you need to supplement it with `User` or `Group` Object.
+function ReactionsFilteredList() {
+ return (
+
+Refer to [MessagesRequestBuilder](/sdk/javascript/additional-message-filtering) for the full builder API.
-***
+---
-### Actions
+## Actions and Events
-[Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.
+### Callback Props
-##### 1. onThreadRepliesClick
+#### onThreadRepliesClick
-`onThreadRepliesClick` is triggered when you click on the threaded message bubble. The `onThreadRepliesClick` action doesn't have a predefined behavior. You can override this action using the following code snippet.
+Fires when a threaded message reply count is clicked.
-
-
-```ts
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
+```tsx lines
import { CometChatMessageList } from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
-export function MessageListDemo() {
- const [chatUser, setChatUser] = React.useState();
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
-
- const getOnThreadRepliesClick = () => {
- //your custom actions
- };
-
- return chatUser ? (
- {
+ console.log("Thread:", message.getId());
+ }}
+ />
+ );
}
```
-
+#### onReactionClick
-
-```js
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
+Fires when a reaction on a message bubble is clicked.
+
+```tsx lines
import { CometChatMessageList } from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
-export function MessageListDemo() {
- const [chatUser, setChatUser] = React.useState(null);
+function MessageListWithReactions() {
+ return (
+ {
+ console.log("Reaction:", reaction, "on message:", message.getId());
+ }}
+ />
+ );
+}
+```
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
+#### onReactionListItemClick
- const getOnThreadRepliesClick = () => {
- //your custom actions
- };
+Fires when a specific reaction in the reaction detail view is clicked.
- return chatUser ? (
- {
+ console.log("Reaction detail:", reaction, message.getId());
+ }}
+ />
+ );
}
```
-
+#### onError
-
+Fires on internal errors.
-##### 2. onError
+```tsx lines
+import { CometChatMessageList } from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
-This action doesn't change the behavior of the component but rather listens for any errors that occur in the MessageList component.
+function MessageListWithError() {
+ return (
+ {
+ console.error("MessageList error:", error);
+ }}
+ />
+ );
+}
+```
-
-
-```ts
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageList } from "@cometchat/chat-uikit-react";
+### Global UI Events
-export function MessageListDemo() {
- const [chatUser, setChatUser] = React.useState();
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
+| Event | Fires when | Payload |
+| --- | --- | --- |
+| `CometChatMessageEvents.ccMessageEdited` | A message is edited | `IMessages` |
+| `CometChatMessageEvents.ccMessageDeleted` | A message is deleted | `CometChat.BaseMessage` |
+| `CometChatMessageEvents.ccMessageRead` | A message is read | `CometChat.BaseMessage` |
+| `CometChatMessageEvents.ccReplyToMessage` | User replies to a message | `IMessages` |
+| `CometChatUIEvents.ccOpenChat` | User opens a chat | `IOpenChat` |
+| `CometChatUIEvents.ccActiveChatChanged` | Active chat changes | `IActiveChatChanged` |
- function handleError(error: CometChat.CometChatException) {
- throw new Error("your custom error action");
- }
+```tsx lines
+import { useEffect } from "react";
+import { CometChatMessageEvents, CometChatUIEvents } from "@cometchat/chat-uikit-react";
- return chatUser ? (
-
+### SDK Events (Real-Time, Automatic)
-
-```js
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageList } from "@cometchat/chat-uikit-react";
+The component listens to these SDK events internally:
-export function MessageListDemo() {
- const [chatUser, setChatUser] = React.useState(null);
+| SDK Listener | Internal behavior |
+| --- | --- |
+| `onTextMessageReceived` / `onMediaMessageReceived` / `onCustomMessageReceived` | Appends new message to list |
+| `onMessageEdited` / `onMessageDeleted` | Updates/removes message in list |
+| `onTypingStarted` / `onTypingEnded` | Shows/hides typing indicator |
+| `onMessagesDelivered` / `onMessagesRead` / `onMessagesDeliveredToAll` / `onMessagesReadByAll` | Updates receipt ticks |
+| `onMessageModerated` | Updates moderated message state |
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
-
- const handleError = (error) => {
- throw new Error("your custom error action");
- };
+---
- return chatUser ? (
-
+| Slot | Type | Replaces |
+| --- | --- | --- |
+| `headerView` | `JSX.Element` | Area above the message list |
+| `footerView` | `JSX.Element` | Area below the message list |
+| `loadingView` | `JSX.Element` | Loading state |
+| `emptyView` | `JSX.Element` | Empty state |
+| `errorView` | `JSX.Element` | Error state |
+| `templates` | `CometChatMessageTemplate[]` | Message bubble rendering |
+| `textFormatters` | `CometChatTextFormatter[]` | Text formatting in messages |
-
+### headerView
-##### 3. onReactionClick
+Custom view above the message list.
-`onReactionClick` is triggered when you click on the reaction item of the message bubble. The `onReactionClick` action doesn't have a predefined behavior. You can override this action using the following code snippet.
+
+
+
-```ts
-import React from "react";
+```tsx lines
+import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageList } from "@cometchat/chat-uikit-react";
+import { CometChatMessageList, CometChatButton } from "@cometchat/chat-uikit-react";
-export function MessageListDemo() {
- const [chatUser, setChatUser] = React.useState();
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
+function MessageListWithHeader() {
+ const [chatUser, setChatUser] = useState();
- function onReactionClick(
- reaction: CometChat.ReactionCount,
- message: CometChat.BaseMessage
- ) {
- //your custom action
- }
+ useEffect(() => {
+ CometChat.getUser("uid").then((user) => setChatUser(user));
+ }, []);
return chatUser ? (
-
+
+ }
+ />
) : null;
}
```
-
+
- {/* Header */}
{
setShowNewChat(false);
@@ -109,13 +106,11 @@ const CometChatNewChatView: React.FC = () => {
- {/* Tabs */}
= ({ selectedTab }) => {
return selectedTab === 'user' ? {
@@ -153,69 +150,13 @@ const TabContent: React.FC = ({ selectedTab }) => {
---
-## Implementation Flow
+### 5. Group Joining Logic
-- **Fetch Data / Available Users and Groups**
+Handle the join flow based on group type. Public groups are joined directly via `CometChat.joinGroup()`. Password-protected groups show a password prompt first.
_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
-```tsx
- { /* handle */ }} />
- { /* handle */ }} />
-```
-
-- **Load User/Group Data / Associated Information**
-
-_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
-
-```tsx
-const joinGroup = (e) => { /* join group logic */ }
-```
-
-- **Create Conversation / Action Handler**
-
-_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
-
-```tsx
-onItemClick={(user) => { setNewChat({ user }); }}
-onItemClick={(group) => { joinGroup(group); }}
-```
-
-- **Live Updates / State Management**
-
-_Files: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx), [appReducer.ts](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/context/appReducer.ts)_
-
-```tsx
-useEffect(() => { /* update message target */ }, [activeTab, selectedItem]);
-```
-
----
-
-## Customization Options
-
-- Override CSS styles
-- Configure tabs
-- Customize list UI
-- Add search
-- Handle group types
-- Adjust navigation
-
----
-
-## Filtering / Edge Cases
-
-- User availability
-- Group permissions
-- Duplicate chats prevention
-- Blocking logic
-- Membership checks
-- Empty states
-
----
-
-## Error Handling & State Management
-
-```tsx
+```tsx lines
const joinGroup = (e) => {
if (!e.getHasJoined()) {
if (e.getType() === CometChatUIKitConstants.GroupTypes.public) {
@@ -232,34 +173,34 @@ const joinGroup = (e) => {
---
-## Context-Specific Notes
+## Feature Matrix
-- Public vs private groups
-- Different state logic for user/group chats
-- Mobile responsiveness
-- Navigation flow control
-- Group type handling
+| Feature | Component / Method | File |
+|:---|:---|:---|
+| Open new chat view | `onNewChatClicked()` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
+| New chat interface | `CometChatNewChatView` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
+| User selection | `CometChatUsers` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
+| Group selection | `CometChatGroups` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
+| Group joining | `joinGroup()` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
+| State management | `showNewChat` state | [appReducer.ts](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/context/appReducer.ts) |
+| Chat creation | `setNewChat()` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
+| Navigation handling | `setShowNewChat(false)` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
---
-## Summary / Feature Matrix
-
-| Feature | Component / Method | File Reference |
-|---------------------|-----------------------------|----------------|
-| Open new chat view | `onNewChatClicked()` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
-| New chat interface | `CometChatNewChatView` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
-| User selection | `CometChatUsers` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
-| Group selection | `CometChatGroups` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
-| Group joining | `joinGroup()` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
-| State management | `showNewChat` state | [appReducer.ts](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/context/appReducer.ts) |
-| Chat creation | `setNewChat()` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
-| Navigation handling | `setShowNewChat(false)` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
-
----
-
-## Next Steps & Further Reading
-
-- [CometChat React UI Kit Documentation](https://www.cometchat.com/docs/ui-kit/react/overview)
-- [Sample App Repository](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app)
-- User Management Features
-- Group Management Features
+## Next Steps
+
+
+
+ Display and manage conversation lists.
+
+
+ Display and manage group lists.
+
+
+ Browse all feature and formatter guides.
+
+
+ Full working sample application on GitHub.
+
+
diff --git a/ui-kit/react/guide-overview.mdx b/ui-kit/react/guide-overview.mdx
index 10ab044fd..45a87fb27 100644
--- a/ui-kit/react/guide-overview.mdx
+++ b/ui-kit/react/guide-overview.mdx
@@ -1,7 +1,21 @@
---
title: "Overview"
sidebarTitle: "Overview"
+description: "Index of task-oriented feature guides for the CometChat React UI Kit."
---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` |
+| Purpose | Index of task-oriented feature guides for the React UI Kit |
+| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) |
+| Components | [Components Overview](/ui-kit/react/components-overview) |
+| Guides | [Block/Unblock](/ui-kit/react/guide-block-unblock-user) · [Call Log Details](/ui-kit/react/guide-call-log-details) · [Group Chat](/ui-kit/react/guide-group-chat) · [Message Privately](/ui-kit/react/guide-message-privately) · [New Chat](/ui-kit/react/guide-new-chat) · [Search Messages](/ui-kit/react/guide-search-messages) · [Threaded Messages](/ui-kit/react/guide-threaded-messages) |
+
+
+
> This page indexes focused, task‑oriented feature guides for the React UI Kit. Each guide shows how to implement a specific capability end‑to‑end using UI components.
## When to Use These Guides
@@ -24,5 +38,23 @@ Use these guides after completing the base [Getting Started](/ui-kit/react/react
| [URL Formatter](/ui-kit/react/url-formatter-guide) | Detect and style plain URLs; render them as clickable links with optional tracking logic. |
| [Shortcut Formatter](/ui-kit/react/shortcut-formatter-guide) | Provide !shortcut style expansions invoking extension APIs or dialogs before inserting content. |
-Need another guide? Open a request via our [Developer Community](http://community.cometchat.com/) or Support.
+Need another guide? Open a request via our [Support Portal](https://help.cometchat.com/hc/en-us/requests/new).
+
+---
+
+## Next Steps
+
+
+ Set up the React UI Kit
+
+
+ Explore all UI components
+
+
+ Customize themes and styling
+
+
+ Handle UI Kit events
+
+
diff --git a/ui-kit/react/guide-search-messages.mdx b/ui-kit/react/guide-search-messages.mdx
index 072126f4f..6955b97c0 100644
--- a/ui-kit/react/guide-search-messages.mdx
+++ b/ui-kit/react/guide-search-messages.mdx
@@ -1,49 +1,48 @@
---
title: "Search Messages"
sidebarTitle: "Search Messages"
+description: "Add full-text message search across conversations with result routing in CometChat React UI Kit."
---
-Enable users to search messages within conversations and group chats using CometChat's React UI Kit.
+
-## Overview
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` |
+| Key components | `CometChatSearchMessages`, `CometChatMessageList`, `CometChatMessageComposer`, `CometChatMessageHeader` |
+| Init | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` |
+| Purpose | Full-text message search across conversations with result routing and navigation |
+| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) |
+| Related | [All Guides](/ui-kit/react/guide-overview) |
-The Search Messages feature allows users to quickly locate specific messages across conversations and groups.
+
-- Provides keyword-based search for locating past messages.
-- Improves user experience by helping users find information without scrolling through long conversations.
-- Users can search messages in real-time across chats and navigate directly to relevant results.
+Search Messages lets users locate specific messages across conversations and groups using keyword search, then navigate directly to the result.
----
-
-## Prerequisites
-
-- React v18.2.0+
-- CometChat React UI Kit v6.1.0+
-- CometChat Chat SDK JavaScript v4.0.13+
-- Project setup with initialized CometChat credentials (App ID, Auth Key, Region)
-- TypeScript support (recommended)
-- Basic messaging functionality already implemented
+Before starting, complete the [Getting Started](/ui-kit/react/react-js-integration) guide for your framework.
---
## Components
-| Component / Class | Role |
-|----------------------------|------|
-| **CometChatSearchMessages** | Main container for searching messages |
-| **CometChatMessageList** | Displays filtered messages based on search results |
-| **CometChatMessageComposer** | Supports navigation after selecting a search result |
-| **CometChatMessageHeader** | Displays search context and navigation controls |
+| Component / Class | Role |
+|:---|:---|
+| `CometChatSearchMessages` | Main container for searching messages |
+| `CometChatMessageList` | Displays filtered messages based on search results |
+| `CometChatMessageComposer` | Supports navigation after selecting a search result |
+| `CometChatMessageHeader` | Displays search context and navigation controls |
---
## Integration Steps
-### 1. Search State Management Setup
+### 1. Search State Management
+
+Track the current search keyword and the message ID to scroll to. When a new search is triggered, reset `goToMessageId` so the list doesn't jump to a stale result.
_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
-```tsx
+```tsx lines
const [searchKeyword, setSearchKeyword] = useState("");
const [goToMessageId, setGoToMessageId] = useState(undefined);
@@ -55,11 +54,13 @@ const onSearch = (keyword: string) => {
---
-### 2. Search Input and Trigger
+### 2. Search Input
+
+Render the search component and wire its `onSearch` callback to update the keyword state. The placeholder text is localized.
_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
-```tsx
+```tsx lines
onSearch(keyword)}
placeholder={getLocalizedString("search_messages_placeholder")}
@@ -70,9 +71,11 @@ _File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/bl
### 3. Search Result Integration
+Pass `searchKeyword` and `goToMessageId` to `CometChatMessageList`. The list filters messages matching the keyword and highlights them. When `goToMessageId` is set, the list scrolls to that message.
+
_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
-```tsx
+```tsx lines
{
setGoToMessageId(messageId);
};
@@ -97,90 +102,31 @@ Attach `handleResultClick` to your message search result selection logic.
---
-## Implementation Flow
-
-- **Fetch Search Input**
-
-```tsx
-
+
+ The search component reference.
+
+
+ Render real-time message threads.
+
+
+ Browse all feature and formatter guides.
+
+
+ Full working sample application on GitHub.
+
+
\ No newline at end of file
diff --git a/ui-kit/react/guide-threaded-messages.mdx b/ui-kit/react/guide-threaded-messages.mdx
index 50c06c07f..da08eeb2e 100644
--- a/ui-kit/react/guide-threaded-messages.mdx
+++ b/ui-kit/react/guide-threaded-messages.mdx
@@ -1,49 +1,49 @@
---
title: "Threaded Messages"
sidebarTitle: "Threaded Messages"
+description: "Implement threaded message replies with parent context, reply list, and focused thread composer in CometChat React UI Kit."
---
-Enable organized threaded conversations within group chats using CometChat's React UI Kit.
+
-## Overview
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` |
+| Key components | `CometChatThreadedMessages`, `CometChatThreadHeader`, `CometChatMessageList`, `CometChatMessageComposer` |
+| Init | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` |
+| Entry point | `CometChatMessages.onThreadRepliesClick` opens thread view from group messages |
+| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) |
+| Related | [All Guides](/ui-kit/react/guide-overview) |
-Threaded messages in group chat allow users to create organized sub-conversations by replying to specific messages.
+
-- Threaded messages in group chat allow users to create organized sub-conversations by replying to specific messages.
-- Improves group conversation organization, reduces chat clutter, and enables focused discussions.
-- Group chats display threaded conversations with clear parent-child relationships.
+Threaded messages let users create sub-conversations by replying to specific messages in group chats. This reduces clutter and keeps discussions focused.
----
-
-## Prerequisites
-
-- React v18.2.0+
-- CometChat React UI Kit v6.1.0+
-- CometChat Chat SDK JavaScript v4.0.13+
-- CometChat credentials configured (App ID, Auth Key, Region)
-- Group chat functionality implemented
+Before starting, complete the [Getting Started](/ui-kit/react/react-js-integration) guide for your framework.
---
## Components
-| Component / Class | Role |
-|:----------------------------------|:------------------------------------------------|
-| **CometChatThreadedMessages** | Main container for threaded messages |
-| **CometChatThreadHeader** | Displays parent message and controls |
-| **CometChatMessageList** | Shows messages filtered by `parentMessageId` |
-| **CometChatMessageComposer** | Input for composing threaded replies |
-| **CometChatMessages.onThreadRepliesClick** | Opens thread view from group messages |
+| Component / Class | Role |
+|:---|:---|
+| `CometChatThreadedMessages` | Main container for threaded messages |
+| `CometChatThreadHeader` | Displays parent message and controls |
+| `CometChatMessageList` | Shows messages filtered by `parentMessageId` |
+| `CometChatMessageComposer` | Input for composing threaded replies |
+| `CometChatMessages.onThreadRepliesClick` | Opens thread view from group messages |
---
## Integration Steps
-### 1. Thread State Management Setup
+### 1. Thread State Management
+
+Store the parent message that the user clicked "Reply in Thread" on. When set, update the app state to show the threaded messages side panel.
_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
-```tsx
+```tsx lines
const [threadedMessage, setThreadedMsg] = useState();
const updateThreadedMessage = (message: CometChat.BaseMessage) => {
@@ -57,9 +57,11 @@ const updateThreadedMessage = (message: CometChat.BaseMessage) => {
### 2. Thread Trigger in Group Messages
+Wire the `onThreadRepliesClick` callback on `CometChatMessages`. When a user clicks the thread reply icon on any message, this fires with the parent message object.
+
_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
-```tsx
+```tsx lines
{
---
-## Context Notes
-
-- Works specifically in group chats
-- Member roles affect permissions
-- Mobile responsive
-- Scales well for large groups
-
----
-
## Feature Matrix
-| Feature | Component / Method | File |
-|:--------------------|:------------------------|:---------------------------|
-| Show thread option | `onThreadRepliesClick` | [CometChatMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatMessages/CometChatMessages.tsx) |
-| Display thread msgs | `ThreadedMessageList` | [CometChatThreadedMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatDetails/CometChatThreadedMessages.tsx) |
-| Compose reply | `MessageComposer` | [CometChatThreadedMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatDetails/CometChatThreadedMessages.tsx) |
-| Thread header | `ThreadHeader` | [CometChatThreadedMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatDetails/CometChatThreadedMessages.tsx) |
-| Search in threads | `TextHighlightFormatter`| [CometChatThreadedMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatDetails/CometChatThreadedMessages.tsx) |
-| Navigate to message | `goToMessageId` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
-| Thread state | `updateThreadedMessage()` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
-| App context | `appReducer.ts` | [appReducer.ts](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/context/appReducer.ts) |
+| Feature | Component / Method | File |
+|:---|:---|:---|
+| Show thread option | `onThreadRepliesClick` | [CometChatMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatMessages/CometChatMessages.tsx) |
+| Display thread msgs | `ThreadedMessageList` | [CometChatThreadedMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatDetails/CometChatThreadedMessages.tsx) |
+| Compose reply | `MessageComposer` | [CometChatThreadedMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatDetails/CometChatThreadedMessages.tsx) |
+| Thread header | `ThreadHeader` | [CometChatThreadedMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatDetails/CometChatThreadedMessages.tsx) |
+| Search in threads | `TextHighlightFormatter` | [CometChatThreadedMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatDetails/CometChatThreadedMessages.tsx) |
+| Navigate to message | `goToMessageId` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
+| Thread state | `updateThreadedMessage()` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
+| App context | `appReducer.ts` | [appReducer.ts](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/context/appReducer.ts) |
---
## Next Steps
-- Explore [CometChat React UI Kit Docs](https://www.cometchat.com/docs/ui-kit/react/overview)
-- Check the [Sample App Repo](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app)
+
+
+ Render real-time message threads.
+
+
+ Customize the thread header component.
+
+
+ Browse all feature and formatter guides.
+
+
+ Full working sample application on GitHub.
+
+
diff --git a/ui-kit/react/incoming-call.mdx b/ui-kit/react/incoming-call.mdx
index e55f9f37f..6c84390cc 100644
--- a/ui-kit/react/incoming-call.mdx
+++ b/ui-kit/react/incoming-call.mdx
@@ -1,947 +1,500 @@
---
title: "Incoming Call"
+description: "Visual notification for incoming voice/video calls with accept and decline controls."
---
+
+```json
+{
+ "component": "CometChatIncomingCall",
+ "package": "@cometchat/chat-uikit-react",
+ "import": "import { CometChatIncomingCall } from \"@cometchat/chat-uikit-react\";",
+ "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";",
+ "description": "Visual notification for incoming voice/video calls with accept and decline controls.",
+ "cssRootClass": ".cometchat-incoming-call",
+ "props": {
+ "data": {
+ "call": { "type": "any", "default": "auto-detected" },
+ "callSettingsBuilder": { "type": "(call: CometChat.Call) => CallSettingsBuilder", "default": "undefined" }
+ },
+ "callbacks": {
+ "onAccept": "(call: CometChat.Call) => void",
+ "onDecline": "(call: CometChat.Call) => void",
+ "onError": "((error: CometChat.CometChatException) => void) | null"
+ },
+ "sound": {
+ "disableSoundForCalls": { "type": "boolean", "default": false },
+ "customSoundForCalls": { "type": "string", "default": "undefined" }
+ },
+ "viewSlots": {
+ "itemView": "(call: CometChat.Call) => JSX.Element",
+ "leadingView": "(call: CometChat.Call) => JSX.Element",
+ "titleView": "(call: CometChat.Call) => JSX.Element",
+ "subtitleView": "(call: CometChat.Call) => JSX.Element",
+ "trailingView": "(call: CometChat.Call) => JSX.Element"
+ }
+ },
+ "events": [
+ { "name": "CometChatCallEvents.ccCallRejected", "payload": "CometChat.Call" },
+ { "name": "CometChatCallEvents.ccCallAccepted", "payload": "CometChat.Call" },
+ { "name": "CometChatCallEvents.ccCallEnded", "payload": "CometChat.Call" }
+ ]
+}
+```
+
-## Overview
-
-The `Incoming call` is a Component that serves as a visual representation when the user receives an incoming call, such as a voice call or video call, providing options to answer or decline the call.
-
-
- 
-
-
-The `Incoming Call` is comprised of the following base components:
-
-| Components | Description |
-| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
-| cometchat-list-item | This component’s view consists of avatar, status indicator , title, and subtitle. The fields are then mapped with the SDK’s user, group class. |
-| cometchat-button | This component represents a button with optional icon and text. |
-| cometchat-avatar | This component component displays an image or user's avatar with fallback to the first two letters of the username. |
-
-## Usage
+## Where It Fits
-### Integration
+`CometChatIncomingCall` is an overlay component that auto-detects incoming calls and renders a notification with accept/decline buttons. Place it at the app root level so it appears above all other content.
-
-
-```tsx
+```tsx lines
import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const IncomingCallsDemo = () => {
- return
-
-
-```tsx
-import { IncomingCallsDemo } from "./IncomingCallsDemo";
-
-export default function App() {
+function App() {
return (
-
+
+```css lines
+.cometchat-message-composer .message-composer__header-view {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ width: 100%;
+}
- function handleTextChange(text: string) {
- console.log("onTextChange", text);
- }
+.cometchat-message-composer__header {
+ background: #dcd7f6;
+ border-radius: var(--cometchat-radius-max, 1000px);
+ padding: var(--cometchat-padding-2) var(--cometchat-padding-5);
+}
- return chatUser ? (
-
-
-##### 4. Custom Mentions Request Builders
+---
-You can customize how mentioned users and group members are fetched by providing custom request builders.
+## Common Patterns
-
-
-```tsx
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
+### Thread composer
+
+```tsx lines
import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
-export function MessageComposerDemo() {
- const [chatUser, setChatUser] = React.useState();
- const [chatGroup, setChatGroup] = React.useState();
-
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
- }, []);
+function ThreadComposer() {
+ return (
+
+### Enter key adds new line
-
+```tsx lines
+import { CometChatMessageComposer, EnterKeyBehavior } from "@cometchat/chat-uikit-react";
-***
+function NewLineComposer() {
+ return (
+
-
-```js
-import { CometChatMessageEvents } from "@cometchat/chat-uikit-react";
+| Target | Selector |
+| --- | --- |
+| Root | `.cometchat-message-composer` |
+| Send button | `.cometchat-message-composer__send-button` |
+| Send button active | `.cometchat-message-composer__send-button-active` |
+| Sticker button popover | `.cometchat-message-composer__auxilary-button-view-sticker-button .cometchat-popover__content` |
+| Emoji keyboard popover | `.cometchat-message-composer__emoji-keyboard-button .cometchat-popover__content` |
+| Attachment popover | `.cometchat-message-composer__secondary-button-view-attachment-button .cometchat-popover__content` |
+| Voice recording popover | `.cometchat-message-composer__voice-recording-button .cometchat-popover__content` |
+| Header area | `.cometchat-message-composer__header` |
-const ccMessageEdited = CometChatMessageEvents.ccMessageEdited.subscribe(() => {
- // Your Code
-});
+### Customization Matrix
-const ccReplyToMessage = CometChatMessageEvents.ccReplyToMessage.subscribe(() => {
- // Your Code
-});
+| What to change | Where | Property/API | Example |
+| --- | --- | --- | --- |
+| Override send behavior | Component props | `onSendButtonClick` | `onSendButtonClick={(msg) => customSend(msg)}` |
+| Track text input | Component props | `onTextChange` | `onTextChange={(text) => track(text)}` |
+| Toggle visibility | Component props | `hide` boolean props | `hideAttachmentButton={true}` |
+| Custom attachments | Component props | `attachmentOptions` | `attachmentOptions={[new CometChatMessageComposerAction(...)]}` |
+| Replace UI sections | Component props | View slot props | `sendButtonView={
+## Accessibility
-
+The text input is auto-focused and supports standard keyboard shortcuts. The send button activates on Enter (configurable via `enterKeyBehavior`). Attachment, emoji, sticker, and voice recording buttons are keyboard-focusable and activate on Enter/Space. The mention suggestions list is keyboard-navigable with arrow keys.
-***
+---
-Removing `CometChatMessageEvents` Listener's
+---
-
-
-```js
-ccMessageEdited?.unsubscribe();
-ccReplyToMessage?.unsubscribe();
-ccMessageSent?.unsubscribe();
-```
+## Props
-
+All props are optional. Sorted alphabetically.
-
+### attachmentOptions
-***
+Custom attachment options list.
-## Customization
+| | |
+| --- | --- |
+| Type | `CometChatMessageComposerAction[]` |
+| Default | `undefined` |
-To fit your app's design requirements, you can customize the appearance of the MessageComposer component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.
+---
-### Style
+### auxiliaryButtonView
-To modify the styling, you can customise the css of MessageComposer Component.
+Custom JSX replacing the sticker and AI button area.
-**Example**
+| | |
+| --- | --- |
+| Type | `JSX.Element` |
+| Default | Built-in sticker/AI buttons |
-
- 
-
+---
-
-
-```tsx
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
+### customSoundForMessage
-
+| | |
+| --- | --- |
+| Type | `string` |
+| Default | `undefined` |
-
-```css
-.cometchat-message-composer .cometchat-message-composer__input {
- font-family: "SF Pro";
-}
+---
-.cometchat-message-composer .cometchat-button .cometchat-button__icon {
- background: #f19fa1;
-}
+### disableMentionAll
-.cometchat-message-composer .cometchat-message-composer__send-button {
- background: #e5484d;
+Controls whether group mentions like @all appear in suggestions.
+
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
+
+---
+
+### disableMentions
+
+Disables the mentions functionality.
+
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
+
+---
+
+### disableSoundForMessage
+
+Disables sound for outgoing messages.
+
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
+
+---
+
+### disableTypingEvents
+
+Disables the typing indicator for this composer.
+
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
+
+---
+
+### enterKeyBehavior
+
+Determines Enter key behavior.
+
+| | |
+| --- | --- |
+| Type | `EnterKeyBehavior` |
+| Default | `EnterKeyBehavior.SendMessage` |
+
+```ts lines
+enum EnterKeyBehavior {
+ SendMessage = "sendMessage",
+ NewLine = "newLine",
+ None = "none",
}
```
-
+---
-
+### group
-***
+The recipient group for the composer.
-### Functionality
+| | |
+| --- | --- |
+| Type | `CometChat.Group` |
+| Default | `undefined` |
-These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements.
+---
-
-
-```tsx
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
+### headerView
-
+| | |
+| --- | --- |
+| Type | `JSX.Element` |
+| Default | `undefined` |
-
+---
-Below is a list of customizations along with corresponding code snippets
-
-| Property | Description | Code |
-| --------------------------------- | --------------------------------------------------------------------------------------- | ------------------------------------------------- |
-| **Initial Composer Text** | The initial text pre-filled in the message input when the component mounts. | `initialComposerText="Hello"` |
-| **Disable Typing Events** | Disables the typing indicator for the current message composer. | `disableTypingEvents={true}` |
-| **Disable Mentions** | Disables the mentions functionality in the message composer. | `disableMentions={true}` |
-| **Disable Mention All** | Controls whether group mentions like @all appear in suggestions. | `disableMentionAll={true}` |
-| **Mention All Label** | Allows setting a custom alias label for group mentions (@channel, @everyone, etc.). | `mentionAllLabel="all"` |
-| **Mentions Users Request Builder** | Provides a custom UsersRequestBuilder to control how the mentioned users list is fetched. | `mentionsUsersRequestBuilder={usersRequestBuilder}` |
-| **Mentions Group Members Request Builder** | Provides a custom GroupMembersRequestBuilder to customize how mentioned group members are retrieved. | `mentionsGroupMembersRequestBuilder={groupMembersRequestBuilder}` |
-| **Hide Image Attachment Option** | Hides the image attachment option in the message composer. | `hideImageAttachmentOption={true}` |
-| **Hide Video Attachment Option** | Hides the video attachment option in the message composer. | `hideVideoAttachmentOption={true}` |
-| **Hide Audio Attachment Option** | Hides the audio attachment option in the message composer. | `hideAudioAttachmentOption={true}` |
-| **Hide File Attachment Option** | Hides the file attachment option in the message composer. | `hideFileAttachmentOption={true}` |
-| **Hide Polls Option** | Hides the polls option in the message composer. | `hidePollsOption={true}` |
-| **Hide Collaborative Document** | Hides the collaborative document option in the message composer. | `hideCollaborativeDocumentOption={true}` |
-| **Hide Collaborative Whiteboard** | Hides the collaborative whiteboard option in the message composer. | `hideCollaborativeWhiteboardOption={true}` |
-| **Hide Attachment Button** | Hides the attachment button in the message composer. | `hideAttachmentButton={true}` |
-| **Hide Voice Recording Button** | Hides the voice recording button in the message composer. | `hideVoiceRecordingButton={true}` |
-| **Hide Emoji Keyboard Button** | Hides the emoji keyboard button in the message composer. | `hideEmojiKeyboardButton={true}` |
-| **Hide Stickers Button** | Hides the stickers button in the message composer. | `hideStickersButton={true}` |
-| **Hide Send Button** | Hides the send button in the message composer. | `hideSendButton={true}` |
-| **Show Scrollbar** | Controls the visibility of the scrollbar in the composer. | `showScrollbar={true}` |
-| **User** | Specifies the recipient of the message (user object). | `user={chatUser}` |
-| **Group** | Specifies the group to send messages to. Used if the `user` prop is not provided. | `group={chatGroup}` |
-| **Parent Message ID** | Specifies the ID of the parent message for threading or replying to a specific message. | `parentMessageId={12345}` |
-| **Enter Key Behavior** | Determines the behavior of the Enter key (e.g., send message or add a new line). | `enterKeyBehavior={EnterKeyBehavior.SendMessage}` |
-| **Disable Sound for Message** | Disables sound for incoming messages. | `disableSoundForMessage={true}` |
-| **Custom Sound for Message** | Specifies a custom audio sound for incoming messages. | `customSoundForMessage="sound.mp3"` |
-
-***
-
-### Advanced
-
-For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component.
-
-***
-
-#### AttachmentOptions
-
-By using `attachmentOptions`, you can set a list of custom `MessageComposerActions` for the MessageComposer Component. This will override the existing list of `MessageComposerActions`.
-
-Shown below is the default chat interface.
+### hideAttachmentButton
-
- 
-
+Hides the entire attachment button.
-The customized chat interface is displayed below.
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-
- 
-
+---
-Use the following code to achieve the customization shown above.
+### hideAudioAttachmentOption
-
-
-```tsx
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import {
- CometChatMessageComposer,
- CometChatMessageComposerAction,
-} from "@cometchat/chat-uikit-react";
+Hides the audio attachment option.
-function getAttachments() {
- return [
- new CometChatMessageComposerAction({
- id: "custom1",
- title: "Custom Option 1",
- iconURL: "Icon URL",
- }),
- new CometChatMessageComposerAction({
- id: "custom2",
- title: "Custom Option 2",
- iconURL: "Icon URL",
- }),
- new CometChatMessageComposerAction({
- id: "custom3",
- title: "Custom Option 3",
- iconURL: "Icon URL",
- }),
- new CometChatMessageComposerAction({
- id: "custom4",
- title: "Custom Option 4",
- iconURL: "Icon URL",
- }),
- ];
-}
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-
+### hideCollaborativeDocumentOption
-
-```css
-.cometchat-message-composer__secondary-button-view-attachment-button
- .cometchat-action-sheet {
- border: none;
- border-radius: inherit;
- background: transparent;
- box-shadow: none;
- width: 100%;
-}
+Hides the collaborative document option.
-.cometchat-message-composer__secondary-button-view-attachment-button
- .cometchat-popover__content
- > .cometchat {
- border-radius: inherit;
-}
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-.cometchat-message-composer__secondary-button-view-attachment-button
- .cometchat-popover__content {
- height: 240px;
-}
+---
-.cometchat-message-composer__secondary-button-view-attachment-button
- .cometchat-action-sheet__item-icon {
- background: #141414;
-}
-```
+### hideCollaborativeWhiteboardOption
-
+Hides the collaborative whiteboard option.
-
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-***
+---
-#### AuxiliaryButtonView
+### hideEmojiKeyboardButton
-You can insert a custom view into the MessageComposer component to add additional functionality using the following method.
+Hides the emoji keyboard button.
-Please note that the MessageComposer Component utilizes the AuxiliaryButton to provide sticker and AI functionality. Overriding the AuxiliaryButton will subsequently replace the sticker functionality.
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-Shown below is the default chat interface.
+---
-
- 
-
+### hideFileAttachmentOption
-The customized chat interface is displayed below.
+Hides the file attachment option.
-
- 
-
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-Use the following code to achieve the customization shown above.
+---
-
-
-```tsx
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import {
- CometChatMessageComposer,
- IconStyle,
- CometChatButton,
-} from "@cometchat/chat-uikit-react";
+### hideImageAttachmentOption
-const auxiliaryButtonView = (
- {
- // logic here
- }}
- />
-);
-
-
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-
+---
-***
+### hidePollsOption
-#### SendButtonView
+Hides the polls option.
-You can set a custom view in place of the already existing send button view.
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-Shown below is the default chat interface.
+---
-
- 
-
+### hideSendButton
-The customized chat interface is displayed below.
+Hides the send button.
-
- 
-
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-Use the following code to achieve the customization shown above.
+---
-
-
-```tsx
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import {
- CometChatMessageComposer,
- CometChatButton,
-} from "@cometchat/chat-uikit-react";
+### hideStickersButton
-const sendButtonView = (
- {
- // logic here
- }}
- />
-);
+Hides the stickers button.
-
+---
-
-```css
-.cometchat-message-composer
- div:not([class])
- .message-composer__send-button
- .cometchat-button {
- background: #edeafa;
-}
+### hideVideoAttachmentOption
-.cometchat-message-composer
- div:not([class])
- .message-composer__send-button
- .cometchat-button__icon {
- background: #6852d6;
-}
-```
+Hides the video attachment option.
-
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-
+---
-***
+### hideVoiceRecordingButton
-#### HeaderView
+Hides the voice recording button.
-You can set custom headerView to the MessageComposer component using the following method.
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-Shown below is the default chat interface.
+---
-
-
-
+### initialComposerText
-The customized chat interface is displayed below.
+Pre-fills the text input when the component mounts.
-
- 
-
+| | |
+| --- | --- |
+| Type | `string` |
+| Default | `""` |
-Use the following code to achieve the customization shown above.
+---
-
-
-```tsx
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
+### mentionAllLabel
-const getHeaderView = () => {
- return (
-
+---
-
-```css
-.cometchat-message-composer .message-composer__header-view {
- display: flex;
- align-items: center;
- align-content: center;
- gap: 8px var(--cometchat-padding-2, 8px);
- align-self: stretch;
- flex-wrap: wrap;
- width: 100%;
-}
+### mentionsGroupMembersRequestBuilder
-.cometchat-message-composer__header {
- background: #dcd7f6;
- border-radius: var(--cometchat-radius-ax, 1000px);
- padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-5, 20px);
-}
+Custom builder to control how mentioned group members are fetched.
-.cometchat-message-composer
- .message-composer__header-view
- .message-composer__header-view-text {
- overflow: hidden;
- color: var(--cometchat-text-color-primary, #141414);
- text-overflow: ellipsis;
- font: var(--cometchat-font-body-regular);
-}
+| | |
+| --- | --- |
+| Type | `CometChat.GroupMembersRequestBuilder` |
+| Default | `undefined` |
-.cometchat-message-composer
- .message-composer__header-view
- .message-composer__header-view-icon {
- display: flex;
- width: 24px;
- height: 24px;
- justify-content: center;
- align-items: center;
- background: var(--cometchat-primary-color);
- -webkit-mask: url("icon url") center center no-repeat;
- -webkit-mask-size: contain;
- mask: url("icon url") center center no-repeat;
- mask-size: contain;
-}
-```
+---
-
+### mentionsUsersRequestBuilder
-
+Custom builder to control how mentioned users are fetched.
-***
+| | |
+| --- | --- |
+| Type | `CometChat.UsersRequestBuilder` |
+| Default | `undefined` |
-#### TextFormatters
+---
-Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source. To configure the existing Mentions look and feel check out [CometChatMentionsFormatter](/ui-kit/react/mentions-formatter-guide)
+### onError
-
-
-```ts
-import { CometChatTextFormatter } from "@cometchat/chat-uikit-react";
-import DialogHelper from "./Dialog";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
+Callback fired when the component encounters an error.
-class ShortcutFormatter extends CometChatTextFormatter {
- private shortcuts: { [key: string]: string } = {};
- private dialogIsOpen: boolean = false;
- private dialogHelper = new DialogHelper();
- private currentShortcut: string | null = null; // Track the currently open shortcut
-
- constructor() {
- super();
- this.setTrackingCharacter("!");
- CometChat.callExtension("message-shortcuts", "GET", "v1/fetch", undefined)
- .then((data: any) => {
- if (data && data.shortcuts) {
- this.shortcuts = data.shortcuts;
- }
- })
- .catch((error) => console.log("error fetching shortcuts", error));
- }
+| | |
+| --- | --- |
+| Type | `((error: CometChat.CometChatException) => void) \| null` |
+| Default | `undefined` |
- onKeyDown(event: KeyboardEvent) {
- const caretPosition =
- this.currentCaretPosition instanceof Selection
- ? this.currentCaretPosition.anchorOffset
- : 0;
- const textBeforeCaret = this.getTextBeforeCaret(caretPosition);
-
- const match = textBeforeCaret.match(/!([a-zA-Z]+)$/);
- if (match) {
- const shortcut = match[0];
- const replacement = this.shortcuts[shortcut];
- if (replacement) {
- // Close the currently open dialog, if any
- if (this.dialogIsOpen && this.currentShortcut !== shortcut) {
- this.closeDialog();
- }
- this.openDialog(replacement, shortcut);
- }
- }
- }
+---
- getCaretPosition() {
- if (!this.currentCaretPosition?.rangeCount) return { x: 0, y: 0 };
- const range = this.currentCaretPosition?.getRangeAt(0);
- const rect = range.getBoundingClientRect();
- return {
- x: rect.left,
- y: rect.top,
- };
- }
+### onSendButtonClick
- openDialog(buttonText: string, shortcut: string) {
- this.dialogHelper.createDialog(
- () => this.handleButtonClick(buttonText),
- buttonText
- );
- this.dialogIsOpen = true;
- this.currentShortcut = shortcut;
- }
+Callback fired when the send button is clicked. Overrides default send behavior.
- closeDialog() {
- this.dialogHelper.closeDialog(); // Use DialogHelper to close the dialog
- this.dialogIsOpen = false;
- this.currentShortcut = null;
- }
+| | |
+| --- | --- |
+| Type | `(message: CometChat.BaseMessage, previewMessageMode?: PreviewMessageMode) => void` |
+| Default | `undefined` |
- handleButtonClick = (buttonText: string) => {
- if (this.currentCaretPosition && this.currentRange) {
- // Inserting the replacement text corresponding to the shortcut
- const shortcut = Object.keys(this.shortcuts).find(
- (key) => this.shortcuts[key] === buttonText
- );
- if (shortcut) {
- const replacement = this.shortcuts[shortcut];
- this.addAtCaretPosition(
- replacement,
- this.currentCaretPosition,
- this.currentRange
- );
- }
- }
- if (this.dialogIsOpen) {
- this.closeDialog();
- }
- };
+---
- getFormattedText(text: string): string {
- return text;
- }
+### onTextChange
- private getTextBeforeCaret(caretPosition: number): string {
- if (
- this.currentRange &&
- this.currentRange.startContainer &&
- typeof this.currentRange.startContainer.textContent === "string"
- ) {
- const textContent = this.currentRange.startContainer.textContent;
- if (textContent.length >= caretPosition) {
- return textContent.substring(0, caretPosition);
- }
- }
- return "";
- }
-}
+Callback fired as the user types.
-export default ShortcutFormatter;
-```
+| | |
+| --- | --- |
+| Type | `(text: string) => void` |
+| Default | `undefined` |
-
+---
-
-```tsx
-import React from "react";
-import ReactDOM from "react-dom";
+### parentMessageId
-interface DialogProps {
- onClick: () => void;
- buttonText: string;
-}
+Targets a thread; messages sent as replies to this parent.
-const Dialog: React.FC = ({ onClick, buttonText }) => {
- return (
-
+| | |
+| --- | --- |
+| Type | `string` |
+| Default | `""` |
-
-```tsx
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
-import ShortcutFormatter from "./ShortCutFormatter";
-
-export function MessageComposerDemo() {
- const [chatUser, setChatUser] = React.useState();
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
+---
- return chatUser ? (
-
+Custom JSX replacing the send button.
-
+| | |
+| --- | --- |
+| Type | `JSX.Element` |
+| Default | Built-in send button |
+
+---
+
+### showScrollbar
+
+Shows the scrollbar in the composer input.
+
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
+
+---
+
+### textFormatters
+
+Custom text formatters for the composer input.
+
+| | |
+| --- | --- |
+| Type | `CometChatTextFormatter[]` |
+| Default | Default formatters from data source |
+
+See [CometChatMentionsFormatter](/ui-kit/react/mentions-formatter-guide).
+
+---
+
+### user
+
+The recipient user for the composer.
+
+| | |
+| --- | --- |
+| Type | `CometChat.User` |
+| Default | `undefined` |
+
+---
+
+## Events
+
+| Event | Payload | Fires when |
+| --- | --- | --- |
+| `CometChatMessageEvents.ccMessageSent` | `IMessages` | Message sent |
+| `CometChatMessageEvents.ccMessageEdited` | `IMessages` | Message edited |
+| `CometChatMessageEvents.ccReplyToMessage` | `IMessages` | User replies to message |
+
+---
-***
+## CSS Selectors
+
+| Target | Selector |
+| --- | --- |
+| Root | `.cometchat-message-composer` |
+| Send button | `.cometchat-message-composer__send-button` |
+| Send button active | `.cometchat-message-composer__send-button-active` |
+| Sticker popover | `.cometchat-message-composer__auxilary-button-view-sticker-button .cometchat-popover__content` |
+| Emoji keyboard popover | `.cometchat-message-composer__emoji-keyboard-button .cometchat-popover__content` |
+| Attachment popover | `.cometchat-message-composer__secondary-button-view-attachment-button .cometchat-popover__content` |
+| Voice recording popover | `.cometchat-message-composer__voice-recording-button .cometchat-popover__content` |
+| Header area | `.cometchat-message-composer__header` |
diff --git a/ui-kit/react/message-header.mdx b/ui-kit/react/message-header.mdx
index 28d7d0c85..222147dc9 100644
--- a/ui-kit/react/message-header.mdx
+++ b/ui-kit/react/message-header.mdx
@@ -1,490 +1,409 @@
---
title: "Message Header"
+description: "Toolbar displaying user/group avatar, name, status, typing indicator, back button, and call controls for a single conversation."
---
+
+```json
+{
+ "component": "CometChatMessageHeader",
+ "package": "@cometchat/chat-uikit-react",
+ "import": "import { CometChatMessageHeader } from \"@cometchat/chat-uikit-react\";",
+ "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";",
+ "description": "Toolbar displaying user/group avatar, name, status, typing indicator, back button, and call controls for a single conversation.",
+ "cssRootClass": ".cometchat-message-header",
+ "note": "View slots are JSX.Element (not functions) — unlike list components.",
+ "props": {
+ "data": {
+ "user": { "type": "CometChat.User", "default": "undefined" },
+ "group": { "type": "CometChat.Group", "default": "undefined" },
+ "lastActiveAtDateTimeFormat": { "type": "CalendarObject", "default": "component default" },
+ "summaryGenerationMessageCount": { "type": "number", "default": 1000 }
+ },
+ "callbacks": {
+ "onBack": "() => void",
+ "onError": "((error: CometChat.CometChatException) => void) | null",
+ "onItemClick": "() => void",
+ "onSearchOptionClicked": "() => void"
+ },
+ "visibility": {
+ "showBackButton": { "type": "boolean", "default": false },
+ "hideVideoCallButton": { "type": "boolean", "default": false },
+ "hideVoiceCallButton": { "type": "boolean", "default": false },
+ "hideUserStatus": { "type": "boolean", "default": false },
+ "showConversationSummaryButton": { "type": "boolean", "default": false },
+ "showSearchOption": { "type": "boolean", "default": false },
+ "enableAutoSummaryGeneration": { "type": "boolean", "default": false }
+ },
+ "viewSlots": {
+ "itemView": "JSX.Element",
+ "leadingView": "JSX.Element",
+ "titleView": "JSX.Element",
+ "subtitleView": "JSX.Element",
+ "trailingView": "JSX.Element",
+ "auxiliaryButtonView": "JSX.Element"
+ }
+ },
+ "sdkListeners": [
+ "onUserOnline",
+ "onUserOffline",
+ "onTypingStarted",
+ "onTypingEnded",
+ "onGroupMemberJoined",
+ "onGroupMemberLeft",
+ "onGroupMemberKicked",
+ "onGroupMemberBanned",
+ "onMemberAddedToGroup"
+ ],
+ "types": {
+ "CalendarObject": {
+ "today": "string | undefined",
+ "yesterday": "string | undefined",
+ "lastWeek": "string | undefined",
+ "otherDays": "string | undefined",
+ "relativeTime": {
+ "minute": "string | undefined",
+ "minutes": "string | undefined",
+ "hour": "string | undefined",
+ "hours": "string | undefined"
+ }
+ }
+ }
+}
+```
+
-## Overview
-
-`MessageHeader` is a Component that showcases the [User](/sdk/javascript/users-overview) or [Group](/sdk/javascript/groups-overview) details in the toolbar. Furthermore, it also presents a typing indicator and a back navigation button for ease of use.
-
-
- 
-
-
-The `MessageHeader` is comprised of the following components:
-
-| Component | Description |
-| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
-| CometChatListItem | This component’s view consists of avatar, status indicator , title, and subtitle. The fields are then mapped with the SDK’s user, group class. |
-| Back Button | BackButton that allows users to navigate back from the current activity or screen to the previous one. |
-
-## Usage
+## Where It Fits
-### Integration
+`CometChatMessageHeader` is a toolbar component that sits above `CometChatMessageList` and `CometChatMessageComposer`. It receives a `user` or `group` prop and displays the conversation's avatar, name, online status, and typing indicator. Call buttons are rendered automatically when the calling extension is enabled.
-
-
-```tsx
-import React from "react";
+```tsx lines
+import { useEffect, useState } from "react";
+import {
+ CometChatMessageHeader,
+ CometChatMessageList,
+ CometChatMessageComposer,
+} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
-
-export function MessageHeaderDemo() {
- const [chatUser, setChatUser] = React.useState();
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
+import "@cometchat/chat-uikit-react/css-variables.css";
- return chatUser ? (
- ();
-
+ useEffect(() => {
+ CometChat.getUser("UID").then(setUser);
+ }, []);
-
-```tsx
-import { MessageHeaderDemo } from "./MessageHeaderDemo";
+ if (!user) return null;
-export default function App() {
return (
-
-
-
-```css
+
+```css lines
.cometchat-message-header .message-header__title-view {
display: flex;
gap: 4px;
width: 100%;
}
-.cometchat-message-header
- .message-header__title-view
- .message-header__title-view-name {
+.message-header__title-view-name {
color: #141414;
font: 500 16px/19.2px Roboto;
- text-align: left;
}
-.cometchat-message-header
- .message-header__title-view
- .message-header__title-view-status {
+
+.message-header__title-view-status {
color: #6852d6;
font: 400 16px/19.2px Roboto;
- text-align: left;
}
```
-
-
-***
-
-#### SubtitleView
+### subtitleView
-The customized chat interface is displayed below.
+Replace the subtitle text (status / typing indicator area).
-Use the following code to achieve the customization shown above.
-
-
-
-```ts
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
+```tsx lines
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
-// Custom subtitle view component
-function CustomSubtitleView() {
- return <>{group?.getMembersCount() + " • " + group?.getDescription()};
+function CustomSubtitleHeader({ group }: { group: CometChat.Group }) {
+ return (
+ {group.getMembersCount() + " • " + group.getDescription()}
+ }
+ />
+ );
}
-
-
-
-
-
-***
+### leadingView
-#### LeadingView
-
-The customized chat interface is displayed below.
+Replace the avatar / left section.
-Use the following code to achieve the customization shown above.
-
-```ts
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
+```tsx lines
import {
CometChatMessageHeader,
CometChatAvatar,
} from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
-// Custom title view component
-function CustomLeadingView() {
+function CustomLeadingHeader({ user }: { user: CometChat.User }) {
return (
-
+
+ }
+ />
);
}
-
-New Chat
-
- {/* Content */}
handleTabClick('user')}> {getLocalizedString("user_title")}
- handleTabClick('group')}> {getLocalizedString("group_title")}
+ handleTabClick('user')}> {getLocalizedString("user_title")}
+ handleTabClick('group')}> {getLocalizedString("group_title")}
-
-
-The `Incoming Call` is comprised of the following base components:
-
-| Components | Description |
-| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
-| cometchat-list-item | This component’s view consists of avatar, status indicator , title, and subtitle. The fields are then mapped with the SDK’s user, group class. |
-| cometchat-button | This component represents a button with optional icon and text. |
-| cometchat-avatar | This component component displays an image or user's avatar with fallback to the first two letters of the username. |
-
-## Usage
+## Where It Fits
-### Integration
+`CometChatIncomingCall` is an overlay component that auto-detects incoming calls and renders a notification with accept/decline buttons. Place it at the app root level so it appears above all other content.
-
-
-
-```ts
-import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const IncomingCallsDemo = () => {
- const handleOnAccept = () => {
- console.log("custom on accept action");
- };
-
- return
+## Minimal Render
-
-```js
+```tsx lines
import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const IncomingCallsDemo = () => {
- const handleOnAccept = () => {
- console.log("custom on accept action");
- };
+import "@cometchat/chat-uikit-react/css-variables.css";
- return
-
-
-
-##### 2. onDecline
+Root CSS class: `.cometchat-incoming-call`
-`onDecline` is triggered when you click the Decline button of the `Incoming Call` component. You can override this action using the following code snippet.
+---
-
-
-```ts
-import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
+## Actions and Events
-const IncomingCallsDemo = () => {
- const handleOnDecline = () => {
- console.log("your custom on decline action");
- };
+### Callback Props
- return
-
-
-```js
+```tsx lines
import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const IncomingCallsDemo = () => {
- const handleOnDecline = () => {
- console.log("your custom on decline action");
- };
-
- return {
+ console.log("Call accepted:", call);
+ }}
+ />
+ );
+}
```
-
-
-
-
-##### 3. onError
-
-This action doesn't change the behavior of the component but rather listens for any errors that occur in the Incoming Call component.
-
-
-
-```ts
-import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const IncomingCallsDemo = () => {
- const handleOnError = (error: CometChat.CometChatException) => {
- console.log("your custom on error action", error);
- };
-
- return
-
-
-```js
+```tsx lines
import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const IncomingCallsDemo = () => {
- const handleOnError = (error) => {
- console.log("your custom on error action", error);
- };
-
- return {
+ console.log("Call declined:", call);
+ }}
+ />
+ );
+}
```
-
-
-
+#### onError
-***
+Fires on internal errors.
-### Filters
-
-You can set `CallSettingsBuilder` in the Incoming Call Component to customise the calling experience. To know more about the filters available please refer to [CallSettingsBuilder](/sdk/javascript/direct-call#settings).
-
-
-
-```ts
+```tsx lines
import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const IncomingCallsDemo = () => {
- const getCallSettingsBuilder = (call: CometChat.Call) => {
- return new CometChatCalls.CallSettingsBuilder()
- .setIsAudioOnlyCall(
- call?.getType() === CometChatUIKitConstants.MessageTypes.audio
- ? true
- : false
- )
- .build();
- };
-
- return
-
-
-```js
-import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const IncomingCallsDemo = () => {
- const getCallSettingsBuilder = (call) => {
- return new CometChatCalls.CallSettingsBuilder()
- .setIsAudioOnlyCall(
- call?.getType() === CometChatUIKitConstants.MessageTypes.audio
- ? true
- : false
- )
- .build();
- };
-
- return
-
-
-
-### Events
-
-[Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.
-
-The list of events emitted by the Incoming Call component is as follows.
-
-| Event | Description |
-| ------------------ | ---------------------------------------------------------------------------- |
-| **ccCallRejected** | This event is triggered when the initiated call is rejected by the receiver. |
-| **ccCallAccepted** | This event is triggered when the initiated call is accepted by the receiver. |
-| **ccCallEnded** | This event is triggered when the initiated call successfully ends. |
-
-
-
-```tsx
-const ccCallRejected = CometChatCallEvents.ccCallRejected.subscribe(
- (call: CometChat.Call) => {
- //Your Code
- }
-);
-
-const ccCallAccepted = CometChatCallEvents.ccCallAccepted.subscribe(
- (call: CometChat.Call) => {
- //Your Code
- }
-);
+import { CometChat } from "@cometchat/chat-sdk-javascript";
-const ccCallEnded = CometChatCallEvents.ccCallEnded.subscribe(
- (call: CometChat.Call) => {
- //Your Code
- }
-);
+function IncomingCallWithError() {
+ return (
+ {
+ console.error("IncomingCall error:", error);
+ }}
+ />
+ );
+}
```
-
+### Global UI Events
-
+`CometChatCallEvents` emits events subscribable from anywhere in the application.
-***
+| Event | Fires when | Payload |
+| --- | --- | --- |
+| `ccCallRejected` | Incoming call is rejected | `CometChat.Call` |
+| `ccCallAccepted` | Incoming call is accepted | `CometChat.Call` |
+| `ccCallEnded` | Call ends | `CometChat.Call` |
-
-
-```tsx
-ccCallRejected?.unsubscribe();
-
-ccCallAccepted?.unsubscribe();
+```tsx lines
+import { useEffect } from "react";
+import { CometChatCallEvents } from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
-ccCallEnded?.unsubscribe();
+function useCallEvents() {
+ useEffect(() => {
+ const acceptedSub = CometChatCallEvents.ccCallAccepted.subscribe(
+ (call: CometChat.Call) => console.log("Accepted:", call)
+ );
+ const rejectedSub = CometChatCallEvents.ccCallRejected.subscribe(
+ (call: CometChat.Call) => console.log("Rejected:", call)
+ );
+
+ return () => {
+ acceptedSub?.unsubscribe();
+ rejectedSub?.unsubscribe();
+ };
+ }, []);
+}
```
-
-
-
+### SDK Events (Real-Time, Automatic)
-***
+The component listens to SDK call events internally for real-time incoming call detection. No manual attachment needed.
-## Customization
+---
-To fit your app's design requirements, you can customize the appearance of the Incoming Call component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.
+## Custom View Slots
-### Style
+View slots for `CometChatIncomingCall` are functions that receive the `CometChat.Call` object.
-Using CSS you can customize the look and feel of the component in your app like the color, size, shape, and fonts.
+| Slot | Signature | Replaces |
+| --- | --- | --- |
+| `itemView` | `(call: CometChat.Call) => JSX.Element` | Entire list item |
+| `leadingView` | `(call: CometChat.Call) => JSX.Element` | Avatar / left section |
+| `titleView` | `(call: CometChat.Call) => JSX.Element` | Name / title text |
+| `subtitleView` | `(call: CometChat.Call) => JSX.Element` | Subtitle text |
+| `trailingView` | `(call: CometChat.Call) => JSX.Element` | Right section |
-**Example:**
+### leadingView
- 
+ 
-
-
-```ts
-import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const IncomingCallsDemo = () => {
- return
-
-
-```js
-import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const IncomingCallsDemo = () => {
- return
-
-
-```css
-.cometchat-incoming-call {
- display: flex;
- width: 555px;
- padding: 30.833px;
- flex-direction: column;
- align-items: center;
- gap: 24.667px;
- flex-shrink: 0;
- border-radius: 18.5px;
- border: 1.542px solid #aa9ee8;
- background: #fff;
- box-shadow: 0px 18.5px 24.667px -6.167px rgba(16, 24, 40, 0.08), 0px 6.167px
- 9.25px -3.083px rgba(16, 24, 40, 0.03);
-}
-
-.cometchat-incoming-call .cometchat-list-item {
- width: 100%;
-}
-
-.cometchat-incoming-call .cometchat-incoming-call__button-group {
- justify-content: center;
-}
-
-.cometchat-incoming-call__button-decline,
-.cometchat-incoming-call__button-accept {
- background-color: white;
- border-radius: 12px;
- border: 1.5px solid #dcdcdc;
-}
-
-.cometchat-incoming-call__button-decline .cometchat-button:hover,
-.cometchat-incoming-call__button-decline .cometchat-button {
- background-color: white;
- background-color: white;
- border-radius: 12px;
- border: 1.5px solid #dcdcdc;
-}
-
-.cometchat-incoming-call__button-accept .cometchat-button:hover,
-.cometchat-incoming-call__button-accept .cometchat-button {
- background-color: #6852d6;
- color: white;
-}
-
-.cometchat-incoming-call__button-decline .cometchat-button__text {
- color: #f44649;
- font: 500 21px/120% roboto;
- font-style: normal;
-}
-
-.cometchat-incoming-call__button-accept .cometchat-button__text {
- color: #fff;
- font: 500 21px/120% roboto;
- font-style: normal;
-}
-
-.cometchat-incoming-call__button-decline .cometchat .cometchat-button::before,
-.cometchat-incoming-call__button-accept .cometchat .cometchat-button::before {
- content: url("../assets/call-decline.svg");
- width: 37px;
- height: 37px;
- flex-shrink: 0;
-}
-
-.cometchat-incoming-call__button-accept .cometchat .cometchat-button::before {
- content: url("../assets/call-accept.svg");
-}
-
-.cometchat-incoming-call__avatar,
-.cometchat-incoming-call__avatar .cometchat-avatar {
- display: flex;
- width: 123.333px;
- height: 123.333px;
- justify-content: center;
- align-items: center;
- border-radius: 24.667px;
- background: #aa9ee8;
-}
-
-.cometchat-incoming-call__avatar .cometchat-avatar__image {
- border-radius: 24.667px;
-}
-
-.cometchat-incoming-call__avatar .cometchat-avatar__text {
- color: #fff;
- text-align: center;
- font: 500 21px/120% roboto;
- font-style: normal;
-}
-
-.cometchat-incoming-call .cometchat-list-item__body {
- flex-direction: column-reverse;
- gap: 20px;
- background: #fff;
-}
-
-.cometchat-incoming-call .cometchat-list-item__body-title {
- color: #141414;
-}
-
-.cometchat-incoming-call .cometchat-list-item__title-container {
- text-align: center;
- gap: 6px;
-}
+```tsx lines
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatAvatar, CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-.cometchat-list-item__body-subtitle {
- justify-content: center;
+function CustomLeadingIncoming() {
+ return (
+ (
+
-
-
+### titleView
-### Functionality
-
-These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements.
-
-Here is a code snippet demonstrating how you can customize the functionality of the `Incoming Call` component.
+
+ 
+
-
-
-```ts
+```tsx lines
+import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
-const IncomingCallsDemo = () => {
+function CustomTitleIncoming() {
return (
(
+
+### itemView
-
-```js
-import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
+
+ 
+
+
+```tsx lines
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatAvatar, CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-const IncomingCallsDemo = () => {
+function CustomItemViewIncoming() {
return (
(
+
-
-
-
-Below is a list of customizations along with corresponding code snippets
-
-| Property | Description | Code |
-| ----------------- | ------------------------------------------------------------------------------------- | --------------------------------------------------- |
-| **Call** | The CometChat call object used to initialize and display the incoming call component. | `call={callObject}` |
-| **Disable sound** | Disables the sound for incoming calls. | `disableSoundForCalls={true}` |
-| **Custom sound** | Specifies a custom sound to play for incoming calls. | `customSoundForCalls='Your Custom Sound For Calls'` |
-
-***
-
-### Advanced
-
-For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component.
-
-***
+---
-#### SubtitleView
+## Common Patterns
-Property `subtitleView` is a function that renders a JSX element to display the subtitle view.
+### Disable ringtone
-
-
-```ts
-import { CometChat } from "@cometchat/chat-sdk-javascript";
+```tsx lines
import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
-const IncomingCallsDemo = () => {
- const getSubtitleView = (call: CometChat.Call): JSX.Element => {
- /** Return custom subtitle view */
- };
-
- return
+### Custom ringtone
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript";
+```tsx lines
import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
-const IncomingCallsDemo = () => {
- const getSubtitleView = (call) => {
- /** Return custom subtitle view */
- };
-
- return
+---
-
+## CSS Architecture
-#### LeadingView
+### Key Selectors
-Property `leadingView` is a function that renders a JSX element to display the leading view.
+| Target | Selector |
+| --- | --- |
+| Root | `.cometchat-incoming-call` |
+| List item | `.cometchat-incoming-call .cometchat-list-item` |
+| Body title | `.cometchat-incoming-call .cometchat-list-item__body-title` |
+| Button group | `.cometchat-incoming-call__button-group` |
+| Decline button | `.cometchat-incoming-call__button-decline` |
+| Accept button | `.cometchat-incoming-call__button-accept` |
-The customized call interface is displayed below.
+### Example: Brand-themed incoming call
-
+
-Use the following code to achieve the customization shown above.
-
-
-
-```ts
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatAvatar, CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const IncomingCallsDemo = () => {
- const getLeadingView = (call: CometChat.Call) => {
- return (
-
+---
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatAvatar, CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const IncomingCallsDemo = () => {
- const getLeadingView = (call) => {
- return (
-
+---
-
-```css
-.cometchat-incoming-call__avatar {
- display: none;
-}
-```
+## Props
-
+All props are optional.
-
+---
-#### TitleView
+### call
-Property `titleView` is a function that renders a JSX element to display the title view.
+Sets a specific call object for the incoming call display.
-The customized call interface is displayed below.
+| | |
+| --- | --- |
+| Type | `any` |
+| Default | Auto-detected |
-
-
-
+---
-Use the following code to achieve the customization shown above.
+### callSettingsBuilder
-
-
-```ts
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const IncomingCallsDemo = () => {
- const getTitleView = (call: CometChat.Call) => {
- return (
-
+### customSoundForCalls
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const IncomingCallsDemo = () => {
- const getTitleView = (call) => {
- return (
-
-
-
-```css
-.incoming-call__title-wrapper {
- display: flex;
- width: 370px;
- height: 37px;
- padding: 2px 10px;
- align-items: center;
- gap: 10px;
- color: #141414;
- font: 700 24px Roboto;
-}
+### disableSoundForCalls
-.incoming-call__tag {
- display: flex;
- height: 30.036px;
- padding: 2.002px 6.007px;
- justify-content: center;
- align-items: center;
- gap: 6.007px;
- border-radius: 14.017px;
- background: #09C26F;
- color: #FFF;
- font: 600 12px Roboto;
-}
+Disables the incoming call ringtone.
-.incoming-call__tag-icon {
- background-image: url("");
- background-size: contain;
- height: 20px;
- width: 20px;
-}
-```
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-
+---
-
+### itemView
-#### TrailingView
+Custom renderer for the entire list item.
-Property `trailingView` is a function that renders a JSX element to display the trailing view.
+| | |
+| --- | --- |
+| Type | `(call: CometChat.Call) => JSX.Element` |
+| Default | `undefined` |
-The customized call interface is displayed below.
+---
-
- 
-
+### leadingView
-Use the following code to achieve the customization shown above.
+Custom renderer for the avatar / left section.
-
-
-```ts
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const IncomingCallsDemo = () => {
- const getTrailingView = (call: CometChat.Call) => {
- return (
-
+Callback fired when the accept button is clicked.
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const IncomingCallsDemo = () => {
- const getTrailingView = (call) => {
- return (
-
-
-
-```css
-.incoming-call__avatar {
- display: flex;
- height: 62px;
- padding: 1px 3px;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- gap: 3px;
- border-radius: 7px;
- background: #AA9EE8;
- color: #FFF;
- font: 600 10px Roboto;
-}
+Callback fired when the decline button is clicked.
-.incoming-call__avatar-icon {
- background-image: url(" void` |
+| Default | `undefined` |
-
+---
-
+### onError
-#### ItemView
+Callback fired when the component encounters an error.
-Property `itemView` is a function that renders a JSX element to display the item view.
+| | |
+| --- | --- |
+| Type | `((error: CometChat.CometChatException) => void) \| null` |
+| Default | `undefined` |
-The customized call interface is displayed below.
+---
-
-
-
+### subtitleView
-Use the following code to achieve the customization shown above.
+Custom renderer for the subtitle text.
-
-
-```ts
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatAvatar, CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const IncomingCallsDemo = () => {
- const getItemView = (call: CometChat.Call) => {
- return (
-
+Custom renderer for the name / title text.
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatAvatar, CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const IncomingCallsDemo = () => {
- const getItemView = (call) => {
- return (
-
-
-
-```css
-.incoming-call__itemview {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- gap: 20px;
- align-self: stretch;
-}
+Custom renderer for the right section.
-.incoming-call__itemview .cometchat-avatar,
-.incoming-call__itemview .cometchat-avatar__image {
- height: 90px;
- width: 90px;
- border-radius: 24px;
-}
+| | |
+| --- | --- |
+| Type | `(call: CometChat.Call) => JSX.Element` |
+| Default | `undefined` |
-.incoming-call__itemview .cometchat-avatar__text {
- color: #FFF;
- text-align: center;
- font: 700 32px Roboto
-}
+---
-.incoming-call__itemview-title {
- color: #141414;
- text-align: center;
- font: 700 24px Roboto;
-}
+## Events
-.incoming-call__itemview-subtitle {
- color: var(--Color-Text-Color-Text-Secondary, #727272);
- font: 400 16px Roboto;
-}
-```
+| Event | Payload | Fires when |
+| --- | --- | --- |
+| `CometChatCallEvents.ccCallRejected` | `CometChat.Call` | Call rejected |
+| `CometChatCallEvents.ccCallAccepted` | `CometChat.Call` | Call accepted |
+| `CometChatCallEvents.ccCallEnded` | `CometChat.Call` | Call ended |
-
+---
-
+## CSS Selectors
+
+| Target | Selector |
+| --- | --- |
+| Root | `.cometchat-incoming-call` |
+| List item | `.cometchat-incoming-call .cometchat-list-item` |
+| Body title | `.cometchat-incoming-call .cometchat-list-item__body-title` |
+| Title container | `.cometchat-incoming-call .cometchat-list-item__title-container` |
+| Trailing view | `.cometchat-incoming-call .cometchat-list-item__trailing-view` |
+| Button group | `.cometchat-incoming-call__button-group` |
+| Decline button | `.cometchat-incoming-call__button-decline` |
+| Accept button | `.cometchat-incoming-call__button-accept` |
diff --git a/ui-kit/react/link/changelog.mdx b/ui-kit/react/link/changelog.mdx
index 8c698a26d..e3acadbd7 100644
--- a/ui-kit/react/link/changelog.mdx
+++ b/ui-kit/react/link/changelog.mdx
@@ -1,4 +1,4 @@
---
title: "Changelog"
url: "https://github.com/cometchat/cometchat-uikit-react/releases?q=v6&expanded=true"
----
\ No newline at end of file
+---
diff --git a/ui-kit/react/link/figma.mdx b/ui-kit/react/link/figma.mdx
index 172dd3788..784cf16e7 100644
--- a/ui-kit/react/link/figma.mdx
+++ b/ui-kit/react/link/figma.mdx
@@ -1,4 +1,4 @@
---
title: "Figma Design"
url: "https://www.figma.com/community/file/1442863561340379957/cometchat-ui-kit-for-web"
----
\ No newline at end of file
+---
diff --git a/ui-kit/react/link/sample.mdx b/ui-kit/react/link/sample.mdx
index 3f7e45be6..d7748ae0d 100644
--- a/ui-kit/react/link/sample.mdx
+++ b/ui-kit/react/link/sample.mdx
@@ -1,4 +1,4 @@
---
title: "React Sample App"
url: "https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app"
----
\ No newline at end of file
+---
diff --git a/ui-kit/react/localize.mdx b/ui-kit/react/localize.mdx
index 45f62ad52..42f099c0c 100644
--- a/ui-kit/react/localize.mdx
+++ b/ui-kit/react/localize.mdx
@@ -1,87 +1,79 @@
---
title: "Localization"
sidebarTitle: "Localize"
+description: "Configure multi-language localization, custom translations, and date/time formatting in CometChat React UI Kit."
---
-## **Overview**
+
-React UI Kit provides **multi-language localization** to **adapt** the UI elements based on the user's preferred language settings. The **CometChatLocalize** class allows developers to:
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` |
+| Import | `import { CometChatLocalize } from "@cometchat/chat-uikit-react";` |
+| Set language | `CometChatLocalize.setCurrentLanguage("fr")` |
+| Init with config | `CometChatLocalize.init({ language: "es", fallbackLanguage: "en-US", disableAutoDetection: false })` |
+| Add translations | `CometChatLocalize.addTranslation({ "en-US": { "welcome_message": "Welcome!" } })` |
+| Supported languages | 19: en-US, en-GB, nl, fr, de, hi, it, ja, ko, pt, ru, es, tr, zh, zh-TW, ms, sv, lt, hu |
+| Date formatting | Use `CalendarObject` for custom date/time patterns |
+| Source | [GitHub](https://github.com/cometchat/cometchat-uikit-react/blob/v6/src/resources/CometChatLocalize/cometchat-localize.ts) |
-* **Automatically detect and apply a language** based on browser/device settings.
-* **Manually change the UI language**.
-* **Format date and time** based on localization settings.
+
-The v6 React UI Kit expands support for **multiple languages** and allows developers to define **custom translations**.\
-The localization system now includes **language JSON files**, which store translations, and an **improved CometChatLocalize class**, which handles language detection and formatting.
+The `CometChatLocalize` class manages multi-language localization for the UI Kit. It handles automatic language detection, manual language switching, custom translations, and date/time formatting.
-***
-
-### **Supported Languages**
+---
-React UI Kit currently supports **19 languages**:
+## Supported Languages
-| Language | Code |
-| ------------------------ | ------- |
-| English (United States) | `en-US` |
+| Language | Code |
+| --- | --- |
+| English (United States) | `en-US` |
| English (United Kingdom) | `en-GB` |
-| Dutch | `nl` |
-| French | `fr` |
-| German | `de` |
-| Hindi | `hi` |
-| Italian | `it` |
-| Japanese | `ja` |
-| Korean | `ko` |
-| Portuguese | `pt` |
-| Russian | `ru` |
-| Spanish | `es` |
-| Turkish | `tr` |
-| Chinese | `zh` |
-| Chinese (Traditional) | `zh-TW` |
-| Malay | `ms` |
-| Swedish | `sv` |
-| Lithuanian | `lt` |
-| Hungarian | `hu` |
-
-🔗 **View JSON files for all supported languages** in the GitHub repository:\
-➡ [Language JSON Files](https://github.com/cometchat/cometchat-uikit-react/tree/v6/src/resources/CometChatLocalize/resources)
-
-***
-
-## **CometChatLocalize**
-
-The `CometChatLocalize` class provides methods for managing localization in the UI Kit.
-
-🔗 **View full class file in the GitHub repository:**\
-➡ [CometChatLocalize](https://github.com/cometchat/cometchat-uikit-react/blob/v6/src/resources/CometChatLocalize/cometchat-localize.ts)
-
-***
-
-### **LocalizationSettings**
-
-The `LocalizationSettings` interface defines various **localization settings** for an application or component. It allows developers to configure the language, translations, time zone, and calendar formatting while providing options for automatic detection and missing key handling.
-
-| Property | Type | Description |
-| ----------------------------- | ------------------------- | --------------------------------------------------------------------------------------------------- |
-| `language` | `string` | The language code (e.g., `"en"`, `"fr"`) for the current localization. |
-| `translationsForLanguage` | `{ [key: string]: any }` | An object containing key-value pairs for translations in the current language. |
-| `disableAutoDetection` | `boolean` | Disables automatic language detection based on the browser or device settings. |
-| `fallbackLanguage` | `string` | The **fallback language code** to use if the primary language is not available. |
-| `disableDateTimeLocalization` | `boolean` | Disables localization for **date and time values**, forcing the default format. |
-| `timezone` | `string` | The **timezone** used for date and time formatting (e.g., `"America/New_York"`, `"Europe/London"`). |
-| `calendarObject` | `CalendarObject` | A **custom calendar format** using `CalendarObject` to define localized date and time formatting. |
-| `missingKeyHandler` | `(key: string) => string` | A function that **handles missing translation keys**, allowing custom error handling or fallbacks. |
-
-***
-
-**Example**
-
-```javascript
+| Dutch | `nl` |
+| French | `fr` |
+| German | `de` |
+| Hindi | `hi` |
+| Italian | `it` |
+| Japanese | `ja` |
+| Korean | `ko` |
+| Portuguese | `pt` |
+| Russian | `ru` |
+| Spanish | `es` |
+| Turkish | `tr` |
+| Chinese | `zh` |
+| Chinese (Traditional) | `zh-TW` |
+| Malay | `ms` |
+| Swedish | `sv` |
+| Lithuanian | `lt` |
+| Hungarian | `hu` |
+
+[Language JSON files on GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/src/resources/CometChatLocalize/resources)
+
+---
+
+## LocalizationSettings
+
+Configuration interface for `CometChatLocalize.init()`.
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `language` | `string` | Language code (e.g., `"en"`, `"fr"`) for the current localization |
+| `translationsForLanguage` | `{ [key: string]: any }` | Key-value pairs for translations in the current language |
+| `disableAutoDetection` | `boolean` | Disables automatic language detection based on browser/device settings |
+| `fallbackLanguage` | `string` | Fallback language code if the primary language is not available |
+| `disableDateTimeLocalization` | `boolean` | Disables localization for date and time values, forcing the default format |
+| `timezone` | `string` | Timezone for date and time formatting (e.g., `"America/New_York"`, `"Europe/London"`) |
+| `calendarObject` | `CalendarObject` | Custom calendar format for localized date and time formatting |
+| `missingKeyHandler` | `(key: string) => void` | Handles missing translation keys with custom error handling or fallbacks |
+
+
+```javascript lines
import { CometChatLocalize } from "@cometchat/chat-uikit-react";
-import { CalendarObject } from "./CalendarObject";
+import { CalendarObject } from "@cometchat/chat-uikit-react";
CometChatLocalize.init({
- language: "es", // Default language set to Spanish
- fallbackLanguage: "en-US", // Use English if the preferred language is not available
+ language: "es",
+ fallbackLanguage: "en-US",
translationsForLanguage: {
"es": {
"welcome_message": "¡Bienvenido a CometChat!",
@@ -92,9 +84,9 @@ CometChatLocalize.init({
"logout_message": "Vous vous êtes déconnecté avec succès."
}
},
- disableAutoDetection: false, // Allow automatic detection of browser/device language
- disableDateTimeLocalization: false, // Enable localization for date and time
- timezone: "Europe/Madrid", // Set time zone for date and time formatting
+ disableAutoDetection: false,
+ disableDateTimeLocalization: false,
+ timezone: "Europe/Madrid",
calendarObject: new CalendarObject({
today: "[Hoy a las] hh:mm A",
yesterday: "[Ayer a las] hh:mm A",
@@ -107,83 +99,62 @@ CometChatLocalize.init({
hours: "%d horas atrás",
}
}),
- missingKeyHandler: (key) => `🔍 Missing translation for: ${key}`, // Custom handler for missing translations
+ missingKeyHandler: (key) => `Missing translation for: ${key}`,
});
```
-***
+---
-### **CalendarObject**
+## CalendarObject
-The `CalendarObject` class defines customizable formatting for date and time representation. It allows you to format dates based on whether they are today, yesterday, last week, or other days. It also supports relative time formatting for minutes and hours.
+Defines customizable formatting for date and time representation. Supports relative time formatting for minutes and hours.
-Notice
-
-Changing this format will **globally update** the date and time representation wherever it is used in the component.\
-However, if a **component-specific** `CalendarObject` is provided, it will take **higher precedence** over the global settings.
-
+Changing this format globally updates the date and time representation wherever it is used. If a component-specific `CalendarObject` is provided, it takes higher precedence over the global settings.
-| Property | Type | Description |
-| ---------------------- | -------- | ----------------------------------------------------------------------------------------------- |
-| `today` | `string` | Custom formatting for dates that fall on the same day. Example: `"Today at hh:mm A"` |
-| `yesterday` | `string` | Custom formatting for dates that fall on the previous day. Example: `"Yesterday at hh:mm A"` |
-| `lastWeek` | `string` | Custom formatting for dates within the last 7 days. Example: `"Last week on dddd"` |
-| `otherDays` | `string` | Custom formatting for dates that do not fit other categories. Example: `"DD MMM YYYY, hh:mm A"` |
-| `relativeTime` | `object` | Custom formatting for relative time expressions (e.g., "2 hours ago"). |
-| `relativeTime.minute` | `string` | Formatting for a single minute. Example: `"%d minute ago"` |
-| `relativeTime.minutes` | `string` | Formatting for multiple minutes. Example: `"%d minutes ago"` |
-| `relativeTime.hour` | `string` | Formatting for a single hour. Example: `"%d hour ago"` |
-| `relativeTime.hours` | `string` | Formatting for multiple hours. Example: `"%d hours ago"` |
-
-***
-
-**Example**
-
-```javascript
-import { CometChatLocalize } from "@cometchat/chat-uikit-react";
-import { CalendarObject } from "./CalendarObject";
-
+| Property | Type | Description |
+| --- | --- | --- |
+| `today` | `string` | Format for dates on the same day. Example: `"Today at hh:mm A"` |
+| `yesterday` | `string` | Format for dates on the previous day. Example: `"Yesterday at hh:mm A"` |
+| `lastWeek` | `string` | Format for dates within the last 7 days. Example: `"Last week on dddd"` |
+| `otherDays` | `string` | Format for dates that do not fit other categories. Example: `"DD MMM YYYY, hh:mm A"` |
+| `relativeTime` | `object` | Custom formatting for relative time expressions |
+| `relativeTime.minute` | `string` | Single minute format. Example: `"%d minute ago"` |
+| `relativeTime.minutes` | `string` | Multiple minutes format. Example: `"%d minutes ago"` |
+| `relativeTime.hour` | `string` | Single hour format. Example: `"%d hour ago"` |
+| `relativeTime.hours` | `string` | Multiple hours format. Example: `"%d hours ago"` |
+
+```javascript lines
new CalendarObject({
- today: "[Hoy a las] hh:mm A",
- yesterday: "[Ayer a las] hh:mm A",
- lastWeek: "[Última semana el] dddd",
- otherDays: "DD MMM YYYY, hh:mm A",
- relativeTime: {
- minute: "%d minuto atrás",
- minutes: "%d minutos atrás",
- hour: "%d hora atrás",
- hours: "%d horas atrás",
- }
- })
+ today: "[Hoy a las] hh:mm A",
+ yesterday: "[Ayer a las] hh:mm A",
+ lastWeek: "[Última semana el] dddd",
+ otherDays: "DD MMM YYYY, hh:mm A",
+ relativeTime: {
+ minute: "%d minuto atrás",
+ minutes: "%d minutos atrás",
+ hour: "%d hora atrás",
+ hours: "%d horas atrás",
+ }
+})
```
-***
+---
-### **Component Guide**
+## Component Guide
-Note
-
-The translation configurations mentioned in this section are to be defined inside the
-ComeChat's init() method callback.
+The translation configurations in this section are to be defined inside the [CometChat's init() method callback](/ui-kit/react/react-js-integration#step-3:-initialize-cometchat-ui-kit).
-#### Report Message
+### Report Message
-To add translations for any flag reason, a key in the form of `flag_message_reason_id_{reason_id}` is to be defined with the translated strings to be displayed for that `reason_id` in the UI. The translations for `flag_message_reason_id_spam`, `flag_message_reason_id_sexual`, `flag_message_reason_id_harassment` are present by default.
+To add translations for any flag reason, define a key in the form `flag_message_reason_id_{reason_id}` with the translated strings. Translations for `flag_message_reason_id_spam`, `flag_message_reason_id_sexual`, `flag_message_reason_id_harassment` are present by default. The reason name is displayed when the required translation is not found.
-**Usage**
-* Define translations for custom flag message reasons.
-* The reason name would be displayed when the required translation is not found.
-
-**Example**
-
-```javascript
+```javascript lines
import { CometChatLocalize } from "@cometchat/chat-uikit-react";
-// Add translations for flag reason keys for the required languages
CometChatLocalize.addTranslation({
"en-GB": {
"flag_message_reason_id_dislike": "I just don't like it",
@@ -194,20 +165,13 @@ CometChatLocalize.addTranslation({
});
```
-#### Mention All
-
-To add translations for a custom `mentionAllLabel`, a key in the form of `message_composer_mention_{label}` is to be defined with the translated strings to be displayed for that label in the UI. The translations for `message_composer_mention_all` is present by default.
-
-**Usage**
-* Define translations for custom mentionAllLabel.
-* Helps customize the `@all` label used in the app while mentioning all group members.
+### Mention All
-**Example**
+To add translations for a custom `mentionAllLabel`, define a key in the form `message_composer_mention_{label}`. The translation for `message_composer_mention_all` is present by default.
-```javascript
+```javascript lines
import { CometChatLocalize } from "@cometchat/chat-uikit-react";
-// Add translations for mentionAllLabel for the required languages
CometChatLocalize.addTranslation({
"en-GB": {
"message_composer_mention_channel": "channel",
@@ -218,169 +182,131 @@ CometChatLocalize.addTranslation({
});
```
-***
-
-### **Methods**
-
-#### Initialize CometChatLocalize
-
-This method initializes the localization system with default values and optional configurations.
+---
-**Usage**
+## Methods
-* Set the default language, timezone, and fallback settings.
-* Define a custom calendar format if required.
-* Customize how missing keys are handled.
+### init
-**Example**
+Initializes the localization system with default values and optional configurations.
-```javascript
+```javascript lines
import { CometChatLocalize } from "@cometchat/chat-uikit-react";
-// Initialize localization settings
CometChatLocalize.init({
- language: "es", // Default language: Spanish
- fallbackLanguage: "en-US", // Fallback if translation is missing
- disableAutoDetection: false, // Enable browser language detection
+ language: "es",
+ fallbackLanguage: "en-US",
+ disableAutoDetection: false,
timezone: "Europe/Madrid",
missingKeyHandler: (key) => `Missing translation: ${key}`,
});
```
-***
-
-#### Get Browser Language
+### getBrowserLanguage
-This method detects the language set in the user's browser or device settings.
+Detects the language set in the user's browser or device settings.
-**Usage**
-
-* Automatically set the app’s language based on the user’s browser settings.
-* Helps in making the UI multilingual without requiring user input.
-
-**Example**
-
-```javascript
+```javascript lines
const userLang = CometChatLocalize.getBrowserLanguage();
console.log(userLang);
```
-***
-
-#### Get Localized String
+### getLocalizedString
-This method fetches localized text based on the current language.
+Fetches localized text based on the current language.
-**Usage**
-
-* Retrieve translations dynamically without hardcoding values in multiple languages.
-* Useful for UI elements, buttons, alerts, and system messages.
-
-**Example**
-
-```javascript
+```javascript lines
const translatedText = CometChatLocalize.getLocalizedString("welcome_message");
```
-***
-
-#### Get Current Language
-
-This method returns the currently set language for the UI Kit.
+### getCurrentLanguage
-**Usage**
+Returns the currently set language for the UI Kit.
-* Useful to debug and display the currently active language.
-* Helps when dynamically switching between languages.
-
-**Example**
-
-```javascript
+```javascript lines
console.log(CometChatLocalize.getCurrentLanguage());
```
-***
-
-#### Get Default Language
-
-This method returns the system-preferred language.
+### getDefaultLanguage
-**Usage**
+Returns the system-preferred language. If `disableAutoDetection` is enabled, returns the fallback language. Otherwise returns the browser's preferred language.
-* If disableAutoDetection is enabled, the method returns the fallback language.
-* If auto-detection is enabled, it returns the browser's preferred language.
-
-**Example**
-
-```javascript
+```javascript lines
console.log(CometChatLocalize.getDefaultLanguage());
```
-***
-
-#### Set Current Language
-
-This method updates the language at runtime without reloading the application.
-
-**Usage**
+### setCurrentLanguage
-* Allow users to change the language via a settings menu.
-* Ensure that UI elements are updated instantly after changing the language.
+Updates the language at runtime without reloading the application.
-**Example**
-
-```javascript
+```javascript lines
CometChatLocalize.setCurrentLanguage("fr");
```
-***
+### addTranslation
+
+Adds custom translations to the existing ones dynamically. New translations are merged into the existing localization data.
-#### Add Custom Translations
+```javascript lines
+CometChatLocalize.addTranslation({
+ "en-US": { "welcome_message": "Welcome to CometChat!" }
+});
+```
-This method allows you to add custom translations to the existing ones dynamically. It ensures that new translations are merged into the existing localization data.
+### formatDate
-**Usage**
+Formats a Unix timestamp (seconds) based on a `CalendarObject` configuration. Uses the timezone set via `init()`.
-* You can define custom translation keys and override the existing translations.
-* You can add new languages to the existing translations.
-* Useful when you want to support additional words or phrases not present in the default language files.
+| Parameter | Type | Description |
+| --- | --- | --- |
+| `timestamp` | `number` | Unix timestamp in seconds |
+| `calendarObject` | `CalendarObject` | Calendar configuration for formatting |
-**Example**
+Returns a formatted date `string`.
-```javascript
-CometChatLocalize.addTranslation({
- "en-US": { "welcome_message": "Welcome to CometChat!" }
-});
+```javascript lines
+import { CometChatLocalize } from "@cometchat/chat-uikit-react";
+import { CalendarObject } from "@cometchat/chat-uikit-react";
+
+const formatted = CometChatLocalize.formatDate(1700000000, new CalendarObject({
+ today: "hh:mm A",
+ yesterday: "[Yesterday]",
+ lastWeek: "dddd",
+ otherDays: "DD MMM YYYY, hh:mm A"
+}));
```
-***
+### getDateLocaleLanguage
+
+Returns the language code used for date localization. If `disableDateTimeLocalization` is `true`, returns `"en-US"`. Otherwise returns the current language.
-#### **Customisation**
+```javascript lines
+const dateLang = CometChatLocalize.getDateLocaleLanguage();
+```
-CometChat UI Kit provides **flexible customization options** for date/time format. Users can configure **global settings** using `CometChatLocalize.init()` or pass a `CalendarObject` directly to individual components for **component-specific** customization.
+---
-* **Global Configuration:** When settings are provided in `CometChatLocalize.init()`, all UI components will automatically use the configured date/time formats.
-* **Component-Specific Configuration:** If a `CalendarObject` is passed to a component, it **overrides** the global settings and applies only to that specific instance.
+## Customization
-**Global Configuration Example**
+### Global Configuration
-To apply a **custom date format** globally across the whole UI Kit.
+Apply a custom date format globally across the whole UI Kit via `CometChatLocalize.init()`:
-```php
+```javascript lines
CometChatLocalize.init({
- calendarObject:new CalendarObject({
- today: " hh:mm A",
- yesterday: "[Yesterday],
+ calendarObject: new CalendarObject({
+ today: "hh:mm A",
+ yesterday: "[Yesterday]",
otherDays: "DD MMM YYYY, hh:mm A"
})
});
```
-**Component-Specific Customization Example**
+### Component-Specific Configuration
-To apply a **custom date format** only within a specific component.
+Apply a custom date format only within a specific component. Component-level `CalendarObject` overrides the global settings.
-```csharp
+```tsx lines
-The `CometChatMentionsFormatter` class is a part of the CometChat UI Kit, a ready-to-use chat UI component library for integrating CometChat into your React applications. This class provides functionality to format mentions within text messages displayed in the chat interface. Mentions allow users to reference other users within a conversation, providing a convenient way to direct messages or involve specific participants.
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` |
+| Key class | `CometChatMentionsFormatter` (extends `CometChatTextFormatter`) |
+| Required setup | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` |
+| Purpose | Format @mentions with styled tokens, suggestion list, and click handling for users and group members |
+| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) |
+| Related | [Custom Text Formatter](/ui-kit/react/custom-text-formatter-guide) \| [All Guides](/ui-kit/react/guide-overview) |
-## Features
+
-* **Mention Formatting**: Automatically formats mentions within text messages based on provided styles and settings.
-* **Customizable Styles**: Allows customization of text styles for mentions, including colors, fonts, and background colors.
-* **User and Group Member Mentions**: Supports mentions for both individual users and group members, providing flexibility in communication scenarios.
-* **Mention List Generation**: Generates a list of suggested mentions based on user input, facilitating easy selection of recipients during message composition.
-* **Mention Click Handling**: Provides a listener interface for handling click events on mentions, enabling custom actions to be performed when a mention is tapped by the user.
+`CometChatMentionsFormatter` extends [CometChatTextFormatter](/ui-kit/react/custom-text-formatter-guide) to format @mentions in text messages. It styles mention tokens, generates suggestion lists as users type, and handles click events on rendered mentions.
-## Usage
+| Capability | Description |
+| --- | --- |
+| Mention formatting | Auto-formats `<@uid:...>` placeholders into styled tokens |
+| Custom styles | Colors, fonts, and backgrounds for mention text |
+| User and group mentions | Works with both individual users and group members |
+| Suggestion list | Generates mention candidates from user input |
+| Click handling | Listener interface for tap/click on rendered mentions |
+
+---
-To integrate the `CometChatMentionsFormatter` class into your application:
+## Usage
-1. **Initialization**: Create an instance of the `CometChatMentionsFormatter` class and configure it with desired settings, such as mention text styles and limit settings.
+### 1. Initialize the formatter
-```javascript
+```javascript lines
import { CometChatMentionsFormatter } from "path-to-your-file";
-// Initialize the formatter
const mentionsFormatter = new CometChatMentions();
mentionsFormatter.setCometChatUserGroupMembers(userList);
```
-2. **Initialize the Formatter**: Initialize an instance of the formatter and configure it with any required settings, such as the list of users or groups to mention.
+### 2. Format a message
-3. **Process Chat Messages**: Once the formatter is initialized, you can process chat messages to format mentions appropriately:
+Provide the raw message string containing mention placeholders, then apply the formatter:
- * Provide the Unformatted Message: Provide the unformatted message string, including any mention placeholders.
+```javascript lines
+const unformattedMessage = "<@uid:aliceuid> just shared a photo!";
+const formattedMessage = mentionsFormatter.getFormattedText(unformattedMessage);
+// Render formattedMessage in your message component
+```
- ```javascript
- const unformattedMessage = "<@uid:aliceuid> just shared a photo!";
- ```
+The output contains HTML with styled mentions ready for rendering.
- * Apply the Formatter: Apply the formatter to the unformatted message using the `getFormattedText` method.
+### 3. Pass to components
- ```javascript
- const formattedMessage = mentionsFormatter.getFormattedText(unformattedMessage);
- // Render the `formattedMessage` in your message component
- ```
+Use the `textFormatters` prop on [CometChatMessageList](/ui-kit/react/message-list), [CometChatMessageComposer](/ui-kit/react/message-composer), or [CometChatConversations](/ui-kit/react/conversations).
- The `formattedMessage` now contains HTML with styled mentions, ready to be inserted into your message component for display.
+---
-Below is an example demonstrating how to use the `CometChatMentionsFormatter` class in components such as [CometChatConversations](/ui-kit/react/conversations), [CometChatMessageList](/ui-kit/react/message-list), [CometChatMessageComposer](/ui-kit/react/message-composer).
+## Next Steps
+
+
+
+ Build custom inline text patterns.
+
+
+ Render real-time message threads.
+
+
+ Browse all feature and formatter guides.
+
+
+ Full working sample application on GitHub.
+
+
diff --git a/ui-kit/react/message-composer.mdx b/ui-kit/react/message-composer.mdx
index 67249e000..cce8c75eb 100644
--- a/ui-kit/react/message-composer.mdx
+++ b/ui-kit/react/message-composer.mdx
@@ -1,922 +1,940 @@
---
title: "Message Composer"
+description: "Rich text input for composing and sending text, media, attachments, mentions, voice notes, and custom messages."
---
+
+```json
+{
+ "component": "CometChatMessageComposer",
+ "package": "@cometchat/chat-uikit-react",
+ "import": "import { CometChatMessageComposer } from \"@cometchat/chat-uikit-react\";",
+ "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";",
+ "description": "Rich text input for composing and sending text, media, attachments, mentions, voice notes, and custom messages.",
+ "cssRootClass": ".cometchat-message-composer",
+ "primaryOutput": {
+ "prop": "onSendButtonClick",
+ "type": "(message: CometChat.BaseMessage, previewMessageMode?: PreviewMessageMode) => void"
+ },
+ "props": {
+ "data": {
+ "user": { "type": "CometChat.User", "default": "undefined" },
+ "group": { "type": "CometChat.Group", "default": "undefined" },
+ "parentMessageId": { "type": "number", "default": "undefined" },
+ "initialComposerText": { "type": "string", "default": "\"\"" },
+ "placeholderText": { "type": "string", "default": "\"\"" }
+ },
+ "callbacks": {
+ "onSendButtonClick": "(message: CometChat.BaseMessage, previewMessageMode?: PreviewMessageMode) => void",
+ "onTextChange": "(text: string) => void",
+ "onError": "((error: CometChat.CometChatException) => void) | null"
+ },
+ "visibility": {
+ "hideImageAttachmentOption": { "type": "boolean", "default": false },
+ "hideVideoAttachmentOption": { "type": "boolean", "default": false },
+ "hideAudioAttachmentOption": { "type": "boolean", "default": false },
+ "hideFileAttachmentOption": { "type": "boolean", "default": false },
+ "hidePollsOption": { "type": "boolean", "default": false },
+ "hideCollaborativeDocumentOption": { "type": "boolean", "default": false },
+ "hideCollaborativeWhiteboardOption": { "type": "boolean", "default": false },
+ "hideAttachmentButton": { "type": "boolean", "default": false },
+ "hideVoiceRecordingButton": { "type": "boolean", "default": false },
+ "hideEmojiKeyboardButton": { "type": "boolean", "default": false },
+ "hideStickersButton": { "type": "boolean", "default": false },
+ "hideSendButton": { "type": "boolean", "default": false },
+ "showScrollbar": { "type": "boolean", "default": false }
+ },
+ "behavior": {
+ "disableTypingEvents": { "type": "boolean", "default": false },
+ "disableMentions": { "type": "boolean", "default": false },
+ "disableMentionAll": { "type": "boolean", "default": false },
+ "mentionAllLabel": { "type": "string", "default": "\"all\"" },
+ "enterKeyBehavior": { "type": "EnterKeyBehavior", "default": "EnterKeyBehavior.SendMessage" },
+ "disableSoundForMessage": { "type": "boolean", "default": false },
+ "customSoundForMessage": { "type": "string", "default": "undefined" }
+ },
+ "mentions": {
+ "mentionsUsersRequestBuilder": "CometChat.UsersRequestBuilder",
+ "mentionsGroupMembersRequestBuilder": "CometChat.GroupMembersRequestBuilder"
+ },
+ "viewSlots": {
+ "attachmentOptions": "CometChatMessageComposerAction[]",
+ "auxiliaryButtonView": "JSX.Element",
+ "sendButtonView": "JSX.Element",
+ "headerView": "JSX.Element"
+ },
+ "formatting": {
+ "textFormatters": { "type": "CometChatTextFormatter[]", "default": "default formatters" }
+ }
+ },
+ "events": [
+ { "name": "CometChatMessageEvents.ccMessageSent", "payload": "IMessages" },
+ { "name": "CometChatMessageEvents.ccMessageEdited", "payload": "IMessages" },
+ { "name": "CometChatMessageEvents.ccReplyToMessage", "payload": "IMessages" }
+ ],
+ "sdkListeners": [],
+ "types": {
+ "EnterKeyBehavior": { "SendMessage": "sendMessage", "NewLine": "newLine", "None": "none" },
+ "PreviewMessageMode": { "edit": 0, "none": 1 }
+ }
+}
+```
+
-## Overview
+## Where It Fits
-MessageComposer is a Component that enables users to write and send a variety of messages, including text, image, video, and custom messages.
+`CometChatMessageComposer` provides a rich text input with attachment, emoji, voice recording, sticker, and send controls. Wire it alongside `CometChatMessageHeader` and `CometChatMessageList` to build a standard chat view.
-Features such as **Attachments**, and **Message Editing** are also supported by it.
+```tsx lines
+import { useState, useEffect } from "react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import {
+ CometChatMessageHeader,
+ CometChatMessageList,
+ CometChatMessageComposer,
+} from "@cometchat/chat-uikit-react";
+import "@cometchat/chat-uikit-react/css-variables.css";
+
+function ChatView() {
+ const [chatUser, setChatUser] = useState();
+
+ useEffect(() => {
+ CometChat.getUser("uid").then((user) => setChatUser(user));
+ }, []);
+
+ return chatUser ? (
+
-## Usage
-
-### Integration
+---
-The following code snippet illustrates how you can directly incorporate the MessageComposer component into your app.
+## Minimal Render
-
-
-```tsx
-import React from "react";
+```tsx lines
+import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
+import "@cometchat/chat-uikit-react/css-variables.css";
+
+function MessageComposerDemo() {
+ const [chatUser, setChatUser] = useState();
-export function MessageComposerDemo() {
- const [chatUser, setChatUser] = React.useState();
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
+ useEffect(() => {
+ CometChat.getUser("uid").then((user) => setChatUser(user));
}, []);
- return chatUser ? (
-
+Root CSS class: `.cometchat-message-composer`
+
+---
+
+## Actions and Events
+
+### Callback Props
+
+#### onSendButtonClick
-
-```tsx
-import { MessageComposerDemo } from "./MessageComposerDemo";
+Fires when the send button is clicked. Overrides the default send behavior.
-export default function App() {
+```tsx lines
+import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+
+function ComposerWithCustomSend() {
return (
- {
+ console.log("Custom send:", message);
+ }}
+ />
);
}
```
-
+#### onTextChange
-
+Fires as the user types in the composer input.
-### Actions
+```tsx lines
+import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
-[Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.
+function ComposerWithTextTracking() {
+ return (
+ {
+ console.log("Text changed:", text);
+ }}
+ />
+ );
+}
+```
-##### 1. OnSendButtonClick
+#### onError
-The `OnSendButtonClick` event gets activated when the send message button is clicked. It has a predefined function of sending messages entered in the composer `EditText`. However, you can overide this action with the following code snippet.
+Fires on internal errors.
-
-
-```tsx
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
+```tsx lines
import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
-export function MessageComposerDemo() {
- const [chatUser, setChatUser] = React.useState();
+function ComposerWithError() {
+ return (
+ {
+ console.error("Composer error:", error);
+ }}
+ />
+ );
+}
+```
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
+### Global UI Events
- function handleSendButtonClick(message: CometChat.BaseMessage): void {
- console.log("your custom on send buttonclick action");
- }
+| Event | Fires when | Payload |
+| --- | --- | --- |
+| `CometChatMessageEvents.ccMessageSent` | A message is sent | `IMessages` |
+| `CometChatMessageEvents.ccMessageEdited` | A message is edited | `IMessages` |
+| `CometChatMessageEvents.ccReplyToMessage` | User replies to a message | `IMessages` |
- return chatUser ? (
-
+### SDK Events (Real-Time, Automatic)
-
+The component internally handles typing indicators and message sending. No manual SDK listener attachment needed.
-##### 2. onError
+---
-This action doesn't change the behavior of the component but rather listens for any errors that occur in the MessageList component.
+## Custom View Slots
-
-
-```tsx
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
+| Slot | Type | Replaces |
+| --- | --- | --- |
+| `attachmentOptions` | `CometChatMessageComposerAction[]` | Default attachment options list |
+| `auxiliaryButtonView` | `JSX.Element` | Sticker and AI button area |
+| `sendButtonView` | `JSX.Element` | Send button |
+| `headerView` | `JSX.Element` | Area above the composer input |
-export function MessageComposerDemo() {
- const [chatUser, setChatUser] = React.useState();
+### attachmentOptions
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
+Override the default attachment options.
- function handleError(error: CometChat.CometChatException) {
- throw new Error("your custom error action");
- }
+
+
+
- return chatUser ? (
- {}} />
+ }
+ />
+ );
}
```
+### sendButtonView
+
+Replace the send button.
+
+
+
+
+
+
+
+```tsx lines
+import {
+ CometChatMessageComposer,
+ CometChatButton,
+} from "@cometchat/chat-uikit-react";
+
+function ComposerCustomSend() {
+ return (
+ {}} />
+ }
+ />
+ );
+}
+```
+
+```css lines
+.cometchat-message-composer div:not([class]) .message-composer__send-button .cometchat-button {
+ background: #edeafa;
+}
+.cometchat-message-composer div:not([class]) .message-composer__send-button .cometchat-button__icon {
+ background: #6852d6;
+}
+```
+
-##### 3. onTextChange
+### headerView
+
+Custom view above the composer input.
-This event is triggered as the user starts typing in the Message Composer.
+
+
+
-
-```tsx
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
+
+```tsx lines
import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
-export function MessageComposerDemo() {
- const [chatUser, setChatUser] = React.useState();
-
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
+function ComposerWithHeader() {
+ return (
+
+
+
+ }
+ />
+ );
+}
+```
+
-
+
+
);
}
```
-
-
-
-
-### Actions
-
-[Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.
-
-##### 1. onAccept
-
-`onAccept` is triggered when you click the accept button of the `Incoming Call` component. You can override this action using the following code snippet.
-
-
+
-export default IncomingCallsDemo;
-```
+---
-
+
-
+
-{call.getCallInitiator()?.getName()}
+ )}
/>
);
-};
-
-export default IncomingCallsDemo;
+}
```
-
+
+
+```tsx lines
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatAvatar, CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-const IncomingCallsDemo = () => {
+function CustomItemViewIncoming() {
return (
+
+ )}
/>
);
-};
-
-export default IncomingCallsDemo;
+}
```
-{call.getCallInitiator()?.getName()}
+ {"Incoming " + call.getType() + " call"}
+
+
-Use the following code to achieve the customization shown above.
-
-
-
- )
- };
+```css lines
+.cometchat-incoming-call {
+ border-radius: 18.5px;
+ border: 1.542px solid #aa9ee8;
+ background: #fff;
+}
- return
-
- )
- };
+## Accessibility
- return
-
+---
-Use the following code to achieve the customization shown above.
+### callSettingsBuilder
-
- {call?.getCallInitiator()?.getName()}
-
- )
- };
+Custom call settings builder for the call session.
- return
-
- {call.getCallInitiator()?.getRole()}
-
-
- {call?.getCallInitiator()?.getName()}
-
- )
- };
+Custom sound file URL for incoming calls.
- return
-
- {call.getCallInitiator()?.getRole()}
-
-
-
+### leadingView
-Use the following code to achieve the customization shown above.
+Custom renderer for the avatar / left section.
-
-
- {call.getCallInitiator()?.getRole()}
-
- )
- };
+| | |
+| --- | --- |
+| Type | `(call: CometChat.Call) => JSX.Element` |
+| Default | `undefined` |
- return
-
- {call.getCallInitiator()?.getRole()}
-
- )
- };
+| | |
+| --- | --- |
+| Type | `(call: CometChat.Call) => void` |
+| Default | `undefined` |
- return
-
+### subtitleView
-Use the following code to achieve the customization shown above.
+Custom renderer for the subtitle text.
-
-
- )
- };
+| | |
+| --- | --- |
+| Type | `(call: CometChat.Call) => JSX.Element` |
+| Default | `undefined` |
- return
-
-
- {call?.getCallInitiator()?.getName()}
-
-
- {"Incoming " + call.getType() + " call"}
-
-
-
- )
- };
+| | |
+| --- | --- |
+| Type | `(call: CometChat.Call) => JSX.Element` |
+| Default | `undefined` |
- return
-
-
- {call?.getCallInitiator()?.getName()}
-
-
- {"Incoming " + call.getType() + " call"}
-
-
+
+ ) : null;
+}
+```
-## Usage
-
-### Integration
+---
-The following code snippet illustrates how you can directly incorporate the MessageComposer component into your app.
+## Minimal Render
-
-
- ) : null;
+ return chatUser ?
-
+
-
-
-
- ) : null;
+```tsx lines
+import { useEffect } from "react";
+import { CometChatMessageEvents } from "@cometchat/chat-uikit-react";
+
+function useComposerEvents() {
+ useEffect(() => {
+ const sentSub = CometChatMessageEvents.ccMessageSent.subscribe(
+ (data) => console.log("Sent:", data)
+ );
+ const editedSub = CometChatMessageEvents.ccMessageEdited.subscribe(
+ (data) => console.log("Edited:", data)
+ );
+
+ return () => {
+ sentSub?.unsubscribe();
+ editedSub?.unsubscribe();
+ };
+ }, []);
}
```
-
+
- return chatUser ? (
-
-
- ) : null;
+```tsx lines
+import {
+ CometChatMessageComposer,
+ CometChatMessageComposerAction,
+} from "@cometchat/chat-uikit-react";
+
+function ComposerCustomAttachments() {
+ return (
+
+
+
+```tsx lines
+import {
+ CometChatMessageComposer,
+ CometChatButton,
+} from "@cometchat/chat-uikit-react";
+
+function ComposerCustomAuxiliary() {
+ return (
+
+
+
+
+
+ User has paused their notifications
+
+
-
- ) : null;
+.message-composer__header-view-text {
+ color: var(--cometchat-text-color-primary);
+ font: var(--cometchat-font-body-regular);
}
```
-
- {/* For user chat with custom users mentions */}
-
- ) : null;
+function MinimalComposer() {
+ return (
+ ...
}` |
+| Change Enter key behavior | Component props | `enterKeyBehavior` | `enterKeyBehavior={EnterKeyBehavior.NewLine}` |
+| Change colors, fonts, spacing | Global CSS | Target `.cometchat-message-composer` class | `.cometchat-message-composer__send-button { background: blue; }` |
-const ccMessageSent = CometChatMessageEvents.ccMessageSent.subscribe(() => {
- // Your Code
-});
-```
+---
-
-
+---
-
-
+Hides the entire attachment button.
-The customized chat interface is displayed below.
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-
-
-
+---
-Use the following code to achieve the customization shown above.
+### hideAudioAttachmentOption
-
-
+### hideFileAttachmentOption
-The customized chat interface is displayed below.
+Hides the file attachment option.
-
-
-
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-Use the following code to achieve the customization shown above.
+---
-
-
+### hideSendButton
-The customized chat interface is displayed below.
+Hides the send button.
-
-
-
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-Use the following code to achieve the customization shown above.
+---
-
-
+### initialComposerText
-The customized chat interface is displayed below.
+Pre-fills the text input when the component mounts.
-
-
-
+| | |
+| --- | --- |
+| Type | `string` |
+| Default | `""` |
-Use the following code to achieve the customization shown above.
+---
-
-
-
- );
-};
+Custom alias label for group mentions.
-
- User has paused their notifications
-
-
-
-
- );
-};
+| | |
+| --- | --- |
+| Type | `number` |
+| Default | `undefined` |
-export default class DialogHelper {
- private dialogContainer: HTMLDivElement | null = null;
+---
- createDialog(onClick: () => void, buttonText: string) {
- this.dialogContainer = document.createElement("div");
- document.body.appendChild(this.dialogContainer);
- ReactDOM.render(
- ,
- this.dialogContainer
- );
- }
+### placeholderText
- closeDialog() {
- if (this.dialogContainer) {
- ReactDOM.unmountComponentAtNode(this.dialogContainer);
- this.dialogContainer.remove();
- this.dialogContainer = null;
- }
- }
-}
-```
+Placeholder text displayed in the message input field when empty.
-
-
- ) : null;
-}
-```
+### sendButtonView
-
-
-
-The `MessageHeader` is comprised of the following components:
-
-| Component | Description |
-| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
-| CometChatListItem | This component’s view consists of avatar, status indicator , title, and subtitle. The fields are then mapped with the SDK’s user, group class. |
-| Back Button | BackButton that allows users to navigate back from the current activity or screen to the previous one. |
-
-## Usage
+## Where It Fits
-### Integration
+`CometChatMessageHeader` is a toolbar component that sits above `CometChatMessageList` and `CometChatMessageComposer`. It receives a `user` or `group` prop and displays the conversation's avatar, name, online status, and typing indicator. Call buttons are rendered automatically when the calling extension is enabled.
-{chatUser &&
- ) : null;
-}
-```
+function ChatView() {
+ const [user, setUser] = useState
-
+
-**Example**
+---
-In this example, we are employing the `onBack` action.
+## Minimal Render
-
-
-```tsx
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
+```tsx lines
+import { useEffect, useState } from "react";
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import "@cometchat/chat-uikit-react/css-variables.css";
-export function MessageHeaderDemo() {
- const [chatUser, setChatUser] = React.useState();
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
+function MessageHeaderDemo() {
+ const [user, setUser] = useState();
- function handleOnBack() {
- console.log("your custom on back action");
- }
+ useEffect(() => {
+ CometChat.getUser("UID").then(setUser);
+ }, []);
- return chatUser ? (
-
+export default MessageHeaderDemo;
+```
-
+Root CSS class: `.cometchat-message-header`
-***
+---
-#### 2. OnError
+## Actions and Events
-This action doesn't change the behavior of the component but rather listens for any errors that occur in the Message Header component.
+### Callback Props
-**Example**
+#### onBack
-In this example, we are employing the `onError` action.
+Fires when the back button is clicked. Requires `showBackButton={true}`.
-
-
-```tsx
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
+```tsx lines
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
-export function MessageHeaderDemo() {
- const [chatUser, setChatUser] = React.useState();
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
-
- function handleError(error: CometChat.CometChatException) {
- throw new Error("your custom error action");
- }
- return chatUser ? (
- console.log("Navigate back")}
+ />
+ );
}
```
-
+#### onItemClick
-
-
-***
-
-##### 3. onSearchOptionClicked
+Fires when the header list item area (avatar + name) is clicked.
-The `onSearchOptionClicked` event is triggered when the user clicks the search option. It does not have a default behavior. However, you can override its behavior using the following code snippet.
-
-
-
-```tsx
+```tsx lines
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
-const handleSearchClick = () => {
- console.log("Search option clicked");
-};
-
- console.log("Open user detail")}
+ />
+ );
+}
```
-
-
-
-
-***
+#### onSearchOptionClicked
-#### 4. OnItemClick
-
-`OnItemClick` is triggered when you click on a ListItem of the `CometChatMessageHeader` component. The `OnItemClick` action doesn't have a predefined behavior. You can override this action using the following code snippet.
-
-
-
-```tsx
-import { MessageHeaderDemo } from "@cometchat/chat-uikit-react";
+Fires when the search option is clicked. Requires `showSearchOption={true}`.
-const getOnItemClick = () => {
- console.log("List item clicked");
-};
+```tsx lines
+import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
- console.log("Open search")}
+ />
+ );
+}
```
-
-
-
-
-***
-
-### Filters
-
-**Filters** allow you to customize the data displayed in a list within a `Component`. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using `RequestBuilders` of Chat SDK.
+#### onError
-The `MessageHeader` component does not have any exposed filters.
-
-### Events
-
-[Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.
-
-The `MessageHeader` component does not produce any events.
-
-## Customization
-
-To fit your app's design requirements, you can customize the appearance of the Message Header component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.
-
-### Style
-
-To customize the appearance, you can customise css of `CometChatMessageHeader`
-
-**Example**
-
-
-
-
+Fires on internal errors.
-
-
-```ts
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
+```tsx lines
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
-// Assuming groupObj is defined elsewhere in your code
-
-
-
-```css
-.cometchat-message-header .cometchat-list-item .cometchat-avatar {
- background: #f0999b;
- border-radius: 8px;
-}
-.cometchat-message-header .cometchat-avatar__text {
- font-family: "SF Pro";
+function HeaderWithError({ user }: { user: CometChat.User }) {
+ return (
+ {
+ console.error("MessageHeader error:", error);
+ }}
+ />
+ );
}
```
-
-
-
-
-### Functionality
-
-These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements.
-
-Here is a code snippet demonstrating how you can customize the functionality of the Message Header component.
-
-
-
-```ts
-import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
+### SDK Events (Real-Time, Automatic)
-
+| SDK Listener | Internal behavior |
+| --- | --- |
+| `onUserOnline` / `onUserOffline` | Updates the user's online/offline status indicator |
+| `onTypingStarted` / `onTypingEnded` | Shows/hides the typing indicator in the subtitle area |
+| Group member events | Updates group member count when members join/leave |
-
+
+In React 18 StrictMode, `useEffect` runs twice on mount in development. The component handles listener cleanup internally.
+
-Following is a list of customizations along with their corresponding code snippets:
+---
-| Property | Description | Code |
-| ------------------------------------ | --------------------------------------------------------------------------------------------------- | -------------------------------------- |
-| **Show Back Button** | Shows the back button. | `showBackButton={true}` |
-| **Hide Video Call Button** | Hides the video call button. | `hideVideoCallButton={true}` |
-| **Hide Voice Call Button** | Hides the voice call button. | `hideVoiceCallButton={true}` |
-| **Show Conversation Summary Button** | Shows the conversation summary button. | `showConversationSummaryButton={true}` |
-| **Hide User Status** | Hides the user's online/offline status indicator. | `hideUserStatus={true}` |
-| **Show Search Option** | Shows the search option. | `showSearchOption={true}` |
-| **User** | A `CometChat.User` object representing the user whose information (e.g., status) is displayed. | `user={chatUser}` |
-| **Group** | A `CometChat.Group` object representing the group whose details (e.g., member count) are displayed. | `group={chatGroup}` |
-| **Summary Generation Message Count** | Number of messages for which the summary should be shown. | `summaryGenerationMessageCount={1000}` |
-| **Disable Auto Summary Generation** | Disables the auto generation of conversation summary. | `disableAutoSummaryGeneration={true}` |
+## Custom View Slots
-### Advanced
+View slots for `CometChatMessageHeader` are `JSX.Element` (not functions) — unlike list components where slots receive a data parameter.
-For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component.
+| Slot | Type | Replaces |
+| --- | --- | --- |
+| `itemView` | `JSX.Element` | Entire list item (avatar + name + subtitle) |
+| `leadingView` | `JSX.Element` | Avatar / left section |
+| `titleView` | `JSX.Element` | Name / title text |
+| `subtitleView` | `JSX.Element` | Subtitle text (status / typing indicator) |
+| `trailingView` | `JSX.Element` | Right section (call buttons area) |
+| `auxiliaryButtonView` | `JSX.Element` | Auxiliary button area (next to call buttons) |
-#### ItemView
+### itemView
-The customized chat interface is displayed below.
+Replace the entire list item (avatar + name + subtitle).
-Use the following code to achieve the customization shown above.
-
-```ts
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
+```tsx lines
import {
CometChatMessageHeader,
CometChatListItem,
} from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
-// Custom list item view definition
-const CustomItemView = (
- <>
-
-
-
-```css
+
+```css lines
.cometchat-message-header .cometchat-list-item .cometchat-avatar {
border-radius: 8px;
}
```
-
-
-***
-
-#### TitleView
+### titleView
-The customized chat interface is displayed below.
+Replace the name / title text.
-Use the following code to achieve the customization shown above.
-
-```ts
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
+```tsx lines
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
-// Custom title view component
-function CustomTitleView() {
+function CustomTitleHeader({ user }: { user: CometChat.User }) {
return (
-
+
+ {user.getName() + " • "}
+
+
+ {user.getStatusMessage()}
+
+
+ }
+ />
);
}
-
-
-
+
+
);
}
```
-
-
-
-
-### Actions
-
-[Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.
-
-#### 1. OnBack
-
-`OnBack` is triggered when you click on the back button of the Message Header component. You can override this action using the following code snippet.
+
+
+
-**Example**
+---
-In this example, we are employing the `onBack` action.
+## Minimal Render
-
- {chatUser && (
-
- ) : null;
+ return user ?
- {chatUser && (
-
- ) : null;
+function HeaderWithBack({ user }: { user: CometChat.User }) {
+ return (
+
-
+Fires on internal errors.
-
-Use the following code to achieve the customization shown above.
-
-Use the following code to achieve the customization shown above.
-
-
- {userObj.getName() + " • "}
-
-
- {userObj.getStatusMessage()}
-
-
+
-Use the following code to achieve the customization shown above.
-
-
-Use the following code to achieve the customization shown above.
-
-
+
-Use the following code to achieve the customization shown above.
-
-
+
-.cometchat-message-header
- .cometchat-list-item__trailing-view
- .cometchat-button__icon {
- background: black;
+```tsx lines
+import {
+ CometChatMessageHeader,
+ CometChatButton,
+} from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+
+function AuxiliaryButtonHeader({ group }: { group: CometChat.Group }) {
+ return (
+
-
+---
-Use the following code to achieve the customization shown above.
+## Common Patterns
-
+
-// Define a custom date format pattern
-function getDateFormat() {
- const dateFormat = new CalendarObject({
- today: `hh:mm A`, // Example: "10:30 AM"
- yesterday: `[yesterday]`, // Example: "yesterday"
- otherDays: `DD MM YYYY`, // Example: "25 01 2025"
- });
- return dateFormat;
+```css lines
+.cometchat-message-header .cometchat-list-item .cometchat-avatar {
+ background: #f0999b;
+ border-radius: 8px;
}
-// Apply the custom format to the CometChatMessageHeader component
-Custom
}` |
+| Change colors, fonts, spacing | Global CSS | Target `.cometchat-message-header` class | `.cometchat-message-header .cometchat-avatar { border-radius: 8px; }` |
-
+
+ ) : null;
+}
+```
-***
-
-## Usage
-
-### Integration
+---
-The following code snippet illustrates how you can directly incorporate the MessageList component into your Application.
+## Minimal Render
-
-
- ) : null;
+ return chatUser ?
-
+
-
-
-
- ) : null;
+function MessageListWithThreads() {
+ return (
+
-
- ) : null;
+```tsx lines
+import { CometChatMessageList } from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+
+function MessageListWithReactionDetail() {
+ return (
+
-
- ) : null;
+function useMessageListEvents() {
+ useEffect(() => {
+ const editedSub = CometChatMessageEvents.ccMessageEdited.subscribe(
+ (data) => console.log("Edited:", data)
+ );
+ const deletedSub = CometChatMessageEvents.ccMessageDeleted.subscribe(
+ (msg) => console.log("Deleted:", msg)
+ );
+
+ return () => {
+ editedSub?.unsubscribe();
+ deletedSub?.unsubscribe();
+ };
+ }, []);
}
```
-
-
- ) : null;
-}
-```
+## Custom View Slots
-
+
-
+
-
- ) : null;
+.header-view .cometchat .cometchat-button__text {
+ color: #6852d6;
+ font: 400 12px/14.4px Roboto;
}
```
-
+
-
- ) : null;
+.footer-view .cometchat .cometchat-button__text {
+ color: #6852d6;
+ font: 400 12px/14.4px Roboto;
}
```
-
-
+
-
- ) : null;
+```tsx lines
+import { CometChatMessageList } from "@cometchat/chat-uikit-react";
+
+function ThreadedMessageList() {
+ return (
+
-
- ) : null;
+```tsx lines
+import { CometChatMessageList, MessageListAlignment } from "@cometchat/chat-uikit-react";
+
+function LeftAlignedList() {
+ return (
+
-
- ) : null;
-}
-```
+| What to change | Where | Property/API | Example |
+| --- | --- | --- | --- |
+| Handle thread clicks | Component props | `onThreadRepliesClick` | `onThreadRepliesClick={(msg) => openThread(msg)}` |
+| Filter messages | Component props | `messagesRequestBuilder` | `messagesRequestBuilder={builder}` |
+| Toggle visibility | Component props | `hide...
}` |
+| Change colors, fonts, spacing | Global CSS | Target `.cometchat-message-list` class | `.cometchat-message-bubble-outgoing { background: blue; }` |
-
-
- ) : null;
-}
-```
+---
-
-
+---
-
-
- ) : null;
-}
-```
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-
-
- ) : null;
-}
-```
+---
-
-
- ) : null;
-}
-```
+---
-
-
- ) : null;
-}
-```
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-
-
+---
-Use the following code to achieve the customization shown above.
+### onThreadRepliesClick
-
-
- );
- };
+### parentMessageId
- return chatUser ? (
-
-
- ) : null;
-}
-```
+Displays threaded conversation for the specified parent message.
-
-
- );
- };
+| | |
+| --- | --- |
+| Type | `number` |
+| Default | `3` |
- return chatUser ? (
-
-
- ) : null;
-}
-```
+---
-
-
+---
-Use the following code to achieve the customization shown above.
+### showConversationStarters
-
-
- );
- };
+### showMarkAsUnreadOption
- return chatUser ? (
-
-
- ) : null;
-}
-```
+Shows "Mark Unread" option in message actions.
-
-
- );
- };
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
- return chatUser ? (
-
-
- ) : null;
-}
-```
+---
-
-
-
- );
-};
+---
-export default class DialogHelper {
- private dialogContainer: HTMLDivElement | null = null;
+### textFormatters
- createDialog(onClick: () => void, buttonText: string) {
- this.dialogContainer = document.createElement("div");
- document.body.appendChild(this.dialogContainer);
+Custom text formatters for message content.
- ReactDOM.render(
- ,
- this.dialogContainer
- );
- }
+| | |
+| --- | --- |
+| Type | `CometChatTextFormatter[]` |
+| Default | Default formatters from data source |
- closeDialog() {
- if (this.dialogContainer) {
- ReactDOM.unmountComponentAtNode(this.dialogContainer);
- this.dialogContainer.remove();
- this.dialogContainer = null;
- }
- }
-}
-```
+See [CometChatMentionsFormatter](/ui-kit/react/mentions-formatter-guide).
-
-
- ) : null;
-}
-```
+| | |
+| --- | --- |
+| Type | `CometChat.User` |
+| Default | `undefined` |
-
-
-
-The Message Bubble structure can typically be broken down into the following views:
-
-1. **Leading view**: This is where the sender's avatar is displayed. It's typically on the left of the Message Bubble for messages from others and on the right for messages from the current user.
-
-2. **Header view**: This displays the sender's name and is especially useful in group chats where multiple users are sending messages.
-
-3. **Reply view**: This view can be used to extend the Message Bubble with additional elements. It's typically placed above the Content view.
-
-4. **Content view**: This is the core of the Message Bubble where the message content (text, images, videos, etc.) is displayed.
-
-5. **Bottom view**: This view can be used to extend the Message Bubble with additional elements, such as link previews or a 'load more' button for long messages. It's typically placed beneath the Content view.
-
-6. **Thread view**: This is where the thread reply icon and reply counts are displayed. It's located below the footer view.
-
-7. **Footer view**: This is where the reactions are displayed. It's located at the bottom of the Message Bubble.
-
-8. **Status Info view**: This is where the timestamp of the message and its delivery or read status are displayed. It's located inside the Message Bubble just below the content view.
-
-***
-
-### Properties
-
-MessageTemplate provides you with methods that allow you to alter various properties of the Message Bubble. These properties include aspects such as the `type` and `category` of a message, the appearance and behavior of the header, content, and footer sections of the message bubble,
-
-1. **type**
-
- Using `type` you can set the type of CometChatMessage, This will map your MessageTemplate to the corresponding CometChatMessage. You can set the MessageTemplates Type using the following code snippet.
-
-2. **category**
-
- Using `category` you can set the category of a MessageTemplate. This will create a MessageTemplate with the specified category and link it with a CometChatMessage of the same category.
-
- Please refer to our guide on [Message Categories](/sdk/javascript/message-structure-and-hierarchy) for a deeper understanding of message categories.
-
-3. **headerView**
-
- The `headerView` method allows you to assign a custom header view to the Message Bubble. By default, it is configured to display the sender's name.
-
-4. **contentView**
-
- The `contentView` method allows you to assign a custom content view to the Message Bubble. By default, it displays the Text Bubble, Image Bubble, File Bubble, Audio Bubble, or Video Bubble depending on the message type.
-
-5. **footerView**
-
- The `footerView` method allows you to assign a custom Footer view to the Message Bubble. By default it shows thr reactions for the message bubble.
-
-6. **bottomView**
-
- The `bottomView` method allows you to assign a custom Bottom view to the Message Bubble. By defuault is has buttons such as link previews or a 'load more' button for long messages.
-
-7. **bubbleView**
+## What It Is
- The `bubbleView` method allows you to assign a custom Bubble view to the Message Bubble. By default, headerView, contentView, statusInfoView and footerView together form a message bubble.
+`CometChatMessageTemplate` is a model class, not a rendered component. Each instance maps a message `type` + `category` pair to a set of view functions that control how that message renders inside `CometChatMessageList`. Pass an array of templates to the `templates` prop on `CometChatMessageList`.
-8. **statusInfoView**
+```tsx lines
+import { useState, useEffect } from "react";
+import {
+ CometChatMessageList,
+ CometChatMessageTemplate,
+ CometChatUIKit,
+ CometChatUIKitConstants,
+} from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
- The `statusInfoView` method allows you to assign a custom status info view to the Message Bubble. By default, it displays the receipt and timestamp.
+function CustomTemplateDemo() {
+ const [chatGroup, setChatGroup] = useState
-
- {chatGroup && (
-
- );
-};
-
-export { CustomMessageTemplate };
-```
-
-
- {chatGroup && (
-
- );
-};
+ if (!chatGroup) return null;
-export { CustomMessageTemplate };
+ return
@@ -284,8 +168,8 @@ The `contentview` method of MessageTemplate allows you to add a custom view to t
-
-```css CometChatNoSSR.css
+```css title="CometChatNoSSR.css" lines
.messages-wrapper {
- width: 100%;
- height: 100%;
- display: flex;
- flex-direction: column;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
}
.empty-conversation {
- height: 100%;
- width: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- background: white;
- color: var(--cometchat-text-color-secondary, #727272);
- font: var(--cometchat-font-body-regular, 400 14px Roboto);
+ height: 100%;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: white;
+ color: var(--cometchat-text-color-secondary, #727272);
+ font: var(--cometchat-font-body-regular, 400 14px Roboto);
}
.cometchat .cometchat-message-composer {
- border-radius: 0px;
+ border-radius: 0px;
}
```
-
-In the code snippet above, ensure you select either a user or a group based on your chat requirement. You can also determine this dynamically depending on the conversation type.
+Key points:
+- `CometChat.getUser(UID)` fetches the user object from the SDK — you need a real user object, not a manually constructed one.
+- Pass either `user` or `group` to the message components, never both.
+- The highlighted lines show where to set your credentials.
-#### **Fetching a User (One-on-One Chat)**
+---
-```javascript
-const UID = "cometchat-uid-1";
-CometChat.getUser(UID).then(
- user => {
- setSelectedUser(user);
- }, error => {
- console.log("User fetching failed with error:", error);
- }
-);
-```
+## Switching Between User and Group Chat
-#### **Fetching a Group (Group Chat)**
+To load a group chat instead of one-to-one, replace the `getUser` call with `getGroup`:
-```javascript
-const GUID = "GUID"
-CometChat.getGroup(GUID).then(
- group => {
- setSelectedGroup(group);
- }, error => {
- console.log("User fetching failed with error:", error);
- }
-);
-```
+```tsx highlight={1} lines
+const GUID = "GUID"; // Replace with your actual Group ID
-### **Step 4: Disabling SSR for `CometChatNoSSR.tsx` in Next.js**
+CometChat.getGroup(GUID)
+ .then((group) => setSelectedGroup(group))
+ .catch((error) => console.error("Failed to fetch group:", error));
+```
-In this update, we will **disable Server-Side Rendering (SSR) for `CometChatNoSSR.tsx`** while keeping the rest of the application’s SSR functionality intact. This ensures that the **CometChat UI Kit components load only on the client-side**, preventing SSR-related issues.
+---
-#### **Disabling SSR in `index.tsx`**
+## Step 2 — Disable SSR in Your Page
-Modify your `index.tsx` file to dynamically import the `CometChatNoSSR.tsx` component with `{ ssr: false }`.
+Dynamically import `CometChatNoSSR` with `ssr: false` so it only loads client-side.
-```tsx index.tsx
-import { Inter } from "next/font/google";
+```tsx title="index.tsx" lines
import dynamic from "next/dynamic";
+import "@cometchat/chat-uikit-react/css-variables.css";
-import '@cometchat/chat-uikit-react/css-variables.css';
-
-const inter = Inter({ subsets: ["latin"] });
-
-// Dynamically import CometChat component with SSR disabled
-const CometChatComponent = dynamic(() => import("../CometChatNoSSR/CometChatNoSSR"), {
- ssr: false,
-});
+const CometChatComponent = dynamic(
+ () => import("../CometChatNoSSR/CometChatNoSSR"),
+ { ssr: false }
+);
export default function Home() {
return
+
+```bash lines
+npm run dev
```
-
-***
-
-### **Step 6: Run the project**
-
+
+
+```bash lines
+pnpm dev
```
-npm run dev
+
+
+```bash lines
+yarn dev
```
+
+
-## **Next Steps**
-
-### **Enhance the User Experience**
+You should see the chat window load with the conversation for the UID you set.
-* **[Advanced Customizations](/ui-kit/react/theme)** – Personalize the chat UI to align with your brand.
+---
-***
+## Next Steps
+
+
+
+ Customize colors, fonts, and styles to match your brand
+
+
+ Browse all prebuilt UI components
+
+
+ Chat features included out of the box
+
+
diff --git a/ui-kit/react/next-tab-based-chat.mdx b/ui-kit/react/next-tab-based-chat.mdx
index 91f61a656..06a788584 100644
--- a/ui-kit/react/next-tab-based-chat.mdx
+++ b/ui-kit/react/next-tab-based-chat.mdx
@@ -1,90 +1,92 @@
---
-title: "Building A Messaging UI With Tabs, Sidebar, And Message View"
-sidebarTitle: "Tab Based Chat Experience"
+title: "Tab-Based Chat"
+sidebarTitle: "Tab-Based Chat"
+description: "Build a tab-based messaging UI with chats, calls, users, and groups in Next.js with CometChat UI Kit."
---
-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.
+
-[
](https://link.cometchat.com/next-tabs-sidebar-message)
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` |
+| Framework | Next.js |
+| Components | `CometChatConversations`, `CometChatCallLogs`, `CometChatUsers`, `CometChatGroups`, `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` |
+| Layout | Tabbed sidebar (Chats, Calls, Users, Groups) + message view |
+| Prerequisite | Complete [Next.js Integration](/ui-kit/react/next-js-integration) Steps 1–5 first |
+| SSR | Dynamic import with `ssr: false` — CometChat requires browser APIs |
+| Pattern | Full-featured messaging app with multiple sections |
-> **Tip:** You can **fork** the sandbox, insert your **CometChat credentials** (App ID, Region, Auth Key.) in the code, and immediately preview how the UI and messages respond in real time.
+
-***
+This guide builds a tabbed messaging UI — Chats, Calls, Users, and Groups tabs in the sidebar, with a message view on the right. Good for full-featured apps that need more than just conversations.
-## **User Interface Preview**
+This assumes you've already completed [Next.js Integration](/ui-kit/react/next-js-integration) (project created, UI Kit installed, CSS imported).
-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.
-
-***
-
-## **Step-by-Step Guide**
-
-### **Step 1: Create a Tab Component**
-
-To manage navigation, let's build a **`CometChatTabs`** component. This component will render different tabs and allow switching between sections dynamically.
+[](https://link.cometchat.com/next-tabs-sidebar-message)
-#### **Folder Structure**
+> Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time.
-Create a `CometChatTabs` folder inside your `src` directory and add the following files:
+---
-```php
-public/
-├── assets # These are the images you need to save
-│ ├── chats.svg
-│ ├── calls.svg
-│ ├── users.svg
-│ ├── groups.svg
-src/
-│── CometChatTabs/
-│ ├── CometChatTabs.tsx
-│ ├── CometChatTabs.css
-```
+## What You're Building
-#### **Download the Icons**
+Three sections working together:
-These icons are available in the **CometChat UI Kit assets folder**. You can find them at:\
-🔗 [GitHub Assets Folder](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app/src/assets)
+1. **Tab bar** — switches between Chats, Calls, Users, and Groups
+2. **Sidebar** — renders the list for the active tab
+3. **Message view** — header + messages + composer for the selected item
-***
+---
-#### **Implementation**
+## Step 1 — Create the Tab Component
+
+
+
+
+
+
+
+
+
+
+Tab icons need to be placed in `public/assets/`. Download them from the [CometChat UI Kit assets folder on GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app/src/assets).
+
+
+
+
+
+
+
-```tsx CometChatTabs.tsx
+```tsx title="CometChatTabs.tsx" lines
import { useState } from "react";
import "./CometChatTabs.css";
-// Define icon paths for each tab
const chatsIcon = "/assets/chats.svg";
const callsIcon = "/assets/calls.svg";
const usersIcon = "/assets/users.svg";
const groupsIcon = "/assets/groups.svg";
-// CometChatTabs component to display tab options
export const CometChatTabs = (props: {
- onTabClicked?: (tabItem: { name: string; icon?: string }) => void; // Callback when a tab is clicked
- activeTab?: string; // Name of the currently active tab
+ onTabClicked?: (tabItem: { name: string; icon?: string }) => void;
+ activeTab?: string;
}) => {
- // Destructure props with default fallback
- const {
- onTabClicked = () => {}, // Fallback to no-op if not provided
- activeTab,
- } = props;
-
- // State to track the currently hovered tab
+ const { onTabClicked = () => {}, activeTab } = props;
const [hoverTab, setHoverTab] = useState("");
- // Array of tab items with their labels and icons
const tabItems = [
{ name: "CHATS", icon: chatsIcon },
{ name: "CALLS", icon: callsIcon },
@@ -94,7 +96,6 @@ export const CometChatTabs = (props: {
return (
- 
-
-
-
-```js
-import React from "react";
-import {
- CometChatMessageList,
- CometChatUIKit,
- CometChatUIKitConstants,
- CometChatMessageTemplate,
-} from "@cometchat/chat-uikit-react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import bannerImage from "../../assets/banner.svg";
-
-const CustomMessageTemplate = () => {
- const [templates, setTemplates] = React.useState([]);
- const [chatGroup, setChatGroup] = React.useState();
-
- React.useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
+ ),
});
-
- let definedTemplates =
- CometChatUIKit.getDataSource().getAllMessageTemplates();
- const CUSTOM_MESSAGE_TYPE = "customType";
- let customMessageTemplate = new CometChatMessageTemplate({
- type: CUSTOM_MESSAGE_TYPE,
- category: CometChatUIKitConstants.MessageCategory.custom,
- contentView: (message: CometChat.BaseMessage) => getContentView(message),
- });
- definedTemplates.push(customMessageTemplate);
+ definedTemplates.push(customTemplate);
setTemplates(definedTemplates);
}, []);
- const getContentView = (message: CometChat.BaseMessage) => {
- return (
-
-
-
-```css
-.content-view__header-banner {
- border-radius: 12px;
-}
-
+
+```css lines
.content-view__body {
height: 105px;
display: flex;
@@ -490,7 +243,6 @@ export { CustomMessageTemplate };
flex-direction: column;
text-align: left;
gap: 16px;
- align-self: stretch;
}
.content-view__body-title {
@@ -514,32 +266,21 @@ export { CustomMessageTemplate };
text-decoration: line-through;
}
-.content-view__body-delivery-type {
- color: #727272;
- font: 400 14px/1.2 Roboto;
-}
-
.content-footer {
display: flex;
height: 40px;
padding: 8px 20px;
justify-content: center;
align-items: center;
- gap: 8px;
- align-self: stretch;
border-top: 1px solid #dcdcdc;
color: #6852d6;
font: 500 14px/1.2 Roboto;
}
```
-
-
-#### BottomView
-
-The `bottomView` method of MessageTemplate allows you to add a custom button view to your message bubbles. In the example below, we will add a custom bottom view to every text message in the MessageList.
+### Custom bottom view with warning
@@ -547,116 +288,48 @@ The `bottomView` method of MessageTemplate allows you to add a custom button vie
-```ts
-import React, { useEffect, useState } from "react";
+```tsx lines
+import { useState, useEffect } from "react";
import {
CometChatMessageList,
CometChatUIKit,
CometChatUIKitConstants,
+ CometChatMessageTemplate,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
-const CustomMessageTemplate = () => {
- const [templates, setTemplates] = React.useState(
- []
- );
- const [chatGroup, setChatGroup] = React.useState();
+function BottomViewDemo() {
+ const [chatGroup, setChatGroup] = useState();
+ const [templates, setTemplates] = useState([]);
useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
+ CometChat.getGroup("guid").then((group) => setChatGroup(group));
- let definedTemplates: CometChatMessageTemplate[] =
- CometChatUIKit.getDataSource().getAllMessageTemplates();
- const template = definedTemplates.map((templates) => {
+ const definedTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates();
+ const modified = definedTemplates.map((t) => {
if (
- templates.type === CometChatUIKitConstants.MessageTypes.text &&
- templates.category === CometChatUIKitConstants.MessageCategory.message
+ t.type === CometChatUIKitConstants.MessageTypes.text &&
+ t.category === CometChatUIKitConstants.MessageCategory.message
) {
- templates.bottomView = (message: CometChat.BaseMessage) =>
- getBottomView(message);
- return templates;
+ t.bottomView = (message: CometChat.BaseMessage) => (
+
-
-
-```js
-import React, { useEffect, useState } from "react";
-import { CometChatMessageList, CometChatUIKit, CometChatUIKitConstants } from '@cometchat/chat-uikit-react';
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-
-const CustomMessageTemplate = () => {
- const [templates, setTemplates] = React.useState([]);
- const [chatGroup, setChatGroup] = React.useState();
-
- useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- })
-
- let definedTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates();
- const template = definedTemplates.map((templates) => {
- if (templates.type === CometChatUIKitConstants.MessageTypes.text &&
- templates.category === CometChatUIKitConstants.MessageCategory.message) {
- templates.bottomView = (message: CometChat.BaseMessage) => getBottomView(message)
- return templates;
- }
- return templates
- })
- setTemplates(template);
- }, []);
-
- const getBottomView = (message: CometChat.BaseMessage) => {
- return (
-
-
-
-```css
+
+```css lines
.cometchat .cometchat-message-bubble__body {
border-radius: 12px 12px 0px 0px;
}
@@ -673,421 +346,91 @@ export { CustomMessageTemplate };
0deg,
rgba(244, 70, 73, 0.2) 0%,
rgba(244, 70, 73, 0.2) 100%
- ), #fff;
+ ),
+ #fff;
padding: 0px 8px 0px 5px;
}
-
-.error-icon {
- display: flex;
- width: 12px;
- height: 12px;
- justify-content: center;
- align-items: center;
- flex-shrink: 0;
- flex-shrink: 0;
- -webkit-mask: url("../assets/infoIcon.svg") center center no-repeat;
- mask: url("../assets/infoIcon.svg") center center no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
- background-color: #f44649;
-}
```
-
-
-#### FooterView
-
-The `footerView` method of MessageTemplate allows you to add a footer view to your message bubbles. In the example below, we will add a custom footer view to every text message in the MessageList.
+### Replace entire bubble
- 
+ 
-```ts
-import React, { useEffect, useState } from "react";
+```tsx lines
+import { useState, useEffect } from "react";
import {
CometChatMessageList,
CometChatUIKit,
CometChatUIKitConstants,
+ CometChatMessageTemplate,
+ MessageBubbleAlignment,
+ CometChatUIKitLoginListener,
+ MessageReceiptUtils,
+ Receipts,
+ isMessageSentByMe,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
-const CustomMessageTemplate = () => {
- const [templates, setTemplates] = React.useState(
- []
- );
- const [chatGroup, setChatGroup] = React.useState();
+function BubbleViewDemo() {
+ const [chatGroup, setChatGroup] = useState();
+ const [templates, setTemplates] = useState([]);
useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
+ CometChat.getGroup("guid").then((group) => setChatGroup(group));
- let definedTemplates: CometChatMessageTemplate[] =
- CometChatUIKit.getDataSource().getAllMessageTemplates();
- const template = definedTemplates.map((templates) => {
+ const definedTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates();
+ const modified = definedTemplates.map((t) => {
if (
- templates.type === CometChatUIKitConstants.MessageTypes.text &&
- templates.category === CometChatUIKitConstants.MessageCategory.message
+ t.type === CometChatUIKitConstants.MessageTypes.text &&
+ t.category === CometChatUIKitConstants.MessageCategory.message
) {
- templates.footerView = (message: CometChat.BaseMessage) =>
- getFooterView(message);
- return templates;
+ t.bubbleView = (
+ message: CometChat.BaseMessage,
+ alignment: MessageBubbleAlignment
+ ) => {
+ const isSentByMe = isMessageSentByMe(
+ message,
+ CometChatUIKitLoginListener.getLoggedInUser()!
+ );
+ let textMessage = "";
+ if (message instanceof CometChat.TextMessage) {
+ textMessage = message.getText();
+ }
+ return (
+
-
-
-```js
-import React, { useEffect, useState } from "react";
-import {
- CometChatMessageList,
- CometChatUIKit,
- CometChatUIKitConstants,
-} from "@cometchat/chat-uikit-react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-
-const CustomMessageTemplate = () => {
- const [templates, setTemplates] = React.useState([]);
- const [chatGroup, setChatGroup] = React.useState();
-
- useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
-
- let definedTemplates =
- CometChatUIKit.getDataSource().getAllMessageTemplates();
- const template = definedTemplates.map((templates) => {
- if (
- templates.type === CometChatUIKitConstants.MessageTypes.text &&
- templates.category === CometChatUIKitConstants.MessageCategory.message
- ) {
- templates.footerView = (message: CometChat.BaseMessage) =>
- getFooterView(message);
- return templates;
- }
- return templates;
- });
- setTemplates(template);
- }, []);
-
- const getFooterView = (message: CometChat.BaseMessage) => {
- if (message.getReactions().length > 0) {
- return (
- <>
-
-
-
-```css
-.cometchat .cometchat-message-bubble__body-footer-view {
- display: flex;
- align-items: center;
- border-top: 1px solid #dcdcdc;
- border-radius: 0px 0px 12px 12px;
- background: #e8e8e8;
- padding: 8px;
-}
-
-.cometchat-message-bubble__body-wrapper:has(
- .cometchat-message-bubble__body-footer-view
- )
- .cometchat-message-bubble__body {
- border-radius: 12px 12px 0px 0px;
-}
-```
-
-
-
-
-
-#### BubbleView
-
-The `bubbleView` method of MessageTemplate allows you to add a bubble view to your message bubbles. In the example below, we will add a custom bubble view to the text message in the MessageList.
-
-
-
-
-
-
-
-```ts
-import React, { useEffect, useState } from "react";
-import {
- CometChatMessageList,
- CometChatUIKit,
- CometChatUIKitConstants,
- CometChatMessageTemplate,
- Receipts,
- MessageBubbleAlignment,
- CometChatUIKitLoginListener,
- MessageReceiptUtils,
- isMessageSentByMe,
-} from "@cometchat/chat-uikit-react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import readIcon from "../../assets/message-read.svg";
-import sentIcon from "../../assets/message-sent.svg";
-import deliveredIcon from "../../assets/message-delivered.svg";
-
-const CustomMessageTemplate = () => {
- const [templates, setTemplates] = React.useState(
- []
- );
- const [chatGroup, setChatGroup] = React.useState();
-
- useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
-
- let definedTemplates =
- CometChatUIKit.getDataSource().getAllMessageTemplates();
- const template = definedTemplates.map((templates) => {
- if (
- templates.type === CometChatUIKitConstants.MessageTypes.text &&
- templates.category === CometChatUIKitConstants.MessageCategory.message
- ) {
- templates.bubbleView = (
- message: CometChat.BaseMessage,
- alignment: MessageBubbleAlignment
- ) => getBubbleView(message, alignment);
- return templates;
- }
- return templates;
- });
- setTemplates(template);
- }, []);
-
- const formatTime = (timestamp: number): string => {
- const date = new Date(timestamp * 1000); // Convert to milliseconds
- const hours = date.getHours();
- const minutes = date.getMinutes();
- const period = hours >= 12 ? "PM" : "AM";
- const formattedHours = hours % 12 || 12;
- const formattedMinutes = minutes < 10 ? "0" + minutes : minutes;
- return `${formattedHours}:${formattedMinutes} ${period}`;
- };
-
- const getBubbleView = (
- message: CometChat.BaseMessage,
- alignment: MessageBubbleAlignment
- ) => {
- const isSentByMe = isMessageSentByMe(
- message,
- CometChatUIKitLoginListener.getLoggedInUser()!
- );
-
- let textMessage = "";
- if (message instanceof CometChat.TextMessage) {
- textMessage = message.getText();
- }
-
- const receipt = MessageReceiptUtils.getReceiptStatus(message);
- let status = sentIcon;
-
- if (receipt === Receipts.delivered) {
- status = deliveredIcon;
- } else if (receipt === Receipts.read) {
- status = readIcon;
- } else {
- status = sentIcon;
- }
-
- return (
-
-
-
-```js
-import React, { useEffect, useState } from "react";
-import { CometChatMessageList, CometChatUIKit, CometChatUIKitConstants,CometChatMessageTemplate,Receipts,MessageBubbleAlignment,CometChatUIKitLoginListener,MessageReceiptUtils, isMessageSentByMe } from '@cometchat/chat-uikit-react';
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import readIcon from "../../assets/message-read.svg";
-import sentIcon from "../../assets/message-sent.svg";
-import deliveredIcon from "../../assets/message-delivered.svg";
-
-const CustomMessageTemplate = () => {
- const [templates, setTemplates] = React.useState([]);
- const [chatGroup, setChatGroup] = React.useState();
-
- useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- })
-
- let definedTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates();
- const template = definedTemplates.map((templates) => {
- if (templates.type === CometChatUIKitConstants.MessageTypes.text &&
- templates.category === CometChatUIKitConstants.MessageCategory.message) {
- templates.bubbleView = (message, alignment) => getBubbleView(message, alignment)
- return templates;
- }
- return templates
- })
- setTemplates(template);
- }, []);
-
- const formatTime = (timestamp) => {
- const date = new Date(timestamp * 1000); // Convert to milliseconds
- const hours = date.getHours();
- const minutes = date.getMinutes();
- const period = hours >= 12 ? 'PM' : 'AM';
- const formattedHours = hours % 12 || 12;
- const formattedMinutes = minutes < 10 ? '0' + minutes : minutes;
- return `${formattedHours}:${formattedMinutes} ${period}`;
- };
-
- const getBubbleView = (message,alignment) => {
- const isSentByMe = isMessageSentByMe(
- message,
- CometChatUIKitLoginListener.getLoggedInUser()!
- );
-
- let textMessage = "";
- if (message instanceof CometChat.TextMessage) {
- textMessage = message.getText();
- }
-
- const receipt = MessageReceiptUtils.getReceiptStatus(message);
- let status = sentIcon;
-
- if (receipt === Receipts.delivered) {
- status = deliveredIcon;
- } else if (receipt === Receipts.read) {
- status = readIcon;
- } else {
- status = sentIcon;
- }
-
- return (
-
-
-
-```css
-.bubble-view {
- display: flex;
- flex-direction: column;
- width: 100%;
- padding: 20px;
- gap: 12px;
-}
+
+```css lines
+.bubble-view {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ padding: 20px;
+ gap: 12px;
+}
.bubble-view__outgoing {
align-items: flex-end;
@@ -1102,15 +445,11 @@ export { CustomMessageTemplate };
display: flex;
flex-direction: column;
align-items: flex-end;
- position: relative;
}
.bubble-view__content__text {
width: fit-content;
- display: flex;
padding: 4px;
- flex-direction: column;
- align-items: flex-end;
border-radius: 2px 2px 0px 2px;
background: #6852d6;
color: white;
@@ -1120,816 +459,267 @@ export { CustomMessageTemplate };
background-color: #e8e8e8;
color: #141414;
}
-
-.bubble-view__content__time {
- width: fit-content;
- display: flex;
- border-radius: 2px 2px 0px 2px;
- color: #727272;
- gap: 4px;
- color: #727272;
- text-align: right;
- font: 400 10/14 Roboto;
- font-style: normal;
-}
-
-.bubble-view__outgoing .triangle {
- position: absolute;
- bottom: -10px;
- right: 0px;
- width: 0;
- height: 9px;
- border-left: 18px solid transparent;
- border-top: 10px solid #5a4fcf;
-}
-
-.bubble-view__incoming .triangle {
- position: absolute;
- bottom: -10px;
- left: 0px;
- width: 0;
- height: 9px;
- border-right: 18px solid transparent;
- border-top: 10px solid #e8e8e8;
-}
```
-
-
-#### StatusInfoView
-
-The `statusInfoView` method of MessageTemplate allows you to add a status info view to your message bubbles. In the example below, we will add a custom status info view to every text message in the MessageList.
+### Custom action sheet options
- 
+ 
-
-
-```ts
-import React, { useEffect, useState } from "react";
+```tsx lines
+import { useState, useEffect } from "react";
import {
CometChatMessageList,
CometChatUIKit,
CometChatUIKitConstants,
+ CometChatMessageTemplate,
+ CometChatActionsIcon,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
-const CustomMessageTemplate = () => {
- const [templates, setTemplates] = React.useState(
- []
- );
- const [chatGroup, setChatGroup] = React.useState();
+function OptionsDemo() {
+ const [chatGroup, setChatGroup] = useState();
+ const [templates, setTemplates] = useState([]);
useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
+ CometChat.getGroup("guid").then((group) => setChatGroup(group));
- let definedTemplates: CometChatMessageTemplate[] =
- CometChatUIKit.getDataSource().getAllMessageTemplates();
- const template = definedTemplates.map((templates) => {
+ const definedTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates();
+ const modified = definedTemplates.map((t) => {
if (
- templates.type === CometChatUIKitConstants.MessageTypes.text &&
- templates.category === CometChatUIKitConstants.MessageCategory.message
+ t.type === CometChatUIKitConstants.MessageTypes.text &&
+ t.category === CometChatUIKitConstants.MessageCategory.message
) {
- templates.statusInfoView = (message: CometChat.BaseMessage) =>
- getStatusInfo(message);
- return templates;
+ t.options = (
+ loggedInUser: CometChat.User,
+ message: CometChat.BaseMessage,
+ group?: CometChat.Group
+ ) => {
+ const defaultOptions: any =
+ CometChatUIKit.getDataSource().getMessageOptions(loggedInUser, message, group);
+ const myView: any = new CometChatActionsIcon({
+ id: "refresh",
+ title: "Refresh",
+ iconURL: "",
+ onClick: () => { /* custom logic */ },
+ });
+ defaultOptions.splice(1, 0, myView);
+ return defaultOptions;
+ };
}
- return templates;
+ return t;
});
- setTemplates(template);
+ setTemplates(modified);
}, []);
- const formatTime = (timestamp: number): string => {
- const date = new Date(timestamp * 1000); // Convert to milliseconds
- const hours = date.getHours();
- const minutes = date.getMinutes();
- const period = hours >= 12 ? "PM" : "AM";
- const formattedHours = hours % 12 || 12;
- const formattedMinutes = minutes < 10 ? "0" + minutes : minutes;
- return `${formattedHours}:${formattedMinutes} ${period}`;
- };
-
- const getStatusInfo = (message: CometChat.BaseMessage) => {
- if (message instanceof CometChat.TextMessage) {
- const timestamp = message.getSentAt();
- const formattedTime = formatTime(timestamp);
- return
-
-
-```js
-import React, { useEffect, useState } from "react";
-import { CometChatMessageList, CometChatUIKit, CometChatUIKitConstants } from '@cometchat/chat-uikit-react';
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-
-const CustomMessageTemplate = () => {
- const [templates, setTemplates] = React.useState([]);
- const [chatGroup, setChatGroup] = React.useState();
-
- useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- })
-
- let definedTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates();
- const template = definedTemplates.map((templates) => {
- if (templates.type === CometChatUIKitConstants.MessageTypes.text &&
- templates.category === CometChatUIKitConstants.MessageCategory.message) {
- templates.statusInfoView = (message) => getStatusInfo(message)
- return templates;
- }
- return templates
- })
- setTemplates(template);
- }, []);
-
- const formatTime = (timestamp) => {
- const date = new Date(timestamp * 1000); // Convert to milliseconds
- const hours = date.getHours();
- const minutes = date.getMinutes();
- const period = hours >= 12 ? 'PM' : 'AM';
- const formattedHours = hours % 12 || 12;
- const formattedMinutes = minutes < 10 ? '0' + minutes : minutes;
- return `${formattedHours}:${formattedMinutes} ${period}`;
- };
-
- const getStatusInfo = (message) => {
- if (message instanceof CometChat.TextMessage) {
- const timestamp = message.getSentAt();
- const formattedTime = formatTime(timestamp);
- return (
-
-
-
-```css
-.status-info {
- display: flex;
- width: 57px;
- height: 24px;
- justify-content: flex-end;
- align-items: center;
- border-radius: 1000px;
- color: #727272;
- text-align: right;
- font: 400 10px/120% Roboto;
- font-style: normal;
-}
-
-.cometchat .cometchat-message-bubble__body {
- background: none;
-}
+ if (!chatGroup) return null;
-.cometchat .cometchat-message-bubble .cometchat-text-bubble {
- padding: 8px;
+ return
+### New template for a custom message type
-
-
-#### ReplyView
-
-The `replyView` method of MessageTemplate allows you to add a reply view to your message bubbles. In the example below, we will style the existing reply view in the MessageList.
-
-
-
-
-
+ 
-
-
-
-```ts
-import React, { useEffect, useState } from "react";
+```tsx lines
+import { useState, useEffect } from "react";
import {
- CometChatMessageList
+ CometChatMessageList,
+ CometChatUIKit,
+ CometChatUIKitConstants,
+ CometChatMessageTemplate,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
-const CustomMessageTemplate = () => {
- const [chatGroup, setChatGroup] = React.useState();
+function NewTemplateDemo() {
+ const [chatGroup, setChatGroup] = useState();
+ const [templates, setTemplates] = useState([]);
useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
+ CometChat.getGroup("guid").then((group) => setChatGroup(group));
+
+ const definedTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates();
+ const CUSTOM_MESSAGE_TYPE = "customType";
+ const customTemplate = new CometChatMessageTemplate({
+ type: CUSTOM_MESSAGE_TYPE,
+ category: CometChatUIKitConstants.MessageCategory.custom,
+ contentView: (message: CometChat.BaseMessage) => (
+
-
-
-```js
-import React, { useEffect, useState } from "react";
-import { CometChatMessageList } from '@cometchat/chat-uikit-react';
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-
-const CustomMessageTemplate = () => {
- const [chatGroup, setChatGroup] = React.useState();
-
- useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- })
- }, []);
-
- return (
-
+`CometChatMessageTemplate` renders inside `.cometchat-message-bubble`. Style individual bubble sections using CSS:
-
-```css
-.cometchat
- .cometchat-message-bubble-outgoing
- .cometchat-message-bubble__body {
- --cometchat-primary-color: #f76808;
- --cometchat-extended-primary-color-700: rgba(251, 251, 251, 0.192);
+```css lines
+.cometchat .cometchat-message-bubble__body {
+ /* content area overrides */
}
-.cometchat .cometchat-message-bubble-incoming .bubble-view{
- --cometchat-primary-color: #f76808;
+.cometchat .cometchat-message-bubble__body-footer-view {
+ /* footer area overrides */
}
-.cometchat-message-composer__header .composer-view{
- --cometchat-primary-color: #f76808;
+.cometchat .cometchat-message-bubble__body-header-view {
+ /* header area overrides */
}
```
-
-
-
-
-#### Options
-
-The `options` method in the MessageTemplate allows you to customize the options that appear in the action sheet when a message is long-pressed. By default, CometChat UI Kit provides a set of options like "Thread Reply", "Copy" ,"Edit", and "Delete".
-
-However, if you wish to override or modify these options, you can use the `options` method and pass a list of `CometChatActionsIcon`. This list of options will replace the default set.
-
-
-
-
-
-
-
-```ts
-import React, { useEffect, useState } from "react";
-import {
- CometChatMessageList,
- CometChatUIKit,
- CometChatUIKitConstants,
- CometChatMessageTemplate,
- CometChatActionsIcon,
-} from "@cometchat/chat-uikit-react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-
-const CustomMessageTemplate = () => {
- const [templates, setTemplates] = useState(
- []
- );
- const [chatGroup, setChatGroup] = useState();
-
- useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
+---
- let definedTemplates: CometChatMessageTemplate[] =
- CometChatUIKit.getDataSource().getAllMessageTemplates();
- const template = definedTemplates.map((templates) => {
- if (
- templates.type === CometChatUIKitConstants.MessageTypes.text &&
- templates.category === CometChatUIKitConstants.MessageCategory.message
- ) {
- templates.options = (
- loggedInUser: CometChat.User,
- message: CometChat.BaseMessage,
- group?: CometChat.Group
- ) => getCustomOptions(loggedInUser, message, chatGroup);
- return templates;
- }
- return templates;
- });
- setTemplates(template);
- }, []);
+## Accessibility
- const getCustomOptions = (
- loggedInUser: CometChat.User,
- message: CometChat.BaseMessage,
- group?: CometChat.Group
- ) => {
- const defaultOptions: any =
- CometChatUIKit.getDataSource().getMessageOptions(
- loggedInUser,
- message,
- chatGroup
- );
- const myView: any = new CometChatActionsIcon({
- id: "refresh",
- title: "Refresh",
- iconURL: "", // Add your custom icon URL
- onClick: () => {
- /** Add your custom on click logic */
- },
- });
- defaultOptions.splice(1, 0, myView);
- return defaultOptions;
- };
+Message templates render inside `CometChatMessageList`, which handles keyboard navigation and focus management. Custom views returned from template functions inherit the bubble's focus and ARIA context. Ensure custom content includes appropriate `aria-label` attributes when visual-only indicators are used.
- return (
-
+## Properties
-
-```js
-import React, { useEffect, useState } from "react";
-import {
- CometChatMessageList,
- CometChatUIKit,
- CometChatUIKitConstants,
- CometChatActionsIcon,
-} from "@cometchat/chat-uikit-react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-
-const CustomMessageTemplate = () => {
- const [templates, setTemplates] = useState([]);
- const [chatGroup, setChatGroup] = useState();
+### bubbleView
- useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
+| Key | Value |
+| --- | --- |
+| Type | `((message: CometChat.BaseMessage, alignment: MessageBubbleAlignment) => Element \| JSX.Element \| null) \| null` |
+| Default | `null` |
- let definedTemplates =
- CometChatUIKit.getDataSource().getAllMessageTemplates();
- const template = definedTemplates.map((templates) => {
- if (
- templates.type === CometChatUIKitConstants.MessageTypes.text &&
- templates.category === CometChatUIKitConstants.MessageCategory.message
- ) {
- templates.options = (loggedInUser, message, group) =>
- getCustomOptions(loggedInUser, message, chatGroup);
- return templates;
- }
- return templates;
- });
- setTemplates(template);
- }, []);
+Replaces the entire message bubble. When set, `headerView`, `contentView`, `footerView`, `bottomView`, `statusInfoView`, and `replyView` are ignored for that template.
- const getCustomOptions = (loggedInUser, message, group) => {
- const defaultOptions = CometChatUIKit.getDataSource().getMessageOptions(
- loggedInUser,
- message,
- chatGroup
- );
- const myView = new CometChatActionsIcon({
- id: "refresh",
- title: "Refresh",
- iconURL: "", // Add your custom icon URL
- onClick: () => {
- /** Add your custom on click logic */
- },
- });
- defaultOptions.splice(1, 0, myView);
- return defaultOptions;
- };
+---
- return (
-
+Custom bottom section below the content area. Default renders link previews or "load more" for long messages.
-
-```css
-#refresh.cometchat-menu-list__menu .cometchat-menu-list__sub-menu-item-title {
- overflow: hidden;
- color: #6852d6;
- font: 400 14px/16.8px Roboto;
- font-style: italic;
-}
+---
-#refresh.cometchat-menu-list__menu
- .cometchat-menu-list__sub-menu-list-item-icon {
- background-color: #6852d6;
-}
-```
+### category
-
+| Key | Value |
+| --- | --- |
+| Type | `string` |
+| Default | `""` |
-
+Maps the template to a CometChat message category (e.g., `CometChatUIKitConstants.MessageCategory.message`, `CometChatUIKitConstants.MessageCategory.custom`).
-### New Templates
+---
-You can create an entirely new template for custom messages is one of the powerful features of CometChat's MessageTemplate.
+### contentView
-
-
-
+| Key | Value |
+| --- | --- |
+| Type | `((message: CometChat.BaseMessage, alignment: MessageBubbleAlignment, textFormatters?: CometChatTextFormatter[]) => Element \| JSX.Element \| null) \| null` |
+| Default | `null` |
-
-
-```ts
-import React, { useEffect, useState } from "react";
-import {
- CometChatMessageList,
- CometChatUIKit,
- CometChatUIKitConstants,
- CometChatMessageTemplate,
- MessageReceiptUtils,
- isMessageSentByMe,
- Receipts,
- CometChatUIKitLoginListener,
-} from "@cometchat/chat-uikit-react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import readIcon from "../../assets/message-read.svg";
-import sentIcon from "../../assets/message-sent.svg";
-import deliveredIcon from "../../assets/message-delivered.svg";
+Custom content area. Default renders text, image, video, audio, or file bubble based on message type.
-const CustomMessageTemplate = () => {
- const [templates, setTemplates] = React.useState(
- []
- );
- const [chatGroup, setChatGroup] = React.useState();
+---
- useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
+### footerView
- let definedTemplates =
- CometChatUIKit.getDataSource().getAllMessageTemplates();
- const CUSTOM_MESSAGE_TYPE = "customType";
- let customMessageTemplate = new CometChatMessageTemplate({
- type: CUSTOM_MESSAGE_TYPE,
- category: CometChatUIKitConstants.MessageCategory.custom,
- contentView: (message: CometChat.BaseMessage) => getContentView(message),
- });
- definedTemplates.push(customMessageTemplate);
- setTemplates(definedTemplates);
- }, []);
+| Key | Value |
+| --- | --- |
+| Type | `((message: CometChat.BaseMessage, alignment: MessageBubbleAlignment) => Element \| JSX.Element \| null) \| null` |
+| Default | `null` |
- const formatTime = (timestamp: number): string => {
- const date = new Date(timestamp * 1000); // Convert to milliseconds
- const hours = date.getHours();
- const minutes = date.getMinutes();
- const period = hours >= 12 ? "PM" : "AM";
- const formattedHours = hours % 12 || 12;
- const formattedMinutes = minutes < 10 ? "0" + minutes : minutes;
- return `${formattedHours}:${formattedMinutes} ${period}`;
- };
+Custom footer below the content area. Default renders reactions.
- const getContentView = (message: CometChat.BaseMessage) => {
- const isSentByMe = isMessageSentByMe(
- message,
- CometChatUIKitLoginListener.getLoggedInUser()!
- );
-
- const receipt = MessageReceiptUtils.getReceiptStatus(message);
- let status = sentIcon;
-
- if (receipt === Receipts.delivered) {
- status = deliveredIcon;
- } else if (receipt === Receipts.read) {
- status = readIcon;
- } else {
- status = sentIcon;
- }
-
- return (
-
+---
-
-```js
-import React, { useEffect, useState } from "react";
-import { CometChatMessageList, CometChatUIKit, CometChatUIKitConstants,
-CometChatMessageTemplate,MessageReceiptUtils,isMessageSentByMe,Receipts,CometChatUIKitLoginListener } from '@cometchat/chat-uikit-react';
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import readIcon from "../../assets/message-read.svg";
-import sentIcon from "../../assets/message-sent.svg";
-import deliveredIcon from "../../assets/message-delivered.svg";
-
-
-const CustomMessageTemplate = () => {
- const [templates, setTemplates] = React.useState([]);
- const [chatGroup, setChatGroup] = React.useState();
-
- useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- })
-
- let definedTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates();
- const CUSTOM_MESSAGE_TYPE = "customType";
- let customMessageTemplate = new CometChatMessageTemplate({
- type: CUSTOM_MESSAGE_TYPE,
- category: CometChatUIKitConstants.MessageCategory.custom,
- contentView: (message) => getContentView(message),
- });
- definedTemplates.push(customMessageTemplate);
- setTemplates(definedTemplates);
- }, []);
-
- const formatTime = (timestamp) => {
- const date = new Date(timestamp * 1000); // Convert to milliseconds
- const hours = date.getHours();
- const minutes = date.getMinutes();
- const period = hours >= 12 ? 'PM' : 'AM';
- const formattedHours = hours % 12 || 12;
- const formattedMinutes = minutes < 10 ? '0' + minutes : minutes;
- return `${formattedHours}:${formattedMinutes} ${period}`;
- };
-
- const getContentView = (message) => {
- const isSentByMe = isMessageSentByMe(
- message,
- CometChatUIKitLoginListener.getLoggedInUser()!
- );
-
- const receipt = MessageReceiptUtils.getReceiptStatus(message);
- let status = sentIcon;
-
- if (receipt === Receipts.delivered) {
- status = deliveredIcon;
- } else if (receipt === Receipts.read) {
- status = readIcon;
- } else {
- status = sentIcon;
- }
+### options
- return (
-
+---
-
-```css
-.content-view {
- display: flex;
- flex-direction: column;
- gap: 4px;
-}
+### replyView
-.content-view .cometchat-list-item {
- background: none;
-}
+| Key | Value |
+| --- | --- |
+| Type | `((message: CometChat.BaseMessage, alignment?: MessageBubbleAlignment, onReplyViewClicked?: (msg: CometChat.BaseMessage) => void, textFormatters?: CometChatTextFormatter[]) => Element \| JSX.Element \| null) \| null` |
+| Default | `null` |
-.content-view .cometchat-list-item__body-title {
- overflow: hidden;
- color: #f9f8fd;
- text-overflow: ellipsis;
- font: 500 14px/16.8px roboto;
- font-style: normal;
-}
+Custom reply preview above the content area.
-.cometchat-message-bubble-incoming .cometchat-list-item__body-title,
-.cometchat-message-bubble-incoming .content-view__header-time,
-.cometchat-message-bubble-incoming .content-view__footer-message,
-.cometchat-message-bubble-incoming .content-view__footer-add-contact {
- color: #141414;
-}
+---
-.cometchat-message-bubble-incoming .content-view__footer {
- border-top: 1px solid #dcdcdc;
-}
+### statusInfoView
-.cometchat-message-bubble-incoming .content-view__footer-add-contact {
- border-right: 1px solid #dcdcdc;
-}
+| Key | Value |
+| --- | --- |
+| Type | `((message: CometChat.BaseMessage, alignment: MessageBubbleAlignment, hideReceipts?: boolean, messageSentAtDateTimeFormat?: CalendarObject, showError?: boolean) => Element \| JSX.Element \| null) \| null` |
+| Default | `null` |
-.content-view__header-time {
- display: flex;
- justify-content: end;
- gap: 4px;
- color: #f9f8fd;
- text-align: right;
- font: 400 10px/12px roboto;
- font-style: normal;
-}
+Custom status info area. Default renders receipt icon and timestamp.
-.content-view__footer {
- border-top: 1px solid #7965db;
- display: flex;
- height: 40px;
- justify-content: center;
- align-items: center;
- align-self: stretch;
-}
+---
-.content-view__footer-add-contact {
- width: 50%;
- height: 100%;
- border-right: 1px solid #7965db;
- display: flex;
- align-items: center;
- justify-content: center;
- color: #f9f8fd;
- font: 500 14px/16.8px roboto;
- font-style: normal;
-}
+### type
-.content-view__footer-message {
- width: 50%;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- color: #f9f8fd;
- font: 500 14px/16.8px roboto;
- font-style: normal;
-}
-```
+| Key | Value |
+| --- | --- |
+| Type | `string` |
+| Default | — (required) |
-
+Maps the template to a CometChat message type (e.g., `CometChatUIKitConstants.MessageTypes.text`, `CometChatUIKitConstants.MessageTypes.image`).
-
+---
diff --git a/ui-kit/react/methods.mdx b/ui-kit/react/methods.mdx
index 0be19fef4..2b03c4a68 100644
--- a/ui-kit/react/methods.mdx
+++ b/ui-kit/react/methods.mdx
@@ -1,33 +1,49 @@
---
title: "Methods"
+description: "Reference for CometChat React UI Kit methods including init, login, logout, and message-sending wrappers."
---
-## Overview
+
-The UI Kit's core function is to extend the [Chat SDK](/sdk/javascript/overview), essentially translating the raw data and functionality provided by the underlying methods into visually appealing and easy-to-use UI components.
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` |
+| Import | `import { CometChatUIKit } from "@cometchat/chat-uikit-react";` |
+| Init | `CometChatUIKit.init(UIKitSettings)` |
+| Login (dev) | `CometChatUIKit.login("UID")` |
+| Login (prod) | `CometChatUIKit.loginWithAuthToken("AUTH_TOKEN")` |
+| Other methods | `CometChatUIKit.logout()`, `CometChatUIKit.getLoggedinUser()`, `CometChatUIKit.createUser(user)`, `CometChatUIKit.updateUser(user)` |
+| Send messages | `CometChatUIKit.sendTextMessage()`, `CometChatUIKit.sendMediaMessage()`, `CometChatUIKit.sendCustomMessage()` |
+| Note | Use these wrapper methods instead of raw SDK calls — they manage internal UI Kit eventing |
-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.
+
-The CometChat UI Kit has thoughtfully encapsulated the critical [Chat SDK](/sdk/javascript/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 UI Kit wraps the [Chat SDK](/sdk/javascript/overview) methods to manage internal eventing and keep UI components synchronized. Use these wrapper methods instead of raw SDK calls.
+
+
+`CometChatUIKit.init(UIKitSettings)` must be called before rendering any UI Kit components or calling any SDK methods. Initialization must complete before login.
+
+
+
+Auth Key is for development/testing only. In production, generate Auth Tokens on the server using the REST API and pass them to the client via `loginWithAuthToken()`. Never expose Auth Keys in production client code.
+
## Methods
-You can access the methods using the `CometChatUIKit` class. This class provides access to all the public methods exposed by the CometChat UI Kit.
+All methods are accessed via the `CometChatUIKit` class.
### Init
-This method initializes the settings required for [CometChat JavaScript SDK](/sdk/javascript/overview). First, ensure UIKitSettings is set and then call the `init()` method on the app startup.
+Initializes the [CometChat JavaScript SDK](/sdk/javascript/overview). Must be called on app startup before any other UI Kit method.
-
-Make sure you replace the **APP\_ID**, **REGION** and **AUTH\_KEY** with your CometChat App ID, Region and Auth Key in the below code. The `Auth Key` is an optional property of the `UIKitSettings` Class. It is intended for use primarily during proof-of-concept (POC) development or in the early stages of application development. You can use the [Auth Token](#login-using-auth-token) method to log in securely.
-
+Replace `APP_ID`, `REGION`, and `AUTH_KEY` with values from the CometChat Dashboard. `Auth Key` is optional — use [Auth Token](#login-using-auth-token) for production.
-```js
-import { UIKitSettingsBuilder } from "@cometchat/uikit-shared"; //import shared package
+```js lines highlight={4-6}
+import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";
const COMETCHAT_CONSTANTS = {
APP_ID: "APP_ID", // Replace with your App ID
@@ -57,11 +73,11 @@ CometChatUIKit.init(UIKitSettings)?.then(() => {
### Setting Session Storage Mode
-If you want to use session storage instead of the default local storage, you can configure it during initialization:
+To use session storage instead of the default local storage, configure it during initialization:
-```js
+```js lines highlight={5-7}
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";
@@ -89,7 +105,7 @@ CometChatUIKit.init(UIKitSettings)?.then(() => {
-```ts
+```ts lines highlight={5-7}
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";
@@ -119,11 +135,11 @@ CometChatUIKit.init(UIKitSettings)?.then(() => {
### Get Logged In User
-You can use this method to check if there is any existing session in the SDK. This method should return the details of the logged-in user.
+Checks for an existing session in the SDK. Returns the logged-in user details or `null`.
-```js
+```js lines
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
CometChatUIKit.getLoggedinUser()
@@ -141,11 +157,11 @@ CometChatUIKit.getLoggedinUser()
### Login using Auth Key
-This simple authentication procedure is useful when you are creating a POC or if you are in the development phase. For production apps, we suggest you use [AuthToken](#login-using-auth-token) instead of Auth Key.
+Simple authentication for development/POC. For production, use [Auth Token](#login-using-auth-token).
-```js
+```js lines highlight={3}
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
const UID = "UID";
@@ -170,7 +186,7 @@ CometChatUIKit.getLoggedinUser()
-```ts
+```ts lines highlight={3}
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
const UID: string = "UID";
@@ -200,7 +216,7 @@ CometChatUIKit.getLoggedinUser()
### Login using Auth Token
-This advanced authentication procedure does not use the Auth Key directly in your client code thus ensuring safety.
+Production-safe authentication that does not expose the Auth Key in client code.
1. [Create a User](https://api-explorer.cometchat.com/reference/creates-user) via the CometChat API when the user signs up in your app.
2. [Create an Auth Token](https://api-explorer.cometchat.com/reference/create-authtoken) via the CometChat API for the new user and save the token in your database.
@@ -208,7 +224,7 @@ This advanced authentication procedure does not use the Auth Key directly in you
-```js
+```js lines highlight={3}
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
const authToken = "AUTH_TOKEN";
@@ -234,12 +250,12 @@ CometChatUIKit.getLoggedinUser()
-```ts
+```ts lines highlight={3}
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
const authToken: string = "AUTH_TOKEN";
-CometChat.getLoggedinUser()
+CometChatUIKit.getLoggedinUser()
.then((user: CometChat.User) => {
if (!user) {
//Login user
@@ -262,11 +278,11 @@ CometChat.getLoggedinUser()
### Logout
-This method is used to end the user session of the logged-in user
+Ends the current user session.
-```js
+```js lines
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
CometChatUIKit.logout();
@@ -280,11 +296,11 @@ CometChatUIKit.logout();
### Create user
-This method takes a `User` object and the `Auth Key` as input parameters and returns the created `User` object if the request is successful.
+Takes a `User` object and Auth Key, returns the created `User` object.
-```js
+```js lines highlight={4-6}
import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
@@ -311,7 +327,7 @@ CometChatUIKit.createUser(user, authKey)
-```ts
+```ts lines highlight={4-6}
import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
@@ -343,11 +359,11 @@ CometChatUIKit.createUser(user, authKey)
### Update user
-This method takes a `User` object and the `Auth Key` as inputs and returns the updated `User` object on the successful execution of the request.
+Takes a `User` object and Auth Key, returns the updated `User` object.
-```js
+```js lines highlight={4-6}
import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
@@ -367,7 +383,7 @@ CometChatUIKit.updateUser(user, authKey)
-```ts
+```ts lines highlight={4-6}
import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
@@ -394,11 +410,11 @@ CometChatUIKit.updateUser(user, authKey)
#### Text message
-This method sends a text message in a 1:1 or group chat. You need to pass a `TextMessage` object to it.
+Sends a text message in a 1:1 or group chat. Takes a `TextMessage` object.
-```tsx
+```tsx lines highlight={5-6}
import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package
@@ -422,7 +438,7 @@ CometChatUIKit.sendTextMessage(textMessage)
-```tsx
+```tsx lines highlight={5-6}
import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package
@@ -451,17 +467,15 @@ CometChatUIKit.sendMessage(textMessage)
#### Media message
-This method sends a media message in a 1:1 or group chat. You need to pass a `MediaMessage` object to it.
+Sends a media message in a 1:1 or group chat. Takes a `MediaMessage` object.
-
-Make sure you replace the `INPUT FILE OBJECT` with the actual [file](https://developer.mozilla.org/en-US/docs/Web/API/File).
-
+Replace `INPUT FILE OBJECT` with the actual [File](https://developer.mozilla.org/en-US/docs/Web/API/File) object.
-```tsx
+```tsx lines highlight={5}
import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package
@@ -486,7 +500,7 @@ CometChatUIKit.sendMediaMessage(mediaMessage)
-```tsx
+```tsx lines highlight={5}
import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package
@@ -516,11 +530,11 @@ CometChatUIKit.sendMediaMessage(mediaMessage)
#### Custom message
-This method allows you to send custom messages which are neither text nor media messages.
+Sends a custom message (neither text nor media) in a 1:1 or group chat. Takes a `CustomMessage` object.
-```tsx
+```tsx lines highlight={5,7,8}
import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package
@@ -549,7 +563,7 @@ CometChatUIKit.sendCustomMessage(customMessage)
-```tsx
+```tsx lines highlight={5,7,8}
import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package
diff --git a/ui-kit/react/next-conversation.mdx b/ui-kit/react/next-conversation.mdx
index 1d8800f66..4e12b8881 100644
--- a/ui-kit/react/next-conversation.mdx
+++ b/ui-kit/react/next-conversation.mdx
@@ -1,227 +1,212 @@
---
-title: "Building A Conversation List + Message View"
+title: "Conversation List + Message View"
sidebarTitle: "Conversation List + Message View"
+description: "Build a two-panel conversation list + message view layout in Next.js with CometChat UI Kit."
---
-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**.
+
-This design enables users to switch between conversations effortlessly while keeping the chat window open, ensuring a **smooth, real-time messaging experience**.
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` |
+| Framework | Next.js |
+| Components | `CometChatConversations`, `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` |
+| Layout | Two-panel — conversation list (left) + message view (right) |
+| Prerequisite | Complete [Next.js Integration](/ui-kit/react/next-js-integration) Steps 1–5 first |
+| SSR | Dynamic import with `ssr: false` — CometChat requires browser APIs |
+| Pattern | WhatsApp Web, Slack, Microsoft Teams |
-[](https://link.cometchat.com/next-conversation-list-message)
-
-> **Tip:** You can **fork** the sandbox, insert your **CometChat credentials** (App ID, Region, Auth Key.) in the code, and immediately preview how the UI and messages respond in real time.
+
-***
+This guide builds a two-panel chat layout — conversation list on the left, messages on the right. Users tap a conversation to open it.
-## **User Interface Overview**
+This assumes you've already completed [Next.js Integration](/ui-kit/react/next-js-integration) (project created, UI Kit installed, CSS imported).
-This layout is structured into three key sections:
-
-1. **Sidebar (Conversation List)** – Displays active conversations, including users and groups.
-2. **Message View** – Shows chat messages for the selected conversation in real-time.
-3. **Message Composer** – Provides an input field for typing and sending messages, along with support for media, emojis, and reactions.
-
-***
+[](https://link.cometchat.com/next-conversation-list-message)
-## **Step-by-Step Guide**
+> Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time.
-### **Step 1: Create Sidebar**
+---
-Let's create the `Sidebar` component which will render different conversations.
+## What You're Building
-#### **Folder Structure**
+Three sections working together:
-Create a `CometChatSelector` folder inside your `src/app` directory and add the following files:
+1. **Sidebar (conversation list)** — shows all active conversations (users and groups)
+2. **Message view** — displays chat messages for the selected conversation in real time
+3. **Message composer** — text input with support for media, emojis, and reactions
-```swift
-src/app/
-│── CometChatSelector/
-│ ├── CometChatSelector.tsx
-│ ├── CometChatSelector.css
-```
+---
-#### **Download the Icon**
+## Step 1 — Create the Sidebar Component
-These icons are available in the **CometChat UI Kit assets folder**. You can find them at:\
-🔗 [GitHub Assets Folder](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app/src/assets)
+
+
+
+
+
+
+
+
-```tsx CometChatSelector.tsx
+```tsx title="CometChatSelector.tsx" lines
import { useEffect, useState } from "react";
-import { Conversation, Group, User } from "@cometchat/chat-sdk-javascript";
+import { Conversation, Group, User, CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatConversations, CometChatUIKitLoginListener } from "@cometchat/chat-uikit-react";
-import { CometChat } from '@cometchat/chat-sdk-javascript';
import "./CometChatSelector.css";
-// Define props interface for component
interface SelectorProps {
- onSelectorItemClicked?: (input: User | Group | Conversation, type: string) => void;
+ onSelectorItemClicked?: (input: User | Group | Conversation, type: string) => void;
}
-// CometChatSelector component definition
export const CometChatSelector = (props: SelectorProps) => {
- const {
- onSelectorItemClicked = () => { }, // Default function if no prop is provided
- } = props;
-
- // State to store the currently logged-in user
- const [loggedInUser, setLoggedInUser] = useState();
-
- // State to track the currently selected item (conversation, user, group, or call)
- const [activeItem, setActiveItem] = useState<
- CometChat.Conversation | CometChat.User | CometChat.Group | CometChat.Call | undefined
- >();
-
- useEffect(() => {
- // Retrieve the logged-in user from CometChat's login listener
- let loggedInUser = CometChatUIKitLoginListener.getLoggedInUser();
- setLoggedInUser(loggedInUser);
- }, [CometChatUIKitLoginListener?.getLoggedInUser()]); // Dependency array to trigger effect when user changes
-
- return (
- <>
- {/* Render CometChatConversations only if a user is logged in */}
- {loggedInUser && (
- <>
- {
- setActiveItem(e); // Update the selected item state
- onSelectorItemClicked(e, "updateSelectedItem"); // Trigger callback with selected item
- }}
- />
-
- )}
-
- );
-};
+ const { onSelectorItemClicked = () => {} } = props;
+ const [loggedInUser, setLoggedInUser] = useState();
+ const [activeItem, setActiveItem] = useState<
+ CometChat.Conversation | CometChat.User | CometChat.Group | undefined
+ >();
+
+ useEffect(() => {
+ const user = CometChatUIKitLoginListener.getLoggedInUser();
+ setLoggedInUser(user);
+ }, []);
+
+ return (
+ <>
+ {loggedInUser && (
+ {
+ setActiveItem(e);
+ onSelectorItemClicked(e, "updateSelectedItem");
+ }}
+ />
+ )}
+
+ );
+};
```
-
-```css CometChatSelector.css
-/* Style for the icon in the header menu of the conversation list */
+```css title="CometChatSelector.css" lines
.selector-wrapper .cometchat-conversations .cometchat-list__header-menu .cometchat-button__icon {
- background: var(--cometchat-icon-color-primary);
+ background: var(--cometchat-icon-color-primary);
}
-/* Change background color of icon on hover */
.cometchat-conversations .cometchat-list__header-menu .cometchat-button__icon:hover {
- background: var(--cometchat-icon-color-highlight);
+ background: var(--cometchat-icon-color-highlight);
}
-/* Remove the right border from the search bar */
.cometchat-list__header-search-bar {
- border-right: none;
+ border-right: none;
}
-/* Align submenu items to the left */
.cometchat .cometchat-menu-list__sub-menu-list-item {
- text-align: left;
+ text-align: left;
}
-/* Set specific width and positioning for submenu list */
.cometchat .cometchat-conversations .cometchat-menu-list__sub-menu-list {
- width: 212px;
- top: 40px !important;
- left: 172px !important;
+ width: 212px;
+ top: 40px !important;
+ left: 172px !important;
}
-/* Style the logged-in user section with a bottom border */
#logged-in-user {
- border-bottom: 2px solid var(--cometchat-border-color-default, #E8E8E8);
+ border-bottom: 2px solid var(--cometchat-border-color-default, #E8E8E8);
}
-/* Prevent cursor interaction on logged-in user menu items */
#logged-in-user .cometchat-menu-list__sub-menu-item-title,
#logged-in-user .cometchat-menu-list__sub-menu-list-item {
- cursor: default;
+ cursor: default;
}
-/* Style for logout icon with error color */
.cometchat-menu-list__sub-menu-list-item-icon-log-out {
- background-color: var(--cometchat-error-color, #F44649);
+ background-color: var(--cometchat-error-color, #F44649);
}
-/* Style for logout text with error color */
.cometchat-menu-list__sub-menu-item-title-log-out {
- color: var(--cometchat-error-color, #F44649);
+ color: var(--cometchat-error-color, #F44649);
}
-/* Allow pointer interaction on submenu items inside chat menu */
.chat-menu .cometchat .cometchat-menu-list__sub-menu-item-title {
- cursor: pointer;
+ cursor: pointer;
}
-/* Remove shadow from submenu inside chat menu */
.chat-menu .cometchat .cometchat-menu-list__sub-menu {
- box-shadow: none;
+ box-shadow: none;
}
-/* Style for submenu icons inside chat menu */
.chat-menu .cometchat .cometchat-menu-list__sub-menu-icon {
- background-color: var(--cometchat-icon-color-primary, #141414);
- width: 24px;
- height: 24px;
+ background-color: var(--cometchat-icon-color-primary, #141414);
+ width: 24px;
+ height: 24px;
}
```
-
-### **Step 2: Render Experience**
+---
-Now we will create the `CometChatNoSSR.tsx` & `CometChatNoSSR.css` files. Here, we will initialize the CometChat UI Kit, log in a user, and build the messaging experience using `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer` components.
+## Step 2 — Create the CometChatNoSSR Component
-```
-src/
-│── CometChatNoSSR/
-│ ├── CometChatNoSSR.tsx
-│ ├── CometChatNoSSR.css
-```
+This component handles init, login, and renders the full chat experience. It runs client-side only.
+
+
+
+
+
+
+
+
+
-```tsx CometChatNoSSR.tsx
+```tsx title="CometChatNoSSR.tsx" lines highlight={15-17, 20}
import React, { useEffect, useState } from "react";
-import {
- CometChatMessageComposer,
- CometChatMessageHeader,
- CometChatMessageList,
- CometChatUIKit,
- UIKitSettingsBuilder
+import {
+ CometChatMessageComposer,
+ CometChatMessageHeader,
+ CometChatMessageList,
+ CometChatUIKit,
+ UIKitSettingsBuilder,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatSelector } from "../CometChatSelector/CometChatSelector";
import "./CometChatNoSSR.css";
-// Constants for CometChat configuration
+// Replace with your actual credentials
const COMETCHAT_CONSTANTS = {
- APP_ID: "",
- REGION: "",
- AUTH_KEY: "",
+ APP_ID: "", // Replace with your App ID
+ REGION: "", // Replace with your Region
+ AUTH_KEY: "", // Replace with your Auth Key (dev only)
};
-// Functional Component
+const UID = "cometchat-uid-1"; // Replace with your actual UID
+
const CometChatNoSSR: React.FC = () => {
- // State to store the logged-in user
const [user, setUser] = useState(undefined);
- // State to store selected user or group
const [selectedUser, setSelectedUser] = useState(undefined);
const [selectedGroup, setSelectedGroup] = useState(undefined);
useEffect(() => {
- // Initialize UIKit settings
const UIKitSettings = new UIKitSettingsBuilder()
.setAppId(COMETCHAT_CONSTANTS.APP_ID)
.setRegion(COMETCHAT_CONSTANTS.REGION)
@@ -229,15 +214,12 @@ const CometChatNoSSR: React.FC = () => {
.subscribePresenceForAllUsers()
.build();
- // Initialize CometChat UIKit
CometChatUIKit.init(UIKitSettings)
?.then(() => {
console.log("Initialization completed successfully");
- // Check if user is already logged in
CometChatUIKit.getLoggedinUser().then((loggedInUser) => {
if (!loggedInUser) {
- // Perform login if no user is logged in
- CometChatUIKit.login("cometchat-uid-1")
+ CometChatUIKit.login(UID)
.then((user) => {
console.log("Login Successful", { user });
setUser(user);
@@ -254,16 +236,13 @@ const CometChatNoSSR: React.FC = () => {
return user ? (
-
-```css CometChatNoSSR.css
-/* Layout for the main conversations and messages container */
+```css title="CometChatNoSSR.css" lines
.conversations-with-messages {
- display: flex;
- height: 100%;
- width: 100%;
+ display: flex;
+ height: 100%;
+ width: 100%;
}
-/* Sidebar wrapper for conversations */
.conversations-wrapper {
- height: 100%;
- width: 480px; /* Fixed width for conversation list */
- overflow: hidden;
- display: flex;
- flex-direction: column;
- height: inherit;
+ height: 100%;
+ width: 480px;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ height: inherit;
}
-/* Hide overflow for the conversation list */
.conversations-wrapper > .cometchat {
- overflow: hidden;
+ overflow: hidden;
}
-/* Message section layout */
.messages-wrapper {
- width: calc(100% - 480px); /* Take remaining space */
- height: 100%;
- display: flex;
- flex-direction: column;
+ width: calc(100% - 480px);
+ height: 100%;
+ display: flex;
+ flex-direction: column;
}
-/* Display styling for when no conversation is selected */
.empty-conversation {
- height: 100%;
- width: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- background: white;
- color: var(--cometchat-text-color-secondary, #727272);
- font: var(--cometchat-font-body-regular, 400 14px Roboto);
+ height: 100%;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: white;
+ color: var(--cometchat-text-color-secondary, #727272);
+ font: var(--cometchat-font-body-regular, 400 14px Roboto);
}
-/* Ensure message composer does not have rounded corners */
.cometchat .cometchat-message-composer {
- border-radius: 0px;
+ border-radius: 0px;
}
```
-
-### **Step 3: Disabling SSR for `CometChatNoSSR.tsx` in Next.js**
-
-In this update, we will **disable Server-Side Rendering (SSR) for `CometChatNoSSR.tsx`** while keeping the rest of the application’s SSR functionality intact. This ensures that the **CometChat UI Kit components load only on the client-side**, preventing SSR-related issues.
+---
-#### **Disabling SSR in `index.tsx`**
+## Step 3 — Disable SSR in Your Page
-Modify your `index.tsx` file to dynamically import the `CometChatNoSSR.tsx` component with `{ ssr: false }`.
+Dynamically import `CometChatNoSSR` with `ssr: false` so it only loads client-side.
-```tsx index.tsx
-import { Inter } from "next/font/google";
+```tsx title="index.tsx" lines
import dynamic from "next/dynamic";
+import "@cometchat/chat-uikit-react/css-variables.css";
-import '@cometchat/chat-uikit-react/css-variables.css';
-
-const inter = Inter({ subsets: ["latin"] });
-
-// Dynamically import CometChat component with SSR disabled
-const CometChatComponent = dynamic(() => import("../CometChatNoSSR/CometChatNoSSR"), {
- ssr: false,
-});
+const CometChatComponent = dynamic(
+ () => import("../CometChatNoSSR/CometChatNoSSR"),
+ { ssr: false }
+);
export default function Home() {
return
+
+```bash lines
+npm run dev
```
-
-### **Step 5: Run the project**
-
+
+
+```bash lines
+pnpm dev
```
-npm run dev
+
+
+```bash lines
+yarn dev
```
+
+
-***
-
-## **Next Steps**
-
-### **Enhance the User Experience**
+You should see the conversation list on the left. Tap any conversation to load messages on the right.
-* **[Advanced Customizations](/ui-kit/react/theme)** – Personalize the chat UI to align with your brand.
+---
-***
+## Next Steps
+
+
+
+ Customize colors, fonts, and styles to match your brand
+
+
+ Browse all prebuilt UI components
+
+
+ Chat features included out of the box
+
+
diff --git a/ui-kit/react/next-js-integration.mdx b/ui-kit/react/next-js-integration.mdx
index 0d4c40aac..ca539b5ed 100644
--- a/ui-kit/react/next-js-integration.mdx
+++ b/ui-kit/react/next-js-integration.mdx
@@ -1,138 +1,96 @@
---
-title: "Getting Started With CometChat React UI Kit For Next.js"
+title: "Next.js Integration"
sidebarTitle: "Integration"
+description: "Add CometChat to a Next.js app in 5 steps: create project, install, init, login, render."
---
-The **CometChat UI Kit for React** streamlines the integration of in-app chat functionality by providing a **comprehensive set of prebuilt UI components**. It offers seamless **theming options**, including **light and dark modes**, customizable fonts, colors, and extensive styling capabilities.
+
-With built-in support for **one-to-one and group conversations**, developers can efficiently enable chat features within their applications. Follow this guide to **quickly integrate chat functionality** using the CometChat React UI Kit.
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` |
+| Peer deps | `react` >=18, `react-dom` >=18, `rxjs` ^7.8.1 |
+| Init | `CometChatUIKit.init(UIKitSettings)` — must resolve before `login()` |
+| Login | `CometChatUIKit.login("UID")` — must resolve before rendering components |
+| Order | `init()` → `login()` → render. Breaking this order = blank screen |
+| Auth Key | Dev/testing only. Use Auth Token in production |
+| SSR | CometChat requires browser APIs — use dynamic import with `ssr: false` |
+| CSS | `@import url("@cometchat/chat-uikit-react/css-variables.css");` in global CSS |
+| Calling | Optional. Install `@cometchat/calls-sdk-javascript` to enable |
+| Other frameworks | [React.js](/ui-kit/react/react-js-integration) · [React Router](/ui-kit/react/react-router-integration) · [Astro](/ui-kit/react/astro-integration) |
-{/*
- 
- */}
+
+
+This guide walks you through adding CometChat to a Next.js app. By the end you'll have a working chat UI.
-***
-
-## **Prerequisites**
-
-Before installing the **CometChat UI Kit for React**, you must first **create a CometChat application** via the **[CometChat Dashboard](https://app.cometchat.com/)**. The dashboard provides all the essential chat service components, including:
-
-* **User Management**
-* **Group Chat & Messaging**
-* **Voice & Video Calling**
-* **Real-time Notifications**
-
-> To initialize the **UI Kit**, you will need the following credentials from your **CometChat application**:
->
-> 1. **App ID**
-> 2. **Auth Key**
-> 3. **Region**
->
-> Ensure you have these details ready before proceeding with the installation and configuration.
-
-***
-
-## **Register & Set Up CometChat**
-
-Follow these steps to **register on CometChat** and **set up your development environment**.
-
-### **Step 1: Register on CometChat**
-
-To use **CometChat UI Kit**, you first need to register on the **CometChat Dashboard**.
-
-🔗 **[Click here to Sign Up](https://app.cometchat.com/login)**
-
-### **Step 2: Get Your Application Keys**
-
-After registering, create a **new app** and retrieve your **authentication details**:
+
+CometChat UI Kit requires browser APIs (`window`, `WebSocket`, `document`). In Next.js, always load CometChat components client-side using dynamic imports with `ssr: false`.
+
-1. Navigate to **Application**, then select the **Credentials** section.
-
-2. Note down the following keys:
-
- * **App ID**
- * **Auth Key**
- * **Region**
-
-
-
-Each CometChat application can be integrated with a **single client app**. Users within the same application can communicate across multiple platforms, including **web and mobile**.
-
-
-
-### **Step 3: Set Up Your Development Environment**
-
-Ensure your system meets the following **prerequisites** before proceeding with integration.
+---
-**System Requirements:**
+## Prerequisites
-* **Node.js** installed on your machine.
-* A code editor like **[Visual Studio Code](https://code.visualstudio.com/)** or **[Cursor](https://www.cursor.com/)**.
-* **npm** or **Yarn** package manager installed.
+You need three things from the [CometChat Dashboard](https://app.cometchat.com/):
-***
+| Credential | Where to find it |
+| --- | --- |
+| App ID | Dashboard → Your App → Credentials |
+| Auth Key | Dashboard → Your App → Credentials |
+| Region | Dashboard → Your App → Credentials (e.g. `us`, `eu`, `in`) |
-## **Built With**
+You also need Node.js (v16+) and npm/yarn installed.
-The CometChat UI Kit for React relies on the following technologies:
+
+Auth Key is for development only. In production, generate Auth Tokens server-side via the [REST API](https://api-explorer.cometchat.com/) and use [`loginWithAuthToken()`](/ui-kit/react/methods#login-using-auth-token). Never ship Auth Keys in client code.
+
-| Technology | Description |
-| ---------------------------------------------------- | ------------------------------------- |
-| [Node.js](https://nodejs.org/) | JavaScript runtime environment |
-| [npm](https://www.npmjs.com/get-npm) | Node Package Manager |
-| [React](https://www.npmjs.com/package/react) | JavaScript library for UI development |
-| [React DOM](https://www.npmjs.com/package/react-dom) | React package for rendering UI |
+---
-***
+## Step 1 — Create a Next.js Project
-## **Getting Started**
+```bash lines
+npx create-next-app@latest my-app --typescript
+cd my-app
+```
-### **Step 1: Create a Next.js Project**
+---
-1. **Open your code editor** (e.g., **VS Code**, **Cursor**).
-2. **Initialize a new Next.js project** using one of the following methods:
+## Step 2 — Install the UI Kit
-
-**Using Create Next App**
-
+
+```bash lines
+npm install @cometchat/chat-uikit-react
```
-npx create-next-app@latest my-app --typescript
-cd my-app
+
+
+```bash lines
+yarn add @cometchat/chat-uikit-react
```
-
-
-3. **Open the project directory in your code editor**.
-4. **Begin developing your Next.js application in the "app" directory.**.
-5. **Install additional dependencies as needed**.
-
-***
-
-### **Step 2: Install Dependencies**
+This installs the UI Kit and its dependency `@cometchat/chat-sdk-javascript` automatically.
-The **CometChat UI Kit for React** is an **extension** of the **CometChat JavaScript SDK**.\
-Installing it will **automatically** include the core **Chat SDK**, enabling **seamless integration**.
+If you want voice/video calling, also install:
-```java
-npm install @cometchat/chat-uikit-react
+```bash lines
+npm install @cometchat/calls-sdk-javascript
```
-***
+---
-### **Step 3: Initialize CometChat UI Kit**
+## Step 3 — Initialize CometChat
-Before using any features of the **CometChat UI Kit** or **CometChat SDK**, you must **initialize** the required settings.
-```ts
+```ts lines highlight={7-9}
import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";
/**
@@ -144,35 +102,24 @@ const COMETCHAT_CONSTANTS = {
AUTH_KEY: "AUTH_KEY", // Replace with your Auth Key (leave blank if using Auth Token)
};
-/**
- * Configure the CometChat UI Kit using the UIKitSettingsBuilder.
- * This setup determines how the chat UI behaves.
- */
const UIKitSettings = new UIKitSettingsBuilder()
- .setAppId(COMETCHAT_CONSTANTS.APP_ID) // Assign the App ID
- .setRegion(COMETCHAT_CONSTANTS.REGION) // Assign the App's Region
- .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY) // Assign the Authentication Key (if applicable)
- .subscribePresenceForAllUsers() // Enable real-time presence updates for all users
- .build(); // Build the final configuration
+ .setAppId(COMETCHAT_CONSTANTS.APP_ID)
+ .setRegion(COMETCHAT_CONSTANTS.REGION)
+ .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
+ .subscribePresenceForAllUsers()
+ .build();
-/**
- * Initialize the CometChat UI Kit with the configured settings.
- * Once initialized successfully, you can proceed with user authentication and chat features.
- */
-CometChatUIKit.init(UIKitSettings)!
- .then(() => {
+CometChatUIKit.init(UIKitSettings)
+ ?.then(() => {
console.log("CometChat UI Kit initialized successfully.");
- // You can now call login function to authenticate users
})
.catch((error) => {
- console.error("CometChat UI Kit initialization failed:", error); // Log errors if initialization fails
+ console.error("CometChat UI Kit initialization failed:", error);
});
```
-
-
-```js
+```js lines highlight={7-9}
import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";
/**
@@ -184,80 +131,45 @@ const COMETCHAT_CONSTANTS = {
AUTH_KEY: "AUTH_KEY", // Replace with your Auth Key (leave blank if using Auth Token)
};
-/**
- * Configure the CometChat UI Kit using the UIKitSettingsBuilder.
- * This setup determines how the chat UI behaves.
- */
const UIKitSettings = new UIKitSettingsBuilder()
- .setAppId(COMETCHAT_CONSTANTS.APP_ID) // Assign the App ID
- .setRegion(COMETCHAT_CONSTANTS.REGION) // Assign the App's Region
- .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY) // Assign the Authentication Key (if applicable)
- .subscribePresenceForAllUsers() // Enable real-time presence updates for all users
- .build(); // Build the final configuration
+ .setAppId(COMETCHAT_CONSTANTS.APP_ID)
+ .setRegion(COMETCHAT_CONSTANTS.REGION)
+ .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
+ .subscribePresenceForAllUsers()
+ .build();
-/**
- * Initialize the CometChat UI Kit with the configured settings.
- * Once initialized successfully, you can proceed with user authentication and chat features.
- */
CometChatUIKit.init(UIKitSettings)
.then(() => {
console.log("CometChat UI Kit initialized successfully.");
- // You can now call login function to authenticate users
})
.catch((error) => {
- console.error("CometChat UI Kit initialization failed:", error); // Log errors if initialization fails
+ console.error("CometChat UI Kit initialization failed:", error);
});
```
-
-
-
-
-Ensure you replace the placeholders with your actual CometChat credentials.
-
-
-
-***
-
-### **Step 4: User Login**
-
-To authenticate a user, you need a **`UID`**. You can either:
-
-1. **Create new users** on the **[CometChat Dashboard](https://app.cometchat.com)**, **[CometChat SDK Method](/ui-kit/react/methods#create-user)** or **[via the API](https://api-explorer.cometchat.com/reference/creates-user)**.
+
+`init()` must resolve before you call `login()`. If you call `login()` before init completes, it will fail silently. Note the `?.then()` — in Next.js, `init()` may return `undefined` if settings are invalid.
+
-2. **Use pre-generated test users**:
-
- * `cometchat-uid-1`
- * `cometchat-uid-2`
- * `cometchat-uid-3`
- * `cometchat-uid-4`
- * `cometchat-uid-5`
-
-The **Login** method returns a **User object** containing all relevant details of the logged-in user.
-
-***
+---
-
+## Step 4 — Login
-**Security Best Practices**
+After init resolves, log the user in. For development, use one of the pre-created test UIDs:
-* The **Auth Key** method is recommended for **proof-of-concept (POC) development** and early-stage testing.
-* For **production environments**, it is strongly advised to use an **[Auth Token](/ui-kit/react/methods#login-using-auth-token)** instead of an **Auth Key** to enhance security and prevent unauthorized access.
-
-
+`cometchat-uid-1` · `cometchat-uid-2` · `cometchat-uid-3` · `cometchat-uid-4` · `cometchat-uid-5`
-```ts
+```ts lines highlight={3}
import { CometChatUIKit } from "@cometchat/chat-uikit-react";
const UID = "UID"; // Replace with your actual UID
CometChatUIKit.getLoggedinUser().then((user: CometChat.User | null) => {
if (!user) {
- // If no user is logged in, proceed with login
CometChatUIKit.login(UID)
.then((user: CometChat.User) => {
console.log("Login Successful:", { user });
@@ -265,22 +177,19 @@ CometChatUIKit.getLoggedinUser().then((user: CometChat.User | null) => {
})
.catch(console.log);
} else {
- // If user is already logged in, mount your app
+ // Already logged in — mount your app
}
});
```
-
-
-```js
+```js lines highlight={3}
import { CometChatUIKit } from "@cometchat/chat-uikit-react";
const UID = "UID"; // Replace with your actual UID
CometChatUIKit.getLoggedinUser().then((user) => {
if (!user) {
- // If no user is logged in, proceed with login
CometChatUIKit.login(UID)
.then((user) => {
console.log("Login Successful:", { user });
@@ -288,147 +197,147 @@ CometChatUIKit.getLoggedinUser().then((user) => {
})
.catch(console.log);
} else {
- // If user is already logged in, mount your app
+ // Already logged in — mount your app
}
});
```
-
-
-***
-
-### **Step 5: Choose a Chat Experience**
+Key points:
+- `getLoggedinUser()` checks for an existing session so you don't re-login unnecessarily.
+- `login(uid)` skips the API call if a session already exists and returns the cached user.
+- Components must not render until login resolves — use a state flag to gate rendering.
-Integrate a conversation view that suits your application's **UX requirements**. Below are the available options:
-
-***
-
-#### **1️⃣ Conversation List + Message View**
+
+For production, use [`loginWithAuthToken()`](/ui-kit/react/methods#login-using-auth-token) instead of Auth Key. Generate tokens server-side via the REST API.
+
-**Best for:** Applications that need a **two-panel layout**, such as web-based chat interfaces (e.g., WhatsApp Web, Slack).
+---
-**Features:**
+## Step 5 — Add the CSS Import
-* **Two-panel layout** – Displays the conversation list on the left and the active chat window on the right.
-* **One-to-one & group conversations** – Seamless switching between private and group chats.
-* **Multiple conversations** – Effortlessly switch between different chat windows.
-* **Easy navigation** – Intuitive UI for finding and accessing chats quickly.
-* **Tap-to-view on mobile** – In mobile layouts, tapping a conversation opens the **Message View**, optimizing space.
-* **Real-time updates** – Auto-refreshes messages and conversation lists.
-* **Message sync** – Ensures messages stay updated across all sessions and devices.
+Add this line at the top of your global CSS file (e.g. `globals.css`):
-
-
-
+```css title="globals.css" lines
+@import url("@cometchat/chat-uikit-react/css-variables.css");
+```
-**Recommended for:**
+Also ensure your global CSS sets `height: 100%` on the root elements:
-* Desktop-first applications
-* Apps requiring a **rich user experience** with seamless navigation
-* Platforms supporting both **individual and group messaging**
-* **Mobile-friendly** apps needing a **tap-to-open message view**
+```css title="globals.css" lines
+html,
+body {
+ height: 100%;
+}
-[](https://link.cometchat.com/next-conversation-list-message)
+#__next {
+ height: 100%;
+}
+```
-> **Tip:** You can **fork** the sandbox, insert your **CometChat credentials** (App ID, Region, Auth Key.) in the code, and immediately preview how the UI and messages respond in real time.
+Without the CSS import, components will render with broken or missing styles. Without the height rules, the chat UI won't fill the viewport.
-[Integrate Conversation List + Message](./next-conversation)
+---
-***
+## Step 6 — Choose a Chat Experience
-#### **2️⃣ One-to-One/Group Chat**
+Integrate a conversation view that suits your app's UX. Each option below includes a live CodeSandbox demo and a step-by-step guide.
-**Best for:** Apps that require a **focused, direct messaging experience** without a sidebar.
+### Conversation List + Message View
-**Features:**
+Two-panel layout — conversation list on the left, messages on the right. Think WhatsApp Web or Slack.
-* **Dedicated chat window** – Ideal for one-on-one or group messaging.
-* **No conversation list** – Users directly enter the chat without navigating through a list.
-* **Supports both One-to-One and Group Chats** – Easily configurable with minor code modifications.
-* **Optimized for mobile** – Full-screen chat experience without distractions.
-* **Seamless real-time communication** – Auto-updates messages for a smooth experience.
-* **Ideal for support chat or community-based messaging.**
+- Two-panel layout with conversation list and active chat window
+- Switch between one-to-one and group conversations
+- Tap-to-view on mobile — tapping a conversation opens the message view
+- Real-time updates and message sync across sessions
-
+
-**Recommended for:**
-
-* **Support chat applications** – Direct user-agent communication.
-* **Apps focusing on direct messaging** – No distractions from other conversations.
-* **Community or group chat applications** – A structured way to interact in groups.
-* **Mobile-first applications** – Designed for compact and dedicated messaging experiences.
-
-[](https://link.cometchat.com/next-one-on-one)
-
-> **Tip:** You can **fork** the sandbox, insert your **CometChat credentials** (App ID, Region, Auth Key.) in the code, and immediately preview how the UI and messages respond in real time.
+[](https://link.cometchat.com/next-conversation-list-message)
-[Integrate One-to-One/Group Chat](./next-one-to-one-chat)
+> Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time.
-***
+
+ Step-by-step guide to build this layout
+
-#### **3️⃣ Tab-Based Chat Experience**
+---
-**Best for:** Apps that need a **structured, multi-feature navigation system** for seamless interaction between **chats, calls, users, and settings**.
+### One-to-One / Group Chat
-**Features:**
+Single chat window — no sidebar. Good for support chat, embedded widgets, or focused messaging.
-* **Tab Navigation** – Easily switch between **Chat, Call Logs, Users, and Settings**.
-* **Dedicated Chat Window** – Full-screen messaging experience for focused communication.
-* **No Sidebar** – Unlike multi-panel UI, this design prioritizes individual interactions.
-* **Unified Experience** – Users can seamlessly manage conversations, call history, and settings from a single interface.
-* **Scalable for future features** – Easily extend to include more functionalities such as notifications or contact management.
-* **Optimized for both desktop and mobile** – Ensures a smooth experience across different screen sizes.
+- Dedicated chat window for one-on-one or group messaging
+- No conversation list — users go directly into the chat
+- Full-screen experience optimized for mobile
+- Ideal for support chat or community messaging
-
+
-**Recommended for:**
+[](https://link.cometchat.com/next-one-on-one)
-* **Apps requiring structured navigation** – Clearly separate chat, calls, and settings.
-* **Multi-feature chat apps** – Supporting different functionalities in an organized way.
-* **Mobile-first applications** – Ideal for apps needing tab-based UI for easy access to features.
-* **Support & enterprise chat solutions** – Perfect for help desks, business chat platforms, and customer support apps.
+> Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time.
-[](https://link.cometchat.com/next-tabs-sidebar-message)
+
+ Step-by-step guide to build this layout
+
-> **Tip:** You can **fork** the sandbox, insert your **CometChat credentials** (App ID, Region, Auth Key.) in the code, and immediately preview how the UI and messages respond in real time.
+---
-[Integrate Tab-Based Chat](./next-tab-based-chat)
+### Tab-Based Chat
-***
+Tabbed navigation — Chat, Call Logs, Users, Settings in separate tabs. Good for full-featured apps.
-## **Build Your Own Chat Experience**
+- Tab navigation between Chat, Call Logs, Users, and Settings
+- Full-screen messaging within each tab
+- Unified experience for conversations, call history, and settings
+- Scales well for adding future features like notifications or contacts
-**Best for:** Developers who need complete control over their chat interface, allowing customization of components, themes, and features to align with their app’s design and functionality. Whether you're enhancing an existing chat experience or building from scratch, this approach provides the flexibility to tailor every aspect to your needs.
+
+
+
-**Recommended for:**
+[](https://link.cometchat.com/next-tabs-sidebar-message)
-* Apps that require **a fully customized chat experience**.
-* Developers who want to **extend functionalities and modify UI components**.
-* Businesses integrating chat seamlessly into **existing platforms**.
+> Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time.
-**Key Areas to Explore:**
+
+ Step-by-step guide to build this layout
+
-* **[React Sample App](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app)** – Fully functional sample applications to accelerate your development.
-* **[Core Features](./core-features)** – Learn about messaging, real-time updates, and other essential capabilities.
-* **[Components](./components-overview)** – Utilize prebuilt UI elements or customize them to fit your design.
-* **[Themes](./theme)** – Adjust colors, fonts, and styles to match your branding.
-* **[Build Your Own UI](./../../../sdk/javascript/overview)** – Prefer a custom UI over our UI Kits? Explore our SDKs to create a tailored chat experience.
+---
-***
+## Build Your Own Chat Experience
-## **Next Steps**
+Need full control over the UI? Use individual components, customize themes, and wire up your own layouts.
-Now that you’ve selected your **chat experience**, proceed to the **integration guide**:
+- [Sample App](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) — Working reference app to compare against
+- [Components](/ui-kit/react/components-overview) — All prebuilt UI elements with props and customization options
+- [Core Features](/ui-kit/react/core-features) — Messaging, real-time updates, and other capabilities
+- [Theming](/ui-kit/react/theme) — Colors, fonts, dark mode, and custom styling
+- [Build Your Own UI](/sdk/javascript/overview) — Skip the UI Kit entirely and build on the raw SDK
-* **[Integrate Conversation List + Message](/ui-kit/react/next-conversation)**
-* **[Integrate One-to-One Chat](/ui-kit/react/next-one-to-one-chat)**
-* **[Integrate Tab-Based Chat](/ui-kit/react/next-tab-based-chat)**
-* **[Advanced Customizations](/ui-kit/react/theme)**
+---
-***
+## Next Steps
+
+
+
+ Browse all prebuilt UI components
+
+
+ Customize colors, fonts, and styles
+
+
+ Chat features included out of the box
+
+
+ Common issues and fixes
+
+
diff --git a/ui-kit/react/next-one-to-one-chat.mdx b/ui-kit/react/next-one-to-one-chat.mdx
index 6b9ca33f4..44443a1f2 100644
--- a/ui-kit/react/next-one-to-one-chat.mdx
+++ b/ui-kit/react/next-one-to-one-chat.mdx
@@ -1,91 +1,89 @@
---
-title: "Building A One To One/Group Chat Experience"
-sidebarTitle: "One To One/Group Chat"
+title: "One-to-One / Group Chat"
+sidebarTitle: "One-to-One / Group Chat"
+description: "Build a focused one-to-one or group chat experience in Next.js with CometChat UI Kit."
---
-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**.
+
-[](https://link.cometchat.com/next-one-on-one)
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` |
+| Framework | Next.js |
+| Components | `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` |
+| Layout | Single chat window — no sidebar, no conversation list |
+| Prerequisite | Complete [Next.js Integration](/ui-kit/react/next-js-integration) Steps 1–5 first |
+| SSR | Dynamic import with `ssr: false` — CometChat requires browser APIs |
+| Pattern | Support chat, embedded widgets, focused messaging |
-> **Tip:** You can **fork** the sandbox, insert your **CometChat credentials** (App ID, Region, Auth Key.) in the code, and immediately preview how the UI and messages respond in real time.
+
-***
+This guide builds a single chat window — no sidebar, no conversation list. Users go directly into a one-to-one or group chat. Good for support chat, embedded widgets, or any focused messaging experience.
-## **User Interface Preview**
+This assumes you've already completed [Next.js Integration](/ui-kit/react/next-js-integration) (project created, UI Kit installed, CSS imported).
-### **Key Components**
-
-1. **Chat Header** – Displays recipient details and optional call/video call buttons.
-2. **Message View** – Shows real-time chat history.
-3. **Message Input Box** – Enables users to send messages, media, and reactions.
-
-***
-
-## **Step-by-Step Guide**
-
-### **Step 1: Implement the Chat Header**
-
-* Display **profile picture, name, and online status**.
-* Add **voice and video call buttons** (optional).
-
-```html
-
+
+
+
+
+
+
+
-```tsx CometChatNoSSR.tsx
+```tsx title="CometChatNoSSR.tsx" lines highlight={13-15, 19}
import React, { useEffect, useState } from "react";
-import { CometChatMessageComposer, CometChatMessageHeader, CometChatMessageList, CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";
+import {
+ CometChatMessageComposer,
+ CometChatMessageHeader,
+ CometChatMessageList,
+ CometChatUIKit,
+ UIKitSettingsBuilder,
+} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import "./CometChatNoSSR.css";
const COMETCHAT_CONSTANTS = {
- APP_ID: "",
- REGION: "",
- AUTH_KEY: "",
+ APP_ID: "", // Replace with your App ID
+ REGION: "", // Replace with your Region
+ AUTH_KEY: "", // Replace with your Auth Key (dev only)
};
+// Fetch the user whose chat you want to load
+const UID = "cometchat-uid-1";
+
const CometChatNoSSR: React.FC = () => {
const [user, setUser] = useState(undefined);
const [selectedUser, setSelectedUser] = useState(undefined);
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
const [selectedGroup, setSelectedGroup] = useState(undefined);
useEffect(() => {
@@ -101,7 +99,7 @@ const CometChatNoSSR: React.FC = () => {
console.log("Initialization completed successfully");
CometChatUIKit.getLoggedinUser().then((loggedInUser) => {
if (!loggedInUser) {
- CometChatUIKit.login("superhero1")
+ CometChatUIKit.login("cometchat-uid-2")
.then((user) => {
console.log("Login Successful", { user });
setUser(user);
@@ -118,26 +116,16 @@ const CometChatNoSSR: React.FC = () => {
useEffect(() => {
if (user) {
- // Fetch user or group from CometChat SDK whose chat you want to load.
-
- /** Fetching User */
- const UID = "cometchat-uid-1";
CometChat.getUser(UID).then(
- user => {
- setSelectedUser(user);
- }, error => {
- console.log("User fetching failed with error:", error);
- }
+ (user) => setSelectedUser(user),
+ (error) => console.log("User fetching failed with error:", error)
);
- /** Fetching Group */
- // const GUID = "GUID"
+ // To load a group chat instead, uncomment below:
+ // const GUID = "GUID";
// CometChat.getGroup(GUID).then(
- // group => {
- // setSelectedGroup(group);
- // }, error => {
- // console.log("User fetching failed with error:", error);
- // }
+ // (group) => setSelectedGroup(group),
+ // (error) => console.log("Group fetching failed with error:", error)
// );
}
}, [user]);
@@ -151,7 +139,9 @@ const CometChatNoSSR: React.FC = () => {
) : (
-
+ contentView: (message: CometChat.BaseMessage) => (
+
- );
- };
-
- const getMessageRequestBuilder = () => {
- const CUSTOM_MESSAGE_TYPE = "customType";
- let categories = CometChatUIKit.getDataSource().getAllMessageCategories();
- categories.push(CometChatUIKitConstants.MessageCategory.custom);
- let types = CometChatUIKit.getDataSource().getAllMessageTypes();
- types.push(CUSTOM_MESSAGE_TYPE);
- return new CometChat.MessagesRequestBuilder()
- .setCategories(categories)
- .setTypes(types)
- .hideReplies(true)
- .setLimit(30);
- };
-
- return (
-
+
-
+
- Blazer Casual
Men's Tailored Regular Fit Blazer
-
- $37.99{" "}
- $74.00
-
-
- Free Delivery
+ $37.99 $74.00
Buy now
Buy now
-
- {chatGroup && (
-
- );
-};
-
-export { CustomMessageTemplate };
-```
-
-
-
-
-
- );
- };
-
const getMessageRequestBuilder = () => {
const CUSTOM_MESSAGE_TYPE = "customType";
- let categories = CometChatUIKit.getDataSource().getAllMessageCategories();
+ const categories = CometChatUIKit.getDataSource().getAllMessageCategories();
categories.push(CometChatUIKitConstants.MessageCategory.custom);
- let types = CometChatUIKit.getDataSource().getAllMessageTypes();
+ const types = CometChatUIKit.getDataSource().getAllMessageTypes();
types.push(CUSTOM_MESSAGE_TYPE);
return new CometChat.MessagesRequestBuilder()
.setCategories(categories)
@@ -459,30 +222,20 @@ const CustomMessageTemplate = () => {
.setLimit(30);
};
+ if (!chatGroup) return null;
+
return (
-
-
-
-
-
-
-
- Blazer Casual
-
- Men's Tailored Regular Fit Blazer
-
-
-
-
- $37.99{" "}
- $74.00
-
-
- Free Delivery
-
- Buy now
-
- {chatGroup && (
-
+
@@ -547,116 +288,48 @@ The `bottomView` method of MessageTemplate allows you to add a custom button vie
+ According to guidelines you cannot share contact
+
+ );
}
- return templates;
+ return t;
});
- setTemplates(template);
+ setTemplates(modified);
}, []);
- const getBottomView = (message: CometChat.BaseMessage) => {
- return (
-
- According to guidelines you cannot
- share contact
-
- );
- };
-
- return (
-
- {chatGroup && (
-
- );
-};
-
-export { CustomMessageTemplate };
-```
-
-
- According to guidelines you cannot share contact
-
)
- }
-
- return (
-
- {chatGroup &&
- );
-};
+ if (!chatGroup) return null;
-export { CustomMessageTemplate };
+ return
+
+
+ );
+ };
}
- return templates;
+ return t;
});
- setTemplates(template);
+ setTemplates(modified);
}, []);
- const getFooterView = (message: CometChat.BaseMessage) => {
- if (message.getReactions().length > 0) {
- return (
- <>
-
+
+ {textMessage}
+
- {chatGroup && (
-
- );
-};
+ if (!chatGroup) return null;
-export { CustomMessageTemplate };
+ return
- {chatGroup && (
-
- );
-};
-
-export { CustomMessageTemplate };
-```
-
-
-
-
-
-
- );
- };
-
- return (
-
-
- {textMessage}
-
-
- {formatTime(message.getSentAt())}
- {isSentByMe && 
}
-
-
- {chatGroup && (
-
- );
-};
-
-export { CustomMessageTemplate };
-```
-
-
-
- );
- };
-
- return (
-
-
- {textMessage}
-
-
- {formatTime(message.getSentAt())}
- {isSentByMe && (
-
- )}
-
-
- {chatGroup &&
- );
-};
-
-export { CustomMessageTemplate };
-```
-
-
+
-{formattedTime}
;
- } else {
- return null;
- }
- };
-
- return (
-
- {chatGroup && (
-
- );
-};
-
-export { CustomMessageTemplate };
-```
-
-
- {formattedTime}
-
- );
- } else {
- return null;
- }
- };
-
- return (
-
- {chatGroup &&
- );
-};
-
-export { CustomMessageTemplate };
-```
-
-Default Reply View
- -
-
-
-Custom Reply View
-
+
-
-Custom: {JSON.stringify(message.getData())}
+ ),
});
+ definedTemplates.push(customTemplate);
+ setTemplates(definedTemplates);
}, []);
+ const getMessageRequestBuilder = () => {
+ const CUSTOM_MESSAGE_TYPE = "customType";
+ const categories = CometChatUIKit.getDataSource().getAllMessageCategories();
+ categories.push(CometChatUIKitConstants.MessageCategory.custom);
+ const types = CometChatUIKit.getDataSource().getAllMessageTypes();
+ types.push(CUSTOM_MESSAGE_TYPE);
+ return new CometChat.MessagesRequestBuilder()
+ .setCategories(categories)
+ .setTypes(types)
+ .hideReplies(true)
+ .setLimit(30);
+ };
+
+ if (!chatGroup) return null;
+
return (
-
- {chatGroup && (
-
+
- {chatGroup &&
- );
-};
+---
-export { CustomMessageTemplate };
-```
+## Styling
-
-
-
-
- {chatGroup && (
-
- );
-};
+---
-export { CustomMessageTemplate };
-```
+---
-
- {chatGroup && (
-
- );
-};
+### bottomView
-export { CustomMessageTemplate };
-```
+| Key | Value |
+| --- | --- |
+| Type | `((message: CometChat.BaseMessage, alignment: MessageBubbleAlignment) => Element \| JSX.Element \| null) \| null` |
+| Default | `null` |
-
-
+| Key | Value |
+| --- | --- |
+| Type | `((message: CometChat.BaseMessage, alignment: MessageBubbleAlignment, textFormatters?: CometChatTextFormatter[]) => Element \| JSX.Element \| null) \| null` |
+| Default | `null` |
-
-
- );
- };
+---
- const getMessageRequestBuilder = () => {
- const CUSTOM_MESSAGE_TYPE = "customType";
- let categories = CometChatUIKit.getDataSource().getAllMessageCategories();
- categories.push(CometChatUIKitConstants.MessageCategory.custom);
- let types = CometChatUIKit.getDataSource().getAllMessageTypes();
- types.push(CUSTOM_MESSAGE_TYPE);
- return new CometChat.MessagesRequestBuilder()
- .setCategories(categories)
- .setTypes(types)
- .hideReplies(true)
- .setLimit(30);
- };
+### headerView
- return (
-
-
-
- {formatTime(message.getSentAt())}
- {isSentByMe && (
-
- )}
-
-
-
- Add Contact
- Message
-
- {chatGroup && (
-
- );
-};
+| Key | Value |
+| --- | --- |
+| Type | `((message: CometChat.BaseMessage, alignment: MessageBubbleAlignment) => Element \| JSX.Element \| null) \| null` |
+| Default | `null` |
-export { CustomMessageTemplate };
-```
+Custom header above the content area. Default renders sender name.
-
-
- );
- };
-
- const getMessageRequestBuilder = () => {
- const CUSTOM_MESSAGE_TYPE = "customType";
- let categories = CometChatUIKit.getDataSource().getAllMessageCategories();
- categories.push(CometChatUIKitConstants.MessageCategory.custom);
- let types = CometChatUIKit.getDataSource().getAllMessageTypes();
- types.push(CUSTOM_MESSAGE_TYPE);
- return new CometChat.MessagesRequestBuilder().setCategories(categories).setTypes(types).hideReplies(true).setLimit(30);
- }
-
- return (
-
-
-
- {formatTime(message.getSentAt())}
- {isSentByMe && (
-
- )}
-
-
-
- Add Contact
- Message
-
- {chatGroup &&
- );
-};
+| Key | Value |
+| --- | --- |
+| Type | `(loggedInUser: CometChat.User, message: CometChat.BaseMessage, group?: CometChat.Group) => CometChatMessageOption[]` |
+| Default | SDK default options |
-export { CustomMessageTemplate };
-```
+Returns the list of action sheet items for long-press on a message bubble.
-](https://link.cometchat.com/next-conversation-list-message)
-
-> **Tip:** You can **fork** the sandbox, insert your **CometChat credentials** (App ID, Region, Auth Key.) in the code, and immediately preview how the UI and messages respond in real time.
+
-This layout is structured into three key sections:
-
-1. **Sidebar (Conversation List)** – Displays active conversations, including users and groups.
-2. **Message View** – Shows chat messages for the selected conversation in real-time.
-3. **Message Composer** – Provides an input field for typing and sending messages, along with support for media, emojis, and reactions.
-
-***
+[](https://link.cometchat.com/next-conversation-list-message)
-## **Step-by-Step Guide**
+> Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time.
-### **Step 1: Create Sidebar**
+---
-Let's create the `Sidebar` component which will render different conversations.
+## What You're Building
-#### **Folder Structure**
+Three sections working together:
-Create a `CometChatSelector` folder inside your `src/app` directory and add the following files:
+1. **Sidebar (conversation list)** — shows all active conversations (users and groups)
+2. **Message view** — displays chat messages for the selected conversation in real time
+3. **Message composer** — text input with support for media, emojis, and reactions
-```swift
-src/app/
-│── CometChatSelector/
-│ ├── CometChatSelector.tsx
-│ ├── CometChatSelector.css
-```
+---
-#### **Download the Icon**
+## Step 1 — Create the Sidebar Component
-These icons are available in the **CometChat UI Kit assets folder**. You can find them at:\
-🔗 [GitHub Assets Folder](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app/src/assets)
+
- {/* Sidebar with conversation list */}
) : undefined;
@@ -296,169 +274,115 @@ export default CometChatNoSSR;
```
- {
let item = activeItem;
- // Extract the conversation participant
if (activeItem instanceof CometChat.Conversation) {
item = activeItem.getConversationWith();
}
- // Update states based on the type of selected item
if (item instanceof CometChat.User) {
setSelectedUser(item as CometChat.User);
setSelectedGroup(undefined);
@@ -274,11 +253,10 @@ const CometChatNoSSR: React.FC = () => {
setSelectedUser(undefined);
setSelectedGroup(undefined);
}
- }}
+ }}
/>
-
- {/* Message view section */}
+
{selectedUser || selectedGroup ? (
Select Conversation to start
+ Select a conversation to start chatting
)}
- */}
+
-
+```css title="globals.css" lines
+@import url("@cometchat/chat-uikit-react/css-variables.css");
+```
-**Recommended for:**
+Also ensure your global CSS sets `height: 100%` on the root elements:
-* Desktop-first applications
-* Apps requiring a **rich user experience** with seamless navigation
-* Platforms supporting both **individual and group messaging**
-* **Mobile-friendly** apps needing a **tap-to-open message view**
+```css title="globals.css" lines
+html,
+body {
+ height: 100%;
+}
-[](https://link.cometchat.com/next-conversation-list-message)
+#__next {
+ height: 100%;
+}
+```
-> **Tip:** You can **fork** the sandbox, insert your **CometChat credentials** (App ID, Region, Auth Key.) in the code, and immediately preview how the UI and messages respond in real time.
+Without the CSS import, components will render with broken or missing styles. Without the height rules, the chat UI won't fill the viewport.
-[Integrate Conversation List + Message](./next-conversation)
+---
-***
+## Step 6 — Choose a Chat Experience
-#### **2️⃣ One-to-One/Group Chat**
+Integrate a conversation view that suits your app's UX. Each option below includes a live CodeSandbox demo and a step-by-step guide.
-**Best for:** Apps that require a **focused, direct messaging experience** without a sidebar.
+### Conversation List + Message View
-**Features:**
+Two-panel layout — conversation list on the left, messages on the right. Think WhatsApp Web or Slack.
-* **Dedicated chat window** – Ideal for one-on-one or group messaging.
-* **No conversation list** – Users directly enter the chat without navigating through a list.
-* **Supports both One-to-One and Group Chats** – Easily configurable with minor code modifications.
-* **Optimized for mobile** – Full-screen chat experience without distractions.
-* **Seamless real-time communication** – Auto-updates messages for a smooth experience.
-* **Ideal for support chat or community-based messaging.**
+- Two-panel layout with conversation list and active chat window
+- Switch between one-to-one and group conversations
+- Tap-to-view on mobile — tapping a conversation opens the message view
+- Real-time updates and message sync across sessions
-
+
-**Recommended for:**
-
-* **Support chat applications** – Direct user-agent communication.
-* **Apps focusing on direct messaging** – No distractions from other conversations.
-* **Community or group chat applications** – A structured way to interact in groups.
-* **Mobile-first applications** – Designed for compact and dedicated messaging experiences.
-
-[](https://link.cometchat.com/next-one-on-one)
-
-> **Tip:** You can **fork** the sandbox, insert your **CometChat credentials** (App ID, Region, Auth Key.) in the code, and immediately preview how the UI and messages respond in real time.
+[](https://link.cometchat.com/next-conversation-list-message)
-[Integrate One-to-One/Group Chat](./next-one-to-one-chat)
+> Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time.
-***
+
+
-**Recommended for:**
+[](https://link.cometchat.com/next-one-on-one)
-* **Apps requiring structured navigation** – Clearly separate chat, calls, and settings.
-* **Multi-feature chat apps** – Supporting different functionalities in an organized way.
-* **Mobile-first applications** – Ideal for apps needing tab-based UI for easy access to features.
-* **Support & enterprise chat solutions** – Perfect for help desks, business chat platforms, and customer support apps.
+> Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time.
-[](https://link.cometchat.com/next-tabs-sidebar-message)
+
+
-**Recommended for:**
+[](https://link.cometchat.com/next-tabs-sidebar-message)
-* Apps that require **a fully customized chat experience**.
-* Developers who want to **extend functionalities and modify UI components**.
-* Businesses integrating chat seamlessly into **existing platforms**.
+> Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time.
-**Key Areas to Explore:**
+](https://link.cometchat.com/next-one-on-one)
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` |
+| Framework | Next.js |
+| Components | `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` |
+| Layout | Single chat window — no sidebar, no conversation list |
+| Prerequisite | Complete [Next.js Integration](/ui-kit/react/next-js-integration) Steps 1–5 first |
+| SSR | Dynamic import with `ssr: false` — CometChat requires browser APIs |
+| Pattern | Support chat, embedded widgets, focused messaging |
-> **Tip:** You can **fork** the sandbox, insert your **CometChat credentials** (App ID, Region, Auth Key.) in the code, and immediately preview how the UI and messages respond in real time.
+
-### **Key Components**
-
-1. **Chat Header** – Displays recipient details and optional call/video call buttons.
-2. **Message View** – Shows real-time chat history.
-3. **Message Input Box** – Enables users to send messages, media, and reactions.
-
-***
-
-## **Step-by-Step Guide**
-
-### **Step 1: Implement the Chat Header**
-
-* Display **profile picture, name, and online status**.
-* Add **voice and video call buttons** (optional).
-
-```html
-](https://link.cometchat.com/next-one-on-one)
-* Load **chat history** and **real-time messages**.
-* Ensure **smooth scrolling and timestamp visibility**.
+> Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time.
-```html
-Select Conversation to start
+
+ Set a user or group UID in CometChatNoSSR.tsx to start chatting
+
)}
) : undefined;
@@ -161,174 +151,113 @@ export default CometChatNoSSR;
```
-
](https://link.cometchat.com/next-tabs-sidebar-message)
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` |
+| Framework | Next.js |
+| Components | `CometChatConversations`, `CometChatCallLogs`, `CometChatUsers`, `CometChatGroups`, `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` |
+| Layout | Tabbed sidebar (Chats, Calls, Users, Groups) + message view |
+| Prerequisite | Complete [Next.js Integration](/ui-kit/react/next-js-integration) Steps 1–5 first |
+| SSR | Dynamic import with `ssr: false` — CometChat requires browser APIs |
+| Pattern | Full-featured messaging app with multiple sections |
-> **Tip:** You can **fork** the sandbox, insert your **CometChat credentials** (App ID, Region, Auth Key.) in the code, and immediately preview how the UI and messages respond in real time.
+
-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.
-
-***
-
-## **Step-by-Step Guide**
-
-### **Step 1: Create a Tab Component**
-
-To manage navigation, let's build a **`CometChatTabs`** component. This component will render different tabs and allow switching between sections dynamically.
+[](https://link.cometchat.com/next-tabs-sidebar-message)
-#### **Folder Structure**
+> Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time.
-Create a `CometChatTabs` folder inside your `src` directory and add the following files:
+---
-```php
-public/
-├── assets # These are the images you need to save
-│ ├── chats.svg
-│ ├── calls.svg
-│ ├── users.svg
-│ ├── groups.svg
-src/
-│── CometChatTabs/
-│ ├── CometChatTabs.tsx
-│ ├── CometChatTabs.css
-```
+## What You're Building
-#### **Download the Icons**
+Three sections working together:
-These icons are available in the **CometChat UI Kit assets folder**. You can find them at:\
-🔗 [GitHub Assets Folder](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app/src/assets)
+1. **Tab bar** — switches between Chats, Calls, Users, and Groups
+2. **Sidebar** — renders the list for the active tab
+3. **Message view** — header + messages + composer for the selected item
-***
+---
-#### **Implementation**
+## Step 1 — Create the Tab Component
+
+
- {/* Loop through each tab item to render it */}
{tabItems.map((tabItem) => {
const isActive =
activeTab === tabItem.name.toLowerCase() ||
@@ -104,9 +105,8 @@ export const CometChatTabs = (props: {
onTabClicked(tabItem)} // Invoke callback on click
+ onClick={() => onTabClicked(tabItem)}
>
- {/* Icon section with mask styling */}
setHoverTab(tabItem.name.toLowerCase())}
onMouseLeave={() => setHoverTab("")}
/>
-
- {/* Tab label */}
-
-```css CometChatTabs.css
-/* Main container for the CometChat tab bar */
+```css title="CometChatTabs.css" lines
.cometchat-tab-component {
- display: flex; /* Align child tabs horizontally */
- width: 100%; /* Full-width tab bar */
- padding: 0px 8px; /* Horizontal padding */
- align-items: flex-start; /* Align tab items to the top */
- gap: 8px; /* Space between tab items */
- border-top: 1px solid var(--cometchat-border-color-light, #F5F5F5); /* Top border */
- border-right: 1px solid var(--cometchat-border-color-light, #F5F5F5); /* Right border */
- background: var(--cometchat-background-color-01, #FFF); /* Background color */
+ display: flex;
+ width: 100%;
+ padding: 0px 8px;
+ align-items: flex-start;
+ gap: 8px;
+ border-top: 1px solid var(--cometchat-border-color-light, #F5F5F5);
+ border-right: 1px solid var(--cometchat-border-color-light, #F5F5F5);
+ background: var(--cometchat-background-color-01, #FFF);
}
-/* Styles for each individual tab */
.cometchat-tab-component__tab {
display: flex;
- flex-direction: column; /* Stack icon and text vertically */
- justify-content: center; /* Center vertically */
- align-items: center; /* Center horizontally */
- padding: 12px 0px 10px 0px; /* Top and bottom spacing */
- gap: 4px; /* Space between icon and text */
- flex: 1 0 0; /* Equally distribute available space among tabs */
- min-height: 48px; /* Minimum height for consistent layout */
+ padding: 12px 0px 10px 0px;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 4px;
+ flex: 1 0 0;
+ min-height: 48px;
}
-/* Default tab icon style */
.cometchat-tab-component__tab-icon {
display: flex;
width: 32px;
height: 32px;
justify-content: center;
align-items: center;
- background: var(--cometchat-icon-color-secondary); /* Default icon background */
+ background: var(--cometchat-icon-color-secondary);
-webkit-mask-size: contain;
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
@@ -187,116 +181,92 @@ export const CometChatTabs = (props: {
cursor: pointer;
}
-/* Tab text label style */
.cometchat-tab-component__tab-text {
- color: var(--cometchat-text-color-secondary, #727272); /* Default label color */
+ color: var(--cometchat-text-color-secondary, #727272);
text-align: center;
- font: var(--cometchat-font-caption1-medium, 500 12px Roboto); /* Font style */
+ font: var(--cometchat-font-caption1-medium, 500 12px Roboto);
cursor: pointer;
}
-/* Highlighted icon style for active/hovered tab */
.cometchat-tab-component__tab-icon-active {
- background: var(--cometchat-icon-color-highlight); /* Highlight color */
+ background: var(--cometchat-icon-color-highlight);
}
-/* Highlighted text style for active/hovered tab */
.cometchat-tab-component__tab-text-active {
- color: var(--cometchat-text-color-highlight); /* Highlighted text color */
+ color: var(--cometchat-text-color-highlight);
}
```
-
-***
-
-### **Step 2: Create Sidebar**
-
-Let's create the `Sidebar` component which will render different conversations.
+---
-#### **Folder Structure**
+## Step 2 — Create the Sidebar Component
-Create a `CometChatSelector` folder inside your `src/app` directory and add the following files:
+The sidebar renders the list for whichever tab is active, plus the tab bar at the bottom.
-```
-src/
-│── CometChatSelector/
-│ ├── CometChatSelector.tsx
-│ ├── CometChatSelector.css
-```
+
+
+
+
+
+
+
+
-```tsx CometChatSelector.tsx
+```tsx title="CometChatSelector.tsx" lines
import { useEffect, useState } from "react";
import {
Call,
Conversation,
Group,
User,
- CometChat
+ CometChat,
} from "@cometchat/chat-sdk-javascript";
-
import {
CometChatCallLogs,
CometChatConversations,
CometChatGroups,
- CometChatUIKit,
CometChatUIKitLoginListener,
- CometChatUsers
+ CometChatUsers,
} from "@cometchat/chat-uikit-react";
-
import { CometChatTabs } from "../CometChatTabs/CometChatTabs";
-// Define props interface for selector
interface SelectorProps {
- onSelectorItemClicked?: (input: User | Group | Conversation | Call, type: string) => void;
+ onSelectorItemClicked?: (
+ input: User | Group | Conversation | Call,
+ type: string
+ ) => void;
}
export const CometChatSelector = (props: SelectorProps) => {
- const {
- onSelectorItemClicked = () => {},
- } = props;
-
- // State to manage currently logged in user
+ const { onSelectorItemClicked = () => {} } = props;
const [loggedInUser, setLoggedInUser] = useState();
-
- // State to track selected conversation, user, group, or call
const [activeItem, setActiveItem] = useState<
Conversation | User | Group | Call | undefined
>();
-
- // State to track currently active tab: "chats", "calls", "users", or "groups"
const [activeTab, setActiveTab] = useState("chats");
- // Fetch logged-in user once component mounts
useEffect(() => {
const user = CometChatUIKitLoginListener.getLoggedInUser();
setLoggedInUser(user);
- }, [CometChatUIKitLoginListener?.getLoggedInUser()]);
-
- // Logout function to clear user session
- const logOut = () => {
- CometChatUIKit.logout()
- .then(() => {
- setLoggedInUser(null);
- })
- .catch((error) => {
- console.log("Logout error:", error);
- });
- };
+ }, []);
return (
<>
- {/* Render selector content only if a user is logged in */}
{loggedInUser && (
<>
{activeTab === "chats" && (
{
setActiveItem(item);
onSelectorItemClicked(item, "updateSelectedItem");
@@ -336,12 +306,9 @@ export const CometChatSelector = (props: SelectorProps) => {
)}
- {/* Render the tab switcher at the bottom */}
{
- setActiveTab(item.name.toLowerCase()); // Update tab on click
- }}
+ onTabClicked={(item) => setActiveTab(item.name.toLowerCase())}
/>
);
@@ -349,69 +316,56 @@ export const CometChatSelector = (props: SelectorProps) => {
```
-
-```css CometChatSelector.css
-/* Style the icon inside header menu in conversation list */
+```css title="CometChatSelector.css" lines
.selector-wrapper .cometchat-conversations .cometchat-list__header-menu .cometchat-button__icon {
- background: var(--cometchat-icon-color-primary); /* Primary icon color */
+ background: var(--cometchat-icon-color-primary);
}
-/* Highlight icon on hover */
.cometchat-conversations .cometchat-list__header-menu .cometchat-button__icon:hover {
- background: var(--cometchat-icon-color-highlight); /* Highlighted icon color on hover */
+ background: var(--cometchat-icon-color-highlight);
}
-/* Remove right border from the search bar inside the list */
.cometchat-list__header-search-bar {
border-right: none;
}
-/* Align menu list items to the left */
.cometchat .cometchat-menu-list__sub-menu-list-item {
text-align: left;
}
-/* Positioning for the submenu inside conversations menu */
.cometchat .cometchat-conversations .cometchat-menu-list__sub-menu-list {
width: 212px;
top: 40px !important;
left: 172px !important;
}
-/* Style for the logged-in user section with bottom border */
#logged-in-user {
border-bottom: 2px solid var(--cometchat-border-color-default, #E8E8E8);
}
-/* Make submenu items under logged-in user non-clickable */
#logged-in-user .cometchat-menu-list__sub-menu-item-title,
#logged-in-user .cometchat-menu-list__sub-menu-list-item {
cursor: default;
}
-/* Logout icon color inside submenu */
.cometchat-menu-list__sub-menu-list-item-icon-log-out {
- background-color: var(--cometchat-error-color, #F44649); /* Error color */
+ background-color: var(--cometchat-error-color, #F44649);
}
-/* Logout label/text color inside submenu */
.cometchat-menu-list__sub-menu-item-title-log-out {
color: var(--cometchat-error-color, #F44649);
}
-/* Enable pointer cursor for chat menu item titles */
.chat-menu .cometchat .cometchat-menu-list__sub-menu-item-title {
cursor: pointer;
}
-/* Remove shadow from the chat menu's submenu */
.chat-menu .cometchat .cometchat-menu-list__sub-menu {
box-shadow: none;
}
-/* Style the icons inside chat menu items */
.chat-menu .cometchat .cometchat-menu-list__sub-menu-icon {
background-color: var(--cometchat-icon-color-primary, #141414);
width: 24px;
@@ -420,46 +374,56 @@ export const CometChatSelector = (props: SelectorProps) => {
```
-
-### **Step 3: Render Experience**
+---
+
+## Step 3 — Create the CometChatNoSSR Component
-Now we will update the `CometChatNoSSR.tsx` & `CometChatNoSSR.css` files to import these new components as below,
+This component handles init, login, and renders the full tabbed chat experience. It runs client-side only.
+
+
+
+
+
+
+
+
+
-```tsx CometChatNoSSR.tsx
+```tsx title="CometChatNoSSR.tsx" highlight={15-17, 20} lines
import React, { useEffect, useState } from "react";
-import {
- CometChatMessageComposer,
- CometChatMessageHeader,
- CometChatMessageList,
- CometChatUIKit,
- UIKitSettingsBuilder
+import {
+ CometChatMessageComposer,
+ CometChatMessageHeader,
+ CometChatMessageList,
+ CometChatUIKit,
+ UIKitSettingsBuilder,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatSelector } from "../CometChatSelector/CometChatSelector";
import "./CometChatNoSSR.css";
-// Constants for CometChat configuration
+// Replace with your actual credentials
const COMETCHAT_CONSTANTS = {
- APP_ID: "",
- REGION: "",
- AUTH_KEY: "",
+ APP_ID: "", // Replace with your App ID
+ REGION: "", // Replace with your Region
+ AUTH_KEY: "", // Replace with your Auth Key (dev only)
};
-// Functional component for CometChatNoSSR
+const UID = "cometchat-uid-4"; // Replace with your actual UID
+
const CometChatNoSSR: React.FC = () => {
- // State to store the logged-in user
const [user, setUser] = useState(undefined);
- // State to store selected user or group
const [selectedUser, setSelectedUser] = useState(undefined);
const [selectedGroup, setSelectedGroup] = useState(undefined);
useEffect(() => {
- // Initialize UIKit settings
const UIKitSettings = new UIKitSettingsBuilder()
.setAppId(COMETCHAT_CONSTANTS.APP_ID)
.setRegion(COMETCHAT_CONSTANTS.REGION)
@@ -467,15 +431,12 @@ const CometChatNoSSR: React.FC = () => {
.subscribePresenceForAllUsers()
.build();
- // Initialize CometChat UIKit
CometChatUIKit.init(UIKitSettings)
?.then(() => {
console.log("Initialization completed successfully");
- // Check if user is already logged in
CometChatUIKit.getLoggedinUser().then((loggedInUser) => {
if (!loggedInUser) {
- // Perform login if no user is logged in
- CometChatUIKit.login("cometchat-uid-4")
+ CometChatUIKit.login(UID)
.then((user) => {
console.log("Login Successful", { user });
setUser(user);
@@ -492,16 +453,13 @@ const CometChatNoSSR: React.FC = () => {
return user ? (
-
-```css CometChatNoSSR.css
-/* Layout for the main container that holds conversations and messages */
+```css title="CometChatNoSSR.css" lines
.conversations-with-messages {
- display: flex;
- height: 100%;
- width: 100%;
+ display: flex;
+ height: 100%;
+ width: 100%;
}
-/* Sidebar wrapper for conversation list */
.conversations-wrapper {
- height: 100%;
- width: 480px; /* Fixed width for conversation list */
- overflow: hidden; /* Hide any overflowing content */
- display: flex;
- flex-direction: column;
- height: inherit;
+ height: 100%;
+ width: 480px;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ height: inherit;
}
-/* Hide overflow content inside the conversation component */
.conversations-wrapper > .cometchat {
- overflow: hidden;
+ overflow: hidden;
}
-/* Message section layout */
.messages-wrapper {
- width: calc(100% - 480px); /* Take remaining space */
- height: 100%;
- display: flex;
- flex-direction: column;
+ width: calc(100% - 480px);
+ height: 100%;
+ display: flex;
+ flex-direction: column;
}
-/* Styling for when no conversation is selected */
.empty-conversation {
- height: 100%;
- width: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- background: white;
- color: var(--cometchat-text-color-secondary, #727272);
- font: var(--cometchat-font-body-regular, 400 14px Roboto);
+ height: 100%;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: white;
+ color: var(--cometchat-text-color-secondary, #727272);
+ font: var(--cometchat-font-body-regular, 400 14px Roboto);
}
-/* Ensure message composer does not have rounded corners */
.cometchat .cometchat-message-composer {
- border-radius: 0px;
+ border-radius: 0px;
}
```
-
-### **Step 4: Disabling SSR for `CometChatNoSSR.tsx` in Next.js**
+How it works:
+- Selections from any tab (Chats, Calls, Users, Groups) flow through the same `onSelectorItemClicked` callback.
+- Conversation items are unwrapped via `getConversationWith()` to extract the underlying `User` or `Group`.
+- Only one of `selectedUser` / `selectedGroup` is set at a time — the other is cleared.
-In this update, we will **disable Server-Side Rendering (SSR) for `CometChatNoSSR.tsx`** while keeping the rest of the application’s SSR functionality intact. This ensures that the **CometChat UI Kit components load only on the client-side**, preventing SSR-related issues.
+---
-#### **Disabling SSR in `index.tsx`**
+## Step 4 — Disable SSR in Your Page
-Modify your `index.tsx` file to dynamically import the `CometChatNoSSR.tsx` component with `{ ssr: false }`.
+Dynamically import `CometChatNoSSR` with `ssr: false` so it only loads client-side.
-```tsx index.tsx
-import { Inter } from "next/font/google";
+```tsx title="index.tsx" lines
import dynamic from "next/dynamic";
+import "@cometchat/chat-uikit-react/css-variables.css";
-import '@cometchat/chat-uikit-react/css-variables.css';
-
-const inter = Inter({ subsets: ["latin"] });
-
-// Dynamically import CometChat component with SSR disabled
-const CometChatComponent = dynamic(() => import("../CometChatNoSSR/CometChatNoSSR"), {
- ssr: false,
-});
+const CometChatComponent = dynamic(
+ () => import("../CometChatNoSSR/CometChatNoSSR"),
+ { ssr: false }
+);
export default function Home() {
return
+
+```bash lines
+npm run dev
```
-
-### **Step 6: Run the project**
-
+
+
+```bash lines
+pnpm dev
```
-npm run dev
+
+
+```bash lines
+yarn dev
```
+
+
-***
-
-## **Next Steps**
-
-### **Enhance the User Experience**
+You should see the tab bar at the bottom of the sidebar. Switch between Chats, Calls, Users, and Groups — tapping any item loads the message view on the right.
-* **[Advanced Customizations](/ui-kit/react/theme)** – Personalize the chat UI to align with your brand.
+---
-***
+## Next Steps
+
+
+
+ Customize colors, fonts, and styles to match your brand
+
+
+ Browse all prebuilt UI components
+
+
+ Chat features included out of the box
+
+
diff --git a/ui-kit/react/outgoing-call.mdx b/ui-kit/react/outgoing-call.mdx
index 89413847a..7dc7bb7fb 100644
--- a/ui-kit/react/outgoing-call.mdx
+++ b/ui-kit/react/outgoing-call.mdx
@@ -1,388 +1,562 @@
---
title: "Outgoing Call"
+description: "Overlay component displaying an outgoing voice/video call with recipient info and cancel control."
---
+
+```json
+{
+ "component": "CometChatOutgoingCall",
+ "package": "@cometchat/chat-uikit-react",
+ "import": "import { CometChatOutgoingCall } from \"@cometchat/chat-uikit-react\";",
+ "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";",
+ "description": "Overlay component displaying an outgoing voice/video call with recipient info and cancel control.",
+ "cssRootClass": ".cometchat-outgoing-call",
+ "primaryOutput": {
+ "prop": "onCallCanceled",
+ "type": "Function"
+ },
+ "props": {
+ "data": {
+ "call": {
+ "type": "CometChat.Call",
+ "default": "undefined",
+ "note": "Must come from CometChat.initiateCall()"
+ }
+ },
+ "callbacks": {
+ "onCallCanceled": "Function",
+ "onError": "((error: CometChat.CometChatException) => void) | null"
+ },
+ "sound": {
+ "disableSoundForCalls": { "type": "boolean", "default": false },
+ "customSoundForCalls": { "type": "string", "default": "built-in" }
+ },
+ "viewSlots": {
+ "titleView": "JSX.Element",
+ "subtitleView": "JSX.Element",
+ "avatarView": "JSX.Element",
+ "cancelButtonView": "JSX.Element"
+ }
+ },
+ "events": [
+ {
+ "name": "CometChatCallEvents.ccOutgoingCall",
+ "payload": "CometChat.Call",
+ "description": "Call initiated"
+ },
+ {
+ "name": "CometChatCallEvents.ccCallAccepted",
+ "payload": "CometChat.Call",
+ "description": "Recipient accepts"
+ },
+ {
+ "name": "CometChatCallEvents.ccCallRejected",
+ "payload": "CometChat.Call",
+ "description": "Recipient rejects"
+ },
+ {
+ "name": "CometChatCallEvents.ccCallEnded",
+ "payload": "CometChat.Call",
+ "description": "Call session ends"
+ }
+ ],
+ "sdkListeners": [],
+ "compositionExample": {
+ "description": "App-level overlay rendered after CometChat.initiateCall()",
+ "components": ["CometChatOutgoingCall"],
+ "flow": "CometChat.initiateCall() returns CometChat.Call -> pass to call prop -> onCallCanceled ends session"
+ }
+}
+```
+
-## Overview
-
-The outgoing call component is a visual representation of a user-initiated call, whether it's a voice or video call. It serves as an interface for managing outgoing calls, providing users with essential options to control the call experience. This component typically includes information about the call recipient, call controls for canceling the call, and feedback on the call status, such as indicating when the call is in progress.
-
-
- 
-
-
-The `Outgoing Call` is comprised of the following components:
-
-| Components | Description |
-| ---------------- | ------------------------------------------------------------------------------------------------------------------- |
-| CometChat Button | This component represents a button with optional icon and text. |
-| CometChat Avatar | This component component displays an image or user's avatar with fallback to the first two letters of the username. |
-
-## Usage
+## Where It Fits
-### Integration
+`CometChatOutgoingCall` is an overlay component that displays the outgoing call screen with the recipient's name, avatar, and a cancel button. It plays a ringtone while the call is pending. Typically rendered at the app root level after initiating a call via `CometChat.initiateCall()`.
-
-
-```tsx
+```tsx lines
+import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
CometChatOutgoingCall,
CometChatUIKitConstants,
} from "@cometchat/chat-uikit-react";
-import React from "react";
+import "@cometchat/chat-uikit-react/css-variables.css";
-const OutgoingCallDemo = () => {
- const [call, setCall] = React.useState();
+function OutgoingCallDemo() {
+ const [call, setCall] = useState();
- React.useEffect(() => {
+ useEffect(() => {
const uid = "uid";
-
const callObject = new CometChat.Call(
uid,
CometChatUIKitConstants.MessageTypes.audio,
CometChatUIKitConstants.MessageReceiverType.user
);
CometChat.initiateCall(callObject)
- .then((c) => {
- setCall(c);
- })
+ .then((c) => setCall(c))
.catch(console.log);
}, []);
return call ?
+
+
+
-
-```tsx
-import { OutgoingCallDemo } from "./OutgoingCallDemo";
+---
-export default function App() {
- return (
-
+Root CSS class: `.cometchat-outgoing-call`
-
+---
-### Actions
+## Actions and Events
-[Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.
+### Callback Props
-##### 1. onCallCanceled
+#### onCallCanceled
-The `onCallCanceled` event gets activated when the cancel button is clicked. It does not have a default behavior. However, you can override its behavior using the following code snippet.
+Fires when the cancel button is clicked. Pauses the ringtone internally before invoking the callback.
-
-
-```ts
+```tsx lines
+import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
CometChatOutgoingCall,
CometChatUIKitConstants,
} from "@cometchat/chat-uikit-react";
-import React from "react";
-const OutgoingCallDemo = () => {
- const [call, setCall] = React.useState();
+function OutgoingCallWithCancel() {
+ const [call, setCall] = useState();
- React.useEffect(() => {
+ useEffect(() => {
const uid = "uid";
-
const callObject = new CometChat.Call(
uid,
CometChatUIKitConstants.MessageTypes.audio,
CometChatUIKitConstants.MessageReceiverType.user
);
CometChat.initiateCall(callObject)
- .then((c) => {
- setCall(c);
- })
+ .then((c) => setCall(c))
.catch(console.log);
}, []);
const cancelCall = () => {
- //your custom cancel call click actions
- CometChat.endCall(call!.getSessionId()).then(() => {
- setCall(undefined);
- });
+ CometChat.endCall(call!.getSessionId()).then(() => setCall(undefined));
};
+
return call ? (
{
+ console.error("OutgoingCall error:", error);
+ }}
+ />
+ );
+}
```
-
+### Global UI Events
-
-```js
-import React, { useState, useEffect } from 'react';
-import { CometChat } from '@cometchat/chat-sdk-javascript';
-import { CometChatOutgoingCall, CometChatUIKitConstants } from '@cometchat/chat-uikit-react';
+`CometChatCallEvents` emits call lifecycle events subscribable from anywhere. Subscribe in a `useEffect` and unsubscribe on cleanup.
-const OutgoingCallDemo = () => {
- const [call, setCall] = useState(null);
+| Event | Fires when | Payload |
+| --- | --- | --- |
+| `ccOutgoingCall` | A call is initiated | `CometChat.Call` |
+| `ccCallAccepted` | The recipient accepts the call | `CometChat.Call` |
+| `ccCallRejected` | The recipient rejects the call | `CometChat.Call` |
+| `ccCallEnded` | The call session ends | `CometChat.Call` |
- useEffect(() => {
- const uid = "uid";
+```tsx lines
+import { useEffect } from "react";
+import { CometChatCallEvents } from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
- const callObject = new CometChat.Call(
- uid,
- CometChatUIKitConstants.MessageTypes.audio,
- CometChatUIKitConstants.MessageReceiverType.user
+function useCallEvents() {
+ useEffect(() => {
+ const acceptedSub = CometChatCallEvents.ccCallAccepted.subscribe(
+ (call: CometChat.Call) => {
+ console.log("Call accepted:", call.getSessionId());
+ }
+ );
+ const rejectedSub = CometChatCallEvents.ccCallRejected.subscribe(
+ (call: CometChat.Call) => {
+ console.log("Call rejected:", call.getSessionId());
+ }
+ );
+ const endedSub = CometChatCallEvents.ccCallEnded.subscribe(
+ (call: CometChat.Call) => {
+ console.log("Call ended:", call.getSessionId());
+ }
);
- CometChat.initiateCall(callObject)
- .then((c) => {
- setCall(c);
- })
- .catch(console.log);
+ return () => {
+ acceptedSub?.unsubscribe();
+ rejectedSub?.unsubscribe();
+ endedSub?.unsubscribe();
+ };
}, []);
+}
+```
- const cancelCall = () =>{
- //your custom cancel call click actions
- CometChat.endCall(call!.getSessionId())
- .then(() => {
- setCall(undefined);
- })
- };
+### SDK Events (Real-Time, Automatic)
- return (
- call && (
-
+---
-
+## Custom View Slots
-##### 2. onError
+All view slots on `CometChatOutgoingCall` are `JSX.Element` (not functions). They do not receive parameters — pass call data via closure if needed.
-This action doesn't change the behavior of the component but rather listens for any errors that occur in the Outgoing Call component.
+| Slot | Type | Replaces |
+| --- | --- | --- |
+| `titleView` | `JSX.Element` | Recipient name |
+| `subtitleView` | `JSX.Element` | "Calling..." text |
+| `avatarView` | `JSX.Element` | Recipient avatar |
+| `cancelButtonView` | `JSX.Element` | Cancel call button |
+
+### titleView
+
+Replace the recipient name.
+
+
+ 
+
-```ts
+```tsx lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
CometChatOutgoingCall,
CometChatUIKitConstants,
} from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const OutgoingCallDemo = () => {
- const [call, setCall] = React.useState();
-
- React.useEffect(() => {
- const uid = "uid";
-
- const callObject = new CometChat.Call(
- uid,
- CometChatUIKitConstants.MessageTypes.audio,
- CometChatUIKitConstants.MessageReceiverType.user
- );
- CometChat.initiateCall(callObject)
- .then((c) => {
- setCall(c);
- })
- .catch(console.log);
- }, []);
- function handleOnError(error: CometChat.CometChatException) {
- //Your Custom Error Actions
- console.log(error);
- }
+function OutgoingCallCustomTitle() {
+ // assume `call` is a CometChat.Call from CometChat.initiateCall()
+ const getTitleView = (call: CometChat.Call) => (
+
+
+```css lines
+.outgoing-call__title {
+ color: #141414;
+ text-align: center;
+ font: 500 24px Roboto;
+}
+```
+
+
-
-```js
-import React, { useState, useEffect } from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import {
- CometChatOutgoingCall,
- CometChatUIKitConstants,
-} from "@cometchat/chat-uikit-react";
-
-const OutgoingCallDemo = () => {
- const [call, setCall] = useState(null);
-
- useEffect(() => {
- const uid = "uid";
-
- const callObject = new CometChat.Call(
- uid,
- CometChatUIKitConstants.MessageTypes.audio,
- CometChatUIKitConstants.MessageReceiverType.user
- );
+### subtitleView
- CometChat.initiateCall(callObject)
- .then((c) => {
- setCall(c);
- })
- .catch(console.log);
- }, []);
+Replace the "Calling..." text.
- function handleOnError(error) {
- //Your Custom Error Actions
- console.log(error);
- }
- return call && 
+
-export default OutgoingCallDemo;
+
+
+```tsx lines
+const getSubtitleView = (call: CometChat.Call) => (
+
+
+```css lines
+.outgoing-call__subtitle {
+ display: flex;
+ justify-content: center;
+ align-items: flex-start;
+ gap: 8px;
+ color: #727272;
+ text-align: center;
+ font: 400 16px Roboto;
+}
+.outgoing-call__subtitle-icon {
+ -webkit-mask: url("") center center no-repeat;
+ background: #a1a1a1;
+ height: 24px;
+ width: 24px;
+}
+```
+
-***
+### avatarView
-### Filters
+Replace the recipient avatar.
-**Filters** allow you to customize the data displayed in a list within a `Component`. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using `RequestBuilders` of Chat SDK.
+
+ 
+
-The `Outgoing Call` component does not have any exposed filters.
+
+
+```tsx lines
+import {
+ CometChatAvatar,
+ CometChatOutgoingCall,
+} from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
-***
+function OutgoingCallCustomAvatar() {
+ const getAvatarView = (call: CometChat.Call) => (
+
+
+```css lines
+.outgoing-call__avatar .cometchat-avatar,
+.outgoing-call__avatar .cometchat-avatar__image {
+ width: 160px;
+ height: 160px;
+ border-radius: 20px;
+}
-[Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.
+.outgoing-call__avatar-status {
+ background-image: url("");
+ height: 44px;
+ width: 44px;
+ background-size: contain;
+ position: relative;
+ top: -45px;
+ right: -60px;
+}
+```
+
+
-The `Outgoing Call` component does not have any exposed filters.
+### cancelButtonView
-***
+Replace the cancel call button.
-## Customization
+
+ 
+
-To fit your app's design requirements, you can customize the appearance of the Outgoing Call component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.
+
+
+```tsx lines
+function OutgoingCallCustomCancel() {
+ const getCancelButtonView = (call: CometChat.Call) => (
+
+
+```css lines
+.outgoing-call__cancel-button-wrapper {
+ height: 64px;
+ display: flex;
+ justify-content: center;
+ cursor: pointer;
+}
-Using CSS you can customize the look and feel of the component in your app like the color, size, shape, and fonts.
+.outgoing-call__cancel-button {
+ display: flex;
+ width: 330px;
+ padding: 12px 30px;
+ justify-content: center;
+ align-items: center;
+ gap: 12px;
+ border-radius: 12px;
+ background-color: #f44649;
+ color: #fff;
+ font: 500 20px Roboto;
+}
-**Example**
+.outgoing-call__cancel-button-icon {
+ -webkit-mask: url("") center center no-repeat;
+ background: #e8e8e8;
+ height: 32px;
+ width: 32px;
+}
+```
+
+
-
- 
-
+---
-
-
-```ts
+## Common Patterns
+
+### Cancel and end the call session
+
+```tsx lines
+import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
CometChatOutgoingCall,
CometChatUIKitConstants,
- OutgoingCallStyle,
} from "@cometchat/chat-uikit-react";
-import React from "react";
-const OutgoingCallDemo = () => {
- const [call, setCall] = React.useState();
+function OutgoingCallWithEndSession() {
+ const [call, setCall] = useState();
- React.useEffect(() => {
+ useEffect(() => {
const uid = "uid";
-
const callObject = new CometChat.Call(
uid,
CometChatUIKitConstants.MessageTypes.audio,
CometChatUIKitConstants.MessageReceiverType.user
);
CometChat.initiateCall(callObject)
- .then((c) => {
- setCall(c);
- })
+ .then((c) => setCall(c))
.catch(console.log);
}, []);
- return call ?
+### Custom ringtone
-
-```js
-import React, { useState, useEffect } from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import {
- CometChatOutgoingCall,
- CometChatUIKitConstants,
- OutgoingCallStyle,
-} from "@cometchat/chat-uikit-react";
+```tsx lines
+import { CometChatOutgoingCall } from "@cometchat/chat-uikit-react";
-const OutgoingCallDemo = () => {
- const [call, setCall] = useState(null);
+function OutgoingCallCustomSound() {
+ return (
+
+The component uses CSS custom properties (design tokens) defined in `@cometchat/chat-uikit-react/css-variables.css`. The cascade:
+
+1. Global tokens (e.g., `--cometchat-primary-color`, `--cometchat-error-color`) set on the `.cometchat` root wrapper.
+2. Component CSS (`.cometchat-outgoing-call`) consumes these tokens via `var()` with fallback values.
+3. Overrides target `.cometchat-outgoing-call` descendant selectors in a global stylesheet.
+
+### Key Selectors
+
+| Target | Selector |
+| --- | --- |
+| Root | `.cometchat-outgoing-call` |
+| Title container | `.cometchat-outgoing-call__title-container` |
+| Title text | `.cometchat-outgoing-call__title` |
+| Subtitle text | `.cometchat-outgoing-call__subtitle` |
+| Avatar container | `.cometchat-outgoing-call__avatar` |
+| Avatar image | `.cometchat-outgoing-call__avatar .cometchat-avatar` |
+| Avatar text | `.cometchat-outgoing-call__avatar .cometchat-avatar__text` |
+| Cancel button wrapper | `.cometchat-outgoing-call__button` |
+| Cancel button | `.cometchat-outgoing-call__button .cometchat-button` |
+| Cancel button icon | `.cometchat-outgoing-call__button .cometchat-button .cometchat-button__icon` |
+
+### Example: Themed outgoing call
+
+
+
+
-
-```css
+```css lines
.cometchat-outgoing-call__avatar .cometchat-avatar {
- display: flex;
- justify-content: center;
- align-items: center;
- flex-shrink: 0;
border-radius: 16px;
background: #fbaa75;
}
-.cometchat-outgoing-call__button {
- display: flex;
- align-items: center;
+.cometchat-outgoing-call__button .cometchat-button {
border-radius: 8px;
background: #f44649;
}
@@ -393,636 +567,155 @@ export default OutgoingCallDemo;
}
```
-
+### Customization Matrix
-
+| What to change | Where | Property/API | Example |
+| --- | --- | --- | --- |
+| Handle cancel action | Component props | `onCallCanceled` | `onCallCanceled={() => endCall()}` |
+| Disable ringtone | Component props | `disableSoundForCalls` | `disableSoundForCalls={true}` |
+| Custom ringtone | Component props | `customSoundForCalls` | `customSoundForCalls="/sounds/ring.mp3"` |
+| Replace UI sections | Component props | View slot props | `titleView={
-
-```ts
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import {
- CometChatOutgoingCall,
- CometChatUIKitConstants,
-} from "@cometchat/chat-uikit-react";
-import React from "react";
+---
-const OutgoingCallDemo = () => {
- const [call, setCall] = React.useState();
-
- React.useEffect(() => {
- const uid = "uid";
-
- const callObject = new CometChat.Call(
- uid,
- CometChatUIKitConstants.MessageTypes.audio,
- CometChatUIKitConstants.MessageReceiverType.user
- );
- CometChat.initiateCall(callObject)
- .then((c) => {
- setCall(c);
- })
- .catch(console.log);
- }, []);
-
- return call ? (
-
-
-
-```js
-import React, { useState, useEffect } from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import {
- CometChatOutgoingCall,
- CometChatUIKitConstants,
-} from "@cometchat/chat-uikit-react";
-
-const OutgoingCallDemo = () => {
- const [call, setCall] = useState(null);
-
- useEffect(() => {
- const uid = "uid";
-
- const callObject = new CometChat.Call(
- uid,
- CometChatUIKitConstants.MessageTypes.audio,
- CometChatUIKitConstants.MessageReceiverType.user
- );
-
- CometChat.initiateCall(callObject)
- .then((c) => {
- setCall(c);
- })
- .catch(console.log);
- }, []);
-
- return (
- call &&
-
-
-
-Below is a list of customizations along with corresponding code snippets
-
-| Property | Description | Code |
-| ----------------- | ---------------------------------------------------------------------- | --------------------------------------------------- |
-| **Call** | The CometChat call object used to set up and launch the outgoing call. | `call={call}` |
-| **Disable Sound** | Disables the sound of outgoing calls. | `disableSoundForCalls={false}` |
-| **Custom Sound** | Specifies a custom sound to play for outgoing calls. | `customSoundForCalls='Your Custom Sound For Calls'` |
-
-***
-
-### Advanced
-
-For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component.
-
-***
-
-#### TitleView
-
-This prop renders the custom title view for the outgoing call. Use this to override the existing title of user name from the outgoing call.
-
-The customized chat interface is displayed below.
-
-
-
-
-
-Use the following code to achieve the customization shown above.
-
-
-
-```ts
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import {
- CometChatOutgoingCall,
- CometChatUIKitConstants,
-} from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const OutgoingCallDemo = () => {
- const [call, setCall] = React.useState();
-
- React.useEffect(() => {
- const uid = "uid";
-
- const callObject = new CometChat.Call(
- uid,
- CometChatUIKitConstants.MessageTypes.audio,
- CometChatUIKitConstants.MessageReceiverType.user
- );
- CometChat.initiateCall(callObject)
- .then((c) => {
- setCall(c);
- })
- .catch(console.log);
- }, []);
-
- const getTitleView = (call: Call) => {
- return (
-
-
-
-```js
-import React, { useState, useEffect } from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import {
- CometChatOutgoingCall,
- CometChatUIKitConstants,
-} from "@cometchat/chat-uikit-react";
-
-const OutgoingCallDemo = () => {
- const [call, setCall] = useState(null);
-
- useEffect(() => {
- const uid = "uid";
-
- const callObject = new CometChat.Call(
- uid,
- CometChatUIKitConstants.MessageTypes.audio,
- CometChatUIKitConstants.MessageReceiverType.user
- );
-
- CometChat.initiateCall(callObject)
- .then((c) => {
- setCall(c);
- })
- .catch(console.log);
- }, []);
-
- const getTitleView = (call) => {
- return (
-
-
-
-```css
-.outgoing-call__title {
- color: #141414;
- text-align: center;
- font: 500 24px Roboto;
-}
-```
-
-
-
-
-
-#### SubtitleView
-
-This prop renders the custom sub title view for the outgoing call. Use this to override the existing sub title text from the outgoing call.
-
-The customized chat interface is displayed below.
-
-
-
-
-
-Use the following code to achieve the customization shown above.
-
-
-
-```ts
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import {
- CometChatOutgoingCall,
- CometChatUIKitConstants,
-} from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const OutgoingCallDemo = () => {
- const [call, setCall] = React.useState();
-
- React.useEffect(() => {
- const uid = "uid";
-
- const callObject = new CometChat.Call(
- uid,
- CometChatUIKitConstants.MessageTypes.audio,
- CometChatUIKitConstants.MessageReceiverType.user
- );
- CometChat.initiateCall(callObject)
- .then((c) => {
- setCall(c);
- })
- .catch(console.log);
- }, []);
-
- const getSubtitleView = (call: Call) => {
- return (
-
-
-
-```js
-import React, { useState, useEffect } from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import {
- CometChatOutgoingCall,
- CometChatUIKitConstants,
-} from "@cometchat/chat-uikit-react";
-
-const OutgoingCallDemo = () => {
- const [call, setCall] = useState(null);
-
- useEffect(() => {
- const uid = "uid";
-
- const callObject = new CometChat.Call(
- uid,
- CometChatUIKitConstants.MessageTypes.audio,
- CometChatUIKitConstants.MessageReceiverType.user
- );
-
- CometChat.initiateCall(callObject)
- .then((c) => {
- setCall(c);
- })
- .catch(console.log);
- }, []);
-
- const getSubtitleView = (call) => {
- return (
-
-
-
-```css
-.outgoing-call__subtitle {
- display: flex;
- justify-content: center;
- align-items: flex-start;
- gap: 8px;
- color: #727272;
- text-align: center;
- font: 400 16px Roboto;
-}
-
-.outgoing-call__subtitle-icon {
- -webkit-mask: url("") center center no-repeat;
- background: #A1A1A1;
- height: 24px;
- width: 24px;
-}
-```
-
-
-
-
-
-#### AvatarView
-
-This prop renders the custom avatar view for the outgoing call. Use this to override the existing avatar image from the outgoing call.
-
-The customized chat interface is displayed below.
-
-
-
-
-
-Use the following code to achieve the customization shown above.
-
-
-
-```ts
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import {
- CometChatAvatar,
- CometChatOutgoingCall,
- CometChatUIKitConstants,
-} from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const OutgoingCallDemo = () => {
- const [call, setCall] = React.useState();
-
- React.useEffect(() => {
- const uid = "uid";
-
- const callObject = new CometChat.Call(
- uid,
- CometChatUIKitConstants.MessageTypes.audio,
- CometChatUIKitConstants.MessageReceiverType.user
- );
- CometChat.initiateCall(callObject)
- .then((c) => {
- setCall(c);
- })
- .catch(console.log);
- }, []);
+---
- const getAvatarView = (call: CometChat.Call) => {
- return (
-
+Custom JSX replacing the recipient avatar.
-
-```js
-import React, { useState, useEffect } from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import {
- CometChatAvatar,
- CometChatOutgoingCall,
- CometChatUIKitConstants,
-} from "@cometchat/chat-uikit-react";
+| | |
+| --- | --- |
+| Type | `JSX.Element` |
+| Default | Built-in avatar |
-const OutgoingCallDemo = () => {
- const [call, setCall] = useState(null);
+---
- useEffect(() => {
- const uid = "uid";
+### call
- const callObject = new CometChat.Call(
- uid,
- CometChatUIKitConstants.MessageTypes.audio,
- CometChatUIKitConstants.MessageReceiverType.user
- );
+The outgoing call object from `CometChat.initiateCall()`.
- CometChat.initiateCall(callObject)
- .then((c) => {
- setCall(c);
- })
- .catch(console.log);
- }, []);
+| | |
+| --- | --- |
+| Type | `CometChat.Call` |
+| Default | `undefined` |
- const getAvatarView = (call) => {
- return (
-
+Custom JSX replacing the cancel call button.
-
-```css
-.outgoing-call__avatar .cometchat-avatar,
-.outgoing-call__avatar .cometchat-avatar__image {
- width: 160px;
- height: 160px;
- border-radius: 20px;
-}
+| | |
+| --- | --- |
+| Type | `JSX.Element` |
+| Default | Built-in cancel button |
-.outgoing-call__avatar-status {
- background-image: url("");
- height: 44px;
- width: 44px;
- background-size: contain;
- position: relative;
- top: -45px;
- right: -60px;
-}
-```
+---
-
+### customSoundForCalls
-
+URL to a custom audio file for the outgoing call ringtone.
-#### CancelButtonView
+| | |
+| --- | --- |
+| Type | `string` |
+| Default | Built-in ringtone |
-This prop renders the custom cancel-call button view for the outgoing call. Use this to override the existing cancel call button view from the outgoing call.
+---
-The customized chat interface is displayed below.
+### disableSoundForCalls
-
-
-
+Disables the outgoing call ringtone.
-Use the following code to achieve the customization shown above.
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-
-
-```ts
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import {
- CometChatOutgoingCall,
- CometChatUIKitConstants,
-} from "@cometchat/chat-uikit-react";
-import React from "react";
+---
-const OutgoingCallDemo = () => {
- const [call, setCall] = React.useState();
+### onCallCanceled
- React.useEffect(() => {
- const uid = "uid";
+Callback fired when the cancel button is clicked.
- const callObject = new CometChat.Call(
- uid,
- CometChatUIKitConstants.MessageTypes.audio,
- CometChatUIKitConstants.MessageReceiverType.user
- );
- CometChat.initiateCall(callObject)
- .then((c) => {
- setCall(c);
- })
- .catch(console.log);
- }, []);
+| | |
+| --- | --- |
+| Type | `Function` |
+| Default | `undefined` |
- const getCancelButtonView = (call: Call) => {
- return (
-
+| | |
+| --- | --- |
+| Type | `((error: CometChat.CometChatException) => void) \| null` |
+| Default | `undefined` |
-
-```js
-import React, { useState, useEffect } from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import {
- CometChatOutgoingCall,
- CometChatUIKitConstants,
-} from "@cometchat/chat-uikit-react";
+---
-const OutgoingCallDemo = () => {
- const [call, setCall] = useState(null);
+### subtitleView
- useEffect(() => {
- const uid = "uid";
+Custom JSX replacing the "Calling..." subtitle text.
- const callObject = new CometChat.Call(
- uid,
- CometChatUIKitConstants.MessageTypes.audio,
- CometChatUIKitConstants.MessageReceiverType.user
- );
+| | |
+| --- | --- |
+| Type | `JSX.Element` |
+| Default | Built-in subtitle |
- CometChat.initiateCall(callObject)
- .then((c) => {
- setCall(c);
- })
- .catch(console.log);
- }, []);
+---
- const getCancelButtonView = (call) => {
- return (
-
+---
-
-```css
-.outgoing-call__cancel-button-wrapper {
- height: 64px;
- display: flex;
- justify-content: center;
- cursor: pointer;
-}
+## Events
-.outgoing-call__cancel-button {
- display: flex;
- width: 330px;
- padding: 12px 30px;
- justify-content: center;
- align-items: center;
- gap: 12px;
- align-self: stretch;
- border-radius: 12px;
- background-color: #F44649;
- color: #FFF;
- font: 500 20px Roboto;
-}
+| Event | Payload | Fires when |
+| --- | --- | --- |
+| `CometChatCallEvents.ccOutgoingCall` | `CometChat.Call` | Call initiated |
+| `CometChatCallEvents.ccCallAccepted` | `CometChat.Call` | Recipient accepts |
+| `CometChatCallEvents.ccCallRejected` | `CometChat.Call` | Recipient rejects |
+| `CometChatCallEvents.ccCallEnded` | `CometChat.Call` | Call session ends |
-.outgoing-call__cancel-button-icon {
- -webkit-mask: url("") center center no-repeat;
- background: #E8E8E8;
- height: 32px;
- width: 32px;
-}
-```
+All events are `Subject` from RxJS. Subscribe with `.subscribe()`, unsubscribe with the returned subscription's `.unsubscribe()`.
-
+---
-
+## CSS Selectors
+
+| Target | Selector |
+| --- | --- |
+| Root | `.cometchat-outgoing-call` |
+| Title container | `.cometchat-outgoing-call__title-container` |
+| Title text | `.cometchat-outgoing-call__title` |
+| Subtitle text | `.cometchat-outgoing-call__subtitle` |
+| Avatar container | `.cometchat-outgoing-call__avatar` |
+| Avatar image | `.cometchat-outgoing-call__avatar .cometchat-avatar` |
+| Avatar text | `.cometchat-outgoing-call__avatar .cometchat-avatar__text` |
+| Cancel button wrapper | `.cometchat-outgoing-call__button` |
+| Cancel button | `.cometchat-outgoing-call__button .cometchat-button` |
+| Cancel button icon | `.cometchat-outgoing-call__button .cometchat-button .cometchat-button__icon` |
diff --git a/ui-kit/react/overview.mdx b/ui-kit/react/overview.mdx
index 42b82d980..559930725 100644
--- a/ui-kit/react/overview.mdx
+++ b/ui-kit/react/overview.mdx
@@ -1,214 +1,106 @@
---
-title: "CometChat UI Kit For React"
+title: "React UI Kit"
sidebarTitle: "Overview"
+description: "Prebuilt React components for chat, voice, and video calling. Supports React.js, Next.js, React Router, and Astro."
---
-The **CometChat UI Kit** for React is a powerful solution designed to seamlessly integrate chat functionality into applications. It provides a robust set of **prebuilt UI components** that are **modular, customizable, and highly scalable**, allowing developers to accelerate their development process with minimal effort.
+
-***
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` v6.3.x |
+| Peer deps | `react` >=18, `react-dom` >=18, `rxjs` ^7.8.1 |
+| Calling | Optional — `@cometchat/calls-sdk-javascript` |
+| SSR | Client-side only. Use `ssr: false` or `client:only="react"` |
+| Localization | 19 languages built-in |
+| Source | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6) |
-## **Why Choose CometChat UI Kit?**
+
-* **Rapid Integration** – Prebuilt UI components for faster deployment.
-* **Customizable & Flexible** – Modify the UI to align with your brand’s identity.
-* **Cross-Platform Compatibility** – Works seamlessly across various React-based frameworks.
-* **Scalable & Reliable** – Built on CometChat's **robust chat infrastructure** for enterprise-grade performance.
-
-***
-
-## **User Interface Preview**
+The CometChat React UI Kit provides prebuilt, customizable components for adding chat, voice, and video calling to any React app. Each component handles its own data fetching, real-time listeners, and state — you just drop them into your layout.
-***
-
-## **Try Live Demo**
+---
-**Experience the CometChat UI Kit in action:**
+## Try It
-
-
+ Try the full chat experience in your browser
+
+
+ Fork, add your credentials, and start building
+
+---
-{/* [
](https://link.cometchat.com/cometchat-demo)
-
-[](https://link.cometchat.com/react-conversation-list-message) */}
-
-
-> **Tip:** You can **fork** the sandbox, insert your **CometChat credentials** (App ID, Region, Auth Key) in the code, and immediately preview how the UI and messages respond in real time.
-
-***
-
-## **Integration**
-
-{/* ### **Option 1: UI Kit Builder (Pre-Assembled UI)**
-
-A ready-to-use chat interface—configured via a UI Kit Builder—built on top of our UI Kits.
+## Get Started
-
+
-**How It Works**
-
-* Toggle features like @mentions, reactions, media uploads, and more in a visual interface.
-* Drag-and-drop or point-and-click to enable or disable components.
-* Customize layouts and styles—no deep coding required.
-
-**Why It’s Great**
-
-* **Fastest Setup** – Minimal component wiring.
-* **Continuous Customization** – Only turn on the features you want.
-* **Fewer Moving Parts** – Reliable, pre-assembled UI that’s easy to maintain.
-
-
-
-
+
+ Vite or Create React App
+
+
-***
-
-### **Option 2: UI Components (Assemble It Yourself)** */}
-
-A collection of individual components—like conversation lists, message lists, message composer, etc.—each with built-in chat logic so you can customize every element.
-
-
-
-
+---
-**How It Works**
+## Explore
+
+
+
+ Browse all prebuilt UI components
+
+
+ Chat, calling, AI, and extensions
+
+
+ Colors, fonts, dark mode, and custom styling
+
+
+ Threaded messages, new chat, search, and more
+
+
-* Import the components you need from our UI Kits.
-* Arrange them in your desired layout, applying styling or customization as needed.
-* You don’t need to rewrite the SDK calls yourself—each component already integrates with CometChat logic.
+---
-**Why It’s Great**
+## Resources
-* **Flexible Design** – You control the final UI arrangement.
-* **No Extra Overhead** – Implement only the features you need.
-* **Modular** – Use exactly what you want, when you want.
-
-
-
-
-***
-
-## **Next Steps for Developers**
-
-1. **Learn the Basics** – [Key Concepts](/fundamentals/key-concepts).
-
-2. **Pick a Framework** – React.js or Next.js or React Router or Astro.
-
-3. **Follow the Setup Guide** –
-
- * **UI Components** – [React.js](/ui-kit/react/react-js-integration) or [Next.js](/ui-kit/react/next-js-integration) or [React Router](/ui-kit/react/react-router-integration) or [Astro](/ui-kit/react/astro-integration).
-
-4. **Customize UI** – Adjust [styles, themes](/ui-kit/react/theme), and [components](/ui-kit/react/components-overview).
-
-5. **Test & Deploy** – Run tests and launch your chat app.
-
-***
-
-## **Helpful Resources**
-
-Explore these essential resources to gain a deeper understanding of **CometChat UI Kits** and streamline your integration process.
-
-
-
-
-
- Fully functional sample applications to accelerate your development.
-
- View on GitHub
-
-
-
-
-
- Access the complete UI Kit source code on GitHub.
-
- View on GitHub
-
-
-
-
-
- UI design resources for customization and prototyping.
-
- View on Figma
-
-
-
+
+ Working reference app
+
+
+ Full UI Kit source on GitHub
+
+
+ Design resources and prototyping
+
+
+ Common issues and fixes
+
+
+ Open a support ticket
+
+
+ Upgrading from v5
+
-
-***
-
-## **Need Help?**
-
-If you need assistance, check out:
-
-* [Developer Community](http://community.cometchat.com/)
-* [Support Portal](https://help.cometchat.com/hc/en-us/requests/new)
diff --git a/ui-kit/react/property-changes.mdx b/ui-kit/react/property-changes.mdx
deleted file mode 100644
index 3358b3d16..000000000
--- a/ui-kit/react/property-changes.mdx
+++ /dev/null
@@ -1,94 +0,0 @@
----
-title: "Property Changes"
----
-
-## Conversations
-
-### New Properties
-
-| Name | Type | Description |
-| ------------------------- | -------------- | ---------------------------------------------------------------------------------- |
-| lastMessageDateTimeFormat | CalendarObject | Format for displaying the timestamp of the last message in the conversations list. |
-
-### Removed Properties
-
-| Name | Type | Description |
-| ----------- | ------------ | ---------------------------------------------------------------------------------- |
-| datePattern | DatePatterns | Format for displaying the timestamp of the last message in the conversations list. |
-
-## Message Header
-
-### New Properties
-
-| Name | Type | Description |
-| -------------------------- | -------------- | ------------------------------------------------------------------------ |
-| lastActiveAtDateTimeFormat | CalendarObject | Format for displaying the "last active" timestamp in the message header. |
-
-## Message List
-
-### New Properties
-
-| Name | Type | Description |
-| --------------------------- | -------------- | --------------------------------------------------------------------------------- |
-| separatorDateTimeFormat | CalendarObject | Format for the date separators in the message list. |
-| stickyDateTimeFormat | CalendarObject | Format for sticky date headers displayed in the message list. |
-| messageSentAtDateTimeFormat | CalendarObject | Format for the timestamp displayed next to messages. |
-| messageInfoDateTimeFormat | CalendarObject | Format for timestamps displayed in message details (e.g., delivery or read time). |
-
-### Removed Properties
-
-| Name | Type | Description |
-| ----------- | ------------ | ----------------------------------------------------------------- |
-| datePattern | DatePatterns | Format for the date separators & sticky date in the message list. |
-| timePattern | DatePatterns | Format for the timestamp displayed next to messages. |
-
-## Thread Header
-
-### New Properties
-
-| Name | Type | Description |
-| --------------------------- | -------------- | ---------------------------------------------------- |
-| separatorDateTimeFormat | CalendarObject | Format for the date separators. |
-| messageSentAtDateTimeFormat | CalendarObject | Format for the timestamp displayed next to messages. |
-
-## Call Logs
-
-### New Properties
-
-| Name | Type | Description |
-| --------------------------- | -------------- | ------------------------------------------------------------ |
-| callInitiatedDateTimeFormat | CalendarObject | Format for displaying the call initiation time in call logs. |
-
-### Removed Properties
-
-| Name | Type | Description |
-| ----------- | ------------ | -------------------------------------------- |
-| datePattern | DatePatterns | Format for rendering dates in the call logs. |
-
-## CometChatLocalize Class
-
-### New Methods
-
-| Name | Description |
-| --------------------- | ----------------------------------------------------------------- |
-| addTranslation | Adds custom translations to the default translations. |
-| getDefaultLanguage | Returns the default language. |
-| getDateLocaleLanguage | Returns the language used for date localization. |
-| formatDate | Formats a timestamp based on the provided calendar configuration. |
-
-### Renamed Methods
-
-| Name | Description | Old Name |
-| ------------------ | -------------------------------------------------------- | --------- |
-| getCurrentLanguage | Gets the current language. | getLocale |
-| setCurrentLanguage | Sets the current language. | setLocale |
-| getLocalizedString | Localizes the given string based on the active language. | localize |
-
-### Removed Methods
-
-| Name | Description |
-| ------------------ | ------------------------------------------------------------------- |
-| getLanguageCode | Returns the language code of current language. |
-| setDefaultLanguage | Sets the default lannguage if no language is passed in init method. |
-| isRTL | Returns true if the active language is rtl otherwise return false. |
-| getDir | Returns `rtl` or `ltr` based on the active language. |
diff --git a/ui-kit/react/react-conversation.mdx b/ui-kit/react/react-conversation.mdx
index 03ab256f4..e8388407b 100644
--- a/ui-kit/react/react-conversation.mdx
+++ b/ui-kit/react/react-conversation.mdx
@@ -1,53 +1,63 @@
---
-title: "Building A Conversation List + Message View"
+title: "Conversation List + Message View"
sidebarTitle: "Conversation List + Message View"
+description: "Build a two-panel conversation list + message view layout in React.js with CometChat UI Kit."
---
-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**.
+
-This design enables users to switch between conversations effortlessly while keeping the chat window open, ensuring a **smooth, real-time messaging experience**.
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` |
+| Framework | React.js |
+| Components | `CometChatConversations`, `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` |
+| Layout | Two-panel — conversation list (left) + message view (right) |
+| Prerequisite | Complete [React.js Integration](/ui-kit/react/react-js-integration) Steps 1–5 first |
+| Pattern | WhatsApp Web, Slack, Microsoft Teams |
-[](https://link.cometchat.com/react-conversation-list-message)
-
-> **Tip:** You can **fork** the sandbox, insert your **CometChat credentials** (App ID, Region, Auth Key.) in the code, and immediately preview how the UI and messages respond in real time.
+
-***
+This guide builds a two-panel chat layout — conversation list on the left, messages on the right. Users tap a conversation to open it.
-## **User Interface Overview**
+This assumes you've already completed [React.js Integration](/ui-kit/react/react-js-integration) (project created, UI Kit installed, init + login working, CSS imported).
-This layout is structured into three key sections:
+[](https://link.cometchat.com/react-conversation-list-message)
-1. **Sidebar (Conversation List)** – Displays active conversations, including users and groups.
-2. **Message View** – Shows chat messages for the selected conversation in real-time.
-3. **Message Composer** – Provides an input field for typing and sending messages, along with support for media, emojis, and reactions.
+> Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time.
-***
+---
-## **Step-by-Step Guide**
+## What You're Building
-### **Step 1: Create Sidebar**
+Three sections working together:
-Let's create the `Sidebar` component which will render different conversations.
+1. **Sidebar (conversation list)** — shows all active conversations (users and groups)
+2. **Message view** — displays chat messages for the selected conversation in real time
+3. **Message composer** — text input with support for media, emojis, and reactions
-#### **Folder Structure**
+---
-Create a `CometChatSelector` folder inside your `src` directory and add the following files:
+## Step 1 — Create the Sidebar Component
-```
-src/
-│── CometChatSelector/
-│ ├── CometChatSelector.tsx
-│ ├── CometChatSelector.css
-```
+Create a `CometChatSelector` folder inside `src/`:
+
+
+
+
+
+
+
-```tsx CometChatSelector.tsx
+```tsx title="CometChatSelector.tsx" lines
import { useEffect, useState } from "react";
import {
Conversation,
@@ -61,189 +71,167 @@ import {
} from "@cometchat/chat-uikit-react";
import "./CometChatSelector.css";
-// Define the props for the CometChatSelector component
interface SelectorProps {
onSelectorItemClicked?: (
input: User | Group | Conversation,
type: string
) => void;
- onHide?: () => void;
- onNewChatClicked?: () => void;
}
-// CometChatSelector component
export const CometChatSelector = (props: SelectorProps) => {
- // Destructure props with a default function for onSelectorItemClicked
const { onSelectorItemClicked = () => {} } = props;
-
- // State to store the logged-in user
const [loggedInUser, setLoggedInUser] = useState();
-
- // State to track the currently selected item (it can be a Conversation, User, or Group)
const [activeItem, setActiveItem] = useState<
CometChat.Conversation | CometChat.User | CometChat.Group | undefined
>();
- // useEffect hook to fetch and set the logged-in user
useEffect(() => {
- const loggedInUser = CometChatUIKitLoginListener.getLoggedInUser();
- setLoggedInUser(loggedInUser);
- }, [loggedInUser]); // Dependency on loggedInUser causes unnecessary re-renders
+ const user = CometChatUIKitLoginListener.getLoggedInUser();
+ setLoggedInUser(user);
+ }, []);
return (
<>
- {/* Render chat conversations if a user is logged in */}
{loggedInUser && (
- <>
- {
- setActiveItem(e); // Update the active item when an item is clicked
- onSelectorItemClicked(e, "updateSelectedItem"); // Notify parent component
- }}
- />
-
+ {
+ setActiveItem(e);
+ onSelectorItemClicked(e, "updateSelectedItem");
+ }}
+ />
)}
-
);
};
```
-
-```css CometChatSelector.css
-/* Styles for the menu icon in the conversation header */
+```css title="CometChatSelector.css" lines
+/* Menu icon in conversation header */
.selector-wrapper .cometchat-conversations .cometchat-list__header-menu .cometchat-button__icon {
- background: var(--cometchat-icon-color-primary);
+ background: var(--cometchat-icon-color-primary);
}
-/* Change background color of the menu icon on hover */
.cometchat-conversations .cometchat-list__header-menu .cometchat-button__icon:hover {
- background: var(--cometchat-icon-color-highlight);
+ background: var(--cometchat-icon-color-highlight);
}
-/* Remove the right border from the search bar */
.cometchat-list__header-search-bar {
- border-right: none;
+ border-right: none;
}
-/* Aligns submenu list items to the left */
.cometchat .cometchat-menu-list__sub-menu-list-item {
- text-align: left;
+ text-align: left;
}
-/* Adjust the width and positioning of the conversation menu list */
.cometchat .cometchat-conversations .cometchat-menu-list__sub-menu-list {
- width: 212px;
- top: 40px !important;
- left: 172px !important;
+ width: 212px;
+ top: 40px !important;
+ left: 172px !important;
}
-/* Styles for the logged-in user section */
+/* Logged-in user section */
#logged-in-user {
- border-bottom: 2px solid var(--cometchat-border-color-default, #E8E8E8);
+ border-bottom: 2px solid var(--cometchat-border-color-default, #E8E8E8);
}
-/* Disable cursor interaction for menu items inside logged-in user section */
#logged-in-user .cometchat-menu-list__sub-menu-item-title,
#logged-in-user .cometchat-menu-list__sub-menu-list-item {
- cursor: default;
+ cursor: default;
}
-/* Background color for the logout button icon */
.cometchat-menu-list__sub-menu-list-item-icon-log-out {
- background-color: var(--cometchat-error-color, #F44649);
+ background-color: var(--cometchat-error-color, #F44649);
}
-/* Text color for the logout menu item */
.cometchat-menu-list__sub-menu-item-title-log-out {
- color: var(--cometchat-error-color, #F44649);
+ color: var(--cometchat-error-color, #F44649);
}
-/* Enable pointer cursor for menu items inside the chat menu */
.chat-menu .cometchat .cometchat-menu-list__sub-menu-item-title {
- cursor: pointer;
+ cursor: pointer;
}
-/* Remove box-shadow from submenu in the chat menu */
.chat-menu .cometchat .cometchat-menu-list__sub-menu {
- box-shadow: none;
+ box-shadow: none;
}
-/* Styles for the submenu icon inside the chat menu */
.chat-menu .cometchat .cometchat-menu-list__sub-menu-icon {
- background-color: var(--cometchat-icon-color-primary, #141414);
- width: 24px;
- height: 24px;
+ background-color: var(--cometchat-icon-color-primary, #141414);
+ width: 24px;
+ height: 24px;
}
-/* Styling for the chat selector container */
+/* Selector container */
.cometchat-selector {
- display: flex;
- width: 100%;
- padding: 0px 8px;
- align-items: flex-start;
- gap: 8px;
- border-top: 1px solid var(--cometchat-border-color-light, #F5F5F5);
- border-right: 1px solid var(--cometchat-border-color-light, #F5F5F5);
- background: var(--cometchat-background-color-01, #FFF);
+ display: flex;
+ width: 100%;
+ padding: 0px 8px;
+ align-items: flex-start;
+ gap: 8px;
+ border-top: 1px solid var(--cometchat-border-color-light, #F5F5F5);
+ border-right: 1px solid var(--cometchat-border-color-light, #F5F5F5);
+ background: var(--cometchat-background-color-01, #FFF);
}
-/* Styling for each tab inside the chat selector */
.cometchat-selector__tab {
- display: flex;
- padding: 12px 0px 10px 0px;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- gap: 4px;
- flex: 1 0 0;
- min-height: 48px;
+ display: flex;
+ padding: 12px 0px 10px 0px;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 4px;
+ flex: 1 0 0;
+ min-height: 48px;
}
-/* Styles for the active tab icon */
.cometchat-selector__tab-icon-active {
- display: flex;
- width: 32px;
- height: 32px;
- justify-content: center;
- align-items: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- cursor: default;
- background: var(--cometchat-icon-color-highlight);
- -webkit-mask: url('./assets/chats.svg') no-repeat center;
- mask: url('./assets/chats.svg') no-repeat center;
+ display: flex;
+ width: 32px;
+ height: 32px;
+ justify-content: center;
+ align-items: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ cursor: default;
+ background: var(--cometchat-icon-color-highlight);
+ -webkit-mask: url('./assets/chats.svg') no-repeat center;
+ mask: url('./assets/chats.svg') no-repeat center;
}
-/* Styles for the active tab text */
.cometchat-selector__tab-text-active {
- text-align: center;
- font: var(--cometchat-font-caption1-medium, 500 12px Roboto);
- cursor: default;
- color: var(--cometchat-text-color-highlight);
+ text-align: center;
+ font: var(--cometchat-font-caption1-medium, 500 12px Roboto);
+ cursor: default;
+ color: var(--cometchat-text-color-highlight);
}
```
-
-### **Step 2: Update App**
+Key points about the sidebar:
+- `CometChatUIKitLoginListener.getLoggedInUser()` checks for an active session — the component only renders if a user is logged in.
+- `activeConversation` highlights the currently selected conversation in the list.
+- `onItemClick` fires when a user taps a conversation, passing the `Conversation` object to the parent.
+
+---
+
+## Step 2 — Update App.tsx and App.css
-Now we will update the `App.tsx` & `App.css` files to import these new components as below,
+Wire the sidebar and message components together in your main app file.
-```tsx App.tsx
+```tsx title="App.tsx" lines
import { useState } from "react";
import {
CometChatMessageComposer,
@@ -253,102 +241,100 @@ import {
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatSelector } from "./CometChatSelector/CometChatSelector";
import "./App.css";
-import '@cometchat/chat-uikit-react/css-variables.css';
+import "@cometchat/chat-uikit-react/css-variables.css";
function App() {
- // State to track the currently selected user
- const [selectedUser, setSelectedUser] = useState(undefined);
-
- // State to track the currently selected group
- const [selectedGroup, setSelectedGroup] = useState(undefined);
+ const [selectedUser, setSelectedUser] = useState<
+ CometChat.User | undefined
+ >(undefined);
+ const [selectedGroup, setSelectedGroup] = useState<
+ CometChat.Group | undefined
+ >(undefined);
return (
-
-```css App.css
-/* Root container settings */
+```css title="App.css" lines
+@import url("@cometchat/chat-uikit-react/css-variables.css");
+
#root {
text-align: center;
- width: 100vw; /* Full viewport width */
- height: 100vh; /* Full viewport height */
- background-color: #282c34; /* Dark background */
+ width: 100vw;
+ height: 100vh;
+ background-color: #282c34;
}
-/* Layout container for conversations and messages */
+/* Two-panel layout */
.conversations-with-messages {
display: flex;
height: 100%;
width: 100%;
- flex-direction: row; /* Horizontal layout */
+ flex-direction: row;
}
-/* Sidebar container for the conversation list */
+/* Left panel — conversation list */
.conversations-wrapper {
height: 100vh;
- width: 480px; /* Fixed width for the sidebar */
+ width: 480px;
overflow: hidden;
display: flex;
flex-direction: column;
}
-/* Prevent scrolling inside the conversation list */
.conversations-wrapper > .cometchat {
overflow: hidden;
}
-/* Main chat messages container */
+/* Right panel — messages */
.messages-wrapper {
width: 100%;
height: 100%;
@@ -356,40 +342,65 @@ export default App;
flex-direction: column;
}
-/* Styles for the placeholder when no conversation is selected */
+/* Empty state */
.empty-conversation {
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
- background: var(--cometchat-background-color-03, #F5F5F5); /* Light gray background */
- color: var(--cometchat-text-color-secondary, #727272); /* Secondary text color */
+ background: var(--cometchat-background-color-03, #F5F5F5);
+ color: var(--cometchat-text-color-secondary, #727272);
font: var(--cometchat-font-body-regular, 400 14px Roboto);
}
-/* Remove border-radius for the message composer input */
.cometchat .cometchat-message-composer {
border-radius: 0px;
}
```
-
-### **Step 3: Run the project**
+How it works:
+- When a conversation is tapped, `onSelectorItemClicked` extracts the `User` or `Group` from the `Conversation` object.
+- `selectedUser` / `selectedGroup` state drives which chat is displayed — pass either `user` or `group` to the message components, never both.
+- The empty state shows until a conversation is selected.
-```powershell
-npm start
-```
+---
-***
+## Step 3 — Run the Project
-## **Next Steps**
+
+
+```bash lines
+npm run dev
+```
+
+
+```bash lines
+npm start
+```
+
+
-### **Enhance the User Experience**
+You should see the conversation list on the left. Tap any conversation to load messages on the right.
-* **[Advanced Customizations](/ui-kit/react/theme)** – Personalize the chat UI to align with your brand.
+---
-***
+## Next Steps
+
+
+
+ Customize colors, fonts, and styles to match your brand
+
+
+ Browse all prebuilt UI components
+
+
+ Back to the main setup guide
+
+
+ Chat features included out of the box
+
+
diff --git a/ui-kit/react/react-js-integration.mdx b/ui-kit/react/react-js-integration.mdx
index 55d433935..8f2841395 100644
--- a/ui-kit/react/react-js-integration.mdx
+++ b/ui-kit/react/react-js-integration.mdx
@@ -1,178 +1,110 @@
---
-title: "Getting Started With CometChat React UI Kit"
+title: "React.js Integration"
sidebarTitle: "Integration"
+description: "Add CometChat to a React.js app in 5 steps: create project, install, init, login, render."
---
-The **CometChat UI Kit for React** streamlines the integration of in-app chat functionality by providing a **comprehensive set of prebuilt UI components**. It offers seamless **theming options**, including **light and dark modes**, customizable fonts, colors, and extensive styling capabilities.
+
-With built-in support for **one-to-one and group conversations**, developers can efficiently enable chat features within their applications. Follow this guide to **quickly integrate chat functionality** using the CometChat React UI Kit.
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` |
+| Peer deps | `react` >=18, `react-dom` >=18, `rxjs` ^7.8.1 |
+| Init | `CometChatUIKit.init(UIKitSettings)` — must resolve before `login()` |
+| Login | `CometChatUIKit.login("UID")` — must resolve before rendering components |
+| Order | `init()` → `login()` → render. Breaking this order = blank screen |
+| Auth Key | Dev/testing only. Use Auth Token in production |
+| CSS | `@import url("@cometchat/chat-uikit-react/css-variables.css");` in global CSS |
+| Calling | Optional. Install `@cometchat/calls-sdk-javascript` to enable |
+| Other frameworks | [Next.js](/ui-kit/react/next-js-integration) · [React Router](/ui-kit/react/react-router-integration) · [Astro](/ui-kit/react/astro-integration) |
-{/*
-
- */}
+
+
+This guide walks you through adding CometChat to a React.js app. By the end you'll have a working chat UI.
-***
-
-## **Prerequisites**
-
-Before installing the **CometChat UI Kit for React**, you must first **create a CometChat application** via the **[CometChat Dashboard](https://app.cometchat.com/)**. The dashboard provides all the essential chat service components, including:
-
-* **User Management**
-* **Group Chat & Messaging**
-* **Voice & Video Calling**
-* **Real-time Notifications**
-
-> To initialize the **UI Kit**, you will need the following credentials from your **CometChat application**:
->
-> 1. **App ID**
-> 2. **Auth Key**
-> 3. **Region**
->
-> Ensure you have these details ready before proceeding with the installation and configuration.
-
-***
-
-## **Register & Set Up CometChat**
-
-Follow these steps to **register on CometChat** and **set up your development environment**.
-
-### **Step 1: Register on CometChat**
-
-To use **CometChat UI Kit**, you first need to register on the **CometChat Dashboard**.
-
-🔗 **[Click here to Sign Up](https://app.cometchat.com/login)**
-
-### **Step 2: Get Your Application Keys**
-
-After registering, create a **new app** and retrieve your **authentication details**:
-
-1. Navigate to **Application**, then select the **Credentials** section.
-
-2. Note down the following keys:
-
- * **App ID**
- * **Auth Key**
- * **Region**
-
-
-
-Each CometChat application can be integrated with a **single client app**. Users within the same application can communicate across multiple platforms, including **web and mobile**.
-
-
-
-### **Step 3: Set Up Your Development Environment**
-
-Ensure your system meets the following **prerequisites** before proceeding with integration.
-
-**System Requirements:**
-
-* **Node.js** installed on your machine.
-* A code editor like **[Visual Studio Code](https://code.visualstudio.com/)** or **[Cursor](https://www.cursor.com/)**.
-* **npm** or **Yarn** package manager installed.
-
-***
+---
-## **Built With**
+## Prerequisites
-The CometChat UI Kit for React relies on the following technologies:
+You need three things from the [CometChat Dashboard](https://app.cometchat.com/):
-| Technology | Description |
-| ---------------------------------------------------- | ------------------------------------- |
-| [Node.js](https://nodejs.org/) | JavaScript runtime environment |
-| [npm](https://www.npmjs.com/get-npm) | Node Package Manager |
-| [React](https://www.npmjs.com/package/react) | JavaScript library for UI development |
-| [React DOM](https://www.npmjs.com/package/react-dom) | React package for rendering UI |
+| Credential | Where to find it |
+| --- | --- |
+| App ID | Dashboard → Your App → Credentials |
+| Auth Key | Dashboard → Your App → Credentials |
+| Region | Dashboard → Your App → Credentials (e.g. `us`, `eu`, `in`) |
-***
+You also need Node.js (v16+) and npm/yarn installed.
-## **Getting Started**
+
+Auth Key is for development only. In production, generate Auth Tokens server-side via the [REST API](https://api-explorer.cometchat.com/) and use [`loginWithAuthToken()`](/ui-kit/react/methods#login-using-auth-token). Never ship Auth Keys in client code.
+
-### **Step 1: Create a React Project**
+---
-1. **Open your code editor** (e.g., **VS Code**, **Cursor**).
-2. **Initialize a new React project** using one of the following methods:
+## Step 1 — Create a React Project
-
-**Using Vite (Recommended)**
-
-```
-npm create vite@latest my-app --template react-ts
+
+```bash lines
+npm create vite@latest my-app -- --template react-ts
cd my-app
```
-
-
-
-**Using Create React App**
-
-```
+
+```bash lines
npx create-react-app my-app --template typescript
cd my-app
```
-
-
-3. **Open the project directory in your code editor**.
-4. **Start developing your React components inside the src directory**.
-5. **Install additional dependencies as needed**.
-
-***
-
-### **Step 2: Install Dependencies**
-
-The **CometChat UI Kit for React** is an **extension** of the **CometChat JavaScript SDK**.\
-Installing it will **automatically** include the core **Chat SDK**, enabling **seamless integration**.
+---
-* To install the **CometChat UI Kit**
+## Step 2 — Install the UI Kit
-```
+```bash lines
npm install @cometchat/chat-uikit-react
```
-
-
-```
+```bash lines
yarn add @cometchat/chat-uikit-react
```
-
-
-***
+This installs the UI Kit and its dependency `@cometchat/chat-sdk-javascript` automatically.
-### **Step 3: Initialize CometChat UI Kit**
+If you want voice/video calling, also install:
-Before using any features of the **CometChat UI Kit** or **CometChat SDK**, you must **initialize** the required settings. This is done using the [`Init`](/ui-kit/react/methods#init) method.
-
-* Initialization Process
-
-Call the `Init` method at the **beginning of your application** to ensure all CometChat functionalities are properly configured.
-
-***
+```bash lines
+npm install @cometchat/calls-sdk-javascript
+```
-
-**Auth Key Usage**
+---
-The **Auth Key** is an **optional property** of the `UIKitSettings` class. It is primarily recommended for **proof-of-concept (POC) development** or **early-stage application development**.
+## Step 3 — Initialize CometChat
-For secure authentication, use the [`Auth Token`](/ui-kit/react/methods#login-using-auth-token) method instead.
+Create a constants file and initialize the UI Kit before anything else.
-
+```ts title="src/AppConstants.ts" lines
+export const COMETCHAT_CONSTANTS = {
+ APP_ID: "APP_ID", // Replace with your App ID
+ REGION: "REGION", // Replace with your Region
+ AUTH_KEY: "AUTH_KEY", // Replace with your Auth Key (dev only)
+};
+```
-```ts
+```ts lines highlight={7-9}
import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";
/**
@@ -184,35 +116,24 @@ const COMETCHAT_CONSTANTS = {
AUTH_KEY: "AUTH_KEY", // Replace with your Auth Key (leave blank if using Auth Token)
};
-/**
- * Configure the CometChat UI Kit using the UIKitSettingsBuilder.
- * This setup determines how the chat UI behaves.
- */
const UIKitSettings = new UIKitSettingsBuilder()
- .setAppId(COMETCHAT_CONSTANTS.APP_ID) // Assign the App ID
- .setRegion(COMETCHAT_CONSTANTS.REGION) // Assign the App's Region
- .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY) // Assign the Authentication Key (if applicable)
- .subscribePresenceForAllUsers() // Enable real-time presence updates for all users
- .build(); // Build the final configuration
+ .setAppId(COMETCHAT_CONSTANTS.APP_ID)
+ .setRegion(COMETCHAT_CONSTANTS.REGION)
+ .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
+ .subscribePresenceForAllUsers()
+ .build();
-/**
- * Initialize the CometChat UI Kit with the configured settings.
- * Once initialized successfully, you can proceed with user authentication and chat features.
- */
-CometChatUIKit.init(UIKitSettings)!
+CometChatUIKit.init(UIKitSettings)
.then(() => {
console.log("CometChat UI Kit initialized successfully.");
- // You can now call login function to authenticate users
})
.catch((error) => {
- console.error("CometChat UI Kit initialization failed:", error); // Log errors if initialization fails
+ console.error("CometChat UI Kit initialization failed:", error);
});
```
-
-
-```js
+```js lines highlight={7-9}
import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";
/**
@@ -224,92 +145,49 @@ const COMETCHAT_CONSTANTS = {
AUTH_KEY: "AUTH_KEY", // Replace with your Auth Key (leave blank if using Auth Token)
};
-/**
- * Configure the CometChat UI Kit using the UIKitSettingsBuilder.
- * This setup determines how the chat UI behaves.
- */
const UIKitSettings = new UIKitSettingsBuilder()
- .setAppId(COMETCHAT_CONSTANTS.APP_ID) // Assign the App ID
- .setRegion(COMETCHAT_CONSTANTS.REGION) // Assign the App's Region
- .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY) // Assign the Authentication Key (if applicable)
- .subscribePresenceForAllUsers() // Enable real-time presence updates for all users
- .build(); // Build the final configuration
+ .setAppId(COMETCHAT_CONSTANTS.APP_ID)
+ .setRegion(COMETCHAT_CONSTANTS.REGION)
+ .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
+ .subscribePresenceForAllUsers()
+ .build();
-/**
- * Initialize the CometChat UI Kit with the configured settings.
- * Once initialized successfully, you can proceed with user authentication and chat features.
- */
CometChatUIKit.init(UIKitSettings)
.then(() => {
console.log("CometChat UI Kit initialized successfully.");
- // You can now call login function to authenticate users
})
.catch((error) => {
- console.error("CometChat UI Kit initialization failed:", error); // Log errors if initialization fails
+ console.error("CometChat UI Kit initialization failed:", error);
});
```
-
-
-
-
-Ensure you replace the following placeholders with your actual CometChat credentials:
-
-* APP\_ID → Your CometChat App ID
-* AUTH\_KEY → Your CometChat Auth Key
-* REGION → Your App Region
-
-These values are required for proper authentication and seamless integration.
-
-
+
+`init()` must resolve before you call `login()`. If you call `login()` before init completes, it will fail silently.
+
-
-You can choose between different storage methods to store data. By default, we use local storage. To learn more about available storage options and how to configure them, [click here](/ui-kit/react/methods#setting-session-storage-mode).
-
+By default, session data is stored in `localStorage`. To use `sessionStorage` instead, see [Setting Session Storage Mode](/ui-kit/react/methods#setting-session-storage-mode).
-***
-
-### **Step 4: User Login**
-
-To authenticate a user, you need a **`UID`**. You can either:
-
-1. **Create new users** on the **[CometChat Dashboard](https://app.cometchat.com)**, **[CometChat SDK Method](/ui-kit/react/methods#create-user)** or **[via the API](https://api-explorer.cometchat.com/reference/creates-user)**.
-
-2. **Use pre-generated test users**:
-
- * `cometchat-uid-1`
- * `cometchat-uid-2`
- * `cometchat-uid-3`
- * `cometchat-uid-4`
- * `cometchat-uid-5`
-
-The **Login** method returns a **User object** containing all relevant details of the logged-in user.
-
-***
-
-
+---
-**Security Best Practices**
+## Step 4 — Login
-* The **Auth Key** method is recommended for **proof-of-concept (POC) development** and early-stage testing.
-* For **production environments**, it is strongly advised to use an **[Auth Token](/ui-kit/react/methods#login-using-auth-token)** instead of an **Auth Key** to enhance security and prevent unauthorized access.
+After init resolves, log the user in. For development, use one of the pre-created test UIDs:
-
+`cometchat-uid-1` · `cometchat-uid-2` · `cometchat-uid-3` · `cometchat-uid-4` · `cometchat-uid-5`
-```ts
+```ts lines highlight={3}
import { CometChatUIKit } from "@cometchat/chat-uikit-react";
const UID = "UID"; // Replace with your actual UID
CometChatUIKit.getLoggedinUser().then((user: CometChat.User | null) => {
if (!user) {
- // If no user is logged in, proceed with login
CometChatUIKit.login(UID)
.then((user: CometChat.User) => {
console.log("Login Successful:", { user });
@@ -317,22 +195,19 @@ CometChatUIKit.getLoggedinUser().then((user: CometChat.User | null) => {
})
.catch(console.log);
} else {
- // If user is already logged in, mount your app
+ // Already logged in — mount your app
}
});
```
-
-
-```js
+```js lines highlight={3}
import { CometChatUIKit } from "@cometchat/chat-uikit-react";
const UID = "UID"; // Replace with your actual UID
CometChatUIKit.getLoggedinUser().then((user) => {
if (!user) {
- // If no user is logged in, proceed with login
CometChatUIKit.login(UID)
.then((user) => {
console.log("Login Successful:", { user });
@@ -340,164 +215,152 @@ CometChatUIKit.getLoggedinUser().then((user) => {
})
.catch(console.log);
} else {
- // If user is already logged in, mount your app
+ // Already logged in — mount your app
}
});
```
-
-
-***
+Key points:
+- `getLoggedinUser()` checks for an existing session so you don't re-login unnecessarily.
+- `login(uid)` skips the API call if a session already exists and returns the cached user.
+- Components must not render until login resolves — use a state flag to gate rendering.
-### **Step 5: Choose a Chat Experience**
+
+For production, use [`loginWithAuthToken()`](/ui-kit/react/methods#login-using-auth-token) instead of Auth Key. Generate tokens server-side via the REST API.
+
+
+---
-Integrate a conversation view that suits your application's **UX requirements**. Below are the available options:
+## Step 5 — Add the CSS Import
-***
+Add this line at the top of your global CSS file (e.g. `src/App.css` or `src/index.css`):
-#### **1️⃣ Conversation List + Message View**
+```css title="src/App.css" lines
+@import url("@cometchat/chat-uikit-react/css-variables.css");
+```
+
+Without this import, components will render with broken or missing styles.
+
+---
-**Best for:** Applications that need a **two-panel layout**, such as web-based chat interfaces (e.g., WhatsApp Web, Slack).
+## Step 6 — Choose a Chat Experience
-**Features:**
+Integrate a conversation view that suits your app's UX. Each option below includes a live CodeSandbox demo and a step-by-step guide.
-* **Two-panel layout** – Displays the conversation list on the left and the active chat window on the right.
-* **One-to-one & group conversations** – Seamless switching between private and group chats.
-* **Multiple conversations** – Effortlessly switch between different chat windows.
-* **Easy navigation** – Intuitive UI for finding and accessing chats quickly.
-* **Tap-to-view on mobile** – In mobile layouts, tapping a conversation opens the **Message View**, optimizing space.
-* **Real-time updates** – Auto-refreshes messages and conversation lists.
-* **Message sync** – Ensures messages stay updated across all sessions and devices.
+### Conversation List + Message View
+
+Two-panel layout — conversation list on the left, messages on the right. Think WhatsApp Web or Slack.
+
+- Two-panel layout with conversation list and active chat window
+- Switch between one-to-one and group conversations
+- Tap-to-view on mobile — tapping a conversation opens the message view
+- Real-time updates and message sync across sessions
-**Recommended for:**
-
-* Desktop-first applications
-* Apps requiring a **rich user experience** with seamless navigation
-* Platforms supporting both **individual and group messaging**
-* **Mobile-friendly** apps needing a **tap-to-open message view**
-
[](https://link.cometchat.com/react-conversation-list-message)
-> **Tip:** You can **fork** the sandbox, insert your **CometChat credentials** (App ID, Region, Auth Key.) in the code, and immediately preview how the UI and messages respond in real time.
+> **Tip:** Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time.
-[Integrate Conversation List + Message](./react-conversation)
+
+ Step-by-step guide to build this layout
+
-***
-
-#### **2️⃣ One-to-One/Group Chat**
+---
-**Best for:** Apps that require a **focused, direct messaging experience** without a sidebar.
+### One-to-One / Group Chat
-**Features:**
+Single chat window — no sidebar. Good for support chat, embedded widgets, or focused messaging.
-* **Dedicated chat window** – Ideal for one-on-one or group messaging.
-* **No conversation list** – Users directly enter the chat without navigating through a list.
-* **Supports both One-to-One and Group Chats** – Easily configurable with minor code modifications.
-* **Optimized for mobile** – Full-screen chat experience without distractions.
-* **Seamless real-time communication** – Auto-updates messages for a smooth experience.
-* **Ideal for support chat or community-based messaging.**
+- Dedicated chat window for one-on-one or group messaging
+- No conversation list — users go directly into the chat
+- Full-screen experience optimized for mobile
+- Ideal for support chat or community messaging
-**Recommended for:**
-
-* **Support chat applications** – Direct user-agent communication.
-* **Apps focusing on direct messaging** – No distractions from other conversations.
-* **Community or group chat applications** – A structured way to interact in groups.
-* **Mobile-first applications** – Designed for compact and dedicated messaging experiences.
-
[](https://link.cometchat.com/react-one-on-one)
-> **Tip:** You can **fork** the sandbox, insert your **CometChat credentials** (App ID, Region, Auth Key.) in the code, and immediately preview how the UI and messages respond in real time.
-
-[Integrate One-to-One/Group Chat](./react-one-to-one-chat)
+> **Tip:** Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time.
-***
+
+ Step-by-step guide to build this layout
+
-#### **3️⃣ Tab-Based Chat Experience**
+---
-**Best for:** Apps that need a **structured, multi-feature navigation system** for seamless interaction between **chats, calls, users, and settings**.
+### Tab-Based Chat
-**Features:**
+Tabbed navigation — Chat, Call Logs, Users, Settings in separate tabs. Good for full-featured apps.
-* **Tab Navigation** – Easily switch between **Chat, Call Logs, Users, and Settings**.
-* **Dedicated Chat Window** – Full-screen messaging experience for focused communication.
-* **No Sidebar** – Unlike multi-panel UI, this design prioritizes individual interactions.
-* **Unified Experience** – Users can seamlessly manage conversations, call history, and settings from a single interface.
-* **Scalable for future features** – Easily extend to include more functionalities such as notifications or contact management.
-* **Optimized for both desktop and mobile** – Ensures a smooth experience across different screen sizes.
+- Tab navigation between Chat, Call Logs, Users, and Settings
+- Full-screen messaging within each tab
+- Unified experience for conversations, call history, and settings
+- Scales well for adding future features like notifications or contacts
-**Recommended for:**
-
-* **Apps requiring structured navigation** – Clearly separate chat, calls, and settings.
-* **Multi-feature chat apps** – Supporting different functionalities in an organized way.
-* **Mobile-first applications** – Ideal for apps needing tab-based UI for easy access to features.
-* **Support & enterprise chat solutions** – Perfect for help desks, business chat platforms, and customer support apps.
-
[](https://link.cometchat.com/react-tabs-sidebar-message)
-> **Tip:** You can **fork** the sandbox, insert your **CometChat credentials** (App ID, Region, Auth Key.) in the code, and immediately preview how the UI and messages respond in real time.
-
-[Integrate Tab-Based Chat](./react-tab-based-chat)
-
-***
+> **Tip:** Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time.
-## **Build Your Own Chat Experience**
+
+ Step-by-step guide to build this layout
+
-**Best for:** Developers who need complete control over their chat interface, allowing customization of components, themes, and features to align with their app’s design and functionality. Whether you're enhancing an existing chat experience or building from scratch, this approach provides the flexibility to tailor every aspect to your needs.
-
-**Recommended for:**
+---
-* Apps that require **a fully customized chat experience**.
-* Developers who want to **extend functionalities and modify UI components**.
-* Businesses integrating chat seamlessly into **existing platforms**.
+## Build Your Own Chat Experience
-**Key Areas to Explore:**
+Need full control over the UI? Use individual components, customize themes, and wire up your own layouts.
-* **[React Sample App](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app)** – Fully functional sample applications to accelerate your development.
-* **[Core Features](./core-features)** – Learn about messaging, real-time updates, and other essential capabilities.
-* **[Components](./components-overview)** – Utilize prebuilt UI elements or customize them to fit your design.
-* **[Themes](./theme)** – Adjust colors, fonts, and styles to match your branding.
-* **[Build Your Own UI](./../../../sdk/javascript/overview)** – Prefer a custom UI over our UI Kits? Explore our SDKs to create a tailored chat experience.
+- [Sample App](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) — Working reference app to compare against
+- [Components](/ui-kit/react/components-overview) — All prebuilt UI elements with props and customization options
+- [Core Features](/ui-kit/react/core-features) — Messaging, real-time updates, and other capabilities
+- [Theming](/ui-kit/react/theme) — Colors, fonts, dark mode, and custom styling
+- [Build Your Own UI](/sdk/javascript/overview) — Skip the UI Kit entirely and build on the raw SDK
-***
+---
-## iFrame Support
+## iFrame Embedding
-If you’re embedding your React app inside an `
- {/* Sidebar with conversation list */}
) : undefined;
@@ -534,169 +491,118 @@ export default CometChatNoSSR;
```
- {
let item = activeItem;
- // Extract the conversation participant
if (activeItem instanceof CometChat.Conversation) {
item = activeItem.getConversationWith();
- }
- // Update states based on the type of selected item
+ }
if (item instanceof CometChat.User) {
setSelectedUser(item as CometChat.User);
setSelectedGroup(undefined);
@@ -512,11 +470,10 @@ const CometChatNoSSR: React.FC = () => {
setSelectedUser(undefined);
setSelectedGroup(undefined);
}
- }}
+ }}
/>
-
- {/* Message view section */}
+
{selectedUser || selectedGroup ? (
Select Conversation to start
+ Select a conversation to start chatting
)}
-
-
-The `Outgoing Call` is comprised of the following components:
-
-| Components | Description |
-| ---------------- | ------------------------------------------------------------------------------------------------------------------- |
-| CometChat Button | This component represents a button with optional icon and text. |
-| CometChat Avatar | This component component displays an image or user's avatar with fallback to the first two letters of the username. |
-
-## Usage
+## Where It Fits
-### Integration
+`CometChatOutgoingCall` is an overlay component that displays the outgoing call screen with the recipient's name, avatar, and a cancel button. It plays a ringtone while the call is pending. Typically rendered at the app root level after initiating a call via `CometChat.initiateCall()`.
-
+
-
-
- );
+## Minimal Render
+
+```tsx lines
+import { CometChatOutgoingCall } from "@cometchat/chat-uikit-react";
+import "@cometchat/chat-uikit-react/css-variables.css";
+
+function OutgoingCallMinimal() {
+ // `call` must be a CometChat.Call object from CometChat.initiateCall()
+ return call ?
-
-
+
+ {call.getCallInitiator().getName()} {" <> "}{" "}
+ {call.getCallReceiver().getName()}
+
+ );
return call ? (
-
+
-export default OutgoingCallDemo;
+
+
+ {"Calling..."}
+
+);
+
+
+
-The `Outgoing Call` component does not have any exposed filters.
+
+
+ );
-### Events
+ return call ? (
+
+
-To fit your app's design requirements, you can customize the appearance of the Outgoing Call component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.
+
+
+ );
-### Style
+ return call ? (
+
+
+ {"End Call"}
+
+
-
+---
-
+
-Custom
}` |
+| Change colors, fonts, spacing | Global CSS | Target `.cometchat-outgoing-call` class | `.cometchat-outgoing-call__title { color: red; }` |
-### Functionality
+---
-These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements.
+## Accessibility
-Here is a code snippet demonstrating how you can customize the functionality of the `Outgoing Call` component.
+The component renders a modal-like overlay. The cancel button is keyboard-focusable and activates on Enter/Space. The recipient name and "Calling..." subtitle are rendered as text content accessible to screen readers. The avatar includes the recipient name as alt text via `CometChatAvatar`.
-
-
-
-Use the following code to achieve the customization shown above.
-
-
- {call.getCallInitiator().getName()} {" <> "} {call.getCallReceiver().getName()}
-
- );
- };
-
- return (
- call &&
- {call.getCallInitiator().getName()} {" <> "} {call.getCallReceiver().getName()}
-
- );
- };
-
- return (
- call &&
-
-
-Use the following code to achieve the customization shown above.
-
-
-
- {"Calling..."}
-
- );
- };
-
- return (
- call &&
-
- {"Calling..."}
-
- );
- };
-
- return (
- call &&
-
-
-Use the following code to achieve the customization shown above.
-
-
-
- );
- };
+## Props
- return (
- call &&
-
- );
- };
+Component renders nothing when `call` is not provided.
- return (
- call &&
-
+Disables the outgoing call ringtone.
-Use the following code to achieve the customization shown above.
+| | |
+| --- | --- |
+| Type | `boolean` |
+| Default | `false` |
-
-
- );
- };
+---
- return (
- call &&
-
- {"End Call"}
-
-
-
- );
- };
+### titleView
- return (
- call &&
-
- {"End Call"}
-
-
-***
-
-## **Try Live Demo**
+---
-**Experience the CometChat UI Kit in action:**
+## Try It
](https://link.cometchat.com/cometchat-demo)
-
-[](https://link.cometchat.com/react-conversation-list-message) */}
-
-
-> **Tip:** You can **fork** the sandbox, insert your **CometChat credentials** (App ID, Region, Auth Key) in the code, and immediately preview how the UI and messages respond in real time.
-
-***
-
-## **Integration**
-
-{/* ### **Option 1: UI Kit Builder (Pre-Assembled UI)**
-
-A ready-to-use chat interface—configured via a UI Kit Builder—built on top of our UI Kits.
+## Get Started
-
+
-**How It Works**
-
-* Toggle features like @mentions, reactions, media uploads, and more in a visual interface.
-* Drag-and-drop or point-and-click to enable or disable components.
-* Customize layouts and styles—no deep coding required.
-
-**Why It’s Great**
-
-* **Fastest Setup** – Minimal component wiring.
-* **Continuous Customization** – Only turn on the features you want.
-* **Fewer Moving Parts** – Reliable, pre-assembled UI that’s easy to maintain.
-
-](https://link.cometchat.com/react-conversation-list-message)
-
-> **Tip:** You can **fork** the sandbox, insert your **CometChat credentials** (App ID, Region, Auth Key.) in the code, and immediately preview how the UI and messages respond in real time.
+
-This layout is structured into three key sections:
+[](https://link.cometchat.com/react-conversation-list-message)
-1. **Sidebar (Conversation List)** – Displays active conversations, including users and groups.
-2. **Message View** – Shows chat messages for the selected conversation in real-time.
-3. **Message Composer** – Provides an input field for typing and sending messages, along with support for media, emojis, and reactions.
+> Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time.
-***
+---
-## **Step-by-Step Guide**
+## What You're Building
-### **Step 1: Create Sidebar**
+Three sections working together:
-Let's create the `Sidebar` component which will render different conversations.
+1. **Sidebar (conversation list)** — shows all active conversations (users and groups)
+2. **Message view** — displays chat messages for the selected conversation in real time
+3. **Message composer** — text input with support for media, emojis, and reactions
-#### **Folder Structure**
+---
-Create a `CometChatSelector` folder inside your `src` directory and add the following files:
+## Step 1 — Create the Sidebar Component
-```
-src/
-│── CometChatSelector/
-│ ├── CometChatSelector.tsx
-│ ├── CometChatSelector.css
-```
+Create a `CometChatSelector` folder inside `src/`:
+
+
- {/* Sidebar for selecting conversations */}
+ {/* Sidebar — conversation list */}
{
let item = activeItem;
- // If the selected item is a conversation, extract the user/group from it
+ // Extract user/group from Conversation object
if (activeItem instanceof CometChat.Conversation) {
item = activeItem.getConversationWith();
}
- // Determine if the selected item is a User or a Group and update the state accordingly
if (item instanceof CometChat.User) {
setSelectedUser(item as CometChat.User);
- setSelectedGroup(undefined); // Ensure no group is selected
+ setSelectedGroup(undefined);
} else if (item instanceof CometChat.Group) {
- setSelectedUser(undefined); // Ensure no user is selected
+ setSelectedUser(undefined);
setSelectedGroup(item as CometChat.Group);
} else {
setSelectedUser(undefined);
- setSelectedGroup(undefined); // Reset if selection is invalid
+ setSelectedGroup(undefined);
}
}}
/>
- {/* If a user or group is selected, display the chat interface */}
+ {/* Message view — header + messages + composer */}
{selectedUser || selectedGroup ? (
);
-};
+}
export default App;
```
- {/* Header displaying user/group details */}
) : (
- // Default message when no conversation is selected
- Select Conversation to start
+
+ Select a conversation to start chatting
+
)}
- */}
+
-**Recommended for:**
-
-* Desktop-first applications
-* Apps requiring a **rich user experience** with seamless navigation
-* Platforms supporting both **individual and group messaging**
-* **Mobile-friendly** apps needing a **tap-to-open message view**
-
[](https://link.cometchat.com/react-conversation-list-message)
-> **Tip:** You can **fork** the sandbox, insert your **CometChat credentials** (App ID, Region, Auth Key.) in the code, and immediately preview how the UI and messages respond in real time.
+> **Tip:** Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time.
-[Integrate Conversation List + Message](./react-conversation)
+
-**Recommended for:**
-
-* **Support chat applications** – Direct user-agent communication.
-* **Apps focusing on direct messaging** – No distractions from other conversations.
-* **Community or group chat applications** – A structured way to interact in groups.
-* **Mobile-first applications** – Designed for compact and dedicated messaging experiences.
-
[](https://link.cometchat.com/react-one-on-one)
-> **Tip:** You can **fork** the sandbox, insert your **CometChat credentials** (App ID, Region, Auth Key.) in the code, and immediately preview how the UI and messages respond in real time.
-
-[Integrate One-to-One/Group Chat](./react-one-to-one-chat)
+> **Tip:** Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time.
-***
+
-**Recommended for:**
-
-* **Apps requiring structured navigation** – Clearly separate chat, calls, and settings.
-* **Multi-feature chat apps** – Supporting different functionalities in an organized way.
-* **Mobile-first applications** – Ideal for apps needing tab-based UI for easy access to features.
-* **Support & enterprise chat solutions** – Perfect for help desks, business chat platforms, and customer support apps.
-
[](https://link.cometchat.com/react-tabs-sidebar-message)
-> **Tip:** You can **fork** the sandbox, insert your **CometChat credentials** (App ID, Region, Auth Key.) in the code, and immediately preview how the UI and messages respond in real time.
-
-[Integrate Tab-Based Chat](./react-tab-based-chat)
-
-***
+> **Tip:** Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time.
-## **Build Your Own Chat Experience**
+