+
-
- );
+```css lines
+.cometchat-ai-assistant-chat {
+ /* overrides here */
}
```
-
-
-
-
-
- );
-}
-```
-
-
-
- );
-}
-```
-
-
-
@@ -677,7 +373,7 @@ Override the empty state greeting message view using the `emptyChatGreetingView`
@@ -772,7 +435,7 @@ You can override the empty chat intro message view using the `emptyChatIntroMess
- Hey, nice to see you What’s new?
-
- }
- />
- );
-}
-```
-
-
+
-
-
- ) : null;
+ return (
+
+
+ );
}
```
-
-
+## Smart Chat Features
-## 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.
-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/react/message-list) Component of UI Kits.
@@ -22,7 +29,7 @@ Once you have successfully activated the [Conversation Starter](/fundamentals/ai
-## Smart Replies
+### 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.
@@ -34,7 +41,7 @@ Once you have successfully activated the [Smart Replies](/fundamentals/ai-user-c
-## 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.
@@ -45,3 +52,23 @@ Once you have successfully activated the [Conversation Summary](/fundamentals/ai
+
+
+---
+
+## Next Steps
+
+
-## Usage
+
-
- );
+Root CSS class for style overrides:
+
+```css lines
+.cometchat-call-button {
+ /* overrides here */
}
```
-
-
- 
-**Example**
-
-
+
+
+---
+
+## Next Steps
+
+
-The `Call Logs` is comprised of the following components:
+
-
- );
+```css lines
+.cometchat-call-logs {
+ /* overrides here */
}
```
-
-
- 
-
+Replace the entire call log list item.
+
+ );
};
-export default CallLogDemo;
+
+ {callLog?.getInitiator()?.getName()}
+
+
+ {callLog?.getStatus()}
+
+
+ {callLog?.getStatus()} • {callLog?.getType()}
+
+ );
};
-export default CallLogDemo;
+
-
-
-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).
-
- );
- };
-
- return
-
- )
- }
- return
+
+
+ );
};
-export default CallLogDemo;
+
-
-
-The customized chat interface is displayed below.
-
-
- 
-
+### leadingView
-Use the following code to achieve the customization shown above.
+Replace the avatar / left section.
-
-
-
- );
- };
-
- return
- {" "}
- {callStatus}
-
-
-
-
-
- )
- }
-
- return
- {callStatus}
-
-
+ ?.getAvatar()})
+
+ );
};
-export default CallLogDemo;
+
-
-
-The customized chat interface is displayed below.
-
-
- 
-
-
-Use the following code to achieve the customization shown above.
+Replace the name / title text.
- {formatDate(call?.getInitiatedAt())}
-
- );
- };
-
- return
- {formatDate(call?.getInitiatedAt())}
-
- );
- };
- return
+ {callLog?.getInitiator()?.getName()} — {callLog?.getType()}
+
+ );
};
-export default CallLogDemo;
+
-
-
-The customized chat interface is displayed below.
-
-
- 
-
-
-Use the following code to achieve the customization shown above.
-
-
- {call.status === "unanswered" || call.status === "cancelled" ? (
-
- ) : call.initiator?.uid === loggedInUser?.getUid() ? (
-
- ) : (
-
- )}
-
- );
- };
- return
- {call.status === "unanswered" || call.status === "cancelled" ? (
-
- ) : call.initiator?.uid === loggedInUser?.getUid() ? (
-
- ) : (
-
- )}
-
- );
- };
+## Theme and Styling
- return
-
-
-The customized chat interface is displayed below.
-
-
- 
-
-
-Use the following code to achieve the customization shown above.
-
-
- {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"}
- )}
-
- );
- };
-
- return 
+
-The Conversations is a Component, that shows all conversations related to the currently logged-in user.
+
-
+
-
+const updatedSub = CometChatConversationEvents.ccUpdateConversation.subscribe(
+ (conversation: CometChat.Conversation) => {
+ console.log("Conversation updated:", conversation.getConversationId());
+ }
+);
-
-
-```
+#### Automatic updates vs. manual refresh
-
-
-
-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.
-
-
-Use the following code to achieve the customization shown above.
-
+
+
+ {user
+ ? conversation.getConversationWith().getName() + " • "
+ : conversation.getConversationWith().getName()}
+
+ {user ? (
+
+ {user.getStatusMessage()}
+
+ ) : null}
+
+ );
+};
- 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));
- }
+
+
- return (
-
-
-
- );
-};
+Customized:
-export default class DialogHelper {
- private dialogContainer: HTMLDivElement | null = null;
+
+ 
+
- createDialog(onClick: () => void, buttonText: string) {
- this.dialogContainer = document.createElement("div");
- document.body.appendChild(this.dialogContainer);
+
-Use the following code to achieve the customization shown above.
-
+
-```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).
+
+ 
+
-
+### TextFormatters
-Use the following code to achieve the customization shown above.
+Assigns custom text formatters to the conversation subtitle. If not provided, default formatters from the data source are used. To configure Mentions, see [CometChatMentionsFormatter](/ui-kit/react/mentions-formatter-guide).
-
- {user
- ? conversation.getConversationWith().getName() + " • "
- : conversation.getConversationWith().getName()}
-
- {user ? (
-
- {user.getStatusMessage()}
-
- ) : null}
-
- );
-};
+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
-
-
+interface DialogProps {
+ onClick: () => void;
+ buttonText: string;
+}
-The customized chat interface is displayed below.
+const Dialog: React.FC
-
+ return (
+
+
+
+ );
+};
-Use the following code to achieve the customization shown above.
+export default class DialogHelper {
+ private dialogContainer: HTMLDivElement | null = null;
-
-
-
-The customized chat interface is displayed below.
-
-
-
-
+```ts lines
+new CalendarObject({
+ today: `hh:mm A`, // Example: "10:30 AM"
+ yesterday: `[yesterday]`, // Example: "yesterday"
+ otherDays: `DD/MM/YYYY`, // Example: "25/05/2025"
+});
+```
-Use the following code to achieve the customization shown above.
+Custom format example:
-
+
+
+```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";
}
-.cometchat-conversations .cometchat-menu-list__sub-menu-icon {
- -webkit-mask: url(./assets/down-arrow.svg) center center no-repeat;
- -webkit-mask-size: contain;
+.cometchat-conversations .cometchat-list__header-title {
+ background: #fef8f8;
+ border-bottom: 2px solid #f4b6b8;
}
-```
-...
}` |
+| Change colors, fonts, spacing | Global CSS | Target `.cometchat-conversations` class | `.cometchat-conversations .cometchat-badge { background: #e5484d; }` |
+
+### Component API Pattern
+
+| Customization Type | Prop Pattern | Example |
+| --- | --- | --- |
+| Callback actions | `on...
}` |
+| CSS overrides | Target `.cometchat-conversations` class in global CSS | `.cometchat-conversations .cometchat-list-item { ... }` |
diff --git a/ui-kit/react/core-features.mdx b/ui-kit/react/core-features.mdx
index 78a6de7de..4735c3d45 100644
--- a/ui-kit/react/core-features.mdx
+++ b/ui-kit/react/core-features.mdx
@@ -1,13 +1,29 @@
---
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."
---
+
+ 
-| 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) works seamlessly with Quoted Message by showing the quoted reply above the input field, letting users compose their response in proper context. |
-## 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. |
+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).
## Moderation
@@ -189,12 +200,39 @@ 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.
-
+
+| 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. |
+
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).
+
+
+---
+
+## Next Steps
+
+
+ 
+
+
+#### Message Shortcuts
+
+The Message Shortcuts extension enables users to send predefined messages using short codes. For example, typing `!hb` can automatically expand to `Happy birthday!`. For a comprehensive understanding and guide on implementing and using the Message Shortcuts Extension, refer to our specific guide on the [Message Shortcuts Extension](/fundamentals/message-shortcuts).
+
+#### Pin Message
+
+The Pin Message extension allows users to pin important messages in a conversation, making them easily accessible for all participants. For a comprehensive understanding and guide on implementing and using the Pin Message Extension, refer to our specific guide on the [Pin Message Extension](/fundamentals/pin-message).
+
+#### Rich Media Preview
+
+The Rich Media Preview extension generates rich preview panels for URLs shared in messages, fetching detailed information from popular sites using iFramely. For a comprehensive understanding and guide on implementing and using the Rich Media Preview Extension, refer to our specific guide on the [Rich Media Preview Extension](/fundamentals/rich-media-preview).
+
+#### Save Message
+
+The Save Message extension allows users to bookmark messages for later reference. Saved messages are private and visible only to the user who saved them. For a comprehensive understanding and guide on implementing and using the Save Message Extension, refer to our specific guide on the [Save Message Extension](/fundamentals/save-message).
+
+#### 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).
+
+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.
+
+
+ 
-### Polls
+#### TinyURL
+
+The TinyURL extension provides URL shortening capabilities for messages, similar to Bitly but using the TinyURL service. For a comprehensive understanding and guide on implementing and using the TinyURL Extension, refer to our specific guide on the [TinyURL Extension](/fundamentals/tinyurl).
+
+#### Voice Transcription
+
+The Voice Transcription extension converts audio messages into text, making it easier to read voice messages without playing them. For a comprehensive understanding and guide on implementing and using the Voice Transcription Extension, refer to our specific guide on the [Voice Transcription Extension](/fundamentals/voice-transcription).
+
+### User Engagement
+
+#### Giphy
+
+The Giphy extension allows users to search for and share GIFs in their conversations, adding a fun and expressive element to chats. For a comprehensive understanding and guide on implementing and using the Giphy Extension, refer to our specific guide on the [Giphy Extension](/fundamentals/giphy).
+
+#### Message Translation
+
+The Message Translation extension in CometChat is designed to translate any message into your local locale. It eliminates language barriers, making the chat more inclusive. For a comprehensive understanding and guide on implementing and using the Message Translation Extension, refer to our specific guide on the [Message Translation Extension](/fundamentals/message-translation).
+
+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.
+
+
+ 
+
+
+#### Polls
The Polls extension enhances group discussions by allowing users to create polls. Users can ask questions with a predefined list of answers, enabling a quick, organized way to gather group opinions. For a comprehensive understanding and guide on implementing and using the Polls Extension, refer to our specific guide on the [Polls Extension](/fundamentals/polls).
@@ -36,17 +106,31 @@ Once you have successfully activated the [Polls Extension](/fundamentals/polls)
-### Collaborative Whiteboard
+#### Reminders
-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).
+The Reminders extension allows users to set reminders for messages or create personal reminders. When a reminder is due, a bot sends a notification message to the user. For a comprehensive understanding and guide on implementing and using the Reminders Extension, refer to our specific guide on the [Reminders Extension](/fundamentals/reminders).
-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.
+#### Stickers
+
+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).
+
+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.
- 
+
-### Collaborative Document
+#### Stipop
+
+The Stipop extension integrates the world's trendiest sticker platform into your chat, allowing users to search for and send stickers from Stipop's extensive library. For a comprehensive understanding and guide on implementing and using the Stipop Extension, refer to our specific guide on the [Stipop Extension](/fundamentals/stickers-stipop).
+
+#### Tenor
+
+The Tenor extension allows users to search for and share GIFs from Tenor's library in their conversations. For a comprehensive understanding and guide on implementing and using the Tenor Extension, refer to our specific guide on the [Tenor Extension](/fundamentals/tenor).
+
+### Collaboration
+
+#### Collaborative Document
With the Collaborative Document extension, users can work together on a shared document. This feature is essential for remote teams where document collaboration is a recurring requirement. For a comprehensive understanding and guide on implementing and using the Collaborative Document Extension, refer to our specific guide on the [Collaborative Document Extension](/fundamentals/collaborative-document).
@@ -56,32 +140,64 @@ Once you have successfully activated the [Collaborative Document Extension](/fun
-### Message Translation
+#### Collaborative Whiteboard
-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).
+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).
-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.
+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.
-
+
-### Link Preview
+### Security
-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).
+#### Disappearing Messages
-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.
+The Disappearing Messages extension allows users to send messages that automatically disappear after a specified time interval. This works for both one-on-one and group messages. For a comprehensive understanding and guide on implementing and using the Disappearing Messages Extension, refer to our specific guide on the [Disappearing Messages Extension](/fundamentals/disappearing-messages).
-
-
-
+### Customer Support
-### Thumbnail Generation
+#### Chatwoot
-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).
+The Chatwoot extension makes customer support seamless by allowing your users to communicate with your support team directly through CometChat, eliminating the need for a separate support interface. For a comprehensive understanding and guide on implementing and using the Chatwoot Extension, refer to our specific guide on the [Chatwoot Extension](/fundamentals/chatwoot).
-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.
+#### Intercom
-
-
-
+The Intercom extension integrates Intercom's customer support platform with CometChat, enabling users to chat with your support team using the same chat interface they use for regular conversations. For a comprehensive understanding and guide on implementing and using the Intercom Extension, refer to our specific guide on the [Intercom Extension](/fundamentals/intercom).
+
+### Smart Chat Features
+
+#### Conversation Starter
+
+Conversation Starter suggests AI-generated opening messages to help users begin a new chat. For a comprehensive understanding and guide on implementing and using Conversation Starter, refer to our specific guide on the [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter) and the [AI Features](/ui-kit/react/ai-features) overview.
+
+#### Smart Replies
+
+Smart Replies provide AI-generated response suggestions to keep conversations flowing. For a comprehensive understanding and guide on implementing and using Smart Replies, refer to our specific guide on the [Smart Replies](/fundamentals/ai-user-copilot/smart-replies) and the [AI Features](/ui-kit/react/ai-features) overview.
+
+#### Conversation Summary
+
+Conversation Summary generates an AI-written recap of a conversation when needed. For a comprehensive understanding and guide on implementing and using Conversation Summary, refer to our specific guide on the [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary) and the [AI Features](/ui-kit/react/ai-features) overview.
+
+---
+
+
+---
+
+## Next Steps
+
+
-***
+
-
+Fires when the component encounters an error (network failure, auth issue, etc.).
-
-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.
-
- {member.getName()}
- 
{member.getRole()}
-
;
-}
+ return (
+
+ {member.getName()}
+
+ ![]({"ICON_HERE"})
+ {member.getRole()}
+
+
+ );
+};
-
-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.
-
-
);
};
-
-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.
-
- {
- // logic here
- }}
- iconURL={ICON_URL}
- />
-
- );
+ return (
+
- {localize("GROUP_MEMBERS")}
-
-
+ {
+ // logic here
+ }}
+ iconURL={ICON_URL}
+ />
+
+ );
};
-
+ {localize("GROUP_MEMBERS")}
+
+ 
-Use the following code to achieve the customization shown above.
-
+
+
+```tsx lines
+
-The Groups component is composed of the following BaseComponents:
+
+
+ );
+}
export default GroupsDemo;
```
-
-
+### Example
-
-The customized chat interface is displayed below.
+Customized:
-Use the following code to achieve the customization shown above.
-
-
- );
- };
-
- return
-
- {group.getName()}
- JOIN
-
- {group.getMembersCount()} Members • {group.getDescription()}
-
-
-
-```css
+
+```css lines
.group-list-item {
display: flex;
flex-direction: column;
text-align: left;
- display: flex;
min-width: 240px;
padding: 8px 16px;
gap: 4px;
@@ -651,161 +433,120 @@ export default GroupsDemo;
line-height: 16.8px;
}
```
-
-
-***
-
-#### TitleView
+### titleView
-The customized chat interface is displayed below.
+Replace the name / title text. Group type badge inline example.
-Use the following code to achieve the customization shown above.
-
-```ts
-import React from "react";
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroups } from "@cometchat/chat-uikit-react";
-// Custom title view component
const customTitleView = (group: CometChat.Group) => {
- return
-
-
-```css
-.groups__title-view{
-display: flex;
-align-items: center;
-gap: 4px;
-align-self: stretch;
+
+```css lines
+.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
+
+.groups__title-view-name {
+ overflow: hidden;
+ color: #141414;
+ text-overflow: ellipsis;
+ font: 500 16px Roboto;
}
-.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__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__title-view-public .groups__title-view-type{
-background: #0B7BEA;
+
+.groups__title-view-public .groups__title-view-type {
+ background: #0b7bea;
}
-.groups__title-view-type img{
-background: #fff;
-border-radius: 4px;
-height: 12px;
-width: 12px;
+
+.groups__title-view-type img {
+ background: #fff;
+ border-radius: 4px;
+ height: 12px;
+ width: 12px;
}
```
-
-
-***
+### subtitleView
-#### SubtitleView
+Replace the member count subtitle text.
-Custom subtitle view to be rendered 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
+```ts 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 (
-
-
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatGroups } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const GroupsDemo = () => {
- const getSubtitleView = (group) => {
- if (!(group instanceof CometChat.Group)) {
- return <>;
- }
-
- return (
-
-
-
-```css
+
+```css lines
.cometchat .cometchat-groups .group-subtitle {
overflow: hidden;
color: #727272;
@@ -817,203 +558,148 @@ export default GroupsDemo;
line-height: 120%;
}
```
-
-
-***
+### leadingView
-#### LeadingView
-
-The customized chat interface is displayed below.
+Replace the avatar / left section. Joined status badge example.
-Use the following code to achieve the customization shown above.
-
-```ts
-import React from "react";
+```ts lines
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() ?
-
-
-```css
-
-.cometchat-groups .cometchat-list-item .groups__leading-view .cometchat-avatar__image, .cometchat-groups .cometchat-list-item .groups__leading-view .cometchat-avatar{
+
+```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 ;
+ height: 48px;
+ width: 48px;
}
-.groups__leading-view-info{
+.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;
+ color: #fff;
+ font: 600 8px/9.6px Roboto;
+ background: #ffab00;
+ position: absolute;
+ bottom: -2px;
}
-.groups__leading-view-joined .groups__leading-view-info{
- background:#09C26F;
+
+.groups__leading-view-joined .groups__leading-view-info {
+ background: #09c26f;
}
-.groups__leading-view{
+
+.groups__leading-view {
position: relative;
}
```
-
-
-***
-
-#### TrailingView
+### trailingView
-The customized chat interface is displayed below.
+Replace the right section. Join status button example.
-Use the following code to achieve the customization shown above.
-
-```ts
-import React from "react";
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
-import {
- CometChatGroups,
-} from "@cometchat/chat-uikit-react";
-
-// Custom trailing view component
-const customTrailingButtonView = (group:CometChat.Group) => {
-return
-
-
-```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;
+
+```css lines
+.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;
+
+.cometchat-groups .cometchat-list-item__trailing-view {
+ width: fit-content;
+ height: fit-content;
}
```
-
-
-***
-
-#### Header View
+### headerView
-A custom component to render in the top-right corner of the groups list.
-
-The customized chat interface is displayed below.
+Replace the entire header bar.
-Use the following code to achieve the customization shown above.
-
-```ts
-import { CometChatGroups } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const GroupsDemo = () => {
- const getHeaderView = () => {
- return ;
- };
-
- return
-
-
-```js
+```ts lines
import { CometChatGroups } from "@cometchat/chat-uikit-react";
-import React from "react";
-const GroupsDemo = () => {
- const getHeaderView = () => {
- return ;
- };
-
- return
-
-
-```css
+
+```css lines
.group-header-view {
height: 24px;
width: 24px;
@@ -1030,83 +716,44 @@ export default GroupsDemo;
mask-size: contain;
}
```
-
-
-***
-
-#### Options
+### options
-You can set the Custom options to the Groups component.
-
-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
+```ts lines
+import { CometChat } from "@cometchat/chat-sdk-javascript";
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);
- },
- }),
- ];
- };
-
- return
-
-
-```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);
- },
- }),
- ];
- };
-
- return
-
-
-```css
+
+```css lines
.cometchat .cometchat-groups .cometchat-menu-list__menu {
background: none;
}
+
.cometchat .cometchat-groups .cometchat-menu-list__main-menu-item-icon {
height: 24px;
width: 24px;
@@ -1123,7 +770,84 @@ export default GroupsDemo;
mask-size: contain;
}
```
-
-
+
+#### Structure of CometChatOption
+
+| Name | Description |
+| --- | --- |
+| `id` | Unique identifier for each option |
+| `title` | Heading text for each option |
+| `iconURL` | Asset URL of the icon for each option |
+| `onClick` | Method invoked when user clicks the option |
+
+## Theme and Styling
+
+Using CSS, customize the look and feel of the component. The root CSS class is `.cometchat-groups`.
+
+
+
+
+
+```tsx lines
+
+- **Package:** `@cometchat/chat-uikit-react`
+- **Key components:** `CometChatMessages` — uses `CometChat.blockUsers()` / `CometChat.unblockUsers()` SDK methods
+- **Required setup:** `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)
+
+
+
Implement user blocking functionality to prevent unwanted communication in your React chat app.
## Overview
@@ -279,11 +291,21 @@ CometChat.blockUsers([UID]).then(
---
-## 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.
+
+
+
+***
diff --git a/ui-kit/react/guide-call-log-details.mdx b/ui-kit/react/guide-call-log-details.mdx
index a029b601e..f35c4e5ae 100644
--- a/ui-kit/react/guide-call-log-details.mdx
+++ b/ui-kit/react/guide-call-log-details.mdx
@@ -1,8 +1,19 @@
---
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."
---
+
+- **Packages:** `@cometchat/chat-uikit-react` + `@cometchat/calls-sdk-javascript`
+- **Key components:** `CometChatCallDetails`, `CometChatCallDetailsInfo`, `CometChatCallDetailsParticipants`, `CometChatCallDetailsRecording`
+- **Required setup:** `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)
+
+
+
Display comprehensive call information and history when users select calls from the calls tab in your React chat app.
## Overview
@@ -303,3 +314,22 @@ useEffect(() => {
| Call history | `CometChatCallDetailsHistory` | [CometChatCallLogHistory.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCallLog/CometChatCallLogHistory.tsx) |
| Tab navigation | `activeTab` state | [CometChatCallLogDetails.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCallLog/CometChatCallLogDetails.tsx) |
| User status monitoring| `CometChat.addUserListener()` | [CometChatCallLogDetails.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCallLog/CometChatCallLogDetails.tsx) |
+
+## Next Steps
+
+
+
+ The call logs component reference.
+
+
+ Overview of calling capabilities.
+
+
+ Browse all feature and formatter guides.
+
+
+ Full working sample application on GitHub.
+
+
+
+***
diff --git a/ui-kit/react/guide-group-chat.mdx b/ui-kit/react/guide-group-chat.mdx
index b62e735ec..c9c232af6 100644
--- a/ui-kit/react/guide-group-chat.mdx
+++ b/ui-kit/react/guide-group-chat.mdx
@@ -1,8 +1,19 @@
---
title: "Group Chat"
sidebarTitle: "Group Chat"
+description: "Implement group management including create, join, members, roles, and ownership transfer in CometChat React UI Kit."
---
+
+- **Package:** `@cometchat/chat-uikit-react`
+- **Key components:** `CometChatGroups`, `CometChatGroupMembers`, `CometChatCreateGroup`, `CometChatJoinGroup`
+- **Required setup:** `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)
+
+
+
Implement comprehensive group management functionality including creation, joining, member management, and administrative controls in your React chat app.
---
@@ -337,11 +348,21 @@ const handleGroupOperation = async (operation: () => Promise) => {
---
-## 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.
+
+
+
+***
diff --git a/ui-kit/react/guide-message-privately.mdx b/ui-kit/react/guide-message-privately.mdx
index 1d0add7ad..4054ae49e 100644
--- a/ui-kit/react/guide-message-privately.mdx
+++ b/ui-kit/react/guide-message-privately.mdx
@@ -1,8 +1,19 @@
---
title: "Message Privately"
sidebarTitle: "Message Privately"
+description: "Launch a direct 1:1 chat from a group member profile in CometChat React UI Kit."
---
+
+- **Package:** `@cometchat/chat-uikit-react`
+- **Key components:** `CometChatMessages`, `CometChatGroupMembers`, `CometChatMessageComposer`, `CometChatMessageList`, `CometChatMessageHeader`
+- **Required setup:** `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)
+
+
+
Enable users to initiate private conversations with group members directly from group chat interfaces.
## Overview
@@ -316,10 +327,21 @@ const startPrivateChatFromGroup = async (user: CometChat.User, group: CometChat.
---
-## 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
-- User Management Features
-- Message Types & Features
+## Next Steps
+
+
+
+ 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..d9a341c26 100644
--- a/ui-kit/react/guide-new-chat.mdx
+++ b/ui-kit/react/guide-new-chat.mdx
@@ -1,8 +1,19 @@
---
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."
---
+
+- **Package:** `@cometchat/chat-uikit-react`
+- **Key components:** `CometChatUsers`, `CometChatGroups`, `CometChatJoinGroup`, `CometChatSelector`
+- **Required setup:** `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)
+
+
+
Enable users to create new conversations with individual users or join existing groups in your React chat app.
## Overview
@@ -257,9 +268,21 @@ const joinGroup = (e) => {
---
-## 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..986e29113 100644
--- a/ui-kit/react/guide-overview.mdx
+++ b/ui-kit/react/guide-overview.mdx
@@ -1,7 +1,17 @@
---
title: "Overview"
sidebarTitle: "Overview"
+description: "Index of task-oriented feature guides for the CometChat React UI Kit."
---
+
+
+- **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 +34,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..97bdf7bf2 100644
--- a/ui-kit/react/guide-search-messages.mdx
+++ b/ui-kit/react/guide-search-messages.mdx
@@ -1,8 +1,19 @@
---
title: "Search Messages"
sidebarTitle: "Search Messages"
+description: "Add full-text message search across conversations with result routing in CometChat React UI Kit."
---
+
+- **Package:** `@cometchat/chat-uikit-react`
+- **Key components:** `CometChatSearchMessages`, `CometChatMessageList`, `CometChatMessageComposer`, `CometChatMessageHeader`
+- **Required setup:** `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)
+
+
+
Enable users to search messages within conversations and group chats using CometChat's React UI Kit.
## Overview
@@ -178,9 +189,21 @@ try {
---
-## 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)
-- Message Management Features
-- Advanced Search Features
+## Next Steps
+
+
+
+ The search component reference.
+
+
+ Render real-time message threads.
+
+
+ Browse all feature and formatter guides.
+
+
+ Full working sample application on GitHub.
+
+
+
+***
diff --git a/ui-kit/react/guide-threaded-messages.mdx b/ui-kit/react/guide-threaded-messages.mdx
index 50c06c07f..11c6f7e05 100644
--- a/ui-kit/react/guide-threaded-messages.mdx
+++ b/ui-kit/react/guide-threaded-messages.mdx
@@ -1,8 +1,20 @@
---
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."
---
+
+- **Package:** `@cometchat/chat-uikit-react`
+- **Key components:** `CometChatThreadedMessages`, `CometChatThreadHeader`, `CometChatMessageList`, `CometChatMessageComposer`
+- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")`
+- **Purpose:** Threaded message replies with parent context, reply list, and focused thread composer
+- **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)
+
+
+
Enable organized threaded conversations within group chats using CometChat's React UI Kit.
## Overview
@@ -211,5 +223,19 @@ useEffect(() => {
## 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..688bf3b2c 100644
--- a/ui-kit/react/incoming-call.mdx
+++ b/ui-kit/react/incoming-call.mdx
@@ -1,30 +1,35 @@
---
title: "Incoming Call"
+description: "Display and manage incoming voice and video calls with accept/decline controls using the CometChatIncomingCall component."
---
-## 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. |
+| Field | Value |
+| --- | --- |
+| Purpose | Visual notification for incoming voice/video calls with accept and decline controls |
+| Package | `@cometchat/chat-uikit-react` |
+| Import | `import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";` |
+| Used in experiences | Call notification overlay, incoming call screen |
+| Copy-paste base | See [Base Code](#base-code--stylesheet) below |
+| Primary output | Call acceptance/rejection via `onAccept`, `onDecline` |
+| Primary hook points | `onAccept`, `onDecline`, `onError`, `callSettingsBuilder`, view slots (`subtitleView`, `leadingView`, `trailingView`, `titleView`, `itemView`) |
+| CSS root class | `.cometchat-incoming-call` |
+| Real-time events | `CometChatCallEvents.ccCallRejected`, `CometChatCallEvents.ccCallAccepted`, `CometChatCallEvents.ccCallEnded` |
-## Usage
+
-### Integration
+## Base Code and Stylesheet
+
+Renders an incoming call notification with accept/decline buttons. The component auto-detects incoming calls.
-
-```tsx
+
+```tsx lines
import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -34,102 +39,91 @@ const IncomingCallsDemo = () => {
export default IncomingCallsDemo;
```
-
-
-```tsx
-import { IncomingCallsDemo } from "./IncomingCallsDemo";
+```tsx lines
+import IncomingCallsDemo from "./IncomingCallsDemo";
export default function App() {
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.
+Root CSS class for style overrides:
-##### 1. onAccept
+```css lines
+.cometchat-incoming-call {
+ /* overrides here */
+}
+```
-`onAccept` is triggered when you click the accept button of the `Incoming Call` component. You can override this action using the following code snippet.
+## Functionality
-
-
-```ts
-import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
+Props that control component behavior, grouped by surface area.
-const IncomingCallsDemo = () => {
- const handleOnAccept = () => {
- console.log("custom on accept action");
- };
+### Data
- return
+| Property | Type | Default | Effect | Pitfall |
+| --- | --- | --- | --- | --- |
+| `disableSoundForCalls` | `boolean` | `false` | Disables the incoming call ringtone | — |
+| `customSoundForCalls` | `string` | `undefined` | Custom sound file URL for incoming calls | — |
-
-```js
-import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
+## Actions
-const IncomingCallsDemo = () => {
- const handleOnAccept = () => {
- console.log("custom on accept action");
- };
+[Actions](/ui-kit/react/components-overview#actions) split into predefined (built-in triggers) and user-defined (callbacks).
- return
+### User-Defined Actions
-
+#### onAccept
-##### 2. onDecline
+Fires when the accept button is clicked.
-`onDecline` is triggered when you click the Decline button of the `Incoming Call` component. You can override this action using the following code snippet.
+| Detail | Value |
+| --- | --- |
+| When it fires | User clicks the accept button |
+| Payload type | `(call: CometChat.Call) => void` |
+| What devs typically do next | Custom call acceptance logic |
-
-
-```ts
+```ts lines
import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
const IncomingCallsDemo = () => {
- const handleOnDecline = () => {
- console.log("your custom on decline action");
+ const handleOnAccept = () => {
+ console.log("custom on accept action");
};
- return
+#### onDecline
+
+Fires when the decline button is clicked.
+
+| Detail | Value |
+| --- | --- |
+| When it fires | User clicks the decline button |
+| Payload type | `(call: CometChat.Call) => void` |
+| What devs typically do next | Custom call rejection logic |
-
-```js
+```ts lines
import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
const IncomingCallsDemo = () => {
const handleOnDecline = () => {
@@ -138,23 +132,20 @@ const IncomingCallsDemo = () => {
return
+#### onError
-
-
-##### 3. onError
+Fires when the component encounters an error.
-This action doesn't change the behavior of the component but rather listens for any errors that occur in the Incoming Call component.
+| Detail | Value |
+| --- | --- |
+| When it fires | Any internal error |
+| Payload type | `(error: CometChat.CometChatException) => void` |
+| What devs typically do next | Log to error tracking service |
-
-
-```ts
+```ts lines
import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
const IncomingCallsDemo = () => {
const handleOnError = (error: CometChat.CometChatException) => {
@@ -163,104 +154,43 @@ const IncomingCallsDemo = () => {
return
-
-
-```js
-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
-
-
-
-***
+## Filters
-### Filters
+Set `CallSettingsBuilder` to customize the calling experience. Refer to [CallSettingsBuilder](/sdk/javascript/direct-call#settings).
-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
+```ts 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 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 IncomingCall component:
-The list of events emitted by the Incoming Call component is as follows.
+| Event | Source | When it fires |
+| --- | --- | --- |
+| `ccCallRejected` | `CometChatCallEvents` | Incoming call is rejected |
+| `ccCallAccepted` | `CometChatCallEvents` | Incoming call is accepted |
+| `ccCallEnded` | `CometChatCallEvents` | Call ends |
-| 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. |
+#### Subscribe
-
-
-```tsx
+```tsx lines
const ccCallRejected = CometChatCallEvents.ccCallRejected.subscribe(
(call: CometChat.Call) => {
//Your Code
@@ -280,432 +210,101 @@ const ccCallEnded = CometChatCallEvents.ccCallEnded.subscribe(
);
```
-
-
-
+#### Unsubscribe
-***
-
-
-
-```tsx
+```tsx lines
ccCallRejected?.unsubscribe();
-
ccCallAccepted?.unsubscribe();
-
ccCallEnded?.unsubscribe();
```
-
-
-
-
-***
-
-## 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.
-
-### Style
-
-Using CSS you can customize the look and feel of the component in your app like the color, size, shape, and fonts.
-
-**Example:**
-
-
- 
-
-
-
-
-```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;
-}
-
-.cometchat-list-item__body-subtitle {
- justify-content: center;
-}
-```
-
-
-
-
-
-### 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
-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 (
-
-
-
-
-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
-
-Property `subtitleView` is a function that renders a JSX element to display the subtitle view.
-
-
-
-```ts
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-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
+### SDK Events (Real-Time)
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const IncomingCallsDemo = () => {
- const getSubtitleView = (call) => {
- /** Return custom subtitle view */
- };
-
- return
+Customization override points for the incoming call UI.
-
+### Slot Catalog
-#### LeadingView
+| Slot | Params | What it replaces | Section |
+| --- | --- | --- | --- |
+| `subtitleView` | `(call: CometChat.Call) => JSX.Element` | Subtitle text | Sub-section (subtitle) |
+| `leadingView` | `(call: CometChat.Call) => JSX.Element` | Avatar / left section | Sub-section (leading) |
+| `trailingView` | `(call: CometChat.Call) => JSX.Element` | Right section | Sub-section (trailing) |
+| `titleView` | `(call: CometChat.Call) => JSX.Element` | Name / title text | Sub-section (title) |
+| `itemView` | `(call: CometChat.Call) => JSX.Element` | Entire list item | Whole item |
-Property `leadingView` is a function that renders a JSX element to display the leading view.
+### leadingView
-The customized call interface is displayed below.
+Replace the avatar / left section.
-Use the following code to achieve the customization shown above.
-
-```ts
+```ts lines
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
+
+```css lines
.cometchat-incoming-call__avatar {
display: none;
}
```
-
-
-#### TitleView
-
-Property `titleView` is a function that renders a JSX element to display the title view.
+### titleView
-The customized call interface is displayed below.
+Replace the name / title text.
-Use the following code to achieve the customization shown above.
-
-```ts
+```ts lines
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 (
-
-
-
-```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
+
+```css lines
.incoming-call__title-wrapper {
display: flex;
width: 370px;
@@ -737,74 +336,39 @@ export default IncomingCallsDemo;
width: 20px;
}
```
-
-
-#### TrailingView
+### trailingView
-Property `trailingView` is a function that renders a JSX element to display the trailing view.
-
-The customized call interface is displayed below.
+Replace the right section.
-Use the following code to achieve the customization shown above.
-
-```ts
+```ts lines
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 (
-
-
-
-```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
+
+```css lines
.incoming-call__avatar {
display: flex;
height: 62px;
@@ -826,88 +390,46 @@ export default IncomingCallsDemo;
background-size: contain;
}
```
-
-
-#### ItemView
-
-Property `itemView` is a function that renders a JSX element to display the item view.
+### itemView
-The customized call interface is displayed below.
+Replace the entire list item.
-Use the following code to achieve the customization shown above.
-
-```ts
+```ts lines
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 (
-
-
-
-```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
+
+```css lines
.incoming-call__itemview {
display: flex;
flex-direction: column;
@@ -927,7 +449,7 @@ export default IncomingCallsDemo;
.incoming-call__itemview .cometchat-avatar__text {
color: #FFF;
text-align: center;
- font: 700 32px Roboto
+ font: 700 32px Roboto;
}
.incoming-call__itemview-title {
@@ -941,7 +463,37 @@ export default IncomingCallsDemo;
font: 400 16px Roboto;
}
```
-
-
+
+## Theme and Styling
+
+Using CSS, customize the look and feel of the component. The root CSS class is `.cometchat-incoming-call`.
+
+
+
+
+
+```tsx lines
+
-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**
+| 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)
-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.
+## LocalizationSettings
-| 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. |
+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 |
-**Example**
```javascript
import { CometChatLocalize } from "@cometchat/chat-uikit-react";
import { CalendarObject } from "./CalendarObject";
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**
+| 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
-import { CometChatLocalize } from "@cometchat/chat-uikit-react";
-import { CalendarObject } from "./CalendarObject";
-
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
-
-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.
-
-**Usage**
-* Define translations for custom flag message reasons.
-* The reason name would be displayed when the required translation is not found.
+### Report Message
-**Example**
+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.
```javascript
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
+### 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.
-
-**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
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
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
-
-This method detects the language set in the user's browser or device settings.
-
-**Usage**
+### getBrowserLanguage
-* Automatically set the app’s language based on the user’s browser settings.
-* Helps in making the UI multilingual without requiring user input.
-
-**Example**
+Detects the language set in the user's browser or device settings.
```javascript
const userLang = CometChatLocalize.getBrowserLanguage();
console.log(userLang);
```
-***
-
-#### Get Localized String
-
-This method 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.
+### getLocalizedString
-**Example**
+Fetches localized text based on the current language.
```javascript
const translatedText = CometChatLocalize.getLocalizedString("welcome_message");
```
-***
+### getCurrentLanguage
-#### Get Current Language
-
-This method returns the currently set language for the UI Kit.
-
-**Usage**
-
-* Useful to debug and display the currently active language.
-* Helps when dynamically switching between languages.
-
-**Example**
+Returns the currently set language for the UI Kit.
```javascript
console.log(CometChatLocalize.getCurrentLanguage());
```
-***
-
-#### Get Default Language
+### getDefaultLanguage
-This method returns the system-preferred language.
-
-**Usage**
-
-* If disableAutoDetection is enabled, the method returns the fallback language.
-* If auto-detection is enabled, it returns the browser's preferred language.
-
-**Example**
+Returns the system-preferred language. If `disableAutoDetection` is enabled, returns the fallback language. Otherwise returns the browser's preferred language.
```javascript
console.log(CometChatLocalize.getDefaultLanguage());
```
-***
-
-#### Set Current Language
+### setCurrentLanguage
-This method updates the language at runtime without reloading the application.
-
-**Usage**
-
-* Allow users to change the language via a settings menu.
-* Ensure that UI elements are updated instantly after changing the language.
-
-**Example**
+Updates the language at runtime without reloading the application.
```javascript
CometChatLocalize.setCurrentLanguage("fr");
```
-***
+### addTranslation
-#### Add Custom Translations
+Adds custom translations to the existing ones dynamically. New translations are merged into the existing localization data.
+
+```javascript
+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!" }
-});
+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
-#### **Customisation**
+Returns the language code used for date localization. If `disableDateTimeLocalization` is `true`, returns `"en-US"`. Otherwise returns the current language.
-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.
+```javascript
+const dateLang = CometChatLocalize.getDateLocaleLanguage();
+```
+
+---
-* **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
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
+- **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)
+
+
+
## Overview
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.
@@ -48,3 +59,22 @@ mentionsFormatter.setCometChatUserGroupMembers(userList);
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..cf57797d8 100644
--- a/ui-kit/react/message-composer.mdx
+++ b/ui-kit/react/message-composer.mdx
@@ -1,26 +1,35 @@
---
title: "Message Composer"
+description: "CometChatMessageComposer component provides a rich text input for composing and sending messages including text, media, attachments, reactions, mentions, and voice notes. Supports custom actions, AI features, and CSS styling."
---
-## Overview
-
-MessageComposer is a Component that enables users to write and send a variety of messages, including text, image, video, and custom messages.
-
-Features such as **Attachments**, and **Message Editing** are also supported by it.
-
-## Usage
+
+
+| Field | Value |
+| --- | --- |
+| Purpose | Rich text input for composing and sending text, media, attachments, mentions, voice notes, and custom messages in user or group conversations |
+| Package | `@cometchat/chat-uikit-react` |
+| Import | `import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";` |
+| Used in experiences | Chat view, threaded conversations, message reply panel |
+| Copy-paste base | See [Base Code](#base-code--stylesheet) below |
+| Primary output | Sent messages via `onSendButtonClick`, text changes via `onTextChange` |
+| Primary hook points | `onSendButtonClick`, `onError`, `onTextChange`, view slots (`attachmentOptions`, `auxiliaryButtonView`, `sendButtonView`, `headerView`, `textFormatters`) |
+| CSS root class | `.cometchat-message-composer` |
+| Real-time events | `CometChatMessageEvents.ccMessageSent`, `CometChatMessageEvents.ccMessageEdited`, `CometChatMessageEvents.ccReplyToMessage` |
-### Integration
+
-The following code snippet illustrates how you can directly incorporate the MessageComposer component into your app.
+## Base Code and Stylesheet
+
+Renders a rich text input with attachment, emoji, voice recording, and send controls for a user or group conversation.
-```tsx
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
@@ -40,39 +49,102 @@ export function MessageComposerDemo() {
) : null;
}
```
-
-
-```tsx
+```tsx lines
import { MessageComposerDemo } from "./MessageComposerDemo";
export default function App() {
return (
-
-### Actions
+Root CSS class for style overrides:
-[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.
+```css lines
+.cometchat-message-composer {
+ /* overrides here */
+}
+```
-##### 1. OnSendButtonClick
+## Functionality
-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.
+Props that control component behavior, grouped by surface area.
-
-
-```tsx
+### Data
+
+| Property | Type | Default | Effect | Pitfall |
+| --- | --- | --- | --- | --- |
+| `user` | `CometChat.User` | `undefined` | Sets the recipient user for the composer | Pass either `user` or `group`, not both |
+| `group` | `CometChat.Group` | `undefined` | Sets the recipient group for the composer | Pass either `user` or `group`, not both |
+| `parentMessageId` | `number` | `undefined` | Targets a thread; messages sent as replies to this parent | — |
+| `initialComposerText` | `string` | `""` | Pre-fills the text input when the component mounts | — |
+
+### UI Visibility Toggles
+
+| Property | Type | Default | Effect | Pitfall |
+| --- | --- | --- | --- | --- |
+| `hideImageAttachmentOption` | `boolean` | `false` | Hides the image attachment option | — |
+| `hideVideoAttachmentOption` | `boolean` | `false` | Hides the video attachment option | — |
+| `hideAudioAttachmentOption` | `boolean` | `false` | Hides the audio attachment option | — |
+| `hideFileAttachmentOption` | `boolean` | `false` | Hides the file attachment option | — |
+| `hidePollsOption` | `boolean` | `false` | Hides the polls option | — |
+| `hideCollaborativeDocumentOption` | `boolean` | `false` | Hides the collaborative document option | — |
+| `hideCollaborativeWhiteboardOption` | `boolean` | `false` | Hides the collaborative whiteboard option | — |
+| `hideAttachmentButton` | `boolean` | `false` | Hides the entire attachment button | — |
+| `hideVoiceRecordingButton` | `boolean` | `false` | Hides the voice recording button | — |
+| `hideEmojiKeyboardButton` | `boolean` | `false` | Hides the emoji keyboard button | — |
+| `hideStickersButton` | `boolean` | `false` | Hides the stickers button | — |
+| `hideSendButton` | `boolean` | `false` | Hides the send button | — |
+| `showScrollbar` | `boolean` | `false` | Shows the scrollbar in the composer input | — |
+
+### Behavior
+
+| Property | Type | Default | Effect | Pitfall |
+| --- | --- | --- | --- | --- |
+| `disableTypingEvents` | `boolean` | `false` | Disables the typing indicator for this composer | — |
+| `disableMentions` | `boolean` | `false` | Disables the mentions functionality | — |
+| `disableMentionAll` | `boolean` | `false` | Controls whether group mentions like @all appear in suggestions | — |
+| `mentionAllLabel` | `string` | `"all"` | Custom alias label for group mentions (@channel, @everyone, etc.) | — |
+| `enterKeyBehavior` | `EnterKeyBehavior` | `EnterKeyBehavior.SendMessage` | Determines Enter key behavior (send message or add new line) | — |
+| `disableSoundForMessage` | `boolean` | `false` | Disables sound for outgoing messages | — |
+| `customSoundForMessage` | `string` | `undefined` | Custom audio sound URL for outgoing messages | — |
+| `placeholderText` | `string` | `""` | Placeholder text displayed in the message input field when empty | — |
+
+### Mentions
+
+| Property | Type | Default | Effect | Pitfall |
+| --- | --- | --- | --- | --- |
+| `mentionsUsersRequestBuilder` | `CometChat.UsersRequestBuilder` | SDK default | Custom builder to control how mentioned users are fetched | — |
+| `mentionsGroupMembersRequestBuilder` | `CometChat.GroupMembersRequestBuilder` | SDK default | Custom builder to control how mentioned group members are fetched | — |
+
+## Actions
+
+[Actions](/ui-kit/react/components-overview#actions) split into predefined (built-in triggers) and user-defined (callbacks).
+
+### Predefined Actions
+
+The send button has a built-in action that sends the composed message. Override it with `onSendButtonClick`.
+
+### User-Defined Actions
+
+#### onSendButtonClick
+
+Fires when the send button is clicked. Overrides the default send behavior.
+
+| Detail | Value |
+| --- | --- |
+| When it fires | User clicks the send button |
+| Payload type | `(message: CometChat.BaseMessage) => void` |
+| What devs typically do next | Custom send logic, message preprocessing |
+
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
@@ -98,17 +170,17 @@ export function MessageComposerDemo() {
}
```
-
+#### onError
-
+Fires when the component encounters an error.
-##### 2. onError
+| Detail | Value |
+| --- | --- |
+| When it fires | Any internal error during rendering or message sending |
+| Payload type | `(error: CometChat.CometChatException) => void` |
+| What devs typically do next | Log to error tracking service |
-This action doesn't change the behavior of the component but rather listens for any errors that occur in the MessageList component.
-
-
-
-```tsx
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
@@ -134,17 +206,17 @@ export function MessageComposerDemo() {
}
```
-
-
-
+#### onTextChange
-##### 3. onTextChange
+Fires as the user types in the composer input.
-This event is triggered as the user starts typing in the Message Composer.
+| Detail | Value |
+| --- | --- |
+| When it fires | Text content changes in the input |
+| Payload type | `(text: string) => void` |
+| What devs typically do next | Track input state, trigger custom suggestions |
-
-
-```tsx
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
@@ -173,95 +245,25 @@ export function MessageComposerDemo() {
}
```
-
+## Filters
-
+The MessageComposer component does not have any exposed filters. It provides a text input and attachment interface and does not fetch paginated lists.
-##### 4. Custom Mentions Request Builders
+## Events
-You can customize how mentioned users and group members are fetched by providing custom request builders.
+### UI Events
-
-
-```tsx
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
+Events emitted by the MessageComposer component:
-export function MessageComposerDemo() {
- const [chatUser, setChatUser] = React.useState();
- const [chatGroup, setChatGroup] = React.useState();
+| Event | Source | When it fires |
+| --- | --- | --- |
+| `ccMessageSent` | `CometChatMessageEvents` | A message is sent (inProgress, success, error) |
+| `ccMessageEdited` | `CometChatMessageEvents` | A message is edited (inProgress, success, error) |
+| `ccReplyToMessage` | `CometChatMessageEvents` | User replies to a message |
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
- }, []);
-
- // Custom Users Request Builder for mentions
- const mentionsUsersRequestBuilder = new CometChat.UsersRequestBuilder()
- .setLimit(10)
- .setSearchKeyword("")
- .setRoles(["default", "moderator"]);
-
- // Custom Group Members Request Builder for group mentions
- const mentionsGroupMembersRequestBuilder = new CometChat.GroupMembersRequestBuilder("guid")
- .setLimit(15)
- .setSearchKeyword("")
- .setScopes(["admin", "moderator", "participant"]);
-
- return chatUser ? (
-
-
-
-
-***
-
-### Filters
-
-MessageComposer component does not have any available filters.
-
-***
+#### Subscribe
-### 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 Messages component is as follows.
-
-| Event | Description |
-| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| **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. |
-| **ccMessageSent** | Triggers whenever a loggedIn user sends any message, it will have three states such as: inProgress, success and error. |
-
-Adding `CometChatMessageEvents` Listener's
-
-
-
-```js
+```js lines
import { CometChatMessageEvents } from "@cometchat/chat-uikit-react";
const ccMessageEdited = CometChatMessageEvents.ccMessageEdited.subscribe(() => {
@@ -277,153 +279,49 @@ const ccMessageSent = CometChatMessageEvents.ccMessageSent.subscribe(() => {
});
```
-
-
-
+#### Unsubscribe
-***
-
-Removing `CometChatMessageEvents` Listener's
-
-
-
-```js
+```js lines
ccMessageEdited?.unsubscribe();
ccReplyToMessage?.unsubscribe();
ccMessageSent?.unsubscribe();
```
-
+### SDK Events (Real-Time)
-
+The component internally listens to SDK events for real-time updates. No manual attachment needed.
-***
+## Advanced: Custom View Slots
-## Customization
+Customization override points for the message composer UI.
-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.
+### Slot Catalog
-### Style
+| Slot | Params | What it replaces | Section |
+| --- | --- | --- | --- |
+| `attachmentOptions` | `CometChatMessageComposerAction[]` | Default attachment options list | Attachment menu |
+| `auxiliaryButtonView` | `JSX.Element` | Sticker and AI button area | Sub-section (auxiliary) |
+| `sendButtonView` | `JSX.Element` | Send button | Sub-section (send) |
+| `headerView` | `JSX.Element` | Area above the composer input | Whole section |
+| `textFormatters` | `CometChatTextFormatter[]` | Text formatting in the input | Text content |
-To modify the styling, you can customise the css of MessageComposer Component.
+### attachmentOptions
-**Example**
-
-
- 
-
-
-
-
-```tsx
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
-
-
-
-
-```css
-.cometchat-message-composer .cometchat-message-composer__input {
- font-family: "SF Pro";
-}
-
-.cometchat-message-composer .cometchat-button .cometchat-button__icon {
- background: #f19fa1;
-}
-
-.cometchat-message-composer .cometchat-message-composer__send-button {
- background: #e5484d;
-}
-```
-
-
-
-
-
-***
-
-### 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.
-
-
-
-```tsx
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
-
-
-
-
-
-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.
+Override the default attachment options with a custom list of `CometChatMessageComposerAction` items.
-The customized chat interface is displayed below.
+or
-Use the following code to achieve the customization shown above.
-
-
-```tsx
+
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
@@ -461,11 +359,9 @@ function getAttachments() {
user={userObj}
/>;
```
-
-
-
-```css
+
+```css lines
.cometchat-message-composer__secondary-button-view-attachment-button
.cometchat-action-sheet {
border: none;
@@ -491,41 +387,26 @@ function getAttachments() {
background: #141414;
}
```
-
-
-***
+### auxiliaryButtonView
-#### AuxiliaryButtonView
-
-You can insert a custom view into the MessageComposer component to add additional functionality using the following method.
-
-Please note that the MessageComposer Component utilizes the AuxiliaryButton to provide sticker and AI functionality. Overriding the AuxiliaryButton will subsequently replace the sticker functionality.
-
-Shown below is the default chat interface.
+Replace the sticker and AI button area. Overriding this replaces the sticker functionality.
-The customized chat interface is displayed below.
-
-Use the following code to achieve the customization shown above.
-
-
-
-```tsx
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
CometChatMessageComposer,
- IconStyle,
CometChatButton,
} from "@cometchat/chat-uikit-react";
@@ -544,33 +425,21 @@ const auxiliaryButtonView = (
/>;
```
-
-
-
-
-***
-
-#### SendButtonView
-
-You can set a custom view in place of the already existing send button view.
+### sendButtonView
-Shown below is the default chat interface.
+Replace the send button with a custom view.
-The customized chat interface is displayed below.
-
-Use the following code to achieve the customization shown above.
-
-
-```tsx
+
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
@@ -589,11 +458,9 @@ const sendButtonView = (
-
-
-```css
+
+```css lines
.cometchat-message-composer
div:not([class])
.message-composer__send-button
@@ -608,34 +475,24 @@ const sendButtonView = (
background: #6852d6;
}
```
-
-
-***
-
-#### HeaderView
-
-You can set custom headerView to the MessageComposer component using the following method.
+### headerView
-Shown below is the default chat interface.
+Custom view above the composer input.
-The customized chat interface is displayed below.
-
-Use the following code to achieve the customization shown above.
-
-
-```tsx
+
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
@@ -653,11 +510,9 @@ const getHeaderView = () => {
-
-
-```css
+
+```css lines
.cometchat-message-composer .message-composer__header-view {
display: flex;
align-items: center;
@@ -698,20 +553,16 @@ const getHeaderView = () => {
mask-size: contain;
}
```
-
-
-***
-
-#### TextFormatters
+### 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)
+Custom text formatters for the composer input. To configure mentions, see [CometChatMentionsFormatter](/ui-kit/react/mentions-formatter-guide).
-```ts
+```ts lines
import { CometChatTextFormatter } from "@cometchat/chat-uikit-react";
import DialogHelper from "./Dialog";
import { CometChat } from "@cometchat/chat-sdk-javascript";
@@ -720,7 +571,7 @@ 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
+ private currentShortcut: string | null = null;
constructor() {
super();
@@ -746,7 +597,6 @@ class ShortcutFormatter extends CometChatTextFormatter {
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();
}
@@ -775,14 +625,13 @@ class ShortcutFormatter extends CometChatTextFormatter {
}
closeDialog() {
- this.dialogHelper.closeDialog(); // Use DialogHelper to close the dialog
+ this.dialogHelper.closeDialog();
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
);
@@ -821,11 +670,9 @@ class ShortcutFormatter extends CometChatTextFormatter {
export default ShortcutFormatter;
```
-
-
-```tsx
+```tsx lines
import React from "react";
import ReactDOM from "react-dom";
@@ -886,11 +733,9 @@ export default class DialogHelper {
}
}
```
-
-
-```tsx
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
@@ -914,9 +759,31 @@ export function MessageComposerDemo() {
) : null;
}
```
-
-
-***
+## Theme and Styling
+
+Using CSS, customize the look and feel of the component. The root CSS class is `.cometchat-message-composer`.
+
+
+
+
+
+```tsx lines
+
-The `MessageHeader` is comprised of the following components:
+
+
+| Field | Value |
+| --- | --- |
+| Purpose | Toolbar displaying user/group avatar, name, status, typing indicator, back button, and call controls for a single conversation |
+| Package | `@cometchat/chat-uikit-react` |
+| Import | `import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";` |
+| Used in experiences | Chat view header, message detail toolbar, conversation screen top bar |
+| Copy-paste base | See [Base Code](#base-code--stylesheet) below |
+| Primary output | Navigation callback (from `onBack`), item click (from `onItemClick`) |
+| Primary hook points | `onBack`, `onError`, `onItemClick`, `onSearchOptionClicked`, view slots (`itemView`, `titleView`, `subtitleView`, `leadingView`, `trailingView`, `auxiliaryButtonView`) |
+| CSS root class | `.cometchat-message-header` |
+| Real-time events | None emitted; internally listens for typing indicators and user presence |
-| 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
+## Base Code and Stylesheet
-### Integration
+Renders a toolbar with avatar, name, status, and typing indicator for a user or group conversation.
-```tsx
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
@@ -41,43 +47,105 @@ export function MessageHeaderDemo() {
) : null;
}
```
-
-
-```tsx
+```tsx lines
import { MessageHeaderDemo } from "./MessageHeaderDemo";
export default function App() {
return (
-
-### Actions
+Root CSS class for style overrides:
-[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.
+```css lines
+.cometchat-message-header {
+ /* overrides here */
+}
+```
-#### 1. OnBack
+## Functionality
-`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.
+Props that control component behavior, grouped by surface area.
-**Example**
+### Data
-In this example, we are employing the `onBack` action.
+| Property | Type | Default | Effect | Pitfall |
+| --- | --- | --- | --- | --- |
+| `user` | `CometChat.User` | `undefined` | Displays user details (avatar, name, status) in the header | Pass either `user` or `group`, not both |
+| `group` | `CometChat.Group` | `undefined` | Displays group details (icon, name, member count) in the header | Pass either `user` or `group`, not both |
-
-
-```tsx
+### UI Visibility Toggles
+
+| Property | Type | Default | Effect | Pitfall |
+| --- | --- | --- | --- | --- |
+| `showBackButton` | `boolean` | `false` | Shows the back navigation button | — |
+| `hideVideoCallButton` | `boolean` | `false` | Hides the video call button | — |
+| `hideVoiceCallButton` | `boolean` | `false` | Hides the voice call button | — |
+| `hideUserStatus` | `boolean` | `false` | Hides the user's online/offline status indicator | — |
+| `showConversationSummaryButton` | `boolean` | `false` | Shows the AI conversation summary button | Requires AI features to be enabled |
+| `showSearchOption` | `boolean` | `false` | Shows the search option in the header | — |
+
+### AI / Summary
+
+| Property | Type | Default | Effect | Pitfall |
+| --- | --- | --- | --- | --- |
+| `summaryGenerationMessageCount` | `number` | `1000` | Number of messages used for AI summary generation | Higher values may increase latency |
+| `enableAutoSummaryGeneration` | `boolean` | `false` | Enables automatic conversation summary generation | — |
+
+### Date Formatting
+
+| Property | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `lastActiveAtDateTimeFormat` | `CalendarObject` | See default below | Customizes the "last seen" timestamp format |
+
+Default `lastActiveAtDateTimeFormat`:
+
+```ruby lines
+new CalendarObject({
+ today: `[Last seen DD MMM at] hh:mm A`,
+ yesterday: `[Last seen DD MMM at] hh:mm A`,
+ otherDays: `[Last seen DD MMM at] hh:mm A`,
+ relativeTime: {
+ hour: `Last seen %d hour ago`,
+ minute: `Last seen %d minute ago`,
+ minutes: `Last seen %d minutes ago`,
+ },
+});
+```
+
+
+If a property is not passed in the CalendarObject, the component checks the [global configuration](/ui-kit/react/localize#customisation) first, then falls back to the component's default formatting.
+
+
+## Actions
+
+[Actions](/ui-kit/react/components-overview#actions) split into predefined (built-in triggers) and user-defined (callbacks).
+
+### Predefined Actions
+
+The component has no built-in navigation behavior. The back button fires `onBack` but does not navigate automatically.
+
+### User-Defined Actions
+
+#### onBack
+
+Fires when the back button is clicked. Requires `showBackButton={true}`.
+
+| Detail | Value |
+| --- | --- |
+| When it fires | User clicks the back button |
+| Payload type | `() => void` |
+| What devs typically do next | Navigate back to conversation list |
+
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
@@ -104,23 +172,17 @@ export function MessageHeaderDemo() {
}
```
-
-
-
-
-***
-
-#### 2. OnError
-
-This action doesn't change the behavior of the component but rather listens for any errors that occur in the Message Header component.
+#### onError
-**Example**
+Fires when the component encounters an error.
-In this example, we are employing the `onError` action.
+| Detail | Value |
+| --- | --- |
+| When it fires | Any internal error during rendering |
+| Payload type | `(error: CometChat.CometChatException) => void` |
+| What devs typically do next | Log to error tracking service |
-
-
-```tsx
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
@@ -146,19 +208,17 @@ export function MessageHeaderDemo() {
}
```
-
-
-
+#### onSearchOptionClicked
-***
+Fires when the search option is clicked. Requires `showSearchOption={true}`.
-##### 3. onSearchOptionClicked
+| Detail | Value |
+| --- | --- |
+| When it fires | User clicks the search option |
+| Payload type | `() => void` |
+| What devs typically do next | Open search UI, filter messages |
-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";
const handleSearchClick = () => {
@@ -168,138 +228,72 @@ const handleSearchClick = () => {
-
-
+#### onItemClick
-***
+Fires when the list item area (avatar + name) is clicked.
-#### 4. OnItemClick
+| Detail | Value |
+| --- | --- |
+| When it fires | User clicks the header list item |
+| Payload type | `() => void` |
+| What devs typically do next | Open user/group detail panel |
-`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";
+```tsx lines
+import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
const getOnItemClick = () => {
console.log("List item clicked");
};
-
-
-
-
-***
-
-### 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.
-
-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**
-
-
- 
-
-
-
-
-```ts
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
-
-// 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";
-}
+
-
-
+## Filters
-### Functionality
+The MessageHeader component does not have any exposed filters. It displays details for a single user or group and does not fetch paginated lists.
-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.
+## Events
-Here is a code snippet demonstrating how you can customize the functionality of the Message Header component.
+### UI Events
-
-
-```ts
-import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
+The MessageHeader component does not emit any custom UI events.
-
+The component internally listens to SDK events for real-time updates. No manual attachment needed.
-
+| SDK Listener | What it does inside the component |
+| --- | --- |
+| `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 |
-Following is a list of customizations along with their corresponding code snippets:
+## Advanced: Custom View Slots
-| 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}` |
+Customization override points for the message header UI.
-### Advanced
+### Slot Catalog
-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 | Params | What it replaces | Section |
+| --- | --- | --- | --- |
+| `itemView` | `JSX.Element` | Entire list item (avatar + name + subtitle) | Whole item |
+| `leadingView` | `JSX.Element` | Avatar / left section | Sub-section (leading) |
+| `trailingView` | `JSX.Element` | Right section (call buttons area) | Sub-section (trailing) |
+| `titleView` | `JSX.Element` | Name / title text | Sub-section (title) |
+| `subtitleView` | `JSX.Element` | Subtitle text (status / typing indicator) | Sub-section (subtitle) |
+| `auxiliaryButtonView` | `JSX.Element` | Auxiliary button area (next to call buttons) | Sub-section (auxiliary) |
-#### 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
+```ts lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
@@ -307,7 +301,6 @@ import {
CometChatListItem,
} from "@cometchat/chat-uikit-react";
-// 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
+```ts lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
-// Custom title view component
function CustomTitleView() {
return (
-
- {group.getName()}
- JOIN
-
- {group.getMembersCount()} Members • {group.getDescription()}
-
+const getItemView = (group: CometChat.Group) => {
+ return (
+
+
+ );
};
-export default GroupsDemo;
+
+
- );
- };
-
- return {group.getName()}
+ JOIN
+ {group.getMembersCount()} Members • {group.getDescription()}
+
+
-Use the following code to achieve the customization shown above.
-
+ return (
+
+ {group.getType()}
+
+
+ );
+};
-
{group.getName()}
- ![]({"ICON_HERE"}/)
{group.getType()}
-
;
-}
+
+
-The customized chat interface is displayed below.
+Customized:
-Use the following code to achieve the customization shown above.
-
- {group.getMembersCount()} Members • {group.getDescription()}
-
- );
- };
-
- return
- {group.getMembersCount()} Members • {group.getDescription()}
-
- );
- };
+const getSubtitleView = (group: CometChat.Group): JSX.Element => {
+ if (!(group instanceof CometChat.Group)) {
+ return <>;
+ }
- return
+ {group.getMembersCount()} Members • {group.getDescription()}
+
+ );
};
-export default GroupsDemo;
+
-Use the following code to achieve the customization shown above.
-
-
:
-
};
- }
+const customLeadingView = (group: CometChat.Group) => {
+ return (
+ <>
+ {group.getHasJoined() ? (
+
+
+ ) : (
+
+
+ )}
+
+ );
+};
-
-Use the following code to achieve the customization shown above.
-
- {group.getHasJoined() ? "JOINED" : "+ JOIN"}
-
-}
+import { CometChatGroups } from "@cometchat/chat-uikit-react";
-
+ {group.getHasJoined() ? "JOINED" : "+ JOIN"}
+
+ );
+};
+
-Use the following code to achieve the customization shown above.
-
-Use the following code to achieve the customization shown above.
-
+
+
+```tsx lines
+
-The `Incoming Call` is comprised of the following base components:
+
-
);
}
```
-
-
+
-
-
-
-Use the following code to achieve the customization shown above.
-
-
- )
- };
-
- return
-
- )
- };
+ return (
+
+
+ );
+ };
return
-Use the following code to achieve the customization shown above.
-
- {call?.getCallInitiator()?.getName()}
-
- )
- };
-
- return
-
- {call.getCallInitiator()?.getRole()}
-
-
- {call?.getCallInitiator()?.getName()}
-
- )
- };
+ return (
+
-
- {call.getCallInitiator()?.getRole()}
-
-
+ {call?.getCallInitiator()?.getName()}
+
+ );
+ };
return
+
+ {call.getCallInitiator()?.getRole()}
+
+
-Use the following code to achieve the customization shown above.
-
-
- {call.getCallInitiator()?.getRole()}
-
- )
- };
-
- return
-
- {call.getCallInitiator()?.getRole()}
-
- )
- };
+ return (
+
+
+ {call.getCallInitiator()?.getRole()}
+
+ );
+ };
return
-Use the following code to achieve the customization shown above.
-
-
- )
- };
-
- return
-
-
- {call?.getCallInitiator()?.getName()}
-
-
- {"Incoming " + call.getType() + " call"}
-
-
-
- )
- };
+ return (
+
-
-
- {call?.getCallInitiator()?.getName()}
-
-
- {"Incoming " + call.getType() + " call"}
-
-
+
+ );
+ };
return
+
+
+ {call?.getCallInitiator()?.getName()}
+
+
+ {"Incoming " + call.getType() + " call"}
+
+
+
+
+```tsx lines
+
-## Usage
+
-
);
}
```
-
-
+
- {/* For user chat with custom users mentions */}
-
- ) : null;
-}
-```
-
-
-
-
-
-The customized chat interface is displayed below.
+or
-Use the following code to achieve the customization shown above.
-
-The customized chat interface is displayed below.
-
-Use the following code to achieve the customization shown above.
-
-
-The customized chat interface is displayed below.
-
-Use the following code to achieve the customization shown above.
-
-The customized chat interface is displayed below.
-
-Use the following code to achieve the customization shown above.
-
+
+
+```tsx lines
+
-The `MessageHeader` is comprised of the following components:
+
-
);
}
```
-
-
+
-
-
-
-Use the following code to achieve the customization shown above.
-
-Use the following code to achieve the customization shown above.
-
@@ -374,57 +358,43 @@ function CustomTitleView() {
-```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 {
+.cometchat-message-header .message-header__title-view .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 {
+
+.cometchat-message-header .message-header__title-view .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
+```ts lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
-// Custom subtitle view component
function CustomSubtitleView() {
return <>{group?.getMembersCount() + " • " + group?.getDescription()};
}
@@ -432,25 +402,17 @@ function CustomSubtitleView() {
-
-
-
-***
+### 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
+```ts lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
@@ -458,7 +420,6 @@ import {
CometChatAvatar,
} from "@cometchat/chat-uikit-react";
-// Custom title view component
function CustomLeadingView() {
return (
-Use the following code to achieve the customization shown above.
-
-
-Use the following code to achieve the customization shown above.
-
@@ -472,19 +433,11 @@ function CustomLeadingView() {
-```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 .cometchat-list-item .message-header__leading-view .cometchat-avatar__image,
+.cometchat-message-header .cometchat-list-item .message-header__leading-view .cometchat-avatar {
border-radius: 8px;
height: 48px;
width: 48px;
@@ -503,30 +456,25 @@ 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
+```ts lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
@@ -534,7 +482,6 @@ import {
CometChatButton,
} from "@cometchat/chat-uikit-react";
-// Custom trailing view component
function CustomTrailingButtonView() {
return (
<>
@@ -542,7 +489,7 @@ function CustomTrailingButtonView() {
onClick={() => {
// Your logic here
}}
- iconURL={icon} // Ensure `icon` is defined or passed as a prop
+ iconURL={icon}
/>
);
@@ -553,46 +500,34 @@ function CustomTrailingButtonView() {
trailingView={CustomTrailingButtonView()}
/>;
```
-
-
-
-```css
-.cometchat-message-header
- .cometchat-list-item__trailing-view
- .cometchat-button {
+
+```css lines
+.cometchat-message-header .cometchat-list-item__trailing-view .cometchat-button {
background: transparent;
height: 24px;
width: 24px;
padding: 0;
}
-.cometchat-message-header
- .cometchat-list-item__trailing-view
- .cometchat-button__icon {
+.cometchat-message-header .cometchat-list-item__trailing-view .cometchat-button__icon {
background: black;
}
```
-
-
-***
-
-#### AuxiliaryButtonView
+### auxiliaryButtonView
-The customized chat interface is displayed below.
+Replace the auxiliary button area (next to call buttons).
-Use the following code to achieve the customization shown above.
-
-```ts
+```ts lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
@@ -600,7 +535,6 @@ import {
CometChatButton,
} from "@cometchat/chat-uikit-react";
-// Custom auxiliary view component
function CustomAuxiliaryButtonView() {
return (
<>
@@ -608,7 +542,7 @@ function CustomAuxiliaryButtonView() {
onClick={() => {
// Your logic here
}}
- iconURL={icon} // Ensure `icon` is defined or passed as a prop
+ iconURL={icon}
/>
);
@@ -619,87 +553,70 @@ function CustomAuxiliaryButtonView() {
auxiliaryButtonView={CustomAuxiliaryButtonView()}
/>;
```
-
-
-
-```css
-.cometchat-message-header
- .cometchat-message-header__auxiliary-view
- .cometchat-button {
+
+```css lines
+.cometchat-message-header .cometchat-message-header__auxiliary-view .cometchat-button {
background: transparent;
height: 24px;
width: 24px;
padding: 0;
}
-.cometchat-message-header
- .cometchat-message-header__auxiliary-view
- .cometchat-button__icon {
+.cometchat-message-header .cometchat-message-header__auxiliary-view .cometchat-button__icon {
background: black;
}
```
-
-
-#### LastActiveAt Date Time Format
-
-The `lastActiveAtDateTimeFormat` property allows you to customize the **last active** timestamp displayed in the message header.
-
-Default Date Time Format:
-
-```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"
- },
-});
-```
+### lastActiveAtDateTimeFormat
-The following example demonstrates how to modify the **last active** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject).
+Customize the "last seen" timestamp format using a `CalendarObject`.
-
-
-```ts
+```ts lines
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"
+ today: `hh:mm A`,
+ yesterday: `[yesterday]`,
+ otherDays: `DD MM YYYY`,
});
return dateFormat;
}
-// Apply the custom format to the CometChatMessageHeader component
-
-
-
+If a property is not passed in the CalendarObject, the component checks the [global configuration](/ui-kit/react/localize#customisation) first, then falls back to the component's default formatting.
+
-**Fallback Mechanism**
+## Theme and Styling
-* 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**.
+Using CSS, customize the look and feel of the component. The root CSS class is `.cometchat-message-header`.
-
+
+
+
-***
+```tsx lines
+
-***
+
-## Usage
+| Field | Value |
+| --- | --- |
+| Purpose | Scrollable list of sent and received messages with text, media, reactions, read receipts, threaded replies, date separators, and AI features |
+| Package | `@cometchat/chat-uikit-react` |
+| Import | `import { CometChatMessageList } from "@cometchat/chat-uikit-react";` |
+| Used in experiences | Chat view, threaded conversations, message detail panel |
+| Copy-paste base | See [Base Code](#base-code--stylesheet) below |
+| Primary output | Message interactions (thread replies, reactions, edits, deletes) |
+| Primary hook points | `onThreadRepliesClick`, `onError`, `onReactionClick`, `onReactionListItemClick`, `messagesRequestBuilder`, `templates`, view slots (`headerView`, `footerView`) |
+| CSS root class | `.cometchat-message-list` |
+| Real-time events | `CometChatMessageEvents.ccMessageEdited`, `CometChatMessageEvents.ccMessageDeleted`, `CometChatMessageEvents.ccMessageRead`, `CometChatMessageEvents.ccReplyToMessage` |
-### Integration
+
-The following code snippet illustrates how you can directly incorporate the MessageList component into your Application.
+## Base Code and Stylesheet
+
+Renders a scrollable list of messages for a user or group conversation.
-```tsx
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageList } from "@cometchat/chat-uikit-react";
@@ -40,85 +49,145 @@ export function MessageListDemo() {
) : null;
}
```
-
-
-```tsx
+```tsx lines
import { MessageListDemo } from "./MessageListDemo";
export default function App() {
return (
-
-
+Root CSS class for style overrides:
+
+```css lines
+.cometchat-message-list {
+ /* overrides here */
+}
+```
+
+## Functionality
+
+Props that control component behavior, grouped by surface area.
+
+### Data
+
+| Property | Type | Default | Effect | Pitfall |
+| --- | --- | --- | --- | --- |
+| `user` | `CometChat.User` | `undefined` | Displays messages for a 1-on-1 conversation | Pass either `user` or `group`, not both |
+| `group` | `CometChat.Group` | `undefined` | Displays messages for a group conversation | Pass either `user` or `group`, not both |
+| `messagesRequestBuilder` | `CometChat.MessagesRequestBuilder` | SDK default | Controls which messages load and in what order | UID/GUID are always overridden internally |
+| `reactionsRequestBuilder` | `CometChat.ReactionsRequestBuilder` | SDK default | Controls how reactions are fetched for messages | — |
+| `parentMessageId` | `number` | `undefined` | Displays threaded conversation for the specified parent message | — |
+| `templates` | `CometChatMessageTemplate[]` | SDK defaults | Custom message bubble templates | Template `type`/`category` must match the message |
+| `goToMessageId` | `string` | `undefined` | Scrolls to the specified message on initial load | — |
+
+### UI Visibility Toggles
+
+| Property | Type | Default | Effect | Pitfall |
+| --- | --- | --- | --- | --- |
+| `hideDateSeparator` | `boolean` | `false` | Hides date separator between message groups | — |
+| `hideStickyDate` | `boolean` | `false` | Hides the sticky date header | — |
+| `hideReceipts` | `boolean` | `false` | Hides read/delivery receipts | — |
+| `hideError` | `boolean` | `false` | Hides the default and custom error views | Also suppresses `errorView` if set |
+| `hideReplyInThreadOption` | `boolean` | `false` | Hides the "Reply in Thread" option | — |
+| `hideTranslateMessageOption` | `boolean` | `false` | Hides the translate message option | — |
+| `hideEditMessageOption` | `boolean` | `false` | Hides the edit message option | — |
+| `hideDeleteMessageOption` | `boolean` | `false` | Hides the delete message option | — |
+| `hideReactionOption` | `boolean` | `false` | Hides the reaction option | — |
+| `hideMessagePrivatelyOption` | `boolean` | `false` | Hides the "Message Privately" option | — |
+| `hideCopyMessageOption` | `boolean` | `false` | Hides the copy message option | — |
+| `hideMessageInfoOption` | `boolean` | `false` | Hides the message info option | — |
+| `hideReplyOption` | `boolean` | `false` | Hides the reply option | — |
+| `hideAvatar` | `boolean` | `false` | Hides avatars on messages | — |
+| `hideGroupActionMessages` | `boolean` | `false` | Hides group action messages (join, leave, etc.) | — |
+| `showConversationStarters` | `boolean` | `false` | Shows AI conversation starters | — |
+| `showSmartReplies` | `boolean` | `false` | Shows AI smart replies | — |
+| `hideModerationView` | `boolean` | `false` | Hides the moderation view below moderated messages | — |
+| `hideFlagMessageOption` | `boolean` | `false` | Hides the "Report Message" option | — |
+| `hideFlagRemarkField` | `boolean` | `false` | Hides the remark text area in the flag message dialog | — |
+
+### Behavior
+
+| Property | Type | Default | Effect | Pitfall |
+| --- | --- | --- | --- | --- |
+| `messageAlignment` | `MessageListAlignment` | `MessageListAlignment.standard` | Controls message alignment (left, right, standard) | — |
+| `scrollToBottomOnNewMessages` | `boolean` | `false` | Auto-scrolls to bottom when new messages arrive | — |
+| `quickOptionsCount` | `number` | `2` | Number of message options visible in the main menu | — |
+| `disableSoundForMessages` | `boolean` | `false` | Disables the sound effect for new messages | — |
+| `customSoundForMessages` | `string` | `undefined` | Custom sound file URL for new messages | — |
+| `startFromUnreadMessages` | `boolean` | `false` | Loads from the first unread message if available | Falls back to latest messages if no unreads |
+| `showMarkAsUnreadOption` | `boolean` | `false` | Shows "Mark Unread" option in message actions | Only appears for received messages |
+| `isAgentChat` | `boolean` | `false` | Toggles AI Agent functionality for the message list | — |
+| `loadLastAgentConversation` | `boolean` | `false` | Loads the most recent existing agent conversation on mount | — |
+
+### AI / Smart Replies
+
+| Property | Type | Default | Effect | Pitfall |
+| --- | --- | --- | --- | --- |
+| `smartRepliesKeywords` | `string[]` | `undefined` | Keywords that trigger smart replies | — |
+| `smartRepliesDelayDuration` | `number` | `undefined` | Delay (ms) before smart replies appear | — |
+
+### Date Formatting
+
+| Property | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `separatorDateTimeFormat` | `CalendarObject` | `today/yesterday/DD MMM, YYYY` | Customizes date separator timestamps |
+| `stickyDateTimeFormat` | `CalendarObject` | `today/yesterday/DD MMM, YYYY` | Customizes sticky date header timestamps |
+| `messageSentAtDateTimeFormat` | `CalendarObject` | `hh:mm A` | Customizes message sent-at timestamps |
+| `messageInfoDateTimeFormat` | `CalendarObject` | `DD MMM, hh:mm A` | Customizes message info timestamps |
-To fetch messages for a specific entity, you need to supplement it with `User` or `Group` Object.
+
+If a property is not passed in the CalendarObject, the component checks the [global configuration](/ui-kit/react/localize#customisation) first, then falls back to the component's default formatting.
+
-
+### Custom Views (Render Props)
-***
+These replace sections of the default UI. See [Custom View Slots](#custom-view-slots) for full examples.
-### Actions
+| Property | Type | Effect |
+| --- | --- | --- |
+| `headerView` | `JSX.Element` | Shown above the message list |
+| `footerView` | `JSX.Element` | Shown below the message list |
+| `loadingView` | `JSX.Element` | Shown while messages are loading |
+| `emptyView` | `JSX.Element` | Shown when there are no messages |
+| `errorView` | `JSX.Element` | Shown when an error occurs |
+| `textFormatters` | `CometChatTextFormatter[]` | Custom text formatters for message content |
-[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.
+## Actions
-##### 1. onThreadRepliesClick
+[Actions](/ui-kit/react/components-overview#actions) split into predefined (built-in triggers) and user-defined (callbacks).
-`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.
+### Predefined Actions
-
-
-```ts
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageList } from "@cometchat/chat-uikit-react";
+The component handles message rendering, scrolling, and real-time updates internally. Thread replies, reactions, edits, and deletes are built-in.
-export function MessageListDemo() {
- const [chatUser, setChatUser] = React.useState();
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
+### User-Defined Actions
- const getOnThreadRepliesClick = () => {
- //your custom actions
- };
+#### onThreadRepliesClick
- return chatUser ? (
-
+| Detail | Value |
+| --- | --- |
+| When it fires | User clicks on a threaded message reply count |
+| Payload type | `(message: CometChat.BaseMessage, view: () => void) => void` |
+| What devs typically do next | Open thread panel, navigate to thread view |
-
-```js
+```tsx lines
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);
-
+ const [chatUser, setChatUser] = React.useState();
React.useEffect(() => {
CometChat.getUser("uid").then((user) => {
setChatUser(user);
@@ -140,17 +209,17 @@ export function MessageListDemo() {
}
```
-
-
-
+#### onError
-##### 2. onError
+Fires when the component encounters an error.
-This action doesn't change the behavior of the component but rather listens for any errors that occur in the MessageList component.
+| Detail | Value |
+| --- | --- |
+| When it fires | Any internal error during data fetching or rendering |
+| Payload type | `(error: CometChat.CometChatException) => void` |
+| What devs typically do next | Log to error tracking service |
-
-
-```ts
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageList } from "@cometchat/chat-uikit-react";
@@ -175,46 +244,17 @@ export function MessageListDemo() {
}
```
-
-
-
-```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 handleError = (error) => {
- throw new Error("your custom error action");
- };
-
- return chatUser ? (
-
-
-
+#### onReactionClick
-##### 3. onReactionClick
+Fires when a reaction item on a message bubble is clicked.
-`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.
+| Detail | Value |
+| --- | --- |
+| When it fires | User clicks a reaction on a message |
+| Payload type | `(reaction: CometChat.ReactionCount, message: CometChat.BaseMessage) => void` |
+| What devs typically do next | Toggle reaction, show reaction details |
-
-
-```ts
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageList } from "@cometchat/chat-uikit-react";
@@ -242,46 +282,17 @@ export function MessageListDemo() {
}
```
-
-
-
-```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
- };
-
- return chatUser ? (
-
-
-
+#### onReactionListItemClick
-##### 4. onReactionListItemClick
+Fires when a reaction list item is clicked (in the reaction detail view).
-`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.
+| Detail | Value |
+| --- | --- |
+| When it fires | User clicks a specific reaction in the reaction list |
+| Payload type | `(reaction: CometChat.Reaction, message: CometChat.BaseMessage) => void` |
+| What devs typically do next | Show who reacted, navigate to user profile |
-
-
-```ts
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageList } from "@cometchat/chat-uikit-react";
@@ -312,128 +323,19 @@ export function MessageListDemo() {
}
```
-
-
-
-```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 onReactionListItemClick = (reaction, message) => {
- //your custom action
- };
-
- return chatUser ? (
-
-
-
-
-### Filters
-
-##### 1. Messages Request Builder
-
-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).
-
-In the example below, we are applying a filter to the messages based on a search substring and for a specific user. This means that only messages that contain the search term and are associated with the specified user will be displayed
-
-
-
-```ts
-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();
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
-
- return chatUser ? (
-
-
-
-```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);
- });
- }, []);
-
- return chatUser ? (
-
+Control which messages appear using `MessagesRequestBuilder`. Pass the builder to the `messagesRequestBuilder` prop.
-
+Refer to [MessagesRequestBuilder](/sdk/javascript/additional-message-filtering) for the full API.
-
-The following parameters in messageRequestBuilder will always be altered inside the message list
-
-1. UID
-2. GUID
-
+The `UID` and `GUID` parameters in `messagesRequestBuilder` are always overridden internally by the component based on the `user` or `group` prop.
-##### 2. Reactions Request Builder
-
-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.
+### Messages Request Builder
-
-
-```ts
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageList } from "@cometchat/chat-uikit-react";
@@ -450,7 +352,7 @@ export function MessageListDemo() {
-```js
+```tsx lines
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);
-
+ const [chatUser, setChatUser] = React.useState();
React.useEffect(() => {
CometChat.getUser("uid").then((user) => {
setChatUser(user);
@@ -489,61 +389,24 @@ export function MessageListDemo() {
}
```
-
-
-
-
-### 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 Message List component is as follows.
-
-| 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
-
-
-
-```ts
-import { CometChatMessageEvents, CometChatUIEvents } from "@cometchat/chat-uikit-react";
-
-const ccOpenChat = CometChatUIEvents.ccOpenChat.subscribe(() => {
- // Your Code
-});
-
-const ccMessageEdited = CometChatMessageEvents.ccMessageEdited.subscribe(() => {
- // Your Code
-});
-
-const ccReplyToMessage = CometChatMessageEvents.ccReplyToMessage.subscribe(() => {
- // Your Code
-});
+## Events
-const ccMessageDeleted = CometChatMessageEvents.ccMessageDeleted.subscribe(() => {
- // Your Code
-});
+### UI Events
-const ccActiveChatChanged = CometChatUIEvents.ccActiveChatChanged.subscribe(() => {
- // Your Code
-});
+Events emitted by the MessageList component:
-const ccMessageRead = CometChatMessageEvents.ccMessageRead.subscribe(() => {
- // Your Code
-});
-```
+| Event | Source | When it fires |
+| --- | --- | --- |
+| `ccOpenChat` | `CometChatUIEvents` | User opens a user or group chat |
+| `ccMessageEdited` | `CometChatMessageEvents` | A message is edited (inProgress, success, error) |
+| `ccReplyToMessage` | `CometChatMessageEvents` | User replies to a message |
+| `ccMessageDeleted` | `CometChatMessageEvents` | A message is deleted |
+| `ccActiveChatChanged` | `CometChatUIEvents` | User navigates to a different chat |
+| `ccMessageRead` | `CometChatMessageEvents` | A message is read |
-
+#### Subscribe
-
-```js
+```tsx lines
import { CometChatMessageEvents, CometChatUIEvents } from "@cometchat/chat-uikit-react";
const ccOpenChat = CometChatUIEvents.ccOpenChat.subscribe(() => {
@@ -571,198 +434,42 @@ const ccMessageRead = CometChatMessageEvents.ccMessageRead.subscribe(() => {
});
```
-
-
-
-
-***
-
-Removing `CometChatMessageEvents` Listener's
-
-
-
-```ts
-ccMessageEdited?.unsubscribe();
-ccReplyToMessage?.unsubscribe();
-ccActiveChatChanged?.unsubscribe();
-```
+#### Unsubscribe
-
-
-
-```js
+```tsx lines
+ccOpenChat?.unsubscribe();
ccMessageEdited?.unsubscribe();
ccReplyToMessage?.unsubscribe();
+ccMessageDeleted?.unsubscribe();
ccActiveChatChanged?.unsubscribe();
+ccMessageRead?.unsubscribe();
```
-
+### SDK Events (Real-Time)
-
+The component automatically listens to SDK message events internally for real-time updates. No manual attachment needed unless additional side effects are required.
-***
+## Advanced: Custom View Slots
-## Customization
+Customization override points for the message list UI.
-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.
+### Slot Catalog
-### Style
+| Slot | Params | What it replaces | Section |
+| --- | --- | --- | --- |
+| `headerView` | `JSX.Element` | Area above the message list | Whole section |
+| `footerView` | `JSX.Element` | Area below the message list | Whole section |
+| `loadingView` | `JSX.Element` | Loading spinner | Empty/loading/error |
+| `emptyView` | `JSX.Element` | Empty state | Empty/loading/error |
+| `errorView` | `JSX.Element` | Error state | Empty/loading/error |
+| `templates` | `CometChatMessageTemplate[]` | Message bubble rendering | Whole item |
+| `textFormatters` | `CometChatTextFormatter[]` | Text formatting in messages | Text content |
-You can set the css to the MessageList Component Component to customize the styling.
+### templates
-**Example**
+[CometChatMessageTemplate](/ui-kit/react/message-template) is a pre-defined structure for creating message views (message bubbles). Refer to [CometChatMessageTemplate](/ui-kit/react/message-template) for details.
-
- 
-
-
-
-
-```ts
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageList } from "@cometchat/chat-uikit-react";
-
-
-
-
-```css
-.cometchat-message-bubble__body
- .cometchat-text-bubble.cometchat-text-bubble-incoming
- .cometchat-text-bubble__body-text {
- font-family: "SF Pro";
-}
-```
-
-
-
-
-
-### 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.
-
-
-
-```ts
-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();
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
-
- return chatUser ? (
-
-
-
-```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);
- });
- }, []);
-
- return chatUser ? (
-
-
-
-
-***
-
-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
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
@@ -820,300 +527,17 @@ export function MessageListDemo() {
}
```
-
+### headerView
-
-```js
-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(null);
-
- 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;
- };
-
- const getTemplates = () => {
- let templates = ChatConfigurator.getDataSource().getAllMessageTemplates();
- templates.map((data) => {
- data.options = (loggedInUser, message, group) =>
- getCustomOptions(loggedInUser, message, group);
- });
- return templates;
- };
-
- return chatUser ? (
-
-
-
-
-***
-
-#### Separator DateTime Format
-
-The `separatorDateTimeFormat` property allows you to customize the **Date Separator** timestamp displayed in the Message List.
-
-Default Date Time Format:
-
-```javascript
-new CalendarObject({
- today: "today" // Example: "today"
- yesterday: "yesterday", // Example: "yesterday"
- otherDays: `DD MMM, YYYY`, // Example: "25 Jan, 2025"
-});
-```
-
-The following example demonstrates how to modify the **Date Separator** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject).
-
-
-
-```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;
-}
-
-// Apply the custom format to the CometChatMessageList 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**.
-
-
-
-***
-
-#### Sticky DateTime Format
-
-The `stickyDateTimeFormat` property allows you to customize the **Sticky Date** timestamp displayed in the Message List.
-
-!\[]\(Screenshot HERE)
-
-Default Date Time Format:
-
-```javascript
-new CalendarObject({
- today: "today" // Example: "today"
- yesterday: "yesterday", // Example: "yesterday"
- otherDays: `DD MMM, YYYY`, // Example: "25 Jan, 2025"
-});
-```
-
-The following example demonstrates how to modify the **Sticky Date** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject).
-
-
-
-```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;
-}
-
-// Apply the custom format to the CometChatMessageList 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**.
-
-
-
-***
-
-#### Message SentAt DateTime Format
-
-The `messageSentAtDateTimeFormat` property allows you to customize the **Message SentAt** timestamp displayed in the Message List.
-
-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"
-});
-```
-
-The following example demonstrates how to modify the **Message SentAt** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject).
-
-
-
-```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;
-}
-
-// Apply the custom format to the CometChatMessageList 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**.
-
-
-
-***
-
-#### Message Info DateTime Format
-
-The `messageInfoDateTimeFormat` property allows you to customize the **Message Info** timestamp displayed in the Message List.
-
-Default Date Time Format:
-
-```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"
-});
-```
-
-The following example demonstrates how to modify the **Message Info** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject).
-
-
-
-```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;
-}
-
-// Apply the custom format to the CometChatMessageList 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**.
-
-
-
-***
-
-#### Headerview
-
-You can set custom headerView to the Message List component using the following method.
-
-The customized chat interface is displayed below.
+Custom view above the message list.
-Use the following code to achieve the customization shown above.
-
-```ts
+```ts lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageList } from "@cometchat/chat-uikit-react";
@@ -1147,49 +571,9 @@ export function MessageListDemo() {
) : null;
}
```
-
-
-
-```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);
-
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
-
- const getHeaderView = () => {
- return (
-
-
-
-```css
+
+```css lines
.header-view {
display: flex;
width: 100%;
@@ -1223,28 +607,20 @@ export function MessageListDemo() {
align-items: center;
}
```
-
-
-***
-
-#### FooterView
-
-You can set custom footerview to the Message List component using the following method.
+### footerView
-The customized chat interface is displayed below.
+Custom view below the message list.
-Use the following code to achieve the customization shown above.
-
-```ts
+```ts lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageList } from "@cometchat/chat-uikit-react";
@@ -1280,51 +656,9 @@ export function MessageListDemo() {
) : null;
}
```
-
-
-
-
-```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);
-
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
-
- const getFooterView = () => {
- return (
-
-
-
-```css
+
+```css lines
.footer-view {
display: flex;
width: 100%;
@@ -1358,202 +692,105 @@ export function MessageListDemo() {
align-items: center;
}
```
-
-
-***
-
-#### TextFormatters
+### Date Time Format Customization
-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";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-
-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);
- }
- }
- }
+#### separatorDateTimeFormat
- 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,
- };
- }
+```ts lines
+import {
+ CometChatMessageList,
+ CalendarObject,
+} from "@cometchat/chat-uikit-react";
- openDialog(buttonText: string, shortcut: string) {
- this.dialogHelper.createDialog(
- () => this.handleButtonClick(buttonText),
- buttonText
- );
- this.dialogIsOpen = true;
- this.currentShortcut = shortcut;
- }
+function getDateFormat() {
+ const dateFormat = new CalendarObject({
+ today: `hh:mm A`,
+ yesterday: `[yesterday]`,
+ otherDays: `DD/MM/YYYY`,
+ });
+ return dateFormat;
+}
- closeDialog() {
- this.dialogHelper.closeDialog(); // Use DialogHelper to close the dialog
- this.dialogIsOpen = false;
- this.currentShortcut = null;
- }
+
+#### messageSentAtDateTimeFormat
-
-```tsx
-import React from "react";
-import ReactDOM from "react-dom";
+```ts lines
+import {
+ CometChatMessageList,
+ CalendarObject,
+} from "@cometchat/chat-uikit-react";
-interface DialogProps {
- onClick: () => void;
- buttonText: string;
+function getDateFormat() {
+ const dateFormat = new CalendarObject({
+ today: `hh:mm A`,
+ yesterday: `[yesterday]`,
+ otherDays: `DD/MM/YYYY`,
+ });
+ return dateFormat;
}
-const Dialog: React.FC = ({ onClick, buttonText }) => {
- console.log("buttonText", buttonText);
-
- return (
-
+### textFormatters
-
-```tsx
+Custom text formatters for message content. To configure mentions, see [CometChatMentionsFormatter](/ui-kit/react/mentions-formatter-guide).
+
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageList } from "@cometchat/chat-uikit-react";
@@ -1578,8 +815,22 @@ export function MessageListDemo() {
}
```
-
+## Theme and Styling
-
+Using CSS, customize the look and feel of the component. The root CSS class is `.cometchat-message-list`.
+
+
+
+
+
+```tsx lines
+
-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.
+| Field | Value |
+| --- | --- |
+| Purpose | Data structure defining how message bubbles render in the message list — controls header, content, footer, bottom, status info, reply, and bubble views per message type/category |
+| Package | `@cometchat/chat-uikit-react` |
+| Import | `import { CometChatMessageTemplate } from "@cometchat/chat-uikit-react";` |
+| Used in experiences | Passed to `CometChatMessageList` via the `templates` prop |
+| Copy-paste base | See [Base Code](#base-code--stylesheet) below |
+| Primary output | Custom message bubble rendering |
+| Primary hook points | `headerView`, `contentView`, `footerView`, `bottomView`, `bubbleView`, `statusInfoView`, `replyView`, `options` |
+| CSS root class | N/A (renders inside `.cometchat-message-bubble`) |
+| Real-time events | None (rendering blueprint only) |
-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.
+## Base Code and Stylesheet
-4. **Content view**: This is the core of the Message Bubble where the message content (text, images, videos, etc.) is displayed.
+MessageTemplate is a data structure, not a standalone rendered component. It defines how message bubbles appear inside `CometChatMessageList`.
-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.
+### Structure
-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.
+The message bubble structure breaks down into these views:
-***
+1. **Leading view** — Sender's avatar
+2. **Header view** — Sender's name (useful in group chats)
+3. **Reply view** — Preview of the replied message
+4. **Content view** — Core message content (text, images, videos, etc.)
+5. **Bottom view** — Link previews or "load more" button for long messages
+6. **Thread view** — Thread reply icon and reply counts
+7. **Footer view** — Reactions display
+8. **Status Info view** — Timestamp and delivery/read status
### 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**
-
- 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.
-
-8. **statusInfoView**
-
- The `statusInfoView` method allows you to assign a custom status info view to the Message Bubble. By default, it displays the receipt and timestamp.
-
-9. **replyView**
-
- 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.
-
-10. **options**
-
- 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.
-
-***
-
-## 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/react/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.
-
-```javascript
-let definedTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates();
-```
-
-### Existing Templates
-
-You will need to first get the MessageTemplate object for the type of message you want to customize. You will be customizing the text message bubble here. The code snippet to get the Text MessageTemplate is as follows.
-
-
-
-```ts
+| Property | Type | Description |
+| --- | --- | --- |
+| `type` | `string` | Maps the template to a CometChat message type |
+| `category` | `string` | Maps the template to a CometChat message category |
+| `headerView` | `(message: CometChat.BaseMessage) => JSX.Element` | Custom header (default: sender name) |
+| `contentView` | `(message: CometChat.BaseMessage) => JSX.Element` | Custom content (default: text/image/video/audio/file bubble) |
+| `footerView` | `(message: CometChat.BaseMessage) => JSX.Element` | Custom footer (default: reactions) |
+| `bottomView` | `(message: CometChat.BaseMessage) => JSX.Element` | Custom bottom section (default: link previews) |
+| `bubbleView` | `(message: CometChat.BaseMessage, alignment: MessageBubbleAlignment) => JSX.Element` | Replaces the entire bubble |
+| `statusInfoView` | `(message: CometChat.BaseMessage) => JSX.Element` | Custom status info (default: receipt + timestamp) |
+| `replyView` | `(message: CometChat.BaseMessage) => JSX.Element` | Custom reply preview |
+| `options` | `(loggedInUser: CometChat.User, message: CometChat.BaseMessage, group?: CometChat.Group) => CometChatActionsIcon[]` | Custom action sheet options |
+
+### Fetching Existing Templates
+
+```ts lines
import {
CometChatUIKit,
CometChatUIKitConstants,
@@ -111,62 +72,57 @@ for (let i = 0; i < allTemplates.length; i++) {
}
```
-
+### Passing Templates to MessageList
-
-```js
-import {
- CometChatUIKit,
- CometChatUIKitConstants,
-} from "@cometchat/chat-uikit-react";
+```ts lines
+import { CometChatMessageList } 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]
- }
-}
+
+## Functionality
-
+MessageTemplate is a configuration object, not a rendered component. It does not accept props directly — instead, its properties are set when constructing or modifying template instances. See the [Properties](#properties) table above for the full API.
-You will be using [Message List](/ui-kit/react/message-list) component using the `templates` prop of `CometChatMessageList` component.
+## Actions
-
-
-```ts
-import { CometChatMessageList } from "@cometchat/uikit-react";
+MessageTemplate does not expose callback props. Message interactions (thread replies, reactions, edits, deletes) are handled by the [Message List](/ui-kit/react/message-list) component. The `options` property controls the action sheet items for long-press on a message bubble.
-
+MessageTemplate does not have filters. To control which messages appear, use `messagesRequestBuilder` on the [Message List](/ui-kit/react/message-list) component.
-
-```js
-import { CometChatMessageList } from "@cometchat/uikit-react";
+## Events
-
+## Advanced: Custom View Slots
-
+Each view slot on a MessageTemplate can be overridden to customize how message bubbles render.
+
+### Slot Catalog
-#### HeaderView
+| Slot | Params | What it replaces | Section |
+| --- | --- | --- | --- |
+| `headerView` | `(message: CometChat.BaseMessage) => JSX.Element` | Sender name area | Header |
+| `contentView` | `(message: CometChat.BaseMessage) => JSX.Element` | Message content (text/image/video/audio/file bubble) | Content |
+| `footerView` | `(message: CometChat.BaseMessage) => JSX.Element` | Reactions area | Footer |
+| `bottomView` | `(message: CometChat.BaseMessage) => JSX.Element` | Link previews / load more | Bottom |
+| `bubbleView` | `(message: CometChat.BaseMessage, alignment: MessageBubbleAlignment) => JSX.Element` | Entire message bubble | Whole item |
+| `statusInfoView` | `(message: CometChat.BaseMessage) => JSX.Element` | Timestamp + receipt | Status info |
+| `replyView` | `(message: CometChat.BaseMessage) => JSX.Element` | Reply preview | Reply |
+| `options` | `(loggedInUser, message, group?) => CometChatActionsIcon[]` | Long-press action sheet | Options |
-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.
+### headerView
+
+Custom header for message bubbles. Default displays sender name.
-
-
-```ts
-import React, { useEffect, useState } from "react";
+```ts lines
+import React, { useEffect } from "react";
import {
CometChatMessageList,
CometChatUIKit,
@@ -175,9 +131,7 @@ import {
import { CometChat } from "@cometchat/chat-sdk-javascript";
const CustomMessageTemplate = () => {
- const [templates, setTemplates] = React.useState(
- []
- );
+ const [templates, setTemplates] = React.useState([]);
const [chatGroup, setChatGroup] = React.useState();
useEffect(() => {
@@ -217,66 +171,9 @@ const CustomMessageTemplate = () => {
export { CustomMessageTemplate };
```
-
-
-
-```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] = useState([]);
- const [chatGroup, setChatGroup] = useState(null);
-
- 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.headerView = (message: CometChat.BaseMessage) =>
- getHeaderView(message);
- return templates;
- }
- return templates;
- });
- setTemplates(template);
- }, []);
-
- const getHeaderView = (message: CometChat.BaseMessage) => {
- return <> {message.getSender().getName()} • 🗓️ In meeting;
- };
-
- return (
-
+### contentView
-
-
-#### 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 for message bubbles. Default displays text/image/video/audio/file bubble depending on message type.
@@ -284,7 +181,7 @@ The `contentview` method of MessageTemplate allows you to add a custom view to t
-```ts
+```ts lines
import React from "react";
import {
CometChatMessageList,
@@ -296,9 +193,7 @@ import { CometChat } from "@cometchat/chat-sdk-javascript";
import bannerImage from "../../assets/banner.svg";
const CustomMessageTemplate = () => {
- const [templates, setTemplates] = React.useState(
- []
- );
+ const [templates, setTemplates] = React.useState([]);
const [chatGroup, setChatGroup] = React.useState();
React.useEffect(() => {
@@ -322,107 +217,7 @@ const CustomMessageTemplate = () => {
return (
- );
- };
-
- 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 (
-
-
-
-```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);
- setTemplates(definedTemplates);
- }, []);
-
- const getContentView = (message: CometChat.BaseMessage) => {
- return (
-
-Use the following code to achieve the customization shown above.
-
-Use the following code to achieve the customization shown above.
-
+
-***
+```tsx lines
+
-***
+
-
);
}
```
-
-
+
-
- ) : null;
-}
-```
+Fires when the threaded message bubble is clicked.
-
-
- ) : null;
-}
-```
-
-
-
- ) : null;
-}
-```
-
-
-
- ) : null;
-}
-```
-
-
-
- ) : null;
-}
-```
-
-
-
- ) : null;
-}
-```
+## Filters
-
-
-
-
-
- ) : null;
-}
-```
-
-
-
- ) : null;
-}
-```
-
-
-
- ) : null;
-}
-```
-
-
-Use the following code to achieve the customization shown above.
-
-
- );
- };
-
- return chatUser ? (
-
-
- ) : null;
-}
-```
-
-
-Use the following code to achieve the customization shown above.
-
-
- );
- };
-
- return chatUser ? (
-
-
- ) : null;
-}
-```
-
-
-
- );
-};
-
-export default class DialogHelper {
- private dialogContainer: HTMLDivElement | null = null;
+
+
+
+```tsx lines
+
-The Message Bubble structure can typically be broken down into the following views:
+
-
- {chatGroup && (
-
- );
-};
-
-export { CustomMessageTemplate };
-```
-
-
@@ -284,7 +181,7 @@ The `contentview` method of MessageTemplate allows you to add a custom view to t
- 
-
-
-
-
-
- Blazer Casual
-
- Men's Tailored Regular Fit Blazer
-
-
-
-
- $37.99{" "}
- $74.00
-
-
- Free Delivery
-
- Buy now
-
- {chatGroup && (
-
- );
-};
-
-export { CustomMessageTemplate };
-```
-
-
-
-```css
+
+```css lines
.content-view__header-banner {
border-radius: 12px;
}
@@ -532,14 +322,12 @@ export { CustomMessageTemplate };
font: 500 14px/1.2 Roboto;
}
```
-
-
-#### BottomView
+### 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 section for message bubbles. Default displays link previews or "load more" for long messages.
@@ -547,8 +335,8 @@ The `bottomView` method of MessageTemplate allows you to add a custom button vie
-```ts
-import React, { useEffect, useState } from "react";
+```ts lines
+import React, { useEffect } from "react";
import {
CometChatMessageList,
CometChatUIKit,
@@ -557,9 +345,7 @@ import {
import { CometChat } from "@cometchat/chat-sdk-javascript";
const CustomMessageTemplate = () => {
- const [templates, setTemplates] = React.useState(
- []
- );
+ const [templates, setTemplates] = React.useState([]);
const [chatGroup, setChatGroup] = React.useState();
useEffect(() => {
@@ -603,60 +389,9 @@ const CustomMessageTemplate = () => {
export { CustomMessageTemplate };
```
-
-
-
-
-```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;
}
@@ -684,7 +419,6 @@ export { CustomMessageTemplate };
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;
@@ -692,14 +426,12 @@ export { CustomMessageTemplate };
background-color: #f44649;
}
```
-
-
-#### FooterView
+### 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.
+Custom footer for message bubbles. Default displays reactions.
@@ -707,8 +439,8 @@ The `footerView` method of MessageTemplate allows you to add a footer view to yo
-```ts
-import React, { useEffect, useState } from "react";
+```ts lines
+import React, { useEffect } from "react";
import {
CometChatMessageList,
CometChatUIKit,
@@ -717,9 +449,7 @@ import {
import { CometChat } from "@cometchat/chat-sdk-javascript";
const CustomMessageTemplate = () => {
- const [templates, setTemplates] = React.useState(
- []
- );
+ const [templates, setTemplates] = React.useState([]);
const [chatGroup, setChatGroup] = React.useState();
useEffect(() => {
@@ -766,72 +496,9 @@ const CustomMessageTemplate = () => {
export { CustomMessageTemplate };
```
-
-
-
-
-```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
+
+```css lines
.cometchat .cometchat-message-bubble__body-footer-view {
display: flex;
align-items: center;
@@ -848,14 +515,12 @@ export { CustomMessageTemplate };
border-radius: 12px 12px 0px 0px;
}
```
-
-
-#### BubbleView
+### 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.
+Replace the entire message bubble layout.
@@ -863,8 +528,8 @@ The `bubbleView` method of MessageTemplate allows you to add a bubble view to yo
-```ts
-import React, { useEffect, useState } from "react";
+```ts lines
+import React, { useEffect } from "react";
import {
CometChatMessageList,
CometChatUIKit,
@@ -882,9 +547,7 @@ import sentIcon from "../../assets/message-sent.svg";
import deliveredIcon from "../../assets/message-delivered.svg";
const CustomMessageTemplate = () => {
- const [templates, setTemplates] = React.useState(
- []
- );
+ const [templates, setTemplates] = React.useState([]);
const [chatGroup, setChatGroup] = React.useState();
useEffect(() => {
@@ -911,7 +574,7 @@ const CustomMessageTemplate = () => {
}, []);
const formatTime = (timestamp: number): string => {
- const date = new Date(timestamp * 1000); // Convert to milliseconds
+ const date = new Date(timestamp * 1000);
const hours = date.getHours();
const minutes = date.getMinutes();
const period = hours >= 12 ? "PM" : "AM";
@@ -974,113 +637,9 @@ const CustomMessageTemplate = () => {
export { CustomMessageTemplate };
```
-
-
-
-
-```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
+
+```css lines
.bubble-view {
display: flex;
flex-direction: column;
@@ -1127,10 +686,8 @@ export { CustomMessageTemplate };
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 {
@@ -1153,14 +710,12 @@ export { CustomMessageTemplate };
border-top: 10px solid #e8e8e8;
}
```
-
-
-#### StatusInfoView
+### 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 status info for message bubbles. Default displays receipt and timestamp.
@@ -1168,8 +723,8 @@ The `statusInfoView` method of MessageTemplate allows you to add a status info v
-```ts
-import React, { useEffect, useState } from "react";
+```ts lines
+import React, { useEffect } from "react";
import {
CometChatMessageList,
CometChatUIKit,
@@ -1178,9 +733,7 @@ import {
import { CometChat } from "@cometchat/chat-sdk-javascript";
const CustomMessageTemplate = () => {
- const [templates, setTemplates] = React.useState(
- []
- );
+ const [templates, setTemplates] = React.useState([]);
const [chatGroup, setChatGroup] = React.useState();
useEffect(() => {
@@ -1205,7 +758,7 @@ const CustomMessageTemplate = () => {
}, []);
const formatTime = (timestamp: number): string => {
- const date = new Date(timestamp * 1000); // Convert to milliseconds
+ const date = new Date(timestamp * 1000);
const hours = date.getHours();
const minutes = date.getMinutes();
const period = hours >= 12 ? "PM" : "AM";
@@ -1235,77 +788,9 @@ const CustomMessageTemplate = () => {
export { CustomMessageTemplate };
```
-
-
-
-
-```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
+
+```css lines
.status-info {
display: flex;
width: 57px;
@@ -1316,7 +801,6 @@ export { CustomMessageTemplate };
color: #727272;
text-align: right;
font: 400 10px/120% Roboto;
- font-style: normal;
}
.cometchat .cometchat-message-bubble__body {
@@ -1327,33 +811,26 @@ export { CustomMessageTemplate };
padding: 8px;
}
```
-
-
-#### ReplyView
+### 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.
+Custom reply preview for message bubbles.
-
-
-
-```ts
-import React, { useEffect, useState } from "react";
-import {
- CometChatMessageList
-} from "@cometchat/chat-uikit-react";
+```ts lines
+import React, { useEffect } from "react";
+import { CometChatMessageList } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
const CustomMessageTemplate = () => {
@@ -1367,47 +844,16 @@ const CustomMessageTemplate = () => {
return (
-
-
-```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 (
-
-
-
-```css
+
+```css lines
.cometchat
.cometchat-message-bubble-outgoing
.cometchat-message-bubble__body {
@@ -1415,24 +861,20 @@ export { CustomMessageTemplate };
--cometchat-extended-primary-color-700: rgba(251, 251, 251, 0.192);
}
-.cometchat .cometchat-message-bubble-incoming .bubble-view{
- --cometchat-primary-color: #f76808;
+.cometchat .cometchat-message-bubble-incoming .bubble-view {
+ --cometchat-primary-color: #f76808;
}
-.cometchat-message-composer__header .composer-view{
- --cometchat-primary-color: #f76808;
+.cometchat-message-composer__header .composer-view {
+ --cometchat-primary-color: #f76808;
}
```
-
-
-#### 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".
+### options
-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.
+Custom action sheet options for long-press on message bubbles.
@@ -1440,7 +882,7 @@ However, if you wish to override or modify these options, you can use the `optio
-```ts
+```ts lines
import React, { useEffect, useState } from "react";
import {
CometChatMessageList,
@@ -1452,9 +894,7 @@ import {
import { CometChat } from "@cometchat/chat-sdk-javascript";
const CustomMessageTemplate = () => {
- const [templates, setTemplates] = useState(
- []
- );
+ const [templates, setTemplates] = useState([]);
const [chatGroup, setChatGroup] = useState();
useEffect(() => {
@@ -1495,77 +935,9 @@ const CustomMessageTemplate = () => {
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;
- };
-
- return (
-
-
-
-```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();
-
- 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.options = (loggedInUser, message, group) =>
- getCustomOptions(loggedInUser, message, chatGroup);
- return templates;
- }
- return templates;
- });
- setTemplates(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
+ iconURL: "",
onClick: () => {
- /** Add your custom on click logic */
+ /** custom logic */
},
});
defaultOptions.splice(1, 0, myView);
@@ -1583,11 +955,9 @@ const CustomMessageTemplate = () => {
export { CustomMessageTemplate };
```
-
-
-
-```css
+
+```css lines
#refresh.cometchat-menu-list__menu .cometchat-menu-list__sub-menu-item-title {
overflow: hidden;
color: #6852d6;
@@ -1600,14 +970,12 @@ export { CustomMessageTemplate };
background-color: #6852d6;
}
```
-
-
### New Templates
-You can create an entirely new template for custom messages is one of the powerful features of CometChat's MessageTemplate.
+Create entirely new templates for custom message types.
@@ -1615,8 +983,8 @@ You can create an entirely new template for custom messages is one of the powerf
-```ts
-import React, { useEffect, useState } from "react";
+```ts lines
+import React, { useEffect } from "react";
import {
CometChatMessageList,
CometChatUIKit,
@@ -1633,9 +1001,7 @@ import sentIcon from "../../assets/message-sent.svg";
import deliveredIcon from "../../assets/message-delivered.svg";
const CustomMessageTemplate = () => {
- const [templates, setTemplates] = React.useState(
- []
- );
+ const [templates, setTemplates] = React.useState([]);
const [chatGroup, setChatGroup] = React.useState();
useEffect(() => {
@@ -1656,7 +1022,7 @@ const CustomMessageTemplate = () => {
}, []);
const formatTime = (timestamp: number): string => {
- const date = new Date(timestamp * 1000); // Convert to milliseconds
+ const date = new Date(timestamp * 1000);
const hours = date.getHours();
const minutes = date.getMinutes();
const period = hours >= 12 ? "PM" : "AM";
@@ -1738,122 +1104,9 @@ const CustomMessageTemplate = () => {
export { CustomMessageTemplate };
```
-
-
-
-
-```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;
- }
-
- return (
-
-
-
-```css
+
+```css lines
.content-view {
display: flex;
flex-direction: column;
@@ -1869,7 +1122,6 @@ export { CustomMessageTemplate };
color: #f9f8fd;
text-overflow: ellipsis;
font: 500 14px/16.8px roboto;
- font-style: normal;
}
.cometchat-message-bubble-incoming .cometchat-list-item__body-title,
@@ -1894,7 +1146,6 @@ export { CustomMessageTemplate };
color: #f9f8fd;
text-align: right;
font: 400 10px/12px roboto;
- font-style: normal;
}
.content-view__footer {
@@ -1915,7 +1166,6 @@ export { CustomMessageTemplate };
justify-content: center;
color: #f9f8fd;
font: 500 14px/16.8px roboto;
- font-style: normal;
}
.content-view__footer-message {
@@ -1926,10 +1176,25 @@ export { CustomMessageTemplate };
justify-content: center;
color: #f9f8fd;
font: 500 14px/16.8px roboto;
- font-style: normal;
}
```
-
-
+
+## Theme and Styling
+
+MessageTemplate renders inside `.cometchat-message-bubble`. Style individual bubble sections using CSS.
+
+```css lines
+.cometchat .cometchat-message-bubble__body {
+ /* content area overrides */
+}
+
+.cometchat .cometchat-message-bubble__body-footer-view {
+ /* footer area overrides */
+}
+
+.cometchat .cometchat-message-bubble__body-header-view {
+ /* header area overrides */
+}
+```
\ No newline at end of file
diff --git a/ui-kit/react/methods.mdx b/ui-kit/react/methods.mdx
index 0be19fef4..fbc1f8f9a 100644
--- a/ui-kit/react/methods.mdx
+++ b/ui-kit/react/methods.mdx
@@ -1,33 +1,51 @@
---
title: "Methods"
+description: "Reference for CometChat React UI Kit methods including init, login, logout, and message-sending wrappers."
---
+
+
+| 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 |
+
+
+
## 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.
+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.
-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.
+
+`CometChatUIKit.init(UIKitSettings)` must be called before rendering any UI Kit components or calling any SDK methods. Initialization must complete before login.
+
-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.
+
+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 +75,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 +107,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 +137,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 +159,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 +188,7 @@ CometChatUIKit.getLoggedinUser()
-```ts
+```ts lines highlight={3}
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
const UID: string = "UID";
@@ -200,7 +218,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 +226,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 +252,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 +280,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 +298,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 +329,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 +361,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 +385,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 +412,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 +440,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 +469,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 +502,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 +532,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 +565,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..99732769c 100644
--- a/ui-kit/react/next-conversation.mdx
+++ b/ui-kit/react/next-conversation.mdx
@@ -1,8 +1,18 @@
---
title: "Building A 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."
---
+
+- **Package:** `@cometchat/chat-uikit-react`
+- **Framework:** Next.js
+- **Key components:** `CometChatConversations` + `CometChatMessageList`
+- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")`
+- **Parent guide:** [Next.js Integration](/ui-kit/react/next-js-integration)
+
+
+
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**.
@@ -52,7 +62,7 @@ These icons are available in the **CometChat UI Kit assets folder**. You can fin
-```tsx CometChatSelector.tsx
+```tsx CometChatSelector.tsx lines
import { useEffect, useState } from "react";
import { Conversation, Group, User } from "@cometchat/chat-sdk-javascript";
import { CometChatConversations, CometChatUIKitLoginListener } from "@cometchat/chat-uikit-react";
@@ -107,7 +117,7 @@ export const CometChatSelector = (props: SelectorProps) => {
-```css CometChatSelector.css
+```css CometChatSelector.css lines
/* Style for the icon in the header menu of the conversation list */
.selector-wrapper .cometchat-conversations .cometchat-list__header-menu .cometchat-button__icon {
background: var(--cometchat-icon-color-primary);
@@ -192,7 +202,7 @@ src/
-```tsx CometChatNoSSR.tsx
+```tsx CometChatNoSSR.tsx lines highlight={15-17, 20}
import React, { useEffect, useState } from "react";
import {
CometChatMessageComposer,
@@ -212,6 +222,8 @@ const COMETCHAT_CONSTANTS = {
AUTH_KEY: "",
};
+const UID = "cometchat-uid-1"; // Replace with your actual UID
+
// Functional Component
const CometChatNoSSR: React.FC = () => {
// State to store the logged-in user
@@ -237,7 +249,7 @@ const CometChatNoSSR: React.FC = () => {
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);
@@ -299,7 +311,7 @@ export default CometChatNoSSR;
-```css CometChatNoSSR.css
+```css CometChatNoSSR.css lines
/* Layout for the main conversations and messages container */
.conversations-with-messages {
display: flex;
@@ -360,7 +372,7 @@ In this update, we will **disable Server-Side Rendering (SSR) for `CometChatNoSS
Modify your `index.tsx` file to dynamically import the `CometChatNoSSR.tsx` component with `{ ssr: false }`.
-```tsx index.tsx
+```tsx index.tsx lines
import { Inter } from "next/font/google";
import dynamic from "next/dynamic";
@@ -388,7 +400,7 @@ export default function Home() {
Next, add the following styles to global.css to ensure CometChat UI Kit is properly styled.
-```css global.css
+```css global.css lines
:root {
--background: #ffffff;
--foreground: #171717;
@@ -449,16 +461,42 @@ a {
### **Step 5: Run the project**
-```
+
+
+```bash lines
npm run dev
```
+
-***
+
+```bash lines
+pnpm dev
+```
+
-## **Next Steps**
+
+```bash lines
+yarn dev
+```
+
+
-### **Enhance the User Experience**
+***
+## **Next Steps**
-* **[Advanced Customizations](/ui-kit/react/theme)** – Personalize the chat UI to align with your brand.
+
+
+ Personalize the chat UI to align with your brand.
+
+
+ Explore all available prebuilt UI components.
+
+
+ Return to the Next.js setup guide.
+
+
+ Learn about messaging, real-time updates, and more.
+
+
***
diff --git a/ui-kit/react/next-js-integration.mdx b/ui-kit/react/next-js-integration.mdx
index 0d4c40aac..3f70d9863 100644
--- a/ui-kit/react/next-js-integration.mdx
+++ b/ui-kit/react/next-js-integration.mdx
@@ -1,10 +1,24 @@
---
title: "Getting Started With CometChat React UI Kit For Next.js"
sidebarTitle: "Integration"
+description: "Step-by-step guide to integrate CometChat React UI Kit into your Next.js application with App Router support."
---
+
+- **Package:** `@cometchat/chat-uikit-react` — `npm install @cometchat/chat-uikit-react`
+- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` — must complete before rendering
+- **SSR:** CometChat requires browser APIs — use `'use client'` directive or dynamic imports with `ssr: false`
+- **Init code:** `new UIKitSettingsBuilder().setAppId("APP_ID").setRegion("REGION").setAuthKey("AUTH_KEY").build()`
+- **Framework:** Next.js (this page) | [React.js](/ui-kit/react/react-js-integration) | [React Router](/ui-kit/react/react-router-integration) | [Astro](/ui-kit/react/astro-integration)
+- **All components:** [Components Overview](/ui-kit/react/components-overview)
+
+
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.
+
+**Server-Side Rendering (SSR):** CometChat UI Kit requires browser APIs (`window`, `WebSocket`, `document`). For Next.js, ensure components render only on the client side using `'use client'` directive or dynamic imports with `ssr: false`.
+
+
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.
{/*
@@ -132,7 +146,7 @@ Before using any features of the **CometChat UI Kit** or **CometChat SDK**, you
-```ts
+```ts lines highlight={7-9}
import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";
/**
@@ -172,7 +186,7 @@ CometChatUIKit.init(UIKitSettings)!
-```js
+```js lines highlight={7-9}
import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";
/**
@@ -250,7 +264,7 @@ The **Login** method returns a **User object** containing all relevant details o
-```ts
+```ts lines highlight={3}
import { CometChatUIKit } from "@cometchat/chat-uikit-react";
const UID = "UID"; // Replace with your actual UID
@@ -273,7 +287,7 @@ CometChatUIKit.getLoggedinUser().then((user: CometChat.User | null) => {
-```js
+```js lines highlight={3}
import { CometChatUIKit } from "@cometchat/chat-uikit-react";
const UID = "UID"; // Replace with your actual UID
@@ -420,15 +434,3 @@ Integrate a conversation view that suits your application's **UX requirements**.
* **[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.
-***
-
-## **Next Steps**
-
-Now that you’ve selected your **chat experience**, proceed to the **integration guide**:
-
-* **[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)**
-
-***
diff --git a/ui-kit/react/next-one-to-one-chat.mdx b/ui-kit/react/next-one-to-one-chat.mdx
index 6b9ca33f4..6ef1d4833 100644
--- a/ui-kit/react/next-one-to-one-chat.mdx
+++ b/ui-kit/react/next-one-to-one-chat.mdx
@@ -1,8 +1,18 @@
---
title: "Building A One To One/Group Chat Experience"
sidebarTitle: "One To One/Group Chat"
+description: "Build a focused one-to-one or group chat experience in Next.js with CometChat UI Kit."
---
+
+- **Package:** `@cometchat/chat-uikit-react`
+- **Framework:** Next.js
+- **Key components:** `CometChatMessageHeader` + `CometChatMessageList` + `CometChatMessageComposer`
+- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")`
+- **Parent guide:** [Next.js Integration](/ui-kit/react/next-js-integration)
+
+
+
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)
@@ -70,7 +80,7 @@ src/
-```tsx CometChatNoSSR.tsx
+```tsx CometChatNoSSR.tsx lines highlight={7-9, 31, 51, 61}
import React, { useEffect, useState } from "react";
import { CometChatMessageComposer, CometChatMessageHeader, CometChatMessageList, CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
@@ -101,7 +111,7 @@ const CometChatNoSSR: React.FC = () => {
console.log("Initialization completed successfully");
CometChatUIKit.getLoggedinUser().then((loggedInUser) => {
if (!loggedInUser) {
- CometChatUIKit.login("superhero1")
+ CometChatUIKit.login("cometchat-uid-2") //TODO: Replace with your actual UID
.then((user) => {
console.log("Login Successful", { user });
setUser(user);
@@ -164,7 +174,7 @@ export default CometChatNoSSR;
-```css CometChatNoSSR.css
+```css CometChatNoSSR.css lines
.messages-wrapper {
width: 100%;
height: 100%;
@@ -196,8 +206,9 @@ In the code snippet above, ensure you select either a user or a group based on y
#### **Fetching a User (One-on-One Chat)**
-```javascript
+```javascript lines highlight={1}
const UID = "cometchat-uid-1";
+
CometChat.getUser(UID).then(
user => {
setSelectedUser(user);
@@ -209,8 +220,9 @@ CometChat.getUser(UID).then(
#### **Fetching a Group (Group Chat)**
-```javascript
+```javascript lines highlight={1}
const GUID = "GUID"
+
CometChat.getGroup(GUID).then(
group => {
setSelectedGroup(group);
@@ -228,7 +240,7 @@ In this update, we will **disable Server-Side Rendering (SSR) for `CometChatNoSS
Modify your `index.tsx` file to dynamically import the `CometChatNoSSR.tsx` component with `{ ssr: false }`.
-```tsx index.tsx
+```tsx index.tsx lines
import { Inter } from "next/font/google";
import dynamic from "next/dynamic";
@@ -258,7 +270,7 @@ export default function Home() {
Next, add the following styles to global.css to ensure CometChat UI Kit is properly styled.
-```css global.css
+```css global.css lines
:root {
--background: #ffffff;
--foreground: #171717;
@@ -321,14 +333,40 @@ a {
### **Step 6: Run the project**
-```
+
+
+```bash lines
npm run dev
```
+
+
+
+```bash lines
+pnpm dev
+```
+
+
+```bash lines
+yarn dev
+```
+
+
## **Next Steps**
-### **Enhance the User Experience**
-
-* **[Advanced Customizations](/ui-kit/react/theme)** – Personalize the chat UI to align with your brand.
+
+
+ Personalize the chat UI to align with your brand.
+
+
+ Explore all available prebuilt UI components.
+
+
+ Return to the Next.js setup guide.
+
+
+ Learn about messaging, real-time updates, and more.
+
+
***
diff --git a/ui-kit/react/next-tab-based-chat.mdx b/ui-kit/react/next-tab-based-chat.mdx
index 91f61a656..65ce8af07 100644
--- a/ui-kit/react/next-tab-based-chat.mdx
+++ b/ui-kit/react/next-tab-based-chat.mdx
@@ -1,8 +1,18 @@
---
title: "Building A Messaging UI With Tabs, Sidebar, And Message View"
sidebarTitle: "Tab Based Chat Experience"
+description: "Build a tab-based messaging UI with chats, calls, users, and groups in Next.js with CometChat UI Kit."
---
+
+- **Package:** `@cometchat/chat-uikit-react`
+- **Framework:** Next.js
+- **Key components:** `CometChatConversations` + `CometChatCallLogs` + `CometChatUsers` + `CometChatGroups`
+- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")`
+- **Parent guide:** [Next.js Integration](/ui-kit/react/next-js-integration)
+
+
+
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)
@@ -60,7 +70,7 @@ These icons are available in the **CometChat UI Kit assets folder**. You can fin
-```tsx CometChatTabs.tsx
+```tsx CometChatTabs.tsx lines
import { useState } from "react";
import "./CometChatTabs.css";
@@ -145,7 +155,7 @@ export const CometChatTabs = (props: {
-```css CometChatTabs.css
+```css CometChatTabs.css lines
/* Main container for the CometChat tab bar */
.cometchat-tab-component {
display: flex; /* Align child tabs horizontally */
@@ -230,7 +240,7 @@ src/
-```tsx CometChatSelector.tsx
+```tsx CometChatSelector.tsx lines
import { useEffect, useState } from "react";
import {
Call,
@@ -352,7 +362,7 @@ export const CometChatSelector = (props: SelectorProps) => {
-```css CometChatSelector.css
+```css CometChatSelector.css lines
/* Style the icon inside header menu in conversation list */
.selector-wrapper .cometchat-conversations .cometchat-list__header-menu .cometchat-button__icon {
background: var(--cometchat-icon-color-primary); /* Primary icon color */
@@ -430,7 +440,7 @@ Now we will update the `CometChatNoSSR.tsx` & `CometChatNoSSR.css` files to impo
-```tsx CometChatNoSSR.tsx
+```tsx CometChatNoSSR.tsx lines highlight={15-17, 45}
import React, { useEffect, useState } from "react";
import {
CometChatMessageComposer,
@@ -475,7 +485,7 @@ const CometChatNoSSR: React.FC = () => {
CometChatUIKit.getLoggedinUser().then((loggedInUser) => {
if (!loggedInUser) {
// Perform login if no user is logged in
- CometChatUIKit.login("cometchat-uid-4")
+ CometChatUIKit.login("cometchat-uid-4") //TODO: Replace with dynamic UID as needed
.then((user) => {
console.log("Login Successful", { user });
setUser(user);
@@ -537,7 +547,7 @@ export default CometChatNoSSR;
-```css CometChatNoSSR.css
+```css CometChatNoSSR.css lines
/* Layout for the main container that holds conversations and messages */
.conversations-with-messages {
display: flex;
@@ -598,7 +608,7 @@ In this update, we will **disable Server-Side Rendering (SSR) for `CometChatNoSS
Modify your `index.tsx` file to dynamically import the `CometChatNoSSR.tsx` component with `{ ssr: false }`.
-```tsx index.tsx
+```tsx index.tsx lines
import { Inter } from "next/font/google";
import dynamic from "next/dynamic";
@@ -626,7 +636,7 @@ export default function Home() {
Next, add the following styles to global.css to ensure CometChat UI Kit is properly styled.
-```css global.css
+```css global.css lines
:root {
--background: #ffffff;
--foreground: #171717;
@@ -687,16 +697,42 @@ a {
### **Step 6: Run the project**
-```
+
+
+```bash lines
npm run dev
```
+
-***
+
+```bash lines
+pnpm dev
+```
+
-## **Next Steps**
+
+```bash lines
+yarn dev
+```
+
+
-### **Enhance the User Experience**
+***
+## **Next Steps**
-* **[Advanced Customizations](/ui-kit/react/theme)** – Personalize the chat UI to align with your brand.
+
+
+ Personalize the chat UI to align with your brand.
+
+
+ Explore all available prebuilt UI components.
+
+
+ Return to the Next.js setup guide.
+
+
+ Learn about messaging, real-time updates, and more.
+
+
***
diff --git a/ui-kit/react/outgoing-call.mdx b/ui-kit/react/outgoing-call.mdx
index 89413847a..c6d9c9f35 100644
--- a/ui-kit/react/outgoing-call.mdx
+++ b/ui-kit/react/outgoing-call.mdx
@@ -1,29 +1,35 @@
---
title: "Outgoing Call"
+description: "Display and manage outgoing voice and video calls with cancel controls using the CometChatOutgoingCall component."
---
-## 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. |
+| Field | Value |
+| --- | --- |
+| Purpose | Visual representation of a user-initiated outgoing voice/video call with cancel control and recipient info |
+| Package | `@cometchat/chat-uikit-react` |
+| Import | `import { CometChatOutgoingCall } from "@cometchat/chat-uikit-react";` |
+| Used in experiences | Outgoing call screen, call initiation overlay |
+| Copy-paste base | See [Base Code](#base-code--stylesheet) below |
+| Primary output | Call cancellation via `onCallCanceled` |
+| Primary hook points | `onCallCanceled`, `onError`, view slots (`titleView`, `subtitleView`, `avatarView`, `cancelButtonView`) |
+| CSS root class | `.cometchat-outgoing-call` |
+| Real-time events | None emitted directly |
-## Usage
+
-### Integration
+## Base Code and Stylesheet
+
+Renders an outgoing call screen with recipient info and a cancel button. Requires a `CometChat.Call` object from `CometChat.initiateCall()`.
-```tsx
+```tsx lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
CometChatOutgoingCall,
@@ -36,16 +42,13 @@ const OutgoingCallDemo = () => {
React.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);
}, []);
@@ -54,975 +57,335 @@ const OutgoingCallDemo = () => {
export default OutgoingCallDemo;
```
-
+
-
-```tsx
-import { OutgoingCallDemo } from "./OutgoingCallDemo";
+Root CSS class for style overrides:
-export default function App() {
- 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. 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.
-
-
-
-```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 cancelCall = () => {
- //your custom cancel call click actions
- CometChat.endCall(call!.getSessionId()).then(() => {
- setCall(undefined);
- });
- };
- return call ? (
-
+### Data
-
-```js
-import React, { useState, useEffect } from 'react';
-import { CometChat } from '@cometchat/chat-sdk-javascript';
-import { CometChatOutgoingCall, CometChatUIKitConstants } from '@cometchat/chat-uikit-react';
+| Property | Type | Default | Effect | Pitfall |
+| --- | --- | --- | --- | --- |
+| `call` | `CometChat.Call` | — (required) | Sets the outgoing call object | Must come from `CometChat.initiateCall()` |
-const OutgoingCallDemo = () => {
- const [call, setCall] = useState(null);
+### Sound
- useEffect(() => {
- const uid = "uid";
+| Property | Type | Default | Effect | Pitfall |
+| --- | --- | --- | --- | --- |
+| `disableSoundForCalls` | `boolean` | `false` | Disables the outgoing call ringtone | — |
+| `customSoundForCalls` | `string` | `undefined` | Custom sound file URL for outgoing calls | — |
- const callObject = new CometChat.Call(
- uid,
- CometChatUIKitConstants.MessageTypes.audio,
- CometChatUIKitConstants.MessageReceiverType.user
- );
+## Actions
- CometChat.initiateCall(callObject)
- .then((c) => {
- setCall(c);
- })
- .catch(console.log);
- }, []);
+[Actions](/ui-kit/react/components-overview#actions) split into predefined (built-in triggers) and user-defined (callbacks).
- const cancelCall = () =>{
- //your custom cancel call click actions
- CometChat.endCall(call!.getSessionId())
- .then(() => {
- setCall(undefined);
- })
- };
+### Predefined Actions
- return (
- call && (
-
+### User-Defined Actions
-
+#### onCallCanceled
-##### 2. onError
+Fires when the cancel button is clicked.
-This action doesn't change the behavior of the component but rather listens for any errors that occur in the Outgoing Call component.
+| Detail | Value |
+| --- | --- |
+| When it fires | User clicks the cancel button |
+| Payload type | `() => void` |
+| What devs typically do next | End the call session, hide the outgoing call UI |
-
-
-```ts
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
-import {
- CometChatOutgoingCall,
- CometChatUIKitConstants,
-} from "@cometchat/chat-uikit-react";
-import React from "react";
+import { CometChatOutgoingCall, CometChatUIKitConstants } from "@cometchat/chat-uikit-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 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);
- }
-
- 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);
- }, []);
+ const cancelCall = () => {
+ CometChat.endCall(call!.getSessionId()).then(() => setCall(undefined));
+ };
- function handleOnError(error) {
- //Your Custom Error Actions
- console.log(error);
- }
- return call &&
+#### onError
-
+Fires when the component encounters an error.
-***
+| Detail | Value |
+| --- | --- |
+| When it fires | Any internal error |
+| Payload type | `(error: CometChat.CometChatException) => void` |
+| What devs typically do next | Log to error tracking service |
-### Filters
+## 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.
+The OutgoingCall component does not have any exposed filters.
-The `Outgoing Call` component does not have any exposed filters.
+## Events
-***
+### UI Events
-### Events
+The OutgoingCall component does not emit any custom UI 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.
+### SDK Events (Real-Time)
-The `Outgoing Call` component does not have any exposed filters.
+The component internally listens to SDK call events for real-time call status updates. No manual attachment needed.
-***
+## Advanced: Custom View Slots
-## Customization
+Customization override points for the outgoing call UI.
-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.
+### Slot Catalog
-### Style
+| Slot | Params | What it replaces | Section |
+| --- | --- | --- | --- |
+| `titleView` | `JSX.Element` | Recipient name | Sub-section (title) |
+| `subtitleView` | `JSX.Element` | "Calling..." text | Sub-section (subtitle) |
+| `avatarView` | `JSX.Element` | Recipient avatar | Sub-section (avatar) |
+| `cancelButtonView` | `JSX.Element` | Cancel call button | Sub-section (cancel) |
-Using CSS you can customize the look and feel of the component in your app like the color, size, shape, and fonts.
+### titleView
-**Example**
+Replace the recipient name.
- 
+ 
-```ts
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
-import {
- CometChatOutgoingCall,
- CometChatUIKitConstants,
- OutgoingCallStyle,
-} from "@cometchat/chat-uikit-react";
-import React from "react";
+import { CometChatOutgoingCall, CometChatUIKitConstants } from "@cometchat/chat-uikit-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 callObject = new CometChat.Call(
- uid,
- CometChatUIKitConstants.MessageTypes.audio,
- CometChatUIKitConstants.MessageReceiverType.user
+ const getTitleView = (call: CometChat.Call) => {
+ return (
+
+
+```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,
- OutgoingCallStyle,
-} from "@cometchat/chat-uikit-react";
-
-const OutgoingCallDemo = () => {
- const [call, setCall] = useState(null);
-
- useEffect(() => {
- const uid = "uid";
+### subtitleView
- const callObject = new CometChat.Call(
- uid,
- CometChatUIKitConstants.MessageTypes.audio,
- CometChatUIKitConstants.MessageReceiverType.user
- );
+Replace the "Calling..." text.
- CometChat.initiateCall(callObject)
- .then((c) => {
- setCall(c);
- })
- .catch(console.log);
- }, []);
+
+ 
+
- return call &&
+
+```ts lines
+const getSubtitleView = (call: CometChat.Call) => {
+ return (
+
-
-
-```css
-.cometchat-outgoing-call__avatar .cometchat-avatar {
+
+```css lines
+.outgoing-call__subtitle {
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;
- border-radius: 8px;
- background: #f44649;
+ align-items: flex-start;
+ gap: 8px;
+ color: #727272;
+ text-align: center;
+ font: 400 16px Roboto;
}
-.cometchat-outgoing-call .cometchat-outgoing-call__title {
- text-align: center;
- font: 400 32px/38px "Times New Roman";
+.outgoing-call__subtitle-icon {
+ -webkit-mask: url("") center center no-repeat;
+ background: #A1A1A1;
+ height: 24px;
+ width: 24px;
}
```
-
-
-### Functionality
+### avatarView
-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.
+Replace the recipient avatar.
-Here is a code snippet demonstrating how you can customize the functionality of the `Outgoing Call` component.
+
+ 
+
-```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";
+```ts lines
+import { CometChatAvatar, CometChatOutgoingCall } from "@cometchat/chat-uikit-react";
- const callObject = new CometChat.Call(
- uid,
- CometChatUIKitConstants.MessageTypes.audio,
- CometChatUIKitConstants.MessageReceiverType.user
- );
- CometChat.initiateCall(callObject)
- .then((c) => {
- setCall(c);
- })
- .catch(console.log);
- }, []);
-
- return call ? (
-
+
+```css lines
+.outgoing-call__avatar .cometchat-avatar,
+.outgoing-call__avatar .cometchat-avatar__image {
+ width: 160px;
+ height: 160px;
+ border-radius: 20px;
+}
-
-```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);
+.outgoing-call__avatar-status {
+ background-image: url("");
+ height: 44px;
+ width: 44px;
+ background-size: contain;
+ position: relative;
+ top: -45px;
+ right: -60px;
+}
+```
+
+
- useEffect(() => {
- const uid = "uid";
+### cancelButtonView
- const callObject = new CometChat.Call(
- uid,
- CometChatUIKitConstants.MessageTypes.audio,
- CometChatUIKitConstants.MessageReceiverType.user
- );
+Replace the cancel call button.
- CometChat.initiateCall(callObject)
- .then((c) => {
- setCall(c);
- })
- .catch(console.log);
- }, []);
+
+ 
+
+
+
+```ts lines
+const getCancelButtonView = (call: CometChat.Call) => {
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;
+
+```css lines
+.outgoing-call__cancel-button-wrapper {
+ height: 64px;
+ display: flex;
+ justify-content: center;
+ cursor: pointer;
}
-```
-
-
-
-
-
-#### 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 (
-
-
-
-```js
-import React, { useState, useEffect } from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import {
- CometChatAvatar,
- 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 getAvatarView = (call) => {
- return (
-
-
-
-```css
-.outgoing-call__avatar .cometchat-avatar,
-.outgoing-call__avatar .cometchat-avatar__image {
- width: 160px;
- height: 160px;
- border-radius: 20px;
+.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;
}
-.outgoing-call__avatar-status {
- background-image: url("");
- height: 44px;
- width: 44px;
- background-size: contain;
- position: relative;
- top: -45px;
- right: -60px;
+.outgoing-call__cancel-button-icon {
+ -webkit-mask: url("") center center no-repeat;
+ background: #E8E8E8;
+ height: 32px;
+ width: 32px;
}
```
-
-
-#### CancelButtonView
+## Theme and Styling
-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.
+Using CSS, customize the look and feel of the component. The root CSS class is `.cometchat-outgoing-call`.
-
+
-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 getCancelButtonView = (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 getCancelButtonView = (call) => {
- return (
-
-
-
-```css
-.outgoing-call__cancel-button-wrapper {
- height: 64px;
- display: flex;
- justify-content: center;
- cursor: pointer;
+```css lines
+.cometchat-outgoing-call__avatar .cometchat-avatar {
+ border-radius: 16px;
+ background: #fbaa75;
}
-.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;
+.cometchat-outgoing-call__button {
+ border-radius: 8px;
+ background: #f44649;
}
-.outgoing-call__cancel-button-icon {
- -webkit-mask: url("") center center no-repeat;
- background: #E8E8E8;
- height: 32px;
- width: 32px;
+.cometchat-outgoing-call .cometchat-outgoing-call__title {
+ text-align: center;
+ font: 400 32px/38px "Times New Roman";
}
-```
-
-
-
-
+```
\ No newline at end of file
diff --git a/ui-kit/react/overview.mdx b/ui-kit/react/overview.mdx
index 42b82d980..d12163391 100644
--- a/ui-kit/react/overview.mdx
+++ b/ui-kit/react/overview.mdx
@@ -1,8 +1,19 @@
---
title: "CometChat UI Kit For React"
sidebarTitle: "Overview"
+description: "Prebuilt, customizable React UI components for adding chat, voice, and video calling to your app. Supports React.js, Next.js, React Router, and Astro."
---
+
+- **Package:** `@cometchat/chat-uikit-react`
+- **Install:** `npm install @cometchat/chat-uikit-react`
+- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` — must complete before rendering any component
+- **Key components:** `CometChatConversations`, `CometChatMessageList`, `CometChatMessageComposer`, `CometChatMessageHeader`, `CometChatUsers`, `CometChatGroups`
+- **Theming:** Override CSS variables on `.cometchat` class. See [Theming](/ui-kit/react/theme)
+- **Calling:** Requires separate `@cometchat/calls-sdk-javascript` package. See [Call Features](/ui-kit/react/call-features)
+- **SSR:** Components require browser APIs — use client-side only rendering for Next.js/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.
***
@@ -10,7 +21,7 @@ The **CometChat UI Kit** for React is a powerful solution designed to seamlessly
## **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.
+* **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.
@@ -43,67 +54,12 @@ href="https://link.cometchat.com/react-conversation-list-message"
-
-{/* [
](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.
-
-
-
-
-
-**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.
-
-
-
-
-
-***
-
-### **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.
@@ -114,9 +70,9 @@ A collection of individual components—like conversation lists, message lists,
* 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.
+* You don't need to rewrite the SDK calls yourself—each component already integrates with CometChat logic.
-**Why It’s Great**
+**Why It's Great**
* **Flexible Design** – You control the final UI arrangement.
* **No Extra Overhead** – Implement only the features you need.
@@ -156,59 +112,44 @@ A collection of individual components—like conversation lists, message lists,
***
-## **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
-
-
+## Resources
+
+
+ Working reference app to compare against your code
+
+
+ Full UI Kit source on GitHub
+
+
+ Design resources for customization and prototyping
+
+
+ Common issues and fixes
+
+
+ Open a ticket for direct assistance
+
+ {/*
+ Latest releases and updates
+ */}
-***
-
-## **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)
+## Next Steps
+
+
+
+ Step-by-step setup guide for React.js applications
+
+
+ Browse all available prebuilt UI components
+
+
+ Chat features included out of the box
+
+
+ Customize colors, fonts, and styles to match your brand
+
+
diff --git a/ui-kit/react/property-changes.mdx b/ui-kit/react/property-changes.mdx
index 3358b3d16..e3c6c87a9 100644
--- a/ui-kit/react/property-changes.mdx
+++ b/ui-kit/react/property-changes.mdx
@@ -1,6 +1,14 @@
---
-title: "Property Changes"
+title: "Property Changes from V5 to V6"
+description: "Detailed reference of renamed, added, and removed properties and methods when upgrading from CometChat React UI Kit v5 to v6."
---
+
+- **Migration scope:** Property and method changes between v5 and v6 for all components
+- **Components affected:** Conversations, Users, Groups, Group Members, Message Header, Message List, Message Composer, Incoming Call, Outgoing Call, Call Buttons, Call Logs, CometChatLocalize
+- **Key pattern change:** `datePattern` (DatePatterns) replaced with `CalendarObject`-based props across all components
+- **Localization:** `setLocale` → `setCurrentLanguage`, `localize` → `getLocalizedString`
+- **Full migration guide:** [Upgrading from v5](/ui-kit/react/upgrading-from-v5)
+
## Conversations
@@ -92,3 +100,24 @@ title: "Property Changes"
| 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. |
+
+***
+
+## Next Steps
+
+
+
+ Full migration guide with breaking changes.
+
+
+ Explore all v6 prebuilt UI components.
+
+
+ Init, login, logout, and other UI Kit methods.
+
+
+ Subscribe to real-time events across components.
+
+
+
+***
diff --git a/ui-kit/react/react-conversation.mdx b/ui-kit/react/react-conversation.mdx
index 03ab256f4..def3108d1 100644
--- a/ui-kit/react/react-conversation.mdx
+++ b/ui-kit/react/react-conversation.mdx
@@ -1,8 +1,18 @@
---
title: "Building A 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."
---
+
+- **Package:** `@cometchat/chat-uikit-react`
+- **Framework:** React.js
+- **Key components:** `CometChatConversations` + `CometChatMessageList`
+- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")`
+- **Parent guide:** [React.js Integration](/ui-kit/react/react-js-integration)
+
+
+
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**.
@@ -47,7 +57,7 @@ src/
-```tsx CometChatSelector.tsx
+```tsx CometChatSelector.tsx lines
import { useEffect, useState } from "react";
import {
Conversation,
@@ -118,7 +128,7 @@ export const CometChatSelector = (props: SelectorProps) => {
-```css CometChatSelector.css
+```css CometChatSelector.css lines
/* Styles for the menu icon in the conversation header */
.selector-wrapper .cometchat-conversations .cometchat-list__header-menu .cometchat-button__icon {
background: var(--cometchat-icon-color-primary);
@@ -243,7 +253,7 @@ Now we will update the `App.tsx` & `App.css` files to import these new component
-```tsx App.tsx
+```tsx App.tsx lines
import { useState } from "react";
import {
CometChatMessageComposer,
@@ -317,7 +327,7 @@ export default App;
-```css App.css
+```css App.css lines
/* Root container settings */
#root {
text-align: center;
@@ -380,16 +390,36 @@ export default App;
### **Step 3: Run the project**
-```powershell
+
+
+```bash lines
+npm run dev
+```
+
+
+
+```bash lines
npm start
```
+
+
***
-
## **Next Steps**
-### **Enhance the User Experience**
-
-* **[Advanced Customizations](/ui-kit/react/theme)** – Personalize the chat UI to align with your brand.
+
+
+ Personalize the chat UI to align with your brand.
+
+
+ Explore all available prebuilt UI components.
+
+
+ Return to the React.js setup guide.
+
+
+ Learn about messaging, real-time updates, and more.
+
+
***
diff --git a/ui-kit/react/react-js-integration.mdx b/ui-kit/react/react-js-integration.mdx
index 55d433935..7a7ff21fa 100644
--- a/ui-kit/react/react-js-integration.mdx
+++ b/ui-kit/react/react-js-integration.mdx
@@ -1,8 +1,17 @@
---
title: "Getting Started With CometChat React UI Kit"
sidebarTitle: "Integration"
+description: "Step-by-step guide to integrate CometChat React UI Kit into your React.js application with Vite or Create React App."
---
+
+- **Package:** `@cometchat/chat-uikit-react` — `npm install @cometchat/chat-uikit-react`
+- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` — must complete before rendering
+- **Init code:** `new UIKitSettingsBuilder().setAppId("APP_ID").setRegion("REGION").setAuthKey("AUTH_KEY").build()`
+- **Framework:** React.js (this page) | [Next.js](/ui-kit/react/next-js-integration) | [React Router](/ui-kit/react/react-router-integration) | [Astro](/ui-kit/react/astro-integration)
+- **All components:** [Components Overview](/ui-kit/react/components-overview)
+
+
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.
@@ -170,9 +179,17 @@ For secure authentication, use the [`Auth Token`](/ui-kit/react/methods#login-us
+
+**Auth Key** is for development/testing only. In production, generate **Auth Tokens** on your server using the REST API and pass them to the client. Never expose Auth Keys in production client code.
+
+
+
+You must call `CometChatUIKit.init(UIKitSettings)` before rendering any UI Kit components or calling any SDK methods. Initialization must complete before login.
+
+
-```ts
+```ts lines highlight={7-9}
import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";
/**
@@ -212,7 +229,7 @@ CometChatUIKit.init(UIKitSettings)!
-```js
+```js lines
import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";
/**
@@ -302,7 +319,7 @@ The **Login** method returns a **User object** containing all relevant details o
-```ts
+```ts lines highlight={3}
import { CometChatUIKit } from "@cometchat/chat-uikit-react";
const UID = "UID"; // Replace with your actual UID
@@ -325,7 +342,7 @@ CometChatUIKit.getLoggedinUser().then((user: CometChat.User | null) => {
-```js
+```js lines
import { CometChatUIKit } from "@cometchat/chat-uikit-react";
const UID = "UID"; // Replace with your actual UID
@@ -489,15 +506,23 @@ import { CometChatFrameProvider } from "@cometchat/ui-kit";
| Prop | Type | Description |
|------------|--------|------------------------------------------------|
| `iframeId` | string | The DOM `id` of the target `
-
+
@@ -433,12 +228,9 @@ const CustomMessageTemplate = () => {
- $37.99{" "}
- $74.00
-
-
- Free Delivery
+ $37.99 $74.00
+ Free Delivery
Buy now
@@ -474,11 +266,9 @@ const CustomMessageTemplate = () => {
export { CustomMessageTemplate };
```
-
-
-
@@ -547,8 +335,8 @@ The `bottomView` method of MessageTemplate allows you to add a custom button vie
- According to guidelines you cannot share contact
-
)
- }
-
- return (
-
- {chatGroup &&
- );
-};
-
-export { CustomMessageTemplate };
-```
-
@@ -707,8 +439,8 @@ The `footerView` method of MessageTemplate allows you to add a footer view to yo
- {chatGroup && (
-
- );
-};
-
-export { CustomMessageTemplate };
-```
-
@@ -863,8 +528,8 @@ The `bubbleView` method of MessageTemplate allows you to add a bubble view to yo
-
- );
- };
-
- return (
-
-
- {textMessage}
-
-
- {formatTime(message.getSentAt())}
- {isSentByMe && (
- 
- )}
-
-
- {chatGroup &&
- );
-};
-
-export { CustomMessageTemplate };
-```
-
@@ -1168,8 +723,8 @@ The `statusInfoView` method of MessageTemplate allows you to add a status info v
- {formattedTime}
-
- );
- } else {
- return null;
- }
- };
-
- return (
-
- {chatGroup &&
- );
-};
-
-export { CustomMessageTemplate };
-```
-
Default Reply View
-Custom Reply View
-
- {chatGroup && (
-
);
};
export { CustomMessageTemplate };
```
-
-
- {chatGroup &&
- );
-};
-
-export { CustomMessageTemplate };
-```
-
@@ -1440,7 +882,7 @@ However, if you wish to override or modify these options, you can use the `optio
- {chatGroup && (
-
- );
-};
-
-export { CustomMessageTemplate };
-```
-
-
@@ -1615,8 +983,8 @@ You can create an entirely new template for custom messages is one of the powerf
-
- );
- };
-
- 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 &&
- );
-};
-
-export { CustomMessageTemplate };
-```
-
](https://link.cometchat.com/next-one-on-one)
@@ -70,7 +80,7 @@ src/
](https://link.cometchat.com/next-tabs-sidebar-message)
@@ -60,7 +70,7 @@ These icons are available in the **CometChat UI Kit assets folder**. You can fin
-The `Outgoing Call` is comprised of the following components:
+
-
- );
+```css lines
+.cometchat-outgoing-call {
+ /* overrides here */
}
```
-
-
-
+
+ {call.getCallInitiator().getName()} {" <> "} {call.getCallReceiver().getName()}
+
);
- CometChat.initiateCall(callObject)
- .then((c) => {
- setCall(c);
- })
- .catch(console.log);
- }, []);
+ };
- return call ?
+
- return call &&
+
+ {"Calling..."}
+
+ );
};
-export default OutgoingCallDemo;
+
+
+
+ );
};
-export default OutgoingCallDemo;
+
+
+
+
);
};
-export default OutgoingCallDemo;
+
+
+ {"End Call"}
+
+
-
-
-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.
-
-
-
- );
- };
-
- return (
- call &&
-
- );
- };
-
- return (
- call &&
+
-Use the following code to achieve the customization shown above.
-
-
-
- );
- };
-
- return (
- call &&
-
- {"End Call"}
-
-
-
- );
- };
-
- return (
- call &&
-
- {"End Call"}
-
- ](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.
-
-
-
-
-
-**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.
-
-