From 379ca3af720b490ba406fcaa6502e84983c6513c Mon Sep 17 00:00:00 2001 From: PrajwalDhuleCC Date: Wed, 11 Feb 2026 12:30:10 +0530 Subject: [PATCH 01/59] initial improvemnts of react uikit overview and components --- ui-kit/react/components-overview.mdx | 35 ++++++++ ui-kit/react/conversations.mdx | 124 +++++++++++++++++++++----- ui-kit/react/core-features.mdx | 38 ++++++++ ui-kit/react/groups.mdx | 62 +++++++++---- ui-kit/react/message-composer.mdx | 108 +++++++++++++++++++--- ui-kit/react/message-list.mdx | 77 +++++++++++++--- ui-kit/react/methods.mdx | 58 ++++++++++++ ui-kit/react/next-js-integration.mdx | 38 ++++++++ ui-kit/react/overview.mdx | 70 +++++++++++++++ ui-kit/react/react-js-integration.mdx | 33 +++++++ ui-kit/react/theme.mdx | 42 +++++++++ ui-kit/react/users.mdx | 64 +++++++++---- 12 files changed, 671 insertions(+), 78 deletions(-) diff --git a/ui-kit/react/components-overview.mdx b/ui-kit/react/components-overview.mdx index dfc456255..aa9e58e00 100644 --- a/ui-kit/react/components-overview.mdx +++ b/ui-kit/react/components-overview.mdx @@ -1,7 +1,22 @@ --- title: "Overview" +description: "Overview of CometChat UI Kit components, actions, events, and customization patterns." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +Key components: +- **Conversations** → [CometChatConversations](/ui-kit/react/conversations) +- **Message List** → [CometChatMessageList](/ui-kit/react/message-list) +- **Message Composer** → [CometChatMessageComposer](/ui-kit/react/message-composer) +- **Message Header** → [CometChatMessageHeader](/ui-kit/react/message-header) +- **Users** → [CometChatUsers](/ui-kit/react/users) +- **Groups** → [CometChatGroups](/ui-kit/react/groups) +- **Call Buttons** → [CometChatCallButtons](/ui-kit/react/call-buttons) + + 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 @@ -27,3 +42,23 @@ All components expose actions to the user, which means that users can interact w 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. + + +--- + +## Next Steps + + + + Display and manage conversation lists + + + Display messages in a conversation + + + Learn about messaging capabilities + + + Customize colors, fonts, and styling + + diff --git a/ui-kit/react/conversations.mdx b/ui-kit/react/conversations.mdx index a148e2bb6..2bd09c609 100644 --- a/ui-kit/react/conversations.mdx +++ b/ui-kit/react/conversations.mdx @@ -1,7 +1,28 @@ --- title: "Conversations" +description: "A component that displays all conversations for the logged-in user with real-time updates and customization options." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```tsx +import { CometChatConversations } from "@cometchat/chat-uikit-react"; + +// Minimal usage + + +// With common props + setActiveChat(conversation)} + hideReceipts={false} + selectionMode={SelectionMode.none} + showSearchBar={true} +/> +``` + + ## Overview The Conversations is a Component, that shows all conversations related to the currently logged-in user. @@ -12,12 +33,16 @@ This component lists the most recent or latest conversations or contacts with wh + +**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) | [REST API](/rest-api/chat-apis) + + ## Usage ### Integration - + ```tsx import { CometChatConversations, @@ -39,21 +64,6 @@ export default ConversationsDemo; - -```tsx -import { ConversationsDemo } from "./ConversationsDemo"; - -export default function App() { - return ( -
- -
- ); -} -``` - - - ### Actions @@ -65,9 +75,10 @@ export default function App() { `OnItemClick` is triggered when you click on a ListItem of the Conversations component. The `OnItemClick` action doesn't have a predefined behavior. You can override this action using the following code snippet. - + ```tsx import { CometChatConversations } from "@cometchat/chat-uikit-react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; const getOnItemClick = (conversation: CometChat.Conversation) => { console.log("ItemClick:", conversation); @@ -79,6 +90,20 @@ const getOnItemClick = (conversation: CometChat.Conversation) => { + +```jsx +import { CometChatConversations } from "@cometchat/chat-uikit-react"; + +const getOnItemClick = (conversation) => { + console.log("ItemClick:", conversation); + // Your custom action here +}; + +; +``` + + + *** @@ -88,12 +113,13 @@ const getOnItemClick = (conversation: CometChat.Conversation) => { The `OnSelect` event is triggered upon the completion of a selection in `SelectionMode`. It does not have a default behavior. However, you can override its behavior using the following code snippet. - + ```tsx import { CometChatConversations, SelectionMode, } from "@cometchat/chat-uikit-react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; const getOnSelect = ( conversation: CometChat.Conversation, @@ -111,6 +137,26 @@ const getOnSelect = ( + +```jsx +import { + CometChatConversations, + SelectionMode, +} from "@cometchat/chat-uikit-react"; + +const getOnSelect = (conversation, selected) => { + console.log("Selected, ", conversation.getConversationId(), selected); + // Your custom action on select +}; + +; +``` + + + *** @@ -120,9 +166,10 @@ const getOnSelect = ( This action doesn't change the behavior of the component but rather listens for any errors that occur in the Conversations component. - + ```tsx import { CometChatConversations } from "@cometchat/chat-uikit-react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; const handleOnError = (error: CometChat.CometChatException) => { // Your exception handling code @@ -133,6 +180,19 @@ const handleOnError = (error: CometChat.CometChatException) => { + +```jsx +import { CometChatConversations } from "@cometchat/chat-uikit-react"; + +const handleOnError = (error) => { + // Your exception handling code +}; + +; +``` + + + *** @@ -142,7 +202,7 @@ const handleOnError = (error: CometChat.CometChatException) => { The `onSearchBarClicked` event is triggered when the user clicks the search bar. It does not have a default behavior. However, you can override its behavior using the following code snippet. - + ```tsx import { CometChatConversations } from "@cometchat/chat-uikit-react"; @@ -173,7 +233,7 @@ You can set filters using the following parameters. 6. **GroupTags:** Filters on specific Group `Tag` - + ```tsx import { CometChatConversations } from "@cometchat/chat-uikit-react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; @@ -284,7 +344,7 @@ Using CSS you can customize the look and feel of the component in your app like These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements. - + ```tsx
@@ -1166,3 +1226,23 @@ const getOptions = (conversation: CometChat.Conversation) => { | **onClick** | Method to be invoked when user clicks on each option. | *** + + +--- + +## Next Steps + + + + Display messages for a selected conversation + + + Display and manage user lists + + + Display and manage group lists + + + Customize colors, fonts, and styling + + diff --git a/ui-kit/react/core-features.mdx b/ui-kit/react/core-features.mdx index 78a6de7de..f59723681 100644 --- a/ui-kit/react/core-features.mdx +++ b/ui-kit/react/core-features.mdx @@ -1,11 +1,29 @@ --- title: "Core" +description: "Overview of CometChat's core messaging features including instant messaging, media sharing, read receipts, and user presence." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +Key components for core features: +- **Conversations** → [CometChatConversations](/ui-kit/react/conversations) +- **Message List** → [CometChatMessageList](/ui-kit/react/message-list) +- **Message Composer** → [CometChatMessageComposer](/ui-kit/react/message-composer) +- **Message Header** → [CometChatMessageHeader](/ui-kit/react/message-header) +- **Users** → [CometChatUsers](/ui-kit/react/users) +- **Groups** → [CometChatGroups](/ui-kit/react/groups) + + ## Overview The UI Kit comprises a variety of components, each designed to work seamlessly with one another to deliver a comprehensive and intuitive chat experience. + +**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) | [REST API](https://api-explorer.cometchat.com) + + Here's how different UI Kit components work together to achieve CometChat's Core features: ## Instant Messaging @@ -198,3 +216,23 @@ CometChat facilitates Group Chats, allowing users to have conversations with mul 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 + + + + Explore all available UI components + + + Add voice and video calling capabilities + + + Integrate AI-powered chat features + + + Customize colors, fonts, and styling + + diff --git a/ui-kit/react/groups.mdx b/ui-kit/react/groups.mdx index 27bd1cd69..2229932b7 100644 --- a/ui-kit/react/groups.mdx +++ b/ui-kit/react/groups.mdx @@ -1,7 +1,28 @@ --- title: "Groups" +description: "A component that displays a searchable list of all available groups with member counts and group icons." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```tsx +import { CometChatGroups } from "@cometchat/chat-uikit-react"; + +// Minimal usage + + +// With common props + setSelectedGroup(group)} + hideGroupType={false} + selectionMode={SelectionMode.none} + showSearchBar={true} +/> +``` + + ## Overview The Groups is a Component, showcasing an accessible list of all available groups. It provides an integral search functionality, allowing you to locate any specific groups swiftly and easily. For each group listed, the group name is displayed by default, in conjunction with the group icon when available. Additionally, it provides a useful feature by displaying the number of members in each group as a subtitle, offering valuable context about group size and activity level. @@ -10,6 +31,10 @@ The Groups is a Component, showcasing an accessible list of all available groups + +**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) | [REST API](https://api-explorer.cometchat.com) + + The Groups component is composed of the following BaseComponents: | Components | Description | @@ -26,7 +51,7 @@ The Groups component is composed of the following BaseComponents: The following code snippet illustrates how you can directly incorporate the Groups component into your Application. - + ```tsx import { CometChatGroups } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -40,21 +65,6 @@ export default GroupsDemo; - -```tsx -import { GroupsDemo } from "./GroupsDemo"; - -export default function App() { - return ( -
- -
- ); -} -``` - - - *** @@ -1127,3 +1137,23 @@ export default GroupsDemo; + + +--- + +## Next Steps + + + + Display and manage group members + + + Display and manage user lists + + + Display conversation lists + + + Display messages for a group + + diff --git a/ui-kit/react/message-composer.mdx b/ui-kit/react/message-composer.mdx index 67249e000..c5883c20e 100644 --- a/ui-kit/react/message-composer.mdx +++ b/ui-kit/react/message-composer.mdx @@ -1,7 +1,31 @@ --- title: "Message Composer" +description: "A component that enables users to write and send text, media, and custom messages with attachments and editing support." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```tsx +import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; + +// For user chat + + +// For group chat + + +// With common props + handleSend(message)} +/> +``` + + ## Overview MessageComposer is a Component that enables users to write and send a variety of messages, including text, image, video, and custom messages. @@ -12,6 +36,10 @@ Features such as **Attachments**, and **Message Editing** are also supported by + +**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) + + ## Usage ### Integration @@ -19,7 +47,7 @@ Features such as **Attachments**, and **Message Editing** are also supported by The following code snippet illustrates how you can directly incorporate the MessageComposer component into your app. - + ```tsx import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; @@ -43,18 +71,25 @@ export function MessageComposerDemo() { - -```tsx -import { MessageComposerDemo } from "./MessageComposerDemo"; + +```jsx +import React from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; -export default function App() { - return ( -
-
- -
+export function MessageComposerDemo() { + const [chatUser, setChatUser] = React.useState(null); + React.useEffect(() => { + CometChat.getUser("uid").then((user) => { + setChatUser(user); + }); + }, []); + + return chatUser ? ( +
+
- ); + ) : null; } ``` @@ -71,7 +106,7 @@ export default function App() { The `OnSendButtonClick` event gets activated when the send message button is clicked. It has a predefined function of sending messages entered in the composer `EditText`. However, you can overide this action with the following code snippet. - + ```tsx import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; @@ -100,6 +135,35 @@ export function MessageComposerDemo() { + +```jsx +import React from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; + +export function MessageComposerDemo() { + const [chatUser, setChatUser] = React.useState(null); + + React.useEffect(() => { + CometChat.getUser("uid").then((user) => { + setChatUser(user); + }); + }, []); + + function handleSendButtonClick(message) { + console.log("your custom on send buttonclick action"); + } + + return chatUser ? ( +
+ +
+ ) : null; +} +``` + + + ##### 2. onError @@ -920,3 +984,23 @@ export function MessageComposerDemo() { *** + + +--- + +## Next Steps + + + + Display messages in a conversation + + + Customize message bubble appearance + + + Display conversation header with user/group info + + + Enable @mentions in messages + + diff --git a/ui-kit/react/message-list.mdx b/ui-kit/react/message-list.mdx index e2300b1d1..cd71c3fc5 100644 --- a/ui-kit/react/message-list.mdx +++ b/ui-kit/react/message-list.mdx @@ -1,7 +1,31 @@ --- title: "Message List" +description: "A component that displays messages in a conversation with real-time updates, reactions, threads, and customization options." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```tsx +import { CometChatMessageList } from "@cometchat/chat-uikit-react"; + +// For user chat + + +// For group chat + + +// With common props + openThread(message)} +/> +``` + + ## Overview `MessageList` is a composite component that displays a list of messages and effectively manages real-time operations. It includes various types of messages such as Text Messages, Media Messages, Stickers, and more. @@ -10,6 +34,10 @@ title: "Message List" + +**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) + + *** ## Usage @@ -19,7 +47,7 @@ title: "Message List" The following code snippet illustrates how you can directly incorporate the MessageList component into your Application. - + ```tsx import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; @@ -43,18 +71,25 @@ export function MessageListDemo() { - -```tsx -import { MessageListDemo } from "./MessageListDemo"; + +```jsx +import React from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatMessageList } from "@cometchat/chat-uikit-react"; -export default function App() { - return ( -
-
- -
+export function MessageListDemo() { + const [chatUser, setChatUser] = React.useState(null); + React.useEffect(() => { + CometChat.getUser("uid").then((user) => { + setChatUser(user); + }); + }, []); + + return chatUser ? ( +
+
- ); + ) : null; } ``` @@ -1583,3 +1618,23 @@ export function MessageListDemo() { *** + + +--- + +## Next Steps + + + + Add message input and sending capabilities + + + Display conversation header with user/group info + + + Customize message bubble appearance and behavior + + + Enable threaded message conversations + + diff --git a/ui-kit/react/methods.mdx b/ui-kit/react/methods.mdx index 0be19fef4..c783062e6 100644 --- a/ui-kit/react/methods.mdx +++ b/ui-kit/react/methods.mdx @@ -1,7 +1,37 @@ --- title: "Methods" +description: "Reference documentation for CometChatUIKit methods including init, login, logout, and message sending." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```javascript +import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; + +// Init +const UIKitSettings = new UIKitSettingsBuilder() + .setAppId("APP_ID") + .setRegion("REGION") + .setAuthKey("AUTH_KEY") + .build(); +CometChatUIKit.init(UIKitSettings); + +// Login +CometChatUIKit.login("UID"); + +// Login with Auth Token (production) +CometChatUIKit.loginWithAuthToken("AUTH_TOKEN"); + +// Logout +CometChatUIKit.logout(); + +// Get logged in user +CometChatUIKit.getLoggedinUser(); +``` + + ## Overview The UI Kit's core function is to extend the [Chat SDK](/sdk/javascript/overview), essentially translating the raw data and functionality provided by the underlying methods into visually appealing and easy-to-use UI components. @@ -10,6 +40,14 @@ To effectively manage and synchronize the UI elements and data across all compon The CometChat UI Kit has thoughtfully encapsulated the critical [Chat SDK](/sdk/javascript/overview) methods within its wrapper to efficiently manage internal eventing. This layer of abstraction simplifies interaction with the underlying CometChat SDK, making it more user-friendly for developers. + +You must call `CometChatUIKit.init(UIKitSettings)` before rendering any UI Kit components or calling any SDK methods. Initialization must complete before login. + + + +**Auth Key** is for development/testing only. In production, generate **Auth Tokens** on your server using the REST API and pass them to the client. Never expose Auth Keys in production client code. + + ## Methods You can access the methods using the `CometChatUIKit` class. This class provides access to all the public methods exposed by the CometChat UI Kit. @@ -578,3 +616,23 @@ CometChatUIKit.sendCustomMessage(customMessage) + + +--- + +## Next Steps + + + + Subscribe to real-time chat events + + + Explore all available UI components + + + Learn about messaging capabilities + + + Customize colors, fonts, and styling + + diff --git a/ui-kit/react/next-js-integration.mdx b/ui-kit/react/next-js-integration.mdx index 0d4c40aac..8d1a8d595 100644 --- a/ui-kit/react/next-js-integration.mdx +++ b/ui-kit/react/next-js-integration.mdx @@ -1,10 +1,48 @@ --- title: "Getting Started With CometChat React UI Kit For Next.js" sidebarTitle: "Integration" +description: "Step-by-step guide to integrate CometChat UI Kit into your Next.js application with SSR-compatible chat components." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```bash +# Install +npm install @cometchat/chat-uikit-react +``` + +```tsx +// Client-side only - use 'use client' directive or dynamic import +import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; + +// Initialize +const UIKitSettings = new UIKitSettingsBuilder() + .setAppId("APP_ID") + .setRegion("REGION") + .setAuthKey("AUTH_KEY") + .build(); + +CometChatUIKit.init(UIKitSettings); + +// Login +CometChatUIKit.login("UID"); + +// Render components (client-side only) +import { CometChatConversations, CometChatMessageList, CometChatMessageComposer } from "@cometchat/chat-uikit-react"; +``` + +- **Next.js Conversation** → [Conversation List + Message](/ui-kit/react/next-conversation) +- **All Components** → [Components Overview](/ui-kit/react/components-overview) + + The **CometChat UI Kit for React** streamlines the integration of in-app chat functionality by providing a **comprehensive set of prebuilt UI components**. It offers seamless **theming options**, including **light and dark modes**, customizable fonts, colors, and extensive styling capabilities. + +**Server-Side Rendering (SSR):** CometChat UI Kit requires browser APIs (`window`, `WebSocket`, `document`). For Next.js, ensure components render only on the client side using `'use client'` directive or dynamic imports with `ssr: false`. + + With built-in support for **one-to-one and group conversations**, developers can efficiently enable chat features within their applications. Follow this guide to **quickly integrate chat functionality** using the CometChat React UI Kit. {/* diff --git a/ui-kit/react/overview.mdx b/ui-kit/react/overview.mdx index 42b82d980..69478d80a 100644 --- a/ui-kit/react/overview.mdx +++ b/ui-kit/react/overview.mdx @@ -1,10 +1,61 @@ --- title: "CometChat UI Kit For React" sidebarTitle: "Overview" +description: "A powerful React UI Kit with prebuilt, customizable chat components for rapid integration of messaging and calling features." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```bash +# Install +npm install @cometchat/chat-uikit-react +``` + +```tsx +import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; + +// Initialize +const UIKitSettings = new UIKitSettingsBuilder() + .setAppId("APP_ID") + .setRegion("REGION") + .setAuthKey("AUTH_KEY") + .build(); + +CometChatUIKit.init(UIKitSettings); + +// Login +CometChatUIKit.login("UID"); + +// Key Components +import { CometChatConversations } from "@cometchat/chat-uikit-react"; + console.log(conversation)} /> + +import { CometChatMessageList, CometChatMessageComposer } from "@cometchat/chat-uikit-react"; + + +``` + +- **React.js** → [React.js Integration](/ui-kit/react/react-js-integration) +- **Next.js** → [Next.js Integration](/ui-kit/react/next-js-integration) +- **All Components** → [Components Overview](/ui-kit/react/components-overview) + + The **CometChat UI Kit** for React is a powerful solution designed to seamlessly integrate chat functionality into applications. It provides a robust set of **prebuilt UI components** that are **modular, customizable, and highly scalable**, allowing developers to accelerate their development process with minimal effort. + +You must call `CometChatUIKit.init(UIKitSettings)` before rendering any UI Kit components or calling any SDK methods. Initialization must complete before login. + + + +**Auth Key** is for development/testing only. In production, generate **Auth Tokens** on your server using the REST API and pass them to the client. Never expose Auth Keys in production client code. + + + +**Server-Side Rendering (SSR):** CometChat UI Kit requires browser APIs (`window`, `WebSocket`, `document`). For Next.js or other SSR frameworks, ensure components render only on the client side. See the [Next.js Integration](/ui-kit/react/next-js-integration) guide. + + *** ## **Why Choose CometChat UI Kit?** @@ -212,3 +263,22 @@ If you need assistance, check out: * [Developer Community](http://community.cometchat.com/) * [Support Portal](https://help.cometchat.com/hc/en-us/requests/new) + +--- + +## Next Steps + + + + Step-by-step guide to integrate CometChat in your React app + + + Explore all available UI components and their capabilities + + + Learn about messaging, conversations, and user management + + + Customize colors, fonts, and styling to match your brand + + diff --git a/ui-kit/react/react-js-integration.mdx b/ui-kit/react/react-js-integration.mdx index 55d433935..9585702c3 100644 --- a/ui-kit/react/react-js-integration.mdx +++ b/ui-kit/react/react-js-integration.mdx @@ -1,8 +1,41 @@ --- title: "Getting Started With CometChat React UI Kit" sidebarTitle: "Integration" +description: "Step-by-step guide to integrate CometChat UI Kit into your React.js application with prebuilt chat components." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```bash +# Install +npm install @cometchat/chat-uikit-react +``` + +```tsx +import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; + +// Initialize +const UIKitSettings = new UIKitSettingsBuilder() + .setAppId("APP_ID") + .setRegion("REGION") + .setAuthKey("AUTH_KEY") + .build(); + +CometChatUIKit.init(UIKitSettings); + +// Login +CometChatUIKit.login("UID"); + +// Render components +import { CometChatConversations, CometChatMessageList, CometChatMessageComposer } from "@cometchat/chat-uikit-react"; + setActiveChat(conversation)} /> + + +``` + + The **CometChat UI Kit for React** streamlines the integration of in-app chat functionality by providing a **comprehensive set of prebuilt UI components**. It offers seamless **theming options**, including **light and dark modes**, customizable fonts, colors, and extensive styling capabilities. With built-in support for **one-to-one and group conversations**, developers can efficiently enable chat features within their applications. Follow this guide to **quickly integrate chat functionality** using the CometChat React UI Kit. diff --git a/ui-kit/react/theme.mdx b/ui-kit/react/theme.mdx index 98f164289..72640caee 100644 --- a/ui-kit/react/theme.mdx +++ b/ui-kit/react/theme.mdx @@ -1,8 +1,30 @@ --- title: "Customizing UI With Theming" sidebarTitle: "Overview" +description: "Customize the look and feel of CometChat UI Kit using CSS variables for colors, fonts, and styling." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```css +/* Import base stylesheet */ +@import url("@cometchat/chat-uikit-react/css-variables.css"); + +/* Override CSS variables */ +:root { + --cometchat-font-family: "Inter", sans-serif; + --cometchat-primary-color: #6852D6; + --cometchat-background-color-01: #FFFFFF; + --cometchat-text-color-primary: #141414; +} +``` + +- **Color Resources** → [Color Variables](/ui-kit/react/theme/color-resources) +- **Message Bubble Styling** → [Bubble Customization](/ui-kit/react/theme/message-bubble-styling) + + Theming allows you to define the **look and feel** of your app by adjusting **colors, fonts, and other styles**. Using **CSS variables**, you can create a consistent and **on-brand** chat experience. *** @@ -224,3 +246,23 @@ Access the Figma UI Kit for a fully integrated color palette and seamless custom + + +--- + +## Next Steps + + + + Complete list of CSS color variables + + + Customize message bubble appearance + + + Customize text and date formats + + + Customize notification sounds + + diff --git a/ui-kit/react/users.mdx b/ui-kit/react/users.mdx index ff44ce47a..0a8493636 100644 --- a/ui-kit/react/users.mdx +++ b/ui-kit/react/users.mdx @@ -1,7 +1,28 @@ --- title: "Users" +description: "A component that displays a searchable list of all available users with online/offline status indicators." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```tsx +import { CometChatUsers } from "@cometchat/chat-uikit-react"; + +// Minimal usage + + +// With common props + setSelectedUser(user)} + hideUserStatus={false} + selectionMode={SelectionMode.none} + showSearchBar={true} +/> +``` + + ## Overview The Users is a Component, showcasing an accessible list of all available users. It provides an integral search functionality, allowing you to locate any specific user swiftly and easily. For each user listed, the widget displays the user's name by default, in conjunction with their avatar when available. Furthermore, it includes a status indicator, visually informing you whether a user is currently online or offline. @@ -10,6 +31,10 @@ The Users is a Component, showcasing an accessible list of all available users. + +**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) | [REST API](https://api-explorer.cometchat.com) + + The Users component is composed of the following BaseComponents: | Components | Description | @@ -26,7 +51,7 @@ The Users component is composed of the following BaseComponents: The following code snippet illustrates how you can directly incorporate the Users component into your Application. - + ```tsx import { CometChatUsers } from "@cometchat/chat-uikit-react"; @@ -39,21 +64,6 @@ export default UsersDemo; - -```tsx -import { UsersDemo } from "./UsersDemo"; - -export default function App() { - return ( -
- -
- ); -} -``` - - - ### Actions @@ -67,7 +77,7 @@ The `onSelect` action is activated when you select the done icon while in select This action does not come with any predefined behavior. However, you have the flexibility to override this event and tailor it to suit your needs using the following code snippet. - + ```ts import { CometChatUsers, SelectionMode } from "@cometchat/chat-uikit-react"; @@ -1128,3 +1138,23 @@ export default UsersDemo; + + +--- + +## Next Steps + + + + Display and manage group lists + + + Display members of a group + + + Display conversation lists + + + Display messages for a user + + From c130326053129adeb48a3defd010c0d73eb2a882 Mon Sep 17 00:00:00 2001 From: aanshisingh-cometchat Date: Thu, 12 Feb 2026 14:20:57 +0530 Subject: [PATCH 02/59] Improvement of overview, react-conversation, react-js-integration, react-one-to-one, react-tab-based-chat documentation --- ui-kit/react/overview.mdx | 29 +++++++++------- ui-kit/react/react-conversation.mdx | 42 ++++++++++++++++++++--- ui-kit/react/react-js-integration.mdx | 47 ++++++++++++++++++-------- ui-kit/react/react-one-to-one-chat.mdx | 46 ++++++++++++++++++++++--- ui-kit/react/react-tab-based-chat.mdx | 41 +++++++++++++++++++--- 5 files changed, 165 insertions(+), 40 deletions(-) diff --git a/ui-kit/react/overview.mdx b/ui-kit/react/overview.mdx index 69478d80a..edceb87bc 100644 --- a/ui-kit/react/overview.mdx +++ b/ui-kit/react/overview.mdx @@ -207,21 +207,24 @@ A collection of individual components—like conversation lists, message lists, *** -## **Next Steps for Developers** +## **Next Steps** -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. + + + Get started with React.js setup and configuration + + + Integrate with Next.js and SSR support + + + Explore all available UI components + + + Customize colors, fonts, and styling + + -*** +--- ## **Helpful Resources** diff --git a/ui-kit/react/react-conversation.mdx b/ui-kit/react/react-conversation.mdx index 03ab256f4..ad11afdf2 100644 --- a/ui-kit/react/react-conversation.mdx +++ b/ui-kit/react/react-conversation.mdx @@ -1,8 +1,31 @@ --- title: "Building A Conversation List + Message View" sidebarTitle: "Conversation List + Message View" +description: "Build a two-panel chat interface with conversation list sidebar and message view, similar to WhatsApp Web, Slack, and Microsoft Teams." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```tsx +import { CometChatConversations, CometChatMessageHeader, CometChatMessageList, CometChatMessageComposer } from "@cometchat/chat-uikit-react"; + +// Sidebar - Conversation List + setActiveChat(conversation)} /> + +// Message View + + + +``` + +Key components: +- **CometChatConversations** → [Conversations](/ui-kit/react/conversations) +- **CometChatMessageList** → [Message List](/ui-kit/react/message-list) +- **CometChatMessageComposer** → [Message Composer](/ui-kit/react/message-composer) + + The **Conversation List + Message View** layout offers a seamless **two-panel chat interface**, commonly used in modern messaging applications like **WhatsApp Web, Slack, and Microsoft Teams**. This design enables users to switch between conversations effortlessly while keeping the chat window open, ensuring a **smooth, real-time messaging experience**. @@ -388,8 +411,19 @@ npm start ## **Next Steps** -### **Enhance the User Experience** - -* **[Advanced Customizations](/ui-kit/react/theme)** – Personalize the chat UI to align with your brand. + + + Build a focused direct messaging experience + + + Create a multi-tab navigation interface + + + Customize colors, fonts, and styling + + + Explore all available UI components + + -*** +--- diff --git a/ui-kit/react/react-js-integration.mdx b/ui-kit/react/react-js-integration.mdx index 9585702c3..b8518cd68 100644 --- a/ui-kit/react/react-js-integration.mdx +++ b/ui-kit/react/react-js-integration.mdx @@ -1,7 +1,7 @@ --- title: "Getting Started With CometChat React UI Kit" sidebarTitle: "Integration" -description: "Step-by-step guide to integrate CometChat UI Kit into your React.js application with prebuilt chat components." +description: "Step-by-step guide to integrate CometChat React UI Kit with prebuilt components, theming options, and support for one-to-one and group conversations." --- {/* TL;DR for Agents and Quick Reference */} @@ -15,24 +15,23 @@ npm install @cometchat/chat-uikit-react ```tsx import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; +import "@cometchat/chat-uikit-react/css-variables.css"; -// Initialize +// 1. Initialize const UIKitSettings = new UIKitSettingsBuilder() .setAppId("APP_ID") .setRegion("REGION") .setAuthKey("AUTH_KEY") + .subscribePresenceForAllUsers() .build(); -CometChatUIKit.init(UIKitSettings); +await CometChatUIKit.init(UIKitSettings); -// Login -CometChatUIKit.login("UID"); +// 2. Login +await CometChatUIKit.login("cometchat-uid-1"); -// Render components -import { CometChatConversations, CometChatMessageList, CometChatMessageComposer } from "@cometchat/chat-uikit-react"; - setActiveChat(conversation)} /> - - +// 3. Render component + console.log(conversation)} /> ``` @@ -203,6 +202,14 @@ For secure authentication, use the [`Auth Token`](/ui-kit/react/methods#login-us + +**Auth Key** is for development/testing only. In production, generate **Auth Tokens** on your server using the REST API and pass them to the client. Never expose Auth Keys in production client code. + + + +You must call `CometChatUIKit.init(UIKitSettings)` before rendering any UI Kit components or calling any SDK methods. Initialization must complete before login. + + ```ts @@ -528,9 +535,19 @@ import { CometChatFrameProvider } from "@cometchat/ui-kit"; Now that you’ve selected your **chat experience**, proceed to the **integration guide**: -* **[Integrate Conversation List + Message](/ui-kit/react/react-conversation)** -* **[Integrate One-to-One Chat](/ui-kit/react/react-one-to-one-chat)** -* **[Integrate Tab-Based Chat](/ui-kit/react/react-tab-based-chat)** -* **[Advanced Customizations](/ui-kit/react/theme)** + + + Build a two-panel layout with sidebar and message view + + + Create a focused direct messaging experience + + + Build a multi-tab navigation interface + + + Customize themes, colors, and styling + + -*** +--- diff --git a/ui-kit/react/react-one-to-one-chat.mdx b/ui-kit/react/react-one-to-one-chat.mdx index bdb37e0f3..ee8fc6f62 100644 --- a/ui-kit/react/react-one-to-one-chat.mdx +++ b/ui-kit/react/react-one-to-one-chat.mdx @@ -1,8 +1,35 @@ --- title: "Building A One To One/Group Chat Experience" sidebarTitle: "One To One/Group Chat" +description: "Build a focused direct messaging interface for one-to-one or group chat, ideal for support chats, dating apps, and private messaging platforms." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```tsx +import { CometChatMessageHeader, CometChatMessageList, CometChatMessageComposer } from "@cometchat/chat-uikit-react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; + +// Fetch user for one-to-one chat +const user = await CometChat.getUser("cometchat-uid-1"); + +// Or fetch group for group chat +const group = await CometChat.getGroup("GUID"); + +// Render chat components + + + +``` + +Key components: +- **CometChatMessageHeader** → [Message Header](/ui-kit/react/message-header) +- **CometChatMessageList** → [Message List](/ui-kit/react/message-list) +- **CometChatMessageComposer** → [Message Composer](/ui-kit/react/message-composer) + + The **One-to-One Chat** feature provides a streamlined **direct messaging interface**, making it ideal for **support chats, dating apps, and private messaging platforms**. This setup eliminates distractions by focusing solely on a **dedicated chat window**. [](https://link.cometchat.com/react-one-on-one) @@ -204,8 +231,19 @@ npm start ## **Next Steps** -### **Enhance the User Experience** + + + Build a two-panel layout with sidebar and message view + + + Create a multi-tab navigation interface + + + Customize colors, fonts, and styling + + + Learn about message list customization + + -* **[Advanced Customizations](/ui-kit/react/theme)** – Personalize the chat UI to align with your brand. - -*** +--- diff --git a/ui-kit/react/react-tab-based-chat.mdx b/ui-kit/react/react-tab-based-chat.mdx index ae4a0ce22..c63e05733 100644 --- a/ui-kit/react/react-tab-based-chat.mdx +++ b/ui-kit/react/react-tab-based-chat.mdx @@ -1,8 +1,30 @@ --- title: "Building A Messaging UI With Tabs, Sidebar, And Message View" sidebarTitle: "Tab Based Chat Experience" +description: "Build a tab-based messaging UI with sections for Chats, Calls, Users, and Groups using React and CometChat UIKit." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```tsx +import { CometChatConversations, CometChatCallLogs, CometChatUsers, CometChatGroups } from "@cometchat/chat-uikit-react"; + +// Tab-based navigation components + handleSelect(conversation)} /> // Chats tab + handleSelect(call)} /> // Calls tab + handleSelect(user)} /> // Users tab + handleSelect(group)} /> // Groups tab +``` + +Key components: +- **CometChatConversations** → [Conversations](/ui-kit/react/conversations) +- **CometChatCallLogs** → [Call Logs](/ui-kit/react/call-logs) +- **CometChatUsers** → [Users](/ui-kit/react/users) +- **CometChatGroups** → [Groups](/ui-kit/react/groups) + + This guide walks you through creating a **tab-based messaging UI** using **React** and **CometChat UIKit**. The UI will include different sections for **Chats, Calls, Users, and Groups**, allowing seamless navigation. [](https://link.cometchat.com/react-tabs-sidebar-message) @@ -479,8 +501,19 @@ npm start ## **Next Steps** -### **Enhance the User Experience** - -* **[Advanced Customizations](/ui-kit/react/theme)** – Personalize the chat UI to align with your brand. + + + Build a two-panel layout with sidebar and message view + + + Create a focused direct messaging experience + + + Customize colors, fonts, and styling + + + Learn about call logs customization + + -*** +--- From b1827a25d15c19e0d4f53ad39b329398be082a67 Mon Sep 17 00:00:00 2001 From: aanshisingh-cometchat Date: Fri, 13 Feb 2026 18:43:08 +0530 Subject: [PATCH 03/59] improve the documentation --- ui-kit/react/ai-assistant-chat.mdx | 80 ++++++++++++++++--- ui-kit/react/ai-features.mdx | 37 +++++++++ ui-kit/react/astro-conversation.mdx | 40 ++++++++++ ui-kit/react/astro-integration.mdx | 49 ++++++++++++ ui-kit/react/astro-one-to-one-chat.mdx | 40 ++++++++++ ui-kit/react/astro-tab-based-chat.mdx | 37 ++++++++- ui-kit/react/call-buttons.mdx | 78 ++++++++++++++---- ui-kit/react/call-features.mdx | 44 ++++++++++ ui-kit/react/call-logs.mdx | 73 +++++++++++++---- ui-kit/react/conversations.mdx | 38 +++++++-- ui-kit/react/custom-text-formatter-guide.mdx | 51 +++++++++++- ui-kit/react/events.mdx | 49 ++++++++++++ ui-kit/react/extensions.mdx | 41 ++++++++++ ui-kit/react/group-members.mdx | 72 ++++++++++++++--- ui-kit/react/groups.mdx | 16 +++- ui-kit/react/guide-block-unblock-user.mdx | 44 ++++++++++ ui-kit/react/guide-call-log-details.mdx | 41 ++++++++++ ui-kit/react/guide-group-chat.mdx | 53 ++++++++++-- ui-kit/react/guide-message-privately.mdx | 50 ++++++++++-- ui-kit/react/guide-new-chat.mdx | 46 +++++++++-- ui-kit/react/guide-overview.mdx | 34 ++++++++ ui-kit/react/guide-search-messages.mdx | 51 ++++++++++-- ui-kit/react/guide-threaded-messages.mdx | 42 +++++++++- ui-kit/react/incoming-call.mdx | 66 ++++++++++++--- ui-kit/react/localize.mdx | 48 ++++++++++- ui-kit/react/mentions-formatter-guide.mdx | 41 ++++++++++ ui-kit/react/message-header.mdx | 76 +++++++++++++++--- ui-kit/react/message-template.mdx | 51 ++++++++++++ ui-kit/react/next-conversation.mdx | 34 ++++++++ ui-kit/react/next-one-to-one-chat.mdx | 23 ++++++ ui-kit/react/next-tab-based-chat.mdx | 39 +++++++++ ui-kit/react/outgoing-call.mdx | 49 ++++++++++++ ui-kit/react/property-changes.mdx | 45 +++++++++++ ui-kit/react/react-router-conversation.mdx | 57 +++++++++++-- ui-kit/react/react-router-integration.mdx | 36 +++++++++ ui-kit/react/react-router-one-to-one-chat.mdx | 48 +++++++++-- ui-kit/react/react-router-tab-based-chat.mdx | 43 ++++++++-- ui-kit/react/search.mdx | 43 ++++++++++ ui-kit/react/shortcut-formatter-guide.mdx | 44 +++++++++- ui-kit/react/sound-manager.mdx | 38 +++++++++ ui-kit/react/thread-header.mdx | 43 +++++++++- ui-kit/react/upgrading-from-v5.mdx | 41 ++++++++++ ui-kit/react/url-formatter-guide.mdx | 44 ++++++++++ 43 files changed, 1870 insertions(+), 145 deletions(-) diff --git a/ui-kit/react/ai-assistant-chat.mdx b/ui-kit/react/ai-assistant-chat.mdx index 2cf33676c..ad1745922 100644 --- a/ui-kit/react/ai-assistant-chat.mdx +++ b/ui-kit/react/ai-assistant-chat.mdx @@ -1,7 +1,32 @@ --- title: "AI Assistant Chat" +description: "A composite component that provides an AI agent chat experience with streaming responses, quick starter suggestions, and chat history." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```tsx +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react"; + +// Minimal usage - requires an AI agent user + + +// With common props + console.log("Closed")} +/> +``` + +Related: [AI Features](/ui-kit/react/ai-features) | [Message List](/ui-kit/react/message-list) + + ## Overview `CometChatAIAssistantChat` is a composite component that assembles the message header, message list, and message composer to provide an AI agent chat experience. It supports streaming responses, quick starter suggestions, "New Chat" to reset context, and a chat history sidebar. @@ -10,8 +35,12 @@ title: "AI Assistant Chat" + +**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) + + - + ```tsx import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; @@ -33,21 +62,31 @@ export function AIAssistantChatDemo() { ); } - ``` - -```tsx -import { AIAssistantChatDemo } from "./AIAssistantChatDemo"; + +```jsx +import React from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react"; -export default function App() { - return ( -
- -
- ); +export function AIAssistantChatDemo() { + const [agent, setAgent] = React.useState(null); + + React.useEffect(() => { + // Replace with your assistant UID + CometChat.getUser("assistant_uid").then((u) => setAgent(u)); + }, []); + + if (!agent) return null; + + return( + <> + + + ); } ``` @@ -935,4 +974,21 @@ export function AIAssistantChatDemo() { -*** +--- + +## Next Steps + + + + Explore AI-powered features like Smart Replies and Conversation Summary + + + Learn about the Message List component for displaying chat messages + + + Customize message bubbles with templates + + + Apply custom themes to match your app's design + + diff --git a/ui-kit/react/ai-features.mdx b/ui-kit/react/ai-features.mdx index c0f24be3b..8dd19cd78 100644 --- a/ui-kit/react/ai-features.mdx +++ b/ui-kit/react/ai-features.mdx @@ -1,7 +1,21 @@ --- title: "AI User Copilot" +description: "AI-powered features including Conversation Starters, Smart Replies, and Conversation Summary to enhance user engagement." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +Key AI features available in the UI Kit: +- **Conversation Starters** → Auto-enabled in [CometChatMessageList](/ui-kit/react/message-list) +- **Smart Replies** → Auto-enabled in [CometChatMessageComposer](/ui-kit/react/message-composer) +- **Conversation Summary** → Auto-enabled in [CometChatMessageComposer](/ui-kit/react/message-composer) +- **AI Assistant Chat** → [CometChatAIAssistantChat](/ui-kit/react/ai-assistant-chat) + +Enable features from the [CometChat Dashboard](https://app.cometchat.com/) → AI section. + + ## Overview CometChat's AI capabilities greatly enhance user interaction and engagement in your application. Let's understand how the React UI Kit achieves these features. @@ -10,6 +24,10 @@ CometChat's AI capabilities greatly enhance user interaction and engagement in y + +**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) | [Dashboard](https://app.cometchat.com/) + + ## Conversation Starters When a user initiates a new chat, the UI kit displays a list of suggested opening lines that users can select, making it easier for them to start a conversation. These suggestions are powered by CometChat's AI, which predicts contextually relevant conversation starters. @@ -45,3 +63,22 @@ Once you have successfully activated the [Conversation Summary](/fundamentals/ai + +--- + +## Next Steps + + + + Build a dedicated AI agent chat experience + + + Learn about the Message List component with AI features + + + Explore the Message Composer with Smart Replies + + + Discover additional extensions and integrations + + diff --git a/ui-kit/react/astro-conversation.mdx b/ui-kit/react/astro-conversation.mdx index 605b47376..9f94fc80d 100644 --- a/ui-kit/react/astro-conversation.mdx +++ b/ui-kit/react/astro-conversation.mdx @@ -1,8 +1,31 @@ --- title: "Building a Conversation List + Message View in Astro" sidebarTitle: "Conversation List + Message View" +description: "Build a two-panel chat layout with conversation list and message view using CometChat React UI Kit in Astro." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```tsx +import { CometChatConversations, CometChatMessageHeader, CometChatMessageList, CometChatMessageComposer } from "@cometchat/chat-uikit-react"; + +// Two-panel layout +
+ +
+ + + +
+
+``` + +- **Astro Integration** → [Integration Guide](/ui-kit/react/astro-integration) +- **One-to-One Chat** → [One-to-One Guide](/ui-kit/react/astro-one-to-one-chat) + + The Conversation List + Message View layout provides a familiar two‑panel experience, similar to WhatsApp Web or Slack. Users browse conversations on the left and chat in real time on the right. *** @@ -279,4 +302,21 @@ The sample uses `ensureLogin(uid)` to switch users by logging out if the active To build other experiences (One‑to‑One or Tab‑based), reuse `src/lib/cometchat-init.js` and switch the React island component. +--- + +## Next Steps + + + Build a focused single conversation chat experience + + + Create a multi-tab chat interface with navigation + + + Customize the look and feel of your chat UI + + + Explore all available UI Kit components + + diff --git a/ui-kit/react/astro-integration.mdx b/ui-kit/react/astro-integration.mdx index 6ae758a65..878241813 100644 --- a/ui-kit/react/astro-integration.mdx +++ b/ui-kit/react/astro-integration.mdx @@ -1,8 +1,38 @@ --- title: "Getting Started With CometChat React UI Kit in Astro" sidebarTitle: "Integration" +description: "Integrate CometChat React UI Kit in your Astro application for real-time chat functionality." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```bash +# Install +npm i @cometchat/chat-uikit-react +npx astro add react +``` + +```tsx +// Initialize (src/lib/cometchat-init.js) +import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; + +const settings = new UIKitSettingsBuilder() + .setAppId("APP_ID") + .setRegion("REGION") + .setAuthKey("AUTH_KEY") + .build(); + +await CometChatUIKit.init(settings); +await CometChatUIKit.login("UID"); +``` + +- **Conversation Layout** → [Conversation Guide](/ui-kit/react/astro-conversation) +- **One-to-One Chat** → [One-to-One Guide](/ui-kit/react/astro-one-to-one-chat) +- **Tab-Based Chat** → [Tab-Based Guide](/ui-kit/react/astro-tab-based-chat) + + The CometChat platform lets you add in‑app chat with minimal effort. In Astro, you can integrate CometChat in two primary ways: - Using the CometChat JavaScript SDK directly for framework-agnostic control @@ -341,3 +371,22 @@ Proceed with your chosen experience: + +--- + +## Next Steps + + + + Build a two-panel conversation list with message view + + + Create a focused single conversation experience + + + Build a multi-tab chat interface + + + Explore all available UI Kit components + + diff --git a/ui-kit/react/astro-one-to-one-chat.mdx b/ui-kit/react/astro-one-to-one-chat.mdx index 54addcac0..67c1f4023 100644 --- a/ui-kit/react/astro-one-to-one-chat.mdx +++ b/ui-kit/react/astro-one-to-one-chat.mdx @@ -1,8 +1,31 @@ --- title: "Building a One-to-One/Group Chat in Astro" sidebarTitle: "One To One/Group Chat" +description: "Build a focused one-to-one or group chat experience using CometChat React UI Kit in Astro." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```tsx +import { CometChatMessageHeader, CometChatMessageList, CometChatMessageComposer } from "@cometchat/chat-uikit-react"; + +// One-to-one chat with a user + + + + +// Group chat (use group prop instead) + + + +``` + +- **Astro Integration** → [Integration Guide](/ui-kit/react/astro-integration) +- **Conversation Layout** → [Conversation Guide](/ui-kit/react/astro-conversation) + + The One‑to‑One/Group chat layout focuses on a single conversation, ideal for support chats and private messaging. This guide uses Astro with React islands and the CometChat React UI Kit. *** @@ -267,4 +290,21 @@ The island logs out if a different user session is active, then logs in with `PU You can reuse `src/lib/cometchat-init.js` across different chat experiences and swap the island component. +--- + +## Next Steps + + + Build a two-panel conversation list with message view + + + Create a multi-tab chat interface with navigation + + + Customize the look and feel of your chat UI + + + Learn about Message List customization options + + diff --git a/ui-kit/react/astro-tab-based-chat.mdx b/ui-kit/react/astro-tab-based-chat.mdx index cf532ef4f..88f4b9351 100644 --- a/ui-kit/react/astro-tab-based-chat.mdx +++ b/ui-kit/react/astro-tab-based-chat.mdx @@ -1,8 +1,28 @@ --- title: "Building a Messaging UI with Tabs, Sidebar, and Message View in Astro" sidebarTitle: "Tab Based Chat Experience" +description: "Build a tab-based messaging UI in Astro with CometChat React UI Kit featuring Chats, Calls, Users, and Groups sections." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```tsx +import TabbedChat from "../components/TabbedChat.jsx"; + +// Astro page with client-only hydration + +``` + +Key components used: +- **CometChatConversations** → Chats tab +- **CometChatCallLogs** → Calls tab +- **CometChatUsers** → Users tab +- **CometChatGroups** → Groups tab +- **CometChatMessageHeader/List/Composer** → Message panel + + This guide shows how to build a tab‑based messaging UI in Astro using the CometChat React UI Kit. The interface includes sections for Chats, Calls, Users, and Groups with a message panel. *** @@ -357,9 +377,20 @@ The message panel shows only for Chats, Users, or Groups. Calls tab does not ope ## Next Steps -- Add call handling with CometChat Calls SDK -- Apply theming and component overrides -- Extend with unread badges and notifications + + + Add voice and video calling capabilities + + + Customize colors, fonts, and styling + + + Review the Astro setup guide + + + Explore all available components + + You can reuse `src/lib/cometchat-init.js` and swap the island component to build other experiences. diff --git a/ui-kit/react/call-buttons.mdx b/ui-kit/react/call-buttons.mdx index 4c67d12bb..90fe60c91 100644 --- a/ui-kit/react/call-buttons.mdx +++ b/ui-kit/react/call-buttons.mdx @@ -1,7 +1,30 @@ --- title: "Call Buttons" +description: "CometChatCallButtons component provides voice and video call buttons for initiating calls to users or groups." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```tsx +import { CometChatCallButtons } from "@cometchat/chat-uikit-react"; + +// Basic usage with user + + +// With group + + +// Hide specific buttons + +``` + + ## 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. @@ -10,12 +33,16 @@ The `Call Button` is a Component provides users with the ability to make calls, + +**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) + + ## Usage ### Integration - + ```tsx import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatCallButtons } from "@cometchat/chat-uikit-react"; @@ -36,23 +63,25 @@ export default CallButtonDemo; - -```tsx -import { CallButtonDemo } from "./CallButtonDemo"; + +```jsx +import React, { useState, useEffect } from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatCallButtons } from "@cometchat/chat-uikit-react"; -export default function App() { - return ( -
-
- -
-
- ); -} -``` +const CallButtonDemo = () => { + const [chatUser, setChatUser] = useState(null); + useEffect(() => { + CometChat.getUser("uid").then((user) => { + setChatUser(user); + }); + }, []); + return ; +}; +export default CallButtonDemo; +``` - ### Actions @@ -406,4 +435,21 @@ You can customize the properties of the `CometChatOutgoingCall` component by mak You can refer to [CometChatOutgoingCall](/ui-kit/react/outgoing-call) component to know more about each of the above properties. -*** +--- + +## Next Steps + + + + Customize the outgoing call screen + + + Handle incoming call notifications + + + Display call history + + + Overview of all calling capabilities + + diff --git a/ui-kit/react/call-features.mdx b/ui-kit/react/call-features.mdx index f9d61886a..0c4d6c976 100644 --- a/ui-kit/react/call-features.mdx +++ b/ui-kit/react/call-features.mdx @@ -1,11 +1,36 @@ --- title: "Call" +description: "Overview of CometChat calling features including voice/video calls, incoming/outgoing call screens, and call logs." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +Key call components: +- **Call Buttons** → [CometChatCallButtons](/ui-kit/react/call-buttons) +- **Incoming Call** → [CometChatIncomingCall](/ui-kit/react/incoming-call) +- **Outgoing Call** → [CometChatOutgoingCall](/ui-kit/react/outgoing-call) +- **Call Logs** → [CometChatCallLogs](/ui-kit/react/call-logs) + +```bash +# Required: Install Calls SDK +npm install @cometchat/calls-sdk-javascript +``` + + ## 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. + +**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) + + + +**Calling features** require installing `@cometchat/calls-sdk-javascript` separately. The UI Kit auto-detects it and enables call UI components. + + ## Integration First, make sure that you've correctly integrated the UI Kit library into your project. If you haven't done this yet or are facing difficulties, refer to our [Getting Started](/ui-kit/react/integration) guide. This guide will walk you through a step-by-step process of integrating our UI Kit into your React project. @@ -53,3 +78,22 @@ Importantly, the Outgoing Call component is smartly designed to transition autom + +--- + +## Next Steps + + + + Add voice and video call buttons + + + Handle incoming call notifications + + + Customize the outgoing call screen + + + Display conversation lists + + diff --git a/ui-kit/react/call-logs.mdx b/ui-kit/react/call-logs.mdx index 35f786e34..011ad4521 100644 --- a/ui-kit/react/call-logs.mdx +++ b/ui-kit/react/call-logs.mdx @@ -1,11 +1,40 @@ --- title: "Call Logs" +description: "CometChatCallLogs component displays a list of call history with caller information, call status, and timestamps." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```tsx +import { CometChatCallLogs } from "@cometchat/chat-uikit-react"; + +// Basic usage + + +// With item click handler + console.log("Selected:", callLog)} +/> + +// With custom request builder + +``` + + ## 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. + +**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) | [REST API](https://api-explorer.cometchat.com) + + @@ -23,7 +52,7 @@ The `Call Logs` is comprised of the following components: ### Integration - + ```tsx import { CometChatCallLogs } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -37,23 +66,19 @@ export default CallLogDemo; - -```tsx -import { CallLogDemo } from "./CallLogDemo"; + +```jsx +import { CometChatCallLogs } from "@cometchat/chat-uikit-react"; +import React from "react"; -export default function App() { - return ( -
-
- -
-
- ); -} +const CallLogDemo = () => { + return ; +}; + +export default CallLogDemo; ``` - ### Actions @@ -1149,3 +1174,23 @@ export default CallLogDemo; + + +--- + +## Next Steps + + + + Add voice and video call buttons + + + Handle incoming call notifications + + + Customize the outgoing call screen + + + Overview of all calling capabilities + + diff --git a/ui-kit/react/conversations.mdx b/ui-kit/react/conversations.mdx index 2bd09c609..f45a8e0ab 100644 --- a/ui-kit/react/conversations.mdx +++ b/ui-kit/react/conversations.mdx @@ -42,7 +42,7 @@ This component lists the most recent or latest conversations or contacts with wh ### Integration - + ```tsx import { CometChatConversations, @@ -64,6 +64,28 @@ export default ConversationsDemo; + +```jsx +import { + CometChatConversations, + TitleAlignment, +} from "@cometchat/chat-uikit-react"; + +function ConversationsDemo() { + return ( +
+
+ +
+
+ ); +} + +export default ConversationsDemo; +``` + + + ### Actions @@ -75,7 +97,7 @@ export default ConversationsDemo; `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. - + ```tsx import { CometChatConversations } from "@cometchat/chat-uikit-react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; @@ -90,7 +112,7 @@ const getOnItemClick = (conversation: CometChat.Conversation) => { - + ```jsx import { CometChatConversations } from "@cometchat/chat-uikit-react"; @@ -113,7 +135,7 @@ const getOnItemClick = (conversation) => { The `OnSelect` event is triggered upon the completion of a selection in `SelectionMode`. It does not have a default behavior. However, you can override its behavior using the following code snippet. - + ```tsx import { CometChatConversations, @@ -137,7 +159,7 @@ const getOnSelect = ( - + ```jsx import { CometChatConversations, @@ -166,7 +188,7 @@ const getOnSelect = (conversation, selected) => { This action doesn't change the behavior of the component but rather listens for any errors that occur in the Conversations component. - + ```tsx import { CometChatConversations } from "@cometchat/chat-uikit-react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; @@ -180,7 +202,7 @@ const handleOnError = (error: CometChat.CometChatException) => { - + ```jsx import { CometChatConversations } from "@cometchat/chat-uikit-react"; @@ -838,7 +860,7 @@ export default class DialogHelper { - + ```tsx import ShortcutFormatter from "./ShortCutFormatter"; diff --git a/ui-kit/react/custom-text-formatter-guide.mdx b/ui-kit/react/custom-text-formatter-guide.mdx index eadbdc933..21d90bbd6 100644 --- a/ui-kit/react/custom-text-formatter-guide.mdx +++ b/ui-kit/react/custom-text-formatter-guide.mdx @@ -1,7 +1,36 @@ --- title: "Custom Text Formatter" +description: "Guide to creating custom text formatters for CometChat using CometChatTextFormatter for message composer and text bubbles." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```tsx +import { CometChatTextFormatter } from "@cometchat/chat-uikit-react"; + +// Extend to create custom formatter +class HashTagTextFormatter extends CometChatTextFormatter { + constructor() { + super(); + this.setTrackingCharacter("#"); + this.setRegexPatterns([/\B#(\w+)\b/g]); + } + + getFormattedText(inputText: string) { + return inputText.replace( + /\B#(\w+)\b/g, + '#$1' + ); + } +} + +// Use in components + +``` + + ## Overview You can create your custom text formatter for CometChat using the `CometChatTextFormatter`. `CometChatTextFormatter` is an abstract utility class that serves as a foundational structure for enabling text formatting in the message composer and text message bubbles. It can be extended to create custom formatter classes, tailored to suit specific application needs, making it a valuable tool for text customization and enhancement in chat interfaces. @@ -433,4 +462,24 @@ registerEventListeners(element: HTMLElement, domTokenList: DOMTokenList) { - \ No newline at end of file + + + +--- + +## Next Steps + + + + Configure @mentions formatting + + + Customize link formatting + + + Customize the message input component + + + Display and customize message bubbles + + diff --git a/ui-kit/react/events.mdx b/ui-kit/react/events.mdx index 0ba3e00fc..d08234020 100644 --- a/ui-kit/react/events.mdx +++ b/ui-kit/react/events.mdx @@ -1,7 +1,36 @@ --- title: "Events" +description: "Reference for CometChat UI Kit events including conversation, user, group, message, and call events." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```tsx +import { + CometChatMessageEvents, + CometChatConversationEvents, + CometChatCallEvents +} from "@cometchat/chat-uikit-react"; + +// Subscribe to events +const subscription = CometChatMessageEvents.ccMessageSent.subscribe( + (message) => console.log("Message sent:", message) +); + +// Unsubscribe when done +subscription?.unsubscribe(); +``` + +Key event categories: +- **CometChatConversationEvents** → Conversation actions +- **CometChatUserEvents** → User block/unblock +- **CometChatGroupEvents** → Group management +- **CometChatMessageEvents** → Message lifecycle +- **CometChatCallEvents** → Call lifecycle + + ## Overview Events allow for a decoupled, flexible architecture where different parts of the application can interact without having to directly reference each other. This makes it easier to create complex, interactive experiences, as well as to extend and customize the functionality provided by the CometChat UI Kit. @@ -94,3 +123,23 @@ It consists of the following events: | Name | Description | | ------------------- | ---------------------------------------------------------------------------- | | ccActiveChatChanged | This event is triggered when the user navigates to a particular chat window. | + + +--- + +## Next Steps + + + + UI Kit initialization and login methods + + + Explore all available components + + + Display and manage conversation lists + + + Display messages in a conversation + + diff --git a/ui-kit/react/extensions.mdx b/ui-kit/react/extensions.mdx index 15f4332d9..af2cee91e 100644 --- a/ui-kit/react/extensions.mdx +++ b/ui-kit/react/extensions.mdx @@ -1,11 +1,32 @@ --- title: "Extensions" +description: "Overview of CometChat built-in extensions including stickers, polls, collaborative whiteboard, and more." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +Built-in extensions (enable via Dashboard): +- **Stickers** → Fun expression in Message Composer +- **Polls** → Group voting in Message Composer +- **Collaborative Whiteboard** → Real-time drawing +- **Collaborative Document** → Shared document editing +- **Message Translation** → Auto-translate messages +- **Link Preview** → URL summaries in Message List +- **Thumbnail Generation** → Image previews + +Extensions auto-integrate with UI Kit components after Dashboard activation. + + ## Overview CometChat's UI Kit offers built-in support for various extensions, enriching the chatting experience with enhanced functionality. These extensions augment your chat application, making it more interactive, secure, and efficient. + +**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) | [Dashboard](/fundamentals/extensions-overview) + + Activating extensions within CometChat is a straightforward process through your application's dashboard. For detailed instructions, refer to our guide on [Extensions](/fundamentals/extensions-overview). Once you've enabled your desired extension in the dashboard, it seamlessly integrates into your CometChat application upon initialization and successful login. It's important to note that extension features will only be available if they are supported by the CometChat UI Kit. @@ -85,3 +106,23 @@ Once you have successfully activated the [Thumbnail Generation Extension](/funda + + +--- + +## Next Steps + + + + Explore core messaging capabilities + + + Integrate AI-powered chat features + + + Customize the message input component + + + Display and customize message bubbles + + diff --git a/ui-kit/react/group-members.mdx b/ui-kit/react/group-members.mdx index ce7ec270f..a9029ec7a 100644 --- a/ui-kit/react/group-members.mdx +++ b/ui-kit/react/group-members.mdx @@ -1,7 +1,28 @@ --- title: "Group Members" +description: "A component that displays all users added or invited to a group, with member management capabilities including scope changes, kick, and ban options." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```tsx +import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; + +// Minimal usage + + +// With common props + console.log(member)} + selectionMode={SelectionMode.none} + hideUserStatus={false} +/> +``` + + ## Overview `CometChatGroupMembers` is a Component that displays all users added or invited to a group, granting them access to group discussions, shared content, and collaborative features. Group members can communicate in real-time via messaging, voice and video calls, and other activities. They can interact, share files, and join calls based on group permissions set by the administrator or owner. @@ -10,6 +31,10 @@ title: "Group Members" + +**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) | [REST API](https://api-explorer.cometchat.com) + + *** ## Usage @@ -19,7 +44,7 @@ title: "Group Members" The following code snippet illustrates how you can directly incorporate the Group Members component into your Application. - + ```tsx import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; @@ -42,17 +67,25 @@ export default GroupMembersDemo; - -```tsx -import { GroupMembersDemo } from "./GroupMembersDemo"; + +```jsx +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; +import React, { useState, useEffect } from "react"; -export default function App() { - return ( -
- -
- ); -} +const GroupMembersDemo = () => { + const [chatGroup, setChatGroup] = useState(null); + + useEffect(() => { + CometChat.getGroup("guid").then((group) => { + setChatGroup(group); + }); + }, []); + + return <>{chatGroup && }; +}; + +export default GroupMembersDemo; ``` @@ -1461,3 +1494,20 @@ export default GroupMembersDemo; *** + +## Next Steps + + + + Display and manage group lists + + + Add new members to groups + + + Manage banned group members + + + Display messages in a group + + diff --git a/ui-kit/react/groups.mdx b/ui-kit/react/groups.mdx index 2229932b7..df83c6708 100644 --- a/ui-kit/react/groups.mdx +++ b/ui-kit/react/groups.mdx @@ -51,7 +51,7 @@ The Groups component is composed of the following BaseComponents: The following code snippet illustrates how you can directly incorporate the Groups component into your Application. - + ```tsx import { CometChatGroups } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -65,6 +65,20 @@ export default GroupsDemo; + +```jsx +import { CometChatGroups } from "@cometchat/chat-uikit-react"; +import React from "react"; + +const GroupsDemo = () => { + return ; +}; + +export default GroupsDemo; +``` + + + *** diff --git a/ui-kit/react/guide-block-unblock-user.mdx b/ui-kit/react/guide-block-unblock-user.mdx index f758f45b3..89ffa633d 100644 --- a/ui-kit/react/guide-block-unblock-user.mdx +++ b/ui-kit/react/guide-block-unblock-user.mdx @@ -1,8 +1,34 @@ --- title: "Block/Unblock Users" sidebarTitle: "Block/Unblock Users" +description: "Learn how to implement user blocking functionality to prevent unwanted communication in your React chat app." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```tsx +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatUserEvents } from "@cometchat/chat-uikit-react"; + +// Block a user +CometChat.blockUsers([userId]).then(() => { + user.setBlockedByMe(true); + CometChatUserEvents.ccUserBlocked.next(user); +}); + +// Unblock a user +CometChat.unblockUsers([userId]).then(() => { + user.setBlockedByMe(false); + CometChatUserEvents.ccUserUnblocked.next(user); +}); + +// Check if user is blocked +const isBlocked = user.getBlockedByMe(); +``` + + Implement user blocking functionality to prevent unwanted communication in your React chat app. ## Overview @@ -287,3 +313,21 @@ CometChat.blockUsers([UID]).then( - Advanced Customization Guide - Event Handling Documentation +--- + +## Next Steps + + + + Display and manage user lists + + + Display conversation lists + + + Display messages in conversations + + + Handle UI Kit events + + \ No newline at end of file diff --git a/ui-kit/react/guide-call-log-details.mdx b/ui-kit/react/guide-call-log-details.mdx index a029b601e..560ce0737 100644 --- a/ui-kit/react/guide-call-log-details.mdx +++ b/ui-kit/react/guide-call-log-details.mdx @@ -1,8 +1,30 @@ --- title: "Call Log Details" sidebarTitle: "Call Log Details" +description: "Learn how to display comprehensive call information and history when users select calls from the calls tab in your React chat app." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```tsx +import { CometChatCallLogs } from "@cometchat/chat-uikit-react"; + +// Display call logs with click handler + setSelectedCall(call)} +/> + +// Custom call details component + setSelectedCall(undefined)} +/> +``` + + Display comprehensive call information and history when users select calls from the calls tab in your React chat app. ## Overview @@ -303,3 +325,22 @@ useEffect(() => { | Call history | `CometChatCallDetailsHistory` | [CometChatCallLogHistory.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCallLog/CometChatCallLogHistory.tsx) | | Tab navigation | `activeTab` state | [CometChatCallLogDetails.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCallLog/CometChatCallLogDetails.tsx) | | User status monitoring| `CometChat.addUserListener()` | [CometChatCallLogDetails.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCallLog/CometChatCallLogDetails.tsx) | + +--- + +## Next Steps + + + + Display call history + + + Initiate voice and video calls + + + Handle incoming calls + + + Handle outgoing calls + + diff --git a/ui-kit/react/guide-group-chat.mdx b/ui-kit/react/guide-group-chat.mdx index b62e735ec..97674a450 100644 --- a/ui-kit/react/guide-group-chat.mdx +++ b/ui-kit/react/guide-group-chat.mdx @@ -1,8 +1,37 @@ --- title: "Group Chat" sidebarTitle: "Group Chat" +description: "Learn how to implement comprehensive group management functionality including creation, joining, member management, and administrative controls in your React chat app." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```tsx +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { + CometChatCreateGroup, + CometChatGroupMembers, + CometChatGroupEvents +} from "@cometchat/chat-uikit-react"; + +// Create a group +const group = new CometChat.Group(guid, groupName, groupType, password); +CometChat.createGroup(group).then((createdGroup) => { + CometChatGroupEvents.ccGroupCreated.next(createdGroup); +}); + +// Join a group +CometChat.joinGroup(guid, groupType, password).then((joinedGroup) => { + CometChatGroupEvents.ccGroupMemberJoined.next({ joinedGroup, joinedUser }); +}); + +// Display group members + +``` + + Implement comprehensive group management functionality including creation, joining, member management, and administrative controls in your React chat app. --- @@ -337,11 +366,19 @@ const handleGroupOperation = async (operation: () => Promise) => { --- -## Next Steps & Further Reading - -- [CometChat React UI Kit Documentation](https://www.cometchat.com/docs/ui-kit/react/overview) -- [Sample App Repository](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) -- Group Management Features -- Advanced Customization Guide -- Member Management Documentation - +## Next Steps + + + + Display and manage group lists + + + Display group member lists + + + Display messages in groups + + + Handle group events + + \ No newline at end of file diff --git a/ui-kit/react/guide-message-privately.mdx b/ui-kit/react/guide-message-privately.mdx index 1d0add7ad..673a880aa 100644 --- a/ui-kit/react/guide-message-privately.mdx +++ b/ui-kit/react/guide-message-privately.mdx @@ -1,8 +1,35 @@ --- title: "Message Privately" sidebarTitle: "Message Privately" +description: "Learn how to enable users to initiate private conversations with group members directly from group chat interfaces." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```tsx +import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; + +// Group members with private messaging option + startPrivateChatFromGroup(member, group)} + options={[{ + id: "message_privately", + title: "Message Privately", + onClick: (member) => startPrivateChatFromGroup(member, group) + }]} +/> + +// Start private chat from group context +const startPrivateChatFromGroup = (user, group) => { + CometChat.getConversation(user.getUid(), "user") + .then((conversation) => setSelectedItem(conversation)); +}; +``` + + Enable users to initiate private conversations with group members directly from group chat interfaces. ## Overview @@ -316,10 +343,19 @@ const startPrivateChatFromGroup = async (user: CometChat.User, group: CometChat. --- -## Next Steps & Further Reading - -- [CometChat React UI Kit Documentation](https://www.cometchat.com/docs/ui-kit/react/overview) -- [Sample App Repository](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) -- Group Management Features -- User Management Features -- Message Types & Features +## Next Steps + + + + Display group member lists + + + Display messages in conversations + + + Display and manage user lists + + + Display conversation lists + + diff --git a/ui-kit/react/guide-new-chat.mdx b/ui-kit/react/guide-new-chat.mdx index 54ee2e6b2..27d0e5ad4 100644 --- a/ui-kit/react/guide-new-chat.mdx +++ b/ui-kit/react/guide-new-chat.mdx @@ -1,8 +1,32 @@ --- title: "New Chat" sidebarTitle: "New Chat" +description: "Learn how to enable users to create new conversations with individual users or join existing groups in your React chat app." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```tsx +import { CometChatUsers, CometChatGroups } from "@cometchat/chat-uikit-react"; + +// User selection for new chat + { + setNewChat({ user }); + setShowNewChat(false); + }} +/> + +// Group selection for new chat + joinGroup(group)} +/> +``` + + Enable users to create new conversations with individual users or join existing groups in your React chat app. ## Overview @@ -257,9 +281,19 @@ const joinGroup = (e) => { --- -## Next Steps & Further Reading - -- [CometChat React UI Kit Documentation](https://www.cometchat.com/docs/ui-kit/react/overview) -- [Sample App Repository](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) -- User Management Features -- Group Management Features +## Next Steps + + + + Display and manage user lists + + + Display and manage group lists + + + Display conversation lists + + + Display messages in conversations + + diff --git a/ui-kit/react/guide-overview.mdx b/ui-kit/react/guide-overview.mdx index 10ab044fd..558865bc2 100644 --- a/ui-kit/react/guide-overview.mdx +++ b/ui-kit/react/guide-overview.mdx @@ -1,7 +1,23 @@ --- title: "Overview" sidebarTitle: "Overview" +description: "Index of focused, task-oriented feature guides for the React UI Kit showing how to implement specific capabilities end-to-end." --- + +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +This page indexes all feature implementation guides for the React UI Kit. Each guide provides step-by-step instructions for implementing specific chat capabilities including: +- User blocking/unblocking +- Call log details +- Group management +- Private messaging +- Threaded messages +- Message search +- Text formatters + + > This page indexes focused, task‑oriented feature guides for the React UI Kit. Each guide shows how to implement a specific capability end‑to‑end using UI components. ## When to Use These Guides @@ -26,3 +42,21 @@ Use these guides after completing the base [Getting Started](/ui-kit/react/react Need another guide? Open a request via our [Developer Community](http://community.cometchat.com/) or Support. +--- + +## Next Steps + + + + Set up the React UI Kit + + + Explore all UI components + + + Customize themes and styling + + + Handle UI Kit events + + \ No newline at end of file diff --git a/ui-kit/react/guide-search-messages.mdx b/ui-kit/react/guide-search-messages.mdx index 072126f4f..efd2dda9c 100644 --- a/ui-kit/react/guide-search-messages.mdx +++ b/ui-kit/react/guide-search-messages.mdx @@ -1,8 +1,37 @@ --- title: "Search Messages" sidebarTitle: "Search Messages" +description: "Learn how to enable users to search messages within conversations and group chats using CometChat's React UI Kit." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```tsx +import { CometChatMessageList } from "@cometchat/chat-uikit-react"; + +// Search messages with keyword + + +// Handle search input +const onSearch = (keyword) => { + setSearchKeyword(keyword); + setGoToMessageId(undefined); +}; + +// Navigate to search result +const handleResultClick = (messageId) => { + setGoToMessageId(messageId); +}; +``` + + Enable users to search messages within conversations and group chats using CometChat's React UI Kit. ## Overview @@ -178,9 +207,19 @@ try { --- -## Next Steps & Further Reading - -- [CometChat React UI Kit Documentation](https://www.cometchat.com/docs/ui-kit/react/overview) -- [Sample App Repository](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) -- Message Management Features -- Advanced Search Features +## Next Steps + + + + Display messages in conversations + + + Implement threaded conversations + + + Compose and send messages + + + Display conversation lists + + diff --git a/ui-kit/react/guide-threaded-messages.mdx b/ui-kit/react/guide-threaded-messages.mdx index 50c06c07f..89131fc6e 100644 --- a/ui-kit/react/guide-threaded-messages.mdx +++ b/ui-kit/react/guide-threaded-messages.mdx @@ -1,8 +1,34 @@ --- title: "Threaded Messages" sidebarTitle: "Threaded Messages" +description: "Learn how to enable organized threaded conversations within group chats using CometChat's React UI Kit." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```tsx +import { + CometChatMessages, + CometChatThreadedMessages +} from "@cometchat/chat-uikit-react"; + +// Enable thread replies in messages + setThreadedMessage(message)} +/> + +// Display threaded messages + setThreadedMessage(undefined)} +/> +``` + + Enable organized threaded conversations within group chats using CometChat's React UI Kit. ## Overview @@ -211,5 +237,17 @@ useEffect(() => { ## Next Steps -- Explore [CometChat React UI Kit Docs](https://www.cometchat.com/docs/ui-kit/react/overview) -- Check the [Sample App Repo](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) + + + Display messages in conversations + + + Display and manage group lists + + + Search messages in conversations + + + Compose and send messages + + diff --git a/ui-kit/react/incoming-call.mdx b/ui-kit/react/incoming-call.mdx index e55f9f37f..cf85fa3a3 100644 --- a/ui-kit/react/incoming-call.mdx +++ b/ui-kit/react/incoming-call.mdx @@ -1,7 +1,27 @@ --- title: "Incoming Call" +description: "A component that displays incoming voice or video calls with options to accept or decline." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```tsx +import { CometChatIncomingCall } from "@cometchat/chat-uikit-react"; + +// Minimal usage + + +// With common props + handleAccept()} + onDecline={() => handleDecline()} + disableSoundForCalls={false} +/> +``` + + ## Overview The `Incoming call` is a Component that serves as a visual representation when the user receives an incoming call, such as a voice call or video call, providing options to answer or decline the call. @@ -10,6 +30,10 @@ The `Incoming call` is a Component that serves as a visual representation when t + +**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) + + The `Incoming Call` is comprised of the following base components: | Components | Description | @@ -23,7 +47,7 @@ The `Incoming Call` is comprised of the following base components: ### Integration - + ```tsx import { CometChatIncomingCall } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -37,19 +61,16 @@ export default IncomingCallsDemo; - -```tsx -import { IncomingCallsDemo } from "./IncomingCallsDemo"; + +```jsx +import { CometChatIncomingCall } from "@cometchat/chat-uikit-react"; +import React from "react"; -export default function App() { - return ( -
-
- -
-
- ); -} +const IncomingCallsDemo = () => { + return ; +}; + +export default IncomingCallsDemo; ``` @@ -945,3 +966,22 @@ export default IncomingCallsDemo; + +--- + +## Next Steps + + + + Handle outgoing calls + + + Initiate voice and video calls + + + Display call history + + + Handle call events + + diff --git a/ui-kit/react/localize.mdx b/ui-kit/react/localize.mdx index 45f62ad52..ebca01120 100644 --- a/ui-kit/react/localize.mdx +++ b/ui-kit/react/localize.mdx @@ -1,8 +1,36 @@ --- title: "Localization" sidebarTitle: "Localize" +description: "Configure multi-language localization to adapt UI elements based on user's preferred language settings." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```tsx +import { CometChatLocalize } from "@cometchat/chat-uikit-react"; + +// Initialize localization +CometChatLocalize.init({ + language: "es", + fallbackLanguage: "en-US", + disableAutoDetection: false, +}); + +// Set language at runtime +CometChatLocalize.setCurrentLanguage("fr"); + +// Get localized string +const text = CometChatLocalize.getLocalizedString("welcome_message"); + +// Add custom translations +CometChatLocalize.addTranslation({ + "en-US": { "custom_key": "Custom Value" } +}); +``` + + ## **Overview** React UI Kit provides **multi-language localization** to **adapt** the UI elements based on the user's preferred language settings. The **CometChatLocalize** class allows developers to: @@ -391,4 +419,22 @@ To apply a **custom date format** only within a specific component. /> ``` -*** \ No newline at end of file +*** + + +## Next Steps + + + + Customize UI appearance + + + Configure notification sounds + + + Explore all UI components + + + Set up the React UI Kit + + diff --git a/ui-kit/react/mentions-formatter-guide.mdx b/ui-kit/react/mentions-formatter-guide.mdx index f5e8d6860..ba6ab274e 100644 --- a/ui-kit/react/mentions-formatter-guide.mdx +++ b/ui-kit/react/mentions-formatter-guide.mdx @@ -1,7 +1,28 @@ --- title: "Mentions Formatter" +description: "Learn how to format @mentions within text messages with customizable styles and click handling." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```tsx +import { CometChatMentionsFormatter } from "@cometchat/chat-uikit-react"; + +// Initialize the formatter +const mentionsFormatter = new CometChatMentionsFormatter(); +mentionsFormatter.setCometChatUserGroupMembers(userList); + +// Apply formatter to message +const formattedMessage = mentionsFormatter.getFormattedText(unformattedMessage); + +// Use in MessageComposer or MessageList + + +``` + + ## Overview The `CometChatMentionsFormatter` class is a part of the CometChat UI Kit, a ready-to-use chat UI component library for integrating CometChat into your React applications. This class provides functionality to format mentions within text messages displayed in the chat interface. Mentions allow users to reference other users within a conversation, providing a convenient way to direct messages or involve specific participants. @@ -48,3 +69,23 @@ mentionsFormatter.setCometChatUserGroupMembers(userList); The `formattedMessage` now contains HTML with styled mentions, ready to be inserted into your message component for display. Below is an example demonstrating how to use the `CometChatMentionsFormatter` class in components such as [CometChatConversations](/ui-kit/react/conversations), [CometChatMessageList](/ui-kit/react/message-list), [CometChatMessageComposer](/ui-kit/react/message-composer). + + +--- + +## Next Steps + + + + Compose messages with mentions + + + Display messages with formatted mentions + + + Create custom text formatters + + + Format URLs in messages + + diff --git a/ui-kit/react/message-header.mdx b/ui-kit/react/message-header.mdx index 28d7d0c85..c98583182 100644 --- a/ui-kit/react/message-header.mdx +++ b/ui-kit/react/message-header.mdx @@ -1,7 +1,31 @@ --- title: "Message Header" +description: "A component that displays user or group details in the toolbar with typing indicator and back navigation." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```tsx +import { CometChatMessageHeader } from "@cometchat/chat-uikit-react"; + +// For user chat + + +// For group chat + + +// With common props + handleBack()} + hideUserStatus={false} +/> +``` + + ## Overview `MessageHeader` is a Component that showcases the [User](/sdk/javascript/users-overview) or [Group](/sdk/javascript/groups-overview) details in the toolbar. Furthermore, it also presents a typing indicator and a back navigation button for ease of use. @@ -10,6 +34,10 @@ title: "Message Header" + +**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) + + The `MessageHeader` is comprised of the following components: | Component | Description | @@ -22,7 +50,7 @@ The `MessageHeader` is comprised of the following components: ### Integration - + ```tsx import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; @@ -44,18 +72,23 @@ export function MessageHeaderDemo() { - -```tsx -import { MessageHeaderDemo } from "./MessageHeaderDemo"; + +```jsx +import React, { useState, useEffect } from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatMessageHeader } from "@cometchat/chat-uikit-react"; -export default function App() { - return ( -
-
- -
-
- ); +export function MessageHeaderDemo() { + const [chatUser, setChatUser] = useState(null); + useEffect(() => { + CometChat.getUser("uid").then((user) => { + setChatUser(user); + }); + }, []); + + return chatUser ? ( +
{chatUser && }
+ ) : null; } ``` @@ -702,4 +735,21 @@ function getDateFormat() { -*** +--- + +## Next Steps + + + + Display messages in a conversation + + + Add message input and sending capabilities + + + Enable threaded message conversations + + + Handle real-time chat events + + diff --git a/ui-kit/react/message-template.mdx b/ui-kit/react/message-template.mdx index 7659b7286..ac43cc2ba 100644 --- a/ui-kit/react/message-template.mdx +++ b/ui-kit/react/message-template.mdx @@ -1,7 +1,39 @@ --- title: "Message Template" +description: "A blueprint for defining and customizing message bubble structure, appearance, and behavior in the chat interface." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```tsx +import { CometChatUIKit, CometChatMessageTemplate, CometChatUIKitConstants } from "@cometchat/chat-uikit-react"; + +// Get all existing templates +const templates = CometChatUIKit.getDataSource().getAllMessageTemplates(); + +// Customize a specific template (e.g., text messages) +templates.forEach((template) => { + if (template.type === CometChatUIKitConstants.MessageTypes.text) { + template.headerView = (message) => ; + template.contentView = (message) => ; + template.footerView = (message) => ; + } +}); + +// Create a custom message template +const customTemplate = new CometChatMessageTemplate({ + type: "customType", + category: CometChatUIKitConstants.MessageCategory.custom, + contentView: (message) => , +}); + +// Apply templates to MessageList + +``` + + ## Overview MessageTemplate provides you with the capability to define and customize both the structure and the behavior of the Message Bubble. It acts as a schema or design blueprint for the creation of a variety of Message Bubble components, allowing you to manage the appearance and interactions of Message Bubble within your application effectively and consistently. @@ -1933,3 +1965,22 @@ export { CustomMessageTemplate }; + +--- + +## Next Steps + + + + Display messages using custom templates + + + Add message input and sending capabilities + + + Create custom text formatting rules + + + Customize colors, fonts, and styling + + diff --git a/ui-kit/react/next-conversation.mdx b/ui-kit/react/next-conversation.mdx index 1d8800f66..2a88a54a9 100644 --- a/ui-kit/react/next-conversation.mdx +++ b/ui-kit/react/next-conversation.mdx @@ -1,8 +1,42 @@ --- title: "Building A Conversation List + Message View" sidebarTitle: "Conversation List + Message View" +description: "Build a two-panel chat interface with conversation list sidebar and message view for Next.js applications." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```tsx +import { + CometChatConversations, + CometChatMessageHeader, + CometChatMessageList, + CometChatMessageComposer +} from "@cometchat/chat-uikit-react"; + +// Two-panel layout: Sidebar + Message View +
+ {/* Sidebar */} + setActiveChat(conversation)} + /> + + {/* Message View */} +
+ + + +
+
+``` + +- **Next.js Integration** → [Getting Started](/ui-kit/react/next-js-integration) +- **One-to-One Chat** → [One-to-One Chat](/ui-kit/react/next-one-to-one-chat) +- **Tab-Based Chat** → [Tab-Based Chat](/ui-kit/react/next-tab-based-chat) + + The **Conversation List + Message View** layout offers a seamless **two-panel chat interface**, commonly used in modern messaging applications like **WhatsApp Web, Slack, and Microsoft Teams**. This design enables users to switch between conversations effortlessly while keeping the chat window open, ensuring a **smooth, real-time messaging experience**. diff --git a/ui-kit/react/next-one-to-one-chat.mdx b/ui-kit/react/next-one-to-one-chat.mdx index 6b9ca33f4..cc4a44109 100644 --- a/ui-kit/react/next-one-to-one-chat.mdx +++ b/ui-kit/react/next-one-to-one-chat.mdx @@ -1,8 +1,31 @@ --- title: "Building A One To One/Group Chat Experience" sidebarTitle: "One To One/Group Chat" +description: "Build a focused direct messaging interface for one-to-one or group chat in Next.js applications." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```tsx +import { CometChatMessageHeader, CometChatMessageList, CometChatMessageComposer } from "@cometchat/chat-uikit-react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; + +// Fetch user for one-to-one chat +const user = await CometChat.getUser("cometchat-uid-1"); + +// Render chat components (client-side only) + + + +``` + +- **Next.js Integration** → [Getting Started](/ui-kit/react/next-js-integration) +- **Conversation List + Message** → [Conversation View](/ui-kit/react/next-conversation) +- **Tab-Based Chat** → [Tab-Based Chat](/ui-kit/react/next-tab-based-chat) + + The **One-to-One Chat** feature provides a streamlined **direct messaging interface**, making it ideal for **support chats, dating apps, and private messaging platforms**. This setup eliminates distractions by focusing solely on a **dedicated chat window**. [](https://link.cometchat.com/next-one-on-one) diff --git a/ui-kit/react/next-tab-based-chat.mdx b/ui-kit/react/next-tab-based-chat.mdx index 91f61a656..f9a9d32c3 100644 --- a/ui-kit/react/next-tab-based-chat.mdx +++ b/ui-kit/react/next-tab-based-chat.mdx @@ -1,8 +1,47 @@ --- title: "Building A Messaging UI With Tabs, Sidebar, And Message View" sidebarTitle: "Tab Based Chat Experience" +description: "Build a tab-based messaging UI with navigation between Chats, Calls, Users, and Groups in Next.js applications." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```tsx +import { + CometChatConversations, + CometChatCallLogs, + CometChatUsers, + CometChatGroups, + CometChatMessageHeader, + CometChatMessageList, + CometChatMessageComposer +} from "@cometchat/chat-uikit-react"; + +// Tab-based layout with sidebar and message view +
+ {/* Tab Navigation */} + + + {/* Sidebar based on active tab */} + {activeTab === "chats" && } + {activeTab === "calls" && } + {activeTab === "users" && } + {activeTab === "groups" && } + + {/* Message View */} + + + +
+``` + +- **Next.js Integration** → [Getting Started](/ui-kit/react/next-js-integration) +- **Conversation List + Message** → [Conversation View](/ui-kit/react/next-conversation) +- **One-to-One Chat** → [One-to-One Chat](/ui-kit/react/next-one-to-one-chat) + + This guide walks you through creating a **tab-based messaging UI** using **React** and **CometChat UIKit**. The UI will include different sections for **Chats, Calls, Users, and Groups**, allowing seamless navigation. [](https://link.cometchat.com/next-tabs-sidebar-message) diff --git a/ui-kit/react/outgoing-call.mdx b/ui-kit/react/outgoing-call.mdx index 89413847a..8feccc55c 100644 --- a/ui-kit/react/outgoing-call.mdx +++ b/ui-kit/react/outgoing-call.mdx @@ -1,9 +1,39 @@ --- title: "Outgoing Call" +description: "A component that displays outgoing voice or video calls with options to cancel and view call status." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```tsx +import { CometChatOutgoingCall, CometChatUIKitConstants } from "@cometchat/chat-uikit-react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; + +// Initiate a call +const callObject = new CometChat.Call( + "uid", + CometChatUIKitConstants.MessageTypes.audio, + CometChatUIKitConstants.MessageReceiverType.user +); +const call = await CometChat.initiateCall(callObject); + +// Render outgoing call component + handleCancel()} + disableSoundForCalls={false} +/> +``` + + ## Overview + +**Available via:** [UI Kits](https://www.cometchat.com/docs/ui-kit/react/overview) | [SDK](https://www.cometchat.com/docs/sdk/javascript/overview) + + The outgoing call component is a visual representation of a user-initiated call, whether it's a voice or video call. It serves as an interface for managing outgoing calls, providing users with essential options to control the call experience. This component typically includes information about the call recipient, call controls for canceling the call, and feedback on the call status, such as indicating when the call is in progress. @@ -1026,3 +1056,22 @@ export default OutgoingCallDemo; + +--- + +## Next Steps + + + + Handle incoming voice and video calls with accept/reject options. + + + Display call history with details like duration and participants. + + + Add voice and video call buttons to initiate calls. + + + Customize colors, fonts, and styling to match your brand. + + diff --git a/ui-kit/react/property-changes.mdx b/ui-kit/react/property-changes.mdx index 3358b3d16..6325c67b3 100644 --- a/ui-kit/react/property-changes.mdx +++ b/ui-kit/react/property-changes.mdx @@ -1,7 +1,33 @@ --- title: "Property Changes" +description: "Reference guide for property changes, new additions, and removed properties when upgrading to React UI Kit v6." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +Key changes in v6: +- **Date/Time formatting**: `datePattern` replaced with `CalendarObject`-based props +- **Conversations**: Use `lastMessageDateTimeFormat` instead of `datePattern` +- **Message List**: Use `separatorDateTimeFormat`, `stickyDateTimeFormat`, `messageSentAtDateTimeFormat` +- **Call Logs**: Use `callInitiatedDateTimeFormat` instead of `datePattern` +- **Localization**: `setLocale` → `setCurrentLanguage`, `localize` → `getLocalizedString` + +```tsx +import { CalendarObject } from "@cometchat/chat-uikit-react"; + +// New date formatting approach + +``` + + ## Conversations ### New Properties @@ -92,3 +118,22 @@ title: "Property Changes" | setDefaultLanguage | Sets the default lannguage if no language is passed in init method. | | isRTL | Returns true if the active language is rtl otherwise return false. | | getDir | Returns `rtl` or `ltr` based on the active language. | + +--- + +## Next Steps + + + + Complete migration guide with step-by-step instructions for upgrading. + + + Configure language settings and translations in your app. + + + Customize colors, fonts, and styling to match your brand. + + + Explore all available UI components and their properties. + + diff --git a/ui-kit/react/react-router-conversation.mdx b/ui-kit/react/react-router-conversation.mdx index 8b90fa5f5..a9c2ebad9 100644 --- a/ui-kit/react/react-router-conversation.mdx +++ b/ui-kit/react/react-router-conversation.mdx @@ -1,8 +1,42 @@ --- title: "Building A Conversation List + Message View" sidebarTitle: "Conversation List + Message View" +description: "Build a two-panel chat interface with conversation list sidebar and message view for React Router applications." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```tsx +import { + CometChatConversations, + CometChatMessageHeader, + CometChatMessageList, + CometChatMessageComposer +} from "@cometchat/chat-uikit-react"; + +// Two-panel layout: Sidebar + Message View +
+ {/* Sidebar */} + setActiveChat(conversation)} + /> + + {/* Message View */} +
+ + + +
+
+``` + +- **React Router Integration** → [Getting Started](/ui-kit/react/react-router-integration) +- **One-to-One Chat** → [One-to-One Chat](/ui-kit/react/react-router-one-to-one-chat) +- **Tab-Based Chat** → [Tab-Based Chat](/ui-kit/react/react-router-tab-based-chat) + + The **Conversation List + Message View** layout offers a seamless **two-panel chat interface**, commonly used in modern messaging applications like **WhatsApp Web, Slack, and Microsoft Teams**. This design enables users to switch between conversations effortlessly while keeping the chat window open, ensuring a **smooth, real-time messaging experience**. @@ -465,10 +499,19 @@ a { *** -## **Next Steps** - -### **Enhance the User Experience** - -* **[Advanced Customizations](/ui-kit/react/theme)** – Personalize the chat UI to align with your brand. - -*** +## Next Steps + + + + Build a focused direct messaging experience without a sidebar. + + + Create a multi-feature navigation with chats, calls, and settings. + + + Personalize the chat UI to align with your brand. + + + Explore all available UI components and their properties. + + diff --git a/ui-kit/react/react-router-integration.mdx b/ui-kit/react/react-router-integration.mdx index af2432431..f5eb250a4 100644 --- a/ui-kit/react/react-router-integration.mdx +++ b/ui-kit/react/react-router-integration.mdx @@ -1,8 +1,44 @@ --- title: "Getting Started With CometChat React UI Kit For React Router" sidebarTitle: "Integration" +description: "Step-by-step guide to integrate CometChat React UI Kit with React Router for building chat applications." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```bash +# Install +npm install @cometchat/chat-uikit-react +``` + +```tsx +import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; +import "@cometchat/chat-uikit-react/css-variables.css"; + +// Initialize +const UIKitSettings = new UIKitSettingsBuilder() + .setAppId("APP_ID") + .setRegion("REGION") + .setAuthKey("AUTH_KEY") + .subscribePresenceForAllUsers() + .build(); + +await CometChatUIKit.init(UIKitSettings); + +// Login +await CometChatUIKit.login("cometchat-uid-1"); + +// Render (disable SSR for CometChat components) + console.log(conversation)} /> +``` + +- **Conversation List + Message** → [Conversation View](/ui-kit/react/react-router-conversation) +- **One-to-One Chat** → [One-to-One Chat](/ui-kit/react/react-router-one-to-one-chat) +- **Tab-Based Chat** → [Tab-Based Chat](/ui-kit/react/react-router-tab-based-chat) + + The **CometChat UI Kit for React** streamlines the integration of in-app chat functionality by providing a **comprehensive set of prebuilt UI components**. It offers seamless **theming options**, including **light and dark modes**, customizable fonts, colors, and extensive styling capabilities. With built-in support for **one-to-one and group conversations**, developers can efficiently enable chat features within their applications. Follow this guide to **quickly integrate chat functionality** using the CometChat React UI Kit. diff --git a/ui-kit/react/react-router-one-to-one-chat.mdx b/ui-kit/react/react-router-one-to-one-chat.mdx index adfd56641..5433bd0c1 100644 --- a/ui-kit/react/react-router-one-to-one-chat.mdx +++ b/ui-kit/react/react-router-one-to-one-chat.mdx @@ -1,8 +1,33 @@ --- title: "Building A One To One/Group Chat Experience" sidebarTitle: "One To One/Group Chat" +description: "Build a focused direct messaging interface for support chats, dating apps, and private messaging in React Router applications." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```tsx +import { + CometChatMessageHeader, + CometChatMessageList, + CometChatMessageComposer +} from "@cometchat/chat-uikit-react"; + +// One-to-One Chat Layout +
+ + + +
+``` + +- **React Router Integration** → [Getting Started](/ui-kit/react/react-router-integration) +- **Conversation List + Message** → [Conversation View](/ui-kit/react/react-router-conversation) +- **Tab-Based Chat** → [Tab-Based Chat](/ui-kit/react/react-router-tab-based-chat) + + The **One-to-One Chat** feature provides a streamlined **direct messaging interface**, making it ideal for **support chats, dating apps, and private messaging platforms**. This setup eliminates distractions by focusing solely on a **dedicated chat window**. *** @@ -335,10 +360,19 @@ a { *** -## **Next Steps** - -### **Enhance the User Experience** - -* **[Advanced Customizations](/ui-kit/react/theme)** – Personalize the chat UI to align with your brand. - -*** +## Next Steps + + + + Build a two-panel layout with sidebar and message view. + + + Create a multi-feature navigation with chats, calls, and settings. + + + Personalize the chat UI to align with your brand. + + + Explore all available UI components and their properties. + + diff --git a/ui-kit/react/react-router-tab-based-chat.mdx b/ui-kit/react/react-router-tab-based-chat.mdx index aae298cf8..13e7c1025 100644 --- a/ui-kit/react/react-router-tab-based-chat.mdx +++ b/ui-kit/react/react-router-tab-based-chat.mdx @@ -1,8 +1,28 @@ --- title: "Building A Messaging UI With Tabs, Sidebar, And Message View" sidebarTitle: "Tab Based Chat Experience" +description: "Build a tab-based messaging UI with sections for Chats, Calls, Users, and Groups using React Router and CometChat UIKit." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```tsx +import { CometChatConversations, CometChatCallLogs, CometChatUsers, CometChatGroups } from "@cometchat/chat-uikit-react"; + +// Tab-based navigation components + handleSelect(conversation)} /> // Chats tab + handleSelect(call)} /> // Calls tab + handleSelect(user)} /> // Users tab + handleSelect(group)} /> // Groups tab +``` + +- **React Router Integration** → [Getting Started](/ui-kit/react/react-router-integration) +- **Conversation List + Message** → [Conversation View](/ui-kit/react/react-router-conversation) +- **One-to-One Chat** → [One-to-One Chat](/ui-kit/react/react-router-one-to-one-chat) + + This guide walks you through creating a **tab-based messaging UI** using **React** and **CometChat UIKit**. The UI will include different sections for **Chats, Calls, Users, and Groups**, allowing seamless navigation. *** @@ -705,10 +725,19 @@ a { *** -## **Next Steps** - -### **Enhance the User Experience** - -* **[Advanced Customizations](/ui-kit/react/theme)** – Personalize the chat UI to align with your brand. - -*** +## Next Steps + + + + Build a two-panel layout with sidebar and message view. + + + Create a focused direct messaging experience. + + + Personalize the chat UI to align with your brand. + + + Learn about call logs customization. + + diff --git a/ui-kit/react/search.mdx b/ui-kit/react/search.mdx index 02879766c..11cd54a93 100644 --- a/ui-kit/react/search.mdx +++ b/ui-kit/react/search.mdx @@ -1,9 +1,33 @@ --- title: "Search" +description: "A powerful search component that allows users to search across conversations and messages in real time with filters and customization options." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```tsx +import { CometChatSearch } from "@cometchat/chat-uikit-react"; + +// Minimal usage + + +// With common props + openConversation(conversation)} + onMessageClicked={(message) => goToMessage(message)} + searchFilters={[CometChatSearchFilter.Messages, CometChatSearchFilter.Photos]} +/> +``` + + ## Overview + +**Available via:** [UI Kits](https://www.cometchat.com/docs/ui-kit/react/overview) + + The `CometChatSearch` component is a powerful and customizable search interface that allows users to search across conversations and messages in real time. It supports a wide variety of filters, scopes, and customization options. `CometChatSearch` helps users find messages, conversations, media, and more through an intuitive and filterable search experience. It can be embedded in multiple contexts — as part of the conversation list, message header, or as a full-screen search experience. ## Usage @@ -799,3 +823,22 @@ function getDateFormat() { #### Text Formatters Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source. + +--- + +## Next Steps + + + + Display and manage conversation lists with search. + + + Display messages with real-time updates. + + + Compose and send messages with attachments. + + + Customize colors, fonts, and styling. + + diff --git a/ui-kit/react/shortcut-formatter-guide.mdx b/ui-kit/react/shortcut-formatter-guide.mdx index b6c5d3810..334876208 100644 --- a/ui-kit/react/shortcut-formatter-guide.mdx +++ b/ui-kit/react/shortcut-formatter-guide.mdx @@ -1,7 +1,32 @@ --- title: "ShortCut Formatter" +description: "A guide to implementing shortcut extensions in CometChat using the ShortCutFormatter class for handling message shortcuts." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```tsx +import { CometChatTextFormatter } from "@cometchat/chat-uikit-react"; +import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; + +// Create custom shortcut formatter +class ShortcutFormatter extends CometChatTextFormatter { + constructor() { + super(); + this.setTrackingCharacter("!"); + } +} + +// Use in Message Composer + +``` + +- **Custom Text Formatter** → [CometChatTextFormatter](/ui-kit/react/custom-text-formatter-guide) +- **Message Composer** → [CometChatMessageComposer](/ui-kit/react/message-composer) + + ## Overview The `ShortCutFormatter` class extends the [CometChatTextFormatter](/ui-kit/react/custom-text-formatter-guide) class to provide a mechanism for handling shortcuts within messages. This guide will walk you through the process of using `ShortCutFormatter` to implement shortcut extensions in your CometChat application. @@ -270,4 +295,21 @@ import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; -*** +--- + +## Next Steps + + + + Learn the base class for creating custom formatters. + + + Implement @mentions in your chat application. + + + Auto-detect and format URLs as clickable links. + + + Integrate formatters with the message composer. + + diff --git a/ui-kit/react/sound-manager.mdx b/ui-kit/react/sound-manager.mdx index d0b5f0c20..b90e7de7f 100644 --- a/ui-kit/react/sound-manager.mdx +++ b/ui-kit/react/sound-manager.mdx @@ -1,7 +1,26 @@ --- title: "Sound Manager" +description: "A helper class for managing and playing audio sounds for incoming and outgoing calls in CometChat UI Kit." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```tsx +import { CometChatSoundManager, Sound } from "@cometchat/chat-uikit-react"; + +// Play default sound for incoming call +CometChatSoundManager.play(Sound.incomingCall); + +// Play custom sound +CometChatSoundManager.play(Sound.incomingCall, "path/to/custom-sound.mp3"); + +// Pause currently playing sound +CometChatSoundManager.pause(); +``` + + ## Overview The SoundManager is a helper class responsible for managing and playing various types of audio in the CometChat UI Kit. This includes sound events for incoming and outgoing calls. @@ -60,3 +79,22 @@ CometChatSoundManager.pause(); By using the CometChatSoundManager, you can enhance the user experience in your chat application by integrating audible cues for chat interactions. + +--- + +## Next Steps + + + + Customize colors, fonts, and styling. + + + Configure language settings and translations. + + + Handle incoming voice and video calls. + + + Manage outgoing call UI and sounds. + + diff --git a/ui-kit/react/thread-header.mdx b/ui-kit/react/thread-header.mdx index 9f4cf3279..56282a4da 100644 --- a/ui-kit/react/thread-header.mdx +++ b/ui-kit/react/thread-header.mdx @@ -1,9 +1,33 @@ --- title: "Thread Header" +description: "A component that displays the parent message and reply count for threaded conversations." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```tsx +import { CometChatThreadHeader } from "@cometchat/chat-uikit-react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; + +// Get parent message +const message = await CometChat.getMessageDetails("messageId"); + +// Render thread header + handleClose()} +/> +``` + + ## Overview + +**Available via:** [UI Kits](https://www.cometchat.com/docs/ui-kit/react/overview) | [SDK](https://www.cometchat.com/docs/sdk/javascript/overview) + + CometChatThreadHeader is a Component that displays the parent message & number of replies of thread. @@ -349,4 +373,21 @@ function getDateFormat() { -*** +--- + +## Next Steps + + + + Display messages with threading support. + + + Display conversation header with user/group info. + + + Complete guide to implementing threaded messages. + + + Customize colors, fonts, and styling. + + diff --git a/ui-kit/react/upgrading-from-v5.mdx b/ui-kit/react/upgrading-from-v5.mdx index c8308a80f..c25b19ae6 100644 --- a/ui-kit/react/upgrading-from-v5.mdx +++ b/ui-kit/react/upgrading-from-v5.mdx @@ -1,7 +1,29 @@ --- title: "Upgrading From V5" +description: "Migration guide for upgrading from CometChat v5 to v6 React UI Kit with updated localization, date formatting, and API changes." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +Key changes in v6: +- **Initialization**: `init(language, resources)` → `init(settings: LocalizationSettings)` +- **Language codes**: `en` → `en-US`, `en-GB` +- **Add translations**: Use `addTranslation()` method +- **Date formatting**: New `CalendarObject` support +- **Missing keys**: New `missingKeyHandler` callback + +```tsx +// v6 initialization +CometChatLocalize.init({ + language: "en-US", + translationsForLanguage: { "en-US": { conversation_chat_title: "Chats" } }, + calendarObject: new CalendarObject({ today: "hh:mm A" }), +}); +``` + + ## Introduction The **CometChat v6 React UI Kit** introduces a **revamped localization system** with enhanced support for **language management, date formatting, and missing key handling**. This guide outlines the key differences and provides a **step-by-step migration process** from **v5 to v6**. @@ -151,3 +173,22 @@ In CometChat v6 UI Kit, the language codes have been expanded to distinguish bet ## Properties & Methods In CometChat v6 UI Kit, several props and methods in components and the CometChatLocalize class have been updated. For a detailed overview of newly added, renamed, and removed properties/methods, refer to the [Property Changes](/ui-kit/react/property-changes) Documentation. + +--- + +## Next Steps + + + + Detailed list of property changes in v6. + + + Configure language settings and translations. + + + Customize colors, fonts, and styling. + + + Explore all available UI components. + + diff --git a/ui-kit/react/url-formatter-guide.mdx b/ui-kit/react/url-formatter-guide.mdx index 0707d3b05..c5123d74a 100644 --- a/ui-kit/react/url-formatter-guide.mdx +++ b/ui-kit/react/url-formatter-guide.mdx @@ -1,7 +1,31 @@ --- title: "URL Formatter" +description: "A specialized formatter that automatically detects URLs in text messages and converts them into clickable links." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```tsx +import { CometChatTextFormatter } from "@cometchat/chat-uikit-react"; + +// Create URL formatter extending CometChatTextFormatter +class CometChatUrlsFormatter extends CometChatTextFormatter { + constructor(regexPatterns) { + super(); + this.setRegexPatterns(regexPatterns); + } +} + +// Usage +const urlFormatter = new CometChatUrlsFormatter([/(https?:\/\/[^\s]+)/g]); +``` + +- **Custom Text Formatter** → [CometChatTextFormatter](/ui-kit/react/custom-text-formatter-guide) +- **Message List** → [CometChatMessageList](/ui-kit/react/message-list) + + ## Overview `CometChatUrlsFormatter` is a specialized subclass of `CometChatTextFormatter` designed to automatically detect URLs in text messages and convert them into clickable links, allowing users to navigate to the web addresses effortlessly within your CometChat application. @@ -83,3 +107,23 @@ onUrlClick(event) { window.open(url, '_blank'); } ``` + +--- + +## Next Steps + + + + Learn the base class for creating custom formatters. + + + Implement @mentions in your chat application. + + + Create keyboard shortcuts for quick text insertion. + + + Display messages with formatted URLs. + + +``` From db16dce096d4eb4a93cf60af73b0fe840536bc4d Mon Sep 17 00:00:00 2001 From: aanshisingh-cometchat Date: Fri, 13 Feb 2026 19:46:27 +0530 Subject: [PATCH 04/59] improve the sequence --- fundamentals/extensions-overview.mdx | 38 ++++---- ui-kit/react/core-features.mdx | 48 +++++----- ui-kit/react/extensions.mdx | 138 ++++++++++++++++++++------- 3 files changed, 149 insertions(+), 75 deletions(-) diff --git a/fundamentals/extensions-overview.mdx b/fundamentals/extensions-overview.mdx index d6e58d1dd..3aa338a73 100644 --- a/fundamentals/extensions-overview.mdx +++ b/fundamentals/extensions-overview.mdx @@ -11,32 +11,32 @@ Extensions pickup where our core leaves. They help extend the functionality of C Extensions that help improve the user messaging experience. *Recommended for most apps.* -[Pin message](/fundamentals/pin-message)\ [Bitly](/fundamentals/bitly)\ -[Avatars](/fundamentals/avatars)\ -[Message shortcuts](/fundamentals/message-shortcuts)\ [Link Preview](/fundamentals/link-preview)\ +[Message shortcuts](/fundamentals/message-shortcuts)\ +[Pin message](/fundamentals/pin-message)\ [Rich Media Preview](/fundamentals/rich-media-preview)\ [Save message](/fundamentals/save-message)\ [Thumbnail Generation](/fundamentals/thumbnail-generation)\ [TinyURL](/fundamentals/tinyurl)\ -[Voice Transcription](/fundamentals/voice-transcription) +[Voice Transcription](/fundamentals/voice-transcription)\ +[Avatars](/fundamentals/avatars) ### User Engagement Extensions that help increase user engagement. *Recommended for advanced apps.* -[Email replies](/fundamentals/email-replies)\ -[Polls](/fundamentals/polls)\ [Giphy](/fundamentals/giphy)\ -[Mentions](/fundamentals/mentions)\ [Message Translation](/fundamentals/message-translation)\ -[Reactions](/fundamentals/reactions)\ -[Smart Reply](/fundamentals/smart-replies)\ +[Polls](/fundamentals/polls)\ +[Reminders](/fundamentals/reminders)\ [Stickers](/fundamentals/stickers)\ [Stipop](/fundamentals/stickers-stipop)\ [Tenor](/fundamentals/tenor)\ -[Reminders](/fundamentals/reminders)\ +[Email replies](/fundamentals/email-replies)\ +[Mentions](/fundamentals/mentions)\ +[Reactions](/fundamentals/reactions)\ +[Smart Reply](/fundamentals/smart-replies)\ [Live Streaming by api.video](/fundamentals/video-broadcasting) ### Collaboration @@ -46,12 +46,19 @@ Extensions that help with collaboration. *Recommended for advanced apps.* [Collaborative Whiteboard](/fundamentals/collaborative-whiteboard)\ [Collaborative Document](/fundamentals/collaborative-document) +### Security + +*Extensions that help you to build adding extra security to your apps.* *Recommended for live streaming and event apps.* + +[Disappearing messages](/fundamentals/disappearing-messages)\ +[End to End Encryption](/fundamentals/end-to-end-encryption) + ### Customer Support Extensions that help you add support to your app. *Recommended for advanced apps.* -[Intercom](/fundamentals/intercom)\ -[Chatwoot](/fundamentals/chatwoot) +[Chatwoot](/fundamentals/chatwoot)\ +[Intercom](/fundamentals/intercom) ### Notifications @@ -66,10 +73,3 @@ Extensions that help alert users of new messages. *Recommended for all apps.* *Extensions that help you to build a safe messaging environment.* *Recommended for live streaming and event apps.* [Legacy Moderation Extensions](/moderation/legacy-extensions) - -### Security - -*Extensions that help you to build adding extra security to your apps.* *Recommended for live streaming and event apps.* - -[Disappearing messages](/fundamentals/disappearing-messages)\ -[End to End Encryption](/fundamentals/end-to-end-encryption) diff --git a/ui-kit/react/core-features.mdx b/ui-kit/react/core-features.mdx index f59723681..d3d1f1458 100644 --- a/ui-kit/react/core-features.mdx +++ b/ui-kit/react/core-features.mdx @@ -133,45 +133,40 @@ Mentions is a robust feature provided by CometChat that enhances the interactivi | [Message Composer](/ui-kit/react/message-composer) | [Message Composer](/ui-kit/react/message-composer) is a component that allows users to craft and send various types of messages, including the usage of the mentions feature for direct addressing within the conversation. | | [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) is a component that displays a list of sent and received messages. It also supports the rendering of Mentions, enhancing the readability and interactivity of conversations. | -## Quoted Reply +## Threaded Conversations -Quoted Reply is a robust feature provided by CometChat that enables users to quickly reply to specific messages by selecting the "Reply" option from a message's action menu. This enhances context, keeps conversations organized, and improves overall chat experience in both 1-1 and group chats. +The Threaded Conversations feature enables users to respond directly to a specific message in a chat. This keeps conversations organized and enhances the user experience by maintaining context, especially in group chats. - + -| Components | Functionality | -| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) supports replying to messages via the "Reply" option. Users can select "Reply" on a message to open the composer with the quoted reply pre-filled, maintaining context. | -| [Message Composer](/ui-kit/react/message-composer) | [Message Composer](/ui-kit/react/message-composer) works seamlessly with Quoted Message by showing the quoted reply above the input field, letting users compose their response in proper context. | +| Components | Functionality | +| ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | +| [Threaded Message Preview](/ui-kit/react/threaded-message-preview) | [Threaded Message Preview](/ui-kit/react/threaded-message-preview) component displays the parent message along with the number of replies. | -## Conversation and Advanced Search +## Quoted Replies -Conversation and Advanced Search is a powerful feature provided by CometChat that enables users to quickly find conversations, messages, and media across chats in real time. It supports filters, scopes, and custom actions, allowing users to locate content efficiently while keeping the chat experience smooth and intuitive. +Quoted Replies is a robust feature provided by CometChat that enables users to quickly reply to specific messages by selecting the "Reply" option from a message's action menu. This enhances context, keeps conversations organized, and improves overall chat experience in both 1-1 and group chats. - + | Components | Functionality | | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Search](/ui-kit/react/search) | [Search](/ui-kit/react/search) allows users to search across conversations and messages in real time. Users can click on a result to open the conversation or jump directly to a specific message. | -| [Message Header](/ui-kit/react/message-header) | [Message Header](/ui-kit/react/message-header) shows the search button in the chat header, allowing users to search within a conversation. | -| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) shows the selected message when clicked from search results and highlights it in the message list. | -| [Conversations](/ui-kit/react/conversations) | [Conversations](/ui-kit/react/conversations) displays the search input. | +| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) supports replying to messages via the "Reply" option. Users can select "Reply" on a message to open the composer with the quoted reply pre-filled, maintaining context. | +| [Message Composer](/ui-kit/react/message-composer) | [Message Composer](/ui-kit/react/message-composer) works seamlessly with Quoted Message by showing the quoted reply above the input field, letting users compose their response in proper context. | -## Threaded Conversations +## Group Chat -The Threaded Conversations feature enables users to respond directly to a specific message in a chat. This keeps conversations organized and enhances the user experience by maintaining context, especially in group chats. +CometChat facilitates Group Chats, allowing users to have conversations with multiple participants simultaneously. This feature is crucial for team collaborations, group discussions, social communities, and more. - + -| Components | Functionality | -| ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | -| [Threaded Message Preview](/ui-kit/react/threaded-message-preview) | [Threaded Message Preview](/ui-kit/react/threaded-message-preview) component displays the parent message along with the number of replies. | +For a comprehensive understanding and guide on implementing and using the Groups feature in CometChat, you should refer to our detailed guide on [Groups](/ui-kit/react/groups). ## Moderation @@ -207,15 +202,20 @@ Learn more about how flagged messages are handled, reviewed, and moderated in th | ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) provides the "Report Message" option in the message actions menu, allowing users to initiate the reporting process for inappropriate messages. | -## Group Chat +## Conversation and Advanced Search -CometChat facilitates Group Chats, allowing users to have conversations with multiple participants simultaneously. This feature is crucial for team collaborations, group discussions, social communities, and more. +Conversation and Advanced Search is a powerful feature provided by CometChat that enables users to quickly find conversations, messages, and media across chats in real time. It supports filters, scopes, and custom actions, allowing users to locate content efficiently while keeping the chat experience smooth and intuitive. - + -For a comprehensive understanding and guide on implementing and using the Groups feature in CometChat, you should refer to our detailed guide on [Groups](/ui-kit/react/groups). +| Components | Functionality | +| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [Search](/ui-kit/react/search) | [Search](/ui-kit/react/search) allows users to search across conversations and messages in real time. Users can click on a result to open the conversation or jump directly to a specific message. | +| [Message Header](/ui-kit/react/message-header) | [Message Header](/ui-kit/react/message-header) shows the search button in the chat header, allowing users to search within a conversation. | +| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) shows the selected message when clicked from search results and highlights it in the message list. | +| [Conversations](/ui-kit/react/conversations) | [Conversations](/ui-kit/react/conversations) displays the search input. | --- diff --git a/ui-kit/react/extensions.mdx b/ui-kit/react/extensions.mdx index af2cee91e..b7a57b77b 100644 --- a/ui-kit/react/extensions.mdx +++ b/ui-kit/react/extensions.mdx @@ -8,13 +8,22 @@ description: "Overview of CometChat built-in extensions including stickers, poll **Quick Reference for AI Agents & Developers** Built-in extensions (enable via Dashboard): -- **Stickers** → Fun expression in Message Composer +- **Bitly** → Shorten URLs in messages +- **Link Preview** → URL summaries in Message List +- **Message Shortcuts** → Predefined quick messages +- **Pin Message** → Pin important messages +- **Rich Media Preview** → Rich URL previews +- **Save Message** → Bookmark messages +- **Thumbnail Generation** → Image previews +- **TinyURL** → URL shortening +- **Voice Transcription** → Audio to text +- **Giphy** → GIF sharing +- **Message Translation** → Auto-translate messages - **Polls** → Group voting in Message Composer +- **Stickers** → Fun expression in Message Composer - **Collaborative Whiteboard** → Real-time drawing - **Collaborative Document** → Shared document editing -- **Message Translation** → Auto-translate messages -- **Link Preview** → URL summaries in Message List -- **Thumbnail Generation** → Image previews +- **Disappearing Messages** → Auto-delete messages Extensions auto-integrate with UI Kit components after Dashboard activation. @@ -31,20 +40,76 @@ Activating extensions within CometChat is a straightforward process through your Once you've enabled your desired extension in the dashboard, it seamlessly integrates into your CometChat application upon initialization and successful login. It's important to note that extension features will only be available if they are supported by the CometChat UI Kit. -CometChat's UI Kit provides native support for 12 powerful extensions. This effortless integration enables you to enhance your chat application with engaging features without any additional coding. Simply enable the desired extensions from the CometChat Dashboard, and they will automatically enhance the relevant components of your application, providing a richer and more engaging experience for your users. +CometChat's UI Kit provides native support for a wide range of powerful extensions. This effortless integration enables you to enhance your chat application with engaging features without any additional coding. Simply enable the desired extensions from the CometChat Dashboard, and they will automatically enhance the relevant components of your application, providing a richer and more engaging experience for your users. ## Built-in Extensions Here's a guide on how you can enable and integrate these extensions: -### Stickers +### Bitly -The Stickers extension allows users to express their emotions more creatively. It adds a much-needed fun element to the chat by allowing users to send various pre-designed stickers. For a comprehensive understanding and guide on implementing and using the Sticker Extension, refer to our specific guide on the [Sticker Extension](/fundamentals/stickers). +The Bitly extension allows you to shorten long URLs in your text messages using Bitly's URL shortening service. For a comprehensive understanding and guide on implementing and using the Bitly Extension, refer to our specific guide on the [Bitly Extension](/fundamentals/bitly). -Once you have successfully activated the [Sticker Extension](/fundamentals/stickers) from your CometChat Dashboard, the feature will automatically be incorporated into the [Message Composer](/ui-kit/react/message-composer) component of UI Kits. +### Link Preview + +The Link Preview extension provides a summary of the URL shared in the chat. It includes the title, a description, and a thumbnail image from the web page. For a comprehensive understanding and guide on implementing and using the Link Preview Extension, refer to our specific guide on the [Link Preview Extension](/fundamentals/link-preview). + +Once you have successfully activated the [Link Preview Extension](/fundamentals/link-preview) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/react/message-list) component of UI Kits. - + + + +### Message Shortcuts + +The Message Shortcuts extension enables users to send predefined messages using short codes. For example, typing `!hb` can automatically expand to `Happy birthday!`. For a comprehensive understanding and guide on implementing and using the Message Shortcuts Extension, refer to our specific guide on the [Message Shortcuts Extension](/fundamentals/message-shortcuts). + +### Pin Message + +The Pin Message extension allows users to pin important messages in a conversation, making them easily accessible for all participants. For a comprehensive understanding and guide on implementing and using the Pin Message Extension, refer to our specific guide on the [Pin Message Extension](/fundamentals/pin-message). + +### Rich Media Preview + +The Rich Media Preview extension generates rich preview panels for URLs shared in messages, fetching detailed information from popular sites using iFramely. For a comprehensive understanding and guide on implementing and using the Rich Media Preview Extension, refer to our specific guide on the [Rich Media Preview Extension](/fundamentals/rich-media-preview). + +### Save Message + +The Save Message extension allows users to bookmark messages for later reference. Saved messages are private and visible only to the user who saved them. For a comprehensive understanding and guide on implementing and using the Save Message Extension, refer to our specific guide on the [Save Message Extension](/fundamentals/save-message). + +### Thumbnail Generation + +The Thumbnail Generation extension automatically creates a smaller preview image whenever a larger image is shared, helping to reduce the upload/download time and bandwidth usage. For a comprehensive understanding and guide on implementing and using the Thumbnail Generation Extension, refer to our specific guide on the [Thumbnail Generation Extension](/fundamentals/thumbnail-generation). + +Once you have successfully activated the [Thumbnail Generation Extension](/fundamentals/thumbnail-generation) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/react/message-list) component of UI Kits. + + + + + +### TinyURL + +The TinyURL extension provides URL shortening capabilities for messages, similar to Bitly but using the TinyURL service. For a comprehensive understanding and guide on implementing and using the TinyURL Extension, refer to our specific guide on the [TinyURL Extension](/fundamentals/tinyurl). + +### Voice Transcription + +The Voice Transcription extension converts audio messages into text, making it easier to read voice messages without playing them. For a comprehensive understanding and guide on implementing and using the Voice Transcription Extension, refer to our specific guide on the [Voice Transcription Extension](/fundamentals/voice-transcription). + +### User Management + +The Avatars extension allows end-users to upload avatar images for their profiles directly within CometChat. For a comprehensive understanding and guide on implementing and using the Avatars Extension, refer to our specific guide on the [Avatars Extension](/fundamentals/avatars). + +### Giphy + +The Giphy extension allows users to search for and share GIFs in their conversations, adding a fun and expressive element to chats. For a comprehensive understanding and guide on implementing and using the Giphy Extension, refer to our specific guide on the [Giphy Extension](/fundamentals/giphy). + +### Message Translation + +The Message Translation extension in CometChat is designed to translate any message into your local locale. It eliminates language barriers, making the chat more inclusive. For a comprehensive understanding and guide on implementing and using the Message Translation Extension, refer to our specific guide on the [Message Translation Extension](/fundamentals/message-translation). + +Once you have successfully activated the [Message Translation Extension](/fundamentals/message-translation) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of [MessageList Component](/ui-kit/react/message-list) component of UI Kits. + + + ### Polls @@ -57,6 +122,30 @@ Once you have successfully activated the [Polls Extension](/fundamentals/polls) +### Reminders + +The Reminders extension allows users to set reminders for messages or create personal reminders. When a reminder is due, a bot sends a notification message to the user. For a comprehensive understanding and guide on implementing and using the Reminders Extension, refer to our specific guide on the [Reminders Extension](/fundamentals/reminders). + +### Stickers + +The Stickers extension allows users to express their emotions more creatively. It adds a much-needed fun element to the chat by allowing users to send various pre-designed stickers. For a comprehensive understanding and guide on implementing and using the Sticker Extension, refer to our specific guide on the [Sticker Extension](/fundamentals/stickers). + +Once you have successfully activated the [Sticker Extension](/fundamentals/stickers) from your CometChat Dashboard, the feature will automatically be incorporated into the [Message Composer](/ui-kit/react/message-composer) component of UI Kits. + + + + + +### Stipop + +The Stipop extension integrates the world's trendiest sticker platform into your chat, allowing users to search for and send stickers from Stipop's extensive library. For a comprehensive understanding and guide on implementing and using the Stipop Extension, refer to our specific guide on the [Stipop Extension](/fundamentals/stickers-stipop). + +### Tenor + +The Tenor extension allows users to search for and share GIFs from Tenor's library in their conversations. For a comprehensive understanding and guide on implementing and using the Tenor Extension, refer to our specific guide on the [Tenor Extension](/fundamentals/tenor). + +## Collaboration + ### Collaborative Whiteboard The Collaborative Whiteboard extension facilitates real-time collaboration. Users can draw, brainstorm, and share ideas on a shared digital whiteboard. For a comprehensive understanding and guide on implementing and using the Collaborative Whiteboard Extension, refer to our specific guide on the [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard). @@ -77,36 +166,21 @@ Once you have successfully activated the [Collaborative Document Extension](/fun -### 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). +## Security -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. +### Disappearing Messages - - - +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). -### Link Preview +## Customer Support -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). +### Chatwoot -Once you have successfully activated the [Link Preview Extension](/fundamentals/link-preview) from your CometChat Dashboard, the feature will automatically be incorporated into the Message Bubble of [MessageList Component](/ui-kit/react/message-list) component of UI Kits. +The Chatwoot extension makes customer support seamless by allowing your users to communicate with your support team directly through CometChat, eliminating the need for a separate support interface. For a comprehensive understanding and guide on implementing and using the Chatwoot Extension, refer to our specific guide on the [Chatwoot Extension](/fundamentals/chatwoot). - - - - -### 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. - - - - +### 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). --- From 70bff0c15682dfa5ed8d6e98010b12e6d77e5c2d Mon Sep 17 00:00:00 2001 From: aanshisingh-cometchat Date: Mon, 16 Feb 2026 16:04:08 +0530 Subject: [PATCH 05/59] improve the theme folder documentation --- ui-kit/react/theme/color-resources.mdx | 84 +++++++- ui-kit/react/theme/message-bubble-styling.mdx | 179 ++++++++++++++---- 2 files changed, 218 insertions(+), 45 deletions(-) diff --git a/ui-kit/react/theme/color-resources.mdx b/ui-kit/react/theme/color-resources.mdx index d52c5779c..d018c45e9 100644 --- a/ui-kit/react/theme/color-resources.mdx +++ b/ui-kit/react/theme/color-resources.mdx @@ -1,26 +1,49 @@ --- title: "Color Resources" +description: "Complete reference of CSS color variables available in CometChat UI Kit for light and dark mode theming." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +```css +/* Primary brand color */ +--cometchat-primary-color: #6852d6; + +/* Extended primary palette (light mode) */ +--cometchat-extended-primary-color-50: #f9f8fd; /* Lightest */ +--cometchat-extended-primary-color-500: #aa9ee8; /* Mid */ +--cometchat-extended-primary-color-900: #5d49be; /* Darkest */ +``` + +- Override these in `.cometchat {}` or `:root {}` to rebrand the entire UI +- **Theming Overview** → [Theming](/ui-kit/react/theme) +- **Message Bubble Styling** → [Bubble Customization](/ui-kit/react/theme/message-bubble-styling) +- **Source on GitHub** → [css-variables.css](https://github.com/cometchat/cometchat-uikit-react/blob/v6/src/styles/css-variables.css#L198-L419) + + ## Introduction -The **Chat UI Kit** features a carefully crafted **color palette** designed for a **consistent and visually appealing** user experience. It follows the **Block, Element, Modifier (BEM)** methodology, ensuring **scalable styling** and easy **customization** by overriding the Kit’s CSS variables. +The Chat UI Kit features a carefully crafted color palette designed for a consistent and visually appealing user experience. It follows the Block, Element, Modifier (BEM) methodology, ensuring scalable styling and easy customization by overriding the Kit's CSS variables. *** ## Color Palette -The **primary color** defines key actions, branding, and UI elements, while the **extended primary palette** provides variations for supporting components. +The primary color defines key actions, branding, and UI elements, while the extended primary palette provides variations for supporting components. -### **Primary Color** +### Primary Color -#### **Light Mode** +#### Light Mode -```python + + +```css --cometchat-primary-color: #6852d6; --cometchat-extended-primary-color-50: #f9f8fd; --cometchat-extended-primary-color-100: #edeafa; @@ -33,16 +56,20 @@ The **primary color** defines key actions, branding, and UI elements, while the --cometchat-extended-primary-color-800: #7965db; --cometchat-extended-primary-color-900: #5d49be; ``` + + *** -#### **Dark Mode** +#### Dark Mode -```python + + +```css --cometchat-primary-color: #6852d6; --cometchat-extended-primary-color-50: #15102b; --cometchat-extended-primary-color-100: #1d173c; @@ -55,17 +82,54 @@ The **primary color** defines key actions, branding, and UI elements, while the --cometchat-extended-primary-color-800: #5745b4; --cometchat-extended-primary-color-900: #7460d9; ``` + + -### **Extended Primary Colors** +### Extended Primary Colors -#### **Light Mode** +#### Light Mode -#### **Dark Mode** +#### Dark Mode + +*** + + + +- Always override CSS variables within the `.cometchat` scope to avoid leaking styles to other parts of your app. +- When customizing for dark mode, use `@media (prefers-color-scheme: dark)` or the `[data-theme="dark"]` attribute to scope your overrides. +- Use the extended primary palette shades for hover states, backgrounds, and subtle accents rather than creating new colors. +- Test color contrast ratios to ensure text remains readable against custom background colors. + + +- **Colors not changing?** Make sure you've imported the base stylesheet first: `@import url("@cometchat/chat-uikit-react/css-variables.css");` +- **Dark mode colors showing in light mode?** Check that your dark mode overrides are properly scoped inside a media query or data-theme selector. +- **Inconsistent colors across components?** Use the extended primary palette variables instead of hardcoded hex values to maintain consistency. + + + +--- + +## Next Steps + + + + Global theming with CSS variables + + + Customize message bubble appearance + + + Customize text and date formats + + + Customize notification sounds + + diff --git a/ui-kit/react/theme/message-bubble-styling.mdx b/ui-kit/react/theme/message-bubble-styling.mdx index d95f2a1c0..0a4a42fba 100644 --- a/ui-kit/react/theme/message-bubble-styling.mdx +++ b/ui-kit/react/theme/message-bubble-styling.mdx @@ -1,14 +1,34 @@ --- title: "Message Bubble Styling" +description: "Customize the appearance of incoming and outgoing message bubbles in CometChat UI Kit using CSS variables and class overrides." --- -## Introduction +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** -We offer customizable message bubble styling to enhance user experience and match your app’s design. With distinct classes for incoming and outgoing messages, you can easily define colors, borders, and other styles. Each message type, from text to multimedia, has predefined classes for default styling, and developers can further customize using CSS. +```css +/* Outgoing bubble color */ +.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body { + --cometchat-primary-color: #f76808; +} + +/* Incoming bubble color */ +.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body { + --cometchat-neutral-color-300: #f76808; +} +``` + +- **CSS Variable Classes**: Target `.cometchat-message-bubble-outgoing` or `.cometchat-message-bubble-incoming` with `.cometchat-message-bubble__body` +- **Message type modifiers**: `.cometchat-message-bubble__text-message`, `.cometchat-message-bubble__image-message`, `.cometchat-message-bubble__video-message`, etc. +- **Parent theme page** → [Theming Overview](/ui-kit/react/theme) + + +We offer customizable message bubble styling to enhance user experience and match your app's design. With distinct classes for incoming and outgoing messages, you can easily define colors, borders, and other styles. Each message type, from text to multimedia, has predefined classes for default styling, and developers can further customize using CSS. ## Incoming & Outgoing Messages -Incoming and outgoing messages have different styling by default, allowing users to visually separate their own messages from others’. Here, we show both the default view and examples of customizations for these message bubbles. +Incoming and outgoing messages have different styling by default, allowing users to visually separate their own messages from others'. Here, we show both the default view and examples of customizations for these message bubbles. Shown below is the default chat interface. @@ -30,12 +50,16 @@ The customized chat interface is displayed below. Use the following code to achieve the customization shown above. -```css app.css + + +```css .cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body { --cometchat-primary-color: #f76808; --cometchat-extended-primary-color-900: #fbaa75; } ``` + + *** @@ -49,11 +73,15 @@ The customized chat interface is displayed below. Use the following code to achieve the customization shown above. -```css app.css + + +```css .cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body { --cometchat-neutral-color-300: #f76808; } ``` + + *** @@ -67,19 +95,23 @@ The customized chat interface is displayed below. Use the following code to achieve the customization shown above. -```css app.css + + +```css .cometchat .cometchat-message-bubble .cometchat-message-bubble__body { --cometchat-neutral-color-300: #f76808; --cometchat-primary-color: #f76808; --cometchat-extended-primary-color-900: #fbaa75; } ``` + + *** ## Message Types -CometChat UI Kit includes classes for various message types. Below are examples of default & customised views for each message type, along with the relevant CSS code snippets so that you can quickly up to the mark with CSS customization. +CometChat UI Kit includes classes for various message types. Below are examples of default & customised views for each message type, along with the relevant CSS code snippets so that you can quickly get up to speed with CSS customization. *** @@ -99,8 +131,9 @@ The customized chat interface is displayed below. Use the following code to achieve the customization shown above. -```css App.css - + + +```css /* Outgoing Text Message Bubble */ .cometchat .cometchat-message-bubble-outgoing @@ -115,6 +148,8 @@ Use the following code to achieve the customization shown above. --cometchat-neutral-color-300: #feede1; } ``` + + *** @@ -134,8 +169,9 @@ The customized chat interface is displayed below. Use the following code to achieve the customization shown above. -```css App.css - + + +```css /* Outgoing Image Message Bubble */ .cometchat .cometchat-message-bubble-outgoing @@ -150,6 +186,8 @@ Use the following code to achieve the customization shown above. --cometchat-neutral-color-300: #feede1; } ``` + + *** @@ -169,8 +207,9 @@ The customized chat interface is displayed below. Use the following code to achieve the customization shown above. -```css App.css - + + +```css /* Outgoing Video Message Bubble */ .cometchat .cometchat-message-bubble-outgoing @@ -185,6 +224,8 @@ Use the following code to achieve the customization shown above. --cometchat-neutral-color-300: #feede1; } ``` + + *** @@ -204,8 +245,9 @@ The customized chat interface is displayed below. Use the following code to achieve the customization shown above. -```css App.css - + + +```css /* Outgoing Audio Message Bubble */ .cometchat .cometchat-message-bubble-outgoing @@ -221,6 +263,8 @@ Use the following code to achieve the customization shown above. --cometchat-neutral-color-300: #feede1; } ``` + + *** @@ -240,8 +284,9 @@ The customized chat interface is displayed below. Use the following code to achieve the customization shown above. -```css App.css - + + +```css /* Outgoing File Message Bubble */ .cometchat .cometchat-message-bubble-outgoing @@ -257,6 +302,8 @@ Use the following code to achieve the customization shown above. --cometchat-neutral-color-300: #feede1; } ``` + + *** @@ -276,8 +323,9 @@ The customized chat interface is displayed below. Use the following code to achieve the customization shown above. -```css App.css - + + +```css /* Outgoing Delete Bubble */ .cometchat .cometchat-message-bubble-outgoing @@ -292,6 +340,8 @@ Use the following code to achieve the customization shown above. --cometchat-neutral-color-300: #feede1; } ``` + + *** @@ -311,8 +361,9 @@ The customized chat interface is displayed below. Use the following code to achieve the customization shown above. -```css App.css - + + +```css .cometchat .cometchat-message-bubble__body .cometchat-action-bubble { --cometchat-primary-color: #f76808; background-color: #feede1; @@ -321,6 +372,8 @@ Use the following code to achieve the customization shown above. --cometchat-border-color-default: #f76808; } ``` + + *** @@ -340,8 +393,9 @@ The customized chat interface is displayed below. Use the following code to achieve the customization shown above. -```css App.css - + + +```css /* Outgoing Direct Call Message Bubble */ .cometchat .cometchat-message-bubble-outgoing @@ -358,6 +412,8 @@ Use the following code to achieve the customization shown above. --cometchat-neutral-color-300: #feede1; } ``` + + *** @@ -377,8 +433,9 @@ The customized chat interface is displayed below. Use the following code to achieve the customization shown above. -```css App.css - + + +```css .cometchat .cometchat-message-bubble__body .cometchat-action-bubble { --cometchat-primary-color: #f76808; background-color: #feede1; @@ -387,6 +444,8 @@ Use the following code to achieve the customization shown above. --cometchat-border-color-default: #f76808; } ``` + + *** @@ -408,8 +467,9 @@ The customized chat interface is displayed below. Use the following code to achieve the customization shown above. -```css App.css - + + +```css /* Outgoing Collaborative Whiteboard Bubble */ .cometchat .cometchat-message-bubble-outgoing @@ -426,6 +486,8 @@ Use the following code to achieve the customization shown above. --cometchat-neutral-color-300: #feede1; } ``` + + *** @@ -445,8 +507,9 @@ The customized chat interface is displayed below. Use the following code to achieve the customization shown above. -```css App.css - + + +```css /* Outgoing Collaborative Document Bubble */ .cometchat .cometchat-message-bubble-outgoing @@ -463,6 +526,8 @@ Use the following code to achieve the customization shown above. --cometchat-neutral-color-300: #feede1; } ``` + + *** @@ -482,8 +547,9 @@ The customized chat interface is displayed below. Use the following code to achieve the customization shown above. -```css App.css - + + +```css /* Outgoing Poll Message Bubble */ .cometchat .cometchat-message-bubble-outgoing @@ -500,6 +566,8 @@ Use the following code to achieve the customization shown above. --cometchat-neutral-color-300: #feede1; } ``` + + *** @@ -519,8 +587,9 @@ The customized chat interface is displayed below. Use the following code to achieve the customization shown above. -```css App.css - + + +```css /* Outgoing Sticker Bubble */ .cometchat .cometchat-message-bubble-outgoing @@ -535,6 +604,8 @@ Use the following code to achieve the customization shown above. --cometchat-neutral-color-300: #feede1; } ``` + + *** @@ -554,8 +625,9 @@ The customized chat interface is displayed below. Use the following code to achieve the customization shown above. -```css App.css - + + +```css /* Outgoing Link Preview Bubble */ .cometchat .cometchat-message-bubble-outgoing @@ -572,5 +644,42 @@ Use the following code to achieve the customization shown above. --cometchat-neutral-color-300: #feede1; } ``` + + *** + + + +- Use CSS variables instead of direct property overrides for consistent theming across light and dark modes. +- Target specific message types using their BEM modifier classes (e.g., `.cometchat-message-bubble__text-message`) rather than broad selectors. +- Keep outgoing and incoming bubble styles visually distinct so users can easily differentiate their own messages. +- Test customizations in both light and dark themes to ensure readability and contrast. +- Use the `.cometchat` parent selector to scope your overrides and avoid conflicts with other styles. + + +- **Styles not applying?** Ensure your CSS is loaded after the CometChat stylesheet. Check selector specificity — your overrides must match or exceed the specificity of the default styles. +- **Only one direction styled?** Make sure you're targeting both `.cometchat-message-bubble-outgoing` and `.cometchat-message-bubble-incoming` if you want to style both. +- **Dark mode looks wrong?** Wrap dark mode overrides in `@media (prefers-color-scheme: dark)` or use the `[data-theme="dark"]` attribute selector. +- **Extension bubbles not styled?** Extension message types (polls, whiteboard, etc.) use their own modifier classes — check you're using the correct class name. + + + +--- + +## Next Steps + + + + Global theming with CSS variables + + + Complete list of CSS color variables + + + Customize text and date formats + + + Customize message rendering logic + + From 891c194e06edb06dee29b703a86b23c17c2bdf2a Mon Sep 17 00:00:00 2001 From: aanshisingh-cometchat Date: Tue, 17 Feb 2026 18:00:14 +0530 Subject: [PATCH 06/59] refactor: improve the uikit doc inorder to make it ai agent readable --- sdk/javascript/video-view-customisation.mdx | 66 ++- sdk/javascript/virtual-background.mdx | 69 ++- ui-kit/react/ai-assistant-chat.mdx | 67 ++- ui-kit/react/ai-features.mdx | 53 ++- ui-kit/react/astro-conversation.mdx | 59 ++- ui-kit/react/astro-integration.mdx | 52 +- ui-kit/react/astro-one-to-one-chat.mdx | 59 ++- ui-kit/react/astro-tab-based-chat.mdx | 55 ++- ui-kit/react/call-buttons.mdx | 54 ++- ui-kit/react/call-features.mdx | 49 +- ui-kit/react/call-logs.mdx | 62 ++- ui-kit/react/components-overview.mdx | 62 ++- ui-kit/react/conversations.mdx | 108 ++++- ui-kit/react/core-features.mdx | 57 ++- ui-kit/react/custom-text-formatter-guide.mdx | 50 +- ui-kit/react/events.mdx | 68 +-- ui-kit/react/extensions.mdx | 86 ++-- ui-kit/react/group-members.mdx | 75 ++- ui-kit/react/groups.mdx | 59 ++- ui-kit/react/guide-block-unblock-user.mdx | 56 +-- ui-kit/react/guide-call-log-details.mdx | 42 +- ui-kit/react/guide-group-chat.mdx | 49 +- ui-kit/react/guide-message-privately.mdx | 47 +- ui-kit/react/guide-new-chat.mdx | 44 +- ui-kit/react/guide-overview.mdx | 14 +- ui-kit/react/guide-search-messages.mdx | 49 +- ui-kit/react/guide-threaded-messages.mdx | 46 +- ui-kit/react/incoming-call.mdx | 58 ++- ui-kit/react/localize.mdx | 57 ++- ui-kit/react/mentions-formatter-guide.mdx | 42 +- ui-kit/react/message-composer.mdx | 64 ++- ui-kit/react/message-header.mdx | 57 ++- ui-kit/react/message-list.mdx | 62 ++- ui-kit/react/message-template.mdx | 71 +-- ui-kit/react/methods.mdx | 58 ++- ui-kit/react/next-conversation.mdx | 70 +-- ui-kit/react/next-js-integration.mdx | 51 +- ui-kit/react/next-one-to-one-chat.mdx | 59 ++- ui-kit/react/next-tab-based-chat.mdx | 75 +-- ui-kit/react/outgoing-call.mdx | 117 +++-- ui-kit/react/overview.mdx | 54 ++- ui-kit/react/property-changes.mdx | 35 +- ui-kit/react/react-conversation.mdx | 60 ++- ui-kit/react/react-js-integration.mdx | 54 ++- ui-kit/react/react-one-to-one-chat.mdx | 64 +-- ui-kit/react/react-router-conversation.mdx | 73 ++- ui-kit/react/react-router-integration.mdx | 59 ++- ui-kit/react/react-router-one-to-one-chat.mdx | 64 +-- ui-kit/react/react-router-tab-based-chat.mdx | 59 ++- ui-kit/react/react-tab-based-chat.mdx | 59 ++- ui-kit/react/search.mdx | 179 +++++-- ui-kit/react/shortcut-formatter-guide.mdx | 45 +- ui-kit/react/sound-manager.mdx | 49 +- ui-kit/react/theme.mdx | 109 ++++- ui-kit/react/theme/color-resources.mdx | 167 +++++-- ui-kit/react/theme/message-bubble-styling.mdx | 450 ++++++++++++++++-- ui-kit/react/thread-header.mdx | 100 ++-- ui-kit/react/upgrading-from-v5.mdx | 34 +- ui-kit/react/url-formatter-guide.mdx | 45 +- ui-kit/react/users.mdx | 74 ++- 60 files changed, 2903 insertions(+), 1328 deletions(-) diff --git a/sdk/javascript/video-view-customisation.mdx b/sdk/javascript/video-view-customisation.mdx index 2fd632577..5e3880224 100644 --- a/sdk/javascript/video-view-customisation.mdx +++ b/sdk/javascript/video-view-customisation.mdx @@ -1,8 +1,16 @@ --- title: "Video View Customisation" +description: "Customize the main video container in CometChat calls — aspect ratio, full screen button, name label, and network label positioning." --- - + +**Quick Reference** +- **Class:** `CometChat.MainVideoContainerSetting` +- **Apply via:** `CallSettingsBuilder.setMainVideoContainerSetting(videoSettings)` +- **Customizable elements:** Aspect ratio, full screen button, name label, network label +- **Position constants:** `POSITION_TOP_LEFT`, `POSITION_TOP_RIGHT`, `POSITION_BOTTOM_LEFT`, `POSITION_BOTTOM_RIGHT` +- **Requires:** [Default Calling](/sdk/javascript/default-call) or [Direct Calling](/sdk/javascript/direct-call) setup + This section will guide you to customise the main video container. @@ -26,16 +34,62 @@ The `MainVideoContainerSetting` Class is the required in case you want to custom Example: - -```typescript + +```javascript let videoSettings = new CometChat.MainVideoContainerSetting(); -videoSettings.setMainVideoAspectRatio(CometChat.CallSettings.ASPECT_RATIO_CONTAIN); +videoSettings.setMainVideoAspectRatio(CometChat.CallSettings.ASPECT_RATIO_CONTAIN); videoSettings.setFullScreenButtonParams(CometChat.CallSettings.POSITION_BOTTOM_RIGHT, true); videoSettings.setNameLabelParams(CometChat.CallSettings.POSITION_BOTTOM_LEFT, true, "rgba(27, 27, 27, 0.4)"); -videoSettings.setNetworkLabelParams(CometChat.CallSettings.POSITION_BOTTOM_RIGHT, true); +videoSettings.setNetworkLabelParams(CometChat.CallSettings.POSITION_BOTTOM_RIGHT, true); ``` - + +```typescript +let videoSettings: CometChat.MainVideoContainerSetting = new CometChat.MainVideoContainerSetting(); +videoSettings.setMainVideoAspectRatio(CometChat.CallSettings.ASPECT_RATIO_CONTAIN); +videoSettings.setFullScreenButtonParams(CometChat.CallSettings.POSITION_BOTTOM_RIGHT, true); +videoSettings.setNameLabelParams(CometChat.CallSettings.POSITION_BOTTOM_LEFT, true, "rgba(27, 27, 27, 0.4)"); +videoSettings.setNetworkLabelParams(CometChat.CallSettings.POSITION_BOTTOM_RIGHT, true); +``` + + + + + +| Practice | Details | +| --- | --- | +| Aspect ratio choice | Use `ASPECT_RATIO_CONTAIN` to show the full video without cropping; use `ASPECT_RATIO_COVER` for a full-bleed look that may crop edges | +| Label positioning | Avoid placing the name label and network label in the same corner to prevent overlap | +| Full screen button | Keep the full screen button visible for better UX; only hide it if your app provides its own full screen toggle | + + + + +| Symptom | Cause | Fix | +| --- | --- | --- | +| Video settings not applied | `setMainVideoContainerSetting()` not called on `CallSettingsBuilder` | Pass the `MainVideoContainerSetting` object to `CallSettingsBuilder.setMainVideoContainerSetting()` before calling `startCall()` | +| Labels overlapping | Multiple labels positioned in the same corner | Assign different position constants to each label | +| Full screen button missing | Visibility set to `false` | Set the second parameter of `setFullScreenButtonParams()` to `true` | + + + + +## Next Steps + + + + Implement default audio/video calling. + + + Implement direct calling without call events. + + + Add virtual background and blur effects. + + + Record calls for playback. + + diff --git a/sdk/javascript/virtual-background.mdx b/sdk/javascript/virtual-background.mdx index 63edd0a83..0879041c1 100644 --- a/sdk/javascript/virtual-background.mdx +++ b/sdk/javascript/virtual-background.mdx @@ -1,8 +1,16 @@ --- title: "Virtual Background" +description: "Implement virtual background features in CometChat video calls — background blur, custom images, and enforced backgrounds using the JavaScript SDK." --- - + +**Quick Reference** +- **Settings class:** `CometChat.VirtualBackground` +- **Apply via:** `CallSettingsBuilder.setVirtualBackground(virtualBackground)` +- **Toggle UI:** `CallSettingsBuilder.showVirtualBackgroundSetting(true|false)` +- **Runtime control:** `CometChat.CallController.getInstance()` → `setBackgroundBlur()`, `setBackgroundImage()`, `openVirtualBackground()` +- **Requires:** [Default Calling](/sdk/javascript/default-call) or [Direct Calling](/sdk/javascript/direct-call) setup + This section will guide you to implement virtual background feature in video calls. @@ -35,21 +43,17 @@ You can use the `openVirtualBackground()` method to open the virtual background -```js +```javascript let callController = CometChat.CallController.getInstance(); callController.openVirtualBackground(); ``` - - ```typescript let callController: CometChat.CallController = CometChat.CallController.getInstance(); callController.openVirtualBackground(); ``` - - ### Set Background Blur @@ -58,23 +62,19 @@ You can use the `setBackgroundBlur()` method to apply background blur on the vid -```js +```javascript let callController = CometChat.CallController.getInstance(); let blurLevel = 1; callController.setBackgroundBlur(blurLevel); ``` - - ```typescript let callController: CometChat.CallController = CometChat.CallController.getInstance(); let blurLevel: number = 1; callController.setBackgroundBlur(blurLevel); ``` - - ### Set Background Image @@ -83,23 +83,19 @@ You can use the `setBackgroundImage()`method to set the background image. This m -```js +```javascript let callController = CometChat.CallController.getInstance(); let imageURL = "URL_OF_BACKGROUND_IMAGE"; callController.setBackgroundImage(imageURL); ``` - - ```typescript let callController: CometChat.CallController = CometChat.CallController.getInstance(); let imageURL: string = "URL_OF_BACKGROUND_IMAGE"; callController.setBackgroundImage(imageURL); ``` - - ## Virtual Background Settings @@ -114,3 +110,44 @@ The `VirtualBackground` Class is the required in case you want to change how the | `setImages(images: Array)` | This method allows developer to add their custom background image which the end user can choose. | | `enforceBackgroundBlur(enforceBackgroundBlur: number)` | This method starts the call with background blurred. To blur the background you need to pass an integer value between 1-99 which decides the blur level. **Default = 0** | | `enforceBackgroundImage(enforceBackgroundImage: string)` | This methods starts the call with the provided background image. | + + + + +| Practice | Details | +| --- | --- | +| Blur level range | Use values between 1-99 for `enforceBackgroundBlur()`. Higher values produce stronger blur. A value of 0 disables blur | +| Image hosting | Host background images on a CDN for fast loading. Large images may cause lag when applied | +| Enforce vs allow | Use `enforceBackgroundBlur()` or `enforceBackgroundImage()` when you want a mandatory background (e.g., for privacy). Use `allowBackgroundBlur()` and `allowUserImages()` to let users choose | +| Custom buttons | Use `CallController` methods (`setBackgroundBlur`, `setBackgroundImage`, `openVirtualBackground`) when building a custom UI instead of the default CometChat menu | + + + + +| Symptom | Cause | Fix | +| --- | --- | --- | +| Virtual background option not visible | `showVirtualBackgroundSetting(false)` was set | Set `showVirtualBackgroundSetting(true)` in `CallSettingsBuilder` | +| Background blur not applied on call start | `enforceBackgroundBlur()` not set or set to 0 | Pass a value between 1-99 to `enforceBackgroundBlur()` | +| Custom images not appearing | `setImages()` not called or empty array passed | Pass a non-empty array of valid image URLs to `setImages()` | +| `CallController.getInstance()` returns null | Called before the call has started | Only use `CallController` methods after `startCall()` has been invoked | +| User can't upload their own images | `allowUserImages(false)` was set | Set `allowUserImages(true)` in the `VirtualBackground` configuration | + + + + +## Next Steps + + + + Customize the main video container layout. + + + Record calls for playback. + + + Enable screen sharing and presenter mode. + + + Customize the calling UI appearance. + + diff --git a/ui-kit/react/ai-assistant-chat.mdx b/ui-kit/react/ai-assistant-chat.mdx index ad1745922..e837f6ed9 100644 --- a/ui-kit/react/ai-assistant-chat.mdx +++ b/ui-kit/react/ai-assistant-chat.mdx @@ -1,6 +1,6 @@ --- title: "AI Assistant Chat" -description: "A composite component that provides an AI agent chat experience with streaming responses, quick starter suggestions, and chat history." +description: "Build an AI agent chat experience with streaming responses, quick suggestions, chat history, and custom tools using the CometChatAIAssistantChat component." --- {/* TL;DR for Agents and Quick Reference */} @@ -11,20 +11,34 @@ description: "A composite component that provides an AI agent chat experience wi import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react"; -// Minimal usage - requires an AI agent user +// Minimal usage — requires a CometChat.User (the AI agent) +const [agent, setAgent] = React.useState(); +React.useEffect(() => { + CometChat.getUser("assistant_uid").then((u) => setAgent(u)); +}, []); + // With common props console.log("Closed")} /> ``` + -Related: [AI Features](/ui-kit/react/ai-features) | [Message List](/ui-kit/react/message-list) + +**AI Agent Component Spec** + +**Package:** `@cometchat/chat-uikit-react` +**Import:** `import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";` +**Minimal JSX:** `` +**Required setup:** `CometChatUIKit.init()` + `CometChatUIKit.login()` + `CometChat.getUser("assistant_uid")` +**Key props:** `user` (CometChat.User, required), `streamingSpeed` (number), `suggestedMessages` (string[]), `hideNewChat` (boolean), `hideChatHistory` (boolean) +**CSS class:** `.cometchat-ai-assistant-chat` +**Events:** none emitted directly ## Overview @@ -39,6 +53,10 @@ Related: [AI Features](/ui-kit/react/ai-features) | [Message List](/ui-kit/react **Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) + +**Before using this component:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration). + + ```tsx @@ -68,14 +86,14 @@ export function AIAssistantChatDemo() { ```jsx -import React from "react"; +import React, { useState, useEffect } from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react"; export function AIAssistantChatDemo() { - const [agent, setAgent] = React.useState(null); + const [agent, setAgent] = useState(null); - React.useEffect(() => { + useEffect(() => { // Replace with your assistant UID CometChat.getUser("assistant_uid").then((u) => setAgent(u)); }, []); @@ -88,6 +106,7 @@ export function AIAssistantChatDemo() { ); } + ``` @@ -974,21 +993,39 @@ export function AIAssistantChatDemo() { +*** + + + + + +| Symptom | Cause | Fix | +| --- | --- | --- | +| Component doesn't render | `CometChatUIKit.init()` not called or not awaited | Ensure init completes before rendering. See [Methods](/ui-kit/react/methods) | +| Component renders but shows nothing | `user` prop not provided or is `null` | Pass a valid `CometChat.User` object fetched via `CometChat.getUser("assistant_uid")` | +| No streaming response | AI agent not configured in CometChat Dashboard | Set up an AI agent in the Dashboard and use its UID | +| Callback not firing | Wrong prop name or signature | Check the Actions section for exact prop name and parameter types | +| Custom view not appearing | Returning `null` or `undefined` from view prop | Ensure view function returns valid JSX | +| SSR hydration error | Component uses browser APIs on server | Wrap in `useEffect` or dynamic import with `ssr: false`. See [Next.js Integration](/ui-kit/react/next-js-integration) | + + + + --- ## Next Steps - - Explore AI-powered features like Smart Replies and Conversation Summary + + Overview of all AI capabilities in the UI Kit - Learn about the Message List component for displaying chat messages + Render messages in a conversation - - Customize message bubbles with templates + + Customize message bubble rendering - - Apply custom themes to match your app's design + + Customize the conversation header diff --git a/ui-kit/react/ai-features.mdx b/ui-kit/react/ai-features.mdx index 8dd19cd78..d4926849e 100644 --- a/ui-kit/react/ai-features.mdx +++ b/ui-kit/react/ai-features.mdx @@ -1,25 +1,43 @@ --- title: "AI User Copilot" description: "AI-powered features including Conversation Starters, Smart Replies, and Conversation Summary to enhance user engagement." +description: "Overview of CometChat's AI-powered features including Conversation Starters, Smart Replies, and Conversation Summary — with the UI Kit components that power each feature." --- {/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** -Key AI features available in the UI Kit: -- **Conversation Starters** → Auto-enabled in [CometChatMessageList](/ui-kit/react/message-list) -- **Smart Replies** → Auto-enabled in [CometChatMessageComposer](/ui-kit/react/message-composer) -- **Conversation Summary** → Auto-enabled in [CometChatMessageComposer](/ui-kit/react/message-composer) +Key components for AI features: +- **Message List** → [CometChatMessageList](/ui-kit/react/message-list) (Conversation Starters) +- **Message Composer** → [CometChatMessageComposer](/ui-kit/react/message-composer) (Smart Replies, Conversation Summary) - **AI Assistant Chat** → [CometChatAIAssistantChat](/ui-kit/react/ai-assistant-chat) -Enable features from the [CometChat Dashboard](https://app.cometchat.com/) → AI section. +AI features are enabled via the [CometChat Dashboard](/fundamentals/ai-user-copilot/overview) — no additional code required once activated. + + + +**AI Agent Component Spec** + +**Package:** `@cometchat/chat-uikit-react` +**Required setup:** `CometChatUIKit.init()` + `CometChatUIKit.login()` + AI features enabled in Dashboard +**AI features covered:** Conversation Starters, Smart Replies, Conversation Summary +**Primary components:** `CometChatMessageList`, `CometChatMessageComposer` +**Activation:** Enable each AI feature from the CometChat Dashboard — UI Kit auto-integrates them ## Overview CometChat's AI capabilities greatly enhance user interaction and engagement in your application. Let's understand how the React UI Kit achieves these features. + +**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) | [Dashboard](https://app.cometchat.com) + + + +**Before using AI features:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. AI features must also be activated from the [CometChat Dashboard](/fundamentals/ai-user-copilot/overview). + + @@ -64,21 +82,36 @@ Once you have successfully activated the [Conversation Summary](/fundamentals/ai + + + +| Symptom | Cause | Fix | +| --- | --- | --- | +| AI features not appearing | Feature not activated in CometChat Dashboard | Enable the specific AI feature from your [Dashboard](/fundamentals/ai-user-copilot/overview) | +| Component doesn't render | `CometChatUIKit.init()` not called or not awaited | Ensure init completes before rendering. See [Methods](/ui-kit/react/methods) | +| Component renders but no AI suggestions | User not logged in | Call `CometChatUIKit.login("UID")` after init | +| Conversation Starters not showing | Feature not enabled or no conversation context | Ensure [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter) is activated in Dashboard | +| Smart Replies not appearing in composer | Feature not enabled in Dashboard | Ensure [Smart Replies](/fundamentals/ai-user-copilot/smart-replies) is activated in Dashboard | +| SSR hydration error | Component uses browser APIs on server | Wrap in `useEffect` or dynamic import with `ssr: false`. See [Next.js Integration](/ui-kit/react/next-js-integration) | + + + + --- ## Next Steps - Build a dedicated AI agent chat experience + Add an AI-powered assistant to your chat - Learn about the Message List component with AI features + Customize the message list where AI features appear - Explore the Message Composer with Smart Replies + Customize the composer with Smart Replies and Summary - - Discover additional extensions and integrations + + Explore core chat features like messaging and reactions diff --git a/ui-kit/react/astro-conversation.mdx b/ui-kit/react/astro-conversation.mdx index 9f94fc80d..b0683fe02 100644 --- a/ui-kit/react/astro-conversation.mdx +++ b/ui-kit/react/astro-conversation.mdx @@ -1,31 +1,20 @@ --- title: "Building a Conversation List + Message View in Astro" sidebarTitle: "Conversation List + Message View" -description: "Build a two-panel chat layout with conversation list and message view using CometChat React UI Kit in Astro." +description: "Build a two-panel conversation list + message view layout in Astro with CometChat React UI Kit." --- {/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** -```tsx -import { CometChatConversations, CometChatMessageHeader, CometChatMessageList, CometChatMessageComposer } from "@cometchat/chat-uikit-react"; - -// Two-panel layout -
- -
- - - -
-
-``` - -- **Astro Integration** → [Integration Guide](/ui-kit/react/astro-integration) -- **One-to-One Chat** → [One-to-One Guide](/ui-kit/react/astro-one-to-one-chat) +- **Framework:** Astro +- **Key components:** `CometChatConversationsWithMessages` +- **Prerequisites:** `CometChatUIKit.init()` + `CometChatUIKit.login()` must complete first +- **Parent guide:** [Astro Integration](/ui-kit/react/astro-integration) + The Conversation List + Message View layout provides a familiar two‑panel experience, similar to WhatsApp Web or Slack. Users browse conversations on the left and chat in real time on the right. *** @@ -292,11 +281,41 @@ The sample uses `ensureLogin(uid)` to switch users by logging out if the active *** + +## Common Failure Modes + + + + +| Symptom | Cause | Fix | +| --- | --- | --- | +| Component doesn’t render | `CometChatUIKit.init()` not called or not awaited | Ensure init completes before rendering. See [Methods](/ui-kit/react/methods) | +| Component renders but shows no data | User not logged in | Call `CometChatUIKit.login("UID")` after init | +| CSS/theme not applied | Missing CSS import | Add `@import url("@cometchat/chat-uikit-react/css-variables.css");` in your CSS | +| Blank screen after login | Component mounted before init/login completes | Use state to conditionally render after login resolves | +| Messages not loading | Invalid user/group object passed | Ensure you fetch the user/group via SDK before passing to components | + + + + +*** + ## Next Steps -- Customize styles in `src/styles/cometchat-layout.css` -- Add presence or typing indicators -- Explore themes and component overrides in the UI Kit + + + Personalize the chat UI to align with your brand. + + + Explore all available prebuilt UI components. + + + Return to the Astro setup guide. + + + Learn about messaging, real-time updates, and more. + + To build other experiences (One‑to‑One or Tab‑based), reuse `src/lib/cometchat-init.js` and switch the React island component. diff --git a/ui-kit/react/astro-integration.mdx b/ui-kit/react/astro-integration.mdx index 878241813..ef167142c 100644 --- a/ui-kit/react/astro-integration.mdx +++ b/ui-kit/react/astro-integration.mdx @@ -1,7 +1,7 @@ --- title: "Getting Started With CometChat React UI Kit in Astro" sidebarTitle: "Integration" -description: "Integrate CometChat React UI Kit in your Astro application for real-time chat functionality." +description: "Step-by-step guide to integrate CometChat React UI Kit into your Astro application using @astrojs/react islands." --- {/* TL;DR for Agents and Quick Reference */} @@ -15,22 +15,22 @@ npx astro add react ``` ```tsx -// Initialize (src/lib/cometchat-init.js) import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; -const settings = new UIKitSettingsBuilder() +const UIKitSettings = new UIKitSettingsBuilder() .setAppId("APP_ID") .setRegion("REGION") .setAuthKey("AUTH_KEY") .build(); -await CometChatUIKit.init(settings); +await CometChatUIKit.init(UIKitSettings); await CometChatUIKit.login("UID"); ``` -- **Conversation Layout** → [Conversation Guide](/ui-kit/react/astro-conversation) -- **One-to-One Chat** → [One-to-One Guide](/ui-kit/react/astro-one-to-one-chat) -- **Tab-Based Chat** → [Tab-Based Guide](/ui-kit/react/astro-tab-based-chat) +- **Astro** → This page +- **React.js** → [React.js Integration](/ui-kit/react/react-js-integration) +- **Next.js** → [Next.js Integration](/ui-kit/react/next-js-integration) +- **All Components** → [Components Overview](/ui-kit/react/components-overview) The CometChat platform lets you add in‑app chat with minimal effort. In Astro, you can integrate CometChat in two primary ways: @@ -357,14 +357,44 @@ If you need full control, combine the JavaScript SDK with your own UI or mix Ast *** +## Common Failure Modes + + + + +| Symptom | Cause | Fix | +| --- | --- | --- | +| `CometChatUIKit.init()` fails silently | Invalid App ID, Region, or Auth Key | Double-check credentials from the [CometChat Dashboard](https://app.cometchat.com/) | +| Component doesn’t render | `init()` not called or not awaited before rendering | Ensure `init()` completes before mounting components. See [Methods](/ui-kit/react/methods) | +| Component renders but shows no data | User not logged in | Call `CometChatUIKit.login("UID")` after init | +| CSS/theme not applied | Missing CSS import | Add `@import url("@cometchat/chat-uikit-react/css-variables.css");` in your global CSS | +| Blank screen after login | Component mounted before init/login completes | Use state to conditionally render after login resolves | +| CometChat components fail on server | Astro SSR tries to render on server | Use `client:only="react"` directive on CometChat islands | +| Auth Key exposed in production | Using Auth Key instead of Auth Token | Switch to [Auth Token](/ui-kit/react/methods#login-using-auth-token) for production | + + + + +*** + ## Next Steps Proceed with your chosen experience: -- Conversation + Messages (UI Kit) in Astro using `CometChatConversationsWithMessages` -- One-to-One/Group Messages (UI Kit) in Astro using `CometChatMessages` -- Tab-Based Chat (UI Kit) in Astro using `CometChatFullScreenView` -- Advanced customizations with themes and components + + + Two-panel layout with conversation list and message view. + + + Focused direct messaging experience without a sidebar. + + + Multi-tab navigation for chats, calls, users, and settings. + + + Customize colors, fonts, and styles to match your branding. + + You’ve set up CometChat in your Astro app. Initialize, log in, and render your preferred chat experience. diff --git a/ui-kit/react/astro-one-to-one-chat.mdx b/ui-kit/react/astro-one-to-one-chat.mdx index 67c1f4023..05914fd44 100644 --- a/ui-kit/react/astro-one-to-one-chat.mdx +++ b/ui-kit/react/astro-one-to-one-chat.mdx @@ -1,31 +1,20 @@ --- title: "Building a One-to-One/Group Chat in Astro" sidebarTitle: "One To One/Group Chat" -description: "Build a focused one-to-one or group chat experience using CometChat React UI Kit in Astro." +description: "Build a focused one-to-one or group chat experience in Astro with CometChat React UI Kit." --- {/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** -```tsx -import { CometChatMessageHeader, CometChatMessageList, CometChatMessageComposer } from "@cometchat/chat-uikit-react"; - -// One-to-one chat with a user - - - - -// Group chat (use group prop instead) - - - -``` - -- **Astro Integration** → [Integration Guide](/ui-kit/react/astro-integration) -- **Conversation Layout** → [Conversation Guide](/ui-kit/react/astro-conversation) +- **Framework:** Astro +- **Key components:** `CometChatMessages` +- **Prerequisites:** `CometChatUIKit.init()` + `CometChatUIKit.login()` must complete first +- **Parent guide:** [Astro Integration](/ui-kit/react/astro-integration) + The One‑to‑One/Group chat layout focuses on a single conversation, ideal for support chats and private messaging. This guide uses Astro with React islands and the CometChat React UI Kit. *** @@ -280,11 +269,41 @@ The island logs out if a different user session is active, then logs in with `PU *** + +## Common Failure Modes + + + + +| Symptom | Cause | Fix | +| --- | --- | --- | +| Component doesn’t render | `CometChatUIKit.init()` not called or not awaited | Ensure init completes before rendering. See [Methods](/ui-kit/react/methods) | +| Component renders but shows no data | User not logged in | Call `CometChatUIKit.login("UID")` after init | +| CSS/theme not applied | Missing CSS import | Add `@import url("@cometchat/chat-uikit-react/css-variables.css");` in your CSS | +| Blank screen after login | Component mounted before init/login completes | Use state to conditionally render after login resolves | +| Messages not loading | Invalid user/group object passed | Ensure you fetch the user/group via SDK before passing to components | + + + + +*** + ## Next Steps -- Add typing indicators and read receipts -- Apply theming and component overrides -- Extend to conversations list + messages or tabbed layout + + + Personalize the chat UI to align with your brand. + + + Explore all available prebuilt UI components. + + + Return to the Astro setup guide. + + + Learn about messaging, real-time updates, and more. + + You can reuse `src/lib/cometchat-init.js` across different chat experiences and swap the island component. diff --git a/ui-kit/react/astro-tab-based-chat.mdx b/ui-kit/react/astro-tab-based-chat.mdx index 88f4b9351..b76b926fd 100644 --- a/ui-kit/react/astro-tab-based-chat.mdx +++ b/ui-kit/react/astro-tab-based-chat.mdx @@ -1,28 +1,20 @@ --- title: "Building a Messaging UI with Tabs, Sidebar, and Message View in Astro" sidebarTitle: "Tab Based Chat Experience" -description: "Build a tab-based messaging UI in Astro with CometChat React UI Kit featuring Chats, Calls, Users, and Groups sections." +description: "Build a tab-based messaging UI with chats, calls, users, and groups in Astro with CometChat React UI Kit." --- {/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** -```tsx -import TabbedChat from "../components/TabbedChat.jsx"; - -// Astro page with client-only hydration - -``` - -Key components used: -- **CometChatConversations** → Chats tab -- **CometChatCallLogs** → Calls tab -- **CometChatUsers** → Users tab -- **CometChatGroups** → Groups tab -- **CometChatMessageHeader/List/Composer** → Message panel +- **Framework:** Astro +- **Key components:** `CometChatFullScreenView` +- **Prerequisites:** `CometChatUIKit.init()` + `CometChatUIKit.login()` must complete first +- **Parent guide:** [Astro Integration](/ui-kit/react/astro-integration) + This guide shows how to build a tab‑based messaging UI in Astro using the CometChat React UI Kit. The interface includes sections for Chats, Calls, Users, and Groups with a message panel. *** @@ -375,20 +367,39 @@ The message panel shows only for Chats, Users, or Groups. Calls tab does not ope *** + +## Common Failure Modes + + + + +| Symptom | Cause | Fix | +| --- | --- | --- | +| Component doesn’t render | `CometChatUIKit.init()` not called or not awaited | Ensure init completes before rendering. See [Methods](/ui-kit/react/methods) | +| Component renders but shows no data | User not logged in | Call `CometChatUIKit.login("UID")` after init | +| CSS/theme not applied | Missing CSS import | Add `@import url("@cometchat/chat-uikit-react/css-variables.css");` in your CSS | +| Blank screen after login | Component mounted before init/login completes | Use state to conditionally render after login resolves | +| Messages not loading | Invalid user/group object passed | Ensure you fetch the user/group via SDK before passing to components | + + + + +*** + ## Next Steps - - Add voice and video calling capabilities + + Personalize the chat UI to align with your brand. - - Customize colors, fonts, and styling + + Explore all available prebuilt UI components. - - Review the Astro setup guide + + Return to the Astro setup guide. - - Explore all available components + + Learn about messaging, real-time updates, and more. diff --git a/ui-kit/react/call-buttons.mdx b/ui-kit/react/call-buttons.mdx index 90fe60c91..c5adc6aa0 100644 --- a/ui-kit/react/call-buttons.mdx +++ b/ui-kit/react/call-buttons.mdx @@ -1,6 +1,6 @@ --- title: "Call Buttons" -description: "CometChatCallButtons component provides voice and video call buttons for initiating calls to users or groups." +description: "Add voice and video call buttons to initiate calls using the CometChatCallButtons component." --- {/* TL;DR for Agents and Quick Reference */} @@ -8,23 +8,36 @@ description: "CometChatCallButtons component provides voice and video call butto **Quick Reference for AI Agents & Developers** ```tsx +import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatCallButtons } from "@cometchat/chat-uikit-react"; -// Basic usage with user +// For a user -// With group +// For a group -// Hide specific buttons - ``` + +**AI Agent Component Spec** + +**Package:** `@cometchat/chat-uikit-react` +**Import:** `import { CometChatCallButtons } from "@cometchat/chat-uikit-react";` +**Minimal JSX:** `` +**Required setup:** `CometChatUIKit.init()` + `CometChatUIKit.login()` +**Key props:** `user` (CometChat.User), `group` (CometChat.Group), `hideVideoCallButton` (boolean), `hideVoiceCallButton` (boolean), `onError` (callback) +**CSS class:** `.cometchat-call-button` +**Events:** `ccCallRejected`, `ccCallEnded`, `ccOutgoingCall`, `ccMessageSent` + + ## 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. @@ -37,6 +50,10 @@ The `Call Button` is a Component provides users with the ability to make calls, **Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) + +**Before using this component:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration). + + ## Usage ### Integration @@ -435,19 +452,36 @@ You can customize the properties of the `CometChatOutgoingCall` component by mak You can refer to [CometChatOutgoingCall](/ui-kit/react/outgoing-call) component to know more about each of the above properties. +*** + + + + +| Symptom | Cause | Fix | +| --- | --- | --- | +| Component doesn't render | `CometChatUIKit.init()` not called or not awaited | Ensure init completes before rendering. See [Methods](/ui-kit/react/methods) | +| Component renders but shows no buttons | Neither `user` nor `group` prop provided | Pass a valid `CometChat.User` or `CometChat.Group` object | +| Callback not firing | Wrong prop name or signature | Check the Actions section for exact prop name and parameter types | +| Only voice or video button visible | `hideVideoCallButton` or `hideVoiceCallButton` set to `true` | Set the corresponding hide prop to `false` | +| Call fails to initiate | Calls SDK not installed | Install `@cometchat/calls-sdk-javascript`. See [Call Features](/ui-kit/react/call-features) | +| SSR hydration error | Component uses browser APIs on server | Wrap in `useEffect` or dynamic import with `ssr: false`. See [Next.js Integration](/ui-kit/react/next-js-integration) | + + + + --- ## Next Steps - Customize the outgoing call screen + Manage outgoing voice and video call UI - Handle incoming call notifications + Handle incoming voice and video calls - Display call history + Display call history and call log details Overview of all calling capabilities diff --git a/ui-kit/react/call-features.mdx b/ui-kit/react/call-features.mdx index 0c4d6c976..625c87e3e 100644 --- a/ui-kit/react/call-features.mdx +++ b/ui-kit/react/call-features.mdx @@ -1,24 +1,35 @@ --- title: "Call" -description: "Overview of CometChat calling features including voice/video calls, incoming/outgoing call screens, and call logs." +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." --- {/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** -Key call components: +Key components for call features: - **Call Buttons** → [CometChatCallButtons](/ui-kit/react/call-buttons) - **Incoming Call** → [CometChatIncomingCall](/ui-kit/react/incoming-call) - **Outgoing Call** → [CometChatOutgoingCall](/ui-kit/react/outgoing-call) - **Call Logs** → [CometChatCallLogs](/ui-kit/react/call-logs) ```bash -# Required: Install Calls SDK +# Required: Install the Calls SDK separately npm install @cometchat/calls-sdk-javascript ``` + +**AI Agent Component Spec** + +**Package:** `@cometchat/chat-uikit-react` + `@cometchat/calls-sdk-javascript` +**Required setup:** `CometChatUIKit.init()` + `CometChatUIKit.login()` + Calls SDK installed +**Call features covered:** Incoming Call, Outgoing Call, Call Logs, Call Buttons +**Primary components:** `CometChatCallButtons`, `CometChatIncomingCall`, `CometChatOutgoingCall`, `CometChatCallLogs` +**CSS class prefix:** `.cometchat-` +**Auto-detection:** UI Kit automatically detects the Calls SDK and enables call UI components + + ## 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. @@ -28,7 +39,7 @@ CometChat's Calls feature is an advanced functionality that allows you to seamle -**Calling features** require installing `@cometchat/calls-sdk-javascript` separately. The UI Kit auto-detects it and enables call UI components. +**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 @@ -39,7 +50,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 npm install @cometchat/calls-sdk-javascript ``` @@ -79,21 +90,35 @@ Importantly, the Outgoing Call component is smartly designed to transition autom + + + +| Symptom | Cause | Fix | +| --- | --- | --- | +| Call buttons not appearing in Message Header | `@cometchat/calls-sdk-javascript` not installed | Run `npm install @cometchat/calls-sdk-javascript` — UI Kit auto-detects it | +| Component doesn't render | `CometChatUIKit.init()` not called or not awaited | Ensure init completes before rendering. See [Methods](/ui-kit/react/methods) | +| Component renders but shows no data | User not logged in | Call `CometChatUIKit.login("UID")` after init | +| Incoming call screen not showing | `CometChatIncomingCall` not mounted in the component tree | Ensure the component is rendered at the app root level so it can listen for incoming calls | +| SSR hydration error | Component uses browser APIs on server | Wrap in `useEffect` or dynamic import with `ssr: false`. See [Next.js Integration](/ui-kit/react/next-js-integration) | + + + + --- ## Next Steps - - Add voice and video call buttons + + Add audio and video call buttons to your chat - Handle incoming call notifications + Handle incoming call notifications and UI - - Customize the outgoing call screen + + Display call history and details - - Display conversation lists + + 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 011ad4521..19e40b3c3 100644 --- a/ui-kit/react/call-logs.mdx +++ b/ui-kit/react/call-logs.mdx @@ -1,6 +1,6 @@ --- title: "Call Logs" -description: "CometChatCallLogs component displays a list of call history with caller information, call status, and timestamps." +description: "Display and manage call history with filtering, custom views, and call-back functionality using the CometChatCallLogs component." --- {/* TL;DR for Agents and Quick Reference */} @@ -10,23 +10,30 @@ description: "CometChatCallLogs component displays a list of call history with c ```tsx import { CometChatCallLogs } from "@cometchat/chat-uikit-react"; -// Basic usage +// Minimal usage -// With item click handler - console.log("Selected:", callLog)} -/> - -// With custom request builder - console.log("Call back:", callLog)} + title="Call History" /> ``` + +**AI Agent Component Spec** + +**Package:** `@cometchat/chat-uikit-react` +**Import:** `import { CometChatCallLogs } from "@cometchat/chat-uikit-react";` +**Minimal JSX:** `` +**Required setup:** `CometChatUIKit.init()` + `CometChatUIKit.login()` +**Key props:** `onItemClick` (callback), `onCallButtonClicked` (callback), `callLogRequestBuilder` (CallLogRequestBuilder), `title` (string), `activeCall` (object) +**CSS class:** `.cometchat-call-logs` +**Events:** `ccMessageSent` + + ## 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. @@ -47,6 +54,14 @@ The `Call Logs` is comprised of the following components: | CometChatListItem | A component that renders data obtained from a Group object on a Tile having a title, subtitle, leading and trailing view. | | CometChatDate | This component used to show the date and time. You can also customize the appearance of this widget by modifying its logic. | + +**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) | [REST API](https://api-explorer.cometchat.com) + + + +**Before using this component:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration). + + ## Usage ### Integration @@ -1176,21 +1191,36 @@ export default CallLogDemo; + + + +| Symptom | Cause | Fix | +| --- | --- | --- | +| Component doesn't render | `CometChatUIKit.init()` not called or not awaited | Ensure init completes before rendering. See [Methods](/ui-kit/react/methods) | +| Component renders but shows no data | User not logged in or no call history exists | Call `CometChatUIKit.login("UID")` after init. Make some test calls first. | +| Callback not firing | Wrong prop name or signature | Check the Actions section for exact prop name and parameter types | +| Custom view not appearing | Returning `null` or `undefined` from view prop | Ensure view function returns valid JSX | +| Filter not working | `CallLogRequestBuilder` missing auth token | Set `.setAuthToken("authtoken")` on the builder | +| SSR hydration error | Component uses browser APIs on server | Wrap in `useEffect` or dynamic import with `ssr: false`. See [Next.js Integration](/ui-kit/react/next-js-integration) | + + + + --- ## Next Steps - Add voice and video call buttons + Add voice and video call buttons to your chat - Handle incoming call notifications + Handle incoming voice and video calls - Customize the outgoing call screen + Manage outgoing voice and video calls - - Overview of all calling capabilities + + Build a call log details view diff --git a/ui-kit/react/components-overview.mdx b/ui-kit/react/components-overview.mdx index aa9e58e00..5a0d87305 100644 --- a/ui-kit/react/components-overview.mdx +++ b/ui-kit/react/components-overview.mdx @@ -1,20 +1,50 @@ --- title: "Overview" -description: "Overview of CometChat UI Kit components, actions, events, and customization patterns." +description: "Browse all prebuilt UI components in the CometChat React UI Kit — conversations, messages, users, groups, calls, search, and AI." --- {/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** -Key components: -- **Conversations** → [CometChatConversations](/ui-kit/react/conversations) -- **Message List** → [CometChatMessageList](/ui-kit/react/message-list) -- **Message Composer** → [CometChatMessageComposer](/ui-kit/react/message-composer) -- **Message Header** → [CometChatMessageHeader](/ui-kit/react/message-header) -- **Users** → [CometChatUsers](/ui-kit/react/users) -- **Groups** → [CometChatGroups](/ui-kit/react/groups) -- **Call Buttons** → [CometChatCallButtons](/ui-kit/react/call-buttons) +All components are imported from `@cometchat/chat-uikit-react`: + +```tsx +import { + CometChatConversations, + CometChatMessageList, + CometChatMessageComposer, + CometChatMessageHeader, + CometChatUsers, + CometChatGroups, + CometChatGroupMembers, + CometChatThreadHeader, + CometChatIncomingCall, + CometChatOutgoingCall, + CometChatCallButtons, + CometChatCallLogs, +} from "@cometchat/chat-uikit-react"; +``` + +- **Chat:** [Conversations](/ui-kit/react/conversations) | [Message List](/ui-kit/react/message-list) | [Message Composer](/ui-kit/react/message-composer) | [Message Header](/ui-kit/react/message-header) +- **Users & Groups:** [Users](/ui-kit/react/users) | [Groups](/ui-kit/react/groups) | [Group Members](/ui-kit/react/group-members) +- **Calls:** [Call Buttons](/ui-kit/react/call-buttons) | [Incoming Call](/ui-kit/react/incoming-call) | [Outgoing Call](/ui-kit/react/outgoing-call) | [Call Logs](/ui-kit/react/call-logs) +- **Other:** [Search](/ui-kit/react/search) | [Thread Header](/ui-kit/react/thread-header) | [AI Assistant Chat](/ui-kit/react/ai-assistant-chat) +- **Customization:** [Message Template](/ui-kit/react/message-template) | [Theming](/ui-kit/react/theme) | [Events](/ui-kit/react/events) + + + +**AI Agent Component Spec** + +**Package:** `@cometchat/chat-uikit-react` +**Required setup:** `CometChatUIKit.init()` + `CometChatUIKit.login()` before rendering any component +**Component API pattern:** +- Callback actions: `on={(param) => {}}` +- Data filtering: `RequestBuilder={new CometChat.RequestBuilder()}` +- Toggle features: `hide={true|false}` +- Custom rendering: `View={() => JSX}` +- CSS overrides: Target `.cometchat-` class in global CSS +**Calling:** Requires separate `@cometchat/calls-sdk-javascript` package 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. @@ -50,15 +80,15 @@ All Components have the ability to emit events. These events are dispatched in r - Display and manage conversation lists + Display and manage the list of recent conversations - - Display messages in a conversation + + Render messages for a selected conversation - - Learn about messaging capabilities + + Customize colors, fonts, and styles across all components - - Customize colors, fonts, and styling + + Init, login, logout, and utility methods reference diff --git a/ui-kit/react/conversations.mdx b/ui-kit/react/conversations.mdx index f45a8e0ab..5a183c893 100644 --- a/ui-kit/react/conversations.mdx +++ b/ui-kit/react/conversations.mdx @@ -1,6 +1,6 @@ --- title: "Conversations" -description: "A component that displays all conversations for the logged-in user with real-time updates and customization options." +description: "Display and manage the list of recent conversations for the logged-in user using the CometChatConversations component in the React UI Kit." --- {/* TL;DR for Agents and Quick Reference */} @@ -18,15 +18,30 @@ import { CometChatConversations } from "@cometchat/chat-uikit-react"; onItemClick={(conversation) => setActiveChat(conversation)} hideReceipts={false} selectionMode={SelectionMode.none} - showSearchBar={true} /> ``` + +**AI Agent Component Spec** + +**Package:** `@cometchat/chat-uikit-react` +**Import:** `import { CometChatConversations } from "@cometchat/chat-uikit-react";` +**Minimal JSX:** `` +**Required setup:** `CometChatUIKit.init()` + `CometChatUIKit.login()` +**Key props:** `onItemClick: (conversation: CometChat.Conversation) => void`, `conversationsRequestBuilder: CometChat.ConversationsRequestBuilder`, `hideReceipts: boolean`, `selectionMode: SelectionMode`, `activeConversation: CometChat.Conversation` +**CSS class:** `.cometchat-conversations` +**Events:** `CometChatConversationEvents.ccConversationDeleted` + + ## Overview The Conversations is a Component, that shows all conversations related to the currently logged-in user. + +**Before using this component:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration). + + 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. @@ -34,7 +49,7 @@ This component lists the most recent or latest conversations or contacts with wh -**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) | [REST API](/rest-api/chat-apis) +**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/retrieve-conversations) | [REST API](https://api-explorer.cometchat.com) ## Usage @@ -68,7 +83,6 @@ export default ConversationsDemo; ```jsx import { CometChatConversations, - TitleAlignment, } from "@cometchat/chat-uikit-react"; function ConversationsDemo() { @@ -88,6 +102,8 @@ export default ConversationsDemo; +**Expected result:** The `CometChatConversations` component renders a scrollable list of recent conversations. Each list item shows: avatar, name, last message preview, timestamp, and unread badge. + ### Actions [Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. @@ -224,7 +240,7 @@ const handleOnError = (error) => { The `onSearchBarClicked` event is triggered when the user clicks the search bar. It does not have a default behavior. However, you can override its behavior using the following code snippet. - + ```tsx import { CometChatConversations } from "@cometchat/chat-uikit-react"; @@ -237,6 +253,19 @@ const handleSearchClick = () => { + +```jsx +import { CometChatConversations } from "@cometchat/chat-uikit-react"; + +const handleSearchClick = () => { + console.log("Search bar clicked"); +}; + +; +``` + + + *** @@ -255,7 +284,7 @@ You can set filters using the following parameters. 6. **GroupTags:** Filters on specific Group `Tag` - + ```tsx import { CometChatConversations } from "@cometchat/chat-uikit-react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; @@ -269,6 +298,20 @@ import { CometChat } from "@cometchat/chat-sdk-javascript"; + +```jsx +import { CometChatConversations } from "@cometchat/chat-uikit-react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; + +; +``` + + + *** @@ -366,7 +409,7 @@ Using CSS you can customize the look and feel of the component in your app like These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements. - + ```tsx
@@ -377,6 +420,17 @@ These are a set of small functional customizations that allow you to fine-tune t + +```jsx +
+
+ +
+
+``` + + + Below is a list of customizations along with corresponding code snippets @@ -1250,21 +1304,47 @@ const getOptions = (conversation: CometChat.Conversation) => { *** +## Component API Pattern + +| Customization Type | Prop Pattern | Example | +| --- | --- | --- | +| Callback actions | `on={(param) => {}}` | `onItemClick={(conversation) => {}}` | +| Data filtering | `conversationsRequestBuilder={builder}` | `conversationsRequestBuilder={new CometChat.ConversationsRequestBuilder().setLimit(10)}` | +| Toggle features | `hide={true\|false}` | `hideReceipts={true}` | +| Custom rendering | `View={() => JSX}` | `itemView={(conversation) =>
...
}` | +| CSS overrides | Target `.cometchat-conversations` class in global CSS | `.cometchat-conversations .cometchat-list-item { ... }` | + + + + +| Symptom | Cause | Fix | +| --- | --- | --- | +| Component doesn't render | `CometChatUIKit.init()` not called or not awaited | Ensure init completes before rendering. See [Methods](/ui-kit/react/methods) | +| Component renders but shows no data | User not logged in | Call `CometChatUIKit.login("UID")` after init | +| `onItemClick` not firing | Wrong prop name or missing callback | Use `onItemClick` (not `onClick` or `onPress`) | +| Custom view not appearing | Returning `null` or `undefined` from view prop | Ensure view function returns valid JSX | +| SSR hydration error | Component uses browser APIs on server | Wrap in `useEffect` or dynamic import with `ssr: false`. See [Next.js Integration](/ui-kit/react/next-js-integration) | +| Conversations list empty after login | `ConversationsRequestBuilder` filters too restrictive | Remove or adjust the `conversationsRequestBuilder` prop | +| Events not received | Listener not subscribed or unsubscribed too early | Subscribe in `useEffect` and unsubscribe in cleanup | + + + + --- ## Next Steps - - Display messages for a selected conversation + + Display messages for the selected conversation - Display and manage user lists + Browse and select users to start new conversations - - Display and manage group lists + + Browse and manage group conversations - - Customize colors, fonts, and styling + + Customize the appearance of the conversations list diff --git a/ui-kit/react/core-features.mdx b/ui-kit/react/core-features.mdx index d3d1f1458..11109457f 100644 --- a/ui-kit/react/core-features.mdx +++ b/ui-kit/react/core-features.mdx @@ -1,19 +1,32 @@ --- title: "Core" -description: "Overview of CometChat's core messaging features including instant messaging, media sharing, read receipts, and user presence." +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." --- {/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** -Key components for core features: +Key components for core chat features: - **Conversations** → [CometChatConversations](/ui-kit/react/conversations) - **Message List** → [CometChatMessageList](/ui-kit/react/message-list) - **Message Composer** → [CometChatMessageComposer](/ui-kit/react/message-composer) - **Message Header** → [CometChatMessageHeader](/ui-kit/react/message-header) - **Users** → [CometChatUsers](/ui-kit/react/users) - **Groups** → [CometChatGroups](/ui-kit/react/groups) +- **Group Members** → [CometChatGroupMembers](/ui-kit/react/group-members) +- **Search** → [CometChatSearch](/ui-kit/react/search) +- **Threaded Message Preview** → [CometChatThreadedMessagePreview](/ui-kit/react/threaded-message-preview) + + + +**AI Agent Component Spec** + +**Package:** `@cometchat/chat-uikit-react` +**Required setup:** `CometChatUIKit.init()` + `CometChatUIKit.login()` +**Core features covered:** 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 +**Primary components:** `CometChatConversations`, `CometChatMessageList`, `CometChatMessageComposer`, `CometChatMessageHeader` +**CSS class prefix:** `.cometchat-` ## Overview @@ -26,6 +39,14 @@ The UI Kit comprises a variety of components, each designed to work seamlessly w Here's how different UI Kit components work together to achieve CometChat's Core features: + +**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) | [REST API](https://api-explorer.cometchat.com) + + + +**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. @@ -210,13 +231,21 @@ Conversation and Advanced Search is a powerful feature provided by CometChat tha -| Components | Functionality | -| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Search](/ui-kit/react/search) | [Search](/ui-kit/react/search) allows users to search across conversations and messages in real time. Users can click on a result to open the conversation or jump directly to a specific message. | -| [Message Header](/ui-kit/react/message-header) | [Message Header](/ui-kit/react/message-header) shows the search button in the chat header, allowing users to search within a conversation. | -| [Message List](/ui-kit/react/message-list) | [Message List](/ui-kit/react/message-list) shows the selected message when clicked from search results and highlights it in the message list. | -| [Conversations](/ui-kit/react/conversations) | [Conversations](/ui-kit/react/conversations) displays the search input. | +For a comprehensive understanding and guide on implementing and using the Groups feature in CometChat, you should refer to our detailed guide on [Groups](/ui-kit/react/groups). + + + +| Symptom | Cause | Fix | +| --- | --- | --- | +| Component doesn't render | `CometChatUIKit.init()` not called or not awaited | Ensure init completes before rendering. See [Methods](/ui-kit/react/methods) | +| Component renders but shows no data | User not logged in | Call `CometChatUIKit.login("UID")` after init | +| Callback not firing | Wrong prop name or signature | Check the Actions section on the component page for exact prop name and parameter types | +| Custom view not appearing | Returning `null` or `undefined` from view prop | Ensure view function returns valid JSX | +| SSR hydration error | Component uses browser APIs on server | Wrap in `useEffect` or dynamic import with `ssr: false`. See [Next.js Integration](/ui-kit/react/next-js-integration) | + + + --- @@ -224,15 +253,15 @@ Conversation and Advanced Search is a powerful feature provided by CometChat tha - Explore all available UI components + Browse all available UI Kit components + + + Customize the look and feel of your chat UI - Add voice and video calling capabilities + Add audio and video calling to your app - Integrate AI-powered chat features - - - Customize colors, fonts, and styling + 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 21d90bbd6..0be0cb729 100644 --- a/ui-kit/react/custom-text-formatter-guide.mdx +++ b/ui-kit/react/custom-text-formatter-guide.mdx @@ -1,36 +1,19 @@ --- title: "Custom Text Formatter" -description: "Guide to creating custom text formatters for CometChat using CometChatTextFormatter for message composer and text bubbles." +description: "Extend the CometChatTextFormatter base class to implement custom inline text patterns with regex and callbacks." --- {/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** -```tsx -import { CometChatTextFormatter } from "@cometchat/chat-uikit-react"; - -// Extend to create custom formatter -class HashTagTextFormatter extends CometChatTextFormatter { - constructor() { - super(); - this.setTrackingCharacter("#"); - this.setRegexPatterns([/\B#(\w+)\b/g]); - } - - getFormattedText(inputText: string) { - return inputText.replace( - /\B#(\w+)\b/g, - '#$1' - ); - } -} - -// Use in components - -``` +- **Key component:** `CometChatTextFormatter` +- **Prerequisites:** `CometChatUIKit.init()` + `CometChatUIKit.login()` must complete first +- **Sample app:** [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) +- **All guides:** [Guide Overview](/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. @@ -464,22 +447,21 @@ registerEventListeners(element: HTMLElement, domTokenList: DOMTokenList) { - ---- - ## Next Steps - - Configure @mentions formatting + + Add @mentions with styled tokens. - - Customize link formatting + + Customize the message input component. - - Customize the message input component + + Browse all feature and formatter guides. - - Display and customize message bubbles + + Full working sample application on GitHub. + +*** diff --git a/ui-kit/react/events.mdx b/ui-kit/react/events.mdx index d08234020..c8bc8e06d 100644 --- a/ui-kit/react/events.mdx +++ b/ui-kit/react/events.mdx @@ -1,34 +1,21 @@ --- title: "Events" -description: "Reference for CometChat UI Kit events including conversation, user, group, message, and call events." +description: "Reference for CometChat React UI Kit events including conversation, user, group, message, and call events." --- {/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** -```tsx -import { - CometChatMessageEvents, - CometChatConversationEvents, - CometChatCallEvents -} from "@cometchat/chat-uikit-react"; - -// Subscribe to events -const subscription = CometChatMessageEvents.ccMessageSent.subscribe( - (message) => console.log("Message sent:", message) -); - -// Unsubscribe when done -subscription?.unsubscribe(); -``` - -Key event categories: -- **CometChatConversationEvents** → Conversation actions -- **CometChatUserEvents** → User block/unblock -- **CometChatGroupEvents** → Group management -- **CometChatMessageEvents** → Message lifecycle -- **CometChatCallEvents** → Call lifecycle +**Event categories:** +- `CometChatConversationEvents` → conversation deleted, updated +- `CometChatUserEvents` → user blocked/unblocked +- `CometChatGroupEvents` → group created, deleted, member changes +- `CometChatMessageEvents` → message sent, edited, replied +- `CometChatCallEvents` → outgoing call, accepted, rejected, ended +- **UI events** → active chat changed + +Events enable decoupled communication between UI Kit components without direct references. ## Overview @@ -124,22 +111,39 @@ It consists of the following events: | ------------------- | ---------------------------------------------------------------------------- | | ccActiveChatChanged | This event is triggered when the user navigates to a particular chat window. | +*** ---- +## Common Failure Modes + + + + +| Symptom | Cause | Fix | +| --- | --- | --- | +| Event listener not firing | Subscribed to wrong event name | Check the event tables above for exact event names | +| Duplicate event triggers | Multiple subscriptions without cleanup | Unsubscribe in `useEffect` cleanup or component unmount | +| Event fires but UI doesn’t update | State not updated in event handler | Ensure you call `setState` or equivalent in the handler | + + + + +*** ## Next Steps - - UI Kit initialization and login methods + + Init, login, logout, and message-sending methods. - - Explore all available components + + Explore all available prebuilt UI components. - - Display and manage conversation lists + + Display and manage conversation lists. - - Display messages in a conversation + + Render real-time message threads. + +*** diff --git a/ui-kit/react/extensions.mdx b/ui-kit/react/extensions.mdx index b7a57b77b..3a8b6a1ca 100644 --- a/ui-kit/react/extensions.mdx +++ b/ui-kit/react/extensions.mdx @@ -1,31 +1,29 @@ --- title: "Extensions" -description: "Overview of CometChat built-in extensions including stickers, polls, collaborative whiteboard, and more." +description: "Overview of CometChat's built-in extensions including Stickers, Polls, Collaborative Whiteboard, Collaborative Document, Message Translation, Link Preview, and Thumbnail Generation — activated via the Dashboard and auto-integrated into UI Kit components." --- {/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** -Built-in extensions (enable via Dashboard): -- **Bitly** → Shorten URLs in messages -- **Link Preview** → URL summaries in Message List -- **Message Shortcuts** → Predefined quick messages -- **Pin Message** → Pin important messages -- **Rich Media Preview** → Rich URL previews -- **Save Message** → Bookmark messages -- **Thumbnail Generation** → Image previews -- **TinyURL** → URL shortening -- **Voice Transcription** → Audio to text -- **Giphy** → GIF sharing -- **Message Translation** → Auto-translate messages -- **Polls** → Group voting in Message Composer -- **Stickers** → Fun expression in Message Composer -- **Collaborative Whiteboard** → Real-time drawing -- **Collaborative Document** → Shared document editing -- **Disappearing Messages** → Auto-delete messages - -Extensions auto-integrate with UI Kit components after Dashboard activation. +Key components that support extensions: +- **Message Composer** → [CometChatMessageComposer](/ui-kit/react/message-composer) (Stickers, Polls, Whiteboard, Document) +- **Message List** → [CometChatMessageList](/ui-kit/react/message-list) (Translation, Link Preview, Thumbnails) + +Extensions are enabled via the [CometChat Dashboard](/fundamentals/extensions-overview) — no additional code required once activated. + +Supported extensions: Stickers, Polls, Collaborative Whiteboard, Collaborative Document, Message Translation, Link Preview, Thumbnail Generation + + + +**AI Agent Component Spec** + +**Package:** `@cometchat/chat-uikit-react` +**Required setup:** `CometChatUIKit.init()` + `CometChatUIKit.login()` + Extensions enabled in Dashboard +**Extensions covered:** Stickers, Polls, Collaborative Whiteboard, Collaborative Document, Message Translation, Link Preview, Thumbnail Generation +**Primary components:** `CometChatMessageComposer`, `CometChatMessageList` +**Activation:** Enable each extension from the CometChat Dashboard — UI Kit auto-integrates them ## Overview @@ -33,7 +31,11 @@ Extensions auto-integrate with UI Kit components after Dashboard activation. CometChat's UI Kit offers built-in support for various extensions, enriching the chatting experience with enhanced functionality. These extensions augment your chat application, making it more interactive, secure, and efficient. -**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) | [Dashboard](/fundamentals/extensions-overview) +**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) | [Dashboard](https://app.cometchat.com) + + + +**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). @@ -186,17 +188,43 @@ The Intercom extension integrates Intercom's customer support platform with Come ## Next Steps +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. + + + + + + + + +| Symptom | Cause | Fix | +| --- | --- | --- | +| Extension feature not appearing | Extension not activated in CometChat Dashboard | Enable the specific extension from your [Dashboard](/fundamentals/extensions-overview) | +| Component doesn't render | `CometChatUIKit.init()` not called or not awaited | Ensure init completes before rendering. See [Methods](/ui-kit/react/methods) | +| Component renders but no extension UI | User not logged in | Call `CometChatUIKit.login("UID")` after init | +| Stickers not showing in composer | Sticker extension not enabled | Activate [Sticker Extension](/fundamentals/stickers) in Dashboard | +| Polls option missing from action sheet | Polls extension not enabled | Activate [Polls Extension](/fundamentals/polls) in Dashboard | +| Link preview not rendering in messages | Link Preview extension not enabled | Activate [Link Preview Extension](/fundamentals/link-preview) in Dashboard | +| SSR hydration error | Component uses browser APIs on server | Wrap in `useEffect` or dynamic import with `ssr: false`. See [Next.js Integration](/ui-kit/react/next-js-integration) | + + + + +--- + +## Next Steps + - - Explore core messaging capabilities + + Customize the composer where most extensions appear - - Integrate AI-powered chat features + + Customize the message list for extension-rendered content - - Customize the message input component + + Explore core chat features like messaging and reactions - - Display and customize message bubbles + + Explore AI-powered chat capabilities diff --git a/ui-kit/react/group-members.mdx b/ui-kit/react/group-members.mdx index a9029ec7a..b29a99f9b 100644 --- a/ui-kit/react/group-members.mdx +++ b/ui-kit/react/group-members.mdx @@ -1,6 +1,6 @@ --- title: "Group Members" -description: "A component that displays all users added or invited to a group, with member management capabilities including scope changes, kick, and ban options." +description: "CometChatGroupMembers component displays all users in a group with their roles, scopes, and online status. Supports member management actions, custom views, filtering via GroupMembersRequestBuilder, and CSS styling." --- {/* TL;DR for Agents and Quick Reference */} @@ -8,21 +8,33 @@ description: "A component that displays all users added or invited to a group, w **Quick Reference for AI Agents & Developers** ```tsx +import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; -// Minimal usage +// Requires a CometChat.Group object // With common props console.log(member)} + onItemClick={(groupMember) => console.log("Selected:", groupMember)} selectionMode={SelectionMode.none} - hideUserStatus={false} /> ``` + +**AI Agent Component Spec** + +**Package:** `@cometchat/chat-uikit-react` +**Import:** `import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";` +**Minimal JSX:** `` +**Required setup:** `CometChatUIKit.init()` + `CometChatUIKit.login()` +**Key props:** `group: CometChat.Group` (required), `onItemClick: (member: CometChat.GroupMember) => void`, `selectionMode: SelectionMode`, `groupMemberRequestBuilder: CometChat.GroupMembersRequestBuilder` +**CSS class:** `.cometchat-group-members` +**Events:** `CometChatGroupEvents` + + ## 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. @@ -35,6 +47,10 @@ import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; **Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) | [REST API](https://api-explorer.cometchat.com) + +**Before using this component:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration). + + *** ## Usage @@ -90,6 +106,16 @@ export default GroupMembersDemo; + +
+ +
+ ); +} +``` + + + *** @@ -1495,19 +1521,46 @@ export default GroupMembersDemo; *** +## Component API Pattern + +| Customization Type | Prop Pattern | Example | +| --- | --- | --- | +| Callback actions | `on={(param) => {}}` | `onItemClick={(member) => {}}` | +| Data filtering | `groupMemberRequestBuilder={new CometChat.GroupMembersRequestBuilder("GUID")}` | `groupMemberRequestBuilder={builder}` | +| Toggle features | `hide={true\|false}` | `hideSearch={true}` | +| Custom rendering | `View={() => JSX}` | `itemView={(member) =>
...
}` | +| CSS overrides | Target `.cometchat-group-members` class in global CSS | `.cometchat-group-members { ... }` | + + + + +| Symptom | Cause | Fix | +| --- | --- | --- | +| Component doesn't render | `CometChatUIKit.init()` not called or not awaited | Ensure init completes before rendering. See [Methods](/ui-kit/react/methods) | +| Component renders but shows no data | User not logged in | Call `CometChatUIKit.login("UID")` after init | +| No members displayed | `group` prop not passed or invalid | Ensure a valid `CometChat.Group` object is passed to the `group` prop | +| Callback not firing | Wrong prop name or signature | Check the Actions section for exact prop name and parameter types | +| Custom view not appearing | Returning `null` or `undefined` from view prop | Ensure view function returns valid JSX | +| SSR hydration error | Component uses browser APIs on server | Wrap in `useEffect` or dynamic import with `ssr: false`. See [Next.js Integration](/ui-kit/react/next-js-integration) | + + + + +--- + ## Next Steps - + Display and manage group lists - - Add new members to groups - - - Manage banned group members + + Display and manage user lists - Display messages in a group + Render messages in a chat view + + + Display recent conversations diff --git a/ui-kit/react/groups.mdx b/ui-kit/react/groups.mdx index df83c6708..11450895f 100644 --- a/ui-kit/react/groups.mdx +++ b/ui-kit/react/groups.mdx @@ -1,6 +1,6 @@ --- title: "Groups" -description: "A component that displays a searchable list of all available groups with member counts and group icons." +description: "CometChatGroups component displays a searchable list of all available groups with icons, names, member counts, and group type indicators. Supports selection modes, custom views, filtering via GroupsRequestBuilder, and CSS styling." --- {/* TL;DR for Agents and Quick Reference */} @@ -15,14 +15,25 @@ import { CometChatGroups } from "@cometchat/chat-uikit-react"; // With common props setSelectedGroup(group)} - hideGroupType={false} + onItemClick={(group) => console.log("Selected:", group)} + hideSearch={false} selectionMode={SelectionMode.none} - showSearchBar={true} /> ``` + +**AI Agent Component Spec** + +**Package:** `@cometchat/chat-uikit-react` +**Import:** `import { CometChatGroups } from "@cometchat/chat-uikit-react";` +**Minimal JSX:** `` +**Required setup:** `CometChatUIKit.init()` + `CometChatUIKit.login()` +**Key props:** `onItemClick: (group: CometChat.Group) => void`, `selectionMode: SelectionMode`, `groupsRequestBuilder: CometChat.GroupsRequestBuilder`, `hideSearch: boolean`, `hideGroupType: boolean` +**CSS class:** `.cometchat-groups` +**Events:** None (does not emit events directly) + + ## Overview The Groups is a Component, showcasing an accessible list of all available groups. It provides an integral search functionality, allowing you to locate any specific groups swiftly and easily. For each group listed, the group name is displayed by default, in conjunction with the group icon when available. Additionally, it provides a useful feature by displaying the number of members in each group as a subtitle, offering valuable context about group size and activity level. @@ -35,6 +46,10 @@ The Groups is a Component, showcasing an accessible list of all available groups **Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) | [REST API](https://api-explorer.cometchat.com) + +**Before using this component:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration). + + The Groups component is composed of the following BaseComponents: | Components | Description | @@ -586,7 +601,7 @@ import { CometChatGroups } from "@cometchat/chat-uikit-react"; import React from "react"; const GroupsDemo = () => { - const getItemView = (group: CometChat.Group) => { + const getItemView = (group) => { return (
@@ -1106,7 +1121,7 @@ import { CometChatGroups, CometChatOption } from "@cometchat/chat-uikit-react"; import React from "react"; const GroupsDemo = () => { - const getOptions = (group: CometChat.Group): CometChatOption[] => { + const getOptions = (group) => { return [ new CometChatOption({ id: "delete", @@ -1153,21 +1168,45 @@ export default GroupsDemo; +## Component API Pattern + +| Customization Type | Prop Pattern | Example | +| --- | --- | --- | +| Callback actions | `on={(param) => {}}` | `onItemClick={(group) => {}}` | +| Data filtering | `groupsRequestBuilder={new CometChat.GroupsRequestBuilder()}` | `groupsRequestBuilder={builder}` | +| Toggle features | `hide={true\|false}` | `hideSearch={true}` | +| Custom rendering | `View={() => JSX}` | `itemView={(group) =>
...
}` | +| CSS overrides | Target `.cometchat-groups` class in global CSS | `.cometchat-groups { ... }` | + + + + +| Symptom | Cause | Fix | +| --- | --- | --- | +| Component doesn't render | `CometChatUIKit.init()` not called or not awaited | Ensure init completes before rendering. See [Methods](/ui-kit/react/methods) | +| Component renders but shows no data | User not logged in | Call `CometChatUIKit.login("UID")` after init | +| Callback not firing | Wrong prop name or signature | Check the Actions section for exact prop name and parameter types | +| Custom view not appearing | Returning `null` or `undefined` from view prop | Ensure view function returns valid JSX | +| SSR hydration error | Component uses browser APIs on server | Wrap in `useEffect` or dynamic import with `ssr: false`. See [Next.js Integration](/ui-kit/react/next-js-integration) | + + + + --- ## Next Steps - - Display and manage group members + + View and manage members within a group Display and manage user lists - Display conversation lists + Display recent conversations - Display messages for a group + Render messages in a chat view diff --git a/ui-kit/react/guide-block-unblock-user.mdx b/ui-kit/react/guide-block-unblock-user.mdx index 89ffa633d..b9dd84b62 100644 --- a/ui-kit/react/guide-block-unblock-user.mdx +++ b/ui-kit/react/guide-block-unblock-user.mdx @@ -1,34 +1,20 @@ --- title: "Block/Unblock Users" sidebarTitle: "Block/Unblock Users" -description: "Learn how to implement user blocking functionality to prevent unwanted communication in your React chat app." +description: "Implement block and unblock user functionality in CometChat React UI Kit with composer state management." --- {/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** -```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { CometChatUserEvents } from "@cometchat/chat-uikit-react"; - -// Block a user -CometChat.blockUsers([userId]).then(() => { - user.setBlockedByMe(true); - CometChatUserEvents.ccUserBlocked.next(user); -}); - -// Unblock a user -CometChat.unblockUsers([userId]).then(() => { - user.setBlockedByMe(false); - CometChatUserEvents.ccUserUnblocked.next(user); -}); - -// Check if user is blocked -const isBlocked = user.getBlockedByMe(); -``` +- **Key component:** `CometChatMessages` +- **Prerequisites:** `CometChatUIKit.init()` + `CometChatUIKit.login()` must complete first +- **Sample app:** [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) +- **All guides:** [Guide Overview](/ui-kit/react/guide-overview) + Implement user blocking functionality to prevent unwanted communication in your React chat app. ## Overview @@ -305,29 +291,21 @@ CometChat.blockUsers([UID]).then( --- -## Next Steps & Further Reading - -- [CometChat React UI Kit Documentation](https://www.cometchat.com/docs/ui-kit/react/overview) -- [Sample App Repository](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) -- User Management Features -- Advanced Customization Guide -- Event Handling Documentation - ---- - ## Next Steps - - Display and manage user lists + + Display and manage user lists. - - Display conversation lists + + Customize the message input component. - - Display messages in conversations + + Browse all feature and formatter guides. - - Handle UI Kit events + + 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 560ce0737..285582530 100644 --- a/ui-kit/react/guide-call-log-details.mdx +++ b/ui-kit/react/guide-call-log-details.mdx @@ -1,30 +1,20 @@ --- title: "Call Log Details" sidebarTitle: "Call Log Details" -description: "Learn how to display comprehensive call information and history when users select calls from the calls tab in your React chat app." +description: "Build a detailed call insights screen with metadata, participants, and recordings in CometChat React UI Kit." --- {/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** -```tsx -import { CometChatCallLogs } from "@cometchat/chat-uikit-react"; - -// Display call logs with click handler - setSelectedCall(call)} -/> - -// Custom call details component - setSelectedCall(undefined)} -/> -``` +- **Key component:** `CometChatCallLogs + CometChatCallDetails` +- **Prerequisites:** `CometChatUIKit.init()` + `CometChatUIKit.login()` must complete first +- **Sample app:** [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) +- **All guides:** [Guide Overview](/ui-kit/react/guide-overview) + Display comprehensive call information and history when users select calls from the calls tab in your React chat app. ## Overview @@ -326,21 +316,21 @@ useEffect(() => { | Tab navigation | `activeTab` state | [CometChatCallLogDetails.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCallLog/CometChatCallLogDetails.tsx) | | User status monitoring| `CometChat.addUserListener()` | [CometChatCallLogDetails.tsx](https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/src/components/CometChatCallLog/CometChatCallLogDetails.tsx) | ---- - ## Next Steps - - Display call history + + The call logs component reference. - - Initiate voice and video calls + + Overview of calling capabilities. - - Handle incoming calls + + Browse all feature and formatter guides. - - Handle outgoing calls + + Full working sample application on GitHub. + +*** diff --git a/ui-kit/react/guide-group-chat.mdx b/ui-kit/react/guide-group-chat.mdx index 97674a450..d59bc06ed 100644 --- a/ui-kit/react/guide-group-chat.mdx +++ b/ui-kit/react/guide-group-chat.mdx @@ -1,37 +1,20 @@ --- title: "Group Chat" sidebarTitle: "Group Chat" -description: "Learn how to implement comprehensive group management functionality including creation, joining, member management, and administrative controls in your React chat app." +description: "Implement group management including create, join, members, roles, and ownership transfer in CometChat React UI Kit." --- {/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** -```tsx -import { CometChat } from "@cometchat/chat-sdk-javascript"; -import { - CometChatCreateGroup, - CometChatGroupMembers, - CometChatGroupEvents -} from "@cometchat/chat-uikit-react"; - -// Create a group -const group = new CometChat.Group(guid, groupName, groupType, password); -CometChat.createGroup(group).then((createdGroup) => { - CometChatGroupEvents.ccGroupCreated.next(createdGroup); -}); - -// Join a group -CometChat.joinGroup(guid, groupType, password).then((joinedGroup) => { - CometChatGroupEvents.ccGroupMemberJoined.next({ joinedGroup, joinedUser }); -}); - -// Display group members - -``` +- **Key component:** `CometChatGroups + CometChatGroupMembers` +- **Prerequisites:** `CometChatUIKit.init()` + `CometChatUIKit.login()` must complete first +- **Sample app:** [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) +- **All guides:** [Guide Overview](/ui-kit/react/guide-overview) + Implement comprehensive group management functionality including creation, joining, member management, and administrative controls in your React chat app. --- @@ -369,16 +352,18 @@ const handleGroupOperation = async (operation: () => Promise) => { ## Next Steps - - Display and manage group lists + + Display and manage group lists. - - Display group member lists + + Display and manage group member lists. - - Display messages in groups + + Browse all feature and formatter guides. - - Handle group events + + 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 673a880aa..c091babdc 100644 --- a/ui-kit/react/guide-message-privately.mdx +++ b/ui-kit/react/guide-message-privately.mdx @@ -1,35 +1,20 @@ --- title: "Message Privately" sidebarTitle: "Message Privately" -description: "Learn how to enable users to initiate private conversations with group members directly from group chat interfaces." +description: "Launch a direct 1:1 chat from a group member profile in CometChat React UI Kit." --- {/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** -```tsx -import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; - -// Group members with private messaging option - startPrivateChatFromGroup(member, group)} - options={[{ - id: "message_privately", - title: "Message Privately", - onClick: (member) => startPrivateChatFromGroup(member, group) - }]} -/> - -// Start private chat from group context -const startPrivateChatFromGroup = (user, group) => { - CometChat.getConversation(user.getUid(), "user") - .then((conversation) => setSelectedItem(conversation)); -}; -``` +- **Key component:** `CometChatMessages + CometChatGroupMembers` +- **Prerequisites:** `CometChatUIKit.init()` + `CometChatUIKit.login()` must complete first +- **Sample app:** [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) +- **All guides:** [Guide Overview](/ui-kit/react/guide-overview) + Enable users to initiate private conversations with group members directly from group chat interfaces. ## Overview @@ -346,16 +331,18 @@ const startPrivateChatFromGroup = async (user: CometChat.User, group: CometChat. ## Next Steps - - Display group member lists + + Display and manage group member lists. - - Display messages in conversations + + Render real-time message threads. - - Display and manage user lists + + Browse all feature and formatter guides. - - Display conversation lists + + 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 27d0e5ad4..87dd97d2d 100644 --- a/ui-kit/react/guide-new-chat.mdx +++ b/ui-kit/react/guide-new-chat.mdx @@ -1,32 +1,20 @@ --- title: "New Chat" sidebarTitle: "New Chat" -description: "Learn how to enable users to create new conversations with individual users or join existing groups in your React chat app." +description: "Build a unified new chat entry point for starting 1:1 or group conversations in CometChat React UI Kit." --- {/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** -```tsx -import { CometChatUsers, CometChatGroups } from "@cometchat/chat-uikit-react"; - -// User selection for new chat - { - setNewChat({ user }); - setShowNewChat(false); - }} -/> - -// Group selection for new chat - joinGroup(group)} -/> -``` +- **Key component:** `CometChatUsers + CometChatGroups` +- **Prerequisites:** `CometChatUIKit.init()` + `CometChatUIKit.login()` must complete first +- **Sample app:** [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) +- **All guides:** [Guide Overview](/ui-kit/react/guide-overview) + Enable users to create new conversations with individual users or join existing groups in your React chat app. ## Overview @@ -284,16 +272,18 @@ const joinGroup = (e) => { ## Next Steps - - Display and manage user lists + + Display and manage conversation lists. - - Display and manage group lists + + Display and manage group lists. - - Display conversation lists + + Browse all feature and formatter guides. - - Display messages in conversations + + Full working sample application on GitHub. - + + +*** diff --git a/ui-kit/react/guide-overview.mdx b/ui-kit/react/guide-overview.mdx index 558865bc2..784ebacb4 100644 --- a/ui-kit/react/guide-overview.mdx +++ b/ui-kit/react/guide-overview.mdx @@ -1,21 +1,17 @@ --- title: "Overview" sidebarTitle: "Overview" -description: "Index of focused, task-oriented feature guides for the React UI Kit showing how to implement specific capabilities end-to-end." +description: "Index of task-oriented feature guides for the CometChat React UI Kit." --- {/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** -This page indexes all feature implementation guides for the React UI Kit. Each guide provides step-by-step instructions for implementing specific chat capabilities including: -- User blocking/unblocking -- Call log details -- Group management -- Private messaging -- Threaded messages -- Message search -- Text formatters +This page indexes all feature guides for the React UI Kit. Each guide shows how to implement a specific capability end-to-end. + +- **Sample app:** [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) +- **Components:** [Components Overview](/ui-kit/react/components-overview) > 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. diff --git a/ui-kit/react/guide-search-messages.mdx b/ui-kit/react/guide-search-messages.mdx index efd2dda9c..f3201162b 100644 --- a/ui-kit/react/guide-search-messages.mdx +++ b/ui-kit/react/guide-search-messages.mdx @@ -1,37 +1,20 @@ --- title: "Search Messages" sidebarTitle: "Search Messages" -description: "Learn how to enable users to search messages within conversations and group chats using CometChat's React UI Kit." +description: "Add full-text message search across conversations with result routing in CometChat React UI Kit." --- {/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** -```tsx -import { CometChatMessageList } from "@cometchat/chat-uikit-react"; - -// Search messages with keyword - - -// Handle search input -const onSearch = (keyword) => { - setSearchKeyword(keyword); - setGoToMessageId(undefined); -}; - -// Navigate to search result -const handleResultClick = (messageId) => { - setGoToMessageId(messageId); -}; -``` +- **Key component:** `CometChatSearchMessages + CometChatMessageList` +- **Prerequisites:** `CometChatUIKit.init()` + `CometChatUIKit.login()` must complete first +- **Sample app:** [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) +- **All guides:** [Guide Overview](/ui-kit/react/guide-overview) + Enable users to search messages within conversations and group chats using CometChat's React UI Kit. ## Overview @@ -210,16 +193,18 @@ try { ## Next Steps - - Display messages in conversations + + The search component reference. - - Implement threaded conversations + + Render real-time message threads. - - Compose and send messages + + Browse all feature and formatter guides. - - Display conversation lists + + Full working sample application on GitHub. - + + +*** diff --git a/ui-kit/react/guide-threaded-messages.mdx b/ui-kit/react/guide-threaded-messages.mdx index 89131fc6e..0c58c9490 100644 --- a/ui-kit/react/guide-threaded-messages.mdx +++ b/ui-kit/react/guide-threaded-messages.mdx @@ -1,34 +1,20 @@ --- title: "Threaded Messages" sidebarTitle: "Threaded Messages" -description: "Learn how to enable organized threaded conversations within group chats using CometChat's React UI Kit." +description: "Implement threaded message replies with parent context, reply list, and focused thread composer in CometChat React UI Kit." --- {/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** -```tsx -import { - CometChatMessages, - CometChatThreadedMessages -} from "@cometchat/chat-uikit-react"; - -// Enable thread replies in messages - setThreadedMessage(message)} -/> - -// Display threaded messages - setThreadedMessage(undefined)} -/> -``` +- **Key component:** `CometChatThreadHeader` +- **Prerequisites:** `CometChatUIKit.init()` + `CometChatUIKit.login()` must complete first +- **Sample app:** [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) +- **All guides:** [Guide Overview](/ui-kit/react/guide-overview) + Enable organized threaded conversations within group chats using CometChat's React UI Kit. ## Overview @@ -238,16 +224,18 @@ useEffect(() => { ## Next Steps - - Display messages in conversations + + Render real-time message threads. - - Display and manage group lists + + Customize the thread header component. - - Search messages in conversations + + Browse all feature and formatter guides. - - Compose and send messages + + Full working sample application on GitHub. - + + +*** diff --git a/ui-kit/react/incoming-call.mdx b/ui-kit/react/incoming-call.mdx index cf85fa3a3..9029c181b 100644 --- a/ui-kit/react/incoming-call.mdx +++ b/ui-kit/react/incoming-call.mdx @@ -1,6 +1,6 @@ --- title: "Incoming Call" -description: "A component that displays incoming voice or video calls with options to accept or decline." +description: "Display and manage incoming voice and video calls with accept/decline controls using the CometChatIncomingCall component." --- {/* TL;DR for Agents and Quick Reference */} @@ -10,18 +10,30 @@ description: "A component that displays incoming voice or video calls with optio ```tsx import { CometChatIncomingCall } from "@cometchat/chat-uikit-react"; -// Minimal usage +// Minimal usage — auto-detects incoming calls -// With common props +// With custom handlers handleAccept()} - onDecline={() => handleDecline()} + onAccept={() => console.log("Call accepted")} + onDecline={() => console.log("Call declined")} disableSoundForCalls={false} /> ``` + +**AI Agent Component Spec** + +**Package:** `@cometchat/chat-uikit-react` +**Import:** `import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";` +**Minimal JSX:** `` +**Required setup:** `CometChatUIKit.init()` + `CometChatUIKit.login()` +**Key props:** `onAccept` (callback), `onDecline` (callback), `call` (CometChat.Call), `disableSoundForCalls` (boolean), `callSettingsBuilder` (function) +**CSS class:** `.cometchat-incoming-call` +**Events:** `ccCallRejected`, `ccCallAccepted`, `ccCallEnded` + + ## 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. @@ -42,6 +54,14 @@ The `Incoming Call` is comprised of the following base components: | cometchat-button | This component represents a button with optional icon and text. | | cometchat-avatar | This component component displays an image or user's avatar with fallback to the first two letters of the username. | + +**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) + + + +**Before using this component:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration). + + ## Usage ### Integration @@ -967,21 +987,37 @@ export default IncomingCallsDemo; + + + + +| Symptom | Cause | Fix | +| --- | --- | --- | +| Component doesn't render | `CometChatUIKit.init()` not called or not awaited | Ensure init completes before rendering. See [Methods](/ui-kit/react/methods) | +| Component renders but no incoming call shown | User not logged in or no active incoming call | Call `CometChatUIKit.login("UID")` after init. The component auto-detects incoming calls. | +| Callback not firing | Wrong prop name or signature | Check the Actions section for exact prop name and parameter types | +| Custom view not appearing | Returning `null` or `undefined` from view prop | Ensure view function returns valid JSX | +| No ringtone playing | `disableSoundForCalls` set to `true` or custom sound path invalid | Set `disableSoundForCalls={false}` and verify custom sound file path | +| SSR hydration error | Component uses browser APIs on server | Wrap in `useEffect` or dynamic import with `ssr: false`. See [Next.js Integration](/ui-kit/react/next-js-integration) | + + + + --- ## Next Steps - Handle outgoing calls + Manage outgoing voice and video calls - - Initiate voice and video calls + + Add voice and video call buttons to your chat - Display call history + Display call history and call log details - - Handle call events + + Overview of all calling capabilities diff --git a/ui-kit/react/localize.mdx b/ui-kit/react/localize.mdx index ebca01120..bfd7be367 100644 --- a/ui-kit/react/localize.mdx +++ b/ui-kit/react/localize.mdx @@ -1,34 +1,35 @@ --- title: "Localization" sidebarTitle: "Localize" -description: "Configure multi-language localization to adapt UI elements based on user's preferred language settings." +description: "Configure multi-language localization, custom translations, and date/time formatting in CometChat React UI Kit." --- {/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** -```tsx +```javascript import { CometChatLocalize } from "@cometchat/chat-uikit-react"; -// Initialize localization +// Set language +CometChatLocalize.setCurrentLanguage("fr"); + +// Init with full config CometChatLocalize.init({ language: "es", fallbackLanguage: "en-US", disableAutoDetection: false, }); -// Set language at runtime -CometChatLocalize.setCurrentLanguage("fr"); - -// Get localized string -const text = CometChatLocalize.getLocalizedString("welcome_message"); - // Add custom translations CometChatLocalize.addTranslation({ - "en-US": { "custom_key": "Custom Value" } + "en-US": { "welcome_message": "Welcome!" } }); ``` + +- **19 supported languages** including en-US, fr, de, es, ja, ko, zh, and more +- **CalendarObject** for custom date/time formatting +- [GitHub source](https://github.com/cometchat/cometchat-uikit-react/blob/v6/src/resources/CometChatLocalize/cometchat-localize.ts) ## **Overview** @@ -419,22 +420,40 @@ To apply a **custom date format** only within a specific component. /> ``` -*** +## Common Failure Modes + + + + +| Symptom | Cause | Fix | +| --- | --- | --- | +| UI text not translated | Language code not matching supported codes | Check the supported languages table for exact codes (e.g., `en-US` not `en`) | +| Custom translations not appearing | `addTranslation` called before `init` | Call `CometChatLocalize.init()` first, then `addTranslation()` | +| Date/time format unchanged | `disableDateTimeLocalization` set to `true` | Set `disableDateTimeLocalization: false` in init config | +| Component-level CalendarObject ignored | Prop name mismatch | Check the component docs for the exact prop name (e.g., `lastActiveAtDateTimeFormat`) | +| Missing translation key shows raw key | No `missingKeyHandler` configured | Add a `missingKeyHandler` function in init config | + + + + +*** ## Next Steps - - Customize UI appearance + + Configure audio cues for calls and messages. - - Configure notification sounds + + Customize colors, fonts, and styles. - - Explore all UI components + + Explore all available prebuilt UI components. - - Set up the React UI Kit + + Init, login, logout, and other UI Kit methods. + +*** diff --git a/ui-kit/react/mentions-formatter-guide.mdx b/ui-kit/react/mentions-formatter-guide.mdx index ba6ab274e..b3ce59808 100644 --- a/ui-kit/react/mentions-formatter-guide.mdx +++ b/ui-kit/react/mentions-formatter-guide.mdx @@ -1,28 +1,19 @@ --- title: "Mentions Formatter" -description: "Learn how to format @mentions within text messages with customizable styles and click handling." +description: "Add @mentions with styled tokens, suggestion list, and click handling in CometChat React UI Kit." --- {/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** -```tsx -import { CometChatMentionsFormatter } from "@cometchat/chat-uikit-react"; - -// Initialize the formatter -const mentionsFormatter = new CometChatMentionsFormatter(); -mentionsFormatter.setCometChatUserGroupMembers(userList); - -// Apply formatter to message -const formattedMessage = mentionsFormatter.getFormattedText(unformattedMessage); - -// Use in MessageComposer or MessageList - - -``` +- **Key component:** `CometChatMentionsFormatter` +- **Prerequisites:** `CometChatUIKit.init()` + `CometChatUIKit.login()` must complete first +- **Sample app:** [GitHub](https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app) +- **All guides:** [Guide Overview](/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. @@ -70,22 +61,21 @@ mentionsFormatter.setCometChatUserGroupMembers(userList); Below is an example demonstrating how to use the `CometChatMentionsFormatter` class in components such as [CometChatConversations](/ui-kit/react/conversations), [CometChatMessageList](/ui-kit/react/message-list), [CometChatMessageComposer](/ui-kit/react/message-composer). - ---- - ## Next Steps - - Compose messages with mentions + + Build custom inline text patterns. - - Display messages with formatted mentions + + Render real-time message threads. - - Create custom text formatters + + Browse all feature and formatter guides. - - Format URLs in messages + + Full working sample application on GitHub. + +*** diff --git a/ui-kit/react/message-composer.mdx b/ui-kit/react/message-composer.mdx index c5883c20e..d9f38f70c 100644 --- a/ui-kit/react/message-composer.mdx +++ b/ui-kit/react/message-composer.mdx @@ -1,6 +1,6 @@ --- title: "Message Composer" -description: "A component that enables users to write and send text, media, and custom messages with attachments and editing support." +description: "CometChatMessageComposer component provides a rich text input for composing and sending messages including text, media, attachments, reactions, mentions, and voice notes. Supports custom actions, AI features, and CSS styling." --- {/* TL;DR for Agents and Quick Reference */} @@ -8,24 +8,29 @@ description: "A component that enables users to write and send text, media, and **Quick Reference for AI Agents & Developers** ```tsx +import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; -// For user chat +// For a user chat -// For group chat +// For a group chat - -// With common props - handleSend(message)} -/> ``` + +**AI Agent Component Spec** + +**Package:** `@cometchat/chat-uikit-react` +**Import:** `import { CometChatMessageComposer } from "@cometchat/chat-uikit-react";` +**Minimal JSX:** `` or `` +**Required setup:** `CometChatUIKit.init()` + `CometChatUIKit.login()` +**Key props:** `user: CometChat.User`, `group: CometChat.Group`, `text: string`, `parentMessageId: number`, `hideVoiceRecording: boolean` +**CSS class:** `.cometchat-message-composer` +**Events:** `CometChatMessageEvents` + + ## Overview MessageComposer is a Component that enables users to write and send a variety of messages, including text, image, video, and custom messages. @@ -40,6 +45,10 @@ Features such as **Attachments**, and **Message Editing** are also supported by **Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) + +**Before using this component:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration). + + ## Usage ### Integration @@ -47,7 +56,7 @@ Features such as **Attachments**, and **Message Editing** are also supported by The following code snippet illustrates how you can directly incorporate the MessageComposer component into your app. - + ```tsx import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; @@ -71,15 +80,15 @@ export function MessageComposerDemo() { - + ```jsx -import React from "react"; +import React, { useState, useEffect } from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; export function MessageComposerDemo() { - const [chatUser, setChatUser] = React.useState(null); - React.useEffect(() => { + const [chatUser, setChatUser] = useState(null); + useEffect(() => { CometChat.getUser("uid").then((user) => { setChatUser(user); }); @@ -985,6 +994,19 @@ export function MessageComposerDemo() { *** + + + +| Symptom | Cause | Fix | +| --- | --- | --- | +| Component doesn't render | `CometChatUIKit.init()` not called or not awaited | Ensure init completes before rendering. See [Methods](/ui-kit/react/methods) | +| Component renders but can't send messages | User not logged in | Call `CometChatUIKit.login("UID")` after init | +| Attachments not working | File permissions or browser restrictions | Ensure the browser allows file access | +| Voice recording not available | `hideVoiceRecording={true}` is set or browser doesn't support MediaRecorder | Check prop and browser compatibility | +| SSR hydration error | Component uses browser APIs on server | Wrap in `useEffect` or dynamic import with `ssr: false`. See [Next.js Integration](/ui-kit/react/next-js-integration) | + + + --- @@ -992,15 +1014,15 @@ export function MessageComposerDemo() { - Display messages in a conversation + Render messages in a chat view - Customize message bubble appearance + Customize message bubble rendering - Display conversation header with user/group info + Display user/group details in the toolbar - - Enable @mentions in messages + + Add stickers, polls, and more to the composer diff --git a/ui-kit/react/message-header.mdx b/ui-kit/react/message-header.mdx index c98583182..c58477657 100644 --- a/ui-kit/react/message-header.mdx +++ b/ui-kit/react/message-header.mdx @@ -1,6 +1,6 @@ --- title: "Message Header" -description: "A component that displays user or group details in the toolbar with typing indicator and back navigation." +description: "CometChatMessageHeader component displays user or group details in the toolbar including avatar, name, status, typing indicator, and back navigation. Supports custom views and CSS styling." --- {/* TL;DR for Agents and Quick Reference */} @@ -8,24 +8,29 @@ description: "A component that displays user or group details in the toolbar wit **Quick Reference for AI Agents & Developers** ```tsx +import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageHeader } from "@cometchat/chat-uikit-react"; -// For user chat +// For a user chat -// For group chat +// For a group chat - -// With common props - handleBack()} - hideUserStatus={false} -/> ``` + +**AI Agent Component Spec** + +**Package:** `@cometchat/chat-uikit-react` +**Import:** `import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";` +**Minimal JSX:** `` or `` +**Required setup:** `CometChatUIKit.init()` + `CometChatUIKit.login()` +**Key props:** `user: CometChat.User`, `group: CometChat.Group`, `hideBackButton: boolean`, `hideUserStatus: boolean` +**CSS class:** `.cometchat-message-header` +**Events:** None (does not emit events directly) + + ## Overview `MessageHeader` is a Component that showcases the [User](/sdk/javascript/users-overview) or [Group](/sdk/javascript/groups-overview) details in the toolbar. Furthermore, it also presents a typing indicator and a back navigation button for ease of use. @@ -38,6 +43,10 @@ import { CometChatMessageHeader } from "@cometchat/chat-uikit-react"; **Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) + +**Before using this component:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration). + + The `MessageHeader` is comprised of the following components: | Component | Description | @@ -735,21 +744,37 @@ function getDateFormat() { +*** + + + + +| Symptom | Cause | Fix | +| --- | --- | --- | +| Component doesn't render | `CometChatUIKit.init()` not called or not awaited | Ensure init completes before rendering. See [Methods](/ui-kit/react/methods) | +| Component renders but shows no data | User not logged in | Call `CometChatUIKit.login("UID")` after init | +| Typing indicator not showing | No active typing in the conversation | Typing indicator appears only when the other user is actively typing | +| Back button not visible | `hideBackButton={true}` is set | Remove or set `hideBackButton={false}` | +| SSR hydration error | Component uses browser APIs on server | Wrap in `useEffect` or dynamic import with `ssr: false`. See [Next.js Integration](/ui-kit/react/next-js-integration) | + + + + --- ## Next Steps - Display messages in a conversation + Render messages in a chat view - Add message input and sending capabilities + Compose and send messages - Enable threaded message conversations + Display threaded message details - - Handle real-time chat events + + Display recent conversations diff --git a/ui-kit/react/message-list.mdx b/ui-kit/react/message-list.mdx index cd71c3fc5..07cb57237 100644 --- a/ui-kit/react/message-list.mdx +++ b/ui-kit/react/message-list.mdx @@ -1,6 +1,6 @@ --- title: "Message List" -description: "A component that displays messages in a conversation with real-time updates, reactions, threads, and customization options." +description: "CometChatMessageList component renders a scrollable list of sent and received messages including text, media, reactions, read receipts, and threaded replies. Supports custom message templates, date separators, and CSS styling." --- {/* TL;DR for Agents and Quick Reference */} @@ -8,24 +8,29 @@ description: "A component that displays messages in a conversation with real-tim **Quick Reference for AI Agents & Developers** ```tsx +import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageList } from "@cometchat/chat-uikit-react"; -// For user chat +// For a user chat -// For group chat +// For a group chat - -// With common props - openThread(message)} -/> ``` + +**AI Agent Component Spec** + +**Package:** `@cometchat/chat-uikit-react` +**Import:** `import { CometChatMessageList } from "@cometchat/chat-uikit-react";` +**Minimal JSX:** `` or `` +**Required setup:** `CometChatUIKit.init()` + `CometChatUIKit.login()` +**Key props:** `user: CometChat.User`, `group: CometChat.Group`, `messagesRequestBuilder: CometChat.MessagesRequestBuilder`, `templates: CometChatMessageTemplate[]`, `hideReceipts: boolean` +**CSS class:** `.cometchat-message-list` +**Events:** `CometChatMessageEvents` + + ## Overview `MessageList` is a composite component that displays a list of messages and effectively manages real-time operations. It includes various types of messages such as Text Messages, Media Messages, Stickers, and more. @@ -38,6 +43,10 @@ import { CometChatMessageList } from "@cometchat/chat-uikit-react"; **Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) + +**Before using this component:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration). + + *** ## Usage @@ -47,7 +56,7 @@ import { CometChatMessageList } from "@cometchat/chat-uikit-react"; The following code snippet illustrates how you can directly incorporate the MessageList component into your Application. - + ```tsx import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; @@ -71,15 +80,15 @@ export function MessageListDemo() { - + ```jsx -import React from "react"; +import React, { useState, useEffect } 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(() => { + const [chatUser, setChatUser] = useState(null); + useEffect(() => { CometChat.getUser("uid").then((user) => { setChatUser(user); }); @@ -1619,6 +1628,19 @@ export function MessageListDemo() { *** + + + +| Symptom | Cause | Fix | +| --- | --- | --- | +| Component doesn't render | `CometChatUIKit.init()` not called or not awaited | Ensure init completes before rendering. See [Methods](/ui-kit/react/methods) | +| Component renders but shows no messages | User not logged in | Call `CometChatUIKit.login("UID")` after init | +| Messages not updating in real-time | WebSocket connection issue | Check [Connection Status](/sdk/javascript/connection-status) | +| Custom template not rendering | Template `type` or `category` doesn't match message | Verify template matches the message's `type` and `category` fields | +| SSR hydration error | Component uses browser APIs on server | Wrap in `useEffect` or dynamic import with `ssr: false`. See [Next.js Integration](/ui-kit/react/next-js-integration) | + + + --- @@ -1626,15 +1648,15 @@ export function MessageListDemo() { - Add message input and sending capabilities + Compose and send messages - Display conversation header with user/group info + Display user/group details in the toolbar - Customize message bubble appearance and behavior + Customize message bubble rendering - Enable threaded message conversations + Display threaded message details diff --git a/ui-kit/react/message-template.mdx b/ui-kit/react/message-template.mdx index ac43cc2ba..56e259208 100644 --- a/ui-kit/react/message-template.mdx +++ b/ui-kit/react/message-template.mdx @@ -1,6 +1,6 @@ --- title: "Message Template" -description: "A blueprint for defining and customizing message bubble structure, appearance, and behavior in the chat interface." +description: "CometChatMessageTemplate provides a structure for defining custom message types and their rendering in the message list. Use templates to customize how different message categories and types are displayed." --- {/* TL;DR for Agents and Quick Reference */} @@ -8,34 +8,34 @@ description: "A blueprint for defining and customizing message bubble structure, **Quick Reference for AI Agents & Developers** ```tsx -import { CometChatUIKit, CometChatMessageTemplate, CometChatUIKitConstants } from "@cometchat/chat-uikit-react"; +import { CometChatMessageTemplate } from "@cometchat/chat-uikit-react"; +import { ChatConfigurator } from "@cometchat/chat-uikit-react"; -// Get all existing templates -const templates = CometChatUIKit.getDataSource().getAllMessageTemplates(); +// Get default templates +const templates = ChatConfigurator.getDataSource().getAllMessageTemplates(); -// Customize a specific template (e.g., text messages) -templates.forEach((template) => { - if (template.type === CometChatUIKitConstants.MessageTypes.text) { - template.headerView = (message) => ; - template.contentView = (message) => ; - template.footerView = (message) => ; - } -}); - -// Create a custom message template -const customTemplate = new CometChatMessageTemplate({ - type: "customType", - category: CometChatUIKitConstants.MessageCategory.custom, - contentView: (message) => , -}); - -// Apply templates to MessageList - +// Pass custom templates to MessageList + ``` + +**AI Agent Component Spec** + +**Package:** `@cometchat/chat-uikit-react` +**Import:** `import { CometChatMessageTemplate } from "@cometchat/chat-uikit-react";` +**Usage:** Pass `templates` prop to `CometChatMessageList` +**Required setup:** `CometChatUIKit.init()` + `CometChatUIKit.login()` +**Key properties:** `category: string`, `type: string`, `contentView`, `bubbleView`, `headerView`, `footerView` +**Related:** Used with `CometChatMessageList` via the `templates` prop + + ## Overview + +**Before using message templates:** 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). + + MessageTemplate provides you with the capability to define and customize both the structure and the behavior of the Message Bubble. It acts as a schema or design blueprint for the creation of a variety of Message Bubble components, allowing you to manage the appearance and interactions of Message Bubble within your application effectively and consistently. ### Structure @@ -1966,21 +1966,36 @@ export { CustomMessageTemplate }; + + + + +| Symptom | Cause | Fix | +| --- | --- | --- | +| Custom template not rendering | Template `type` or `category` doesn't match message | Verify template matches the message's `type` and `category` fields | +| Component doesn't render | `CometChatUIKit.init()` not called or not awaited | Ensure init completes before rendering. See [Methods](/ui-kit/react/methods) | +| Default templates missing | Not using `ChatConfigurator.getDataSource().getAllMessageTemplates()` | Start with default templates and modify from there | +| Custom view returning blank | View function returns `null` or `undefined` | Ensure view function returns valid JSX | +| SSR hydration error | Component uses browser APIs on server | Wrap in `useEffect` or dynamic import with `ssr: false`. See [Next.js Integration](/ui-kit/react/next-js-integration) | + + + + --- ## Next Steps - Display messages using custom templates + Use templates with the message list component - Add message input and sending capabilities + Compose and send messages - - Create custom text formatting rules + + Customize the look and feel of your chat UI - - Customize colors, fonts, and styling + + Style individual message bubbles with CSS diff --git a/ui-kit/react/methods.mdx b/ui-kit/react/methods.mdx index c783062e6..5f74abce1 100644 --- a/ui-kit/react/methods.mdx +++ b/ui-kit/react/methods.mdx @@ -1,6 +1,6 @@ --- title: "Methods" -description: "Reference documentation for CometChatUIKit methods including init, login, logout, and message sending." +description: "Reference for CometChat React UI Kit methods including init, login, logout, and message-sending wrappers." --- {/* TL;DR for Agents and Quick Reference */} @@ -8,17 +8,12 @@ description: "Reference documentation for CometChatUIKit methods including init, **Quick Reference for AI Agents & Developers** ```javascript -import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; +import { CometChatUIKit } from "@cometchat/chat-uikit-react"; // Init -const UIKitSettings = new UIKitSettingsBuilder() - .setAppId("APP_ID") - .setRegion("REGION") - .setAuthKey("AUTH_KEY") - .build(); CometChatUIKit.init(UIKitSettings); -// Login +// Login with UID (dev only) CometChatUIKit.login("UID"); // Login with Auth Token (production) @@ -27,8 +22,16 @@ CometChatUIKit.loginWithAuthToken("AUTH_TOKEN"); // Logout CometChatUIKit.logout(); -// Get logged in user +// Get logged-in user CometChatUIKit.getLoggedinUser(); + +// Create user +CometChatUIKit.createUser(user); + +// Send messages +CometChatUIKit.sendTextMessage(textMessage); +CometChatUIKit.sendMediaMessage(mediaMessage); +CometChatUIKit.sendCustomMessage(customMessage); ``` @@ -617,22 +620,41 @@ CometChatUIKit.sendCustomMessage(customMessage) +*** ---- +## Common Failure Modes + + + + +| Symptom | Cause | Fix | +| --- | --- | --- | +| `init()` fails silently | Invalid App ID, Region, or Auth Key | Double-check credentials from the [CometChat Dashboard](https://app.cometchat.com/) | +| `login()` returns error | UID doesn’t exist or Auth Key is invalid | Create the user first via Dashboard or `createUser()` method | +| `getLoggedinUser()` returns null | User not logged in or session expired | Call `login()` or `loginWithAuthToken()` first | +| `sendTextMessage()` fails | User not logged in or invalid receiver | Ensure login completes before sending messages | +| Auth Key exposed in production | Using Auth Key instead of Auth Token | Switch to `loginWithAuthToken()` for production | + + + + +*** ## Next Steps - - Subscribe to real-time chat events + + Subscribe to real-time events across UI Kit components. - - Explore all available UI components + + Explore all available prebuilt UI components. - - Learn about messaging capabilities + + Customize colors, fonts, and styles. - - Customize colors, fonts, and styling + + Learn about messaging, real-time updates, and more. + +*** diff --git a/ui-kit/react/next-conversation.mdx b/ui-kit/react/next-conversation.mdx index 2a88a54a9..2d4b056d2 100644 --- a/ui-kit/react/next-conversation.mdx +++ b/ui-kit/react/next-conversation.mdx @@ -1,42 +1,20 @@ --- title: "Building A Conversation List + Message View" sidebarTitle: "Conversation List + Message View" -description: "Build a two-panel chat interface with conversation list sidebar and message view for Next.js applications." +description: "Build a two-panel conversation list + message view layout in Next.js with CometChat UI Kit." --- {/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** -```tsx -import { - CometChatConversations, - CometChatMessageHeader, - CometChatMessageList, - CometChatMessageComposer -} from "@cometchat/chat-uikit-react"; - -// Two-panel layout: Sidebar + Message View -
- {/* Sidebar */} - setActiveChat(conversation)} - /> - - {/* Message View */} -
- - - -
-
-``` - -- **Next.js Integration** → [Getting Started](/ui-kit/react/next-js-integration) -- **One-to-One Chat** → [One-to-One Chat](/ui-kit/react/next-one-to-one-chat) -- **Tab-Based Chat** → [Tab-Based Chat](/ui-kit/react/next-tab-based-chat) +- **Framework:** Next.js +- **Key components:** `CometChatConversations + CometChatMessageList` +- **Prerequisites:** `CometChatUIKit.init()` + `CometChatUIKit.login()` must complete first +- **Parent guide:** [Next.js Integration](/ui-kit/react/next-js-integration) + The **Conversation List + Message View** layout offers a seamless **two-panel chat interface**, commonly used in modern messaging applications like **WhatsApp Web, Slack, and Microsoft Teams**. This design enables users to switch between conversations effortlessly while keeping the chat window open, ensuring a **smooth, real-time messaging experience**. @@ -489,10 +467,40 @@ npm run dev *** -## **Next Steps** -### **Enhance the User Experience** +## Common Failure Modes + + + + +| Symptom | Cause | Fix | +| --- | --- | --- | +| Component doesn’t render | `CometChatUIKit.init()` not called or not awaited | Ensure init completes before rendering. See [Methods](/ui-kit/react/methods) | +| Component renders but shows no data | User not logged in | Call `CometChatUIKit.login("UID")` after init | +| CSS/theme not applied | Missing CSS import | Add `@import url("@cometchat/chat-uikit-react/css-variables.css");` in your CSS | +| Blank screen after login | Component mounted before init/login completes | Use state to conditionally render after login resolves | +| Messages not loading | Invalid user/group object passed | Ensure you fetch the user/group via SDK before passing to components | + + + + +*** + +## **Next Steps** -* **[Advanced Customizations](/ui-kit/react/theme)** – Personalize the chat UI to align with your brand. + + + Personalize the chat UI to align with your brand. + + + Explore all available prebuilt UI components. + + + Return to the Next.js setup guide. + + + Learn about messaging, real-time updates, and more. + + *** diff --git a/ui-kit/react/next-js-integration.mdx b/ui-kit/react/next-js-integration.mdx index 8d1a8d595..710d2c188 100644 --- a/ui-kit/react/next-js-integration.mdx +++ b/ui-kit/react/next-js-integration.mdx @@ -1,7 +1,7 @@ --- title: "Getting Started With CometChat React UI Kit For Next.js" sidebarTitle: "Integration" -description: "Step-by-step guide to integrate CometChat UI Kit into your Next.js application with SSR-compatible chat components." +description: "Step-by-step guide to integrate CometChat React UI Kit into your Next.js application with App Router support." --- {/* TL;DR for Agents and Quick Reference */} @@ -14,10 +14,8 @@ npm install @cometchat/chat-uikit-react ``` ```tsx -// Client-side only - use 'use client' directive or dynamic import import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; -// Initialize const UIKitSettings = new UIKitSettingsBuilder() .setAppId("APP_ID") .setRegion("REGION") @@ -25,15 +23,11 @@ const UIKitSettings = new UIKitSettingsBuilder() .build(); CometChatUIKit.init(UIKitSettings); - -// Login CometChatUIKit.login("UID"); - -// Render components (client-side only) -import { CometChatConversations, CometChatMessageList, CometChatMessageComposer } from "@cometchat/chat-uikit-react"; ``` -- **Next.js Conversation** → [Conversation List + Message](/ui-kit/react/next-conversation) +- **Next.js** → This page +- **React.js** → [React.js Integration](/ui-kit/react/react-js-integration) - **All Components** → [Components Overview](/ui-kit/react/components-overview) @@ -460,13 +454,44 @@ Integrate a conversation view that suits your application's **UX requirements**. *** +## Common Failure Modes + + + + +| Symptom | Cause | Fix | +| --- | --- | --- | +| `CometChatUIKit.init()` fails silently | Invalid App ID, Region, or Auth Key | Double-check credentials from the [CometChat Dashboard](https://app.cometchat.com/) | +| Component doesn’t render | `init()` not called or not awaited before rendering | Ensure `init()` completes before mounting components. See [Methods](/ui-kit/react/methods) | +| Component renders but shows no data | User not logged in | Call `CometChatUIKit.login("UID")` after init | +| Login fails with "UID not found" | UID doesn’t exist in your CometChat app | Create the user via Dashboard, SDK, or API first | +| CSS/theme not applied | Missing CSS import | Add `@import url("@cometchat/chat-uikit-react/css-variables.css");` in your `App.css` | +| Blank screen after login | Component mounted before init/login completes | Use state to conditionally render after login resolves | +| SSR hydration error | CometChat components use browser APIs on server | Wrap in `useEffect` or use dynamic import with `ssr: false`. See [Next.js Integration](/ui-kit/react/next-js-integration) | +| Auth Key exposed in production | Using Auth Key instead of Auth Token | Switch to [Auth Token](/ui-kit/react/methods#login-using-auth-token) for production | + + + + +*** + ## **Next Steps** Now that you’ve selected your **chat experience**, proceed to the **integration guide**: -* **[Integrate Conversation List + Message](/ui-kit/react/next-conversation)** -* **[Integrate One-to-One Chat](/ui-kit/react/next-one-to-one-chat)** -* **[Integrate Tab-Based Chat](/ui-kit/react/next-tab-based-chat)** -* **[Advanced Customizations](/ui-kit/react/theme)** + + + Two-panel layout with conversation list and message view. + + + Focused direct messaging experience without a sidebar. + + + Multi-tab navigation for chats, calls, users, and settings. + + + Customize colors, fonts, and styles to match your branding. + + *** diff --git a/ui-kit/react/next-one-to-one-chat.mdx b/ui-kit/react/next-one-to-one-chat.mdx index cc4a44109..01315ffa0 100644 --- a/ui-kit/react/next-one-to-one-chat.mdx +++ b/ui-kit/react/next-one-to-one-chat.mdx @@ -1,31 +1,20 @@ --- title: "Building A One To One/Group Chat Experience" sidebarTitle: "One To One/Group Chat" -description: "Build a focused direct messaging interface for one-to-one or group chat in Next.js applications." +description: "Build a focused one-to-one or group chat experience in Next.js with CometChat UI Kit." --- {/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** -```tsx -import { CometChatMessageHeader, CometChatMessageList, CometChatMessageComposer } from "@cometchat/chat-uikit-react"; -import { CometChat } from "@cometchat/chat-sdk-javascript"; - -// Fetch user for one-to-one chat -const user = await CometChat.getUser("cometchat-uid-1"); - -// Render chat components (client-side only) - - - -``` - -- **Next.js Integration** → [Getting Started](/ui-kit/react/next-js-integration) -- **Conversation List + Message** → [Conversation View](/ui-kit/react/next-conversation) -- **Tab-Based Chat** → [Tab-Based Chat](/ui-kit/react/next-tab-based-chat) +- **Framework:** Next.js +- **Key components:** `CometChatMessageHeader + CometChatMessageList + CometChatMessageComposer` +- **Prerequisites:** `CometChatUIKit.init()` + `CometChatUIKit.login()` must complete first +- **Parent guide:** [Next.js Integration](/ui-kit/react/next-js-integration) + The **One-to-One Chat** feature provides a streamlined **direct messaging interface**, making it ideal for **support chats, dating apps, and private messaging platforms**. This setup eliminates distractions by focusing solely on a **dedicated chat window**. [](https://link.cometchat.com/next-one-on-one) @@ -348,10 +337,40 @@ a { npm run dev ``` -## **Next Steps** -### **Enhance the User Experience** +## Common Failure Modes + + + + +| Symptom | Cause | Fix | +| --- | --- | --- | +| Component doesn’t render | `CometChatUIKit.init()` not called or not awaited | Ensure init completes before rendering. See [Methods](/ui-kit/react/methods) | +| Component renders but shows no data | User not logged in | Call `CometChatUIKit.login("UID")` after init | +| CSS/theme not applied | Missing CSS import | Add `@import url("@cometchat/chat-uikit-react/css-variables.css");` in your CSS | +| Blank screen after login | Component mounted before init/login completes | Use state to conditionally render after login resolves | +| Messages not loading | Invalid user/group object passed | Ensure you fetch the user/group via SDK before passing to components | + + + + +*** + +## **Next Steps** -* **[Advanced Customizations](/ui-kit/react/theme)** – Personalize the chat UI to align with your brand. + + + Personalize the chat UI to align with your brand. + + + Explore all available prebuilt UI components. + + + Return to the Next.js setup guide. + + + Learn about messaging, real-time updates, and more. + + *** diff --git a/ui-kit/react/next-tab-based-chat.mdx b/ui-kit/react/next-tab-based-chat.mdx index f9a9d32c3..f9f124113 100644 --- a/ui-kit/react/next-tab-based-chat.mdx +++ b/ui-kit/react/next-tab-based-chat.mdx @@ -1,47 +1,20 @@ --- title: "Building A Messaging UI With Tabs, Sidebar, And Message View" sidebarTitle: "Tab Based Chat Experience" -description: "Build a tab-based messaging UI with navigation between Chats, Calls, Users, and Groups in Next.js applications." +description: "Build a tab-based messaging UI with chats, calls, users, and groups in Next.js with CometChat UI Kit." --- {/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** -```tsx -import { - CometChatConversations, - CometChatCallLogs, - CometChatUsers, - CometChatGroups, - CometChatMessageHeader, - CometChatMessageList, - CometChatMessageComposer -} from "@cometchat/chat-uikit-react"; - -// Tab-based layout with sidebar and message view -
- {/* Tab Navigation */} - - - {/* Sidebar based on active tab */} - {activeTab === "chats" && } - {activeTab === "calls" && } - {activeTab === "users" && } - {activeTab === "groups" && } - - {/* Message View */} - - - -
-``` - -- **Next.js Integration** → [Getting Started](/ui-kit/react/next-js-integration) -- **Conversation List + Message** → [Conversation View](/ui-kit/react/next-conversation) -- **One-to-One Chat** → [One-to-One Chat](/ui-kit/react/next-one-to-one-chat) +- **Framework:** Next.js +- **Key components:** `CometChatConversations + CometChatCallLogs + CometChatUsers + CometChatGroups` +- **Prerequisites:** `CometChatUIKit.init()` + `CometChatUIKit.login()` must complete first +- **Parent guide:** [Next.js Integration](/ui-kit/react/next-js-integration) + This guide walks you through creating a **tab-based messaging UI** using **React** and **CometChat UIKit**. The UI will include different sections for **Chats, Calls, Users, and Groups**, allowing seamless navigation. [](https://link.cometchat.com/next-tabs-sidebar-message) @@ -732,10 +705,40 @@ npm run dev *** -## **Next Steps** -### **Enhance the User Experience** +## Common Failure Modes + + + + +| Symptom | Cause | Fix | +| --- | --- | --- | +| Component doesn’t render | `CometChatUIKit.init()` not called or not awaited | Ensure init completes before rendering. See [Methods](/ui-kit/react/methods) | +| Component renders but shows no data | User not logged in | Call `CometChatUIKit.login("UID")` after init | +| CSS/theme not applied | Missing CSS import | Add `@import url("@cometchat/chat-uikit-react/css-variables.css");` in your CSS | +| Blank screen after login | Component mounted before init/login completes | Use state to conditionally render after login resolves | +| Messages not loading | Invalid user/group object passed | Ensure you fetch the user/group via SDK before passing to components | + + + + +*** + +## **Next Steps** -* **[Advanced Customizations](/ui-kit/react/theme)** – Personalize the chat UI to align with your brand. + + + Personalize the chat UI to align with your brand. + + + Explore all available prebuilt UI components. + + + Return to the Next.js setup guide. + + + Learn about messaging, real-time updates, and more. + + *** diff --git a/ui-kit/react/outgoing-call.mdx b/ui-kit/react/outgoing-call.mdx index 8feccc55c..01ff9a92c 100644 --- a/ui-kit/react/outgoing-call.mdx +++ b/ui-kit/react/outgoing-call.mdx @@ -1,6 +1,6 @@ --- title: "Outgoing Call" -description: "A component that displays outgoing voice or video calls with options to cancel and view call status." +description: "Display and manage outgoing voice and video calls with cancel controls using the CometChatOutgoingCall component." --- {/* TL;DR for Agents and Quick Reference */} @@ -8,26 +8,33 @@ description: "A component that displays outgoing voice or video calls with optio **Quick Reference for AI Agents & Developers** ```tsx -import { CometChatOutgoingCall, CometChatUIKitConstants } from "@cometchat/chat-uikit-react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { CometChatOutgoingCall, CometChatUIKitConstants } from "@cometchat/chat-uikit-react"; -// Initiate a call -const callObject = new CometChat.Call( - "uid", - CometChatUIKitConstants.MessageTypes.audio, - CometChatUIKitConstants.MessageReceiverType.user -); -const call = await CometChat.initiateCall(callObject); - -// Render outgoing call component - handleCancel()} +// Requires a CometChat.Call object +const callObject = new CometChat.Call("uid", CometChatUIKitConstants.MessageTypes.audio, CometChatUIKitConstants.MessageReceiverType.user); +const initiatedCall = await CometChat.initiateCall(callObject); + + console.log("Call canceled")} disableSoundForCalls={false} /> ``` + +**AI Agent Component Spec** + +**Package:** `@cometchat/chat-uikit-react` +**Import:** `import { CometChatOutgoingCall } from "@cometchat/chat-uikit-react";` +**Minimal JSX:** `` +**Required setup:** `CometChatUIKit.init()` + `CometChatUIKit.login()` + `CometChat.initiateCall()` +**Key props:** `call` (CometChat.Call, required), `onCallCanceled` (callback), `disableSoundForCalls` (boolean), `titleView` (JSX), `subtitleView` (JSX) +**CSS class:** `.cometchat-outgoing-call` +**Events:** none emitted directly + + ## Overview @@ -47,12 +54,20 @@ The `Outgoing Call` is comprised of the following components: | CometChat Button | This component represents a button with optional icon and text. | | CometChat Avatar | This component component displays an image or user's avatar with fallback to the first two letters of the username. | + +**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) + + + +**Before using this component:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration). + + ## Usage ### Integration - + ```tsx import { CometChat } from "@cometchat/chat-sdk-javascript"; import { @@ -87,19 +102,37 @@ export default OutgoingCallDemo; - -```tsx -import { OutgoingCallDemo } from "./OutgoingCallDemo"; + +```jsx +import React, { useState, useEffect } from "react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { + CometChatOutgoingCall, + CometChatUIKitConstants, +} from "@cometchat/chat-uikit-react"; -export default function App() { - return ( -
-
- -
-
- ); -} +const OutgoingCallDemo = () => { + const [call, setCall] = useState(null); + + useEffect(() => { + const uid = "uid"; + + const callObject = new CometChat.Call( + uid, + CometChatUIKitConstants.MessageTypes.audio, + CometChatUIKitConstants.MessageReceiverType.user + ); + CometChat.initiateCall(callObject) + .then((c) => { + setCall(c); + }) + .catch(console.log); + }, []); + + return call ? : null; +}; + +export default OutgoingCallDemo; ``` @@ -1057,21 +1090,37 @@ export default OutgoingCallDemo; + + + + +| Symptom | Cause | Fix | +| --- | --- | --- | +| Component doesn't render | `CometChatUIKit.init()` not called or not awaited | Ensure init completes before rendering. See [Methods](/ui-kit/react/methods) | +| Component renders but shows nothing | `call` prop not provided or is `undefined` | Pass a valid `CometChat.Call` object from `CometChat.initiateCall()` | +| Callback not firing | Wrong prop name or signature | Check the Actions section for exact prop name and parameter types | +| Custom view not appearing | Returning `null` or `undefined` from view prop | Ensure view function returns valid JSX | +| No ringtone playing | `disableSoundForCalls` set to `true` or custom sound path invalid | Set `disableSoundForCalls={false}` and verify custom sound file path | +| SSR hydration error | Component uses browser APIs on server | Wrap in `useEffect` or dynamic import with `ssr: false`. See [Next.js Integration](/ui-kit/react/next-js-integration) | + + + + --- ## Next Steps - Handle incoming voice and video calls with accept/reject options. - - - Display call history with details like duration and participants. + Handle incoming voice and video calls - Add voice and video call buttons to initiate calls. + Add voice and video call buttons to your chat + + + Display call history and call log details - - Customize colors, fonts, and styling to match your brand. + + Overview of all calling capabilities diff --git a/ui-kit/react/overview.mdx b/ui-kit/react/overview.mdx index edceb87bc..cad1701d1 100644 --- a/ui-kit/react/overview.mdx +++ b/ui-kit/react/overview.mdx @@ -1,7 +1,7 @@ --- title: "CometChat UI Kit For React" sidebarTitle: "Overview" -description: "A powerful React UI Kit with prebuilt, customizable chat components for rapid integration of messaging and calling features." +description: "Prebuilt, customizable React UI components for adding chat, voice, and video calling to your app. Supports React.js, Next.js, React Router, and Astro." --- {/* TL;DR for Agents and Quick Reference */} @@ -14,34 +14,44 @@ npm install @cometchat/chat-uikit-react ``` ```tsx +// Init + Login (run once at app start) import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; -// Initialize const UIKitSettings = new UIKitSettingsBuilder() .setAppId("APP_ID") .setRegion("REGION") .setAuthKey("AUTH_KEY") .build(); -CometChatUIKit.init(UIKitSettings); - -// Login -CometChatUIKit.login("UID"); +await CometChatUIKit.init(UIKitSettings); +await CometChatUIKit.login("UID"); +``` -// Key Components +```tsx +// Render a component import { CometChatConversations } from "@cometchat/chat-uikit-react"; - console.log(conversation)} /> - -import { CometChatMessageList, CometChatMessageComposer } from "@cometchat/chat-uikit-react"; - - + ``` - **React.js** → [React.js Integration](/ui-kit/react/react-js-integration) - **Next.js** → [Next.js Integration](/ui-kit/react/next-js-integration) +- **React Router** → [React Router Integration](/ui-kit/react/react-router-integration) +- **Astro** → [Astro Integration](/ui-kit/react/astro-integration) - **All Components** → [Components Overview](/ui-kit/react/components-overview) + +**AI Agent Component Spec** + +**Package:** `@cometchat/chat-uikit-react` +**Install:** `npm install @cometchat/chat-uikit-react` +**Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` — must complete before rendering any component +**Key components:** `CometChatConversations`, `CometChatMessageList`, `CometChatMessageComposer`, `CometChatMessageHeader`, `CometChatUsers`, `CometChatGroups` +**Theming:** Override CSS variables on `.cometchat` class. See [Theming](/ui-kit/react/theme) +**Calling:** Requires separate `@cometchat/calls-sdk-javascript` package. See [Call Features](/ui-kit/react/call-features) +**SSR:** Components require browser APIs — use client-side only rendering for Next.js/Astro + + The **CometChat UI Kit** for React is a powerful solution designed to seamlessly integrate chat functionality into applications. It provides a robust set of **prebuilt UI components** that are **modular, customizable, and highly scalable**, allowing developers to accelerate their development process with minimal effort. @@ -61,7 +71,7 @@ You must call `CometChatUIKit.init(UIKitSettings)` before rendering any UI Kit c ## **Why Choose CometChat UI Kit?** * **Rapid Integration** – Prebuilt UI components for faster deployment. -* **Customizable & Flexible** – Modify the UI to align with your brand’s identity. +* **Customizable & Flexible** – Modify the UI to align with your brand's identity. * **Cross-Platform Compatibility** – Works seamlessly across various React-based frameworks. * **Scalable & Reliable** – Built on CometChat's **robust chat infrastructure** for enterprise-grade performance. @@ -120,11 +130,11 @@ A ready-to-use chat interface—configured via a UI Kit Builder—built on top o * Drag-and-drop or point-and-click to enable or disable components. * Customize layouts and styles—no deep coding required. -**Why It’s Great** +**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. +* **Fewer Moving Parts** – Reliable, pre-assembled UI that's easy to maintain. @@ -165,9 +175,9 @@ A collection of individual components—like conversation lists, message lists, * Import the components you need from our UI Kits. * Arrange them in your desired layout, applying styling or customization as needed. -* You don’t need to rewrite the SDK calls yourself—each component already integrates with CometChat logic. +* You don't need to rewrite the SDK calls yourself—each component already integrates with CometChat logic. -**Why It’s Great** +**Why It's Great** * **Flexible Design** – You control the final UI arrangement. * **No Extra Overhead** – Implement only the features you need. @@ -273,15 +283,15 @@ If you need assistance, check out: - Step-by-step guide to integrate CometChat in your React app + Step-by-step setup guide for React.js applications - Explore all available UI components and their capabilities + Browse all available prebuilt UI components - Learn about messaging, conversations, and user management + Chat features included out of the box - - Customize colors, fonts, and styling to match your brand + + Customize colors, fonts, and styles to match your brand diff --git a/ui-kit/react/property-changes.mdx b/ui-kit/react/property-changes.mdx index 6325c67b3..93fd4dd94 100644 --- a/ui-kit/react/property-changes.mdx +++ b/ui-kit/react/property-changes.mdx @@ -1,7 +1,20 @@ --- title: "Property Changes" -description: "Reference guide for property changes, new additions, and removed properties when upgrading to React UI Kit v6." +description: "Detailed reference of renamed, added, and removed properties and methods when upgrading from CometChat React UI Kit v5 to v6." --- +{/* TL;DR for Agents and Quick Reference */} + +**Quick Reference for AI Agents & Developers** + +This page lists all property and method changes between v5 and v6 for each component: +- **Conversations, Users, Groups, Group Members** +- **Message Header, Message List, Message Composer** +- **Incoming Call, Outgoing Call, Call Buttons, Call Logs** +- **CometChatLocalize** methods + +See [Upgrading from v5](/ui-kit/react/upgrading-from-v5) for the full migration guide. + + {/* TL;DR for Agents and Quick Reference */} @@ -119,21 +132,23 @@ import { CalendarObject } from "@cometchat/chat-uikit-react"; | isRTL | Returns true if the active language is rtl otherwise return false. | | getDir | Returns `rtl` or `ltr` based on the active language. | ---- +*** ## Next Steps - - Complete migration guide with step-by-step instructions for upgrading. + + Full migration guide with breaking changes. - - Configure language settings and translations in your app. + + Explore all v6 prebuilt UI components. - - Customize colors, fonts, and styling to match your brand. + + Init, login, logout, and other UI Kit methods. - - Explore all available UI components and their properties. + + Subscribe to real-time events across components. + +*** diff --git a/ui-kit/react/react-conversation.mdx b/ui-kit/react/react-conversation.mdx index ad11afdf2..67cdb45ce 100644 --- a/ui-kit/react/react-conversation.mdx +++ b/ui-kit/react/react-conversation.mdx @@ -1,31 +1,20 @@ --- title: "Building A Conversation List + Message View" sidebarTitle: "Conversation List + Message View" -description: "Build a two-panel chat interface with conversation list sidebar and message view, similar to WhatsApp Web, Slack, and Microsoft Teams." +description: "Build a two-panel conversation list + message view layout in React.js with CometChat UI Kit." --- {/* TL;DR for Agents and Quick Reference */} **Quick Reference for AI Agents & Developers** -```tsx -import { CometChatConversations, CometChatMessageHeader, CometChatMessageList, CometChatMessageComposer } from "@cometchat/chat-uikit-react"; - -// Sidebar - Conversation List - setActiveChat(conversation)} /> - -// Message View - - - -``` - -Key components: -- **CometChatConversations** → [Conversations](/ui-kit/react/conversations) -- **CometChatMessageList** → [Message List](/ui-kit/react/message-list) -- **CometChatMessageComposer** → [Message Composer](/ui-kit/react/message-composer) +- **Framework:** React.js +- **Key components:** `CometChatConversations + CometChatMessageList` +- **Prerequisites:** `CometChatUIKit.init()` + `CometChatUIKit.login()` must complete first +- **Parent guide:** [React.js Integration](/ui-kit/react/react-js-integration) + The **Conversation List + Message View** layout offers a seamless **two-panel chat interface**, commonly used in modern messaging applications like **WhatsApp Web, Slack, and Microsoft Teams**. This design enables users to switch between conversations effortlessly while keeping the chat window open, ensuring a **smooth, real-time messaging experience**. @@ -409,21 +398,40 @@ npm start *** + +## Common Failure Modes + + + + +| Symptom | Cause | Fix | +| --- | --- | --- | +| Component doesn’t render | `CometChatUIKit.init()` not called or not awaited | Ensure init completes before rendering. See [Methods](/ui-kit/react/methods) | +| Component renders but shows no data | User not logged in | Call `CometChatUIKit.login("UID")` after init | +| CSS/theme not applied | Missing CSS import | Add `@import url("@cometchat/chat-uikit-react/css-variables.css");` in your CSS | +| Blank screen after login | Component mounted before init/login completes | Use state to conditionally render after login resolves | +| Messages not loading | Invalid user/group object passed | Ensure you fetch the user/group via SDK before passing to components | + + + + +*** + ## **Next Steps** - - Build a focused direct messaging experience + + Personalize the chat UI to align with your brand. - - Create a multi-tab navigation interface + + Explore all available prebuilt UI components. - - Customize colors, fonts, and styling + + Return to the React.js setup guide. - - Explore all available UI components + + Learn about messaging, real-time updates, and more. ---- +*** diff --git a/ui-kit/react/react-js-integration.mdx b/ui-kit/react/react-js-integration.mdx index b8518cd68..f83c0bad5 100644 --- a/ui-kit/react/react-js-integration.mdx +++ b/ui-kit/react/react-js-integration.mdx @@ -1,7 +1,7 @@ --- title: "Getting Started With CometChat React UI Kit" sidebarTitle: "Integration" -description: "Step-by-step guide to integrate CometChat React UI Kit with prebuilt components, theming options, and support for one-to-one and group conversations." +description: "Step-by-step guide to integrate CometChat React UI Kit into your React.js application with Vite or Create React App." --- {/* TL;DR for Agents and Quick Reference */} @@ -15,24 +15,20 @@ npm install @cometchat/chat-uikit-react ```tsx import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; -import "@cometchat/chat-uikit-react/css-variables.css"; -// 1. Initialize const UIKitSettings = new UIKitSettingsBuilder() .setAppId("APP_ID") .setRegion("REGION") .setAuthKey("AUTH_KEY") - .subscribePresenceForAllUsers() .build(); -await CometChatUIKit.init(UIKitSettings); - -// 2. Login -await CometChatUIKit.login("cometchat-uid-1"); - -// 3. Render component - console.log(conversation)} /> +CometChatUIKit.init(UIKitSettings); +CometChatUIKit.login("UID"); ``` + +- **React.js** → This page +- **Next.js** → [Next.js Integration](/ui-kit/react/next-js-integration) +- **All Components** → [Components Overview](/ui-kit/react/components-overview) The **CometChat UI Kit for React** streamlines the integration of in-app chat functionality by providing a **comprehensive set of prebuilt UI components**. It offers seamless **theming options**, including **light and dark modes**, customizable fonts, colors, and extensive styling capabilities. @@ -531,22 +527,42 @@ import { CometChatFrameProvider } from "@cometchat/ui-kit"; | `iframeId` | string | The DOM `id` of the target ` - - -**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. - - - -} - href="/ui-kit/react/builder-integration" - horizontal -/> - -} - href="/ui-kit/react/builder-integration-nextjs" - horizontal -/> - -} - href="/ui-kit/react/builder-integration-react-router" - horizontal -/> - - - -*** - -### **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. @@ -215,24 +160,7 @@ A collection of individual components—like conversation lists, message lists, -*** - -## **Next Steps** - - - - Get started with React.js setup and configuration - - - Integrate with Next.js and SSR support - - - Explore all available UI components - - - Customize colors, fonts, and styling - - +*** --- From 634512a73dcff7370fc39c9e123d55fadf31a2c5 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 18 Feb 2026 17:13:09 +0530 Subject: [PATCH 08/59] Update overview.mdx --- ui-kit/react/overview.mdx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/ui-kit/react/overview.mdx b/ui-kit/react/overview.mdx index cb2372f62..8425a860b 100644 --- a/ui-kit/react/overview.mdx +++ b/ui-kit/react/overview.mdx @@ -160,9 +160,7 @@ A collection of individual components—like conversation lists, message lists, -*** - ---- +*** ## **Helpful Resources** From 7a10731029f87e80ae438c3289bc94f2981dd43e Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 18 Feb 2026 18:08:06 +0530 Subject: [PATCH 09/59] fixes errors --- ui-kit/react/ai-features.mdx | 1 - ui-kit/react/group-members.mdx | 10 ---------- ui-kit/react/theme/color-resources.mdx | 4 ---- ui-kit/react/theme/message-bubble-styling.mdx | 6 ------ 4 files changed, 21 deletions(-) diff --git a/ui-kit/react/ai-features.mdx b/ui-kit/react/ai-features.mdx index d4926849e..68110c30b 100644 --- a/ui-kit/react/ai-features.mdx +++ b/ui-kit/react/ai-features.mdx @@ -1,6 +1,5 @@ --- title: "AI User Copilot" -description: "AI-powered features including Conversation Starters, Smart Replies, and Conversation Summary to enhance user engagement." description: "Overview of CometChat's AI-powered features including Conversation Starters, Smart Replies, and Conversation Summary — with the UI Kit components that power each feature." --- diff --git a/ui-kit/react/group-members.mdx b/ui-kit/react/group-members.mdx index b29a99f9b..9817c391e 100644 --- a/ui-kit/react/group-members.mdx +++ b/ui-kit/react/group-members.mdx @@ -106,16 +106,6 @@ export default GroupMembersDemo; - -
- -
- ); -} -``` - - - *** diff --git a/ui-kit/react/theme/color-resources.mdx b/ui-kit/react/theme/color-resources.mdx index b685035dc..a6f1de995 100644 --- a/ui-kit/react/theme/color-resources.mdx +++ b/ui-kit/react/theme/color-resources.mdx @@ -117,8 +117,6 @@ The primary color defines key actions, branding, and UI elements, while the exte --cometchat-extended-primary-color-800: #7965db; --cometchat-extended-primary-color-900: #5d49be; ``` - - *** @@ -141,8 +139,6 @@ The primary color defines key actions, branding, and UI elements, while the exte --cometchat-extended-primary-color-800: #5745b4; --cometchat-extended-primary-color-900: #7460d9; ``` - - ### Extended Primary Colors diff --git a/ui-kit/react/theme/message-bubble-styling.mdx b/ui-kit/react/theme/message-bubble-styling.mdx index 8489afad9..352cae949 100644 --- a/ui-kit/react/theme/message-bubble-styling.mdx +++ b/ui-kit/react/theme/message-bubble-styling.mdx @@ -143,8 +143,6 @@ Use the following code to achieve the customization shown above. --cometchat-extended-primary-color-900: #fbaa75; } ``` - - **Expected result:** All outgoing message bubbles change from purple to orange (#f76808) with a lighter orange shade (#fbaa75). @@ -174,8 +172,6 @@ Use the following code to achieve the customization shown above. --cometchat-neutral-color-300: #f76808; } ``` - - **Expected result:** All incoming message bubbles change from white/light to orange (#f76808). @@ -209,8 +205,6 @@ Use the following code to achieve the customization shown above. --cometchat-extended-primary-color-900: #fbaa75; } ``` - - **Expected result:** Both incoming and outgoing bubbles use orange (#f76808), with outgoing shade set to lighter orange (#fbaa75). From 534e8c14597817d17811cb7ffb2a3bd6eacb1293 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 18 Feb 2026 18:18:08 +0530 Subject: [PATCH 10/59] Update react-js-integration.mdx --- ui-kit/react/react-js-integration.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui-kit/react/react-js-integration.mdx b/ui-kit/react/react-js-integration.mdx index f83c0bad5..9cb9e77c1 100644 --- a/ui-kit/react/react-js-integration.mdx +++ b/ui-kit/react/react-js-integration.mdx @@ -208,7 +208,7 @@ You must call `CometChatUIKit.init(UIKitSettings)` before rendering any UI Kit c -```ts +```ts lines highlight={7-9} import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; /** @@ -338,7 +338,7 @@ The **Login** method returns a **User object** containing all relevant details o -```ts +```ts lines highlight={3} import { CometChatUIKit } from "@cometchat/chat-uikit-react"; const UID = "UID"; // Replace with your actual UID From cc1a2e3a390bd78667096360decb03204e5021e6 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 18 Feb 2026 18:23:34 +0530 Subject: [PATCH 11/59] Update react-conversation.mdx --- ui-kit/react/react-conversation.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/ui-kit/react/react-conversation.mdx b/ui-kit/react/react-conversation.mdx index 67cdb45ce..5ac9df324 100644 --- a/ui-kit/react/react-conversation.mdx +++ b/ui-kit/react/react-conversation.mdx @@ -59,7 +59,7 @@ src/ -```tsx CometChatSelector.tsx +```tsx CometChatSelector.tsx lines import { useEffect, useState } from "react"; import { Conversation, @@ -130,7 +130,7 @@ export const CometChatSelector = (props: SelectorProps) => { -```css CometChatSelector.css +```css CometChatSelector.css lines /* Styles for the menu icon in the conversation header */ .selector-wrapper .cometchat-conversations .cometchat-list__header-menu .cometchat-button__icon { background: var(--cometchat-icon-color-primary); @@ -255,7 +255,7 @@ Now we will update the `App.tsx` & `App.css` files to import these new component -```tsx App.tsx +```tsx App.tsx lines import { useState } from "react"; import { CometChatMessageComposer, @@ -329,7 +329,7 @@ export default App; -```css App.css +```css App.css lines /* Root container settings */ #root { text-align: center; From 9a353a379d2e8de44c1f2ebd989a375f9be9a99e Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 18 Feb 2026 18:35:12 +0530 Subject: [PATCH 12/59] Update react-conversation.mdx --- ui-kit/react/react-conversation.mdx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/ui-kit/react/react-conversation.mdx b/ui-kit/react/react-conversation.mdx index 5ac9df324..73eb161b0 100644 --- a/ui-kit/react/react-conversation.mdx +++ b/ui-kit/react/react-conversation.mdx @@ -392,9 +392,19 @@ export default App; ### **Step 3: Run the project** -```powershell + + +```bash +npm run dev +``` + + + +```bash npm start ``` + + *** From 9e3b877a45c365cc70e6587449b93872bf219f8b Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 18 Feb 2026 18:49:08 +0530 Subject: [PATCH 13/59] run app via respective framework --- ui-kit/react/astro-conversation.mdx | 22 +++++++++++++++--- ui-kit/react/astro-one-to-one-chat.mdx | 22 +++++++++++++++--- ui-kit/react/astro-tab-based-chat.mdx | 23 +++++++++++++++---- ui-kit/react/next-conversation.mdx | 18 ++++++++++++++- ui-kit/react/next-one-to-one-chat.mdx | 18 ++++++++++++++- ui-kit/react/next-tab-based-chat.mdx | 18 ++++++++++++++- ui-kit/react/react-one-to-one-chat.mdx | 21 +++++++++++++---- ui-kit/react/react-router-conversation.mdx | 18 ++++++++++++++- ui-kit/react/react-router-one-to-one-chat.mdx | 18 ++++++++++++++- ui-kit/react/react-router-tab-based-chat.mdx | 18 ++++++++++++++- ui-kit/react/react-tab-based-chat.mdx | 12 +++++++++- 11 files changed, 186 insertions(+), 22 deletions(-) diff --git a/ui-kit/react/astro-conversation.mdx b/ui-kit/react/astro-conversation.mdx index b0683fe02..e3ce5f248 100644 --- a/ui-kit/react/astro-conversation.mdx +++ b/ui-kit/react/astro-conversation.mdx @@ -251,9 +251,25 @@ This layout includes: - ```bash - npm run dev - ``` + + + ```bash + npm run dev + ``` + + + + ```bash + pnpm dev + ``` + + + + ```bash + yarn dev + ``` + + Open your app and verify you can select conversations on the left and exchange messages on the right. diff --git a/ui-kit/react/astro-one-to-one-chat.mdx b/ui-kit/react/astro-one-to-one-chat.mdx index 05914fd44..fce48462b 100644 --- a/ui-kit/react/astro-one-to-one-chat.mdx +++ b/ui-kit/react/astro-one-to-one-chat.mdx @@ -223,9 +223,25 @@ The One‑to‑One/Group chat layout focuses on a single conversation, ideal for - ```bash - npm run dev - ``` + + + ```bash + npm run dev + ``` + + + + ```bash + pnpm dev + ``` + + + + ```bash + yarn dev + ``` + + Set `PUBLIC_COMETCHAT_LOGIN_UID` and `PUBLIC_COMETCHAT_TARGET_UID` then verify messages appear for the selected peer. diff --git a/ui-kit/react/astro-tab-based-chat.mdx b/ui-kit/react/astro-tab-based-chat.mdx index b76b926fd..663e1b0f3 100644 --- a/ui-kit/react/astro-tab-based-chat.mdx +++ b/ui-kit/react/astro-tab-based-chat.mdx @@ -337,9 +337,25 @@ Layout structure: - ```bash - npm run dev - ``` + + + ```bash + npm run dev + ``` + + + + ```bash + pnpm dev + ``` + + + + ```bash + yarn dev + ``` + + Log in using `PUBLIC_COMETCHAT_LOGIN_UID`, switch tabs, and open a conversation to send messages. @@ -407,4 +423,3 @@ The message panel shows only for Chats, Users, or Groups. Calls tab does not ope You can reuse `src/lib/cometchat-init.js` and swap the island component to build other experiences. - diff --git a/ui-kit/react/next-conversation.mdx b/ui-kit/react/next-conversation.mdx index 2d4b056d2..627f3b2bf 100644 --- a/ui-kit/react/next-conversation.mdx +++ b/ui-kit/react/next-conversation.mdx @@ -461,9 +461,25 @@ a { ### **Step 5: Run the project** -``` + + +```bash npm run dev ``` + + + +```bash +pnpm dev +``` + + + +```bash +yarn dev +``` + + *** diff --git a/ui-kit/react/next-one-to-one-chat.mdx b/ui-kit/react/next-one-to-one-chat.mdx index 01315ffa0..c923262d9 100644 --- a/ui-kit/react/next-one-to-one-chat.mdx +++ b/ui-kit/react/next-one-to-one-chat.mdx @@ -333,9 +333,25 @@ a { ### **Step 6: Run the project** -``` + + +```bash npm run dev ``` + + + +```bash +pnpm dev +``` + + + +```bash +yarn dev +``` + + ## Common Failure Modes diff --git a/ui-kit/react/next-tab-based-chat.mdx b/ui-kit/react/next-tab-based-chat.mdx index f9f124113..4c9d390d2 100644 --- a/ui-kit/react/next-tab-based-chat.mdx +++ b/ui-kit/react/next-tab-based-chat.mdx @@ -699,9 +699,25 @@ a { ### **Step 6: Run the project** -``` + + +```bash npm run dev ``` + + + +```bash +pnpm dev +``` + + + +```bash +yarn dev +``` + + *** diff --git a/ui-kit/react/react-one-to-one-chat.mdx b/ui-kit/react/react-one-to-one-chat.mdx index 987748af8..27c46e628 100644 --- a/ui-kit/react/react-one-to-one-chat.mdx +++ b/ui-kit/react/react-one-to-one-chat.mdx @@ -73,7 +73,7 @@ The **One-to-One Chat** feature provides a streamlined **direct messaging interf -```tsx App.tsx +```tsx App.tsx lines highlight={16, 27} import { useEffect, useState } from "react"; import { CometChatMessageComposer, CometChatMessageHeader, CometChatMessageList } from "@cometchat/chat-uikit-react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; @@ -90,6 +90,7 @@ function App() { /** Fetching User */ const UID = "cometchat-uid-1"; + CometChat.getUser(UID).then( user => { setSelectedUser(user); @@ -132,7 +133,7 @@ export default App; -```css App.css +```css App.css lines #root { text-align: center; width: 100vw; @@ -190,7 +191,7 @@ In the code snippet above, ensure you select either a user or a group based on y #### **Fetching a User (One-on-One Chat)** -```tsx +```tsx lines highlight={1} const UID = "cometchat-uid-1"; CometChat.getUser(UID) .then(user => setSelectedUser(user)) @@ -199,7 +200,7 @@ CometChat.getUser(UID) #### **Fetching a Group (Group Chat)** -```tsx +```tsx lines highlight={1} const GUID = "GUID"; CometChat.getGroup(GUID) .then(group => setSelectedGroup(group)) @@ -210,9 +211,19 @@ CometChat.getGroup(GUID) ### **Step 4: Run the project** -```powershell + + +```bash +npm run dev +``` + + + +```bash npm start ``` + + ## Common Failure Modes diff --git a/ui-kit/react/react-router-conversation.mdx b/ui-kit/react/react-router-conversation.mdx index f4ae081cb..e372266ee 100644 --- a/ui-kit/react/react-router-conversation.mdx +++ b/ui-kit/react/react-router-conversation.mdx @@ -466,9 +466,25 @@ a { 1. **Start the development server** - ``` + + + ```bash npm run dev ``` + + + + ```bash + pnpm dev + ``` + + + + ```bash + yarn dev + ``` + + 2. **Verify the chat interface** diff --git a/ui-kit/react/react-router-one-to-one-chat.mdx b/ui-kit/react/react-router-one-to-one-chat.mdx index 0415b324b..39b619f30 100644 --- a/ui-kit/react/react-router-one-to-one-chat.mdx +++ b/ui-kit/react/react-router-one-to-one-chat.mdx @@ -336,9 +336,25 @@ a { 1. **Start the development server** - ``` + + + ```bash npm run dev ``` + + + + ```bash + pnpm dev + ``` + + + + ```bash + yarn dev + ``` + + 2. **Verify the chat interface** diff --git a/ui-kit/react/react-router-tab-based-chat.mdx b/ui-kit/react/react-router-tab-based-chat.mdx index e85d88523..1771df255 100644 --- a/ui-kit/react/react-router-tab-based-chat.mdx +++ b/ui-kit/react/react-router-tab-based-chat.mdx @@ -706,9 +706,25 @@ a { 1. **Start the development server** - ``` + + + ```bash npm run dev ``` + + + + ```bash + pnpm dev + ``` + + + + ```bash + yarn dev + ``` + + 2. **Verify the chat interface** diff --git a/ui-kit/react/react-tab-based-chat.mdx b/ui-kit/react/react-tab-based-chat.mdx index 8602ba342..0636d49a6 100644 --- a/ui-kit/react/react-tab-based-chat.mdx +++ b/ui-kit/react/react-tab-based-chat.mdx @@ -483,9 +483,19 @@ export default App; ### **Step 4: Run the project** -```powershell + + +```bash +npm run dev +``` + + + +```bash npm start ``` + + *** From 3d22beae5ee0ea6c48a2e34abb410df39b460bc7 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 18 Feb 2026 19:00:43 +0530 Subject: [PATCH 14/59] Update react-one-to-one-chat.mdx --- ui-kit/react/react-one-to-one-chat.mdx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/ui-kit/react/react-one-to-one-chat.mdx b/ui-kit/react/react-one-to-one-chat.mdx index 27c46e628..0250e65ec 100644 --- a/ui-kit/react/react-one-to-one-chat.mdx +++ b/ui-kit/react/react-one-to-one-chat.mdx @@ -193,6 +193,7 @@ In the code snippet above, ensure you select either a user or a group based on y ```tsx lines highlight={1} const UID = "cometchat-uid-1"; + CometChat.getUser(UID) .then(user => setSelectedUser(user)) .catch(error => console.error("Failed to fetch user:", error)); @@ -202,6 +203,7 @@ CometChat.getUser(UID) ```tsx lines highlight={1} const GUID = "GUID"; + CometChat.getGroup(GUID) .then(group => setSelectedGroup(group)) .catch(error => console.error("Failed to fetch group:", error)); From b60f772998a163ced48ea92e251cf5dd94e356e4 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 18 Feb 2026 19:04:33 +0530 Subject: [PATCH 15/59] Update react-tab-based-chat.mdx --- ui-kit/react/react-tab-based-chat.mdx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/ui-kit/react/react-tab-based-chat.mdx b/ui-kit/react/react-tab-based-chat.mdx index 0636d49a6..b5acdbdf1 100644 --- a/ui-kit/react/react-tab-based-chat.mdx +++ b/ui-kit/react/react-tab-based-chat.mdx @@ -71,7 +71,7 @@ These icons are available in the **CometChat UI Kit assets folder**. You can fin -```tsx CometChatTabs.tsx +```tsx CometChatTabs.tsx lines import { useState } from "react"; import chatsIcon from "./assets/chats.svg"; import callsIcon from "./assets/calls.svg"; @@ -148,7 +148,7 @@ export const CometChatTabs = (props: { -```css CometChatTabs.css +```css CometChatTabs.css lines .cometchat-tab-component { display: flex; width: 100%; @@ -227,7 +227,7 @@ src/ -```tsx CometChatSelector.tsx +```tsx 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"; @@ -303,7 +303,7 @@ export const CometChatSelector = (props: SelectorProps) => { -```css CometChatSelector.css +```css CometChatSelector.css lines .selector-wrapper .cometchat-conversations .cometchat-list__header-menu .cometchat-button__icon { background: var(--cometchat-icon-color-primary); } @@ -369,7 +369,7 @@ Now we will update the `App.tsx` & `App.css` files to import these new component -```tsx App.tsx +```tsx App.tsx lines import { useState } from "react"; import { CometChatMessageComposer, CometChatMessageHeader, CometChatMessageList } from "@cometchat/chat-uikit-react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; @@ -427,7 +427,7 @@ export default App; -```css App.css +```css App.css lines #root { text-align: center; width: 100vw; From 76bd12ae5b5561bd94f6853655e8567cea9cfdf0 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 18 Feb 2026 19:11:51 +0530 Subject: [PATCH 16/59] updates highlights and lines --- ui-kit/react/next-conversation.mdx | 16 +++++++++------- ui-kit/react/next-js-integration.mdx | 8 ++++---- 2 files changed, 13 insertions(+), 11 deletions(-) diff --git a/ui-kit/react/next-conversation.mdx b/ui-kit/react/next-conversation.mdx index 627f3b2bf..8f885bd8c 100644 --- a/ui-kit/react/next-conversation.mdx +++ b/ui-kit/react/next-conversation.mdx @@ -64,7 +64,7 @@ These icons are available in the **CometChat UI Kit assets folder**. You can fin -```tsx CometChatSelector.tsx +```tsx CometChatSelector.tsx lines import { useEffect, useState } from "react"; import { Conversation, Group, User } from "@cometchat/chat-sdk-javascript"; import { CometChatConversations, CometChatUIKitLoginListener } from "@cometchat/chat-uikit-react"; @@ -119,7 +119,7 @@ export const CometChatSelector = (props: SelectorProps) => { -```css CometChatSelector.css +```css CometChatSelector.css lines /* Style for the icon in the header menu of the conversation list */ .selector-wrapper .cometchat-conversations .cometchat-list__header-menu .cometchat-button__icon { background: var(--cometchat-icon-color-primary); @@ -204,7 +204,7 @@ src/ -```tsx CometChatNoSSR.tsx +```tsx CometChatNoSSR.tsx lines highlight={15-17, 20} import React, { useEffect, useState } from "react"; import { CometChatMessageComposer, @@ -224,6 +224,8 @@ const COMETCHAT_CONSTANTS = { AUTH_KEY: "", }; +const UID = "cometchat-uid-1"; // Replace with your actual UID + // Functional Component const CometChatNoSSR: React.FC = () => { // State to store the logged-in user @@ -249,7 +251,7 @@ const CometChatNoSSR: React.FC = () => { CometChatUIKit.getLoggedinUser().then((loggedInUser) => { if (!loggedInUser) { // Perform login if no user is logged in - CometChatUIKit.login("cometchat-uid-1") + CometChatUIKit.login(UID) .then((user) => { console.log("Login Successful", { user }); setUser(user); @@ -311,7 +313,7 @@ export default CometChatNoSSR; -```css CometChatNoSSR.css +```css CometChatNoSSR.css lines /* Layout for the main conversations and messages container */ .conversations-with-messages { display: flex; @@ -372,7 +374,7 @@ In this update, we will **disable Server-Side Rendering (SSR) for `CometChatNoSS Modify your `index.tsx` file to dynamically import the `CometChatNoSSR.tsx` component with `{ ssr: false }`. -```tsx index.tsx +```tsx index.tsx lines import { Inter } from "next/font/google"; import dynamic from "next/dynamic"; @@ -400,7 +402,7 @@ export default function Home() { Next, add the following styles to global.css to ensure CometChat UI Kit is properly styled. -```css global.css +```css global.css lines :root { --background: #ffffff; --foreground: #171717; diff --git a/ui-kit/react/next-js-integration.mdx b/ui-kit/react/next-js-integration.mdx index 710d2c188..369804176 100644 --- a/ui-kit/react/next-js-integration.mdx +++ b/ui-kit/react/next-js-integration.mdx @@ -164,7 +164,7 @@ Before using any features of the **CometChat UI Kit** or **CometChat SDK**, you -```ts +```ts lines highlight={7-9} import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; /** @@ -204,7 +204,7 @@ CometChatUIKit.init(UIKitSettings)! -```js +```js lines highlight={7-9} import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; /** @@ -282,7 +282,7 @@ The **Login** method returns a **User object** containing all relevant details o -```ts +```ts lines highlight={3} import { CometChatUIKit } from "@cometchat/chat-uikit-react"; const UID = "UID"; // Replace with your actual UID @@ -305,7 +305,7 @@ CometChatUIKit.getLoggedinUser().then((user: CometChat.User | null) => { -```js +```js lines highlight={3} import { CometChatUIKit } from "@cometchat/chat-uikit-react"; const UID = "UID"; // Replace with your actual UID From d499e94c5de12e917a318f723c450a3ce11bff42 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 18 Feb 2026 19:17:55 +0530 Subject: [PATCH 17/59] Update next-one-to-one-chat.mdx --- ui-kit/react/next-one-to-one-chat.mdx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/ui-kit/react/next-one-to-one-chat.mdx b/ui-kit/react/next-one-to-one-chat.mdx index c923262d9..d1ae9fad0 100644 --- a/ui-kit/react/next-one-to-one-chat.mdx +++ b/ui-kit/react/next-one-to-one-chat.mdx @@ -82,7 +82,7 @@ src/ -```tsx CometChatNoSSR.tsx +```tsx CometChatNoSSR.tsx lines highlight={7-9, 31, 51, 61} import React, { useEffect, useState } from "react"; import { CometChatMessageComposer, CometChatMessageHeader, CometChatMessageList, CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; @@ -113,7 +113,7 @@ const CometChatNoSSR: React.FC = () => { console.log("Initialization completed successfully"); CometChatUIKit.getLoggedinUser().then((loggedInUser) => { if (!loggedInUser) { - CometChatUIKit.login("superhero1") + CometChatUIKit.login("cometchat-uid-2") //TODO: Replace with your actual UID .then((user) => { console.log("Login Successful", { user }); setUser(user); @@ -176,7 +176,7 @@ export default CometChatNoSSR; -```css CometChatNoSSR.css +```css CometChatNoSSR.css lines .messages-wrapper { width: 100%; height: 100%; @@ -208,8 +208,9 @@ In the code snippet above, ensure you select either a user or a group based on y #### **Fetching a User (One-on-One Chat)** -```javascript +```javascript lines highlight={1} const UID = "cometchat-uid-1"; + CometChat.getUser(UID).then( user => { setSelectedUser(user); @@ -221,8 +222,9 @@ CometChat.getUser(UID).then( #### **Fetching a Group (Group Chat)** -```javascript +```javascript lines highlight={1} const GUID = "GUID" + CometChat.getGroup(GUID).then( group => { setSelectedGroup(group); @@ -240,7 +242,7 @@ In this update, we will **disable Server-Side Rendering (SSR) for `CometChatNoSS Modify your `index.tsx` file to dynamically import the `CometChatNoSSR.tsx` component with `{ ssr: false }`. -```tsx index.tsx +```tsx index.tsx lines import { Inter } from "next/font/google"; import dynamic from "next/dynamic"; @@ -270,7 +272,7 @@ export default function Home() { Next, add the following styles to global.css to ensure CometChat UI Kit is properly styled. -```css global.css +```css global.css lines :root { --background: #ffffff; --foreground: #171717; From 09f573c31c90640a19d25cc43f73e2af13e226f5 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 18 Feb 2026 19:22:23 +0530 Subject: [PATCH 18/59] Update next-tab-based-chat.mdx --- ui-kit/react/next-tab-based-chat.mdx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/ui-kit/react/next-tab-based-chat.mdx b/ui-kit/react/next-tab-based-chat.mdx index 4c9d390d2..74b73fcfd 100644 --- a/ui-kit/react/next-tab-based-chat.mdx +++ b/ui-kit/react/next-tab-based-chat.mdx @@ -72,7 +72,7 @@ These icons are available in the **CometChat UI Kit assets folder**. You can fin -```tsx CometChatTabs.tsx +```tsx CometChatTabs.tsx lines import { useState } from "react"; import "./CometChatTabs.css"; @@ -157,7 +157,7 @@ export const CometChatTabs = (props: { -```css CometChatTabs.css +```css CometChatTabs.css lines /* Main container for the CometChat tab bar */ .cometchat-tab-component { display: flex; /* Align child tabs horizontally */ @@ -242,7 +242,7 @@ src/ -```tsx CometChatSelector.tsx +```tsx CometChatSelector.tsx lines import { useEffect, useState } from "react"; import { Call, @@ -364,7 +364,7 @@ export const CometChatSelector = (props: SelectorProps) => { -```css CometChatSelector.css +```css CometChatSelector.css lines /* Style the icon inside header menu in conversation list */ .selector-wrapper .cometchat-conversations .cometchat-list__header-menu .cometchat-button__icon { background: var(--cometchat-icon-color-primary); /* Primary icon color */ @@ -442,7 +442,7 @@ Now we will update the `CometChatNoSSR.tsx` & `CometChatNoSSR.css` files to impo -```tsx CometChatNoSSR.tsx +```tsx CometChatNoSSR.tsx lines highlight={15-17, 45} import React, { useEffect, useState } from "react"; import { CometChatMessageComposer, @@ -487,7 +487,7 @@ const CometChatNoSSR: React.FC = () => { CometChatUIKit.getLoggedinUser().then((loggedInUser) => { if (!loggedInUser) { // Perform login if no user is logged in - CometChatUIKit.login("cometchat-uid-4") + CometChatUIKit.login("cometchat-uid-4") //TODO: Replace with dynamic UID as needed .then((user) => { console.log("Login Successful", { user }); setUser(user); @@ -549,7 +549,7 @@ export default CometChatNoSSR; -```css CometChatNoSSR.css +```css CometChatNoSSR.css lines /* Layout for the main container that holds conversations and messages */ .conversations-with-messages { display: flex; @@ -610,7 +610,7 @@ In this update, we will **disable Server-Side Rendering (SSR) for `CometChatNoSS Modify your `index.tsx` file to dynamically import the `CometChatNoSSR.tsx` component with `{ ssr: false }`. -```tsx index.tsx +```tsx index.tsx lines import { Inter } from "next/font/google"; import dynamic from "next/dynamic"; @@ -638,7 +638,7 @@ export default function Home() { Next, add the following styles to global.css to ensure CometChat UI Kit is properly styled. -```css global.css +```css global.css lines :root { --background: #ffffff; --foreground: #171717; From df669bcae99d592c39ced38673b51d8d3d0bc420 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 18 Feb 2026 19:24:32 +0530 Subject: [PATCH 19/59] Update react-router-integration.mdx --- ui-kit/react/react-router-integration.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/ui-kit/react/react-router-integration.mdx b/ui-kit/react/react-router-integration.mdx index 82d3d43f6..ee32d4d16 100644 --- a/ui-kit/react/react-router-integration.mdx +++ b/ui-kit/react/react-router-integration.mdx @@ -158,7 +158,7 @@ Before using any features of the **CometChat UI Kit** or **CometChat SDK**, you -```ts +```ts lines highlight={7-9} import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; /** @@ -198,7 +198,7 @@ CometChatUIKit.init(UIKitSettings)! -```js +```js lines highlight={7-9} import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; /** @@ -276,7 +276,7 @@ The **Login** method returns a **User object** containing all relevant details o -```ts +```ts lines highlight={3} import { CometChatUIKit } from "@cometchat/chat-uikit-react"; const UID = "UID"; // Replace with your actual UID @@ -299,7 +299,7 @@ CometChatUIKit.getLoggedinUser().then((user: CometChat.User | null) => { -```js +```js lines highlight={3} import { CometChatUIKit } from "@cometchat/chat-uikit-react"; const UID = "UID"; // Replace with your actual UID From a65d00f564c9ac2d8973744ac3e256d3496b3777 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 18 Feb 2026 19:28:42 +0530 Subject: [PATCH 20/59] Update react-router-conversation.mdx --- ui-kit/react/react-router-conversation.mdx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/ui-kit/react/react-router-conversation.mdx b/ui-kit/react/react-router-conversation.mdx index e372266ee..66c3da521 100644 --- a/ui-kit/react/react-router-conversation.mdx +++ b/ui-kit/react/react-router-conversation.mdx @@ -60,7 +60,7 @@ These icons are available in the **CometChat UI Kit assets folder**. You can fin -```tsx CometChatSelector.tsx +```tsx CometChatSelector.tsx lines import { useEffect, useState } from "react"; import { Conversation, Group, User } from "@cometchat/chat-sdk-javascript"; import { CometChatConversations, CometChatUIKitLoginListener } from "@cometchat/chat-uikit-react"; @@ -115,7 +115,7 @@ export const CometChatSelector = (props: SelectorProps) => { -```css CometChatSelector.css +```css CometChatSelector.css lines /* Style for the icon in the header menu of the conversation list */ .selector-wrapper .cometchat-conversations .cometchat-list__header-menu .cometchat-button__icon { background: var(--cometchat-icon-color-primary); @@ -200,7 +200,7 @@ src/app/ -```tsx CometChatNoSSR.tsx +```tsx CometChatNoSSR.tsx lines highlight={14-16, 42} import React, { useEffect, useState } from "react"; import { CometChatMessageComposer, @@ -242,7 +242,7 @@ const CometChatNoSSR: React.FC = () => { CometChatUIKit.getLoggedinUser().then((loggedInUser) => { if (!loggedInUser) { - CometChatUIKit.login("cometchat-uid-1") + CometChatUIKit.login("cometchat-uid-1") //TODO: Replace with dynamic UID .then((u) => { console.log("Login Successful", { u }); setUser(u); @@ -305,7 +305,7 @@ export default CometChatNoSSR; -```css CometChatNoSSR.css +```css CometChatNoSSR.css lines /* Layout for the main conversations and messages container */ .conversations-with-messages { display: flex; @@ -362,7 +362,7 @@ export default CometChatNoSSR; Create a file CometChat.tsx inside the routes folder: -```javascript +```javascript lines import React, { lazy, Suspense, useEffect, useState } from "react"; import "@cometchat/chat-uikit-react/css-variables.css"; @@ -388,7 +388,7 @@ export default function CometChatRoute() { Now, create a route for CometChat in your routes file: -```typescript +```typescript lines import { type RouteConfig, index, route } from "@react-router/dev/routes"; export default [ @@ -407,7 +407,7 @@ Why disable SSR? CometChat UI Kit Builder relies on browser APIs such as window, Next, add the following styles to app.css to ensure CometChat UI Kit is properly styled. -```css app.css +```css app.css lines :root { --background: #ffffff; --foreground: #171717; From 9988980ac5e129a1e7a99954ddd6b94e8a1a176d Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 18 Feb 2026 19:31:28 +0530 Subject: [PATCH 21/59] Update react-router-one-to-one-chat.mdx --- ui-kit/react/react-router-one-to-one-chat.mdx | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/ui-kit/react/react-router-one-to-one-chat.mdx b/ui-kit/react/react-router-one-to-one-chat.mdx index 39b619f30..aa6426ec8 100644 --- a/ui-kit/react/react-router-one-to-one-chat.mdx +++ b/ui-kit/react/react-router-one-to-one-chat.mdx @@ -78,7 +78,7 @@ src/ -```tsx CometChatNoSSR.tsx +```tsx CometChatNoSSR.tsx lines highlight={7-9, 31, 51, 61} import React, { useEffect, useState } from "react"; import { CometChatMessageComposer, CometChatMessageHeader, CometChatMessageList, CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; @@ -109,7 +109,7 @@ const CometChatNoSSR: React.FC = () => { console.log("Initialization completed successfully"); CometChatUIKit.getLoggedinUser().then((loggedInUser) => { if (!loggedInUser) { - CometChatUIKit.login("superhero1") + CometChatUIKit.login("cometchat-uid-2") //TODO: Replace with dynamic UID .then((user) => { console.log("Login Successful", { user }); setUser(user); @@ -172,7 +172,7 @@ export default CometChatNoSSR; -```css CometChatNoSSR.css +```css CometChatNoSSR.css lines .messages-wrapper { width: 100%; height: 100%; @@ -204,8 +204,9 @@ In the code snippet above, ensure you select either a user or a group based on y #### **Fetching a User (One-on-One Chat)** -```javascript +```javascript lines highlight={1} const UID = "cometchat-uid-1"; + CometChat.getUser(UID).then( user => { setSelectedUser(user); @@ -217,8 +218,9 @@ CometChat.getUser(UID).then( #### **Fetching a Group (Group Chat)** -```javascript +```javascript lines highlight={1} const GUID = "GUID" + CometChat.getGroup(GUID).then( group => { setSelectedGroup(group); @@ -232,7 +234,7 @@ CometChat.getGroup(GUID).then( Create a file CometChat.tsx inside the routes folder: -```javascript +```javascript lines import React, { lazy, Suspense, useEffect, useState } from "react"; import "@cometchat/chat-uikit-react/css-variables.css"; @@ -258,7 +260,7 @@ export default function CometChatRoute() { Now, create a route for CometChat in your routes file: -```typescript +```typescript lines import { type RouteConfig, index, route } from "@react-router/dev/routes"; export default [ @@ -277,7 +279,7 @@ Why disable SSR? CometChat UI Kit Builder relies on browser APIs such as window, Next, add the following styles to app.css to ensure CometChat UI Kit is properly styled. -```css app.css +```css app.css lines :root { --background: #ffffff; --foreground: #171717; From 79c568f727b2cc01299bea85e600c1969bcd6b32 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 18 Feb 2026 19:38:14 +0530 Subject: [PATCH 22/59] Update react-router-tab-based-chat.mdx --- ui-kit/react/react-router-tab-based-chat.mdx | 22 +++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/ui-kit/react/react-router-tab-based-chat.mdx b/ui-kit/react/react-router-tab-based-chat.mdx index 1771df255..db9692e77 100644 --- a/ui-kit/react/react-router-tab-based-chat.mdx +++ b/ui-kit/react/react-router-tab-based-chat.mdx @@ -68,7 +68,7 @@ These icons are available in the **CometChat UI Kit assets folder**. You can fin -```tsx CometChatTabs.tsx +```tsx CometChatTabs.tsx lines import { useState } from "react"; import "./CometChatTabs.css"; @@ -153,7 +153,7 @@ export const CometChatTabs = (props: { -```css CometChatTabs.css +```css CometChatTabs.css lines /* Main container for the CometChat tab bar */ .cometchat-tab-component { display: flex; /* Align child tabs horizontally */ @@ -238,7 +238,7 @@ src/app/ -```tsx CometChatSelector.tsx +```tsx CometChatSelector.tsx lines import { useEffect, useState } from "react"; import { Call, @@ -360,7 +360,7 @@ export const CometChatSelector = (props: SelectorProps) => { -```css CometChatSelector.css +```css CometChatSelector.css lines /* Style the icon inside header menu in conversation list */ .selector-wrapper .cometchat-conversations .cometchat-list__header-menu .cometchat-button__icon { background: var(--cometchat-icon-color-primary); /* Primary icon color */ @@ -438,7 +438,7 @@ Now we will update the `CometChatNoSSR.tsx` & `CometChatNoSSR.css` files to impo -```tsx CometChatNoSSR.tsx +```tsx CometChatNoSSR.tsx lines highlight={15-17, 20} import React, { useEffect, useState } from "react"; import { CometChatMessageComposer, @@ -458,6 +458,8 @@ const COMETCHAT_CONSTANTS = { AUTH_KEY: "", }; +const UID = "cometchat-uid-4"; // TODO: Replace with dynamic UID + // Functional component for CometChatNoSSR const CometChatNoSSR: React.FC = () => { // State to store the logged-in user @@ -483,7 +485,7 @@ const CometChatNoSSR: React.FC = () => { CometChatUIKit.getLoggedinUser().then((loggedInUser) => { if (!loggedInUser) { // Perform login if no user is logged in - CometChatUIKit.login("cometchat-uid-4") + CometChatUIKit.login(UID) .then((user) => { console.log("Login Successful", { user }); setUser(user); @@ -545,7 +547,7 @@ export default CometChatNoSSR; -```css CometChatNoSSR.css +```css CometChatNoSSR.css lines /* Layout for the main container that holds conversations and messages */ .conversations-with-messages { display: flex; @@ -602,7 +604,7 @@ export default CometChatNoSSR; Create a file CometChat.tsx inside the routes folder: -```javascript +```javascript lines import React, { lazy, Suspense, useEffect, useState } from "react"; import "@cometchat/chat-uikit-react/css-variables.css"; @@ -628,7 +630,7 @@ export default function CometChatRoute() { Now, create a route for CometChat in your routes file: -```typescript +```typescript lines import { type RouteConfig, index, route } from "@react-router/dev/routes"; export default [ @@ -647,7 +649,7 @@ Why disable SSR? CometChat UI Kit Builder relies on browser APIs such as window, Next, add the following styles to app.css to ensure CometChat UI Kit is properly styled. -```css app.css +```css app.css lines :root { --background: #ffffff; --foreground: #171717; From 63b2b1044943f6fcc0b500d9d2e7078596c0f8ad Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 18 Feb 2026 19:47:41 +0530 Subject: [PATCH 23/59] removes **Available via:** --- ui-kit/react/ai-assistant-chat.mdx | 3 --- ui-kit/react/ai-features.mdx | 14 -------------- ui-kit/react/call-buttons.mdx | 3 --- ui-kit/react/call-features.mdx | 3 --- ui-kit/react/call-logs.mdx | 6 ------ ui-kit/react/conversations.mdx | 13 ------------- ui-kit/react/core-features.mdx | 6 ------ ui-kit/react/extensions.mdx | 3 --- ui-kit/react/group-members.mdx | 3 --- ui-kit/react/groups.mdx | 3 --- ui-kit/react/incoming-call.mdx | 6 ------ ui-kit/react/message-composer.mdx | 3 --- ui-kit/react/message-header.mdx | 3 --- ui-kit/react/message-list.mdx | 3 --- ui-kit/react/outgoing-call.mdx | 6 ------ ui-kit/react/search.mdx | 6 ------ ui-kit/react/thread-header.mdx | 6 ------ ui-kit/react/users.mdx | 3 --- 18 files changed, 93 deletions(-) diff --git a/ui-kit/react/ai-assistant-chat.mdx b/ui-kit/react/ai-assistant-chat.mdx index e837f6ed9..951e24772 100644 --- a/ui-kit/react/ai-assistant-chat.mdx +++ b/ui-kit/react/ai-assistant-chat.mdx @@ -49,9 +49,6 @@ React.useEffect(() => { - -**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) - **Before using this component:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration). diff --git a/ui-kit/react/ai-features.mdx b/ui-kit/react/ai-features.mdx index 68110c30b..298daa1ac 100644 --- a/ui-kit/react/ai-features.mdx +++ b/ui-kit/react/ai-features.mdx @@ -29,21 +29,7 @@ AI features are enabled via the [CometChat Dashboard](/fundamentals/ai-user-copi CometChat's AI capabilities greatly enhance user interaction and engagement in your application. Let's understand how the React UI Kit achieves these features. - -**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) | [Dashboard](https://app.cometchat.com) - - -**Before using AI features:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. AI features must also be activated from the [CometChat Dashboard](/fundamentals/ai-user-copilot/overview). - - - - - - - -**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) | [Dashboard](https://app.cometchat.com/) - ## Conversation Starters diff --git a/ui-kit/react/call-buttons.mdx b/ui-kit/react/call-buttons.mdx index c5adc6aa0..fae88eaa4 100644 --- a/ui-kit/react/call-buttons.mdx +++ b/ui-kit/react/call-buttons.mdx @@ -46,9 +46,6 @@ The `Call Button` is a Component provides users with the ability to make calls, - -**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) - **Before using this component:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration). diff --git a/ui-kit/react/call-features.mdx b/ui-kit/react/call-features.mdx index 625c87e3e..c1efbe75b 100644 --- a/ui-kit/react/call-features.mdx +++ b/ui-kit/react/call-features.mdx @@ -34,9 +34,6 @@ npm install @cometchat/calls-sdk-javascript 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. - -**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) - **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). diff --git a/ui-kit/react/call-logs.mdx b/ui-kit/react/call-logs.mdx index 19e40b3c3..4856aa76a 100644 --- a/ui-kit/react/call-logs.mdx +++ b/ui-kit/react/call-logs.mdx @@ -38,9 +38,6 @@ import { CometChatCallLogs } from "@cometchat/chat-uikit-react"; `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. - -**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) | [REST API](https://api-explorer.cometchat.com) - @@ -54,9 +51,6 @@ The `Call Logs` is comprised of the following components: | CometChatListItem | A component that renders data obtained from a Group object on a Tile having a title, subtitle, leading and trailing view. | | CometChatDate | This component used to show the date and time. You can also customize the appearance of this widget by modifying its logic. | - -**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) | [REST API](https://api-explorer.cometchat.com) - **Before using this component:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration). diff --git a/ui-kit/react/conversations.mdx b/ui-kit/react/conversations.mdx index 5a183c893..e65f2bbc0 100644 --- a/ui-kit/react/conversations.mdx +++ b/ui-kit/react/conversations.mdx @@ -38,19 +38,6 @@ import { CometChatConversations } from "@cometchat/chat-uikit-react"; The Conversations is a Component, that shows all conversations related to the currently logged-in user. - -**Before using this component:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration). - - -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. - - - - - - -**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/retrieve-conversations) | [REST API](https://api-explorer.cometchat.com) - ## Usage diff --git a/ui-kit/react/core-features.mdx b/ui-kit/react/core-features.mdx index 11109457f..b3fe946d4 100644 --- a/ui-kit/react/core-features.mdx +++ b/ui-kit/react/core-features.mdx @@ -33,15 +33,9 @@ Key components for core chat features: The UI Kit comprises a variety of components, each designed to work seamlessly with one another to deliver a comprehensive and intuitive chat experience. - -**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) | [REST API](https://api-explorer.cometchat.com) - Here's how different UI Kit components work together to achieve CometChat's Core features: - -**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) | [REST API](https://api-explorer.cometchat.com) - **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). diff --git a/ui-kit/react/extensions.mdx b/ui-kit/react/extensions.mdx index 3a8b6a1ca..71c17ae26 100644 --- a/ui-kit/react/extensions.mdx +++ b/ui-kit/react/extensions.mdx @@ -30,9 +30,6 @@ Supported extensions: Stickers, Polls, Collaborative Whiteboard, Collaborative D CometChat's UI Kit offers built-in support for various extensions, enriching the chatting experience with enhanced functionality. These extensions augment your chat application, making it more interactive, secure, and efficient. - -**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) | [Dashboard](https://app.cometchat.com) - **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). diff --git a/ui-kit/react/group-members.mdx b/ui-kit/react/group-members.mdx index 9817c391e..b95e2f300 100644 --- a/ui-kit/react/group-members.mdx +++ b/ui-kit/react/group-members.mdx @@ -43,9 +43,6 @@ import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; - -**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) | [REST API](https://api-explorer.cometchat.com) - **Before using this component:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration). diff --git a/ui-kit/react/groups.mdx b/ui-kit/react/groups.mdx index 11450895f..98e5397ef 100644 --- a/ui-kit/react/groups.mdx +++ b/ui-kit/react/groups.mdx @@ -42,9 +42,6 @@ The Groups is a Component, showcasing an accessible list of all available groups - -**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) | [REST API](https://api-explorer.cometchat.com) - **Before using this component:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration). diff --git a/ui-kit/react/incoming-call.mdx b/ui-kit/react/incoming-call.mdx index 9029c181b..a59295ab3 100644 --- a/ui-kit/react/incoming-call.mdx +++ b/ui-kit/react/incoming-call.mdx @@ -42,9 +42,6 @@ The `Incoming call` is a Component that serves as a visual representation when t - -**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) - The `Incoming Call` is comprised of the following base components: @@ -54,9 +51,6 @@ The `Incoming Call` is comprised of the following base components: | cometchat-button | This component represents a button with optional icon and text. | | cometchat-avatar | This component component displays an image or user's avatar with fallback to the first two letters of the username. | - -**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) - **Before using this component:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration). diff --git a/ui-kit/react/message-composer.mdx b/ui-kit/react/message-composer.mdx index d9f38f70c..b115ab624 100644 --- a/ui-kit/react/message-composer.mdx +++ b/ui-kit/react/message-composer.mdx @@ -41,9 +41,6 @@ Features such as **Attachments**, and **Message Editing** are also supported by - -**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) - **Before using this component:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration). diff --git a/ui-kit/react/message-header.mdx b/ui-kit/react/message-header.mdx index c58477657..d4855cccb 100644 --- a/ui-kit/react/message-header.mdx +++ b/ui-kit/react/message-header.mdx @@ -39,9 +39,6 @@ import { CometChatMessageHeader } from "@cometchat/chat-uikit-react"; - -**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) - **Before using this component:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration). diff --git a/ui-kit/react/message-list.mdx b/ui-kit/react/message-list.mdx index 07cb57237..b2d2782bb 100644 --- a/ui-kit/react/message-list.mdx +++ b/ui-kit/react/message-list.mdx @@ -39,9 +39,6 @@ import { CometChatMessageList } from "@cometchat/chat-uikit-react"; - -**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) - **Before using this component:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration). diff --git a/ui-kit/react/outgoing-call.mdx b/ui-kit/react/outgoing-call.mdx index 01ff9a92c..ec9dafb34 100644 --- a/ui-kit/react/outgoing-call.mdx +++ b/ui-kit/react/outgoing-call.mdx @@ -37,9 +37,6 @@ const initiatedCall = await CometChat.initiateCall(callObject); ## Overview - -**Available via:** [UI Kits](https://www.cometchat.com/docs/ui-kit/react/overview) | [SDK](https://www.cometchat.com/docs/sdk/javascript/overview) - The outgoing call component is a visual representation of a user-initiated call, whether it's a voice or video call. It serves as an interface for managing outgoing calls, providing users with essential options to control the call experience. This component typically includes information about the call recipient, call controls for canceling the call, and feedback on the call status, such as indicating when the call is in progress. @@ -54,9 +51,6 @@ The `Outgoing Call` is comprised of the following components: | CometChat Button | This component represents a button with optional icon and text. | | CometChat Avatar | This component component displays an image or user's avatar with fallback to the first two letters of the username. | - -**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) - **Before using this component:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration). diff --git a/ui-kit/react/search.mdx b/ui-kit/react/search.mdx index 5021fbd55..992a553ee 100644 --- a/ui-kit/react/search.mdx +++ b/ui-kit/react/search.mdx @@ -36,15 +36,9 @@ import { CometChatSearch } from "@cometchat/chat-uikit-react"; ## Overview - -**Available via:** [UI Kits](https://www.cometchat.com/docs/ui-kit/react/overview) - The `CometChatSearch` component is a powerful and customizable search interface that allows users to search across conversations and messages in real time. It supports a wide variety of filters, scopes, and customization options. `CometChatSearch` helps users find messages, conversations, media, and more through an intuitive and filterable search experience. It can be embedded in multiple contexts — as part of the conversation list, message header, or as a full-screen search experience. - -**Available via:** [UI Kits](/ui-kit/react/overview) - **Before using this component:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration). diff --git a/ui-kit/react/thread-header.mdx b/ui-kit/react/thread-header.mdx index 48e5dc686..90eb2554e 100644 --- a/ui-kit/react/thread-header.mdx +++ b/ui-kit/react/thread-header.mdx @@ -29,9 +29,6 @@ import { CometChatThreadHeader } from "@cometchat/chat-uikit-react"; ## Overview - -**Available via:** [UI Kits](https://www.cometchat.com/docs/ui-kit/react/overview) | [SDK](https://www.cometchat.com/docs/sdk/javascript/overview) - CometChatThreadHeader is a Component that displays the parent message & number of replies of thread. @@ -39,9 +36,6 @@ CometChatThreadHeader is a Component that displays the parent message & number o - -**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) - **Before using this component:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration). diff --git a/ui-kit/react/users.mdx b/ui-kit/react/users.mdx index 582071d39..e0f963620 100644 --- a/ui-kit/react/users.mdx +++ b/ui-kit/react/users.mdx @@ -43,9 +43,6 @@ The Users is a Component, showcasing an accessible list of all available users. - -**Available via:** [UI Kits](/ui-kit/react/overview) | [SDK](/sdk/javascript/overview) | [REST API](https://api-explorer.cometchat.com) - **Before using this component:** Ensure `CometChatUIKit.init(UIKitSettings)` has completed and the user is logged in via `CometChatUIKit.login("UID")`. See [React.js Integration](/ui-kit/react/react-js-integration). From ea70bd7f87bc88b37b4b3f7da14bbb3d27cc08ae Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 18 Feb 2026 19:53:44 +0530 Subject: [PATCH 24/59] Update ai-features.mdx --- ui-kit/react/ai-features.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui-kit/react/ai-features.mdx b/ui-kit/react/ai-features.mdx index 298daa1ac..2fd4a16c7 100644 --- a/ui-kit/react/ai-features.mdx +++ b/ui-kit/react/ai-features.mdx @@ -1,5 +1,5 @@ --- -title: "AI User Copilot" +title: "Smart Chat Features" description: "Overview of CometChat's AI-powered features including Conversation Starters, Smart Replies, and Conversation Summary — with the UI Kit components that power each feature." --- From fa054413a945b10468d73bcbc38e435e176735a5 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 18 Feb 2026 19:54:06 +0530 Subject: [PATCH 25/59] Update ai-features.mdx --- ui-kit/react/ai-features.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui-kit/react/ai-features.mdx b/ui-kit/react/ai-features.mdx index 2fd4a16c7..9146a949f 100644 --- a/ui-kit/react/ai-features.mdx +++ b/ui-kit/react/ai-features.mdx @@ -1,6 +1,6 @@ --- title: "Smart Chat Features" -description: "Overview of CometChat's AI-powered features including Conversation Starters, Smart Replies, and Conversation Summary — with the UI Kit components that power each feature." +description: "Learn about the AI-powered features in CometChat's React UI Kit, including Conversation Starters, Smart Replies, and Conversation Summaries." --- {/* TL;DR for Agents and Quick Reference */} From dcffae935d87e2f5070da1c04d5a8cd45e45e515 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 18 Feb 2026 20:02:15 +0530 Subject: [PATCH 26/59] Update extensions.mdx --- ui-kit/react/extensions.mdx | 92 ++++++++++++++++++++----------------- 1 file changed, 49 insertions(+), 43 deletions(-) diff --git a/ui-kit/react/extensions.mdx b/ui-kit/react/extensions.mdx index 71c17ae26..a74c7889c 100644 --- a/ui-kit/react/extensions.mdx +++ b/ui-kit/react/extensions.mdx @@ -1,6 +1,6 @@ --- title: "Extensions" -description: "Overview of CometChat's built-in extensions including Stickers, Polls, Collaborative Whiteboard, Collaborative Document, Message Translation, Link Preview, and Thumbnail Generation — activated via the Dashboard and auto-integrated into UI Kit components." +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." --- {/* TL;DR for Agents and Quick Reference */} @@ -13,7 +13,7 @@ Key components that support extensions: Extensions are enabled via the [CometChat Dashboard](/fundamentals/extensions-overview) — no additional code required once activated. -Supported extensions: Stickers, Polls, Collaborative Whiteboard, Collaborative Document, Message Translation, Link Preview, Thumbnail Generation +Supported extensions: User Experience, User Engagement, Collaboration, Security, Customer Support, Smart Chat Features @@ -21,7 +21,7 @@ Supported extensions: Stickers, Polls, Collaborative Whiteboard, Collaborative D **Package:** `@cometchat/chat-uikit-react` **Required setup:** `CometChatUIKit.init()` + `CometChatUIKit.login()` + Extensions enabled in Dashboard -**Extensions covered:** Stickers, Polls, Collaborative Whiteboard, Collaborative Document, Message Translation, Link Preview, Thumbnail Generation +**Extensions covered:** User Experience, User Engagement, Collaboration, Security, Customer Support, Smart Chat Features **Primary components:** `CometChatMessageComposer`, `CometChatMessageList` **Activation:** Enable each extension from the CometChat Dashboard — UI Kit auto-integrates them @@ -43,13 +43,15 @@ CometChat's UI Kit provides native support for a wide range of powerful extensio ## 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. -### Bitly +### User Experience + +#### Bitly 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 +#### 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). @@ -59,23 +61,23 @@ Once you have successfully activated the [Link Preview Extension](/fundamentals/ -### Message Shortcuts +#### 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 +#### 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 +#### 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 +#### 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 +#### 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). @@ -85,23 +87,21 @@ Once you have successfully activated the [Thumbnail Generation Extension](/funda -### TinyURL +#### 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 +#### Voice Transcription The Voice Transcription extension converts audio messages into text, making it easier to read voice messages without playing them. For a comprehensive understanding and guide on implementing and using the Voice Transcription Extension, refer to our specific guide on the [Voice Transcription Extension](/fundamentals/voice-transcription). -### User Management - -The Avatars extension allows end-users to upload avatar images for their profiles directly within CometChat. For a comprehensive understanding and guide on implementing and using the Avatars Extension, refer to our specific guide on the [Avatars Extension](/fundamentals/avatars). +### User Engagement -### Giphy +#### 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 +#### 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). @@ -111,7 +111,7 @@ Once you have successfully activated the [Message Translation Extension](/fundam -### Polls +#### Polls The Polls extension enhances group discussions by allowing users to create polls. Users can ask questions with a predefined list of answers, enabling a quick, organized way to gather group opinions. For a comprehensive understanding and guide on implementing and using the Polls Extension, refer to our specific guide on the [Polls Extension](/fundamentals/polls). @@ -121,11 +121,11 @@ Once you have successfully activated the [Polls Extension](/fundamentals/polls) -### Reminders +#### Reminders The Reminders extension allows users to set reminders for messages or create personal reminders. When a reminder is due, a bot sends a notification message to the user. For a comprehensive understanding and guide on implementing and using the Reminders Extension, refer to our specific guide on the [Reminders Extension](/fundamentals/reminders). -### Stickers +#### 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). @@ -135,61 +135,67 @@ Once you have successfully activated the [Sticker Extension](/fundamentals/stick -### Stipop +#### 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 +#### 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 +### Collaboration -### Collaborative Whiteboard +#### Collaborative Document -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). +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). -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. +Once you have successfully activated the [Collaborative Document Extension](/fundamentals/collaborative-document) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/react/message-composer) component of UI Kits. - + -### Collaborative Document +#### Collaborative Whiteboard -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). +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 [Collaborative Document Extension](/fundamentals/collaborative-document) from your CometChat Dashboard, the feature will automatically be incorporated into the Action Sheet of the [Message Composer](/ui-kit/react/message-composer) component of UI Kits. +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. - + -## Security +### Security -### Disappearing Messages +#### Disappearing Messages 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 +### Customer Support -### Chatwoot +#### Chatwoot The Chatwoot extension makes customer support seamless by allowing your users to communicate with your support team directly through CometChat, eliminating the need for a separate support interface. For a comprehensive understanding and guide on implementing and using the Chatwoot Extension, refer to our specific guide on the [Chatwoot Extension](/fundamentals/chatwoot). -### Intercom +#### 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 -## Next Steps +#### Conversation Starter -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. +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. + +--- From 7cc4b70a92c3e8516583968753128bcd77cfc847 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 18 Feb 2026 20:04:24 +0530 Subject: [PATCH 27/59] Update ai-features.mdx --- ui-kit/react/ai-features.mdx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/ui-kit/react/ai-features.mdx b/ui-kit/react/ai-features.mdx index 9146a949f..d35151fc1 100644 --- a/ui-kit/react/ai-features.mdx +++ b/ui-kit/react/ai-features.mdx @@ -1,6 +1,6 @@ --- title: "Smart Chat Features" -description: "Learn about the AI-powered features in CometChat's React UI Kit, including Conversation Starters, Smart Replies, and Conversation Summaries." +description: "Learn about the AI-powered features in CometChat's React UI Kit, including Conversation Starter, Smart Replies, and Conversation Summary." --- {/* TL;DR for Agents and Quick Reference */} @@ -8,7 +8,7 @@ description: "Learn about the AI-powered features in CometChat's React UI Kit, i **Quick Reference for AI Agents & Developers** Key components for AI features: -- **Message List** → [CometChatMessageList](/ui-kit/react/message-list) (Conversation Starters) +- **Message List** → [CometChatMessageList](/ui-kit/react/message-list) (Conversation Starter) - **Message Composer** → [CometChatMessageComposer](/ui-kit/react/message-composer) (Smart Replies, Conversation Summary) - **AI Assistant Chat** → [CometChatAIAssistantChat](/ui-kit/react/ai-assistant-chat) @@ -20,7 +20,7 @@ AI features are enabled via the [CometChat Dashboard](/fundamentals/ai-user-copi **Package:** `@cometchat/chat-uikit-react` **Required setup:** `CometChatUIKit.init()` + `CometChatUIKit.login()` + AI features enabled in Dashboard -**AI features covered:** Conversation Starters, Smart Replies, Conversation Summary +**AI features covered:** Conversation Starter, Smart Replies, Conversation Summary **Primary components:** `CometChatMessageList`, `CometChatMessageComposer` **Activation:** Enable each AI feature from the CometChat Dashboard — UI Kit auto-integrates them @@ -29,13 +29,13 @@ AI features are enabled via the [CometChat Dashboard](/fundamentals/ai-user-copi CometChat's AI capabilities greatly enhance user interaction and engagement in your application. Let's understand how the React UI Kit achieves these features. +## 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. @@ -43,7 +43,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. @@ -55,7 +55,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. @@ -75,7 +75,7 @@ Once you have successfully activated the [Conversation Summary](/fundamentals/ai | AI features not appearing | Feature not activated in CometChat Dashboard | Enable the specific AI feature from your [Dashboard](/fundamentals/ai-user-copilot/overview) | | Component doesn't render | `CometChatUIKit.init()` not called or not awaited | Ensure init completes before rendering. See [Methods](/ui-kit/react/methods) | | Component renders but no AI suggestions | User not logged in | Call `CometChatUIKit.login("UID")` after init | -| Conversation Starters not showing | Feature not enabled or no conversation context | Ensure [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter) is activated in Dashboard | +| Conversation Starter not showing | Feature not enabled or no conversation context | Ensure [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter) is activated in Dashboard | | Smart Replies not appearing in composer | Feature not enabled in Dashboard | Ensure [Smart Replies](/fundamentals/ai-user-copilot/smart-replies) is activated in Dashboard | | SSR hydration error | Component uses browser APIs on server | Wrap in `useEffect` or dynamic import with `ssr: false`. See [Next.js Integration](/ui-kit/react/next-js-integration) | From b9d98d3708176b491969319d91468d824d8f5ed8 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 18 Feb 2026 20:28:42 +0530 Subject: [PATCH 28/59] Update theme.mdx --- ui-kit/react/theme.mdx | 202 +++++++++++++++++++++++++++++++++-------- 1 file changed, 163 insertions(+), 39 deletions(-) diff --git a/ui-kit/react/theme.mdx b/ui-kit/react/theme.mdx index d066fe9d7..6faec8d8f 100644 --- a/ui-kit/react/theme.mdx +++ b/ui-kit/react/theme.mdx @@ -24,7 +24,7 @@ description: "Customize the CometChat React UI Kit appearance using CSS variable } /* 4. Dark mode */ -.cometchat[data-theme="dark"] { +.cometchat-root[data-theme="dark"] .cometchat { --cometchat-primary-color: #f76808; } ``` @@ -37,7 +37,7 @@ description: "Customize the CometChat React UI Kit appearance using CSS variable **Where:** `App.css` (global) — import in app entry via `import "./App.css";` **Step 1:** Import base stylesheet: `@import url("@cometchat/chat-uikit-react/css-variables.css");` **Step 2:** Override variables on `.cometchat` (global) or `.cometchat-` (component-specific) -**Step 3:** For dark mode, override on `.cometchat[data-theme="dark"]` or use `@media (prefers-color-scheme: dark)` +**Step 3:** For dark mode, override on `.cometchat-root[data-theme="dark"] .cometchat` or use `@media (prefers-color-scheme: dark)` **Key tokens:** `--cometchat-primary-color`, `--cometchat-neutral-color-300`, `--cometchat-font-family`, `--cometchat-background-color-03` **Constraints:** Global CSS only (no CSS Modules), no `!important`, component-level overrides beat global **Full token list:** [Color Resources](/ui-kit/react/theme/color-resources) | [GitHub source](https://github.com/cometchat/cometchat-uikit-react/blob/v6/src/styles/css-variables.css) @@ -55,6 +55,48 @@ Theming allows you to define the **look and feel** of your app by adjusting **co *** +## **Root Wrapper (`.cometchat`)** + +All selectors in this doc are scoped under `.cometchat`, which is the class the UI Kit renders on its root element. If you already wrap your chat UI in a container (commonly `cometchat-root` in examples), keep it — just make sure your overrides target `.cometchat` inside. + +```tsx +export default function App() { + return ( +
+ {/* UI Kit components */} +
+ ); +} +``` + +If you use `data-theme`, put it on the wrapper you control and scope your dark theme overrides to `.cometchat` inside. + +*** + +## **Theming Contract** + +**Inputs** +- Base stylesheet import: `@import url("@cometchat/chat-uikit-react/css-variables.css");` +- Global CSS variables on `.cometchat` +- Component-scoped variables on `.cometchat .cometchat-` +- Optional element-level CSS overrides for specific selectors +- Optional theme mode selector: `.cometchat-root[data-theme="dark"] .cometchat` or `@media (prefers-color-scheme: dark)` + +**Scope** +- Always scope overrides under `.cometchat` to avoid leaking styles into the host app. + +**Precedence** +1. Element-level CSS overrides (most specific) +2. Component-scoped variables (`.cometchat .cometchat-conversations { --var }`) +3. Global variables (`.cometchat { --var }`) +4. Defaults from `css-variables.css` (least specific) + +**Expected outputs** +- Primary tokens change outgoing bubbles, buttons, and active states. +- Background tokens change panels and surfaces. +- Text/icon tokens change highlight accents. +- Font tokens change typography across the UI. + ## **Importing the Stylesheet** To enable theming, first, **import the base stylesheet** containing default styles and variables. @@ -83,8 +125,26 @@ The following **CSS variables** customize colors, fonts, and other elements. + +Recommended: Use **App.css** for global overrides and keep them scoped under `.cometchat`. Use the runtime `setProperty` approach only when you need live theme changes without a reload. + + - + +```css +.cometchat { + --cometchat-primary-color: #f76808; + --cometchat-neutral-color-300: #fff; + --cometchat-background-color-03: #feede1; + --cometchat-extended-primary-color-500: #fbaa75; + --cometchat-icon-color-highlight: #f76808; + --cometchat-text-color-highlight: #f76808; +} +``` + + + + ```tsx import { useEffect } from "react"; @@ -104,32 +164,28 @@ export default App; - -```css -.cometchat { - --cometchat-primary-color: #f76808; - --cometchat-neutral-color-300: #fff; - --cometchat-background-color-03: #feede1; - --cometchat-extended-primary-color-500: #fbaa75; - --cometchat-icon-color-highlight: #f76808; - --cometchat-text-color-highlight: #f76808; -} -``` - - - **Expected result:** All primary-colored elements (outgoing bubbles, buttons, active states, links) change to orange (#f76808). Background panels change to light peach (#feede1). Font changes to Times New Roman. - -**CSS Specificity & Precedence Rules:** -1. Component-level overrides (`.cometchat-conversations { --var: val }`) take precedence over global overrides (`.cometchat { --var: val }`) -2. CSS variable overrides only affect properties the UI Kit theme binds to that variable — they do NOT change layout or spacing -3. Always keep the `.cometchat` prefix to avoid leaking styles into the host app -4. `!important` should never be needed — if it is, your selector specificity is wrong -5. For the full list of available tokens, see [Color Resources](/ui-kit/react/theme/color-resources) - +*** + +## **Top Tokens (Quick Mapping)** + +Use this table for fast, reliable overrides. For the complete list, see [Color Resources](/ui-kit/react/theme/color-resources). + +| Token | Common usage (varies by component) | +| --- | --- | +| `--cometchat-primary-color` | Primary accent color (buttons, outgoing bubbles, active states) | +| `--cometchat-extended-primary-color-900` | Darker primary shade (outgoing bubble shade) | +| `--cometchat-extended-primary-color-500` | Mid primary shade (secondary accents/hover) | +| `--cometchat-neutral-color-300` | Neutral surface (incoming bubbles/panels) | +| `--cometchat-background-color-03` | Panel background surface | +| `--cometchat-text-color-highlight` | Highlight text color | +| `--cometchat-icon-color-highlight` | Highlight icon color | +| `--cometchat-message-seen-color` | Seen/read indicator color | +| `--cometchat-font-family` | Global font family | +| `--cometchat-radius-max` | Maximum corner radius used across UI elements | *** @@ -186,6 +242,13 @@ For full control over component styling, use **CSS overrides** to target specifi You can **switch** between light and dark modes. + +Choose ONE dark mode strategy: +1. **App-controlled:** set `data-theme` on your wrapper (e.g., `.cometchat-root`) and scope overrides like `.cometchat-root[data-theme="dark"] .cometchat { ... }` +2. **OS-controlled:** use `@media (prefers-color-scheme: dark)` scoped to `.cometchat` +Avoid mixing both unless you intentionally want OS preference plus manual overrides. + + ### **Example: Enabling Dark Mode** @@ -222,7 +285,7 @@ export default App; -**Expected result:** The UI Kit automatically switches between light and dark color schemes based on the user's OS preference. The `data-theme` attribute on the root wrapper controls which palette is active. +**Expected result:** The wrapper tracks the user's OS preference and sets `data-theme`, which you can use to switch palettes in your CSS. *** @@ -248,17 +311,15 @@ Define different **color schemes** for **light and dark modes**. } /* Dark Theme */ -@media (prefers-color-scheme: dark) { - .cometchat { - --cometchat-primary-color: #f76808; - --cometchat-neutral-color-300: #311502; - --cometchat-background-color-03: #451d02; - --cometchat-extended-primary-color-500: #943e05; - --cometchat-icon-color-highlight: #f76808; - --cometchat-text-color-highlight: #f76808; - --cometchat-message-seen-color: #f76808; - --cometchat-neutral-color-50: #1a1a1a; - } +.cometchat-root[data-theme="dark"] .cometchat { + --cometchat-primary-color: #f76808; + --cometchat-neutral-color-300: #311502; + --cometchat-background-color-03: #451d02; + --cometchat-extended-primary-color-500: #943e05; + --cometchat-icon-color-highlight: #f76808; + --cometchat-text-color-highlight: #f76808; + --cometchat-message-seen-color: #f76808; + --cometchat-neutral-color-50: #1a1a1a; } ``` @@ -266,10 +327,72 @@ Define different **color schemes** for **light and dark modes**. +If you prefer OS-controlled dark mode, wrap the dark overrides in `@media (prefers-color-scheme: dark)` and keep the `.cometchat` scope. + **Expected result:** Light mode uses orange (#f76808) with peach backgrounds; dark mode uses the same orange accent but with dark brown backgrounds (#311502, #451d02) for proper contrast. *** +## **Examples** + +### **1) Brand color swap (global)** +Where: `App.css` + +```css +.cometchat { + --cometchat-primary-color: #0f766e; + --cometchat-extended-primary-color-500: #14b8a6; + --cometchat-text-color-highlight: #0f766e; + --cometchat-icon-color-highlight: #0f766e; +} +``` + +Expected result: Primary accents, buttons, and active states switch to teal. + +### **2) Dark mode (app-controlled)** +Where: `App.css` + set `data-theme` on the `.cometchat` wrapper + +```css +.cometchat-root[data-theme="dark"] .cometchat { + --cometchat-background-color-03: #121212; + --cometchat-neutral-color-300: #1e1e1e; + --cometchat-text-color-highlight: #f76808; +} +``` + +Expected result: Panels and surfaces darken while accents remain visible. + +### **3) Conversations-only override** +Where: `App.css` + +```css +.cometchat .cometchat-conversations { + --cometchat-primary-color: #f76808; + --cometchat-message-seen-color: #f76808; + --cometchat-radius-max: 12px; +} +``` + +Expected result: Only the Conversations component changes; other components stay default. + +### **4) Bubble styling (incoming/outgoing)** +Where: `App.css` + +```css +.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body { + --cometchat-primary-color: #f76808; + --cometchat-extended-primary-color-900: #fbaa75; +} + +.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body { + --cometchat-neutral-color-300: #f1f5f9; +} +``` + +Expected result: Outgoing bubbles use orange; incoming bubbles use a light slate. For more variants, see [Message Bubble Styling](/ui-kit/react/theme/message-bubble-styling). + +*** + ## Common Failure Modes @@ -279,10 +402,11 @@ Define different **color schemes** for **light and dark modes**. | --- | --- | --- | | CSS has no effect | CSS file not imported in app entry | Add `import "./App.css";` in `App.tsx` | | CSS has no effect | Base stylesheet not imported | Add `@import url("@cometchat/chat-uikit-react/css-variables.css");` at top of `App.css` | +| Overrides not applying | Missing `.cometchat` scope in selector | Ensure your overrides are scoped under `.cometchat` | | Selectors don't match | Using CSS Modules (hashed class names) | Move rules to a global stylesheet, not `*.module.css` | | Component-level override not working | Missing `.cometchat` parent in selector | Use `.cometchat .cometchat-conversations` not just `.cometchat-conversations` | -| Dark mode unchanged | Only overrode light mode tokens | Add overrides in `@media (prefers-color-scheme: dark)` or `.cometchat[data-theme="dark"]` | -| Font not changing | `--cometchat-font-family` set on wrong element | Set via `document.documentElement.style.setProperty()` in `useEffect` or on `.cometchat` class | +| Dark mode unchanged | `data-theme` missing or mismatch | Set `data-theme="dark"` on your wrapper (e.g., `.cometchat-root`) and target `.cometchat-root[data-theme="dark"] .cometchat`, or use `@media (prefers-color-scheme: dark)` | +| Font not changing | `--cometchat-font-family` set on wrong element | Set on `.cometchat` or via a ref to the `.cometchat` wrapper | | Styles leak into host app | Missing `.cometchat` scope prefix | Always scope overrides under `.cometchat` | | Token change has no visible effect | Token doesn't control the property you expect | Check the [Color Resources](/ui-kit/react/theme/color-resources) table for what each token controls | From fddfa82c338d110cff30b60341a300c87b0f9664 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 18 Feb 2026 20:34:52 +0530 Subject: [PATCH 29/59] Update theme.mdx --- ui-kit/react/theme.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/ui-kit/react/theme.mdx b/ui-kit/react/theme.mdx index 6faec8d8f..2873fd3e6 100644 --- a/ui-kit/react/theme.mdx +++ b/ui-kit/react/theme.mdx @@ -347,7 +347,7 @@ Where: `App.css` } ``` -Expected result: Primary accents, buttons, and active states switch to teal. +**Expected result**: Primary accents, buttons, and active states switch to teal. ### **2) Dark mode (app-controlled)** Where: `App.css` + set `data-theme` on the `.cometchat` wrapper @@ -360,7 +360,7 @@ Where: `App.css` + set `data-theme` on the `.cometchat` wrapper } ``` -Expected result: Panels and surfaces darken while accents remain visible. +**Expected result**: Panels and surfaces darken while accents remain visible. ### **3) Conversations-only override** Where: `App.css` @@ -373,7 +373,7 @@ Where: `App.css` } ``` -Expected result: Only the Conversations component changes; other components stay default. +**Expected result**: Only the Conversations component changes; other components stay default. ### **4) Bubble styling (incoming/outgoing)** Where: `App.css` @@ -389,7 +389,7 @@ Where: `App.css` } ``` -Expected result: Outgoing bubbles use orange; incoming bubbles use a light slate. For more variants, see [Message Bubble Styling](/ui-kit/react/theme/message-bubble-styling). +**Expected result**: Outgoing bubbles use orange; incoming bubbles use a light slate. For more variants, see [Message Bubble Styling](/ui-kit/react/theme/message-bubble-styling). *** From dec15c0f13a008a08c39df68714c310d504877e1 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Thu, 19 Feb 2026 16:02:45 +0530 Subject: [PATCH 30/59] Update color-resources.mdx --- ui-kit/react/theme/color-resources.mdx | 31 ++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/ui-kit/react/theme/color-resources.mdx b/ui-kit/react/theme/color-resources.mdx index a6f1de995..d0988fee0 100644 --- a/ui-kit/react/theme/color-resources.mdx +++ b/ui-kit/react/theme/color-resources.mdx @@ -41,6 +41,14 @@ description: "Complete reference of all CSS variables and color tokens available The **Chat UI Kit** features a carefully crafted **color palette** designed for a **consistent and visually appealing** user experience. It follows the **Block, Element, Modifier (BEM)** methodology, ensuring **scalable styling** and easy **customization** by overriding the Kit's CSS variables. + +**Agent Guardrails (Use These Rules)** +- Use the snippets **exactly as shown**; only change token values. +- Keep `.cometchat` and `.cometchat-conversations` intact — these are the tested selectors. +- Keep overrides in **global CSS** (`App.css`), not CSS Modules. +- Dark mode examples assume `data-theme` is set on `.cometchat`. If you set `data-theme` elsewhere, update the selector to match. + + **Prerequisites before overriding any color tokens:** 1. Import the base stylesheet: `@import url("@cometchat/chat-uikit-react/css-variables.css");` in your `App.css` @@ -51,6 +59,29 @@ The **Chat UI Kit** features a carefully crafted **color palette** designed for *** +## Selector Contract + +Use these patterns when overriding colors. This is the canonical selector contract for this page. + +**Global override** +```css +.cometchat { --token: value; } +``` + +**Component override** +```css +.cometchat-conversations { --token: value; } +``` + +**Dark mode override (default)** +```css +.cometchat[data-theme="dark"] { --token: value; } +``` + +If you apply `data-theme` to a wrapper instead of `.cometchat`, scope the selector to match your DOM structure. + +*** + ## CSS Variable Reference This table maps every commonly used token to what it visually controls. Use this to avoid hallucinating what a token does. From d1aadb72ee429842f2e709b3c836f8d4e8ec86fc Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Thu, 19 Feb 2026 16:18:29 +0530 Subject: [PATCH 31/59] Update conversations.mdx --- ui-kit/react/conversations.mdx | 74 +++++++++++++++++----------------- 1 file changed, 37 insertions(+), 37 deletions(-) diff --git a/ui-kit/react/conversations.mdx b/ui-kit/react/conversations.mdx index e65f2bbc0..6f8192fc6 100644 --- a/ui-kit/react/conversations.mdx +++ b/ui-kit/react/conversations.mdx @@ -45,7 +45,7 @@ The Conversations is a Component, that shows all conversations related to the cu -```tsx +```tsx lines import { CometChatConversations, TitleAlignment, @@ -67,7 +67,7 @@ export default ConversationsDemo; -```jsx +```jsx lines import { CometChatConversations, } from "@cometchat/chat-uikit-react"; @@ -101,7 +101,7 @@ export default ConversationsDemo; -```tsx +```tsx lines import { CometChatConversations } from "@cometchat/chat-uikit-react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; @@ -116,7 +116,7 @@ const getOnItemClick = (conversation: CometChat.Conversation) => { -```jsx +```jsx lines import { CometChatConversations } from "@cometchat/chat-uikit-react"; const getOnItemClick = (conversation) => { @@ -139,7 +139,7 @@ The `OnSelect` event is triggered upon the completion of a selection in `Selecti -```tsx +```tsx lines import { CometChatConversations, SelectionMode, @@ -163,7 +163,7 @@ const getOnSelect = ( -```jsx +```jsx lines import { CometChatConversations, SelectionMode, @@ -192,7 +192,7 @@ This action doesn't change the behavior of the component but rather listens for -```tsx +```tsx lines import { CometChatConversations } from "@cometchat/chat-uikit-react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; @@ -206,7 +206,7 @@ const handleOnError = (error: CometChat.CometChatException) => { -```jsx +```jsx lines import { CometChatConversations } from "@cometchat/chat-uikit-react"; const handleOnError = (error) => { @@ -228,7 +228,7 @@ The `onSearchBarClicked` event is triggered when the user clicks the search bar. -```tsx +```tsx lines import { CometChatConversations } from "@cometchat/chat-uikit-react"; const handleSearchClick = () => { @@ -241,7 +241,7 @@ const handleSearchClick = () => { -```jsx +```jsx lines import { CometChatConversations } from "@cometchat/chat-uikit-react"; const handleSearchClick = () => { @@ -272,7 +272,7 @@ You can set filters using the following parameters. -```tsx +```tsx lines import { CometChatConversations } from "@cometchat/chat-uikit-react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; @@ -286,7 +286,7 @@ import { CometChat } from "@cometchat/chat-sdk-javascript"; -```jsx +```jsx lines import { CometChatConversations } from "@cometchat/chat-uikit-react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; @@ -309,7 +309,7 @@ import { CometChat } from "@cometchat/chat-sdk-javascript"; -```tsxtsx +```tsxtsx lines const ccConversationDeleted = CometChatConversationEvents.ccConversationDeleted.subscribe( (conversation: CometChat.Conversation) => { @@ -322,11 +322,9 @@ const ccConversationDeleted = -*** - -```tsxtsx +```tsxtsx ccConversationDeleted?.unsubscribe(); ``` @@ -334,6 +332,8 @@ ccConversationDeleted?.unsubscribe(); +*** + ## Customization To fit your app's design requirements, you can customize the appearance of the conversation component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs. @@ -355,7 +355,7 @@ Using CSS you can customize the look and feel of the component in your app like -```css +```css lines .cometchat-conversations .cometchat-list-item__body-title, .cometchat-conversations .cometchat-list__header-title, .cometchat-conversations .cometchat-avatar__text, @@ -397,7 +397,7 @@ These are a set of small functional customizations that allow you to fine-tune t -```tsx +```tsx lines
@@ -408,7 +408,7 @@ These are a set of small functional customizations that allow you to fine-tune t -```jsx +```jsx lines
@@ -465,7 +465,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatListItem, @@ -497,7 +497,7 @@ const getItemView = (conversation: CometChat.Conversation) => { -```css +```css lines .cometchat-conversations .cometchat-avatar { border-radius: 8px; width: 32px; @@ -527,7 +527,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { @@ -614,7 +614,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatConversations } from "@cometchat/chat-uikit-react"; @@ -666,7 +666,7 @@ const CustomTrailingButtonView = (conv: CometChat.Conversation) => { -```css +```css lines .conversations__trailing-view { display: flex; flex-direction: column; @@ -720,7 +720,7 @@ Assigns the list of text formatters. If the provided list is not null, it sets t -```ts +```ts lines import { CometChatTextFormatter } from "@cometchat/chat-uikit-react"; import DialogHelper from "./Dialog"; import { CometChat } from "@cometchat/chat-sdk-javascript"; @@ -834,7 +834,7 @@ export default ShortcutFormatter; -```tsx +```tsx lines import React from "react"; import ReactDOM from "react-dom"; @@ -902,7 +902,7 @@ export default class DialogHelper { -```tsx +```tsx lines import ShortcutFormatter from "./ShortCutFormatter"; ; @@ -926,7 +926,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import { CometChatButton, CometChatConversations, @@ -952,7 +952,7 @@ const getHeaderView = () => { -```css +```css lines .conversations__header { display: flex; width: 100%; @@ -996,7 +996,7 @@ The `lastMessageDateTimeFormat` property allows you to customize the **Last Mess Default Date Time Format: -```ruby +```ruby lines new CalendarObject({ today: `hh:mm A`, // Example: "10:30 AM" yesterday: `[yesterday]`, // Example: "yesterday" @@ -1008,7 +1008,7 @@ The following example demonstrates how to modify the **Last Message** timestamp -```ts +```ts lines import { CometChatConversations, CalendarObject, @@ -1054,7 +1054,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatConversations } from "@cometchat/chat-uikit-react"; @@ -1087,7 +1087,7 @@ const customTitleView = (conversation: CometChat.Conversation) => { -```css +```css lines .cometchat-conversations .conversations__title-view { display: flex; gap: 4px; @@ -1136,7 +1136,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatConversations } from "@cometchat/chat-uikit-react"; @@ -1175,7 +1175,7 @@ function getFormattedTimestamp(timestamp: number): string { -```css +```css lines .cometchat-conversations .cometchat-list-item__body-subtitle { overflow: hidden; color: var(--cometchat-text-color-secondary, #727272); @@ -1213,7 +1213,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import { CometChatOption, CometChatConversations, @@ -1259,7 +1259,7 @@ const getOptions = (conversation: CometChat.Conversation) => { -```css +```css lines .cometchat-conversations .cometchat-menu-list__main-menu-item-icon-delete { background: red; } From 7812825084f1a62b211e2c270b79c20be5d94c78 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Thu, 19 Feb 2026 16:21:03 +0530 Subject: [PATCH 32/59] Update users.mdx --- ui-kit/react/users.mdx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/ui-kit/react/users.mdx b/ui-kit/react/users.mdx index e0f963620..2a1260a37 100644 --- a/ui-kit/react/users.mdx +++ b/ui-kit/react/users.mdx @@ -96,7 +96,7 @@ export default UsersDemo; [Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -##### 1. onSelect +#### 1. onSelect The `onSelect` action is activated when you select the done icon while in selection mode. This returns a list of all the users that you have selected. @@ -151,7 +151,7 @@ export default UsersDemo; -##### 2. onItemClick +#### 2. onItemClick The `OnItemClick` event is activated when you click on the UserList 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. @@ -190,7 +190,7 @@ export default UsersDemo; -##### 3. onEmpty +#### 3. onEmpty This action allows you to specify a callback function to be executed when a certain condition, typically the absence of data or content, is met within the component or element. @@ -230,7 +230,7 @@ export default UsersDemo; -##### 4. onError +#### 4. onError This action doesn't change the behavior of the component but rather listens for any errors that occur in the User component. @@ -274,7 +274,7 @@ export default UsersDemo; **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. UserRequestBuilder +#### 1. UserRequestBuilder The [UserRequestBuilder](/sdk/javascript/retrieve-users) enables you to filter and customize the user list based on available parameters in UserRequestBuilder. This feature allows you to create more specific and targeted queries when fetching users. The following are the parameters available in [UserRequestBuilder](/sdk/javascript/retrieve-users) @@ -337,7 +337,7 @@ export default UsersDemo; -##### 2. SearchRequestBuilder +#### 2. SearchRequestBuilder The SearchRequestBuilder uses [UserRequestBuilder](/sdk/javascript/retrieve-users) enables you to filter and customize the search list based on available parameters in UserRequestBuilder. This feature allows you to keep uniformity between the displayed UserList and searched UserList. From 21e25182152c72cf74f548a75b1e0403e1d162f0 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Thu, 19 Feb 2026 16:25:45 +0530 Subject: [PATCH 33/59] Update users.mdx --- ui-kit/react/users.mdx | 118 +++++++++++++++++++++-------------------- 1 file changed, 60 insertions(+), 58 deletions(-) diff --git a/ui-kit/react/users.mdx b/ui-kit/react/users.mdx index 2a1260a37..4dd5e87be 100644 --- a/ui-kit/react/users.mdx +++ b/ui-kit/react/users.mdx @@ -65,7 +65,7 @@ The following code snippet illustrates how you can directly incorporate the User -```tsx +```tsx lines import { CometChatUsers } from "@cometchat/chat-uikit-react"; function UsersDemo() { @@ -78,7 +78,7 @@ export default UsersDemo; -```jsx +```jsx lines import { CometChatUsers } from "@cometchat/chat-uikit-react"; function UsersDemo() { @@ -104,7 +104,7 @@ This action does not come with any predefined behavior. However, you have the fl -```ts +```ts lines import { CometChatUsers, SelectionMode } from "@cometchat/chat-uikit-react"; function UsersDemo() { @@ -127,7 +127,7 @@ export default UsersDemo; -```js +```js lines import { CometChatUsers, SelectionMode } from "@cometchat/chat-uikit-react"; function UsersDemo() { @@ -157,7 +157,7 @@ The `OnItemClick` event is activated when you click on the UserList item. This a -```ts +```ts lines import { CometChatUsers } from "@cometchat/chat-uikit-react"; function UsersDemo() { @@ -173,7 +173,7 @@ export default UsersDemo; -```js +```js lines import { CometChatUsers } from "@cometchat/chat-uikit-react"; function UsersDemo() { @@ -196,7 +196,7 @@ This action allows you to specify a callback function to be executed when a cert -```ts +```ts lines import { CometChatUsers } from "@cometchat/chat-uikit-react"; function UsersDemo() { @@ -212,7 +212,7 @@ export default UsersDemo; -```js +```js lines import { CometChatUsers } from "@cometchat/chat-uikit-react"; function UsersDemo() { @@ -236,7 +236,7 @@ This action doesn't change the behavior of the component but rather listens for -```ts +```ts lines import { CometChatUsers } from "@cometchat/chat-uikit-react"; function UsersDemo() { @@ -252,7 +252,7 @@ export default UsersDemo; -```js +```js lines import { CometChatUsers } from "@cometchat/chat-uikit-react"; function UsersDemo() { @@ -296,7 +296,7 @@ In the example below, we are applying a filter to the UserList based on Friends. -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatUsers } from "@cometchat/chat-uikit-react"; @@ -316,7 +316,7 @@ export default UsersDemo; -```js +```js lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatUsers } from "@cometchat/chat-uikit-react"; @@ -345,7 +345,7 @@ The SearchRequestBuilder uses [UserRequestBuilder](/sdk/javascript/retrieve-user -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatUsers } from "@cometchat/chat-uikit-react"; @@ -365,7 +365,7 @@ export default UsersDemo; -```js +```js lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatUsers } from "@cometchat/chat-uikit-react"; @@ -414,7 +414,7 @@ Using CSS you can customize the look and feel of the component in your app like -```ts +```ts lines import { CometChatUsers } from "@cometchat/chat-uikit-react"; function UsersDemo() { @@ -427,7 +427,7 @@ export default UsersDemo; -```js +```js lines import { CometChatUsers } from "@cometchat/chat-uikit-react"; function UsersDemo() { @@ -440,7 +440,7 @@ export default UsersDemo; -```css +```css lines .cometchat .cometchat-users .cometchat-list__header-title { background-color: #fce9ea; color: #e5484d; @@ -501,7 +501,7 @@ These are a set of small functional customizations that allow you to fine-tune t -```ts +```ts lines import { CometChatUsers, TitleAlignment } from "@cometchat/chat-uikit-react"; function UsersDemo() { @@ -520,7 +520,7 @@ export default UsersDemo; -```js +```js lines import { CometChatUsers, TitleAlignment } from "@cometchat/chat-uikit-react"; function UsersDemo() { @@ -586,7 +586,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatUsers } from "@cometchat/chat-uikit-react"; @@ -619,7 +619,7 @@ export default UsersDemo; -```js +```js lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatUsers } from "@cometchat/chat-uikit-react"; @@ -652,7 +652,7 @@ export default UsersDemo; -```css +```css lines .cometchat .cometchat-users .cometchat-list-item__body-subtitle { overflow: hidden; color: #727272; @@ -691,7 +691,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatUsers } from "@cometchat/chat-uikit-react"; @@ -710,7 +710,7 @@ import { CometChatUsers } from "@cometchat/chat-uikit-react"; -```css +```css lines .users__title-view{ display: flex; @@ -772,7 +772,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatUsers } from "@cometchat/chat-uikit-react"; @@ -803,7 +803,7 @@ export default UsersDemo; -```js +```js lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatUsers } from "@cometchat/chat-uikit-react"; @@ -834,7 +834,7 @@ export default UsersDemo; -```css +```css lines .users-subtitle { overflow: hidden; color: #727272; @@ -867,7 +867,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatUsers,localize,CometChatButton } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -894,7 +894,7 @@ const getHeaderView = () => { -```css +```css lines .cometchat-users__header { display: flex; width: 100%; @@ -944,7 +944,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatUsers,CometChatAvatar } from "@cometchat/chat-uikit-react"; @@ -966,34 +966,36 @@ const customLeadingView = (user: CometChat.User): JSX.Element => { -```css +```css lines +.cometchat-users .cometchat-list-item .users__leading-view .cometchat-avatar__image, +.cometchat-users .cometchat-list-item .users__leading-view .cometchat-avatar { + border-radius: 8px; + height: 48px; + width: 48px; + filter: blur(1px); +} - .cometchat-users .cometchat-list-item .users__leading-view .cometchat-avatar__image, .cometchat-users .cometchat-list-item .users__leading-view .cometchat-avatar{ - border-radius: 8px; - height: 48px ; - width: 48px ; - filter: blur(1px); - } - .users__leading-view-role{ - display: flex; - width: 48px; - height: 15px; - padding: 1px 3px; - justify-content: center; - align-items: center; - font:600 8px/9.6px Roboto; - position:absolute; - bottom:-2px; - } - .users__leading-view{ - position: relative; - } - - .users__leading-view-role img{ - height: 18px; - width: 18px; - margin-bottom: 3px; - } +.users__leading-view-role { + display: flex; + width: 48px; + height: 15px; + padding: 1px 3px; + justify-content: center; + align-items: center; + font: 600 8px/9.6px Roboto; + position: absolute; + bottom: -2px; +} + +.users__leading-view { + position: relative; +} + +.users__leading-view-role img { + height: 18px; + width: 18px; + margin-bottom: 3px; +} ``` @@ -1014,7 +1016,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { From 8613f2092cc9ca88e0d588c644b02ad2abecf05c Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Thu, 19 Feb 2026 16:27:07 +0530 Subject: [PATCH 34/59] Update users.mdx --- ui-kit/react/users.mdx | 69 ++++++++++++++++++++++-------------------- 1 file changed, 36 insertions(+), 33 deletions(-) diff --git a/ui-kit/react/users.mdx b/ui-kit/react/users.mdx index 4dd5e87be..2498f9d99 100644 --- a/ui-kit/react/users.mdx +++ b/ui-kit/react/users.mdx @@ -1040,28 +1040,31 @@ const customTrailingButtonView = (user:CometChat.User) => { ```css -.users__trailing-view{ - display: flex; - width: 33px; - padding: 5px 3px; - flex-direction: column; - justify-content: center; - align-items: center; - gap: 3px; - border-radius: 4px; - background: #6852D6; +.users__trailing-view { + display: flex; + width: 33px; + padding: 5px 3px; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 3px; + border-radius: 4px; + background: #6852D6; } -.users__trailing-view-icon{ - width: 10px; - height: 10px; + +.users__trailing-view-icon { + width: 10px; + height: 10px; } -.users__trailing-view-icon img{ - height: inherit; - width: inherit; + +.users__trailing-view-icon img { + height: inherit; + width: inherit; } -.users__trailing-view-text{ - font: 600 8px Inter; - color: white; + +.users__trailing-view-text { + font: 600 8px Inter; + color: white; } ``` @@ -1143,23 +1146,23 @@ export default UsersDemo; ```css .cometchat .cometchat-users .cometchat-menu-list__menu { - background: none; + background: none; } .cometchat .cometchat-users .cometchat-menu-list__main-menu-item-icon { - height: 24px; - width: 24px; - display: flex; - align-items: center; - justify-content: center; - border: none; - align-self: center; - background: #f44649; - flex-shrink: 0; - -webkit-mask: url("../assets/delete.svg") center center no-repeat; - mask: url("../assets/delete.svg") center center no-repeat; - -webkit-mask-size: contain; - mask-size: contain; + height: 24px; + width: 24px; + display: flex; + align-items: center; + justify-content: center; + border: none; + align-self: center; + background: #f44649; + flex-shrink: 0; + -webkit-mask: url("../assets/delete.svg") center center no-repeat; + mask: url("../assets/delete.svg") center center no-repeat; + -webkit-mask-size: contain; + mask-size: contain; } ``` From 762449dc67e5fdd8b8d7edf3f0614fdcd434ea55 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Thu, 19 Feb 2026 16:31:48 +0530 Subject: [PATCH 35/59] Update groups.mdx --- ui-kit/react/groups.mdx | 232 +++++++++++++++++++++------------------- 1 file changed, 120 insertions(+), 112 deletions(-) diff --git a/ui-kit/react/groups.mdx b/ui-kit/react/groups.mdx index 98e5397ef..6995f1b1d 100644 --- a/ui-kit/react/groups.mdx +++ b/ui-kit/react/groups.mdx @@ -64,7 +64,7 @@ The following code snippet illustrates how you can directly incorporate the Grou -```tsx +```tsx lines import { CometChatGroups } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -78,7 +78,7 @@ export default GroupsDemo; -```jsx +```jsx lines import { CometChatGroups } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -107,7 +107,7 @@ This action does not come with any predefined behavior. However, you have the fl -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatGroups, SelectionMode } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -131,7 +131,7 @@ export default GroupsDemo; -```js +```js lines import { CometChatGroups, SelectionMode } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -161,7 +161,7 @@ The `onItemClick` event is activated when you click on the Group List item. This -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatGroups } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -179,7 +179,7 @@ export default GroupsDemo; -```js +```js lines import { CometChatGroups } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -203,7 +203,7 @@ This action doesn't change the behavior of the component but rather listens for -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatGroups } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -221,7 +221,7 @@ export default GroupsDemo; -```js +```js lines import { CometChatGroups } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -261,7 +261,7 @@ In the example below, we are applying a filter to the Group List based on only j -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatGroups } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -282,7 +282,7 @@ export default GroupsDemo; -```js +```js lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatGroups } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -312,7 +312,7 @@ The SearchRequestBuilder uses [GroupsRequestBuilder](/sdk/javascript/retrieve-gr -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatGroups } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -333,7 +333,7 @@ export default GroupsDemo; -```js +```js lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatGroups } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -383,7 +383,7 @@ Using CSS you can customize the look and feel of the component in your app like -```ts +```ts lines import { CometChatGroups } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -397,7 +397,7 @@ export default GroupsDemo; -```js +```js lines import { CometChatGroups } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -411,7 +411,7 @@ export default GroupsDemo; -```css +```css lines .cometchat .cometchat-groups .cometchat-list__header-title { background-color: #edeafa; color: #6852d6; @@ -481,7 +481,7 @@ These are a set of small functional customizations that allow you to fine-tune t -```ts +```ts lines import { CometChatGroups, TitleAlignment } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -501,7 +501,7 @@ export default GroupsDemo; -```js +```js lines import { CometChatGroups, TitleAlignment } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -564,7 +564,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatGroups } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -593,7 +593,7 @@ export default GroupsDemo; -```js +```js lines import { CometChatGroups } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -621,7 +621,7 @@ export default GroupsDemo; -```css +```css lines .group-list-item { display: flex; flex-direction: column; @@ -706,7 +706,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatGroups } from "@cometchat/chat-uikit-react"; @@ -725,39 +725,43 @@ const customTitleView = (group: CometChat.Group) => { -```css -.groups__title-view{ -display: flex; -align-items: center; -gap: 4px; -align-self: stretch; +```css lines +.groups__title-view { + display: flex; + align-items: center; + gap: 4px; + align-self: stretch; } -.groups__title-view-name{ -overflow: hidden; -color: #141414; -text-overflow: ellipsis; -font:500 16px Roboto + +.groups__title-view-name { + overflow: hidden; + color: #141414; + text-overflow: ellipsis; + font: 500 16px Roboto } -.groups__title-view-type{ -color: #FFF; -font: 600 8px Roboto; -display: flex; -height: 15px; -padding: 1px 3px; -justify-content: center; -align-items: center; -gap: 4px; -border-radius: 7px; -background: #09C26F; + +.groups__title-view-type { + color: #FFF; + font: 600 8px Roboto; + display: flex; + height: 15px; + padding: 1px 3px; + justify-content: center; + align-items: center; + gap: 4px; + border-radius: 7px; + background: #09C26F; } -.groups__title-view-public .groups__title-view-type{ -background: #0B7BEA; + +.groups__title-view-public .groups__title-view-type { + background: #0B7BEA; } -.groups__title-view-type img{ -background: #fff; -border-radius: 4px; -height: 12px; -width: 12px; + +.groups__title-view-type img { + background: #fff; + border-radius: 4px; + height: 12px; + width: 12px; } ``` @@ -787,7 +791,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatGroups } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -814,7 +818,7 @@ export default GroupsDemo; -```js +```js lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatGroups } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -841,7 +845,7 @@ export default GroupsDemo; -```css +```css lines .cometchat .cometchat-groups .group-subtitle { overflow: hidden; color: #727272; @@ -872,7 +876,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatGroups,CometChatAvatar } from "@cometchat/chat-uikit-react"; @@ -907,32 +911,34 @@ import { CometChatGroups,CometChatAvatar } from "@cometchat/chat-uikit-react"; -```css - -.cometchat-groups .cometchat-list-item .groups__leading-view .cometchat-avatar__image, .cometchat-groups .cometchat-list-item .groups__leading-view .cometchat-avatar{ - border-radius: 8px; - height: 48px ; - width: 48px ; +```css lines +.cometchat-groups .cometchat-list-item .groups__leading-view .cometchat-avatar__image, +.cometchat-groups .cometchat-list-item .groups__leading-view .cometchat-avatar { + border-radius: 8px; + height: 48px; + width: 48px; } -.groups__leading-view-info{ - display: flex; - width: 48px; - height: 15px; - padding: 1px 3px; - justify-content: center; - align-items: center; - color:#FFF; - font:600 8px/9.6px Roboto; - background:#FFAB00; - position:absolute; - bottom:-2px; +.groups__leading-view-info { + display: flex; + width: 48px; + height: 15px; + padding: 1px 3px; + justify-content: center; + align-items: center; + color: #FFF; + font: 600 8px/9.6px Roboto; + background: #FFAB00; + position: absolute; + bottom: -2px; } -.groups__leading-view-joined .groups__leading-view-info{ - background:#09C26F; + +.groups__leading-view-joined .groups__leading-view-info { + background: #09C26F; } -.groups__leading-view{ - position: relative; + +.groups__leading-view { + position: relative; } ``` @@ -954,7 +960,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { @@ -974,22 +980,23 @@ 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; } ``` @@ -1013,7 +1020,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import { CometChatGroups } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -1031,7 +1038,7 @@ export default GroupsDemo; -```js +```js lines import { CometChatGroups } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -1049,7 +1056,7 @@ export default GroupsDemo; -```css +```css lines .group-header-view { height: 24px; width: 24px; @@ -1087,7 +1094,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import { CometChatGroups, CometChatOption } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -1113,7 +1120,7 @@ export default GroupsDemo; -```js +```js lines import { CometChatGroups, CometChatOption } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -1139,24 +1146,25 @@ export default GroupsDemo; -```css +```css lines .cometchat .cometchat-groups .cometchat-menu-list__menu { - background: none; + background: none; } + .cometchat .cometchat-groups .cometchat-menu-list__main-menu-item-icon { - height: 24px; - width: 24px; - display: flex; - align-items: center; - justify-content: center; - border: none; - align-self: center; - background: #f44649; - flex-shrink: 0; - -webkit-mask: url("../assets/delete.svg") center center no-repeat; - mask: url("../assets/delete.svg") center center no-repeat; - -webkit-mask-size: contain; - mask-size: contain; + height: 24px; + width: 24px; + display: flex; + align-items: center; + justify-content: center; + border: none; + align-self: center; + background: #f44649; + flex-shrink: 0; + -webkit-mask: url("../assets/delete.svg") center center no-repeat; + mask: url("../assets/delete.svg") center center no-repeat; + -webkit-mask-size: contain; + mask-size: contain; } ``` From 01973654eb7e851f886435d5d2001db89f1ca0e9 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Thu, 19 Feb 2026 16:35:30 +0530 Subject: [PATCH 36/59] Update groups.mdx --- ui-kit/react/groups.mdx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/ui-kit/react/groups.mdx b/ui-kit/react/groups.mdx index 6995f1b1d..3eb7d4862 100644 --- a/ui-kit/react/groups.mdx +++ b/ui-kit/react/groups.mdx @@ -99,7 +99,7 @@ export default GroupsDemo; [Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -##### 1. onSelect +#### 1. onSelect The `onSelect` action is activated when you select the done icon while in selection mode. This returns the `group` object along with the boolean flag `selected` to indicate if the group was selected or unselected. @@ -155,7 +155,7 @@ export default GroupsDemo; -##### 2. onItemClick +#### 2. onItemClick The `onItemClick` event is activated when you click on the Group List item. This action does not come with any predefined behavior. However, you have the flexibility to override this event and tailor it to suit your needs using the following code snippet. @@ -197,7 +197,7 @@ export default GroupsDemo; -##### 3. onError +#### 3. onError This action doesn't change the behavior of the component but rather listens for any errors that occur in the Groups component. @@ -243,7 +243,7 @@ export default GroupsDemo; **Filters** allow you to customize the data displayed in a list within a Component. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK. -##### 1. GroupsRequestBuilder +#### 1. GroupsRequestBuilder The [GroupsRequestBuilder](/sdk/javascript/retrieve-groups) enables you to filter and customize the group list based on available parameters in [GroupsRequestBuilder](/sdk/javascript/retrieve-groups). This feature allows you to create more specific and targeted queries when fetching groups. The following are the parameters available in [GroupsRequestBuilder](/sdk/javascript/retrieve-groups) @@ -304,7 +304,7 @@ export default GroupsDemo; -##### 2. SearchRequestBuilder +#### 2. SearchRequestBuilder The SearchRequestBuilder uses [GroupsRequestBuilder](/sdk/javascript/retrieve-groups) enables you to filter and customize the search list based on available parameters in GroupsRequestBuilder. This feature allows you to keep uniformity between the displayed Groups List and searched Group List. From 440240f8d6709a290415f36157cf2348cfce06ed Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Thu, 19 Feb 2026 16:36:41 +0530 Subject: [PATCH 37/59] Update groups.mdx --- ui-kit/react/groups.mdx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/ui-kit/react/groups.mdx b/ui-kit/react/groups.mdx index 3eb7d4862..9d2ea9667 100644 --- a/ui-kit/react/groups.mdx +++ b/ui-kit/react/groups.mdx @@ -410,7 +410,7 @@ export default GroupsDemo; - + ```css lines .cometchat .cometchat-groups .cometchat-list__header-title { background-color: #edeafa; @@ -620,7 +620,7 @@ export default GroupsDemo; - + ```css lines .group-list-item { display: flex; @@ -724,7 +724,7 @@ const customTitleView = (group: CometChat.Group) => { - + ```css lines .groups__title-view { display: flex; @@ -844,7 +844,7 @@ export default GroupsDemo; - + ```css lines .cometchat .cometchat-groups .group-subtitle { overflow: hidden; @@ -910,7 +910,7 @@ import { CometChatGroups,CometChatAvatar } from "@cometchat/chat-uikit-react"; - + ```css lines .cometchat-groups .cometchat-list-item .groups__leading-view .cometchat-avatar__image, .cometchat-groups .cometchat-list-item .groups__leading-view .cometchat-avatar { @@ -979,7 +979,7 @@ return
- + ```css lines .groups__trailing-view { display: flex; @@ -1055,7 +1055,7 @@ export default GroupsDemo; - + ```css lines .group-header-view { height: 24px; @@ -1145,7 +1145,7 @@ export default GroupsDemo; - + ```css lines .cometchat .cometchat-groups .cometchat-menu-list__menu { background: none; From 868045e8bdfec8d4a560af540a7345acb54a0ae7 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Thu, 19 Feb 2026 16:37:02 +0530 Subject: [PATCH 38/59] Update users.mdx --- ui-kit/react/users.mdx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/ui-kit/react/users.mdx b/ui-kit/react/users.mdx index 2498f9d99..c57bfedb7 100644 --- a/ui-kit/react/users.mdx +++ b/ui-kit/react/users.mdx @@ -439,7 +439,7 @@ export default UsersDemo; - + ```css lines .cometchat .cometchat-users .cometchat-list__header-title { background-color: #fce9ea; @@ -651,7 +651,7 @@ export default UsersDemo; - + ```css lines .cometchat .cometchat-users .cometchat-list-item__body-subtitle { overflow: hidden; @@ -709,7 +709,7 @@ import { CometChatUsers } from "@cometchat/chat-uikit-react"; - + ```css lines .users__title-view{ @@ -833,7 +833,7 @@ export default UsersDemo; - + ```css lines .users-subtitle { overflow: hidden; @@ -893,7 +893,7 @@ const getHeaderView = () => { - + ```css lines .cometchat-users__header { display: flex; @@ -965,7 +965,7 @@ const customLeadingView = (user: CometChat.User): JSX.Element => { - + ```css lines .cometchat-users .cometchat-list-item .users__leading-view .cometchat-avatar__image, .cometchat-users .cometchat-list-item .users__leading-view .cometchat-avatar { @@ -1038,7 +1038,7 @@ const customTrailingButtonView = (user:CometChat.User) => { - + ```css .users__trailing-view { display: flex; @@ -1143,7 +1143,7 @@ export default UsersDemo; - + ```css .cometchat .cometchat-users .cometchat-menu-list__menu { background: none; From 09b7f61fbe160f96d7eb1faf7cfe47e256f94fca Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Thu, 19 Feb 2026 16:43:14 +0530 Subject: [PATCH 39/59] Update group-members.mdx --- ui-kit/react/group-members.mdx | 201 +++++++++++++++++---------------- 1 file changed, 104 insertions(+), 97 deletions(-) diff --git a/ui-kit/react/group-members.mdx b/ui-kit/react/group-members.mdx index b95e2f300..8cef75be0 100644 --- a/ui-kit/react/group-members.mdx +++ b/ui-kit/react/group-members.mdx @@ -58,7 +58,7 @@ The following code snippet illustrates how you can directly incorporate the Grou -```tsx +```tsx lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -81,7 +81,7 @@ export default GroupMembersDemo; -```jsx +```jsx lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; import React, { useState, useEffect } from "react"; @@ -111,7 +111,7 @@ export default GroupMembersDemo; [Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -##### 1. onSelect +#### 1. onSelect The `onSelect` action is activated when you select the done icon while in selection mode. This returns a list of all the group members that you have selected. @@ -119,7 +119,7 @@ This action does not come with any predefined behavior. However, you have the fl -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatGroupMembers, @@ -163,7 +163,7 @@ export default GroupMembersDemo; -```js +```js lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatGroupMembers, @@ -182,7 +182,7 @@ const GroupMembersDemo = () => { function handleOnSelect(groupMembers, selected) { console.log(groupMembers); - /** Your custom onSelect actions + /** Your custom onSelect actions **/ } return ( @@ -205,13 +205,13 @@ export default GroupMembersDemo; -##### 2. onItemClick +#### 2. onItemClick The `onItemClick` event is activated when you click on the Group Members List item. This action does not come with any predefined behavior. However, you have the flexibility to override this event and tailor it to suit your needs using the following code snippet. -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -247,7 +247,7 @@ export default GroupMembersDemo; -```js +```js lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; import { useEffect, useState } from "react"; @@ -284,13 +284,13 @@ export default GroupMembersDemo; -##### 3. onEmpty +#### 3. onEmpty This action allows you to specify a callback function to be executed when a certain condition, typically the absence of data or content, is met within the component or element. -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -323,7 +323,7 @@ export default GroupMembersDemo; -```js +```js lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; import { useEffect, useState } from "react"; @@ -357,13 +357,13 @@ export default GroupMembersDemo; -##### 4. onError +#### 4. onError This action doesn't change the behavior of the component but rather listens for any errors that occur in the Group Members component. -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -396,7 +396,7 @@ export default GroupMembersDemo; -```js +```js lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; import { useEffect, useState } from "react"; @@ -436,7 +436,7 @@ export default GroupMembersDemo; **Filters** allow you to customize the data displayed in a list within a Component. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK. -##### 1. GroupMembersRequestBuilder +#### 1. GroupMembersRequestBuilder The [GroupMembersRequestBuilder](/sdk/javascript/retrieve-group-members) enables you to filter and customize the group members list based on available parameters in GroupMembersRequestBuilder. This feature allows you to create more specific and targeted queries when fetching groups. The following are the parameters available in [GroupMembersRequestBuilder](/sdk/javascript/retrieve-group-members) @@ -452,7 +452,7 @@ In the example below, we are applying a filter to the Group Members by setting t -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -488,7 +488,7 @@ export default GroupMembersDemo; -```js +```js lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; import { useEffect, useState } from "react"; @@ -525,7 +525,7 @@ export default GroupMembersDemo; -##### 2. SearchRequestBuilder +#### 2. SearchRequestBuilder The SearchRequestBuilder uses [GroupMembersRequestBuilder](/sdk/javascript/retrieve-group-members) enables you to filter and customize the search list based on available parameters in GroupMembersRequestBuilder. This feature allows you to keep uniformity between the displayed Group Members List and searched Group Members List. @@ -533,7 +533,7 @@ The SearchRequestBuilder uses [GroupMembersRequestBuilder](/sdk/javascript/retri -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -567,7 +567,7 @@ export default GroupMembersDemo; -```js +```js lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; import { useEffect, useState } from "react"; @@ -618,7 +618,7 @@ Events emitted by the Group Members component is as follows. -```tsx +```tsx lines const ccGroupMemberBanned = CometChatGroupEvents.ccGroupMemberBanned.subscribe( (item: IGroupMemberKickedBanned) => { /** Your Code */ @@ -643,11 +643,9 @@ const ccGroupMemberScopeChanged = -*** - -```tsx +```tsx lines ccGroupMemberBanned?.unsubscribe(); ccGroupMemberKicked?.unsubscribe(); @@ -675,7 +673,7 @@ Using CSS you can customize the look and feel of the component in your app like -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -699,7 +697,7 @@ export default GroupMembersDemo; -```css +```css lines .cometchat-group-members .cometchat-list__header-title { background: #feede1; color: #f76808; @@ -746,7 +744,7 @@ These are a set of small functional customizations that allow you to fine-tune t -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -775,7 +773,7 @@ export default GroupMembersDemo; -```js +```js lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; import { useEffect, useState } from "react"; @@ -851,7 +849,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import { CometChat, GroupMember } from "@cometchat/chat-sdk-javascript"; import React from "react"; import { @@ -930,7 +928,7 @@ export default GroupMembersDemo; -```css +```css lines .group-member-list-item { display: flex; min-width: 240px; @@ -1029,7 +1027,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatGroups } from "@cometchat/chat-uikit-react"; @@ -1048,35 +1046,38 @@ const customTitleView = (member: CometChat.GroupMember) => { -```css -.group-members__title-view{ - display: flex; - align-items: center; - gap: 4px; - align-self: stretch; - } - .group-members__title-view-name{ - overflow: hidden; - color: #141414; - text-overflow: ellipsis; - font:500 16px Roboto - } - .group-members__title-view-type{ - color: #FFF; - font: 600 8px Roboto; - display: flex; - height: 15px; - padding: 1px 3px; - justify-content: center; - align-items: center; - gap: 3px; - border-radius: 7px; - background: #09C26F; - } - .group-members__title-view-public .group-members__title-view-role{ - //add css based on roles - background: #0B7BEA; - } +```css lines +.group-members__title-view { + display: flex; + align-items: center; + gap: 4px; + align-self: stretch; +} + +.group-members__title-view-name { + overflow: hidden; + color: #141414; + text-overflow: ellipsis; + font: 500 16px Roboto +} + +.group-members__title-view-type { + color: #FFF; + font: 600 8px Roboto; + display: flex; + height: 15px; + padding: 1px 3px; + justify-content: center; + align-items: center; + gap: 3px; + border-radius: 7px; + background: #09C26F; +} + +.group-members__title-view-public .group-members__title-view-role { + //add css based on roles + background: #0B7BEA; +} ``` @@ -1105,7 +1106,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import { CometChat, GroupMember } from "@cometchat/chat-sdk-javascript"; import React from "react"; import { CometChatGroupMembers } from "@cometchat/chat-uikit-react"; @@ -1150,7 +1151,7 @@ export default GroupMembersDemo; -```css +```css lines .group-member-subtitle { overflow: hidden; color: #727272; @@ -1178,7 +1179,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatGroupMembers,CometChatAvatar } from "@cometchat/chat-uikit-react"; @@ -1205,40 +1206,46 @@ const customLeadingView = (member: CometChat.GroupMember): JSX.Element => { -```css -.cometchat-group-members .cometchat-list-item .group-member__leading-view .cometchat-avatar__image, .cometchat-group-members .cometchat-list-item .group-member__leading-view .cometchat-avatar{ -border-radius: 8px; -height: 48px ; -width: 48px ; +```css lines +.cometchat-group-members .cometchat-list-item .group-member__leading-view .cometchat-avatar__image, +.cometchat-group-members .cometchat-list-item .group-member__leading-view .cometchat-avatar { + border-radius: 8px; + height: 48px; + width: 48px; } -.group-member__leading-view-scope{ -display: flex; -width: 48px; -height: 15px; -padding: 1px 3px; -justify-content: center; -align-items: center; -color:#FFF; -font:600 8px/9.6px Roboto; -background:#FFAB00; -position:absolute; -bottom:-2px; + +.group-member__leading-view-scope { + display: flex; + width: 48px; + height: 15px; + padding: 1px 3px; + justify-content: center; + align-items: center; + color: #FFF; + font: 600 8px/9.6px Roboto; + background: #FFAB00; + position: absolute; + bottom: -2px; } -.group-member__leading-view{ -position: relative; + +.group-member__leading-view { + position: relative; } -.group-member__leading-view-participant .group-member__leading-view-scope{ -display: none; +.group-member__leading-view-participant .group-member__leading-view-scope { + display: none; } -.group-member__leading-view-owner .group-member__leading-view-scope{ -background: #0B7BEA; + +.group-member__leading-view-owner .group-member__leading-view-scope { + background: #0B7BEA; } -.group-member__leading-view-admin .group-member__leading-view-scope{ -background: #FFAB00; + +.group-member__leading-view-admin .group-member__leading-view-scope { + background: #FFAB00; } -.group-member__leading-view-moderator .group-member__leading-view-scope{ -background: #09C26F; + +.group-member__leading-view-moderator .group-member__leading-view-scope { + background: #09C26F; } ``` @@ -1268,7 +1275,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import { CometChat, GroupMember } from "@cometchat/chat-sdk-javascript"; import React from "react"; import { @@ -1322,7 +1329,7 @@ export default GroupMembersDemo; -```css +```css lines .group-member-scope-tag { display: flex; padding: 4px 12px; @@ -1358,7 +1365,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatGroupMembers,localize } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -1385,7 +1392,7 @@ const getHeaderView = () => { -```css +```css lines .cometchat-group-members__header { display: flex; width: 100%; @@ -1437,7 +1444,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatGroupMembers, @@ -1487,7 +1494,7 @@ export default GroupMembersDemo; -```css +```css lines .cometchat-group-members .cometchat-menu-list__main-menu-item-icon { height: 24px; width: 24px; From a10b3eb3fe6f5ec02d0a8dc403e1a10efec853d4 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Thu, 19 Feb 2026 16:43:47 +0530 Subject: [PATCH 40/59] Update group-members.mdx --- ui-kit/react/group-members.mdx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/ui-kit/react/group-members.mdx b/ui-kit/react/group-members.mdx index 8cef75be0..5a28bb850 100644 --- a/ui-kit/react/group-members.mdx +++ b/ui-kit/react/group-members.mdx @@ -696,7 +696,7 @@ export default GroupMembersDemo; - + ```css lines .cometchat-group-members .cometchat-list__header-title { background: #feede1; @@ -927,7 +927,7 @@ export default GroupMembersDemo; - + ```css lines .group-member-list-item { display: flex; @@ -1045,7 +1045,7 @@ const customTitleView = (member: CometChat.GroupMember) => { - + ```css lines .group-members__title-view { display: flex; @@ -1150,7 +1150,7 @@ export default GroupMembersDemo; - + ```css lines .group-member-subtitle { overflow: hidden; @@ -1205,7 +1205,7 @@ const customLeadingView = (member: CometChat.GroupMember): JSX.Element => { - + ```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 { @@ -1328,7 +1328,7 @@ export default GroupMembersDemo; - + ```css lines .group-member-scope-tag { display: flex; @@ -1391,7 +1391,7 @@ const getHeaderView = () => { - + ```css lines .cometchat-group-members__header { display: flex; @@ -1493,7 +1493,7 @@ export default GroupMembersDemo; - + ```css lines .cometchat-group-members .cometchat-menu-list__main-menu-item-icon { height: 24px; From 4e29a178d3e99e7bf61e25100b4b59dfae657406 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Thu, 19 Feb 2026 16:48:37 +0530 Subject: [PATCH 41/59] Update group-members.mdx --- ui-kit/react/group-members.mdx | 119 +++++++++++++++++---------------- 1 file changed, 61 insertions(+), 58 deletions(-) diff --git a/ui-kit/react/group-members.mdx b/ui-kit/react/group-members.mdx index 5a28bb850..999653e30 100644 --- a/ui-kit/react/group-members.mdx +++ b/ui-kit/react/group-members.mdx @@ -1209,43 +1209,43 @@ const customLeadingView = (member: CometChat.GroupMember): JSX.Element => { ```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; + 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; + 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; + position: relative; } .group-member__leading-view-participant .group-member__leading-view-scope { - display: none; + display: none; } .group-member__leading-view-owner .group-member__leading-view-scope { - background: #0B7BEA; + background: #0B7BEA; } .group-member__leading-view-admin .group-member__leading-view-scope { - background: #FFAB00; + background: #FFAB00; } .group-member__leading-view-moderator .group-member__leading-view-scope { - background: #09C26F; + background: #09C26F; } ``` @@ -1331,17 +1331,17 @@ export default GroupMembersDemo; ```css lines .group-member-scope-tag { - display: flex; - padding: 4px 12px; - justify-content: center; - align-items: center; - gap: 20px; - border-radius: 1000px; - background: #edeafa; - overflow: hidden; - color: #6852d6; - text-overflow: ellipsis; - font: 400 12px Roboto; + display: flex; + padding: 4px 12px; + justify-content: center; + align-items: center; + gap: 20px; + border-radius: 1000px; + background: #edeafa; + overflow: hidden; + color: #6852d6; + text-overflow: ellipsis; + font: 400 12px Roboto; } ``` @@ -1394,33 +1394,36 @@ const getHeaderView = () => { ```css lines .cometchat-group-members__header { - display: flex; - width: 100%; - padding: 8px 16px; - align-items: center; - justify-content: space-between; - gap: 12px; - flex: 1 0 0; - align-self: stretch; - border-radius: 10px; - border: 1px solid #E8E8E8; - background: #EDEAFA; + display: flex; + width: 100%; + padding: 8px 16px; + align-items: center; + justify-content: space-between; + gap: 12px; + flex: 1 0 0; + align-self: stretch; + border-radius: 10px; + border: 1px solid #E8E8E8; + background: #EDEAFA; } + .cometchat-group-members__header__title { - overflow: hidden; - color: #141414; - text-overflow: ellipsis; - font: 700 24px Roboto; + overflow: hidden; + color: #141414; + text-overflow: ellipsis; + font: 700 24px Roboto; } + .cometchat-group-members__header .cometchat-button .cometchat-button__icon { - background: #6852D6; + background: #6852D6; } -.cometchat-group-members__header .cometchat-button{ - width: 24px; - border: none; - background: transparent; - border-radius: 0; - display: block; + +.cometchat-group-members__header .cometchat-button { + width: 24px; + border: none; + background: transparent; + border-radius: 0; + display: block; } ``` @@ -1496,16 +1499,16 @@ export default GroupMembersDemo; ```css lines .cometchat-group-members .cometchat-menu-list__main-menu-item-icon { - height: 24px; - width: 24px; - -webkit-mask: url("./assets/delete.svg") center center no-repeat; - background: #f44649; + height: 24px; + width: 24px; + -webkit-mask: url("./assets/delete.svg") center center no-repeat; + background: #f44649; } .cometchat-group-members .cometchat-menu-list__menu, .cometchat-group-members .cometchat-menu-list__main-menu-item { - background: transparent; - box-shadow: none; + background: transparent; + box-shadow: none; } ``` From 64af67d179e8dcd1ea78c1bfd1d329a097fe5ddd Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Thu, 19 Feb 2026 16:53:16 +0530 Subject: [PATCH 42/59] Update message-header.mdx --- ui-kit/react/message-header.mdx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/ui-kit/react/message-header.mdx b/ui-kit/react/message-header.mdx index d4855cccb..d48fcffb5 100644 --- a/ui-kit/react/message-header.mdx +++ b/ui-kit/react/message-header.mdx @@ -57,7 +57,7 @@ The `MessageHeader` is comprised of the following components: -```tsx +```tsx lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageHeader } from "@cometchat/chat-uikit-react"; @@ -79,7 +79,7 @@ export function MessageHeaderDemo() { -```jsx +```jsx lines import React, { useState, useEffect } from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageHeader } from "@cometchat/chat-uikit-react"; @@ -106,7 +106,7 @@ export function MessageHeaderDemo() { [Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -#### 1. OnBack +### 1. OnBack `OnBack` is triggered when you click on the back button of the Message Header component. You can override this action using the following code snippet. @@ -116,7 +116,7 @@ In this example, we are employing the `onBack` action. -```tsx +```tsx lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageHeader } from "@cometchat/chat-uikit-react"; @@ -149,7 +149,7 @@ export function MessageHeaderDemo() { *** -#### 2. OnError +### 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. @@ -159,7 +159,7 @@ In this example, we are employing the `onError` action. -```tsx +```tsx lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageHeader } from "@cometchat/chat-uikit-react"; @@ -191,13 +191,13 @@ export function MessageHeaderDemo() { *** -##### 3. onSearchOptionClicked +#### 3. onSearchOptionClicked The `onSearchOptionClicked` event is triggered when the user clicks the search option. It does not have a default behavior. However, you can override its behavior using the following code snippet. -```tsx +```tsx lines import { CometChatMessageHeader } from "@cometchat/chat-uikit-react"; const handleSearchClick = () => { @@ -213,7 +213,7 @@ const handleSearchClick = () => { *** -#### 4. OnItemClick +### 4. OnItemClick `OnItemClick` is triggered when you click on a ListItem of the `CometChatMessageHeader` component. The `OnItemClick` action doesn't have a predefined behavior. You can override this action using the following code snippet. From 493e40a077f4c62463a08365171bde30b5f86248 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Thu, 19 Feb 2026 16:54:46 +0530 Subject: [PATCH 43/59] Update message-header.mdx --- ui-kit/react/message-header.mdx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/ui-kit/react/message-header.mdx b/ui-kit/react/message-header.mdx index d48fcffb5..faacc8f74 100644 --- a/ui-kit/react/message-header.mdx +++ b/ui-kit/react/message-header.mdx @@ -338,7 +338,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { @@ -368,7 +368,7 @@ const CustomItemView = ( -```css +```css lines .cometchat-message-header .cometchat-list-item .cometchat-avatar { border-radius: 8px; } @@ -392,7 +392,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageHeader } from "@cometchat/chat-uikit-react"; @@ -458,7 +458,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageHeader } from "@cometchat/chat-uikit-react"; @@ -489,7 +489,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { @@ -565,7 +565,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { @@ -631,7 +631,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { @@ -689,7 +689,7 @@ The `lastActiveAtDateTimeFormat` property allows you to customize the **last act Default Date Time Format: -```ruby +```ruby lines 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" @@ -706,7 +706,7 @@ The following example demonstrates how to modify the **last active** timestamp f -```ts +```ts lines import { CometChatMessageHeader, CalendarObject, From 86e9f42f6db913ccd3a02b92cc9bcc446ff4a7f5 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Thu, 19 Feb 2026 16:55:14 +0530 Subject: [PATCH 44/59] Update message-header.mdx --- ui-kit/react/message-header.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui-kit/react/message-header.mdx b/ui-kit/react/message-header.mdx index faacc8f74..f7ebdcd30 100644 --- a/ui-kit/react/message-header.mdx +++ b/ui-kit/react/message-header.mdx @@ -191,7 +191,7 @@ export function MessageHeaderDemo() { *** -#### 3. onSearchOptionClicked +### 3. onSearchOptionClicked The `onSearchOptionClicked` event is triggered when the user clicks the search option. It does not have a default behavior. However, you can override its behavior using the following code snippet. From a64e88765268a8c10903e8121c403982e51072c3 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Thu, 19 Feb 2026 16:56:03 +0530 Subject: [PATCH 45/59] Update message-header.mdx --- ui-kit/react/message-header.mdx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/ui-kit/react/message-header.mdx b/ui-kit/react/message-header.mdx index f7ebdcd30..126dc904c 100644 --- a/ui-kit/react/message-header.mdx +++ b/ui-kit/react/message-header.mdx @@ -274,7 +274,7 @@ import { CometChatMessageHeader } from "@cometchat/chat-uikit-react"; - + ```css .cometchat-message-header .cometchat-list-item .cometchat-avatar { background: #f0999b; @@ -367,7 +367,7 @@ const CustomItemView = ( - + ```css lines .cometchat-message-header .cometchat-list-item .cometchat-avatar { border-radius: 8px; @@ -416,7 +416,7 @@ function CustomTitleView() { - + ```css .cometchat-message-header .message-header__title-view { display: flex; @@ -514,7 +514,7 @@ function CustomLeadingView() { - + ```css .cometchat-message-header .cometchat-list-item @@ -595,7 +595,7 @@ function CustomTrailingButtonView() { - + ```css .cometchat-message-header .cometchat-list-item__trailing-view @@ -661,7 +661,7 @@ function CustomAuxiliaryButtonView() { - + ```css .cometchat-message-header .cometchat-message-header__auxiliary-view From 51578f5aa992edba427a5dbe09e13ef91507cd62 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Thu, 19 Feb 2026 17:01:01 +0530 Subject: [PATCH 46/59] Update message-header.mdx --- ui-kit/react/message-header.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/ui-kit/react/message-header.mdx b/ui-kit/react/message-header.mdx index 126dc904c..f1caf7352 100644 --- a/ui-kit/react/message-header.mdx +++ b/ui-kit/react/message-header.mdx @@ -219,7 +219,7 @@ const handleSearchClick = () => { -```tsx +```tsx lines import { MessageHeaderDemo } from "@cometchat/chat-uikit-react"; const getOnItemClick = () => { @@ -263,7 +263,7 @@ To customize the appearance, you can customise css of `CometChatMessageHeader` -```ts +```ts lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageHeader } from "@cometchat/chat-uikit-react"; @@ -297,7 +297,7 @@ Here is a code snippet demonstrating how you can customize the functionality of -```ts +```ts lines import { CometChatMessageHeader } from "@cometchat/chat-uikit-react"; ; From 8cb2e0e94f5b19764e457525fd8acdc2c49964d7 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Thu, 19 Feb 2026 17:04:56 +0530 Subject: [PATCH 47/59] Update message-header.mdx --- ui-kit/react/message-header.mdx | 104 ++++++++++++++------------------ 1 file changed, 44 insertions(+), 60 deletions(-) diff --git a/ui-kit/react/message-header.mdx b/ui-kit/react/message-header.mdx index f1caf7352..9fc924274 100644 --- a/ui-kit/react/message-header.mdx +++ b/ui-kit/react/message-header.mdx @@ -419,24 +419,21 @@ function CustomTitleView() { ```css .cometchat-message-header .message-header__title-view { - display: flex; - gap: 4px; - width: 100%; + display: flex; + gap: 4px; + width: 100%; } -.cometchat-message-header - .message-header__title-view - .message-header__title-view-name { - color: #141414; - font: 500 16px/19.2px Roboto; - text-align: left; +.cometchat-message-header .message-header__title-view .message-header__title-view-name { + color: #141414; + font: 500 16px/19.2px Roboto; + text-align: left; } -.cometchat-message-header - .message-header__title-view - .message-header__title-view-status { - color: #6852d6; - font: 400 16px/19.2px Roboto; - text-align: left; + +.cometchat-message-header .message-header__title-view .message-header__title-view-status { + color: #6852d6; + font: 400 16px/19.2px Roboto; + text-align: left; } ``` @@ -516,34 +513,29 @@ 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 { - border-radius: 8px; - height: 48px; - width: 48px; +.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; } .message-header__leading-view-role { - display: flex; - width: 48px; - height: 15px; - padding: 1px 3px; - justify-content: center; - align-items: center; - color: #fff; - font: 600 8px/9.6px Roboto; - background: #0b7bea; - position: absolute; - bottom: -2px; + display: flex; + width: 48px; + height: 15px; + padding: 1px 3px; + justify-content: center; + align-items: center; + color: #fff; + font: 600 8px/9.6px Roboto; + background: #0b7bea; + position: absolute; + bottom: -2px; } + .message-header__leading-view { - position: relative; + position: relative; } ``` @@ -597,19 +589,15 @@ function CustomTrailingButtonView() { ```css -.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 { + background: transparent; + height: 24px; + width: 24px; + padding: 0; } -.cometchat-message-header - .cometchat-list-item__trailing-view - .cometchat-button__icon { - background: black; +.cometchat-message-header .cometchat-list-item__trailing-view .cometchat-button__icon { + background: black; } ``` @@ -663,19 +651,15 @@ function CustomAuxiliaryButtonView() { ```css -.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 { + background: transparent; + height: 24px; + width: 24px; + padding: 0; } -.cometchat-message-header - .cometchat-message-header__auxiliary-view - .cometchat-button__icon { - background: black; +.cometchat-message-header .cometchat-message-header__auxiliary-view .cometchat-button__icon { + background: black; } ``` From 9e2423232cfee533e0d38229308159ed8d978d73 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Thu, 19 Feb 2026 17:06:13 +0530 Subject: [PATCH 48/59] Update message-header.mdx --- ui-kit/react/message-header.mdx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/ui-kit/react/message-header.mdx b/ui-kit/react/message-header.mdx index 9fc924274..c22ce50ad 100644 --- a/ui-kit/react/message-header.mdx +++ b/ui-kit/react/message-header.mdx @@ -275,7 +275,7 @@ import { CometChatMessageHeader } from "@cometchat/chat-uikit-react"; -```css +```css lines .cometchat-message-header .cometchat-list-item .cometchat-avatar { background: #f0999b; border-radius: 8px; @@ -417,7 +417,7 @@ function CustomTitleView() { -```css +```css lines .cometchat-message-header .message-header__title-view { display: flex; gap: 4px; @@ -512,7 +512,7 @@ function CustomLeadingView() { -```css +```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; @@ -588,7 +588,7 @@ function CustomTrailingButtonView() { -```css +```css lines .cometchat-message-header .cometchat-list-item__trailing-view .cometchat-button { background: transparent; height: 24px; @@ -650,7 +650,7 @@ function CustomAuxiliaryButtonView() { -```css +```css lines .cometchat-message-header .cometchat-message-header__auxiliary-view .cometchat-button { background: transparent; height: 24px; From a040c8aa63fb595d92abd2ade292095de6bf2648 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Thu, 19 Feb 2026 17:11:10 +0530 Subject: [PATCH 49/59] Update message-list.mdx --- ui-kit/react/message-list.mdx | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/ui-kit/react/message-list.mdx b/ui-kit/react/message-list.mdx index b2d2782bb..ecbb5e0bf 100644 --- a/ui-kit/react/message-list.mdx +++ b/ui-kit/react/message-list.mdx @@ -54,7 +54,7 @@ The following code snippet illustrates how you can directly incorporate the Mess -```tsx +```tsx lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageList } from "@cometchat/chat-uikit-react"; @@ -78,7 +78,7 @@ export function MessageListDemo() { -```jsx +```jsx lines import React, { useState, useEffect } from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageList } from "@cometchat/chat-uikit-react"; @@ -115,13 +115,13 @@ To fetch messages for a specific entity, you need to supplement it with `User` o [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. onThreadRepliesClick +#### 1. onThreadRepliesClick `onThreadRepliesClick` is triggered when you click on the threaded message bubble. The `onThreadRepliesClick` action doesn't have a predefined behavior. You can override this action using the following code snippet. -```ts +```ts lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageList } from "@cometchat/chat-uikit-react"; @@ -152,7 +152,7 @@ export function MessageListDemo() { -```js +```js lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageList } from "@cometchat/chat-uikit-react"; @@ -185,7 +185,7 @@ export function MessageListDemo() { -##### 2. onError +#### 2. onError This action doesn't change the behavior of the component but rather listens for any errors that occur in the MessageList component. @@ -249,7 +249,7 @@ export function MessageListDemo() { -##### 3. onReactionClick +#### 3. onReactionClick `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. @@ -316,7 +316,7 @@ export function MessageListDemo() { -##### 4. onReactionListItemClick +#### 4. onReactionListItemClick `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. @@ -391,7 +391,7 @@ export function MessageListDemo() { ### Filters -##### 1. Messages Request Builder +#### 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). @@ -468,7 +468,7 @@ The following parameters in messageRequestBuilder will always be altered inside -##### 2. Reactions Request Builder +#### 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. @@ -669,8 +669,8 @@ import { CometChatMessageList } from "@cometchat/chat-uikit-react"; - -```css + +```css lines .cometchat-message-bubble__body .cometchat-text-bubble.cometchat-text-bubble-incoming .cometchat-text-bubble__body-text { @@ -1229,8 +1229,8 @@ export function MessageListDemo() { - -```css + +```css lines .header-view { display: flex; width: 100%; @@ -1364,8 +1364,8 @@ export function MessageListDemo() { - -```css + +```css lines .footer-view { display: flex; width: 100%; From 8023cd38c0dc8492dd949099e65fb9d89320883e Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Thu, 19 Feb 2026 17:13:25 +0530 Subject: [PATCH 50/59] Update message-header.mdx --- ui-kit/react/message-header.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/ui-kit/react/message-header.mdx b/ui-kit/react/message-header.mdx index c22ce50ad..631ba1311 100644 --- a/ui-kit/react/message-header.mdx +++ b/ui-kit/react/message-header.mdx @@ -106,7 +106,7 @@ export function MessageHeaderDemo() { [Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -### 1. OnBack +#### 1. OnBack `OnBack` is triggered when you click on the back button of the Message Header component. You can override this action using the following code snippet. @@ -149,7 +149,7 @@ export function MessageHeaderDemo() { *** -### 2. OnError +#### 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. @@ -191,7 +191,7 @@ export function MessageHeaderDemo() { *** -### 3. onSearchOptionClicked +#### 3. onSearchOptionClicked The `onSearchOptionClicked` event is triggered when the user clicks the search option. It does not have a default behavior. However, you can override its behavior using the following code snippet. @@ -213,7 +213,7 @@ const handleSearchClick = () => { *** -### 4. OnItemClick +#### 4. OnItemClick `OnItemClick` is triggered when you click on a ListItem of the `CometChatMessageHeader` component. The `OnItemClick` action doesn't have a predefined behavior. You can override this action using the following code snippet. From af6d8d15402aa017b35362432147396eb3637abe Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Thu, 19 Feb 2026 17:16:39 +0530 Subject: [PATCH 51/59] Update message-list.mdx --- ui-kit/react/message-list.mdx | 68 +++++++++++++++++------------------ 1 file changed, 34 insertions(+), 34 deletions(-) diff --git a/ui-kit/react/message-list.mdx b/ui-kit/react/message-list.mdx index ecbb5e0bf..3d706890d 100644 --- a/ui-kit/react/message-list.mdx +++ b/ui-kit/react/message-list.mdx @@ -191,7 +191,7 @@ This action doesn't change the behavior of the component but rather listens for -```ts +```ts lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageList } from "@cometchat/chat-uikit-react"; @@ -219,7 +219,7 @@ export function MessageListDemo() { -```js +```js lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageList } from "@cometchat/chat-uikit-react"; @@ -255,7 +255,7 @@ export function MessageListDemo() { -```ts +```ts lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageList } from "@cometchat/chat-uikit-react"; @@ -286,7 +286,7 @@ export function MessageListDemo() { -```js +```js lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageList } from "@cometchat/chat-uikit-react"; @@ -322,7 +322,7 @@ export function MessageListDemo() { -```ts +```ts lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageList } from "@cometchat/chat-uikit-react"; @@ -356,7 +356,7 @@ export function MessageListDemo() { -```js +```js lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageList } from "@cometchat/chat-uikit-react"; @@ -399,7 +399,7 @@ In the example below, we are applying a filter to the messages based on a search -```ts +```ts lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageList } from "@cometchat/chat-uikit-react"; @@ -428,7 +428,7 @@ export function MessageListDemo() { -```js +```js lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageList } from "@cometchat/chat-uikit-react"; @@ -474,7 +474,7 @@ You can adjust the `ReactionsRequestBuilder` in the MessageList Component to cus -```ts +```ts lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageList } from "@cometchat/chat-uikit-react"; @@ -503,7 +503,7 @@ export function MessageListDemo() { -```js +```js lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageList } from "@cometchat/chat-uikit-react"; @@ -553,7 +553,7 @@ Adding `CometChatMessageEvents` Listener's -```ts +```ts lines import { CometChatMessageEvents, CometChatUIEvents } from "@cometchat/chat-uikit-react"; const ccOpenChat = CometChatUIEvents.ccOpenChat.subscribe(() => { @@ -584,7 +584,7 @@ const ccMessageRead = CometChatMessageEvents.ccMessageRead.subscribe(() => { -```js +```js lines import { CometChatMessageEvents, CometChatUIEvents } from "@cometchat/chat-uikit-react"; const ccOpenChat = CometChatUIEvents.ccOpenChat.subscribe(() => { @@ -622,7 +622,7 @@ Removing `CometChatMessageEvents` Listener's -```ts +```ts lines ccMessageEdited?.unsubscribe(); ccReplyToMessage?.unsubscribe(); ccActiveChatChanged?.unsubscribe(); @@ -631,7 +631,7 @@ ccActiveChatChanged?.unsubscribe(); -```js +```js lines ccMessageEdited?.unsubscribe(); ccReplyToMessage?.unsubscribe(); ccActiveChatChanged?.unsubscribe(); @@ -659,7 +659,7 @@ You can set the css to the MessageList Component Component to customize the styl -```ts +```ts lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageList } from "@cometchat/chat-uikit-react"; @@ -688,7 +688,7 @@ These are a set of small functional customizations that allow you to fine-tune t -```ts +```ts lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageList } from "@cometchat/chat-uikit-react"; @@ -716,7 +716,7 @@ export function MessageListDemo() { -```js +```js lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageList } from "@cometchat/chat-uikit-react"; @@ -803,7 +803,7 @@ You can set message Templates to MessageList by using the following code snippet -```ts +```ts lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { @@ -864,7 +864,7 @@ export function MessageListDemo() { -```js +```js lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { @@ -927,7 +927,7 @@ The `separatorDateTimeFormat` property allows you to customize the **Date Separa Default Date Time Format: -```javascript +```javascript lines new CalendarObject({ today: "today" // Example: "today" yesterday: "yesterday", // Example: "yesterday" @@ -939,7 +939,7 @@ The following example demonstrates how to modify the **Date Separator** timestam -```ts +```ts lines import { CometChatMessageList, CalendarObject, @@ -984,7 +984,7 @@ The `stickyDateTimeFormat` property allows you to customize the **Sticky Date** Default Date Time Format: -```javascript +```javascript lines new CalendarObject({ today: "today" // Example: "today" yesterday: "yesterday", // Example: "yesterday" @@ -996,7 +996,7 @@ The following example demonstrates how to modify the **Sticky Date** timestamp f -```ts +```ts lines import { CometChatMessageList, CalendarObject, @@ -1036,7 +1036,7 @@ The `messageSentAtDateTimeFormat` property allows you to customize the **Message Default Date Time Format: -```javascript +```javascript lines new CalendarObject({ today: "hh:mm A" // Example: "12:00 PM" yesterday: "hh:mm A", // Example: "01:00 AM" @@ -1048,7 +1048,7 @@ The following example demonstrates how to modify the **Message SentAt** timestam -```ts +```ts lines import { CometChatMessageList, CalendarObject, @@ -1091,7 +1091,7 @@ The `messageInfoDateTimeFormat` property allows you to customize the **Message I Default Date Time Format: -```ruby +```ruby lines 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" @@ -1103,7 +1103,7 @@ The following example demonstrates how to modify the **Message Info** timestamp -```ts +```ts lines import { CometChatMessageList, CalendarObject, @@ -1154,7 +1154,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageList } from "@cometchat/chat-uikit-react"; @@ -1192,7 +1192,7 @@ export function MessageListDemo() { -```js +```js lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageList } from "@cometchat/chat-uikit-react"; @@ -1285,7 +1285,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageList } from "@cometchat/chat-uikit-react"; @@ -1325,7 +1325,7 @@ export function MessageListDemo() { -```js +```js lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageList } from "@cometchat/chat-uikit-react"; @@ -1412,7 +1412,7 @@ Assigns the list of text formatters. If the provided list is not null, it sets t -```ts +```ts lines import { CometChatTextFormatter } from "@cometchat/chat-uikit-react"; import DialogHelper from "./Dialog"; import { CometChat } from "@cometchat/chat-sdk-javascript"; @@ -1526,7 +1526,7 @@ export default ShortcutFormatter; -```tsx +```tsx lines import React from "react"; import ReactDOM from "react-dom"; @@ -1594,7 +1594,7 @@ export default class DialogHelper { -```tsx +```tsx lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageList } from "@cometchat/chat-uikit-react"; From e6909826a28f97375c758ee8e856200bbc55eb91 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Thu, 19 Feb 2026 17:47:55 +0530 Subject: [PATCH 52/59] adds line numbers --- ui-kit/react/ai-assistant-chat.mdx | 54 +++++++-------- ui-kit/react/astro-conversation.mdx | 8 +-- ui-kit/react/astro-integration.mdx | 12 ++-- ui-kit/react/astro-one-to-one-chat.mdx | 6 +- ui-kit/react/astro-tab-based-chat.mdx | 6 +- ui-kit/react/call-buttons.mdx | 22 +++---- ui-kit/react/call-logs.mdx | 66 +++++++++---------- ui-kit/react/conversations.mdx | 4 +- ui-kit/react/custom-text-formatter-guide.mdx | 14 ++-- ui-kit/react/guide-overview.mdx | 2 +- ui-kit/react/incoming-call.mdx | 62 ++++++++--------- ui-kit/react/link/changelog.mdx | 2 +- ui-kit/react/link/figma.mdx | 2 +- ui-kit/react/link/sample.mdx | 2 +- ui-kit/react/message-composer.mdx | 44 ++++++------- ui-kit/react/message-template.mdx | 60 ++++++++--------- ui-kit/react/methods.mdx | 38 +++++------ ui-kit/react/next-conversation.mdx | 6 +- ui-kit/react/next-one-to-one-chat.mdx | 6 +- ui-kit/react/next-tab-based-chat.mdx | 6 +- ui-kit/react/outgoing-call.mdx | 46 ++++++------- ui-kit/react/react-conversation.mdx | 4 +- ui-kit/react/react-js-integration.mdx | 4 +- ui-kit/react/react-one-to-one-chat.mdx | 4 +- ui-kit/react/react-router-conversation.mdx | 6 +- ui-kit/react/react-router-one-to-one-chat.mdx | 6 +- ui-kit/react/react-router-tab-based-chat.mdx | 6 +- ui-kit/react/react-tab-based-chat.mdx | 4 +- ui-kit/react/search.mdx | 58 ++++++++-------- ui-kit/react/shortcut-formatter-guide.mdx | 6 +- ui-kit/react/sound-manager.mdx | 4 +- ui-kit/react/theme.mdx | 14 ++-- ui-kit/react/theme/message-bubble-styling.mdx | 28 ++++---- ui-kit/react/thread-header.mdx | 16 ++--- ui-kit/react/url-formatter-guide.mdx | 2 +- ui-kit/react/users.mdx | 8 +-- 36 files changed, 319 insertions(+), 319 deletions(-) diff --git a/ui-kit/react/ai-assistant-chat.mdx b/ui-kit/react/ai-assistant-chat.mdx index 951e24772..1f942c2af 100644 --- a/ui-kit/react/ai-assistant-chat.mdx +++ b/ui-kit/react/ai-assistant-chat.mdx @@ -56,7 +56,7 @@ React.useEffect(() => { -```tsx +```tsx lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react"; @@ -82,7 +82,7 @@ export function AIAssistantChatDemo() { -```jsx +```jsx lines import React, { useState, useEffect } from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react"; @@ -125,7 +125,7 @@ Called when the header back button is clicked (visible when `showBackButton` is -```tsx +```tsx lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react"; @@ -157,7 +157,7 @@ export function AIAssistantChatDemo() { -```jsx +```jsx lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react"; @@ -194,7 +194,7 @@ Called when the header close button is clicked (visible when `showCloseButton` i -```tsx +```tsx lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react"; @@ -225,7 +225,7 @@ export function AIAssistantChatDemo() { -```jsx +```jsx lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react"; @@ -262,7 +262,7 @@ Called when the composer send button is clicked. -```tsx +```tsx lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react"; @@ -292,7 +292,7 @@ export function AIAssistantChatDemo() { -```jsx +```jsx lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react"; @@ -328,7 +328,7 @@ Listen to errors from the underlying header, list, or composer. -```tsx +```tsx lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react"; @@ -356,7 +356,7 @@ export function AIAssistantChatDemo() { -```jsx +```jsx lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react"; @@ -402,7 +402,7 @@ You can set the css of the Assistant Chat Component to customize the styling. -```tsx +```tsx lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react"; @@ -427,7 +427,7 @@ export function AIAssistantChatDemo = () => { -```jsx +```jsx lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react"; @@ -452,7 +452,7 @@ export function AIAssistantChatDemo = () => { -```css +```css lines .cometchat-ai-assistant-chat .cometchat-ai-assistant-chat__suggested-message-pill { background: #30a46c; @@ -489,7 +489,7 @@ These props tailor the experience. Most message options (copy/edit/delete/react, -```tsx +```tsx lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react"; @@ -519,7 +519,7 @@ export function AIAssistantChatDemo = () => { -```jsx +```jsx lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react"; @@ -591,7 +591,7 @@ Pass an instance of `CometChatAIAssistantTools` to enable tool/function calls du -```tsx +```tsx lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react"; @@ -625,7 +625,7 @@ export function AIAssistantChatDemo = () => { -```jsx +```jsx lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react"; @@ -670,7 +670,7 @@ Provide a custom image for the empty state using `emptyChatImageView`. -```tsx +```tsx lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react"; @@ -696,7 +696,7 @@ export function AIAssistantChatDemo() { -```jsx +```jsx lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react"; @@ -732,7 +732,7 @@ Override the empty state greeting message view using the `emptyChatGreetingView` -```tsx +```tsx lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react"; @@ -763,7 +763,7 @@ export function AIAssistantChatDemo() { -```jsx +```jsx lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react"; @@ -794,7 +794,7 @@ export function AIAssistantChatDemo() { -```css +```css lines .cometchat-ai-assistant-chat__empty-chat-greeting { display: flex; padding: 8px 20px; @@ -827,7 +827,7 @@ You can override the empty chat intro message view using the `emptyChatIntroMess -```tsx +```tsx lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react"; @@ -857,7 +857,7 @@ export function AIAssistantChatDemo() { -```jsx +```jsx lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react"; @@ -887,7 +887,7 @@ export function AIAssistantChatDemo() { -```css +```css lines .cometchat-ai-assistant-chat__empty-chat-intro { display: flex; padding: 12px; @@ -918,7 +918,7 @@ You can set message Templates to AIAssistantChat by using the following code sni -```ts +```ts lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { @@ -953,7 +953,7 @@ export function AIAssistantChatDemo() { -```js +```js lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { diff --git a/ui-kit/react/astro-conversation.mdx b/ui-kit/react/astro-conversation.mdx index e3ce5f248..3263996e4 100644 --- a/ui-kit/react/astro-conversation.mdx +++ b/ui-kit/react/astro-conversation.mdx @@ -43,7 +43,7 @@ This layout includes: - ```bash + ```bash lines npm create astro@latest cd my-astro-app npm install @@ -253,19 +253,19 @@ This layout includes: - ```bash + ```bash lines npm run dev ``` - ```bash + ```bash lines pnpm dev ``` - ```bash + ```bash lines yarn dev ``` diff --git a/ui-kit/react/astro-integration.mdx b/ui-kit/react/astro-integration.mdx index ef167142c..7af0b1bf3 100644 --- a/ui-kit/react/astro-integration.mdx +++ b/ui-kit/react/astro-integration.mdx @@ -118,21 +118,21 @@ The Astro integration relies on the following technologies: - ```bash + ```bash lines npm create astro@latest cd npm install ``` - ```bash + ```bash lines pnpm create astro@latest my-astro-app --template basics cd pnpm install ``` - ```bash + ```bash lines yarn create astro my-astro-app --template basics cd yarn @@ -155,16 +155,16 @@ Choose one of the following: - ```bash + ```bash lines npm i @cometchat/chat-uikit-react ``` - ```bash + ```bash lines npx astro add react ``` After installing, ensure the React integration exists in `astro.config.mjs`: - ```js + ```js lines import { defineConfig } from 'astro/config' import react from '@astrojs/react' diff --git a/ui-kit/react/astro-one-to-one-chat.mdx b/ui-kit/react/astro-one-to-one-chat.mdx index fce48462b..1beb30dc9 100644 --- a/ui-kit/react/astro-one-to-one-chat.mdx +++ b/ui-kit/react/astro-one-to-one-chat.mdx @@ -225,19 +225,19 @@ The One‑to‑One/Group chat layout focuses on a single conversation, ideal for - ```bash + ```bash lines npm run dev ``` - ```bash + ```bash lines pnpm dev ``` - ```bash + ```bash lines yarn dev ``` diff --git a/ui-kit/react/astro-tab-based-chat.mdx b/ui-kit/react/astro-tab-based-chat.mdx index 663e1b0f3..cf5de2ef3 100644 --- a/ui-kit/react/astro-tab-based-chat.mdx +++ b/ui-kit/react/astro-tab-based-chat.mdx @@ -339,19 +339,19 @@ Layout structure: - ```bash + ```bash lines npm run dev ``` - ```bash + ```bash lines pnpm dev ``` - ```bash + ```bash lines yarn dev ``` diff --git a/ui-kit/react/call-buttons.mdx b/ui-kit/react/call-buttons.mdx index fae88eaa4..56a352a18 100644 --- a/ui-kit/react/call-buttons.mdx +++ b/ui-kit/react/call-buttons.mdx @@ -57,7 +57,7 @@ The `Call Button` is a Component provides users with the ability to make calls, -```tsx +```tsx lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatCallButtons } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -78,7 +78,7 @@ export default CallButtonDemo; -```jsx +```jsx lines import React, { useState, useEffect } from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatCallButtons } from "@cometchat/chat-uikit-react"; @@ -108,7 +108,7 @@ This action doesn't change the behavior of the component but rather listens for -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatCallButtons } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -134,7 +134,7 @@ export default CallButtonDemo; -```js +```js lines import React, { useState, useEffect } from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatCallButtons } from "@cometchat/chat-uikit-react"; @@ -170,7 +170,7 @@ You can set `CallSettingsBuilder` in the Call Buttons Component to customise the -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatCallButtons } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -208,7 +208,7 @@ export default CallButtonDemo; -```js +```js lines import React, { useState, useEffect } from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatCallButtons } from "@cometchat/chat-uikit-react"; @@ -266,7 +266,7 @@ The list of events emitted by the `Call Buttons` component is as follows. -```tsx +```tsx lines const ccCallRejected = CometChatCallEvents.ccCallRejected.subscribe( (call: CometChat.Call) => { //Your Code @@ -298,7 +298,7 @@ const ccMessageSent = CometChatMessageEvents.ccMessageSent.subscribe(() => { -```tsx +```tsx lines ccCallRejected?.unsubscribe(); ccCallEnded?.unsubscribe(); @@ -330,7 +330,7 @@ Using CSS you can customize the look and feel of the component in your app like -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatCallButtons } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -352,7 +352,7 @@ export default CallButtonDemo; -```js +```js lines import React, { useState, useEffect } from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatCallButtons } from "@cometchat/chat-uikit-react"; @@ -375,7 +375,7 @@ export default CallButtonDemo; -```css +```css lines .cometchat-call-button { display: flex; width: 183px; diff --git a/ui-kit/react/call-logs.mdx b/ui-kit/react/call-logs.mdx index 4856aa76a..655d5b5e7 100644 --- a/ui-kit/react/call-logs.mdx +++ b/ui-kit/react/call-logs.mdx @@ -62,7 +62,7 @@ The `Call Logs` is comprised of the following components: -```tsx +```tsx lines import { CometChatCallLogs } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -76,7 +76,7 @@ export default CallLogDemo; -```jsx +```jsx lines import { CometChatCallLogs } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -100,7 +100,7 @@ export default CallLogDemo; -```ts +```ts lines import { CometChatCallLogs } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -117,7 +117,7 @@ export default CallLogDemo; -```js +```js lines import { CometChatCallLogs } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -141,7 +141,7 @@ export default CallLogDemo; -```ts +```ts lines import { CometChatCallLogs } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -158,7 +158,7 @@ export default CallLogDemo; -```js +```js lines import { CometChatCallLogs } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -182,7 +182,7 @@ This is a callback function which is triggered when the component encounters an -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatCallLogs } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -200,7 +200,7 @@ export default CallLogDemo; -```js +```js lines import { CometChatCallLogs } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -246,7 +246,7 @@ In the example below, we're filtering Call Logs to show only canceled calls and -```ts +```ts lines import { CallLogRequestBuilder } from "@cometchat/calls-sdk-javascript"; import { CometChatCallLogs } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -268,7 +268,7 @@ export default CallLogDemo; -```js +```js lines import { CallLogRequestBuilder } from "@cometchat/calls-sdk-javascript"; import { CometChatCallLogs } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -307,7 +307,7 @@ The list of events emitted by the `Call Logs` component is as follows. -```tsx +```tsx lines const ccMessageSent = CometChatMessageEvents.ccMessageSent.subscribe(() => { //Your Code }); @@ -321,7 +321,7 @@ const ccMessageSent = CometChatMessageEvents.ccMessageSent.subscribe(() => { -```tsx +```tsx lines ccMessageSent?.unsubscribe(); ``` @@ -347,7 +347,7 @@ Using CSS you can customize the look and feel of the component in your app like -```ts +```ts lines import { CometChatCallLogs } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -361,7 +361,7 @@ export default CallLogDemo; -```js +```js lines import { CometChatCallLogs } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -375,7 +375,7 @@ export default CallLogDemo; -```css +```css lines .cometchat .cometchat-call-logs .cometchat-list__header-title { background-color: #fce9ea; color: #f76808; @@ -430,7 +430,7 @@ Here is a code snippet demonstrating how you can customize the functionality of -```ts +```ts lines import { CometChatCallLogs } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -444,7 +444,7 @@ export default CallLogDemo; -```js +```js lines import { CometChatCallLogs } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -500,7 +500,7 @@ The following example demonstrates how to modify the **Call Initiated** timestam -```ts +```ts lines import { CometChatCallLogs, CalendarObject } from "@cometchat/chat-uikit-react"; // Define a custom date format pattern @@ -551,7 +551,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import { CometChatCallLogs, CometChatUIKitLoginListener, @@ -625,7 +625,7 @@ export default CallLogDemo; -```js +```js lines import { CometChatCallLogs, CometChatUIKitLoginListener, isMissedCall, isSentByMe, verifyCallUser } from "@cometchat/chat-uikit-react"; const CallLogDemo = () => { @@ -682,7 +682,7 @@ export default CallLogDemo; -```css +```css lines .cometchat .cometchat-call-logs .cometchat-list-item__trailing-view { width: auto; overflow: hidden; @@ -745,7 +745,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import { CometChatCallLogs, CometChatUIKitLoginListener, @@ -801,7 +801,7 @@ export default CallLogDemo; -```js +```js lines import { CometChatCallLogs,CometChatUIKitLoginListener,isMissedCall,isSentByMe } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -846,7 +846,7 @@ export default CallLogDemo; -```css +```css lines .cometchat-call-logs__list-item-subtitle-text { overflow: hidden; color: #727272; @@ -882,7 +882,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import { CallLog } from "@cometchat/calls-sdk-javascript"; import { CometChatCallLogs } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -922,7 +922,7 @@ export default CallLogDemo; -```js +```js lines import { CometChatCallLogs } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -961,7 +961,7 @@ export default CallLogDemo; -```css +```css lines .cometchat .cometchat-call-logs .cometchat-list-item__trailing-view { width: auto; overflow: hidden; @@ -996,7 +996,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import { CallLog } from "@cometchat/calls-sdk-javascript"; import { CometChatUIKitLoginListener, @@ -1029,7 +1029,7 @@ export default CallLogDemo; -```js +```js lines import { CometChatUIKitLoginListener, CometChatCallLogs, @@ -1061,7 +1061,7 @@ export default CallLogDemo; -```css +```css lines .call-log-avatar { display: flex; width: 48px; @@ -1119,7 +1119,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import { CallLog } from "@cometchat/calls-sdk-javascript"; import { CometChatCallLogs } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -1145,7 +1145,7 @@ export default CallLogDemo; -```js +```js lines import { CometChatCallLogs } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -1170,7 +1170,7 @@ export default CallLogDemo; -```css +```css lines .call-log-title { overflow: hidden; color: #141414; diff --git a/ui-kit/react/conversations.mdx b/ui-kit/react/conversations.mdx index 6f8192fc6..9221014e9 100644 --- a/ui-kit/react/conversations.mdx +++ b/ui-kit/react/conversations.mdx @@ -324,7 +324,7 @@ const ccConversationDeleted = -```tsxtsx +```tsxtsx lines ccConversationDeleted?.unsubscribe(); ``` @@ -348,7 +348,7 @@ Using CSS you can customize the look and feel of the component in your app like -```tsx +```tsx lines ``` diff --git a/ui-kit/react/custom-text-formatter-guide.mdx b/ui-kit/react/custom-text-formatter-guide.mdx index 0be0cb729..689059ced 100644 --- a/ui-kit/react/custom-text-formatter-guide.mdx +++ b/ui-kit/react/custom-text-formatter-guide.mdx @@ -85,7 +85,7 @@ Below is an example demonstrating how to use a custom formatter class in compone -```ts +```ts lines import { CometChatTextFormatter } from "@cometchat/chat-uikit-react"; class HashTagTextFormatter extends CometChatTextFormatter { @@ -239,7 +239,7 @@ export default HashTagTextFormatter; -```tsx +```tsx lines import { HashTagTextFormatter } from "./HashTagTextFormatter"; export default function MessageListDemo() { @@ -300,7 +300,7 @@ Upon calling `reRender`, the composer will invoke the `getFormattedText` functio -```js +```js lines /** * If the input text is provided, it returns the formatted text. Otherwise, it edits the text using the current cursor position. * @param {string|null} inputText - The text to format. @@ -318,7 +318,7 @@ Upon calling `reRender`, the composer will invoke the `getFormattedText` functio -```js +```js lines /** * Handles 'keydown' events. * @param {KeyboardEvent} event - The keyboard event. @@ -337,7 +337,7 @@ onKeyUp(event: KeyboardEvent) { -```js +```js lines /** * Handles 'keydown' events. * @param {KeyboardEvent} event - The keyboard event. @@ -348,7 +348,7 @@ onKeyDown(event: KeyboardEvent) {} -```js +```js lines /** * Composer and Text Bubbles will call this function when rendering the HTML content. * This will be called for each HTML Element present in the formatted string. @@ -419,7 +419,7 @@ registerEventListeners(element: HTMLElement, domTokenList: DOMTokenList) { -```js +```js lines /** * Returns the original unformatted text from the input text. * @param {string|null|undefined} inputText - The input text to get original text from. diff --git a/ui-kit/react/guide-overview.mdx b/ui-kit/react/guide-overview.mdx index 784ebacb4..656949187 100644 --- a/ui-kit/react/guide-overview.mdx +++ b/ui-kit/react/guide-overview.mdx @@ -55,4 +55,4 @@ Need another guide? Open a request via our [Developer Community](http://communit Handle UI Kit events - \ No newline at end of file + diff --git a/ui-kit/react/incoming-call.mdx b/ui-kit/react/incoming-call.mdx index a59295ab3..5b19ceffb 100644 --- a/ui-kit/react/incoming-call.mdx +++ b/ui-kit/react/incoming-call.mdx @@ -62,7 +62,7 @@ The `Incoming Call` is comprised of the following base components: -```tsx +```tsx lines import { CometChatIncomingCall } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -76,7 +76,7 @@ export default IncomingCallsDemo; -```jsx +```jsx lines import { CometChatIncomingCall } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -101,7 +101,7 @@ export default IncomingCallsDemo; -```ts +```ts lines import { CometChatIncomingCall } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -119,7 +119,7 @@ export default IncomingCallsDemo; -```js +```js lines import { CometChatIncomingCall } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -144,7 +144,7 @@ export default IncomingCallsDemo; -```ts +```ts lines import { CometChatIncomingCall } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -162,7 +162,7 @@ export default IncomingCallsDemo; -```js +```js lines import { CometChatIncomingCall } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -187,7 +187,7 @@ This action doesn't change the behavior of the component but rather listens for -```ts +```ts lines import { CometChatIncomingCall } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -205,7 +205,7 @@ export default IncomingCallsDemo; -```js +```js lines import { CometChatIncomingCall } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -232,7 +232,7 @@ You can set `CallSettingsBuilder` in the Incoming Call Component to customise th -```ts +```ts lines import { CometChatIncomingCall } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -256,7 +256,7 @@ export default IncomingCallsDemo; -```js +```js lines import { CometChatIncomingCall } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -295,7 +295,7 @@ The list of events emitted by the Incoming Call component is as follows. -```tsx +```tsx lines const ccCallRejected = CometChatCallEvents.ccCallRejected.subscribe( (call: CometChat.Call) => { //Your Code @@ -323,7 +323,7 @@ const ccCallEnded = CometChatCallEvents.ccCallEnded.subscribe( -```tsx +```tsx lines ccCallRejected?.unsubscribe(); ccCallAccepted?.unsubscribe(); @@ -353,7 +353,7 @@ Using CSS you can customize the look and feel of the component in your app like -```ts +```ts lines import { CometChatIncomingCall } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -367,7 +367,7 @@ export default IncomingCallsDemo; -```js +```js lines import { CometChatIncomingCall } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -381,7 +381,7 @@ export default IncomingCallsDemo; -```css +```css lines .cometchat-incoming-call { display: flex; width: 555px; @@ -504,7 +504,7 @@ Here is a code snippet demonstrating how you can customize the functionality of -```ts +```ts lines import { CometChatIncomingCall } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -522,7 +522,7 @@ export default IncomingCallsDemo; -```js +```js lines import { CometChatIncomingCall } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -563,7 +563,7 @@ Property `subtitleView` is a function that renders a JSX element to display the -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatIncomingCall } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -582,7 +582,7 @@ export default IncomingCallsDemo; -```js +```js lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatIncomingCall } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -616,7 +616,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatAvatar, CometChatIncomingCall } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -639,7 +639,7 @@ export default IncomingCallsDemo; -```js +```js lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatAvatar, CometChatIncomingCall } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -662,7 +662,7 @@ export default IncomingCallsDemo; -```css +```css lines .cometchat-incoming-call__avatar { display: none; } @@ -686,7 +686,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatIncomingCall } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -713,7 +713,7 @@ export default IncomingCallsDemo; -```js +```js lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatIncomingCall } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -740,7 +740,7 @@ export default IncomingCallsDemo; -```css +```css lines .incoming-call__title-wrapper { display: flex; width: 370px; @@ -791,7 +791,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatIncomingCall } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -815,7 +815,7 @@ export default IncomingCallsDemo; -```js +```js lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatIncomingCall } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -839,7 +839,7 @@ export default IncomingCallsDemo; -```css +```css lines .incoming-call__avatar { display: flex; height: 62px; @@ -880,7 +880,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatAvatar, CometChatIncomingCall } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -911,7 +911,7 @@ export default IncomingCallsDemo; -```js +```js lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatAvatar, CometChatIncomingCall } from "@cometchat/chat-uikit-react"; import React from "react"; @@ -942,7 +942,7 @@ export default IncomingCallsDemo; -```css +```css lines .incoming-call__itemview { display: flex; flex-direction: column; diff --git a/ui-kit/react/link/changelog.mdx b/ui-kit/react/link/changelog.mdx index 8c698a26d..e3acadbd7 100644 --- a/ui-kit/react/link/changelog.mdx +++ b/ui-kit/react/link/changelog.mdx @@ -1,4 +1,4 @@ --- title: "Changelog" url: "https://github.com/cometchat/cometchat-uikit-react/releases?q=v6&expanded=true" ---- \ No newline at end of file +--- diff --git a/ui-kit/react/link/figma.mdx b/ui-kit/react/link/figma.mdx index 172dd3788..784cf16e7 100644 --- a/ui-kit/react/link/figma.mdx +++ b/ui-kit/react/link/figma.mdx @@ -1,4 +1,4 @@ --- title: "Figma Design" url: "https://www.figma.com/community/file/1442863561340379957/cometchat-ui-kit-for-web" ---- \ No newline at end of file +--- diff --git a/ui-kit/react/link/sample.mdx b/ui-kit/react/link/sample.mdx index 3f7e45be6..d7748ae0d 100644 --- a/ui-kit/react/link/sample.mdx +++ b/ui-kit/react/link/sample.mdx @@ -1,4 +1,4 @@ --- title: "React Sample App" url: "https://github.com/cometchat/cometchat-uikit-react/tree/v6/sample-app" ---- \ No newline at end of file +--- diff --git a/ui-kit/react/message-composer.mdx b/ui-kit/react/message-composer.mdx index b115ab624..cd39b5b93 100644 --- a/ui-kit/react/message-composer.mdx +++ b/ui-kit/react/message-composer.mdx @@ -54,7 +54,7 @@ The following code snippet illustrates how you can directly incorporate the Mess -```tsx +```tsx lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; @@ -78,7 +78,7 @@ export function MessageComposerDemo() { -```jsx +```jsx lines import React, { useState, useEffect } from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; @@ -113,7 +113,7 @@ The `OnSendButtonClick` event gets activated when the send message button is cli -```tsx +```tsx lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; @@ -142,7 +142,7 @@ export function MessageComposerDemo() { -```jsx +```jsx lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; @@ -178,7 +178,7 @@ This action doesn't change the behavior of the component but rather listens for -```tsx +```tsx lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; @@ -214,7 +214,7 @@ This event is triggered as the user starts typing in the Message Composer. -```tsx +```tsx lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; @@ -253,7 +253,7 @@ You can customize how mentioned users and group members are fetched by providing -```tsx +```tsx lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; @@ -331,7 +331,7 @@ Adding `CometChatMessageEvents` Listener's -```js +```js lines import { CometChatMessageEvents } from "@cometchat/chat-uikit-react"; const ccMessageEdited = CometChatMessageEvents.ccMessageEdited.subscribe(() => { @@ -357,7 +357,7 @@ Removing `CometChatMessageEvents` Listener's -```js +```js lines ccMessageEdited?.unsubscribe(); ccReplyToMessage?.unsubscribe(); ccMessageSent?.unsubscribe(); @@ -385,7 +385,7 @@ To modify the styling, you can customise the css of MessageComposer Component. -```tsx +```tsx lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; @@ -396,7 +396,7 @@ import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; -```css +```css lines .cometchat-message-composer .cometchat-message-composer__input { font-family: "SF Pro"; } @@ -422,7 +422,7 @@ These are a set of small functional customizations that allow you to fine-tune t -```tsx +```tsx lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; @@ -493,7 +493,7 @@ Use the following code to achieve the customization shown above. -```tsx +```tsx lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { @@ -535,7 +535,7 @@ function getAttachments() { -```css +```css lines .cometchat-message-composer__secondary-button-view-attachment-button .cometchat-action-sheet { border: none; @@ -590,7 +590,7 @@ Use the following code to achieve the customization shown above. -```tsx +```tsx lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { @@ -640,7 +640,7 @@ Use the following code to achieve the customization shown above. -```tsx +```tsx lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { @@ -663,7 +663,7 @@ const sendButtonView = ( -```css +```css lines .cometchat-message-composer div:not([class]) .message-composer__send-button @@ -705,7 +705,7 @@ Use the following code to achieve the customization shown above. -```tsx +```tsx lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; @@ -727,7 +727,7 @@ const getHeaderView = () => { -```css +```css lines .cometchat-message-composer .message-composer__header-view { display: flex; align-items: center; @@ -781,7 +781,7 @@ Assigns the list of text formatters. If the provided list is not null, it sets t -```ts +```ts lines import { CometChatTextFormatter } from "@cometchat/chat-uikit-react"; import DialogHelper from "./Dialog"; import { CometChat } from "@cometchat/chat-sdk-javascript"; @@ -895,7 +895,7 @@ export default ShortcutFormatter; -```tsx +```tsx lines import React from "react"; import ReactDOM from "react-dom"; @@ -960,7 +960,7 @@ export default class DialogHelper { -```tsx +```tsx lines import React from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; diff --git a/ui-kit/react/message-template.mdx b/ui-kit/react/message-template.mdx index 56e259208..438758bd5 100644 --- a/ui-kit/react/message-template.mdx +++ b/ui-kit/react/message-template.mdx @@ -128,7 +128,7 @@ You will need to first get the MessageTemplate object for the type of message yo -```ts +```ts lines import { CometChatUIKit, CometChatUIKitConstants, @@ -146,7 +146,7 @@ for (let i = 0; i < allTemplates.length; i++) { -```js +```js lines import { CometChatUIKit, CometChatUIKitConstants, @@ -168,7 +168,7 @@ You will be using [Message List](/ui-kit/react/message-list) component using the -```ts +```ts lines import { CometChatMessageList } from "@cometchat/uikit-react"; ; @@ -177,7 +177,7 @@ import { CometChatMessageList } from "@cometchat/uikit-react"; -```js +```js lines import { CometChatMessageList } from "@cometchat/uikit-react"; ; @@ -197,7 +197,7 @@ The `headerView` method of MessageTemplate allows you to add custom views to the -```ts +```ts lines import React, { useEffect, useState } from "react"; import { CometChatMessageList, @@ -252,7 +252,7 @@ export { CustomMessageTemplate }; -```js +```js lines import React, { useEffect, useState } from "react"; import { CometChatMessageList, @@ -316,7 +316,7 @@ The `contentview` method of MessageTemplate allows you to add a custom view to t -```ts +```ts lines import React from "react"; import { CometChatMessageList, @@ -414,7 +414,7 @@ export { CustomMessageTemplate }; -```js +```js lines import React from "react"; import { CometChatMessageList, @@ -510,7 +510,7 @@ export { CustomMessageTemplate }; -```css +```css lines .content-view__header-banner { border-radius: 12px; } @@ -579,7 +579,7 @@ The `bottomView` method of MessageTemplate allows you to add a custom button vie -```ts +```ts lines import React, { useEffect, useState } from "react"; import { CometChatMessageList, @@ -639,7 +639,7 @@ export { CustomMessageTemplate }; -```js +```js lines import React, { useEffect, useState } from "react"; import { CometChatMessageList, CometChatUIKit, CometChatUIKitConstants } from '@cometchat/chat-uikit-react'; import { CometChat } from "@cometchat/chat-sdk-javascript"; @@ -688,7 +688,7 @@ export { CustomMessageTemplate }; -```css +```css lines .cometchat .cometchat-message-bubble__body { border-radius: 12px 12px 0px 0px; } @@ -739,7 +739,7 @@ The `footerView` method of MessageTemplate allows you to add a footer view to yo -```ts +```ts lines import React, { useEffect, useState } from "react"; import { CometChatMessageList, @@ -802,7 +802,7 @@ export { CustomMessageTemplate }; -```js +```js lines import React, { useEffect, useState } from "react"; import { CometChatMessageList, @@ -863,7 +863,7 @@ export { CustomMessageTemplate }; -```css +```css lines .cometchat .cometchat-message-bubble__body-footer-view { display: flex; align-items: center; @@ -895,7 +895,7 @@ The `bubbleView` method of MessageTemplate allows you to add a bubble view to yo -```ts +```ts lines import React, { useEffect, useState } from "react"; import { CometChatMessageList, @@ -1010,7 +1010,7 @@ export { CustomMessageTemplate }; -```js +```js lines 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"; @@ -1112,7 +1112,7 @@ export { CustomMessageTemplate }; -```css +```css lines .bubble-view { display: flex; flex-direction: column; @@ -1200,7 +1200,7 @@ The `statusInfoView` method of MessageTemplate allows you to add a status info v -```ts +```ts lines import React, { useEffect, useState } from "react"; import { CometChatMessageList, @@ -1271,7 +1271,7 @@ export { CustomMessageTemplate }; -```js +```js lines import React, { useEffect, useState } from "react"; import { CometChatMessageList, CometChatUIKit, CometChatUIKitConstants } from '@cometchat/chat-uikit-react'; import { CometChat } from "@cometchat/chat-sdk-javascript"; @@ -1337,7 +1337,7 @@ export { CustomMessageTemplate }; -```css +```css lines .status-info { display: flex; width: 57px; @@ -1381,7 +1381,7 @@ The `replyView` method of MessageTemplate allows you to add a reply view to your -```ts +```ts lines import React, { useEffect, useState } from "react"; import { CometChatMessageList @@ -1412,7 +1412,7 @@ export { CustomMessageTemplate }; -```js +```js lines import React, { useEffect, useState } from "react"; import { CometChatMessageList } from '@cometchat/chat-uikit-react'; import { CometChat } from "@cometchat/chat-sdk-javascript"; @@ -1439,7 +1439,7 @@ export { CustomMessageTemplate }; -```css +```css lines .cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body { @@ -1472,7 +1472,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, @@ -1551,7 +1551,7 @@ export { CustomMessageTemplate }; -```js +```js lines import React, { useEffect, useState } from "react"; import { CometChatMessageList, @@ -1619,7 +1619,7 @@ export { CustomMessageTemplate }; -```css +```css lines #refresh.cometchat-menu-list__menu .cometchat-menu-list__sub-menu-item-title { overflow: hidden; color: #6852d6; @@ -1647,7 +1647,7 @@ You can create an entirely new template for custom messages is one of the powerf -```ts +```ts lines import React, { useEffect, useState } from "react"; import { CometChatMessageList, @@ -1774,7 +1774,7 @@ export { CustomMessageTemplate }; -```js +```js lines import React, { useEffect, useState } from "react"; import { CometChatMessageList, CometChatUIKit, CometChatUIKitConstants, CometChatMessageTemplate,MessageReceiptUtils,isMessageSentByMe,Receipts,CometChatUIKitLoginListener } from '@cometchat/chat-uikit-react'; @@ -1885,7 +1885,7 @@ export { CustomMessageTemplate }; -```css +```css lines .content-view { display: flex; flex-direction: column; diff --git a/ui-kit/react/methods.mdx b/ui-kit/react/methods.mdx index 5f74abce1..47a044f8d 100644 --- a/ui-kit/react/methods.mdx +++ b/ui-kit/react/methods.mdx @@ -67,7 +67,7 @@ Make sure you replace the **APP\_ID**, **REGION** and **AUTH\_KEY** with your Co -```js +```js lines import { UIKitSettingsBuilder } from "@cometchat/uikit-shared"; //import shared package const COMETCHAT_CONSTANTS = { @@ -102,7 +102,7 @@ If you want to use session storage instead of the default local storage, you can -```js +```js lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; @@ -130,7 +130,7 @@ CometChatUIKit.init(UIKitSettings)?.then(() => { -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; @@ -164,7 +164,7 @@ You can use this method to check if there is any existing session in the SDK. Th -```js +```js lines import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package CometChatUIKit.getLoggedinUser() @@ -186,7 +186,7 @@ This simple authentication procedure is useful when you are creating a POC or if -```js +```js lines import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package const UID = "UID"; @@ -211,7 +211,7 @@ CometChatUIKit.getLoggedinUser() -```ts +```ts lines import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package const UID: string = "UID"; @@ -249,7 +249,7 @@ This advanced authentication procedure does not use the Auth Key directly in you -```js +```js lines import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package const authToken = "AUTH_TOKEN"; @@ -275,7 +275,7 @@ CometChatUIKit.getLoggedinUser() -```ts +```ts lines import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package const authToken: string = "AUTH_TOKEN"; @@ -307,7 +307,7 @@ This method is used to end the user session of the logged-in user -```js +```js lines import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package CometChatUIKit.logout(); @@ -325,7 +325,7 @@ This method takes a `User` object and the `Auth Key` as input parameters and ret -```js +```js lines import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package @@ -352,7 +352,7 @@ CometChatUIKit.createUser(user, authKey) -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package @@ -388,7 +388,7 @@ This method takes a `User` object and the `Auth Key` as inputs and returns the u -```js +```js lines import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package @@ -408,7 +408,7 @@ CometChatUIKit.updateUser(user, authKey) -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package @@ -439,7 +439,7 @@ This method sends a text message in a 1:1 or group chat. You need to pass a `Tex -```tsx +```tsx lines 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 @@ -463,7 +463,7 @@ CometChatUIKit.sendTextMessage(textMessage) -```tsx +```tsx lines 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 @@ -502,7 +502,7 @@ Make sure you replace the `INPUT FILE OBJECT` with the actual [file](https://dev -```tsx +```tsx lines 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 @@ -527,7 +527,7 @@ CometChatUIKit.sendMediaMessage(mediaMessage) -```tsx +```tsx lines 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 @@ -561,7 +561,7 @@ This method allows you to send custom messages which are neither text nor media -```tsx +```tsx lines 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 @@ -590,7 +590,7 @@ CometChatUIKit.sendCustomMessage(customMessage) -```tsx +```tsx lines 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 8f885bd8c..4d627f388 100644 --- a/ui-kit/react/next-conversation.mdx +++ b/ui-kit/react/next-conversation.mdx @@ -465,19 +465,19 @@ a { -```bash +```bash lines npm run dev ``` -```bash +```bash lines pnpm dev ``` -```bash +```bash lines yarn dev ``` diff --git a/ui-kit/react/next-one-to-one-chat.mdx b/ui-kit/react/next-one-to-one-chat.mdx index d1ae9fad0..180a4176a 100644 --- a/ui-kit/react/next-one-to-one-chat.mdx +++ b/ui-kit/react/next-one-to-one-chat.mdx @@ -337,19 +337,19 @@ a { -```bash +```bash lines npm run dev ``` -```bash +```bash lines pnpm dev ``` -```bash +```bash lines yarn dev ``` diff --git a/ui-kit/react/next-tab-based-chat.mdx b/ui-kit/react/next-tab-based-chat.mdx index 74b73fcfd..0369d9b81 100644 --- a/ui-kit/react/next-tab-based-chat.mdx +++ b/ui-kit/react/next-tab-based-chat.mdx @@ -701,19 +701,19 @@ a { -```bash +```bash lines npm run dev ``` -```bash +```bash lines pnpm dev ``` -```bash +```bash lines yarn dev ``` diff --git a/ui-kit/react/outgoing-call.mdx b/ui-kit/react/outgoing-call.mdx index ec9dafb34..1fc75e375 100644 --- a/ui-kit/react/outgoing-call.mdx +++ b/ui-kit/react/outgoing-call.mdx @@ -62,7 +62,7 @@ The `Outgoing Call` is comprised of the following components: -```tsx +```tsx lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatOutgoingCall, @@ -97,7 +97,7 @@ export default OutgoingCallDemo; -```jsx +```jsx lines import React, { useState, useEffect } from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { @@ -143,7 +143,7 @@ The `onCallCanceled` event gets activated when the cancel button is clicked. It -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatOutgoingCall, @@ -186,7 +186,7 @@ export default OutgoingCallDemo; -```js +```js lines import React, { useState, useEffect } from 'react'; import { CometChat } from '@cometchat/chat-sdk-javascript'; import { CometChatOutgoingCall, CometChatUIKitConstants } from '@cometchat/chat-uikit-react'; @@ -237,7 +237,7 @@ This action doesn't change the behavior of the component but rather listens for -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatOutgoingCall, @@ -279,7 +279,7 @@ export default OutgoingCallDemo; -```js +```js lines import React, { useState, useEffect } from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { @@ -354,7 +354,7 @@ Using CSS you can customize the look and feel of the component in your app like -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatOutgoingCall, @@ -390,7 +390,7 @@ export default OutgoingCallDemo; -```js +```js lines import React, { useState, useEffect } from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { @@ -427,7 +427,7 @@ export default OutgoingCallDemo; -```css +```css lines .cometchat-outgoing-call__avatar .cometchat-avatar { display: flex; justify-content: center; @@ -462,7 +462,7 @@ Here is a code snippet demonstrating how you can customize the functionality of -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatOutgoingCall, @@ -499,7 +499,7 @@ export default OutgoingCallDemo; -```js +```js lines import React, { useState, useEffect } from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { @@ -568,7 +568,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatOutgoingCall, @@ -613,7 +613,7 @@ export default OutgoingCallDemo; -```js +```js lines import React, { useState, useEffect } from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { @@ -659,7 +659,7 @@ export default OutgoingCallDemo; -```css +```css lines .outgoing-call__title { color: #141414; text-align: center; @@ -685,7 +685,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatOutgoingCall, @@ -731,7 +731,7 @@ export default OutgoingCallDemo; -```js +```js lines import React, { useState, useEffect } from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { @@ -778,7 +778,7 @@ export default OutgoingCallDemo; -```css +```css lines .outgoing-call__subtitle { display: flex; justify-content: center; @@ -815,7 +815,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatAvatar, @@ -865,7 +865,7 @@ export default OutgoingCallDemo; -```js +```js lines import React, { useState, useEffect } from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { @@ -916,7 +916,7 @@ export default OutgoingCallDemo; -```css +```css lines .outgoing-call__avatar .cometchat-avatar, .outgoing-call__avatar .cometchat-avatar__image { width: 160px; @@ -953,7 +953,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatOutgoingCall, @@ -1001,7 +1001,7 @@ export default OutgoingCallDemo; -```js +```js lines import React, { useState, useEffect } from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { @@ -1050,7 +1050,7 @@ export default OutgoingCallDemo; -```css +```css lines .outgoing-call__cancel-button-wrapper { height: 64px; display: flex; diff --git a/ui-kit/react/react-conversation.mdx b/ui-kit/react/react-conversation.mdx index 73eb161b0..35f5307ac 100644 --- a/ui-kit/react/react-conversation.mdx +++ b/ui-kit/react/react-conversation.mdx @@ -394,13 +394,13 @@ export default App; -```bash +```bash lines npm run dev ``` -```bash +```bash lines npm start ``` diff --git a/ui-kit/react/react-js-integration.mdx b/ui-kit/react/react-js-integration.mdx index 9cb9e77c1..113ec6d0e 100644 --- a/ui-kit/react/react-js-integration.mdx +++ b/ui-kit/react/react-js-integration.mdx @@ -248,7 +248,7 @@ CometChatUIKit.init(UIKitSettings)! -```js +```js lines import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; /** @@ -361,7 +361,7 @@ CometChatUIKit.getLoggedinUser().then((user: CometChat.User | null) => { -```js +```js lines import { CometChatUIKit } from "@cometchat/chat-uikit-react"; const UID = "UID"; // Replace with your actual UID diff --git a/ui-kit/react/react-one-to-one-chat.mdx b/ui-kit/react/react-one-to-one-chat.mdx index 0250e65ec..7ed59f065 100644 --- a/ui-kit/react/react-one-to-one-chat.mdx +++ b/ui-kit/react/react-one-to-one-chat.mdx @@ -215,13 +215,13 @@ CometChat.getGroup(GUID) -```bash +```bash lines npm run dev ``` -```bash +```bash lines npm start ``` diff --git a/ui-kit/react/react-router-conversation.mdx b/ui-kit/react/react-router-conversation.mdx index 66c3da521..353176a39 100644 --- a/ui-kit/react/react-router-conversation.mdx +++ b/ui-kit/react/react-router-conversation.mdx @@ -468,19 +468,19 @@ a { - ```bash + ```bash lines npm run dev ``` - ```bash + ```bash lines pnpm dev ``` - ```bash + ```bash lines yarn dev ``` diff --git a/ui-kit/react/react-router-one-to-one-chat.mdx b/ui-kit/react/react-router-one-to-one-chat.mdx index aa6426ec8..07c926985 100644 --- a/ui-kit/react/react-router-one-to-one-chat.mdx +++ b/ui-kit/react/react-router-one-to-one-chat.mdx @@ -340,19 +340,19 @@ a { - ```bash + ```bash lines npm run dev ``` - ```bash + ```bash lines pnpm dev ``` - ```bash + ```bash lines yarn dev ``` diff --git a/ui-kit/react/react-router-tab-based-chat.mdx b/ui-kit/react/react-router-tab-based-chat.mdx index db9692e77..be4a160d8 100644 --- a/ui-kit/react/react-router-tab-based-chat.mdx +++ b/ui-kit/react/react-router-tab-based-chat.mdx @@ -710,19 +710,19 @@ a { - ```bash + ```bash lines npm run dev ``` - ```bash + ```bash lines pnpm dev ``` - ```bash + ```bash lines yarn dev ``` diff --git a/ui-kit/react/react-tab-based-chat.mdx b/ui-kit/react/react-tab-based-chat.mdx index b5acdbdf1..ba43aa008 100644 --- a/ui-kit/react/react-tab-based-chat.mdx +++ b/ui-kit/react/react-tab-based-chat.mdx @@ -485,13 +485,13 @@ export default App; -```bash +```bash lines npm run dev ``` -```bash +```bash lines npm start ``` diff --git a/ui-kit/react/search.mdx b/ui-kit/react/search.mdx index 992a553ee..7fc7a43bc 100644 --- a/ui-kit/react/search.mdx +++ b/ui-kit/react/search.mdx @@ -50,7 +50,7 @@ The `CometChatSearch` component is a powerful and customizable search interface -```tsx +```tsx lines import { CometChatSearch } from "@cometchat/chat-uikit-react"; function SearchDemo() { @@ -67,7 +67,7 @@ export default SearchDemo; -```jsx +```jsx lines import { CometChatSearch } from "@cometchat/chat-uikit-react"; function SearchDemo() { @@ -97,7 +97,7 @@ export default SearchDemo; -```tsx +```tsx lines import { CometChatSearch } from "@cometchat/chat-uikit-react"; const openConversation = (conversation: CometChat.Conversation) => { @@ -110,7 +110,7 @@ const openConversation = (conversation: CometChat.Conversation) => { -```jsx +```jsx lines import { CometChatSearch } from "@cometchat/chat-uikit-react"; const openConversation = (conversation) => { @@ -132,7 +132,7 @@ const openConversation = (conversation) => { -```tsx +```tsx lines import { CometChatSearch } from "@cometchat/chat-uikit-react"; const goToMessage = (message: CometChat.BaseMessage) => { @@ -145,7 +145,7 @@ const goToMessage = (message: CometChat.BaseMessage) => { -```jsx +```jsx lines import { CometChatSearch } from "@cometchat/chat-uikit-react"; const goToMessage = (message) => { @@ -167,7 +167,7 @@ const goToMessage = (message) => { -```tsx +```tsx lines import { CometChatSearch } from "@cometchat/chat-uikit-react"; const onBack = () => { @@ -180,7 +180,7 @@ const onBack = () => { -```jsx +```jsx lines import { CometChatSearch } from "@cometchat/chat-uikit-react"; const onBack = () => { @@ -202,7 +202,7 @@ This action doesn't change the behavior of the component but rather listens for -```tsx +```tsx lines import { CometChatSearch } from "@cometchat/chat-uikit-react"; const handleOnError = (error: CometChat.CometChatException) => { @@ -215,7 +215,7 @@ const handleOnError = (error: CometChat.CometChatException) => { -```jsx +```jsx lines import { CometChatSearch } from "@cometchat/chat-uikit-react"; const handleOnError = (error) => { @@ -239,7 +239,7 @@ You can set the `ConversationsRequestBuilder` in the Search Component to filter -```tsx +```tsx lines import { CometChatSearch } from "@cometchat/chat-uikit-react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; @@ -253,7 +253,7 @@ import { CometChat } from "@cometchat/chat-sdk-javascript"; -```jsx +```jsx lines import { CometChatSearch } from "@cometchat/chat-uikit-react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; @@ -276,7 +276,7 @@ You can set the `MessagesRequestBuilder` in the Search Component to filter the s -```tsx +```tsx lines import { CometChatSearch } from "@cometchat/chat-uikit-react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; @@ -288,7 +288,7 @@ import { CometChat } from "@cometchat/chat-sdk-javascript"; -```jsx +```jsx lines import { CometChatSearch } from "@cometchat/chat-uikit-react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; @@ -327,7 +327,7 @@ To customize the appearance, you can customise css of `CometChatSearch` -```tsx +```tsx lines import React from "react"; import { CometChatSearch } from "@cometchat/chat-uikit-react"; @@ -337,7 +337,7 @@ import { CometChatSearch } from "@cometchat/chat-uikit-react"; -```css +```css lines .cometchat-search * { font-family: 'Times New Roman', Times !important; } @@ -418,7 +418,7 @@ Here is a code snippet demonstrating how you can customize the functionality of -```tsx +```tsx lines import { CometChatSearch } from "@cometchat/chat-uikit-react"; ; @@ -427,7 +427,7 @@ import { CometChatSearch } from "@cometchat/chat-uikit-react"; -```jsx +```jsx lines import { CometChatSearch } from "@cometchat/chat-uikit-react"; ; @@ -505,7 +505,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatSearch } from "@cometchat/chat-uikit-react"; @@ -530,7 +530,7 @@ const getMessageItemView = (message: CometChat.BaseMessage) => { -```css +```css lines .cometchat-search__message-list-item { background: var(--cometchat-extended-primary-color-100); border-bottom: 1px solid var(--cometchat-border-color-highlight); @@ -577,7 +577,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatSearch } from "@cometchat/chat-uikit-react"; @@ -597,7 +597,7 @@ const getMessageLeadingView = (message: CometChat.BaseMessage) => { -```css +```css lines .cometchat-search__message-list-item-leading-view { height: 48px; width: 48px; @@ -640,7 +640,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatSearch } from "@cometchat/chat-uikit-react"; @@ -666,7 +666,7 @@ const getMessageTitleView = (message: CometChat.BaseMessage) => { -```css +```css lines .cometchat-search__message-list-item-title { display: flex; align-items: center; @@ -712,7 +712,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatSearch } from "@cometchat/chat-uikit-react"; @@ -737,7 +737,7 @@ const getMessageSubtitleView = (message: CometChat.BaseMessage) => { -```css +```css lines .cometchat-search__message-list-item-subtitle { background: var(--cometchat-extended-primary-color-100); padding: var(--cometchat-padding-1); @@ -784,7 +784,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatSearch } from "@cometchat/chat-uikit-react"; @@ -834,7 +834,7 @@ const getMessageTrailingView = (message: CometChat.BaseMessage) => { -```css +```css lines .cometchat-search__message-trailing-view { display: flex; flex-direction: column; @@ -897,7 +897,7 @@ The following example demonstrates how to modify the **Sent At** timestamp forma -```ts +```ts lines import { CometChatSearch, CalendarObject diff --git a/ui-kit/react/shortcut-formatter-guide.mdx b/ui-kit/react/shortcut-formatter-guide.mdx index 067675c3e..1fb45ff46 100644 --- a/ui-kit/react/shortcut-formatter-guide.mdx +++ b/ui-kit/react/shortcut-formatter-guide.mdx @@ -92,7 +92,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"; import DialogHelper from "./Dialog"; import { CometChat } from "@cometchat/chat-sdk-javascript"; @@ -208,7 +208,7 @@ export default ShortcutFormatter; -```tsx +```tsx lines import React from "react"; import ReactDOM from "react-dom"; import { CometChatUIEvents, PanelAlignment } from "@cometchat/chat-uikit-react"; @@ -271,7 +271,7 @@ export default class DialogHelper { -```tsx +```tsx lines import ShortcutFormatter from "./ShortCutFormatter"; import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; diff --git a/ui-kit/react/sound-manager.mdx b/ui-kit/react/sound-manager.mdx index 9dd147f6b..f904813ab 100644 --- a/ui-kit/react/sound-manager.mdx +++ b/ui-kit/react/sound-manager.mdx @@ -52,7 +52,7 @@ Here is how to use CometChatSoundManager: -```js +```js lines //Trigger the audio sound for an incoming call. CometChatSoundManager.play(Sound.incomingCall); @@ -66,7 +66,7 @@ CometChatSoundManager.pause(); -```ts +```ts lines //Trigger the audio sound for an incoming call CometChatSoundManager.play(Sound.incomingCall); diff --git a/ui-kit/react/theme.mdx b/ui-kit/react/theme.mdx index 2873fd3e6..273fdc2f7 100644 --- a/ui-kit/react/theme.mdx +++ b/ui-kit/react/theme.mdx @@ -103,7 +103,7 @@ To enable theming, first, **import the base stylesheet** containing default styl -```css +```css lines @import url("@cometchat/chat-uikit-react/css-variables.css"); ``` @@ -131,7 +131,7 @@ Recommended: Use **App.css** for global overrides and keep them scoped under `.c -```css +```css lines .cometchat { --cometchat-primary-color: #f76808; --cometchat-neutral-color-300: #fff; @@ -145,7 +145,7 @@ Recommended: Use **App.css** for global overrides and keep them scoped under `.c -```tsx +```tsx lines import { useEffect } from "react"; const App = () => { @@ -199,7 +199,7 @@ Want to apply **different styles to specific components**? Override **CSS variab -```css +```css lines .cometchat .cometchat-conversations { --cometchat-primary-color: #f76808; --cometchat-extended-primary-color-500: #fbaa75; @@ -223,7 +223,7 @@ For full control over component styling, use **CSS overrides** to target specifi -```css +```css lines .cometchat-conversations .cometchat-avatar, .cometchat-conversations .cometchat-avatar__image { border-radius: 12px; @@ -257,7 +257,7 @@ Avoid mixing both unless you intentionally want OS preference plus manual overri -```tsx +```tsx lines import { useEffect, useState } from "react"; const App = () => { @@ -299,7 +299,7 @@ Define different **color schemes** for **light and dark modes**. -```css +```css lines /* Default (Light) Theme */ .cometchat { --cometchat-primary-color: #f76808; diff --git a/ui-kit/react/theme/message-bubble-styling.mdx b/ui-kit/react/theme/message-bubble-styling.mdx index 352cae949..6c90c5b51 100644 --- a/ui-kit/react/theme/message-bubble-styling.mdx +++ b/ui-kit/react/theme/message-bubble-styling.mdx @@ -277,7 +277,7 @@ The customized chat interface is displayed below. -```css +```css lines /* Outgoing Text Message Bubble */ .cometchat .cometchat-message-bubble-outgoing @@ -328,7 +328,7 @@ The customized chat interface is displayed below. -```css +```css lines /* Outgoing Image Message Bubble */ .cometchat .cometchat-message-bubble-outgoing @@ -379,7 +379,7 @@ The customized chat interface is displayed below. -```css +```css lines /* Outgoing Video Message Bubble */ .cometchat .cometchat-message-bubble-outgoing @@ -430,7 +430,7 @@ The customized chat interface is displayed below. -```css +```css lines /* Outgoing Audio Message Bubble */ .cometchat .cometchat-message-bubble-outgoing @@ -482,7 +482,7 @@ The customized chat interface is displayed below. -```css +```css lines /* Outgoing File Message Bubble */ .cometchat .cometchat-message-bubble-outgoing @@ -534,7 +534,7 @@ The customized chat interface is displayed below. -```css +```css lines /* Outgoing Delete Bubble */ .cometchat .cometchat-message-bubble-outgoing @@ -589,7 +589,7 @@ The customized chat interface is displayed below. -```css +```css lines .cometchat .cometchat-message-bubble__body .cometchat-action-bubble { --cometchat-primary-color: #f76808; background-color: #feede1; @@ -637,7 +637,7 @@ The customized chat interface is displayed below. -```css +```css lines /* Outgoing Direct Call Message Bubble */ .cometchat .cometchat-message-bubble-outgoing @@ -698,7 +698,7 @@ The customized chat interface is displayed below. -```css +```css lines .cometchat .cometchat-message-bubble__body .cometchat-action-bubble { --cometchat-primary-color: #f76808; background-color: #feede1; @@ -746,7 +746,7 @@ The customized chat interface is displayed below. -```css +```css lines /* Outgoing Collaborative Whiteboard Bubble */ .cometchat .cometchat-message-bubble-outgoing @@ -800,7 +800,7 @@ The customized chat interface is displayed below. -```css +```css lines /* Outgoing Collaborative Document Bubble */ .cometchat .cometchat-message-bubble-outgoing @@ -854,7 +854,7 @@ The customized chat interface is displayed below. -```css +```css lines /* Outgoing Poll Message Bubble */ .cometchat .cometchat-message-bubble-outgoing @@ -907,7 +907,7 @@ The customized chat interface is displayed below. -```css +```css lines /* Outgoing Sticker Bubble */ .cometchat .cometchat-message-bubble-outgoing @@ -966,7 +966,7 @@ The customized chat interface is displayed below. -```css +```css lines /* Outgoing Link Preview Bubble */ .cometchat .cometchat-message-bubble-outgoing diff --git a/ui-kit/react/thread-header.mdx b/ui-kit/react/thread-header.mdx index 90eb2554e..f89b627a4 100644 --- a/ui-kit/react/thread-header.mdx +++ b/ui-kit/react/thread-header.mdx @@ -49,7 +49,7 @@ The following code snippet illustrates how you can directly incorporate the Come -```tsx +```tsx lines import React from "react"; import { CometChatThreadHeader } from "@cometchat/chat-uikit-react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; @@ -77,7 +77,7 @@ export function ThreadHeaderDemo() { -```jsx +```jsx lines import React, { useState, useEffect } from "react"; import { CometChatThreadHeader } from "@cometchat/chat-uikit-react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; @@ -117,7 +117,7 @@ In this example, we are overriding the `onClose` of the ThreadedMesssage Compone -```tsx +```tsx lines import React from "react"; import { CometChatThreadHeader } from "@cometchat/chat-uikit-react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; @@ -181,7 +181,7 @@ Using Style you can customize the look and feel of the component in your app, Th -```tsx +```tsx lines import React from "react"; import { CometChatThreadHeader } from "@cometchat/chat-uikit-react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; @@ -209,7 +209,7 @@ export function ThreadHeaderDemo() { -```css +```css lines .cometchat .cometchat-thread-header { background-color: #edeafa; } @@ -235,7 +235,7 @@ These are a set of small functional customizations that allow you to fine-tune t -```tsx +```tsx lines import React from "react"; import { CometChatThreadHeader } from "@cometchat/chat-uikit-react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; @@ -306,7 +306,7 @@ The following example demonstrates how to modify the **Date Separator** timestam -```ts +```ts lines import { CometChatThreadHeader, CalendarObject @@ -358,7 +358,7 @@ The following example demonstrates how to modify the **Message SentAt** timestam -```ts +```ts lines import { CometChatThreadHeader, CalendarObject diff --git a/ui-kit/react/url-formatter-guide.mdx b/ui-kit/react/url-formatter-guide.mdx index ca8375980..30c2983ea 100644 --- a/ui-kit/react/url-formatter-guide.mdx +++ b/ui-kit/react/url-formatter-guide.mdx @@ -28,7 +28,7 @@ description: "Detect and style plain URLs as clickable links with optional track -```ts +```ts lines import { CometChatTextFormatter } from "path-to-cometchat-text-formatter"; export class CometChatUrlsFormatter extends CometChatTextFormatter { diff --git a/ui-kit/react/users.mdx b/ui-kit/react/users.mdx index c57bfedb7..688edbb95 100644 --- a/ui-kit/react/users.mdx +++ b/ui-kit/react/users.mdx @@ -1039,7 +1039,7 @@ const customTrailingButtonView = (user:CometChat.User) => { -```css +```css lines .users__trailing-view { display: flex; width: 33px; @@ -1094,7 +1094,7 @@ Use the following code to achieve the customization shown above. -```ts +```ts lines import { CometChatUsers, CometChatOption } from "@cometchat/chat-uikit-react"; function UsersDemo() { @@ -1119,7 +1119,7 @@ export default UsersDemo; -```js +```js lines import { CometChatUsers, CometChatOption } from "@cometchat/chat-uikit-react"; function UsersDemo() { @@ -1144,7 +1144,7 @@ export default UsersDemo; -```css +```css lines .cometchat .cometchat-users .cometchat-menu-list__menu { background: none; } From 5f214e3498ee232c815c699d594aac3d50d24940 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Thu, 19 Feb 2026 17:50:49 +0530 Subject: [PATCH 53/59] Update message-list.mdx --- ui-kit/react/message-list.mdx | 2 -- 1 file changed, 2 deletions(-) diff --git a/ui-kit/react/message-list.mdx b/ui-kit/react/message-list.mdx index 3d706890d..579889c3e 100644 --- a/ui-kit/react/message-list.mdx +++ b/ui-kit/react/message-list.mdx @@ -616,8 +616,6 @@ const ccMessageRead = CometChatMessageEvents.ccMessageRead.subscribe(() => { -*** - Removing `CometChatMessageEvents` Listener's From 504f307d5767bdca00899ff58e7cb3a55000f5c9 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Thu, 19 Feb 2026 17:57:22 +0530 Subject: [PATCH 54/59] updates the ##### --- ui-kit/react/ai-assistant-chat.mdx | 8 +++--- ui-kit/react/call-buttons.mdx | 2 +- ui-kit/react/call-logs.mdx | 8 +++--- ui-kit/react/conversations.mdx | 2 +- ui-kit/react/incoming-call.mdx | 6 ++--- ui-kit/react/message-composer.mdx | 8 +++--- ui-kit/react/outgoing-call.mdx | 4 +-- ui-kit/react/v4/call-buttons.mdx | 8 +++--- ui-kit/react/v4/call-log-details.mdx | 6 ++--- ui-kit/react/v4/call-log-history.mdx | 12 ++++----- ui-kit/react/v4/call-log-participants.mdx | 10 +++---- ui-kit/react/v4/call-log-recording.mdx | 10 +++---- ui-kit/react/v4/call-log-with-details.mdx | 4 +-- ui-kit/react/v4/call-logs.mdx | 14 +++++----- .../react/v4/conversations-with-messages.mdx | 6 ++--- ui-kit/react/v4/conversations.mdx | 26 +++++++++---------- ui-kit/react/v4/create-group.mdx | 8 +++--- ui-kit/react/v4/group-add-members.mdx | 22 ++++++++-------- ui-kit/react/v4/group-banned-members.mdx | 22 ++++++++-------- ui-kit/react/v4/group-details.mdx | 18 ++++++------- ui-kit/react/v4/group-members.mdx | 26 +++++++++---------- ui-kit/react/v4/group-transfer-ownership.mdx | 20 +++++++------- ui-kit/react/v4/groups-with-messages.mdx | 8 +++--- ui-kit/react/v4/groups.mdx | 18 ++++++------- ui-kit/react/v4/incoming-call.mdx | 12 ++++----- ui-kit/react/v4/join-protected-group.mdx | 6 ++--- ui-kit/react/v4/message-composer.mdx | 10 +++---- ui-kit/react/v4/message-header.mdx | 12 ++++----- ui-kit/react/v4/message-information.mdx | 8 +++--- ui-kit/react/v4/message-list.mdx | 12 ++++----- ui-kit/react/v4/messages.mdx | 4 +-- ui-kit/react/v4/ongoing-call.mdx | 4 +-- ui-kit/react/v4/outgoing-call.mdx | 8 +++--- ui-kit/react/v4/overview.mdx | 2 +- ui-kit/react/v4/reaction-info.mdx | 2 +- ui-kit/react/v4/reaction-list.mdx | 8 +++--- ui-kit/react/v4/reaction.mdx | 4 +-- ui-kit/react/v4/threaded-messages.mdx | 2 +- ui-kit/react/v4/user-member-wrapper.mdx | 10 +++---- ui-kit/react/v4/users-details.mdx | 14 +++++----- ui-kit/react/v4/users-with-messages.mdx | 8 +++--- ui-kit/react/v4/users.mdx | 20 +++++++------- ui-kit/react/v5/call-buttons.mdx | 2 +- ui-kit/react/v5/call-logs.mdx | 8 +++--- ui-kit/react/v5/conversations.mdx | 8 +++--- ui-kit/react/v5/group-members.mdx | 12 ++++----- ui-kit/react/v5/groups.mdx | 10 +++---- ui-kit/react/v5/incoming-call.mdx | 6 ++--- ui-kit/react/v5/message-composer.mdx | 6 ++--- ui-kit/react/v5/message-header.mdx | 4 +-- ui-kit/react/v5/message-list.mdx | 12 ++++----- ui-kit/react/v5/outgoing-call.mdx | 4 +-- ui-kit/react/v5/users.mdx | 12 ++++----- 53 files changed, 253 insertions(+), 253 deletions(-) diff --git a/ui-kit/react/ai-assistant-chat.mdx b/ui-kit/react/ai-assistant-chat.mdx index 1f942c2af..8a400b29d 100644 --- a/ui-kit/react/ai-assistant-chat.mdx +++ b/ui-kit/react/ai-assistant-chat.mdx @@ -119,7 +119,7 @@ export function AIAssistantChatDemo() { [Actions](/ui-kit/react/components-overview#actions) control how a component behaves. You can hook into the following callbacks: -##### 1. onBackButtonClicked +#### 1. onBackButtonClicked Called when the header back button is clicked (visible when `showBackButton` is true). @@ -188,7 +188,7 @@ export function AIAssistantChatDemo() { -##### 2. onCloseButtonClicked +#### 2. onCloseButtonClicked Called when the header close button is clicked (visible when `showCloseButton` is true). @@ -256,7 +256,7 @@ export function AIAssistantChatDemo() { -##### 3. onSendButtonClick +#### 3. onSendButtonClick Called when the composer send button is clicked. @@ -322,7 +322,7 @@ export function AIAssistantChatDemo() { -##### 4. onError +#### 4. onError Listen to errors from the underlying header, list, or composer. diff --git a/ui-kit/react/call-buttons.mdx b/ui-kit/react/call-buttons.mdx index 56a352a18..38cd79aba 100644 --- a/ui-kit/react/call-buttons.mdx +++ b/ui-kit/react/call-buttons.mdx @@ -102,7 +102,7 @@ export default CallButtonDemo; [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. onError +#### 1. onError This action doesn't change the behavior of the component but rather listens for any errors that occur in the Call Button component. diff --git a/ui-kit/react/call-logs.mdx b/ui-kit/react/call-logs.mdx index 655d5b5e7..247b135a6 100644 --- a/ui-kit/react/call-logs.mdx +++ b/ui-kit/react/call-logs.mdx @@ -94,7 +94,7 @@ export default CallLogDemo; [Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -##### 1. onItemClick +#### 1. onItemClick `onItemClick` is a callback function which triggers when a call log list item is clicked. It does not have a default behavior. However, you can override its behavior using the following code snippet. @@ -135,7 +135,7 @@ export default CallLogDemo; -##### 2. onCallButtonClicked +#### 2. onCallButtonClicked `onCallButtonClicked` is a callback function which triggers when the call button in the trailing view is clicked. @@ -176,7 +176,7 @@ export default CallLogDemo; -##### 3. onError +#### 3. onError This is a callback function which is triggered when the component encounters an error. @@ -224,7 +224,7 @@ export default CallLogDemo; **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. CallLogRequestBuilder +#### 1. CallLogRequestBuilder 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) diff --git a/ui-kit/react/conversations.mdx b/ui-kit/react/conversations.mdx index 9221014e9..3af8050c4 100644 --- a/ui-kit/react/conversations.mdx +++ b/ui-kit/react/conversations.mdx @@ -1279,7 +1279,7 @@ const getOptions = (conversation: CometChat.Conversation) => { -##### Structure of CometChatOption +#### Structure of CometChatOption | Name | Description | | ----------- | ----------------------------------------------------- | diff --git a/ui-kit/react/incoming-call.mdx b/ui-kit/react/incoming-call.mdx index 5b19ceffb..e0341f247 100644 --- a/ui-kit/react/incoming-call.mdx +++ b/ui-kit/react/incoming-call.mdx @@ -95,7 +95,7 @@ export default IncomingCallsDemo; [Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -##### 1. onAccept +#### 1. onAccept `onAccept` is triggered when you click the accept button of the `Incoming Call` component. You can override this action using the following code snippet. @@ -138,7 +138,7 @@ export default IncomingCallsDemo; -##### 2. onDecline +#### 2. onDecline `onDecline` is triggered when you click the Decline button of the `Incoming Call` component. You can override this action using the following code snippet. @@ -181,7 +181,7 @@ export default IncomingCallsDemo; -##### 3. onError +#### 3. onError This action doesn't change the behavior of the component but rather listens for any errors that occur in the Incoming Call component. diff --git a/ui-kit/react/message-composer.mdx b/ui-kit/react/message-composer.mdx index cd39b5b93..7687fe9ed 100644 --- a/ui-kit/react/message-composer.mdx +++ b/ui-kit/react/message-composer.mdx @@ -107,7 +107,7 @@ export function MessageComposerDemo() { [Actions](/ui-kit/react/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -##### 1. OnSendButtonClick +#### 1. OnSendButtonClick The `OnSendButtonClick` event gets activated when the send message button is clicked. It has a predefined function of sending messages entered in the composer `EditText`. However, you can overide this action with the following code snippet. @@ -172,7 +172,7 @@ export function MessageComposerDemo() { -##### 2. onError +#### 2. onError This action doesn't change the behavior of the component but rather listens for any errors that occur in the MessageList component. @@ -208,7 +208,7 @@ export function MessageComposerDemo() { -##### 3. onTextChange +#### 3. onTextChange This event is triggered as the user starts typing in the Message Composer. @@ -247,7 +247,7 @@ export function MessageComposerDemo() { -##### 4. Custom Mentions Request Builders +#### 4. Custom Mentions Request Builders You can customize how mentioned users and group members are fetched by providing custom request builders. diff --git a/ui-kit/react/outgoing-call.mdx b/ui-kit/react/outgoing-call.mdx index 1fc75e375..3cb3b15c3 100644 --- a/ui-kit/react/outgoing-call.mdx +++ b/ui-kit/react/outgoing-call.mdx @@ -137,7 +137,7 @@ export default OutgoingCallDemo; [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 +#### 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. @@ -231,7 +231,7 @@ export default OutgoingCallDemo; -##### 2. onError +#### 2. onError This action doesn't change the behavior of the component but rather listens for any errors that occur in the Outgoing Call component. diff --git a/ui-kit/react/v4/call-buttons.mdx b/ui-kit/react/v4/call-buttons.mdx index af19f06be..16babe97d 100644 --- a/ui-kit/react/v4/call-buttons.mdx +++ b/ui-kit/react/v4/call-buttons.mdx @@ -61,7 +61,7 @@ export default function App() { [Actions](/ui-kit/react/v4/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. onVoiceCallClick +#### 1. onVoiceCallClick `onVoiceCallClick` is triggered when you click the voice call button of the `Call Buttons` component. You can override this action using the following code snippet. @@ -134,7 +134,7 @@ export default CallButtonDemo; -##### 2. onVideoCallClick +#### 2. onVideoCallClick `onVideoCallClick` is triggered when you click the video call button of the `Call Buttons` component. You can override this action using the following code snippet. @@ -207,7 +207,7 @@ export default CallButtonDemo; -##### 3. onError +#### 3. onError This action doesn't change the behavior of the component but rather listens for any errors that occur in the Call Button component. @@ -353,7 +353,7 @@ To fit your app's design requirements, you can customize the appearance of the C Using Style you can customize the look and feel of the component in your app, These parameters typically control elements such as the color, size, shape, and fonts used within the component. -##### 1. CallButtons Style +#### 1. CallButtons Style To customize the appearance, you can assign a `CallButtonsStyle` object to the `Call Buttons` component. diff --git a/ui-kit/react/v4/call-log-details.mdx b/ui-kit/react/v4/call-log-details.mdx index ecbae3009..5f982754b 100644 --- a/ui-kit/react/v4/call-log-details.mdx +++ b/ui-kit/react/v4/call-log-details.mdx @@ -91,7 +91,7 @@ export default function App() { [Actions](/ui-kit/react/v4/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. onBackClick +#### 1. onBackClick `onBackClick` is triggered when you click on the back button of the Call Log Details component. You can override this action using the following code snippet. @@ -241,7 +241,7 @@ To fit your app's design requirements, you have the ability to customize the app Using **Style** you can **customize** the look and feel of the component in your app, These parameters typically control elements such as the **color**, **size**, **shape**, and **fonts** used within the component. -##### 1. CallLogDetails Style +#### 1. CallLogDetails Style You can set the `callLogDetailsStyle` to the Call Log Details Component to customize the styling. @@ -398,7 +398,7 @@ The following properties are exposed by `CallLogDetailsStyle`: | **nameTextColor** | Used to set name text color | `nameTextColor?: string;` | | **backIconTint** | Used to set color of the back icon | `backIconTint?: string;` | -##### 2. Avatar Style +#### 2. Avatar Style If you want to apply customized styles to the `Avatar` component within the `Call Log Details` Component, you can use the following code snippet. For more information you can refer [Avatar Styles](/ui-kit/react/v4/avatar#avatar-style). diff --git a/ui-kit/react/v4/call-log-history.mdx b/ui-kit/react/v4/call-log-history.mdx index 77433d3b4..cc1c5e12b 100644 --- a/ui-kit/react/v4/call-log-history.mdx +++ b/ui-kit/react/v4/call-log-history.mdx @@ -64,7 +64,7 @@ export default function App() { [Actions](/ui-kit/react/v4/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. onBackClick +#### 1. onBackClick `onBackClick` is triggered when you click the Back button Icon of the `Call Log History` component. It does not have a default behavior. However, you can override its behavior using the following code snippet. @@ -109,7 +109,7 @@ export default CallLogHistoryDemo; -##### 1. onItemClick +#### 1. onItemClick `onItemClick` is triggered when you click on a ListItem of the of the `Call Log History` component. It does not have a default behavior. However, you can override its behavior using the following code snippet. @@ -154,7 +154,7 @@ export default CallLogHistoryDemo; -##### 3. onError +#### 3. onError This action doesn't change the behavior of the component but rather listens for any errors that occur in the `Call Log History` component. @@ -205,7 +205,7 @@ export default CallLogHistoryDemo; **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. CallLogRequestBuilder +#### 1. CallLogRequestBuilder The [CallLogRequestBuilder](/sdk/javascript/call-logs) enables you to filter and customize the Call Log History 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) @@ -296,7 +296,7 @@ To fit your app's design requirements, you have the ability to customize the app Using **Style** you can **customize** the look and feel of the component in your app, These parameters typically control elements such as the **color**, **size**, **shape**, and **fonts** used within the component. -##### 1. CallLogHistory Style +#### 1. CallLogHistory Style To customize the appearance, you can assign a `CallLogHistoryStyle` object to the `Call Log History` component. @@ -392,7 +392,7 @@ The following properties are exposed by `CallLogHistoryStyle`: | **callStatusTextColor** | Used to set call status text color | `callStatusTextColor?: string;` | | **dividerColor** | Used to set divider color | `dividerColor?: string;` | -##### 2. ListItem Style +#### 2. ListItem Style If you want to apply customized styles to the `ListItemStyle` component within the `Call Log History` Component, you can use the following code snippet. For more information, you can refer [ListItem Styles](/ui-kit/react/v4/list-item#listitemstyle). diff --git a/ui-kit/react/v4/call-log-participants.mdx b/ui-kit/react/v4/call-log-participants.mdx index 5e0cbce11..04e09f664 100644 --- a/ui-kit/react/v4/call-log-participants.mdx +++ b/ui-kit/react/v4/call-log-participants.mdx @@ -95,7 +95,7 @@ export default function App() { [Actions](/ui-kit/react/v4/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. onBackClick +#### 1. onBackClick `onBackClick` is triggered when you click the Back button Icon of the `Call Log Participants` component. It does not have a default behavior. However, you can override its behavior using the following code snippet. @@ -211,7 +211,7 @@ export default CallLogParticipantsDemo; -##### 2. onItemClick +#### 2. onItemClick `onItemClick` is triggered when you click on a ListItem of the of the `Call Log Participants` component. It does not have a default behavior. However, you can override its behavior using the following code snippet. @@ -353,7 +353,7 @@ To fit your app's design requirements, you have the ability to customize the app Using **Style** you can **customize** the look and feel of the component in your app, These parameters typically control elements such as the **color**, **size**, **shape**, and **fonts** used within the component. -##### 1. CallLogParticipants Style +#### 1. CallLogParticipants Style To customize the appearance, you can assign a `CallLogParticipantsStyle` object to the `Call Log Participants` component. @@ -501,7 +501,7 @@ The following properties are exposed by `CallLogParticipantsStyle`: | **dateTextFont** | Used to set date text font | `dateTextFont?: string;` | | **dateTextColor** | Used to set date text color | `dateTextColor?: string;` | -##### 2. ListItem Style +#### 2. ListItem Style If you want to apply customized styles to the `ListItemStyle` component within the `Call Log Participants` Component, you can use the following code snippet. For more information, you can refer [ListItem Styles](/ui-kit/react/v4/list-item#listitemstyle). @@ -620,7 +620,7 @@ export default CallLogParticipantsDemo; -##### 3. Avatar Style +#### 3. Avatar Style If you want to apply customized styles to the `Avatar` component within the `Call Log Participants` Component, you can use the following code snippet. For more information you can refer [Avatar Styles](/ui-kit/react/v4/avatar#avatar-style). diff --git a/ui-kit/react/v4/call-log-recording.mdx b/ui-kit/react/v4/call-log-recording.mdx index 7a369d802..9895f6cd1 100644 --- a/ui-kit/react/v4/call-log-recording.mdx +++ b/ui-kit/react/v4/call-log-recording.mdx @@ -94,7 +94,7 @@ export default function App() { [Actions](/ui-kit/react/v4/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. onBackClick +#### 1. onBackClick `onBackClick` is triggered when you click the Back button Icon of the `Call Log Participants` component. It does not have a default behavior. However, you can override its behavior using the following code snippet. @@ -209,7 +209,7 @@ export default CallLogRecordingsDemo; -##### 2. onItemClick +#### 2. onItemClick `onItemClick` is triggered when you click on a ListItem of the of the `Call Log Participants` component. It does not have a default behavior. However, you can override its behavior using the following code snippet. @@ -324,7 +324,7 @@ export default CallLogRecordingsDemo; -##### 2. onDownloadClick +#### 2. onDownloadClick `onDownloadClick` is triggered when you click on the download of the of the `Call Log Recordings` component. you can override its behavior using the following code snippet. @@ -465,7 +465,7 @@ To fit your app's design requirements, you have the ability to customize the app Using **Style** you can **customize** the look and feel of the component in your app, These parameters typically control elements such as the **color**, **size**, **shape**, and **fonts** used within the component. -##### 1. CallLogRecordings Style +#### 1. CallLogRecordings Style To customize the appearance, you can assign a `CallLogRecordingsStyle` object to the `Call Log Recordings` component. @@ -615,7 +615,7 @@ The following properties are exposed by `CallLogRecordingsStyle`: | **dateTextFont** | Used to set date text font | `dateTextFont?: string;` | | **dateTextColor** | Used to set date text color | `dateTextColor?: string;` | -##### 2. ListItem Style +#### 2. ListItem Style If you want to apply customized styles to the `ListItemStyle` component within the `Call Log Recordings` Component, you can use the following code snippet. For more information, you can refer [ListItem Styles](/ui-kit/react/v4/list-item#listitemstyle). diff --git a/ui-kit/react/v4/call-log-with-details.mdx b/ui-kit/react/v4/call-log-with-details.mdx index 5820ceb95..957b2d20f 100644 --- a/ui-kit/react/v4/call-log-with-details.mdx +++ b/ui-kit/react/v4/call-log-with-details.mdx @@ -251,7 +251,7 @@ To fit your app's design requirements, you have the ability to customize the app Using **Style** you can **customize** the look and feel of the component in your app, These parameters typically control elements such as the **color**, **size**, **shape**, and **fonts** used within the component. -##### 1. WithDetailsStyle +#### 1. WithDetailsStyle You can set the `withDetailsStyle` to the CallLogsWithDetails Component to customize the styling. @@ -476,7 +476,7 @@ Below is a list of customizations along with corresponding code snippets: *** -##### Components +#### Components Nearly all functionality customizations available for a Component are also available for the composite component. Using [Configuration](#configurations), you can modify the properties of its components to suit your needs. diff --git a/ui-kit/react/v4/call-logs.mdx b/ui-kit/react/v4/call-logs.mdx index 256792a02..7f6dab0a7 100644 --- a/ui-kit/react/v4/call-logs.mdx +++ b/ui-kit/react/v4/call-logs.mdx @@ -64,7 +64,7 @@ export default function App() { [Actions](/ui-kit/react/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -##### 1. onItemClick +#### 1. onItemClick `OnItemClick` is triggered when you click on a ListItem of the Call Logs component. By default it initiate a call to the participant associated with the respective ListItem. You can override this action using the following code snippet. @@ -109,7 +109,7 @@ export default CallLogDemo; -##### 2. onInfoClick +#### 2. onInfoClick `onInfoClick` is triggered when you click the Info button Icon of the `Call Logs` component. It does not have a default behavior. However, you can override its behavior using the following code snippet. @@ -154,7 +154,7 @@ export default CallLogDemo; -##### 3. onError +#### 3. onError This action doesn't change the behavior of the component but rather listens for any errors that occur in the Call Logs component. @@ -205,7 +205,7 @@ export default CallLogDemo; **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. CallLogRequestBuilder +#### 1. CallLogRequestBuilder 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) @@ -324,7 +324,7 @@ To fit your app's design requirements, you can customize the appearance of the C Using Style you can customize the look and feel of the component in your app, These parameters typically control elements such as the color, size, shape, and fonts used within the component. -##### 1. CallLogs Style +#### 1. CallLogs Style To customize the appearance, you can assign a `CallLogsStyle` object to the `Call Logs` component. @@ -410,7 +410,7 @@ The following properties are exposed by `CallLogsStyle`: | **dateSeparatorTextFont** | Used to set date separator text font | `dateSeparatorTextFont?: string;` | | **dateSeparatorTextColor** | Used to set date separator text color | `dateSeparatorTextColor?: string;` | -##### 2. Avatar Style +#### 2. Avatar Style If you want to apply customized styles to the `Avatar` component within the `Call Logs` Component, you can use the following code snippet. For more information you can refer [Avatar Styles](/ui-kit/react/v4/avatar#avatar-style). @@ -465,7 +465,7 @@ export default CallLogDemo; -##### 3. ListItem Style +#### 3. ListItem Style If you want to apply customized styles to the `ListItemStyle` component within the `Call Logs` Component, you can use the following code snippet. For more information, you can refer [ListItem Styles](/ui-kit/react/v4/list-item#listitemstyle). diff --git a/ui-kit/react/v4/conversations-with-messages.mdx b/ui-kit/react/v4/conversations-with-messages.mdx index 4b2c8ba5b..516e0a56a 100644 --- a/ui-kit/react/v4/conversations-with-messages.mdx +++ b/ui-kit/react/v4/conversations-with-messages.mdx @@ -260,7 +260,7 @@ export default ConversationsWithMessagesDemo; 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. -##### user +#### user you can utilize the `user` method with a [User](/sdk/javascript/user-management) object as input to the ConversationsWithMessages component. This will automatically direct you to the [Messages](/ui-kit/react/v4/messages) component for the specified `User`. @@ -302,7 +302,7 @@ export default ConversationsWithMessagesDemo; *** -##### group +#### group you can utilize the `group` method with a [Group](/sdk/javascript/groups-overview) object as input to the ConversationsWithMessages component. This will automatically direct you to the [Messages](/ui-kit/react/v4/messages) component for the specified `Group`. @@ -345,7 +345,7 @@ export default ConversationsWithMessagesDemo; *** -##### Components +#### Components Nearly all functionality customizations available for a Component are also available for the composite component. Using [Configuration](#configurations), you can modify the properties of its components to suit your needs. diff --git a/ui-kit/react/v4/conversations.mdx b/ui-kit/react/v4/conversations.mdx index 10a1f9317..7f2ffd2c9 100644 --- a/ui-kit/react/v4/conversations.mdx +++ b/ui-kit/react/v4/conversations.mdx @@ -75,7 +75,7 @@ export default function App() { [Actions](/ui-kit/react/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -##### 1. OnItemClick +#### 1. OnItemClick `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. @@ -111,7 +111,7 @@ export default ConversationsDemo; *** -##### 2. OnSelect +#### 2. OnSelect 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. @@ -147,7 +147,7 @@ export default ConversationsDemo; *** -##### 3. OnError +#### 3. OnError This action doesn't change the behavior of the component but rather listens for any errors that occur in the Conversations component. @@ -262,7 +262,7 @@ To fit your app's design requirements, you can customize the appearance of the c Using Style you can customize the look and feel of the component in your app, These parameters typically control elements such as the color, size, shape, and fonts used within the component. -##### 1. Conversation Style +#### 1. Conversation Style You can set the `ConversationsStyle` to the `Conversations` Component to customize the styling. @@ -328,7 +328,7 @@ List of properties exposed by ConversationStyle | privateGroupIconBackground | Sets the background of the status indicator representing private groups. | | passwordGroupIconBackground | Sets the background of the status indicator representing password protected groups. | -##### 2. Avatar Style +#### 2. Avatar Style To apply customized styles to the `Avatar` component in the `Conversations` Component, you can use the following code snippet. For more information, visit [Avatar Styles](/ui-kit/react/v4/avatar). @@ -367,7 +367,7 @@ export default ConversationsDemo; -##### 3. StatusIndicator Style +#### 3. StatusIndicator Style To apply customized styles to the Status Indicator component in the `Conversations` Component, you can use the following code snippet. For more information, visit [Status Indicator Styles](/ui-kit/react/v4/status-indicator). @@ -406,7 +406,7 @@ export default ConversationsDemo; -##### 4. Date Style +#### 4. Date Style To apply customized styles to the `Date` component in the `Conversations` Component, you can use the following code snippet. For more information, visit [Date Styles](/ui-kit/react/v4/date). @@ -445,7 +445,7 @@ export default ConversationsDemo; -##### 5. Badge Style +#### 5. Badge Style To apply customized styles to the `Badge` component in the `Conversations` Component, you can use the following code snippet. For more information, visit [Badge Styles](/ui-kit/react/v4/badge). @@ -464,7 +464,7 @@ border: "1px solid pink", -##### 6. Receipt Style +#### 6. Receipt Style To apply customized styles to the `receipt` component in the `Conversations` Component, you can use the following code snippet. For more information, visit [Receipts](/ui-kit/react/v4/receipt). @@ -485,7 +485,7 @@ deliveredIconTint:"yellow" -##### 7. Backdrop Style +#### 7. Backdrop Style To apply customized styles to the `Backdrop` component in the `Conversations` Component, you can use the following code snippet, you can use the following code snippet. For more information, visit [Backdrop Styles](/ui-kit/react/v4/backdrop). @@ -505,7 +505,7 @@ const backdropStyle = new BackdropStyle({ -##### 8. Delete Conversation Dialog Style +#### 8. Delete Conversation Dialog Style To apply customized styles to the `delete dialog` component in the `Conversations` Component, you can use the following code snippet. For more information, visit [Delete dialog Styles](/ui-kit/react/v4/confirm-dialog). @@ -525,7 +525,7 @@ borderRadius:"20px", -##### 9. LisItem Style +#### 9. LisItem Style To apply customized styles to the `ListItemStyle` component in the `Conversations` Component, you can use the following code snippet. For more information, visit [List Item](/ui-kit/react/v4/list-item). @@ -1258,7 +1258,7 @@ const getSubtitleView = (conversation: CometChat.Conversation) => { User-defined actions which appears for each conversation on mouseover. -##### Structure of CometChatOption +#### Structure of CometChatOption | Name | Description | | --------------- | -------------------------------------------------------------------------------------------------------------------------------------- | diff --git a/ui-kit/react/v4/create-group.mdx b/ui-kit/react/v4/create-group.mdx index 6753d81c9..314783cb5 100644 --- a/ui-kit/react/v4/create-group.mdx +++ b/ui-kit/react/v4/create-group.mdx @@ -73,7 +73,7 @@ export default function App() { [Actions](/ui-kit/react/v4/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. createClick +#### 1. createClick The `createClick` action is activated when you click the create Group button. This returns the created groups. You can override this action using the following code snippet. @@ -134,7 +134,7 @@ export default CreateGroupDemo; -##### 2. closeCallback +#### 2. closeCallback The `closeCallback` action is activated when you click the close button. You can override this action using the following code snippet. @@ -195,7 +195,7 @@ export default CreateGroupDemo; -##### 3. errorCallback +#### 3. errorCallback This action doesn't change the behavior of the component but rather listens for any errors that occur in the Groups component. @@ -310,7 +310,7 @@ To fit your app's design requirements, you can customize the appearance of the C Using **Style** you can **customize** the look and feel of the component in your app, These parameters typically control elements such as the **color**, **size**, **shape**, and **fonts** used within the component. -##### 1. CreateGroup Style +#### 1. CreateGroup Style You can set the `CreateGroupStyle` to the `Create Group` Component to customize the styling. diff --git a/ui-kit/react/v4/group-add-members.mdx b/ui-kit/react/v4/group-add-members.mdx index edd437a58..22727db3f 100644 --- a/ui-kit/react/v4/group-add-members.mdx +++ b/ui-kit/react/v4/group-add-members.mdx @@ -84,7 +84,7 @@ export default function App() { [Actions](/ui-kit/react/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -##### 1. onSelect +#### 1. onSelect The `onSelect` action is activated when you select the done icon while in selection mode. This returns a list of all the users that you have selected. @@ -163,7 +163,7 @@ export default AddMembersDemo; -##### 2. onAddMembersButtonClick +#### 2. onAddMembersButtonClick The `onAddMembersButtonClick` action is triggered when you click the add member button after choosing the users you wish to add in the group. By default, it returns the group GUID and an array of members to be added. However, you have the flexibility to override this event and tailor it to suit your needs using the following code snippet. @@ -247,7 +247,7 @@ export default AddMembersDemo; -##### 3. OnBack +#### 3. OnBack `OnBack` is triggered when you click on the back button of the Add Members component. You can override this action using the following code snippet. @@ -322,7 +322,7 @@ export default AddMembersDemo; -##### 4. onClose +#### 4. onClose `onClose` is triggered when you click on the close button of the Add Members component. You can override this action using the following code snippet. @@ -397,7 +397,7 @@ export default AddMembersDemo; -##### 5. onError +#### 5. onError This action doesn't change the behavior of the component but rather listens for any errors that occur in the Add Members component. @@ -478,7 +478,7 @@ export default AddMembersDemo; **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. UsersRequestBuilder +#### 1. UsersRequestBuilder The [UsersRequestBuilder](/sdk/javascript/retrieve-users) enables you to filter and customize the users list based on available parameters in UsersRequestBuilder. This feature allows you to create more specific and targeted queries when fetching users. The following are the parameters available in [UsersRequestBuilder](/sdk/javascript/retrieve-users) @@ -573,7 +573,7 @@ export default AddMembersDemo; -##### 2. SearchRequestBuilder +#### 2. SearchRequestBuilder The SearchRequestBuilder uses [UserRequestBuilder](/sdk/javascript/retrieve-users) enables you to filter and customize the search list based on available parameters in UserRequestBuilder. This feature allows you to keep uniformity between the displayed UserList and searched UserList. @@ -702,7 +702,7 @@ To fit your app's design requirements, you can customize the appearance of the A Using **Style** you can **customize** the look and feel of the component in your app, These parameters typically control elements such as the **color**, **size**, **shape**, and **fonts** used within the component. -##### 1. AddMembers Style +#### 1. AddMembers Style You can set the `AddMembersStyle` to the Add Members Component to customize the styling. @@ -845,7 +845,7 @@ List of properties exposed by AddMembersStyle: | **addMembersButtonTextFont** | Used to set add members button text font | `addMembersButtonTextFont?: string;` | | **padding** | Used to set padding | `padding?: string;` | -##### 2. Avatar Style +#### 2. Avatar Style To apply customized styles to the `Avatar` component in the Add Members Component, you can use the following code snippet. For further insights on `Avatar` Styles [refer](/ui-kit/react/v4/avatar#avatar-style) @@ -930,7 +930,7 @@ export default AddMembersDemo; -##### 3. LisItem Style +#### 3. LisItem Style To apply customized styles to the `ListItemStyle` component in the `Add Members` Component, you can use the following code snippet. For further insights on `ListItemStyle` Styles [refer](/ui-kit/react/v4/list-item) @@ -1015,7 +1015,7 @@ export default AddMembersDemo; -##### 4. StatusIndicator Style +#### 4. StatusIndicator Style To apply customized styles to the Status Indicator component in the Add Members Component, You can use the following code snippet. For further insights on Status Indicator Styles [refer](/ui-kit/react/v4/status-indicator) diff --git a/ui-kit/react/v4/group-banned-members.mdx b/ui-kit/react/v4/group-banned-members.mdx index 021d1828e..61fd97e2c 100644 --- a/ui-kit/react/v4/group-banned-members.mdx +++ b/ui-kit/react/v4/group-banned-members.mdx @@ -77,7 +77,7 @@ export default function App() { [Actions](/ui-kit/react/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -##### 1. onSelect +#### 1. onSelect The `onSelect` action is activated when you select the done icon while in selection mode. This returns a list of all the banned members that you have selected. @@ -159,7 +159,7 @@ export default BannedMembersDemo; -##### 2. onItemClick +#### 2. onItemClick The `OnItemClick` event is activated when you click on the Banned 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. @@ -242,7 +242,7 @@ export default BannedMembersDemo; -##### 3. OnBack +#### 3. OnBack `OnBack` is triggered when you click on the back button of the Banned Members component. You can override this action using the following code snippet. @@ -317,7 +317,7 @@ export default BannedMembersDemo; -##### 4. onClose +#### 4. onClose `onClose` is triggered when you click on the close button of the Banned Members component. You can override this action using the following code snippet. @@ -392,7 +392,7 @@ export default BannedMembersDemo; -##### 5. onError +#### 5. onError This action doesn't change the behavior of the component but rather listens for any errors that occur in the Banned Members component. @@ -473,7 +473,7 @@ export default BannedMembersDemo; **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. BannedMembersRequestBuilder +#### 1. BannedMembersRequestBuilder The [BannedMembersRequestBuilder](/sdk/javascript/group-kick-ban-members) enables you to filter and customize the Banned Members list based on available parameters in BannedMembersRequestBuilder. This feature allows you to create more specific and targeted queries when fetching banned members. The following are the parameters available in [BannedMembersRequestBuilder](/sdk/javascript/group-kick-ban-members) @@ -566,7 +566,7 @@ export default BannedMembersDemo; -##### 2. SearchRequestBuilder +#### 2. SearchRequestBuilder The SearchRequestBuilder uses [BannedMembersRequestBuilder](/sdk/javascript/group-kick-ban-members) enables you to filter and customize the search list based on available parameters in BannedMembersRequestBuilder. This feature allows you to keep uniformity between the displayed Banned Members list and searched Banned Members. @@ -669,7 +669,7 @@ To fit your app's design requirements, you can customize the appearance of the G Using **Style** you can **customize** the look and feel of the component in your app, These parameters typically control elements such as the **color**, **size**, **shape**, and **fonts** used within the component. -##### 1. BannedMembers Style +#### 1. BannedMembers Style You can set the `BannedMembersStyle` to the Banned Members Component to customize the styling. @@ -798,7 +798,7 @@ List of properties exposed by BannedMembersStyle | **unbanIconTint** | Used to set unban icon tint | `unbanIconTint?: string;` | | **padding** | Used to set padding | `padding?: string;` | -##### 2. Avatar Style +#### 2. Avatar Style To apply customized styles to the `Avatar` component in the Banned Members Component, you can use the following code snippet. For further insights on `Avatar` Styles [refer](/ui-kit/react/v4/avatar#avatar-style) @@ -889,7 +889,7 @@ export default BannedMembersDemo; -##### 3. LisItem Style +#### 3. LisItem Style To apply customized styles to the `ListItemStyle` component in the `Banned Members` Component, you can use the following code snippet. For further insights on `ListItemStyle` Styles [refer](/ui-kit/react/v4/list-item) @@ -980,7 +980,7 @@ export default BannedMembersDemo; -##### 4. StatusIndicator Style +#### 4. StatusIndicator Style To apply customized styles to the Status Indicator component in the Banned Members Component, You can use the following code snippet. For further insights on Status Indicator Styles [refer](/ui-kit/react/v4/status-indicator) diff --git a/ui-kit/react/v4/group-details.mdx b/ui-kit/react/v4/group-details.mdx index b853c135f..a1bfe26d1 100644 --- a/ui-kit/react/v4/group-details.mdx +++ b/ui-kit/react/v4/group-details.mdx @@ -78,7 +78,7 @@ export default function App() { [Actions](/ui-kit/react/v4/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. onClose +#### 1. onClose The `onClose` event is typically triggered when the close button is clicked and it carries a default action. However, with the following code snippet, you can effortlessly override this default operation. @@ -155,7 +155,7 @@ export default GroupDetailsDemo; -##### 2. onError +#### 2. onError This action doesn't change the behavior of the component but rather listens for any errors that occur in the Group Details component. @@ -298,7 +298,7 @@ To fit your app's design requirements, you can customize the appearance of the D Using **Style** you can **customize** the look and feel of the component in your app, These parameters typically control elements such as the **color**, **size**, **shape**, and **fonts** used within the component. -##### 1. Details Style +#### 1. Details Style You can set the `DetailsStyle` to the Details Component to customize the styling. @@ -406,7 +406,7 @@ List of properties exposed by DetailsStyle | **passwordGroupIconBackground** | Used to set password group icon background | `passwordGroupIconBackground?: string;` | | **padding** | Used to set padding | `padding?:string;` | -##### 2. LeaveDialog Style +#### 2. LeaveDialog Style You can set the `leaveDialogStyle` to the Details Component to customize the styling. @@ -495,7 +495,7 @@ export default GroupDetailsDemo; -##### 3. DeleteDialog Style +#### 3. DeleteDialog Style You can set the `deleteDialogStyle` to the Details Component to customize the styling. @@ -580,7 +580,7 @@ export default GroupDetailsDemo; -##### 4. Avatar Style +#### 4. Avatar Style To apply customized styles to the `Avatar` component in the Details Component, you can use the following code snippet. For further insights on `Avatar` Styles [refer](/ui-kit/react/v4/avatar#avatar-style) @@ -663,7 +663,7 @@ export default GroupDetailsDemo; -##### 5. LisItem Style +#### 5. LisItem Style To apply customized styles to the `ListItemStyle` component in the `Details` Component, you can use the following code snippet. For further insights on `ListItemStyle` Styles [refer](/ui-kit/react/v4/list-item) @@ -740,7 +740,7 @@ export default GroupDetailsDemo; -##### 6. StatusIndicator Style +#### 6. StatusIndicator Style To apply customized styles to the Status Indicator in the Details Component, You can use the following code snippet. For further insights on Status Indicator Styles [refer](/ui-kit/react/v4/status-indicator) @@ -823,7 +823,7 @@ export default GroupDetailsDemo; -##### 6. Backdrop Style +#### 6. Backdrop Style To apply customized styles to the `Backdrop` component in the `Details` Component, you can use the following code snippet, you can use the following code snippet. For further insights on `Backdrop` Styles [refer](/ui-kit/react/v4/backdrop) diff --git a/ui-kit/react/v4/group-members.mdx b/ui-kit/react/v4/group-members.mdx index d41c93caf..8781640dc 100644 --- a/ui-kit/react/v4/group-members.mdx +++ b/ui-kit/react/v4/group-members.mdx @@ -77,7 +77,7 @@ export default function App() { [Actions](/ui-kit/react/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -##### 1. onSelect +#### 1. onSelect The `onSelect` action is activated when you select the done icon while in selection mode. This returns a list of all the group members that you have selected. @@ -173,7 +173,7 @@ export default GroupMembersDemo; -##### 2. onItemClick +#### 2. onItemClick The `onItemClick` event is activated when you click on the Group Members List item. This action does not come with any predefined behavior. However, you have the flexibility to override this event and tailor it to suit your needs using the following code snippet. @@ -254,7 +254,7 @@ export default GroupMembersDemo; -##### 3. onBack +#### 3. onBack `OnBack` is triggered when you click on the back button of the Group Members component. You can override this action using the following code snippet. @@ -329,7 +329,7 @@ export default GroupMembersDemo; -##### 4. onClose +#### 4. onClose `onClose` is triggered when you click on the close button of the Group Members component. You can override this action using the following code snippet. @@ -404,7 +404,7 @@ export default GroupMembersDemo; -##### 5. onEmpty +#### 5. 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. @@ -479,7 +479,7 @@ export default GroupMembersDemo; -##### 6. onError +#### 6. onError This action doesn't change the behavior of the component but rather listens for any errors that occur in the Group Members component. @@ -559,7 +559,7 @@ export default GroupMembersDemo; **Filters** allow you to customize the data displayed in a list within a Component. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK. -##### 1. GroupMembersRequestBuilder +#### 1. GroupMembersRequestBuilder The [GroupMembersRequestBuilder](/sdk/javascript/retrieve-group-members) enables you to filter and customize the group members list based on available parameters in GroupMembersRequestBuilder. This feature allows you to create more specific and targeted queries when fetching groups. The following are the parameters available in [GroupMembersRequestBuilder](/sdk/javascript/retrieve-group-members) @@ -650,7 +650,7 @@ export default GroupMembersDemo; -##### 2. SearchRequestBuilder +#### 2. SearchRequestBuilder The SearchRequestBuilder uses [GroupMembersRequestBuilder](/sdk/javascript/retrieve-group-members) enables you to filter and customize the search list based on available parameters in GroupMembersRequestBuilder. This feature allows you to keep uniformity between the displayed Group Members List and searched Group Members List. @@ -796,7 +796,7 @@ To fit your app's design requirements, you can customize the appearance of the G Using **Style** you can **customize** the look and feel of the component in your app, These parameters typically control elements such as the **color**, **size**, **shape**, and **fonts** used within the component. -##### 1. GroupMembers Style +#### 1. GroupMembers Style You can set the `GroupMembersStyle` to the Group Members Component to customize the styling. @@ -924,7 +924,7 @@ List of properties exposed by GroupMembersStyle: | **passwordGroupIconBackground** | Used to set password group icon bg | `passwordGroupIconBackground?: string;` | | **padding** | Used to set padding | `padding?: string;` | -##### 2. GroupScope Style +#### 2. GroupScope Style You can set the `GroupScope` to the Group Members Component to customize the styling. @@ -1047,7 +1047,7 @@ List of properties exposed by ChangeScopeStyle: | **buttonBackground** | Used to set button background color | `buttonBackground?: string;` | | **closeIconTint** | Used to set close icon tint | `closeIconTint?: string;` | -##### 3. Avatar Style +#### 3. Avatar Style To apply customized styles to the `Avatar` component in the Group Members Component, you can use the following code snippet. For further insights on `Avatar` Styles [refer](/ui-kit/react/v4/avatar#avatar-style) @@ -1136,7 +1136,7 @@ export default GroupMembersDemo; -##### 4. ListItem Style +#### 4. ListItem Style To apply customized styles to the `ListItemStyle` component in the `Group Members` Component, you can use the following code snippet. For further insights on `ListItemStyle` Styles [refer](/ui-kit/react/v4/list-item) @@ -1225,7 +1225,7 @@ export default GroupMembersDemo; -##### 5. StatusIndicator Style +#### 5. StatusIndicator Style To apply customized styles to the Status Indicator component in the Group Members Component, You can use the following code snippet. For further insights on Status Indicator Styles [refer](/ui-kit/react/v4/status-indicator) diff --git a/ui-kit/react/v4/group-transfer-ownership.mdx b/ui-kit/react/v4/group-transfer-ownership.mdx index 6d37041ff..8a4ac6e31 100644 --- a/ui-kit/react/v4/group-transfer-ownership.mdx +++ b/ui-kit/react/v4/group-transfer-ownership.mdx @@ -95,7 +95,7 @@ export default function App() { [Actions](/ui-kit/react/v4/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. onTransferOwnership +#### 1. onTransferOwnership The `onTransferOwnership` action is activated when you select a group member and click on the transfer ownership submit button. you have the flexibility to override this event and tailor it to suit your needs using the following code snippet. @@ -182,7 +182,7 @@ export default TransferOwnerShipDemo; -##### 2. onClose +#### 2. onClose `onClose` is triggered when you click on the close button of the Transfer Ownership component. You can override this action using the following code snippet. @@ -261,7 +261,7 @@ export default TransferOwnerShipDemo; -##### 3. onError +#### 3. onError This action doesn't change the behavior of the component but rather listens for any errors that occur in the Transfer Ownership component. @@ -346,7 +346,7 @@ export default TransferOwnerShipDemo; **Filters** allow you to customize the data displayed in a list within a Component. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK. -##### 1. GroupMembersRequestBuilder +#### 1. GroupMembersRequestBuilder The [GroupMembersRequestBuilder](/sdk/javascript/retrieve-group-members) enables you to filter and customize the group members list based on available parameters in GroupMembersRequestBuilder. This feature allows you to create more specific and targeted queries when fetching groups. The following are the parameters available in [GroupMembersRequestBuilder](/sdk/javascript/retrieve-group-members) @@ -437,7 +437,7 @@ export default TransferOwnerShipDemo; -##### 2. SearchRequestBuilder +#### 2. SearchRequestBuilder The SearchRequestBuilder uses [GroupMembersRequestBuilder](/sdk/javascript/retrieve-group-members) enables you to filter and customize the search list based on available parameters in GroupMembersRequestBuilder. This feature allows you to keep uniformity between the displayed Group Members List and searched Group Members List. @@ -564,7 +564,7 @@ To fit your app's design requirements, you can customize the appearance of the T Using **Style** you can **customize** the look and feel of the component in your app, These parameters typically control elements such as the **color**, **size**, **shape**, and **fonts** used within the component. -##### 1. TransferOwnership Style +#### 1. TransferOwnership Style You can set the `TransferOwnershipStyle` to the Transfer Ownership Component to customize the styling. @@ -679,7 +679,7 @@ List of properties exposed by TransferOwnershipStyle: | **cancelButtonTextFont** | Used to set cancel button text font | `cancelButtonTextFont?: string;` | | **cancelButtonTextColor** | Used to set cancel button text color | `cancelButtonTextColor?: string;` | -##### 2. Avatar Style +#### 2. Avatar Style To apply customized styles to the `Avatar` component in the Transfer Ownership Component, you can use the following code snippet. For further insights on `Avatar` Styles [refer](/ui-kit/react/v4/avatar#avatar-style) @@ -774,7 +774,7 @@ export default TransferOwnerShipDemo; -##### 3. GroupMembers Style +#### 3. GroupMembers Style You can set the `GroupMembersStyle` to the Transfer Ownership Component to customize the styling, you can use the following code snippet. For further insights on `GroupMembers` Styles [refer](/ui-kit/react/v4/group-members#1-groupmembers-style) @@ -869,7 +869,7 @@ export default TransferOwnerShipDemo; -##### 4. ListItem Style +#### 4. ListItem Style To apply customized styles to the `ListItemStyle` component in the `Transfer Ownership` Component, you can use the following code snippet. For further insights on `ListItemStyle` Styles [refer](/ui-kit/react/v4/list-item) @@ -958,7 +958,7 @@ export default TransferOwnerShipDemo; -##### 5. StatusIndicator Style +#### 5. StatusIndicator Style To apply customized styles to the Status Indicator component in the Transfer Ownership Component, You can use the following code snippet. For further insights on Status Indicator Styles [refer](/ui-kit/react/v4/status-indicator) diff --git a/ui-kit/react/v4/groups-with-messages.mdx b/ui-kit/react/v4/groups-with-messages.mdx index 223430d21..d14fbf93f 100644 --- a/ui-kit/react/v4/groups-with-messages.mdx +++ b/ui-kit/react/v4/groups-with-messages.mdx @@ -59,7 +59,7 @@ export default function App() { [Actions](/ui-kit/react/v4/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. onError +#### 1. onError This action doesn't change the behavior of the component but rather listens for any errors that occur in the GroupsWithMessages component. @@ -296,7 +296,7 @@ To fit your app's design requirements, you have the ability to customize the app Using **Style** you can **customize** the look and feel of the component in your app, These parameters typically control elements such as the **color**, **size**, **shape**, and **fonts** used within the component. -##### 1. GroupsWithMessages Style +#### 1. GroupsWithMessages Style You can set the `groupsWithMessagesStyle` to the GroupsWithMessages Component to customize the styling. @@ -478,7 +478,7 @@ These are a set of **small functional customizations** that allow you to **fine- you can utilize the `group` method with a [Group](/sdk/javascript/create-group) object as input to the GroupsWithMessages component. This will automatically direct you to the [Messages](/ui-kit/react/v4/messages) component for the specified `Group`. -##### 1. Group +#### 1. Group @@ -543,7 +543,7 @@ Below is a list of customizations along with corresponding code snippets: *** -##### Components +#### Components Nearly all functionality customizations available for a Component are also available for the composite component. Using [Configuration](#configurations), you can modify the properties of its components to suit your needs. diff --git a/ui-kit/react/v4/groups.mdx b/ui-kit/react/v4/groups.mdx index 03eafb83a..5910635c3 100644 --- a/ui-kit/react/v4/groups.mdx +++ b/ui-kit/react/v4/groups.mdx @@ -66,7 +66,7 @@ export default function App() { [Actions](/ui-kit/react/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -##### 1. onSelect +#### 1. onSelect The `onSelect` action is activated when you select the done icon while in selection mode. This returns the `group` object along with the boolean flag `selected` to indicate if the group was selected or unselected. @@ -126,7 +126,7 @@ export default GroupsDemo; -##### 2. onItemClick +#### 2. onItemClick The `onItemClick` event is activated when you click on the Group List item. This action does not come with any predefined behavior. However, you have the flexibility to override this event and tailor it to suit your needs using the following code snippet. @@ -172,7 +172,7 @@ export default GroupsDemo; -##### 3. onError +#### 3. onError This action doesn't change the behavior of the component but rather listens for any errors that occur in the Groups component. @@ -222,7 +222,7 @@ export default GroupsDemo; **Filters** allow you to customize the data displayed in a list within a Component. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK. -##### 1. GroupsRequestBuilder +#### 1. GroupsRequestBuilder The [GroupsRequestBuilder](/sdk/javascript/retrieve-groups) enables you to filter and customize the group list based on available parameters in [GroupsRequestBuilder](/sdk/javascript/retrieve-groups). This feature allows you to create more specific and targeted queries when fetching groups. The following are the parameters available in [GroupsRequestBuilder](/sdk/javascript/retrieve-groups) @@ -287,7 +287,7 @@ export default GroupsDemo; -##### 2. SearchRequestBuilder +#### 2. SearchRequestBuilder The SearchRequestBuilder uses [GroupsRequestBuilder](/sdk/javascript/retrieve-groups) enables you to filter and customize the search list based on available parameters in GroupsRequestBuilder. This feature allows you to keep uniformity between the displayed Groups List and searched Group List. @@ -362,7 +362,7 @@ To fit your app's design requirements, you can customize the appearance of the G Using **Style** you can **customize** the look and feel of the component in your app, These parameters typically control elements such as the **color**, **size**, **shape**, and **fonts** used within the component. -##### 1. Groups Style +#### 1. Groups Style You can set the `GroupsStyle` to the Groups Component to customize the styling. @@ -448,7 +448,7 @@ List of properties exposed by GroupsStyle | **subTitleTextFont** | Used to customise the font of the subtitle text. | `subTitleTextFont?: string;` | | **subTitleTextColor** | Used to customise the color of the subtitle text. | `subTitleTextColor?: string;` | -##### 2. Avatar Style +#### 2. Avatar Style To apply customized styles to the `Avatar` component in the Groups Component, you can use the following code snippet. For further insights on `Avatar` Styles [refer](/ui-kit/react/v4/avatar#avatar-style) @@ -503,7 +503,7 @@ export default GroupsDemo; -##### 3. StatusIndicator Style +#### 3. StatusIndicator Style To apply customized styles to the Status Indicator component in the Groups Component, You can use the following code snippet. For further insights on Status Indicator Styles [refer](/ui-kit/react/v4/status-indicator) @@ -552,7 +552,7 @@ export default GroupsDemo; -##### 4. ListItem Style +#### 4. ListItem Style To apply customized styles to the `ListItemStyle` component in the `Groups` Component, you can use the following code snippet. For further insights on `ListItemStyle` Styles [refer](/ui-kit/react/v4/list-item) diff --git a/ui-kit/react/v4/incoming-call.mdx b/ui-kit/react/v4/incoming-call.mdx index df61c07a7..94d2ded33 100644 --- a/ui-kit/react/v4/incoming-call.mdx +++ b/ui-kit/react/v4/incoming-call.mdx @@ -64,7 +64,7 @@ export default function App() { [Actions](/ui-kit/react/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -##### 1. onAccept +#### 1. onAccept `onAccept` is triggered when you click the accept button of the `Incoming Call` component. You can override this action using the following code snippet. @@ -111,7 +111,7 @@ export default IncomingCallsDemo; -##### 2. onDecline +#### 2. onDecline `onDecline` is triggered when you click the Decline button of the `Incoming Call` component. You can override this action using the following code snippet. @@ -158,7 +158,7 @@ export default IncomingCallsDemo; -##### 3. onError +#### 3. onError This action doesn't change the behavior of the component but rather listens for any errors that occur in the Incoming Call component. @@ -277,7 +277,7 @@ To fit your app's design requirements, you can customize the appearance of the I Using Style you can customize the look and feel of the component in your app, These parameters typically control elements such as the color, size, shape, and fonts used within the component. -##### 1. IncomingCall Style +#### 1. IncomingCall Style To customize the appearance, you can assign a `IncomingCallStyle` object to the `Incoming Call` component. @@ -368,7 +368,7 @@ The following properties are exposed by IncomingCallStyle: | **declineButtonBorderRadius** | Used to set decline button border radius | `declineButtonBorderRadius?: string;` | | **declineButtonBorder** | Used to set decline button border | `declineButtonBorder?: string;` | -##### 2. Avatar Style +#### 2. Avatar Style If you want to apply customized styles to the `Avatar` component within the `Incoming Call` Component, you can use the following code snippet. For more information you can refer [Avatar Styles](/ui-kit/react/v4/avatar#avatar-style). @@ -431,7 +431,7 @@ export default IncomingCallsDemo; -##### 3. ListItem Style +#### 3. ListItem Style If you want to apply customized styles to the `ListItemStyle` component within the `Incoming Call` Component, you can use the following code snippet. For more information, you can refer [ListItem Styles](/ui-kit/react/v4/list-item#listitemstyle). diff --git a/ui-kit/react/v4/join-protected-group.mdx b/ui-kit/react/v4/join-protected-group.mdx index 7d065d71e..7ff0effb7 100644 --- a/ui-kit/react/v4/join-protected-group.mdx +++ b/ui-kit/react/v4/join-protected-group.mdx @@ -83,7 +83,7 @@ export default function App() { [Actions](/ui-kit/react/v4/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. joinClick +#### 1. joinClick The `joinClick` action is activated when you click the join Group button. This returns the join groups. @@ -163,7 +163,7 @@ export default JoinProtectedGroupDemo; -##### 2. errorCallback +#### 2. errorCallback This action doesn't change the behavior of the component but rather listens for any errors that occur in the Groups component. @@ -295,7 +295,7 @@ To fit your app's design requirements, you can customize the appearance of the J Using **Style** you can **customize** the look and feel of the component in your app, These parameters typically control elements such as the **color**, **size**, **shape**, and **fonts** used within the component. -##### 1. JoinGroup Style +#### 1. JoinGroup Style You can set the `JoinGroupStyle` to the `Join Group` Component to customize the styling. diff --git a/ui-kit/react/v4/message-composer.mdx b/ui-kit/react/v4/message-composer.mdx index 8c9c13d5a..a49d1ccaf 100644 --- a/ui-kit/react/v4/message-composer.mdx +++ b/ui-kit/react/v4/message-composer.mdx @@ -77,7 +77,7 @@ export default function App() { [Actions](/ui-kit/react/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -##### 1. OnSendButtonClick +#### 1. OnSendButtonClick The `OnSendButtonClick` event gets activated when the send message button is clicked. It has a predefined function of sending messages entered in the composer `EditText`. However, you can overide this action with the following code snippet. @@ -113,7 +113,7 @@ import { CometChatMessageComposer } from "@cometchat/chat-uikit-react"; -##### 2. onError +#### 2. onError This action doesn't change the behavior of the component but rather listens for any errors that occur in the MessageList component. @@ -224,7 +224,7 @@ To fit your app's design requirements, you can customize the appearance of the M Using Style you can customize the look and feel of the component in your app, These parameters typically control elements such as the color, size, shape, and fonts used within the component. -##### 1. MessageComposer Style +#### 1. MessageComposer Style To modify the styling, you can apply the MessageComposerStyle to the MessageComposer Component using the `messageComposerStyle` property. @@ -299,7 +299,7 @@ The following properties are exposed by MessageComposerStyle: | **closePreviewTint** | used to set close preview color | `closePreviewTint?: string;` | | **maxInputHeight** | used to set max input height | `maxInputHeight?: string;` | -##### 2. MediaRecorder Style +#### 2. MediaRecorder Style To customize the styles of the MediaRecorder component within the MessageComposer Component, use the `mediaRecorderStyle` property. For more details, please refer to [MediaRecorder](/ui-kit/react/v4/media-recorder) styles. @@ -339,7 +339,7 @@ import { CometChatMessageComposer, MediaRecorderStyle } from "@cometchat/chat-ui -##### 3. MentionsWarning Style +#### 3. MentionsWarning Style To customize the styles of the MentionsWarning within the MessageComposer Component, use the `mentionsWarningStyle` property. diff --git a/ui-kit/react/v4/message-header.mdx b/ui-kit/react/v4/message-header.mdx index 94c6eb2b4..0a9cec485 100644 --- a/ui-kit/react/v4/message-header.mdx +++ b/ui-kit/react/v4/message-header.mdx @@ -75,7 +75,7 @@ export default function App() { [Actions](/ui-kit/react/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -##### 1. OnBack +#### 1. OnBack `OnBack` is triggered when you click on the back button of the Message Header component. You can override this action using the following code snippet. @@ -161,7 +161,7 @@ export default MessageHeaderDemo; *** -##### 2. OnError +#### 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. @@ -269,7 +269,7 @@ To fit your app's design requirements, you can customize the appearance of the M Using Style you can customize the look and feel of the component in your app, These parameters typically control elements such as the color, size, shape, and fonts used within the component. -##### 1. MessageHeader Style +#### 1. MessageHeader Style To customize the appearance, you can assign a `MessageHeaderStyle` object to the `MessageHeader` component. @@ -388,7 +388,7 @@ The properties exposed by `MessageHeaderStyle` are as follows: | **privateGroupIconBackground** | Used to set private groups icon backgound | `privateGroupIconBackground?: string` | | **passwordGroupIconBackground** | Used to set protected groups icon backgound | `passwordGroupIconBackground?: string` | -##### 2. Avatar Style +#### 2. Avatar Style If you want to apply customized styles to the `Avatar` component within the `MessageHeader` Component, you can use the following code snippet. For more information you can refer [Avatar Styles](/ui-kit/react/v4/avatar#avatar-style). @@ -474,7 +474,7 @@ export function MessageHeaderDemo() { -##### 3. ListItem Style +#### 3. ListItem Style If you want to apply customized styles to the `ListItemStyle` component within the `MessageHeader` Component, you can use the following code snippet. For more information, you can refer [ListItem Styles](/ui-kit/react/v4/list-item#listitemstyle). @@ -557,7 +557,7 @@ export function MessageHeaderDemo() { -##### 4. StatusIndicator Style +#### 4. StatusIndicator Style If you want to apply customized styles to the `Status Indicator` component within the `MessageHeader` Component, you can use the following code snippet. For more information you can refer [StatusIndicator Styles](/ui-kit/react/v4/status-indicator). diff --git a/ui-kit/react/v4/message-information.mdx b/ui-kit/react/v4/message-information.mdx index 652cadc25..ef4e3cb1c 100644 --- a/ui-kit/react/v4/message-information.mdx +++ b/ui-kit/react/v4/message-information.mdx @@ -92,7 +92,7 @@ export default function App() { [Actions](/ui-kit/react/v4/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. onClose +#### 1. onClose The `onClose` event is typically triggered when the close button is clicked and it carries a default action. However, with the following code snippet, you can effortlessly override this default operation. @@ -149,7 +149,7 @@ export default MessageInformationDemo; -##### 2. onError +#### 2. onError This action doesn't change the behavior of the component but rather listens for any errors that occur in the MessageInformation component. @@ -228,7 +228,7 @@ To fit your app's design requirements, you can customize the appearance of the M Using Style you can customize the look and feel of the component in your app, These parameters typically control elements such as the color, size, shape, and fonts used within the component. -##### 1. MessageInformationStyle +#### 1. MessageInformationStyle To modify the styling, you can apply the MessageInformationStyle to the MessageInformation Component using the `messageInformationStyle` property. @@ -317,7 +317,7 @@ The following properties are exposed by MessageInformationStyle: *** -##### 2. ListItemStyle +#### 2. ListItemStyle To apply customized styles to the `ListItemStyle` component in the MessageInformation Component, you can use the following code snippet. For further insights on `ListItemStyle` Styles [refer](/ui-kit/react/v4/list-item) diff --git a/ui-kit/react/v4/message-list.mdx b/ui-kit/react/v4/message-list.mdx index b2726833d..94534796f 100644 --- a/ui-kit/react/v4/message-list.mdx +++ b/ui-kit/react/v4/message-list.mdx @@ -80,7 +80,7 @@ To fetch messages for a specific entity, you need to supplement it with `User` o [Actions](/ui-kit/react/v4/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. onThreadRepliesClick +#### 1. onThreadRepliesClick `onThreadRepliesClick` is triggered when you click on the threaded message bubble. The `onThreadRepliesClick` action doesn't have a predefined behavior. You can override this action using the following code snippet. @@ -155,7 +155,7 @@ export function MessageListDemo() { -##### 2. onError +#### 2. onError This action doesn't change the behavior of the component but rather listens for any errors that occur in the MessageList component. @@ -442,7 +442,7 @@ To fit your app's design requirements, you can customize the appearance of the M Using Style you can customize the look and feel of the component in your app, These parameters typically control elements such as the color, size, shape, and fonts used within the component. -##### 1. MessageList Style +#### 1. MessageList Style You can set the MessageListStyle to the MessageList Component Component to customize the styling. @@ -557,7 +557,7 @@ List of properties exposed by MessageListStyle | **threadReplyUnreadTextFont** | used to set thread reply unread text font | `threadReplyUnreadTextFont?: string;` | | **threadReplyUnreadBackground** | used to set thread reply unread background | `threadReplyUnreadBackground?: string;` | -##### 2. Avatar Style +#### 2. Avatar Style To apply customized styles to the `Avatar` component in the `Message List` Component, you can use the following code snippet. For further insights on `Avatar` Styles [refer](/ui-kit/react/v4/avatar#avatar-style) @@ -642,7 +642,7 @@ export function MessageListDemo() { -##### 3. DateSeparator Style +#### 3. DateSeparator Style To apply customized styles to the `DateSeparator` in the `Message list` Component, you can use the following code snippet. @@ -721,7 +721,7 @@ export function MessageListDemo() { -##### 4. EmojiKeyboard Style +#### 4. EmojiKeyboard Style To apply customized styles to the `EmojiKeyBoard` in the `Message list` Component, you can use the following code snippet. diff --git a/ui-kit/react/v4/messages.mdx b/ui-kit/react/v4/messages.mdx index c7a635a0a..18dc49dc1 100644 --- a/ui-kit/react/v4/messages.mdx +++ b/ui-kit/react/v4/messages.mdx @@ -318,7 +318,7 @@ To fit your app's design requirements, you can customize the appearance of the M Using Style you can customize the look and feel of the component in your app, These parameters typically control elements such as the color, size, shape, and fonts used within the component. -##### 1. Messages Style +#### 1. Messages Style You can customize the appearance of the Messages Component by applying the MessagesStyle to it using the following code snippet. @@ -411,7 +411,7 @@ List of properties exposed by MessagesStyle | **height** | Sets the height of the component | `height:"string"` | | **width** | Sets the width of the component | `width:"string"` | -##### 2. Component's Styles +#### 2. Component's Styles Being a [Composite component](/ui-kit/react/v4/components-overview#composite-components), the Messages Component allows you to customize the styles of its components using their respective Configuration objects. diff --git a/ui-kit/react/v4/ongoing-call.mdx b/ui-kit/react/v4/ongoing-call.mdx index 459679ed3..bbad6388f 100644 --- a/ui-kit/react/v4/ongoing-call.mdx +++ b/ui-kit/react/v4/ongoing-call.mdx @@ -60,7 +60,7 @@ export default function App() { [Actions](/ui-kit/react/v4/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. onError +#### 1. onError This action doesn't change the behavior of the component but rather listens for any errors that occur in the Ongoing component. @@ -216,7 +216,7 @@ To fit your app's design requirements, you can customize the appearance of the O Using Style you can customize the look and feel of the component in your app, These parameters typically control elements such as the color, size, shape, and fonts used within the component. -##### 1. Ongoing Call Style +#### 1. Ongoing Call Style To customize the appearance, you can assign a `CallscreenStyle` object to the `Ongoing Call` component. diff --git a/ui-kit/react/v4/outgoing-call.mdx b/ui-kit/react/v4/outgoing-call.mdx index c147f73ae..a63880adc 100644 --- a/ui-kit/react/v4/outgoing-call.mdx +++ b/ui-kit/react/v4/outgoing-call.mdx @@ -83,7 +83,7 @@ export default function App() { [Actions](/ui-kit/react/v4/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. onCloseClicked +#### 1. onCloseClicked The `onCloseClicked` event gets activated when the close button is clicked. It does not have a default behavior. However, you can override its behavior using the following code snippet. @@ -182,7 +182,7 @@ export default OutgoingCallDemo; -##### 2. onError +#### 2. onError This action doesn't change the behavior of the component but rather listens for any errors that occur in the Outgoing Call component. @@ -299,7 +299,7 @@ To fit your app's design requirements, you can customize the appearance of the O Using Style you can customize the look and feel of the component in your app, These parameters typically control elements such as the color, size, shape, and fonts used within the component. -##### 1. OutgoingCall Style +#### 1. OutgoingCall Style To customize the appearance, you can assign a `OutgoingCallStyle` object to the `Outgoing Call` component. @@ -445,7 +445,7 @@ The following properties are exposed by OutgoingCallStyle: *** -##### 2. Avatar Style +#### 2. Avatar Style If you want to apply customized styles to the `Avatar` component within the `Outgoing Call` Component, you can use the following code snippet. For more information you can refer [Avatar Styles](/ui-kit/react/v4/avatar#avatar-style). diff --git a/ui-kit/react/v4/overview.mdx b/ui-kit/react/v4/overview.mdx index 38007861b..e3ae577c1 100644 --- a/ui-kit/react/v4/overview.mdx +++ b/ui-kit/react/v4/overview.mdx @@ -11,7 +11,7 @@ With CometChat's **UI Kit** for React, you can effortlessly build a chat app equ -##### **Before Getting Started** +#### **Before Getting Started** Before you begin, it's essential to grasp the fundamental concepts and features offered by CometChat's APIs, SDK, and UI Kit. You can find detailed information in [Key Concepts](/fundamentals/key-concepts) documentation. diff --git a/ui-kit/react/v4/reaction-info.mdx b/ui-kit/react/v4/reaction-info.mdx index 53ca3989e..5cb140eea 100644 --- a/ui-kit/react/v4/reaction-info.mdx +++ b/ui-kit/react/v4/reaction-info.mdx @@ -163,7 +163,7 @@ To fit your app's design requirements, you can customize the appearance of the R Using Style you can customize the look and feel of the component in your app, These parameters typically control elements such as the color, size, shape, and fonts used within the component. -##### 1. reactionInfoStyle +#### 1. reactionInfoStyle To customize the appearance, you can assign a `reactionInfoStyle` object to the `Reactions Info` component. diff --git a/ui-kit/react/v4/reaction-list.mdx b/ui-kit/react/v4/reaction-list.mdx index 7045042fd..cc746a790 100644 --- a/ui-kit/react/v4/reaction-list.mdx +++ b/ui-kit/react/v4/reaction-list.mdx @@ -92,7 +92,7 @@ export default function App() { [Actions](/ui-kit/react/v4/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. reactionItemClicked +#### 1. reactionItemClicked The `reactionItemClicked` event gets activated when a user clicks on a reaction item within the CometChat Reaction List component. This event provides a way to capture and respond to user interactions with specific reactions. @@ -218,7 +218,7 @@ To fit your app's design requirements, you can customize the appearance of the R Using Style you can customize the look and feel of the component in your app, These parameters typically control elements such as the color, size, shape, and fonts used within the component. -##### 1. reactionListStyle +#### 1. reactionListStyle To customize the appearance, you can assign a `reactionListStyle` object to the `Reactions List` component. @@ -305,7 +305,7 @@ List of properties exposed by ReactionsListStyle *** -##### 2. Avatar Style +#### 2. Avatar Style If you want to apply customized styles to the `Avatar` component within the `Reaction List` Component, you can use the following code snippet. For more information you can refer [Avatar Styles](/ui-kit/react/v4/avatar#avatar-style). @@ -362,7 +362,7 @@ export default ReactionListDemo; -##### 3. ListItem Style +#### 3. ListItem Style If you want to apply customized styles to the `ListItemStyle` component within the `Reaction List` Component, you can use the following code snippet. For more information, you can refer [ListItem Styles](/ui-kit/react/v4/list-item#listitemstyle). diff --git a/ui-kit/react/v4/reaction.mdx b/ui-kit/react/v4/reaction.mdx index cfd9f09a4..1c0dc33d7 100644 --- a/ui-kit/react/v4/reaction.mdx +++ b/ui-kit/react/v4/reaction.mdx @@ -88,7 +88,7 @@ export default function App() { [Actions](/ui-kit/react/v4/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. reactionClick +#### 1. reactionClick `reactionClick` is triggered when you click on each Reaction in the footer view of message bubble. You can override this action using the following code snippet. @@ -217,7 +217,7 @@ To fit your app's design requirements, you can customize the appearance of the R Using Style you can customize the look and feel of the component in your app, These parameters typically control elements such as the color, size, shape, and fonts used within the component. -##### 1. reactionsStyle +#### 1. reactionsStyle To customize the appearance, you can assign a `reactionsStyle` object to the `Reactions` component. diff --git a/ui-kit/react/v4/threaded-messages.mdx b/ui-kit/react/v4/threaded-messages.mdx index a159d6ffe..8e7496d49 100644 --- a/ui-kit/react/v4/threaded-messages.mdx +++ b/ui-kit/react/v4/threaded-messages.mdx @@ -217,7 +217,7 @@ To fit your app's design requirements, you can customize the appearance of the c Using Style you can customize the look and feel of the component in your app, These parameters typically control elements such as the color, size, shape, and fonts used within the component. -##### 1. threadedMessagesStyle +#### 1. threadedMessagesStyle To modify the styling, you can apply the ThreadedMessageStyle to the ThreadedMessage Component using the `threadedMessagesStyle` property. diff --git a/ui-kit/react/v4/user-member-wrapper.mdx b/ui-kit/react/v4/user-member-wrapper.mdx index 6081f34a4..e31603ee0 100644 --- a/ui-kit/react/v4/user-member-wrapper.mdx +++ b/ui-kit/react/v4/user-member-wrapper.mdx @@ -58,7 +58,7 @@ export default function App() { [Actions](/ui-kit/react/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -##### 1. onItemClick +#### 1. onItemClick `onItemClick` is triggered when you click on a ListItem of UserMemberWrapper component. You can override this action using the following code snippet. @@ -85,7 +85,7 @@ export default UserMemberWrapperDemo; *** -##### 2. onError +#### 2. onError This action doesn't change the behavior of the component but rather listens for any errors that occur in the UserMemberWrapper component. @@ -112,7 +112,7 @@ export default UserMemberWrapperDemo; *** -##### 3. onEmpty +#### 3. onEmpty This action allows you to specify a callback function to be executed when a certain condition, typically the absence of data or content, is met within the component or element. @@ -218,7 +218,7 @@ To fit your app's design requirements, you can customize the appearance of the ` Using Style you can customize the look and feel of the component in your app, These parameters typically control elements such as the color, size, shape, and fonts used within the component. -##### 1. Avatar Style +#### 1. Avatar Style If you want to apply customized styles to the `Avatar` component within the `UserMemberWrapper` Component, you can use the following code snippet. For more information you can refer [Avatar Styles](/ui-kit/react/v4/avatar#avatar-style). @@ -257,7 +257,7 @@ export default UserMemberWrapperDemo; *** -##### 2. StatusIndicator Style +#### 2. StatusIndicator Style To apply customized styles to the Status Indicator component in the `UserMemberWrapper` Component, you can use the following code snippet. For further insights on Status Indicator Styles [refer](/ui-kit/react/v4/status-indicator) diff --git a/ui-kit/react/v4/users-details.mdx b/ui-kit/react/v4/users-details.mdx index 6b7643c54..65b64a2c8 100644 --- a/ui-kit/react/v4/users-details.mdx +++ b/ui-kit/react/v4/users-details.mdx @@ -75,7 +75,7 @@ export default function App() { [Actions](/ui-kit/react/v4/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. onClose +#### 1. onClose The `onClose` event is typically triggered when the close button is clicked and it carries a default action. However, with the following code snippet, you can effortlessly override this default operation. @@ -135,7 +135,7 @@ export default UserDetailsDemo; -##### 2. onError +#### 2. onError This action doesn't change the behavior of the component but rather listens for any errors that occur in the User component. @@ -255,7 +255,7 @@ To fit your app's design requirements, you can customize the appearance of the d Using Style you can customize the look and feel of the component in your app, These parameters typically control elements such as the color, size, shape, and fonts used within the component. -##### 1. Details Style +#### 1. Details Style You can set the `DetailsStyle` to the User Details Component to customize the styling. @@ -338,7 +338,7 @@ List of properties exposed by DetailsStyle | **subtitleTextColor** | Sets the color of the subtitle text | `subtitleTextColor?: string;` | | **closeButtonIconTint** | Sets the color of the close icon of the component | `closeButtonIconTint?: string;` | -##### 2. Avatar Style +#### 2. Avatar Style To apply customized styles to the `Avatar` component in the Details Component, you can use the following code snippet. For further insights on `Avatar` Styles [refer](/ui-kit/react/v4/avatar#avatar-style) @@ -407,7 +407,7 @@ export default UserDetailsDemo; -##### 3. StatusIndicator Style +#### 3. StatusIndicator Style To apply customized styles to the Status Indicator component in the Details Component, You can use the following code snippet. For further insights on Status Indicator Styles [refer](/ui-kit/react/v4/status-indicator) @@ -480,7 +480,7 @@ export default UserDetailsDemo; -##### 4. ListItem Style +#### 4. ListItem Style To apply customized styles to the `ListItemStyle` component in the `Details` Component, you can use the following code snippet. For further insights on `ListItemStyle` Styles [refer](/ui-kit/react/v4/list-item) @@ -547,7 +547,7 @@ export default UserDetailsDemo; -##### 5. Backdrop Style +#### 5. Backdrop Style To apply customized styles to the `Backdrop` component in the `Details` Component, you can use the following code snippet, you can use the following code snippet. For further insights on `Backdrop` Styles [refer](/ui-kit/react/v4/backdrop) diff --git a/ui-kit/react/v4/users-with-messages.mdx b/ui-kit/react/v4/users-with-messages.mdx index dbd164c11..1c403337f 100644 --- a/ui-kit/react/v4/users-with-messages.mdx +++ b/ui-kit/react/v4/users-with-messages.mdx @@ -59,7 +59,7 @@ export default function App() { [Actions](/ui-kit/react/v4/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. onError +#### 1. onError This action doesn't change the behavior of the component but rather listens for any errors that occur in the UserWithMessages component. @@ -300,7 +300,7 @@ To fit your app's design requirements, you have the ability to customize the app Using **Style** you can **customize** the look and feel of the component in your app, These parameters typically control elements such as the **color**, **size**, **shape**, and **fonts** used within the component. -##### 1. UsersWithMessages Style +#### 1. UsersWithMessages Style You can set the `UsersWithMessagesStyle` to the UsersWithMessages Component to customize the styling. @@ -480,7 +480,7 @@ These are a set of **small functional customizations** that allow you to **fine- you can utilize the `user` method with a [User](/sdk/javascript/user-management) object as input to the UsersWithMessages component. This will automatically direct you to the [Messages](/ui-kit/react/v4/messages) component for the specified `User`. -##### user +#### user @@ -543,7 +543,7 @@ Below is a list of customizations along with corresponding code snippets: *** -##### Components +#### Components Nearly all functionality customizations available for a Component are also available for the composite component. Using [Configuration](#configurations), you can modify the properties of its components to suit your needs. diff --git a/ui-kit/react/v4/users.mdx b/ui-kit/react/v4/users.mdx index 144f360c2..b26a26c2e 100644 --- a/ui-kit/react/v4/users.mdx +++ b/ui-kit/react/v4/users.mdx @@ -63,7 +63,7 @@ export default function App() { [Actions](/ui-kit/react/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -##### 1. onSelect +#### 1. onSelect The `onSelect` action is activated when you select the done icon while in selection mode. This returns a list of all the users that you have selected. @@ -122,7 +122,7 @@ export default UsersDemo; -##### 2. onItemClick +#### 2. onItemClick The `OnItemClick` event is activated when you click on the UserList 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. @@ -166,7 +166,7 @@ export default UsersDemo; -##### 3. onEmpty +#### 3. onEmpty This action allows you to specify a callback function to be executed when a certain condition, typically the absence of data or content, is met within the component or element. @@ -210,7 +210,7 @@ export default UsersDemo; -##### 4. onError +#### 4. onError This action doesn't change the behavior of the component but rather listens for any errors that occur in the User component. @@ -258,7 +258,7 @@ export default UsersDemo; **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. UserRequestBuilder +#### 1. UserRequestBuilder The [UserRequestBuilder](/sdk/javascript/retrieve-users) enables you to filter and customize the user list based on available parameters in UserRequestBuilder. This feature allows you to create more specific and targeted queries when fetching users. The following are the parameters available in [UserRequestBuilder](/sdk/javascript/retrieve-users) @@ -325,7 +325,7 @@ export default UsersDemo; -##### 2. SearchRequestBuilder +#### 2. SearchRequestBuilder The SearchRequestBuilder uses [UserRequestBuilder](/sdk/javascript/retrieve-users) enables you to filter and customize the search list based on available parameters in UserRequestBuilder. This feature allows you to keep uniformity between the displayed UserList and searched UserList. @@ -398,7 +398,7 @@ To fit your app's design requirements, you can customize the appearance of the U Using **Style** you can **customize** the look and feel of the component in your app, These parameters typically control elements such as the **color**, **size**, **shape**, and **fonts** used within the component. -##### 1. Users Style +#### 1. Users Style You can set the `UsersStyle` to the Users Component to customize the styling. @@ -482,7 +482,7 @@ List of properties exposed by UsersStyle | **sectionHeaderTextFont** | Used to customise the font of the section header text. | `sectionHeaderTextFont?: string;` | | **sectionHeaderTextColor** | Used to customise the color of the section header text. | `sectionHeaderTextColor?: string;` | -##### 2. Avatar Style +#### 2. Avatar Style To apply customized styles to the `Avatar` component in the Users Component, you can use the following code snippet. For further insights on `Avatar` Styles [refer](/ui-kit/react/v4/avatar#avatar-style) @@ -536,7 +536,7 @@ export default UsersDemo; -##### 3. StatusIndicator Style +#### 3. StatusIndicator Style To apply customized styles to the Status Indicator component in the Users Component, You can use the following code snippet. For further insights on Status Indicator Styles [refer](/ui-kit/react/v4/status-indicator) @@ -583,7 +583,7 @@ export default UsersDemo; -##### 4. LisItem Style +#### 4. LisItem Style To apply customized styles to the `ListItemStyle` component in the `Users` Component, you can use the following code snippet. For further insights on `ListItemStyle` Styles [refer](/ui-kit/react/v4/list-item) diff --git a/ui-kit/react/v5/call-buttons.mdx b/ui-kit/react/v5/call-buttons.mdx index 66115e386..2a44b105f 100644 --- a/ui-kit/react/v5/call-buttons.mdx +++ b/ui-kit/react/v5/call-buttons.mdx @@ -59,7 +59,7 @@ export default function App() { [Actions](/ui-kit/react/v5/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. onError +#### 1. onError This action doesn't change the behavior of the component but rather listens for any errors that occur in the Call Button component. diff --git a/ui-kit/react/v5/call-logs.mdx b/ui-kit/react/v5/call-logs.mdx index 070119c67..94da06d47 100644 --- a/ui-kit/react/v5/call-logs.mdx +++ b/ui-kit/react/v5/call-logs.mdx @@ -62,7 +62,7 @@ export default function App() { [Actions](/ui-kit/react/v5/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -##### 1. onItemClick +#### 1. onItemClick `onItemClick` is a callback function which triggers when a call log list item is clicked. It does not have a default behavior. However, you can override its behavior using the following code snippet. @@ -103,7 +103,7 @@ export default CallLogDemo; -##### 2. onCallButtonClicked +#### 2. onCallButtonClicked `onCallButtonClicked` is a callback function which triggers when the call button in the trailing view is clicked. @@ -144,7 +144,7 @@ export default CallLogDemo; -##### 3. onError +#### 3. onError This is a callback function which is triggered when the component encounters an error. @@ -192,7 +192,7 @@ export default CallLogDemo; **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. CallLogRequestBuilder +#### 1. CallLogRequestBuilder 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) diff --git a/ui-kit/react/v5/conversations.mdx b/ui-kit/react/v5/conversations.mdx index a8ac4651b..bb54d647b 100644 --- a/ui-kit/react/v5/conversations.mdx +++ b/ui-kit/react/v5/conversations.mdx @@ -62,7 +62,7 @@ export default function App() { [Actions](/ui-kit/react/v5/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -##### 1. OnItemClick +#### 1. OnItemClick `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. @@ -85,7 +85,7 @@ const getOnItemClick = (conversation: CometChat.Conversation) => { *** -##### 2. OnSelect +#### 2. OnSelect 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. @@ -117,7 +117,7 @@ const getOnSelect = ( *** -##### 3. OnError +#### 3. OnError This action doesn't change the behavior of the component but rather listens for any errors that occur in the Conversations component. @@ -1100,7 +1100,7 @@ const getOptions = (conversation: CometChat.Conversation) => { -##### Structure of CometChatOption +#### Structure of CometChatOption | Name | Description | | ----------- | ----------------------------------------------------- | diff --git a/ui-kit/react/v5/group-members.mdx b/ui-kit/react/v5/group-members.mdx index 8ef71735d..7cb6f470a 100644 --- a/ui-kit/react/v5/group-members.mdx +++ b/ui-kit/react/v5/group-members.mdx @@ -65,7 +65,7 @@ export default function App() { [Actions](/ui-kit/react/v5/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -##### 1. onSelect +#### 1. onSelect The `onSelect` action is activated when you select the done icon while in selection mode. This returns a list of all the group members that you have selected. @@ -159,7 +159,7 @@ export default GroupMembersDemo; -##### 2. onItemClick +#### 2. onItemClick The `onItemClick` event is activated when you click on the Group Members List item. This action does not come with any predefined behavior. However, you have the flexibility to override this event and tailor it to suit your needs using the following code snippet. @@ -238,7 +238,7 @@ export default GroupMembersDemo; -##### 3. onEmpty +#### 3. onEmpty This action allows you to specify a callback function to be executed when a certain condition, typically the absence of data or content, is met within the component or element. @@ -311,7 +311,7 @@ export default GroupMembersDemo; -##### 4. onError +#### 4. onError This action doesn't change the behavior of the component but rather listens for any errors that occur in the Group Members component. @@ -390,7 +390,7 @@ export default GroupMembersDemo; **Filters** allow you to customize the data displayed in a list within a Component. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK. -##### 1. GroupMembersRequestBuilder +#### 1. GroupMembersRequestBuilder The [GroupMembersRequestBuilder](/sdk/javascript/retrieve-group-members) enables you to filter and customize the group members list based on available parameters in GroupMembersRequestBuilder. This feature allows you to create more specific and targeted queries when fetching groups. The following are the parameters available in [GroupMembersRequestBuilder](/sdk/javascript/retrieve-group-members) @@ -479,7 +479,7 @@ export default GroupMembersDemo; -##### 2. SearchRequestBuilder +#### 2. SearchRequestBuilder The SearchRequestBuilder uses [GroupMembersRequestBuilder](/sdk/javascript/retrieve-group-members) enables you to filter and customize the search list based on available parameters in GroupMembersRequestBuilder. This feature allows you to keep uniformity between the displayed Group Members List and searched Group Members List. diff --git a/ui-kit/react/v5/groups.mdx b/ui-kit/react/v5/groups.mdx index 93befaaf0..1be8ddf63 100644 --- a/ui-kit/react/v5/groups.mdx +++ b/ui-kit/react/v5/groups.mdx @@ -65,7 +65,7 @@ export default function App() { [Actions](/ui-kit/react/v5/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -##### 1. onSelect +#### 1. onSelect The `onSelect` action is activated when you select the done icon while in selection mode. This returns the `group` object along with the boolean flag `selected` to indicate if the group was selected or unselected. @@ -121,7 +121,7 @@ export default GroupsDemo; -##### 2. onItemClick +#### 2. onItemClick The `onItemClick` event is activated when you click on the Group List item. This action does not come with any predefined behavior. However, you have the flexibility to override this event and tailor it to suit your needs using the following code snippet. @@ -163,7 +163,7 @@ export default GroupsDemo; -##### 3. onError +#### 3. onError This action doesn't change the behavior of the component but rather listens for any errors that occur in the Groups component. @@ -209,7 +209,7 @@ export default GroupsDemo; **Filters** allow you to customize the data displayed in a list within a Component. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK. -##### 1. GroupsRequestBuilder +#### 1. GroupsRequestBuilder The [GroupsRequestBuilder](/sdk/javascript/retrieve-groups) enables you to filter and customize the group list based on available parameters in [GroupsRequestBuilder](/sdk/javascript/retrieve-groups). This feature allows you to create more specific and targeted queries when fetching groups. The following are the parameters available in [GroupsRequestBuilder](/sdk/javascript/retrieve-groups) @@ -270,7 +270,7 @@ export default GroupsDemo; -##### 2. SearchRequestBuilder +#### 2. SearchRequestBuilder The SearchRequestBuilder uses [GroupsRequestBuilder](/sdk/javascript/retrieve-groups) enables you to filter and customize the search list based on available parameters in GroupsRequestBuilder. This feature allows you to keep uniformity between the displayed Groups List and searched Group List. diff --git a/ui-kit/react/v5/incoming-call.mdx b/ui-kit/react/v5/incoming-call.mdx index a8d50765a..ed0a6f1a7 100644 --- a/ui-kit/react/v5/incoming-call.mdx +++ b/ui-kit/react/v5/incoming-call.mdx @@ -62,7 +62,7 @@ export default function App() { [Actions](/ui-kit/react/v5/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -##### 1. onAccept +#### 1. onAccept `onAccept` is triggered when you click the accept button of the `Incoming Call` component. You can override this action using the following code snippet. @@ -105,7 +105,7 @@ export default IncomingCallsDemo; -##### 2. onDecline +#### 2. onDecline `onDecline` is triggered when you click the Decline button of the `Incoming Call` component. You can override this action using the following code snippet. @@ -148,7 +148,7 @@ export default IncomingCallsDemo; -##### 3. onError +#### 3. onError This action doesn't change the behavior of the component but rather listens for any errors that occur in the Incoming Call component. diff --git a/ui-kit/react/v5/message-composer.mdx b/ui-kit/react/v5/message-composer.mdx index aea91db67..8caa3f6be 100644 --- a/ui-kit/react/v5/message-composer.mdx +++ b/ui-kit/react/v5/message-composer.mdx @@ -66,7 +66,7 @@ export default function App() { [Actions](/ui-kit/react/v5/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -##### 1. OnSendButtonClick +#### 1. OnSendButtonClick The `OnSendButtonClick` event gets activated when the send message button is clicked. It has a predefined function of sending messages entered in the composer `EditText`. However, you can overide this action with the following code snippet. @@ -102,7 +102,7 @@ export function MessageComposerDemo() { -##### 2. onError +#### 2. onError This action doesn't change the behavior of the component but rather listens for any errors that occur in the MessageList component. @@ -138,7 +138,7 @@ export function MessageComposerDemo() { -##### 3. onTextChange +#### 3. onTextChange This event is triggered as the user starts typing in the Message Composer. diff --git a/ui-kit/react/v5/message-header.mdx b/ui-kit/react/v5/message-header.mdx index eacfd7726..113fdd88b 100644 --- a/ui-kit/react/v5/message-header.mdx +++ b/ui-kit/react/v5/message-header.mdx @@ -69,7 +69,7 @@ export default function App() { [Actions](/ui-kit/react/v5/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -##### 1. OnBack +#### 1. OnBack `OnBack` is triggered when you click on the back button of the Message Header component. You can override this action using the following code snippet. @@ -143,7 +143,7 @@ export default MessageHeaderDemo; *** -##### 2. OnError +#### 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. diff --git a/ui-kit/react/v5/message-list.mdx b/ui-kit/react/v5/message-list.mdx index 59135a042..4445f1073 100644 --- a/ui-kit/react/v5/message-list.mdx +++ b/ui-kit/react/v5/message-list.mdx @@ -76,7 +76,7 @@ To fetch messages for a specific entity, you need to supplement it with `User` o [Actions](/ui-kit/react/v5/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. onThreadRepliesClick +#### 1. onThreadRepliesClick `onThreadRepliesClick` is triggered when you click on the threaded message bubble. The `onThreadRepliesClick` action doesn't have a predefined behavior. You can override this action using the following code snippet. @@ -146,7 +146,7 @@ export function MessageListDemo() { -##### 2. onError +#### 2. onError This action doesn't change the behavior of the component but rather listens for any errors that occur in the MessageList component. @@ -210,7 +210,7 @@ export function MessageListDemo() { -##### 3. onReactionClick +#### 3. onReactionClick `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. @@ -274,7 +274,7 @@ export function MessageListDemo() { -##### 4. onReactionListItemClick +#### 4. onReactionListItemClick `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. @@ -340,7 +340,7 @@ export function MessageListDemo() { ### Filters -##### 1. Messages Request Builder +#### 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). @@ -417,7 +417,7 @@ The following parameters in messageRequestBuilder will always be altered inside -##### 2. Reactions Request Builder +#### 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. diff --git a/ui-kit/react/v5/outgoing-call.mdx b/ui-kit/react/v5/outgoing-call.mdx index 56b694e47..3d1f432ad 100644 --- a/ui-kit/react/v5/outgoing-call.mdx +++ b/ui-kit/react/v5/outgoing-call.mdx @@ -82,7 +82,7 @@ export default function App() { [Actions](/ui-kit/react/v5/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 +#### 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. @@ -176,7 +176,7 @@ export default OutgoingCallDemo; -##### 2. onError +#### 2. onError This action doesn't change the behavior of the component but rather listens for any errors that occur in the Outgoing Call component. diff --git a/ui-kit/react/v5/users.mdx b/ui-kit/react/v5/users.mdx index 06126f693..271042dc6 100644 --- a/ui-kit/react/v5/users.mdx +++ b/ui-kit/react/v5/users.mdx @@ -62,7 +62,7 @@ export default function App() { [Actions](/ui-kit/react/v5/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs. -##### 1. onSelect +#### 1. onSelect The `onSelect` action is activated when you select the done icon while in selection mode. This returns a list of all the users that you have selected. @@ -117,7 +117,7 @@ export default UsersDemo; -##### 2. onItemClick +#### 2. onItemClick The `OnItemClick` event is activated when you click on the UserList 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. @@ -156,7 +156,7 @@ export default UsersDemo; -##### 3. onEmpty +#### 3. onEmpty This action allows you to specify a callback function to be executed when a certain condition, typically the absence of data or content, is met within the component or element. @@ -196,7 +196,7 @@ export default UsersDemo; -##### 4. onError +#### 4. onError This action doesn't change the behavior of the component but rather listens for any errors that occur in the User component. @@ -240,7 +240,7 @@ export default UsersDemo; **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. UserRequestBuilder +#### 1. UserRequestBuilder The [UserRequestBuilder](/sdk/javascript/retrieve-users) enables you to filter and customize the user list based on available parameters in UserRequestBuilder. This feature allows you to create more specific and targeted queries when fetching users. The following are the parameters available in [UserRequestBuilder](/sdk/javascript/retrieve-users) @@ -303,7 +303,7 @@ export default UsersDemo; -##### 2. SearchRequestBuilder +#### 2. SearchRequestBuilder The SearchRequestBuilder uses [UserRequestBuilder](/sdk/javascript/retrieve-users) enables you to filter and customize the search list based on available parameters in UserRequestBuilder. This feature allows you to keep uniformity between the displayed UserList and searched UserList. From 82a9cbf1d634bb3dc95f1c8cc590b0b566a008af Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Thu, 19 Feb 2026 18:13:28 +0530 Subject: [PATCH 55/59] updates css --- ui-kit/react/ai-assistant-chat.mdx | 6 +++--- ui-kit/react/call-buttons.mdx | 2 +- ui-kit/react/call-logs.mdx | 12 ++++++------ ui-kit/react/conversations.mdx | 14 +++++++------- ui-kit/react/incoming-call.mdx | 10 +++++----- ui-kit/react/message-template.mdx | 16 ++++++++-------- ui-kit/react/outgoing-call.mdx | 10 +++++----- ui-kit/react/search.mdx | 12 ++++++------ 8 files changed, 41 insertions(+), 41 deletions(-) diff --git a/ui-kit/react/ai-assistant-chat.mdx b/ui-kit/react/ai-assistant-chat.mdx index 8a400b29d..779d91675 100644 --- a/ui-kit/react/ai-assistant-chat.mdx +++ b/ui-kit/react/ai-assistant-chat.mdx @@ -451,7 +451,7 @@ export function AIAssistantChatDemo = () => { - + ```css lines .cometchat-ai-assistant-chat .cometchat-ai-assistant-chat__suggested-message-pill { @@ -793,7 +793,7 @@ export function AIAssistantChatDemo() { - + ```css lines .cometchat-ai-assistant-chat__empty-chat-greeting { display: flex; @@ -886,7 +886,7 @@ export function AIAssistantChatDemo() { - + ```css lines .cometchat-ai-assistant-chat__empty-chat-intro { display: flex; diff --git a/ui-kit/react/call-buttons.mdx b/ui-kit/react/call-buttons.mdx index 38cd79aba..0b516d5ef 100644 --- a/ui-kit/react/call-buttons.mdx +++ b/ui-kit/react/call-buttons.mdx @@ -374,7 +374,7 @@ export default CallButtonDemo; - + ```css lines .cometchat-call-button { display: flex; diff --git a/ui-kit/react/call-logs.mdx b/ui-kit/react/call-logs.mdx index 247b135a6..3fd35a67e 100644 --- a/ui-kit/react/call-logs.mdx +++ b/ui-kit/react/call-logs.mdx @@ -374,7 +374,7 @@ export default CallLogDemo; - + ```css lines .cometchat .cometchat-call-logs .cometchat-list__header-title { background-color: #fce9ea; @@ -681,7 +681,7 @@ export default CallLogDemo; - + ```css lines .cometchat .cometchat-call-logs .cometchat-list-item__trailing-view { width: auto; @@ -845,7 +845,7 @@ export default CallLogDemo; - + ```css lines .cometchat-call-logs__list-item-subtitle-text { overflow: hidden; @@ -960,7 +960,7 @@ export default CallLogDemo; - + ```css lines .cometchat .cometchat-call-logs .cometchat-list-item__trailing-view { width: auto; @@ -1060,7 +1060,7 @@ export default CallLogDemo; - + ```css lines .call-log-avatar { display: flex; @@ -1169,7 +1169,7 @@ export default CallLogDemo; - + ```css lines .call-log-title { overflow: hidden; diff --git a/ui-kit/react/conversations.mdx b/ui-kit/react/conversations.mdx index 3af8050c4..202168428 100644 --- a/ui-kit/react/conversations.mdx +++ b/ui-kit/react/conversations.mdx @@ -354,7 +354,7 @@ Using CSS you can customize the look and feel of the component in your app like - + ```css lines .cometchat-conversations .cometchat-list-item__body-title, .cometchat-conversations .cometchat-list__header-title, @@ -496,7 +496,7 @@ const getItemView = (conversation: CometChat.Conversation) => { - + ```css lines .cometchat-conversations .cometchat-avatar { border-radius: 8px; @@ -665,7 +665,7 @@ const CustomTrailingButtonView = (conv: CometChat.Conversation) => { - + ```css lines .conversations__trailing-view { display: flex; @@ -951,7 +951,7 @@ const getHeaderView = () => { - + ```css lines .conversations__header { display: flex; @@ -1086,7 +1086,7 @@ const customTitleView = (conversation: CometChat.Conversation) => { - + ```css lines .cometchat-conversations .conversations__title-view { display: flex; @@ -1174,7 +1174,7 @@ function getFormattedTimestamp(timestamp: number): string { - + ```css lines .cometchat-conversations .cometchat-list-item__body-subtitle { overflow: hidden; @@ -1258,7 +1258,7 @@ const getOptions = (conversation: CometChat.Conversation) => { - + ```css lines .cometchat-conversations .cometchat-menu-list__main-menu-item-icon-delete { background: red; diff --git a/ui-kit/react/incoming-call.mdx b/ui-kit/react/incoming-call.mdx index e0341f247..cf90bf14c 100644 --- a/ui-kit/react/incoming-call.mdx +++ b/ui-kit/react/incoming-call.mdx @@ -380,7 +380,7 @@ export default IncomingCallsDemo; - + ```css lines .cometchat-incoming-call { display: flex; @@ -661,7 +661,7 @@ export default IncomingCallsDemo; - + ```css lines .cometchat-incoming-call__avatar { display: none; @@ -739,7 +739,7 @@ export default IncomingCallsDemo; - + ```css lines .incoming-call__title-wrapper { display: flex; @@ -838,7 +838,7 @@ export default IncomingCallsDemo; - + ```css lines .incoming-call__avatar { display: flex; @@ -941,7 +941,7 @@ export default IncomingCallsDemo; - + ```css lines .incoming-call__itemview { display: flex; diff --git a/ui-kit/react/message-template.mdx b/ui-kit/react/message-template.mdx index 438758bd5..7852cea55 100644 --- a/ui-kit/react/message-template.mdx +++ b/ui-kit/react/message-template.mdx @@ -509,7 +509,7 @@ export { CustomMessageTemplate }; - + ```css lines .content-view__header-banner { border-radius: 12px; @@ -687,7 +687,7 @@ export { CustomMessageTemplate }; - + ```css lines .cometchat .cometchat-message-bubble__body { border-radius: 12px 12px 0px 0px; @@ -862,7 +862,7 @@ export { CustomMessageTemplate }; - + ```css lines .cometchat .cometchat-message-bubble__body-footer-view { display: flex; @@ -1111,7 +1111,7 @@ export { CustomMessageTemplate }; - + ```css lines .bubble-view { display: flex; @@ -1336,7 +1336,7 @@ export { CustomMessageTemplate }; - + ```css lines .status-info { display: flex; @@ -1438,7 +1438,7 @@ export { CustomMessageTemplate }; - + ```css lines .cometchat .cometchat-message-bubble-outgoing @@ -1618,7 +1618,7 @@ export { CustomMessageTemplate }; - + ```css lines #refresh.cometchat-menu-list__menu .cometchat-menu-list__sub-menu-item-title { overflow: hidden; @@ -1884,7 +1884,7 @@ export { CustomMessageTemplate }; - + ```css lines .content-view { display: flex; diff --git a/ui-kit/react/outgoing-call.mdx b/ui-kit/react/outgoing-call.mdx index 3cb3b15c3..e774c2dbf 100644 --- a/ui-kit/react/outgoing-call.mdx +++ b/ui-kit/react/outgoing-call.mdx @@ -426,7 +426,7 @@ export default OutgoingCallDemo; - + ```css lines .cometchat-outgoing-call__avatar .cometchat-avatar { display: flex; @@ -658,7 +658,7 @@ export default OutgoingCallDemo; - + ```css lines .outgoing-call__title { color: #141414; @@ -777,7 +777,7 @@ export default OutgoingCallDemo; - + ```css lines .outgoing-call__subtitle { display: flex; @@ -915,7 +915,7 @@ export default OutgoingCallDemo; - + ```css lines .outgoing-call__avatar .cometchat-avatar, .outgoing-call__avatar .cometchat-avatar__image { @@ -1049,7 +1049,7 @@ export default OutgoingCallDemo; - + ```css lines .outgoing-call__cancel-button-wrapper { height: 64px; diff --git a/ui-kit/react/search.mdx b/ui-kit/react/search.mdx index 7fc7a43bc..2a8839333 100644 --- a/ui-kit/react/search.mdx +++ b/ui-kit/react/search.mdx @@ -336,7 +336,7 @@ import { CometChatSearch } from "@cometchat/chat-uikit-react"; - + ```css lines .cometchat-search * { font-family: 'Times New Roman', Times !important; @@ -529,7 +529,7 @@ const getMessageItemView = (message: CometChat.BaseMessage) => { - + ```css lines .cometchat-search__message-list-item { background: var(--cometchat-extended-primary-color-100); @@ -596,7 +596,7 @@ const getMessageLeadingView = (message: CometChat.BaseMessage) => { - + ```css lines .cometchat-search__message-list-item-leading-view { height: 48px; @@ -665,7 +665,7 @@ const getMessageTitleView = (message: CometChat.BaseMessage) => { - + ```css lines .cometchat-search__message-list-item-title { display: flex; @@ -736,7 +736,7 @@ const getMessageSubtitleView = (message: CometChat.BaseMessage) => { - + ```css lines .cometchat-search__message-list-item-subtitle { background: var(--cometchat-extended-primary-color-100); @@ -833,7 +833,7 @@ const getMessageTrailingView = (message: CometChat.BaseMessage) => { - + ```css lines .cometchat-search__message-trailing-view { display: flex; From e635b40ec23d2449b7dcd6d06616d7a2c7f015d0 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Thu, 19 Feb 2026 18:48:27 +0530 Subject: [PATCH 56/59] Update outgoing-call.mdx --- ui-kit/react/outgoing-call.mdx | 38 +++++++++++++++++----------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/ui-kit/react/outgoing-call.mdx b/ui-kit/react/outgoing-call.mdx index e774c2dbf..f821feebb 100644 --- a/ui-kit/react/outgoing-call.mdx +++ b/ui-kit/react/outgoing-call.mdx @@ -62,7 +62,7 @@ The `Outgoing Call` is comprised of the following components: -```tsx lines +```tsx lines highlight={12} import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatOutgoingCall, @@ -74,7 +74,7 @@ const OutgoingCallDemo = () => { const [call, setCall] = React.useState(); React.useEffect(() => { - const uid = "uid"; + const uid = "uid"; //TODO: replace with actual UID of the call receiver const callObject = new CometChat.Call( uid, @@ -97,7 +97,7 @@ export default OutgoingCallDemo; -```jsx lines +```jsx lines highlight={12} import React, { useState, useEffect } from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { @@ -143,7 +143,7 @@ The `onCallCanceled` event gets activated when the cancel button is clicked. It -```ts lines +```ts lines highlight={12} import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatOutgoingCall, @@ -186,7 +186,7 @@ export default OutgoingCallDemo; -```js lines +```js lines highlight={9} import React, { useState, useEffect } from 'react'; import { CometChat } from '@cometchat/chat-sdk-javascript'; import { CometChatOutgoingCall, CometChatUIKitConstants } from '@cometchat/chat-uikit-react'; @@ -237,7 +237,7 @@ This action doesn't change the behavior of the component but rather listens for -```ts lines +```ts lines highlight={12} import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatOutgoingCall, @@ -279,7 +279,7 @@ export default OutgoingCallDemo; -```js lines +```js lines highlight={12} import React, { useState, useEffect } from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { @@ -354,7 +354,7 @@ Using CSS you can customize the look and feel of the component in your app like -```ts lines +```ts lines highlight={13} import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatOutgoingCall, @@ -390,7 +390,7 @@ export default OutgoingCallDemo; -```js lines +```js lines highlight={13} import React, { useState, useEffect } from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { @@ -462,7 +462,7 @@ Here is a code snippet demonstrating how you can customize the functionality of -```ts lines +```ts lines highlight={12} import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatOutgoingCall, @@ -499,7 +499,7 @@ export default OutgoingCallDemo; -```js lines +```js lines highlight={12} import React, { useState, useEffect } from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { @@ -568,7 +568,7 @@ Use the following code to achieve the customization shown above. -```ts lines +```ts lines highlight={12} import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatOutgoingCall, @@ -613,7 +613,7 @@ export default OutgoingCallDemo; -```js lines +```js lines highlight={12} import React, { useState, useEffect } from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { @@ -685,7 +685,7 @@ Use the following code to achieve the customization shown above. -```ts lines +```ts lines highlight={12} import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatOutgoingCall, @@ -731,7 +731,7 @@ export default OutgoingCallDemo; -```js lines +```js lines highlight={12} import React, { useState, useEffect } from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { @@ -815,7 +815,7 @@ Use the following code to achieve the customization shown above. -```ts lines +```ts lines highlight={13} import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatAvatar, @@ -865,7 +865,7 @@ export default OutgoingCallDemo; -```js lines +```js lines highlight={13} import React, { useState, useEffect } from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { @@ -953,7 +953,7 @@ Use the following code to achieve the customization shown above. -```ts lines +```ts lines highlight={12} import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatOutgoingCall, @@ -1001,7 +1001,7 @@ export default OutgoingCallDemo; -```js lines +```js lines highlight={12} import React, { useState, useEffect } from "react"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { From 82e44b4388429e9546fafa6eaa846880d3586b61 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Thu, 19 Feb 2026 19:01:13 +0530 Subject: [PATCH 57/59] Update methods.mdx --- ui-kit/react/methods.mdx | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/ui-kit/react/methods.mdx b/ui-kit/react/methods.mdx index 47a044f8d..3e4f2556e 100644 --- a/ui-kit/react/methods.mdx +++ b/ui-kit/react/methods.mdx @@ -67,7 +67,7 @@ Make sure you replace the **APP\_ID**, **REGION** and **AUTH\_KEY** with your Co -```js lines +```js lines highlight={4-6} import { UIKitSettingsBuilder } from "@cometchat/uikit-shared"; //import shared package const COMETCHAT_CONSTANTS = { @@ -102,7 +102,7 @@ If you want to use session storage instead of the default local storage, you can -```js lines +```js lines highlight={5-7} import { CometChat } from "@cometchat/chat-sdk-javascript"; import { UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; @@ -130,7 +130,7 @@ CometChatUIKit.init(UIKitSettings)?.then(() => { -```ts lines +```ts lines highlight={5-7} import { CometChat } from "@cometchat/chat-sdk-javascript"; import { UIKitSettingsBuilder } from "@cometchat/chat-uikit-react"; @@ -186,7 +186,7 @@ This simple authentication procedure is useful when you are creating a POC or if -```js lines +```js lines highlight={3} import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package const UID = "UID"; @@ -211,7 +211,7 @@ CometChatUIKit.getLoggedinUser() -```ts lines +```ts lines highlight={3} import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package const UID: string = "UID"; @@ -249,7 +249,7 @@ This advanced authentication procedure does not use the Auth Key directly in you -```js lines +```js lines highlight={3} import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package const authToken = "AUTH_TOKEN"; @@ -275,7 +275,7 @@ CometChatUIKit.getLoggedinUser() -```ts lines +```ts lines highlight={3} import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package const authToken: string = "AUTH_TOKEN"; @@ -325,7 +325,7 @@ This method takes a `User` object and the `Auth Key` as input parameters and ret -```js lines +```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 @@ -352,7 +352,7 @@ CometChatUIKit.createUser(user, authKey) -```ts lines +```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 @@ -388,7 +388,7 @@ This method takes a `User` object and the `Auth Key` as inputs and returns the u -```js lines +```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 @@ -408,7 +408,7 @@ CometChatUIKit.updateUser(user, authKey) -```ts lines +```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 @@ -439,7 +439,7 @@ This method sends a text message in a 1:1 or group chat. You need to pass a `Tex -```tsx lines +```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 @@ -463,7 +463,7 @@ CometChatUIKit.sendTextMessage(textMessage) -```tsx lines +```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 @@ -502,7 +502,7 @@ Make sure you replace the `INPUT FILE OBJECT` with the actual [file](https://dev -```tsx lines +```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 @@ -527,7 +527,7 @@ CometChatUIKit.sendMediaMessage(mediaMessage) -```tsx lines +```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 @@ -561,7 +561,7 @@ This method allows you to send custom messages which are neither text nor media -```tsx lines +```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 @@ -590,7 +590,7 @@ CometChatUIKit.sendCustomMessage(customMessage) -```tsx lines +```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 From 1fe008e8021d2516070bee398b51fafad85f53a2 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Thu, 19 Feb 2026 19:04:30 +0530 Subject: [PATCH 58/59] Update events.mdx --- ui-kit/react/events.mdx | 70 ++++++++++++++++++++--------------------- 1 file changed, 35 insertions(+), 35 deletions(-) diff --git a/ui-kit/react/events.mdx b/ui-kit/react/events.mdx index c8bc8e06d..ad0c3553b 100644 --- a/ui-kit/react/events.mdx +++ b/ui-kit/react/events.mdx @@ -30,8 +30,8 @@ All components have the ability to emit events. These events are dispatched in r | Name | Description | | ------------------------- | ------------------------------------------------------------------------------------------------ | -| ccConversationDeleted | This event is triggered when the user successfully deletes a conversation. | -| ccUpdateConversation | This event is triggered to update a conversation in the conversation list. Takes a Conversation object to update. | +| **ccConversationDeleted** | This event is triggered when the user successfully deletes a conversation. | +| **ccUpdateConversation** | This event is triggered to update a conversation in the conversation list. Takes a Conversation object to update. | ### CometChatUserEvents @@ -41,8 +41,8 @@ It consists of the following events: | Name | Description | | --------------- | ------------------------------------------------------------------------- | -| ccUserBlocked | This event is triggered when the user successfully blocks another user. | -| ccUserUnblocked | This event is triggered when the user successfully unblocks another user. | +| **ccUserBlocked** | This event is triggered when the user successfully blocks another user. | +| **ccUserUnblocked** | This event is triggered when the user successfully unblocks another user. | ### CometChatGroupEvents @@ -52,16 +52,16 @@ It consists of the following events: | Name | Description | | ------------------------- | ------------------------------------------------------------------------------------ | -| ccGroupCreated | This event is triggered when the user creates a group successfully | -| ccGroupDeleted | This event is triggered when the group member deletes the group successfully | -| ccGroupLeft | This event is triggered when the group member leaves the group successfully | -| ccGroupMemberScopeChanged | This event is triggered when the group member's scope is updated successfully | -| ccGroupMemberKicked | This event is triggered when the group member is kicked | -| ccGroupMemberBanned | This event is triggered when the group member is banned | -| ccGroupMemberUnbanned | This event is triggered when the group member is un-banned | -| ccGroupMemberJoined | This event is triggered when a user joins the group | -| ccGroupMemberAdded | This event is triggered when a user is added to the group | -| ccOwnershipChanged | This event is triggered when the group ownership is assigned to another group member | +| **ccGroupCreated** | This event is triggered when the user creates a group successfully | +| **ccGroupDeleted** | This event is triggered when the group member deletes the group successfully | +| **ccGroupLeft** | This event is triggered when the group member leaves the group successfully | +| **ccGroupMemberScopeChanged** | This event is triggered when the group member's scope is updated successfully | +| **ccGroupMemberKicked** | This event is triggered when the group member is kicked | +| **ccGroupMemberBanned** | This event is triggered when the group member is banned | +| **ccGroupMemberUnbanned** | This event is triggered when the group member is un-banned | +| **ccGroupMemberJoined** | This event is triggered when a user joins the group | +| **ccGroupMemberAdded** | This event is triggered when a user is added to the group | +| **ccOwnershipChanged** | This event is triggered when the group ownership is assigned to another group member | ### CometChatMessageEvents @@ -71,22 +71,22 @@ It consists of the following events: | Name | Description | | -------------------------- | --------------------------------------------------------------------------------------------------------- | -| ccMessageSent | This event is triggered when the sent message is in transit and also when it is received by the receiver. | -| ccMessageEdited | This event is triggered when the user successfully edits the message. | -| ccReplyToMessage | This event is triggered when the user successfully replies to a message. | -| ccMessageDeleted | This event is triggered when the user successfully deletes the message. | -| ccMessageRead | This event is triggered when the sent message is read by the receiver. | -| ccLiveReaction | This event is triggered when the user sends a live reaction. | -| onTextMessageReceived | This event is emitted when the CometChat SDK listener emits a text message. | -| onMediaMessageReceived | This event is emitted when the CometChat SDK listener emits a media message. | -| onCustomMessageReceived | This event is emitted when the CometChat SDK listener emits a custom message. | -| onTypingStarted | This event is emitted when the CometChat SDK listener indicates that a user has started typing. | -| onTypingEnded | This event is emitted when the CometChat SDK listener indicates that a user has stopped typing. | -| onMessagesDelivered | This event is emitted when the CometChat SDK listener indicates that messages have been delivered. | -| onMessagesRead | This event is emitted when the CometChat SDK listener indicates that messages have been read. | -| onMessageEdited | This event is emitted when the CometChat SDK listener indicates that a message has been edited. | -| onMessageDeleted | This event is emitted when the CometChat SDK listener indicates that a message has been deleted. | -| onTransientMessageReceived | This event is emitted when the CometChat SDK listener emits a transient message. | +| **ccMessageSent** | This event is triggered when the sent message is in transit and also when it is received by the receiver. | +| **ccMessageEdited** | This event is triggered when the user successfully edits the message. | +| **ccReplyToMessage** | This event is triggered when the user successfully replies to a message. | +| **ccMessageDeleted** | This event is triggered when the user successfully deletes the message. | +| **ccMessageRead** | This event is triggered when the sent message is read by the receiver. | +| **ccLiveReaction** | This event is triggered when the user sends a live reaction. | +| **onTextMessageReceived** | This event is emitted when the CometChat SDK listener emits a text message. | +| **onMediaMessageReceived** | This event is emitted when the CometChat SDK listener emits a media message. | +| **onCustomMessageReceived** | This event is emitted when the CometChat SDK listener emits a custom message. | +| **onTypingStarted** | This event is emitted when the CometChat SDK listener indicates that a user has started typing. | +| **onTypingEnded** | This event is emitted when the CometChat SDK listener indicates that a user has stopped typing. | +| **onMessagesDelivered** | This event is emitted when the CometChat SDK listener indicates that messages have been delivered. | +| **onMessagesRead** | This event is emitted when the CometChat SDK listener indicates that messages have been read. | +| **onMessageEdited** | This event is emitted when the CometChat SDK listener indicates that a message has been edited. | +| **onMessageDeleted** | This event is emitted when the CometChat SDK listener indicates that a message has been deleted. | +| **onTransientMessageReceived** | This event is emitted when the CometChat SDK listener emits a transient message. | ### CometChatCallEvents @@ -96,10 +96,10 @@ It consists of the following events: | Name | Description | | -------------- | ---------------------------------------------------------------------------- | -| ccOutgoingCall | This event is triggered when the user initiates a voice/video call. | -| ccCallAccepted | This event is triggered when the initiated call is accepted by the receiver. | -| ccCallRejected | This event is triggered when the initiated call is rejected by the receiver. | -| ccCallEnded | This event is triggered when the initiated call successfully ends. | +| **ccOutgoingCall** | This event is triggered when the user initiates a voice/video call. | +| **ccCallAccepted** | This event is triggered when the initiated call is accepted by the receiver. | +| **ccCallRejected** | This event is triggered when the initiated call is rejected by the receiver. | +| **ccCallEnded** | This event is triggered when the initiated call successfully ends. | ### UI events @@ -109,7 +109,7 @@ It consists of the following events: | Name | Description | | ------------------- | ---------------------------------------------------------------------------- | -| ccActiveChatChanged | This event is triggered when the user navigates to a particular chat window. | +| **ccActiveChatChanged** | This event is triggered when the user navigates to a particular chat window. | *** From b6c9467f19b9ea2cbeaeffbad82a7d424697cfbc Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Tue, 24 Feb 2026 19:00:57 +0530 Subject: [PATCH 59/59] Update overview.mdx --- ui-kit/react/overview.mdx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/ui-kit/react/overview.mdx b/ui-kit/react/overview.mdx index 8425a860b..1f7a6c624 100644 --- a/ui-kit/react/overview.mdx +++ b/ui-kit/react/overview.mdx @@ -43,13 +43,13 @@ import { CometChatConversations } from "@cometchat/chat-uikit-react"; **AI Agent Component Spec** -**Package:** `@cometchat/chat-uikit-react` -**Install:** `npm install @cometchat/chat-uikit-react` -**Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` — must complete before rendering any component -**Key components:** `CometChatConversations`, `CometChatMessageList`, `CometChatMessageComposer`, `CometChatMessageHeader`, `CometChatUsers`, `CometChatGroups` -**Theming:** Override CSS variables on `.cometchat` class. See [Theming](/ui-kit/react/theme) -**Calling:** Requires separate `@cometchat/calls-sdk-javascript` package. See [Call Features](/ui-kit/react/call-features) -**SSR:** Components require browser APIs — use client-side only rendering for Next.js/Astro +- **Package:** `@cometchat/chat-uikit-react` +- **Install:** `npm install @cometchat/chat-uikit-react` +- **Required setup:** `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` — must complete before rendering any component +- **Key components:** `CometChatConversations`, `CometChatMessageList`, `CometChatMessageComposer`, `CometChatMessageHeader`, `CometChatUsers`, `CometChatGroups` +- **Theming:** Override CSS variables on `.cometchat` class. See [Theming](/ui-kit/react/theme) +- **Calling:** Requires separate `@cometchat/calls-sdk-javascript` package. See [Call Features](/ui-kit/react/call-features) +- **SSR:** Components require browser APIs — use client-side only rendering for Next.js/Astro The **CometChat UI Kit** for React is a powerful solution designed to seamlessly integrate chat functionality into applications. It provides a robust set of **prebuilt UI components** that are **modular, customizable, and highly scalable**, allowing developers to accelerate their development process with minimal effort.