+
+
+
+---
+
+## Next Steps
+
+
+
-
- );
-}
-```
+const CallButtonDemo = () => {
+ const [chatUser, setChatUser] = useState(null);
+ useEffect(() => {
+ CometChat.getUser("uid").then((user) => {
+ setChatUser(user);
+ });
+ }, []);
+ return
-
- 
+
+---
+
+## Next Steps
+
+
@@ -23,7 +52,7 @@ The `Call Logs` is comprised of the following components:
### Integration
-
- );
-}
+const CallLogDemo = () => {
+ return
-
- 
+
-
-
+
```tsx
import { CometChatConversations } from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
const getOnItemClick = (conversation: CometChat.Conversation) => {
console.log("ItemClick:", conversation);
@@ -79,6 +112,20 @@ const getOnItemClick = (conversation: CometChat.Conversation) => {
+
+```jsx
+import { CometChatConversations } from "@cometchat/chat-uikit-react";
+
+const getOnItemClick = (conversation) => {
+ console.log("ItemClick:", conversation);
+ // Your custom action here
+};
+
+
+
***
@@ -88,12 +135,13 @@ const getOnItemClick = (conversation: CometChat.Conversation) => {
The `OnSelect` event is triggered upon the completion of a selection in `SelectionMode`. It does not have a default behavior. However, you can override its behavior using the following code snippet.
-
+
```tsx
import {
CometChatConversations,
SelectionMode,
} from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
const getOnSelect = (
conversation: CometChat.Conversation,
@@ -111,6 +159,26 @@ const getOnSelect = (
+
+```jsx
+import {
+ CometChatConversations,
+ SelectionMode,
+} from "@cometchat/chat-uikit-react";
+
+const getOnSelect = (conversation, selected) => {
+ console.log("Selected, ", conversation.getConversationId(), selected);
+ // Your custom action on select
+};
+
+
+
***
@@ -120,9 +188,10 @@ const getOnSelect = (
This action doesn't change the behavior of the component but rather listens for any errors that occur in the Conversations component.
-
+
```tsx
import { CometChatConversations } from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
const handleOnError = (error: CometChat.CometChatException) => {
// Your exception handling code
@@ -133,6 +202,19 @@ const handleOnError = (error: CometChat.CometChatException) => {
+
+```jsx
+import { CometChatConversations } from "@cometchat/chat-uikit-react";
+
+const handleOnError = (error) => {
+ // Your exception handling code
+};
+
+
+
***
@@ -142,7 +224,7 @@ const handleOnError = (error: CometChat.CometChatException) => {
The `onSearchBarClicked` event is triggered when the user clicks the search bar. It does not have a default behavior. However, you can override its behavior using the following code snippet.
-
+
```tsx
import { CometChatConversations } from "@cometchat/chat-uikit-react";
@@ -173,7 +255,7 @@ You can set filters using the following parameters.
6. **GroupTags:** Filters on specific Group `Tag`
-
+
```tsx
import { CometChatConversations } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
@@ -284,7 +366,7 @@ Using CSS you can customize the look and feel of the component in your app like
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
+
);
}
+
+export default ConversationsDemo;
```
@@ -65,9 +97,10 @@ export default function App() {
`OnItemClick` is triggered when you click on a ListItem of the Conversations component. The `OnItemClick` action doesn't have a predefined behavior. You can override this action using the following code snippet.
+
@@ -778,7 +860,7 @@ export default class DialogHelper {
-
+
```tsx
import ShortcutFormatter from "./ShortCutFormatter";
@@ -1166,3 +1248,23 @@ const getOptions = (conversation: CometChat.Conversation) => {
| **onClick** | Method to be invoked when user clicks on each option. |
***
+
+
+---
+
+## Next Steps
+
+
+
+ Display messages for a selected conversation
+
+
+ Display and manage user lists
+
+
+ Display and manage group lists
+
+
+ Customize colors, fonts, and styling
+
+
diff --git a/ui-kit/react/core-features.mdx b/ui-kit/react/core-features.mdx
index 78a6de7d..d3d1f145 100644
--- a/ui-kit/react/core-features.mdx
+++ b/ui-kit/react/core-features.mdx
@@ -1,11 +1,29 @@
---
title: "Core"
+description: "Overview of CometChat's core messaging features including instant messaging, media sharing, read receipts, and user presence."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+Key components for core features:
+- **Conversations** → [CometChatConversations](/ui-kit/react/conversations)
+- **Message List** → [CometChatMessageList](/ui-kit/react/message-list)
+- **Message Composer** → [CometChatMessageComposer](/ui-kit/react/message-composer)
+- **Message Header** → [CometChatMessageHeader](/ui-kit/react/message-header)
+- **Users** → [CometChatUsers](/ui-kit/react/users)
+- **Groups** → [CometChatGroups](/ui-kit/react/groups)
+
+
## Overview
The UI Kit comprises a variety of components, each designed to work seamlessly with one another to deliver a comprehensive and intuitive chat experience.
+
+**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) | [REST API](https://api-explorer.cometchat.com)
+
+
Here's how different UI Kit components work together to achieve CometChat's Core features:
## Instant Messaging
@@ -115,45 +133,40 @@ Mentions is a robust feature provided by CometChat that enhances the interactivi
| [Message Composer](/ui-kit/react/message-composer) | [Message Composer](/ui-kit/react/message-composer) is a component that allows users to craft and send various types of messages, including the usage of the mentions feature for direct addressing within the conversation. |
| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) is a component that displays a list of sent and received messages. It also supports the rendering of Mentions, enhancing the readability and interactivity of conversations. |
-## Quoted Reply
+## Threaded Conversations
-Quoted Reply is a robust feature provided by CometChat that enables users to quickly reply to specific messages by selecting the "Reply" option from a message's action menu. This enhances context, keeps conversations organized, and improves overall chat experience in both 1-1 and group chats.
+The Threaded Conversations feature enables users to respond directly to a specific message in a chat. This keeps conversations organized and enhances the user experience by maintaining context, especially in group chats.
- 
+ 
-| Components | Functionality |
-| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) supports replying to messages via the "Reply" option. Users can select "Reply" on a message to open the composer with the quoted reply pre-filled, maintaining context. |
-| [Message Composer](/ui-kit/react/message-composer) | [Message Composer](/ui-kit/react/message-composer) works seamlessly with Quoted Message by showing the quoted reply above the input field, letting users compose their response in proper context. |
+| Components | Functionality |
+| ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Threaded Message Preview](/ui-kit/react/threaded-message-preview) | [Threaded Message Preview](/ui-kit/react/threaded-message-preview) component displays the parent message along with the number of replies. |
-## Conversation and Advanced Search
+## Quoted Replies
-Conversation and Advanced Search is a powerful feature provided by CometChat that enables users to quickly find conversations, messages, and media across chats in real time. It supports filters, scopes, and custom actions, allowing users to locate content efficiently while keeping the chat experience smooth and intuitive.
+Quoted Replies is a robust feature provided by CometChat that enables users to quickly reply to specific messages by selecting the "Reply" option from a message's action menu. This enhances context, keeps conversations organized, and improves overall chat experience in both 1-1 and group chats.
- 
+
| Components | Functionality |
| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Search](/ui-kit/react/search) | [Search](/ui-kit/react/search) allows users to search across conversations and messages in real time. Users can click on a result to open the conversation or jump directly to a specific message. |
-| [Message Header](/ui-kit/react/message-header) | [Message Header](/ui-kit/react/message-header) shows the search button in the chat header, allowing users to search within a conversation. |
-| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) shows the selected message when clicked from search results and highlights it in the message list. |
-| [Conversations](/ui-kit/react/conversations) | [Conversations](/ui-kit/react/conversations) displays the search input. |
+| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) supports replying to messages via the "Reply" option. Users can select "Reply" on a message to open the composer with the quoted reply pre-filled, maintaining context. |
+| [Message Composer](/ui-kit/react/message-composer) | [Message Composer](/ui-kit/react/message-composer) 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 +202,37 @@ Learn more about how flagged messages are handled, reviewed, and moderated in th
| ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) provides the "Report Message" option in the message actions menu, allowing users to initiate the reporting process for inappropriate messages. |
-## Group Chat
+## Conversation and Advanced Search
-CometChat facilitates Group Chats, allowing users to have conversations with multiple participants simultaneously. This feature is crucial for team collaborations, group discussions, social communities, and more.
+Conversation and Advanced Search is a powerful feature provided by CometChat that enables users to quickly find conversations, messages, and media across chats in real time. It supports filters, scopes, and custom actions, allowing users to locate content efficiently while keeping the chat experience smooth and intuitive.
-
+
-For a comprehensive understanding and guide on implementing and using the Groups feature in CometChat, you should refer to our detailed guide on [Groups](/ui-kit/react/groups).
+| Components | Functionality |
+| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Search](/ui-kit/react/search) | [Search](/ui-kit/react/search) allows users to search across conversations and messages in real time. Users can click on a result to open the conversation or jump directly to a specific message. |
+| [Message Header](/ui-kit/react/message-header) | [Message Header](/ui-kit/react/message-header) shows the search button in the chat header, allowing users to search within a conversation. |
+| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) shows the selected message when clicked from search results and highlights it in the message list. |
+| [Conversations](/ui-kit/react/conversations) | [Conversations](/ui-kit/react/conversations) displays the search input. |
+
+
+---
+
+## Next Steps
+
+
+
+ Explore all available UI components
+
+
+ Add voice and video calling capabilities
+
+
+ Integrate AI-powered chat features
+
+
+ Customize colors, fonts, and styling
+
+
diff --git a/ui-kit/react/custom-text-formatter-guide.mdx b/ui-kit/react/custom-text-formatter-guide.mdx
index eadbdc93..21d90bbd 100644
--- a/ui-kit/react/custom-text-formatter-guide.mdx
+++ b/ui-kit/react/custom-text-formatter-guide.mdx
@@ -1,7 +1,36 @@
---
title: "Custom Text Formatter"
+description: "Guide to creating custom text formatters for CometChat using CometChatTextFormatter for message composer and text bubbles."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```tsx
+import { CometChatTextFormatter } from "@cometchat/chat-uikit-react";
+
+// Extend to create custom formatter
+class HashTagTextFormatter extends CometChatTextFormatter {
+ constructor() {
+ super();
+ this.setTrackingCharacter("#");
+ this.setRegexPatterns([/\B#(\w+)\b/g]);
+ }
+
+ getFormattedText(inputText: string) {
+ return inputText.replace(
+ /\B#(\w+)\b/g,
+ '#$1'
+ );
+ }
+}
+
+// Use in components
+
+
## Overview
You can create your custom text formatter for CometChat using the `CometChatTextFormatter`. `CometChatTextFormatter` is an abstract utility class that serves as a foundational structure for enabling text formatting in the message composer and text message bubbles. It can be extended to create custom formatter classes, tailored to suit specific application needs, making it a valuable tool for text customization and enhancement in chat interfaces.
@@ -433,4 +462,24 @@ registerEventListeners(element: HTMLElement, domTokenList: DOMTokenList) {
-
\ No newline at end of file
+
+
+
+---
+
+## Next Steps
+
+
+
+ Configure @mentions formatting
+
+
+ Customize link formatting
+
+
+ Customize the message input component
+
+
+ Display and customize message bubbles
+
+
diff --git a/ui-kit/react/events.mdx b/ui-kit/react/events.mdx
index 0ba3e00f..d0823402 100644
--- a/ui-kit/react/events.mdx
+++ b/ui-kit/react/events.mdx
@@ -1,7 +1,36 @@
---
title: "Events"
+description: "Reference for CometChat UI Kit events including conversation, user, group, message, and call events."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```tsx
+import {
+ CometChatMessageEvents,
+ CometChatConversationEvents,
+ CometChatCallEvents
+} from "@cometchat/chat-uikit-react";
+
+// Subscribe to events
+const subscription = CometChatMessageEvents.ccMessageSent.subscribe(
+ (message) => console.log("Message sent:", message)
+);
+
+// Unsubscribe when done
+subscription?.unsubscribe();
+```
+
+Key event categories:
+- **CometChatConversationEvents** → Conversation actions
+- **CometChatUserEvents** → User block/unblock
+- **CometChatGroupEvents** → Group management
+- **CometChatMessageEvents** → Message lifecycle
+- **CometChatCallEvents** → Call lifecycle
+
+
## Overview
Events allow for a decoupled, flexible architecture where different parts of the application can interact without having to directly reference each other. This makes it easier to create complex, interactive experiences, as well as to extend and customize the functionality provided by the CometChat UI Kit.
@@ -94,3 +123,23 @@ It consists of the following events:
| Name | Description |
| ------------------- | ---------------------------------------------------------------------------- |
| ccActiveChatChanged | This event is triggered when the user navigates to a particular chat window. |
+
+
+---
+
+## Next Steps
+
+
+
+ UI Kit initialization and login methods
+
+
+ Explore all available components
+
+
+ Display and manage conversation lists
+
+
+ Display messages in a conversation
+
+
diff --git a/ui-kit/react/extensions.mdx b/ui-kit/react/extensions.mdx
index 15f4332d..b7a57b77 100644
--- a/ui-kit/react/extensions.mdx
+++ b/ui-kit/react/extensions.mdx
@@ -1,29 +1,115 @@
---
title: "Extensions"
+description: "Overview of CometChat built-in extensions including stickers, polls, collaborative whiteboard, and more."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+Built-in extensions (enable via Dashboard):
+- **Bitly** → Shorten URLs in messages
+- **Link Preview** → URL summaries in Message List
+- **Message Shortcuts** → Predefined quick messages
+- **Pin Message** → Pin important messages
+- **Rich Media Preview** → Rich URL previews
+- **Save Message** → Bookmark messages
+- **Thumbnail Generation** → Image previews
+- **TinyURL** → URL shortening
+- **Voice Transcription** → Audio to text
+- **Giphy** → GIF sharing
+- **Message Translation** → Auto-translate messages
+- **Polls** → Group voting in Message Composer
+- **Stickers** → Fun expression in Message Composer
+- **Collaborative Whiteboard** → Real-time drawing
+- **Collaborative Document** → Shared document editing
+- **Disappearing Messages** → Auto-delete messages
+
+Extensions auto-integrate with UI Kit components after Dashboard activation.
+
+
## Overview
CometChat's UI Kit offers built-in support for various extensions, enriching the chatting experience with enhanced functionality. These extensions augment your chat application, making it more interactive, secure, and efficient.
+
+**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) | [Dashboard](/fundamentals/extensions-overview)
+
+
Activating extensions within CometChat is a straightforward process through your application's dashboard. For detailed instructions, refer to our guide on [Extensions](/fundamentals/extensions-overview).
Once you've enabled your desired extension in the dashboard, it seamlessly integrates into your CometChat application upon initialization and successful login. It's important to note that extension features will only be available if they are supported by the CometChat UI Kit.
-CometChat's UI Kit provides native support for 12 powerful extensions. This effortless integration enables you to enhance your chat application with engaging features without any additional coding. Simply enable the desired extensions from the CometChat Dashboard, and they will automatically enhance the relevant components of your application, providing a richer and more engaging experience for your users.
+CometChat's UI Kit provides native support for a wide range of powerful extensions. This effortless integration enables you to enhance your chat application with engaging features without any additional coding. Simply enable the desired extensions from the CometChat Dashboard, and they will automatically enhance the relevant components of your application, providing a richer and more engaging experience for your users.
## Built-in Extensions
Here's a guide on how you can enable and integrate these extensions:
-### Stickers
+### Bitly
-The Stickers extension allows users to express their emotions more creatively. It adds a much-needed fun element to the chat by allowing users to send various pre-designed stickers. For a comprehensive understanding and guide on implementing and using the Sticker Extension, refer to our specific guide on the [Sticker Extension](/fundamentals/stickers).
+The Bitly extension allows you to shorten long URLs in your text messages using Bitly's URL shortening service. For a comprehensive understanding and guide on implementing and using the Bitly Extension, refer to our specific guide on the [Bitly Extension](/fundamentals/bitly).
-Once you have successfully activated the [Sticker Extension](/fundamentals/stickers) from your CometChat Dashboard, the feature will automatically be incorporated into the [Message Composer](/ui-kit/react/message-composer) component of UI Kits.
+### Link Preview
+
+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).
+
+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.
- 
+ 
+
+
+### 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.
+
+
+ 
+
+
+### 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 Management
+
+The Avatars extension allows end-users to upload avatar images for their profiles directly within CometChat. For a comprehensive understanding and guide on implementing and using the Avatars Extension, refer to our specific guide on the [Avatars Extension](/fundamentals/avatars).
+
+### 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
@@ -36,6 +122,30 @@ Once you have successfully activated the [Polls Extension](/fundamentals/polls)
+### Reminders
+
+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).
+
+### 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.
+
+
+
+
+
+### 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 Whiteboard
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).
@@ -56,32 +166,37 @@ Once you have successfully activated the [Collaborative Document Extension](/fun
-### Message Translation
+## Security
-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).
+### Disappearing Messages
-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.
+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
-### Link Preview
+### Chatwoot
-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).
+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 [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.
+### Intercom
-
-
-
-
-### 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).
+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).
-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.
+---
-
-
-
+## Next Steps
+
+
+
+ Explore core messaging capabilities
+
+
+ Integrate AI-powered chat features
+
+
+ Customize the message input component
+
+
+ Display and customize message bubbles
+
+
diff --git a/ui-kit/react/group-members.mdx b/ui-kit/react/group-members.mdx
index ce7ec270..a9029ec7 100644
--- a/ui-kit/react/group-members.mdx
+++ b/ui-kit/react/group-members.mdx
@@ -1,7 +1,28 @@
---
title: "Group Members"
+description: "A component that displays all users added or invited to a group, with member management capabilities including scope changes, kick, and ban options."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```tsx
+import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
+
+// Minimal usage
+ console.log(member)}
+ selectionMode={SelectionMode.none}
+ hideUserStatus={false}
+/>
+```
+
+
## Overview
`CometChatGroupMembers` is a Component that displays all users added or invited to a group, granting them access to group discussions, shared content, and collaborative features. Group members can communicate in real-time via messaging, voice and video calls, and other activities. They can interact, share files, and join calls based on group permissions set by the administrator or owner.
@@ -10,6 +31,10 @@ title: "Group Members"
+
+**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) | [REST API](https://api-explorer.cometchat.com)
+
+
***
## Usage
@@ -19,7 +44,7 @@ title: "Group Members"
The following code snippet illustrates how you can directly incorporate the Group Members component into your Application.
-
+
```tsx
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
@@ -42,17 +67,25 @@ export default GroupMembersDemo;
-
-```tsx
-import { GroupMembersDemo } from "./GroupMembersDemo";
+
+```jsx
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
+import React, { useState, useEffect } from "react";
-export default function App() {
- return (
-
@@ -1461,3 +1494,20 @@ export default GroupMembersDemo;
***
+
+## Next Steps
+
+
+
+ Display and manage group lists
+
+
+ Add new members to groups
+
+
+ Manage banned group members
+
+
+ Display messages in a group
+
+
diff --git a/ui-kit/react/groups.mdx b/ui-kit/react/groups.mdx
index 27bd1cd6..df83c670 100644
--- a/ui-kit/react/groups.mdx
+++ b/ui-kit/react/groups.mdx
@@ -1,7 +1,28 @@
---
title: "Groups"
+description: "A component that displays a searchable list of all available groups with member counts and group icons."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```tsx
+import { CometChatGroups } from "@cometchat/chat-uikit-react";
+
+// Minimal usage
+ setSelectedGroup(group)}
+ hideGroupType={false}
+ selectionMode={SelectionMode.none}
+ showSearchBar={true}
+/>
+```
+
+
## Overview
The Groups is a Component, showcasing an accessible list of all available groups. It provides an integral search functionality, allowing you to locate any specific groups swiftly and easily. For each group listed, the group name is displayed by default, in conjunction with the group icon when available. Additionally, it provides a useful feature by displaying the number of members in each group as a subtitle, offering valuable context about group size and activity level.
@@ -10,6 +31,10 @@ The Groups is a Component, showcasing an accessible list of all available groups
+
+**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) | [REST API](https://api-explorer.cometchat.com)
+
+
The Groups component is composed of the following BaseComponents:
| Components | Description |
@@ -26,7 +51,7 @@ The Groups component is composed of the following BaseComponents:
The following code snippet illustrates how you can directly incorporate the Groups component into your Application.
-
+
```tsx
import { CometChatGroups } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -40,17 +65,16 @@ export default GroupsDemo;
-
-```tsx
-import { GroupsDemo } from "./GroupsDemo";
+
+```jsx
+import { CometChatGroups } from "@cometchat/chat-uikit-react";
+import React from "react";
-export default function App() {
- return (
-
@@ -1127,3 +1151,23 @@ export default GroupsDemo;
+
+
+---
+
+## Next Steps
+
+
+
+ Display and manage group members
+
+
+ Display and manage user lists
+
+
+ Display conversation lists
+
+
+ Display messages for a group
+
+
diff --git a/ui-kit/react/guide-block-unblock-user.mdx b/ui-kit/react/guide-block-unblock-user.mdx
index f758f45b..89ffa633 100644
--- a/ui-kit/react/guide-block-unblock-user.mdx
+++ b/ui-kit/react/guide-block-unblock-user.mdx
@@ -1,8 +1,34 @@
---
title: "Block/Unblock Users"
sidebarTitle: "Block/Unblock Users"
+description: "Learn how to implement user blocking functionality to prevent unwanted communication in your React chat app."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```tsx
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatUserEvents } from "@cometchat/chat-uikit-react";
+
+// Block a user
+CometChat.blockUsers([userId]).then(() => {
+ user.setBlockedByMe(true);
+ CometChatUserEvents.ccUserBlocked.next(user);
+});
+
+// Unblock a user
+CometChat.unblockUsers([userId]).then(() => {
+ user.setBlockedByMe(false);
+ CometChatUserEvents.ccUserUnblocked.next(user);
+});
+
+// Check if user is blocked
+const isBlocked = user.getBlockedByMe();
+```
+
+
Implement user blocking functionality to prevent unwanted communication in your React chat app.
## Overview
@@ -287,3 +313,21 @@ CometChat.blockUsers([UID]).then(
- Advanced Customization Guide
- Event Handling Documentation
+---
+
+## Next Steps
+
+
+
+ Display and manage user lists
+
+
+ Display conversation lists
+
+
+ Display messages in conversations
+
+
+ Handle UI Kit events
+
+
\ No newline at end of file
diff --git a/ui-kit/react/guide-call-log-details.mdx b/ui-kit/react/guide-call-log-details.mdx
index a029b601..560ce073 100644
--- a/ui-kit/react/guide-call-log-details.mdx
+++ b/ui-kit/react/guide-call-log-details.mdx
@@ -1,8 +1,30 @@
---
title: "Call Log Details"
sidebarTitle: "Call Log Details"
+description: "Learn how to display comprehensive call information and history when users select calls from the calls tab in your React chat app."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```tsx
+import { CometChatCallLogs } from "@cometchat/chat-uikit-react";
+
+// Display call logs with click handler
+ setSelectedCall(call)}
+/>
+
+// Custom call details component
+ setSelectedCall(undefined)}
+/>
+```
+
+
Display comprehensive call information and history when users select calls from the calls tab in your React chat app.
## Overview
@@ -303,3 +325,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
+
+
+
+ Display call history
+
+
+ Initiate voice and video calls
+
+
+ Handle incoming calls
+
+
+ Handle outgoing calls
+
+
diff --git a/ui-kit/react/guide-group-chat.mdx b/ui-kit/react/guide-group-chat.mdx
index b62e735e..97674a45 100644
--- a/ui-kit/react/guide-group-chat.mdx
+++ b/ui-kit/react/guide-group-chat.mdx
@@ -1,8 +1,37 @@
---
title: "Group Chat"
sidebarTitle: "Group Chat"
+description: "Learn how to implement comprehensive group management functionality including creation, joining, member management, and administrative controls in your React chat app."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```tsx
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import {
+ CometChatCreateGroup,
+ CometChatGroupMembers,
+ CometChatGroupEvents
+} from "@cometchat/chat-uikit-react";
+
+// Create a group
+const group = new CometChat.Group(guid, groupName, groupType, password);
+CometChat.createGroup(group).then((createdGroup) => {
+ CometChatGroupEvents.ccGroupCreated.next(createdGroup);
+});
+
+// Join a group
+CometChat.joinGroup(guid, groupType, password).then((joinedGroup) => {
+ CometChatGroupEvents.ccGroupMemberJoined.next({ joinedGroup, joinedUser });
+});
+
+// Display group members
+
+
Implement comprehensive group management functionality including creation, joining, member management, and administrative controls in your React chat app.
---
@@ -337,11 +366,19 @@ 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 group member lists
+
+
+ Display messages in groups
+
+
+ Handle group events
+
+
\ No newline at end of file
diff --git a/ui-kit/react/guide-message-privately.mdx b/ui-kit/react/guide-message-privately.mdx
index 1d0add7a..673a880a 100644
--- a/ui-kit/react/guide-message-privately.mdx
+++ b/ui-kit/react/guide-message-privately.mdx
@@ -1,8 +1,35 @@
---
title: "Message Privately"
sidebarTitle: "Message Privately"
+description: "Learn how to enable users to initiate private conversations with group members directly from group chat interfaces."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```tsx
+import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
+
+// Group members with private messaging option
+ startPrivateChatFromGroup(member, group)}
+ options={[{
+ id: "message_privately",
+ title: "Message Privately",
+ onClick: (member) => startPrivateChatFromGroup(member, group)
+ }]}
+/>
+
+// Start private chat from group context
+const startPrivateChatFromGroup = (user, group) => {
+ CometChat.getConversation(user.getUid(), "user")
+ .then((conversation) => setSelectedItem(conversation));
+};
+```
+
+
Enable users to initiate private conversations with group members directly from group chat interfaces.
## Overview
@@ -316,10 +343,19 @@ 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 group member lists
+
+
+ Display messages in conversations
+
+
+ Display and manage user lists
+
+
+ Display conversation lists
+
+
diff --git a/ui-kit/react/guide-new-chat.mdx b/ui-kit/react/guide-new-chat.mdx
index 54ee2e6b..27d0e5ad 100644
--- a/ui-kit/react/guide-new-chat.mdx
+++ b/ui-kit/react/guide-new-chat.mdx
@@ -1,8 +1,32 @@
---
title: "New Chat"
sidebarTitle: "New Chat"
+description: "Learn how to enable users to create new conversations with individual users or join existing groups in your React chat app."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```tsx
+import { CometChatUsers, CometChatGroups } from "@cometchat/chat-uikit-react";
+
+// User selection for new chat
+ {
+ setNewChat({ user });
+ setShowNewChat(false);
+ }}
+/>
+
+// Group selection for new chat
+ joinGroup(group)}
+/>
+```
+
+
Enable users to create new conversations with individual users or join existing groups in your React chat app.
## Overview
@@ -257,9 +281,19 @@ 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 user lists
+
+
+ Display and manage group lists
+
+
+ Display conversation lists
+
+
+ Display messages in conversations
+
+
diff --git a/ui-kit/react/guide-overview.mdx b/ui-kit/react/guide-overview.mdx
index 10ab044f..558865bc 100644
--- a/ui-kit/react/guide-overview.mdx
+++ b/ui-kit/react/guide-overview.mdx
@@ -1,7 +1,23 @@
---
title: "Overview"
sidebarTitle: "Overview"
+description: "Index of focused, task-oriented feature guides for the React UI Kit showing how to implement specific capabilities end-to-end."
---
+
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+This page indexes all feature implementation guides for the React UI Kit. Each guide provides step-by-step instructions for implementing specific chat capabilities including:
+- User blocking/unblocking
+- Call log details
+- Group management
+- Private messaging
+- Threaded messages
+- Message search
+- Text formatters
+
+
> 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
@@ -26,3 +42,21 @@ Use these guides after completing the base [Getting Started](/ui-kit/react/react
Need another guide? Open a request via our [Developer Community](http://community.cometchat.com/) or Support.
+---
+
+## Next Steps
+
+
+
+ Set up the React UI Kit
+
+
+ Explore all UI components
+
+
+ Customize themes and styling
+
+
+ Handle UI Kit events
+
+
\ No newline at end of file
diff --git a/ui-kit/react/guide-search-messages.mdx b/ui-kit/react/guide-search-messages.mdx
index 072126f4..efd2dda9 100644
--- a/ui-kit/react/guide-search-messages.mdx
+++ b/ui-kit/react/guide-search-messages.mdx
@@ -1,8 +1,37 @@
---
title: "Search Messages"
sidebarTitle: "Search Messages"
+description: "Learn how to enable users to search messages within conversations and group chats using CometChat's React UI Kit."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```tsx
+import { CometChatMessageList } from "@cometchat/chat-uikit-react";
+
+// Search messages with keyword
+
+
Enable users to search messages within conversations and group chats using CometChat's React UI Kit.
## Overview
@@ -178,9 +207,19 @@ 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
+
+
+
+ Display messages in conversations
+
+
+ Implement threaded conversations
+
+
+ Compose and send messages
+
+
+ Display conversation lists
+
+
diff --git a/ui-kit/react/guide-threaded-messages.mdx b/ui-kit/react/guide-threaded-messages.mdx
index 50c06c07..89131fc6 100644
--- a/ui-kit/react/guide-threaded-messages.mdx
+++ b/ui-kit/react/guide-threaded-messages.mdx
@@ -1,8 +1,34 @@
---
title: "Threaded Messages"
sidebarTitle: "Threaded Messages"
+description: "Learn how to enable organized threaded conversations within group chats using CometChat's React UI Kit."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```tsx
+import {
+ CometChatMessages,
+ CometChatThreadedMessages
+} from "@cometchat/chat-uikit-react";
+
+// Enable thread replies in messages
+ setThreadedMessage(message)}
+/>
+
+// Display threaded messages
+ setThreadedMessage(undefined)}
+/>
+```
+
+
Enable organized threaded conversations within group chats using CometChat's React UI Kit.
## Overview
@@ -211,5 +237,17 @@ 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)
+
+
+ Display messages in conversations
+
+
+ Display and manage group lists
+
+
+ Search messages in conversations
+
+
+ Compose and send messages
+
+
diff --git a/ui-kit/react/incoming-call.mdx b/ui-kit/react/incoming-call.mdx
index e55f9f37..cf85fa3a 100644
--- a/ui-kit/react/incoming-call.mdx
+++ b/ui-kit/react/incoming-call.mdx
@@ -1,7 +1,27 @@
---
title: "Incoming Call"
+description: "A component that displays incoming voice or video calls with options to accept or decline."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```tsx
+import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
+
+// Minimal usage
+ handleAccept()}
+ onDecline={() => handleDecline()}
+ disableSoundForCalls={false}
+/>
+```
+
+
## 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.
@@ -10,6 +30,10 @@ The `Incoming call` is a Component that serves as a visual representation when t
+
+**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview)
+
+
The `Incoming Call` is comprised of the following base components:
| Components | Description |
@@ -23,7 +47,7 @@ The `Incoming Call` is comprised of the following base components:
### Integration
-
+
```tsx
import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -37,19 +61,16 @@ export default IncomingCallsDemo;
-
-```tsx
-import { IncomingCallsDemo } from "./IncomingCallsDemo";
+
+```jsx
+import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
+import React from "react";
-export default function App() {
- return (
-
@@ -945,3 +966,22 @@ export default IncomingCallsDemo;
+
+---
+
+## Next Steps
+
+
+
+ Handle outgoing calls
+
+
+ Initiate voice and video calls
+
+
+ Display call history
+
+
+ Handle call events
+
+
diff --git a/ui-kit/react/localize.mdx b/ui-kit/react/localize.mdx
index 45f62ad5..ebca0112 100644
--- a/ui-kit/react/localize.mdx
+++ b/ui-kit/react/localize.mdx
@@ -1,8 +1,36 @@
---
title: "Localization"
sidebarTitle: "Localize"
+description: "Configure multi-language localization to adapt UI elements based on user's preferred language settings."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```tsx
+import { CometChatLocalize } from "@cometchat/chat-uikit-react";
+
+// Initialize localization
+CometChatLocalize.init({
+ language: "es",
+ fallbackLanguage: "en-US",
+ disableAutoDetection: false,
+});
+
+// Set language at runtime
+CometChatLocalize.setCurrentLanguage("fr");
+
+// Get localized string
+const text = CometChatLocalize.getLocalizedString("welcome_message");
+
+// Add custom translations
+CometChatLocalize.addTranslation({
+ "en-US": { "custom_key": "Custom Value" }
+});
+```
+
+
## **Overview**
React UI Kit provides **multi-language localization** to **adapt** the UI elements based on the user's preferred language settings. The **CometChatLocalize** class allows developers to:
@@ -391,4 +419,22 @@ To apply a **custom date format** only within a specific component.
/>
```
-***
\ No newline at end of file
+***
+
+
+## Next Steps
+
+
+
+ Customize UI appearance
+
+
+ Configure notification sounds
+
+
+ Explore all UI components
+
+
+ Set up the React UI Kit
+
+
diff --git a/ui-kit/react/mentions-formatter-guide.mdx b/ui-kit/react/mentions-formatter-guide.mdx
index f5e8d686..ba6ab274 100644
--- a/ui-kit/react/mentions-formatter-guide.mdx
+++ b/ui-kit/react/mentions-formatter-guide.mdx
@@ -1,7 +1,28 @@
---
title: "Mentions Formatter"
+description: "Learn how to format @mentions within text messages with customizable styles and click handling."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```tsx
+import { CometChatMentionsFormatter } from "@cometchat/chat-uikit-react";
+
+// Initialize the formatter
+const mentionsFormatter = new CometChatMentionsFormatter();
+mentionsFormatter.setCometChatUserGroupMembers(userList);
+
+// Apply formatter to message
+const formattedMessage = mentionsFormatter.getFormattedText(unformattedMessage);
+
+// Use in MessageComposer or MessageList
+
+
## 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 +69,23 @@ 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
+
+
+
+ Compose messages with mentions
+
+
+ Display messages with formatted mentions
+
+
+ Create custom text formatters
+
+
+ Format URLs in messages
+
+
diff --git a/ui-kit/react/message-composer.mdx b/ui-kit/react/message-composer.mdx
index 67249e00..c5883c20 100644
--- a/ui-kit/react/message-composer.mdx
+++ b/ui-kit/react/message-composer.mdx
@@ -1,7 +1,31 @@
---
title: "Message Composer"
+description: "A component that enables users to write and send text, media, and custom messages with attachments and editing support."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```tsx
+import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
+
+// For user chat
+ handleSend(message)}
+/>
+```
+
+
## Overview
MessageComposer is a Component that enables users to write and send a variety of messages, including text, image, video, and custom messages.
@@ -12,6 +36,10 @@ Features such as **Attachments**, and **Message Editing** are also supported by
+
+**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview)
+
+
## Usage
### Integration
@@ -19,7 +47,7 @@ Features such as **Attachments**, and **Message Editing** are also supported by
The following code snippet illustrates how you can directly incorporate the MessageComposer component into your app.
-
+
```tsx
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
@@ -43,18 +71,25 @@ export function MessageComposerDemo() {
-
-```tsx
-import { MessageComposerDemo } from "./MessageComposerDemo";
+
+```jsx
+import React from "react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
-export default function App() {
- return (
-
+
-| 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 +202,37 @@ Learn more about how flagged messages are handled, reviewed, and moderated in th
| ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) provides the "Report Message" option in the message actions menu, allowing users to initiate the reporting process for inappropriate messages. |
-## Group Chat
+## Conversation and Advanced Search
-CometChat facilitates Group Chats, allowing users to have conversations with multiple participants simultaneously. This feature is crucial for team collaborations, group discussions, social communities, and more.
+Conversation and Advanced Search is a powerful feature provided by CometChat that enables users to quickly find conversations, messages, and media across chats in real time. It supports filters, scopes, and custom actions, allowing users to locate content efficiently while keeping the chat experience smooth and intuitive.
-
+
-For a comprehensive understanding and guide on implementing and using the Groups feature in CometChat, you should refer to our detailed guide on [Groups](/ui-kit/react/groups).
+| Components | Functionality |
+| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Search](/ui-kit/react/search) | [Search](/ui-kit/react/search) allows users to search across conversations and messages in real time. Users can click on a result to open the conversation or jump directly to a specific message. |
+| [Message Header](/ui-kit/react/message-header) | [Message Header](/ui-kit/react/message-header) shows the search button in the chat header, allowing users to search within a conversation. |
+| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) shows the selected message when clicked from search results and highlights it in the message list. |
+| [Conversations](/ui-kit/react/conversations) | [Conversations](/ui-kit/react/conversations) displays the search input. |
+
+
+---
+
+## 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.
+
+
+
+
+
+### 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 Management
+
+The Avatars extension allows end-users to upload avatar images for their profiles directly within CometChat. For a comprehensive understanding and guide on implementing and using the Avatars Extension, refer to our specific guide on the [Avatars Extension](/fundamentals/avatars).
+
+### 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
@@ -36,6 +122,30 @@ Once you have successfully activated the [Polls Extension](/fundamentals/polls)
+### Reminders
+
+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).
+
+### 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.
+
+
+
+
+
+### 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 Whiteboard
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).
@@ -56,32 +166,37 @@ Once you have successfully activated the [Collaborative Document Extension](/fun
-### Message Translation
+## Security
-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).
+### Disappearing Messages
-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.
+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
-### Link Preview
+### Chatwoot
-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).
+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 [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.
+### Intercom
-
-
-
-
-### 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).
+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).
-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.
+---
-
-
-
+## Next Steps
+
+
+
-
- );
-}
+const GroupMembersDemo = () => {
+ const [chatGroup, setChatGroup] = useState(null);
+
+ useEffect(() => {
+ CometChat.getGroup("guid").then((group) => {
+ setChatGroup(group);
+ });
+ }, []);
+
+ return <>{chatGroup &&
+
-
- );
-}
+const GroupsDemo = () => {
+ return
+
-
- );
-}
+const IncomingCallsDemo = () => {
+ return
-
-
+
-
-
+
```tsx
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
@@ -100,6 +135,35 @@ export function MessageComposerDemo() {
+
+```jsx
+import React from "react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
+
+export function MessageComposerDemo() {
+ const [chatUser, setChatUser] = React.useState(null);
+
+ React.useEffect(() => {
+ CometChat.getUser("uid").then((user) => {
+ setChatUser(user);
+ });
+ }, []);
+
+ function handleSendButtonClick(message) {
+ console.log("your custom on send buttonclick action");
+ }
+
+ return chatUser ? (
+
+
##### 2. onError
@@ -920,3 +984,23 @@ export function MessageComposerDemo() {
***
+
+
+---
+
+## Next Steps
+
+
+
+ Display messages in a conversation
+
+
+ Customize message bubble appearance
+
+
+ Display conversation header with user/group info
+
+
+ Enable @mentions in messages
+
+
diff --git a/ui-kit/react/message-header.mdx b/ui-kit/react/message-header.mdx
index 28d7d0c8..c9858318 100644
--- a/ui-kit/react/message-header.mdx
+++ b/ui-kit/react/message-header.mdx
@@ -1,7 +1,31 @@
---
title: "Message Header"
+description: "A component that displays user or group details in the toolbar with typing indicator and back navigation."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```tsx
+import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
+
+// For user chat
+ handleBack()}
+ hideUserStatus={false}
+/>
+```
+
+
## Overview
`MessageHeader` is a Component that showcases the [User](/sdk/javascript/users-overview) or [Group](/sdk/javascript/groups-overview) details in the toolbar. Furthermore, it also presents a typing indicator and a back navigation button for ease of use.
@@ -10,6 +34,10 @@ title: "Message Header"
+
+**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview)
+
+
The `MessageHeader` is comprised of the following components:
| Component | Description |
@@ -22,7 +50,7 @@ The `MessageHeader` is comprised of the following components:
### Integration
-
+
```tsx
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
@@ -44,18 +72,23 @@ export function MessageHeaderDemo() {
-
-```tsx
-import { MessageHeaderDemo } from "./MessageHeaderDemo";
+
+```jsx
+import React, { useState, useEffect } from "react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
-export default function App() {
- return (
-
+
+ Display messages in a conversation
+
+
+ Add message input and sending capabilities
+
+
+ Enable threaded message conversations
+
+
+ Handle real-time chat events
+
+
diff --git a/ui-kit/react/message-list.mdx b/ui-kit/react/message-list.mdx
index e2300b1d..cd71c3fc 100644
--- a/ui-kit/react/message-list.mdx
+++ b/ui-kit/react/message-list.mdx
@@ -1,7 +1,31 @@
---
title: "Message List"
+description: "A component that displays messages in a conversation with real-time updates, reactions, threads, and customization options."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```tsx
+import { CometChatMessageList } from "@cometchat/chat-uikit-react";
+
+// For user chat
+ openThread(message)}
+/>
+```
+
+
## Overview
`MessageList` is a composite component that displays a list of messages and effectively manages real-time operations. It includes various types of messages such as Text Messages, Media Messages, Stickers, and more.
@@ -10,6 +34,10 @@ title: "Message List"
+
+**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview)
+
+
***
## Usage
@@ -19,7 +47,7 @@ title: "Message List"
The following code snippet illustrates how you can directly incorporate the MessageList component into your Application.
-
+
```tsx
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
@@ -43,18 +71,25 @@ export function MessageListDemo() {
-
-```tsx
-import { MessageListDemo } from "./MessageListDemo";
+
+```jsx
+import React from "react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatMessageList } from "@cometchat/chat-uikit-react";
-export default function App() {
- return (
-
-
+export function MessageComposerDemo() {
+ const [chatUser, setChatUser] = React.useState(null);
+ React.useEffect(() => {
+ CometChat.getUser("uid").then((user) => {
+ setChatUser(user);
+ });
+ }, []);
+
+ return chatUser ? (
+
+
- );
+ ) : null;
}
```
@@ -71,7 +106,7 @@ export default function App() {
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.
+
+ ) : null;
+}
+```
+
+
+
-
- );
+export function MessageHeaderDemo() {
+ const [chatUser, setChatUser] = useState(null);
+ useEffect(() => {
+ CometChat.getUser("uid").then((user) => {
+ setChatUser(user);
+ });
+ }, []);
+
+ return chatUser ? (
+
-
- {chatUser &&
+ ) : null;
}
```
@@ -702,4 +735,21 @@ function getDateFormat() {
-***
+---
+
+## Next Steps
+
+
+
-
+
+ Add message input and sending capabilities
+
+
+ Display conversation header with user/group info
+
+
+ Customize message bubble appearance and behavior
+
+
+ Enable threaded message conversations
+
+
diff --git a/ui-kit/react/message-template.mdx b/ui-kit/react/message-template.mdx
index 7659b728..ac43cc2b 100644
--- a/ui-kit/react/message-template.mdx
+++ b/ui-kit/react/message-template.mdx
@@ -1,7 +1,39 @@
---
title: "Message Template"
+description: "A blueprint for defining and customizing message bubble structure, appearance, and behavior in the chat interface."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```tsx
+import { CometChatUIKit, CometChatMessageTemplate, CometChatUIKitConstants } from "@cometchat/chat-uikit-react";
+
+// Get all existing templates
+const templates = CometChatUIKit.getDataSource().getAllMessageTemplates();
+
+// Customize a specific template (e.g., text messages)
+templates.forEach((template) => {
+ if (template.type === CometChatUIKitConstants.MessageTypes.text) {
+ template.headerView = (message) =>
+
## Overview
MessageTemplate provides you with the capability to define and customize both the structure and the behavior of the Message Bubble. It acts as a schema or design blueprint for the creation of a variety of Message Bubble components, allowing you to manage the appearance and interactions of Message Bubble within your application effectively and consistently.
@@ -1933,3 +1965,22 @@ export { CustomMessageTemplate };
+
+---
+
+## Next Steps
+
+
+
+ Display messages using custom templates
+
+
+ Add message input and sending capabilities
+
+
+ Create custom text formatting rules
+
+
+ Customize colors, fonts, and styling
+
+
diff --git a/ui-kit/react/methods.mdx b/ui-kit/react/methods.mdx
index 0be19fef..c783062e 100644
--- a/ui-kit/react/methods.mdx
+++ b/ui-kit/react/methods.mdx
@@ -1,7 +1,37 @@
---
title: "Methods"
+description: "Reference documentation for CometChatUIKit methods including init, login, logout, and message sending."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```javascript
+import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";
+
+// Init
+const UIKitSettings = new UIKitSettingsBuilder()
+ .setAppId("APP_ID")
+ .setRegion("REGION")
+ .setAuthKey("AUTH_KEY")
+ .build();
+CometChatUIKit.init(UIKitSettings);
+
+// Login
+CometChatUIKit.login("UID");
+
+// Login with Auth Token (production)
+CometChatUIKit.loginWithAuthToken("AUTH_TOKEN");
+
+// Logout
+CometChatUIKit.logout();
+
+// Get logged in user
+CometChatUIKit.getLoggedinUser();
+```
+
+
## 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.
@@ -10,6 +40,14 @@ To effectively manage and synchronize the UI elements and data across all compon
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.
+
+You must call `CometChatUIKit.init(UIKitSettings)` before rendering any UI Kit components or calling any SDK methods. Initialization must complete before login.
+
+
+
+**Auth Key** is for development/testing only. In production, generate **Auth Tokens** on your server using the REST API and pass them to the client. 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.
@@ -578,3 +616,23 @@ CometChatUIKit.sendCustomMessage(customMessage)
+
+
+---
+
+## Next Steps
+
+
+
+ Subscribe to real-time chat events
+
+
+ Explore all available UI components
+
+
+ Learn about messaging capabilities
+
+
+ Customize colors, fonts, and styling
+
+
diff --git a/ui-kit/react/next-conversation.mdx b/ui-kit/react/next-conversation.mdx
index 1d8800f6..2a88a54a 100644
--- a/ui-kit/react/next-conversation.mdx
+++ b/ui-kit/react/next-conversation.mdx
@@ -1,8 +1,42 @@
---
title: "Building A Conversation List + Message View"
sidebarTitle: "Conversation List + Message View"
+description: "Build a two-panel chat interface with conversation list sidebar and message view for Next.js applications."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```tsx
+import {
+ CometChatConversations,
+ CometChatMessageHeader,
+ CometChatMessageList,
+ CometChatMessageComposer
+} from "@cometchat/chat-uikit-react";
+
+// Two-panel layout: Sidebar + Message View
+
+
The **Conversation List + Message View** layout offers a seamless **two-panel chat interface**, commonly used in modern messaging applications like **WhatsApp Web, Slack, and Microsoft Teams**.
This design enables users to switch between conversations effortlessly while keeping the chat window open, ensuring a **smooth, real-time messaging experience**.
diff --git a/ui-kit/react/next-js-integration.mdx b/ui-kit/react/next-js-integration.mdx
index 0d4c40aa..8d1a8d59 100644
--- a/ui-kit/react/next-js-integration.mdx
+++ b/ui-kit/react/next-js-integration.mdx
@@ -1,10 +1,48 @@
---
title: "Getting Started With CometChat React UI Kit For Next.js"
sidebarTitle: "Integration"
+description: "Step-by-step guide to integrate CometChat UI Kit into your Next.js application with SSR-compatible chat components."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```bash
+# Install
+npm install @cometchat/chat-uikit-react
+```
+
+```tsx
+// Client-side only - use 'use client' directive or dynamic import
+import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";
+
+// Initialize
+const UIKitSettings = new UIKitSettingsBuilder()
+ .setAppId("APP_ID")
+ .setRegion("REGION")
+ .setAuthKey("AUTH_KEY")
+ .build();
+
+CometChatUIKit.init(UIKitSettings);
+
+// Login
+CometChatUIKit.login("UID");
+
+// Render components (client-side only)
+import { CometChatConversations, CometChatMessageList, CometChatMessageComposer } from "@cometchat/chat-uikit-react";
+```
+
+- **Next.js Conversation** → [Conversation List + Message](/ui-kit/react/next-conversation)
+- **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.
{/*
diff --git a/ui-kit/react/next-one-to-one-chat.mdx b/ui-kit/react/next-one-to-one-chat.mdx
index 6b9ca33f..cc4a4410 100644
--- a/ui-kit/react/next-one-to-one-chat.mdx
+++ b/ui-kit/react/next-one-to-one-chat.mdx
@@ -1,8 +1,31 @@
---
title: "Building A One To One/Group Chat Experience"
sidebarTitle: "One To One/Group Chat"
+description: "Build a focused direct messaging interface for one-to-one or group chat in Next.js applications."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```tsx
+import { CometChatMessageHeader, CometChatMessageList, CometChatMessageComposer } from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+
+// Fetch user for one-to-one chat
+const user = await CometChat.getUser("cometchat-uid-1");
+
+// Render chat components (client-side only)
+
+
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)
diff --git a/ui-kit/react/next-tab-based-chat.mdx b/ui-kit/react/next-tab-based-chat.mdx
index 91f61a65..f9a9d32c 100644
--- a/ui-kit/react/next-tab-based-chat.mdx
+++ b/ui-kit/react/next-tab-based-chat.mdx
@@ -1,8 +1,47 @@
---
title: "Building A Messaging UI With Tabs, Sidebar, And Message View"
sidebarTitle: "Tab Based Chat Experience"
+description: "Build a tab-based messaging UI with navigation between Chats, Calls, Users, and Groups in Next.js applications."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```tsx
+import {
+ CometChatConversations,
+ CometChatCallLogs,
+ CometChatUsers,
+ CometChatGroups,
+ CometChatMessageHeader,
+ CometChatMessageList,
+ CometChatMessageComposer
+} from "@cometchat/chat-uikit-react";
+
+// Tab-based layout with sidebar and message view
+
+
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)
diff --git a/ui-kit/react/outgoing-call.mdx b/ui-kit/react/outgoing-call.mdx
index 89413847..8feccc55 100644
--- a/ui-kit/react/outgoing-call.mdx
+++ b/ui-kit/react/outgoing-call.mdx
@@ -1,9 +1,39 @@
---
title: "Outgoing Call"
+description: "A component that displays outgoing voice or video calls with options to cancel and view call status."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```tsx
+import { CometChatOutgoingCall, CometChatUIKitConstants } from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+
+// Initiate a call
+const callObject = new CometChat.Call(
+ "uid",
+ CometChatUIKitConstants.MessageTypes.audio,
+ CometChatUIKitConstants.MessageReceiverType.user
+);
+const call = await CometChat.initiateCall(callObject);
+
+// Render outgoing call component
+ handleCancel()}
+ disableSoundForCalls={false}
+/>
+```
+
+
## Overview
+
+**Available via:** [UI Kits](https://www.cometchat.com/docs/ui-kit/react/overview) | [SDK](https://www.cometchat.com/docs/sdk/javascript/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.
@@ -1026,3 +1056,22 @@ export default OutgoingCallDemo;
+
+---
+
+## Next Steps
+
+
+
+ Handle incoming voice and video calls with accept/reject options.
+
+
+ Display call history with details like duration and participants.
+
+
+ Add voice and video call buttons to initiate calls.
+
+
+ Customize colors, fonts, and styling to match your brand.
+
+
diff --git a/ui-kit/react/overview.mdx b/ui-kit/react/overview.mdx
index 42b82d98..edceb87b 100644
--- a/ui-kit/react/overview.mdx
+++ b/ui-kit/react/overview.mdx
@@ -1,10 +1,61 @@
---
title: "CometChat UI Kit For React"
sidebarTitle: "Overview"
+description: "A powerful React UI Kit with prebuilt, customizable chat components for rapid integration of messaging and calling features."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```bash
+# Install
+npm install @cometchat/chat-uikit-react
+```
+
+```tsx
+import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";
+
+// Initialize
+const UIKitSettings = new UIKitSettingsBuilder()
+ .setAppId("APP_ID")
+ .setRegion("REGION")
+ .setAuthKey("AUTH_KEY")
+ .build();
+
+CometChatUIKit.init(UIKitSettings);
+
+// Login
+CometChatUIKit.login("UID");
+
+// Key Components
+import { CometChatConversations } from "@cometchat/chat-uikit-react";
+ console.log(conversation)} />
+
+import { CometChatMessageList, CometChatMessageComposer } from "@cometchat/chat-uikit-react";
+
+
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.
+
+You must call `CometChatUIKit.init(UIKitSettings)` before rendering any UI Kit components or calling any SDK methods. Initialization must complete before login.
+
+
+
+**Auth Key** is for development/testing only. In production, generate **Auth Tokens** on your server using the REST API and pass them to the client. Never expose Auth Keys in production client code.
+
+
+
+**Server-Side Rendering (SSR):** CometChat UI Kit requires browser APIs (`window`, `WebSocket`, `document`). For Next.js or other SSR frameworks, ensure components render only on the client side. See the [Next.js Integration](/ui-kit/react/next-js-integration) guide.
+
+
***
## **Why Choose CometChat UI Kit?**
@@ -156,21 +207,24 @@ 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.
+## **Next Steps**
+
+
+
+ Get started with React.js setup and configuration
+
+
+ Integrate with Next.js and SSR support
+
+
+ Explore all available UI components
+
+
+ Customize colors, fonts, and styling
+
+
-***
+---
## **Helpful Resources**
@@ -212,3 +266,22 @@ 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 guide to integrate CometChat in your React app
+
+
+ Explore all available UI components and their capabilities
+
+
+ Learn about messaging, conversations, and user management
+
+
+ Customize colors, fonts, and styling to match your brand
+
+
diff --git a/ui-kit/react/property-changes.mdx b/ui-kit/react/property-changes.mdx
index 3358b3d1..6325c67b 100644
--- a/ui-kit/react/property-changes.mdx
+++ b/ui-kit/react/property-changes.mdx
@@ -1,7 +1,33 @@
---
title: "Property Changes"
+description: "Reference guide for property changes, new additions, and removed properties when upgrading to React UI Kit v6."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+Key changes in v6:
+- **Date/Time formatting**: `datePattern` replaced with `CalendarObject`-based props
+- **Conversations**: Use `lastMessageDateTimeFormat` instead of `datePattern`
+- **Message List**: Use `separatorDateTimeFormat`, `stickyDateTimeFormat`, `messageSentAtDateTimeFormat`
+- **Call Logs**: Use `callInitiatedDateTimeFormat` instead of `datePattern`
+- **Localization**: `setLocale` → `setCurrentLanguage`, `localize` → `getLocalizedString`
+
+```tsx
+import { CalendarObject } from "@cometchat/chat-uikit-react";
+
+// New date formatting approach
+
+
## Conversations
### New Properties
@@ -92,3 +118,22 @@ 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
+
+
+
+ Complete migration guide with step-by-step instructions for upgrading.
+
+
+ Configure language settings and translations in your app.
+
+
+ Customize colors, fonts, and styling to match your brand.
+
+
+ Explore all available UI components and their properties.
+
+
diff --git a/ui-kit/react/react-conversation.mdx b/ui-kit/react/react-conversation.mdx
index 03ab256f..ad11afdf 100644
--- a/ui-kit/react/react-conversation.mdx
+++ b/ui-kit/react/react-conversation.mdx
@@ -1,8 +1,31 @@
---
title: "Building A Conversation List + Message View"
sidebarTitle: "Conversation List + Message View"
+description: "Build a two-panel chat interface with conversation list sidebar and message view, similar to WhatsApp Web, Slack, and Microsoft Teams."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```tsx
+import { CometChatConversations, CometChatMessageHeader, CometChatMessageList, CometChatMessageComposer } from "@cometchat/chat-uikit-react";
+
+// Sidebar - Conversation List
+ setActiveChat(conversation)} />
+
+// Message View
+
+
The **Conversation List + Message View** layout offers a seamless **two-panel chat interface**, commonly used in modern messaging applications like **WhatsApp Web, Slack, and Microsoft Teams**.
This design enables users to switch between conversations effortlessly while keeping the chat window open, ensuring a **smooth, real-time messaging experience**.
@@ -388,8 +411,19 @@ npm start
## **Next Steps**
-### **Enhance the User Experience**
-
-* **[Advanced Customizations](/ui-kit/react/theme)** – Personalize the chat UI to align with your brand.
+
+
+ Build a focused direct messaging experience
+
+
+ Create a multi-tab navigation interface
+
+
+ Customize colors, fonts, and styling
+
+
+ Explore all available UI components
+
+
-***
+---
diff --git a/ui-kit/react/react-js-integration.mdx b/ui-kit/react/react-js-integration.mdx
index 55d43393..b8518cd6 100644
--- a/ui-kit/react/react-js-integration.mdx
+++ b/ui-kit/react/react-js-integration.mdx
@@ -1,8 +1,40 @@
---
title: "Getting Started With CometChat React UI Kit"
sidebarTitle: "Integration"
+description: "Step-by-step guide to integrate CometChat React UI Kit with prebuilt components, theming options, and support for one-to-one and group conversations."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```bash
+# Install
+npm install @cometchat/chat-uikit-react
+```
+
+```tsx
+import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";
+import "@cometchat/chat-uikit-react/css-variables.css";
+
+// 1. Initialize
+const UIKitSettings = new UIKitSettingsBuilder()
+ .setAppId("APP_ID")
+ .setRegion("REGION")
+ .setAuthKey("AUTH_KEY")
+ .subscribePresenceForAllUsers()
+ .build();
+
+await CometChatUIKit.init(UIKitSettings);
+
+// 2. Login
+await CometChatUIKit.login("cometchat-uid-1");
+
+// 3. Render component
+ console.log(conversation)} />
+```
+
+
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,6 +202,14 @@ 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
@@ -495,9 +535,19 @@ import { CometChatFrameProvider } from "@cometchat/ui-kit";
Now that you’ve selected your **chat experience**, proceed to the **integration guide**:
-* **[Integrate Conversation List + Message](/ui-kit/react/react-conversation)**
-* **[Integrate One-to-One Chat](/ui-kit/react/react-one-to-one-chat)**
-* **[Integrate Tab-Based Chat](/ui-kit/react/react-tab-based-chat)**
-* **[Advanced Customizations](/ui-kit/react/theme)**
+
+
+ Build a two-panel layout with sidebar and message view
+
+
+ Create a focused direct messaging experience
+
+
+ Build a multi-tab navigation interface
+
+
+ Customize themes, colors, and styling
+
+
-***
+---
diff --git a/ui-kit/react/react-one-to-one-chat.mdx b/ui-kit/react/react-one-to-one-chat.mdx
index bdb37e0f..ee8fc6f6 100644
--- a/ui-kit/react/react-one-to-one-chat.mdx
+++ b/ui-kit/react/react-one-to-one-chat.mdx
@@ -1,8 +1,35 @@
---
title: "Building A One To One/Group Chat Experience"
sidebarTitle: "One To One/Group Chat"
+description: "Build a focused direct messaging interface for one-to-one or group chat, ideal for support chats, dating apps, and private messaging platforms."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```tsx
+import { CometChatMessageHeader, CometChatMessageList, CometChatMessageComposer } from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+
+// Fetch user for one-to-one chat
+const user = await CometChat.getUser("cometchat-uid-1");
+
+// Or fetch group for group chat
+const group = await CometChat.getGroup("GUID");
+
+// Render chat components
+
+
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/react-one-on-one)
@@ -204,8 +231,19 @@ npm start
## **Next Steps**
-### **Enhance the User Experience**
+
+
+ Build a two-panel layout with sidebar and message view
+
+
+ Create a multi-tab navigation interface
+
+
+ Customize colors, fonts, and styling
+
+
+ Learn about message list customization
+
+
-* **[Advanced Customizations](/ui-kit/react/theme)** – Personalize the chat UI to align with your brand.
-
-***
+---
diff --git a/ui-kit/react/react-router-conversation.mdx b/ui-kit/react/react-router-conversation.mdx
index 8b90fa5f..a9c2ebad 100644
--- a/ui-kit/react/react-router-conversation.mdx
+++ b/ui-kit/react/react-router-conversation.mdx
@@ -1,8 +1,42 @@
---
title: "Building A Conversation List + Message View"
sidebarTitle: "Conversation List + Message View"
+description: "Build a two-panel chat interface with conversation list sidebar and message view for React Router applications."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```tsx
+import {
+ CometChatConversations,
+ CometChatMessageHeader,
+ CometChatMessageList,
+ CometChatMessageComposer
+} from "@cometchat/chat-uikit-react";
+
+// Two-panel layout: Sidebar + Message View
+
+
The **Conversation List + Message View** layout offers a seamless **two-panel chat interface**, commonly used in modern messaging applications like **WhatsApp Web, Slack, and Microsoft Teams**.
This design enables users to switch between conversations effortlessly while keeping the chat window open, ensuring a **smooth, real-time messaging experience**.
@@ -465,10 +499,19 @@ a {
***
-## **Next Steps**
-
-### **Enhance the User Experience**
-
-* **[Advanced Customizations](/ui-kit/react/theme)** – Personalize the chat UI to align with your brand.
-
-***
+## Next Steps
+
+
+
+ Build a focused direct messaging experience without a sidebar.
+
+
+ Create a multi-feature navigation with chats, calls, and settings.
+
+
+ Personalize the chat UI to align with your brand.
+
+
+ Explore all available UI components and their properties.
+
+
diff --git a/ui-kit/react/react-router-integration.mdx b/ui-kit/react/react-router-integration.mdx
index af243243..f5eb250a 100644
--- a/ui-kit/react/react-router-integration.mdx
+++ b/ui-kit/react/react-router-integration.mdx
@@ -1,8 +1,44 @@
---
title: "Getting Started With CometChat React UI Kit For React Router"
sidebarTitle: "Integration"
+description: "Step-by-step guide to integrate CometChat React UI Kit with React Router for building chat applications."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```bash
+# Install
+npm install @cometchat/chat-uikit-react
+```
+
+```tsx
+import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";
+import "@cometchat/chat-uikit-react/css-variables.css";
+
+// Initialize
+const UIKitSettings = new UIKitSettingsBuilder()
+ .setAppId("APP_ID")
+ .setRegion("REGION")
+ .setAuthKey("AUTH_KEY")
+ .subscribePresenceForAllUsers()
+ .build();
+
+await CometChatUIKit.init(UIKitSettings);
+
+// Login
+await CometChatUIKit.login("cometchat-uid-1");
+
+// Render (disable SSR for CometChat components)
+ console.log(conversation)} />
+```
+
+- **Conversation List + Message** → [Conversation View](/ui-kit/react/react-router-conversation)
+- **One-to-One Chat** → [One-to-One Chat](/ui-kit/react/react-router-one-to-one-chat)
+- **Tab-Based Chat** → [Tab-Based Chat](/ui-kit/react/react-router-tab-based-chat)
+
+
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.
diff --git a/ui-kit/react/react-router-one-to-one-chat.mdx b/ui-kit/react/react-router-one-to-one-chat.mdx
index adfd5664..5433bd0c 100644
--- a/ui-kit/react/react-router-one-to-one-chat.mdx
+++ b/ui-kit/react/react-router-one-to-one-chat.mdx
@@ -1,8 +1,33 @@
---
title: "Building A One To One/Group Chat Experience"
sidebarTitle: "One To One/Group Chat"
+description: "Build a focused direct messaging interface for support chats, dating apps, and private messaging in React Router applications."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```tsx
+import {
+ CometChatMessageHeader,
+ CometChatMessageList,
+ CometChatMessageComposer
+} from "@cometchat/chat-uikit-react";
+
+// One-to-One Chat Layout
+
+
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**.
***
@@ -335,10 +360,19 @@ a {
***
-## **Next Steps**
-
-### **Enhance the User Experience**
-
-* **[Advanced Customizations](/ui-kit/react/theme)** – Personalize the chat UI to align with your brand.
-
-***
+## Next Steps
+
+
+
+ Build a two-panel layout with sidebar and message view.
+
+
+ Create a multi-feature navigation with chats, calls, and settings.
+
+
+ Personalize the chat UI to align with your brand.
+
+
+ Explore all available UI components and their properties.
+
+
diff --git a/ui-kit/react/react-router-tab-based-chat.mdx b/ui-kit/react/react-router-tab-based-chat.mdx
index aae298cf..13e7c102 100644
--- a/ui-kit/react/react-router-tab-based-chat.mdx
+++ b/ui-kit/react/react-router-tab-based-chat.mdx
@@ -1,8 +1,28 @@
---
title: "Building A Messaging UI With Tabs, Sidebar, And Message View"
sidebarTitle: "Tab Based Chat Experience"
+description: "Build a tab-based messaging UI with sections for Chats, Calls, Users, and Groups using React Router and CometChat UIKit."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```tsx
+import { CometChatConversations, CometChatCallLogs, CometChatUsers, CometChatGroups } from "@cometchat/chat-uikit-react";
+
+// Tab-based navigation components
+ handleSelect(conversation)} /> // Chats tab
+ handleSelect(call)} /> // Calls tab
+ handleSelect(user)} /> // Users tab
+ handleSelect(group)} /> // Groups tab
+```
+
+- **React Router Integration** → [Getting Started](/ui-kit/react/react-router-integration)
+- **Conversation List + Message** → [Conversation View](/ui-kit/react/react-router-conversation)
+- **One-to-One Chat** → [One-to-One Chat](/ui-kit/react/react-router-one-to-one-chat)
+
+
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.
***
@@ -705,10 +725,19 @@ a {
***
-## **Next Steps**
-
-### **Enhance the User Experience**
-
-* **[Advanced Customizations](/ui-kit/react/theme)** – Personalize the chat UI to align with your brand.
-
-***
+## Next Steps
+
+
+
+ Build a two-panel layout with sidebar and message view.
+
+
+ Create a focused direct messaging experience.
+
+
+ Personalize the chat UI to align with your brand.
+
+
+ Learn about call logs customization.
+
+
diff --git a/ui-kit/react/react-tab-based-chat.mdx b/ui-kit/react/react-tab-based-chat.mdx
index ae4a0ce2..c63e0573 100644
--- a/ui-kit/react/react-tab-based-chat.mdx
+++ b/ui-kit/react/react-tab-based-chat.mdx
@@ -1,8 +1,30 @@
---
title: "Building A Messaging UI With Tabs, Sidebar, And Message View"
sidebarTitle: "Tab Based Chat Experience"
+description: "Build a tab-based messaging UI with sections for Chats, Calls, Users, and Groups using React and CometChat UIKit."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```tsx
+import { CometChatConversations, CometChatCallLogs, CometChatUsers, CometChatGroups } from "@cometchat/chat-uikit-react";
+
+// Tab-based navigation components
+ handleSelect(conversation)} /> // Chats tab
+ handleSelect(call)} /> // Calls tab
+ handleSelect(user)} /> // Users tab
+ handleSelect(group)} /> // Groups tab
+```
+
+Key components:
+- **CometChatConversations** → [Conversations](/ui-kit/react/conversations)
+- **CometChatCallLogs** → [Call Logs](/ui-kit/react/call-logs)
+- **CometChatUsers** → [Users](/ui-kit/react/users)
+- **CometChatGroups** → [Groups](/ui-kit/react/groups)
+
+
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/react-tabs-sidebar-message)
@@ -479,8 +501,19 @@ npm start
## **Next Steps**
-### **Enhance the User Experience**
-
-* **[Advanced Customizations](/ui-kit/react/theme)** – Personalize the chat UI to align with your brand.
+
+
+ Build a two-panel layout with sidebar and message view
+
+
+ Create a focused direct messaging experience
+
+
+ Customize colors, fonts, and styling
+
+
+ Learn about call logs customization
+
+
-***
+---
diff --git a/ui-kit/react/search.mdx b/ui-kit/react/search.mdx
index 02879766..11cd54a9 100644
--- a/ui-kit/react/search.mdx
+++ b/ui-kit/react/search.mdx
@@ -1,9 +1,33 @@
---
title: "Search"
+description: "A powerful search component that allows users to search across conversations and messages in real time with filters and customization options."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```tsx
+import { CometChatSearch } from "@cometchat/chat-uikit-react";
+
+// Minimal usage
+ openConversation(conversation)}
+ onMessageClicked={(message) => goToMessage(message)}
+ searchFilters={[CometChatSearchFilter.Messages, CometChatSearchFilter.Photos]}
+/>
+```
+
+
## Overview
+
+**Available via:** [UI Kits](https://www.cometchat.com/docs/ui-kit/react/overview)
+
+
The `CometChatSearch` component is a powerful and customizable search interface that allows users to search across conversations and messages in real time. It supports a wide variety of filters, scopes, and customization options. `CometChatSearch` helps users find messages, conversations, media, and more through an intuitive and filterable search experience. It can be embedded in multiple contexts — as part of the conversation list, message header, or as a full-screen search experience.
## Usage
@@ -799,3 +823,22 @@ function getDateFormat() {
#### Text Formatters
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.
+
+---
+
+## Next Steps
+
+
+
+ Display and manage conversation lists with search.
+
+
+ Display messages with real-time updates.
+
+
+ Compose and send messages with attachments.
+
+
+ Customize colors, fonts, and styling.
+
+
diff --git a/ui-kit/react/shortcut-formatter-guide.mdx b/ui-kit/react/shortcut-formatter-guide.mdx
index b6c5d381..33487620 100644
--- a/ui-kit/react/shortcut-formatter-guide.mdx
+++ b/ui-kit/react/shortcut-formatter-guide.mdx
@@ -1,7 +1,32 @@
---
title: "ShortCut Formatter"
+description: "A guide to implementing shortcut extensions in CometChat using the ShortCutFormatter class for handling message shortcuts."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```tsx
+import { CometChatTextFormatter } from "@cometchat/chat-uikit-react";
+import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
+
+// Create custom shortcut formatter
+class ShortcutFormatter extends CometChatTextFormatter {
+ constructor() {
+ super();
+ this.setTrackingCharacter("!");
+ }
+}
+
+// Use in Message Composer
+
+
## Overview
The `ShortCutFormatter` class extends the [CometChatTextFormatter](/ui-kit/react/custom-text-formatter-guide) class to provide a mechanism for handling shortcuts within messages. This guide will walk you through the process of using `ShortCutFormatter` to implement shortcut extensions in your CometChat application.
@@ -270,4 +295,21 @@ import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
-***
+---
+
+## Next Steps
+
+
+
+ Learn the base class for creating custom formatters.
+
+
+ Implement @mentions in your chat application.
+
+
+ Auto-detect and format URLs as clickable links.
+
+
+ Integrate formatters with the message composer.
+
+
diff --git a/ui-kit/react/sound-manager.mdx b/ui-kit/react/sound-manager.mdx
index d0b5f0c2..b90e7de7 100644
--- a/ui-kit/react/sound-manager.mdx
+++ b/ui-kit/react/sound-manager.mdx
@@ -1,7 +1,26 @@
---
title: "Sound Manager"
+description: "A helper class for managing and playing audio sounds for incoming and outgoing calls in CometChat UI Kit."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```tsx
+import { CometChatSoundManager, Sound } from "@cometchat/chat-uikit-react";
+
+// Play default sound for incoming call
+CometChatSoundManager.play(Sound.incomingCall);
+
+// Play custom sound
+CometChatSoundManager.play(Sound.incomingCall, "path/to/custom-sound.mp3");
+
+// Pause currently playing sound
+CometChatSoundManager.pause();
+```
+
+
## Overview
The SoundManager is a helper class responsible for managing and playing various types of audio in the CometChat UI Kit. This includes sound events for incoming and outgoing calls.
@@ -60,3 +79,22 @@ CometChatSoundManager.pause();
By using the CometChatSoundManager, you can enhance the user experience in your chat application by integrating audible cues for chat interactions.
+
+---
+
+## Next Steps
+
+
+
+ Customize colors, fonts, and styling.
+
+
+ Configure language settings and translations.
+
+
+ Handle incoming voice and video calls.
+
+
+ Manage outgoing call UI and sounds.
+
+
diff --git a/ui-kit/react/theme.mdx b/ui-kit/react/theme.mdx
index 98f16428..72640cae 100644
--- a/ui-kit/react/theme.mdx
+++ b/ui-kit/react/theme.mdx
@@ -1,8 +1,30 @@
---
title: "Customizing UI With Theming"
sidebarTitle: "Overview"
+description: "Customize the look and feel of CometChat UI Kit using CSS variables for colors, fonts, and styling."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```css
+/* Import base stylesheet */
+@import url("@cometchat/chat-uikit-react/css-variables.css");
+
+/* Override CSS variables */
+:root {
+ --cometchat-font-family: "Inter", sans-serif;
+ --cometchat-primary-color: #6852D6;
+ --cometchat-background-color-01: #FFFFFF;
+ --cometchat-text-color-primary: #141414;
+}
+```
+
+- **Color Resources** → [Color Variables](/ui-kit/react/theme/color-resources)
+- **Message Bubble Styling** → [Bubble Customization](/ui-kit/react/theme/message-bubble-styling)
+
+
Theming allows you to define the **look and feel** of your app by adjusting **colors, fonts, and other styles**. Using **CSS variables**, you can create a consistent and **on-brand** chat experience.
***
@@ -224,3 +246,23 @@ Access the Figma UI Kit for a fully integrated color palette and seamless custom
+
+
+---
+
+## Next Steps
+
+
+
+ Complete list of CSS color variables
+
+
+ Customize message bubble appearance
+
+
+ Customize text and date formats
+
+
+ Customize notification sounds
+
+
diff --git a/ui-kit/react/theme/color-resources.mdx b/ui-kit/react/theme/color-resources.mdx
index d52c5779..d018c45e 100644
--- a/ui-kit/react/theme/color-resources.mdx
+++ b/ui-kit/react/theme/color-resources.mdx
@@ -1,26 +1,49 @@
---
title: "Color Resources"
+description: "Complete reference of CSS color variables available in CometChat UI Kit for light and dark mode theming."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```css
+/* Primary brand color */
+--cometchat-primary-color: #6852d6;
+
+/* Extended primary palette (light mode) */
+--cometchat-extended-primary-color-50: #f9f8fd; /* Lightest */
+--cometchat-extended-primary-color-500: #aa9ee8; /* Mid */
+--cometchat-extended-primary-color-900: #5d49be; /* Darkest */
+```
+
+- Override these in `.cometchat {}` or `:root {}` to rebrand the entire UI
+- **Theming Overview** → [Theming](/ui-kit/react/theme)
+- **Message Bubble Styling** → [Bubble Customization](/ui-kit/react/theme/message-bubble-styling)
+- **Source on GitHub** → [css-variables.css](https://github.com/cometchat/cometchat-uikit-react/blob/v6/src/styles/css-variables.css#L198-L419)
+
+
## Introduction
-The **Chat UI Kit** features a carefully crafted **color palette** designed for a **consistent and visually appealing** user experience. It follows the **Block, Element, Modifier (BEM)** methodology, ensuring **scalable styling** and easy **customization** by overriding the Kit’s CSS variables.
+The Chat UI Kit features a carefully crafted color palette designed for a consistent and visually appealing user experience. It follows the Block, Element, Modifier (BEM) methodology, ensuring scalable styling and easy customization by overriding the Kit's CSS variables.
***
## Color Palette
-The **primary color** defines key actions, branding, and UI elements, while the **extended primary palette** provides variations for supporting components.
+The primary color defines key actions, branding, and UI elements, while the extended primary palette provides variations for supporting components.
-### **Primary Color**
+### Primary Color
-#### **Light Mode**
+#### Light Mode
-```python
+
+
+```css
--cometchat-primary-color: #6852d6;
--cometchat-extended-primary-color-50: #f9f8fd;
--cometchat-extended-primary-color-100: #edeafa;
@@ -33,16 +56,20 @@ The **primary color** defines key actions, branding, and UI elements, while the
--cometchat-extended-primary-color-800: #7965db;
--cometchat-extended-primary-color-900: #5d49be;
```
+
+
***
-#### **Dark Mode**
+#### Dark Mode
-```python
+
+
+```css
--cometchat-primary-color: #6852d6;
--cometchat-extended-primary-color-50: #15102b;
--cometchat-extended-primary-color-100: #1d173c;
@@ -55,17 +82,54 @@ The **primary color** defines key actions, branding, and UI elements, while the
--cometchat-extended-primary-color-800: #5745b4;
--cometchat-extended-primary-color-900: #7460d9;
```
+
+
-### **Extended Primary Colors**
+### Extended Primary Colors
-#### **Light Mode**
+#### Light Mode
-#### **Dark Mode**
+#### Dark Mode
+
+***
+
+
+
+- Always override CSS variables within the `.cometchat` scope to avoid leaking styles to other parts of your app.
+- When customizing for dark mode, use `@media (prefers-color-scheme: dark)` or the `[data-theme="dark"]` attribute to scope your overrides.
+- Use the extended primary palette shades for hover states, backgrounds, and subtle accents rather than creating new colors.
+- Test color contrast ratios to ensure text remains readable against custom background colors.
+
+
+- **Colors not changing?** Make sure you've imported the base stylesheet first: `@import url("@cometchat/chat-uikit-react/css-variables.css");`
+- **Dark mode colors showing in light mode?** Check that your dark mode overrides are properly scoped inside a media query or data-theme selector.
+- **Inconsistent colors across components?** Use the extended primary palette variables instead of hardcoded hex values to maintain consistency.
+
+
+
+---
+
+## Next Steps
+
+
+
+ Global theming with CSS variables
+
+
+ Customize message bubble appearance
+
+
+ Customize text and date formats
+
+
+ Customize notification sounds
+
+
diff --git a/ui-kit/react/theme/message-bubble-styling.mdx b/ui-kit/react/theme/message-bubble-styling.mdx
index d95f2a1c..0a4a42fb 100644
--- a/ui-kit/react/theme/message-bubble-styling.mdx
+++ b/ui-kit/react/theme/message-bubble-styling.mdx
@@ -1,14 +1,34 @@
---
title: "Message Bubble Styling"
+description: "Customize the appearance of incoming and outgoing message bubbles in CometChat UI Kit using CSS variables and class overrides."
---
-## Introduction
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
-We offer customizable message bubble styling to enhance user experience and match your app’s design. With distinct classes for incoming and outgoing messages, you can easily define colors, borders, and other styles. Each message type, from text to multimedia, has predefined classes for default styling, and developers can further customize using CSS.
+```css
+/* Outgoing bubble color */
+.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body {
+ --cometchat-primary-color: #f76808;
+}
+
+/* Incoming bubble color */
+.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body {
+ --cometchat-neutral-color-300: #f76808;
+}
+```
+
+- **CSS Variable Classes**: Target `.cometchat-message-bubble-outgoing` or `.cometchat-message-bubble-incoming` with `.cometchat-message-bubble__body`
+- **Message type modifiers**: `.cometchat-message-bubble__text-message`, `.cometchat-message-bubble__image-message`, `.cometchat-message-bubble__video-message`, etc.
+- **Parent theme page** → [Theming Overview](/ui-kit/react/theme)
+
+
+We offer customizable message bubble styling to enhance user experience and match your app's design. With distinct classes for incoming and outgoing messages, you can easily define colors, borders, and other styles. Each message type, from text to multimedia, has predefined classes for default styling, and developers can further customize using CSS.
## Incoming & Outgoing Messages
-Incoming and outgoing messages have different styling by default, allowing users to visually separate their own messages from others’. Here, we show both the default view and examples of customizations for these message bubbles.
+Incoming and outgoing messages have different styling by default, allowing users to visually separate their own messages from others'. Here, we show both the default view and examples of customizations for these message bubbles.
Shown below is the default chat interface.
@@ -30,12 +50,16 @@ The customized chat interface is displayed below.
Use the following code to achieve the customization shown above.
-```css app.css
+
+
+```css
.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body {
--cometchat-primary-color: #f76808;
--cometchat-extended-primary-color-900: #fbaa75;
}
```
+
+
***
@@ -49,11 +73,15 @@ The customized chat interface is displayed below.
Use the following code to achieve the customization shown above.
-```css app.css
+
+
+```css
.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body {
--cometchat-neutral-color-300: #f76808;
}
```
+
+
***
@@ -67,19 +95,23 @@ The customized chat interface is displayed below.
Use the following code to achieve the customization shown above.
-```css app.css
+
+
+```css
.cometchat .cometchat-message-bubble .cometchat-message-bubble__body {
--cometchat-neutral-color-300: #f76808;
--cometchat-primary-color: #f76808;
--cometchat-extended-primary-color-900: #fbaa75;
}
```
+
+
***
## Message Types
-CometChat UI Kit includes classes for various message types. Below are examples of default & customised views for each message type, along with the relevant CSS code snippets so that you can quickly up to the mark with CSS customization.
+CometChat UI Kit includes classes for various message types. Below are examples of default & customised views for each message type, along with the relevant CSS code snippets so that you can quickly get up to speed with CSS customization.
***
@@ -99,8 +131,9 @@ The customized chat interface is displayed below.
Use the following code to achieve the customization shown above.
-```css App.css
-
+
+
+```css
/* Outgoing Text Message Bubble */
.cometchat
.cometchat-message-bubble-outgoing
@@ -115,6 +148,8 @@ Use the following code to achieve the customization shown above.
--cometchat-neutral-color-300: #feede1;
}
```
+
+
***
@@ -134,8 +169,9 @@ The customized chat interface is displayed below.
Use the following code to achieve the customization shown above.
-```css App.css
-
+
+
+```css
/* Outgoing Image Message Bubble */
.cometchat
.cometchat-message-bubble-outgoing
@@ -150,6 +186,8 @@ Use the following code to achieve the customization shown above.
--cometchat-neutral-color-300: #feede1;
}
```
+
+
***
@@ -169,8 +207,9 @@ The customized chat interface is displayed below.
Use the following code to achieve the customization shown above.
-```css App.css
-
+
+
+```css
/* Outgoing Video Message Bubble */
.cometchat
.cometchat-message-bubble-outgoing
@@ -185,6 +224,8 @@ Use the following code to achieve the customization shown above.
--cometchat-neutral-color-300: #feede1;
}
```
+
+
***
@@ -204,8 +245,9 @@ The customized chat interface is displayed below.
Use the following code to achieve the customization shown above.
-```css App.css
-
+
+
+```css
/* Outgoing Audio Message Bubble */
.cometchat
.cometchat-message-bubble-outgoing
@@ -221,6 +263,8 @@ Use the following code to achieve the customization shown above.
--cometchat-neutral-color-300: #feede1;
}
```
+
+
***
@@ -240,8 +284,9 @@ The customized chat interface is displayed below.
Use the following code to achieve the customization shown above.
-```css App.css
-
+
+
+```css
/* Outgoing File Message Bubble */
.cometchat
.cometchat-message-bubble-outgoing
@@ -257,6 +302,8 @@ Use the following code to achieve the customization shown above.
--cometchat-neutral-color-300: #feede1;
}
```
+
+
***
@@ -276,8 +323,9 @@ The customized chat interface is displayed below.
Use the following code to achieve the customization shown above.
-```css App.css
-
+
+
+```css
/* Outgoing Delete Bubble */
.cometchat
.cometchat-message-bubble-outgoing
@@ -292,6 +340,8 @@ Use the following code to achieve the customization shown above.
--cometchat-neutral-color-300: #feede1;
}
```
+
+
***
@@ -311,8 +361,9 @@ The customized chat interface is displayed below.
Use the following code to achieve the customization shown above.
-```css App.css
-
+
+
+```css
.cometchat .cometchat-message-bubble__body .cometchat-action-bubble {
--cometchat-primary-color: #f76808;
background-color: #feede1;
@@ -321,6 +372,8 @@ Use the following code to achieve the customization shown above.
--cometchat-border-color-default: #f76808;
}
```
+
+
***
@@ -340,8 +393,9 @@ The customized chat interface is displayed below.
Use the following code to achieve the customization shown above.
-```css App.css
-
+
+
+```css
/* Outgoing Direct Call Message Bubble */
.cometchat
.cometchat-message-bubble-outgoing
@@ -358,6 +412,8 @@ Use the following code to achieve the customization shown above.
--cometchat-neutral-color-300: #feede1;
}
```
+
+
***
@@ -377,8 +433,9 @@ The customized chat interface is displayed below.
Use the following code to achieve the customization shown above.
-```css App.css
-
+
+
+```css
.cometchat .cometchat-message-bubble__body .cometchat-action-bubble {
--cometchat-primary-color: #f76808;
background-color: #feede1;
@@ -387,6 +444,8 @@ Use the following code to achieve the customization shown above.
--cometchat-border-color-default: #f76808;
}
```
+
+
***
@@ -408,8 +467,9 @@ The customized chat interface is displayed below.
Use the following code to achieve the customization shown above.
-```css App.css
-
+
+
+```css
/* Outgoing Collaborative Whiteboard Bubble */
.cometchat
.cometchat-message-bubble-outgoing
@@ -426,6 +486,8 @@ Use the following code to achieve the customization shown above.
--cometchat-neutral-color-300: #feede1;
}
```
+
+
***
@@ -445,8 +507,9 @@ The customized chat interface is displayed below.
Use the following code to achieve the customization shown above.
-```css App.css
-
+
+
+```css
/* Outgoing Collaborative Document Bubble */
.cometchat
.cometchat-message-bubble-outgoing
@@ -463,6 +526,8 @@ Use the following code to achieve the customization shown above.
--cometchat-neutral-color-300: #feede1;
}
```
+
+
***
@@ -482,8 +547,9 @@ The customized chat interface is displayed below.
Use the following code to achieve the customization shown above.
-```css App.css
-
+
+
+```css
/* Outgoing Poll Message Bubble */
.cometchat
.cometchat-message-bubble-outgoing
@@ -500,6 +566,8 @@ Use the following code to achieve the customization shown above.
--cometchat-neutral-color-300: #feede1;
}
```
+
+
***
@@ -519,8 +587,9 @@ The customized chat interface is displayed below.
Use the following code to achieve the customization shown above.
-```css App.css
-
+
+
+```css
/* Outgoing Sticker Bubble */
.cometchat
.cometchat-message-bubble-outgoing
@@ -535,6 +604,8 @@ Use the following code to achieve the customization shown above.
--cometchat-neutral-color-300: #feede1;
}
```
+
+
***
@@ -554,8 +625,9 @@ The customized chat interface is displayed below.
Use the following code to achieve the customization shown above.
-```css App.css
-
+
+
+```css
/* Outgoing Link Preview Bubble */
.cometchat
.cometchat-message-bubble-outgoing
@@ -572,5 +644,42 @@ Use the following code to achieve the customization shown above.
--cometchat-neutral-color-300: #feede1;
}
```
+
+
***
+
+
+
+- Use CSS variables instead of direct property overrides for consistent theming across light and dark modes.
+- Target specific message types using their BEM modifier classes (e.g., `.cometchat-message-bubble__text-message`) rather than broad selectors.
+- Keep outgoing and incoming bubble styles visually distinct so users can easily differentiate their own messages.
+- Test customizations in both light and dark themes to ensure readability and contrast.
+- Use the `.cometchat` parent selector to scope your overrides and avoid conflicts with other styles.
+
+
+- **Styles not applying?** Ensure your CSS is loaded after the CometChat stylesheet. Check selector specificity — your overrides must match or exceed the specificity of the default styles.
+- **Only one direction styled?** Make sure you're targeting both `.cometchat-message-bubble-outgoing` and `.cometchat-message-bubble-incoming` if you want to style both.
+- **Dark mode looks wrong?** Wrap dark mode overrides in `@media (prefers-color-scheme: dark)` or use the `[data-theme="dark"]` attribute selector.
+- **Extension bubbles not styled?** Extension message types (polls, whiteboard, etc.) use their own modifier classes — check you're using the correct class name.
+
+
+
+---
+
+## Next Steps
+
+
+
+ Global theming with CSS variables
+
+
+ Complete list of CSS color variables
+
+
+ Customize text and date formats
+
+
+ Customize message rendering logic
+
+
diff --git a/ui-kit/react/thread-header.mdx b/ui-kit/react/thread-header.mdx
index 9f4cf327..56282a4d 100644
--- a/ui-kit/react/thread-header.mdx
+++ b/ui-kit/react/thread-header.mdx
@@ -1,9 +1,33 @@
---
title: "Thread Header"
+description: "A component that displays the parent message and reply count for threaded conversations."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```tsx
+import { CometChatThreadHeader } from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+
+// Get parent message
+const message = await CometChat.getMessageDetails("messageId");
+
+// Render thread header
+ handleClose()}
+/>
+```
+
+
## Overview
+
+**Available via:** [UI Kits](https://www.cometchat.com/docs/ui-kit/react/overview) | [SDK](https://www.cometchat.com/docs/sdk/javascript/overview)
+
+
CometChatThreadHeader is a Component that displays the parent message & number of replies of thread.
@@ -349,4 +373,21 @@ function getDateFormat() {
-***
+---
+
+## Next Steps
+
+
+
+ Display messages with threading support.
+
+
+ Display conversation header with user/group info.
+
+
+ Complete guide to implementing threaded messages.
+
+
+ Customize colors, fonts, and styling.
+
+
diff --git a/ui-kit/react/upgrading-from-v5.mdx b/ui-kit/react/upgrading-from-v5.mdx
index c8308a80..c25b19ae 100644
--- a/ui-kit/react/upgrading-from-v5.mdx
+++ b/ui-kit/react/upgrading-from-v5.mdx
@@ -1,7 +1,29 @@
---
title: "Upgrading From V5"
+description: "Migration guide for upgrading from CometChat v5 to v6 React UI Kit with updated localization, date formatting, and API changes."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+Key changes in v6:
+- **Initialization**: `init(language, resources)` → `init(settings: LocalizationSettings)`
+- **Language codes**: `en` → `en-US`, `en-GB`
+- **Add translations**: Use `addTranslation()` method
+- **Date formatting**: New `CalendarObject` support
+- **Missing keys**: New `missingKeyHandler` callback
+
+```tsx
+// v6 initialization
+CometChatLocalize.init({
+ language: "en-US",
+ translationsForLanguage: { "en-US": { conversation_chat_title: "Chats" } },
+ calendarObject: new CalendarObject({ today: "hh:mm A" }),
+});
+```
+
+
## Introduction
The **CometChat v6 React UI Kit** introduces a **revamped localization system** with enhanced support for **language management, date formatting, and missing key handling**. This guide outlines the key differences and provides a **step-by-step migration process** from **v5 to v6**.
@@ -151,3 +173,22 @@ In CometChat v6 UI Kit, the language codes have been expanded to distinguish bet
## Properties & Methods
In CometChat v6 UI Kit, several props and methods in components and the CometChatLocalize class have been updated. For a detailed overview of newly added, renamed, and removed properties/methods, refer to the [Property Changes](/ui-kit/react/property-changes) Documentation.
+
+---
+
+## Next Steps
+
+
+
+ Detailed list of property changes in v6.
+
+
+ Configure language settings and translations.
+
+
+ Customize colors, fonts, and styling.
+
+
+ Explore all available UI components.
+
+
diff --git a/ui-kit/react/url-formatter-guide.mdx b/ui-kit/react/url-formatter-guide.mdx
index 0707d3b0..c5123d74 100644
--- a/ui-kit/react/url-formatter-guide.mdx
+++ b/ui-kit/react/url-formatter-guide.mdx
@@ -1,7 +1,31 @@
---
title: "URL Formatter"
+description: "A specialized formatter that automatically detects URLs in text messages and converts them into clickable links."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```tsx
+import { CometChatTextFormatter } from "@cometchat/chat-uikit-react";
+
+// Create URL formatter extending CometChatTextFormatter
+class CometChatUrlsFormatter extends CometChatTextFormatter {
+ constructor(regexPatterns) {
+ super();
+ this.setRegexPatterns(regexPatterns);
+ }
+}
+
+// Usage
+const urlFormatter = new CometChatUrlsFormatter([/(https?:\/\/[^\s]+)/g]);
+```
+
+- **Custom Text Formatter** → [CometChatTextFormatter](/ui-kit/react/custom-text-formatter-guide)
+- **Message List** → [CometChatMessageList](/ui-kit/react/message-list)
+
+
## Overview
`CometChatUrlsFormatter` is a specialized subclass of `CometChatTextFormatter` designed to automatically detect URLs in text messages and convert them into clickable links, allowing users to navigate to the web addresses effortlessly within your CometChat application.
@@ -83,3 +107,23 @@ onUrlClick(event) {
window.open(url, '_blank');
}
```
+
+---
+
+## Next Steps
+
+
+
+ Learn the base class for creating custom formatters.
+
+
+ Implement @mentions in your chat application.
+
+
+ Create keyboard shortcuts for quick text insertion.
+
+
+ Display messages with formatted URLs.
+
+
+```
diff --git a/ui-kit/react/users.mdx b/ui-kit/react/users.mdx
index ff44ce47..0a849363 100644
--- a/ui-kit/react/users.mdx
+++ b/ui-kit/react/users.mdx
@@ -1,7 +1,28 @@
---
title: "Users"
+description: "A component that displays a searchable list of all available users with online/offline status indicators."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```tsx
+import { CometChatUsers } from "@cometchat/chat-uikit-react";
+
+// Minimal usage
+ setSelectedUser(user)}
+ hideUserStatus={false}
+ selectionMode={SelectionMode.none}
+ showSearchBar={true}
+/>
+```
+
+
## Overview
The Users is a Component, showcasing an accessible list of all available users. It provides an integral search functionality, allowing you to locate any specific user swiftly and easily. For each user listed, the widget displays the user's name by default, in conjunction with their avatar when available. Furthermore, it includes a status indicator, visually informing you whether a user is currently online or offline.
@@ -10,6 +31,10 @@ The Users is a Component, showcasing an accessible list of all available users.
+
+**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) | [REST API](https://api-explorer.cometchat.com)
+
+
The Users component is composed of the following BaseComponents:
| Components | Description |
@@ -26,7 +51,7 @@ The Users component is composed of the following BaseComponents:
The following code snippet illustrates how you can directly incorporate the Users component into your Application.
-
+
```tsx
import { CometChatUsers } from "@cometchat/chat-uikit-react";
@@ -39,21 +64,6 @@ export default UsersDemo;
-
-```tsx
-import { UsersDemo } from "./UsersDemo";
-
-export default function App() {
- return (
-
-
### Actions
@@ -67,7 +77,7 @@ The `onSelect` action is activated when you select the done icon while in select
This action does not come with any predefined behavior. However, you have the flexibility to override this event and tailor it to suit your needs using the following code snippet.
-
+
```ts
import { CometChatUsers, SelectionMode } from "@cometchat/chat-uikit-react";
@@ -1128,3 +1138,23 @@ export default UsersDemo;
+
+
+---
+
+## Next Steps
+
+
+
+ Display and manage group lists
+
+
+ Display members of a group
+
+
+ Display conversation lists
+
+
+ Display messages for a user
+
+
-
+export function MessageListDemo() {
+ const [chatUser, setChatUser] = React.useState(null);
+ React.useEffect(() => {
+ CometChat.getUser("uid").then((user) => {
+ setChatUser(user);
+ });
+ }, []);
+
+ return chatUser ? (
+
+
- );
+ ) : null;
}
```
@@ -1583,3 +1618,23 @@ export function MessageListDemo() {
***
+
+
+---
+
+## Next Steps
+
+
+ {/* Sidebar */}
+ setActiveChat(conversation)}
+ />
+
+ {/* Message View */}
+
+```
+
+- **Next.js Integration** → [Getting Started](/ui-kit/react/next-js-integration)
+- **One-to-One Chat** → [One-to-One Chat](/ui-kit/react/next-one-to-one-chat)
+- **Tab-Based Chat** → [Tab-Based Chat](/ui-kit/react/next-tab-based-chat)
+
+
+](https://link.cometchat.com/next-one-on-one)
diff --git a/ui-kit/react/next-tab-based-chat.mdx b/ui-kit/react/next-tab-based-chat.mdx
index 91f61a65..f9a9d32c 100644
--- a/ui-kit/react/next-tab-based-chat.mdx
+++ b/ui-kit/react/next-tab-based-chat.mdx
@@ -1,8 +1,47 @@
---
title: "Building A Messaging UI With Tabs, Sidebar, And Message View"
sidebarTitle: "Tab Based Chat Experience"
+description: "Build a tab-based messaging UI with navigation between Chats, Calls, Users, and Groups in Next.js applications."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+ {/* Tab Navigation */}
+
+```
+
+- **Next.js Integration** → [Getting Started](/ui-kit/react/next-js-integration)
+- **Conversation List + Message** → [Conversation View](/ui-kit/react/next-conversation)
+- **One-to-One Chat** → [One-to-One Chat](/ui-kit/react/next-one-to-one-chat)
+](https://link.cometchat.com/next-tabs-sidebar-message)
diff --git a/ui-kit/react/outgoing-call.mdx b/ui-kit/react/outgoing-call.mdx
index 89413847..8feccc55 100644
--- a/ui-kit/react/outgoing-call.mdx
+++ b/ui-kit/react/outgoing-call.mdx
@@ -1,9 +1,39 @@
---
title: "Outgoing Call"
+description: "A component that displays outgoing voice or video calls with options to cancel and view call status."
---
+{/* TL;DR for Agents and Quick Reference */}
+](https://link.cometchat.com/react-one-on-one)
@@ -204,8 +231,19 @@ npm start
## **Next Steps**
-### **Enhance the User Experience**
+
+ {/* Sidebar */}
+ setActiveChat(conversation)}
+ />
+
+ {/* Message View */}
+
+```
+
+- **React Router Integration** → [Getting Started](/ui-kit/react/react-router-integration)
+- **One-to-One Chat** → [One-to-One Chat](/ui-kit/react/react-router-one-to-one-chat)
+- **Tab-Based Chat** → [Tab-Based Chat](/ui-kit/react/react-router-tab-based-chat)
+
+
+
+
+```
+
+- **React Router Integration** → [Getting Started](/ui-kit/react/react-router-integration)
+- **Conversation List + Message** → [Conversation View](/ui-kit/react/react-router-conversation)
+- **Tab-Based Chat** → [Tab-Based Chat](/ui-kit/react/react-router-tab-based-chat)
+](https://link.cometchat.com/react-tabs-sidebar-message)
@@ -479,8 +501,19 @@ npm start
## **Next Steps**
-### **Enhance the User Experience**
-
-* **[Advanced Customizations](/ui-kit/react/theme)** – Personalize the chat UI to align with your brand.
+
-```python
+
-```python
+
-#### **Dark Mode**
+#### Dark Mode
+
+***
+
+
+
-
- );
-}
-```
-
-