+
-
- );
+```css lines
+.cometchat-ai-assistant-chat {
+ /* overrides here */
}
```
-
-
-
-
-
- );
-}
-```
-
-
-
- );
-}
-```
-
-
-
@@ -677,7 +373,7 @@ Override the empty state greeting message view using the `emptyChatGreetingView`
@@ -772,7 +435,7 @@ You can override the empty chat intro message view using the `emptyChatIntroMess
- Hey, nice to see you What’s new?
-
- }
- />
- );
-}
-```
-
-
+
-
-
- ) : null;
+ return (
+
+
+ );
}
```
-
-
+## Smart Chat Features
-## Conversation Starters
+### Conversation Starter
When a user initiates a new chat, the UI kit displays a list of suggested opening lines that users can select, making it easier for them to start a conversation. These suggestions are powered by CometChat's AI, which predicts contextually relevant conversation starters.
-For a comprehensive understanding and guide on implementing and using the Conversation Starters, refer to our specific guide on the [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter).
+For a comprehensive understanding and guide on implementing and using the Conversation Starter, refer to our specific guide on the [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter).
Once you have successfully activated the [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter) from your CometChat Dashboard, the feature will automatically be incorporated into the [MessageList](/ui-kit/react/message-list) Component of UI Kits.
@@ -22,7 +29,7 @@ Once you have successfully activated the [Conversation Starter](/fundamentals/ai
-## Smart Replies
+### Smart Replies
Smart Replies are AI-generated responses to messages. They can predict what a user might want to say next by analyzing the context of the conversation. This allows for quicker and more convenient responses, especially on mobile devices.
@@ -34,7 +41,7 @@ Once you have successfully activated the [Smart Replies](/fundamentals/ai-user-c
-## Conversation Summary
+### Conversation Summary
The Conversation Summary feature provides concise summaries of long conversations, allowing users to catch up quickly on missed chats. This feature uses natural language processing to determine the main points in a conversation.
@@ -45,3 +52,23 @@ Once you have successfully activated the [Conversation Summary](/fundamentals/ai
+
+
+---
+
+## Next Steps
+
+
+ 
-This layout includes:
-
-1. Sidebar (Conversation List) – Users and groups
-2. Message View – Real-time messages for the selected conversation
-3. Message Composer – Input for sending text and media
-
-***
-
-## Prerequisites
-
-- Astro project set up
-- React integration added to Astro
-- CometChat credentials
-
-Loading chat…
;
- if (phase === "error") {
- return (
-
- CometChat error: {errorMsg}
-
- );
- }
-
- return (
-
- {/* LEFT: conversations */}
-
- Import the island and styles, then hydrate the component on the client.
-
- ```astro src/pages/index.astro
- ---
- import ChatApp from "../components/ChatApp.jsx";
- import "../styles/globals.css";
- import "../styles/cometchat-layout.css";
- ---
-
-
-
-
- CometChat + Astro
-
-
-
- The CSS files `globals.css` and `cometchat-layout.css` are included in the sample. Ensure your layout CSS sets a two‑panel flex container and sizes the sidebar.
-
-
-
-
- ```bash
- npm run dev
- ```
-
-
- Open your app and verify you can select conversations on the left and exchange messages on the right.
-
-
-
-
-***
-
-## Troubleshooting
-
-
-
-Ensure the component is rendered as a React island (`client:only=\"react\"`) so it runs only in the browser.
-
+ ) : (
+
+ );
+}
+```
+
+
+
-
+ });
+ })
+ .catch((error) => console.error("Initialization failed", error));
+ }, []);
+
+ if (!user) return Initializing Chat...
;
+
+ return (
+
+
- );
- }
- ```
-
-
-
+ {
+ let item: any = activeItem;
+ if (activeItem instanceof CometChat.Conversation) {
+ item = activeItem.getConversationWith();
+ }
+ if (item instanceof CometChat.User) {
+ setSelectedUser(item);
+ setSelectedGroup(undefined);
+ } else if (item instanceof CometChat.Group) {
+ setSelectedUser(undefined);
+ setSelectedGroup(item);
+ } else {
+ setSelectedUser(undefined);
+ setSelectedGroup(undefined);
+ }
+ }}
+ />
+
- {/* RIGHT: header + list (scrolling) + composer */}
+ {selectedUser || selectedGroup ? (
- {selectedUser || selectedGroup ? (
- <>
-
-
-
-
- Select a conversation to start
- )}
+ Select a conversation to start chatting
+ )}
+ 
-
-
+This guide walks you through adding CometChat to an Astro app using React islands. By the end you'll have a working chat UI.
-***
+
+
-**Recommended for:**
-
-* Desktop-first applications
-* Apps requiring a **rich user experience** with seamless navigation
-* Platforms supporting both **individual and group messaging**
-* **Mobile-friendly** apps needing a **tap-to-open message view**
+
+ 
-**Recommended for:**
-
-* **Support chat applications** – Direct user-agent communication.
-* **Apps focusing on direct messaging** – No distractions from other conversations.
-* **Community or group chat applications** – A structured way to interact in groups.
-* **Mobile-first applications** – Designed for compact and dedicated messaging experiences.
+
+ 
-**Recommended for:**
-
-* **Apps requiring structured navigation** – Clearly separate chat, calls, and settings.
-* **Multi-feature chat apps** – Supporting different functionalities in an organized way.
-* **Mobile-first applications** – Ideal for apps needing tab-based UI for easy access to features.
-* **Support & enterprise chat solutions** – Perfect for help desks, business chat platforms, and customer support apps.
+
+
-**Key Components**
-
-1. Chat Header – recipient details and status
-2. Message View – history and live messages
-3. Message Composer – text, media, attachments
-
-***
-
-## Prerequisites
-
-- Astro project with React integration
-- CometChat credentials in `.env`
-
-Initializing Chat...
;
+
+ return (
+ <>
+ {selectedUser || selectedGroup ? (
+
+
+ ) : (
+
+ Set a user or group UID in OneToOneChat.tsx to start chatting
+
+ )}
+
+ );
+}
+```
- // 3) Ensure logged in as correct user
- await ensureLogin(LOGIN_UID);
+
+
-
- );
-
- if (phase === "error") return (
- Loading…
-
-
- );
-
- if (!peer) return Error: {errorMsg}
- Invalid target user.
;
-
- return (
-
-
- );
- }
- ```
-
-
- 
+ 
-Layout structure:
-
-1. Sidebar – conversations, users, groups, or call logs
-2. Messages – header, list, and composer
-3. Tabs – switch between Chats, Calls, Users, and Groups
-
-***
-
-## Prerequisites
-
-- Astro project with React integration
-- CometChat credentials in `.env`
-
-
- {items.map((t) => {
- const key = t.name.toLowerCase();
- const active = activeTab === key || hover === key;
- return (
+Three sections working together:
+
+1. **Tab bar** — switches between Chats, Calls, Users, and Groups
+2. **Sidebar** — renders the list for the active tab
+3. **Message view** — header + messages + composer for the selected item
+
+
+---
+
+## Step 1 — Create the Tab Component
+
+
+
+
+
+
+
+
+
+
+Tab icons need to be placed in `public/assets/`. Download them from the [CometChat UI Kit assets folder on GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app/src/assets).
+
+
+
+
+
+
+
+
+
+
+
+```tsx title="CometChatTabs.tsx" lines
+import { useState } from "react";
+import "./CometChatTabs.css";
+
+const chatsIcon = "/assets/chats.svg";
+const callsIcon = "/assets/calls.svg";
+const usersIcon = "/assets/users.svg";
+const groupsIcon = "/assets/groups.svg";
+
+export const CometChatTabs = (props: {
+ onTabClicked?: (tabItem: { name: string; icon?: string }) => void;
+ activeTab?: string;
+}) => {
+ const { onTabClicked = () => {}, activeTab } = props;
+ const [hoverTab, setHoverTab] = useState("");
+
+ const tabItems = [
+ { name: "CHATS", icon: chatsIcon },
+ { name: "CALLS", icon: callsIcon },
+ { name: "USERS", icon: usersIcon },
+ { name: "GROUPS", icon: groupsIcon },
+ ];
+
+ return (
+
+ {tabItems.map((tabItem) => {
+ const isActive =
+ activeTab === tabItem.name.toLowerCase() ||
+ hoverTab === tabItem.name.toLowerCase();
+
+ return (
+
onTabClicked(tabItem)}
+ >
+
- This component renders the sidebar list based on the active tab and shows the message panel on the right.
-
- ```javascript src/components/TabbedChat.jsx
- import { useEffect, useState } from "react";
- import {
- CometChatUIKit,
- CometChatConversations,
- CometChatUsers,
- CometChatGroups,
- CometChatCallLogs,
- CometChatMessageHeader,
- CometChatMessageList,
- CometChatMessageComposer,
- } from "@cometchat/chat-uikit-react";
- import "@cometchat/chat-uikit-react/css-variables.css";
- import CometChatTabs from "./CometChatTabs.jsx";
- import { initCometChat } from "../lib/cometchat-init.js";
-
- const LOGIN_UID = import.meta.env.PUBLIC_COMETCHAT_LOGIN_UID; // UID of the user to log in as
-
- export default function TabbedChat() {
- const [phase, setPhase] = useState("boot"); // boot | ready | error
- const [errorMsg, setErrorMsg] = useState("");
-
- const [activeTab, setActiveTab] = useState("chats"); // chats | calls | users | groups
-
- const [selectedUser, setSelectedUser] = useState(null);
- const [selectedGroup, setSelectedGroup] = useState(null);
-
- useEffect(() => {
- let cancelled = false;
- (async () => {
- try {
- // Use the centralized init function
- await initCometChat();
-
- // Check if current logged-in user matches the desired UID
- let me = await CometChatUIKit.getLoggedinUser();
- if (!me || me.getUid() !== LOGIN_UID) {
- // Logout current user if different UID, then login with correct UID
- if (me) {
- await CometChatUIKit.logout();
- }
- me = await CometChatUIKit.login(LOGIN_UID);
- }
-
- if (!cancelled) setPhase("ready");
- } catch (e) {
- console.error("TabbedChat init error:", e);
- if (!cancelled) {
- setErrorMsg(String(e?.message || e));
- setPhase("error");
- }
- }
- })();
-
- return () => { cancelled = true; };
- }, [LOGIN_UID]); // Add LOGIN_UID as dependency so effect runs when UID changes
-
- const handleSelect = (item) => {
- // item can be Conversation, User, Group, or Call
- const maybeConv = item?.getConversationWith ? item.getConversationWith() : null;
- const picked = maybeConv || item;
-
- if (picked?.getUid) {
- setSelectedUser(picked);
- setSelectedGroup(null);
- setActiveTab("chats"); // keep in chats context
- } else if (picked?.getGuid) {
- setSelectedGroup(picked);
- setSelectedUser(null);
- setActiveTab("chats"); // show messages in same area
- } else {
- // For calls tab, we don’t open message panel
- setSelectedUser(null);
- setSelectedGroup(null);
- }
- };
-
- if (phase === "boot") return { setActiveItem(item); onSelectorItemClicked(item, "updateSelectedItemCall"); }}
+ />
+ )}
+ {activeTab === "users" && (
+ { setActiveItem(item); onSelectorItemClicked(item, "updateSelectedItemUser"); }}
+ />
+ )}
+ {activeTab === "groups" && (
+ { setActiveItem(item); onSelectorItemClicked(item, "updateSelectedItemGroup"); }}
+ />
+ )}
+
+ )}
+ setActiveTab(item.name.toLowerCase())} />
+
+ );
+};
+```
+
+
+
+
+```css title="CometChatSelector.css" lines
+.selector-wrapper .cometchat-conversations .cometchat-list__header-menu .cometchat-button__icon {
+ background: var(--cometchat-icon-color-primary);
+}
+.cometchat-conversations .cometchat-list__header-menu .cometchat-button__icon:hover {
+ background: var(--cometchat-icon-color-highlight);
+}
+.cometchat-list__header-search-bar { border-right: none; }
+.cometchat .cometchat-menu-list__sub-menu-list-item { text-align: left; }
+.cometchat .cometchat-conversations .cometchat-menu-list__sub-menu-list {
+ width: 212px; top: 40px !important; left: 172px !important;
+}
+#logged-in-user { border-bottom: 2px solid var(--cometchat-border-color-default, #E8E8E8); }
+#logged-in-user .cometchat-menu-list__sub-menu-item-title,
+#logged-in-user .cometchat-menu-list__sub-menu-list-item { cursor: default; }
+.cometchat-menu-list__sub-menu-list-item-icon-log-out { background-color: var(--cometchat-error-color, #F44649); }
+.cometchat-menu-list__sub-menu-item-title-log-out { color: var(--cometchat-error-color, #F44649); }
+.chat-menu .cometchat .cometchat-menu-list__sub-menu-item-title { cursor: pointer; }
+.chat-menu .cometchat .cometchat-menu-list__sub-menu { box-shadow: none; }
+.chat-menu .cometchat .cometchat-menu-list__sub-menu-icon {
+ background-color: var(--cometchat-icon-color-primary, #141414); width: 24px; height: 24px;
+}
+```
+
+
+
+
+Key points:
+- The `activeTab` state drives which list component renders — `CometChatConversations`, `CometChatCallLogs`, `CometChatUsers`, or `CometChatGroups`.
+- Each list component passes its selection back to the parent via `onSelectorItemClicked`.
+- `CometChatTabs` renders at the bottom of the sidebar.
+
+
+---
+
+## Step 3 — Create the TabbedChat Island
+
+This component handles init, login, and renders the full tabbed chat experience. It runs client-side only via `client:only="react"`.
+
+
+
+
+
+
+
+
+
+
+
+```tsx title="TabbedChat.tsx" lines highlight={15-17, 20}
+import { useEffect, useState } from "react";
+import {
+ CometChatMessageComposer,
+ CometChatMessageHeader,
+ CometChatMessageList,
+ CometChatUIKit,
+ UIKitSettingsBuilder,
+} from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatSelector } from "./CometChatSelector/CometChatSelector";
+import "@cometchat/chat-uikit-react/css-variables.css";
+import "./TabbedChat.css";
+
+const COMETCHAT_CONSTANTS = {
+ APP_ID: "", // Replace with your App ID
+ REGION: "", // Replace with your Region
+ AUTH_KEY: "", // Replace with your Auth Key (dev only)
+};
+
+const UID = "cometchat-uid-4"; // Replace with your actual UID
+
+export default function TabbedChat() {
+ const [user, setUser] = useState(undefined);
+ const [selectedUser, setSelectedUser] = useState(undefined);
+ const [selectedGroup, setSelectedGroup] = useState(undefined);
+
+ useEffect(() => {
+ const UIKitSettings = new UIKitSettingsBuilder()
+ .setAppId(COMETCHAT_CONSTANTS.APP_ID)
+ .setRegion(COMETCHAT_CONSTANTS.REGION)
+ .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
+ .subscribePresenceForAllUsers()
+ .build();
+
+ CometChatUIKit.init(UIKitSettings)
+ .then(() => {
+ console.log("Initialization completed successfully");
+ CometChatUIKit.getLoggedinUser().then((loggedInUser) => {
+ if (!loggedInUser) {
+ CometChatUIKit.login(UID)
+ .then((u) => {
+ console.log("Login Successful", { u });
+ setUser(u);
+ })
+ .catch((error) => console.error("Login failed", error));
+ } else {
+ console.log("Already logged-in", { loggedInUser });
+ setUser(loggedInUser);
+ }
+ });
+ })
+ .catch((error) => console.error("Initialization failed", error));
+ }, []);
+
+ if (!user) return
+
+
+```css title="TabbedChat.css" lines
+.conversations-with-messages {
+ display: flex;
+ height: 100%;
+ width: 100%;
+}
+.conversations-wrapper {
+ height: 100%;
+ width: 480px;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+}
+.conversations-wrapper > .cometchat { overflow: hidden; }
+.messages-wrapper {
+ width: calc(100% - 480px);
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+}
+.empty-conversation {
+ height: 100%;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: var(--cometchat-background-color-03, #F5F5F5);
+ color: var(--cometchat-text-color-secondary, #727272);
+ font: var(--cometchat-font-body-regular, 400 14px Roboto);
+}
+.cometchat .cometchat-message-composer { border-radius: 0px; }
+```
+
+
+
+
+How it works:
+- Selections from any tab (Chats, Calls, Users, Groups) flow through the same `onSelectorItemClicked` callback.
+- Conversation items are unwrapped via `getConversationWith()` to extract the underlying `User` or `Group`.
+- Only one of `selectedUser` / `selectedGroup` is set at a time — the other is cleared.
-
-The message panel shows only for Chats, Users, or Groups. Calls tab does not open a message panel.
-
-
+---
-***
+## Step 4 — Render the Astro Page
-## Next Steps
+Import the island and hydrate it client-side using `client:only="react"`.
+
+```astro title="src/pages/index.astro" lines
+---
+import TabbedChat from "../components/TabbedChat.tsx";
+import "../styles/globals.css";
+---
-- Add call handling with CometChat Calls SDK
-- Apply theming and component overrides
-- Extend with unread badges and notifications
+
+
+
+ Tabbed Messaging UI
+
+
+
-You can reuse `src/lib/cometchat-init.js` and swap the island component to build other experiences.
-
+The `client:only="react"` directive ensures the component skips SSR entirely and only renders in the browser.
+---
+
+## Step 5 — Run the Project
+
+
+
+```bash lines
+npm run dev
+```
+
+
+```bash lines
+pnpm dev
+```
+
+
+```bash lines
+yarn dev
+```
+
+
+
+You should see the tab bar at the bottom of the sidebar. Switch between Chats, Calls, Users, and Groups — tapping any item loads the message view on the right.
+
+---
+
+## Next Steps
+
+
+ Customize colors, fonts, and styles to match your brand
+
+
+ Browse all prebuilt UI components
+
+
+ Chat features included out of the box
+
+
diff --git a/ui-kit/react/call-buttons.mdx b/ui-kit/react/call-buttons.mdx
index 4c67d12bb..f3c713f66 100644
--- a/ui-kit/react/call-buttons.mdx
+++ b/ui-kit/react/call-buttons.mdx
@@ -1,22 +1,35 @@
---
title: "Call Buttons"
+description: "Add voice and video call buttons to initiate calls using the CometChatCallButtons component."
---
-## Overview
-
-The `Call Button` is a Component provides users with the ability to make calls, access call-related functionalities, and control call settings. Clicking this button typically triggers the call to be placed to the desired recipient.
-
-## Usage
+
+
+| Field | Value |
+| --- | --- |
+| Purpose | Voice and video call initiation buttons for user or group conversations |
+| Package | `@cometchat/chat-uikit-react` |
+| Import | `import { CometChatCallButtons } from "@cometchat/chat-uikit-react";` |
+| Used in experiences | Chat header, user profile, conversation toolbar |
+| Copy-paste base | See [Base Code](#base-code--stylesheet) below |
+| Primary output | Call initiation, call lifecycle events |
+| Primary hook points | `onError`, `callSettingsBuilder`, `OutgoingCallConfiguration` |
+| CSS root class | `.cometchat-call-button` |
+| Real-time events | `CometChatCallEvents.ccCallRejected`, `CometChatCallEvents.ccCallEnded`, `CometChatCallEvents.ccOutgoingCall`, `CometChatMessageEvents.ccMessageSent` |
+
+
+
+## Base Code and Stylesheet
-### Integration
+Renders voice and video call buttons for a user or group conversation.
-```tsx
+```tsx lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatCallButtons } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -33,49 +46,70 @@ const CallButtonDemo = () => {
export default CallButtonDemo;
```
-
+
-
-```tsx
-import { CallButtonDemo } from "./CallButtonDemo";
-
-export default function App() {
- return (
-
+## Functionality
-
+Props that control component behavior, grouped by surface area.
-### Actions
+### Data
-[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.
+| Property | Type | Default | Effect | Pitfall |
+| --- | --- | --- | --- | --- |
+| `user` | `CometChat.User` | `undefined` | Sets the user for 1-on-1 call buttons | Pass either `user` or `group`, not both |
+| `group` | `CometChat.Group` | `undefined` | Sets the group for group call buttons | Pass either `user` or `group`, not both |
-##### 1. onError
+### UI Visibility Toggles
-This action doesn't change the behavior of the component but rather listens for any errors that occur in the Call Button component.
+| Property | Type | Default | Effect | Pitfall |
+| --- | --- | --- | --- | --- |
+| `hideVideoCallButton` | `boolean` | `false` | Hides the video call button | — |
+| `hideVoiceCallButton` | `boolean` | `false` | Hides the voice call button | — |
-
-
-```ts
+### Callbacks
+
+| Property | Type | Default | Effect | Pitfall |
+| --- | --- | --- | --- | --- |
+| `onVoiceCallClick` | `(user?: CometChat.User, group?: CometChat.Group) => void` | `undefined` | Overrides the default voice call initiation behavior | — |
+| `onVideoCallClick` | `(user?: CometChat.User, group?: CometChat.Group) => void` | `undefined` | Overrides the default video call initiation behavior | — |
+
+## Actions
+
+[Actions](/ui-kit/react/components-overview#actions) split into predefined (built-in triggers) and user-defined (callbacks).
+
+### Predefined Actions
+
+Clicking a call button initiates a call via the SDK. The component renders `CometChatOutgoingCall` internally.
+
+### User-Defined Actions
+
+#### onError
+
+Fires when the component encounters an error.
+
+| Detail | Value |
+| --- | --- |
+| When it fires | Any internal error during call initiation |
+| Payload type | `(error: CometChat.CometChatException) => void` |
+| What devs typically do next | Log to error tracking service |
+
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatCallButtons } from "@cometchat/chat-uikit-react";
-import React from "react";
const CallButtonDemo = () => {
const [chatUser, setChatUser] = React.useState();
React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
+ CometChat.getUser("uid").then((user) => setChatUser(user));
}, []);
const handleOnError = (error: CometChat.CometChatException) => {
@@ -84,326 +118,182 @@ const CallButtonDemo = () => {
return
+#### onVoiceCallClick
+
+Fires when the voice call button is clicked. Overrides the default voice call initiation.
-
-```js
-import React, { useState, useEffect } from "react";
+| Detail | Value |
+| --- | --- |
+| When it fires | User clicks the voice call button |
+| Payload type | `(user?: CometChat.User, group?: CometChat.Group) => void` |
+| What devs typically do next | Custom call initiation logic, pre-call checks |
+
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatCallButtons } from "@cometchat/chat-uikit-react";
const CallButtonDemo = () => {
- const [chatUser, setChatUser] = useState(null);
-
- useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
+ const [chatUser, setChatUser] = React.useState();
+ React.useEffect(() => {
+ CometChat.getUser("uid").then((user) => setChatUser(user));
}, []);
- const handleOnError = (error) => {
- console.log("Your Custom on error actions", error);
+ const handleVoiceCallClick = (user?: CometChat.User, group?: CometChat.Group) => {
+ console.log("Voice call clicked", user, group);
};
- return
-
-
-
-***
+#### onVideoCallClick
-### Filters
+Fires when the video call button is clicked. Overrides the default video call initiation.
-You can set `CallSettingsBuilder` in the Call Buttons Component to customise the calling experience. To know more about the filters available please refer to [CallSettingsBuilder](/sdk/javascript/direct-call#settings).
+| Detail | Value |
+| --- | --- |
+| When it fires | User clicks the video call button |
+| Payload type | `(user?: CometChat.User, group?: CometChat.Group) => void` |
+| What devs typically do next | Custom call initiation logic, pre-call checks |
-
-
-```ts
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatCallButtons } from "@cometchat/chat-uikit-react";
-import React from "react";
const CallButtonDemo = () => {
const [chatUser, setChatUser] = React.useState();
-
React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
+ CometChat.getUser("uid").then((user) => setChatUser(user));
}, []);
- const getCallSettingsBuilder = (call: CometChat.Call) => {
- return new CometChatCalls.CallSettingsBuilder()
- .setIsAudioOnlyCall(
- call?.getType() === CometChatUIKitConstants.MessageTypes.audio
- ? true
- : false
- )
- .build();
+ const handleVideoCallClick = (user?: CometChat.User, group?: CometChat.Group) => {
+ console.log("Video call clicked", user, group);
};
- return (
-
+## Filters
+
+Set `CallSettingsBuilder` to customize the calling experience. Refer to [CallSettingsBuilder](/sdk/javascript/direct-call#settings).
-
-```js
-import React, { useState, useEffect } from "react";
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatCallButtons } from "@cometchat/chat-uikit-react";
const CallButtonDemo = () => {
- const [chatUser, setChatUser] = useState(null);
-
- useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
+ const [chatUser, setChatUser] = React.useState();
+ React.useEffect(() => {
+ CometChat.getUser("uid").then((user) => setChatUser(user));
}, []);
- const getCallSettingsBuilder = (call) => {
+ const getCallSettingsBuilder = (isAudioOnlyCall: boolean, user?: CometChat.User, group?: CometChat.Group) => {
return new CometChatCalls.CallSettingsBuilder()
- .setIsAudioOnlyCall(
- call?.getType() === CometChatUIKitConstants.MessageTypes.audio
- ? true
- : false
- )
+ .setIsAudioOnlyCall(isAudioOnlyCall)
.build();
};
- return (
-
-
-
-
-***
+## Events
-### Events
+### UI Events
-[Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.
+Events emitted by the CallButtons component:
-The list of events emitted by the `Call Buttons` component is as follows.
+| Event | Source | When it fires |
+| --- | --- | --- |
+| `ccCallRejected` | `CometChatCallEvents` | Initiated call is rejected |
+| `ccCallEnded` | `CometChatCallEvents` | Call ends |
+| `ccOutgoingCall` | `CometChatCallEvents` | User initiates a voice/video call |
+| `ccMessageSent` | `CometChatMessageEvents` | Call message is sent |
-| Event | Description |
-| ------------------ | --------------------------------------------------------------------------------------------------------- |
-| **ccCallRejected** | This event is triggered when the initiated call is rejected by the receiver. |
-| **ccCallEnded** | This event is triggered when the initiated call successfully ends. |
-| **ccOutgoingCall** | This event is triggered when the user initiates a voice/video call. |
-| **ccMessageSent** | This event is triggered when the sent message is in transit and also when it is received by the receiver. |
+#### Subscribe
-***
-
-
-
-```tsx
+```tsx lines
const ccCallRejected = CometChatCallEvents.ccCallRejected.subscribe(
- (call: CometChat.Call) => {
- //Your Code
- }
+ (call: CometChat.Call) => { /* Your Code */ }
);
const ccCallEnded = CometChatCallEvents.ccCallEnded.subscribe(
- (call: CometChat.Call) => {
- //Your Code
- }
+ (call: CometChat.Call) => { /* Your Code */ }
);
const ccOutgoingCall = CometChatCallEvents.ccOutgoingCall.subscribe(
- (call: CometChat.Call) => {
- //Your Code
- }
+ (call: CometChat.Call) => { /* Your Code */ }
);
const ccMessageSent = CometChatMessageEvents.ccMessageSent.subscribe(() => {
- //Your Code
+ /* Your Code */
});
```
-
-
-
+#### Unsubscribe
-***
-
-
-
-```tsx
+```tsx lines
ccCallRejected?.unsubscribe();
-
ccCallEnded?.unsubscribe();
-
ccOutgoingCall?.unsubscribe();
-
ccMessageSent?.unsubscribe();
```
-
+### SDK Events (Real-Time)
-
+The component internally listens to SDK call events for real-time updates. No manual attachment needed.
+
+## Advanced: Custom View Slots
+
+The CallButtons component renders [CometChatOutgoingCall](/ui-kit/react/outgoing-call) internally. Customize the outgoing call sub-component using `OutgoingCallConfiguration`.
-***
+### OutgoingCallConfiguration
-## Customization
+| Property | Type | Description |
+| --- | --- | --- |
+| `customSoundForCalls` | `string` | Custom sound for outgoing calls |
+| `disableSoundForCalls` | `boolean` | Disables outgoing call sound |
+| `onError` | `(error: CometChat.CometChatException) => void` | Error callback |
+| `onCloseClicked` | `() => void` | Cancel button callback |
+| `titleView` | `JSX.Element` | Custom title view |
+| `subtitleView` | `JSX.Element` | Custom subtitle view |
+| `avatarView` | `JSX.Element` | Custom avatar view |
+| `cancelButtonView` | `JSX.Element` | Custom cancel button view |
-To fit your app's design requirements, you can customize the appearance of the Call Buttons component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.
+Refer to [CometChatOutgoingCall](/ui-kit/react/outgoing-call) for details on each property.
-### Style
+## Theme and Styling
-Using CSS you can customize the look and feel of the component in your app like the color, size, shape, and fonts.
+Using CSS, customize the look and feel of the component. The root CSS class is `.cometchat-call-button`.
-**Example**
-
-
-
-```ts
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatCallButtons } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const CallButtonDemo = () => {
- const [chatUser, setChatUser] = React.useState();
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
-
- return
-
-
-```js
-import React, { useState, useEffect } from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatCallButtons } from "@cometchat/chat-uikit-react";
-
-const CallButtonDemo = () => {
- const [chatUser, setChatUser] = useState(null);
-
- useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
-
- return
-
-
-```css
+```css lines
.cometchat-call-button {
display: flex;
- width: 183px;
- height: 64px;
padding: 8px 16px;
justify-content: center;
align-items: center;
- border-bottom: 1px solid #f5f5f5;
background: #fff;
}
-.cometchat-call-button .cometchat-call-button__voice,
-.cometchat-call-button .cometchat-call-button__video {
- width: auto;
- height: auto;
-}
-
.cometchat .cometchat-button {
- display: flex;
- width: 52px;
- height: 40px;
- justify-content: center;
- padding: 8px 20px;
- align-items: center;
border-radius: 8px;
border: 1px solid #e8e8e8;
background: #edeafa;
}
-.cometchat .cometchat-button:hover {
- background-color: #edeafa;
-}
-
.cometchat-call-button .cometchat-call-button__video .cometchat-button__icon,
.cometchat-call-button .cometchat-call-button__voice .cometchat-button__icon {
- width: 24px;
- height: 24px;
- flex-shrink: 0;
background-color: #6852d6;
}
-```
-
-
-
-
-
-***
-
-## Configurations
-
-Configurations offer the ability to customize the properties of each component within a Composite Component. `CallButtons` component renders [CometChatOutgoingCall](/ui-kit/react/outgoing-call) component.
-
-#### Outgoing Call
-
-You can customize the properties of the `CometChatOutgoingCall` component by making use of the `OutgoingCallConfiguration`. Below properties are available in `OutgoingCallConfiguration`.
-
-| Property | Description | Code |
-| -------------------------- | ------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
-| **User** | Sets the user object for Call Buttons | `user={chatUser}` |
-| **Group** | Used to set the group object for Call Buttons | `group={chatGroup}` |
-| **Custom Sound** | Specifies a custom sound to play for outgoing calls. | `customSoundForCalls='Your Custom Sound For Calls'` |
-| **Disable Sound** | Disables the sound of outgoing calls. | `disableSoundForCalls={false}` |
-| **On Error** | Callback function triggered when an error occurs in the call buttons component. | `onError={(error: CometChat.CometChatException)=>{ console.log('error', error) }}` |
-| **Cancel Call Clicked** | Callback function triggered when the cancel button is clicked. | `onCloseClicked={()=>{console.log("Outgoing call canceled")}}` |
-| **Title View** | This prop renders the custom title view for the outgoing call. | `titleView={<>Custom Title View}` |
-| **Sub Title View** | This prop renders the custom sub title view for the outgoing call. | `subtitleView={<>Custom Sub Title View}` |
-| **Avatar View** | This prop renders the custom avatar view for the outgoing call. | `avatarView={<>Custom Avatar View}` |
-| **Cancel Button View** | This prop renders the custom cancel-call button view for the outgoing call. | `cancelButtonView={<>Custom Cancel Button View}` |
-| **Hide Video Call Button** | Used to hide the video call button. | `hideVideoCallButton={true}` |
-| **Hide Voice Call Button** | Used to hide the voice call button. | `hideVoiceCallButton={true}` |
-
-You can refer to [CometChatOutgoingCall](/ui-kit/react/outgoing-call) component to know more about each of the above properties.
-
-***
+```
\ No newline at end of file
diff --git a/ui-kit/react/call-features.mdx b/ui-kit/react/call-features.mdx
index f9d61886a..2086b7c33 100644
--- a/ui-kit/react/call-features.mdx
+++ b/ui-kit/react/call-features.mdx
@@ -1,10 +1,25 @@
---
title: "Call"
+description: "Overview of CometChat's audio and video calling features including incoming calls, outgoing calls, and call logs — with the UI Kit components that power each feature."
---
+
+- **Packages:** `@cometchat/chat-uikit-react` + `@cometchat/calls-sdk-javascript` (`npm install @cometchat/calls-sdk-javascript`)
+- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` — Calls SDK must also be installed
+- **Call features:** Incoming Call, Outgoing Call, Call Logs, Call Buttons
+- **Key components:** `CometChatCallButtons` → [Call Buttons](/ui-kit/react/call-buttons), `CometChatIncomingCall` → [Incoming Call](/ui-kit/react/incoming-call), `CometChatOutgoingCall` → [Outgoing Call](/ui-kit/react/outgoing-call), `CometChatCallLogs` → [Call Logs](/ui-kit/react/call-logs)
+- **Auto-detection:** UI Kit automatically detects the Calls SDK and enables call UI components
+- **CSS class prefix:** `.cometchat-`
+
+
## Overview
-CometChat's Calls feature is an advanced functionality that allows you to seamlessly integrate one-on-one as well as group audio and video calling capabilities into your application. This document provides a technical overview of these features, as implemented in the React UI Kit.
+CometChat's Calls feature lets you integrate one-on-one and group audio/video calling into your application. This document provides a technical overview of these features as implemented in the React UI Kit.
+
+
+
+**Before using call 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).
+
## Integration
@@ -14,7 +29,7 @@ Once you've successfully integrated the UI Kit, the next step is to add the Come
Add the SDK files to your project's dependencies or libraries:
-```java
+```bash lines
npm install @cometchat/calls-sdk-javascript
```
@@ -53,3 +68,23 @@ Importantly, the Outgoing Call component is smartly designed to transition autom
+
+
+---
+
+## Next Steps
+
+
+
+ Add audio and video call buttons to your chat
+
+
+ Handle incoming call notifications and UI
+
+
+ Display call history and details
+
+
+ Explore core chat features like messaging and reactions
+
+
diff --git a/ui-kit/react/call-logs.mdx b/ui-kit/react/call-logs.mdx
index 35f786e34..3c6d8901c 100644
--- a/ui-kit/react/call-logs.mdx
+++ b/ui-kit/react/call-logs.mdx
@@ -1,30 +1,35 @@
---
title: "Call Logs"
+description: "Display and manage call history with filtering, custom views, and call-back functionality using the CometChatCallLogs component."
---
-## Overview
-
-`CometChatCallLogs` is a Component that shows the list of Call Log available . By default, names are shown for all listed users, along with their avatar if available.
-
-The `Call Logs` is comprised of the following components:
+
-| Components | Description |
-| ----------------- | --------------------------------------------------------------------------------------------------------------------------- |
-| CometChatList | A reusable container component having title, search box, customizable background and a list view. |
-| CometChatListItem | A component that renders data obtained from a Group object on a Tile having a title, subtitle, leading and trailing view. |
-| CometChatDate | This component used to show the date and time. You can also customize the appearance of this widget by modifying its logic. |
+| Field | Value |
+| --- | --- |
+| Purpose | Scrollable list of call history entries with filtering, call-back actions, and custom views |
+| Package | `@cometchat/chat-uikit-react` |
+| Import | `import { CometChatCallLogs } from "@cometchat/chat-uikit-react";` |
+| Used in experiences | Call history panel, call log sidebar |
+| Copy-paste base | See [Base Code](#base-code--stylesheet) below |
+| Primary output | Item click (from `onItemClick`), call-back (from `onCallButtonClicked`) |
+| Primary hook points | `onItemClick`, `onCallButtonClicked`, `onError`, `callLogRequestBuilder`, view slots (`subtitleView`, `trailingView`, `leadingView`, `titleView`, `itemView`) |
+| CSS root class | `.cometchat-call-logs` |
+| Real-time events | `CometChatMessageEvents.ccMessageSent` |
-## Usage
+
-### Integration
+## Base Code and Stylesheet
+
+Renders a scrollable list of call log entries.
-```tsx
+```tsx lines
import { CometChatCallLogs } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -34,188 +39,133 @@ const CallLogDemo = () => {
export default CallLogDemo;
```
-
+
-
-```tsx
-import { CallLogDemo } from "./CallLogDemo";
+Root CSS class for style overrides:
-export default function App() {
- return (
-
+## Functionality
-
+Props that control component behavior, grouped by surface area.
-### Actions
+### Data
-[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.
+| Property | Type | Default | Effect | Pitfall |
+| --- | --- | --- | --- | --- |
+| `activeCall` | `object` | `undefined` | Highlights the currently active/selected call log entry | — |
+| `title` | `string` | `"Call Logs"` | Sets the header title | — |
-##### 1. onItemClick
+### UI Visibility Toggles
-`onItemClick` is a callback function which triggers when a call log list item is clicked. It does not have a default behavior. However, you can override its behavior using the following code snippet.
-
-
-
-```ts
-import { CometChatCallLogs } from "@cometchat/chat-uikit-react";
-import React from "react";
+| Property | Type | Default | Effect | Pitfall |
+| --- | --- | --- | --- | --- |
+| `showScrollbar` | `boolean` | `false` | Shows the scrollbar in the list | — |
-const CallLogDemo = () => {
- const handleOnItemClick = (callLog: any) => {
- console.log("custom on item click", callLog);
- };
- return
+### Date Formatting
-
-```js
-import { CometChatCallLogs } from "@cometchat/chat-uikit-react";
-import React from "react";
+| Property | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `callInitiatedDateTimeFormat` | `CalendarObject` | `DD MMM, hh:mm A` | Customizes the call initiated timestamp |
-const CallLogDemo = () => {
- const handleOnItemClick = (callLog) => {
- console.log("custom on item click", callLog);
- };
- return
+If a property is not passed in the CalendarObject, the component checks the [global configuration](/ui-kit/react/localize#customisation) first, then falls back to the component's default formatting.
+
-export default CallLogDemo;
-```
+## Actions
-
+[Actions](/ui-kit/react/components-overview#actions) split into predefined (built-in triggers) and user-defined (callbacks).
-
+### Predefined Actions
-##### 2. onCallButtonClicked
+The component handles list rendering and pagination internally.
-`onCallButtonClicked` is a callback function which triggers when the call button in the trailing view is clicked.
+### User-Defined Actions
-
-
-```ts
-import { CometChatCallLogs } from "@cometchat/chat-uikit-react";
-import React from "react";
+#### onItemClick
-const CallLogDemo = () => {
- const handleOnCallButtonClick = (callLog: any) => {
- console.log("custom on info click", callLog);
- };
- return
-
-
-```js
+```ts lines
import { CometChatCallLogs } from "@cometchat/chat-uikit-react";
-import React from "react";
const CallLogDemo = () => {
- const handleOnCallButtonClick = (callLog) => {
- console.log("custom on info click", callLog);
+ const handleOnItemClick = (callLog: any) => {
+ console.log("custom on item click", callLog);
};
- return
+#### onCallButtonClicked
-
-
-##### 3. onError
+Fires when the call button in the trailing view is clicked.
-This is a callback function which is triggered when the component encounters an error.
+| Detail | Value |
+| --- | --- |
+| When it fires | User clicks the call-back button on a log entry |
+| Payload type | `(callLog: any) => void` |
+| What devs typically do next | Initiate a call-back |
-
-
-```ts
-import { CometChat } from "@cometchat/chat-sdk-javascript";
+```ts lines
import { CometChatCallLogs } from "@cometchat/chat-uikit-react";
-import React from "react";
const CallLogDemo = () => {
- const handleOnError = (error: CometChat.CometChatException) => {
- console.log("your custom on error actions", error);
- };
- return
-
-
-```js
-import { CometChatCallLogs } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const CallLogDemo = () => {
- const handleOnError = (error) => {
- console.log("your custom on error actions", error);
+ const handleOnCallButtonClick = (callLog: any) => {
+ console.log("custom on call button click", callLog);
};
- return
-
-
-
-***
-
-### Filters
-
-**Filters** allow you to customize the data displayed in a list within a `Component`. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using `RequestBuilders` of Chat SDK.
+#### onError
-##### 1. CallLogRequestBuilder
+Fires when the component encounters an error.
-The [CallLogRequestBuilder](/sdk/javascript/call-logs) enables you to filter and customize the Call Log based on available parameters in [CallLogRequestBuilder](/sdk/javascript/call-logs). This feature allows you to create more specific and targeted queries when fetching the call logs. The following are the parameters available in [CallLogRequestBuilder](/sdk/javascript/call-logs)
+| Detail | Value |
+| --- | --- |
+| When it fires | Any internal error during data fetching or rendering |
+| Payload type | `(error: CometChat.CometChatException) => void` |
+| What devs typically do next | Log to error tracking service |
-| Methods | Type | Description |
-| -------------------- | ---------- | ------------------------------------------------------------ |
-| **setLimit** | number | Specifies the number of call logs to fetch. |
-| **setCallType** | String | Sets the type of calls to fetch (call or meet). |
-| **setCallStatus** | callStatus | Sets the status of calls to fetch (initiated, ongoing, etc.) |
-| **setHasRecording** | boolean | Sets whether to fetch calls that have recordings. |
-| **setCallCategory** | string | Sets the category of calls to fetch (call or meet). |
-| **setCallDirection** | string | Sets the direction of calls to fetch (incoming or outgoing) |
-| **setUid** | string | Sets the UID of the user whose call logs to fetch. |
-| **setGuid** | string | Sets the GUID of the user whose call logs to fetch. |
-| **setAuthToken** | string | Sets the Auth token of the logged-in user. |
+## Filters
-**Example**
+Control which call logs appear using `CallLogRequestBuilder`. Refer to [CallLogRequestBuilder](/sdk/javascript/call-logs) for the full API.
-In the example below, we're filtering Call Logs to show only canceled calls and setting the limit to five.
+| Method | Type | Description |
+| --- | --- | --- |
+| `setLimit` | `number` | Number of call logs to fetch |
+| `setCallType` | `string` | Type of calls (call or meet) |
+| `setCallStatus` | `callStatus` | Status filter (initiated, ongoing, etc.) |
+| `setHasRecording` | `boolean` | Filter calls with recordings |
+| `setCallCategory` | `string` | Category filter (call or meet) |
+| `setCallDirection` | `string` | Direction filter (incoming or outgoing) |
+| `setUid` | `string` | Filter by user UID |
+| `setGuid` | `string` | Filter by group GUID |
+| `setAuthToken` | `string` | Auth token of the logged-in user |
-
-
-```ts
+```ts lines
import { CallLogRequestBuilder } from "@cometchat/calls-sdk-javascript";
import { CometChatCallLogs } from "@cometchat/chat-uikit-react";
-import React from "react";
const CallLogDemo = () => {
return (
@@ -227,925 +177,282 @@ const CallLogDemo = () => {
/>
);
};
-
-export default CallLogDemo;
```
-
+## Events
-
-```js
-import { CallLogRequestBuilder } from "@cometchat/calls-sdk-javascript";
-import { CometChatCallLogs } from "@cometchat/chat-uikit-react";
-import React from "react";
+### UI Events
-const CallLogDemo = () => {
- return (
-
+#### Subscribe
-
-
-***
-
-### Events
-
-[Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.
-
-The list of events emitted by the `Call Logs` component is as follows.
-
-| Event | Description |
-| ----------------- | --------------------------------------------------------------------------------------------------------- |
-| **ccMessageSent** | This event is triggered when the sent message is in transit and also when it is received by the receiver. |
-
-***
-
-
-
-```tsx
+```tsx lines
const ccMessageSent = CometChatMessageEvents.ccMessageSent.subscribe(() => {
//Your Code
});
```
-
+#### Unsubscribe
-
-
-***
-
-
-
-```tsx
+```tsx lines
ccMessageSent?.unsubscribe();
```
-
+### SDK Events (Real-Time)
-
+The component internally listens to SDK events for real-time updates. No manual attachment needed.
-***
-## Customization
+## Advanced: Custom View Slots
-To fit your app's design requirements, you can customize the appearance of the Call Logs component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.
+Customization override points for the call logs UI.
-### Style
+### Slot Catalog
-Using CSS you can customize the look and feel of the component in your app like the color, size, shape, and fonts.
+| Slot | Params | What it replaces | Section |
+| --- | --- | --- | --- |
+| `itemView` | `(callLog: any) => JSX.Element` | Entire call log list item | Whole item |
+| `leadingView` | `(callLog: any) => JSX.Element` | Avatar / left section | Sub-section (leading) |
+| `trailingView` | `(callLog: any) => JSX.Element` | Right section (call-back button area) | Sub-section (trailing) |
+| `titleView` | `(callLog: any) => JSX.Element` | Name / title text | Sub-section (title) |
+| `subtitleView` | `(callLog: any) => JSX.Element` | Subtitle text (call type, duration) | Sub-section (subtitle) |
-**Example:**
+### itemView
-
- 
-
+Replace the entire call log list item.
-```ts
-import { CometChatCallLogs } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const CallLogDemo = () => {
- return
-
-
-```js
+```ts lines
import { CometChatCallLogs } from "@cometchat/chat-uikit-react";
-import React from "react";
-const CallLogDemo = () => {
- return
-
-
-```css
-.cometchat .cometchat-call-logs .cometchat-list__header-title {
- background-color: #fce9ea;
- color: #f76808;
- border: 0px 1px 1px 0px solid #e5484d;
- font-family: "Times New Roman";
-}
-
-.cometchat .cometchat-call-logs .cometchat-list-item__body-title {
- overflow: hidden;
- color: #141414;
- text-overflow: ellipsis;
- font-family: "Times New Roman";
- font-size: 16px;
- font-style: normal;
- font-weight: 400;
- line-height: 19.2px;
-}
-
-.cometchat .cometchat-call-logs .cometchat-list-item__body-subtitle {
- overflow: hidden;
- color: #727272;
- text-overflow: ellipsis;
- white-space: nowrap;
- font-family: "Times New Roman";
- font-size: 14px;
- font-style: normal;
- font-weight: 400;
- line-height: 16.8px;
+
+```css lines
+.custom-call-log-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 8px 16px;
+ border-bottom: 1px solid var(--cometchat-border-color-light);
}
-.cometchat .cometchat-call-logs .cometchat-avatar {
- border-radius: 8px;
- background: #fbaa75;
+.custom-call-log-item__name {
+ font: var(--cometchat-font-heading4-medium);
+ color: var(--cometchat-text-color-primary);
}
-.cometchat .cometchat-call-logs .cometchat-avatar__image {
- border-radius: 8px;
+.custom-call-log-item__status {
+ font: var(--cometchat-font-body-regular);
+ color: var(--cometchat-text-color-secondary);
}
```
-
-
-***
-
-### Functionality
-
-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.
+### subtitleView
-Here is a code snippet demonstrating how you can customize the functionality of the `Call Logs` component.
+Replace the subtitle text (call type, duration).
-```ts
+```ts lines
import { CometChatCallLogs } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const CallLogDemo = () => {
- return
-
-
-```js
-import { CometChatCallLogs } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const CallLogDemo = () => {
- return
-
-
-
-Below is a list of customizations along with corresponding code snippets
-
-| Property | Description | Code |
-| ------------------ | --------------------------------------------------------------------------- | ----------------------------------------------------------------- |
-| **Active Call** | Object representing the active call that is currently selected. | `activeCall={call}` |
-| **Show Scrollbar** | Controls the visibility of the scrollbar in the list. | `showScrollbar={true}` |
-| **Loading View** | A custom view to display when call logs are being loaded. | `loadingView={<>Custom Loading View}` |
-| **Empty View** | A custom view to display when no call logs are available. | `emptyView={<>Custom Empty View}` |
-| **Error View** | A custom view to display when an error occurs while fetching the call logs. | `errorView={<>Custom Error View}` |
-| **Item View** | A function that renders a JSX element to display the item view. | `itemView={(call) => { return (<>Custom Item View)}}` |
-| **Leading View** | A function that renders a JSX element to display the leading view. | `leadingView={(call) => { return (<>Custom Leading View)}}` |
-| **Title View** | A function that renders a JSX element to display the title view. | `titleView={(call) => { return (<>Custom Title View)}}` |
-| **Sub Title View** | A function that renders a JSX element to display the subtitle view. | `subtitleView={(call) => { return (<>Custom Sub Title View)}}` |
-| **Trailing View** | A function that renders a JSX element to display the trailing view. | `trailingView={(call) => { return (<>Custom Trailing View)}}` |
-
-***
-
-### Advanced
-
-For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component.
-
-***
-
-#### Call Initiated Date Time Format
-
-The `callInitiatedDateTimeFormat` property allows you to customize the **Call Initiated** timestamp displayed in the call logs.
-
-Default Date Time Format:
-
-```ruby
-new CalendarObject({
- today: `DD MMM, hh:mm A`, // Example: "25 Jan, 10:30 AM"
- yesterday: `DD MMM, hh:mm A`, // Example: "25 Jan, 10:30 AM"
- otherDays: `DD MMM, hh:mm A`, // Example: "25 Jan, 10:30 AM"
-});
-```
-
-The following example demonstrates how to modify the **Call Initiated** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject).
-
-
-
-```ts
-import { CometChatCallLogs, CalendarObject } from "@cometchat/chat-uikit-react";
-
-// Define a custom date format pattern
-function getDateFormat() {
- const dateFormat = new CalendarObject({
- today: `hh:mm A`, // Example: "10:30 AM"
- yesterday: `[yesterday]`, // Example: "yesterday"
- otherDays: `DD/MM/YYYY`, // Example: "25/05/2025"
- });
- return dateFormat;
+
+```css lines
+.custom-call-log-subtitle {
+ font: var(--cometchat-font-body-regular);
+ color: var(--cometchat-text-color-secondary);
}
-
-// Apply the custom format to the CometChatCallLogs component
-
-
-
-
-**Fallback Mechanism**
+### trailingView
-* If you **do not** pass any property in the [**CalendarObject**](/ui-kit/react/localize#calendarobject), the component will first check the [**global configuration**](/ui-kit/react/localize#customisation). If the property is **also missing in the global configuration**, it will **fallback to the component's default formatting**.
-
-
-
-***
-
-#### ItemView
-
-With this property, you can assign a custom ListItem to the Call Logs Component.
-
-Shown below is the default chat interface.
-
-
- 
-
-
-The customized chat interface is displayed below.
-
-
- 
-
-
-Use the following code to achieve the customization shown above.
+Replace the right section (call-back button area).
-```ts
-import {
- CometChatCallLogs,
- CometChatUIKitLoginListener,
- isMissedCall,
- isSentByMe,
- verifyCallUser,
-} from "@cometchat/chat-uikit-react";
+```ts lines
import { CometChatCallLogs } from "@cometchat/chat-uikit-react";
-const CallLogDemo = () => {
- const getItemView = (call: any) => {
- const missedCall = isMissedCall(
- call,
- CometChatUIKitLoginListener?.getLoggedInUser()!
- );
- const isCallSentByMe = isSentByMe(
- call,
- CometChatUIKitLoginListener?.getLoggedInUser()!
- );
-
- let callStatus = missedCall
- ? "Missed Call"
- : isCallSentByMe
- ? "Outgoing Call"
- : "Incoming Call";
-
- let callIcon = missedCall
- ? missedIcon
- : isCallSentByMe
- ? outgoingIcon
- : incomingIcon;
-
- function formatDate(timestamp: number) {
- // Convert the timestamp from seconds to milliseconds
- const date = new Date(timestamp * 1000);
-
- // Define options for formatting
- const options: Object = {
- day: "2-digit",
- month: "short",
- hour: "2-digit",
- minute: "2-digit",
- hour12: true,
- };
-
- // Format the date with the specified options
- return date.toLocaleDateString("en-GB", options);
- }
-
- return (
-
-
-
-```js
-import { CometChatCallLogs, CometChatUIKitLoginListener, isMissedCall, isSentByMe, verifyCallUser } from "@cometchat/chat-uikit-react";
-
-const CallLogDemo = () => {
- const getItemView = (call) => {
- const missedCall = isMissedCall(call, CometChatUIKitLoginListener?.getLoggedInUser()!);
- const isCallSentByMe = isSentByMe(call, CometChatUIKitLoginListener?.getLoggedInUser()!);
-
- let callStatus = missedCall
- ? "Missed Call"
- : isCallSentByMe
- ? "Outgoing Call"
- : "Incoming Call";
-
- let callIcon = missedCall
- ? missedIcon
- : isCallSentByMe
- ? outgoingIcon
- : incomingIcon;
-
- function formatDate(timestamp: number) {
- // Convert the timestamp from seconds to milliseconds
- const date = new Date(timestamp * 1000);
-
- // Define options for formatting
- const options: Object = {
- day: '2-digit',
- month: 'short',
- hour: '2-digit',
- minute: '2-digit',
- hour12: true,
- };
-
- // Format the date with the specified options
- return date.toLocaleDateString('en-GB', options);
- }
-
- return (
-
-
-
-```css
-.cometchat .cometchat-call-logs .cometchat-list-item__trailing-view {
- width: auto;
- overflow: hidden;
- color: #727272;
- text-overflow: ellipsis;
- font: 400 14px/120% roboto;
- font-style: normal;
-}
-
-.cometchat .cometchat-call-logs .cometchat-avatar {
- background-color: #edeafa;
-}
-
-.cometchat .cometchat-call-logs .cometchat-avatar__image {
- height: 24px;
- width: 24px;
-}
-
-.cometchat .cometchat-call-logs .cometchat-list-item__body-title {
- overflow: hidden;
- color: #141414;
- text-overflow: ellipsis;
- white-space: nowrap;
- font: 500 16px/19.2px roboto;
- font-style: normal;
-}
-
-.cometchat .cometchat-call-logs .cometchat-list-item__body-subtitle {
- overflow: hidden;
- color: #727272;
- text-overflow: ellipsis;
- font: 400 14px/120% roboto;
- font-style: normal;
+
+```css lines
+.custom-call-log-trailing button {
+ background: var(--cometchat-primary-color);
+ color: var(--cometchat-static-white);
+ border: none;
+ border-radius: var(--cometchat-radius-2);
+ padding: 4px 12px;
+ cursor: pointer;
+ font: var(--cometchat-font-body-regular);
}
```
-
-
-***
-
-#### SubtitleView
-
-You can customize the subtitle view for each call logs item to meet your requirements.
-
-Shown below is the default chat interface.
-
-
- 
-
-
-The customized chat interface is displayed below.
-
-
- 
-
+### leadingView
-Use the following code to achieve the customization shown above.
+Replace the avatar / left section.
-```ts
-import {
- CometChatCallLogs,
- CometChatUIKitLoginListener,
- isMissedCall,
- isSentByMe,
-} from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const CallLogDemo = () => {
- const getSubtitleView = (call: any): JSX.Element => {
- const missedCall = isMissedCall(
- call,
- CometChatUIKitLoginListener?.getLoggedInUser()!
- );
- const isCallSentByMe = isSentByMe(
- call,
- CometChatUIKitLoginListener?.getLoggedInUser()!
- );
-
- const iconClass = missedCall
- ? "cometchat-call-logs__list-item-subtitle-icon-missed-call"
- : isCallSentByMe
- ? "cometchat-call-logs__list-item-subtitle-icon-outgoing-call"
- : "cometchat-call-logs__list-item-subtitle-icon-incoming-call";
-
- const callStatus = missedCall
- ? "Missed Call"
- : isCallSentByMe
- ? "Outgoing Call"
- : "Incoming Call";
-
- return (
- <>
-
-
-
-```js
-import { CometChatCallLogs,CometChatUIKitLoginListener,isMissedCall,isSentByMe } from "@cometchat/chat-uikit-react";
-import React from "react";
+```ts lines
+import { CometChatCallLogs } from "@cometchat/chat-uikit-react";
-const CallLogDemo = () => {
- const getSubtitleView = (call) => {
-
- const missedCall = isMissedCall(call, CometChatUIKitLoginListener?.getLoggedInUser()!);
- const isCallSentByMe = isSentByMe(call, CometChatUIKitLoginListener?.getLoggedInUser()!);
-
- const iconClass = missedCall
- ? "cometchat-call-logs__list-item-subtitle-icon-missed-call"
- : isCallSentByMe
- ? "cometchat-call-logs__list-item-subtitle-icon-outgoing-call"
- : "cometchat-call-logs__list-item-subtitle-icon-incoming-call";
-
- const callStatus = missedCall
- ? "Missed Call"
- : isCallSentByMe
- ? "Outgoing Call"
- : "Incoming Call";
-
- return (
- <>
-
-
-
-```css
-.cometchat-call-logs__list-item-subtitle-text {
- overflow: hidden;
- color: #727272;
- text-overflow: ellipsis;
- font: 400 14px/120% Roboto;
- font-style: normal;
+
+```css lines
+.custom-call-log-leading img {
+ height: 40px;
+ width: 40px;
+ border-radius: 50%;
+ object-fit: cover;
}
```
-
-
-***
+### titleView
-#### TrailingView
-
-You can customize the trailing view for each call logs item to meet your requirements.
-
-Shown below is the default chat interface.
-
-
- 
-
-
-The customized chat interface is displayed below.
-
-
- 
-
-
-Use the following code to achieve the customization shown above.
+Replace the name / title text.
-```ts
-import { CallLog } from "@cometchat/calls-sdk-javascript";
+```ts lines
import { CometChatCallLogs } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const CallLogDemo = () => {
- function formatDate(timestamp: number) {
- // Convert the timestamp from seconds to milliseconds
- const date = new Date(timestamp * 1000);
-
- // Define options for formatting
- const options: Object = {
- day: "2-digit",
- month: "short",
- hour: "2-digit",
- minute: "2-digit",
- hour12: true,
- };
-
- // Format the date with the specified options
- return date.toLocaleDateString("en-GB", options);
- }
-
- const getTrailingView = (call: any) => {
- return (
-
-
-
-```js
-import { CometChatCallLogs } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const CallLogDemo = () => {
- function formatDate(timestamp) {
- // Convert the timestamp from seconds to milliseconds
- const date = new Date(timestamp * 1000);
-
- // Define options for formatting
- const options = {
- day: "2-digit",
- month: "short",
- hour: "2-digit",
- minute: "2-digit",
- hour12: true,
- };
-
- // Format the date with the specified options
- return date.toLocaleDateString("en-GB", options);
- }
-
- const getTrailingView = (call) => {
- return (
-
-
-
-```css
-.cometchat .cometchat-call-logs .cometchat-list-item__trailing-view {
- width: auto;
- overflow: hidden;
- color: #727272;
- text-overflow: ellipsis;
- font: 400 14px/120% roboto;
- font-style: normal;
+
+```css lines
+.custom-call-log-title {
+ font: var(--cometchat-font-heading4-bold);
+ color: var(--cometchat-text-color-primary);
}
```
-
-
-#### LeadingView
+### callInitiatedDateTimeFormat
-You can customize the leading view for each call logs item to meet your requirements.
+Customize the call initiated timestamp format using a `CalendarObject`.
-Shown below is the default chat interface.
-
-
-
-
-
-The customized chat interface is displayed below.
-
-
- 
-
-
-Use the following code to achieve the customization shown above.
-
-
-
-```ts
-import { CallLog } from "@cometchat/calls-sdk-javascript";
+```ts lines
import {
- CometChatUIKitLoginListener,
CometChatCallLogs,
+ CalendarObject,
} from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const CallLogDemo = () => {
- const getLeadingView = (call: any) => {
- const loggedInUser = CometChatUIKitLoginListener.getLoggedInUser();
- return (
-
-
-
-```js
-import {
- CometChatUIKitLoginListener,
- CometChatCallLogs,
-} from "@cometchat/chat-uikit-react";
-import React from "react";
+
+If a property is not passed in the CalendarObject, the component checks the [global configuration](/ui-kit/react/localize#customisation) first, then falls back to the component's default formatting.
+
-const CallLogDemo = () => {
- const getLeadingView = (call) => {
- const loggedInUser = CometChatUIKitLoginListener.getLoggedInUser();
- return (
-
-
-```css
-.call-log-avatar {
- display: flex;
- width: 48px;
- height: 48px;
- padding: 8px;
- justify-content: center;
- align-items: center;
- border-radius: 1000px;
- background: #edeafa;
-}
+```tsx lines
+");
- background-size: contain;
- height: 32px;
- width: 32px;
+```css lines
+.cometchat-call-logs {
+ border-radius: 16px;
+ border: 1px solid #e8e8e8;
+ overflow: hidden;
}
-.call-log-incoming {
- background-image: url("");
- background-size: contain;
- height: 32px;
- width: 32px;
+.cometchat-call-logs .cometchat-list-item {
+ background: #f9f8fd;
}
-.call-log-outgoing {
- background-image: url("");
- background-size: contain;
- height: 32px;
- width: 32px;
+.cometchat-call-logs .cometchat-list-item:hover {
+ background: #edeafa;
}
-```
-
-
-
-
-
-#### TitleView
-
-You can customize the title view for each call logs item to meet your requirements.
-
-Shown below is the default chat interface.
-
-
-
-
-
-The customized chat interface is displayed below.
-
-
- 
-
-
-Use the following code to achieve the customization shown above.
-
-
-
-```ts
-import { CallLog } from "@cometchat/calls-sdk-javascript";
-import { CometChatCallLogs } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const CallLogDemo = () => {
- const getTitleView = (call: any) => {
- return (
-
-
-
-```js
-import { CometChatCallLogs } from "@cometchat/chat-uikit-react";
-import React from "react";
-const CallLogDemo = () => {
- const getTitleView = (call) => {
- return (
-
-
-
-```css
-.call-log-title {
- overflow: hidden;
+.cometchat-call-logs .cometchat-list-item__title {
color: #141414;
- text-overflow: ellipsis;
- white-space: nowrap;
font: 500 16px Roboto;
}
```
-
-
-
-
diff --git a/ui-kit/react/components-overview.mdx b/ui-kit/react/components-overview.mdx
index dfc456255..37f64a1a8 100644
--- a/ui-kit/react/components-overview.mdx
+++ b/ui-kit/react/components-overview.mdx
@@ -1,29 +1,131 @@
---
title: "Overview"
+description: "Browse all prebuilt UI components in the CometChat React UI Kit — conversations, messages, users, groups, calls, search, and AI."
---
-CometChat's **UI Kit** is a set of pre-built UI components that allows you to easily craft an in-app chat with all the essential messaging features.
+
-## Actions
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` |
+| Required setup | `CometChatUIKit.init()` + `CometChatUIKit.login()` before rendering any component |
+| Callback actions | `on={(param) => {}}` |
+| Data filtering | `RequestBuilder={new CometChat.RequestBuilder()}` |
+| Toggle features | `hide={true}` or `show={true}` |
+| Custom rendering | `View={() => JSX}` |
+| CSS overrides | Target `.cometchat-` class in global CSS |
+| Calling | Requires separate `@cometchat/calls-sdk-javascript` package |
-Actions direct the operational behavior of a component. They are split into two categories: Predefined Actions and User-Defined Actions.
+
-### Predefined Actions
+## Component Catalog
-These are actions that are inherently programmed into a UI component. They are ingrained in the component itself by default, and they execute automatically in response to user interaction, without needing any additional user input.
+All components are imported from `@cometchat/chat-uikit-react`.
-### User-Defined Actions
+### Conversations and Lists
-These are actions that must be explicitly specified by the user. They are not innately part of the component like predefined actions. Instead, they must be developed based on the unique needs of the user or the application. User-defined actions provide adaptability and allow for the creation of custom behaviors that align with the individual needs of the application.
+| Component | Purpose | Key Props | Page |
+| --- | --- | --- | --- |
+| CometChatConversations | Scrollable list of recent conversations | `conversationsRequestBuilder`, `onItemClick`, `onError` | [Conversations](/ui-kit/react/conversations) |
+| CometChatUsers | Scrollable list of users | `usersRequestBuilder`, `onItemClick`, `onError` | [Users](/ui-kit/react/users) |
+| CometChatGroups | Scrollable list of groups | `groupsRequestBuilder`, `onItemClick`, `onError` | [Groups](/ui-kit/react/groups) |
+| CometChatGroupMembers | Scrollable list of group members | `group`, `groupMemberRequestBuilder`, `onItemClick` | [Group Members](/ui-kit/react/group-members) |
-To customize the behavior of a component, actions can be overridden by you. This provides you with control over how the component responds to specific events or interactions.
+### Messages
-All components expose actions to the user, which means that users can interact with these types of components through predefined or user-defined actions.
+| Component | Purpose | Key Props | Page |
+| --- | --- | --- | --- |
+| CometChatMessageHeader | Toolbar with avatar, name, status, typing indicator | `user`, `group`, `enableAutoSummaryGeneration` | [Message Header](/ui-kit/react/message-header) |
+| CometChatMessageList | Scrollable message list with reactions, receipts, threads | `user`, `group`, `messagesRequestBuilder`, `goToMessageId` (string) | [Message List](/ui-kit/react/message-list) |
+| CometChatMessageComposer | Rich text input with attachments, mentions, voice notes | `user`, `group`, `onSendButtonClick`, `placeholderText` | [Message Composer](/ui-kit/react/message-composer) |
+| CometChatMessageTemplate | Pre-defined structure for custom message bubbles | `type`, `category`, `contentView`, `headerView`, `footerView` | [Message Template](/ui-kit/react/message-template) |
+| CometChatThreadHeader | Parent message bubble and reply count for threaded view | `parentMessage`, `onClose`, `hideReceipts`, `textFormatters` | [Thread Header](/ui-kit/react/thread-header) |
-***
+### Calling
-## Events
+| Component | Purpose | Key Props | Page |
+| --- | --- | --- | --- |
+| CometChatCallButtons | Voice and video call initiation buttons | `user`, `group`, `onVoiceCallClick`, `onVideoCallClick` | [Call Buttons](/ui-kit/react/call-buttons) |
+| CometChatIncomingCall | Incoming call notification with accept/decline | `call`, `onAccept(call)`, `onDecline(call)` | [Incoming Call](/ui-kit/react/incoming-call) |
+| CometChatOutgoingCall | Outgoing call screen with cancel control | `call`, `onCloseClicked` | [Outgoing Call](/ui-kit/react/outgoing-call) |
+| CometChatCallLogs | Scrollable list of call history | `callLogsRequestBuilder`, `onItemClick` | [Call Logs](/ui-kit/react/call-logs) |
-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.
+### Search and AI
-All Components have the ability to emit events. These events are dispatched in response to certain changes or user interactions within the component. By emitting events, these components allow other parts of the application to react to changes or interactions, thus enabling dynamic and interactive behavior within the application.
+| Component | Purpose | Key Props | Page |
+| --- | --- | --- | --- |
+| CometChatSearch | Real-time search across conversations and messages | `onConversationClicked(conversation, searchKeyword?)`, `onMessageClicked(message, searchKeyword?)`, `uid`, `guid`, `textFormatters` | [Search](/ui-kit/react/search) |
+| CometChatAIAssistantChat | AI agent chat with streaming, suggestions, history | `user`, `onSendButtonClick(message, previewMessageMode?)`, `aiAssistantTools` | [AI Assistant Chat](/ui-kit/react/ai-assistant-chat) |
+
+## Component API Pattern
+
+All components share a consistent API surface.
+
+### Actions
+
+Actions control component behavior. They split into two categories:
+
+**Predefined Actions** are built into the component and execute automatically on user interaction (e.g., clicking send dispatches the message). No configuration needed.
+
+**User-Defined Actions** are callback props that fire on specific events. Override them to customize behavior:
+
+```tsx lines
+ openThreadPanel(message)}
+ onError={(error) => logError(error)}
+/>
+```
+
+### Events
+
+Events enable decoupled communication between components. A component emits events that other parts of the application can subscribe to without direct references.
+
+```tsx lines
+import { CometChatMessageEvents } from "@cometchat/chat-uikit-react";
+
+const sub = CometChatMessageEvents.ccMessageSent.subscribe((message) => {
+ // react to sent message
+});
+
+// cleanup
+sub?.unsubscribe();
+```
+
+Each component page documents its emitted events in the Events section.
+
+### Filters
+
+List-based components accept `RequestBuilder` props to control which data loads:
+
+```tsx lines
+`) for style customization:
+
+```css lines
+.cometchat-message-list .cometchat-text-bubble__body-text {
+ font-family: "SF Pro";
+}
+```
diff --git a/ui-kit/react/conversations.mdx b/ui-kit/react/conversations.mdx
index a148e2bb6..923a59f2e 100644
--- a/ui-kit/react/conversations.mdx
+++ b/ui-kit/react/conversations.mdx
@@ -1,24 +1,35 @@
---
title: "Conversations"
+description: "Display and manage the list of recent conversations for the logged-in user using the CometChatConversations component in the React UI Kit."
---
-## Overview
+
+ 
+
-The Conversations is a Component, that shows all conversations related to the currently logged-in user.
+
-This component lists the most recent or latest conversations or contacts with whom you have exchanged messages. It provides a convenient way to quickly access and resume conversations with the people you have been in contact with recently.
+| Field | Value |
+| --- | --- |
+| Purpose | Scrollable list of recent one-on-one and group conversations for the logged-in user |
+| Package | `@cometchat/chat-uikit-react` |
+| Import | `import { CometChatConversations } from "@cometchat/chat-uikit-react";` |
+| Used in experiences | [One-to-one chat](/ui-kit/react/react-js-integration), Tab-based chat, Conversations + Messages layout |
+| Copy-paste base | See [Base Code](#base-code--stylesheet) below |
+| Primary output | `CometChat.Conversation` object (from `onItemClick`) |
+| Primary hook points | `onItemClick`, `onSelect`, `onError`, `onSearchBarClicked`, `conversationsRequestBuilder`, view slots (`itemView`, `subtitleView`, `trailingView`, `leadingView`, `headerView`, `titleView`) |
+| CSS root class | `.cometchat-conversations` |
+| Real-time events | `CometChatConversationEvents.ccConversationDeleted`, `CometChatConversationEvents.ccUpdateConversation`, `CometChatConversationEvents.ccMarkConversationAsRead` |
-
- 
-
+
-## Usage
+## Base Code and Stylesheet
-### Integration
+Renders a scrollable list of recent conversations.
-```tsx
+```tsx lines
import {
CometChatConversations,
TitleAlignment,
@@ -36,11 +47,9 @@ function ConversationsDemo() {
export default ConversationsDemo;
```
-
-
-```tsx
+```tsx lines
import { ConversationsDemo } from "./ConversationsDemo";
export default function App() {
@@ -51,23 +60,90 @@ export default function App() {
);
}
```
-
-
-### Actions
+Root CSS class for style overrides:
-[Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.
+```css lines
+.cometchat-conversations {
+ /* overrides here */
+}
+```
-#### 1. OnItemClick
+## Functionality
-`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.
+Small functional customizations for fine-tuning the component experience — text, icons, and UI element visibility.
-
-
-```tsx
+Props that control component behavior, grouped by surface area.
+
+### Data and Loading
+
+| Property | Type | Default | Effect | Pitfall |
+| --- | --- | --- | --- | --- |
+| `conversationsRequestBuilder` | `CometChat.ConversationsRequestBuilder` | SDK default (30 per page) | Controls which conversations load and in what order | Forgetting `.build()` is not needed — pass the builder, not the built request |
+| `activeConversation` | `CometChat.Conversation` | `undefined` | Highlights the specified conversation in the list | Must be a reference-equal object from the SDK; a manually constructed object won't match |
+
+### Selection Behavior
+
+| Property | Type | Default | Effect | Pitfall |
+| --- | --- | --- | --- | --- |
+| `selectionMode` | `SelectionMode` | `SelectionMode.none` | Enables single or multi-select checkboxes on list items | Must pair with `onSelect` to capture selections |
+
+### UI Visibility Toggles
+
+| Property | Type | Default | Effect | Pitfall |
+| --- | --- | --- | --- | --- |
+| `hideReceipts` | `boolean` | `false` | Hides message read/delivery receipt indicators | — |
+| `hideError` | `boolean` | `false` | Hides the default and custom error views | Also suppresses `errorView` if set |
+| `hideDeleteConversation` | `boolean` | `false` | Hides the delete option in the context menu | — |
+| `hideUserStatus` | `boolean` | `false` | Hides online/offline status indicator | — |
+| `hideGroupType` | `boolean` | `false` | Hides the group type icon | — |
+| `showSearchBar` | `boolean` | `false` | Shows a search bar at the top of the list | — |
+| `showScrollbar` | `boolean` | `false` | Shows the scrollbar in the conversation list | — |
+
+### State and UX Behavior
+
+| Property | Type | Default | Effect | Pitfall |
+| --- | --- | --- | --- | --- |
+| `disableSoundForMessages` | `boolean` | `false` | Disables the notification sound for incoming messages | — |
+| `customSoundForMessages` | `string` | built-in sound | URL to a custom audio file for incoming message notifications | Must be a valid audio URL accessible from the browser |
+
+### Custom Views (Render Props)
+
+These replace sections of the default UI. See [Custom View Slots](#custom-view-slots) for full examples.
+
+| Property | Type | Effect |
+| --- | --- | --- |
+| `searchView` | `JSX.Element` | Replaces the default search bar |
+| `loadingView` | `JSX.Element` | Shown while conversations are loading |
+| `emptyView` | `JSX.Element` | Shown when there are no conversations |
+| `errorView` | `JSX.Element` | Shown when an error occurs |
+
+
+## Actions
+
+[Actions](/ui-kit/react/components-overview#actions) split into predefined (built-in triggers) and user-defined (callbacks).
+
+### Predefined Actions
+
+Devs can specify custom behavior for predefined actions like navigation or routing.
+
+### User-Defined Actions
+
+#### onItemClick
+
+Fires when a user taps a conversation row. Primary navigation hook — typically used to set the active conversation and render the message view.
+
+| Detail | Value |
+| --- | --- |
+| When it fires | User clicks/taps a conversation list item |
+| Payload type | `(conversation: CometChat.Conversation) => void` |
+| What devs typically do next | Set active conversation in state, navigate to message view |
+
+```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);
@@ -77,23 +153,22 @@ const getOnItemClick = (conversation: CometChat.Conversation) => {
-
-
-
-***
+#### onSelect
-#### 2. OnSelect
+Fires when a conversation is selected or deselected in multi-select mode. Requires `selectionMode` to be set.
-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.
+| Detail | Value |
+| --- | --- |
+| When it fires | User checks/unchecks a conversation in selection mode |
+| Payload type | `(conversation: CometChat.Conversation, selected: boolean) => void` |
+| What devs typically do next | Track selected conversations for batch operations (delete, mute) |
-
-
-```tsx
+```tsx lines
import {
CometChatConversations,
SelectionMode,
} from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
const getOnSelect = (
conversation: CometChat.Conversation,
@@ -109,20 +184,19 @@ const getOnSelect = (
/>;
```
-
-
-
-
-***
+#### onError
-#### 3. OnError
+Fires when the component encounters an error (network failure, auth issue, etc.).
-This action doesn't change the behavior of the component but rather listens for any errors that occur in the Conversations component.
+| Detail | Value |
+| --- | --- |
+| When it fires | Any internal error during data fetching or rendering |
+| Payload type | `(error: CometChat.CometChatException) => void` |
+| What devs typically do next | Log to error tracking service, show custom toast |
-
-
-```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
@@ -131,19 +205,17 @@ const handleOnError = (error: CometChat.CometChatException) => {
-
-
-
-***
+#### onSearchBarClicked
-#### 4. onSearchBarClicked
+Fires when the user clicks the search bar (requires `showSearchBar={true}`).
-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.
+| Detail | Value |
+| --- | --- |
+| When it fires | User clicks/focuses the search bar |
+| Payload type | `() => void` |
+| What devs typically do next | Open a custom search overlay, track analytics |
-
-
-```tsx
+```tsx lines
import { CometChatConversations } from "@cometchat/chat-uikit-react";
const handleSearchClick = () => {
@@ -153,28 +225,26 @@ const handleSearchClick = () => {
-
-
+## Filters
-***
+Control which conversations appear using `ConversationsRequestBuilder`. Pass the builder (not a built request) to the `conversationsRequestBuilder` prop.
-### Filters
+Refer to [ConversationRequestBuilder](/sdk/javascript/retrieve-conversations) for the full API.
-You can set `ConversationsRequestBuilder` in the Conversations Component to filter the conversation list. You can modify the builder as per your specific requirements with multiple options available to know more refer to [ConversationRequestBuilder](/sdk/javascript/retrieve-conversations).
+### Filter Recipes
-You can set filters using the following parameters.
+| Recipe | Code |
+| --- | --- |
+| Only user conversations | `new CometChat.ConversationsRequestBuilder().setConversationType("user")` |
+| Only group conversations | `new CometChat.ConversationsRequestBuilder().setConversationType("group")` |
+| Limit to 10 per page | `new CometChat.ConversationsRequestBuilder().setLimit(10)` |
+| With specific tags | `new CometChat.ConversationsRequestBuilder().setTags(["vip"])` |
+| Filter by user tags | `new CometChat.ConversationsRequestBuilder().withUserAndGroupTags(true).setUserTags(["premium"])` |
+| Filter by group tags | `new CometChat.ConversationsRequestBuilder().withUserAndGroupTags(true).setGroupTags(["support"])` |
-1. **Conversation Type:** Filters on type of Conversation, `User` or `Groups`
-2. **Limit:** Number of conversations fetched in a single request.
-3. **WithTags:** Filter on fetching conversations containing tags
-4. **Tags:** Filters on specific `Tag`
-5. **UserTags:** Filters on specific User `Tag`
-6. **GroupTags:** Filters on specific Group `Tag`
+### Example
-
-
-```tsx
+```tsx lines
import { CometChatConversations } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
@@ -185,164 +255,117 @@ import { CometChat } from "@cometchat/chat-sdk-javascript";
/>;
```
-
-
-
-
-***
-
-### Events
-
-[Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.
-
-
-
-```tsxtsx
-const ccConversationDeleted =
- CometChatConversationEvents.ccConversationDeleted.subscribe(
- (conversation: CometChat.Conversation) => {
- // Your code here
- }
- );
-```
-
-
+### Performance Note
-
+The default page size is 30. Reducing it with `setLimit` can improve initial load time on slower connections. The component uses infinite scroll — the next page loads automatically as the user scrolls to the bottom.
-***
-
-
-```tsxtsx
-ccConversationDeleted?.unsubscribe();
-```
+## Events
-
+### UI Events
-
+The CometChatConversations component emits events via `CometChatConversationEvents`. Global events — subscribable from anywhere in the application.
-## Customization
+| Event | When it fires | Payload type |
+| --- | --- | --- |
+| `CometChatConversationEvents.ccConversationDeleted` | A conversation is deleted from the list | `CometChat.Conversation` |
+| `CometChatConversationEvents.ccUpdateConversation` | A conversation is updated (e.g., last message change, metadata update) | `CometChat.Conversation` |
+| `CometChatConversationEvents.ccMarkConversationAsRead` | A conversation is marked as read | `CometChat.Conversation` |
-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.
+#### Subscribe
-### Style
+```tsx lines
+import { CometChatConversationEvents } from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
-Using CSS you can customize the look and feel of the component in your app like the color, size, shape, and fonts.
+const deletedSub = CometChatConversationEvents.ccConversationDeleted.subscribe(
+ (conversation: CometChat.Conversation) => {
+ console.log("Conversation deleted:", conversation.getConversationId());
+ }
+);
-
- 
-
+const updatedSub = CometChatConversationEvents.ccUpdateConversation.subscribe(
+ (conversation: CometChat.Conversation) => {
+ console.log("Conversation updated:", conversation.getConversationId());
+ }
+);
-
-
-```tsx
-
-
-
-```css
-.cometchat-conversations .cometchat-list-item__body-title,
-.cometchat-conversations .cometchat-list__header-title,
-.cometchat-conversations .cometchat-avatar__text,
-.cometchat-conversations .cometchat-badge,
-.cometchat-conversations .cometchat-conversations__subtitle-text {
- font-family: "SF Pro";
-}
-
-.cometchat-conversations .cometchat-list__header-title {
- background: #fef8f8;
- border-bottom: 2px solid #f4b6b8;
-}
-
-.cometchat-conversations .cometchat-avatar {
- background: #f0999b;
-}
-
-.cometchat-conversations .cometchat-status-indicator {
- min-width: 10px;
- height: 10px;
-}
-
-.cometchat-conversations .cometchat-badge {
- background: #e5484d;
-}
+#### Unsubscribe
-.cometchat-conversations .cometchat-receipts-read {
- background: #e96b6f;
-}
+```tsx lines
+// In useEffect cleanup or component unmount
+deletedSub?.unsubscribe();
+updatedSub?.unsubscribe();
+readSub?.unsubscribe();
```
-
-
-
+### SDK Events (Real-Time)
-### Functionality
+The component automatically listens to these SDK events internally for real-time updates. No manual attachment needed unless additional side effects are required.
-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.
+| SDK Listener | What it does inside the component |
+| --- | --- |
+| `onTextMessageReceived` / `onMediaMessageReceived` / `onCustomMessageReceived` | Moves the conversation to the top, updates last message preview and unread count |
+| `onTypingStarted` / `onTypingEnded` | Shows/hides typing indicator in the subtitle |
+| `onMessagesDelivered` / `onMessagesRead` | Updates receipt ticks (unless `hideReceipts={true}`) |
+| `onUserOnline` / `onUserOffline` | Updates the online/offline status dot (unless `hideUserStatus={true}`) |
+| `onMemberAddedToGroup` / `onGroupMemberLeft` / etc. | Updates group conversation metadata |
-
-
-```tsx
-
+- Automatic: new messages, typing indicators, receipts, user presence, group membership changes
+- Manual: deleting a conversation via the SDK directly (not through the component's context menu) requires emitting `CometChatConversationEvents.ccConversationDeleted` for the UI to update
-
+#### React StrictMode Note
-Below is a list of customizations along with corresponding code snippets
+In React 18 StrictMode, `useEffect` runs twice on mount in development. SDK listeners may be registered twice. The component handles cleanup internally, but any additional listeners added alongside the component need cleanup in the `useEffect` return function to avoid duplicate event handling.
-| Property | Description | Code |
-| ------------------------------ | --------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ |
-| **Hide Receipts** | Disables the display of message read receipts. If set to `true`, the receipt status of the sent message won't be displayed. | `hideReceipts={false}` |
-| **Hide Error** | Hides the default and the custom error view passed in the `errorView` prop. | `hideError={true}` |
-| **Hide Delete Conversation** | Hides the delete conversation option in the default context menu. | `hideDeleteConversation={false}` |
-| **Hide User Status** | Hides the user's online/offline status indicator. | `hideUserStatus={true}` |
-| **Hide Group Type** | Hides the group type icon. | `hideGroupType={false}` |
-| **Show Search Bar** | Shows the search bar. | `showSearchBar={true}` |
-| **Active Conversation** | Specifies the conversation to highlight in the list. | `activeConversation={activeConversation}` |
-| **Selection Mode** | Determines the selection mode for the component. | `selectionMode={SelectionMode.multiple}` |
-| **Disable Sound For Messages** | Used to Disable sound for incoming messages. | `disableSoundForMessages={false}` |
-| **Custom Sound For Messages** | Custom audio sound for incoming messages. | `customSoundForMessages="Your custom sound url"` |
-| **Search View** | A custom search view which replaces the default search bar. | `searchView={<>Custom Search View}` |
-| **Loading View** | A custom component to display during the loading state. | `loadingView={<>Custom Loading View}` |
-| **Empty View** | A custom component to display when there are no conversations available. | `emptyView={<>Custom Empty View}` |
-| **Error View** | A custom component to display when an error occurs. | `errorView={<>Custom Error View}` |
+## Advanced: Custom View Slots
-### Advanced
+Customization override points for the conversation list UI. Each slot receives the conversation object and returns JSX.
-For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component.
+### Slot Catalog
-***
+| Slot | Params | What it replaces | Section |
+| --- | --- | --- | --- |
+| `itemView` | `(conversation: CometChat.Conversation) => JSX.Element` | Entire list item row | Whole item |
+| `leadingView` | `(conversation: CometChat.Conversation) => JSX.Element` | Avatar / left section | Sub-section (leading) |
+| `trailingView` | `(conversation: CometChat.Conversation) => JSX.Element` | Timestamp / badge / right section | Sub-section (trailing) |
+| `titleView` | `(conversation: CometChat.Conversation) => JSX.Element` | Name / title text | Sub-section (title) |
+| `subtitleView` | `(conversation: CometChat.Conversation) => JSX.Element` | Last message preview text | Sub-section (subtitle) |
+| `headerView` | `JSX.Element` | Entire header bar | Whole section |
+| `searchView` | `JSX.Element` | Search bar | Whole section |
+| `loadingView` | `JSX.Element` | Loading spinner | Empty/loading/error |
+| `emptyView` | `JSX.Element` | Empty state | Empty/loading/error |
+| `errorView` | `JSX.Element` | Error state | Empty/loading/error |
+| `options` | `(conversation: CometChat.Conversation) => CometChatOption[]` | Context menu / hover actions | Whole item |
-#### ItemView
+### itemView
-With this function, you can assign a custom ListItem to the Conversations Component.
+Replace the entire list item row.
-Shown below is the default chat interface.
+Default:
-The customized chat interface is displayed below.
+Customized:
-Use the following code to achieve the customization shown above.
-
-```ts
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
CometChatListItem,
@@ -370,11 +393,9 @@ const getItemView = (conversation: CometChat.Conversation) => {
itemView={getItemView} // Custom list item view
/>;
```
-
-
-
-```css
+
+```css lines
.cometchat-conversations .cometchat-avatar {
border-radius: 8px;
width: 32px;
@@ -385,26 +406,18 @@ const getItemView = (conversation: CometChat.Conversation) => {
gap: 4px;
}
```
-
-
-***
+### leadingView
-#### LeadingView
-
-The customized chat interface is displayed below.
+Replace the avatar / left section. Typing-aware avatar example.
-Use the following code to achieve the customization shown above.
-
-
-
-```ts
+```ts lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
@@ -473,25 +486,17 @@ const CustomLeadingView = (conversation: CometChat.Conversation) => {
-
-
-
-***
+### trailingView
-#### TrailingView
-
-The customized chat interface is displayed below.
+Replace the timestamp / badge / right section. Relative time badge example.
-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";
@@ -539,11 +544,9 @@ const CustomTrailingButtonView = (conv: CometChat.Conversation) => {
-
-
-```css
+
+```css lines
.conversations__trailing-view {
display: flex;
flex-direction: column;
@@ -584,226 +587,156 @@ const CustomTrailingButtonView = (conv: CometChat.Conversation) => {
height: 50px;
}
```
-
-
-***
-#### TextFormatters
+### titleView
-Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source. To configure the existing Mentions look and feel check out [CometChatMentionsFormatter](/ui-kit/react/mentions-formatter-guide)
+Replace the name / title text. User status inline example.
+
+
+ 
+
-
-```ts
-import { CometChatTextFormatter } from "@cometchat/chat-uikit-react";
-import DialogHelper from "./Dialog";
+
+```ts lines
+import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatConversations } from "@cometchat/chat-uikit-react";
-class ShortcutFormatter extends CometChatTextFormatter {
- private shortcuts: { [key: string]: string } = {};
- private dialogIsOpen: boolean = false;
- private dialogHelper = new DialogHelper();
- private currentShortcut: string | null = null; // Track the currently open shortcut
+// Custom title view component
+const customTitleView = (conversation: CometChat.Conversation) => {
+ let user =
+ conversation.getConversationType() == "user"
+ ? (conversation.getConversationWith() as CometChat.User)
+ : undefined;
+ return (
+
+
+```css lines
+.cometchat-conversations .conversations__title-view {
+ display: flex;
+ gap: 4px;
+ width: 100%;
+}
- onKeyDown(event: KeyboardEvent) {
- const caretPosition =
- this.currentCaretPosition instanceof Selection
- ? this.currentCaretPosition.anchorOffset
- : 0;
- const textBeforeCaret = this.getTextBeforeCaret(caretPosition);
+.cometchat-conversations
+ .conversations__title-view
+ .conversations__title-view-name {
+ color: #141414;
+ font: 500 16px/19.2px Roboto;
+ text-align: left;
+}
+.cometchat-conversations
+ .conversations__title-view
+ .conversations__title-view-status {
+ color: #6852d6;
+ font: 400 16px/19.2px Roboto;
+ text-align: left;
+}
+```
+
+
- const match = textBeforeCaret.match(/!([a-zA-Z]+)$/);
- if (match) {
- const shortcut = match[0];
- const replacement = this.shortcuts[shortcut];
- if (replacement) {
- // Close the currently open dialog, if any
- if (this.dialogIsOpen && this.currentShortcut !== shortcut) {
- this.closeDialog();
- }
- this.openDialog(replacement, shortcut);
- }
- }
- }
+### subtitleView
- getCaretPosition() {
- if (!this.currentCaretPosition?.rangeCount) return { x: 0, y: 0 };
- const range = this.currentCaretPosition?.getRangeAt(0);
- const rect = range.getBoundingClientRect();
- return {
- x: rect.left,
- y: rect.top,
- };
- }
+Replace the last message preview text.
- openDialog(buttonText: string, shortcut: string) {
- this.dialogHelper.createDialog(
- () => this.handleButtonClick(buttonText),
- buttonText
- );
- this.dialogIsOpen = true;
- this.currentShortcut = shortcut;
- }
+Default:
- closeDialog() {
- this.dialogHelper.closeDialog(); // Use DialogHelper to close the dialog
- this.dialogIsOpen = false;
- this.currentShortcut = null;
- }
-
- handleButtonClick = (buttonText: string) => {
- if (this.currentCaretPosition && this.currentRange) {
- // Inserting the replacement text corresponding to the shortcut
- const shortcut = Object.keys(this.shortcuts).find(
- (key) => this.shortcuts[key] === buttonText
- );
- if (shortcut) {
- const replacement = this.shortcuts[shortcut];
- this.addAtCaretPosition(
- replacement,
- this.currentCaretPosition,
- this.currentRange
- );
- }
- }
- if (this.dialogIsOpen) {
- this.closeDialog();
- }
- };
-
- getFormattedText(text: string): string {
- return text;
- }
-
- private getTextBeforeCaret(caretPosition: number): string {
- if (
- this.currentRange &&
- this.currentRange.startContainer &&
- typeof this.currentRange.startContainer.textContent === "string"
- ) {
- const textContent = this.currentRange.startContainer.textContent;
- if (textContent.length >= caretPosition) {
- return textContent.substring(0, caretPosition);
- }
- }
- return "";
- }
-}
-
-export default ShortcutFormatter;
-```
-
-
-
-
-```tsx
-import React from "react";
-import ReactDOM from "react-dom";
-
-interface DialogProps {
- onClick: () => void;
- buttonText: string;
-}
-
-const Dialog: React.FC = ({ onClick, buttonText }) => {
- console.log("buttonText", buttonText);
+
+ 
+
- return (
- 
+
- createDialog(onClick: () => void, buttonText: string) {
- this.dialogContainer = document.createElement("div");
- document.body.appendChild(this.dialogContainer);
+
+
+```ts lines
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatConversations } from "@cometchat/chat-uikit-react";
- ReactDOM.render(
- ,
- this.dialogContainer
+const subtitleView = (conversation: CometChat.Conversation) => {
+ if (conversation.getConversationType() === "user") {
+ return (
+ <>
+ Last Message at:{" "}
+ {getFormattedTimestamp(
+ (
+ conversation.getConversationWith() as CometChat.User
+ ).getLastActiveAt()
+ )}
+
+ );
+ } else {
+ return (
+ <>
+ Created at:{" "}
+ {getFormattedTimestamp(
+ (conversation.getConversationWith() as CometChat.Group).getCreatedAt()
+ )}
+
);
}
+};
- closeDialog() {
- if (this.dialogContainer) {
- ReactDOM.unmountComponentAtNode(this.dialogContainer);
- this.dialogContainer.remove();
- this.dialogContainer = null;
- }
- }
+function getFormattedTimestamp(timestamp: number): string {
+ const date = new Date(timestamp * 1000);
+ return date.toLocaleString();
}
-```
+
-
-
-```tsx
-import ShortcutFormatter from "./ShortCutFormatter";
-
-
+```css lines
+.cometchat-conversations .cometchat-list-item__body-subtitle {
+ overflow: hidden;
+ color: var(--cometchat-text-color-secondary, #727272);
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font: var(--cometchat-font-body-regular);
+ font-family: "SF Pro";
+ font-style: normal;
+}
```
-
-
-#### Header View
-
-You can set the Custom Header view to add more options to the Conversations component.
+### headerView
-The customized chat interface is displayed below.
+Replace the entire header bar.
-Use the following code to achieve the customization shown above.
-
-```ts
+```ts lines
import {
CometChatButton,
CometChatConversations,
@@ -825,11 +758,9 @@ const getHeaderView = () => {
-
-
-```css
+
+```css lines
.conversations__header {
display: flex;
width: 100%;
@@ -860,309 +791,402 @@ const getHeaderView = () => {
display: block;
}
```
-
-
-***
+### options
-#### Last Message Date Time Format
+Replace the context menu / hover actions on each conversation item.
-The `lastMessageDateTimeFormat` property allows you to customize the **Last Message** timestamp is displayed in the conversations.
+Default:
-Default Date Time Format:
+
+ 
+
-```ruby
-new CalendarObject({
- today: `hh:mm A`, // Example: "10:30 AM"
- yesterday: `[yesterday]`, // Example: "yesterday"
- otherDays: `DD/MM/YYYY`, // Example: "25/05/2025"
-});
-```
+Customized:
-The following example demonstrates how to modify the **Last Message** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject).
+
+ 
+
-```ts
+```ts lines
import {
+ CometChatOption,
CometChatConversations,
- CalendarObject,
} from "@cometchat/chat-uikit-react";
-// Define a custom date format pattern
-function getDateFormat() {
- const dateFormat = new CalendarObject({
- today: `DD MMM, hh:mm A`, // Example: "25 Jan, 10:30 AM"
- yesterday: `DD MMM, hh:mm A`, // Example: "25 Jan, 10:30 AM"
- otherDays: `DD MMM, hh:mm A`, // Example: "25 Jan, 10:30 AM"
- });
- return dateFormat;
-}
+const getOptions = (conversation: CometChat.Conversation) => {
+ return [
+ new CometChatOption({
+ title: "Delete",
+ iconURL: deleteIcon,
+ id: "delete",
+ onClick: () => {
+ // Logic here
+ },
+ }),
+ new CometChatOption({
+ title: "Mute Notification",
+ id: "mute",
+ onClick: () => {
+ // Logic here
+ },
+ }),
+ new CometChatOption({
+ title: "Mark as Unread",
+ id: "unread",
+ onClick: () => {
+ // Logic here
+ },
+ }),
+ new CometChatOption({
+ title: "Block",
+ id: "block",
+ onClick: () => {
+ // Logic here
+ },
+ }),
+ ];
+};
-// Apply the custom format to the CometChatConversations component
-
+
+```css lines
+.cometchat-conversations .cometchat-menu-list__main-menu-item-icon-delete {
+ background: red;
+}
-
-
-
-
-**Fallback Mechanism**
-
-* If you **do not** pass any property in the [**CalendarObject**](/ui-kit/react/localize#calendarobject), the component will first check the [**global configuration**](/ui-kit/react/localize#customisation). If the property is **also missing in the global configuration**, it will **fallback to the component's default formatting**.
-
-
+.cometchat-conversations .cometchat-menu-list__sub-menu {
+ background: transparent;
+ box-shadow: none;
+}
-***
+.cometchat-conversations .cometchat-menu-list__sub-menu-icon {
+ -webkit-mask: url(./assets/down-arrow.svg) center center no-repeat;
+ -webkit-mask-size: contain;
+}
+```
+
+
-#### TitleView
+#### Structure of CometChatOption
-The customized chat interface is displayed below.
+| Name | Description |
+| --- | --- |
+| `id` | Unique identifier for each option |
+| `title` | Heading text for each option |
+| `iconURL` | Asset URL of the icon for each option |
+| `onClick` | Method invoked when user clicks the option |
-
-
-
+### TextFormatters
-Use the following code to achieve the customization shown above.
+Assigns custom text formatters to the conversation subtitle. If not provided, default formatters from the data source are used. To configure Mentions, see [CometChatMentionsFormatter](/ui-kit/react/mentions-formatter-guide).
-
-```ts
-import React from "react";
+
+```ts lines
+import { CometChatTextFormatter } from "@cometchat/chat-uikit-react";
+import DialogHelper from "./Dialog";
import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatConversations } from "@cometchat/chat-uikit-react";
-// Custom title view component
-const customTitleView = (conversation: CometChat.Conversation) => {
- let user =
- conversation.getConversationType() == "user"
- ? (conversation.getConversationWith() as CometChat.User)
- : undefined;
- return (
-
+ onKeyDown(event: KeyboardEvent) {
+ const caretPosition =
+ this.currentCaretPosition instanceof Selection
+ ? this.currentCaretPosition.anchorOffset
+ : 0;
+ const textBeforeCaret = this.getTextBeforeCaret(caretPosition);
-
-```css
-.cometchat-conversations .conversations__title-view {
- display: flex;
- gap: 4px;
- width: 100%;
-}
+ const match = textBeforeCaret.match(/!([a-zA-Z]+)$/);
+ if (match) {
+ const shortcut = match[0];
+ const replacement = this.shortcuts[shortcut];
+ if (replacement) {
+ // Close the currently open dialog, if any
+ if (this.dialogIsOpen && this.currentShortcut !== shortcut) {
+ this.closeDialog();
+ }
+ this.openDialog(replacement, shortcut);
+ }
+ }
+ }
-.cometchat-conversations
- .conversations__title-view
- .conversations__title-view-name {
- color: #141414;
- font: 500 16px/19.2px Roboto;
- text-align: left;
-}
-.cometchat-conversations
- .conversations__title-view
- .conversations__title-view-status {
- color: #6852d6;
- font: 400 16px/19.2px Roboto;
- text-align: left;
-}
-```
+ getCaretPosition() {
+ if (!this.currentCaretPosition?.rangeCount) return { x: 0, y: 0 };
+ const range = this.currentCaretPosition?.getRangeAt(0);
+ const rect = range.getBoundingClientRect();
+ return {
+ x: rect.left,
+ y: rect.top,
+ };
+ }
-
+ openDialog(buttonText: string, shortcut: string) {
+ this.dialogHelper.createDialog(
+ () => this.handleButtonClick(buttonText),
+ buttonText
+ );
+ this.dialogIsOpen = true;
+ this.currentShortcut = shortcut;
+ }
-
+ closeDialog() {
+ this.dialogHelper.closeDialog(); // Use DialogHelper to close the dialog
+ this.dialogIsOpen = false;
+ this.currentShortcut = null;
+ }
-***
+ handleButtonClick = (buttonText: string) => {
+ if (this.currentCaretPosition && this.currentRange) {
+ // Inserting the replacement text corresponding to the shortcut
+ const shortcut = Object.keys(this.shortcuts).find(
+ (key) => this.shortcuts[key] === buttonText
+ );
+ if (shortcut) {
+ const replacement = this.shortcuts[shortcut];
+ this.addAtCaretPosition(
+ replacement,
+ this.currentCaretPosition,
+ this.currentRange
+ );
+ }
+ }
+ if (this.dialogIsOpen) {
+ this.closeDialog();
+ }
+ };
-#### SubtitleView
+ getFormattedText(text: string): string {
+ return text;
+ }
-You can customize the subtitle view for each conversation item to meet your requirements.
+ private getTextBeforeCaret(caretPosition: number): string {
+ if (
+ this.currentRange &&
+ this.currentRange.startContainer &&
+ typeof this.currentRange.startContainer.textContent === "string"
+ ) {
+ const textContent = this.currentRange.startContainer.textContent;
+ if (textContent.length >= caretPosition) {
+ return textContent.substring(0, caretPosition);
+ }
+ }
+ return "";
+ }
+}
-Shown below is the default chat interface.
+export default ShortcutFormatter;
+```
+
+
+```tsx lines
+import React from "react";
+import ReactDOM from "react-dom";
-
-
-
+interface DialogProps {
+ onClick: () => void;
+ buttonText: string;
+}
-The customized chat interface is displayed below.
+const Dialog: React.FC = ({ onClick, buttonText }) => {
+ console.log("buttonText", buttonText);
-
-
-
+ return (
+
-
-```ts
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatConversations } from "@cometchat/chat-uikit-react";
+ createDialog(onClick: () => void, buttonText: string) {
+ this.dialogContainer = document.createElement("div");
+ document.body.appendChild(this.dialogContainer);
-const subtitleView = (conversation: CometChat.Conversation) => {
- if (conversation.getConversationType() === "user") {
- return (
- <>
- Last Message at:{" "}
- {getFormattedTimestamp(
- (
- conversation.getConversationWith() as CometChat.User
- ).getLastActiveAt()
- )}
-
- );
- } else {
- return (
- <>
- Created at:{" "}
- {getFormattedTimestamp(
- (conversation.getConversationWith() as CometChat.Group).getCreatedAt()
- )}
-
+ ReactDOM.render(
+ ,
+ this.dialogContainer
);
}
-};
-function getFormattedTimestamp(timestamp: number): string {
- const date = new Date(timestamp * 1000);
- return date.toLocaleString();
+ closeDialog() {
+ if (this.dialogContainer) {
+ ReactDOM.unmountComponentAtNode(this.dialogContainer);
+ this.dialogContainer.remove();
+ this.dialogContainer = null;
+ }
+ }
}
-
-
+
+```tsx lines
+import ShortcutFormatter from "./ShortCutFormatter";
-
-```css
-.cometchat-conversations .cometchat-list-item__body-subtitle {
- overflow: hidden;
- color: var(--cometchat-text-color-secondary, #727272);
- text-overflow: ellipsis;
- white-space: nowrap;
- font: var(--cometchat-font-body-regular);
- font-family: "SF Pro";
- font-style: normal;
-}
+
-
-***
-
-#### Options
+### lastMessageDateTimeFormat
-A function that returns a list of actions available when hovering over a conversation item.
+Customize the last message timestamp format using a `CalendarObject`.
-Shown below is the default chat interface.
+Default format:
-
-
-
-
-The customized chat interface is displayed below.
-
-
-
-
+```ts lines
+new CalendarObject({
+ today: `hh:mm A`, // Example: "10:30 AM"
+ yesterday: `[yesterday]`, // Example: "yesterday"
+ otherDays: `DD/MM/YYYY`, // Example: "25/05/2025"
+});
+```
-Use the following code to achieve the customization shown above.
+Custom format example:
-
-
-```ts
+```ts lines
import {
- CometChatOption,
CometChatConversations,
+ CalendarObject,
} from "@cometchat/chat-uikit-react";
-const getOptions = (conversation: CometChat.Conversation) => {
- return [
- new CometChatOption({
- title: "Delete",
- iconURL: deleteIcon,
- id: "delete",
- onClick: () => {
- // Logic here
- },
- }),
- new CometChatOption({
- title: "Mute Notification",
- id: "mute",
- onClick: () => {
- // Logic here
- },
- }),
- new CometChatOption({
- title: "Mark as Unread",
- id: "unread",
- onClick: () => {
- // Logic here
- },
- }),
- new CometChatOption({
- title: "Block",
- id: "block",
- onClick: () => {
- // Logic here
- },
- }),
- ];
-};
+// Define a custom date format pattern
+function getDateFormat() {
+ const dateFormat = new CalendarObject({
+ today: `DD MMM, hh:mm A`, // Example: "25 Jan, 10:30 AM"
+ yesterday: `DD MMM, hh:mm A`, // Example: "25 Jan, 10:30 AM"
+ otherDays: `DD MMM, hh:mm A`, // Example: "25 Jan, 10:30 AM"
+ });
+ return dateFormat;
+}
-
+
+If no property is passed in the [CalendarObject](/ui-kit/react/localize#calendarobject), the component checks the [global configuration](/ui-kit/react/localize#customisation) first. If also missing there, the component's default formatting applies.
+
-
-```css
-.cometchat-conversations .cometchat-menu-list__main-menu-item-icon-delete {
- background: red;
-}
-.cometchat-conversations .cometchat-menu-list__sub-menu {
- background: transparent;
- box-shadow: none;
+## Theme and Styling
+
+The root CSS class is `.cometchat-conversations`. All styling is done via CSS — no style object props.
+
+### Key CSS Selectors
+
+| What to change | Selector |
+| --- | --- |
+| Header title | `.cometchat-conversations .cometchat-list__header-title` |
+| List item body title | `.cometchat-conversations .cometchat-list-item__body-title` |
+| Avatar text | `.cometchat-conversations .cometchat-avatar__text` |
+| Unread badge | `.cometchat-conversations .cometchat-badge` |
+| Subtitle text | `.cometchat-conversations .cometchat-conversations__subtitle-text` |
+| Avatar shape | `.cometchat-conversations .cometchat-avatar` |
+| Status indicator | `.cometchat-conversations .cometchat-status-indicator` |
+| Read receipts | `.cometchat-conversations .cometchat-receipts-read` |
+
+### Minimal "Change One Thing" Example
+
+
+
+
+
+```css lines
+.cometchat-conversations .cometchat-list-item__body-title,
+.cometchat-conversations .cometchat-list__header-title,
+.cometchat-conversations .cometchat-avatar__text,
+.cometchat-conversations .cometchat-badge,
+.cometchat-conversations .cometchat-conversations__subtitle-text {
+ font-family: "SF Pro";
}
-.cometchat-conversations .cometchat-menu-list__sub-menu-icon {
- -webkit-mask: url(./assets/down-arrow.svg) center center no-repeat;
- -webkit-mask-size: contain;
+.cometchat-conversations .cometchat-list__header-title {
+ background: #fef8f8;
+ border-bottom: 2px solid #f4b6b8;
}
-```
-
+.cometchat-conversations .cometchat-avatar {
+ background: #f0999b;
+}
-
+.cometchat-conversations .cometchat-status-indicator {
+ min-width: 10px;
+ height: 10px;
+}
-##### Structure of CometChatOption
+.cometchat-conversations .cometchat-badge {
+ background: #e5484d;
+}
-| Name | Description |
-| ----------- | ----------------------------------------------------- |
-| **id** | Unique identifier for each option. |
-| **title** | Heading text for each option. |
-| **iconURL** | Sets the asset URL of the icon for each option. |
-| **onClick** | Method to be invoked when user clicks on each option. |
+.cometchat-conversations .cometchat-receipts-read {
+ background: #e96b6f;
+}
+```
-***
+### Customization Matrix
+
+| What you want to change | Where | Property/API | Example |
+| --- | --- | --- | --- |
+| Override behavior on user interaction | Component props | `on` callbacks | `onItemClick={(c) => setActive(c)}` |
+| Filter which conversations appear | Component props | `conversationsRequestBuilder` | `conversationsRequestBuilder={new CometChat.ConversationsRequestBuilder().setLimit(10)}` |
+| Toggle visibility of UI elements | Component props | `hide` boolean props | `hideReceipts={true}` |
+| Replace a section of the list item | Component props | `View` render props | `itemView={(conversation) => ={(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) =>
+- **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.
+The UI Kit comprises a variety of components that work together to deliver a comprehensive 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 with Quoted Message by showing the quoted reply above the input field, letting users compose their response in proper context. |
-## Threaded Conversations
+## Group Chat
-The Threaded Conversations feature enables users to respond directly to a specific message in a chat. This keeps conversations organized and enhances the user experience by maintaining context, especially in group chats.
+CometChat facilitates Group Chats, allowing users to have conversations with multiple participants simultaneously. This feature is crucial for team collaborations, group discussions, social communities, and more.
-
+ 
-| Components | Functionality |
-| ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Threaded Message Preview](/ui-kit/react/threaded-message-preview) | [Threaded Message Preview](/ui-kit/react/threaded-message-preview) component displays the parent message along with the number of replies. |
+For a comprehensive understanding and guide on implementing and using the Groups feature in CometChat, you should refer to our detailed guide on [Groups](/ui-kit/react/groups).
## Moderation
@@ -189,12 +200,39 @@ Learn more about how flagged messages are handled, reviewed, and moderated in th
| ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) provides the "Report Message" option in the message actions menu, allowing users to initiate the reporting process for inappropriate messages. |
-## Group Chat
+## Conversation and Advanced Search
-CometChat facilitates Group Chats, allowing users to have conversations with multiple participants simultaneously. This feature is crucial for team collaborations, group discussions, social communities, and more.
+Conversation and Advanced Search is a powerful feature provided by CometChat that enables users to quickly find conversations, messages, and media across chats in real time. It supports filters, scopes, and custom actions, allowing users to locate content efficiently while keeping the chat experience smooth and intuitive.
-
+
+| Components | Functionality |
+| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Search](/ui-kit/react/search) | [Search](/ui-kit/react/search) allows users to search across conversations and messages in real time. Users can click on a result to open the conversation or jump directly to a specific message. |
+| [Message Header](/ui-kit/react/message-header) | [Message Header](/ui-kit/react/message-header) shows the search button in the chat header, allowing users to search within a conversation. |
+| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) shows the selected message when clicked from search results and highlights it in the message list. |
+| [Conversations](/ui-kit/react/conversations) | [Conversations](/ui-kit/react/conversations) displays the search input. |
+
For a comprehensive understanding and guide on implementing and using the Groups feature in CometChat, you should refer to our detailed guide on [Groups](/ui-kit/react/groups).
+
+
+---
+
+## Next Steps
+
+
+
+ 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..639300055 100644
--- a/ui-kit/react/custom-text-formatter-guide.mdx
+++ b/ui-kit/react/custom-text-formatter-guide.mdx
@@ -1,7 +1,23 @@
---
title: "Custom Text Formatter"
+description: "Extend the CometChatTextFormatter base class to implement custom inline text patterns with regex and callbacks."
---
+
+
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` |
+| Key class | `CometChatTextFormatter` (abstract base class for custom formatters) |
+| Init | `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.
@@ -26,13 +42,13 @@ To integrate the `CometChatTextFormatter` class into your application:
1. Firstly, you need to import `CometChatTextFormatter` from the CometChat UI Kit react library.
-```javascript
+```javascript lines
import { CometChatTextFormatter } from "@cometchat/chat-uikit-react";
```
2. Now, extend the `CometChatTextFormatter` class to create your custom text formatter class. In this case, let's create a `HashTagTextFormatter`.
-```java
+```javascript lines
class HashTagTextFormatter extends CometChatTextFormatter {
...
}
@@ -40,7 +56,7 @@ class HashTagTextFormatter extends CometChatTextFormatter {
3. set up the `trackCharacter`, `regexPatterns` and `regexToReplaceFormatting`. For a hashtag formatter, we're setting the track character to `#`.
-```csharp
+```javascript lines
this.setTrackingCharacter("#");
this.setRegexPatterns([/\B#(\w+)\b/g]);
this.setRegexToReplaceFormatting([
@@ -50,14 +66,14 @@ this.setRegexToReplaceFormatting([
4. Set callback functions for key up and key down events.
-```javascript
+```javascript lines
this.setKeyUpCallBack(this.onKeyUp.bind(this));
this.setKeyDownCallBack(this.onKeyDown.bind(this));
```
5. Implement the `getFormattedText`, `getOriginalText` and custom logic to format text methods.
-```typescript
+```typescript lines
getFormattedText(inputText:string) { ... }
getOriginalText(inputText:string) { ... }
customLogicToFormatText(inputText: string) { ... }
@@ -73,7 +89,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 +243,7 @@ export default HashTagTextFormatter;
-```tsx
+```tsx lines
import { HashTagTextFormatter } from "./HashTagTextFormatter";
export default function MessageListDemo() {
@@ -288,7 +304,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 +322,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 +341,7 @@ onKeyUp(event: KeyboardEvent) {
-```js
+```js lines
/**
* Handles 'keydown' events.
* @param {KeyboardEvent} event - The keyboard event.
@@ -336,7 +352,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 +423,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 +449,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..75f2cf6f7 100644
--- a/ui-kit/react/events.mdx
+++ b/ui-kit/react/events.mdx
@@ -1,96 +1,102 @@
---
title: "Events"
+description: "Reference for CometChat React UI Kit events including conversation, user, group, message, and call events."
---
-## Overview
+
+
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` |
+| Conversation events | `ccConversationDeleted`, `ccUpdateConversation` |
+| User events | `ccUserBlocked`, `ccUserUnblocked` |
+| Group events | `ccGroupCreated`, `ccGroupDeleted`, `ccGroupLeft`, `ccGroupMemberScopeChanged`, `ccGroupMemberKicked`, `ccGroupMemberBanned`, `ccGroupMemberUnbanned`, `ccGroupMemberJoined`, `ccGroupMemberAdded`, `ccOwnershipChanged` |
+| Message events | `ccMessageSent`, `ccMessageEdited`, `ccReplyToMessage`, `ccMessageDeleted`, `ccMessageRead`, `ccLiveReaction`, plus SDK listener events |
+| Call events | `ccOutgoingCall`, `ccCallAccepted`, `ccCallRejected`, `ccCallEnded` |
+| UI events | `ccActiveChatChanged` |
+| Purpose | Decoupled communication between UI Kit components — subscribe to events to react to changes without direct component references |
-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.
+
-All components have the ability to emit events. These events are dispatched in response to certain changes or user interactions within the component. By emitting events, these components allow other parts of the application to react to changes or interactions, thus enabling dynamic and interactive behavior within the application.
+## Overview
+
+Events provide decoupled communication between UI Kit components. Components emit events in response to user interactions or state changes, allowing other parts of the application to react without direct component references.
### CometChatConversationEvents
-`CometChatConversationEvents` emits events when the logged-in user executes some action on a conversation object.
+`CometChatConversationEvents` emits events when the logged-in user acts on a conversation object.
| Name | Description |
| ------------------------- | ------------------------------------------------------------------------------------------------ |
-| ccConversationDeleted | This event is triggered when the user successfully deletes a conversation. |
-| ccUpdateConversation | This event is triggered to update a conversation in the conversation list. Takes a Conversation object to update. |
+| **ccConversationDeleted** | This event is triggered when the user successfully deletes a conversation. |
+| **ccUpdateConversation** | This event is triggered to update a conversation in the conversation list. Takes a Conversation object to update. |
### CometChatUserEvents
-`CometChatUserEvents` emits events when the logged-in user executes some action on an user object.
-
-It consists of the following events:
+`CometChatUserEvents` emits events when the logged-in user acts on another user object.
| Name | Description |
| --------------- | ------------------------------------------------------------------------- |
-| ccUserBlocked | This event is triggered when the user successfully blocks another user. |
-| ccUserUnblocked | This event is triggered when the user successfully unblocks another user. |
+| **ccUserBlocked** | This event is triggered when the user successfully blocks another user. |
+| **ccUserUnblocked** | This event is triggered when the user successfully unblocks another user. |
### CometChatGroupEvents
-`CometChatGroupEvents` emits events when the logged-in user executes some action on a group object.
-
-It consists of the following events:
+`CometChatGroupEvents` emits events when the logged-in user acts on a group object.
| Name | Description |
| ------------------------- | ------------------------------------------------------------------------------------ |
-| ccGroupCreated | This event is triggered when the user creates a group successfully |
-| ccGroupDeleted | This event is triggered when the group member deletes the group successfully |
-| ccGroupLeft | This event is triggered when the group member leaves the group successfully |
-| ccGroupMemberScopeChanged | This event is triggered when the group member's scope is updated successfully |
-| ccGroupMemberKicked | This event is triggered when the group member is kicked |
-| ccGroupMemberBanned | This event is triggered when the group member is banned |
-| ccGroupMemberUnbanned | This event is triggered when the group member is un-banned |
-| ccGroupMemberJoined | This event is triggered when a user joins the group |
-| ccGroupMemberAdded | This event is triggered when a user is added to the group |
-| ccOwnershipChanged | This event is triggered when the group ownership is assigned to another group member |
+| **ccGroupCreated** | This event is triggered when the user creates a group successfully |
+| **ccGroupDeleted** | This event is triggered when the group member deletes the group successfully |
+| **ccGroupLeft** | This event is triggered when the group member leaves the group successfully |
+| **ccGroupMemberScopeChanged** | This event is triggered when the group member's scope is updated successfully |
+| **ccGroupMemberKicked** | This event is triggered when the group member is kicked |
+| **ccGroupMemberBanned** | This event is triggered when the group member is banned |
+| **ccGroupMemberUnbanned** | This event is triggered when the group member is un-banned |
+| **ccGroupMemberJoined** | This event is triggered when a user joins the group |
+| **ccGroupMemberAdded** | This event is triggered when a user is added to the group |
+| **ccOwnershipChanged** | This event is triggered when the group ownership is assigned to another group member |
### CometChatMessageEvents
-`CometChatMessageEvents` emits events when the logged-in user executes some action on a message object.
-
-It consists of the following events:
+`CometChatMessageEvents` emits events when the logged-in user acts on a message object.
| Name | Description |
| -------------------------- | --------------------------------------------------------------------------------------------------------- |
-| ccMessageSent | This event is triggered when the sent message is in transit and also when it is received by the receiver. |
-| ccMessageEdited | This event is triggered when the user successfully edits the message. |
-| ccReplyToMessage | This event is triggered when the user successfully replies to a message. |
-| ccMessageDeleted | This event is triggered when the user successfully deletes the message. |
-| ccMessageRead | This event is triggered when the sent message is read by the receiver. |
-| ccLiveReaction | This event is triggered when the user sends a live reaction. |
-| onTextMessageReceived | This event is emitted when the CometChat SDK listener emits a text message. |
-| onMediaMessageReceived | This event is emitted when the CometChat SDK listener emits a media message. |
-| onCustomMessageReceived | This event is emitted when the CometChat SDK listener emits a custom message. |
-| onTypingStarted | This event is emitted when the CometChat SDK listener indicates that a user has started typing. |
-| onTypingEnded | This event is emitted when the CometChat SDK listener indicates that a user has stopped typing. |
-| onMessagesDelivered | This event is emitted when the CometChat SDK listener indicates that messages have been delivered. |
-| onMessagesRead | This event is emitted when the CometChat SDK listener indicates that messages have been read. |
-| onMessageEdited | This event is emitted when the CometChat SDK listener indicates that a message has been edited. |
-| onMessageDeleted | This event is emitted when the CometChat SDK listener indicates that a message has been deleted. |
-| onTransientMessageReceived | This event is emitted when the CometChat SDK listener emits a transient message. |
+| **ccMessageSent** | This event is triggered when the sent message is in transit and also when it is received by the receiver. |
+| **ccMessageEdited** | This event is triggered when the user successfully edits the message. |
+| **ccReplyToMessage** | This event is triggered when the user successfully replies to a message. |
+| **ccMessageDeleted** | This event is triggered when the user successfully deletes the message. |
+| **ccMessageRead** | This event is triggered when the sent message is read by the receiver. |
+| **ccLiveReaction** | This event is triggered when the user sends a live reaction. |
+| **onTextMessageReceived** | This event is emitted when the CometChat SDK listener emits a text message. |
+| **onMediaMessageReceived** | This event is emitted when the CometChat SDK listener emits a media message. |
+| **onCustomMessageReceived** | This event is emitted when the CometChat SDK listener emits a custom message. |
+| **onTypingStarted** | This event is emitted when the CometChat SDK listener indicates that a user has started typing. |
+| **onTypingEnded** | This event is emitted when the CometChat SDK listener indicates that a user has stopped typing. |
+| **onMessagesDelivered** | This event is emitted when the CometChat SDK listener indicates that messages have been delivered. |
+| **onMessagesRead** | This event is emitted when the CometChat SDK listener indicates that messages have been read. |
+| **onMessageEdited** | This event is emitted when the CometChat SDK listener indicates that a message has been edited. |
+| **onMessageDeleted** | This event is emitted when the CometChat SDK listener indicates that a message has been deleted. |
+| **onTransientMessageReceived** | This event is emitted when the CometChat SDK listener emits a transient message. |
### CometChatCallEvents
-`CometChatCallEvents` emits events when the logged-in user executes some action on a call object.
-
-It consists of the following events:
+`CometChatCallEvents` emits events when the logged-in user acts on a call object.
| Name | Description |
| -------------- | ---------------------------------------------------------------------------- |
-| ccOutgoingCall | This event is triggered when the user initiates a voice/video call. |
-| ccCallAccepted | This event is triggered when the initiated call is accepted by the receiver. |
-| ccCallRejected | This event is triggered when the initiated call is rejected by the receiver. |
-| ccCallEnded | This event is triggered when the initiated call successfully ends. |
+| **ccOutgoingCall** | This event is triggered when the user initiates a voice/video call. |
+| **ccCallAccepted** | This event is triggered when the initiated call is accepted by the receiver. |
+| **ccCallRejected** | This event is triggered when the initiated call is rejected by the receiver. |
+| **ccCallEnded** | This event is triggered when the initiated call successfully ends. |
### UI events
-UI events, refer to actions or interactions performed by a user within the CometChat's UI Kit. These events are triggered when a user interacts with various UI elements, such as buttons, menus, checkboxes, input fields, or any other interactive components.
-
-It consists of the following events:
+UI events are triggered when a user interacts with UI Kit elements such as buttons, menus, or input fields.
| Name | Description |
| ------------------- | ---------------------------------------------------------------------------- |
-| ccActiveChatChanged | This event is triggered when the user navigates to a particular chat window. |
+| **ccActiveChatChanged** | This event is triggered when the user navigates to a particular chat window. |
+
+***
diff --git a/ui-kit/react/extensions.mdx b/ui-kit/react/extensions.mdx
index 15f4332d9..14aa71a92 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.
+Once you've enabled your desired extension in the dashboard, it integrates into your CometChat application upon initialization and successful login. Extension features are only available if 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.
+The UI Kit provides native support for a wide range of extensions. Enable the desired extensions from the CometChat Dashboard, and they automatically enhance the relevant components of your application.
## 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.
+
+
+ 
-### Polls
+#### TinyURL
+
+The TinyURL extension provides URL shortening capabilities for messages, similar to Bitly but using the TinyURL service. For a comprehensive understanding and guide on implementing and using the TinyURL Extension, refer to our specific guide on the [TinyURL Extension](/fundamentals/tinyurl).
+
+#### Voice Transcription
+
+The Voice Transcription extension converts audio messages into text, making it easier to read voice messages without playing them. For a comprehensive understanding and guide on implementing and using the Voice Transcription Extension, refer to our specific guide on the [Voice Transcription Extension](/fundamentals/voice-transcription).
+
+### User Engagement
+
+#### Giphy
+
+The Giphy extension allows users to search for and share GIFs in their conversations, adding a fun and expressive element to chats. For a comprehensive understanding and guide on implementing and using the Giphy Extension, refer to our specific guide on the [Giphy Extension](/fundamentals/giphy).
+
+#### Message Translation
+
+The Message Translation extension in CometChat is designed to translate any message into your local locale. It eliminates language barriers, making the chat more inclusive. For a comprehensive understanding and guide on implementing and using the Message Translation Extension, refer to our specific guide on the [Message Translation Extension](/fundamentals/message-translation).
+
+Once you have successfully activated the [Message Translation Extension](/fundamentals/message-translation) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of [MessageList Component](/ui-kit/react/message-list) component of UI Kits.
+
+
+ 
+
+
+#### Polls
The Polls extension enhances group discussions by allowing users to create polls. Users can ask questions with a predefined list of answers, enabling a quick, organized way to gather group opinions. For a comprehensive understanding and guide on implementing and using the Polls Extension, refer to our specific guide on the [Polls Extension](/fundamentals/polls).
@@ -36,17 +106,31 @@ Once you have successfully activated the [Polls Extension](/fundamentals/polls)
-### Collaborative Whiteboard
+#### Reminders
-The Collaborative Whiteboard extension facilitates real-time collaboration. Users can draw, brainstorm, and share ideas on a shared digital whiteboard. For a comprehensive understanding and guide on implementing and using the Collaborative Whiteboard Extension, refer to our specific guide on the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard).
+The Reminders extension allows users to set reminders for messages or create personal reminders. When a reminder is due, a bot sends a notification message to the user. For a comprehensive understanding and guide on implementing and using the Reminders Extension, refer to our specific guide on the [Reminders Extension](/fundamentals/reminders).
-Once you have successfully activated the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/react/message-composer) component of UI Kits.
+#### Stickers
+
+The Stickers extension allows users to express their emotions more creatively. It adds a much-needed fun element to the chat by allowing users to send various pre-designed stickers. For a comprehensive understanding and guide on implementing and using the Sticker Extension, refer to our specific guide on the [Sticker Extension](/fundamentals/stickers).
+
+Once you have successfully activated the [Sticker Extension](/fundamentals/stickers) from your CometChat Dashboard, the feature will automatically be incorporated into the [Message Composer](/ui-kit/react/message-composer) component of UI Kits.
- 
+
-### Collaborative Document
+#### Stipop
+
+The Stipop extension integrates the world's trendiest sticker platform into your chat, allowing users to search for and send stickers from Stipop's extensive library. For a comprehensive understanding and guide on implementing and using the Stipop Extension, refer to our specific guide on the [Stipop Extension](/fundamentals/stickers-stipop).
+
+#### Tenor
+
+The Tenor extension allows users to search for and share GIFs from Tenor's library in their conversations. For a comprehensive understanding and guide on implementing and using the Tenor Extension, refer to our specific guide on the [Tenor Extension](/fundamentals/tenor).
+
+### Collaboration
+
+#### Collaborative Document
With the Collaborative Document extension, users can work together on a shared document. This feature is essential for remote teams where document collaboration is a recurring requirement. For a comprehensive understanding and guide on implementing and using the Collaborative Document Extension, refer to our specific guide on the [Collaborative Document Extension](/fundamentals/collaborative-document).
@@ -56,32 +140,64 @@ Once you have successfully activated the [Collaborative Document Extension](/fun
-### Message Translation
+#### Collaborative Whiteboard
-The Message Translation extension in CometChat is designed to translate any message into your local locale. It eliminates language barriers, making the chat more inclusive. For a comprehensive understanding and guide on implementing and using the Message Translation Extension, refer to our specific guide on the [Message Translation Extension](/fundamentals/message-translation).
+The Collaborative Whiteboard extension facilitates real-time collaboration. Users can draw, brainstorm, and share ideas on a shared digital whiteboard. For a comprehensive understanding and guide on implementing and using the Collaborative Whiteboard Extension, refer to our specific guide on the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard).
-Once you have successfully activated the [Message Translation Extension](/fundamentals/message-translation) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of [MessageList Component](/ui-kit/react/message-list) component of UI Kits.
+Once you have successfully activated the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/react/message-composer) component of UI Kits.
-
+
-### Link Preview
+### Security
-The Link Preview extension provides a summary of the URL shared in the chat. It includes the title, a description, and a thumbnail image from the web page. For a comprehensive understanding and guide on implementing and using the Link Preview Extension, refer to our specific guide on the [Link Preview Extension](/fundamentals/link-preview).
+#### Disappearing Messages
-Once you have successfully activated the [Link Preview Extension](/fundamentals/link-preview) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/react/message-list) component of UI Kits.
+The Disappearing Messages extension allows users to send messages that automatically disappear after a specified time interval. This works for both one-on-one and group messages. For a comprehensive understanding and guide on implementing and using the Disappearing Messages Extension, refer to our specific guide on the [Disappearing Messages Extension](/fundamentals/disappearing-messages).
-
-
-
+### Customer Support
-### Thumbnail Generation
+#### Chatwoot
-The Thumbnail Generation extension automatically creates a smaller preview image whenever a larger image is shared, helping to reduce the upload/download time and bandwidth usage. For a comprehensive understanding and guide on implementing and using the Thumbnail Generation Extension, refer to our specific guide on the [Thumbnail Generation Extension](/fundamentals/thumbnail-generation).
+The Chatwoot extension integrates customer support by allowing your users to communicate with your support team directly through CometChat, eliminating the need for a separate support interface. For a comprehensive understanding and guide on implementing and using the Chatwoot Extension, refer to our specific guide on the [Chatwoot Extension](/fundamentals/chatwoot).
-Once you have successfully activated the [Thumbnail Generation Extension](/fundamentals/thumbnail-generation) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/react/message-list) component of UI Kits.
+#### Intercom
-
-
-
+The Intercom extension integrates Intercom's customer support platform with CometChat, enabling users to chat with your support team using the same chat interface they use for regular conversations. For a comprehensive understanding and guide on implementing and using the Intercom Extension, refer to our specific guide on the [Intercom Extension](/fundamentals/intercom).
+
+### Smart Chat Features
+
+#### Conversation Starter
+
+Conversation Starter suggests AI-generated opening messages to help users begin a new chat. For a comprehensive understanding and guide on implementing and using Conversation Starter, refer to our specific guide on the [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter) and the [AI Features](/ui-kit/react/ai-features) overview.
+
+#### Smart Replies
+
+Smart Replies provide AI-generated response suggestions to keep conversations flowing. For a comprehensive understanding and guide on implementing and using Smart Replies, refer to our specific guide on the [Smart Replies](/fundamentals/ai-user-copilot/smart-replies) and the [AI Features](/ui-kit/react/ai-features) overview.
+
+#### Conversation Summary
+
+Conversation Summary generates an AI-written recap of a conversation when needed. For a comprehensive understanding and guide on implementing and using Conversation Summary, refer to our specific guide on the [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary) and the [AI Features](/ui-kit/react/ai-features) overview.
+
+---
+
+
+---
+
+## Next Steps
+
+
+
+ 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..f0c04c863 100644
--- a/ui-kit/react/group-members.mdx
+++ b/ui-kit/react/group-members.mdx
@@ -1,26 +1,35 @@
---
title: "Group Members"
+description: "Display and manage the list of members in a CometChat group with roles, scopes, online status, and member management actions using the CometChatGroupMembers component in the React UI Kit."
---
-## 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.
-
-***
+
+
+| Field | Value |
+| --- | --- |
+| Purpose | Scrollable, searchable list of members in a specific group with roles, scopes, online status, and member management actions (kick, ban, scope change) |
+| Package | `@cometchat/chat-uikit-react` |
+| Import | `import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";` |
+| Used in experiences | Group detail panel, member management, mentions picker, admin tools |
+| Copy-paste base | See [Base Code](#base-code--stylesheet) below |
+| Primary output | `CometChat.GroupMember` object (from `onItemClick`) |
+| Primary hook points | `onItemClick`, `onSelect`, `onEmpty`, `onError`, `groupMemberRequestBuilder`, view slots (`itemView`, `subtitleView`, `trailingView`, `leadingView`, `headerView`, `titleView`) |
+| CSS root class | `.cometchat-group-members` |
+| Real-time events | `CometChatGroupEvents.ccGroupMemberKicked`, `CometChatGroupEvents.ccGroupMemberBanned`, `CometChatGroupEvents.ccGroupMemberScopeChanged`, `CometChatGroupEvents.ccGroupMemberAdded` |
-## Usage
+
-### Integration
+## Base Code and Stylesheet
-The following code snippet illustrates how you can directly incorporate the Group Members component into your Application.
+Renders a scrollable, searchable list of all members in a given group.
-```tsx
+```tsx lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -39,12 +48,10 @@ const GroupMembersDemo = () => {
export default GroupMembersDemo;
```
-
-
-```tsx
-import { GroupMembersDemo } from "./GroupMembersDemo";
+```tsx lines
+import GroupMembersDemo from "./GroupMembersDemo";
export default function App() {
return (
@@ -54,758 +61,335 @@ export default function App() {
);
}
```
-
-
-
-
-
-***
-
-### Actions
-
-[Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.
-
-##### 1. 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.
-
-This action does not come with any predefined behavior. However, you have the flexibility to override this event and tailor it to suit your needs using the following code snippet.
-
-
-
-```ts
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import {
- CometChatGroupMembers,
- SelectionMode,
-} from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const GroupMembersDemo = () => {
- const [chatGroup, setChatGroup] = React.useState();
-
- React.useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
- }, []);
-
- function handleOnSelect(
- groupMembers: CometChat.GroupMember,
- selected: boolean
- ): void {
- console.log(groupMembers, selected);
- /** Your custom onSelect actions */
- }
-
- return (
- <>
- {chatGroup && (
-
-
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import {
- CometChatGroupMembers,
- SelectionMode,
-} from "@cometchat/chat-uikit-react";
-import React, { useEffect, useState } from "react";
-
-const GroupMembersDemo = () => {
- const [chatGroup, setChatGroup] = useState(null);
-
- useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
- }, []);
-
- function handleOnSelect(groupMembers, selected) {
- console.log(groupMembers);
- /** Your custom onSelect actions
- }
-
- return (
- <>
- {chatGroup && (
-
-
-
-
-##### 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
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const GroupMembersDemo = () => {
- const [chatGroup, setChatGroup] = React.useState();
-
- React.useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
- }, []);
-
- function handleOnItemClick(groupMembers: CometChat.GroupMember): void {
- console.log(groupMembers, "your custom on item click action");
- }
-
- return (
- <>
- {chatGroup && (
-
-
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
-import { useEffect, useState } from "react";
-
-const GroupMembersDemo = () => {
- const [chatGroup, setChatGroup] = useState(null);
-
- useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
- }, []);
-
- function handleOnItemClick(groupMembers) {
- console.log(groupMembers, "your custom on item click action");
- }
-
- return (
- <>
- {chatGroup && (
-
-
-##### 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
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const GroupMembersDemo = () => {
- const [chatGroup, setChatGroup] = React.useState();
-
- React.useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
- }, []);
-
- function handleOnEmpty(): void {
- console.log("your custom on empty actions");
- }
-
- return (
- <>
- {chatGroup && (
-
-
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
-import { useEffect, useState } from "react";
-
-const GroupMembersDemo = () => {
- const [chatGroup, setChatGroup] = useState(null);
-
- useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
- }, []);
-
- function handleOnEmpty() {
- console.log("your custom on empty actions");
- }
-
- return (
- <>
- {chatGroup && (
-
-
-
-
-##### 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
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const GroupMembersDemo = () => {
- const [chatGroup, setChatGroup] = React.useState();
-
- React.useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
- }, []);
-
- function handleOnError(error: CometChat.CometChatException): void {
- /** Your Custom on error actions */
- }
-
- return (
- <>
- {chatGroup && (
-
+## Functionality
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
-import { useEffect, useState } from "react";
-
-const GroupMembersDemo = () => {
- const [chatGroup, setChatGroup] = useState(null);
-
- useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
- }, []);
-
- function handleOnError(error) {
- /** Your Custom on error actions */
- }
-
- return (
- <>
- {chatGroup && (
-
+| Property | Type | Default | Effect | Pitfall |
+| --- | --- | --- | --- | --- |
+| `group` | `CometChat.Group` | — (required) | The group whose members are fetched and displayed | Must be a valid SDK group object |
+| `groupMemberRequestBuilder` | `CometChat.GroupMembersRequestBuilder` | SDK default (30 per page) | Controls which members load and in what order | Pass the builder, not a built request |
+| `searchRequestBuilder` | `CometChat.GroupMembersRequestBuilder` | Same as `groupMemberRequestBuilder` | Controls filtering when the search bar is active | Keeps search results consistent with the main list filters |
+| `searchKeyword` | `string` | `""` | Pre-fills the search and filters the member list | Changing this prop triggers a re-fetch |
+| `disableLoadingState` | `boolean` | `false` | Skips the loading spinner when re-fetching | Useful when embedding inside another component that manages its own loading state |
-
+### Selection Behavior
-***
+| Property | Type | Default | Effect | Pitfall |
+| --- | --- | --- | --- | --- |
+| `selectionMode` | `SelectionMode` | `SelectionMode.none` | Enables single or multi-select checkboxes on list items | Must pair with `onSelect` to capture selections |
-### Filters
+### UI Visibility Toggles
-**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.
+| Property | Type | Default | Effect | Pitfall |
+| --- | --- | --- | --- | --- |
+| `hideSearch` | `boolean` | `false` | Hides the default search bar | — |
+| `hideError` | `boolean` | `false` | Hides the default and custom error views | Also suppresses `errorView` if set |
+| `hideKickMemberOption` | `boolean` | `false` | Hides the option to kick a member from the group | — |
+| `hideBanMemberOption` | `boolean` | `false` | Hides the option to ban a member from the group | — |
+| `hideScopeChangeOption` | `boolean` | `false` | Hides the option to change the scope of a group member | — |
+| `hideUserStatus` | `boolean` | `false` | Hides the user's online/offline status indicator | Also disables the SDK user presence listener |
+| `showScrollbar` | `boolean` | `false` | Shows the scrollbar in the member list | — |
-##### 1. GroupMembersRequestBuilder
+### Custom Views (Render Props)
-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)
+These replace sections of the default UI. See [Custom View Slots](#custom-view-slots) for full examples.
-| Methods | Type | Description |
-| -------------------- | -------------- | ------------------------------------------------------------------------------------------------- |
-| **setLimit** | number | sets the number of group members that can be fetched in a single request, suitable for pagination |
-| **setSearchKeyword** | String | used for fetching group members matching the passed string |
-| **setScopes** | Array\ | used for fetching group members based on multiple scopes |
+| Property | Type | Effect |
+| --- | --- | --- |
+| `loadingView` | `JSX.Element` | Shown while members are loading |
+| `emptyView` | `JSX.Element` | Shown when there are no members |
+| `errorView` | `JSX.Element` | Shown when an error occurs |
-**Example**
+## Actions
-In the example below, we are applying a filter to the Group Members by setting the limit to two and setting the scope to show only admin and moderator.
+[Actions](/ui-kit/react/components-overview#actions) split into predefined (built-in triggers) and user-defined (callbacks).
-
-
-```ts
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
-import React from "react";
+### Predefined Actions
-const GroupMembersDemo = () => {
- const [chatGroup, setChatGroup] = React.useState();
+The component has no built-in navigation behavior. All interaction handling is delegated to callbacks.
- React.useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
- }, []);
+### User-Defined Actions
- return (
- <>
- {chatGroup && (
-
+| Detail | Value |
+| --- | --- |
+| When it fires | User clicks/taps a group member list item |
+| Payload type | `(groupMember: CometChat.GroupMember) => void` |
+| What devs typically do next | Open member profile, start direct message |
-
-```js
+```tsx lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
-import { useEffect, useState } from "react";
-const GroupMembersDemo = () => {
- const [chatGroup, setChatGroup] = useState(null);
-
- useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
- }, []);
-
- return (
- <>
- {chatGroup && (
-
-
-
-
-##### 2. SearchRequestBuilder
+#### onSelect
-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.
+Fires when a group member is selected or deselected in multi-select mode. Requires `selectionMode` to be set.
-**Example**
+| Detail | Value |
+| --- | --- |
+| When it fires | User checks/unchecks a member in selection mode |
+| Payload type | `(groupMember: CometChat.GroupMember, selected: boolean) => void` |
+| What devs typically do next | Track selected members for batch operations (kick, ban) |
-
-
-```ts
+```tsx lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const GroupMembersDemo = () => {
- const [chatGroup, setChatGroup] = React.useState();
-
- React.useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
- }, []);
-
- return (
- <>
- {chatGroup && (
-
-
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
-import { useEffect, useState } from "react";
-
-const GroupMembersDemo = () => {
- const [chatGroup, setChatGroup] = useState(null);
-
- useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
- }, []);
-
- return (
- <>
- {chatGroup && (
-
-
-
-
-***
-
-### Events
-
-[Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.
-
-Events emitted by the Group Members component is as follows.
-
-| Event | Description |
-| ----------------------------- | ----------------------------------------------------------------- |
-| **ccGroupMemberBanned** | Triggers when the group member banned from the group successfully |
-| **ccGroupMemberKicked** | Triggers when the group member kicked from the group successfully |
-| **ccGroupMemberScopeChanged** | Triggers when the group member scope is changed in the group |
-
-
-
-```tsx
-const ccGroupMemberBanned = CometChatGroupEvents.ccGroupMemberBanned.subscribe(
- (item: IGroupMemberKickedBanned) => {
- /** Your Code */
- }
-);
-
-const ccGroupMemberKicked = CometChatGroupEvents.ccGroupMemberKicked.subscribe(
- (item: IGroupMemberKickedBanned) => {
- /** Your Code */
- }
-);
-
-const ccGroupMemberScopeChanged =
- CometChatGroupEvents.ccGroupMemberScopeChanged.subscribe(
- (item: IGroupMemberScopeChanged) => {
- /** Your Code */
- }
- );
-```
-
-
-
-
-
-***
-
-
-
-```tsx
-ccGroupMemberBanned?.unsubscribe();
+import {
+ CometChatGroupMembers,
+ SelectionMode,
+} from "@cometchat/chat-uikit-react";
-ccGroupMemberKicked?.unsubscribe();
+const handleOnSelect = (
+ groupMember: CometChat.GroupMember,
+ selected: boolean
+) => {
+ console.log("Member selected:", groupMember.getName(), selected);
+ // Your custom selection action
+};
-ccGroupMemberScopeChanged?.unsubscribe();
+
+#### onEmpty
-
+Fires when the group members list has no data to display.
-***
+| Detail | Value |
+| --- | --- |
+| When it fires | The fetched member list is empty |
+| Payload type | `() => void` |
+| What devs typically do next | Show a prompt to invite members |
-## Customization
+```tsx lines
+import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
-To fit your app's design requirements, you can customize the appearance of the Group Members component.
+const handleOnEmpty = () => {
+ console.log("No group members found");
+};
-### Style
+
-
+Fires when the component encounters an error (network failure, auth issue, etc.).
-
-
-```ts
+| Detail | Value |
+| --- | --- |
+| When it fires | Any internal error during data fetching or rendering |
+| Payload type | `(error: CometChat.CometChatException) => void` |
+| What devs typically do next | Log to error tracking service, show custom toast |
+
+```tsx lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
-import React from "react";
-import "./GroupMembersStyle.css";
-
-const GroupMembersDemo = () => {
- const [chatGroup, setChatGroup] = React.useState();
-
- React.useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
- }, []);
- return <>{chatGroup &&
+## Filters
-
-```css
-.cometchat-group-members .cometchat-list__header-title {
- background: #feede1;
- color: #f76808;
- font-family: "Times New Roman";
-}
+Control which members appear using `GroupMembersRequestBuilder`. Pass the builder (not a built request) to the `groupMemberRequestBuilder` prop.
-.cometchat-group-members .cometchat-list-item__body-title,
-.cometchat-group-members .cometchat-search-bar__input::placeholder {
- font-family: "Times New Roman";
-}
+Refer to [GroupMembersRequestBuilder](/sdk/javascript/retrieve-group-members) for the full API.
-.cometchat-group-members .cometchat-group-members__trailing-view-options {
- background: #feede1;
- color: #f76808;
- font-family: "Times New Roman";
-}
+### Filter Recipes
-.cometchat-group-members .cometchat-group-members__trailing-view-options-admin {
- border: 1px solid #f76808;
-}
+| Recipe | Code |
+| --- | --- |
+| Limit to 10 per page | `new CometChat.GroupMembersRequestBuilder("GROUP_GUID").setLimit(10)` |
+| Search by keyword | `new CometChat.GroupMembersRequestBuilder("GROUP_GUID").setSearchKeyword("john")` |
+| Admins and moderators only | `new CometChat.GroupMembersRequestBuilder("GROUP_GUID").setScopes(["admin", "moderator"])` |
-.cometchat-group-members .cometchat-group-members__trailing-view-options-owner {
- background: #f76808;
- color: #fff;
- font-family: "Times New Roman";
-}
+### Example
-.cometchat-group-members .cometchat-list-item__leading-view,
-.cometchat-group-members .cometchat-avatar {
- height: 40px;
- width: 40px;
-}
+```tsx lines
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
+
+
+### Search Request Builder
-
+The `searchRequestBuilder` uses `GroupMembersRequestBuilder` to filter the search list independently, keeping uniformity between the displayed member list and searched results.
-***
+```tsx lines
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
-### Functionality
+
-
-```ts
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
-import React from "react";
+The default page size is 30. Reducing it with `setLimit` can improve initial load time on slower connections. The component uses infinite scroll — the next page loads automatically as the user scrolls to the bottom.
-const GroupMembersDemo = () => {
- const [chatGroup, setChatGroup] = React.useState();
+## Events
- React.useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
- }, []);
+### UI Events
- return (
- <>
- {chatGroup && (
-
+| Event | Payload type | When it fires |
+| --- | --- | --- |
+| `CometChatGroupEvents.ccGroupMemberKicked` | `IGroupMemberKickedBanned` | A member is kicked from the group |
+| `CometChatGroupEvents.ccGroupMemberBanned` | `IGroupMemberKickedBanned` | A member is banned from the group |
+| `CometChatGroupEvents.ccGroupMemberScopeChanged` | `IGroupMemberScopeChanged` | A member's scope is changed |
+
+#### Events Subscribed
-
-```js
+The component internally subscribes to these events to update the list in real time:
+
+| Event | What it does inside the component |
+| --- | --- |
+| `CometChatGroupEvents.ccGroupMemberKicked` | Removes the kicked member from the list |
+| `CometChatGroupEvents.ccGroupMemberBanned` | Removes the banned member from the list |
+| `CometChatGroupEvents.ccGroupMemberScopeChanged` | Updates the member's scope in the list |
+| `CometChatGroupEvents.ccGroupMemberAdded` | Appends newly added members to the list |
+
+#### Subscribe
+
+```tsx lines
+import { CometChatGroupEvents } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
-import { useEffect, useState } from "react";
-const GroupMembersDemo = () => {
- const [chatGroup, setChatGroup] = useState(null);
+const kickedSub = CometChatGroupEvents.ccGroupMemberKicked.subscribe(
+ (item: { message: CometChat.Action; kickedFrom: CometChat.Group; kickedUser: CometChat.User; kickedBy: CometChat.User }) => {
+ console.log("Member kicked:", item.kickedUser.getName());
+ }
+);
- useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
- }, []);
+const bannedSub = CometChatGroupEvents.ccGroupMemberBanned.subscribe(
+ (item: { message: CometChat.Action; kickedFrom: CometChat.Group; kickedUser: CometChat.User; kickedBy: CometChat.User }) => {
+ console.log("Member banned:", item.kickedUser.getName());
+ }
+);
- return (
- <>
- {chatGroup && (
-
+#### Unsubscribe
-
+```tsx lines
+// In useEffect cleanup or component unmount
+kickedSub?.unsubscribe();
+bannedSub?.unsubscribe();
+scopeChangedSub?.unsubscribe();
+memberAddedSub?.unsubscribe();
+```
-Below is a list of customizations along with corresponding code snippets,
+### SDK Events (Real-Time)
-| Property | Description | Code |
-| ---------------------------- | ------------------------------------------------------------------------- | ---------------------------------------- |
-| **Hide Search** | Hides the default search bar. | `hideSearch={true}` |
-| **Hide Error** | Hides the default and custom error view passed in `errorView` prop. | `hideError={true}` |
-| **Hide Kick Member Option** | Hides the option to kick a member from the group. | `hideKickMemberOption={true}` |
-| **Hide Ban Member Option** | Hides the option to ban a member from the group. | `hideBanMemberOption={true}` |
-| **Hide Scope Change Option** | Hides the option to change the scope of a group member. | `hideScopeChangeOption={true}` |
-| **Hide User Status** | Hides the user's online/offline status indicator. | `hideUserStatus={true}` |
-| **Group** | The group for which members are being fetched. | `group={chatGroup}` |
-| **Search Keyword** | The keyword used to filter the group members list. | `searchKeyword="admin"` |
-| **Selection Mode** | Selection mode to use for the default list item view. | `selectionMode={SelectionMode.multiple}` |
-| **Show Scrollbar** | Controls the visibility of the scrollbar in the list. | `showScrollbar={true}` |
-| **Loading View** | A custom view to display during the loading state. | `loadingView={
-The customized chat interface is displayed below.
+Customized:
-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 {
@@ -880,11 +464,9 @@ const GroupMembersDemo = () => {
export default GroupMembersDemo;
```
-
-
-
-```css
+
+```css lines
.group-member-list-item {
display: flex;
min-width: 240px;
@@ -964,59 +546,57 @@ export default GroupMembersDemo;
display: none;
}
```
-
-
-***
+### titleView
-#### TitleView
-
-The customized chat interface is displayed below.
+Replace the name / title text. Role badge inline example.
-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";
+import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
-// Custom title view component
const customTitleView = (member: CometChat.GroupMember) => {
- return
-
-
-```css
-.group-members__title-view{
+
+```css lines
+.group-members__title-view {
display: flex;
align-items: center;
gap: 4px;
align-self: stretch;
- }
- .group-members__title-view-name{
+}
+
+.group-members__title-view-name {
overflow: hidden;
color: #141414;
text-overflow: ellipsis;
- font:500 16px Roboto
- }
- .group-members__title-view-type{
- color: #FFF;
+ font: 500 16px Roboto;
+}
+
+.group-members__title-view-type {
+ color: #fff;
font: 600 8px Roboto;
display: flex;
height: 15px;
@@ -1025,41 +605,35 @@ const customTitleView = (member: CometChat.GroupMember) => {
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;
- }
-```
+ background: #09c26f;
+}
+.group-members__title-view-public .group-members__title-view-role {
+ background: #0b7bea;
+}
+```
-
-***
+### subtitleView
-#### SubtitleView
+Replace the subtitle text. Joined date example.
-You can customize the subtitle view for each group members to meet your requirements.
-
-Shown below is the default chat interface.
+Default:
-The customized chat interface is displayed below.
+Customized:
-Use the following code to achieve the customization shown above.
-
-```ts
+```ts lines
import { CometChat, GroupMember } from "@cometchat/chat-sdk-javascript";
import React from "react";
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";
@@ -1100,11 +674,9 @@ const GroupMembersDemo = () => {
export default GroupMembersDemo;
```
-
-
-
-```css
+
+```css lines
.group-member-subtitle {
overflow: hidden;
color: #727272;
@@ -1113,116 +685,108 @@ export default GroupMembersDemo;
font: 400 14px Roboto;
}
```
-
-
-***
+### leadingView
-#### LeadingView
-
-The customized chat interface is displayed below.
+Replace the avatar / left section. Scope badge overlay example.
-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";
+import { CometChatGroupMembers, CometChatAvatar } from "@cometchat/chat-uikit-react";
-// Custom leading view component
const customLeadingView = (member: CometChat.GroupMember): JSX.Element => {
- // Determine the member's scope or owner status
const scope = member.getUid() === group.getOwner() ? "owner" : member.getScope();
return (
-
-
-```css
-.cometchat-group-members .cometchat-list-item .group-member__leading-view .cometchat-avatar__image, .cometchat-group-members .cometchat-list-item .group-member__leading-view .cometchat-avatar{
-border-radius: 8px;
-height: 48px ;
-width: 48px ;
+
+```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;
}
```
-
-
-***
-
-#### TrailingView
+### trailingView
-You can customize the trailing view for each group members to meet your requirements.
+Replace the right section. Scope tag example.
-Shown below is the default chat interface.
+Default:
-The customized chat interface is displayed below.
+Customized:
-Use the following code to achieve the customization shown above.
-
-```ts
+```ts lines
import { CometChat, GroupMember } from "@cometchat/chat-sdk-javascript";
import React from "react";
import {
@@ -1264,7 +828,10 @@ const GroupMembersDemo = () => {
return (
<>
{chatGroup && (
-
-
-
-```css
+
+```css lines
.group-member-scope-tag {
display: flex;
padding: 4px 12px;
@@ -1291,55 +856,49 @@ export default GroupMembersDemo;
font: 400 12px Roboto;
}
```
-
-
-***
-
-#### HeaderView
-
-You can set the Custom headerView to add more options to the Group Members component.
+### headerView
-The customized chat interface is displayed below.
+Replace the entire header bar.
-Use the following code to achieve the customization shown above.
-
-```ts
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatGroupMembers,localize } from "@cometchat/chat-uikit-react";
+import {
+ CometChatGroupMembers,
+ CometChatButton,
+ localize,
+} from "@cometchat/chat-uikit-react";
import React from "react";
const getHeaderView = () => {
- return (
-
-
-
-```css
+
+```css lines
.cometchat-group-members__header {
display: flex;
width: 100%;
@@ -1350,19 +909,22 @@ const getHeaderView = () => {
flex: 1 0 0;
align-self: stretch;
border-radius: 10px;
- border: 1px solid #E8E8E8;
- background: #EDEAFA;
+ border: 1px solid #e8e8e8;
+ background: #edeafa;
}
+
.cometchat-group-members__header__title {
overflow: hidden;
color: #141414;
text-overflow: ellipsis;
font: 700 24px Roboto;
}
+
.cometchat-group-members__header .cometchat-button .cometchat-button__icon {
- background: #6852D6;
+ background: #6852d6;
}
-.cometchat-group-members__header .cometchat-button{
+
+.cometchat-group-members__header .cometchat-button {
width: 24px;
border: none;
background: transparent;
@@ -1370,28 +932,20 @@ const getHeaderView = () => {
display: block;
}
```
-
-
-***
-
-#### Options
-
-You can set the Custom options to the Group Members component.
+### options
-The customized chat interface is displayed below.
+Replace the context menu / hover actions on each group member item.
-Use the following code to achieve the customization shown above.
-
-```ts
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
CometChatGroupMembers,
@@ -1423,7 +977,7 @@ const GroupMembersDemo = () => {
id: "1",
title: "Kick User",
onClick: () => {
- /** Your logic for handling click of custom option. */
+ // Your logic for handling click of custom option.
},
}),
];
@@ -1437,11 +991,9 @@ const GroupMembersDemo = () => {
export default GroupMembersDemo;
```
-
-
-
-```css
+
+```css lines
.cometchat-group-members .cometchat-menu-list__main-menu-item-icon {
height: 24px;
width: 24px;
@@ -1455,9 +1007,61 @@ export default GroupMembersDemo;
box-shadow: none;
}
```
-
-
-***
+#### Structure of CometChatOption
+
+| Name | Description |
+| --- | --- |
+| `id` | Unique identifier for each option |
+| `title` | Heading text for each option |
+| `iconURL` | Asset URL of the icon for each option |
+| `onClick` | Method invoked when user clicks the option |
+
+## Theme and Styling
+
+Using CSS, customize the look and feel of the component. The root CSS class is `.cometchat-group-members`.
+
+
+
+
+
+```tsx lines
+
-The Groups component is composed of the following BaseComponents:
+
-| Components | Description |
-| ----------------- | ------------------------------------------------------------------------------------------------------------------------- |
-| CometChatList | A reusable container component having title, search box, customisable background and a list view. |
-| CometChatListItem | A component that renders data obtained from a Group object on a Tile having a title, subtitle, leading and trailing view. |
+| Field | Value |
+| --- | --- |
+| Purpose | Searchable, scrollable list of all available groups with icon, name, member count, and group type indicator |
+| Package | `@cometchat/chat-uikit-react` |
+| Import | `import { CometChatGroups } from "@cometchat/chat-uikit-react";` |
+| Used in experiences | Group directory, group discovery, tab-based chat, group management |
+| Copy-paste base | See [Base Code](#base-code--stylesheet) below |
+| Primary output | `CometChat.Group` object (from `onItemClick`) |
+| Primary hook points | `onItemClick`, `onSelect`, `onError`, `groupsRequestBuilder`, view slots (`itemView`, `subtitleView`, `trailingView`, `leadingView`, `headerView`, `titleView`) |
+| CSS root class | `.cometchat-groups` |
+| Real-time events | `CometChatGroupEvents.ccGroupCreated`, `CometChatGroupEvents.ccGroupDeleted`, `CometChatGroupEvents.ccGroupMemberJoined`, `CometChatGroupEvents.ccGroupMemberAdded`, `CometChatGroupEvents.ccGroupLeft`, `CometChatGroupEvents.ccGroupMemberKicked`, `CometChatGroupEvents.ccGroupMemberBanned`, `CometChatGroupEvents.ccOwnershipChanged` |
-***
+
-## Usage
+## Base Code and Stylesheet
-### Integration
-
-The following code snippet illustrates how you can directly incorporate the Groups component into your Application.
+Renders a searchable, scrollable list of all available groups.
-```tsx
+```tsx lines
import { CometChatGroups } from "@cometchat/chat-uikit-react";
-import React from "react";
-const GroupsDemo = () => {
- return
-
-```tsx
-import { GroupsDemo } from "./GroupsDemo";
+```tsx lines
+import GroupsDemo from "./GroupsDemo";
export default function App() {
return (
@@ -52,545 +55,324 @@ export default function App() {
);
}
```
-
-
-***
-
-### Actions
-
-[Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.
+Root CSS class for style overrides:
-##### 1. 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.
-
-This action does not come with any predefined behavior. However, you have the flexibility to override this event and tailor it to suit your needs using the following code snippet.
-
-
-
-```ts
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatGroups, SelectionMode } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const GroupsDemo = () => {
- function handleOnSelect(group: CometChat.Group, selected: boolean): void {
- console.log(group);
- //your custom onSelect actions
- }
- return (
-
+## Functionality
-
-```js
-import { CometChatGroups, SelectionMode } from "@cometchat/chat-uikit-react";
-import React from "react";
+Props that control component behavior, grouped by surface area.
-const GroupsDemo = () => {
- function handleOnSelect(group, selected) {
- console.log(group);
- //your custom onSelect actions
- }
- return (
-
+### Selection Behavior
-
+| Property | Type | Default | Effect | Pitfall |
+| --- | --- | --- | --- | --- |
+| `selectionMode` | `SelectionMode` | `SelectionMode.none` | Enables single or multi-select checkboxes on list items | Must pair with `onSelect` to capture selections |
-##### 2. onItemClick
+### UI Visibility Toggles
-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.
+| Property | Type | Default | Effect | Pitfall |
+| --- | --- | --- | --- | --- |
+| `hideSearch` | `boolean` | `false` | Hides the default search bar | — |
+| `hideError` | `boolean` | `false` | Hides the default and custom error views | Also suppresses `errorView` if set |
+| `hideGroupType` | `boolean` | `false` | Hides the group type icon (public/private/password) | — |
+| `showScrollbar` | `boolean` | `false` | Shows the scrollbar in the group list | — |
-
-
-```ts
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatGroups } from "@cometchat/chat-uikit-react";
-import React from "react";
+### Custom Views (Render Props)
-const GroupsDemo = () => {
- function handleOnItemClick(group: CometChat.Group): void {
- console.log(group, "your custom on item click action");
- }
- return
+## Actions
-
-```js
-import { CometChatGroups } from "@cometchat/chat-uikit-react";
-import React from "react";
+[Actions](/ui-kit/react/components-overview#actions) split into predefined (built-in triggers) and user-defined (callbacks).
-const GroupsDemo = () => {
- function handleOnItemClick(group) {
- console.log(group, "your custom on item click action");
- }
- return
+### User-Defined Actions
-
+#### onItemClick
-##### 3. onError
+Fires when a user taps a group row. Primary navigation hook.
-This action doesn't change the behavior of the component but rather listens for any errors that occur in the Groups component.
+| Detail | Value |
+| --- | --- |
+| When it fires | User clicks/taps a group list item |
+| Payload type | `(group: CometChat.Group) => void` |
+| What devs typically do next | Set active group in state, navigate to group chat view |
-
-
-```ts
+```tsx lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroups } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const GroupsDemo = () => {
- const handleOnError = (error: CometChat.CometChatException) => {
- console.log("Your custom on error actions");
- };
- return
-
-
-```js
-import { CometChatGroups } from "@cometchat/chat-uikit-react";
-import React from "react";
-const GroupsDemo = () => {
- const handleOnError = (error) => {
- console.log("Your custom on error actions");
- };
- return
-
-
-
-### Filters
-
-**Filters** allow you to customize the data displayed in a list within a Component. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK.
-
-##### 1. GroupsRequestBuilder
-
-The [GroupsRequestBuilder](/sdk/javascript/retrieve-groups) enables you to filter and customize the group list based on available parameters in [GroupsRequestBuilder](/sdk/javascript/retrieve-groups). This feature allows you to create more specific and targeted queries when fetching groups. The following are the parameters available in [GroupsRequestBuilder](/sdk/javascript/retrieve-groups)
+#### onSelect
-| Methods | Type | Description |
-| -------------------- | -------------- | --------------------------------------------------------------------------------------- |
-| **setLimit** | number | sets the number groups that can be fetched in a single request, suitable for pagination |
-| **setSearchKeyword** | String | used for fetching groups matching the passed string |
-| **joinedOnly** | boolean | to fetch only joined groups. |
-| **setTags** | Array\ | used for fetching groups containing the passed tags |
-| **withTags** | boolean | used to fetch tags data along with the list of groups |
+Fires when a group is selected or deselected in multi-select mode. Requires `selectionMode` to be set.
-**Example**
+| Detail | Value |
+| --- | --- |
+| When it fires | User checks/unchecks a group in selection mode |
+| Payload type | `(group: CometChat.Group, selected: boolean) => void` |
+| What devs typically do next | Track selected groups for batch operations (join, delete) |
-In the example below, we are applying a filter to the Group List based on only joined groups and setting the limit to two.
-
-
-
-```ts
+```tsx lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatGroups } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const GroupsDemo = () => {
- return (
-
-
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatGroups } from "@cometchat/chat-uikit-react";
-import React from "react";
+import { CometChatGroups, SelectionMode } from "@cometchat/chat-uikit-react";
-const GroupsDemo = () => {
- return (
-
-
-
-
-##### 2. SearchRequestBuilder
+#### onError
-The SearchRequestBuilder uses [GroupsRequestBuilder](/sdk/javascript/retrieve-groups) enables you to filter and customize the search list based on available parameters in GroupsRequestBuilder. This feature allows you to keep uniformity between the displayed Groups List and searched Group List.
+Fires when the component encounters an error (network failure, auth issue, etc.).
-**Example**
+| Detail | Value |
+| --- | --- |
+| When it fires | Any internal error during data fetching or rendering |
+| Payload type | `(error: CometChat.CometChatException) => void` |
+| What devs typically do next | Log to error tracking service, show custom toast |
-
-
-```ts
-import { CometChat } from "@cometchat/chat-sdk-javascript";
+```tsx lines
import { CometChatGroups } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const GroupsDemo = () => {
- return (
-
-
-
-```js
import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatGroups } from "@cometchat/chat-uikit-react";
-import React from "react";
-const GroupsDemo = () => {
- return (
-
-
-
-
-***
-
-### Events
-
-[Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.
-
-To handle events supported by Groups you have to add corresponding listeners by using `CometChatGroupEvents`
-
-The `Groups` component does not produce any events directly.
-
-***
-
-## Customization
+## Filters
-To fit your app's design requirements, you can customize the appearance of the Groups component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.
+Control which groups appear using `GroupsRequestBuilder`. Pass the builder (not a built request) to the `groupsRequestBuilder` prop.
-### Style
+Refer to [GroupsRequestBuilder](/sdk/javascript/retrieve-groups) for the full API.
-Using CSS you can customize the look and feel of the component in your app like the color, size, shape, and fonts.
+### Filter Recipes
-**Example**
+| Recipe | Code |
+| --- | --- |
+| Joined groups only | `new CometChat.GroupsRequestBuilder().joinedOnly(true)` |
+| Limit to 10 per page | `new CometChat.GroupsRequestBuilder().setLimit(10)` |
+| Search by keyword | `new CometChat.GroupsRequestBuilder().setSearchKeyword("design")` |
+| Filter by tags | `new CometChat.GroupsRequestBuilder().setTags(["vip"])` |
+| With tags data | `new CometChat.GroupsRequestBuilder().withTags(true)` |
-
- 
-
+### Example
-
-
-```ts
+```tsx lines
import { CometChatGroups } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const GroupsDemo = () => {
- return
+### Search Request Builder
-
-```js
-import { CometChatGroups } from "@cometchat/chat-uikit-react";
-import React from "react";
+The `searchRequestBuilder` uses `GroupsRequestBuilder` to filter the search list independently, keeping uniformity between the displayed group list and searched results.
-const GroupsDemo = () => {
- return
+### Performance Note
-
-```css
-.cometchat .cometchat-groups .cometchat-list__header-title {
- background-color: #edeafa;
- color: #6852d6;
- border-width: 0px 1px 1px 0px;
- border-style: solid;
- border-color: #6852d6;
- overflow: hidden;
- text-overflow: ellipsis;
- font-family: "Times New Roman";
- font-size: 24px;
- font-style: normal;
- font-weight: 700;
- line-height: 28.8px;
-}
+The default page size is 30. Reducing it with `setLimit` can improve initial load time on slower connections. The component uses infinite scroll — the next page loads automatically as the user scrolls to the bottom.
-.cometchat .cometchat-groups .cometchat-search-bar__input::placeholder {
- font-family: "Times New Roman";
- font-size: 16px;
- font-style: normal;
- font-weight: 400;
- line-height: 19.2px;
-}
+## Events
-.cometchat .cometchat-groups .cometchat-list-item {
- background: #fff;
- border-right: 1px solid #f5f5f5;
-}
+### UI Events
-.cometchat .cometchat-groups__list-item .cometchat-avatar {
- background-color: #aa9ee8;
- border-radius: 6.67px;
-}
-
-.cometchat .cometchat-groups .cometchat-list-item__body-title {
- overflow: hidden;
- color: #141414;
- text-overflow: ellipsis;
- font-family: "Times New Roman";
- font-size: 16px;
- font-style: normal;
- font-weight: 400;
- line-height: 19.2px;
-}
+The CometChatGroups component does not emit any custom UI events directly.
-.cometchat .cometchat-groups .cometchat-groups__subtitle {
- overflow: hidden;
- color: #727272;
- text-overflow: ellipsis;
- white-space: nowrap;
- font-family: "Times New Roman";
- font-size: 14px;
- font-style: normal;
- font-weight: 400;
- line-height: 16.8px;
-}
-```
+The component internally subscribes to group lifecycle events via `CometChatGroupEvents`:
-
+| Event | When it fires | What it does inside the component |
+| --- | --- | --- |
+| `CometChatGroupEvents.ccGroupCreated` | A new group is created | Prepends the group to the list |
+| `CometChatGroupEvents.ccGroupDeleted` | A group is deleted | Removes the group from the list |
+| `CometChatGroupEvents.ccGroupMemberJoined` | A user joins a group | Updates the group in the list |
+| `CometChatGroupEvents.ccGroupMemberKicked` | A member is kicked from a group | Updates the group in the list |
+| `CometChatGroupEvents.ccGroupLeft` | A user leaves a group | Removes (private) or updates (public/password) the group |
+| `CometChatGroupEvents.ccGroupMemberBanned` | A member is banned from a group | Updates the group in the list |
+| `CometChatGroupEvents.ccGroupMemberAdded` | Members are added to a group | Updates the group in the list |
+| `CometChatGroupEvents.ccOwnershipChanged` | Group ownership is transferred | Updates the group in the list |
-
+These events are subscribable from anywhere in the application.
-***
+#### Subscribe
-### Functionality
+```tsx lines
+import { CometChatGroupEvents } from "@cometchat/chat-uikit-react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
-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.
+const createdSub = CometChatGroupEvents.ccGroupCreated.subscribe(
+ (group: CometChat.Group) => {
+ console.log("Group created:", group.getName());
+ }
+);
-
-
-```ts
-import { CometChatGroups, TitleAlignment } from "@cometchat/chat-uikit-react";
-import React from "react";
+const deletedSub = CometChatGroupEvents.ccGroupDeleted.subscribe(
+ (group: CometChat.Group) => {
+ console.log("Group deleted:", group.getName());
+ }
+);
-const GroupsDemo = () => {
- return (
-
-
-
-```js
-import { CometChatGroups, TitleAlignment } from "@cometchat/chat-uikit-react";
-import React from "react";
+#### Unsubscribe
-const GroupsDemo = () => {
- return (
-
+### SDK Events (Real-Time)
-
+The component automatically listens to SDK group events internally for real-time updates. No manual attachment needed unless additional side effects are required.
+
+| SDK Listener | What it does inside the component |
+| --- | --- |
+| `onGroupMemberJoined` | Updates member count, sets `hasJoined` if current user joined |
+| `onGroupMemberLeft` | Updates member count, sets `hasJoined(false)` if current user left |
+| `onMemberAddedToGroup` | Updates member count, adds group to list if current user was added |
+| `onGroupMemberKicked` | Updates member count, sets `hasJoined(false)` if current user was kicked |
+| `onGroupMemberBanned` | Removes group if current user was banned, otherwise updates member count |
+| `onGroupMemberScopeChanged` | Updates scope if current user's scope changed, updates member count |
-Below is a list of customizations along with corresponding code snippets:
+#### React StrictMode Note
-| Property | Description | Code |
-| ------------------- | ------------------------------------------------------------------- | ---------------------------------------- |
-| **Hide Search** | Hides the default search bar. | `hideSearch={true}` |
-| **Hide Error** | Hides the default and custom error view passed in `errorView` prop. | `hideError={true}` |
-| **Hide Group Type** | Hides the group type icon. | `hideGroupType={true}` |
-| **Active Group** | The group to highlight in the list. | `activeGroup={chatGroup}` |
-| **Selection Mode** | Selection mode to use for the default trailing view. | `selectionMode={SelectionMode.multiple}` |
-| **Show Scrollbar** | Controls the visibility of the scrollbar in the list. | `showScrollbar={true}` |
-| **Loading View** | A custom view to display during the loading state. | `loadingView={<>Custom Loading View}` |
-| **Empty View** | Custom view for the empty state of the component. | `emptyView={<>Custom Empty View}` |
-| **Error View** | A custom view to display when an error occurs. | `errorView={<>Custom Error View}` |
+In React 18 StrictMode, `useEffect` runs twice on mount in development. SDK listeners may be registered twice. The component handles cleanup internally, but any additional listeners added alongside the component need cleanup in the `useEffect` return function to avoid duplicate event handling.
-***
+## Advanced: Custom View Slots
-### Advanced
+Customization override points for the group list UI. Each slot receives the group object and returns JSX.
-For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component.
+### Slot Catalog
-***
+| Slot | Params | What it replaces | Section |
+| --- | --- | --- | --- |
+| `itemView` | `(group: CometChat.Group) => JSX.Element` | Entire list item row | Whole item |
+| `leadingView` | `(group: CometChat.Group) => JSX.Element` | Avatar / left section | Sub-section (leading) |
+| `trailingView` | `(group: CometChat.Group) => JSX.Element` | Right section | Sub-section (trailing) |
+| `titleView` | `(group: CometChat.Group) => JSX.Element` | Name / title text | Sub-section (title) |
+| `subtitleView` | `(group: CometChat.Group) => JSX.Element` | Subtitle text (member count) | Sub-section (subtitle) |
+| `headerView` | `JSX.Element` | Entire header bar | Whole section |
+| `loadingView` | `JSX.Element` | Loading spinner | Empty/loading/error |
+| `emptyView` | `JSX.Element` | Empty state | Empty/loading/error |
+| `errorView` | `JSX.Element` | Error state | Empty/loading/error |
+| `options` | `(group: CometChat.Group) => CometChatOption[]` | Context menu / hover actions | Whole item |
-#### ItemView
+### itemView
-A custom view to render for each group in the fetched list.
+Replace the entire list item row.
-Shown below is the default chat interface.
+Default:
-The customized chat interface is displayed below.
+Customized:
-Use the following code to achieve the customization shown above.
-
-```ts
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroups } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const GroupsDemo = () => {
- const getItemView = (group: CometChat.Group) => {
- return (
-
-
-
-```js
-import { CometChatGroups } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const GroupsDemo = () => {
- const getItemView = (group: CometChat.Group) => {
- return (
-
setHoverTab(tabItem.name.toLowerCase())}
+ onMouseLeave={() => setHoverTab("")}
+ />
- );
- }
- ```
-
-
- onTabClicked({ name: t.name })}
- onMouseEnter={() => setHover(key)}
- onMouseLeave={() => setHover("")}
+ className={
+ isActive
+ ? "cometchat-tab-component__tab-text cometchat-tab-component__tab-text-active"
+ : "cometchat-tab-component__tab-text"
+ }
+ onMouseEnter={() => setHoverTab(tabItem.name.toLowerCase())}
+ onMouseLeave={() => setHoverTab("")}
>
- {/* if icons not present, this still renders a label-only tab */}
- {t.icon ? (
-
- ) : null}
-
- );
- })}
-
- {t.name}
-
+ {tabItem.name}
Loading…
;
- if (phase === "error") return CometChat error: {errorMsg}
;
-
- return (
-
- {/* LEFT: Sidebar */}
-
+
+```css title="CometChatTabs.css" lines
+.cometchat-tab-component {
+ display: flex;
+ width: 100%;
+ padding: 0px 8px;
+ align-items: flex-start;
+ gap: 8px;
+ border-top: 1px solid var(--cometchat-border-color-light, #F5F5F5);
+ border-right: 1px solid var(--cometchat-border-color-light, #F5F5F5);
+ background: var(--cometchat-background-color-01, #FFF);
+}
+
+.cometchat-tab-component__tab {
+ display: flex;
+ padding: 12px 0px 10px 0px;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 4px;
+ flex: 1 0 0;
+ min-height: 48px;
+}
+
+.cometchat-tab-component__tab-icon {
+ display: flex;
+ width: 32px;
+ height: 32px;
+ justify-content: center;
+ align-items: center;
+ background: var(--cometchat-icon-color-secondary);
+ -webkit-mask-size: contain;
+ -webkit-mask-position: center;
+ -webkit-mask-repeat: no-repeat;
+ mask-size: contain;
+ mask-position: center;
+ mask-repeat: no-repeat;
+ cursor: pointer;
+}
+
+.cometchat-tab-component__tab-text {
+ color: var(--cometchat-text-color-secondary, #727272);
+ text-align: center;
+ font: var(--cometchat-font-caption1-medium, 500 12px Roboto);
+ cursor: pointer;
+}
+
+.cometchat-tab-component__tab-icon-active {
+ background: var(--cometchat-icon-color-highlight);
+}
+
+.cometchat-tab-component__tab-text-active {
+ color: var(--cometchat-text-color-highlight);
+}
+```
+
+
+
- {/* Tabs bar at bottom */}
- setActiveTab(t.name.toLowerCase())}
- />
-
- {/* RIGHT: Messages panel (appears for chats/users/groups) */}
-
-
+ );
+};
+```
+
+
+
- {activeTab === "chats" && (
- {
- // If you integrate Calls SDK later, you can open call details here
- console.log("Call log clicked:", call);
- }}
- />
- )}
-
- {activeTab === "users" && (
- handleSelect(user)}
- />
- )}
-
- {activeTab === "groups" && (
- handleSelect(group)}
- />
- )}
+ );
+ })}
+
- {activeTab === "calls" ? (
-
+
+
+
+
+
+
+
+
+
+
+
+```tsx title="CometChatSelector.tsx" lines
+import { useEffect, useState } from "react";
+import { Call, Conversation, Group, User, CometChat } from "@cometchat/chat-sdk-javascript";
+import { CometChatCallLogs, CometChatConversations, CometChatGroups, CometChatUIKitLoginListener, CometChatUsers } from "@cometchat/chat-uikit-react";
+import { CometChatTabs } from "../CometChatTabs/CometChatTabs";
+
+interface SelectorProps {
+ onSelectorItemClicked?: (input: User | Group | Conversation | Call, type: string) => void;
+}
+
+export const CometChatSelector = (props: SelectorProps) => {
+ const { onSelectorItemClicked = () => {} } = props;
+ const [loggedInUser, setLoggedInUser] = useState();
+ const [activeItem, setActiveItem] = useState();
+ const [activeTab, setActiveTab] = useState("chats");
+
+ useEffect(() => {
+ const user = CometChatUIKitLoginListener.getLoggedInUser();
+ setLoggedInUser(user);
+ }, []);
+
+ return (
+ <>
+ {loggedInUser && (
+ <>
+ {activeTab === "chats" && (
+ { setActiveItem(item); onSelectorItemClicked(item, "updateSelectedItem"); }}
+ />
)}
-
+ {activeTab === "calls" && (
+ Select a call log
- ) : selectedUser || selectedGroup ? (
- <>
-
-
- Select a conversation to start
+---
+
+## Step 2 — Create the Sidebar Component
+
+The sidebar renders the list for whichever tab is active, plus the tab bar at the bottom.
+
+Initializing Chat...
;
+
+ return (
+
+
- Import the island and styles, then hydrate on the client.
-
- ```astro src/pages/index.astro
- ---
- import TabbedChat from "../components/TabbedChat.jsx";
- import "../styles/tabs-layout.css"; // the CSS from this setup
- // (optional) also import your existing globals.css if you have one
- import "../styles/globals.css";
- ---
-
-
-
-
- Tabbed Messaging UI
-
-
-
-
-
-
-
- ```bash
- npm run dev
- ```
-
-
- Log in using `PUBLIC_COMETCHAT_LOGIN_UID`, switch tabs, and open a conversation to send messages.
-
-
-
-
-***
-
-## Troubleshooting
-
-
-
-Ensure `CometChatTabs` is wired via `onTabClicked` and that the active tab state drives which list is rendered.
-
-
-Verify `.env` contains `PUBLIC_COMETCHAT_APP_ID`, `PUBLIC_COMETCHAT_REGION`, `PUBLIC_COMETCHAT_AUTH_KEY`, and `PUBLIC_COMETCHAT_LOGIN_UID`.
-
+ {selectedUser || selectedGroup ? (
+
+ );
+}
+```
+
+
+ {
+ let item: any = activeItem;
+ if (activeItem instanceof CometChat.Conversation) {
+ item = activeItem.getConversationWith();
+ }
+ if (item instanceof CometChat.User) {
+ setSelectedUser(item);
+ setSelectedGroup(undefined);
+ } else if (item instanceof CometChat.Group) {
+ setSelectedUser(undefined);
+ setSelectedGroup(item);
+ } else {
+ setSelectedUser(undefined);
+ setSelectedGroup(undefined);
+ }
+ }}
+ />
- );
- }
- ```
-
-
-
+
+ ) : (
+ Select a conversation to start chatting
+ )}
+
-## Usage
+
-
- );
+Root CSS class for style overrides:
+
+```css lines
+.cometchat-call-button {
+ /* overrides here */
}
```
-
-
-
-**Example**
-
-
+
+
+---
+
+## Next Steps
+
+
-The `Call Logs` is comprised of the following components:
+
-
- );
+```css lines
+.cometchat-call-logs {
+ /* overrides here */
}
```
-
-
-
-
+Replace the entire call log list item.
+
+ );
};
-export default CallLogDemo;
+
+ {callLog?.getInitiator()?.getName()}
+
+
+ {callLog?.getStatus()}
+
+
+ {callLog?.getStatus()} • {callLog?.getType()}
+
+ );
};
-export default CallLogDemo;
+
-
-
-The customized chat interface is displayed below.
-
-
-
-
-
-Use the following code to achieve the customization shown above.
+Replace the right section (call-back button area).
-
- );
- };
-
- return
-
- )
- }
- return
+
+
+ );
};
-export default CallLogDemo;
+
-
-
-The customized chat interface is displayed below.
-
-
-
-
+### leadingView
-Use the following code to achieve the customization shown above.
+Replace the avatar / left section.
-
-
-
- );
- };
-
- return
- {" "}
- {callStatus}
-
-
-
-
-
- )
- }
-
- return
- {callStatus}
-
-
+ ?.getAvatar()})
+
+ );
};
-export default CallLogDemo;
+
-
-
-The customized chat interface is displayed below.
-
-
-
-
-
-Use the following code to achieve the customization shown above.
+Replace the name / title text.
- {formatDate(call?.getInitiatedAt())}
-
- );
- };
-
- return
- {formatDate(call?.getInitiatedAt())}
-
- );
- };
- return
+ {callLog?.getInitiator()?.getName()} — {callLog?.getType()}
+
+ );
};
-export default CallLogDemo;
+
-
-
-The customized chat interface is displayed below.
-
-
-
-
-
-Use the following code to achieve the customization shown above.
-
-
- {call.status === "unanswered" || call.status === "cancelled" ? (
-
- ) : call.initiator?.uid === loggedInUser?.getUid() ? (
-
- ) : (
-
- )}
-
- );
- };
- return
- {call.status === "unanswered" || call.status === "cancelled" ? (
-
- ) : call.initiator?.uid === loggedInUser?.getUid() ? (
-
- ) : (
-
- )}
-
- );
- };
+## Theme and Styling
- return
-
-
-The customized chat interface is displayed below.
-
-
-
-
-
-Use the following code to achieve the customization shown above.
-
-
- {call.initiator?.name}
- {call.status !== "unanswered" && call.status !== "cancelled" && (
- <>{" • 🕚️ " + Math.ceil(call.totalDurationInMinutes) + " mins"}
- )}
-
- );
- };
-
- return
- {call.initiator?.name}
- {call.status !== "unanswered" && call.status !== "cancelled" && (
- <>{" • 🕚️ " + Math.ceil(call.totalDurationInMinutes) + " mins"}
- )}
-
- );
- };
-
- return
+
-The Conversations is a Component, that shows all conversations related to the currently logged-in user.
+
-
+
-
+const updatedSub = CometChatConversationEvents.ccUpdateConversation.subscribe(
+ (conversation: CometChat.Conversation) => {
+ console.log("Conversation updated:", conversation.getConversationId());
+ }
+);
-
-
-```
+#### Automatic updates vs. manual refresh
-
-
-
-The customized chat interface is displayed below.
+Customized:
-Use the following code to achieve the customization shown above.
-
-Use the following code to achieve the customization shown above.
-
-
-Use the following code to achieve the customization shown above.
-
+
+
+ {user
+ ? conversation.getConversationWith().getName() + " • "
+ : conversation.getConversationWith().getName()}
+
+ {user ? (
+
+ {user.getStatusMessage()}
+
+ ) : null}
+
+ );
+};
- constructor() {
- super();
- this.setTrackingCharacter("!");
- CometChat.callExtension("message-shortcuts", "GET", "v1/fetch", undefined)
- .then((data: any) => {
- if (data && data.shortcuts) {
- this.shortcuts = data.shortcuts;
- }
- })
- .catch((error) => console.log("error fetching shortcuts", error));
- }
+
+
- return (
-
-
-
- );
-};
+Customized:
-export default class DialogHelper {
- private dialogContainer: HTMLDivElement | null = null;
+
+
+
- createDialog(onClick: () => void, buttonText: string) {
- this.dialogContainer = document.createElement("div");
- document.body.appendChild(this.dialogContainer);
+
-Use the following code to achieve the customization shown above.
-
+
-```ruby
-new CalendarObject({
- today: `hh:mm A`, // Example: "10:30 AM"
- yesterday: `[yesterday]`, // Example: "yesterday"
- otherDays: `DD/MM/YYYY`, // Example: "25/05/2025"
-});
-```
+Customized:
-The following example demonstrates how to modify the **Last Message** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject).
+
+
+
-
+### TextFormatters
-Use the following code to achieve the customization shown above.
+Assigns custom text formatters to the conversation subtitle. If not provided, default formatters from the data source are used. To configure Mentions, see [CometChatMentionsFormatter](/ui-kit/react/mentions-formatter-guide).
-
- {user
- ? conversation.getConversationWith().getName() + " • "
- : conversation.getConversationWith().getName()}
-
- {user ? (
-
- {user.getStatusMessage()}
-
- ) : null}
-
- );
-};
+class ShortcutFormatter extends CometChatTextFormatter {
+ private shortcuts: { [key: string]: string } = {};
+ private dialogIsOpen: boolean = false;
+ private dialogHelper = new DialogHelper();
+ private currentShortcut: string | null = null; // Track the currently open shortcut
-
-
+interface DialogProps {
+ onClick: () => void;
+ buttonText: string;
+}
-The customized chat interface is displayed below.
+const Dialog: React.FC
-
+ return (
+
+
+
+ );
+};
-Use the following code to achieve the customization shown above.
+export default class DialogHelper {
+ private dialogContainer: HTMLDivElement | null = null;
-
-
-
-The customized chat interface is displayed below.
-
-
-
-
+```ts lines
+new CalendarObject({
+ today: `hh:mm A`, // Example: "10:30 AM"
+ yesterday: `[yesterday]`, // Example: "yesterday"
+ otherDays: `DD/MM/YYYY`, // Example: "25/05/2025"
+});
+```
-Use the following code to achieve the customization shown above.
+Custom format example:
-
+
+
+```css lines
+.cometchat-conversations .cometchat-list-item__body-title,
+.cometchat-conversations .cometchat-list__header-title,
+.cometchat-conversations .cometchat-avatar__text,
+.cometchat-conversations .cometchat-badge,
+.cometchat-conversations .cometchat-conversations__subtitle-text {
+ font-family: "SF Pro";
}
-.cometchat-conversations .cometchat-menu-list__sub-menu-icon {
- -webkit-mask: url(./assets/down-arrow.svg) center center no-repeat;
- -webkit-mask-size: contain;
+.cometchat-conversations .cometchat-list__header-title {
+ background: #fef8f8;
+ border-bottom: 2px solid #f4b6b8;
}
-```
-...
}` |
+| Change colors, fonts, spacing | Global CSS | Target `.cometchat-conversations` class | `.cometchat-conversations .cometchat-badge { background: #e5484d; }` |
+
+### Component API Pattern
+
+| Customization Type | Prop Pattern | Example |
+| --- | --- | --- |
+| Callback actions | `on...
}` |
+| CSS overrides | Target `.cometchat-conversations` class in global CSS | `.cometchat-conversations .cometchat-list-item { ... }` |
diff --git a/ui-kit/react/core-features.mdx b/ui-kit/react/core-features.mdx
index 78a6de7de..eb8edf329 100644
--- a/ui-kit/react/core-features.mdx
+++ b/ui-kit/react/core-features.mdx
@@ -1,13 +1,29 @@
---
title: "Core"
+description: "Overview of CometChat's core chat features including instant messaging, media sharing, read receipts, typing indicators, user presence, reactions, mentions, threaded conversations, search, and moderation — with the UI Kit components that power each feature."
---
+
+
-| Components | Functionality |
-| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) supports replying to messages via the "Reply" option. Users can select "Reply" on a message to open the composer with the quoted reply pre-filled, maintaining context. |
-| [Message Composer](/ui-kit/react/message-composer) | [Message Composer](/ui-kit/react/message-composer) works seamlessly with Quoted Message by showing the quoted reply above the input field, letting users compose their response in proper context. |
+| Components | Functionality |
+| ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Threaded Message Preview](/ui-kit/react/threaded-message-preview) | [Threaded Message Preview](/ui-kit/react/threaded-message-preview) component displays the parent message along with the number of replies. |
-## Conversation and Advanced Search
+## Quoted Replies
-Conversation and Advanced Search is a powerful feature provided by CometChat that enables users to quickly find conversations, messages, and media across chats in real time. It supports filters, scopes, and custom actions, allowing users to locate content efficiently while keeping the chat experience smooth and intuitive.
+Quoted Replies is a robust feature provided by CometChat that enables users to quickly reply to specific messages by selecting the "Reply" option from a message's action menu. This enhances context, keeps conversations organized, and improves overall chat experience in both 1-1 and group chats.
-
+
| Components | Functionality |
| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Search](/ui-kit/react/search) | [Search](/ui-kit/react/search) allows users to search across conversations and messages in real time. Users can click on a result to open the conversation or jump directly to a specific message. |
-| [Message Header](/ui-kit/react/message-header) | [Message Header](/ui-kit/react/message-header) shows the search button in the chat header, allowing users to search within a conversation. |
-| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) shows the selected message when clicked from search results and highlights it in the message list. |
-| [Conversations](/ui-kit/react/conversations) | [Conversations](/ui-kit/react/conversations) displays the search input. |
+| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) supports replying to messages via the "Reply" option. Users can select "Reply" on a message to open the composer with the quoted reply pre-filled, maintaining context. |
+| [Message Composer](/ui-kit/react/message-composer) | [Message Composer](/ui-kit/react/message-composer) works with Quoted Message by showing the quoted reply above the input field, letting users compose their response in proper context. |
-## Threaded Conversations
+## Group Chat
-The Threaded Conversations feature enables users to respond directly to a specific message in a chat. This keeps conversations organized and enhances the user experience by maintaining context, especially in group chats.
+CometChat facilitates Group Chats, allowing users to have conversations with multiple participants simultaneously. This feature is crucial for team collaborations, group discussions, social communities, and more.
-
+
-| Components | Functionality |
-| ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Threaded Message Preview](/ui-kit/react/threaded-message-preview) | [Threaded Message Preview](/ui-kit/react/threaded-message-preview) component displays the parent message along with the number of replies. |
+For a comprehensive understanding and guide on implementing and using the Groups feature in CometChat, you should refer to our detailed guide on [Groups](/ui-kit/react/groups).
## Moderation
@@ -189,12 +200,39 @@ Learn more about how flagged messages are handled, reviewed, and moderated in th
| ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) provides the "Report Message" option in the message actions menu, allowing users to initiate the reporting process for inappropriate messages. |
-## Group Chat
+## Conversation and Advanced Search
-CometChat facilitates Group Chats, allowing users to have conversations with multiple participants simultaneously. This feature is crucial for team collaborations, group discussions, social communities, and more.
+Conversation and Advanced Search is a powerful feature provided by CometChat that enables users to quickly find conversations, messages, and media across chats in real time. It supports filters, scopes, and custom actions, allowing users to locate content efficiently while keeping the chat experience smooth and intuitive.
-
+
+| Components | Functionality |
+| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Search](/ui-kit/react/search) | [Search](/ui-kit/react/search) allows users to search across conversations and messages in real time. Users can click on a result to open the conversation or jump directly to a specific message. |
+| [Message Header](/ui-kit/react/message-header) | [Message Header](/ui-kit/react/message-header) shows the search button in the chat header, allowing users to search within a conversation. |
+| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) shows the selected message when clicked from search results and highlights it in the message list. |
+| [Conversations](/ui-kit/react/conversations) | [Conversations](/ui-kit/react/conversations) displays the search input. |
+
For a comprehensive understanding and guide on implementing and using the Groups feature in CometChat, you should refer to our detailed guide on [Groups](/ui-kit/react/groups).
+
+
+---
+
+## Next Steps
+
+
+
+
+
+#### Message Shortcuts
+
+The Message Shortcuts extension enables users to send predefined messages using short codes. For example, typing `!hb` can automatically expand to `Happy birthday!`. For a comprehensive understanding and guide on implementing and using the Message Shortcuts Extension, refer to our specific guide on the [Message Shortcuts Extension](/fundamentals/message-shortcuts).
+
+#### Pin Message
+
+The Pin Message extension allows users to pin important messages in a conversation, making them easily accessible for all participants. For a comprehensive understanding and guide on implementing and using the Pin Message Extension, refer to our specific guide on the [Pin Message Extension](/fundamentals/pin-message).
+
+#### Rich Media Preview
+
+The Rich Media Preview extension generates rich preview panels for URLs shared in messages, fetching detailed information from popular sites using iFramely. For a comprehensive understanding and guide on implementing and using the Rich Media Preview Extension, refer to our specific guide on the [Rich Media Preview Extension](/fundamentals/rich-media-preview).
+
+#### Save Message
+
+The Save Message extension allows users to bookmark messages for later reference. Saved messages are private and visible only to the user who saved them. For a comprehensive understanding and guide on implementing and using the Save Message Extension, refer to our specific guide on the [Save Message Extension](/fundamentals/save-message).
+
+#### Thumbnail Generation
+
+The Thumbnail Generation extension automatically creates a smaller preview image whenever a larger image is shared, helping to reduce the upload/download time and bandwidth usage. For a comprehensive understanding and guide on implementing and using the Thumbnail Generation Extension, refer to our specific guide on the [Thumbnail Generation Extension](/fundamentals/thumbnail-generation).
+
+Once you have successfully activated the [Thumbnail Generation Extension](/fundamentals/thumbnail-generation) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/react/message-list) component of UI Kits.
+
+
+
-### Polls
+#### TinyURL
+
+The TinyURL extension provides URL shortening capabilities for messages, similar to Bitly but using the TinyURL service. For a comprehensive understanding and guide on implementing and using the TinyURL Extension, refer to our specific guide on the [TinyURL Extension](/fundamentals/tinyurl).
+
+#### Voice Transcription
+
+The Voice Transcription extension converts audio messages into text, making it easier to read voice messages without playing them. For a comprehensive understanding and guide on implementing and using the Voice Transcription Extension, refer to our specific guide on the [Voice Transcription Extension](/fundamentals/voice-transcription).
+
+### User Engagement
+
+#### Giphy
+
+The Giphy extension allows users to search for and share GIFs in their conversations, adding a fun and expressive element to chats. For a comprehensive understanding and guide on implementing and using the Giphy Extension, refer to our specific guide on the [Giphy Extension](/fundamentals/giphy).
+
+#### Message Translation
+
+The Message Translation extension in CometChat is designed to translate any message into your local locale. It eliminates language barriers, making the chat more inclusive. For a comprehensive understanding and guide on implementing and using the Message Translation Extension, refer to our specific guide on the [Message Translation Extension](/fundamentals/message-translation).
+
+Once you have successfully activated the [Message Translation Extension](/fundamentals/message-translation) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of [MessageList Component](/ui-kit/react/message-list) component of UI Kits.
+
+
+
+
+
+#### Polls
The Polls extension enhances group discussions by allowing users to create polls. Users can ask questions with a predefined list of answers, enabling a quick, organized way to gather group opinions. For a comprehensive understanding and guide on implementing and using the Polls Extension, refer to our specific guide on the [Polls Extension](/fundamentals/polls).
@@ -36,17 +106,31 @@ Once you have successfully activated the [Polls Extension](/fundamentals/polls)
-### Collaborative Whiteboard
+#### Reminders
-The Collaborative Whiteboard extension facilitates real-time collaboration. Users can draw, brainstorm, and share ideas on a shared digital whiteboard. For a comprehensive understanding and guide on implementing and using the Collaborative Whiteboard Extension, refer to our specific guide on the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard).
+The Reminders extension allows users to set reminders for messages or create personal reminders. When a reminder is due, a bot sends a notification message to the user. For a comprehensive understanding and guide on implementing and using the Reminders Extension, refer to our specific guide on the [Reminders Extension](/fundamentals/reminders).
-Once you have successfully activated the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/react/message-composer) component of UI Kits.
+#### Stickers
+
+The Stickers extension allows users to express their emotions more creatively. It adds a much-needed fun element to the chat by allowing users to send various pre-designed stickers. For a comprehensive understanding and guide on implementing and using the Sticker Extension, refer to our specific guide on the [Sticker Extension](/fundamentals/stickers).
+
+Once you have successfully activated the [Sticker Extension](/fundamentals/stickers) from your CometChat Dashboard, the feature will automatically be incorporated into the [Message Composer](/ui-kit/react/message-composer) component of UI Kits.
-
+
-### Collaborative Document
+#### Stipop
+
+The Stipop extension integrates the world's trendiest sticker platform into your chat, allowing users to search for and send stickers from Stipop's extensive library. For a comprehensive understanding and guide on implementing and using the Stipop Extension, refer to our specific guide on the [Stipop Extension](/fundamentals/stickers-stipop).
+
+#### Tenor
+
+The Tenor extension allows users to search for and share GIFs from Tenor's library in their conversations. For a comprehensive understanding and guide on implementing and using the Tenor Extension, refer to our specific guide on the [Tenor Extension](/fundamentals/tenor).
+
+### Collaboration
+
+#### Collaborative Document
With the Collaborative Document extension, users can work together on a shared document. This feature is essential for remote teams where document collaboration is a recurring requirement. For a comprehensive understanding and guide on implementing and using the Collaborative Document Extension, refer to our specific guide on the [Collaborative Document Extension](/fundamentals/collaborative-document).
@@ -56,32 +140,64 @@ Once you have successfully activated the [Collaborative Document Extension](/fun
-### Message Translation
+#### Collaborative Whiteboard
-The Message Translation extension in CometChat is designed to translate any message into your local locale. It eliminates language barriers, making the chat more inclusive. For a comprehensive understanding and guide on implementing and using the Message Translation Extension, refer to our specific guide on the [Message Translation Extension](/fundamentals/message-translation).
+The Collaborative Whiteboard extension facilitates real-time collaboration. Users can draw, brainstorm, and share ideas on a shared digital whiteboard. For a comprehensive understanding and guide on implementing and using the Collaborative Whiteboard Extension, refer to our specific guide on the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard).
-Once you have successfully activated the [Message Translation Extension](/fundamentals/message-translation) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of [MessageList Component](/ui-kit/react/message-list) component of UI Kits.
+Once you have successfully activated the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/react/message-composer) component of UI Kits.
-
+
-### Link Preview
+### Security
-The Link Preview extension provides a summary of the URL shared in the chat. It includes the title, a description, and a thumbnail image from the web page. For a comprehensive understanding and guide on implementing and using the Link Preview Extension, refer to our specific guide on the [Link Preview Extension](/fundamentals/link-preview).
+#### Disappearing Messages
-Once you have successfully activated the [Link Preview Extension](/fundamentals/link-preview) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/react/message-list) component of UI Kits.
+The Disappearing Messages extension allows users to send messages that automatically disappear after a specified time interval. This works for both one-on-one and group messages. For a comprehensive understanding and guide on implementing and using the Disappearing Messages Extension, refer to our specific guide on the [Disappearing Messages Extension](/fundamentals/disappearing-messages).
-
-
-
+### Customer Support
-### Thumbnail Generation
+#### Chatwoot
-The Thumbnail Generation extension automatically creates a smaller preview image whenever a larger image is shared, helping to reduce the upload/download time and bandwidth usage. For a comprehensive understanding and guide on implementing and using the Thumbnail Generation Extension, refer to our specific guide on the [Thumbnail Generation Extension](/fundamentals/thumbnail-generation).
+The Chatwoot extension integrates customer support by allowing your users to communicate with your support team directly through CometChat, eliminating the need for a separate support interface. For a comprehensive understanding and guide on implementing and using the Chatwoot Extension, refer to our specific guide on the [Chatwoot Extension](/fundamentals/chatwoot).
-Once you have successfully activated the [Thumbnail Generation Extension](/fundamentals/thumbnail-generation) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/react/message-list) component of UI Kits.
+#### Intercom
-
-
-
+The Intercom extension integrates Intercom's customer support platform with CometChat, enabling users to chat with your support team using the same chat interface they use for regular conversations. For a comprehensive understanding and guide on implementing and using the Intercom Extension, refer to our specific guide on the [Intercom Extension](/fundamentals/intercom).
+
+### Smart Chat Features
+
+#### Conversation Starter
+
+Conversation Starter suggests AI-generated opening messages to help users begin a new chat. For a comprehensive understanding and guide on implementing and using Conversation Starter, refer to our specific guide on the [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter) and the [AI Features](/ui-kit/react/ai-features) overview.
+
+#### Smart Replies
+
+Smart Replies provide AI-generated response suggestions to keep conversations flowing. For a comprehensive understanding and guide on implementing and using Smart Replies, refer to our specific guide on the [Smart Replies](/fundamentals/ai-user-copilot/smart-replies) and the [AI Features](/ui-kit/react/ai-features) overview.
+
+#### Conversation Summary
+
+Conversation Summary generates an AI-written recap of a conversation when needed. For a comprehensive understanding and guide on implementing and using Conversation Summary, refer to our specific guide on the [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary) and the [AI Features](/ui-kit/react/ai-features) overview.
+
+---
+
+
+---
+
+## Next Steps
+
+
-***
+
-
+Fires when the component encounters an error (network failure, auth issue, etc.).
-
-The customized chat interface is displayed below.
+Customized:
-Use the following code to achieve the customization shown above.
-
-Use the following code to achieve the customization shown above.
-
- {member.getName()}
- 
{member.getRole()}
-
;
-}
+ return (
+
+ {member.getName()}
+
+ ![]({"ICON_HERE"})
+ {member.getRole()}
+
+
+ );
+};
-
-The customized chat interface is displayed below.
+Customized:
-Use the following code to achieve the customization shown above.
-
-Use the following code to achieve the customization shown above.
-
-
);
};
-
-The customized chat interface is displayed below.
+Customized:
-Use the following code to achieve the customization shown above.
-
-Use the following code to achieve the customization shown above.
-
- {
- // logic here
- }}
- iconURL={ICON_URL}
- />
-
- );
+ return (
+
- {localize("GROUP_MEMBERS")}
-
-
+ {
+ // logic here
+ }}
+ iconURL={ICON_URL}
+ />
+
+ );
};
-
+ {localize("GROUP_MEMBERS")}
+
+
-Use the following code to achieve the customization shown above.
-
+
+
+```tsx lines
+
-The Groups component is composed of the following BaseComponents:
+
+
+ );
+}
export default GroupsDemo;
```
-
-
+### Example
-
-The customized chat interface is displayed below.
+Customized:
-Use the following code to achieve the customization shown above.
-
-
- );
- };
-
- return
-
- {group.getName()}
- JOIN
-
- {group.getMembersCount()} Members • {group.getDescription()}
-
-
-
-```css
+
+```css lines
.group-list-item {
display: flex;
flex-direction: column;
text-align: left;
- display: flex;
min-width: 240px;
padding: 8px 16px;
gap: 4px;
@@ -651,161 +433,120 @@ export default GroupsDemo;
line-height: 16.8px;
}
```
-
-
-***
-
-#### TitleView
+### titleView
-The customized chat interface is displayed below.
+Replace the name / title text. Group type badge inline example.
-Use the following code to achieve the customization shown above.
-
-```ts
-import React from "react";
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroups } from "@cometchat/chat-uikit-react";
-// Custom title view component
const customTitleView = (group: CometChat.Group) => {
- return
-
-
-```css
-.groups__title-view{
-display: flex;
-align-items: center;
-gap: 4px;
-align-self: stretch;
+
+```css lines
+.groups__title-view {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ align-self: stretch;
}
-.groups__title-view-name{
-overflow: hidden;
-color: #141414;
-text-overflow: ellipsis;
-font:500 16px Roboto
+
+.groups__title-view-name {
+ overflow: hidden;
+ color: #141414;
+ text-overflow: ellipsis;
+ font: 500 16px Roboto;
}
-.groups__title-view-type{
-color: #FFF;
-font: 600 8px Roboto;
-display: flex;
-height: 15px;
-padding: 1px 3px;
-justify-content: center;
-align-items: center;
-gap: 4px;
-border-radius: 7px;
-background: #09C26F;
+
+.groups__title-view-type {
+ color: #fff;
+ font: 600 8px Roboto;
+ display: flex;
+ height: 15px;
+ padding: 1px 3px;
+ justify-content: center;
+ align-items: center;
+ gap: 4px;
+ border-radius: 7px;
+ background: #09c26f;
}
-.groups__title-view-public .groups__title-view-type{
-background: #0B7BEA;
+
+.groups__title-view-public .groups__title-view-type {
+ background: #0b7bea;
}
-.groups__title-view-type img{
-background: #fff;
-border-radius: 4px;
-height: 12px;
-width: 12px;
+
+.groups__title-view-type img {
+ background: #fff;
+ border-radius: 4px;
+ height: 12px;
+ width: 12px;
}
```
-
-
-***
+### subtitleView
-#### SubtitleView
+Replace the member count subtitle text.
-Custom subtitle view to be rendered for each group in the fetched list.
-
-Shown below is the default chat interface.
+Default:
-The customized chat interface is displayed below.
+Customized:
-Use the following code to achieve the customization shown above.
-
-```ts
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroups } from "@cometchat/chat-uikit-react";
-import React from "react";
-const GroupsDemo = () => {
- const getSubtitleView = (group: CometChat.Group): JSX.Element => {
- if (!(group instanceof CometChat.Group)) {
- return <>;
- }
-
- return (
-
-
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatGroups } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const GroupsDemo = () => {
- const getSubtitleView = (group) => {
- if (!(group instanceof CometChat.Group)) {
- return <>;
- }
-
- return (
-
-
-
-```css
+
+```css lines
.cometchat .cometchat-groups .group-subtitle {
overflow: hidden;
color: #727272;
@@ -817,203 +558,148 @@ export default GroupsDemo;
line-height: 120%;
}
```
-
-
-***
+### leadingView
-#### LeadingView
-
-The customized chat interface is displayed below.
+Replace the avatar / left section. Joined status badge example.
-Use the following code to achieve the customization shown above.
-
-```ts
-import React from "react";
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatGroups,CometChatAvatar } from "@cometchat/chat-uikit-react";
-
-// Custom leading view component
- const customLeadingView = (group: CometChat.Group) => {
- return <>
- {group.getHasJoined() ?
-
-
-```css
-
-.cometchat-groups .cometchat-list-item .groups__leading-view .cometchat-avatar__image, .cometchat-groups .cometchat-list-item .groups__leading-view .cometchat-avatar{
+
+```css lines
+.cometchat-groups .cometchat-list-item .groups__leading-view .cometchat-avatar__image,
+.cometchat-groups .cometchat-list-item .groups__leading-view .cometchat-avatar {
border-radius: 8px;
- height: 48px ;
- width: 48px ;
+ height: 48px;
+ width: 48px;
}
-.groups__leading-view-info{
+.groups__leading-view-info {
display: flex;
width: 48px;
height: 15px;
padding: 1px 3px;
justify-content: center;
align-items: center;
- color:#FFF;
- font:600 8px/9.6px Roboto;
- background:#FFAB00;
- position:absolute;
- bottom:-2px;
+ color: #fff;
+ font: 600 8px/9.6px Roboto;
+ background: #ffab00;
+ position: absolute;
+ bottom: -2px;
}
-.groups__leading-view-joined .groups__leading-view-info{
- background:#09C26F;
+
+.groups__leading-view-joined .groups__leading-view-info {
+ background: #09c26f;
}
-.groups__leading-view{
+
+.groups__leading-view {
position: relative;
}
```
-
-
-***
-
-#### TrailingView
+### trailingView
-The customized chat interface is displayed below.
+Replace the right section. Join status button example.
-Use the following code to achieve the customization shown above.
-
-```ts
-import React from "react";
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
-import {
- CometChatGroups,
-} from "@cometchat/chat-uikit-react";
-
-// Custom trailing view component
-const customTrailingButtonView = (group:CometChat.Group) => {
-return
-
-
-```css
-.groups__trailing-view{
-display: flex;
-padding: 4px 12px;
-justify-content: center;
-align-items: center;
-border-radius: 1000px;
-background: #EDEAFA;
-overflow: hidden;
-color: #6852D6;
-text-overflow: ellipsis;
-font:700 12px Roboto;
+
+```css lines
+.groups__trailing-view {
+ display: flex;
+ padding: 4px 12px;
+ justify-content: center;
+ align-items: center;
+ border-radius: 1000px;
+ background: #edeafa;
+ overflow: hidden;
+ color: #6852d6;
+ text-overflow: ellipsis;
+ font: 700 12px Roboto;
}
-.cometchat-groups .cometchat-list-item__trailing-view{
-width: fit-content;
-height: fit-content;
+
+.cometchat-groups .cometchat-list-item__trailing-view {
+ width: fit-content;
+ height: fit-content;
}
```
-
-
-***
-
-#### Header View
+### headerView
-A custom component to render in the top-right corner of the groups list.
-
-The customized chat interface is displayed below.
+Replace the entire header bar.
-Use the following code to achieve the customization shown above.
-
-```ts
-import { CometChatGroups } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const GroupsDemo = () => {
- const getHeaderView = () => {
- return ;
- };
-
- return
-
-
-```js
+```ts lines
import { CometChatGroups } from "@cometchat/chat-uikit-react";
-import React from "react";
-const GroupsDemo = () => {
- const getHeaderView = () => {
- return ;
- };
-
- return
-
-
-```css
+
+```css lines
.group-header-view {
height: 24px;
width: 24px;
@@ -1030,83 +716,44 @@ export default GroupsDemo;
mask-size: contain;
}
```
-
-
-***
-
-#### Options
+### options
-You can set the Custom options to the Groups component.
-
-The customized chat interface is displayed below.
+Replace the context menu / hover actions on each group item.
-Use the following code to achieve the customization shown above.
-
-```ts
+```ts lines
+import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroups, CometChatOption } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const GroupsDemo = () => {
- const getOptions = (group: CometChat.Group): CometChatOption[] => {
- return [
- new CometChatOption({
- id: "delete",
- title: "delete",
- onClick: () => {
- console.log("Custom option clicked for group:", group);
- },
- }),
- ];
- };
-
- return
-
-
-```js
-import { CometChatGroups, CometChatOption } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const GroupsDemo = () => {
- const getOptions = (group: CometChat.Group): CometChatOption[] => {
- return [
- new CometChatOption({
- id: "delete",
- title: "delete",
- onClick: () => {
- console.log("Custom option clicked for group:", group);
- },
- }),
- ];
- };
-
- return
-
-
-```css
+
+```css lines
.cometchat .cometchat-groups .cometchat-menu-list__menu {
background: none;
}
+
.cometchat .cometchat-groups .cometchat-menu-list__main-menu-item-icon {
height: 24px;
width: 24px;
@@ -1123,7 +770,84 @@ export default GroupsDemo;
mask-size: contain;
}
```
-
-
+
+#### Structure of CometChatOption
+
+| Name | Description |
+| --- | --- |
+| `id` | Unique identifier for each option |
+| `title` | Heading text for each option |
+| `iconURL` | Asset URL of the icon for each option |
+| `onClick` | Method invoked when user clicks the option |
+
+## Theme and Styling
+
+Using CSS, customize the look and feel of the component. The root CSS class is `.cometchat-groups`.
+
+
+
+
+
+```tsx lines
+
-## Overview
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` |
+| Key components | `CometChatMessages` — uses `CometChat.blockUsers()` / `CometChat.unblockUsers()` SDK methods |
+| Init | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` |
+| Events | `CometChatUserEvents.ccUserBlocked`, `CometChatUserEvents.ccUserUnblocked` |
+| UI helpers | `CometChatConfirmDialog`, `CometChatToast` |
+| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) |
+| Related | [All Guides](/ui-kit/react/guide-overview) |
-The Block Users feature allows users to prevent specific users from sending them messages, effectively cutting off communication from unwanted contacts.
+
-- Block Users feature allows users to prevent specific users from sending them messages.
-- Provides privacy control, prevents harassment, and allows users to manage their communication preferences.
-- Your app will allow users to block/unblock other users, hide message composers for blocked users, and provide appropriate UI feedback for blocked states.
+Block/Unblock lets users prevent specific users from sending them messages. When blocked, the message composer is hidden and replaced with an unblock prompt.
----
-
-## Prerequisites
-
-- React v18.2.0+
-- CometChat React UI Kit v6.1.0+
-- CometChat Chat SDK JavaScript v4.0.13+
-- Project setup with initialized CometChat credentials (App ID, Auth Key, Region)
-- TypeScript support (recommended)
-- User authentication and chat functionality already implemented
+Before starting, complete the [Getting Started](/ui-kit/react/react-js-integration) guide for your framework.
---
## Components
-| Component / Class | Role |
-|:-----------------------------------|:-----|
-| **CometChat.blockUsers()** | SDK method to block specific users |
-| **CometChat.unblockUsers()** | SDK method to unblock previously blocked users |
-| **CometChatUserEvents.ccUserBlocked** | Event listener for when a user is blocked |
-| **CometChatUserEvents.ccUserUnblocked** | Event listener for when a user is unblocked |
-| **CometChatConfirmDialog** | Confirmation dialog for block/unblock actions |
-| **CometChatToast** | Toast notifications for action feedback |
+| Component / Class | Role |
+|:---|:---|
+| `CometChat.blockUsers()` | SDK method to block specific users |
+| `CometChat.unblockUsers()` | SDK method to unblock previously blocked users |
+| `CometChatUserEvents.ccUserBlocked` | Event fired when a user is blocked |
+| `CometChatUserEvents.ccUserUnblocked` | Event fired when a user is unblocked |
+| `CometChatConfirmDialog` | Confirmation dialog for block/unblock actions |
---
## Integration Steps
-### 1. Block User Function Implementation
+### 1. Block User
+
+Call `CometChat.blockUsers()` with the target UID. On success, update the local user object with `setBlockedByMe(true)` and emit `ccUserBlocked` so all subscribed components (like the composer) react to the change.
_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
-```tsx
+```tsx lines
const onBlockUserClicked: () => Promise = () => {
let UID = user.getUid();
return new Promise(async (resolve, reject) => {
@@ -67,11 +66,13 @@ const onBlockUserClicked: () => Promise = () => {
---
-### 2. Unblock User Function Implementation
+### 2. Unblock User
+
+Call `CometChat.unblockUsers()` with the target UID. On success, reset the action items back to "Block" (instead of "Unblock"), update the local user object, and emit `ccUserUnblocked` to restore the composer.
_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
-```tsx
+```tsx lines
const onUnblockUserClicked = () => {
let UID = user.getUid();
CometChat.unblockUsers([UID]).then(
@@ -96,11 +97,13 @@ const onUnblockUserClicked = () => {
---
-### 3. Block User Confirmation Dialog
+### 3. Confirmation Dialog
+
+Show a confirmation dialog before blocking. This prevents accidental blocks. The dialog uses `CometChatConfirmDialog` with localized title, message, and button text.
_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
-```tsx
+```tsx lines
const getBlockUserConfirmationDialogView = () => {
return <>
-
- {group.getName()}
- JOIN
-
- {group.getMembersCount()} Members • {group.getDescription()}
-
+const getItemView = (group: CometChat.Group) => {
+ return (
+
+
+ );
};
-export default GroupsDemo;
+
+
- );
- };
-
- return {group.getName()}
+ JOIN
+ {group.getMembersCount()} Members • {group.getDescription()}
+
+
-Use the following code to achieve the customization shown above.
-
+ return (
+
+ {group.getType()}
+
+
+ );
+};
-
{group.getName()}
- ![]({"ICON_HERE"}/)
{group.getType()}
-
;
-}
+
+
-The customized chat interface is displayed below.
+Customized:
-Use the following code to achieve the customization shown above.
-
- {group.getMembersCount()} Members • {group.getDescription()}
-
- );
- };
-
- return
- {group.getMembersCount()} Members • {group.getDescription()}
-
- );
- };
+const getSubtitleView = (group: CometChat.Group): JSX.Element => {
+ if (!(group instanceof CometChat.Group)) {
+ return <>;
+ }
- return
+ {group.getMembersCount()} Members • {group.getDescription()}
+
+ );
};
-export default GroupsDemo;
+
-Use the following code to achieve the customization shown above.
-
-
:
-
};
- }
+const customLeadingView = (group: CometChat.Group) => {
+ return (
+ <>
+ {group.getHasJoined() ? (
+
+
+ ) : (
+
+
+ )}
+
+ );
+};
-
-Use the following code to achieve the customization shown above.
-
- {group.getHasJoined() ? "JOINED" : "+ JOIN"}
-
-}
+import { CometChatGroups } from "@cometchat/chat-uikit-react";
-
+ {group.getHasJoined() ? "JOINED" : "+ JOIN"}
+
+ );
+};
+
-Use the following code to achieve the customization shown above.
-
-Use the following code to achieve the customization shown above.
-
+
+
+```tsx lines
+
@@ -119,11 +122,13 @@ const getBlockUserConfirmationDialogView = () => {
---
-### 4. Message Composer Blocked State
+### 4. Composer Blocked State
_File: [CometChatMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatMessages/CometChatMessages.tsx)_
-```tsx
+When a user is blocked, the composer is replaced with an unblock prompt:
+
+```tsx lines
{showComposerState ? (
{
- if (messageUser?.getBlockedByMe()) {
- setShowComposer(false);
- }
- const unsubscribeFromEvents = subscribeToEvents();
- return () => {
- unsubscribeFromEvents();
- };
-}, [subscribeToEvents, selectedItem]);
-```
-
-- **Send Block/Unblock Action Handler**
+### 5. Event Listeners
_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
-```tsx
-const onUserActionClick = (item: { name: string; icon: string; }) => {
- if (item.name == getLocalizedString("user_details_block")) {
- setShowBlockUserDialog(true);
- } else if (item.name == getLocalizedString("user_details_unblock")) {
- onUnblockUserClicked();
- }
-}
-```
+Subscribe to block/unblock events to update the UI in real time:
-- **Live Updates / Observers**
-
-_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
-
-```tsx
+```tsx lines
const ccUserBlocked = CometChatUserEvents.ccUserBlocked.subscribe(user => {
if (user.getBlockedByMe()) {
setShowComposer(false);
@@ -214,76 +179,34 @@ const ccUserUnblocked = CometChatUserEvents.ccUserUnblocked.subscribe(user => {
---
-## Customization Options
-
-- Styling overrides for blocked states and confirmation dialogs
-- Custom block/unblock confirmation messages
-- Toast notification customization
-- Custom action items for different user states
-- Custom blocked state UI
-
----
-
-## Filtering / Edge Cases
+## Feature Matrix
-- Detect when blocking status changes mid-chat
-- Prevent duplicate block actions
-- Handle blocked users in search results
-- Respect group chat rules when blocking
-- Keep old messages visible from blocked users
+| Feature | Component / Method | File |
+|:---|:---|:---|
+| Block user | `CometChat.blockUsers([UID])` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
+| Unblock user | `CometChat.unblockUsers([UID])` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
+| Check blocked status | `user.getBlockedByMe()` | [CometChatMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatMessages/CometChatMessages.tsx) |
+| Block confirmation | `CometChatConfirmDialog` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
+| Blocked composer state | `message-composer-blocked` | [CometChatMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatMessages/CometChatMessages.tsx) |
+| Block events | `ccUserBlocked.subscribe()` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
+| Unblock events | `ccUserUnblocked.subscribe()` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
+| Update user state | `user.setBlockedByMe(boolean)` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
---
-## Error Handling
-
-```tsx
-CometChat.blockUsers([UID]).then(
- list => {
- user.setBlockedByMe(true);
- CometChatUserEvents.ccUserBlocked.next(user);
- toastTextRef.current = getLocalizedString("blocked_successfully");
- setShowToast(true);
- }, error => {
- console.log("Blocking user fails with error", error);
- }
-)
-```
-
-- Handle block/unblock network errors
-- Provide retry options
-- Maintain UI consistency on errors
-
----
-
-## Context-Specific Notes
-
-- Blocking applies only to private chats, not groups
-- Blocked users may still appear in lists but with indicators
-- Existing messages remain visible
-- Updates are reflected in real-time
-
----
-
-## Summary / Feature Matrix
-
-| Feature | Component / Method | File Reference |
-|:-----------------------|:------------------------------------|:---------------|
-| Block user | `CometChat.blockUsers([UID])` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
-| Unblock user | `CometChat.unblockUsers([UID])` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
-| Check blocked status | `user.getBlockedByMe()` | [CometChatMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatMessages/CometChatMessages.tsx) |
-| Block confirmation dlg | `CometChatConfirmDialog` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
-| Blocked composer state | `message-composer-blocked` | [CometChatMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatMessages/CometChatMessages.tsx) |
-| Block user events | `ccUserBlocked.subscribe()` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
-| Unblock user events | `ccUserUnblocked.subscribe()` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
-| Update user state | `user.setBlockedByMe(boolean)` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
-
----
-
-## Next Steps & Further Reading
-
-- [CometChat React UI Kit Documentation](https://www.cometchat.com/docs/ui-kit/react/overview)
-- [Sample App Repository](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app)
-- User Management Features
-- Advanced Customization Guide
-- Event Handling Documentation
-
+## Next Steps
+
+
+
+ Display and manage user lists.
+
+
+ Customize the message input component.
+
+
+ Browse all feature and formatter guides.
+
+
+ Full working sample application on GitHub.
+
+
\ No newline at end of file
diff --git a/ui-kit/react/guide-call-log-details.mdx b/ui-kit/react/guide-call-log-details.mdx
index a029b601e..aa839f150 100644
--- a/ui-kit/react/guide-call-log-details.mdx
+++ b/ui-kit/react/guide-call-log-details.mdx
@@ -1,54 +1,51 @@
---
title: "Call Log Details"
sidebarTitle: "Call Log Details"
+description: "Build a detailed call insights screen with metadata, participants, and recordings in CometChat React UI Kit."
---
-Display comprehensive call information and history when users select calls from the calls tab in your React chat app.
+
-## Overview
+| Field | Value |
+| --- | --- |
+| Packages | `@cometchat/chat-uikit-react` + `@cometchat/calls-sdk-javascript` |
+| Key components | `CometChatCallDetails`, `CometChatCallDetailsInfo`, `CometChatCallDetailsParticipants`, `CometChatCallDetailsRecording` |
+| Init | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` + Calls SDK installed |
+| Purpose | Detailed call insights screen with metadata, participants, and recordings |
+| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) |
+| Related | [All Guides](/ui-kit/react/guide-overview) |
-The Calls Log Details feature provides users with detailed information about specific calls, including call status, participants, duration, recordings, and call history.
+
-- Provides detailed information about specific calls when selected from the calls tab.
-- Enables users to review call details, understand outcomes, view participants, and access recordings for reference.
-- Users can view call details with tabbed navigation showing participants, recordings, and call history.
+Call Log Details shows call metadata, participants, duration, recordings, and history when a user selects a call from the Calls tab.
----
-
-## Prerequisites
-
-- React v18.2.0+
-- CometChat React UI Kit v6.1.0+
-- CometChat Chat SDK JavaScript v4.0.13+
-- CometChat Calls SDK JavaScript v4.0.11+
-- Project setup with initialized CometChat credentials (App ID, Auth Key, Region)
-- TypeScript support (recommended)
-- Call functionality implemented
-- Calls tab navigation configured
+Before starting, complete the [Getting Started](/ui-kit/react/react-js-integration) guide for your framework and install `@cometchat/calls-sdk-javascript`.
---
## Components
-| Component / Class | Role |
-|:--------------------------------|:-----|
-| **CometChatCallDetails** | Main container for call details display |
-| **CometChatCallDetailsInfo** | Shows call status, duration, and info |
-| **CometChatCallDetailsParticipants** | Displays call participants |
-| **CometChatCallDetailsRecording** | Shows call recordings if available |
-| **CometChatCallDetailsHistory** | Displays call history |
-| **CometChatCallLogs** | Calls list component in the calls tab |
+| Component / Class | Role |
+|:---|:---|
+| `CometChatCallDetails` | Main container for call details display |
+| `CometChatCallDetailsInfo` | Shows call status, duration, and info |
+| `CometChatCallDetailsParticipants` | Displays call participants |
+| `CometChatCallDetailsRecording` | Shows call recordings if available |
+| `CometChatCallDetailsHistory` | Displays call history |
+| `CometChatCallLogs` | Calls list component in the calls tab |
---
## Integration Steps
-### 1. Calls Tab Integration Setup
+### 1. Calls Tab Integration
+
+Render `CometChatCallLogs` when the "Calls" tab is active. When a call is clicked, dispatch it to the app state so the details panel can display it.
_File: [CometChatSelector.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatSelector/CometChatSelector.tsx)_
-```tsx
-{activeTab == "calls" ? (
+```tsx lines
+{activeTab === "calls" ? (
{
@@ -60,11 +57,13 @@ _File: [CometChatSelector.tsx](https://github.com/cometchat/cometchat-uikit-reac
---
-### 2. Call Details Component Integration
+### 2. Call Details Component
+
+Guard-check that the selected item is a `CometChat.Call` instance, then render `CometChatCallDetails`. The `onBack` callback clears the selection and returns to the call list.
_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
-```tsx
+```tsx lines
const CallDetailsView = () => {
if (!selectedItem || !(selectedItem instanceof CometChat.Call)) return null;
@@ -82,11 +81,13 @@ const CallDetailsView = () => {
---
-### 3. Call Details Main Component Implementation
+### 3. Call Details Implementation
+
+The main details screen. It shows the caller's avatar and name at the top, call info (status, duration) below, and three tabs: Participants, Recording, and History. Tab selection switches the content panel.
_File: [CometChatCallLogDetails.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCallLog/CometChatCallLogDetails.tsx)_
-```tsx
+```tsx lines
export const CometChatCallDetails = (props: { selectedItem: any, onBack?: () => void }) => {
const { selectedItem, onBack } = props;
const callDetailTabItems = [
@@ -136,11 +137,13 @@ export const CometChatCallDetails = (props: { selectedItem: any, onBack?: () =>
---
-### 4. Call Information Display Component
+### 4. Call Information Display
+
+Renders the call status line (incoming/outgoing) based on who initiated the call. Compares the initiator's UID against the logged-in user to determine direction, then maps the SDK call status to a localized label.
_File: [CometChatCallLogInfo.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCallLog/CometChatCallLogInfo.tsx)_
-```tsx
+```tsx lines
export const CometChatCallDetailsInfo = (props: { call: any }) => {
const { call } = props;
const [loggedInUser, setLoggedInUser] = useState(null);
@@ -160,7 +163,6 @@ export const CometChatCallDetailsInfo = (props: { call: any }) => {
case CometChatUIKitConstants.calls.ended: {
return isSentByMeFlag ? getLocalizedString("calls_outgoing_call") : getLocalizedString('calls_incoming_call');
}
- // ... other status cases
}
}
@@ -179,127 +181,34 @@ export const CometChatCallDetailsInfo = (props: { call: any }) => {
---
-## Implementation Flow
-
-- **Fetch Data / Call Selection**
-
-```tsx
-const onSelectorItemClicked = (e: CometChat.Conversation | CometChat.User | CometChat.Group | CometChat.Call, type: string) => {
- if (type === "updateSelectedItemCall") {
- setSelectedItem(e as CometChat.Call);
- setAppState({ type: "updateSelectedItemCall", payload: e as CometChat.Call });
- }
-}
-```
-
-- **Load Call Data / Associated Information**
-
-```tsx
-useEffect(() => {
- const loggedInUser = CometChatUIKitLoginListener.getLoggedInUser();
- const callUser = verifyCallUser(selectedItem, loggedInUser!);
-
- if (selectedItem.receiverType === CometChatUIKitConstants.MessageReceiverType.user) {
- CometChat.getUser(callUser.uid).then((response: CometChat.User) => {
- setUser(response);
- });
- }
-}, [selectedItem]);
-```
-
-- **Display Call Details / Tab Navigation**
-
-```tsx
-const [activeTab, setActiveTab] = useState("Participants");
-
-const renderTabContent = () => {
- switch (activeTab) {
- case "Participants":
- return
+
+ The call logs component reference.
+
+
+ Overview of calling capabilities.
+
+
+ Browse all feature and formatter guides.
+
+
+ Full working sample application on GitHub.
+
+
\ No newline at end of file
diff --git a/ui-kit/react/guide-group-chat.mdx b/ui-kit/react/guide-group-chat.mdx
index b62e735ec..eb4bd755a 100644
--- a/ui-kit/react/guide-group-chat.mdx
+++ b/ui-kit/react/guide-group-chat.mdx
@@ -1,54 +1,50 @@
---
title: "Group Chat"
sidebarTitle: "Group Chat"
+description: "Implement group management including create, join, members, roles, and ownership transfer in CometChat React UI Kit."
---
-Implement comprehensive group management functionality including creation, joining, member management, and administrative controls in your React chat app.
+
----
-
-## Overview
-
-Groups Management provides a complete set of features for creating, managing, and participating in group conversations, including member administration, permissions, and group lifecycle management.
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` |
+| Key components | `CometChatGroups`, `CometChatGroupMembers`, `CometChatCreateGroup`, `CometChatJoinGroup`, `CometChatAddMembers`, `CometChatBannedMembers`, `CometChatTransferOwnership` |
+| Init | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` |
+| Features | Create public/private/password-protected groups, manage members, roles, ownership transfer |
+| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) |
+| Related | [All Guides](/ui-kit/react/guide-overview) |
-- Provides a full set of features for creating and managing group conversations, including member administration, permissions, and lifecycle management.
-- Enables users to create collaborative spaces, manage team communications, control access through different group types, and maintain group organization through administrative tools.
-- Your app will support full group lifecycle management from creation to administration, allowing users to create public/private/password-protected groups, manage members, and control group operations.
+
----
-
-## Prerequisites
+This guide covers the full group lifecycle: creating groups, joining them, managing members, changing roles, and transferring ownership.
-- React v18.2.0+
-- CometChat React UI Kit v6.1.0+
-- CometChat Chat SDK JavaScript v4.0.13+
-- Project setup with initialized CometChat credentials (App ID, Auth Key, Region)
-- TypeScript support (recommended)
-- Basic chat functionality already implemented
-- User authentication already configured
+Before starting, complete the [Getting Started](/ui-kit/react/react-js-integration) guide for your framework.
---
## Components
-| Component / Class | Role |
-|--------------------------------|------|
-| **CometChatCreateGroup** | Creates new groups with different types and settings |
-| **CometChatJoinGroup** | Handles joining public and password-protected groups |
-| **CometChatGroupMembers** | Displays and manages group member lists |
-| **CometChatAddMembers** | Adds new members to existing groups |
-| **CometChatBannedMembers** | Manages banned members and unban operations |
-| **CometChatTransferOwnership** | Transfers group ownership to other members |
+| Component / Class | Role |
+|:---|:---|
+| `CometChatCreateGroup` | Creates new groups with different types and settings |
+| `CometChatJoinGroup` | Handles joining public and password-protected groups |
+| `CometChatGroupMembers` | Displays and manages group member lists |
+| `CometChatAddMembers` | Adds new members to existing groups |
+| `CometChatBannedMembers` | Manages banned members and unban operations |
+| `CometChatTransferOwnership` | Transfers group ownership to other members |
---
## Integration Steps
-### 1. Create Group Implementation
+### 1. Create Group
+
+Build a form that collects a group name, type (public/private/password), and optional password. On submit, generate a unique GUID, call `CometChat.createGroup()`, and emit `ccGroupCreated` so the rest of the UI updates.
_File: [CometChatCreateGroup.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCreateGroup/CometChatCreateGroup.tsx)_
-```tsx
+```tsx lines
export const CometChatCreateGroup = ({ setShowCreateGroup, onGroupCreated }: CreateGroupProps) => {
const [groupType, setGroupType] = useState("public");
const [groupName, setGroupName] = useState("");
@@ -73,12 +69,14 @@ export const CometChatCreateGroup = ({ setShowCreateGroup, onGroupCreated }: Cre
---
-### 2. Join Group Implementation
+### 2. Join Group
+
+Handle joining for both public and password-protected groups. Call `CometChat.joinGroup()` with the group's GUID, type, and password (if applicable). On success, emit `ccGroupMemberJoined` to update the member list across the app.
_File: [CometChatJoinGroup.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatJoinGroup/CometChatJoinGroup.tsx)_
-```tsx
-export const CometChatJoinGroup = ({ group, onHide, onProtectedGroupJoin }) => {
+```tsx lines
+export const CometChatJoinGroup = ({ group, onProtectedGroupJoin }) => {
const [password, setPassword] = useState("");
const [error, setError] = useState(false);
const loggedInUser = CometChatUIKitLoginListener.getLoggedInUser();
@@ -86,7 +84,6 @@ export const CometChatJoinGroup = ({ group, onHide, onProtectedGroupJoin }) => {
const joinGroup = () => {
CometChat.joinGroup(group.getGuid(), group.getType(), password)
.then((res) => {
- onHide();
onProtectedGroupJoin(group);
CometChatGroupEvents.ccGroupMemberJoined.next({
joinedGroup: res,
@@ -100,11 +97,13 @@ export const CometChatJoinGroup = ({ group, onHide, onProtectedGroupJoin }) => {
---
-### 3. View Group Members Implementation
+### 3. View Group Members
+
+Render the member list for a group using `CometChatGroupMembers`. Pass `onItemClick` to handle member selection and `options` to add context-menu actions like "View Profile".
_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
-```tsx
+```tsx lines
const GroupMembersView = ({ group }: { group: CometChat.Group }) => {
return (
@@ -127,13 +126,16 @@ const GroupMembersView = ({ group }: { group: CometChat.Group }) => {
};
```
+
---
-### 4. Add Members to Group Implementation
+### 4. Add Members
+
+Let admins select users and add them to the group. Collect selected UIDs, call `CometChat.addMembersToGroup()`, and emit `ccGroupMemberAdded` so the member list refreshes.
_File: [CometChatAddMembers.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatAddMembers/CometChatAddMembers.tsx)_
-```tsx
+```tsx lines
export const CometChatAddMembers = ({ group, onBack }: IAddMembersProps) => {
const [selectedUsers, setSelectedUsers] = useState([]);
const [isLoading, setIsLoading] = useState(false);
@@ -161,11 +163,13 @@ export const CometChatAddMembers = ({ group, onBack }: IAddMembersProps) => {
---
-### 5. Ban Member from Group Implementation
+### 5. Ban Members
+
+Fetch the list of banned members using `BannedMembersRequestBuilder`. This component displays banned users and provides unban functionality for group admins.
_File: [CometChatBannedMembers.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatBannedMembers/CometChatBannedMembers.tsx)_
-```tsx
+```tsx lines
export const CometChatBannedMembers = ({ group }: bannedMembersProp) => {
const [bannedMembers, setBannedMembers] = useState([]);
const [state, setState] = useState(States.loading);
@@ -189,13 +193,16 @@ export const CometChatBannedMembers = ({ group }: bannedMembersProp) => {
};
```
+
---
-### 6. Change Member Scope Implementation
+### 6. Change Member Scope
+
+Promote or demote a member by calling `CometChat.updateGroupMemberScope()`. Pass the member's UID, the new scope (`admin`, `moderator`, or `participant`), and the group GUID. Emit `ccGroupMemberScopeChanged` so the UI reflects the role change.
_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
-```tsx
+```tsx lines
const changeMemberScope = async (member: CometChat.GroupMember, newScope: string) => {
try {
await CometChat.updateGroupMemberScope(member.getUid(), newScope, group.getGuid());
@@ -207,21 +214,21 @@ const changeMemberScope = async (member: CometChat.GroupMember, newScope: string
newScope: newScope,
oldScope: member.getScope()
});
- showSuccessMessage("Member scope updated successfully");
} catch (error) {
console.error("Failed to update member scope:", error);
- showErrorMessage("Failed to update member scope");
}
};
```
---
-### 7. Transfer Group Ownership Implementation
+### 7. Transfer Ownership
+
+Let the current owner select a member and transfer ownership via `CometChat.transferGroupOwnership()`. The group object is cloned and updated locally, then `ccOwnershipChanged` is emitted to sync the UI.
_File: [CometChatTransferOwnership.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatTransferOwnership/CometChatTransferOwnership.tsx)_
-```tsx
+```tsx lines
export const CometChatTransferOwnership = ({ group, onClose }: ITransferOwnershipProps) => {
const [selectedMember, setSelectedMember] = useState(null);
const [isLoading, setIsLoading] = useState(false);
@@ -252,96 +259,34 @@ export const CometChatTransferOwnership = ({ group, onClose }: ITransferOwnershi
---
-## Implementation Flow
-
-- **Fetch Data / Group Information**: Retrieve group details and member lists.
-- **Load Group Data / Member Information**: Fetch members with pagination.
-- **Execute Group Operations / Action Handlers**: Handle creation, adding, banning, etc., with proper error handling.
-- **Live Updates / Event Handling**: Subscribe to CometChatGroupEvents for member changes and update UI in real time.
-
----
-
-## Customization Options
-
-- Styling: Override CSS classes
-- Group Types: Customize available types
-- Member Permissions: Add custom roles
-- UI Components: Modify list/form elements
-- Validation Rules: Add extra checks
-- Event Handling: Custom responses
-- Search & Filtering: Add search for members
-
----
-
-## Filtering / Edge Cases
+## Feature Matrix
-- Handle group type restrictions, member limits, and permission checks
-- Manage large groups efficiently
-- Handle empty groups and network errors gracefully
-- Maintain UI consistency with concurrent actions
+| Feature | Component / Method | File |
+|:---|:---|:---|
+| Create group | `CometChatCreateGroup` | [CometChatCreateGroup.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCreateGroup/CometChatCreateGroup.tsx) |
+| Join group | `CometChatJoinGroup` | [CometChatJoinGroup.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatJoinGroup/CometChatJoinGroup.tsx) |
+| View members | `CometChatGroupMembers` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
+| Add members | `CometChatAddMembers` | [CometChatAddMembers.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatAddMembers/CometChatAddMembers.tsx) |
+| Ban members | `CometChatBannedMembers` | [CometChatBannedMembers.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatBannedMembers/CometChatBannedMembers.tsx) |
+| Change scope | `updateGroupMemberScope()` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
+| Transfer ownership | `CometChatTransferOwnership` | [CometChatTransferOwnership.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatTransferOwnership/CometChatTransferOwnership.tsx) |
+| Group events | `CometChatGroupEvents` | Multiple files |
---
-## Error Handling & Permission Management
-
-```tsx
-const handleGroupOperation = async (operation: () => Promise) => {
- try {
- if (!hasPermission(currentUser, currentGroup, 'manage_members')) {
- showErrorMessage("You don't have permission to perform this action");
- return;
- }
- const result = await operation();
- showSuccessMessage("Operation completed successfully");
- return result;
- } catch (error) {
- if (error.code === "ERR_PERMISSION_DENIED") {
- showErrorMessage("Permission denied for this operation");
- } else if (error.code === "ERR_GROUP_NOT_FOUND") {
- showErrorMessage("Group not found or no longer exists");
- } else if (error.code === "ERR_MEMBER_NOT_FOUND") {
- showErrorMessage("Member not found in this group");
- } else {
- showErrorMessage("An error occurred while performing the operation");
- }
- console.error("Group operation failed:", error);
- }
-};
-```
-
----
-
-## Context-Specific Notes
-
-- Different handling for public, private, password-protected groups
-- Different permissions for admins, moderators, participants
-- Optimize for large groups
-- Real-time updates across devices
-- Works cross-platform
-
----
-
-## Summary / Feature Matrix
-
-| Feature | Component / Method | File Reference |
-|--------------------|--------------------------------|----------------|
-| Create group | `CometChatCreateGroup` | [CometChatCreateGroup.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCreateGroup/CometChatCreateGroup.tsx) |
-| Join group | `CometChatJoinGroup` | [CometChatJoinGroup.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatJoinGroup/CometChatJoinGroup.tsx) |
-| View members | `CometChatGroupMembers` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
-| Add members | `CometChatAddMembers` | [CometChatAddMembers.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatAddMembers/CometChatAddMembers.tsx) |
-| Ban members | `CometChatBannedMembers` | [CometChatBannedMembers.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatBannedMembers/CometChatBannedMembers.tsx) |
-| Change scope | `updateGroupMemberScope()` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
-| Transfer ownership | `CometChatTransferOwnership` | [CometChatTransferOwnership.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatTransferOwnership/CometChatTransferOwnership.tsx) |
-| Group events | `CometChatGroupEvents` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx), [CometChatAddMembers.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatAddMembers/CometChatAddMembers.tsx), [CometChatBannedMembers.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatBannedMembers/CometChatBannedMembers.tsx), [CometChatTransferOwnership.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatTransferOwnership/CometChatTransferOwnership.tsx) |
-| Member management | `CometChat.GroupMembersRequestBuilder` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx), [CometChatTransferOwnership.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatTransferOwnership/CometChatTransferOwnership.tsx) |
-
----
-
-## Next Steps & Further Reading
-
-- [CometChat React UI Kit Documentation](https://www.cometchat.com/docs/ui-kit/react/overview)
-- [Sample App Repository](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app)
-- Group Management Features
-- Advanced Customization Guide
-- Member Management Documentation
-
+## Next Steps
+
+
+
+ Display and manage group lists.
+
+
+ Display and manage group member lists.
+
+
+ Browse all feature and formatter guides.
+
+
+ Full working sample application on GitHub.
+
+
\ No newline at end of file
diff --git a/ui-kit/react/guide-message-privately.mdx b/ui-kit/react/guide-message-privately.mdx
index 1d0add7ad..71d89dde6 100644
--- a/ui-kit/react/guide-message-privately.mdx
+++ b/ui-kit/react/guide-message-privately.mdx
@@ -1,51 +1,48 @@
---
title: "Message Privately"
sidebarTitle: "Message Privately"
+description: "Launch a direct 1:1 chat from a group member profile in CometChat React UI Kit."
---
-Enable users to initiate private conversations with group members directly from group chat interfaces.
+
-## Overview
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` |
+| Key components | `CometChatMessages`, `CometChatGroupMembers`, `CometChatMessageComposer`, `CometChatMessageList`, `CometChatMessageHeader` |
+| Init | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` |
+| Purpose | Launch a direct 1:1 chat from a group member profile |
+| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) |
+| Related | [All Guides](/ui-kit/react/guide-overview) |
-The Message Privately (from a Group) feature allows users to start private, one-on-one conversations with specific group members while remaining in the group context.
+
-- Allows users to start private conversations with specific group members directly from a group.
-- Enables confidential discussions, sharing sensitive information, or asking personal questions without disrupting the group conversation.
-- Your app will support initiating private messages from group contexts, allowing users to seamlessly switch between group discussions and private conversations.
+Message Privately lets users start a direct 1:1 conversation with a group member without leaving the group context. The user can return to the group after the private chat.
----
-
-## Prerequisites
-
-- React v18.2.0+
-- CometChat React UI Kit v6.1.0+
-- CometChat Chat SDK JavaScript v4.0.13+
-- Project setup with initialized CometChat credentials (App ID, Auth Key, Region)
-- TypeScript support (recommended)
-- Group chat functionality already implemented
-- User management and conversation handling already implemented
+Before starting, complete the [Getting Started](/ui-kit/react/react-js-integration) guide for your framework.
---
## Components
-| Component / Class | Role |
-|--------------------------|------|
-| **CometChatGroupMembers** | Displays group members with click handlers for private messaging |
-| **CometChatUsers** | Alternative user list component for private messaging |
-| **CometChatMessageComposer** | Input component for composing private messages |
-| **CometChatMessageList** | Displays private conversation messages |
-| **CometChatMessageHeader** | Header showing private chat information |
+| Component / Class | Role |
+|:---|:---|
+| `CometChatGroupMembers` | Displays group members with click handlers for private messaging |
+| `CometChatMessageComposer` | Input component for composing private messages |
+| `CometChatMessageList` | Displays private conversation messages |
+| `CometChatMessageHeader` | Header showing private chat information |
---
## Integration Steps
-### 1. Group Member Click Handler Setup
+### 1. Group Member Click Handler
+
+When a group member is clicked, cast them to a `User` object and initiate a private chat. The current group is saved so the user can return to it later. `CometChat.getConversation()` fetches or creates the 1:1 conversation.
_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
-```tsx
+```tsx lines
const handleGroupMemberClick = (groupMember: CometChat.GroupMember) => {
const user = groupMember as CometChat.User;
startPrivateChatFromGroup(user, currentGroup);
@@ -62,18 +59,19 @@ const startPrivateChatFromGroup = (user: CometChat.User, group: CometChat.Group)
})
.catch((error) => {
console.error("Failed to start private chat:", error);
- showErrorMessage("Unable to start private conversation");
});
}
```
---
-### 2. Group Members Component Integration
+### 2. Group Members with Private Messaging Option
+
+Add a "Message Privately" option to the group members list. The `options` prop adds a context-menu action that triggers the private chat flow when clicked.
_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
-```tsx
+```tsx lines
const GroupMembersWithPrivateMessaging = ({ group }: { group: CometChat.Group }) => {
return (
+
+ Display and manage group member lists.
+
+
+ Render real-time message threads.
+
+
+ Browse all feature and formatter guides.
+
+
+ Full working sample application on GitHub.
+
+
diff --git a/ui-kit/react/guide-new-chat.mdx b/ui-kit/react/guide-new-chat.mdx
index 54ee2e6b2..8c4fe34ef 100644
--- a/ui-kit/react/guide-new-chat.mdx
+++ b/ui-kit/react/guide-new-chat.mdx
@@ -1,51 +1,49 @@
---
title: "New Chat"
sidebarTitle: "New Chat"
+description: "Build a unified new chat entry point for starting 1:1 or group conversations in CometChat React UI Kit."
---
-Enable users to create new conversations with individual users or join existing groups in your React chat app.
+
-## Overview
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` |
+| Key components | `CometChatUsers`, `CometChatGroups`, `CometChatJoinGroup`, `CometChatSelector` |
+| Init | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` |
+| Purpose | Unified new chat entry point for starting 1:1 or group conversations |
+| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) |
+| Related | [All Guides](/ui-kit/react/guide-overview) |
-The New Chat feature allows users to initiate conversations with other users or join group conversations, providing a seamless way to start new communications.
+
-- Allows users to initiate conversations with other users or join group conversations.
-- Enables users to expand their network, join group discussions, and create new chat threads without navigating through complex menus.
-- Your app will provide an intuitive interface for users to discover and connect with other users, join groups, and start new conversations with proper navigation and state management.
+The New Chat feature lets users start conversations with other users or join group conversations from a single interface.
----
-
-## Prerequisites
-
-- React v18.2.0+
-- CometChat React UI Kit v6.1.0+
-- CometChat Chat SDK JavaScript v4.0.13+
-- Project setup with initialized CometChat credentials (App ID, Auth Key, Region)
-- TypeScript support (recommended)
-- User authentication and basic chat functionality implemented
-- User and group management components available
+Before starting, complete the [Getting Started](/ui-kit/react/react-js-integration) guide for your framework.
---
## Components
-| Component / Class | Role |
-|--------------------------|------|
-| **CometChatNewChatView** | Main container for new chat creation interface |
-| **CometChatUsers** | Displays list of available users for chat creation |
-| **CometChatGroups** | Shows available groups for joining |
-| **CometChatJoinGroup** | Handles protected group joining process |
-| **CometChatSelector** | Navigation component with new chat button |
+| Component / Class | Role |
+|:---|:---|
+| `CometChatNewChatView` | Main container for new chat creation interface |
+| `CometChatUsers` | Displays list of available users for chat creation |
+| `CometChatGroups` | Shows available groups for joining |
+| `CometChatJoinGroup` | Handles protected group joining process |
+| `CometChatSelector` | Navigation component with new chat button |
---
## Integration Steps
-### 1. New Chat State Management Setup
+### 1. New Chat State Management
+
+Track whether the new chat view is visible and which user/group was selected. When the "New Chat" button is clicked, show the view and hide any open side panels.
_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
-```tsx
+```tsx lines
const [showNewChat, setShowNewChat] = useState(false);
const [newChat, setNewChat] = useState<{
user?: CometChat.User,
@@ -58,15 +56,15 @@ const onNewChatClicked = () => {
}
```
-Manages the new chat view visibility and resets side components when opening new chat.
-
---
-### 2. New Chat View Component Integration
+### 2. Conditional Rendering
+
+Switch between the new chat view, the messages view, or an empty state depending on the current app state. `useCallback` prevents unnecessary re-renders.
_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
-```tsx
+```tsx lines
const InformationComponent = useCallback(() => {
return (
<>
@@ -81,15 +79,15 @@ const InformationComponent = useCallback(() => {
}, [activeTab, showNewChat, selectedItem, newChat, appState.goToMessageId]);
```
-Conditionally renders the new chat view or message view based on application state.
-
---
-### 3. New Chat View Implementation
+### 3. New Chat View
+
+The main new chat interface with a header, back button, and tabbed navigation between Users and Groups. Selecting a tab switches the list below.
_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
-```tsx
+```tsx lines
const CometChatNewChatView: React.FC = () => {
const [selectedTab, setSelectedTab] = useState('user');
const [group, setGroup] = useState();
@@ -101,7 +99,6 @@ const CometChatNewChatView: React.FC = () => {
return (
- {/* Header */}
{
setShowNewChat(false);
@@ -109,13 +106,11 @@ const CometChatNewChatView: React.FC = () => {
- {/* Tabs */}
= ({ selectedTab }) => {
return selectedTab === 'user' ? {
@@ -153,69 +150,13 @@ const TabContent: React.FC = ({ selectedTab }) => {
---
-## Implementation Flow
+### 5. Group Joining Logic
-- **Fetch Data / Available Users and Groups**
+Handle the join flow based on group type. Public groups are joined directly via `CometChat.joinGroup()`. Password-protected groups show a password prompt first.
_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
-```tsx
- { /* handle */ }} />
- { /* handle */ }} />
-```
-
-- **Load User/Group Data / Associated Information**
-
-_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
-
-```tsx
-const joinGroup = (e) => { /* join group logic */ }
-```
-
-- **Create Conversation / Action Handler**
-
-_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
-
-```tsx
-onItemClick={(user) => { setNewChat({ user }); }}
-onItemClick={(group) => { joinGroup(group); }}
-```
-
-- **Live Updates / State Management**
-
-_Files: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx), [appReducer.ts](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/context/appReducer.ts)_
-
-```tsx
-useEffect(() => { /* update message target */ }, [activeTab, selectedItem]);
-```
-
----
-
-## Customization Options
-
-- Override CSS styles
-- Configure tabs
-- Customize list UI
-- Add search
-- Handle group types
-- Adjust navigation
-
----
-
-## Filtering / Edge Cases
-
-- User availability
-- Group permissions
-- Duplicate chats prevention
-- Blocking logic
-- Membership checks
-- Empty states
-
----
-
-## Error Handling & State Management
-
-```tsx
+```tsx lines
const joinGroup = (e) => {
if (!e.getHasJoined()) {
if (e.getType() === CometChatUIKitConstants.GroupTypes.public) {
@@ -232,34 +173,34 @@ const joinGroup = (e) => {
---
-## Context-Specific Notes
+## Feature Matrix
-- Public vs private groups
-- Different state logic for user/group chats
-- Mobile responsiveness
-- Navigation flow control
-- Group type handling
+| Feature | Component / Method | File |
+|:---|:---|:---|
+| Open new chat view | `onNewChatClicked()` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
+| New chat interface | `CometChatNewChatView` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
+| User selection | `CometChatUsers` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
+| Group selection | `CometChatGroups` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
+| Group joining | `joinGroup()` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
+| State management | `showNewChat` state | [appReducer.ts](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/context/appReducer.ts) |
+| Chat creation | `setNewChat()` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
+| Navigation handling | `setShowNewChat(false)` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
---
-## Summary / Feature Matrix
-
-| Feature | Component / Method | File Reference |
-|---------------------|-----------------------------|----------------|
-| Open new chat view | `onNewChatClicked()` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
-| New chat interface | `CometChatNewChatView` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
-| User selection | `CometChatUsers` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
-| Group selection | `CometChatGroups` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
-| Group joining | `joinGroup()` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
-| State management | `showNewChat` state | [appReducer.ts](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/context/appReducer.ts) |
-| Chat creation | `setNewChat()` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
-| Navigation handling | `setShowNewChat(false)` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
-
----
-
-## Next Steps & Further Reading
-
-- [CometChat React UI Kit Documentation](https://www.cometchat.com/docs/ui-kit/react/overview)
-- [Sample App Repository](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app)
-- User Management Features
-- Group Management Features
+## Next Steps
+
+
+
+ Display and manage conversation lists.
+
+
+ Display and manage group lists.
+
+
+ Browse all feature and formatter guides.
+
+
+ Full working sample application on GitHub.
+
+
diff --git a/ui-kit/react/guide-overview.mdx b/ui-kit/react/guide-overview.mdx
index 10ab044fd..8a77dfc49 100644
--- a/ui-kit/react/guide-overview.mdx
+++ b/ui-kit/react/guide-overview.mdx
@@ -1,7 +1,21 @@
---
title: "Overview"
sidebarTitle: "Overview"
+description: "Index of task-oriented feature guides for the CometChat React UI Kit."
---
+
+
+
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` |
+| Purpose | Index of task-oriented feature guides for the React UI Kit |
+| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) |
+| Components | [Components Overview](/ui-kit/react/components-overview) |
+| Guides | [Block/Unblock](/ui-kit/react/guide-block-unblock-user) · [Call Log Details](/ui-kit/react/guide-call-log-details) · [Group Chat](/ui-kit/react/guide-group-chat) · [Message Privately](/ui-kit/react/guide-message-privately) · [New Chat](/ui-kit/react/guide-new-chat) · [Search Messages](/ui-kit/react/guide-search-messages) · [Threaded Messages](/ui-kit/react/guide-threaded-messages) |
+
+
+
> This page indexes focused, task‑oriented feature guides for the React UI Kit. Each guide shows how to implement a specific capability end‑to‑end using UI components.
## When to Use These Guides
@@ -24,5 +38,23 @@ Use these guides after completing the base [Getting Started](/ui-kit/react/react
| [URL Formatter](/ui-kit/react/url-formatter-guide) | Detect and style plain URLs; render them as clickable links with optional tracking logic. |
| [Shortcut Formatter](/ui-kit/react/shortcut-formatter-guide) | Provide !shortcut style expansions invoking extension APIs or dialogs before inserting content. |
-Need another guide? Open a request via our [Developer Community](http://community.cometchat.com/) or Support.
+Need another guide? Open a request via our [Support Portal](https://help.cometchat.com/hc/en-us/requests/new).
+
+---
+
+## Next Steps
+
+
+ Set up the React UI Kit
+
+
+ Explore all UI components
+
+
+ Customize themes and styling
+
+
+ Handle UI Kit events
+
+
diff --git a/ui-kit/react/guide-search-messages.mdx b/ui-kit/react/guide-search-messages.mdx
index 072126f4f..38dfd800f 100644
--- a/ui-kit/react/guide-search-messages.mdx
+++ b/ui-kit/react/guide-search-messages.mdx
@@ -1,49 +1,48 @@
---
title: "Search Messages"
sidebarTitle: "Search Messages"
+description: "Add full-text message search across conversations with result routing in CometChat React UI Kit."
---
-Enable users to search messages within conversations and group chats using CometChat's React UI Kit.
+
-## Overview
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` |
+| Key components | `CometChatSearchMessages`, `CometChatMessageList`, `CometChatMessageComposer`, `CometChatMessageHeader` |
+| Init | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` |
+| Purpose | Full-text message search across conversations with result routing and navigation |
+| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) |
+| Related | [All Guides](/ui-kit/react/guide-overview) |
-The Search Messages feature allows users to quickly locate specific messages across conversations and groups.
+
-- Provides keyword-based search for locating past messages.
-- Improves user experience by helping users find information without scrolling through long conversations.
-- Users can search messages in real-time across chats and navigate directly to relevant results.
+Search Messages lets users locate specific messages across conversations and groups using keyword search, then navigate directly to the result.
----
-
-## Prerequisites
-
-- React v18.2.0+
-- CometChat React UI Kit v6.1.0+
-- CometChat Chat SDK JavaScript v4.0.13+
-- Project setup with initialized CometChat credentials (App ID, Auth Key, Region)
-- TypeScript support (recommended)
-- Basic messaging functionality already implemented
+Before starting, complete the [Getting Started](/ui-kit/react/react-js-integration) guide for your framework.
---
## Components
-| Component / Class | Role |
-|----------------------------|------|
-| **CometChatSearchMessages** | Main container for searching messages |
-| **CometChatMessageList** | Displays filtered messages based on search results |
-| **CometChatMessageComposer** | Supports navigation after selecting a search result |
-| **CometChatMessageHeader** | Displays search context and navigation controls |
+| Component / Class | Role |
+|:---|:---|
+| `CometChatSearchMessages` | Main container for searching messages |
+| `CometChatMessageList` | Displays filtered messages based on search results |
+| `CometChatMessageComposer` | Supports navigation after selecting a search result |
+| `CometChatMessageHeader` | Displays search context and navigation controls |
---
## Integration Steps
-### 1. Search State Management Setup
+### 1. Search State Management
+
+Track the current search keyword and the message ID to scroll to. When a new search is triggered, reset `goToMessageId` so the list doesn't jump to a stale result.
_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
-```tsx
+```tsx lines
const [searchKeyword, setSearchKeyword] = useState("");
const [goToMessageId, setGoToMessageId] = useState(undefined);
@@ -55,11 +54,13 @@ const onSearch = (keyword: string) => {
---
-### 2. Search Input and Trigger
+### 2. Search Input
+
+Render the search component and wire its `onSearch` callback to update the keyword state. The placeholder text is localized.
_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
-```tsx
+```tsx lines
onSearch(keyword)}
placeholder={getLocalizedString("search_messages_placeholder")}
@@ -70,9 +71,11 @@ _File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/bl
### 3. Search Result Integration
+Pass `searchKeyword` and `goToMessageId` to `CometChatMessageList`. The list filters messages matching the keyword and highlights them. When `goToMessageId` is set, the list scrolls to that message.
+
_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
-```tsx
+```tsx lines
{
setGoToMessageId(messageId);
};
@@ -97,90 +102,31 @@ Attach `handleResultClick` to your message search result selection logic.
---
-## Implementation Flow
-
-- **Fetch Search Input**
-
-```tsx
-
+
+ The search component reference.
+
+
+ Render real-time message threads.
+
+
+ Browse all feature and formatter guides.
+
+
+ Full working sample application on GitHub.
+
+
\ No newline at end of file
diff --git a/ui-kit/react/guide-threaded-messages.mdx b/ui-kit/react/guide-threaded-messages.mdx
index 50c06c07f..d22414daa 100644
--- a/ui-kit/react/guide-threaded-messages.mdx
+++ b/ui-kit/react/guide-threaded-messages.mdx
@@ -1,49 +1,49 @@
---
title: "Threaded Messages"
sidebarTitle: "Threaded Messages"
+description: "Implement threaded message replies with parent context, reply list, and focused thread composer in CometChat React UI Kit."
---
-Enable organized threaded conversations within group chats using CometChat's React UI Kit.
+
-## Overview
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` |
+| Key components | `CometChatThreadedMessages`, `CometChatThreadHeader`, `CometChatMessageList`, `CometChatMessageComposer` |
+| Init | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` |
+| Entry point | `CometChatMessages.onThreadRepliesClick` opens thread view from group messages |
+| Sample app | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) |
+| Related | [All Guides](/ui-kit/react/guide-overview) |
-Threaded messages in group chat allow users to create organized sub-conversations by replying to specific messages.
+
-- Threaded messages in group chat allow users to create organized sub-conversations by replying to specific messages.
-- Improves group conversation organization, reduces chat clutter, and enables focused discussions.
-- Group chats display threaded conversations with clear parent-child relationships.
+Threaded messages let users create sub-conversations by replying to specific messages in group chats. This reduces clutter and keeps discussions focused.
----
-
-## Prerequisites
-
-- React v18.2.0+
-- CometChat React UI Kit v6.1.0+
-- CometChat Chat SDK JavaScript v4.0.13+
-- CometChat credentials configured (App ID, Auth Key, Region)
-- Group chat functionality implemented
+Before starting, complete the [Getting Started](/ui-kit/react/react-js-integration) guide for your framework.
---
## Components
-| Component / Class | Role |
-|:----------------------------------|:------------------------------------------------|
-| **CometChatThreadedMessages** | Main container for threaded messages |
-| **CometChatThreadHeader** | Displays parent message and controls |
-| **CometChatMessageList** | Shows messages filtered by `parentMessageId` |
-| **CometChatMessageComposer** | Input for composing threaded replies |
-| **CometChatMessages.onThreadRepliesClick** | Opens thread view from group messages |
+| Component / Class | Role |
+|:---|:---|
+| `CometChatThreadedMessages` | Main container for threaded messages |
+| `CometChatThreadHeader` | Displays parent message and controls |
+| `CometChatMessageList` | Shows messages filtered by `parentMessageId` |
+| `CometChatMessageComposer` | Input for composing threaded replies |
+| `CometChatMessages.onThreadRepliesClick` | Opens thread view from group messages |
---
## Integration Steps
-### 1. Thread State Management Setup
+### 1. Thread State Management
+
+Store the parent message that the user clicked "Reply in Thread" on. When set, update the app state to show the threaded messages side panel.
_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
-```tsx
+```tsx lines
const [threadedMessage, setThreadedMsg] = useState();
const updateThreadedMessage = (message: CometChat.BaseMessage) => {
@@ -57,9 +57,11 @@ const updateThreadedMessage = (message: CometChat.BaseMessage) => {
### 2. Thread Trigger in Group Messages
+Wire the `onThreadRepliesClick` callback on `CometChatMessages`. When a user clicks the thread reply icon on any message, this fires with the parent message object.
+
_File: [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx)_
-```tsx
+```tsx lines
{
---
-## Context Notes
-
-- Works specifically in group chats
-- Member roles affect permissions
-- Mobile responsive
-- Scales well for large groups
-
----
-
## Feature Matrix
-| Feature | Component / Method | File |
-|:--------------------|:------------------------|:---------------------------|
-| Show thread option | `onThreadRepliesClick` | [CometChatMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatMessages/CometChatMessages.tsx) |
-| Display thread msgs | `ThreadedMessageList` | [CometChatThreadedMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatDetails/CometChatThreadedMessages.tsx) |
-| Compose reply | `MessageComposer` | [CometChatThreadedMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatDetails/CometChatThreadedMessages.tsx) |
-| Thread header | `ThreadHeader` | [CometChatThreadedMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatDetails/CometChatThreadedMessages.tsx) |
-| Search in threads | `TextHighlightFormatter`| [CometChatThreadedMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatDetails/CometChatThreadedMessages.tsx) |
-| Navigate to message | `goToMessageId` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
-| Thread state | `updateThreadedMessage()` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
-| App context | `appReducer.ts` | [appReducer.ts](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/context/appReducer.ts) |
+| Feature | Component / Method | File |
+|:---|:---|:---|
+| Show thread option | `onThreadRepliesClick` | [CometChatMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatMessages/CometChatMessages.tsx) |
+| Display thread msgs | `ThreadedMessageList` | [CometChatThreadedMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatDetails/CometChatThreadedMessages.tsx) |
+| Compose reply | `MessageComposer` | [CometChatThreadedMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatDetails/CometChatThreadedMessages.tsx) |
+| Thread header | `ThreadHeader` | [CometChatThreadedMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatDetails/CometChatThreadedMessages.tsx) |
+| Search in threads | `TextHighlightFormatter` | [CometChatThreadedMessages.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatDetails/CometChatThreadedMessages.tsx) |
+| Navigate to message | `goToMessageId` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
+| Thread state | `updateThreadedMessage()` | [CometChatHome.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatHome/CometChatHome.tsx) |
+| App context | `appReducer.ts` | [appReducer.ts](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/context/appReducer.ts) |
---
## Next Steps
-- Explore [CometChat React UI Kit Docs](https://www.cometchat.com/docs/ui-kit/react/overview)
-- Check the [Sample App Repo](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app)
+
+
+ Render real-time message threads.
+
+
+ Customize the thread header component.
+
+
+ Browse all feature and formatter guides.
+
+
+ Full working sample application on GitHub.
+
+
diff --git a/ui-kit/react/incoming-call.mdx b/ui-kit/react/incoming-call.mdx
index e55f9f37f..688bf3b2c 100644
--- a/ui-kit/react/incoming-call.mdx
+++ b/ui-kit/react/incoming-call.mdx
@@ -1,30 +1,35 @@
---
title: "Incoming Call"
+description: "Display and manage incoming voice and video calls with accept/decline controls using the CometChatIncomingCall component."
---
-## Overview
-
-The `Incoming call` is a Component that serves as a visual representation when the user receives an incoming call, such as a voice call or video call, providing options to answer or decline the call.
-
-The `Incoming Call` is comprised of the following base components:
+
-| Components | Description |
-| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
-| cometchat-list-item | This component’s view consists of avatar, status indicator , title, and subtitle. The fields are then mapped with the SDK’s user, group class. |
-| cometchat-button | This component represents a button with optional icon and text. |
-| cometchat-avatar | This component component displays an image or user's avatar with fallback to the first two letters of the username. |
+| Field | Value |
+| --- | --- |
+| Purpose | Visual notification for incoming voice/video calls with accept and decline controls |
+| Package | `@cometchat/chat-uikit-react` |
+| Import | `import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";` |
+| Used in experiences | Call notification overlay, incoming call screen |
+| Copy-paste base | See [Base Code](#base-code--stylesheet) below |
+| Primary output | Call acceptance/rejection via `onAccept`, `onDecline` |
+| Primary hook points | `onAccept`, `onDecline`, `onError`, `callSettingsBuilder`, view slots (`subtitleView`, `leadingView`, `trailingView`, `titleView`, `itemView`) |
+| CSS root class | `.cometchat-incoming-call` |
+| Real-time events | `CometChatCallEvents.ccCallRejected`, `CometChatCallEvents.ccCallAccepted`, `CometChatCallEvents.ccCallEnded` |
-## Usage
+
-### Integration
+## Base Code and Stylesheet
+
+Renders an incoming call notification with accept/decline buttons. The component auto-detects incoming calls.
-
-```tsx
+
+```tsx lines
import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
import React from "react";
@@ -34,102 +39,91 @@ const IncomingCallsDemo = () => {
export default IncomingCallsDemo;
```
-
-
-```tsx
-import { IncomingCallsDemo } from "./IncomingCallsDemo";
+```tsx lines
+import IncomingCallsDemo from "./IncomingCallsDemo";
export default function App() {
return (
-
-### Actions
-
-[Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.
+Root CSS class for style overrides:
-##### 1. onAccept
+```css lines
+.cometchat-incoming-call {
+ /* overrides here */
+}
+```
-`onAccept` is triggered when you click the accept button of the `Incoming Call` component. You can override this action using the following code snippet.
+## Functionality
-
-
-```ts
-import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
+Props that control component behavior, grouped by surface area.
-const IncomingCallsDemo = () => {
- const handleOnAccept = () => {
- console.log("custom on accept action");
- };
+### Data
- return
+| Property | Type | Default | Effect | Pitfall |
+| --- | --- | --- | --- | --- |
+| `disableSoundForCalls` | `boolean` | `false` | Disables the incoming call ringtone | — |
+| `customSoundForCalls` | `string` | `undefined` | Custom sound file URL for incoming calls | — |
-
-```js
-import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
+## Actions
-const IncomingCallsDemo = () => {
- const handleOnAccept = () => {
- console.log("custom on accept action");
- };
+[Actions](/ui-kit/react/components-overview#actions) split into predefined (built-in triggers) and user-defined (callbacks).
- return
+### User-Defined Actions
-
+#### onAccept
-##### 2. onDecline
+Fires when the accept button is clicked.
-`onDecline` is triggered when you click the Decline button of the `Incoming Call` component. You can override this action using the following code snippet.
+| Detail | Value |
+| --- | --- |
+| When it fires | User clicks the accept button |
+| Payload type | `(call: CometChat.Call) => void` |
+| What devs typically do next | Custom call acceptance logic |
-
-
-```ts
+```ts lines
import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
const IncomingCallsDemo = () => {
- const handleOnDecline = () => {
- console.log("your custom on decline action");
+ const handleOnAccept = () => {
+ console.log("custom on accept action");
};
- return
+#### onDecline
+
+Fires when the decline button is clicked.
+
+| Detail | Value |
+| --- | --- |
+| When it fires | User clicks the decline button |
+| Payload type | `(call: CometChat.Call) => void` |
+| What devs typically do next | Custom call rejection logic |
-
-```js
+```ts lines
import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
const IncomingCallsDemo = () => {
const handleOnDecline = () => {
@@ -138,23 +132,20 @@ const IncomingCallsDemo = () => {
return
+#### onError
-
-
-##### 3. onError
+Fires when the component encounters an error.
-This action doesn't change the behavior of the component but rather listens for any errors that occur in the Incoming Call component.
+| Detail | Value |
+| --- | --- |
+| When it fires | Any internal error |
+| Payload type | `(error: CometChat.CometChatException) => void` |
+| What devs typically do next | Log to error tracking service |
-
-
-```ts
+```ts lines
import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
const IncomingCallsDemo = () => {
const handleOnError = (error: CometChat.CometChatException) => {
@@ -163,104 +154,43 @@ const IncomingCallsDemo = () => {
return
-
-
-```js
-import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const IncomingCallsDemo = () => {
- const handleOnError = (error) => {
- console.log("your custom on error action", error);
- };
-
- return
-
-
-
-***
+## Filters
-### Filters
+Set `CallSettingsBuilder` to customize the calling experience. Refer to [CallSettingsBuilder](/sdk/javascript/direct-call#settings).
-You can set `CallSettingsBuilder` in the Incoming Call Component to customise the calling experience. To know more about the filters available please refer to [CallSettingsBuilder](/sdk/javascript/direct-call#settings).
-
-
-
-```ts
+```ts lines
import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
const IncomingCallsDemo = () => {
const getCallSettingsBuilder = (call: CometChat.Call) => {
return new CometChatCalls.CallSettingsBuilder()
.setIsAudioOnlyCall(
call?.getType() === CometChatUIKitConstants.MessageTypes.audio
- ? true
- : false
- )
- .build();
- };
-
- return
-
-
-```js
-import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const IncomingCallsDemo = () => {
- const getCallSettingsBuilder = (call) => {
- return new CometChatCalls.CallSettingsBuilder()
- .setIsAudioOnlyCall(
- call?.getType() === CometChatUIKitConstants.MessageTypes.audio
- ? true
- : false
)
.build();
};
return
+## Events
-
-
-### Events
+### UI Events
-[Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.
+Events emitted by the IncomingCall component:
-The list of events emitted by the Incoming Call component is as follows.
+| Event | Source | When it fires |
+| --- | --- | --- |
+| `ccCallRejected` | `CometChatCallEvents` | Incoming call is rejected |
+| `ccCallAccepted` | `CometChatCallEvents` | Incoming call is accepted |
+| `ccCallEnded` | `CometChatCallEvents` | Call ends |
-| Event | Description |
-| ------------------ | ---------------------------------------------------------------------------- |
-| **ccCallRejected** | This event is triggered when the initiated call is rejected by the receiver. |
-| **ccCallAccepted** | This event is triggered when the initiated call is accepted by the receiver. |
-| **ccCallEnded** | This event is triggered when the initiated call successfully ends. |
+#### Subscribe
-
-
-```tsx
+```tsx lines
const ccCallRejected = CometChatCallEvents.ccCallRejected.subscribe(
(call: CometChat.Call) => {
//Your Code
@@ -280,432 +210,101 @@ const ccCallEnded = CometChatCallEvents.ccCallEnded.subscribe(
);
```
-
-
-
+#### Unsubscribe
-***
-
-
-
-```tsx
+```tsx lines
ccCallRejected?.unsubscribe();
-
ccCallAccepted?.unsubscribe();
-
ccCallEnded?.unsubscribe();
```
-
-
-
-
-***
-
-## Customization
-
-To fit your app's design requirements, you can customize the appearance of the Incoming Call component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.
-
-### Style
-
-Using CSS you can customize the look and feel of the component in your app like the color, size, shape, and fonts.
-
-**Example:**
-
-
- 
-
-
-
-
-```ts
-import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const IncomingCallsDemo = () => {
- return
-
-
-```js
-import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const IncomingCallsDemo = () => {
- return
-
-
-```css
-.cometchat-incoming-call {
- display: flex;
- width: 555px;
- padding: 30.833px;
- flex-direction: column;
- align-items: center;
- gap: 24.667px;
- flex-shrink: 0;
- border-radius: 18.5px;
- border: 1.542px solid #aa9ee8;
- background: #fff;
- box-shadow: 0px 18.5px 24.667px -6.167px rgba(16, 24, 40, 0.08), 0px 6.167px
- 9.25px -3.083px rgba(16, 24, 40, 0.03);
-}
-
-.cometchat-incoming-call .cometchat-list-item {
- width: 100%;
-}
-
-.cometchat-incoming-call .cometchat-incoming-call__button-group {
- justify-content: center;
-}
-
-.cometchat-incoming-call__button-decline,
-.cometchat-incoming-call__button-accept {
- background-color: white;
- border-radius: 12px;
- border: 1.5px solid #dcdcdc;
-}
-
-.cometchat-incoming-call__button-decline .cometchat-button:hover,
-.cometchat-incoming-call__button-decline .cometchat-button {
- background-color: white;
- background-color: white;
- border-radius: 12px;
- border: 1.5px solid #dcdcdc;
-}
-
-.cometchat-incoming-call__button-accept .cometchat-button:hover,
-.cometchat-incoming-call__button-accept .cometchat-button {
- background-color: #6852d6;
- color: white;
-}
-
-.cometchat-incoming-call__button-decline .cometchat-button__text {
- color: #f44649;
- font: 500 21px/120% roboto;
- font-style: normal;
-}
-
-.cometchat-incoming-call__button-accept .cometchat-button__text {
- color: #fff;
- font: 500 21px/120% roboto;
- font-style: normal;
-}
-
-.cometchat-incoming-call__button-decline .cometchat .cometchat-button::before,
-.cometchat-incoming-call__button-accept .cometchat .cometchat-button::before {
- content: url("../assets/call-decline.svg");
- width: 37px;
- height: 37px;
- flex-shrink: 0;
-}
-
-.cometchat-incoming-call__button-accept .cometchat .cometchat-button::before {
- content: url("../assets/call-accept.svg");
-}
-
-.cometchat-incoming-call__avatar,
-.cometchat-incoming-call__avatar .cometchat-avatar {
- display: flex;
- width: 123.333px;
- height: 123.333px;
- justify-content: center;
- align-items: center;
- border-radius: 24.667px;
- background: #aa9ee8;
-}
-
-.cometchat-incoming-call__avatar .cometchat-avatar__image {
- border-radius: 24.667px;
-}
-
-.cometchat-incoming-call__avatar .cometchat-avatar__text {
- color: #fff;
- text-align: center;
- font: 500 21px/120% roboto;
- font-style: normal;
-}
-
-.cometchat-incoming-call .cometchat-list-item__body {
- flex-direction: column-reverse;
- gap: 20px;
- background: #fff;
-}
-
-.cometchat-incoming-call .cometchat-list-item__body-title {
- color: #141414;
-}
-
-.cometchat-incoming-call .cometchat-list-item__title-container {
- text-align: center;
- gap: 6px;
-}
-
-.cometchat-list-item__body-subtitle {
- justify-content: center;
-}
-```
-
-
-
-
-
-### Functionality
-
-These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements.
-
-Here is a code snippet demonstrating how you can customize the functionality of the `Incoming Call` component.
-
-
-
-```ts
-import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const IncomingCallsDemo = () => {
- return (
-
-
-
-```js
-import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const IncomingCallsDemo = () => {
- return (
-
-
-
-
-Below is a list of customizations along with corresponding code snippets
-
-| Property | Description | Code |
-| ----------------- | ------------------------------------------------------------------------------------- | --------------------------------------------------- |
-| **Call** | The CometChat call object used to initialize and display the incoming call component. | `call={callObject}` |
-| **Disable sound** | Disables the sound for incoming calls. | `disableSoundForCalls={true}` |
-| **Custom sound** | Specifies a custom sound to play for incoming calls. | `customSoundForCalls='Your Custom Sound For Calls'` |
-
-***
-
-### Advanced
-
-For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component.
-
-***
-
-#### SubtitleView
-
-Property `subtitleView` is a function that renders a JSX element to display the subtitle view.
-
-
-
-```ts
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const IncomingCallsDemo = () => {
- const getSubtitleView = (call: CometChat.Call): JSX.Element => {
- /** Return custom subtitle view */
- };
-
- return
+### SDK Events (Real-Time)
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const IncomingCallsDemo = () => {
- const getSubtitleView = (call) => {
- /** Return custom subtitle view */
- };
-
- return
+Customization override points for the incoming call UI.
-
+### Slot Catalog
-#### LeadingView
+| Slot | Params | What it replaces | Section |
+| --- | --- | --- | --- |
+| `subtitleView` | `(call: CometChat.Call) => JSX.Element` | Subtitle text | Sub-section (subtitle) |
+| `leadingView` | `(call: CometChat.Call) => JSX.Element` | Avatar / left section | Sub-section (leading) |
+| `trailingView` | `(call: CometChat.Call) => JSX.Element` | Right section | Sub-section (trailing) |
+| `titleView` | `(call: CometChat.Call) => JSX.Element` | Name / title text | Sub-section (title) |
+| `itemView` | `(call: CometChat.Call) => JSX.Element` | Entire list item | Whole item |
-Property `leadingView` is a function that renders a JSX element to display the leading view.
+### leadingView
-The customized call interface is displayed below.
+Replace the avatar / left section.
-Use the following code to achieve the customization shown above.
-
-```ts
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatAvatar, CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
const IncomingCallsDemo = () => {
const getLeadingView = (call: CometChat.Call) => {
- return (
-
-
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatAvatar, CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const IncomingCallsDemo = () => {
- const getLeadingView = (call) => {
- return (
-
-
-
-```css
+
+```css lines
.cometchat-incoming-call__avatar {
display: none;
}
```
-
-
-#### TitleView
-
-Property `titleView` is a function that renders a JSX element to display the title view.
+### titleView
-The customized call interface is displayed below.
+Replace the name / title text.
-Use the following code to achieve the customization shown above.
-
-```ts
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
const IncomingCallsDemo = () => {
const getTitleView = (call: CometChat.Call) => {
- return (
-
-
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const IncomingCallsDemo = () => {
- const getTitleView = (call) => {
- return (
-
-
-
-```css
+
+```css lines
.incoming-call__title-wrapper {
display: flex;
width: 370px;
@@ -737,74 +336,39 @@ export default IncomingCallsDemo;
width: 20px;
}
```
-
-
-#### TrailingView
+### trailingView
-Property `trailingView` is a function that renders a JSX element to display the trailing view.
-
-The customized call interface is displayed below.
+Replace the right section.
-Use the following code to achieve the customization shown above.
-
-```ts
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
const IncomingCallsDemo = () => {
const getTrailingView = (call: CometChat.Call) => {
- return (
-
-
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const IncomingCallsDemo = () => {
- const getTrailingView = (call) => {
- return (
-
-
-
-```css
+
+```css lines
.incoming-call__avatar {
display: flex;
height: 62px;
@@ -826,88 +390,46 @@ export default IncomingCallsDemo;
background-size: contain;
}
```
-
-
-#### ItemView
-
-Property `itemView` is a function that renders a JSX element to display the item view.
+### itemView
-The customized call interface is displayed below.
+Replace the entire list item.
-Use the following code to achieve the customization shown above.
-
-```ts
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatAvatar, CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
const IncomingCallsDemo = () => {
const getItemView = (call: CometChat.Call) => {
- return (
-
-
-
-```js
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatAvatar, CometChatIncomingCall } from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const IncomingCallsDemo = () => {
- const getItemView = (call) => {
- return (
-
-
-
-```css
+
+```css lines
.incoming-call__itemview {
display: flex;
flex-direction: column;
@@ -927,7 +449,7 @@ export default IncomingCallsDemo;
.incoming-call__itemview .cometchat-avatar__text {
color: #FFF;
text-align: center;
- font: 700 32px Roboto
+ font: 700 32px Roboto;
}
.incoming-call__itemview-title {
@@ -941,7 +463,37 @@ export default IncomingCallsDemo;
font: 400 16px Roboto;
}
```
-
-
+
+## Theme and Styling
+
+Using CSS, customize the look and feel of the component. The root CSS class is `.cometchat-incoming-call`.
+
+
+
+
+
+```tsx lines
+
-React UI Kit provides **multi-language localization** to **adapt** the UI elements based on the user's preferred language settings. The **CometChatLocalize** class allows developers to:
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` |
+| Import | `import { CometChatLocalize } from "@cometchat/chat-uikit-react";` |
+| Set language | `CometChatLocalize.setCurrentLanguage("fr")` |
+| Init with config | `CometChatLocalize.init({ language: "es", fallbackLanguage: "en-US", disableAutoDetection: false })` |
+| Add translations | `CometChatLocalize.addTranslation({ "en-US": { "welcome_message": "Welcome!" } })` |
+| Supported languages | 19: en-US, en-GB, nl, fr, de, hi, it, ja, ko, pt, ru, es, tr, zh, zh-TW, ms, sv, lt, hu |
+| Date formatting | Use `CalendarObject` for custom date/time patterns |
+| Source | [GitHub](https://github.com/cometchat/cometchat-uikit-react/blob/v6/src/resources/CometChatLocalize/cometchat-localize.ts) |
-* **Automatically detect and apply a language** based on browser/device settings.
-* **Manually change the UI language**.
-* **Format date and time** based on localization settings.
+
-The v6 React UI Kit expands support for **multiple languages** and allows developers to define **custom translations**.\
-The localization system now includes **language JSON files**, which store translations, and an **improved CometChatLocalize class**, which handles language detection and formatting.
+The `CometChatLocalize` class manages multi-language localization for the UI Kit. It handles automatic language detection, manual language switching, custom translations, and date/time formatting.
-***
-
-### **Supported Languages**
+---
-React UI Kit currently supports **19 languages**:
+## Supported Languages
-| Language | Code |
-| ------------------------ | ------- |
-| English (United States) | `en-US` |
+| Language | Code |
+| --- | --- |
+| English (United States) | `en-US` |
| English (United Kingdom) | `en-GB` |
-| Dutch | `nl` |
-| French | `fr` |
-| German | `de` |
-| Hindi | `hi` |
-| Italian | `it` |
-| Japanese | `ja` |
-| Korean | `ko` |
-| Portuguese | `pt` |
-| Russian | `ru` |
-| Spanish | `es` |
-| Turkish | `tr` |
-| Chinese | `zh` |
-| Chinese (Traditional) | `zh-TW` |
-| Malay | `ms` |
-| Swedish | `sv` |
-| Lithuanian | `lt` |
-| Hungarian | `hu` |
-
-🔗 **View JSON files for all supported languages** in the GitHub repository:\
-➡ [Language JSON Files](https://github.com/cometchat/cometchat-uikit-react/tree/v6/src/resources/CometChatLocalize/resources)
-
-***
-
-## **CometChatLocalize**
-
-The `CometChatLocalize` class provides methods for managing localization in the UI Kit.
-
-🔗 **View full class file in the GitHub repository:**\
-➡ [CometChatLocalize](https://github.com/cometchat/cometchat-uikit-react/blob/v6/src/resources/CometChatLocalize/cometchat-localize.ts)
-
-***
-
-### **LocalizationSettings**
-
-The `LocalizationSettings` interface defines various **localization settings** for an application or component. It allows developers to configure the language, translations, time zone, and calendar formatting while providing options for automatic detection and missing key handling.
-
-| Property | Type | Description |
-| ----------------------------- | ------------------------- | --------------------------------------------------------------------------------------------------- |
-| `language` | `string` | The language code (e.g., `"en"`, `"fr"`) for the current localization. |
-| `translationsForLanguage` | `{ [key: string]: any }` | An object containing key-value pairs for translations in the current language. |
-| `disableAutoDetection` | `boolean` | Disables automatic language detection based on the browser or device settings. |
-| `fallbackLanguage` | `string` | The **fallback language code** to use if the primary language is not available. |
-| `disableDateTimeLocalization` | `boolean` | Disables localization for **date and time values**, forcing the default format. |
-| `timezone` | `string` | The **timezone** used for date and time formatting (e.g., `"America/New_York"`, `"Europe/London"`). |
-| `calendarObject` | `CalendarObject` | A **custom calendar format** using `CalendarObject` to define localized date and time formatting. |
-| `missingKeyHandler` | `(key: string) => string` | A function that **handles missing translation keys**, allowing custom error handling or fallbacks. |
-
-***
-
-**Example**
-
-```javascript
+| Dutch | `nl` |
+| French | `fr` |
+| German | `de` |
+| Hindi | `hi` |
+| Italian | `it` |
+| Japanese | `ja` |
+| Korean | `ko` |
+| Portuguese | `pt` |
+| Russian | `ru` |
+| Spanish | `es` |
+| Turkish | `tr` |
+| Chinese | `zh` |
+| Chinese (Traditional) | `zh-TW` |
+| Malay | `ms` |
+| Swedish | `sv` |
+| Lithuanian | `lt` |
+| Hungarian | `hu` |
+
+[Language JSON files on GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/src/resources/CometChatLocalize/resources)
+
+---
+
+## LocalizationSettings
+
+Configuration interface for `CometChatLocalize.init()`.
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `language` | `string` | Language code (e.g., `"en"`, `"fr"`) for the current localization |
+| `translationsForLanguage` | `{ [key: string]: any }` | Key-value pairs for translations in the current language |
+| `disableAutoDetection` | `boolean` | Disables automatic language detection based on browser/device settings |
+| `fallbackLanguage` | `string` | Fallback language code if the primary language is not available |
+| `disableDateTimeLocalization` | `boolean` | Disables localization for date and time values, forcing the default format |
+| `timezone` | `string` | Timezone for date and time formatting (e.g., `"America/New_York"`, `"Europe/London"`) |
+| `calendarObject` | `CalendarObject` | Custom calendar format for localized date and time formatting |
+| `missingKeyHandler` | `(key: string) => void` | Handles missing translation keys with custom error handling or fallbacks |
+
+
+```javascript lines
import { CometChatLocalize } from "@cometchat/chat-uikit-react";
import { CalendarObject } from "./CalendarObject";
CometChatLocalize.init({
- language: "es", // Default language set to Spanish
- fallbackLanguage: "en-US", // Use English if the preferred language is not available
+ language: "es",
+ fallbackLanguage: "en-US",
translationsForLanguage: {
"es": {
"welcome_message": "¡Bienvenido a CometChat!",
@@ -92,9 +84,9 @@ CometChatLocalize.init({
"logout_message": "Vous vous êtes déconnecté avec succès."
}
},
- disableAutoDetection: false, // Allow automatic detection of browser/device language
- disableDateTimeLocalization: false, // Enable localization for date and time
- timezone: "Europe/Madrid", // Set time zone for date and time formatting
+ disableAutoDetection: false,
+ disableDateTimeLocalization: false,
+ timezone: "Europe/Madrid",
calendarObject: new CalendarObject({
today: "[Hoy a las] hh:mm A",
yesterday: "[Ayer a las] hh:mm A",
@@ -107,83 +99,62 @@ CometChatLocalize.init({
hours: "%d horas atrás",
}
}),
- missingKeyHandler: (key) => `🔍 Missing translation for: ${key}`, // Custom handler for missing translations
+ missingKeyHandler: (key) => `Missing translation for: ${key}`,
});
```
-***
+---
-### **CalendarObject**
+## CalendarObject
-The `CalendarObject` class defines customizable formatting for date and time representation. It allows you to format dates based on whether they are today, yesterday, last week, or other days. It also supports relative time formatting for minutes and hours.
+Defines customizable formatting for date and time representation. Supports relative time formatting for minutes and hours.
-Notice
-
-Changing this format will **globally update** the date and time representation wherever it is used in the component.\
-However, if a **component-specific** `CalendarObject` is provided, it will take **higher precedence** over the global settings.
-
+Changing this format globally updates the date and time representation wherever it is used. If a component-specific `CalendarObject` is provided, it takes higher precedence over the global settings.
-| Property | Type | Description |
-| ---------------------- | -------- | ----------------------------------------------------------------------------------------------- |
-| `today` | `string` | Custom formatting for dates that fall on the same day. Example: `"Today at hh:mm A"` |
-| `yesterday` | `string` | Custom formatting for dates that fall on the previous day. Example: `"Yesterday at hh:mm A"` |
-| `lastWeek` | `string` | Custom formatting for dates within the last 7 days. Example: `"Last week on dddd"` |
-| `otherDays` | `string` | Custom formatting for dates that do not fit other categories. Example: `"DD MMM YYYY, hh:mm A"` |
-| `relativeTime` | `object` | Custom formatting for relative time expressions (e.g., "2 hours ago"). |
-| `relativeTime.minute` | `string` | Formatting for a single minute. Example: `"%d minute ago"` |
-| `relativeTime.minutes` | `string` | Formatting for multiple minutes. Example: `"%d minutes ago"` |
-| `relativeTime.hour` | `string` | Formatting for a single hour. Example: `"%d hour ago"` |
-| `relativeTime.hours` | `string` | Formatting for multiple hours. Example: `"%d hours ago"` |
-
-***
-
-**Example**
-
-```javascript
-import { CometChatLocalize } from "@cometchat/chat-uikit-react";
-import { CalendarObject } from "./CalendarObject";
-
+| Property | Type | Description |
+| --- | --- | --- |
+| `today` | `string` | Format for dates on the same day. Example: `"Today at hh:mm A"` |
+| `yesterday` | `string` | Format for dates on the previous day. Example: `"Yesterday at hh:mm A"` |
+| `lastWeek` | `string` | Format for dates within the last 7 days. Example: `"Last week on dddd"` |
+| `otherDays` | `string` | Format for dates that do not fit other categories. Example: `"DD MMM YYYY, hh:mm A"` |
+| `relativeTime` | `object` | Custom formatting for relative time expressions |
+| `relativeTime.minute` | `string` | Single minute format. Example: `"%d minute ago"` |
+| `relativeTime.minutes` | `string` | Multiple minutes format. Example: `"%d minutes ago"` |
+| `relativeTime.hour` | `string` | Single hour format. Example: `"%d hour ago"` |
+| `relativeTime.hours` | `string` | Multiple hours format. Example: `"%d hours ago"` |
+
+```javascript lines
new CalendarObject({
- today: "[Hoy a las] hh:mm A",
- yesterday: "[Ayer a las] hh:mm A",
- lastWeek: "[Última semana el] dddd",
- otherDays: "DD MMM YYYY, hh:mm A",
- relativeTime: {
- minute: "%d minuto atrás",
- minutes: "%d minutos atrás",
- hour: "%d hora atrás",
- hours: "%d horas atrás",
- }
- })
+ today: "[Hoy a las] hh:mm A",
+ yesterday: "[Ayer a las] hh:mm A",
+ lastWeek: "[Última semana el] dddd",
+ otherDays: "DD MMM YYYY, hh:mm A",
+ relativeTime: {
+ minute: "%d minuto atrás",
+ minutes: "%d minutos atrás",
+ hour: "%d hora atrás",
+ hours: "%d horas atrás",
+ }
+})
```
-***
+---
-### **Component Guide**
+## Component Guide
-Note
-
-The translation configurations mentioned in this section are to be defined inside the
-ComeChat's init() method callback.
+The translation configurations in this section are to be defined inside the [CometChat's init() method callback](/ui-kit/react/react-js-integration#step-3:-initialize-cometchat-ui-kit).
-#### Report Message
+### Report Message
-To add translations for any flag reason, a key in the form of `flag_message_reason_id_{reason_id}` is to be defined with the translated strings to be displayed for that `reason_id` in the UI. The translations for `flag_message_reason_id_spam`, `flag_message_reason_id_sexual`, `flag_message_reason_id_harassment` are present by default.
+To add translations for any flag reason, define a key in the form `flag_message_reason_id_{reason_id}` with the translated strings. Translations for `flag_message_reason_id_spam`, `flag_message_reason_id_sexual`, `flag_message_reason_id_harassment` are present by default. The reason name is displayed when the required translation is not found.
-**Usage**
-* Define translations for custom flag message reasons.
-* The reason name would be displayed when the required translation is not found.
-
-**Example**
-
-```javascript
+```javascript lines
import { CometChatLocalize } from "@cometchat/chat-uikit-react";
-// Add translations for flag reason keys for the required languages
CometChatLocalize.addTranslation({
"en-GB": {
"flag_message_reason_id_dislike": "I just don't like it",
@@ -194,20 +165,13 @@ CometChatLocalize.addTranslation({
});
```
-#### Mention All
-
-To add translations for a custom `mentionAllLabel`, a key in the form of `message_composer_mention_{label}` is to be defined with the translated strings to be displayed for that label in the UI. The translations for `message_composer_mention_all` is present by default.
-
-**Usage**
-* Define translations for custom mentionAllLabel.
-* Helps customize the `@all` label used in the app while mentioning all group members.
+### Mention All
-**Example**
+To add translations for a custom `mentionAllLabel`, define a key in the form `message_composer_mention_{label}`. The translation for `message_composer_mention_all` is present by default.
-```javascript
+```javascript lines
import { CometChatLocalize } from "@cometchat/chat-uikit-react";
-// Add translations for mentionAllLabel for the required languages
CometChatLocalize.addTranslation({
"en-GB": {
"message_composer_mention_channel": "channel",
@@ -218,169 +182,131 @@ CometChatLocalize.addTranslation({
});
```
-***
-
-### **Methods**
-
-#### Initialize CometChatLocalize
-
-This method initializes the localization system with default values and optional configurations.
+---
-**Usage**
+## Methods
-* Set the default language, timezone, and fallback settings.
-* Define a custom calendar format if required.
-* Customize how missing keys are handled.
+### init
-**Example**
+Initializes the localization system with default values and optional configurations.
-```javascript
+```javascript lines
import { CometChatLocalize } from "@cometchat/chat-uikit-react";
-// Initialize localization settings
CometChatLocalize.init({
- language: "es", // Default language: Spanish
- fallbackLanguage: "en-US", // Fallback if translation is missing
- disableAutoDetection: false, // Enable browser language detection
+ language: "es",
+ fallbackLanguage: "en-US",
+ disableAutoDetection: false,
timezone: "Europe/Madrid",
missingKeyHandler: (key) => `Missing translation: ${key}`,
});
```
-***
-
-#### Get Browser Language
+### getBrowserLanguage
-This method detects the language set in the user's browser or device settings.
+Detects the language set in the user's browser or device settings.
-**Usage**
-
-* Automatically set the app’s language based on the user’s browser settings.
-* Helps in making the UI multilingual without requiring user input.
-
-**Example**
-
-```javascript
+```javascript lines
const userLang = CometChatLocalize.getBrowserLanguage();
console.log(userLang);
```
-***
-
-#### Get Localized String
+### getLocalizedString
-This method fetches localized text based on the current language.
+Fetches localized text based on the current language.
-**Usage**
-
-* Retrieve translations dynamically without hardcoding values in multiple languages.
-* Useful for UI elements, buttons, alerts, and system messages.
-
-**Example**
-
-```javascript
+```javascript lines
const translatedText = CometChatLocalize.getLocalizedString("welcome_message");
```
-***
-
-#### Get Current Language
-
-This method returns the currently set language for the UI Kit.
+### getCurrentLanguage
-**Usage**
+Returns the currently set language for the UI Kit.
-* Useful to debug and display the currently active language.
-* Helps when dynamically switching between languages.
-
-**Example**
-
-```javascript
+```javascript lines
console.log(CometChatLocalize.getCurrentLanguage());
```
-***
-
-#### Get Default Language
-
-This method returns the system-preferred language.
+### getDefaultLanguage
-**Usage**
+Returns the system-preferred language. If `disableAutoDetection` is enabled, returns the fallback language. Otherwise returns the browser's preferred language.
-* If disableAutoDetection is enabled, the method returns the fallback language.
-* If auto-detection is enabled, it returns the browser's preferred language.
-
-**Example**
-
-```javascript
+```javascript lines
console.log(CometChatLocalize.getDefaultLanguage());
```
-***
-
-#### Set Current Language
-
-This method updates the language at runtime without reloading the application.
-
-**Usage**
+### setCurrentLanguage
-* Allow users to change the language via a settings menu.
-* Ensure that UI elements are updated instantly after changing the language.
+Updates the language at runtime without reloading the application.
-**Example**
-
-```javascript
+```javascript lines
CometChatLocalize.setCurrentLanguage("fr");
```
-***
+### addTranslation
+
+Adds custom translations to the existing ones dynamically. New translations are merged into the existing localization data.
-#### Add Custom Translations
+```javascript lines
+CometChatLocalize.addTranslation({
+ "en-US": { "welcome_message": "Welcome to CometChat!" }
+});
+```
-This method allows you to add custom translations to the existing ones dynamically. It ensures that new translations are merged into the existing localization data.
+### formatDate
-**Usage**
+Formats a Unix timestamp (seconds) based on a `CalendarObject` configuration. Uses the timezone set via `init()`.
-* You can define custom translation keys and override the existing translations.
-* You can add new languages to the existing translations.
-* Useful when you want to support additional words or phrases not present in the default language files.
+| Parameter | Type | Description |
+| --- | --- | --- |
+| `timestamp` | `number` | Unix timestamp in seconds |
+| `calendarObject` | `CalendarObject` | Calendar configuration for formatting |
-**Example**
+Returns a formatted date `string`.
-```javascript
-CometChatLocalize.addTranslation({
- "en-US": { "welcome_message": "Welcome to CometChat!" }
-});
+```javascript lines
+import { CometChatLocalize } from "@cometchat/chat-uikit-react";
+import { CalendarObject } from "@cometchat/chat-uikit-react";
+
+const formatted = CometChatLocalize.formatDate(1700000000, new CalendarObject({
+ today: "hh:mm A",
+ yesterday: "[Yesterday]",
+ lastWeek: "dddd",
+ otherDays: "DD MMM YYYY, hh:mm A"
+}));
```
-***
+### getDateLocaleLanguage
+
+Returns the language code used for date localization. If `disableDateTimeLocalization` is `true`, returns `"en-US"`. Otherwise returns the current language.
-#### **Customisation**
+```javascript lines
+const dateLang = CometChatLocalize.getDateLocaleLanguage();
+```
-CometChat UI Kit provides **flexible customization options** for date/time format. Users can configure **global settings** using `CometChatLocalize.init()` or pass a `CalendarObject` directly to individual components for **component-specific** customization.
+---
-* **Global Configuration:** When settings are provided in `CometChatLocalize.init()`, all UI components will automatically use the configured date/time formats.
-* **Component-Specific Configuration:** If a `CalendarObject` is passed to a component, it **overrides** the global settings and applies only to that specific instance.
+## Customization
-**Global Configuration Example**
+### Global Configuration
-To apply a **custom date format** globally across the whole UI Kit.
+Apply a custom date format globally across the whole UI Kit via `CometChatLocalize.init()`:
-```php
+```javascript lines
CometChatLocalize.init({
- calendarObject:new CalendarObject({
- today: " hh:mm A",
- yesterday: "[Yesterday],
+ calendarObject: new CalendarObject({
+ today: "hh:mm A",
+ yesterday: "[Yesterday]",
otherDays: "DD MMM YYYY, hh:mm A"
})
});
```
-**Component-Specific Customization Example**
+### Component-Specific Configuration
-To apply a **custom date format** only within a specific component.
+Apply a custom date format only within a specific component. Component-level `CalendarObject` overrides the global settings.
-```csharp
+```tsx lines
+
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` |
+| Key class | `CometChatMentionsFormatter` (extends `CometChatTextFormatter`) |
+| Init | `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.
@@ -20,7 +35,7 @@ To integrate the `CometChatMentionsFormatter` class into your application:
1. **Initialization**: Create an instance of the `CometChatMentionsFormatter` class and configure it with desired settings, such as mention text styles and limit settings.
-```javascript
+```javascript lines
import { CometChatMentionsFormatter } from "path-to-your-file";
// Initialize the formatter
@@ -48,3 +63,22 @@ mentionsFormatter.setCometChatUserGroupMembers(userList);
The `formattedMessage` now contains HTML with styled mentions, ready to be inserted into your message component for display.
Below is an example demonstrating how to use the `CometChatMentionsFormatter` class in components such as [CometChatConversations](/ui-kit/react/conversations), [CometChatMessageList](/ui-kit/react/message-list), [CometChatMessageComposer](/ui-kit/react/message-composer).
+
+## Next Steps
+
+
+
+ Build custom inline text patterns.
+
+
+ Render real-time message threads.
+
+
+ Browse all feature and formatter guides.
+
+
+ Full working sample application on GitHub.
+
+
+
+***
diff --git a/ui-kit/react/message-composer.mdx b/ui-kit/react/message-composer.mdx
index 67249e000..cf57797d8 100644
--- a/ui-kit/react/message-composer.mdx
+++ b/ui-kit/react/message-composer.mdx
@@ -1,26 +1,35 @@
---
title: "Message Composer"
+description: "CometChatMessageComposer component provides a rich text input for composing and sending messages including text, media, attachments, reactions, mentions, and voice notes. Supports custom actions, AI features, and CSS styling."
---
-## Overview
-
-MessageComposer is a Component that enables users to write and send a variety of messages, including text, image, video, and custom messages.
-
-Features such as **Attachments**, and **Message Editing** are also supported by it.
-
-## Usage
+
+
+| Field | Value |
+| --- | --- |
+| Purpose | Rich text input for composing and sending text, media, attachments, mentions, voice notes, and custom messages in user or group conversations |
+| Package | `@cometchat/chat-uikit-react` |
+| Import | `import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";` |
+| Used in experiences | Chat view, threaded conversations, message reply panel |
+| Copy-paste base | See [Base Code](#base-code--stylesheet) below |
+| Primary output | Sent messages via `onSendButtonClick`, text changes via `onTextChange` |
+| Primary hook points | `onSendButtonClick`, `onError`, `onTextChange`, view slots (`attachmentOptions`, `auxiliaryButtonView`, `sendButtonView`, `headerView`, `textFormatters`) |
+| CSS root class | `.cometchat-message-composer` |
+| Real-time events | `CometChatMessageEvents.ccMessageSent`, `CometChatMessageEvents.ccMessageEdited`, `CometChatMessageEvents.ccReplyToMessage` |
-### Integration
+
-The following code snippet illustrates how you can directly incorporate the MessageComposer component into your app.
+## Base Code and Stylesheet
+
+Renders a rich text input with attachment, emoji, voice recording, and send controls for a user or group conversation.
-```tsx
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
@@ -40,39 +49,102 @@ export function MessageComposerDemo() {
) : null;
}
```
-
-
-```tsx
+```tsx lines
import { MessageComposerDemo } from "./MessageComposerDemo";
export default function App() {
return (
-
-### Actions
+Root CSS class for style overrides:
-[Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.
+```css lines
+.cometchat-message-composer {
+ /* overrides here */
+}
+```
-##### 1. OnSendButtonClick
+## Functionality
-The `OnSendButtonClick` event gets activated when the send message button is clicked. It has a predefined function of sending messages entered in the composer `EditText`. However, you can overide this action with the following code snippet.
+Props that control component behavior, grouped by surface area.
-
-
-```tsx
+### Data
+
+| Property | Type | Default | Effect | Pitfall |
+| --- | --- | --- | --- | --- |
+| `user` | `CometChat.User` | `undefined` | Sets the recipient user for the composer | Pass either `user` or `group`, not both |
+| `group` | `CometChat.Group` | `undefined` | Sets the recipient group for the composer | Pass either `user` or `group`, not both |
+| `parentMessageId` | `number` | `undefined` | Targets a thread; messages sent as replies to this parent | — |
+| `initialComposerText` | `string` | `""` | Pre-fills the text input when the component mounts | — |
+
+### UI Visibility Toggles
+
+| Property | Type | Default | Effect | Pitfall |
+| --- | --- | --- | --- | --- |
+| `hideImageAttachmentOption` | `boolean` | `false` | Hides the image attachment option | — |
+| `hideVideoAttachmentOption` | `boolean` | `false` | Hides the video attachment option | — |
+| `hideAudioAttachmentOption` | `boolean` | `false` | Hides the audio attachment option | — |
+| `hideFileAttachmentOption` | `boolean` | `false` | Hides the file attachment option | — |
+| `hidePollsOption` | `boolean` | `false` | Hides the polls option | — |
+| `hideCollaborativeDocumentOption` | `boolean` | `false` | Hides the collaborative document option | — |
+| `hideCollaborativeWhiteboardOption` | `boolean` | `false` | Hides the collaborative whiteboard option | — |
+| `hideAttachmentButton` | `boolean` | `false` | Hides the entire attachment button | — |
+| `hideVoiceRecordingButton` | `boolean` | `false` | Hides the voice recording button | — |
+| `hideEmojiKeyboardButton` | `boolean` | `false` | Hides the emoji keyboard button | — |
+| `hideStickersButton` | `boolean` | `false` | Hides the stickers button | — |
+| `hideSendButton` | `boolean` | `false` | Hides the send button | — |
+| `showScrollbar` | `boolean` | `false` | Shows the scrollbar in the composer input | — |
+
+### Behavior
+
+| Property | Type | Default | Effect | Pitfall |
+| --- | --- | --- | --- | --- |
+| `disableTypingEvents` | `boolean` | `false` | Disables the typing indicator for this composer | — |
+| `disableMentions` | `boolean` | `false` | Disables the mentions functionality | — |
+| `disableMentionAll` | `boolean` | `false` | Controls whether group mentions like @all appear in suggestions | — |
+| `mentionAllLabel` | `string` | `"all"` | Custom alias label for group mentions (@channel, @everyone, etc.) | — |
+| `enterKeyBehavior` | `EnterKeyBehavior` | `EnterKeyBehavior.SendMessage` | Determines Enter key behavior (send message or add new line) | — |
+| `disableSoundForMessage` | `boolean` | `false` | Disables sound for outgoing messages | — |
+| `customSoundForMessage` | `string` | `undefined` | Custom audio sound URL for outgoing messages | — |
+| `placeholderText` | `string` | `""` | Placeholder text displayed in the message input field when empty | — |
+
+### Mentions
+
+| Property | Type | Default | Effect | Pitfall |
+| --- | --- | --- | --- | --- |
+| `mentionsUsersRequestBuilder` | `CometChat.UsersRequestBuilder` | SDK default | Custom builder to control how mentioned users are fetched | — |
+| `mentionsGroupMembersRequestBuilder` | `CometChat.GroupMembersRequestBuilder` | SDK default | Custom builder to control how mentioned group members are fetched | — |
+
+## Actions
+
+[Actions](/ui-kit/react/components-overview#actions) split into predefined (built-in triggers) and user-defined (callbacks).
+
+### Predefined Actions
+
+The send button has a built-in action that sends the composed message. Override it with `onSendButtonClick`.
+
+### User-Defined Actions
+
+#### onSendButtonClick
+
+Fires when the send button is clicked. Overrides the default send behavior.
+
+| Detail | Value |
+| --- | --- |
+| When it fires | User clicks the send button |
+| Payload type | `(message: CometChat.BaseMessage) => void` |
+| What devs typically do next | Custom send logic, message preprocessing |
+
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
@@ -98,17 +170,17 @@ export function MessageComposerDemo() {
}
```
-
+#### onError
-
+Fires when the component encounters an error.
-##### 2. onError
+| Detail | Value |
+| --- | --- |
+| When it fires | Any internal error during rendering or message sending |
+| Payload type | `(error: CometChat.CometChatException) => void` |
+| What devs typically do next | Log to error tracking service |
-This action doesn't change the behavior of the component but rather listens for any errors that occur in the MessageList component.
-
-
-
-```tsx
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
@@ -134,17 +206,17 @@ export function MessageComposerDemo() {
}
```
-
-
-
+#### onTextChange
-##### 3. onTextChange
+Fires as the user types in the composer input.
-This event is triggered as the user starts typing in the Message Composer.
+| Detail | Value |
+| --- | --- |
+| When it fires | Text content changes in the input |
+| Payload type | `(text: string) => void` |
+| What devs typically do next | Track input state, trigger custom suggestions |
-
-
-```tsx
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
@@ -173,95 +245,25 @@ export function MessageComposerDemo() {
}
```
-
+## Filters
-
+The MessageComposer component does not have any exposed filters. It provides a text input and attachment interface and does not fetch paginated lists.
-##### 4. Custom Mentions Request Builders
+## Events
-You can customize how mentioned users and group members are fetched by providing custom request builders.
+### UI Events
-
-
-```tsx
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
+Events emitted by the MessageComposer component:
-export function MessageComposerDemo() {
- const [chatUser, setChatUser] = React.useState();
- const [chatGroup, setChatGroup] = React.useState();
+| Event | Source | When it fires |
+| --- | --- | --- |
+| `ccMessageSent` | `CometChatMessageEvents` | A message is sent (inProgress, success, error) |
+| `ccMessageEdited` | `CometChatMessageEvents` | A message is edited (inProgress, success, error) |
+| `ccReplyToMessage` | `CometChatMessageEvents` | User replies to a message |
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
- }, []);
-
- // Custom Users Request Builder for mentions
- const mentionsUsersRequestBuilder = new CometChat.UsersRequestBuilder()
- .setLimit(10)
- .setSearchKeyword("")
- .setRoles(["default", "moderator"]);
-
- // Custom Group Members Request Builder for group mentions
- const mentionsGroupMembersRequestBuilder = new CometChat.GroupMembersRequestBuilder("guid")
- .setLimit(15)
- .setSearchKeyword("")
- .setScopes(["admin", "moderator", "participant"]);
-
- return chatUser ? (
-
-
-
-
-***
-
-### Filters
-
-MessageComposer component does not have any available filters.
-
-***
+#### Subscribe
-### Events
-
-[Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.
-
-The list of events emitted by the Messages component is as follows.
-
-| Event | Description |
-| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| **ccMessageEdited** | Triggers whenever a loggedIn user edits any message from the list of messages .it will have three states such as: inProgress, success and error. |
-| **ccReplyToMessage** | Triggers whenever a loggedIn user replies to any message from the list of messages .it will have three states such as: inProgress, success and error. |
-| **ccMessageSent** | Triggers whenever a loggedIn user sends any message, it will have three states such as: inProgress, success and error. |
-
-Adding `CometChatMessageEvents` Listener's
-
-
-
-```js
+```js lines
import { CometChatMessageEvents } from "@cometchat/chat-uikit-react";
const ccMessageEdited = CometChatMessageEvents.ccMessageEdited.subscribe(() => {
@@ -277,153 +279,49 @@ const ccMessageSent = CometChatMessageEvents.ccMessageSent.subscribe(() => {
});
```
-
-
-
+#### Unsubscribe
-***
-
-Removing `CometChatMessageEvents` Listener's
-
-
-
-```js
+```js lines
ccMessageEdited?.unsubscribe();
ccReplyToMessage?.unsubscribe();
ccMessageSent?.unsubscribe();
```
-
+### SDK Events (Real-Time)
-
+The component internally listens to SDK events for real-time updates. No manual attachment needed.
-***
+## Advanced: Custom View Slots
-## Customization
+Customization override points for the message composer UI.
-To fit your app's design requirements, you can customize the appearance of the MessageComposer component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.
+### Slot Catalog
-### Style
+| Slot | Params | What it replaces | Section |
+| --- | --- | --- | --- |
+| `attachmentOptions` | `CometChatMessageComposerAction[]` | Default attachment options list | Attachment menu |
+| `auxiliaryButtonView` | `JSX.Element` | Sticker and AI button area | Sub-section (auxiliary) |
+| `sendButtonView` | `JSX.Element` | Send button | Sub-section (send) |
+| `headerView` | `JSX.Element` | Area above the composer input | Whole section |
+| `textFormatters` | `CometChatTextFormatter[]` | Text formatting in the input | Text content |
-To modify the styling, you can customise the css of MessageComposer Component.
+### attachmentOptions
-**Example**
-
-
- 
-
-
-
-
-```tsx
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
-
-
-
-
-```css
-.cometchat-message-composer .cometchat-message-composer__input {
- font-family: "SF Pro";
-}
-
-.cometchat-message-composer .cometchat-button .cometchat-button__icon {
- background: #f19fa1;
-}
-
-.cometchat-message-composer .cometchat-message-composer__send-button {
- background: #e5484d;
-}
-```
-
-
-
-
-
-***
-
-### Functionality
-
-These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements.
-
-
-
-```tsx
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
-
-
-
-
-
-Below is a list of customizations along with corresponding code snippets
-
-| Property | Description | Code |
-| --------------------------------- | --------------------------------------------------------------------------------------- | ------------------------------------------------- |
-| **Initial Composer Text** | The initial text pre-filled in the message input when the component mounts. | `initialComposerText="Hello"` |
-| **Disable Typing Events** | Disables the typing indicator for the current message composer. | `disableTypingEvents={true}` |
-| **Disable Mentions** | Disables the mentions functionality in the message composer. | `disableMentions={true}` |
-| **Disable Mention All** | Controls whether group mentions like @all appear in suggestions. | `disableMentionAll={true}` |
-| **Mention All Label** | Allows setting a custom alias label for group mentions (@channel, @everyone, etc.). | `mentionAllLabel="all"` |
-| **Mentions Users Request Builder** | Provides a custom UsersRequestBuilder to control how the mentioned users list is fetched. | `mentionsUsersRequestBuilder={usersRequestBuilder}` |
-| **Mentions Group Members Request Builder** | Provides a custom GroupMembersRequestBuilder to customize how mentioned group members are retrieved. | `mentionsGroupMembersRequestBuilder={groupMembersRequestBuilder}` |
-| **Hide Image Attachment Option** | Hides the image attachment option in the message composer. | `hideImageAttachmentOption={true}` |
-| **Hide Video Attachment Option** | Hides the video attachment option in the message composer. | `hideVideoAttachmentOption={true}` |
-| **Hide Audio Attachment Option** | Hides the audio attachment option in the message composer. | `hideAudioAttachmentOption={true}` |
-| **Hide File Attachment Option** | Hides the file attachment option in the message composer. | `hideFileAttachmentOption={true}` |
-| **Hide Polls Option** | Hides the polls option in the message composer. | `hidePollsOption={true}` |
-| **Hide Collaborative Document** | Hides the collaborative document option in the message composer. | `hideCollaborativeDocumentOption={true}` |
-| **Hide Collaborative Whiteboard** | Hides the collaborative whiteboard option in the message composer. | `hideCollaborativeWhiteboardOption={true}` |
-| **Hide Attachment Button** | Hides the attachment button in the message composer. | `hideAttachmentButton={true}` |
-| **Hide Voice Recording Button** | Hides the voice recording button in the message composer. | `hideVoiceRecordingButton={true}` |
-| **Hide Emoji Keyboard Button** | Hides the emoji keyboard button in the message composer. | `hideEmojiKeyboardButton={true}` |
-| **Hide Stickers Button** | Hides the stickers button in the message composer. | `hideStickersButton={true}` |
-| **Hide Send Button** | Hides the send button in the message composer. | `hideSendButton={true}` |
-| **Show Scrollbar** | Controls the visibility of the scrollbar in the composer. | `showScrollbar={true}` |
-| **User** | Specifies the recipient of the message (user object). | `user={chatUser}` |
-| **Group** | Specifies the group to send messages to. Used if the `user` prop is not provided. | `group={chatGroup}` |
-| **Parent Message ID** | Specifies the ID of the parent message for threading or replying to a specific message. | `parentMessageId={12345}` |
-| **Enter Key Behavior** | Determines the behavior of the Enter key (e.g., send message or add a new line). | `enterKeyBehavior={EnterKeyBehavior.SendMessage}` |
-| **Disable Sound for Message** | Disables sound for incoming messages. | `disableSoundForMessage={true}` |
-| **Custom Sound for Message** | Specifies a custom audio sound for incoming messages. | `customSoundForMessage="sound.mp3"` |
-
-***
-
-### Advanced
-
-For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component.
-
-***
-
-#### AttachmentOptions
-
-By using `attachmentOptions`, you can set a list of custom `MessageComposerActions` for the MessageComposer Component. This will override the existing list of `MessageComposerActions`.
-
-Shown below is the default chat interface.
+Override the default attachment options with a custom list of `CometChatMessageComposerAction` items.
-The customized chat interface is displayed below.
+or
-Use the following code to achieve the customization shown above.
-
-
-```tsx
+
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
@@ -461,11 +359,9 @@ function getAttachments() {
user={userObj}
/>;
```
-
-
-
-```css
+
+```css lines
.cometchat-message-composer__secondary-button-view-attachment-button
.cometchat-action-sheet {
border: none;
@@ -491,41 +387,26 @@ function getAttachments() {
background: #141414;
}
```
-
-
-***
+### auxiliaryButtonView
-#### AuxiliaryButtonView
-
-You can insert a custom view into the MessageComposer component to add additional functionality using the following method.
-
-Please note that the MessageComposer Component utilizes the AuxiliaryButton to provide sticker and AI functionality. Overriding the AuxiliaryButton will subsequently replace the sticker functionality.
-
-Shown below is the default chat interface.
+Replace the sticker and AI button area. Overriding this replaces the sticker functionality.
-The customized chat interface is displayed below.
-
-Use the following code to achieve the customization shown above.
-
-
-
-```tsx
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
CometChatMessageComposer,
- IconStyle,
CometChatButton,
} from "@cometchat/chat-uikit-react";
@@ -544,33 +425,21 @@ const auxiliaryButtonView = (
/>;
```
-
-
-
-
-***
-
-#### SendButtonView
-
-You can set a custom view in place of the already existing send button view.
+### sendButtonView
-Shown below is the default chat interface.
+Replace the send button with a custom view.
-The customized chat interface is displayed below.
-
-Use the following code to achieve the customization shown above.
-
-
-```tsx
+
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
@@ -589,11 +458,9 @@ const sendButtonView = (
-
-
-```css
+
+```css lines
.cometchat-message-composer
div:not([class])
.message-composer__send-button
@@ -608,34 +475,24 @@ const sendButtonView = (
background: #6852d6;
}
```
-
-
-***
-
-#### HeaderView
-
-You can set custom headerView to the MessageComposer component using the following method.
+### headerView
-Shown below is the default chat interface.
+Custom view above the composer input.
-The customized chat interface is displayed below.
-
-Use the following code to achieve the customization shown above.
-
-
-```tsx
+
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
@@ -653,11 +510,9 @@ const getHeaderView = () => {
-
-
-```css
+
+```css lines
.cometchat-message-composer .message-composer__header-view {
display: flex;
align-items: center;
@@ -698,20 +553,16 @@ const getHeaderView = () => {
mask-size: contain;
}
```
-
-
-***
-
-#### TextFormatters
+### textFormatters
-Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source. To configure the existing Mentions look and feel check out [CometChatMentionsFormatter](/ui-kit/react/mentions-formatter-guide)
+Custom text formatters for the composer input. To configure mentions, see [CometChatMentionsFormatter](/ui-kit/react/mentions-formatter-guide).
-```ts
+```ts lines
import { CometChatTextFormatter } from "@cometchat/chat-uikit-react";
import DialogHelper from "./Dialog";
import { CometChat } from "@cometchat/chat-sdk-javascript";
@@ -720,7 +571,7 @@ class ShortcutFormatter extends CometChatTextFormatter {
private shortcuts: { [key: string]: string } = {};
private dialogIsOpen: boolean = false;
private dialogHelper = new DialogHelper();
- private currentShortcut: string | null = null; // Track the currently open shortcut
+ private currentShortcut: string | null = null;
constructor() {
super();
@@ -746,7 +597,6 @@ class ShortcutFormatter extends CometChatTextFormatter {
const shortcut = match[0];
const replacement = this.shortcuts[shortcut];
if (replacement) {
- // Close the currently open dialog, if any
if (this.dialogIsOpen && this.currentShortcut !== shortcut) {
this.closeDialog();
}
@@ -775,14 +625,13 @@ class ShortcutFormatter extends CometChatTextFormatter {
}
closeDialog() {
- this.dialogHelper.closeDialog(); // Use DialogHelper to close the dialog
+ this.dialogHelper.closeDialog();
this.dialogIsOpen = false;
this.currentShortcut = null;
}
handleButtonClick = (buttonText: string) => {
if (this.currentCaretPosition && this.currentRange) {
- // Inserting the replacement text corresponding to the shortcut
const shortcut = Object.keys(this.shortcuts).find(
(key) => this.shortcuts[key] === buttonText
);
@@ -821,11 +670,9 @@ class ShortcutFormatter extends CometChatTextFormatter {
export default ShortcutFormatter;
```
-
-
-```tsx
+```tsx lines
import React from "react";
import ReactDOM from "react-dom";
@@ -886,11 +733,9 @@ export default class DialogHelper {
}
}
```
-
-
-```tsx
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";
@@ -914,9 +759,31 @@ export function MessageComposerDemo() {
) : null;
}
```
-
-
-***
+## Theme and Styling
+
+Using CSS, customize the look and feel of the component. The root CSS class is `.cometchat-message-composer`.
+
+
+
+
+
+```tsx lines
+
-The `MessageHeader` is comprised of the following components:
+
+
+| Field | Value |
+| --- | --- |
+| Purpose | Toolbar displaying user/group avatar, name, status, typing indicator, back button, and call controls for a single conversation |
+| Package | `@cometchat/chat-uikit-react` |
+| Import | `import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";` |
+| Used in experiences | Chat view header, message detail toolbar, conversation screen top bar |
+| Copy-paste base | See [Base Code](#base-code--stylesheet) below |
+| Primary output | Navigation callback (from `onBack`), item click (from `onItemClick`) |
+| Primary hook points | `onBack`, `onError`, `onItemClick`, `onSearchOptionClicked`, view slots (`itemView`, `titleView`, `subtitleView`, `leadingView`, `trailingView`, `auxiliaryButtonView`) |
+| CSS root class | `.cometchat-message-header` |
+| Real-time events | None emitted; internally listens for typing indicators and user presence |
-| Component | Description |
-| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
-| CometChatListItem | This component’s view consists of avatar, status indicator , title, and subtitle. The fields are then mapped with the SDK’s user, group class. |
-| Back Button | BackButton that allows users to navigate back from the current activity or screen to the previous one. |
+
-## Usage
+## Base Code and Stylesheet
-### Integration
+Renders a toolbar with avatar, name, status, and typing indicator for a user or group conversation.
-```tsx
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
@@ -41,43 +47,105 @@ export function MessageHeaderDemo() {
) : null;
}
```
-
-
-```tsx
+```tsx lines
import { MessageHeaderDemo } from "./MessageHeaderDemo";
export default function App() {
return (
-
-### Actions
+Root CSS class for style overrides:
-[Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.
+```css lines
+.cometchat-message-header {
+ /* overrides here */
+}
+```
-#### 1. OnBack
+## Functionality
-`OnBack` is triggered when you click on the back button of the Message Header component. You can override this action using the following code snippet.
+Props that control component behavior, grouped by surface area.
-**Example**
+### Data
-In this example, we are employing the `onBack` action.
+| Property | Type | Default | Effect | Pitfall |
+| --- | --- | --- | --- | --- |
+| `user` | `CometChat.User` | `undefined` | Displays user details (avatar, name, status) in the header | Pass either `user` or `group`, not both |
+| `group` | `CometChat.Group` | `undefined` | Displays group details (icon, name, member count) in the header | Pass either `user` or `group`, not both |
-
-
-```tsx
+### UI Visibility Toggles
+
+| Property | Type | Default | Effect | Pitfall |
+| --- | --- | --- | --- | --- |
+| `showBackButton` | `boolean` | `false` | Shows the back navigation button | — |
+| `hideVideoCallButton` | `boolean` | `false` | Hides the video call button | — |
+| `hideVoiceCallButton` | `boolean` | `false` | Hides the voice call button | — |
+| `hideUserStatus` | `boolean` | `false` | Hides the user's online/offline status indicator | — |
+| `showConversationSummaryButton` | `boolean` | `false` | Shows the AI conversation summary button | Requires AI features to be enabled |
+| `showSearchOption` | `boolean` | `false` | Shows the search option in the header | — |
+
+### AI / Summary
+
+| Property | Type | Default | Effect | Pitfall |
+| --- | --- | --- | --- | --- |
+| `summaryGenerationMessageCount` | `number` | `1000` | Number of messages used for AI summary generation | Higher values may increase latency |
+| `enableAutoSummaryGeneration` | `boolean` | `false` | Enables automatic conversation summary generation | — |
+
+### Date Formatting
+
+| Property | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `lastActiveAtDateTimeFormat` | `CalendarObject` | See default below | Customizes the "last seen" timestamp format |
+
+Default `lastActiveAtDateTimeFormat`:
+
+```ruby lines
+new CalendarObject({
+ today: `[Last seen DD MMM at] hh:mm A`,
+ yesterday: `[Last seen DD MMM at] hh:mm A`,
+ otherDays: `[Last seen DD MMM at] hh:mm A`,
+ relativeTime: {
+ hour: `Last seen %d hour ago`,
+ minute: `Last seen %d minute ago`,
+ minutes: `Last seen %d minutes ago`,
+ },
+});
+```
+
+
+If a property is not passed in the CalendarObject, the component checks the [global configuration](/ui-kit/react/localize#customisation) first, then falls back to the component's default formatting.
+
+
+## Actions
+
+[Actions](/ui-kit/react/components-overview#actions) split into predefined (built-in triggers) and user-defined (callbacks).
+
+### Predefined Actions
+
+The component has no built-in navigation behavior. The back button fires `onBack` but does not navigate automatically.
+
+### User-Defined Actions
+
+#### onBack
+
+Fires when the back button is clicked. Requires `showBackButton={true}`.
+
+| Detail | Value |
+| --- | --- |
+| When it fires | User clicks the back button |
+| Payload type | `() => void` |
+| What devs typically do next | Navigate back to conversation list |
+
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
@@ -104,23 +172,17 @@ export function MessageHeaderDemo() {
}
```
-
-
-
-
-***
-
-#### 2. OnError
-
-This action doesn't change the behavior of the component but rather listens for any errors that occur in the Message Header component.
+#### onError
-**Example**
+Fires when the component encounters an error.
-In this example, we are employing the `onError` action.
+| Detail | Value |
+| --- | --- |
+| When it fires | Any internal error during rendering |
+| Payload type | `(error: CometChat.CometChatException) => void` |
+| What devs typically do next | Log to error tracking service |
-
-
-```tsx
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
@@ -146,19 +208,17 @@ export function MessageHeaderDemo() {
}
```
-
-
-
+#### onSearchOptionClicked
-***
+Fires when the search option is clicked. Requires `showSearchOption={true}`.
-##### 3. onSearchOptionClicked
+| Detail | Value |
+| --- | --- |
+| When it fires | User clicks the search option |
+| Payload type | `() => void` |
+| What devs typically do next | Open search UI, filter messages |
-The `onSearchOptionClicked` event is triggered when the user clicks the search option. It does not have a default behavior. However, you can override its behavior using the following code snippet.
-
-
-
-```tsx
+```tsx lines
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
const handleSearchClick = () => {
@@ -168,138 +228,72 @@ const handleSearchClick = () => {
-
-
+#### onItemClick
-***
+Fires when the list item area (avatar + name) is clicked.
-#### 4. OnItemClick
+| Detail | Value |
+| --- | --- |
+| When it fires | User clicks the header list item |
+| Payload type | `() => void` |
+| What devs typically do next | Open user/group detail panel |
-`OnItemClick` is triggered when you click on a ListItem of the `CometChatMessageHeader` component. The `OnItemClick` action doesn't have a predefined behavior. You can override this action using the following code snippet.
-
-
-
-```tsx
-import { MessageHeaderDemo } from "@cometchat/chat-uikit-react";
+```tsx lines
+import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
const getOnItemClick = () => {
console.log("List item clicked");
};
-
-
-
-
-***
-
-### Filters
-
-**Filters** allow you to customize the data displayed in a list within a `Component`. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using `RequestBuilders` of Chat SDK.
-
-The `MessageHeader` component does not have any exposed filters.
-
-### Events
-
-[Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.
-
-The `MessageHeader` component does not produce any events.
-
-## Customization
-
-To fit your app's design requirements, you can customize the appearance of the Message Header component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.
-
-### Style
-
-To customize the appearance, you can customise css of `CometChatMessageHeader`
-
-**Example**
-
-
- 
-
-
-
-
-```ts
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
-
-// Assuming groupObj is defined elsewhere in your code
-
-
-
-```css
-.cometchat-message-header .cometchat-list-item .cometchat-avatar {
- background: #f0999b;
- border-radius: 8px;
-}
-.cometchat-message-header .cometchat-avatar__text {
- font-family: "SF Pro";
-}
+
-
-
+## Filters
-### Functionality
+The MessageHeader component does not have any exposed filters. It displays details for a single user or group and does not fetch paginated lists.
-These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements.
+## Events
-Here is a code snippet demonstrating how you can customize the functionality of the Message Header component.
+### UI Events
-
-
-```ts
-import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
+The MessageHeader component does not emit any custom UI events.
-
+The component internally listens to SDK events for real-time updates. No manual attachment needed.
-
+| SDK Listener | What it does inside the component |
+| --- | --- |
+| `onUserOnline` / `onUserOffline` | Updates the user's online/offline status indicator |
+| `onTypingStarted` / `onTypingEnded` | Shows/hides the typing indicator in the subtitle area |
+| Group member events | Updates group member count when members join/leave |
-Following is a list of customizations along with their corresponding code snippets:
+## Advanced: Custom View Slots
-| Property | Description | Code |
-| ------------------------------------ | --------------------------------------------------------------------------------------------------- | -------------------------------------- |
-| **Show Back Button** | Shows the back button. | `showBackButton={true}` |
-| **Hide Video Call Button** | Hides the video call button. | `hideVideoCallButton={true}` |
-| **Hide Voice Call Button** | Hides the voice call button. | `hideVoiceCallButton={true}` |
-| **Show Conversation Summary Button** | Shows the conversation summary button. | `showConversationSummaryButton={true}` |
-| **Hide User Status** | Hides the user's online/offline status indicator. | `hideUserStatus={true}` |
-| **Show Search Option** | Shows the search option. | `showSearchOption={true}` |
-| **User** | A `CometChat.User` object representing the user whose information (e.g., status) is displayed. | `user={chatUser}` |
-| **Group** | A `CometChat.Group` object representing the group whose details (e.g., member count) are displayed. | `group={chatGroup}` |
-| **Summary Generation Message Count** | Number of messages for which the summary should be shown. | `summaryGenerationMessageCount={1000}` |
-| **Disable Auto Summary Generation** | Disables the auto generation of conversation summary. | `disableAutoSummaryGeneration={true}` |
+Customization override points for the message header UI.
-### Advanced
+### Slot Catalog
-For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component.
+| Slot | Params | What it replaces | Section |
+| --- | --- | --- | --- |
+| `itemView` | `JSX.Element` | Entire list item (avatar + name + subtitle) | Whole item |
+| `leadingView` | `JSX.Element` | Avatar / left section | Sub-section (leading) |
+| `trailingView` | `JSX.Element` | Right section (call buttons area) | Sub-section (trailing) |
+| `titleView` | `JSX.Element` | Name / title text | Sub-section (title) |
+| `subtitleView` | `JSX.Element` | Subtitle text (status / typing indicator) | Sub-section (subtitle) |
+| `auxiliaryButtonView` | `JSX.Element` | Auxiliary button area (next to call buttons) | Sub-section (auxiliary) |
-#### ItemView
+### itemView
-The customized chat interface is displayed below.
+Replace the entire list item (avatar + name + subtitle).
-Use the following code to achieve the customization shown above.
-
-```ts
+```ts lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
@@ -307,7 +301,6 @@ import {
CometChatListItem,
} from "@cometchat/chat-uikit-react";
-// Custom list item view definition
const CustomItemView = (
<>
-
-
-```css
+
+```css lines
.cometchat-message-header .cometchat-list-item .cometchat-avatar {
border-radius: 8px;
}
```
-
-
-***
-
-#### TitleView
+### titleView
-The customized chat interface is displayed below.
+Replace the name / title text.
-Use the following code to achieve the customization shown above.
-
-```ts
+```ts lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
-// Custom title view component
function CustomTitleView() {
return (
New Chat
-
- {/* Content */}
handleTabClick('user')}> {getLocalizedString("user_title")}
- handleTabClick('group')}> {getLocalizedString("group_title")}
+ handleTabClick('user')}> {getLocalizedString("user_title")}
+ handleTabClick('group')}> {getLocalizedString("group_title")}
-The `Incoming Call` is comprised of the following base components:
+
-
);
}
```
-
-
+
-
-
-
-Use the following code to achieve the customization shown above.
-
-
- )
- };
-
- return
-
- )
- };
+ return (
+
+
+ );
+ };
return
-Use the following code to achieve the customization shown above.
-
- {call?.getCallInitiator()?.getName()}
-
- )
- };
-
- return
-
- {call.getCallInitiator()?.getRole()}
-
-
- {call?.getCallInitiator()?.getName()}
-
- )
- };
+ return (
+
-
- {call.getCallInitiator()?.getRole()}
-
-
+ {call?.getCallInitiator()?.getName()}
+
+ );
+ };
return
+
+ {call.getCallInitiator()?.getRole()}
+
+
-Use the following code to achieve the customization shown above.
-
-
- {call.getCallInitiator()?.getRole()}
-
- )
- };
-
- return
-
- {call.getCallInitiator()?.getRole()}
-
- )
- };
+ return (
+
+
+ {call.getCallInitiator()?.getRole()}
+
+ );
+ };
return
-Use the following code to achieve the customization shown above.
-
-
- )
- };
-
- return
-
-
- {call?.getCallInitiator()?.getName()}
-
-
- {"Incoming " + call.getType() + " call"}
-
-
-
- )
- };
+ return (
+
-
-
- {call?.getCallInitiator()?.getName()}
-
-
- {"Incoming " + call.getType() + " call"}
-
-
+
+ );
+ };
return
+
+
+ {call?.getCallInitiator()?.getName()}
+
+
+ {"Incoming " + call.getType() + " call"}
+
+
+
+
+```tsx lines
+
-## Usage
+
-
);
}
```
-
-
+
- {/* For user chat with custom users mentions */}
-
- ) : null;
-}
-```
-
-
-
-
-
-The customized chat interface is displayed below.
+or
-Use the following code to achieve the customization shown above.
-
-The customized chat interface is displayed below.
-
-Use the following code to achieve the customization shown above.
-
-
-The customized chat interface is displayed below.
-
-Use the following code to achieve the customization shown above.
-
-The customized chat interface is displayed below.
-
-Use the following code to achieve the customization shown above.
-
+
+
+```tsx lines
+
-The `MessageHeader` is comprised of the following components:
+
-
);
}
```
-
-
+
-
-
-
-Use the following code to achieve the customization shown above.
-
-Use the following code to achieve the customization shown above.
-
@@ -374,57 +358,43 @@ function CustomTitleView() {
-```css
+
+```css lines
.cometchat-message-header .message-header__title-view {
display: flex;
gap: 4px;
width: 100%;
}
-.cometchat-message-header
- .message-header__title-view
- .message-header__title-view-name {
+.cometchat-message-header .message-header__title-view .message-header__title-view-name {
color: #141414;
font: 500 16px/19.2px Roboto;
text-align: left;
}
-.cometchat-message-header
- .message-header__title-view
- .message-header__title-view-status {
+
+.cometchat-message-header .message-header__title-view .message-header__title-view-status {
color: #6852d6;
font: 400 16px/19.2px Roboto;
text-align: left;
}
```
-
-
-***
-
-#### SubtitleView
+### subtitleView
-The customized chat interface is displayed below.
+Replace the subtitle text (status / typing indicator area).
-Use the following code to achieve the customization shown above.
-
-
-
-```ts
+```ts lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";
-// Custom subtitle view component
function CustomSubtitleView() {
return <>{group?.getMembersCount() + " • " + group?.getDescription()};
}
@@ -432,25 +402,17 @@ function CustomSubtitleView() {
-
-
-
-***
+### leadingView
-#### LeadingView
-
-The customized chat interface is displayed below.
+Replace the avatar / left section.
-Use the following code to achieve the customization shown above.
-
-```ts
+```ts lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
@@ -458,7 +420,6 @@ import {
CometChatAvatar,
} from "@cometchat/chat-uikit-react";
-// Custom title view component
function CustomLeadingView() {
return (
-Use the following code to achieve the customization shown above.
-
-
-Use the following code to achieve the customization shown above.
-
@@ -472,19 +433,11 @@ function CustomLeadingView() {
-```css
-.cometchat-message-header
- .cometchat-list-item
- .message-header__leading-view
- .cometchat-avatar__image,
-.cometchat-message-header
- .cometchat-list-item
- .message-header__leading-view
- .cometchat-avatar {
+
+```css lines
+.cometchat-message-header .cometchat-list-item .message-header__leading-view .cometchat-avatar__image,
+.cometchat-message-header .cometchat-list-item .message-header__leading-view .cometchat-avatar {
border-radius: 8px;
height: 48px;
width: 48px;
@@ -503,30 +456,25 @@ function CustomLeadingView() {
position: absolute;
bottom: -2px;
}
+
.message-header__leading-view {
position: relative;
}
```
-
-
-***
-
-#### TrailingView
+### trailingView
-The customized chat interface is displayed below.
+Replace the right section (call buttons area).
-Use the following code to achieve the customization shown above.
-
-```ts
+```ts lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
@@ -534,7 +482,6 @@ import {
CometChatButton,
} from "@cometchat/chat-uikit-react";
-// Custom trailing view component
function CustomTrailingButtonView() {
return (
<>
@@ -542,7 +489,7 @@ function CustomTrailingButtonView() {
onClick={() => {
// Your logic here
}}
- iconURL={icon} // Ensure `icon` is defined or passed as a prop
+ iconURL={icon}
/>
);
@@ -553,46 +500,34 @@ function CustomTrailingButtonView() {
trailingView={CustomTrailingButtonView()}
/>;
```
-
-
-
-```css
-.cometchat-message-header
- .cometchat-list-item__trailing-view
- .cometchat-button {
+
+```css lines
+.cometchat-message-header .cometchat-list-item__trailing-view .cometchat-button {
background: transparent;
height: 24px;
width: 24px;
padding: 0;
}
-.cometchat-message-header
- .cometchat-list-item__trailing-view
- .cometchat-button__icon {
+.cometchat-message-header .cometchat-list-item__trailing-view .cometchat-button__icon {
background: black;
}
```
-
-
-***
-
-#### AuxiliaryButtonView
+### auxiliaryButtonView
-The customized chat interface is displayed below.
+Replace the auxiliary button area (next to call buttons).
-Use the following code to achieve the customization shown above.
-
-```ts
+```ts lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
@@ -600,7 +535,6 @@ import {
CometChatButton,
} from "@cometchat/chat-uikit-react";
-// Custom auxiliary view component
function CustomAuxiliaryButtonView() {
return (
<>
@@ -608,7 +542,7 @@ function CustomAuxiliaryButtonView() {
onClick={() => {
// Your logic here
}}
- iconURL={icon} // Ensure `icon` is defined or passed as a prop
+ iconURL={icon}
/>
);
@@ -619,87 +553,70 @@ function CustomAuxiliaryButtonView() {
auxiliaryButtonView={CustomAuxiliaryButtonView()}
/>;
```
-
-
-
-```css
-.cometchat-message-header
- .cometchat-message-header__auxiliary-view
- .cometchat-button {
+
+```css lines
+.cometchat-message-header .cometchat-message-header__auxiliary-view .cometchat-button {
background: transparent;
height: 24px;
width: 24px;
padding: 0;
}
-.cometchat-message-header
- .cometchat-message-header__auxiliary-view
- .cometchat-button__icon {
+.cometchat-message-header .cometchat-message-header__auxiliary-view .cometchat-button__icon {
background: black;
}
```
-
-
-#### LastActiveAt Date Time Format
-
-The `lastActiveAtDateTimeFormat` property allows you to customize the **last active** timestamp displayed in the message header.
-
-Default Date Time Format:
-
-```ruby
-new CalendarObject({
- today: `[Last seen DD MMM at] hh:mm A`, // Example: "today at 10:30 AM"
- yesterday: `[Last seen DD MMM at] hh:mm A`, // Example: "yesterday at 08:15 PM"
- otherDays: `[Last seen DD MMM at] hh:mm A`, // Example: "25, Jan 05:45 PM"
- relativeTime: {
- hour: `Last seen %d hour ago`, // Example: "1 hour ago"
- minute: `Last seen %d minute ago`, // Example: "1 minute ago"
- minutes: `Last seen %d minutes ago`, // Example: "5 minutes ago"
- },
-});
-```
+### lastActiveAtDateTimeFormat
-The following example demonstrates how to modify the **last active** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject).
+Customize the "last seen" timestamp format using a `CalendarObject`.
-
-
-```ts
+```ts lines
import {
CometChatMessageHeader,
CalendarObject,
} from "@cometchat/chat-uikit-react";
-// Define a custom date format pattern
function getDateFormat() {
const dateFormat = new CalendarObject({
- today: `hh:mm A`, // Example: "10:30 AM"
- yesterday: `[yesterday]`, // Example: "yesterday"
- otherDays: `DD MM YYYY`, // Example: "25 01 2025"
+ today: `hh:mm A`,
+ yesterday: `[yesterday]`,
+ otherDays: `DD MM YYYY`,
});
return dateFormat;
}
-// Apply the custom format to the CometChatMessageHeader component
-
-
-
+If a property is not passed in the CalendarObject, the component checks the [global configuration](/ui-kit/react/localize#customisation) first, then falls back to the component's default formatting.
+
-**Fallback Mechanism**
+## Theme and Styling
-* If you **do not** pass any property in the [**CalendarObject**](/ui-kit/react/localize#calendarobject), the component will first check the [**global configuration**](/ui-kit/react/localize#customisation). If the property is **also missing in the global configuration**, it will **fallback to the component's default formatting**.
+Using CSS, customize the look and feel of the component. The root CSS class is `.cometchat-message-header`.
-
+
+
+
-***
+```tsx lines
+
-***
+
-## Usage
+| Field | Value |
+| --- | --- |
+| Purpose | Scrollable list of sent and received messages with text, media, reactions, read receipts, threaded replies, date separators, and AI features |
+| Package | `@cometchat/chat-uikit-react` |
+| Import | `import { CometChatMessageList } from "@cometchat/chat-uikit-react";` |
+| Used in experiences | Chat view, threaded conversations, message detail panel |
+| Copy-paste base | See [Base Code](#base-code--stylesheet) below |
+| Primary output | Message interactions (thread replies, reactions, edits, deletes) |
+| Primary hook points | `onThreadRepliesClick`, `onError`, `onReactionClick`, `onReactionListItemClick`, `messagesRequestBuilder`, `templates`, view slots (`headerView`, `footerView`) |
+| CSS root class | `.cometchat-message-list` |
+| Real-time events | `CometChatMessageEvents.ccMessageEdited`, `CometChatMessageEvents.ccMessageDeleted`, `CometChatMessageEvents.ccMessageRead`, `CometChatMessageEvents.ccReplyToMessage` |
-### Integration
+
-The following code snippet illustrates how you can directly incorporate the MessageList component into your Application.
+## Base Code and Stylesheet
+
+Renders a scrollable list of messages for a user or group conversation.
-```tsx
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageList } from "@cometchat/chat-uikit-react";
@@ -40,85 +49,145 @@ export function MessageListDemo() {
) : null;
}
```
-
-
-```tsx
+```tsx lines
import { MessageListDemo } from "./MessageListDemo";
export default function App() {
return (
-
-
+Root CSS class for style overrides:
+
+```css lines
+.cometchat-message-list {
+ /* overrides here */
+}
+```
+
+## Functionality
+
+Props that control component behavior, grouped by surface area.
+
+### Data
+
+| Property | Type | Default | Effect | Pitfall |
+| --- | --- | --- | --- | --- |
+| `user` | `CometChat.User` | `undefined` | Displays messages for a 1-on-1 conversation | Pass either `user` or `group`, not both |
+| `group` | `CometChat.Group` | `undefined` | Displays messages for a group conversation | Pass either `user` or `group`, not both |
+| `messagesRequestBuilder` | `CometChat.MessagesRequestBuilder` | SDK default | Controls which messages load and in what order | UID/GUID are always overridden internally |
+| `reactionsRequestBuilder` | `CometChat.ReactionsRequestBuilder` | SDK default | Controls how reactions are fetched for messages | — |
+| `parentMessageId` | `number` | `undefined` | Displays threaded conversation for the specified parent message | — |
+| `templates` | `CometChatMessageTemplate[]` | SDK defaults | Custom message bubble templates | Template `type`/`category` must match the message |
+| `goToMessageId` | `string` | `undefined` | Scrolls to the specified message on initial load | — |
+
+### UI Visibility Toggles
+
+| Property | Type | Default | Effect | Pitfall |
+| --- | --- | --- | --- | --- |
+| `hideDateSeparator` | `boolean` | `false` | Hides date separator between message groups | — |
+| `hideStickyDate` | `boolean` | `false` | Hides the sticky date header | — |
+| `hideReceipts` | `boolean` | `false` | Hides read/delivery receipts | — |
+| `hideError` | `boolean` | `false` | Hides the default and custom error views | Also suppresses `errorView` if set |
+| `hideReplyInThreadOption` | `boolean` | `false` | Hides the "Reply in Thread" option | — |
+| `hideTranslateMessageOption` | `boolean` | `false` | Hides the translate message option | — |
+| `hideEditMessageOption` | `boolean` | `false` | Hides the edit message option | — |
+| `hideDeleteMessageOption` | `boolean` | `false` | Hides the delete message option | — |
+| `hideReactionOption` | `boolean` | `false` | Hides the reaction option | — |
+| `hideMessagePrivatelyOption` | `boolean` | `false` | Hides the "Message Privately" option | — |
+| `hideCopyMessageOption` | `boolean` | `false` | Hides the copy message option | — |
+| `hideMessageInfoOption` | `boolean` | `false` | Hides the message info option | — |
+| `hideReplyOption` | `boolean` | `false` | Hides the reply option | — |
+| `hideAvatar` | `boolean` | `false` | Hides avatars on messages | — |
+| `hideGroupActionMessages` | `boolean` | `false` | Hides group action messages (join, leave, etc.) | — |
+| `showConversationStarters` | `boolean` | `false` | Shows AI conversation starters | — |
+| `showSmartReplies` | `boolean` | `false` | Shows AI smart replies | — |
+| `hideModerationView` | `boolean` | `false` | Hides the moderation view below moderated messages | — |
+| `hideFlagMessageOption` | `boolean` | `false` | Hides the "Report Message" option | — |
+| `hideFlagRemarkField` | `boolean` | `false` | Hides the remark text area in the flag message dialog | — |
+
+### Behavior
+
+| Property | Type | Default | Effect | Pitfall |
+| --- | --- | --- | --- | --- |
+| `messageAlignment` | `MessageListAlignment` | `MessageListAlignment.standard` | Controls message alignment (left, right, standard) | — |
+| `scrollToBottomOnNewMessages` | `boolean` | `false` | Auto-scrolls to bottom when new messages arrive | — |
+| `quickOptionsCount` | `number` | `2` | Number of message options visible in the main menu | — |
+| `disableSoundForMessages` | `boolean` | `false` | Disables the sound effect for new messages | — |
+| `customSoundForMessages` | `string` | `undefined` | Custom sound file URL for new messages | — |
+| `startFromUnreadMessages` | `boolean` | `false` | Loads from the first unread message if available | Falls back to latest messages if no unreads |
+| `showMarkAsUnreadOption` | `boolean` | `false` | Shows "Mark Unread" option in message actions | Only appears for received messages |
+| `isAgentChat` | `boolean` | `false` | Toggles AI Agent functionality for the message list | — |
+| `loadLastAgentConversation` | `boolean` | `false` | Loads the most recent existing agent conversation on mount | — |
+
+### AI / Smart Replies
+
+| Property | Type | Default | Effect | Pitfall |
+| --- | --- | --- | --- | --- |
+| `smartRepliesKeywords` | `string[]` | `undefined` | Keywords that trigger smart replies | — |
+| `smartRepliesDelayDuration` | `number` | `undefined` | Delay (ms) before smart replies appear | — |
+
+### Date Formatting
+
+| Property | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `separatorDateTimeFormat` | `CalendarObject` | `today/yesterday/DD MMM, YYYY` | Customizes date separator timestamps |
+| `stickyDateTimeFormat` | `CalendarObject` | `today/yesterday/DD MMM, YYYY` | Customizes sticky date header timestamps |
+| `messageSentAtDateTimeFormat` | `CalendarObject` | `hh:mm A` | Customizes message sent-at timestamps |
+| `messageInfoDateTimeFormat` | `CalendarObject` | `DD MMM, hh:mm A` | Customizes message info timestamps |
-To fetch messages for a specific entity, you need to supplement it with `User` or `Group` Object.
+
+If a property is not passed in the CalendarObject, the component checks the [global configuration](/ui-kit/react/localize#customisation) first, then falls back to the component's default formatting.
+
-
+### Custom Views (Render Props)
-***
+These replace sections of the default UI. See [Custom View Slots](#custom-view-slots) for full examples.
-### Actions
+| Property | Type | Effect |
+| --- | --- | --- |
+| `headerView` | `JSX.Element` | Shown above the message list |
+| `footerView` | `JSX.Element` | Shown below the message list |
+| `loadingView` | `JSX.Element` | Shown while messages are loading |
+| `emptyView` | `JSX.Element` | Shown when there are no messages |
+| `errorView` | `JSX.Element` | Shown when an error occurs |
+| `textFormatters` | `CometChatTextFormatter[]` | Custom text formatters for message content |
-[Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.
+## Actions
-##### 1. onThreadRepliesClick
+[Actions](/ui-kit/react/components-overview#actions) split into predefined (built-in triggers) and user-defined (callbacks).
-`onThreadRepliesClick` is triggered when you click on the threaded message bubble. The `onThreadRepliesClick` action doesn't have a predefined behavior. You can override this action using the following code snippet.
+### Predefined Actions
-
-
-```ts
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageList } from "@cometchat/chat-uikit-react";
+The component handles message rendering, scrolling, and real-time updates internally. Thread replies, reactions, edits, and deletes are built-in.
-export function MessageListDemo() {
- const [chatUser, setChatUser] = React.useState();
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
+### User-Defined Actions
- const getOnThreadRepliesClick = () => {
- //your custom actions
- };
+#### onThreadRepliesClick
- return chatUser ? (
-
+| Detail | Value |
+| --- | --- |
+| When it fires | User clicks on a threaded message reply count |
+| Payload type | `(message: CometChat.BaseMessage, view: () => void) => void` |
+| What devs typically do next | Open thread panel, navigate to thread view |
-
-```js
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageList } from "@cometchat/chat-uikit-react";
export function MessageListDemo() {
- const [chatUser, setChatUser] = React.useState(null);
-
+ const [chatUser, setChatUser] = React.useState();
React.useEffect(() => {
CometChat.getUser("uid").then((user) => {
setChatUser(user);
@@ -140,17 +209,17 @@ export function MessageListDemo() {
}
```
-
-
-
+#### onError
-##### 2. onError
+Fires when the component encounters an error.
-This action doesn't change the behavior of the component but rather listens for any errors that occur in the MessageList component.
+| Detail | Value |
+| --- | --- |
+| When it fires | Any internal error during data fetching or rendering |
+| Payload type | `(error: CometChat.CometChatException) => void` |
+| What devs typically do next | Log to error tracking service |
-
-
-```ts
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageList } from "@cometchat/chat-uikit-react";
@@ -175,46 +244,17 @@ export function MessageListDemo() {
}
```
-
-
-
-```js
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageList } from "@cometchat/chat-uikit-react";
-
-export function MessageListDemo() {
- const [chatUser, setChatUser] = React.useState(null);
-
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
-
- const handleError = (error) => {
- throw new Error("your custom error action");
- };
-
- return chatUser ? (
-
-
-
+#### onReactionClick
-##### 3. onReactionClick
+Fires when a reaction item on a message bubble is clicked.
-`onReactionClick` is triggered when you click on the reaction item of the message bubble. The `onReactionClick` action doesn't have a predefined behavior. You can override this action using the following code snippet.
+| Detail | Value |
+| --- | --- |
+| When it fires | User clicks a reaction on a message |
+| Payload type | `(reaction: CometChat.ReactionCount, message: CometChat.BaseMessage) => void` |
+| What devs typically do next | Toggle reaction, show reaction details |
-
-
-```ts
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageList } from "@cometchat/chat-uikit-react";
@@ -242,46 +282,17 @@ export function MessageListDemo() {
}
```
-
-
-
-```js
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageList } from "@cometchat/chat-uikit-react";
-
-export function MessageListDemo() {
- const [chatUser, setChatUser] = React.useState(null);
-
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
-
- const onReactionClick = (reaction, message) => {
- //your custom action
- };
-
- return chatUser ? (
-
-
-
+#### onReactionListItemClick
-##### 4. onReactionListItemClick
+Fires when a reaction list item is clicked (in the reaction detail view).
-`onReactionListItemClick` is triggered when you click on the reaction list item of the reaction list. The `onReactionListItemClick` action doesn't have a predefined behavior. You can override this action using the following code snippet.
+| Detail | Value |
+| --- | --- |
+| When it fires | User clicks a specific reaction in the reaction list |
+| Payload type | `(reaction: CometChat.Reaction, message: CometChat.BaseMessage) => void` |
+| What devs typically do next | Show who reacted, navigate to user profile |
-
-
-```ts
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageList } from "@cometchat/chat-uikit-react";
@@ -312,128 +323,19 @@ export function MessageListDemo() {
}
```
-
-
-
-```js
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageList } from "@cometchat/chat-uikit-react";
-
-export function MessageListDemo() {
- const [chatUser, setChatUser] = React.useState(null);
-
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
-
- const onReactionListItemClick = (reaction, message) => {
- //your custom action
- };
-
- return chatUser ? (
-
-
-
-
-### Filters
-
-##### 1. Messages Request Builder
-
-You can adjust the `MessagesRequestBuilder` in the MessageList Component to customize your message list. Numerous options are available to alter the builder to meet your specific needs. For additional details on `MessagesRequestBuilder`, please visit [MessagesRequestBuilder](/sdk/javascript/additional-message-filtering).
-
-In the example below, we are applying a filter to the messages based on a search substring and for a specific user. This means that only messages that contain the search term and are associated with the specified user will be displayed
-
-
-
-```ts
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageList } from "@cometchat/chat-uikit-react";
-
-export function MessageListDemo() {
- const [chatUser, setChatUser] = React.useState();
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
-
- return chatUser ? (
-
-
-
-```js
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageList } from "@cometchat/chat-uikit-react";
-
-export function MessageListDemo() {
- const [chatUser, setChatUser] = React.useState(null);
-
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
-
- return chatUser ? (
-
+Control which messages appear using `MessagesRequestBuilder`. Pass the builder to the `messagesRequestBuilder` prop.
-
+Refer to [MessagesRequestBuilder](/sdk/javascript/additional-message-filtering) for the full API.
-
-The following parameters in messageRequestBuilder will always be altered inside the message list
-
-1. UID
-2. GUID
-
+The `UID` and `GUID` parameters in `messagesRequestBuilder` are always overridden internally by the component based on the `user` or `group` prop.
-##### 2. Reactions Request Builder
-
-You can adjust the `ReactionsRequestBuilder` in the MessageList Component to customize and fetch the reactions for the messages. Numerous options are available to alter the builder to meet your specific needs.
+### Messages Request Builder
-
-
-```ts
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageList } from "@cometchat/chat-uikit-react";
@@ -450,7 +352,7 @@ export function MessageListDemo() {
-```js
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageList } from "@cometchat/chat-uikit-react";
export function MessageListDemo() {
- const [chatUser, setChatUser] = React.useState(null);
-
+ const [chatUser, setChatUser] = React.useState();
React.useEffect(() => {
CometChat.getUser("uid").then((user) => {
setChatUser(user);
@@ -489,61 +389,24 @@ export function MessageListDemo() {
}
```
-
-
-
-
-### Events
-
-[Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.
-
-The list of events emitted by the Message List component is as follows.
-
-| Event | Description |
-| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| **ccOpenChat** | this event alerts the listeners if the logged-in user has opened a user or a group chat. |
-| **ccMessageEdited** | Triggers whenever a loggedIn user edits any message from the list of messages .it will have three states such as: inProgress, success and error. |
-| **ccReplyToMessage** | Triggers whenever a loggedIn user replies to any message from the list of messages .it will have three states such as: inProgress, success and error. |
-| **ccMessageDeleted** | Triggers whenever a loggedIn user deletes any message from the list of messages. |
-| **ccActiveChatChanged** | This event is triggered when the user navigates to a particular chat window. |
-| **ccMessageRead** | Triggers whenever a loggedIn user reads any message. |
-
-Adding `CometChatMessageEvents` Listener's
-
-
-
-```ts
-import { CometChatMessageEvents, CometChatUIEvents } from "@cometchat/chat-uikit-react";
-
-const ccOpenChat = CometChatUIEvents.ccOpenChat.subscribe(() => {
- // Your Code
-});
-
-const ccMessageEdited = CometChatMessageEvents.ccMessageEdited.subscribe(() => {
- // Your Code
-});
-
-const ccReplyToMessage = CometChatMessageEvents.ccReplyToMessage.subscribe(() => {
- // Your Code
-});
+## Events
-const ccMessageDeleted = CometChatMessageEvents.ccMessageDeleted.subscribe(() => {
- // Your Code
-});
+### UI Events
-const ccActiveChatChanged = CometChatUIEvents.ccActiveChatChanged.subscribe(() => {
- // Your Code
-});
+Events emitted by the MessageList component:
-const ccMessageRead = CometChatMessageEvents.ccMessageRead.subscribe(() => {
- // Your Code
-});
-```
+| Event | Source | When it fires |
+| --- | --- | --- |
+| `ccOpenChat` | `CometChatUIEvents` | User opens a user or group chat |
+| `ccMessageEdited` | `CometChatMessageEvents` | A message is edited (inProgress, success, error) |
+| `ccReplyToMessage` | `CometChatMessageEvents` | User replies to a message |
+| `ccMessageDeleted` | `CometChatMessageEvents` | A message is deleted |
+| `ccActiveChatChanged` | `CometChatUIEvents` | User navigates to a different chat |
+| `ccMessageRead` | `CometChatMessageEvents` | A message is read |
-
+#### Subscribe
-
-```js
+```tsx lines
import { CometChatMessageEvents, CometChatUIEvents } from "@cometchat/chat-uikit-react";
const ccOpenChat = CometChatUIEvents.ccOpenChat.subscribe(() => {
@@ -571,198 +434,42 @@ const ccMessageRead = CometChatMessageEvents.ccMessageRead.subscribe(() => {
});
```
-
-
-
-
-***
-
-Removing `CometChatMessageEvents` Listener's
-
-
-
-```ts
-ccMessageEdited?.unsubscribe();
-ccReplyToMessage?.unsubscribe();
-ccActiveChatChanged?.unsubscribe();
-```
+#### Unsubscribe
-
-
-
-```js
+```tsx lines
+ccOpenChat?.unsubscribe();
ccMessageEdited?.unsubscribe();
ccReplyToMessage?.unsubscribe();
+ccMessageDeleted?.unsubscribe();
ccActiveChatChanged?.unsubscribe();
+ccMessageRead?.unsubscribe();
```
-
+### SDK Events (Real-Time)
-
+The component automatically listens to SDK message events internally for real-time updates. No manual attachment needed unless additional side effects are required.
-***
+## Advanced: Custom View Slots
-## Customization
+Customization override points for the message list UI.
-To fit your app's design requirements, you can customize the appearance of the Message List component. We provide exposed properties that allow you to modify the experience and behavior according to your specific needs.
+### Slot Catalog
-### Style
+| Slot | Params | What it replaces | Section |
+| --- | --- | --- | --- |
+| `headerView` | `JSX.Element` | Area above the message list | Whole section |
+| `footerView` | `JSX.Element` | Area below the message list | Whole section |
+| `loadingView` | `JSX.Element` | Loading spinner | Empty/loading/error |
+| `emptyView` | `JSX.Element` | Empty state | Empty/loading/error |
+| `errorView` | `JSX.Element` | Error state | Empty/loading/error |
+| `templates` | `CometChatMessageTemplate[]` | Message bubble rendering | Whole item |
+| `textFormatters` | `CometChatTextFormatter[]` | Text formatting in messages | Text content |
-You can set the css to the MessageList Component Component to customize the styling.
+### templates
-**Example**
+[CometChatMessageTemplate](/ui-kit/react/message-template) is a pre-defined structure for creating message views (message bubbles). Refer to [CometChatMessageTemplate](/ui-kit/react/message-template) for details.
-
- 
-
-
-
-
-```ts
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageList } from "@cometchat/chat-uikit-react";
-
-
-
-
-```css
-.cometchat-message-bubble__body
- .cometchat-text-bubble.cometchat-text-bubble-incoming
- .cometchat-text-bubble__body-text {
- font-family: "SF Pro";
-}
-```
-
-
-
-
-
-### Functionality
-
-These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements.
-
-
-
-```ts
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageList } from "@cometchat/chat-uikit-react";
-
-export function MessageListDemo() {
- const [chatUser, setChatUser] = React.useState();
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
-
- return chatUser ? (
-
-
-
-```js
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageList } from "@cometchat/chat-uikit-react";
-
-export function MessageListDemo() {
- const [chatUser, setChatUser] = React.useState(null);
-
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
-
- return chatUser ? (
-
-
-
-
-***
-
-Below is a list of customizations along with corresponding code snippets
-
-| Property | Description | Code |
-| ------------------------------------ | ------------------------------------------------------------------------------------------- | ---------------------------------------------- |
-| **Hide Date Separator** | Hides the visibility of the date separator in the message list. | `hideDateSeparator={true}` |
-| **Hide Sticky Date** | Hides the sticky date header in the message list. | `hideStickyDate={true}` |
-| **Hide Receipts** | Hides the visibility of receipts in the message list. | `hideReceipts={true}` |
-| **Hide Error** | Hides the default & custom error view passed in the `errorView` prop. | `hideError={true}` |
-| **Hide Reply In Thread Option** | Hides the option to reply to messages in a thread. | `hideReplyInThreadOption={true}` |
-| **Hide Translate Message Option** | Hides the option to translate messages. | `hideTranslateMessageOption={true}` |
-| **Hide Edit Message Option** | Hides the option to edit messages. | `hideEditMessageOption={true}` |
-| **Hide Delete Message Option** | Hides the option to delete messages. | `hideDeleteMessageOption={true}` |
-| **Hide Reaction Option** | Hides the option to react to messages. | `hideReactionOption={true}` |
-| **Hide Message Privately Option** | Hides the option to message a user privately. | `hideMessagePrivatelyOption={true}` |
-| **Hide Copy Message Option** | Hides the option to copy messages. | `hideCopyMessageOption={true}` |
-| **Hide Message Info Option** | Hides the option to view message information. | `hideMessageInfoOption={true}` |
-| **Hide Reply Option** | Hides the reply option for a message. | `hideReplyOption={true}` |
-| **Hide Avatar** | Hides avatars for messages. | `hideAvatar={true}` |
-| **Hide Group Action Messages** | Hides group action messages. | `hideGroupActionMessages={true}` |
-| **Hide Conversation Starters** | Hides the visibility of the conversation starters in the message list. | `hideConversationStarters={true}` |
-| **Hide Smart Replies** | Hides the visibility of the smart replies in the message list. | `hideSmartReplies={true}` |
-| **Hide Moderation View** | Hides the moderation view shown below the message bubble in the bottom view when a message is moderated. | `hideModerationView={true}` |
-| **Hide Flag Message Option** | Hides the "Report Message" option from message actions menu. | `hideFlagMessageOption={true}` |
-| **Hide Flag Remark Field** | Hides the remark text area in the flag message dialog. | `hideFlagRemarkField={true}` |
-| **Parent Message ID** | Unique identifier of the parent message for displaying threaded conversations. | `parentMessageId={1234}` |
-| **User** | A `CometChat.User` object representing the participant of the chat. | `user={chatUser}` |
-| **Group** | A `CometChat.Group` object representing the group whose chat messages are displayed. | `group={chatGroup}` |
-| **Message Alignment** | Specifies the alignment of messages in the list (e.g., left, right). | `messageAlignment={MessageListAlignment.left}` |
-| **Scroll To Bottom On New Messages** | Automatically scrolls the message list to the bottom when a new message arrives. | `scrollToBottomOnNewMessages={true}` |
-| **Quick Options Count** | Specifies how many message options are visible in the main menu by default. | `quickOptionsCount={3}` |
-| **Disable Sound For Messages** | Disables the sound effect when new messages arrive. | `disableSoundForMessages={true}` |
-| **Custom Sound For Messages** | Specifies a custom sound file to play when new messages arrive. | `customSoundForMessages="sound.mp3"` |
-| **Smart Replies Keywords** | Sets the keywords on which the smart replies should be triggered in the message list. | `smartRepliesKeywords={['why', 'how']}` |
-| **Smart Replies Delay Duration** | Sets the delay duration (in milliseconds) before smart replies are shown. | `smartRepliesDelayDuration={5000}` |
-| **Start From Unread Messages** | When set to true, the chat will load from the first unread message if unread messages exist, otherwise loads from the latest messages. Default is false. | `startFromUnreadMessages={true}` |
-| **Show Mark Unread Option** | When set to true, shows the "Mark Unread" option in the message actions menu. This option will only appear for received messages, not for the user's own messages. Default is false. | `showMarkAsUnreadOption={true}` |
-| **Empty View** | Custom empty state view to display when there are no messages. | `emptyView={
-
-```ts
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
@@ -820,300 +527,17 @@ export function MessageListDemo() {
}
```
-
+### headerView
-
-```js
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import {
- CometChatMessageList,
- ChatConfigurator,
- CometChatActionsIcon,
-} from "@cometchat/chat-uikit-react";
-
-export function MessageListDemo() {
- const [chatUser, setChatUser] = React.useState(null);
-
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
-
- const getCustomOptions = (loggedInUser, message, theme, group) => {
- const defaultOptions = ChatConfigurator.getDataSource().getMessageOptions(
- loggedInUser,
- message,
- group
- );
- const myView = new CometChatActionsIcon({
- id: "custom id",
- title: "your custom title for options",
- iconURL: "your custom icon url for options",
- onClick: () => console.log("custom action"),
- });
- defaultOptions.push(myView);
- return defaultOptions;
- };
-
- const getTemplates = () => {
- let templates = ChatConfigurator.getDataSource().getAllMessageTemplates();
- templates.map((data) => {
- data.options = (loggedInUser, message, group) =>
- getCustomOptions(loggedInUser, message, group);
- });
- return templates;
- };
-
- return chatUser ? (
-
-
-
-
-***
-
-#### Separator DateTime Format
-
-The `separatorDateTimeFormat` property allows you to customize the **Date Separator** timestamp displayed in the Message List.
-
-Default Date Time Format:
-
-```javascript
-new CalendarObject({
- today: "today" // Example: "today"
- yesterday: "yesterday", // Example: "yesterday"
- otherDays: `DD MMM, YYYY`, // Example: "25 Jan, 2025"
-});
-```
-
-The following example demonstrates how to modify the **Date Separator** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject).
-
-
-
-```ts
-import {
- CometChatMessageList,
- CalendarObject,
-} from "@cometchat/chat-uikit-react";
-
-// Define a custom date format pattern
-function getDateFormat() {
- const dateFormat = new CalendarObject({
- today: `hh:mm A`, // Example: "10:30 AM"
- yesterday: `[yesterday]`, // Example: "yesterday"
- otherDays: `DD/MM/YYYY`, // Example: "25/05/2025"
- });
- return dateFormat;
-}
-
-// Apply the custom format to the CometChatMessageList component
-
-
-
-
-
-
-**Fallback Mechanism**
-
-* If you **do not** pass any property in the [**CalendarObject**](/ui-kit/react/localize#calendarobject), the component will first check the [**global configuration**](/ui-kit/react/localize#customisation). If the property is **also missing in the global configuration**, it will **fallback to the component's default formatting**.
-
-
-
-***
-
-#### Sticky DateTime Format
-
-The `stickyDateTimeFormat` property allows you to customize the **Sticky Date** timestamp displayed in the Message List.
-
-!\[]\(Screenshot HERE)
-
-Default Date Time Format:
-
-```javascript
-new CalendarObject({
- today: "today" // Example: "today"
- yesterday: "yesterday", // Example: "yesterday"
- otherDays: `DD MMM, YYYY`, // Example: "25 Jan, 2025"
-});
-```
-
-The following example demonstrates how to modify the **Sticky Date** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject).
-
-
-
-```ts
-import {
- CometChatMessageList,
- CalendarObject,
-} from "@cometchat/chat-uikit-react";
-
-// Define a custom date format pattern
-function getDateFormat() {
- const dateFormat = new CalendarObject({
- today: `hh:mm A`, // Example: "10:30 AM"
- yesterday: `[yesterday]`, // Example: "yesterday"
- otherDays: `DD/MM/YYYY`, // Example: "25/05/2025"
- });
- return dateFormat;
-}
-
-// Apply the custom format to the CometChatMessageList component
-
-
-
-
-
-
-**Fallback Mechanism**
-
-* If you **do not** pass any property in the [**CalendarObject**](/ui-kit/react/localize#calendarobject), the component will first check the [**global configuration**](/ui-kit/react/localize#customisation). If the property is **also missing in the global configuration**, it will **fallback to the component's default formatting**.
-
-
-
-***
-
-#### Message SentAt DateTime Format
-
-The `messageSentAtDateTimeFormat` property allows you to customize the **Message SentAt** timestamp displayed in the Message List.
-
-Default Date Time Format:
-
-```javascript
-new CalendarObject({
- today: "hh:mm A" // Example: "12:00 PM"
- yesterday: "hh:mm A", // Example: "01:00 AM"
- otherDays: `hh:mm A`, // Example: "09:30 PM"
-});
-```
-
-The following example demonstrates how to modify the **Message SentAt** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject).
-
-
-
-```ts
-import {
- CometChatMessageList,
- CalendarObject,
-} from "@cometchat/chat-uikit-react";
-
-// Define a custom date format pattern
-function getDateFormat() {
- const dateFormat = new CalendarObject({
- today: `hh:mm A`, // Example: "10:30 AM"
- yesterday: `[yesterday]`, // Example: "yesterday"
- otherDays: `DD/MM/YYYY`, // Example: "25/05/2025"
- });
- return dateFormat;
-}
-
-// Apply the custom format to the CometChatMessageList component
-
-
-
-
-
-
-**Fallback Mechanism**
-
-* If you **do not** pass any property in the [**CalendarObject**](/ui-kit/react/localize#calendarobject), the component will first check the [**global configuration**](/ui-kit/react/localize#customisation). If the property is **also missing in the global configuration**, it will **fallback to the component's default formatting**.
-
-
-
-***
-
-#### Message Info DateTime Format
-
-The `messageInfoDateTimeFormat` property allows you to customize the **Message Info** timestamp displayed in the Message List.
-
-Default Date Time Format:
-
-```ruby
-new CalendarObject({
- today: `DD MMM, hh:mm A`, // Example: "29 Jan, 04:34 AM"
- yesterday: `DD MMM, hh:mm A`, // Example: "29 Jan, 04:34 AM"
- otherDays: `DD MMM, hh:mm A`, // Example: "29 Jan, 04:34 AM"
-});
-```
-
-The following example demonstrates how to modify the **Message Info** timestamp format using a custom [`CalendarObject`](/ui-kit/react/localize#calendarobject).
-
-
-
-```ts
-import {
- CometChatMessageList,
- CalendarObject,
-} from "@cometchat/chat-uikit-react";
-
-// Define a custom date format pattern
-function getDateFormat() {
- const dateFormat = new CalendarObject({
- today: `hh:mm A`, // Example: "10:30 AM"
- yesterday: `[yesterday]`, // Example: "yesterday"
- otherDays: `DD/MM/YYYY`, // Example: "25/05/2025"
- });
- return dateFormat;
-}
-
-// Apply the custom format to the CometChatMessageList component
-
-
-
-
-
-
-**Fallback Mechanism**
-
-* If you **do not** pass any property in the [**CalendarObject**](/ui-kit/react/localize#calendarobject), the component will first check the [**global configuration**](/ui-kit/react/localize#customisation). If the property is **also missing in the global configuration**, it will **fallback to the component's default formatting**.
-
-
-
-***
-
-#### Headerview
-
-You can set custom headerView to the Message List component using the following method.
-
-The customized chat interface is displayed below.
+Custom view above the message list.
-Use the following code to achieve the customization shown above.
-
-```ts
+```ts lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageList } from "@cometchat/chat-uikit-react";
@@ -1147,49 +571,9 @@ export function MessageListDemo() {
) : null;
}
```
-
-
-
-```js
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageList } from "@cometchat/chat-uikit-react";
-import notesIcon from "../../assets/notesIcon.svg";
-import pinnedIcon from "../../assets/pinnedIcon.svg";
-import savedIcon from "../../assets/savedIcon.svg";
-
-export function MessageListDemo() {
- const [chatUser, setChatUser] = React.useState(null);
-
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
-
- const getHeaderView = () => {
- return (
-
-
-
-```css
+
+```css lines
.header-view {
display: flex;
width: 100%;
@@ -1223,28 +607,20 @@ export function MessageListDemo() {
align-items: center;
}
```
-
-
-***
-
-#### FooterView
-
-You can set custom footerview to the Message List component using the following method.
+### footerView
-The customized chat interface is displayed below.
+Custom view below the message list.
-Use the following code to achieve the customization shown above.
-
-```ts
+```ts lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageList } from "@cometchat/chat-uikit-react";
@@ -1280,51 +656,9 @@ export function MessageListDemo() {
) : null;
}
```
-
-
-
-
-```js
-import React from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import { CometChatMessageList } from "@cometchat/chat-uikit-react";
-import iceBreakersIcon from "../../assets/iceBreakersIcon.svg";
-import callIcon from "../../assets/callIcon.svg";
-import instagramIcon from "../../assets/instagramIcon.svg";
-import snapchatIcon from "../../assets/snapchatIcon.svg";
-
-export function MessageListDemo() {
- const [chatUser, setChatUser] = React.useState(null);
-
- React.useEffect(() => {
- CometChat.getUser("uid").then((user) => {
- setChatUser(user);
- });
- }, []);
-
- const getFooterView = () => {
- return (
-
-
-
-```css
+
+```css lines
.footer-view {
display: flex;
width: 100%;
@@ -1358,202 +692,105 @@ export function MessageListDemo() {
align-items: center;
}
```
-
-
-***
-
-#### TextFormatters
+### Date Time Format Customization
-Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source. To configure the existing Mentions look and feel check out [CometChatMentionsFormatter](/ui-kit/react/mentions-formatter-guide)
-
-
-
-```ts
-import { CometChatTextFormatter } from "@cometchat/chat-uikit-react";
-import DialogHelper from "./Dialog";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-
-class ShortcutFormatter extends CometChatTextFormatter {
- private shortcuts: { [key: string]: string } = {};
- private dialogIsOpen: boolean = false;
- private dialogHelper = new DialogHelper();
- private currentShortcut: string | null = null; // Track the currently open shortcut
-
- constructor() {
- super();
- this.setTrackingCharacter("!");
- CometChat.callExtension("message-shortcuts", "GET", "v1/fetch", undefined)
- .then((data: any) => {
- if (data && data.shortcuts) {
- this.shortcuts = data.shortcuts;
- }
- })
- .catch((error) => console.log("error fetching shortcuts", error));
- }
-
- onKeyDown(event: KeyboardEvent) {
- const caretPosition =
- this.currentCaretPosition instanceof Selection
- ? this.currentCaretPosition.anchorOffset
- : 0;
- const textBeforeCaret = this.getTextBeforeCaret(caretPosition);
-
- const match = textBeforeCaret.match(/!([a-zA-Z]+)$/);
- if (match) {
- const shortcut = match[0];
- const replacement = this.shortcuts[shortcut];
- if (replacement) {
- // Close the currently open dialog, if any
- if (this.dialogIsOpen && this.currentShortcut !== shortcut) {
- this.closeDialog();
- }
- this.openDialog(replacement, shortcut);
- }
- }
- }
+#### separatorDateTimeFormat
- getCaretPosition() {
- if (!this.currentCaretPosition?.rangeCount) return { x: 0, y: 0 };
- const range = this.currentCaretPosition?.getRangeAt(0);
- const rect = range.getBoundingClientRect();
- return {
- x: rect.left,
- y: rect.top,
- };
- }
+```ts lines
+import {
+ CometChatMessageList,
+ CalendarObject,
+} from "@cometchat/chat-uikit-react";
- openDialog(buttonText: string, shortcut: string) {
- this.dialogHelper.createDialog(
- () => this.handleButtonClick(buttonText),
- buttonText
- );
- this.dialogIsOpen = true;
- this.currentShortcut = shortcut;
- }
+function getDateFormat() {
+ const dateFormat = new CalendarObject({
+ today: `hh:mm A`,
+ yesterday: `[yesterday]`,
+ otherDays: `DD/MM/YYYY`,
+ });
+ return dateFormat;
+}
- closeDialog() {
- this.dialogHelper.closeDialog(); // Use DialogHelper to close the dialog
- this.dialogIsOpen = false;
- this.currentShortcut = null;
- }
+
+#### messageSentAtDateTimeFormat
-
-```tsx
-import React from "react";
-import ReactDOM from "react-dom";
+```ts lines
+import {
+ CometChatMessageList,
+ CalendarObject,
+} from "@cometchat/chat-uikit-react";
-interface DialogProps {
- onClick: () => void;
- buttonText: string;
+function getDateFormat() {
+ const dateFormat = new CalendarObject({
+ today: `hh:mm A`,
+ yesterday: `[yesterday]`,
+ otherDays: `DD/MM/YYYY`,
+ });
+ return dateFormat;
}
-const Dialog: React.FC = ({ onClick, buttonText }) => {
- console.log("buttonText", buttonText);
-
- return (
-
+### textFormatters
-
-```tsx
+Custom text formatters for message content. To configure mentions, see [CometChatMentionsFormatter](/ui-kit/react/mentions-formatter-guide).
+
+```tsx lines
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageList } from "@cometchat/chat-uikit-react";
@@ -1578,8 +815,22 @@ export function MessageListDemo() {
}
```
-
+## Theme and Styling
-
+Using CSS, customize the look and feel of the component. The root CSS class is `.cometchat-message-list`.
+
+
+
+
+
+```tsx lines
+
-The Message Bubble structure can typically be broken down into the following views:
+
-1. **Leading view**: This is where the sender's avatar is displayed. It's typically on the left of the Message Bubble for messages from others and on the right for messages from the current user.
+| Field | Value |
+| --- | --- |
+| Purpose | Data structure defining how message bubbles render in the message list — controls header, content, footer, bottom, status info, reply, and bubble views per message type/category |
+| Package | `@cometchat/chat-uikit-react` |
+| Import | `import { CometChatMessageTemplate } from "@cometchat/chat-uikit-react";` |
+| Used in experiences | Passed to `CometChatMessageList` via the `templates` prop |
+| Copy-paste base | See [Base Code](#base-code--stylesheet) below |
+| Primary output | Custom message bubble rendering |
+| Primary hook points | `headerView`, `contentView`, `footerView`, `bottomView`, `bubbleView`, `statusInfoView`, `replyView`, `options` |
+| CSS root class | N/A (renders inside `.cometchat-message-bubble`) |
+| Real-time events | None (rendering blueprint only) |
-2. **Header view**: This displays the sender's name and is especially useful in group chats where multiple users are sending messages.
+
-3. **Reply view**: This view can be used to extend the Message Bubble with additional elements. It's typically placed above the Content view.
+## Base Code and Stylesheet
-4. **Content view**: This is the core of the Message Bubble where the message content (text, images, videos, etc.) is displayed.
+MessageTemplate is a data structure, not a standalone rendered component. It defines how message bubbles appear inside `CometChatMessageList`.
-5. **Bottom view**: This view can be used to extend the Message Bubble with additional elements, such as link previews or a 'load more' button for long messages. It's typically placed beneath the Content view.
-
-6. **Thread view**: This is where the thread reply icon and reply counts are displayed. It's located below the footer view.
-
-7. **Footer view**: This is where the reactions are displayed. It's located at the bottom of the Message Bubble.
+### Structure
-8. **Status Info view**: This is where the timestamp of the message and its delivery or read status are displayed. It's located inside the Message Bubble just below the content view.
+The message bubble structure breaks down into these views:
-***
+1. **Leading view** — Sender's avatar
+2. **Header view** — Sender's name (useful in group chats)
+3. **Reply view** — Preview of the replied message
+4. **Content view** — Core message content (text, images, videos, etc.)
+5. **Bottom view** — Link previews or "load more" button for long messages
+6. **Thread view** — Thread reply icon and reply counts
+7. **Footer view** — Reactions display
+8. **Status Info view** — Timestamp and delivery/read status
### Properties
-MessageTemplate provides you with methods that allow you to alter various properties of the Message Bubble. These properties include aspects such as the `type` and `category` of a message, the appearance and behavior of the header, content, and footer sections of the message bubble,
-
-1. **type**
-
- Using `type` you can set the type of CometChatMessage, This will map your MessageTemplate to the corresponding CometChatMessage. You can set the MessageTemplates Type using the following code snippet.
-
-2. **category**
-
- Using `category` you can set the category of a MessageTemplate. This will create a MessageTemplate with the specified category and link it with a CometChatMessage of the same category.
-
- Please refer to our guide on [Message Categories](/sdk/javascript/message-structure-and-hierarchy) for a deeper understanding of message categories.
-
-3. **headerView**
-
- The `headerView` method allows you to assign a custom header view to the Message Bubble. By default, it is configured to display the sender's name.
-
-4. **contentView**
-
- The `contentView` method allows you to assign a custom content view to the Message Bubble. By default, it displays the Text Bubble, Image Bubble, File Bubble, Audio Bubble, or Video Bubble depending on the message type.
-
-5. **footerView**
-
- The `footerView` method allows you to assign a custom Footer view to the Message Bubble. By default it shows thr reactions for the message bubble.
-
-6. **bottomView**
-
- The `bottomView` method allows you to assign a custom Bottom view to the Message Bubble. By defuault is has buttons such as link previews or a 'load more' button for long messages.
-
-7. **bubbleView**
-
- The `bubbleView` method allows you to assign a custom Bubble view to the Message Bubble. By default, headerView, contentView, statusInfoView and footerView together form a message bubble.
-
-8. **statusInfoView**
-
- The `statusInfoView` method allows you to assign a custom status info view to the Message Bubble. By default, it displays the receipt and timestamp.
-
-9. **replyView**
-
- The `replyView` method allows you to assign a custom reply view to the Message Bubble. By default, it displays the preview of the replied message.
-
-10. **options**
-
- The `options` lets you set the list of actions that a user can perform on a message. This includes actions like reacting to, editing, or deleting a message.
-
-***
-
-## Customization
-
-Let's dive into how you can use the [properties](#properties) of MessageTemplate to customize an existing template or add a new one to the [MessageList](/ui-kit/react/message-list) component.
-
-The first step is to fetch the list of existing templates when you want to modify or add to them. This can be done using the getAllMessageTemplates() method from the DataSource of the CometChatUIKit class.
-
-```javascript
-let definedTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates();
-```
-
-### Existing Templates
-
-You will need to first get the MessageTemplate object for the type of message you want to customize. You will be customizing the text message bubble here. The code snippet to get the Text MessageTemplate is as follows.
-
-
-
-```ts
+| Property | Type | Description |
+| --- | --- | --- |
+| `type` | `string` | Maps the template to a CometChat message type |
+| `category` | `string` | Maps the template to a CometChat message category |
+| `headerView` | `(message: CometChat.BaseMessage) => JSX.Element` | Custom header (default: sender name) |
+| `contentView` | `(message: CometChat.BaseMessage) => JSX.Element` | Custom content (default: text/image/video/audio/file bubble) |
+| `footerView` | `(message: CometChat.BaseMessage) => JSX.Element` | Custom footer (default: reactions) |
+| `bottomView` | `(message: CometChat.BaseMessage) => JSX.Element` | Custom bottom section (default: link previews) |
+| `bubbleView` | `(message: CometChat.BaseMessage, alignment: MessageBubbleAlignment) => JSX.Element` | Replaces the entire bubble |
+| `statusInfoView` | `(message: CometChat.BaseMessage) => JSX.Element` | Custom status info (default: receipt + timestamp) |
+| `replyView` | `(message: CometChat.BaseMessage) => JSX.Element` | Custom reply preview |
+| `options` | `(loggedInUser: CometChat.User, message: CometChat.BaseMessage, group?: CometChat.Group) => CometChatActionsIcon[]` | Custom action sheet options |
+
+### Fetching Existing Templates
+
+```ts lines
import {
CometChatUIKit,
CometChatUIKitConstants,
@@ -111,62 +72,57 @@ for (let i = 0; i < allTemplates.length; i++) {
}
```
-
+### Passing Templates to MessageList
-
-```js
-import {
- CometChatUIKit,
- CometChatUIKitConstants,
-} from "@cometchat/chat-uikit-react";
+```ts lines
+import { CometChatMessageList } from "@cometchat/chat-uikit-react";
-let allTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates();
-for (let i = 0; i < allTemplates.length; i++) {
- if (allTemplates[i].type === CometChatUIKitConstants.MessageTypes.text) {
- //customize allTemplates[i]
- }
-}
+
+## Functionality
-
+MessageTemplate is a configuration object, not a rendered component. It does not accept props directly — instead, its properties are set when constructing or modifying template instances. See the [Properties](#properties) table above for the full API.
-You will be using [Message List](/ui-kit/react/message-list) component using the `templates` prop of `CometChatMessageList` component.
+## Actions
-
-
-```ts
-import { CometChatMessageList } from "@cometchat/uikit-react";
+MessageTemplate does not expose callback props. Message interactions (thread replies, reactions, edits, deletes) are handled by the [Message List](/ui-kit/react/message-list) component. The `options` property controls the action sheet items for long-press on a message bubble.
-
+MessageTemplate does not have filters. To control which messages appear, use `messagesRequestBuilder` on the [Message List](/ui-kit/react/message-list) component.
-
-```js
-import { CometChatMessageList } from "@cometchat/uikit-react";
+## Events
-
+## Advanced: Custom View Slots
-
+Each view slot on a MessageTemplate can be overridden to customize how message bubbles render.
+
+### Slot Catalog
-#### HeaderView
+| Slot | Params | What it replaces | Section |
+| --- | --- | --- | --- |
+| `headerView` | `(message: CometChat.BaseMessage) => JSX.Element` | Sender name area | Header |
+| `contentView` | `(message: CometChat.BaseMessage) => JSX.Element` | Message content (text/image/video/audio/file bubble) | Content |
+| `footerView` | `(message: CometChat.BaseMessage) => JSX.Element` | Reactions area | Footer |
+| `bottomView` | `(message: CometChat.BaseMessage) => JSX.Element` | Link previews / load more | Bottom |
+| `bubbleView` | `(message: CometChat.BaseMessage, alignment: MessageBubbleAlignment) => JSX.Element` | Entire message bubble | Whole item |
+| `statusInfoView` | `(message: CometChat.BaseMessage) => JSX.Element` | Timestamp + receipt | Status info |
+| `replyView` | `(message: CometChat.BaseMessage) => JSX.Element` | Reply preview | Reply |
+| `options` | `(loggedInUser, message, group?) => CometChatActionsIcon[]` | Long-press action sheet | Options |
-The `headerView` method of MessageTemplate allows you to add custom views to the header of your message bubbles. In the example below, we will add a custom header view of every text message in the MessageList.
+### headerView
+
+Custom header for message bubbles. Default displays sender name.
-
-
-```ts
-import React, { useEffect, useState } from "react";
+```ts lines
+import React, { useEffect } from "react";
import {
CometChatMessageList,
CometChatUIKit,
@@ -175,9 +131,7 @@ import {
import { CometChat } from "@cometchat/chat-sdk-javascript";
const CustomMessageTemplate = () => {
- const [templates, setTemplates] = React.useState(
- []
- );
+ const [templates, setTemplates] = React.useState([]);
const [chatGroup, setChatGroup] = React.useState();
useEffect(() => {
@@ -217,66 +171,9 @@ const CustomMessageTemplate = () => {
export { CustomMessageTemplate };
```
-
-
-
-```js
-import React, { useEffect, useState } from "react";
-import {
- CometChatMessageList,
- CometChatUIKit,
- CometChatUIKitConstants,
-} from "@cometchat/chat-uikit-react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-
-const CustomMessageTemplate = () => {
- const [templates, setTemplates] = useState([]);
- const [chatGroup, setChatGroup] = useState(null);
-
- useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
-
- let definedTemplates =
- CometChatUIKit.getDataSource().getAllMessageTemplates();
- const template = definedTemplates.map((templates) => {
- if (
- templates.type === CometChatUIKitConstants.MessageTypes.text &&
- templates.category === CometChatUIKitConstants.MessageCategory.message
- ) {
- templates.headerView = (message: CometChat.BaseMessage) =>
- getHeaderView(message);
- return templates;
- }
- return templates;
- });
- setTemplates(template);
- }, []);
-
- const getHeaderView = (message: CometChat.BaseMessage) => {
- return <> {message.getSender().getName()} • 🗓️ In meeting;
- };
-
- return (
-
+### contentView
-
-
-#### Contentview
-
-The `contentview` method of MessageTemplate allows you to add a custom view to the content of your message bubbles. In the example below, we will add a custom layout to the content view of every text message in the MessageList.
+Custom content for message bubbles. Default displays text/image/video/audio/file bubble depending on message type.
@@ -284,7 +181,7 @@ The `contentview` method of MessageTemplate allows you to add a custom view to t
-```ts
+```ts lines
import React from "react";
import {
CometChatMessageList,
@@ -296,9 +193,7 @@ import { CometChat } from "@cometchat/chat-sdk-javascript";
import bannerImage from "../../assets/banner.svg";
const CustomMessageTemplate = () => {
- const [templates, setTemplates] = React.useState(
- []
- );
+ const [templates, setTemplates] = React.useState([]);
const [chatGroup, setChatGroup] = React.useState();
React.useEffect(() => {
@@ -322,107 +217,7 @@ const CustomMessageTemplate = () => {
return (
- );
- };
-
- const getMessageRequestBuilder = () => {
- const CUSTOM_MESSAGE_TYPE = "customType";
- let categories = CometChatUIKit.getDataSource().getAllMessageCategories();
- categories.push(CometChatUIKitConstants.MessageCategory.custom);
- let types = CometChatUIKit.getDataSource().getAllMessageTypes();
- types.push(CUSTOM_MESSAGE_TYPE);
- return new CometChat.MessagesRequestBuilder()
- .setCategories(categories)
- .setTypes(types)
- .hideReplies(true)
- .setLimit(30);
- };
-
- return (
-
-
-
-```js
-import React from "react";
-import {
- CometChatMessageList,
- CometChatUIKit,
- CometChatUIKitConstants,
- CometChatMessageTemplate,
-} from "@cometchat/chat-uikit-react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import bannerImage from "../../assets/banner.svg";
-
-const CustomMessageTemplate = () => {
- const [templates, setTemplates] = React.useState([]);
- const [chatGroup, setChatGroup] = React.useState();
-
- React.useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
-
- let definedTemplates =
- CometChatUIKit.getDataSource().getAllMessageTemplates();
- const CUSTOM_MESSAGE_TYPE = "customType";
- let customMessageTemplate = new CometChatMessageTemplate({
- type: CUSTOM_MESSAGE_TYPE,
- category: CometChatUIKitConstants.MessageCategory.custom,
- contentView: (message: CometChat.BaseMessage) => getContentView(message),
- });
- definedTemplates.push(customMessageTemplate);
- setTemplates(definedTemplates);
- }, []);
-
- const getContentView = (message: CometChat.BaseMessage) => {
- return (
-
-
-```css CometChatNoSSR.css
+```css title="CometChatNoSSR.css" lines
.messages-wrapper {
- width: 100%;
- height: 100%;
- display: flex;
- flex-direction: column;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
}
.empty-conversation {
- height: 100%;
- width: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- background: white;
- color: var(--cometchat-text-color-secondary, #727272);
- font: var(--cometchat-font-body-regular, 400 14px Roboto);
+ height: 100%;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: white;
+ color: var(--cometchat-text-color-secondary, #727272);
+ font: var(--cometchat-font-body-regular, 400 14px Roboto);
}
.cometchat .cometchat-message-composer {
- border-radius: 0px;
+ border-radius: 0px;
}
```
-
-In the code snippet above, ensure you select either a user or a group based on your chat requirement. You can also determine this dynamically depending on the conversation type.
+Key points:
+- `CometChat.getUser(UID)` fetches the user object from the SDK — you need a real user object, not a manually constructed one.
+- Pass either `user` or `group` to the message components, never both.
+- The highlighted lines show where to set your credentials.
-#### **Fetching a User (One-on-One Chat)**
+---
-```javascript
-const UID = "cometchat-uid-1";
-CometChat.getUser(UID).then(
- user => {
- setSelectedUser(user);
- }, error => {
- console.log("User fetching failed with error:", error);
- }
-);
-```
+## Switching Between User and Group Chat
-#### **Fetching a Group (Group Chat)**
+To load a group chat instead of one-to-one, replace the `getUser` call with `getGroup`:
-```javascript
-const GUID = "GUID"
-CometChat.getGroup(GUID).then(
- group => {
- setSelectedGroup(group);
- }, error => {
- console.log("User fetching failed with error:", error);
- }
-);
-```
+```tsx highlight={1} lines
+const GUID = "GUID"; // Replace with your actual Group ID
-### **Step 4: Disabling SSR for `CometChatNoSSR.tsx` in Next.js**
+CometChat.getGroup(GUID)
+ .then((group) => setSelectedGroup(group))
+ .catch((error) => console.error("Failed to fetch group:", error));
+```
-In this update, we will **disable Server-Side Rendering (SSR) for `CometChatNoSSR.tsx`** while keeping the rest of the application’s SSR functionality intact. This ensures that the **CometChat UI Kit components load only on the client-side**, preventing SSR-related issues.
+---
-#### **Disabling SSR in `index.tsx`**
+## Step 2 — Disable SSR in Your Page
-Modify your `index.tsx` file to dynamically import the `CometChatNoSSR.tsx` component with `{ ssr: false }`.
+Dynamically import `CometChatNoSSR` with `ssr: false` so it only loads client-side.
-```tsx index.tsx
-import { Inter } from "next/font/google";
+```tsx title="index.tsx" lines
import dynamic from "next/dynamic";
+import "@cometchat/chat-uikit-react/css-variables.css";
-import '@cometchat/chat-uikit-react/css-variables.css';
-
-const inter = Inter({ subsets: ["latin"] });
-
-// Dynamically import CometChat component with SSR disabled
-const CometChatComponent = dynamic(() => import("../CometChatNoSSR/CometChatNoSSR"), {
- ssr: false,
-});
+const CometChatComponent = dynamic(
+ () => import("../CometChatNoSSR/CometChatNoSSR"),
+ { ssr: false }
+);
export default function Home() {
return
+
+```bash lines
+npm run dev
```
-
-***
-
-### **Step 6: Run the project**
-
+
+
+```bash lines
+pnpm dev
```
-npm run dev
+
+
+```bash lines
+yarn dev
```
+
+
-## **Next Steps**
-
-### **Enhance the User Experience**
+You should see the chat window load with the conversation for the UID you set.
-* **[Advanced Customizations](/ui-kit/react/theme)** – Personalize the chat UI to align with your brand.
+---
-***
+## Next Steps
+
+
+
+ Customize colors, fonts, and styles to match your brand
+
+
+ Browse all prebuilt UI components
+
+
+ Chat features included out of the box
+
+
diff --git a/ui-kit/react/next-tab-based-chat.mdx b/ui-kit/react/next-tab-based-chat.mdx
index 91f61a656..afd95dcc1 100644
--- a/ui-kit/react/next-tab-based-chat.mdx
+++ b/ui-kit/react/next-tab-based-chat.mdx
@@ -1,90 +1,92 @@
---
-title: "Building A Messaging UI With Tabs, Sidebar, And Message View"
-sidebarTitle: "Tab Based Chat Experience"
+title: "Tab-Based Chat"
+sidebarTitle: "Tab-Based Chat"
+description: "Build a tab-based messaging UI with chats, calls, users, and groups in Next.js with CometChat UI Kit."
---
-This guide walks you through creating a **tab-based messaging UI** using **React** and **CometChat UIKit**. The UI will include different sections for **Chats, Calls, Users, and Groups**, allowing seamless navigation.
+
-[
](https://link.cometchat.com/next-tabs-sidebar-message)
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` |
+| Framework | Next.js |
+| Components | `CometChatConversations`, `CometChatCallLogs`, `CometChatUsers`, `CometChatGroups`, `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` |
+| Layout | Tabbed sidebar (Chats, Calls, Users, Groups) + message view |
+| Prerequisite | Complete [Next.js Integration](/ui-kit/react/next-js-integration) Steps 1–5 first |
+| SSR | Dynamic import with `ssr: false` — CometChat requires browser APIs |
+| Pattern | Full-featured messaging app with multiple sections |
-> **Tip:** You can **fork** the sandbox, insert your **CometChat credentials** (App ID, Region, Auth Key.) in the code, and immediately preview how the UI and messages respond in real time.
+
-***
+This guide builds a tabbed messaging UI — Chats, Calls, Users, and Groups tabs in the sidebar, with a message view on the right. Good for full-featured apps that need more than just conversations.
-## **User Interface Preview**
+This assumes you've already completed [Next.js Integration](/ui-kit/react/next-js-integration) (project created, UI Kit installed, CSS imported).
-This layout consists of:
-
-1. **Sidebar (Conversation List)** – Displays recent conversations with active users and groups.
-2. **Message View** – Shows the selected chat with real-time messages.
-3. **Message Input Box** – Allows users to send messages seamlessly.
-
-***
-
-## **Step-by-Step Guide**
-
-### **Step 1: Create a Tab Component**
-
-To manage navigation, let's build a **`CometChatTabs`** component. This component will render different tabs and allow switching between sections dynamically.
+[](https://link.cometchat.com/next-tabs-sidebar-message)
-#### **Folder Structure**
+> Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time.
-Create a `CometChatTabs` folder inside your `src` directory and add the following files:
+---
-```php
-public/
-├── assets # These are the images you need to save
-│ ├── chats.svg
-│ ├── calls.svg
-│ ├── users.svg
-│ ├── groups.svg
-src/
-│── CometChatTabs/
-│ ├── CometChatTabs.tsx
-│ ├── CometChatTabs.css
-```
+## What You're Building
-#### **Download the Icons**
+Three sections working together:
-These icons are available in the **CometChat UI Kit assets folder**. You can find them at:\
-🔗 [GitHub Assets Folder](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app/src/assets)
+1. **Tab bar** — switches between Chats, Calls, Users, and Groups
+2. **Sidebar** — renders the list for the active tab
+3. **Message view** — header + messages + composer for the selected item
-***
+---
-#### **Implementation**
+## Step 1 — Create the Tab Component
+
+
+
+
+
+
+
+
+
+
+Tab icons need to be placed in `public/assets/`. Download them from the [CometChat UI Kit assets folder on GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app/src/assets).
+
+
+
+
+
+
+
-```tsx CometChatTabs.tsx
+```tsx title="CometChatTabs.tsx" lines
import { useState } from "react";
import "./CometChatTabs.css";
-// Define icon paths for each tab
const chatsIcon = "/assets/chats.svg";
const callsIcon = "/assets/calls.svg";
const usersIcon = "/assets/users.svg";
const groupsIcon = "/assets/groups.svg";
-// CometChatTabs component to display tab options
export const CometChatTabs = (props: {
- onTabClicked?: (tabItem: { name: string; icon?: string }) => void; // Callback when a tab is clicked
- activeTab?: string; // Name of the currently active tab
+ onTabClicked?: (tabItem: { name: string; icon?: string }) => void;
+ activeTab?: string;
}) => {
- // Destructure props with default fallback
- const {
- onTabClicked = () => {}, // Fallback to no-op if not provided
- activeTab,
- } = props;
-
- // State to track the currently hovered tab
+ const { onTabClicked = () => {}, activeTab } = props;
const [hoverTab, setHoverTab] = useState("");
- // Array of tab items with their labels and icons
const tabItems = [
{ name: "CHATS", icon: chatsIcon },
{ name: "CALLS", icon: callsIcon },
@@ -94,7 +96,6 @@ export const CometChatTabs = (props: {
return (
-Use the following code to achieve the customization shown above.
-
-Use the following code to achieve the customization shown above.
-
+
-***
+```tsx lines
+
-***
+
-
);
}
```
-
-
+
-
- ) : null;
-}
-```
+Fires when the threaded message bubble is clicked.
-
-
- ) : null;
-}
-```
-
-
-
- ) : null;
-}
-```
-
-
-
- ) : null;
-}
-```
-
-
-
- ) : null;
-}
-```
-
-
-
- ) : null;
-}
-```
+## Filters
-
-
-
-
-
- ) : null;
-}
-```
-
-
-
- ) : null;
-}
-```
-
-
-
- ) : null;
-}
-```
-
-
-Use the following code to achieve the customization shown above.
-
-
- );
- };
-
- return chatUser ? (
-
-
- ) : null;
-}
-```
-
-
-Use the following code to achieve the customization shown above.
-
-
- );
- };
-
- return chatUser ? (
-
-
- ) : null;
-}
-```
-
-
-
- );
-};
-
-export default class DialogHelper {
- private dialogContainer: HTMLDivElement | null = null;
+
+
+
+```tsx lines
+
-The Message Bubble structure can typically be broken down into the following views:
+
-
- {chatGroup && (
-
- );
-};
-
-export { CustomMessageTemplate };
-```
-
-
@@ -284,7 +181,7 @@ The `contentview` method of MessageTemplate allows you to add a custom view to t
- 
-
-
-
-
-
- Blazer Casual
-
- Men's Tailored Regular Fit Blazer
-
-
-
-
- $37.99{" "}
- $74.00
-
-
- Free Delivery
-
- Buy now
-
- {chatGroup && (
-
- );
-};
-
-export { CustomMessageTemplate };
-```
-
-
-
-```css
+
+```css lines
.content-view__header-banner {
border-radius: 12px;
}
@@ -532,14 +322,12 @@ export { CustomMessageTemplate };
font: 500 14px/1.2 Roboto;
}
```
-
-
-#### BottomView
+### bottomView
-The `bottomView` method of MessageTemplate allows you to add a custom button view to your message bubbles. In the example below, we will add a custom bottom view to every text message in the MessageList.
+Custom bottom section for message bubbles. Default displays link previews or "load more" for long messages.
@@ -547,8 +335,8 @@ The `bottomView` method of MessageTemplate allows you to add a custom button vie
-```ts
-import React, { useEffect, useState } from "react";
+```ts lines
+import React, { useEffect } from "react";
import {
CometChatMessageList,
CometChatUIKit,
@@ -557,9 +345,7 @@ import {
import { CometChat } from "@cometchat/chat-sdk-javascript";
const CustomMessageTemplate = () => {
- const [templates, setTemplates] = React.useState(
- []
- );
+ const [templates, setTemplates] = React.useState([]);
const [chatGroup, setChatGroup] = React.useState();
useEffect(() => {
@@ -603,60 +389,9 @@ const CustomMessageTemplate = () => {
export { CustomMessageTemplate };
```
-
-
-
-
-```js
-import React, { useEffect, useState } from "react";
-import { CometChatMessageList, CometChatUIKit, CometChatUIKitConstants } from '@cometchat/chat-uikit-react';
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-
-const CustomMessageTemplate = () => {
- const [templates, setTemplates] = React.useState([]);
- const [chatGroup, setChatGroup] = React.useState();
-
- useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- })
-
- let definedTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates();
- const template = definedTemplates.map((templates) => {
- if (templates.type === CometChatUIKitConstants.MessageTypes.text &&
- templates.category === CometChatUIKitConstants.MessageCategory.message) {
- templates.bottomView = (message: CometChat.BaseMessage) => getBottomView(message)
- return templates;
- }
- return templates
- })
- setTemplates(template);
- }, []);
-
- const getBottomView = (message: CometChat.BaseMessage) => {
- return (
-
-
-
-```css
+
+```css lines
.cometchat .cometchat-message-bubble__body {
border-radius: 12px 12px 0px 0px;
}
@@ -684,7 +419,6 @@ export { CustomMessageTemplate };
justify-content: center;
align-items: center;
flex-shrink: 0;
- flex-shrink: 0;
-webkit-mask: url("../assets/infoIcon.svg") center center no-repeat;
mask: url("../assets/infoIcon.svg") center center no-repeat;
-webkit-mask-size: contain;
@@ -692,14 +426,12 @@ export { CustomMessageTemplate };
background-color: #f44649;
}
```
-
-
-#### FooterView
+### footerView
-The `footerView` method of MessageTemplate allows you to add a footer view to your message bubbles. In the example below, we will add a custom footer view to every text message in the MessageList.
+Custom footer for message bubbles. Default displays reactions.
@@ -707,8 +439,8 @@ The `footerView` method of MessageTemplate allows you to add a footer view to yo
-```ts
-import React, { useEffect, useState } from "react";
+```ts lines
+import React, { useEffect } from "react";
import {
CometChatMessageList,
CometChatUIKit,
@@ -717,9 +449,7 @@ import {
import { CometChat } from "@cometchat/chat-sdk-javascript";
const CustomMessageTemplate = () => {
- const [templates, setTemplates] = React.useState(
- []
- );
+ const [templates, setTemplates] = React.useState([]);
const [chatGroup, setChatGroup] = React.useState();
useEffect(() => {
@@ -766,72 +496,9 @@ const CustomMessageTemplate = () => {
export { CustomMessageTemplate };
```
-
-
-
-
-```js
-import React, { useEffect, useState } from "react";
-import {
- CometChatMessageList,
- CometChatUIKit,
- CometChatUIKitConstants,
-} from "@cometchat/chat-uikit-react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-
-const CustomMessageTemplate = () => {
- const [templates, setTemplates] = React.useState([]);
- const [chatGroup, setChatGroup] = React.useState();
-
- useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
-
- let definedTemplates =
- CometChatUIKit.getDataSource().getAllMessageTemplates();
- const template = definedTemplates.map((templates) => {
- if (
- templates.type === CometChatUIKitConstants.MessageTypes.text &&
- templates.category === CometChatUIKitConstants.MessageCategory.message
- ) {
- templates.footerView = (message: CometChat.BaseMessage) =>
- getFooterView(message);
- return templates;
- }
- return templates;
- });
- setTemplates(template);
- }, []);
-
- const getFooterView = (message: CometChat.BaseMessage) => {
- if (message.getReactions().length > 0) {
- return (
- <>
-
-
-
-```css
+
+```css lines
.cometchat .cometchat-message-bubble__body-footer-view {
display: flex;
align-items: center;
@@ -848,14 +515,12 @@ export { CustomMessageTemplate };
border-radius: 12px 12px 0px 0px;
}
```
-
-
-#### BubbleView
+### bubbleView
-The `bubbleView` method of MessageTemplate allows you to add a bubble view to your message bubbles. In the example below, we will add a custom bubble view to the text message in the MessageList.
+Replace the entire message bubble layout.
@@ -863,8 +528,8 @@ The `bubbleView` method of MessageTemplate allows you to add a bubble view to yo
-```ts
-import React, { useEffect, useState } from "react";
+```ts lines
+import React, { useEffect } from "react";
import {
CometChatMessageList,
CometChatUIKit,
@@ -882,9 +547,7 @@ import sentIcon from "../../assets/message-sent.svg";
import deliveredIcon from "../../assets/message-delivered.svg";
const CustomMessageTemplate = () => {
- const [templates, setTemplates] = React.useState(
- []
- );
+ const [templates, setTemplates] = React.useState([]);
const [chatGroup, setChatGroup] = React.useState();
useEffect(() => {
@@ -911,7 +574,7 @@ const CustomMessageTemplate = () => {
}, []);
const formatTime = (timestamp: number): string => {
- const date = new Date(timestamp * 1000); // Convert to milliseconds
+ const date = new Date(timestamp * 1000);
const hours = date.getHours();
const minutes = date.getMinutes();
const period = hours >= 12 ? "PM" : "AM";
@@ -974,113 +637,9 @@ const CustomMessageTemplate = () => {
export { CustomMessageTemplate };
```
-
-
-
-
-```js
-import React, { useEffect, useState } from "react";
-import { CometChatMessageList, CometChatUIKit, CometChatUIKitConstants,CometChatMessageTemplate,Receipts,MessageBubbleAlignment,CometChatUIKitLoginListener,MessageReceiptUtils, isMessageSentByMe } from '@cometchat/chat-uikit-react';
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import readIcon from "../../assets/message-read.svg";
-import sentIcon from "../../assets/message-sent.svg";
-import deliveredIcon from "../../assets/message-delivered.svg";
-
-const CustomMessageTemplate = () => {
- const [templates, setTemplates] = React.useState([]);
- const [chatGroup, setChatGroup] = React.useState();
-
- useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- })
-
- let definedTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates();
- const template = definedTemplates.map((templates) => {
- if (templates.type === CometChatUIKitConstants.MessageTypes.text &&
- templates.category === CometChatUIKitConstants.MessageCategory.message) {
- templates.bubbleView = (message, alignment) => getBubbleView(message, alignment)
- return templates;
- }
- return templates
- })
- setTemplates(template);
- }, []);
-
- const formatTime = (timestamp) => {
- const date = new Date(timestamp * 1000); // Convert to milliseconds
- const hours = date.getHours();
- const minutes = date.getMinutes();
- const period = hours >= 12 ? 'PM' : 'AM';
- const formattedHours = hours % 12 || 12;
- const formattedMinutes = minutes < 10 ? '0' + minutes : minutes;
- return `${formattedHours}:${formattedMinutes} ${period}`;
- };
-
- const getBubbleView = (message,alignment) => {
- const isSentByMe = isMessageSentByMe(
- message,
- CometChatUIKitLoginListener.getLoggedInUser()!
- );
-
- let textMessage = "";
- if (message instanceof CometChat.TextMessage) {
- textMessage = message.getText();
- }
-
- const receipt = MessageReceiptUtils.getReceiptStatus(message);
- let status = sentIcon;
-
- if (receipt === Receipts.delivered) {
- status = deliveredIcon;
- } else if (receipt === Receipts.read) {
- status = readIcon;
- } else {
- status = sentIcon;
- }
-
- return (
-
-
-
-```css
+
+```css lines
.bubble-view {
display: flex;
flex-direction: column;
@@ -1127,10 +686,8 @@ export { CustomMessageTemplate };
border-radius: 2px 2px 0px 2px;
color: #727272;
gap: 4px;
- color: #727272;
text-align: right;
font: 400 10/14 Roboto;
- font-style: normal;
}
.bubble-view__outgoing .triangle {
@@ -1153,14 +710,12 @@ export { CustomMessageTemplate };
border-top: 10px solid #e8e8e8;
}
```
-
-
-#### StatusInfoView
+### statusInfoView
-The `statusInfoView` method of MessageTemplate allows you to add a status info view to your message bubbles. In the example below, we will add a custom status info view to every text message in the MessageList.
+Custom status info for message bubbles. Default displays receipt and timestamp.
@@ -1168,8 +723,8 @@ The `statusInfoView` method of MessageTemplate allows you to add a status info v
-```ts
-import React, { useEffect, useState } from "react";
+```ts lines
+import React, { useEffect } from "react";
import {
CometChatMessageList,
CometChatUIKit,
@@ -1178,9 +733,7 @@ import {
import { CometChat } from "@cometchat/chat-sdk-javascript";
const CustomMessageTemplate = () => {
- const [templates, setTemplates] = React.useState(
- []
- );
+ const [templates, setTemplates] = React.useState([]);
const [chatGroup, setChatGroup] = React.useState();
useEffect(() => {
@@ -1205,7 +758,7 @@ const CustomMessageTemplate = () => {
}, []);
const formatTime = (timestamp: number): string => {
- const date = new Date(timestamp * 1000); // Convert to milliseconds
+ const date = new Date(timestamp * 1000);
const hours = date.getHours();
const minutes = date.getMinutes();
const period = hours >= 12 ? "PM" : "AM";
@@ -1235,77 +788,9 @@ const CustomMessageTemplate = () => {
export { CustomMessageTemplate };
```
-
-
-
-
-```js
-import React, { useEffect, useState } from "react";
-import { CometChatMessageList, CometChatUIKit, CometChatUIKitConstants } from '@cometchat/chat-uikit-react';
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-
-const CustomMessageTemplate = () => {
- const [templates, setTemplates] = React.useState([]);
- const [chatGroup, setChatGroup] = React.useState();
-
- useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- })
-
- let definedTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates();
- const template = definedTemplates.map((templates) => {
- if (templates.type === CometChatUIKitConstants.MessageTypes.text &&
- templates.category === CometChatUIKitConstants.MessageCategory.message) {
- templates.statusInfoView = (message) => getStatusInfo(message)
- return templates;
- }
- return templates
- })
- setTemplates(template);
- }, []);
-
- const formatTime = (timestamp) => {
- const date = new Date(timestamp * 1000); // Convert to milliseconds
- const hours = date.getHours();
- const minutes = date.getMinutes();
- const period = hours >= 12 ? 'PM' : 'AM';
- const formattedHours = hours % 12 || 12;
- const formattedMinutes = minutes < 10 ? '0' + minutes : minutes;
- return `${formattedHours}:${formattedMinutes} ${period}`;
- };
-
- const getStatusInfo = (message) => {
- if (message instanceof CometChat.TextMessage) {
- const timestamp = message.getSentAt();
- const formattedTime = formatTime(timestamp);
- return (
-
-
-
-```css
+
+```css lines
.status-info {
display: flex;
width: 57px;
@@ -1316,7 +801,6 @@ export { CustomMessageTemplate };
color: #727272;
text-align: right;
font: 400 10px/120% Roboto;
- font-style: normal;
}
.cometchat .cometchat-message-bubble__body {
@@ -1327,33 +811,26 @@ export { CustomMessageTemplate };
padding: 8px;
}
```
-
-
-#### ReplyView
+### replyView
-The `replyView` method of MessageTemplate allows you to add a reply view to your message bubbles. In the example below, we will style the existing reply view in the MessageList.
+Custom reply preview for message bubbles.
-
-
-
-```ts
-import React, { useEffect, useState } from "react";
-import {
- CometChatMessageList
-} from "@cometchat/chat-uikit-react";
+```ts lines
+import React, { useEffect } from "react";
+import { CometChatMessageList } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
const CustomMessageTemplate = () => {
@@ -1367,47 +844,16 @@ const CustomMessageTemplate = () => {
return (
-
-
-```js
-import React, { useEffect, useState } from "react";
-import { CometChatMessageList } from '@cometchat/chat-uikit-react';
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-
-const CustomMessageTemplate = () => {
- const [chatGroup, setChatGroup] = React.useState();
-
- useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- })
- }, []);
-
- return (
-
-
-
-```css
+
+```css lines
.cometchat
.cometchat-message-bubble-outgoing
.cometchat-message-bubble__body {
@@ -1415,24 +861,20 @@ export { CustomMessageTemplate };
--cometchat-extended-primary-color-700: rgba(251, 251, 251, 0.192);
}
-.cometchat .cometchat-message-bubble-incoming .bubble-view{
- --cometchat-primary-color: #f76808;
+.cometchat .cometchat-message-bubble-incoming .bubble-view {
+ --cometchat-primary-color: #f76808;
}
-.cometchat-message-composer__header .composer-view{
- --cometchat-primary-color: #f76808;
+.cometchat-message-composer__header .composer-view {
+ --cometchat-primary-color: #f76808;
}
```
-
-
-#### Options
-
-The `options` method in the MessageTemplate allows you to customize the options that appear in the action sheet when a message is long-pressed. By default, CometChat UI Kit provides a set of options like "Thread Reply", "Copy" ,"Edit", and "Delete".
+### options
-However, if you wish to override or modify these options, you can use the `options` method and pass a list of `CometChatActionsIcon`. This list of options will replace the default set.
+Custom action sheet options for long-press on message bubbles.
@@ -1440,7 +882,7 @@ However, if you wish to override or modify these options, you can use the `optio
-```ts
+```ts lines
import React, { useEffect, useState } from "react";
import {
CometChatMessageList,
@@ -1452,9 +894,7 @@ import {
import { CometChat } from "@cometchat/chat-sdk-javascript";
const CustomMessageTemplate = () => {
- const [templates, setTemplates] = useState(
- []
- );
+ const [templates, setTemplates] = useState([]);
const [chatGroup, setChatGroup] = useState();
useEffect(() => {
@@ -1495,77 +935,9 @@ const CustomMessageTemplate = () => {
const myView: any = new CometChatActionsIcon({
id: "refresh",
title: "Refresh",
- iconURL: "", // Add your custom icon URL
- onClick: () => {
- /** Add your custom on click logic */
- },
- });
- defaultOptions.splice(1, 0, myView);
- return defaultOptions;
- };
-
- return (
-
-
-
-```js
-import React, { useEffect, useState } from "react";
-import {
- CometChatMessageList,
- CometChatUIKit,
- CometChatUIKitConstants,
- CometChatActionsIcon,
-} from "@cometchat/chat-uikit-react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-
-const CustomMessageTemplate = () => {
- const [templates, setTemplates] = useState([]);
- const [chatGroup, setChatGroup] = useState();
-
- useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- });
-
- let definedTemplates =
- CometChatUIKit.getDataSource().getAllMessageTemplates();
- const template = definedTemplates.map((templates) => {
- if (
- templates.type === CometChatUIKitConstants.MessageTypes.text &&
- templates.category === CometChatUIKitConstants.MessageCategory.message
- ) {
- templates.options = (loggedInUser, message, group) =>
- getCustomOptions(loggedInUser, message, chatGroup);
- return templates;
- }
- return templates;
- });
- setTemplates(template);
- }, []);
-
- const getCustomOptions = (loggedInUser, message, group) => {
- const defaultOptions = CometChatUIKit.getDataSource().getMessageOptions(
- loggedInUser,
- message,
- chatGroup
- );
- const myView = new CometChatActionsIcon({
- id: "refresh",
- title: "Refresh",
- iconURL: "", // Add your custom icon URL
+ iconURL: "",
onClick: () => {
- /** Add your custom on click logic */
+ /** custom logic */
},
});
defaultOptions.splice(1, 0, myView);
@@ -1583,11 +955,9 @@ const CustomMessageTemplate = () => {
export { CustomMessageTemplate };
```
-
-
-
-```css
+
+```css lines
#refresh.cometchat-menu-list__menu .cometchat-menu-list__sub-menu-item-title {
overflow: hidden;
color: #6852d6;
@@ -1600,14 +970,12 @@ export { CustomMessageTemplate };
background-color: #6852d6;
}
```
-
-
### New Templates
-You can create an entirely new template for custom messages is one of the powerful features of CometChat's MessageTemplate.
+Create entirely new templates for custom message types.
@@ -1615,8 +983,8 @@ You can create an entirely new template for custom messages is one of the powerf
-```ts
-import React, { useEffect, useState } from "react";
+```ts lines
+import React, { useEffect } from "react";
import {
CometChatMessageList,
CometChatUIKit,
@@ -1633,9 +1001,7 @@ import sentIcon from "../../assets/message-sent.svg";
import deliveredIcon from "../../assets/message-delivered.svg";
const CustomMessageTemplate = () => {
- const [templates, setTemplates] = React.useState(
- []
- );
+ const [templates, setTemplates] = React.useState([]);
const [chatGroup, setChatGroup] = React.useState();
useEffect(() => {
@@ -1656,7 +1022,7 @@ const CustomMessageTemplate = () => {
}, []);
const formatTime = (timestamp: number): string => {
- const date = new Date(timestamp * 1000); // Convert to milliseconds
+ const date = new Date(timestamp * 1000);
const hours = date.getHours();
const minutes = date.getMinutes();
const period = hours >= 12 ? "PM" : "AM";
@@ -1738,122 +1104,9 @@ const CustomMessageTemplate = () => {
export { CustomMessageTemplate };
```
-
-
-
-
-```js
-import React, { useEffect, useState } from "react";
-import { CometChatMessageList, CometChatUIKit, CometChatUIKitConstants,
-CometChatMessageTemplate,MessageReceiptUtils,isMessageSentByMe,Receipts,CometChatUIKitLoginListener } from '@cometchat/chat-uikit-react';
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import readIcon from "../../assets/message-read.svg";
-import sentIcon from "../../assets/message-sent.svg";
-import deliveredIcon from "../../assets/message-delivered.svg";
-
-
-const CustomMessageTemplate = () => {
- const [templates, setTemplates] = React.useState([]);
- const [chatGroup, setChatGroup] = React.useState();
-
- useEffect(() => {
- CometChat.getGroup("guid").then((group) => {
- setChatGroup(group);
- })
-
- let definedTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates();
- const CUSTOM_MESSAGE_TYPE = "customType";
- let customMessageTemplate = new CometChatMessageTemplate({
- type: CUSTOM_MESSAGE_TYPE,
- category: CometChatUIKitConstants.MessageCategory.custom,
- contentView: (message) => getContentView(message),
- });
- definedTemplates.push(customMessageTemplate);
- setTemplates(definedTemplates);
- }, []);
-
- const formatTime = (timestamp) => {
- const date = new Date(timestamp * 1000); // Convert to milliseconds
- const hours = date.getHours();
- const minutes = date.getMinutes();
- const period = hours >= 12 ? 'PM' : 'AM';
- const formattedHours = hours % 12 || 12;
- const formattedMinutes = minutes < 10 ? '0' + minutes : minutes;
- return `${formattedHours}:${formattedMinutes} ${period}`;
- };
-
- const getContentView = (message) => {
- const isSentByMe = isMessageSentByMe(
- message,
- CometChatUIKitLoginListener.getLoggedInUser()!
- );
-
- const receipt = MessageReceiptUtils.getReceiptStatus(message);
- let status = sentIcon;
-
- if (receipt === Receipts.delivered) {
- status = deliveredIcon;
- } else if (receipt === Receipts.read) {
- status = readIcon;
- } else {
- status = sentIcon;
- }
-
- return (
-
-
-
-```css
+
+```css lines
.content-view {
display: flex;
flex-direction: column;
@@ -1869,7 +1122,6 @@ export { CustomMessageTemplate };
color: #f9f8fd;
text-overflow: ellipsis;
font: 500 14px/16.8px roboto;
- font-style: normal;
}
.cometchat-message-bubble-incoming .cometchat-list-item__body-title,
@@ -1894,7 +1146,6 @@ export { CustomMessageTemplate };
color: #f9f8fd;
text-align: right;
font: 400 10px/12px roboto;
- font-style: normal;
}
.content-view__footer {
@@ -1915,7 +1166,6 @@ export { CustomMessageTemplate };
justify-content: center;
color: #f9f8fd;
font: 500 14px/16.8px roboto;
- font-style: normal;
}
.content-view__footer-message {
@@ -1926,10 +1176,25 @@ export { CustomMessageTemplate };
justify-content: center;
color: #f9f8fd;
font: 500 14px/16.8px roboto;
- font-style: normal;
}
```
-
-
+
+## Theme and Styling
+
+MessageTemplate renders inside `.cometchat-message-bubble`. Style individual bubble sections using CSS.
+
+```css lines
+.cometchat .cometchat-message-bubble__body {
+ /* content area overrides */
+}
+
+.cometchat .cometchat-message-bubble__body-footer-view {
+ /* footer area overrides */
+}
+
+.cometchat .cometchat-message-bubble__body-header-view {
+ /* header area overrides */
+}
+```
\ No newline at end of file
diff --git a/ui-kit/react/methods.mdx b/ui-kit/react/methods.mdx
index 0be19fef4..fbc1f8f9a 100644
--- a/ui-kit/react/methods.mdx
+++ b/ui-kit/react/methods.mdx
@@ -1,33 +1,51 @@
---
title: "Methods"
+description: "Reference for CometChat React UI Kit methods including init, login, logout, and message-sending wrappers."
---
+
+
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` |
+| Import | `import { CometChatUIKit } from "@cometchat/chat-uikit-react";` |
+| Init | `CometChatUIKit.init(UIKitSettings)` |
+| Login (dev) | `CometChatUIKit.login("UID")` |
+| Login (prod) | `CometChatUIKit.loginWithAuthToken("AUTH_TOKEN")` |
+| Other methods | `CometChatUIKit.logout()`, `CometChatUIKit.getLoggedinUser()`, `CometChatUIKit.createUser(user)`, `CometChatUIKit.updateUser(user)` |
+| Send messages | `CometChatUIKit.sendTextMessage()`, `CometChatUIKit.sendMediaMessage()`, `CometChatUIKit.sendCustomMessage()` |
+| Note | Use these wrapper methods instead of raw SDK calls — they manage internal UI Kit eventing |
+
+
+
## Overview
-The UI Kit's core function is to extend the [Chat SDK](/sdk/javascript/overview), essentially translating the raw data and functionality provided by the underlying methods into visually appealing and easy-to-use UI components.
+The UI Kit wraps the [Chat SDK](/sdk/javascript/overview) methods to manage internal eventing and keep UI components synchronized. Use these wrapper methods instead of raw SDK calls.
-To effectively manage and synchronize the UI elements and data across all components in the UI Kit, we utilize internal events. These internal events enable us to keep track of changes in real time and ensure that the UI reflects the most current state of data.
+
+`CometChatUIKit.init(UIKitSettings)` must be called before rendering any UI Kit components or calling any SDK methods. Initialization must complete before login.
+
-The CometChat UI Kit has thoughtfully encapsulated the critical [Chat SDK](/sdk/javascript/overview) methods within its wrapper to efficiently manage internal eventing. This layer of abstraction simplifies interaction with the underlying CometChat SDK, making it more user-friendly for developers.
+
+Auth Key is for development/testing only. In production, generate Auth Tokens on the server using the REST API and pass them to the client via `loginWithAuthToken()`. Never expose Auth Keys in production client code.
+
## Methods
-You can access the methods using the `CometChatUIKit` class. This class provides access to all the public methods exposed by the CometChat UI Kit.
+All methods are accessed via the `CometChatUIKit` class.
### Init
-This method initializes the settings required for [CometChat JavaScript SDK](/sdk/javascript/overview). First, ensure UIKitSettings is set and then call the `init()` method on the app startup.
+Initializes the [CometChat JavaScript SDK](/sdk/javascript/overview). Must be called on app startup before any other UI Kit method.
-
-Make sure you replace the **APP\_ID**, **REGION** and **AUTH\_KEY** with your CometChat App ID, Region and Auth Key in the below code. The `Auth Key` is an optional property of the `UIKitSettings` Class. It is intended for use primarily during proof-of-concept (POC) development or in the early stages of application development. You can use the [Auth Token](#login-using-auth-token) method to log in securely.
-
+Replace `APP_ID`, `REGION`, and `AUTH_KEY` with values from the CometChat Dashboard. `Auth Key` is optional — use [Auth Token](#login-using-auth-token) for production.
-```js
-import { UIKitSettingsBuilder } from "@cometchat/uikit-shared"; //import shared package
+```js lines highlight={4-6}
+import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";
const COMETCHAT_CONSTANTS = {
APP_ID: "APP_ID", // Replace with your App ID
@@ -57,11 +75,11 @@ CometChatUIKit.init(UIKitSettings)?.then(() => {
### Setting Session Storage Mode
-If you want to use session storage instead of the default local storage, you can configure it during initialization:
+To use session storage instead of the default local storage, configure it during initialization:
-```js
+```js lines highlight={5-7}
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";
@@ -89,7 +107,7 @@ CometChatUIKit.init(UIKitSettings)?.then(() => {
-```ts
+```ts lines highlight={5-7}
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";
@@ -119,11 +137,11 @@ CometChatUIKit.init(UIKitSettings)?.then(() => {
### Get Logged In User
-You can use this method to check if there is any existing session in the SDK. This method should return the details of the logged-in user.
+Checks for an existing session in the SDK. Returns the logged-in user details or `null`.
-```js
+```js lines
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
CometChatUIKit.getLoggedinUser()
@@ -141,11 +159,11 @@ CometChatUIKit.getLoggedinUser()
### Login using Auth Key
-This simple authentication procedure is useful when you are creating a POC or if you are in the development phase. For production apps, we suggest you use [AuthToken](#login-using-auth-token) instead of Auth Key.
+Simple authentication for development/POC. For production, use [Auth Token](#login-using-auth-token).
-```js
+```js lines highlight={3}
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
const UID = "UID";
@@ -170,7 +188,7 @@ CometChatUIKit.getLoggedinUser()
-```ts
+```ts lines highlight={3}
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
const UID: string = "UID";
@@ -200,7 +218,7 @@ CometChatUIKit.getLoggedinUser()
### Login using Auth Token
-This advanced authentication procedure does not use the Auth Key directly in your client code thus ensuring safety.
+Production-safe authentication that does not expose the Auth Key in client code.
1. [Create a User](https://api-explorer.cometchat.com/reference/creates-user) via the CometChat API when the user signs up in your app.
2. [Create an Auth Token](https://api-explorer.cometchat.com/reference/create-authtoken) via the CometChat API for the new user and save the token in your database.
@@ -208,7 +226,7 @@ This advanced authentication procedure does not use the Auth Key directly in you
-```js
+```js lines highlight={3}
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
const authToken = "AUTH_TOKEN";
@@ -234,12 +252,12 @@ CometChatUIKit.getLoggedinUser()
-```ts
+```ts lines highlight={3}
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
const authToken: string = "AUTH_TOKEN";
-CometChat.getLoggedinUser()
+CometChatUIKit.getLoggedinUser()
.then((user: CometChat.User) => {
if (!user) {
//Login user
@@ -262,11 +280,11 @@ CometChat.getLoggedinUser()
### Logout
-This method is used to end the user session of the logged-in user
+Ends the current user session.
-```js
+```js lines
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
CometChatUIKit.logout();
@@ -280,11 +298,11 @@ CometChatUIKit.logout();
### Create user
-This method takes a `User` object and the `Auth Key` as input parameters and returns the created `User` object if the request is successful.
+Takes a `User` object and Auth Key, returns the created `User` object.
-```js
+```js lines highlight={4-6}
import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
@@ -311,7 +329,7 @@ CometChatUIKit.createUser(user, authKey)
-```ts
+```ts lines highlight={4-6}
import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
@@ -343,11 +361,11 @@ CometChatUIKit.createUser(user, authKey)
### Update user
-This method takes a `User` object and the `Auth Key` as inputs and returns the updated `User` object on the successful execution of the request.
+Takes a `User` object and Auth Key, returns the updated `User` object.
-```js
+```js lines highlight={4-6}
import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
@@ -367,7 +385,7 @@ CometChatUIKit.updateUser(user, authKey)
-```ts
+```ts lines highlight={4-6}
import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
@@ -394,11 +412,11 @@ CometChatUIKit.updateUser(user, authKey)
#### Text message
-This method sends a text message in a 1:1 or group chat. You need to pass a `TextMessage` object to it.
+Sends a text message in a 1:1 or group chat. Takes a `TextMessage` object.
-```tsx
+```tsx lines highlight={5-6}
import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package
@@ -422,7 +440,7 @@ CometChatUIKit.sendTextMessage(textMessage)
-```tsx
+```tsx lines highlight={5-6}
import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package
@@ -451,17 +469,15 @@ CometChatUIKit.sendMessage(textMessage)
#### Media message
-This method sends a media message in a 1:1 or group chat. You need to pass a `MediaMessage` object to it.
+Sends a media message in a 1:1 or group chat. Takes a `MediaMessage` object.
-
-Make sure you replace the `INPUT FILE OBJECT` with the actual [file](https://developer.mozilla.org/en-US/docs/Web/API/File).
-
+Replace `INPUT FILE OBJECT` with the actual [File](https://developer.mozilla.org/en-US/docs/Web/API/File) object.
-```tsx
+```tsx lines highlight={5}
import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package
@@ -486,7 +502,7 @@ CometChatUIKit.sendMediaMessage(mediaMessage)
-```tsx
+```tsx lines highlight={5}
import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package
@@ -516,11 +532,11 @@ CometChatUIKit.sendMediaMessage(mediaMessage)
#### Custom message
-This method allows you to send custom messages which are neither text nor media messages.
+Sends a custom message (neither text nor media) in a 1:1 or group chat. Takes a `CustomMessage` object.
-```tsx
+```tsx lines highlight={5,7,8}
import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package
@@ -549,7 +565,7 @@ CometChatUIKit.sendCustomMessage(customMessage)
-```tsx
+```tsx lines highlight={5,7,8}
import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package
diff --git a/ui-kit/react/next-conversation.mdx b/ui-kit/react/next-conversation.mdx
index 1d8800f66..c1e3d00c6 100644
--- a/ui-kit/react/next-conversation.mdx
+++ b/ui-kit/react/next-conversation.mdx
@@ -1,227 +1,212 @@
---
-title: "Building A Conversation List + Message View"
+title: "Conversation List + Message View"
sidebarTitle: "Conversation List + Message View"
+description: "Build a two-panel conversation list + message view layout in Next.js with CometChat UI Kit."
---
-The **Conversation List + Message View** layout offers a seamless **two-panel chat interface**, commonly used in modern messaging applications like **WhatsApp Web, Slack, and Microsoft Teams**.
+
-This design enables users to switch between conversations effortlessly while keeping the chat window open, ensuring a **smooth, real-time messaging experience**.
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` |
+| Framework | Next.js |
+| Components | `CometChatConversations`, `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` |
+| Layout | Two-panel — conversation list (left) + message view (right) |
+| Prerequisite | Complete [Next.js Integration](/ui-kit/react/next-js-integration) Steps 1–5 first |
+| SSR | Dynamic import with `ssr: false` — CometChat requires browser APIs |
+| Pattern | WhatsApp Web, Slack, Microsoft Teams |
-[](https://link.cometchat.com/next-conversation-list-message)
-
-> **Tip:** You can **fork** the sandbox, insert your **CometChat credentials** (App ID, Region, Auth Key.) in the code, and immediately preview how the UI and messages respond in real time.
+
-***
+This guide builds a two-panel chat layout — conversation list on the left, messages on the right. Users tap a conversation to open it.
-## **User Interface Overview**
+This assumes you've already completed [Next.js Integration](/ui-kit/react/next-js-integration) (project created, UI Kit installed, CSS imported).
-This layout is structured into three key sections:
-
-1. **Sidebar (Conversation List)** – Displays active conversations, including users and groups.
-2. **Message View** – Shows chat messages for the selected conversation in real-time.
-3. **Message Composer** – Provides an input field for typing and sending messages, along with support for media, emojis, and reactions.
-
-***
+[](https://link.cometchat.com/next-conversation-list-message)
-## **Step-by-Step Guide**
+> Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time.
-### **Step 1: Create Sidebar**
+---
-Let's create the `Sidebar` component which will render different conversations.
+## What You're Building
-#### **Folder Structure**
+Three sections working together:
-Create a `CometChatSelector` folder inside your `src/app` directory and add the following files:
+1. **Sidebar (conversation list)** — shows all active conversations (users and groups)
+2. **Message view** — displays chat messages for the selected conversation in real time
+3. **Message composer** — text input with support for media, emojis, and reactions
-```swift
-src/app/
-│── CometChatSelector/
-│ ├── CometChatSelector.tsx
-│ ├── CometChatSelector.css
-```
+---
-#### **Download the Icon**
+## Step 1 — Create the Sidebar Component
-These icons are available in the **CometChat UI Kit assets folder**. You can find them at:\
-🔗 [GitHub Assets Folder](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app/src/assets)
+
+
+
+
+
+
+
+
-```tsx CometChatSelector.tsx
+```tsx title="CometChatSelector.tsx" lines
import { useEffect, useState } from "react";
-import { Conversation, Group, User } from "@cometchat/chat-sdk-javascript";
+import { Conversation, Group, User, CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatConversations, CometChatUIKitLoginListener } from "@cometchat/chat-uikit-react";
-import { CometChat } from '@cometchat/chat-sdk-javascript';
import "./CometChatSelector.css";
-// Define props interface for component
interface SelectorProps {
- onSelectorItemClicked?: (input: User | Group | Conversation, type: string) => void;
+ onSelectorItemClicked?: (input: User | Group | Conversation, type: string) => void;
}
-// CometChatSelector component definition
export const CometChatSelector = (props: SelectorProps) => {
- const {
- onSelectorItemClicked = () => { }, // Default function if no prop is provided
- } = props;
-
- // State to store the currently logged-in user
- const [loggedInUser, setLoggedInUser] = useState();
-
- // State to track the currently selected item (conversation, user, group, or call)
- const [activeItem, setActiveItem] = useState<
- CometChat.Conversation | CometChat.User | CometChat.Group | CometChat.Call | undefined
- >();
-
- useEffect(() => {
- // Retrieve the logged-in user from CometChat's login listener
- let loggedInUser = CometChatUIKitLoginListener.getLoggedInUser();
- setLoggedInUser(loggedInUser);
- }, [CometChatUIKitLoginListener?.getLoggedInUser()]); // Dependency array to trigger effect when user changes
-
- return (
- <>
- {/* Render CometChatConversations only if a user is logged in */}
- {loggedInUser && (
- <>
- {
- setActiveItem(e); // Update the selected item state
- onSelectorItemClicked(e, "updateSelectedItem"); // Trigger callback with selected item
- }}
- />
-
- )}
-
- );
-};
+ const { onSelectorItemClicked = () => {} } = props;
+ const [loggedInUser, setLoggedInUser] = useState();
+ const [activeItem, setActiveItem] = useState<
+ CometChat.Conversation | CometChat.User | CometChat.Group | undefined
+ >();
+
+ useEffect(() => {
+ const user = CometChatUIKitLoginListener.getLoggedInUser();
+ setLoggedInUser(user);
+ }, []);
+
+ return (
+ <>
+ {loggedInUser && (
+ {
+ setActiveItem(e);
+ onSelectorItemClicked(e, "updateSelectedItem");
+ }}
+ />
+ )}
+
+ );
+};
```
-
-```css CometChatSelector.css
-/* Style for the icon in the header menu of the conversation list */
+```css title="CometChatSelector.css" lines
.selector-wrapper .cometchat-conversations .cometchat-list__header-menu .cometchat-button__icon {
- background: var(--cometchat-icon-color-primary);
+ background: var(--cometchat-icon-color-primary);
}
-/* Change background color of icon on hover */
.cometchat-conversations .cometchat-list__header-menu .cometchat-button__icon:hover {
- background: var(--cometchat-icon-color-highlight);
+ background: var(--cometchat-icon-color-highlight);
}
-/* Remove the right border from the search bar */
.cometchat-list__header-search-bar {
- border-right: none;
+ border-right: none;
}
-/* Align submenu items to the left */
.cometchat .cometchat-menu-list__sub-menu-list-item {
- text-align: left;
+ text-align: left;
}
-/* Set specific width and positioning for submenu list */
.cometchat .cometchat-conversations .cometchat-menu-list__sub-menu-list {
- width: 212px;
- top: 40px !important;
- left: 172px !important;
+ width: 212px;
+ top: 40px !important;
+ left: 172px !important;
}
-/* Style the logged-in user section with a bottom border */
#logged-in-user {
- border-bottom: 2px solid var(--cometchat-border-color-default, #E8E8E8);
+ border-bottom: 2px solid var(--cometchat-border-color-default, #E8E8E8);
}
-/* Prevent cursor interaction on logged-in user menu items */
#logged-in-user .cometchat-menu-list__sub-menu-item-title,
#logged-in-user .cometchat-menu-list__sub-menu-list-item {
- cursor: default;
+ cursor: default;
}
-/* Style for logout icon with error color */
.cometchat-menu-list__sub-menu-list-item-icon-log-out {
- background-color: var(--cometchat-error-color, #F44649);
+ background-color: var(--cometchat-error-color, #F44649);
}
-/* Style for logout text with error color */
.cometchat-menu-list__sub-menu-item-title-log-out {
- color: var(--cometchat-error-color, #F44649);
+ color: var(--cometchat-error-color, #F44649);
}
-/* Allow pointer interaction on submenu items inside chat menu */
.chat-menu .cometchat .cometchat-menu-list__sub-menu-item-title {
- cursor: pointer;
+ cursor: pointer;
}
-/* Remove shadow from submenu inside chat menu */
.chat-menu .cometchat .cometchat-menu-list__sub-menu {
- box-shadow: none;
+ box-shadow: none;
}
-/* Style for submenu icons inside chat menu */
.chat-menu .cometchat .cometchat-menu-list__sub-menu-icon {
- background-color: var(--cometchat-icon-color-primary, #141414);
- width: 24px;
- height: 24px;
+ background-color: var(--cometchat-icon-color-primary, #141414);
+ width: 24px;
+ height: 24px;
}
```
-
-### **Step 2: Render Experience**
+---
-Now we will create the `CometChatNoSSR.tsx` & `CometChatNoSSR.css` files. Here, we will initialize the CometChat UI Kit, log in a user, and build the messaging experience using `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer` components.
+## Step 2 — Create the CometChatNoSSR Component
-```
-src/
-│── CometChatNoSSR/
-│ ├── CometChatNoSSR.tsx
-│ ├── CometChatNoSSR.css
-```
+This component handles init, login, and renders the full chat experience. It runs client-side only.
+
+
+
+
+
+
+
+
+
-```tsx CometChatNoSSR.tsx
+```tsx title="CometChatNoSSR.tsx" lines highlight={15-17, 20}
import React, { useEffect, useState } from "react";
-import {
- CometChatMessageComposer,
- CometChatMessageHeader,
- CometChatMessageList,
- CometChatUIKit,
- UIKitSettingsBuilder
+import {
+ CometChatMessageComposer,
+ CometChatMessageHeader,
+ CometChatMessageList,
+ CometChatUIKit,
+ UIKitSettingsBuilder,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatSelector } from "../CometChatSelector/CometChatSelector";
import "./CometChatNoSSR.css";
-// Constants for CometChat configuration
+// Replace with your actual credentials
const COMETCHAT_CONSTANTS = {
- APP_ID: "",
- REGION: "",
- AUTH_KEY: "",
+ APP_ID: "", // Replace with your App ID
+ REGION: "", // Replace with your Region
+ AUTH_KEY: "", // Replace with your Auth Key (dev only)
};
-// Functional Component
+const UID = "cometchat-uid-1"; // Replace with your actual UID
+
const CometChatNoSSR: React.FC = () => {
- // State to store the logged-in user
const [user, setUser] = useState(undefined);
- // State to store selected user or group
const [selectedUser, setSelectedUser] = useState(undefined);
const [selectedGroup, setSelectedGroup] = useState(undefined);
useEffect(() => {
- // Initialize UIKit settings
const UIKitSettings = new UIKitSettingsBuilder()
.setAppId(COMETCHAT_CONSTANTS.APP_ID)
.setRegion(COMETCHAT_CONSTANTS.REGION)
@@ -229,15 +214,12 @@ const CometChatNoSSR: React.FC = () => {
.subscribePresenceForAllUsers()
.build();
- // Initialize CometChat UIKit
CometChatUIKit.init(UIKitSettings)
?.then(() => {
console.log("Initialization completed successfully");
- // Check if user is already logged in
CometChatUIKit.getLoggedinUser().then((loggedInUser) => {
if (!loggedInUser) {
- // Perform login if no user is logged in
- CometChatUIKit.login("cometchat-uid-1")
+ CometChatUIKit.login(UID)
.then((user) => {
console.log("Login Successful", { user });
setUser(user);
@@ -254,16 +236,13 @@ const CometChatNoSSR: React.FC = () => {
return user ? (
-
-```css CometChatNoSSR.css
-/* Layout for the main conversations and messages container */
+```css title="CometChatNoSSR.css" lines
.conversations-with-messages {
- display: flex;
- height: 100%;
- width: 100%;
+ display: flex;
+ height: 100%;
+ width: 100%;
}
-/* Sidebar wrapper for conversations */
.conversations-wrapper {
- height: 100%;
- width: 480px; /* Fixed width for conversation list */
- overflow: hidden;
- display: flex;
- flex-direction: column;
- height: inherit;
+ height: 100%;
+ width: 480px;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ height: inherit;
}
-/* Hide overflow for the conversation list */
.conversations-wrapper > .cometchat {
- overflow: hidden;
+ overflow: hidden;
}
-/* Message section layout */
.messages-wrapper {
- width: calc(100% - 480px); /* Take remaining space */
- height: 100%;
- display: flex;
- flex-direction: column;
+ width: calc(100% - 480px);
+ height: 100%;
+ display: flex;
+ flex-direction: column;
}
-/* Display styling for when no conversation is selected */
.empty-conversation {
- height: 100%;
- width: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- background: white;
- color: var(--cometchat-text-color-secondary, #727272);
- font: var(--cometchat-font-body-regular, 400 14px Roboto);
+ height: 100%;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: white;
+ color: var(--cometchat-text-color-secondary, #727272);
+ font: var(--cometchat-font-body-regular, 400 14px Roboto);
}
-/* Ensure message composer does not have rounded corners */
.cometchat .cometchat-message-composer {
- border-radius: 0px;
+ border-radius: 0px;
}
```
-
-### **Step 3: Disabling SSR for `CometChatNoSSR.tsx` in Next.js**
-
-In this update, we will **disable Server-Side Rendering (SSR) for `CometChatNoSSR.tsx`** while keeping the rest of the application’s SSR functionality intact. This ensures that the **CometChat UI Kit components load only on the client-side**, preventing SSR-related issues.
+---
-#### **Disabling SSR in `index.tsx`**
+## Step 3 — Disable SSR in Your Page
-Modify your `index.tsx` file to dynamically import the `CometChatNoSSR.tsx` component with `{ ssr: false }`.
+Dynamically import `CometChatNoSSR` with `ssr: false` so it only loads client-side.
-```tsx index.tsx
-import { Inter } from "next/font/google";
+```tsx title="index.tsx" lines
import dynamic from "next/dynamic";
+import "@cometchat/chat-uikit-react/css-variables.css";
-import '@cometchat/chat-uikit-react/css-variables.css';
-
-const inter = Inter({ subsets: ["latin"] });
-
-// Dynamically import CometChat component with SSR disabled
-const CometChatComponent = dynamic(() => import("../CometChatNoSSR/CometChatNoSSR"), {
- ssr: false,
-});
+const CometChatComponent = dynamic(
+ () => import("../CometChatNoSSR/CometChatNoSSR"),
+ { ssr: false }
+);
export default function Home() {
return
+
+```bash lines
+npm run dev
```
-
-### **Step 5: Run the project**
-
+
+
+```bash lines
+pnpm dev
```
-npm run dev
+
+
+```bash lines
+yarn dev
```
+
+
-***
-
-## **Next Steps**
-
-### **Enhance the User Experience**
+You should see the conversation list on the left. Tap any conversation to load messages on the right.
-* **[Advanced Customizations](/ui-kit/react/theme)** – Personalize the chat UI to align with your brand.
+---
-***
+## Next Steps
+
+
+
+ Customize colors, fonts, and styles to match your brand
+
+
+ Browse all prebuilt UI components
+
+
+ Chat features included out of the box
+
+
diff --git a/ui-kit/react/next-js-integration.mdx b/ui-kit/react/next-js-integration.mdx
index 0d4c40aac..740b4d7c3 100644
--- a/ui-kit/react/next-js-integration.mdx
+++ b/ui-kit/react/next-js-integration.mdx
@@ -1,138 +1,96 @@
---
-title: "Getting Started With CometChat React UI Kit For Next.js"
+title: "Next.js Integration"
sidebarTitle: "Integration"
+description: "Add CometChat to a Next.js app in 5 steps: create project, install, init, login, render."
---
-The **CometChat UI Kit for React** streamlines the integration of in-app chat functionality by providing a **comprehensive set of prebuilt UI components**. It offers seamless **theming options**, including **light and dark modes**, customizable fonts, colors, and extensive styling capabilities.
+
-With built-in support for **one-to-one and group conversations**, developers can efficiently enable chat features within their applications. Follow this guide to **quickly integrate chat functionality** using the CometChat React UI Kit.
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` |
+| Peer deps | `react` >=18, `react-dom` >=18, `rxjs` ^7.8.1 |
+| Init | `CometChatUIKit.init(UIKitSettings)` — must resolve before `login()` |
+| Login | `CometChatUIKit.login("UID")` — must resolve before rendering components |
+| Order | `init()` → `login()` → render. Breaking this order = blank screen |
+| Auth Key | Dev/testing only. Use Auth Token in production |
+| SSR | CometChat requires browser APIs — use dynamic import with `ssr: false` |
+| CSS | `@import url("@cometchat/chat-uikit-react/css-variables.css");` in global CSS |
+| Calling | Optional. Install `@cometchat/calls-sdk-javascript` to enable |
+| Other frameworks | [React.js](/ui-kit/react/react-js-integration) · [React Router](/ui-kit/react/react-router-integration) · [Astro](/ui-kit/react/astro-integration) |
-{/*
- 
- */}
+
+
+This guide walks you through adding CometChat to a Next.js app. By the end you'll have a working chat UI.
-***
-
-## **Prerequisites**
-
-Before installing the **CometChat UI Kit for React**, you must first **create a CometChat application** via the **[CometChat Dashboard](https://app.cometchat.com/)**. The dashboard provides all the essential chat service components, including:
-
-* **User Management**
-* **Group Chat & Messaging**
-* **Voice & Video Calling**
-* **Real-time Notifications**
-
-> To initialize the **UI Kit**, you will need the following credentials from your **CometChat application**:
->
-> 1. **App ID**
-> 2. **Auth Key**
-> 3. **Region**
->
-> Ensure you have these details ready before proceeding with the installation and configuration.
-
-***
-
-## **Register & Set Up CometChat**
-
-Follow these steps to **register on CometChat** and **set up your development environment**.
-
-### **Step 1: Register on CometChat**
-
-To use **CometChat UI Kit**, you first need to register on the **CometChat Dashboard**.
-
-🔗 **[Click here to Sign Up](https://app.cometchat.com/login)**
-
-### **Step 2: Get Your Application Keys**
-
-After registering, create a **new app** and retrieve your **authentication details**:
+
+CometChat UI Kit requires browser APIs (`window`, `WebSocket`, `document`). In Next.js, always load CometChat components client-side using dynamic imports with `ssr: false`.
+
-1. Navigate to **Application**, then select the **Credentials** section.
-
-2. Note down the following keys:
-
- * **App ID**
- * **Auth Key**
- * **Region**
-
-
-
-Each CometChat application can be integrated with a **single client app**. Users within the same application can communicate across multiple platforms, including **web and mobile**.
-
-
-
-### **Step 3: Set Up Your Development Environment**
-
-Ensure your system meets the following **prerequisites** before proceeding with integration.
+---
-**System Requirements:**
+## Prerequisites
-* **Node.js** installed on your machine.
-* A code editor like **[Visual Studio Code](https://code.visualstudio.com/)** or **[Cursor](https://www.cursor.com/)**.
-* **npm** or **Yarn** package manager installed.
+You need three things from the [CometChat Dashboard](https://app.cometchat.com/):
-***
+| Credential | Where to find it |
+| --- | --- |
+| App ID | Dashboard → Your App → Credentials |
+| Auth Key | Dashboard → Your App → Credentials |
+| Region | Dashboard → Your App → Credentials (e.g. `us`, `eu`, `in`) |
-## **Built With**
+You also need Node.js (v16+) and npm/yarn installed.
-The CometChat UI Kit for React relies on the following technologies:
+
+Auth Key is for development only. In production, generate Auth Tokens server-side via the [REST API](https://api-explorer.cometchat.com/) and use [`loginWithAuthToken()`](/ui-kit/react/methods#login-using-auth-token). Never ship Auth Keys in client code.
+
-| Technology | Description |
-| ---------------------------------------------------- | ------------------------------------- |
-| [Node.js](https://nodejs.org/) | JavaScript runtime environment |
-| [npm](https://www.npmjs.com/get-npm) | Node Package Manager |
-| [React](https://www.npmjs.com/package/react) | JavaScript library for UI development |
-| [React DOM](https://www.npmjs.com/package/react-dom) | React package for rendering UI |
+---
-***
+## Step 1 — Create a Next.js Project
-## **Getting Started**
+```bash lines
+npx create-next-app@latest my-app --typescript
+cd my-app
+```
-### **Step 1: Create a Next.js Project**
+---
-1. **Open your code editor** (e.g., **VS Code**, **Cursor**).
-2. **Initialize a new Next.js project** using one of the following methods:
+## Step 2 — Install the UI Kit
-
-**Using Create Next App**
-
+
+```bash lines
+npm install @cometchat/chat-uikit-react
```
-npx create-next-app@latest my-app --typescript
-cd my-app
+
+
+```bash lines
+yarn add @cometchat/chat-uikit-react
```
-
-
-3. **Open the project directory in your code editor**.
-4. **Begin developing your Next.js application in the "app" directory.**.
-5. **Install additional dependencies as needed**.
-
-***
-
-### **Step 2: Install Dependencies**
+This installs the UI Kit and its dependency `@cometchat/chat-sdk-javascript` automatically.
-The **CometChat UI Kit for React** is an **extension** of the **CometChat JavaScript SDK**.\
-Installing it will **automatically** include the core **Chat SDK**, enabling **seamless integration**.
+If you want voice/video calling, also install:
-```java
-npm install @cometchat/chat-uikit-react
+```bash lines
+npm install @cometchat/calls-sdk-javascript
```
-***
+---
-### **Step 3: Initialize CometChat UI Kit**
+## Step 3 — Initialize CometChat
-Before using any features of the **CometChat UI Kit** or **CometChat SDK**, you must **initialize** the required settings.
-```ts
+```ts lines highlight={7-9}
import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";
/**
@@ -144,35 +102,24 @@ const COMETCHAT_CONSTANTS = {
AUTH_KEY: "AUTH_KEY", // Replace with your Auth Key (leave blank if using Auth Token)
};
-/**
- * Configure the CometChat UI Kit using the UIKitSettingsBuilder.
- * This setup determines how the chat UI behaves.
- */
const UIKitSettings = new UIKitSettingsBuilder()
- .setAppId(COMETCHAT_CONSTANTS.APP_ID) // Assign the App ID
- .setRegion(COMETCHAT_CONSTANTS.REGION) // Assign the App's Region
- .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY) // Assign the Authentication Key (if applicable)
- .subscribePresenceForAllUsers() // Enable real-time presence updates for all users
- .build(); // Build the final configuration
+ .setAppId(COMETCHAT_CONSTANTS.APP_ID)
+ .setRegion(COMETCHAT_CONSTANTS.REGION)
+ .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
+ .subscribePresenceForAllUsers()
+ .build();
-/**
- * Initialize the CometChat UI Kit with the configured settings.
- * Once initialized successfully, you can proceed with user authentication and chat features.
- */
-CometChatUIKit.init(UIKitSettings)!
- .then(() => {
+CometChatUIKit.init(UIKitSettings)
+ ?.then(() => {
console.log("CometChat UI Kit initialized successfully.");
- // You can now call login function to authenticate users
})
.catch((error) => {
- console.error("CometChat UI Kit initialization failed:", error); // Log errors if initialization fails
+ console.error("CometChat UI Kit initialization failed:", error);
});
```
-
-
-```js
+```js lines highlight={7-9}
import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";
/**
@@ -184,80 +131,45 @@ const COMETCHAT_CONSTANTS = {
AUTH_KEY: "AUTH_KEY", // Replace with your Auth Key (leave blank if using Auth Token)
};
-/**
- * Configure the CometChat UI Kit using the UIKitSettingsBuilder.
- * This setup determines how the chat UI behaves.
- */
const UIKitSettings = new UIKitSettingsBuilder()
- .setAppId(COMETCHAT_CONSTANTS.APP_ID) // Assign the App ID
- .setRegion(COMETCHAT_CONSTANTS.REGION) // Assign the App's Region
- .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY) // Assign the Authentication Key (if applicable)
- .subscribePresenceForAllUsers() // Enable real-time presence updates for all users
- .build(); // Build the final configuration
+ .setAppId(COMETCHAT_CONSTANTS.APP_ID)
+ .setRegion(COMETCHAT_CONSTANTS.REGION)
+ .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
+ .subscribePresenceForAllUsers()
+ .build();
-/**
- * Initialize the CometChat UI Kit with the configured settings.
- * Once initialized successfully, you can proceed with user authentication and chat features.
- */
CometChatUIKit.init(UIKitSettings)
.then(() => {
console.log("CometChat UI Kit initialized successfully.");
- // You can now call login function to authenticate users
})
.catch((error) => {
- console.error("CometChat UI Kit initialization failed:", error); // Log errors if initialization fails
+ console.error("CometChat UI Kit initialization failed:", error);
});
```
-
-
-
-
-Ensure you replace the placeholders with your actual CometChat credentials.
-
-
-
-***
-
-### **Step 4: User Login**
-
-To authenticate a user, you need a **`UID`**. You can either:
-
-1. **Create new users** on the **[CometChat Dashboard](https://app.cometchat.com)**, **[CometChat SDK Method](/ui-kit/react/methods#create-user)** or **[via the API](https://api-explorer.cometchat.com/reference/creates-user)**.
+
+`init()` must resolve before you call `login()`. If you call `login()` before init completes, it will fail silently. Note the `?.then()` — in Next.js, `init()` may return `undefined` if settings are invalid.
+
-2. **Use pre-generated test users**:
-
- * `cometchat-uid-1`
- * `cometchat-uid-2`
- * `cometchat-uid-3`
- * `cometchat-uid-4`
- * `cometchat-uid-5`
-
-The **Login** method returns a **User object** containing all relevant details of the logged-in user.
-
-***
+---
-
+## Step 4 — Login
-**Security Best Practices**
+After init resolves, log the user in. For development, use one of the pre-created test UIDs:
-* The **Auth Key** method is recommended for **proof-of-concept (POC) development** and early-stage testing.
-* For **production environments**, it is strongly advised to use an **[Auth Token](/ui-kit/react/methods#login-using-auth-token)** instead of an **Auth Key** to enhance security and prevent unauthorized access.
-
-
+`cometchat-uid-1` · `cometchat-uid-2` · `cometchat-uid-3` · `cometchat-uid-4` · `cometchat-uid-5`
-```ts
+```ts lines highlight={3}
import { CometChatUIKit } from "@cometchat/chat-uikit-react";
const UID = "UID"; // Replace with your actual UID
CometChatUIKit.getLoggedinUser().then((user: CometChat.User | null) => {
if (!user) {
- // If no user is logged in, proceed with login
CometChatUIKit.login(UID)
.then((user: CometChat.User) => {
console.log("Login Successful:", { user });
@@ -265,22 +177,19 @@ CometChatUIKit.getLoggedinUser().then((user: CometChat.User | null) => {
})
.catch(console.log);
} else {
- // If user is already logged in, mount your app
+ // Already logged in — mount your app
}
});
```
-
-
-```js
+```js lines highlight={3}
import { CometChatUIKit } from "@cometchat/chat-uikit-react";
const UID = "UID"; // Replace with your actual UID
CometChatUIKit.getLoggedinUser().then((user) => {
if (!user) {
- // If no user is logged in, proceed with login
CometChatUIKit.login(UID)
.then((user) => {
console.log("Login Successful:", { user });
@@ -288,147 +197,147 @@ CometChatUIKit.getLoggedinUser().then((user) => {
})
.catch(console.log);
} else {
- // If user is already logged in, mount your app
+ // Already logged in — mount your app
}
});
```
-
-
-***
-
-### **Step 5: Choose a Chat Experience**
+Key points:
+- `getLoggedinUser()` checks for an existing session so you don't re-login unnecessarily.
+- `login(uid)` skips the API call if a session already exists and returns the cached user.
+- Components must not render until login resolves — use a state flag to gate rendering.
-Integrate a conversation view that suits your application's **UX requirements**. Below are the available options:
-
-***
-
-#### **1️⃣ Conversation List + Message View**
+
+For production, use [`loginWithAuthToken()`](/ui-kit/react/methods#login-using-auth-token) instead of Auth Key. Generate tokens server-side via the REST API.
+
-**Best for:** Applications that need a **two-panel layout**, such as web-based chat interfaces (e.g., WhatsApp Web, Slack).
+---
-**Features:**
+## Step 5 — Add the CSS Import
-* **Two-panel layout** – Displays the conversation list on the left and the active chat window on the right.
-* **One-to-one & group conversations** – Seamless switching between private and group chats.
-* **Multiple conversations** – Effortlessly switch between different chat windows.
-* **Easy navigation** – Intuitive UI for finding and accessing chats quickly.
-* **Tap-to-view on mobile** – In mobile layouts, tapping a conversation opens the **Message View**, optimizing space.
-* **Real-time updates** – Auto-refreshes messages and conversation lists.
-* **Message sync** – Ensures messages stay updated across all sessions and devices.
+Add this line at the top of your global CSS file (e.g. `globals.css`):
-
-
-
+```css title="globals.css" lines
+@import url("@cometchat/chat-uikit-react/css-variables.css");
+```
-**Recommended for:**
+Also ensure your global CSS sets `height: 100%` on the root elements:
-* Desktop-first applications
-* Apps requiring a **rich user experience** with seamless navigation
-* Platforms supporting both **individual and group messaging**
-* **Mobile-friendly** apps needing a **tap-to-open message view**
+```css title="globals.css" lines
+html,
+body {
+ height: 100%;
+}
-[](https://link.cometchat.com/next-conversation-list-message)
+#__next {
+ height: 100%;
+}
+```
-> **Tip:** You can **fork** the sandbox, insert your **CometChat credentials** (App ID, Region, Auth Key.) in the code, and immediately preview how the UI and messages respond in real time.
+Without the CSS import, components will render with broken or missing styles. Without the height rules, the chat UI won't fill the viewport.
-[Integrate Conversation List + Message](./next-conversation)
+---
-***
+## Step 6 — Choose a Chat Experience
-#### **2️⃣ One-to-One/Group Chat**
+Integrate a conversation view that suits your app's UX. Each option below includes a live CodeSandbox demo and a step-by-step guide.
-**Best for:** Apps that require a **focused, direct messaging experience** without a sidebar.
+### Conversation List + Message View
-**Features:**
+Two-panel layout — conversation list on the left, messages on the right. Think WhatsApp Web or Slack.
-* **Dedicated chat window** – Ideal for one-on-one or group messaging.
-* **No conversation list** – Users directly enter the chat without navigating through a list.
-* **Supports both One-to-One and Group Chats** – Easily configurable with minor code modifications.
-* **Optimized for mobile** – Full-screen chat experience without distractions.
-* **Seamless real-time communication** – Auto-updates messages for a smooth experience.
-* **Ideal for support chat or community-based messaging.**
+- Two-panel layout with conversation list and active chat window
+- Switch between one-to-one and group conversations
+- Tap-to-view on mobile — tapping a conversation opens the message view
+- Real-time updates and message sync across sessions
-
+
-**Recommended for:**
-
-* **Support chat applications** – Direct user-agent communication.
-* **Apps focusing on direct messaging** – No distractions from other conversations.
-* **Community or group chat applications** – A structured way to interact in groups.
-* **Mobile-first applications** – Designed for compact and dedicated messaging experiences.
-
-[](https://link.cometchat.com/next-one-on-one)
-
-> **Tip:** You can **fork** the sandbox, insert your **CometChat credentials** (App ID, Region, Auth Key.) in the code, and immediately preview how the UI and messages respond in real time.
+[](https://link.cometchat.com/next-conversation-list-message)
-[Integrate One-to-One/Group Chat](./next-one-to-one-chat)
+> Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time.
-***
+
+ Step-by-step guide to build this layout
+
-#### **3️⃣ Tab-Based Chat Experience**
+---
-**Best for:** Apps that need a **structured, multi-feature navigation system** for seamless interaction between **chats, calls, users, and settings**.
+### One-to-One / Group Chat
-**Features:**
+Single chat window — no sidebar. Good for support chat, embedded widgets, or focused messaging.
-* **Tab Navigation** – Easily switch between **Chat, Call Logs, Users, and Settings**.
-* **Dedicated Chat Window** – Full-screen messaging experience for focused communication.
-* **No Sidebar** – Unlike multi-panel UI, this design prioritizes individual interactions.
-* **Unified Experience** – Users can seamlessly manage conversations, call history, and settings from a single interface.
-* **Scalable for future features** – Easily extend to include more functionalities such as notifications or contact management.
-* **Optimized for both desktop and mobile** – Ensures a smooth experience across different screen sizes.
+- Dedicated chat window for one-on-one or group messaging
+- No conversation list — users go directly into the chat
+- Full-screen experience optimized for mobile
+- Ideal for support chat or community messaging
-
+
-**Recommended for:**
+[](https://link.cometchat.com/next-one-on-one)
-* **Apps requiring structured navigation** – Clearly separate chat, calls, and settings.
-* **Multi-feature chat apps** – Supporting different functionalities in an organized way.
-* **Mobile-first applications** – Ideal for apps needing tab-based UI for easy access to features.
-* **Support & enterprise chat solutions** – Perfect for help desks, business chat platforms, and customer support apps.
+> Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time.
-[](https://link.cometchat.com/next-tabs-sidebar-message)
+
+ Step-by-step guide to build this layout
+
-> **Tip:** You can **fork** the sandbox, insert your **CometChat credentials** (App ID, Region, Auth Key.) in the code, and immediately preview how the UI and messages respond in real time.
+---
-[Integrate Tab-Based Chat](./next-tab-based-chat)
+### Tab-Based Chat
-***
+Tabbed navigation — Chat, Call Logs, Users, Settings in separate tabs. Good for full-featured apps.
-## **Build Your Own Chat Experience**
+- Tab navigation between Chat, Call Logs, Users, and Settings
+- Full-screen messaging within each tab
+- Unified experience for conversations, call history, and settings
+- Scales well for adding future features like notifications or contacts
-**Best for:** Developers who need complete control over their chat interface, allowing customization of components, themes, and features to align with their app’s design and functionality. Whether you're enhancing an existing chat experience or building from scratch, this approach provides the flexibility to tailor every aspect to your needs.
+
+
+
-**Recommended for:**
+[](https://link.cometchat.com/next-tabs-sidebar-message)
-* Apps that require **a fully customized chat experience**.
-* Developers who want to **extend functionalities and modify UI components**.
-* Businesses integrating chat seamlessly into **existing platforms**.
+> Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time.
-**Key Areas to Explore:**
+
+ Step-by-step guide to build this layout
+
-* **[React Sample App](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app)** – Fully functional sample applications to accelerate your development.
-* **[Core Features](./core-features)** – Learn about messaging, real-time updates, and other essential capabilities.
-* **[Components](./components-overview)** – Utilize prebuilt UI elements or customize them to fit your design.
-* **[Themes](./theme)** – Adjust colors, fonts, and styles to match your branding.
-* **[Build Your Own UI](./../../../sdk/javascript/overview)** – Prefer a custom UI over our UI Kits? Explore our SDKs to create a tailored chat experience.
+---
-***
+## Build Your Own Chat Experience
-## **Next Steps**
+Need full control over the UI? Use individual components, customize themes, and wire up your own layouts.
-Now that you’ve selected your **chat experience**, proceed to the **integration guide**:
+- [Sample App](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) — Working reference app to compare against
+- [Components](/ui-kit/react/components-overview) — All prebuilt UI elements with props and customization options
+- [Core Features](/ui-kit/react/core-features) — Messaging, real-time updates, and other capabilities
+- [Theming](/ui-kit/react/theme) — Colors, fonts, dark mode, and custom styling
+- [Build Your Own UI](/sdk/javascript/overview) — Skip the UI Kit entirely and build on the raw SDK
-* **[Integrate Conversation List + Message](/ui-kit/react/next-conversation)**
-* **[Integrate One-to-One Chat](/ui-kit/react/next-one-to-one-chat)**
-* **[Integrate Tab-Based Chat](/ui-kit/react/next-tab-based-chat)**
-* **[Advanced Customizations](/ui-kit/react/theme)**
+---
-***
+## Next Steps
+
+
+
+ Browse all prebuilt UI components
+
+
+ Customize colors, fonts, and styles
+
+
+ Chat features included out of the box
+
+
+ Common issues and fixes
+
+
diff --git a/ui-kit/react/next-one-to-one-chat.mdx b/ui-kit/react/next-one-to-one-chat.mdx
index 6b9ca33f4..af5dbacb7 100644
--- a/ui-kit/react/next-one-to-one-chat.mdx
+++ b/ui-kit/react/next-one-to-one-chat.mdx
@@ -1,91 +1,89 @@
---
-title: "Building A One To One/Group Chat Experience"
-sidebarTitle: "One To One/Group Chat"
+title: "One-to-One / Group Chat"
+sidebarTitle: "One-to-One / Group Chat"
+description: "Build a focused one-to-one or group chat experience in Next.js with CometChat UI Kit."
---
-The **One-to-One Chat** feature provides a streamlined **direct messaging interface**, making it ideal for **support chats, dating apps, and private messaging platforms**. This setup eliminates distractions by focusing solely on a **dedicated chat window**.
+
-[](https://link.cometchat.com/next-one-on-one)
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` |
+| Framework | Next.js |
+| Components | `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` |
+| Layout | Single chat window — no sidebar, no conversation list |
+| Prerequisite | Complete [Next.js Integration](/ui-kit/react/next-js-integration) Steps 1–5 first |
+| SSR | Dynamic import with `ssr: false` — CometChat requires browser APIs |
+| Pattern | Support chat, embedded widgets, focused messaging |
-> **Tip:** You can **fork** the sandbox, insert your **CometChat credentials** (App ID, Region, Auth Key.) in the code, and immediately preview how the UI and messages respond in real time.
+
-***
+This guide builds a single chat window — no sidebar, no conversation list. Users go directly into a one-to-one or group chat. Good for support chat, embedded widgets, or any focused messaging experience.
-## **User Interface Preview**
+This assumes you've already completed [Next.js Integration](/ui-kit/react/next-js-integration) (project created, UI Kit installed, CSS imported).
-### **Key Components**
-
-1. **Chat Header** – Displays recipient details and optional call/video call buttons.
-2. **Message View** – Shows real-time chat history.
-3. **Message Input Box** – Enables users to send messages, media, and reactions.
-
-***
-
-## **Step-by-Step Guide**
-
-### **Step 1: Implement the Chat Header**
-
-* Display **profile picture, name, and online status**.
-* Add **voice and video call buttons** (optional).
-
-```html
-
+
+
+
+
+
+
+
-```tsx CometChatNoSSR.tsx
+```tsx title="CometChatNoSSR.tsx" lines highlight={13-15, 19}
import React, { useEffect, useState } from "react";
-import { CometChatMessageComposer, CometChatMessageHeader, CometChatMessageList, CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";
+import {
+ CometChatMessageComposer,
+ CometChatMessageHeader,
+ CometChatMessageList,
+ CometChatUIKit,
+ UIKitSettingsBuilder,
+} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import "./CometChatNoSSR.css";
const COMETCHAT_CONSTANTS = {
- APP_ID: "",
- REGION: "",
- AUTH_KEY: "",
+ APP_ID: "", // Replace with your App ID
+ REGION: "", // Replace with your Region
+ AUTH_KEY: "", // Replace with your Auth Key (dev only)
};
+// Fetch the user whose chat you want to load
+const UID = "cometchat-uid-1";
+
const CometChatNoSSR: React.FC = () => {
const [user, setUser] = useState(undefined);
const [selectedUser, setSelectedUser] = useState(undefined);
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
const [selectedGroup, setSelectedGroup] = useState(undefined);
useEffect(() => {
@@ -101,7 +99,7 @@ const CometChatNoSSR: React.FC = () => {
console.log("Initialization completed successfully");
CometChatUIKit.getLoggedinUser().then((loggedInUser) => {
if (!loggedInUser) {
- CometChatUIKit.login("superhero1")
+ CometChatUIKit.login("cometchat-uid-2")
.then((user) => {
console.log("Login Successful", { user });
setUser(user);
@@ -118,26 +116,16 @@ const CometChatNoSSR: React.FC = () => {
useEffect(() => {
if (user) {
- // Fetch user or group from CometChat SDK whose chat you want to load.
-
- /** Fetching User */
- const UID = "cometchat-uid-1";
CometChat.getUser(UID).then(
- user => {
- setSelectedUser(user);
- }, error => {
- console.log("User fetching failed with error:", error);
- }
+ (user) => setSelectedUser(user),
+ (error) => console.log("User fetching failed with error:", error)
);
- /** Fetching Group */
- // const GUID = "GUID"
+ // To load a group chat instead, uncomment below:
+ // const GUID = "GUID";
// CometChat.getGroup(GUID).then(
- // group => {
- // setSelectedGroup(group);
- // }, error => {
- // console.log("User fetching failed with error:", error);
- // }
+ // (group) => setSelectedGroup(group),
+ // (error) => console.log("Group fetching failed with error:", error)
// );
}
}, [user]);
@@ -151,7 +139,9 @@ const CometChatNoSSR: React.FC = () => {
) : (
-
-
+
@@ -433,12 +228,9 @@ const CustomMessageTemplate = () => {
- $37.99{" "}
- $74.00
-
-
- Free Delivery
+ $37.99 $74.00
+ Free Delivery
Buy now
@@ -474,11 +266,9 @@ const CustomMessageTemplate = () => {
export { CustomMessageTemplate };
```
-
-
-
@@ -547,8 +335,8 @@ The `bottomView` method of MessageTemplate allows you to add a custom button vie
- According to guidelines you cannot share contact
-
)
- }
-
- return (
-
- {chatGroup &&
- );
-};
-
-export { CustomMessageTemplate };
-```
-
@@ -707,8 +439,8 @@ The `footerView` method of MessageTemplate allows you to add a footer view to yo
- {chatGroup && (
-
- );
-};
-
-export { CustomMessageTemplate };
-```
-
@@ -863,8 +528,8 @@ The `bubbleView` method of MessageTemplate allows you to add a bubble view to yo
-
- );
- };
-
- return (
-
-
- {textMessage}
-
-
- {formatTime(message.getSentAt())}
- {isSentByMe && (
- 
- )}
-
-
- {chatGroup &&
- );
-};
-
-export { CustomMessageTemplate };
-```
-
@@ -1168,8 +723,8 @@ The `statusInfoView` method of MessageTemplate allows you to add a status info v
- {formattedTime}
-
- );
- } else {
- return null;
- }
- };
-
- return (
-
- {chatGroup &&
- );
-};
-
-export { CustomMessageTemplate };
-```
-
Default Reply View
-Custom Reply View
-
- {chatGroup && (
-
);
};
export { CustomMessageTemplate };
```
-
-
- {chatGroup &&
- );
-};
-
-export { CustomMessageTemplate };
-```
-
@@ -1440,7 +882,7 @@ However, if you wish to override or modify these options, you can use the `optio
- {chatGroup && (
-
- );
-};
-
-export { CustomMessageTemplate };
-```
-
-
@@ -1615,8 +983,8 @@ You can create an entirely new template for custom messages is one of the powerf
-
- );
- };
-
- const getMessageRequestBuilder = () => {
- const CUSTOM_MESSAGE_TYPE = "customType";
- let categories = CometChatUIKit.getDataSource().getAllMessageCategories();
- categories.push(CometChatUIKitConstants.MessageCategory.custom);
- let types = CometChatUIKit.getDataSource().getAllMessageTypes();
- types.push(CUSTOM_MESSAGE_TYPE);
- return new CometChat.MessagesRequestBuilder().setCategories(categories).setTypes(types).hideReplies(true).setLimit(30);
- }
-
- return (
-
-
-
- {formatTime(message.getSentAt())}
- {isSentByMe && (
-
- )}
-
-
-
- Add Contact
- Message
-
- {chatGroup &&
- );
-};
-
-export { CustomMessageTemplate };
-```
-
](https://link.cometchat.com/next-conversation-list-message)
-
-> **Tip:** You can **fork** the sandbox, insert your **CometChat credentials** (App ID, Region, Auth Key.) in the code, and immediately preview how the UI and messages respond in real time.
+
-This layout is structured into three key sections:
-
-1. **Sidebar (Conversation List)** – Displays active conversations, including users and groups.
-2. **Message View** – Shows chat messages for the selected conversation in real-time.
-3. **Message Composer** – Provides an input field for typing and sending messages, along with support for media, emojis, and reactions.
-
-***
+[](https://link.cometchat.com/next-conversation-list-message)
-## **Step-by-Step Guide**
+> Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time.
-### **Step 1: Create Sidebar**
+---
-Let's create the `Sidebar` component which will render different conversations.
+## What You're Building
-#### **Folder Structure**
+Three sections working together:
-Create a `CometChatSelector` folder inside your `src/app` directory and add the following files:
+1. **Sidebar (conversation list)** — shows all active conversations (users and groups)
+2. **Message view** — displays chat messages for the selected conversation in real time
+3. **Message composer** — text input with support for media, emojis, and reactions
-```swift
-src/app/
-│── CometChatSelector/
-│ ├── CometChatSelector.tsx
-│ ├── CometChatSelector.css
-```
+---
-#### **Download the Icon**
+## Step 1 — Create the Sidebar Component
-These icons are available in the **CometChat UI Kit assets folder**. You can find them at:\
-🔗 [GitHub Assets Folder](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app/src/assets)
+
- {/* Sidebar with conversation list */}
) : undefined;
@@ -296,169 +274,115 @@ export default CometChatNoSSR;
```
- {
let item = activeItem;
- // Extract the conversation participant
if (activeItem instanceof CometChat.Conversation) {
item = activeItem.getConversationWith();
}
- // Update states based on the type of selected item
if (item instanceof CometChat.User) {
setSelectedUser(item as CometChat.User);
setSelectedGroup(undefined);
@@ -274,11 +253,10 @@ const CometChatNoSSR: React.FC = () => {
setSelectedUser(undefined);
setSelectedGroup(undefined);
}
- }}
+ }}
/>
-
- {/* Message view section */}
+
{selectedUser || selectedGroup ? (
Select Conversation to start
+ Select a conversation to start chatting
)}
- */}
+
-
+```css title="globals.css" lines
+@import url("@cometchat/chat-uikit-react/css-variables.css");
+```
-**Recommended for:**
+Also ensure your global CSS sets `height: 100%` on the root elements:
-* Desktop-first applications
-* Apps requiring a **rich user experience** with seamless navigation
-* Platforms supporting both **individual and group messaging**
-* **Mobile-friendly** apps needing a **tap-to-open message view**
+```css title="globals.css" lines
+html,
+body {
+ height: 100%;
+}
-[](https://link.cometchat.com/next-conversation-list-message)
+#__next {
+ height: 100%;
+}
+```
-> **Tip:** You can **fork** the sandbox, insert your **CometChat credentials** (App ID, Region, Auth Key.) in the code, and immediately preview how the UI and messages respond in real time.
+Without the CSS import, components will render with broken or missing styles. Without the height rules, the chat UI won't fill the viewport.
-[Integrate Conversation List + Message](./next-conversation)
+---
-***
+## Step 6 — Choose a Chat Experience
-#### **2️⃣ One-to-One/Group Chat**
+Integrate a conversation view that suits your app's UX. Each option below includes a live CodeSandbox demo and a step-by-step guide.
-**Best for:** Apps that require a **focused, direct messaging experience** without a sidebar.
+### Conversation List + Message View
-**Features:**
+Two-panel layout — conversation list on the left, messages on the right. Think WhatsApp Web or Slack.
-* **Dedicated chat window** – Ideal for one-on-one or group messaging.
-* **No conversation list** – Users directly enter the chat without navigating through a list.
-* **Supports both One-to-One and Group Chats** – Easily configurable with minor code modifications.
-* **Optimized for mobile** – Full-screen chat experience without distractions.
-* **Seamless real-time communication** – Auto-updates messages for a smooth experience.
-* **Ideal for support chat or community-based messaging.**
+- Two-panel layout with conversation list and active chat window
+- Switch between one-to-one and group conversations
+- Tap-to-view on mobile — tapping a conversation opens the message view
+- Real-time updates and message sync across sessions
-
+
-**Recommended for:**
-
-* **Support chat applications** – Direct user-agent communication.
-* **Apps focusing on direct messaging** – No distractions from other conversations.
-* **Community or group chat applications** – A structured way to interact in groups.
-* **Mobile-first applications** – Designed for compact and dedicated messaging experiences.
-
-[](https://link.cometchat.com/next-one-on-one)
-
-> **Tip:** You can **fork** the sandbox, insert your **CometChat credentials** (App ID, Region, Auth Key.) in the code, and immediately preview how the UI and messages respond in real time.
+[](https://link.cometchat.com/next-conversation-list-message)
-[Integrate One-to-One/Group Chat](./next-one-to-one-chat)
+> Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time.
-***
+
+
-**Recommended for:**
+[](https://link.cometchat.com/next-one-on-one)
-* **Apps requiring structured navigation** – Clearly separate chat, calls, and settings.
-* **Multi-feature chat apps** – Supporting different functionalities in an organized way.
-* **Mobile-first applications** – Ideal for apps needing tab-based UI for easy access to features.
-* **Support & enterprise chat solutions** – Perfect for help desks, business chat platforms, and customer support apps.
+> Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time.
-[](https://link.cometchat.com/next-tabs-sidebar-message)
+
+
-**Recommended for:**
+[](https://link.cometchat.com/next-tabs-sidebar-message)
-* Apps that require **a fully customized chat experience**.
-* Developers who want to **extend functionalities and modify UI components**.
-* Businesses integrating chat seamlessly into **existing platforms**.
+> Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time.
-**Key Areas to Explore:**
+](https://link.cometchat.com/next-one-on-one)
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` |
+| Framework | Next.js |
+| Components | `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` |
+| Layout | Single chat window — no sidebar, no conversation list |
+| Prerequisite | Complete [Next.js Integration](/ui-kit/react/next-js-integration) Steps 1–5 first |
+| SSR | Dynamic import with `ssr: false` — CometChat requires browser APIs |
+| Pattern | Support chat, embedded widgets, focused messaging |
-> **Tip:** You can **fork** the sandbox, insert your **CometChat credentials** (App ID, Region, Auth Key.) in the code, and immediately preview how the UI and messages respond in real time.
+
-### **Key Components**
-
-1. **Chat Header** – Displays recipient details and optional call/video call buttons.
-2. **Message View** – Shows real-time chat history.
-3. **Message Input Box** – Enables users to send messages, media, and reactions.
-
-***
-
-## **Step-by-Step Guide**
-
-### **Step 1: Implement the Chat Header**
-
-* Display **profile picture, name, and online status**.
-* Add **voice and video call buttons** (optional).
-
-```html
-](https://link.cometchat.com/next-one-on-one)
-* Load **chat history** and **real-time messages**.
-* Ensure **smooth scrolling and timestamp visibility**.
+> Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time.
-```html
-Select Conversation to start
+
+ Set a user or group UID in CometChatNoSSR.tsx to start chatting
+
)}
) : undefined;
@@ -161,174 +151,113 @@ export default CometChatNoSSR;
```
](https://link.cometchat.com/next-tabs-sidebar-message)
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` |
+| Framework | Next.js |
+| Components | `CometChatConversations`, `CometChatCallLogs`, `CometChatUsers`, `CometChatGroups`, `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` |
+| Layout | Tabbed sidebar (Chats, Calls, Users, Groups) + message view |
+| Prerequisite | Complete [Next.js Integration](/ui-kit/react/next-js-integration) Steps 1–5 first |
+| SSR | Dynamic import with `ssr: false` — CometChat requires browser APIs |
+| Pattern | Full-featured messaging app with multiple sections |
-> **Tip:** You can **fork** the sandbox, insert your **CometChat credentials** (App ID, Region, Auth Key.) in the code, and immediately preview how the UI and messages respond in real time.
+
-This layout consists of:
-
-1. **Sidebar (Conversation List)** – Displays recent conversations with active users and groups.
-2. **Message View** – Shows the selected chat with real-time messages.
-3. **Message Input Box** – Allows users to send messages seamlessly.
-
-***
-
-## **Step-by-Step Guide**
-
-### **Step 1: Create a Tab Component**
-
-To manage navigation, let's build a **`CometChatTabs`** component. This component will render different tabs and allow switching between sections dynamically.
+[](https://link.cometchat.com/next-tabs-sidebar-message)
-#### **Folder Structure**
+> Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time.
-Create a `CometChatTabs` folder inside your `src` directory and add the following files:
+---
-```php
-public/
-├── assets # These are the images you need to save
-│ ├── chats.svg
-│ ├── calls.svg
-│ ├── users.svg
-│ ├── groups.svg
-src/
-│── CometChatTabs/
-│ ├── CometChatTabs.tsx
-│ ├── CometChatTabs.css
-```
+## What You're Building
-#### **Download the Icons**
+Three sections working together:
-These icons are available in the **CometChat UI Kit assets folder**. You can find them at:\
-🔗 [GitHub Assets Folder](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app/src/assets)
+1. **Tab bar** — switches between Chats, Calls, Users, and Groups
+2. **Sidebar** — renders the list for the active tab
+3. **Message view** — header + messages + composer for the selected item
-***
+---
-#### **Implementation**
+## Step 1 — Create the Tab Component
+
+
- {/* Loop through each tab item to render it */}
{tabItems.map((tabItem) => {
const isActive =
activeTab === tabItem.name.toLowerCase() ||
@@ -104,9 +105,8 @@ export const CometChatTabs = (props: {
onTabClicked(tabItem)} // Invoke callback on click
+ onClick={() => onTabClicked(tabItem)}
>
- {/* Icon section with mask styling */}
setHoverTab(tabItem.name.toLowerCase())}
onMouseLeave={() => setHoverTab("")}
/>
-
- {/* Tab label */}
-
-```css CometChatTabs.css
-/* Main container for the CometChat tab bar */
+```css title="CometChatTabs.css" lines
.cometchat-tab-component {
- display: flex; /* Align child tabs horizontally */
- width: 100%; /* Full-width tab bar */
- padding: 0px 8px; /* Horizontal padding */
- align-items: flex-start; /* Align tab items to the top */
- gap: 8px; /* Space between tab items */
- border-top: 1px solid var(--cometchat-border-color-light, #F5F5F5); /* Top border */
- border-right: 1px solid var(--cometchat-border-color-light, #F5F5F5); /* Right border */
- background: var(--cometchat-background-color-01, #FFF); /* Background color */
+ display: flex;
+ width: 100%;
+ padding: 0px 8px;
+ align-items: flex-start;
+ gap: 8px;
+ border-top: 1px solid var(--cometchat-border-color-light, #F5F5F5);
+ border-right: 1px solid var(--cometchat-border-color-light, #F5F5F5);
+ background: var(--cometchat-background-color-01, #FFF);
}
-/* Styles for each individual tab */
.cometchat-tab-component__tab {
display: flex;
- flex-direction: column; /* Stack icon and text vertically */
- justify-content: center; /* Center vertically */
- align-items: center; /* Center horizontally */
- padding: 12px 0px 10px 0px; /* Top and bottom spacing */
- gap: 4px; /* Space between icon and text */
- flex: 1 0 0; /* Equally distribute available space among tabs */
- min-height: 48px; /* Minimum height for consistent layout */
+ padding: 12px 0px 10px 0px;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 4px;
+ flex: 1 0 0;
+ min-height: 48px;
}
-/* Default tab icon style */
.cometchat-tab-component__tab-icon {
display: flex;
width: 32px;
height: 32px;
justify-content: center;
align-items: center;
- background: var(--cometchat-icon-color-secondary); /* Default icon background */
+ background: var(--cometchat-icon-color-secondary);
-webkit-mask-size: contain;
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
@@ -187,116 +181,92 @@ export const CometChatTabs = (props: {
cursor: pointer;
}
-/* Tab text label style */
.cometchat-tab-component__tab-text {
- color: var(--cometchat-text-color-secondary, #727272); /* Default label color */
+ color: var(--cometchat-text-color-secondary, #727272);
text-align: center;
- font: var(--cometchat-font-caption1-medium, 500 12px Roboto); /* Font style */
+ font: var(--cometchat-font-caption1-medium, 500 12px Roboto);
cursor: pointer;
}
-/* Highlighted icon style for active/hovered tab */
.cometchat-tab-component__tab-icon-active {
- background: var(--cometchat-icon-color-highlight); /* Highlight color */
+ background: var(--cometchat-icon-color-highlight);
}
-/* Highlighted text style for active/hovered tab */
.cometchat-tab-component__tab-text-active {
- color: var(--cometchat-text-color-highlight); /* Highlighted text color */
+ color: var(--cometchat-text-color-highlight);
}
```
-
-***
-
-### **Step 2: Create Sidebar**
-
-Let's create the `Sidebar` component which will render different conversations.
+---
-#### **Folder Structure**
+## Step 2 — Create the Sidebar Component
-Create a `CometChatSelector` folder inside your `src/app` directory and add the following files:
+The sidebar renders the list for whichever tab is active, plus the tab bar at the bottom.
-```
-src/
-│── CometChatSelector/
-│ ├── CometChatSelector.tsx
-│ ├── CometChatSelector.css
-```
+
+
+
+
+
+
+
+
-```tsx CometChatSelector.tsx
+```tsx title="CometChatSelector.tsx" lines
import { useEffect, useState } from "react";
import {
Call,
Conversation,
Group,
User,
- CometChat
+ CometChat,
} from "@cometchat/chat-sdk-javascript";
-
import {
CometChatCallLogs,
CometChatConversations,
CometChatGroups,
- CometChatUIKit,
CometChatUIKitLoginListener,
- CometChatUsers
+ CometChatUsers,
} from "@cometchat/chat-uikit-react";
-
import { CometChatTabs } from "../CometChatTabs/CometChatTabs";
-// Define props interface for selector
interface SelectorProps {
- onSelectorItemClicked?: (input: User | Group | Conversation | Call, type: string) => void;
+ onSelectorItemClicked?: (
+ input: User | Group | Conversation | Call,
+ type: string
+ ) => void;
}
export const CometChatSelector = (props: SelectorProps) => {
- const {
- onSelectorItemClicked = () => {},
- } = props;
-
- // State to manage currently logged in user
+ const { onSelectorItemClicked = () => {} } = props;
const [loggedInUser, setLoggedInUser] = useState();
-
- // State to track selected conversation, user, group, or call
const [activeItem, setActiveItem] = useState<
Conversation | User | Group | Call | undefined
>();
-
- // State to track currently active tab: "chats", "calls", "users", or "groups"
const [activeTab, setActiveTab] = useState("chats");
- // Fetch logged-in user once component mounts
useEffect(() => {
const user = CometChatUIKitLoginListener.getLoggedInUser();
setLoggedInUser(user);
- }, [CometChatUIKitLoginListener?.getLoggedInUser()]);
-
- // Logout function to clear user session
- const logOut = () => {
- CometChatUIKit.logout()
- .then(() => {
- setLoggedInUser(null);
- })
- .catch((error) => {
- console.log("Logout error:", error);
- });
- };
+ }, []);
return (
<>
- {/* Render selector content only if a user is logged in */}
{loggedInUser && (
<>
{activeTab === "chats" && (
{
setActiveItem(item);
onSelectorItemClicked(item, "updateSelectedItem");
@@ -336,12 +306,9 @@ export const CometChatSelector = (props: SelectorProps) => {
)}
- {/* Render the tab switcher at the bottom */}
{
- setActiveTab(item.name.toLowerCase()); // Update tab on click
- }}
+ onTabClicked={(item) => setActiveTab(item.name.toLowerCase())}
/>
);
@@ -349,69 +316,56 @@ export const CometChatSelector = (props: SelectorProps) => {
```
-
-```css CometChatSelector.css
-/* Style the icon inside header menu in conversation list */
+```css title="CometChatSelector.css" lines
.selector-wrapper .cometchat-conversations .cometchat-list__header-menu .cometchat-button__icon {
- background: var(--cometchat-icon-color-primary); /* Primary icon color */
+ background: var(--cometchat-icon-color-primary);
}
-/* Highlight icon on hover */
.cometchat-conversations .cometchat-list__header-menu .cometchat-button__icon:hover {
- background: var(--cometchat-icon-color-highlight); /* Highlighted icon color on hover */
+ background: var(--cometchat-icon-color-highlight);
}
-/* Remove right border from the search bar inside the list */
.cometchat-list__header-search-bar {
border-right: none;
}
-/* Align menu list items to the left */
.cometchat .cometchat-menu-list__sub-menu-list-item {
text-align: left;
}
-/* Positioning for the submenu inside conversations menu */
.cometchat .cometchat-conversations .cometchat-menu-list__sub-menu-list {
width: 212px;
top: 40px !important;
left: 172px !important;
}
-/* Style for the logged-in user section with bottom border */
#logged-in-user {
border-bottom: 2px solid var(--cometchat-border-color-default, #E8E8E8);
}
-/* Make submenu items under logged-in user non-clickable */
#logged-in-user .cometchat-menu-list__sub-menu-item-title,
#logged-in-user .cometchat-menu-list__sub-menu-list-item {
cursor: default;
}
-/* Logout icon color inside submenu */
.cometchat-menu-list__sub-menu-list-item-icon-log-out {
- background-color: var(--cometchat-error-color, #F44649); /* Error color */
+ background-color: var(--cometchat-error-color, #F44649);
}
-/* Logout label/text color inside submenu */
.cometchat-menu-list__sub-menu-item-title-log-out {
color: var(--cometchat-error-color, #F44649);
}
-/* Enable pointer cursor for chat menu item titles */
.chat-menu .cometchat .cometchat-menu-list__sub-menu-item-title {
cursor: pointer;
}
-/* Remove shadow from the chat menu's submenu */
.chat-menu .cometchat .cometchat-menu-list__sub-menu {
box-shadow: none;
}
-/* Style the icons inside chat menu items */
.chat-menu .cometchat .cometchat-menu-list__sub-menu-icon {
background-color: var(--cometchat-icon-color-primary, #141414);
width: 24px;
@@ -420,46 +374,56 @@ export const CometChatSelector = (props: SelectorProps) => {
```
-
-### **Step 3: Render Experience**
+---
+
+## Step 3 — Create the CometChatNoSSR Component
-Now we will update the `CometChatNoSSR.tsx` & `CometChatNoSSR.css` files to import these new components as below,
+This component handles init, login, and renders the full tabbed chat experience. It runs client-side only.
+
+
+
+
+
+
+
+
+
-```tsx CometChatNoSSR.tsx
+```tsx title="CometChatNoSSR.tsx" highlight={15-17, 20} lines
import React, { useEffect, useState } from "react";
-import {
- CometChatMessageComposer,
- CometChatMessageHeader,
- CometChatMessageList,
- CometChatUIKit,
- UIKitSettingsBuilder
+import {
+ CometChatMessageComposer,
+ CometChatMessageHeader,
+ CometChatMessageList,
+ CometChatUIKit,
+ UIKitSettingsBuilder,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatSelector } from "../CometChatSelector/CometChatSelector";
import "./CometChatNoSSR.css";
-// Constants for CometChat configuration
+// Replace with your actual credentials
const COMETCHAT_CONSTANTS = {
- APP_ID: "",
- REGION: "",
- AUTH_KEY: "",
+ APP_ID: "", // Replace with your App ID
+ REGION: "", // Replace with your Region
+ AUTH_KEY: "", // Replace with your Auth Key (dev only)
};
-// Functional component for CometChatNoSSR
+const UID = "cometchat-uid-4"; // Replace with your actual UID
+
const CometChatNoSSR: React.FC = () => {
- // State to store the logged-in user
const [user, setUser] = useState(undefined);
- // State to store selected user or group
const [selectedUser, setSelectedUser] = useState(undefined);
const [selectedGroup, setSelectedGroup] = useState(undefined);
useEffect(() => {
- // Initialize UIKit settings
const UIKitSettings = new UIKitSettingsBuilder()
.setAppId(COMETCHAT_CONSTANTS.APP_ID)
.setRegion(COMETCHAT_CONSTANTS.REGION)
@@ -467,15 +431,12 @@ const CometChatNoSSR: React.FC = () => {
.subscribePresenceForAllUsers()
.build();
- // Initialize CometChat UIKit
CometChatUIKit.init(UIKitSettings)
?.then(() => {
console.log("Initialization completed successfully");
- // Check if user is already logged in
CometChatUIKit.getLoggedinUser().then((loggedInUser) => {
if (!loggedInUser) {
- // Perform login if no user is logged in
- CometChatUIKit.login("cometchat-uid-4")
+ CometChatUIKit.login(UID)
.then((user) => {
console.log("Login Successful", { user });
setUser(user);
@@ -492,16 +453,13 @@ const CometChatNoSSR: React.FC = () => {
return user ? (
-
-```css CometChatNoSSR.css
-/* Layout for the main container that holds conversations and messages */
+```css title="CometChatNoSSR.css" lines
.conversations-with-messages {
- display: flex;
- height: 100%;
- width: 100%;
+ display: flex;
+ height: 100%;
+ width: 100%;
}
-/* Sidebar wrapper for conversation list */
.conversations-wrapper {
- height: 100%;
- width: 480px; /* Fixed width for conversation list */
- overflow: hidden; /* Hide any overflowing content */
- display: flex;
- flex-direction: column;
- height: inherit;
+ height: 100%;
+ width: 480px;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ height: inherit;
}
-/* Hide overflow content inside the conversation component */
.conversations-wrapper > .cometchat {
- overflow: hidden;
+ overflow: hidden;
}
-/* Message section layout */
.messages-wrapper {
- width: calc(100% - 480px); /* Take remaining space */
- height: 100%;
- display: flex;
- flex-direction: column;
+ width: calc(100% - 480px);
+ height: 100%;
+ display: flex;
+ flex-direction: column;
}
-/* Styling for when no conversation is selected */
.empty-conversation {
- height: 100%;
- width: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- background: white;
- color: var(--cometchat-text-color-secondary, #727272);
- font: var(--cometchat-font-body-regular, 400 14px Roboto);
+ height: 100%;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: white;
+ color: var(--cometchat-text-color-secondary, #727272);
+ font: var(--cometchat-font-body-regular, 400 14px Roboto);
}
-/* Ensure message composer does not have rounded corners */
.cometchat .cometchat-message-composer {
- border-radius: 0px;
+ border-radius: 0px;
}
```
-
-### **Step 4: Disabling SSR for `CometChatNoSSR.tsx` in Next.js**
+How it works:
+- Selections from any tab (Chats, Calls, Users, Groups) flow through the same `onSelectorItemClicked` callback.
+- Conversation items are unwrapped via `getConversationWith()` to extract the underlying `User` or `Group`.
+- Only one of `selectedUser` / `selectedGroup` is set at a time — the other is cleared.
-In this update, we will **disable Server-Side Rendering (SSR) for `CometChatNoSSR.tsx`** while keeping the rest of the application’s SSR functionality intact. This ensures that the **CometChat UI Kit components load only on the client-side**, preventing SSR-related issues.
+---
-#### **Disabling SSR in `index.tsx`**
+## Step 4 — Disable SSR in Your Page
-Modify your `index.tsx` file to dynamically import the `CometChatNoSSR.tsx` component with `{ ssr: false }`.
+Dynamically import `CometChatNoSSR` with `ssr: false` so it only loads client-side.
-```tsx index.tsx
-import { Inter } from "next/font/google";
+```tsx title="index.tsx" lines
import dynamic from "next/dynamic";
+import "@cometchat/chat-uikit-react/css-variables.css";
-import '@cometchat/chat-uikit-react/css-variables.css';
-
-const inter = Inter({ subsets: ["latin"] });
-
-// Dynamically import CometChat component with SSR disabled
-const CometChatComponent = dynamic(() => import("../CometChatNoSSR/CometChatNoSSR"), {
- ssr: false,
-});
+const CometChatComponent = dynamic(
+ () => import("../CometChatNoSSR/CometChatNoSSR"),
+ { ssr: false }
+);
export default function Home() {
return
+
+```bash lines
+npm run dev
```
-
-### **Step 6: Run the project**
-
+
+
+```bash lines
+pnpm dev
```
-npm run dev
+
+
+```bash lines
+yarn dev
```
+
+
-***
-
-## **Next Steps**
-
-### **Enhance the User Experience**
+You should see the tab bar at the bottom of the sidebar. Switch between Chats, Calls, Users, and Groups — tapping any item loads the message view on the right.
-* **[Advanced Customizations](/ui-kit/react/theme)** – Personalize the chat UI to align with your brand.
+---
-***
+## Next Steps
+
+
+
+ Customize colors, fonts, and styles to match your brand
+
+
+ Browse all prebuilt UI components
+
+
+ Chat features included out of the box
+
+
diff --git a/ui-kit/react/outgoing-call.mdx b/ui-kit/react/outgoing-call.mdx
index 89413847a..c6d9c9f35 100644
--- a/ui-kit/react/outgoing-call.mdx
+++ b/ui-kit/react/outgoing-call.mdx
@@ -1,29 +1,35 @@
---
title: "Outgoing Call"
+description: "Display and manage outgoing voice and video calls with cancel controls using the CometChatOutgoingCall component."
---
-## Overview
-
-The outgoing call component is a visual representation of a user-initiated call, whether it's a voice or video call. It serves as an interface for managing outgoing calls, providing users with essential options to control the call experience. This component typically includes information about the call recipient, call controls for canceling the call, and feedback on the call status, such as indicating when the call is in progress.
-
-The `Outgoing Call` is comprised of the following components:
+
-| Components | Description |
-| ---------------- | ------------------------------------------------------------------------------------------------------------------- |
-| CometChat Button | This component represents a button with optional icon and text. |
-| CometChat Avatar | This component component displays an image or user's avatar with fallback to the first two letters of the username. |
+| Field | Value |
+| --- | --- |
+| Purpose | Visual representation of a user-initiated outgoing voice/video call with cancel control and recipient info |
+| Package | `@cometchat/chat-uikit-react` |
+| Import | `import { CometChatOutgoingCall } from "@cometchat/chat-uikit-react";` |
+| Used in experiences | Outgoing call screen, call initiation overlay |
+| Copy-paste base | See [Base Code](#base-code--stylesheet) below |
+| Primary output | Call cancellation via `onCallCanceled` |
+| Primary hook points | `onCallCanceled`, `onError`, view slots (`titleView`, `subtitleView`, `avatarView`, `cancelButtonView`) |
+| CSS root class | `.cometchat-outgoing-call` |
+| Real-time events | None emitted directly |
-## Usage
+
-### Integration
+## Base Code and Stylesheet
+
+Renders an outgoing call screen with recipient info and a cancel button. Requires a `CometChat.Call` object from `CometChat.initiateCall()`.
-```tsx
+```tsx lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
CometChatOutgoingCall,
@@ -36,16 +42,13 @@ const OutgoingCallDemo = () => {
React.useEffect(() => {
const uid = "uid";
-
const callObject = new CometChat.Call(
uid,
CometChatUIKitConstants.MessageTypes.audio,
CometChatUIKitConstants.MessageReceiverType.user
);
CometChat.initiateCall(callObject)
- .then((c) => {
- setCall(c);
- })
+ .then((c) => setCall(c))
.catch(console.log);
}, []);
@@ -54,975 +57,335 @@ const OutgoingCallDemo = () => {
export default OutgoingCallDemo;
```
-
+
-
-```tsx
-import { OutgoingCallDemo } from "./OutgoingCallDemo";
+Root CSS class for style overrides:
-export default function App() {
- return (
-
-
-
-
-### Actions
-
-[Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.
-
-##### 1. onCallCanceled
-
-The `onCallCanceled` event gets activated when the cancel button is clicked. It does not have a default behavior. However, you can override its behavior using the following code snippet.
-
-
-
-```ts
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import {
- CometChatOutgoingCall,
- CometChatUIKitConstants,
-} from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const OutgoingCallDemo = () => {
- const [call, setCall] = React.useState();
-
- React.useEffect(() => {
- const uid = "uid";
-
- const callObject = new CometChat.Call(
- uid,
- CometChatUIKitConstants.MessageTypes.audio,
- CometChatUIKitConstants.MessageReceiverType.user
- );
- CometChat.initiateCall(callObject)
- .then((c) => {
- setCall(c);
- })
- .catch(console.log);
- }, []);
-
- const cancelCall = () => {
- //your custom cancel call click actions
- CometChat.endCall(call!.getSessionId()).then(() => {
- setCall(undefined);
- });
- };
- return call ? (
-
+### Data
-
-```js
-import React, { useState, useEffect } from 'react';
-import { CometChat } from '@cometchat/chat-sdk-javascript';
-import { CometChatOutgoingCall, CometChatUIKitConstants } from '@cometchat/chat-uikit-react';
+| Property | Type | Default | Effect | Pitfall |
+| --- | --- | --- | --- | --- |
+| `call` | `CometChat.Call` | — (required) | Sets the outgoing call object | Must come from `CometChat.initiateCall()` |
-const OutgoingCallDemo = () => {
- const [call, setCall] = useState(null);
+### Sound
- useEffect(() => {
- const uid = "uid";
+| Property | Type | Default | Effect | Pitfall |
+| --- | --- | --- | --- | --- |
+| `disableSoundForCalls` | `boolean` | `false` | Disables the outgoing call ringtone | — |
+| `customSoundForCalls` | `string` | `undefined` | Custom sound file URL for outgoing calls | — |
- const callObject = new CometChat.Call(
- uid,
- CometChatUIKitConstants.MessageTypes.audio,
- CometChatUIKitConstants.MessageReceiverType.user
- );
+## Actions
- CometChat.initiateCall(callObject)
- .then((c) => {
- setCall(c);
- })
- .catch(console.log);
- }, []);
+[Actions](/ui-kit/react/components-overview#actions) split into predefined (built-in triggers) and user-defined (callbacks).
- const cancelCall = () =>{
- //your custom cancel call click actions
- CometChat.endCall(call!.getSessionId())
- .then(() => {
- setCall(undefined);
- })
- };
+### Predefined Actions
- return (
- call && (
-
+### User-Defined Actions
-
+#### onCallCanceled
-##### 2. onError
+Fires when the cancel button is clicked.
-This action doesn't change the behavior of the component but rather listens for any errors that occur in the Outgoing Call component.
+| Detail | Value |
+| --- | --- |
+| When it fires | User clicks the cancel button |
+| Payload type | `() => void` |
+| What devs typically do next | End the call session, hide the outgoing call UI |
-
-
-```ts
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
-import {
- CometChatOutgoingCall,
- CometChatUIKitConstants,
-} from "@cometchat/chat-uikit-react";
-import React from "react";
+import { CometChatOutgoingCall, CometChatUIKitConstants } from "@cometchat/chat-uikit-react";
const OutgoingCallDemo = () => {
const [call, setCall] = React.useState();
React.useEffect(() => {
const uid = "uid";
-
- const callObject = new CometChat.Call(
- uid,
- CometChatUIKitConstants.MessageTypes.audio,
- CometChatUIKitConstants.MessageReceiverType.user
- );
- CometChat.initiateCall(callObject)
- .then((c) => {
- setCall(c);
- })
- .catch(console.log);
+ const callObject = new CometChat.Call(uid, CometChatUIKitConstants.MessageTypes.audio, CometChatUIKitConstants.MessageReceiverType.user);
+ CometChat.initiateCall(callObject).then((c) => setCall(c)).catch(console.log);
}, []);
- function handleOnError(error: CometChat.CometChatException) {
- //Your Custom Error Actions
- console.log(error);
- }
-
- return call ? (
-
-
-
-```js
-import React, { useState, useEffect } from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import {
- CometChatOutgoingCall,
- CometChatUIKitConstants,
-} from "@cometchat/chat-uikit-react";
-
-const OutgoingCallDemo = () => {
- const [call, setCall] = useState(null);
-
- useEffect(() => {
- const uid = "uid";
-
- const callObject = new CometChat.Call(
- uid,
- CometChatUIKitConstants.MessageTypes.audio,
- CometChatUIKitConstants.MessageReceiverType.user
- );
-
- CometChat.initiateCall(callObject)
- .then((c) => {
- setCall(c);
- })
- .catch(console.log);
- }, []);
+ const cancelCall = () => {
+ CometChat.endCall(call!.getSessionId()).then(() => setCall(undefined));
+ };
- function handleOnError(error) {
- //Your Custom Error Actions
- console.log(error);
- }
- return call &&
+#### onError
-
+Fires when the component encounters an error.
-***
+| Detail | Value |
+| --- | --- |
+| When it fires | Any internal error |
+| Payload type | `(error: CometChat.CometChatException) => void` |
+| What devs typically do next | Log to error tracking service |
-### Filters
+## Filters
-**Filters** allow you to customize the data displayed in a list within a `Component`. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using `RequestBuilders` of Chat SDK.
+The OutgoingCall component does not have any exposed filters.
-The `Outgoing Call` component does not have any exposed filters.
+## Events
-***
+### UI Events
-### Events
+The OutgoingCall component does not emit any custom UI events.
-[Events](/ui-kit/react/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.
+### SDK Events (Real-Time)
-The `Outgoing Call` component does not have any exposed filters.
+The component internally listens to SDK call events for real-time call status updates. No manual attachment needed.
-***
+## Advanced: Custom View Slots
-## Customization
+Customization override points for the outgoing call UI.
-To fit your app's design requirements, you can customize the appearance of the Outgoing Call component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.
+### Slot Catalog
-### Style
+| Slot | Params | What it replaces | Section |
+| --- | --- | --- | --- |
+| `titleView` | `JSX.Element` | Recipient name | Sub-section (title) |
+| `subtitleView` | `JSX.Element` | "Calling..." text | Sub-section (subtitle) |
+| `avatarView` | `JSX.Element` | Recipient avatar | Sub-section (avatar) |
+| `cancelButtonView` | `JSX.Element` | Cancel call button | Sub-section (cancel) |
-Using CSS you can customize the look and feel of the component in your app like the color, size, shape, and fonts.
+### titleView
-**Example**
+Replace the recipient name.
- 
+ 
-```ts
+```ts lines
import { CometChat } from "@cometchat/chat-sdk-javascript";
-import {
- CometChatOutgoingCall,
- CometChatUIKitConstants,
- OutgoingCallStyle,
-} from "@cometchat/chat-uikit-react";
-import React from "react";
+import { CometChatOutgoingCall, CometChatUIKitConstants } from "@cometchat/chat-uikit-react";
const OutgoingCallDemo = () => {
const [call, setCall] = React.useState();
React.useEffect(() => {
const uid = "uid";
+ const callObject = new CometChat.Call(uid, CometChatUIKitConstants.MessageTypes.audio, CometChatUIKitConstants.MessageReceiverType.user);
+ CometChat.initiateCall(callObject).then((c) => setCall(c)).catch(console.log);
+ }, []);
- const callObject = new CometChat.Call(
- uid,
- CometChatUIKitConstants.MessageTypes.audio,
- CometChatUIKitConstants.MessageReceiverType.user
+ const getTitleView = (call: CometChat.Call) => {
+ return (
+
+
+```css lines
+.outgoing-call__title {
+ color: #141414;
+ text-align: center;
+ font: 500 24px Roboto;
+}
+```
+
+
-
-```js
-import React, { useState, useEffect } from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import {
- CometChatOutgoingCall,
- CometChatUIKitConstants,
- OutgoingCallStyle,
-} from "@cometchat/chat-uikit-react";
-
-const OutgoingCallDemo = () => {
- const [call, setCall] = useState(null);
-
- useEffect(() => {
- const uid = "uid";
+### subtitleView
- const callObject = new CometChat.Call(
- uid,
- CometChatUIKitConstants.MessageTypes.audio,
- CometChatUIKitConstants.MessageReceiverType.user
- );
+Replace the "Calling..." text.
- CometChat.initiateCall(callObject)
- .then((c) => {
- setCall(c);
- })
- .catch(console.log);
- }, []);
+
+ 
+
- return call &&
+
+```ts lines
+const getSubtitleView = (call: CometChat.Call) => {
+ return (
+
-
-
-```css
-.cometchat-outgoing-call__avatar .cometchat-avatar {
+
+```css lines
+.outgoing-call__subtitle {
display: flex;
justify-content: center;
- align-items: center;
- flex-shrink: 0;
- border-radius: 16px;
- background: #fbaa75;
-}
-
-.cometchat-outgoing-call__button {
- display: flex;
- align-items: center;
- border-radius: 8px;
- background: #f44649;
+ align-items: flex-start;
+ gap: 8px;
+ color: #727272;
+ text-align: center;
+ font: 400 16px Roboto;
}
-.cometchat-outgoing-call .cometchat-outgoing-call__title {
- text-align: center;
- font: 400 32px/38px "Times New Roman";
+.outgoing-call__subtitle-icon {
+ -webkit-mask: url("") center center no-repeat;
+ background: #A1A1A1;
+ height: 24px;
+ width: 24px;
}
```
-
-
-### Functionality
+### avatarView
-These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements.
+Replace the recipient avatar.
-Here is a code snippet demonstrating how you can customize the functionality of the `Outgoing Call` component.
+
+ 
+
-```ts
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import {
- CometChatOutgoingCall,
- CometChatUIKitConstants,
-} from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const OutgoingCallDemo = () => {
- const [call, setCall] = React.useState();
-
- React.useEffect(() => {
- const uid = "uid";
+```ts lines
+import { CometChatAvatar, CometChatOutgoingCall } from "@cometchat/chat-uikit-react";
- const callObject = new CometChat.Call(
- uid,
- CometChatUIKitConstants.MessageTypes.audio,
- CometChatUIKitConstants.MessageReceiverType.user
- );
- CometChat.initiateCall(callObject)
- .then((c) => {
- setCall(c);
- })
- .catch(console.log);
- }, []);
-
- return call ? (
-
+
+```css lines
+.outgoing-call__avatar .cometchat-avatar,
+.outgoing-call__avatar .cometchat-avatar__image {
+ width: 160px;
+ height: 160px;
+ border-radius: 20px;
+}
-
-```js
-import React, { useState, useEffect } from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import {
- CometChatOutgoingCall,
- CometChatUIKitConstants,
-} from "@cometchat/chat-uikit-react";
-
-const OutgoingCallDemo = () => {
- const [call, setCall] = useState(null);
+.outgoing-call__avatar-status {
+ background-image: url("");
+ height: 44px;
+ width: 44px;
+ background-size: contain;
+ position: relative;
+ top: -45px;
+ right: -60px;
+}
+```
+
+
- useEffect(() => {
- const uid = "uid";
+### cancelButtonView
- const callObject = new CometChat.Call(
- uid,
- CometChatUIKitConstants.MessageTypes.audio,
- CometChatUIKitConstants.MessageReceiverType.user
- );
+Replace the cancel call button.
- CometChat.initiateCall(callObject)
- .then((c) => {
- setCall(c);
- })
- .catch(console.log);
- }, []);
+
+ 
+
+
+
+```ts lines
+const getCancelButtonView = (call: CometChat.Call) => {
return (
- call &&
-
-
-
-Below is a list of customizations along with corresponding code snippets
-
-| Property | Description | Code |
-| ----------------- | ---------------------------------------------------------------------- | --------------------------------------------------- |
-| **Call** | The CometChat call object used to set up and launch the outgoing call. | `call={call}` |
-| **Disable Sound** | Disables the sound of outgoing calls. | `disableSoundForCalls={false}` |
-| **Custom Sound** | Specifies a custom sound to play for outgoing calls. | `customSoundForCalls='Your Custom Sound For Calls'` |
-
-***
-
-### Advanced
-
-For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component.
-
-***
-
-#### TitleView
-
-This prop renders the custom title view for the outgoing call. Use this to override the existing title of user name from the outgoing call.
-
-The customized chat interface is displayed below.
-
-
-
-
-
-Use the following code to achieve the customization shown above.
-
-
-
-```ts
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import {
- CometChatOutgoingCall,
- CometChatUIKitConstants,
-} from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const OutgoingCallDemo = () => {
- const [call, setCall] = React.useState();
-
- React.useEffect(() => {
- const uid = "uid";
-
- const callObject = new CometChat.Call(
- uid,
- CometChatUIKitConstants.MessageTypes.audio,
- CometChatUIKitConstants.MessageReceiverType.user
- );
- CometChat.initiateCall(callObject)
- .then((c) => {
- setCall(c);
- })
- .catch(console.log);
- }, []);
-
- const getTitleView = (call: Call) => {
- return (
-
-
-
-```js
-import React, { useState, useEffect } from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import {
- CometChatOutgoingCall,
- CometChatUIKitConstants,
-} from "@cometchat/chat-uikit-react";
-
-const OutgoingCallDemo = () => {
- const [call, setCall] = useState(null);
-
- useEffect(() => {
- const uid = "uid";
-
- const callObject = new CometChat.Call(
- uid,
- CometChatUIKitConstants.MessageTypes.audio,
- CometChatUIKitConstants.MessageReceiverType.user
- );
-
- CometChat.initiateCall(callObject)
- .then((c) => {
- setCall(c);
- })
- .catch(console.log);
- }, []);
-
- const getTitleView = (call) => {
- return (
-
-
-
-```css
-.outgoing-call__title {
- color: #141414;
- text-align: center;
- font: 500 24px Roboto;
-}
-```
-
-
-
-
-
-#### SubtitleView
-
-This prop renders the custom sub title view for the outgoing call. Use this to override the existing sub title text from the outgoing call.
-
-The customized chat interface is displayed below.
-
-
-
-
-
-Use the following code to achieve the customization shown above.
-
-
-
-```ts
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import {
- CometChatOutgoingCall,
- CometChatUIKitConstants,
-} from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const OutgoingCallDemo = () => {
- const [call, setCall] = React.useState();
-
- React.useEffect(() => {
- const uid = "uid";
-
- const callObject = new CometChat.Call(
- uid,
- CometChatUIKitConstants.MessageTypes.audio,
- CometChatUIKitConstants.MessageReceiverType.user
- );
- CometChat.initiateCall(callObject)
- .then((c) => {
- setCall(c);
- })
- .catch(console.log);
- }, []);
-
- const getSubtitleView = (call: Call) => {
- return (
-
-
-
-```js
-import React, { useState, useEffect } from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import {
- CometChatOutgoingCall,
- CometChatUIKitConstants,
-} from "@cometchat/chat-uikit-react";
-
-const OutgoingCallDemo = () => {
- const [call, setCall] = useState(null);
-
- useEffect(() => {
- const uid = "uid";
-
- const callObject = new CometChat.Call(
- uid,
- CometChatUIKitConstants.MessageTypes.audio,
- CometChatUIKitConstants.MessageReceiverType.user
- );
-
- CometChat.initiateCall(callObject)
- .then((c) => {
- setCall(c);
- })
- .catch(console.log);
- }, []);
-
- const getSubtitleView = (call) => {
- return (
-
-
-
-```css
-.outgoing-call__subtitle {
- display: flex;
- justify-content: center;
- align-items: flex-start;
- gap: 8px;
- color: #727272;
- text-align: center;
- font: 400 16px Roboto;
-}
-
-.outgoing-call__subtitle-icon {
- -webkit-mask: url("") center center no-repeat;
- background: #A1A1A1;
- height: 24px;
- width: 24px;
+
+```css lines
+.outgoing-call__cancel-button-wrapper {
+ height: 64px;
+ display: flex;
+ justify-content: center;
+ cursor: pointer;
}
-```
-
-
-
-
-
-#### AvatarView
-
-This prop renders the custom avatar view for the outgoing call. Use this to override the existing avatar image from the outgoing call.
-
-The customized chat interface is displayed below.
-
-
-
-
-
-Use the following code to achieve the customization shown above.
-
-
-
-```ts
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import {
- CometChatAvatar,
- CometChatOutgoingCall,
- CometChatUIKitConstants,
-} from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const OutgoingCallDemo = () => {
- const [call, setCall] = React.useState();
-
- React.useEffect(() => {
- const uid = "uid";
-
- const callObject = new CometChat.Call(
- uid,
- CometChatUIKitConstants.MessageTypes.audio,
- CometChatUIKitConstants.MessageReceiverType.user
- );
- CometChat.initiateCall(callObject)
- .then((c) => {
- setCall(c);
- })
- .catch(console.log);
- }, []);
-
- const getAvatarView = (call: CometChat.Call) => {
- return (
-
-
-
-```js
-import React, { useState, useEffect } from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import {
- CometChatAvatar,
- CometChatOutgoingCall,
- CometChatUIKitConstants,
-} from "@cometchat/chat-uikit-react";
-const OutgoingCallDemo = () => {
- const [call, setCall] = useState(null);
-
- useEffect(() => {
- const uid = "uid";
-
- const callObject = new CometChat.Call(
- uid,
- CometChatUIKitConstants.MessageTypes.audio,
- CometChatUIKitConstants.MessageReceiverType.user
- );
-
- CometChat.initiateCall(callObject)
- .then((c) => {
- setCall(c);
- })
- .catch(console.log);
- }, []);
-
- const getAvatarView = (call) => {
- return (
-
-
-
-```css
-.outgoing-call__avatar .cometchat-avatar,
-.outgoing-call__avatar .cometchat-avatar__image {
- width: 160px;
- height: 160px;
- border-radius: 20px;
+.outgoing-call__cancel-button {
+ display: flex;
+ width: 330px;
+ padding: 12px 30px;
+ justify-content: center;
+ align-items: center;
+ gap: 12px;
+ border-radius: 12px;
+ background-color: #F44649;
+ color: #FFF;
+ font: 500 20px Roboto;
}
-.outgoing-call__avatar-status {
- background-image: url("");
- height: 44px;
- width: 44px;
- background-size: contain;
- position: relative;
- top: -45px;
- right: -60px;
+.outgoing-call__cancel-button-icon {
+ -webkit-mask: url("") center center no-repeat;
+ background: #E8E8E8;
+ height: 32px;
+ width: 32px;
}
```
-
-
-#### CancelButtonView
+## Theme and Styling
-This prop renders the custom cancel-call button view for the outgoing call. Use this to override the existing cancel call button view from the outgoing call.
-
-The customized chat interface is displayed below.
+Using CSS, customize the look and feel of the component. The root CSS class is `.cometchat-outgoing-call`.
-
+
-Use the following code to achieve the customization shown above.
-
-
-
-```ts
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import {
- CometChatOutgoingCall,
- CometChatUIKitConstants,
-} from "@cometchat/chat-uikit-react";
-import React from "react";
-
-const OutgoingCallDemo = () => {
- const [call, setCall] = React.useState();
-
- React.useEffect(() => {
- const uid = "uid";
-
- const callObject = new CometChat.Call(
- uid,
- CometChatUIKitConstants.MessageTypes.audio,
- CometChatUIKitConstants.MessageReceiverType.user
- );
- CometChat.initiateCall(callObject)
- .then((c) => {
- setCall(c);
- })
- .catch(console.log);
- }, []);
-
- const getCancelButtonView = (call: Call) => {
- return (
-
-
-
-```js
-import React, { useState, useEffect } from "react";
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-import {
- CometChatOutgoingCall,
- CometChatUIKitConstants,
-} from "@cometchat/chat-uikit-react";
-
-const OutgoingCallDemo = () => {
- const [call, setCall] = useState(null);
-
- useEffect(() => {
- const uid = "uid";
-
- const callObject = new CometChat.Call(
- uid,
- CometChatUIKitConstants.MessageTypes.audio,
- CometChatUIKitConstants.MessageReceiverType.user
- );
-
- CometChat.initiateCall(callObject)
- .then((c) => {
- setCall(c);
- })
- .catch(console.log);
- }, []);
-
- const getCancelButtonView = (call) => {
- return (
-
-
-
-```css
-.outgoing-call__cancel-button-wrapper {
- height: 64px;
- display: flex;
- justify-content: center;
- cursor: pointer;
+```css lines
+.cometchat-outgoing-call__avatar .cometchat-avatar {
+ border-radius: 16px;
+ background: #fbaa75;
}
-.outgoing-call__cancel-button {
- display: flex;
- width: 330px;
- padding: 12px 30px;
- justify-content: center;
- align-items: center;
- gap: 12px;
- align-self: stretch;
- border-radius: 12px;
- background-color: #F44649;
- color: #FFF;
- font: 500 20px Roboto;
+.cometchat-outgoing-call__button {
+ border-radius: 8px;
+ background: #f44649;
}
-.outgoing-call__cancel-button-icon {
- -webkit-mask: url("") center center no-repeat;
- background: #E8E8E8;
- height: 32px;
- width: 32px;
+.cometchat-outgoing-call .cometchat-outgoing-call__title {
+ text-align: center;
+ font: 400 32px/38px "Times New Roman";
}
-```
-
-
-
-
+```
\ No newline at end of file
diff --git a/ui-kit/react/overview.mdx b/ui-kit/react/overview.mdx
index 42b82d980..ee3a0041a 100644
--- a/ui-kit/react/overview.mdx
+++ b/ui-kit/react/overview.mdx
@@ -1,214 +1,106 @@
---
-title: "CometChat UI Kit For React"
+title: "React UI Kit"
sidebarTitle: "Overview"
+description: "Prebuilt React components for chat, voice, and video calling. Supports React.js, Next.js, React Router, and Astro."
---
-The **CometChat UI Kit** for React is a powerful solution designed to seamlessly integrate chat functionality into applications. It provides a robust set of **prebuilt UI components** that are **modular, customizable, and highly scalable**, allowing developers to accelerate their development process with minimal effort.
+
-***
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` v6.3.x |
+| Peer deps | `react` >=18, `react-dom` >=18, `rxjs` ^7.8.1 |
+| Calling | Optional — `@cometchat/calls-sdk-javascript` |
+| SSR | Client-side only. Use `ssr: false` or `client:only="react"` |
+| Localization | 19 languages built-in |
+| Source | [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6) |
-## **Why Choose CometChat UI Kit?**
+
-* **Rapid Integration** – Prebuilt UI components for faster deployment.
-* **Customizable & Flexible** – Modify the UI to align with your brand’s identity.
-* **Cross-Platform Compatibility** – Works seamlessly across various React-based frameworks.
-* **Scalable & Reliable** – Built on CometChat's **robust chat infrastructure** for enterprise-grade performance.
-
-***
-
-## **User Interface Preview**
+The CometChat React UI Kit provides prebuilt, customizable components for adding chat, voice, and video calling to any React app. Each component handles its own data fetching, real-time listeners, and state — you just drop them into your layout.
-***
-
-## **Try Live Demo**
+---
-**Experience the CometChat UI Kit in action:**
+## Try It
-
-
+ Try the full chat experience in your browser
+
+
+ Fork, add your credentials, and start building
+
+---
-{/* [
](https://link.cometchat.com/cometchat-demo)
-
-[](https://link.cometchat.com/react-conversation-list-message) */}
-
-
-> **Tip:** You can **fork** the sandbox, insert your **CometChat credentials** (App ID, Region, Auth Key) in the code, and immediately preview how the UI and messages respond in real time.
-
-***
-
-## **Integration**
-
-{/* ### **Option 1: UI Kit Builder (Pre-Assembled UI)**
-
-A ready-to-use chat interface—configured via a UI Kit Builder—built on top of our UI Kits.
+## Get Started
-
+
-**How It Works**
-
-* Toggle features like @mentions, reactions, media uploads, and more in a visual interface.
-* Drag-and-drop or point-and-click to enable or disable components.
-* Customize layouts and styles—no deep coding required.
-
-**Why It’s Great**
-
-* **Fastest Setup** – Minimal component wiring.
-* **Continuous Customization** – Only turn on the features you want.
-* **Fewer Moving Parts** – Reliable, pre-assembled UI that’s easy to maintain.
-
-
-
-
+
+ Vite or Create React App
+
+
-***
-
-### **Option 2: UI Components (Assemble It Yourself)** */}
-
-A collection of individual components—like conversation lists, message lists, message composer, etc.—each with built-in chat logic so you can customize every element.
-
-
-
-
+---
-**How It Works**
+## Explore
+
+
+
+ Browse all prebuilt UI components
+
+
+ Chat, calling, AI, and extensions
+
+
+ Colors, fonts, dark mode, and custom styling
+
+
+ Threaded messages, new chat, search, and more
+
+
-* Import the components you need from our UI Kits.
-* Arrange them in your desired layout, applying styling or customization as needed.
-* You don’t need to rewrite the SDK calls yourself—each component already integrates with CometChat logic.
+---
-**Why It’s Great**
+## Resources
-* **Flexible Design** – You control the final UI arrangement.
-* **No Extra Overhead** – Implement only the features you need.
-* **Modular** – Use exactly what you want, when you want.
-
-
-
-
-***
-
-## **Next Steps for Developers**
-
-1. **Learn the Basics** – [Key Concepts](/fundamentals/key-concepts).
-
-2. **Pick a Framework** – React.js or Next.js or React Router or Astro.
-
-3. **Follow the Setup Guide** –
-
- * **UI Components** – [React.js](/ui-kit/react/react-js-integration) or [Next.js](/ui-kit/react/next-js-integration) or [React Router](/ui-kit/react/react-router-integration) or [Astro](/ui-kit/react/astro-integration).
-
-4. **Customize UI** – Adjust [styles, themes](/ui-kit/react/theme), and [components](/ui-kit/react/components-overview).
-
-5. **Test & Deploy** – Run tests and launch your chat app.
-
-***
-
-## **Helpful Resources**
-
-Explore these essential resources to gain a deeper understanding of **CometChat UI Kits** and streamline your integration process.
-
-
-
-
-
- Fully functional sample applications to accelerate your development.
-
- View on GitHub
-
-
-
-
-
- Access the complete UI Kit source code on GitHub.
-
- View on GitHub
-
-
-
-
-
- UI design resources for customization and prototyping.
-
- View on Figma
-
-
-
+
+ Working reference app
+
+
+ Full UI Kit source on GitHub
+
+
+ Design resources and prototyping
+
+
+ Common issues and fixes
+
+
+ Open a support ticket
+
+
+ Upgrading from v5
+
-
-***
-
-## **Need Help?**
-
-If you need assistance, check out:
-
-* [Developer Community](http://community.cometchat.com/)
-* [Support Portal](https://help.cometchat.com/hc/en-us/requests/new)
diff --git a/ui-kit/react/property-changes.mdx b/ui-kit/react/property-changes.mdx
index 3358b3d16..e3c6c87a9 100644
--- a/ui-kit/react/property-changes.mdx
+++ b/ui-kit/react/property-changes.mdx
@@ -1,6 +1,14 @@
---
-title: "Property Changes"
+title: "Property Changes from V5 to V6"
+description: "Detailed reference of renamed, added, and removed properties and methods when upgrading from CometChat React UI Kit v5 to v6."
---
+
+- **Migration scope:** Property and method changes between v5 and v6 for all components
+- **Components affected:** Conversations, Users, Groups, Group Members, Message Header, Message List, Message Composer, Incoming Call, Outgoing Call, Call Buttons, Call Logs, CometChatLocalize
+- **Key pattern change:** `datePattern` (DatePatterns) replaced with `CalendarObject`-based props across all components
+- **Localization:** `setLocale` → `setCurrentLanguage`, `localize` → `getLocalizedString`
+- **Full migration guide:** [Upgrading from v5](/ui-kit/react/upgrading-from-v5)
+
## Conversations
@@ -92,3 +100,24 @@ title: "Property Changes"
| setDefaultLanguage | Sets the default lannguage if no language is passed in init method. |
| isRTL | Returns true if the active language is rtl otherwise return false. |
| getDir | Returns `rtl` or `ltr` based on the active language. |
+
+***
+
+## Next Steps
+
+
+
+ Full migration guide with breaking changes.
+
+
+ Explore all v6 prebuilt UI components.
+
+
+ Init, login, logout, and other UI Kit methods.
+
+
+ Subscribe to real-time events across components.
+
+
+
+***
diff --git a/ui-kit/react/react-conversation.mdx b/ui-kit/react/react-conversation.mdx
index 03ab256f4..309691b76 100644
--- a/ui-kit/react/react-conversation.mdx
+++ b/ui-kit/react/react-conversation.mdx
@@ -1,53 +1,63 @@
---
-title: "Building A Conversation List + Message View"
+title: "Conversation List + Message View"
sidebarTitle: "Conversation List + Message View"
+description: "Build a two-panel conversation list + message view layout in React.js with CometChat UI Kit."
---
-The **Conversation List + Message View** layout offers a seamless **two-panel chat interface**, commonly used in modern messaging applications like **WhatsApp Web, Slack, and Microsoft Teams**.
+
-This design enables users to switch between conversations effortlessly while keeping the chat window open, ensuring a **smooth, real-time messaging experience**.
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` |
+| Framework | React.js |
+| Components | `CometChatConversations`, `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer` |
+| Layout | Two-panel — conversation list (left) + message view (right) |
+| Prerequisite | Complete [React.js Integration](/ui-kit/react/react-js-integration) Steps 1–5 first |
+| Pattern | WhatsApp Web, Slack, Microsoft Teams |
-[](https://link.cometchat.com/react-conversation-list-message)
-
-> **Tip:** You can **fork** the sandbox, insert your **CometChat credentials** (App ID, Region, Auth Key.) in the code, and immediately preview how the UI and messages respond in real time.
+
-***
+This guide builds a two-panel chat layout — conversation list on the left, messages on the right. Users tap a conversation to open it.
-## **User Interface Overview**
+This assumes you've already completed [React.js Integration](/ui-kit/react/react-js-integration) (project created, UI Kit installed, init + login working, CSS imported).
-This layout is structured into three key sections:
+[](https://link.cometchat.com/react-conversation-list-message)
-1. **Sidebar (Conversation List)** – Displays active conversations, including users and groups.
-2. **Message View** – Shows chat messages for the selected conversation in real-time.
-3. **Message Composer** – Provides an input field for typing and sending messages, along with support for media, emojis, and reactions.
+> Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time.
-***
+---
-## **Step-by-Step Guide**
+## What You're Building
-### **Step 1: Create Sidebar**
+Three sections working together:
-Let's create the `Sidebar` component which will render different conversations.
+1. **Sidebar (conversation list)** — shows all active conversations (users and groups)
+2. **Message view** — displays chat messages for the selected conversation in real time
+3. **Message composer** — text input with support for media, emojis, and reactions
-#### **Folder Structure**
+---
-Create a `CometChatSelector` folder inside your `src` directory and add the following files:
+## Step 1 — Create the Sidebar Component
-```
-src/
-│── CometChatSelector/
-│ ├── CometChatSelector.tsx
-│ ├── CometChatSelector.css
-```
+Create a `CometChatSelector` folder inside `src/`:
+
+
+
+
+
+
+
-```tsx CometChatSelector.tsx
+```tsx title="CometChatSelector.tsx" lines
import { useEffect, useState } from "react";
import {
Conversation,
@@ -61,189 +71,167 @@ import {
} from "@cometchat/chat-uikit-react";
import "./CometChatSelector.css";
-// Define the props for the CometChatSelector component
interface SelectorProps {
onSelectorItemClicked?: (
input: User | Group | Conversation,
type: string
) => void;
- onHide?: () => void;
- onNewChatClicked?: () => void;
}
-// CometChatSelector component
export const CometChatSelector = (props: SelectorProps) => {
- // Destructure props with a default function for onSelectorItemClicked
const { onSelectorItemClicked = () => {} } = props;
-
- // State to store the logged-in user
const [loggedInUser, setLoggedInUser] = useState();
-
- // State to track the currently selected item (it can be a Conversation, User, or Group)
const [activeItem, setActiveItem] = useState<
CometChat.Conversation | CometChat.User | CometChat.Group | undefined
>();
- // useEffect hook to fetch and set the logged-in user
useEffect(() => {
- const loggedInUser = CometChatUIKitLoginListener.getLoggedInUser();
- setLoggedInUser(loggedInUser);
- }, [loggedInUser]); // Dependency on loggedInUser causes unnecessary re-renders
+ const user = CometChatUIKitLoginListener.getLoggedInUser();
+ setLoggedInUser(user);
+ }, []);
return (
<>
- {/* Render chat conversations if a user is logged in */}
{loggedInUser && (
- <>
- {
- setActiveItem(e); // Update the active item when an item is clicked
- onSelectorItemClicked(e, "updateSelectedItem"); // Notify parent component
- }}
- />
-
+ {
+ setActiveItem(e);
+ onSelectorItemClicked(e, "updateSelectedItem");
+ }}
+ />
)}
-
);
};
```
-
-```css CometChatSelector.css
-/* Styles for the menu icon in the conversation header */
+```css title="CometChatSelector.css" lines
+/* Menu icon in conversation header */
.selector-wrapper .cometchat-conversations .cometchat-list__header-menu .cometchat-button__icon {
- background: var(--cometchat-icon-color-primary);
+ background: var(--cometchat-icon-color-primary);
}
-/* Change background color of the menu icon on hover */
.cometchat-conversations .cometchat-list__header-menu .cometchat-button__icon:hover {
- background: var(--cometchat-icon-color-highlight);
+ background: var(--cometchat-icon-color-highlight);
}
-/* Remove the right border from the search bar */
.cometchat-list__header-search-bar {
- border-right: none;
+ border-right: none;
}
-/* Aligns submenu list items to the left */
.cometchat .cometchat-menu-list__sub-menu-list-item {
- text-align: left;
+ text-align: left;
}
-/* Adjust the width and positioning of the conversation menu list */
.cometchat .cometchat-conversations .cometchat-menu-list__sub-menu-list {
- width: 212px;
- top: 40px !important;
- left: 172px !important;
+ width: 212px;
+ top: 40px !important;
+ left: 172px !important;
}
-/* Styles for the logged-in user section */
+/* Logged-in user section */
#logged-in-user {
- border-bottom: 2px solid var(--cometchat-border-color-default, #E8E8E8);
+ border-bottom: 2px solid var(--cometchat-border-color-default, #E8E8E8);
}
-/* Disable cursor interaction for menu items inside logged-in user section */
#logged-in-user .cometchat-menu-list__sub-menu-item-title,
#logged-in-user .cometchat-menu-list__sub-menu-list-item {
- cursor: default;
+ cursor: default;
}
-/* Background color for the logout button icon */
.cometchat-menu-list__sub-menu-list-item-icon-log-out {
- background-color: var(--cometchat-error-color, #F44649);
+ background-color: var(--cometchat-error-color, #F44649);
}
-/* Text color for the logout menu item */
.cometchat-menu-list__sub-menu-item-title-log-out {
- color: var(--cometchat-error-color, #F44649);
+ color: var(--cometchat-error-color, #F44649);
}
-/* Enable pointer cursor for menu items inside the chat menu */
.chat-menu .cometchat .cometchat-menu-list__sub-menu-item-title {
- cursor: pointer;
+ cursor: pointer;
}
-/* Remove box-shadow from submenu in the chat menu */
.chat-menu .cometchat .cometchat-menu-list__sub-menu {
- box-shadow: none;
+ box-shadow: none;
}
-/* Styles for the submenu icon inside the chat menu */
.chat-menu .cometchat .cometchat-menu-list__sub-menu-icon {
- background-color: var(--cometchat-icon-color-primary, #141414);
- width: 24px;
- height: 24px;
+ background-color: var(--cometchat-icon-color-primary, #141414);
+ width: 24px;
+ height: 24px;
}
-/* Styling for the chat selector container */
+/* Selector container */
.cometchat-selector {
- display: flex;
- width: 100%;
- padding: 0px 8px;
- align-items: flex-start;
- gap: 8px;
- border-top: 1px solid var(--cometchat-border-color-light, #F5F5F5);
- border-right: 1px solid var(--cometchat-border-color-light, #F5F5F5);
- background: var(--cometchat-background-color-01, #FFF);
+ display: flex;
+ width: 100%;
+ padding: 0px 8px;
+ align-items: flex-start;
+ gap: 8px;
+ border-top: 1px solid var(--cometchat-border-color-light, #F5F5F5);
+ border-right: 1px solid var(--cometchat-border-color-light, #F5F5F5);
+ background: var(--cometchat-background-color-01, #FFF);
}
-/* Styling for each tab inside the chat selector */
.cometchat-selector__tab {
- display: flex;
- padding: 12px 0px 10px 0px;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- gap: 4px;
- flex: 1 0 0;
- min-height: 48px;
+ display: flex;
+ padding: 12px 0px 10px 0px;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 4px;
+ flex: 1 0 0;
+ min-height: 48px;
}
-/* Styles for the active tab icon */
.cometchat-selector__tab-icon-active {
- display: flex;
- width: 32px;
- height: 32px;
- justify-content: center;
- align-items: center;
- -webkit-mask-size: contain;
- mask-size: contain;
- cursor: default;
- background: var(--cometchat-icon-color-highlight);
- -webkit-mask: url('./assets/chats.svg') no-repeat center;
- mask: url('./assets/chats.svg') no-repeat center;
+ display: flex;
+ width: 32px;
+ height: 32px;
+ justify-content: center;
+ align-items: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
+ cursor: default;
+ background: var(--cometchat-icon-color-highlight);
+ -webkit-mask: url('./assets/chats.svg') no-repeat center;
+ mask: url('./assets/chats.svg') no-repeat center;
}
-/* Styles for the active tab text */
.cometchat-selector__tab-text-active {
- text-align: center;
- font: var(--cometchat-font-caption1-medium, 500 12px Roboto);
- cursor: default;
- color: var(--cometchat-text-color-highlight);
+ text-align: center;
+ font: var(--cometchat-font-caption1-medium, 500 12px Roboto);
+ cursor: default;
+ color: var(--cometchat-text-color-highlight);
}
```
-
-### **Step 2: Update App**
+Key points about the sidebar:
+- `CometChatUIKitLoginListener.getLoggedInUser()` checks for an active session — the component only renders if a user is logged in.
+- `activeConversation` highlights the currently selected conversation in the list.
+- `onItemClick` fires when a user taps a conversation, passing the `Conversation` object to the parent.
+
+---
+
+## Step 2 — Update App.tsx and App.css
-Now we will update the `App.tsx` & `App.css` files to import these new components as below,
+Wire the sidebar and message components together in your main app file.
-```tsx App.tsx
+```tsx title="App.tsx" lines
import { useState } from "react";
import {
CometChatMessageComposer,
@@ -253,102 +241,100 @@ import {
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatSelector } from "./CometChatSelector/CometChatSelector";
import "./App.css";
-import '@cometchat/chat-uikit-react/css-variables.css';
+import "@cometchat/chat-uikit-react/css-variables.css";
function App() {
- // State to track the currently selected user
- const [selectedUser, setSelectedUser] = useState(undefined);
-
- // State to track the currently selected group
- const [selectedGroup, setSelectedGroup] = useState(undefined);
+ const [selectedUser, setSelectedUser] = useState<
+ CometChat.User | undefined
+ >(undefined);
+ const [selectedGroup, setSelectedGroup] = useState<
+ CometChat.Group | undefined
+ >(undefined);
return (
-
-```css App.css
-/* Root container settings */
+```css title="App.css" lines
+@import url("@cometchat/chat-uikit-react/css-variables.css");
+
#root {
text-align: center;
- width: 100vw; /* Full viewport width */
- height: 100vh; /* Full viewport height */
- background-color: #282c34; /* Dark background */
+ width: 100vw;
+ height: 100vh;
+ background-color: #282c34;
}
-/* Layout container for conversations and messages */
+/* Two-panel layout */
.conversations-with-messages {
display: flex;
height: 100%;
width: 100%;
- flex-direction: row; /* Horizontal layout */
+ flex-direction: row;
}
-/* Sidebar container for the conversation list */
+/* Left panel — conversation list */
.conversations-wrapper {
height: 100vh;
- width: 480px; /* Fixed width for the sidebar */
+ width: 480px;
overflow: hidden;
display: flex;
flex-direction: column;
}
-/* Prevent scrolling inside the conversation list */
.conversations-wrapper > .cometchat {
overflow: hidden;
}
-/* Main chat messages container */
+/* Right panel — messages */
.messages-wrapper {
width: 100%;
height: 100%;
@@ -356,40 +342,65 @@ export default App;
flex-direction: column;
}
-/* Styles for the placeholder when no conversation is selected */
+/* Empty state */
.empty-conversation {
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
- background: var(--cometchat-background-color-03, #F5F5F5); /* Light gray background */
- color: var(--cometchat-text-color-secondary, #727272); /* Secondary text color */
+ background: var(--cometchat-background-color-03, #F5F5F5);
+ color: var(--cometchat-text-color-secondary, #727272);
font: var(--cometchat-font-body-regular, 400 14px Roboto);
}
-/* Remove border-radius for the message composer input */
.cometchat .cometchat-message-composer {
border-radius: 0px;
}
```
-
-### **Step 3: Run the project**
+How it works:
+- When a conversation is tapped, `onSelectorItemClicked` extracts the `User` or `Group` from the `Conversation` object.
+- `selectedUser` / `selectedGroup` state drives which chat is displayed — pass either `user` or `group` to the message components, never both.
+- The empty state shows until a conversation is selected.
-```powershell
-npm start
-```
+---
-***
+## Step 3 — Run the Project
-## **Next Steps**
+
+
+```bash lines
+npm run dev
+```
+
+
+```bash lines
+npm start
+```
+
+
-### **Enhance the User Experience**
+You should see the conversation list on the left. Tap any conversation to load messages on the right.
-* **[Advanced Customizations](/ui-kit/react/theme)** – Personalize the chat UI to align with your brand.
+---
-***
+## Next Steps
+
+
+
+ Customize colors, fonts, and styles to match your brand
+
+
+ Browse all prebuilt UI components
+
+
+ Back to the main setup guide
+
+
+ Chat features included out of the box
+
+
diff --git a/ui-kit/react/react-js-integration.mdx b/ui-kit/react/react-js-integration.mdx
index 55d433935..91da28f67 100644
--- a/ui-kit/react/react-js-integration.mdx
+++ b/ui-kit/react/react-js-integration.mdx
@@ -1,178 +1,110 @@
---
-title: "Getting Started With CometChat React UI Kit"
+title: "React.js Integration"
sidebarTitle: "Integration"
+description: "Add CometChat to a React.js app in 5 steps: create project, install, init, login, render."
---
-The **CometChat UI Kit for React** streamlines the integration of in-app chat functionality by providing a **comprehensive set of prebuilt UI components**. It offers seamless **theming options**, including **light and dark modes**, customizable fonts, colors, and extensive styling capabilities.
+
-With built-in support for **one-to-one and group conversations**, developers can efficiently enable chat features within their applications. Follow this guide to **quickly integrate chat functionality** using the CometChat React UI Kit.
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-react` |
+| Peer deps | `react` >=18, `react-dom` >=18, `rxjs` ^7.8.1 |
+| Init | `CometChatUIKit.init(UIKitSettings)` — must resolve before `login()` |
+| Login | `CometChatUIKit.login("UID")` — must resolve before rendering components |
+| Order | `init()` → `login()` → render. Breaking this order = blank screen |
+| Auth Key | Dev/testing only. Use Auth Token in production |
+| CSS | `@import url("@cometchat/chat-uikit-react/css-variables.css");` in global CSS |
+| Calling | Optional. Install `@cometchat/calls-sdk-javascript` to enable |
+| Other frameworks | [Next.js](/ui-kit/react/next-js-integration) · [React Router](/ui-kit/react/react-router-integration) · [Astro](/ui-kit/react/astro-integration) |
-{/*
-
- */}
+
+
+This guide walks you through adding CometChat to a React.js app. By the end you'll have a working chat UI.
-***
-
-## **Prerequisites**
-
-Before installing the **CometChat UI Kit for React**, you must first **create a CometChat application** via the **[CometChat Dashboard](https://app.cometchat.com/)**. The dashboard provides all the essential chat service components, including:
-
-* **User Management**
-* **Group Chat & Messaging**
-* **Voice & Video Calling**
-* **Real-time Notifications**
-
-> To initialize the **UI Kit**, you will need the following credentials from your **CometChat application**:
->
-> 1. **App ID**
-> 2. **Auth Key**
-> 3. **Region**
->
-> Ensure you have these details ready before proceeding with the installation and configuration.
-
-***
-
-## **Register & Set Up CometChat**
-
-Follow these steps to **register on CometChat** and **set up your development environment**.
-
-### **Step 1: Register on CometChat**
-
-To use **CometChat UI Kit**, you first need to register on the **CometChat Dashboard**.
-
-🔗 **[Click here to Sign Up](https://app.cometchat.com/login)**
-
-### **Step 2: Get Your Application Keys**
-
-After registering, create a **new app** and retrieve your **authentication details**:
-
-1. Navigate to **Application**, then select the **Credentials** section.
-
-2. Note down the following keys:
-
- * **App ID**
- * **Auth Key**
- * **Region**
-
-
-
-Each CometChat application can be integrated with a **single client app**. Users within the same application can communicate across multiple platforms, including **web and mobile**.
-
-
-
-### **Step 3: Set Up Your Development Environment**
-
-Ensure your system meets the following **prerequisites** before proceeding with integration.
-
-**System Requirements:**
-
-* **Node.js** installed on your machine.
-* A code editor like **[Visual Studio Code](https://code.visualstudio.com/)** or **[Cursor](https://www.cursor.com/)**.
-* **npm** or **Yarn** package manager installed.
-
-***
+---
-## **Built With**
+## Prerequisites
-The CometChat UI Kit for React relies on the following technologies:
+You need three things from the [CometChat Dashboard](https://app.cometchat.com/):
-| Technology | Description |
-| ---------------------------------------------------- | ------------------------------------- |
-| [Node.js](https://nodejs.org/) | JavaScript runtime environment |
-| [npm](https://www.npmjs.com/get-npm) | Node Package Manager |
-| [React](https://www.npmjs.com/package/react) | JavaScript library for UI development |
-| [React DOM](https://www.npmjs.com/package/react-dom) | React package for rendering UI |
+| Credential | Where to find it |
+| --- | --- |
+| App ID | Dashboard → Your App → Credentials |
+| Auth Key | Dashboard → Your App → Credentials |
+| Region | Dashboard → Your App → Credentials (e.g. `us`, `eu`, `in`) |
-***
+You also need Node.js (v16+) and npm/yarn installed.
-## **Getting Started**
+
+Auth Key is for development only. In production, generate Auth Tokens server-side via the [REST API](https://api-explorer.cometchat.com/) and use [`loginWithAuthToken()`](/ui-kit/react/methods#login-using-auth-token). Never ship Auth Keys in client code.
+
-### **Step 1: Create a React Project**
+---
-1. **Open your code editor** (e.g., **VS Code**, **Cursor**).
-2. **Initialize a new React project** using one of the following methods:
+## Step 1 — Create a React Project
-
-**Using Vite (Recommended)**
-
-```
-npm create vite@latest my-app --template react-ts
+
+```bash lines
+npm create vite@latest my-app -- --template react-ts
cd my-app
```
-
-
-
-**Using Create React App**
-
-```
+
+```bash lines
npx create-react-app my-app --template typescript
cd my-app
```
-
-
-3. **Open the project directory in your code editor**.
-4. **Start developing your React components inside the src directory**.
-5. **Install additional dependencies as needed**.
-
-***
-
-### **Step 2: Install Dependencies**
-
-The **CometChat UI Kit for React** is an **extension** of the **CometChat JavaScript SDK**.\
-Installing it will **automatically** include the core **Chat SDK**, enabling **seamless integration**.
+---
-* To install the **CometChat UI Kit**
+## Step 2 — Install the UI Kit
-```
+```bash lines
npm install @cometchat/chat-uikit-react
```
-
-
-```
+```bash lines
yarn add @cometchat/chat-uikit-react
```
-
-
-***
+This installs the UI Kit and its dependency `@cometchat/chat-sdk-javascript` automatically.
-### **Step 3: Initialize CometChat UI Kit**
+If you want voice/video calling, also install:
-Before using any features of the **CometChat UI Kit** or **CometChat SDK**, you must **initialize** the required settings. This is done using the [`Init`](/ui-kit/react/methods#init) method.
-
-* Initialization Process
-
-Call the `Init` method at the **beginning of your application** to ensure all CometChat functionalities are properly configured.
-
-***
+```bash lines
+npm install @cometchat/calls-sdk-javascript
+```
-
-**Auth Key Usage**
+---
-The **Auth Key** is an **optional property** of the `UIKitSettings` class. It is primarily recommended for **proof-of-concept (POC) development** or **early-stage application development**.
+## Step 3 — Initialize CometChat
-For secure authentication, use the [`Auth Token`](/ui-kit/react/methods#login-using-auth-token) method instead.
+Create a constants file and initialize the UI Kit before anything else.
-
+```ts title="src/AppConstants.ts" lines
+export const COMETCHAT_CONSTANTS = {
+ APP_ID: "APP_ID", // Replace with your App ID
+ REGION: "REGION", // Replace with your Region
+ AUTH_KEY: "AUTH_KEY", // Replace with your Auth Key (dev only)
+};
+```
-```ts
+```ts lines highlight={7-9}
import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";
/**
@@ -184,35 +116,24 @@ const COMETCHAT_CONSTANTS = {
AUTH_KEY: "AUTH_KEY", // Replace with your Auth Key (leave blank if using Auth Token)
};
-/**
- * Configure the CometChat UI Kit using the UIKitSettingsBuilder.
- * This setup determines how the chat UI behaves.
- */
const UIKitSettings = new UIKitSettingsBuilder()
- .setAppId(COMETCHAT_CONSTANTS.APP_ID) // Assign the App ID
- .setRegion(COMETCHAT_CONSTANTS.REGION) // Assign the App's Region
- .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY) // Assign the Authentication Key (if applicable)
- .subscribePresenceForAllUsers() // Enable real-time presence updates for all users
- .build(); // Build the final configuration
+ .setAppId(COMETCHAT_CONSTANTS.APP_ID)
+ .setRegion(COMETCHAT_CONSTANTS.REGION)
+ .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
+ .subscribePresenceForAllUsers()
+ .build();
-/**
- * Initialize the CometChat UI Kit with the configured settings.
- * Once initialized successfully, you can proceed with user authentication and chat features.
- */
-CometChatUIKit.init(UIKitSettings)!
+CometChatUIKit.init(UIKitSettings)
.then(() => {
console.log("CometChat UI Kit initialized successfully.");
- // You can now call login function to authenticate users
})
.catch((error) => {
- console.error("CometChat UI Kit initialization failed:", error); // Log errors if initialization fails
+ console.error("CometChat UI Kit initialization failed:", error);
});
```
-
-
-```js
+```js lines highlight={7-9}
import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";
/**
@@ -224,92 +145,49 @@ const COMETCHAT_CONSTANTS = {
AUTH_KEY: "AUTH_KEY", // Replace with your Auth Key (leave blank if using Auth Token)
};
-/**
- * Configure the CometChat UI Kit using the UIKitSettingsBuilder.
- * This setup determines how the chat UI behaves.
- */
const UIKitSettings = new UIKitSettingsBuilder()
- .setAppId(COMETCHAT_CONSTANTS.APP_ID) // Assign the App ID
- .setRegion(COMETCHAT_CONSTANTS.REGION) // Assign the App's Region
- .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY) // Assign the Authentication Key (if applicable)
- .subscribePresenceForAllUsers() // Enable real-time presence updates for all users
- .build(); // Build the final configuration
+ .setAppId(COMETCHAT_CONSTANTS.APP_ID)
+ .setRegion(COMETCHAT_CONSTANTS.REGION)
+ .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
+ .subscribePresenceForAllUsers()
+ .build();
-/**
- * Initialize the CometChat UI Kit with the configured settings.
- * Once initialized successfully, you can proceed with user authentication and chat features.
- */
CometChatUIKit.init(UIKitSettings)
.then(() => {
console.log("CometChat UI Kit initialized successfully.");
- // You can now call login function to authenticate users
})
.catch((error) => {
- console.error("CometChat UI Kit initialization failed:", error); // Log errors if initialization fails
+ console.error("CometChat UI Kit initialization failed:", error);
});
```
-
-
-
-
-Ensure you replace the following placeholders with your actual CometChat credentials:
-
-* APP\_ID → Your CometChat App ID
-* AUTH\_KEY → Your CometChat Auth Key
-* REGION → Your App Region
-
-These values are required for proper authentication and seamless integration.
-
-
+
+`init()` must resolve before you call `login()`. If you call `login()` before init completes, it will fail silently.
+
-
-You can choose between different storage methods to store data. By default, we use local storage. To learn more about available storage options and how to configure them, [click here](/ui-kit/react/methods#setting-session-storage-mode).
-
+By default, session data is stored in `localStorage`. To use `sessionStorage` instead, see [Setting Session Storage Mode](/ui-kit/react/methods#setting-session-storage-mode).
-***
-
-### **Step 4: User Login**
-
-To authenticate a user, you need a **`UID`**. You can either:
-
-1. **Create new users** on the **[CometChat Dashboard](https://app.cometchat.com)**, **[CometChat SDK Method](/ui-kit/react/methods#create-user)** or **[via the API](https://api-explorer.cometchat.com/reference/creates-user)**.
-
-2. **Use pre-generated test users**:
-
- * `cometchat-uid-1`
- * `cometchat-uid-2`
- * `cometchat-uid-3`
- * `cometchat-uid-4`
- * `cometchat-uid-5`
-
-The **Login** method returns a **User object** containing all relevant details of the logged-in user.
-
-***
-
-
+---
-**Security Best Practices**
+## Step 4 — Login
-* The **Auth Key** method is recommended for **proof-of-concept (POC) development** and early-stage testing.
-* For **production environments**, it is strongly advised to use an **[Auth Token](/ui-kit/react/methods#login-using-auth-token)** instead of an **Auth Key** to enhance security and prevent unauthorized access.
+After init resolves, log the user in. For development, use one of the pre-created test UIDs:
-
+`cometchat-uid-1` · `cometchat-uid-2` · `cometchat-uid-3` · `cometchat-uid-4` · `cometchat-uid-5`
-```ts
+```ts lines highlight={3}
import { CometChatUIKit } from "@cometchat/chat-uikit-react";
const UID = "UID"; // Replace with your actual UID
CometChatUIKit.getLoggedinUser().then((user: CometChat.User | null) => {
if (!user) {
- // If no user is logged in, proceed with login
CometChatUIKit.login(UID)
.then((user: CometChat.User) => {
console.log("Login Successful:", { user });
@@ -317,22 +195,19 @@ CometChatUIKit.getLoggedinUser().then((user: CometChat.User | null) => {
})
.catch(console.log);
} else {
- // If user is already logged in, mount your app
+ // Already logged in — mount your app
}
});
```
-
-
-```js
+```js lines highlight={3}
import { CometChatUIKit } from "@cometchat/chat-uikit-react";
const UID = "UID"; // Replace with your actual UID
CometChatUIKit.getLoggedinUser().then((user) => {
if (!user) {
- // If no user is logged in, proceed with login
CometChatUIKit.login(UID)
.then((user) => {
console.log("Login Successful:", { user });
@@ -340,164 +215,152 @@ CometChatUIKit.getLoggedinUser().then((user) => {
})
.catch(console.log);
} else {
- // If user is already logged in, mount your app
+ // Already logged in — mount your app
}
});
```
-
-
-***
+Key points:
+- `getLoggedinUser()` checks for an existing session so you don't re-login unnecessarily.
+- `login(uid)` skips the API call if a session already exists and returns the cached user.
+- Components must not render until login resolves — use a state flag to gate rendering.
-### **Step 5: Choose a Chat Experience**
+
+For production, use [`loginWithAuthToken()`](/ui-kit/react/methods#login-using-auth-token) instead of Auth Key. Generate tokens server-side via the REST API.
+
+
+---
-Integrate a conversation view that suits your application's **UX requirements**. Below are the available options:
+## Step 5 — Add the CSS Import
-***
+Add this line at the top of your global CSS file (e.g. `src/App.css` or `src/index.css`):
-#### **1️⃣ Conversation List + Message View**
+```css title="src/App.css" lines
+@import url("@cometchat/chat-uikit-react/css-variables.css");
+```
+
+Without this import, components will render with broken or missing styles.
+
+---
-**Best for:** Applications that need a **two-panel layout**, such as web-based chat interfaces (e.g., WhatsApp Web, Slack).
+## Step 6 — Choose a Chat Experience
-**Features:**
+Integrate a conversation view that suits your app's UX. Each option below includes a live CodeSandbox demo and a step-by-step guide.
-* **Two-panel layout** – Displays the conversation list on the left and the active chat window on the right.
-* **One-to-one & group conversations** – Seamless switching between private and group chats.
-* **Multiple conversations** – Effortlessly switch between different chat windows.
-* **Easy navigation** – Intuitive UI for finding and accessing chats quickly.
-* **Tap-to-view on mobile** – In mobile layouts, tapping a conversation opens the **Message View**, optimizing space.
-* **Real-time updates** – Auto-refreshes messages and conversation lists.
-* **Message sync** – Ensures messages stay updated across all sessions and devices.
+### Conversation List + Message View
+
+Two-panel layout — conversation list on the left, messages on the right. Think WhatsApp Web or Slack.
+
+- Two-panel layout with conversation list and active chat window
+- Switch between one-to-one and group conversations
+- Tap-to-view on mobile — tapping a conversation opens the message view
+- Real-time updates and message sync across sessions
-**Recommended for:**
-
-* Desktop-first applications
-* Apps requiring a **rich user experience** with seamless navigation
-* Platforms supporting both **individual and group messaging**
-* **Mobile-friendly** apps needing a **tap-to-open message view**
-
[](https://link.cometchat.com/react-conversation-list-message)
-> **Tip:** You can **fork** the sandbox, insert your **CometChat credentials** (App ID, Region, Auth Key.) in the code, and immediately preview how the UI and messages respond in real time.
+> **Tip:** Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time.
-[Integrate Conversation List + Message](./react-conversation)
+
+ Step-by-step guide to build this layout
+
-***
-
-#### **2️⃣ One-to-One/Group Chat**
+---
-**Best for:** Apps that require a **focused, direct messaging experience** without a sidebar.
+### One-to-One / Group Chat
-**Features:**
+Single chat window — no sidebar. Good for support chat, embedded widgets, or focused messaging.
-* **Dedicated chat window** – Ideal for one-on-one or group messaging.
-* **No conversation list** – Users directly enter the chat without navigating through a list.
-* **Supports both One-to-One and Group Chats** – Easily configurable with minor code modifications.
-* **Optimized for mobile** – Full-screen chat experience without distractions.
-* **Seamless real-time communication** – Auto-updates messages for a smooth experience.
-* **Ideal for support chat or community-based messaging.**
+- Dedicated chat window for one-on-one or group messaging
+- No conversation list — users go directly into the chat
+- Full-screen experience optimized for mobile
+- Ideal for support chat or community messaging
-**Recommended for:**
-
-* **Support chat applications** – Direct user-agent communication.
-* **Apps focusing on direct messaging** – No distractions from other conversations.
-* **Community or group chat applications** – A structured way to interact in groups.
-* **Mobile-first applications** – Designed for compact and dedicated messaging experiences.
-
[](https://link.cometchat.com/react-one-on-one)
-> **Tip:** You can **fork** the sandbox, insert your **CometChat credentials** (App ID, Region, Auth Key.) in the code, and immediately preview how the UI and messages respond in real time.
-
-[Integrate One-to-One/Group Chat](./react-one-to-one-chat)
+> **Tip:** Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time.
-***
+
+ Step-by-step guide to build this layout
+
-#### **3️⃣ Tab-Based Chat Experience**
+---
-**Best for:** Apps that need a **structured, multi-feature navigation system** for seamless interaction between **chats, calls, users, and settings**.
+### Tab-Based Chat
-**Features:**
+Tabbed navigation — Chat, Call Logs, Users, Settings in separate tabs. Good for full-featured apps.
-* **Tab Navigation** – Easily switch between **Chat, Call Logs, Users, and Settings**.
-* **Dedicated Chat Window** – Full-screen messaging experience for focused communication.
-* **No Sidebar** – Unlike multi-panel UI, this design prioritizes individual interactions.
-* **Unified Experience** – Users can seamlessly manage conversations, call history, and settings from a single interface.
-* **Scalable for future features** – Easily extend to include more functionalities such as notifications or contact management.
-* **Optimized for both desktop and mobile** – Ensures a smooth experience across different screen sizes.
+- Tab navigation between Chat, Call Logs, Users, and Settings
+- Full-screen messaging within each tab
+- Unified experience for conversations, call history, and settings
+- Scales well for adding future features like notifications or contacts
-**Recommended for:**
-
-* **Apps requiring structured navigation** – Clearly separate chat, calls, and settings.
-* **Multi-feature chat apps** – Supporting different functionalities in an organized way.
-* **Mobile-first applications** – Ideal for apps needing tab-based UI for easy access to features.
-* **Support & enterprise chat solutions** – Perfect for help desks, business chat platforms, and customer support apps.
-
[](https://link.cometchat.com/react-tabs-sidebar-message)
-> **Tip:** You can **fork** the sandbox, insert your **CometChat credentials** (App ID, Region, Auth Key.) in the code, and immediately preview how the UI and messages respond in real time.
-
-[Integrate Tab-Based Chat](./react-tab-based-chat)
-
-***
+> **Tip:** Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time.
-## **Build Your Own Chat Experience**
+
+ Step-by-step guide to build this layout
+
-**Best for:** Developers who need complete control over their chat interface, allowing customization of components, themes, and features to align with their app’s design and functionality. Whether you're enhancing an existing chat experience or building from scratch, this approach provides the flexibility to tailor every aspect to your needs.
-
-**Recommended for:**
+---
-* Apps that require **a fully customized chat experience**.
-* Developers who want to **extend functionalities and modify UI components**.
-* Businesses integrating chat seamlessly into **existing platforms**.
+## Build Your Own Chat Experience
-**Key Areas to Explore:**
+Need full control over the UI? Use individual components, customize themes, and wire up your own layouts.
-* **[React Sample App](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app)** – Fully functional sample applications to accelerate your development.
-* **[Core Features](./core-features)** – Learn about messaging, real-time updates, and other essential capabilities.
-* **[Components](./components-overview)** – Utilize prebuilt UI elements or customize them to fit your design.
-* **[Themes](./theme)** – Adjust colors, fonts, and styles to match your branding.
-* **[Build Your Own UI](./../../../sdk/javascript/overview)** – Prefer a custom UI over our UI Kits? Explore our SDKs to create a tailored chat experience.
+- [Sample App](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) — Working reference app to compare against
+- [Components](/ui-kit/react/components-overview) — All prebuilt UI elements with props and customization options
+- [Core Features](/ui-kit/react/core-features) — Messaging, real-time updates, and other capabilities
+- [Theming](/ui-kit/react/theme) — Colors, fonts, dark mode, and custom styling
+- [Build Your Own UI](/sdk/javascript/overview) — Skip the UI Kit entirely and build on the raw SDK
-***
+---
-## iFrame Support
+## iFrame Embedding
-If you’re embedding your React app inside an `
- {/* Sidebar with conversation list */}
) : undefined;
@@ -534,169 +491,118 @@ export default CometChatNoSSR;
```
- {
let item = activeItem;
- // Extract the conversation participant
if (activeItem instanceof CometChat.Conversation) {
item = activeItem.getConversationWith();
- }
- // Update states based on the type of selected item
+ }
if (item instanceof CometChat.User) {
setSelectedUser(item as CometChat.User);
setSelectedGroup(undefined);
@@ -512,11 +470,10 @@ const CometChatNoSSR: React.FC = () => {
setSelectedUser(undefined);
setSelectedGroup(undefined);
}
- }}
+ }}
/>
-
- {/* Message view section */}
+
{selectedUser || selectedGroup ? (
Select Conversation to start
+ Select a conversation to start chatting
)}
-The `Outgoing Call` is comprised of the following components:
+
-
- );
+```css lines
+.cometchat-outgoing-call {
+ /* overrides here */
}
```
-
-
-
+
+ {call.getCallInitiator().getName()} {" <> "} {call.getCallReceiver().getName()}
+
);
- CometChat.initiateCall(callObject)
- .then((c) => {
- setCall(c);
- })
- .catch(console.log);
- }, []);
+ };
- return call ?
+
- return call &&
+
+ {"Calling..."}
+
+ );
};
-export default OutgoingCallDemo;
+
+
+
+ );
};
-export default OutgoingCallDemo;
+
+
+
+
);
};
-export default OutgoingCallDemo;
+
+
+ {"End Call"}
+
+
-
-
-Use the following code to achieve the customization shown above.
-
-
- {call.getCallInitiator().getName()} {" <> "} {call.getCallReceiver().getName()}
-
- );
- };
-
- return (
- call &&
- {call.getCallInitiator().getName()} {" <> "} {call.getCallReceiver().getName()}
-
- );
- };
-
- return (
- call &&
-
-
-Use the following code to achieve the customization shown above.
-
-
-
- {"Calling..."}
-
- );
- };
-
- return (
- call &&
-
- {"Calling..."}
-
- );
- };
-
- return (
- call &&
-
-
-Use the following code to achieve the customization shown above.
-
-
-
- );
- };
-
- return (
- call &&
-
- );
- };
-
- return (
- call &&
+
-Use the following code to achieve the customization shown above.
-
-
-
- );
- };
-
- return (
- call &&
-
- {"End Call"}
-
-
-
- );
- };
-
- return (
- call &&
-
- {"End Call"}
-
-
-***
-
-## **Try Live Demo**
+---
-**Experience the CometChat UI Kit in action:**
+## Try It
](https://link.cometchat.com/cometchat-demo)
-
-[](https://link.cometchat.com/react-conversation-list-message) */}
-
-
-> **Tip:** You can **fork** the sandbox, insert your **CometChat credentials** (App ID, Region, Auth Key) in the code, and immediately preview how the UI and messages respond in real time.
-
-***
-
-## **Integration**
-
-{/* ### **Option 1: UI Kit Builder (Pre-Assembled UI)**
-
-A ready-to-use chat interface—configured via a UI Kit Builder—built on top of our UI Kits.
+## Get Started
-
+
-**How It Works**
-
-* Toggle features like @mentions, reactions, media uploads, and more in a visual interface.
-* Drag-and-drop or point-and-click to enable or disable components.
-* Customize layouts and styles—no deep coding required.
-
-**Why It’s Great**
-
-* **Fastest Setup** – Minimal component wiring.
-* **Continuous Customization** – Only turn on the features you want.
-* **Fewer Moving Parts** – Reliable, pre-assembled UI that’s easy to maintain.
-
-](https://link.cometchat.com/react-conversation-list-message)
-
-> **Tip:** You can **fork** the sandbox, insert your **CometChat credentials** (App ID, Region, Auth Key.) in the code, and immediately preview how the UI and messages respond in real time.
+
-This layout is structured into three key sections:
+[](https://link.cometchat.com/react-conversation-list-message)
-1. **Sidebar (Conversation List)** – Displays active conversations, including users and groups.
-2. **Message View** – Shows chat messages for the selected conversation in real-time.
-3. **Message Composer** – Provides an input field for typing and sending messages, along with support for media, emojis, and reactions.
+> Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time.
-***
+---
-## **Step-by-Step Guide**
+## What You're Building
-### **Step 1: Create Sidebar**
+Three sections working together:
-Let's create the `Sidebar` component which will render different conversations.
+1. **Sidebar (conversation list)** — shows all active conversations (users and groups)
+2. **Message view** — displays chat messages for the selected conversation in real time
+3. **Message composer** — text input with support for media, emojis, and reactions
-#### **Folder Structure**
+---
-Create a `CometChatSelector` folder inside your `src` directory and add the following files:
+## Step 1 — Create the Sidebar Component
-```
-src/
-│── CometChatSelector/
-│ ├── CometChatSelector.tsx
-│ ├── CometChatSelector.css
-```
+Create a `CometChatSelector` folder inside `src/`:
+
+
- {/* Sidebar for selecting conversations */}
+ {/* Sidebar — conversation list */}
{
let item = activeItem;
- // If the selected item is a conversation, extract the user/group from it
+ // Extract user/group from Conversation object
if (activeItem instanceof CometChat.Conversation) {
item = activeItem.getConversationWith();
}
- // Determine if the selected item is a User or a Group and update the state accordingly
if (item instanceof CometChat.User) {
setSelectedUser(item as CometChat.User);
- setSelectedGroup(undefined); // Ensure no group is selected
+ setSelectedGroup(undefined);
} else if (item instanceof CometChat.Group) {
- setSelectedUser(undefined); // Ensure no user is selected
+ setSelectedUser(undefined);
setSelectedGroup(item as CometChat.Group);
} else {
setSelectedUser(undefined);
- setSelectedGroup(undefined); // Reset if selection is invalid
+ setSelectedGroup(undefined);
}
}}
/>
- {/* If a user or group is selected, display the chat interface */}
+ {/* Message view — header + messages + composer */}
{selectedUser || selectedGroup ? (
);
-};
+}
export default App;
```
- {/* Header displaying user/group details */}
) : (
- // Default message when no conversation is selected
- Select Conversation to start
+
+ Select a conversation to start chatting
+
)}
- */}
+
-**Recommended for:**
-
-* Desktop-first applications
-* Apps requiring a **rich user experience** with seamless navigation
-* Platforms supporting both **individual and group messaging**
-* **Mobile-friendly** apps needing a **tap-to-open message view**
-
[](https://link.cometchat.com/react-conversation-list-message)
-> **Tip:** You can **fork** the sandbox, insert your **CometChat credentials** (App ID, Region, Auth Key.) in the code, and immediately preview how the UI and messages respond in real time.
+> **Tip:** Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time.
-[Integrate Conversation List + Message](./react-conversation)
+
-**Recommended for:**
-
-* **Support chat applications** – Direct user-agent communication.
-* **Apps focusing on direct messaging** – No distractions from other conversations.
-* **Community or group chat applications** – A structured way to interact in groups.
-* **Mobile-first applications** – Designed for compact and dedicated messaging experiences.
-
[](https://link.cometchat.com/react-one-on-one)
-> **Tip:** You can **fork** the sandbox, insert your **CometChat credentials** (App ID, Region, Auth Key.) in the code, and immediately preview how the UI and messages respond in real time.
-
-[Integrate One-to-One/Group Chat](./react-one-to-one-chat)
+> **Tip:** Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time.
-***
+
-**Recommended for:**
-
-* **Apps requiring structured navigation** – Clearly separate chat, calls, and settings.
-* **Multi-feature chat apps** – Supporting different functionalities in an organized way.
-* **Mobile-first applications** – Ideal for apps needing tab-based UI for easy access to features.
-* **Support & enterprise chat solutions** – Perfect for help desks, business chat platforms, and customer support apps.
-
[](https://link.cometchat.com/react-tabs-sidebar-message)
-> **Tip:** You can **fork** the sandbox, insert your **CometChat credentials** (App ID, Region, Auth Key.) in the code, and immediately preview how the UI and messages respond in real time.
-
-[Integrate Tab-Based Chat](./react-tab-based-chat)
-
-***
+> **Tip:** Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time.
-## **Build Your Own Chat Experience**
+