+
+
-
- );
+export function AIAssistantChatDemo() {
+ const [agent, setAgent] = useState(null);
+
+ useEffect(() => {
+ // Replace with your assistant UID
+ CometChat.getUser("assistant_uid").then((u) => setAgent(u));
+ }, []);
+
+ if (!agent) return null;
+
+ return(
+ <>
+ 
-
+## Smart Chat Features
-## Conversation Starters
+### Conversation Starter
When a user initiates a new chat, the UI kit displays a list of suggested opening lines that users can select, making it easier for them to start a conversation. These suggestions are powered by CometChat's AI, which predicts contextually relevant conversation starters.
-For a comprehensive understanding and guide on implementing and using the Conversation Starters, refer to our specific guide on the [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter).
+For a comprehensive understanding and guide on implementing and using the Conversation Starter, refer to our specific guide on the [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter).
Once you have successfully activated the [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter) from your CometChat Dashboard, the feature will automatically be incorporated into the [MessageList](/ui-kit/react/message-list) Component of UI Kits.
@@ -22,7 +29,7 @@ Once you have successfully activated the [Conversation Starter](/fundamentals/ai
-## Smart Replies
+### Smart Replies
Smart Replies are AI-generated responses to messages. They can predict what a user might want to say next by analyzing the context of the conversation. This allows for quicker and more convenient responses, especially on mobile devices.
@@ -34,7 +41,7 @@ Once you have successfully activated the [Smart Replies](/fundamentals/ai-user-c
-## Conversation Summary
+### Conversation Summary
The Conversation Summary feature provides concise summaries of long conversations, allowing users to catch up quickly on missed chats. This feature uses natural language processing to determine the main points in a conversation.
@@ -45,3 +52,37 @@ Once you have successfully activated the [Conversation Summary](/fundamentals/ai
+
+
+
+
-
- );
-}
-```
+const CallButtonDemo = () => {
+ const [chatUser, setChatUser] = useState(null);
+ useEffect(() => {
+ CometChat.getUser("uid").then((user) => {
+ setChatUser(user);
+ });
+ }, []);
+ return
-
- 
+
+
@@ -18,13 +51,18 @@ The `Call Logs` is comprised of the following components:
| CometChatListItem | A component that renders data obtained from a Group object on a Tile having a title, subtitle, leading and trailing view. |
| CometChatDate | This component used to show the date and time. You can also customize the appearance of this widget by modifying its logic. |
+
+
-
- );
-}
+const CallLogDemo = () => {
+ return
-
- 
-
## Usage
### Integration
-
-
-```tsx
+
+```tsx lines
import { CometChatConversations } from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
const getOnItemClick = (conversation: CometChat.Conversation) => {
console.log("ItemClick:", conversation);
@@ -79,6 +115,20 @@ const getOnItemClick = (conversation: CometChat.Conversation) => {
+
+```jsx lines
+import { CometChatConversations } from "@cometchat/chat-uikit-react";
+
+const getOnItemClick = (conversation) => {
+ console.log("ItemClick:", conversation);
+ // Your custom action here
+};
+
+
+
***
@@ -88,12 +138,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
+
+```tsx lines
import {
CometChatConversations,
SelectionMode,
} from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
const getOnSelect = (
conversation: CometChat.Conversation,
@@ -111,6 +162,26 @@ const getOnSelect = (
+
+```jsx lines
+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 +191,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
+
+```tsx lines
import { CometChatConversations } from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
const handleOnError = (error: CometChat.CometChatException) => {
// Your exception handling code
@@ -133,6 +205,19 @@ const handleOnError = (error: CometChat.CometChatException) => {
+
+```jsx lines
+import { CometChatConversations } from "@cometchat/chat-uikit-react";
+
+const handleOnError = (error) => {
+ // Your exception handling code
+};
+
+
+
***
@@ -142,8 +227,21 @@ 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
+
+```tsx lines
+import { CometChatConversations } from "@cometchat/chat-uikit-react";
+
+const handleSearchClick = () => {
+ console.log("Search bar clicked");
+};
+
+
+
+
+```jsx lines
import { CometChatConversations } from "@cometchat/chat-uikit-react";
const handleSearchClick = () => {
@@ -173,8 +271,22 @@ You can set filters using the following parameters.
6. **GroupTags:** Filters on specific Group `Tag`
-
-```tsx
+
+```tsx lines
+import { CometChatConversations } from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+
+
+
+
+```jsx lines
import { CometChatConversations } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
@@ -197,7 +309,7 @@ import { CometChat } from "@cometchat/chat-sdk-javascript";
-```tsxtsx
+```tsxtsx lines
const ccConversationDeleted =
CometChatConversationEvents.ccConversationDeleted.subscribe(
(conversation: CometChat.Conversation) => {
@@ -210,11 +322,9 @@ const ccConversationDeleted =
-***
-
-```tsxtsx
+```tsxtsx lines
ccConversationDeleted?.unsubscribe();
```
@@ -222,6 +332,8 @@ ccConversationDeleted?.unsubscribe();
+***
+
## Customization
To fit your app's design requirements, you can customize the appearance of the conversation component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.
@@ -236,14 +348,14 @@ Using CSS you can customize the look and feel of the component in your app like
-```tsx
+```tsx lines
-
-```css
+
+```css lines
.cometchat-conversations .cometchat-list-item__body-title,
.cometchat-conversations .cometchat-list__header-title,
.cometchat-conversations .cometchat-avatar__text,
@@ -284,8 +396,19 @@ 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
+
+```tsx lines
+
+
+
+```jsx lines
-```ts
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
CometChatListItem,
@@ -373,8 +496,8 @@ const getItemView = (conversation: CometChat.Conversation) => {
-
-```css
+
+```css lines
.cometchat-conversations .cometchat-avatar {
border-radius: 8px;
width: 32px;
@@ -404,7 +527,7 @@ Use the following code to achieve the customization shown above.
-```ts
+```ts lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
@@ -491,7 +614,7 @@ Use the following code to achieve the customization shown above.
-```ts
+```ts lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatConversations } from "@cometchat/chat-uikit-react";
@@ -542,8 +665,8 @@ const CustomTrailingButtonView = (conv: CometChat.Conversation) => {
-
-```css
+
+```css lines
.conversations__trailing-view {
display: flex;
flex-direction: column;
@@ -597,7 +720,7 @@ Assigns the list of text formatters. If the provided list is not null, it sets t
-```ts
+```ts lines
import { CometChatTextFormatter } from "@cometchat/chat-uikit-react";
import DialogHelper from "./Dialog";
import { CometChat } from "@cometchat/chat-sdk-javascript";
@@ -711,7 +834,7 @@ export default ShortcutFormatter;
-```tsx
+```tsx lines
import React from "react";
import ReactDOM from "react-dom";
@@ -778,8 +901,8 @@ export default class DialogHelper {
-
-```tsx
+
+```tsx lines
import ShortcutFormatter from "./ShortCutFormatter";
-```ts
+```ts lines
import {
CometChatButton,
CometChatConversations,
@@ -828,8 +951,8 @@ const getHeaderView = () => {
-
-```css
+
+```css lines
.conversations__header {
display: flex;
width: 100%;
@@ -873,7 +996,7 @@ The `lastMessageDateTimeFormat` property allows you to customize the **Last Mess
Default Date Time Format:
-```ruby
+```ruby lines
new CalendarObject({
today: `hh:mm A`, // Example: "10:30 AM"
yesterday: `[yesterday]`, // Example: "yesterday"
@@ -885,7 +1008,7 @@ The following example demonstrates how to modify the **Last Message** timestamp
-```ts
+```ts lines
import {
CometChatConversations,
CalendarObject,
@@ -931,7 +1054,7 @@ Use the following code to achieve the customization shown above.
-```ts
+```ts lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatConversations } from "@cometchat/chat-uikit-react";
@@ -963,8 +1086,8 @@ const customTitleView = (conversation: CometChat.Conversation) => {
-
-```css
+
+```css lines
.cometchat-conversations .conversations__title-view {
display: flex;
gap: 4px;
@@ -1013,7 +1136,7 @@ Use the following code to achieve the customization shown above.
-```ts
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatConversations } from "@cometchat/chat-uikit-react";
@@ -1051,8 +1174,8 @@ function getFormattedTimestamp(timestamp: number): string {
-
-```css
+
+```css lines
.cometchat-conversations .cometchat-list-item__body-subtitle {
overflow: hidden;
color: var(--cometchat-text-color-secondary, #727272);
@@ -1090,7 +1213,7 @@ Use the following code to achieve the customization shown above.
-```ts
+```ts lines
import {
CometChatOption,
CometChatConversations,
@@ -1135,8 +1258,8 @@ const getOptions = (conversation: CometChat.Conversation) => {
-
-```css
+
+```css lines
.cometchat-conversations .cometchat-menu-list__main-menu-item-icon-delete {
background: red;
}
@@ -1156,7 +1279,7 @@ const getOptions = (conversation: CometChat.Conversation) => {
-##### Structure of CometChatOption
+#### Structure of CometChatOption
| Name | Description |
| ----------- | ----------------------------------------------------- |
@@ -1166,3 +1289,49 @@ const getOptions = (conversation: CometChat.Conversation) => {
| **onClick** | Method to be invoked when user clicks on each option. |
***
+
+
+## Component API Pattern
+
+| Customization Type | Prop Pattern | Example |
+| --- | --- | --- |
+| Callback actions | `on={(param) => {}}` | `onItemClick={(conversation) => {}}` |
+| Data filtering | `conversationsRequestBuilder={builder}` | `conversationsRequestBuilder={new CometChat.ConversationsRequestBuilder().setLimit(10)}` |
+| Toggle features | `hide={true\|false}` | `hideReceipts={true}` |
+| Custom rendering | `View={() => JSX}` | `itemView={(conversation) =>
+
+
+| Symptom | Cause | Fix |
+| --- | --- | --- |
+| Component doesn't render | `CometChatUIKit.init()` not called or not awaited | Ensure init completes before rendering. See [Methods](/ui-kit/react/methods) |
+| Component renders but shows no data | User not logged in | Call `CometChatUIKit.login("UID")` after init |
+| `onItemClick` not firing | Wrong prop name or missing callback | Use `onItemClick` (not `onClick` or `onPress`) |
+| Custom view not appearing | Returning `null` or `undefined` from view prop | Ensure view function returns valid JSX |
+| SSR hydration error | Component uses browser APIs on server | Wrap in `useEffect` or dynamic import with `ssr: false`. See [Next.js Integration](/ui-kit/react/next-js-integration) |
+| Conversations list empty after login | `ConversationsRequestBuilder` filters too restrictive | Remove or adjust the `conversationsRequestBuilder` prop |
+| Events not received | Listener not subscribed or unsubscribed too early | Subscribe in `useEffect` and unsubscribe in cleanup |
+
+
+
+
+---
+
+## Next Steps
+
+
+
+ Display messages for the selected conversation
+
+
+ Browse and select users to start new conversations
+
+
+ Browse and manage group conversations
+
+
+ Customize the appearance of the conversations list
+
+
diff --git a/ui-kit/react/core-features.mdx b/ui-kit/react/core-features.mdx
index 78a6de7de..61dcf4684 100644
--- a/ui-kit/react/core-features.mdx
+++ b/ui-kit/react/core-features.mdx
@@ -1,13 +1,29 @@
---
title: "Core"
+description: "Overview of CometChat's core chat features including instant messaging, media sharing, read receipts, typing indicators, user presence, reactions, mentions, threaded conversations, search, and moderation — with the UI Kit components that power each feature."
---
+
+- **Package:** `@cometchat/chat-uikit-react`
+- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` — must complete before rendering any component
+- **Core features:** Instant Messaging, Media Sharing, Read Receipts, Mark as Unread, Typing Indicator, User Presence, Reactions, Mentions, Quoted Reply, Search, Threaded Conversations, Moderation, Report Message, Group Chat
+- **Key components:** `CometChatConversations` → [Conversations](/ui-kit/react/conversations), `CometChatMessageList` → [Message List](/ui-kit/react/message-list), `CometChatMessageComposer` → [Message Composer](/ui-kit/react/message-composer), `CometChatMessageHeader` → [Message Header](/ui-kit/react/message-header), `CometChatUsers` → [Users](/ui-kit/react/users), `CometChatGroups` → [Groups](/ui-kit/react/groups), `CometChatGroupMembers` → [Group Members](/ui-kit/react/group-members)
+- **CSS class prefix:** `.cometchat-`
+- **Theming:** Override CSS variables on `.cometchat` class. See [Theming](/ui-kit/react/theme)
+
+
## 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.
+
Here's how different UI Kit components work together to achieve CometChat's Core features:
+
+
+**Before using these components:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration).
+
+
## Instant Messaging
At the heart of CometChat's functionality is the ability to support real-time text messaging. Users can send and receive instant messages, fostering quick and efficient communication.
@@ -115,45 +131,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 +200,52 @@ Learn more about how flagged messages are handled, reviewed, and moderated in th
| ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) provides the "Report Message" option in the message actions menu, allowing users to initiate the reporting process for inappropriate messages. |
-## Group Chat
+## Conversation and Advanced Search
-CometChat facilitates Group Chats, allowing users to have conversations with multiple participants simultaneously. This feature is crucial for team collaborations, group discussions, social communities, and more.
+Conversation and Advanced Search is a powerful feature provided by CometChat that enables users to quickly find conversations, messages, and media across chats in real time. It supports filters, scopes, and custom actions, allowing users to locate content efficiently while keeping the chat experience smooth and intuitive.
-
+
+| Components | Functionality |
+| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Search](/ui-kit/react/search) | [Search](/ui-kit/react/search) allows users to search across conversations and messages in real time. Users can click on a result to open the conversation or jump directly to a specific message. |
+| [Message Header](/ui-kit/react/message-header) | [Message Header](/ui-kit/react/message-header) shows the search button in the chat header, allowing users to search within a conversation. |
+| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) shows the selected message when clicked from search results and highlights it in the message list. |
+| [Conversations](/ui-kit/react/conversations) | [Conversations](/ui-kit/react/conversations) displays the search input. |
+
For a comprehensive understanding and guide on implementing and using the Groups feature in CometChat, you should refer to our detailed guide on [Groups](/ui-kit/react/groups).
+
+
+
+
+| Symptom | Cause | Fix |
+| --- | --- | --- |
+| Component doesn't render | `CometChatUIKit.init()` not called or not awaited | Ensure init completes before rendering. See [Methods](/ui-kit/react/methods) |
+| Component renders but shows no data | User not logged in | Call `CometChatUIKit.login("UID")` after init |
+| Callback not firing | Wrong prop name or signature | Check the Actions section on the component page for exact prop name and parameter types |
+| Custom view not appearing | Returning `null` or `undefined` from view prop | Ensure view function returns valid JSX |
+| SSR hydration error | Component uses browser APIs on server | Wrap in `useEffect` or dynamic import with `ssr: false`. See [Next.js Integration](/ui-kit/react/next-js-integration) |
+
+
+
+
+---
+
+## Next Steps
+
+
+
+ Browse all available UI Kit components
+
+
+ Customize the look and feel of your chat UI
+
+
+ Add audio and video calling to your app
+
+
+ Explore AI-powered chat capabilities
+
+
diff --git a/ui-kit/react/custom-text-formatter-guide.mdx b/ui-kit/react/custom-text-formatter-guide.mdx
index eadbdc933..c8487faf3 100644
--- a/ui-kit/react/custom-text-formatter-guide.mdx
+++ b/ui-kit/react/custom-text-formatter-guide.mdx
@@ -1,7 +1,19 @@
---
title: "Custom Text Formatter"
+description: "Extend the CometChatTextFormatter base class to implement custom inline text patterns with regex and callbacks."
---
+
+- **Package:** `@cometchat/chat-uikit-react`
+- **Key class:** `CometChatTextFormatter` (abstract base class for custom formatters)
+- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")`
+- **Purpose:** Extend to create custom inline text patterns with regex, styling, and callbacks
+- **Features:** Text formatting, customizable styles, dynamic text replacement, input field integration, key event callbacks
+- **Sample app:** [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app)
+- **Related:** [ShortCut Formatter](/ui-kit/react/shortcut-formatter-guide) | [Mentions Formatter](/ui-kit/react/mentions-formatter-guide) | [All Guides](/ui-kit/react/guide-overview)
+
+
+
## 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.
@@ -73,7 +85,7 @@ Below is an example demonstrating how to use a custom formatter class in compone
-```ts
+```ts lines
import { CometChatTextFormatter } from "@cometchat/chat-uikit-react";
class HashTagTextFormatter extends CometChatTextFormatter {
@@ -227,7 +239,7 @@ export default HashTagTextFormatter;
-```tsx
+```tsx lines
import { HashTagTextFormatter } from "./HashTagTextFormatter";
export default function MessageListDemo() {
@@ -288,7 +300,7 @@ Upon calling `reRender`, the composer will invoke the `getFormattedText` functio
-```js
+```js lines
/**
* If the input text is provided, it returns the formatted text. Otherwise, it edits the text using the current cursor position.
* @param {string|null} inputText - The text to format.
@@ -306,7 +318,7 @@ Upon calling `reRender`, the composer will invoke the `getFormattedText` functio
-```js
+```js lines
/**
* Handles 'keydown' events.
* @param {KeyboardEvent} event - The keyboard event.
@@ -325,7 +337,7 @@ onKeyUp(event: KeyboardEvent) {
-```js
+```js lines
/**
* Handles 'keydown' events.
* @param {KeyboardEvent} event - The keyboard event.
@@ -336,7 +348,7 @@ onKeyDown(event: KeyboardEvent) {}
-```js
+```js lines
/**
* Composer and Text Bubbles will call this function when rendering the HTML content.
* This will be called for each HTML Element present in the formatted string.
@@ -407,7 +419,7 @@ registerEventListeners(element: HTMLElement, domTokenList: DOMTokenList) {
-```js
+```js lines
/**
* Returns the original unformatted text from the input text.
* @param {string|null|undefined} inputText - The input text to get original text from.
@@ -433,4 +445,23 @@ registerEventListeners(element: HTMLElement, domTokenList: DOMTokenList) {
-
\ No newline at end of file
+
+
+## Next Steps
+
+
+
+ Add @mentions with styled tokens.
+
+
+ Customize the message input component.
+
+
+ Browse all feature and formatter guides.
+
+
+ Full working sample application on GitHub.
+
+
+
+***
diff --git a/ui-kit/react/events.mdx b/ui-kit/react/events.mdx
index 0ba3e00fc..7ec01ddcb 100644
--- a/ui-kit/react/events.mdx
+++ b/ui-kit/react/events.mdx
@@ -1,7 +1,15 @@
---
title: "Events"
+description: "Reference for CometChat React UI Kit events including conversation, user, group, message, and call events."
---
+
+- **Package:** `@cometchat/chat-uikit-react`
+- **Event categories:** `CometChatConversationEvents` (deleted, updated), `CometChatUserEvents` (blocked/unblocked), `CometChatGroupEvents` (created, deleted, member changes), `CometChatMessageEvents` (sent, edited, replied), `CometChatCallEvents` (outgoing, accepted, rejected, ended)
+- **UI events:** Active chat changed
+- **Purpose:** Decoupled communication between UI Kit components — subscribe to events to react to changes without direct component references
+
+
## 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.
@@ -14,8 +22,8 @@ All components have the ability to emit events. These events are dispatched in r
| Name | Description |
| ------------------------- | ------------------------------------------------------------------------------------------------ |
-| ccConversationDeleted | This event is triggered when the user successfully deletes a conversation. |
-| ccUpdateConversation | This event is triggered to update a conversation in the conversation list. Takes a Conversation object to update. |
+| **ccConversationDeleted** | This event is triggered when the user successfully deletes a conversation. |
+| **ccUpdateConversation** | This event is triggered to update a conversation in the conversation list. Takes a Conversation object to update. |
### CometChatUserEvents
@@ -25,8 +33,8 @@ It consists of the following events:
| Name | Description |
| --------------- | ------------------------------------------------------------------------- |
-| ccUserBlocked | This event is triggered when the user successfully blocks another user. |
-| ccUserUnblocked | This event is triggered when the user successfully unblocks another user. |
+| **ccUserBlocked** | This event is triggered when the user successfully blocks another user. |
+| **ccUserUnblocked** | This event is triggered when the user successfully unblocks another user. |
### CometChatGroupEvents
@@ -36,16 +44,16 @@ It consists of the following events:
| Name | Description |
| ------------------------- | ------------------------------------------------------------------------------------ |
-| ccGroupCreated | This event is triggered when the user creates a group successfully |
-| ccGroupDeleted | This event is triggered when the group member deletes the group successfully |
-| ccGroupLeft | This event is triggered when the group member leaves the group successfully |
-| ccGroupMemberScopeChanged | This event is triggered when the group member's scope is updated successfully |
-| ccGroupMemberKicked | This event is triggered when the group member is kicked |
-| ccGroupMemberBanned | This event is triggered when the group member is banned |
-| ccGroupMemberUnbanned | This event is triggered when the group member is un-banned |
-| ccGroupMemberJoined | This event is triggered when a user joins the group |
-| ccGroupMemberAdded | This event is triggered when a user is added to the group |
-| ccOwnershipChanged | This event is triggered when the group ownership is assigned to another group member |
+| **ccGroupCreated** | This event is triggered when the user creates a group successfully |
+| **ccGroupDeleted** | This event is triggered when the group member deletes the group successfully |
+| **ccGroupLeft** | This event is triggered when the group member leaves the group successfully |
+| **ccGroupMemberScopeChanged** | This event is triggered when the group member's scope is updated successfully |
+| **ccGroupMemberKicked** | This event is triggered when the group member is kicked |
+| **ccGroupMemberBanned** | This event is triggered when the group member is banned |
+| **ccGroupMemberUnbanned** | This event is triggered when the group member is un-banned |
+| **ccGroupMemberJoined** | This event is triggered when a user joins the group |
+| **ccGroupMemberAdded** | This event is triggered when a user is added to the group |
+| **ccOwnershipChanged** | This event is triggered when the group ownership is assigned to another group member |
### CometChatMessageEvents
@@ -55,22 +63,22 @@ It consists of the following events:
| Name | Description |
| -------------------------- | --------------------------------------------------------------------------------------------------------- |
-| ccMessageSent | This event is triggered when the sent message is in transit and also when it is received by the receiver. |
-| ccMessageEdited | This event is triggered when the user successfully edits the message. |
-| ccReplyToMessage | This event is triggered when the user successfully replies to a message. |
-| ccMessageDeleted | This event is triggered when the user successfully deletes the message. |
-| ccMessageRead | This event is triggered when the sent message is read by the receiver. |
-| ccLiveReaction | This event is triggered when the user sends a live reaction. |
-| onTextMessageReceived | This event is emitted when the CometChat SDK listener emits a text message. |
-| onMediaMessageReceived | This event is emitted when the CometChat SDK listener emits a media message. |
-| onCustomMessageReceived | This event is emitted when the CometChat SDK listener emits a custom message. |
-| onTypingStarted | This event is emitted when the CometChat SDK listener indicates that a user has started typing. |
-| onTypingEnded | This event is emitted when the CometChat SDK listener indicates that a user has stopped typing. |
-| onMessagesDelivered | This event is emitted when the CometChat SDK listener indicates that messages have been delivered. |
-| onMessagesRead | This event is emitted when the CometChat SDK listener indicates that messages have been read. |
-| onMessageEdited | This event is emitted when the CometChat SDK listener indicates that a message has been edited. |
-| onMessageDeleted | This event is emitted when the CometChat SDK listener indicates that a message has been deleted. |
-| onTransientMessageReceived | This event is emitted when the CometChat SDK listener emits a transient message. |
+| **ccMessageSent** | This event is triggered when the sent message is in transit and also when it is received by the receiver. |
+| **ccMessageEdited** | This event is triggered when the user successfully edits the message. |
+| **ccReplyToMessage** | This event is triggered when the user successfully replies to a message. |
+| **ccMessageDeleted** | This event is triggered when the user successfully deletes the message. |
+| **ccMessageRead** | This event is triggered when the sent message is read by the receiver. |
+| **ccLiveReaction** | This event is triggered when the user sends a live reaction. |
+| **onTextMessageReceived** | This event is emitted when the CometChat SDK listener emits a text message. |
+| **onMediaMessageReceived** | This event is emitted when the CometChat SDK listener emits a media message. |
+| **onCustomMessageReceived** | This event is emitted when the CometChat SDK listener emits a custom message. |
+| **onTypingStarted** | This event is emitted when the CometChat SDK listener indicates that a user has started typing. |
+| **onTypingEnded** | This event is emitted when the CometChat SDK listener indicates that a user has stopped typing. |
+| **onMessagesDelivered** | This event is emitted when the CometChat SDK listener indicates that messages have been delivered. |
+| **onMessagesRead** | This event is emitted when the CometChat SDK listener indicates that messages have been read. |
+| **onMessageEdited** | This event is emitted when the CometChat SDK listener indicates that a message has been edited. |
+| **onMessageDeleted** | This event is emitted when the CometChat SDK listener indicates that a message has been deleted. |
+| **onTransientMessageReceived** | This event is emitted when the CometChat SDK listener emits a transient message. |
### CometChatCallEvents
@@ -80,10 +88,10 @@ It consists of the following events:
| Name | Description |
| -------------- | ---------------------------------------------------------------------------- |
-| ccOutgoingCall | This event is triggered when the user initiates a voice/video call. |
-| ccCallAccepted | This event is triggered when the initiated call is accepted by the receiver. |
-| ccCallRejected | This event is triggered when the initiated call is rejected by the receiver. |
-| ccCallEnded | This event is triggered when the initiated call successfully ends. |
+| **ccOutgoingCall** | This event is triggered when the user initiates a voice/video call. |
+| **ccCallAccepted** | This event is triggered when the initiated call is accepted by the receiver. |
+| **ccCallRejected** | This event is triggered when the initiated call is rejected by the receiver. |
+| **ccCallEnded** | This event is triggered when the initiated call successfully ends. |
### UI events
@@ -93,4 +101,41 @@ It consists of the following events:
| Name | Description |
| ------------------- | ---------------------------------------------------------------------------- |
-| ccActiveChatChanged | This event is triggered when the user navigates to a particular chat window. |
+| **ccActiveChatChanged** | This event is triggered when the user navigates to a particular chat window. |
+
+***
+
+## Common Failure Modes
+
+
+
+
+| Symptom | Cause | Fix |
+| --- | --- | --- |
+| Event listener not firing | Subscribed to wrong event name | Check the event tables above for exact event names |
+| Duplicate event triggers | Multiple subscriptions without cleanup | Unsubscribe in `useEffect` cleanup or component unmount |
+| Event fires but UI doesn’t update | State not updated in event handler | Ensure you call `setState` or equivalent in the handler |
+
+
+
+
+***
+
+## Next Steps
+
+
+
+ Init, login, logout, and message-sending methods.
+
+
+ Explore all available prebuilt UI components.
+
+
+ Display and manage conversation lists.
+
+
+ Render real-time message threads.
+
+
+
+***
diff --git a/ui-kit/react/extensions.mdx b/ui-kit/react/extensions.mdx
index 15f4332d9..83c1c7d64 100644
--- a/ui-kit/react/extensions.mdx
+++ b/ui-kit/react/extensions.mdx
@@ -1,32 +1,102 @@
---
title: "Extensions"
+description: "Overview of CometChat's extensions grouped by Dashboard categories (User Experience, User Engagement, Collaboration, Security, Customer Support, Smart Chat Features) and how they auto-integrate into React UI Kit components."
---
+
+- **Package:** `@cometchat/chat-uikit-react`
+- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` + Extensions enabled in [CometChat Dashboard](/fundamentals/extensions-overview)
+- **Extension categories:** User Experience, User Engagement, Collaboration, Security, Customer Support, Smart Chat Features
+- **Key components:** `CometChatMessageComposer` → [Message Composer](/ui-kit/react/message-composer) (Stickers, Polls, Whiteboard, Document), `CometChatMessageList` → [Message List](/ui-kit/react/message-list) (Translation, Link Preview, Thumbnails)
+- **Activation:** Enable each extension from the CometChat Dashboard — UI Kit auto-integrates them, no additional code required
+
+
## 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.
+
+
+**Before using extensions:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. Extensions must also be activated from the [CometChat 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:
+Here's a guide on how you can enable and integrate these extensions. The grouping below mirrors the CometChat Dashboard.
-### Stickers
+### User Experience
-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).
+#### 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.
+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).
+
+#### 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 Engagement
+
+#### Giphy
+
+The Giphy extension allows users to search for and share GIFs in their conversations, adding a fun and expressive element to chats. For a comprehensive understanding and guide on implementing and using the Giphy Extension, refer to our specific guide on the [Giphy Extension](/fundamentals/giphy).
+
+#### Message Translation
+
+The Message Translation extension in CometChat is designed to translate any message into your local locale. It eliminates language barriers, making the chat more inclusive. For a comprehensive understanding and guide on implementing and using the Message Translation Extension, refer to our specific guide on the [Message Translation Extension](/fundamentals/message-translation).
+
+Once you have successfully activated the [Message Translation Extension](/fundamentals/message-translation) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of [MessageList Component](/ui-kit/react/message-list) component of UI Kits.
+
+
+ 
-### Polls
+#### Polls
The Polls extension enhances group discussions by allowing users to create polls. Users can ask questions with a predefined list of answers, enabling a quick, organized way to gather group opinions. For a comprehensive understanding and guide on implementing and using the Polls Extension, refer to our specific guide on the [Polls Extension](/fundamentals/polls).
@@ -36,17 +106,31 @@ Once you have successfully activated the [Polls Extension](/fundamentals/polls)
-### Collaborative Whiteboard
+#### Reminders
-The Collaborative Whiteboard extension facilitates real-time collaboration. Users can draw, brainstorm, and share ideas on a shared digital whiteboard. For a comprehensive understanding and guide on implementing and using the Collaborative Whiteboard Extension, refer to our specific guide on the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard).
+The Reminders extension allows users to set reminders for messages or create personal reminders. When a reminder is due, a bot sends a notification message to the user. For a comprehensive understanding and guide on implementing and using the Reminders Extension, refer to our specific guide on the [Reminders Extension](/fundamentals/reminders).
-Once you have successfully activated the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/react/message-composer) component of UI Kits.
+#### Stickers
+
+The Stickers extension allows users to express their emotions more creatively. It adds a much-needed fun element to the chat by allowing users to send various pre-designed stickers. For a comprehensive understanding and guide on implementing and using the Sticker Extension, refer to our specific guide on the [Sticker Extension](/fundamentals/stickers).
+
+Once you have successfully activated the [Sticker Extension](/fundamentals/stickers) from your CometChat Dashboard, the feature will automatically be incorporated into the [Message Composer](/ui-kit/react/message-composer) component of UI Kits.
- 
+
-### Collaborative Document
+#### Stipop
+
+The Stipop extension integrates the world's trendiest sticker platform into your chat, allowing users to search for and send stickers from Stipop's extensive library. For a comprehensive understanding and guide on implementing and using the Stipop Extension, refer to our specific guide on the [Stipop Extension](/fundamentals/stickers-stipop).
+
+#### Tenor
+
+The Tenor extension allows users to search for and share GIFs from Tenor's library in their conversations. For a comprehensive understanding and guide on implementing and using the Tenor Extension, refer to our specific guide on the [Tenor Extension](/fundamentals/tenor).
+
+### Collaboration
+
+#### Collaborative Document
With the Collaborative Document extension, users can work together on a shared document. This feature is essential for remote teams where document collaboration is a recurring requirement. For a comprehensive understanding and guide on implementing and using the Collaborative Document Extension, refer to our specific guide on the [Collaborative Document Extension](/fundamentals/collaborative-document).
@@ -56,32 +140,79 @@ Once you have successfully activated the [Collaborative Document Extension](/fun
-### Message Translation
+#### Collaborative Whiteboard
-The Message Translation extension in CometChat is designed to translate any message into your local locale. It eliminates language barriers, making the chat more inclusive. For a comprehensive understanding and guide on implementing and using the Message Translation Extension, refer to our specific guide on the [Message Translation Extension](/fundamentals/message-translation).
+The Collaborative Whiteboard extension facilitates real-time collaboration. Users can draw, brainstorm, and share ideas on a shared digital whiteboard. For a comprehensive understanding and guide on implementing and using the Collaborative Whiteboard Extension, refer to our specific guide on the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard).
-Once you have successfully activated the [Message Translation Extension](/fundamentals/message-translation) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of [MessageList Component](/ui-kit/react/message-list) component of UI Kits.
+Once you have successfully activated the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/react/message-composer) component of UI Kits.
-
+
-### Link Preview
+### Security
-The Link Preview extension provides a summary of the URL shared in the chat. It includes the title, a description, and a thumbnail image from the web page. For a comprehensive understanding and guide on implementing and using the Link Preview Extension, refer to our specific guide on the [Link Preview Extension](/fundamentals/link-preview).
+#### Disappearing Messages
-Once you have successfully activated the [Link Preview Extension](/fundamentals/link-preview) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/react/message-list) component of UI Kits.
+The Disappearing Messages extension allows users to send messages that automatically disappear after a specified time interval. This works for both one-on-one and group messages. For a comprehensive understanding and guide on implementing and using the Disappearing Messages Extension, refer to our specific guide on the [Disappearing Messages Extension](/fundamentals/disappearing-messages).
-
-
-
+### Customer Support
-### Thumbnail Generation
+#### Chatwoot
-The Thumbnail Generation extension automatically creates a smaller preview image whenever a larger image is shared, helping to reduce the upload/download time and bandwidth usage. For a comprehensive understanding and guide on implementing and using the Thumbnail Generation Extension, refer to our specific guide on the [Thumbnail Generation Extension](/fundamentals/thumbnail-generation).
+The Chatwoot extension makes customer support seamless by allowing your users to communicate with your support team directly through CometChat, eliminating the need for a separate support interface. For a comprehensive understanding and guide on implementing and using the Chatwoot Extension, refer to our specific guide on the [Chatwoot Extension](/fundamentals/chatwoot).
-Once you have successfully activated the [Thumbnail Generation Extension](/fundamentals/thumbnail-generation) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/react/message-list) component of UI Kits.
+#### Intercom
-
-
-
+The Intercom extension integrates Intercom's customer support platform with CometChat, enabling users to chat with your support team using the same chat interface they use for regular conversations. For a comprehensive understanding and guide on implementing and using the Intercom Extension, refer to our specific guide on the [Intercom Extension](/fundamentals/intercom).
+
+### Smart Chat Features
+
+#### Conversation Starter
+
+Conversation Starter suggests AI-generated opening messages to help users begin a new chat. For a comprehensive understanding and guide on implementing and using Conversation Starter, refer to our specific guide on the [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter) and the [AI Features](/ui-kit/react/ai-features) overview.
+
+#### Smart Replies
+
+Smart Replies provide AI-generated response suggestions to keep conversations flowing. For a comprehensive understanding and guide on implementing and using Smart Replies, refer to our specific guide on the [Smart Replies](/fundamentals/ai-user-copilot/smart-replies) and the [AI Features](/ui-kit/react/ai-features) overview.
+
+#### Conversation Summary
+
+Conversation Summary generates an AI-written recap of a conversation when needed. For a comprehensive understanding and guide on implementing and using Conversation Summary, refer to our specific guide on the [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary) and the [AI Features](/ui-kit/react/ai-features) overview.
+
+---
+
+
+
+
+| Symptom | Cause | Fix |
+| --- | --- | --- |
+| Extension feature not appearing | Extension not activated in CometChat Dashboard | Enable the specific extension from your [Dashboard](/fundamentals/extensions-overview) |
+| Component doesn't render | `CometChatUIKit.init()` not called or not awaited | Ensure init completes before rendering. See [Methods](/ui-kit/react/methods) |
+| Component renders but no extension UI | User not logged in | Call `CometChatUIKit.login("UID")` after init |
+| Stickers not showing in composer | Sticker extension not enabled | Activate [Sticker Extension](/fundamentals/stickers) in Dashboard |
+| Polls option missing from action sheet | Polls extension not enabled | Activate [Polls Extension](/fundamentals/polls) in Dashboard |
+| Link preview not rendering in messages | Link Preview extension not enabled | Activate [Link Preview Extension](/fundamentals/link-preview) in Dashboard |
+| SSR hydration error | Component uses browser APIs on server | Wrap in `useEffect` or dynamic import with `ssr: false`. See [Next.js Integration](/ui-kit/react/next-js-integration) |
+
+
+
+
+---
+
+## Next Steps
+
+
+
+ Customize the composer where most extensions appear
+
+
+ Customize the message list for extension-rendered content
+
+
+ Explore core chat features like messaging and reactions
+
+
+ Explore AI-powered chat capabilities
+
+
diff --git a/ui-kit/react/group-members.mdx b/ui-kit/react/group-members.mdx
index ce7ec270f..999653e30 100644
--- a/ui-kit/react/group-members.mdx
+++ b/ui-kit/react/group-members.mdx
@@ -1,7 +1,40 @@
---
title: "Group Members"
+description: "CometChatGroupMembers component displays all users in a group with their roles, scopes, and online status. Supports member management actions, custom views, filtering via GroupMembersRequestBuilder, and CSS styling."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```tsx
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
+
+// Requires a CometChat.Group object
+ console.log("Selected:", groupMember)}
+ selectionMode={SelectionMode.none}
+/>
+```
+
+
+
+**AI Agent Component Spec**
+
+**Package:** `@cometchat/chat-uikit-react`
+**Import:** `import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";`
+**Minimal JSX:** `
+
## 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 +43,11 @@ title: "Group Members"
+
+
+**Before using this component:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration).
+
+
***
## Usage
@@ -19,8 +57,8 @@ title: "Group Members"
The following code snippet illustrates how you can directly incorporate the Group Members component into your Application.
-
-```tsx
+
+```tsx lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -42,17 +80,25 @@ export default GroupMembersDemo;
-
-```tsx
-import { GroupMembersDemo } from "./GroupMembersDemo";
+
+```jsx lines
+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 (
-
@@ -65,7 +111,7 @@ export default function App() {
[Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.
-##### 1. onSelect
+#### 1. onSelect
The `onSelect` action is activated when you select the done icon while in selection mode. This returns a list of all the group members that you have selected.
@@ -73,7 +119,7 @@ This action does not come with any predefined behavior. However, you have the fl
-```ts
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
CometChatGroupMembers,
@@ -117,7 +163,7 @@ export default GroupMembersDemo;
-```js
+```js lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
CometChatGroupMembers,
@@ -136,7 +182,7 @@ const GroupMembersDemo = () => {
function handleOnSelect(groupMembers, selected) {
console.log(groupMembers);
- /** Your custom onSelect actions
+ /** Your custom onSelect actions **/
}
return (
@@ -159,13 +205,13 @@ export default GroupMembersDemo;
-##### 2. onItemClick
+#### 2. onItemClick
The `onItemClick` event is activated when you click on the Group Members List item. This action does not come with any predefined behavior. However, you have the flexibility to override this event and tailor it to suit your needs using the following code snippet.
-```ts
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -201,7 +247,7 @@ export default GroupMembersDemo;
-```js
+```js lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
import { useEffect, useState } from "react";
@@ -238,13 +284,13 @@ export default GroupMembersDemo;
-##### 3. onEmpty
+#### 3. onEmpty
This action allows you to specify a callback function to be executed when a certain condition, typically the absence of data or content, is met within the component or element.
-```ts
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -277,7 +323,7 @@ export default GroupMembersDemo;
-```js
+```js lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
import { useEffect, useState } from "react";
@@ -311,13 +357,13 @@ export default GroupMembersDemo;
-##### 4. onError
+#### 4. onError
This action doesn't change the behavior of the component but rather listens for any errors that occur in the Group Members component.
-```ts
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -350,7 +396,7 @@ export default GroupMembersDemo;
-```js
+```js lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
import { useEffect, useState } from "react";
@@ -390,7 +436,7 @@ export default GroupMembersDemo;
**Filters** allow you to customize the data displayed in a list within a Component. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK.
-##### 1. GroupMembersRequestBuilder
+#### 1. GroupMembersRequestBuilder
The [GroupMembersRequestBuilder](/sdk/javascript/retrieve-group-members) enables you to filter and customize the group members list based on available parameters in GroupMembersRequestBuilder. This feature allows you to create more specific and targeted queries when fetching groups. The following are the parameters available in [GroupMembersRequestBuilder](/sdk/javascript/retrieve-group-members)
@@ -406,7 +452,7 @@ In the example below, we are applying a filter to the Group Members by setting t
-```ts
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -442,7 +488,7 @@ export default GroupMembersDemo;
-```js
+```js lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
import { useEffect, useState } from "react";
@@ -479,7 +525,7 @@ export default GroupMembersDemo;
-##### 2. SearchRequestBuilder
+#### 2. SearchRequestBuilder
The SearchRequestBuilder uses [GroupMembersRequestBuilder](/sdk/javascript/retrieve-group-members) enables you to filter and customize the search list based on available parameters in GroupMembersRequestBuilder. This feature allows you to keep uniformity between the displayed Group Members List and searched Group Members List.
@@ -487,7 +533,7 @@ The SearchRequestBuilder uses [GroupMembersRequestBuilder](/sdk/javascript/retri
-```ts
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -521,7 +567,7 @@ export default GroupMembersDemo;
-```js
+```js lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
import { useEffect, useState } from "react";
@@ -572,7 +618,7 @@ Events emitted by the Group Members component is as follows.
-```tsx
+```tsx lines
const ccGroupMemberBanned = CometChatGroupEvents.ccGroupMemberBanned.subscribe(
(item: IGroupMemberKickedBanned) => {
/** Your Code */
@@ -597,11 +643,9 @@ const ccGroupMemberScopeChanged =
-***
-
-```tsx
+```tsx lines
ccGroupMemberBanned?.unsubscribe();
ccGroupMemberKicked?.unsubscribe();
@@ -629,7 +673,7 @@ Using CSS you can customize the look and feel of the component in your app like
-```ts
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -652,8 +696,8 @@ export default GroupMembersDemo;
-
-```css
+
+```css lines
.cometchat-group-members .cometchat-list__header-title {
background: #feede1;
color: #f76808;
@@ -700,7 +744,7 @@ These are a set of small functional customizations that allow you to fine-tune t
-```ts
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -729,7 +773,7 @@ export default GroupMembersDemo;
-```js
+```js lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
import { useEffect, useState } from "react";
@@ -805,7 +849,7 @@ Use the following code to achieve the customization shown above.
-```ts
+```ts lines
import { CometChat, GroupMember } from "@cometchat/chat-sdk-javascript";
import React from "react";
import {
@@ -883,8 +927,8 @@ export default GroupMembersDemo;
-
-```css
+
+```css lines
.group-member-list-item {
display: flex;
min-width: 240px;
@@ -983,7 +1027,7 @@ Use the following code to achieve the customization shown above.
-```ts
+```ts lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroups } from "@cometchat/chat-uikit-react";
@@ -1001,36 +1045,39 @@ const customTitleView = (member: CometChat.GroupMember) => {
-
-```css
-.group-members__title-view{
- display: flex;
- align-items: center;
- gap: 4px;
- align-self: stretch;
- }
- .group-members__title-view-name{
- overflow: hidden;
- color: #141414;
- text-overflow: ellipsis;
- font:500 16px Roboto
- }
- .group-members__title-view-type{
- color: #FFF;
- font: 600 8px Roboto;
- display: flex;
- height: 15px;
- padding: 1px 3px;
- justify-content: center;
- align-items: center;
- gap: 3px;
- border-radius: 7px;
- background: #09C26F;
- }
- .group-members__title-view-public .group-members__title-view-role{
- //add css based on roles
- background: #0B7BEA;
- }
+
+```css lines
+.group-members__title-view {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ align-self: stretch;
+}
+
+.group-members__title-view-name {
+ overflow: hidden;
+ color: #141414;
+ text-overflow: ellipsis;
+ font: 500 16px Roboto
+}
+
+.group-members__title-view-type {
+ color: #FFF;
+ font: 600 8px Roboto;
+ display: flex;
+ height: 15px;
+ padding: 1px 3px;
+ justify-content: center;
+ align-items: center;
+ gap: 3px;
+ border-radius: 7px;
+ background: #09C26F;
+}
+
+.group-members__title-view-public .group-members__title-view-role {
+ //add css based on roles
+ background: #0B7BEA;
+}
```
@@ -1059,7 +1106,7 @@ Use the following code to achieve the customization shown above.
-```ts
+```ts lines
import { CometChat, GroupMember } from "@cometchat/chat-sdk-javascript";
import React from "react";
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
@@ -1103,8 +1150,8 @@ export default GroupMembersDemo;
-
-```css
+
+```css lines
.group-member-subtitle {
overflow: hidden;
color: #727272;
@@ -1132,7 +1179,7 @@ Use the following code to achieve the customization shown above.
-```ts
+```ts lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroupMembers,CometChatAvatar } from "@cometchat/chat-uikit-react";
@@ -1158,41 +1205,47 @@ const customLeadingView = (member: CometChat.GroupMember): JSX.Element => {
-
-```css
-.cometchat-group-members .cometchat-list-item .group-member__leading-view .cometchat-avatar__image, .cometchat-group-members .cometchat-list-item .group-member__leading-view .cometchat-avatar{
-border-radius: 8px;
-height: 48px ;
-width: 48px ;
+
+```css lines
+.cometchat-group-members .cometchat-list-item .group-member__leading-view .cometchat-avatar__image,
+.cometchat-group-members .cometchat-list-item .group-member__leading-view .cometchat-avatar {
+ border-radius: 8px;
+ height: 48px;
+ width: 48px;
}
-.group-member__leading-view-scope{
-display: flex;
-width: 48px;
-height: 15px;
-padding: 1px 3px;
-justify-content: center;
-align-items: center;
-color:#FFF;
-font:600 8px/9.6px Roboto;
-background:#FFAB00;
-position:absolute;
-bottom:-2px;
+
+.group-member__leading-view-scope {
+ display: flex;
+ width: 48px;
+ height: 15px;
+ padding: 1px 3px;
+ justify-content: center;
+ align-items: center;
+ color: #FFF;
+ font: 600 8px/9.6px Roboto;
+ background: #FFAB00;
+ position: absolute;
+ bottom: -2px;
}
-.group-member__leading-view{
-position: relative;
+
+.group-member__leading-view {
+ position: relative;
}
-.group-member__leading-view-participant .group-member__leading-view-scope{
-display: none;
+.group-member__leading-view-participant .group-member__leading-view-scope {
+ display: none;
}
-.group-member__leading-view-owner .group-member__leading-view-scope{
-background: #0B7BEA;
+
+.group-member__leading-view-owner .group-member__leading-view-scope {
+ background: #0B7BEA;
}
-.group-member__leading-view-admin .group-member__leading-view-scope{
-background: #FFAB00;
+
+.group-member__leading-view-admin .group-member__leading-view-scope {
+ background: #FFAB00;
}
-.group-member__leading-view-moderator .group-member__leading-view-scope{
-background: #09C26F;
+
+.group-member__leading-view-moderator .group-member__leading-view-scope {
+ background: #09C26F;
}
```
@@ -1222,7 +1275,7 @@ Use the following code to achieve the customization shown above.
-```ts
+```ts lines
import { CometChat, GroupMember } from "@cometchat/chat-sdk-javascript";
import React from "react";
import {
@@ -1275,20 +1328,20 @@ export default GroupMembersDemo;
-
-```css
+
+```css lines
.group-member-scope-tag {
- display: flex;
- padding: 4px 12px;
- justify-content: center;
- align-items: center;
- gap: 20px;
- border-radius: 1000px;
- background: #edeafa;
- overflow: hidden;
- color: #6852d6;
- text-overflow: ellipsis;
- font: 400 12px Roboto;
+ display: flex;
+ padding: 4px 12px;
+ justify-content: center;
+ align-items: center;
+ gap: 20px;
+ border-radius: 1000px;
+ background: #edeafa;
+ overflow: hidden;
+ color: #6852d6;
+ text-overflow: ellipsis;
+ font: 400 12px Roboto;
}
```
@@ -1312,7 +1365,7 @@ Use the following code to achieve the customization shown above.
-```ts
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroupMembers,localize } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -1338,36 +1391,39 @@ const getHeaderView = () => {
-
-```css
+
+```css lines
.cometchat-group-members__header {
- display: flex;
- width: 100%;
- padding: 8px 16px;
- align-items: center;
- justify-content: space-between;
- gap: 12px;
- flex: 1 0 0;
- align-self: stretch;
- border-radius: 10px;
- border: 1px solid #E8E8E8;
- background: #EDEAFA;
+ display: flex;
+ width: 100%;
+ padding: 8px 16px;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+ flex: 1 0 0;
+ align-self: stretch;
+ border-radius: 10px;
+ border: 1px solid #E8E8E8;
+ background: #EDEAFA;
}
+
.cometchat-group-members__header__title {
- overflow: hidden;
- color: #141414;
- text-overflow: ellipsis;
- font: 700 24px Roboto;
+ overflow: hidden;
+ color: #141414;
+ text-overflow: ellipsis;
+ font: 700 24px Roboto;
}
+
.cometchat-group-members__header .cometchat-button .cometchat-button__icon {
- background: #6852D6;
+ background: #6852D6;
}
-.cometchat-group-members__header .cometchat-button{
- width: 24px;
- border: none;
- background: transparent;
- border-radius: 0;
- display: block;
+
+.cometchat-group-members__header .cometchat-button {
+ width: 24px;
+ border: none;
+ background: transparent;
+ border-radius: 0;
+ display: block;
}
```
@@ -1391,7 +1447,7 @@ Use the following code to achieve the customization shown above.
-```ts
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
CometChatGroupMembers,
@@ -1440,19 +1496,19 @@ export default GroupMembersDemo;
-
-```css
+
+```css lines
.cometchat-group-members .cometchat-menu-list__main-menu-item-icon {
- height: 24px;
- width: 24px;
- -webkit-mask: url("./assets/delete.svg") center center no-repeat;
- background: #f44649;
+ height: 24px;
+ width: 24px;
+ -webkit-mask: url("./assets/delete.svg") center center no-repeat;
+ background: #f44649;
}
.cometchat-group-members .cometchat-menu-list__menu,
.cometchat-group-members .cometchat-menu-list__main-menu-item {
- background: transparent;
- box-shadow: none;
+ background: transparent;
+ box-shadow: none;
}
```
@@ -1461,3 +1517,47 @@ export default GroupMembersDemo;
***
+
+## Component API Pattern
+
+| Customization Type | Prop Pattern | Example |
+| --- | --- | --- |
+| Callback actions | `on={(param) => {}}` | `onItemClick={(member) => {}}` |
+| Data filtering | `groupMemberRequestBuilder={new CometChat.GroupMembersRequestBuilder("GUID")}` | `groupMemberRequestBuilder={builder}` |
+| Toggle features | `hide={true\|false}` | `hideSearch={true}` |
+| Custom rendering | `View={() => JSX}` | `itemView={(member) =>
+
+
+| Symptom | Cause | Fix |
+| --- | --- | --- |
+| Component doesn't render | `CometChatUIKit.init()` not called or not awaited | Ensure init completes before rendering. See [Methods](/ui-kit/react/methods) |
+| Component renders but shows no data | User not logged in | Call `CometChatUIKit.login("UID")` after init |
+| No members displayed | `group` prop not passed or invalid | Ensure a valid `CometChat.Group` object is passed to the `group` prop |
+| Callback not firing | Wrong prop name or signature | Check the Actions section for exact prop name and parameter types |
+| Custom view not appearing | Returning `null` or `undefined` from view prop | Ensure view function returns valid JSX |
+| SSR hydration error | Component uses browser APIs on server | Wrap in `useEffect` or dynamic import with `ssr: false`. See [Next.js Integration](/ui-kit/react/next-js-integration) |
+
+
+
+
+---
+
+## Next Steps
+
+
+
+ Display and manage group lists
+
+
+ Display and manage user lists
+
+
+ Render messages in a chat view
+
+
+ Display recent conversations
+
+
diff --git a/ui-kit/react/groups.mdx b/ui-kit/react/groups.mdx
index 27bd1cd69..9d2ea9667 100644
--- a/ui-kit/react/groups.mdx
+++ b/ui-kit/react/groups.mdx
@@ -1,7 +1,39 @@
---
title: "Groups"
+description: "CometChatGroups component displays a searchable list of all available groups with icons, names, member counts, and group type indicators. Supports selection modes, custom views, filtering via GroupsRequestBuilder, and CSS styling."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```tsx
+import { CometChatGroups } from "@cometchat/chat-uikit-react";
+
+// Minimal usage
+ console.log("Selected:", group)}
+ hideSearch={false}
+ selectionMode={SelectionMode.none}
+/>
+```
+
+
+
+**AI Agent Component Spec**
+
+**Package:** `@cometchat/chat-uikit-react`
+**Import:** `import { CometChatGroups } from "@cometchat/chat-uikit-react";`
+**Minimal JSX:** `
+
## 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 +42,11 @@ The Groups is a Component, showcasing an accessible list of all available groups
+
+
+**Before using this component:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration).
+
+
The Groups component is composed of the following BaseComponents:
| Components | Description |
@@ -26,8 +63,8 @@ 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
+
+```tsx lines
import { CometChatGroups } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -40,17 +77,16 @@ export default GroupsDemo;
-
-```tsx
-import { GroupsDemo } from "./GroupsDemo";
+
+```jsx lines
+import { CometChatGroups } from "@cometchat/chat-uikit-react";
+import React from "react";
-export default function App() {
- return (
-
@@ -63,7 +99,7 @@ export default function App() {
[Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.
-##### 1. onSelect
+#### 1. onSelect
The `onSelect` action is activated when you select the done icon while in selection mode. This returns the `group` object along with the boolean flag `selected` to indicate if the group was selected or unselected.
@@ -71,7 +107,7 @@ This action does not come with any predefined behavior. However, you have the fl
-```ts
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroups, SelectionMode } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -95,7 +131,7 @@ export default GroupsDemo;
-```js
+```js lines
import { CometChatGroups, SelectionMode } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -119,13 +155,13 @@ export default GroupsDemo;
-##### 2. onItemClick
+#### 2. onItemClick
The `onItemClick` event is activated when you click on the Group List item. This action does not come with any predefined behavior. However, you have the flexibility to override this event and tailor it to suit your needs using the following code snippet.
-```ts
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroups } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -143,7 +179,7 @@ export default GroupsDemo;
-```js
+```js lines
import { CometChatGroups } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -161,13 +197,13 @@ export default GroupsDemo;
-##### 3. onError
+#### 3. onError
This action doesn't change the behavior of the component but rather listens for any errors that occur in the Groups component.
-```ts
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroups } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -185,7 +221,7 @@ export default GroupsDemo;
-```js
+```js lines
import { CometChatGroups } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -207,7 +243,7 @@ export default GroupsDemo;
**Filters** allow you to customize the data displayed in a list within a Component. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK.
-##### 1. GroupsRequestBuilder
+#### 1. GroupsRequestBuilder
The [GroupsRequestBuilder](/sdk/javascript/retrieve-groups) enables you to filter and customize the group list based on available parameters in [GroupsRequestBuilder](/sdk/javascript/retrieve-groups). This feature allows you to create more specific and targeted queries when fetching groups. The following are the parameters available in [GroupsRequestBuilder](/sdk/javascript/retrieve-groups)
@@ -225,7 +261,7 @@ In the example below, we are applying a filter to the Group List based on only j
-```ts
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroups } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -246,7 +282,7 @@ export default GroupsDemo;
-```js
+```js lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroups } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -268,7 +304,7 @@ export default GroupsDemo;
-##### 2. SearchRequestBuilder
+#### 2. SearchRequestBuilder
The SearchRequestBuilder uses [GroupsRequestBuilder](/sdk/javascript/retrieve-groups) enables you to filter and customize the search list based on available parameters in GroupsRequestBuilder. This feature allows you to keep uniformity between the displayed Groups List and searched Group List.
@@ -276,7 +312,7 @@ The SearchRequestBuilder uses [GroupsRequestBuilder](/sdk/javascript/retrieve-gr
-```ts
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroups } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -297,7 +333,7 @@ export default GroupsDemo;
-```js
+```js lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroups } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -347,7 +383,7 @@ Using CSS you can customize the look and feel of the component in your app like
-```ts
+```ts lines
import { CometChatGroups } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -361,7 +397,7 @@ export default GroupsDemo;
-```js
+```js lines
import { CometChatGroups } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -374,8 +410,8 @@ export default GroupsDemo;
-
-```css
+
+```css lines
.cometchat .cometchat-groups .cometchat-list__header-title {
background-color: #edeafa;
color: #6852d6;
@@ -445,7 +481,7 @@ These are a set of small functional customizations that allow you to fine-tune t
-```ts
+```ts lines
import { CometChatGroups, TitleAlignment } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -465,7 +501,7 @@ export default GroupsDemo;
-```js
+```js lines
import { CometChatGroups, TitleAlignment } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -528,7 +564,7 @@ Use the following code to achieve the customization shown above.
-```ts
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroups } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -557,12 +593,12 @@ export default GroupsDemo;
-```js
+```js lines
import { CometChatGroups } from "@cometchat/chat-uikit-react";
import React from "react";
const GroupsDemo = () => {
- const getItemView = (group: CometChat.Group) => {
+ const getItemView = (group) => {
return (
+
);
}
+
+export default ConversationsDemo;
```
+**Expected result:** The `CometChatConversations` component renders a scrollable list of recent conversations. Each list item shows: avatar, name, last message preview, timestamp, and unread badge.
+
### Actions
[Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.
@@ -65,9 +100,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.
+
+
+```
+
+
+
+...
}` |
+| CSS overrides | Target `.cometchat-conversations` class in global CSS | `.cometchat-conversations .cometchat-list-item { ... }` |
+
+
+
-| Components | Functionality |
-| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) supports replying to messages via the "Reply" option. Users can select "Reply" on a message to open the composer with the quoted reply pre-filled, maintaining context. |
-| [Message Composer](/ui-kit/react/message-composer) | [Message Composer](/ui-kit/react/message-composer) works seamlessly with Quoted Message by showing the quoted reply above the input field, letting users compose their response in proper context. |
+| Components | Functionality |
+| ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Threaded Message Preview](/ui-kit/react/threaded-message-preview) | [Threaded Message Preview](/ui-kit/react/threaded-message-preview) component displays the parent message along with the number of replies. |
-## Conversation and Advanced Search
+## Quoted Replies
-Conversation and Advanced Search is a powerful feature provided by CometChat that enables users to quickly find conversations, messages, and media across chats in real time. It supports filters, scopes, and custom actions, allowing users to locate content efficiently while keeping the chat experience smooth and intuitive.
+Quoted Replies is a robust feature provided by CometChat that enables users to quickly reply to specific messages by selecting the "Reply" option from a message's action menu. This enhances context, keeps conversations organized, and improves overall chat experience in both 1-1 and group chats.
-
+
| Components | Functionality |
| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Search](/ui-kit/react/search) | [Search](/ui-kit/react/search) allows users to search across conversations and messages in real time. Users can click on a result to open the conversation or jump directly to a specific message. |
-| [Message Header](/ui-kit/react/message-header) | [Message Header](/ui-kit/react/message-header) shows the search button in the chat header, allowing users to search within a conversation. |
-| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) shows the selected message when clicked from search results and highlights it in the message list. |
-| [Conversations](/ui-kit/react/conversations) | [Conversations](/ui-kit/react/conversations) displays the search input. |
+| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) supports replying to messages via the "Reply" option. Users can select "Reply" on a message to open the composer with the quoted reply pre-filled, maintaining context. |
+| [Message Composer](/ui-kit/react/message-composer) | [Message Composer](/ui-kit/react/message-composer) works seamlessly with Quoted Message by showing the quoted reply above the input field, letting users compose their response in proper context. |
-## Threaded Conversations
+## Group Chat
-The Threaded Conversations feature enables users to respond directly to a specific message in a chat. This keeps conversations organized and enhances the user experience by maintaining context, especially in group chats.
+CometChat facilitates Group Chats, allowing users to have conversations with multiple participants simultaneously. This feature is crucial for team collaborations, group discussions, social communities, and more.
-
+
-| Components | Functionality |
-| ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Threaded Message Preview](/ui-kit/react/threaded-message-preview) | [Threaded Message Preview](/ui-kit/react/threaded-message-preview) component displays the parent message along with the number of replies. |
+For a comprehensive understanding and guide on implementing and using the Groups feature in CometChat, you should refer to our detailed guide on [Groups](/ui-kit/react/groups).
## Moderation
@@ -189,12 +200,52 @@ Learn more about how flagged messages are handled, reviewed, and moderated in th
| ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) provides the "Report Message" option in the message actions menu, allowing users to initiate the reporting process for inappropriate messages. |
-## Group Chat
+## Conversation and Advanced Search
-CometChat facilitates Group Chats, allowing users to have conversations with multiple participants simultaneously. This feature is crucial for team collaborations, group discussions, social communities, and more.
+Conversation and Advanced Search is a powerful feature provided by CometChat that enables users to quickly find conversations, messages, and media across chats in real time. It supports filters, scopes, and custom actions, allowing users to locate content efficiently while keeping the chat experience smooth and intuitive.
-
+
+| Components | Functionality |
+| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Search](/ui-kit/react/search) | [Search](/ui-kit/react/search) allows users to search across conversations and messages in real time. Users can click on a result to open the conversation or jump directly to a specific message. |
+| [Message Header](/ui-kit/react/message-header) | [Message Header](/ui-kit/react/message-header) shows the search button in the chat header, allowing users to search within a conversation. |
+| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) shows the selected message when clicked from search results and highlights it in the message list. |
+| [Conversations](/ui-kit/react/conversations) | [Conversations](/ui-kit/react/conversations) displays the search input. |
+
For a comprehensive understanding and guide on implementing and using the Groups feature in CometChat, you should refer to our detailed guide on [Groups](/ui-kit/react/groups).
+
+
+
+
+
+#### 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 Engagement
+
+#### Giphy
+
+The Giphy extension allows users to search for and share GIFs in their conversations, adding a fun and expressive element to chats. For a comprehensive understanding and guide on implementing and using the Giphy Extension, refer to our specific guide on the [Giphy Extension](/fundamentals/giphy).
+
+#### Message Translation
+
+The Message Translation extension in CometChat is designed to translate any message into your local locale. It eliminates language barriers, making the chat more inclusive. For a comprehensive understanding and guide on implementing and using the Message Translation Extension, refer to our specific guide on the [Message Translation Extension](/fundamentals/message-translation).
+
+Once you have successfully activated the [Message Translation Extension](/fundamentals/message-translation) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of [MessageList Component](/ui-kit/react/message-list) component of UI Kits.
+
+
+
-### Polls
+#### Polls
The Polls extension enhances group discussions by allowing users to create polls. Users can ask questions with a predefined list of answers, enabling a quick, organized way to gather group opinions. For a comprehensive understanding and guide on implementing and using the Polls Extension, refer to our specific guide on the [Polls Extension](/fundamentals/polls).
@@ -36,17 +106,31 @@ Once you have successfully activated the [Polls Extension](/fundamentals/polls)
-### Collaborative Whiteboard
+#### Reminders
-The Collaborative Whiteboard extension facilitates real-time collaboration. Users can draw, brainstorm, and share ideas on a shared digital whiteboard. For a comprehensive understanding and guide on implementing and using the Collaborative Whiteboard Extension, refer to our specific guide on the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard).
+The Reminders extension allows users to set reminders for messages or create personal reminders. When a reminder is due, a bot sends a notification message to the user. For a comprehensive understanding and guide on implementing and using the Reminders Extension, refer to our specific guide on the [Reminders Extension](/fundamentals/reminders).
-Once you have successfully activated the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/react/message-composer) component of UI Kits.
+#### Stickers
+
+The Stickers extension allows users to express their emotions more creatively. It adds a much-needed fun element to the chat by allowing users to send various pre-designed stickers. For a comprehensive understanding and guide on implementing and using the Sticker Extension, refer to our specific guide on the [Sticker Extension](/fundamentals/stickers).
+
+Once you have successfully activated the [Sticker Extension](/fundamentals/stickers) from your CometChat Dashboard, the feature will automatically be incorporated into the [Message Composer](/ui-kit/react/message-composer) component of UI Kits.
-
+
-### Collaborative Document
+#### Stipop
+
+The Stipop extension integrates the world's trendiest sticker platform into your chat, allowing users to search for and send stickers from Stipop's extensive library. For a comprehensive understanding and guide on implementing and using the Stipop Extension, refer to our specific guide on the [Stipop Extension](/fundamentals/stickers-stipop).
+
+#### Tenor
+
+The Tenor extension allows users to search for and share GIFs from Tenor's library in their conversations. For a comprehensive understanding and guide on implementing and using the Tenor Extension, refer to our specific guide on the [Tenor Extension](/fundamentals/tenor).
+
+### Collaboration
+
+#### Collaborative Document
With the Collaborative Document extension, users can work together on a shared document. This feature is essential for remote teams where document collaboration is a recurring requirement. For a comprehensive understanding and guide on implementing and using the Collaborative Document Extension, refer to our specific guide on the [Collaborative Document Extension](/fundamentals/collaborative-document).
@@ -56,32 +140,79 @@ Once you have successfully activated the [Collaborative Document Extension](/fun
-### Message Translation
+#### Collaborative Whiteboard
-The Message Translation extension in CometChat is designed to translate any message into your local locale. It eliminates language barriers, making the chat more inclusive. For a comprehensive understanding and guide on implementing and using the Message Translation Extension, refer to our specific guide on the [Message Translation Extension](/fundamentals/message-translation).
+The Collaborative Whiteboard extension facilitates real-time collaboration. Users can draw, brainstorm, and share ideas on a shared digital whiteboard. For a comprehensive understanding and guide on implementing and using the Collaborative Whiteboard Extension, refer to our specific guide on the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard).
-Once you have successfully activated the [Message Translation Extension](/fundamentals/message-translation) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of [MessageList Component](/ui-kit/react/message-list) component of UI Kits.
+Once you have successfully activated the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/react/message-composer) component of UI Kits.
-
+
-### Link Preview
+### Security
-The Link Preview extension provides a summary of the URL shared in the chat. It includes the title, a description, and a thumbnail image from the web page. For a comprehensive understanding and guide on implementing and using the Link Preview Extension, refer to our specific guide on the [Link Preview Extension](/fundamentals/link-preview).
+#### Disappearing Messages
-Once you have successfully activated the [Link Preview Extension](/fundamentals/link-preview) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/react/message-list) component of UI Kits.
+The Disappearing Messages extension allows users to send messages that automatically disappear after a specified time interval. This works for both one-on-one and group messages. For a comprehensive understanding and guide on implementing and using the Disappearing Messages Extension, refer to our specific guide on the [Disappearing Messages Extension](/fundamentals/disappearing-messages).
-
-
-
+### Customer Support
-### Thumbnail Generation
+#### Chatwoot
-The Thumbnail Generation extension automatically creates a smaller preview image whenever a larger image is shared, helping to reduce the upload/download time and bandwidth usage. For a comprehensive understanding and guide on implementing and using the Thumbnail Generation Extension, refer to our specific guide on the [Thumbnail Generation Extension](/fundamentals/thumbnail-generation).
+The Chatwoot extension makes customer support seamless by allowing your users to communicate with your support team directly through CometChat, eliminating the need for a separate support interface. For a comprehensive understanding and guide on implementing and using the Chatwoot Extension, refer to our specific guide on the [Chatwoot Extension](/fundamentals/chatwoot).
-Once you have successfully activated the [Thumbnail Generation Extension](/fundamentals/thumbnail-generation) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/react/message-list) component of UI Kits.
+#### Intercom
-
-
-
+The Intercom extension integrates Intercom's customer support platform with CometChat, enabling users to chat with your support team using the same chat interface they use for regular conversations. For a comprehensive understanding and guide on implementing and using the Intercom Extension, refer to our specific guide on the [Intercom Extension](/fundamentals/intercom).
+
+### Smart Chat Features
+
+#### Conversation Starter
+
+Conversation Starter suggests AI-generated opening messages to help users begin a new chat. For a comprehensive understanding and guide on implementing and using Conversation Starter, refer to our specific guide on the [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter) and the [AI Features](/ui-kit/react/ai-features) overview.
+
+#### Smart Replies
+
+Smart Replies provide AI-generated response suggestions to keep conversations flowing. For a comprehensive understanding and guide on implementing and using Smart Replies, refer to our specific guide on the [Smart Replies](/fundamentals/ai-user-copilot/smart-replies) and the [AI Features](/ui-kit/react/ai-features) overview.
+
+#### Conversation Summary
+
+Conversation Summary generates an AI-written recap of a conversation when needed. For a comprehensive understanding and guide on implementing and using Conversation Summary, refer to our specific guide on the [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary) and the [AI Features](/ui-kit/react/ai-features) overview.
+
+---
+
+
+
+
-
- );
-}
+const GroupMembersDemo = () => {
+ const [chatGroup, setChatGroup] = useState(null);
+
+ useEffect(() => {
+ CometChat.getGroup("guid").then((group) => {
+ setChatGroup(group);
+ });
+ }, []);
+
+ return <>{chatGroup && ...
}` |
+| CSS overrides | Target `.cometchat-group-members` class in global CSS | `.cometchat-group-members { ... }` |
+
+
+
+
-
- );
-}
+const GroupsDemo = () => {
+ return
@@ -584,8 +620,8 @@ export default GroupsDemo;
-
-```css
+
+```css lines
.group-list-item {
display: flex;
flex-direction: column;
@@ -670,7 +706,7 @@ Use the following code to achieve the customization shown above.
-```ts
+```ts lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroups } from "@cometchat/chat-uikit-react";
@@ -688,40 +724,44 @@ const customTitleView = (group: CometChat.Group) => {
-
-```css
-.groups__title-view{
-display: flex;
-align-items: center;
-gap: 4px;
-align-self: stretch;
+
+```css lines
+.groups__title-view {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ align-self: stretch;
}
-.groups__title-view-name{
-overflow: hidden;
-color: #141414;
-text-overflow: ellipsis;
-font:500 16px Roboto
+
+.groups__title-view-name {
+ overflow: hidden;
+ color: #141414;
+ text-overflow: ellipsis;
+ font: 500 16px Roboto
}
-.groups__title-view-type{
-color: #FFF;
-font: 600 8px Roboto;
-display: flex;
-height: 15px;
-padding: 1px 3px;
-justify-content: center;
-align-items: center;
-gap: 4px;
-border-radius: 7px;
-background: #09C26F;
+
+.groups__title-view-type {
+ color: #FFF;
+ font: 600 8px Roboto;
+ display: flex;
+ height: 15px;
+ padding: 1px 3px;
+ justify-content: center;
+ align-items: center;
+ gap: 4px;
+ border-radius: 7px;
+ background: #09C26F;
}
-.groups__title-view-public .groups__title-view-type{
-background: #0B7BEA;
+
+.groups__title-view-public .groups__title-view-type {
+ background: #0B7BEA;
}
-.groups__title-view-type img{
-background: #fff;
-border-radius: 4px;
-height: 12px;
-width: 12px;
+
+.groups__title-view-type img {
+ background: #fff;
+ border-radius: 4px;
+ height: 12px;
+ width: 12px;
}
```
@@ -751,7 +791,7 @@ Use the following code to achieve the customization shown above.
-```ts
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroups } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -778,7 +818,7 @@ export default GroupsDemo;
-```js
+```js lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroups } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -804,8 +844,8 @@ export default GroupsDemo;
-
-```css
+
+```css lines
.cometchat .cometchat-groups .group-subtitle {
overflow: hidden;
color: #727272;
@@ -836,7 +876,7 @@ Use the following code to achieve the customization shown above.
-```ts
+```ts lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroups,CometChatAvatar } from "@cometchat/chat-uikit-react";
@@ -870,33 +910,35 @@ import { CometChatGroups,CometChatAvatar } from "@cometchat/chat-uikit-react";
-
-```css
-
-.cometchat-groups .cometchat-list-item .groups__leading-view .cometchat-avatar__image, .cometchat-groups .cometchat-list-item .groups__leading-view .cometchat-avatar{
- border-radius: 8px;
- height: 48px ;
- width: 48px ;
+
+```css lines
+.cometchat-groups .cometchat-list-item .groups__leading-view .cometchat-avatar__image,
+.cometchat-groups .cometchat-list-item .groups__leading-view .cometchat-avatar {
+ border-radius: 8px;
+ height: 48px;
+ width: 48px;
}
-.groups__leading-view-info{
- display: flex;
- width: 48px;
- height: 15px;
- padding: 1px 3px;
- justify-content: center;
- align-items: center;
- color:#FFF;
- font:600 8px/9.6px Roboto;
- background:#FFAB00;
- position:absolute;
- bottom:-2px;
+.groups__leading-view-info {
+ display: flex;
+ width: 48px;
+ height: 15px;
+ padding: 1px 3px;
+ justify-content: center;
+ align-items: center;
+ color: #FFF;
+ font: 600 8px/9.6px Roboto;
+ background: #FFAB00;
+ position: absolute;
+ bottom: -2px;
}
-.groups__leading-view-joined .groups__leading-view-info{
- background:#09C26F;
+
+.groups__leading-view-joined .groups__leading-view-info {
+ background: #09C26F;
}
-.groups__leading-view{
- position: relative;
+
+.groups__leading-view {
+ position: relative;
}
```
@@ -918,7 +960,7 @@ Use the following code to achieve the customization shown above.
-```ts
+```ts lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
@@ -937,23 +979,24 @@ return
-
-```css
-.groups__trailing-view{
-display: flex;
-padding: 4px 12px;
-justify-content: center;
-align-items: center;
-border-radius: 1000px;
-background: #EDEAFA;
-overflow: hidden;
-color: #6852D6;
-text-overflow: ellipsis;
-font:700 12px Roboto;
+
+```css lines
+.groups__trailing-view {
+ display: flex;
+ padding: 4px 12px;
+ justify-content: center;
+ align-items: center;
+ border-radius: 1000px;
+ background: #EDEAFA;
+ overflow: hidden;
+ color: #6852D6;
+ text-overflow: ellipsis;
+ font: 700 12px Roboto;
}
-.cometchat-groups .cometchat-list-item__trailing-view{
-width: fit-content;
-height: fit-content;
+
+.cometchat-groups .cometchat-list-item__trailing-view {
+ width: fit-content;
+ height: fit-content;
}
```
@@ -977,7 +1020,7 @@ Use the following code to achieve the customization shown above.
-```ts
+```ts lines
import { CometChatGroups } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -995,7 +1038,7 @@ export default GroupsDemo;
-```js
+```js lines
import { CometChatGroups } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -1012,8 +1055,8 @@ export default GroupsDemo;
-
-```css
+
+```css lines
.group-header-view {
height: 24px;
width: 24px;
@@ -1051,7 +1094,7 @@ Use the following code to achieve the customization shown above.
-```ts
+```ts lines
import { CometChatGroups, CometChatOption } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -1077,12 +1120,12 @@ export default GroupsDemo;
-```js
+```js lines
import { CometChatGroups, CometChatOption } from "@cometchat/chat-uikit-react";
import React from "react";
const GroupsDemo = () => {
- const getOptions = (group: CometChat.Group): CometChatOption[] => {
+ const getOptions = (group) => {
return [
new CometChatOption({
id: "delete",
@@ -1102,28 +1145,73 @@ export default GroupsDemo;
-
-```css
+
+```css lines
.cometchat .cometchat-groups .cometchat-menu-list__menu {
- background: none;
+ background: none;
}
+
.cometchat .cometchat-groups .cometchat-menu-list__main-menu-item-icon {
- height: 24px;
- width: 24px;
- display: flex;
- align-items: center;
- justify-content: center;
- border: none;
- align-self: center;
- background: #f44649;
- flex-shrink: 0;
- -webkit-mask: url("../assets/delete.svg") center center no-repeat;
- mask: url("../assets/delete.svg") center center no-repeat;
- -webkit-mask-size: contain;
- mask-size: contain;
+ height: 24px;
+ width: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: none;
+ align-self: center;
+ background: #f44649;
+ flex-shrink: 0;
+ -webkit-mask: url("../assets/delete.svg") center center no-repeat;
+ mask: url("../assets/delete.svg") center center no-repeat;
+ -webkit-mask-size: contain;
+ mask-size: contain;
}
```
+
+
+## Component API Pattern
+
+| Customization Type | Prop Pattern | Example |
+| --- | --- | --- |
+| Callback actions | `on={(param) => {}}` | `onItemClick={(group) => {}}` |
+| Data filtering | `groupsRequestBuilder={new CometChat.GroupsRequestBuilder()}` | `groupsRequestBuilder={builder}` |
+| Toggle features | `hide={true\|false}` | `hideSearch={true}` |
+| Custom rendering | `View={() => JSX}` | `itemView={(group) =>
+
+
+| Symptom | Cause | Fix |
+| --- | --- | --- |
+| Component doesn't render | `CometChatUIKit.init()` not called or not awaited | Ensure init completes before rendering. See [Methods](/ui-kit/react/methods) |
+| Component renders but shows no data | User not logged in | Call `CometChatUIKit.login("UID")` after init |
+| Callback not firing | Wrong prop name or signature | Check the Actions section for exact prop name and parameter types |
+| Custom view not appearing | Returning `null` or `undefined` from view prop | Ensure view function returns valid JSX |
+| SSR hydration error | Component uses browser APIs on server | Wrap in `useEffect` or dynamic import with `ssr: false`. See [Next.js Integration](/ui-kit/react/next-js-integration) |
+
+
+
+
+---
+
+## Next Steps
+
+
+
+ View and manage members within a group
+
+
+ Display and manage user lists
+
+
+ Display recent conversations
+
+
+ Render messages in a chat view
+
+
diff --git a/ui-kit/react/guide-block-unblock-user.mdx b/ui-kit/react/guide-block-unblock-user.mdx
index f758f45b3..decaeebd7 100644
--- a/ui-kit/react/guide-block-unblock-user.mdx
+++ b/ui-kit/react/guide-block-unblock-user.mdx
@@ -1,8 +1,20 @@
---
title: "Block/Unblock Users"
sidebarTitle: "Block/Unblock Users"
+description: "Implement block and unblock user functionality in CometChat React UI Kit with composer state management."
---
+
+- **Package:** `@cometchat/chat-uikit-react`
+- **Key components:** `CometChatMessages` — uses `CometChat.blockUsers()` / `CometChat.unblockUsers()` SDK methods
+- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")`
+- **Events:** `CometChatUserEvents.ccUserBlocked`, `CometChatUserEvents.ccUserUnblocked`
+- **UI helpers:** `CometChatConfirmDialog`, `CometChatToast`
+- **Sample app:** [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app)
+- **Related:** [All Guides](/ui-kit/react/guide-overview)
+
+
+
Implement user blocking functionality to prevent unwanted communication in your React chat app.
## Overview
@@ -279,11 +291,21 @@ CometChat.blockUsers([UID]).then(
---
-## Next Steps & Further Reading
-
-- [CometChat React UI Kit Documentation](https://www.cometchat.com/docs/ui-kit/react/overview)
-- [Sample App Repository](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app)
-- User Management Features
-- Advanced Customization Guide
-- Event Handling Documentation
-
+## Next Steps
+
+
+
+ Display and manage user lists.
+
+
+ Customize the message input component.
+
+
+ Browse all feature and formatter guides.
+
+
+ Full working sample application on GitHub.
+
+
+
+***
diff --git a/ui-kit/react/guide-call-log-details.mdx b/ui-kit/react/guide-call-log-details.mdx
index a029b601e..f35c4e5ae 100644
--- a/ui-kit/react/guide-call-log-details.mdx
+++ b/ui-kit/react/guide-call-log-details.mdx
@@ -1,8 +1,19 @@
---
title: "Call Log Details"
sidebarTitle: "Call Log Details"
+description: "Build a detailed call insights screen with metadata, participants, and recordings in CometChat React UI Kit."
---
+
+- **Packages:** `@cometchat/chat-uikit-react` + `@cometchat/calls-sdk-javascript`
+- **Key components:** `CometChatCallDetails`, `CometChatCallDetailsInfo`, `CometChatCallDetailsParticipants`, `CometChatCallDetailsRecording`
+- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` + Calls SDK installed
+- **Purpose:** Detailed call insights screen with metadata, participants, and recordings
+- **Sample app:** [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app)
+- **Related:** [All Guides](/ui-kit/react/guide-overview)
+
+
+
Display comprehensive call information and history when users select calls from the calls tab in your React chat app.
## Overview
@@ -303,3 +314,22 @@ useEffect(() => {
| Call history | `CometChatCallDetailsHistory` | [CometChatCallLogHistory.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCallLog/CometChatCallLogHistory.tsx) |
| Tab navigation | `activeTab` state | [CometChatCallLogDetails.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCallLog/CometChatCallLogDetails.tsx) |
| User status monitoring| `CometChat.addUserListener()` | [CometChatCallLogDetails.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCallLog/CometChatCallLogDetails.tsx) |
+
+## Next Steps
+
+
+
+ The call logs component reference.
+
+
+ Overview of calling capabilities.
+
+
+ Browse all feature and formatter guides.
+
+
+ Full working sample application on GitHub.
+
+
+
+***
diff --git a/ui-kit/react/guide-group-chat.mdx b/ui-kit/react/guide-group-chat.mdx
index b62e735ec..c9c232af6 100644
--- a/ui-kit/react/guide-group-chat.mdx
+++ b/ui-kit/react/guide-group-chat.mdx
@@ -1,8 +1,19 @@
---
title: "Group Chat"
sidebarTitle: "Group Chat"
+description: "Implement group management including create, join, members, roles, and ownership transfer in CometChat React UI Kit."
---
+
+- **Package:** `@cometchat/chat-uikit-react`
+- **Key components:** `CometChatGroups`, `CometChatGroupMembers`, `CometChatCreateGroup`, `CometChatJoinGroup`
+- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")`
+- **Features:** Create public/private/password-protected groups, manage members, roles, ownership transfer
+- **Sample app:** [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app)
+- **Related:** [All Guides](/ui-kit/react/guide-overview)
+
+
+
Implement comprehensive group management functionality including creation, joining, member management, and administrative controls in your React chat app.
---
@@ -337,11 +348,21 @@ const handleGroupOperation = async (operation: () => Promise) => {
---
-## Next Steps & Further Reading
-
-- [CometChat React UI Kit Documentation](https://www.cometchat.com/docs/ui-kit/react/overview)
-- [Sample App Repository](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app)
-- Group Management Features
-- Advanced Customization Guide
-- Member Management Documentation
-
+## Next Steps
+
+
+
+ Display and manage group lists.
+
+
+ Display and manage group member lists.
+
+
+ Browse all feature and formatter guides.
+
+
+ Full working sample application on GitHub.
+
+
+
+***
diff --git a/ui-kit/react/guide-message-privately.mdx b/ui-kit/react/guide-message-privately.mdx
index 1d0add7ad..4054ae49e 100644
--- a/ui-kit/react/guide-message-privately.mdx
+++ b/ui-kit/react/guide-message-privately.mdx
@@ -1,8 +1,19 @@
---
title: "Message Privately"
sidebarTitle: "Message Privately"
+description: "Launch a direct 1:1 chat from a group member profile in CometChat React UI Kit."
---
+
+- **Package:** `@cometchat/chat-uikit-react`
+- **Key components:** `CometChatMessages`, `CometChatGroupMembers`, `CometChatMessageComposer`, `CometChatMessageList`, `CometChatMessageHeader`
+- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")`
+- **Purpose:** Launch a direct 1:1 chat from a group member profile
+- **Sample app:** [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app)
+- **Related:** [All Guides](/ui-kit/react/guide-overview)
+
+
+
Enable users to initiate private conversations with group members directly from group chat interfaces.
## Overview
@@ -316,10 +327,21 @@ const startPrivateChatFromGroup = async (user: CometChat.User, group: CometChat.
---
-## Next Steps & Further Reading
-
-- [CometChat React UI Kit Documentation](https://www.cometchat.com/docs/ui-kit/react/overview)
-- [Sample App Repository](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app)
-- Group Management Features
-- User Management Features
-- Message Types & Features
+## Next Steps
+
+
+
+ Display and manage group member lists.
+
+
+ Render real-time message threads.
+
+
+ Browse all feature and formatter guides.
+
+
+ Full working sample application on GitHub.
+
+
+
+***
diff --git a/ui-kit/react/guide-new-chat.mdx b/ui-kit/react/guide-new-chat.mdx
index 54ee2e6b2..d9a341c26 100644
--- a/ui-kit/react/guide-new-chat.mdx
+++ b/ui-kit/react/guide-new-chat.mdx
@@ -1,8 +1,19 @@
---
title: "New Chat"
sidebarTitle: "New Chat"
+description: "Build a unified new chat entry point for starting 1:1 or group conversations in CometChat React UI Kit."
---
+
+- **Package:** `@cometchat/chat-uikit-react`
+- **Key components:** `CometChatUsers`, `CometChatGroups`, `CometChatJoinGroup`, `CometChatSelector`
+- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")`
+- **Purpose:** Unified new chat entry point for starting 1:1 or group conversations
+- **Sample app:** [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app)
+- **Related:** [All Guides](/ui-kit/react/guide-overview)
+
+
+
Enable users to create new conversations with individual users or join existing groups in your React chat app.
## Overview
@@ -257,9 +268,21 @@ const joinGroup = (e) => {
---
-## Next Steps & Further Reading
-
-- [CometChat React UI Kit Documentation](https://www.cometchat.com/docs/ui-kit/react/overview)
-- [Sample App Repository](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app)
-- User Management Features
-- Group Management Features
+## Next Steps
+
+
+
+ Display and manage conversation lists.
+
+
+ Display and manage group lists.
+
+
+ Browse all feature and formatter guides.
+
+
+ Full working sample application on GitHub.
+
+
+
+***
diff --git a/ui-kit/react/guide-overview.mdx b/ui-kit/react/guide-overview.mdx
index 10ab044fd..d619e5f0b 100644
--- a/ui-kit/react/guide-overview.mdx
+++ b/ui-kit/react/guide-overview.mdx
@@ -1,7 +1,17 @@
---
title: "Overview"
sidebarTitle: "Overview"
+description: "Index of task-oriented feature guides for the CometChat React UI Kit."
---
+
+
+- **Package:** `@cometchat/chat-uikit-react`
+- **Purpose:** Index of task-oriented feature guides for the React UI Kit
+- **Sample app:** [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app)
+- **Components:** [Components Overview](/ui-kit/react/components-overview)
+- **Guides:** [Block/Unblock](/ui-kit/react/guide-block-unblock-user) | [Call Log Details](/ui-kit/react/guide-call-log-details) | [Group Chat](/ui-kit/react/guide-group-chat) | [Message Privately](/ui-kit/react/guide-message-privately) | [New Chat](/ui-kit/react/guide-new-chat) | [Search Messages](/ui-kit/react/guide-search-messages) | [Threaded Messages](/ui-kit/react/guide-threaded-messages)
+
+
> This page indexes focused, task‑oriented feature guides for the React UI Kit. Each guide shows how to implement a specific capability end‑to‑end using UI components.
## When to Use These Guides
@@ -26,3 +36,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
+
+
diff --git a/ui-kit/react/guide-search-messages.mdx b/ui-kit/react/guide-search-messages.mdx
index 072126f4f..97bdf7bf2 100644
--- a/ui-kit/react/guide-search-messages.mdx
+++ b/ui-kit/react/guide-search-messages.mdx
@@ -1,8 +1,19 @@
---
title: "Search Messages"
sidebarTitle: "Search Messages"
+description: "Add full-text message search across conversations with result routing in CometChat React UI Kit."
---
+
+- **Package:** `@cometchat/chat-uikit-react`
+- **Key components:** `CometChatSearchMessages`, `CometChatMessageList`, `CometChatMessageComposer`, `CometChatMessageHeader`
+- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")`
+- **Purpose:** Full-text message search across conversations with result routing and navigation
+- **Sample app:** [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app)
+- **Related:** [All Guides](/ui-kit/react/guide-overview)
+
+
+
Enable users to search messages within conversations and group chats using CometChat's React UI Kit.
## Overview
@@ -178,9 +189,21 @@ try {
---
-## Next Steps & Further Reading
-
-- [CometChat React UI Kit Documentation](https://www.cometchat.com/docs/ui-kit/react/overview)
-- [Sample App Repository](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app)
-- Message Management Features
-- Advanced Search Features
+## Next Steps
+
+
+
+ The search component reference.
+
+
+ Render real-time message threads.
+
+
+ Browse all feature and formatter guides.
+
+
+ Full working sample application on GitHub.
+
+
+
+***
diff --git a/ui-kit/react/guide-threaded-messages.mdx b/ui-kit/react/guide-threaded-messages.mdx
index 50c06c07f..11c6f7e05 100644
--- a/ui-kit/react/guide-threaded-messages.mdx
+++ b/ui-kit/react/guide-threaded-messages.mdx
@@ -1,8 +1,20 @@
---
title: "Threaded Messages"
sidebarTitle: "Threaded Messages"
+description: "Implement threaded message replies with parent context, reply list, and focused thread composer in CometChat React UI Kit."
---
+
+- **Package:** `@cometchat/chat-uikit-react`
+- **Key components:** `CometChatThreadedMessages`, `CometChatThreadHeader`, `CometChatMessageList`, `CometChatMessageComposer`
+- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")`
+- **Purpose:** Threaded message replies with parent context, reply list, and focused thread composer
+- **Entry point:** `CometChatMessages.onThreadRepliesClick` opens thread view from group messages
+- **Sample app:** [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app)
+- **Related:** [All Guides](/ui-kit/react/guide-overview)
+
+
+
Enable organized threaded conversations within group chats using CometChat's React UI Kit.
## Overview
@@ -211,5 +223,19 @@ useEffect(() => {
## Next Steps
-- Explore [CometChat React UI Kit Docs](https://www.cometchat.com/docs/ui-kit/react/overview)
-- Check the [Sample App Repo](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app)
+
+
+ Render real-time message threads.
+
+
+ Customize the thread header component.
+
+
+ Browse all feature and formatter guides.
+
+
+ Full working sample application on GitHub.
+
+
+
+***
diff --git a/ui-kit/react/incoming-call.mdx b/ui-kit/react/incoming-call.mdx
index e55f9f37f..cf90bf14c 100644
--- a/ui-kit/react/incoming-call.mdx
+++ b/ui-kit/react/incoming-call.mdx
@@ -1,7 +1,39 @@
---
title: "Incoming Call"
+description: "Display and manage incoming voice and video calls with accept/decline controls using the CometChatIncomingCall component."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```tsx
+import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
+
+// Minimal usage — auto-detects incoming calls
+ console.log("Call accepted")}
+ onDecline={() => console.log("Call declined")}
+ disableSoundForCalls={false}
+/>
+```
+
+
+
+**AI Agent Component Spec**
+
+**Package:** `@cometchat/chat-uikit-react`
+**Import:** `import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";`
+**Minimal JSX:** `
+
## 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 +42,7 @@ The `Incoming call` is a Component that serves as a visual representation when t
+
The `Incoming Call` is comprised of the following base components:
| Components | Description |
@@ -18,13 +51,18 @@ The `Incoming Call` is comprised of the following base components:
| cometchat-button | This component represents a button with optional icon and text. |
| cometchat-avatar | This component component displays an image or user's avatar with fallback to the first two letters of the username. |
+
+
+**Before using this component:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration).
+
+
## Usage
### Integration
-
-```tsx
+
+```tsx lines
import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -37,19 +75,16 @@ export default IncomingCallsDemo;
-
-```tsx
-import { IncomingCallsDemo } from "./IncomingCallsDemo";
+
+```jsx lines
+import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
+import React from "react";
-export default function App() {
- return (
-
@@ -60,13 +95,13 @@ export default function App() {
[Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.
-##### 1. onAccept
+#### 1. onAccept
`onAccept` is triggered when you click the accept button of the `Incoming Call` component. You can override this action using the following code snippet.
-```ts
+```ts lines
import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -84,7 +119,7 @@ export default IncomingCallsDemo;
-```js
+```js lines
import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -103,13 +138,13 @@ export default IncomingCallsDemo;
-##### 2. onDecline
+#### 2. onDecline
`onDecline` is triggered when you click the Decline button of the `Incoming Call` component. You can override this action using the following code snippet.
-```ts
+```ts lines
import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -127,7 +162,7 @@ export default IncomingCallsDemo;
-```js
+```js lines
import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -146,13 +181,13 @@ export default IncomingCallsDemo;
-##### 3. onError
+#### 3. onError
This action doesn't change the behavior of the component but rather listens for any errors that occur in the Incoming Call component.
-```ts
+```ts lines
import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -170,7 +205,7 @@ export default IncomingCallsDemo;
-```js
+```js lines
import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -197,7 +232,7 @@ You can set `CallSettingsBuilder` in the Incoming Call Component to customise th
-```ts
+```ts lines
import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -221,7 +256,7 @@ export default IncomingCallsDemo;
-```js
+```js lines
import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -260,7 +295,7 @@ The list of events emitted by the Incoming Call component is as follows.
-```tsx
+```tsx lines
const ccCallRejected = CometChatCallEvents.ccCallRejected.subscribe(
(call: CometChat.Call) => {
//Your Code
@@ -288,7 +323,7 @@ const ccCallEnded = CometChatCallEvents.ccCallEnded.subscribe(
-```tsx
+```tsx lines
ccCallRejected?.unsubscribe();
ccCallAccepted?.unsubscribe();
@@ -318,7 +353,7 @@ Using CSS you can customize the look and feel of the component in your app like
-```ts
+```ts lines
import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -332,7 +367,7 @@ export default IncomingCallsDemo;
-```js
+```js lines
import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -345,8 +380,8 @@ export default IncomingCallsDemo;
-
-```css
+
+```css lines
.cometchat-incoming-call {
display: flex;
width: 555px;
@@ -469,7 +504,7 @@ Here is a code snippet demonstrating how you can customize the functionality of
-```ts
+```ts lines
import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -487,7 +522,7 @@ export default IncomingCallsDemo;
-```js
+```js lines
import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -528,7 +563,7 @@ Property `subtitleView` is a function that renders a JSX element to display the
-```ts
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -547,7 +582,7 @@ export default IncomingCallsDemo;
-```js
+```js lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -581,7 +616,7 @@ Use the following code to achieve the customization shown above.
-```ts
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatAvatar, CometChatIncomingCall } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -604,7 +639,7 @@ export default IncomingCallsDemo;
-```js
+```js lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatAvatar, CometChatIncomingCall } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -626,8 +661,8 @@ export default IncomingCallsDemo;
-
-```css
+
+```css lines
.cometchat-incoming-call__avatar {
display: none;
}
@@ -651,7 +686,7 @@ Use the following code to achieve the customization shown above.
-```ts
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -678,7 +713,7 @@ export default IncomingCallsDemo;
-```js
+```js lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -704,8 +739,8 @@ export default IncomingCallsDemo;
-
-```css
+
+```css lines
.incoming-call__title-wrapper {
display: flex;
width: 370px;
@@ -756,7 +791,7 @@ Use the following code to achieve the customization shown above.
-```ts
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -780,7 +815,7 @@ export default IncomingCallsDemo;
-```js
+```js lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -803,8 +838,8 @@ export default IncomingCallsDemo;
-
-```css
+
+```css lines
.incoming-call__avatar {
display: flex;
height: 62px;
@@ -845,7 +880,7 @@ Use the following code to achieve the customization shown above.
-```ts
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatAvatar, CometChatIncomingCall } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -876,7 +911,7 @@ export default IncomingCallsDemo;
-```js
+```js lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatAvatar, CometChatIncomingCall } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -906,8 +941,8 @@ export default IncomingCallsDemo;
-
-```css
+
+```css lines
.incoming-call__itemview {
display: flex;
flex-direction: column;
@@ -945,3 +980,38 @@ export default IncomingCallsDemo;
+
+
+
+
+
+| Symptom | Cause | Fix |
+| --- | --- | --- |
+| Component doesn't render | `CometChatUIKit.init()` not called or not awaited | Ensure init completes before rendering. See [Methods](/ui-kit/react/methods) |
+| Component renders but no incoming call shown | User not logged in or no active incoming call | Call `CometChatUIKit.login("UID")` after init. The component auto-detects incoming calls. |
+| Callback not firing | Wrong prop name or signature | Check the Actions section for exact prop name and parameter types |
+| Custom view not appearing | Returning `null` or `undefined` from view prop | Ensure view function returns valid JSX |
+| No ringtone playing | `disableSoundForCalls` set to `true` or custom sound path invalid | Set `disableSoundForCalls={false}` and verify custom sound file path |
+| SSR hydration error | Component uses browser APIs on server | Wrap in `useEffect` or dynamic import with `ssr: false`. See [Next.js Integration](/ui-kit/react/next-js-integration) |
+
+
+
+
+---
+
+## Next Steps
+
+
+
+ Manage outgoing voice and video calls
+
+
+ Add voice and video call buttons to your chat
+
+
+ Display call history and call log details
+
+
+ Overview of all calling capabilities
+
+
diff --git a/ui-kit/react/link/changelog.mdx b/ui-kit/react/link/changelog.mdx
index 8c698a26d..e3acadbd7 100644
--- a/ui-kit/react/link/changelog.mdx
+++ b/ui-kit/react/link/changelog.mdx
@@ -1,4 +1,4 @@
---
title: "Changelog"
url: "https://github.com/cometchat/cometchat-uikit-react/releases?q=v6&expanded=true"
----
\ No newline at end of file
+---
diff --git a/ui-kit/react/link/figma.mdx b/ui-kit/react/link/figma.mdx
index 172dd3788..784cf16e7 100644
--- a/ui-kit/react/link/figma.mdx
+++ b/ui-kit/react/link/figma.mdx
@@ -1,4 +1,4 @@
---
title: "Figma Design"
url: "https://www.figma.com/community/file/1442863561340379957/cometchat-ui-kit-for-web"
----
\ No newline at end of file
+---
diff --git a/ui-kit/react/link/sample.mdx b/ui-kit/react/link/sample.mdx
index 3f7e45be6..d7748ae0d 100644
--- a/ui-kit/react/link/sample.mdx
+++ b/ui-kit/react/link/sample.mdx
@@ -1,4 +1,4 @@
---
title: "React Sample App"
url: "https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app"
----
\ No newline at end of file
+---
diff --git a/ui-kit/react/localize.mdx b/ui-kit/react/localize.mdx
index 45f62ad52..42ca888c2 100644
--- a/ui-kit/react/localize.mdx
+++ b/ui-kit/react/localize.mdx
@@ -1,8 +1,20 @@
---
title: "Localization"
sidebarTitle: "Localize"
+description: "Configure multi-language localization, custom translations, and date/time formatting in CometChat React UI Kit."
---
+
+- **Package:** `@cometchat/chat-uikit-react`
+- **Import:** `import { CometChatLocalize } from "@cometchat/chat-uikit-react";`
+- **Set language:** `CometChatLocalize.setCurrentLanguage("fr")`
+- **Init with config:** `CometChatLocalize.init({ language: "es", fallbackLanguage: "en-US", disableAutoDetection: false })`
+- **Add translations:** `CometChatLocalize.addTranslation({ "en-US": { "welcome_message": "Welcome!" } })`
+- **19 supported languages:** en-US, en-GB, nl, fr, de, hi, it, ja, ko, pt, ru, es, tr, zh, zh-TW, ms, sv, lt, hu
+- **Date formatting:** Use `CalendarObject` for custom date/time patterns
+- **Source:** [GitHub](https://github.com/cometchat/cometchat-uikit-react/blob/v6/src/resources/CometChatLocalize/cometchat-localize.ts)
+
+
## **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 +403,40 @@ To apply a **custom date format** only within a specific component.
/>
```
-***
\ No newline at end of file
+
+## Common Failure Modes
+
+
+
+
+| Symptom | Cause | Fix |
+| --- | --- | --- |
+| UI text not translated | Language code not matching supported codes | Check the supported languages table for exact codes (e.g., `en-US` not `en`) |
+| Custom translations not appearing | `addTranslation` called before `init` | Call `CometChatLocalize.init()` first, then `addTranslation()` |
+| Date/time format unchanged | `disableDateTimeLocalization` set to `true` | Set `disableDateTimeLocalization: false` in init config |
+| Component-level CalendarObject ignored | Prop name mismatch | Check the component docs for the exact prop name (e.g., `lastActiveAtDateTimeFormat`) |
+| Missing translation key shows raw key | No `missingKeyHandler` configured | Add a `missingKeyHandler` function in init config |
+
+
+
+
+***
+
+## Next Steps
+
+
+
+ Configure audio cues for calls and messages.
+
+
+ Customize colors, fonts, and styles.
+
+
+ Explore all available prebuilt UI components.
+
+
+ Init, login, logout, and other UI Kit methods.
+
+
+
+***
diff --git a/ui-kit/react/mentions-formatter-guide.mdx b/ui-kit/react/mentions-formatter-guide.mdx
index f5e8d6860..1d0626569 100644
--- a/ui-kit/react/mentions-formatter-guide.mdx
+++ b/ui-kit/react/mentions-formatter-guide.mdx
@@ -1,7 +1,18 @@
---
title: "Mentions Formatter"
+description: "Add @mentions with styled tokens, suggestion list, and click handling in CometChat React UI Kit."
---
+
+- **Package:** `@cometchat/chat-uikit-react`
+- **Key class:** `CometChatMentionsFormatter` (extends `CometChatTextFormatter`)
+- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")`
+- **Purpose:** Format @mentions with styled tokens, suggestion list, and click handling for users and group members
+- **Sample app:** [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app)
+- **Related:** [Custom Text Formatter](/ui-kit/react/custom-text-formatter-guide) | [All Guides](/ui-kit/react/guide-overview)
+
+
+
## Overview
The `CometChatMentionsFormatter` class is a part of the CometChat UI Kit, a ready-to-use chat UI component library for integrating CometChat into your React applications. This class provides functionality to format mentions within text messages displayed in the chat interface. Mentions allow users to reference other users within a conversation, providing a convenient way to direct messages or involve specific participants.
@@ -48,3 +59,22 @@ mentionsFormatter.setCometChatUserGroupMembers(userList);
The `formattedMessage` now contains HTML with styled mentions, ready to be inserted into your message component for display.
Below is an example demonstrating how to use the `CometChatMentionsFormatter` class in components such as [CometChatConversations](/ui-kit/react/conversations), [CometChatMessageList](/ui-kit/react/message-list), [CometChatMessageComposer](/ui-kit/react/message-composer).
+
+## Next Steps
+
+
+
+ Build custom inline text patterns.
+
+
+ Render real-time message threads.
+
+
+ Browse all feature and formatter guides.
+
+
+ Full working sample application on GitHub.
+
+
+
+***
diff --git a/ui-kit/react/message-composer.mdx b/ui-kit/react/message-composer.mdx
index 67249e000..7687fe9ed 100644
--- a/ui-kit/react/message-composer.mdx
+++ b/ui-kit/react/message-composer.mdx
@@ -1,7 +1,36 @@
---
title: "Message Composer"
+description: "CometChatMessageComposer component provides a rich text input for composing and sending messages including text, media, attachments, reactions, mentions, and voice notes. Supports custom actions, AI features, and CSS styling."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```tsx
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
+
+// For a user chat
+
+
+
+**AI Agent Component Spec**
+
+**Package:** `@cometchat/chat-uikit-react`
+**Import:** `import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";`
+**Minimal JSX:** `
+
## 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 +41,11 @@ Features such as **Attachments**, and **Message Editing** are also supported by
+
+
+**Before using this component:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration).
+
+
## Usage
### Integration
@@ -19,8 +53,8 @@ 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
+
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
@@ -43,18 +77,25 @@ export function MessageComposerDemo() {
-
-```tsx
-import { MessageComposerDemo } from "./MessageComposerDemo";
+
+```jsx lines
+import React, { useState, useEffect } from "react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
-export default function App() {
- return (
-
...
}` |
+| CSS overrides | Target `.cometchat-groups` class in global CSS | `.cometchat-groups { ... }` |
+
+
+
The `Incoming Call` is comprised of the following base components:
| Components | Description |
@@ -18,13 +51,18 @@ The `Incoming Call` is comprised of the following base components:
| cometchat-button | This component represents a button with optional icon and text. |
| cometchat-avatar | This component component displays an image or user's avatar with fallback to the first two letters of the username. |
+
+
-
- );
-}
+const IncomingCallsDemo = () => {
+ return
-
-
+
+
-
-
-```tsx
+
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
@@ -100,15 +141,44 @@ export function MessageComposerDemo() {
+
+```jsx lines
+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
+#### 2. onError
This action doesn't change the behavior of the component but rather listens for any errors that occur in the MessageList component.
-```tsx
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
@@ -138,13 +208,13 @@ export function MessageComposerDemo() {
-##### 3. onTextChange
+#### 3. onTextChange
This event is triggered as the user starts typing in the Message Composer.
-```tsx
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
@@ -177,13 +247,13 @@ export function MessageComposerDemo() {
-##### 4. Custom Mentions Request Builders
+#### 4. Custom Mentions Request Builders
You can customize how mentioned users and group members are fetched by providing custom request builders.
-```tsx
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
@@ -261,7 +331,7 @@ Adding `CometChatMessageEvents` Listener's
-```js
+```js lines
import { CometChatMessageEvents } from "@cometchat/chat-uikit-react";
const ccMessageEdited = CometChatMessageEvents.ccMessageEdited.subscribe(() => {
@@ -287,7 +357,7 @@ Removing `CometChatMessageEvents` Listener's
-```js
+```js lines
ccMessageEdited?.unsubscribe();
ccReplyToMessage?.unsubscribe();
ccMessageSent?.unsubscribe();
@@ -315,7 +385,7 @@ To modify the styling, you can customise the css of MessageComposer Component.
-```tsx
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
@@ -326,7 +396,7 @@ import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
-```css
+```css lines
.cometchat-message-composer .cometchat-message-composer__input {
font-family: "SF Pro";
}
@@ -352,7 +422,7 @@ These are a set of small functional customizations that allow you to fine-tune t
-```tsx
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
@@ -423,7 +493,7 @@ Use the following code to achieve the customization shown above.
-```tsx
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
@@ -465,7 +535,7 @@ function getAttachments() {
-```css
+```css lines
.cometchat-message-composer__secondary-button-view-attachment-button
.cometchat-action-sheet {
border: none;
@@ -520,7 +590,7 @@ Use the following code to achieve the customization shown above.
-```tsx
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
@@ -570,7 +640,7 @@ Use the following code to achieve the customization shown above.
-```tsx
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
@@ -593,7 +663,7 @@ const sendButtonView = (
-```css
+```css lines
.cometchat-message-composer
div:not([class])
.message-composer__send-button
@@ -635,7 +705,7 @@ Use the following code to achieve the customization shown above.
-```tsx
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
@@ -657,7 +727,7 @@ const getHeaderView = () => {
-```css
+```css lines
.cometchat-message-composer .message-composer__header-view {
display: flex;
align-items: center;
@@ -711,7 +781,7 @@ Assigns the list of text formatters. If the provided list is not null, it sets t
-```ts
+```ts lines
import { CometChatTextFormatter } from "@cometchat/chat-uikit-react";
import DialogHelper from "./Dialog";
import { CometChat } from "@cometchat/chat-sdk-javascript";
@@ -825,7 +895,7 @@ export default ShortcutFormatter;
-```tsx
+```tsx lines
import React from "react";
import ReactDOM from "react-dom";
@@ -890,7 +960,7 @@ export default class DialogHelper {
-```tsx
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
@@ -920,3 +990,36 @@ export function MessageComposerDemo() {
***
+
+
+
+
+| Symptom | Cause | Fix |
+| --- | --- | --- |
+| Component doesn't render | `CometChatUIKit.init()` not called or not awaited | Ensure init completes before rendering. See [Methods](/ui-kit/react/methods) |
+| Component renders but can't send messages | User not logged in | Call `CometChatUIKit.login("UID")` after init |
+| Attachments not working | File permissions or browser restrictions | Ensure the browser allows file access |
+| Voice recording not available | `hideVoiceRecording={true}` is set or browser doesn't support MediaRecorder | Check prop and browser compatibility |
+| SSR hydration error | Component uses browser APIs on server | Wrap in `useEffect` or dynamic import with `ssr: false`. See [Next.js Integration](/ui-kit/react/next-js-integration) |
+
+
+
+
+---
+
+## Next Steps
+
+
+
+ Render messages in a chat view
+
+
+ Customize message bubble rendering
+
+
+ Display user/group details in the toolbar
+
+
+ Add stickers, polls, and more to the composer
+
+
diff --git a/ui-kit/react/message-header.mdx b/ui-kit/react/message-header.mdx
index 28d7d0c85..631ba1311 100644
--- a/ui-kit/react/message-header.mdx
+++ b/ui-kit/react/message-header.mdx
@@ -1,7 +1,36 @@
---
title: "Message Header"
+description: "CometChatMessageHeader component displays user or group details in the toolbar including avatar, name, status, typing indicator, and back navigation. Supports custom views and CSS styling."
---
+{/* TL;DR for Agents and Quick Reference */}
+
+**Quick Reference for AI Agents & Developers**
+
+```tsx
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
+
+// For a user chat
+
+
+
+**AI Agent Component Spec**
+
+**Package:** `@cometchat/chat-uikit-react`
+**Import:** `import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";`
+**Minimal JSX:** `
+
## 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 +39,11 @@ title: "Message Header"
+
+
+**Before using this component:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration).
+
+
The `MessageHeader` is comprised of the following components:
| Component | Description |
@@ -22,8 +56,8 @@ The `MessageHeader` is comprised of the following components:
### Integration
-
-```tsx
+
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
@@ -44,18 +78,23 @@ export function MessageHeaderDemo() {
-
-```tsx
-import { MessageHeaderDemo } from "./MessageHeaderDemo";
+
+```jsx lines
+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 (
-
-```tsx
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
@@ -120,7 +159,7 @@ In this example, we are employing the `onError` action.
-```tsx
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
@@ -152,13 +191,13 @@ export function MessageHeaderDemo() {
***
-##### 3. onSearchOptionClicked
+#### 3. onSearchOptionClicked
The `onSearchOptionClicked` event is triggered when the user clicks the search option. It does not have a default behavior. However, you can override its behavior using the following code snippet.
-```tsx
+```tsx lines
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
const handleSearchClick = () => {
@@ -180,7 +219,7 @@ const handleSearchClick = () => {
-```tsx
+```tsx lines
import { MessageHeaderDemo } from "@cometchat/chat-uikit-react";
const getOnItemClick = () => {
@@ -224,7 +263,7 @@ To customize the appearance, you can customise css of `CometChatMessageHeader`
-```ts
+```ts lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
@@ -235,8 +274,8 @@ import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
-
-```css
+
+```css lines
.cometchat-message-header .cometchat-list-item .cometchat-avatar {
background: #f0999b;
border-radius: 8px;
@@ -258,7 +297,7 @@ Here is a code snippet demonstrating how you can customize the functionality of
-```ts
+```ts lines
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
-```ts
+```ts lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
@@ -328,8 +367,8 @@ const CustomItemView = (
-
-```css
+
+```css lines
.cometchat-message-header .cometchat-list-item .cometchat-avatar {
border-radius: 8px;
}
@@ -353,7 +392,7 @@ Use the following code to achieve the customization shown above.
-```ts
+```ts lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
@@ -377,27 +416,24 @@ function CustomTitleView() {
-
-```css
+
+```css lines
.cometchat-message-header .message-header__title-view {
- display: flex;
- gap: 4px;
- width: 100%;
+ display: flex;
+ gap: 4px;
+ width: 100%;
}
-.cometchat-message-header
- .message-header__title-view
- .message-header__title-view-name {
- color: #141414;
- font: 500 16px/19.2px Roboto;
- text-align: left;
+.cometchat-message-header .message-header__title-view .message-header__title-view-name {
+ color: #141414;
+ font: 500 16px/19.2px Roboto;
+ text-align: left;
}
-.cometchat-message-header
- .message-header__title-view
- .message-header__title-view-status {
- color: #6852d6;
- font: 400 16px/19.2px Roboto;
- text-align: left;
+
+.cometchat-message-header .message-header__title-view .message-header__title-view-status {
+ color: #6852d6;
+ font: 400 16px/19.2px Roboto;
+ text-align: left;
}
```
@@ -419,7 +455,7 @@ Use the following code to achieve the customization shown above.
-
+export function MessageComposerDemo() {
+ const [chatUser, setChatUser] = useState(null);
+ useEffect(() => {
+ CometChat.getUser("uid").then((user) => {
+ setChatUser(user);
+ });
+ }, []);
+
+ return chatUser ? (
+
+
- );
+ ) : null;
}
```
@@ -66,13 +107,13 @@ export default function App() {
[Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.
-##### 1. OnSendButtonClick
+#### 1. OnSendButtonClick
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;
}
```
@@ -77,7 +116,7 @@ In this example, we are employing the `onBack` action.